:root{--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px)}
#touch-controls{position:fixed;inset:0;z-index:8;pointer-events:none;display:none;touch-action:none}
.touch-zone{position:absolute;pointer-events:auto;touch-action:none}
#move-zone{left:0;bottom:0;width:48vw;height:45vh}.look-zone{right:0}
#look-zone{right:0;bottom:0;width:52vw;height:62vh}
.joystick{position:absolute;left:26px;bottom:24px;width:142px;height:142px;border:1px solid rgba(255,255,255,.18);border-radius:50%;background:rgba(8,10,11,.24);backdrop-filter:blur(14px);box-shadow:inset 0 0 30px rgba(255,255,255,.025)}
.joystick:before{content:"";position:absolute;inset:28px;border:1px solid rgba(255,255,255,.08);border-radius:50%}.stick{position:absolute;left:50%;top:50%;width:55px;height:55px;margin:-27.5px;border-radius:50%;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.25);box-shadow:0 8px 25px rgba(0,0,0,.25);transform:translate3d(0,0,0)}.joystick-label{position:absolute;left:50%;bottom:7px;transform:translateX(-50%);font-size:6px;letter-spacing:.16em;color:rgba(255,255,255,.24)}
.action-cluster{position:absolute;right:20px;bottom:22px;width:175px;height:175px}.action{position:absolute;width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.22);background:rgba(8,10,11,.48);color:rgba(255,255,255,.9);display:grid;place-items:center;backdrop-filter:blur(13px);box-shadow:0 8px 25px rgba(0,0,0,.24);pointer-events:auto}.action svg{width:18px;height:18px}.action:active{transform:scale(.93);background:rgba(233,255,82,.82);color:#111}.action-a{right:0;top:61px}.action-b{right:61px;top:0}.action-x{right:61px;bottom:0}.action-y{left:0;top:61px}.mobile-pause{position:absolute;right:calc(18px + var(--safe-right));top:calc(78px + var(--safe-top));pointer-events:auto}
@media(pointer:coarse){#touch-controls{display:block}}
@media(orientation:landscape) and (pointer:coarse){#move-zone{width:38vw;height:52vh}.action-cluster{right:25px;bottom:18px}.mobile-pause{top:calc(75px + var(--safe-top))}}