/* xr-polish.css — cross-cutting accessibility and comfort rules for every OVU space.
   Kept deliberately small and generic; per-space layout stays in each file. */

/* Touch gestures belong to the experience, not the browser.
   Only Clarksdale declared touch-action, so in every other space a drag on a
   phone was interpreted as a page pan or a pinch-zoom and the browser stole
   it — looking around fought the scroller, and a downward drag could fire
   pull-to-refresh. This is why the view felt "not locked" on mobile.
   Scoped to the WebGL canvas so DOM panels that genuinely need to scroll
   (the Asili thread panel on a phone) still scroll normally. */
canvas { touch-action: none; }
html, body { overscroll-behavior: none; }

/* Keyboard focus. None of the spaces showed a focus ring, so tabbing through
   a space was invisible. :focus-visible only fires for keyboard users, so
   mouse and touch interaction is unchanged. */
:focus-visible {
  outline: 2px solid #E8C547;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Respect a reduced-motion preference. These spaces lean on drifting orbs,
   pulsing rings and long cross-fades, which is exactly the kind of motion
   that triggers discomfort. Animations still run so anything relying on an
   animation to reach its end state still gets there — just effectively
   instantly. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Touch targets: anything interactive should clear the 44px minimum on
   phones. Applied only where a control would otherwise be smaller. */
@media (pointer: coarse) {
  button, [role="button"], a.cbtn, .qpill {
    min-height: 44px;
  }
}

/* The fixed "back to lobby" link is the primary way out of a space, but it
   rendered at roughly 47x12px — too small to hit reliably on a phone, and it
   is the one control a lost viewer needs most. It's position:fixed, so
   growing the hit area disturbs no other layout; the negative offsets keep
   the text exactly where it was drawn before. */
body a.back {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 .5rem;
  margin-top: -1rem;
  margin-left: -.5rem;
}

/* Keep it clear of a notch in landscape. */
@supports (padding: env(safe-area-inset-left)) {
  body a.back { margin-left: calc(-.5rem + env(safe-area-inset-left)); }
}

/* The way out, on a phone.
   These were 26–35px tall and drawn as thin text over 360° video, so on a
   handset the exit was both hard to hit and hard to see. Keyed to screen
   width rather than pointer:coarse — the coarse query misses plenty of real
   touch devices, and a bigger, legible exit hurts nobody on a small screen.
   Prefixed with body{} to outrank each environment's own id rules, which
   load after this sheet. */
@media (max-width: 560px) {
  body #cm-lobby-btn,
  body #back-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: .5rem .95rem;
    border-radius: 2rem;
    background: rgba(10, 8, 14, .82);
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 14px rgba(0, 0, 0, .45);
  }
}