/* Maison Perzani: Perpetual Pages & Paztries
   Layout concept: one portrait storybook stage (opening + Grand Hall) sized to the phone screen,
   and three tall reading rooms with a sticky "Back to Hall" bar. Single, deliberate light theme
   (pink/ivory/gold) with a darker burgundy world only inside the Forbidden Wing. */

/* ------------------------------------------------------------------ fonts (self-hosted, latin subset) */
@font-face { font-family: "Cormorant Garamond"; src: url("../assets/fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../assets/fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../assets/fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../assets/fonts/cormorant-garamond-latin-600-italic.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Pinyon Script"; src: url("../assets/fonts/pinyon-script-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("../assets/fonts/nunito-latin-wght-normal.woff2") format("woff2"); font-weight: 200 1000; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;
  --cream: #FEFAF6;
  --ivory: #FFF9F4;
  --blush: #F9E9EF;
  --petal: #F3D3DD;
  --rose: #B66D8C;
  --rose-ink: #93506F;
  --plum: #67374D;
  --ink: #392B30;
  --gold: #C79A6B;
  --gold-lt: #EACCA8;
  --wine: #531E31;
  --wine-dk: #1C0A11;
  --strawberry: #DA8098;
  --berry: #B4506F;
  --display: "Cormorant Garamond", "Cormorant", Garamond, Georgia, "Times New Roman", serif;
  --script: "Pinyon Script", "Snell Roundhand", "Apple Chancery", "URW Chancery L", cursive;
  --body: "Nunito", "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
  --band: #F9E9EF;
}
/*@deploy-only*/
:root { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
/*@end*/

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100%;
  background: var(--blush);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 40; background: var(--band); }
img { max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.intro-on body { overflow: hidden; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
[data-focus]:focus { outline: none; }

/* ================================================================== OPENING */
.intro {
  position: fixed; inset: 0; z-index: 100; overflow: hidden;
  background: var(--cream);
  --fy: 44vh; --logo: min(84vw, 440px, 58vh); --flake: min(80vw, 380px, 48vh); --gw: min(88vw, 49.6vh, 434px);
  -webkit-user-select: none; user-select: none; touch-action: manipulation;
}
@supports (height: 1svh) {
  .intro { --fy: 44svh; --logo: min(84vw, 440px, 58svh); --flake: min(80vw, 380px, 48svh); --gw: min(88vw, 49.6svh, 434px); }
}
.intro > * { --gh: calc(var(--gw) / .62); }
.no-intro .intro { display: none; }

.intro-bg {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% var(--fy), #FEFAF6 0, #FEFAF6 calc(var(--logo) * .74), #FBEEF0 calc(var(--logo) * .98), #F7DDE5 calc(var(--logo) * 1.4), #EFC6D4 calc(var(--logo) * 2.2));
}
.intro-dim {
  position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(circle at 50% var(--fy), rgba(255,255,255,0) 0, rgba(232,170,192,.38) 55%, rgba(190,110,142,.55) 100%);
}

/* floating pink and gold light */
.motes, .hall-motes { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.motes i, .hall-motes i {
  position: absolute; left: var(--x); top: var(--y);
  width: var(--s, 3px); height: var(--s, 3px); border-radius: 50%;
  background: radial-gradient(circle, #FFFFFF 0, #F6B3C7 55%, rgba(246,179,199,0) 72%);
  opacity: 0; animation: mote var(--d, 10s) ease-in-out var(--t, 0s) infinite;
}
.motes i.g { background: radial-gradient(circle, #FFF7E2 0, #E6C08A 55%, rgba(230,192,138,0) 72%); }
@keyframes mote {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  20% { opacity: .9; }
  50% { transform: translate3d(10px, -28px, 0); opacity: .55; }
  80% { opacity: .9; }
  100% { transform: translate3d(-6px, -56px, 0); opacity: 0; }
}

/* the logo */
.logo-btn {
  position: absolute; z-index: 3;
  left: calc(50% - var(--logo) / 2); top: calc(var(--fy) - var(--logo) / 2);
  width: var(--logo); height: var(--logo);
  padding: 0; border: 0; background: none; border-radius: 10%;
  cursor: pointer; opacity: 0; touch-action: manipulation;
}
.logo-btn.in { animation: logoIn 1.7s cubic-bezier(.2, .7, .2, 1) forwards; }
.logo-btn.in-static { opacity: 1; }
@keyframes logoIn { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }
.logo-img, .logo-shine, .logo-sweep {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent), linear-gradient(180deg, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent), linear-gradient(180deg, transparent, #000 4%, #000 96%, transparent);
  mask-composite: intersect;
}
.logo-img { display: block; width: 100%; height: 100%; }
.logo-shine {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .45s ease;
  background: radial-gradient(circle at 50% 44%, rgba(255,255,255,.96) 0, rgba(255,236,243,.7) 42%, rgba(255,236,243,0) 72%);
}
.logo-btn.glow .logo-shine { opacity: 1; }
.logo-sweep { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.logo-sweep::before {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: -40%; width: 30%;
  background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.75), rgba(255,255,255,0));
  transform: translateX(0) skewX(-12deg); opacity: 0;
}
.logo-btn.ready .logo-sweep::before { animation: sweep 5.5s ease-in-out .2s infinite; }
@keyframes sweep {
  0% { transform: translateX(0) skewX(-12deg); opacity: 0; }
  4% { opacity: 1; }
  30% { transform: translateX(560%) skewX(-12deg); opacity: 1; }
  31%, 100% { transform: translateX(560%) skewX(-12deg); opacity: 0; }
}
.logo-btn:focus-visible { outline-offset: 6px; border-radius: 12%; }

/* the snowflake */
.flake-btn {
  position: absolute; z-index: 3;
  left: calc(50% - var(--flake) / 2); top: calc(var(--fy) - var(--flake) / 2);
  width: var(--flake); height: var(--flake);
  padding: 0; border: 0; background: none; border-radius: 50%;
  cursor: pointer; touch-action: manipulation;
}
.flake-btn:focus-visible { outline-offset: 4px; }
.flake-halo {
  position: absolute; inset: -30%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,252,249,.98) 0, rgba(255,246,243,.92) 30%, rgba(246,205,218,.45) 50%, rgba(232,194,140,.16) 60%, rgba(248,196,212,0) 70%);
  opacity: .8; animation: halo 3.4s ease-in-out infinite;
}
.flake-halo::after {
  content: ""; position: absolute; inset: 14%; border-radius: 50%; opacity: 0; transition: opacity .6s ease, transform .6s ease;
  background: radial-gradient(circle, rgba(255,150,186,.75) 0, rgba(255,150,186,.25) 45%, rgba(255,150,186,0) 70%);
}
.flake-btn.lit-1 .flake-halo::after { opacity: .45; }
.flake-btn.lit-2 .flake-halo::after { opacity: .95; transform: scale(1.12); }
@keyframes halo { 0%, 100% { transform: scale(1); opacity: .75; } 50% { transform: scale(1.06); opacity: 1; } }
.flake-enter, .flake-float, .flake-pulse { position: absolute; inset: 0; display: block; }
.flake-float { animation: floaty 3.6s ease-in-out infinite; }
.flake-float.still { animation: none; }
@keyframes floaty { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-5px) scale(1.02); } }
.flake-art { position: absolute; inset: 0; display: block; }
.fr { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .5s ease; filter: drop-shadow(0 1px 1.5px rgba(130,50,85,.5)) drop-shadow(0 0 8px rgba(196,104,142,.3)); }
.frag img { filter: drop-shadow(0 1px 1.5px rgba(130,50,85,.5)); }
.fr.on { opacity: 1; }
.frag { position: absolute; inset: 0; opacity: 0; transform-origin: calc(50% + var(--ox)) calc(50% + var(--oy)); }
.frag img { position: absolute; inset: 0; width: 100%; height: 100%; }
.frag::before {
  content: ""; position: absolute; left: calc(50% + var(--ox)); top: calc(50% + var(--oy)); width: 52%; aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%; opacity: 0; transition: opacity .5s ease;
  background: radial-gradient(circle, var(--c) 0, rgba(255,255,255,0) 64%);
}
.frag.lit::before { opacity: .6; }
.flake-btn.lit-1 .flake-halo::after { opacity: .45; }
.tap-ring { position: absolute; inset: 4%; border-radius: 50%; border: 1.5px solid rgba(201,156,108,.65); opacity: 0; pointer-events: none; }
.flake-btn.ready .tap-ring { animation: tapRing 2.6s ease-out .6s infinite; }
@keyframes tapRing { 0% { transform: scale(.86); opacity: .75; } 100% { transform: scale(1.28); opacity: 0; } }
.spark {
  position: absolute; inset: 8%; border-radius: 50%; pointer-events: none;
  border: 2px solid rgba(255,220,232,.95);
  box-shadow: 0 0 16px rgba(255,160,196,.8), inset 0 0 12px rgba(255,200,222,.6);
}

/* the library doors and the three-symbol lock */
.gate {
  position: absolute; z-index: 2; pointer-events: none;
  left: calc(50% - var(--gw) / 2); top: calc(var(--fy) - var(--gh) * .54);
  width: var(--gw); height: var(--gh);
  visibility: hidden; opacity: 0; transform-origin: 50% 54%;
}
.gate.on { visibility: visible; }
.gate-frame { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.gate-doors { position: absolute; left: 12.903%; top: 14%; width: 74.194%; height: 80%; perspective: 1100px; }
.leaf { position: absolute; top: 0; width: 50%; height: 100%; }
.leaf svg { display: block; width: 100%; height: 100%; }
.leaf-l { left: 0; transform-origin: 0 50%; }
.leaf-r { right: 0; transform-origin: 100% 50%; }
.leaf-r svg { transform: scaleX(-1); }
.lock { position: absolute; left: 37.5%; top: calc(54% - var(--gw) * .125); width: 25%; aspect-ratio: 1; filter: drop-shadow(0 3px 6px rgba(110,50,72,.35)); }
.lock svg { display: block; width: 100%; height: 100%; overflow: visible; }
.lock-ring { transform-box: view-box; transform-origin: 0 0; transition: transform .9s cubic-bezier(.5, 0, .2, 1); }
.lock.turn .lock-ring { transform: rotate(120deg); }
.lock.open { animation: lockOpen .65s ease-in forwards; }
@keyframes lockOpen { to { transform: scale(1.4); opacity: 0; } }
.socket .sk-glow { fill: var(--c); opacity: 0; transition: opacity .5s ease; }
.socket .sk-well { fill: #5E2F41; stroke: #D9B07F; stroke-width: 1.4; transition: fill .45s ease; }
.socket .sk-icon { fill: #E8C99B; transition: fill .45s ease; }
.socket .sk-line { fill: none; stroke: #5E2F41; stroke-width: .9; stroke-linecap: round; transition: stroke .45s ease; }
.socket.lit .sk-glow { opacity: .6; }
.socket.lit .sk-well { fill: var(--c); }
.socket.lit .sk-icon { fill: #FFFFFF; }
.socket.lit .sk-line { stroke: var(--c); }

.burst { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.burst i { position: absolute; border-radius: 50%; box-shadow: 0 0 6px rgba(255,205,220,.95); }
.intro-flash {
  position: absolute; inset: 0; z-index: 6; opacity: 0; pointer-events: none;
  background: radial-gradient(circle at 50% var(--fy), #FFFFFF 0, #FFF7F3 35%, #FBE5EB 75%, #F7D7E1 100%);
}

/* words */
.intro-words {
  position: absolute; z-index: 5; left: 0; right: 0;
  top: calc(var(--fy) + var(--logo) / 2 + 12px);
  padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px));
  text-align: center; pointer-events: none;
}
.intro-line {
  margin: 0 auto; max-width: 21ch; min-height: 2.5em;
  font: italic 500 clamp(23px, 6.6vw, 32px)/1.25 var(--display);
  color: var(--plum); text-wrap: balance;
  text-shadow: 0 1px 0 rgba(255,255,255,.85), 0 0 18px rgba(255,255,255,.95);
  opacity: 0; transform: translateY(8px); transition: opacity .7s ease, transform .7s ease;
}
.intro-line.show { opacity: 1; transform: none; }
.intro-hint {
  margin: 10px 0 0; font: 800 11.5px/1 var(--body); letter-spacing: .22em; text-transform: uppercase;
  color: var(--rose-ink); opacity: 0; transition: opacity .8s ease;
}
.intro-hint.show { opacity: .9; }
.skip-intro {
  position: absolute; z-index: 10;
  top: calc(env(safe-area-inset-top, 0px) + 12px); right: calc(env(safe-area-inset-right, 0px) + 12px);
  min-height: 44px; padding: 0 18px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(201,156,108,.55); background: rgba(255,250,247,.8); color: var(--plum);
  font: 700 14px/1 var(--body); letter-spacing: .02em;
}

/* ================================================================== GRAND HALL */
.view { min-height: 100vh; min-height: 100svh; overflow-x: hidden; overflow-x: clip; }
.hall { background: linear-gradient(180deg, #E5C1CC 0, #F4DEE2 30%, #FAECE8 60%, var(--blush) 100%); }
.hall-stage { display: flex; justify-content: center; background: linear-gradient(180deg, #E5C1CC, #F4DEE2 38%, #FAECE8 80%, #F6E3DF); }
.hall-scene {
  position: relative; container-type: inline-size; overflow: hidden;
  width: min(100vw, 560px, calc(100vh * 400 / 760));
  aspect-ratio: 400 / 760; max-width: 100%;
}
@supports (height: 1svh) { .hall-scene { width: min(100vw, 560px, calc(100svh * 400 / 760)); } }
.hlayer, .hl-drift, .hl-inner { position: absolute; inset: 0; }
.hlayer { pointer-events: none; will-change: transform; }
.hall-art, .hl-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hl-art { object-fit: cover; }
.hotspot, .replay-mini { pointer-events: auto; }
.hl-back .hl-drift { animation: drift-back 17s ease-in-out infinite alternate; }
.hl-mid .hl-drift { animation: drift-mid 17s ease-in-out infinite alternate; }
.hl-front .hl-drift { animation: drift-front 17s ease-in-out infinite alternate; }
@keyframes drift-back { from { transform: scale(1.04) translate3d(-.5%, 0, 0); } to { transform: scale(1.04) translate3d(.5%, -.25%, 0); } }
@keyframes drift-mid { from { transform: scale(1.02) translate3d(-.9%, 0, 0); } to { transform: scale(1.02) translate3d(.9%, -.35%, 0); } }
@keyframes drift-front { from { transform: translate3d(-1.6%, 0, 0); } to { transform: translate3d(1.6%, -.5%, 0); } }
/* the viewpoint glides in: nearer layers travel further */
.hall.from-intro .hl-back .hl-inner { animation: dolly-back 1.7s cubic-bezier(.2, .7, .2, 1) both; }
.hall.from-intro .hl-mid .hl-inner { animation: dolly-mid 1.7s cubic-bezier(.2, .7, .2, 1) both; }
.hall.from-intro .hl-front .hl-inner { animation: dolly-front 1.7s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes dolly-back { from { transform: scale(1.06); filter: brightness(1.12); } to { transform: none; filter: none; } }
@keyframes dolly-mid { from { transform: scale(1.14); } to { transform: none; } }
@keyframes dolly-front { from { transform: scale(1.32) translate3d(-6%, 4%, 0); opacity: .4; } to { transform: none; opacity: 1; } }

.hglow { position: absolute; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); }
.hglow-chandelier { left: 50%; top: 26.3%; width: 50%; aspect-ratio: 1; background: radial-gradient(circle, rgba(255,247,228,.8) 0, rgba(255,232,214,.35) 34%, rgba(255,232,214,0) 64%); animation: breathe 4.6s ease-in-out infinite; }
.hglow-forbidden { left: 15.5%; top: 41.8%; width: 26%; aspect-ratio: .8; background: radial-gradient(ellipse, rgba(255,160,108,.5) 0, rgba(255,140,100,0) 64%); animation: flicker 3.2s linear infinite; }
.hglow-bakery { left: 84%; top: 77%; width: 44%; aspect-ratio: 1; background: radial-gradient(circle, rgba(255,214,150,.6) 0, rgba(255,214,150,0) 62%); animation: breathe 3.8s ease-in-out infinite; }
.hglow-lamp { left: 35.75%; top: 90%; width: 13%; aspect-ratio: 1; background: radial-gradient(circle, rgba(255,232,186,.9) 0, rgba(255,232,186,0) 65%); animation: breathe 5.2s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { opacity: .72; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } }
@keyframes flicker { 0%, 100% { opacity: .8; } 12% { opacity: .55; } 20% { opacity: .92; } 46% { opacity: .7; } 60% { opacity: 1; } 80% { opacity: .62; } }
.hall-motes i { width: 3px; height: 3px; background: radial-gradient(circle, #FFFFFF 0, #FFE9EF 50%, rgba(255,233,239,0) 72%); }

.hall-sign {
  position: absolute; z-index: 1; left: 13%; right: 13%; top: 1.1%; margin: 0;
  display: flex; flex-direction: column; align-items: center; gap: .2cqw;
  text-align: center; pointer-events: none; font-weight: 400;
}
.sign-name { font: 400 clamp(28px, 10cqw, 56px)/1.1 var(--script); color: #7A3956; text-shadow: 0 1px 0 rgba(255,255,255,.75); white-space: nowrap; }
.sign-sub { font: 600 clamp(9.5px, 2.9cqw, 16px)/1.2 var(--display); letter-spacing: .2em; padding-left: .2em; text-transform: uppercase; color: #874C64; white-space: nowrap; }
.sign-motto { font: italic 500 clamp(12px, 3.7cqw, 20px)/1.25 var(--display); color: #6E3E53; white-space: nowrap; }
.replay-mini {
  position: absolute; top: 1.4%; right: 2.2%; width: 44px; height: 44px; padding: 0;
  display: grid; place-items: center; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(201,156,108,.55); background: rgba(255,248,244,.72); color: var(--plum);
}
.replay-mini svg { width: 20px; height: 20px; }

.scene-text { position: absolute; transform: translate(-50%, -50%); pointer-events: none; text-align: center; white-space: nowrap; }
.st-forever { left: 50%; top: 48.16%; font: 600 clamp(11px, 4cqw, 22px)/1 var(--display); letter-spacing: .26em; padding-left: .26em; text-transform: uppercase; color: #874761; }
.st-paztries { left: 85.25%; top: 58.6%; display: flex; flex-direction: column; align-items: center; gap: .3cqw; color: var(--berry); }
.st-pz-name { font: 400 clamp(15px, 5.6cqw, 30px)/1 var(--script); }
.st-pz-sub { font: 800 max(9.5px, 2.4cqw)/1.15 var(--body); color: #9A4A63; }

.hotspot { position: absolute; display: block; border-radius: 18px; outline: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.hs-vile { left: 0; top: 28.2%; width: 33.5%; height: 71.8%; border-radius: 0 22px 22px 0; }
.hs-cute { left: 34%; top: 45.5%; width: 32.5%; height: 46.6%; border-radius: 48% 48% 16px 16px / 26% 26% 16px 16px; }
.hs-silly { left: 67.5%; top: 53.7%; width: 32.5%; height: 38.4%; border-radius: 18px 0 0 18px; }
.hs-glow { position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: opacity .25s ease; background: radial-gradient(ellipse at 50% 50%, rgba(255,246,238,.7), rgba(255,246,238,0) 70%); }
.hs-vile .hs-glow { background: radial-gradient(ellipse at 45% 22%, rgba(255,176,132,.55), rgba(255,176,132,0) 62%); }
.hs-silly .hs-glow { background: radial-gradient(ellipse at 50% 55%, rgba(255,218,156,.75), rgba(255,218,156,0) 70%); }
.hotspot:hover .hs-glow, .hotspot:focus-visible .hs-glow, .hotspot:active .hs-glow { opacity: 1; }
.hotspot:focus-visible { box-shadow: inset 0 0 0 2px rgba(201,156,108,.95), inset 0 0 0 4px rgba(255,255,255,.7); }
.hs-chip {
  position: absolute; display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  max-width: 84%; padding: 7px 10px 8px; border-radius: 10px;
  font: italic 600 clamp(13px, 3.8cqw, 19px)/1.05 var(--display);
}
.hs-chip-vile { left: 7%; top: 29%; background: linear-gradient(180deg, #3D1322, #22080F); color: #F5DFC4; border: 1px solid #A9804F; box-shadow: 0 6px 14px rgba(40,8,18,.35); }
.hs-up { display: flex; align-items: center; gap: 4px; font: 800 9.5px/1 var(--body); font-style: normal; letter-spacing: .18em; text-transform: uppercase; color: #E2C08F; }
.hs-up::before { content: ""; width: 7px; height: 7px; border-left: 1.6px solid currentColor; border-top: 1.6px solid currentColor; transform: translateY(2px) rotate(45deg); }

.hall-below {
  max-width: 560px; margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 26px 36px;
}
.choose { text-align: center; margin-bottom: 18px; }
.choose-title { margin: 0; font: 600 30px/1.1 var(--display); color: var(--plum); }
.choose-note { margin: 6px auto 0; max-width: 34ch; font: 400 15.5px/1.5 var(--body); color: #7A5363; }
.dest-list { display: grid; gap: 12px; }
.dest {
  position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr) 20px; align-items: center; gap: 14px;
  min-height: 98px; padding: 10px 14px 10px 10px; border-radius: 18px; text-decoration: none;
  transition: transform .15s ease, box-shadow .2s ease;
}
.dest:active { transform: scale(.985); }
.dest-img { width: 76px; height: 76px; border-radius: 14px; object-fit: cover; object-position: 50% 6%; display: block; }
.dest-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dest-where { font: 800 10.5px/1.25 var(--body); letter-spacing: .14em; text-transform: uppercase; }
.dest-name { font: 600 25px/1.05 var(--display); }
.dest-who { font: 400 14.5px/1.35 var(--body); }
.dest-go { font: 400 30px/1 var(--display); justify-self: end; }
.dest-vile { background: linear-gradient(135deg, #3A1222, #1E0A12); color: #F4E2CF; border: 1px solid #8C6640; box-shadow: 0 10px 24px rgba(40,8,18,.25); }
.dest-vile .dest-where, .dest-vile .dest-go { color: #E2C08F; }
.dest-vile .dest-img { background: radial-gradient(circle at 50% 38%, #7A2A40, #2A0C17 75%); }
.dest-cute { background: linear-gradient(135deg, #FFFBF8, #FBE3EA); color: var(--plum); border: 1px solid #EBC9D3; box-shadow: 0 10px 24px rgba(182,109,140,.14); }
.dest-cute .dest-where, .dest-cute .dest-go { color: var(--rose-ink); }
.dest-cute .dest-img { background: radial-gradient(circle at 50% 38%, #FFFFFF, #F6CFDB 80%); }
.dest-silly { background: linear-gradient(135deg, #FFF5EA, #FBD8DF); color: #5A3330; border: 1px solid #F0C1C9; box-shadow: 0 10px 24px rgba(218,128,152,.16); }
.dest-silly .dest-where, .dest-silly .dest-go { color: #B4506F; }
.dest-silly .dest-img { background: radial-gradient(circle at 50% 38%, #FFF8EE, #F8CBD6 80%); }

.hall-foot { margin-top: 28px; text-align: center; }
.foot-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.btn-soft {
  min-height: 44px; padding: 0 18px; border-radius: 999px; cursor: pointer;
  border: 1px solid #DDB8C4; background: #FFF8F5; color: var(--plum);
  font: 700 14px/1 var(--body);
}
.btn-soft[aria-pressed="true"] { background: var(--plum); color: #FFF4F6; border-color: var(--plum); }
.est { margin: 18px 0 0; font: italic 500 15px/1.45 var(--display); color: #8A6070; }

@media (min-width: 960px) {
  .hall { display: grid; grid-template-columns: auto minmax(320px, 420px); justify-content: center; align-items: center; column-gap: 56px; padding: 24px; }
  .hall-stage { background: none; }
  .hall-scene {
    width: min(560px, calc((100vh - 48px) * 400 / 760));
    border-radius: 22px; overflow: hidden;
    box-shadow: 0 30px 80px rgba(103,55,77,.25), 0 0 0 1px rgba(201,156,108,.55);
  }
  @supports (height: 1svh) { .hall-scene { width: min(560px, calc((100svh - 48px) * 400 / 760)); } }
  .hall-below { padding: 0; }
  .choose { text-align: left; }
  .choose-note { margin-left: 0; }
}

/* ================================================================== ROOMS: reading stages */
.room { background: var(--room-bg); color: var(--room-fg); }
.room-bar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 58px; padding-left: max(10px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  background: var(--bar-bg); border-bottom: 1px solid var(--bar-line);
}
.back {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  min-height: 44px; padding: 0 16px 0 8px; border-radius: 999px; text-decoration: none;
  background: var(--back-bg); border: 1px solid var(--bar-line); color: var(--bar-fg);
  font: 800 15px/1 var(--body);
}
.back svg { width: 20px; height: 20px; }
.crumb { margin: 0; min-width: 0; font: italic 500 16px/1.2 var(--display); color: var(--bar-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumb span { display: none; }
.crumb i { font-style: normal; }
@media (min-width: 440px) { .crumb span { display: inline; } }

.stage {
  position: relative; isolation: isolate; overflow: hidden;
  max-width: 640px; margin: 0 auto;
  height: calc(100vh - 58px); min-height: 540px;
}
@supports (height: 1svh) { .stage { height: calc(100svh - 58px); } }
@media (min-width: 700px) {
  .stage { max-width: max(400px, min(640px, calc((100vh - 58px) * .62))); border-radius: 0 0 22px 22px; box-shadow: 0 24px 60px rgba(0,0,0,.18); }
  @supports (height: 1svh) { .stage { max-width: max(400px, min(640px, calc((100svh - 58px) * .62))); } }
}
.stage-bg { position: absolute; inset: 0; z-index: -3; overflow: hidden; }
.stage-drift { position: absolute; inset: -3%; animation: drift-stage 19s ease-in-out infinite alternate; }
@keyframes drift-stage { from { transform: translate3d(-1%, 0, 0) scale(1.01); } to { transform: translate3d(1%, -.6%, 0) scale(1.03); } }
.room-art, .stage-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 100%; }
.rglow { position: absolute; left: 50%; top: 42%; width: min(125%, 640px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; z-index: -2; pointer-events: none; }

.room-heading { position: absolute; top: 12px; left: 0; right: 0; z-index: 4; text-align: center; padding-inline: 16px; pointer-events: none; display: flex; flex-direction: column; align-items: center; }
.eyebrow { margin: 0 0 4px; font: 800 10.5px/1.3 var(--body); letter-spacing: .18em; text-transform: uppercase; color: var(--eyebrow); }
.room-title { margin: 0; font: 600 clamp(32px, 9.5vw, 50px)/1 var(--display); color: var(--title); text-wrap: balance; outline: none; }
.room-sub { display: inline-block; margin: 6px 0 0; padding: 5px 10px 5px 12px; border-radius: 999px; background: rgba(255,248,242,.92); font: 800 11.5px/1.2 var(--body); letter-spacing: .16em; text-transform: uppercase; color: #B4506F; }

/* things in the room you can read */
.stage-objects { position: absolute; inset: 0; z-index: 3; pointer-events: none; transition: opacity .35s ease; }
.stage[data-mode="reading"] .stage-objects { opacity: 0; }
.stage[data-mode="reading"] .obj { pointer-events: none; }
.obj {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 14px 0 11px; border-radius: 999px; cursor: pointer;
  pointer-events: auto; background: var(--obj-bg); color: var(--obj-fg); border: 1px solid var(--obj-line);
  font: 800 12.5px/1 var(--body); letter-spacing: .03em; box-shadow: 0 6px 16px rgba(40,10,20,.18); white-space: nowrap;
}
.obj::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--obj-dot); box-shadow: 0 0 0 0 var(--obj-dot); animation: objPulse 2.6s ease-out infinite; }
.obj.read::before { animation: none; opacity: .45; }
@keyframes objPulse { 0% { box-shadow: 0 0 0 0 var(--obj-dot); } 70% { box-shadow: 0 0 0 8px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }

/* the characters */
.cast { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.sprite {
  position: absolute; left: 50%; bottom: 0; width: min(94%, 430px); max-height: 92%; aspect-ratio: .6;
  transform: translateX(-50%); padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto;
  -webkit-tap-highlight-color: transparent; transition: opacity .4s ease, transform .5s cubic-bezier(.2, .7, .2, 1), filter .4s ease;
}
.sprite-move { position: absolute; inset: 0; display: block; }
.sprite .sp { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; opacity: 0; transition: opacity .35s ease; }
.sprite .sp.on { opacity: 1; }
.sprite .interim { display: none; }
.sprite.is-interim { top: 16%; bottom: auto; width: min(58%, 290px); aspect-ratio: .62; max-height: none; }
.sprite.is-interim .interim {
  display: block; position: absolute; inset: 0; border-radius: 999px 999px 22px 22px; overflow: hidden;
  border: 3px solid var(--frame, #D9B07F); box-shadow: 0 0 0 6px var(--frame-halo, rgba(255,255,255,.35)), 0 18px 40px rgba(40,10,20,.3);
}
.sprite.is-interim .interim img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; display: block; }
.sprite:focus-visible { outline-offset: 4px; }
.sprite-move { animation: breathe-sprite 5.5s ease-in-out infinite; }
@keyframes breathe-sprite { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.sprite.guest { left: auto; right: -4%; transform: translateX(110%); width: min(70%, 330px); opacity: 0; }
.sprite.guest.is-interim { right: 4%; left: auto; width: min(46%, 230px); top: 22%; }
.sprite.guest.in { transform: none; opacity: 1; }
.cast.has-guest .sprite.host { transform: translateX(-72%) scale(.94); filter: saturate(.85) brightness(.92); }
.cast.has-guest .sprite.host.is-interim { transform: translateX(-88%) scale(.9); }
/* expressions read through small body motions, which also suit the final sprites */
.sprite.react .sprite-move { animation: var(--react, none) .6s ease both; }
.sprite[data-expr="joyful"], .sprite[data-expr="laughing"], .sprite[data-expr="cheerful"], .sprite[data-expr="goofy_grin"] { --react: hop; }
.sprite[data-expr="playful"], .sprite[data-expr="amused_smirk"], .sprite[data-expr="wink"], .sprite[data-expr="raised_brow"] { --react: tilt; }
.sprite[data-expr="blushing"], .sprite[data-expr="shy_smile"], .sprite[data-expr="sheepish"], .sprite[data-expr="rare_blush"] { --react: dip; }
.sprite[data-expr="surprised"], .sprite[data-expr="wide_eyes"], .sprite[data-expr="fake_outrage"] { --react: pop; }
.sprite[data-expr="tender"], .sprite[data-expr="softened"], .sprite[data-expr="lovingly_soft"] { --react: lean; }
@keyframes hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-14px); } 70% { transform: translateY(2px); } }
@keyframes tilt { 0%, 100% { transform: rotate(0); } 45% { transform: rotate(-2.5deg); } }
@keyframes dip { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px) scale(.985); } }
@keyframes pop { 0%, 100% { transform: scale(1); } 35% { transform: scale(1.045); } }
@keyframes lean { 0%, 100% { transform: translate(0); } 50% { transform: translate(-6px, -3px); } }

/* the reading panel */
.talk {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  padding-left: max(10px, env(safe-area-inset-left, 0px)); padding-right: max(10px, env(safe-area-inset-right, 0px)); padding-block: 0 10px;
}
.talk-card {
  display: flex; flex-direction: column; max-height: 50vh; padding: 14px 16px 12px; border-radius: 20px;
  background: var(--talk-bg); color: var(--talk-fg); border: 1px solid var(--talk-line); box-shadow: 0 -8px 30px rgba(30,10,20,.18);
}
@supports (height: 1svh) { .talk-card { max-height: 50svh; } }
.talk-top { display: flex; align-items: center; gap: 10px; min-height: 26px; }
.talk-name { flex: none; padding: 5px 11px; border-radius: 999px; font: 800 11.5px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; background: var(--name-bg); color: var(--name-fg); }
.talk-name[data-speaker="vile"] { --name-bg: #4A1528; --name-fg: #F1D3A8; }
.talk-name[data-speaker="cute"] { --name-bg: #F6D7E1; --name-fg: #7A3A57; }
.talk-name[data-speaker="silly"] { --name-bg: #F7C6D3; --name-fg: #9A3558; }
.talk-scene { flex: 1; min-width: 0; font: italic 500 15px/1.2 var(--display); color: var(--talk-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.talk-count { flex: none; font: 700 11.5px/1 var(--body); color: var(--talk-muted); font-variant-numeric: tabular-nums; }
.talk-body { overflow-y: auto; overscroll-behavior: contain; margin: 10px 0 12px; -webkit-overflow-scrolling: touch; }
.talk-dir { margin: 0 0 8px; font: italic 500 16px/1.45 var(--display); color: var(--talk-muted); }
.talk-text { margin: 0; font: italic 500 clamp(20px, 5.6vw, 23px)/1.42 var(--display); text-wrap: pretty; }
.talk-text[data-speaker="silly"] { font: 700 clamp(16.5px, 4.6vw, 18.5px)/1.48 var(--body); }
.talk-text.fresh, .talk-dir.fresh { animation: lineIn .45s ease both; }
@keyframes lineIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.talk-nav { display: flex; align-items: center; gap: 8px; }
.t-btn { min-height: 48px; border-radius: 999px; cursor: pointer; font: 800 15px/1 var(--body); border: 1px solid var(--btn-line); background: var(--btn2-bg); color: var(--btn2-fg); padding: 0 16px; }
.t-prev { width: 48px; padding: 0; flex: none; font: 400 26px/1 var(--display); }
.t-prev:disabled { opacity: .35; cursor: default; }
.t-next { flex: 1; background: var(--btn-bg); color: var(--btn-fg); border-color: transparent; }
.t-close { flex: none; }
.talk-choices { display: grid; gap: 8px; }
.choice {
  min-height: 52px; padding: 10px 16px; border-radius: 16px; cursor: pointer; text-align: left;
  border: 1px solid var(--btn-line); background: var(--btn2-bg); color: var(--btn2-fg);
  font: italic 600 19px/1.25 var(--display);
}
.choice.primary { background: var(--btn-bg); color: var(--btn-fg); border-color: transparent; }
.talk-hint { margin: 2px 0 10px; font: italic 500 17px/1.4 var(--display); color: var(--talk-muted); }
.stories { display: grid; gap: 6px; margin: 0 0 4px; padding: 0; list-style: none; }
.story {
  width: 100%; display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 8px 14px; border-radius: 14px; cursor: pointer; text-align: left;
  border: 1px solid var(--btn-line); background: var(--btn2-bg); color: var(--btn2-fg);
}
.story-title { flex: 1; min-width: 0; font: 600 18px/1.2 var(--display); }
.story-state { flex: none; font: 800 10px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--talk-muted); }
.story.new .story-state { color: var(--btn-bg); }
.story.new .story-title::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 8px; border-radius: 50%; background: var(--btn-bg); vertical-align: middle; }
.talk-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.talk-row .t-btn { flex: 1; }

/* moments inside the room */
.fx { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
.fx-glow { position: absolute; inset: 0; background: radial-gradient(circle at 50% 30%, rgba(255,255,255,.95), rgba(255,240,245,.4) 40%, rgba(255,240,245,0) 70%); animation: fxGlow 3.2s ease both; }
@keyframes fxGlow { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
.fx-ring { position: absolute; left: 50%; top: 50%; width: 104px; height: 104px; margin: -52px 0 0 -52px; animation: ringIn 3.4s cubic-bezier(.2, .7, .2, 1) both; }
.fx-ring svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 14px rgba(255,255,255,.9)); }
@keyframes ringIn { 0% { opacity: 0; transform: scale(.4) rotate(-30deg); } 20% { opacity: 1; transform: scale(1.08) rotate(4deg); } 30% { transform: scale(1) rotate(0); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }
.fx-petal { position: absolute; top: -20px; width: 12px; height: 8px; border-radius: 60% 40% 60% 40%; background: var(--pc, #F4A8BE); animation: petalFall var(--d, 6s) linear var(--t, 0s) both; }
@keyframes petalFall { 0% { transform: translate3d(0, 0, 0) rotate(0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translate3d(var(--dx, 30px), 110vh, 0) rotate(540deg); opacity: .9; } }

/* footers under each stage */
.room-foot {
  max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 26px calc(40px + env(safe-area-inset-bottom, 0px));
}
.btn-hall { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; border-radius: 999px; text-decoration: none; font: 800 15.5px/1 var(--body); }
.other-doors { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.other-doors a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; text-decoration: none; font: italic 600 18px/1 var(--display); }

.view.enter .room-heading { animation: rise .8s .05s cubic-bezier(.2, .7, .2, 1) both; }
.view.enter .cast { animation: castIn 1.1s .15s cubic-bezier(.2, .7, .2, 1) both; }
.view.enter .talk { animation: rise .7s .45s cubic-bezier(.2, .7, .2, 1) both; }
.room-vile.enter .cast { animation-name: castShadow; animation-duration: 1.6s; }
.room-silly.enter .cast { animation: castBounce 1s .15s cubic-bezier(.3, 1.35, .5, 1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes castIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes castShadow { from { opacity: 0; filter: brightness(.35); } to { opacity: 1; filter: none; } }
@keyframes castBounce { 0% { opacity: 0; transform: translateY(46px); } 60% { opacity: 1; transform: translateY(-8px); } 100% { opacity: 1; transform: none; } }

/* ------------------------------------------------------------------ The Forbidden Wing */
.room-vile {
  --room-bg: #1C0A11; --room-fg: #F3E3D3; --title: #EBCB98; --eyebrow: #D3A877;
  --bar-bg: #16070D; --bar-line: rgba(169,128,79,.45); --bar-fg: #F3DEC4; --bar-muted: #CDAE8C; --back-bg: #2A0E19;
  --talk-bg: rgba(28,8,16,.94); --talk-fg: #F6E6D6; --talk-line: rgba(169,128,79,.55); --talk-muted: #C9A98B;
  --btn-bg: #E2C08F; --btn-fg: #2A0E19; --btn2-bg: rgba(74,21,40,.7); --btn2-fg: #F3DEC4; --btn-line: rgba(169,128,79,.5);
  --obj-bg: rgba(30,8,16,.88); --obj-fg: #F1D3A8; --obj-line: rgba(169,128,79,.7); --obj-dot: #E2A867;
  --frame: #A9804F; --frame-halo: rgba(169,128,79,.18);
}
.rglow-vile { background: radial-gradient(circle, rgba(255,170,110,.42) 0, rgba(170,56,88,.2) 38%, rgba(60,10,25,0) 66%); animation: candle 4.2s ease-in-out infinite; }
@keyframes candle { 0%, 100% { opacity: .85; } 30% { opacity: 1; } 55% { opacity: .78; } 75% { opacity: .95; } }
.flame-glow { animation: flicker 2.8s linear infinite; }
.room-vile .room-title { text-shadow: 0 2px 18px rgba(0,0,0,.65); }
.room-vile .btn-hall { background: linear-gradient(180deg, #E9C995, #C79A6B); color: #2A0E19; }
.room-vile .other-doors a { color: #EBCB98; border: 1px solid rgba(169,128,79,.5); }

/* ------------------------------------------------------------------ FOREVER */
.room-cute {
  --room-bg: #FBEAF0; --room-fg: var(--plum); --title: #7A3A57; --eyebrow: #A85776;
  --bar-bg: #FFF6F8; --bar-line: #F0D0DA; --bar-fg: var(--plum); --bar-muted: #A0687F; --back-bg: #FFFFFF;
  --talk-bg: rgba(255,251,248,.96); --talk-fg: #5E3046; --talk-line: #EFCFD9; --talk-muted: #A07185;
  --btn-bg: #7A3A57; --btn-fg: #FFF4F6; --btn2-bg: #FFFFFF; --btn2-fg: #7A3A57; --btn-line: #EBC9D3;
  --obj-bg: rgba(255,251,248,.94); --obj-fg: #7A3A57; --obj-line: #E8C7D2; --obj-dot: #E68FAA;
  --frame: #D9C2CB; --frame-halo: rgba(255,255,255,.55);
}
.rglow-cute { background: radial-gradient(circle, rgba(255,255,255,.95) 0, rgba(255,238,243,.5) 40%, rgba(255,238,243,0) 66%); }
.room-cute .room-title { letter-spacing: .2em; padding-left: .2em; text-transform: uppercase; font-size: clamp(30px, 9vw, 48px); text-shadow: 0 2px 0 #FFFFFF; }
.twinkles { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.twinkles i { position: absolute; left: var(--x); top: var(--y); width: 12px; height: 12px; opacity: 0; animation: twinkle 3.4s ease-in-out var(--t) infinite;
  background: linear-gradient(#FFFFFF, #FFFFFF) 50% 0 / 2px 100% no-repeat, linear-gradient(#FFFFFF, #FFFFFF) 0 50% / 100% 2px no-repeat; filter: drop-shadow(0 0 3px #F6B8CA); }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.5) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(45deg); } }
.room-cute .btn-hall { background: var(--plum); color: #FFF4F6; }
.room-cute .other-doors a { color: #7A3A57; border: 1px solid #EBC9D3; background: #FFFBF8; }

/* ------------------------------------------------------------------ PAZTRIES */
.room-silly {
  --room-bg: #FFF2EB; --room-fg: #5A3330; --title: #C04C74; --eyebrow: #B4506F;
  --bar-bg: #FFF8F2; --bar-line: #F2CDD1; --bar-fg: #8E3D5A; --bar-muted: #B47A8C; --back-bg: #FFFFFF;
  --talk-bg: rgba(255,253,249,.97); --talk-fg: #9A3558; --talk-line: #F0C1C9; --talk-muted: #B47A8C;
  --btn-bg: #C04C74; --btn-fg: #FFF8F2; --btn2-bg: #FFFFFF; --btn2-fg: #A9405F; --btn-line: #F0C1C9;
  --obj-bg: rgba(255,253,249,.95); --obj-fg: #A9405F; --obj-line: #F0C1C9; --obj-dot: #E2435E;
  --frame: #E58AA4; --frame-halo: rgba(255,255,255,.5);
}
.rglow-silly { background: radial-gradient(circle, rgba(255,242,208,.95) 0, rgba(255,222,192,.45) 40%, rgba(255,222,192,0) 66%); }
.room-silly .room-title { font: 400 clamp(46px, 14vw, 76px)/1.05 var(--script); text-shadow: 0 2px 0 #FFFFFF; }
.room-silly .talk-card { border-width: 2px; box-shadow: 4px 6px 0 rgba(229,138,164,.28), 0 -8px 30px rgba(30,10,20,.12); }
.room-silly .sprite-move { animation: bob 2.9s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-7px) rotate(-1deg); } 60% { transform: translateY(0) rotate(.6deg); } }
.open-sign { display: inline-flex; flex-direction: column; align-items: center; margin-top: 4px; transform-origin: 50% 0; animation: swing 3.6s ease-in-out infinite; }
.open-string { width: 30px; height: 12px; border: 1.5px solid #B98A63; border-bottom: 0; border-radius: 30px 30px 0 0; }
.open-board {
  display: flex; align-items: baseline; gap: 6px; padding: 5px 10px 6px; border-radius: 7px;
  background: #FFF8EE; border: 2px solid #C25A7C; color: #C25A7C; font: 900 13px/1 var(--body); letter-spacing: .12em; text-transform: uppercase;
  box-shadow: 0 4px 8px rgba(120,60,60,.18);
}
.open-board small { font: italic 600 13px/1 var(--display); letter-spacing: 0; text-transform: none; color: #8E3D5A; }
@keyframes swing { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(3deg); } }
.flour { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.flour i { position: absolute; left: var(--x); top: 18%; width: 4px; height: 4px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 4px rgba(255,255,255,.9); opacity: 0; animation: flourFall var(--d) linear var(--t) infinite; }
@keyframes flourFall { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 15% { opacity: .9; } 85% { opacity: .7; } 100% { transform: translate3d(14px, 220px, 0); opacity: 0; } }
.room-silly .btn-hall { background: #C04C74; color: #FFF8F2; box-shadow: 3px 4px 0 rgba(192,76,116,.25); }
.room-silly .other-doors a { color: #A9405F; border: 1px solid #F0C1C9; background: #FFFDF9; }

/* ================================================================== OVERLAYS */
.toasts { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
.toast { position: absolute; pointer-events: auto; opacity: 0; transition: opacity .35s ease, transform .5s cubic-bezier(.2, .8, .2, 1); }
.toast.show { opacity: 1; }
.toast-x { flex: none; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 0; cursor: pointer; background: transparent; font: 400 28px/1 var(--display); display: grid; place-items: center; }
.toast-welcome {
  left: 50%; top: calc(env(safe-area-inset-top, 0px) + 17%);
  width: min(calc(100vw - 32px), 380px); transform: translate(-50%, 12px);
  display: flex; align-items: center; gap: 4px; padding: 12px 6px 12px 20px;
  background: rgba(255,251,248,.96); border: 1px solid #E3C49A; border-radius: 18px;
  box-shadow: 0 18px 44px rgba(103,55,77,.24);
}
.toast-welcome.show { transform: translate(-50%, 0); }
.toast-text { margin: 0; flex: 1; text-align: center; font: italic 500 23px/1.25 var(--display); color: var(--plum); text-wrap: balance; }
.toast-welcome .toast-x { color: var(--rose-ink); }
.toast-bakery {
  right: calc(env(safe-area-inset-right, 0px) + 10px); bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
  width: min(calc(100vw - 20px), 390px);
  display: grid; grid-template-columns: 66px minmax(0, 1fr) 44px; align-items: end; gap: 8px;
  transform: translateY(24px) scale(.92); transform-origin: 100% 100%;
}
.toast-bakery.show { transform: none; }
.toast-bakery.show .toast-bubble { animation: wobble .7s .4s ease-in-out; }
@keyframes wobble { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-2.5deg); } 40% { transform: rotate(2deg); } 60% { transform: rotate(-1.2deg); } 80% { transform: rotate(.6deg); } }
.toast-avatar { width: 66px; height: 66px; border-radius: 50%; object-fit: cover; object-position: 50% 8%; background: radial-gradient(circle, #FFF8EE, #F8CBD6); border: 2.5px solid #E58AA4; box-shadow: 0 6px 14px rgba(180,80,111,.25); }
.toast-bubble {
  position: relative; margin: 0; padding: 10px 14px 12px; border-radius: 20px 20px 20px 6px;
  background: #FFFDF9; border: 2.5px solid #E58AA4; color: #A43F63; box-shadow: 3px 5px 0 rgba(229,138,164,.32);
  font: 900 15.5px/1.28 var(--body);
}
.toast-from { display: block; margin-bottom: 5px; font: 800 9.5px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: #C77D94; }
.toast-bakery .toast-x { align-self: start; background: #FFF6F2; border: 1px solid #F0C1C9; color: #A43F63; }
.toast-goodbye {
  left: 50%; top: calc(env(safe-area-inset-top, 0px) + 68px); transform: translate(-50%, -10px);
  width: min(calc(100vw - 24px), 380px); display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: center; gap: 10px;
}
.toast-goodbye.show { transform: translate(-50%, 0); }
.toast-goodbye .toast-avatar { width: 54px; height: 54px; }
.toast-goodbye .toast-bubble { border-radius: 18px; font: italic 500 18px/1.35 var(--display); border-width: 1.5px; box-shadow: 0 10px 26px rgba(60,20,35,.2); }
.toast-goodbye[data-speaker="vile"] .toast-bubble { background: #22090F; color: #F6E6D6; border-color: #A9804F; }
.toast-goodbye[data-speaker="vile"] .toast-from { color: #D9B583; }
.toast-goodbye[data-speaker="vile"] .toast-avatar { border-color: #A9804F; }
.toast-goodbye[data-speaker="cute"] .toast-bubble { color: #6A3550; border-color: #E3C49A; }
.toast-goodbye[data-speaker="cute"] .toast-avatar { border-color: #E3C49A; }
.toast-goodbye[data-speaker="silly"] .toast-bubble { font: 800 15px/1.35 var(--body); }

.cert-wrap {
  position: fixed; inset: 0; z-index: 120; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 20px;
  background: rgba(58,26,40,.6); animation: fadeIn .4s ease both;
}
.cert { width: min(100%, 400px, calc((100vh - 140px) * .8)); aspect-ratio: 4 / 5; padding: 9px; background: #FFFBF6; border-radius: 6px; box-shadow: 0 30px 70px rgba(30,8,18,.45); animation: certIn .7s .1s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes certIn { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
.cert-inner {
  height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 18px 16px; text-align: center;
  border: 1.5px solid #D9B07F; outline: 1px solid #EBD3B0; outline-offset: -6px; border-radius: 3px;
  background: radial-gradient(circle at 50% 0, #FFF4F6, rgba(255,244,246,0) 60%), #FFFBF6; color: #5E3046;
}
.cert-house { margin: 0; font: 700 9.5px/1.3 var(--body); letter-spacing: .2em; text-transform: uppercase; color: #A07185; }
.cert-flake { width: 34px; height: 34px; color: #C99C6C; }
.cert-title { margin: 0; font: 600 18px/1.2 var(--display); color: #7A3A57; display: flex; flex-direction: column; align-items: center; }
.cert-title span { font: 400 clamp(30px, 9vw, 40px)/1.15 var(--script); color: #9E4D70; }
.cert-body { margin: 0; max-width: 28ch; font: italic 500 15.5px/1.4 var(--display); }
.cert-date { margin: 2px 0; font: 700 11.5px/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: #8C5A6E; }
.cert-sigs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; width: 100%; max-width: 300px; margin-top: 4px; }
.cert-sigs p { margin: 0; display: flex; flex-direction: column; align-items: center; border-top: 1px solid #D9B07F; padding-top: 4px; }
.sig { order: -1; font: 400 26px/1.1 var(--script); color: #7A3A57; margin-bottom: 2px; }
.sig-role { font: 700 9.5px/1 var(--body); letter-spacing: .18em; text-transform: uppercase; color: #A07185; }
.cert-note { margin: 4px 0 0; max-width: 32ch; font: 500 11px/1.4 var(--body); color: #9A7584; }
.cert-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.btn-solid { min-height: 48px; padding: 0 22px; border-radius: 999px; cursor: pointer; border: 0; background: var(--plum); color: #FFF4F6; font: 800 15px/1 var(--body); }
.cert-actions .btn-soft { min-height: 48px; }

/* ================================================================== CALM MOTION (reduced motion or the in-hall toggle) */
.rm .motes, .rm .hall-motes, .rm .twinkles, .rm .flour, .rm .tap-ring, .rm .fx-petal { display: none; }
.rm .flake-float, .rm .flake-halo, .rm .logo-btn.ready .logo-sweep::before, .rm .hglow, .rm .rglow, .rm .flame-glow,
.rm .open-sign, .rm .sprite-move, .rm .toast-bakery.show .toast-bubble, .rm .hl-drift, .rm .stage-drift, .rm .obj::before,
.rm .sprite.react .sprite-move, .rm .fx-ring, .rm .fx-glow { animation: none !important; }
.rm .logo-btn.in { animation: fadeIn .3s ease forwards; }
.rm .hall.from-intro .hl-inner { animation: fadeIn .4s ease both !important; }
.rm .view.enter .room-heading, .rm .view.enter .cast, .rm .view.enter .talk { animation: fadeIn .3s ease both !important; }
.rm .intro-line, .rm .toast, .rm .sprite, .rm .sprite .sp { transition-duration: .2s; }
.rm .talk-text.fresh, .rm .talk-dir.fresh { animation: fadeIn .2s ease both; }
.rm .lock-ring { transition: none; }
.rm .fx-ring { opacity: 1; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ================================================================== PAINTED SCENES (semi-3D) */
/* one painting + a depth map per scene; js/depth3d.js moves it gently in 3D. Labels and glows are pinned to painting pixels. */
.scene3d { position: absolute; inset: 0; overflow: hidden; }
.scene3d .scene-img { position: absolute; max-width: none; display: block; user-select: none; pointer-events: none; }
.scene3d .scene-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .6s ease; }
.scene3d.gl-on .scene-gl { opacity: 1; }
.rm .scene3d .scene-gl { display: none; }
.scene3d [data-ix] { position: absolute; }

/* ambient life: candle flicker, lamp glow, drifting dust, petals, steam, crystal glints */
.amb { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.amb-glow { border-radius: 50%; transform: translate(-50%, -50%); mix-blend-mode: screen; animation: ambFlicker var(--d, 3s) ease-in-out var(--t, 0s) infinite; }
.amb-glow.k-flame { background: radial-gradient(circle, rgba(255,206,130,.62) 0, rgba(255,166,86,.24) 34%, rgba(255,140,60,0) 68%); }
.amb-glow.k-lamp, .amb-glow.k-warm { background: radial-gradient(circle, rgba(255,222,160,.55) 0, rgba(255,204,146,.2) 40%, rgba(255,204,146,0) 70%); animation-name: ambBreathe; animation-duration: 6s; }
.amb-glow.k-window { background: radial-gradient(circle, rgba(255,232,240,.34) 0, rgba(255,214,228,.12) 45%, rgba(255,214,228,0) 70%); animation-name: ambBreathe; animation-duration: 8s; }
.amb-glow.k-moon { background: radial-gradient(circle, rgba(226,214,255,.45) 0, rgba(196,176,255,.14) 45%, rgba(196,176,255,0) 70%); animation-name: ambBreathe; animation-duration: 9s; }
.amb-glow.k-chandelier { background: radial-gradient(circle, rgba(255,255,255,.6) 0, rgba(255,236,244,.22) 40%, rgba(255,236,244,0) 70%); animation-name: ambBreathe; animation-duration: 6.5s; }
@keyframes ambFlicker { 0%, 100% { opacity: .78; scale: 1; } 18% { opacity: .55; scale: .95; } 34% { opacity: .96; scale: 1.04; } 58% { opacity: .66; scale: .98; } 80% { opacity: .9; scale: 1.02; } }
@keyframes ambBreathe { 0%, 100% { opacity: .62; scale: .97; } 50% { opacity: 1; scale: 1.03; } }
.amb-glint { width: 14px; height: 14px; margin: -7px 0 0 -7px; opacity: 0;
  background: linear-gradient(#FFFFFF, #FFFFFF) 50% 0 / 2px 100% no-repeat, linear-gradient(#FFFFFF, #FFFFFF) 0 50% / 100% 2px no-repeat;
  filter: drop-shadow(0 0 4px #FFD3E1); animation: ambGlint var(--d, 3.4s) ease-in-out var(--t, 0s) infinite; }
@keyframes ambGlint { 0%, 100% { opacity: 0; scale: .4; rotate: 0deg; } 50% { opacity: 1; scale: 1; rotate: 45deg; } }
.amb-steam { width: 0; height: 0; }
.amb-steam i { position: absolute; left: var(--x); bottom: 0; width: calc(var(--ps, .4) * 70px); height: calc(var(--ps, .4) * 140px); margin-left: calc(var(--ps, .4) * -35px);
  border-radius: 50%; background: radial-gradient(ellipse, rgba(255,255,255,.6), rgba(255,255,255,0) 68%); filter: blur(3px); opacity: 0;
  animation: ambSteam var(--d, 4.5s) ease-out var(--t, 0s) infinite; }
@keyframes ambSteam { 0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.6, .5); } 25% { opacity: .65; } 100% { opacity: 0; transform: translate3d(8px, -150%, 0) scale(1.25, 1.4); } }
.amb-motes, .amb-petals { container-type: size; }
.amb-motes i { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%;
  background: radial-gradient(circle, #FFF8E8 0, rgba(255,240,210,.6) 45%, rgba(255,240,210,0) 72%); opacity: 0;
  animation: ambMote var(--d, 12s) ease-in-out var(--t, 0s) infinite; }
@keyframes ambMote { 0% { opacity: 0; transform: translate3d(0, 0, 0); } 20% { opacity: .9; } 50% { transform: translate3d(12px, -5cqh, 0); } 80% { opacity: .7; } 100% { opacity: 0; transform: translate3d(-6px, -11cqh, 0); } }
.amb-petals i { position: absolute; left: var(--x); top: 0; width: 11px; height: 8px; border-radius: 60% 40% 60% 40%; background: #F4A8BE; opacity: 0;
  animation: ambPetal var(--d, 14s) linear var(--t, 0s) infinite; }
.amb-petals.t-rose i { background: #E8869F; }
.amb-petals.t-wine i { background: #8E1F3D; box-shadow: 0 0 6px rgba(255,120,120,.25); }
.amb-petals.t-pink i:nth-child(3n) { background: #FFFFFF; }
@keyframes ambPetal {
  0% { opacity: 0; transform: translate3d(0, -4cqh, 0) rotate(0deg); }
  10% { opacity: .85; }
  50% { transform: translate3d(var(--sw), 48cqh, 0) rotate(calc(var(--r) * .5)); }
  90% { opacity: .7; }
  100% { opacity: 0; transform: translate3d(calc(var(--sw) * -.4), 100cqh, 0) rotate(var(--r)); }
}
.rm .amb { display: none; }

/* ---------------------------------------------------------------- the painted Grand Hall */
.hall-scene.painted { aspect-ratio: var(--hall-ar); width: min(100vw, 560px, calc(100vh * .5798)); background: #3A1820; }
@supports (height: 1svh) { .hall-scene.painted { width: min(100vw, 560px, calc(100svh * .5798)); } }
.hall-scene.painted .hl-drift { animation: none; }
.hall-scrim { position: absolute; left: 0; right: 0; top: 0; height: 25%; pointer-events: none; z-index: 2;
  background: linear-gradient(180deg, rgba(40,12,20,.86) 0, rgba(40,12,20,.6) 42%, rgba(40,12,20,0) 100%); }
.hall-scene.painted .hall-sign { z-index: 3; top: 1.6%; }
.hall-scene.painted .sign-name { color: #FFEBDA; text-shadow: 0 2px 14px rgba(30,6,14,.8), 0 0 2px rgba(30,6,14,.6); }
.hall-scene.painted .sign-sub { color: #F2CB9C; text-shadow: 0 1px 8px rgba(30,6,14,.85); }
.hall-scene.painted .sign-motto { color: #FBE2D4; text-shadow: 0 1px 8px rgba(30,6,14,.85); }
.hall-scene.painted .replay-mini { z-index: 4; background: rgba(40,12,20,.55); color: #FBE2D4; border-color: rgba(226,192,143,.6); }
.hall-scene.painted .hotspot { z-index: 3; }
.hall-scene.painted .hs-chip-vile { left: 5%; top: 33%; }
.hall-plaque { z-index: 2; transform: translate(-50%, -50%); display: grid; place-items: center; border-radius: 4px; pointer-events: none;
  background: linear-gradient(180deg, #FFF9F2, #F4E2D6); border: 1px solid #C9A06C; box-shadow: 0 0 0 2px rgba(255,246,236,.55), 0 4px 10px rgba(60,20,30,.4);
  font: 600 max(10px, calc(var(--ps, .4) * 27px))/1 var(--display); letter-spacing: .3em; padding-left: .3em; text-transform: uppercase; color: #874761; }
.hall-board { z-index: 2; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.hb-chain { width: 46%; height: max(8px, calc(var(--ps, .4) * 34px)); border: 1.5px solid #C49A6C; border-bottom: 0; border-radius: 40px 40px 0 0; margin-bottom: -1px; }
.hb-face { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; padding: 4px 4px 6px; border-radius: 8px;
  background: #FFF8EE; border: 2px solid #DA8098; box-shadow: 0 5px 12px rgba(60,20,24,.38);
  transform-origin: 50% -16px; animation: swing 4.2s ease-in-out infinite; }
.hb-name { font: 400 max(17px, calc(var(--ps, .4) * 54px))/1 var(--script); color: var(--berry); }
.hb-sub { font: 800 max(8.5px, calc(var(--ps, .4) * 22px))/1.15 var(--body); color: #9A4A63; text-align: center; }
.rm .hb-face { animation: none; }
@media (min-width: 960px) {
  .hall-scene.painted { width: min(560px, calc((100vh - 48px) * .5798)); }
  @supports (height: 1svh) { .hall-scene.painted { width: min(560px, calc((100svh - 48px) * .5798)); } }
}

/* ---------------------------------------------------------------- painted rooms */
.stage-bg { background: var(--room-bg); }
.room-scrim { position: absolute; left: 0; right: 0; top: 0; height: 26%; pointer-events: none; z-index: 2; }
.room-vile .room-scrim { background: linear-gradient(180deg, rgba(16,4,9,.9) 0, rgba(16,4,9,.55) 50%, rgba(16,4,9,0) 100%); }
.room-cute .room-scrim { background: linear-gradient(180deg, rgba(255,248,246,.94) 0, rgba(255,248,246,.62) 50%, rgba(255,248,246,0) 100%); }
.room-silly .room-scrim { height: 30%; background: linear-gradient(180deg, rgba(255,247,241,.95) 0, rgba(255,247,241,.66) 55%, rgba(255,247,241,0) 100%); }

/* ---------------------------------------------------------------- the painted entrance doors */
.gate.painted { transform-origin: 50% 57%; }
.gate.painted .gate-frame-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  -webkit-mask-image: radial-gradient(ellipse 60% 54% at 50% 52%, #000 66%, transparent 100%); mask-image: radial-gradient(ellipse 60% 54% at 50% 52%, #000 66%, transparent 100%); }
.gate-glimpse { position: absolute; overflow: hidden; background: #F6E3DF; }
.gate-glimpse img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 80%; display: block; filter: brightness(1.12) saturate(1.05); }
.gate.painted .leaf img { display: block; width: 100%; height: 100%; }
.gate.painted .leaf-l { box-shadow: inset -1px 0 0 rgba(120,60,70,.35); }
.gate.painted .lock { left: calc(var(--lx) - 9%); top: calc(var(--ly) - var(--gw) * .09); width: 18%; }
/* Paztries: the little Open sign hangs to the side of the title, clear of Silly's hat */
.room-silly .open-sign { position: absolute; right: 4px; top: 46px; margin: 0; scale: .78; transform-origin: 100% 0; }
.room-silly .room-sub { margin-top: 2px; }
@media (max-width: 340px) { .room-silly .open-sign { display: none; } }

/* ================================================================== VILE'S LIBRARY + READER */
html.lib-open, html.lib-open body { overflow: hidden; }

.lib, .reader { position: fixed; inset: 0; z-index: 96; display: flex; flex-direction: column; opacity: 0; transition: opacity .35s ease; }
.lib.in, .reader.in { opacity: 1; }
.rm .lib, .rm .reader { transition: none; }
.lib { background: radial-gradient(ellipse at 50% 0, #4A1426 0, #1C0911 55%, #12060B 100%); color: #F3E3D3; }
.lib-bar { flex: none; display: flex; align-items: center; padding: max(10px, env(safe-area-inset-top)) 12px 8px; border-bottom: 1px solid rgba(169,128,79,.35); }
.lib-back { min-height: 44px; padding: 0 16px 0 12px; border-radius: 999px; border: 1px solid rgba(169,128,79,.55); background: #2A0E19; color: #F3DEC4; font: 800 14px/1 var(--body); cursor: pointer; }
.lib-back span { font: 400 22px/1 var(--display); margin-right: 4px; vertical-align: -2px; }
.lib-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 18px 16px calc(28px + env(safe-area-inset-bottom)); }
.lib-head { text-align: center; margin: 4px auto 20px; }
.lib-eyebrow { margin: 0 0 6px; font: 800 10.5px/1.3 var(--body); letter-spacing: .18em; text-transform: uppercase; color: #D3A877; }
.lib-title { margin: 0; font: 600 clamp(34px, 10vw, 50px)/1 var(--display); color: #EBCB98; text-shadow: 0 2px 18px rgba(0,0,0,.6); outline: none; }
.lib-shelf { list-style: none; margin: 0 auto; padding: 0; max-width: 560px; display: grid; gap: 16px; }
.lib-book { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 16px; align-items: start; padding: 14px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(58,18,34,.85), rgba(30,10,18,.85)); border: 1px solid rgba(169,128,79,.4); box-shadow: 0 12px 28px rgba(0,0,0,.35); }
.lib-cover { position: relative; width: 92px; aspect-ratio: 2 / 3; border-radius: 4px 8px 8px 4px; overflow: hidden;
  background: linear-gradient(90deg, #2A0B16 0 8px, #5A1A2E 8px 9px, #6E1F38 9px); box-shadow: 4px 6px 14px rgba(0,0,0,.5), inset -1px 0 0 rgba(255,255,255,.08); }
.lib-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.lib-spine { position: absolute; inset: 12px 8px 12px 16px; display: grid; place-items: center; text-align: center; font: italic 600 13px/1.15 var(--display); color: #EBCB98;
  border-top: 1px solid rgba(226,192,143,.5); border-bottom: 1px solid rgba(226,192,143,.5); overflow: hidden; }
.lib-cover.has-img .lib-spine { display: none; }
.lib-info { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.lib-btitle { margin: 0; font: 600 21px/1.15 var(--display); color: #F6E6D6; overflow-wrap: anywhere; }
.lib-author { margin: 0; font: 700 12.5px/1.3 var(--body); letter-spacing: .04em; color: #CDAE8C; }
.lib-note { margin: 6px 0 2px; font: italic 500 16px/1.4 var(--display); color: #E9D3BD; }
.lib-pct { font: 800 10.5px/1 var(--body); letter-spacing: .14em; color: #E2C08F; text-transform: uppercase; }
.lib-act { margin-top: 8px; min-height: 44px; padding: 0 22px; display: inline-flex; align-items: center; border-radius: 999px; border: 0; cursor: pointer; text-decoration: none;
  background: linear-gradient(180deg, #E9C995, #C79A6B); color: #2A0E19; font: 800 14.5px/1 var(--body); }
a.lib-act::after { content: "↗"; margin-left: 8px; }
.lib-act:disabled { opacity: .5; cursor: default; }
.lib-err { margin: 6px 0 0; font: 600 13px/1.4 var(--body); color: #F2A7B4; }
.lib-broken .lib-author { color: #F2A7B4; }

.reader { --rd-bg: #160810; --rd-fg: #EFE0D2; --rd-muted: #B99A86; --rd-line: rgba(169,128,79,.35); --rd-accent: #E2C08F; --rd-chip: #2A0E19; --rd-size: 20px;
  background: var(--rd-bg); color: var(--rd-fg); }
.reader[data-theme="paper"] { --rd-bg: #FBF4EC; --rd-fg: #3A2128; --rd-muted: #8E6A70; --rd-line: rgba(142,61,90,.22); --rd-accent: #8E3D5A; --rd-chip: #FFFFFF; }
.rd-bar, .rd-foot { flex: none; display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-color: var(--rd-line); }
.rd-bar { padding-top: max(6px, env(safe-area-inset-top)); border-bottom: 1px solid var(--rd-line); }
.rd-foot { padding-bottom: max(6px, env(safe-area-inset-bottom)); border-top: 1px solid var(--rd-line); }
.rd-btn { flex: none; min-width: 44px; height: 44px; border-radius: 12px; border: 0; background: transparent; color: var(--rd-fg); cursor: pointer; font: 400 26px/1 var(--display); }
.rd-btn.rd-aa { font: 600 18px/1 var(--display); }
.rd-btn.rd-toc { font-size: 20px; }
.rd-btn:disabled { opacity: .3; cursor: default; }
.rd-title { flex: 1; min-width: 0; margin: 0; text-align: center; font: italic 600 17px/1.2 var(--display); color: var(--rd-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; outline: none; }
.rd-text { max-width: 36em; margin: 0 auto; padding: 22px 20px 8px; font: 500 var(--rd-size)/1.65 var(--display); overflow-wrap: break-word; }
.rd-text p { margin: 0 0 .85em; }
.rd-text h1, .rd-text h2, .rd-text h3, .rd-text h4 { font-family: var(--display); font-weight: 600; line-height: 1.2; text-align: center; margin: 1.2em 0 .8em; color: var(--rd-accent); }
.rd-text h1 { font-size: 1.6em; } .rd-text h2 { font-size: 1.35em; } .rd-text h3 { font-size: 1.15em; }
.rd-text .r-center { text-align: center; }
.rd-text img { display: block; max-width: 100%; height: auto; margin: 1em auto; border-radius: 4px; }
.rd-text blockquote { margin: 1em 0; padding-left: 1em; border-left: 2px solid var(--rd-line); font-style: italic; }
.rd-text hr { border: 0; text-align: center; margin: 1.6em 0; }
.rd-text hr::after { content: "❦"; color: var(--rd-accent); }
.rd-text a { color: var(--rd-accent); }
.rd-text table { border-collapse: collapse; max-width: 100%; display: block; overflow-x: auto; }
.rd-text td, .rd-text th { border: 1px solid var(--rd-line); padding: .3em .5em; }
.rd-end { max-width: 36em; margin: 0 auto; padding: 8px 20px 40px; text-align: center; }
.rd-nextch { min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--rd-line); background: var(--rd-chip); color: var(--rd-accent); font: italic 600 18px/1 var(--display); cursor: pointer; }
.rd-fin { margin: 10px 0 16px; font: italic 600 22px/1.3 var(--display); color: var(--rd-accent); }
.rd-where { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rd-ch { max-width: 100%; font: 700 12px/1.2 var(--body); color: var(--rd-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rd-meter { width: min(220px, 70%); height: 3px; border-radius: 3px; background: var(--rd-line); overflow: hidden; }
.rd-meter i { display: block; height: 100%; width: 0; background: var(--rd-accent); }
.rd-pop { position: absolute; z-index: 2; top: calc(max(6px, env(safe-area-inset-top)) + 52px); right: 8px; left: 8px; max-width: 420px; margin-left: auto;
  padding: 12px; border-radius: 16px; background: var(--rd-bg); border: 1px solid var(--rd-line); box-shadow: 0 16px 40px rgba(0,0,0,.4); }
.rd-contents { max-height: 65vh; overflow-y: auto; }
.rd-pop-title { margin: 2px 6px 8px; font: 800 11px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--rd-muted); }
.rd-row { display: flex; align-items: center; gap: 8px; padding: 6px; }
.rd-row span { flex: 1; font: 700 14px/1 var(--body); color: var(--rd-muted); }
.rd-chip { min-width: 64px; min-height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--rd-line); background: var(--rd-chip); color: var(--rd-fg); font: 700 15px/1 var(--body); cursor: pointer; }
.rd-chip[aria-pressed="true"] { border-color: var(--rd-accent); color: var(--rd-accent); box-shadow: inset 0 0 0 1px var(--rd-accent); }
.rd-toclist { list-style: none; margin: 0; padding: 0; }
.rd-tocitem { width: 100%; min-height: 44px; padding: 8px 10px 8px calc(10px + var(--depth, 0) * 16px); border: 0; border-radius: 10px; background: transparent; color: var(--rd-fg); text-align: left; font: 500 17px/1.3 var(--display); cursor: pointer; }
.rd-tocitem:hover, .rd-tocitem:focus-visible { background: rgba(169,128,79,.14); }
li[style*="--depth:"] .rd-tocitem { font-size: 16px; }

/* the Library in the Grand Hall: a tag on the right-hand shelves, and a fourth card under "Choose a door" */
button.hotspot { border: 0; padding: 0; background: none; cursor: pointer; font: inherit; color: inherit; }
.hall-scene.painted .hs-lib { z-index: 3; }
.hs-chip-lib { right: 6%; top: 34%; left: auto; align-items: flex-end; text-align: right;
  background: linear-gradient(180deg, #FFF8EE, #F3E2CF); color: #6B2C42; border: 1px solid #C9A06C; box-shadow: 0 6px 14px rgba(60,20,30,.35); }
.hs-chip-lib .hs-up { color: #A9804F; }
.hs-chip-lib .hs-book::before { width: 8px; height: 10px; border: 0; border-radius: 1px; transform: none; background: linear-gradient(90deg, #8E3D5A 0 2px, #C9A06C 2px); }
button.dest { width: 100%; border-width: 1px; border-style: solid; cursor: pointer; text-align: left; font: inherit; }
.dest-lib { background: linear-gradient(135deg, #FFF8EE, #F3E2CF); color: #4A2230; border-color: #D9B98E; box-shadow: 0 10px 24px rgba(140,96,60,.16); }
.dest-lib .dest-where, .dest-lib .dest-go { color: #A9804F; }
.dest-books { display: flex; align-items: flex-end; justify-content: center; gap: 3px; padding: 14px 10px 12px; background: linear-gradient(180deg, #5A1A2E, #3A1222); }
.dest-books i { width: 11px; border-radius: 2px 2px 1px 1px; box-shadow: inset -2px 0 0 rgba(0,0,0,.18), inset 0 6px 0 rgba(226,192,143,.55); }
.dest-books i:nth-child(1) { height: 44px; background: #E2C08F; }
.dest-books i:nth-child(2) { height: 52px; background: #C04C74; }
.dest-books i:nth-child(3) { height: 38px; background: #F4E4D4; transform: rotate(-8deg); transform-origin: 50% 100%; }
.dest-books i:nth-child(4) { height: 48px; background: #8E1F3D; }

/* ================================================================== 3D MOMENTS */
/* the snowflake's fragments tip and spin in real 3D */
.flake-art { perspective: 900px; }
.frag { backface-visibility: visible; will-change: transform; }
/* ice crystals and a shockwave at the break */
.burst i.shard { border-radius: 0; box-shadow: none; backface-visibility: visible;
  clip-path: polygon(50% 0, 100% 34%, 62% 100%, 38% 100%, 0 34%);
  background: linear-gradient(90deg, var(--c) 0 48%, var(--d) 52% 100%); }
.burst i.glint { border-radius: 0; box-shadow: none;
  clip-path: polygon(50% 0, 57% 43%, 100% 50%, 57% 57%, 50% 100%, 43% 57%, 0 50%, 43% 43%);
  background: radial-gradient(circle, #FFFFFF 0 22%, #FFE7A8 40%, var(--d) 75%); }
.burst i.shock { border-radius: 50%; border: 3px solid #EDA3BF; background: none;
  box-shadow: 0 0 22px rgba(214,104,146,.55), inset 0 0 18px rgba(255,255,255,.9); }
/* walking between rooms: the room's colour washes over while the camera travels */
.travel-veil { position: fixed; inset: 0; z-index: 85; pointer-events: none; opacity: 0; }
.scene3d .amb, .scene3d [data-ix] { transition: opacity .35s ease; }
.scene3d.zooming .amb, .scene3d.zooming [data-ix] { opacity: 0; transition-duration: .2s; }
.hall-sign, .hall-scrim, .replay-mini { transition: opacity .3s ease; }
.hall.leaving .hall-sign, .hall.leaving .hall-scrim, .hall.leaving .replay-mini { opacity: 0; }
.rm .travel-veil { display: none; }

/* first arrival in a room: the card waits, then rises in with the welcome scene */
.view.enter .talk.arriving { animation: none; opacity: 0; pointer-events: none; }
.view.enter .talk.risen { animation: rise .6s cubic-bezier(.2, .7, .2, 1) both; }
/* the hall's welcome bubbles step aside while she walks to a door */
.travel-on .toast { opacity: 0 !important; transition: opacity .2s ease; pointer-events: none; }

/* a room's 3D is rebuilt on each visit under the travel veil: show it at once (the still picture beneath is identical) */
.scene3d:not(.scene-hall) .scene-gl { transition: none; }

/* ================================================================== THE BIRTHDAY GREETING */
.bday {
  position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; overflow: hidden;
  padding: 20px max(16px, env(safe-area-inset-left, 0px)) 20px max(16px, env(safe-area-inset-right, 0px));
  background: radial-gradient(120% 80% at 50% 45%, rgba(255,244,248,.38) 0, rgba(103,55,77,.52) 70%, rgba(28,10,17,.62) 100%);
  animation: fadeIn .5s ease both;
}
.bday.closing { animation: bdayOut .38s ease both; }
.bday-sky { position: absolute; inset: 0; pointer-events: none; perspective: 760px; }
.bday-sky i { position: absolute; top: -40px; display: block; background: var(--c); will-change: transform, opacity; backface-visibility: visible; }
.bday-sky i.cf-rib { border-radius: 2px; background: linear-gradient(90deg, var(--c) 0 50%, var(--d) 50% 100%); }
.bday-sky i.cf-dot { border-radius: 50%; }
.bday-sky i.cf-star { background: radial-gradient(circle, #FFFFFF 0 22%, #FFE7A8 42%, var(--d) 78%);
  clip-path: polygon(50% 0, 57% 43%, 100% 50%, 57% 57%, 50% 100%, 43% 57%, 0 50%, 43% 43%); }
.bday-card {
  position: relative; width: min(340px, 100%); padding: 30px 24px 26px; text-align: center; border-radius: 22px;
  background: linear-gradient(180deg, #FFFDFB 0, #FBEFF3 100%);
  border: 1px solid rgba(199,154,107,.6);
  box-shadow: inset 0 0 0 6px #FFFDFB, inset 0 0 0 7px rgba(199,154,107,.45), 0 26px 60px rgba(28,10,17,.38);
  animation: bdayIn 1s cubic-bezier(.2, .8, .2, 1) both;
}
.bday-flake { width: 34px; height: 34px; color: var(--gold); display: block; margin: 0 auto 4px; animation: bdaySpin 26s linear infinite; }
.bday-title { margin: 0; font-weight: 400; }
.bday-happy { display: block; padding: 6px 4px 2px; font: 400 clamp(44px, 14.5vw, 62px)/1.08 var(--script); color: #9E4D70;
  text-shadow: 0 1px 0 #FFFFFF, 0 0 18px rgba(233,157,186,.35); animation: bdayWrite 1.25s .35s cubic-bezier(.45, .05, .35, 1) both; }
.bday-name { display: block; margin-top: 10px; padding-left: .32em; font: 600 clamp(19px, 6.2vw, 25px)/1 var(--display); letter-spacing: .32em;
  text-transform: uppercase; color: var(--plum); animation: bdayName .9s 1.3s cubic-bezier(.2, .8, .2, 1) both; }
.bday-rule { display: block; width: 130px; height: 1px; margin: 18px auto 22px; background: linear-gradient(90deg, transparent, var(--gold), transparent);
  animation: bdayRule .8s 1.6s ease both; }
.bday-go { min-width: 170px; animation: fadeIn .5s 1.9s ease both; }
@keyframes bdayIn { from { opacity: 0; transform: perspective(900px) translateY(44px) rotateX(26deg) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes bdayOut { to { opacity: 0; } }
@keyframes bdayWrite { from { clip-path: inset(-30% 100% -30% -12%); } to { clip-path: inset(-30% -12% -30% -12%); } }
@keyframes bdayName { from { opacity: 0; letter-spacing: .6em; } to { opacity: 1; letter-spacing: .32em; } }
@keyframes bdayRule { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes bdaySpin { to { transform: rotate(360deg); } }
.rm .bday-card, .rm .bday-happy, .rm .bday-name, .rm .bday-rule, .rm .bday-go, .rm .bday-flake { animation: none; }
.rm .bday { animation: fadeIn .3s ease both; }
.rm .bday-sky { display: none; }
/* the room's labels live beside the painting, not inside it: hide them too while the camera settles */
.stage:has(.scene3d.zooming) .stage-objects { opacity: 0; transition-duration: .2s; }