.board {
  display: grid;
  grid-template-columns: repeat(3, 96px);
  grid-template-rows: repeat(3, 96px);
  gap: 8px;
}

.cell {
  background: var(--bg-soft);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.12s ease, box-shadow 0.12s ease;
  user-select: none;
}

.cell:hover:not(.filled) {
  background: var(--card-hover);
  box-shadow: inset 0 0 12px rgba(124, 92, 255, 0.3);
}

.cell.x {
  color: var(--accent);
  text-shadow: 0 0 10px rgba(124, 92, 255, 0.8);
}

.cell.o {
  color: var(--accent-2);
  text-shadow: 0 0 10px rgba(255, 77, 141, 0.8);
}

.cell.win {
  background: rgba(47, 245, 192, 0.16);
  border-color: var(--accent-3);
  box-shadow: 0 0 14px rgba(47, 245, 192, 0.5);
}

.message {
  min-height: 1.4em;
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--amber);
  text-align: center;
  text-shadow: 0 0 8px rgba(255, 207, 77, 0.6);
}

@media (max-width: 420px) {
  .board {
    grid-template-columns: repeat(3, 80px);
    grid-template-rows: repeat(3, 80px);
  }
}