/* Virtual Joystick Styles — responsive clamp sizing (min 120px) */
.vj-wrap {
  position: relative;
  /* 自适应直径：最小 120px，随视口放大，上限约 150px */
  width: clamp(120px, 22vw, 150px);
  height: clamp(120px, 22vw, 150px);
  margin-left: .25rem;
  pointer-events: auto;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.vj-base {
  position: absolute;
  left: 50%; top: 50%;
  /* 跟随容器百分比，而非固定像素 */
  width: 100%; height: 100%;
  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: 100%; height: 100%;
  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;
}

/* 拇指帽同样自适应，按 120px 圆盘比例缩放 */
.vj-thumb {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(40px, 6vw, 48px);
  height: clamp(40px, 6vw, 48px);
  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);
}