/* The Hidden Quarter · landing mockups: the HTML around the 3D scene */
:root {
  --bg: #0c0a17; --ink: #efe9dc; --muted: #a39cba; --gold: #d6b16a; --violet: #a193f2; --line: rgba(214, 177, 106, .35);
  --disp: "Marcellus", Georgia, serif; --body: "Figtree", system-ui, sans-serif; --ital: "Cormorant Garamond", Georgia, serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font: 15px/1.5 var(--body); overflow: hidden; }
#gl, #fx { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#gl { cursor: none; touch-action: none; }
#fx { pointer-events: none; z-index: 2; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* fade in from black, and out again when a sign is chosen */
#veil { position: fixed; inset: 0; z-index: 20; background: var(--bg); opacity: 1; transition: opacity 1.4s ease; pointer-events: none; display: grid; place-items: center; }
#veil .v-inner { text-align: center; opacity: 0; transition: opacity .4s; }
#veil.show-label { transition: none; }
#veil.show-label .v-inner { opacity: 1; }
#veil svg { width: 54px; height: 76px; color: var(--gold); filter: drop-shadow(0 0 14px rgba(255, 190, 110, .6)); }
#veil .v-note { display: block; margin-top: 8px; font: italic 500 18px var(--ital); color: var(--muted); }
#toast { left: 50%; top: 18px; transform: translate(-50%, -12px); opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none;
  padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px; background: rgba(14, 11, 26, .95); font: italic 500 18px var(--ital); color: var(--ink); white-space: nowrap; }
#toast.on { opacity: 1; transform: translate(-50%, 0); }
#veil .v-label { display: block; margin-top: 14px; font: 22px var(--disp); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }

/* sign tooltip that follows the light */
#tip { position: fixed; left: 0; top: 0; z-index: 5; pointer-events: none; min-width: 180px; max-width: 280px;
  padding: 12px 16px 13px; border: 1px solid var(--line); border-radius: 10px;
  background: linear-gradient(180deg, rgba(28, 22, 44, .92), rgba(16, 12, 28, .92)); box-shadow: 0 12px 40px rgba(0, 0, 0, .5), 0 0 30px rgba(214, 177, 106, .12);
  backdrop-filter: blur(6px); }
#tip .t-title { display: block; font: 19px var(--disp); letter-spacing: .06em; color: var(--ink); }
#tip .t-sub { display: block; font: italic 500 17px/1.3 var(--ital); color: var(--muted); margin-top: 2px; }
#tip .t-go { display: block; margin-top: 8px; font: 600 11px var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }

/* bottom bar: the plain way in, and every door as a list */
.ui { position: fixed; z-index: 6; }
.bar { left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
  background: linear-gradient(0deg, rgba(8, 6, 16, .85), rgba(8, 6, 16, 0)); pointer-events: none; }
.bar > * { pointer-events: auto; }
.skip { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: 999px; text-decoration: none;
  background: var(--gold); color: #1b1524; font: 600 15px var(--body); letter-spacing: .02em; box-shadow: 0 6px 26px rgba(214, 177, 106, .3); transition: transform .15s, box-shadow .15s; }
.skip:hover, .skip:focus-visible { transform: translateY(-1px); box-shadow: 0 8px 34px rgba(214, 177, 106, .5); }
.skip svg { width: 16px; height: 16px; }
.ghost { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px; border: 1px solid var(--line);
  background: rgba(16, 12, 28, .7); color: var(--ink); font: 500 15px var(--body); cursor: pointer; backdrop-filter: blur(6px); }
.ghost:hover, .ghost:focus-visible { border-color: var(--gold); }
#hint { position: fixed; z-index: 6; left: 50%; bottom: 84px; transform: translateX(-50%); margin: 0; pointer-events: none;
  font: italic 500 19px var(--ital); color: rgba(239, 233, 220, .75); text-align: center; letter-spacing: .02em; transition: opacity 1.2s; text-shadow: 0 2px 12px #000; white-space: nowrap; }
#hint.gone { opacity: 0; }
body:not(.ready) #hint { opacity: 0; }

#doors { position: fixed; z-index: 8; left: 16px; bottom: 76px; width: min(360px, calc(100vw - 32px)); max-height: calc(100vh - 120px); overflow: auto;
  padding: 14px 8px 8px; border: 1px solid var(--line); border-radius: 14px; background: rgba(14, 11, 26, .95); box-shadow: 0 20px 60px rgba(0, 0, 0, .6); backdrop-filter: blur(8px); }
#doors h2 { margin: 0 10px 8px; font: 600 11px var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
#doors ul { list-style: none; margin: 0; padding: 0; }
#doors a { display: block; padding: 8px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; }
#doors a:hover, #doors a:focus-visible { background: rgba(214, 177, 106, .1); }
#doors a span { display: block; font: 17px var(--disp); letter-spacing: .04em; }
#doors a small { display: block; font: italic 500 15px var(--ital); color: var(--muted); }
#doors .home-link { margin-top: 6px; border-top: 1px solid rgba(214, 177, 106, .2); padding-top: 6px; }

.corner { top: 14px; right: 16px; }
.corner a { color: var(--muted); font: 500 13px var(--body); text-decoration: none; border-bottom: 1px solid transparent; }
.corner a:hover { color: var(--ink); border-color: var(--gold); }
.mock-tag { position: fixed; z-index: 6; top: calc(14px + env(safe-area-inset-top, 0px)); left: 16px; font: 600 11px var(--body); letter-spacing: .14em; text-transform: uppercase; color: rgba(239, 233, 220, .6); text-decoration: none; }
.mock-tag:hover, .mock-tag:focus-visible { color: var(--ink); }

/* the little hanging sign that swaps between the lane and the row */
.switch { top: env(safe-area-inset-top, 0px); right: 18px; display: grid; justify-items: center; text-decoration: none; color: var(--ink);
  transform-origin: 50% 0; animation: sway 6s ease-in-out infinite; }
.switch::before { content: ""; width: 62%; height: 14px; border-left: 1.5px solid rgba(214, 177, 106, .55); border-right: 1.5px solid rgba(214, 177, 106, .55); }
.switch .board { padding: 6px 14px 8px; border: 1px solid var(--gold); border-radius: 7px; text-align: center;
  background: linear-gradient(180deg, #261c36, #140f22); box-shadow: 0 8px 26px rgba(0, 0, 0, .55), inset 0 0 0 3px #140f22, inset 0 0 0 4px rgba(214, 177, 106, .3);
  transition: box-shadow .2s; }
.switch small { display: block; font: 600 9.5px var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.switch b { display: flex; align-items: center; gap: 6px; font: 400 17px var(--disp); letter-spacing: .08em; color: var(--gold); white-space: nowrap; }
.switch svg { width: 14px; height: 14px; flex: none; }
.switch:hover .board, .switch:focus-visible .board { box-shadow: 0 8px 30px rgba(0, 0, 0, .55), 0 0 22px rgba(214, 177, 106, .45), inset 0 0 0 3px #140f22, inset 0 0 0 4px rgba(214, 177, 106, .6); }
.switch:focus-visible { outline: none; }
@keyframes sway { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }

/* no WebGL: show the doors as a plain menu */
.nogl { display: none; }
.no-gl .nogl { display: grid; position: fixed; inset: 0; place-items: center; z-index: 30; background: var(--bg); padding: 24px; text-align: center; }
.no-gl #gl, .no-gl #fx { display: none; }

@media (max-width: 640px) {
  .bar { flex-direction: column-reverse; gap: 8px; }
  .skip, .ghost { width: 100%; justify-content: center; }
  #hint { bottom: 130px; font-size: 17px; white-space: normal; width: calc(100% - 32px); }
  #doors { bottom: 130px; }
  .mock-tag .mt-name { display: none; }
  .switch { right: 12px; }
  .switch b { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { #veil { transition: none; } .switch { animation: none; } }