/* Shared touch control visuals — game (#controls) + /npc-settings preview */

.touch-preview-frame {
  position: relative;
  width: 100%;
  max-width: 390px;
  margin: 0 auto 14px;
  min-height: 420px;
  aspect-ratio: 390 / 844;
  border-radius: 22px;
  border: 2px solid rgba(124, 247, 255, 0.28);
  background:
    radial-gradient(ellipse at 50% 12%, rgba(124, 247, 255, 0.08), transparent 55%),
    linear-gradient(180deg, rgba(12, 18, 36, 0.95), rgba(5, 8, 18, 0.98));
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.45);
  overflow: visible;
}

.touch-preview-controls {
  position: absolute;
  inset: 0;
  overflow: visible;
  pointer-events: none;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

.touch-preview-controls > .joystick-cluster,
.touch-preview-controls > .joystick-cluster .touch-preview-action-btn {
  pointer-events: auto;
}

.touch-preview-drag {
  touch-action: none;
  cursor: grab;
  z-index: 2;
}

.touch-preview-drag.is-dragging {
  cursor: grabbing;
  z-index: 4;
  filter: drop-shadow(0 0 14px rgba(124, 247, 255, 0.35));
}

.touch-preview-controls .joystick-cluster {
  position: absolute;
  z-index: 2;
  left: max(var(--stick-inset-left), env(safe-area-inset-left, 0px));
  bottom: calc(
    var(--stick-inset-bottom) + var(--safe-bottom) +
    var(--controls-bottom-lift, calc(var(--controls-bottom-dvh) * 1dvh))
  );
  width: var(--stick-size);
  height: var(--stick-size);
  overflow: visible;
}

.touch-preview-controls .joystick-cluster .action-pad-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
  overflow: visible;
  pointer-events: none;
  z-index: 3;
}

.touch-preview-controls .joystick-cluster .stick-action-btn,
.touch-preview-controls .joystick-cluster .touch-preview-action-btn {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--action-btn-size);
  height: var(--action-btn-size);
  margin: calc(var(--action-btn-size) / -2) 0 0 calc(var(--action-btn-size) / -2);
  transform: rotate(var(--btn-angle, 0deg)) translateX(var(--btn-radius, 120px))
    rotate(calc(-1 * var(--btn-angle, 0deg)));
  touch-action: none;
  cursor: grab;
  pointer-events: auto;
  z-index: 3;
}

.touch-preview-action-btn.is-dragging {
  cursor: grabbing;
  z-index: 5;
  filter: drop-shadow(0 0 14px rgba(124, 247, 255, 0.45));
}

.touch-preview-controls .stick-action-btn--nitro {
  width: calc(var(--action-btn-size) + 8px);
  height: calc(var(--action-btn-size) + 8px);
  margin: calc((var(--action-btn-size) + 8px) / -2) 0 0 calc((var(--action-btn-size) + 8px) / -2);
}

.touch-preview-action-label {
  font-family: "Outfit", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  pointer-events: none;
}

.touch-preview-controls .stick-action-btn--nitro .touch-preview-action-label {
  font-size: 0.78rem;
}

.touch-preview-controls .stick-zone {
  position: relative;
  width: var(--stick-size);
  height: var(--stick-size);
  touch-action: none;
}

.touch-preview-controls .stick-base-outer {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(124, 247, 255, 0.14) 0%, transparent 68%);
  pointer-events: none;
}

.touch-preview-controls .stick-base {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 38%, rgba(42, 58, 98, 0.55) 0%, transparent 52%),
    linear-gradient(165deg, rgba(14, 20, 38, 0.92), rgba(8, 12, 24, 0.96));
  border: 1.5px solid rgba(124, 247, 255, 0.28);
  box-shadow: inset 0 -8px 28px rgba(0, 0, 0, 0.55), 0 8px 32px rgba(0, 0, 0, 0.5);
}

.touch-preview-controls .stick-base-ring {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  border: 1px dashed rgba(124, 247, 255, 0.14);
  pointer-events: none;
}

.touch-preview-controls .stick-knob {
  position: absolute;
  z-index: 2;
  width: var(--stick-knob-size);
  height: var(--stick-knob-size);
  left: 50%;
  top: 50%;
  margin-left: calc(var(--stick-knob-size) / -2);
  margin-top: calc(var(--stick-knob-size) / -2);
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.72) 0%, transparent 42%),
    radial-gradient(circle at 50% 62%, rgba(124, 247, 255, 0.38), rgba(18, 32, 58, 0.95));
  border: 1px solid rgba(200, 244, 255, 0.35);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
}

.touch-preview-controls .stick-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  background: linear-gradient(168deg, rgba(21, 35, 68, 0.94), rgba(8, 14, 28, 0.98));
  border: 1px solid rgba(124, 247, 255, 0.28);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  color: rgba(124, 247, 255, 0.95);
}

.touch-preview-controls .stick-action-btn--nitro {
  border-color: rgba(255, 200, 90, 0.45);
  background: linear-gradient(168deg, rgba(48, 38, 18, 0.94), rgba(18, 12, 8, 0.98));
  color: rgba(255, 214, 120, 0.95);
}