/* ======================================================================
   DREAM WORLD ARCHIVE · v7.0 · ONEIRIC MATERIALISM, SECOND FORM

   This file is the visual stage. It intentionally sits after styles.css
   so gameplay rules remain in app.js and the old styles remain a safe
   fallback. Expensive layers are isolated, quality-gated, and paused when
   the tab sleeps. The Archive should still look authored in Quiet Dream.
   ====================================================================== */

:root{
  color-scheme:dark;
  --v7-void:#050711;
  --v7-night:#0a0d20;
  --v7-indigo:#121633;
  --v7-indigo-hi:#202653;
  --v7-ivory:#f4eedf;
  --v7-silver:#d9d8e8;
  --v7-moon:#f0dca8;
  --v7-moon-hi:#fff3c9;
  --v7-cyan:#a8dce0;
  --v7-violet:#b8a9e8;
  --v7-warm:#d7a77c;
  --v7-nightmare:#b56b96;
  --v7-line:rgba(218,214,239,.19);
  --v7-line-soft:rgba(218,214,239,.09);
  --v7-line-gold:rgba(240,220,168,.4);
  --v7-shadow-near:0 24px 70px rgba(0,0,8,.46);
  --v7-shadow-deep:0 42px 120px rgba(0,0,8,.62);
  --v7-glow-moon:0 0 12px rgba(248,230,181,.5),0 0 42px rgba(232,205,142,.2);
  --v7-glow-silver:0 0 14px rgba(210,214,245,.34),0 0 48px rgba(160,155,226,.14);
  --v7-paper:linear-gradient(152deg,rgba(51,43,65,.94),rgba(22,18,38,.97));
  --v7-glass:linear-gradient(152deg,rgba(34,38,73,.67),rgba(9,11,29,.82));
  --v7-velvet:radial-gradient(120% 125% at 50% 0,rgba(26,27,62,.96),rgba(5,6,16,.995));
  --v7-porcelain:linear-gradient(145deg,rgba(238,233,220,.19),rgba(154,161,196,.045));
  --v7-ease:cubic-bezier(.16,1,.3,1);
  --v7-ease-in:cubic-bezier(.7,0,.3,1);
  --v7-fast:180ms;
  --v7-medium:480ms;
  --v7-slow:1100ms;
  --v7-reading:min(68ch,92vw);
  --v7-wide:min(1180px,94vw);
  --v7-scene:min(940px,94vw);
  --dream-progress:0;
}

html{ background:var(--v7-void); }
body{
  background:
    radial-gradient(82% 64% at 50% -12%,rgba(74,65,133,.24),transparent 68%),
    radial-gradient(58% 52% at 16% 76%,rgba(43,62,112,.15),transparent 72%),
    radial-gradient(58% 48% at 88% 70%,rgba(88,57,115,.12),transparent 74%),
    var(--v7-void);
  color:var(--v7-ivory);
  font-feature-settings:"liga" 1,"kern" 1;
}

/* ----- universal legibility and tactile input ---------------------- */
button{ -webkit-tap-highlight-color:transparent; }
button:focus-visible,[role="button"]:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--v7-moon-hi)!important;
  outline-offset:4px;
  box-shadow:0 0 0 5px rgba(240,220,168,.13),var(--v7-glow-moon)!important;
}
.oneiric-press{ animation:v7Press .52s var(--v7-ease)!important; }
@keyframes v7Press{
  0%{ box-shadow:inset 0 0 0 rgba(255,255,255,0); }
  35%{ box-shadow:inset 0 0 34px rgba(247,233,194,.17),0 0 22px rgba(226,207,160,.15); }
  100%{ box-shadow:inset 0 0 0 rgba(255,255,255,0); }
}

/* ==================================================================
   SHARED WORLD STAGE · architecture, depth, luminous thread
   ================================================================== */
#oneiricStage{ position:fixed; inset:0; z-index:1; overflow:hidden; pointer-events:none; opacity:.94; transition:opacity 1.2s ease,filter 2s ease; }
.os-vault{ position:absolute; left:50%; top:-42vh; width:min(1240px,110vw); height:92vh; translate:-50% 0; border:1px solid rgba(218,214,239,.12); border-radius:0 0 50% 50%; box-shadow:inset 0 -1px rgba(244,233,201,.09),inset 0 -70px 130px rgba(82,66,137,.055); }
.os-vault::before,.os-vault::after{ content:""; position:absolute; bottom:-2px; width:42%; height:1px; background:linear-gradient(90deg,transparent,rgba(234,222,188,.34),transparent); }
.os-vault::before{ left:4%; rotate:7deg; }.os-vault::after{ right:4%; rotate:-7deg; }
.os-oculus{ position:absolute; left:50%; top:7vh; width:min(48vw,470px); aspect-ratio:1; translate:calc(-50% + var(--px,0)*8px) calc(var(--py,0)*7px); border-radius:50%; opacity:.42; background:radial-gradient(circle,rgba(217,215,244,.08),rgba(112,97,175,.025) 47%,transparent 68%); border:1px solid rgba(213,208,239,.09); transition:translate .7s var(--v7-ease); }
.os-oculus::before,.os-oculus::after{ content:""; position:absolute; inset:11%; border-radius:50%; border:1px dashed rgba(234,221,180,.09); }
.os-oculus::after{ inset:27%; border-style:solid; border-color:rgba(213,208,239,.08); }
.os-oculus i{ position:absolute; left:50%; top:50%; width:5px; height:5px; border-radius:50%; translate:-50% -50%; background:rgba(248,235,199,.84); box-shadow:0 0 18px 4px rgba(241,218,159,.28); }
.os-threadwork{ position:absolute; inset:-4%; width:108%; height:108%; overflow:visible; translate:calc(var(--px,0)*-14px) calc(var(--py,0)*-10px); transition:translate .85s var(--v7-ease); }
.os-threadwork path{ fill:none; stroke:rgba(195,187,226,.09); stroke-width:1; stroke-dasharray:1 10; stroke-linecap:round; }
.os-knots circle{ fill:rgba(237,226,196,.6); filter:drop-shadow(0 0 4px rgba(237,226,196,.45)); }
.os-curtain{ position:absolute; top:0; bottom:0; width:21vw; min-width:110px; opacity:.48; filter:blur(.2px); }
.os-curtain::before{ content:""; position:absolute; inset:-8%; background:repeating-linear-gradient(90deg,rgba(8,9,25,.94) 0 12%,rgba(27,24,55,.72) 14%,rgba(7,8,22,.94) 24%); }
.os-left{ left:-13vw; transform:skewX(-4deg); -webkit-mask-image:linear-gradient(90deg,#000 35%,transparent); mask-image:linear-gradient(90deg,#000 35%,transparent); }
.os-right{ right:-13vw; transform:skewX(4deg); -webkit-mask-image:linear-gradient(-90deg,#000 35%,transparent); mask-image:linear-gradient(-90deg,#000 35%,transparent); }
.os-floor{ position:absolute; left:50%; bottom:-28vh; width:min(1100px,110vw); height:52vh; translate:-50% 0; border-radius:50%; background:radial-gradient(ellipse,rgba(139,119,193,.15),rgba(44,44,94,.055) 42%,transparent 70%); border-top:1px solid rgba(226,219,241,.1); box-shadow:0 -30px 100px rgba(94,76,151,.05); }
body.screen-open #oneiricStage{ opacity:.18; filter:blur(4px); }
body.dream-paused *{ animation-play-state:paused!important; }

/* Make the existing constellation a luminous drawing rather than faint UI. */
#dreamSky{ opacity:.68!important; filter:drop-shadow(0 0 4px rgba(196,185,238,.35)) drop-shadow(0 0 16px rgba(135,120,203,.12)); translate:calc(var(--px,0)*-28px) calc(var(--py,0)*-22px)!important; }
#dreamSky .thread{ stroke:rgba(201,192,235,.27)!important; stroke-width:1.05!important; }
#dreamSky .node{ fill:rgba(231,225,249,.72)!important; }
#dreamSky .node.bright{ fill:rgba(255,240,201,.92)!important; filter:drop-shadow(0 0 6px rgba(249,226,169,.75)); }
#skyfar{ opacity:.78!important; filter:brightness(1.35); }
#grain{ opacity:.034; mix-blend-mode:soft-light; }
#vignette{ background:radial-gradient(115% 108% at 50% 43%,transparent 47%,rgba(3,4,13,.66) 100%); }

/* ==================================================================
   FIRST ENTRANCE · a moonlit threshold, not a splash screen
   ================================================================== */
#intro{ isolation:isolate; gap:0; padding:clamp(1.2rem,4vw,3rem); background:radial-gradient(72% 68% at 50% 43%,rgba(26,30,68,.42),rgba(4,5,15,.9) 72%,rgba(3,4,12,.98)); backdrop-filter:none; }
.intro-architecture{ position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.ia-arch{ position:absolute; left:50%; bottom:-9vh; width:min(830px,94vw); height:88vh; translate:-50% 0; border:1px solid rgba(225,219,241,.2); border-bottom:0; border-radius:48% 48% 0 0/35% 35% 0 0; box-shadow:inset 0 0 90px rgba(138,122,194,.06),0 0 60px rgba(110,92,173,.05); }
.ia-arch::before{ content:""; position:absolute; inset:4.5% 5% 0; border:1px solid rgba(240,222,174,.13); border-bottom:0; border-radius:48% 48% 0 0/34% 34% 0 0; }
.ia-arch::after{ content:""; position:absolute; left:50%; top:8%; width:1px; height:78%; background:linear-gradient(transparent,rgba(225,216,240,.18),transparent); }
.ia-water{ position:absolute; left:50%; bottom:-16vh; width:min(1060px,124vw); height:43vh; translate:-50% 0; border-radius:50%; background:radial-gradient(ellipse at 50% 0,rgba(177,160,222,.17),rgba(45,49,94,.05) 44%,transparent 72%); border-top:1px solid rgba(225,220,238,.15); transform:perspective(500px) rotateX(65deg); }
.ia-water::after{ content:""; position:absolute; inset:8% 16%; border-radius:50%; border:1px solid rgba(242,226,183,.12); box-shadow:0 0 44px rgba(224,204,151,.08); }
.ia-star{ position:absolute; color:rgba(238,226,196,.66); text-shadow:var(--v7-glow-moon); }
.ia-star.s1{ left:14%; top:23%; font-size:1rem; }.ia-star.s2{ right:14%; top:30%; font-size:.8rem; }.ia-star.s3{ right:23%; top:16%; font-size:1.5rem; }
.intro-content{ position:relative; z-index:2; width:min(840px,95vw); display:flex; flex-direction:column; align-items:center; text-align:center; }
.intro-kicker{ display:flex; align-items:center; gap:.7rem; margin-bottom:clamp(1.1rem,3vh,2.2rem); font-size:.62rem; letter-spacing:.27em; text-transform:uppercase; color:rgba(204,196,229,.66); }
.intro-kicker::before,.intro-kicker::after{ content:""; width:clamp(28px,5vw,76px); height:1px; background:linear-gradient(90deg,transparent,rgba(231,218,181,.42)); }
.intro-kicker::after{ rotate:180deg; }
.intro-kicker b{ color:rgba(238,221,174,.78); font-weight:400; }
.intro-mark{ position:relative; width:clamp(76px,10vw,108px); aspect-ratio:1; margin:0 0 .8rem; border-radius:50%; border:1px solid rgba(235,222,185,.2); background:radial-gradient(circle,rgba(232,217,178,.08),transparent 69%); box-shadow:0 0 70px rgba(213,192,137,.08); animation:v7MoonHover 7s ease-in-out infinite; }
.intro-mark i{ position:absolute; inset:20%; border-radius:50%; background:radial-gradient(circle at 38% 34%,#fff9e5,#e8d59e 58%,#9d8455); box-shadow:0 0 18px rgba(251,235,190,.65),0 0 66px rgba(231,205,142,.24); }
.intro-mark i::after{ content:""; position:absolute; width:82%; height:82%; right:-13%; top:-7%; border-radius:50%; background:#0a0d20; box-shadow:-3px 3px 10px rgba(24,27,56,.7); }
@keyframes v7MoonHover{ 50%{ transform:translateY(-7px); filter:brightness(1.08); } }
#intro h1{ max-width:12ch; margin:0; font-size:clamp(3.2rem,8.8vw,7.1rem); line-height:.82; letter-spacing:-.035em; color:var(--v7-ivory); text-wrap:balance; text-shadow:0 4px 54px rgba(172,158,220,.25); background:linear-gradient(180deg,#fffaf0 8%,#dcd8e9 61%,#aaa0d0 105%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; }
#intro p{ margin:1.25rem auto 0; color:rgba(225,217,235,.82); font-size:clamp(1.03rem,2.1vw,1.34rem); letter-spacing:.015em; }
.enter-btn{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:1rem; min-width:min(330px,82vw); margin-top:2.1rem; padding:.76rem .85rem .76rem 1.55rem; border:1px solid rgba(239,222,178,.5); border-radius:4px 18px 4px 18px; background:linear-gradient(110deg,rgba(42,37,67,.7),rgba(15,16,37,.82)); color:var(--v7-moon-hi); box-shadow:inset 0 1px rgba(255,255,255,.06),0 15px 40px rgba(0,0,8,.32),0 0 28px rgba(226,203,143,.08); letter-spacing:.18em; text-align:left; overflow:visible; }
.enter-btn i{ width:42px; height:42px; display:grid; place-items:center; border-left:1px solid rgba(240,221,169,.3); color:var(--v7-moon-hi); font-style:normal; text-shadow:var(--v7-glow-moon); }
.enter-btn:hover{ transform:translateY(-3px); border-color:rgba(255,237,191,.8); background:linear-gradient(110deg,rgba(58,49,80,.8),rgba(20,20,44,.9)); letter-spacing:.205em; }
.intro-hint{ margin-top:.75rem; color:rgba(179,169,205,.56); font-size:.62rem; letter-spacing:.2em; }

/* ==================================================================
   THE MAIN ARCHIVE · title plaque, observatory, fragment atlas
   ================================================================== */
#hub{ width:100%; padding:clamp(2rem,5vh,4rem) max(1rem,env(safe-area-inset-left)) 5rem; overflow:hidden; }
.hub-prologue{ width:var(--v7-wide); display:flex; flex-direction:column; align-items:center; position:relative; }
.hub-prologue::before{ content:""; position:absolute; left:8%; right:8%; top:50%; height:1px; z-index:-1; background:linear-gradient(90deg,transparent,rgba(205,197,228,.11),transparent); }
.hub-kicker{ order:-1; margin:0 0 .6rem; color:rgba(190,180,216,.7); font-size:.63rem; letter-spacing:.29em; text-transform:uppercase; }
.crest{ display:flex; align-items:center; gap:.65rem; margin:0 0 .6rem; font-size:.9rem; color:rgba(239,220,169,.75); }
.crest span:nth-child(2){ width:35px;height:35px;display:grid;place-items:center;border:1px solid rgba(239,220,169,.18);border-radius:50%;font-size:1.1rem;box-shadow:0 0 24px rgba(232,210,153,.08); }
.title{ max-width:13ch; font-size:clamp(3.4rem,8vw,7rem); line-height:.84; letter-spacing:-.035em; color:var(--v7-ivory); text-wrap:balance; background:linear-gradient(180deg,#fffdf5 0,#dedbe8 58%,#a79ec9 106%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 10px 34px rgba(137,120,191,.13)); }
.subtitle{ margin:1rem 0 0; color:rgba(224,217,235,.82); font-size:clamp(1.06rem,2vw,1.38rem); }
.status{ width:min(1080px,94vw); margin:1.7rem auto .2rem; padding:.72rem 1rem; gap:.55rem 1rem; position:relative; border-top:1px solid rgba(224,215,239,.16); border-bottom:1px solid rgba(224,215,239,.1); background:linear-gradient(90deg,transparent,rgba(20,23,53,.6) 14%,rgba(20,23,53,.6) 86%,transparent); color:rgba(225,218,236,.82); }
.status::before,.status::after{ content:"✦"; position:absolute; top:50%; translate:0 -50%; color:rgba(239,221,174,.42); font-size:.62rem; }
.status::before{ left:4px; }.status::after{ right:4px; }
.status .who{ color:rgba(203,194,224,.78); font-size:.7rem; letter-spacing:.2em; }
.status .frag{ color:var(--v7-moon-hi); }
.status .remember{ color:rgba(224,217,235,.72); }
.lucid-bar,.db-meter{ background:rgba(4,5,15,.7)!important; border:1px solid rgba(213,206,232,.1); }
.lucid-fill,.db-fill{ background:linear-gradient(90deg,#8e82c8,#f0dca8)!important; box-shadow:0 0 12px rgba(218,198,144,.3); }

.memory-observatory{ position:relative; width:min(800px,98vw); min-height:clamp(510px,66vw,670px); margin:clamp(1.2rem,3vh,2.2rem) auto 2.3rem; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding:1.2rem 1rem 3.2rem; isolation:isolate; }
.memory-observatory::before{ content:""; position:absolute; inset:0 3%; z-index:-2; border:1px solid rgba(213,207,234,.16); border-bottom-color:rgba(236,218,171,.08); border-radius:50% 50% 13% 13%/24% 24% 7% 7%; background:radial-gradient(58% 52% at 50% 48%,rgba(136,119,192,calc(.06 + var(--dream-progress)*.12)),transparent 72%); box-shadow:inset 0 0 80px rgba(107,90,164,.045),0 34px 90px rgba(0,0,8,.18); }
.memory-observatory::after{ content:""; position:absolute; left:12%;right:12%;top:12%;bottom:11%;z-index:-1; border-left:1px solid rgba(213,207,234,.06);border-right:1px solid rgba(213,207,234,.06); -webkit-mask-image:linear-gradient(transparent,#000 30%,#000 72%,transparent);mask-image:linear-gradient(transparent,#000 30%,#000 72%,transparent); }
.observatory-cap{ display:flex; align-items:center; justify-content:center; width:86%; gap:.7rem; opacity:.68; }
.observatory-cap span{ flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(238,220,171,.35)); }.observatory-cap span:last-child{ rotate:180deg; }
.observatory-cap b{ width:7px;height:7px;rotate:45deg;border:1px solid rgba(238,220,171,.6);box-shadow:0 0 10px rgba(238,220,171,.3); }
.observatory-label{ margin:.7rem 0 -.5rem; text-align:center; }
.observatory-label small{ display:block;color:rgba(180,171,207,.62);font-size:.58rem;letter-spacing:.25em;text-transform:uppercase; }
.observatory-label strong{ display:block;margin-top:.1rem;font:500 clamp(1rem,2vw,1.25rem) var(--serif-display);letter-spacing:.08em;color:rgba(229,221,239,.82); }
.world-shell{ width:min(95vw,560px); margin:-.1rem auto -1rem; filter:drop-shadow(0 25px 40px rgba(0,0,10,.28)); }
.world-shell::before{ content:"";position:absolute;left:50%;top:50%;width:62%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,rgba(239,219,166,calc(.04 + var(--dream-progress)*.16)),transparent 68%);filter:blur(12px);pointer-events:none; }
.world-shell svg{ position:relative; }
#wholeRim{ fill:rgba(8,9,26,.72)!important; stroke-width:1.4!important; filter:drop-shadow(0 0 8px rgba(183,168,219,.22)); }
.cloud-frag .puff{ fill:rgba(148,138,190,.34); }.cloud-frag .puff-hi{ fill:rgba(206,197,230,.28); }
.cloud-frag{ filter:drop-shadow(0 0 7px rgba(170,157,215,.18)); }
.world-shell .glyph{ fill:rgba(220,212,237,.72);font-size:18px; }
.world-shell .glyph.on{ fill:#3d3217; }
#g-core{ fill:rgba(229,219,239,.64); }
.w-thread{ stroke-width:1.35; }
.observatory-floor{ position:absolute;left:50%;bottom:6%;width:66%;height:10%;translate:-50% 0;border-radius:50%;background:radial-gradient(ellipse,rgba(212,190,137,calc(.04 + var(--dream-progress)*.13)),transparent 70%);border-top:1px solid rgba(233,215,170,.1);filter:blur(.2px); }
.world-hint{ max-width:49ch;color:rgba(211,203,225,.74);font-size:.95rem;line-height:1.5;z-index:2; }
.world-cta{ z-index:2; }

.fragment-atlas{ width:var(--v7-wide); margin:0 auto; padding:2.4rem 0 1rem; position:relative; }
.fragment-atlas::before{ content:"";position:absolute;left:50%;top:0;width:86%;height:1px;translate:-50% 0;background:linear-gradient(90deg,transparent,rgba(235,218,174,.35),transparent); }
.atlas-heading{ display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.2rem;width:min(1040px,94vw);margin:0 auto 1.3rem; }
.atlas-heading h2{ margin:0;font:500 clamp(1.55rem,3.1vw,2.25rem)/1 var(--serif-display);color:var(--v7-ivory);letter-spacing:.015em; }
.atlas-heading p{ margin:.36rem 0 0;color:rgba(200,192,219,.65);font-style:italic;font-size:.9rem; }
.atlas-num{ writing-mode:vertical-rl;rotate:180deg;color:rgba(235,218,174,.58);font-size:.57rem;letter-spacing:.2em; }
.atlas-mark{font-size:1.7rem;color:rgba(235,218,174,.65);text-shadow:var(--v7-glow-moon);}

/* ----- Fragment destinations: cards retained, now authored plates -------- */
.portals{ width:min(1040px,94vw);gap:1rem;grid-template-columns:repeat(4,minmax(0,1fr));margin:0 auto; }
.portal{
  --p-rgb:177,161,224;
  min-height:224px;padding:1.15rem 1.1rem 1.15rem;display:flex;flex-direction:column;justify-content:flex-end;
  border:1px solid rgba(var(--p-rgb),.24);border-radius:5px 24px 7px 18px;
  background:
    radial-gradient(110% 75% at 76% 0,rgba(var(--p-rgb),.19),transparent 58%),
    linear-gradient(158deg,rgba(27,29,62,.92),rgba(8,10,25,.96));
  box-shadow:inset 0 1px rgba(255,255,255,.055),inset 0 -40px 70px rgba(1,2,10,.19),0 20px 50px rgba(0,0,8,.24);
  color:var(--v7-ivory);filter:none!important;opacity:1!important;animation:none;isolation:isolate;overflow:hidden;
  transform:translateZ(0);transition:transform .45s var(--v7-ease),border-color .4s ease,box-shadow .45s ease,filter .4s ease!important;
}
.portal::before{ content:"";position:absolute;inset:0;z-index:-1;opacity:.8;pointer-events:none;background:
  linear-gradient(115deg,transparent 0 48%,rgba(var(--p-rgb),.08) 49%,transparent 50%),
  radial-gradient(circle at 18% 23%,rgba(247,238,210,.74) 0 1px,transparent 2px),
  radial-gradient(circle at 74% 18%,rgba(222,216,244,.58) 0 1px,transparent 2px),
  radial-gradient(circle at 87% 37%,rgba(222,216,244,.4) 0 1px,transparent 2px);transition:opacity .4s,transform .7s var(--v7-ease); }
.portal::after{ content:"";position:absolute!important;left:12px!important;top:12px!important;bottom:12px!important;width:2px!important;inset-inline-end:auto!important;border-radius:2px!important;background:linear-gradient(transparent,rgba(var(--p-rgb),.48),transparent)!important;opacity:.7!important;pointer-events:none; }
.portal:hover{ transform:translateY(-7px)!important;border-color:rgba(var(--p-rgb),.58)!important;box-shadow:inset 0 1px rgba(255,255,255,.08),0 28px 70px rgba(0,0,10,.38),0 0 34px rgba(var(--p-rgb),.12)!important; }
.portal:hover::before{ opacity:1;transform:scale(1.04); }
.portal:active{ transform:translateY(-2px) scale(.985)!important; }
.portal .pg{ position:absolute;left:1.2rem;top:1.3rem;width:58px;height:58px;display:grid;place-items:center;margin:0;border:1px solid rgba(var(--p-rgb),.3);border-radius:50% 46% 52% 48%;background:radial-gradient(circle,rgba(var(--p-rgb),.18),rgba(8,10,26,.58));font-size:2rem;color:rgba(226,219,243,.86);text-shadow:0 0 17px rgba(var(--p-rgb),.45);box-shadow:inset 0 0 18px rgba(var(--p-rgb),.08); }
.portal .pstate{ top:1rem;right:1rem;color:rgba(205,196,225,.6);font-size:.56rem;letter-spacing:.17em; }
.portal h3{ margin:4.5rem 0 .38rem;font-size:1.28rem;color:rgba(246,241,235,.94);line-height:1; }
.portal .desc{ min-height:0;color:rgba(205,199,219,.78);font-size:.84rem;line-height:1.42; }
.portal:not(.collected){ border-color:rgba(var(--p-rgb),.19); }
.portal:not(.collected) .pg{ color:rgba(207,199,228,.72); }
.portal.collected{ border-color:rgba(239,219,165,.52);box-shadow:inset 0 1px rgba(255,250,228,.1),0 20px 60px rgba(0,0,8,.28),0 0 35px rgba(232,206,143,.11); }
.portal.collected::after{ background:linear-gradient(transparent,rgba(245,224,166,.72),transparent)!important; }
.portal.collected .pg{ color:var(--v7-moon-hi);border-color:rgba(244,224,169,.45);background:radial-gradient(circle,rgba(236,211,149,.25),rgba(10,11,27,.52)); }
.portal.collected .pstate{ color:rgba(241,221,167,.82); }
.portal[data-game="symbols"]{--p-rgb:190,158,224}.portal[data-game="constellation"]{--p-rgb:133,161,233}
.portal[data-game="maze"]{--p-rgb:139,169,185}.portal[data-game="mirror"]{--p-rgb:174,207,222}
.portal[data-game="quiz"]{--p-rgb:211,166,141}.portal[data-game="water"]{--p-rgb:116,190,211}
.portal[data-game="lullaby"]{--p-rgb:210,196,132}.portal[data-game="falling"]{--p-rgb:163,144,218}
.portal[data-game="hollow"]{--p-rgb:145,135,171}.portal[data-game="moondial"]{--p-rgb:202,199,215}
.portal[data-game="tide"]{--p-rgb:113,189,202}.portal[data-game="cartog"]{--p-rgb:133,157,226}

/* Each primary plate contains a tiny environmental clue, not just a tint. */
.portal[data-game="symbols"]::before{background:repeating-radial-gradient(ellipse at 30% -5%,rgba(200,168,230,.11) 0 2px,transparent 3px 28px),radial-gradient(circle at 80% 18%,rgba(247,238,210,.8) 0 1px,transparent 2px)}
.portal[data-game="constellation"]::before{background:linear-gradient(143deg,transparent 44%,rgba(147,176,239,.15) 45%,transparent 46%),linear-gradient(32deg,transparent 56%,rgba(147,176,239,.1) 57%,transparent 58%),radial-gradient(circle at 82% 20%,#f7efd1 0 2px,transparent 3px)}
.portal[data-game="maze"]::before{background:linear-gradient(90deg,transparent 15%,rgba(151,178,193,.11) 16% 17%,transparent 18% 48%,rgba(151,178,193,.09) 49% 50%,transparent 51%),linear-gradient(rgba(151,178,193,.07) 1px,transparent 1px);background-size:auto,100% 34px}
.portal[data-game="mirror"]::before{background:linear-gradient(90deg,transparent 49%,rgba(211,233,240,.18) 50%,transparent 51%),radial-gradient(ellipse at 75% 15%,rgba(194,223,234,.16),transparent 50%)}
.portal[data-game="quiz"]::before{background:radial-gradient(circle at 78% 7%,rgba(247,216,153,.26),transparent 26%),linear-gradient(115deg,transparent 53%,rgba(223,180,148,.08) 54%,transparent 55%)}
.portal[data-game="water"]::before{background:repeating-radial-gradient(ellipse at 76% 7%,transparent 0 16px,rgba(131,204,218,.11) 17px 18px,transparent 19px 30px)}
.portal[data-game="lullaby"]::before{background:radial-gradient(circle at 73% 17%,rgba(246,225,166,.2) 0 5px,transparent 6px),radial-gradient(circle at 86% 34%,rgba(208,229,184,.13) 0 4px,transparent 5px),linear-gradient(110deg,transparent 49%,rgba(230,211,155,.09) 50%,transparent 51%)}
.portal[data-game="falling"]::before{background:repeating-linear-gradient(90deg,transparent 0 23px,rgba(178,159,224,.07) 24px,transparent 25px 44px),linear-gradient(180deg,rgba(187,169,229,.16),transparent 58%)}

.bonus-meta,.nightmare-meta,.rooms-meta,.deep-meta,.dreamwild-meta{ width:min(1040px,94vw);margin:clamp(3rem,8vh,5.5rem) auto 0;padding:2rem 0 0;position:relative;border-top:1px solid rgba(216,208,234,.12); }
.bonus-meta::before,.nightmare-meta::before,.rooms-meta::before,.deep-meta::before,.dreamwild-meta::before{content:"";position:absolute;left:0;top:-1px;width:84px;height:1px;background:rgba(240,219,162,.66);box-shadow:0 0 12px rgba(237,215,157,.3);}
.bonus-section-title,.nightmare-section-title,.rooms-section-title,.deep-section-title,.dreamwild-section-title{font:500 clamp(1.35rem,2.6vw,1.75rem) var(--serif-display);color:rgba(232,225,239,.92);letter-spacing:.04em;}
.bonus-hint,.nightmare-hint,.rooms-hint,.deep-hint,.dreamwild-hint{max-width:60ch;color:rgba(195,187,214,.7);line-height:1.5;}
.bonus-portals{grid-template-columns:repeat(4,1fr);width:100%;}
.deep-portals,.rooms-portals{width:100%;}
.index-link{margin-top:3.3rem;border-radius:4px 16px 4px 16px;padding:.75rem 1.55rem;background:linear-gradient(110deg,rgba(36,31,62,.62),rgba(11,12,29,.78));border-color:rgba(236,217,165,.38);box-shadow:0 15px 40px rgba(0,0,8,.2);}
.index-link:hover{transform:translateY(-4px);background:linear-gradient(110deg,rgba(50,42,75,.76),rgba(15,15,35,.86));}
.hub-foot{margin-top:3rem;color:rgba(178,169,201,.56);font-size:.65rem;letter-spacing:.22em;}

/* ==================================================================
   SCENE ARCHITECTURE · every screen becomes a room
   ================================================================== */
.screen{ isolation:isolate;backdrop-filter:none;background-color:var(--v7-void); }
.screen.open{ animation:v7SceneIn .72s var(--v7-ease); }
@keyframes v7SceneIn{from{opacity:0;filter:blur(6px);transform:scale(1.018)}to{opacity:1;filter:none;transform:none}}
.screen>.scroll{ z-index:3!important;padding:clamp(1.1rem,3vh,2rem) max(1rem,env(safe-area-inset-left)) 4rem; }
.scene-chrome{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;opacity:0;transition:opacity 1.1s ease;}
.scene-awake .scene-chrome{opacity:1;}
.sc-vault{position:absolute;left:50%;top:-36vh;width:min(1000px,104vw);height:78vh;translate:calc(-50% + var(--px,0)*5px) calc(var(--py,0)*4px);border:1px solid rgba(222,217,238,.13);border-radius:0 0 50% 50%;transition:translate .8s var(--v7-ease);}
.sc-vault::after{content:"";position:absolute;left:10%;right:10%;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(238,219,165,.35),transparent)}
.sc-thread{position:absolute;width:44vw;height:1px;top:42%;background:linear-gradient(90deg,transparent,rgba(210,202,231,.14),transparent);transform-origin:center;}
.sc-a{left:-9vw;rotate:18deg;}.sc-b{right:-9vw;rotate:-18deg;}
.sc-sigil{position:absolute;left:50%;top:12vh;translate:-50% 0;font:400 clamp(6rem,15vw,13rem)/1 var(--serif-display);color:rgba(221,215,239,.025);text-shadow:0 0 70px rgba(178,161,226,.035);}
.sc-horizon{position:absolute;left:50%;bottom:-24vh;width:min(1050px,115vw);height:48vh;translate:-50% 0;border-radius:50%;border-top:1px solid rgba(228,218,236,.11);background:radial-gradient(ellipse at 50% 0,rgba(129,112,179,.09),transparent 68%)}
.sc-veil{position:absolute;top:0;bottom:0;width:17vw;min-width:80px;background:linear-gradient(90deg,rgba(4,5,15,.94),rgba(20,19,45,.34),transparent);opacity:.6;}
.sc-left{left:0}.sc-right{right:0;scale:-1 1}
.screen-head{width:min(980px,94vw);margin:0 auto .5rem;padding:.35rem 0 .8rem;border-bottom:1px solid rgba(220,213,235,.12);}
.screen-head::after{content:"";position:absolute;left:50%;width:90px;height:1px;translate:-50% 0;bottom:-1px;background:linear-gradient(90deg,transparent,rgba(240,220,168,.62),transparent);}
.screen-head{position:relative;}
.screen-title{max-width:16ch;font-size:clamp(2rem,5.4vw,3.45rem);line-height:.88;letter-spacing:-.02em;color:var(--v7-ivory);text-wrap:balance;}
.screen-sub{width:var(--v7-reading);margin:.7rem auto 1.7rem;color:rgba(218,211,229,.76);font-size:1rem;line-height:1.55;text-wrap:balance;}
.back{border-radius:4px 14px 4px 14px;background:rgba(11,13,31,.72);border-color:rgba(211,203,232,.2);backdrop-filter:none;color:rgba(219,212,234,.82);font-size:.78rem;letter-spacing:.1em;}
.back:hover{background:rgba(32,31,60,.76);border-color:rgba(239,220,170,.48);transform:translateX(-2px);}
.replay,.waking-enter,.lullaby-start,.custom-claim,.market-btn,.hall-walkon,.incant-btn{border-radius:4px 15px 4px 15px;background:linear-gradient(120deg,rgba(37,32,62,.66),rgba(11,12,29,.75));box-shadow:0 12px 30px rgba(0,0,8,.18);}
.game-msg{min-height:2em;color:rgba(249,233,190,.92);text-shadow:0 0 18px rgba(236,213,158,.16);}

/* Nightmare versions violate depth and light instead of becoming red/black. */
body.nightmare-playing .screen{filter:saturate(.86) contrast(1.06);}
body.nightmare-playing .scene-chrome{transform:scaleX(-1);opacity:.72;}
body.nightmare-playing .sc-vault{border-color:rgba(204,124,173,.18);translate:calc(-50% + var(--px,0)*-8px) calc(var(--py,0)*-5px);}
body.nightmare-playing .sc-sigil{color:rgba(214,104,166,.045);text-shadow:7px 2px 0 rgba(130,69,132,.025);}
body.nightmare-playing .screen-title{text-shadow:-3px 0 rgba(171,93,148,.2),3px 0 rgba(95,119,164,.12);}
.screen-head .nm-badge{border-radius:3px 10px 3px 10px;background:rgba(49,17,44,.42);}

/* ==================================================================
   EIGHT FRAGMENTS · eight visual laws
   ================================================================== */

/* I — sleeping sigils beneath fog-cloth */
#screen-symbols{background:radial-gradient(100% 86% at 50% 38%,#282045 0,#0b0c21 70%,#050611 100%)}
.match-grid{position:relative;width:min(92vw,540px);gap:.8rem;padding:clamp(1rem,3vw,1.6rem);border:1px solid rgba(213,194,231,.18);border-radius:44% 46% 12px 12px/8% 8% 12px 12px;background:radial-gradient(90% 46% at 50% 0,rgba(207,181,229,.14),transparent),repeating-linear-gradient(98deg,rgba(36,29,64,.8) 0 7%,rgba(20,18,42,.88) 9% 16%);box-shadow:inset 0 20px 50px rgba(210,182,226,.045),var(--v7-shadow-near);isolation:isolate;}
.match-grid::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.035) 50%,transparent 64%);mix-blend-mode:screen;}
.card-face{border-radius:42% 49% 44% 51%/13% 17% 11% 15%;border-color:rgba(204,185,227,.28);box-shadow:inset 0 0 22px rgba(154,126,198,.08),0 7px 18px rgba(0,0,10,.24)}
.card-back{background:linear-gradient(155deg,rgba(63,48,97,.86),rgba(19,17,42,.96));color:rgba(216,203,232,.76)}
.card-back::after{content:"☾";width:36px;height:36px;display:grid;place-items:center;border:1px solid rgba(218,201,234,.2);border-radius:50%;font-size:.9rem;}
.card-front{background:radial-gradient(circle at 50% 38%,rgba(124,93,168,.55),rgba(28,23,52,.96) 66%);font-size:2.4rem}
.card.matched .card-front{background:radial-gradient(circle at 50% 38%,rgba(246,224,169,.88),rgba(91,73,38,.82) 65%);box-shadow:0 0 28px rgba(239,217,160,.24),inset 0 0 28px rgba(255,248,216,.2)}

/* II — a circular loom of sky */
#screen-constellation{background:radial-gradient(90% 82% at 50% 45%,#171c45 0,#07091d 67%,#030510 100%)}
.constel{width:min(88vw,560px);border-radius:50% 48% 46% 52%;border-color:rgba(151,179,236,.25);background:radial-gradient(circle at 50% 43%,rgba(43,55,113,.48),rgba(7,9,28,.92) 68%),repeating-radial-gradient(circle,transparent 0 47px,rgba(153,174,225,.05) 48px 49px);box-shadow:inset 0 0 90px rgba(88,119,192,.12),0 28px 80px rgba(0,0,9,.42),0 0 50px rgba(109,142,211,.07)}
.constel::before{content:"";position:absolute;inset:5%;border:1px dashed rgba(165,184,230,.1);border-radius:50%;animation:v7Orbit 80s linear infinite;}
@keyframes v7Orbit{to{rotate:360deg}}
.star{width:42px;height:42px;background:radial-gradient(circle,rgba(223,225,248,.94) 0 5%,rgba(145,167,225,.2) 22%,transparent 68%);}
.star.next,.star.lit{box-shadow:0 0 18px rgba(249,229,174,.52),0 0 55px rgba(216,191,127,.24)}
.constel-line{stroke-width:1.1;opacity:.92;filter:drop-shadow(0 0 3px rgba(243,221,162,.62));stroke-dasharray:1 1.4}

/* III — a corridor receding into remembered fog */
#screen-maze{background:radial-gradient(90% 82% at 50% 45%,#1d2b3c 0,#090f1d 67%,#04070e 100%)}
.maze-wrap{width:min(90vw,570px);padding:12px 12px 16px;border:1px solid rgba(164,190,202,.2);border-radius:46% 46% 16px 16px/10% 10% 16px 16px;background:linear-gradient(180deg,rgba(91,115,133,.12),rgba(10,17,29,.8));box-shadow:inset 0 0 70px rgba(131,158,174,.08),var(--v7-shadow-deep)}
#mazeCanvas{border-radius:44% 44% 9px 9px/8% 8% 9px 9px;border-color:rgba(179,202,211,.18);background:radial-gradient(circle at 50% 45%,rgba(61,82,96,.42),rgba(6,12,21,.88));filter:drop-shadow(0 15px 28px rgba(0,0,8,.3))}
.dpad button{border-radius:50% 44% 50% 46%;background:rgba(15,27,39,.82);border-color:rgba(172,197,205,.24);box-shadow:inset 0 0 14px rgba(133,168,179,.05)}

/* IV — mirrored silence with a physical silver frame */
#screen-mirror{background:radial-gradient(88% 85% at 50% 44%,#1c3044 0,#080e1d 70%,#040710 100%)}
.mirror-board{width:min(92vw,570px);padding:18px;gap:.55rem;border:6px double rgba(183,206,217,.22);border-radius:50% 50% 16px 16px/9% 9% 16px 16px;background:linear-gradient(110deg,rgba(156,190,202,.07),rgba(19,33,49,.78) 45%,rgba(187,215,222,.08));box-shadow:inset 0 0 70px rgba(173,208,219,.1),inset 18px 0 40px rgba(198,224,228,.03),0 28px 80px rgba(0,0,10,.46)}
.mirror-board::before{content:"";position:absolute;inset:9px;border:1px solid rgba(218,235,239,.15);border-radius:inherit;pointer-events:none}
.mirror-board .divider{border-left:1px solid rgba(221,235,237,.46);box-shadow:0 0 12px rgba(180,217,226,.18)}
.mcell{border-radius:5px 12px 5px 12px;border-color:rgba(189,214,221,.17);background:linear-gradient(135deg,rgba(111,150,163,.15),rgba(15,27,42,.72));box-shadow:inset 1px 1px rgba(255,255,255,.035)}
.mcell.seed{background:radial-gradient(circle at 40% 35%,rgba(202,229,234,.48),rgba(45,75,91,.6));}

/* V — riddles under a warm, listening lantern */
#screen-quiz{background:radial-gradient(70% 72% at 50% 16%,#483329 0,#1d1523 42%,#080813 85%)}
.quiz{position:relative;width:min(92vw,680px);padding:clamp(1.4rem,4vw,2.5rem);border-top:1px solid rgba(237,201,148,.28);border-bottom:1px solid rgba(237,201,148,.12);background:radial-gradient(65% 64% at 50% 0,rgba(245,202,132,.11),transparent 70%)}
.quiz::before{content:"";position:absolute;left:50%;top:-102px;width:86px;height:86px;translate:-50% 0;border-radius:50%;background:radial-gradient(circle at 42% 35%,#fff2bb,#d6a35f 32%,rgba(131,82,51,.5) 62%,transparent 70%);box-shadow:0 0 55px rgba(240,181,103,.25),0 40px 100px rgba(226,158,79,.12)}
.q-count{color:rgba(224,187,139,.72)}
.q-text{font-size:clamp(1.6rem,4.2vw,2.4rem);color:#f5eadc;text-wrap:balance}
.q-opt{text-align:center;border-radius:2px 14px 2px 14px;border-color:rgba(222,180,137,.2);background:linear-gradient(90deg,transparent,rgba(66,42,44,.52) 9%,rgba(66,42,44,.52) 91%,transparent);color:rgba(240,228,218,.87)}
.q-opt:hover{transform:translateY(-2px);border-color:rgba(242,206,158,.56);background:linear-gradient(90deg,transparent,rgba(92,58,51,.68) 9%,rgba(92,58,51,.68) 91%,transparent)}

/* VI — an elliptical basin of memory water */
#screen-water{background:radial-gradient(92% 86% at 50% 55%,#12364a 0,#071522 65%,#030912 100%)}
.water-board{position:relative;width:min(86vw,500px);padding:clamp(1.3rem,4vw,2.4rem);gap:.65rem;border:1px solid rgba(151,210,220,.2);border-radius:50%;background:radial-gradient(ellipse at 50% 40%,rgba(71,151,169,.25),rgba(8,36,51,.86) 58%,rgba(4,18,29,.96));box-shadow:inset 0 0 75px rgba(112,198,211,.14),0 32px 90px rgba(0,0,8,.42),0 0 60px rgba(75,167,188,.08);transform:perspective(900px) rotateX(7deg)}
.water-board::after{content:"";position:absolute;inset:7%;border:1px solid rgba(184,224,229,.13);border-radius:50%;pointer-events:none}
.wcell{border-color:rgba(178,220,226,.18);background:radial-gradient(circle at 40% 35%,rgba(82,155,173,.32),rgba(8,36,52,.7));box-shadow:inset 0 0 20px rgba(119,205,219,.06)}
.wcell.lit{background:radial-gradient(circle at 38% 32%,rgba(222,244,237,.82),rgba(77,171,187,.5) 38%,rgba(10,53,69,.8));box-shadow:0 0 20px rgba(145,224,231,.3),inset 0 0 24px rgba(214,244,239,.18)}

/* VII — a garden of musical moons */
#screen-lullaby{background:radial-gradient(88% 84% at 50% 62%,#26342e 0,#101b1c 48%,#060b11 100%)}
.orbs{width:min(80vw,430px);gap:1.5rem;position:relative;padding-bottom:2.2rem}
.orbs::before{content:"";position:absolute;left:50%;bottom:0;width:86%;height:18%;translate:-50% 0;border-radius:50%;background:radial-gradient(ellipse,rgba(218,199,132,.13),transparent 72%);border-top:1px solid rgba(232,214,158,.13)}
.orb{position:relative;border-radius:52% 48% 55% 45%/60% 54% 46% 40%;border-color:rgba(228,218,178,.27);background:radial-gradient(circle at 36% 29%,rgba(231,224,190,.2),rgba(37,56,50,.85) 64%);box-shadow:inset 0 0 35px rgba(229,213,158,.08),0 16px 30px rgba(0,0,8,.24)}
.orb::before{content:"";position:absolute;left:50%;top:95%;width:1px;height:30px;background:linear-gradient(rgba(201,205,150,.42),transparent);transform-origin:top}
.orb.lit{transform:translateY(-5px) scale(1.045);background:radial-gradient(circle at 37% 30%,#fff7c9,#e8cf78 30%,rgba(84,110,71,.78) 72%);box-shadow:0 0 25px rgba(244,221,143,.52),0 0 75px rgba(226,197,112,.2)}

/* VIII — a shaft through many layers of the world */
#screen-falling{background:linear-gradient(180deg,#282147 0,#11132c 38%,#060813 100%)}
.fall-wrap{width:min(88vw,520px);padding:10px;border-left:1px solid rgba(189,175,226,.16);border-right:1px solid rgba(189,175,226,.16);background:linear-gradient(90deg,rgba(181,163,224,.055),transparent 12% 88%,rgba(181,163,224,.055));box-shadow:0 30px 100px rgba(0,0,9,.52)}
#fallCanvas{border-radius:47% 47% 7px 7px/7% 7% 7px 7px;border-color:rgba(189,175,226,.2);background:linear-gradient(180deg,rgba(70,55,121,.4),rgba(7,8,20,.8));box-shadow:inset 0 24px 80px rgba(175,153,224,.09)}

/* ==================================================================
   LOST DREAMS, IMPOSSIBLE ROOMS, DEEPER SYSTEMS
   ================================================================== */
#screen-hollow{background:radial-gradient(80% 78% at 50% 45%,#25243a 0,#0c0d1a 64%,#05060d)}
.hollow-display{position:relative;min-height:190px;padding:2rem;border-top:1px solid rgba(205,200,221,.14);border-bottom:1px solid rgba(205,200,221,.08);background:radial-gradient(circle,rgba(192,187,213,.08),transparent 60%)}
.hollow-sym{filter:drop-shadow(0 0 12px rgba(190,182,215,.27))}.hollow-btn{border-radius:45% 55% 48% 52%;background:rgba(17,18,31,.7)}
#screen-moondial{background:radial-gradient(85% 82% at 50% 45%,#242b45 0,#0c1122 67%,#050710)}
.moondial-ring{width:310px;height:310px;border:1px solid rgba(201,204,222,.2);border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 54px,rgba(203,207,225,.06) 55px 56px),radial-gradient(circle,rgba(100,109,150,.14),transparent 68%);box-shadow:inset 0 0 60px rgba(171,184,216,.06),0 25px 70px rgba(0,0,9,.37)}
.moon-slot{border-color:rgba(205,210,229,.27);background:radial-gradient(circle at 38% 32%,rgba(229,229,222,.19),rgba(25,31,55,.88));box-shadow:inset -8px -7px 18px rgba(0,0,15,.22)}
#screen-tide{background:radial-gradient(90% 82% at 50% 54%,#15405a,#081523 65%,#040912)}
.tide-bar{height:70px;border-radius:50%;transform:perspective(500px) rotateX(22deg);background:linear-gradient(90deg,rgba(9,38,54,.88),rgba(62,144,165,.28),rgba(9,38,54,.88));box-shadow:inset 0 0 35px rgba(111,200,216,.13),0 20px 55px rgba(0,0,8,.32)}
#screen-cartog{background:radial-gradient(90% 82% at 50% 45%,#18264f,#070b20 68%,#030510)}
.cartog-sky{border-radius:50% 47% 49% 51%;border-color:rgba(150,174,233,.22);background:radial-gradient(circle,rgba(42,61,120,.38),rgba(6,9,28,.9) 68%);box-shadow:inset 0 0 90px rgba(99,130,211,.1),0 28px 80px rgba(0,0,9,.44)}

.dream-room{border-radius:48% 48% 16px 16px/8% 8% 16px 16px;border-color:rgba(219,210,234,.2);box-shadow:inset 0 0 70px rgba(160,141,206,.06),var(--v7-shadow-deep)}
.wonder-room{border-bottom:1px solid rgba(218,210,232,.12);background:radial-gradient(ellipse at 50% 96%,rgba(125,108,177,.12),transparent 58%)}
.wobj{filter:drop-shadow(0 12px 18px rgba(0,0,8,.46))}.wobj:hover{filter:drop-shadow(0 0 20px rgba(204,190,235,.42)) brightness(1.18)}
.room-msg,.wonder-msg{padding:.8rem 1rem;border-top:1px solid rgba(228,213,174,.12);color:rgba(235,226,240,.88)}

/* Nightmare layer and key branch */
.nightmare-meta{background:radial-gradient(55% 44% at 50% 12%,rgba(147,65,118,.08),transparent 70%)}
.nworld-shell{width:min(86vw,470px);filter:drop-shadow(0 26px 45px rgba(17,0,12,.38))}
.nightmare-portals{gap:.85rem}
.nportal{min-height:170px;border-radius:4px 18px 5px 15px;border-color:rgba(180,91,145,.22);background:radial-gradient(90% 60% at 80% 0,rgba(164,72,128,.12),transparent),linear-gradient(160deg,rgba(32,15,40,.9),rgba(8,6,20,.94));box-shadow:inset 0 1px rgba(255,220,238,.045),0 18px 42px rgba(7,0,8,.25)}
.nportal:hover{transform:translateY(-5px);box-shadow:0 25px 55px rgba(8,0,8,.38),0 0 25px rgba(179,79,137,.1)}
.nportal .ng{font-size:1.9rem}.nportal h3{font-size:1.12rem}.nportal .ndesc{color:rgba(183,149,175,.68)}
.night-key-card{border-radius:4px 18px 4px 18px;background:radial-gradient(80% 80% at 10% 50%,rgba(177,83,135,.13),transparent),linear-gradient(145deg,rgba(31,14,37,.85),rgba(8,6,19,.94))}
#screen-nightkey .key-trial{border-top:1px solid rgba(211,126,169,.18);border-bottom:1px solid rgba(211,126,169,.1);background:radial-gradient(circle at 50% 45%,rgba(122,45,91,.12),transparent 62%)}
.key-tumbler{border-radius:3px 13px 3px 13px;box-shadow:inset 0 0 25px rgba(202,103,151,.09),0 12px 25px rgba(0,0,8,.24)}

/* ==================================================================
   THE SLEEPING INDEX · a nocturnal manuscript, not a card feed
   ================================================================== */
#screen-index{background:radial-gradient(80% 76% at 50% 20%,#352d45 0,#151222 58%,#080712 100%)}
#screen-index>.scroll{align-items:center;padding-bottom:6rem}
#screen-index .screen-head{width:min(1080px,94vw)}
#screen-index .screen-sub{margin-bottom:2.4rem}
#screen-index .index-grid{position:relative;width:min(1080px,94vw);grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 3px;padding:clamp(.7rem,2vw,1.2rem);border:1px solid rgba(227,214,181,.13);border-radius:8px;background:linear-gradient(90deg,rgba(8,7,15,.55),rgba(48,38,50,.36) 49.7%,rgba(11,9,18,.72) 50%,rgba(48,38,50,.34) 50.3%,rgba(8,7,15,.55));box-shadow:var(--v7-shadow-deep),inset 0 0 60px rgba(234,213,160,.035);}
#screen-index .index-grid::after{content:"";position:absolute;left:50%;top:2%;bottom:2%;width:1px;background:linear-gradient(transparent,rgba(232,213,170,.22),transparent);box-shadow:0 0 14px rgba(0,0,0,.5);pointer-events:none}
#screen-index .dream{min-height:250px;border-radius:3px 13px 13px 3px;border:0;border-bottom:1px solid rgba(234,218,183,.1);background:linear-gradient(110deg,rgba(70,57,65,.36),rgba(35,29,45,.72));box-shadow:inset 18px 0 35px rgba(5,4,10,.16);padding:1.7rem 1.7rem 1.8rem}
#screen-index .dream:nth-child(even){border-radius:13px 3px 3px 13px;background:linear-gradient(-110deg,rgba(70,57,65,.36),rgba(35,29,45,.72));box-shadow:inset -18px 0 35px rgba(5,4,10,.16)}
#screen-index .dream.unlocked{border-color:rgba(237,219,173,.16);background:linear-gradient(90deg,rgba(126,91,47,.12),transparent 18%),linear-gradient(145deg,rgba(76,62,68,.58),rgba(34,28,43,.84));box-shadow:inset 3px 0 rgba(239,217,165,.42),inset 20px 0 40px rgba(10,8,14,.13)}
#screen-index .dream:nth-child(even).unlocked{background:linear-gradient(-90deg,rgba(126,91,47,.12),transparent 18%),linear-gradient(-145deg,rgba(76,62,68,.58),rgba(34,28,43,.84));box-shadow:inset -3px 0 rgba(239,217,165,.42),inset -20px 0 40px rgba(10,8,14,.13)}
#screen-index .dream.locked{border:0;border-bottom:1px dashed rgba(203,194,218,.12);background:linear-gradient(150deg,rgba(39,34,47,.44),rgba(21,18,29,.64));opacity:.78;filter:none}
#screen-index .dream h4{font-size:1.65rem;line-height:1.04;color:#f1e9df}
#screen-index .dream p{color:rgba(222,213,219,.78);line-height:1.62}
#screen-index .dream .num{color:rgba(230,208,157,.68)}
#screen-index .dream .sigil{color:rgba(221,209,223,.58)}
#screen-index .marks-title{width:min(1080px,94vw);margin-top:3.6rem;padding:.7rem 0;border-bottom:1px solid rgba(234,216,171,.15);font-size:1.05rem;color:rgba(237,219,174,.78)}
#screen-index .marks-title::before{content:"";width:28px;height:28px;border:1px solid rgba(237,218,169,.28);border-radius:50%;background:radial-gradient(circle,rgba(237,218,169,.12),transparent)}
#screen-index .marks-title::after{background:linear-gradient(90deg,rgba(236,215,159,.28),transparent)}
#screen-index .bonus-index-sub,#screen-index .rumors-sub,#screen-index .secret-hint{width:min(1080px,94vw);color:rgba(191,181,207,.68)}
.relics-grid,.lang-grid,.lang-sentence,.lang-combiner,.marks,#profileMount,.wild-index{width:min(1080px,94vw)}
.relics-grid{grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.25rem;border-top:1px solid rgba(228,213,176,.12);border-bottom:1px solid rgba(228,213,176,.08);padding:1rem 0}
.relic{min-height:190px;border:0;border-right:1px solid rgba(224,211,181,.09);border-radius:0;background:radial-gradient(circle at 50% 38%,rgba(222,199,144,.08),transparent 55%);display:flex;flex-direction:column;align-items:center;justify-content:center}
.relic-glyph{font-size:2.8rem;filter:drop-shadow(0 10px 12px rgba(0,0,8,.34))}
.lang-grid{grid-template-columns:repeat(auto-fill,minmax(138px,1fr));gap:2px;padding:2px;background:rgba(220,211,233,.08)}
.lang-cell{border:0;border-radius:0;background:linear-gradient(145deg,rgba(54,45,68,.58),rgba(22,19,35,.76));min-height:130px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.lang-cell.known{box-shadow:inset 0 -2px rgba(238,218,165,.28)}
.lang-glyph{font-size:2.4rem}.lang-sentence,.lang-combiner{border-radius:4px 18px 4px 18px;background:linear-gradient(145deg,rgba(58,47,65,.58),rgba(23,19,34,.78));border-color:rgba(228,213,176,.16)}
.glyph-chip,.lang-slot{border-radius:3px 13px 3px 13px;background:rgba(25,21,38,.66)}
.mark{border-radius:3px 12px 3px 12px;background:rgba(47,39,58,.52)}
.dream-reread{border-top-color:rgba(239,217,165,.25);padding-top:1rem}.dream-reread .rr-label{color:rgba(239,217,165,.75)}

/* ==================================================================
   WORLDS BEYOND · Unwritten, Dreamwild, Market, Turning
   ================================================================== */
#screen-unwritten{background:radial-gradient(90% 82% at 50% 44%,#202544,#0a0d20 69%,#040510)}
.uw-stage{width:min(1020px,96vw)}
.uw-scene{height:min(68vh,560px);border-radius:48% 48% 12px 12px/8% 8% 12px 12px;border-color:rgba(210,204,234,.2);box-shadow:inset 0 0 90px rgba(144,124,202,.08),var(--v7-shadow-deep)}
.uw-scene::after{content:"";position:absolute;inset:0;z-index:7;pointer-events:none;border-radius:inherit;background:linear-gradient(104deg,rgba(238,232,255,.055),transparent 23% 76%,rgba(4,3,15,.28)),radial-gradient(ellipse at 50% 38%,transparent 37%,rgba(3,4,14,.38));box-shadow:inset 0 0 0 1px rgba(234,227,249,.08),inset 0 0 80px rgba(2,3,13,.34)}
.uw-environment,.uw-horizon{position:absolute;pointer-events:none}.uw-environment{inset:0;z-index:0;overflow:hidden}.uw-horizon{left:0;right:0;bottom:0;height:58%;z-index:1;overflow:hidden}.uw-environment i,.uw-horizon i{position:absolute;display:block}
.uw-caption{z-index:8;padding:1rem 3rem 2rem;background:linear-gradient(180deg,rgba(6,7,21,.9),rgba(6,7,21,.5) 62%,transparent)}
.uw-node{z-index:5;padding:.5rem;animation-duration:7s}.uw-node .uw-g{width:48px;height:48px;display:grid;place-items:center;border:1px solid rgba(213,204,240,.16);border-radius:50% 45% 50% 42%;background:radial-gradient(circle at 40% 32%,rgba(226,218,247,.16),rgba(22,20,48,.32) 63%,transparent 68%);box-shadow:inset 0 0 18px rgba(211,198,239,.07),0 10px 24px rgba(0,0,10,.22);font-size:1.7rem}.uw-node .uw-label{padding:.24rem .48rem;border:1px solid rgba(215,206,239,.1);border-radius:3px 10px 3px 10px;background:rgba(8,9,25,.78);box-shadow:0 8px 22px rgba(0,0,9,.25);color:rgba(225,218,239,.86)}.uw-node:hover .uw-g,.uw-node:focus-visible .uw-g{border-color:rgba(233,222,252,.45);box-shadow:inset 0 0 20px rgba(224,209,248,.15),0 0 28px rgba(181,160,230,.22)}.uw-you{z-index:4;width:14px;height:34px;box-shadow:0 0 10px #fff,0 0 28px rgba(196,179,236,.7)}

/* The Shore — personality becomes geography, not a theme swatch. */
.uw-scene.uw-reflective{--uw-tone:rgba(100,125,185,.62)}.uw-scene.uw-swift{--uw-tone:rgba(131,82,176,.6)}.uw-scene.uw-explorer{--uw-tone:rgba(72,126,144,.62)}.uw-scene.uw-persistent{--uw-tone:rgba(144,111,77,.55)}.uw-scene.uw-avoidant{--uw-tone:rgba(150,139,77,.5)}.uw-scene.uw-restless{--uw-tone:rgba(151,72,128,.55)}.uw-scene.uw-dweller{--uw-tone:rgba(80,83,148,.58)}
.uw-scene.uw-region-shore{background:radial-gradient(circle at 50% 21%,rgba(235,227,255,.16) 0 2%,transparent 10%),radial-gradient(90% 70% at 50% 30%,var(--uw-tone,rgba(91,104,161,.58)),rgba(11,14,38,.95) 75%)}
.uw-region-shore .uw-horizon{height:48%;background:repeating-radial-gradient(ellipse at 50% 12%,rgba(222,216,244,.12) 0 1px,transparent 2px 23px),linear-gradient(180deg,rgba(78,89,139,.22),rgba(7,10,27,.82));clip-path:ellipse(82% 68% at 50% 70%);animation:uwTide 12s ease-in-out infinite alternate}
.uw-region-shore .uw-environment i{bottom:39%;width:2px;background:linear-gradient(transparent,rgba(215,205,241,.28));box-shadow:0 0 17px rgba(199,184,233,.12)}.uw-region-shore .uw-environment i::after{content:"";position:absolute;top:-5px;left:-4px;width:9px;height:9px;border:1px solid rgba(225,217,244,.3);transform:rotate(45deg)}.uw-region-shore .uw-environment i:nth-child(1){left:9%;height:19%}.uw-region-shore .uw-environment i:nth-child(2){left:34%;height:11%;opacity:.5}.uw-region-shore .uw-environment i:nth-child(3){left:58%;height:24%}.uw-region-shore .uw-environment i:nth-child(4){right:13%;height:15%}.uw-region-shore .uw-environment i:nth-child(n+5){top:15%;width:1px;height:1px;border-radius:50%;background:#f4ecff;box-shadow:0 0 8px rgba(238,226,255,.65)}.uw-region-shore .uw-environment i:nth-child(5){left:19%}.uw-region-shore .uw-environment i:nth-child(6){left:45%;top:25%}.uw-region-shore .uw-environment i:nth-child(7){right:29%;top:18%}.uw-region-shore .uw-environment i:nth-child(8){right:8%;top:32%}

/* City — architecture made from misplaced doors and future clocks. */
.uw-scene.uw-region-city{background:radial-gradient(circle at 72% 15%,rgba(229,218,250,.2) 0 3%,transparent 13%),linear-gradient(180deg,#343552 0,#1e223e 52%,#090c20 100%)}
.uw-region-city .uw-horizon{height:68%;background:linear-gradient(180deg,rgba(72,72,112,.72),rgba(17,21,45,.96));clip-path:polygon(0 48%,6% 48%,6% 25%,13% 25%,13% 40%,21% 40%,21% 13%,30% 13%,30% 44%,38% 44%,38% 29%,48% 29%,48% 4%,58% 4%,58% 38%,65% 38%,65% 19%,73% 19%,73% 45%,82% 45%,82% 8%,91% 8%,91% 34%,100% 34%,100% 100%,0 100%);filter:drop-shadow(0 -1px rgba(201,190,230,.13))}
.uw-region-city .uw-horizon i{width:3px;height:3px;background:rgba(239,219,166,.55);box-shadow:0 0 7px rgba(239,219,166,.24)}.uw-region-city .uw-horizon i:nth-child(1){left:9%;top:42%}.uw-region-city .uw-horizon i:nth-child(2){left:26%;top:28%}.uw-region-city .uw-horizon i:nth-child(3){left:53%;top:18%}.uw-region-city .uw-horizon i:nth-child(4){right:23%;top:34%}.uw-region-city .uw-horizon i:nth-child(5){right:7%;top:24%}
.uw-region-city .uw-environment i{top:9%;width:1px;height:30%;background:linear-gradient(transparent,rgba(209,197,233,.17));transform:rotate(25deg)}.uw-region-city .uw-environment i:nth-child(1){left:8%}.uw-region-city .uw-environment i:nth-child(2){left:29%;height:21%}.uw-region-city .uw-environment i:nth-child(3){left:50%;height:37%}.uw-region-city .uw-environment i:nth-child(4){right:26%;height:19%}.uw-region-city .uw-environment i:nth-child(5){right:8%;height:31%}.uw-region-city .uw-environment i:nth-child(n+6){display:none}

/* Weather — the city is above; emotion falls upward beneath it. */
.uw-scene.uw-region-weather{background:radial-gradient(ellipse at 50% 74%,rgba(94,136,173,.3),transparent 43%),linear-gradient(180deg,#10142c,#233552 58%,#0a1026)}
.uw-region-weather .uw-horizon{top:0;bottom:auto;height:34%;background:linear-gradient(0deg,rgba(53,68,98,.24),rgba(7,10,25,.9));clip-path:polygon(0 0,100% 0,100% 40%,92% 40%,92% 82%,84% 82%,84% 52%,71% 52%,71% 96%,60% 96%,60% 45%,47% 45%,47% 76%,36% 76%,36% 36%,24% 36%,24% 88%,12% 88%,12% 51%,0 51%)}
.uw-region-weather .uw-environment i{top:-14%;width:1px;height:31%;background:linear-gradient(rgba(197,224,240,.55),transparent);transform:rotate(14deg);animation:uwRain 4.4s linear infinite}.uw-region-weather .uw-environment i:nth-child(1){left:8%}.uw-region-weather .uw-environment i:nth-child(2){left:22%;height:23%;animation-delay:-3s}.uw-region-weather .uw-environment i:nth-child(3){left:39%;height:36%;animation-delay:-1.4s}.uw-region-weather .uw-environment i:nth-child(4){left:54%;height:19%;animation-delay:-2.1s}.uw-region-weather .uw-environment i:nth-child(5){left:68%;height:29%;animation-delay:-.7s}.uw-region-weather .uw-environment i:nth-child(6){left:81%;height:37%;animation-delay:-3.6s}.uw-region-weather .uw-environment i:nth-child(7){left:92%;height:24%;animation-delay:-1.8s}.uw-region-weather .uw-environment i:nth-child(8){left:47%;height:17%;animation-delay:-4s}

/* House — one impossible home, its lit rooms built from the player. */
.uw-scene.uw-region-house{background:radial-gradient(circle at 50% 29%,rgba(244,212,177,.17),transparent 31%),linear-gradient(180deg,#42364b,#211d35 58%,#0a0a18)}
.uw-region-house .uw-horizon{left:19%;right:19%;height:76%;bottom:-9%;background:linear-gradient(145deg,rgba(72,55,77,.92),rgba(24,22,39,.98));clip-path:polygon(50% 0,96% 34%,90% 34%,90% 100%,10% 100%,10% 34%,4% 34%);box-shadow:0 0 60px rgba(231,196,157,.09);animation:uwHouseBreath 10s ease-in-out infinite alternate}
.uw-region-house .uw-horizon i{width:14%;height:16%;border:1px solid rgba(236,207,174,.25);background:radial-gradient(circle,rgba(245,207,162,.18),rgba(22,19,36,.8));box-shadow:inset 0 0 15px rgba(239,198,150,.08)}.uw-region-house .uw-horizon i:nth-child(1){left:20%;top:39%}.uw-region-house .uw-horizon i:nth-child(2){right:20%;top:39%}.uw-region-house .uw-horizon i:nth-child(3){left:20%;top:65%}.uw-region-house .uw-horizon i:nth-child(4){right:20%;top:65%}.uw-region-house .uw-horizon i:nth-child(5){left:43%;bottom:7%;height:25%;background:rgba(12,13,25,.8)}
.uw-region-house .uw-environment i{bottom:-3%;width:2px;height:27%;background:linear-gradient(transparent,rgba(10,10,22,.84));transform-origin:bottom}.uw-region-house .uw-environment i:nth-child(1){left:5%;transform:rotate(12deg)}.uw-region-house .uw-environment i:nth-child(2){left:13%;height:18%;transform:rotate(-7deg)}.uw-region-house .uw-environment i:nth-child(3){right:6%;height:31%;transform:rotate(-13deg)}.uw-region-house .uw-environment i:nth-child(4){right:15%;height:19%;transform:rotate(8deg)}.uw-region-house .uw-environment i:nth-child(n+5){display:none}

/* Archive — a breathing organism built from shelves and unwritten pages. */
.uw-scene.uw-region-archive{background:radial-gradient(ellipse at 50% 40%,rgba(121,91,164,.25),transparent 38%),linear-gradient(180deg,#30264a,#151329 59%,#060713)}
.uw-region-archive .uw-horizon{height:100%;background:repeating-linear-gradient(90deg,rgba(7,8,19,.86) 0 4%,rgba(83,66,103,.22) 4.2% 4.5%,transparent 4.7% 10%),repeating-linear-gradient(0deg,transparent 0 18%,rgba(207,183,143,.13) 18.2% 18.7%,transparent 19% 25%);opacity:.83;animation:uwShelves 9s ease-in-out infinite alternate}
.uw-region-archive .uw-horizon i{top:11%;width:5%;height:71%;border-radius:50%;background:radial-gradient(ellipse,rgba(236,213,169,.08),transparent 65%);box-shadow:0 0 24px rgba(227,199,152,.08)}.uw-region-archive .uw-horizon i:nth-child(1){left:10%}.uw-region-archive .uw-horizon i:nth-child(2){left:30%;height:54%}.uw-region-archive .uw-horizon i:nth-child(3){left:48%;height:78%}.uw-region-archive .uw-horizon i:nth-child(4){right:29%;height:58%}.uw-region-archive .uw-horizon i:nth-child(5){right:9%}
.uw-region-archive .uw-environment i{left:50%;top:47%;border:1px solid rgba(231,209,170,.14);border-radius:50%;translate:-50% -50%;animation:uwArchivePulse 8s ease-out infinite}.uw-region-archive .uw-environment i:nth-child(1){width:18%;aspect-ratio:1}.uw-region-archive .uw-environment i:nth-child(2){width:34%;aspect-ratio:1;animation-delay:-2s}.uw-region-archive .uw-environment i:nth-child(3){width:53%;aspect-ratio:1;animation-delay:-4s}.uw-region-archive .uw-environment i:nth-child(4){width:76%;aspect-ratio:1;animation-delay:-6s}.uw-region-archive .uw-environment i:nth-child(n+5){display:none}
@keyframes uwTide{to{transform:translateY(7px) scaleX(1.025)}}@keyframes uwRain{to{transform:translate3d(-30px,630px,0) rotate(14deg)}}@keyframes uwHouseBreath{to{filter:brightness(1.08);transform:scale(1.008)}}@keyframes uwShelves{to{transform:scaleX(1.012);filter:brightness(1.08)}}@keyframes uwArchivePulse{0%{opacity:0;transform:scale(.72)}50%{opacity:.55}100%{opacity:0;transform:scale(1.18)}}
.uw-region-nav{gap:2px;background:rgba(214,207,232,.08);padding:2px}.uw-region-btn{border:0;border-radius:0;background:rgba(12,14,32,.8)}
.uw-laws,.uw-drifts,.uw-endings{width:min(1020px,96vw);border-radius:4px 18px 4px 18px;background:linear-gradient(145deg,rgba(34,35,68,.68),rgba(9,11,27,.8));box-shadow:0 22px 60px rgba(0,0,9,.26)}
.uw-law,.uw-drift-card,.uw-end-card{border-radius:3px 13px 3px 13px;background:linear-gradient(130deg,rgba(48,45,81,.42),rgba(14,15,35,.58))}

#screen-dreamwild{background:radial-gradient(100% 88% at 50% 30%,#173e42 0,#07181b 65%,#030a0d 100%)}
.wild-map{width:min(1040px,94vw);gap:2px;padding:2px;background:rgba(167,219,205,.12)}
.wild-map-node{border:0;border-radius:0;background:linear-gradient(145deg,rgba(17,57,58,.86),rgba(7,29,32,.9));min-height:84px}
.wild-map-node.active{background:linear-gradient(145deg,rgba(49,103,94,.78),rgba(16,54,55,.9));box-shadow:inset 0 -2px rgba(200,239,218,.4)}
.wild-stage{--wild-sky:#abcfd0;--wild-ink:#e7f5ea;--wild-glow:rgba(213,247,222,.36);width:min(1100px,98vw);height:min(70vh,690px);min-height:520px;border:1px solid rgba(208,238,224,.18);border-radius:48% 48% 12px 12px/8% 8% 12px 12px;background:linear-gradient(180deg,#bad7d2 0,#7ea9a7 48%,#234c4d 100%);box-shadow:inset 0 -80px 120px rgba(2,19,24,.48),inset 0 1px rgba(247,255,244,.35),0 42px 110px rgba(0,0,7,.5),0 0 80px rgba(94,190,165,.1)}
.wild-stage::before{content:"";position:absolute;inset:0;z-index:8;pointer-events:none;opacity:1;border-radius:inherit;background:linear-gradient(105deg,rgba(255,255,239,.12),transparent 24% 72%,rgba(0,18,27,.22)),radial-gradient(ellipse at 50% 32%,transparent 38%,rgba(2,20,26,.28) 100%);mix-blend-mode:soft-light}
.wild-stage::after{content:"";position:absolute;inset:0;z-index:9;pointer-events:none;border-radius:inherit;background:repeating-linear-gradient(104deg,transparent 0 24px,rgba(255,255,255,.018) 25px,transparent 27px 52px);box-shadow:inset 0 0 0 1px rgba(243,255,243,.1),inset 0 0 80px rgba(2,13,19,.34)}
.wild-sky-objects,.wild-distance,.wild-ground,.wild-foreground{position:absolute;pointer-events:none}
.wild-sky-objects{inset:0;z-index:0;overflow:hidden}.wild-sky-objects i,.wild-distance i,.wild-ground i,.wild-foreground i{position:absolute;display:block}
.wild-distance{left:-5%;right:-5%;bottom:31%;height:40%;z-index:1;opacity:1;background:none;clip-path:none}
.wild-ground{left:-5%;right:-5%;bottom:-9%;height:52%;z-index:2;border-radius:50% 50% 0 0;background:radial-gradient(ellipse at 50% 0,rgba(152,202,168,.38),transparent 60%),linear-gradient(180deg,#35665d,#102d32 72%);filter:saturate(1.08)}
.wild-foreground{inset:0;z-index:6;overflow:hidden}

/* Pastel Verge — soft geography with a horizon that inhales. */
.wild-verge{--wild-sky:#b9d8d3;--wild-ink:#eff9e8;--wild-glow:rgba(238,251,208,.38);background:radial-gradient(circle at 17% 16%,rgba(255,246,202,.9) 0 2.2%,rgba(255,240,186,.26) 2.5% 8%,transparent 15%),linear-gradient(180deg,#bfd9d6 0,#91beb6 43%,#466f68 66%,#173a3e 100%)}
.wild-verge .wild-sky-objects i{height:7%;width:22%;border-radius:50%;background:rgba(247,244,221,.22);filter:blur(5px);animation:wildCloud 22s ease-in-out infinite alternate}
.wild-verge .wild-sky-objects i:nth-child(1){left:7%;top:24%;width:28%}.wild-verge .wild-sky-objects i:nth-child(2){right:4%;top:19%;animation-delay:-9s}.wild-verge .wild-sky-objects i:nth-child(3){left:42%;top:7%;width:14%;opacity:.6;animation-delay:-15s}.wild-verge .wild-sky-objects i:nth-child(4){right:25%;top:34%;width:18%;opacity:.42;animation-delay:-4s}
.wild-verge .wild-distance i{bottom:-8%;border-radius:52% 52% 0 0/76% 76% 0 0;background:linear-gradient(180deg,rgba(105,157,142,.72),rgba(38,90,82,.88));box-shadow:inset 0 16px rgba(212,230,194,.09)}
.wild-verge .wild-distance i:nth-child(1){left:-8%;width:43%;height:72%;transform:rotate(4deg)}.wild-verge .wild-distance i:nth-child(2){left:25%;width:38%;height:48%;background:linear-gradient(180deg,rgba(128,168,151,.78),rgba(47,97,87,.9))}.wild-verge .wild-distance i:nth-child(3){right:12%;width:43%;height:65%;transform:rotate(-3deg)}.wild-verge .wild-distance i:nth-child(4){right:-9%;width:26%;height:43%}.wild-verge .wild-distance i:nth-child(5){left:48%;bottom:28%;width:3px;height:36%;background:rgba(240,234,201,.24);box-shadow:0 0 22px rgba(244,229,187,.28)}
.wild-verge .wild-ground i{bottom:8%;width:1px;height:22%;background:rgba(178,215,180,.35);transform-origin:bottom}.wild-verge .wild-ground i::after{content:"";position:absolute;left:-4px;top:-7px;width:8px;height:8px;border:1px solid rgba(240,229,184,.38);border-radius:60% 40%}.wild-verge .wild-ground i:nth-child(1){left:23%;height:18%}.wild-verge .wild-ground i:nth-child(2){left:54%;height:25%}.wild-verge .wild-ground i:nth-child(3){left:88%;height:14%}
.wild-verge .wild-foreground i{bottom:-4%;width:3px;height:19%;border-radius:100% 0;background:linear-gradient(180deg,rgba(127,185,153,.64),rgba(16,55,51,.9));transform-origin:bottom;animation:wildGrass 7s ease-in-out infinite alternate}.wild-verge .wild-foreground i:nth-child(1){left:3%;height:28%}.wild-verge .wild-foreground i:nth-child(2){left:10%;animation-delay:-2s}.wild-verge .wild-foreground i:nth-child(3){right:4%;height:31%;animation-delay:-4s}.wild-verge .wild-foreground i:nth-child(4){right:13%;height:22%;animation-delay:-1s}.wild-verge .wild-foreground i:nth-child(5){left:46%;height:12%;opacity:.55}

/* Orchard of Houses — fruit-architecture hanging above a violet dusk. */
.wild-orchard{--wild-sky:#c6b6cf;--wild-ink:#fff0db;--wild-glow:rgba(255,214,179,.34);background:radial-gradient(circle at 74% 18%,rgba(255,226,188,.65) 0 3%,rgba(250,213,181,.12) 3.5% 11%,transparent 18%),linear-gradient(180deg,#c5b5cf 0,#8d83a6 42%,#4e5870 64%,#202d38 100%)}
.wild-orchard .wild-sky-objects i{top:-9%;width:1px;height:30%;background:linear-gradient(rgba(61,48,78,.15),rgba(65,51,79,.58));transform-origin:top}.wild-orchard .wild-sky-objects i::after{content:"";position:absolute;left:50%;bottom:-12px;width:clamp(24px,4vw,48px);aspect-ratio:1;translate:-50%;clip-path:polygon(50% 0,91% 35%,83% 94%,17% 94%,9% 35%);background:linear-gradient(145deg,rgba(255,228,194,.72),rgba(113,91,137,.8));border-radius:48% 48% 24% 24%;box-shadow:inset 0 0 14px rgba(255,240,206,.25),0 10px 18px rgba(35,25,46,.25)}
.wild-orchard .wild-sky-objects i:nth-child(1){left:13%;height:28%;transform:rotate(-4deg)}.wild-orchard .wild-sky-objects i:nth-child(2){left:37%;height:19%;opacity:.7}.wild-orchard .wild-sky-objects i:nth-child(3){right:27%;height:31%;transform:rotate(3deg)}.wild-orchard .wild-sky-objects i:nth-child(4){right:8%;height:16%;opacity:.58}
.wild-orchard .wild-distance{bottom:24%;height:52%}.wild-orchard .wild-distance i{bottom:0;width:12%;height:74%;background:linear-gradient(90deg,transparent 43%,rgba(50,51,73,.78) 44% 58%,transparent 59%)}.wild-orchard .wild-distance i::before{content:"";position:absolute;left:50%;top:0;width:130%;aspect-ratio:1;translate:-50% -20%;border-radius:56% 44% 61% 39%;background:radial-gradient(circle at 35% 35%,rgba(103,98,128,.88),rgba(49,54,76,.96));box-shadow:-34px 17px rgba(58,63,84,.72),28px 8px rgba(83,79,105,.76)}.wild-orchard .wild-distance i:nth-child(1){left:2%}.wild-orchard .wild-distance i:nth-child(2){left:24%;height:62%;transform:scale(.78)}.wild-orchard .wild-distance i:nth-child(3){left:48%;height:82%;transform:scale(1.08)}.wild-orchard .wild-distance i:nth-child(4){right:17%;height:58%;transform:scale(.72)}.wild-orchard .wild-distance i:nth-child(5){right:0%;height:76%}
.wild-orchard .wild-ground{background:radial-gradient(ellipse at 52% 0,rgba(178,144,181,.38),transparent 60%),linear-gradient(180deg,#44545a,#1b3339 72%)}
.wild-orchard .wild-ground i{top:7%;width:34%;height:2px;background:rgba(226,185,167,.15);box-shadow:0 10px rgba(226,185,167,.06);transform:rotate(-8deg)}.wild-orchard .wild-ground i:nth-child(1){left:4%}.wild-orchard .wild-ground i:nth-child(2){left:38%;transform:rotate(7deg)}.wild-orchard .wild-ground i:nth-child(3){right:-3%;transform:rotate(-3deg)}
.wild-orchard .wild-foreground i{bottom:-7%;width:17%;height:36%;border:2px solid rgba(26,47,49,.82);border-bottom:0;border-radius:50% 50% 0 0;transform:rotate(15deg)}.wild-orchard .wild-foreground i:nth-child(1){left:-7%}.wild-orchard .wild-foreground i:nth-child(2){left:8%;height:18%;opacity:.45}.wild-orchard .wild-foreground i:nth-child(3){right:-6%;transform:rotate(-18deg);height:44%}.wild-orchard .wild-foreground i:nth-child(4){right:12%;height:20%;opacity:.42}.wild-orchard .wild-foreground i:nth-child(5){left:47%;height:11%;opacity:.3}

.wild-orchard .wild-distance{clip-path:none;background:none}

/* Nursery Tide — an impossible sea with toys sleeping below the surface. */
.wild-nursery{--wild-sky:#81bdc8;--wild-ink:#ebffff;--wild-glow:rgba(178,242,239,.38);background:radial-gradient(circle at 19% 17%,rgba(232,255,246,.62) 0 2.6%,rgba(188,235,225,.12) 3% 13%,transparent 19%),linear-gradient(180deg,#8cc4cc 0,#609eaf 38%,#397b8e 39%,#124352 100%)}
.wild-nursery .wild-sky-objects i{border:1px solid rgba(224,255,250,.25);border-radius:50%;box-shadow:inset 0 0 12px rgba(230,255,250,.09);animation:wildBubble 12s ease-in-out infinite}.wild-nursery .wild-sky-objects i:nth-child(1){left:9%;top:28%;width:24px;height:24px}.wild-nursery .wild-sky-objects i:nth-child(2){left:43%;top:14%;width:14px;height:14px;animation-delay:-6s}.wild-nursery .wild-sky-objects i:nth-child(3){right:23%;top:25%;width:36px;height:36px;animation-delay:-9s}.wild-nursery .wild-sky-objects i:nth-child(4){right:7%;top:9%;width:10px;height:10px;animation-delay:-3s}
.wild-nursery .wild-distance{bottom:33%;height:25%;background:repeating-radial-gradient(ellipse at 50% 110%,rgba(221,255,246,.13) 0 2px,transparent 3px 29px);opacity:.8}.wild-nursery .wild-distance i{bottom:-13%;width:14%;height:46%;border:1px solid rgba(32,86,98,.42);border-bottom:0;border-radius:50% 50% 0 0}.wild-nursery .wild-distance i:nth-child(1){left:5%;height:28%}.wild-nursery .wild-distance i:nth-child(2){left:28%}.wild-nursery .wild-distance i:nth-child(3){left:52%;height:34%}.wild-nursery .wild-distance i:nth-child(4){right:17%;height:55%}.wild-nursery .wild-distance i:nth-child(5){right:-2%;height:24%}
.wild-nursery .wild-ground{height:58%;background:repeating-radial-gradient(ellipse at 50% -12%,rgba(190,239,236,.16) 0 2px,transparent 3px 27px),linear-gradient(180deg,rgba(36,111,124,.94),#103f4c 70%);animation:wildTide 8s ease-in-out infinite}.wild-nursery .wild-ground i{border-radius:50%;border:1px solid rgba(209,250,241,.12)}.wild-nursery .wild-ground i:nth-child(1){left:16%;top:32%;width:8%;aspect-ratio:1}.wild-nursery .wild-ground i:nth-child(2){right:21%;top:19%;width:5%;aspect-ratio:1}.wild-nursery .wild-ground i:nth-child(3){left:48%;bottom:8%;width:18%;height:7%;border-color:rgba(209,250,241,.08)}
.wild-nursery .wild-foreground i{bottom:-4%;width:2px;height:24%;background:linear-gradient(transparent,rgba(35,99,95,.74));transform-origin:bottom;animation:wildGrass 9s ease-in-out infinite alternate}.wild-nursery .wild-foreground i:nth-child(1){left:4%;height:33%}.wild-nursery .wild-foreground i:nth-child(2){left:11%;height:24%;animation-delay:-4s}.wild-nursery .wild-foreground i:nth-child(3){right:5%;height:36%;animation-delay:-2s}.wild-nursery .wild-foreground i:nth-child(4){right:13%;height:21%}.wild-nursery .wild-foreground i:nth-child(5){left:60%;height:12%;opacity:.42}

/* Elsewhere Station — departures suspended beneath an immobile moon. */
.wild-station{--wild-sky:#777c9f;--wild-ink:#fff3cf;--wild-glow:rgba(211,197,249,.36);background:radial-gradient(circle at 78% 15%,rgba(255,244,204,.92) 0 3.6%,rgba(241,224,185,.12) 4% 12%,transparent 18%),linear-gradient(180deg,#8588aa 0,#555d82 45%,#2f3651 64%,#151b2d 100%)}
.wild-station .wild-sky-objects i{height:1px;background:rgba(244,236,217,.3);box-shadow:0 0 6px rgba(241,228,199,.24);transform-origin:left}.wild-station .wild-sky-objects i:nth-child(1){left:5%;top:17%;width:24%;transform:rotate(8deg)}.wild-station .wild-sky-objects i:nth-child(2){left:23%;top:29%;width:29%;transform:rotate(-5deg)}.wild-station .wild-sky-objects i:nth-child(3){right:17%;top:34%;width:21%;transform:rotate(5deg)}.wild-station .wild-sky-objects i:nth-child(4){right:2%;top:24%;width:14%;transform:rotate(-9deg)}
.wild-station .wild-distance{height:47%;bottom:23%;background:linear-gradient(180deg,rgba(49,52,76,.45),rgba(24,28,46,.9));clip-path:polygon(0 28%,8% 22%,8% 10%,12% 10%,12% 22%,27% 17%,27% 0,30% 0,30% 16%,55% 10%,55% 24%,69% 20%,69% 4%,72% 4%,72% 19%,100% 7%,100% 100%,0 100%)}.wild-station .wild-distance i{bottom:6%;width:1px;height:70%;background:rgba(217,211,222,.13)}.wild-station .wild-distance i::after{content:"";position:absolute;left:-5px;top:0;width:11px;height:11px;border:1px solid rgba(229,220,213,.2);border-radius:50%;box-shadow:0 0 12px rgba(229,220,213,.12)}.wild-station .wild-distance i:nth-child(1){left:11%}.wild-station .wild-distance i:nth-child(2){left:29%;height:52%}.wild-station .wild-distance i:nth-child(3){left:56%;height:63%}.wild-station .wild-distance i:nth-child(4){right:17%;height:48%}.wild-station .wild-distance i:nth-child(5){right:5%;height:74%}
.wild-station .wild-ground{background:repeating-linear-gradient(88deg,transparent 0 54px,rgba(210,207,219,.08) 55px 58px,transparent 59px 104px),linear-gradient(180deg,#30384e,#151d2e 74%)}.wild-station .wild-ground::before,.wild-station .wild-ground::after{content:"";position:absolute;left:5%;right:3%;height:2px;background:rgba(220,216,221,.2);box-shadow:0 0 5px rgba(205,196,214,.08);transform:rotate(-1deg)}.wild-station .wild-ground::before{top:33%}.wild-station .wild-ground::after{top:50%}.wild-station .wild-ground i{top:32%;width:4px;height:21%;background:rgba(207,198,205,.12);transform:rotate(5deg)}.wild-station .wild-ground i:nth-child(1){left:22%}.wild-station .wild-ground i:nth-child(2){left:52%}.wild-station .wild-ground i:nth-child(3){right:17%}
.wild-station .wild-foreground i{bottom:-5%;width:2px;height:29%;background:linear-gradient(transparent,rgba(10,15,28,.88));box-shadow:0 0 0 1px rgba(169,162,188,.06)}.wild-station .wild-foreground i::before{content:"";position:absolute;left:-8px;top:0;width:16px;height:21px;border-radius:50% 50% 42% 42%;background:rgba(19,24,42,.84);box-shadow:inset 0 0 8px rgba(238,217,169,.18)}.wild-station .wild-foreground i:nth-child(1){left:3%;height:39%}.wild-station .wild-foreground i:nth-child(2){left:15%;height:19%;opacity:.5}.wild-station .wild-foreground i:nth-child(3){right:4%;height:43%}.wild-station .wild-foreground i:nth-child(4){right:14%;height:22%;opacity:.55}.wild-station .wild-foreground i:nth-child(5){left:49%;height:13%;opacity:.35}

.wild-thing{filter:drop-shadow(0 18px 14px rgba(2,12,14,.38));z-index:5;transform-origin:50% 90%;animation:wildCreatureBreath 6.5s ease-in-out infinite alternate}
.wild-thing:nth-of-type(2){animation-delay:-2.1s;animation-duration:7.4s}.wild-thing:nth-of-type(3){animation-delay:-4.2s;animation-duration:5.8s}.wild-thing:nth-of-type(4){animation-delay:-1.2s;animation-duration:8.2s}
.wild-thing svg{overflow:visible;filter:drop-shadow(0 3px rgba(255,255,255,.09)) drop-shadow(0 14px 13px rgba(1,10,17,.28))}
.wild-object-shadow{fill:rgba(2,17,23,.22);filter:blur(2px)}
.wild-art{stroke:var(--wild-ink);stroke-width:1.55;paint-order:stroke fill;filter:drop-shadow(0 0 6px var(--wild-glow))}
.wild-echo{fill:none;stroke:var(--wild-glow);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;opacity:.24;transform:translate(1.2px,1.8px);filter:blur(1.5px)}
.wild-art .cut{fill:var(--wild-sky);stroke:none}.wild-echo .cut{fill:none}
.wild-thing>span{border-radius:3px 11px 3px 11px;background:linear-gradient(145deg,rgba(4,24,27,.9),rgba(18,45,48,.84));border:1px solid rgba(202,234,214,.18);box-shadow:0 8px 20px rgba(1,12,18,.25);color:#eff8ee;letter-spacing:.045em}
.wild-thing:hover,.wild-thing:focus-visible{animation-play-state:paused;transform:translateY(-9px) scale(1.1);filter:drop-shadow(0 18px 23px var(--wild-glow));z-index:10}
.wild-whisper{font-size:1.02rem}.wild-whisper b{font-size:1.3rem}
@keyframes wildCloud{to{transform:translate3d(18px,5px,0) scaleX(1.08)}}
@keyframes wildGrass{to{transform:rotate(5deg) translateX(4px)}}
@keyframes wildBubble{50%{transform:translate3d(7px,-20px,0);opacity:.42}}
@keyframes wildCreatureBreath{to{translate:-50% calc(-50% - 5px);filter:drop-shadow(0 22px 18px rgba(2,12,14,.3))}}

#screen-market{background:radial-gradient(88% 82% at 50% 38%,#392b4d,#130e23 64%,#070511)}
.market-stalls{width:min(1120px,96vw);gap:1.2rem}
.stall{border-radius:46% 46% 12px 12px/8% 8% 12px 12px;border-color:rgba(230,202,144,.2);background:radial-gradient(60% 42% at 50% 0,rgba(237,193,112,.13),transparent),linear-gradient(165deg,rgba(55,39,69,.88),rgba(14,10,27,.94));box-shadow:inset 0 0 45px rgba(234,198,125,.04),0 28px 70px rgba(0,0,8,.36)}
.stall-art{filter:drop-shadow(0 16px 18px rgba(0,0,8,.3))}
#screen-season{background:radial-gradient(88% 82% at 50% 42%,#243750,#0b1221 68%,#050812)}
.season-stage{width:min(800px,94vw);padding:1.4rem;border-top:1px solid rgba(181,213,234,.16);border-bottom:1px solid rgba(181,213,234,.1);background:radial-gradient(circle at 50% 30%,rgba(149,201,226,.08),transparent 65%)}
.daily-dream{border-radius:4px 18px 4px 18px;background:linear-gradient(145deg,rgba(42,58,81,.58),rgba(12,21,35,.74));box-shadow:0 20px 55px rgba(0,0,8,.24)}

/* Deeper rooms and confrontations */
#screen-lake{background:radial-gradient(90% 84% at 50% 55%,#12334d,#061321 68%,#030812)}
.lake-wrap{width:min(94vw,760px);padding:10px;border:1px solid rgba(143,202,222,.18);border-radius:48% 48% 9px 9px/9% 9% 9px 9px;background:rgba(8,31,45,.56);box-shadow:inset 0 0 70px rgba(93,177,202,.08),var(--v7-shadow-deep)}
#lakeCanvas{border-radius:inherit}
#screen-hall{background:radial-gradient(88% 82% at 50% 45%,#243342,#0a101e 68%,#040711)}
.hall-mirror{border-width:9px;border-color:rgba(205,218,222,.27);box-shadow:inset 0 0 55px rgba(189,219,226,.13),0 28px 80px rgba(0,0,9,.43),0 0 30px rgba(164,203,214,.07)}
.hall-choice{border-radius:3px 13px 3px 13px;background:linear-gradient(120deg,rgba(42,59,72,.58),rgba(12,22,34,.72))}
#screen-subconscious{background:radial-gradient(88% 82% at 50% 45%,#2a263f,#0d0c1b 67%,#05050e)}
.sub-stage{border-radius:48% 48% 9px 9px/8% 8% 9px 9px;border-color:rgba(205,195,226,.19);box-shadow:inset 0 0 80px rgba(140,118,190,.07),var(--v7-shadow-deep)}

/* ==================================================================
   SYSTEM MOMENTS · tutorial, notices, updates, endings
   ================================================================== */
#tutorial{background:rgba(3,4,12,.82);backdrop-filter:blur(8px)}
.tut-card{width:min(560px,94vw);padding:2.8rem 2.3rem 2rem;border-radius:48% 48% 12px 12px/8% 8% 12px 12px;border-color:rgba(231,217,182,.23);background:radial-gradient(65% 40% at 50% 0,rgba(233,211,160,.1),transparent),linear-gradient(160deg,rgba(43,39,71,.97),rgba(11,12,29,.985));box-shadow:var(--v7-shadow-deep),inset 0 0 70px rgba(158,139,205,.06)}
.tut-glyph{width:70px;height:70px;display:grid;place-items:center;margin:0 auto 1rem;border:1px solid rgba(237,219,173,.24);border-radius:50%;background:radial-gradient(circle,rgba(237,219,173,.12),transparent)}
.tut-title{font-size:2rem}.tut-text{color:rgba(224,217,233,.8)}
.tut-next{border-radius:3px 13px 3px 13px;background:rgba(35,31,56,.68)}
.updates-list{width:min(900px,94vw);gap:0;border-left:1px solid rgba(231,214,174,.18);padding-left:clamp(1rem,4vw,2.4rem)}
.upd{position:relative;border:0;border-bottom:1px solid rgba(218,209,231,.1);border-radius:0;padding:1.8rem 1.4rem;background:linear-gradient(90deg,rgba(42,34,56,.32),transparent)}
.upd::before{content:"";position:absolute;left:calc(-1 * clamp(1rem,4vw,2.4rem) - 5px);top:2rem;width:9px;height:9px;border-radius:50%;background:#77708c;border:2px solid #151222}
.upd.latest::before{background:var(--v7-moon-hi);box-shadow:var(--v7-glow-moon)}
.upd.latest{border-color:rgba(237,219,173,.24);box-shadow:none;background:linear-gradient(90deg,rgba(92,70,50,.2),transparent)}
.upd-v{border-radius:3px 10px 3px 10px}
#toast{border-radius:4px 18px 4px 18px;background:linear-gradient(120deg,rgba(42,38,67,.96),rgba(9,11,27,.98));border-color:rgba(237,219,173,.28);box-shadow:var(--v7-shadow-near)}
#narrator{background:linear-gradient(90deg,transparent,rgba(9,11,27,.82) 12%,rgba(9,11,27,.82) 88%,transparent);border-top:1px solid rgba(217,207,233,.09)}
#versionTag{border-radius:3px 10px 3px 10px;background:rgba(7,9,23,.78);border-color:rgba(218,210,232,.2);color:rgba(211,202,225,.68)}

#screen-waking{background:radial-gradient(circle at 50% 48%,#494064,#17142d 44%,#060711 82%)}
.breath-stage{width:min(78vw,410px)}
.breath-stage::before,.breath-stage::after{content:"";position:absolute;inset:-12%;border:1px dashed rgba(238,219,169,.13);border-radius:50%;animation:v7Orbit 70s linear infinite}.breath-stage::after{inset:12%;animation-direction:reverse;animation-duration:52s}
.breath-ring{border-color:rgba(229,217,238,.28);box-shadow:inset 0 0 60px rgba(151,128,202,.08)}
.breath-orb{background:radial-gradient(circle at 38% 34%,#fffbed,#edd99d 34%,rgba(145,119,181,.56) 70%,rgba(56,44,94,.2));box-shadow:0 0 30px rgba(249,230,178,.55),0 0 100px rgba(226,198,135,.25)}
#wakingEnd,#subEnd,#escapeEnd{background:radial-gradient(90% 85% at 50% 45%,rgba(45,40,70,.98),rgba(5,6,15,.995));}
#wakingEnd::before,#subEnd::before{content:"";position:absolute;inset:7%;border:1px solid rgba(238,219,169,.14);border-radius:50% 50% 9% 9%/17% 17% 8% 8%;pointer-events:none}
#wakingEnd h2,#subEnd h2{font-size:clamp(3rem,9vw,7rem);line-height:.86;letter-spacing:-.03em}
#wakingEnd>p,#subEndBody{max-width:58ch;color:rgba(231,224,233,.82);line-height:1.7}
.end-acts button{border-radius:3px 13px 3px 13px;background:rgba(28,25,48,.66)}
.escape-end-phase{overflow:hidden}.escape-end-phase::before{content:"";position:absolute;inset:6%;border:1px solid currentColor;border-radius:50% 50% 8% 8%/16% 16% 8% 8%;opacity:.1;pointer-events:none}

/* ==================================================================
   QUALITY BUDGETS · same art direction at every level
   ================================================================== */
body.gfx-medium #oneiricStage{opacity:.72}
body.gfx-medium .os-threadwork,body.gfx-medium .sc-thread{display:none}
body.gfx-medium .portal,body.gfx-medium .wild-stage,body.gfx-medium .dream-room{box-shadow:0 18px 45px rgba(0,0,8,.3)}
body.gfx-medium .constel::before,body.gfx-medium .breath-stage::before,body.gfx-medium .breath-stage::after{animation:none}
body.gfx-low #oneiricStage{display:block!important;opacity:.42}
body.gfx-low .os-threadwork,body.gfx-low .os-curtain,body.gfx-low .os-oculus,body.gfx-low .scene-chrome .sc-thread,body.gfx-low .scene-chrome .sc-veil{display:none!important}
body.gfx-low #dreamSky,body.gfx-low #skyfar{display:none!important}
body.gfx-low .portal,body.gfx-low .wild-stage,body.gfx-low .dream-room,body.gfx-low .match-grid,body.gfx-low .constel{box-shadow:0 12px 28px rgba(0,0,8,.24)!important;filter:none!important}
body.gfx-low .portal::before{opacity:.42}
body.gfx-low .scene-chrome{opacity:.58}
body.gfx-medium .wild-echo,body.gfx-low .wild-echo{display:none}
body.gfx-medium .wild-sky-objects i,body.gfx-medium .wild-foreground i,body.gfx-medium .wild-thing{animation:none}
body.gfx-low .wild-sky-objects{display:none}body.gfx-low .wild-distance{opacity:.62}body.gfx-low .wild-foreground{opacity:.5}
body.gfx-low .wild-stage::before{opacity:.48}body.gfx-low .wild-art{filter:none}body.gfx-low .wild-thing{animation:none}
body.gfx-medium .uw-environment i,body.gfx-medium .uw-horizon,body.gfx-medium .uw-node{animation:none}
body.gfx-low .uw-environment i,body.gfx-low .uw-horizon,body.gfx-low .uw-node{animation:none}body.gfx-low .uw-environment i:nth-child(n+5){display:none}body.gfx-low .uw-scene::after{box-shadow:inset 0 0 0 1px rgba(234,227,249,.08)}

/* ==================================================================
   RESPONSIVE COMPOSITIONS
   ================================================================== */
@media(max-width:960px){
  .portals{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bonus-portals{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nightmare-portals{grid-template-columns:repeat(2,minmax(0,1fr))}
  .portal{min-height:205px}
  .os-curtain{width:16vw;min-width:70px}
  #screen-index .index-grid{grid-template-columns:1fr;max-width:720px;background:linear-gradient(145deg,rgba(55,45,59,.42),rgba(13,11,21,.66))}
  #screen-index .index-grid::after{display:none}
  #screen-index .dream,#screen-index .dream:nth-child(even){border-radius:3px 13px 13px 3px;background:linear-gradient(110deg,rgba(70,57,65,.36),rgba(35,29,45,.72));box-shadow:inset 18px 0 35px rgba(5,4,10,.16)}
  #screen-index .dream.unlocked,#screen-index .dream:nth-child(even).unlocked{background:linear-gradient(90deg,rgba(126,91,47,.12),transparent 18%),linear-gradient(145deg,rgba(76,62,68,.58),rgba(34,28,43,.84));box-shadow:inset 3px 0 rgba(239,217,165,.42),inset 20px 0 40px rgba(10,8,14,.13)}
}

@media(max-width:680px){
  #oneiricStage{opacity:.66}.os-vault{width:128vw}.os-curtain{display:none}
  #hub{padding-top:calc(4.2rem + env(safe-area-inset-top))}
  .hub-prologue{width:100%}.hub-kicker{font-size:.54rem;letter-spacing:.2em}.title{font-size:clamp(3.1rem,16vw,4.9rem);line-height:.84}
  .subtitle{font-size:1rem;margin-top:.8rem}.crest{margin-bottom:.4rem}
  .status{display:grid;grid-template-columns:1fr 1fr;gap:.6rem .7rem;padding:.9rem .8rem;background:rgba(13,15,35,.6);border:1px solid rgba(220,212,235,.12);border-radius:3px 13px 3px 13px}
  .status .dot{display:none}.status .who,.status .remember{text-align:left}.status .frag,.status .lucid-wrap{text-align:right;justify-content:flex-end}.depth-badge{grid-column:1/-1;justify-self:center}
  .memory-observatory{min-height:500px;margin-top:.8rem;padding-inline:0}.memory-observatory::before{inset:0;border-radius:48% 48% 10px 10px/15% 15% 10px 10px}.observatory-label strong{font-size:.98rem}
  .world-shell{width:min(112vw,520px);margin-left:50%;translate:-50% 0}.world-hint{padding:0 1rem}
  .fragment-atlas{padding-top:1.8rem}.atlas-heading{grid-template-columns:auto 1fr}.atlas-mark{display:none}.atlas-heading h2{font-size:1.65rem}
  .portals{gap:.7rem}.portal{min-height:205px;padding:1rem;border-radius:4px 17px 5px 14px}.portal .pg{width:50px;height:50px;font-size:1.7rem}.portal h3{font-size:1.12rem;margin-top:4rem}.portal .desc{font-size:.77rem}.portal .pstate{font-size:.5rem;max-width:12ch;text-align:right}
  .bonus-meta,.nightmare-meta,.rooms-meta,.deep-meta,.dreamwild-meta{margin-top:3.4rem}
  .screen>.scroll{padding-top:calc(1rem + env(safe-area-inset-top))}.screen-head{align-items:flex-start}.screen-title{font-size:clamp(1.8rem,9vw,2.7rem)}.back{padding:.45rem .65rem;font-size:.68rem;max-width:42%;line-height:1.25}
  .scene-chrome .sc-veil{display:none}.sc-sigil{top:17vh;font-size:9rem}.sc-vault{width:125vw}
  .match-grid{width:min(94vw,500px);padding:.8rem;gap:.55rem}.card-face{border-radius:34% 44% 36% 46%/12% 15% 11% 14%}
  .constel{width:94vw}.maze-wrap{width:94vw}.mirror-board{width:94vw;padding:12px}.quiz{padding:1.4rem .6rem}.quiz::before{top:-70px;width:58px;height:58px}.q-opt{padding:.85rem .7rem}
  .water-board{width:94vw;padding:1rem;transform:none}.orbs{width:min(86vw,380px)}.fall-wrap{width:94vw}
  .uw-caption{padding:.8rem 1rem 1.7rem;font-size:.82rem;line-height:1.35}.uw-node .uw-g{width:42px;height:42px;font-size:1.45rem}.uw-node .uw-label{opacity:.88;font-size:.6rem;max-width:110px;white-space:normal;line-height:1.1}.uw-region-nav{overflow-x:auto;justify-content:flex-start;flex-wrap:nowrap}.uw-region-btn{flex:0 0 auto;min-width:96px}
  .wild-stage{width:100vw;margin-left:calc(50% - 50vw);border-radius:0;min-height:500px}.wild-stage::after{bottom:-16%}
  .wild-stage::after{bottom:0}
  .uw-scene{width:100vw;margin-left:calc(50% - 50vw);border-radius:0}
  .tut-card{padding:2.4rem 1.3rem 1.5rem;border-radius:38% 38% 10px 10px/5% 5% 10px 10px}
  #screen-index .index-grid{width:100vw;margin-left:calc(50% - 50vw);padding:.5rem;border-left:0;border-right:0;border-radius:0}
  #screen-index .dream{min-height:220px;padding:1.4rem}
  .relics-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.relic{min-height:170px;padding:.8rem}.relic p{font-size:.78rem}
}

@media(max-width:390px){
  .title{font-size:3.25rem}.intro-kicker{flex-wrap:wrap;justify-content:center;gap:.35rem}.intro-kicker::before,.intro-kicker::after{width:25px}
  #intro h1{font-size:3.45rem}.intro-mark{width:70px}.enter-btn{min-width:86vw;font-size:.98rem;padding-left:1rem}
  .status{grid-template-columns:1fr;padding:.8rem}.status .who,.status .remember,.status .frag,.status .lucid-wrap{text-align:center;justify-content:center}.status .frag{order:-1}
  .memory-observatory{min-height:455px}.world-shell{width:125vw}.observatory-label{margin-bottom:-1.3rem}
  .portals,.bonus-portals,.nightmare-portals{grid-template-columns:1fr}.portal{min-height:180px}.portal h3{margin-top:3.7rem}.portal .desc{font-size:.82rem}
  .atlas-num{display:none}.atlas-heading{grid-template-columns:1fr;text-align:center}.atlas-heading p{max-width:30ch;margin:.4rem auto 0}
  .screen-head{display:grid;grid-template-columns:1fr}.screen-title{text-align:left;order:-1}.back{max-width:none;justify-self:start}.screen-sub{text-align:left}
  .match-grid{grid-template-columns:repeat(3,1fr)}.card-front{font-size:1.8rem}
  .wild-map{grid-template-columns:1fr 1fr}.wild-map-node{min-height:72px}.relics-grid{grid-template-columns:1fr}
  .end-acts{flex-direction:column;width:90vw}.end-acts button{width:100%}
}

@media(max-height:560px) and (orientation:landscape){
  #intro{padding:.7rem}.intro-kicker{margin-bottom:.4rem}.intro-mark{width:52px;margin-bottom:.2rem}#intro h1{font-size:3rem;max-width:none;line-height:.9}#intro p{margin-top:.5rem}.enter-btn{margin-top:.7rem}.intro-hint{display:none}
  .screen-head{margin-bottom:.1rem}.screen-sub{margin-bottom:.6rem}.scene-chrome .sc-horizon{display:none}
}

@media(min-width:1500px){
  :root{--v7-wide:min(1320px,90vw);--v7-scene:min(1080px,90vw)}
  .portals{width:min(1180px,90vw)}.portal{min-height:245px}.memory-observatory{width:860px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important}
  #oneiricStage *,#dreamSky,.intro-mark,.constel::before,.breath-stage::before,.breath-stage::after{animation:none!important;transition:none!important}
  #oneiricStage,#dreamSky,.os-oculus,.os-threadwork,.sc-vault{translate:none!important}
  .screen.open{animation:none}.scene-chrome{opacity:1;transition:none}.portal,.portal::before,.portal:hover{transition:none!important;transform:none!important}
  .oneiric-press{animation:none!important}
  .card-inner{transition-duration:.01ms!important}
  .wild-sky-objects i,.wild-foreground i,.wild-ground,.wild-thing,.uw-environment i,.uw-horizon,.uw-node{animation:none!important;transition-duration:.01ms!important}
}

@media(forced-colors:active){
  #oneiricStage,.scene-chrome,#atmosphere{display:none!important}
  .portal,.dream,.relic,.lang-cell,.q-opt,.nportal,.wild-map-node{border:1px solid CanvasText!important;background:Canvas!important;color:CanvasText!important}
}

/* ============================================================
   v7.0 POLISH PASS
   Small corrections to the Archive Reborn layout. Additive only —
   appended last so these win by source order.
   ============================================================ */

/* 1 · The central world was rendering off-screen on phones.
   The oversized rule centred it with `margin-left:50%; translate:-50%`,
   but styles.css's higher-specificity entrance animation
   (`#app.live .world-shell{translate:0 0}`) overrides the translate —
   leaving the margin-left alone and pushing the world half its own width
   to the right. Centre it with auto margins instead, which nothing
   clobbers, and keep it inside the viewport so the centrepiece is
   always fully visible. */
@media(max-width:680px){
  .world-shell{ width:min(94vw,520px); margin-left:auto; margin-right:auto; }
}
@media(max-width:390px){
  .world-shell{ width:94vw; margin-left:auto; margin-right:auto; }
}

/* 2 · The intro subtitle inherited max-width:34ch from styles.css, which
   broke "…while sleeping." onto its own line. Give it room and let the
   browser balance the line. */
#intro p{ max-width:46ch; text-wrap:balance; }

/* 3 · The atlas numeral ("I — VIII") is set vertically at ~9px; with the
   em dash it wrapped into a second column and read as noise. Keep it on
   one line and give it a little more presence. */
.atlas-num{ white-space:nowrap; font-size:.62rem; letter-spacing:.24em; }

/* 4 · The control rail is fixed and fully transparent, so hub text scrolled
   straight into the buttons on phones. Lay a soft veil beneath it (behind the
   chips, above the page) so content dissolves under the rail instead of
   colliding with it. Mobile only — on desktop the rail sits clear in a corner. */
@media(max-width:680px){
  .rail::before{
    content:""; position:fixed; left:0; right:0; top:0;
    height:calc(4.6rem + env(safe-area-inset-top));
    z-index:-1; pointer-events:none;
    background:linear-gradient(to bottom, rgba(6,7,20,.94), rgba(6,7,20,.72) 48%, rgba(6,7,20,0));
  }
}

/* 5 · The "Enter the dream" button's hover-sheen was escaping.
   styles.css clips that sweep with `overflow:hidden`, but the v7 restyle
   left .enter-btn as `overflow:visible`, so the sheen — parked 230px to the
   left, skewed -20deg, at full opacity — floated on the landing page as a
   stray glowing parallelogram. (.index-link, which uses the identical sheen,
   was still clipping correctly.) Clip it again so it only sweeps on hover;
   the button's outer glow is a box-shadow and is unaffected by this. */
.enter-btn{ overflow:hidden; }

/* ============================================================
   DREAMWILD CREATURES — detail hooks
   The field-guide art is rendered twice (a blurred echo + the inked,
   gradient-filled art). These classes let a creature carry eyes,
   highlights and soft shading in the art pass while staying out of the
   echo, so the ghost behind it remains a clean silhouette.
   ============================================================ */
.wild-art .eye{ fill:#0c262b; stroke:none; }
.wild-art .hi{ fill:rgba(255,255,255,.82); stroke:none; }
.wild-art .soft{ fill:rgba(255,255,255,.20); stroke:none; }
.wild-art .line{ fill:none; stroke:rgba(255,255,255,.42); stroke-width:1.1; stroke-linecap:round; }
.wild-echo .eye,.wild-echo .hi,.wild-echo .soft,.wild-echo .line{ display:none; }

/* ============================================================
   THE NIGHTMARE KEY TRIAL — polish
   The key was three flat CSS boxes at 55% opacity; it is the hero of the
   screen, so it is now a drawn key (gradient, ringed bow, filigree, and
   three teeth that echo the puzzle's three tumblers). The tumblers get
   real weight so they read as pins in a lock rather than small buttons.
   ============================================================ */
#screen-nightkey .key-silhouette{
  display:block; position:static; width:min(300px,78vw); height:auto; max-width:none;
  margin:.1rem auto 1.3rem; opacity:1; overflow:visible;
  filter:drop-shadow(0 0 20px rgba(203,95,142,.3));
  animation:nkKeyBreath 7.5s ease-in-out infinite;
}
#screen-nightkey .nk-solid{ fill:url(#nkKeyGrad); stroke:rgba(255,220,236,.4); stroke-width:1; stroke-linejoin:round; }
#screen-nightkey .nk-ring{ fill:none; stroke:url(#nkKeyGrad); stroke-width:9; }
#screen-nightkey .nk-ring-in{ fill:none; stroke:rgba(246,207,224,.42); stroke-width:1.6; }
#screen-nightkey .nk-flour{ fill:rgba(246,207,224,.72); }
@keyframes nkKeyBreath{ 0%,100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(-4px) rotate(-1.1deg); } }

#screen-nightkey .key-tumbler{
  width:78px; min-height:94px; position:relative; border-radius:13px 13px 7px 7px;
  background:linear-gradient(180deg,rgba(62,25,53,.94),rgba(19,9,26,.96));
  box-shadow:inset 0 1px 0 rgba(255,205,228,.14), inset 0 0 24px rgba(185,75,124,.1), 0 8px 18px rgba(2,0,6,.32);
}
#screen-nightkey .key-tumbler::before{ content:""; position:absolute; left:24%; right:24%; top:9px; height:1px;
  background:linear-gradient(90deg,transparent,rgba(246,207,224,.3),transparent); }
#screen-nightkey .key-tumbler span{ font-size:1.9rem; }
#screen-nightkey .key-tumbler small{ font-size:.55rem; letter-spacing:.14em; }
#screen-nightkey .key-tumbler:hover, #screen-nightkey .key-tumbler:focus-visible{
  transform:translateY(-3px); border-color:#e09cbd;
  box-shadow:inset 0 1px 0 rgba(255,205,228,.22), 0 0 24px rgba(214,142,174,.3), 0 11px 24px rgba(2,0,6,.36);
}
@media (prefers-reduced-motion:reduce){ #screen-nightkey .key-silhouette{ animation:none; } }

/* The closed memory left a ~100px dead band above the key (the whole panel was
   blurred to 18% and vanished). Keep its label legible so the space reads as
   "a memory, closed" rather than emptiness, and veil only the glyphs — a 7px
   blur on them is still completely unreadable, so the puzzle is unchanged. */
#screen-nightkey .key-memory.veiled{ filter:none !important; opacity:1 !important; }
#screen-nightkey .key-memory.veiled .km-glyphs{ filter:blur(7px); opacity:.34; }
#screen-nightkey .key-memory.veiled .km-label{ opacity:.6; }


/* ============================================================
   PERF — scroll/idle freeze fix
   The hub stacked three eras of animated, blurred ambience (the original
   fog + liquid, the constellation sky, and the v7 architectural stage) all
   compositing at once. On modest hardware that dropped to ~0fps and froze
   scrolling. Two fixes: (1) make gfx-medium actually cut the heaviest
   layers — it previously left the 3× blur(28px) fog and the constellation
   glow untouched — and (2) pause all decorative animation while scrolling
   so the compositor is free to move the page.
   ============================================================ */
/* (1) trim the biggest costs at gfx-medium (most machines land here) */
body.gfx-medium .fog.b, body.gfx-medium .fog.c{ display:none; }        /* 3 large blurs → 1 */
body.gfx-medium .fog.a{ filter:blur(15px); }
body.gfx-medium #dreamSky{ filter:none; }                              /* drop the animated constellation glow */
body.gfx-medium #skyfar{ opacity:.42; }
body.gfx-medium .title{ animation:none; }
body.gfx-low #dreamSky{ filter:none; }
/* the constellation glow (drop-shadow on a full-screen animated field) is the
   single most expensive filter — keep it only on gfx-high hardware. */

/* (2) pause decorative animation during active scroll (all tiers) */
body.is-scrolling #atmosphere .liquid,
body.is-scrolling #atmosphere .fog,
body.is-scrolling #atmosphere .aurora,
body.is-scrolling #dreamSky,
body.is-scrolling .sky-drift,
body.is-scrolling #skyfar,
body.is-scrolling #oneiricStage *,
body.is-scrolling .title{ animation-play-state:paused !important; }

/* ============================================================
   FIX (v7.2) — ending overlays must scroll
   #wakingEnd / #subEnd / #escapeEnd are fixed, flex-centred overlays with
   overflow:visible. Their stacked content (huge title, profile card, the
   mounted dream-wall, and 3 exit buttons) is taller than a phone screen, so
   the exit buttons — "Return to the world" and "Read The Sleeping Index" —
   fell below an unscrollable fold and trapped the player at the ending.
   'safe center' keeps the ending centred when it fits and switches to
   top-aligned + scrollable when it doesn't (flex-start is the fallback for
   any engine without 'safe').
   ============================================================ */
#wakingEnd, #subEnd{
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  justify-content:flex-start;
  justify-content:safe center;
  padding-top:max(2.5rem, env(safe-area-inset-top));
  padding-bottom:max(2.5rem, env(safe-area-inset-bottom));
}
/* #escapeEnd's scrolling content lives in the absolutely-positioned phases
   (which had overflow:hidden) — make the phase itself the scroller. */
.escape-end-phase{
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  justify-content:flex-start;
  justify-content:safe center;
  padding-top:max(2.5rem, env(safe-area-inset-top));
  padding-bottom:max(2.5rem, env(safe-area-inset-bottom));
}

/* ============================================================
   v8.0 THE DREAMWILD REMEMBERS — living-world states
   Feral Memories (neglect), visitors (migration), away-markers,
   the district-changed cue, and Field-Guide bond/feral display.
   The feral colour itself comes from a swapped SVG gradient in
   svg(kind,feral), so it survives even at gfx-low where filters
   are stripped; the rules below are enhancement on top.
   ============================================================ */
/* --- a Feral Memory: thin, over-bright, wrong at the edges --- */
.wild-thing.feral .wild-art{ filter:saturate(.32) brightness(1.2) contrast(1.12) drop-shadow(0 0 7px rgba(196,150,224,.55)); }
.wild-thing.feral .wild-echo{ stroke:rgba(200,150,230,.5); opacity:.42; }
.wild-thing.feral{ animation:feralJitter 3.4s steps(7) infinite; }
.wild-thing.feral.discovered::after{ content:"✷"; color:#e6c8f2; text-shadow:0 0 9px #c79be8; }
@keyframes feralJitter{ 0%,100%{transform:translate(0,0)} 18%{transform:translate(.7px,-.5px)} 36%{transform:translate(-.6px,.4px)} 54%{transform:translate(.5px,.6px)} 72%{transform:translate(-.5px,-.4px)} 90%{transform:translate(.3px,.3px)} }

/* --- a visitor from another district passing through --- */
.wild-thing.visiting .wild-art{ filter:drop-shadow(0 0 9px rgba(180,208,255,.6)); }
.wild-thing.visiting::before{ content:"↝"; position:absolute; left:5%; top:3%; z-index:6; color:#c3d5ff; font-size:.82rem; text-shadow:0 0 8px #c3d5ff; }
.wt-tag{ font-style:italic; opacity:.82; font-size:.82em; letter-spacing:.04em; }

/* --- where a creature usually stands, now wandered off --- */
.wild-away{ position:absolute; translate:-50% -50%; z-index:2; width:clamp(70px,10vw,120px); aspect-ratio:1; display:grid; place-items:center; pointer-events:none;
  border-radius:50%; border:1px dashed rgba(210,235,225,.26); background:radial-gradient(circle,rgba(210,235,225,.05),transparent 70%); }
.wild-away span{ font-size:.58rem; color:rgba(203,229,221,.62); font-style:italic; text-align:center; line-height:1.25; padding:.2rem; }

/* --- the "district has changed" cue in the whisper line --- */
.wild-changed{ color:#c8a7e2; font-style:normal; font-weight:500; }

/* --- Field Guide (Sleeping Index) — bond dots + feral entries --- */
.wild-bond{ display:block; margin-top:.15rem; font-size:.62rem; letter-spacing:.18em; color:#6fa89c; }
.wild-entry.feral{ border-color:rgba(200,150,230,.34); background:rgba(38,24,50,.34); }
.wild-entry.feral>span{ color:#dcb6f0; border-color:rgba(220,182,240,.42); }
.wild-entry.feral .wild-bond{ color:#b48fce; }
.we-feral{ font-style:normal; font-size:.56rem; color:#e0bef4; letter-spacing:.09em; text-transform:uppercase; margin-left:.35rem; }

@media (prefers-reduced-motion:reduce){ .wild-thing.feral{ animation:none!important; } }

/* ============================================================
   v8.1 DREAM SEEDS & THE GARDEN
   ============================================================ */
/* the gate from the Dreamwild into the Garden */
.wild-garden-gate{ display:flex; align-items:center; gap:.55rem; margin:.2rem auto 1rem; padding:.5rem 1.1rem;
  border-radius:4px 15px 4px 15px; border:1px solid rgba(180,206,150,.4); cursor:pointer;
  background:linear-gradient(120deg,rgba(30,44,28,.8),rgba(18,32,30,.72)); color:#dcecc6;
  font-family:var(--serif-body,serif); letter-spacing:.03em; transition:box-shadow .25s,transform .25s; }
.wild-garden-gate:hover,.wild-garden-gate:focus-visible{ box-shadow:0 0 22px rgba(150,200,140,.3); transform:translateY(-2px); }
.wild-garden-gate .wgg-g{ color:#bfe0a8; font-size:1.1rem; text-shadow:0 0 10px rgba(150,210,130,.5); }
.wild-garden-gate b{ font-weight:500; }
.wild-garden-gate small{ color:#8fb394; font-size:.72rem; margin-left:.15rem; }

/* the Garden screen */
#screen-garden{ background:radial-gradient(84% 74% at 50% 16%,#26361f 0,#141f18 56%,#080f0b 100%); }
#screen-garden::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(circle at 20% 22%,rgba(196,230,160,.14) 0 1.4%,transparent 1.8%),radial-gradient(circle at 80% 30%,rgba(220,240,190,.1) 0 1%,transparent 1.4%),radial-gradient(circle at 62% 78%,rgba(150,210,150,.08) 0 1.2%,transparent 1.6%); }
#screen-garden>.scroll{ position:absolute; z-index:1; }
.garden-tray{ width:min(1000px,94vw); margin:0 auto 1.6rem; }
.garden-h{ font:500 .82rem var(--serif-display,serif); letter-spacing:.16em; text-transform:uppercase; color:rgba(198,224,176,.72);
  margin:0 0 .7rem; padding-bottom:.4rem; border-bottom:1px solid rgba(180,210,150,.16); }
.garden-seeds{ display:flex; flex-wrap:wrap; gap:.7rem; }
.garden-seed{ display:flex; align-items:center; gap:.6rem; padding:.5rem .7rem; border-radius:12px;
  border:1px solid rgba(180,210,150,.22); background:rgba(24,38,26,.5); }
.garden-seed .gs-g{ font-size:1.4rem; color:#cfe9ac; text-shadow:0 0 10px rgba(160,215,140,.4); }
.garden-seed .gs-t b{ display:block; color:#e7f2d9; font:500 .92rem var(--serif-display,serif); }
.garden-seed .gs-t small{ color:#8fb394; font-size:.66rem; }
.gs-plant,.gp-tend{ margin-left:.4rem; padding:.3rem .8rem; border-radius:999px; cursor:pointer;
  border:1px solid rgba(190,220,160,.45); background:rgba(40,60,36,.6); color:#dcecc6; font-family:var(--serif-body,serif); font-size:.8rem; transition:background .2s; }
.gs-plant:hover,.gp-tend:hover{ background:rgba(70,100,58,.7); }
.garden-plot{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:1rem; }
.garden-plant-card{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:.5rem; padding:1rem .9rem 1.1rem;
  border-radius:6px 16px 6px 16px; border:1px solid rgba(170,205,150,.2); background:linear-gradient(160deg,rgba(30,46,30,.6),rgba(14,24,18,.72)); }
.garden-plant-card.grown{ border-color:rgba(228,214,150,.4); box-shadow:inset 0 0 40px rgba(220,230,150,.06),0 14px 34px rgba(2,10,6,.4); }
.gp-art{ width:clamp(96px,26vw,140px); aspect-ratio:1; }
.gp-svg{ width:100%; height:100%; overflow:visible; filter:drop-shadow(0 8px 10px rgba(2,12,8,.4)); }
.garden-plant-card.grown .gp-svg{ animation:gardenBloomBreath 7s ease-in-out infinite alternate; }
.gp-svg path,.gp-svg circle,.gp-svg ellipse{ stroke-linejoin:round; stroke-linecap:round; }
.gp-meta b{ display:block; color:#eef4e2; font:500 1.02rem var(--serif-display,serif); }
.garden-plant-card.grown .gp-meta b{ color:#f0e6b6; }
.gp-meta small{ display:block; color:#93b598; font-size:.72rem; line-height:1.5; margin-top:.2rem; }
.gp-grow{ width:80%; height:4px; margin:.55rem auto .2rem; border-radius:999px; background:rgba(150,180,140,.18); overflow:hidden; }
.gp-grow i{ display:block; height:100%; width:var(--gp,0%); border-radius:inherit; background:linear-gradient(90deg,#8fbf6a,#d6e4a0); transition:width .5s var(--ease-cinema,ease); }
.gp-done{ color:#d8c98a; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; }
.gp-wait{ color:#7fa07f; font-size:.68rem; font-style:italic; }
.garden-empty{ color:rgba(160,190,160,.7); font-style:italic; text-align:center; padding:1.2rem; }
.garden-whisper{ width:min(90vw,680px); margin:1.4rem auto 3rem; text-align:center; color:#84a888; font-style:italic; line-height:1.5; }
@keyframes gardenBloomBreath{ from{ transform:translateY(0) scale(1); } to{ transform:translateY(-3px) scale(1.03); } }
@media (prefers-reduced-motion:reduce){ .garden-plant-card.grown .gp-svg{ animation:none; } }
body.gfx-low .garden-plant-card.grown .gp-svg{ animation:none; }

/* ============================================================
   v8.2 THE COMPANION — the follower, The Reckoning, its endings
   ============================================================ */
/* the figure that trails you across the Dreamwild */
.wild-companion{ position:absolute; translate:-50% -50%; width:clamp(58px,9vw,94px); aspect-ratio:1; z-index:4; padding:0; border:0; background:none; opacity:.8; animation:cmpFade 6s ease-in-out infinite; }
.wild-companion .cmp-svg{ width:100%; height:100%; overflow:visible; filter:drop-shadow(0 8px 12px rgba(10,6,24,.55)); }
.wild-companion>span{ position:absolute; left:50%; top:100%; translate:-50% .2rem; width:max-content; max-width:160px; font-size:.66rem; font-style:italic; color:rgba(203,188,232,.8); opacity:0; transition:opacity .3s; text-align:center; }
.wild-companion:hover>span,.wild-companion.ready>span{ opacity:1; }
.wild-companion.ready{ cursor:pointer; opacity:1; z-index:6; animation:cmpPulse 3s ease-in-out infinite; }
@keyframes cmpFade{ 0%,100%{ opacity:.68; } 50%{ opacity:.94; } }
@keyframes cmpPulse{ 0%,100%{ opacity:.9; filter:drop-shadow(0 0 6px rgba(150,120,220,.4)); } 50%{ opacity:1; filter:drop-shadow(0 0 16px rgba(184,150,240,.7)); } }

/* the overlay: The Reckoning, and the resolved ending */
#companionEnd{ position:fixed; inset:0; z-index:78; display:none; flex-direction:column; align-items:center; text-align:center; gap:1.1rem;
  padding:max(2.5rem,env(safe-area-inset-top)) 1.4rem max(2.5rem,env(safe-area-inset-bottom));
  background:radial-gradient(92% 86% at 50% 40%,rgba(30,24,52,.985),rgba(4,3,12,.995));
  overflow-y:auto; -webkit-overflow-scrolling:touch; }
#companionEnd.show{ display:flex; justify-content:flex-start; justify-content:safe center; animation:endIn 2s ease; }
#companionEnd h2{ font-family:var(--serif-display,serif); font-weight:500; font-size:clamp(2.2rem,7vw,4rem); margin:0; letter-spacing:.02em; color:#efe7f6; }
#companionEnd p{ max-width:52ch; color:rgba(226,218,236,.86); font-style:italic; font-size:1.08rem; line-height:1.66; margin:0; }
.cmp-figure{ width:clamp(116px,28vw,172px); aspect-ratio:1; }
.cmp-figure .cmp-svg{ width:100%; height:100%; overflow:visible; filter:drop-shadow(0 12px 26px rgba(44,22,74,.6)); }
.cmp-figure.resolved-figure{ opacity:.9; animation:cmpBreath 7s ease-in-out infinite alternate; }
@keyframes cmpBreath{ from{ transform:translateY(0); } to{ transform:translateY(-5px); } }
.cmp-grand{ font-family:var(--serif-display,serif); letter-spacing:.22em; text-transform:uppercase; font-size:.82rem; color:#b49fd8; }
.cmp-composition{ display:flex; flex-wrap:wrap; gap:.45rem; justify-content:center; max-width:60ch; margin:.1rem auto; }
.cmp-part{ display:inline-flex; align-items:center; gap:.4rem; padding:.28rem .7rem; border-radius:999px; border:1px solid rgba(150,130,200,.3); background:rgba(30,24,50,.5); color:#cabce8; font-size:.8rem; font-style:italic; }
.cmp-part i{ font-style:normal; color:#b49fd8; }
.cmp-namewrap{ color:rgba(200,188,232,.7); font-size:.8rem; letter-spacing:.04em; margin-top:.3rem; }
#cmpName{ width:min(320px,82vw); padding:.5rem .8rem; border-radius:8px; border:1px solid rgba(150,130,200,.4); background:rgba(15,12,30,.7); color:#efe7f6; font-family:var(--serif-body,serif); text-align:center; letter-spacing:.02em; }
#cmpName:focus{ outline:none; border-color:rgba(184,150,240,.7); box-shadow:0 0 14px rgba(150,120,220,.3); }
.cmp-choices{ flex-direction:column; gap:.55rem; width:min(480px,92vw); margin-top:.4rem; }
.cmp-choices button{ width:100%; }
.cmp-choices em{ font-style:normal; color:#b49fd8; font-size:.85em; opacity:.85; }

/* Open Gate: a Dreamwild creature drifts into the main Archive (hub only —
   z-index sits below the opaque .screen overlays, so screens occlude it) */
#gateWanderer{ position:fixed; right:5%; bottom:14%; width:66px; height:66px; z-index:2; opacity:.5; pointer-events:none; animation:gateDrift 18s ease-in-out infinite; }
#gateWanderer svg{ width:100%; height:100%; overflow:visible; filter:drop-shadow(0 0 12px rgba(184,150,240,.45)); }
@keyframes gateDrift{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(-20px,-24px); } }
body:not(.wild-gate) #gateWanderer{ display:none; }

/* a companion another dreamer released, arrived through the gate — warmer,
   haloed, and clickable to be met once */
.wild-companion.from-elsewhere{ cursor:pointer; opacity:1; z-index:6; animation:cmpCrossed 3.4s ease-in-out infinite; }
.wild-companion.from-elsewhere .cmp-svg{ filter:drop-shadow(0 0 10px rgba(230,200,150,.55)) drop-shadow(0 8px 12px rgba(10,6,24,.5)); }
.wild-companion.from-elsewhere>span{ opacity:.9; color:rgba(236,216,170,.9); }
@keyframes cmpCrossed{ 0%,100%{ opacity:.85; filter:drop-shadow(0 0 6px rgba(230,200,150,.4)); } 50%{ opacity:1; filter:drop-shadow(0 0 15px rgba(236,216,170,.7)); } }

@media (prefers-reduced-motion:reduce){ .wild-companion,.wild-companion.ready,.wild-companion.from-elsewhere,.cmp-figure.resolved-figure,#gateWanderer{ animation:none; } }
body.gfx-low .wild-companion,body.gfx-low #gateWanderer{ animation:none; }

/* ============================================================
   v8.3 THE MEADOW BEHIND MORNING — a time-gated fifth district
   ============================================================ */
/* the gate on the Dreamwild screen (reuses .wild-garden-gate) */
.wild-meadow-gate{ border-color:rgba(238,196,143,.42); background:linear-gradient(120deg,rgba(48,38,30,.8),rgba(34,26,24,.72)); color:#f4e2ce; }
.wild-meadow-gate .wgg-g{ color:#f2cf9a; text-shadow:0 0 10px rgba(238,196,143,.5); }
.wild-meadow-gate small{ color:#c9a887; }
.wild-meadow-gate.open-now{ border-color:rgba(246,214,150,.85); box-shadow:0 0 22px rgba(238,196,143,.4); animation:meadowBeckon 3s ease-in-out infinite; }
@keyframes meadowBeckon{ 0%,100%{ box-shadow:0 0 16px rgba(238,196,143,.3); } 50%{ box-shadow:0 0 26px rgba(246,214,150,.6); } }

/* the Meadow screen — a pale dawn that is already thinning */
#screen-meadow{ background:radial-gradient(90% 80% at 50% 22%,#4a3f42 0,#2e2630 46%,#141018 100%); }
#screen-meadow::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 12%,rgba(255,238,214,.16),transparent 46%),radial-gradient(circle at 24% 30%,rgba(255,244,224,.12) 0 1.2%,transparent 1.6%),radial-gradient(circle at 74% 26%,rgba(255,232,210,.1) 0 1%,transparent 1.4%); }
#screen-meadow>.scroll{ position:absolute; z-index:1; }
#screen-meadow .screen-title{ color:#f4e6d4; }
#screen-meadow .screen-sub{ color:rgba(228,206,188,.78); }
.meadow-time{ width:min(680px,92vw); margin:.2rem auto 1rem; text-align:center; font-size:.86rem; display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.meadow-time .mdw-open{ color:#f2cf9a; }
.meadow-time .mdw-closed{ color:#b58f8f; font-style:italic; }
.meadow-time .mdw-kept{ color:#c9a887; letter-spacing:.08em; }
.meadow-stage{ position:relative; width:min(96vw,980px); height:min(58vh,560px); min-height:400px; margin:0 auto; border-radius:46% 46% 12% 12%/12% 12% 6% 6%; overflow:hidden; isolation:isolate;
  background:linear-gradient(180deg,rgba(255,240,220,.14) 0,rgba(120,96,104,.16) 46%,rgba(24,18,26,.5) 100%); box-shadow:inset 0 -60px 100px rgba(20,14,22,.5),inset 0 1px rgba(255,246,232,.3); }
.meadow-stage::before{ content:""; position:absolute; left:0; right:0; bottom:0; height:34%; background:linear-gradient(180deg,transparent,rgba(180,150,130,.16)); }
.mdw-thing{ position:absolute; translate:-50% -50%; width:clamp(72px,11vw,120px); aspect-ratio:1; padding:0; border:0; background:none; cursor:pointer; z-index:2;
  filter:drop-shadow(0 8px 12px rgba(30,20,26,.35)); opacity:.62; transition:opacity .4s,transform .35s var(--ease-cinema,ease); animation:mdwWaver 7s ease-in-out infinite; }
.mdw-thing .mdw-svg{ width:100%; height:100%; overflow:visible; }
.mdw-thing:hover,.mdw-thing:focus-visible{ opacity:1; transform:translate(-50%,-56%) scale(1.06); z-index:5; }
.mdw-thing.kept{ opacity:1; }
.mdw-thing.kept::after{ content:"❁"; position:absolute; right:6%; top:2%; color:#f2cf9a; font-size:.8rem; text-shadow:0 0 8px #f2cf9a; }
.mdw-thing>span{ position:absolute; left:50%; top:98%; translate:-50% 0; width:max-content; max-width:150px; font-size:.68rem; font-style:italic; color:rgba(240,222,204,.85); opacity:0; transition:opacity .3s; text-align:center; }
.mdw-thing:hover>span,.mdw-thing:focus-visible>span,.mdw-thing.kept>span{ opacity:1; }
@keyframes mdwWaver{ 0%,100%{ opacity:.55; } 50%{ opacity:.78; } }
.meadow-whisper{ width:min(90vw,700px); min-height:70px; margin:1.2rem auto 3rem; text-align:center; color:#c7a493; font-style:italic; line-height:1.55; }
.meadow-whisper b{ display:block; color:#f2ddc7; font:500 1.12rem var(--serif-display,serif); font-style:normal; margin-bottom:.3rem; }
@media (prefers-reduced-motion:reduce){ .wild-meadow-gate.open-now,.mdw-thing{ animation:none; } }
body.gfx-low .mdw-thing{ animation:none; opacity:.8; }
@media (max-width:680px){ .meadow-stage{ width:100vw; margin-left:calc(50% - 50vw); border-radius:0; min-height:380px; } }