:root {
  color-scheme: dark;
  --ink: #f5f3ed;
  --muted: #9b9da3;
  --dim: #696d77;
  --bg: #11151c;
  --panel: #191e27;
  --line: #292f3a;
  --red: #fa584e;
  --blue: #4e91ff;
  --lime: #cbf36a;
  font-family: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--bg); }
button, input, textarea { font: inherit; }
button { color: inherit; }
[hidden] { display: none !important; }

.host-shell, .join-shell, .admin-shell { width: min(1180px, calc(100% - 64px)); margin: 0 auto; }
.topbar { height: 88px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.075); }
.wordmark { color: var(--ink); text-decoration: none; letter-spacing: .12em; font-size: 13px; font-weight: 700; }
.wordmark span { color: var(--muted); font-weight: 500; }
.quiet-link { color: var(--muted); font-size: 13px; text-decoration: none; transition: color .18s; }
.quiet-link:hover { color: var(--ink); }
.eyebrow, .team-kicker, .match-index, .room-pill, .vote-status, .card-color, .mobile-state { font-family: 'DM Mono', ui-monospace, monospace; letter-spacing: .12em; font-size: 11px; font-weight: 500; }
.eyebrow { color: var(--muted); display: flex; align-items: center; gap: 9px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); display: inline-block; box-shadow: 0 0 14px rgba(203,243,106,.4); }
h1 { letter-spacing: -.065em; font-weight: 600; }
h1 span { color: var(--muted); }

/* Host lobby */
.lobby-view { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 32px 0; }
.lobby-view h1.atom-title { margin: 0 0 16px; color: var(--ink); font-size: 17px; line-height: 1.2; font-weight: 500; letter-spacing: .035em; }
.qr-frame { width: min(60vh, 540px); height: min(60vh, 540px); min-width: 260px; min-height: 260px; padding: 13px; border-radius: 8px; background: #fff; box-shadow: 0 18px 54px rgba(0,0,0,.32); }
.qr-frame img { display: block; width: 100%; height: 100%; image-rendering: pixelated; }

/* Host live board */
.match-view { position: relative; min-height: 100vh; padding: 50px 0 60px; }
.match-topline { display: flex; justify-content: space-between; align-items: center; padding-right: 145px; }
.match-index { color: var(--dim); margin-top: 8px; }
.room-pill { color: var(--muted); border: 1px solid var(--line); padding: 10px 13px; border-radius: 99px; display: inline-flex; align-items: center; gap: 8px; }
.room-pill .live-dot { width: 6px; height: 6px; }
.matchup { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 34px; margin: 8vh auto 7vh; max-width: 900px; }
.team { min-width: 0; }
.team-red { text-align: left; }
.team-blue { text-align: right; }
.team-kicker { color: var(--red); }
.team-blue .team-kicker { color: var(--blue); }
.team h1 { font-size: clamp(32px, 5vw, 64px); line-height: 1; margin: 14px 0 20px; overflow-wrap: anywhere; }
.team-total { display: flex; gap: 9px; align-items: baseline; color: var(--muted); }
.team-blue .team-total { justify-content: flex-end; }
.team-total strong { color: var(--ink); font-size: 28px; font-weight: 500; }
.team-total span { font-size: 13px; }
.versus { color: #656b78; font-family: 'DM Mono', monospace; font-size: 12px; }
.vote-status-row { display: flex; align-items: end; justify-content: space-between; max-width: 1000px; margin: 0 auto 13px; }
.vote-status { color: var(--muted); display: flex; align-items: center; gap: 9px; }
.vote-status.closed { color: #e2bf68; }
.timer { font-family: 'DM Mono', monospace; font-size: clamp(24px, 3vw, 34px); letter-spacing: -.04em; }
.battle-bar { height: 54px; width: 100%; max-width: 1000px; margin: 0 auto; display: flex; overflow: hidden; background: var(--line); border-radius: 5px; }
.battle-red, .battle-blue { min-width: 0; display: flex; align-items: center; transition: width .35s ease; color: white; font-family: 'DM Mono', monospace; font-size: 12px; }
.battle-red { justify-content: flex-start; padding-left: 16px; background: var(--red); }
.battle-blue { justify-content: flex-end; padding-right: 16px; background: var(--blue); }
.vote-lists { max-width: 1000px; margin: 14px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.vote-list { min-height: 60px; display: flex; align-content: flex-start; flex-wrap: wrap; gap: 7px; }
.blue-list { justify-content: flex-end; }
.vote-chip { color: #f7e3e0; background: rgba(250,88,78,.12); border: 1px solid rgba(250,88,78,.25); border-radius: 4px; padding: 6px 9px; font-size: 12px; }
.blue-list .vote-chip { color: #dbe8ff; background: rgba(78,145,255,.12); border-color: rgba(78,145,255,.25); }
.result-banner, .champion-banner { text-align: center; margin: 18px auto 0; animation: rise-in .35s ease both; }
.result-name, .champion-name { margin-top: 7px; font-size: clamp(26px, 4vw, 42px); font-weight: 600; letter-spacing: -.05em; }
.result-note { margin-top: 7px; color: var(--muted); font-size: 13px; }
.result-bracket { margin-top: 15px; color: var(--muted); font: 11px 'DM Mono', ui-monospace, monospace; letter-spacing: .1em; }
.next-match { margin: 16px auto 0; }
.next-match > .eyebrow { justify-content: center; }
.next-match-pair { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 14px; margin: 6px auto 0; max-width: 100%; font-size: clamp(16px, 2.5vw, 21px); font-weight: 500; }
.next-match-pair span:not(.versus) { overflow-wrap: anywhere; }
.bracket-complete { margin-top: 16px; color: var(--lime); font: 11px 'DM Mono', ui-monospace, monospace; letter-spacing: .12em; }
.champion-banner .eyebrow { justify-content: center; color: var(--lime); }
.match-view.result-mode { padding-top: 28px; }
.match-view.result-mode .matchup, .match-view.result-mode .battle-bar, .match-view.result-mode .vote-lists { display: none; }
.match-view.result-mode .result-banner { margin-top: 10px; }
.bracket-panel { margin: 22px 0 0; }
.bracket-panel-head { max-width: 1000px; margin: 0 auto 8px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.bracket-panel-note { color: var(--dim); font-size: 11px; }
#bracket-view.brackets-viewer {
  --primary-background: transparent;
  --secondary-background: #202631;
  --match-background: #191e27;
  --font-color: #f5f3ed;
  --win-color: #cbf36a;
  --loss-color: #696d77;
  --label-color: #9b9da3;
  --hint-color: #696d77;
  --connector-color: #454c58;
  --border-color: #343b47;
  --border-hover-color: #747d8c;
  --border-selected-color: #cbf36a;
  --text-size: 10px;
  --round-margin: 22px;
  --match-width: 128px;
  --match-horizontal-padding: 6px;
  --match-vertical-padding: 4px;
  --connector-border-width: 1px;
  height: min(48vh, 490px);
  width: 100%;
  margin: 0 auto;
  padding: 12px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #141922;
  color: var(--ink);
  scrollbar-color: #555d69 #1b2029;
}
#bracket-view .elimination > h1, #bracket-view .bracket > h2 { display: none; }
#bracket-view .match:not([data-match-status="4"]) .participant .result { visibility: hidden; }
#bracket-view .current-tournament-match .opponents { border-color: var(--lime); box-shadow: 0 0 0 1px rgba(203,243,106,.25); }
#bracket-view .participant .name { font-family: 'Space Grotesk', ui-sans-serif, sans-serif; }
.corner-qr { position: absolute; top: 37px; right: 0; width: 104px; height: 104px; padding: 5px; background: white; border-radius: 4px; }
.corner-qr-label { position: absolute; right: 0; top: 148px; width: 104px; color: var(--dim); text-align: center; font: 9px 'DM Mono', monospace; letter-spacing: .1em; }
@keyframes rise-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Join experience */
.join-shell { max-width: 680px; }
.join-entry, .voter-wait, .voter-champion { padding: 12vh 0; }
.join-entry h1, .voter-wait h1 { font-size: clamp(52px, 12vw, 78px); line-height: .94; margin: 18px 0 30px; }
.join-form { display: flex; gap: 10px; max-width: 460px; }
.join-form input, .admin-login-form input { color: var(--ink); background: #1a202a; border: 1px solid #343b48; border-radius: 5px; outline: none; }
.join-form input { flex: 1; min-width: 0; padding: 16px; font-size: 16px; }
.join-form input:focus, .admin-login-form input:focus { border-color: #7b8492; }
.primary-button, .secondary-button, .danger-button { border: 0; border-radius: 5px; padding: 14px 18px; cursor: pointer; font-size: 13px; font-weight: 600; transition: filter .15s, transform .15s; }
.primary-button { background: var(--lime); color: #141a10; }
.secondary-button { color: var(--ink); background: #343b47; }
.danger-button { color: #ffb5ae; background: rgba(250,88,78,.12); border: 1px solid rgba(250,88,78,.27); }
.primary-button:hover, .secondary-button:hover, .danger-button:hover { filter: brightness(1.1); }
.primary-button:active, .secondary-button:active, .danger-button:active { transform: translateY(1px); }
.form-error { min-height: 20px; margin-top: 12px; color: #ff8c82; font-size: 13px; }
.voter-tag { color: var(--muted); font-size: 12px; }
.voter-wait p, .voter-champion p { color: var(--muted); font-size: 16px; line-height: 1.6; max-width: 390px; }
.voter-match { padding: 35px 0 50px; }
.voter-match-head { display: flex; justify-content: space-between; align-items: center; }
.mobile-timer { font: 25px 'DM Mono', monospace; }
.mobile-state { margin: 28px 0 16px; color: var(--muted); display: flex; gap: 9px; align-items: center; }
.mobile-state.closed { color: #e2bf68; }
.vote-cards { display: grid; grid-template-columns: 1fr; gap: 12px; }
.vote-card { text-align: left; min-height: 158px; padding: 19px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; border: 1px solid transparent; border-radius: 8px; cursor: pointer; transition: transform .14s, filter .14s, opacity .14s; }
.vote-card:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.12); }
.vote-card:disabled { cursor: default; opacity: .6; }
.vote-card-red { background: rgba(250,88,78,.13); border-color: rgba(250,88,78,.5); }
.vote-card-blue { background: rgba(78,145,255,.14); border-color: rgba(78,145,255,.5); }
.vote-card-red.selected { background: rgba(250,88,78,.34); border-color: var(--red); opacity: 1; }
.vote-card-blue.selected { background: rgba(78,145,255,.34); border-color: var(--blue); opacity: 1; }
.card-color { color: var(--red); }
.vote-card-blue .card-color { color: var(--blue); }
.vote-card strong { font-size: clamp(25px, 8vw, 38px); line-height: 1.05; letter-spacing: -.05em; overflow-wrap: anywhere; }
.card-action { font: 10px 'DM Mono', monospace; letter-spacing: .12em; color: var(--muted); }
.mobile-versus { text-align: center; color: var(--dim); font: 10px 'DM Mono', monospace; letter-spacing: .15em; margin: -4px 0; z-index: 1; }
.mobile-tally { margin-top: 17px; display: flex; justify-content: space-between; color: var(--muted); font: 11px 'DM Mono', monospace; }
.mobile-feedback { min-height: 24px; margin-top: 12px; color: var(--lime); text-align: center; font-size: 13px; }
.voter-champion { padding-top: 16vh; }
.voter-champion .eyebrow { color: var(--lime); }
.voter-champion h1 { font-size: clamp(48px, 12vw, 78px); line-height: .96; letter-spacing: -.06em; overflow-wrap: anywhere; }

/* Admin */
.admin-shell { max-width: 900px; }
.admin-login { width: min(100%, 440px); padding: 12vh 0; }
.admin-login h1, .admin-heading h1 { margin: 17px 0 26px; font-size: clamp(52px, 8vw, 75px); line-height: .94; }
.admin-login-form { display: grid; gap: 15px; }
.admin-login-form label { color: var(--muted); font-size: 12px; display: grid; gap: 7px; }
.admin-login-form input { padding: 13px; }
.admin-login-form button { margin-top: 4px; }
.admin-heading { display: flex; justify-content: space-between; align-items: flex-start; }
.text-button { border: 0; padding: 12px 0; color: var(--muted); background: transparent; cursor: pointer; font-size: 13px; }
.admin-status { margin: -5px 0 25px; color: var(--lime); font: 11px 'DM Mono', monospace; letter-spacing: .1em; }
.admin-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.admin-actions button:disabled { cursor: not-allowed; opacity: .45; }
.start-button { margin-left: 0; }
.admin-message { margin-top: 14px; }

@media (max-width: 700px) {
  .host-shell, .join-shell, .admin-shell { width: calc(100% - 38px); }
  .topbar { height: 66px; }
  .lobby-view { min-height: 100dvh; padding: 30px 0; }
  .lobby-view h1.atom-title { font-size: 16px; }
  .qr-frame { width: min(72vw, 430px); height: min(72vw, 430px); min-width: 240px; min-height: 240px; }
  .match-view { min-height: 100dvh; padding: 28px 0 36px; }
  .match-view.result-mode { padding-top: 20px; }
  .match-topline { padding-right: 0; align-items: flex-start; }
  .room-pill { margin-right: 0; font-size: 9px; padding: 8px 9px; }
  .corner-qr, .corner-qr-label { display: none; }
  .bracket-panel-head { align-items: flex-start; flex-direction: column; gap: 4px; }
  #bracket-view.brackets-viewer { height: min(52vh, 430px); --match-width: 118px; --round-margin: 16px; --text-size: 9px; }
  .matchup { gap: 12px; margin: 9vh auto 7vh; }
  .team h1 { font-size: clamp(28px, 8vw, 42px); margin: 12px 0; }
  .team-total strong { font-size: 23px; }
  .team-total span { font-size: 11px; }
  .battle-bar { height: 43px; }
  .battle-red { padding-left: 10px; }
  .battle-blue { padding-right: 10px; }
  .vote-lists { gap: 10px; }
  .vote-chip { font-size: 10px; padding: 5px 7px; }
  .join-entry, .voter-wait { padding: 10vh 0; }
  .join-form { flex-direction: column; }
  .join-form .primary-button { min-height: 50px; }
  .voter-match { padding-top: 25px; }
  .vote-card { min-height: 140px; }
  .admin-login { padding-top: 10vh; }
  .admin-heading h1 { font-size: 56px; }
  .admin-actions { align-items: stretch; }
  .admin-actions button { flex: 1 1 100%; }
  .start-button { margin-left: 0; }
}