/* mobile.css — touch adaptation of the same voidblack UI (html.ga-touch only).
   mobile.js adds .ga-touch and creates the joysticks/buttons this styles; the
   safe-area maths lives here so no app has to rediscover it. Tokens: theme.css.
   100dvh, never 100vh — on iOS 100vh is the LARGE viewport and overflows. */
html.ga-touch, html.ga-touch body{touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;overscroll-behavior:none}
html.ga-touch [data-screen="main"]{touch-action:none;-webkit-user-select:none;user-select:none}
html.ga-touch input,html.ga-touch textarea{-webkit-user-select:text;user-select:text;font-size:16px}
html.ga-touch canvas{touch-action:none}
html.ga-touch .ga-desktop-only{display:none!important}

/* panels must fit the visible viewport, not the imaginary tall one */
html.ga-touch .glass{max-height:calc(100dvh - var(--ga-bar-h) - var(--ga-safe-t) - var(--ga-safe-b));
  overflow-y:auto}

/* ── virtual joysticks (GA.stick) ── */
.ga-stick{position:fixed;bottom:calc(14px + var(--ga-bar-h) + var(--ga-safe-b));
  z-index:55;width:112px;height:112px;border-radius:50%;display:none;touch-action:none;
  background:radial-gradient(circle,rgba(0,245,228,.05),rgba(0,21,16,.55) 70%);
  border:1px solid var(--teal-trace);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
html.ga-touch .ga-stick{display:block}
.ga-stick:nth-of-type(odd){left:calc(14px + var(--ga-safe-l))}
#ga-stick-l{left:calc(14px + var(--ga-safe-l))}
#ga-stick-r{right:calc(14px + var(--ga-safe-r))}
.ga-nub{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;
  border-radius:50%;background:rgba(0,245,228,.14);border:1px solid var(--teal);
  box-shadow:0 0 12px rgba(0,245,228,.25);transition:transform .05s linear;pointer-events:none}

/* ── hold / tap touch buttons (GA.holdBtn, GA.tapBtn) ── */
.ga-tbtn{position:fixed;z-index:55;width:46px;height:46px;min-height:46px;border-radius:50%;
  display:none;align-items:center;justify-content:center;font-size:19px;touch-action:none;
  background:var(--glass);border:1px solid var(--teal-trace);color:var(--teal-mid)}
html.ga-touch .ga-tbtn{display:flex}
.ga-tbtn.on{border-color:var(--teal);color:var(--teal);box-shadow:0 0 14px rgba(0,245,228,.35)}
#ga-sprint{right:calc(138px + var(--ga-safe-r));bottom:calc(14px + var(--ga-bar-h) + var(--ga-safe-b))}
#ga-home{right:calc(138px + var(--ga-safe-r));bottom:calc(70px + var(--ga-bar-h) + var(--ga-safe-b))}

/* ── portrait nudge (3d-visualizer category only) ── */
#ga-rotate{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;
  background:rgba(3,13,13,.92);color:var(--teal);font:13px var(--mono);letter-spacing:.1em;
  text-transform:uppercase;text-align:center;padding:30px;pointer-events:none}