/* ── Tic-Tac-Toe (docs/49_GAMES.md) ─────────────────────────────────
 * Linked from src/pages/games/tic-tac-toe.astro. Marks are CSS only:
 * X is two crossed bars, O is a ring. Site tokens and palette values only.
 */
.gttt {
  --t-bg: var(--ice-palette-warm-100);
  --t-cell: var(--ice-color-surface);
  --t-line: var(--ice-palette-navy-800);
  --t-x: var(--ice-palette-crimson-600);
  --t-o: var(--ice-palette-navy-700);
  --t-win: var(--ice-palette-terracotta-300);
  max-width: 460px;
  margin-inline: auto;
}
[data-theme='dark'] .gttt {
  --t-bg: var(--ice-palette-graphite-800);
  --t-cell: var(--ice-palette-graphite-900);
  --t-line: var(--ice-palette-graphite-300);
  --t-x: var(--ice-palette-crimson-300);
  --t-o: var(--ice-palette-navy-100);
  --t-win: var(--ice-palette-graphite-700);
}
.gttt .game-bar { justify-content: center; }
.gttt.is-two .game-stat { opacity: .55; }

.gttt__board {
  display: grid;
  gap: 6px;
  margin-top: .75rem;
  padding: 6px;
  border-radius: 10px;
  background: var(--t-line);
  aspect-ratio: 1;
  user-select: none;
  -webkit-user-select: none;
}
.gttt__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.gttt__cell {
  position: relative;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: var(--t-cell);
  cursor: pointer;
  touch-action: manipulation;
  min-height: 0;
}
.gttt__cell[aria-disabled='true'] { cursor: default; }
.gttt__cell:focus-visible { outline: 3px solid var(--ice-color-action); outline-offset: -5px; }
.gttt__cell.is-win { background: var(--t-win); }

.gttt__cell.is-x::before,
.gttt__cell.is-x::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 62%; height: 11%;
  border-radius: 99px;
  background: var(--t-x);
  transform: translate(-50%, -50%) rotate(45deg);
}
.gttt__cell.is-x::after { transform: translate(-50%, -50%) rotate(-45deg); }
.gttt__cell.is-o::before {
  content: '';
  position: absolute;
  inset: 20%;
  border-radius: 50%;
  border: clamp(6px, 2.4vw, 11px) solid var(--t-o);
}
.gttt__cell.is-x::before, .gttt__cell.is-x::after, .gttt__cell.is-o::before { animation: gttt-in .18s ease-out; }
@keyframes gttt-in { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .gttt__cell.is-x::before, .gttt__cell.is-x::after, .gttt__cell.is-o::before { animation: none; }
}
html.kaamko-plain .gttt__cell.is-x::before, html.kaamko-plain .gttt__cell.is-x::after, html.kaamko-plain .gttt__cell.is-o::before { animation: none; }