/* Alerta em 5 — sala de situação: fundo tinta-azul, uma decisão por tela, cores fortes por alternativa. Tema escuro único, por escolha. */
*{box-sizing:border-box}
:root{
  --ink:#101d27; --panel:#172a37; --panel-2:#1f3646; --line:#2e4a5d;
  --fg:#e7eff3; --muted:#93abb9;
  --amber:#f0a83a; --amber-soft:rgba(240,168,58,.16);
  --teal:#3fc3a6; --teal-soft:rgba(63,195,166,.15);
  --red:#ea6450; --red-soft:rgba(234,100,80,.18);
  --c0:#e8a33a; --c1:#3fb8a0; --c2:#e26a55; --c3:#9b86e8; --c4:#5aa6e8; --c5:#d97bb0;
  --f-display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --f-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:dark;
}
html{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);background:var(--ink)}
body{margin:0;background:var(--ink);color:var(--fg);font-family:var(--f-body);font-size:16px;line-height:1.5;padding-inline:16px;padding-block:16px 48px}
[hidden]{display:none!important}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.wrap{max-width:640px;margin:0 auto;display:grid;gap:16px}
body.host .wrap{max-width:1400px}
p{margin:0;max-width:68ch}
.eyebrow{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--amber)}
.muted{color:var(--muted)}
.note{font-family:var(--f-mono);font-size:12px;color:var(--muted)}
h1,h2,h3{font-family:var(--f-display);font-weight:800;text-transform:uppercase;letter-spacing:.02em;line-height:1;margin:0;text-wrap:balance}
h1{font-size:clamp(52px,12vw,104px)}
h1 span{color:var(--amber)}
h2{font-size:clamp(30px,5vw,44px)}
h3{font-size:22px}
.ok-t{color:var(--teal)} .bad-t{color:var(--red)} .amb-t{color:var(--amber)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.stack{display:grid;gap:12px;min-width:0}

/* botões */
.btn{background:var(--amber);color:var(--ink);border:0;border-radius:8px;padding:14px 24px;font-weight:600;cursor:pointer;font-size:17px;justify-self:start}
.btn:hover{filter:brightness(1.08)}
.btn:disabled{opacity:.4;cursor:not-allowed;filter:none}
.btn.ghost{background:transparent;color:var(--fg);border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--amber)}
.btn.big{font-size:20px;padding:16px 30px}
.btn.wide{justify-self:stretch;width:100%}
.choices{display:flex;gap:8px;flex-wrap:wrap}
.choice{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:10px 16px;cursor:pointer}
.choice[aria-pressed="true"]{border-color:var(--amber);background:var(--amber-soft)}
.langs{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.langs button{background:transparent;border:0;padding:5px 10px;font-family:var(--f-mono);font-size:12px;color:var(--muted);cursor:pointer}
.langs button[aria-pressed="true"]{background:var(--panel-2);color:var(--fg)}

/* formulário */
.field{display:grid;gap:6px}
.field span{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.field input{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:14px 16px;color:var(--fg);font:inherit;font-size:20px;width:100%}
.field input:focus{outline:2px solid var(--amber);outline-offset:1px}
#fCode{font-family:var(--f-mono);letter-spacing:.35em;text-transform:uppercase;max-width:220px}
.err{color:var(--red)}
a{color:var(--amber)}

/* cartões */
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px;display:grid;gap:10px;min-width:0}
.ctx{color:var(--muted);font-size:16px}
.qtext{font-size:22px;font-weight:600;line-height:1.3}
.topline{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.timer{font-family:var(--f-display);font-weight:800;font-size:40px;line-height:1;color:var(--amber);font-variant-numeric:tabular-nums}
.timer.low{color:var(--red)}
.tbar{height:6px;border-radius:3px;background:var(--panel-2);overflow:hidden}
.tbar i{display:block;height:100%;background:var(--amber)}

/* alternativas */
.opts{display:grid;gap:10px}
.opt{display:flex;gap:12px;align-items:flex-start;text-align:left;background:var(--panel-2);border:1px solid var(--line);border-left:6px solid var(--oc,var(--line));border-radius:10px;padding:14px 16px;cursor:pointer;font-size:17px;line-height:1.35}
.opt .sh{font-size:15px;color:var(--oc);flex:none;width:22px;text-align:center;margin-top:1px}
.opt:hover:not(:disabled){background:#264256}
.opt[aria-pressed="true"]{background:color-mix(in srgb,var(--oc) 22%,var(--panel-2));border-color:var(--oc)}
.opt:disabled{cursor:default;opacity:.55}
.c0{--oc:var(--c0)}.c1{--oc:var(--c1)}.c2{--oc:var(--c2)}.c3{--oc:var(--c3)}.c4{--oc:var(--c4)}.c5{--oc:var(--c5)}
.cls{display:grid;gap:12px}
.cls-item{background:var(--panel-2);border:1px solid var(--line);border-left:6px solid var(--oc);border-radius:10px;padding:12px 14px;display:grid;gap:10px}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{flex:1 1 30%;min-width:96px;background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:9px 8px;font-size:14px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--amber);color:var(--ink);border-color:var(--amber);font-weight:600}
.seg button:disabled{cursor:default}

/* retorno */
.fb{border-radius:10px;padding:16px;display:grid;gap:10px;border:1px solid}
.fb.full{background:var(--teal-soft);border-color:var(--teal)}
.fb.part{background:var(--amber-soft);border-color:var(--amber)}
.fb.zero,.fb.none{background:var(--red-soft);border-color:var(--red)}
.fb .v{font-family:var(--f-display);font-weight:800;font-size:30px;text-transform:uppercase;letter-spacing:.02em;line-height:1}
.pts{font-family:var(--f-mono);font-size:15px}
.mini{display:grid;gap:4px;margin:0;padding:0;list-style:none;font-size:14px}
.mini li{display:flex;gap:8px}
.mini b{flex:none}
.wait{background:var(--panel);border:1px dashed var(--line);border-radius:10px;padding:22px;text-align:center;color:var(--muted)}
.unit{font-size:14px;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.unit b{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);background:var(--amber);border-radius:3px;padding:2px 6px}
.big-num{font-family:var(--f-display);font-weight:800;font-size:56px;line-height:1;font-variant-numeric:tabular-nums}
.band{border-radius:12px;padding:20px;display:grid;gap:10px;border:1px solid}
.band.bad{background:var(--red-soft);border-color:var(--red)} .band.amb{background:var(--amber-soft);border-color:var(--amber)} .band.ok{background:var(--teal-soft);border-color:var(--teal)}
.band.bad h2{color:var(--red)} .band.amb h2{color:var(--amber)} .band.ok h2{color:var(--teal)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.stat{background:var(--panel);border-radius:8px;padding:10px 12px}
.stat label{display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.stat output{font-family:var(--f-display);font-weight:800;font-size:30px;font-variant-numeric:tabular-nums}
.netbar{position:fixed;left:0;right:0;bottom:0;z-index:9;background:var(--red);color:var(--ink);text-align:center;padding:8px 16px calc(8px + env(safe-area-inset-bottom,0px));font-weight:600;font-size:14px}

/* ---- telão ---- */
.hbar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding-bottom:12px;border-bottom:1px solid var(--line)}
.logo{font-family:var(--f-display);font-weight:800;font-size:28px;letter-spacing:.06em;text-transform:uppercase}
.logo span{color:var(--amber)}
.codebig{font-family:var(--f-mono);font-size:26px;letter-spacing:.2em;color:var(--amber)}
.lobby{display:grid;gap:28px;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.lobby{grid-template-columns:minmax(0,440px) minmax(0,1fr)}}
.lobby>.stack{align-content:start}
.joinbox{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:24px;display:grid;gap:12px;justify-items:center;text-align:center}
.joinline{font-size:21px}
.joinline b{font-family:var(--f-mono);overflow-wrap:anywhere}
.codehuge{font-family:var(--f-mono);font-size:clamp(60px,8vw,104px);letter-spacing:.2em;color:var(--amber);line-height:1}
.qr{background:#fff;padding:12px;border-radius:8px;line-height:0}
.qr svg{display:block}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.pchip{background:var(--panel-2);border:1px solid var(--line);border-radius:18px;padding:6px 8px 6px 14px;font-size:17px;display:inline-flex;align-items:center;gap:6px}
.kick{background:transparent;border:0;color:var(--muted);cursor:pointer;font-size:17px;line-height:1;padding:2px 6px;border-radius:4px}
.kick:hover{color:var(--red);background:var(--red-soft)}
.hq{display:grid;gap:20px;grid-template-columns:minmax(0,1fr)}
@media (min-width:1100px){.hq.split{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:start}}
.hq .qtext{font-size:clamp(28px,3vw,40px)}
.hq .ctx{font-size:20px}
.hopts{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.hopt{display:flex;gap:14px;align-items:flex-start;background:var(--panel);border:1px solid var(--line);border-left:8px solid var(--oc);border-radius:10px;padding:16px 18px;font-size:21px;line-height:1.3}
.hopt .sh{color:var(--oc);font-size:19px;flex:none;width:24px;text-align:center}
.cats{display:flex;gap:8px;flex-wrap:wrap}
.cat{font-family:var(--f-mono);font-size:14px;border:1px solid var(--line);border-radius:14px;padding:4px 12px;color:var(--muted)}
.dist{display:grid;gap:6px}
.dl{display:flex;justify-content:space-between;gap:12px;font-size:19px;align-items:baseline}
.dl b{font-family:var(--f-mono);white-space:nowrap;font-size:17px}
.dl .mk{font-family:var(--f-mono);font-size:13px;letter-spacing:.06em;text-transform:uppercase;margin-right:6px}
.dbar{height:16px;background:var(--panel-2);border-radius:8px;overflow:hidden}
.dbar i{display:block;height:100%;border-radius:8px;background:var(--muted)}
.dist.good .dbar i{background:var(--teal)} .dist.bad .dbar i{background:var(--red)} .dist.neutral .dbar i{background:#5d7688}
.dist.good .dl span{color:var(--teal);font-weight:600}
.clsrev{display:grid;gap:14px}
.clsrev .item{display:grid;gap:8px;padding:12px;border-radius:10px;background:var(--panel);border-left:6px solid var(--oc)}
.talk{background:var(--panel);border:1px solid var(--amber);border-radius:12px;padding:18px;display:grid;gap:10px}
.talk ul{margin:0;padding-left:22px;display:grid;gap:8px;font-size:19px}
.rank{width:100%;border-collapse:collapse;font-size:20px}
.rank td{padding:10px 8px;border-bottom:1px solid var(--line)}
.rank td.pos{font-family:var(--f-display);font-weight:800;font-size:28px;width:52px;color:var(--muted)}
.rank tr:nth-child(-n+3) td.pos{color:var(--amber)}
.rank td.num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--f-mono)}
.rank .gain{color:var(--teal);font-size:15px}
.bandcols{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.bandcol{border-radius:12px;padding:18px;display:grid;gap:8px;align-content:start;border:1px solid}
.bandcol.bad{background:var(--red-soft);border-color:var(--red)} .bandcol.amb{background:var(--amber-soft);border-color:var(--amber)} .bandcol.ok{background:var(--teal-soft);border-color:var(--teal)}
.bandcol h3{font-size:26px}
.bandcol.bad h3{color:var(--red)} .bandcol.amb h3{color:var(--amber)} .bandcol.ok h3{color:var(--teal)}
.bandcol .n{font-family:var(--f-display);font-weight:800;font-size:64px;line-height:1}
.bandcol .names{font-size:15px;color:var(--fg);opacity:.85}
.podium{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.pod{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px;display:grid;gap:4px}
.pod.p1{border-color:var(--amber);background:var(--amber-soft)}
.pod .pn{font-family:var(--f-display);font-weight:800;font-size:48px;line-height:1;color:var(--amber)}
.pod b{font-size:24px;overflow-wrap:anywhere}
@media (prefers-reduced-motion:no-preference){.enter{animation:rise .3s ease-out both}}
@keyframes rise{from{opacity:.001;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---- surto ao vivo ---- */
.live{background:var(--panel);border:1px solid var(--red);border-radius:10px;padding:12px 14px;display:grid;gap:6px}
.live.hid{border-color:var(--line);border-style:dashed}
.live-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.live-n{font-family:var(--f-display);font-weight:800;font-size:40px;line-height:1;font-variant-numeric:tabular-nums;color:var(--red)}
.live.hid .live-n{color:var(--muted)}
.live-n small{font-size:18px;color:var(--fg);font-family:var(--f-body);font-weight:500}
.live-c svg{display:block;width:100%;height:90px}
.live svg{display:block;width:100%}
.gclock{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;background:var(--red-soft);border:1px solid var(--red);border-radius:10px;padding:12px 16px;font-size:19px}
.gclock b{font-family:var(--f-display);font-weight:800;font-size:30px;color:var(--red);font-variant-numeric:tabular-nums}
.rank td.cases{font-size:17px}
.rank td.cases small{color:var(--muted);font-family:var(--f-body)}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:15px;color:var(--muted)}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.card svg{display:block;width:100%;height:auto}
.card svg.racesvg{max-height:460px;margin:0 auto}