/* Pixel Painter (computer-science/pixel-painter.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: what to do on the left, the high scores on the right. In a game: the HUD,
   the two grids (drawn on a canvas in theme colours) filling the space that's left, then the row being
   typed, the feedback and the keypad. Every colour is a theme token; the pixels' own four colours are
   --px-W/B/R/G, which the canvas reads too. */

/* the pixels' own colours: white, black, red and green, the same in both modes */
:root{--px-W:var(--screen-ink);--px-B:var(--screen-panel);--px-R:var(--neon-red);--px-G:var(--neon-green)}
.px-W{background:var(--px-W)}
.px-B{background:var(--px-B)}
.px-R{background:var(--px-R)}
.px-G{background:var(--px-G)}

/* ---------- before a game ---------- */
.setup{grid-template-columns:minmax(0,1fr) minmax(260px,380px)}
.inst{font-size:15px;color:var(--ink-soft)}
.inst p{margin:0 0 10px}
.inst code,.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:.04em}
.setup-sample{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.sample-px{display:inline-flex;border:2px solid var(--line-strong);border-radius:4px;overflow:hidden}
.sample-px i{width:30px;height:30px;border-right:1px solid var(--line-strong)}
.sample-px i:last-child{border-right:0}
.sample-arrow{font:700 22px/1 var(--font-mono);color:var(--muted)}
.sample-rle{font:700 20px/1 var(--font-mono);color:var(--accent-deep);background:var(--accent-tint);border-radius:5px;padding:8px 12px;letter-spacing:.05em}
.setup-boards{min-width:0}
.lb-header{display:flex;align-items:center;justify-content:space-between;gap:8px}
.group-label{line-height:1.3}
.leaderboard-panel{padding:8px 12px}
.lb-table{width:100%;border-collapse:collapse;font-size:13px}
.lb-table th{font:600 10.5px/1.2 var(--font-mono);letter-spacing:.06em;color:var(--muted);padding:4px 4px 6px;border-bottom:1px solid var(--line)}
.lb-table td{padding:4px;border:none;color:var(--ink-soft)}
.lb-table .rank{color:var(--muted);width:24px}
.lb-table .name{color:var(--accent-deep);font-weight:700;letter-spacing:1px}
.lb-table .score{text-align:right;font-weight:700;color:var(--ink)}
.lb-table th:nth-child(3){text-align:right}
.lb-table .lb-date{text-align:right;font-size:11px;color:var(--muted)}
.lb-table.rejected .name,.lb-table.rejected .score{color:var(--muted)}
.lb-empty{color:var(--muted);text-align:center}

/* ---------- the Explanation ---------- */
.pp-h{margin:18px 0 8px;font:700 15px/1.2 var(--font-display);color:var(--accent-deep)}

/* ---------- the game ---------- */
.stage{gap:8px;padding:10px 14px 12px}
.hud{flex-wrap:nowrap}
.ov-chip{white-space:nowrap}
.ov-chip b{font-size:14px}
.time-chip.urgent{border-color:var(--bad);background:var(--bad-tint)}
.time-chip.urgent b{color:var(--bad)}
.icon-btn{width:28px;height:28px}

.board{flex:1;min-height:180px;position:relative;background:var(--paper);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.board canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

.entry{flex:none;display:flex;flex-direction:column;gap:6px}
.buffer-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--paper);border:1px solid var(--line-strong);border-radius:6px;padding:6px 12px;min-height:42px}
.buffer-label{font:600 11px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.buffer-label b{color:var(--ink)}
.buffer-text{flex:1;min-width:6ch;font:700 18px/1.2 var(--font-mono);color:var(--accent-deep);letter-spacing:.05em;overflow-wrap:anywhere}
.buffer-pixels{display:flex;gap:2px}
.buffer-pixels i{width:14px;height:14px;border-radius:2px;border:1px solid var(--line-strong);background:var(--panel-2)}
.buffer-pixels.size-16 i{width:9px;height:12px}
.buffer-pixels i.px-W{background:var(--px-W)}
.buffer-pixels i.px-B{background:var(--px-B)}
.buffer-pixels i.px-R{background:var(--px-R)}
.buffer-pixels i.px-G{background:var(--px-G)}
.feedback{min-height:22px;font-size:13.5px;font-weight:600;color:var(--ink-soft);text-align:center}
.feedback.ok{color:var(--ok)}
.feedback.err{color:var(--bad)}
.feedback.warn{color:var(--hint)}

.keypad{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:6px}
.keypad.keys-4{grid-template-columns:repeat(15,minmax(0,1fr))}
.key-btn{font:700 17px/1 var(--font-mono);min-height:44px;border-radius:6px;border:1.5px solid var(--line-strong);background:var(--paper);color:var(--ink);cursor:pointer;touch-action:manipulation;user-select:none}
.key-btn:hover{border-color:var(--accent);color:var(--accent-deep)}
.key-btn:active{transform:translateY(1px)}
.key-btn:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.key-btn.btn-color{color:var(--px-W);border-color:var(--line-strong)}
.key-btn.btn-color.px-W{background:var(--px-W);color:var(--px-B)}
.key-btn.btn-color.px-B{background:var(--px-B)}
.key-btn.btn-color.px-R{background:var(--px-R)}
.key-btn.btn-color.px-G{background:var(--px-G)}
.key-btn.btn-color:hover{filter:brightness(1.1);color:var(--px-W);border-color:var(--accent)}
.key-btn.btn-color.px-W:hover{color:var(--px-B)}
.key-btn.btn-action{background:var(--panel-2);color:var(--ink-soft)}

/* game over */
.stage-overlay{background:color-mix(in srgb,var(--screen-bg) 92%,transparent)}
.stage-overlay .go-stats{font-family:var(--font-mono);font-size:12.5px}
.submit-status{min-height:1em}

/* ---------- smaller screens: stack, and let the page scroll ---------- */
@media (max-width:900px),(max-height:560px){
  .setup{grid-template-columns:1fr}
  .stage{flex:none}
  .board{flex:none;height:min(78vh,620px)}
}
@media (max-width:640px){
  .setup{padding:18px 16px}
  .stage{padding:8px}
  .hud .ov-chip{font-size:10.5px;padding:3px 6px}
  .hud .mode-chip{display:none}   /* the title bar's toggles show the mode, and the HUD stays on one line */
  .hud .ov-chip b{font-size:13px}
  /* the HUD, both grids, the row and the keypad on one phone screen (below the sticky header) */
  .stage{scroll-margin-top:66px}
  .board{height:max(230px,calc(100vh - 390px));height:max(230px,calc(100dvh - 390px))}
  /* the keypad: digits in one row of five and one of five, then the colours and delete */
  .keypad,.keypad.keys-4{grid-template-columns:repeat(5,minmax(0,1fr))}
  .keypad .btn-color,.keypad .btn-action{grid-column:span 1}
  .keypad.keys-2 .btn-color{grid-column:span 2}
  .key-btn{min-height:46px;font-size:18px}
  .sample-px i{width:24px;height:24px}
  .buffer-text{font-size:16px}
}
@media (prefers-reduced-motion:reduce){.key-btn:active{transform:none}}