/* games/sudoku.html: what only the Sudoku page needs (the page: board-game.css + puzzle.css, the board: ../sudoku-board.css).
   The grid and the digit buttons: side by side on a wide screen (the buttons a 3 × 3 block like the keypad),
   the buttons in one row under the grid on a phone, big enough for a thumb. */
.sd-play{display:grid;grid-template-columns:minmax(0,520px) 196px;gap:18px;justify-content:center;align-items:start}
.sd-board-wrap{width:100%}
#board{max-width:520px;margin:0 auto}
.sd-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pad-d{position:relative;font-size:24px;font-weight:800;aspect-ratio:1;padding:0;display:flex;align-items:center;justify-content:center;touch-action:manipulation}
.pad-d small{position:absolute;right:5px;bottom:3px;font-size:10px;font-weight:700;color:var(--muted)}
.pad-d.done{opacity:.35}
.sd-pad.noting .pad-d{font-size:15px;color:var(--muted);align-items:flex-start;justify-content:flex-start;padding:6px}
.sd-pad.noting .pad-d small{display:none}
.pad-tool{grid-column:span 3;touch-action:manipulation}
.pad-tool[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#1a1200}

/* A phone: nine digit buttons in a row (two columns of 18 each), Notes and Erase side by side under them */
@media (max-width:760px){
  .sd-play{grid-template-columns:minmax(0,1fr);gap:10px}
  .sd-pad{grid-template-columns:repeat(18,1fr);gap:4px}
  .pad-d{grid-column:span 2;aspect-ratio:auto;height:52px;font-size:22px;border-radius:9px}
  .pad-d small{right:3px;bottom:1px;font-size:9px}
  .sd-pad.noting .pad-d{padding:4px;font-size:14px}
  .pad-tool{grid-column:span 9;height:44px}
}