/* ===== sci-fi design tokens ===== */
:root {
  --sci-cyan: #35e0ff;
  --sci-cyan-2: #7cf2ff;
  --sci-blue: #2f7fff;
  --sci-mag: #ff49c7;
  --sci-panel: rgba(9, 16, 28, 0.86);
  --sci-panel-2: rgba(14, 24, 40, 0.92);
  --sci-line: rgba(53, 224, 255, 0.55);
  --sci-line-soft: rgba(53, 224, 255, 0.22);
  --sci-text: #bfe9ff;
  --sci-font: ui-monospace, 'SF Mono', 'Consolas', 'Roboto Mono', monospace;
  --clip-hud: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
}

/* ===== block browser gestures: double-tap zoom, pinch zoom, callouts, overscroll ===== */
html, body {
  touch-action: none;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}
a-scene canvas, .a-canvas {
  touch-action: none;
}
button, input[type=range] {
  touch-action: manipulation;   /* taps stay fast, no double-tap zoom on UI */
}

/* ===== virtual joystick (cyan HUD) ===== */
.joystick-container {
  pointer-events: none;
  opacity: 0;
}
.joystick-container.visible {
  opacity: 1;
}
.joystick {
  position: absolute;
  transform: translate(-50%, -50%);
  border-radius: 10000px;
  z-index: 5;
}
.joystick.position {
  width: 15vmin;
  height: 15vmin;
  background-color: rgba(53, 224, 255, 0.9);
  box-shadow: 0 0 18px rgba(53, 224, 255, 0.7), inset 0 0 10px rgba(255, 255, 255, 0.5);
  z-index: 10;
}
.joystick.origin {
  width: 40vmin;
  height: 40vmin;
  border: 1.6vmin solid rgba(53, 224, 255, 0.6);
  box-shadow: 0 0 22px rgba(53, 224, 255, 0.4), inset 0 0 22px rgba(53, 224, 255, 0.22);
}

/* ===== bottom hint readout (HUD ticket) ===== */
/* scoped to #overlay — a bare `h3` selector here would leak into any other
   <h3> on the page (e.g. the help modal's section headers) */
#overlay h3 {
  text-align: center;
  color: var(--sci-text);
  font-family: var(--sci-font);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  text-shadow: 0 0 6px rgba(53, 224, 255, 0.45);

  z-index: 10;
  position: absolute;
  bottom: 2vh;
  left: 50%;
  transform: translate(-50%, 0);
  /* compact ticket that JS lifts above the active mode's UI; wraps rather than
     truncating, since translated hints run longer than the original text. */
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  background: var(--sci-panel);
  border: 1px solid var(--sci-line-soft);
  border-left: 3px solid var(--sci-cyan);
  box-shadow: 0 0 14px rgba(53, 224, 255, 0.18);
  padding: 7px 15px;
  border-radius: 2px;
  white-space: normal;
  max-width: 78vw;
  transition: bottom 0.25s;
  pointer-events: none;
}

/* ===== recenter button ===== */
#recenterBtn {
  position: absolute;
  z-index: 5;
  left: 1vh;
  bottom: 1vh;
  max-width: 12vw;
  rotate: -90deg;
  filter: drop-shadow(0 0 6px rgba(53, 224, 255, 0.65));
}
.pulse-once { animation: pulse-once 0.2s cubic-bezier(0.785, 0.135, 0.150, 0.860) both; }
@keyframes pulse-once {
  0% {transform: scale(1);}
  50% {transform: scale(0.8);}
  100% {transform: scale(1);}
}