/* Only the touch controller is styled; desktop HUD and game gestures stay intact. */
#mobile-joystick{display:none}
#mobile-joystick[data-touch-enabled="true"]{
  --joystick-size:104px;--joystick-knob:44px;
  display:block;position:fixed;z-index:25;
  left:max(16px,env(safe-area-inset-left));bottom:calc(96px + env(safe-area-inset-bottom));
  width:var(--joystick-size);height:var(--joystick-size);min-width:0;min-height:0;
  padding:0;margin:0;box-sizing:border-box;border:1px solid #68d9ff9c;border-radius:50%;
  background:radial-gradient(circle,#08334790 0 43%,#021724d9 44% 66%,#0d4967dc 67% 70%,#061a29e8 71%);
  box-shadow:inset 0 0 0 5px #00101d80,inset 0 0 22px #31baf521,0 3px 12px #0007;
  color:#c2efff;touch-action:none;user-select:none;-webkit-user-select:none;
  -webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;
  cursor:grab;isolation:isolate;overscroll-behavior:contain;
}
#mobile-joystick::before{content:"";position:absolute;inset:14px;border:1px dashed #7ddfff35;border-radius:50%;pointer-events:none}
#mobile-joystick .mobile-joystick-thumb{
  display:grid;place-items:center;position:absolute;left:50%;top:50%;
  width:var(--joystick-knob);height:var(--joystick-knob);box-sizing:border-box;
  border:2px solid #77dcff;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 38% 28%,#29749b,#0d3049 70%);
  box-shadow:inset 0 0 0 4px #08273d,0 3px 9px #0008;
  transform:translate(calc(-50% + var(--joystick-x,0px)),calc(-50% + var(--joystick-y,0px)));
  transition:transform .1s ease-out;
}
#mobile-joystick .mobile-joystick-thumb::after{content:"";width:12px;height:12px;border:2px solid #b4f2ffb3;border-radius:50%;box-shadow:0 0 8px #50cafa40}
#mobile-joystick.is-dragging{cursor:grabbing;border-color:#8de7ff;box-shadow:inset 0 0 0 5px #00101d80,0 0 16px #26bdfc26}
#mobile-joystick.is-dragging .mobile-joystick-thumb{transition:none}
#mobile-joystick:focus-visible{outline:2px solid #fff;outline-offset:4px}
#mobile-joystick .mobile-joystick-label{position:absolute;left:0;right:0;top:calc(100% + 5px);font:700 9px/1.2 Arial,sans-serif;letter-spacing:1.6px;text-shadow:0 1px 3px #000;pointer-events:none}
html:has(#auth-screen:not(.hidden)) #mobile-joystick,
html:has(#account-lobby:not([hidden])) #mobile-joystick{display:none!important}
@media(orientation:landscape) and (max-height:500px){
  #mobile-joystick[data-touch-enabled="true"]{--joystick-size:104px;--joystick-knob:44px;bottom:calc(76px + env(safe-area-inset-bottom));left:max(14px,env(safe-area-inset-left))}
}
@media(prefers-reduced-motion:reduce){#mobile-joystick .mobile-joystick-thumb{transition:none}}