/* /webxr/ page chrome — canvas, loading overlay. Brand colors carried over
   from the A-Frame loading screen (#8b8bda) and enter-VR button (#8cbc9b). */

:root {
  --webxr-brand: #8b8bda;
  --webxr-accent: #8cbc9b;
  --webxr-ink: #0d001a;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #c0c0c0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.webxr-canvas {
  position: fixed;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
}

.webxr-canvas:active {
  cursor: grabbing;
}

#webxr-quality-control label {
  display: block;
  margin-bottom: 0.4rem;
}

#webxr-quality {
  width: 100%;
  min-height: 44px;
  padding: 0.5rem;
  border: 1px solid #a6b4bc;
  border-radius: 6px;
  background: #172128;
  color: #fff;
  font: inherit;
}

#webxr-quality:focus-visible {
  outline: 3px solid var(--webxr-accent);
  outline-offset: 2px;
}

.webxr-loading {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: var(--webxr-brand);
  font-family: system-ui, sans-serif;
  color: #fff;
}

.webxr-loading[hidden] {
  display: none;
}

.webxr-loading__panel {
  width: min(28rem, 100%);
  padding: 1.5rem;
  border-radius: 12px;
  background: rgb(0 0 0 / 60%);
  text-align: center;
}

.webxr-loading__status {
  margin: 0 0 1rem;
  font-size: 1rem;
}

.webxr-loading__bar {
  width: 100%;
  height: 0.5rem;
  accent-color: var(--webxr-accent);
}

.webxr-loading__failed {
  margin: 1rem 0 0;
  padding: 0;
  max-height: 40vh;
  overflow-y: auto;
  list-style: none;
  font-family: ui-monospace, monospace;
  font-size: 0.8rem;
  text-align: left;
}

.webxr-loading__failed:empty {
  display: none;
}

.webxr-loading__dismiss {
  margin-top: 1rem;
  min-height: 44px;
  padding: 0.5rem 1.25rem;
  border: 0;
  border-radius: 8px;
  background: var(--webxr-accent);
  color: var(--webxr-ink);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.webxr-loading__dismiss:hover,
.webxr-loading__dismiss:focus-visible {
  background: #fff;
}

.webxr-loading__dismiss:focus-visible {
  outline: 3px solid var(--webxr-accent);
  outline-offset: 3px;
}

/* Browser chrome shares the gallery's violet, mint and dark metal palette. */
.webxr-toolbar {
  position: fixed;
  z-index: 9001;
  inset: auto max(1rem, env(safe-area-inset-right)) calc(1rem + env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  color: #edf6f4;
  font: 400 .875rem/1.45 system-ui, sans-serif;
  pointer-events: none;
  --chrome-surface: #17232bf5;
  --chrome-border: #a9c9cc55;
}
.webxr-toolbar > * { pointer-events: auto; }
.webxr-toolbar [hidden] { display: none; }
.webxr-button,
.webxr-controls > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 44px;
  padding: .65rem .9rem;
  border: 1px solid var(--chrome-border);
  border-radius: .75rem;
  background: var(--chrome-surface);
  box-shadow: 0 3px 12px #080c1830;
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.webxr-controls > summary { list-style: none; }
.webxr-controls > summary::-webkit-details-marker { display: none; }
.webxr-controls > summary::before { content: '+'; color: #bdb0fa; font-size: 1.15rem; line-height: 1; }
.webxr-controls[open] > summary::before { content: '−'; }
.webxr-button:hover,
.webxr-controls > summary:hover { background: #2a3b45; border-color: #a1dbc7; }
.webxr-toolbar :focus-visible { outline: 3px solid #acf1d5; outline-offset: 3px; }
.webxr-button:disabled { cursor: not-allowed; opacity: .7; }
.webxr-sound[aria-pressed="true"] { color: #c0f4df; }
.webxr-sound[aria-pressed="false"] .sound-waves,
.webxr-sound[aria-pressed="true"] .sound-slash { display: none; }
.webxr-sound svg { flex: none; }
.webxr-controls__panel {
  position: absolute;
  bottom: calc(100% + .6rem);
  left: 0;
  width: min(25rem, 100%);
  max-height: min(calc(100dvh - 11rem), var(--webxr-help-space, 100dvh));
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding: 1.1rem;
  border: 1px solid var(--chrome-border);
  border-top: 2px solid #a797e3;
  border-radius: 1rem;
  background: var(--chrome-surface);
  box-shadow: 0 8px 28px #080c1840;
}
.webxr-controls__panel h2 { margin: 0 0 .8rem; color: #f2ecff; font-size: 1.1rem; font-weight: 650; letter-spacing: -.02em; }
.webxr-guide { display: grid; grid-template-columns: auto 1fr; gap: .55rem 1rem; margin: 0 0 .9rem; }
.webxr-guide dt { color: #b2e4d1; font-weight: 600; }
.webxr-guide dd { margin: 0; text-wrap: pretty; }
.touch-help { display: none; }
.webxr-touch-move { display: none; }
@media (pointer: coarse) {
  .mouse-help { display: none; }
  .touch-help { display: inline; }
  .webxr-touch-move { display: flex; flex: 1 0 100%; align-items: center; gap: .5rem; }
  .webxr-touch-move .webxr-button { min-height: 52px; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
  .webxr-touch-move .webxr-button[data-held] { background: #31594e; border-color: #acf1d5; }
}
.webxr-controls__actions { display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: center; }
.webxr-controls__panel button,
.webxr-controls__panel a,
.webxr-options > summary,
.webxr-loading__fallback {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: .5rem .3rem;
  color: inherit;
  font: inherit;
  text-underline-offset: .2em;
}
.webxr-controls__panel button { padding-inline: .65rem; border: 1px solid var(--chrome-border); border-radius: .5rem; background: #a4cab00d; cursor: pointer; }
.webxr-options { margin-top: .65rem; padding-top: .25rem; border-top: 1px solid #a9c9cc33; }
.webxr-options > summary { display: list-item; align-content: center; color: #c5c2db; cursor: pointer; }
.webxr-options p { margin: .6rem 0; color: #c9d5dc; }
.webxr-options strong { color: #d7eadd; }
#webxr-quality-control { margin-block: .5rem; }
.webxr-xr-buttons { display: flex; gap: .5rem; margin-left: auto; }
.webxr-xr-buttons:not(:has(button:not([hidden]))) { display: none; }
.webxr-xr-buttons .webxr-button { color: #d1ffe9; border-color: #8fcab380; }
.webxr-xr-note { max-width: 18rem; margin: 0 0 0 auto; padding: .4rem .65rem; border-radius: .6rem; background: #17232be8; color: #d1dbdf; font-size: .75rem; }
#nav-hint { flex: 1 0 100%; margin: 0; padding: .5rem .75rem; border-radius: .6rem; background: var(--chrome-surface); color: #dde8e7; text-align: center; transition: opacity 1s; pointer-events: none; }
.webxr-toolbar:has(.webxr-controls[open]) #nav-hint { display: none; }
/* The availability note is first-visit help: it fades, then leaves the layout (xr.js sets [hidden]). */
.webxr-xr-note[data-faded] { opacity: 0; transition: opacity .6s ease; }
.webxr-availability { margin: .75rem 0 0; color: #c9d5dc; font-size: .85rem; }
.webxr-availability[hidden] { display: none; }

/* Phones: one app bar docked to the bottom edge. Walking sits at the start; sound, tilt and the
   Explore menu follow as icon buttons whose labels stay available to assistive technology. */
@media (max-width: 40rem) {
  .webxr-toolbar {
    inset: auto 0 0;
    gap: .4rem;
    padding: .5rem max(.6rem, env(safe-area-inset-right)) calc(.5rem + env(safe-area-inset-bottom, 0px)) max(.6rem, env(safe-area-inset-left));
    border-top: 1px solid var(--chrome-border);
    background: #0d161cd9;
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
    /* The bar is a surface: taps on its background must not reach the scene as swipes. */
    pointer-events: auto;
  }
  .webxr-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .webxr-button, .webxr-controls > summary { box-shadow: none; }
  .webxr-touch-move { flex: 0 1 auto; }
  .webxr-touch-move .webxr-button { min-width: 52px; padding: 0; font-size: 1.15rem; }
  .webxr-sound, .webxr-button--motion, .webxr-controls > summary { min-width: 44px; padding: 0; }
  /* Icon actions gather at the end of the bar. */
  .webxr-sound { margin-left: auto; }
  .webxr-controls { order: 3; }
  .webxr-controls > summary::before {
    content: '';
    width: 20px;
    height: 20px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m15.5 8.5-2 5-5 2 2-5z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m15.5 8.5-2 5-5 2 2-5z'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .webxr-controls[open] > summary { border-color: #a797e3; color: #e6defe; }
  .webxr-xr-buttons { order: 4; flex: 1 0 100%; margin-left: 0; }
  .webxr-xr-buttons .webxr-button { flex: 1; }
  .webxr-xr-note, #nav-hint { order: -1; flex: 1 0 100%; max-width: none; margin: 0; text-align: center; }
  .webxr-controls__panel { left: 0; right: 0; width: auto; padding: .9rem; }
}

/* Larger screens outside a headset: the same controls as one floating bar centred at the
   bottom, labels shown, scaling with the viewport. */
@media (min-width: 40.0625rem) {
  .webxr-toolbar {
    inset: auto auto calc(clamp(.75rem, 2vh, 1.5rem) + env(safe-area-inset-bottom, 0px)) 50%;
    translate: -50% 0;
    width: max-content;
    max-width: calc(100vw - 2rem);
    justify-content: center;
    gap: clamp(.4rem, .8vw, .65rem);
    padding: clamp(.4rem, .8vw, .55rem);
    border: 1px solid var(--chrome-border);
    border-radius: 1.1rem;
    background: #0d161cd9;
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
    box-shadow: 0 10px 32px #080c1840;
    font-size: clamp(.875rem, .8rem + .2vw, 1rem);
    pointer-events: auto;
  }
  .webxr-button, .webxr-controls > summary { box-shadow: none; }
  .webxr-touch-move { flex: 0 1 auto; }
  .webxr-xr-buttons { margin-left: 0; }
  .webxr-xr-note { margin: 0; }
  /* The menu keeps its reading width even when the bar itself is compact. */
  .webxr-controls__panel { width: min(25rem, calc(100vw - 2rem)); }
}
@media (max-height: 450px) {
  .webxr-controls__panel { max-height: min(calc(100dvh - 8rem), var(--webxr-help-space, 100dvh)); }
}
@media (prefers-reduced-motion: reduce) { #nav-hint { transition: none; } }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hidden { display: block; height: 0; }