.nb-boards {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

.nb-board-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.nb-board-col h4 { margin: 0; font-size: 0.85rem; color: var(--color-text-soft); font-weight: 600; }

.nb-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 3px;
  width: min(260px, 40vw);
}

.nb-cell {
  aspect-ratio: 1;
  background: #123a5e;
  border-radius: 4px;
  border: none;
  padding: 0;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75em;
  transition: background 0.12s ease;
}

.nb-cell:disabled { cursor: default; }
.nb-cell.nb-fire:hover:not(:disabled) { background: #1c5488; }

.nb-cell.nb-ship { background: #3a4a5c; }
.nb-cell.nb-hit { background: #d93838; animation: nb-hit-pop 0.25s ease; }
.nb-cell.nb-hit::after { content: "💥"; }
.nb-cell.nb-miss { background: #0d2740; }
.nb-cell.nb-miss::after { content: "•"; color: #6f9bc4; font-size: 1.4em; }
.nb-cell.nb-sunk { background: #7a1f1f; }
.nb-cell.nb-sunk::after { content: "☠"; }

@keyframes nb-hit-pop {
  0% { transform: scale(1.3); }
  100% { transform: scale(1); }
}