/* The Computer Science games' shared parts (Hexa-Tac, Circuit Dash, Parity Check, Pixel Painter, Run the CPU),
   with computer-science/cs-game.js. Loaded before each game's own stylesheet, which adds its board and changes
   what differs. Before a game: the instructions on the left, the leaderboards on the right. In a game: the HUD,
   the game, and the game-over overlay, which is a dark screen in both modes (--screen-*, --neon-*). */

.stage-wrap{flex:1;min-height:0;position:relative;overflow:hidden;display:flex;flex-direction:column}

/* ---------- before a game ---------- */
.setup{flex:1;min-height:0;overflow:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,360px);gap:28px;padding:24px 26px}
.setup[hidden]{display:none}
.setup-main{display:flex;flex-direction:column;gap:12px;max-width:640px}
.setup-main h2{margin:0;font:700 24px/1.1 var(--font-display);letter-spacing:normal;text-transform:none;color:var(--accent-deep)}   /* not resource.css's small .panel h2 */
.setup-footer{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.best-score{font-family:var(--font-mono);font-size:13px;color:var(--ink-soft)}
.best-score b{color:var(--ink)}
.launch-btn{font-size:16px;padding:12px 28px}

/* the leaderboards (js/game-scores.js draws them) */
.setup-boards{justify-self:end;width:100%;display:flex;flex-direction:column;gap:8px}
.group-label{margin:0;font:600 11px/1.2 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.group-label:not(:first-child){margin-top:10px}
.leaderboard-panel{background:var(--paper);border:1px solid var(--line-strong);border-radius:6px;padding:10px 14px;font-family:var(--font-mono);font-size:13px}
.leaderboard-table{width:100%;border-collapse:collapse}
.leaderboard-table td{padding:4px 0;border:none}
.leaderboard-table .rank{color:var(--muted);width:24px}
.leaderboard-table .name{color:var(--accent-deep);font-weight:700;letter-spacing:1px}
.leaderboard-table .score{text-align:right;font-weight:700;color:var(--ink)}
.rejected-table .name,.rejected-table .score{color:var(--muted)}
.rejected-table .reason{text-align:right;padding-left:10px;font-size:11px;color:var(--muted);white-space:nowrap}

/* ---------- the game: the HUD along the top ---------- */
.stage{flex:1;min-height:0;display:flex;flex-direction:column;position:relative;background:var(--panel);padding:10px 14px 14px}
.stage[hidden]{display:none}
.stage:fullscreen{width:100vw;height:100vh}
.hud{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;flex:none}
.hud-left,.hud-right{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ov-chip{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.03em;color:var(--ink-soft);background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:4px 8px;display:flex;align-items:center;gap:5px}
.ov-chip b{color:var(--ink);font-weight:700}
.score-chip b{color:var(--accent-b-deep);font-size:14px}
.icon-btn{width:26px;height:26px;border-radius:4px;border:1px solid var(--line);background:var(--paper);color:var(--ink-soft);cursor:pointer;font-size:13px;line-height:1;display:flex;align-items:center;justify-content:center}
.icon-btn:hover{border-color:var(--accent);color:var(--accent)}
.lives-row{display:inline-flex;gap:2px}
.life-icon{width:15px;height:15px;color:var(--bad);transition:opacity .2s ease}
.life-icon.lost{opacity:.2}

/* ---------- game over: always a dark screen ---------- */
.stage-overlay{
  --overlay-ink-soft:color-mix(in srgb,var(--screen-ink) 60%,var(--screen-muted));
  position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  background:color-mix(in srgb,var(--screen-bg) 90%,transparent);text-align:center;padding:20px;z-index:10;
}
.stage-overlay.visible{display:flex}
.stage-overlay h3{font-family:var(--font-display);font-weight:700;font-size:clamp(22px,4vw,32px);color:var(--screen-ink);margin:0}
.stage-overlay p{color:var(--overlay-ink-soft);margin:0;font-size:14.5px;max-width:48ch}
.stage-overlay .score-final{font-family:var(--font-mono);font-size:15px;color:var(--screen-ink)}
.stage-overlay .score-final b{font-size:26px;color:var(--neon-amber)}
.stage-overlay .new-best{color:var(--neon-amber);font-weight:600}
.stage-overlay .btn-ghost{color:var(--screen-ink);border-color:color-mix(in srgb,var(--screen-ink) 35%,transparent)}
.telemetry-grid{display:grid;grid-template-columns:repeat(4,auto);gap:4px 18px;font-family:var(--font-mono);font-size:12px;color:var(--overlay-ink-soft)}
.telemetry-grid b{color:var(--screen-ink);margin-left:4px}
.submit-area{display:flex;flex-direction:column;align-items:center;gap:8px;margin:4px 0}
.submit-area[hidden]{display:none}
.submit-area label{color:var(--overlay-ink-soft);font-family:var(--font-mono);font-size:12px;letter-spacing:.05em}
.submit-row{display:flex;gap:8px;align-items:center}
.overlay-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.initials-input{font-family:var(--font-mono);font-size:18px;font-weight:700;text-align:center;text-transform:uppercase;width:70px;padding:6px;border:1.5px solid var(--neon-blue);background:color-mix(in srgb,var(--screen-bg) 90%,transparent);color:var(--neon-green);border-radius:4px;outline:none}
.submit-status{font-family:var(--font-mono);font-size:12px;color:var(--neon-green)}
.submit-status.error{color:var(--neon-red)}

/* ---------- smaller screens: the setup stacks, and the page scrolls ---------- */
@media (max-width:900px),(max-height:560px){
  .setup{grid-template-columns:1fr;overflow:visible}
  .setup-boards{justify-self:stretch}
  .stage-wrap{flex:none}
}
@media (max-width:560px){
  .setup{padding:18px 16px}
  .telemetry-grid{grid-template-columns:repeat(2,auto)}
}
@media (prefers-reduced-motion:reduce){.life-icon{transition:none}}