/* Sudoku — board, notes and number pad. The page layout comes from play-page.css. */
body[data-game='sudoku'] { --frame: #b86e00; --title: #b86e00; --title-shadow: #7d4a00; }

.board-frame { display: grid; gap: 14px; }
.sudoku-board { display: grid; width: min(100%, calc(100svh - 340px)); margin-inline: auto; grid-template-columns: repeat(9, minmax(0, 1fr)); aspect-ratio: 1; overflow: hidden; border: 3px solid #5a3500; border-radius: 14px; background: #5a3500; gap: 1px; }
.sudoku-cell { position: relative; display: grid; place-items: center; min-width: 0; padding: 0; border: 0; border-radius: 0; background: #fffaf0; color: #1f5fbf; font: 600 clamp(20px, 2.6vw, 34px) / 1 'Fredoka', sans-serif; cursor: pointer; transition: background .12s; }
/* thicker lines between the 3×3 boxes */
.sudoku-cell[data-col='2'], .sudoku-cell[data-col='5'] { margin-right: 2px; }
.sudoku-cell[data-row='2'], .sudoku-cell[data-row='5'] { margin-bottom: 2px; }
.sudoku-cell.given { color: var(--ink); font-weight: 700; cursor: default; }
.sudoku-cell.related { background: #fdebc8; }
.sudoku-cell.same { background: #fbd88f; }
.sudoku-cell.selected { z-index: 1; background: #fecf40; box-shadow: inset 0 0 0 3px #b86e00; }
.sudoku-cell.conflict { color: #d6362b; }
.sudoku-cell.clash { color: #d6362b; background: #fde2df; }
.sudoku-cell:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
.notes { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; height: 100%; padding: 3px; }
.notes i { display: grid; place-items: center; color: #8a6a3a; font: 600 clamp(9px, .9vw, 13px) / 1 'Roboto Condensed', sans-serif; font-style: normal; }
.sudoku-board.notes-mode .sudoku-cell.selected { box-shadow: inset 0 0 0 3px #b86e00, inset 0 0 0 6px #fff; }

.numpad { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 8px; }
.numpad-key { position: relative; display: grid; place-items: center; min-width: 0; height: 58px; padding: 0; border: 0; border-radius: 12px; background: #fff; color: var(--ink); cursor: pointer; box-shadow: 0 4px 0 rgb(0 0 0 / .16); transition: transform .12s, background .12s; }
.numpad-key b { font: 700 26px / 1 'Fredoka', sans-serif; }
.numpad-key small { position: absolute; top: 5px; right: 7px; color: var(--muted); font-size: 11px; font-weight: 700; }
.numpad-key:hover:not(:disabled) { transform: translateY(-2px); background: #fff7e0; }
.numpad-key.done { opacity: .45; }
.numpad-key:disabled { cursor: not-allowed; opacity: .45; }
.numpad-erase svg { width: 26px; height: 26px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.tool-buttons { display: flex; gap: 8px; }
.tool-button { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 14px; border: 2px solid rgb(255 255 255 / .7); border-radius: 12px; background: rgb(255 255 255 / .14); color: #fff; font: 700 16px 'Roboto Condensed', sans-serif; cursor: pointer; }
.tool-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tool-button[aria-pressed='true'] { border-color: #fecf40; background: #fecf40; color: var(--ink); }
.tool-button:disabled { cursor: not-allowed; opacity: .5; }

@media (max-width: 760px) {
  .board-frame { gap: 10px; }
  .sudoku-board { width: min(100%, calc(100svh - 300px)); border-radius: 10px; }
  .sudoku-cell { font-size: clamp(18px, 6vw, 28px); }
  .notes { padding: 1px; }
  .notes i { font-size: clamp(7px, 2.2vw, 11px); }
  .numpad { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .numpad-key { height: 50px; }
  .tool-button { border-color: var(--line); background: #fff; color: var(--ink); }
}
@media (prefers-reduced-motion: reduce) { .sudoku-cell, .numpad-key { transition: none; } }