@import"https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap";#play{height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center}#play #background{position:absolute;z-index:0;height:100%;filter:blur(2px);transition:background .3s ease;width:100%;min-height:auto;background-repeat:no-repeat!important;background-size:cover!important;background-position:top left;background-size:contain}@keyframes show-menu{0%{opacity:40;transform:scale(0)}to{opacity:100;transform:scale(1)}}#play .menu{z-index:10;display:flex;flex-direction:column;row-gap:1em;animation:show-menu .3s ease}#play .menu h2{color:var(--foreground)}#play #game{width:100%;height:100%;display:flex;flex-direction:row;justify-content:center;align-items:center;z-index:10;--scale: .8}@keyframes horizontal-shaking{0%{transform:translate(0) scale(var(--scale))}25%{transform:translate(3px) scale(var(--scale))}50%{transform:translate(-3px) scale(var(--scale))}75%{transform:translate(3px) scale(var(--scale))}to{transform:translate(0) scale(var(--scale))}}@keyframes vertical-shaking{0%{transform:translateY(0) scale(var(--scale))}50%{transform:translateY(-3px) scale(var(--scale))}to{transform:translateY(0) scale(var(--scale))}}#play #game canvas{transform:scale(var(--scale))}@media screen and (max-height: 800px){#play #game canvas{--scale: .6}}@media screen and (max-height: 600px){#play #game canvas{--scale: .4}}#play #game #canvas{border:10px solid var(--background-secondary);border-radius:10px;box-shadow:0 5px 10px var(--foreground)}#play #game #canvas.shake-x{animation:horizontal-shaking ease .3s}#play #game #canvas.shake-y{animation:vertical-shaking ease .2s}#play #game #canvas-next{border-radius:10px;border:10px solid var(--background-secondary);place-self:flex-start;margin-top:10vh}#play #game .stats{background:var(--background);border:10px solid var(--background-secondary);border-radius:10px;padding:.5em;height:fit-content;display:flex;flex-direction:column;width:10em;place-self:flex-start;align-items:center;margin-top:10vh}#home{padding-top:20vmin}#home h1{background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:1rem}#home router{display:flex;flex-direction:column;row-gap:1em}#leaderboard{padding-top:20vmin;row-gap:2em}#leaderboard #scoreboard{border:2px solid var(--accent);max-height:50vh;overflow:auto;display:block;color:var(--foreground);border-radius:10px;border-spacing:0;text-align:left;width:30vw}#leaderboard #scoreboard tr{width:auto}#leaderboard #scoreboard th{padding:5px 1em;background:var(--background-secondary);top:0;position:sticky}#leaderboard #scoreboard td{padding:.5em 1em}#leaderboard #scoreboard td.user{width:auto}#leaderboard #scoreboard th.score{width:100%}#leaderboard ::-webkit-scrollbar{display:none}#app.dark{--background: #14131c;--background-secondary: #202025;--foreground: #ffffff}#app.light{--background: #f0f0f0;--background-secondary: #fffeff;--foreground: #14131c}:root{--accent: #f84e6a;--gradient: linear-gradient(45deg, #5767ff, #ff0c37)}html,body,#app{width:100%;min-height:100vh;background:var(--background)}*,*:after,*:before{box-sizing:border-box;padding:0;margin:0;font-family:Kanit;font-weight:400;color:var(--foreground)}main{display:flex;flex-direction:column;align-items:center;width:100%;height:100%}#app.light header .dark{display:none}#app.dark header .light{display:none}#themeSwitcher{display:flex}#themeSwitcher img{width:1.8em;height:1.8em;align-self:center}header{position:absolute;padding:1em;display:flex;flex-direction:row;justify-content:space-between;background:var(--background-secondary);user-select:none;align-items:center;border-radius:0 0 10px 10px;width:100%}header router{display:flex;flex-direction:row;column-gap:2vw}header .link{font-size:clamp(16px,2vw,25px)}.link{font-weight:500;transition:.3s ease all}.link:hover{cursor:pointer;filter:brightness(80%)}input{outline:none;padding:.5em;border:var(--accent) 2px solid;border-radius:10px;background:var(--background-secondary);color:var(--foreground);font-size:15px}button{outline:none;padding:.5em 1em;border:var(--accent) 2px solid;border-radius:10px;cursor:pointer;background:var(--background-secondary);color:var(--foreground);transition:.3s ease all;font-size:17px;height:47px}button:hover{transform:scale(1.1)}button:active{transform:scale(.9)}h1{font-size:10vmin;font-weight:600}.home-button{position:absolute;margin:1em;z-index:100}h2{font-size:5vmin;font-weight:600}h3{font-size:2.5vmin;font-weight:500}input[type=range]{appearance:none;width:100%;height:1em}input[type=range]::-webkit-slider-thumb{appearance:none;width:1em;height:1em;border-radius:10px;background:var(--accent);cursor:pointer}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--background-secondary)}::-webkit-scrollbar-thumb{background:var(--accent);border-radius:10px}#settings{padding:10vmin 0;row-gap:1em}#settings router{display:flex;flex-direction:column;row-gap:1em}#settings .group>div{display:grid;grid-template-columns:1fr 1fr;padding:.3rem;align-items:center;justify-content:center;column-gap:.5em}#settings .group h3{text-align:center;padding-bottom:1rem}#themeSwitcher{width:fit-content}