/* BULL RUN: ZB@20 — shared theme */
:root {
  --ink: #04070a;
  --panel: #081118;
  --line: #1e4d3c;
  --phos: #3aff9e;
  --phos-dim: #1a9c63;
  --amber: #ffc247;
  --red: #ff5f5f;
  --blue: #6ec6ff;
  /* back to the arcade typeface — it is the house style */
  --pixel: 'Press Start 2P', 'Lucida Console', 'Courier New', monospace;
  --term: 'VT323', 'Consolas', 'Courier New', monospace;
  --mono: 'Consolas', ui-monospace, 'SF Mono', monospace;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; height: 100%; background: #000; overflow: hidden; }
body {
  font-family: var(--term);
  color: var(--phos);
  background: var(--ink);
}
button { font-family: inherit; cursor: pointer; }
.hide { display: none !important; }

/* ---------- CRT overlay ---------- */
#crt {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,.26) 0 1px, transparent 1px 3px);
  opacity: .38;
}
#vig {
  position: fixed; inset: 0; z-index: 61; pointer-events: none;
  background: radial-gradient(125% 105% at 50% 48%, transparent 62%, rgba(0,0,0,.42) 100%);
}
body.calm #crt { opacity: .22; }
body.calm #vig { background: none; }

/* ---------- stage ---------- */
#stage { position: fixed; inset: 0; display: grid; place-items: center; background: #000; }
/* the 16:9 frame is what all percentage positions refer to, so DOM overlays
   line up with canvas pixels at any aspect ratio */
#frame {
  position: relative;
  width: min(100vw, 177.78vh);
  height: min(56.25vw, 100vh);
  overflow: hidden;
}
/* 32-bit mode: let the browser smooth the supersampled canvas */
#world { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: auto; }

/* ---------- the question board on stage ---------- */
#board {
  position: absolute;
  /* rect follows the painted screen for each set piece */
  left: var(--bx, 36.67%); top: var(--by, 31.11%);
  width: var(--bw, 56.67%); height: var(--bh, 43.7%);
  container-type: size;              /* text now scales with the board itself */
  z-index: 12;
  display: flex; flex-direction: column;
  padding: calc(3.9cqw * var(--pad, 1)) calc(4.2cqw * var(--pad, 1)) calc(3.2cqw * var(--pad, 1));   /* sit inside the painted frame */
  opacity: 0; transform: scale(.985);
  transition: opacity .3s ease-out, transform .3s ease-out;
  pointer-events: none;
}
#board.up { opacity: 1; transform: none; }
#board .b-top {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: .8vh;
}
#board #qcat { font-family: var(--pixel); font-size: clamp(10px, calc(1.7cqw * var(--ts, 1)), 22px); color: var(--amber); letter-spacing: .5px; }
#board #qboss { font-family: var(--pixel); font-size: clamp(9px, 1.65cqw, 18px); color: var(--red); animation: pulse 1s infinite; }
#board #qtext {
  font-family: var(--pixel); font-weight: 400; font-size: clamp(13px, calc(3.35cqw * var(--ts, 1)), 48px); line-height: 1.5; letter-spacing: .01em;
  color: #eafff6; margin: 0 0 auto; text-shadow: 0 0 16px rgba(58,255,158,.35);
  flex: 0 0 auto;
}
#board #opts { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2cqw 2.3cqw; margin-top: auto; }
#board .opt {
  display: flex; gap: .8cqw; align-items: center; padding: 1.35cqw 1.15cqw;
  border: 1.5px solid rgba(58,255,158,.28); background: rgba(8,20,16,.55);
  border-radius: 6px;
  font-family: var(--term); font-size: clamp(15px, calc(3.0cqw * var(--ts, 1)), 44px); color: #eafff6; line-height: 1.25;
  transition: background .18s, border-color .18s, color .18s;
}
#board .opt .key { font-family: var(--mono); font-weight: 700; font-size: clamp(13px, calc(2.4cqw * var(--ts, 1)), 30px); color: var(--phos-dim); width: 1.6em; flex: 0 0 auto; }
#board .opt.correct { border-color: var(--phos); background: rgba(58,255,158,.24); color: #fff; box-shadow: 0 0 22px rgba(58,255,158,.45); }
#board .opt.correct .key { color: var(--phos); }
#board .opt.dim, #board .opt.reveal-other { opacity: .26; }
#board #timer { position: relative; height: 5px; margin-top: 1vh; background: rgba(255,255,255,.07); }
#board #timerbar { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--amber), #ff7a45); transition: width .2s linear; }
#board #timer.urgent #timerbar { background: linear-gradient(90deg, var(--red), #ff2d2d); }

/* ---------- punch effects ---------- */
#flash { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 70; }
#invert { position: fixed; inset: 0; z-index: 69; pointer-events: none; mix-blend-mode: difference; background: #fff; opacity: 0; }
#shake { position: fixed; inset: 0; z-index: 5; }
.punched { animation: punch .22s steps(2) 1; }
@keyframes punch {
  0% { transform: scale(1); }
  40% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
.body-shake { animation: shake .22s steps(2) 2; }
@keyframes shake {
  0% { transform: translate(0,0); }
  30% { transform: translate(-6px, 4px); }
  60% { transform: translate(7px, -5px); }
  100% { transform: translate(0,0); }
}

/* ---------- typography ---------- */
.pix { font-family: var(--pixel); letter-spacing: 1px; text-transform: uppercase; }
.glow { text-shadow: 0 0 14px currentColor; }

/* ---------- title / lobby ---------- */
#lobby {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center;
  gap: 18px; z-index: 10; text-align: center; padding: 24px;
  background: radial-gradient(80% 60% at 50% 45%, rgba(0,0,0,.72), rgba(0,0,0,.35));
}
#lobby h1 { font-family: var(--pixel); font-weight: 400; font-size: clamp(22px, 5.2vw, 64px); margin: 0; line-height: 1.5; color: var(--amber); }
#lobby .sub { font-family: var(--pixel); font-size: clamp(11px, 1.7vw, 22px); color: var(--phos); opacity: .95; }
#lobby .joinurl { font-family: var(--term); font-size: clamp(16px, 2vw, 30px); color: #fff; background: rgba(0,0,0,.55);
  border: 3px solid var(--line); padding: 10px 18px; letter-spacing: 1px; }
#lobby .hint { font-size: clamp(13px, 1.3vw, 19px); color: var(--phos-dim); letter-spacing: 1px; }
#lobby .count { font-family: var(--pixel); font-size: clamp(12px, 1.6vw, 20px); color: var(--blue); }

/* ---------- side rail ---------- */
#rail {
  position: absolute; right: 1.6vw; top: 2.2vh; z-index: 13; width: 20vw; min-width: 220px;
  border: 3px solid var(--line); background: rgba(4,10,8,.8); padding: 1.4vh 1vw;
}
#rail h4 { margin: 0 0 1vh; font-family: var(--pixel); font-size: clamp(7px, .8vw, 12px); color: var(--phos-dim); }
#rail .row { display: flex; justify-content: space-between; gap: 8px; font-size: clamp(11px, 1.1vw, 20px); padding: .45vh 0; border-bottom: 1px dashed rgba(30,77,60,.5); }
#rail .row .n { color: #cfe9dc; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#rail .row .s { font-family: var(--pixel); font-size: clamp(7px, .75vw, 11px); color: var(--amber); }
#rail .live { margin-top: 1vh; font-size: clamp(10px, .95vw, 16px); color: var(--blue); }

/* ---------- big stamps ---------- */
#stamp {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) rotate(-6deg) scale(.6);
  font-family: var(--pixel); font-size: clamp(24px, 5vw, 76px); color: var(--phos);
  border: 6px solid currentColor; padding: 2vh 3vw; opacity: 0; z-index: 40; pointer-events: none;
  text-transform: uppercase; background: rgba(0,0,0,.35); white-space: nowrap;
}
#stamp.hit { animation: stampIn .55s steps(4) forwards; }
@keyframes stampIn {
  0% { opacity: 0; transform: translate(-50%,-50%) rotate(-6deg) scale(2.2); }
  55% { opacity: 1; transform: translate(-50%,-50%) rotate(-6deg) scale(.94); }
  100% { opacity: 0; transform: translate(-50%,-50%) rotate(-6deg) scale(1.05); }
}
#takeover {
  position: absolute; inset: 0; z-index: 45; pointer-events: none; opacity: 0;
  display: grid; place-content: center; justify-items: center; gap: 2vh;
  background: radial-gradient(60% 60% at 50% 50%, rgba(58,255,158,.16), rgba(0,0,0,.92));
}
#takeover.on { animation: takeover .9s steps(3) forwards; }
@keyframes takeover {
  0% { opacity: 0; }
  18% { opacity: 1; }
  82% { opacity: 1; }
  100% { opacity: 0; }
}
#takeover .big { font-family: var(--pixel); font-size: clamp(30px, 6vw, 92px); color: var(--amber); }
#takeover .who { font-family: var(--pixel); font-size: clamp(12px, 1.6vw, 24px); color: #fff; }

/* ---------- ad break ---------- */
#ads { position: absolute; inset: 0; z-index: 50; display: none; background: #05070a; }
#ads.on { display: block; }
#ads .static { position: absolute; inset: 0; opacity: .5; background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.14) 0 1px, transparent 1px 2px), repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, transparent 1px 3px); }
#ads .bumper { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 2vh; text-align: center; }
#ads .bumper .live { font-family: var(--pixel); font-size: clamp(10px, 1.4vw, 20px); color: var(--red); border: 3px solid var(--red); padding: .6em 1em; }
#ads .bumper .brand { font-family: var(--pixel); font-size: clamp(20px, 4va, 56px); color: var(--amber); }
#ads .bumper .venue { font-family: var(--pixel); font-size: clamp(10px, 1.3vw, 18px); color: var(--phos); }
#ads .ad { position: absolute; inset: 0; display: none; place-content: center; justify-items: center; gap: 1.6vh; background: #0a1220; }
#ads .ad.on { display: grid; }
#ads .ad .line1 { font-family: var(--pixel); font-size: clamp(14px, 2.2vw, 36px); color: #cfefff; }
#ads .ad .line2 { font-family: var(--term); font-size: clamp(14px, 1.6vw, 28px); color: var(--amber); }
#ads .ad canvas { width: 40vw; max-width: 460px; height: 16vw; max-height: 180px; border: 3px solid var(--line); border-radius: 6px; }
#ads .disc { position: absolute; right: 1.4vw; bottom: 1.6vh; font-family: var(--term); font-size: clamp(10px, 1vw, 16px); color: #6f8a7e; letter-spacing: 1px; }
#ads .count { position: absolute; left: 50%; bottom: 4vh; transform: translateX(-50%); font-family: var(--pixel); font-size: clamp(16px, 2.4vw, 40px); color: var(--phos); }

/* ---------- podium ---------- */
#podium { position: absolute; inset: 0; z-index: 48; display: none; place-content: center; justify-items: center; text-align: center; gap: 3vh; background: rgba(2,6,5,.88); }
#podium.on { display: grid; }
#podium .head { font-family: var(--pixel); font-size: clamp(14px, 2.2vw, 34px); color: var(--amber); }
.podium-row { display: none; flex-direction: column; gap: 1vh; align-items: center; }
.podium-row.on { display: flex; animation: pIn .5s steps(3) 1; }
@keyframes pIn { from { opacity: 0; transform: translateY(18px) scale(.94); } to { opacity: 1; transform: none; } }
.podium-row .place { font-family: var(--pixel); font-size: clamp(12px, 1.6vw, 24px); color: var(--phos-dim); }
.podium-row .name { font-family: var(--pixel); font-size: clamp(20px, 3.6vw, 58px); color: #fff; }
.podium-row .score { font-family: var(--term); font-size: clamp(14px, 1.8vw, 30px); color: var(--amber); }
.podium-row.first .name { color: var(--amber); text-shadow: 0 0 40px rgba(255,194,71,.7); }

/* ---------- presenter bubble (hidden with the presenter) ---------- */
#bubble { display: none !important;
  /* tracks the presenter: --mx is his x position as a percentage */
  position: absolute;
  left: max(2%, calc(var(--mx, 20%) - 9%));
  bottom: 63%; max-width: 26%;
  z-index: 16; pointer-events: none;
  font-family: var(--pixel); font-size: clamp(8px, 1.05vw, 15px); line-height: 1.9;
  color: #06110c; background: #eafff6; border: 3px solid #0a1a14;
  padding: 1.1vh 1.1vw; box-shadow: 6px 6px 0 rgba(0,0,0,.45);
  opacity: 0; transform: translateY(6px); transition: opacity .18s, transform .18s;
}
#bubble.on { opacity: 1; transform: none; }
#bubble::after {
  content: ''; position: absolute; left: 22px; bottom: -12px;
  border: 7px solid transparent; border-top-color: #eafff6;
}

/* ---------- solo contestant ---------- */
#solocard {
  position: absolute; left: 1.6vw; top: 3vh; z-index: 15;
  border: 3px solid var(--line); background: rgba(4,10,8,.82);
  padding: 1.3vh 1.2vw; min-width: 15vw;
}
#solocard .s-label { font-family: var(--pixel); font-size: clamp(7px, .8vw, 12px); color: var(--phos-dim); margin-bottom: .8vh; }
#solocard .s-name { font-family: var(--pixel); font-size: clamp(13px, 1.9vw, 30px); color: #fff; margin-bottom: .6vh; }
#solocard .s-score { font-family: var(--mono); font-weight: 700; font-size: clamp(18px, 2.4vw, 40px); color: var(--amber); line-height: 1; }
#solocard .s-score em { font-family: var(--pixel); font-size: clamp(7px, .8vw, 12px); font-style: normal; color: var(--phos-dim); }
#solocard .s-streak { font-family: var(--pixel); font-size: clamp(8px, .9vw, 13px); color: var(--amber); margin-top: .8vh; min-height: 1em; }
body.solo #rail { display: none; }

/* ---------- clickable board (solo mode) ---------- */
#board.live .opt { pointer-events: auto; cursor: pointer; }
#board.live .opt:hover { border-color: var(--phos); background: rgba(58,255,158,.14); }
#board .opt.picked { border-color: var(--amber); background: rgba(255,194,71,.16); color: #fff; }

/* ---------- end-of-game recap ---------- */
#recap {
  position: absolute; inset: 0; z-index: 49; padding: 4vh 3vw;
  background: rgba(2,6,8,.94);
  display: flex; flex-direction: column; gap: 1.6vh;
}
#recap .r-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--pixel); font-size: clamp(11px, 1.5vw, 24px); color: var(--amber);
  border-bottom: 3px solid var(--line); padding-bottom: 1vh;
}
#recap .r-sum { font-family: var(--term); font-size: clamp(12px, 1.3vw, 22px); color: var(--phos); }
#recap .r-list {
  flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: .4vh 1.6vw;
  align-content: start; overflow: hidden;
}
#recap .r-row {
  display: grid; grid-template-columns: 2.2em 1fr; gap: .6vw;
  border-bottom: 1px dashed rgba(30,77,60,.55); padding: .5vh 0;
  opacity: 0; transform: translateX(-6px);
  animation: rIn .22s ease-out forwards;
}
@keyframes rIn { to { opacity: 1; transform: none; } }
#recap .r-n { font-family: var(--pixel); font-size: clamp(6px, .62vw, 10px); color: var(--phos-dim); padding-top: .5vh; }
#recap .r-q {
  font-family: var(--term); font-size: clamp(10px, .95vw, 16px); color: #cfe9dc; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#recap .r-a { font-family: var(--term); font-size: clamp(9px, .85vw, 14px); color: var(--phos); }
#recap .r-row.wrong .r-a { color: #ff8b8b; }
#recap .r-row.passed .r-a { color: var(--amber); }
#recap .r-row.unanswered .r-a { color: var(--phos-dim); }
#recap .r-mark { float: right; font-family: var(--pixel); font-size: clamp(7px, .7vw, 11px); }
#recap .r-row.correct .r-mark { color: var(--phos); }
#recap .r-row.wrong .r-mark { color: #ff5f5f; }
#recap .r-row.passed .r-mark { color: var(--amber); }
#recap .r-foot { font-family: var(--term); font-size: clamp(9px, .85vw, 14px); color: #3a5b4c; letter-spacing: 1px; text-align: center; }

/* ---------- touch / kiosk ---------- */
body.kiosk, body.kiosk * { user-select: none; -webkit-user-select: none; }
body { overscroll-behavior: none; touch-action: manipulation; }
#board .opt { touch-action: manipulation; min-height: 7.2vh; }
#board .opt:active { transform: scale(.985); border-color: var(--amber); }
#board.live .opt:active { background: rgba(255,194,71,.22); }

/* ---------- operator bar ---------- */
#opchip {
  position: absolute; right: 1vw; bottom: 1.4vh; z-index: 55;
  width: 46px; height: 46px; display: grid; place-items: center;
  border: 2px solid rgba(58,255,158,.35); border-radius: 50%;
  background: rgba(4,10,8,.55); color: rgba(58,255,158,.6);
  font-size: 20px; cursor: pointer; touch-action: manipulation;
}
#opchip:active { background: rgba(58,255,158,.2); }
#opbar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 56;
  display: flex; gap: .6vw; padding: 1.2vh 1vw;
  background: rgba(3,8,6,.92); border-top: 2px solid var(--line);
  touch-action: manipulation;
}
#opbar .op {
  flex: 1; min-height: 7vh; border: 2px solid var(--phos);
  background: rgba(58,255,158,.12); color: var(--phos);
  font-family: var(--pixel); font-size: clamp(9px, 1.1vw, 18px); letter-spacing: 1px;
  border-radius: 4px; touch-action: manipulation;
}
#opbar .op:active { background: var(--phos); color: #04120b; }
#opbar .op[disabled] { opacity: .22; border-color: #2c4a3d; color: #3a5b4c; background: transparent; }
#opbar .op.ghost { border-color: var(--amber); color: var(--amber); background: rgba(255,194,71,.08); flex: .7; }
#opbar .op.primary { background: var(--phos); color: #04120b; }

#lobby .sub2 { font-family: var(--pixel); font-size: clamp(9px, 1.25vw, 17px); color: var(--phos); opacity: .78; letter-spacing: 2px; }

/* ---------- lifelines for the touchscreen ---------- */
#oplifelines {
  position: absolute; right: 1vw; bottom: 10.5vh; z-index: 56;
  display: flex; gap: .5vw; touch-action: manipulation;
}
#oplifelines .ol {
  min-width: 6.5vw; min-height: 5.4vh; padding: 0 1vw;
  border: 2px solid var(--amber); background: rgba(255,194,71,.1);
  color: var(--amber); font-family: var(--pixel); font-size: clamp(8px, .85vw, 14px);
  border-radius: 4px; touch-action: manipulation;
}
#oplifelines .ol:active { background: var(--amber); color: #12100a; }
#oplifelines .ol[disabled] { opacity: .28; border-color: #4a3c1c; color: #6b5a2c; background: transparent; }
#oplifelines .ol.jump { border-color: var(--blue); color: var(--blue); background: rgba(110,198,255,.08); min-width: 4.2vw; }
#oplifelines .ol-sep { width: 1px; background: rgba(110,198,255,.3); margin: 0 .4vw; }

/* ---------- cinematic wipe between scenes ---------- */
#wipe { position: absolute; inset: 0; z-index: 46; pointer-events: none; opacity: 0; }
#wipe.on { animation: wipeIn .52s steps(5) 1; }
@keyframes wipeIn {
  0%   { opacity: 1; background: repeating-linear-gradient(105deg, rgba(0,0,0,.96) 0 7%, rgba(0,0,0,0) 7% 14%); background-position: 0 0; }
  55%  { opacity: .9; background-position: -40% 0; }
  100% { opacity: 0; background-position: -120% 0; }
}

/* ---------- LIVING STATE ---------- */
#err { position: fixed; left: 10px; bottom: 10px; z-index: 99; font-size: 12px; color: #ff8b8b; font-family: monospace; }

/* ---------- full-screen answer reveal ---------- */
#answercard {
  position: fixed; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 45%, rgba(4,14,18,.82), rgba(2,6,9,.94));
  backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease-out;
}
#answercard.on { opacity: 1; }
#answercard .ac-inner {
  width: min(80vw, 1240px);
  border: 2px solid rgba(110,235,180,.45);
  background: linear-gradient(180deg, rgba(8,26,30,.96), rgba(4,14,18,.98));
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 30px 90px rgba(0,0,0,.65), 0 0 70px rgba(60,200,160,.10);
  padding: clamp(18px, 2.4vw, 40px) clamp(20px, 3vw, 56px) clamp(16px, 2vw, 34px);
  transform: translateY(10px) scale(.985);
  transition: transform .26s cubic-bezier(.2,.8,.25,1);
}
#answercard.on .ac-inner { transform: none; }
.ac-kicker {
  font-size: clamp(13px, 1.35vw, 22px); letter-spacing: .30em;
  color: var(--green, #6eebb4); opacity: .85; margin-bottom: clamp(8px, 1vw, 16px);
}
.ac-q {
  font-size: clamp(20px, 2.5vw, 42px); line-height: 1.32; color: #f2fbf8;
  font-weight: 600; margin-bottom: clamp(14px, 1.8vw, 30px);
}
.ac-rows { display: grid; gap: clamp(8px, 1vw, 14px); }
.ac-row {
  display: flex; align-items: baseline; gap: clamp(10px, 1.4vw, 22px);
  padding: clamp(8px, .9vw, 14px) clamp(10px, 1.2vw, 18px);
  border-left: 3px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
}
.ac-row.ac-right { border-left-color: #6eebb4; background: rgba(110,235,180,.07); }
.ac-row.bad { border-left-color: #e46a5a; background: rgba(228,106,90,.08); }
.ac-label {
  font-size: clamp(13px, 1.25vw, 21px); letter-spacing: .18em;
  color: rgba(214,235,230,.9); min-width: 10.5em; font-weight: 600;
}
.ac-verdict { font-size: clamp(18px, 1.9vw, 32px); line-height: 1; margin-left: .2em; }
.ac-val { display: flex; align-items: baseline; gap: clamp(8px, 1vw, 16px); }
.ac-val b {
  font-size: clamp(20px, 2.2vw, 38px); color: #fff;
  background: rgba(255,255,255,.10); padding: 0 .45em; border-radius: 3px;
}
.ac-row.ac-right .ac-val b { background: rgba(110,235,180,.22); }
.ac-row.bad .ac-val b { background: rgba(228,106,90,.25); }
.ac-val span { font-size: clamp(20px, 2.3vw, 40px); color: #f4fbf8; }
.ac-bar { margin-top: clamp(12px, 1.4vw, 22px); height: 3px; background: rgba(255,255,255,.09); }
.ac-bar i { display: block; height: 100%; width: 0%; background: var(--green, #6eebb4); }
#answercard.on .ac-bar i { animation: acfill 5s linear forwards; }
@keyframes acfill { from { width: 100%; } to { width: 0%; } }

/* ---------- phone: start button + answer lock flicker ---------- */
#wait #startBtn, .start {
  display: block; width: 100%; margin-top: 18px; padding: 16px 18px;
  background: #6eebb4; color: #05201a; border: 0; border-radius: 4px;
  font-family: var(--pixel); font-size: 13px; letter-spacing: .12em; cursor: pointer;
}
#wait #startBtn:active { transform: translateY(1px); }
#wait #startBtn[disabled] { opacity: .6; }

.ans.flash { animation: lockflick .19s steps(1) 2; }
@keyframes lockflick {
  0%   { background: #ffffff; color: #05201a; }
  50%  { background: rgba(110,235,180,.28); }
  100% { background: #ffffff; color: #05201a; }
}

/* ---------- staged reveal: pick first, verdict after three seconds ---------- */
#answercard .ac-right,
#answercard .ac-verdict { opacity: 0; transform: translateY(4px); transition: opacity .3s ease, transform .3s ease; }
#answercard.verdict .ac-right,
#answercard.verdict .ac-verdict { opacity: 1; transform: none; }
#answercard .ac-kicker::after { content: ' — WAIT FOR THE VERDICT'; opacity: .55; }
#answercard.verdict .ac-kicker::after { content: ''; }
#answercard.on .ac-bar i { animation-duration: 6s; }

/* the lobby start button needs to be unmissable on a phone */
#wait #startBtn {
  margin: 22px auto 10px; width: min(78vw, 320px);
  font-size: 15px; padding: 20px 18px; letter-spacing: .10em;
  box-shadow: 0 0 0 3px rgba(110,235,180,.18), 0 10px 30px rgba(0,0,0,.45);
}
#wait #startBtn::after { content: ' ▶'; }

/* ---------- final standings ---------- */
#standings {
  margin: clamp(14px, 1.6vw, 26px) auto 0; width: min(70vw, 980px);
  border: 1px solid rgba(255,194,71,.28);
  background: linear-gradient(180deg, rgba(10,26,20,.92), rgba(4,12,10,.95));
  box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 18px 50px rgba(0,0,0,.55);
}
#standings .st-head {
  font-family: var(--pixel); font-size: clamp(9px, 1vw, 14px); letter-spacing: .24em;
  color: var(--amber, #ffc247); padding: 10px 14px; border-bottom: 1px solid rgba(255,194,71,.18);
}
#standings .st-rows { max-height: 34vh; overflow: hidden; }
#standings .st-row {
  display: grid; grid-template-columns: 3.2em 1fr auto auto; gap: 12px; align-items: baseline;
  padding: 6px 14px; border-bottom: 1px solid rgba(255,255,255,.05);
  font-size: clamp(12px, 1.5vw, 22px); color: #dff5ec;
}
#standings .st-row .pos { color: rgba(200,225,215,.5); font-family: var(--pixel); font-size: .62em; }
#standings .st-row .nm { font-weight: 600; }
#standings .st-row .tb { color: rgba(200,225,215,.55); font-size: .8em; }
#standings .st-row .sc { color: var(--green, #6eebb4); font-family: var(--pixel); font-size: .74em; }
#standings .st-row.me { background: rgba(110,235,180,.10); box-shadow: inset 3px 0 0 var(--green, #6eebb4); }
#standings .st-row.me .nm::after { content: ' ◂ YOU'; color: var(--green, #6eebb4); font-size: .7em; letter-spacing: .1em; }
#standings .st-empty { padding: 12px 14px; color: rgba(200,225,215,.5); font-size: clamp(11px, 1.2vw, 18px); }