/* Walk the Exhibition — the 3D hallway's controls. Same tokens as gallery.css:
   void black, cool-white ink, gold only on things that became real. */
:root {
  --paper: #0a0a0a;
  --plate: rgba(15, 15, 15, .92);
  --ink: #f0f0ff;
  --ink-soft: #c9c9d6;
  --muted: #9ca3af;
  --rule: #262626;
  --gold: #f5c518;
  --silver: #cfd3dc;
  --live: #4ade80;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "Space Mono", ui-monospace, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--paper); color: var(--ink); font-family: var(--body);
  overflow: hidden; overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
#scene:active { cursor: grabbing; }
a { color: inherit; }
button { font: inherit; color: inherit; }
.fallback { position: fixed; inset: 0; display: grid; place-items: center; text-align: center; padding: 2rem; }

/* top strip */
.top { position: fixed; top: 0; left: 0; right: 0; display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; padding: calc(env(safe-area-inset-top) + 12px) 16px 0; pointer-events: none; }
.where { pointer-events: auto; }
.where__room { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.where__room.is-gold { color: var(--gold); }
.where__count { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 3px; }
.iconbtn { pointer-events: auto; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--rule);
  background: var(--plate); display: grid; place-items: center; cursor: pointer; font-size: 18px; }

/* bottom: label + keypad */
.dock { position: fixed; left: 0; right: 0; bottom: 0; padding: 0 12px calc(env(safe-area-inset-bottom) + 12px);
  display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; }
.label { pointer-events: auto; width: 100%; max-width: 560px; background: var(--plate); border: 1px solid var(--rule);
  border-radius: 16px; padding: 14px 16px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.label__tier { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.label__tier.is-top { color: var(--ink); }
.label__tier.is-hon { color: var(--silver); }
.label__name { font-size: 20px; font-weight: 800; letter-spacing: -.01em; line-height: 1.15; }
.label__fn { color: var(--ink-soft); font-size: 14px; line-height: 1.4; margin-top: 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.label__meta { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 6px; display: flex; align-items: center; gap: 6px; }
.label__meta .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.label__meta.is-real { color: var(--gold); }
.label__meta.is-real .dot { background: var(--gold); }
.label__acts { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 14px;
  border-radius: 10px; border: 1px solid var(--rule); background: #151515; text-decoration: none; font-size: 14px;
  font-weight: 600; cursor: pointer; }
.btn--main { background: var(--ink); color: #0a0a0a; border-color: var(--ink); }
.btn--gold { background: var(--gold); color: #0a0a0a; border-color: var(--gold); }
.btn[disabled] { opacity: .5; cursor: default; }

.pad { pointer-events: auto; width: 100%; max-width: 560px; display: grid; grid-template-columns: 56px 1fr 1fr 56px; gap: 8px; }
.pad button { min-height: 52px; border-radius: 14px; border: 1px solid var(--rule); background: var(--plate);
  cursor: pointer; font-size: 14px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 6px; }
.pad .arrow { font-size: 22px; }
.pad .is-on { background: var(--ink); color: #0a0a0a; border-color: var(--ink); }

/* sheets: intro, gate, menu, finale */
.sheet { position: fixed; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(5, 5, 5, .72);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 10; }
.card { width: 100%; max-width: 440px; max-height: calc(100% - 16px); overflow: auto; background: #0f0f0f;
  border: 1px solid var(--rule); border-radius: 20px; padding: 24px 22px; }
.card h1 { font-size: 28px; line-height: 1.1; margin: 0 0 8px; letter-spacing: -.02em; }
.card h1 .gold { color: var(--gold); }
.card p { color: var(--ink-soft); line-height: 1.5; margin: 0 0 14px; font-size: 15px; }
.card .kicker { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.card .kicker.gold { color: var(--gold); }
.card .stack { display: grid; gap: 8px; margin-top: 16px; }
.card .stack .btn { min-height: 48px; font-size: 15px; }
.card .note { font-size: 13px; color: var(--muted); margin-top: 12px; }
.card .msg { font-size: 14px; margin-top: 12px; color: var(--ink); min-height: 1em; }
.card .msg.is-bad { color: #fca5a5; }
.card input { width: 100%; min-height: 48px; border-radius: 10px; border: 1px solid var(--rule); background: #151515;
  color: var(--ink); padding: 0 14px; font: inherit; font-size: 16px; }
.rooms { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rooms button { width: 100%; text-align: left; min-height: 48px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--rule);
  background: #151515; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.rooms small { color: var(--muted); font-family: var(--mono); font-size: 11px; white-space: nowrap; }
.card h2 { font-size: 13px; font-family: var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 20px 0 8px; font-weight: 400; }
.hide { display: none !important; }

@media (min-width: 900px) {
  .dock { align-items: flex-start; left: 24px; bottom: 24px; padding: 0; width: 460px; }
}