*{margin:0;padding:0}body,html{overflow:hidden;font-family:Helvetica,Arial,sans-serif;user-select:none}.loading{position:fixed;z-index:10000;background-color:#fff;display:flex;flex-direction:column;gap:25px;justify-content:center;align-items:center}.game,.loading{top:0;left:0;width:100%;height:100%}.game{position:absolute}.game.ready{animation-name:doneLoading;animation-duration:2s}@keyframes doneLoading{0%{clip-path:circle(0 at center)}to{clip-path:circle(100% at center)}}.webgl{position:fixed;top:0;left:0;outline:none;z-index:0;pointer-events:all}.login,.logout{position:fixed;top:0;right:0;width:96px;height:48px}.logout{display:none}.menu{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;gap:15px}.menu button{width:128px;height:48px;color:#3c638e;font-size:large;font-weight:700;background-color:#dfff4f;box-shadow:5px 5px #0affed;border:none}.mode{position:fixed;top:5%;left:50%;transform:translate(-50%,-95%);display:block;color:#fff}.streak{top:10%}.result,.streak{position:fixed;left:50%;transform:translate(-50%,-85%);display:none;color:#fff}.result{top:15%}.player-stats{pointer-events:none;color:#3c638e;background:linear-gradient(130deg,#0affed,#dfff4f,#afafdc);background-size:400% 400%;border:5px solid #fff;border-radius:25px;position:fixed;top:0;right:0;z-index:1;height:77%;width:30%;transform:perspective(400px) rotateY(-5deg);margin:64px 96px 64px 64px;padding:25px;overflow-y:scroll;display:none;flex-direction:column;gap:25px;text-align:center;justify-content:center;animation-name:gradient;animation-duration:15s;animation-iteration-count:infinite}::-webkit-scrollbar{width:0;background:transparent}@keyframes gradient{0%{background-position:0 50%}50%{background-position:100% 50%}to{background-position:0 50%}}.player-stats button{border:none;border-radius:25px;color:#3c638e;background-color:#f5f5f5;height:32px;width:96px;align-self:center}.player-stats.active{display:flex;animation-name:fadeIn;animation-duration:1s;animation-iteration-count:1;pointer-events:all}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.player-stats.inactive{opacity:0;display:flex;animation-name:fadeOut;animation-duration:1s;animation-iteration-count:1;pointer-events:none}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.challenges{pointer-events:none;position:fixed;bottom:0;left:-50%;z-index:1000;margin-left:15px;margin-bottom:15px;display:flex;flex-direction:column;flex-wrap:nowrap;color:#000;background-color:red;border-radius:25px;padding:15px}.challenges.active{animation-name:InOut;animation-duration:4s}@keyframes InOut{0%{left:-50%}20%{left:0}80%{left:0}to{left:-50%}}.challenge{pointer-events:none;display:flex;flex-direction:row;flex-wrap:nowrap;gap:5px;color:#fff}.charge-container{background-color:#fff;width:30%;position:fixed;bottom:25px;left:50%;transform:translateX(-50%);border:8px solid #fff;display:none}.charge-container,.charge-shot{pointer-events:none;height:16px}.charge-shot{background-color:#dfff4f;width:100%;transform:scaleX(0);transform-origin:top left;transition:transform .5s;will-change:transform}.backhand{left:0}.backhand,.forehand{position:fixed;top:0;height:100%;width:50%;display:none;pointer-events:none;background-color:transparent}.forehand{right:0}.beatCounter{position:fixed;top:10%;left:10px;transform:translate(calc(1vw - 10px),-90%);display:none;color:#fff}