.mobile-joystick {
  position: absolute;
  z-index: 8;
  left: max(17px, env(safe-area-inset-left));
  bottom: max(18px, calc(env(safe-area-inset-bottom) + 10px));
  width: 112px;
  height: 128px;
  display: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  filter: drop-shadow(0 12px 20px rgba(0, 12, 29, .42));
}

.mobile-joystick__label {
  position: absolute;
  inset: 0 0 auto;
  color: color-mix(in srgb, var(--joystick-accent) 76%, white);
  font: 800 8px/1 Bahnschrift, "Microsoft YaHei UI", sans-serif;
  letter-spacing: .22em;
  text-align: center;
  text-shadow: 0 2px 8px #001b2b;
  opacity: .9;
}

.mobile-joystick__base {
  position: absolute;
  inset: auto 0 0;
  width: 112px;
  height: 112px;
  border: 1px solid color-mix(in srgb, var(--joystick-accent) 52%, transparent);
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 46%, color-mix(in srgb, var(--joystick-accent) 18%, transparent) 47% 49%, transparent 50%),
    repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--joystick-accent) 38%, transparent) 0 1deg, transparent 1deg 45deg),
    radial-gradient(circle at 38% 31%, rgba(255,255,255,.13), transparent 28%),
    rgba(2, 34, 55, .55);
  box-shadow:
    inset 0 0 28px rgba(0, 11, 29, .58),
    0 0 0 6px rgba(6, 67, 84, .13),
    0 0 24px color-mix(in srgb, var(--joystick-accent) 15%, transparent);
  backdrop-filter: blur(5px);
}

.mobile-joystick__base::before,
.mobile-joystick__base::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: color-mix(in srgb, var(--joystick-accent) 20%, transparent);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.mobile-joystick__base::before { width: 70%; height: 1px; }
.mobile-joystick__base::after { width: 1px; height: 70%; }

.mobile-joystick__thumb {
  position: absolute;
  left: calc(50% - 24px);
  top: calc(50% - 24px);
  width: 48px;
  height: 48px;
  border: 1px solid color-mix(in srgb, var(--joystick-accent) 72%, white);
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 30%, rgba(255,255,255,.38), transparent 22%),
    linear-gradient(145deg, color-mix(in srgb, var(--joystick-accent) 68%, #123b55), #06324d 76%);
  box-shadow:
    inset 0 0 12px rgba(208, 255, 255, .18),
    0 5px 13px rgba(0, 14, 33, .48),
    0 0 0 4px color-mix(in srgb, var(--joystick-accent) 9%, transparent);
  transition: transform 70ms linear, filter 120ms ease, box-shadow 120ms ease;
  pointer-events: none;
}

.mobile-joystick__thumb::after {
  content: "";
  position: absolute;
  inset: 17px 12px;
  border-radius: 999px;
  background: rgba(234, 255, 255, .78);
  box-shadow: 0 0 9px var(--joystick-accent);
}

.mobile-joystick.is-engaged .mobile-joystick__base {
  border-color: color-mix(in srgb, var(--joystick-accent) 86%, white);
  box-shadow:
    inset 0 0 30px color-mix(in srgb, var(--joystick-accent) 18%, transparent),
    0 0 0 6px color-mix(in srgb, var(--joystick-accent) 13%, transparent),
    0 0 30px color-mix(in srgb, var(--joystick-accent) 31%, transparent);
}

.mobile-joystick.is-engaged .mobile-joystick__thumb {
  filter: brightness(1.2) saturate(1.18);
  box-shadow: 0 5px 14px rgba(0, 14, 33, .48), 0 0 20px color-mix(in srgb, var(--joystick-accent) 45%, transparent);
}

@media (pointer: coarse) and (max-width: 1024px) {
  .mobile-joystick.is-enabled { display: block; }
}

@media (pointer: coarse) and (max-height: 520px) {
  .mobile-joystick {
    left: max(12px, env(safe-area-inset-left));
    bottom: max(8px, env(safe-area-inset-bottom));
    width: 92px;
    height: 104px;
  }

  .mobile-joystick__base { width: 92px; height: 92px; }
  .mobile-joystick__thumb { left: calc(50% - 20px); top: calc(50% - 20px); width: 40px; height: 40px; }
  .mobile-joystick__thumb::after { inset: 14px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-joystick__thumb { transition: none; }
}