:root{
  --bg-deep: #150c29;
  --bg-mid: #1e1440;
  --bg-panel: #171029;
  --bg-card: #0b0714;
  --line: #3a2d63;
  --purple: #7c5cfa;
  --purple-dark: #5b3fd1;
  --purple-soft: #b3a1ff;
  --red: #ff4d5e;
  --green: #2ecc71;
  --gold: #ece8d9;
  --text: #ffffff;
  --text-dim: #a99fd1;
  --mono: 'Arial', 'Helvetica Neue', Helvetica, sans-serif;
  --disp: 'Arial', 'Helvetica Neue', Helvetica, sans-serif;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:
    radial-gradient(circle at 12% 8%, rgba(124,92,250,.18) 0%, transparent 40%),
    radial-gradient(circle at 88% 15%, rgba(91,63,209,.22) 0%, transparent 45%),
    radial-gradient(circle at 50% 100%, rgba(124,92,250,.12) 0%, transparent 50%),
    linear-gradient(160deg, var(--bg-deep) 0%, var(--bg-mid) 55%, var(--bg-deep) 100%);
  color:var(--text);
  font-family: var(--disp);
  min-height:100vh;
}

/* ---------- LOGIN ---------- */
#login-screen{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
}
.login-box{
  width:100%; max-width:380px; background:var(--bg-panel);
  border:1px solid var(--line); border-left:3px solid var(--purple);
  padding:36px 32px; position:relative;
}
.login-eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:3px; color:var(--purple-soft); text-transform:uppercase; margin-bottom:6px; font-weight:700; }
.login-title{ font-size:26px; font-weight:800; letter-spacing:1px; text-transform:uppercase; margin:0 0 26px 0; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-family:var(--mono); font-size:11px; color:var(--text-dim); letter-spacing:1px; text-transform:uppercase; margin-bottom:6px; font-weight:700; }
.field input{ width:100%; background:var(--bg-card); border:1px solid var(--line); color:var(--text); padding:11px 12px; font-size:14px; font-family:var(--disp); outline:none; }
.field input:focus{ border-color:var(--purple); }
.login-btn{
  width:100%; margin-top:10px; background:var(--purple); color:#fff; border:none;
  padding:12px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase;
  font-size:14px; font-family:var(--disp); cursor:pointer;
}
.login-btn:hover{ background:var(--purple-dark); }
.login-error{ color:var(--red); font-family:var(--mono); font-size:12px; margin-top:10px; min-height:16px; }

/* ---------- APP SHELL ---------- */
#app{ padding:28px 18px 60px; }
.topbar{ display:flex; align-items:center; justify-content:space-between; max-width:1500px; margin:0 auto 6px; flex-wrap:wrap; gap:10px; }
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:11px; letter-spacing:2px; color:var(--text-dim); }
.brand .mark{ width:10px; height:26px; background:var(--purple); clip-path: polygon(30% 0,100% 0,70% 100%,0 100%); }
.badge{ font-family:var(--mono); font-size:10px; letter-spacing:1.5px; padding:4px 9px; border:1px solid var(--line); text-transform:uppercase; font-weight:700; }
.badge.admin{ color:var(--purple-soft); border-color:var(--purple); }
.badge.view{ color:var(--text-dim); }

header.title-block{ text-align:center; max-width:1500px; margin:6px auto 22px; }
h1{ font-size:30px; letter-spacing:1.5px; margin:0 0 6px; text-transform:uppercase; font-weight:800; font-family:var(--disp); }
h1 span{ color:var(--purple-soft); }
.subtitle{ color:var(--text-dim); font-size:13px; font-family:var(--mono); }

.toolbar{ display:flex; gap:10px; justify-content:center; margin:14px 0 30px; flex-wrap:wrap; }
.btn{ background:var(--bg-card); color:var(--text); border:1px solid var(--line); padding:9px 18px; font-family:var(--mono); font-size:12px; letter-spacing:1px; text-transform:uppercase; cursor:pointer; font-weight:700; }
.btn:hover{ border-color:var(--purple); color:var(--purple-soft); }
.btn.logout{ margin-left:auto; }
.btn.danger{ border-color:#5a2050; color:#ff8a95; }
.btn.danger:hover{ background:#2a1030; border-color:var(--red); color:var(--red); }

.bracket-scroll{ overflow-x:auto; padding-bottom:10px; width:100%; }
.bracket{ display:flex; gap:16px; width:max-content; margin:0 auto; align-items:center; transform-origin: top center; }
.round-col{ display:flex; flex-direction:column; }
.round-col.center-col{ justify-content:center; align-items:center; }
.round-label{
  text-align:center; font-family:var(--disp); font-size:11px; letter-spacing:1px;
  color:var(--purple); text-transform:uppercase; margin-bottom:10px; white-space:nowrap;
  background:#ffffff; padding:7px 6px; font-weight:800; transition:background .2s, color .2s;
}
.round-label.has-data{ background:var(--purple); color:#fff; }
.matches{ display:flex; flex-direction:column; justify-content:space-around; flex:1; gap:10px; }

.match{ display:flex; flex-direction:column; width:128px; }
.slot{ display:flex; align-items:center; gap:6px; background:var(--bg-card); border:1px solid var(--line); padding:7px 8px; cursor:default; transition:background .15s, border-color .15s; position:relative; }
.slot .avatar{ width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:9px; font-weight:800; flex-shrink:0; }
.slot .names{ overflow:hidden; flex:1; }
.slot .pname{ font-size:12px; font-weight:700; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:var(--disp); }
.slot.tbd .pname{ color:var(--text-dim); font-style:italic; font-weight:600; }
.slot.clickable{ cursor:pointer; }
.slot.clickable:hover{ background:#1a1030; border-color:var(--purple); }
.slot.winner{ background:#1e1440; border-color:var(--purple); }
.slot.winner .pname{ color:var(--purple-soft); }
.slot.loser{ opacity:.4; }

.champion-box{ width:150px; background:linear-gradient(160deg,#2c1f66,#180f38); border:1px solid var(--purple); padding:16px 10px; text-align:center; }
.champion-box .trophy{ font-size:26px; margin-bottom:6px; }
.champion-box .clabel{ font-family:var(--mono); font-size:10px; letter-spacing:2px; color:var(--purple-soft); text-transform:uppercase; margin-bottom:6px; font-weight:800; }
.champion-box .cname{ font-size:15px; font-weight:800; color:#fff; font-family:var(--disp); }
.champion-box .cname.tbd{ color:var(--text-dim); font-style:italic; font-weight:600; }

footer.note{ text-align:center; color:var(--text-dim); font-family:var(--mono); font-size:11px; margin-top:34px; }

/* ---------- MANUAL ZOOM CONTROL ---------- */
.zoom-bar{ display:flex; align-items:center; justify-content:center; gap:8px; margin:0 0 18px; }
.zoom-bar .btn{ padding:6px 12px; }
.zoom-bar .zoom-label{ font-family:var(--mono); font-size:12px; color:var(--text-dim); min-width:48px; text-align:center; }

/* ---------- PLAYER PROFILE MODAL ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(10,6,24,.75); z-index:100;
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.modal-box{
  width:100%; max-width:380px; background:var(--bg-panel);
  border:1px solid var(--line); border-left:3px solid var(--purple); padding:28px;
}
.modal-box h3{ margin:0 0 4px; font-size:18px; letter-spacing:1px; text-transform:uppercase; font-family:var(--disp); }
.modal-header{ display:flex; align-items:center; gap:12px; margin-bottom:22px; }
.modal-header .avatar{ width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:16px; font-weight:800; flex-shrink:0; }
.modal-subtle{ font-family:var(--mono); font-size:11px; color:var(--text-dim); letter-spacing:1px; text-transform:uppercase; }

.profile-row{ display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--line); }
.profile-row:last-child{ border-bottom:none; }
.profile-row .plabel{ font-family:var(--mono); font-size:11px; color:var(--text-dim); letter-spacing:1px; text-transform:uppercase; }
.profile-row .pvalue{ font-weight:700; font-family:var(--disp); }

.modal-divider{ border:none; border-top:1px dashed var(--line); margin:22px 0; }
.modal-section-label{ font-family:var(--mono); font-size:11px; color:var(--text-dim); letter-spacing:1px; text-transform:uppercase; margin-bottom:12px; font-weight:700; }

.modal-actions{ display:flex; gap:10px; margin-top:22px; }
.modal-actions .btn{ flex:1; text-align:center; }
.modal-actions .btn.primary{ background:var(--purple); color:#fff; border-color:var(--purple); font-weight:800; }
.modal-actions .btn.primary:hover{ background:var(--purple-dark); color:#fff; }
.modal-actions .btn.advance{ background:var(--green); color:#08240f; border-color:var(--green); font-weight:800; }
.modal-actions .btn.advance:hover{ background:#27b866; color:#08240f; }
.modal-actions .btn.remove{ border-color:#5a2050; color:#ff8a95; }
.modal-actions .btn.remove:hover{ background:#2a1030; border-color:var(--red); color:var(--red); }

/* ---------- LIVE TOGGLE (admin) ---------- */
.btn.live-toggle{ display:flex; align-items:center; gap:7px; }
.btn.live-toggle .dot{ width:8px; height:8px; border-radius:50%; background:var(--text-dim); flex-shrink:0; }
.btn.live-toggle.is-live{ border-color:var(--green); color:var(--green); }
.btn.live-toggle.is-live .dot{ background:var(--green); box-shadow:0 0 6px var(--green); animation:pulse-dot 1.6s ease-in-out infinite; }
@keyframes pulse-dot{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

/* ---------- COMING SOON (public) ---------- */
.coming-soon{ text-align:center; padding:110px 20px 90px; max-width:700px; margin:0 auto; }
.coming-soon .dot{ width:8px; height:8px; border-radius:50%; background:var(--text-dim); display:inline-block; margin-right:8px; }
.coming-soon .offline-badge{
  font-family:var(--mono); font-size:11px; letter-spacing:2px; color:var(--text-dim);
  text-transform:uppercase; display:inline-flex; align-items:center;
  border:1px solid var(--line); padding:6px 14px; margin-bottom:28px; font-weight:700;
}
.coming-soon h2{
  font-size:52px; line-height:1.1; letter-spacing:2px; text-transform:uppercase;
  font-weight:800; margin:0 0 16px; color:var(--text); font-family:var(--disp);
}
.coming-soon h2 span{ color:var(--purple-soft); }
.coming-soon p{ color:var(--text-dim); font-family:var(--mono); font-size:13px; margin:0; }
@media (max-width:600px){ .coming-soon h2{ font-size:32px; } }

@media (max-width: 900px){ .bracket-scroll{ overflow-x:scroll; } }