*{margin:0;padding:0}html,body{overflow:hidden;font-family:sans-serif}.webgl{position:absolute;height:100%;top:0;left:0;outline:none;width:100%}#canvas-wrap{height:100dvh;font-family:sans-serif;position:relative;width:100dvw}#controls-desktop{display:none;--button-height: 30px;--padding: 8px;background-color:#00000080;border-radius:5px 5px 0 0;color:#fff;padding:0 8px 8px;position:absolute;bottom:0;left:16px;transform:translateY(0);transition:transform .5s ease-in-out;z-index:1;@media(min-width:1024px){display:block}}#controls-desktop.hidden{transform:translateY(calc(100% - var(--button-height) + 1px))}button#controls-btn{background-color:#0003;border:none;border-bottom:1px solid rgb(255,255,255,.25);box-sizing:border-box;color:#fff;height:var(--button-height);cursor:pointer;font-size:.8rem;font-weight:700;padding:8px;margin:0 -8px var(--padding);transition:background-color .15s ease-in-out;width:calc(100% + var(--padding) * 2);&:hover{background-color:#0000004d}}#keys-wrap{aspect-ratio:4/2.9;position:relative;width:150px}.key{aspect-ratio:1/1.1;border-radius:4px;border:1px solid white;gap:2px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:1.5rem;line-height:1;position:absolute;transform:translate(-50%,-50%);width:28%;span{font-size:.75rem}}.key-w{left:41%;top:26%}.key-a{left:17%;top:75%}.key-s{left:50%;top:75%}.key-d{left:82.5%;top:75%}#controls-mobile{position:fixed;width:100%;height:50dvh;pointer-events:none;z-index:11;top:auto;bottom:0;left:0;touch-action:manipulation;@media(min-width:1024px){display:none}.joystick-wrapper{pointer-events:auto;display:block;position:absolute;bottom:10dvh;width:100px;height:100px;z-index:12;touch-action:manipulation}#joystick-wrapper-1{left:50px}#joystick-wrapper-2{right:50px}}.noSelect{-webkit-touch-callout:none;-webkit-user-select:none;-html-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}#loading-screen{align-items:center;background-color:#0e0f19;color:#fff;display:flex;flex-direction:column;height:100%;position:fixed;top:0;left:0;width:100%;justify-content:center;z-index:999}#loading-img{image-rendering:pixelated;filter:brightness(8) grayscale(1);width:150px}#progress-bar-wrap{background-color:transparent;border:1px solid #fff;height:5px;margin-top:2px;overflow:hidden;position:relative;width:200px}#progress-bar{background-color:#fff;height:100%;width:0}