/* hearth-live projector display — a committed single-world design (taproom
   jumbotron at night, Three Notch'd brand navy). Painted explicitly so it
   holds on any panel; sized for legibility at 10 feet (saga acceptance X3). */

:root{
  --ground:#06152b;
  --ground-2:#0a1e3a;
  --panel:#0f2745;
  --edge:#20456f;
  --ink:#f6efe0;
  --muted:#93add0;
  --faint:#5f7aa3;
  --amber:#f4a83a;
  --amber-deep:#d9852a;
  --green:#43d98a;
  --coral:#ff6a5c;
  --brand:#041E42;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(120vw 70vh at 78% -8%, rgba(244,168,58,.14), transparent 60%),
    radial-gradient(100vw 62vh at 6% 4%, rgba(67,217,138,.08), transparent 55%),
    linear-gradient(180deg,var(--ground-2),var(--ground) 60%);
  color:var(--ink);
  font-family:"Barlow",system-ui,-apple-system,sans-serif;
  overflow:hidden;
}
.display{font-family:"Paytone One",system-ui,sans-serif;font-weight:400}
.tnum{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}

/* stage + screen switching: exactly one screen visible, driven by
   data-screen on the stage. */
.stage{height:100vh;padding:4vmin 5vmin;display:grid;transition:opacity .4s ease}
.screen{display:none;grid-area:1/1;flex-direction:column;min-height:0;
  animation:enter .45s ease}
.stage[data-screen="waiting"]     .screen[data-for="waiting"],
.stage[data-screen="join"]        .screen[data-for="join"],
.stage[data-screen="question"]    .screen[data-for="question"],
.stage[data-screen="reveal"]      .screen[data-for="reveal"],
.stage[data-screen="leaderboard"] .screen[data-for="leaderboard"]{display:flex}
@keyframes enter{from{opacity:0;transform:translateY(1.2vmin)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  .screen{animation:none}
  .rec,.spinner{animation:none}
}

/* staleness: dim to 40% + chip after 30s of silence (session_core.staleness
   DEFAULT_DIM_OPACITY / DEFAULT_STALENESS_THRESHOLD_SEC). */
body.stale .stage{opacity:.4}
.stale-chip{position:fixed;top:3vmin;right:3vmin;display:flex;align-items:center;gap:1vmin;
  background:rgba(255,106,92,.14);border:1px solid rgba(255,106,92,.5);color:var(--coral);
  border-radius:999px;padding:1vmin 2vmin;font-family:"Barlow Semi Condensed";font-weight:700;
  text-transform:uppercase;letter-spacing:.1em;font-size:1.6vmin;z-index:10}
.spinner{width:1.6vmin;height:1.6vmin;border-radius:50%;border:.3vmin solid rgba(255,106,92,.35);
  border-top-color:var(--coral);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- waiting ---------- */
.waiting{align-items:center;justify-content:center;text-align:center;gap:1vmin}
.waiting .flame{font-size:9vmin}
.waiting h1{font-size:9vmin;margin:0}
.waiting p{font-size:2.6vmin}

/* ---------- join ---------- */
.join{align-items:center;justify-content:center;text-align:center}
.join-cta{font-family:"Barlow Semi Condensed";font-weight:700;text-transform:uppercase;
  letter-spacing:.18em;color:var(--amber);font-size:2.8vmin}
.qr-holder{margin:2.4vmin 0;border-radius:2vmin;background:#fff;padding:2vmin;
  box-shadow:0 2vmin 5vmin -2vmin rgba(0,0,0,.7)}
.qr-holder canvas{display:block;width:30vmin;height:30vmin;image-rendering:pixelated}
.qr-holder.no-qr{display:none}
.join-code{font-size:8vmin;letter-spacing:.08em;font-family:"Paytone One"}
.join-code span{color:var(--amber)}
.join-url{color:var(--faint);font-size:2.4vmin;margin-top:.6vmin}
.join-who{margin-top:2.6vmin;color:var(--muted);font-size:2.4vmin;max-width:80vmin;line-height:1.5}
.join-who b{color:var(--green)}

/* ---------- question ---------- */
.question{gap:2vmin}
.q-head{display:flex;align-items:baseline;gap:3vmin;margin-top:1vmin}
.q-round{font-family:"Barlow Semi Condensed";font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;color:var(--amber);font-size:2.6vmin}
.q-pts{color:var(--faint);font-weight:600;font-size:2.4vmin}
.q-num{margin-left:auto;color:var(--muted);font-family:"Barlow Semi Condensed";
  font-weight:700;font-size:2.4vmin;letter-spacing:.06em}
.q-prompt{font-family:"Paytone One";font-size:6.2vmin;line-height:1.08;margin:.5vmin 0 0;
  text-wrap:balance;max-width:22ch}
.q-hud{display:flex;align-items:center;gap:4vmin;margin-top:auto}
.ring{--p:100;width:13vmin;height:13vmin;border-radius:50%;flex:none;display:grid;
  place-items:center;position:relative;
  background:conic-gradient(var(--coral) calc(var(--p)*1%), rgba(255,255,255,.08) 0)}
.ring::before{content:"";position:absolute;inset:1.2vmin;border-radius:50%;background:var(--panel)}
.ring b{position:relative;font-family:"Paytone One";font-size:3.4vmin}
.ring.locked{background:conic-gradient(var(--faint) 100%, var(--faint) 0)}
.prog{flex:1}
.prog-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:1vmin}
.prog-n{font-family:"Paytone One";font-size:3.2vmin}
.prog-n .of{color:var(--faint)}
.prog-l{color:var(--muted);font-family:"Barlow Semi Condensed";text-transform:uppercase;
  letter-spacing:.1em;font-size:1.9vmin;font-weight:700}
.bar{height:1.6vmin;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.bar i{display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--amber),var(--green));transition:width .5s ease}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:1.8vmin;margin-top:2vmin}
.choice{display:flex;align-items:center;gap:2vmin;background:rgba(255,255,255,.04);
  border:1px solid var(--edge);border-radius:1.8vmin;padding:2.2vmin 2.4vmin;
  font-size:3.4vmin;font-weight:500}
.choice .k{font-family:"Paytone One";width:5.4vmin;height:5.4vmin;border-radius:1.2vmin;
  flex:none;display:grid;place-items:center;background:var(--brand);color:var(--amber);
  border:1px solid var(--edge);font-size:2.8vmin}
.freetext{display:none;color:var(--muted);font-size:2.8vmin;border:1px dashed var(--edge);
  border-radius:1.8vmin;padding:2.4vmin;margin-top:2vmin;text-align:center}
.question.is-text .choices{display:none}
.question.is-text .freetext{display:block}

/* ---------- reveal ---------- */
.reveal{justify-content:center;gap:1vmin}
.r-label{font-family:"Barlow Semi Condensed";font-weight:700;text-transform:uppercase;
  letter-spacing:.16em;color:var(--muted);font-size:2.4vmin}
.r-answer{font-size:7.4vmin;color:var(--green);line-height:1.05;margin:.4vmin 0;
  text-wrap:balance;max-width:20ch}
.r-fact{color:var(--muted);font-size:2.8vmin;max-width:46ch;line-height:1.5;margin-bottom:3vmin}
.callers{display:flex;flex-wrap:wrap;gap:1.4vmin;max-width:100vmin}
.caller{font-family:"Barlow Semi Condensed";font-weight:600;font-size:2.6vmin;
  padding:1vmin 2.2vmin;border-radius:999px;background:rgba(67,217,138,.12);
  border:1px solid rgba(67,217,138,.4);color:var(--green)}
.caller small{color:rgba(67,217,138,.75);font-weight:700;margin-left:.8vmin}
.nobody{color:var(--faint);font-size:2.6vmin}

/* ---------- leaderboard ---------- */
.leaderboard{justify-content:center}
.lb-title{font-size:4.6vmin;margin:0 0 2.4vmin}
.lb{width:100%;border-collapse:collapse}
.lb td{padding:1.7vmin .8vmin;border-bottom:1px solid var(--edge);font-size:3.1vmin}
.lb tr:last-child td{border-bottom:0}
.lb .rk{font-family:"Paytone One";width:8vmin;color:var(--faint)}
.lb .nm{font-weight:600}
.lb .sc{text-align:right;font-family:"Barlow Semi Condensed";font-weight:700}
.lb .mv{width:10vmin;text-align:right;font-weight:700;font-size:2.4vmin}
.lb .up{color:var(--green)}
.lb .dn{color:var(--coral)}
.lb .same{color:var(--faint)}
.lb tr.leader td{color:var(--amber)}
.lb tr.leader .rk{color:var(--amber)}