:root{
  --paper:#EAEEF1;
  --panel:#FFFFFF;
  --panel-2:#F4F7F9;
  --ink:#0F1820;
  --ink-soft:#4B5C69;
  --muted:#7D8D99;
  --line:#CFD8DF;
  --line-strong:#E2E9EE;
  --accent-deep:#002D5B;
  --on-accent:#FFFFFF;
  --brand-grey:#6D6E71;
  --logo-plate:transparent;
  --logo-pad:0px;
  --accent:#0F6FA8;
  --accent-tint:#DCEBF5;
  --accent-b:#B8551D;
  --accent-b-tint:#F7E7DA;
  --bad:#A81E28;
  --bad-tint:#F6E0E1;
  --ok:#2C6E52;
  --ok-tint:#DCEEE4;
  --shadow:0 1px 2px rgba(15,24,32,.06), 0 8px 24px -16px rgba(15,24,32,.28);
  --font-mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --font-display:"Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body:"Source Sans 3", -apple-system, "Segoe UI", Roboto, sans-serif;

  --space-void:#050810;
  --star:#CFE0F5;
  --grid-line:#1A2638;
  --grid-active:#00E5FF;
  --platform:#5CADDF;
  --platform-dark:#2E5C7A;
  --laser:#7CF7C4;
  --explosion:#FFC94A;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0C1218;
    --panel:#141D25;
    --panel-2:#1A242D;
    --ink:#E4ECF2;
    --ink-soft:#9DAEBA;
    --muted:#71838F;
    --line:#2A3742;
    --line-strong:#212C35;
    --accent-deep:#8FBBDF;
    --brand-grey:#9AA3A9;
    --logo-plate:transparent;
    --logo-pad:7px;
    --accent:#5CADDF;
    --accent-tint:#13303F;
    --accent-b:#E08B52;
    --accent-b-tint:#3A2617;
    --bad:#E4757C;
    --bad-tint:#3A1A1D;
    --ok:#6FBF97;
    --ok-tint:#173226;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --paper:#0C1218;
  --panel:#141D25;
  --panel-2:#1A242D;
  --ink:#E4ECF2;
  --ink-soft:#9DAEBA;
  --muted:#71838F;
  --line:#2A3742;
  --line-strong:#212C35;
  --accent-deep:#8FBBDF;
  --on-accent:#0C1218;
  --brand-grey:#9AA3A9;
  --logo-plate:transparent;
  --logo-pad:7px;
  --accent:#5CADDF;
  --accent-tint:#13303F;
  --accent-b:#E08B52;
  --accent-b-tint:#3A2617;
  --bad:#E4757C;
  --bad-tint:#3A1A1D;
  --ok:#6FBF97;
  --ok-tint:#173226;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.8);
}

*{box-sizing:border-box}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  margin:0;
}
.wrap{max-width:1180px;margin:0 auto;padding:28px 20px 64px;display:flex;flex-direction:column;gap:26px}

/* ---------- topbar ---------- */
.topbar{
  position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:2px solid var(--accent-deep);
  padding-block:14px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.brand{display:flex;flex-direction:row;align-items:center;gap:14px;}
.brand-logo{
  flex:none;height:56px;width:auto;border-radius:5px;
  background:var(--logo-plate);padding:var(--logo-pad);box-sizing:content-box;
}
.brand-text{display:flex;flex-direction:column;gap:5px;min-width:0}
.school{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand-grey);margin:0;
}
h1{
  font-family:var(--font-display);font-weight:700;font-size:clamp(24px,3.6vw,34px);line-height:1.05;
  letter-spacing:-.025em;margin:0;text-wrap:balance;color:var(--accent-deep);
}
.topbar-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.btn{
  font-family:var(--font-display);font-weight:600;font-size:13px;border-radius:4px;
  padding:8px 14px;cursor:pointer;border:1px solid transparent;transition:transform .05s ease;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--accent);color:#ffffff;}
.btn-primary:hover{background:var(--accent-deep);}
.btn-ghost{background:transparent;border-color:var(--line-strong);color:var(--ink-soft);text-decoration:none;display:inline-flex;align-items:center;}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);}
.btn-sm{padding:4px 8px;font-size:12px;}

.site-intro{margin:0;max-width:72ch;color:var(--ink-soft);font-size:16px}
.objective{font-size:14.5px;color:var(--ink-soft);max-width:74ch;margin:0 0 10px;}
.objective strong{color:var(--ink)}

/* ---------- glossary / dialog ---------- */
dialog{
  border:1px solid var(--line-strong);border-radius:6px;padding:0;max-width:760px;width:94vw;
  background:var(--panel);color:var(--ink);box-shadow:var(--shadow);
}
dialog::backdrop{background:rgba(15,21,29,.5);}
.dialog-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line);}
.dialog-head h3{margin:0;font-size:16px;font-family:var(--font-display);}
.dialog-body{padding:16px 18px 20px;max-height:65vh;overflow:auto;}
.close-x{border:0;background:transparent;color:var(--muted);font-size:20px;line-height:1;cursor:pointer;padding:4px;}
.close-x:hover{color:var(--ink);}
.tablewrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:13.5px}
th,td{text-align:left;padding:7px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--font-display);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
td.mi .gap{color:var(--muted);font-style:italic;font-size:12.5px}
.tnote{font-size:12px;color:var(--muted);margin-top:14px}
.tnote a{color:var(--muted)}

/* ---------- accordion ---------- */
details.acc{border:1px solid var(--line);border-radius:6px;background:var(--panel);box-shadow:var(--shadow)}
details.acc > summary{
  cursor:pointer;padding:13px 16px;font-family:var(--font-display);font-weight:600;font-size:16.5px;
  display:flex;align-items:center;gap:10px;list-style:none;color:var(--ink);
}
details.acc > summary::-webkit-details-marker{display:none}
details.acc > summary::before{
  content:"";flex:none;width:0;height:0;border-left:6px solid var(--accent-deep);
  border-top:4.5px solid transparent;border-bottom:4.5px solid transparent;transition:transform .15s;
}
details.acc[open] > summary::before{transform:rotate(90deg)}
details.acc > summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
details.acc > summary .hint{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);font-weight:400;margin-left:auto;text-align:right;
}
.acc-body{padding:0 16px 18px;display:flex;flex-direction:column;gap:10px}
.acc-body ul{margin:0;padding-left:20px}
.acc-body li{margin-bottom:4px}

/* ---------- generic panel ---------- */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:6px;box-shadow:var(--shadow)}

/* ---------- setup screen ---------- */
.setup{padding:24px;display:flex;flex-direction:column;gap:22px}
.setup-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));gap:16px;max-width:720px}
.setup-group{display:flex;flex-direction:column;gap:8px}
.setup-group label.group-label{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
.toggle-row{display:flex;gap:8px;flex-wrap:wrap}
.toggle-btn{
  flex:1;min-width:120px;font-family:var(--font-display);font-weight:600;font-size:14.5px;
  padding:10px 12px;border:1.5px solid var(--line-strong);border-radius:6px;background:var(--panel-2);
  color:var(--ink-soft);cursor:pointer;text-align:center;transition:border-color .1s,color .1s,background .1s;
}
.toggle-btn:hover{border-color:var(--accent)}
.toggle-btn.active{border-color:var(--accent);color:var(--accent-deep);background:var(--accent-tint)}
.toggle-btn .sub{display:block;font-family:var(--font-mono);font-weight:400;font-size:11px;color:var(--muted);margin-top:2px}

/* Leaderboard section */
.leaderboard-box{
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:6px;
  padding:14px;
  margin-top:6px;
}
.lb-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}
.lb-header h3{
  margin:0;
  font-size:14px;
  font-family:var(--font-display);
  color:var(--ink);
}
.lb-table{width:100%;border-collapse:collapse;font-size:13px;}
.lb-table th,.lb-table td{padding:6px 8px;text-align:left;border-bottom:1px solid var(--line);}
.lb-table th{font-family:var(--font-mono);font-size:11px;color:var(--muted);text-transform:uppercase;}
.lb-empty{text-align:center;color:var(--muted);padding:12px;font-style:italic;}
.lb-date{color:var(--muted);font-size:11.5px;}

.setup-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;
  border-top:1px solid var(--line);padding-top:18px}
.best-score{font-family:var(--font-mono);font-size:13px;color:var(--ink-soft)}
.best-score b{color:var(--ink)}
.launch-btn{font-size:15.5px;padding:12px 26px}
.howto{font-size:13.5px;color:var(--ink-soft);margin:0;padding-left:20px}
.howto li{margin-bottom:5px}
.howto .kbd{
  font-family:var(--font-mono);font-size:12px;background:var(--panel-2);border:1px solid var(--line);
  border-radius:3px;padding:1px 6px;color:var(--ink);
}

/* ---------- game stage ---------- */
.stage-wrap{position:relative;padding:0;overflow:hidden}

.stage{
  position:relative;width:100%;aspect-ratio:16/10;background:var(--space-void);overflow:hidden;
}
.stage canvas{display:block;width:100%;height:100%}
.stage:fullscreen{aspect-ratio:auto;width:100vw;height:100vh;}

.stage-topleft,.stage-topright{
  position:absolute;top:10px;display:flex;align-items:center;gap:8px;z-index:6;
}
.stage-topleft{left:12px}
.stage-topright{right:12px;flex-direction:column;align-items:flex-end;gap:4px}
.ov-chip{
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.03em;color:#C7D2E3;
  background:rgba(5,8,16,.6);border:1px solid rgba(124,247,196,.25);border-radius:4px;
  padding:4px 8px;display:flex;align-items:center;gap:5px;
}
.ov-chip b{color:#fff;font-weight:700}
.icon-btn{
  width:26px;height:26px;border-radius:4px;border:1px solid rgba(124,247,196,.25);
  background:rgba(5,8,16,.6);color:#C7D2E3;cursor:pointer;font-size:13px;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.icon-btn:hover{border-color:var(--laser);color:#fff}
.score-box{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:#9AAAC2;background:rgba(5,8,16,.6);border:1px solid rgba(124,247,196,.25);border-radius:4px;
  padding:4px 10px;text-align:right;
}
.score-box b{display:block;font-size:19px;letter-spacing:0;color:#fff;font-weight:700}
.timer-box{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:#9AAAC2;background:rgba(5,8,16,.6);border:1px solid rgba(124,247,196,.25);border-radius:4px;
  padding:4px 10px;text-align:right;margin-top:2px;
}
.timer-box b{display:block;font-size:16px;letter-spacing:0;color:var(--laser);font-weight:700}
.timer-box.urgent b{color:var(--bad)}

.buffer-row{
  position:absolute;left:50%;bottom:12px;transform:translateX(-50%);
  display:flex;align-items:center;gap:10px;z-index:5;pointer-events:none;
  background:rgba(5,8,16,.85);border:1px solid rgba(124,247,196,.3);border-radius:6px;
  padding:6px 14px;
}
.buffer-text{
  font-family:var(--font-mono);font-weight:700;font-size:18px;color:var(--laser);letter-spacing:2px;
  min-width:140px;text-align:center;
}
.buffer-pixels{display:flex;gap:3px;flex-wrap:wrap;max-width:200px;justify-content:center;}
.px-dot{width:9px;height:9px;border-radius:2px;border:1px solid rgba(255,255,255,.2);background:transparent}
.px-dot.filled{border-color:#fff}

.stage-overlay{
  position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;
  gap:12px;background:rgba(5,8,16,.92);text-align:center;padding:20px;z-index:10;
  overflow-y:auto;
}
.stage-overlay.visible{display:flex}
.stage-overlay h3{
  font-family:var(--font-display);font-weight:700;font-size:clamp(22px,4vw,32px);color:#fff;margin:0;
}
.stage-overlay p{color:#C7D2E3;margin:0;font-size:14.5px;max-width:44ch}
.stage-overlay .score-final{font-family:var(--font-mono);font-size:15px;color:#fff}
.stage-overlay .score-final b{font-size:26px;color:var(--explosion)}
.overlay-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:6px;}

/* Submit score styling inside overlay */
.score-submit-box{
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.15);
  border-radius:6px;
  padding:12px 16px;
  margin:6px 0;
  width:100%;
  max-width:380px;
  text-align:center;
}
.score-submit-box label{
  display:block;
  font-size:12px;
  font-family:var(--font-mono);
  color:#C7D2E3;
  margin-bottom:8px;
}
.submit-row{
  display:flex;
  gap:8px;
  justify-content:center;
  align-items:center;
}
.submit-row input{
  width:70px;
  text-align:center;
  font-family:var(--font-mono);
  font-weight:700;
  font-size:18px;
  letter-spacing:2px;
  padding:6px;
  border-radius:4px;
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--ink);
}
.submit-status{
  font-size:12px;
  margin-top:6px;
  font-family:var(--font-mono);
}
.submit-status.success{color:#10B981;}
.submit-status.error{color:#EF4444;}

/* ---------- keypad ---------- */
.keypad{
  display:flex;flex-wrap:wrap;gap:6px;padding:12px 14px 16px;background:var(--panel-2);
  border-top:1px solid var(--line);justify-content:center;
}
.key-btn{
  font-family:var(--font-mono);font-weight:700;font-size:16px;padding:12px 0;border-radius:5px;
  border:1.5px solid var(--line-strong);background:var(--panel);color:var(--ink);cursor:pointer;
  transition:transform .05s ease, background .1s;display:flex;align-items:center;justify-content:center;
  min-width:38px;flex:1;
}
.key-btn:hover{border-color:var(--accent);color:var(--accent-deep)}
.key-btn:active{transform:translateY(1px);background:var(--accent-tint)}
.key-btn.btn-num{max-width:55px}
.key-btn.btn-color{min-width:55px;max-width:90px;font-weight:700}
.key-btn.btn-color[data-color="W"]{background:#FFFFFF;color:#0F1820;border-color:#CFD8DF}
.key-btn.btn-color[data-color="B"]{background:#141D25;color:#FFFFFF;border-color:#2A3742}
.key-btn.btn-color[data-color="R"]{background:#EF4444;color:#FFFFFF;border-color:#B91C1C}
.key-btn.btn-color[data-color="G"]{background:#10B981;color:#FFFFFF;border-color:#047857}
.key-btn.btn-action{min-width:75px;max-width:110px;background:var(--panel-2)}

footer{border-top:1px solid var(--line);padding-top:14px;font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 18px;}
footer a{color:var(--muted)}

@media (prefers-reduced-motion: reduce){
  .toggle-btn,.key-btn,.btn{transition-duration:.001ms !important}
}