.connect4-game { width: min(96vw, 760px); margin: 2rem auto; padding: clamp(1rem, 3vw, 2rem); border: 1px solid #384466; border-radius: 24px; background: linear-gradient(145deg, rgba(22,29,51,.98), rgba(10,14,27,.98)); box-shadow: 0 24px 80px rgba(0,0,0,.45); }
.connect4-heading h1 { margin-bottom: .25rem; }
.connect4-status { margin: .25rem 0 1rem; color: #fff; font-size: 1.15rem; font-weight: 800; }
.connect4-players { display: flex; gap: .75rem; justify-content: center; margin-bottom: 1rem; flex-wrap: wrap; }
.connect4-player { padding: .55rem .8rem; border: 2px solid transparent; border-radius: 999px; background: #151c31; font-weight: 800; }
.connect4-player.player-1 { color: #ffe16a; }.connect4-player.player-2 { color: #ff7d9f; }.connect4-player[data-turn="true"] { border-color: currentColor; box-shadow: 0 0 20px color-mix(in srgb,currentColor 35%,transparent); }
.connect4-board-wrap { position: relative; width: min(100%, 650px); margin: 0 auto; aspect-ratio: 7 / 6; }
.connect4-board { display: grid; grid-template-columns: repeat(7,1fr); gap: clamp(4px,1vw,10px); width: 100%; height: 100%; padding: clamp(7px,1.5vw,15px); border-radius: 18px; background: linear-gradient(#3978ec,#1553c5); box-shadow: inset 0 -10px 30px rgba(0,0,0,.25); }
.connect4-cell { display: block; min-width: 0; aspect-ratio: 1; border-radius: 50%; background: #0a0e1b; box-shadow: inset 0 5px 10px rgba(0,0,0,.55); }
.connect4-cell.cell-1 { background: radial-gradient(circle at 35% 28%,#fff5a1,#ffd43b 58%,#c59000); }.connect4-cell.cell-2 { background: radial-gradient(circle at 35% 28%,#ffbfd0,#ff4f7d 58%,#ad123b); }
.connect4-cell.is-new { animation: connect4-drop .38s cubic-bezier(.2,.85,.3,1.2); }
.connect4-column-controls { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(7,1fr); }
.connect4-column { width: 100%; height: 100%; padding: 0; border: 0; border-radius: 12px; color: transparent; background: transparent; cursor: pointer; }
.connect4-column:not(:disabled):hover,.connect4-column:not(:disabled):focus-visible { outline: 3px solid #83d8ff; outline-offset: -4px; background: rgba(131,216,255,.12); }
.connect4-column:disabled { cursor: default; }
.connect4-actions { display: flex; gap: .75rem; margin-top: 1rem; }.connect4-actions button { width: auto; }.connect4-abandon { color: #fff; background: #8c2945; }
.connect4-error { color: #ffacac; margin: 1rem 0 0; font-weight: 700; }
@keyframes connect4-drop { from { transform: translateY(-180%); opacity: .25; } to { transform: translateY(0); opacity: 1; } }
@media (max-width: 560px) { .connect4-game { margin: .5rem auto; border-radius: 16px; } .connect4-actions { flex-direction: column; }.connect4-actions button { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .connect4-cell.is-new { animation: none; } }