/* Four in a Row, over style.css */
.board.duel{display:block;border-radius:16px;aspect-ratio:auto}

.board-four{display:flex!important;aspect-ratio:auto!important;width:min(100%,calc((100dvh - 190px)*7/6),640px);padding:2.4%;border-radius:22px!important;border:0!important;background:linear-gradient(rgb(255 255 255 / .04),rgb(0 0 0 / .1)),var(--board)!important;box-shadow:inset 0 0 0 1px rgb(255 255 255 / .08),0 14px 34px rgb(0 0 0 / .32)}
.col{position:relative;flex:1;display:flex;flex-direction:column;padding:0;touch-action:manipulation;border-radius:999px}

.col:disabled{cursor:default}
.col:not(:disabled):active{background:rgb(255 255 255 / .06)}
/* Holes in the board; discs are lit black and white, the same in any room. */
.slot{position:relative;display:block;flex:none;width:82%;aspect-ratio:1;margin:9% auto;border-radius:50%;background:rgb(15 13 10 / .3);box-shadow:inset 0 2px 4px rgb(0 0 0 / .25)}
.disc{box-shadow:0 2px 4px rgb(0 0 0 / .35)}
.disc.p1{background:radial-gradient(circle at 38% 32%,var(--piece-white-hi),var(--piece-white) 62%,var(--piece-white-lo))}
.disc.p2{background:radial-gradient(circle at 38% 32%,var(--piece-black-hi),var(--piece-black) 62%,var(--piece-black-lo))}
.disc.fall{animation:fall calc(.16s + var(--r)*.05s) cubic-bezier(.5,0,1,1),settle .16s ease-out calc(.16s + var(--r)*.05s)}
@keyframes fall{from{translate:0 calc((var(--r) + 1)*-118%)}}
@keyframes settle{40%{translate:0 -5%}}
.slot.won::after{content:"";position:absolute;inset:-10%;border-radius:50%;border:2.5px solid var(--mark)}
.board-four.over .disc:not(.won){opacity:.45}
.slot.last::before{content:"";position:absolute;inset:39%;border-radius:50%;background:var(--mark)}

.quiet[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.disc.fall{animation:none}}
@media (hover:hover) and (pointer:fine){.col:not(:disabled):hover{background:rgb(255 255 255 / .06)}}