/* Palette for this board class. Legacy extended-board previews use other class names. */
body.ds-nurikabe #board.board-nurikabe {
  --numeric-cell-ratio: 0.40;
  --numeric-cell-wide-ratio: 0.32;
  --nk-sea: #2eabc4;
  --nk-wave: #b7eef6;
  --nk-sea-edge: #18748c;
  --nk-sea-ink: #021820;
  --nk-sand: #f2e2a4;
  --nk-shore: #b08d4c;
  --nk-unknown: #fffaf0;
  --nk-grid: #b5afa0;
  --nk-ink: #283d35;
  display: grid;
  gap: 0;
  width: min(92vw, 28rem, calc(46px * var(--cols, var(--n, 6))));
  max-width: 100%;
  aspect-ratio: var(--cols, var(--n, 6)) / var(--rows, var(--n, 6));
  background: var(--nk-unknown);
  border: 3px solid #314c50;
}
body.ds-nurikabe #board.board-nurikabe .cell {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 1px solid var(--nk-grid);
  border-radius: 0;
  background: var(--nk-unknown);
  color: var(--nk-ink);
  font-weight: 700;
  box-shadow: none;
  transition: none;
  animation: none;
}
/* Clear, layered wave illustrations, shared by live and tutorial grids.
   The blue terrain remains the cell background; the SVG is a transparent
   repeatable overlay so number/selection and touch areas are unchanged. */
body.ds-nurikabe #board.board-nurikabe .cell.is-black {
  background-color: var(--nk-sea);
  background-image: url("/nurikabe/assets/sea-waves.svg?v=a8a68c7956f5978f233f3a1c0387d1454f2cabe1");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  border-color: var(--nk-sea-edge);
  color: var(--nk-sea-ink);
}
/* Full square sand joins adjacent land; the shallow contour never clips taps. */
body.ds-nurikabe #board.board-nurikabe .cell.is-white,
body.ds-nurikabe #board.board-nurikabe .cell.is-given {
  background: var(--nk-sand);
  border-color: var(--nk-shore);
}
/* Illustrated vector palm with curved trunk, layered fronds, sand and
   tiny rocks. One external asset for play and tutorial, at any resolution. */
body.ds-nurikabe #board.board-nurikabe .cell.is-white::before,
body.ds-nurikabe #board.board-nurikabe .cell.is-given::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: 2%;
  width: clamp(18px, 77%, 90px);
  height: clamp(24px, 84%, 102px);
  transform: translateX(-50%);
  pointer-events: none;
  background-image: url("/nurikabe/assets/palm-island.svg?v=a8a68c7956f5978f233f3a1c0387d1454f2cabe1");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
}
/* Number sits in a small top-left badge. The palm moves to the opposite corner. */
body.ds-nurikabe #board.board-nurikabe .cell.is-given::before {
  left: auto;
  right: 1%;
  bottom: 1%;
  width: min(46%, 98px);
  height: min(64%, 120px);
  transform: none;
}
body.ds-nurikabe #board.board-nurikabe .cell.is-given .cell-numeral {
  position: absolute;
  top: clamp(2px, 7%, 6px);
  left: clamp(2px, 7%, 6px);
  right: auto;
  bottom: auto;
  width: auto;
  height: auto;
  max-width: 54%;
  margin: 0;
  place-self: start start;
  color: #fffaf0;
  background: #354d3d;
  border-radius: 3px;
  box-shadow: 0 0 0 1px #fffaf0;
  padding: 0 0.2em 1px;
  font-weight: 800;
  font-size: clamp(9px, calc(min(92vw, 28rem) / var(--n, 6) * 0.28), 20px);
  line-height: 1;
  text-align: center;
  z-index: 2;
}
body.ds-nurikabe #board.board-nurikabe .cell.is-given .cell-numeral-wide {
  font-size: clamp(8px, calc(min(92vw, 28rem) / var(--n, 6) * 0.22), 16px);
  max-width: 62%;
}
/* Dual-tone focus remains legible on sea, sand and unknown cells. */
body.ds-nurikabe #board.board-nurikabe .cell:is(.is-selected, :focus-visible) {
  outline: 2px solid #fffaf0;
  outline-offset: -4px;
  box-shadow: inset 0 0 0 6px #7d390e;
  z-index: 2;
}
/* Dashed inset = error; focus stays on the outer edge. Preserve terrain fill. */
body.ds-nurikabe #board.board-nurikabe .cell:is(.bad, .conflict, .is-flag-error)::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 2px dashed #a42129;
  box-shadow: 0 0 0 1px #fffaf0, inset 0 0 0 1px #fffaf0;
  pointer-events: none;
  z-index: 3;
}
html[data-ds-theme="dark"] body.ds-nurikabe #board.board-nurikabe {
  --nk-unknown: #303c46;
  --nk-grid: #77818a;
  --nk-sea: #2498b3;
  --nk-wave: #8fd4e4;
  --nk-sea-edge: #145e74;
  --nk-sand: #e4d2a0;
  --nk-shore: #b09658;
}
/* Night keeps the same white crests. Only the turquoise base changes. */
@media (forced-colors: active) {
  body.ds-nurikabe #board.board-nurikabe .cell.is-black { background: CanvasText; color: Canvas; forced-color-adjust: none; }
  body.ds-nurikabe #board.board-nurikabe .cell:is(.is-white, .is-given) { background: Canvas; border: 2px solid CanvasText; }
  body.ds-nurikabe #board.board-nurikabe .cell.is-white::before,
  body.ds-nurikabe #board.board-nurikabe .cell.is-given::before { background-image: none; }
  body.ds-nurikabe #board.board-nurikabe .cell:is(.is-selected, :focus-visible) { outline: 3px solid Highlight; }
  body.ds-nurikabe #board.board-nurikabe .cell:is(.bad, .conflict, .is-flag-error)::after { border-color: CanvasText; }
}
@media (prefers-reduced-motion: reduce) {
  body.ds-nurikabe #board.board-nurikabe .cell.is-white::before,
  body.ds-nurikabe #board.board-nurikabe .cell.is-given::before {
    animation: none;
    transition: none;
  }
}