/* =============================================================
   GAME: Nurikabe — mint islands in a deep sea
   ============================================================= */
.board-nurikabe {
  --n: 7;
  --nk-glow: #56f0b4;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.nk-grid {
  --n: 7;
  --cell: min(calc((100vw - 70px - var(--n) * 2px) / var(--n)), 50px);
  display: grid; grid-template-columns: repeat(var(--n), var(--cell)); grid-auto-rows: var(--cell); gap: 2px;
  padding: 4px; border-radius: 14px;
  background: linear-gradient(160deg, #0f4a44, #062320 60%, #0c3d3a);
  box-shadow: 0 0 0 2px var(--nk-glow), 0 0 28px rgba(86, 240, 180, .32), 0 12px 30px rgba(0, 0, 0, .35);
}
.nk-row { display: contents; }
.nk-cell {
  position: relative; border: 0; padding: 0; margin: 0; cursor: pointer; border-radius: 6px;
  background: linear-gradient(180deg, #17322f, #0f2421); color: #eafff6;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 -2px 0 rgba(0, 0, 0, .25);
  font: 800 calc(var(--cell) * .5) / 1 var(--font-body); font-variant-numeric: tabular-nums;
  display: grid; place-items: center;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.nk-cell:hover { background: #1f423d; }
.nk-cell:focus { outline: none; }
.nk-cell:focus-visible { box-shadow: inset 0 0 0 2px var(--focus), 0 0 10px rgba(245, 168, 255, .5); z-index: 2; }
/* island number: a sunny sand tile */
.nk-cell.nk-clue {
  background: radial-gradient(circle at 35% 28%, #fff4cf, #f1cf86 55%, #c9993f);
  color: #3b2706; cursor: default;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -3px 0 rgba(120, 70, 10, .35), 0 0 10px rgba(255, 214, 120, .35);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}
/* land marked with a dot */
.nk-cell.nk-dot { background: linear-gradient(180deg, #4d4426, #3a331c); }
.nk-cell.nk-dot::before {
  content: ""; width: 26%; height: 26%; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff6d6, #f1cf86 70%);
  box-shadow: 0 0 8px rgba(255, 220, 140, .55);
}
/* sea: deep water with a soft wave */
.nk-cell.nk-sea {
  background:
    radial-gradient(120% 60% at 50% 115%, rgba(86, 240, 180, .28), transparent 60%),
    repeating-linear-gradient(170deg, rgba(255, 255, 255, .05) 0 3px, transparent 3px 9px),
    linear-gradient(180deg, #11558f, #07305e);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(86, 200, 255, .2);
}
.nk-cell.nk-sea:hover { filter: brightness(1.15); }
/* mistakes: 2×2 pools, islands too big / with two numbers / closed at the wrong size */
.nk-cell.nk-bad::after {
  content: ""; position: absolute; inset: 2px; border-radius: 5px;
  box-shadow: inset 0 0 0 2px rgba(255, 61, 127, .9), 0 0 10px rgba(255, 61, 127, .5);
}
.nk-cell.nk-clue.nk-bad { color: #b0103e; }
.nk-cell.nk-pop::before { animation: nkpop .25s cubic-bezier(.3, 1.6, .5, 1); }
.nk-cell.nk-sea.nk-pop { animation: nksplash .3s ease; }
@keyframes nkpop { from { transform: scale(.3); } }
@keyframes nksplash { from { filter: brightness(1.8); } }
.nk-cell.nk-done.nk-sea { animation: nkwin 1.4s ease both; }
.nk-cell.nk-done.nk-sea:nth-child(3n+1) { animation-delay: .1s; }
.nk-cell.nk-done.nk-sea:nth-child(3n+2) { animation-delay: .2s; }
@keyframes nkwin { 40% { filter: brightness(1.7) saturate(1.3); box-shadow: inset 0 0 0 1px rgba(86, 240, 180, .8), 0 0 12px rgba(86, 240, 180, .6); } }
.nk-cell:disabled { cursor: default; }
.nk-loading .nk-cell { background: #0f2421; animation: nkload 1.2s ease-in-out infinite alternate; }
.nk-loading .nk-row:nth-child(2n) .nk-cell { animation-delay: .3s; }
@keyframes nkload { to { background: #1a3a35; } }

/* tool switch */
.nk-tools { display: flex; gap: 8px; width: min(100%, 340px); }
.nk-tool {
  flex: 1; min-height: 44px; border: 0; cursor: pointer; border-radius: 12px; color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
  box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(255, 255, 255, .08), 0 2px 0 rgba(0, 0, 0, .35);
  font: 700 .95rem/1 var(--font-body); transition: transform .1s, box-shadow .15s, background .15s;
}
.nk-tool:hover { box-shadow: inset 0 0 0 1px var(--nk-glow); }
.nk-tool:active { transform: translateY(2px); }
.nk-tool[aria-pressed="true"] { background: linear-gradient(135deg, #1f9e78, #0d5c4a); color: #fff; box-shadow: 0 0 0 1px var(--nk-glow), 0 0 16px rgba(86, 240, 180, .4); }
.nk-tool:disabled { opacity: .45; cursor: default; transform: none; }
.nk-tool:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.nk-ico { width: 18px; height: 18px; border-radius: 4px; flex: none; display: grid; place-items: center; }
.nk-ico-sea { background: linear-gradient(180deg, #0f4f85, #062347); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.nk-ico-dot { background: #4d4426; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.nk-ico-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #f1cf86; }
.nk-help { text-wrap: balance; margin: 0; font-size: .82rem; color: var(--muted); text-align: center; max-width: 420px; }
.nk-clock { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  .nk-cell { transition: none; }
  .nk-cell.nk-done.nk-sea, .nk-loading .nk-cell, .nk-cell.nk-pop::before, .nk-cell.nk-sea.nk-pop { animation: none; }
}