/* Samurai Sudoku — page-specific styles layered on top of app.css.
   Five overlapping 9x9 grids on a 21x21 lattice, so the board needs its own sizing (fixed
   cell size instead of app.css's aspect-ratio/9-column board), its own box-border classes
   (computed per cell in JS, not via nth-child like the plain 9x9 boards), and a wider
   shell + horizontal/vertical scroll story on small screens. */

:root { --sam-cell: 32px; }

/* Widen the board column specifically on this page — the shared .board-shell/.pad/.mode-bar/
   .statline rules in app.css cap at 560px, too narrow for a 21-cell board. */
body.page-samurai .board-shell,
body.page-samurai .pad,
body.page-samurai .mode-bar,
body.page-samurai .statline {
  max-width: 690px;
}

.board-shell.samurai-shell {
  display: flex;
  justify-content: center;
}

.board.samurai {
  width: max-content;
  height: max-content;
  aspect-ratio: unset;
  display: grid;
  grid-template-columns: repeat(21, var(--sam-cell));
  grid-template-rows: repeat(21, var(--sam-cell));
}

.board.samurai .cell {
  font-size: calc(var(--sam-cell) * 0.46);
}
/* Notes floor at 8.5px: the 3x3 note grid inside a 32px cell leaves ~9px per digit, and
   anything under ~8px is unreadable. Bolder than the classic board to survive the size. */
.board.samurai .cell .notes { padding: 1px; }
.board.samurai .cell .notes span {
  font-size: max(8.5px, calc(var(--sam-cell) * 0.28));
  font-weight: 700;
}

/* Dead lattice cells (outside all five grids) — inert spacers, no border/background. */
.board.samurai .dead {
  background: transparent;
  pointer-events: none;
}

/* Shared 3x3 boxes (each belongs to a corner grid AND the center grid) — tinted like
   diagonal-sudoku's diagonal cells, so the double-duty cells are visible at a glance. */
.board.samurai .cell.shared {
  background: color-mix(in srgb, var(--brand) 8%, var(--cell));
}
.board.samurai .cell.shared.peer { background: var(--cell-peer); }
.board.samurai .cell.shared.same { background: var(--cell-same); }
.board.samurai .cell.shared.sel { background: var(--cell-sel); }
.board.samurai .cell.shared.err { background: var(--cell-err-bg); }

/* Box + outer-grid borders — classes are computed per cell in JS from each owning grid's
   local coordinates (see borderClassesOf in samurai-sudoku-app.js), since nth-child tricks
   don't work across five interleaved, non-contiguous grids on one lattice. */
.board.samurai .cell.bl { border-left: 2.5px solid var(--box-line); }
.board.samurai .cell.bt { border-top: 2.5px solid var(--box-line); }
.board.samurai .cell.br { border-right: 2.5px solid var(--box-line); }
.board.samurai .cell.bb { border-bottom: 2.5px solid var(--box-line); }

.samurai-pan-hint {
  display: none;
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-3);
  font-weight: 600;
  margin: 0 0 var(--sp-2);
}

/* ── Mobile: scrollable board, fixed minimum cell size (never shrink below 24px, spec floor
   is 30px so taps stay reliable) ── */
@media (max-width: 768px) {
  .samurai-pan-hint { display: block; }
  .board-shell.samurai-shell {
    max-width: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    justify-content: flex-start;
  }
  /* Keep the desktop 32px cells: the shell scrolls anyway, and bigger cells mean easier
     taps and legible notes. Never shrink below 30px. */
  .board.samurai {
    border-radius: var(--r-md);
  }
}

@media (max-width: 980px) {
  body.page-samurai .board-shell.samurai-shell,
  body.page-samurai .pad,
  body.page-samurai .mode-bar,
  body.page-samurai .statline {
    max-width: 650px;
  }
}

/* Difficulty segmented control sits alongside the Relaxed/Challenge toggle — stack them on
   narrow mode-bars rather than letting either get crushed. */
@media (max-width: 560px) {
  body.page-samurai .mode-bar {
    flex-wrap: wrap;
    justify-content: center;
  }
  body.page-samurai .mode-bar .seg { flex: 1 1 auto; justify-content: center; }
}