@font-face{font-family:Roboto-Regular;font-style:normal;font-weight:600;src:url(/assets/Roboto-Regular~B22Zl-NA.ttf) format("truetype")}@font-face{font-family:Roboto-Thin;font-style:normal;font-weight:lighter;src:url(/assets/Roboto-Thin~CxxL7hmv.ttf) format("truetype")}*{box-sizing:border-box;margin:0;padding:0}*:not(textarea,button){-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}#brick{position:absolute}html,body{background-color:#000;font-family:Roboto-Regular,sans-serif}button{z-index:10;pointer-events:auto}button:focus{outline:none;transform:scale(1.05)}button:focus{outline:none;box-shadow:none}.canvas{position:fixed;transition:.2s ease-in-out}.cover{position:fixed;background-color:#000;width:100vw;z-index:10000}.home-container{display:flex;flex-direction:column;align-items:center}.header-container{position:relative}.header{font-family:Roboto-Thin,sans-serif;font-weight:lighter;text-align:right;width:min-content}.btn{border:none;display:flex;align-items:center;justify-content:center;color:#fff;transition:.2s ease-in-out}.btn:hover{cursor:pointer;transform:scale(1.05);box-shadow:0 0 2px #00000080;opacity:.9}.btn:active{transform:scale(1);outline:none}.btn:disabled{transform:scale(1)!important;opacity:.5!important}.btn:disabled:hover{pointer-events:none!important;transform:scale(1)!important;cursor:default!important}.btn-pause{background:transparent;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:.2s ease-in-out}.btn-pause:hover{cursor:pointer;transform:scale(1.05)}.arrow-btn{background-color:transparent;border:none;outline:none;transition:.2s ease-in-out;display:flex;align-items:center;justify-content:center}.arrow-btn:hover{cursor:pointer;transform:scale(1.3)}.arrow-btn:focus{transform:scale(1.3)}.arrow-btn:active{transform:scale(1)}.play-container{position:relative;height:100%}.brick{position:absolute;rotate:45deg}.gotcha-brick{background-color:#f8a502}.pause-overlay{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center}.hud{position:absolute;display:flex;flex-direction:row;justify-content:space-between;width:100%;z-index:1000}.absolute-center{position:absolute;top:50%;left:50%;-moz-transform:translateX(-50%) translateY(-50%);-webkit-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);transform:translate(-50%) translateY(-50%)}.wall{position:absolute}.game-over-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}.game-over-header{font-family:Roboto-Thin,sans-serif;font-weight:lighter}.game-over-box{display:flex;flex-direction:column;justify-content:center;align-items:center;font-family:Roboto-Thin,sans-serif;font-weight:700}.new-high-score{font-family:Roboto-Thin,sans-serif;font-weight:700}.block{position:absolute}.rate-container{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.btn-rate{border-radius:50%;display:flex;align-items:center;justify-content:center;transition:.2s ease-in-out;border:none}.btn-rate:hover{transform:scale(1.2)!important}.btn-rate:focus{transform:scale(1.2)!important}.btn-rate:disabled{all:unset;background-color:#eee;opacity:1!important;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:.2s ease-in-out;border:none}.offline-container,.scores-container{display:flex;flex-direction:column;align-items:center;height:100%;font-family:Roboto-Thin,sans-serif;font-weight:700}.player-high-score-box{display:flex;flex-direction:row;justify-content:space-evenly;font-family:Roboto-Thin,sans-serif;font-weight:700}.btn-dark-mode{border-radius:50%;position:absolute;transition:.2s ease-in-out;border:none;background-color:transparent}.btn-dark-mode:hover{cursor:pointer;transform:scale(1.2)}.spin{animation:spin 4s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(-1440deg)}}.blink{animation:blink 1s infinite}@keyframes blink{0%,to{opacity:0%}50%{opacity:100%}}.shake{animation:shake .2s ease-in-out}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-3px,-3px)}50%{transform:translate(3px,3px)}75%{transform:translate(-3px,3px)}}.shake-hard{animation:shake-hard .3s ease-in-out}@keyframes shake-hard{0%,to{transform:translate(0)}12.5%{transform:translate(-6px,-6px)}25%{transform:translate(6px,-6px)}37.5%{transform:translate(6px,6px)}50%{transform:translate(6px,6px)}62.5%{transform:translate(-6px,-6px)}75%{transform:translate(-6px,6px)}}.rocking{display:inline-block;animation:rocking 2s infinite linear}@keyframes rocking{0%{transform:rotate(0)}25%{transform:rotate(20deg)}50%{transform:rotate(0)}75%{transform:rotate(-20deg)}to{transform:rotate(0)}}