.loading-container{--w: 6rem;--h: 7rem;--xspace: calc(var(--w) / 2);--yspace: calc(var(--h) / 4 - 1rem / 16);--speed: 2s;padding:2rem;border:1px solid var(--card-border-color);border-radius:var(--border-radius);background:var(--card-color)}.loading-container:hover{border:1px solid var(--accent-color)}.loading-container:active{border:1px solid var(--card-border-color-hover)}.loading-container .piece{position:relative;width:calc(var(--w) * 2.5);height:calc(var(--h) * 1.44)}.loading-container .piece .p svg path.inner{transition:fill ease .3s}.loading-container .piece.white .p svg path.inner{fill:var(--white)}.loading-container .piece.o .p svg path.inner{fill:var(--o)}.loading-container .piece.i .p svg path.inner{fill:var(--i)}.loading-container .piece.l .p svg path.inner{fill:var(--l)}.loading-container .piece.j .p svg path.inner{fill:var(--j)}.loading-container .piece.s .p svg path.inner{fill:var(--s)}.loading-container .piece.t .p svg path.inner{fill:var(--t)}.loading-container .piece.z .p svg path.inner{fill:var(--z)}.loading-container .piece .p{width:var(--w);height:var(--h);position:absolute;transition:all ease .3s;background:url('data:image/svg+xml;utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 684"%3E%3Cpath fill="%23010101" d="M305.7 0L0 170.9v342.3L305.7 684 612 513.2V170.9L305.7 0z"/%3E%3Cpath fill="%23fff" d="M305.7 80.1l-233.6 131 233.6 131 234.2-131-234.2-131"/%3E%3C/svg%3E') no-repeat top center}.loading-container .piece .p-1{animation:p1 var(--speed) ease-out infinite}.loading-container .piece .p-2{animation:p2 var(--speed) ease-out infinite}.loading-container .piece .p-3{animation:p3 var(--speed) ease-out infinite;z-index:2}.loading-container .piece .p-4{animation:p4 var(--speed) ease-out infinite}@keyframes p1{0%,40%{transform:translate(0)}50%{transform:translate(var(--xspace),var(--yspace))}60%,to{transform:translate(calc(var(--xspace) * 2))}}@keyframes p2{0%,20%{transform:translate(calc(var(--xspace) * 2))}40%,to{transform:translate(calc(var(--xspace) * 3),var(--yspace))}}@keyframes p3{0%{transform:translate(calc(var(--xspace) * 3),var(--yspace))}20%,60%{transform:translate(calc(var(--xspace) * 2),calc(var(--yspace) * 2))}90%,to{transform:translate(var(--xspace),var(--yspace))}}@keyframes p4{0%,60%{transform:translate(var(--xspace),var(--yspace))}90%,to{transform:translate(0)}}.hydrate-container{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2rem;padding:0 2rem}.hydrate-container p{max-width:1024px;font-size:1.1rem}button.menu{--circles-spacing: .25rem;--circle-diameter: .5rem;--diagonal-width: 1.25rem;--diagonal-height: .25rem;--circles-color: var(--text-color);display:flex;justify-content:center;align-items:center;gap:.5rem}button.menu .circles{position:relative;display:flex;justify-content:center;align-items:center;gap:var(--circles-spacing)}button.menu .circles .circle{background:var(--circles-color);border-radius:50%;width:var(--circle-diameter);height:var(--circle-diameter)}.menu-container button.menu{transform:translateY(-300%);animation:1s ease forwards bring-from-top}button.menu .diagonals .diagonal{position:absolute;top:calc(50% - var(--diagonal-height) / 2);right:calc(50% - var(--diagonal-width) / 2);width:var(--diagonal-width);height:var(--diagonal-height);border-radius:var(--border-radius-round);background:var(--circles-color)}button.menu .diagonals .diagonal.bot{top:calc(50% - var(--diagonal-width) / 2);right:calc(50% - var(--diagonal-height) / 2);width:var(--diagonal-height);height:var(--diagonal-width)}button.menu .circles{transition:transform .2s ease-out}button.menu:hover .circles{transform:rotate(90deg)}.menu-container.hide button.menu .circles .circle{transition:transform .2s .2s ease-out}.menu-container.show button.menu .circles .circle{transition:transform .2s ease-out}.menu-container.show button.menu .circles .circle.top{transform:translate(calc(var(--circles-spacing) / 2 + var(--circle-diameter) / 2)) scale(.9)}.menu-container.show button.menu .circles .circle.bot{transform:translate(calc(-1 * var(--circles-spacing) / 2 - var(--circle-diameter) / 2)) scale(.9)}.menu-container.hide button.menu .diagonals .diagonal{transition:transform .2s ease-in;transform:rotate(45deg) scale(0)}.menu-container.show button.menu .diagonals .diagonal{transition:transform .2s .2s ease;transform:rotate(45deg) scale(1)}@keyframes bring-from-top{0%{transform:translateY(-300%)}to{transform:translateY(0)}}.main.menu-container{font-size:1.25rem;font-weight:700}.main.menu-container button.menu{z-index:2;position:fixed;top:2rem;left:2rem}.main.menu-container nav{z-index:1;position:fixed;top:5.7rem;left:2rem;display:none;flex-direction:column;gap:1rem}.main.menu-container nav ul{padding:.75rem 1rem;border:1px solid var(--card-border-color);border-radius:var(--border-radius);width:15rem;display:flex;flex-direction:column;gap:.25rem;background:var(--color)}.main.menu-container nav ul li{display:flex;justify-content:center}.main.menu-container nav ul li a{position:relative;width:fit-content;text-align:center;display:block;padding:.75rem .25rem}.main.menu-container nav ul li a:before{position:absolute;bottom:0;left:0;content:"";width:100%;height:.15rem;background:var(--accent-color);transition:transform .2s ease-out;transform-origin:left;transform:scale(0)}.main.menu-container nav ul li a:hover:before{transform:scale(1)}.main.menu-container nav ul:has(li a:hover){border:1px solid var(--accent-color)}.main.menu-container.show nav,.main.menu-container.hide nav.animate{display:flex}.main.menu-container nav .nav-overlay{z-index:-1;position:fixed;top:calc(50vh - max(100vw,100vh));left:calc(50vw - max(100vw,100vh));width:calc(2*max(100vw,100vh));height:calc(2*max(100vw,100vh));border-radius:50%;background:var(--overlay-color);transition:transform .6s linear;transform:scale(0);transform-origin:top left}.main.menu-container.show nav.animate .nav-overlay{transform:scale(1)}.main.menu-container.hide nav.animate .nav-overlay{transform:scale(0)}.main.menu-container nav ul{transition:border .2s ease-out,transform .3s .2s ease,opacity .3s .2s ease-out;transform:translateY(10rem) rotate(-15deg);transform-origin:top right;opacity:0}.main.menu-container nav ul:nth-child(2n){transform:translateY(10rem) rotate(15deg)}.main.menu-container.show nav.animate ul{transform:rotate(0);opacity:1}.main.menu-container.hide nav.animate ul{transform:translateY(10rem) rotate(-15deg);opacity:0}.main.menu-container.hide nav.animate ul:nth-child(2n){transform:translateY(10rem) rotate(15deg)}.error-container{text-align:center;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2rem;padding:2rem 1rem}.error-container .title{font-size:3rem}.error-container .desc{max-width:30rem}.error-container .error-text{color:var(--text-color-dim)}.hero-container{min-height:100vh;background:var(--color-light);display:flex;justify-content:center;align-items:center}body:has(section.no-scroll){overflow-y:hidden}.hero-container{position:relative;z-index:1}.hero-container .bar-animation{position:absolute;top:50%;transform:translate(-100%,-50%) scaleY(.333);left:0;width:100%;height:100%;overflow:hidden;content:"";z-index:-1;background-color:var(--color);border-radius:var(--border-radius-round);animation:1s ease forwards bar-slide-right,1s ease-in 2.8s forwards bar-fill-height}.hero-container .words-container{font-weight:700;font-size:3rem;position:absolute;top:40%;height:20%;left:5%;width:90%}.hero-container .words-container .word-container{position:absolute;top:50%;transform:translateY(-50%);left:0;width:100%}.hero-container .words-container .word-container .letter{position:absolute;top:0;transform:translate(-50%,-300%);opacity:0}.hero-container .words-container .word-container-1 .letter,.hero-container .words-container .word-container-2 .letter{animation:1.3s ease forwards letter-slide-in-out}.hero-container .words-container .word-container-3 .letter{animation:1.5s ease forwards letter-zoom-fade}@keyframes bar-slide-right{0%{transform:translate(-100%,-50%) scaleY(.333)}to{transform:translateY(-50%) scaleY(.333)}}@keyframes bar-fill-height{0%{transform:translateY(-50%) scaleY(-.333)}65%{transform:translateY(-50%) scaleY(0)}to{transform:translateY(-50%) scaleY(1)}}@keyframes letter-slide-in-out{0%{transform:translate(-50%,-300%);opacity:0}30%{transform:translate(-50%,-50%);opacity:1}70%{transform:translate(-50%,-60%);opacity:1}to{transform:translate(-50%,200%);opacity:0}}@keyframes letter-zoom-fade{0%{transform:translate(-50%,-300%)}30%{transform:translate(-50%,-45%)}70%{transform:translate(-50%,-55%);opacity:1}to{transform:translate(-50%,-55%) scale(0);opacity:0}}@media screen and (min-width: 768px){.hero-container .word-container{font-size:5rem}}svg.svg-arrow{margin-right:.7rem;cursor:pointer;overflow:visible;color:var(--text-color)}svg.svg-arrow.left{margin-right:-.7rem;margin-left:1.4rem}svg.svg-arrow path{transition:all 1s cubic-bezier(.2,1,.3,1)}svg.svg-arrow:hover path{transition:all 1s cubic-bezier(.2,1,.3,1)}svg.svg-arrow:hover .arrow{animation:arrow-svg-anim 1s cubic-bezier(.2,1,.3,1) infinite}svg.svg-arrow:hover .arrow-fixed{animation:arrow-svg-fixed-anim 1s cubic-bezier(.2,1,.3,1) infinite}@keyframes arrow-svg-anim{0%{opacity:1;transform:translate(0)}5%{transform:translate(-.6rem)}to{transform:translate(6rem);opacity:0}}@keyframes arrow-svg-fixed-anim{5%{opacity:0}20%{opacity:.4}to{opacity:1}}.welcome-page-container{min-height:100%;display:flex;justify-content:center;align-items:center}.welcome-page-container .welcome-container{display:flex;flex-direction:column;align-items:center;gap:3rem;text-align:center;font-size:1.5rem}.welcome-page-container .welcome-container h1{font-size:4rem}.welcome-page-container .welcome-container .play-button{--border-width: 1px;cursor:pointer;position:relative;background-color:var(--color);border-radius:var(--border-radius);font-size:1.5rem;font-weight:700;width:fit-content;height:4rem;padding:1rem 1rem 1rem 2rem;display:flex;justify-content:center;align-items:center;gap:.5rem}.welcome-page-container .welcome-container .play-button:after{position:absolute;content:"";top:calc(-1 * var(--border-width));left:calc(-1 * var(--border-width));z-index:-1;width:calc(100% + var(--border-width) * 2);height:calc(100% + var(--border-width) * 2);background:var(--card-border-color);border-radius:var(--border-radius)}.welcome-page-container .welcome-container .play-button:hover:after{background:linear-gradient(66deg,var(--accent-color),var(--accent-color),var(--card-border-color-hover),var(--card-border-color-hover),var(--card-border-color-hover));background-size:300% 300%;background-position:0 50%;animation:moveGradient 3s ease infinite}.welcome-page-container .welcome-container .play-button svg{height:1.4rem;width:1.4rem}.welcome-page-container .welcome-container .play-button:hover svg path.arrow-fixed{animation:arrow-svg-fixed-anim 3s cubic-bezier(.2,1,.3,1) infinite}.welcome-page-container .welcome-container .play-button:hover svg path.arrow{animation:arrow-svg-anim 3s cubic-bezier(.2,1,.3,1) infinite}@media screen and (min-width: 768px){.welcome-page-container .welcome-container{font-size:2rem}}@keyframes moveGradient{50%{background-position:100% 50%}}@keyframes arrow-svg-anim{0%{opacity:1;transform:translate(0);fill:var(--accent-color)}2.5%{transform:translate(-.6rem)}49.99%{transform:translate(6rem);opacity:0}50%{fill:var(--text-color);opacity:1;transform:translate(0)}52.5%{transform:translate(-.6rem)}70%{fill:var(--text-color)}to{transform:translate(6rem);opacity:0;fill:var(--accent-color)}}@keyframes arrow-svg-fixed-anim{0%{fill:var(--accent-color)}2.5%{opacity:0}10%{opacity:.4}49.99%{opacity:1}50%{fill:var(--text-color);opacity:1}52.5%{opacity:0}60%{opacity:.4}70%{fill:var(--text-color)}to{opacity:1;fill:var(--accent-color)}}footer{position:relative;padding:2rem 4rem;background:var(--color-light);display:flex;justify-content:center;align-items:center;height:10rem}footer svg{position:relative;z-index:1;color:var(--text-color);width:3rem;height:3rem;padding:.1rem;transition:color .5s ease-out}footer svg:hover{color:var(--accent-color)}footer .lines{position:absolute;top:30%;left:10%;width:80%;height:40%;overflow:hidden}footer .line{position:absolute;background:var(--text-color)}footer .left-line{top:0;left:0;height:100%;width:.15rem;transition:all .2s .2s ease-out;transform:scale(0);transform-origin:bottom}footer .right-line{top:0;left:calc(100% - .15rem);height:100%;width:.15rem;transition:all .2s .2s ease-out;transform:scale(0);transform-origin:bottom}footer .bottom-left-line{top:calc(100% - .15rem);left:0;height:.15rem;width:calc(50% + .15rem);transition:all .4s ease-out;transform:scale(0) translate(50%);transform-origin:right}footer .bottom-right-line{top:calc(100% - .15rem);right:0;height:.15rem;width:calc(50% + .15rem);transition:all .4s ease-out;transform:scale(0) translate(-50%);transform-origin:left}footer:has(a:hover) .left-line,footer:has(a:hover) .right-line,footer:has(a:hover) .bottom-right-line{background:var(--accent-color);transform:scale(1)}footer:has(a:hover) .bottom-left-line{background:var(--accent-color);transform:scale(1) translate(-100%)}footer:has(a:hover) .bottom-right-line{background:var(--accent-color);transform:scale(1) translate(100%)}main.home{min-height:100vh;display:flex}main.home section{width:100%}.game.menu-container{--button-height: 3rem;--button-width: 10rem;--button-gap: .5rem;position:relative;display:flex;flex-direction:column;gap:var(--button-gap);padding:2rem 0;transition:height .4s .2s ease,width .4s ease}.game.menu-container button.menu{--circle-diameter: .6rem;--diagonal-width: 1.6rem;--diagonal-height: .3rem;--circles-color: var(--text-color);position:absolute;z-index:1;top:2rem;height:var(--button-height);width:var(--button-width);flex-direction:row-reverse;justify-content:flex-end;gap:1rem;font-size:1.1rem;border:1px solid transparent;color:var(--text-color);animation:.3s .15s ease forwards bring-from-top}.game.menu-container button.menu:focus{outline:none}.game.menu-container button.menu:hover,.game.menu-container button.menu:focus{border:1px solid var(--accent-color)}.game.menu-container button.menu:active{border:1px solid var(--card-border-color-active)}.game.menu-container button.menu .circles{height:1.5rem;width:1.5rem}.game.menu-container .game-nav{display:none;padding-top:calc(var(--button-gap) + var(--button-height));flex-direction:column}.game.menu-container .game-nav ul{display:flex;flex-direction:column;gap:var(--button-gap)}.game.menu-container .game-nav li button{height:var(--button-height);width:var(--button-width);cursor:pointer;display:flex;align-items:center;gap:1rem;font-size:1.1rem;font-weight:700;padding:1rem;border-radius:var(--border-radius);border:1px solid transparent;color:var(--text-color);transition:all .2s ease-out}.game.menu-container .game-nav li button:focus{outline:none}.game.menu-container .game-nav li button svg{height:1.5rem;width:1.5rem;transition:color .2s ease-out;color:var(--text-color)}.game.menu-container .game-nav li button.selected{background:var(--color-light);border:1px solid var(--card-border-color)}.game.menu-container .game-nav li button:hover,.game.menu-container .game-nav li button:focus,.game.menu-container .game-nav li button.selected:hover{border:1px solid var(--accent-color)}.game.menu-container .game-nav li button:active,.game.menu-container .game-nav li button.selected:active{border:1px solid var(--card-border-color-active)}.game.menu-container .game-nav li button.selected svg{color:var(--accent-color)}.game.menu-container .game-nav li button:active svg{color:var(--text-color)}.game.menu-container.show{height:24.5rem}.game.menu-container.hide{height:7rem}.game.menu-container.show .game-nav,.game.menu-container.hide .game-nav.animate{display:flex}.game.menu-container .game-nav{transition:transform .3s .1s ease,opacity .3s .1s ease-in;transform:translateY(-15rem);opacity:0}.game.menu-container.show .game-nav.animate{transform:translateY(0);opacity:1}.game.menu-container.hide .game-nav.animate{transform:translateY(-15rem);opacity:0}@media screen and (min-width: 768px){.game.menu-container button.menu{position:fixed}.game.menu-container.hide button.menu{opacity:.5;border:1px solid var(--card-border-color);transition:border ease-out .2s,opacity ease-out .2s}.game.menu-container.hide button.menu:hover,.game.menu-container.hide button.menu:focus{opacity:1;border:1px solid var(--accent-color)}.game.menu-container.hide button.menu:active{border:1px solid var(--card-border-color-active)}.game.menu-container .game-nav{position:fixed;top:50%;transform:translate(-15rem,-50%);opacity:0}.game.menu-container.show .game-nav.animate{transform:translateY(-50%)}.game.menu-container.hide .game-nav.animate{transform:translate(-15rem,-50%) translate(-15rem);opacity:0}}#map-search-form{width:100%;display:flex;flex-direction:column;gap:1rem}#map-search-form label,#map-search-form select{height:3rem;background:var(--color-lighter);border-radius:var(--border-radius)}#map-search-form select{cursor:pointer;padding:0 1rem}#map-search-form label{cursor:text;padding-right:.5rem;display:flex;align-items:center;gap:1rem}#map-search-form label .icon-container{width:3rem;height:100%;background:var(--color);overflow:hidden;border-top-left-radius:var(--border-radius);border-bottom-left-radius:var(--border-radius);display:flex;justify-content:center;align-items:center}#map-search-form svg{color:var(--text-color);height:1rem;width:1rem}#map-search-form label button.key-shortcut{cursor:pointer;background:var(--color);border-radius:var(--border-radius);width:fit-content;height:70%;font-size:.8rem;display:flex;align-items:center;justify-content:center;padding:0 .75rem}#map-search-form button.filter{height:3rem;width:3rem;display:flex;justify-content:center;align-items:center}#map-search-form:has(input:not(:focus)) label button.key-shortcut:after{content:"/"}#map-search-form:has(input:focus) button.key-shortcut:after{content:"Esc"}#map-search-form:has(input:not(:focus)) button.key-shortcut:focus:after{content:"Enter"}#map-search-form:has(input:not(:placeholder-shown)) button.key-shortcut:after{content:"Enter"}#map-search-form input{flex:1;height:2rem;color:var(--text-color)}#map-search-form input::placeholder{color:var(--text-color-dim)}#map-search-form input:focus,#map-search-form select:focus{outline:none}#map-search-form.loading label{animation:.5s ease infinite alternate loading-border}#map-search-form.loading label .icon-container svg{animation:.5s ease infinite alternate loading-icon}@keyframes loading-border{0%{border:1px solid var(--card-border-color-active)}to{border:1px solid var(--accent-color)}}@keyframes loading-icon{0%{color:var(--text-color)}to{color:var(--accent-color)}}@media screen and (min-width: 1024px){#map-search-form{flex-direction:row;align-self:flex-start}#map-search-form label{flex:1}#map-search-form select{width:10rem}}.feature-map-container{width:100%;display:grid;grid-template-columns:1fr auto;grid-template-rows:repeat(2,auto) 1fr repeat(6,auto);grid-template-areas:"title title" "author map" "empty map" "tag map" "stars map" "difficulty map" "attempts map" "description description" "play-add play-add";justify-content:space-between;gap:.1rem}.feature-map-container svg{width:1.1rem;height:1.1rem}.feature-map-container .detail-icon{display:flex;align-items:center;gap:1rem}.feature-map-container .title{grid-area:title;justify-self:center;font-size:1.25rem;font-weight:700;margin-bottom:1rem}.feature-map-container .author{grid-area:author;margin-bottom:1rem}.feature-map-container .tag{grid-area:tag}.feature-map-container .stars{grid-area:stars}.feature-map-container .difficulty{grid-area:difficulty}.feature-map-container .attempts{grid-area:attempts}.feature-map-container .description{margin:1rem 0;grid-area:description}.feature-map-container .play-add{grid-area:play-add;display:flex;gap:2rem}.feature-map-container .feature-map{grid-area:map;justify-self:end;aspect-ratio:1 / 2;height:100%;min-height:16rem;background-color:#8a2be2}.feature-map-container .title,.feature-map-container .author,.feature-map-container .description{max-width:100%;overflow-wrap:break-word}@media screen and (min-width: 768px){.feature-map-container .feature-map{height:20rem}}@media screen and (min-width: 1024px){.feature-map-container{grid-template-columns:8rem 1fr auto;grid-template-rows:repeat(2,auto) 1fr repeat(4,auto);grid-template-areas:"title title map" "author author map" "description description map" "empty empty map" "tag stars map" "difficulty attempts map" "play-add play-add map";justify-content:space-between;gap:.5rem}.feature-map-container .title{justify-self:start;margin-bottom:0}.feature-map-container .description{margin:0;margin-right:1rem}.feature-map-container .play-add{margin-top:1rem}}.map-container{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5rem}.map-container .featured-maps-container{width:100%;display:grid;column-gap:3rem;row-gap:5rem}@media screen and (min-width: 768px){.map-container{padding-top:5rem}}@media screen and (min-width: 1024px){.map-container .featured-maps-container{grid-template-columns:repeat(auto-fit,minmax(35rem,1fr))}}.design-container{display:flex;flex-direction:column;gap:2rem}.design-container .mode{height:3.5rem;width:10rem;display:flex;justify-content:center;align-items:center;font-size:1.1rem}.solo-container{display:flex;flex-direction:column;gap:2rem}.solo-container .mode{height:3.5rem;width:10rem;display:flex;justify-content:center;align-items:center;font-size:1.1rem}.practice-menu-container{display:flex;flex-direction:column;gap:2rem}.practice-menu-container .practice{height:3.5rem;width:10rem;display:flex;justify-content:center;align-items:center;font-size:1.1rem}.settings-container{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2rem}.settings-container .instructions{position:fixed;z-index:1;top:0;right:0;width:100%;height:100%;background-color:var(--color);font-size:2rem;font-weight:700;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2rem}.settings-container .instructions .text{font-size:1.5rem;font-weight:400}.settings-container .instructions .keys{font-size:1.5rem;font-weight:400;height:2.5rem;display:flex;align-items:center}.settings-container .config-container{width:90%;background-color:var(--card-color);border:1px solid var(--card-border-color);border-radius:var(--border-radius);box-shadow:var(--card-shadow);padding:2rem 3rem;font-size:1.2rem;display:flex;flex-direction:column;gap:1rem}.settings-container .config-container .title{font-size:1.5rem;font-weight:700}.settings-container .config-container .key-config{cursor:pointer;padding:.5rem 1rem;background-color:var(--color-light);display:flex;justify-content:space-between;align-items:center}.settings-container .config-container .key-config:hover{background-color:var(--color)}.settings-container .config-container .key-config:active{background-color:var(--color-lighter)}.settings-container .config-container label{cursor:pointer;flex:1}.settings-container .config-container input{background-color:var(--card-color);width:4rem;padding:.3rem .5rem;border-radius:var(--border-radius);border:1px solid var(--card-border-color);display:flex;text-align:end}.settings-container .config-container input.error{border:1px solid var(--error-color);animation:shake .82s cubic-bezier(.36,.07,.19,.97) both}@media screen and (min-width: 768px){.settings-container{padding-top:5rem}}main.play{min-height:100vh;display:flex;flex-direction:column;gap:.5rem;background:var(--color-light);padding:.5rem;border-radius:var(--border-radius-round);overflow:hidden}main.play .game.menu-container{background:var(--color);border-radius:var(--border-radius-round);display:flex;justify-content:center;align-items:center}main.play .content-container{background:var(--color);border-radius:var(--border-radius-round);flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:2rem}@media screen and (min-width: 768px){main.play{flex-direction:row;align-items:stretch}main.play .game.menu-container{height:auto;width:14rem}main.play:has(.game.menu-container.hide .game-nav.animate){gap:.5rem}main.play:has(.game.menu-container.hide){gap:0}main.play .game.menu-container.hide{width:0}main.play .game.menu-container button.menu{position:fixed;top:2.5rem;left:2.5rem}main.play .content-container{flex:1}}.game-container{--cell-size: 1.75rem;--border-width: 2px;--gap: 0rem;--garbage-width: .9rem;--cell-border-width: 2px;position:relative;height:calc(26 * var(--cell-size));display:grid;grid-template-columns:auto auto auto;grid-template-rows:auto auto auto;grid-template-areas:"hold board next" "stats board next" "stats board more-stat";align-content:end;gap:var(--gap);-webkit-user-select:none;user-select:none}.game-container .board-top{box-sizing:content-box;width:calc(10 * var(--cell-size));position:absolute;left:round(nearest,calc(6 * var(--cell-size) + var(--gap) + var(--garbage-width) + 2 * var(--border-width)),.5px);bottom:calc(20 * var(--cell-size) + var(--border-width) - 1px);display:grid;grid-template-columns:repeat(10,var(--cell-size))}.game-container .garbage{position:absolute;left:calc(6 * var(--cell-size) + 1 * var(--border-width) + var(--gap));bottom:0;width:var(--garbage-width);border-bottom-left-radius:var(--border-radius);overflow:hidden;display:grid;justify-items:end}.game-container .garbage:after{position:absolute;z-index:1;content:"";bottom:0;left:0;width:100%;height:calc(20 * var(--cell-size) - 1px);border-left:var(--border-width) solid var(--text-color);border-bottom:var(--border-width) solid var(--text-color);border-bottom-left-radius:var(--border-radius)}.game-container .garbage .garbage-cell{height:var(--cell-size);width:calc(var(--garbage-width) - var(--border-width))}.game-container .garbage .garbage-cell.uncharged{background-color:#f2d74c}.game-container .garbage .garbage-cell.charged{background-color:#65dbc8}.game-container .hold{box-sizing:content-box;width:calc(4 * var(--cell-size));height:calc(2 * var(--cell-size));grid-area:hold;padding:var(--cell-size);margin-right:var(--garbage-width);display:grid;grid-template-rows:repeat(2,var(--cell-size));grid-template-columns:repeat(4,var(--cell-size));border:var(--border-width) solid var(--text-color);border-right:none;border-bottom-left-radius:var(--border-radius);border-top-left-radius:var(--border-radius)}.game-container .board{box-sizing:content-box;width:calc(10 * var(--cell-size));height:calc(20 * var(--cell-size) - 1px);grid-area:board;display:grid;grid-template-columns:repeat(10,var(--cell-size));grid-template-rows:repeat(20,var(--cell-size));border:var(--border-width) solid var(--text-color);border-top:none;border-bottom-right-radius:var(--border-radius);overflow:hidden}.game-container .next{box-sizing:content-box;width:calc(4 * var(--cell-size));height:calc(14 * var(--cell-size));grid-area:next;padding:var(--cell-size);display:grid;grid-template-columns:repeat(4,var(--cell-size));grid-template-rows:repeat(14,var(--cell-size));border:var(--border-width) solid var(--text-color);border-left:none;border-bottom-right-radius:var(--border-radius);border-top-right-radius:var(--border-radius)}.game-container .stats{grid-area:stats;display:flex;flex-direction:column;justify-content:center;gap:1rem}.game-container .more-stat{grid-area:more-stat;display:flex;flex-direction:column;justify-content:center;align-items:center}.game-container .cell{width:var(--cell-size);height:var(--cell-size)}.game-container .board .cell{border:.1px solid #77777733}.game-container .cell.ghost{background-color:#434343;border:none}.game-container .cell.o{background-color:#f2d74c;border:none}.game-container .cell.i{background-color:#65dbc8;border:none}.game-container .cell.l{background-color:#eda93f;border:none}.game-container .cell.j{background-color:#3358dd;border:none}.game-container .cell.s{background-color:#7acd44;border:none}.game-container .cell.t{background-color:#c132d0;border:none}.game-container .cell.z{background-color:#d83a28;border:none}.game-container .cell.g{background-color:#e6e6e6;border:none}.game-container .cell.hg{border:var(--cell-border-width) solid #e6e6e6}.game-container .cell.ho{border:var(--cell-border-width) solid #f2d74c}.game-container .cell.hi{border:var(--cell-border-width) solid #65dbc8}.game-container .cell.hl{border:var(--cell-border-width) solid #eda93f}.game-container .cell.hj{border:var(--cell-border-width) solid #3358dd}.game-container .cell.hs{border:var(--cell-border-width) solid #7acd44}.game-container .cell.ht{border:var(--cell-border-width) solid #c132d0}.game-container .cell.hz{border:var(--cell-border-width) solid #d83a28}.ff.game-container .board-top{left:calc(6 * var(--cell-size) + var(--gap) + var(--garbage-width) + 2 * var(--border-width));bottom:calc(20 * var(--cell-size) + var(--border-width))}.ff.game-container .board{height:calc(20 * var(--cell-size))}.ff.game-container .garbage:after{height:calc(20 * var(--cell-size))}@media screen and (min-width: 768px){.game-container{height:auto;align-content:normal}}section.game{display:grid;place-items:center;height:100%}@media screen and (min-width: 768px){section.game{height:100%}}.designer-container{height:100%;display:flex;justify-content:center;align-items:center}.game-settings-menu-form-container{width:100%;height:100%;padding:3rem 2rem;padding-top:0;margin-bottom:3rem}#game-settings-menu-form{display:flex;flex-direction:column;gap:.5rem}#game-settings-menu-form .title{font-size:1.2rem;font-weight:700}#game-settings-menu-form #game-settings-options{margin-bottom:1rem}#game-settings-menu-form select.main{background:var(--color-lighter);height:3rem}#game-settings-menu-form select{width:100%;height:2.25rem;background:var(--color-light);border-radius:var(--border-radius);cursor:pointer;padding:0 1rem;font-size:1rem}#game-settings-menu-form select option{font-size:1rem}#game-settings-menu-form label{cursor:pointer;padding-right:.5rem;display:flex;align-items:center;margin-top:.7rem}#game-settings-menu-form input{background-color:var(--color-light);padding:.5rem 1rem;border-radius:var(--border-radius);border:1px solid var(--card-border-color);font-size:1rem}#game-settings-menu-form input.error{border:1px solid var(--error-color);animation:shake .82s cubic-bezier(.36,.07,.19,.97) both}#game-settings-menu-form .custom-checkbox{display:flex;justify-content:space-between}#game-settings-menu-form .custom-checkbox .toggle{display:none}#game-settings-menu-form .custom-checkbox .toggle,#game-settings-menu-form .custom-checkbox .toggle:after,#game-settings-menu-form .custom-checkbox .toggle:before,#game-settings-menu-form .custom-checkbox .toggle *,#game-settings-menu-form .custom-checkbox .toggle *:after,#game-settings-menu-form .custom-checkbox .toggle *:before,#game-settings-menu-form .custom-checkbox .toggle+.toggle-button{box-sizing:border-box}#game-settings-menu-form .custom-checkbox .toggle::-moz-selection,#game-settings-menu-form .custom-checkbox .toggle:after::-moz-selection,#game-settings-menu-form .custom-checkbox .toggle:before::-moz-selection,#game-settings-menu-form .custom-checkbox .toggle *::-moz-selection,#game-settings-menu-form .custom-checkbox .toggle *:after::-moz-selection,#game-settings-menu-form .custom-checkbox .toggle *:before::-moz-selection,#game-settings-menu-form .custom-checkbox .toggle+.toggle-button::-moz-selection,#game-settings-menu-form .custom-checkbox .toggle::selection,#game-settings-menu-form .custom-checkbox .toggle:after::selection,#game-settings-menu-form .custom-checkbox .toggle:before::selection,#game-settings-menu-form .custom-checkbox .toggle *::selection,#game-settings-menu-form .custom-checkbox .toggle *:after::selection,#game-settings-menu-form .custom-checkbox .toggle *:before::selection,#game-settings-menu-form .custom-checkbox .toggle+.toggle-button::selection{background:none}#game-settings-menu-form .custom-checkbox .toggle+.toggle-button{outline:0;display:block;width:5em;height:2em;position:relative;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid var(--card-border-color);border-radius:var(--border-radius);color:var(--text-color);font-size:1rem;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:all .2s ease;background:var(--color-lighter)}#game-settings-menu-form .custom-checkbox .toggle+.toggle-button:hover{border:1px solid var(--accent-color)}#game-settings-menu-form .custom-checkbox .toggle+.toggle-button:after,#game-settings-menu-form .custom-checkbox .toggle+.toggle-button:before{position:absolute;height:100%;width:100%;font-weight:700;transition:all .2s ease;display:flex;justify-content:center;align-items:center}#game-settings-menu-form .custom-checkbox .toggle+.toggle-button:after{left:100%;content:attr(data-tg-on)}#game-settings-menu-form .custom-checkbox .toggle+.toggle-button:before{left:0;content:attr(data-tg-off)}#game-settings-menu-form .custom-checkbox .toggle+.toggle-button:active{border:1px solid var(--card-border-color-active)}#game-settings-menu-form .custom-checkbox .toggle+.toggle-button:active:before{left:-10%}#game-settings-menu-form .custom-checkbox .toggle:checked+.toggle-button:before{left:-100%}#game-settings-menu-form .custom-checkbox .toggle:checked+.toggle-button:after{left:0}#game-settings-menu-form .custom-checkbox .toggle:checked+.toggle-button:active:after{left:10%}@keyframes shake{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-4px,0,0)}40%,60%{transform:translate3d(4px,0,0)}}.parent-resize-target{--resize-handle-width: 5px;--toggle-settings-button-size: 12rem}.game-settings-menu-container{position:absolute;z-index:2;bottom:0;right:0;display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:fit-content;width:100%;transition:transform .5s ease-in-out;transform:translateY(100%)}.game-settings-menu-container.hide{position:fixed}.game-settings-menu-container.show{transform:translateY(0)}.game-settings-menu-container .resize-handle{position:relative;z-index:2;flex:none;height:var(--resize-handle-width);width:100%;border-bottom:1px solid var(--text-color-dim);cursor:row-resize;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}.game-settings-menu-container .resize-handle:hover{border-top:1px solid var(--text-color-dim)}.game-settings-menu-container .resize-handle:active{border-bottom:1px solid var(--text-color);border-top:1px solid var(--text-color)}.parent-resize-target{position:relative;min-height:10rem;max-height:calc(100vh - .25 * var(--toggle-settings-button-size))}.game-settings-menu-container .resize-target{position:relative;z-index:3;overflow-y:auto;display:flex;flex-direction:column;align-items:center;background-color:var(--color);width:100%;max-height:calc(100vh - .25 * var(--toggle-settings-button-size));min-height:10rem}html #root:has(.game-settings-menu-container.show.animate){overflow:hidden}.game-settings-menu-container.show .resize-target,.game-settings-menu-container.hide.animate .resize-target{display:flex}.game-settings-menu-container.hide .resize-target{display:none}.game-settings-menu-container .toggle-settings-button{cursor:pointer;position:absolute;z-index:1;right:calc(50% - var(--toggle-settings-button-size) / 2);top:calc(-.25 * var(--toggle-settings-button-size) + var(--resize-handle-width));border-radius:50%;width:var(--toggle-settings-button-size);height:var(--toggle-settings-button-size);padding:1rem;background-color:var(--color-lighter);transition:transform ease .3s,opacity ease 1s .2s;transform:rotate(90deg);opacity:.1;display:flex;align-items:center;gap:1rem;animation:peak-up 1.5s 2 alternate}.game-settings-menu-container .toggle-settings-button:hover{transform:rotate(90deg) translate(calc(-.25 * var(--toggle-settings-button-size)));opacity:1;transition:transform ease .3s,opacity ease .5s}.game-settings-menu-container.show .toggle-settings-button{transform:rotate(90deg);opacity:1}.game-settings-menu-container .toggle-settings-button .chevron-left,.game-settings-menu-container .toggle-settings-button .cog{height:2rem;color:var(--text-color)}.game-settings-menu-container .toggle-settings-button .chevron-left{transition:transform ease .3s}.game-settings-menu-container.show .toggle-settings-button .chevron-left{transform:scale(-1)}.game-settings-menu-container .toggle-settings-button .cog{transition:transform ease 1s;animation:peak-cog 1.5s 2 alternate}.game-settings-menu-container .toggle-settings-button:hover .cog{transform:rotate(270deg)}.game-settings-menu-container .resize-target .dock-icon{cursor:pointer;min-width:3rem;min-height:3rem;margin-left:auto;margin-top:1rem;margin-right:1rem;border-radius:var(--border-radius);display:flex;justify-content:center;align-items:center}.game-settings-menu-container .resize-target .dock-icon:hover{background-color:var(--color-light)}.game-settings-menu-container .resize-target .dock-icon:hover svg{color:var(--accent-color)}.game-settings-menu-container .resize-target .dock-icon svg{width:1.5rem;height:1.5rem;color:var(--text-color)}.game-settings-menu-container .resize-target .dock-icon:active{background-color:var(--color-lighter)}.game-settings-menu-container .resize-target .dock-icon:active svg{color:var(--text-color)}@media screen and (min-width: 768px){.game-settings-menu-container{width:fit-content;height:100%;transform:translate(100%);flex-direction:row}.game-settings-menu-container .resize-handle{cursor:col-resize;height:100%;width:var(--resize-handle-width);border-right:1px solid var(--text-color-dim);border-top:none;border-bottom:none}.game-settings-menu-container .resize-handle:hover{border-left:1px solid var(--text-color-dim);border-top:none;border-bottom:none}.game-settings-menu-container .resize-handle:active{border-right:1px solid var(--text-color);border-left:1px solid var(--text-color);border-top:none;border-bottom:none}.parent-resize-target{max-height:none;min-width:10rem;max-width:calc(100vw - .25 * var(--toggle-settings-button-size))}.game-settings-menu-container .resize-target{height:100%;max-height:none;min-width:10rem;max-width:calc(100vw - .25 * var(--toggle-settings-button-size))}.game-settings-menu-container .toggle-settings-button{top:calc(50% - var(--toggle-settings-button-size) / 2);left:calc(-.25 * var(--toggle-settings-button-size) + var(--resize-handle-width));transform:none;animation:peak-left 1.5s 2 alternate}.game-settings-menu-container .toggle-settings-button:hover{transform:translate(calc(-.25 * var(--toggle-settings-button-size)));opacity:1}.game-settings-menu-container.show .toggle-settings-button{transform:none}}@keyframes peak-up{0%{opacity:.1;transform:rotate(90deg)}30%{opacity:1}to{opacity:1;transform:translateY(calc(-.25 * var(--toggle-settings-button-size))) rotate(90deg)}}@keyframes peak-left{0%{opacity:.1}30%{opacity:1}to{opacity:1;transform:translate(calc(-.25 * var(--toggle-settings-button-size)))}}@keyframes peak-cog{0%{transform:rotate(0)}to{transform:rotate(270deg)}}.practice-container{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.practice-container .center{flex:1;height:100%;min-width:fit-content}.practice-container .side{flex:none;width:100%}@media screen and (min-width: 768px){.practice-container{flex-direction:row}.practice-container .side,.practice-container .side .game-settings-menu-container.hide.animate{width:auto;height:100%}.practice-container .side:has(.game-settings-menu-container.hide){position:fixed;top:0;right:0}}:root{--color: #0f0f0f;--color-light: #171717;--color-lighter: #202020;--text-color: #edeef0;--text-color-dim: #999999;--overlay-color: #a0a0a011;--card-color: #111111;--card-border-color: #555555;--card-border-color-dim: #222222;--card-border-color-hover: var(--accent-color);--card-border-color-active: #ffffff;--card-shadow: 0px 10px 18px -10px #333;--card-shadow-hover: 0px 10px 18px -10px #777;--accent-color: #26c9ff;--error-color: #d7859b;--border-radius: 8px;--border-radius-round: 16px;--border-radius-super-round: 24px;--white: #ffffff;--o: #f2d74c;--i: #65dbc8;--l: #eda93f;--j: #3358dd;--s: #7acd44;--t: #c132d0;--z: #d83a28}@font-face{font-family:Manrope;src:url(/assets/Manrope-VariableFont_wght-CZfUxJDf.ttf) format("woff2 supports variations") url(/assets/Manrope-VariableFont_wght-CZfUxJDf.ttf) format("woff2-variations");font-weight:100 1000}body{font-family:Manrope,sans-serif;font-size:1.1rem}body{background:var(--color);color:var(--text-color);min-height:100vh;display:grid}*{margin:0;padding:0;box-sizing:border-box}body{-webkit-font-smoothing:antialiased}img{display:block;max-width:100%}input,textarea,select,button{display:block;font-family:inherit;font-size:100%;border:none;background-color:inherit;color:inherit;width:100%}button{cursor:pointer;width:fit-content}a{text-decoration:none;color:inherit}ul{list-style:none}.--global-hover-focus-active-border{border-radius:var(--border-radius);border:1px solid var(--card-border-color);transition:border ease-out .2s}.--global-hover-focus-active-border:hover{border:1px solid var(--accent-color)}.--global-hover-focus-active-border:focus{outline:none;border:1px solid var(--accent-color)}.--global-hover-focus-active-border:active{border:1px solid var(--card-border-color-active)}.--global-button{cursor:pointer;width:fit-content;background-color:var(--color);border:1px solid var(--card-border-color);border-radius:var(--border-radius);padding:.75rem 1rem;font-weight:700;font-size:1rem;transition:border ease-out .2s}.--global-button:hover{border:1px solid var(--accent-color)}.--global-button:focus{outline:none;border:1px solid var(--accent-color)}.--global-button:active{border:1px solid var(--card-border-color-active)}.--global-circle-button{cursor:pointer;width:fit-content;background-color:var(--color);border:1px solid var(--card-border-color);border-radius:50%;padding:.75rem;transition:border ease-out .2s}.--global-circle-button:hover{border:1px solid var(--accent-color)}.--global-circle-button:focus{outline:none;border:1px solid var(--accent-color)}.--global-circle-button:active{border:1px solid var(--card-border-color-active)}input.--global-no-spinner::-webkit-outer-spin-button,input.--global-no-spinner::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input.--global-no-spinner[type=number]{-moz-appearance:textfield}.account-action-container{height:100%;padding:1rem;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2rem}.account-action-container section{width:100%;display:flex;justify-content:center;flex-direction:column;align-items:center}.account-action-container section>.title{font-size:2rem;font-weight:700;width:fit-content}.form-container{--form-transition: all .4s ease-out}.form-container{display:grid;grid-template-columns:.5rem 1fr;grid-template-areas:"left right";width:100%;max-width:32rem;border-radius:var(--border-radius);overflow:hidden;border:1px solid var(--card-border-color-dim);box-shadow:var(--card-shadow);transition:var(--form-transition)}.form-container .left-decoration{grid-area:left;background:var(--accent-color);transition:var(--form-transition)}.form-container .left-decoration:hover{background:var(--card-border-color-active)}.form-container form{background:var(--card-color);padding:2rem;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;gap:1rem}.form-container form .title{font-size:1.5rem;text-align:center}.form-container form .float-label{position:relative;display:flex;flex-direction:column;margin-bottom:2rem}.form-container form .float-label label{cursor:text;color:var(--text-color-dim);position:absolute;top:50%;transform:translateY(-50%);left:0;opacity:0;transition:var(--form-transition)}.form-container form .float-label input{font-size:1rem;height:3rem;border:none;border-bottom:1px solid var(--card-border-color);transition:var(--form-transition)}.form-container form .float-label input::placeholder{color:var(--text-color-dim)}.form-container form .float-label input:focus{outline:none;border-bottom:1px solid var(--accent-color)}.form-container form .float-label input:not(:placeholder-shown){padding-top:.7rem}.form-container form .float-label input:not(:placeholder-shown)+label{transform:translateY(-1.75rem);opacity:1}.form-container form .float-label.error input{border-bottom:1px solid var(--error-color)}.form-container form .float-label.error .error-text{position:absolute;bottom:-1.3rem;transform:translateY(50%);right:0;color:var(--error-color)}.form-container form .password-reset{color:var(--text-color-dim);margin-top:-1.2rem;align-self:flex-end}.form-container form .password-reset:hover{color:var(--text-color)}.form-container form .signup-container{margin-top:2rem;align-self:flex-end;color:var(--text-color-dim)}.form-container form .signup:hover{color:var(--text-color)}.form-container form button{cursor:pointer;align-self:flex-end;background:var(--color);border:1px solid var(--accent-color);border-radius:var(--border-radius);width:100%;max-width:fit-content;padding:.75rem 2rem;margin-top:.5rem;transition:var(--form-transition)}.form-container form button:hover,.form-container form button:focus{background:var(--color);border:1px solid var(--card-border-color-active)}.form-container:has(form button:hover),.form-container:has(form button:focus){box-shadow:var(--card-shadow-hover);border:1px solid var(--card-border-color)}.form-container:has(form button:hover) .left-decoration,.form-container:has(form button:focus) .left-decoration{background:var(--card-border-color-active)}@media screen and (min-width: 500px){.form-container form .float-label{margin-bottom:1rem}.form-container form .float-label.error .error-text{bottom:-1rem}}