/* Projector display. Layout from the prototype: one huge question on a deep-navy
   stage, a brass scoring rail of 8 teams along the bottom. Sized with vw/vh and
   container units so it reads from the back of the lounge at 1920×1080 and 1280×720. */
body{overflow:hidden;cursor:default}
body.idle-mouse{cursor:none}

/* ---------- stage ---------- */
#stage{position:relative;height:100%;display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-block:clamp(10px,2vh,24px);box-sizing:border-box;
  background:
    radial-gradient(60% 50% at 50% -10%, rgba(0,148,218,.20), transparent 70%),
    radial-gradient(40% 40% at 100% 110%, rgba(240,180,76,.08), transparent 70%),
    var(--night)}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-size:clamp(12px,1.25vw,20px);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  padding-bottom:clamp(8px,1.4vh,16px);border-bottom:1px solid var(--line)}
.brand{display:flex;gap:.8em;align-items:center}
.brand b{color:var(--fg);font-weight:600}
.brand i{width:1px;height:1.1em;background:var(--line)}
.brand .tag{font-style:normal;color:var(--night);background:var(--brass);padding:.1em .6em;border-radius:4px;font-weight:700}
.status{display:flex;gap:1.2em;align-items:center;font-variant-numeric:tabular-nums}
.pips{display:inline-flex;gap:5px;vertical-align:middle}
.pips span{width:.75em;height:.75em;border-radius:50%;border:1.5px solid var(--brass)}
.pips span.on{background:var(--brass)}
.pts{color:var(--brass)}
.live{color:var(--night);background:var(--azure);padding:.15em .6em;border-radius:4px;font-weight:700;animation:livePulse 1s ease-in-out infinite}

main{position:relative;min-height:0;display:grid;container-type:size}
.view{grid-area:1/1;min-height:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}

/* title */
.t-kicker{font-size:clamp(13px,1.5vw,22px);letter-spacing:.3em;text-transform:uppercase;color:var(--azure)}
.t-head{font-family:var(--display);font-weight:800;line-height:.86;letter-spacing:-.03em;margin:.14em 0 .2em;
  font-size:min(12vw,18cqh)}
.t-head .w{display:block}
.t-head .w2{color:var(--brass)}
.t-head span{display:inline-block;animation:drop .7s cubic-bezier(.2,1.4,.4,1) both}
@keyframes drop{from{transform:translateY(-.6em);opacity:0}to{transform:none;opacity:1}}
.t-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:.4em 1.4em;font-size:clamp(15px,1.8vw,28px);color:var(--muted)}
.t-meta b{color:var(--fg);font-weight:600}
.t-join{display:flex;align-items:center;gap:clamp(12px,2vw,32px);margin-top:3cqh;padding:clamp(8px,1.2vw,18px);border:1px solid var(--line);border-radius:10px;background:var(--panel);text-align:left}
.t-join img{height:min(22cqh,240px);aspect-ratio:1;border-radius:6px;background:#fff;display:block}
.t-join .l1{font-family:var(--display);font-weight:700;font-size:clamp(18px,2.4vw,40px)}
.t-join .l2{color:var(--brass);font-size:clamp(15px,1.8vw,30px);font-variant-numeric:tabular-nums;margin-top:.2em;font-weight:600}
.t-join .l3{color:var(--muted);font-size:clamp(12px,1.2vw,19px);margin-top:.5em}

/* round intro */
.r-num{font-family:var(--display);font-weight:800;line-height:.8;font-size:min(30vh,44cqh,360px);letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:2px var(--brass);animation:pop .8s cubic-bezier(.2,1.3,.4,1) both}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.r-label{font-family:var(--display);font-weight:700;font-size:clamp(26px,4.2vw,68px);margin:.2em 0 .1em}
.r-rule{font-size:clamp(16px,2vw,32px);color:var(--muted)}
.r-rule .g{color:var(--good)} .r-rule .r{color:var(--bad)}
.r-cats{display:flex;flex-wrap:wrap;justify-content:center;gap:.5em 1.6em;margin-top:4cqh;font-size:clamp(14px,1.4vw,22px);
  letter-spacing:.14em;text-transform:uppercase;color:var(--azure)}

/* question */
.q-wrap{width:min(1600px,100%);display:grid;gap:clamp(10px,3cqh,36px);justify-items:center}
.q-cat{font-size:clamp(14px,1.6vw,24px);letter-spacing:.24em;text-transform:uppercase;color:var(--azure);font-weight:600}
.q-text{font-family:var(--display);font-weight:700;line-height:1.08;letter-spacing:-.015em;text-wrap:balance;max-width:24ch;
  font-size:max(26px,calc(min(5.6cqw,13cqh) * var(--qs,1)));animation:rise .5s ease-out both}
.has-media .q-text{font-size:max(24px,calc(min(4.4cqw,9cqh) * var(--qs,1)))}
@keyframes rise{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
.q-media{max-height:38cqh;max-width:100%;border-radius:6px;border:1px solid var(--line)}
.q-ph{display:grid;place-items:center;width:min(560px,90%);aspect-ratio:16/9;max-height:30cqh;border:1px dashed var(--line);border-radius:6px;color:var(--muted);font-size:clamp(13px,1.3vw,20px)}
.q-audio{display:flex;align-items:center;gap:.8em;padding:.5em 1.4em;border-radius:999px;border:1.5px solid var(--azure);font-size:clamp(18px,2.2vw,36px);font-family:var(--display);font-weight:700;color:var(--fg)}
.q-audio .eq{display:inline-flex;gap:4px;align-items:flex-end;height:1em}
.q-audio .eq i{width:.18em;background:var(--azure);height:30%;border-radius:2px}
.q-audio.playing .eq i{animation:eq .8s ease-in-out infinite}
.q-audio.playing .eq i:nth-child(2){animation-delay:.2s}.q-audio.playing .eq i:nth-child(3){animation-delay:.4s}.q-audio.playing .eq i:nth-child(4){animation-delay:.1s}
@keyframes eq{0%,100%{height:25%}50%{height:100%}}
.answer{perspective:900px;min-height:1em}
.answer .card{display:inline-flex;align-items:baseline;gap:.7em;padding:.4em 1.1em;border:1.5px solid var(--brass);border-radius:6px;
  background:rgba(240,180,76,.08);transform-origin:50% 0;transform:rotateX(90deg);opacity:0;transition:transform .55s cubic-bezier(.2,1.3,.4,1),opacity .3s}
.answer.show .card{transform:none;opacity:1}
.answer .lbl{font-size:clamp(12px,1.2vw,18px);letter-spacing:.24em;text-transform:uppercase;color:var(--brass)}
.answer .txt{font-family:var(--display);font-weight:700;font-size:clamp(26px,min(4.2cqw,9cqh),80px);color:var(--brass);overflow-wrap:anywhere}

/* question timer */
.timer{position:absolute;top:clamp(6px,1.5cqh,24px);right:0;width:clamp(70px,8vw,130px);aspect-ratio:1;transition:opacity .3s;z-index:2}
.timer svg{width:100%;height:100%;transform:rotate(-90deg)}
.timer circle{fill:none;stroke-width:7}
.timer .bg{stroke:var(--line)}
.timer .fg{stroke:var(--azure);stroke-linecap:round;transition:stroke .3s}
.timer.warn .fg{stroke:var(--brass)} .timer.crit .fg{stroke:var(--bad)}
.timer .num{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:clamp(24px,3vw,48px);font-variant-numeric:tabular-nums}
.timer.idle{opacity:.45}
.timer.up .num{color:var(--bad);animation:blink .5s steps(2) 4}
@keyframes blink{50%{opacity:0}}

/* ---------- buzzer banner (between the question and the rail) ---------- */
.buzzer{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(12px,2vw,36px);
  margin:clamp(6px,1.2vh,14px) 0;padding:clamp(10px,1.6vh,22px) clamp(14px,2vw,32px);border-radius:10px;
  background:var(--tc,var(--azure));color:var(--ink,#06111F);animation:slideUp .35s cubic-bezier(.2,1.3,.4,1) both;
  box-shadow:0 0 0 3px rgba(255,255,255,.15),0 10px 50px color-mix(in srgb,var(--tc,var(--azure)) 50%,transparent)}
@keyframes slideUp{from{transform:translateY(40%);opacity:0}to{transform:none;opacity:1}}
.buzzer .ring{position:relative;width:clamp(64px,8vh,110px);aspect-ratio:1}
.buzzer .ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.buzzer .ring circle{fill:none;stroke-width:9}
.buzzer .ring .bg{stroke:rgba(0,0,0,.18)}
.buzzer .ring .fg{stroke:currentColor;stroke-linecap:round}
.buzzer .ring .num{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:clamp(28px,4.5vh,60px);font-variant-numeric:tabular-nums}
.buzzer .who{font-family:var(--display);font-weight:800;line-height:1;letter-spacing:-.02em;font-size:clamp(30px,min(4.6vw,8vh),96px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.buzzer .who small{display:block;font-family:var(--body);font-weight:600;font-size:.32em;letter-spacing:.2em;text-transform:uppercase;opacity:.8;margin-bottom:.35em}
.buzzer .nextq{text-align:right;font-size:clamp(14px,1.6vw,26px);font-weight:600;line-height:1.3}
.buzzer .nextq span{display:block;font-size:.75em;letter-spacing:.16em;text-transform:uppercase;opacity:.75}
.buzzer .nextq .dot{display:inline-block;width:.7em;height:.7em;border-radius:50%;margin-right:.25em;vertical-align:-.05em;box-shadow:0 0 0 2px rgba(0,0,0,.25)}
.buzzer.armed{background:var(--panel);color:var(--fg);border:2px solid var(--azure);box-shadow:0 0 50px rgba(0,148,218,.35);grid-template-columns:auto 1fr}
.buzzer.armed .who{color:var(--azure);animation:livePulse 1s ease-in-out infinite}
@keyframes livePulse{50%{opacity:.7}}
.buzzer.armed .bolt{font-size:clamp(36px,6vh,80px);line-height:1}
.buzzer.timeup .who::after{content:" · Time!";}

/* ---------- standings ---------- */
.board-h{font-family:var(--display);font-weight:800;font-size:clamp(28px,4.8vw,76px);letter-spacing:-.02em;margin:0 0 .1em}
.board-sub{color:var(--muted);font-size:clamp(14px,1.4vw,22px);letter-spacing:.14em;text-transform:uppercase;margin-bottom:2.4vh}
.board{position:relative;width:min(1200px,100%);--rh:clamp(34px,7.4vh,80px);height:calc(var(--rh) * 8)}
.brow{position:absolute;left:0;right:0;height:calc(var(--rh) - 8px);display:grid;grid-template-columns:2.2em .5em minmax(0,14em) 1fr 5.6em;align-items:center;gap:.8em;
  font-size:clamp(16px,min(2.2vw,3.8vh),36px);transition:transform .9s cubic-bezier(.3,1.25,.4,1)}
.brow .rk{font-family:var(--display);font-weight:700;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.brow .sw{width:.5em;height:70%;border-radius:2px}
.brow .nm{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
.brow .bar{height:60%;border-radius:3px;background:linear-gradient(90deg,var(--deep),var(--azure));width:0;transition:width .9s cubic-bezier(.3,1.1,.4,1)}
.brow .sc{font-family:var(--display);font-weight:800;text-align:right;font-variant-numeric:tabular-nums}
.brow.lead .rk,.brow.lead .sc{color:var(--brass)}
.brow.lead .bar{background:linear-gradient(90deg,#9a6a1c,var(--brass))}
.brow.neg .sc{color:var(--bad)}

/* final */
.f-pre{font-family:var(--display);font-weight:700;font-size:clamp(34px,6.4vw,110px);animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{50%{opacity:.45}}
.f-win{font-family:var(--display);font-weight:800;line-height:.9;letter-spacing:-.03em;color:var(--brass);font-size:min(10vw,22cqh);animation:pop 1s cubic-bezier(.2,1.4,.4,1) both;overflow-wrap:anywhere}
.f-score{font-size:clamp(18px,2.4vw,38px);color:var(--muted);margin:.4em 0 2cqh}
.final-board{--rh:clamp(24px,4.4cqh,46px)}

/* ---------- rail ---------- */
.rail{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:clamp(6px,.8vw,12px);padding-top:clamp(8px,1.6vh,18px);border-top:1px solid var(--line)}
.chip{position:relative;display:flex;flex-direction:column;gap:2px;padding:.45em .7em .45em .8em;border-radius:5px;background:var(--panel);border:1px solid var(--line);min-width:0;
  font-size:clamp(12px,1.15vw,19px);transition:background .3s,border-color .3s,opacity .3s,transform .3s;overflow:visible}
.chip::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;border-radius:5px 0 0 5px;background:var(--tc)}
.chip .n{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip .s{font-family:var(--display);font-weight:800;font-size:1.75em;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:-.02em}
.chip.neg .s{color:var(--bad)}
.chip.out{opacity:.35}
.chip.out .n{text-decoration:line-through}
.chip.on{background:var(--tc);border-color:var(--tc);transform:translateY(-6px)}
.chip.on .n,.chip.on .s{color:var(--ink)}
.chip.inline .n::after{content:attr(data-pos);margin-left:.4em;color:var(--brass)}
.chip.hit-good{border-color:var(--good);background:rgba(52,199,123,.16)}
.chip.hit-bad{border-color:var(--bad);background:rgba(239,83,80,.16)}
.chip .float{position:absolute;right:.5em;top:-.2em;font-family:var(--display);font-weight:800;font-size:1.6em;pointer-events:none;animation:floatUp 1.4s ease-out forwards}
.chip .float.g{color:var(--good)} .chip .float.b{color:var(--bad)} .chip .float.e{color:var(--muted);font-size:1em;white-space:nowrap}
@keyframes floatUp{from{transform:translateY(0);opacity:1}to{transform:translateY(-2.2em);opacity:0}}

/* ---------- overlays ---------- */
.ov{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:16px;box-sizing:border-box;
  background:radial-gradient(60% 50% at 50% -10%, rgba(0,148,218,.16), transparent 70%),var(--night);animation:fade .35s ease-out}
.ov .board{--rh:clamp(34px,8vh,84px)}
.brk-h{font-family:var(--display);font-weight:800;font-size:clamp(44px,8vw,150px);letter-spacing:-.03em;margin:0}
.brk-t{font-family:var(--display);font-weight:800;font-size:clamp(70px,16vw,280px);color:var(--brass);font-variant-numeric:tabular-nums;line-height:1}
.brk-s{color:var(--muted);font-size:clamp(16px,1.8vw,28px);margin-top:1vh}
.drinks-h{font-family:var(--display);font-weight:800;line-height:.9;letter-spacing:-.03em;font-size:clamp(56px,12vw,220px);color:var(--brass);animation:pop .9s cubic-bezier(.2,1.5,.4,1) both}
.drinks-s{font-size:clamp(18px,2.6vw,44px);margin-top:.6em;color:var(--fg)}
#ov-drinks{background:radial-gradient(60% 60% at 50% 60%,rgba(240,180,76,.20),transparent 70%),var(--night)}

#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:30}
.sound-hint{position:fixed;top:clamp(56px,8vh,90px);left:16px;z-index:50;background:var(--panel);border:1px solid var(--brass);color:var(--brass);border-radius:6px;padding:.4em .8em;font-size:14px;cursor:pointer}
.denied{position:fixed;inset:0;display:grid;place-items:center;text-align:center;padding:24px;z-index:99;background:var(--night)}