/* Four in a Row and Noughts and Crosses, over style.css */
.board.duel{display:block;border-radius:16px;aspect-ratio:auto}
.board-noughts{display:grid!important;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);aspect-ratio:1!important;width:min(100%,calc(100dvh - 190px),480px);border:0!important;border-radius:0!important;overflow:visible!important}
.sq{position:relative;padding:0;touch-action:manipulation}
.sq:nth-child(-n+6){border-bottom:1px solid var(--hair)}
.sq:not(:nth-child(3n)){border-right:1px solid var(--hair)}
.sq:not(:disabled):hover{background:var(--faint)}
.sq:disabled{cursor:default}
.sq svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--fg);stroke-width:.5;stroke-linecap:round}
.sq.drawn path,.sq.drawn circle{stroke-dasharray:20;stroke-dashoffset:20;animation:draw .32s ease-out forwards}
.sq.drawn path+path{animation-delay:.1s}
@keyframes draw{to{stroke-dashoffset:0}}
.board-noughts .win{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.board-noughts .win line{stroke:var(--fg);stroke-width:.035;stroke-linecap:round;stroke-dasharray:5;stroke-dashoffset:5;animation:draw .5s ease-out .15s forwards}
.board-noughts.over .sq:not(.won) svg{opacity:.35}

.board-four{display:flex!important;aspect-ratio:auto!important;width:min(100%,calc((100dvh - 190px)*7/6),640px);padding:2%;background:rgb(244 241 234 / .035)}
.col{position:relative;flex:1;display:flex;flex-direction:column;padding:0;touch-action:manipulation;border-radius:999px}
.col:not(:disabled):hover{background:var(--faint)}
.col:disabled{cursor:default}
.slot{position:relative;display:block;flex:none;width:82%;aspect-ratio:1;margin:9% auto;border-radius:50%;box-shadow:inset 0 0 0 1px var(--hair)}
.disc{box-shadow:0 2px 5px rgb(0 0 0 / .5)}
.disc.p1{background:#0b0a08;box-shadow:inset 0 0 0 2px var(--fg),0 2px 5px rgb(0 0 0 / .5)}
.disc.p2{background:var(--fg)}
.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:-9%;border-radius:50%;border:2px solid var(--fg)}
.board-four.over .disc:not(.won){opacity:.4}
.slot.last::before{content:"";position:absolute;inset:40%;border-radius:50%;background:currentColor;opacity:.5}
.disc.p1.last::before{color:var(--fg)}
.disc.p2.last::before{color:var(--ground)}

.quiet[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.disc.fall,.sq.drawn path,.sq.drawn circle,.board-noughts .win line{animation:none;stroke-dashoffset:0}}