/* QuizDown — the stage. Matchmaking, the VS intro, the match, the result band, and the couch party.
   Always a dark studio regardless of theme; the only light is a spotlight in the topic's ink (docs/DESIGN.md). */
.stage, .party, .pad {
  --paper: var(--stage); --paper-2: var(--stage-2); --paper-3: var(--stage-3); --rule: var(--stage-rule);
  --ink: var(--stage-ink); --ink-2: var(--stage-ink-2); --ink-3: #8A806F;
  --signal: #F0603F; --on-signal: #15120E; --gold: #F0B33A; --on-gold: #15120E; --right: #4CB37A; --press: 3px 3px 0 #000;
  --topic: hsl(var(--h) 60% 66%); --on-topic: #15120E;
  color-scheme: dark; color: var(--ink);
  background:
    radial-gradient(ellipse 70% 55% at 50% -8%, color-mix(in srgb, var(--topic) 34%, transparent), transparent 70%),
    var(--stage) var(--grain);
}
:is(.stage, .party, .pad) [style*="--h:"] { --topic: hsl(var(--h) 60% 66%); }
@supports (color: oklch(from red l c h)) { .stage, .party, .pad, :is(.stage, .party, .pad) [style*="--h:"] { --topic: oklch(from hsl(var(--h) 80% 50%) .80 .11 h); } }
.stage .primary, .party .primary, .pad .primary { border-color: #000; }
.stage .avatar, .party .avatar, .pad .avatar { background: hsl(var(--ah, 40) 30% 30%); box-shadow: inset 0 0 0 1.5px var(--ink); }

/* ---------- matchmaking & VS ---------- */
.stage-screen { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s5); padding: var(--s5); text-align: center; position: relative; overflow: hidden; }
.stage-screen .kicker { color: var(--ink-2); }
.stage-screen .kicker .g { color: var(--topic); }
/* A spotlight cone on the waiting contestant. */
.spot { position: relative; width: 240px; height: 240px; display: grid; place-items: end center; }
.spot::before { content: ""; position: absolute; inset: -40px -20px 0; background: conic-gradient(from 160deg at 50% 0, transparent, color-mix(in srgb, var(--topic) 22%, transparent) 20deg 20deg, transparent 40deg); clip-path: polygon(50% 0, 100% 100%, 0 100%); animation: sweep 3.2s ease-in-out infinite alternate; transform-origin: 50% 0; }
.spot::after { content: ""; position: absolute; bottom: -6px; width: 180px; height: 26px; border-radius: 50%; background: color-mix(in srgb, var(--topic) 30%, transparent); filter: blur(6px); }
.spot .avatar { --size: 112px; z-index: 1; margin-bottom: 8px; }
@keyframes sweep { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }
.window { font: 600 .95rem/1.4 var(--body); color: var(--ink-2); font-variant-numeric: tabular-nums; min-height: 1.4em; }
.window b { color: var(--ink); }

/* VS: two lecterns slide in from the wings. */
.vs { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: var(--s3); width: min(680px, 100%); }
.vs .side { display: flex; flex-direction: column; align-items: center; gap: var(--s3); min-width: 0; animation: wingL .7s var(--ease-out) both; }
.vs .side.right { animation-name: wingR; }
.vs .side .avatar { --size: clamp(88px, 22vw, 120px); }
.lectern { width: 100%; background: #F2ECDF; color: #1A1712; border-radius: var(--r-0); padding: var(--s3) var(--s3) var(--s4); border-top: 6px solid var(--lc, var(--gold)); }
.vs .side.right .lectern { --lc: #F1EADB; }
.lectern h2 { font: 800 clamp(1.15rem, 4.4vw, 1.6rem)/1.05 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: -.02em; }
.lectern p { font: 500 .8125rem/1.3 var(--body); color: #5C5446; margin-top: 4px; }
.lectern .tier { margin-top: 6px; }
.vs .mark { font: italic 900 clamp(3rem, 14vw, 5.5rem)/1 var(--display); color: var(--gold); align-self: center; animation: vsIn .5s .5s var(--ease-snap) both; letter-spacing: -.04em; }
.vs .note { grid-column: 1 / -1; font: italic 500 1rem/1.4 var(--display); color: var(--ink-2); max-width: 40ch; justify-self: center; animation: fadeIn .4s 1s both; }
.replay-tag { display: inline-flex; gap: 4px; align-items: center; font: 700 .7rem/1 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); border: 1px solid var(--rule); border-radius: var(--r-0); padding: 3px 6px; }
@keyframes wingL { from { transform: translateX(-70vw); } }
@keyframes wingR { from { transform: translateX(70vw); } }
@keyframes vsIn { from { transform: scale(2.6) rotate(-8deg); opacity: 0; } }
@keyframes fadeIn { from { opacity: 0; } }

/* ---------- match ---------- */
.match { min-height: 100dvh; display: flex; flex-direction: column; padding: max(var(--s3), env(safe-area-inset-top)) var(--s3) calc(var(--s3) + env(safe-area-inset-bottom)); }
.scoreboard { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--s3); max-width: 860px; width: 100%; margin: 0 auto; }
.pl { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "av name" "av meta" "sc sc"; column-gap: var(--s2); align-items: center; min-width: 0; position: relative; }
.pl.them { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name av" "meta av" "sc sc"; text-align: right; }
.pl .avatar { grid-area: av; --size: 44px; }
.pl .pname { grid-area: name; font: 700 .95rem/1.15 var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; align-self: end; }
.pl .pmeta { grid-area: meta; font: 500 .72rem/1.2 var(--body); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; align-self: start; }
.pl .score { grid-area: sc; margin-top: var(--s2); font: 900 clamp(2.4rem, 11vw, 3.6rem)/1 var(--display); letter-spacing: -.03em; --flap-bg: var(--stage); }
.pl.you .score { color: var(--gold); }
.pl.them .score { justify-self: end; }
.pl .float { position: absolute; bottom: 8px; font: 800 1.3rem var(--display); pointer-events: none; animation: floatUp 1s var(--ease-out) forwards; color: var(--gold); left: 8.2rem; }
.pl.them .float { left: auto; right: 8.2rem; color: var(--ink); }
@keyframes floatUp { 0% { transform: translateY(6px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-26px); opacity: 0; } }

/* The Countdown clock: a hand sweeps the dial and shades the time that's gone. */
.dial { position: relative; width: 84px; height: 84px; }
.dial svg { width: 100%; height: 100%; overflow: visible; }
.dial .face { fill: #F2ECDF; stroke: #000; stroke-width: 2; }
.dial .ticks { stroke: #1A1712; stroke-width: 1.5; stroke-linecap: round; }
.dial .gone { fill: color-mix(in srgb, var(--topic) 70%, #1A1712 10%); }
.dial .hand { stroke: #1A1712; stroke-width: 3; stroke-linecap: round; transform-origin: 42px 42px; }
.dial .hub { fill: #1A1712; }
.dial .secs { position: absolute; left: 50%; bottom: -22px; translate: -50% 0; font: 800 .95rem/1 var(--display); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.dial.urgent .gone { fill: var(--signal); }
.dial.urgent .secs { color: var(--signal); }
.dial.urgent svg { animation: tick .5s steps(1) infinite; }
@keyframes tick { 50% { transform: rotate(1.5deg); } }

.arena { flex: 1; display: grid; grid-template-columns: 8px minmax(0, 1fr) 8px; gap: var(--s3); max-width: 860px; width: 100%; margin: var(--s5) auto 0; }
.sbar { background: var(--stage-2); border-radius: 4px; display: flex; align-items: flex-end; overflow: hidden; box-shadow: inset 0 0 0 1px var(--stage-rule); }
.sbar i { display: block; width: 100%; height: 0; background: var(--gold); transition: height .6s var(--ease-out); }
.sbar.them i { background: var(--ink); }
.qstage { display: flex; flex-direction: column; gap: var(--s4); justify-content: center; min-width: 0; }
/* Round pips: seven marks, filled as rounds are played, in your result's colour. */
.pips { display: flex; gap: 6px; justify-content: center; align-items: center; }
.pips i { width: 22px; height: 6px; border-radius: 1px; background: var(--stage-3); }
.pips i.now { background: var(--ink); }
.pips i.right { background: var(--right); }
.pips i.wrong { background: var(--signal); }
.pips i:last-child { width: 34px; box-shadow: inset 0 0 0 1px var(--gold); }
.round-label { text-align: center; font: italic 500 1rem var(--display); color: var(--ink-2); min-height: 1.4em; }
.round-label.bonus { color: var(--gold); font-weight: 700; }
/* The question is a host's cue card: paper on the dark stage. */
.qcard { background: #F2ECDF var(--grain); color: #1A1712; border-radius: var(--r-1); padding: var(--s5) var(--s5); min-height: 9.5rem; display: grid; align-content: center; box-shadow: 0 18px 40px rgb(0 0 0 / .45); position: relative; }
.qcard.bonus { box-shadow: 0 0 0 3px var(--gold), 0 18px 40px rgb(0 0 0 / .45); }
.prompt { font: var(--t-2); letter-spacing: -.015em; text-wrap: balance; }
.qcard.enter { animation: cardIn .4s var(--ease-out) both; }
@keyframes cardIn { from { transform: translateY(-18px) rotate(-1.2deg); opacity: 0; } }
/* Each question fades in (prompt first, answers a beat behind) before its clock starts (views/play.js, msg.fade). */
.prompt.fadein { animation: qFade var(--fade, .5s) ease-out both; }
.answers.fadein { animation: qFade var(--fade, .5s) ease-out both; }
.answers.fadein li { animation: qFade calc(var(--fade, .5s) * .8) ease-out both; }
.answers.fadein li:nth-child(2) { animation-delay: calc(var(--fade, .5s) * .07); }
.answers.fadein li:nth-child(3) { animation-delay: calc(var(--fade, .5s) * .14); }
.answers.fadein li:nth-child(4) { animation-delay: calc(var(--fade, .5s) * .2); }
.answers.fadein button:disabled { opacity: 1; }
@keyframes qFade { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .prompt.fadein, .answers.fadein, .answers.fadein li { animation-name: qFadeOnly; transform: none; } }
@keyframes qFadeOnly { from { opacity: 0; } }
.answers { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); counter-reset: none; }
@media (min-width: 680px) { .answers { grid-template-columns: 1fr 1fr; gap: var(--s3); } }
.answers button {
  width: 100%; min-height: 62px; justify-content: flex-start; text-align: left; padding: 12px 14px; gap: var(--s3);
  background: var(--stage-2); color: var(--ink); border: 1.5px solid var(--stage-rule); border-radius: var(--r-1); font: 600 1.02rem/1.25 var(--body);
  position: relative; box-shadow: 0 3px 0 #000; animation: ansIn .32s var(--ease-out) both;
}
.answers li:nth-child(2) button { animation-delay: .05s; } .answers li:nth-child(3) button { animation-delay: .1s; } .answers li:nth-child(4) button { animation-delay: .15s; }
@keyframes ansIn { from { transform: translateY(8px); opacity: 0; } }
@media (hover: hover) { .answers button:hover:not(:disabled) { border-color: var(--ink); background: var(--stage-3); } }
.answers button:disabled { opacity: 1; cursor: default; }
.answers .letter { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: italic 700 1rem/1 var(--display); border: 1.5px solid var(--stage-rule); color: var(--ink-2); }
.answers .txt { flex: 1; min-width: 0; }
.answers .who { display: flex; gap: 4px; }
.answers .who .avatar { --size: 26px; }
/* Press: your pick drops into its shadow and locks. */
.answers button.picked { transform: translateY(3px); box-shadow: 0 0 0 #000; border-color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, var(--stage-2)); }
.answers button.picked .letter { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }
.answers button.correct { background: var(--right); border-color: var(--right); color: #0D1A12; }
.answers button.correct .letter { background: #0D1A12; color: var(--right); border-color: #0D1A12; }
.answers button.correct::after { content: "Correct"; position: absolute; right: 10px; top: -11px; font: italic 800 .8rem/1 var(--display); background: #F2ECDF; color: #1A1712; padding: 4px 8px; border: 1.5px solid #1A1712; transform: rotate(-4deg); animation: stamp .3s var(--ease-snap) both; }
.answers button.wrong { border-color: var(--signal); color: var(--ink-2); }
.answers button.wrong .txt { position: relative; }
.answers button.wrong .txt::after { content: ""; position: absolute; left: -2px; right: -2px; top: 52%; height: 2px; background: var(--signal); transform-origin: left; animation: strike .3s var(--ease-out) both; }
.answers button.dim { opacity: .4; box-shadow: none; }
@keyframes stamp { from { transform: rotate(-14deg) scale(1.8); opacity: 0; } }
@keyframes strike { from { transform: scaleX(0); } }
.crowd { text-align: center; font: 500 .875rem/1.4 var(--body); color: var(--ink-2); min-height: 1.4em; }
.crowd b { color: var(--ink); }
.kbd-hint { text-align: center; font-size: .75rem; color: var(--ink-3); }
@media (hover: none) { .kbd-hint { display: none; } }
.match-foot { display: flex; justify-content: center; gap: 2px; margin-top: var(--s3); flex-wrap: wrap; }
.match-foot button { font-size: 1.3rem; min-height: 44px; padding: 6px 9px; border-radius: var(--r-1); background: transparent; border-color: transparent; box-shadow: none; }
.match-foot button:hover { background: var(--stage-2); }
.bubble { position: absolute; top: 50px; padding: 4px 10px; font-size: 1.6rem; border-radius: var(--r-1); background: var(--stage-2); border: 1px solid var(--stage-rule); animation: bubble 2s var(--ease-out) forwards; z-index: 3; left: 0; }
.pl.them .bubble { left: auto; right: 0; }
@keyframes bubble { 0% { transform: translateY(6px) scale(.6); opacity: 0; } 12% { transform: none; opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-8px); } }
/* Announcements over the stage: the bonus round and answer streaks. */
.splash { position: fixed; inset: 0; display: grid; place-items: center; z-index: 30; pointer-events: none; background: rgb(0 0 0 / .45); animation: fadeIn .2s both, fadeOut .3s 1.1s forwards; }
.splash b { font: italic 900 clamp(2.6rem, 12vw, 5.5rem)/.95 var(--display); letter-spacing: -.04em; color: var(--gold); text-align: center; animation: vsIn .45s var(--ease-snap) both; }
.splash b small { display: block; font: 600 1rem/1.3 var(--body); font-style: normal; letter-spacing: .02em; color: #F1EADB; margin-top: 10px; }
@keyframes fadeOut { to { opacity: 0; } }
.combo { position: fixed; left: 50%; top: 22%; translate: -50% 0; z-index: 35; pointer-events: none; white-space: nowrap; padding: 6px 14px; background: var(--gold); color: #15120E; font: italic 800 clamp(1.3rem, 5vw, 2rem)/1 var(--display); border: 2px solid #000; transform: rotate(-3deg); animation: stamp .3s var(--ease-snap) both, fadeOut .3s .9s forwards; }

/* ---------- result band: the stage, then back to the programme for the match report ---------- */
.result-band { padding: var(--s6) var(--s4) var(--s6); text-align: center; display: grid; gap: var(--s4); justify-items: center; }
.verdict { font: italic 900 clamp(3.4rem, 16vw, 6.5rem)/.85 var(--display); letter-spacing: -.05em; animation: vsIn .55s var(--ease-snap) both; }
.verdict.win { color: var(--gold); } .verdict.loss { color: var(--ink); } .verdict.draw { color: var(--ink); }
.faceoff { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--s4); width: min(480px, 100%); }
.faceoff > div { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.faceoff .fs { font: 900 3rem/1 var(--display); letter-spacing: -.03em; --flap-bg: var(--stage); }
.faceoff .fs.me { color: var(--gold); }
.faceoff .dash { font: italic 500 1.2rem var(--display); color: var(--ink-3); }
.near-miss { font: italic 600 1.15rem/1.3 var(--display); color: var(--ink); }
.pb { display: inline-block; background: var(--gold); color: #15120E; font: italic 800 .95rem/1 var(--display); padding: 6px 12px; border: 2px solid #000; transform: rotate(-3deg); animation: stamp .35s .4s var(--ease-snap) both; }
.report { max-width: 640px; margin: 0 auto; padding: var(--s5) var(--s4) var(--s8); display: flex; flex-direction: column; gap: var(--s5); }
/* The XP receipt: dotted leaders, a ruled total. */
.receipt { background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--r-0); padding: var(--s4) var(--s5); display: grid; gap: var(--s3); position: relative; }
.receipt::before, .receipt::after { content: ""; position: absolute; left: 0; right: 0; height: 8px; background: radial-gradient(circle at 6px -2px, var(--paper) 6px, transparent 6.5px) 0 0 / 12px 8px repeat-x; }
.receipt::before { top: -1px; } .receipt::after { bottom: -1px; transform: scaleY(-1); }
.receipt h2 { font: italic 700 1.1rem var(--display); }
.xplines { display: grid; gap: 4px; font-variant-numeric: tabular-nums; }
.xplines > div { display: flex; align-items: baseline; gap: 6px; animation: fadeIn .3s both; }
.xplines > div::after { content: ""; order: 1; flex: 1; border-bottom: 1.5px dotted var(--ink-3); transform: translateY(-4px); }
.xplines > div > :last-child { order: 2; font-weight: 700; }
.xplines > div.total { border-top: 1.5px solid var(--ink); padding-top: 8px; margin-top: 4px; font: 800 1.2rem var(--display); }
.xplines > div.total::after { border: 0; }
.levelup { font: italic 800 1.4rem/1.1 var(--display); color: var(--signal); animation: stamp .4s var(--ease-snap) both; }
.rating-delta { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); border-top: 1px solid var(--rule); padding-top: var(--s3); }
.delta { font: 800 1.1rem var(--display); font-variant-numeric: tabular-nums; }
.delta.up { color: var(--right); } .delta.down { color: var(--signal); }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.actions .primary, .actions .wide { grid-column: 1 / -1; }
/* Back to home: the way out of every result screen, full width and impossible to miss. */
.home-btn { grid-column: 1 / -1; display: flex; justify-content: center; align-items: center; gap: 10px; width: 100%; min-height: 60px; font: 800 1.15rem var(--body); text-decoration: none; }
.home-btn .g, .home-btn svg { width: 22px; height: 22px; }
.report > .home-btn { margin-top: var(--s4); }
.review { counter-reset: q; }
.review li { flex-direction: column; align-items: stretch; gap: 4px; counter-increment: q; position: relative; padding-left: calc(var(--s4) + 30px) !important; }
.review li::before { content: counter(q); position: absolute; left: var(--s4); top: var(--s3); font: 800 1.1rem var(--display); color: var(--ink-3); }
.review .mark { position: absolute; left: calc(var(--s4) + 12px); top: calc(var(--s3) + 2px); }
.review .mark .g { width: 15px; height: 15px; stroke-width: 2.5; }
.review .mark.r { color: var(--right); } .review .mark.w { color: var(--signal); }
.review .q { font-weight: 600; }
.review .ans { color: var(--right); font: italic 700 1rem var(--display); }
.review .link { align-self: flex-start; font-size: .8rem; }
canvas.tickertape { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 40; }

/* ---------- couch party: the TV ---------- */
.party { min-height: 100dvh; display: flex; flex-direction: column; gap: clamp(12px, 2vw, 28px); padding: clamp(16px, 3vw, 48px); }
.party > *, .party .stack, .pad > * { min-width: 0; }
.party .tv-head { display: flex; align-items: center; gap: 16px; white-space: nowrap; }
@media (max-width: 480px) { .party .tv-head > .kicker { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } } /* still the page heading for screen readers */
.party .tv-head .logo { font-size: clamp(1.4rem, 2.4vw, 2.4rem); color: var(--ink); }
.party .spacer { flex: 1; }
.join-box { display: grid; gap: clamp(10px, 1.6vw, 20px); justify-items: center; text-align: center; }
.join-box p { font: italic 500 clamp(1.1rem, 2.2vw, 2rem)/1.3 var(--display); color: var(--ink-2); }
.join-box p b { font-style: normal; color: var(--gold); font-weight: 800; }
/* The room code is a split-flap board. */
.roomcode { display: flex; gap: clamp(6px, 1vw, 14px); }
.roomcode .tilec { position: relative; width: clamp(64px, 9vw, 150px); aspect-ratio: 4 / 5; display: grid; place-items: center; border-radius: 6px; background: #F2ECDF; color: #1A1712;
  font: 900 clamp(2.8rem, 7vw, 7.5rem)/1 var(--display); box-shadow: 0 8px 0 #000; overflow: hidden; animation: flipIn .5s var(--ease-out) both; }
.roomcode .tilec::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: rgb(0 0 0 / .35); }
.roomcode .tilec:nth-child(2) { animation-delay: .1s; } .roomcode .tilec:nth-child(3) { animation-delay: .2s; } .roomcode .tilec:nth-child(4) { animation-delay: .3s; }
@keyframes flipIn { 0% { transform: rotateX(90deg); } 60% { transform: rotateX(-12deg); } }
.slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 1.5vw, 24px); }
@media (max-width: 640px) { .slots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.slot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: clamp(140px, 18vw, 260px); border-radius: var(--r-1);
  border: 1.5px dashed var(--stage-rule); color: var(--ink-3); font: italic 500 clamp(.95rem, 1.4vw, 1.3rem) var(--display); background: transparent; padding: 12px; box-shadow: none; }
.slot.filled { border: 0; background: transparent; color: var(--ink); cursor: pointer; animation: rise .4s var(--ease-out) both; justify-content: flex-end; }
.slot.filled:hover { background: var(--stage-2); }
.slot .avatar { --size: clamp(64px, 8vw, 120px); }
.slot .lectern { padding: 10px; border-top-color: hsl(var(--ah) 55% 62%); }
.slot b { display: block; font: 800 clamp(1rem, 1.8vw, 1.6rem) var(--display); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-style: normal; }
.slot .off { font: 600 .8rem var(--body); color: var(--signal); font-style: normal; }
.topic-search { max-width: 420px; background: var(--stage-2); border: 1.5px solid var(--stage-rule); color: var(--ink); }
.topic-pick { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: thin; }
.topic-pick button { flex: none; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--r-1); font: 600 clamp(.9rem, 1.3vw, 1.2rem) var(--body);
  background: var(--stage-2); border: 1.5px solid var(--stage-rule); color: var(--ink); box-shadow: none; }
.topic-pick button .g { color: var(--topic); }
.topic-pick button[aria-pressed="true"] { background: var(--topic); border-color: var(--topic); color: var(--on-topic); }
.topic-pick button[aria-pressed="true"] .g { color: inherit; }
.topic-pick .muted { align-self: center; padding: 0 8px; }
.party .start { font-size: clamp(1.2rem, 2vw, 1.8rem); padding: clamp(16px, 2vw, 26px); }
.tv-top { display: flex; align-items: center; gap: 16px; }
.tv-timer { flex: 1; height: 10px; border-radius: 5px; background: var(--stage-3); overflow: hidden; }
.tv-timer i { display: block; height: 100%; background: var(--ink); transform-origin: left; }
.tv-timer.urgent i { background: var(--signal); }
.tv-secs { font: 900 clamp(2rem, 4vw, 4rem)/1 var(--display); min-width: 2ch; text-align: right; font-variant-numeric: tabular-nums; }
.tv-round { font: italic 600 clamp(1rem, 1.8vw, 1.6rem) var(--display); color: var(--ink-2); white-space: nowrap; }
.tv-round.bonus { color: var(--gold); }
.tv-prompt { font: 800 clamp(1.6rem, 3.8vw, 4rem)/1.12 var(--display); letter-spacing: -.02em; text-align: center; margin: auto 0; padding: clamp(18px, 3vw, 40px) clamp(20px, 4vw, 60px); background: #F2ECDF var(--grain); color: #1A1712; border-radius: var(--r-1); animation: cardIn .45s var(--ease-out) both; }
:root { --a0: #E0552F; --a1: #3D6FA8; --a2: #E9A93A; --a3: #2F8A5C; }
.ans0 { --ac: var(--a0); --ai: #fff; } .ans1 { --ac: var(--a1); --ai: #fff; } .ans2 { --ac: var(--a2); --ai: #15120E; } .ans3 { --ac: var(--a3); --ai: #fff; }
.tv-answers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.4vw, 20px); }
.tv-answers li { position: relative; display: flex; align-items: center; gap: clamp(10px, 1.5vw, 22px); padding: clamp(14px, 2vw, 30px); border-radius: var(--r-1); background: var(--ac); color: var(--ai);
  font: 700 clamp(1.1rem, 2.4vw, 2.4rem)/1.15 var(--body); min-height: clamp(70px, 10vw, 150px); border: 2px solid #000; box-shadow: 0 6px 0 #000; transition: opacity .3s, transform .3s var(--ease-out); animation: ansIn .4s var(--ease-out) both; }
.tv-answers li:nth-child(2) { animation-delay: .06s; } .tv-answers li:nth-child(3) { animation-delay: .12s; } .tv-answers li:nth-child(4) { animation-delay: .18s; }
.tv-answers .shape { font-size: 1.2em; }
.tv-answers li.out { opacity: .22; }
.tv-answers li.right { transform: translateY(-4px); box-shadow: 0 10px 0 #000, 0 0 0 4px #F2ECDF; }
.tv-answers li.right::after { content: "Correct"; position: absolute; right: 16px; top: -16px; font: italic 800 clamp(.9rem, 1.6vw, 1.5rem)/1 var(--display); background: #F2ECDF; color: #1A1712; padding: 6px 10px; border: 2px solid #000; transform: rotate(-4deg); animation: stamp .3s var(--ease-snap) both; }
.tv-answers .pickers { display: flex; gap: 4px; margin-left: auto; }
.tv-answers .pickers .avatar { --size: clamp(32px, 3.6vw, 56px); }
.lanes { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: clamp(8px, 1.2vw, 18px); }
.lane { position: relative; display: flex; align-items: center; gap: 10px; padding: clamp(8px, 1vw, 14px); border-radius: var(--r-1); background: var(--stage-2); border: 1.5px solid var(--stage-rule); }
.lane .avatar { --size: clamp(40px, 4.4vw, 68px); }
.lane .ln { flex: 1; min-width: 0; }
.lane b { display: block; font: 700 clamp(.9rem, 1.5vw, 1.4rem) var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lane .ls { font: 900 clamp(1.3rem, 2.4vw, 2.4rem)/1 var(--display); font-variant-numeric: tabular-nums; --flap-bg: var(--stage-2); }
.lane.locked { border-color: var(--gold); }
.lane .lock { position: absolute; top: -12px; right: 8px; background: var(--gold); color: #15120E; font: italic 800 .8rem/1 var(--display); padding: 4px 8px; border: 1.5px solid #000; transform: rotate(-3deg); animation: stamp .25s var(--ease-snap) both; }
.lane .float { position: absolute; left: 50%; top: -20px; font: 800 1.4rem var(--display); color: var(--gold); animation: floatUp 1s var(--ease-out) forwards; }
.lane.away { opacity: .45; }
.tv-splash { margin: auto; text-align: center; display: flex; flex-direction: column; gap: 18px; align-items: center; }
.tv-splash h1 { font: italic 900 clamp(2.6rem, 7vw, 7rem)/.95 var(--display); letter-spacing: -.04em; }
.tv-splash .art { width: clamp(90px, 14vw, 180px); height: clamp(90px, 14vw, 180px); color: var(--topic); stroke-width: 1.2; animation: vsIn .5s var(--ease-snap) both; }
.tv-splash .pulse { width: 18px; height: 18px; border-radius: 50%; background: var(--signal); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .2; } }
.tv-podium { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); align-items: end; gap: clamp(10px, 2vw, 30px); margin: auto 0 0; }
.tv-podium .step { display: flex; flex-direction: column; align-items: center; gap: 10px; animation: rise .6s var(--ease-out) both; }
.tv-podium .step .avatar { --size: clamp(64px, 8vw, 130px); }
.tv-podium .step b { font: 800 clamp(1.1rem, 2vw, 2rem) var(--display); }
.tv-podium .block { width: 100%; border-radius: var(--r-0) var(--r-0) 0 0; display: grid; place-items: start center; padding-top: 10px; font: 900 clamp(2rem, 4vw, 4rem) var(--display); background: #F2ECDF; color: #1A1712; }
.tv-podium .p1 .block { height: clamp(120px, 22vh, 260px); background: var(--gold); }
.tv-podium .p2 .block { height: clamp(90px, 16vh, 190px); }
.tv-podium .p3 .block { height: clamp(70px, 12vh, 140px); }
.tv-podium .p4 .block { height: clamp(50px, 8vh, 100px); background: var(--stage-3); color: var(--ink); }
.tv-podium .pts { font: 900 clamp(1.2rem, 2.2vw, 2.2rem) var(--display); font-variant-numeric: tabular-nums; }

/* ---------- couch party: the phone controller ---------- */
.pad { min-height: 100dvh; display: flex; flex-direction: column; gap: 16px; padding: max(16px, env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom)); }
.pad .center-card { width: min(440px, 100%); align-self: center; margin: auto 0; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.pad .center-card .avatar.xl { --size: 120px; }
.pad .center-card > .g { width: 72px; height: 72px; color: var(--topic); stroke-width: 1.3; }
.pad .code-input { text-transform: uppercase; letter-spacing: .4em; text-align: center; font: 900 2rem var(--display); padding-left: calc(14px + .4em); }
.pad .ptimer { height: 6px; border-radius: 3px; background: var(--stage-3); overflow: hidden; }
.pad .ptimer i { display: block; height: 100%; background: var(--ink); }
.pad .pprompt { font: 600 1rem/1.35 var(--display); text-align: center; color: var(--ink-2); }
.pad-buttons { flex: 1; display: grid; grid-template-rows: repeat(4, 1fr); gap: 10px; }
.pad-buttons button { background: var(--ac); color: var(--ai); border: 2px solid #000; border-radius: var(--r-1); font: 700 1.15rem/1.2 var(--body); justify-content: flex-start; gap: 14px; padding: 14px 18px; min-height: 64px; text-align: left; box-shadow: 0 5px 0 #000; }
@media (hover: hover) { .pad-buttons button:hover:not(:disabled) { background: var(--ac); } }
.pad-buttons button .shape { font-size: 1.6rem; }
.pad-buttons button:active { transform: translateY(4px); box-shadow: 0 1px 0 #000; }
.locked-in { margin: auto 0; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.locked-in .shape-big { width: 140px; height: 140px; border-radius: var(--r-2); display: grid; place-items: center; font-size: 4rem; color: var(--ai); background: var(--ac); border: 2px solid #000; box-shadow: 0 8px 0 #000; animation: stamp .3s var(--ease-snap); }
.verdict-pad { font: italic 900 3.2rem/1 var(--display); letter-spacing: -.03em; }
.verdict-pad.good { color: var(--right); } .verdict-pad.bad { color: var(--signal); }
.place-n { font: italic 900 6rem/.85 var(--display); color: var(--gold); letter-spacing: -.05em; }

/* Scoreboard digits sit on real flap tiles, blanks included, like a departures board. */
.pl .score, .faceoff .fs, .lane .ls { --flap-bg: var(--stage-2); }
.pl .score .fc, .faceoff .fs .fc, .lane .ls .fc { background: var(--flap-bg); border-radius: 3px; padding: .04em .08em; min-width: .72em; box-shadow: inset 0 0 0 1px #000; }
.pl .score .fc::after, .faceoff .fs .fc::after, .lane .ls .fc::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgb(0 0 0 / .7); z-index: 2; }
.pl .score .fc .ft, .pl .score .fc .fb, .pl .score .fc .ob, .faceoff .fs .fc .ft, .faceoff .fs .fc .fb, .faceoff .fs .fc .ob, .lane .ls .fc .ft, .lane .ls .fc .fb, .lane .ls .fc .ob { padding: .04em .08em; border-radius: 3px; }
.pl .score { font-size: clamp(2rem, 9vw, 3rem); }

/* 3, 2, 1: a numeral the size of the board, stamped in and fading. */
.match { position: relative; }
.countdown { position: absolute; inset: 0; z-index: 25; display: grid; place-items: center; background: rgb(16 14 11 / .55); backdrop-filter: blur(2px); pointer-events: none; }
.countdown b { font: italic 900 clamp(7rem, 30vw, 14rem)/1 var(--display); color: var(--gold, #F0B33A); letter-spacing: -.04em; text-shadow: 0 6px 0 rgb(0 0 0 / .35); }
.countdown b.pop { animation: countPop .9s var(--ease-snap, cubic-bezier(.2, 1.4, .4, 1)) both; }
@keyframes countPop { 0% { transform: scale(1.8); opacity: 0; } 25% { transform: scale(1); opacity: 1; } 80% { opacity: 1; } 100% { transform: scale(.85); opacity: 0; } }
/* The breather: the old question slides away before the next one lands. */
.qcard.leave, .answers.leave { animation: qLeave .4s ease-in both; }
@keyframes qLeave { to { opacity: 0; transform: translateY(-14px) scale(.98); } }
@media (prefers-reduced-motion: reduce) {
  .countdown b.pop { animation: none; }
  .qcard.leave, .answers.leave { animation: none; opacity: 0; }
}
/* Between questions the card names the next round. */
.qcard.between { display: grid; place-items: center; animation: qBetween .35s ease-out both; }
.qcard.between .prompt { font-style: italic; text-align: center; opacity: .8; }
.qcard.between.bonus .prompt { color: var(--gold, #B8860B); opacity: 1; }
@keyframes qBetween { from { opacity: 0; transform: scale(.97); } }
@media (prefers-reduced-motion: reduce) { .qcard.between { animation: none; } }

/* Couch party: the host's phone as the remote */
.remote-box { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; font-size: clamp(.95rem, 1.4vw, 1.25rem); color: var(--ink); }
.remote-box .g { width: 26px; height: 26px; color: var(--gold); flex: none; }
.host-mark { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 4px; background: var(--gold); color: #1A1712; font: 800 .7rem var(--body); letter-spacing: .06em; text-transform: uppercase; }
.pad .host-panel { width: 100%; display: grid; gap: var(--s3); padding: var(--s4); border: 2px solid var(--gold); border-radius: var(--r-2, 12px); background: rgb(240 179 58 / .08); text-align: left; }
.pad .host-panel h2 { font: italic 800 1.25rem var(--display); display: flex; align-items: center; gap: 8px; }
.pad .host-panel .topic-pick { flex-wrap: wrap; overflow: visible; }
.pad .host-panel .who-list { display: grid; gap: 6px; }
.pad .host-panel .who-list div { display: flex; align-items: center; gap: var(--s2); }