body,html{touch-action:none;background-color:#111;width:100%;height:100dvh;margin:0;padding:0;overflow:hidden}#app{width:100%;height:100dvh}canvas{display:block}#ui-layer{pointer-events:none;z-index:100;touch-action:none;display:none;position:absolute;inset:0}@media (pointer:coarse){#ui-layer{display:block}}#joystick-base{bottom:calc(25px + env(safe-area-inset-bottom,0px));left:calc(25px + env(safe-area-inset-left,0px));pointer-events:auto;-webkit-backdrop-filter:blur(8px);-webkit-user-select:none;user-select:none;background:#ffffff0d;border:2px solid #fff3;border-radius:50%;width:140px;height:140px;position:absolute}#joystick-knob{pointer-events:none;background:#ffffffb3;border-radius:50%;width:60px;height:60px;margin-top:-30px;margin-left:-30px;position:absolute;top:50%;left:50%;box-shadow:0 4px 15px #00000080}#shoot-btn{bottom:calc(35px + env(safe-area-inset-bottom,0px));right:calc(35px + env(safe-area-inset-right,0px));-webkit-backdrop-filter:blur(8px);pointer-events:auto;-webkit-user-select:none;user-select:none;color:#fff;-webkit-tap-highlight-color:transparent;background:#ffffff1a;border:2px solid #fff6;border-radius:50%;outline:none;justify-content:center;align-items:center;width:80px;height:80px;font-family:Arial,sans-serif;font-size:36px;font-weight:800;display:flex;position:absolute;box-shadow:0 4px 15px #0000004d}#shoot-btn:active{background:#ffffff4d;transform:scale(.92)}@media (orientation:landscape) and (pointer:coarse){#joystick-base{bottom:calc(5px + env(safe-area-inset-bottom,0px));left:calc(5px + env(safe-area-inset-left,0px))}#shoot-btn{bottom:calc(5px + env(safe-area-inset-bottom,0px));right:calc(5px + env(safe-area-inset-right,0px))}}