/* The board shared by Number Slide (s-007) and Once Each (s-008).
   These two rooms keep the Spike Run look on both sites, so their styles live
   here rather than in either site's theme.

   `.synth-room` is the whole console — board *and* its buttons. It has to be,
   because the neon colours below are custom properties: a button sitting
   outside the element that declares them gets `color: var(--neon)` with no
   value, which the browser throws away. That is what made Once Each's size
   buttons unreadable — the pressed one kept `color: #05010f`, dark ink, while
   its neon background vanished, leaving dark-on-dark on William's site. Keep
   every neon control inside `.synth-room`. */

.synth-room {
  --neon: #35f3ff; --neon-2: #ff2bd6; --neon-3: #ffd319; --neon-ink: #f3e9ff;
  --on-neon: #05010f;          /* what reads on top of a --neon fill */
  --cell: rgb(255 255 255 / .05);
  --cell-edge: rgb(255 255 255 / .08);
  --clash: #ff6b6b;
  --ask: rgb(255 255 255 / .06);
  --board: linear-gradient(#12002b, #05010f);
  --board-shadow: 0 0 24px rgb(138 43 226 / .45);
  width: min(100%, 30rem); margin-inline: auto; padding: var(--space-4);
  background: var(--board);
  color: var(--neon-ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--board-shadow);
}

/* The same console with the lights on (ADR-0043). Both rooms that use this
   board are puzzles rather than arcade games — you sit with them, often for a
   while, and a glowing black rectangle is the wrong thing to sit with in a
   bright room. Every colour below is the dark one darkened until it reads on
   paper: white type on --neon at 4.9:1, and the clash red at 5.9:1. */
[data-theme="light"] .synth-room {
  --neon: #0e7490; --neon-2: #be185d; --neon-3: #8a4b00; --neon-ink: #17202e;
  --on-neon: #ffffff;
  --cell: rgb(23 32 46 / .05);
  --cell-edge: rgb(23 32 46 / .12);
  --clash: #c2281f;
  --ask: rgb(23 32 46 / .05);
  --board: linear-gradient(#ffffff, #eaeffa);
  --board-shadow: 0 0 0 1px #cdd6e6, 0 10px 26px rgb(31 41 68 / .10);
}
.synth { display: block; }
.synth-bar { display: flex; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); font-family: var(--font-mono); font-size: var(--step-0); }
/* grid-auto-rows: 1fr is load-bearing. The rows are implicit, so without it
   they size to their content — and an Once Each row where every square happens to
   be empty has no content at all, so it collapsed to half height and its cells
   fell under the 48px tap minimum. Which rows collapsed depended on the random
   puzzle, which is a lovely way to hide a bug. */
.synth-grid { display: grid; gap: 6px; aspect-ratio: 1; grid-auto-rows: 1fr; touch-action: none; }
.synth-cell {
  display: grid; place-items: center; border-radius: var(--radius);
  background: var(--cell); box-shadow: inset 0 0 0 1px var(--cell-edge);
  font: 700 clamp(1.1rem, 6.5vw, 2.1rem)/1 var(--font-display); color: var(--neon-ink);
}
.synth-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-top: var(--space-4); }
.synth-btn {
  min-height: var(--tap); padding: 0 var(--space-4); border: 0; border-radius: var(--radius);
  background: transparent; color: var(--neon); box-shadow: inset 0 0 0 2px var(--neon);
  font: 600 var(--step-0)/1 var(--font-ui); cursor: pointer; touch-action: manipulation;
}
.synth-btn:disabled { opacity: .4; }
.synth-status { min-height: 1.6em; margin: var(--space-3) 0 0; text-align: center; font-weight: 600; color: var(--neon-3); }

/* Number Slide */
.slide-pad { display: grid; grid-template-columns: repeat(3, var(--tap)); gap: var(--space-2); justify-content: center; margin-top: var(--space-4); }
.slide-pad .synth-btn { padding: 0; }
.slide-pad .up { grid-column: 2; }
.slide-pad .down { grid-column: 2; }

/* Once Each */
.once-cell { cursor: pointer; border: 0; font-family: var(--font-display); }
.once-cell.given { color: var(--neon); }
.once-cell.clash { color: var(--clash); }
.once-cell[aria-pressed="true"] { box-shadow: inset 0 0 0 3px var(--neon-3); }
.once-cell.edge-right { margin-right: 4px; }
.once-cell.edge-bottom { margin-bottom: 4px; }
.once-pad { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: var(--space-2) var(--space-1); margin-top: var(--space-4); }
/* Every number on one row where it fits: a 6×6's six used to wrap and leave
   the 6 on a row of its own. A 9×9 on a phone is two rows, five and four. */
.once-pad[data-n="6"] { --cols: 6; }
.once-pad[data-n="9"] { --cols: 5; }
@media (min-width: 40rem) { .once-pad[data-n="9"] { --cols: 9; } }
.once-pad .erase { grid-column: 1 / -1; }

/* Number Slide: a tile that just merged gives a little thump, a new tile fades
   in. Both are short on purpose — the board must never feel slow to swipe. */
@keyframes tile-pop { 0% { transform: scale(1); } 45% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes tile-in { from { transform: scale(.45); opacity: .25; } to { transform: scale(1); opacity: 1; } }
@keyframes score-bump { 0% { transform: scale(1); } 40% { transform: scale(1.15); color: var(--neon-3); } 100% { transform: scale(1); } }
.synth-cell.pop { animation: tile-pop .2s ease-out; }
.synth-cell.fresh { animation: tile-in .18s ease-out; }
.synth-bar span { display: inline-block; }
.synth-bar .bump { animation: score-bump .22s ease-out; }

/* Once Each: the board shrinks its own type and gaps as it gets bigger, so
   a 9x9 still fits a 390px phone. */
.synth-grid { --cells: 4; }
.once-cell { font-size: clamp(.75rem, calc(46vw / var(--cells)), 2rem); }
.synth-grid:has(.once-cell) { gap: clamp(2px, 1vw, 6px); }

/* Size and mode rows sit under the buttons, smaller and quieter than them. */
.synth-actions.sizes, .synth-actions.modes { margin-top: var(--space-2); gap: var(--space-2); }
.synth-btn.size, .synth-btn.mode { padding: 0 var(--space-3); }
.synth-btn.size[aria-pressed="true"],
.synth-btn.mode[aria-pressed="true"] { background: var(--neon); color: var(--on-neon); }

/* The clock, and the best time under the board. */
.synth-clock { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.synth-clock b { color: var(--neon-3); font-weight: 700; }
.synth-note { margin: var(--space-3) 0 0; text-align: center; font-size: var(--step--1); color: var(--neon-ink); opacity: .75; }

/* Switching to Race throws the current board away, so it asks first. Inline
   rather than a browser confirm(): it can be translated and read aloud. */
.synth-ask { margin-top: var(--space-3); padding: var(--space-3); border-radius: var(--radius); background: var(--ask); }
.synth-ask p { margin: 0 0 var(--space-3); font-size: var(--step--1); color: var(--neon-ink); }
.synth-ask .synth-actions { margin-top: 0; }