.battleship-grids {
  display: flex;
  gap: 2em;
  justify-content: center;
  flex-wrap: wrap;
}

.battleship-board {
  display: grid;
  grid-template-columns: repeat(8, 34px);
  grid-template-rows: repeat(8, 34px);
  gap: 2px;
  background: var(--felt-900);
  padding: 6px;
  border-radius: 6px;
}

@media (max-width: 600px) {
  .battleship-board { grid-template-columns: repeat(8, 7.8vw); grid-template-rows: repeat(8, 7.8vw); }
}

.placement-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8em;
  margin-top: 1em;
}

.placement-actions .btn {
  flex: 1 1 140px;
}

.bs-cell {
  border: none;
  background: var(--felt-700);
  border-radius: 3px;
  cursor: pointer;
  padding: 0;
  position: relative;
}

.bs-cell.ship {
  background: var(--wood-500);
}

.bs-cell.preview {
  background: rgba(212, 176, 108, 0.5);
}

.bs-cell.hit::after {
  content: "";
  position: absolute;
  inset: 25%;
  border-radius: 50%;
  background: var(--wine-500);
  box-shadow: 0 0 6px 2px rgba(178, 58, 77, 0.7);
}

.bs-cell.miss::after {
  content: "";
  position: absolute;
  inset: 38%;
  border-radius: 50%;
  background: rgba(240, 228, 200, 0.7);
}

.bs-cell:disabled {
  cursor: default;
}