:root {
  color-scheme: dark;
  --bg: #0b0907;
  /* Over the 3D view, nearly opaque, so the text on it keeps 4.5:1 over the palest wall. */
  --panel: rgba(20, 28, 25, 0.92);
  --line: rgba(224, 187, 114, 0.45);
  --text: #f1e6d0;
  --muted: #c4b597;
  --accent: #e0bb72;
  --radius: 14px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Noto Serif", serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font: 15px/1.45 var(--font); }
#app, #app canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#app canvas { touch-action: none; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Over the view: the card (#overlay, the page's <nav>), and in the <main> with the view, its hint,
   buttons, aiming dot and messages (#view-overlay). */
#overlay, #view-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#overlay > *, #view-overlay > * { pointer-events: auto; }

/* The room's name, the way back to the hallway, and what the room offers. On a short screen it
   scrolls: it stays inside the screen and above the buttons at its foot, however many rows they
   wrap to (overlay.js measures them, --buttons). The hallway's. */
.card {
  --card-top: max(12px, env(safe-area-inset-top));
  --card-bottom: calc(max(16px, env(safe-area-inset-bottom)) + var(--buttons, 0px) + 8px);
  position: fixed; top: var(--card-top); left: max(12px, env(safe-area-inset-left));
  width: min(340px, calc(100vw - 24px)); padding: 10px 14px 12px;
  max-height: calc(100vh - var(--card-top) - var(--card-bottom));
  max-height: calc(100dvh - var(--card-top) - var(--card-bottom));
  overflow-y: auto; overscroll-behavior: contain; scroll-padding-block: 8px; scrollbar-width: thin;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  backdrop-filter: blur(8px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.card header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { margin: 0; font: 600 21px/1.2 var(--serif); letter-spacing: 0.05em; color: var(--accent); }
.way-back {
  display: inline-flex; align-items: center; min-height: 28px; padding: 3px 12px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--text); font-size: 13px;
  text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%;
}
.way-back:hover { border-color: var(--accent); color: var(--accent); }
.tagline { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.card.alone { width: min(440px, calc(100vw - 24px)); }
.no-webgl { margin: 10px 0 0; color: var(--muted); }

/* The shared session and the settings (motion, how to move and turn in VR, the vignette, seated):
   the control panel's choices, for a keyboard or a screen reader. */
.in-room { margin-top: 10px; }
.actions { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  min-height: 28px; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.2);
  color: var(--text); font-size: 13px;
}
.chip:hover, .chip[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
.together { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.settings { margin-top: 8px; display: grid; gap: 4px; }
.settings fieldset { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; margin: 0; padding: 0 0 0 6.5em; border: 0; }
/* The legend in the fieldset's left margin, so options that wrap line up under the first. */
.settings legend { float: left; width: 6.5em; margin-left: -6.5em; padding: 0; line-height: 28px; color: var(--muted); font-size: 13px; }
.settings label { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; font-size: 13px; cursor: pointer; }
.settings input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }

/* How to move. */
.hint {
  position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  width: max-content; max-width: calc(100vw - 32px); margin: 0; padding: 8px 14px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.74); color: var(--text); font-size: 13px; text-align: center;
  pointer-events: none !important; transition: opacity 0.8s ease;
}
.hint.gone { opacity: 0; }

/* Wave and Copy invite link (in a shared session), Fullscreen and Enter VR. */
.buttons {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  left: max(16px, env(safe-area-inset-left));
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; pointer-events: none !important;
}
.pill {
  pointer-events: auto; min-height: 40px; padding: 9px 18px; border-radius: 999px; border: 1px solid var(--accent);
  background: var(--panel); color: var(--accent); font-weight: 600; letter-spacing: 0.03em;
}
.pill:hover, .pill.on { background: var(--accent); color: #1a1208; }

/* Where a gamepad aims: the middle of the view. */
.aim {
  position: fixed; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
  border: 2px solid rgba(255, 248, 235, 0.95); pointer-events: none !important;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.55), inset 0 0 0 2px rgba(0, 0, 0, 0.35);
  transition: transform 0.12s, background 0.12s;
}
/* On something A would use, as vrlbry's crosshair does. */
.aim.hover { transform: scale(1.35); background: rgba(255, 210, 122, 0.55); }

.toasts {
  position: fixed; left: 50%; top: max(16px, env(safe-area-inset-top)); transform: translateX(-50%);
  width: max-content; max-width: calc(100vw - 32px); display: grid; gap: 8px; justify-items: center; pointer-events: none !important;
}
.toast { padding: 8px 14px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); animation: toast-in 0.25s ease; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-6px); } }

/* Narrow screens: the messages move out of the card's way, above the buttons. (The hint keeps clear
   of the buttons by itself: overlay.js _placeHint.) */
@media (max-width: 560px) {
  .toasts { top: auto; bottom: calc(max(16px, env(safe-area-inset-bottom)) + var(--buttons, 42px) + 54px); }
}
/* Short, wide screens (a phone on its side): beside the card, at the top right. */
@media (min-width: 561px) and (max-height: 480px) {
  .toasts { left: auto; right: max(16px, env(safe-area-inset-right)); transform: none; max-width: calc(100vw - 340px - 48px); justify-items: end; }
}

/* Less motion (common/access.js, the setting or the system's, set on <html> by main.js): nothing
   on the page glides either. */
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { transition: none !important; animation: none !important; }

/* Forced colours (Windows' contrast themes): the system's colours, with what is on, chosen or
   pointed at still told apart from what is not. */
@media (forced-colors: active) {
  .card, .hint, .toast, .chip, .pill, .way-back { border: 1px solid CanvasText; }
  .pill.on, .chip[aria-expanded="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
  .aim { forced-color-adjust: none; border-color: CanvasText; box-shadow: none; }
  .aim.hover { background: Highlight; }
  :focus-visible { outline-color: Highlight; }
}

.noscript { position: fixed; inset: 0; padding: 2rem; max-width: 40rem; margin: 0 auto; }
.noscript h1 { font: 600 32px/1.2 var(--serif); color: var(--accent); }