/*
 * Vibegames Input Kit — touch overlay styles.
 *
 * Import this as a string and hand it to initTouch({ css }) (Vite: `?raw`), or
 * link it however your game handles CSS. Everything is namespaced `vg-` and
 * positioned in the SAFE AREA — `env(safe-area-inset-*)` keeps controls clear of
 * the notch, the home bar and rounded corners, which is the difference between
 * a jump button and a button the phone eats.
 *
 * Deliberately low-contrast: controls should be findable by thumb and ignorable
 * by eye. They sit over the game, so they must never become the picture.
 */

.vg-touch {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;                 /* children opt in */
  font-family: system-ui, sans-serif;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.vg-touch.is-hidden { display: none; }

/*
 * Explicit stacking inside the overlay.
 *
 * Every child here is absolutely positioned, so without a z-index the browser
 * hit-tests them in DOM order — and the full-screen layers (the gesture surface,
 * and the lane halves in `lane-hold`) sit underneath buttons that live INSIDE
 * them. Get the order wrong and the buttons still render perfectly while every
 * tap goes to the layer on top: in lane-hold that means WHIP fires nothing and
 * steers instead. Pin it here so no future append order can bring it back.
 *
 *   0  surface (gestures)   1  lanes / stick   2  action buttons
 */
.vg-surface {
  position: absolute;
  inset: 0;
  pointer-events: auto;
  touch-action: none;
  z-index: 0;
}

/* ------------------------------------------------------------------ buttons */

.vg-btn {
  position: absolute;
  pointer-events: auto;
  touch-action: none;
  z-index: 2;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(2px);
  color: rgba(255, 255, 255, 0.85);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.5px;
  display: grid;
  place-items: center;
  transition: transform 60ms ease, background 60ms ease;
}
.vg-btn-small { width: 56px; height: 56px; font-size: 15px; }

/*
 * Long labels must stay INSIDE the circle. Games label buttons with their own
 * verbs rather than Ⓐ/Ⓑ — "BRAKE", "SLASH", "SHOOT" — and at 20px a five- or
 * six-letter word is wider than a 72px button, so it spilled over the rim and
 * read as broken. Set by setButtons() from the label's length; the button is a
 * touch target first and a caption second.
 */
.vg-btn-label-5 { font-size: 15px; letter-spacing: 0; }
.vg-btn-label-6 { font-size: 13px; letter-spacing: -0.2px; }
.vg-btn-label-7 { font-size: 11px; letter-spacing: -0.3px; }
.vg-btn-small.vg-btn-label-5 { font-size: 12px; }
.vg-btn-small.vg-btn-label-6 { font-size: 10px; }
.vg-btn-small.vg-btn-label-7 { font-size: 9px; }

/*
 * `--x`/`--y` are unitless numbers multiplied by `1vmin` here, NOT raw `%`.
 * `right`/`left` resolve percentages against the containing block's WIDTH and
 * `bottom` against its HEIGHT — fine as long as one dimension stays roughly
 * constant, but this overlay only ever renders in LANDSCAPE (the orientation
 * gate hides it otherwise), where width is the long, highly variable side
 * (600-950+ CSS px across phones) and height is the short, stable one
 * (~350-430). The same "20%" that read as a modest nudge in the portrait
 * numbers this arc was tuned against becomes ~170-250px of the long landscape
 * side — a button drifting deep enough toward center to sit on the stick's
 * pivot. `vmin` is always the SHORTER of the two axes regardless of
 * orientation, so the same arc constants now land at a consistent, small
 * absolute distance from the corner on every landscape phone.
 */
.vg-btn-right {
  right: calc((var(--x) * 1vmin) + env(safe-area-inset-right, 0px) + 14px);
  bottom: calc((var(--y) * 1vmin) + env(safe-area-inset-bottom, 0px) + 14px);
}
.vg-btn-left {
  left: calc((var(--x) * 1vmin) + env(safe-area-inset-left, 0px) + 14px);
  bottom: calc((var(--y) * 1vmin) + env(safe-area-inset-bottom, 0px) + 14px);
}

.vg-btn.is-down {
  transform: scale(0.92);
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.7);
}

/* -------------------------------------------------------------------- stick */
/* Floating rather than fixed: it appears wherever the thumb lands, which beats
   a painted stick the player has to find. */

.vg-stick {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 0;
  height: 0;
  opacity: 0;
  transition: opacity 120ms ease;
}
.vg-stick.is-active { opacity: 1; }

.vg-stick-base,
.vg-stick-nub {
  position: absolute;
  left: var(--sx, 50%);
  top: var(--sy, 50%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.vg-stick-base {
  width: 132px;
  height: 132px;
  border: 2px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
}
.vg-stick-nub {
  width: 58px;
  height: 58px;
  background: rgba(255, 255, 255, 0.28);
  border: 2px solid rgba(255, 255, 255, 0.5);
}

/* --------------------------------------------------------------------- lanes */
/* lane-hold: two (or more) invisible screen halves you press to steer. A faint
   edge glow on press is the only feedback — enough to learn, not enough to
   clutter. */

.vg-lane {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: 50%;
  pointer-events: auto;
  touch-action: none;
}
.vg-lane-left { left: 0; }
.vg-lane-right { right: 0; }
.vg-lane.is-down { background: rgba(255, 255, 255, 0.06); }

/* ---------------------------------------------------------------- hint text */

.vg-touch-hint {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
  pointer-events: none;
}

/* Rotate-gate styles deliberately live in orientation.js, which injects them
 * itself: this file is only injected when the touch overlay initialises, and a
 * gate that depends on that would render unstyled on any non-touch window. */

@media (prefers-reduced-motion: reduce) {
  .vg-btn { transition: none; }
}