/* =============================================================
   GAME: Four in a Row
   ============================================================= */
.board-connect4 {
  --cell: min(calc((100vw - 72px) / 7), 64px);
  display: grid; grid-template-columns: repeat(7, var(--cell)); grid-auto-rows: var(--cell);
  padding: calc(var(--cell) * .12); border-radius: 18px;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(255, 255, 255, .14), transparent 60%),
    linear-gradient(180deg, #3a1d93 0%, #26116b 55%, #1b0b52 100%);
  box-shadow: 0 0 0 2px #ff5fb4, 0 0 26px rgba(255, 61, 154, .45),
    inset 0 2px 0 rgba(255, 255, 255, .22), inset 0 -7px 0 rgba(0, 0, 0, .32), 0 14px 26px rgba(0, 0, 0, .4);
}
.c4-cell { position: relative; border: 0; padding: 0; background: transparent; cursor: pointer; display: grid; place-items: center; -webkit-tap-highlight-color: transparent; }
.c4-cell:focus-visible { outline: none; }
.c4-cell:focus-visible::before { box-shadow: 0 0 0 3px var(--focus), inset 0 4px 7px rgba(0, 0, 0, .75); }
/* the hole: recessed, dark inside, lit lower lip */
.c4-cell::before {
  content: ""; width: 80%; height: 80%; border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #05010f 0%, #0e0429 55%, #1c0c4a 100%);
  box-shadow: inset 0 4px 7px rgba(0, 0, 0, .8), inset 0 -2px 2px rgba(255, 255, 255, .07), 0 1px 0 rgba(255, 255, 255, .16), 0 -1px 0 rgba(0, 0, 0, .35);
  transition: background .15s;
}
.c4-col-hover::before { background: radial-gradient(circle at 50% 30%, #120738 0%, #22105a 60%, #2f1a72 100%); }
.board-connect4[data-turn="1"] .c4-col-hover::before { background: radial-gradient(circle at 50% 30%, #2a0828, #3e1050 60%, #4a1a6a 100%); }
.board-connect4[data-turn="2"] .c4-col-hover::before { background: radial-gradient(circle at 50% 30%, #261a10, #3a2a3a 60%, #463466 100%); }

/* the disc: glossy dome, moulded inner ring, soft drop shadow */
.c4-disc {
  --hi: #ffb3cf; --base: #ff3d7f; --lo: #a80f48; --deep: #6d0830;
  position: absolute; width: 80%; height: 80%; border-radius: 50%; z-index: 1;
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, .85) 0, rgba(255, 255, 255, .35) 9%, transparent 24%),
    radial-gradient(circle at 50% 45%, var(--hi) 0%, var(--base) 42%, var(--lo) 88%, var(--deep) 100%);
  box-shadow: inset 0 -3px 4px rgba(0, 0, 0, .3), inset 0 2px 2px rgba(255, 255, 255, .35), 0 3px 5px rgba(0, 0, 0, .55);
}
.c4-disc::before {
  content: ""; position: absolute; inset: 19%; border-radius: 50%;
  background: radial-gradient(circle at 40% 32%, var(--hi), var(--base) 60%, var(--lo));
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .3), inset 0 -1px 1px rgba(255, 255, 255, .35), 0 1px 0 rgba(255, 255, 255, .4), 0 -1px 1px rgba(0, 0, 0, .18);
  opacity: .9;
}
.c4-disc.p1 { --hi: #ffb3cf; --base: #ff3d7f; --lo: #b3124e; --deep: #6d0830; }
.c4-disc.p2 { --hi: #fff4b8; --base: #ffd23f; --lo: #d39200; --deep: #8a5a00; }

.c4-disc.drop { animation: c4drop var(--dur, .5s) linear both; }
@keyframes c4drop {
  0% { transform: translateY(calc(var(--fall) * -125%)); animation-timing-function: cubic-bezier(.5, 0, 1, .7); }
  70% { transform: translateY(0); animation-timing-function: cubic-bezier(0, .55, .45, 1); }
  84% { transform: translateY(-11%); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  100% { transform: translateY(0); }
}
/* last move: a small glowing pip in the centre */
.c4-disc.last::after { content: ""; position: absolute; inset: 41%; border-radius: 50%; background: rgba(255, 255, 255, .9); box-shadow: 0 0 6px 2px rgba(255, 255, 255, .7); }

/* winning four: bright halo pulsing, the rest of the board dims */
.board-connect4.c4-won .c4-disc:not(.win) { filter: saturate(.6) brightness(.72); transition: filter .4s; }
.c4-disc.win { z-index: 2; animation: c4win .8s ease-in-out .15s infinite alternate; box-shadow: 0 0 0 3px #fff, 0 0 18px 4px var(--base), inset 0 -3px 4px rgba(0, 0, 0, .3), inset 0 2px 2px rgba(255, 255, 255, .35); }
.c4-disc.win.drop { animation: c4drop var(--dur, .5s) linear both, c4win .8s ease-in-out var(--dur, .5s) infinite alternate; }
@keyframes c4win { to { transform: scale(.88); box-shadow: 0 0 0 3px #fff, 0 0 28px 8px var(--base), inset 0 -3px 4px rgba(0, 0, 0, .3), inset 0 2px 2px rgba(255, 255, 255, .35); } }