/* Full-screen play on phones (Michael, Oct 26, 2026): a game fills exactly one
   screen, like an app, with no page scrolling. The heading and controls keep
   their size and the board takes all the height that is left, instead of the
   fixed calc(100svh - Npx) guesses in the earlier sheets. Results pages
   (.puzzle-finished) and wider screens keep their normal layout. */
@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) { display:flex; flex-direction:column; min-height:100dvh; }
  body:is([data-view=search],[data-view=sudoku],[data-view=cross],[data-view=scramble],[data-view=groups],[data-view=maze]):not(.puzzle-finished)>.masthead { align-self:stretch; margin-inline:0; }
  body:is([data-view=search],[data-view=sudoku],[data-view=cross],[data-view=scramble],[data-view=groups],[data-view=maze]):not(.puzzle-finished) main { flex:1 0 auto; display:flex; flex-direction:column; width:100%; box-sizing:border-box; padding:4px 6px calc(max(8px,env(safe-area-inset-bottom)) + var(--game-ad-space,0px))!important; }
  body:is([data-view=search],[data-view=sudoku],[data-view=cross],[data-view=scramble],[data-view=groups],[data-view=maze]):not(.puzzle-finished) main>* { flex-shrink:0; }
  /* The message line sits at the bottom, under the controls. While there is no
     message it shows the game's instruction, and a message takes its place in
     the same slot, so the board stays put and the bottom of the screen is never
     blank. A two-line message fits the slot; a longer one makes the board a
     little shorter rather than covering the keys. */
  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 { order:1; display:block; box-sizing:border-box; min-height:56px; margin:8px 0 0; padding:8px 12px; }
  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>* { display:block; max-width:none; margin:0; line-height:1.25; }
  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>.boost-intro { font-size:15px; }
  body:is([data-view=search],[data-view=sudoku],[data-view=cross],[data-view=scramble],[data-view=groups],[data-view=maze]):not(.puzzle-finished) main>.status { order:1; box-sizing:border-box; min-height:56px; margin:8px 0 0; padding-block:6px; line-height:1.2; }
  body:is([data-view=search],[data-view=sudoku],[data-view=cross],[data-view=scramble],[data-view=groups],[data-view=maze]):not(.puzzle-finished) main>.status:empty { 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:has(>.status:not(:empty))>.play-instruction { 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>.game-play { flex:1 1 0; display:flex; flex-direction:column; align-self:stretch; margin-inline:0; padding-inline:0; }
  body:is([data-view=search],[data-view=sudoku],[data-view=cross],[data-view=maze]):not(.puzzle-finished) .game-play>.play-layout { flex:1 1 0; display:flex!important; flex-direction:column; height:auto!important; min-height:auto; }
  body:is([data-view=search],[data-view=sudoku],[data-view=cross],[data-view=maze]):not(.puzzle-finished) .play-layout>.board-wrap { flex:1 1 0; display:flex; flex-direction:column; width:100%; }
  body:is([data-view=search],[data-view=sudoku],[data-view=cross],[data-view=maze]):not(.puzzle-finished) .board-wrap>* { flex-shrink:0; }

  /* Word search: the letter grid spans the full width and grows taller into the
     free height (up to 1.3 times its width), so letters get room around them. */
  body[data-view=search]:not(.puzzle-finished) .board-wrap>.search-board-scroll { flex:1 1 0; min-height:220px; max-height:none!important; }
  body[data-view=search]:not(.puzzle-finished) .search-board-scroll:not(.large) { container-type:size; display:flex; align-items:center; justify-content:center; overflow:visible; }
  body[data-view=search]:not(.puzzle-finished) .search-board-scroll:not(.large) .search-grid { box-sizing:border-box; width:100cqw; height:min(100cqh,130cqw); max-width:none!important; aspect-ratio:auto; margin:0; }
  body[data-view=search]:not(.puzzle-finished) .search-board-scroll:not(.large) .search-cell { font-size:clamp(13px,min(calc(78cqw / var(--search-size,12)),calc(min(100cqh,130cqw) * .62 / var(--search-size,12))),30px); }

  /* Sudoku: the board is as large as the space above the controls allows, and
     the number keys grow on tall phones. */
  body[data-view=sudoku]:not(.puzzle-finished) .board-wrap { --key:clamp(44px,7dvh,60px); container-type:size; min-height:calc(312px + 2 * var(--key)); }
  body[data-view=sudoku]:not(.puzzle-finished) .board-wrap>.sudoku-grid { width:min(100cqw,calc(100cqh - 82px - 2 * var(--key))); max-width:none; margin:auto; }
  /* Digits scale with the board, so a small board's squares stay square. */
  body[data-view=sudoku]:not(.puzzle-finished) .board-wrap>.sudoku-grid>.sudoku-cell { font-size:clamp(16px,calc(min(100cqw,100cqh - 82px - 2 * var(--key)) * .095),28px); line-height:1; }
  body[data-view=sudoku]:not(.puzzle-finished) .number-pad { width:100%; max-width:none; }
  body[data-view=sudoku]:not(.puzzle-finished) .number-pad button { min-height:var(--key); }

  /* Crossword: the grid area takes the free height and the keys grow on tall phones. */
  body[data-view=cross]:not(.puzzle-finished) .board-wrap>.cross-board-viewport { flex:1 1 0; min-height:150px; max-height:none; }
  /* The grid sits in the middle of its area; auto margins drop to zero when a
     tall grid has to pan, so its top row is never cut off. */
  body[data-view=cross].cross-touch-keyboard:not(.puzzle-finished) .cross-board-viewport { display:flex; }
  body[data-view=cross].cross-touch-keyboard:not(.puzzle-finished) .cross-board-viewport>.cross-grid { margin:auto; flex:none; }
  /* The keys take only what's left once a whole 15-row board fits (Michael,
     Oct 31: a slightly smaller keyboard rather than swiping the board), never
     under the 44px tap floor and up to 60px on tall phones. The board is
     min(100vw - 33px, 360px) tall; 349px is everything else on the screen. */
  body[data-view=cross].cross-touch-keyboard:not(.puzzle-finished) .cross-keyboard button { min-height:clamp(44px,calc((100dvh - min(100vw - 33px, 360px) - 349px) / 3),60px); }
  body[data-view=cross].cross-touch-keyboard:not(.puzzle-finished) .board-wrap>:is(.cross-keyboard,.cross-visible-tools) { margin-top:4px; }

  /* Maze: the scrollable maze window takes the free height. */
  body[data-view=maze]:not(.puzzle-finished) .board-wrap>.maze-viewport { flex:1 1 0; height:auto; min-height:200px; }

  /* Word scramble sits in the middle of the free space. Common Ground's rows
     grow with the screen height, and a found group's band is one row tall, so
     the tiles and Check group stay put as groups are found. */
  body[data-view=scramble]:not(.puzzle-finished) .game-play>.scramble-wrap { flex:1 1 auto; display:flex; flex-direction:column; justify-content:flex-start; }
  body[data-view=groups]:not(.puzzle-finished) .game-play>.groups-board { --row:clamp(70px,11dvh,108px); flex:1 1 auto; display:flex; flex-direction:column; justify-content:flex-start; width:100%; max-width:560px; margin-inline:auto; }
  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 .solved-group { min-height:var(--row); box-sizing:border-box; }

  /* Small phones (under 820px tall, so a Hard board fits on a 375x812 or
     360x780 phone too): the crossword clue moves down into the bottom bar,
     next to the keys, and the board takes the height the instruction used. A
     message (only Check makes one) takes a compact line under the clue, so the
     board stays put and the keys move up by just that line. */
  @media (max-height:820px) {
    body[data-view=cross].cross-touch-keyboard:not(.puzzle-finished) main>.play-instruction { display:none; }
    body[data-view=cross].cross-touch-keyboard:not(.puzzle-finished) .board-wrap>.current-clue { order:1; margin:8px 0 0; }
    body[data-view=cross].cross-touch-keyboard:not(.puzzle-finished) main>.status { min-height:0; }
  }

  /* Short screens (a small phone with the browser's bars showing) trim the
     minimum sizes and the message slot so the game still fits. */
  @media (max-height:620px) {
    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(.status,.play-instruction) { min-height:40px; padding:4px 10px; }
    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(.status,.play-instruction) { margin-top:4px; }
    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>.boost-intro { display:none; }
    body[data-view=search]:not(.puzzle-finished) .board-wrap>.search-board-scroll { min-height:170px; }
    body[data-view=sudoku]:not(.puzzle-finished) .board-wrap { min-height:calc(230px + 2 * var(--key)); }
    body[data-view=cross]:not(.puzzle-finished) .board-wrap>.cross-board-viewport { min-height:110px; }
    body[data-view=maze]:not(.puzzle-finished) .board-wrap>.maze-viewport { min-height:150px; }
    body[data-view=groups]:not(.puzzle-finished) .game-play>.groups-board { --row:56px; }
    body[data-view=groups]:not(.puzzle-finished) .groups-board>.status { min-height:48px; }
  }
}