.battleship {
  position: relative;
  width: 100%;
  height: 100%;
}

.battleship .boards {
  width: 100%;
  height: 100%;
  display: block;
}
.battleship .boards .grid-line { stroke: color-mix(in oklch, var(--fg), transparent 55.0%); stroke-width: 0.8; }
.battleship .boards .board-frame { fill: none; stroke: oklch(0% 0 0); stroke-width: 1.5; }
.battleship .boards .ship-outline { fill: none; stroke: oklch(0% 0 0); stroke-width: 1.5; }
.battleship .boards .miss-dot { fill: color-mix(in oklch, var(--fg), transparent 44.99999999999999%); }
.battleship .boards .hit-mark { stroke: oklch(0% 0 0); stroke-width: 2.5; stroke-linecap: round; }
.battleship .boards .sunk-fill { fill: oklch(0% 0 0); }
.battleship .boards .sunk-mark { stroke: oklch(100% 0 0); stroke-width: 2.5; stroke-linecap: round; }
.battleship .boards .cell-target {
  fill: transparent;
  pointer-events: all;
  transition: fill 0.08s;
}
.app[data-state="playing"] .battleship .boards .cell-target.live { cursor: crosshair; }
.app[data-state="playing"] .battleship .boards .cell-target.live:hover { fill: color-mix(in oklch, var(--fg), transparent 92.0%); }
.battleship .boards .board-label {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  fill: color-mix(in oklch, var(--fg), transparent 50.0%);
  text-anchor: middle;
}

.battleship .bs-fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.bs-controls {
  position: absolute;
  bottom: var(--space-2);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--space-3);
  z-index: 2;
}