html,body{margin:0;padding:0;border:0;width:100%;height:100%;background-color:#242020;color:#ccc;overflow:hidden}canvas{border:1px solid black;touch-action:none;position:fixed;left:0;top:0}virtual-joystick::part(joystick){background-color:#28282899;border-color:#786e6e;border-width:3px}virtual-joystick::part(joystick active){background-color:#3c3c3cb3}virtual-joystick.hyperextend::part(joystick){background-color:#828282bf}virtual-joystick.full::part(joystick){border-color:#fff}virtual-joystick::part(joystick):after{background-color:#643c3ccc;border:3px solid rgb(130,75,75)}virtual-joystick.hyperextend::part(joystick):after{background-color:#643c3c}#stick{position:fixed;bottom:0;left:0;z-index:10;padding:5rem 5rem 3rem 3rem}.spinnercontainer{height:100%;display:flex;align-items:center;justify-content:center;z-index:9}.spinnercontainer>div{z-index:9;display:flex;flex-direction:column;align-items:center}.spinner{border:.5rem solid #333;border-radius:50%;border-top:.5rem solid #aaa;width:3rem;height:3rem;-webkit-animation:spin 3s linear infinite;animation:spin 3s linear infinite;box-sizing:border-box;left:50%}.spinnertext{font:3.5vmax sans;color:#eee;text-align:center;width:100%;margin-top:.5rem}.progress{--size: 3rem;--thickness: .5rem;--track: #333;--fill: #aaa;--progress: 0;width:var(--size);height:var(--size);border-radius:50%;position:relative;background:conic-gradient(from 0deg,var(--fill) calc(var(--progress)*1turn),transparent 0 1turn),var(--track);mask:radial-gradient(farthest-side,transparent calc(100% - var(--thickness)),#000 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - var(--thickness)),#000 0)}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(360deg)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.hide{display:none}.invisible,.notouch{visibility:hidden}