/* ═══ the (am) intro gate ═════════════════════════════════════════
   Shared by the room (and its offline page) and the lite version, so the
   startup screen is the same everywhere: the live 3D (am) against a dark
   backdrop, "ante meridiem", sound on / stay quiet, just show me the work. */
/* ── the intro gate: the real 3D mark plays the "startup screen" against
   the renderer's solid clear color (see room.js) — this div only holds
   the sound prompt, kept clear of the vertical center so the mark shows
   through. Up as soon as the mark spins (.shown); the buttons appear once
   the rooms are built (.ready); fades out for good on dismiss ───────────────────────────────────────────── */
.intro-gate {
  position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column;
  justify-content: flex-end; align-items: center; gap: 10px; padding: 0 16px 64px;
  text-align: center; font-family: 'JetBrains Mono', monospace; color: #f4f1fa;
  opacity: 0; pointer-events: none; transition: opacity .5s;
}
/* .shown: the mark is spinning (the rooms may still be building) · .ready: the rooms are built */
.intro-gate.shown { opacity: 1; }
.intro-gate .ig-choices, .intro-gate .ig-hint { opacity: 0; transition: opacity .6s; }
.intro-gate.ready { pointer-events: auto; }
.intro-gate.ready .ig-choices, .intro-gate.ready .ig-hint { opacity: 1; }
.offline .intro-gate .ig-choices { opacity: 1; } /* the offline page has nothing to click: its note shows straight away */
.ig-sub { position: fixed; top: 14vh; left: 50%; transform: translateX(-50%); font-size: 13px; letter-spacing: .2em; opacity: .55; text-transform: uppercase; }
.ig-btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.ig-btn { font: 14px 'JetBrains Mono', monospace; padding: 12px 18px; border-radius: 10px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: inherit; transition: background .15s, transform .15s; }
.ig-btn:hover { background: rgba(255,255,255,.18); transform: translateY(-2px); }
.ig-hint { font-size: 12px; opacity: .5; }
/* the column is as wide as the two sound buttons; the work button stretches to match */
.ig-choices { display: inline-flex; flex-direction: column; align-items: stretch; gap: 10px; }
.ig-work { font: 13px 'JetBrains Mono', monospace; padding: 10px 16px; border-radius: 999px; color: inherit; border: 1px dashed rgba(255,255,255,.35); transition: background .15s; }
.ig-work:hover { background: rgba(255,255,255,.12); }
/* on the welcome screen, only the wordmark stays in the HUD */
body.intro .am-hud .hud-right, body.intro .am-hint { display: none; }