/* ── 固定摇杆（常显） ───────────────────────────────────────────────
   固定摇杆的定义就是「一直看得见 + 中心不动」，所以这一层是**故意常显**的。
   之前"移动时频闪"的根源是【同一时刻有两层在画】：
     · 我这一层（.fixed-joy-base/.fixed-joy-knob）
     · 游戏自带那层（.joy-base/.joy-knob，旋钮跟着手指跑）
   按下瞬间两层叠加、外加 0.12s 淡入淡出 → 一个静一个动，看着就是闪。
   现在做法：
     ① 固定摇杆模式下，把游戏自带那层隐藏（只保留它的逻辑，不显示）
     ② 去掉淡入淡出，不再有交叉期
     ③ 我的旋钮跟着手指走，按下即对齐
   → 任何时刻只有一层图形，结构上不可能重影。
   ──────────────────────────────────────────────────────────────── */

#fixed-joystick-hint {
  position: fixed;
  z-index: 5;
  display: none;              /* 由 JS 控制；对局中常显 */
  pointer-events: none;
  transform: translate(-50%, -50%);
  opacity: 1;                 /* 不做透明度动画 */
}

.fixed-joy-base {
  width: 96px; height: 96px; box-sizing: border-box; border-radius: 50%;
  border: 3px solid rgba(255, 241, 232, .5);
  background: rgba(29, 43, 83, .35);
}

.fixed-joy-knob {
  position: absolute; left: 50%; top: 50%;
  width: 52px; height: 52px; box-sizing: border-box; border-radius: 50%;
  border: 2px solid rgba(255, 241, 232, .85);
  background: rgba(255, 241, 232, .35);
  /* 旋钮跟手指走（--fj-x/--fj-y 由 JS 在 pointermove 里写） */
  transform: translate(calc(-50% + var(--fj-x, 0px)), calc(-50% + var(--fj-y, 0px)));
}

html.fixed-joystick #joy-zone { cursor: default; }

/* 触屏 + 固定摇杆：隐藏游戏自带的摇杆图形（避免和我这层叠加成"两层"） */
@media (pointer: coarse) {
  html.fixed-joystick #touch-controls .joy-base,
  html.fixed-joystick #touch-controls .joy-knob { display: none !important; }
}