.mobile-joystick{position:fixed;left:var(--mobile-joystick-x);top:var(--mobile-joystick-y);z-index:140;width:var(--mobile-joystick-size);height:var(--mobile-joystick-size);border:2px solid hsla(0,0%,100%,.58);border-radius:50%;background:hsla(0,0%,100%,.24);box-shadow:0 8px 24px rgba(24,33,58,.14);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;pointer-events:auto;transform:translate(-50%,-50%)}.mobile-joystick__knob{position:absolute;left:50%;top:50%;width:var(--mobile-joystick-knob-size);height:var(--mobile-joystick-knob-size);border:2px solid hsla(0,0%,100%,.82);border-radius:50%;background:rgba(100,76,235,.76);box-shadow:0 4px 12px rgba(24,33,58,.18);transform:translate(-50%,-50%) translate(var(--mobile-joystick-knob-x),var(--mobile-joystick-knob-y));pointer-events:none}.mobile-joystick-hint{position:fixed;left:calc(env(safe-area-inset-left, 0px) + 20px);bottom:calc(env(safe-area-inset-bottom, 0px) + 24px);z-index:139;max-width:min(62vw,260px);padding:9px 14px;border:1px solid hsla(0,0%,100%,.52);border-radius:999px;background:rgba(20,25,47,.48);color:#fff;font-size:14px;font-weight:700;line-height:1.2;text-align:center;box-shadow:0 5px 16px rgba(24,33,58,.12);pointer-events:none;user-select:none;-webkit-user-select:none;animation:mobile-joystick-hint-in .24s ease-out both}@keyframes mobile-joystick-hint-in{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){.mobile-joystick-hint{animation:none}}