.bs-board { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; width: min(360px, 94%); margin: 0 auto; }
.bs-cell {
  aspect-ratio: 1/1; border-radius: 7px; background: var(--surface-2);
  border: 2px solid var(--line); display: grid; place-items: center;
  font-size: 13px; font-weight: 800; color: var(--ink); cursor: pointer; user-select: none;
}
.bs-cell.ship { background: var(--grape); color: #fff; border-color: var(--grape); }
.bs-cell.water { background: var(--sky); color: #fff; border-color: var(--sky); }
.bs-cell.given { cursor: default; opacity: .92; }
.bs-cell.u { background: #fff; }