#boardWrap { width: min(94vw, 560px); margin: 1rem auto; }
#colHover { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; padding: 0 10px; height: 28px; margin-bottom: 6px; }
#colHover div { border-radius: 50%; cursor: pointer; height: 22px; width: 22px; margin: 3px auto; background: transparent; transition: background .12s; }
#colHover div.preview.p1 { background: var(--p1); }
#colHover div.preview.p2 { background: var(--p2); }
#colHover div.full { cursor: not-allowed; }

#board { display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(6, 1fr); gap: 6px; padding: 10px; background: #1d63d6; border-radius: 14px; aspect-ratio: 7/6; box-shadow: 0 20px 60px -20px #000; }
.slot { background: #0b2960; border-radius: 50%; aspect-ratio: 1/1; position: relative; overflow: hidden; }
.slot .disc { position: absolute; inset: 4%; border-radius: 50%; background: transparent; transition: transform .4s cubic-bezier(.4,1.4,.6,1); }
.slot.p1 .disc { background: radial-gradient(circle at 35% 30%, #ffeaa0, var(--p1) 60%, #c89520); }
.slot.p2 .disc { background: radial-gradient(circle at 35% 30%, #ffa8b8, var(--p2) 60%, #b02840); }
.slot.drop .disc { animation: drop .45s ease-in; }
@keyframes drop { from { transform: translateY(-600%); } 60% { transform: translateY(8%); } to { transform: translateY(0); } }
.slot.win { animation: winPulse 1s ease-in-out infinite; }
@keyframes winPulse { 50% { filter: brightness(1.4); } }