.board-shikaku {
  display: grid;
  width: min(92vw, 28rem);
  aspect-ratio: 1;
  border: 3px solid var(--board-line-strong, #3b2a1a);
  touch-action: none;
}
.board-shikaku .cell {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--board-line, #c9b59a) 62%, transparent);
  background-color: var(--board-cell, #fffaf0);
  font-weight: 800;
  user-select: none;
}

/* Distinct region hues are deliberately spaced around the colour wheel.
   JS graph-colours touching regions so close palette neighbours are avoided. */
.board-shikaku .cell.region-tone-0 { background-color: color-mix(in srgb, #D96557 30%, var(--board-cell)); }
.board-shikaku .cell.region-tone-1 { background-color: color-mix(in srgb, #D7A11E 31%, var(--board-cell)); }
.board-shikaku .cell.region-tone-2 { background-color: color-mix(in srgb, #6C9F45 30%, var(--board-cell)); }
.board-shikaku .cell.region-tone-3 { background-color: color-mix(in srgb, #319A8D 30%, var(--board-cell)); }
.board-shikaku .cell.region-tone-4 { background-color: color-mix(in srgb, #4F7DC2 30%, var(--board-cell)); }
.board-shikaku .cell.region-tone-5 { background-color: color-mix(in srgb, #6E62B5 30%, var(--board-cell)); }
.board-shikaku .cell.region-tone-6 { background-color: color-mix(in srgb, #A15AB1 30%, var(--board-cell)); }
.board-shikaku .cell.region-tone-7 { background-color: color-mix(in srgb, #C65386 30%, var(--board-cell)); }

/* A selected Shikaku region gets a real strong outline, not just the cell grid.
   Every internal strong boundary is emitted once on the lower/right cell's
   top/left edge so incomplete and completed boards use identical geometry. */
.board-shikaku .cell.region-edge-top { border-top: 3px solid var(--board-line-strong, #3b2a1a); }
.board-shikaku .cell.region-edge-left { border-left: 3px solid var(--board-line-strong, #3b2a1a); }

.board-shikaku .cell.is-drag { outline: none; }
.board-shikaku .clue { font-size: 1.05rem; }

#board.board-shikaku .cell.is-drag { box-shadow: inset 0 0 0 2.5px var(--play-ring-active, #19D65A); background: var(--board-cell-sel) !important; }
#board.board-shikaku .cell.is-anchor { box-shadow: inset 0 0 0 2.5px var(--play-ring-active, #19D65A); background: var(--board-cell-sel) !important; }
.board-shikaku .cell.is-area-mismatch {
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 3px, color-mix(in srgb, var(--bad, #b42318) 30%, transparent) 3px, color-mix(in srgb, var(--bad, #b42318) 30%, transparent) 6px);
}