/* ============================================================
   DREAM ARCHIVE
   A liminal, surreal dream-world game — eight fragments form an
   octagram; completing it transforms the world and opens a final
   meditation. Single file · vanilla JS · Web Audio · canvas.

   v1.3 — added "Rooms That Should Not Exist" (six small inhabitable
   rooms, each unlocked by recovering a particular dream) and five new
   dream-ritual secret unlocks (the wandering moon, the cat's shadow,
   the reversed constellation, the falling word, the changing title).
   ============================================================ */

:root{
  --void:#0a0818; --indigo:#161033; --indigo-2:#221a47; --indigo-glass:rgba(34,26,71,0.55);
  --lavender:#c4b3ec; --lavender-2:#ddd3f5; --lavender-dim:#8d80b8;
  --gold:#ecd79f; --gold-bright:#f6e9bf; --gold-deep:#c7ad6e;
  --ink:#eae4f7; --ink-soft:#b9b0d6;
  --serif-display:'Cormorant Garamond', Cormorant, 'Times New Roman', serif;
  --serif-body:'EB Garamond','Cormorant Garamond', Georgia, serif;
  --ring:0 0 0 1px rgba(196,179,236,0.18);
  --glow-gold:0 0 18px rgba(236,215,159,0.45), 0 0 42px rgba(236,215,159,0.20);
  --glow-lav:0 0 22px rgba(196,179,236,0.30);
  --ease-cinema:cubic-bezier(0.16, 1, 0.3, 1);
}
body.whole{ --void:#1b1644; --indigo:#2a2358; --indigo-2:#36296e; --lavender:#e3d9ff; --lavender-2:#f1ebff; --lavender-dim:#a99fd0; --ink:#f6f2ff; --ink-soft:#c8c0e6; }
body.awoken{ --void:#241d52; --gold:#f8edca; --gold-bright:#fdf6e0; }

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; height:100%; }
body{ background:var(--void); color:var(--ink); font-family:var(--serif-body); font-size:clamp(16px,1.6vw,19px); line-height:1.55; overflow:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; position:fixed; inset:0; transition:background-color 3s ease, color 3s ease; }
button{ font-family:inherit; color:inherit; cursor:pointer; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:4px; }
::selection{ background:rgba(236,215,159,0.30); color:#fff; }

/* atmosphere */
#atmosphere{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; transition:filter 3s ease; }
body.whole #atmosphere{ filter:brightness(1.16) saturate(1.05) hue-rotate(-8deg); }
body.awoken #atmosphere{ filter:brightness(1.3) saturate(1.0) hue-rotate(-12deg); }
/* parallax: the `translate` property composes cleanly with each layer's own transform animation,
   giving real spatial depth as the cursor/device moves. Driven by --px/--py (range ~ -1..1). */
.liquid{ position:absolute; inset:-25%; background:radial-gradient(60% 55% at 22% 28%, rgba(63,44,120,0.55), transparent 60%),radial-gradient(50% 50% at 80% 20%, rgba(40,30,84,0.55), transparent 62%),radial-gradient(65% 60% at 70% 85%, rgba(48,33,99,0.50), transparent 60%),radial-gradient(55% 55% at 18% 80%, rgba(30,22,64,0.55), transparent 62%); filter:saturate(118%); animation:liquidDrift 46s ease-in-out infinite alternate; translate:calc(var(--px,0)*14px) calc(var(--py,0)*14px); transition:translate .6s var(--ease-cinema); }
@keyframes liquidDrift{ 0%{ transform:translate3d(0,0,0) scale(1.02) rotate(0deg);} 100%{ transform:translate3d(2.5%,-2%,0) scale(1.08) rotate(4deg);} }
.fog{ position:absolute; border-radius:50%; background:radial-gradient(closest-side, rgba(196,179,236,0.14), transparent 72%); filter:blur(28px); mix-blend-mode:screen; transition:translate .7s var(--ease-cinema); }
.fog.a{ width:70vmax; height:70vmax; left:-18vmax; top:-12vmax; animation:fogA 64s ease-in-out infinite alternate; translate:calc(var(--px,0)*28px) calc(var(--py,0)*24px); }
.fog.b{ width:55vmax; height:55vmax; right:-14vmax; bottom:-10vmax; background:radial-gradient(closest-side, rgba(236,215,159,0.10), transparent 72%); animation:fogB 78s ease-in-out infinite alternate; translate:calc(var(--px,0)*-22px) calc(var(--py,0)*-18px); }
.fog.c{ width:48vmax; height:48vmax; left:34vw; top:30vh; animation:fogA 52s ease-in-out infinite alternate-reverse; translate:calc(var(--px,0)*20px) calc(var(--py,0)*-22px); }
@keyframes fogA{ from{ transform:translate(0,0);} to{ transform:translate(8vw,5vh);} }
@keyframes fogB{ from{ transform:translate(0,0);} to{ transform:translate(-7vw,-6vh);} }
#particles{ position:absolute; inset:0; width:100%; height:100%; translate:calc(var(--px,0)*8px) calc(var(--py,0)*8px); transition:translate .5s var(--ease-cinema); }
.floaters{ position:absolute; inset:0; translate:calc(var(--px,0)*36px) calc(var(--py,0)*32px); transition:translate .8s var(--ease-cinema); }
/* cursor dream-light — dynamic ambient lighting that follows the gaze (desktop + motion only) */
#dreamLight{ position:absolute; width:48vmax; height:48vmax; left:0; top:0; margin:-24vmax 0 0 -24vmax; border-radius:50%; pointer-events:none; opacity:0; mix-blend-mode:screen; background:radial-gradient(circle, rgba(196,179,236,.18), rgba(236,215,159,.06) 40%, transparent 68%); transition:opacity 1.4s ease; will-change:transform; }
body.lit-cursor #dreamLight{ opacity:1; }
body.whole #dreamLight{ background:radial-gradient(circle, rgba(236,215,159,.16), rgba(196,179,236,.07) 42%, transparent 70%); }
/* cinematic vignette — frames the dream and adds depth without touching content legibility */
#vignette{ position:fixed; inset:0; z-index:1; pointer-events:none; background:radial-gradient(125% 120% at 50% 42%, transparent 50%, rgba(5,3,12,.55) 100%); transition:background 3s ease; }
body.whole #vignette{ background:radial-gradient(125% 120% at 50% 44%, transparent 56%, rgba(12,8,30,.42) 100%); }
body.nightmare-whole #vignette{ background:radial-gradient(125% 120% at 50% 42%, transparent 48%, rgba(20,4,8,.6) 100%); }

/* ===== ambient dream life ===== */
#dreamlife{ position:fixed; inset:0; z-index:2; pointer-events:none; overflow:hidden; }
#dreamlife > div{ position:absolute; }
#ghostLine{ position:fixed; left:50%; top:60%; transform:translate(-50%,-50%) scale(.98); z-index:35; pointer-events:none; max-width:80vw; text-align:center; font-family:var(--serif-display); font-style:italic; font-size:clamp(1.05rem,3.3vw,1.65rem); letter-spacing:.05em; color:rgba(214,205,240,0); text-shadow:0 0 26px rgba(196,179,236,.45); transition:color 1.4s ease, transform 1.6s var(--ease-cinema); }
#ghostLine.show{ color:rgba(214,205,240,.6); transform:translate(-50%,-50%) scale(1); }

/* cursor stars */
.cur-star{ position:fixed; z-index:60; pointer-events:none; color:var(--gold-bright); font-size:9px; line-height:1; margin:-4px 0 0 -4px; opacity:.9; animation:curStar 1.05s ease-out forwards; }
@keyframes curStar{ 0%{ transform:translateY(0) scale(1) rotate(0); opacity:.85; } 100%{ transform:translateY(15px) scale(.2) rotate(40deg); opacity:0; } }

/* drifting sprites */
.dl-door{ top:32%; left:-90px; width:60px; height:100px; opacity:0; animation:dlDrift 18s linear forwards; }
.dl-eyecloud{ top:20%; left:-140px; width:120px; height:72px; opacity:0; animation:dlDrift 23s linear forwards; }
.dl-fish{ top:62%; left:-90px; width:72px; height:40px; opacity:0; mix-blend-mode:screen; animation:dlDrift 27s linear forwards; }
@keyframes dlDrift{ 0%{ opacity:0; transform:translateX(0) translateY(0);} 9%{ opacity:.66;} 50%{ transform:translateX(58vw) translateY(-10px);} 88%{ opacity:.66;} 100%{ opacity:0; transform:translateX(120vw) translateY(4px);} }
.dl-rabbit{ bottom:13%; left:-60px; width:44px; height:44px; opacity:0; animation:dlDart 3.6s ease-in forwards; }
@keyframes dlDart{ 0%{ opacity:0; transform:translateX(0) translateY(0);} 8%{ opacity:.9;} 25%{ transform:translateX(26vw) translateY(-14px);} 50%{ transform:translateX(52vw) translateY(0);} 75%{ transform:translateX(78vw) translateY(-12px);} 92%{ opacity:.9;} 100%{ opacity:0; transform:translateX(114vw) translateY(0);} }
.dl-moth{ width:22px; height:22px; opacity:0; animation:mothFlit var(--mdur,7s) ease-in-out forwards; }
@keyframes mothFlit{ 0%{ opacity:0; } 14%{ opacity:.8; } 80%{ opacity:.7; } 100%{ opacity:0; transform:translate(var(--mx,18px),var(--my,-34px)); } }
.dl-moth .mw{ transform-origin:11px 11px; animation:mothWing .16s ease-in-out infinite alternate; }
@keyframes mothWing{ from{ transform:scaleX(1);} to{ transform:scaleX(.45);} }
.dl-archivist{ width:42px; height:58px; opacity:0; top:34%; right:-70px; left:auto; animation:dlArchivist 11s ease-in-out forwards; }
@keyframes dlArchivist{ 0%{ opacity:0; transform:translateX(0) translateY(0);} 12%{ opacity:.92; transform:translateX(-10vw) translateY(-6px);} 50%{ transform:translateX(-22vw) translateY(4px);} 80%{ opacity:.9; transform:translateX(-30vw) translateY(-4px);} 100%{ opacity:0; transform:translateX(-44vw) translateY(0);} }
.title.flicker{ animation:titleFlk 1.5s ease; }
@keyframes titleFlk{ 0%,100%{ opacity:1; } 20%{ opacity:.4; } 40%{ opacity:.85; } 60%{ opacity:.5; } }

/* sleep cat (idle) */
#sleepCat{ position:fixed; right:5vw; bottom:7vh; width:118px; height:88px; z-index:4; opacity:0; transform:translateY(16px) scale(.96); transition:opacity 2s ease, transform 2s var(--ease-cinema); pointer-events:none; }
#sleepCat.show{ opacity:.94; transform:translateY(0) scale(1); }
#sleepCat .breath{ transform-origin:62px 64px; animation:catBreath 4.8s ease-in-out infinite; }
@keyframes catBreath{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.03,1.05);} }

/* idle dream mode */
body.idle-dream #atmosphere{ filter:brightness(.68) saturate(.85) blur(1.4px); }
body.idle-dream #dreamLight{ opacity:.38; }
body.idle-dream .fog{ filter:blur(42px); }
body.idle-dream #vignette{ background:radial-gradient(120% 120% at 50% 46%, transparent 36%, rgba(4,3,10,.74) 100%); }

/* ===== dream weather ===== */
#weatherBg{ position:fixed; inset:0; z-index:2; pointer-events:none; overflow:hidden; }
#weatherFg{ position:fixed; inset:0; z-index:12; pointer-events:none; overflow:hidden; }
#weatherDawn{ position:fixed; left:0; right:0; bottom:0; height:42vh; z-index:2; pointer-events:none; opacity:0; transition:opacity 3.5s ease; background:radial-gradient(120% 100% at 50% 120%, rgba(248,206,140,.32), rgba(214,128,96,.16) 42%, transparent 72%); }
body.weather-dawn #weatherDawn{ opacity:1; }
#weatherGlass{ position:fixed; inset:0; z-index:3; pointer-events:none; opacity:0; transition:opacity 3s ease; backdrop-filter:blur(3px) saturate(1.05); -webkit-backdrop-filter:blur(3px) saturate(1.05); background:linear-gradient(160deg, rgba(160,170,210,.05), rgba(120,130,180,.03)); }
body.weather-glass #weatherGlass{ opacity:1; }
body.weather-glass #app{ filter:saturate(.96); }

/* moon rain — glowing drops falling upward */
.wx-drop{ position:absolute; bottom:-8vh; width:2px; height:42px; border-radius:2px; background:linear-gradient(to top, rgba(196,179,236,0), rgba(210,224,255,.7) 60%, rgba(236,240,255,.95)); box-shadow:0 0 6px rgba(196,210,255,.5); animation:wxRainUp linear infinite; opacity:.7; }
@keyframes wxRainUp{ 0%{ transform:translateY(0); opacity:0; } 10%{ opacity:.8; } 100%{ transform:translateY(-118vh); opacity:0; } }

/* paper snow — drifting scraps, clickable */
.wx-paper{ position:absolute; top:-6vh; width:18px; height:24px; pointer-events:auto; cursor:pointer; background:linear-gradient(135deg, rgba(244,238,222,.92), rgba(214,206,184,.88)); border:1px solid rgba(120,108,84,.3); border-radius:2px; box-shadow:0 2px 6px rgba(0,0,0,.25); animation:wxPaperFall linear infinite; transition:transform .25s, box-shadow .25s; }
.wx-paper::before{ content:""; position:absolute; left:3px; right:3px; top:5px; height:1px; background:rgba(120,108,84,.4); box-shadow:0 4px 0 rgba(120,108,84,.3), 0 8px 0 rgba(120,108,84,.22), 0 12px 0 rgba(120,108,84,.16); }
.wx-paper:hover{ transform:scale(1.25) rotate(8deg); box-shadow:0 0 16px rgba(236,215,159,.6); }
@keyframes wxPaperFall{ 0%{ transform:translateY(0) translateX(0) rotate(0deg); opacity:0; } 8%{ opacity:.95; } 92%{ opacity:.9; } 100%{ transform:translateY(114vh) translateX(var(--wx-sway,6vw)) rotate(var(--wx-spin,220deg)); opacity:0; } }

/* star pollen — gold motes drifting up; completed fragments glow warmer */
.wx-mote{ position:absolute; bottom:-4vh; width:5px; height:5px; border-radius:50%; background:radial-gradient(circle, rgba(248,233,191,.95), rgba(236,215,159,.2) 70%, transparent); box-shadow:0 0 8px rgba(236,215,159,.7); animation:wxMote linear infinite; }
@keyframes wxMote{ 0%{ transform:translateY(0) translateX(0); opacity:0; } 14%{ opacity:.9; } 86%{ opacity:.7; } 100%{ transform:translateY(-112vh) translateX(var(--wx-sway,3vw)); opacity:0; } }
body.weather-pollen .portal.collected{ box-shadow:inset 0 1px 0 rgba(248,238,202,.16), 0 0 40px rgba(236,215,159,.2), inset 0 0 26px rgba(236,215,159,.1); }

/* weather sign — names the change as it arrives */
#weatherSign{ position:fixed; left:50%; top:calc(4.6rem + env(safe-area-inset-top)); transform:translate(-50%,-12px); z-index:29; pointer-events:none; font-family:var(--serif-display); font-size:.82rem; letter-spacing:.22em; text-transform:uppercase; color:var(--lavender-dim); opacity:0; transition:opacity 1.4s ease, transform 1.4s var(--ease-cinema); white-space:nowrap; }
#weatherSign.show{ opacity:.85; transform:translate(-50%,0); }
#weatherSign b{ color:var(--gold); font-weight:500; }

/* ===== dream language glossary ===== */
.lang-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(128px,1fr)); gap:.65rem; width:min(96vw,760px); margin-bottom:1rem; }
.lang-cell{ padding:1rem .7rem; border-radius:14px; text-align:center; background:linear-gradient(165deg, rgba(24,17,48,.6), rgba(12,8,28,.6)); border:1px solid rgba(196,179,236,.14); box-shadow:inset 0 1px 0 rgba(255,255,255,.05); transition:.4s var(--ease-cinema); }
.lang-cell.known{ border-color:rgba(236,215,159,.32); }
.lang-cell.unknown{ opacity:.5; }
.lang-glyph{ font-size:2rem; line-height:1; color:var(--lavender-2); }
.lang-cell.known .lang-glyph{ color:var(--gold-bright); text-shadow:var(--glow-gold); }
.lang-mean{ margin-top:.5rem; font-family:var(--serif-display); font-size:.9rem; color:var(--ink); letter-spacing:.02em; }
.lang-cell.unknown .lang-mean{ color:var(--lavender-dim); font-style:italic; }
.lang-sentence{ width:min(96vw,760px); margin:.1rem 0 1.4rem; padding:1.1rem 1.3rem; border-radius:14px; background:linear-gradient(160deg, rgba(20,14,42,.5), rgba(10,7,24,.5)); border:1px dashed rgba(196,179,236,.2); }
.lang-symbols{ font-size:1.6rem; letter-spacing:.34em; color:var(--gold); text-align:center; }
.lang-translation{ margin-top:.7rem; text-align:center; font-family:var(--serif-display); font-style:italic; font-size:1.04rem; color:var(--ink-soft); line-height:1.5; }
.lang-translation .w-lock{ color:var(--lavender-dim); opacity:.5; letter-spacing:.1em; }
.floater{ position:absolute; color:var(--lavender); opacity:0; font-size:2.4rem; filter:blur(.3px); text-shadow:0 0 16px rgba(196,179,236,.5); animation:rise linear infinite; user-select:none; }
@keyframes rise{ 0%{ transform:translateY(18vh) translateX(0) rotate(0deg) scale(.9); opacity:0; } 12%{ opacity:.5; } 85%{ opacity:.32; } 100%{ transform:translateY(-115vh) translateX(var(--sway,4vw)) rotate(var(--spin,40deg)) scale(1.05); opacity:0; } }

/* intro */
#intro{ position:fixed; inset:0; z-index:50; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.4rem; text-align:center; padding:2rem; background:radial-gradient(120% 100% at 50% 40%, rgba(22,16,51,.55), rgba(10,8,24,.92)); backdrop-filter:blur(2px); transition:opacity 1.1s ease, visibility 1.1s ease; }
#intro.gone{ opacity:0; visibility:hidden; }
.intro-mark{ font-size:clamp(2.5rem,7vw,4.4rem); line-height:1; color:var(--gold); text-shadow:var(--glow-gold); animation:breathe 6s ease-in-out infinite; }
@keyframes breathe{ 0%,100%{ opacity:.78; transform:scale(1);} 50%{ opacity:1; transform:scale(1.06);} }
#intro h1{ font-family:var(--serif-display); font-weight:500; font-size:clamp(2.6rem,8vw,5.2rem); margin:0; letter-spacing:.02em; color:var(--ink); text-shadow:0 2px 40px rgba(196,179,236,.35); }
#intro p{ margin:0; color:var(--ink-soft); font-style:italic; font-size:clamp(1rem,2.4vw,1.3rem); max-width:34ch; }
.enter-btn{ margin-top:.6rem; padding:.8rem 2.6rem; background:transparent; border:1px solid rgba(236,215,159,.55); border-radius:999px; color:var(--gold-bright); font-family:var(--serif-display); font-size:1.25rem; letter-spacing:.18em; text-transform:uppercase; transition:.4s; box-shadow:var(--glow-gold); }
.enter-btn:hover{ background:rgba(236,215,159,.10); border-color:var(--gold); transform:translateY(-1px); letter-spacing:.24em; }
.intro-hint{ font-size:.8rem; letter-spacing:.14em; color:var(--lavender-dim); text-transform:uppercase; }

/* app shell */
#app{ position:fixed; inset:0; z-index:10; opacity:0; transition:opacity 1.4s ease .2s; }
#app.live{ opacity:1; }
.scroll{ position:absolute; inset:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; }
.rail{ position:fixed; top:0; right:0; z-index:30; display:flex; gap:.4rem; padding:.7rem .9rem; }
.chip{ width:42px; height:42px; display:grid; place-items:center; background:var(--indigo-glass); border:1px solid rgba(196,179,236,.20); border-radius:50%; backdrop-filter:blur(6px); color:var(--lavender-2); font-size:1.15rem; box-shadow:inset 0 1px 0 rgba(255,255,255,.08); transition:.25s var(--ease-cinema), scale .18s var(--ease-cinema); }
.chip:active{ scale:.9; }
.chip:hover{ border-color:rgba(236,215,159,.5); color:var(--gold); }
.chip.off{ color:var(--lavender-dim); opacity:.6; }

/* hub */
#hub{ min-height:100%; display:flex; flex-direction:column; align-items:center; padding:clamp(2.4rem,6vh,4.5rem) 1.2rem 3.5rem; }
.crest{ font-size:1.5rem; color:var(--gold); text-shadow:var(--glow-gold); margin-bottom:.4rem; opacity:.9; }
.title{ font-family:var(--serif-display); font-weight:500; font-size:clamp(3rem,11vw,6.5rem); line-height:.95; margin:0; text-align:center; letter-spacing:.015em; color:var(--ink); text-shadow:0 2px 50px rgba(196,179,236,.30); }
.subtitle{ font-style:italic; color:var(--ink-soft); margin:.5rem 0 0; font-size:clamp(1.05rem,2.6vw,1.45rem); text-align:center; }
.status{ margin:1.8rem 0 .4rem; display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; align-items:center; justify-content:center; font-size:.96rem; }
.status .who{ font-family:var(--serif-display); letter-spacing:.16em; text-transform:uppercase; color:var(--lavender); font-size:.86rem; }
.status .dot{ color:var(--lavender-dim); }
.status .frag{ color:var(--gold-bright); font-variant-numeric:tabular-nums; }
.status .frag b{ font-size:1.15rem; }
.status .remember{ color:var(--ink-soft); font-style:italic; }

/* rebuilding world — cloud fragments coalescing into one whole */
.world-shell{ position:relative; width:min(92vw,470px); margin:1.1rem auto .2rem; }
#worldBtn{ display:block; width:100%; padding:0; border:none; background:none; }
#worldBtn[disabled]{ cursor:default; }
.world-shell svg{ width:100%; height:auto; overflow:visible; display:block; }

/* faint rim of the moon-to-be */
#wholeRim{ transition:stroke 2s ease, opacity 2s ease; }

/* the eight sectors of the central whole — each fills as its dream returns */
.sector{ opacity:0; transition:opacity 1.7s cubic-bezier(.25,.7,.3,1); }
.sector.on{ opacity:1; animation:sectorShimmer 8s ease-in-out infinite; }
@keyframes sectorShimmer{ 0%,100%{ filter:brightness(.96);} 50%{ filter:brightness(1.14);} }

/* the complete moon, revealed when whole */
#wholeMoon{ opacity:0; transition:opacity 2.6s ease; transform-box:fill-box; transform-origin:center; }
body.whole #wholeMoon{ opacity:.95; animation:moonBreathe 9s ease-in-out infinite; }
@keyframes moonBreathe{ 0%,100%{ transform:scale(1); filter:brightness(1);} 50%{ transform:scale(1.022); filter:brightness(1.1);} }
body.awoken #wholeMoon{ opacity:1; }
#wholeGlow{ opacity:0; transition:opacity 2.6s ease; }
body.whole #wholeGlow{ opacity:1; }

/* soft threads drawing each fragment toward the whole */
.w-thread{ stroke:var(--gold); stroke-width:1; opacity:0; stroke-dasharray:2.5 7; transition:opacity 1.5s ease; }
.w-thread.on{ opacity:.38; animation:threadFlow 13s linear infinite; }
@keyframes threadFlow{ to{ stroke-dashoffset:-160; } }

/* cloud fragments at the perimeter */
.cloud-frag .puff{ fill:rgba(141,128,184,.20); transition:fill 1.5s ease; }
.cloud-frag .puff-hi{ fill:rgba(196,179,236,.16); transition:fill 1.5s ease; }
.cloud-frag.collected .puff{ fill:rgba(236,215,159,.46); }
.cloud-frag.collected .puff-hi{ fill:rgba(248,238,202,.62); }
.cloud-bob{ animation:cloudBob 9s ease-in-out infinite; }
@keyframes cloudBob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-3px);} }
.cloud-frag.collected .cloud-bob{ animation-duration:6.5s; }
.world-shell .glyph{ font-family:var(--serif-display); fill:var(--lavender-dim); font-size:17px; text-anchor:middle; transition:fill 1.2s ease; pointer-events:none; }
.world-shell .glyph.on{ fill:#3a2c0e; }
#g-core{ fill:var(--lavender-dim); font-size:24px; }
#g-core.on{ fill:#3a2c0e; }

/* bloom rays/rings behind the whole */
#worldBloom{ opacity:0; transition:opacity 3s ease; }
.bloom-ray{ stroke:var(--gold); stroke-width:1; opacity:0; }
.bloom-ring{ fill:none; stroke:var(--gold); stroke-width:.7; opacity:0; }
body.whole #worldBloom{ opacity:1; }
body.whole .bloom-ray{ opacity:.24; transform-origin:200px 200px; animation:spin 70s linear infinite; }
body.whole .bloom-ring{ opacity:.2; transform-origin:200px 200px; animation:spinR 90s linear infinite; }
body.awoken .bloom-ray{ opacity:.36; }
@keyframes spin{ to{ transform:rotate(360deg);} }
@keyframes spinR{ to{ transform:rotate(-360deg);} }
.world-hint{ text-align:center; color:var(--lavender-dim); font-style:italic; font-size:.92rem; margin:.3rem auto 0; max-width:44ch; }
.world-cta{ display:none; text-align:center; margin:.7rem auto 0; font-family:var(--serif-display); font-size:1.25rem; letter-spacing:.08em; color:var(--gold-bright); }
body.whole:not(.awoken) .world-cta{ display:block; animation:ctaPulse 2.6s ease-in-out infinite; }
@keyframes ctaPulse{ 0%,100%{ opacity:.65; } 50%{ opacity:1; text-shadow:var(--glow-gold); } }
body.whole:not(.awoken) #worldBtn{ cursor:pointer; }

/* ===== nightmare world — fragments coalescing into a BLOOD MOON ===== */
.nworld-shell{ position:relative; width:min(86vw,400px); margin:1.2rem auto .2rem; }
#nmWorldBtn{ display:block; width:100%; padding:0; border:none; background:none; }
#nmWorldBtn[disabled]{ cursor:default; }
.nworld-shell svg{ width:100%; height:auto; overflow:visible; display:block; }
#nmWholeRim{ transition:stroke 2s ease; }
.nsector{ opacity:0; transition:opacity 1.7s cubic-bezier(.25,.7,.3,1); }
.nsector.on{ opacity:1; animation:nsectorShimmer 7s ease-in-out infinite; }
@keyframes nsectorShimmer{ 0%,100%{ filter:brightness(.9);} 50%{ filter:brightness(1.2);} }
#nmWholeMoon{ opacity:0; transition:opacity 2.6s ease; transform-box:fill-box; transform-origin:center; }
body.nightmare-whole #nmWholeMoon{ opacity:.97; animation:bloodMoonBreathe 7s ease-in-out infinite; }
@keyframes bloodMoonBreathe{ 0%,100%{ transform:scale(1); filter:brightness(.92) saturate(1.1);} 50%{ transform:scale(1.03); filter:brightness(1.18) saturate(1.3);} }
#nmWholeGlow{ opacity:0; transition:opacity 2.6s ease; }
body.nightmare-whole #nmWholeGlow{ opacity:1; }
.nw-thread{ stroke:#b8313e; stroke-width:1; opacity:0; stroke-dasharray:2.5 7; transition:opacity 1.5s ease; }
.nw-thread.on{ opacity:.42; animation:threadFlow 11s linear infinite; }
.ncloud-frag .puff{ fill:rgba(72,26,34,.34); transition:fill 1.5s ease; }
.ncloud-frag .puff-hi{ fill:rgba(120,40,50,.22); transition:fill 1.5s ease; }
.ncloud-frag.collected .puff{ fill:rgba(176,42,54,.5); }
.ncloud-frag.collected .puff-hi{ fill:rgba(224,72,80,.6); }
.ncloud-frag .cloud-bob{ animation:cloudBob 8s ease-in-out infinite; }
.ncloud-frag.collected .cloud-bob{ animation-duration:5.5s; }
.nworld-shell .glyph{ font-family:var(--serif-display); fill:rgba(150,90,100,.7); font-size:17px; text-anchor:middle; transition:fill 1.2s ease; pointer-events:none; }
.nworld-shell .glyph.on{ fill:#2a0c10; }
#nm-g-core{ fill:rgba(150,90,100,.7); font-size:24px; }
#nm-g-core.on{ fill:#1c0608; }
#nmWorldBloom{ opacity:0; transition:opacity 3s ease; }
.nbloom-ray{ stroke:#c0303a; stroke-width:1; opacity:0; }
.nbloom-ring{ fill:none; stroke:#c0303a; stroke-width:.7; opacity:0; }
body.nightmare-whole #nmWorldBloom{ opacity:1; }
body.nightmare-whole .nbloom-ray{ opacity:.3; transform-origin:200px 200px; animation:spin 60s linear infinite; }
body.nightmare-whole .nbloom-ring{ opacity:.24; transform-origin:200px 200px; animation:spinR 80s linear infinite; }
.nworld-hint{ text-align:center; color:rgba(170,110,120,.75); font-style:italic; font-size:.9rem; margin:.3rem auto 0; max-width:44ch; }
.nworld-cta{ display:none; text-align:center; margin:.7rem auto 0; font-family:var(--serif-display); font-size:1.2rem; letter-spacing:.08em; color:#e85560; }
body.nightmare-whole:not(.escaped) .nworld-cta{ display:block; animation:bloodCtaPulse 2.4s ease-in-out infinite; }
@keyframes bloodCtaPulse{ 0%,100%{ opacity:.6; } 50%{ opacity:1; text-shadow:0 0 18px rgba(200,48,58,.7), 0 0 40px rgba(200,48,58,.35); } }
body.nightmare-whole:not(.escaped) #nmWorldBtn{ cursor:pointer; }
body.escaped .nworld-cta::after{ content:""; }

/* ===== The Corridor of Mirrors (nightmare escape) ===== */
#screen-escape{ background:radial-gradient(125% 120% at 50% 30%, rgba(46,10,16,.95), rgba(12,4,8,.99)); }
#screen-escape.lit{ background:radial-gradient(125% 120% at 50% 35%, rgba(70,16,24,.96), rgba(16,5,9,.99)); }
.escape-wrap{ min-height:100%; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding:clamp(2.2rem,6vh,3.6rem) 1.1rem 3rem; text-align:center; }
.escape-room{ font-family:var(--serif-display); letter-spacing:.18em; text-transform:uppercase; font-size:.8rem; color:#c0606a; margin-bottom:.4rem; }
.escape-title{ font-family:var(--serif-display); font-weight:500; font-size:clamp(2rem,7vw,3.2rem); margin:0 0 .3rem; color:#f0d0d4; text-shadow:0 0 30px rgba(180,40,50,.4); letter-spacing:.02em; }
.escape-sub{ color:rgba(210,160,165,.85); font-style:italic; font-size:1rem; margin:0 0 1.4rem; max-width:40ch; }
.mirror-hall{ display:flex; flex-wrap:wrap; gap:.7rem 1rem; justify-content:center; align-items:flex-end; width:min(96vw,860px); margin:.4rem auto 1.2rem; perspective:900px; }
.mirror{ position:relative; width:clamp(82px,20vw,118px); cursor:pointer; transition:transform .3s ease, filter .3s ease; background:none; border:none; padding:0; }
.mirror svg{ width:100%; height:auto; display:block; }
.mirror .mirror-frame{ transition:stroke .3s ease; }
.mirror:hover{ transform:translateY(-4px); }
.mirror.selected .mirror-frame{ stroke:#ffd9a0; stroke-width:2.4; filter:drop-shadow(0 0 10px rgba(255,200,120,.7)); }
.mirror.banished{ animation:mirrorBanish 1.3s ease forwards; pointer-events:none; }
@keyframes mirrorBanish{ 0%{ transform:scale(1); filter:brightness(1);} 30%{ transform:scale(1.06); filter:brightness(2.4) saturate(.4);} 100%{ transform:scale(.7); opacity:0; filter:brightness(3);} }
.mirror.wrong-shake{ animation:mirrorShake .5s ease; }
@keyframes mirrorShake{ 0%,100%{transform:translateX(0);} 25%{transform:translateX(-5px);} 75%{transform:translateX(5px);} }
.mirror.reveal-false .mirror-frame{ stroke:#e85560; stroke-width:2.4; filter:drop-shadow(0 0 12px rgba(220,50,60,.8)); }
.escape-actions{ margin:.4rem 0 .6rem; }
.incant-btn{ padding:.75rem 2.2rem; border-radius:999px; background:transparent; border:1px solid rgba(220,80,90,.5); color:#f0b0b6; font-family:var(--serif-display); font-size:1.15rem; letter-spacing:.12em; transition:.3s; }
.incant-btn:hover:not(:disabled){ background:rgba(200,48,58,.12); border-color:#e85560; color:#ffd9dc; box-shadow:0 0 20px rgba(200,48,58,.3); }
.incant-btn:disabled{ opacity:.32; cursor:default; }
.escape-msg{ min-height:1.6em; color:rgba(220,170,175,.9); font-style:italic; font-size:.98rem; margin:.3rem 0; transition:opacity .3s; }
.escape-progress{ display:flex; gap:.5rem; justify-content:center; margin-top:.6rem; }
.escape-progress span{ width:10px; height:10px; border-radius:50%; border:1px solid rgba(200,80,90,.5); transition:.4s; }
.escape-progress span.done{ background:#c0303a; border-color:#e85560; box-shadow:0 0 10px rgba(200,48,58,.6); }
.escape-progress span.cur{ border-color:#ffd9a0; }
.incant-line{ font-family:var(--serif-display); letter-spacing:.2em; color:#d88; font-size:.78rem; text-transform:uppercase; margin-top:.5rem; min-height:1.2em; opacity:.7; }

/* ===== True ending sequence ===== */
#escapeEnd{ position:fixed; inset:0; z-index:80; display:none; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:2.5rem 1.4rem; gap:1.1rem; }
#escapeEnd.show{ display:flex; }
.escape-end-phase{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.1rem; padding:2.5rem 1.4rem; opacity:0; transition:opacity 2.2s ease; pointer-events:none; }
.escape-end-phase.show{ opacity:1; pointer-events:auto; }
#escEndP1{ background:radial-gradient(120% 120% at 50% 45%, rgba(80,16,24,.7), rgba(20,5,9,.93)); }
.escape-end-phase .endmark{ font-size:3rem; line-height:1; animation:breathe 6s ease-in-out infinite; }
.escape-end-phase .endmark.blood{ color:#e85560; text-shadow:0 0 22px rgba(200,48,58,.7), 0 0 50px rgba(200,48,58,.35); }
.escape-end-phase .endmark.light{ color:#fff; text-shadow:0 0 30px rgba(255,250,235,.9), 0 0 70px rgba(255,245,220,.5); }
.escape-end-phase h2{ font-family:var(--serif-display); font-weight:500; font-size:clamp(2.2rem,7vw,3.6rem); margin:0; letter-spacing:.03em; }
#escEndP1 h2{ color:#f0c8cc; }
#escEndP2 h2{ color:#2a2410; }
.escape-end-phase p{ max-width:42ch; font-style:italic; font-size:1.15rem; line-height:1.6; margin:0; }
#escEndP1 p{ color:rgba(220,170,175,.92); }
#escEndP2 p{ color:#4a4020; font-size:1.3rem; }
#escEndP2 .end-acts button{ border-color:rgba(120,100,40,.5); color:#3a3215; }
#escEndP2 .end-acts button:hover{ background:rgba(180,150,60,.12); border-color:#7a6820; color:#2a2410; }
#trueLight{ position:fixed; inset:0; z-index:78; pointer-events:none; opacity:0; background:radial-gradient(circle at 50% 48%, rgba(255,253,248,1), rgba(255,250,238,.96) 38%, rgba(252,242,210,.7) 70%, rgba(250,238,200,.3) 100%); transition:opacity 3.4s ease; }
#trueLight.show{ opacity:1; }

/* portals */
.portals{ display:grid; gap:.95rem; width:min(94vw,920px); margin:1.5rem auto 0; grid-template-columns:repeat(4,1fr); transition:opacity 2s ease; }
body.whole .portals{ opacity:.78; }

/* ---------- dream map portal cards ----------------------- */
@keyframes portalFloat{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-4px);} }
.portal{
  position:relative; text-align:left; padding:1.15rem 1.1rem 1.2rem;
  background:linear-gradient(165deg, rgba(26,18,52,.75), rgba(12,8,30,.75));
  border:1px solid rgba(196,179,236,.16); border-radius:18px; backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  transition:filter .4s ease, border-color .35s, box-shadow .35s, transform .2s, scale .25s var(--ease-cinema);
  overflow:hidden; color:inherit;
  animation:portalFloat var(--pb-dur,9s) ease-in-out infinite var(--pb-del,0s);
}
.portal:active{ scale:.975; }
.portal::before{ content:""; position:absolute; inset:0; opacity:0; transition:.45s; background:radial-gradient(80% 90% at 80% 0%, rgba(236,215,159,.14), transparent 60%); pointer-events:none; }
/* uncompleted: desaturated, dark, mystery */
.portal:not(.collected){
  filter:saturate(.28) brightness(.62);
  border-color:rgba(196,179,236,.08);
}
.portal:not(.collected):hover{
  filter:saturate(.55) brightness(.88);
  border-color:rgba(196,179,236,.28);
  transform:translateY(-2px) !important;
}
/* completed: breathing gold aura with a warm lit top edge */
.portal.collected{
  border-color:rgba(236,215,159,.38);
  box-shadow:inset 0 1px 0 rgba(248,238,202,.13), 0 0 26px rgba(236,215,159,.10), inset 0 0 18px rgba(236,215,159,.05);
}
.portal.collected::after{
  content:""; position:absolute; inset:0; border-radius:18px;
  background:radial-gradient(70% 50% at 50% 0%, rgba(236,215,159,.10), transparent 70%);
  pointer-events:none;
}
.portal:hover{ transform:translateY(-3px); border-color:rgba(236,215,159,.42); box-shadow:var(--glow-lav); }
.portal:hover::before{ opacity:1; }
.portal .pg{ font-size:2.2rem; color:var(--lavender); text-shadow:var(--glow-lav); display:block; line-height:1; margin-bottom:.1rem; }
.portal h3{ font-family:var(--serif-display); font-weight:500; font-size:1.25rem; margin:.4rem 0 .15rem; letter-spacing:.01em; line-height:1.05; }
.portal .desc{ color:var(--ink-soft); font-size:.86rem; margin:0; min-height:3.4em; line-height:1.35; }
.portal .pstate{ position:absolute; top:.85rem; right:.9rem; font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--lavender-dim); }
.portal.collected .pstate{ color:var(--gold); }
.portal.collected .pg{ color:var(--gold-bright); text-shadow:var(--glow-gold); }

/* ---------- bonus dreams section ------------------------- */
.bonus-meta{ width:min(94vw,920px); margin:2.4rem auto 0; }
.bonus-section-title{ font-family:var(--serif-display); font-size:1.3rem; color:var(--lavender-dim); letter-spacing:.06em; margin:0 0 .32rem; opacity:.78; }
.bonus-hint{ color:var(--lavender-dim); font-style:italic; font-size:.88rem; margin:0 0 .9rem; }
.bonus-portals{ grid-template-columns:repeat(2,1fr); width:min(94vw,460px); }

.index-link{ margin:2rem auto .2rem; display:inline-flex; align-items:center; gap:.7rem; padding:.85rem 2rem; border-radius:999px; background:transparent; border:1px solid rgba(236,215,159,.45); color:var(--gold-bright); font-family:var(--serif-display); font-size:1.2rem; letter-spacing:.12em; transition:.35s; box-shadow:var(--glow-gold); }
.index-link:hover{ background:rgba(236,215,159,.08); transform:translateY(-2px); }
.wonder-link{ display:flex; border-color:rgba(180,150,224,.45); color:var(--lavender-2); box-shadow:0 0 18px rgba(150,120,200,.18); font-size:1.05rem; margin-top:.9rem; }
.wonder-link:hover{ background:rgba(150,120,200,.08); }
.hub-foot{ margin-top:2.2rem; color:var(--lavender-dim); font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; text-align:center; }

/* ===== The Room That Forgot Its Shape (Wonder Room) ===== */
#screen-wonder{ background:radial-gradient(130% 120% at 50% 30%, rgba(34,30,74,.95), rgba(12,10,30,.98)); }
.wonder-room{ position:relative; width:min(94vw,720px); aspect-ratio:7/6; margin:1rem auto .4rem; }
.wobj{ position:absolute; width:clamp(64px,15vw,112px); transform:translate(-50%,-50%); background:none; border:none; padding:0; cursor:pointer; transition:transform .4s var(--ease-cinema), filter .4s; filter:drop-shadow(0 6px 14px rgba(0,0,0,.4)); }
.wobj svg{ width:100%; height:auto; display:block; overflow:visible; }
.wobj:hover{ transform:translate(-50%,-50%) scale(1.12); filter:drop-shadow(0 0 16px rgba(196,179,236,.5)); z-index:5; }
.wobj:active{ scale:.94; }
.wobj.poked{ animation:wPoke .6s var(--ease-cinema); }
@keyframes wPoke{ 0%,100%{ rotate:0deg; } 30%{ rotate:-5deg; } 70%{ rotate:5deg; } }
.wlabel{ position:absolute; left:50%; bottom:-1.1rem; transform:translateX(-50%); white-space:nowrap; font-family:var(--serif-display); font-style:italic; font-size:.68rem; letter-spacing:.06em; color:var(--lavender-dim); opacity:0; transition:opacity .3s; pointer-events:none; }
.wobj:hover .wlabel{ opacity:.85; }
.wobj.float-b{ animation:wFloatB 7s ease-in-out infinite; }
.wobj.float-s{ animation:wFloatS 5.5s ease-in-out infinite; }
@keyframes wFloatB{ 0%,100%{ translate:0 0; } 50%{ translate:0 -10px; } }
@keyframes wFloatS{ 0%,100%{ translate:0 0; } 50%{ translate:0 6px; } }
.wonder-msg{ width:min(94vw,640px); margin:.6rem auto 2rem; min-height:3.2em; text-align:center; font-family:var(--serif-display); font-style:italic; font-size:clamp(1.05rem,3vw,1.35rem); line-height:1.5; color:var(--ink); text-shadow:0 0 24px rgba(196,179,236,.3); transition:opacity .5s ease, transform .5s var(--ease-cinema); }
.wonder-msg.swap{ opacity:0; transform:translateY(6px); }
@media (prefers-reduced-motion: reduce){ .wobj.float-b,.wobj.float-s{ animation:none; } }
.screen{ position:fixed; inset:0; z-index:40; display:none; background:radial-gradient(120% 110% at 50% 0%, rgba(22,16,51,.86), rgba(10,8,24,.96)); backdrop-filter:blur(4px); }
body.whole .screen{ background:radial-gradient(120% 110% at 50% 0%, rgba(34,27,80,.85), rgba(16,12,40,.95)); }
.screen.open{ display:block; animation:screenIn .6s ease; }
@keyframes screenIn{ from{ opacity:0; transform:scale(.985);} to{ opacity:1; transform:scale(1);} }
.screen .scroll{ display:flex; flex-direction:column; align-items:center; padding:clamp(1.2rem,3vh,2rem) 1rem 2.5rem; }
.screen-head{ width:min(94vw,760px); display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.6rem; }
.back{ display:inline-flex; align-items:center; gap:.5rem; padding:.5rem 1.1rem; border-radius:999px; background:var(--indigo-glass); border:1px solid rgba(196,179,236,.22); color:var(--lavender-2); font-size:.92rem; letter-spacing:.06em; transition:.25s; backdrop-filter:blur(6px); }
.back:hover{ border-color:rgba(236,215,159,.5); color:var(--gold); }
.screen-title{ font-family:var(--serif-display); font-weight:500; font-size:clamp(1.7rem,5vw,2.7rem); margin:0; text-align:right; line-height:1; }
.screen-sub{ width:min(94vw,760px); color:var(--ink-soft); font-style:italic; margin:.1rem 0 1.3rem; text-align:center; font-size:1.02rem; }
.game-msg{ min-height:1.6em; text-align:center; color:var(--gold-bright); font-style:italic; margin:.2rem 0 1rem; font-size:1.05rem; transition:.3s; }
.replay{ margin-top:1.4rem; padding:.6rem 1.6rem; border-radius:999px; background:transparent; border:1px solid rgba(196,179,236,.3); color:var(--lavender-2); letter-spacing:.08em; font-size:.95rem; transition:.25s; }
.replay:hover{ border-color:var(--gold); color:var(--gold); }

/* symbols */
.match-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:.7rem; width:min(94vw,460px); }
.card{ aspect-ratio:3/4; border:none; background:none; padding:0; perspective:800px; }
.card-inner{ position:relative; width:100%; height:100%; transition:transform .55s cubic-bezier(.3,.8,.3,1); transform-style:preserve-3d; }
.card.flipped .card-inner,.card.matched .card-inner{ transform:rotateY(180deg); }
.card-face{ position:absolute; inset:0; display:grid; place-items:center; border-radius:14px; backface-visibility:hidden; border:1px solid rgba(196,179,236,.2); }
.card-back{ background:linear-gradient(160deg, rgba(40,30,84,.9), rgba(22,16,51,.9)); color:var(--lavender-dim); font-size:1.5rem; }
.card-front{ transform:rotateY(180deg); background:linear-gradient(160deg, rgba(48,38,96,.95), rgba(28,20,60,.95)); color:var(--lavender-2); font-size:2.1rem; text-shadow:var(--glow-lav); }
.card.matched .card-front{ color:var(--gold-bright); text-shadow:var(--glow-gold); border-color:rgba(236,215,159,.6); animation:matched .8s ease; }
@keyframes matched{ 0%{ transform:rotateY(180deg) scale(1);} 40%{ transform:rotateY(180deg) scale(1.12);} 100%{ transform:rotateY(180deg) scale(1);} }
.match-meta{ display:flex; gap:1.6rem; margin:.2rem 0 1rem; color:var(--ink-soft); font-size:.95rem; letter-spacing:.04em; }
.match-meta b{ color:var(--lavender-2); }
.bonus-index-sub{ color:var(--lavender-dim); font-style:italic; font-size:.9rem; margin:0 0 1.1rem; }

/* constellation */
.constel{ position:relative; width:min(92vw,460px); aspect-ratio:1/1; border-radius:16px; border:1px solid rgba(196,179,236,.18); background:radial-gradient(circle at 50% 40%, rgba(28,20,60,.5), rgba(10,8,24,.6)); touch-action:manipulation; }
.constel svg{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.star{ position:absolute; width:34px; height:34px; transform:translate(-50%,-50%); border-radius:50%; border:none; background:radial-gradient(circle, rgba(221,211,245,.85), rgba(196,179,236,.15) 60%, transparent 70%); transition:.25s; -webkit-tap-highlight-color:transparent; }
.star::after{ content:"✦"; position:absolute; inset:0; display:grid; place-items:center; font-size:.95rem; color:rgba(255,255,255,.5); }
.star.next{ background:radial-gradient(circle, var(--gold-bright), rgba(236,215,159,.2) 60%, transparent 72%); box-shadow:var(--glow-gold); animation:starPulse 1.6s ease-in-out infinite; }
.star.next::after{ color:#3a2c0a; }
.star.lit{ background:radial-gradient(circle, var(--gold-bright), rgba(199,173,110,.3) 60%, transparent 72%); box-shadow:var(--glow-gold); }
@keyframes starPulse{ 0%,100%{ transform:translate(-50%,-50%) scale(1);} 50%{ transform:translate(-50%,-50%) scale(1.22);} }
.constel-line{ stroke:var(--gold); stroke-width:.7; opacity:.7; stroke-linecap:round; }

/* maze */
.maze-wrap{ position:relative; width:min(92vw,460px); }
#mazeCanvas{ width:100%; aspect-ratio:1/1; display:block; border-radius:16px; border:1px solid rgba(196,179,236,.18); background:rgba(10,8,24,.5); touch-action:none; }
.maze-meta{ margin:.7rem 0 .2rem; color:var(--ink-soft); letter-spacing:.04em; }
.maze-meta b{ color:var(--gold-bright); }
.dpad{ display:grid; grid-template-columns:repeat(3,56px); grid-template-rows:repeat(3,56px); gap:.4rem; margin:1rem auto 0; justify-content:center; }
.dpad button{ background:var(--indigo-glass); border:1px solid rgba(196,179,236,.22); border-radius:12px; color:var(--lavender-2); font-size:1.3rem; transition:.18s; -webkit-tap-highlight-color:transparent; }
.dpad button:active{ background:rgba(236,215,159,.16); border-color:var(--gold); }
.dpad .sp{ visibility:hidden; }
.maze-hint{ color:var(--lavender-dim); font-size:.85rem; margin-top:.8rem; text-align:center; letter-spacing:.04em; }

/* mirror */
.mirror-board{ position:relative; display:grid; gap:.45rem; width:min(94vw,500px); padding:.6rem; border-radius:16px; border:1px solid rgba(196,179,236,.18); background:rgba(14,10,34,.45); }
.mirror-board .divider{ position:absolute; top:6%; bottom:6%; left:50%; width:0; border-left:1px dashed rgba(236,215,159,.4); transform:translateX(-50%); pointer-events:none; }
.mcell{ aspect-ratio:1/1; border-radius:9px; border:1px solid rgba(196,179,236,.14); background:rgba(22,16,51,.5); transition:.2s; -webkit-tap-highlight-color:transparent; }
.mcell.read{ cursor:default; opacity:.9; }
.mcell.seed{ background:radial-gradient(circle at 40% 35%, rgba(196,179,236,.5), rgba(40,30,84,.6)); border-color:rgba(196,179,236,.4); box-shadow:inset 0 0 14px rgba(196,179,236,.25); }
.mcell.lit{ background:radial-gradient(circle at 40% 35%, var(--gold-bright), rgba(199,173,110,.4)); border-color:rgba(236,215,159,.6); box-shadow:var(--glow-gold); }

/* water (lights out) */
.water-board{ display:grid; gap:.5rem; width:min(86vw,420px); }
.wcell{ aspect-ratio:1/1; border-radius:50%; border:1px solid rgba(196,179,236,.18); background:radial-gradient(circle at 40% 35%, rgba(34,26,71,.7), rgba(12,9,30,.8)); transition:.25s; position:relative; overflow:hidden; -webkit-tap-highlight-color:transparent; }
.wcell.lit{ background:radial-gradient(circle at 40% 35%, rgba(196,179,236,.55), rgba(70,55,130,.5)); border-color:rgba(196,179,236,.55); box-shadow:0 0 16px rgba(196,179,236,.3), inset 0 0 18px rgba(196,179,236,.25); }
.wcell.ripple::after{ content:""; position:absolute; inset:0; border-radius:50%; border:2px solid rgba(236,215,159,.6); animation:ripple .6s ease-out; }
@keyframes ripple{ from{ transform:scale(.2); opacity:.9; } to{ transform:scale(1.6); opacity:0; } }
.water-meta{ margin:.2rem 0 1rem; color:var(--ink-soft); letter-spacing:.04em; }
.water-meta b{ color:var(--lavender-2); }

/* quiz */
.quiz{ width:min(94vw,600px); }
.q-count{ text-align:center; color:var(--lavender-dim); letter-spacing:.18em; text-transform:uppercase; font-size:.8rem; margin-bottom:.6rem; }
.q-text{ font-family:var(--serif-display); font-weight:500; font-size:clamp(1.4rem,4vw,2rem); text-align:center; margin:0 0 1.4rem; line-height:1.25; }
.q-opts{ display:flex; flex-direction:column; gap:.7rem; }
.q-opt{ text-align:left; padding:.95rem 1.3rem; border-radius:14px; background:linear-gradient(160deg, rgba(34,26,71,.6), rgba(18,13,42,.6)); border:1px solid rgba(196,179,236,.18); color:var(--ink); font-size:1.05rem; transition:.28s; line-height:1.4; }
.q-opt:hover{ border-color:rgba(236,215,159,.4); transform:translateX(3px); }
.q-opt.right{ border-color:rgba(236,215,159,.7); color:var(--gold-bright); background:linear-gradient(160deg, rgba(60,48,20,.5), rgba(34,26,8,.5)); }
.q-opt.wrong{ border-color:rgba(150,110,150,.5); opacity:.6; }
.q-opt:disabled{ cursor:default; }
.q-dots{ display:flex; gap:.5rem; justify-content:center; margin-top:1.2rem; }
.q-dots span{ width:10px; height:10px; border-radius:50%; background:rgba(196,179,236,.25); transition:.3s; }
.q-dots span.done{ background:var(--gold); box-shadow:var(--glow-gold); }
.q-dots span.cur{ outline:2px solid rgba(196,179,236,.5); outline-offset:2px; }

/* lullaby */
.orbs{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.1rem; width:min(80vw,360px); margin:.4rem auto 0; }
.orb{ aspect-ratio:1/1; border-radius:50%; border:1px solid rgba(196,179,236,.25); background:radial-gradient(circle at 35% 30%, rgba(196,179,236,.25), rgba(22,16,51,.85)); transition:.18s; -webkit-tap-highlight-color:transparent; }
.orb[data-i="0"]{ box-shadow:inset 0 0 30px rgba(196,179,236,.2); }
.orb[data-i="1"]{ box-shadow:inset 0 0 30px rgba(150,170,236,.2); }
.orb[data-i="2"]{ box-shadow:inset 0 0 30px rgba(236,215,159,.2); }
.orb[data-i="3"]{ box-shadow:inset 0 0 30px rgba(210,170,210,.2); }
.orb.lit{ transform:scale(1.05); border-color:var(--gold); background:radial-gradient(circle at 40% 35%, var(--gold-bright), rgba(199,173,110,.5)); box-shadow:var(--glow-gold); }
.orb:disabled{ cursor:default; }
.lullaby-meta{ display:flex; gap:1.6rem; justify-content:center; margin:1rem 0; color:var(--ink-soft); }
.lullaby-meta b{ color:var(--lavender-2); }
.lullaby-start{ margin-bottom:1.2rem; padding:.7rem 2rem; border-radius:999px; background:transparent; border:1px solid rgba(236,215,159,.45); color:var(--gold-bright); font-family:var(--serif-display); font-size:1.1rem; letter-spacing:.1em; transition:.3s; }
.lullaby-start:hover{ background:rgba(236,215,159,.1); }

/* falling */
.fall-wrap{ position:relative; width:min(92vw,460px); }
#fallCanvas{ width:100%; aspect-ratio:3/4; max-height:62vh; display:block; border-radius:16px; border:1px solid rgba(196,179,236,.18); background:linear-gradient(180deg, rgba(20,14,46,.5), rgba(10,8,24,.6)); touch-action:none; }
.fall-meta{ margin:.7rem 0 .2rem; color:var(--ink-soft); letter-spacing:.04em; }
.fall-meta b{ color:var(--gold-bright); }
.fall-hint{ color:var(--lavender-dim); font-size:.85rem; margin-top:.7rem; text-align:center; }

/* the sleeping index */
.index-grid{ display:grid; gap:1.1rem; width:min(96vw,860px); grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); }
.dream{ position:relative; padding:1.4rem 1.5rem 1.6rem; border-radius:18px; overflow:hidden; background:linear-gradient(165deg, rgba(34,26,71,.62), rgba(16,11,38,.62)); border:1px solid rgba(196,179,236,.16); backdrop-filter:blur(6px); min-height:200px; }
.dream.locked{ filter:saturate(.4); }
.dream .num{ font-family:var(--serif-display); color:var(--lavender-dim); letter-spacing:.2em; font-size:.78rem; }
.dream .sigil{ position:absolute; top:1.1rem; right:1.3rem; font-size:1.8rem; color:var(--lavender-dim); }
.dream.unlocked .sigil{ color:var(--gold-bright); text-shadow:var(--glow-gold); }
.dream h4{ font-family:var(--serif-display); font-weight:500; font-size:1.45rem; margin:.5rem 0 .6rem; }
.dream p{ margin:0; color:var(--ink-soft); font-size:.96rem; font-style:italic; line-height:1.5; }
.dream.locked h4{ color:var(--lavender-dim); }
.dream.locked .lockmsg{ color:var(--lavender-dim); font-style:italic; font-size:.92rem; }
.dream.unlocked{ border-color:rgba(236,215,159,.34); }
.dream.final.unlocked{ grid-column:1/-1; border-color:rgba(236,215,159,.6); box-shadow:var(--glow-gold); background:linear-gradient(165deg, rgba(54,42,18,.5), rgba(24,17,8,.6)); }
.marks-title{ width:min(96vw,860px); font-family:var(--serif-display); font-size:1.5rem; color:var(--lavender); margin:2.4rem 0 .9rem; letter-spacing:.04em; }
.marks{ width:min(96vw,860px); display:flex; flex-wrap:wrap; gap:.7rem; }
.mark{ padding:.55rem 1.1rem; border-radius:999px; font-size:.9rem; background:rgba(34,26,71,.5); border:1px solid rgba(196,179,236,.16); color:var(--lavender-dim); }
.mark.got{ color:var(--gold-bright); border-color:rgba(236,215,159,.5); box-shadow:0 0 14px rgba(236,215,159,.18); }
.mark .ms{ margin-right:.45rem; }

/* the waking (final) */
#screen-waking{ background:radial-gradient(120% 120% at 50% 45%, rgba(38,30,88,.92), rgba(14,10,38,.97)); }
.waking-wrap{ display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:100%; text-align:center; padding:2rem 1.2rem; }
.breath-stage{ position:relative; width:min(78vw,340px); aspect-ratio:1/1; display:grid; place-items:center; margin:1rem 0 1.4rem; touch-action:none; cursor:pointer; }
.breath-ring{ position:absolute; width:100%; height:100%; border-radius:50%; border:1px solid rgba(196,179,236,.3); transition:border-color .4s, box-shadow .4s; }
.breath-ring.sync{ border-color:rgba(236,215,159,.7); box-shadow:0 0 30px rgba(236,215,159,.25); }
.breath-orb{ width:46%; height:46%; border-radius:50%; background:radial-gradient(circle at 40% 35%, var(--gold-bright), rgba(150,120,200,.5) 60%, rgba(70,55,130,.2)); box-shadow:var(--glow-gold); will-change:transform; }
.breath-guide{ font-family:var(--serif-display); font-size:clamp(1.3rem,4vw,1.9rem); letter-spacing:.2em; text-transform:uppercase; color:var(--lavender-2); min-height:1.4em; transition:.3s; }
.breath-line{ font-style:italic; color:var(--gold-bright); font-size:clamp(1.05rem,2.6vw,1.35rem); max-width:30ch; min-height:3.4em; margin:.8rem 0 0; transition:opacity .8s ease; }
.breath-dots{ display:flex; gap:.55rem; justify-content:center; margin-top:1.2rem; }
.breath-dots span{ width:9px; height:9px; border-radius:50%; background:rgba(196,179,236,.25); transition:.5s; }
.breath-dots span.done{ background:var(--gold); box-shadow:var(--glow-gold); }
.waking-hint{ color:var(--lavender-dim); font-size:.85rem; margin-top:1.4rem; letter-spacing:.04em; }
.waking-enter{ margin:.4rem 0 0; padding:.7rem 2rem; border-radius:999px; background:transparent; border:1px solid rgba(236,215,159,.5); color:var(--gold-bright); font-family:var(--serif-display); font-size:1.15rem; letter-spacing:.12em; box-shadow:var(--glow-gold); transition:.3s; }
.waking-enter:hover{ background:rgba(236,215,159,.1); }

/* ending card */
#wakingEnd{ position:fixed; inset:0; z-index:70; display:none; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:2.5rem 1.4rem; gap:1.2rem; background:radial-gradient(120% 120% at 50% 45%, rgba(60,50,110,.6), rgba(20,15,50,.92)); }
#wakingEnd.show{ display:flex; animation:endIn 2.4s ease; }
@keyframes endIn{ from{ opacity:0; } to{ opacity:1; } }
#wakingEnd .endmark{ font-size:3rem; color:var(--gold-bright); text-shadow:var(--glow-gold); animation:breathe 7s ease-in-out infinite; }
#wakingEnd h2{ font-family:var(--serif-display); font-weight:500; font-size:clamp(2.4rem,8vw,4rem); margin:0; letter-spacing:.04em; }
#wakingEnd p{ max-width:46ch; color:var(--ink-soft); font-style:italic; font-size:1.1rem; line-height:1.6; margin:0; }
.end-acts{ display:flex; flex-wrap:wrap; gap:.9rem; justify-content:center; margin-top:.6rem; }
.end-acts button{ padding:.75rem 1.8rem; border-radius:999px; background:transparent; border:1px solid rgba(236,215,159,.5); color:var(--gold-bright); font-family:var(--serif-display); font-size:1.1rem; letter-spacing:.08em; transition:.3s; }
.end-acts button:hover{ background:rgba(236,215,159,.1); }

#finaleBloom{ position:fixed; inset:0; z-index:65; pointer-events:none; opacity:0; background:radial-gradient(circle at 50% 50%, rgba(255,250,235,.95), rgba(246,233,191,.4) 45%, transparent 75%); transition:opacity 2.4s ease; }

/* toast */
#toast{ position:fixed; left:50%; bottom:calc(2rem + env(safe-area-inset-bottom)); transform:translate(-50%,160%); z-index:80; max-width:90vw; display:flex; align-items:center; gap:.9rem; padding:.9rem 1.5rem; border-radius:14px; background:linear-gradient(160deg, rgba(48,38,96,.95), rgba(24,17,52,.95)); border:1px solid rgba(236,215,159,.5); box-shadow:var(--glow-gold); backdrop-filter:blur(8px); transition:transform .6s cubic-bezier(.2,.9,.2,1); }
#toast.show{ transform:translate(-50%,0); }
#toast .ti{ font-size:1.5rem; color:var(--gold-bright); }
#toast .tt{ font-family:var(--serif-display); font-size:1.05rem; color:var(--ink); }
#toast .tt small{ display:block; color:var(--ink-soft); font-style:italic; font-size:.85rem; letter-spacing:.02em; }

/* ===== The Archivist — recurring narrator voice ===== */
#narrator{ position:fixed; left:50%; top:calc(1.5rem + env(safe-area-inset-top)); transform:translate(-50%,-140%); z-index:78; max-width:min(90vw,560px); text-align:center; padding:.75rem 1.5rem .65rem; border-radius:15px; background:linear-gradient(165deg, rgba(30,22,60,.85), rgba(15,10,36,.85)); border:1px solid rgba(196,179,236,.22); backdrop-filter:blur(9px); box-shadow:0 10px 44px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.07); opacity:0; transition:transform .9s var(--ease-cinema), opacity .8s ease; pointer-events:none; }
#narrator.show{ transform:translate(-50%,0); opacity:1; }
.nr-quote{ display:block; font-family:var(--serif-display); font-style:italic; font-size:1.1rem; line-height:1.42; color:var(--ink); letter-spacing:.01em; }
.nr-by{ display:block; margin-top:.4rem; font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color:var(--lavender-dim); }
body.nightmare-whole #narrator{ border-color:rgba(180,60,72,.3); }

/* ===== Rumors (secret hints in the Index) ===== */
.rumors-sub{ width:min(96vw,760px); color:var(--lavender-dim); font-style:italic; font-size:.9rem; margin:0 0 1rem; }
.rumors{ display:grid; gap:.55rem; grid-template-columns:1fr; width:min(96vw,760px); margin-bottom:.4rem; }
.rumor{ position:relative; padding:.8rem 1.1rem .8rem 2.7rem; border-radius:12px; background:linear-gradient(160deg, rgba(22,16,44,.5), rgba(12,8,28,.5)); border:1px dashed rgba(196,179,236,.18); color:var(--ink-soft); font-style:italic; font-family:var(--serif-display); font-size:1.02rem; line-height:1.4; transition:.5s var(--ease-cinema); }
.rumor::before{ content:"?"; position:absolute; left:1.05rem; top:.85rem; color:var(--lavender-dim); font-style:normal; font-size:1.05rem; }
.rumor.confirmed{ border-style:solid; border-color:rgba(236,215,159,.42); color:var(--ink); background:linear-gradient(160deg, rgba(42,33,18,.5), rgba(16,11,28,.5)); box-shadow:inset 0 1px 0 rgba(248,238,202,.1); }
.rumor.confirmed::before{ content:"✦"; color:var(--gold); text-shadow:var(--glow-gold); }
.rumor .rumor-found{ display:block; margin-top:.3rem; font-style:normal; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-deep); }

/* ===== Dreamer Profile ===== */
.dreamer-profile{ margin:1.5rem auto 0; max-width:min(94vw,470px); padding:1.5rem 1.6rem 1.6rem; border-radius:20px; background:linear-gradient(165deg, rgba(34,26,68,.72), rgba(15,10,36,.72)); border:1px solid rgba(236,215,159,.32); box-shadow:0 14px 56px rgba(0,0,0,.42), inset 0 1px 0 rgba(248,238,202,.13); text-align:left; backdrop-filter:blur(8px); }
.dp-eyebrow{ font-size:.64rem; letter-spacing:.26em; text-transform:uppercase; color:var(--lavender-dim); text-align:center; }
.dp-type{ font-family:var(--serif-display); font-size:1.75rem; color:var(--gold-bright); text-align:center; margin:.35rem 0 1.3rem; line-height:1.08; text-shadow:var(--glow-gold); }
.dp-sym{ display:block; font-size:2.1rem; margin-bottom:.25rem; }
.dp-rows{ display:flex; flex-direction:column; gap:.55rem; }
.dp-row{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding-bottom:.55rem; border-bottom:1px solid rgba(196,179,236,.1); }
.dp-row:last-child{ border-bottom:none; padding-bottom:0; }
.dp-row .k{ color:var(--lavender-dim); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; flex-shrink:0; }
.dp-row .v{ color:var(--ink); text-align:right; font-family:var(--serif-display); font-size:1.04rem; }
.dp-row .v.weak{ color:var(--lavender-2); }
.dp-row .v.crown{ color:var(--gold-bright); }
/* profile on the white true-ending light reads as a dark luminous card — keep it legible */
#escProfileMount .dreamer-profile{ box-shadow:0 18px 70px rgba(80,40,10,.3), inset 0 1px 0 rgba(248,238,202,.15); }

/* responsive */
@media (max-width:760px){ .portals{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){
  .match-grid{ gap:.55rem; }
  .rail{ padding:.5rem .6rem; } .chip{ width:38px; height:38px; font-size:1rem; }
  .screen-title{ font-size:1.55rem; }
  .star{ width:30px; height:30px; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.15s !important; }
  .liquid,.fog,.floater,.bloom-ray,.bloom-ring{ animation:none !important; }
}
/* ---------- lucidity meter + dream corruption ------------- */
.lucid-wrap{ display:inline-flex; align-items:center; gap:.45rem; }
.lucid-wrap .llabel{ font-family:var(--serif-display); letter-spacing:.14em; text-transform:uppercase; font-size:.76rem; color:var(--lavender); }
.lucid-bar{ width:84px; height:6px; border-radius:999px; background:rgba(196,179,236,.18); overflow:hidden; box-shadow:inset 0 0 4px rgba(0,0,0,.35); }
.lucid-fill{ height:100%; width:100%; border-radius:999px; background:linear-gradient(90deg,var(--gold),var(--lavender-2)); transition:width .6s ease, background .6s ease; }
.lucid-val{ color:var(--gold-bright); font-variant-numeric:tabular-nums; font-size:.84rem; min-width:2.6em; }
body[data-lucid="low"] .lucid-fill{ background:linear-gradient(90deg,#c98f6a,#8d80b8); }
body[data-lucid="crit"] .lucid-fill{ background:linear-gradient(90deg,#8a4b5a,#5a4a7a); }

#corruption{ position:fixed; inset:0; z-index:5; pointer-events:none; opacity:0; transition:opacity 1.2s ease;
  background:radial-gradient(120% 120% at 50% 50%, transparent 32%, rgba(8,5,20,.9) 100%); mix-blend-mode:multiply; }
body[data-lucid="low"] #atmosphere{ filter:brightness(.86) saturate(.82); }
body[data-lucid="crit"] #atmosphere{ filter:brightness(.7) saturate(.6) blur(1px); }
@keyframes lucidShake{ 0%,100%{ transform:translate(0,0);} 25%{ transform:translate(-1px,1px);} 50%{ transform:translate(1px,-1px) skewX(-.4deg);} 75%{ transform:translate(-1px,0);} }
body[data-lucid="low"] .title, body[data-lucid="low"] .crest{ animation:lucidShake 3.4s ease-in-out infinite; }
body[data-lucid="crit"] .title, body[data-lucid="crit"] .crest, body[data-lucid="crit"] .screen-title{ animation:lucidShake 1.1s linear infinite; }
body[data-lucid="crit"] .floater{ animation:rise linear infinite, flicker 1.3s steps(2) infinite; }
@keyframes flicker{ 0%,100%{ opacity:.42;} 50%{ opacity:.05;} }

/* ---------- journal + upgraded sleeping index ------------- */
.jrnl{ display:block; }
.dream .meta-row{ display:flex; flex-wrap:wrap; gap:.35rem .9rem; margin:.6rem 0 .1rem; font-size:.74rem; letter-spacing:.06em; color:var(--lavender-dim); text-transform:uppercase; }
.dream .perf{ color:var(--gold-deep); }
.dream .jentry{ margin:.5rem 0 .2rem; color:var(--ink-soft); font-style:italic; font-size:.93rem; line-height:1.5; }
.dream .jentry .lead{ color:var(--lavender-2); font-style:normal; }
.dream-acts{ display:flex; gap:.6rem; margin-top:.7rem; }
.dream-replay{ padding:.35rem .95rem; border-radius:999px; background:transparent; border:1px solid rgba(196,179,236,.3); color:var(--lavender-2); font-size:.8rem; letter-spacing:.06em; transition:.25s; }
.dream-replay:hover{ border-color:var(--gold); color:var(--gold); }
.marginalia{ display:block; margin-top:.55rem; max-height:0; overflow:hidden; opacity:0; color:var(--gold-deep); font-style:italic; font-size:.85rem; line-height:1.45; transition:.5s ease; }
.dream.unlocked:hover .marginalia, .dream.unlocked:focus-within .marginalia{ max-height:5em; opacity:.85; }

/* ---------- dream identity card --------------------------- */
.identity-card{ width:min(92vw,420px); margin:.2rem auto 0; padding:1.4rem 1.6rem; border-radius:18px; text-align:left;
  background:linear-gradient(165deg, rgba(54,42,18,.55), rgba(24,17,42,.7)); border:1px solid rgba(236,215,159,.5); box-shadow:var(--glow-gold); }
.identity-card .isym{ font-size:2.2rem; color:var(--gold-bright); text-shadow:var(--glow-gold); float:right; line-height:1; margin-left:.6rem; }
.identity-card .ititle{ font-family:var(--serif-display); font-size:1.7rem; color:var(--gold-bright); margin:0 0 .5rem; }
.identity-card .irow{ display:flex; justify-content:space-between; gap:1rem; padding:.34rem 0; border-top:1px solid rgba(196,179,236,.14); font-size:.95rem; }
.identity-card .irow .k{ color:var(--lavender-dim); letter-spacing:.05em; }
.identity-card .irow .v{ color:var(--ink); text-align:right; }

/* ---------- nightmare echoes ------------------------------ */
.nightmare-meta{ width:min(94vw,920px); margin:2.8rem auto 0; }
.nightmare-section-title{ font-family:var(--serif-display); font-size:1.45rem; color:rgba(180,120,160,.85); letter-spacing:.06em; margin:0 0 .35rem; }
.nightmare-hint{ color:var(--lavender-dim); font-style:italic; font-size:.88rem; margin:0 0 1rem; }
.nightmare-portals{ display:grid; gap:.75rem; grid-template-columns:repeat(4,1fr); }
.nportal{ position:relative; text-align:left; padding:.85rem 1rem 1rem; background:linear-gradient(160deg, rgba(20,10,28,.75), rgba(8,4,18,.75)); border:1px solid rgba(120,60,100,.28); border-radius:14px; backdrop-filter:blur(6px); box-shadow:inset 0 1px 0 rgba(255,200,210,.05); transition:.32s var(--ease-cinema), scale .2s var(--ease-cinema); color:inherit; }
.nportal:active{ scale:.97; }
.nportal:hover{ border-color:rgba(200,80,130,.55); transform:translateY(-2px); }
.nportal .ng{ font-size:1.5rem; display:block; line-height:1; color:rgba(160,80,130,.7); }
.nportal.nm-done .ng{ color:var(--lavender-2); text-shadow:var(--glow-lav); }
.nportal h3{ font-family:var(--serif-display); font-weight:500; font-size:1.08rem; margin:.35rem 0 .1rem; line-height:1.1; color:rgba(180,130,170,.75); }
.nportal.nm-done h3{ color:var(--lavender-2); }
.nportal .ndesc{ color:rgba(150,110,140,.65); font-size:.82rem; margin:0; min-height:2.8em; line-height:1.3; }
.nportal.nm-done .ndesc{ color:var(--ink-soft); }
.nportal .nstate{ position:absolute; top:.75rem; right:.9rem; font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(140,70,110,.55); }
.nportal.nm-done .nstate{ color:var(--lavender); }
@media(max-width:760px){ .nightmare-portals{ grid-template-columns:repeat(2,1fr); } }
.screen-head .nm-badge{ font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(200,100,160,.8); border:1px solid rgba(180,80,130,.4); border-radius:999px; padding:.2rem .7rem; animation:nmPulse 3s ease-in-out infinite; }
@keyframes nmPulse{ 0%,100%{opacity:.7;} 50%{opacity:1;} }
@keyframes nmStarDrift{ 0%{transform:translate(-50%,-50%) translate(0,0);} 25%{transform:translate(-50%,-50%) translate(2px,-2px);} 50%{transform:translate(-50%,-50%) translate(-2px,1px);} 75%{transform:translate(-50%,-50%) translate(1px,2px);} 100%{transform:translate(-50%,-50%) translate(0,0);} }
.star.nm-drift{ animation:starPulse 1.6s ease-in-out infinite, nmStarDrift 4.5s ease-in-out infinite; }

/* ---------- secret fragments ------------------------------ */
.secret-section-title{ color:var(--gold-deep); opacity:.82; font-family:var(--serif-display); font-size:1.5rem; width:min(96vw,860px); margin:2.8rem 0 .4rem; letter-spacing:.04em; }
.secret-hint{ width:min(96vw,860px); color:var(--lavender-dim); font-style:italic; font-size:.9rem; margin:0 0 1.1rem; }
.dream.secret.locked{ opacity:.42; filter:saturate(.25); border-color:rgba(196,179,236,.07); }
.dream.secret.locked .sigil{ color:var(--lavender-dim); font-size:1.4rem; }
.dream.secret.unlocked{ border-color:rgba(236,215,159,.55); background:linear-gradient(165deg, rgba(54,42,18,.42), rgba(20,14,42,.65)); }
.dream.secret.unlocked .sigil{ color:var(--gold-bright); text-shadow:var(--glow-gold); font-size:1.8rem; }
@keyframes secretReveal{ 0%{ opacity:0; transform:scale(.92) translateY(8px);} 100%{ opacity:1; transform:scale(1) translateY(0);} }
.dream.secret.just-unlocked{ animation:secretReveal 1.1s cubic-bezier(.2,.8,.2,1) both; }

/* ---------- hidden eye ------------------------------------- */
#hiddenEye{ position:fixed; z-index:15; font-size:1.1rem; color:var(--lavender-dim); opacity:0; cursor:pointer; transition:opacity 2.2s ease, color .3s, text-shadow .3s; user-select:none; pointer-events:none; background:none; border:none; padding:.3rem; line-height:1; }
#hiddenEye.visible{ opacity:.22; pointer-events:auto; }
#hiddenEye:hover{ color:var(--gold); opacity:.9; text-shadow:var(--glow-gold); }

/* ---------- secret flash ----------------------------------- */
#secretFlash{ position:fixed; inset:0; z-index:95; pointer-events:none; display:grid; place-items:center; font-size:5rem; color:var(--gold-bright); text-shadow:var(--glow-gold); opacity:0; }
@keyframes secretPop{ 0%{opacity:0; transform:scale(.7);} 30%{opacity:1; transform:scale(1.15);} 70%{opacity:.9; transform:scale(1);} 100%{opacity:0; transform:scale(.95);} }
#secretFlash.go{ animation:secretPop 2s ease forwards; }

/* ---------- title pulse (on secret click) ------------------ */
@keyframes titlePulse{ 0%{text-shadow:0 0 60px rgba(236,215,159,.9), 0 0 120px rgba(236,215,159,.4);} 100%{text-shadow:0 2px 50px rgba(196,179,236,.30);} }
.title.knocked{ animation:titlePulse .7s ease forwards; }

/* ---------- theme chip label ------------------------------- */
.theme-label-tip{ position:fixed; bottom:calc(1.1rem + env(safe-area-inset-bottom)); right:.8rem; z-index:11; font-size:.65rem; letter-spacing:.12em; text-transform:uppercase; color:var(--lavender-dim); text-align:right; pointer-events:none; opacity:0; transition:.4s; }
#themeBtn:hover ~ .theme-label-tip, #themeBtn:focus ~ .theme-label-tip{ opacity:1; }

/* ---------- Hollow Veil ----------------------------------- */
.hollow-meta{ color:var(--ink-soft); letter-spacing:.04em; margin:.2rem 0 1.2rem; }
.hollow-meta b{ color:var(--lavender-2); }
.hollow-display{ display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; min-height:110px; align-items:center; width:min(94vw,500px); margin:.2rem auto; }
.hollow-sym{ font-size:3.2rem; color:var(--lavender-2); text-shadow:var(--glow-lav); line-height:1; transition:.4s; }
@keyframes hollowFlash{ 0%{opacity:0; transform:scale(.7);} 60%{opacity:1; transform:scale(1.1);} 100%{opacity:1; transform:scale(1);} }
.hollow-sym{ animation:hollowFlash .5s ease both; }
.hollow-btn{ font-size:3rem; color:var(--lavender-dim); text-shadow:none; line-height:1; background:none; border:1px solid rgba(196,179,236,.2); border-radius:50%; width:72px; height:72px; display:grid; place-items:center; transition:.24s; -webkit-tap-highlight-color:transparent; }
.hollow-btn:hover:not(:disabled){ border-color:var(--gold); color:var(--gold); transform:scale(1.1); }
.hollow-btn.hollow-right{ border-color:rgba(236,215,159,.8); color:var(--gold-bright); box-shadow:var(--glow-gold); }
.hollow-btn.hollow-wrong{ border-color:rgba(200,80,100,.7); color:rgba(200,80,100,.9); }
.hollow-fade{ opacity:0; transform:scale(.8); transition:.5s; }

/* ---------- Moon Dial ------------------------------------ */
.moondial-ring{ position:relative; width:260px; height:260px; margin:1rem auto; }
.moon-slot{ position:absolute; width:62px; height:62px; display:grid; place-items:center; border-radius:50%; border:1px solid rgba(196,179,236,.22); background:linear-gradient(160deg, rgba(34,26,71,.8), rgba(18,13,42,.8)); font-size:2rem; color:var(--lavender-dim); cursor:pointer; transition:.26s; -webkit-tap-highlight-color:transparent; user-select:none; }
.moon-slot:hover{ border-color:rgba(196,179,236,.6); color:var(--lavender-2); }
.moon-slot.selected{ border-color:var(--gold); color:var(--gold-bright); box-shadow:var(--glow-gold); transform:scale(1.12); }
.moon-slot.correct{ border-color:rgba(236,215,159,.5); color:var(--gold-bright); background:linear-gradient(160deg, rgba(60,48,20,.6), rgba(30,22,10,.6)); }
.moondial-ref{ display:flex; gap:.6rem; justify-content:center; margin:.2rem 0 .5rem; opacity:.5; font-size:1.5rem; letter-spacing:.2rem; color:var(--lavender-dim); }
.moondial-meta{ color:var(--ink-soft); letter-spacing:.04em; margin:.8rem 0 .5rem; }
.moondial-meta b{ color:var(--lavender-2); }

/* ---------- creator / admin panel ------------------------- */
#creatorPanel{ position:fixed; inset:0; z-index:110; display:none; background:rgba(5,3,14,.97); backdrop-filter:blur(10px); overflow-y:auto; -webkit-overflow-scrolling:touch; }
#creatorPanel.open{ display:block; animation:screenIn .35s ease; }
.creator-inner{ max-width:760px; margin:0 auto; padding:2rem 1.4rem 5rem; }
.creator-head{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:1.8rem; gap:1rem; }
.creator-wordmark{ font-family:var(--serif-display); font-size:1.95rem; color:var(--gold-bright); line-height:1; }
.creator-badge{ display:block; font-size:.65rem; letter-spacing:.18em; text-transform:uppercase; color:var(--lavender-dim); margin-top:.35rem; }
.creator-close{ background:none; border:1px solid rgba(196,179,236,.25); border-radius:50%; width:38px; height:38px; display:grid; place-items:center; color:var(--lavender-dim); font-size:1.1rem; cursor:pointer; transition:.22s; flex-shrink:0; }
.creator-close:hover{ border-color:var(--gold); color:var(--gold); }
.creator-tabs{ display:flex; gap:0; border-bottom:1px solid rgba(196,179,236,.14); margin-bottom:2rem; overflow-x:auto; }
.ctab{ padding:.5rem 1.1rem; border:none; border-bottom:2px solid transparent; background:none; color:var(--lavender-dim); font-family:var(--serif-display); font-size:1rem; cursor:pointer; transition:.22s; white-space:nowrap; }
.ctab:hover{ color:var(--lavender-2); }
.ctab.active{ color:var(--gold-bright); border-bottom-color:var(--gold); }
.creator-section{ display:none; }
.creator-section.active{ display:block; }
.csub{ font-family:var(--serif-display); font-size:1.2rem; color:var(--lavender); margin:2rem 0 .9rem; padding-top:1.4rem; border-top:1px solid rgba(196,179,236,.1); letter-spacing:.03em; }
.csub:first-child{ margin-top:0; padding-top:0; border-top:none; }
.cfield{ margin-bottom:1rem; }
.cfield label{ display:flex; justify-content:space-between; align-items:center; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--lavender-dim); margin-bottom:.38rem; }
.cfield label .cval{ color:var(--gold-bright); font-variant-numeric:tabular-nums; }
.cfield input[type=text],.cfield textarea,.cfield select{
  width:100%; background:rgba(16,11,34,.7); border:1px solid rgba(196,179,236,.2); border-radius:8px;
  color:var(--ink); padding:.55rem .85rem; font-family:var(--serif-body); font-size:.95rem;
  resize:vertical; transition:.2s; line-height:1.4;
}
.cfield input[type=text]:focus,.cfield textarea:focus,.cfield select:focus{ outline:none; border-color:rgba(236,215,159,.5); background:rgba(22,16,51,.6); }
.cfield select{ -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%23b9b0d6' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .85rem center; padding-right:2rem; }
.cfield input[type=range]{ -webkit-appearance:none; width:100%; height:4px; border-radius:2px; background:rgba(196,179,236,.2); accent-color:var(--gold); cursor:pointer; }
.cfield input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:var(--gold); }
.cfield input[type=color]{ width:42px; height:30px; padding:2px 3px; border:1px solid rgba(196,179,236,.25); border-radius:6px; background:rgba(16,11,34,.7); cursor:pointer; vertical-align:middle; }
.creator-row{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; }
@media(max-width:500px){ .creator-row{ grid-template-columns:1fr; } }
/* quiz item */
.cquiz{ background:rgba(16,11,34,.5); border:1px solid rgba(196,179,236,.14); border-radius:12px; padding:.95rem 1rem; margin-bottom:.8rem; }
.cquiz-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:.65rem; }
.cquiz-num{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--lavender-dim); }
.cquiz-del{ background:none; border:none; color:rgba(200,80,100,.55); cursor:pointer; font-size:1rem; padding:.1rem .3rem; line-height:1; transition:.2s; }
.cquiz-del:hover{ color:rgba(220,80,100,.9); }
.cquiz-opts{ display:grid; grid-template-columns:1fr 1fr; gap:.45rem; margin:.5rem 0; }
.cquiz-opts input{ background:rgba(16,11,34,.7); border:1px solid rgba(196,179,236,.16); border-radius:6px; color:var(--ink); padding:.38rem .65rem; font-family:var(--serif-body); font-size:.88rem; width:100%; }
.cquiz-opts input:focus{ outline:none; border-color:rgba(196,179,236,.45); }
.cquiz-correct label{ display:flex; align-items:center; gap:.4rem; font-size:.78rem; color:var(--lavender-dim); cursor:pointer; }
.cquiz-correct input[type=radio]{ accent-color:var(--gold); }
.creator-add{ margin-top:.5rem; padding:.5rem 1.3rem; border-radius:999px; background:transparent; border:1px solid rgba(196,179,236,.28); color:var(--lavender-2); font-family:var(--serif-body); font-size:.9rem; cursor:pointer; transition:.25s; }
.creator-add:hover{ border-color:var(--gold); color:var(--gold); }
.creator-danger{ padding:.45rem 1.1rem; border-radius:999px; background:transparent; border:1px solid rgba(200,80,100,.35); color:rgba(200,80,100,.7); font-size:.85rem; cursor:pointer; transition:.25s; }
.creator-danger:hover{ border-color:rgba(220,80,100,.7); color:rgba(220,80,100,1); }
.ccolor-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:.6rem; }
.ccolor-row{ display:flex; align-items:center; gap:.7rem; }
.ccolor-row span{ font-size:.8rem; color:var(--lavender-dim); flex:1; }
.creator-foot{ margin-top:2.4rem; padding-top:1.4rem; border-top:1px solid rgba(196,179,236,.1); display:flex; gap:.8rem; flex-wrap:wrap; align-items:center; }
.creator-hint-text{ color:var(--lavender-dim); font-style:italic; font-size:.85rem; flex:1; }
/* crest click hint */
.crest{ cursor:pointer; }

/* ===================== ROOMS THAT SHOULD NOT EXIST ===================== */
/* hub section */
.rooms-meta{ width:min(94vw,920px); margin:2.4rem auto 0; }
.rooms-section-title{ font-family:var(--serif-display); font-size:1.5rem; color:var(--lavender-2); letter-spacing:.04em; text-align:center; margin:0 0 .3rem; }
.rooms-hint{ text-align:center; color:var(--ink-soft); font-style:italic; font-size:.9rem; margin:0 auto 1.1rem; max-width:48ch; opacity:.92; }
.rooms-portals{ grid-template-columns:repeat(3,1fr); width:min(94vw,720px); margin:0 auto; }
@media (max-width:760px){ .rooms-portals{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:430px){ .rooms-portals{ grid-template-columns:1fr; } }

/* a room door card — built on .portal, but it is a door, not a lost fragment */
.roomportal{ filter:none !important; border-color:rgba(184,156,224,.32) !important; background:linear-gradient(168deg, rgba(30,22,58,.8), rgba(14,10,32,.8)) !important; }
.roomportal:hover{ filter:none !important; transform:translateY(-3px) !important; border-color:rgba(206,186,240,.6) !important; box-shadow:0 0 22px rgba(150,120,200,.24) !important; }
.roomportal::after{ content:""; position:absolute; left:0; top:16%; bottom:16%; width:3px; border-radius:0 3px 3px 0; background:linear-gradient(rgba(236,215,159,0), rgba(236,215,159,.55), rgba(236,215,159,0)); opacity:.7; }
.roomportal .pg{ color:var(--lavender-2); text-shadow:var(--glow-lav); }
.roomportal .pstate{ color:var(--lavender-dim); }
.roomportal.fresh .pstate{ color:var(--gold-bright); }
.roomportal.fresh{ border-color:rgba(236,215,159,.4) !important; box-shadow:0 0 22px rgba(236,215,159,.16) !important; }

/* generic room screen + stage */
#screen-room{ background:radial-gradient(135% 120% at 50% 24%, rgba(30,24,66,.96), rgba(10,8,26,.99)); }
.dream-room{ position:relative; width:min(94vw,820px); margin:1.3rem auto .4rem; min-height:min(64vh,520px); border-radius:22px; border:1px solid rgba(196,179,236,.16); overflow:hidden; background:radial-gradient(120% 100% at 50% 0%, rgba(40,32,82,.5), rgba(10,8,28,.6)); box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 18px 50px rgba(0,0,0,.4); }
.room-msg{ text-align:center; font-family:var(--serif-display); font-style:italic; font-size:clamp(1rem,2.6vw,1.3rem); color:var(--lavender-2); min-height:2.6em; max-width:54ch; margin:.6rem auto 1.2rem; line-height:1.45; transition:opacity .4s ease; }
.room-msg.swap{ opacity:0; }

/* ---- The Room of Soft Teeth ---- */
.teeth-room{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; padding:0 0 8%; }
.teeth-walls{ position:absolute; inset:0; pointer-events:none; }
.teeth-smile{ position:absolute; opacity:.55; transition:transform .5s var(--ease-cinema); }
.teeth-keys{ display:flex; gap:.2rem; padding:.5rem; border-radius:14px 14px 6px 6px; background:linear-gradient(180deg, rgba(64,30,44,.5), rgba(30,14,22,.4)); box-shadow:0 8px 24px rgba(0,0,0,.4); z-index:2; }
.tooth-key{ width:clamp(24px,5.6vw,40px); height:clamp(64px,16vw,116px); border:none; border-radius:6px 6px 12px 12px; background:linear-gradient(180deg,#f6efe2,#d8cdba); box-shadow:inset 0 -8px 12px rgba(150,130,100,.3), 0 2px 5px rgba(0,0,0,.3); cursor:pointer; transition:transform .08s ease, box-shadow .15s, filter .2s; transform-origin:top center; position:relative; }
.tooth-key::after{ content:""; position:absolute; left:18%; right:18%; bottom:8%; height:30%; border-radius:50%; background:radial-gradient(closest-side, rgba(180,160,130,.4), transparent); }
.tooth-key:hover{ filter:brightness(1.05); }
.tooth-key.press{ transform:scaleY(.9) translateY(3px); box-shadow:inset 0 -4px 10px rgba(150,130,100,.4), 0 1px 2px rgba(0,0,0,.3); filter:brightness(1.12); }

/* ---- The Room Where Rain Waits ---- */
.rain-room{ position:absolute; inset:0; overflow:hidden; }
.rw-drop{ position:absolute; width:3px; height:16px; border-radius:3px; background:linear-gradient(to bottom, rgba(210,224,255,.95), rgba(150,180,230,.2)); box-shadow:0 0 8px rgba(180,210,255,.6); cursor:pointer; transition:transform 1.1s cubic-bezier(.45,0,.7,1), opacity 1.1s ease; }
.rw-drop:hover{ box-shadow:0 0 14px rgba(214,232,255,.95); transform:scale(1.3); }
.rw-drop.fall{ transform:translateY(70vh) scaleY(1.6); opacity:0; pointer-events:none; }
.rw-puddle{ position:absolute; left:50%; bottom:5%; width:0; height:5px; transform:translateX(-50%); border-radius:50%; background:radial-gradient(closest-side, rgba(180,210,255,.4), transparent); transition:width 2.5s ease; }

/* ---- The Room With Too Many Windows ---- */
.windows-room{ position:absolute; inset:0; padding:5%; }
.windows-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:4%; height:100%; }
@media (max-width:560px){ .windows-grid{ grid-template-columns:repeat(3,1fr); gap:5%; } }
.win-pane{ position:relative; border:2px solid rgba(196,179,236,.3); border-radius:6px; overflow:hidden; cursor:pointer; padding:0; min-height:50px; transition:transform .3s var(--ease-cinema), box-shadow .3s, border-color .3s; }
.win-pane .win-mull-h, .win-pane .win-mull-v{ position:absolute; background:rgba(196,179,236,.26); z-index:2; }
.win-pane .win-mull-h{ left:0; right:0; top:50%; height:2px; transform:translateY(-1px); }
.win-pane .win-mull-v{ top:0; bottom:0; left:50%; width:2px; transform:translateX(-1px); }
.win-pane:hover{ transform:scale(1.05); border-color:rgba(236,215,159,.6); box-shadow:0 0 18px rgba(150,120,200,.35); z-index:3; }
.win-pane.chosen{ border-color:var(--gold); box-shadow:var(--glow-gold); }
.win-sky{ position:absolute; inset:0; }

/* ---- The Room Beneath the Bed ---- */
.bed-room{ position:absolute; inset:0; overflow:hidden; background:radial-gradient(120% 90% at 50% 110%, rgba(40,30,70,.7), rgba(8,6,20,.92)); transition:background 1s ease; }
.bed-room.lit{ background:radial-gradient(72% 64% at 50% 72%, rgba(120,96,60,.42), rgba(20,14,40,.92) 72%); }
.bed-slats{ position:absolute; left:0; right:0; top:0; height:13%; background:repeating-linear-gradient(90deg, rgba(60,44,30,.85) 0 7%, rgba(40,28,18,.85) 7% 9%); box-shadow:0 6px 16px rgba(0,0,0,.5); }
.bed-star{ position:absolute; width:4px; height:4px; border-radius:50%; background:rgba(248,238,202,.9); box-shadow:0 0 6px rgba(248,238,202,.8); animation:bedTwinkle 3s ease-in-out infinite; }
@keyframes bedTwinkle{ 0%,100%{ opacity:.3; transform:scale(.8);} 50%{ opacity:1; transform:scale(1.25);} }
.bed-obj{ position:absolute; background:none; border:none; cursor:pointer; transition:transform .3s var(--ease-cinema), filter .3s; }
.bed-obj:hover{ transform:scale(1.1); filter:drop-shadow(0 0 10px rgba(236,215,159,.5)); }

/* ---- The Room of Borrowed Names ---- */
.names-room{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:6%; text-align:center; gap:1rem; }
.names-prompt{ font-family:var(--serif-display); font-size:clamp(1.1rem,3vw,1.5rem); color:var(--lavender-2); font-style:italic; max-width:42ch; margin:0; }
.names-choices{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; max-width:560px; }
.name-chip{ padding:.5rem 1.1rem; border-radius:999px; border:1px solid rgba(196,179,236,.34); background:rgba(34,26,71,.5); color:var(--lavender-2); font-family:var(--serif-display); font-size:1.05rem; letter-spacing:.02em; cursor:pointer; transition:.3s; }
.name-chip:hover{ border-color:var(--gold); color:var(--gold-bright); box-shadow:var(--glow-gold); transform:translateY(-2px); }
.name-chip.drift{ animation:nameDrift 1.4s var(--ease-cinema) forwards; pointer-events:none; }
@keyframes nameDrift{ to{ opacity:0; transform:translateY(-40px) scale(.7) rotate(6deg); } }
.name-field{ display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; justify-content:center; }
.name-input{ background:rgba(12,8,30,.6); border:1px solid rgba(196,179,236,.3); border-radius:10px; padding:.55rem .9rem; color:var(--ink); font-family:var(--serif-display); font-size:1.1rem; text-align:center; width:min(70vw,260px); }
.name-input:focus{ outline:none; border-color:var(--gold); box-shadow:var(--glow-gold); }
.name-take{ padding:.55rem 1.2rem; border-radius:999px; border:1px solid rgba(236,215,159,.5); background:transparent; color:var(--gold-bright); font-family:var(--serif-display); font-size:1.05rem; letter-spacing:.06em; cursor:pointer; transition:.3s; }
.name-take:hover{ background:rgba(236,215,159,.08); }
.names-kept{ font-family:var(--serif-display); font-size:clamp(1.4rem,4vw,2.1rem); color:var(--gold-bright); text-shadow:var(--glow-gold); letter-spacing:.04em; }

/* ---- The Room That Apologizes ---- */
.sorry-room{ position:absolute; inset:0; padding:5%; }
.sorry-obj{ position:absolute; background:none; border:none; cursor:pointer; transition:transform .3s var(--ease-cinema), filter .3s; }
.sorry-obj:hover{ transform:translateY(-3px) scale(1.06); filter:drop-shadow(0 0 10px rgba(196,179,236,.5)); }
.sorry-obj.bow{ animation:sorryBow .7s var(--ease-cinema); }
@keyframes sorryBow{ 0%,100%{ transform:translateY(0) rotate(0); } 40%{ transform:translateY(7px) rotate(-3deg); } }

/* ---- wandering dream-moon (secret ritual) ---- */
.dl-moon{ position:fixed; z-index:34; top:22%; left:-90px; width:60px; height:60px; padding:0; border:none; background:none; cursor:pointer; opacity:0; animation:dlMoonDrift 22s linear forwards; -webkit-tap-highlight-color:transparent; }
.dl-moon svg{ width:100%; height:100%; display:block; overflow:visible; filter:drop-shadow(0 0 14px rgba(214,224,255,.5)); transition:filter .4s ease; }
@keyframes dlMoonDrift{ 0%{ opacity:0; transform:translate(0,0);} 8%{ opacity:.92;} 50%{ transform:translate(54vw,-6vh);} 90%{ opacity:.92;} 100%{ opacity:0; transform:translate(112vw,3vh);} }
.dl-moon.near svg{ filter:drop-shadow(0 0 28px rgba(246,233,191,.95)); }
.dl-moon.miss{ animation:dlMoonDrift 22s linear forwards, dlMoonMiss .5s ease; }
@keyframes dlMoonMiss{ 0%,100%{ filter:none;} 50%{ filter:brightness(1.5);} }

/* ---- sleeping cat's shadow (secret ritual) ---- */
#sleepCatShadow{ position:fixed; right:5vw; bottom:5.4vh; width:128px; height:26px; z-index:3; border:none; padding:0; border-radius:50%; background:radial-gradient(closest-side, rgba(8,5,18,.6), transparent 72%); opacity:0; transform:translateY(6px) scaleX(1.05); transition:opacity 1.6s ease, transform 1.6s var(--ease-cinema); pointer-events:none; cursor:pointer; -webkit-tap-highlight-color:transparent; }
#sleepCatShadow.show{ opacity:.85; transform:translateY(0) scaleX(1); pointer-events:auto; }
#sleepCatShadow:hover{ box-shadow:0 0 20px rgba(120,108,170,.4); }

/* ---- word on a falling paper scrap (secret ritual) ---- */
.wx-paper .wx-word{ position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); text-align:center; font-family:var(--serif-body); font-size:8px; letter-spacing:.03em; color:rgba(70,56,38,.92); pointer-events:none; }
.wx-paper.has-word::before{ opacity:.22; }

/* index room-page accent */
.dream.roompage .sigil{ color:var(--lavender-2); }

/* ============================================================
   BACKEND-POWERED UI  (dream wall + cross-device sync)
   Only appears when the backend is enabled (API_BASE set).
   ============================================================ */
/* dream wall on the endings */
.dream-social{ margin:1.6rem auto 0; max-width:42ch; text-align:center; }
.ds-count{ font-family:var(--serif-display); font-style:italic; color:var(--lavender); font-size:1.05rem; margin:0 0 1rem; opacity:.92; }
.ds-wall{ display:flex; flex-direction:column; gap:.35rem; margin-bottom:1.1rem; max-height:34vh; overflow:auto; }
.ds-line{ margin:0; font-family:var(--serif-body); font-style:italic; color:var(--ink-soft); font-size:.95rem; opacity:.78; }
.ds-leave{ display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; }
.ds-input{ flex:1 1 16ch; min-width:0; padding:.55rem .8rem; border-radius:999px; border:1px solid rgba(196,179,236,.35);
  background:rgba(10,8,24,.5); color:var(--ink); font-family:var(--serif-body); font-size:.95rem; }
.ds-input::placeholder{ color:var(--lavender-dim); font-style:italic; }
.ds-send{ padding:.55rem 1.2rem; border-radius:999px; background:transparent; border:1px solid rgba(236,215,159,.5);
  color:var(--gold-bright); font-family:var(--serif-display); letter-spacing:.06em; transition:.3s; }
.ds-send:hover{ background:rgba(236,215,159,.1); }
.ds-send:disabled{ opacity:.4; cursor:default; }
.ds-thanks{ margin:.2rem 0 0; font-style:italic; color:var(--lavender); }

/* sync chip uses the existing .chip styles; modal: */
.sync-modal{ position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center;
  padding:1.4rem; background:rgba(6,4,16,.72); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  opacity:0; visibility:hidden; transition:opacity .4s ease, visibility .4s ease; }
.sync-modal.show{ opacity:1; visibility:visible; }
.sync-card{ position:relative; width:min(460px,94vw); background:linear-gradient(160deg, var(--indigo-2), var(--indigo));
  border:1px solid rgba(196,179,236,.22); border-radius:18px; padding:1.8rem 1.6rem; box-shadow:var(--glow-lav);
  text-align:center; }
.sync-card h3{ font-family:var(--serif-display); font-weight:600; font-size:1.5rem; margin:.1rem 0 .5rem; color:var(--gold-bright); }
.sync-sub{ color:var(--ink-soft); font-size:.95rem; margin:0 0 1.2rem; }
.sync-sub em{ color:var(--lavender); font-style:italic; }
.sync-x{ position:absolute; top:.7rem; right:.9rem; background:none; border:none; color:var(--lavender-dim); font-size:1.1rem; }
.sync-x:hover{ color:var(--ink); }
.sync-keywrap{ margin-bottom:1rem; }
.sync-keylabel{ display:block; font-size:.74rem; text-transform:uppercase; letter-spacing:.08em; color:var(--lavender-dim); margin-bottom:.35rem; }
.sync-key{ display:flex; align-items:center; justify-content:center; gap:.6rem; }
.sync-key code{ font-family:'Courier New',monospace; font-size:1.05rem; letter-spacing:.12em; color:var(--gold-bright);
  background:rgba(10,8,24,.5); padding:.45rem .8rem; border-radius:9px; border:1px solid var(--line); }
.sync-copy{ background:none; border:1px solid rgba(196,179,236,.4); color:var(--lavender); border-radius:999px; padding:.3rem .8rem; font-size:.82rem; }
.sync-copy:hover{ background:rgba(196,179,236,.12); }
.sync-btn{ display:inline-block; padding:.7rem 1.4rem; border-radius:999px; background:transparent;
  border:1px solid rgba(236,215,159,.5); color:var(--gold-bright); font-family:var(--serif-display); font-size:1.05rem;
  letter-spacing:.06em; transition:.3s; }
.sync-btn:hover{ background:rgba(236,215,159,.1); }
.sync-btn.ghost{ border-color:rgba(196,179,236,.4); color:var(--lavender); font-size:.95rem; }
.sync-divider{ margin:1.2rem 0 .9rem; color:var(--lavender-dim); font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; }
.sync-restore{ display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; }
.sync-restore input{ flex:1 1 18ch; min-width:0; padding:.55rem .8rem; border-radius:999px; border:1px solid rgba(196,179,236,.35);
  background:rgba(10,8,24,.5); color:var(--ink); font-family:'Courier New',monospace; letter-spacing:.1em; text-align:center; text-transform:uppercase; }
.sync-msg{ min-height:1.3em; margin:1rem 0 0; color:var(--lavender); font-style:italic; font-size:.92rem; }