/* ============================================================
   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,.88), rgba(12,8,30,.88));
  border:1px solid rgba(196,179,236,.16); border-radius:18px;
  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,.8), rgba(16,11,38,.8)); border:1px solid rgba(196,179,236,.16); 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,.86), rgba(15,10,36,.86)); 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; }
.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,.88), rgba(8,4,18,.88)); border:1px solid rgba(120,60,100,.28); border-radius:14px; 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; }

/* ===== announcement banner (set from the admin panel) ===== */
#siteBanner{
  margin:0 auto 1.4rem; max-width:60ch; padding:.7rem 1.2rem;
  border:1px solid rgba(236,215,159,.4); border-radius:999px;
  background:rgba(236,215,159,.08); color:var(--gold-bright);
  font-family:var(--serif-display); font-size:1.05rem; letter-spacing:.02em;
  text-align:center; box-shadow:var(--glow-gold);
}

/* ===== owner "testing mode" badge (only shown when the secret key checks out) ===== */
#ownerBadge{
  position:fixed; left:14px; bottom:14px; z-index:91; cursor:pointer;
  display:flex; align-items:center; gap:.5ch;
  padding:.4rem .85rem; border-radius:999px;
  background:rgba(20,10,40,.72); border:1px solid rgba(236,215,159,.5);
  color:var(--gold-bright); font-family:var(--serif-body); font-size:.82rem; letter-spacing:.02em;
  box-shadow:0 0 18px rgba(236,215,159,.25); backdrop-filter:blur(4px); transition:box-shadow .2s;
}
#ownerBadge:hover{ box-shadow:0 0 24px rgba(236,215,159,.45); }
#ownerBadge .ob-dot{ color:var(--gold); animation:obPulse 2.4s ease-in-out infinite; }
#ownerBadge .ob-sub{ color:var(--ink-soft); font-style:italic; font-size:.76rem; }
#ownerBadge .ob-tools{ font-size:.9rem; }
@keyframes obPulse{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } }
@media (max-width:520px){ #ownerBadge .ob-sub{ display:none; } }

/* ===== tester tools panel (owner-only) ===== */
#testerPanel{
  position:fixed; left:14px; bottom:60px; z-index:92; width:min(320px,88vw);
  max-height:78vh; overflow:auto; display:none;
  background:linear-gradient(165deg, var(--indigo-2,#221a47), var(--indigo,#161033));
  border:1px solid rgba(236,215,159,.4); border-radius:16px; padding:.9rem 1rem 1.1rem;
  box-shadow:0 18px 50px rgba(4,2,12,.6); color:var(--ink);
  font-family:var(--serif-body); font-size:.9rem;
}
#testerPanel.open{ display:block; }
#testerPanel .tp-head{ display:flex; justify-content:space-between; align-items:center;
  font-family:var(--serif-display); font-size:1.15rem; color:var(--gold-bright); margin-bottom:.7rem; }
#testerPanel .tp-x{ background:none; border:none; color:var(--lavender-dim); font-size:1rem; cursor:pointer; }
#testerPanel .tp-x:hover{ color:var(--ink); }
#testerPanel .tp-sec{ margin-bottom:.7rem; padding-bottom:.7rem; border-bottom:1px solid rgba(196,179,236,.12); }
#testerPanel .tp-sec.tp-foot{ border-bottom:none; display:flex; gap:.5rem; }
#testerPanel label{ display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--lavender-dim); margin-bottom:.35rem; }
#testerPanel .tp-row{ display:flex; gap:.5rem; align-items:center; }
#testerPanel select, #testerPanel input{ flex:1; min-width:0; padding:.4rem .55rem; border-radius:8px;
  border:1px solid rgba(196,179,236,.28); background:rgba(10,8,24,.6); color:var(--ink); font-family:var(--serif-body); font-size:.88rem; }
#testerPanel button{ padding:.4rem .8rem; border-radius:999px; background:transparent;
  border:1px solid rgba(236,215,159,.5); color:var(--gold-bright); font-family:var(--serif-body); font-size:.85rem; cursor:pointer; transition:.2s; white-space:nowrap; }
#testerPanel button:hover{ background:rgba(236,215,159,.12); }
#testerPanel .tp-wide{ display:block; width:100%; margin-top:.5rem; }
#testerPanel #tpCmd{ font-family:'Courier New',monospace; letter-spacing:.02em; }
#testerPanel .tp-cmdout{ margin-top:.5rem; max-height:150px; overflow:auto; font-family:'Courier New',monospace; font-size:.76rem; line-height:1.5; color:var(--lavender-2); background:rgba(6,4,16,.5); border:1px solid rgba(196,179,236,.14); border-radius:8px; padding:.45rem .6rem; }
#testerPanel .tp-cmdline{ white-space:pre-wrap; word-break:break-word; }
#testerPanel .tp-danger{ border-color:rgba(232,160,160,.55); color:#e8a0a0; }
#testerPanel .tp-danger:hover{ background:rgba(232,160,160,.12); }

/* ============================================================
   ✦ AESTHETIC ELEVATION — light & the waking moment
   A luminous, orchestrated entrance and a title that breathes with
   its own light. Layered on top of the existing atmosphere; all new
   motion is disabled under prefers-reduced-motion (block at the end).
   ============================================================ */

/* — a soft dream-bloom lit from within, behind the intro — */
#intro::before{
  content:""; position:absolute; left:50%; top:46%; z-index:-1; pointer-events:none;
  width:min(94vw,760px); height:min(94vw,760px); transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(196,179,236,.17), rgba(236,215,159,.055) 38%, transparent 68%);
  mix-blend-mode:screen;
  animation:dreamBloomIn 2.8s var(--ease-cinema) .15s both, dreamBloomBreathe 9s ease-in-out 3s infinite;
}
@keyframes dreamBloomIn{ 0%{ opacity:0; transform:translate(-50%,-50%) scale(.82);} 100%{ opacity:1; transform:translate(-50%,-50%) scale(1);} }
@keyframes dreamBloomBreathe{ 0%,100%{ opacity:.82; } 50%{ opacity:1; } }

/* — orchestrated entrance: the dream wakes one element at a time — */
#intro .intro-mark{ animation:dreamKindle 1.6s var(--ease-cinema) both, breathe 6s ease-in-out 1.7s infinite; }
#intro h1{ animation:dreamRise 1.6s var(--ease-cinema) .4s both, titleGlow 9s ease-in-out 2s infinite; }
#intro p{ animation:dreamRise 1.5s var(--ease-cinema) .8s both; }
#intro .enter-btn{ animation:dreamFade 1.5s ease 1.15s both, enterBreathe 5.5s ease-in-out 2.7s infinite; }
#intro .intro-hint{ animation:dreamFade 1.7s ease 1.5s both; }
@keyframes dreamKindle{ 0%{ opacity:0; transform:scale(.62); filter:blur(4px);} 55%{ opacity:1;} 100%{ opacity:.95; transform:scale(1); filter:blur(0);} }
@keyframes dreamRise{ 0%{ opacity:0; transform:translateY(22px); filter:blur(5px);} 100%{ opacity:1; transform:translateY(0); filter:blur(0);} }
@keyframes dreamFade{ 0%{ opacity:0;} 100%{ opacity:1;} }

/* — luminous, softly breathing title (hub + intro) — */
.title{ animation:titleGlow 9s ease-in-out infinite; }
@keyframes titleGlow{
  0%,100%{ text-shadow:0 1px 30px rgba(196,179,236,.30), 0 0 62px rgba(196,179,236,.12), 0 0 4px rgba(246,240,224,.10); }
  50%{     text-shadow:0 1px 42px rgba(196,179,236,.46), 0 0 96px rgba(196,179,236,.22), 0 0 7px rgba(246,240,224,.20); }
}

/* — the enter button, breathing with quiet gold light — */
@keyframes enterBreathe{
  0%,100%{ box-shadow:0 0 15px rgba(236,215,159,.24), 0 0 40px rgba(236,215,159,.10); }
  50%{     box-shadow:0 0 26px rgba(236,215,159,.44), 0 0 68px rgba(236,215,159,.20); }
}

/* — respect reduced motion: keep the light, drop the movement — */
@media (prefers-reduced-motion:reduce){
  #intro::before{ animation:none; opacity:1; }
  #intro .intro-mark, #intro h1, #intro p, #intro .enter-btn, #intro .intro-hint,
  .title{ animation:none !important; opacity:1 !important; transform:none !important; filter:none !important; }
}

/* ===== responsiveness: cut the ~300ms tap delay on touch controls (INP) ===== */
button, a, .portal, .chip, .orb, .card, [role="button"]{ touch-action:manipulation; }

/* ===== deeper doors (the seventh & eighth) ===== */
.deep-meta{ margin-top:2.4rem; text-align:center; }
.deep-section-title{ font-family:var(--serif-display); font-size:1.5rem; color:var(--gold-bright); letter-spacing:.03em; text-shadow:var(--glow-gold); }
.deep-hint{ color:var(--ink-soft); font-style:italic; font-size:.95rem; max-width:44ch; margin:.4rem auto 1.3rem; }
.deep-portals{ max-width:640px; margin:0 auto; }
.portal.deepportal{ background:linear-gradient(165deg, rgba(30,22,66,.82), rgba(14,9,34,.82)); border-color:rgba(236,215,159,.28); }
.portal.deepportal .pg{ color:var(--gold-bright); text-shadow:var(--glow-gold); }
.portal.deepportal.collected{ border-color:rgba(236,215,159,.5); box-shadow:inset 0 1px 0 rgba(248,238,202,.14), 0 0 30px rgba(236,215,159,.12); }

/* ===== The Leaping Lake ===== */
.lake-wrap{ max-width:640px; margin:0 auto; }
#lakeCanvas{ width:100%; aspect-ratio:640/440; max-height:64vh; display:block; border-radius:16px;
  border:1px solid rgba(196,179,236,.18); background:linear-gradient(180deg, rgba(18,13,44,.55) 0%, rgba(24,17,54,.5) 60%, rgba(30,24,70,.55) 100%);
  touch-action:none; cursor:pointer; box-shadow:inset 0 0 40px rgba(10,8,26,.5); }
.lake-meta{ text-align:center; color:var(--ink-soft); margin:.2rem 0 .8rem; }
.lake-meta b{ color:var(--gold-bright); }
.lake-hint{ text-align:center; color:var(--lavender-dim); font-size:.85rem; margin-top:.7rem; font-style:italic; }

/* ============================================================
   The Hall of Reflections (eighth door)
   ============================================================ */
.hall-dots{ display:flex; gap:.5rem; justify-content:center; margin:.2rem 0 1.4rem; }
.hall-dots .hd{ width:8px; height:8px; border-radius:50%; background:rgba(196,179,236,.2); transition:.4s; }
.hall-dots .hd.done{ background:rgba(236,215,159,.5); }
.hall-dots .hd.cur{ background:var(--gold-bright); box-shadow:var(--glow-gold); transform:scale(1.35); }
.hall-stage{ max-width:520px; margin:0 auto; text-align:center; }
.hall-mirror-name{ font-family:var(--serif-display); font-style:italic; color:var(--lavender); font-size:1.05rem; letter-spacing:.03em; margin-bottom:1rem; }

/* the mirror frame */
.hall-mirror{ position:relative; width:min(74vw,270px); height:min(96vw,360px); margin:0 auto 1.4rem;
  border-radius:50% 50% 48% 48% / 42% 42% 58% 58%;
  background:radial-gradient(120% 120% at 50% 30%, rgba(34,26,74,.85), rgba(10,8,26,.92));
  border:2px solid rgba(196,179,236,.3); box-shadow:0 0 40px rgba(196,179,236,.14), inset 0 0 50px rgba(8,6,20,.7);
  display:flex; align-items:flex-end; justify-content:center; overflow:hidden; }
.hall-mirror::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(150deg, rgba(255,255,255,.06), transparent 40%); }
.hall-fig-wrap{ position:relative; height:86%; display:flex; align-items:flex-end; }
.hf{ height:100%; width:auto; filter:drop-shadow(0 0 14px rgba(196,179,236,.4)); }
.hf.warp{ animation:hfWarp 4.5s ease-in-out infinite; transform-origin:50% 100%; }
@keyframes hfWarp{ 0%,100%{ transform:scaleX(1) skewX(0deg);} 25%{ transform:scaleX(1.28) skewX(-6deg);} 60%{ transform:scaleX(.78) skewX(7deg);} }
.hf.elder{ height:94%; transform:scaleX(.92) rotate(-3deg); opacity:.82; }
.hf.small{ height:44%; }
.hf.blurred{ filter:blur(2.5px) drop-shadow(0 0 14px rgba(196,179,236,.3)); }
.hf.weep{ opacity:.9; }
.hf.calmed{ opacity:.95; filter:drop-shadow(0 0 16px rgba(236,215,159,.35)); }
.tear{ position:absolute; top:24%; left:44%; width:4px; height:9px; border-radius:50% 50% 50% 50%/40% 40% 60% 60%;
  background:rgba(196,210,255,.9); animation:tearFall 2.6s ease-in infinite; }
.tear.t2{ left:54%; animation-delay:1.1s; }
@keyframes tearFall{ 0%{ transform:translateY(0); opacity:0; } 15%{ opacity:.9; } 100%{ transform:translateY(120px); opacity:0; } }

/* menagerie */
.hall-menagerie{ display:flex; align-items:flex-end; gap:.4rem; height:70%; padding-bottom:6%; }
.hall-menagerie .hc{ height:70%; filter:drop-shadow(0 0 10px rgba(196,179,236,.3)); }
.hall-menagerie .hc.bob{ animation:hcBob 2.4s ease-in-out infinite; }
.hall-menagerie .hc.bob2{ height:52%; animation:hcBob 2.9s ease-in-out infinite .4s; }
@keyframes hcBob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }

/* empty */
.hall-empty{ position:relative; width:100%; height:100%; }
.he-fog{ position:absolute; left:30%; top:40%; width:60%; height:50%; border-radius:50%; background:radial-gradient(closest-side, rgba(196,179,236,.1), transparent 70%); filter:blur(12px); animation:heFog 8s ease-in-out infinite; }
.he-fog.b{ left:10%; top:30%; width:70%; animation-duration:11s; animation-direction:alternate-reverse; }
@keyframes heFog{ 0%,100%{ transform:translate(0,0);} 50%{ transform:translate(10%,-6%);} }

/* many */
.hall-many{ display:flex; align-items:flex-end; justify-content:center; gap:2px; height:80%; padding-bottom:5%; }
.hall-many .hf{ height:70%; opacity:.55; }
.hall-many .hf.me{ height:82%; opacity:1; filter:drop-shadow(0 0 16px rgba(246,233,191,.5)); }
.hall-many.smiling .hf{ opacity:.8; }

/* door mirror */
.hall-door-mirror{ position:relative; width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.hall-door-mirror .hdm-glow{ width:44%; height:64%; border-radius:50% 50% 46% 46%/44% 44% 56% 56%;
  background:radial-gradient(closest-side, rgba(246,233,191,.16), rgba(196,179,236,.06) 55%, transparent 75%);
  box-shadow:0 0 40px rgba(246,233,191,.18); animation:hdmPulse 5s ease-in-out infinite; }
@keyframes hdmPulse{ 0%,100%{ opacity:.7; transform:scale(.97);} 50%{ opacity:1; transform:scale(1.03);} }
.hall-door-mirror.big{ width:min(70vw,240px); height:min(80vw,300px); margin:0 auto 1.4rem; }

/* text + choices */
.hall-text{ color:var(--ink-soft); font-size:1.02rem; line-height:1.6; max-width:46ch; margin:0 auto 1.4rem; }
.hall-choices{ display:flex; flex-direction:column; gap:.7rem; max-width:30ch; margin:0 auto; }
.hall-choice{ padding:.7rem 1.2rem; border-radius:14px; background:rgba(20,14,44,.5); border:1px solid rgba(196,179,236,.3);
  color:var(--ink); font-family:var(--serif-body); font-size:1rem; transition:.25s; }
.hall-choice:hover:not(:disabled){ background:rgba(196,179,236,.12); border-color:var(--lavender); box-shadow:var(--glow-lav); }
.hall-choice:disabled{ opacity:.32; cursor:default; }
.hall-choice.chosen{ opacity:1; border-color:rgba(236,215,159,.6); color:var(--gold-bright); background:rgba(236,215,159,.08); }
.hall-resp{ color:var(--lavender); font-style:italic; font-size:1rem; line-height:1.6; max-width:44ch; margin:1.3rem auto 0;
  opacity:0; transform:translateY(6px); transition:opacity .8s ease, transform .8s var(--ease-cinema); }
.hall-resp.show{ opacity:1; transform:none; }
.hall-advance{ margin-top:1.4rem; min-height:2.6rem; }
.hall-walkon{ padding:.65rem 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.15rem; letter-spacing:.06em; transition:.3s; animation:walkonIn .8s ease both; }
.hall-walkon:hover{ background:rgba(236,215,159,.1); box-shadow:var(--glow-gold); }
@keyframes walkonIn{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }
.hall-threshold{ text-align:center; }

@media (prefers-reduced-motion:reduce){
  .hf.warp, .hall-menagerie .hc, .he-fog, .hdm-glow, .tear{ animation:none !important; }
}

/* ===== Hall of Reflections — explorable mirror-worlds ===== */
.hall-prompt{ text-align:center; font-family:var(--serif-display); font-style:italic; color:var(--lavender); font-size:1.1rem; margin:.2rem 0 .8rem; }
.mirror-scene{ position:relative; width:min(94vw,560px); height:min(64vh,400px); margin:0 auto 1.2rem;
  border-radius:18px; overflow:hidden; border:1px solid rgba(196,179,236,.22); box-shadow:inset 0 0 60px rgba(6,4,16,.6);
  background:radial-gradient(120% 90% at 50% 20%, rgba(34,26,74,.7), rgba(10,8,26,.92)); cursor:default; }
/* per-mirror moods */
.mirror-scene.sc-field{ background:radial-gradient(120% 90% at 50% 30%, rgba(70,86,54,.5), rgba(26,30,40,.9)), linear-gradient(180deg, rgba(60,50,30,.4), rgba(12,14,20,.95)); }
.mirror-scene.sc-ripple{ background:radial-gradient(120% 100% at 50% 30%, rgba(40,54,96,.7), rgba(10,12,30,.95)); }
.mirror-scene.sc-dusk{ background:radial-gradient(90% 80% at 50% 40%, rgba(58,44,74,.55), rgba(12,9,24,.95)); }
.mirror-scene.sc-nursery{ background:radial-gradient(100% 90% at 50% 40%, rgba(66,50,92,.5), rgba(14,10,28,.94)); }
.mirror-scene.sc-fog{ background:radial-gradient(120% 100% at 50% 45%, rgba(48,46,72,.6), rgba(12,11,24,.95)); }
.mirror-scene.sc-crowd{ background:radial-gradient(120% 100% at 50% 35%, rgba(38,30,80,.65), rgba(10,8,26,.95)); }
.mirror-scene.sc-rainlit{ background:radial-gradient(120% 100% at 50% 30%, rgba(34,44,82,.6), rgba(10,10,26,.95)); }
.mirror-scene.sc-thresh{ background:radial-gradient(80% 80% at 50% 45%, rgba(30,26,70,.7), rgba(6,5,16,.97)); }

.ms-caption{ position:absolute; left:0; right:0; top:0; z-index:4; pointer-events:none;
  padding:.9rem 1.1rem 1.4rem; text-align:center; color:var(--ink); font-size:.98rem; line-height:1.5;
  background:linear-gradient(180deg, rgba(8,6,20,.82), rgba(8,6,20,.45) 70%, transparent);
  opacity:0; transform:translateY(-6px); transition:opacity .5s ease, transform .5s var(--ease-cinema); }
.ms-caption.show{ opacity:1; transform:none; }

.ms-item{ position:absolute; transform:translate(-50%,-50%); width:64px; height:64px; padding:0;
  background:none; border:none; cursor:pointer; display:grid; place-items:center; z-index:3;
  filter:drop-shadow(0 0 10px rgba(196,179,236,.25)); transition:transform .3s var(--ease-cinema); animation:msItemBreathe 4s ease-in-out infinite; }
.ms-item:hover{ transform:translate(-50%,-50%) scale(1.12); }
.ms-item.seen{ animation:none; filter:drop-shadow(0 0 6px rgba(236,215,159,.3)); opacity:.85; }
.ms-item svg{ max-width:100%; max-height:100%; }
.ms-item .msg-glyph{ font-size:2.3rem; line-height:1; }
.ms-item .ms-crowd{ display:flex; align-items:flex-end; gap:1px; }
.ms-item .ms-crowd .hf{ height:44px; opacity:.6; }
.ms-item .ms-crowd .hf.me{ height:54px; opacity:1; filter:drop-shadow(0 0 10px rgba(246,233,191,.5)); }
.ms-item .ms-crowd.smiling .hf{ opacity:.82; }
.ms-item .ms-weepwrap{ position:relative; display:inline-block; }
@keyframes msItemBreathe{ 0%,100%{ transform:translate(-50%,-50%) translateY(0); } 50%{ transform:translate(-50%,-50%) translateY(-5px); } }

/* the dreamer's presence — a mote that walks toward what you examine */
.ms-you{ position:absolute; bottom:7%; width:12px; height:30px; transform:translateX(-50%); z-index:2;
  border-radius:50% 50% 46% 46%/60% 60% 40% 40%;
  background:radial-gradient(closest-side, rgba(246,240,224,.95), rgba(196,179,236,.5) 70%, transparent);
  box-shadow:0 0 16px rgba(196,179,236,.55); transition:left .65s var(--ease-cinema); }
.ms-hint{ position:absolute; left:0; right:0; bottom:3%; text-align:center; z-index:4; pointer-events:none;
  font-size:.76rem; font-style:italic; color:var(--lavender-dim); letter-spacing:.03em; transition:opacity .6s ease; }

@media (prefers-reduced-motion:reduce){ .ms-item{ animation:none; } .ms-you{ transition:none; } }

/* ===== detailed dream-creatures (menagerie) ===== */
.dream-rabbit, .dream-frog{ overflow:visible; }
.dream-rabbit{ animation:crBreathe 4.6s ease-in-out infinite; transform-origin:50% 92%; }
.dream-frog{ animation:crBreathe 4s ease-in-out infinite .3s; transform-origin:50% 90%; }
@keyframes crBreathe{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.03,1.05);} }
.rb-ear-r{ transform-box:fill-box; transform-origin:bottom center; animation:earTwitch 7s ease-in-out infinite; }
@keyframes earTwitch{ 0%,85%,100%{ transform:rotate(0);} 89%{ transform:rotate(-10deg);} 93%{ transform:rotate(4deg);} }
.rb-eyes, .fg-eyes{ transform-box:fill-box; transform-origin:center; animation:crBlink 6s infinite; }
@keyframes crBlink{ 0%,94%,100%{ transform:scaleY(1);} 97%{ transform:scaleY(.12);} }
.fg-throat{ transform-box:fill-box; transform-origin:center; animation:throatPuff 3.3s ease-in-out infinite; }
@keyframes throatPuff{ 0%,100%{ transform:scale(1); opacity:.45;} 50%{ transform:scale(1.22,1.35); opacity:.7;} }
@media (prefers-reduced-motion:reduce){ .dream-rabbit,.dream-frog,.rb-ear-r,.rb-eyes,.fg-eyes,.fg-throat{ animation:none !important; } }

/* ============================================================
   The Subconscious — third-ending confrontation
   ============================================================ */
.sub-resolve{ display:flex; align-items:center; gap:.8rem; max-width:640px; margin:.2rem auto 1rem; }
.sub-rlabel{ font-size:.74rem; text-transform:uppercase; letter-spacing:.08em; color:var(--lavender-dim); }
.sub-bar{ flex:1; height:10px; border-radius:999px; background:rgba(10,8,24,.6); border:1px solid var(--line-soft); overflow:hidden; }
.sub-bar b{ display:block; height:100%; width:0; border-radius:999px; background:linear-gradient(90deg, rgba(196,179,236,.8), var(--gold-bright)); box-shadow:0 0 12px rgba(236,215,159,.4); transition:width .18s linear; }
.sub-stage{ position:relative; width:min(94vw,640px); height:min(66vh,470px); margin:0 auto; overflow:hidden;
  border-radius:18px; border:1px solid rgba(196,179,236,.2); touch-action:none; cursor:none;
  background:radial-gradient(120% 90% at 50% 15%, rgba(28,22,66,.7), rgba(6,5,16,.96)); box-shadow:inset 0 0 70px rgba(4,3,12,.7); }
.sub-stage.struck{ box-shadow:inset 0 0 0 3px rgba(232,120,120,.55), inset 0 0 70px rgba(120,20,30,.4); }
.sub-fig{ position:absolute; width:96px; height:120px; transform:translate(-50%,-50%); pointer-events:none; transition:opacity .4s ease;
  background:radial-gradient(50% 60% at 50% 40%, rgba(240,236,255,.85), rgba(214,206,255,.3) 55%, transparent 74%);
  filter:drop-shadow(0 0 26px rgba(214,206,255,.5)); border-radius:50% 50% 46% 46%/60% 60% 40% 40%; }
.sub-fig .sf-core{ position:absolute; left:50%; top:34%; width:26px; height:26px; transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle, #fff, rgba(240,236,255,.6) 60%, transparent); animation:sfPulse 3s ease-in-out infinite; }
@keyframes sfPulse{ 0%,100%{ opacity:.7; transform:translate(-50%,-50%) scale(1);} 50%{ opacity:1; transform:translate(-50%,-50%) scale(1.15);} }
.sub-you{ position:absolute; width:34px; height:34px; transform:translate(-50%,-50%); pointer-events:none; border-radius:50%;
  background:radial-gradient(circle, rgba(246,240,224,.95), rgba(196,179,236,.5) 60%, transparent 75%);
  box-shadow:0 0 20px rgba(196,179,236,.7); z-index:3; }
.sub-phrase{ position:absolute; transform:translate(-50%,-50%); pointer-events:none; white-space:nowrap;
  font-family:var(--serif-body); font-style:italic; font-size:.98rem; letter-spacing:.02em;
  color:rgba(232,180,190,.92); text-shadow:0 0 12px rgba(200,80,100,.5); z-index:2; }
.sub-phrase.hit{ animation:subShatter .3s ease forwards; }
@keyframes subShatter{ from{ opacity:1; } to{ opacity:0; transform:translate(-50%,-50%) scale(1.5); filter:blur(3px); } }
.sub-hint{ text-align:center; color:var(--lavender-dim); font-size:.82rem; margin-top:.7rem; font-style:italic; }
.sub-retry{ display:inline-block; margin-top:.4rem; color:var(--gold-bright); cursor:pointer; font-weight:600; font-style:normal; }
.sub-retry:hover{ text-shadow:var(--glow-gold); }

/* the third ending overlay */
#subEnd{ position:fixed; inset:0; z-index:70; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.3rem; text-align:center; padding:2.4rem 1.4rem; overflow:auto;
  background:radial-gradient(125% 110% at 50% 40%, rgba(26,22,60,.96), rgba(6,5,16,.99));
  opacity:0; visibility:hidden; transition:opacity 1.8s ease, visibility 1.8s ease; }
#subEnd.show{ opacity:1; visibility:visible; }
#subEnd .endmark.harmony{ color:var(--gold-bright); font-size:2.6rem; text-shadow:var(--glow-gold); animation:sfPulse 4s ease-in-out infinite; }
#subEnd h2{ font-family:var(--serif-display); font-weight:600; font-size:clamp(2rem,6vw,3.2rem); color:var(--ink); margin:.2rem 0 1rem; text-shadow:0 0 40px rgba(196,179,236,.4); }
#subEndBody{ max-width:52ch; }
#subEndBody p{ color:var(--ink-soft); font-size:1.05rem; line-height:1.7; margin:0 0 .9rem; }
#subEndBody p:last-child{ color:var(--lavender); font-style:italic; }
@media (prefers-reduced-motion:reduce){ .sub-fig .sf-core, #subEnd .endmark.harmony{ animation:none; } }

/* ============================================================
   ✦ REVAMP — the night sky breathes
   A deeper, quieter kind of alive: aurora ribbons behind the fog,
   film grain to kill gradient banding, a title lit from within,
   an orchestrated hub entrance, and shooting stars that let go of
   the sky. Everything animates on transform/opacity only, and the
   entire ambient world PAUSES while a game screen covers it.
   ============================================================ */

/* — aurora: two slow ribbons of borrowed light behind the fog — */
.aurora{ position:absolute; left:-25%; top:-30%; width:150%; height:75%; pointer-events:none; mix-blend-mode:screen;
  background:linear-gradient(103deg, transparent 18%, rgba(140,160,230,.10) 34%, rgba(196,179,236,.12) 48%, rgba(120,200,190,.07) 62%, rgba(236,215,159,.05) 74%, transparent 88%);
  filter:blur(34px); transform-origin:50% 10%;
  translate:calc(var(--px,0)*10px) calc(var(--py,0)*8px);
  animation:auroraDrift 75s ease-in-out infinite alternate; }
.aurora.b{ top:-42%; height:70%; filter:blur(46px);
  background:linear-gradient(97deg, transparent 22%, rgba(196,179,236,.08) 42%, rgba(150,130,220,.10) 58%, transparent 80%);
  animation:auroraDriftB 95s ease-in-out infinite alternate; }
@keyframes auroraDrift{ from{ transform:translate3d(-4%,0,0) rotate(-2deg) scaleY(1);} to{ transform:translate3d(4%,2%,0) rotate(2deg) scaleY(1.18);} }
@keyframes auroraDriftB{ from{ transform:translate3d(5%,1%,0) rotate(1.5deg);} to{ transform:translate3d(-5%,-1%,0) rotate(-1.5deg);} }

/* — film grain: static, nearly invisible, and it erases gradient banding — */
#grain{ position:fixed; inset:0; z-index:130; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-repeat:repeat; background-size:160px 160px; }

/* — a star lets go of the sky — */
.shooting-star{ position:fixed; z-index:6; width:3px; height:3px; border-radius:50%; pointer-events:none;
  background:#fff; box-shadow:0 0 8px 2px rgba(255,255,255,.8), 0 0 26px 4px rgba(196,179,236,.45);
  animation:starShoot var(--ss-dur,1.4s) cubic-bezier(.25,.6,.45,1) forwards; }
.shooting-star::before{ content:""; position:absolute; left:1px; top:50%; width:120px; height:2px; transform:translateY(-50%);
  border-radius:999px; background:linear-gradient(90deg, rgba(255,255,255,.85), rgba(196,179,236,.35) 45%, transparent); }
@keyframes starShoot{
  0%{ opacity:0; transform:translate3d(0,0,0) rotate(var(--ss-ang,160deg)); }
  10%{ opacity:1; }
  70%{ opacity:.9; }
  100%{ opacity:0; transform:translate3d(var(--ss-dx,-40vw),var(--ss-dy,16vh),0) rotate(var(--ss-ang,160deg)); }
}

/* — the title, lit from within (ink fading into lavender) — */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .title, #intro h1{
    background:linear-gradient(180deg, var(--ink) 25%, var(--lavender-2) 62%, var(--lavender) 105%);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  }
}

/* — orchestrated hub entrance: the dream assembles one breath at a time —
   done with transitions on opacity/translate so it can never fight the
   animation property (lucidity shake, title glow, secret pulses all keep working) */
#app .crest, #app .title, #app .subtitle, #app .status, #app .world-shell, #app .world-hint,
#app #portals, #app .bonus-meta, #app .index-link, #app .hub-foot{ opacity:0; translate:0 20px; }
#app.live .crest, #app.live .title, #app.live .subtitle, #app.live .status, #app.live .world-shell,
#app.live .world-hint, #app.live #portals, #app.live .bonus-meta, #app.live .index-link, #app.live .hub-foot{ opacity:1; translate:0 0; }
#app.live .crest{ transition:opacity .9s ease .15s, translate .9s var(--ease-cinema) .15s; }
#app.live .title{ transition:opacity 1s ease .3s, translate 1s var(--ease-cinema) .3s; }
#app.live .subtitle{ transition:opacity 1s ease .5s, translate 1s var(--ease-cinema) .5s; }
#app.live .status{ transition:opacity 1s ease .65s, translate 1s var(--ease-cinema) .65s; }
#app.live .world-shell{ transition:opacity 1.1s ease .8s, translate 1.1s var(--ease-cinema) .8s; }
#app.live .world-hint{ transition:opacity 1.1s ease .9s, translate 1.1s var(--ease-cinema) .9s; }
#app.live #portals{ transition:opacity 1.1s ease 1s, translate 1.1s var(--ease-cinema) 1s; }
#app.live .bonus-meta{ transition:opacity 1.1s ease 1.15s, translate 1.1s var(--ease-cinema) 1.15s; }
#app.live .index-link{ transition:opacity 1s ease 1.25s, translate 1s var(--ease-cinema) 1.25s, background .35s, transform .35s, border-color .35s, box-shadow .35s; }
#app.live .hub-foot{ transition:opacity 1.2s ease 1.4s, translate 1.2s var(--ease-cinema) 1.4s; }
/* keep the whole-world dimming of the portal grid (must outrank the entrance rule) */
body.whole #app.live #portals{ opacity:.78; }

/* — a passing gleam over the invitation buttons — */
.enter-btn, .index-link{ position:relative; overflow:hidden; }
.enter-btn::after, .index-link::after{ content:""; position:absolute; top:-40%; bottom:-40%; left:-70%; width:45%;
  transform:skewX(-20deg) translateX(0); pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(248,238,202,.16), transparent);
  transition:transform .9s var(--ease-cinema); }
.enter-btn:hover::after, .index-link:hover::after{ transform:skewX(-20deg) translateX(420%); }

/* — collected fragments earn a small star by their state — */
.portal.collected .pstate::before{ content:"✦ "; }

/* — quiet, dream-coloured scrollbars — */
.scroll{ scrollbar-width:thin; scrollbar-color:rgba(141,128,184,.35) transparent; }
.scroll::-webkit-scrollbar{ width:10px; }
.scroll::-webkit-scrollbar-track{ background:transparent; }
.scroll::-webkit-scrollbar-thumb{ background:rgba(141,128,184,.3); border-radius:999px; border:3px solid transparent; background-clip:content-box; }
.scroll::-webkit-scrollbar-thumb:hover{ background:rgba(196,179,236,.5); border:3px solid transparent; background-clip:content-box; }

/* ============================================================
   PERFORMANCE — the dream idles while you're inside a fragment
   ============================================================ */
/* every ambient animation pauses while a screen covers the hub
   (the JS adds body.screen-open in openScreen / removes it in closeScreen) */
body.screen-open #app *, body.screen-open #atmosphere *, body.screen-open #dreamlife *,
body.screen-open #weatherBg *, body.screen-open #weatherFg *, body.screen-open #sleepCat *{
  animation-play-state:paused !important;
}
/* below-fold hub sections + index pages skip rendering until scrolled near */
.nightmare-meta, .rooms-meta, .deep-meta{ content-visibility:auto; contain-intrinsic-size:auto 420px; }
.index-grid{ content-visibility:auto; contain-intrinsic-size:auto 620px; }

/* — reduced motion: keep the light, lose the movement — */
@media (prefers-reduced-motion:reduce){
  .aurora{ animation:none !important; }
  .shooting-star{ display:none !important; }
  #app .crest, #app .title, #app .subtitle, #app .status, #app .world-shell, #app .world-hint,
  #app #portals, #app .bonus-meta, #app .index-link, #app .hub-foot{ opacity:1 !important; translate:none !important; transition:none !important; }
  .enter-btn::after, .index-link::after{ display:none; }
}

/* ============================================================
   ✦ DREAM RELICS — the second collection
   A quieter grid than the fragments: small held keepsakes, gold when
   carried, a sealed diamond when still out there.
   ============================================================ */
.relics-grid{ display:grid; gap:.8rem; width:min(96vw,860px); grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.relic{ position:relative; padding:1.1rem 1.2rem 1.2rem; border-radius:16px; text-align:center;
  background:linear-gradient(165deg, rgba(28,21,58,.7), rgba(13,9,32,.7)); border:1px solid rgba(196,179,236,.12); transition:.4s var(--ease-cinema); }
.relic.sealed{ opacity:.5; filter:saturate(.4); }
.relic.held{ border-color:rgba(236,215,159,.38); box-shadow:inset 0 1px 0 rgba(248,238,202,.1), 0 0 20px rgba(236,215,159,.08); }
.relic.held.custom{ border-color:rgba(196,179,236,.4); box-shadow:0 0 20px rgba(150,120,200,.14); }
.relic-glyph{ display:block; font-size:2.3rem; line-height:1; color:var(--gold-bright); text-shadow:var(--glow-gold); margin-bottom:.35rem; }
.relic.custom .relic-glyph{ color:var(--lavender-2); text-shadow:var(--glow-lav); }
.relic-glyph.locked{ color:var(--lavender-dim); text-shadow:none; opacity:.6; }
.relic h4{ font-family:var(--serif-display); font-weight:500; font-size:1.1rem; margin:.1rem 0 .4rem; color:var(--ink); letter-spacing:.01em; }
.relic.sealed h4{ color:var(--lavender-dim); }
.relic p{ margin:0; font-size:.86rem; line-height:1.45; color:var(--ink-soft); font-style:italic; }
.relic .relic-how{ color:var(--lavender-dim); font-style:normal; font-size:.82rem; }

/* ============================================================
   ✦ SECRET ROOMS (admin-authored, config-driven)
   ============================================================ */
.customportal::after{ background:linear-gradient(rgba(196,179,236,0), rgba(196,179,236,.5), rgba(196,179,236,0)) !important; }
#screen-custom{ background:radial-gradient(135% 120% at 50% 24%, rgba(30,24,66,.96), rgba(10,8,26,.99)); }
.custom-room{ display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding:clamp(1.4rem,4vh,2.4rem) 1.4rem; gap:1rem; }
.custom-desc{ max-width:52ch; text-align:center; color:var(--ink); font-size:1.05rem; line-height:1.6; margin:0; font-style:italic; }
.custom-objects{ display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; margin-top:.4rem; }
.custom-obj{ padding:.65rem 1.2rem; border-radius:14px; background:rgba(20,14,44,.55); border:1px solid rgba(196,179,236,.28);
  color:var(--ink); font-family:var(--serif-body); font-size:1rem; transition:.25s; -webkit-tap-highlight-color:transparent; }
.custom-obj:hover{ border-color:var(--lavender); background:rgba(196,179,236,.12); box-shadow:var(--glow-lav); transform:translateY(-2px); }
.custom-obj.examined{ border-color:rgba(236,215,159,.5); color:var(--gold-bright); }
.custom-obj .co-name{ letter-spacing:.01em; }
.custom-reward{ margin:.4rem auto 2rem; text-align:center; }
.custom-claim{ padding:.7rem 1.9rem; border-radius:999px; background:transparent; border:1px solid rgba(236,215,159,.55);
  color:var(--gold-bright); font-family:var(--serif-display); font-size:1.15rem; letter-spacing:.06em; transition:.3s; box-shadow:var(--glow-gold); }
.custom-claim:hover{ background:rgba(236,215,159,.1); transform:translateY(-1px); }
.custom-claimed{ color:var(--lavender); font-style:italic; font-size:.95rem; margin:0; }

/* ============================================================
   ✦ v2.0 — tutorial · update board · version mark · night market
   ============================================================ */

/* — version mark (click for the update board) — */
#versionTag{ position:fixed; right:12px; bottom:calc(10px + env(safe-area-inset-bottom)); z-index:26; cursor:pointer;
  font-family:var(--serif-body); font-size:.72rem; letter-spacing:.14em; color:var(--lavender-dim);
  padding:.22rem .7rem; border:1px solid rgba(196,179,236,.16); border-radius:999px;
  background:rgba(12,8,30,.55); transition:.3s; -webkit-tap-highlight-color:transparent; user-select:none; }
#versionTag:hover{ color:var(--gold-bright); border-color:rgba(236,215,159,.45); }
#versionTag.vnew::after{ content:""; display:inline-block; width:6px; height:6px; margin-left:.45em; border-radius:50%;
  background:var(--gold-bright); box-shadow:var(--glow-gold); animation:vnewPulse 2.2s ease-in-out infinite; vertical-align:1px; }
@keyframes vnewPulse{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } }

/* — update board — */
.updates-list{ width:min(94vw,720px); display:flex; flex-direction:column; gap:1.3rem; }
.upd{ border:1px solid rgba(196,179,236,.14); border-radius:18px; padding:1.3rem 1.4rem 1rem;
  background:linear-gradient(165deg, rgba(28,21,58,.72), rgba(13,9,32,.72)); }
.upd.latest{ border-color:rgba(236,215,159,.35); box-shadow:inset 0 1px 0 rgba(248,238,202,.1), 0 0 26px rgba(236,215,159,.07); }
.upd-head{ display:flex; align-items:baseline; gap:.8rem; flex-wrap:wrap; margin-bottom:1rem; }
.upd-v{ font-family:var(--serif-display); font-size:.8rem; letter-spacing:.14em; color:var(--gold-bright);
  border:1px solid rgba(236,215,159,.4); border-radius:999px; padding:.16rem .75rem; }
.upd.latest .upd-v{ box-shadow:var(--glow-gold); }
.upd-head h3{ font-family:var(--serif-display); font-weight:500; font-size:1.5rem; margin:0; color:var(--ink); flex:1; }
.upd-date{ font-size:.78rem; color:var(--lavender-dim); font-style:italic; letter-spacing:.04em; }
.upd-item{ display:flex; gap:.9rem; padding:.7rem 0; border-top:1px solid rgba(196,179,236,.08); }
.upd-item .ui-g{ flex:0 0 auto; font-size:1.4rem; line-height:1.2; color:var(--gold); text-shadow:var(--glow-gold); }
.upd-item h4{ font-family:var(--serif-display); font-weight:500; font-size:1.08rem; margin:0 0 .25rem; color:var(--lavender-2); }
.upd-item p{ margin:0; font-size:.92rem; line-height:1.5; color:var(--ink-soft); }

/* — tutorial overlay — */
#tutorial{ position:fixed; inset:0; z-index:86; display:flex; align-items:center; justify-content:center; padding:1.4rem;
  background:rgba(6,4,16,.78); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px);
  opacity:0; visibility:hidden; transition:opacity .6s ease, visibility .6s ease; }
#tutorial.show{ opacity:1; visibility:visible; }
.tut-card{ position:relative; width:min(480px,94vw); text-align:center; padding:2.2rem 1.9rem 1.6rem; border-radius:22px;
  background:linear-gradient(165deg, rgba(34,26,71,.96), rgba(16,11,38,.97));
  border:1px solid rgba(196,179,236,.28); box-shadow:0 24px 80px rgba(4,2,12,.6), inset 0 1px 0 rgba(255,255,255,.06); }
.tut-card.stepin{ animation:tutStep .5s var(--ease-cinema); }
@keyframes tutStep{ from{ opacity:.4; transform:translateY(6px);} to{ opacity:1; transform:none;} }
.tut-skip{ position:absolute; top:.9rem; right:1rem; background:none; border:none; color:var(--lavender-dim);
  font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; transition:.25s; padding:.3rem .5rem; }
.tut-skip:hover{ color:var(--gold); }
.tut-glyph{ font-size:2.6rem; line-height:1; color:var(--gold-bright); text-shadow:var(--glow-gold); margin-bottom:.7rem; animation:breathe 6s ease-in-out infinite; }
.tut-title{ font-family:var(--serif-display); font-weight:500; font-size:1.65rem; margin:0 0 .7rem; color:var(--ink); letter-spacing:.01em; }
.tut-text{ margin:0 auto; max-width:38ch; color:var(--ink-soft); font-size:1rem; line-height:1.65; min-height:6.6em; }
.tut-dots{ display:flex; gap:.5rem; justify-content:center; margin:1.2rem 0 1.1rem; }
.tut-dots span{ width:8px; height:8px; border-radius:50%; background:rgba(196,179,236,.22); transition:.35s; }
.tut-dots span.done{ background:rgba(236,215,159,.5); }
.tut-dots span.cur{ background:var(--gold-bright); box-shadow:var(--glow-gold); transform:scale(1.3); }
.tut-acts{ display:flex; justify-content:space-between; align-items:center; gap:.8rem; }
.tut-back{ background:none; border:none; color:var(--lavender-dim); font-size:.92rem; letter-spacing:.04em; transition:.25s; padding:.5rem .6rem; }
.tut-back:hover{ color:var(--lavender-2); }
.tut-next{ padding:.6rem 1.7rem; border-radius:999px; background:transparent; border:1px solid rgba(236,215,159,.55);
  color:var(--gold-bright); font-family:var(--serif-display); font-size:1.05rem; letter-spacing:.08em; transition:.3s; box-shadow:var(--glow-gold); }
.tut-next:hover{ background:rgba(236,215,159,.1); }

/* — the night market — */
#screen-market{ background:radial-gradient(135% 120% at 50% 20%, rgba(36,26,60,.96), rgba(10,7,24,.99)); }
.market-stalls{ display:grid; gap:1.1rem; width:min(96vw,1020px); grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); align-items:start; }
.stall{ border:1px solid rgba(196,179,236,.16); border-radius:20px; padding:1.2rem 1.2rem 1.3rem; text-align:center;
  background:linear-gradient(170deg, rgba(30,22,58,.8), rgba(12,8,28,.85)); box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 14px 40px rgba(0,0,0,.35); }
.stall-art{ width:min(64%,190px); margin:0 auto .4rem; opacity:.95; }
.stall-art svg{ width:100%; height:auto; display:block; }
.stall h3{ font-family:var(--serif-display); font-weight:500; font-size:1.35rem; margin:.2rem 0 .4rem; color:var(--gold-bright); letter-spacing:.01em; }
.stall-sub{ margin:0 0 .9rem; font-size:.88rem; font-style:italic; line-height:1.5; color:var(--ink-soft); min-height:3.9em; }
.market-msg{ min-height:3.2em; margin:.6rem 0; font-family:var(--serif-display); font-style:italic; font-size:.98rem;
  line-height:1.5; color:var(--lavender-2); transition:opacity .3s; }
.stall-acts{ margin-top:.4rem; }
.market-btn{ padding:.6rem 1.5rem; border-radius:999px; background:transparent; border:1px solid rgba(236,215,159,.45);
  color:var(--gold-bright); font-family:var(--serif-display); font-size:1rem; letter-spacing:.06em; transition:.3s; -webkit-tap-highlight-color:transparent; }
.market-btn:hover:not(:disabled){ background:rgba(236,215,159,.1); box-shadow:var(--glow-gold); }
.market-btn:disabled{ opacity:.4; cursor:default; }
.market-btn b{ color:var(--gold-bright); }

/* the shell game */
.shell-stage{ position:relative; width:288px; height:96px; margin:0 auto; }
.shell{ position:absolute; left:0; top:14px; width:80px; height:62px; padding:0; background:none; border:none; cursor:pointer;
  transition:transform .3s var(--ease-cinema), top .25s ease; z-index:2; -webkit-tap-highlight-color:transparent; }
.shell svg{ width:100%; height:100%; display:block; filter:drop-shadow(0 5px 10px rgba(0,0,0,.4)); }
.shell:hover{ top:10px; }
.shell-stage.down .shell{ top:22px; }
.sh-pearl{ position:absolute; left:0; top:56px; width:18px; height:18px; border-radius:50%; z-index:1; opacity:0;
  background:radial-gradient(circle at 38% 32%, #fff, var(--gold-bright) 55%, rgba(199,173,110,.8));
  box-shadow:var(--glow-gold); transition:opacity .3s ease, transform .3s var(--ease-cinema); }
.sh-pearl.show{ opacity:1; }

@media (prefers-reduced-motion:reduce){
  .tut-glyph, #versionTag.vnew::after{ animation:none !important; }
  .shell{ transition:transform .12s linear, top .1s linear; }
}

/* ============================================================
   ✦ v3.0 — SKELETON LOADING (perceived performance)
   Dream-themed shimmer placeholders shown while backend content
   (dream wall, live counters) is loading — especially through the
   free-tier backend's cold start. Never a blank "is it broken?" gap.
   ============================================================ */
.sk{ position:relative; overflow:hidden; border-radius:8px;
  background:linear-gradient(100deg, rgba(196,179,236,.07) 30%, rgba(196,179,236,.16) 50%, rgba(196,179,236,.07) 70%);
  background-size:220% 100%; animation:skSweep 1.6s ease-in-out infinite; }
@keyframes skSweep{ 0%{ background-position:120% 0; } 100%{ background-position:-120% 0; } }
.sk-line{ height:.85em; margin:.55rem auto; width:min(38ch,86%); border-radius:999px; }
.sk-line.w1{ width:min(30ch,74%); } .sk-line.w2{ width:min(34ch,80%); } .sk-line.w3{ width:min(26ch,62%); }
.sk-count{ height:1.05em; width:26ch; max-width:80%; margin:0 auto 1rem; border-radius:999px; }
.sk-wall{ display:flex; flex-direction:column; align-items:center; gap:.15rem; }
.sk-note{ margin:.9rem 0 0; font-style:italic; font-size:.82rem; color:var(--lavender-dim); letter-spacing:.02em; opacity:.85; }
@media (prefers-reduced-motion:reduce){
  .sk{ animation:none; background:rgba(196,179,236,.1); }
}
.sk-count{ display:inline-block; }
.ds-empty{ color:var(--lavender-dim) !important; font-style:italic; opacity:.85; }

/* ============================================================
   ✦ v4.0 — GRAPHICS QUALITY LEVELS (perf)
   High = full atmosphere. Medium drops the most expensive full-screen
   effects (film grain, aurora, backdrop blur) and thins particles.
   Low strips the dream down to a clean, cheap render for phones /
   weak machines so it doesn't lag.
   ============================================================ */
#gfxBtn svg{ display:block; }

/* --- MEDIUM: cut grain + aurora + all backdrop-filters --- */
body.gfx-medium #grain,
body.gfx-medium .aurora{ display:none !important; }
body.gfx-medium *{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
/* compensate for lost blur with slightly more opaque glass */
body.gfx-medium .chip,
body.gfx-medium .back{ background:rgba(20,14,44,.78); }

/* --- LOW: strip to a calm, cheap dream --- */
body.gfx-low #grain,
body.gfx-low .aurora,
body.gfx-low .fog,
body.gfx-low .floaters,
body.gfx-low #dreamLight,
body.gfx-low #particles,
body.gfx-low #weatherBg,
body.gfx-low #weatherFg,
body.gfx-low #weatherDawn,
body.gfx-low #weatherGlass,
body.gfx-low #dreamlife,
body.gfx-low #sleepCat{ display:none !important; }
body.gfx-low *{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
/* silence the ambient infinite animations that cost the most to composite */
body.gfx-low .liquid{ animation:none !important; }
body.gfx-low .title,
body.gfx-low #intro .intro-mark,
body.gfx-low .portal,
body.gfx-low .sector,
body.gfx-low #wholeMoon,
body.gfx-low .bloom-ray,
body.gfx-low .bloom-ring,
body.gfx-low .w-thread,
body.gfx-low .cloud-bob,
body.gfx-low .relic-glyph,
body.gfx-low .enter-btn::after,
body.gfx-low .index-link::after{ animation:none !important; }
/* keep the ground gently alive so it doesn't feel dead: a static soft wash */
body.gfx-low #atmosphere{ background:radial-gradient(70% 60% at 30% 20%, rgba(63,44,120,.28), transparent 60%),
  radial-gradient(60% 55% at 80% 90%, rgba(40,30,84,.26), transparent 62%); }
body.gfx-low .chip,
body.gfx-low .back,
body.gfx-low .portal,
body.gfx-low .dream,
body.gfx-low .stall{ background:rgba(20,14,44,.9); }
/* trim heavy glows so text stays crisp and cheap */
body.gfx-low .title{ text-shadow:0 1px 20px rgba(196,179,236,.22); }

/* ============================================================
   ✦ v4.0 — Dream Depth badge · The Tide · The Cartographer · The Turning
   ============================================================ */

/* Dream Depth badge in the hub status */
.depth-badge{ display:inline-flex; align-items:center; gap:.4rem; padding:.16rem .1rem; }
.depth-badge .db-glyph{ color:var(--gold-bright); text-shadow:var(--glow-gold); font-size:1rem; }
.depth-badge .db-name{ font-family:var(--serif-display); letter-spacing:.08em; text-transform:uppercase; font-size:.78rem; color:var(--lavender); }
.depth-badge .db-meter{ width:52px; height:5px; border-radius:999px; background:rgba(196,179,236,.18); overflow:hidden; box-shadow:inset 0 0 4px rgba(0,0,0,.35); }
.depth-badge .db-fill{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--lavender-2),var(--gold-bright)); transition:width .6s var(--ease-cinema); }
.depth-badge .db-num{ color:var(--gold-bright); font-variant-numeric:tabular-nums; font-size:.82rem; }

/* seasonal portal accent */
.seasonportal .pg{ color:#bfe0ff; text-shadow:0 0 16px rgba(160,200,255,.5); }
#screen-season{ background:radial-gradient(135% 120% at 50% 22%, rgba(26,30,58,.96), rgba(8,10,26,.99)); }
.season-stage{ width:min(94vw,620px); margin:1rem auto 3rem; }
.season-body{ color:var(--ink); font-size:1.06rem; line-height:1.7; text-align:center; }
.season-wip{ text-align:center; padding:2rem 1rem; }
.season-wip .wip-mark{ font-size:3rem; color:#bfe0ff; text-shadow:0 0 22px rgba(160,200,255,.5); animation:breathe 5s ease-in-out infinite; }
.season-wip .wip-lead{ font-family:var(--serif-display); font-size:1.5rem; color:var(--lavender-2); margin:.8rem 0 .4rem; }
.season-wip .wip-sub{ color:var(--ink-soft); font-style:italic; max-width:46ch; margin:.4rem auto 1.4rem; line-height:1.6; }
.season-wip .wip-tag{ display:inline-block; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; color:var(--lavender-dim); border:1px solid rgba(196,179,236,.25); border-radius:999px; padding:.3rem .9rem; }

/* The Leaping Tide */
.tide-bar{ position:relative; width:min(92vw,520px); height:40px; margin:1.4rem auto .4rem; border-radius:999px;
  background:linear-gradient(180deg, rgba(18,13,44,.7), rgba(28,22,64,.6)); border:1px solid rgba(196,179,236,.2);
  box-shadow:inset 0 0 22px rgba(8,6,22,.6); overflow:hidden; }
.tide-zone{ position:absolute; top:0; bottom:0; left:37%; width:26%; border-radius:12px;
  background:radial-gradient(60% 100% at 50% 50%, rgba(236,215,159,.4), rgba(236,215,159,.08));
  border-left:1px solid rgba(236,215,159,.4); border-right:1px solid rgba(236,215,159,.4); transition:left .2s ease, width .2s ease; }
.tide-zone.flash{ animation:tideFlash .35s ease; }
@keyframes tideFlash{ 0%{ filter:brightness(1);} 40%{ filter:brightness(2);} 100%{ filter:brightness(1);} }
.tide-marker{ position:absolute; top:-4px; bottom:-4px; left:0; width:5px; margin-left:-2.5px; border-radius:999px;
  background:linear-gradient(180deg, #fff, var(--gold-bright)); box-shadow:0 0 12px rgba(246,233,191,.9); }
.tide-dots{ display:flex; gap:.55rem; justify-content:center; margin:.8rem 0; }
.tide-dots span{ width:10px; height:10px; border-radius:50%; background:rgba(196,179,236,.25); transition:.3s; }
.tide-dots span.done{ background:var(--gold); box-shadow:var(--glow-gold); }
@media (prefers-reduced-motion:reduce){ .season-wip .wip-mark{ animation:none; } }

/* The Cartographer's Sky */
.cartog-round{ text-align:center; color:var(--lavender-dim); letter-spacing:.18em; text-transform:uppercase; font-size:.8rem; margin-bottom:.6rem; }
.cartog-sky{ position:relative; width:min(94vw,520px); aspect-ratio:1/1; margin:0 auto; border-radius:18px;
  border:1px solid rgba(196,179,236,.18); overflow:hidden; cursor:crosshair; touch-action:manipulation;
  background:radial-gradient(circle at 50% 40%, rgba(24,20,54,.7), rgba(8,6,22,.85)); box-shadow:inset 0 0 50px rgba(6,4,18,.6); }
.cartog-star{ position:absolute; width:16px; height:16px; margin:-8px 0 0 -8px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, #fff, rgba(236,215,159,.5) 55%, transparent 72%); box-shadow:0 0 14px rgba(246,233,191,.8);
  opacity:0; transition:opacity .35s ease; }
.cartog-star.show{ opacity:1; }
.cartog-star.veiled{ opacity:0; }
.cartog-star.lit{ opacity:1; background:radial-gradient(circle, var(--gold-bright), rgba(199,173,110,.4) 55%, transparent 72%); box-shadow:var(--glow-gold); animation:matched .7s ease; }
.cartog-miss{ position:absolute; width:22px; height:22px; margin:-11px 0 0 -11px; border-radius:50%; pointer-events:none;
  border:2px solid rgba(200,120,140,.7); animation:ripple .6s ease-out forwards; }

/* ============================================================
   ✦ v5.0 — THE UNWRITTEN WORLD (generated from the player)
   ============================================================ */
.unwrittenportal .pg{ color:#e9dcff; text-shadow:0 0 18px rgba(190,160,255,.6); }
.unwrittenportal.fresh{ animation:uwPulse 3.2s ease-in-out infinite; }
@keyframes uwPulse{ 0%,100%{ box-shadow:0 0 22px rgba(190,160,255,.14); } 50%{ box-shadow:0 0 34px rgba(190,160,255,.34), inset 0 0 22px rgba(190,160,255,.1); } }

#screen-unwritten{ background:radial-gradient(140% 120% at 50% 20%, rgba(30,22,66,.97), rgba(8,6,22,.99)); }
.uw-stage{ position:relative; width:min(96vw,700px); margin:1rem auto 1.2rem; }
.uw-scene{ position:relative; width:100%; height:min(64vh,440px); border-radius:20px; overflow:hidden;
  border:1px solid rgba(196,179,236,.22); box-shadow:inset 0 0 70px rgba(6,4,18,.65);
  background:radial-gradient(120% 90% at 50% 22%, rgba(40,32,84,.66), rgba(10,8,26,.92)); }
/* per-tendency mood wash */
.uw-scene.uw-reflective{ background:radial-gradient(120% 90% at 50% 25%, rgba(46,52,96,.6), rgba(10,10,26,.92)); }
.uw-scene.uw-swift{ background:radial-gradient(120% 90% at 50% 30%, rgba(58,40,90,.6), rgba(12,8,26,.93)); }
.uw-scene.uw-explorer{ background:radial-gradient(120% 90% at 50% 26%, rgba(38,54,74,.6), rgba(8,12,24,.93)); }
.uw-scene.uw-persistent{ background:radial-gradient(120% 90% at 50% 30%, rgba(56,46,40,.6), rgba(14,10,22,.93)); }
.uw-scene.uw-avoidant{ background:radial-gradient(120% 90% at 50% 24%, rgba(70,64,44,.55), rgba(16,12,24,.92)); }
.uw-scene.uw-restless{ background:radial-gradient(120% 90% at 50% 30%, rgba(64,36,60,.6), rgba(14,8,22,.93)); }
.uw-scene.uw-dweller{ background:radial-gradient(120% 90% at 50% 34%, rgba(30,30,58,.62), rgba(8,8,20,.94)); }
.uw-caption{ position:absolute; left:0; right:0; top:0; z-index:4; pointer-events:none; padding:1rem 1.2rem 1.6rem;
  text-align:center; color:var(--ink); font-size:1rem; line-height:1.55; font-style:italic;
  background:linear-gradient(180deg, rgba(8,6,20,.86), rgba(8,6,20,.4) 72%, transparent);
  opacity:0; transform:translateY(-6px); transition:opacity .55s ease, transform .55s var(--ease-cinema); }
.uw-caption.show{ opacity:1; transform:none; }
.uw-node{ position:absolute; transform:translate(-50%,-50%); z-index:3; background:none; border:none; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:.3rem; padding:.3rem; -webkit-tap-highlight-color:transparent;
  transition:transform .3s var(--ease-cinema); animation:uwFloat 5s ease-in-out infinite; }
.uw-node:hover{ transform:translate(-50%,-50%) scale(1.14); }
.uw-node.seen{ animation:none; }
.uw-node .uw-g{ font-size:2rem; line-height:1; color:var(--lavender-2); text-shadow:0 0 16px rgba(196,179,236,.55); }
.uw-node.seen .uw-g{ color:var(--gold-bright); text-shadow:var(--glow-gold); }
.uw-node .uw-label{ font-family:var(--serif-display); font-style:italic; font-size:.72rem; letter-spacing:.03em; color:var(--lavender-dim);
  opacity:0; transition:opacity .3s; white-space:nowrap; }
.uw-node:hover .uw-label,.uw-node.seen .uw-label{ opacity:.9; }
@keyframes uwFloat{ 0%,100%{ margin-top:0; } 50%{ margin-top:-6px; } }
.uw-you{ position:absolute; left:50%; top:82%; width:12px; height:28px; transform:translate(-50%,-50%); z-index:2;
  border-radius:50% 50% 46% 46%/60% 60% 40% 40%;
  background:radial-gradient(closest-side, rgba(246,240,224,.95), rgba(196,179,236,.5) 70%, transparent);
  box-shadow:0 0 16px rgba(196,179,236,.55); transition:left .7s var(--ease-cinema), top .7s var(--ease-cinema); }

/* the laws panel */
.uw-laws{ width:min(96vw,700px); margin:0 auto 3rem; padding:1.4rem 1.5rem; border-radius:18px;
  border:1px solid rgba(196,179,236,.18); background:linear-gradient(165deg, rgba(28,21,58,.6), rgba(12,9,30,.6)); }
.uw-laws-title{ font-family:var(--serif-display); font-weight:500; font-size:1.4rem; color:var(--lavender-2); margin:0 0 .4rem; }
.uw-laws-sub{ color:var(--ink-soft); font-style:italic; font-size:.92rem; margin:0 0 1rem; line-height:1.5; }
.uw-law-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem; }
.uw-law{ display:flex; align-items:center; gap:.8rem; justify-content:space-between; padding:.7rem .9rem; border-radius:12px;
  background:rgba(10,8,24,.4); border:1px solid rgba(196,179,236,.1); }
.uw-law .uwl-text{ font-family:var(--serif-display); font-style:italic; color:var(--ink); font-size:1rem; line-height:1.4; }
.uw-law.rewritable{ border-color:rgba(236,215,159,.3); }
.uw-law.rewritten{ border-color:rgba(190,160,255,.5); box-shadow:0 0 18px rgba(190,160,255,.14); }
.uw-law.rewritten .uwl-text{ color:#e9dcff; }
.uwl-btn{ flex:0 0 auto; padding:.4rem 1rem; border-radius:999px; background:transparent; border:1px solid rgba(236,215,159,.5);
  color:var(--gold-bright); font-family:var(--serif-display); font-size:.9rem; letter-spacing:.04em; transition:.3s; }
.uwl-btn:hover{ background:rgba(236,215,159,.1); box-shadow:var(--glow-gold); }
.uwl-tag{ flex:0 0 auto; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:#c9b4ff; }
.uw-rewrite-opts{ display:flex; flex-direction:column; gap:.6rem; margin:.4rem 0 1rem; }
.uw-rewrite-opt{ text-align:left; padding:.8rem 1.1rem; border-radius:12px; background:rgba(20,14,44,.55);
  border:1px solid rgba(196,179,236,.28); color:var(--ink); font-family:var(--serif-display); font-style:italic; font-size:1.02rem; transition:.25s; }
.uw-rewrite-opt:hover{ border-color:var(--lavender); background:rgba(196,179,236,.12); box-shadow:var(--glow-lav); transform:translateY(-1px); }
.uw-rewrite-cancel{ background:none; border:none; color:var(--lavender-dim); font-size:.9rem; font-style:italic; text-decoration:underline; }
@media (prefers-reduced-motion:reduce){ .uw-node,.unwrittenportal.fresh{ animation:none !important; } }

/* ============================================================
   ✦ v5.1 — THE COLLECTIVE UNCONSCIOUS (drift dreams)
   ============================================================ */
.uw-drifts{ width:min(96vw,700px); margin:0 auto 1.4rem; }
.uw-drift-title{ font-family:var(--serif-display); font-weight:500; font-size:1.4rem; color:#cdd8ff; margin:0 0 .4rem; text-shadow:0 0 16px rgba(150,180,255,.3); }
.uw-drift-sub{ color:var(--ink-soft); font-style:italic; font-size:.92rem; margin:0 0 1rem; line-height:1.55; }
.uw-drift-loading{ display:flex; flex-direction:column; gap:.4rem; }
.uw-drift-loading .sk{ height:.85em; border-radius:999px; }
.uw-drift-empty{ color:var(--lavender-dim); font-style:italic; font-size:.95rem; line-height:1.6; padding:.8rem 1rem; border:1px dashed rgba(196,179,236,.2); border-radius:12px; }
.uw-drift-card{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:.7rem; padding:1.2rem 1.3rem; margin-bottom:.9rem;
  border-radius:16px; border:1px solid rgba(150,180,255,.22); background:linear-gradient(165deg, rgba(26,30,60,.7), rgba(12,12,32,.7));
  box-shadow:inset 0 1px 0 rgba(180,200,255,.06), 0 0 24px rgba(120,150,220,.08); }
.uw-drift-g{ font-size:2rem; line-height:1; color:#cdd8ff; text-shadow:0 0 16px rgba(150,180,255,.5); }
.uw-drift-line{ margin:0; font-family:var(--serif-display); font-style:italic; font-size:1.08rem; line-height:1.5; color:var(--ink); max-width:44ch; }
.uw-drift-acts{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-top:.2rem; }
.uw-drift-btn{ padding:.5rem 1.2rem; border-radius:999px; background:transparent; border:1px solid rgba(150,180,255,.5);
  color:#dde6ff; font-family:var(--serif-display); font-size:.95rem; letter-spacing:.03em; transition:.25s; -webkit-tap-highlight-color:transparent; }
.uw-drift-btn:hover{ background:rgba(150,180,255,.12); box-shadow:0 0 18px rgba(150,180,255,.25); }
.uw-drift-btn.ghost{ border-color:rgba(196,179,236,.3); color:var(--lavender-dim); }
.uw-drift-btn.ghost:hover{ color:var(--lavender-2); box-shadow:none; background:rgba(196,179,236,.08); }
.uw-drift-node .uw-g{ color:#cdd8ff !important; text-shadow:0 0 16px rgba(150,180,255,.6) !important; }
.uw-kept{ margin-top:1rem; padding-top:1rem; border-top:1px solid rgba(196,179,236,.12); }
.uw-kept-title{ font-family:var(--serif-display); font-size:1.05rem; color:var(--lavender); margin:0 0 .5rem; }
.uw-kept ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.4rem; }
.uw-kept li{ font-style:italic; color:var(--ink-soft); font-size:.9rem; line-height:1.45; }
.uw-kept .uwk-g{ color:#cdd8ff; margin-right:.3rem; }

/* ============================================================
   ✦ v5.2 — WORLD EVENTS (global, admin-triggered)
   ============================================================ */
#eventBanner{ position:fixed; left:50%; top:calc(.7rem + env(safe-area-inset-top)); transform:translateX(-50%); z-index:96;
  display:flex; align-items:center; gap:.7rem; max-width:min(92vw,520px); padding:.6rem 1rem .6rem .9rem;
  border-radius:14px; background:linear-gradient(160deg, rgba(30,22,60,.95), rgba(15,10,36,.95));
  border:1px solid rgba(236,215,159,.4); box-shadow:0 10px 40px rgba(0,0,0,.5), var(--glow-gold);
  animation:evIn 1s var(--ease-cinema) both; }
@keyframes evIn{ from{ opacity:0; transform:translateX(-50%) translateY(-12px);} to{ opacity:1; transform:translateX(-50%) translateY(0);} }
#eventBanner.hide{ display:none; }
#eventBanner .ev-g{ font-size:1.6rem; color:var(--gold-bright); text-shadow:var(--glow-gold); animation:breathe 5s ease-in-out infinite; }
#eventBanner .ev-txt{ display:flex; flex-direction:column; gap:.1rem; }
#eventBanner .ev-txt b{ font-family:var(--serif-display); font-weight:500; font-size:1.05rem; color:var(--ink); letter-spacing:.01em; }
#eventBanner .ev-txt small{ font-style:italic; color:var(--ink-soft); font-size:.82rem; line-height:1.35; }
#eventBanner .ev-count{ color:var(--gold-bright) !important; font-variant-numeric:tabular-nums; }
#eventBanner .ev-x{ margin-left:auto; align-self:flex-start; background:none; border:none; color:var(--lavender-dim); font-size:.9rem; cursor:pointer; }
#eventBanner .ev-x:hover{ color:var(--ink); }

/* — Night Without Moon: the light goes out — */
body.event-no-moon .crest,
body.event-no-moon .intro-mark,
body.event-no-moon #wholeGlow,
body.event-no-moon #wholeMoon{ filter:grayscale(1) brightness(.5); opacity:.5; transition:filter 2s ease, opacity 2s ease; }
body.event-no-moon #vignette{ background:radial-gradient(125% 120% at 50% 42%, transparent 38%, rgba(2,1,6,.78) 100%); }
body.event-no-moon #themeBtn{ opacity:.5; }

/* — The Archive Falls Asleep: the interface dreams — */
body.event-asleep #app{ filter:saturate(.72) brightness(.86); transition:filter 3s ease; }
body.event-asleep #atmosphere{ filter:blur(1.5px) brightness(.8); animation:asleepBreathe 9s ease-in-out infinite; }
@keyframes asleepBreathe{ 0%,100%{ filter:blur(1.5px) brightness(.8);} 50%{ filter:blur(3px) brightness(.66);} }
body.event-asleep #vignette{ background:radial-gradient(120% 120% at 50% 46%, transparent 30%, rgba(3,2,10,.8) 100%); }

/* — The Great Misremembering: things come back wrong — */
body.event-misremembering .deep-section-title,
body.event-misremembering .bonus-section-title,
body.event-misremembering .rooms-section-title{ animation:misremember 6s ease-in-out infinite; }
@keyframes misremember{ 0%,100%{ filter:hue-rotate(0) blur(0);} 45%{ filter:hue-rotate(40deg) blur(.4px); letter-spacing:.14em;} 55%{ filter:hue-rotate(-30deg);} }
body.event-misremembering .title{ animation:titleGlow 9s ease-in-out infinite, misremember 11s ease-in-out infinite; }

/* — The Unwritten Hour: the drift-door shimmers — */
body.event-unwritten-hour .unwrittenportal{ animation:uwPulse 1.8s ease-in-out infinite; border-color:rgba(190,160,255,.5); }
.uw-drift-hour{ color:#cdd8ff; font-style:italic; font-size:.92rem; margin:.2rem 0 1rem; text-shadow:0 0 14px rgba(150,180,255,.4); }

@media (prefers-reduced-motion:reduce){
  #eventBanner,#eventBanner .ev-g,body.event-asleep #atmosphere,body.event-misremembering .deep-section-title,body.event-misremembering .title{ animation:none !important; }
}

/* ============================================================
   ✦ v5.3 — THE SLEEPING ARCHIVE (regions + endings)
   ============================================================ */
.uw-region-nav{ display:flex; gap:.4rem; flex-wrap:wrap; justify-content:center; margin-bottom:.7rem; }
.uw-region-btn{ padding:.35rem .9rem; border-radius:999px; background:rgba(20,14,44,.55); border:1px solid rgba(196,179,236,.22);
  color:var(--lavender); font-family:var(--serif-display); font-size:.86rem; letter-spacing:.03em; transition:.25s; -webkit-tap-highlight-color:transparent; }
.uw-region-btn:hover{ border-color:rgba(196,179,236,.5); color:var(--lavender-2); }
.uw-region-btn.cur{ background:rgba(196,179,236,.16); border-color:rgba(196,179,236,.6); color:var(--gold-bright); box-shadow:var(--glow-lav); }
.uw-region-btn.locked{ opacity:.4; }
.uw-region-btn.locked::after{ content:" ·"; }
/* region tints */
.uw-scene.uw-city{ background:radial-gradient(120% 90% at 50% 26%, rgba(44,40,72,.62), rgba(10,9,24,.93)); }
.uw-scene.uw-weather{ background:radial-gradient(120% 90% at 50% 24%, rgba(34,46,72,.62), rgba(8,10,26,.93)); }
.uw-scene.uw-house{ background:radial-gradient(120% 90% at 50% 30%, rgba(52,42,60,.6), rgba(12,9,22,.93)); }
.uw-scene.uw-archive{ background:radial-gradient(120% 90% at 50% 26%, rgba(38,30,66,.66), rgba(6,5,18,.95)); }
.uw-action-node .uw-g{ color:var(--gold-bright) !important; text-shadow:var(--glow-gold) !important; }
.uw-action-node{ animation:uwPulse 2.6s ease-in-out infinite; }

/* the endings panel */
.uw-endings{ width:min(96vw,700px); margin:0 auto 1.6rem; padding:1.5rem 1.5rem; border-radius:18px;
  border:1px solid rgba(236,215,159,.32); background:linear-gradient(165deg, rgba(34,26,64,.7), rgba(12,9,28,.72)); box-shadow:0 0 30px rgba(236,215,159,.08); }
.uw-end-title{ font-family:var(--serif-display); font-weight:500; font-size:1.6rem; color:var(--gold-bright); margin:0 0 .4rem; text-shadow:var(--glow-gold); }
.uw-end-sub{ color:var(--ink-soft); font-style:italic; font-size:.95rem; line-height:1.6; margin:0 0 1.2rem; }
.uw-end-list{ display:flex; flex-direction:column; gap:.7rem; }
.uw-end-card{ display:grid; grid-template-columns:auto 1fr; column-gap:.9rem; row-gap:.2rem; text-align:left; align-items:center;
  padding:.9rem 1.1rem; border-radius:14px; background:rgba(16,11,34,.5); border:1px solid rgba(196,179,236,.18); transition:.25s; -webkit-tap-highlight-color:transparent; }
.uw-end-card:not(.locked):hover{ border-color:rgba(236,215,159,.5); background:rgba(30,22,58,.6); box-shadow:var(--glow-gold); transform:translateY(-1px); }
.uw-end-card.locked{ opacity:.5; cursor:default; }
.uw-end-card.done{ border-color:rgba(190,160,255,.45); }
.uw-end-g{ grid-row:1/3; font-size:2rem; color:var(--gold-bright); text-shadow:var(--glow-gold); }
.uw-end-name{ font-family:var(--serif-display); font-size:1.2rem; color:var(--ink); }
.uw-end-seen{ font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:#c9b4ff; }
.uw-end-lead{ font-style:italic; color:var(--ink-soft); font-size:.9rem; line-height:1.45; }

/* the momentous ending overlay */
#uwEndOverlay{ position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; padding:2rem 1.4rem; overflow:auto;
  background:radial-gradient(130% 120% at 50% 40%, rgba(24,18,52,.97), rgba(5,4,14,.99)); opacity:0; transition:opacity 1.6s ease; }
#uwEndOverlay.show{ display:flex; opacity:1; }
.uwe-inner{ max-width:56ch; text-align:center; }
#uwEndBody .uwe-mark{ font-size:3rem; color:var(--gold-bright); text-shadow:var(--glow-gold); animation:breathe 6s ease-in-out infinite; }
#uwEndBody h2{ font-family:var(--serif-display); font-weight:500; font-size:clamp(2rem,7vw,3rem); color:var(--ink); margin:.6rem 0 1rem; letter-spacing:.02em; }
#uwEndBody p{ color:var(--ink-soft); font-size:1.08rem; line-height:1.75; margin:0 0 1rem; }
#uwEndBody .uwe-after{ font-family:var(--serif-display); font-style:italic; font-size:1.3rem; color:var(--gold-bright); text-shadow:var(--glow-gold); margin-top:1.4rem; }
#uwEndBody .end-acts{ margin-top:1.4rem; }
#uwEndBody #uwEndClose{ padding:.7rem 1.9rem; 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:.06em; transition:.3s; }
#uwEndBody #uwEndClose:hover{ background:rgba(236,215,159,.1); }

/* The Forgotten — the dream stops naming you */
body.forgotten .who{ opacity:.4; font-style:italic; }
/* The Archive Ending — the whole dream re-titles itself */
body.archive-ending .crest{ color:var(--lavender-2); }
@media (prefers-reduced-motion:reduce){ .uw-action-node,#uwEndBody .uwe-mark{ animation:none !important; } }

/* ============================================================
   ✦ v5.4 — THE SPEAKING (Dream Language combiner)
   ============================================================ */
.lang-combiner{ width:min(96vw,760px); margin:1.4rem auto 0; padding:1.4rem 1.5rem; border-radius:18px;
  border:1px solid rgba(196,179,236,.18); background:linear-gradient(165deg, rgba(24,17,48,.55), rgba(10,7,24,.55)); }
.lang-locked-note{ color:var(--lavender-dim); font-style:italic; font-size:.95rem; line-height:1.6; margin:0; text-align:center; }
.lang-speak-title{ font-family:var(--serif-display); font-weight:500; font-size:1.35rem; color:var(--gold-bright); text-shadow:var(--glow-gold); margin-bottom:.3rem; }
.lang-speak-sub{ color:var(--ink-soft); font-style:italic; font-size:.9rem; margin:0 0 1.1rem; line-height:1.5; }
.lang-sentence-build{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-bottom:.6rem; }
.lang-slot{ width:56px; height:56px; border-radius:14px; border:1px dashed rgba(196,179,236,.3); background:rgba(10,8,24,.4);
  display:grid; place-items:center; cursor:default; transition:.2s; }
.lang-slot.filled{ border-style:solid; border-color:rgba(236,215,159,.5); background:rgba(30,22,58,.6); cursor:pointer; }
.lang-slot .ls-g{ font-size:1.8rem; color:var(--gold-bright); text-shadow:var(--glow-gold); }
.lang-slot .ls-dot{ color:var(--lavender-dim); font-size:1.4rem; }
.lang-speak-btn{ margin-left:auto; padding:.6rem 1.5rem; 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; }
.lang-speak-btn:hover{ background:rgba(236,215,159,.1); box-shadow:var(--glow-gold); }
.lang-response{ min-height:1.4em; margin:.4rem 0 1.1rem; font-style:italic; color:var(--lavender-dim); font-size:.95rem; line-height:1.6; transition:.3s; }
.lang-response.true{ color:var(--gold-bright); text-shadow:0 0 14px rgba(236,215,159,.25); }
.glyph-palette{ display:flex; flex-wrap:wrap; gap:.55rem; }
.glyph-chip{ display:flex; flex-direction:column; align-items:center; gap:.1rem; width:64px; padding:.5rem .3rem; border-radius:12px;
  background:rgba(20,14,44,.5); border:1px solid rgba(196,179,236,.2); color:var(--lavender-2); transition:.2s; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.glyph-chip:not(.locked):hover{ border-color:var(--lavender); background:rgba(196,179,236,.12); transform:translateY(-2px); box-shadow:var(--glow-lav); }
.glyph-chip .gc-g{ font-size:1.5rem; line-height:1; }
.glyph-chip .gc-w{ font-size:.66rem; letter-spacing:.04em; color:var(--lavender-dim); }
.glyph-chip.locked{ opacity:.4; cursor:default; }
.glyph-chip.locked .gc-g{ color:var(--lavender-dim); }
.lang-spoken{ margin-top:1.2rem; padding-top:1rem; border-top:1px solid rgba(196,179,236,.12); }
.lang-spoken h4{ font-family:var(--serif-display); font-size:1.02rem; color:var(--lavender); margin:0 0 .5rem; }
.lang-spoken ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.3rem; }
.lang-spoken li{ font-style:italic; color:var(--ink-soft); font-size:.88rem; letter-spacing:.03em; }
/* HIDE·SELF·FALSE — the reflection goes out */
body.lang-no-reflection .mcell.seed, body.lang-no-reflection .mirror-board .divider{ opacity:.35; }

/* ============================================================
   v6.0 — ONEIRIC MATERIALISM
   A unified art direction: dreams rendered as physical materials.
   This layer is ADDITIVE. Every expensive effect is gated behind
   the graphics level (body.gfx-*) and prefers-reduced-motion so the
   game stays smooth on ordinary phones. Nothing here touches game
   logic — it re-skins existing markup (.portal, .nportal, etc.).
   ============================================================ */
:root{
  /* --- material vocabulary (reusable surfaces) --- */
  --mat-dream-glass:   linear-gradient(158deg, rgba(32,24,64,.62), rgba(12,8,28,.66));
  --mat-velvet-dark:   radial-gradient(120% 150% at 50% -12%, rgba(22,15,48,.92), rgba(6,4,16,.97));
  --mat-lunar-metal:   linear-gradient(150deg, rgba(214,220,246,.20), rgba(150,160,204,.06) 60%, rgba(120,130,180,.10));
  --mat-sleeping-paper:linear-gradient(152deg, rgba(238,231,212,.94), rgba(206,197,172,.9));
  --mat-nightmare-res: linear-gradient(160deg, rgba(28,10,26,.9), rgba(8,4,16,.92));

  /* --- rift / threshold system --- */
  --rift-beyond:  radial-gradient(78% 100% at 50% 46%, rgba(3,2,10,0) 20%, rgba(3,2,10,.6) 64%, rgba(1,0,6,.96) 100%);
  --rift-edge:      rgba(196,179,236,.55);
  --rift-edge-gold: rgba(246,233,191,.72);
  --rift-edge-nm:   rgba(206,96,140,.58);
  --rift-seam:      rgba(216,206,248,.6);
  --rift-seam-gold: rgba(250,238,196,.85);

  /* --- motion vocabulary --- */
  --ease-rift:cubic-bezier(.7,0,.18,1);
  --dur-ambient:13s;

  /* --- portal starfield: crisp SVG circles, tiled behind every door's opening --- */
  --portal-stars:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='112'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='12' cy='16' r='2.2'/%3E%3Ccircle cx='60' cy='22' r='2.4'/%3E%3Ccircle cx='108' cy='18' r='2'/%3E%3Ccircle cx='140' cy='28' r='2.2'/%3E%3Ccircle cx='44' cy='50' r='2.3'/%3E%3Ccircle cx='94' cy='48' r='2.1'/%3E%3Ccircle cx='134' cy='56' r='2'/%3E%3Ccircle cx='10' cy='72' r='2'/%3E%3Ccircle cx='54' cy='70' r='2.3'/%3E%3Ccircle cx='100' cy='74' r='2.1'/%3E%3Ccircle cx='142' cy='80' r='2'/%3E%3Ccircle cx='62' cy='102' r='2.2'/%3E%3Ccircle cx='126' cy='104' r='2'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='0.5'%3E%3Ccircle cx='34' cy='9' r='1.3'/%3E%3Ccircle cx='84' cy='11' r='1.3'/%3E%3Ccircle cx='124' cy='9' r='1.3'/%3E%3Ccircle cx='22' cy='42' r='1.3'/%3E%3Ccircle cx='72' cy='38' r='1.3'/%3E%3Ccircle cx='116' cy='42' r='1.3'/%3E%3Ccircle cx='32' cy='84' r='1.3'/%3E%3Ccircle cx='80' cy='88' r='1.3'/%3E%3Ccircle cx='24' cy='102' r='1.3'/%3E%3Ccircle cx='98' cy='100' r='1.3'/%3E%3C/g%3E%3C/svg%3E");

  /* --- depth planes (documented z-index scale) --- */
  --z-beyond:0; --z-content:2;
}


/* ---------- RIFT-CROSSING TRANSITION ----------
   Every step through a door is a passage through a tear: the world snaps
   shut along a luminous seam, then parts to reveal the place beyond.
   Overlay only — pointer-events:none, self-clearing. Skipped under
   reduced-motion / low graphics in JS so it never costs a frame that matters. */
#riftWipe{ position:fixed; inset:0; z-index:130; pointer-events:none; visibility:hidden; }
body.rift-cross #riftWipe{ visibility:visible; }
#riftWipe .rw-half{ position:absolute; top:-2%; bottom:-2%; width:51%;
  background:linear-gradient(90deg, rgba(6,4,16,.99), rgba(12,8,28,.9)); will-change:transform; }
#riftWipe .rw-l{ left:0; }
#riftWipe .rw-r{ right:0; }
#riftWipe .rw-seam{ position:absolute; top:-4%; bottom:-4%; left:50%; width:2px; margin-left:-1px; opacity:0;
  background:linear-gradient(to bottom, transparent, rgba(226,214,255,.95) 28%, rgba(246,233,191,.95) 60%, transparent);
  box-shadow:0 0 26px 5px rgba(210,196,255,.55); will-change:opacity,transform; }
body.rift-cross .rw-l{ animation:rwHalfL .58s var(--ease-rift) forwards; }
body.rift-cross .rw-r{ animation:rwHalfR .58s var(--ease-rift) forwards; }
body.rift-cross .rw-seam{ animation:rwSeam .58s ease forwards; }
@keyframes rwHalfL{ 0%,26%{ transform:translateX(0);} 100%{ transform:translateX(-102%);} }
@keyframes rwHalfR{ 0%,26%{ transform:translateX(0);} 100%{ transform:translateX(102%);} }
@keyframes rwSeam{ 0%{ opacity:0; transform:scaleY(.5);} 20%{ opacity:1; transform:scaleY(1);} 55%{ opacity:.9;} 100%{ opacity:0; } }

/* ============================================================
   v6.0 — PER-FRAGMENT ENVIRONMENTS
   Each of the eight dreams becomes its own place: a controlled palette
   derived from the global system + one signature atmosphere layer
   (::before, behind content). Subtle by design — never clutters, never
   hurts legibility. Animated layers are gated for reduced-motion and
   removed entirely at gfx-low.
   ============================================================ */
/* content always rides above the environment layer */
#screen-symbols>.scroll, #screen-constellation>.scroll, #screen-maze>.scroll,
#screen-mirror>.scroll, #screen-quiz>.scroll, #screen-water>.scroll,
#screen-lullaby>.scroll, #screen-falling>.scroll{ position:relative; z-index:1; }
#screen-symbols::before, #screen-constellation::before, #screen-maze::before,
#screen-mirror::before, #screen-quiz::before, #screen-water::before,
#screen-lullaby::before, #screen-falling::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; }

/* 1 · Veil of Symbols — sleeping sigils beneath drawn fabric */
#screen-symbols{ background:radial-gradient(125% 120% at 50% 8%, rgba(42,29,76,.96), rgba(14,9,30,.99)); }
#screen-symbols::before{
  background:
    linear-gradient(180deg, rgba(206,190,244,.09), transparent 42%),
    radial-gradient(60% 40% at 24% 30%, rgba(196,179,236,.10), transparent 60%),
    radial-gradient(60% 40% at 78% 66%, rgba(170,150,220,.08), transparent 60%);
  mix-blend-mode:screen; opacity:.9; }

/* 2 · Threadbare Constellation — deep sky with woven seams */
#screen-constellation{ background:radial-gradient(130% 120% at 50% 10%, rgba(18,20,58,.97), rgba(6,6,22,.99)); }
#screen-constellation::before{
  background:
    repeating-linear-gradient(58deg, rgba(196,179,236,.05) 0 1px, transparent 1px 46px),
    radial-gradient(1.5px 1.5px at 20% 24%, rgba(246,233,191,.8), transparent),
    radial-gradient(1.5px 1.5px at 68% 16%, rgba(226,214,255,.7), transparent),
    radial-gradient(1.5px 1.5px at 82% 52%, rgba(246,233,191,.6), transparent),
    radial-gradient(1.5px 1.5px at 36% 70%, rgba(226,214,255,.6), transparent),
    radial-gradient(1.5px 1.5px at 54% 40%, rgba(246,233,191,.5), transparent);
  opacity:.8; }

/* 3 · The Drifting Maze — fog and depth */
#screen-maze{ background:radial-gradient(130% 120% at 50% 40%, rgba(26,30,52,.96), rgba(9,11,24,.99)); }
#screen-maze::before{
  background:radial-gradient(70% 50% at 30% 60%, rgba(150,160,196,.10), transparent 62%),
             radial-gradient(60% 44% at 74% 34%, rgba(120,132,176,.08), transparent 60%);
  filter:blur(6px); animation:fragFog 26s ease-in-out infinite alternate; }
@keyframes fragFog{ from{ transform:translate3d(0,0,0);} to{ transform:translate3d(-4%,3%,0);} }

/* 4 · The Mirror Room — cold silver, a vertical seam of symmetry */
#screen-mirror{ background:radial-gradient(120% 120% at 50% 30%, rgba(22,34,58,.96), rgba(9,13,28,.99)); }
#screen-mirror::before{
  background:
    linear-gradient(90deg, transparent 48.6%, rgba(214,226,246,.14) 50%, transparent 51.4%),
    radial-gradient(50% 34% at 30% 24%, rgba(190,210,236,.07), transparent 60%),
    radial-gradient(46% 30% at 72% 70%, rgba(170,196,226,.06), transparent 60%);
  opacity:.85; }

/* 5 · Riddles of Sleep — a single lantern over a dim symbolic room */
#screen-quiz{ background:radial-gradient(120% 120% at 50% 26%, rgba(44,30,52,.96), rgba(16,10,26,.99)); }
#screen-quiz::before{
  background:radial-gradient(48% 40% at 50% 6%, rgba(246,215,150,.16), rgba(198,150,90,.05) 50%, transparent 74%);
  opacity:.9; }

/* 6 · Still Water — memory water and slow caustic light */
#screen-water{ background:radial-gradient(130% 120% at 50% 60%, rgba(14,36,52,.96), rgba(5,14,26,.99)); }
#screen-water::before{
  background:
    radial-gradient(40% 26% at 32% 66%, rgba(150,214,224,.10), transparent 62%),
    radial-gradient(44% 28% at 70% 50%, rgba(120,190,214,.09), transparent 62%),
    radial-gradient(38% 24% at 50% 82%, rgba(170,224,232,.08), transparent 60%);
  filter:blur(3px); animation:fragCaustic 18s ease-in-out infinite alternate; }
@keyframes fragCaustic{ from{ transform:scale(1) translateY(0); opacity:.8;} to{ transform:scale(1.06) translateY(-1.5%); opacity:1;} }

/* 7 · The Lullaby Sequence — living lights, a warm hum of glow */
#screen-lullaby{ background:radial-gradient(120% 120% at 50% 74%, rgba(32,34,46,.95), rgba(10,13,20,.99)); }
#screen-lullaby::before{
  background:
    radial-gradient(60% 40% at 50% 108%, rgba(246,224,168,.16), transparent 66%),
    radial-gradient(3px 3px at 26% 40%, rgba(246,233,191,.5), transparent),
    radial-gradient(3px 3px at 74% 32%, rgba(214,236,196,.4), transparent),
    radial-gradient(3px 3px at 58% 62%, rgba(246,233,191,.35), transparent);
  opacity:.9; }

/* 8 · The Falling — vertical depth, light falling through the world */
#screen-falling{ background:linear-gradient(180deg, rgba(32,25,64,.92), rgba(10,7,26,.99) 78%); }
#screen-falling::before{
  background:repeating-linear-gradient(180deg, rgba(214,205,240,.06) 0 2px, transparent 2px 90px);
  mix-blend-mode:screen; animation:fragFall 3.4s linear infinite; }
@keyframes fragFall{ from{ background-position:0 0;} to{ background-position:0 90px;} }

/* performance + reduced-motion gates for the environments */
body.gfx-low #screen-symbols::before, body.gfx-low #screen-constellation::before,
body.gfx-low #screen-maze::before, body.gfx-low #screen-mirror::before,
body.gfx-low #screen-quiz::before, body.gfx-low #screen-water::before,
body.gfx-low #screen-lullaby::before, body.gfx-low #screen-falling::before{ display:none; }
@media (prefers-reduced-motion:reduce){
  #screen-maze::before, #screen-water::before, #screen-falling::before{ animation:none; }
}

/* ============================================================
   v6.0 — THE SLEEPING INDEX as a living archival artifact
   The Index stops being a grid of cards and becomes a night
   manuscript: candlelit archive, chapter dividers, vellum leaves
   with a gilded spine and an illuminated sigil, and missing pages
   where dreams still sleep. Scoped to #screen-index only.
   ============================================================ */
#screen-index{ background:
  radial-gradient(120% 90% at 50% 0%, rgba(44,34,64,.96), rgba(14,10,28,.99)),
  radial-gradient(52% 40% at 50% 6%, rgba(246,215,150,.07), transparent 60%); }
/* faint ledger lines behind the whole codex (masked so edges fade) */
#screen-index::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:repeating-linear-gradient(180deg, rgba(214,205,240,.035) 0 1px, transparent 1px 38px);
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  mask-image:linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); opacity:.7; }
/* NOTE: must stay position:absolute (inset:0 from base .scroll) so this
   scroller is height-constrained to the fixed screen and actually scrolls.
   position:relative drops it out of constraint — with the Index's tall
   content it grows to full height and traps everything below the fold. */
#screen-index>.scroll{ position:absolute; z-index:1; }

/* chapter dividers — an ornament, small caps, a hairline rule trailing off */
#screen-index .marks-title{ display:flex; align-items:center; gap:.9rem; text-transform:uppercase;
  font-size:1.05rem; letter-spacing:.26em; color:var(--gold-deep); }
#screen-index .marks-title::before{ content:"❦"; letter-spacing:0; color:var(--gold); font-size:1.15rem; opacity:.85; }
#screen-index .marks-title::after{ content:""; flex:1; height:1px;
  background:linear-gradient(90deg, rgba(236,215,159,.4), transparent); }

/* every page is a bound leaf — squared spine edge, rounded fore-edge */
#screen-index .dream{ border-radius:5px 13px 13px 5px;
  background:linear-gradient(165deg, rgba(38,30,58,.86), rgba(18,13,34,.9)); }
/* a recovered page: gilded spine, warm vellum tint, illuminated sigil */
#screen-index .dream.unlocked{ border-color:rgba(236,215,159,.28);
  box-shadow:inset 3px 0 0 rgba(236,215,159,.4), inset 0 1px 0 rgba(248,238,202,.07);
  background:
    linear-gradient(90deg, rgba(58,46,26,.32), transparent 16%),
    linear-gradient(165deg, rgba(42,33,58,.86), rgba(18,13,34,.9)); }
#screen-index .dream.unlocked .sigil{ font-size:2rem;
  filter:drop-shadow(0 0 12px rgba(246,224,168,.55)); }
/* a page still sleeping: a missing leaf, dashed and faint */
#screen-index .dream.locked{ border-style:dashed; border-color:rgba(196,179,236,.14);
  box-shadow:none; background:linear-gradient(165deg, rgba(24,18,42,.5), rgba(12,9,26,.62)); }
#screen-index .dream.locked .sigil{ opacity:.4; }
/* the last page — the grandest leaf */
#screen-index .dream.final.unlocked{
  box-shadow:inset 4px 0 0 rgba(246,224,168,.6), var(--glow-gold);
  background:linear-gradient(90deg, rgba(70,54,24,.4), transparent 12%),
             linear-gradient(165deg, rgba(54,42,18,.5), rgba(24,17,8,.62)); }

/* ============================================================
   v6.0 — IMPOSSIBLE ROOMS get their own light
   Each Room That Should Not Exist already has a bespoke scene; now
   each also has its own spatial lighting, keyed off #screen-room's
   data-room attribute. One visual rule per room — nothing shared.
   ============================================================ */
#screen-room>.scroll{ position:relative; z-index:1; }
#screen-room::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.9; }

/* Soft Teeth — a warm, close, ivory-lit mouth of a room */
#screen-room[data-room="teeth"]{ background:radial-gradient(120% 110% at 50% 20%, rgba(52,36,50,.96), rgba(18,10,24,.99)); }
#screen-room[data-room="teeth"]::before{ background:radial-gradient(60% 44% at 50% 12%, rgba(246,214,196,.14), transparent 62%); }

/* Where Rain Waits — cool, vertical, held-breath blue */
#screen-room[data-room="rain"]{ background:linear-gradient(180deg, rgba(20,32,54,.95), rgba(7,12,26,.99)); }
#screen-room[data-room="rain"]::before{ background:
  repeating-linear-gradient(180deg, rgba(180,206,236,.05) 0 1px, transparent 1px 40px),
  radial-gradient(50% 40% at 50% 8%, rgba(150,190,224,.10), transparent 60%); }

/* Too Many Windows — a patchwork of incompatible skies */
#screen-room[data-room="windows"]{ background:radial-gradient(120% 120% at 50% 30%, rgba(26,28,54,.96), rgba(10,10,26,.99)); }
#screen-room[data-room="windows"]::before{ background:
  radial-gradient(26% 20% at 18% 22%, rgba(150,214,180,.12), transparent 60%),
  radial-gradient(24% 18% at 78% 26%, rgba(214,160,196,.12), transparent 60%),
  radial-gradient(22% 18% at 30% 74%, rgba(160,180,236,.12), transparent 60%),
  radial-gradient(24% 18% at 74% 70%, rgba(236,214,150,.10), transparent 60%);
  mix-blend-mode:screen; }

/* Beneath the Bed — a cozy dark strung with small stars */
#screen-room[data-room="bed"]{ background:radial-gradient(90% 80% at 50% 44%, rgba(24,20,44,.9), rgba(5,4,14,.995)); }
#screen-room[data-room="bed"]::before{ background:
  radial-gradient(1.5px 1.5px at 22% 30%, rgba(246,233,191,.8), transparent),
  radial-gradient(1.5px 1.5px at 68% 22%, rgba(226,214,255,.7), transparent),
  radial-gradient(1.5px 1.5px at 80% 58%, rgba(246,233,191,.6), transparent),
  radial-gradient(1.5px 1.5px at 40% 66%, rgba(226,214,255,.6), transparent),
  radial-gradient(1.5px 1.5px at 54% 40%, rgba(246,224,168,.6), transparent),
  radial-gradient(120% 90% at 50% 50%, transparent 46%, rgba(3,2,10,.6) 100%); }

/* Borrowed Names — soft drifting violet, nothing fixed */
#screen-room[data-room="names"]{ background:radial-gradient(120% 120% at 50% 26%, rgba(40,30,64,.95), rgba(14,10,30,.99)); }
#screen-room[data-room="names"]::before{ background:
  radial-gradient(50% 36% at 32% 30%, rgba(196,179,236,.12), transparent 60%),
  radial-gradient(46% 32% at 72% 66%, rgba(170,150,220,.10), transparent 60%); }

/* That Apologizes — a dim, muted grey-blue under one sorry lamp */
#screen-room[data-room="sorry"]{ background:radial-gradient(120% 120% at 50% 22%, rgba(28,30,42,.96), rgba(10,12,20,.99)); }
#screen-room[data-room="sorry"]::before{ background:radial-gradient(40% 34% at 50% 4%, rgba(226,214,180,.12), rgba(150,140,110,.04) 50%, transparent 72%); }

body.gfx-low #screen-room::before{ display:none; }

/* ============================================================
   v6.0 — ENDINGS AS CINEMATICS
   The last page stops being centered text on a flat wash. A slow bloom
   of light rises behind it, faint motes drift, the words settle into
   place, and each of the five endings carries its own colour.
   ============================================================ */
#uwEndOverlay{ overflow:hidden; }              /* motes must not spawn scrollbars */
#uwEndOverlay .uwe-inner{ position:relative; z-index:2; }
#uwEndOverlay::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(60% 46% at 50% 42%, var(--end-glow, rgba(246,224,168,.16)), transparent 66%);
  animation:endBloom 9s ease-in-out infinite; }
#uwEndOverlay::after{ content:""; position:absolute; inset:-10% 0; z-index:1; pointer-events:none; opacity:.55;
  background:
    radial-gradient(1.6px 1.6px at 18% 30%, var(--end-mote, rgba(246,233,191,.8)), transparent),
    radial-gradient(1.6px 1.6px at 72% 20%, var(--end-mote, rgba(226,214,255,.7)), transparent),
    radial-gradient(1.4px 1.4px at 60% 66%, var(--end-mote, rgba(246,233,191,.6)), transparent),
    radial-gradient(1.4px 1.4px at 34% 76%, var(--end-mote, rgba(226,214,255,.6)), transparent),
    radial-gradient(1.6px 1.6px at 86% 54%, var(--end-mote, rgba(246,233,191,.5)), transparent);
  animation:endDrift 26s linear infinite; }
#uwEndOverlay.show .uwe-inner{ animation:endSettle 2.4s var(--ease-cinema) both; }
#uwEndBody .uwe-mark{ font-size:3.4rem; }
@keyframes endBloom{ 0%,100%{ opacity:.7; transform:scale(1);} 50%{ opacity:1; transform:scale(1.08);} }
@keyframes endDrift{ from{ transform:translateY(0);} to{ transform:translateY(-6%);} }
@keyframes endSettle{ 0%{ opacity:0; transform:translateY(16px); filter:blur(6px);} 60%{ filter:blur(0);} 100%{ opacity:1; transform:translateY(0);} }

/* per-ending colour — the story ends in its own hue */
#uwEndOverlay[data-end="curator"]{ --end-glow:rgba(246,224,168,.18); --end-mote:rgba(246,233,191,.8); }
#uwEndOverlay[data-end="author"]{ --end-glow:rgba(170,130,236,.22); --end-mote:rgba(210,190,255,.8);
  background:radial-gradient(130% 120% at 50% 40%, rgba(30,18,58,.97), rgba(6,4,16,.99)); }
#uwEndOverlay[data-end="author"] #uwEndBody .uwe-mark{ color:#d8c4ff; text-shadow:0 0 22px rgba(170,130,236,.7); }
#uwEndOverlay[data-end="forgotten"]{ --end-glow:rgba(180,186,210,.10); --end-mote:rgba(200,206,224,.5);
  background:radial-gradient(130% 120% at 50% 42%, rgba(16,16,26,.98), rgba(4,4,10,.99)); }
#uwEndOverlay[data-end="forgotten"] .uwe-inner{ filter:saturate(.5); }
#uwEndOverlay[data-end="forgotten"] #uwEndBody .uwe-mark{ color:#b9bece; text-shadow:0 0 18px rgba(150,156,180,.5); }
#uwEndOverlay[data-end="shared"]{ --end-glow:rgba(150,190,236,.18); --end-mote:rgba(200,222,255,.85);
  background:radial-gradient(130% 120% at 50% 40%, rgba(14,22,50,.97), rgba(4,6,18,.99)); }
#uwEndOverlay[data-end="shared"] #uwEndBody .uwe-mark{ color:#cfe0ff; text-shadow:0 0 22px rgba(150,190,236,.7); }
#uwEndOverlay[data-end="archive"]{ --end-glow:rgba(224,196,255,.18); --end-mote:rgba(246,233,191,.8);
  background:radial-gradient(130% 120% at 50% 40%, rgba(26,20,54,.98), rgba(5,4,14,.995)); }

body.gfx-low #uwEndOverlay::after{ display:none; }
@media (prefers-reduced-motion:reduce){
  #uwEndOverlay::before, #uwEndOverlay::after{ animation:none; }
  #uwEndOverlay.show .uwe-inner{ animation:none; }
}

/* ============================================================
   v6.0 — THE HUB AS A SPATIAL DREAM-CONSTELLATION
   The whole hub is set within a star map: a far starfield and a nearer
   web of nodes + threads drift at different depths (parallax), so the
   dream reads as a vast navigable sky. The eight fragments' octagram at
   the centre is the star they gather toward. Ambient backdrop behind
   #app — no game logic touched. The sky completes when the world does.
   ============================================================ */
#skyfar, #dreamSky{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
#skyfar{ z-index:0; opacity:.7;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, rgba(255,255,255,.85), transparent 55%),
    radial-gradient(1.2px 1.2px at 62% 12%, rgba(226,220,255,.7), transparent 55%),
    radial-gradient(1.3px 1.3px at 84% 30%, rgba(246,236,200,.72), transparent 55%),
    radial-gradient(1px 1px at 34% 44%, rgba(255,255,255,.6), transparent 55%),
    radial-gradient(1.2px 1.2px at 74% 56%, rgba(226,220,255,.62), transparent 55%),
    radial-gradient(1px 1px at 22% 70%, rgba(246,236,200,.6), transparent 55%),
    radial-gradient(1.3px 1.3px at 54% 82%, rgba(255,255,255,.6), transparent 55%),
    radial-gradient(1px 1px at 90% 76%, rgba(226,220,255,.52), transparent 55%);
  background-size:340px 300px, 420px 380px, 300px 340px, 380px 300px, 360px 400px, 320px 320px, 300px 360px, 400px 340px;
  /* the far field drifts a little with the cursor (depth) */
  translate:calc(var(--px,0)*30px) calc(var(--py,0)*26px);
  transition:translate .45s ease-out, opacity 2s ease; }
#dreamSky{ z-index:1; opacity:.6;
  /* glowy + ethereal: a soft bloom on every thread and node */
  filter:drop-shadow(0 0 6px rgba(202,188,255,.6)) drop-shadow(0 0 15px rgba(150,120,220,.32));
  /* the nearer web tracks the cursor strongly — clear parallax against the far field */
  translate:calc(var(--px,0)*64px) calc(var(--py,0)*50px);
  transition:translate .4s cubic-bezier(.22,.61,.36,1), opacity 2s ease; }
#dreamSky .thread{ fill:none; stroke:rgba(212,200,255,.3); stroke-width:1.1; stroke-linecap:round; stroke-linejoin:round; }
#dreamSky .node{ fill:rgba(228,220,255,.72); }
#dreamSky .node.bright{ fill:rgba(250,240,206,.96); }
#dreamSky .node.tw{ animation:skyTwinkle 5s ease-in-out infinite; }
.sky-drift{ transform-origin:50% 50%; animation:skyDrift 100s ease-in-out infinite alternate; }
@keyframes skyDrift{ from{ transform:translate(0,0) rotate(0deg);} to{ transform:translate(-1.4%,1%) rotate(.35deg);} }
@keyframes skyTwinkle{ 0%,100%{ opacity:1;} 50%{ opacity:.3;} }
/* when the world is whole, the sky completes: brighter, threads turn gold */
body.whole #skyfar{ opacity:.92; }
body.whole #dreamSky{ opacity:.82; }
body.whole #dreamSky .thread{ stroke:rgba(236,215,159,.24); }
body.whole #dreamSky .node{ fill:rgba(236,226,255,.72); }
/* performance + reduced-motion gates */
body.gfx-low #dreamSky, body.gfx-low #skyfar{ display:none; }
@media (prefers-reduced-motion:reduce){
  .sky-drift{ animation:none; } #dreamSky .node.tw{ animation:none; }
  #dreamSky, #skyfar{ translate:none; }
}

/* ============================================================
   v6.2 — AFTER THE END: the world remembers how it closed
   Once the dreamer has written an ending (body.returned), the sky the hub
   hangs in carries it — brighter, threads turned gold — and each specific
   ending leaves its own quiet cast. Additive and reversible.
   ============================================================ */
body.returned #skyfar{ opacity:.9; }
body.returned #dreamSky{ opacity:.78;
  filter:drop-shadow(0 0 6px rgba(230,208,150,.6)) drop-shadow(0 0 16px rgba(196,150,90,.3)); }
body.returned #dreamSky .thread{ stroke:rgba(236,215,159,.26); }
body.returned #dreamSky .node{ fill:rgba(246,236,206,.8); }
body.returned #atmosphere{ filter:brightness(1.05) saturate(1.02); }
/* a quiet acknowledgment in the hub's footer */
body.returned .hub-foot::after{ content:" · you have seen the end, and returned"; color:var(--gold-deep); opacity:.9; }
body.returned-deep .hub-foot::after{ content:" · you have written the end more ways than one"; }

/* each ending leaves its own trace on the world */
body.end-curator #vignette{ background:radial-gradient(125% 120% at 50% 44%, transparent 54%, rgba(40,30,14,.42) 100%); }
body.end-author #atmosphere{ filter:brightness(1.03) saturate(1.06) hue-rotate(-6deg); }
body.end-forgotten #atmosphere{ filter:saturate(.86) brightness(.97); }
body.end-shared #dreamSky{ opacity:.86; }
body.end-shared #dreamSky .thread{ stroke:rgba(198,214,255,.3); }
body.archive-ending #vignette{ background:radial-gradient(125% 120% at 50% 42%, transparent 50%, rgba(14,8,30,.5) 100%); }

/* ============================================================
   v6.3 — THE RETURNING: the daily dream + the season
   The Turning is alive by default now. These style the living content
   (season header, tonight's dream, kept collection) and give each season
   a very subtle world accent. Reuses the .custom-claim button styling.
   ============================================================ */
.turning-season{ display:flex; align-items:center; justify-content:center; gap:.6rem; margin:.2rem 0 .3rem; }
.turning-season .ts-glyph{ font-size:1.7rem; color:var(--gold-bright); text-shadow:var(--glow-gold); }
.turning-season .ts-name{ font-family:var(--serif-display); font-size:1.5rem; letter-spacing:.06em; color:var(--lavender-2); }
.ts-line{ text-align:center; font-style:italic; color:var(--ink-soft); max-width:52ch; margin:0 auto 1.6rem; line-height:1.5; }
.daily-dream{ width:min(94vw,620px); margin:0 auto 1.4rem; padding:1.6rem 1.6rem 1.4rem; border-radius:18px; text-align:center;
  background:linear-gradient(165deg, rgba(30,22,58,.6), rgba(12,8,28,.6)); border:1px solid rgba(236,215,159,.22);
  box-shadow:inset 0 1px 0 rgba(248,238,202,.08), 0 0 30px rgba(236,215,159,.07); }
.daily-dream .dd-label{ font-family:var(--serif-display); font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:.7rem; }
.daily-dream .dd-text{ font-family:var(--serif-display); font-size:clamp(1.15rem,2.6vw,1.5rem); font-style:italic; color:var(--ink); line-height:1.55; margin:0 0 1.1rem; }
.daily-dream .dd-keep{ margin-top:.2rem; }
.daily-dream .dd-kept{ margin:.4rem 0 0; font-style:italic; color:var(--gold); font-size:.95rem; }
.ts-nights{ text-align:center; color:var(--lavender-dim); font-size:.9rem; font-style:italic; margin:0 auto 1.4rem; max-width:46ch; line-height:1.5; }
.kept-dreams{ width:min(94vw,620px); margin:1.4rem auto 0; padding-top:1.1rem; border-top:1px solid rgba(196,179,236,.14); }
.kept-dreams h4{ font-family:var(--serif-display); font-size:1.05rem; color:var(--lavender); letter-spacing:.04em; margin:0 0 .7rem; text-align:center; }
.kept-dreams ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem; }
.kept-dreams li{ font-style:italic; color:var(--ink-soft); font-size:.95rem; line-height:1.5; padding-left:1.4rem; position:relative; }
.kept-dreams li::before{ content:"❦"; position:absolute; left:0; top:0; color:var(--gold-deep); opacity:.7; }

/* subtle seasonal accent on the whole world (very light — never garish) */
body.season-deepwinter #vignette{ background:radial-gradient(125% 120% at 50% 42%, transparent 52%, rgba(20,30,54,.42) 100%); }
body.season-thaw #atmosphere{ filter:brightness(1.02) saturate(1.02) hue-rotate(6deg); }
body.season-greening #atmosphere{ filter:brightness(1.02) saturate(1.05) hue-rotate(-14deg); }
body.season-highsun #atmosphere{ filter:brightness(1.06) saturate(1.02); }
body.season-turning #atmosphere{ filter:brightness(1.03) saturate(1.04) hue-rotate(-6deg); }
body.season-emberfall #vignette{ background:radial-gradient(125% 120% at 50% 44%, transparent 54%, rgba(48,26,14,.4) 100%); }

/* ============================================================
   v6.4 — THE SECOND READING
   On a recovered page in the Sleeping Index, a returned dreamer finds the
   same dream annotated a second time — set apart by a gilded rule and a
   quieter, later hand, so the two readings can be compared.
   ============================================================ */
.dream-reread{ margin:.9rem 0 .2rem; padding:.85rem 0 0; position:relative;
  border-top:1px solid rgba(236,215,159,.22); }
.dream-reread .rr-label{ display:block; font-family:var(--serif-display); font-size:.68rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:.45rem; }
.dream-reread p{ margin:0; font-style:italic; font-size:.93rem; line-height:1.55;
  color:var(--ink-soft); opacity:.95; }
#screen-index .dream.unlocked .dream-reread{ border-top-color:rgba(236,215,159,.3); }

/* ============================================================
   v6.5 — THE NIGHTMARE KEY / THE DREAMWILD
   A separate progression branch beyond Nightmare Echoes. The Key trial is
   dense, metallic and inward; the world it opens is spacious, soft and alive.
   The threshold intentionally uses the restored original portal-card language.
   ============================================================ */
.night-key-mount{ width:min(100%,720px); margin:1.25rem auto 0; }
.night-key-card{ width:100%; min-height:92px; display:grid; grid-template-columns:58px 1fr auto; align-items:center; gap:1rem;
  padding:1rem 1.1rem; text-align:left; color:var(--ink); border:1px solid rgba(188,91,132,.28); border-radius:14px;
  background:linear-gradient(145deg,rgba(26,10,28,.72),rgba(10,5,20,.88)); box-shadow:inset 0 1px rgba(255,220,230,.04),0 14px 40px rgba(4,1,9,.25); transition:.3s var(--ease-cinema); }
button.night-key-card:hover,button.night-key-card:focus-visible{ transform:translateY(-2px); border-color:rgba(221,154,182,.55); box-shadow:0 0 28px rgba(158,54,100,.14); }
.night-key-card .nk-glyph{ width:52px; height:52px; display:grid; place-items:center; border-radius:50%; font-size:2rem; color:#dc94b2;
  border:1px solid rgba(220,148,178,.3); background:radial-gradient(circle,rgba(135,36,78,.24),transparent 70%); text-shadow:0 0 16px rgba(222,100,154,.42); }
.night-key-card b{ display:block; font:500 1.18rem/1.1 var(--serif-display); color:#dec9df; }
.night-key-card p{ margin:.35rem 0 0; color:rgba(185,154,183,.75); font-size:.88rem; line-height:1.4; }
.night-key-card .nk-state{ align-self:start; font-size:.61rem; letter-spacing:.16em; text-transform:uppercase; color:#b86f90; white-space:nowrap; }
.night-key-card.key-held{ border-color:rgba(196,179,236,.2); opacity:.86; }
.night-key-card.key-held .nk-glyph{ color:var(--lavender-2); border-color:rgba(196,179,236,.3); }

.dreamwild-meta{ width:min(94vw,640px); margin:2.5rem auto 0; text-align:center; }
.dreamwild-section-title{ font:500 1.35rem var(--serif-display); color:#b9dfd2; letter-spacing:.06em; }
.dreamwild-hint{ color:#7ea9a4; font-style:italic; margin:.5rem auto 1rem; max-width:54ch; }
.dreamwildportal{ margin:0 auto; width:min(100%,460px); border-color:rgba(126,200,185,.3)!important; background:linear-gradient(165deg,rgba(19,49,49,.7),rgba(12,15,34,.82))!important; }
.dreamwildportal .pg{ color:#a9e4cf!important; text-shadow:0 0 18px rgba(126,220,191,.4)!important; }
.dreamwildportal:disabled{ opacity:.6; cursor:not-allowed; filter:saturate(.55); }

#screen-nightkey{ background:radial-gradient(90% 80% at 50% 42%,#241126 0%,#0b0715 58%,#05030b 100%); }
#screen-nightkey .scroll::before{ content:""; position:fixed; inset:0; pointer-events:none; opacity:.22;
  background:repeating-linear-gradient(91deg,transparent 0 70px,rgba(190,88,130,.06) 71px,transparent 72px 139px); }
.key-trial{ width:min(94vw,680px); margin:1.2rem auto 3rem; text-align:center; position:relative; padding:1.5rem clamp(.8rem,3vw,2rem) 2rem; }
.key-memory{ min-height:102px; display:grid; place-items:center; align-content:center; gap:.6rem; margin:0 auto 1rem; transition:filter .8s,opacity .8s; }
.key-memory .km-label{ font-size:.65rem; letter-spacing:.22em; text-transform:uppercase; color:#c47a9b; }
.km-glyphs{ display:flex; justify-content:center; gap:clamp(.5rem,2vw,1rem); }
.km-glyphs i{ width:44px; height:52px; display:grid; place-items:center; font:normal 1.7rem var(--serif-display); color:#f0c4d3;
  background:linear-gradient(180deg,rgba(142,51,91,.24),rgba(24,8,26,.6)); border:1px solid rgba(218,131,168,.3); clip-path:polygon(16% 0,84% 0,100% 50%,84% 100%,16% 100%,0 50%); }
.key-memory.veiled{ filter:blur(8px); opacity:.18; user-select:none; }
.key-silhouette{ height:72px; width:260px; max-width:75vw; margin:0 auto 1rem; position:relative; opacity:.55; filter:drop-shadow(0 0 12px rgba(203,95,142,.25)); }
.key-silhouette i{ position:absolute; left:8px; top:12px; width:46px; height:46px; border:7px solid #9f6382; border-radius:50%; }
.key-silhouette b{ position:absolute; left:56px; top:31px; width:156px; height:10px; background:linear-gradient(90deg,#9f6382,#d69ab3); border-radius:8px; }
.key-silhouette span{ position:absolute; right:4px; top:22px; width:52px; height:34px; border:9px solid #c0809f; border-left:0; clip-path:polygon(0 0,100% 0,100% 40%,70% 40%,70% 100%,38% 100%,38% 55%,0 55%); }
.key-tumblers{ display:flex; justify-content:center; gap:.65rem; flex-wrap:wrap; margin:.7rem auto 1rem; }
.key-tumbler{ width:64px; min-height:78px; border:1px solid rgba(198,110,148,.3); border-radius:9px; color:#e3b0c5;
  background:linear-gradient(180deg,rgba(50,20,45,.88),rgba(17,8,24,.94)); box-shadow:inset 0 0 18px rgba(185,75,124,.08); transition:.2s; }
.key-tumbler:hover,.key-tumbler:focus-visible{ border-color:#d68eae; transform:translateY(-2px); }
.key-tumbler span{ display:block; font:1.55rem var(--serif-display); }
.key-tumbler small{ display:block; margin-top:.3rem; color:#84566f; font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; }
.key-round{ color:#97657e; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; }
.key-actions{ display:flex; justify-content:center; align-items:center; gap:.8rem; flex-wrap:wrap; margin-top:1rem; }
.key-shake{ animation:keyReject .4s ease; }
@keyframes keyReject{ 20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)} }
.key-awakens{ padding:2rem 0; }
.key-awakens>span{ display:block; font-size:5rem; color:#efc3d4; text-shadow:0 0 30px rgba(214,100,150,.5); animation:keyWake 1.8s ease-in-out infinite; }
.key-awakens h3{ font:500 clamp(1.5rem,4vw,2.2rem) var(--serif-display); color:#ead8e6; }
.key-awakens p{ max-width:48ch; margin:0 auto 1.4rem; color:#b58da9; line-height:1.55; }
@keyframes keyWake{ 50%{ transform:rotate(-4deg) scale(1.05); filter:brightness(1.15); } }

#screen-dreamwild{ --wild-sky:#92c6c4; --wild-low:#1a4144; background:#081719; }
#screen-dreamwild .scroll{ background:linear-gradient(180deg,rgba(7,14,24,.18),rgba(5,15,17,.78)); }
#screen-dreamwild .screen-title{ color:#c9eee0; text-shadow:0 0 24px rgba(123,216,190,.25); }
.dreamwild-scroll{ overflow-x:hidden; }
.wild-map{ width:min(94vw,850px); margin:1.1rem auto .8rem; display:grid; grid-template-columns:repeat(4,1fr); gap:.55rem; }
.wild-map-node{ min-height:72px; padding:.6rem; display:grid; grid-template-columns:28px 1fr; grid-template-rows:auto auto; align-items:center; text-align:left; color:#91beba;
  border:1px solid rgba(130,205,190,.18); border-radius:12px; background:rgba(9,32,34,.62); transition:.25s; }
.wild-map-node>span{ grid-row:1/3; font-size:1.35rem; color:#a8decf; }
.wild-map-node b{ font:500 .95rem var(--serif-display); }
.wild-map-node small{ color:#5e8f8c; font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; }
.wild-map-node:hover:not(:disabled),.wild-map-node:focus-visible{ border-color:rgba(166,228,208,.5); transform:translateY(-2px); }
.wild-map-node.active{ border-color:rgba(199,238,221,.48); background:rgba(27,66,65,.72); box-shadow:0 0 24px rgba(103,190,170,.09); }
.wild-map-node.locked{ opacity:.42; filter:grayscale(.7); }
.wild-progress{ width:min(90vw,560px); margin:0 auto 1rem; display:grid; grid-template-columns:1fr auto; gap:.25rem .8rem; color:#759f9d; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; }
.wild-progress b{ color:#b9dfd2; font-weight:500; }
.wild-progress i{ grid-column:1/3; display:block; height:2px; background:rgba(121,185,173,.16); position:relative; overflow:hidden; }
.wild-progress i::after{ content:""; display:block; width:var(--wild-p); height:100%; background:linear-gradient(90deg,#5fa59e,#caebd7); box-shadow:0 0 8px #8ed2be; transition:width .7s ease; }
.wild-stage{ width:min(96vw,980px); height:min(62vh,620px); min-height:430px; margin:0 auto; position:relative; overflow:hidden; border-radius:46% 42% 9% 12% / 10% 12% 4% 5%; isolation:isolate;
  box-shadow:inset 0 0 80px rgba(6,17,20,.5),0 30px 70px rgba(0,0,0,.25); background:linear-gradient(#92c6c4 0 42%,#4e8582 43%,#173d3d 100%); }
.wild-stage::before{ content:""; position:absolute; inset:0; z-index:-1; opacity:.55; background:radial-gradient(circle at 18% 18%,rgba(255,243,215,.6) 0 2%,transparent 2.4%),radial-gradient(circle at 78% 12%,rgba(238,223,255,.4) 0 1.1%,transparent 1.5%),linear-gradient(180deg,transparent 60%,rgba(2,18,20,.55)); }
.wild-distance{ position:absolute; left:-5%; right:-5%; bottom:34%; height:34%; z-index:-1; opacity:.7; background:linear-gradient(145deg,transparent 48%,rgba(37,83,79,.5) 49% 54%,transparent 55%),linear-gradient(35deg,transparent 50%,rgba(60,105,96,.5) 51% 57%,transparent 58%); }
.wild-ground{ position:absolute; left:-5%; right:-5%; bottom:-8%; height:50%; z-index:-1; border-radius:50% 50% 0 0; background:radial-gradient(ellipse at 50% 0,rgba(121,177,147,.42),transparent 62%),#173d3d; }
.wild-thing{ position:absolute; width:clamp(78px,11vw,132px); aspect-ratio:1; translate:-50% -50%; padding:0; border:0; background:none; color:#d8efe5; filter:drop-shadow(0 10px 10px rgba(2,12,14,.3)); transition:transform .35s var(--ease-cinema),filter .35s; z-index:2; }
.wild-thing svg{ width:100%; height:100%; overflow:visible; }
.wild-art{ fill:url(#wg); stroke:rgba(224,245,235,.72); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.wild-art .cut{ fill:var(--wild-sky); stroke:none; }
.wild-thing>span{ position:absolute; left:50%; top:94%; translate:-50% 0; width:max-content; max-width:140px; padding:.22rem .45rem; border-radius:10px;
  font:500 .78rem var(--serif-display); letter-spacing:.03em; color:#d9eee5; background:rgba(5,25,27,.66); opacity:.72; transition:.25s; }
.wild-thing:hover,.wild-thing:focus-visible{ transform:translateY(-7px) scale(1.06); filter:drop-shadow(0 12px 18px rgba(127,222,195,.25)); z-index:5; }
.wild-thing:hover>span,.wild-thing:focus-visible>span{ opacity:1; }
.wild-thing.discovered::after{ content:"✦"; position:absolute; right:8%; top:4%; color:#f2e8b9; font-size:.8rem; text-shadow:0 0 8px #f2e8b9; }
.wild-thing.waking{ animation:wildWake .9s var(--ease-cinema); }
@keyframes wildWake{ 30%{ transform:scale(1.18) rotate(2deg); filter:brightness(1.4) drop-shadow(0 0 28px rgba(194,245,222,.6)); } }
.wild-whisper{ width:min(92vw,720px); min-height:84px; margin:1rem auto 3rem; text-align:center; color:#83aaa6; font-style:italic; line-height:1.5; }
.wild-whisper b{ display:block; color:#c7e7db; font:500 1.12rem var(--serif-display); font-style:normal; }
.wild-whisper p{ margin:.3rem auto 0; }

/* Each district changes the environmental grammar, not just the tint. */
.wild-orchard{ --wild-sky:#c3b7d4; background:linear-gradient(#b8adc9 0 40%,#6b728c 41%,#283b45 100%); }
.wild-orchard .wild-ground{ background:radial-gradient(ellipse at 52% 0,rgba(159,137,177,.45),transparent 63%),#253b3e; }
.wild-orchard .wild-distance{ clip-path:polygon(0 80%,8% 30%,17% 80%,29% 18%,40% 80%,56% 26%,68% 80%,82% 12%,94% 80%,100% 50%,100% 100%,0 100%); background:rgba(60,66,82,.52); }
.wild-nursery{ --wild-sky:#7db6c7; background:linear-gradient(#82b6c6 0 38%,#478b9a 39% 53%,#174451 100%); }
.wild-nursery .wild-ground{ height:54%; background:repeating-radial-gradient(ellipse at 50% -10%,rgba(172,226,224,.17) 0 2px,transparent 3px 22px),#174652; animation:wildTide 8s ease-in-out infinite; }
@keyframes wildTide{ 50%{ transform:translateY(8px) scaleX(1.02); } }
.wild-station{ --wild-sky:#777a9e; background:linear-gradient(#777b9c 0 43%,#4c536d 44%,#181d2e 100%); }
.wild-station .wild-distance{ height:42%; bottom:28%; background:linear-gradient(90deg,transparent 0 8%,rgba(29,31,50,.58) 8% 12%,transparent 12% 22%,rgba(29,31,50,.58) 22% 27%,transparent 27%),linear-gradient(rgba(36,38,57,.6),rgba(22,24,39,.7)); clip-path:polygon(0 30%,100% 5%,100% 100%,0 100%); }
.wild-station::after{ content:""; position:absolute; left:8%; right:6%; bottom:20%; height:2px; background:rgba(206,214,226,.24); box-shadow:0 11px rgba(206,214,226,.1); z-index:-1; transform:rotate(-1deg); }

.wild-index{ display:grid; grid-template-columns:repeat(4,1fr); gap:.55rem; margin:.8rem 0 1.5rem; }
.wild-entry{ min-height:66px; padding:.7rem; display:flex; gap:.65rem; align-items:center; border:1px solid rgba(121,191,178,.16); border-radius:10px; background:rgba(12,41,42,.28); }
.wild-entry>span{ width:30px; height:30px; display:grid; place-items:center; border-radius:50%; color:#9fd4c6; border:1px solid rgba(159,212,198,.24); }
.wild-entry b,.wild-entry small{ display:block; }
.wild-entry b{ color:#bcded3; font:500 .9rem var(--serif-display); }
.wild-entry small{ color:#638d89; font-size:.62rem; margin-top:.1rem; }
.wild-entry.unknown{ opacity:.46; filter:grayscale(.6); }

body.gfx-low .wild-stage::before,body.gfx-low .wild-distance{ opacity:.22; }
body.gfx-low .wild-thing{ filter:none; }
body.gfx-low .wild-nursery .wild-ground{ animation:none; }
@media(max-width:760px){
  .night-key-card{ grid-template-columns:48px 1fr; }
  .night-key-card .nk-state{ grid-column:2; align-self:auto; }
  .wild-map{ grid-template-columns:repeat(2,1fr); }
  .wild-stage{ height:58vh; min-height:430px; border-radius:28px 28px 10px 10px; }
  .wild-index{ grid-template-columns:repeat(2,1fr); }
  .wild-thing{ width:clamp(76px,22vw,112px); }
  .wild-thing>span{ opacity:.88; font-size:.72rem; }
}
@media(max-width:390px){
  .key-tumbler{ width:54px; min-height:68px; }
  .km-glyphs i{ width:38px; height:46px; }
  .wild-stage{ width:100vw; margin-left:calc(50% - 50vw); border-radius:0; min-height:420px; }
  .wild-index{ grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce){
  .key-awakens>span,.wild-nursery .wild-ground,.wild-thing.waking{ animation:none!important; }
  .wild-thing,.wild-progress i::after,.key-memory{ transition:none!important; }
}