:root{
  --bg:#151412; --panel:#1d1c1a; --raise:#262522; --line:#33312d;
  --txt:#f0ece4; --mut:#8d887e; --acc:#ff4a1c; --acc-d:#9c2a0e;
  --good:#8fd16a; --badc:#e5604f; --amber:#f2b632;
  --disp:'Archivo',system-ui,'Segoe UI',sans-serif; --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--txt);font:15px/1.45 var(--disp)}
.hidden{display:none!important}
.muted{color:var(--mut)}
button{font-family:inherit}

.view{max-width:1360px;margin:0 auto;padding:max(20px,env(safe-area-inset-top)) 20px 32px}
.logo{font:900 56px/1 var(--disp);font-stretch:62%;text-transform:uppercase;letter-spacing:-.01em;text-align:center;margin-top:9vh}
.logo b{color:var(--acc);font-weight:900}
.logo.sm{font-size:26px;margin:0;text-align:left}
.sub{text-align:center;color:var(--mut);margin:14px 0 40px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;max-width:720px;margin:0 auto}
.glass{background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:20px}
.glass h2{margin:0 0 4px;font-size:20px;font-weight:800}
.glass h3{margin:0 0 14px;font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut);display:flex;align-items:center;gap:10px}
.cards .btn.big{margin-top:12px}
input[type=text],input:not([type]),input[type=number]{width:100%;background:var(--bg);border:1px solid var(--line);color:var(--txt);border-radius:3px;padding:12px 12px;font:inherit;margin:8px 0 0;outline:none}
input:focus{border-color:var(--acc)}
#joinCode{text-transform:uppercase;letter-spacing:.5em;text-align:center;font:800 24px var(--mono);padding-left:calc(12px + .5em)}
.err{color:var(--badc);min-height:1.3em;font-size:13px;margin-top:8px}

.btn{border:1px solid var(--line);background:var(--raise);color:var(--txt);border-radius:3px;padding:10px 14px;font:700 14px var(--disp);cursor:pointer;transition:background .1s,border-color .1s}
.btn:hover{border-color:var(--mut)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn.big{padding:14px 18px;font-size:16px;width:100%}
.btn.sm{padding:6px 10px;font-size:12px}
.btn.primary,.btn.accent{background:var(--acc);border-color:var(--acc);color:#fff}
.btn.primary:hover,.btn.accent:hover{background:#ff5f36;border-color:#ff5f36}
.btn.good{color:var(--good);border-color:#4a6b38}
.btn.bad{color:var(--badc);border-color:#6f342d}
.btn.ghost{background:transparent}
kbd{font:600 10px var(--mono);border:1px solid currentColor;border-radius:3px;padding:1px 5px;margin-right:7px;opacity:.6}
.chip{border:1px solid var(--line);border-radius:3px;padding:4px 10px;font-weight:700;font-size:13px}
.chip.ghost{color:var(--mut)}
.chip b{font-family:var(--mono);color:var(--txt)}

/* ---------- PLAYER ---------- */
#player{display:flex;flex-direction:column;min-height:100dvh;padding-bottom:max(18px,env(safe-area-inset-bottom))}
.pbar{display:flex;justify-content:space-between;align-items:center;gap:10px}
.pbar>div:first-child{display:flex;gap:8px}
.pbar-r{display:flex;align-items:center;gap:10px}
.ping{font:600 12px var(--mono);color:var(--good)}
.ping.mid{color:var(--amber)}.ping.bad{color:var(--badc)}
.pstats{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);margin:16px 0;border-radius:4px}
.pstats div{padding:10px 12px;border-left:1px solid var(--line)}
.pstats div:first-child{border-left:0}
.pstats small{display:block;color:var(--mut);font:600 10px var(--mono);text-transform:uppercase;letter-spacing:.14em}
.pstats b{font:800 26px var(--mono)}
.buzzwrap{flex:1;display:grid;place-items:center;min-height:300px}
.buzz{width:min(78vw,50vh,400px);aspect-ratio:1;border-radius:50%;border:0;color:#fff;font:900 clamp(32px,8vw,54px) var(--disp);font-stretch:75%;letter-spacing:.02em;cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none;
  background:var(--acc);box-shadow:0 12px 0 var(--acc-d);transition:transform .05s,box-shadow .05s,background .15s}
.buzz:active,.buzz.down{transform:translateY(10px);box-shadow:0 2px 0 var(--acc-d)}
.buzz.locked{background:#2a2926;color:#6f6a60;box-shadow:0 12px 0 #1c1b19;cursor:not-allowed}
.buzz.locked:active,.buzz.locked.down{transform:none;box-shadow:0 12px 0 #1c1b19}
.buzz.buzzed{background:var(--amber);color:#1a1405;box-shadow:0 12px 0 #8a661a}
.buzz.won{background:var(--good);color:#0f1c08;box-shadow:0 12px 0 #4a6b38}
.buzz.wrong{background:var(--badc);box-shadow:0 12px 0 #6f342d}
.pinfo{text-align:center;font:700 17px var(--disp);margin:26px 0 8px;min-height:1.5em}
.porder{display:flex;flex-direction:column;max-width:440px;width:100%;margin:0 auto;border-top:1px solid var(--line)}
.porder .o{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:8px 2px;font:500 13px var(--mono)}
.porder .o.me{color:var(--acc);font-weight:800}
.shake{animation:shake .3s}
@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}

/* ---------- HOST ---------- */
.hbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.hbar-r{display:flex;gap:8px;align-items:center}
.roomcode{cursor:pointer;display:flex;align-items:baseline;gap:14px}
.roomcode small{color:var(--mut);font:600 11px var(--mono);letter-spacing:.1em}
.roomcode b{font:800 52px/1 var(--mono);letter-spacing:.16em;color:var(--acc)}
.hgrid{display:grid;gap:16px;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);grid-template-areas:"stage board" "stats settings"}
.stage{grid-area:stage}.board{grid-area:board}.stats{grid-area:stats}.settings{grid-area:settings}
@media(max-width:900px){.hgrid{grid-template-columns:1fr;grid-template-areas:"stage" "board" "stats" "settings"}.roomcode b{font-size:36px}.roomcode{flex-wrap:wrap}}
.stagehead{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.status{font:800 13px var(--mono);letter-spacing:.16em;padding:7px 12px;border-radius:3px;border:1px solid var(--line);color:var(--mut)}
.status.open{background:var(--good);border-color:var(--good);color:#10200a}
.round{color:var(--mut);font:600 12px var(--mono);text-transform:uppercase;letter-spacing:.12em}
.round b{color:var(--txt);font-size:18px;margin-left:6px}
.order{display:flex;flex-direction:column;min-height:220px;border-top:1px solid var(--line)}
.empty{color:var(--mut);padding:28px 4px;font-size:14px}
.buzzrow{display:grid;grid-template-columns:40px 1fr auto 90px;align-items:center;gap:12px;border-bottom:1px solid var(--line);border-left:4px solid var(--c);padding:12px 12px}
.buzzrow.first{background:var(--raise);font-size:28px;font-weight:900;font-stretch:80%;padding:16px 12px}
.buzzrow.wrong{opacity:.4}.buzzrow.wrong .nm{text-decoration:line-through}
.buzzrow .pos{font:700 .6em var(--mono);color:var(--mut)}
.buzzrow .ms{font:700 .6em var(--mono)}
.buzzrow .d{font:500 .42em var(--mono);color:var(--mut);text-align:right}
.tag{display:inline-block}
em.tag{font:700 10px var(--mono);font-style:normal;text-transform:uppercase;letter-spacing:.1em;padding:2px 6px;border-radius:2px;margin-left:10px;vertical-align:middle;text-align:left}
em.tag.correct{background:var(--good);color:#10200a}
em.tag.wrong{background:var(--badc);color:#2a0b07}
.controls{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.controls .btn{flex:1;min-width:120px}
.controls .btn.big{flex:2;width:auto}
.plist{display:flex;flex-direction:column;max-height:420px;overflow:auto;border-top:1px solid var(--line)}
.pl{display:grid;grid-template-columns:24px 1fr auto 3ch;gap:10px;align-items:center;border-bottom:1px solid var(--line);border-left:4px solid var(--c);padding:8px 10px}
.pl.off{opacity:.4}
.pl .rk{color:var(--mut);font:600 12px var(--mono)}
.pl .nm{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl .nm small{display:block;color:var(--mut);font:500 11px var(--mono)}
.pl .sc{font:800 24px var(--mono);text-align:right}
.pl .adj{display:flex;gap:4px;opacity:.5}
.pl:hover .adj{opacity:1}
.pl .adj button{background:var(--raise);border:1px solid var(--line);color:var(--txt);border-radius:3px;min-width:26px;height:26px;cursor:pointer;font:600 11px var(--mono);padding:0 6px}
.pl .adj button:hover{border-color:var(--mut)}
.count{border:1px solid var(--line);border-radius:3px;padding:0 7px;color:var(--txt)}
.tabs{display:flex;gap:0;margin-bottom:12px;border:1px solid var(--line);border-radius:3px;width:max-content}
.tab{background:transparent;border:0;color:var(--mut);padding:6px 14px;cursor:pointer;font:700 12px var(--disp)}
.tab+.tab{border-left:1px solid var(--line)}
.tab.on{background:var(--txt);color:var(--bg)}
table{width:100%;border-collapse:collapse;font:500 12.5px var(--mono)}
th{color:var(--mut);font-weight:600;text-align:right;padding:6px;font-size:10px;letter-spacing:.1em;text-transform:uppercase}
td{text-align:right;padding:8px 6px;border-top:1px solid var(--line);font-variant-numeric:tabular-nums}
th:first-child,td:first-child{text-align:left}
td:first-child{font-family:var(--disp);font-weight:600;font-size:13.5px}
.dotc{display:inline-block;width:8px;height:8px;margin-right:8px;background:var(--c)}
.tblwrap{overflow:auto;max-height:340px}
svg.spark{width:84px;height:22px;vertical-align:middle}
.row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.row:first-of-type{border-top:0}
.row input[type=number]{width:84px;margin:0;padding:7px 9px;text-align:right;font-family:var(--mono)}
.row input[type=checkbox]{width:38px;height:20px;appearance:none;-webkit-appearance:none;background:var(--raise);border:1px solid var(--line);border-radius:2px;position:relative;cursor:pointer;flex:none;margin:0}
.row input[type=checkbox]::after{content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;background:var(--mut);transition:left .1s}
.row input[type=checkbox]:checked{background:var(--acc);border-color:var(--acc)}
.row input[type=checkbox]:checked::after{left:20px;background:#fff}
.row.gap{justify-content:flex-start;flex-wrap:wrap}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--txt);color:var(--bg);padding:9px 16px;border-radius:3px;font-weight:700;opacity:0;transition:.2s;z-index:60;pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- modes + teams ---------- */
.modebar{display:flex;gap:12px;align-items:center;margin-bottom:8px}
select{background:var(--bg);color:var(--txt);border:1px solid var(--line);border-radius:3px;padding:9px 10px;font:700 14px var(--disp);outline:none;max-width:100%}
select:focus{border-color:var(--acc)}
.modebar select{flex:1;font-size:15px}
.teamtoggle{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;white-space:nowrap}
.teamtoggle input{accent-color:var(--acc);width:16px;height:16px;margin:0}
.modedesc{color:var(--mut);font-size:13px;margin:0 0 16px;max-width:62ch}
.status.reading{background:var(--amber);border-color:var(--amber);color:#1a1405}
.status.bonus{background:var(--txt);border-color:var(--txt);color:var(--bg)}
.timer{font:800 20px var(--mono);border:1px solid var(--line);border-radius:3px;padding:6px 12px;font-variant-numeric:tabular-nums}
.timer.low{color:var(--badc);border-color:var(--badc)}
#pTimer{text-align:center;margin:0 auto 6px;width:max-content}
.bonusbox{display:flex;flex-direction:column;gap:4px;border:1px solid var(--line);border-left:6px solid var(--c);padding:20px 18px;background:var(--raise)}
.bonusbox small{font:600 11px var(--mono);letter-spacing:.14em;color:var(--mut)}
.bonusbox b{font:900 34px/1 var(--disp);font-stretch:75%}
.bonusbox span{color:var(--mut)}
.buzzrow .nm small,.porder small{font:500 .45em var(--mono);color:var(--mut);margin-left:8px;text-transform:uppercase;letter-spacing:.06em}
.porder small{font-size:11px}
em.tag.int{background:var(--amber);color:#1a1405}
em.tag.scored{background:var(--txt);color:var(--bg)}
.pteams{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:8px}
.tm{background:transparent;border:1px solid var(--line);border-left:5px solid var(--c);color:var(--txt);border-radius:3px;padding:8px 14px;font:700 14px var(--disp);cursor:pointer}
.tm.on{background:var(--raise);border-color:var(--c)}
.tm:disabled{opacity:.5;cursor:not-allowed}
#teamsBox{margin-bottom:22px}
.pl.tl{grid-template-columns:1fr auto 3ch;grid-template-areas:"name adj sc" "cnt cnt cnt"}
.pl.tl .tname{grid-area:name;margin:0;padding:6px 8px;font-weight:800;font-size:16px;background:transparent;border-color:transparent}
.pl.tl .tname:hover,.pl.tl .tname:focus{background:var(--bg);border-color:var(--line)}
.pl.tl .adj{grid-area:adj;opacity:1}
.pl.tl .sc{grid-area:sc}
.pl.tl .nm{grid-area:cnt;padding-left:8px}
.addteam{margin-top:10px}
.pl .adj select{padding:3px 6px;font-size:12px;max-width:110px}
.pl{grid-template-columns:24px 1fr auto 3ch}
.row.hidden,.tab.hidden{display:none}