:root{
  --bg:#0A0A0F; --panel:#13131B; --panel-2:#1A1A24; --line:#2A2A3A; --line-2:#3A3A4E; --text:#F5F5F7; --muted:#8E8EA3; --dim:#5C5C72;
  --red:#FF3B5C; --red-d:#8F1F33; --blue:#2F7BFF; --blue-d:#173E8A; --yellow:#F5C400; --orange:#FF6A00; --green:#2EE6A6;
  --disp:"Anton","Impact","Arial Narrow",sans-serif; --hud:"Teko","Barlow Condensed",sans-serif; --body:"Barlow","Segoe UI",system-ui,sans-serif;
  --cut:12px; --ease:cubic-bezier(.2,.8,.2,1); --snap:cubic-bezier(.2,1.5,.4,1);
}
*{box-sizing:border-box}
html{color-scheme:dark}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:var(--body);font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased;overflow-x:clip}
body:before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(60% 45% at 50% 0%,rgba(245,196,0,.07),transparent 70%),repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 4px)}
canvas{image-rendering:pixelated;image-rendering:crisp-edges}
#fx{position:fixed;inset:0;width:100%;height:100%;z-index:60;pointer-events:none;image-rendering:auto}
#app{position:relative;z-index:1}
#app.shake{animation:shake .42s var(--ease)}
@keyframes shake{10%{transform:translate(-7px,2px)}30%{transform:translate(6px,-3px)}50%{transform:translate(-4px,2px)}70%{transform:translate(3px,-1px)}90%{transform:translate(-1px,1px)}}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
.wrap{width:min(1180px,100%);margin-inline:auto;padding-inline:18px}
h1,h2,h3{font-family:var(--disp);font-weight:400;margin:0;line-height:.95;text-transform:uppercase;letter-spacing:.01em}
h2{font-size:34px;margin-bottom:12px}
h3{font-size:20px;margin-bottom:8px;color:var(--text)}
p{margin:0 0 12px}
.muted{color:var(--muted)}.dim{color:var(--dim)}
.hud{font-family:var(--hud);font-weight:600;letter-spacing:.02em}
.num{font-family:var(--hud);font-variant-numeric:tabular-nums}
.label{font-family:var(--hud);font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* ---------- panels: cut corners, no radius anywhere ---------- */
.plate{position:relative;background:var(--panel);border:1px solid var(--line);clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));padding:18px}
.plate.dark{background:var(--panel-2)}
.plate.flat{border-color:transparent;background:transparent;clip-path:none;padding:0}
.skew{transform:skewX(-12deg)}.unskew{transform:skewX(12deg);display:inline-block}
.tag{display:inline-block;font-family:var(--hud);font-size:14px;letter-spacing:.1em;text-transform:uppercase;padding:2px 9px 1px;background:var(--line);color:var(--text);transform:skewX(-12deg)}
.tag>span{display:inline-block;transform:skewX(12deg)}
.tag.red{background:var(--red);color:#fff}.tag.blue{background:var(--blue);color:#fff}.tag.yellow{background:var(--yellow);color:#0A0A0F}.tag.orange{background:var(--orange);color:#0A0A0F}.tag.green{background:var(--green);color:#0A0A0F}.tag.dim{background:var(--panel-2);color:var(--muted)}

/* ---------- buttons: skewed plates ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 22px;background:var(--panel-2);border:1px solid var(--line-2);color:var(--text);font-family:var(--disp);font-size:18px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transform:skewX(-12deg);transition:transform .16s var(--snap),background .16s,border-color .16s;white-space:nowrap;user-select:none}
.btn>span{display:inline-block;transform:skewX(12deg)}
.btn:hover{transform:skewX(-12deg) translateY(-2px);border-color:var(--text)}
.btn:active{transform:skewX(-12deg) scale(.96)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:skewX(-12deg)}
.btn.red{background:var(--red);border-color:var(--red);color:#fff}
.btn.blue{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.yellow{background:var(--yellow);border-color:var(--yellow);color:#0A0A0F}
.btn.green{background:var(--green);border-color:var(--green);color:#0A0A0F}
.btn.ghost{background:transparent}
.btn.big{font-size:24px;padding:16px 30px}
.btn.sm{font-size:15px;padding:8px 14px}
.btn.wide{width:100%}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-family:var(--hud);font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
input[type=text],textarea,select{padding:12px 14px;border:1px solid var(--line-2);background:#0E0E15;color:var(--text);min-width:0;outline:none;font-size:16px}
input[type=text]:focus,textarea:focus,select:focus{border-color:var(--yellow)}
input::placeholder,textarea::placeholder{color:var(--dim)}
select option{background:#13131B}
input[type=range]{width:100%;accent-color:var(--yellow);height:34px}
.seg{display:flex;gap:0;flex-wrap:wrap}
.seg button{padding:8px 14px;border:1px solid var(--line-2);border-right-width:0;background:var(--panel-2);font-family:var(--hud);font-size:16px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;color:var(--muted)}
.seg button:last-child{border-right-width:1px}
.seg button.on{background:var(--text);color:var(--bg);border-color:var(--text)}

/* ---------- top bar ---------- */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;height:68px}
.wordmark{display:block;height:30px;width:auto}
.top nav{display:flex;align-items:center;gap:22px}
.top nav a{font-family:var(--hud);font-size:19px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:6px 0;border-bottom:2px solid transparent}
.top nav a.on,.top nav a:hover{color:var(--text);border-color:var(--yellow)}
.top nav .online{font-family:var(--hud);font-size:19px;letter-spacing:.08em;color:var(--green)}

/* ---------- home ---------- */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:26px;align-items:center;padding-block:26px 34px}
.hero h1{font-size:clamp(46px,6.2vw,84px);line-height:.9}
.hero h1 .k{color:var(--yellow)}
.hero .sub{font-size:19px;color:var(--muted);margin:18px 0 22px;max-width:44ch}
.modes{display:flex;gap:12px;flex-wrap:wrap}
.join{display:flex;gap:8px;margin-top:14px;align-items:center}
.join input{width:150px;font-family:var(--hud);font-size:22px;letter-spacing:.2em;text-transform:uppercase;padding:9px 12px}
.stage-plate{position:relative;overflow:hidden;padding:16px 16px 10px}
.stage-plate:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,59,92,.16) 0 49%,transparent 49% 51%,rgba(47,123,255,.16) 51% 100%);pointer-events:none}
.stage-plate .floor{position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(180deg,transparent,rgba(0,0,0,.55));pointer-events:none}
.stage{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:6px;z-index:1}
.stage .who{display:flex;flex-direction:column;align-items:center;gap:6px}
.stage .who .nm{font-family:var(--disp);font-size:22px;letter-spacing:.04em;text-transform:uppercase}
.stage .vs{font-family:var(--disp);font-size:56px;color:var(--yellow);padding-bottom:60px;transform:skewX(-12deg);text-shadow:4px 4px 0 #0A0A0F,6px 6px 0 var(--line-2)}
.bubble{position:relative;display:inline-block;background:var(--text);color:var(--bg);padding:8px 12px;font-family:var(--hud);font-size:19px;letter-spacing:.02em;max-width:220px;min-height:38px;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.home-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}

/* ---------- HP HUD ---------- */
.hpbar{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center}
.hpbar.right{grid-template-columns:1fr auto;direction:rtl}
.hpbar .nm{font-family:var(--disp);font-size:20px;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;max-width:160px;overflow:hidden;text-overflow:ellipsis;direction:ltr}
.hpbar .track{position:relative;height:22px;background:#0E0E15;border:1px solid var(--line-2);transform:skewX(-12deg);overflow:hidden;direction:ltr}
.hpbar .ghost{position:absolute;inset:0;width:100%;background:var(--yellow);transition:width 1.1s .35s var(--ease)}
.hpbar .fill{position:absolute;inset:0;width:100%;transition:width .35s var(--ease)}
.hpbar.red .fill{background:linear-gradient(180deg,#FF6F88,var(--red) 55%,var(--red-d))}
.hpbar.blue .fill{background:linear-gradient(180deg,#7FB0FF,var(--blue) 55%,var(--blue-d))}
.hpbar .fill.low{animation:lowhp .7s infinite}
@keyframes lowhp{50%{filter:brightness(1.6) saturate(1.4)}}
.hpbar .val{font-family:var(--hud);font-size:22px;font-weight:600;min-width:34px;text-align:center;direction:ltr}
.hudbar{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center;padding:12px 16px;background:var(--panel);border:1px solid var(--line);clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut))}
.hudmid{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:150px}
.timer{font-family:var(--hud);font-size:58px;font-weight:600;line-height:.85;color:var(--text)}
.timer.urgent{color:var(--orange);animation:lowhp .5s infinite}
.tbar{width:120px;height:4px;background:var(--line);overflow:hidden}
.tbar i{display:block;height:100%;background:var(--yellow);transition:width .25s linear}
.phase{font-family:var(--hud);font-size:16px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.dots{display:flex;gap:6px;justify-content:center}
.dots i{width:10px;height:10px;background:var(--line-2);transform:rotate(45deg)}
.dots i.win{background:var(--yellow);box-shadow:0 0 8px var(--yellow)}
.dots i.even{background:var(--muted)}

/* ---------- room ---------- */
.roomhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-block:10px 10px;flex-wrap:wrap}
.roomhead .code{font-family:var(--hud);font-size:24px;letter-spacing:.24em;color:var(--yellow)}
.roomhead .topic{font-family:var(--disp);font-size:clamp(18px,2.4vw,26px);text-transform:uppercase;letter-spacing:.02em;text-align:center;flex:1}
.ring{position:relative;margin-top:10px;padding:14px 16px 8px;overflow:hidden}
.ring:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,59,92,.12) 0 49%,transparent 49% 51%,rgba(47,123,255,.12) 51% 100%);pointer-events:none}
.ring .floor{position:absolute;left:0;right:0;bottom:0;height:30%;background:linear-gradient(180deg,transparent,rgba(0,0,0,.55));pointer-events:none}
.ring .stage{align-items:end}
.corner{display:flex;flex-direction:column;align-items:center;gap:4px;position:relative;z-index:1}
.corner .side{font-family:var(--hud);font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.corner .live{min-height:20px;font-size:14px;color:var(--muted);font-style:italic;max-width:210px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.center{position:relative;z-index:1;align-self:center;display:flex;flex-direction:column;gap:10px;min-width:0;align-items:center}
.qplate{background:var(--text);color:var(--bg);padding:10px 16px;transform:skewX(-12deg);max-width:420px;text-align:center}
.qplate>div{transform:skewX(12deg)}
.qplate .rl{font-family:var(--hud);font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:#5C5C72}
.qplate .q{font-family:var(--disp);font-size:17px;line-height:1.1;text-transform:uppercase}
.read{width:100%;max-width:520px;text-align:center;font-family:var(--hud);font-size:18px;letter-spacing:.04em;color:var(--muted);min-height:24px}
.read b{color:var(--text)}.read .r{color:var(--red)}.read .b{color:var(--blue)}
.crowdrow{display:flex;justify-content:center;margin-top:4px;position:relative;z-index:1;overflow-x:auto}
.kowatch{position:absolute;top:10px;left:50%;transform:translateX(-50%) skewX(-12deg);z-index:2;padding:4px 14px;background:var(--orange);color:var(--bg);font-family:var(--disp);font-size:16px;letter-spacing:.1em}
.grid2{display:grid;grid-template-columns:1.3fr .7fr;gap:14px;margin-top:14px;align-items:start}
.feed{display:flex;flex-direction:column;gap:12px;padding:2px;margin-top:12px}
.turn{border:1px solid var(--line);background:var(--panel);animation:slidein .3s var(--ease)}
.turn.red{border-left:4px solid var(--red)}.turn.blue{border-left:4px solid var(--blue)}
@keyframes slidein{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
.turn .head{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.turn .head .n{font-family:var(--hud);font-size:16px;color:var(--dim)}
.turn .head .who{font-family:var(--disp);font-size:16px;letter-spacing:.04em;text-transform:uppercase}
.turn.red .head .who{color:var(--red)}.turn.blue .head .who{color:var(--blue)}
.turn .head .ph{font-family:var(--hud);font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.turn .head .dmg{margin-left:auto;font-family:var(--hud);font-size:24px;font-weight:600;line-height:1}
.turn .head .dmg.hit{color:var(--yellow)}.turn .head .dmg.self{color:var(--orange)}.turn .head .dmg.none{color:var(--dim)}
.turn .text{padding:10px 12px;font-size:16px}
.turn .chips{display:flex;gap:6px;flex-wrap:wrap;padding:0 12px 10px}
.chip{font-family:var(--hud);font-size:13px;letter-spacing:.1em;text-transform:uppercase;padding:1px 7px;border:1px solid var(--line-2);color:var(--muted)}
.chip.on_target{border-color:var(--yellow);color:var(--yellow)}.chip.wording{border-color:var(--green);color:var(--green)}.chip.receipts{border-color:var(--green);color:var(--green)}.chip.dodge,.chip.gate,.chip.pasted{border-color:var(--orange);color:var(--orange)}.chip.disputed{text-decoration:line-through;opacity:.5}
.chip button{border:0;background:transparent;padding:0 0 0 4px;cursor:pointer;color:inherit;font-size:12px}
.an{border-top:1px solid var(--line);background:var(--panel-2);padding:10px 12px;display:grid;gap:8px}
.an .call{font-family:var(--disp);font-size:19px;line-height:1.05;text-transform:uppercase;letter-spacing:.01em}
.an .call.pending{color:var(--dim);animation:lowhp 1.2s infinite}
.an .grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px}
.an .k{font-family:var(--hud);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.an .v{font-size:14.5px;line-height:1.4}
.an .v.bad{color:#FFB199}.an .v.good{color:#9AF2CE}
.an ul{margin:0;padding-left:16px;font-size:14px;line-height:1.4}
.an .basic{font-family:var(--hud);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.controls>*{margin-bottom:12px}
.controls .plate{display:flex;flex-direction:column;gap:12px}
.rolebar{display:flex;gap:8px;flex-wrap:wrap}
.mic{width:100%}
.mic.on{background:var(--red);border-color:var(--red);color:#fff;animation:lowhp .9s infinite}
.cardscale{display:grid;grid-template-columns:repeat(10,1fr);gap:3px}
.cardscale button{padding:11px 0;border:1px solid var(--line-2);background:#0E0E15;font-family:var(--hud);font-size:20px;cursor:pointer;color:var(--text)}
.cardscale button.no{background:rgba(255,59,92,.18)}.cardscale button.yes{background:rgba(47,123,255,.2)}.cardscale button.sel{background:var(--text);color:var(--bg)}
.players{display:flex;flex-direction:column;gap:6px}
.players .p{display:flex;align-items:center;gap:8px;font-family:var(--hud);font-size:18px;letter-spacing:.03em}
.players .p .st{margin-left:auto;font-size:14px;color:var(--muted)}
.topics{display:grid;gap:8px}
.topics .t{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;border:1px solid var(--line);padding:10px 12px;background:var(--panel-2)}
.topics .t .q{font-family:var(--disp);font-size:16px;text-transform:uppercase}
.topics .t .sp{font-family:var(--hud);font-size:16px;color:var(--muted)}
.strip{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;font-family:var(--hud);font-size:18px;margin-bottom:8px}
.strip .l{text-align:right;color:var(--red)}.strip .r{text-align:left;color:var(--blue)}.strip .m{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* ---------- the exchange: their answer and yours, always on screen ---------- */
.exchange{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.ex{background:var(--panel);border:1px solid var(--line-2);border-left:4px solid var(--line-2);padding:12px 14px;min-height:96px}
.ex.red{border-left-color:var(--red)}.ex.blue{border-left-color:var(--blue)}
.ex .h{display:flex;align-items:center;gap:8px;font-family:var(--hud);font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.ex .h b{color:var(--text);font-weight:600}.ex.red .h b{color:var(--red)}.ex.blue .h b{color:var(--blue)}
.ex .h .dmg{margin-left:auto}
.ex .t{font-size:18px;line-height:1.35;color:var(--text)}
.ex .t.wait{color:var(--dim);font-style:italic}
.ex .moves{margin-top:6px}
.ex .call{font-family:var(--disp);font-size:16px;text-transform:uppercase;letter-spacing:.03em;color:var(--yellow);margin-top:6px}

/* ---------- the round read card ---------- */
.turn.round{border-left:4px solid var(--yellow);background:var(--panel)}
.turn.round .who.r{color:var(--red)}.turn.round .who.b{color:var(--blue)}
.turn.round .text{font-family:var(--disp);font-size:20px;text-transform:uppercase;letter-spacing:.02em;line-height:1.15}

/* ---------- the move list on a turn card ---------- */
.moves{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px}
.moves .mv{font-family:var(--hud);font-size:15px;letter-spacing:.1em;text-transform:uppercase;padding:2px 9px;border:1px solid var(--line-2);color:var(--text);background:var(--panel-2)}
.moves .mv.hit{border-color:var(--yellow);color:var(--yellow)}
.moves .mv.self{border-color:var(--red);color:var(--red)}
.moves .mv.mult{background:var(--yellow);color:var(--bg);border-color:var(--yellow)}
.moves .mv.mult.bad{background:var(--orange);border-color:var(--orange)}
.moves .eq{font-family:var(--disp);font-size:22px;color:var(--yellow);margin-left:4px}
.moves .eq.self{color:var(--red)}
.howto{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.howto span{font-family:var(--hud);font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:1px 8px;border:1px solid var(--line)}
.howto span b{color:var(--yellow);font-weight:500}
.sfxbtn{font-family:var(--hud);font-size:15px;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border:1px solid var(--line-2);background:var(--panel-2);color:var(--muted);cursor:pointer}
.sfxbtn.on{color:var(--text);border-color:var(--yellow)}

/* ---------- positions, command bar, tale of the tape ---------- */
.pos{font-family:var(--disp);font-size:22px;letter-spacing:.06em;text-transform:uppercase;padding:2px 14px;transform:skewX(-12deg);background:var(--line-2);color:var(--text);min-width:64px;text-align:center}
.pos.yes{background:var(--yellow);color:var(--bg)}.pos.no{background:var(--text);color:var(--bg)}
.pos{font-style:normal}
.cmd{margin-top:12px;background:var(--panel);border:1px solid var(--line-2);border-left:4px solid var(--yellow);display:grid;grid-template-columns:260px 1fr;gap:16px;padding:14px 16px;align-items:center}
.cmd .now{font-family:var(--disp);font-size:22px;line-height:1;text-transform:uppercase;letter-spacing:.02em}
.cmd .now b{color:var(--yellow)}
.cmd .hint{font-size:14px;color:var(--muted);margin-top:4px;line-height:1.35}
.cmd.mine{border-left-color:var(--yellow);box-shadow:0 0 0 1px rgba(245,196,0,.25),0 18px 40px -24px rgba(245,196,0,.5)}
.cmd.theirs{border-left-color:var(--line-2)}
.inputrow{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:stretch}
.inputrow textarea{resize:none;font-size:17px;line-height:1.3;padding:10px 12px}
.inputrow .btn{height:100%}
.judgerow{display:grid;grid-template-columns:auto 1fr auto auto auto;gap:12px;align-items:center}
.tape-grid{display:grid;grid-template-columns:1fr 280px;gap:12px;margin-top:12px;align-items:start}
.tape{padding:12px 16px}
.tape .th{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;font-family:var(--hud);font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.tape .th .l{text-align:right;color:var(--red)}.tape .th .r{color:var(--blue)}
.trow{display:grid;grid-template-columns:1fr 130px 1fr;gap:10px;align-items:center;padding:3px 0}
.trow .k{text-align:center;font-family:var(--hud);font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.trow .bar{height:10px;background:#0E0E15;border:1px solid var(--line);position:relative;transform:skewX(-12deg)}
.trow .bar i{position:absolute;top:0;bottom:0;transition:width .5s var(--ease)}
.trow .bar.l i{right:0;background:var(--red)}.trow .bar.r i{left:0;background:var(--blue)}
.trow .v{font-family:var(--hud);font-size:16px;min-width:18px}
.trow .l{display:flex;align-items:center;gap:8px;flex-direction:row-reverse}.trow .r{display:flex;align-items:center;gap:8px}
.trow .l .bar,.trow .r .bar{flex:1}
.note{font-size:13.5px;color:var(--muted)}
.scorecard{display:grid;gap:4px;margin:8px 0}
.scorecard .trow{grid-template-columns:1fr 150px 1fr}
.scorecard .tot{display:grid;grid-template-columns:1fr 150px 1fr;gap:10px;align-items:center;margin-top:6px;padding-top:8px;border-top:1px solid var(--line)}
.scorecard .tot .k{text-align:center;font-family:var(--hud);font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.scorecard .tot .n{font-family:var(--disp);font-size:34px;line-height:1}
.scorecard .tot .n.l{text-align:right;color:var(--red)}.scorecard .tot .n.r{color:var(--blue)}
.scorecard .notes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px;font-size:13.5px;color:var(--muted)}
.sidepick{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.sidepick button{padding:10px 16px;border:1px solid var(--line-2);background:var(--panel-2);font-family:var(--disp);font-size:17px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;color:var(--muted);transform:skewX(-12deg)}
.sidepick button>span{display:inline-block;transform:skewX(12deg)}
.sidepick button.on{background:var(--yellow);color:var(--bg);border-color:var(--yellow)}
.sidepick button.on.no{background:var(--text);color:var(--bg);border-color:var(--text)}

/* ---------- character select ---------- */
.select{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:start}
.presets{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.presets canvas{background:#0E0E15;border:1px solid var(--line);cursor:pointer;width:64px;height:64px;object-fit:contain}
.presets canvas.on{border-color:var(--yellow);box-shadow:0 0 0 1px var(--yellow)}
.preview{display:flex;flex-direction:column;align-items:center;gap:8px}
.preview canvas{filter:drop-shadow(0 16px 20px rgba(0,0,0,.6))}
.picker{display:grid;gap:8px;min-width:280px}
.part{display:grid;grid-template-columns:82px 32px 1fr 32px;gap:6px;align-items:center}
.part .k{font-family:var(--hud);font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.part b{font-family:var(--hud);font-size:18px;text-align:center;text-transform:uppercase;letter-spacing:.04em;font-weight:500}
.part button{height:30px;border:1px solid var(--line-2);background:var(--panel-2);cursor:pointer;font-family:var(--hud);font-size:18px}
.swatches{display:flex;gap:5px;flex-wrap:wrap}
.sw{width:22px;height:22px;border:2px solid transparent;cursor:pointer;transform:skewX(-12deg)}
.sw.on{border-color:#fff}
.live-list{display:flex;flex-direction:column;gap:8px}
.live-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:10px 12px;background:var(--panel-2);border:1px solid var(--line)}
.live-row .t{font-family:var(--disp);font-size:16px;text-transform:uppercase}
.live-row .m{font-family:var(--hud);font-size:15px;color:var(--muted);letter-spacing:.04em}
.teaser .row{display:grid;grid-template-columns:28px 1fr auto;gap:10px;align-items:center;padding:7px 0;border-bottom:1px solid var(--line);font-family:var(--hud);font-size:18px}
.teaser .row:last-child{border-bottom:none}

/* ---------- sheet ---------- */
.sheet{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:rgba(6,6,12,.82);padding:14px}
.sheet .box{width:min(820px,100%);max-height:92vh;overflow:auto;background:var(--panel);border:1px solid var(--line-2);padding:22px;animation:rise .3s var(--snap)}
@keyframes rise{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
.levels{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:10px 0 14px}.lvl canvas{max-width:100%;height:auto}
.lvl{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 6px 10px;border:1px solid var(--line);background:var(--panel-2);cursor:pointer;transition:transform .16s var(--snap)}
.lvl.on{border-color:var(--yellow);transform:translateY(-3px)}
.lvl b{font-family:var(--disp);font-size:15px;letter-spacing:.04em;text-transform:uppercase}
.lvl span{font-family:var(--hud);font-size:14px;color:var(--muted);text-align:center;letter-spacing:.04em}
.lvl .st{color:var(--yellow);letter-spacing:-1px}
.topiclist{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.topiclist button{padding:6px 10px;border:1px solid var(--line-2);background:var(--panel-2);font-family:var(--hud);font-size:16px;letter-spacing:.03em;cursor:pointer;color:var(--muted)}
.topiclist button.on{background:var(--text);color:var(--bg);border-color:var(--text)}
.searching{display:flex;flex-direction:column;align-items:center;gap:12px;padding:26px 10px;text-align:center}
.radar{width:80px;height:80px;border:2px solid var(--line-2);position:relative}
.radar:before{content:"";position:absolute;inset:-2px;border:2px solid var(--green);border-color:var(--green) transparent transparent transparent;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- splash + reveal ---------- */
.splash{position:fixed;inset:0;z-index:55;display:grid;place-items:center;pointer-events:none}
.splash .t{font-family:var(--disp);font-size:clamp(64px,14vw,150px);line-height:.9;text-transform:uppercase;color:var(--yellow);transform:skewX(-12deg);text-shadow:6px 6px 0 #0A0A0F,10px 10px 0 var(--red);animation:slam .9s var(--snap) forwards}
.splash .t small{display:block;font-size:.35em;color:var(--text);text-shadow:4px 4px 0 #0A0A0F}
@keyframes slam{0%{transform:skewX(-12deg) scale(3);opacity:0}25%{transform:skewX(-12deg) scale(1);opacity:1}80%{opacity:1}100%{opacity:0}}
.reveal{position:fixed;inset:0;background:rgba(6,6,12,.88);display:flex;align-items:center;justify-content:center;padding:16px;z-index:50}
.reveal .box{width:min(760px,100%);max-height:92vh;overflow:auto;background:var(--panel);border:1px solid var(--line-2);padding:24px}
.reveal .word{font-family:var(--disp);font-size:clamp(48px,10vw,110px);line-height:.9;text-align:center;text-transform:uppercase;transform:skewX(-12deg);margin:8px 0 6px;text-shadow:5px 5px 0 #0A0A0F}
.reveal .word.slam{animation:slam2 .5s var(--snap)}
.reveal .word.red{color:var(--red)}.reveal .word.blue{color:var(--blue)}.reveal .word.y{color:var(--yellow)}
@keyframes slam2{from{transform:skewX(-12deg) scale(2.6);opacity:0}to{transform:skewX(-12deg) scale(1);opacity:1}}
.reveal .sub{text-align:center;font-family:var(--hud);font-size:16px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:14px 0 8px}
.reveal .upset{text-align:center;font-family:var(--disp);font-size:24px;color:var(--yellow);text-transform:uppercase}
.card-an{border:1px solid var(--line-2);background:var(--panel-2);padding:14px 16px;display:grid;gap:8px}
.card-an .who{font-family:var(--disp);font-size:26px;text-transform:uppercase;line-height:1}
.card-an .who.red{color:var(--red)}.card-an .who.blue{color:var(--blue)}
.card-an p{font-size:15.5px;line-height:1.45}
.rounds{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0}
.round{padding:10px;background:var(--panel-2);border:1px solid var(--line);text-align:center;animation:slidein .3s var(--ease)}
.round .rn{font-family:var(--hud);font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.round .rw{font-family:var(--disp);font-size:18px;margin:4px 0;text-transform:uppercase}
.round .rw.red{color:var(--red)}.round .rw.blue{color:var(--blue)}
.round .rq{font-size:12.5px;color:var(--muted);line-height:1.3}
.judgecards{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.judgecards .jc{display:grid;grid-template-columns:1fr auto auto auto;gap:10px;align-items:center;border:1px solid var(--line);padding:8px 12px;font-family:var(--hud);font-size:18px;background:var(--panel-2)}
.judgecards .jc .flip{font-family:var(--disp);color:var(--yellow);font-size:15px}
.stats2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.stat{background:var(--panel-2);border:1px solid var(--line);padding:12px}
.stat h3{font-size:18px}
.stat .row{display:flex;justify-content:space-between;font-family:var(--hud);font-size:17px;border-bottom:1px dashed var(--line);padding:3px 0}
.tips{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.tips div{padding:9px 12px;border-left:3px solid var(--yellow);background:var(--panel-2);font-size:14.5px}

/* ---------- board / method ---------- */
.titles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:12px 0 18px}
.titles .plate{display:flex;flex-direction:column;gap:4px}
.titles .plate .n{font-family:var(--disp);font-size:26px;text-transform:uppercase}
.tablewrap{overflow-x:auto;border:1px solid var(--line);background:var(--panel)}
table{width:100%;border-collapse:collapse;min-width:760px;font-size:15px}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line)}
th{font-family:var(--hud);font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500}
td.n,th.n{text-align:right;font-family:var(--hud);font-size:17px;font-variant-numeric:tabular-nums}
.method .row{display:grid;grid-template-columns:170px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.method .row .k{font-family:var(--disp);font-size:16px;text-transform:uppercase}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) skewX(-12deg);background:var(--text);color:var(--bg);padding:10px 18px;font-family:var(--hud);font-size:18px;letter-spacing:.04em;z-index:70;animation:rise .25s var(--snap)}
.toast>span{display:inline-block;transform:skewX(12deg)}
footer{padding-block:30px 60px;color:var(--dim);font-size:13px}

@media (max-width:860px){
  .modes{display:grid;grid-template-columns:1fr 1fr}.modes .btn{width:100%}
  .top nav{gap:12px}.top nav a,.top nav .online{font-size:15px;letter-spacing:.06em}.top .wordmark{width:120px}
  @media (max-width:420px){.top nav .online{display:none}}
  .cmd{position:sticky;bottom:0;z-index:30;grid-template-columns:1fr;gap:8px;padding:10px 12px;box-shadow:0 -20px 40px -20px rgba(0,0,0,.9)}
  .cmd .now{font-size:18px}.inputrow{grid-template-columns:1fr 1fr}.inputrow textarea{grid-column:1/-1}.inputrow .btn{height:auto}.judgerow{grid-template-columns:auto 1fr auto;grid-auto-rows:auto}
  .tape-grid{grid-template-columns:1fr}.trow{grid-template-columns:1fr 90px 1fr}
  .hero{grid-template-columns:1fr}.home-grid{grid-template-columns:1fr}.grid2{grid-template-columns:1fr}.feed{max-height:none}.stats2{grid-template-columns:1fr}
  .select{grid-template-columns:1fr}.picker{min-width:0}.presets{grid-template-columns:repeat(8,1fr)}.presets canvas{width:100%;height:auto}
  /* phone: the argument first. Compact HUD, then their answer, then the fighters; the command bar stays pinned to the bottom. */
  #room{display:flex;flex-direction:column}#room>*{order:10}#room>.roomhead{order:1}#room>.hudbar{order:2}#room>#exchange{order:3}#room>.ring{order:4}#room>#cmd{order:5}
  #exchange{margin-top:8px}.ex{padding:10px 12px;min-height:0}
  .hudbar{grid-template-columns:1fr auto 1fr;gap:8px;padding:8px 10px}.hudmid{min-width:0;gap:0}.timer{font-size:34px}.tbar{width:60px}.phase{font-size:12px}
  .hpbar{grid-template-columns:1fr auto;grid-template-areas:"nm val" "track track";gap:2px 6px;align-items:center}.hpbar .nm{grid-area:nm;font-size:15px;max-width:none}.hpbar .val{grid-area:val;font-size:16px;min-width:0}.hpbar .track{grid-area:track;height:14px}
  .hpbar.right{direction:ltr;grid-template-columns:1fr auto}
  .ring .stage .corner .live{display:none}.qplate .q{font-size:15px}.read{font-size:15px}
  .ring .stage{grid-template-columns:1fr 1fr;gap:10px}.ring .center{grid-column:1/-1;order:3}.ring .corner canvas{max-height:84px;width:auto}.ring{padding:8px 10px 4px;margin-top:8px}
  .exchange{grid-template-columns:1fr;gap:8px}#exMine{display:none}.ex .t{font-size:16px}
  .an .grid{grid-template-columns:1fr}
  /* ---- phone pass 2026-09-30 ---- */
  /* pickers: three level cards a row, all five reachable; the Fight row stays pinned to the bottom of the sheet */
  .levels{grid-template-columns:repeat(3,minmax(0,1fr))}.lvl{padding:8px 4px}.lvl span:not(.st){font-size:12px}.lvl b{font-size:14px}
  /* home: the grid column may shrink below the headline's natural width; the headline scales with the screen */
  .wrap{padding-inline:12px}.hero{grid-template-columns:minmax(0,1fr);gap:16px;padding-block:14px 20px}.hero h1{font-size:min(46px,10.6vw)}.hero .sub{font-size:16px;margin:12px 0 16px}
  .modes{gap:8px}.modes .btn.big{font-size:20px;padding:13px 10px}.join{gap:8px}
  .select{gap:12px}.home-grid{gap:12px}
  /* in a bout the site nav steps aside: the ring owns the screen */
  .stage-plate .stage{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}.stage .who{min-width:0}.bubble{font-size:15px;padding:6px 9px;max-width:100%;min-height:0;text-align:center}
  .stage-plate canvas{max-width:100%;height:auto}
  body:has(#room:not([hidden])) .top{display:none}
  body:has(#room:not([hidden])) footer{display:none}
  .ex .t{font-size:15px;line-height:1.35}.ex{max-height:34dvh;overflow-y:auto}
  .qplate{padding:6px 12px}.read{margin-top:4px}
  .sheet{padding:0;align-items:flex-end}.sheet .box{max-height:94dvh;padding:16px 14px 0;border-bottom:0}
  .sheet-go{position:sticky;bottom:0;background:var(--panel);margin:14px -14px 0!important;padding:12px 14px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line-2);z-index:2}
  .sheet-go .btn.big{padding:12px 26px;font-size:22px}
  /* the room: compact head, the command bar pinned to the bottom with the input and Send always on screen */
  .roomhead{margin-block:6px;gap:8px}.roomhead .code{font-size:16px;letter-spacing:.16em}.roomhead .topic{font-size:17px;line-height:1.05}
  .roomhead .btn.sm{padding:6px 10px;font-size:14px}.sfxbtn{font-size:13px;padding:3px 8px}
  .cmd{padding:8px 10px calc(8px + env(safe-area-inset-bottom));gap:6px;margin-top:8px}
  .cmd .now{font-size:17px}.cmd .hint{font-size:13px;margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .inputrow{gap:6px}.inputrow textarea{min-height:58px;padding:8px 10px}.inputrow .btn{padding:9px 12px;font-size:17px}
  .cmd{grid-template-columns:minmax(0,1fr)}.cmd-status,.cmd-body,#debaterCtl,.inputrow{min-width:0}.inputrow{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  #debaterCtl>div:last-child{flex-wrap:nowrap!important;min-width:0}
  .howto{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-top:4px;min-width:0;flex:1 1 auto}.howto::-webkit-scrollbar{display:none}.howto span{font-size:12px;white-space:nowrap;flex:none}
  #feedBox{padding-bottom:12px}
  .ring .corner canvas{max-height:72px}
  /* the splash lands over the fighters, not over the answer you are about to read */
  .splash{place-items:end center;padding-bottom:36dvh}.splash .t{font-size:56px;text-align:center}.splash .t small{font-size:.32em}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}