/* The game stage (Michael, Oct 27, 2026, option C): while a puzzle is being
   played, the page is a soft gradient tinted by the day's scene
   (--sa-game-bg in design.css), with a full-width deep-green band holding the
   puzzle name, the gold Hint chip and Actions. Boards are white in a green
   frame with bold ink letters; keys are flat. One state rule in every game:
   gold = choosing now (with a green edge on paper), deep green = found,
   rose/red = wrong, pale sage = related. Results pages (.puzzle-finished)
   keep their own look. Every text passes 4.5:1 and every key, tile and box
   edge 3:1 against the darkest end of each gradient. */
body:is([data-view=search],[data-view=sudoku],[data-view=cross],[data-view=scramble],[data-view=groups],[data-view=maze]):not(.puzzle-finished) {
  --g-band:var(--sa-green); --g-on-band:var(--sa-surface); --g-on-band-soft:#d9e5cc;
  --g-board:var(--sa-surface); --g-ink:var(--sa-ink); --g-muted:#4a5a4f; --g-link:#2c5c48;
  --g-gold:var(--sa-gold); --g-gold-edge:#a8791c; --g-frame:var(--sa-green); --g-found:#2c5c48;
  --g-sage:var(--sa-sage); --g-line:#b9c4ad; --g-board-shadow:0 0 0 2px var(--g-frame),0 6px 14px -8px #1f443666;
  min-height:100vh; min-height:100dvh; color:var(--g-ink);
  background-color:#fffaf0; background-image:var(--sa-game-bg);
}
body:is([data-view=search],[data-view=sudoku],[data-view=cross],[data-view=scramble],[data-view=groups],[data-view=maze]):not(.puzzle-finished) main { color:var(--g-ink); background:transparent; }
body:is([data-view=search],[data-view=sudoku],[data-view=cross],[data-view=scramble],[data-view=groups],[data-view=maze]):not(.puzzle-finished) :is(.game-play,.groups-board) { color:var(--g-ink); background:transparent; border-color:transparent; box-shadow:none; }

/* The band runs the full width of the screen. */
body:is([data-view=search],[data-view=sudoku],[data-view=cross],[data-view=scramble],[data-view=groups],[data-view=maze]):not(.puzzle-finished) :is(.game-heading,.game-top) { background:var(--g-band); color:var(--g-on-band); border-color:transparent; box-shadow:none; border-image:conic-gradient(var(--g-band) 0 0) fill 0 / 0 / 0 100vmax; }
body:is([data-view=search],[data-view=sudoku],[data-view=cross],[data-view=scramble],[data-view=groups],[data-view=maze]):not(.puzzle-finished) .game-heading { padding-block:8px; margin-bottom:10px; }
body:is([data-view=search],[data-view=sudoku],[data-view=cross],[data-view=scramble],[data-view=groups],[data-view=maze]):not(.puzzle-finished) .game-top { margin-bottom:0; }
body:is([data-view=search],[data-view=sudoku],[data-view=cross],[data-view=scramble],[data-view=groups],[data-view=maze]):not(.puzzle-finished) .game-heading :is(h1,h1 *,p,.subtitle,small) { color:var(--g-on-band); }
body:is([data-view=search],[data-view=sudoku],[data-view=cross],[data-view=scramble],[data-view=groups],[data-view=maze]):not(.puzzle-finished) .game-heading .game-title-icon,
body:is([data-view=search],[data-view=sudoku],[data-view=cross],[data-view=scramble],[data-view=groups],[data-view=maze]):not(.puzzle-finished) .game-heading .game-title-icon * { color:var(--g-ink); }
body:is([data-view=search],[data-view=sudoku],[data-view=cross],[data-view=scramble],[data-view=groups],[data-view=maze]):not(.puzzle-finished) main .game-top :is(a,button.plain,#next-game):not(.button) { color:var(--g-on-band-soft); }
body:is([data-view=search],[data-view=sudoku],[data-view=cross],[data-view=scramble],[data-view=groups],[data-view=maze]):not(.puzzle-finished) .game-heading #use-boost.boost-chip { background:var(--g-gold); border-color:var(--g-gold); color:var(--g-ink); box-shadow:0 2px 0 #0c2219; }
body:is([data-view=search],[data-view=sudoku],[data-view=cross],[data-view=scramble],[data-view=groups],[data-view=maze]):not(.puzzle-finished) .game-heading .play-tools>summary { background:transparent; border-color:#c9d8ba; color:var(--g-on-band); box-shadow:inset 0 0 0 1px #c9d8ba; }
/* Keyboard focus on the band is a gold ring; elsewhere the brown ring from contrast.css stays. */
body:is([data-view=search],[data-view=sudoku],[data-view=cross],[data-view=scramble],[data-view=groups],[data-view=maze]):not(.puzzle-finished) :is(.game-heading,.game-top) :focus-visible:not(.play-tools>div *) { outline-color:var(--g-gold); }
/* Text on the page. */
body:is([data-view=search],[data-view=sudoku],[data-view=cross],[data-view=scramble],[data-view=groups],[data-view=maze]):not(.puzzle-finished) :is(.subtitle,.play-instruction,.boost-intro,.board-caption,.cross-pan-note,.word-bank-swipe,.search-count,.search-keepsakes) { color:var(--g-muted); }
body:is([data-view=search],[data-view=sudoku],[data-view=cross],[data-view=scramble],[data-view=groups],[data-view=maze]):not(.puzzle-finished) :is(.play-instruction>span,.search-live,.search-live strong,.maze-view-controls,.search-keepsake) { color:var(--g-ink); }
body:is([data-view=search],[data-view=sudoku],[data-view=cross],[data-view=scramble],[data-view=groups],[data-view=maze]):not(.puzzle-finished) main :is(button.plain,a):not(.button) { color:var(--g-link); }
body:is([data-view=search],[data-view=sudoku],[data-view=cross],[data-view=scramble],[data-view=groups],[data-view=maze]):not(.puzzle-finished) .status:not(:empty) { background:var(--g-board); color:var(--g-ink); border:0; box-shadow:inset 0 0 0 1.5px var(--g-line); font-size:max(17px,1rem); font-weight:600; }
body:is([data-view=search],[data-view=sudoku],[data-view=cross],[data-view=scramble],[data-view=groups],[data-view=maze]):not(.puzzle-finished) .status.success:not(:empty) { background:#e3efd6; box-shadow:inset 0 0 0 1.5px var(--g-sage); }
body:is([data-view=search],[data-view=sudoku],[data-view=cross],[data-view=scramble],[data-view=groups],[data-view=maze]):not(.puzzle-finished) .status.error:not(:empty) { background:var(--sa-rose); color:#6e1f14; box-shadow:inset 0 0 0 1.5px var(--sa-red); }
/* On tablets and desktops the "Stuck? Tap Hint" tip matches the instruction
   above it (phones set 15px in fit.css), and the chip's "Hint" word is 15px
   too, since it says what the chip does. */
@media (min-width:760px) {
  body:is([data-view=search],[data-view=sudoku],[data-view=cross],[data-view=scramble],[data-view=groups],[data-view=maze]):not(.puzzle-finished) .play-instruction>.boost-intro { font-size:15px; line-height:1.3; }
  body:is([data-view=search],[data-view=sudoku],[data-view=cross],[data-view=scramble],[data-view=groups],[data-view=maze]):not(.puzzle-finished) .game-heading #use-boost .boost-chip-label { font-size:15px; }
}
/* On phones the instruction sits in the message bar at the bottom (fit.css).
   Common Ground's name matches the other games' 23px (consistency.css scaled it
   with the screen width), and Word search's swipe hint is 14px. */
@media (max-width:759px) {
  body:is([data-view=search],[data-view=sudoku],[data-view=cross],[data-view=scramble],[data-view=groups],[data-view=maze]):not(.puzzle-finished) main>.play-instruction { background:var(--g-board); border-radius:10px; box-shadow:inset 0 0 0 1px var(--g-line); border-left:5px solid var(--g-gold); }
  body[data-view=groups]:not(.puzzle-finished) .game-heading h1 { font-size:23px; }
  body[data-view=search]:not(.puzzle-finished) .board-wrap>.word-bank-swipe { font-size:14px; }
}
/* Short phones: the band gives back the space it takes, so every game still fits one screen. */
@media (max-width:759px) and (max-height:700px) {
  body:is([data-view=search],[data-view=sudoku],[data-view=cross],[data-view=scramble],[data-view=groups],[data-view=maze]):not(.puzzle-finished) .game-heading { padding-block:2px; margin-bottom:2px; }
}
/* Narrow phones: the Hint chip puts its label over the count, so a long count
   such as "earn a Boost" never covers the puzzle name. */
@media (max-width:380px) {
  body:is([data-view=search],[data-view=sudoku],[data-view=cross],[data-view=scramble],[data-view=groups],[data-view=maze]):not(.puzzle-finished) .game-heading #use-boost.boost-chip { flex-direction:column; justify-content:center; gap:0; padding-block:2px!important; line-height:1.05; }
  body:is([data-view=search],[data-view=sudoku],[data-view=cross],[data-view=scramble],[data-view=groups],[data-view=maze]):not(.puzzle-finished) .game-heading #use-boost .boost-chip-dot { display:none; }
}
@media (max-width:340px) {
  body:is([data-view=search],[data-view=sudoku],[data-view=cross],[data-view=scramble],[data-view=groups],[data-view=maze]):not(.puzzle-finished) .game-heading h1 { font-size:16px; }
}

/* Buttons: toolbar buttons (Clear, Undo, Direction...) are the kit's secondary,
   like the Actions menu and every page, at their own game sizes; the main
   action (Check word, Check group) is the kit's deep-green primary, since gold
   means "choosing now"; a toggle that is on (Pencil notes, Fit board) is deep
   green with gold text. */
body:is([data-view=search],[data-view=sudoku],[data-view=cross],[data-view=scramble],[data-view=groups],[data-view=maze]):not(.puzzle-finished) .game-play .button:not(:disabled) { background:var(--sa-surface); color:var(--sa-green); border:2px solid var(--sa-sage); box-shadow:none; font-weight:600; }
body:is([data-view=search],[data-view=sudoku],[data-view=cross],[data-view=scramble],[data-view=groups],[data-view=maze]):not(.puzzle-finished) .game-play .button:not(:disabled):not(.primary):not([aria-pressed=true]):hover { background:#f1f4ea; border-color:var(--sa-green); color:var(--sa-green); }
body:is([data-view=search],[data-view=sudoku],[data-view=cross],[data-view=scramble],[data-view=groups],[data-view=maze]):not(.puzzle-finished) .game-play .button.primary:not(:disabled) { background:var(--sa-clay); border:2px solid var(--sa-clay); color:var(--sa-surface); box-shadow:0 3px 0 var(--sa-clay-dark); font-weight:600; }
body:is([data-view=search],[data-view=sudoku],[data-view=cross],[data-view=scramble],[data-view=groups],[data-view=maze]):not(.puzzle-finished) .game-play .button.primary:not(:disabled):hover { background:var(--sa-clay-dark); border-color:var(--sa-clay-dark); color:var(--sa-surface); }
body:is([data-view=search],[data-view=sudoku],[data-view=cross],[data-view=scramble],[data-view=groups],[data-view=maze]):not(.puzzle-finished) .game-play .button:disabled { background:#ecebe3; color:#5b6158; border:0; box-shadow:inset 0 0 0 1px #b4b8ad; }
body:is([data-view=search],[data-view=sudoku],[data-view=cross],[data-view=scramble],[data-view=groups],[data-view=maze]):not(.puzzle-finished) .game-play .button[aria-pressed=true]:not(:disabled) { background:var(--g-band); border-color:var(--g-band); color:var(--g-gold); }
body:is([data-view=search],[data-view=sudoku],[data-view=cross],[data-view=scramble],[data-view=groups],[data-view=maze]):not(.puzzle-finished) .game-play :is(.button,.number-pad button,.cross-keyboard button,.maze-pad button,.group-tile,.scramble-letters button):not(:disabled):active { transform:translateY(2px); box-shadow:0 0 0 var(--g-frame); }

/* Keys (Sudoku, crossword, maze): flat white, a 1.5px sage edge and a 2px
   bottom edge; gold only while pressed. */
body:is([data-view=search],[data-view=sudoku],[data-view=cross],[data-view=scramble],[data-view=groups],[data-view=maze]):not(.puzzle-finished) :is(.number-pad button,.cross-keyboard button,.maze-pad button) { background:#fff; color:var(--g-ink); border:1.5px solid var(--g-sage); border-radius:10px; box-shadow:0 2px 0 var(--g-sage); font-weight:800; }
body:is([data-view=search],[data-view=sudoku],[data-view=cross],[data-view=scramble],[data-view=groups],[data-view=maze]):not(.puzzle-finished) :is(.number-pad button,.cross-keyboard button,.maze-pad button):is(:active,[aria-pressed=true]) { background:var(--g-gold); border-color:var(--g-frame); }

/* Word search */
body[data-view=search]:not(.puzzle-finished) .search-grid { background:var(--g-board); border-color:var(--g-frame); box-shadow:var(--g-board-shadow); }
body[data-view=search]:not(.puzzle-finished) .search-cell { color:var(--g-ink); font-weight:800; }
body[data-view=search]:not(.puzzle-finished) .search-cell.found:not(.selecting) { background:var(--g-found); color:var(--g-on-band); }
/* The pick being made is gold with a green edge; once it spells a word it
   keeps its pale green, with the same edge. */
body[data-view=search]:not(.puzzle-finished) .search-cell.selecting { background:var(--g-gold); color:var(--g-ink); box-shadow:inset 0 0 0 2px var(--g-frame); }
body[data-view=search]:not(.puzzle-finished) .search-cell.selecting.ready { background:#b9d9a4; }
body[data-view=search]:not(.puzzle-finished) .word-list li { background:#fff; color:var(--g-ink); border:1.5px solid var(--g-frame); box-shadow:none; font-weight:800; }
body[data-view=search]:not(.puzzle-finished) .word-list li.found { background:var(--g-band); border-color:var(--g-band); color:var(--g-on-band); }

/* Sudoku: the cells keep the gold, sage and rose states from the earlier sheets. */
body[data-view=sudoku]:not(.puzzle-finished) .sudoku-grid { background:var(--g-frame); box-shadow:var(--g-board-shadow); }
body[data-view=sudoku]:not(.puzzle-finished) .sudoku-cell { font-weight:700; }
body[data-view=sudoku]:not(.puzzle-finished) .sudoku-cell.given { font-weight:800; }
body[data-view=sudoku]:not(.puzzle-finished) .number-pad button { font-size:22px; }
/* Erase is a plain key too (contrast.css paints it pale gold by ID), and turns
   gold while pressed like the number keys, without the toolbar buttons' look. */
body[data-view=sudoku]:not(.puzzle-finished) .number-pad #erase:not(:active):not([aria-pressed=true]) { background:#fff; border:1.5px solid var(--g-sage); box-shadow:0 2px 0 var(--g-sage); color:var(--g-ink); font-weight:800; }
body[data-view=sudoku]:not(.puzzle-finished) .number-pad #erase:active { background:var(--g-gold); border:1.5px solid var(--g-frame); color:var(--g-ink); font-weight:800; }

/* Crossword */
body[data-view=cross]:not(.puzzle-finished) .current-clue { background:var(--g-board); color:var(--g-ink); border:0; border-left:6px solid var(--g-gold); box-shadow:inset 0 0 0 1.5px var(--g-line); font-weight:600; }
body[data-view=cross]:not(.puzzle-finished) .cross-grid { background:var(--g-band); border-color:var(--g-band); box-shadow:0 0 0 2px var(--g-band),0 6px 14px -8px #1f443666; }
body[data-view=cross]:not(.puzzle-finished) .cross-cell.block { background:var(--g-band); }
body[data-view=cross]:not(.puzzle-finished) .cross-cell:not(.block) input { font-weight:700; }
body[data-view=cross]:not(.puzzle-finished) .cross-board-viewport { background:transparent; }
/* The state rule on the grid: the typing square stays gold, now with a green
   edge; the rest of its word is pale sage (related), as in Sudoku. A solved
   square is neither: deep-green letters on white with a deep-green bar under
   them, since the blocks are already deep green. */
body[data-view=cross]:not(.puzzle-finished) .cross-cell.active-word:not(.selected) { background:#e2e9d7; box-shadow:none; }
body[data-view=cross]:not(.puzzle-finished) .cross-cell.selected { box-shadow:inset 0 0 0 2px var(--g-frame); }
/* A typing square's box always shows focus; make that ring the same green
   edge instead of the brown one used elsewhere. */
body[data-view=cross]:not(.puzzle-finished) .cross-cell input:focus-visible { outline:2px solid var(--g-frame); outline-offset:-2px; }
body[data-view=cross]:not(.puzzle-finished) .cross-cell.solved:not(.selected):not(.active-word) { background:var(--g-board); }
body[data-view=cross]:not(.puzzle-finished) .cross-cell.solved:not(.selected) { box-shadow:inset 0 -3px 0 var(--g-found); }
body[data-view=cross]:not(.puzzle-finished) .cross-cell.solved:not(.selected) input { color:var(--g-found); }
body:is([data-view=search],[data-view=sudoku],[data-view=cross],[data-view=scramble],[data-view=groups],[data-view=maze]):not(.puzzle-finished) .all-clues { background:var(--g-board); color:var(--g-ink); border-radius:14px; padding:4px 12px; box-shadow:inset 0 0 0 1.5px var(--g-line); }
body:is([data-view=search],[data-view=sudoku],[data-view=cross],[data-view=scramble],[data-view=groups],[data-view=maze]):not(.puzzle-finished) .all-clues .clue { color:var(--g-ink); }
body:is([data-view=search],[data-view=sudoku],[data-view=cross],[data-view=scramble],[data-view=groups],[data-view=maze]):not(.puzzle-finished) .clue.active { background:#fbe7b0; box-shadow:inset 4px 0 0 var(--g-gold-edge); }

/* Common Ground */
body[data-view=groups]:not(.puzzle-finished) .group-tile { background:#fff; color:var(--g-ink); border:1.5px solid var(--g-sage); border-radius:12px; box-shadow:0 3px 0 var(--g-sage); font-weight:800; }
/* Each word gets the largest size that fits its tile on one line (--chars is set per tile). */
body[data-view=groups]:not(.puzzle-finished) .group-tile { font-size:clamp(13px,calc(((min(100vw - 12px,560px) - 15px) / 4 - 8px) / (var(--chars,6) * .8)),21px); }
body[data-view=groups]:not(.puzzle-finished) .group-tile.selected { background:var(--g-gold); color:var(--g-ink); border:2px solid var(--g-band); box-shadow:0 4px 0 var(--g-band); }
/* A found group is deep green with cream text, like a found word in Word search. */
body[data-view=groups]:not(.puzzle-finished) .group-field .solved-group { background:var(--g-found); border-color:var(--g-found); color:var(--g-on-band); }
body[data-view=groups]:not(.puzzle-finished) .group-field .solved-group :is(strong,span) { color:var(--g-on-band); }

/* Word scramble: no separate card; the letters sit on the page gradient. The
   answer box and the empty progress steps take the sage edge to stay at 3:1. */
body[data-view=scramble]:not(.puzzle-finished) .scramble-wrap { background:transparent; border-color:transparent; box-shadow:none; color:var(--g-ink); }
body[data-view=scramble]:not(.puzzle-finished) .scramble-wrap :is(.scramble-clue,.scramble-counter,.answer-label) { color:var(--g-ink); }
body[data-view=scramble]:not(.puzzle-finished) .scramble-letters button:not(:disabled) { background:#fff; color:var(--g-ink); border:1.5px solid var(--g-frame); border-radius:12px; box-shadow:0 3px 0 var(--g-frame); font-size:24px; font-weight:800; min-height:56px; }
body[data-view=scramble]:not(.puzzle-finished) .scramble-letters button:disabled { min-height:56px; font-size:24px; }
/* The tiles share the row, so a long word still fits a small phone; with 9
   or more letters the letters shrink with the tiles. */
body[data-view=scramble]:not(.puzzle-finished) .scramble-letters { container-type:inline-size; }
body[data-view=scramble]:not(.puzzle-finished) .scramble-letters button { flex:1 1 0; min-width:0; max-width:56px; }
body[data-view=scramble]:not(.puzzle-finished) .scramble-letters:has(>button:nth-child(9)) { --n:9; }
body[data-view=scramble]:not(.puzzle-finished) .scramble-letters:has(>button:nth-child(10)) { --n:10; }
body[data-view=scramble]:not(.puzzle-finished) .scramble-letters:has(>button:nth-child(11)) { --n:11; }
body[data-view=scramble]:not(.puzzle-finished) .scramble-letters:has(>button:nth-child(12)) { --n:12; }
body[data-view=scramble]:not(.puzzle-finished) .scramble-letters:has(>button:nth-child(13)) { --n:13; }
body[data-view=scramble]:not(.puzzle-finished) .scramble-letters:has(>button:nth-child(14)) { --n:14; }
body[data-view=scramble]:not(.puzzle-finished) .scramble-letters:has(>button:nth-child(15)) { --n:15; }
body[data-view=scramble]:not(.puzzle-finished) .scramble-letters:has(>button:nth-child(9)) button { font-size:min(24px,calc((100cqw - (var(--n) - 1) * 5px) / var(--n) * .72)); }
body[data-view=scramble]:not(.puzzle-finished) .answer-form input { border-color:var(--g-sage); }
body[data-view=scramble]:not(.puzzle-finished) .round-progress span:not(.done) { background:transparent; box-shadow:inset 0 0 0 1.5px var(--g-sage); }

/* Maze */
body[data-view=maze]:not(.puzzle-finished) .maze-viewport { background:var(--g-board); border-color:var(--g-frame); box-shadow:var(--g-board-shadow); }
body[data-view=maze]:not(.puzzle-finished) .maze-view-controls .button { background:var(--sa-surface); color:var(--sa-green); border:2px solid var(--sa-sage); box-shadow:none; font-weight:600; }

/* Wide screens: the footer and side notes sit on the page. */
body:is([data-view=search],[data-view=sudoku],[data-view=cross],[data-view=scramble],[data-view=groups],[data-view=maze]):not(.puzzle-finished) :is(.compact-footer,.compact-footer :is(a,summary,p,span,button)) { color:var(--g-muted); border-color:var(--g-line); }
body:is([data-view=search],[data-view=sudoku],[data-view=cross],[data-view=scramble],[data-view=groups],[data-view=maze]):not(.puzzle-finished) .side-note { background:var(--g-board); color:var(--g-ink); border:0; border-radius:16px; box-shadow:inset 0 0 0 1.5px var(--g-line); }
body:is([data-view=search],[data-view=sudoku],[data-view=cross],[data-view=scramble],[data-view=groups],[data-view=maze]):not(.puzzle-finished) .side-note :is(h2,p) { color:var(--g-ink); }

/* Desktop: the game in the middle with its helpers either side, so every board
   starts near the top of the screen. The side columns can host ads later,
   under the no-ad-before-the-first-puzzle rule. */
@media (min-width:1000px) {
  body:is([data-view=search],[data-view=sudoku],[data-view=cross],[data-view=scramble],[data-view=groups],[data-view=maze]):not(.puzzle-finished) main>.subtitle { display:none; }
  body:is([data-view=search],[data-view=sudoku],[data-view=cross],[data-view=scramble],[data-view=groups],[data-view=maze]):not(.puzzle-finished) main { padding-top:0; margin-top:0; }
  body:is([data-view=search],[data-view=sudoku],[data-view=cross],[data-view=scramble],[data-view=groups],[data-view=maze]):not(.puzzle-finished) .game-top { margin:0; padding-top:6px; }
  body:is([data-view=search],[data-view=sudoku],[data-view=cross],[data-view=scramble],[data-view=groups],[data-view=maze]):not(.puzzle-finished) .game-heading { margin-top:0; }
  /* Boards shrink on short laptop windows so the whole board shows without
     scrolling (DESIGN.md: the main action is in view at 1280x680). --g-room is
     the height left under the band and instruction. */
  body:is([data-view=search],[data-view=sudoku],[data-view=cross],[data-view=scramble],[data-view=groups],[data-view=maze]):not(.puzzle-finished) { --g-room:max(320px,calc(100dvh - 330px)); }
  body:is([data-view=search],[data-view=sudoku],[data-view=cross],[data-view=scramble],[data-view=groups],[data-view=maze]):not(.puzzle-finished) .game-play { padding-top:8px; }
  /* Crossword: clue, answer box and tools left; board centre; clue list right. */
  body[data-view=cross]:not(.puzzle-finished) .play-layout { display:grid; grid-template-columns:minmax(240px,1fr) auto minmax(280px,1.15fr); gap:24px; align-items:start; width:100%; max-width:none; padding:0; }
  body[data-view=cross]:not(.puzzle-finished) .play-layout>.board-wrap { display:contents; }
  body[data-view=cross]:not(.puzzle-finished) .board-wrap>.current-clue { grid-column:1; grid-row:1; margin:0; }
  body[data-view=cross]:not(.puzzle-finished) .board-wrap>.cross-entry { grid-column:1; grid-row:2; margin:0; }
  body[data-view=cross]:not(.puzzle-finished) .board-wrap>.cross-visible-tools { grid-column:1; grid-row:3; flex-wrap:wrap; }
  body[data-view=cross]:not(.puzzle-finished) .board-wrap>.cross-board-viewport { grid-column:2; grid-row:1 / span 4; margin:0; }
  body[data-view=cross]:not(.puzzle-finished) .cross-board-viewport>.cross-grid { width:min(470px,calc(var(--g-room) * var(--cross-cols,12) / var(--cross-rows,10))); max-width:none; }
  body[data-view=cross]:not(.puzzle-finished) .play-layout>.all-clues { grid-column:3; grid-row:1 / span 4; max-height:min(470px,var(--g-room)); overflow:auto; margin:0; }
  /* Word search: progress and the word list left; board centre; tools right. */
  body[data-view=search]:not(.puzzle-finished) .play-layout { display:grid; grid-template-columns:minmax(220px,1fr) minmax(0,520px) minmax(220px,1fr); gap:24px; align-items:start; width:100%; max-width:none; padding:0; }
  body[data-view=search]:not(.puzzle-finished) .play-layout>.board-wrap { display:contents; }
  body[data-view=search]:not(.puzzle-finished) .board-wrap>.search-live { grid-column:1; grid-row:1; margin:0; }
  /* Each word chip is as wide as its word, so a word like CARROT never breaks
     in a narrow left column. */
  body[data-view=search]:not(.puzzle-finished) .board-wrap>.word-list { grid-column:1; grid-row:2; display:flex; flex-wrap:wrap; overflow:visible; max-height:none; margin:0; }
  body[data-view=search]:not(.puzzle-finished) .board-wrap>:is(.word-bank-toggle,.word-bank-swipe) { display:none; }
  body[data-view=search]:not(.puzzle-finished) .board-wrap>.search-board-scroll { grid-column:2; grid-row:1 / span 4; margin:0; }
  body[data-view=search]:not(.puzzle-finished) .board-wrap>.search-visible-tools { grid-column:3; grid-row:1; flex-wrap:wrap; margin:0; }
  body[data-view=search]:not(.puzzle-finished) .search-board-scroll:not(.large) .search-grid { max-width:min(430px,var(--g-room)); }
  /* Sudoku: notes left; board centre; tools and number keys right, so the keys
     sit beside the board instead of below the window's edge. */
  body[data-view=sudoku]:not(.puzzle-finished) .play-layout { display:grid; grid-template-columns:minmax(220px,1fr) auto minmax(240px,1fr); grid-template-rows:auto auto 1fr; gap:16px 24px; align-items:start; width:100%; max-width:none; padding:0; }
  body[data-view=sudoku]:not(.puzzle-finished) .play-layout>.board-wrap { display:contents; }
  body[data-view=sudoku]:not(.puzzle-finished) .play-layout>.side-note { grid-column:1; grid-row:1 / span 3; margin:0; }
  body[data-view=sudoku]:not(.puzzle-finished) .board-wrap>.sudoku-grid { grid-column:2; grid-row:1 / span 3; width:min(430px,var(--g-room)); max-width:none; margin:0; }
  body[data-view=sudoku]:not(.puzzle-finished) .board-wrap>.sudoku-tools { grid-column:3; grid-row:1; flex-wrap:wrap; justify-content:flex-start; margin:0; }
  body[data-view=sudoku]:not(.puzzle-finished) .board-wrap>.number-pad { grid-column:3; grid-row:2; width:100%; max-width:320px; margin:0; }
  body[data-view=sudoku]:not(.puzzle-finished) .number-pad #erase { font-size:16px; padding-inline:2px; }
  body[data-view=sudoku]:not(.puzzle-finished) .board-wrap>.board-caption { grid-column:2; grid-row:4; margin:0; }
  /* Word scramble: the card is see-through, so it needs no inner padding. */
  body[data-view=scramble]:not(.puzzle-finished) .game-play>.scramble-wrap { margin-top:0; padding-block:8px; }
  /* The clue uses the card's full width, so the longest clues (66 letters)
     take two lines, not three. */
  body[data-view=scramble]:not(.puzzle-finished) .scramble-clue { max-width:none; }
  /* A 1366x768 laptop leaves a window about 657px tall: tighter gaps, the
     phones' 24px clue and a shorter answer box keep Check word above the fold
     there, even under a two-line clue. */
  @media (max-height:720px) {
    body[data-view=scramble]:not(.puzzle-finished) .game-play { padding-top:0; }
    body[data-view=scramble]:not(.puzzle-finished) .scramble-clue { margin-block:6px; font-size:24px; line-height:1.3; }
    body[data-view=scramble]:not(.puzzle-finished) .answer-form input { padding-block:10px; }
    body[data-view=scramble]:not(.puzzle-finished) .scramble-letters { margin-top:10px; margin-bottom:12px; }
  }
  /* Common Ground: the board in the centre and the message in the right column,
     level with Check group, so it sits next to the action and the tiles never
     move. The tile rows shorten on short windows. */
  body[data-view=groups]:not(.puzzle-finished) main { display:grid; grid-template-columns:1fr minmax(0,560px) 1fr; grid-auto-flow:row dense; column-gap:24px; }
  body[data-view=groups]:not(.puzzle-finished) main>* { grid-column:1 / -1; }
  body[data-view=groups]:not(.puzzle-finished) main>.game-play { grid-column:2; }
  body[data-view=groups]:not(.puzzle-finished) main>.status { grid-column:3; align-self:end; margin:0 0 24px; }
  body[data-view=groups]:not(.puzzle-finished) .groups-board { --row:clamp(52px,calc((var(--g-room) - 110px) / 4),70px); }
  body[data-view=groups]:not(.puzzle-finished) .groups-board>.group-field { min-height:calc(4 * var(--row) + 24px); margin:8px 0 12px; }
  body[data-view=groups]:not(.puzzle-finished) .group-field>.group-tiles { grid-auto-rows:var(--row); }
  body[data-view=groups]:not(.puzzle-finished) .group-field>.group-tiles>.group-tile { min-height:0; }
  body[data-view=groups]:not(.puzzle-finished) .group-field .solved-group { min-height:var(--row); box-sizing:border-box; }
  /* 1000-1099 wide (an iPad in landscape): a slightly smaller puzzle name so it
     stays on one line, and narrower crossword side columns so the clue list
     stays on screen. */
  @media (max-width:1099px) {
    body:is([data-view=search],[data-view=sudoku],[data-view=cross],[data-view=scramble],[data-view=groups],[data-view=maze]):not(.puzzle-finished) .game-heading h1 { font-size:30px; }
    body[data-view=cross]:not(.puzzle-finished) .play-layout { grid-template-columns:minmax(200px,1fr) auto minmax(220px,1fr); gap:16px; container-type:inline-size; }
    body[data-view=cross]:not(.puzzle-finished) .cross-board-viewport>.cross-grid { width:min(470px,calc(var(--g-room) * var(--cross-cols,12) / var(--cross-rows,10)),calc(100cqw - 452px)); }
  }
}