/* Four in a Row board (connect-4-2-player.js). Discs fall with gravity (ease-in) and settle with a small bounce. */
.tool.duel-g-c4 { --c4-frame: #2E0D52; --c4-hole: #FBF7FF; }
@media (prefers-color-scheme: dark) { .tool.duel-g-c4 { --c4-frame: #3B1A66; --c4-hole: #14072A; } .tool .c4-slot::before { box-shadow: inset 0 3px 4px rgb(0 0 0 / .4), 0 0 0 1px rgb(255 255 255 / .1); } }
.tool.duel-g-c4 .duel-token { border-radius: 50%; min-width: 22px; width: 22px; height: 22px; padding: 0; }

.tool .duel-c4 { width: 100%; max-width: 520px; margin: 0 auto; touch-action: manipulation; }
.tool .c4-frame {
  display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 0; padding: 8px; border-radius: 22px;
  background: var(--c4-frame); overflow: hidden; box-shadow: 0 10px 30px rgb(46 13 82 / .25), inset 0 -4px 0 rgb(0 0 0 / .2);
}
.tool .c4-col {
  position: relative; display: grid; grid-template-rows: repeat(var(--rows), 1fr); gap: 0; padding: 0; min-width: 0;
  border-radius: 14px; cursor: default; user-select: none; -webkit-user-select: none; transition: background-color .15s ease;
}
.tool .c4-col.can { cursor: pointer; }
.tool .c4-col:focus-visible { outline: 3px solid rgb(var(--accent)); outline-offset: -1px; }
@media (hover: hover) and (pointer: fine) {
  .tool .c4-col.can:hover { background: rgb(255 255 255 / .07); }
}
.tool .c4-slot { position: relative; aspect-ratio: 1; display: grid; place-items: center; }
.tool .c4-slot::before { content: ''; position: absolute; inset: 9%; border-radius: 50%; background: var(--c4-hole); box-shadow: inset 0 3px 4px rgb(0 0 0 / .25); }
.tool .c4-disc {
  position: absolute; inset: 9%; border-radius: 50%; z-index: 1;
  box-shadow: inset 0 -4px 0 rgb(0 0 0 / .18), inset 0 3px 0 rgb(255 255 255 / .25);
}
.tool .c4-disc.p0 { background: rgb(var(--p0)); }
.tool .c4-disc.p1 { background: rgb(var(--p1)); }
.tool .c4-disc.is-drop { animation: c4-drop calc(.16s + var(--drop) * .045s) cubic-bezier(.55, 0, 1, .45) both, c4-settle .22s calc(.16s + var(--drop) * .045s) var(--ease-out); }
@keyframes c4-drop { from { transform: translateY(calc(var(--drop) * -112%)); } }
@keyframes c4-settle { 40% { transform: translateY(-9%); } }
.tool .c4-slot.is-last .c4-disc::after { content: ''; position: absolute; inset: 34%; border-radius: 50%; background: rgb(255 255 255 / .55); }
.tool .duel-c4.is-over .c4-disc { opacity: .4; transition: opacity .4s ease; }
.tool .duel-c4.is-over .c4-slot.is-win .c4-disc { opacity: 1; filter: none; animation: c4-win .9s var(--ease-out) .2s both; box-shadow: 0 0 0 3px #fff, inset 0 -4px 0 rgb(0 0 0 / .18); }
@keyframes c4-win { 30% { transform: scale(1.12); } }
.tool .duel-c4.is-thinking .c4-col { cursor: progress; }
@media (max-width: 599px) { .tool .c4-frame { padding: 5px; border-radius: 18px; } .tool .c4-col { border-radius: 10px; } }
@media (prefers-reduced-motion: reduce) { .tool .c4-disc.is-drop, .tool .duel-c4.is-over .c4-slot.is-win .c4-disc { animation: none; } }
/* The winning disc still falls first, then the line pulses */
.tool .duel-c4.is-over .c4-slot.is-win .c4-disc.is-drop { animation: c4-drop calc(.16s + var(--drop) * .045s) cubic-bezier(.55, 0, 1, .45) both, c4-settle .22s calc(.16s + var(--drop) * .045s) var(--ease-out), c4-win .9s var(--ease-out) calc(.45s + var(--drop) * .045s) both; }
/* Landing preview: a faint disc where your drop would land (mouse hover or keyboard focus) */
.tool .c4-slot.is-land::after { content: ''; position: absolute; inset: 9%; border-radius: 50%; opacity: 0; transition: opacity .12s ease; }
.tool .duel-c4[data-turn="0"] .c4-slot.is-land::after { background: rgb(var(--p0) / .45); }
.tool .duel-c4[data-turn="1"] .c4-slot.is-land::after { background: rgb(var(--p1) / .45); }
@media (hover: hover) and (pointer: fine) { .tool .c4-col.can:hover .c4-slot.is-land::after { opacity: 1; } }
.tool .c4-col.can:focus-visible .c4-slot.is-land::after, .tool .c4-col.can.is-aim .c4-slot.is-land::after { opacity: 1; }
.tool .c4-col.can.is-aim { background: rgb(255 255 255 / .08); }
@media (prefers-reduced-motion: reduce) { .tool .duel-c4.is-over .c4-slot.is-win .c4-disc.is-drop { animation: none; } }