@import url('../global.css');

:root {
  --title-color: var(--color-tictactoe);
}

.tictactoe-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-xs);
  padding: var(--spacing-sm);
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--border-radius-lg);
}

.tictactoe-cell {
  aspect-ratio: 1;
  border: 1px solid var(--line);
  border-radius: var(--border-radius-md);
  background: var(--surface-2);
  color: var(--text-color);
  font: inherit;
  font-size: clamp(2rem, 12vw, 5rem);
  font-weight: 800;
  cursor: pointer;
}

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

.tictactoe-cell.is-seat-0 {
  color: var(--color-tictactoe);
}

.tictactoe-cell.is-seat-1 {
  color: var(--accent);
}