/* ── Four in a Row (docs/49_GAMES.md) ───────────────────────────────
 * Linked from src/pages/games/four-in-a-row.astro. Board and discs are CSS.
 */
.gfour {
  --f-frame: var(--ice-palette-navy-800);
  --f-hole: var(--ice-palette-warm-50);
  --f-p1: var(--ice-palette-crimson-600);
  --f-p2: var(--ice-palette-navy-700);
  --f-p2-ring: var(--ice-palette-navy-100);
  --f-hover: var(--ice-palette-navy-700);
  max-width: 560px;
  margin-inline: auto;
}
[data-theme='dark'] .gfour {
  --f-frame: var(--ice-palette-graphite-750);
  --f-hole: var(--ice-palette-graphite-950);
  --f-p1: var(--ice-palette-crimson-400);
  --f-p2: var(--ice-palette-navy-100);
  --f-p2-ring: var(--ice-palette-graphite-300);
  --f-hover: var(--ice-palette-graphite-700);
}
.gfour .game-bar { justify-content: center; }

.gfour__board {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: clamp(2px, 1vw, 6px);
  margin-top: .75rem;
  padding: clamp(5px, 1.6vw, 10px);
  border-radius: 12px;
  background: var(--f-frame);
  user-select: none;
  -webkit-user-select: none;
}
.gfour__col {
  display: grid;
  gap: clamp(2px, 1vw, 6px);
  padding: clamp(2px, .6vw, 4px);
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
}
.gfour__col:hover:not([aria-disabled='true']),
.gfour__col:focus-visible { background: var(--f-hover); }
.gfour__col:focus-visible { outline: 3px solid var(--ice-color-surface); outline-offset: -2px; }
.gfour__col[aria-disabled='true'] { cursor: default; }
.gfour__slot {
  display: block;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--f-hole);
  box-shadow: inset 0 2px 3px rgb(0 0 0 / .25);
}
.gfour__slot.is-p1 { background: var(--f-p1); box-shadow: inset 0 0 0 4px rgb(0 0 0 / .14); }
.gfour__slot.is-p2 { background: var(--f-p2); box-shadow: inset 0 0 0 4px var(--f-p2-ring), inset 0 0 0 7px var(--f-p2); }
.gfour__slot.is-last { animation: gfour-drop .28s cubic-bezier(.3, 0, .6, 1); }
.gfour__slot.is-win { outline: 3px solid var(--ice-palette-terracotta-400); outline-offset: 2px; }
@keyframes gfour-drop { from { transform: translateY(-160%); opacity: .4; } }

@media (prefers-reduced-motion: reduce) {
  .gfour__slot.is-last { animation: none; }
}
html.kaamko-plain .gfour__slot.is-last { animation: none; }