/* Islands tokens: dark mode only changes these values. */
:root {
  --g-islands: #2f86c9;
  --islands-empty: #ffffff;
  --islands-line: #d9dde2;
  --islands-sea: #3d8fd1;
  --islands-sea-edge: #2f78b3;
  --islands-sand: #f4e3b8;
  --islands-dot: #9c7a35;
  --islands-number-ink: #3b2a08;
  --islands-frame: #1b1b1b;
  --islands-error: #d64545;
}
:root[data-theme='dark'] {
  --g-islands: #5aa7e3;
  --islands-empty: #1a1a1a;
  --islands-line: var(--board-grid);
  --islands-sea: #1f5f93;
  --islands-sea-edge: #2a73ad;
  --islands-sand: #5a4a26;
  --islands-dot: #e3c27a;
  --islands-number-ink: #fbefd2;
  --islands-frame: #f2f2f2;
  --islands-error: #ff7a7a;
}

.islands-shell {
  --game-accent: var(--g-islands);
}
.islands-shell .shell-stage {
  gap: var(--space-3);
  padding: 0 var(--space-4);
}
.islands-shell .shell-board-area {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.islands-board-wrap {
  width: min(
    calc(520px * max(1, var(--cols) / var(--rows))),
    calc(100vw - 32px),
    calc((100dvh - 260px) * var(--cols) / var(--rows))
  );
  margin: 0 auto;
}
.islands-board {
  display: grid;
  overflow: hidden;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  grid-template-rows: repeat(var(--rows), minmax(0, 1fr));
  aspect-ratio: var(--cols) / var(--rows);
  border: 2px solid var(--islands-frame);
  border-radius: 12px;
  background: var(--islands-empty);
  /* Painting must not scroll or zoom the page. */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.islands-cell {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  place-items: center;
  padding: 0;
  border: 0;
  border-right: 1px solid var(--islands-line);
  border-bottom: 1px solid var(--islands-line);
  border-radius: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background-color 120ms ease;
  -webkit-tap-highlight-color: transparent;
}
.islands-cell.sea {
  border-color: var(--islands-sea-edge);
  background: var(--islands-sea);
}
.islands-cell.dot,
.islands-cell.clue,
.islands-cell.land {
  background: var(--islands-sand);
}
.islands-cell i {
  width: 22%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--islands-dot);
}
.islands-number {
  color: var(--islands-number-ink);
  font: 800 clamp(14px, 4.6vw, 24px) / 1 var(--font-app);
  font-variant-numeric: tabular-nums;
}
.islands-cell.error::after {
  position: absolute;
  inset: 3px;
  border: 2px dashed var(--islands-error);
  border-radius: 4px;
  content: '';
  pointer-events: none;
}
.islands-cell.hint-context {
  box-shadow: inset 0 0 0 3px var(--hint-context);
}
.islands-cell.hint-target {
  box-shadow: inset 0 0 0 3px var(--hint-target);
}
/* The suggested value shows as a soft preview inside the target cell. */
.islands-cell.hint-sea:not(.sea)::before,
.islands-cell.hint-land:not(.dot)::before {
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  content: '';
  opacity: 0.55;
  pointer-events: none;
}
.islands-cell.hint-sea:not(.sea)::before {
  background: var(--islands-sea);
}
.islands-cell.hint-land:not(.dot)::before {
  background: var(--islands-dot);
  inset: 38%;
}
.islands-cell:focus-visible,
.islands-cell.focus:focus {
  outline: 0;
  box-shadow: inset 0 0 0 3px var(--text);
}
.islands-board.solved .islands-cell.sea {
  animation: islands-wave 900ms ease-out both;
  animation-delay: calc(var(--i) * 25ms);
}
@keyframes islands-wave {
  40% {
    filter: brightness(1.25);
  }
}
@media (prefers-reduced-motion: reduce) {
  .islands-cell {
    transition: none;
  }
  .islands-board.solved .islands-cell.sea {
    animation: none;
  }
}
.islands-status {
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
}
.islands-status b {
  color: var(--text);
}

/* Picture rules: the 3 × 3 demo board, drawn with the real cells, fills its stage. */
.islands-demo-board {
  position: relative;
  width: 100%;
}
.islands-demo-board .islands-cell {
  cursor: default;
}
.islands-demo-board .islands-number {
  font-size: 28px;
}