/* Parity Check (computer-science/parity-check.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: the settings on the left, the high scores on the right. In a game:
   the HUD, then the challenge in the middle of the space that's left. Every colour is a theme token. */

/* ---------- before a game ---------- */
.inst{font-size:15px;color:var(--ink-soft)}
.inst p{margin:0 0 10px}
.inst ul{margin:0 0 10px;padding-left:20px}
.inst li{margin-bottom:6px}
.inst strong{color:var(--ink)}

/* ---------- the Explanation ---------- */
.pc-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);letter-spacing:.08em}

/* ---------- the game ---------- */
.stage:fullscreen{overflow:auto}
.ov-chip{position:relative}
.ov-chip b{font-size:14px}
.time-float{position:absolute;left:100%;top:50%;margin:-9px 0 0 6px;font:700 13px/18px var(--font-mono);opacity:0;transition:opacity .25s ease,transform .25s ease;pointer-events:none;white-space:nowrap}
.time-float.pos{color:var(--ok);transform:translateY(-6px);opacity:1}
.time-float.neg{color:var(--bad);transform:translateY(6px);opacity:1}

.game-area{flex:1;min-height:0;overflow:auto;margin-top:10px;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:18px;display:flex;flex-direction:column;align-items:center;justify-content:safe center;gap:10px}
.challenge-area{display:flex;flex-direction:column;align-items:center;gap:14px}
.challenge-area[hidden]{display:none}
.parity-instruction{font-size:17px;color:var(--ink-soft)}
.req-word{font-family:var(--font-mono);padding:4px 14px;border-radius:999px;background:var(--accent-tint);color:var(--accent-deep);font-size:16px}
.req-word.odd{background:var(--accent-b-tint);color:var(--accent-b-deep)}

/* Simple Parity: seven bits, a plus, the parity bit */
.bitstream-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center}
.bitstream{display:flex;gap:8px}
.bit-static{width:54px;height:62px;display:grid;place-items:center;font:700 30px/1 var(--font-mono);color:var(--ink);background:var(--panel);border:1.5px solid var(--line-strong);border-radius:8px}
.bitstream-plus{font-family:var(--font-mono);font-size:26px;color:var(--muted)}
.parity-slot{width:62px;height:70px;display:grid;place-items:center;font:700 32px/1 var(--font-mono);color:var(--accent-deep);background:var(--accent-tint);border:2px dashed var(--accent);border-radius:8px}
.parity-slot.filled{border-style:solid}
.parity-slot.correct{border-color:var(--ok);background:var(--ok-tint);color:var(--ok)}
.parity-slot.incorrect{border-color:var(--bad);background:var(--bad-tint);color:var(--bad)}
.choice-row{display:flex;align-items:center;gap:14px}
.choice-label{font-size:16px;color:var(--ink-soft)}
.choice-keys{font-size:13px;color:var(--muted)}
@media (hover:none){.choice-keys{display:none}}
.choice-btn{width:96px;height:64px;font:700 30px/1 var(--font-mono);border-radius:8px;border:2px solid var(--line-strong);background:var(--panel);color:var(--ink);cursor:pointer;transition:border-color .1s,background .1s}
.choice-btn:hover:not(:disabled){border-color:var(--accent);background:var(--accent-tint);color:var(--accent-deep)}
.choice-btn:disabled{cursor:default;opacity:.55}
.choice-btn.chosen-correct{border-color:var(--ok);background:var(--ok-tint);color:var(--ok);opacity:1}
.choice-btn.chosen-incorrect{border-color:var(--bad);background:var(--bad-tint);color:var(--bad);opacity:1}

/* Parity Block: the data, the row parity bits (last column), the column parity bits (last row) and the corner */
.block-scroll{max-width:100%;overflow:auto}
table.parity-grid{border-collapse:collapse;font-family:var(--font-mono);width:auto}
table.parity-grid td{padding:0;border:1px solid var(--line);text-align:center}
.cell-bit{width:36px;height:36px;border:0;background:var(--panel);color:var(--ink);font:700 18px/1 var(--font-mono);cursor:pointer}
.cell-bit:hover:not(:disabled){background:var(--accent-tint);color:var(--accent-deep)}
.cell-bit:disabled{cursor:default}
td.rowparity .cell-bit,td.colparity .cell-bit{background:var(--accent-b-tint);color:var(--accent-b-deep)}
td.corner .cell-bit{background:var(--accent-tint);color:var(--accent-deep)}
table.parity-grid tr td:nth-child(7){border-right:2px solid var(--line-strong)}
table.parity-grid tr:nth-child(7) td{border-bottom:2px solid var(--line-strong)}
table.parity-grid td.rowcheck-slot,table.parity-grid td.colcheck-slot,table.parity-grid tr:last-child td{border:0;width:30px;height:28px}
.rowcheck-cell,.colcheck-cell{font-family:var(--font-body);font-size:16px;font-weight:700}
.rowcheck-cell.pass,.colcheck-cell.pass{color:var(--ok)}
.rowcheck-cell.fail,.colcheck-cell.fail{color:var(--bad)}
.block-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center}
.btn-reject{border-color:var(--bad);color:var(--bad)}
.btn-reject:hover:not(:disabled){background:var(--bad-tint);border-color:var(--bad);color:var(--bad)}
.block-hint{font-size:13px;color:var(--muted)}

.feedback{min-height:44px;border-radius:6px;padding:10px 16px;font-weight:600;font-size:14px;text-align:center}
.feedback.hidden{visibility:hidden}
.feedback.ok{background:var(--ok-tint);color:var(--ok);border:1px solid var(--ok)}
.feedback.err{background:var(--bad-tint);color:var(--bad);border:1px solid var(--bad)}

/* ---------- smaller screens: stack, and let the page scroll ---------- */
@media (max-width:900px),(max-height:560px){
  .game-area{flex:none}
}
@media (max-width:560px){
  .bit-static{width:36px;height:46px;font-size:22px}
  .parity-slot{width:44px;height:52px;font-size:24px}
  .bitstream{gap:5px}
  .cell-bit{width:30px;height:30px;font-size:15px}
}
@media (prefers-reduced-motion:reduce){.time-float,.choice-btn{transition:none}}