.reversi-board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  aspect-ratio: 1 / 1;
  gap: 4px;
  padding: 8px;
  border-radius: 8px;
  background: #174838;
}
.reversi-cell {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #22634d;
}
.reversi-cell::after {
  content: "";
  position: absolute;
  inset: 16%;
  border-radius: 50%;
}
.reversi-cell.black::after { background: #111; box-shadow: 0 5px 12px rgba(0,0,0,.35); }
.reversi-cell.white::after { background: #f4efe0; box-shadow: 0 5px 12px rgba(0,0,0,.2); }
.reversi-cell.valid::before {
  content: "";
  position: absolute;
  inset: 38%;
  border-radius: 50%;
  background: rgba(255,255,255,.45);
}