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

#joystick-zone {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 42vw;
  height: 46vh;
  max-width: 260px;
  max-height: 260px;
  pointer-events: auto;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 24px;
}

#joystick-base {
  width: 110px;
  height: 110px;
  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: 46px;
  height: 46px;
  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: 24px;
  display: flex;
  align-items: flex-end;
  gap: 14px;
  pointer-events: auto;
}

.action-btn {
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--bg-deep);
  background: var(--yellow);
  border: 3px solid var(--yellow);
  border-radius: 50%;
  width: 68px;
  height: 68px;
  box-shadow: 0 0 14px rgba(255,233,61,0.5);
}
.action-btn.fire {
  width: 88px;
  height: 88px;
  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); }