:root{
  --bg:#0e1016; --panel:rgba(14,17,24,.86); --edge:#252b38; --ink:#e8ecf5; --dim:#9aa4b8;
  --a:#4e8cf0; --b:#e8595f; --ok:#33d17a; --warn:#f0b429; --white:#f3f6ff;
  --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}
[hidden]{display:none!important}
html,body{height:100%;margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  overscroll-behavior:none}
body{overflow:hidden}
#view{position:fixed;inset:0;width:100%;height:100%;display:block;background:var(--bg);touch-action:none}

#topbar{position:fixed;top:0;left:0;right:0;display:flex;align-items:center;gap:14px;
  padding:8px 14px;background:linear-gradient(180deg,rgba(10,12,18,.94),rgba(10,12,18,0));
  z-index:5;flex-wrap:wrap}
#topbar h1{font-size:15px;letter-spacing:.22em;text-transform:uppercase;margin:0;font-weight:600;
  color:var(--dim)}
#scoreStrip{display:flex;align-items:center;gap:10px;font-variant-numeric:tabular-nums}
#scoreStrip .nm{font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:var(--dim)}
#scoreStrip .nm-a{color:var(--a)} #scoreStrip .nm-b{color:var(--b)}
#scoreStrip .sc{font-size:30px;font-weight:700;line-height:1;min-width:1.2ch;text-align:center}
#scoreStrip .dash{color:var(--dim)}
#clockWrap{display:flex;flex-direction:column;line-height:1.15}
#clock{font-family:var(--mono);font-size:21px;font-variant-numeric:tabular-nums}
#period{font-size:10px;color:var(--dim);letter-spacing:.08em;text-transform:uppercase}
#topbtns{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
button{font:inherit;font-size:12px;color:var(--ink);background:#161b26;border:1px solid var(--edge);
  border-radius:7px;padding:6px 11px;cursor:pointer}
button:hover{background:#1d2432;border-color:#3a445a}
button:active{transform:translateY(1px)}

#boxPanel{position:fixed;left:14px;bottom:96px;width:min(360px,44vw);background:var(--panel);
  border:1px solid var(--edge);border-radius:12px;padding:12px 14px;z-index:4;
  backdrop-filter:blur(7px)}
.boxLabel{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
  margin-bottom:8px}
#lamps{display:flex;gap:8px;margin-bottom:10px}
.lamp{flex:1;height:26px;border-radius:5px;background:#181c26;border:1px solid var(--edge);
  transition:background .07s linear,box-shadow .07s linear}
.lamp.red.on{background:var(--b);box-shadow:0 0 18px rgba(232,89,95,.75)}
.lamp.green.on{background:var(--ok);box-shadow:0 0 18px rgba(51,209,122,.72)}
.lamp.white.on{background:var(--white);box-shadow:0 0 18px rgba(243,246,255,.7)}
#verdict{font-size:14px;line-height:1.35;min-height:2.6em}
#articles{font-family:var(--mono);font-size:11px;color:var(--warn);margin-top:4px;min-height:1.2em}
#indeterminate{display:none;font-size:11px;line-height:1.4;color:var(--warn);margin-top:6px;
  padding:6px 8px;border:1px solid rgba(240,180,41,.35);border-radius:7px;
  background:rgba(240,180,41,.08)}
#indeterminate.show{display:block}
#stateRow{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;margin:10px 0 0;font-size:11px}
#stateRow dt{color:var(--dim);letter-spacing:.06em;text-transform:uppercase}
#stateRow dd{margin:0;font-family:var(--mono)}

#phrasePanel{position:fixed;right:14px;bottom:96px;width:min(400px,46vw);background:var(--panel);
  border:1px solid var(--edge);border-radius:12px;padding:12px 14px;z-index:4;
  backdrop-filter:blur(7px)}
#phraseLog{font-family:var(--mono);font-size:11px;line-height:1.55;margin:0;white-space:pre-wrap;
  min-height:7.5em;max-height:7.5em;overflow:hidden;color:#c6cfe2}

#controlBar{position:fixed;left:0;right:0;bottom:0;display:flex;flex-direction:column;
  align-items:center;gap:7px;padding:10px 12px 14px;z-index:5;
  background:linear-gradient(0deg,rgba(10,12,18,.95),rgba(10,12,18,0))}
#aimButtons{display:flex;gap:6px}
.aim{min-width:104px;font-family:var(--mono);font-size:11px}
.aim.sel{background:#23406e;border-color:var(--a);color:#fff}
#touchBar{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
#touchBar button{min-width:92px;padding:9px 12px}

#glWarn{position:fixed;top:58px;left:50%;transform:translateX(-50%);z-index:8;max-width:520px;
  padding:10px 14px;border-radius:9px;background:rgba(240,180,41,.14);
  border:1px solid rgba(240,180,41,.5);color:var(--warn);font-size:12px;text-align:center}
#restoreBtn{position:fixed;top:106px;left:50%;transform:translateX(-50%);z-index:8;
  opacity:.55}

#overBox{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:16px;background:rgba(8,10,15,.82);z-index:9}
#overText{font-size:30px;font-weight:700;margin:0}
#overAgain{font-size:15px;padding:11px 22px}

.dialog{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:10;
  width:min(560px,94vw);max-height:86vh;overflow:auto;background:#11141c;
  border:1px solid var(--edge);border-radius:14px;padding:22px 24px;
  box-shadow:0 26px 70px rgba(0,0,0,.62)}
.dialog.wide{width:min(860px,95vw)}
.dialog.open{display:block}
.dialog h2{margin:0 0 14px;font-size:19px}
.dialog h3{margin:20px 0 8px;font-size:13px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--dim)}
.dialog p,.dialog li{font-size:13px;line-height:1.62;color:#d3dae8}
.dialog ol,.dialog ul{padding-left:20px}
.dialog li{margin-bottom:9px}
.dialog label{display:flex;align-items:center;gap:10px;margin:10px 0;font-size:13px}
.dialog label select,.dialog label input[type=range]{margin-left:auto;min-width:190px}
.dialog select{font:inherit;font-size:13px;background:#161b26;color:var(--ink);
  border:1px solid var(--edge);border-radius:7px;padding:6px 9px}
.dialog .x{position:absolute;top:14px;right:16px}
.dialog table{border-collapse:collapse;width:100%;font-size:12px;margin:8px 0 4px}
.dialog th,.dialog td{border-bottom:1px solid #1e2431;padding:5px 8px;text-align:left;
  vertical-align:top}
.dialog th{color:var(--dim);font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  font-size:10px}
.dialog td span[data-k]{font-family:var(--mono);color:var(--ink)}
.dialog .note{font-size:12px;color:var(--dim);line-height:1.55}
.dialog .warn{font-size:12px;line-height:1.58;color:var(--warn);padding:9px 11px;
  border:1px solid rgba(240,180,41,.32);border-radius:8px;background:rgba(240,180,41,.07)}
.dialog code{font-family:var(--mono);font-size:12px;color:#c6cfe2}
.dialog kbd{font-family:var(--mono);font-size:11px;background:#1b2130;border:1px solid var(--edge);
  border-bottom-width:2px;border-radius:5px;padding:1px 6px}
table.keys td{font-size:12px}
#nojs{max-width:640px;margin:16vh auto;padding:26px;font-size:14px;line-height:1.65}

@media (max-width:880px){
  #boxPanel,#phrasePanel{position:static;width:auto;margin:0 10px}
  #phrasePanel{display:none}
  #boxPanel{position:fixed;left:10px;right:10px;bottom:142px;width:auto}
  #scoreStrip .sc{font-size:24px}
}
@media (max-height:560px){ #boxPanel,#phrasePanel{display:none} }
/* Portrait phones: the four line buttons were 4 x 104 px and clipped lines 1 and 4 off both
   edges; wrap them 2 x 2.  The apparatus panel drops its state table (weapon/format live in
   Settings, the line in the buttons) so it stops covering the piste and the control bar. */
@media (max-width:520px){
  #aimButtons{flex-wrap:wrap;justify-content:center;width:100%;max-width:360px}
  .aim{min-width:0;flex:1 1 40%}
  #touchBar button{min-width:0;flex:1 1 28%}
  #touchBar{width:100%;max-width:360px}
  #boxPanel{bottom:178px;padding:9px 12px}
  #stateRow{display:none}
  #verdict{min-height:0}
  #topbar{gap:8px 12px;padding:8px 10px}
  #topbtns{margin-left:0}
  #topbtns button{padding:5px 9px}
  .dialog{padding:18px 16px}
  .dialog h2{padding-right:64px}
  .dialog label{flex-wrap:wrap;gap:4px 10px}
  .dialog label select,.dialog label input[type=range]{min-width:0;flex:1 1 150px}
}
@media (max-width:520px) and (max-height:700px){ #boxPanel{display:none} }