*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;width:100%;overflow:hidden}:root{--c4-cell-size-from-width: calc((100vw - 40px)/8) ;--c4-cell-size-from-height: calc((100vh - 80px) / 9);--c4-cell-size: min(48px, var(--c4-cell-size-from-width), var(--c4-cell-size-from-height));--c4-gap: calc(var(--c4-cell-size) * .125);--c4-padding: calc(var(--c4-cell-size) * .25);--c4-disc-size: calc(var(--c4-cell-size) * .875);--c4-preview-size: calc(var(--c4-cell-size) * .75);--c4-border-radius: calc(var(--c4-cell-size) * .25)}.connect4-game{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(.5rem,1.5vw,1rem);padding:clamp(.5rem,2vw,1.5rem);background:radial-gradient(ellipse at center,#112c20,#0a1a12);height:100%;width:100%;font-family:system-ui,-apple-system,sans-serif;color:#f0f0f0;overflow:hidden}.c4-turn-indicator{display:flex;align-items:center;gap:.5rem;padding:.4rem .8rem;background:#ffffff1a;border-radius:8px;font-size:clamp(.75rem,2vw,.9rem)}.c4-disc-small{width:clamp(14px,3vw,20px);height:clamp(14px,3vw,20px);border-radius:50%;flex-shrink:0}.c4-disc-small.red{background:radial-gradient(circle at 30% 30%,#f04242,#d41111)}.c4-disc-small.yellow{background:radial-gradient(circle at 30% 30%,#fad338,#e0b406)}.c4-turn-indicator .your-turn{color:#ee2b2b;font-weight:500}.c4-turn-indicator .opponent-turn{color:#f9ce1f;font-weight:500;animation:c4-thinking 1s ease-in-out infinite}@keyframes c4-thinking{0%,to{opacity:1}50%{opacity:.5}}.board-wrapper{display:flex;flex-direction:column;align-items:center;max-width:100%}.hover-row{display:flex;gap:var(--c4-gap);margin-bottom:calc(var(--c4-gap) * 1.5);height:calc(var(--c4-cell-size) * .9);padding:0 var(--c4-padding)}.hover-cell{width:var(--c4-cell-size);height:calc(var(--c4-cell-size) * .9);display:flex;align-items:center;justify-content:center}.preview-disc{width:var(--c4-preview-size);height:var(--c4-preview-size);border-radius:50%;opacity:0;transition:opacity .2s ease}.hover-cell.visible .preview-disc{opacity:.6}.hover-cell.red .preview-disc{background:radial-gradient(circle at 30% 30%,#f04242,#d41111)}.hover-cell.yellow .preview-disc{background:radial-gradient(circle at 30% 30%,#fad338,#e0b406)}.board{display:flex;gap:var(--c4-gap);background:linear-gradient(180deg,#0a51c2,#083c91);padding:var(--c4-padding);border-radius:var(--c4-border-radius);box-shadow:0 8px 32px #0006,inset 0 2px 4px #ffffff1a}.column{display:flex;flex-direction:column;gap:var(--c4-gap)}.column.clickable{cursor:pointer}.column.clickable:hover .cell{background:#0b2e65}.column.disabled{pointer-events:none;opacity:.7}.cell{width:var(--c4-cell-size);height:var(--c4-cell-size);border-radius:50%;background:#052457;box-shadow:inset 0 4px 8px #0006,inset 0 -2px 4px #ffffff0d;display:flex;align-items:center;justify-content:center;position:relative;transition:background .2s ease}.cell.winning{box-shadow:inset 0 4px 8px #0006,0 0 20px #0ff9}.disc{width:var(--c4-disc-size);height:var(--c4-disc-size);border-radius:50%;position:absolute}.disc.red{background:radial-gradient(circle at 30% 30%,#f04242,#d41111);box-shadow:0 4px 8px #0000004d,inset 0 2px 4px #ffffff4d,inset 0 -2px 4px #0003}.disc.yellow{background:radial-gradient(circle at 30% 30%,#fad338,#e0b406);box-shadow:0 4px 8px #0000004d,inset 0 2px 4px #fff6,inset 0 -2px 4px #0003}.disc.dropping{animation:drop .55s ease-out both}@keyframes drop{0%{transform:translateY(var(--drop-distance, -320px));animation-timing-function:cubic-bezier(.2,.9,.25,1)}55%{transform:translateY(0);animation-timing-function:cubic-bezier(.35,0,.65,1)}70%{transform:translateY(-18px);animation-timing-function:cubic-bezier(.35,0,.65,1)}82%{transform:translateY(0);animation-timing-function:cubic-bezier(.35,0,.65,1)}92%{transform:translateY(-6px);animation-timing-function:cubic-bezier(.35,0,.65,1)}to{transform:translateY(0)}}.disc.winning{animation:winner-pulse 1s ease-in-out infinite}@keyframes winner-pulse{0%,to{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.05);filter:brightness(1.2)}}.hover-cell.opponent .preview-disc{animation:opponent-pulse 1s ease-in-out infinite}.hover-cell.opponent.locked .preview-disc{animation:none;opacity:.85}@keyframes opponent-pulse{0%,to{opacity:.35}50%{opacity:.7}}.c4-result{display:flex;align-items:center;justify-content:center;padding:.5rem 1.5rem;border-radius:8px;font-size:clamp(1rem,3vw,1.25rem);font-weight:600}.c4-result.win{background:linear-gradient(90deg,#22c55e33,#22c55e1a);border:1px solid rgba(34,197,94,.5);color:#22c55e;text-shadow:0 0 10px rgba(34,197,94,.5)}.c4-result.lose{background:linear-gradient(90deg,#ef444433,#ef44441a);border:1px solid rgba(239,68,68,.5);color:#ef4444}.c4-result.draw{background:linear-gradient(90deg,#a8a29e33,#a8a29e1a);border:1px solid rgba(168,162,158,.5);color:#a8a29e}@media (max-width: 400px),(max-height: 500px){.connect4-game{padding:.25rem;gap:.25rem}.c4-turn-indicator{padding:.25rem .5rem}}