.c-joystick { pointer-events: auto; }
.c-joystick .pad {
  position: absolute; bottom: max(16px, env(safe-area-inset-bottom)); width: 172px; height: 172px;
  touch-action: none; /* allow preventDefault while dragging */
}
.c-joystick .pad.left  { left: 16px; }
.c-joystick .pad.right { right: 16px; }

.c-joystick .base { position: absolute; left: 50%; top: 50%; width: 140px; height: 140px; transform: translate(-50%,-50%); border-radius: 50%;
  background: radial-gradient(closest-side, #1d232a 0 60%, #13171c 61% 100%); outline: 2px solid #222831; box-shadow: inset 0 4px 16px rgba(0,0,0,.6), 0 2px 8px rgba(0,0,0,.35);
}
.c-joystick .thumb { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; transform: translate(-50%,-50%); border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #9bb4ff, #6e85f5 60%, #4c5fcf); box-shadow: 0 4px 14px rgba(0,0,0,.45); transition: transform 120ms ease-out; will-change: transform;
}

/* Center debug HUD */
.c-joystick .hud-center {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: rgba(16,20,24,.85); border: 1px solid #20262d; border-radius: 14px; backdrop-filter: blur(6px);
  padding: 12px 16px; min-width: 280px; text-align: center; color: #e7ecef; z-index: 12000;
  font-size: 14px; line-height: 1.35; pointer-events: none;
}
.c-joystick .hud-center code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.c-joystick .hud-center .row { display: grid; grid-template-columns: 1fr; gap: 6px; }
.c-joystick .hud-center .title { font-weight: 700; opacity: .9; }