html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}:root{--shadow-color: 220 3% 15%;--shadow-strength: 1%}@media(prefers-color-scheme:dark){:root{--shadow-color: 220 40% 2%;--shadow-strength: 25%}}*{box-sizing:border-box}.land-of-three *{transform-style:preserve-3d}[type=checkbox]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}:root{--cell-size: 6vmin;--primary-hue: 280;--secondary-hue: 320;--base-drop: .05;--red: hsl(18, 100%, 50%);--yellow: hsl(44, 83%, 53%);--green: hsl(130, 52%, 46%);--blue: hsl(215, 100%, 53%);--screen-hide: 1;--intro-screen-hide: 0;--screen-delay: 0;--show-results: 0;--show-win: 0;--show-draw: 0;--show-primary-win: 0;--show-secondary-win: 0;--column-padding: .75;--gap-coefficient: .1;--primary: var(--red);--secondary: var(--yellow);--rows: 6;--column-buffer: calc(var(--cell-size) * 2);--column-padding: calc(var(--cell-size) * var(--column-padding, .75));--column-size: calc(var(--rows, 6) * var(--cell-size) + var(--column-padding, .75));--rotation: -24deg;--bg: var(--surface-1)}body{display:grid;place-items:center;min-height:100vh;overflow:hidden;background:var(--bg)}h1{color:#f8f9fa}svg{fill:currentColor}form{display:grid;place-items:center;position:fixed}.board{display:grid;grid-template-columns:repeat(7,var(--cell-size));grid-auto-flow:column;grid-gap:0 0;position:relative}.board__column{aspect-ratio:1 / var(--rows);position:relative}.board__controls{position:absolute;bottom:0;left:0}form>[type=reset]{height:50px;aspect-ratio:1;position:fixed;top:1rem;right:1rem;z-index:6;transform:translateZ(300vmin)}.board__move:hover{--show-ghost: 1}.board__move[for*=s]{--disc-hue: var(--secondary-hue)}.board__move[for*=p]{--disc-hue: var(--primary-hue)}.board__cell{aspect-ratio:1}.board__labels{--depth: var(--cell-size);color:transparent;position:absolute;height:calc((var(--rows, 6) * var(--cell-size)) + var(--column-buffer));left:0;bottom:0;cursor:pointer;z-index:2;display:block;width:100%;z-index:var(--row)}.move-controls{height:100%;position:absolute;top:0;bottom:0;left:0}.board__labels .cuboid__side{overflow:hidden}.board__move{height:100%;width:var(--cell-size);position:absolute}.board__disc--primary{--disc-color: var(--primary)}.board__disc--secondary{--disc-color: var(--secondary)}.disc{--depth: calc(var(--cell-size) * .5);color:var(--disc-color);position:absolute;inset:0;display:none;animation:drop calc((var(--base-drop) * var(--row)) * 1s)}.board__column:has([for*=s]:hover) .disc--ghost{display:block;--show-ghost: 1;--disc-color: var(--secondary)}.board__column:has([for*=p]:hover) .disc--ghost{display:block;--show-ghost: 1;--disc-color: var(--primary)}.disc--ghost{width:100%;aspect-ratio:1;color:var(--disc-color);position:absolute;top:calc(var(--column-buffer) * -1);left:0;opacity:var(--show-ghost, 1)}.win-disc{height:var(--cell-size);aspect-ratio:1;background:var(--winner)}.disc__piece{height:80%;aspect-ratio:1;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}@keyframes drop{0%{transform:translateY(calc((var(--row) * (var(--cell-size) * -1)) - (var(--column-buffer) - var(--cell-size))))}}.board__aesthetics{position:absolute;inset:calc(var(--cell-size) * -.5)}.board__cage .cuboid__side:nth-of-type(1),.board__cage .cuboid__side:nth-of-type(3),.board__cage .cuboid__side:nth-of-type(5),.board__cage .cuboid__side:nth-of-type(6){border:calc(var(--cell-size) * .5) solid var(--blue);background:repeating-linear-gradient(90deg,var(--blue) 0 calc(var(--cell-size) * .1),transparent calc(var(--cell-size) * .1) calc(var(--cell-size) * .9),var(--blue) calc(var(--cell-size) * .9) calc(var(--cell-size) * 1))}.board__cage .cuboid__side:nth-of-type(1),.board__cage .cuboid__side:nth-of-type(3){border-top:0;border-bottom:0}.board__cage .cuboid__side:nth-of-type(5),.board__cage .cuboid__side:nth-of-type(6){background:repeating-linear-gradient(90deg,var(--blue) 0 calc(var(--cell-size) * .1),transparent calc(var(--cell-size) * .1) calc(var(--cell-size) * .9),var(--blue) calc(var(--cell-size) * .9) calc(var(--cell-size) * 1)),repeating-linear-gradient(0deg,var(--blue) 0 calc(var(--cell-size) * .1),transparent calc(var(--cell-size) * .1) calc(var(--cell-size) * .9),var(--blue) calc(var(--cell-size) * .9) calc(var(--cell-size) * 1))}.board-container{transform:translateZ(100vmin) rotateX(var(--rotation, -24deg)) rotateY(var(--rotation, -24deg))}.board__cage{--depth: calc(var(--cell-size) * .55);color:var(--blue);width:100%;height:100%}.board__leg{position:absolute;bottom:-20%;width:calc(var(--cell-size) * .75);height:50%}.leg__upright{--depth: var(--cell-size);height:100%;width:100%;color:var(--blue)}.leg__foot{--depth: calc(var(--cell-size) * 4);color:var(--blue)}.board__leg--left{right:95%}.board__leg--right{left:95%}.leg{height:100%;width:100%}.leg__foot{width:100%;aspect-ratio:1;position:absolute;bottom:0;background:#a219e680}.cuboid{height:100%;width:100%;position:relative}.cuboid__side{background:currentColor;position:absolute;height:100%;width:100%;filter:brightness(var(--brightness, 1))}.cuboid__side:nth-of-type(1){--brightness: .8;top:0;height:var(--depth, 50vmin);transform:translateY(-50%) rotateX(-90deg)}.cuboid__side:nth-of-type(2){--brightness: .6;top:50%;right:0;width:var(--depth, 50vmin);transform:translate(50%,-50%) rotateY(-90deg)}.cuboid__side:nth-of-type(3){--brightness: 1;transform:translateZ(calc(var(--depth, 50vmin) / 2)) rotateY(0)}.board__cage .cuboid__side:nth-of-type(3){--brightness: 1.3;bottom:0;height:var(--depth, 50vmin);transform:translateY(50%) rotateX(90deg)}.board__cage .cuboid__side:nth-of-type(4){--brightness: .6;top:50%;width:var(--depth, 50vmin);transform:translate(-50%,-50%) rotateY(90deg)}.board__cage .cuboid__side:nth-of-type(5){--brightness: .75;transform:translateZ(calc(var(--depth, 50vmin) / -2)) rotateY(180deg)}.board__cage .cuboid__side:nth-of-type(6){--brightness: 1;transform:translateZ(calc(var(--depth, 50vmin) / 2)) rotateY(0)}.disc__piece .cuboid__side:nth-of-type(3){--brightness: 1;height:100%;width:100%;transform:translateZ(calc(var(--depth, 50vmin) / 2)) rotateY(0)}:root:has(#dismiss:checked) .screen--intro{transform:translate3d(-50%,-50%,200vmin) translateY(100vh) scale(0);z-index:-1}.screen{height:100vh;width:100vw;position:fixed;top:50%;left:50%;z-index:5;display:grid;place-items:center;transform:translate3d(-50%,-50%,200vmin);transition:transform .2s}.dialog{min-width:calc(var(--columns) * var(--cell-size));font-family:Google Sans,sans-serif;font-size:clamp(1rem,2vmin,2rem);-webkit-backdrop-filter:blur(10px) saturate(.75);backdrop-filter:blur(10px) saturate(.75);color:#f8f9fa;background:#243342cc;position:absolute;box-shadow:0 -1px 2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 2%)),0 3px 2px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 7px 5px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 3%)),0 12px 10px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 4%)),0 22px 18px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 5%)),0 41px 33px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 6%)),0 100px 80px -2px hsl(var(--shadow-color)/calc(var(--shadow-strength) + 7%));text-align:center;border-style:solid;border-top-color:var(--red);border-right-color:var(--green);border-bottom-color:var(--yellow);border-left-color:var(--blue);border-width:.5rem;display:grid}.dialog *+*{margin-top:2rem}.dialog__content{padding:1.25rem;display:grid;place-items:center;grid-column:1 / -1;grid-row:1 / -1}.dialog__content{opacity:var(--opacity, 1);z-index:var(--z, 2)}.dialog__content--intro{--opacity: calc(1 - var(--show-win, 0));--z: calc(1 - (2 * var(--show-win, 0)))}.dialog__content--win{--z: calc(-1 + (var(--show-win) * 2));--opacity: var(--show-win)}.dialog__content--draw{--z: calc(-1 + (var(--show-draw) * 2));--opacity: var(--show-draw)}.faux-button{--bg: #212529;box-sizing:border-box;font-size:max(1rem,min(4vw,1.5rem));padding:1.25rem 1.75rem;background:var(--bg);color:#f8f9fa;font-weight:700;font-family:Google Sans,sans-serif;border:.5rem solid #f8f9fa;display:inline-block;transform:translateY(calc(var(--y, 0) * 1%)) scale(var(--s));transition:transform .1s,background .1s,opacity .1s}.faux-button:hover{--bg: black;--y: -5;--s: 1.1}.faux-button:active{--bg: black;--y: 5;--s: .9}.game-reset{background:var(--bg);color:#f8f9fa;height:48px;aspect-ratio:1;padding:0;border:none;position:fixed;top:1rem;right:1rem;border-radius:50%;display:grid;place-items:center;opacity:.25}.game-reset:hover{opacity:1}.game-reset svg{width:65%}.board__labels .move-controls:after{content:counter(turn,lower-roman);font-size:1px;letter-spacing:var(--cell-size);color:transparent}.board__move[for*=s]{left:0}.board__move[for*=p]{right:0}body{counter-reset:turn 1}[id*=p]:checked{counter-increment:turn 2}[id*=s]:checked{counter-increment:turn -2}.board:has(:is([id=s-1],[id=p-1]):checked) .board__labels[data-for=move-1],.board:has(:is([id=s-2],[id=p-2]):checked) .board__labels[data-for=move-2],.board:has(:is([id=s-3],[id=p-3]):checked) .board__labels[data-for=move-3],.board:has(:is([id=s-4],[id=p-4]):checked) .board__labels[data-for=move-4],.board:has(:is([id=s-5],[id=p-5]):checked) .board__labels[data-for=move-5],.board:has(:is([id=s-6],[id=p-6]):checked) .board__labels[data-for=move-6],.board:has(:is([id=s-7],[id=p-7]):checked) .board__labels[data-for=move-7],.board:has(:is([id=s-8],[id=p-8]):checked) .board__labels[data-for=move-8],.board:has(:is([id=s-9],[id=p-9]):checked) .board__labels[data-for=move-9],.board:has(:is([id=s-10],[id=p-10]):checked) .board__labels[data-for=move-10],.board:has(:is([id=s-11],[id=p-11]):checked) .board__labels[data-for=move-11],.board:has(:is([id=s-12],[id=p-12]):checked) .board__labels[data-for=move-12],.board:has(:is([id=s-13],[id=p-13]):checked) .board__labels[data-for=move-13],.board:has(:is([id=s-14],[id=p-14]):checked) .board__labels[data-for=move-14],.board:has(:is([id=s-15],[id=p-15]):checked) .board__labels[data-for=move-15],.board:has(:is([id=s-16],[id=p-16]):checked) .board__labels[data-for=move-16],.board:has(:is([id=s-17],[id=p-17]):checked) .board__labels[data-for=move-17],.board:has(:is([id=s-18],[id=p-18]):checked) .board__labels[data-for=move-18],.board:has(:is([id=s-19],[id=p-19]):checked) .board__labels[data-for=move-19],.board:has(:is([id=s-20],[id=p-20]):checked) .board__labels[data-for=move-20],.board:has(:is([id=s-21],[id=p-21]):checked) .board__labels[data-for=move-21],.board:has(:is([id=s-22],[id=p-22]):checked) .board__labels[data-for=move-22],.board:has(:is([id=s-23],[id=p-23]):checked) .board__labels[data-for=move-23],.board:has(:is([id=s-24],[id=p-24]):checked) .board__labels[data-for=move-24],.board:has(:is([id=s-25],[id=p-25]):checked) .board__labels[data-for=move-25],.board:has(:is([id=s-26],[id=p-26]):checked) .board__labels[data-for=move-26],.board:has(:is([id=s-27],[id=p-27]):checked) .board__labels[data-for=move-27],.board:has(:is([id=s-28],[id=p-28]):checked) .board__labels[data-for=move-28],.board:has(:is([id=s-29],[id=p-29]):checked) .board__labels[data-for=move-29],.board:has(:is([id=s-30],[id=p-30]):checked) .board__labels[data-for=move-30],.board:has(:is([id=s-31],[id=p-31]):checked) .board__labels[data-for=move-31],.board:has(:is([id=s-32],[id=p-32]):checked) .board__labels[data-for=move-32],.board:has(:is([id=s-33],[id=p-33]):checked) .board__labels[data-for=move-33],.board:has(:is([id=s-34],[id=p-34]):checked) .board__labels[data-for=move-34],.board:has(:is([id=s-35],[id=p-35]):checked) .board__labels[data-for=move-35],.board:has(:is([id=s-36],[id=p-36]):checked) .board__labels[data-for=move-36],.board:has(:is([id=s-37],[id=p-37]):checked) .board__labels[data-for=move-37],.board:has(:is([id=s-38],[id=p-38]):checked) .board__labels[data-for=move-38],.board:has(:is([id=s-39],[id=p-39]):checked) .board__labels[data-for=move-39],.board:has(:is([id=s-40],[id=p-40]):checked) .board__labels[data-for=move-40],.board:has(:is([id=s-41],[id=p-41]):checked) .board__labels[data-for=move-41],.board:has(:is([id=s-42],[id=p-42]):checked) .board__labels[data-for=move-42]{display:none}.board__column:has([data-row=p-1]:checked):has([data-row=p-2]:checked):has([data-row=p-3]:checked):has([data-row=p-4]:checked)~.win,.board__column:has([data-row=p-2]:checked):has([data-row=p-3]:checked):has([data-row=p-4]:checked):has([data-row=p-5]:checked)~.win,.board__column:has([data-row=p-3]:checked):has([data-row=p-4]:checked):has([data-row=p-5]:checked):has([data-row=p-6]:checked)~.win{display:block;--winner: var(--primary);--show-win: 1}.board__column:has([data-row=s-1]:checked):has([data-row=s-2]:checked):has([data-row=s-3]:checked):has([data-row=s-4]:checked)~.win,.board__column:has([data-row=s-2]:checked):has([data-row=s-3]:checked):has([data-row=s-4]:checked):has([data-row=s-5]:checked)~.win,.board__column:has([data-row=s-3]:checked):has([data-row=s-4]:checked):has([data-row=s-5]:checked):has([data-row=s-6]:checked)~.win{display:block;--winner: var(--secondary);--show-win: 1}.board__column:has([data-row=s-1]:checked)+.board__column:has([data-row=s-1]:checked)+.board__column:has([data-row=s-1]:checked)+.board__column:has([data-row=s-1]:checked)~.win,.board__column:has([data-row=s-2]:checked)+.board__column:has([data-row=s-2]:checked)+.board__column:has([data-row=s-2]:checked)+.board__column:has([data-row=s-2]:checked)~.win,.board__column:has([data-row=s-3]:checked)+.board__column:has([data-row=s-3]:checked)+.board__column:has([data-row=s-3]:checked)+.board__column:has([data-row=s-3]:checked)~.win,.board__column:has([data-row=s-4]:checked)+.board__column:has([data-row=s-4]:checked)+.board__column:has([data-row=s-4]:checked)+.board__column:has([data-row=s-4]:checked)~.win,.board__column:has([data-row=s-5]:checked)+.board__column:has([data-row=s-5]:checked)+.board__column:has([data-row=s-5]:checked)+.board__column:has([data-row=s-5]:checked)~.win,.board__column:has([data-row=s-6]:checked)+.board__column:has([data-row=s-6]:checked)+.board__column:has([data-row=s-6]:checked)+.board__column:has([data-row=s-6]:checked)~.win{display:block;--winner: var(--secondary);--show-win: 1}.board__column:has([data-row=p-1]:checked)+.board__column:has([data-row=p-1]:checked)+.board__column:has([data-row=p-1]:checked)+.board__column:has([data-row=p-1]:checked)~.win,.board__column:has([data-row=p-2]:checked)+.board__column:has([data-row=p-2]:checked)+.board__column:has([data-row=p-2]:checked)+.board__column:has([data-row=p-2]:checked)~.win,.board__column:has([data-row=p-3]:checked)+.board__column:has([data-row=p-3]:checked)+.board__column:has([data-row=p-3]:checked)+.board__column:has([data-row=p-3]:checked)~.win,.board__column:has([data-row=p-4]:checked)+.board__column:has([data-row=p-4]:checked)+.board__column:has([data-row=p-4]:checked)+.board__column:has([data-row=p-4]:checked)~.win,.board__column:has([data-row=p-5]:checked)+.board__column:has([data-row=p-5]:checked)+.board__column:has([data-row=p-5]:checked)+.board__column:has([data-row=p-5]:checked)~.win,.board__column:has([data-row=p-6]:checked)+.board__column:has([data-row=p-6]:checked)+.board__column:has([data-row=p-6]:checked)+.board__column:has([data-row=p-6]:checked)~.win{display:block;--winner: var(--primary);--show-win: 1}.board__column:has([data-row=p-6]:checked)+.board__column:has([data-row=p-5]:checked)+.board__column:has([data-row=p-4]:checked)+.board__column:has([data-row=p-3]:checked)~.win,.board__column:has([data-row=p-5]:checked)+.board__column:has([data-row=p-4]:checked)+.board__column:has([data-row=p-3]:checked)+.board__column:has([data-row=p-2]:checked)~.win,.board__column:has([data-row=p-4]:checked)+.board__column:has([data-row=p-3]:checked)+.board__column:has([data-row=p-2]:checked)+.board__column:has([data-row=p-1]:checked)~.win,.board__column:has([data-row=p-1]:checked)+.board__column:has([data-row=p-2]:checked)+.board__column:has([data-row=p-3]:checked)+.board__column:has([data-row=p-4]:checked)~.win,.board__column:has([data-row=p-2]:checked)+.board__column:has([data-row=p-3]:checked)+.board__column:has([data-row=p-4]:checked)+.board__column:has([data-row=p-5]:checked)~.win,.board__column:has([data-row=p-3]:checked)+.board__column:has([data-row=p-4]:checked)+.board__column:has([data-row=p-5]:checked)+.board__column:has([data-row=p-6]:checked)~.win{display:block;--winner: var(--primary);--show-win: 1}.board__column:has([data-row=s-6]:checked)+.board__column:has([data-row=s-5]:checked)+.board__column:has([data-row=s-4]:checked)+.board__column:has([data-row=s-3]:checked)~.win,.board__column:has([data-row=s-5]:checked)+.board__column:has([data-row=s-4]:checked)+.board__column:has([data-row=s-3]:checked)+.board__column:has([data-row=s-2]:checked)~.win,.board__column:has([data-row=s-4]:checked)+.board__column:has([data-row=s-3]:checked)+.board__column:has([data-row=s-2]:checked)+.board__column:has([data-row=s-1]:checked)~.win,.board__column:has([data-row=s-1]:checked)+.board__column:has([data-row=s-2]:checked)+.board__column:has([data-row=s-3]:checked)+.board__column:has([data-row=s-4]:checked)~.win,.board__column:has([data-row=s-2]:checked)+.board__column:has([data-row=s-3]:checked)+.board__column:has([data-row=s-4]:checked)+.board__column:has([data-row=s-5]:checked)~.win,.board__column:has([data-row=s-3]:checked)+.board__column:has([data-row=s-4]:checked)+.board__column:has([data-row=s-5]:checked)+.board__column:has([data-row=s-6]:checked)~.win{display:block;--winner: var(--secondary);--show-win: 1}.board__column:has([data-row*="-1"]:checked):has([data-row*="-2"]:checked):has([data-row*="-3"]:checked):has([data-row*="-4"]:checked):has([data-row*="-5"]:checked):has([data-row*="-6"]:checked)+.board__column:has([data-row*="-1"]:checked):has([data-row*="-2"]:checked):has([data-row*="-3"]:checked):has([data-row*="-4"]:checked):has([data-row*="-5"]:checked):has([data-row*="-6"]:checked)+.board__column:has([data-row*="-1"]:checked):has([data-row*="-2"]:checked):has([data-row*="-3"]:checked):has([data-row*="-4"]:checked):has([data-row*="-5"]:checked):has([data-row*="-6"]:checked)+.board__column:has([data-row*="-1"]:checked):has([data-row*="-2"]:checked):has([data-row*="-3"]:checked):has([data-row*="-4"]:checked):has([data-row*="-5"]:checked):has([data-row*="-6"]:checked)+.board__column:has([data-row*="-1"]:checked):has([data-row*="-2"]:checked):has([data-row*="-3"]:checked):has([data-row*="-4"]:checked):has([data-row*="-5"]:checked):has([data-row*="-6"]:checked)+.board__column:has([data-row*="-1"]:checked):has([data-row*="-2"]:checked):has([data-row*="-3"]:checked):has([data-row*="-4"]:checked):has([data-row*="-5"]:checked):has([data-row*="-6"]:checked)+.board__column:has([data-row*="-1"]:checked):has([data-row*="-2"]:checked):has([data-row*="-3"]:checked):has([data-row*="-4"]:checked):has([data-row*="-5"]:checked):has([data-row*="-6"]:checked)+.win{display:block;--show-draw: 1}.win{display:none;width:300%;height:300%;position:fixed;top:50%;left:50%;animation:result .2s .5s both;transform:translate3d(-50%,-50%,0) rotateY(calc(var(--rotation) * -1)) rotateX(calc(var(--rotation) * -1)) translateZ(100vmin) translateY(0)}@keyframes result{0%{transform:translate3d(-50%,-50%,0) rotateY(calc(var(--rotation) * -1)) rotateX(calc(var(--rotation) * -1)) translateZ(100vmin) translateY(100vh)}}[id*=p]:checked~.board__disc{display:block;--disc-color: var(--primary)}[id*=s]:checked~.board__disc{display:block;--disc-color: var(--secondary)}.controls{display:grid;grid-template-columns:repeat(7,var(--cell-size));grid-auto-flow:column;grid-gap:0 0;position:relative}