.connect-four-game,.connect-four-controls,.connect-four-controls>*,.connect-four-board{box-sizing:border-box;min-width:0;max-width:100%}.connect-four-game{display:grid;gap:var(--space-4);width:min(100%,44rem);margin:var(--space-5) auto 0;padding:clamp(var(--space-3),3vw,var(--space-5));background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}.connect-four-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3)}.connect-four-controls label{display:grid;gap:var(--space-1);color:var(--color-ink);font-weight:700}.connect-four-controls [hidden]{display:none}.connect-four-controls select{width:100%;min-height:2.75rem;padding:0 var(--space-3);color:var(--color-ink);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm)}.connect-four-controls select:hover{border-color:var(--color-primary)}.connect-four-controls__actions{display:flex;grid-column:1 / -1;flex-wrap:wrap;gap:var(--space-3)}.connect-four-config-note{grid-column:1 / -1;margin:0;font-size:.875rem}.connect-four-score{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2)}.connect-four-score div{min-width:0;padding:var(--space-2) var(--space-3);text-align:center;background:var(--color-surface-muted);border-radius:var(--radius-sm)}.connect-four-score span{display:block;overflow-wrap:anywhere;color:var(--color-ink-muted);font-size:.8125rem;font-weight:700}.connect-four-score strong{display:block;margin-top:var(--space-1);color:var(--color-ink);font-size:1.35rem}.connect-four-status{min-height:1.6rem;margin:0;color:var(--color-ink);text-align:center;font-weight:800}.connect-four-board{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(2px,.8vw,.35rem);width:min(100%,36rem);margin-inline:auto;padding:clamp(.35rem,1.7vw,.85rem);overflow:hidden;background:#2854bd;border:2px solid #1d4097;border-radius:var(--radius-md);box-shadow:inset 0 -.35rem #11307e52}.connect-four-column{display:grid;min-width:0;padding:0;gap:clamp(2px,.8vw,.35rem);color:inherit;background:transparent;border:0;border-radius:999px;cursor:pointer}.connect-four-column:hover:not([aria-disabled=true]),.connect-four-column.is-selected:not([aria-disabled=true]){background:#ffffff29}.connect-four-column:focus-visible{outline-color:#fff;outline-offset:2px}.connect-four-column[aria-disabled=true]{cursor:default}.connect-four-board.is-locked .connect-four-column:not(.is-selected){opacity:.82}.connect-four-slot{position:relative;display:block;width:100%;aspect-ratio:1;overflow:hidden;background:#f6f8fc;border:1px solid rgb(12 37 94 / 28%);border-radius:50%;box-shadow:inset 0 .18rem .3rem #0f234d2e}.connect-four-disc{position:absolute;top:5%;right:5%;bottom:5%;left:5%;display:grid;place-items:center;border:2px solid rgb(18 31 55 / 28%);border-radius:50%;box-shadow:inset 0 .25rem .35rem #ffffff38,0 .12rem .2rem #091b434d}.connect-four-slot.is-red .connect-four-disc{background:#d64242}.connect-four-slot.is-yellow .connect-four-disc{background:#f2c84b}.connect-four-slot.is-red .connect-four-disc:after{width:22%;aspect-ratio:1;content:"";background:#fff;border-radius:50%}.connect-four-slot.is-yellow .connect-four-disc:after{width:25%;aspect-ratio:1;content:"";border:2px solid #604a08;transform:rotate(45deg)}.connect-four-slot.is-winning{outline:4px solid #172033;outline-offset:-4px;box-shadow:0 0 0 3px #fff,inset 0 .18rem .3rem #0f234d2e}.connect-four-disc.is-dropping{animation:connect-four-drop .18s ease-out both}@keyframes connect-four-drop{0%{transform:translateY(calc(var(--drop-rows) * -112%))}to{transform:translateY(0)}}@media(max-width:38rem){.connect-four-controls{grid-template-columns:1fr}.connect-four-controls__actions,.connect-four-config-note{grid-column:auto}.connect-four-controls__actions .button{flex:1 1 10rem}}@media(max-width:23rem){.connect-four-game{padding-inline:var(--space-2)}.connect-four-score div{padding-inline:var(--space-1)}}@media(prefers-reduced-motion:reduce){.connect-four-disc.is-dropping{animation:none}}