:root{--bg-color: #ecf0f3;--wrapper-shadow: -10px 10px 20px #dbdfe2, 10px -10px 20px rgb(224, 229, 233);--button-shadow: -5px 5px 10px #c4c7ca, 5px -5px 10px #fff;--button-shadow-inset: inset -5px 5px 10px #c4c7ca, inset 5px -5px 10px #fff;--board-shadow-inset: inset -5px 5px 8px #d4d8db, inset 5px -5px 8px #fff;--text-color: #3d92f3;--next-text-color: #3b5586;--block-border-color: #d5d6d9;--border-radius: 20px;--settings-button-color: #f96a9b;--block-size: 11px;--button-size: 40px;--game-width: 414px;--game-height: 736px}.dark{--bg-color: #17191c;--text-color: #5686f5;--next-text-color: #dbdfe2;--setting-button-color: #f88ab0;--wrapper-shadow: -10px 10px 10px rgba(0, 0, 0, .7), 10px -10px 10px rgba(0, 0, 0, .7);--button-shadow: -5px 5px 10px rgba(0, 0, 0, .7), 5px -5px 10px rgba(0, 0, 0, .7);--button-shadow-inset: inset -5px 5px 10px rgba(0, 0, 0, .7), inset 5px -5px 10px rgba(0, 0, 0, .7);--board-shadow-inset: inset -5px 5px 8px rgba(0, 119, 255, .3), inset 5px -5px 8px rgba(0, 119, 255, .3);--block-border-color: #1e1f22}*{margin:0;border:0;box-sizing:border-box}body,html{font-family:Krona One,Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh;background-color:var(--bg-color);overflow:hidden}#app{min-height:100vh;display:flex;justify-content:center;position:relative;background-color:var(--bg-color)}.game-wrapper{position:relative;z-index:3;width:100%;max-width:var(--game-width);box-shadow:var(--wrapper-shadow);border-radius:var(--border-radius);max-height:var(--game-height);padding-bottom:10px;background-color:var(--bg-color);display:flex;flex-direction:column}.session-info{position:relative;text-align:center;font-weight:600;padding:5px;font-size:.875rem;color:var(--text-color);margin-bottom:.5em;margin-top:.5em}.session-info #level{position:absolute;top:50%;left:30px;transform:translateY(-50%);font-size:.875rem}.game-next-section{position:relative;margin-bottom:1em}.board-section{width:270px;height:520px;padding:10px;margin:0 auto;box-shadow:var(--board-shadow-inset);border-radius:10px;position:relative}.board-section canvas{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.next-section{display:none;position:absolute;bottom:10%;right:10px}.next-section span{padding-bottom:10px;color:var(--next-text-color);font-size:.625rem;margin-bottom:5}#score{font-size:.875rem}.settings-section{display:flex;flex-direction:column;position:absolute;top:50%;left:5%;transform:translateY(-50%)}.settings-section .button{margin-bottom:10px;font-size:1.5rem;color:var(--settings-button-color)}.button{width:var(--button-size);box-shadow:var(--button-shadow);border-radius:15px;font-weight:600;font-size:1rem;border:none;outline:none;background-color:var(--bg-color);color:var(--text-color);cursor:pointer;display:flex;justify-content:center;align-items:center}.button-square{width:var(--button-size)!important;height:var(--button-size)!important;padding:10px}.settings-section i.bxs-moon{display:block}.settings-section i.bxs-sun{display:none}.button:active{box-shadow:var(--button-shadow-inset)}.control-section{display:flex}.col{display:flex;align-items:center;justify-content:center}.col:nth-child(1){width:60%}.col:nth-child(2){width:40%}.arrow-control{display:grid;grid-template-columns:repeat(3,1fr)}.button-large{width:40px;height:40px;font-size:1.25rem}.menu-section{display:flex;flex-direction:column;align-items:center;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.menu-section .brand{padding:20px 0;font-size:.75rem;margin-bottom:20px;color:var(--text-color);text-align:center}.menu-section .result h2{font-size:.65rem}.menu-section .button{margin-bottom:30px;padding:10px}.button-wide{width:200px}.result{display:none;text-align:center;margin-bottom:90px;color:var(--text-color)}.menu-section .result h2{font-size:1.25rem;margin-bottom:10px}.result p{color:var(--settings-button-color)}.result h3{color:var(--text-color);margin-bottom:30px}.how-to{display:none;position:absolute;top:50%;right:0;transform:translate(100%,-50%);box-shadow:var(--wrapper-shadow);padding:30px;border-radius:20px;background-color:var(--bg-color);color:var(--text-color);transition:transform .5s ease-in-out}.how-to h3{margin-bottom:10px}.how-to td{padding:5px}.how-to.active{display:block;transform:translateY(-50%);transition:transform .5s ease-in-out;z-index:4}.keycap{width:calc(var(--button-size) * 2);color:var(--settings-button-color);font-size:1.25rem}#info-button,#new-game-button,#pause-button{display:none}.falling-block{display:none;position:absolute;animation:fall linear infinite}.board-section,.session-info,.control-section{transform:scale(0)}.play .board-section,.play .session-info,.play .control-section{transform:scale(1)}.play .next-section{display:flex;flex-direction:column}.play .menu-section{transform:scale(0)}.play #pause-button{display:flex}.pause #new-game-button,.game-over #new-game-button,.game-over .result{display:block}.game-over #play-button{display:none}@keyframes down{0%{transform:translateY(-300%)}to{transform:translateY(0)}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(90deg)}}@keyframes hide{0%{opacity:1}to{opacity:0;visibility:hidden}}@keyframes fall{0%{transform:translateY(-20%) rotate(0);opacity:0}10%{opacity:1}90%{opacity:1}to{transform:translateY(2000%) rotate(-360deg);opacity:1}}@media only screen and (min-width: 375px){.button{font-size:1.5rem}.menu-section .button{padding:10px}}@media only screen and (min-width: 425px){:root{--block-size: 15px;--button-size: 35px}.game-wrapper{padding-bottom:0}.session-info{padding:20px;font-size:1.6rem}.control-section{padding-bottom:10px;margin-bottom:40px}.arrow-control{gap:5px}.settings-section{position:unset;flex-direction:row;justify-content:center}.settings-section .button{margin:0 10px}.next-section{right:10%}.button-wide{height:50px;padding:10px}.how-to h3{margin-bottom:10px}.how-to td{padding:5px}#info-button{display:flex}.button-large{width:50px;height:50px;font-size:1.25rem}}@media screen and (min-width: 700px){:root{--block-size: 25px;--button-size: 55px}.game-wrapper{justify-content:space-around}.session-info{margin-top:0;margin-bottom:0}.menu-section{top:40%}.col{padding:10px}.button-large{width:70px;height:70px}.falling-block{display:block}}@media screen and (min-width: 900px){.game-wrapper{max-height:unset;justify-content:initial}.next-section{right:10px}.control-section{margin-bottom:25px}}