/* Circuit Dash (computer-science/circuit-dash.php). The page chrome is the one-screen layout in
   /css/resource.css; the setup, leaderboards, HUD and game-over overlay are the CS games' shared parts
   (cs-game.css). Before a game: how to play, then the leaderboards on the right. In a game: the HUD, the
   circuit (filling the height that's left), the answers. Every colour is a theme token. */

.kbd{font-size:12px;background:var(--paper);padding:1px 6px;white-space:nowrap}
.bar{text-decoration:overline;text-decoration-thickness:1.5px}

/* ---------- before a game ---------- */
.mode-sum{margin:0;font:500 13px/1.4 var(--font-mono);color:var(--muted)}
.howto{font-size:15px;color:var(--ink-soft);margin:4px 0 0;padding-left:20px}
.howto li{margin-bottom:8px}

/* ---------- the game ---------- */
.stage:fullscreen{overflow:auto}
.time-chip b{font-size:14px}
.time-chip.low{border-color:var(--bad)}
.time-chip.low b{color:var(--bad)}
.msg{flex:none;margin:8px 0;min-height:30px;font-family:var(--font-mono);font-size:13.5px;color:var(--ink);padding:6px 10px;border-left:3px solid var(--line-strong);background:var(--paper);border-radius:0 4px 4px 0}
.msg.ok{border-left-color:var(--ok);color:var(--ok)}
.msg.bad{border-left-color:var(--bad);color:var(--bad)}
.board{flex:1;min-height:180px;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:10px;display:flex;align-items:center;justify-content:center}
.board svg{display:block;width:100%;height:100%;max-height:100%}
.expression{flex:none;margin:8px 0 0;text-align:center;font-family:var(--font-mono);font-size:18px;color:var(--ink);min-height:1.5em}
.expression .lbl{color:var(--muted);font-size:13px;margin-right:8px}
.answer-row{flex:none;display:flex;gap:14px;justify-content:center;margin-top:10px}
.answer-btn{font-family:var(--font-mono);font-weight:700;font-size:22px;padding:10px 34px;min-width:150px;border-radius:8px;border:2px solid var(--line-strong);background:var(--paper);color:var(--ink);cursor:pointer;transition:transform .05s ease,border-color .1s,background .1s}
.answer-btn:hover{border-color:var(--accent);color:var(--accent-deep)}
.answer-btn:active{transform:translateY(1px)}
.answer-btn[disabled]{cursor:default;opacity:.55}
.answer-btn.right{border-color:var(--ok);background:var(--ok-tint);color:var(--ok);opacity:1}
.answer-btn.wrong{border-color:var(--bad);background:var(--bad-tint);color:var(--bad);opacity:1}
.stage-overlay{gap:14px}

/* the circuits: the game's and the Explanation's gate cards (circuit-dash.js draws them) */
.cd-circuit .w{fill:none;stroke:var(--ink);stroke-width:2.2}
.cd-circuit .w.v1{stroke:var(--accent);stroke-width:3.2}
.cd-circuit .w.v0{stroke:var(--muted);stroke-width:2.2}
.cd-circuit .bus{stroke-width:3}
.cd-circuit .g{fill:var(--panel);stroke:var(--ink);stroke-width:2.5;stroke-linejoin:round}
.cd-circuit .gback{fill:none;stroke:var(--ink);stroke-width:2.5}
.cd-circuit .dot{fill:var(--ink)}
.cd-circuit .in-lbl{font-family:var(--font-display);font-weight:700;font-size:18px;fill:var(--ink)}
.cd-circuit .in-val{font-family:var(--font-mono);font-weight:700;font-size:15px}
.cd-circuit .in-val.v1{fill:var(--accent)}
.cd-circuit .in-val.v0{fill:var(--muted)}
.cd-circuit .gname{font-family:var(--font-mono);font-size:10px;font-weight:700;fill:var(--ink-soft);pointer-events:none}
.cd-circuit .val{font-family:var(--font-mono);font-size:13px;font-weight:700}
.cd-circuit .val.v1{fill:var(--accent-deep)}
.cd-circuit .val.v0{fill:var(--muted)}
.cd-circuit .valbg{fill:var(--paper)}
.cd-circuit .y-lbl{font-family:var(--font-display);font-weight:700;font-size:20px;fill:var(--ink)}
.cd-circuit .y-q{font-family:var(--font-mono);font-weight:700;font-size:20px;fill:var(--accent-b-deep)}

/* ---------- the Explanation (a scrolling dialog) ---------- */
.cd-h{margin:18px 0 8px;font:700 15px/1.2 var(--font-display);color:var(--accent-deep)}
.objective code{font-family:var(--font-mono);font-size:13px;background:var(--paper);border:1px solid var(--line);border-radius:3px;padding:1px 6px;color:var(--ink);white-space:nowrap}
.gate-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.gate-card{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:8px 10px}
.gate-card h3{margin:0 0 2px;font-family:var(--font-display);font-size:14px;color:var(--ink)}
.gate-card h3 span{font-family:var(--font-mono);font-weight:400;font-size:12px;color:var(--muted);margin-left:4px}
.gate-card svg{display:block;width:100%;height:54px}
.gate-card table{font-family:var(--font-mono);font-size:12px;margin-top:4px}
.gate-card th,.gate-card td{padding:1px 6px;text-align:center;border-bottom:1px solid var(--line)}
.gate-card td.y{font-weight:700;color:var(--accent-deep)}
.gate-card .adv{font-size:11px;color:var(--muted);font-family:var(--font-mono)}
.notation td{font-size:14px;padding:5px 8px}
.rtn-steps{margin:0;padding-left:22px;font-size:14.5px}
.rtn-steps li{margin-bottom:7px}
.rtn-steps li span{display:block;color:var(--ink-soft);font-size:13.5px}

/* ---------- smaller screens ---------- */
@media (max-width:900px),(max-height:560px){
  .board{min-height:240px}
}
@media (max-width:560px){
  .answer-btn{min-width:120px;padding:10px 20px}
}
@media (prefers-reduced-motion:reduce){.answer-btn{transition-duration:.001ms}}