/* =====================================================================
   DREAMWORLDARCHIVE v9.1 — THE QUIET GEOMETRY
   ---------------------------------------------------------------------
   A late, additive visual layer. The gameplay and persistence systems
   remain in app.js; this file gives the Archive a deeper physical stage,
   destination-specific memory dioramas, and authored environmental rules.

   Performance contract:
   - no additional requestAnimationFrame loop
   - ambient movement uses opacity / compositor transforms only
   - expensive bloom is Full Dream only
   - below-fold chapters use content-visibility
   - all motion has reduced-motion and Quiet Dream fallbacks
   ===================================================================== */

:root{
  --v9-void:#03050d;
  --v9-night:#070a18;
  --v9-indigo:#11162d;
  --v9-ink:#f4efe6;
  --v9-paper:#d7d0c4;
  --v9-moon:#f1dda9;
  --v9-thread:#bdb4dc;
  --v9-cyan:#a6d6dc;
  --v9-warm:#d8a886;
  --v9-nightmare:#c08cae;
  --v9-edge:rgba(231,224,238,.17);
  --v9-edge-quiet:rgba(231,224,238,.085);
  --v9-shadow:0 28px 90px rgba(0,0,8,.46);
  --v9-shadow-near:0 18px 46px rgba(0,0,8,.34);
  --v9-ease:cubic-bezier(.18,.74,.18,1);
  --v9-ease-soft:cubic-bezier(.22,.61,.36,1);
  --v9-fast:180ms;
  --v9-mid:520ms;
  --v9-slow:1100ms;
  --v9-rail-height:58px;
  --v9-safe-inline:max(1rem,env(safe-area-inset-left));
}

/* ---------- global stage, accessibility, and control surfaces ---------- */

html{ background:var(--v9-void); }
body{ background-color:var(--v9-void); }

.dream-skip{
  position:fixed;left:1rem;top:1rem;z-index:250;
  translate:0 -160%;padding:.65rem 1rem;
  border:1px solid var(--v9-moon);border-radius:3px 13px 3px 13px;
  background:#080b19;color:var(--v9-ink);font:.78rem var(--serif-body,serif);
  letter-spacing:.08em;text-decoration:none;
  transition:translate var(--v9-fast) ease;
}
.dream-skip:focus{translate:0 0;}

::selection{background:rgba(224,204,151,.28);color:#fff9ea;}

button,[role="button"],a{
  -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:1px solid #fff1c4!important;
  outline-offset:4px!important;
  box-shadow:0 0 0 4px rgba(239,219,169,.12),0 0 24px rgba(239,219,169,.2)!important;
}

#grain{opacity:.075;mix-blend-mode:soft-light;}
#vignette{
  background:
    radial-gradient(125% 112% at 50% 44%,transparent 52%,rgba(2,3,11,.52) 100%),
    linear-gradient(90deg,rgba(1,2,8,.18),transparent 12% 88%,rgba(1,2,8,.18));
}
#oneiricStage{opacity:.82;}
.os-vault{
  border-color:rgba(229,221,239,.14);
  box-shadow:inset 0 -70px 100px rgba(99,82,144,.025);
}
.os-floor{
  background:
    radial-gradient(ellipse at 50% 0,rgba(218,205,233,.075),transparent 62%),
    repeating-radial-gradient(ellipse at 50% 0,transparent 0 56px,rgba(217,209,233,.028) 57px 58px,transparent 59px 104px);
}
.os-curtain{opacity:.62;}

.rail{
  gap:.38rem;
  padding:.42rem;
  border:1px solid rgba(226,218,237,.11);
  border-radius:4px 16px 4px 16px;
  background:linear-gradient(145deg,rgba(7,9,22,.86),rgba(19,18,42,.56));
  box-shadow:0 15px 42px rgba(0,0,9,.26);
  max-width:calc(100vw - 1rem);
}
.rail .chip{
  width:40px;height:40px;border:0;border-radius:50% 45% 50% 44%;
  background:radial-gradient(circle at 40% 30%,rgba(224,215,239,.12),rgba(8,10,25,.68) 66%);
  color:rgba(229,222,239,.74);
}
.rail .chip:hover,.rail .chip:focus-visible{
  color:#fff0c5;background:radial-gradient(circle at 38% 30%,rgba(244,226,177,.2),rgba(18,17,39,.8) 68%);
  transform:translateY(-2px) rotate(-2deg);
}

#versionTag{
  border:0!important;border-radius:0!important;background:none!important;
  color:rgba(220,211,232,.53)!important;
  font-size:.6rem!important;letter-spacing:.2em!important;
}
#versionTag::before{content:"ARCHIVE ";opacity:.5;}
#versionTag.vnew{color:#f0dca9!important;text-shadow:0 0 14px rgba(240,220,169,.32);}

/* ---------- the first descent ---------- */

#intro{
  isolation:isolate;
  background:
    radial-gradient(65% 55% at 50% 40%,rgba(44,40,82,.18),transparent 72%),
    linear-gradient(180deg,#03050d,#080a18 58%,#03050c);
}
#intro::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(1,2,8,.68),transparent 24% 76%,rgba(1,2,8,.68)),
    radial-gradient(circle at 16% 18%,rgba(244,232,200,.8) 0 1px,transparent 2px),
    radial-gradient(circle at 77% 24%,rgba(206,198,231,.55) 0 1px,transparent 2px),
    radial-gradient(circle at 86% 59%,rgba(244,232,200,.48) 0 1px,transparent 2px);
}
.intro-architecture{opacity:.28;}
.intro-dreamscape{
  position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  opacity:.78;
}
.intro-dreamscape svg{
  width:100%;height:100%;overflow:visible;
  translate:calc(var(--px,0)*10px) calc(var(--py,0)*7px);
  transition:translate .7s var(--v9-ease-soft);
}
.id-hill{fill:rgba(7,10,23,.86);stroke:rgba(217,208,230,.08);stroke-width:1;}
.id-archive{fill:rgba(3,5,14,.8);stroke:rgba(224,216,234,.16);stroke-width:1;}
.id-stair{fill:none;stroke:rgba(235,221,181,.15);stroke-width:1;}
.id-moon{transform-origin:258px 206px;animation:v9MoonBreath 12s ease-in-out infinite;}
.id-moon-cut{fill:#060816;}
.id-halo{fill:none;stroke:rgba(238,220,171,.21);stroke-width:1;}
.id-water path{fill:none;stroke:rgba(204,198,228,.16);stroke-width:1;}
.id-threads path{fill:none;stroke:rgba(207,197,232,.14);stroke-width:1;stroke-dasharray:2 7;}
.id-threads circle{fill:#f1dda9;filter:drop-shadow(0 0 4px rgba(241,221,169,.6));}
@keyframes v9MoonBreath{50%{opacity:.88;transform:translateY(4px) scale(1.015)}}

.intro-content{
  width:min(660px,92vw);
  padding:clamp(2.2rem,6vw,4.6rem) clamp(1.2rem,5vw,4rem);
  border-left:1px solid rgba(231,221,236,.12);
  border-right:1px solid rgba(231,221,236,.07);
  background:
    linear-gradient(180deg,transparent,rgba(16,17,38,.14) 35%,rgba(7,9,22,.3) 100%);
}
.intro-kicker{color:rgba(218,210,228,.53);}
.intro-kicker::before,.intro-kicker::after{background:linear-gradient(90deg,transparent,rgba(234,219,181,.32));}
.intro-mark{
  width:104px;height:104px;margin-bottom:1rem;border:1px solid rgba(238,220,174,.18);
  box-shadow:inset 0 0 36px rgba(238,220,174,.04);
}
.intro-mark::before{
  box-shadow:0 0 0 18px rgba(240,219,163,.025),0 0 70px rgba(240,219,163,.12);
}
#intro h1{
  max-width:10ch;
  font-size:clamp(4rem,10vw,8.2rem);
  line-height:.76;
  letter-spacing:-.055em;
  color:#f4efe8;
  text-shadow:0 18px 44px rgba(0,0,8,.46);
}
#intro h1::first-line{color:#fff7ed;}
#intro p{
  font-size:clamp(1.04rem,2vw,1.3rem);
  color:rgba(226,218,225,.76);
}
.enter-btn{
  min-width:min(360px,88vw);min-height:60px;
  border-radius:3px 17px 3px 17px!important;
  border-color:rgba(239,220,168,.46)!important;
  background:
    linear-gradient(110deg,rgba(9,11,27,.88),rgba(34,30,59,.78),rgba(9,11,27,.88))!important;
  box-shadow:inset 0 1px rgba(255,247,220,.08),0 18px 48px rgba(0,0,9,.38),0 0 32px rgba(235,215,160,.08)!important;
}
.enter-btn::before{
  content:"";position:absolute;left:11%;right:11%;bottom:8px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(244,226,175,.55),transparent);
}
.enter-btn:hover{transform:translateY(-3px) scale(1.012)!important;}

/* ---------- hub: a dream atlas with a real horizon ---------- */

#hub{
  position:relative;isolation:isolate;
  padding-bottom:clamp(5rem,10vh,9rem);
}
.hub-dreamscape{
  position:absolute;left:50%;top:0;width:min(1440px,100vw);height:900px;
  translate:-50% 0;z-index:-1;overflow:hidden;pointer-events:none;
  mask-image:linear-gradient(#000 0 68%,transparent 100%);
}
.hd-moon{
  position:absolute;left:50%;top:88px;width:330px;height:330px;translate:-50% 0;
  border:1px solid rgba(238,220,174,.15);border-radius:50%;
  background:
    radial-gradient(circle at 43% 38%,rgba(242,225,177,.12),rgba(126,111,155,.035) 55%,transparent 72%);
  box-shadow:0 0 0 60px rgba(220,208,236,.012),0 0 0 126px rgba(220,208,236,.008);
}
.hd-moon::after{
  content:"";position:absolute;inset:19%;border:1px solid rgba(234,219,181,.12);border-radius:50%;
}
.hd-archive{
  position:absolute;left:50%;top:397px;width:74px;height:188px;translate:-50% 0;
  border:1px solid rgba(222,215,232,.1);border-bottom:0;
  background:linear-gradient(90deg,rgba(7,9,22,.75),rgba(20,20,43,.44),rgba(7,9,22,.75));
  clip-path:polygon(25% 100%,25% 34%,39% 34%,39% 14%,50% 0,61% 14%,61% 34%,75% 34%,75% 100%);
  opacity:.72;
}
.hd-island{
  position:absolute;border-top:1px solid rgba(219,211,229,.075);border-radius:50%;
  background:radial-gradient(ellipse at 50% 0,rgba(104,91,146,.06),transparent 63%);
}
.hd-a{left:4%;top:525px;width:44%;height:190px;rotate:4deg;}
.hd-b{right:0;top:500px;width:41%;height:230px;rotate:-6deg;}
.hd-thread{
  position:absolute;height:1px;transform-origin:left;
  background:linear-gradient(90deg,transparent,rgba(214,204,232,.12),transparent);
}
.hd-t1{left:8%;top:325px;width:48%;rotate:13deg;}
.hd-t2{right:5%;top:350px;width:46%;rotate:-12deg;}

.hub-prologue{
  min-height:clamp(450px,67vh,650px);
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(4.5rem,11vh,8rem) 1rem clamp(2rem,5vh,4rem);
}
.hub-prologue::after{
  content:"";width:min(610px,80vw);height:1px;margin:2.2rem auto 0;
  background:linear-gradient(90deg,transparent,rgba(234,219,179,.28),transparent);
}
.hub-kicker{letter-spacing:.34em;color:rgba(215,207,226,.54);}
.title{
  max-width:10ch;margin-inline:auto;
  font-size:clamp(4.2rem,10vw,8.4rem);
  line-height:.72;letter-spacing:-.065em;
  color:#f5f0e9;
  text-shadow:0 18px 50px rgba(0,0,8,.42);
}
.subtitle{color:rgba(220,211,220,.73);font-size:clamp(1rem,2vw,1.26rem);}
.status{
  width:min(100%,960px);align-self:center;
  margin-top:1.7rem;
  border-top:1px solid rgba(222,214,232,.11);
  border-bottom:1px solid rgba(222,214,232,.08);
  background:linear-gradient(90deg,transparent,rgba(12,14,31,.58) 13% 87%,transparent);
}

.memory-observatory{
  width:min(860px,96vw);min-height:690px;margin:-1rem auto 0;
  padding-top:4rem;
}
.memory-observatory::before{
  inset:0;border-radius:48% 48% 5px 5px/12% 12% 5px 5px;
  border-color:rgba(224,216,235,.13);
  background:
    radial-gradient(circle at 50% 45%,rgba(130,110,179,.1),transparent 43%),
    repeating-radial-gradient(circle at 50% 46%,transparent 0 98px,rgba(216,207,231,.04) 99px 100px);
  box-shadow:inset 0 -120px 140px rgba(2,4,13,.44),var(--v9-shadow);
}
.memory-observatory::after{
  content:"";position:absolute;left:50%;bottom:5.5%;width:76%;height:18%;translate:-50% 0;
  border-top:1px solid rgba(223,214,231,.11);border-radius:50%;
  background:radial-gradient(ellipse at 50% 0,rgba(236,216,162,.055),transparent 68%);
}
.observatory-cap{opacity:.75;}
.observatory-label small{color:rgba(230,216,180,.55);letter-spacing:.28em;}
.observatory-label strong{color:rgba(242,236,231,.93);}
.world-shell{z-index:2;filter:drop-shadow(0 35px 46px rgba(0,0,9,.35));}
#worldBtn svg{overflow:visible;}
#worldBtn .cloud-frag{
  filter:drop-shadow(0 8px 9px rgba(0,0,8,.35));
}
body[data-fragments="0"] .memory-observatory{filter:saturate(.8);}
body[data-fragments="8"] .memory-observatory::before{
  border-color:rgba(240,221,169,.3);
  box-shadow:inset 0 -120px 140px rgba(2,4,13,.35),0 0 90px rgba(233,211,154,.1),var(--v9-shadow);
}
body[data-fragments="8"] .observatory-label strong{text-shadow:0 0 28px rgba(239,219,168,.26);}

.fragment-atlas{
  width:min(1220px,94vw);margin:clamp(4rem,9vh,8rem) auto 0;
  padding-top:2rem;
}
.fragment-atlas::before{
  content:"";position:absolute;left:50%;top:-2.5rem;width:1px;height:3rem;
  background:linear-gradient(transparent,rgba(239,219,168,.5));
}
.atlas-heading{
  grid-template-columns:90px 1fr 90px;
  padding:0 clamp(.2rem,2vw,1.5rem) 1.4rem;
}
.atlas-heading h2{font-size:clamp(2rem,4vw,3.2rem);letter-spacing:-.025em;color:#f0ebe7;}
.atlas-heading p{font-size:1rem;color:rgba(204,195,214,.72);}
.atlas-num,.atlas-mark{color:rgba(234,216,170,.52);}

/* ---------- destination cards become miniature worlds ---------- */

.portals{
  gap:clamp(.75rem,1.7vw,1.25rem);
}
.portal{
  --pd-rgb:184,167,222;
  min-height:310px;padding:0 1.2rem 1.25rem!important;
  border-radius:4px 22px 5px 16px!important;
  border:1px solid rgba(var(--pd-rgb),.22)!important;
  overflow:hidden;isolation:isolate;
  background:
    linear-gradient(180deg,rgba(var(--pd-rgb),.055),transparent 46%),
    linear-gradient(155deg,rgba(22,22,48,.94),rgba(6,8,20,.97))!important;
  box-shadow:inset 0 1px rgba(255,255,255,.045),0 22px 55px rgba(0,0,8,.29)!important;
  transform:none!important;
  text-align:left;
  transition:border-color var(--v9-mid) ease,box-shadow var(--v9-mid) ease,translate var(--v9-mid) var(--v9-ease)!important;
}
.portal::before{
  inset:0!important;opacity:1!important;
  background:
    linear-gradient(145deg,transparent 43%,rgba(var(--pd-rgb),.075) 44%,transparent 45%)!important;
  transform:none!important;transition:opacity var(--v9-mid)!important;
}
.portal::after{
  left:1.1rem!important;right:auto!important;top:1.1rem!important;bottom:1.1rem!important;width:1px!important;height:auto!important;
  background:linear-gradient(transparent,rgba(var(--pd-rgb),.48),transparent)!important;
  transform:none!important;
}
.portal:hover,.portal:focus-visible{
  translate:0 -6px!important;
  border-color:rgba(var(--pd-rgb),.52)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.075),0 30px 70px rgba(0,0,9,.4),0 0 42px rgba(var(--pd-rgb),.09)!important;
}
.portal .pstate{
  z-index:5;top:.9rem;right:1rem;
  max-width:calc(100% - 4.8rem);padding:.22rem .38rem;
  border-radius:2px 8px 2px 8px;
  background:rgba(5,7,18,.38);
  color:rgba(220,213,230,.55);font:.54rem var(--serif-body,serif);letter-spacing:.18em;
  overflow-wrap:anywhere;
}
.portal .pg{
  z-index:4;left:1.2rem;top:1.1rem;width:42px;height:42px;
  border-radius:50% 44% 50% 46%;border-color:rgba(var(--pd-rgb),.28);
  background:radial-gradient(circle,rgba(var(--pd-rgb),.13),transparent 70%);
  color:rgba(236,230,239,.82);font-size:1.3rem;
  box-shadow:none;
}
.portal h3{
  position:relative;z-index:4;margin:0 0 .4rem!important;
  min-height:2.04em;
  font-size:clamp(1.22rem,2vw,1.48rem)!important;line-height:1.02;
  color:#f0ebe6!important;
  text-wrap:balance;
}
.portal .desc{
  position:relative;z-index:4;margin:0;min-height:4.25em!important;
  color:rgba(205,197,214,.72)!important;font-size:.84rem!important;line-height:1.43!important;
  text-wrap:pretty;
}
.portal-diorama{
  position:relative;z-index:3;display:block;width:calc(100% + 2.4rem);height:182px;
  margin:0 -1.2rem .85rem;overflow:hidden;
  border-bottom:1px solid rgba(var(--pd-rgb),.11);
  background:
    radial-gradient(ellipse at 50% 90%,rgba(var(--pd-rgb),.12),transparent 65%),
    linear-gradient(180deg,rgba(var(--pd-rgb),.025),rgba(5,7,18,.34));
  contain:paint;
}
.portal-diorama::before{
  content:"";position:absolute;z-index:1;left:8%;right:8%;bottom:17%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--pd-rgb),.32),transparent);
  box-shadow:0 10px 32px rgba(var(--pd-rgb),.09);
  pointer-events:none;
}
.portal-diorama::after{
  content:"";position:absolute;z-index:2;inset:auto 0 0;height:62%;
  background:linear-gradient(transparent,rgba(6,8,20,.88));
  pointer-events:none;
}
.portal-diorama svg{
  width:100%;height:100%;overflow:visible;
  transition:transform .8s var(--v9-ease),filter .8s ease;
}
.portal:hover .portal-diorama svg,.portal:focus-visible .portal-diorama svg{
  transform:scale(1.055) translateY(-2px);
}
.pd-horizon{fill:none;stroke:rgba(var(--pd-rgb),.19);stroke-width:1;}
.pd-art{fill:rgba(var(--pd-rgb),.1);stroke:rgba(var(--pd-rgb),.64);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;}
.pd-dust{fill:rgba(var(--pd-rgb),.72);}
.pd-dust.d1{animation:v9Dust 5.4s ease-in-out infinite;}
.pd-dust.d2{animation:v9Dust 7.2s ease-in-out -2s infinite;}
.pd-thread,.pd-rays,.pd-stems,.pd-shaft,.pd-orbit,.pd-mapline,.pd-blank,.pd-stair,
.pd-cut,.pd-ripple,.pd-wrong{fill:none;}
.pd-stars circle,.pd-bells circle,.pd-moons circle,.pd-fall path,.pd-fall circle,
.pd-sigils circle,.pd-sigils path,.pd-leaf,.pd-eye{fill:rgba(var(--pd-rgb),.72);stroke:none;}
.pd-door,.pd-tidemoon{fill:rgba(242,222,168,.72);stroke:rgba(255,241,204,.5);}
.pd-hole,.pd-moon-cut{fill:#080a19;stroke:rgba(var(--pd-rgb),.38);}
.pd-reflect,.pd-question,.pd-compass,.pd-fish,.pd-creature{fill:rgba(var(--pd-rgb),.15);}
@keyframes v9Dust{50%{opacity:.28;transform:translateY(-5px)}}

.portal[data-game="symbols"]{--pd-rgb:190,158,224}
.portal[data-game="constellation"]{--pd-rgb:137,171,238}
.portal[data-game="maze"]{--pd-rgb:143,181,198}
.portal[data-game="mirror"]{--pd-rgb:179,218,230}
.portal[data-game="quiz"]{--pd-rgb:220,174,137}
.portal[data-game="water"]{--pd-rgb:119,205,219}
.portal[data-game="lullaby"]{--pd-rgb:218,204,143}
.portal[data-game="falling"]{--pd-rgb:178,154,226}
.portal[data-game="hollow"]{--pd-rgb:159,151,185}
.portal[data-game="moondial"]{--pd-rgb:211,211,226}
.portal[data-game="tide"]{--pd-rgb:111,198,214}
.portal[data-game="cartog"]{--pd-rgb:143,168,234}
.portal.roomportal,.portal.customportal{--pd-rgb:187,168,212}
.portal.deepportal{--pd-rgb:203,182,222}
.portal.marketportal{--pd-rgb:220,178,129}
.portal.seasonportal{--pd-rgb:174,205,180}
.portal.unwrittenportal{--pd-rgb:181,161,225}
.portal.dreamwildportal{--pd-rgb:137,207,183}
.portal.collected{
  border-color:rgba(239,219,166,.4)!important;
  box-shadow:inset 0 1px rgba(255,248,222,.07),0 24px 62px rgba(0,0,8,.33),0 0 34px rgba(235,214,157,.07)!important;
}
.portal.collected .portal-diorama{
  background:
    radial-gradient(ellipse at 50% 90%,rgba(239,219,166,.12),transparent 65%),
    linear-gradient(180deg,rgba(var(--pd-rgb),.035),rgba(5,7,18,.28));
}
.portal.collected .pd-art{stroke:rgba(239,222,177,.72);}

.bonus-meta,.nightmare-meta,.rooms-meta,.deep-meta,.dreamwild-meta{
  width:min(1180px,94vw);margin-top:clamp(4.5rem,9vh,7rem);padding-top:2.4rem;
  content-visibility:auto;contain-intrinsic-size:auto 620px;
}
.bonus-meta::after,.nightmare-meta::after,.rooms-meta::after,.deep-meta::after,.dreamwild-meta::after{
  content:"";position:absolute;right:0;top:-1px;width:32%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(224,215,235,.13));
}
.bonus-section-title,.nightmare-section-title,.rooms-section-title,.deep-section-title,.dreamwild-section-title{
  font-size:clamp(1.7rem,3vw,2.35rem);
  color:#ece7e5;letter-spacing:.01em;
}
.bonus-hint,.nightmare-hint,.rooms-hint,.deep-hint,.dreamwild-hint{
  max-width:62ch;color:rgba(199,191,210,.7);font-size:.98rem;
}
.index-link{
  min-height:54px;margin-top:4rem;padding:0 1.6rem;
  border-radius:3px 17px 3px 17px;
  background:linear-gradient(110deg,rgba(23,23,50,.76),rgba(7,9,22,.88));
}

/* ---------- every screen has its own piece of architecture ---------- */

.screen{
  background-color:var(--v9-void);
  overflow:hidden;
}
.screen.open{animation:v9SceneReveal .68s var(--v9-ease);}
@keyframes v9SceneReveal{
  from{opacity:0;clip-path:inset(0 49.5% 0 49.5%);}
  42%{opacity:1;}
  to{clip-path:inset(0 0 0 0);}
}
.scene-chrome{
  opacity:1;
  background:
    linear-gradient(90deg,rgba(1,2,8,.4),transparent 12% 88%,rgba(1,2,8,.4));
}
.scene-chrome::before{
  content:"";position:absolute;left:50%;top:5vh;width:min(1080px,96vw);height:70vh;translate:-50% 0;
  border:1px solid rgba(224,216,234,.08);border-bottom:0;
  border-radius:48% 48% 0 0/18% 18% 0 0;
  opacity:.8;
}
.scene-chrome::after{
  content:"";position:absolute;left:50%;bottom:-12vh;width:min(1100px,112vw);height:36vh;translate:-50% 0;
  border-top:1px solid rgba(224,216,234,.1);border-radius:50%;
  background:radial-gradient(ellipse at 50% 0,rgba(170,151,211,.055),transparent 64%);
}
.sc-sigil{font-size:clamp(10rem,25vw,22rem);opacity:.68;}
.sc-landmark{
  position:absolute;left:50%;bottom:2vh;width:min(760px,84vw);height:28vh;translate:-50% 0;
  opacity:.32;
  border-top:1px solid rgba(222,215,233,.15);border-radius:50% 50% 0 0;
}
.sc-landmark::before,.sc-landmark::after{content:"";position:absolute;}
.sc-dust i{
  position:absolute;width:3px;height:3px;border-radius:50%;
  background:rgba(235,226,239,.42);box-shadow:0 0 8px rgba(211,196,235,.28);
  animation:v9SceneDust 10s ease-in-out infinite;
}
.sc-dust i:nth-child(1){left:16%;top:24%;animation-delay:-2s}
.sc-dust i:nth-child(2){left:80%;top:31%;width:2px;height:2px;animation-delay:-6s}
.sc-dust i:nth-child(3){left:28%;top:68%;width:2px;height:2px;animation-delay:-4s}
.sc-dust i:nth-child(4){left:72%;top:76%;animation-delay:-8s}
@keyframes v9SceneDust{50%{opacity:.18;transform:translateY(-13px)}}

.screen-head{
  max-width:1060px;padding-top:.5rem;padding-bottom:1rem;
  min-width:0;
}
.screen-head::before{
  content:"ARCHIVE LOCATION";position:absolute;right:0;bottom:.4rem;
  color:rgba(219,210,228,.35);font:.5rem var(--serif-body,serif);letter-spacing:.22em;
}
.screen-title{
  max-width:13ch;min-width:0;
  font-size:clamp(2.4rem,6vw,4.5rem);
  line-height:.78;letter-spacing:-.045em;color:#f4efe9;
  overflow-wrap:normal;text-wrap:balance;
}
.screen-sub{
  max-width:58ch;margin-top:1rem;margin-bottom:2rem;
  font-size:clamp(.98rem,1.7vw,1.1rem);line-height:1.62;color:rgba(217,209,220,.77);
  text-wrap:pretty;
}
.back{
  min-height:42px;border:0;border-bottom:1px solid rgba(225,215,234,.18);
  border-radius:0;background:none;color:rgba(220,212,230,.7);
}
.back:hover{border-bottom-color:rgba(240,220,168,.55);background:none;}

/* Landmark silhouettes are CSS geometry, not generic decorative cards. */
[data-oneiric="symbols"] .sc-landmark{
  clip-path:polygon(0 24%,12% 4%,27% 20%,43% 0,60% 20%,79% 3%,100% 25%,100% 100%,0 100%);
  background:repeating-linear-gradient(96deg,rgba(195,165,225,.1) 0 7%,rgba(17,14,36,.25) 8% 15%);
}
[data-oneiric="constellation"] .sc-landmark{
  border-radius:50%;border:1px dashed rgba(151,181,239,.19);
  background:repeating-radial-gradient(circle,transparent 0 52px,rgba(144,174,235,.04) 53px 54px);
}
[data-oneiric="maze"] .sc-landmark{
  border-radius:0;clip-path:polygon(8% 100%,18% 0,34% 0,39% 100%,61% 100%,66% 0,82% 0,92% 100%);
  background:linear-gradient(90deg,rgba(130,164,181,.08),rgba(7,13,22,.4),rgba(130,164,181,.08));
}
[data-oneiric="mirror"] .sc-landmark,[data-oneiric="hall"] .sc-landmark{
  width:min(590px,78vw);height:46vh;border:6px double rgba(186,216,225,.1);
  border-radius:50% 50% 0 0/11% 11% 0 0;
  background:linear-gradient(90deg,rgba(151,194,207,.035) 49.8%,rgba(225,239,241,.18) 50%,rgba(151,194,207,.035) 50.2%);
}
[data-oneiric="quiz"] .sc-landmark{
  width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(237,188,125,.12),rgba(120,76,49,.03) 45%,transparent 70%);
  box-shadow:0 0 90px rgba(226,166,91,.05);
}
[data-oneiric="water"] .sc-landmark,[data-oneiric="lake"] .sc-landmark{
  height:20vh;border-radius:50%;
  background:repeating-radial-gradient(ellipse,transparent 0 28px,rgba(121,203,219,.08) 29px 30px,transparent 31px 55px);
}
[data-oneiric="lullaby"] .sc-landmark{
  border-radius:0;border:0;
  background:linear-gradient(90deg,transparent 10%,rgba(217,202,139,.06) 10.2%,transparent 10.4% 34%,rgba(217,202,139,.06) 34.2%,transparent 34.4% 66%,rgba(217,202,139,.06) 66.2%,transparent 66.4% 90%,rgba(217,202,139,.06) 90.2%,transparent 90.4%);
}
[data-oneiric="falling"] .sc-landmark{
  height:75vh;bottom:-40vh;border-radius:0;border-left:1px solid rgba(179,156,225,.1);border-right:1px solid rgba(179,156,225,.1);
  background:linear-gradient(180deg,rgba(164,142,218,.08),transparent 38%);
}
[data-oneiric="hollow"] .sc-landmark{
  border:0;border-radius:0;
  background:radial-gradient(circle at 50% 48%,#060712 0 12%,rgba(170,161,194,.05) 12.5% 28%,transparent 29%);
}
[data-oneiric="moondial"] .sc-landmark{
  width:380px;height:380px;max-width:76vw;border-radius:50%;border:1px solid rgba(205,207,224,.11);
  background:repeating-conic-gradient(from 0deg,rgba(206,208,225,.06) 0 .4deg,transparent .5deg 29deg);
}
[data-oneiric="room"] .sc-landmark,[data-oneiric="wonder"] .sc-landmark{
  height:52vh;border-radius:0;border:1px solid rgba(215,205,230,.1);
  clip-path:polygon(8% 100%,8% 20%,50% 0,92% 20%,92% 100%);
}
[data-oneiric="unwritten"] .sc-landmark,[data-oneiric="index"] .sc-landmark{
  border-radius:0;border:0;
  background:linear-gradient(90deg,transparent 49.7%,rgba(202,190,226,.14) 50%,transparent 50.3%),
             repeating-linear-gradient(180deg,transparent 0 42px,rgba(202,190,226,.035) 43px 44px);
}
[data-oneiric="nightkey"] .sc-landmark{
  width:520px;height:250px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(191,96,139,.09),transparent 66%);
}
[data-oneiric="dreamwild"] .sc-landmark,[data-oneiric="garden"] .sc-landmark{
  clip-path:polygon(0 65%,8% 38%,16% 67%,26% 24%,38% 66%,51% 38%,64% 68%,78% 18%,91% 63%,100% 45%,100% 100%,0 100%);
  background:rgba(132,202,177,.08);border:0;border-radius:0;
}
[data-oneiric="meadow"] .sc-landmark{
  border:0;border-radius:50%;
  background:radial-gradient(ellipse at 50% 0,rgba(240,201,151,.13),transparent 65%);
}

/* ---------- primary dreams: polish the tactile object, not just its frame ---------- */

.match-grid{
  box-shadow:inset 0 26px 60px rgba(207,181,229,.045),0 34px 100px rgba(0,0,8,.44);
}
.card-face{transition:transform .5s var(--v9-ease),background .4s ease,box-shadow .4s ease;}
.card:hover .card-face{filter:brightness(1.07);}
.card.matched::after{
  content:"";position:absolute;inset:44% -22%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(244,224,169,.58),transparent);
  pointer-events:none;
}

.constel{
  box-shadow:inset 0 0 120px rgba(88,119,192,.14),0 35px 100px rgba(0,0,9,.5),0 0 70px rgba(109,142,211,.09);
}
.constel-line{
  stroke:rgba(249,229,174,.9);
  filter:drop-shadow(0 0 4px rgba(243,221,162,.8)) drop-shadow(0 0 11px rgba(157,184,239,.32));
}
.star.lit::after,.star.next::after{
  content:"";position:absolute;inset:-8px;border:1px solid rgba(248,229,177,.2);border-radius:50%;
}

.maze-wrap::after{
  content:"";position:absolute;inset:12px;pointer-events:none;
  background:linear-gradient(90deg,rgba(8,13,23,.5),transparent 18% 82%,rgba(8,13,23,.5));
  border-radius:inherit;
}

.mirror-board::after{
  content:"";position:absolute;inset:10px;pointer-events:none;
  background:linear-gradient(115deg,transparent 31%,rgba(228,242,244,.05) 40%,transparent 49%);
  mix-blend-mode:screen;
}

.quiz{
  min-height:360px;display:flex;flex-direction:column;justify-content:center;
}
.quiz::after{
  content:"";position:absolute;left:50%;bottom:-16px;width:82%;height:32px;translate:-50% 0;
  border-top:1px solid rgba(232,193,142,.15);border-radius:50%;
}

.water-board{
  box-shadow:inset 0 0 100px rgba(112,198,211,.16),0 40px 110px rgba(0,0,8,.5),0 0 80px rgba(75,167,188,.09);
}
.water-board::before{
  content:"";position:absolute;inset:12%;border-radius:50%;pointer-events:none;
  background:linear-gradient(110deg,transparent 36%,rgba(226,244,240,.07) 48%,transparent 60%);
}

.orb::after{
  content:"";position:absolute;left:50%;top:-14px;width:1px;height:14px;
  background:linear-gradient(transparent,rgba(224,213,173,.36));
}
.orb.lit{filter:drop-shadow(0 0 18px rgba(244,221,143,.4));}

#fallCanvas{
  box-shadow:inset 0 30px 100px rgba(175,153,224,.11),0 30px 80px rgba(0,0,9,.36);
}

/* ---------- nightmare grammar: wrong light, delayed edges, no generic red ---------- */

body.nightmare-playing .scene-chrome{
  filter:none;
}
body.nightmare-playing .scene-chrome::before{
  translate:calc(-50% + 5px) -3px;
  border-color:rgba(207,156,199,.13);
}
body.nightmare-playing .sc-landmark{
  scale:-1 1;opacity:.42;
}
body.nightmare-playing .sc-dust i{
  background:rgba(225,182,214,.48);
  box-shadow:7px -4px 0 rgba(110,80,143,.22);
}
.nportal{
  min-height:192px;border-radius:3px 18px 4px 13px;
  background:
    linear-gradient(102deg,transparent 48.8%,rgba(205,148,192,.045) 49%,transparent 49.4%),
    linear-gradient(160deg,rgba(29,17,42,.94),rgba(5,6,17,.97));
}
.nportal::before{
  content:"";position:absolute;inset:12px;border:1px solid rgba(211,159,197,.08);
  transform:translate(4px,-3px);pointer-events:none;
}

/* ---------- the Index is a manuscript, not a modal grid ---------- */

#screen-index{
  background:
    radial-gradient(75% 65% at 50% 18%,#332d3a 0,#171421 52%,#080711 100%);
}
#screen-index .index-grid{
  padding:clamp(.7rem,2vw,1.2rem);
  border:1px solid rgba(234,219,188,.14);
  background:
    linear-gradient(90deg,rgba(112,83,50,.06),transparent 9% 91%,rgba(112,83,50,.05)),
    linear-gradient(145deg,rgba(57,47,56,.76),rgba(19,16,27,.92));
  box-shadow:inset 0 0 80px rgba(4,3,8,.26),0 42px 110px rgba(0,0,8,.48);
}
#screen-index .index-grid::before{
  content:"";position:absolute;left:50%;top:0;bottom:0;width:34px;translate:-50% 0;
  background:linear-gradient(90deg,transparent,rgba(4,3,9,.35) 44%,rgba(239,219,174,.04) 50%,rgba(4,3,9,.35) 56%,transparent);
  pointer-events:none;z-index:3;
}
#screen-index .dream{
  min-height:260px;padding:clamp(1.25rem,3vw,2rem);
  border-color:rgba(235,220,188,.1);
  background:
    radial-gradient(circle at 86% 14%,rgba(238,219,174,.035),transparent 22%),
    linear-gradient(145deg,rgba(77,63,65,.58),rgba(31,26,37,.9));
}
#screen-index .dream.unlocked{
  background:
    linear-gradient(90deg,rgba(154,115,62,.12),transparent 14%),
    radial-gradient(circle at 82% 12%,rgba(242,222,177,.06),transparent 24%),
    linear-gradient(145deg,rgba(83,68,68,.68),rgba(35,29,41,.94));
}
.index-tabs{
  border-bottom:1px solid rgba(236,219,181,.12);
  padding-bottom:.55rem;
}
.index-tabs button{
  border-radius:0;border:0;border-bottom:1px solid transparent;background:none;
}
.index-tabs button.active{border-bottom-color:rgba(241,220,168,.7);color:#fff0c5;}
.relic,.lang-cell,.law-card,.wild-entry{
  border-radius:3px 14px 4px 11px!important;
}

/* ---------- the living worlds ---------- */

#screen-dreamwild{
  background:
    radial-gradient(80% 55% at 50% 8%,rgba(118,191,173,.14),transparent 70%),
    linear-gradient(180deg,#07141a,#071315 62%,#030909);
}
.wild-map{
  position:relative;padding:.45rem;border-top:1px solid rgba(171,224,207,.12);
  border-bottom:1px solid rgba(171,224,207,.08);
  background:linear-gradient(90deg,transparent,rgba(8,30,31,.5) 8% 92%,transparent);
}
.wild-map-node{
  min-height:82px;border:0;border-radius:3px 14px 3px 10px;
  background:linear-gradient(145deg,rgba(15,46,46,.72),rgba(5,20,23,.72));
}
.wild-map-node>span{
  width:35px;height:35px;display:grid;place-items:center;border:1px solid rgba(166,223,205,.15);border-radius:50%;
}
.wild-map-node.active{
  background:linear-gradient(145deg,rgba(35,79,72,.78),rgba(7,30,31,.82));
  box-shadow:inset 0 -1px rgba(200,235,220,.18),0 0 30px rgba(103,190,170,.08);
}
.wild-stage{
  min-height:560px;
  border:1px solid rgba(207,231,222,.16);
  border-radius:46% 46% 9px 9px/12% 12% 9px 9px;
  box-shadow:inset 0 -110px 140px rgba(2,12,14,.55),inset 0 1px rgba(238,249,243,.22),0 40px 100px rgba(0,0,8,.42);
}
.wild-stage::after{
  content:"";position:absolute;left:-10%;right:-10%;bottom:-18%;height:42%;z-index:0;pointer-events:none;
  border-radius:50%;border-top:1px solid rgba(219,239,228,.12);
  background:
    repeating-radial-gradient(ellipse at 50% 0,transparent 0 36px,rgba(218,239,228,.035) 37px 38px,transparent 39px 66px),
    radial-gradient(ellipse at 50% 0,rgba(176,219,196,.08),transparent 65%);
}
.wild-distance{
  filter:drop-shadow(0 14px 14px rgba(2,11,13,.2));
}
.wild-ground{
  box-shadow:inset 0 2px rgba(213,237,224,.075);
}
.wild-thing{
  z-index:3;
  filter:drop-shadow(0 16px 14px rgba(2,12,14,.38));
}
.wild-thing::before{
  content:"";position:absolute;left:50%;bottom:-7%;width:72%;height:12%;translate:-50% 0;
  border-radius:50%;background:rgba(3,13,14,.22);filter:blur(4px);z-index:-1;
}
.wild-thing>span{
  border:1px solid rgba(190,227,214,.1);border-radius:3px 10px 3px 10px;
  background:rgba(4,20,23,.78);
}
.wild-whisper{
  padding:1rem 1.4rem;border-top:1px solid rgba(168,216,201,.1);
  background:linear-gradient(90deg,transparent,rgba(9,31,32,.32),transparent);
}
.wild-garden-gate,.wild-meadow-gate{
  min-height:48px;border-radius:3px 15px 3px 12px;
}

#screen-garden{
  background:
    radial-gradient(65% 40% at 50% 6%,rgba(202,230,170,.13),transparent 68%),
    linear-gradient(180deg,#152217,#0b150f 58%,#050a07);
}
#screen-garden::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:32vh;pointer-events:none;
  background:
    linear-gradient(104deg,transparent 0 8%,rgba(61,85,49,.14) 8.3% 8.8%,transparent 9% 21%,rgba(61,85,49,.11) 21.2% 21.7%,transparent 22%),
    radial-gradient(ellipse at 50% 100%,rgba(51,78,48,.18),transparent 70%);
}
.garden-tray{
  position:relative;padding:clamp(1rem,2.5vw,1.5rem);
  border-left:1px solid rgba(197,222,174,.11);
  border-right:1px solid rgba(197,222,174,.06);
  background:linear-gradient(145deg,rgba(22,38,23,.36),rgba(7,17,11,.32));
}
.garden-h{border-bottom-color:rgba(198,221,173,.13);}
.garden-seed{
  border-radius:50% 44% 50% 46%;
  background:radial-gradient(circle at 38% 30%,rgba(201,226,171,.12),rgba(19,33,21,.72));
}
.garden-plot{
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
}
.garden-plant-card{
  min-height:310px;justify-content:flex-end;position:relative;overflow:hidden;
  border-radius:46% 46% 5px 5px/9% 9% 5px 5px;
  background:
    radial-gradient(ellipse at 50% 70%,rgba(116,157,96,.12),transparent 50%),
    linear-gradient(160deg,rgba(26,43,27,.76),rgba(7,16,11,.86));
  box-shadow:inset 0 -40px 70px rgba(2,10,6,.24),0 18px 42px rgba(2,8,5,.28);
}
.garden-plant-card::before{
  content:"";position:absolute;left:9%;right:9%;bottom:88px;height:12%;border-radius:50%;
  background:rgba(3,11,7,.26);filter:blur(6px);
}
.gp-art{position:relative;z-index:2;width:clamp(120px,29vw,170px);}

#screen-meadow{
  background:
    radial-gradient(100% 55% at 50% 0,rgba(255,237,209,.2),transparent 65%),
    linear-gradient(180deg,#504248,#302732 46%,#100c14);
}
.meadow-stage{
  min-height:520px;border:1px solid rgba(246,225,204,.14);
  box-shadow:inset 0 -100px 130px rgba(18,12,20,.52),inset 0 1px rgba(255,246,232,.28),0 38px 90px rgba(0,0,8,.36);
}
.meadow-stage::after{
  content:"";position:absolute;left:-8%;right:-8%;bottom:-8%;height:35%;
  border-radius:50%;border-top:1px solid rgba(247,226,203,.1);
  background:
    linear-gradient(98deg,transparent 10%,rgba(237,207,178,.06) 10.3%,transparent 10.7% 31%,rgba(237,207,178,.05) 31.3%,transparent 31.7% 68%,rgba(237,207,178,.05) 68.3%,transparent 68.7%),
    radial-gradient(ellipse at 50% 0,rgba(232,198,170,.09),transparent 66%);
}
.mdw-thing::before{
  content:"";position:absolute;left:50%;bottom:-4%;width:68%;height:10%;translate:-50% 0;
  border-radius:50%;background:rgba(31,21,27,.2);filter:blur(4px);
}

/* ---------- Unwritten World, House, language, and law matter ---------- */

#screen-unwritten{
  background:
    radial-gradient(85% 65% at 50% 20%,#282246,#0b0d20 62%,#040510);
}
.uw-scene{
  border:1px solid rgba(213,203,235,.14);
  box-shadow:inset 0 -90px 130px rgba(1,2,9,.48),0 38px 100px rgba(0,0,8,.46);
}
.uw-region-nav{
  padding:.4rem;border-top:1px solid rgba(213,203,235,.1);border-bottom:1px solid rgba(213,203,235,.08);
}
.uw-region-btn{
  border:0;border-radius:2px 10px 2px 8px;background:rgba(10,11,29,.48);
}
.uw-region-btn.active{box-shadow:inset 0 -1px rgba(240,221,169,.6);}
.uw-node .uw-g{
  border-radius:50% 43% 48% 46%;
  box-shadow:inset 0 0 22px rgba(211,198,239,.08),0 13px 28px rgba(0,0,10,.27);
}
.lang-combiner{
  border-radius:4px 18px 5px 14px;
  box-shadow:inset 0 0 55px rgba(151,128,204,.05),0 24px 60px rgba(0,0,8,.25);
}
.lang-cell{
  background:
    radial-gradient(circle at 50% 35%,rgba(197,179,232,.11),transparent 58%),
    rgba(10,10,25,.52);
}
.law-card{
  background:
    linear-gradient(90deg,rgba(225,208,163,.06),transparent 13%),
    linear-gradient(145deg,rgba(30,27,54,.76),rgba(8,10,24,.84));
}

/* ---------- endings occupy the interface rather than floating above it ---------- */

#wakingEnd,#subEnd,#companionEnd{
  background:
    linear-gradient(90deg,rgba(2,3,10,.72),transparent 20% 80%,rgba(2,3,10,.72)),
    radial-gradient(86% 74% at 50% 38%,rgba(55,46,85,.96),rgba(3,4,12,.995));
}
#wakingEnd::before,#subEnd::before,#companionEnd::before{
  content:"";position:fixed;left:50%;top:-12vh;width:min(900px,116vw);height:80vh;translate:-50% 0;
  border:1px solid rgba(234,224,239,.11);border-radius:0 0 50% 50%;pointer-events:none;
}
#wakingEnd h2,#subEnd h2,#companionEnd h2{
  max-width:11ch;font-size:clamp(3.2rem,10vw,7.6rem);line-height:.75;letter-spacing:-.055em;
}
#wakingEnd p,#subEnd p,#companionEnd p{
  max-width:58ch;font-size:clamp(1rem,2vw,1.18rem);line-height:1.68;
}
.end-acts button,.cmp-choices button{
  min-height:48px;border-radius:3px 15px 3px 12px;
}

/* ---------- update board, tutorial, notices ---------- */

#screen-updates .update-card{
  border-radius:4px 18px 5px 14px;
  background:
    linear-gradient(90deg,rgba(235,217,171,.05),transparent 10%),
    linear-gradient(145deg,rgba(27,28,57,.8),rgba(8,10,24,.88));
}
.tut-card{
  border-radius:46% 46% 7px 7px/7% 7% 7px 7px;
  background:
    radial-gradient(circle at 50% 0,rgba(204,187,235,.11),transparent 43%),
    linear-gradient(155deg,rgba(28,26,56,.98),rgba(7,9,22,.98));
  box-shadow:inset 0 1px rgba(255,255,255,.05),0 40px 120px rgba(0,0,8,.58);
}
#toast{
  width:max-content;max-width:min(90vw,620px);
  border-radius:3px 16px 3px 13px;
  background:linear-gradient(145deg,rgba(26,27,57,.96),rgba(7,9,22,.96));
}
#narrator{
  left:max(1rem,env(safe-area-inset-left));right:auto;top:auto;
  bottom:calc(1.25rem + env(safe-area-inset-bottom));
  width:min(340px,calc(100vw - 2rem));max-width:none;
  transform:translateX(calc(-100% - 2rem));
  text-align:left;
  border-left:1px solid rgba(237,218,168,.28);
  border-radius:3px 16px 3px 13px;
  background:linear-gradient(105deg,rgba(7,9,22,.96),rgba(18,17,39,.91));
}
#narrator.show{
  transform:translateX(0);
}
.nr-quote{max-width:52ch;}

/* Shared controls and story content occupy separate, predictable planes. */
.screen>.scroll{
  padding-top:calc(var(--v9-rail-height) + 1.25rem + env(safe-area-inset-top))!important;
  padding-bottom:calc(4rem + env(safe-area-inset-bottom))!important;
  scrollbar-gutter:stable;
  overscroll-behavior:contain;
}
.screen-head{
  display:grid;
  grid-template-columns:minmax(150px,.8fr) minmax(0,1.2fr);
  align-items:end;
}
.screen-head .back{justify-self:start;}
.screen-head .screen-title{justify-self:end;text-align:right;}
.screen-head>*{min-width:0;}
.screen .scroll>*{max-width:100%;}
.game-msg,[role="status"],[aria-live]{
  overflow-wrap:anywhere;
}

/* ---------- adaptive quality and lifecycle ---------- */

body.gfx-high .portal:hover .portal-diorama svg,
body.gfx-high .portal:focus-visible .portal-diorama svg{
  filter:drop-shadow(0 0 8px rgba(var(--pd-rgb),.2));
}
body.gfx-high .wild-stage{
  filter:saturate(1.04);
}
body.gfx-medium .intro-dreamscape{opacity:.66;}
body.gfx-medium .portal-diorama svg{filter:none!important;}
body.gfx-medium .sc-dust i:nth-child(n+3){display:none;}
body.gfx-medium .wild-stage,body.gfx-medium .meadow-stage{filter:none;}
body.gfx-low .intro-dreamscape{opacity:.5;}
body.gfx-low .id-threads,body.gfx-low .sc-dust{display:none;}
body.gfx-low .portal-diorama svg{filter:none!important;transition:none;}
body.gfx-low .portal:hover,body.gfx-low .portal:focus-visible{translate:0 -2px!important;}
body.gfx-low .scene-chrome::before,body.gfx-low .scene-chrome::after{opacity:.45;}
body.gfx-low .wild-stage,body.gfx-low .meadow-stage,body.gfx-low .memory-observatory::before{
  box-shadow:inset 0 -50px 70px rgba(0,0,8,.28);
}

body.dream-paused *,body.is-scrolling .portal-diorama *,
body.is-scrolling .sc-dust *,body.is-scrolling .id-moon{
  animation-play-state:paused!important;
}

/* ---------- responsive compositions ---------- */

@media(max-width:980px){
  .portals{grid-template-columns:repeat(2,minmax(0,1fr));}
  .portal{min-height:295px;}
  .portal h3{min-height:2.04em;}
  .portal .desc{min-height:4.25em!important;}
  .fragment-atlas{width:min(900px,94vw);}
  .hub-dreamscape{height:780px;}
  .memory-observatory{min-height:620px;}
}

@media(max-width:680px){
  .dream-skip{left:max(.65rem,env(safe-area-inset-left));top:max(.65rem,env(safe-area-inset-top));}
  #oneiricStage{opacity:.52;}
  .intro-dreamscape svg{width:155%;margin-left:-28%;}
  .id-archive,.id-stair{opacity:.42;}
  .intro-content{border:0;background:none;padding-inline:.8rem;}
  #intro h1{font-size:clamp(3.4rem,17vw,5.6rem);line-height:.78;}
  .enter-btn{min-width:min(340px,90vw);}

  .rail{
    top:max(.55rem,env(safe-area-inset-top));right:max(.55rem,env(safe-area-inset-right));
    padding:.28rem;gap:.18rem;
  }
  .rail .chip{width:39px;height:39px;}
  #hub{padding-top:calc(4.4rem + env(safe-area-inset-top));}
  .hub-dreamscape{height:640px;opacity:.72;}
  .hd-moon{top:100px;width:250px;height:250px;}
  .hd-archive{top:350px;}
  .hub-prologue{min-height:500px;padding-top:4rem;}
  .title{font-size:clamp(3.4rem,17vw,5.7rem);line-height:.76;}
  .status{background:rgba(9,11,26,.7);}
  .memory-observatory{min-height:520px;padding-top:2.5rem;}
  .memory-observatory::before{border-radius:47% 47% 4px 4px/9% 9% 4px 4px;}
  .atlas-heading{grid-template-columns:1fr;text-align:center;}
  .atlas-num,.atlas-mark{display:none;}
  .atlas-heading p{margin-inline:auto;}
  .portals{gap:.72rem;}
  .portal{min-height:275px;padding-inline:1rem!important;}
  .portal-diorama{height:158px;width:calc(100% + 2rem);margin-inline:-1rem;}
  .portal .pg{left:1rem;width:38px;height:38px;}
  .portal .pstate{right:.8rem;max-width:15ch;text-align:right;}

  .screen>.scroll{
    padding-top:calc(var(--v9-rail-height) + 1.4rem + env(safe-area-inset-top))!important;
    padding-inline:max(1rem,env(safe-area-inset-left))!important;
  }
  .screen-head{
    grid-template-columns:1fr;
    align-items:start;gap:.85rem;
    width:100%;padding-bottom:1.2rem;
  }
  .screen-head .screen-title{
    justify-self:start;text-align:left;max-width:100%;order:0;
  }
  .screen-head .back{max-width:min(100%,32rem);}
  .screen-head::before{display:none;}
  .screen-title{font-size:clamp(2.25rem,11vw,3.5rem);}
  .screen-sub{text-align:left;width:min(100%,58ch);}
  .scene-chrome::before{width:120vw;opacity:.5;}
  .sc-landmark{width:110vw;opacity:.24;}
  [data-oneiric="mirror"] .sc-landmark,[data-oneiric="hall"] .sc-landmark{width:88vw;}
  .wild-stage,.meadow-stage{min-height:500px;border-left:0;border-right:0;}
  .wild-map-node{min-height:76px;}
  .garden-plot{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;}
  .garden-plant-card{min-height:290px;padding-inline:.65rem;}
  #screen-index .index-grid::before{display:none;}

  #narrator{
    left:max(.75rem,env(safe-area-inset-left));
    right:max(.75rem,env(safe-area-inset-right));
    bottom:calc(5.25rem + env(safe-area-inset-bottom));
    width:auto;padding:.72rem 1rem .65rem;text-align:center;
    transform:translateY(calc(100% + 7rem));
  }
  #narrator.show{transform:translateY(0);}
  #toast{
    width:calc(100vw - 1.5rem);max-width:520px;
    bottom:calc(.75rem + env(safe-area-inset-bottom));
    padding:.75rem 1rem;
  }
}

@media(max-width:430px){
  .portals{grid-template-columns:1fr;}
  .portal{min-height:270px;}
  .portal-diorama{height:154px;}
  .portal h3{min-height:0;font-size:1.36rem!important;}
  .portal .desc{min-height:0!important;font-size:.86rem!important;}
  .bonus-portals,.nightmare-portals{grid-template-columns:1fr;}
  .garden-plot{grid-template-columns:1fr;}
  .garden-plant-card{min-height:310px;}
  .wild-map{grid-template-columns:1fr 1fr;gap:.35rem;padding:.25rem;}
  .wild-map-node{grid-template-columns:25px 1fr;padding:.5rem;font-size:.9rem;}
  .wild-map-node small{font-size:.55rem;}
  #wakingEnd h2,#subEnd h2,#companionEnd h2{font-size:clamp(3rem,17vw,4.8rem);}
  #versionTag{right:max(.55rem,env(safe-area-inset-right));}
}

@media(max-height:560px) and (orientation:landscape){
  .intro-dreamscape{opacity:.48;}
  .intro-content{padding-block:.8rem;}
  #intro h1{font-size:3.1rem;max-width:13ch;}
  .hub-prologue{min-height:420px;padding-top:2rem;}
  .scene-chrome::after,.sc-landmark{display:none;}
  .screen-title{font-size:2.5rem;line-height:.85;}
  .screen>.scroll{padding-top:calc(var(--v9-rail-height) + .6rem)!important;}
  #narrator{bottom:.75rem;width:min(420px,calc(100vw - 1.5rem));}
}

@media(min-width:1500px){
  .fragment-atlas{width:min(1360px,91vw);}
  .portal{min-height:335px;}
  .portal-diorama{height:198px;}
  .hub-prologue{min-height:720px;}
}

/* ---------- motion, contrast, and rendering fallbacks ---------- */

@media(prefers-reduced-motion:reduce){
  .intro-dreamscape svg,.id-moon,.pd-dust,.sc-dust i,.portal-diorama svg,
  .portal,.screen.open,.wild-stage,.meadow-stage{
    animation:none!important;transition-duration:.01ms!important;translate:none;
  }
  .intro-dreamscape svg{translate:none;}
  .portal:hover,.portal:focus-visible{translate:none!important;}
  .screen.open{clip-path:none!important;}
  .scene-chrome{opacity:1;}
  #narrator,#narrator.show,#toast,#toast.show{transition:none!important;}
}

@media(forced-colors:active){
  .intro-dreamscape,.hub-dreamscape,.portal-diorama,.scene-chrome,#oneiricStage{display:none!important;}
  .portal,.garden-plant-card,.wild-map-node,.index-link{
    border:1px solid CanvasText!important;background:Canvas!important;color:CanvasText!important;
  }
  .dream-skip{background:Canvas;color:CanvasText;}
  #narrator,#toast{border:1px solid CanvasText;background:Canvas;color:CanvasText;}
}

@media(prefers-contrast:more){
  :root{--v9-edge:rgba(255,255,255,.34);}
  .portal .desc,.screen-sub,.bonus-hint,.nightmare-hint,.rooms-hint,.deep-hint,.dreamwild-hint{color:#e7e1e8!important;}
  .portal{border-color:rgba(var(--pd-rgb),.48)!important;}
  .back,.status{color:#f1ebf1;}
}

/* ======================================================================
   v9.2 — THE OUTER CATALOGUE
   Late-game content is staged as a sequence of physical territories rather
   than one repeated column of feature panels. This layer deliberately keeps
   every gameplay class and event target intact.
   ====================================================================== */

/* The hub's later chapters share an archival spine but each keeps its own
   material and horizon. The pseudo-layers never receive pointer input. */
.bonus-meta,.nightmare-meta,.rooms-meta,.deep-meta,.dreamwild-meta{
  isolation:isolate;
  padding:clamp(3.25rem,7vw,5.5rem) clamp(0rem,2vw,1.25rem) clamp(2.3rem,5vw,4rem);
  border-top:0;
}
.bonus-meta::before,.nightmare-meta::before,.rooms-meta::before,.deep-meta::before,.dreamwild-meta::before{
  left:50%;top:0;width:min(760px,78vw);height:1px;translate:-50% 0;
  background:linear-gradient(90deg,transparent,rgba(235,219,183,.44) 18% 82%,transparent);
  box-shadow:none;
}
.bonus-meta::after,.nightmare-meta::after,.rooms-meta::after,.deep-meta::after,.dreamwild-meta::after{
  inset:0 -4vw;z-index:-2;height:auto;
  border-radius:50% 50% 4px 4px/7% 7% 4px 4px;
  opacity:.78;
}
.bonus-meta::after{
  background:
    radial-gradient(ellipse at 18% 23%,rgba(153,168,198,.08),transparent 26%),
    linear-gradient(165deg,rgba(13,20,35,.34),transparent 72%);
}
.rooms-meta::after{
  background:
    linear-gradient(90deg,transparent 0 9%,rgba(198,183,213,.045) 9.1% 9.25%,transparent 9.4% 90%,rgba(198,183,213,.04) 90.1% 90.25%,transparent 90.4%),
    linear-gradient(180deg,rgba(31,26,48,.28),transparent 76%);
}
.deep-meta::after{
  background:
    radial-gradient(ellipse at 50% 0,rgba(232,211,164,.065),transparent 36%),
    linear-gradient(180deg,rgba(18,17,36,.25),transparent 78%);
}
#unwrittenMeta::after{
  background:
    linear-gradient(105deg,transparent 0 46%,rgba(210,197,237,.055) 46.2% 46.35%,transparent 46.55% 53%,rgba(210,197,237,.04) 53.15% 53.3%,transparent 53.5%),
    radial-gradient(ellipse at 50% 8%,rgba(158,133,207,.12),transparent 48%);
}
.dreamwild-meta::after{
  background:
    radial-gradient(ellipse at 50% 100%,rgba(95,173,148,.12),transparent 57%),
    linear-gradient(180deg,rgba(9,37,35,.2),transparent 70%);
}
.nightmare-meta::after{
  background:
    radial-gradient(circle at 50% 15%,rgba(133,55,100,.15),transparent 22%),
    radial-gradient(ellipse at 50% 40%,rgba(62,29,73,.22),transparent 62%);
}
.bonus-section-title,.nightmare-section-title,.rooms-section-title,
.deep-section-title,.dreamwild-section-title{
  position:relative;width:max-content;max-width:100%;margin-inline:auto;
  text-wrap:balance;line-height:1.02;
}
.bonus-section-title::after,.nightmare-section-title::after,.rooms-section-title::after,
.deep-section-title::after,.dreamwild-section-title::after{
  content:"ARCHIVE CHAPTER";display:block;margin-top:.72rem;
  font-family:var(--serif-body);font-size:.54rem;letter-spacing:.32em;
  color:rgba(209,199,217,.38);font-style:normal;
}
.nightmare-section-title::after{content:"THE NEGATIVE CATALOGUE";color:rgba(215,156,197,.44);}
.dreamwild-section-title::after{content:"BEYOND THE LAST ECHO";color:rgba(173,218,202,.43);}
#unwrittenMeta .deep-section-title::after{content:"THE ARCHIVE DREAMS BACK";}

/* Explicit grids prevent a one-item chapter from being compressed into the
   first cell of the four-column fragment atlas. */
#bonusPortals{width:min(780px,100%);grid-template-columns:repeat(2,minmax(0,1fr));}
#nightmarePortals{grid-template-columns:repeat(4,minmax(0,1fr));}
#roomsPortals{width:100%;grid-template-columns:repeat(3,minmax(0,1fr));}
#deepPortals{width:min(760px,100%);grid-template-columns:repeat(2,minmax(0,1fr));}
#customPortals,#marketPortals,#seasonPortals,#unwrittenPortals{
  width:min(620px,100%);max-width:620px;
  grid-template-columns:minmax(0,1fr);
}
#dreamwildPortal{width:min(620px,100%);margin-inline:auto;}
#dreamwildPortal>.portal{width:100%;}
#unwrittenPortals .portal,#customPortals .portal,#marketPortals .portal,#seasonPortals .portal,
#dreamwildPortal .portal{
  min-height:300px;
}

/* Deeper game spaces: one continuous stage with controls anchored to its
   threshold, not loose strips floating above a canvas. */
#screen-lake .lake-meta,#screen-subconscious .sub-resolve,#screen-nightkey .key-round{
  width:min(1020px,96vw);margin-inline:auto;
}
.lake-wrap,.hall-stage,.sub-stage,.key-trial{
  position:relative;isolation:isolate;
  border-color:rgba(226,216,236,.16)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.055),inset 0 -70px 100px rgba(1,2,8,.28),0 36px 90px rgba(0,0,8,.42);
}
.lake-wrap::after,.hall-stage::after,.sub-stage::after,.key-trial::after{
  content:"";position:absolute;inset:11px;z-index:12;pointer-events:none;
  border:1px solid rgba(226,216,236,.06);border-radius:inherit;
}
.hall-dots{
  width:min(820px,94vw);margin:.2rem auto 1rem;padding:.55rem 1rem;
  border-top:1px solid rgba(218,207,231,.1);border-bottom:1px solid rgba(218,207,231,.06);
}
.key-actions,.end-acts,.escape-actions{
  display:flex;justify-content:center;align-items:stretch;flex-wrap:wrap;gap:.65rem;
}
.key-actions>* ,.end-acts>*{flex:0 1 auto;max-width:100%;}

/* Dreamwild reads as one landscape. The map is its horizon key, and the two
   gates are paired thresholds rather than unrelated centered buttons. */
.dreamwild-scroll{width:100%;max-width:none;margin-inline:0;box-sizing:border-box;}
.wild-map{
  width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;padding:1px;margin-top:clamp(1rem,3vw,2rem);
  overflow:hidden;min-height:84px;flex:0 0 auto;
}
.wild-map-node{border-radius:0;min-width:0;position:relative;}
.wild-map-node:first-child{border-radius:18px 0 0 3px;}
.wild-map-node:last-child{border-radius:0 18px 3px 0;}
.wild-map-node.active::after{
  content:"";position:absolute;left:18%;right:18%;bottom:0;height:1px;
  background:rgba(214,240,229,.65);box-shadow:0 0 13px rgba(151,218,194,.35);
}
.wild-progress{width:min(560px,88%);margin-inline:auto;}
.wild-garden-gate,.wild-meadow-gate{
  width:min(430px,calc(50% - .4rem));margin:.45rem .18rem 1.05rem;
  vertical-align:top;
}
.wild-stage{overflow:hidden;contain:layout paint style;flex:0 0 auto;}
.wild-whisper,.garden-whisper,.meadow-whisper{
  width:min(860px,94vw);min-height:4.5rem;margin-inline:auto;
  display:flex;flex-direction:column;justify-content:center;
}

/* Garden plots become specimen beds. Their silhouettes remain entirely from
   the existing procedural SVG set; the extra depth is CSS-only. */
.garden-tray{
  width:min(1080px,96vw);margin-inline:auto;
  border-top:1px solid rgba(207,229,185,.11);
}
.garden-tray+.garden-tray{margin-top:1rem;}
.garden-plant-card::after{
  content:"";position:absolute;inset:auto 12% 69px;height:1px;z-index:1;
  background:linear-gradient(90deg,transparent,rgba(205,227,183,.2),transparent);
}
.garden-plant-card:focus-visible,.mdw-thing:focus-visible,.wild-thing:focus-visible{
  outline:2px solid rgba(241,226,182,.86);outline-offset:5px;
}
.meadow-time{width:min(880px,94vw);margin-inline:auto;}
.meadow-stage{overflow:hidden;contain:layout paint style;}
#screen-meadow .screen-head::before{display:none;}

/* The Unwritten World's supporting material is manuscript matter, not a
   dashboard. Laws sit on ruled leaves; foreign dreams retain a different
   cadence and edge. */
.uw-stage,.uw-drifts,.uw-laws,.uw-endings{width:min(1020px,96vw);}
.uw-region-nav{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;
  overflow:hidden;padding:1px;margin-bottom:.8rem;
  background:rgba(213,203,235,.08);min-height:44px;flex:0 0 auto;
}
.uw-region-btn{border-radius:0;min-width:0;min-height:42px;}
.uw-region-btn:first-child{border-radius:14px 0 0 3px;}
.uw-region-btn:last-child{border-radius:0 14px 3px 0;}
.uw-region-btn.cur,.uw-region-btn.active{
  background:linear-gradient(180deg,rgba(91,75,130,.34),rgba(12,12,32,.72));
}
.uw-drifts,.uw-laws,.uw-endings{
  position:relative;overflow:hidden;padding:clamp(1.25rem,3vw,2rem);
  border:1px solid rgba(214,202,235,.11);border-radius:4px 22px 5px 17px;
  flex:0 0 auto;
}
.uw-drifts::before,.uw-laws::before,.uw-endings::before{
  content:"";position:absolute;top:0;bottom:0;left:22px;width:1px;
  background:linear-gradient(transparent,rgba(220,202,237,.12) 9% 91%,transparent);
  pointer-events:none;
}
.uw-law-list{gap:0;border-top:1px solid rgba(218,204,234,.09);}
.uw-law{
  min-height:58px;border:0!important;border-bottom:1px solid rgba(218,204,234,.085)!important;
  border-radius:0!important;background:none!important;padding:.8rem .9rem .8rem 1.2rem;
  box-shadow:none!important;
}
.uw-law::before{
  content:"";width:6px;height:6px;flex:0 0 auto;border:1px solid rgba(229,214,238,.28);
  rotate:45deg;
}
.uw-drift-card{
  border-style:dashed;background:
    repeating-linear-gradient(0deg,transparent 0 29px,rgba(180,196,233,.035) 30px),
    linear-gradient(145deg,rgba(35,43,75,.4),rgba(10,12,29,.56));
}
.uw-end-card{min-height:72px;border-left:0;border-right:0;border-radius:0;}

/* All endings must survive short landscapes, browser bars, translated copy,
   and enlarged text. The optical frame follows the scrolling content. */
#wakingEnd,#subEnd,#companionEnd,#escapeEnd,#uwEndOverlay{
  box-sizing:border-box;overscroll-behavior:contain;
  padding:
    max(2rem,env(safe-area-inset-top))
    max(1.1rem,env(safe-area-inset-right))
    max(2rem,env(safe-area-inset-bottom))
    max(1.1rem,env(safe-area-inset-left));
}
#wakingEnd.show,#subEnd.show,#companionEnd.show,#escapeEnd.show,#uwEndOverlay.show{
  overflow-y:auto;overflow-x:hidden;justify-content:flex-start;justify-content:safe center;
}
#wakingEnd>* ,#subEnd>* ,#companionEnd>*{
  flex:0 0 auto;
}
#wakingEnd .end-acts,#subEnd .end-acts,#companionEnd .end-acts,
#escapeEnd .end-acts,#uwEndOverlay .end-acts{
  margin-bottom:max(.5rem,env(safe-area-inset-bottom));
}
#escapeEnd .escape-end-phase{
  width:min(760px,100%);min-height:min(560px,calc(100dvh - 4rem));
  box-sizing:border-box;margin:auto;
}
#uwEndOverlay .uwe-inner{
  width:min(780px,100%);margin:auto;padding-block:1rem;
}
#uwEndBody{overflow-wrap:anywhere;}

/* Quiet Dream keeps the compositions but removes extra optical finishing. */
body.gfx-low .bonus-meta::after,body.gfx-low .nightmare-meta::after,
body.gfx-low .rooms-meta::after,body.gfx-low .deep-meta::after,
body.gfx-low .dreamwild-meta::after{opacity:.34;}
body.gfx-low .lake-wrap,body.gfx-low .hall-stage,body.gfx-low .sub-stage,
body.gfx-low .key-trial{box-shadow:inset 0 0 0 1px rgba(255,255,255,.035);}
body.dream-paused .uw-environment *,body.dream-paused .wild-stage *,
body.dream-paused .meadow-stage *{animation-play-state:paused!important;}

@media(max-width:980px){
  #nightmarePortals{grid-template-columns:repeat(2,minmax(0,1fr));}
  #roomsPortals{grid-template-columns:repeat(2,minmax(0,1fr));}
  .wild-garden-gate,.wild-meadow-gate{width:min(520px,90%);display:flex;margin:.4rem auto;}
}

@media(max-width:680px){
  .screen-head::before{display:none!important;}
  .screen-head{z-index:7;background:linear-gradient(180deg,rgba(8,9,23,.68),rgba(8,9,23,.22) 70%,transparent);}
  .screen-head .screen-title{position:relative;z-index:2;}
  .screen-sub{max-width:100%;overflow-wrap:anywhere;}
  .bonus-meta,.nightmare-meta,.rooms-meta,.deep-meta,.dreamwild-meta{
    padding:3.2rem 0 2rem;
  }
  .bonus-meta::after,.nightmare-meta::after,.rooms-meta::after,.deep-meta::after,.dreamwild-meta::after{
    inset:0 -1rem;border-radius:0;
  }
  .bonus-section-title,.nightmare-section-title,.rooms-section-title,
  .deep-section-title,.dreamwild-section-title{font-size:clamp(1.75rem,8vw,2.45rem);}
  #bonusPortals,#nightmarePortals,#roomsPortals,#deepPortals{
    grid-template-columns:1fr;
  }
  #unwrittenPortals .portal,#customPortals .portal,#marketPortals .portal,
  #seasonPortals .portal,#dreamwildPortal .portal{min-height:275px;}
  .wild-map,.uw-region-nav{
    display:flex;justify-content:flex-start;overflow-x:auto;scroll-snap-type:x proximity;
    scrollbar-width:thin;scroll-padding-inline:.5rem;padding-bottom:.25rem;
  }
  .wild-map-node{flex:0 0 min(76vw,270px);scroll-snap-align:start;border-radius:3px!important;}
  .uw-region-btn{flex:0 0 auto;min-width:112px;scroll-snap-align:start;border-radius:3px!important;}
  .wild-garden-gate,.wild-meadow-gate{width:100%;max-width:100%;}
  .wild-stage,.meadow-stage{width:100vw;margin-left:calc(50% - 50vw);}
  .uw-drifts,.uw-laws,.uw-endings{width:100%;padding:1.1rem .9rem;}
  .uw-drifts::before,.uw-laws::before,.uw-endings::before{left:9px;}
  .uw-law{align-items:flex-start;padding:.85rem .45rem .85rem .7rem;}
  .lake-wrap,.hall-stage,.sub-stage,.key-trial{
    width:100vw!important;margin-left:calc(50% - 50vw)!important;border-left:0!important;border-right:0!important;border-radius:0!important;
  }
  .key-actions>* ,.end-acts>*{width:100%;}
}

@media(max-width:390px){
  .bonus-section-title::after,.nightmare-section-title::after,.rooms-section-title::after,
  .deep-section-title::after,.dreamwild-section-title::after{letter-spacing:.22em;}
  .wild-map-node{flex-basis:82vw;}
  .uw-region-btn{min-width:102px;padding-inline:.65rem;}
  .uw-law .uwl-text{font-size:.92rem;}
}

@media(max-height:560px) and (orientation:landscape){
  #wakingEnd,#subEnd,#companionEnd,#escapeEnd,#uwEndOverlay{align-items:center;padding-block:1rem;}
  #wakingEnd h2,#subEnd h2,#companionEnd h2{font-size:3rem;line-height:.85;}
  #wakingEnd::before,#subEnd::before,#companionEnd::before{display:none;}
  .wild-stage,.meadow-stage,.uw-scene{min-height:410px;height:410px;}
}

@media(prefers-reduced-motion:reduce){
  .wild-map,.uw-region-nav{scroll-behavior:auto;}
  .lake-wrap,.hall-stage,.sub-stage,.key-trial{transition:none!important;}
}