:root{
  --bg:#0a0e13;--panel:#121921;--panel2:#18222d;--line:#243242;
  --text:#e9eff6;--muted:#8796a8;--accent:#2fd4a3;--accent-ink:#04261c;
  --hot:#ff4d5e;--gold:#ffc24b;--radius:14px;
  color-scheme:dark;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#0a0e13}}
:root[data-theme="dark"]{--bg:#0a0e13}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,sans-serif;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
button,select,input{font:inherit;color:inherit}
button{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 14px;cursor:pointer;touch-action:manipulation}
button:active{transform:scale(.97)}
button.primary{background:var(--accent);color:var(--accent-ink);border-color:transparent;font-weight:700}
button.danger{background:#3a1820;border-color:#5a2430}
select,input[type=text]{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:9px 10px}
[hidden]{display:none!important}
.app{display:grid;grid-template-rows:auto 1fr auto;height:100%;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.top{display:flex;align-items:center;gap:8px;padding:10px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.brand{font-weight:800;letter-spacing:.5px;font-size:18px}
.brand i{color:var(--accent);font-style:normal}
.mode{color:var(--muted);font-size:14px}
.spacer{flex:1}
.pill{font-size:12px;padding:5px 10px;border-radius:99px;background:var(--panel2);border:1px solid var(--line);color:var(--muted)}
.pill.ok{color:var(--accent);border-color:#1d5c4a}
.pill.warn{color:var(--gold);border-color:#5c4a1d}
.stage{display:grid;grid-template-columns:minmax(220px,1fr) minmax(0,1.35fr) minmax(220px,.85fr);gap:14px;padding:14px 16px;min-height:0}
.players{display:flex;flex-direction:column;gap:10px;overflow:auto;min-height:0}
.pcard{background:var(--panel);border:2px solid var(--line);border-radius:var(--radius);padding:12px 16px;transition:border-color .2s,transform .2s}
.pcard.active{border-color:var(--accent);box-shadow:0 0 0 4px rgba(47,212,163,.12)}
.pname{font-size:clamp(15px,1.6vw,22px);font-weight:700;display:flex;justify-content:space-between;gap:8px}
.pname .legs{color:var(--gold);font-size:.8em}
.pscore{font-size:clamp(44px,6.5vw,104px);font-weight:800;line-height:1;font-variant-numeric:tabular-nums;margin:4px 0}
.pcard:not(.active) .pscore{color:#b9c4d0}
.pstats{display:flex;gap:14px;color:var(--muted);font-size:clamp(12px,1.1vw,15px);flex-wrap:wrap}
.cr{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin:6px 0;text-align:center;font-size:13px}
.cr span{background:var(--panel2);border-radius:6px;padding:3px 0}
.cr .h{background:none;color:var(--muted);font-size:11px}
.cr .m3{background:#164b3c;color:var(--accent)}
.boardwrap{position:relative;min-height:0;display:flex;flex-direction:column;align-items:center;gap:8px}
#board{width:100%;flex:1;min-height:200px;touch-action:none;cursor:crosshair}
.checkout{display:flex;gap:8px;align-items:center;min-height:44px;font-size:clamp(16px,1.7vw,24px)}
.checkout .lbl{color:var(--muted);font-size:.7em;text-transform:uppercase;letter-spacing:1px}
.chip{background:#2b2410;color:var(--gold);border:1px solid #5c4a1d;border-radius:10px;padding:4px 12px;font-weight:800}
.side{display:flex;flex-direction:column;gap:10px;min-height:0}
.cam{position:relative;background:#000;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3}
.cam canvas{width:100%;height:100%;display:block}
.cam .nocam{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);text-align:center;padding:16px;font-size:14px}
.det{font-size:14px;color:var(--muted);display:flex;align-items:center;gap:8px}
.dot{width:10px;height:10px;border-radius:50%;background:#445}
.dot.ok{background:var(--accent)}.dot.mv{background:var(--gold)}.dot.bad{background:var(--hot)}
.simctl{display:flex;flex-wrap:wrap;gap:6px}
.simctl button{padding:7px 10px;font-size:13px}
.log{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;overflow:auto;flex:1;min-height:60px;font-size:13px;color:var(--muted)}
.log div{display:flex;justify-content:space-between;padding:3px 0;border-bottom:1px solid #1a2531}
.log b{color:var(--text)}
.turnbar{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--line);flex-wrap:wrap}
.slots{display:flex;gap:8px}
.slot{width:clamp(76px,8vw,120px);height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;padding:4px}
.slot b{font-size:22px}
.slot small{color:var(--muted);font-size:12px}
.slot.filled{background:#17262f;border-color:#2b4656}
.slot.sel{border-color:var(--gold);box-shadow:0 0 0 3px rgba(255,194,75,.25)}
.slot.auto b::after{content:" ◉";color:var(--accent);font-size:11px;vertical-align:top}
.ttotal{font-size:40px;font-weight:800;min-width:90px;text-align:center;font-variant-numeric:tabular-nums}
.ttotal.bust{color:var(--hot)}
.tmsg{color:var(--gold);font-size:15px;flex:1;min-width:120px}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.actions .primary.pulse{animation:pulse 1.2s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(47,212,163,.18)}}
/* overlays */
.overlay{position:fixed;inset:0;background:rgba(5,8,11,.97);z-index:20;display:flex;flex-direction:column}
.calbar{display:flex;gap:8px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.calbody{flex:1;display:grid;grid-template-columns:1fr 300px;min-height:0}
#calCanvas{width:100%;height:100%;touch-action:none;display:block}
.calside{padding:14px 16px;border-left:1px solid var(--line);overflow:auto;display:flex;flex-direction:column;gap:14px;font-size:14px}
.calside label{display:flex;flex-direction:column;gap:6px;color:var(--muted)}
.calside input[type=range]{width:100%}
.hint{background:#13261f;border:1px solid #1d5c4a;color:#bff3e0;border-radius:10px;padding:10px 12px;font-size:15px}
.tips{color:var(--muted);line-height:1.45;margin:0;padding-left:18px}
dialog{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:18px;padding:20px;width:min(460px,92vw)}
dialog::backdrop{background:rgba(0,0,0,.6)}
dialog h2{margin:0 0 14px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;color:var(--muted);font-size:14px}
.row{display:flex;gap:8px;align-items:center}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button.on{background:var(--accent);color:var(--accent-ink);font-weight:700}
.win{position:fixed;inset:0;display:grid;place-items:center;background:rgba(0,0,0,.75);z-index:15}
.win .card{background:var(--panel);border:2px solid var(--gold);border-radius:22px;padding:28px 36px;text-align:center}
.win h1{font-size:clamp(32px,5vw,64px);margin:0 0 6px;color:var(--gold)}
.win p{color:var(--muted);margin:0 0 18px}
.players.many .pcard{padding:8px 12px}
.players.many .pscore{font-size:clamp(30px,3.6vw,56px)}
.pcard.out{opacity:.45}
.psub{font-size:14px;color:var(--muted);margin:2px 0 4px}
.psub.killer,.psub.bad{color:var(--hot);font-weight:800}
.bar{height:8px;background:var(--panel2);border-radius:99px;overflow:hidden;margin:6px 0}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--gold));border-radius:99px}
dialog{width:min(760px,94vw);max-height:92vh;overflow:auto}
.ggroup{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:1.2px;margin:12px 0 6px}
.ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.gcard{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;font-size:14px}
.gcard .gi{font-size:28px;line-height:1}
.gcard.on{border-color:var(--accent);background:#123329;box-shadow:0 0 0 3px rgba(47,212,163,.18)}
.gdesc{color:var(--text);background:var(--panel2);border-radius:10px;padding:10px 12px;margin:14px 0}
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#toast{position:fixed;left:50%;top:70px;transform:translateX(-50%);background:var(--panel2);border:1px solid var(--line);padding:10px 16px;border-radius:12px;z-index:30;opacity:0;transition:opacity .25s;pointer-events:none;font-weight:600}
#toast.show{opacity:1}
body.nocamview .side .cam{display:none}
@media (max-aspect-ratio:1/1){
  .stage{grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1.2fr) auto}
  .boardwrap{grid-column:1/3}
  .calbody{grid-template-columns:1fr;grid-template-rows:1fr auto}
  .calside{border-left:0;border-top:1px solid var(--line);max-height:38vh}
}
@media (max-width:640px){
  .stage{grid-template-columns:1fr;padding:10px 16px}
  .boardwrap{grid-column:auto}
  .top .mode{display:none}
}