/* Measured above quick slots by mobile-joystick.js; shared by both HUD layouts. */
#mobile-joystick {
  --mj-safe-left: env(safe-area-inset-left, 0px);
  --mj-safe-right: env(safe-area-inset-right, 0px);
  --mj-safe-top: env(safe-area-inset-top, 0px);
  position: fixed;
  z-index: 26;
  width: clamp(96px, 27vmin, 128px);
  height: clamp(96px, 27vmin, 128px);
  border: 2px solid var(--fk-edge, #8e7949);
  border-radius: 50%;
  background: radial-gradient(circle, #1b201cc9 0 36%, #12170feb 70%);
  box-shadow: 0 3px 12px #0008, inset 0 1px 1px #fff2;
  color: var(--fk-gold-lt, #e0c37d);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  cursor: grab;
  pointer-events: auto;
  contain: layout style;
}
#mobile-joystick[hidden] { display: none !important; }
#mobile-joystick.mj-held { border-color: var(--fk-gold-lt, #e0c37d); cursor: grabbing; }
#mobile-joystick .mj-thumb {
  position: absolute;
  width: 40%;
  height: 40%;
  left: 30%;
  top: 30%;
  border-radius: 50%;
  border: 2px solid var(--fk-edge, #8e7949);
  background: var(--fk-panel, linear-gradient(#4a513c, #272e21));
  box-shadow: 0 2px 5px #0009, inset 0 1px 2px #fff3;
  pointer-events: none;
}
#mobile-joystick .mj-directions { position: absolute; inset: 7px; pointer-events: none; }
#mobile-joystick .mj-directions span { position: absolute; font: 16px/1 system-ui, sans-serif; opacity: .8; }
#mobile-joystick .mj-directions span:nth-child(1) { top: 0; left: 50%; transform: translateX(-50%); }
#mobile-joystick .mj-directions span:nth-child(2) { right: 0; top: 50%; transform: translateY(-50%); }
#mobile-joystick .mj-directions span:nth-child(3) { bottom: 0; left: 50%; transform: translateX(-50%); }
#mobile-joystick .mj-directions span:nth-child(4) { left: 0; top: 50%; transform: translateY(-50%); }
@media (orientation: landscape) and (max-height: 480px) {
  #mobile-joystick { width: 88px; height: 88px; }
}
@media not all and (any-pointer: coarse) {
  #mobile-joystick { display: none; }
}