@import url(https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap);body,html{height:100%;overflow:hidden}body{align-items:center;background-image:url(e0b1c99c37ab398ae24c.webp);background-position:50%;background-size:cover;color:#fff;display:flex;font-family:Orbitron;justify-content:center;margin:0;min-height:100vh}.title{background:linear-gradient(90deg,#65d0b7,#3976fc,#ff8237,#f8dd2c,#9ae66e,#b388eb,#ef476f);-webkit-background-clip:text;background-position:0 0;background-size:200%;color:transparent;font-size:2.5rem;margin-bottom:.5rem;transition:background-position .5s ease-in-out}.title:hover{background-position:100% 0}.game-wrapper{align-items:center;display:flex;flex-direction:column}.container{align-items:flex-start;display:flex;gap:0}.start-container{align-items:center;display:flex;font-family:Orbitron;height:100vh;justify-content:space-around;max-width:100%;padding:0 2%;width:100%}.hold-section,.next-section{background-color:rgba(0,0,0,.7);color:#fff;position:relative}.hold-section p,.next-section p{background-color:hsla(0,0%,100%,.9);color:#000;font-size:16px;font-weight:700;left:0;margin:0;position:absolute;text-align:left;top:0;width:100%}.hold-section{align-items:center;background-color:rgba(0,0,0,.7);border:3px solid #fff;color:#fff;display:flex;height:140px;justify-content:center;margin:10px auto;padding:0;width:140px}.hold-section canvas{background-color:transparent;height:auto;width:auto}.next-section{background-color:rgba(0,0,0,.7);border:3px solid #fff;overflow:hidden;padding-top:30px;position:relative}.next-section canvas{background-color:transparent;height:auto}.game-area{align-items:flex-start;display:flex}.game-grid .grid-overlay{background-size:35px 35px}.game-grid{background-color:rgba(0,0,0,.7);border:3px solid #fff;border-bottom-left-radius:5px;border-bottom-right-radius:5px;border-top:none;grid-template-columns:repeat(10,1fr);grid-template-rows:repeat(20,1fr);height:fit-content;overflow:hidden;position:relative;width:fit-content}#game-canvas,.game-grid{box-sizing:border-box;margin:0 auto;max-height:1000px;max-width:700px}#game-canvas{display:block}.hold-canvas-container,.next-canvas-container{margin:0 auto;width:fit-content}.grid-overlay{background-image:linear-gradient(hsla(0,0%,100%,.1) 1px,transparent 0),linear-gradient(90deg,hsla(0,0%,100%,.1) 1px,transparent 0);background-size:35px 35px;height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.level-bar{background-color:hsla(0,0%,100%,.2);border:3px solid #fff;border-bottom-left-radius:5px;border-bottom-right-radius:5px;border-top:none;height:100%;overflow:hidden;position:relative;width:25px}.level-progress{background-color:#4caf50;bottom:0;height:0;position:absolute;transition:height .5s ease;width:100%}.bottom-info{align-items:center;display:flex;flex-direction:column;gap:2px;margin-top:20px}.level-display,.score-display{color:#fff;font-family:Press Start\ 2P}.score-display{font-size:1.5em}.level-display{color:#fff;font-family:Press Start\ 2P;font-size:3em;font-weight:700}.game-over{align-items:center;background-color:rgba(0,0,0,.8);color:#fff;display:flex;flex-direction:column;font-family:Orbitron,sans-serif;height:100%;justify-content:center;left:0;position:absolute;top:0;visibility:hidden;width:100%}.game-over h2{margin:0 0 20px}.game-over #footer{margin-bottom:15px}.game-over button{background-color:#4caf50;border:none;color:#fff;cursor:pointer;font-family:Orbitron;font-size:18px;padding:10px 20px}.game-over button:hover{background-color:#45a049}#leaderboard-list li:first-child{-webkit-background-clip:text;background-image:linear-gradient(90deg,#ff9100,#f5e000);color:transparent}#leaderboard-list{list-style:none;padding:0}#leaderboard-list li{padding:5px 20px}#final-score{-webkit-background-clip:text;background-image:linear-gradient(90deg,#1e90ff,#00bfff);color:transparent}#user-rank{padding-bottom:2rem}#start-screen:before{backdrop-filter:blur(1px);background-color:rgba(0,0,0,.6);content:"";position:absolute;z-index:-1}#start-screen,#start-screen:before{height:100%;left:0;top:0;width:100%}#start-screen{align-items:center;background-image:url(e0b1c99c37ab398ae24c.webp);background-position:50%;background-size:cover;display:flex;flex-direction:column;justify-content:center;margin:0;position:fixed;z-index:10}#start-screen h1{font-size:48px;margin-bottom:10px}#start-screen p{margin-bottom:30px}.next-box{align-items:center;display:flex;flex-direction:column;height:auto;margin-top:40px}.mini-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);height:120px;margin:0 auto;position:relative;width:120px}.mini-grid,.mini-grid div{box-sizing:border-box;padding:0}.mini-grid div{border:none;height:30px;margin:0;position:absolute;width:30px}#pause-overlay{align-items:center;background-color:rgba(0,0,0,.8);color:#fff;display:flex;flex-direction:column;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:100}#settings-menu{background-color:rgba(0,0,0,.85);border-radius:8px;box-shadow:0 4px 10px rgba(0,0,0,.4);color:#fff;left:50%;padding:30px;position:fixed;top:50%;transform:translate(-50%,-50%);width:300px;z-index:101}#settings-form label{display:block;font-family:Orbitron,sans-serif;font-size:14px;margin-top:10px;text-align:left}#settings-form input[type=number],#settings-form select{background-color:hsla(0,0%,100%,.1);border:1px solid #4caf50;border-radius:5px;color:#fff;font-family:Orbitron,sans-serif;font-size:14px;margin-top:5px;padding:5px;width:100%}.settings-buttons{display:flex;justify-content:center;margin-top:20px}.settings-buttons button{background-color:#4caf50;border:none;border-radius:4px;color:#fff;cursor:pointer;font-family:Orbitron,sans-serif;font-size:16px;padding:10px 20px;text-align:center;transition:background-color .3s ease;width:200px}.settings-buttons button:hover{background-color:#45a049}#background-select{appearance:none;border:1px solid #4caf50;border-radius:5px;padding:5px;width:100%}#background-select,#background-select option{background-color:rgba(0,0,0,.85);color:#fff;font-family:Orbitron,sans-serif;font-size:14px}.background-preview{background-position:50%;background-size:cover;border:1px solid #4caf50;border-radius:4px;height:80px;margin-top:10px;width:100%}.cell.locking{animation:lockFlash .5s infinite}@keyframes lockFlash{0%{opacity:1}50%{opacity:.5}to{opacity:1}}@keyframes shake-left{0%,to{transform:translateX(0)}50%{transform:translateX(-5px)}}@keyframes shake-right{0%,to{transform:translateX(0)}50%{transform:translateX(5px)}}@keyframes shake-vertical{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.shake-left{animation:shake-left .1s ease-in-out}.shake-right{animation:shake-right .1s ease-in-out}.shake-vertical{animation:shake-vertical .1s ease-in-out}#footer{background-color:rgba(0,0,0,.8);bottom:0;color:#fff;font-family:Orbitron,sans-serif;font-size:.9em;padding:10px;position:fixed;text-align:center;width:100%}.warning{background:linear-gradient(90deg,#f06,#ff0040,#ff7300);-webkit-background-clip:text}#footer a,.warning{color:transparent;font-weight:700}#footer a{background:linear-gradient(90deg,#00a740,#00ff37);-webkit-background-clip:text;background-position:0 0;background-size:200% 100%;text-decoration:none;transition:background-position .5s ease-in-out}#footer a:hover{background-position:100% 0}.particle{animation:particleMove .6s ease-out forwards;height:8px;opacity:1;width:8px}#particle-container,.particle{pointer-events:none;position:absolute;z-index:100}#particle-container{height:100%;left:0;top:0;width:100%}#keybinds-info{color:#fff;font-family:Orbitron,sans-serif;margin-top:20px;text-align:left;width:100%}#keybinds-info h2{color:#fff;font-size:24px;margin-bottom:10px}#keybinds-info ul{list-style-type:none;padding:0;width:100%}#keybinds-info ul li{align-items:center;background-color:hsla(0,0%,100%,.15);border:1px solid #4caf50;border-radius:8px;display:flex;justify-content:space-between;margin:5px 0;padding:8px 12px;transition:background .3s ease}#keybinds-info ul li:hover{background-color:rgba(76,175,80,.25)}#keybinds-info li strong{color:#4caf50;font-size:1.1em}#keybinds-info ul li input{background:transparent;background-image:linear-gradient(90deg,#00a740,#00ff73);background-position:bottom;background-repeat:no-repeat;background-size:100% 2px;border:none;border-bottom:2px solid transparent;color:#fff;font-family:Orbitron,sans-serif;font-size:1rem;outline:none;padding:.5rem 0;text-align:left;transition:border-color .3s ease,background-position .5s ease-in-out;width:80%}#keybinds-info ul li input:focus{background-position:100% bottom;background-size:200% 2px;border-bottom:none}.auth-form{border-radius:8px;max-width:350px;padding:1.5rem;text-align:center;width:100%}.auth-form h2{font-size:2rem;margin-bottom:1.5rem}.auth-form h3{font-size:1.2rem}.auth-form h3,.auth-form p{margin-bottom:1.5rem;text-align:left}.auth-form input{background:transparent;border:none;border-bottom:2px solid #ccc;border-radius:0;color:#fff;font-family:Orbitron;font-size:1rem;margin:1rem 0;outline:none;padding:1rem 1rem 1rem 0;width:90%}.auth-form input::placeholder{color:#ccc;opacity:1;position:relative;transform:translateY(4px)}.auth-form input:focus{border-bottom-color:#4caf50}.auth-form button{align-items:center;background-color:#28a745;border:none;border-radius:30px;color:#fff;cursor:pointer;display:flex;font-size:1.2rem;justify-content:center;margin-top:1rem;padding:1rem;position:relative;width:100%}.auth-form button:hover{background-color:#218838}#auth-error{background:linear-gradient(90deg,#ff0059,#ff4128);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-fill-color:transparent;font-size:15px;font-weight:700;margin-top:20px;padding:10px 15px;transition:background-position .5s ease-in-out}@keyframes error-shake{0%{transform:translate(0)}10%{transform:translate(-10px)}20%{transform:translate(10px)}30%{transform:translate(-10px)}40%{transform:translate(10px)}50%{transform:translate(-10px)}60%{transform:translate(10px)}70%{transform:translate(-10px)}80%{transform:translate(10px)}90%{transform:translate(-10px)}to{transform:translate(0)}}.error-shake{animation:error-shake .2s ease-in-out}.left-column,.right-column{flex:1}.left-column h1,.left-column p{text-align:left;width:100%}.left-column{background:none;flex:0 0 55%;padding:2%}.left-column,.right-column{display:flex;flex-direction:column;height:100%;justify-content:center}.right-column{align-items:center;background-color:hsla(0,0%,8%,.85);box-sizing:border-box;padding:4rem 1rem}.description{font-size:1rem;margin-bottom:1rem}#guest-button{background-color:#4caf50;background:none;border:none;color:#fff;cursor:pointer;font-family:Orbitron;font-size:1rem;padding:0;text-decoration:underline}#guest-button:hover{color:#b0b0b0}.play-button{align-items:center;background-image:linear-gradient(90deg,#4c32d0,#b700ff);border:none;border-radius:4px;color:#fff;cursor:pointer;display:inline-flex;flex-grow:1;font-family:Orbitron;font-size:1rem;font-weight:700;justify-content:center;padding:.8rem 1.5rem;transition:background-color .3s ease,box-shadow .3s ease}.play-button:hover{background-position:100% 0;box-shadow:0 0 10px rgba(76,175,80,.7)}