/*
 * tictactoe.css — Module B board and cells. --grid is the board size (3 or 4).
 */
.ttt-stage { display: flex; justify-content: center; padding: 6px 0 18px; }

.ttt-board {
  display: grid;
  grid-template-columns: repeat(var(--grid), 1fr);
  gap: 9px;
  width: min(424px, 84vw);
  aspect-ratio: 1;
}

.cell {
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.7rem, 7vw, 3rem);
  color: var(--text-faint);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 7px;
  cursor: default;
  transition: var(--transition);
  aspect-ratio: 1;
}
.cell--open { cursor: pointer; }
.cell--open:hover {
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent-soft);
  transform: translateY(-2px);
}
.cell--x { color: var(--x-color); border-color: color-mix(in oklab, var(--x-color) 42%, var(--border)); }
.cell--o { color: var(--o-color); border-color: color-mix(in oklab, var(--o-color) 42%, var(--border)); }
.cell--x, .cell--o { animation: pop .22s cubic-bezier(.2, .9, .3, 1.4) both; }
.cell--win {
  background: var(--accent-soft);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
@keyframes pop { from { transform: scale(.55); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cell--x, .cell--o { animation: none; } }