:root{
  --bg:#0d1720; --bg2:#132231; --ink:#e8eef4; --dim:#9db0c2; --line:#27394c;
  --hot:#f0a92b; --good:#4fc78a; --bad:#e2605c; --acc:#5ab0e8;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font:15px/1.55 var(--sans);
  -webkit-text-size-adjust:100%}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--hot);color:#111;padding:6px 10px;z-index:20}
header{padding:14px 16px 6px;max-width:1180px;margin:0 auto}
h1{margin:0;font-size:clamp(24px,4.2vw,38px);letter-spacing:.01em}
.tag{margin:4px 0 0;color:var(--dim);font-size:13px}
main{max-width:1180px;margin:0 auto;padding:0 16px 40px}
#stage{position:relative;margin:12px 0 10px;border:1px solid var(--line);border-radius:10px;
  overflow:hidden;background:#0a1219;touch-action:manipulation;-webkit-user-select:none;user-select:none}
#glcanvas{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#6b87a8}
#nogl{padding:18px;color:var(--dim)}
#gl-lost{position:absolute;top:10px;left:50%;transform:translateX(-50%);max-width:70%;
  background:rgba(226,96,92,.92);color:#160c0c;border-radius:8px;padding:8px 12px;
  font:12.5px/1.4 var(--sans);z-index:5}
#hud{position:absolute;top:10px;left:10px;background:rgba(8,16,24,.72);border:1px solid var(--line);
  border-radius:8px;padding:8px 10px;font:12px/1.5 var(--mono);min-width:150px}
.hudrow{display:flex;justify-content:space-between;gap:14px}
.hudlabel{color:var(--dim)}
#meterwrap{position:absolute;left:0;right:0;bottom:0;padding:10px 12px;
  background:linear-gradient(180deg,rgba(8,16,24,0),rgba(8,16,24,.86) 45%)}
#hud-phase{font:13px/1.3 var(--sans);color:var(--ink);margin-bottom:6px;min-height:18px}
#hud-meter{position:relative;height:14px;border:1px solid var(--line);border-radius:7px;
  background:rgba(0,0,0,.45);overflow:hidden}
#hud-zone{position:absolute;top:0;bottom:0;left:42%;width:16%;background:rgba(79,199,138,.42)}
#hud-marker{position:absolute;top:-2px;bottom:-2px;left:0;width:3px;background:var(--hot)}
#hud-msg{margin-top:6px;font:13px/1.35 var(--mono);min-height:18px;color:var(--hot)}
#hud-msg.ok{color:var(--good)} #hud-msg.no{color:var(--bad)}
#tabs{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 10px}
.tab{background:var(--bg2);color:var(--dim);border:1px solid var(--line);border-radius:8px;
  padding:7px 13px;font:14px var(--sans);cursor:pointer}
.tab.on{background:var(--hot);color:#16212b;border-color:var(--hot);font-weight:600}
.tab:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.panel{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.panel h2{margin:0 0 10px;font-size:19px}
.panel h3{margin:20px 0 6px;font-size:15px;color:var(--hot)}
.note{color:var(--dim);font-size:13px;margin:4px 0 10px}
.controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.controls label{color:var(--dim);font-size:13px}
button{background:var(--acc);color:#0b1a24;border:0;border-radius:7px;padding:8px 14px;
  font:600 14px var(--sans);cursor:pointer}
button:disabled{background:#37506a;color:#8ba0b4;cursor:not-allowed}
button:focus-visible{outline:2px solid var(--hot);outline-offset:2px}
select{background:#0e1a25;color:var(--ink);border:1px solid var(--line);border-radius:6px;
  padding:6px 8px;font:13px var(--sans)}
table{border-collapse:collapse;width:100%;font:12.5px/1.4 var(--mono)}
caption{text-align:left;color:var(--dim);font:12px var(--sans);padding-bottom:6px}
th,td{border:1px solid var(--line);padding:4px 7px;text-align:right;white-space:nowrap}
th:first-child,td:first-child{text-align:left}
thead th{background:#0e1a25;color:var(--dim);font-weight:600}
tbody tr.me td{background:rgba(240,169,43,.12)}
tbody tr.out td{color:#7e8fa0}
#board-wrap,#lab-study,#lab-wa,#lab-body,#lab-prov,#standings{overflow-x:auto;margin-bottom:10px}
.cell-O{color:var(--good)} .cell-X{color:var(--bad)} .cell-P{color:var(--dim)}
.claim{border-left:3px solid var(--hot);padding:2px 0 2px 14px;margin:6px 0 18px}
.claim h3{margin-top:0}
.verdict{background:rgba(240,169,43,.10);border:1px solid rgba(240,169,43,.32);
  border-radius:8px;padding:10px 12px}
.limits{border:1px solid var(--line);border-radius:8px;padding:10px 14px;background:#0e1a25}
.limits ul{margin:8px 0 0;padding-left:20px}
.limits li{margin:5px 0}
dl dt{color:var(--hot);font-weight:600;margin-top:12px}
dl dd{margin:4px 0 0 0;color:#cfdae5}
.gap{border:1px solid var(--line);border-radius:8px;padding:9px 12px;margin:8px 0;background:#0e1a25}
.gap b{color:var(--hot)}
footer{max-width:1180px;margin:0 auto;padding:6px 16px 30px;color:var(--dim);font-size:12.5px}
footer a{color:var(--acc)}
kbd{background:#0e1a25;border:1px solid var(--line);border-radius:4px;padding:1px 5px;
  font:12px var(--mono)}
.pill{display:inline-block;border-radius:999px;padding:1px 8px;font:11px var(--mono);
  border:1px solid var(--line);color:var(--dim);margin-right:5px}
.pill.doc{color:var(--good);border-color:rgba(79,199,138,.5)}
.pill.rec{color:var(--hot);border-color:rgba(240,169,43,.5)}
.pill.der{color:var(--acc);border-color:rgba(90,176,232,.5)}
.pill.mea{color:#c9a6e8;border-color:rgba(201,166,232,.5)}
.pill.cal{color:#e8c86a;border-color:rgba(232,200,106,.5)}
@media (max-width:640px){
  #hud{font-size:11px;min-width:126px;padding:6px 8px}
  #hud{display:grid;grid-template-columns:auto auto;column-gap:12px;top:6px;left:6px}
  #meterwrap{position:static;background:#0a1219;border-top:1px solid var(--line)}
  .panel{padding:11px 12px}
  table{font-size:11.5px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}