#touch-controls {
  position: absolute;
  inset: 0;
  z-index: 22;
  pointer-events: none;
}

#joystick-zone {
  position: absolute;
  left: 0;
  bottom: 0;
  width: clamp(128px, 34vw, 260px);
  height: clamp(120px, 46vh, 260px);
  max-width: 260px;
  max-height: 260px;
  pointer-events: auto;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 12px;
  padding-left: calc(12px + env(safe-area-inset-left));
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

#joystick-base {
  width: clamp(84px, 24vmin, 116px);
  height: clamp(84px, 24vmin, 116px);
  border-radius: 50%;
  border: 3px solid var(--cyan);
  background: rgba(46,242,255,0.08);
  position: relative;
  box-shadow: 0 0 16px rgba(46,242,255,0.35);
}

#joystick-stick {
  width: clamp(36px, 10vmin, 50px);
  height: clamp(36px, 10vmin, 50px);
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px var(--cyan);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.05s linear;
}

#action-buttons {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: 12px;
  padding-right: calc(12px + env(safe-area-inset-right));
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  display: flex;
  align-items: flex-end;
  gap: clamp(8px, 2vw, 14px);
  pointer-events: auto;
}

.action-btn {
  font-family: var(--font-display);
  font-size: clamp(9px, 2.4vmin, 12px);
  color: var(--bg-deep);
  background: var(--yellow);
  border: 3px solid var(--yellow);
  border-radius: 50%;
  width: clamp(54px, 15vmin, 72px);
  height: clamp(54px, 15vmin, 72px);
  box-shadow: 0 0 14px rgba(255,233,61,0.5);
}
.action-btn.fire {
  width: clamp(66px, 19vmin, 92px);
  height: clamp(66px, 19vmin, 92px);
  background: var(--magenta);
  border-color: var(--magenta);
  color: var(--white);
  box-shadow: 0 0 18px rgba(255,43,214,0.6);
}
.action-btn:active { transform: scale(0.92); }