/* Virtual Joystick Styles (140px dial) */
.vj-wrap {
  position: relative;
  width: 140px;
  height: 140px;
  margin-left: calc(.25rem + 15px);
  pointer-events: auto;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.vj-base {
  position: absolute;
  left: 50%; top: 50%;
  width: 140px; height: 140px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background:
    radial-gradient(60% 60% at 50% 40%, rgba(255,255,255,0.18), rgba(255,255,255,0.06) 60%, rgba(0,0,0,0.25) 100%),
    rgba(255,255,255,0.08);
  box-shadow:
    0 12px 28px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(255,255,255,.2),
    inset 0 0 18px rgba(0,0,0,.25);
}

/* 依据强度淡淡提亮外圈 */
.vj-wrap::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 140px; height: 140px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  box-shadow:
    inset 0 0 calc(6px + 10px * var(--vj-intensity, 0)) rgba(255,255,255, calc(.15 + .25 * var(--vj-intensity, 0)));
  pointer-events: none;
}

.vj-thumb {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50px;
  height: 50px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background:
    radial-gradient(60% 60% at 50% 35%, rgba(255,255,255,0.35), rgba(255,255,255,0.12) 60%, rgba(0,0,0,0.35) 100%),
    rgba(255,255,255,0.25);
  box-shadow:
    0 10px 20px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(255,255,255,.35);
  transition: transform .06s ease;
}

/* 按下时整体轻微凸显 */
.vj-active .vj-base {
  box-shadow:
    0 16px 36px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(255,255,255,.22),
    inset 0 0 22px rgba(0,0,0,.28);
}