*{font:inherit;vertical-align:baseline;box-sizing:border-box;-webkit-user-select:none;user-select:none;border:0;margin:0;padding:0}:root{--size:12vmin;--borderWidth:calc(var(--size) * .15);--player1color:#f43f5e;--player2color:#fbbf24;--boardColor:#4f46e5;--boardColorDeep:#4338ca;--wellColor:#0b1120;--pageColor:#0f172a;--gradientCircle:radial-gradient(ellipse at center, #0b112000 50%, #0b112059 51%, var(--boardColor) 55%, var(--boardColor) 100%);--textColor:#f8fafc;--mutedColor:#94a3b8}@media (width<=767px){:root{font-size:20px}}@media (width>=768px) and (width<=1024px){:root{font-size:24px}}@media (width>=1025px) and (width<=1280px){:root{font-size:28px}}@media (width>=1281px){:root{font-size:32px}}body{text-align:center;color:var(--textColor);background:var(--pageColor);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}.app{flex-direction:column;justify-content:space-between;width:100vw;height:100vh;display:flex;position:relative}.app>footer{color:var(--mutedColor);letter-spacing:.02em;justify-content:space-between;align-items:flex-end;padding:1.25rem 1.5rem;font-size:.7rem;display:flex}.app>footer a{color:var(--textColor);border-bottom:1px solid var(--boardColor);text-decoration:none}.app>footer .version{font-variant-numeric:tabular-nums;font-weight:600}.splash{z-index:200;background:var(--pageColor);will-change:transform;justify-content:center;align-items:center;transition:transform .6s cubic-bezier(.7,0,.3,1);display:flex;position:fixed;inset:0}.splash.hide{pointer-events:none;transform:translateY(-100%)}.splash .splash-inner{flex-direction:column;align-items:center;gap:1.5rem;display:flex}.splash .dots{gap:.85rem;display:flex}.splash .dot{border-radius:50%;width:1.5rem;height:1.5rem;animation:.5s cubic-bezier(.34,1.56,.64,1) forwards dotPop;transform:scale(0);box-shadow:inset 0 0 0 .22rem #0000002e}.splash .dot.p1{background:var(--player1color)}.splash .dot.p2{background:var(--player2color)}.splash .dot:first-child{animation-delay:.1s}.splash .dot:nth-child(2){animation-delay:.25s}.splash .dot:nth-child(3){animation-delay:.4s}.splash .dot:nth-child(4){animation-delay:.55s}.splash .splash-title{letter-spacing:-.03em;opacity:0;font-size:3rem;font-weight:800;animation:.6s ease-out .75s forwards titleIn;transform:translateY(10px)}.splash .splash-subtitle{color:var(--mutedColor);letter-spacing:.01em;opacity:0;margin-top:-.75rem;font-size:1.1rem;font-weight:500;animation:.6s ease-out 1s forwards titleIn;transform:translateY(10px)}@keyframes dotPop{to{transform:scale(1)}}@keyframes titleIn{to{opacity:1;transform:translateY(0)}}#size{width:var(--size);height:var(--size);position:fixed}#template{display:none}.checker{width:var(--size);height:var(--size);z-index:2;background:var(--player1color);border-radius:50%;justify-content:center;align-items:center;display:flex}.checker>div{background:0 0;border:0;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.checker>div>div{width:62%;height:62%;box-shadow:inset 0 0 0 calc(var(--size) * .045) #0000002e;background:0 0;border-radius:50%}.checker>div>div>div{display:none}.checker.player1{background:var(--player1color)}.checker.player2{background:var(--player2color)}.blink{animation:1s linear infinite blinker}@keyframes blinker{50%{opacity:.4}}#board{box-sizing:content-box;border-radius:1.25rem;flex-direction:column;width:fit-content;margin:0 auto;display:flex;position:relative;overflow:visible}#board .next{height:var(--size);padding:0 var(--borderWidth);position:relative}#board .next .track{height:var(--size);display:flex;position:relative;overflow:hidden}#board .next .track .column{width:var(--size)}#board .next .track .checker{left:0;bottom:calc(var(--size) / -12);transition:left .5s ease-out;position:absolute}@media (hover:none){#board .next .track .checker{display:none}}#board .next .opening{box-sizing:border-box;background:var(--boardColor);border:solid var(--borderWidth) var(--boardColor);width:100%;height:calc(var(--borderWidth) * 2.75);border-bottom-width:0;border-top-left-radius:1.25rem;border-top-right-radius:1.25rem;flex-direction:column;display:flex;position:absolute;bottom:0;left:0;right:0}#board .next .opening .background{height:var(--borderWidth);z-index:1;background:0 0}#board .next .opening .background div{width:100%;height:calc(var(--borderWidth) * .5);margin-top:calc(var(--borderWidth) * .5);border-top-left-radius:calc(var(--size) * .1);border-top-right-radius:calc(var(--size) * .1);background-color:#00000038}#board .next .opening .foreground{height:var(--borderWidth);z-index:4;top:var(--borderWidth);border-bottom:solid var(--borderWidth) var(--boardColor);background:0 0}#board .next .opening .foreground div{width:100%;height:calc(var(--borderWidth) * .5);margin-bottom:calc(var(--borderWidth) * .5);border-bottom-left-radius:calc(var(--size) * .1);border-bottom-right-radius:calc(var(--size) * .1);background-color:#00000038}#board>.foreground{top:var(--size);z-index:3;background-image:var(--gradientCircle);background-position:0 0, var(--size) var(--size);background-size:var(--size) var(--size);pointer-events:none;border:solid var(--borderWidth) var(--boardColor);border-top:none;border-bottom-right-radius:1.25rem;border-bottom-left-radius:1.25rem;width:100%;margin-bottom:-1.35vmin;position:absolute;bottom:0}#board .columns{background:var(--wellColor);flex-direction:row;margin-left:1.35vmin;margin-right:1.35vmin;display:flex;position:relative}#board .columns .column{height:calc(var(--size) * 6);width:var(--size);box-sizing:content-box;flex-direction:column-reverse;justify-content:flex-start;display:flex;position:relative}#board .columns .column .checker{z-index:1}.modal{z-index:100;will-change:transform;justify-content:center;align-items:center;transition:transform .55s cubic-bezier(.7,0,.3,1);display:none;position:fixed;inset:0}.modal.show{display:flex}.modal.slide-out{pointer-events:none;transform:translateY(-100%)}.modal .backdrop{-webkit-backdrop-filter:blur(6px);z-index:101;background-color:#02061799;position:fixed;inset:0}.modal .dialog{z-index:102;-webkit-backdrop-filter:blur(16px);color:var(--textColor);background:#1e293bd1;border:1px solid #ffffff14;border-radius:1.5rem;width:fit-content;max-width:20rem;padding:2rem;position:relative;box-shadow:0 24px 60px #0206178c}.modal .dialog h1{letter-spacing:-.02em;margin-bottom:1rem;font-size:2rem;font-weight:700}.modal .dialog p{color:var(--mutedColor);margin-bottom:.75rem}.modal .dialog p:last-child{margin-bottom:0}.modal .dialog footer{margin-top:1.5rem}.modal .dialog .intro{justify-content:center;gap:2.5rem;margin-top:1.5rem;display:flex}.modal .dialog .intro>div{flex-direction:column;justify-content:center;align-items:center;display:flex}.modal .dialog .intro p{color:var(--textColor);text-transform:lowercase;margin:0;font-weight:600}.modal .dialog .intro .checker{--size:4rem;margin-bottom:.75rem}#game-start .backdrop{background:var(--pageColor);-webkit-backdrop-filter:none}#game-start .dialog{-webkit-backdrop-filter:none;box-shadow:none;background:0 0;border:0;max-width:26rem}[data-show]{opacity:0;pointer-events:none;transform:translateY(4px)}[data-show].show{opacity:1;pointer-events:auto;transition:opacity .4s ease-out,transform .4s ease-out;transform:translateY(0)}.btn{background:var(--boardColor);color:#fff;font:inherit;cursor:pointer;border-radius:.85rem;padding:.7em 1.6em;font-size:1.4rem;font-weight:600;transition:background .2s,transform .12s,box-shadow .2s;box-shadow:0 8px 20px #4f46e559}.btn:hover{background:#6366f1;transform:translateY(-2px);box-shadow:0 12px 26px #4f46e573}.btn:active{transform:translateY(0);box-shadow:0 6px 14px #4f46e559}