/* ---------------------------------------------------------------------------
   Analogue Intelligence — interface styles

   The 3D is painted and warm, so the UI is deliberately flat and cool: thin
   rules, a lot of negative space, no drop shadows pretending to be depth. The
   only colour that moves is the accent, which every panel inherits from
   whatever you are currently looking at.
   ------------------------------------------------------------------------ */

:root {
  --ink: #12161c;
  --ink-2: #1a2029;
  --bone: #e7e0d2;
  --bone-dim: rgba(231, 224, 210, 0.58);
  --bone-faint: rgba(231, 224, 210, 0.22);
  --accent: #c9a24a;
  --panel: rgba(14, 18, 24, 0.9);
  --edge: rgba(231, 224, 210, 0.14);
  --display: "Syne", Georgia, serif;
  --ui: "Space Grotesk", system-ui, sans-serif;
  --mono: "Space Mono", ui-monospace, monospace;
  --serif: "Newsreader", Georgia, serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--ui);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

#ui-root { position: fixed; inset: 0; pointer-events: none; }

/* Interactivity is opt-in, per component, never blanket.
   A blanket `#ui-root > * { pointer-events: auto }` outranks each component's
   own `pointer-events: none` on specificity, which means every invisible
   full-screen overlay silently swallows the clicks meant for the panel
   underneath it. Each layer below declares its own behaviour instead. */
.label-layer { position: fixed; inset: 0; pointer-events: none; z-index: 8; }
.hud { z-index: 10; }
.minimap { z-index: 12; pointer-events: auto; }
.room-card { z-index: 14; pointer-events: none; }
.dlg-wrap { z-index: 20; }
.modal-wrap { z-index: 30; }
.intro { z-index: 35; }
.creator { z-index: 40; }

button, input { font: inherit; color: inherit; }

/* ----------------------------------------------------------------- labels -- */
.obj-label {
  position: absolute; top: 0; left: 0;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 7px 12px 8px;
  background: var(--panel);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 3px;
  backdrop-filter: blur(6px);
  cursor: pointer;
  opacity: 0;
  transition: opacity 160ms linear, border-color 200ms;
  white-space: nowrap;
  pointer-events: none;
}
.obj-label::after {
  content: ''; position: absolute; bottom: -5px; left: 50%;
  width: 8px; height: 8px; margin-left: -4px;
  background: var(--panel);
  border-right: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  transform: rotate(45deg);
}
.obj-cat {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent);
}
.obj-tag { font-family: var(--display); font-size: 13px; font-weight: 700; color: var(--bone); }
.obj-key {
  margin-top: 4px; padding: 2px 7px 3px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em;
  border: 1px solid var(--bone-faint); border-radius: 2px;
  color: var(--bone-dim);
}
/* the nearest chip offers the key; every other live chip offers the click */
.obj-key .k-e, .obj-key .k-c { font-style: normal; }
.obj-key .k-e { display: none; }
.obj-label.is-nearest .obj-key .k-e { display: inline; }
.obj-label.is-nearest .obj-key .k-c { display: none; }
.obj-label.is-nearest {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent);
}
.obj-label.is-nearest .obj-key { color: var(--accent); border-color: var(--accent); }

/* and they should feel like buttons, because they are */
.obj-label:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, var(--panel));
}
.obj-label:hover .obj-key { color: var(--bone); border-color: var(--bone-dim); }
.obj-label:active { transform-origin: center bottom; filter: brightness(1.15); }
.obj-label.pop { animation: pop 260ms cubic-bezier(.2,1.4,.4,1); }
/* Animates `scale`, not `transform`. The chip is positioned with an inline
   transform, and a keyframe that also set transform replaced it for the length
   of the animation — so every chip flashed up in the top-left corner of the
   screen before jumping to its object. */
@keyframes pop {
  from { scale: 0.88; }
}
.npc-label .obj-tag { font-style: italic; }

/* Only the nearest chip is a full card. The others in reach shrink to a quiet
   name tag, so the screen names what is around you without covering it. */
.obj-label.is-live:not(.is-nearest):not(:hover) {
  padding: 4px 9px 5px;
  background: rgba(14, 18, 24, 0.62);
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
}
.obj-label.is-live:not(.is-nearest):not(:hover) .obj-cat,
.obj-label.is-live:not(.is-nearest):not(:hover) .obj-key { display: none; }
.obj-label.is-live:not(.is-nearest):not(:hover) .obj-tag { font-size: 11px; font-weight: 600; opacity: 0.85; }

/* -------------------------------------------------------------------- hud -- */
.hud { position: fixed; inset: 0; pointer-events: none; transition: opacity 500ms; }
.hud.hidden { opacity: 0; }
.hud > * { pointer-events: none; }

/* The interface sits over whatever the camera happens to be looking at, which
   outdoors is bright sunlit grass. Cream text on that is invisible. Both
   corners now carry their own scrim, so legibility no longer depends on what is
   behind them, and the type is a size up. */
.hud-brand {
  position: absolute; top: 22px; left: 22px;
  padding: 11px 16px 12px;
  background: rgba(16, 20, 26, 0.62);
  border: 1px solid rgba(231, 224, 210, 0.13);
  border-left: 2px solid var(--accent);
  border-radius: 3px;
  backdrop-filter: blur(7px);
}
.hud-title {
  font-family: var(--display); font-weight: 800; font-size: 22px;
  letter-spacing: 0.02em; color: #f4eee0;
}
.hud-sub {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.22em;
  text-transform: uppercase; color: rgba(231, 224, 210, 0.75); margin-top: 4px;
}

/* The way out to the reading version. The front door offers both, but someone
   who walked in and now just wants the facts should not have to reload the
   page to find them. It is the one clickable thing in the HUD, so it opts
   itself back into pointer events. */
.hud-page {
  display: inline-block; margin-top: 9px;
  pointer-events: auto;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; text-decoration: none;
  color: rgba(231, 224, 210, 0.6);
  border-bottom: 1px solid rgba(231, 224, 210, 0.2);
  padding-bottom: 2px;
  transition: color 200ms, border-color 200ms;
}
.hud-page:hover { color: #ffe7ae; border-bottom-color: var(--accent); }

/* A phone reaches the plain page through the tray button instead, so the link
   does not take a third line out of the corner on the smallest screens. */
body.is-touch .hud-page { display: none; }
@media (max-width: 720px) { .hud-page { display: none; } }

.hud-room { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); }
.hud-room-name {
  display: inline-block;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.3em; font-weight: 700;
  text-transform: uppercase; color: #ffe7ae;
  padding: 8px 16px 7px;
  background: rgba(16, 20, 26, 0.62);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  border-radius: 3px;
  backdrop-filter: blur(7px);
}
.hud-room-name.swap { animation: swap 480ms ease-out; }
@keyframes swap { from { opacity: 0; letter-spacing: 0.5em; } }

.hud-controls {
  position: absolute; bottom: 22px; left: 22px;
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 16px;
  background: rgba(16, 20, 26, 0.62);
  border: 1px solid rgba(231, 224, 210, 0.13);
  border-radius: 3px;
  backdrop-filter: blur(7px);
  font-family: var(--mono); font-size: 12px; color: rgba(231, 224, 210, 0.78);
  letter-spacing: 0.03em;
}
.hud-controls { transition: opacity 400ms, transform 400ms; }
.hud-controls.tucked { opacity: 0; transform: translateY(8px); }
.hud-controls-hint { color: rgba(231, 224, 210, 0.5); }
.hud-controls b { color: #f4eee0; font-weight: 700; }
.hud-q { font-style: normal; color: var(--accent); }
.hud-q.flash { animation: qflash 900ms ease-out; }
@keyframes qflash { from { color: var(--bone); } }

.hud-prompt {
  position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%) translateY(8px);
  padding: 8px 16px;
  font-family: var(--ui); font-size: 12.5px; letter-spacing: 0.04em;
  background: var(--panel); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 3px; backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 180ms, transform 180ms;
}
.hud-prompt.on { opacity: 1; transform: translateX(-50%) translateY(0); }
.hud-prompt b {
  display: inline-block; margin-right: 8px; padding: 1px 6px 2px;
  font-family: var(--mono); font-size: 10px; font-weight: 400;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); border-radius: 2px;
}

/* -------------------------------------------------------------- room card -- */
.room-card {
  position: fixed; top: 42%; left: 50%; transform: translate(-50%, -50%);
  text-align: center; pointer-events: none;
  opacity: 0; transition: opacity 600ms;
}
.room-card.on { animation: cardIn 3.2s ease-out forwards; }
@keyframes cardIn {
  0% { opacity: 0; transform: translate(-50%, -46%); }
  12% { opacity: 1; transform: translate(-50%, -50%); }
  78% { opacity: 1; }
  100% { opacity: 0; }
}
.room-card-rule {
  width: 46px; height: 1px; margin: 0 auto 18px; background: var(--accent);
}
.room-card-name {
  font-family: var(--display); font-weight: 800; font-size: 44px;
  letter-spacing: 0.01em; color: var(--bone);
  text-shadow: 0 2px 30px rgba(0,0,0,0.6);
}
.room-card-blurb {
  margin-top: 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--accent);
}

/* ------------------------------------------------------------------ modal -- */
.modal-wrap {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: flex-end;
  background: rgba(8, 10, 14, 0.5);
  backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity 240ms;
  padding: 40px;
}
.modal-wrap.on { opacity: 1; pointer-events: auto; }
.modal {
  position: relative;
  width: min(460px, 100%); max-height: 84vh; overflow-y: auto;
  padding: 38px 40px 34px;
  background: linear-gradient(180deg, #171c24 0%, #10141a 100%);
  border: 1px solid var(--edge);
  border-top: 2px solid var(--accent);
  border-radius: 3px;
  transform: translateX(24px); transition: transform 300ms cubic-bezier(.2,.9,.3,1);
}
.modal-wrap.on .modal { transform: translateX(0); }
.modal-close {
  position: absolute; top: 14px; right: 16px;
  width: 30px; height: 30px; line-height: 1;
  font-size: 20px; color: var(--bone-dim);
  background: none; border: none; cursor: pointer; transition: color 150ms;
}
.modal-close:hover { color: var(--bone); }
.modal-cat {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--accent);
}
.modal-title {
  margin: 12px 0 0; font-family: var(--display); font-weight: 800;
  font-size: 34px; line-height: 1.05; letter-spacing: -0.01em;
}
.modal-subtitle {
  margin-top: 8px; font-family: var(--serif); font-style: italic;
  font-size: 15px; color: var(--bone-dim);
}
.modal-body { margin-top: 22px; }
.modal-body p {
  margin: 0 0 14px; font-size: 14.5px; line-height: 1.62; color: rgba(231,224,210,0.82);
}
.modal-action {
  display: inline-flex; align-items: center; margin-top: 10px; padding: 10px 18px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-decoration: none; color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 2px;
  transition: background 180ms, color 180ms;
}
.modal-action:hover { background: var(--accent); color: var(--ink); }

/* --------------------------------------------------------------- dialogue -- */
.dlg-wrap {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: flex; justify-content: center; padding: 0 24px 26px;
  opacity: 0; pointer-events: none; transition: opacity 220ms;
}
.dlg-wrap.on { opacity: 1; pointer-events: auto; }
.dlg {
  position: relative;
  width: min(680px, 100%); padding: 24px 28px 22px;
  background: linear-gradient(180deg, rgba(23,28,36,0.97), rgba(15,19,25,0.97));
  border: 1px solid var(--edge);
  border-left: 2px solid var(--accent);
  border-radius: 3px; backdrop-filter: blur(8px);
  cursor: pointer;
  transform: translateY(14px); transition: transform 260ms cubic-bezier(.2,.9,.3,1);
}
.dlg-wrap.on .dlg { transform: translateY(0); }
.dlg-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.dlg-name { font-family: var(--display); font-weight: 800; font-size: 17px; color: var(--accent); }
.dlg-role {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--bone-dim);
}
.dlg-close {
  margin-left: auto; width: 26px; height: 26px; line-height: 1;
  font-size: 18px; color: var(--bone-dim);
  background: none; border: none; cursor: pointer;
}
.dlg-close:hover { color: var(--bone); }
.dlg-line {
  font-family: var(--serif); font-size: 17px; line-height: 1.58;
  color: rgba(231,224,210,0.92); min-height: 3.2em;
}
.dlg-line.in { animation: fadeUp 300ms ease-out; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(5px); } }
.dlg-line b { color: var(--accent); font-weight: 600; }
.dlg-more {
  margin-top: 8px; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--bone-faint);
  transition: opacity 200ms;
}
.dlg-choices { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.dlg-choice {
  text-align: left; padding: 9px 14px;
  font-family: var(--ui); font-size: 13.5px; text-decoration: none;
  color: rgba(231,224,210,0.8);
  background: rgba(231,224,210,0.03);
  border: 1px solid var(--edge); border-radius: 2px;
  cursor: pointer; transition: background 140ms, color 140ms, border-color 140ms;
}
.dlg-choice:hover {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--bone);
}
.dlg-choice.leave { color: var(--bone-dim); font-style: italic; }
.dlg-choice.action { color: var(--accent); font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; }

/* ---------------------------------------------------------------- minimap -- */
.minimap {
  position: fixed; right: 26px; bottom: 26px;
  padding: 10px 10px 6px;
  background: rgba(12, 16, 21, 0.78);
  border: 1px solid var(--edge); border-radius: 3px;
  backdrop-filter: blur(6px);
  transition: opacity 300ms, transform 300ms;
}
.minimap.hidden { opacity: 0; transform: translateY(10px); pointer-events: none; }
.minimap canvas { display: block; }
.minimap-label {
  margin-top: 4px; text-align: center;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--bone-dim);
}

/* ------------------------------------------------------------------ intro -- */
.intro {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  pointer-events: none; opacity: 0; transition: opacity 700ms;
}
.intro.on { opacity: 1; }
.intro-inner { text-align: center; transition: opacity 300ms; }
.intro-title {
  font-family: var(--display); font-weight: 800; font-size: clamp(38px, 7vw, 84px);
  letter-spacing: -0.015em; text-shadow: 0 4px 40px rgba(0,0,0,0.7);
}
.intro-sub {
  margin-top: 8px; font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.42em; text-transform: uppercase; color: var(--accent);
}
.intro-hint {
  margin-top: 34px; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.14em; color: var(--bone-dim);
}
.intro-hint b { color: var(--bone); font-weight: 400; }
.intro-skip {
  position: absolute; right: 30px; bottom: 28px; pointer-events: auto;
  padding: 8px 16px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
  color: var(--bone-dim); background: none;
  border: 1px solid var(--edge); border-radius: 2px; cursor: pointer;
  transition: color 160ms, border-color 160ms;
}
.intro-skip:hover { color: var(--bone); border-color: var(--bone-faint); }

/* -------------------------------------------------------------- creator ---- */
.creator {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 90% at 30% 20%, #1d232c 0%, #0c0f14 70%);
  opacity: 0; pointer-events: none; transition: opacity 420ms;
}
.creator.on { opacity: 1; pointer-events: auto; }
/* Sized from the viewport in both directions. It was a fixed two-column grid
   with a 900px target, which on a laptop ran past the bottom of the window and
   on a phone was simply the wrong shape. `min()` against vw *and* vh means it
   fits whatever it is opened on. */
.creator-panel {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(280px, 1.05fr);
  gap: clamp(16px, 3vw, 32px); align-items: stretch;
  width: min(880px, 94vw);
  height: min(620px, 86vh);
  max-height: 86vh;
}
.creator-stage {
  position: relative;
  border: 1px solid var(--edge); border-radius: 3px;
  background: linear-gradient(180deg, rgba(231,224,210,0.05), rgba(231,224,210,0.01));
  overflow: hidden;
}
.creator-canvas { display: block; width: 100%; height: 100%; min-height: 0; cursor: grab; }
.creator-canvas:active { cursor: grabbing; }
.creator-turn {
  position: absolute; left: 0; right: 0; bottom: 16px;
  display: flex; justify-content: center; gap: 10px;
}
.creator-turn button {
  width: 34px; height: 34px; font-size: 17px; line-height: 1;
  color: var(--bone-dim); background: rgba(12,16,21,0.7);
  border: 1px solid var(--edge); border-radius: 50%; cursor: pointer;
  transition: color 150ms, border-color 150ms;
}
.creator-turn button:hover { color: var(--bone); border-color: var(--bone-faint); }

.creator-side { overflow-y: auto; padding-right: 8px; min-height: 0; }
.creator-kicker {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--accent);
}
.creator-title {
  margin: 8px 0 0; font-family: var(--display); font-weight: 800;
  font-size: clamp(21px, 2.6vw, 31px); line-height: 1.05; letter-spacing: -0.015em;
}
.creator-lede {
  margin: 10px 0 20px; max-width: 42ch;
  font-size: 13.5px; line-height: 1.55; color: var(--bone-dim);
}
.creator-field { display: block; margin-bottom: 16px; }
.creator-field > span {
  display: block; margin-bottom: 7px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--bone-dim);
}
.creator-name {
  width: 100%; padding: 10px 12px;
  background: rgba(231,224,210,0.04); color: var(--bone);
  border: 1px solid var(--edge); border-radius: 2px;
  font-family: var(--display); font-size: 16px;
}
.creator-name:focus { outline: none; border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.creator-height { width: 100%; accent-color: var(--accent); }

.creator-group { margin-bottom: 14px; }
.creator-label {
  display: block; margin-bottom: 8px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--bone-dim);
}
.swatches, .chips { display: flex; flex-wrap: wrap; gap: 7px; }
.swatch {
  width: 30px; height: 30px; padding: 0;
  border: 1px solid rgba(231,224,210,0.18); border-radius: 50%;
  cursor: pointer; transition: transform 140ms, box-shadow 140ms, border-color 140ms;
}
.swatch:hover { transform: scale(1.08); }
.swatch.on {
  border-color: var(--bone);
  box-shadow: 0 0 0 2px var(--ink), 0 0 0 3px var(--bone);
}
.chip {
  padding: 7px 13px;
  font-family: var(--ui); font-size: 12.5px; color: var(--bone-dim);
  background: rgba(231,224,210,0.03);
  border: 1px solid var(--edge); border-radius: 2px; cursor: pointer;
  transition: color 140ms, border-color 140ms, background 140ms;
}
.chip:hover { color: var(--bone); }
.chip.on {
  color: var(--ink); background: var(--accent); border-color: var(--accent);
}

.creator-actions { display: flex; gap: 10px; margin-top: 20px; padding-bottom: 4px; }
.creator-random, .creator-go {
  padding: 12px 20px; border-radius: 2px; cursor: pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  transition: background 160ms, color 160ms, border-color 160ms;
}
.creator-random {
  color: var(--bone-dim); background: none; border: 1px solid var(--edge);
}
.creator-random:hover { color: var(--bone); border-color: var(--bone-faint); }
.creator-go {
  flex: 1; color: var(--ink); background: var(--accent); border: 1px solid var(--accent);
  font-weight: 700;
}
.creator-go:hover { background: #e0b95c; border-color: #e0b95c; }

/* ------------------------------------------------------------------ small -- */
@media (max-width: 860px) {
  .creator-panel {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(150px, 32vh) 1fr;
    gap: 14px; width: 94vw; height: 88vh;
  }
  .creator-canvas { min-height: 0; }
  .creator-lede { display: none; }
  .creator-stage { min-height: 0; }
  .hud-controls { display: none; }
  .minimap { transform: scale(0.82); transform-origin: bottom right; }
  .modal-wrap { padding: 16px; align-items: flex-end; }
  .modal { width: 100%; max-height: 70vh; }
}

/* ===========================================================================
   touch and small screens

   The desktop layout assumes a wide viewport, a hover state and a precise
   cursor. None of that survives a phone, so the same components change shape:
   side panels become bottom sheets, tap targets grow to something a thumb can
   actually hit, and the on-screen controls replace the keyboard entirely.
   Nothing is removed — every shortcut has a button.
   ========================================================================= */

.touch-ui { position: fixed; inset: 0; pointer-events: none; z-index: 16; }
.touch-ui.hidden { opacity: 0; pointer-events: none; }

/* the drag pad appears where your finger (or mouse) lands, not in a fixed
   corner: up walks forward, sideways turns */
.drag-pad { position: fixed; width: 0; height: 0; pointer-events: none; z-index: 17; }
.drag-pad[hidden] { display: none; }
.stick-base,
.stick-nub {
  position: absolute; left: 0; top: 0;
  border-radius: 50%; transform: translate(-50%, -50%);
}
.stick-base {
  width: 140px; height: 140px;
  background: rgba(18, 22, 28, 0.34);
  border: 1px solid rgba(231, 224, 210, 0.22);
  backdrop-filter: blur(2px);
}
.stick-nub {
  width: 58px; height: 58px;
  background: rgba(201, 162, 74, 0.5);
  border: 1px solid rgba(240, 228, 198, 0.6);
}

.tbtn {
  pointer-events: auto;
  font-family: var(--mono);
  color: var(--bone);
  background: rgba(14, 18, 24, 0.82);
  border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
  border-radius: 3px;
  backdrop-filter: blur(6px);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.tbtn:active { background: color-mix(in srgb, var(--accent) 26%, rgba(14, 18, 24, 0.82)); }

/* the action button: large, thumb-reachable, and it names its target */
/* The one control that must always be a comfortable thumb target. Everything
   else on a phone is secondary and can be smaller or hidden. */
.tbtn-action {
  position: fixed; right: 14px; bottom: 20px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 1px;
  min-width: 108px; max-width: 56vw; padding: 11px 15px;
  text-align: right;
}
.tbtn-action:disabled { opacity: 0.4; border-color: var(--edge); }
.tbtn-verb {
  font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent);
}
.tbtn-action:disabled .tbtn-verb { color: var(--bone-dim); }
.tbtn-target {
  font-family: var(--display); font-weight: 700; font-size: 14px; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}

/* one button, and a tray behind it */
.tbtn-menu { position: fixed; right: 14px; top: 14px; }
.tbtn-toggle {
  width: 42px; height: 42px; font-size: 19px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  margin-left: auto;
}
.tbtn-toggle-glyph { display: block; transition: transform 240ms; }
.tbtn-menu.open .tbtn-toggle-glyph { transform: rotate(90deg); }

.tbtn-tray {
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  margin-top: 6px;
  opacity: 0; pointer-events: none; transform: translateY(-6px);
  transition: opacity 200ms, transform 200ms;
}
.tbtn-menu.open .tbtn-tray { opacity: 1; pointer-events: auto; transform: translateY(0); }

.tbtn-small {
  display: flex; align-items: center; justify-content: flex-end; gap: 9px;
  height: 38px; padding: 0 12px; min-width: 38px;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(231, 224, 210, 0.82);
}
.tbtn-small i { font-style: normal; font-size: 15px; color: var(--accent); }
.tbtn-small em { font-style: normal; }

/* --- component reshaping, by viewport rather than by device ------------- */
@media (max-width: 700px) {
  /* Everything gets a size down. A phone screen is a quarter the area of a
     laptop one, so interface drawn at desktop scale takes four times as much
     of it — which is what made this feel crowded, not the number of things. */
  .hud-brand { top: 12px; left: 12px; padding: 7px 11px 8px; }
  .hud-title { font-size: 13px; }
  .hud-sub { display: none; }
  .hud-controls { display: none; }              /* replaced by the tray */
  .hud-prompt { display: none; }                /* the action button says it */

  /* the room name moves under the brand rather than fighting the tray for the
     middle of a 390px-wide strip */
  .hud-room { top: 12px; left: auto; right: 66px; transform: none; }
  .hud-room-name { font-size: 9.5px; letter-spacing: 0.18em; padding: 6px 10px 5px; }

  .minimap { right: 10px; bottom: 84px; transform: scale(0.62); transform-origin: bottom right; }

  .obj-label { padding: 4px 8px 5px; }
  .obj-tag { font-size: 10.5px; }
  .obj-cat { font-size: 7px; }
  .obj-key { font-size: 8px; padding: 1px 5px 2px; }

  /* panels become bottom sheets: reachable, and they do not cover the world */
  .modal-wrap { padding: 0; align-items: flex-end; justify-content: center; }
  .modal {
    width: 100%; max-height: 76vh; padding: 24px 20px 30px;
    border-radius: 10px 10px 0 0;
    border-left: 1px solid var(--edge); border-right: 1px solid var(--edge);
    border-top: 3px solid var(--accent);
    transform: translateY(26px);
  }
  .modal-wrap.on .modal { transform: translateY(0); }
  .modal::before {
    content: ''; position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
    width: 44px; height: 4px; border-radius: 2px; background: rgba(231, 224, 210, 0.26);
  }
  .modal-title { font-size: 25px; }
  .modal-body p { font-size: 14px; }
  .modal-close { width: 42px; height: 42px; font-size: 24px; }
  .modal-action { padding: 13px 20px; }

  .dlg-wrap { padding: 0; }
  .dlg {
    width: 100%; padding: 20px 18px 24px;
    border-radius: 10px 10px 0 0;
    border-left: 1px solid var(--edge); border-top: 3px solid var(--accent);
  }
  .dlg-line { font-size: 15.5px; min-height: 4.2em; }
  .dlg-choice { padding: 13px 14px; font-size: 14px; }
  .dlg-close { width: 40px; height: 40px; font-size: 22px; }

  .room-card-name { font-size: 30px; }
  .room-card-blurb { font-size: 9.5px; }

  .intro-title { font-size: clamp(30px, 11vw, 52px); }
  .intro-sub { font-size: 10px; letter-spacing: 0.3em; }
  .intro-hint { display: none; }
  .intro-skip { right: 16px; bottom: 20px; padding: 12px 18px; }

  /* the creator: one column, and the button that leaves is always in reach */
  .creator { align-items: stretch; }
  .creator-panel {
    grid-template-columns: 1fr; gap: 0;
    width: 100%; max-height: 100%;
    grid-template-rows: minmax(180px, 34vh) 1fr;
  }
  .creator-stage { border: none; border-bottom: 1px solid var(--edge); border-radius: 0; }
  .creator-canvas { min-height: 0; height: 100%; }
  .creator-side { padding: 18px 18px 0; overflow-y: auto; }
  .creator-kicker { font-size: 8.5px; }
  .creator-title { font-size: 24px; }
  .creator-lede { display: none; }
  .swatch { width: 36px; height: 36px; }
  .chip { padding: 10px 14px; font-size: 13px; }
  .creator-actions {
    position: sticky; bottom: 0; margin: 18px -18px 0; padding: 12px 18px 16px;
    background: linear-gradient(180deg, rgba(12, 15, 20, 0), #0c0f14 22%);
  }
  .creator-go, .creator-random { padding: 15px 18px; }
}

/* On a touch device the label chips are informational only — the action button
   is what you press — so they must never eat a tap meant for the world. */
body.is-touch .obj-label { pointer-events: none !important; }
body.is-touch #scene { touch-action: none; }
body.is-touch { overscroll-behavior: none; }

/* Landscape phones are short rather than narrow: keep the sheets shallow. */
@media (max-height: 480px) and (pointer: coarse) {
  .modal { max-height: 88vh; padding-top: 20px; }
  .dlg-line { min-height: 2.6em; }
  .creator-panel { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
  .creator-actions { position: static; margin: 14px 0 0; background: none; }
}

/* --- the performance readout (F) ---------------------------------------- */
.stats {
  position: fixed; top: 16px; right: 16px; z-index: 18;
  width: 260px; padding: 12px 14px 10px;
  background: rgba(12, 16, 21, 0.9);
  border: 1px solid var(--edge); border-radius: 3px;
  backdrop-filter: blur(6px);
  font-family: var(--mono); font-size: 10.5px; line-height: 1.5;
  color: var(--bone-dim);
  pointer-events: none;
}
.stats.hidden { display: none; }
.stats-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 9px; }
.stats-row b { font-size: 19px; font-family: var(--display); }
.stats-row span { font-size: 9px; }
.stats-good b { color: #7fc98a; }
.stats-fair b { color: #e0b45a; }
.stats-poor b { color: #e07a62; }
.stats-grid {
  display: grid; grid-template-columns: 1fr auto; gap: 1px 10px;
  padding: 8px 0; border-top: 1px solid var(--edge); border-bottom: 1px solid var(--edge);
}
.stats-grid b { color: var(--bone); font-weight: 400; text-align: right; }
.stats-gpu { padding-top: 8px; color: var(--bone); word-break: break-word; }
.stats-dim { color: var(--bone-faint); font-size: 9px; margin-top: 2px; }
.stats-hint { margin-top: 7px; font-size: 8.5px; color: var(--bone-faint); letter-spacing: 0.1em; }

@media (max-width: 700px) {
  .stats { top: auto; bottom: 96px; right: 12px; left: 12px; width: auto; }
}

/* ===========================================================================
   the prologue
   ========================================================================= */

.prologue { position: fixed; inset: 0; pointer-events: none; z-index: 36; opacity: 0; transition: opacity 500ms; }
.prologue.on { opacity: 1; }

.pro-title {
  position: absolute; top: 34%; left: 50%; transform: translate(-50%, -50%);
  text-align: center; opacity: 0; transition: opacity 900ms;
}
.pro-title.on { opacity: 1; }
.pro-title-main {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(38px, 7.5vw, 88px); letter-spacing: -0.015em;
  color: #fdf8ec; text-shadow: 0 6px 44px rgba(28, 34, 48, 0.5);
}
.pro-title-sub {
  margin-top: 10px; font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.42em; text-transform: uppercase; color: #ffe7ae;
  text-shadow: 0 2px 18px rgba(28, 34, 48, 0.6);
}

.pro-panel {
  position: absolute; top: 50%; left: 46px; transform: translateY(-50%);
  width: min(430px, 44vw); max-height: 82vh; overflow-y: auto;
  padding: 22px 22px 18px;
  background: rgba(16, 20, 26, 0.74);
  border: 1px solid rgba(231, 224, 210, 0.14);
  border-left: 2px solid var(--accent);
  border-radius: 4px; backdrop-filter: blur(10px);
  opacity: 0; pointer-events: none;
  transition: opacity 500ms;
}
.pro-panel.on { opacity: 1; pointer-events: auto; }
.pro-kicker {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--accent);
}
.pro-heading {
  margin: 8px 0 18px; font-family: var(--display); font-weight: 800;
  font-size: 26px; line-height: 1.05; color: #f4eee0;
}

.ap-group { margin-bottom: 15px; transition: opacity 420ms, transform 420ms; }
.ap-group.ap-pending { opacity: 0; transform: translateX(-14px); pointer-events: none; }
.ap-label {
  display: block; margin-bottom: 7px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.2em;
  text-transform: uppercase; color: rgba(231, 224, 210, 0.66);
}
/* one row per option set: the panel is sized so no swatch strip wraps */
.ap-row { display: flex; flex-wrap: wrap; gap: 6px; }
.ap-swatch {
  width: 26px; height: 26px; min-width: 26px; padding: 0; flex: 0 0 auto;
  border: 1px solid rgba(231, 224, 210, 0.22); border-radius: 50%;
  cursor: pointer; transition: transform 140ms, box-shadow 140ms;
}
.ap-swatch:hover { transform: scale(1.12); }
.ap-swatch.on { box-shadow: 0 0 0 2px #10141a, 0 0 0 3px #e7e0d2; }
.ap-chip {
  padding: 7px 12px; font-family: var(--ui); font-size: 12.5px;
  color: rgba(231, 224, 210, 0.72); background: rgba(231, 224, 210, 0.05);
  border: 1px solid rgba(231, 224, 210, 0.14); border-radius: 2px; cursor: pointer;
  transition: color 140ms, background 140ms, border-color 140ms;
}
.ap-chip:hover { color: #f2ebdc; }
.ap-chip.on { color: #12161c; background: var(--accent); border-color: var(--accent); }
.ap-name {
  width: 100%; padding: 9px 11px;
  background: rgba(231, 224, 210, 0.06); color: #f2ebdc;
  border: 1px solid rgba(231, 224, 210, 0.16); border-radius: 2px;
  font-family: var(--display); font-size: 15px;
}
.ap-name:focus { outline: none; border-color: var(--accent); }
.ap-height { width: 100%; accent-color: var(--accent); }

.pro-actions { display: flex; gap: 8px; margin-top: 18px; opacity: 0; transition: opacity 400ms; }
.pro-actions.on { opacity: 1; }
.pro-random, .pro-go {
  padding: 12px 16px; border-radius: 2px; cursor: pointer;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em;
  transition: background 160ms, color 160ms, border-color 160ms;
}
.pro-random {
  color: rgba(231, 224, 210, 0.7); background: none;
  border: 1px solid rgba(231, 224, 210, 0.16);
}
.pro-random:hover { color: #f2ebdc; }
.pro-go {
  flex: 1; color: #12161c; background: var(--accent);
  border: 1px solid var(--accent); font-weight: 700;
}
.pro-go:hover { background: #e0b95c; }

/* a hint that the figure can be turned by dragging */
.pro-turn {
  position: absolute; left: 50%; bottom: 22%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.72);
  text-shadow: 0 2px 14px rgba(20, 28, 40, 0.7);
  opacity: 0; transition: opacity 500ms;
}
.pro-turn.on { opacity: 1; }

.pro-tut {
  position: absolute; bottom: 11%; left: 50%; transform: translate(-50%, 12px);
  padding: 13px 22px;
  background: rgba(16, 20, 26, 0.74);
  border: 1px solid color-mix(in srgb, var(--accent) 36%, transparent);
  border-radius: 3px; backdrop-filter: blur(8px);
  font-family: var(--ui); font-size: 15px; color: #f2ebdc;
  opacity: 0; transition: opacity 420ms, transform 420ms;
  white-space: nowrap;
}
.pro-tut.on { opacity: 1; transform: translate(-50%, 0); }
.pro-tut b { color: #ffe7ae; font-weight: 700; }
.pro-alt {
  display: block; margin-top: 5px; font-style: normal;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em;
  color: rgba(231, 224, 210, 0.55);
}

.pro-skip {
  position: absolute; right: 26px; bottom: 24px; pointer-events: auto;
  padding: 10px 16px; font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.18em; color: rgba(231, 224, 210, 0.7);
  background: rgba(16, 20, 26, 0.55);
  border: 1px solid rgba(231, 224, 210, 0.16); border-radius: 2px; cursor: pointer;
}
.pro-skip:hover { color: #f2ebdc; }

@media (max-width: 760px) {
  .pro-panel {
    top: auto; bottom: 0; left: 0; transform: none;
    width: 100%; max-height: 50vh; border-radius: 10px 10px 0 0;
    border-left: 1px solid var(--edge); border-top: 2px solid var(--accent);
  }
  .pro-title { top: 22%; }
  .pro-turn { bottom: 53vh; }
  .pro-tut { bottom: 54vh; font-size: 13.5px; white-space: normal; max-width: 84vw; text-align: center; }
  .pro-skip { bottom: auto; top: 18px; right: 18px; }
}

/* the one click that starts everything */
.pro-boot {
  position: absolute; left: 50%; bottom: 20%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 0; background: none; border: none; cursor: pointer;
  pointer-events: auto; opacity: 0; transition: opacity 900ms;
}
.pro-boot.on { opacity: 1; }
.pro-boot-ring {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255, 231, 174, 0.55);
  position: relative;
}
.pro-boot-ring::after {
  content: ''; position: absolute; inset: 15px; border-radius: 50%;
  background: #ffe7ae; animation: bootPulse 2.4s ease-in-out infinite;
}
@keyframes bootPulse {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.55); opacity: 0.35; }
}
.pro-boot-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.32em;
  text-transform: uppercase; color: rgba(255, 231, 174, 0.85);
}
.pro-boot:hover .pro-boot-label { color: #fff3d6; }

/* ===========================================================================
   achievements

   A count in the top-right, a list behind it, and a brief acknowledgement when
   something new turns up. Toasts sit under the touch buttons so the two never
   collide on a phone.
   ========================================================================= */

.ach { position: fixed; inset: 0; pointer-events: none; z-index: 22; }
.ach.hidden { opacity: 0; pointer-events: none; }

/* Top-left, directly under the group's name.
   It sat above the control list, at a bottom offset guessed from that list's
   height — and the list is seven lines long, so the two overlapped. Anchoring
   to the top means it depends only on the brand block, which is a fixed
   height, and nothing below it can ever grow into it. The offset now clears
   the link out to the plain page, which is the brand block's third line. */
.ach-count {
  position: absolute; top: 132px; left: 22px; pointer-events: auto;
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  background: rgba(16, 20, 26, 0.66);
  border: 1px solid rgba(231, 224, 210, 0.14);
  border-radius: 3px; backdrop-filter: blur(8px); cursor: pointer;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em;
  color: rgba(231, 224, 210, 0.85);
  transition: border-color 160ms, color 160ms;
}
.ach-count:hover { border-color: var(--accent); color: #f4eee0; }
.ach-count-icon { color: var(--accent); font-size: 13px; }
.ach-count.complete { border-color: var(--accent); }
.ach-count.complete .ach-count-icon { animation: achGlow 2.4s ease-in-out infinite; }
@keyframes achGlow { 50% { opacity: 0.45; } }

/* The announcement strip: centred along the top, between the group's name on
   the left and the controls on the right, which is the one band of the
   interface nothing else occupies. */
.ach-banner {
  position: absolute; top: 76px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: min(440px, 54vw);
}
.ach-toasts { display: none; }
.ach-toast {
  position: relative; overflow: hidden; width: 100%;
  display: flex; align-items: center; gap: 13px;
  padding: 12px 18px 14px;
  background: rgba(16, 20, 26, 0.9);
  border: 1px solid color-mix(in srgb, var(--accent) 46%, transparent);
  border-radius: 4px; backdrop-filter: blur(9px);
  box-shadow: 0 10px 34px rgba(12, 16, 22, 0.35);
  opacity: 0; transform: translateY(-12px);
  transition: opacity 400ms, transform 400ms;
}
.ach-toast.on { opacity: 1; transform: translateY(0); }
.ach-toast-kicker {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--accent);
}

/* the timer: a line that runs the width of the card over its lifetime, and
   when it reaches the end the card goes and the list is ticked */
.ach-toast-timer {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: rgba(231, 224, 210, 0.12);
}
.ach-toast-bar {
  display: block; height: 100%; width: 100%;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 5200ms linear;
}
.ach-toast-icon { font-size: 20px; color: var(--accent); line-height: 1; }
.ach-toast-text { display: flex; flex-direction: column; gap: 2px; }
.ach-toast-text b {
  font-family: var(--display); font-size: 14px; font-weight: 700; color: #f4eee0;
}
.ach-toast-text i {
  font-style: normal; font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.06em; color: rgba(231, 224, 210, 0.6);
}

.ach-panel {
  position: absolute; top: 174px; left: 22px;
  width: min(330px, 84vw); max-height: 66vh; overflow-y: auto;
  padding: 14px 16px 16px;
  background: rgba(14, 18, 24, 0.94);
  border: 1px solid rgba(231, 224, 210, 0.16);
  border-radius: 3px; backdrop-filter: blur(10px);
  opacity: 0; pointer-events: none; transform: translateY(-8px);
  transition: opacity 240ms, transform 240ms;
}
.ach-panel.on { opacity: 1; pointer-events: auto; transform: translateY(0); }
.ach-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; padding-bottom: 10px;
  border-bottom: 1px solid rgba(231, 224, 210, 0.12);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--accent);
}
.ach-panel-close {
  background: none; border: none; cursor: pointer;
  font-size: 18px; line-height: 1; color: rgba(231, 224, 210, 0.55);
}
.ach-panel-close:hover { color: #f4eee0; }

.ach-item {
  display: flex; align-items: flex-start; gap: 11px; padding: 7px 0;
  border-bottom: 1px solid rgba(231, 224, 210, 0.05);
}
.ach-item-tick {
  margin-left: auto; padding-left: 8px;
  font-size: 13px; color: var(--accent); line-height: 1.3;
}
.ach-item-icon {
  width: 20px; text-align: center; font-size: 14px;
  color: rgba(231, 224, 210, 0.22);
}
.ach-item.done .ach-item-icon { color: var(--accent); }
.ach-item-text { display: flex; flex-direction: column; gap: 1px; }
.ach-item-text b {
  font-family: var(--display); font-size: 13px; font-weight: 700;
  color: rgba(231, 224, 210, 0.52);
}
.ach-item.done .ach-item-text b { color: #f4eee0; }
.ach-item-text i {
  font-style: normal; font-family: var(--mono); font-size: 10px;
  color: rgba(231, 224, 210, 0.45);
}

@media (max-width: 700px) {
  /* compact: an icon and a count, tucked under the name */
  .ach-count { top: 52px; left: 12px; padding: 6px 10px; font-size: 10.5px; gap: 6px; }
  .ach-count-icon { font-size: 11px; }
  .ach-banner { top: 92px; width: 88vw; }
  .ach-toast { padding: 9px 13px 11px; gap: 10px; }
  .ach-toast-icon { font-size: 16px; }
  .ach-toast-text b { font-size: 12.5px; }
  .ach-toast-text i { font-size: 9px; }
  .ach-toast-kicker { font-size: 7.5px; }
  .ach-panel { top: 88px; left: 12px; right: 12px; width: auto; max-height: 56vh; }
  .ach-item { padding: 5px 0; }
  .ach-item-text b { font-size: 12px; }
  .ach-item-text i { font-size: 9px; }
}

/* Landscape phones are short: the tray would run off the bottom, so it goes
   sideways instead. */
@media (max-height: 460px) and (pointer: coarse) {
  .tbtn-tray { flex-direction: row-reverse; margin-top: 0; margin-right: 6px; }
  .tbtn-menu { display: flex; flex-direction: row-reverse; align-items: center; }
  .tbtn-small em { display: none; }
  .tbtn-small { min-width: 38px; padding: 0 10px; }
  .ach-panel { max-height: 66vh; }
}

/* the hold while the textures arrive */
.booting {
  position: fixed; inset: 0; z-index: 44;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px; background: #12161c;
  opacity: 0; transition: opacity 500ms; pointer-events: none;
}
.booting.on { opacity: 1; }
.booting-mark {
  font-family: var(--display); font-weight: 800; font-size: clamp(22px, 3.4vw, 34px);
  letter-spacing: 0.01em; color: #f2ebdc;
}
.booting-bar {
  width: min(220px, 44vw); height: 2px; overflow: hidden;
  background: rgba(231, 224, 210, 0.14);
}
.booting-bar span {
  display: block; width: 40%; height: 100%; background: var(--accent);
  animation: bootBar 1.4s ease-in-out infinite;
}
@keyframes bootBar {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(320%); }
}

body.choosing #scene { display: none; }

.chooser {
  position: fixed; inset: 0; z-index: 90;
  pointer-events: auto;
  display: grid; place-items: center;
  padding: 24px;
  overflow: auto;
  background:
    radial-gradient(900px 500px at 70% -10%, rgba(201, 162, 74, 0.16), transparent 60%),
    radial-gradient(700px 460px at 0% 20%, rgba(79, 125, 147, 0.14), transparent 62%),
    #12161c;
  opacity: 0; transition: opacity 420ms ease;
}
.chooser.on { opacity: 1; }
.chooser.leaving { opacity: 0; pointer-events: none; }

.chooser-card {
  width: min(880px, 100%);
  text-align: center;
  color: #e7e0d2;
  transform: translateY(14px);
  transition: transform 520ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.chooser.on .chooser-card { transform: none; }

.chooser-mark { width: 76px; margin: 0 auto 20px; }
.chooser-mark img {
  width: 100%; height: auto; display: block; border-radius: 14px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.38);
  animation: ch-breathe 8s ease-in-out infinite;
}
@keyframes ch-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.045); }
}

.chooser-card h1 {
  margin: 0; font-family: 'Syne', Georgia, serif; font-weight: 800;
  font-size: clamp(26px, 5vw, 44px); letter-spacing: -0.02em;
}
.chooser-sub {
  margin: 8px 0 0; font-family: 'Newsreader', Georgia, serif; font-style: italic;
  color: rgba(231, 224, 210, 0.7); font-size: clamp(15px, 2.2vw, 19px);
}
.chooser-lead {
  margin: 22px 0 26px; font-size: 14px; letter-spacing: 0.02em;
  color: rgba(231, 224, 210, 0.62);
}

.chooser-options { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); text-align: left; }
.chooser-opt {
  display: flex; flex-direction: column; gap: 8px;
  padding: 24px 24px 22px;
  border: 1px solid rgba(231, 224, 210, 0.16); border-radius: 16px;
  background: rgba(231, 224, 210, 0.05);
  color: inherit; font: inherit; cursor: pointer; text-align: left;
  transition: transform 220ms, border-color 220ms, background 220ms, box-shadow 220ms;
}
.chooser-opt:hover, .chooser-opt:focus-visible {
  transform: translateY(-3px); border-color: rgba(201, 162, 74, 0.65);
  background: rgba(231, 224, 210, 0.09);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35); outline: none;
}
.chooser-opt.is-last { border-color: rgba(201, 162, 74, 0.4); }
.chooser-kicker { font-family: 'Space Mono', monospace; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: #c9a24a; }
.chooser-title { font-family: 'Syne', Georgia, serif; font-weight: 700; font-size: 23px; }
.chooser-body { font-size: 14px; line-height: 1.6; color: rgba(231, 224, 210, 0.72); }
.chooser-go { margin-top: 6px; font-size: 13.5px; font-weight: 600; color: #e7e0d2; }
.chooser-note { margin: 22px 0 0; font-size: 12px; color: rgba(231, 224, 210, 0.4); }

@media (prefers-reduced-motion: reduce) {
  .chooser, .chooser-card, .chooser-opt { transition: none; }
  .chooser-mark img { animation: none; }
}