: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:50;display:none;pointer-events:none;touch-action:none}
.touch-zone{position:absolute;pointer-events:auto;touch-action:none}
#move-zone{left:0;bottom:0;width:45vw;height:52vh}
#look-zone{right:0;bottom:0;width:55vw;height:65vh}
.joystick{position:absolute;left:24px;bottom:24px;width:138px;height:138px;border:1px solid rgba(255,255,255,.16);border-radius:50%;background:rgba(8,10,11,.25);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px)}
.joystick:before{content:"";position:absolute;inset:27px;border:1px solid rgba(255,255,255,.08);border-radius:50%}
.stick{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px;border-radius:50%;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.24)}
.joystick-label{position:absolute;left:50%;bottom:7px;transform:translateX(-50%);font-size:6px;letter-spacing:.16em;color:rgba(255,255,255,.25)}
.action-cluster{position:absolute;right:20px;bottom:20px;width:175px;height:175px}
.action{position:absolute;width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(8,10,11,.5);color:rgba(255,255,255,.9);display:grid;place-items:center;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);pointer-events:auto}
.action svg{width:18px}.action:active{transform:scale(.92)}
.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(76px + var(--safe-top));pointer-events:auto}
@media(pointer:coarse){#touch-controls{display:block}}
@media(orientation:landscape) and (pointer:coarse){#move-zone{width:38vw;height:54vh}.action-cluster{right:24px;bottom:20px}}