/* ---------- Mobile touch controls ---------- */
#touch-controls {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
}
.touch-hidden {
  display: none;
}
.joystick {
  position: absolute;
  bottom: max(30px, calc(env(safe-area-inset-bottom) + 18px));
  left: max(30px, calc(env(safe-area-inset-left) + 18px));
  width: 130px;
  height: 130px;
  background: rgba(255, 255, 255, 0.35);
  border: 3px solid rgba(176, 53, 121, 0.6);
  border-radius: 50%;
  pointer-events: auto;
  touch-action: none;
}
.joystick-knob {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  background: linear-gradient(180deg, #ff8fc4 0%, #ff5b8d 100%);
  border: 3px solid #c0367a;
  border-radius: 50%;
  box-shadow:
    0 4px 0 #c0367a,
    0 6px 14px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  transition: none;
}
.touch-btn {
  position: absolute;
  bottom: max(50px, calc(env(safe-area-inset-bottom) + 28px));
  right: max(40px, calc(env(safe-area-inset-right) + 24px));
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffd86b 0%, #f5b800 100%);
  border: 3px solid #b08000;
  color: #5a3800;
  font-family: "Georgia", serif;
  font-size: 36px;
  font-weight: bold;
  pointer-events: auto;
  box-shadow:
    0 4px 0 #b08000,
    0 6px 14px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  user-select: none;
  touch-action: none;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
  transition:
    transform 0.08s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.08s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.touch-btn:active {
  transform: translateY(3px) scale(0.94);
  box-shadow:
    0 1px 0 #b08000,
    0 2px 6px rgba(0, 0, 0, 0.18);
}