:root {
  color-scheme: dark;
  --bg: #0b0907;
  --panel: rgba(20, 28, 25, 0.84);
  --line: rgba(224, 187, 114, 0.3);
  --text: #f1e6d0;
  --muted: #b9a98d;
  --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; }

#overlay { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#overlay > * { pointer-events: auto; }

/* The hallway's name and its doors. 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). */
.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); }
.doors-toggle {
  padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 13px;
}
.doors-toggle:hover { color: var(--text); border-color: var(--accent); }
.doors-toggle[aria-expanded="false"]::after { content: " ▾"; }
.doors-toggle[aria-expanded="true"]::after { content: " ▴"; }
.card.collapsed .doors { display: none; }
.doors { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.doors a {
  display: grid; gap: 1px; padding: 7px 10px 8px 14px; border-radius: 10px; text-decoration: none;
  color: var(--text); background: rgba(255, 255, 255, 0.04); border-left: 3px solid var(--door, var(--accent));
}
.doors a:hover, .doors a.hover { background: rgba(255, 255, 255, 0.1); }
.door-title { font: 600 16px/1.25 var(--serif); color: var(--door-text, var(--door, var(--accent))); }
.door-sub { font-size: 13px; color: var(--muted); }
.card.alone { width: min(440px, calc(100vw - 24px)); }

/* The shared session (together.js), in the card while in one. */
.together { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.together header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.together h2 { margin: 0; font: 600 16px/1.2 var(--serif); color: var(--accent); }
.together-status { font-size: 13px; color: var(--muted); text-align: right; }
.dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--muted); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4); }
.together .me { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.my-name {
  flex: 1; min-width: 0; padding: 5px 9px; border-radius: 8px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.06); color: var(--text); font: 600 14px/1.3 var(--font);
}
.my-name:focus { border-color: var(--accent); }
.people { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 3px; font-size: 13px; }
.people li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; }
.people .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.people .where { color: var(--muted); }
.people .rtt { color: var(--muted); font-variant-numeric: tabular-nums; min-width: 3.5em; text-align: right; }
.together-note { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.no-webgl { margin: 10px 0 0; color: var(--muted); }

/* Settings: the control panel's choices, for a keyboard or a screen reader. */
.settings { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 13px; }
.settings summary { cursor: pointer; width: max-content; font: 600 15px/1.3 var(--serif); color: var(--accent); }
.settings .choice { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 8px 0 0; padding: 0; border: 0; }
.settings legend { float: left; width: 6.5em; padding: 0; color: var(--muted); }
.settings label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.settings input { margin: 0; accent-color: var(--accent); }
.settings .check { display: flex; margin-top: 8px; }

/* Less motion (common/access.js, the setting or the system's): nothing on the page glides either. */
.reduce-motion *, .reduce-motion *::before, .reduce-motion *::after { transition: none !important; animation: none !important; }
.session {
  margin-top: 10px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--accent);
  background: transparent; color: var(--accent); font-weight: 600;
}
.session:hover { background: var(--accent); color: #1a1208; }

/* How to move. */
.hint {
  position: fixed; z-index: 10; 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.5); color: var(--text); font-size: 13px; text-align: center;
  pointer-events: none !important; transition: opacity 0.8s ease;
}
.hint.gone { opacity: 0; }

/* 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; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--accent);
  background: rgba(20, 28, 25, 0.9); 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 card moves out of the toasts' way. */
@media (max-width: 560px) {
  .hint { bottom: calc(max(16px, env(safe-area-inset-bottom)) + 54px); }
  .toasts { top: auto; bottom: calc(max(16px, env(safe-area-inset-bottom)) + 108px); }
}

.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); }