/* Noisy Chili quiz night -- one stylesheet for all four screens.
   Warm dark: a phone must not be the brightest thing at the table. The palette is a heat
   ramp and difficulty IS heat -- nothing else is coloured. */
:root{
  --ink:#150E10; --ink-2:#221619; --ink-3:#2A1B1F; --line:#3A272B;
  --bone:#FBF3E8; --bone-dim:#A08A80; --bone-faint:#6B5750;
  --heat-1:#9BC53D; --heat-2:#F0A027; --heat-3:#E02B3C;
  --display:"Big Shoulders Display",Impact,"Haettenschweiler",sans-serif;
  --body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:#0B0709;color:var(--bone);font-family:var(--body);-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer}
button:disabled{cursor:default}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ------------------------------------------------------------ shared bits */
.kicker{font:600 10.5px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--bone-dim)}
.brand{font:800 24px/1 var(--display);text-transform:uppercase;letter-spacing:.02em}
.brand span{color:var(--bone-dim);font-weight:600}
.big{font:800 44px/.92 var(--display);text-transform:uppercase;letter-spacing:.005em;margin:10px 0 0;text-wrap:balance}
.lead{font:500 15px/1.45 var(--body);color:var(--bone);margin:14px 0 0}
.dim{color:var(--bone-dim)}
.ghost{background:transparent;color:var(--bone-dim);border:1px solid var(--line);border-radius:8px;
  padding:9px 13px;font:600 11px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase}
.ghost:hover:not(:disabled){color:var(--bone);border-color:var(--bone-dim)}
.ghost:disabled{opacity:.4}
.ghost:focus-visible,.submit:focus-visible,.go:focus-visible,.btn:focus-visible{outline:3px solid var(--bone);outline-offset:2px}
.submit{width:100%;min-height:56px;border:0;border-radius:12px;background:var(--heat-3);color:#fff;
  font:600 15px/1.2 var(--body);letter-spacing:.02em;padding:8px 16px}
.submit:disabled{background:var(--ink-2);color:var(--bone-faint);border:1.5px solid var(--line)}
.submit.calm{background:var(--ink-2);color:var(--bone);border:1.5px solid var(--line)}
.field{width:100%;height:58px;padding:0 16px;border-radius:12px;background:var(--ink-2);border:1.5px solid var(--line);
  color:var(--bone);font:500 18px/1 var(--body);appearance:none}
.field::placeholder{color:var(--bone-faint)}
.field:focus{outline:none;border-color:var(--heat-2);box-shadow:0 0 0 3px color-mix(in srgb,var(--heat-2) 22%,transparent)}
.field.filled{border-color:color-mix(in srgb,var(--heat-1) 45%,var(--line))}
.field[readonly]{opacity:.7}
.err{color:#FF8A95;font:500 13.5px/1.4 var(--body);margin:10px 0 0;min-height:1.4em}
.heat{display:inline-flex;gap:3px}
.heat svg{width:11px;height:14px;display:block}
.h-E{color:var(--heat-1)} .h-M{color:var(--heat-2)} .h-H{color:var(--heat-3)}
.mode{position:fixed;right:10px;bottom:8px;z-index:50;font:600 9px/1 var(--mono);letter-spacing:.14em;
  text-transform:uppercase;color:var(--bone-faint);pointer-events:none}
.mode.offline{color:var(--heat-3)} .mode.polling{color:var(--heat-2)}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:60;max-width:92vw;
  background:var(--bone);color:var(--ink);border-radius:10px;padding:11px 15px;font:600 13.5px/1.35 var(--body);
  box-shadow:0 8px 30px rgba(0,0,0,.5)}
.toast.bad{background:var(--heat-3);color:#fff}

/* movement arrows */
.mv{font:500 12px/1 var(--mono);letter-spacing:.04em;color:var(--bone-dim)}
.mv.up{color:var(--heat-1)}

/* ------------------------------------------------------------ the answer sheet (a phone per table) */
.page-sheet .phone{max-width:430px;margin:0 auto;min-height:100vh;min-height:100dvh;background:var(--ink);position:relative}
@media (min-width:640px){.page-sheet .phone{box-shadow:0 0 0 1px var(--line)}}
.page-sheet .pad{padding:26px 22px 40px}
.page-sheet form label{display:block;font:600 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--bone-dim);margin:22px 0 8px}
.page-sheet form .submit{margin-top:22px}
.page-sheet .hint{text-align:center;font:400 12px/1.45 var(--body);color:var(--bone-dim);margin:12px 0 0}
.notice{margin:18px 0 0;padding:13px 14px;border-radius:11px;background:var(--ink-3);border-left:4px solid var(--heat-2);
  font:500 14px/1.45 var(--body)}
.notice b{display:block;margin-bottom:4px}
.row-btns{display:flex;gap:9px;margin-top:14px}
.row-btns>*{flex:1}

.top{position:sticky;top:0;z-index:5;background:rgba(21,14,16,.95);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);padding:14px 18px 12px;display:flex;align-items:flex-end;gap:12px}
.round-no{font:600 11px/1 var(--mono);letter-spacing:.16em;color:var(--bone-dim)}
.round-name{font:800 30px/.86 var(--display);letter-spacing:.01em;text-transform:uppercase;margin:5px 0 0}
.top .team{margin-left:auto;text-align:right;min-width:0}
.top .team-name{font:600 13px/1.2 var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}
.saved{display:flex;align-items:center;justify-content:flex-end;gap:6px;font:500 11px/1 var(--mono);
  letter-spacing:.06em;color:var(--heat-1);margin-top:6px;white-space:nowrap}
.saved .dot{width:7px;height:7px;border-radius:50%;background:currentColor;
  box-shadow:0 0 0 3px color-mix(in srgb,currentColor 20%,transparent)}
.saved.saving{color:var(--heat-2)} .saved.bad{color:var(--heat-3)}
.sheet{padding:6px 18px 170px}
.q{padding:20px 0;border-bottom:1px solid var(--line)}
.q:last-child{border-bottom:0}
.q-head{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.q-no{font:600 13px/1 var(--mono);color:var(--bone-dim);min-width:16px}
.q-head .heat{margin-left:auto}
.q-text{font:500 17px/1.34 var(--body);letter-spacing:-.005em;margin:0 0 12px}
.bottom{position:fixed;bottom:0;left:0;right:0;z-index:6;max-width:430px;margin:0 auto;
  background:linear-gradient(to top,var(--ink) 66%,rgba(21,14,16,0));padding:22px 18px 20px}
.progress{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.bars{display:flex;gap:4px;flex:1}
.bar{height:4px;flex:1;border-radius:2px;background:var(--line)}
.bar.on{background:var(--heat-1)}
.count{font:600 11px/1 var(--mono);letter-spacing:.08em;color:var(--bone-dim)}
.handed{display:flex;align-items:center;justify-content:center;gap:9px;min-height:56px;border-radius:12px;
  border:1.5px solid color-mix(in srgb,var(--heat-1) 50%,var(--line));color:var(--heat-1);font:600 15px/1.2 var(--body)}
.mine{list-style:none;margin:18px 0 0;padding:0}
.mine li{display:grid;grid-template-columns:22px 1fr;gap:3px 10px;padding:11px 0;border-bottom:1px solid var(--line)}
.mine .n{font:600 12px/1.4 var(--mono);color:var(--bone-dim);grid-row:span 2}
.mine .t{font:400 13px/1.35 var(--body);color:var(--bone-dim)}
.mine b{font:600 16px/1.3 var(--body)}
.mine b.blank{color:var(--bone-faint);font-weight:500}

.brk{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;padding:26px 22px 30px;text-align:center}
.brk .clock{font:800 88px/.84 var(--display);margin:16px 0 0;font-variant-numeric:tabular-nums}
.brk .until{font:500 12px/1 var(--mono);letter-spacing:.06em;color:var(--bone-dim);margin:12px 0 0;text-transform:uppercase}
.card{margin:28px 0 0;padding:20px 18px;border-radius:14px;background:var(--ink-2);border:1px solid var(--line)}
.card .team{font:600 19px/1.2 var(--body)}
.card .score{font:800 54px/.9 var(--display);margin:12px 0 0}
.card .of{font:500 11.5px/1 var(--mono);letter-spacing:.06em;color:var(--bone-dim);margin:9px 0 0;text-transform:uppercase}
.card .place{display:inline-block;margin:16px 0 0;padding:7px 13px;border-radius:20px;background:var(--ink);
  border:1px solid var(--line);font:600 12px/1 var(--mono);letter-spacing:.08em;color:var(--heat-2);text-transform:uppercase}
.brk .safe{margin-top:auto;padding-top:26px;font:400 13px/1.5 var(--body);color:var(--bone-dim)}
.brk .safe b{display:block;color:var(--bone);font-weight:600;margin-bottom:5px;font-size:14px}
details.own{margin:22px 0 0;text-align:left}
details.own summary{font:600 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--bone-dim);
  padding:10px 0;cursor:pointer}

/* ------------------------------------------------------------ the projector (16:9, read from the back table) */
.page-screen{background:#000;overflow:hidden}
.screen{position:fixed;inset:0;margin:auto;width:min(100vw,177.78vh);height:min(56.25vw,100vh);background:var(--ink);
  container-type:size;display:flex;flex-direction:column;overflow:hidden}
.screen .bar-top{display:flex;align-items:center;gap:2.2cqw;padding:2.2cqw 3cqw 0;min-height:6cqw}
.screen .round{font:800 3.4cqw/.9 var(--display);text-transform:uppercase;letter-spacing:.01em}
.screen .round span{color:var(--bone-dim)}
.strip{display:flex;gap:.7cqw;margin-left:auto;align-items:flex-end}
.strip i{display:block;width:1.5cqw;border-radius:.3cqw;background:var(--line)}
.strip i.E{height:1.1cqw}.strip i.M{height:1.7cqw}.strip i.H{height:2.4cqw}
.strip i.done.E{background:var(--heat-1)} .strip i.done.M{background:var(--heat-2)} .strip i.done.H{background:var(--heat-3)}
.strip i.now{background:var(--bone);box-shadow:0 0 0 .3cqw rgba(251,243,232,.18)}
.screen .pos{font:600 1.5cqw/1 var(--mono);letter-spacing:.1em;color:var(--bone-dim);text-transform:uppercase}
.screen .body{flex:1;display:flex;flex-direction:column;justify-content:center;padding:0 6cqw;min-height:0}
.screen .qno{font:600 1.6cqw/1 var(--mono);letter-spacing:.22em;color:var(--heat-3);margin-bottom:2cqw;text-transform:uppercase}
.screen .question{font:600 6.1cqw/1.06 var(--display);letter-spacing:-.005em;margin:0;text-wrap:balance;max-width:88%}
.screen .question.long{font-size:4.6cqw}
.screen .asked{font:500 2.2cqw/1.3 var(--body);color:var(--bone-dim);margin:0 0 2cqw;max-width:80%}
.screen .answer{font:800 7.2cqw/.95 var(--display);text-transform:uppercase;margin:0;text-wrap:balance;max-width:92%}
.screen .answer.long{font-size:5cqw}
.screen .foot{display:flex;align-items:flex-end;gap:2cqw;padding:0 3cqw 2.4cqw}
.screen .join{font:500 1.4cqw/1.5 var(--body);color:var(--bone-dim)}
.screen .join b{display:block;font:600 2.1cqw/1.1 var(--mono);color:var(--bone);letter-spacing:.02em}
.qr{background:var(--bone);border-radius:.6cqw;padding:.7cqw;flex:none}
.qr img,.qr svg{width:100%;height:100%;display:block}
.screen .foot .qr{margin-left:auto;width:8.6cqw;height:8.6cqw}
.screen .lobby{flex:1;display:grid;grid-template-columns:1.1fr 1fr;gap:5cqw;padding:3cqw 5cqw 4cqw;align-items:center}
.screen .lobby .kicker{font-size:1.5cqw;margin-bottom:1.8cqw}
.screen .lobby h1{font:800 8cqw/.86 var(--display);text-transform:uppercase;margin:0}
.screen .lobby h1 span{display:block;color:var(--heat-3)}
.screen .lobby .sub{font:500 2cqw/1.4 var(--body);color:var(--bone-dim);margin:2.4cqw 0 0}
.screen .lobby .teams{font:600 1.8cqw/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;margin:3cqw 0 0;color:var(--heat-1)}
.screen .lobby .qrbox{display:flex;flex-direction:column;align-items:center;gap:1.6cqw}
.screen .lobby .qr{width:26cqw;height:26cqw;border-radius:1cqw;padding:1.2cqw}
.screen .lobby .url{font:600 2.6cqw/1 var(--mono);letter-spacing:.02em}
.screen .lobby .how{font:500 1.5cqw/1.4 var(--body);color:var(--bone-dim);text-align:center}
.board{flex:1;padding:1.6cqw 3cqw 2.4cqw;display:flex;flex-direction:column;min-height:0}
.board h2{font:800 3.4cqw/.9 var(--display);text-transform:uppercase;margin:0 0 1.6cqw}
.rows{display:grid;gap:.7cqw;align-content:start}
.rows.two{grid-template-columns:1fr 1fr;column-gap:1.4cqw}
.srow{display:grid;grid-template-columns:3.4cqw 1fr auto auto;align-items:center;gap:1.6cqw;padding:.85cqw 1.4cqw;
  background:var(--ink-2);border-radius:.6cqw;border-left:.4cqw solid var(--line)}
.srow .rk{font:600 1.8cqw/1 var(--mono);color:var(--bone-dim)}
.srow .nm{font:600 2.3cqw/1.05 var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srow .mv{font-size:1.4cqw}
.srow .sc{font:600 2.6cqw/1 var(--mono);min-width:4cqw;text-align:right}
.srow.first{border-left-color:var(--heat-3);background:#2A181B}
.srow.first .nm{font-size:2.6cqw}
.board .note,.brk-right .note{margin-top:auto;font:500 1.3cqw/1.4 var(--mono);letter-spacing:.06em;color:var(--bone-dim);text-transform:uppercase}
.sbrk{flex:1;display:grid;grid-template-columns:1.05fr 1fr;gap:4cqw;padding:1cqw 3cqw 2.4cqw;min-height:0}
.brk-left{display:flex;flex-direction:column}
.brk-lbl{font:600 1.5cqw/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--bone-dim)}
.brk-clock{font:800 13cqw/.84 var(--display);margin:.8cqw 0 0;font-variant-numeric:tabular-nums}
.brk-bar{height:.5cqw;border-radius:.25cqw;background:var(--line);margin:1.4cqw 0 0;overflow:hidden}
.brk-bar i{display:block;height:100%;background:var(--heat-2);width:0}
.brk-msg{font:500 1.7cqw/1.4 var(--body);color:var(--bone);margin:1.6cqw 0 0;max-width:90%}
.brk-join{margin-top:auto;display:flex;align-items:center;gap:1.6cqw}
.brk-join .qr{width:8.6cqw;height:8.6cqw}
.brk-joint{font:500 1.4cqw/1.5 var(--body);color:var(--bone-dim)}
.brk-joint b{display:block;font:600 1.9cqw/1.2 var(--body);color:var(--bone)}
.brk-right{display:flex;flex-direction:column;border-left:1px solid var(--line);padding-left:3cqw;min-height:0}
.brk-right h2{font:800 2.6cqw/.9 var(--display);text-transform:uppercase;margin:0 0 1.2cqw}
.brk-right .srow{grid-template-columns:2.6cqw 1fr auto auto;padding:.62cqw 1.1cqw}
.brk-right .srow .nm{font-size:1.8cqw} .brk-right .srow.first .nm{font-size:2cqw}
.brk-right .srow .sc{font-size:2cqw;min-width:3.2cqw} .brk-right .srow .rk{font-size:1.4cqw} .brk-right .srow .mv{font-size:1.15cqw}
.screen .center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 6cqw}
.screen .center h1{font:800 9cqw/.86 var(--display);text-transform:uppercase;margin:0}
.screen .center p{font:500 2.2cqw/1.4 var(--body);color:var(--bone-dim);margin:2cqw 0 0}
.screen .center p.question{font:600 5.4cqw/1.06 var(--display);color:var(--bone);max-width:none;margin:2cqw 0 0}
.screen .center p.asked{font:500 2.2cqw/1.3 var(--body);color:var(--bone-dim);max-width:none;margin:1.6cqw 0 0}
.screen .center p.answer{font:800 7.2cqw/.95 var(--display);color:var(--bone);margin:1.4cqw 0 0}
.screen .closest{display:flex;gap:2cqw;margin:3cqw 0 0}
.screen .closest div{background:var(--ink-2);border-radius:.8cqw;padding:1.4cqw 2cqw;min-width:18cqw}
.screen .closest b{display:block;font:600 2.2cqw/1.2 var(--body)}
.screen .closest span{font:500 1.5cqw/1 var(--mono);color:var(--bone-dim)}
.podium{display:flex;align-items:flex-end;justify-content:center;gap:2cqw;margin:1cqw 0 2cqw}
.podium>div{background:var(--ink-2);border-radius:.8cqw .8cqw 0 0;width:22cqw;padding:1.4cqw 1cqw;text-align:center;flex:none}
.podium .p1{height:17cqw;background:#2A181B;border-top:.4cqw solid var(--heat-3)}
.podium .p2{height:13cqw} .podium .p3{height:10cqw}
.podium .rk{font:600 1.6cqw/1 var(--mono);color:var(--bone-dim)}
.podium .nm{font:700 2.4cqw/1.1 var(--body);margin:.8cqw 0 0}
.podium .sc{font:800 4cqw/1 var(--display);margin:.6cqw 0 0}
.screen .hintfs{position:absolute;right:1.2cqw;bottom:.8cqw;font:500 1cqw/1 var(--mono);color:var(--bone-faint);letter-spacing:.1em;
  text-transform:uppercase;opacity:0;transition:opacity .4s}
.screen:hover .hintfs{opacity:1}

/* ------------------------------------------------------------ the MC phone (one hand, mic in the other) */
.page-mc .stage{max-width:460px;margin:0 auto;background:var(--ink);height:100vh;height:100dvh;display:flex;flex-direction:column;position:relative}
@media (min-width:640px){.page-mc .stage{box-shadow:0 0 0 1px var(--line)}}
.roomline{display:flex;align-items:center;gap:8px;padding:12px 16px 10px;border-bottom:1px solid var(--line);flex:none}
.lamp{width:8px;height:8px;border-radius:50%;background:var(--heat-2);flex:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--heat-2) 20%,transparent)}
.lamp.red{background:var(--heat-3);box-shadow:0 0 0 3px color-mix(in srgb,var(--heat-3) 20%,transparent)}
.lamp.green{background:var(--heat-1);box-shadow:0 0 0 3px color-mix(in srgb,var(--heat-1) 20%,transparent)}
.roomline .what{font:600 10.5px/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--bone-dim)}
.roomline .what b{color:var(--bone);font-weight:600}
.roomline .ghost{margin-left:auto;padding:7px 11px;font-size:10px}
.page-mc .head{padding:14px 18px 0;flex:none}
.eyebrow{display:flex;align-items:center;gap:10px}
.eyebrow .rn{font:800 22px/1 var(--display);text-transform:uppercase;letter-spacing:.01em}
.eyebrow .strip{gap:3px}
.eyebrow .strip i{width:8px;border-radius:2px}
.eyebrow .strip i.E{height:5px}.eyebrow .strip i.M{height:8px}.eyebrow .strip i.H{height:12px}
.eyebrow .strip i.now{box-shadow:none}
.eyebrow .pos{font:600 11px/1 var(--mono);letter-spacing:.1em;color:var(--bone-dim)}
.page-mc .main{flex:1;overflow:auto;padding:0 18px 12px}
.page-mc .foot{flex:none;padding:12px 18px 18px;background:linear-gradient(to top,var(--ink) 70%,rgba(21,14,16,0))}
.go{width:100%;min-height:64px;border:0;border-radius:13px;background:var(--heat-3);color:#fff;font:600 17px/1.15 var(--body);
  letter-spacing:.01em;padding:10px 16px}
.go.calm{background:var(--ink-2);color:var(--bone);border:1.5px solid var(--line)}
.go.armed{background:var(--bone);color:var(--ink)}
.go:disabled{opacity:.5}
.foot .row{display:flex;gap:8px;margin-top:8px}
.foot .row .ghost{flex:1;padding:12px 8px}
.subfoot{margin:9px 0 0;text-align:center;font:400 11.5px/1.4 var(--body);color:var(--bone-dim)}
.askq{font:600 31px/1.1 var(--display);letter-spacing:-.003em;margin:16px 0 0;text-wrap:pretty}
.say{display:flex;align-items:baseline;gap:9px;margin:14px 0 0;padding:10px 12px;border-radius:9px;background:var(--ink-2)}
.say span{font:600 9px/1.4 var(--mono);letter-spacing:.14em;color:var(--heat-2);flex:none}
.say p{margin:0;font:500 13.5px/1.4 var(--body)}
.meter{display:flex;align-items:center;gap:9px;margin:16px 0 0}
.meter .bars{display:flex;gap:3px;flex:1}
.meter .bar{height:5px}
.meter .n{font:600 11px/1 var(--mono);letter-spacing:.06em;color:var(--bone-dim);white-space:nowrap}
.tucked{margin-top:22px;padding:12px 0 4px;border-top:1px solid var(--line)}
.tucked .lbl{font:600 9px/1 var(--mono);letter-spacing:.14em;color:var(--bone-faint)}
.tucked .val{font:500 14px/1.3 var(--body);color:var(--bone-faint);margin:6px 0 0}
.asked{font:500 14px/1.35 var(--body);color:var(--bone-dim);margin:16px 0 0}
.answer-big{font:800 40px/.98 var(--display);text-transform:uppercase;margin:10px 0 0;letter-spacing:.004em;text-wrap:balance}
.ruling{margin:18px 0 0;padding:14px;border-radius:11px;background:var(--ink-3);border-left:4px solid var(--heat-3)}
.ruling .lbl{font:600 9.5px/1 var(--mono);letter-spacing:.14em;color:var(--heat-3)}
.ruling p{margin:9px 0 0;font:500 15px/1.42 var(--body)}
.clockwrap{text-align:center;padding:20px 0 14px;border-bottom:1px solid var(--line)}
.clockwrap .clock{font:800 76px/.86 var(--display);margin:10px 0 0;font-variant-numeric:tabular-nums}
.clockwrap .row{display:flex;gap:8px;justify-content:center;margin-top:12px}
.sect{margin:18px 0 0}
.sect h3{font:600 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--bone-dim);margin:0 0 10px;
  display:flex;align-items:center;gap:8px}
.sect h3 em{font-style:normal;color:var(--heat-2)}
.rcard{border:1px solid var(--line);border-radius:11px;padding:13px;margin-bottom:9px}
.rcard.done{opacity:.6}
.rcard .truth{font:500 11.5px/1.4 var(--mono);letter-spacing:.02em;color:var(--bone-dim);margin:0}
.rcard .truth b{color:var(--bone);font-weight:600}
.rcard .wrote{font:600 21px/1.2 var(--body);margin:8px 0 2px;overflow-wrap:anywhere}
.rcard .who{font:400 11.5px/1.4 var(--body);color:var(--bone-dim);margin:0}
.rcard .rnote{margin:10px 0 0;padding:9px 11px;border-radius:7px;background:#1E1417;border-left:3px solid var(--heat-2);
  font:400 12.5px/1.45 var(--body)}
.acts{display:flex;gap:7px;margin-top:12px;flex-wrap:wrap}
.btn{border:0;border-radius:9px;padding:13px 15px;font:600 13.5px/1 var(--body);flex:1}
.btn.yes{background:var(--heat-1);color:#14200A}
.btn.no{background:var(--ink-2);color:var(--bone);border:1px solid var(--line)}
.btn.later{background:transparent;color:var(--bone-dim);border:1px solid var(--line);flex-basis:100%;flex-grow:0}
.btn:disabled{opacity:.5}
.verdict{font:600 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.verdict.point{color:var(--heat-1)} .verdict.no-point{color:var(--heat-3)}
.mini{display:flex;justify-content:space-between;gap:10px;padding:9px 12px;border-radius:8px;background:var(--ink-2);
  margin-bottom:5px;font:500 14px/1.2 var(--body)}
.mini b{font:600 14px/1.2 var(--mono)}
.mini.first{background:var(--ink-3);box-shadow:inset 3px 0 0 var(--heat-3)}
.promote{width:100%;text-align:left;padding:15px;border-radius:12px;background:var(--ink-2);border:1.5px dashed var(--line);
  color:var(--bone);display:block}
.promote .ptitle{display:block;font:600 16px/1.2 var(--body)}
.promote .psub{display:block;margin-top:6px;font:400 12.5px/1.4 var(--body);color:var(--bone-dim)}
.plist{list-style:none;margin:0;padding:0}
.plist li{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font:500 14px/1.3 var(--body)}
.plist li span:last-child{font:500 12px/1.3 var(--mono);color:var(--bone-dim);text-transform:uppercase;letter-spacing:.06em}
.plist li.open span:last-child{color:var(--heat-2)}

/* ------------------------------------------------------------ the host laptop */
.page-host{padding:18px 16px 40px}
.app{max-width:1240px;margin:0 auto;background:var(--ink);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.app .top{position:static;align-items:center;gap:18px;padding:13px 18px;background:var(--ink-2);backdrop-filter:none}
.health{margin-left:auto;display:flex;align-items:center;gap:9px;font:500 12px/1 var(--mono);letter-spacing:.03em;color:var(--bone-dim)}
.health b{color:var(--bone);font-weight:600}
.pulse{width:8px;height:8px;border-radius:50%;background:var(--heat-1);box-shadow:0 0 0 3px color-mix(in srgb,var(--heat-1) 20%,transparent)}
.pulse.off{background:var(--heat-3)}
.cols{display:grid;grid-template-columns:270px 1fr}
@media (max-width:880px){.cols{grid-template-columns:1fr}}
.rail{border-right:1px solid var(--line);padding:16px 14px}
.rail h2,.pane h2{font:600 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--bone-dim);margin:0 0 12px}
.rnd{display:grid;grid-template-columns:1fr auto;gap:3px 8px;padding:9px 10px;border-radius:8px;margin-bottom:4px;
  border:1px solid transparent;width:100%;background:transparent;color:var(--bone);text-align:left}
.rnd:hover{border-color:var(--line)}
.rnd .nm{font:600 13.5px/1.2 var(--body)}
.rnd .st{font:500 10px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;color:var(--bone-dim);align-self:center}
.arc{display:flex;gap:2px;align-items:flex-end;grid-column:1/-1;margin-top:5px}
.arc i{display:block;width:9px;border-radius:2px;background:var(--line)}
.arc i.E{height:5px;background:var(--heat-1)} .arc i.M{height:8px;background:var(--heat-2)} .arc i.H{height:12px;background:var(--heat-3)}
.rnd.done{opacity:.55}
.rnd.open{background:var(--ink-3);border-color:var(--heat-2)}
.rnd.open .st{color:var(--heat-2)}
.rnd.sel{box-shadow:inset 3px 0 0 var(--bone)}
.gapline{font:500 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--bone-faint);padding:2px 10px 8px}
.warn{margin-top:14px;padding:10px 11px;border-radius:8px;background:var(--ink-2);border-left:3px solid var(--heat-2)}
.warn p{margin:0 0 6px;font:400 11.5px/1.45 var(--body);color:var(--bone-dim)}
.warn b{color:var(--bone);font-weight:600;display:block;font-size:11px;font-family:var(--mono);letter-spacing:.1em;
  text-transform:uppercase;margin-bottom:6px}
.pane{padding:16px 18px 22px;min-width:0}
.pane-top{display:flex;align-items:baseline;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.pane-top h1{font:800 26px/.95 var(--display);text-transform:uppercase;margin:0}
.tally{font:500 12px/1 var(--mono);color:var(--bone-dim);margin-left:auto}
.tally b{color:var(--heat-1);font-weight:600}
.panel{border:1px solid var(--line);border-radius:10px;margin-bottom:14px;overflow:hidden}
.panel>h2{margin:0;padding:11px 13px;background:var(--ink-2);border-bottom:1px solid var(--line)}
.panel .in{padding:13px}
.now{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.now .what{font:600 12px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--bone-dim)}
.now .what b{color:var(--bone)}
.now .btns{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.primary{background:var(--heat-3);color:#fff;border:0;border-radius:8px;padding:12px 18px;font:600 13.5px/1 var(--body)}
.primary.armed{background:var(--bone);color:var(--ink)}
.primary:disabled{opacity:.5}
.primary:focus-visible{outline:2px solid var(--bone);outline-offset:2px}
.item{border:1px solid var(--line);border-radius:10px;margin-bottom:10px;overflow:hidden}
.item-top{display:flex;align-items:center;gap:10px;padding:9px 13px;background:var(--ink-2);border-bottom:1px solid var(--line);flex-wrap:wrap}
.tag{font:600 10px/1 var(--mono);letter-spacing:.1em;color:var(--bone-dim)}
.item .truth{font:500 12.5px/1.3 var(--body);color:var(--bone-dim)}
.item .truth b{color:var(--bone);font-weight:600}
.item .teams{margin-left:auto;font:500 10.5px/1 var(--mono);letter-spacing:.06em;color:var(--bone-dim)}
.item-body{padding:13px}
.item .wrote{font:600 22px/1.2 var(--body);margin:0 0 4px;overflow-wrap:anywhere}
.item .who{font:400 11.5px/1.4 var(--body);color:var(--bone-dim);margin:0 0 11px}
.item .note{display:flex;gap:9px;padding:9px 11px;border-radius:7px;background:#1E1417;border-left:3px solid var(--heat-2);margin:0 0 13px}
.item .note span{font:600 9.5px/1.5 var(--mono);letter-spacing:.12em;color:var(--heat-2);flex:none}
.item .note p{margin:0;font:400 12.5px/1.45 var(--body)}
.item .acts{margin-top:0}
.item .btn{flex:none;padding:11px 18px}
.settled{display:flex;align-items:center;gap:10px;padding:12px 13px;flex-wrap:wrap}
.settled .ghost{margin-left:auto}
.grid{overflow:auto;max-height:70vh}
.grid table{border-collapse:separate;border-spacing:0;font:500 12.5px/1.25 var(--body);min-width:100%}
.grid th,.grid td{padding:7px 9px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.grid thead th{position:sticky;top:0;background:var(--ink-2);font:600 10px/1.2 var(--mono);letter-spacing:.08em;color:var(--bone-dim);z-index:1}
.grid thead th small{display:block;font:500 11px/1.3 var(--body);letter-spacing:0;color:var(--bone);text-transform:none;max-width:130px}
.grid tbody th{font:600 12.5px/1.25 var(--body);white-space:nowrap;position:sticky;left:0;background:var(--ink)}
.cell{display:block;width:100%;min-width:78px;text-align:left;background:var(--ink-2);border:1px solid var(--line);border-radius:6px;
  color:var(--bone);padding:6px 7px;font:500 12px/1.25 var(--body)}
.cell.correct{border-color:color-mix(in srgb,var(--heat-1) 60%,var(--line))}
.cell.wrong{color:var(--bone-dim)}
.cell.review{border-color:var(--heat-2);border-style:dashed}
.cell.mc{box-shadow:inset 3px 0 0 var(--bone)}
.cell i{display:block;font:600 9.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;margin-top:4px;font-style:normal}
.cell.correct i{color:var(--heat-1)} .cell.wrong i{color:var(--heat-3)} .cell.review i{color:var(--heat-2)}
.imp textarea{width:100%;min-height:180px;background:var(--ink-2);color:var(--bone);border:1px solid var(--line);border-radius:8px;
  padding:10px;font:500 12px/1.45 var(--mono);resize:vertical}
.imp .opts{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin:12px 0}
.imp label{font:600 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--bone-dim);display:flex;align-items:center;gap:8px}
.imp input[type=date],.imp input[type=number]{background:var(--ink-2);color:var(--bone);border:1px solid var(--line);border-radius:6px;padding:7px 8px;font:500 13px/1 var(--mono)}
.imp input[type=number]{width:64px}
.imp input[type=file]{color:var(--bone-dim);font:500 12px/1 var(--body)}
.links{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
.links figure{margin:0;text-align:center}
.links .qr{width:150px;height:150px;margin:0 auto;border-radius:8px;padding:8px}
.links figcaption{font:600 11px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--bone-dim);margin-top:8px}
.muted{font:400 12.5px/1.45 var(--body);color:var(--bone-dim);margin:0}
.tteams{width:100%;border-collapse:collapse;font:500 13px/1.3 var(--body)}
.tteams td{padding:7px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
.tteams td.nm{font-weight:600} .tteams td.rt{text-align:right} .tteams .pulse{display:inline-block}
.tteams .ghost{padding:6px 9px;font-size:10px}
details.panel>summary{display:flex;align-items:center;gap:9px;padding:11px 13px;background:var(--ink-2);cursor:pointer;list-style:none}
details.panel>summary::-webkit-details-marker{display:none}
details.panel>summary::before{content:'\25B8';color:var(--bone-dim);font-size:12px}
details.panel[open]>summary::before{content:'\25BE'}
details.panel>summary h2{margin:0}
details.panel[open]>summary{border-bottom:1px solid var(--line)}
.lock{max-width:520px;margin:12vh auto 0;padding:0 22px;text-align:center}
.lock p{font:400 15px/1.5 var(--body);color:var(--bone-dim)}