/* v0.9 Classroom layout: keep the scene and controls on one desktop viewport. */
.reset-lesson{padding:5px 9px;color:#e8d9bf;background:#27324e;border:1px solid #5f6e86;border-radius:7px;font-size:11px}
.world-state-bar{margin-top:7px;padding:5px 9px;border:1px solid #6f8d93aa;border-radius:7px;background:#1e3443;color:#d4f5e8;font-size:clamp(10px,.9vw,12px);font-weight:650;line-height:1.28;white-space:normal}
.story-copy{padding-bottom:7px!important}
.story-copy h2{margin-top:4px!important;margin-bottom:3px!important}
.story-copy .quest-line{margin-top:5px!important}
.rune-bank .rune-card,.spell-slots .rune-card{touch-action:manipulation}
/* Preserve proportions: all sprites retain intrinsic aspect ratios; only position is animated. */
.character-sprites .sprite{object-fit:contain!important}
.character-sprites .sprite-lantern{transition:left .7s ease,top .7s ease,filter .6s ease;}
.world[data-held="true"] .character-sprites .sprite-lantern{left:51%;top:57%;height:24%!important}
.world[data-lit="true"] .character-sprites .sprite-lantern{filter:brightness(1.5) drop-shadow(0 0 12px #ffda73)}
.world[data-lit="true"] #lightbeams{opacity:1;animation:glimmer 2.3s ease-in-out infinite alternate}
.world[data-bridge-ready="true"] #bridgeRunes{opacity:1;animation:bridgeDraw 3s linear infinite}
.world[data-bridge-ready="true"] .bridge-layer{opacity:.38;filter:blur(8px) brightness(1.7)}
.world[data-crossed="true"] .character-sprites .sprite-abby{animation:catCrossBridge 1.5s ease-out forwards}
.world[data-gate-open="true"] .portal-shutter.left{transform:translateX(-108%)}
.world[data-gate-open="true"] .portal-shutter.right{transform:translateX(108%)}
.world[data-gate-open="true"] .portal-bloom{opacity:.96;filter:blur(6px)}
.world[data-gate-open="true"] #fireworkVectors{opacity:.8;animation:vectorFirework 3s ease-in-out infinite}
.world[data-moon-lit="true"] .moon-layer{opacity:.35;animation:moonPulse 2.6s ease-in-out infinite alternate}
.world[data-water="true"] .water-layer{opacity:.7;animation:waterShimmer 1.9s ease-in-out infinite alternate}
.world[data-flower="true"] .foliage-layer{filter:brightness(1.3) drop-shadow(0 0 7px #f9c5dd)}
/* Future story-state flags override the old, one-shot animation routing. */
.world[data-effect="none"] .portal-bloom{transition:opacity .6s}
/* No motion is imposed on learners who select reduced motion. */
body.reduce-motion .world *,body.reduce-motion .world *::before,body.reduce-motion .world *::after{animation:none!important;transition:none!important}
body.reduce-motion .world[data-crossed="true"] .character-sprites .sprite-abby{transform:translateX(65%)}
body.reduce-motion .world[data-lit="true"] #lightbeams,body.reduce-motion .world[data-bridge-ready="true"] #bridgeRunes{opacity:1}
body.reduce-motion .world[data-gate-open="true"] .portal-shutter.left{transform:translateX(-108%)}
body.reduce-motion .world[data-gate-open="true"] .portal-shutter.right{transform:translateX(108%)}
@media (prefers-reduced-motion:reduce){.world *, .world *::before,.world *::after{animation:none!important;transition:none!important}.world[data-crossed="true"] .character-sprites .sprite-abby{transform:translateX(65%)}}
/* Desktop 720px height fit: reclaim space from story text. */
@media(min-width:1101px) and (max-height:750px){
 .story-copy{padding-top:5px!important}
 .world-state-bar{font-size:10px;margin-top:3px;padding:3px 7px}
 .story-copy h2{font-size:21px!important}
 .story-copy>p:not(.quest-line){font-size:11px!important}
 .story-copy .quest-line{padding:5px 8px!important}
 .app{gap:5px!important}
 .game-shell{gap:7px!important}
}
@media(max-width:1100px){
 .world-state-bar{font-size:11px}
 .reset-lesson{margin-left:auto}
}
.creative-shortcut{width:100%;margin-top:5px;padding:7px 9px}
.creative-shortcut[hidden]{display:none}
/* The cat actually reaches the far bank, rather than hopping in place. */
@keyframes catCrossBridge{
  0%{transform:translate(0,0) rotate(0)}
  32%{transform:translate(85%,-42%) rotate(-7deg)}
  66%{transform:translate(160%,-50%) rotate(4deg)}
  100%{transform:translate(220%,0) rotate(0)}
}
body.reduce-motion .world[data-crossed="true"] .character-sprites .sprite-abby{transform:translateX(220%)}
@media (prefers-reduced-motion:reduce){.world[data-crossed="true"] .character-sprites .sprite-abby{transform:translateX(220%)}}

/* v0.9.3: Creative Magic is a goal-based small deck, not a hidden-answer puzzle. */
.rune-column{position:relative}
.palette-navigation{justify-content:flex-start;gap:5px;flex-wrap:wrap}
.palette-navigation .creative-goal-label{flex:1 1 180px;min-width:0;gap:5px}
.palette-navigation .creative-goal-label select{flex:1;min-width:0;max-width:100%;width:100%;font-weight:650}
.palette-navigation .palette-filter-label{flex:1 1 140px;min-width:0}
.palette-navigation .palette-filter-label select{min-width:0;max-width:100%;width:100%}
.palette-navigation .palette-filter-label[hidden],
.palette-navigation [hidden]{display:none!important}
.teacher-example{padding:6px 8px;border:1px solid #a1c8ba;border-radius:7px;background:#1c3741;color:#c3f4df;font-size:10px;font-weight:700;white-space:nowrap}
.teacher-example:hover{filter:brightness(1.18)}
.teacher-example-text{position:absolute;z-index:35;top:116px;left:10px;right:10px;max-width:600px;background:#223954;border:1px solid #b9ddc7;border-radius:10px;padding:12px 13px;color:#f4e8c8;box-shadow:0 10px 30px #000b;line-height:1.55;font-size:12px;white-space:normal;overflow-wrap:anywhere}
.teacher-example-text[hidden]{display:none!important}
.free-mode .instructions{font-size:11px}
.free-mode .rune-bank .rune-card{border-color:#c8a66a}
@media(min-width:1101px) and (max-height:780px){
 .free-mode .palette-navigation{margin:0 0 3px;gap:4px}
 .free-mode .palette-navigation select{padding:3px 5px;font-size:10px}
 .free-mode .teacher-example{padding:4px 6px;font-size:9px}
 .free-mode .instructions{margin-bottom:4px}
}
@media(max-width:1100px){
 .teacher-example-text{top:125px;bottom:auto;position:absolute}
 .palette-navigation .creative-goal-label select{max-width:100%}
}

/* ────────────────────────────────────────────────────────────────────────
   v0.9.4 — spell-directed panorama / environmental animation studio.
   Eight matching panoramic grades derive from the same original garden art.
   Background images only use object-fit:cover; papercut sprites stay proportionate.
   These effects are visual consequences, never new grammar requirements.
   ──────────────────────────────────────────────────────────────────────── */
.scene-backdrop img{
  transition:filter .85s ease, opacity .65s ease;
  object-fit:cover!important;object-position:center 48%;
}
.scene-atmosphere{
  position:absolute;inset:0;pointer-events:none;z-index:4;overflow:hidden;isolation:isolate;
}
.scene-atmosphere>span{position:absolute;display:block;pointer-events:none}
.moon-aura{
  width:34%;height:105%;top:-46%;left:9%;opacity:0;
  background:radial-gradient(ellipse,rgba(236,248,255,.4) 0%,rgba(134,192,255,.24) 20%,rgba(80,122,255,.09) 50%,transparent 73%);
  mix-blend-mode:screen;transition:opacity .8s;
}
.lantern-aura{
  left:43%;top:38%;height:80%;width:29%;opacity:0;
  background:radial-gradient(ellipse,rgba(255,241,175,.37),rgba(255,178,55,.17) 38%,transparent 72%);
  mix-blend-mode:screen;transition:opacity .7s;
}
.river-trails{
  left:0;right:0;bottom:0;height:34%;opacity:0;
  background:repeating-linear-gradient(172deg,transparent 0 15px,rgba(125,240,249,.0) 16px,rgba(148,239,255,.33) 18px,transparent 21px 37px),
  linear-gradient(180deg,transparent,rgba(39,161,212,.15));
  -webkit-mask-image:linear-gradient(to bottom,transparent,black 40%,black 100%);
  mask-image:linear-gradient(to bottom,transparent,black 40%,black 100%);
  transition:opacity .6s;
  mix-blend-mode:screen;
}
.bloom-field{left:4%;bottom:-10%;width:78%;height:73%;opacity:0;
  background:radial-gradient(ellipse at 21% 81%,rgba(255,149,222,.34),transparent 34%),
  radial-gradient(ellipse at 67% 81%,rgba(228,149,252,.28),transparent 39%);
  mix-blend-mode:screen;transition:opacity .6s;
}
.gate-aura{right:3%;top:-25%;width:39%;height:145%;opacity:0;
  background:radial-gradient(ellipse,rgba(185,242,253,.28),rgba(191,133,249,.2) 42%,transparent 77%);
  mix-blend-mode:screen;transition:opacity .6s;
}
.sky-ribbon{left:8%;top:-12%;width:75%;height:75%;opacity:0;
  background:linear-gradient(122deg,transparent 30%,rgba(112,202,255,.09) 46%,rgba(199,163,255,.17) 50%,transparent 66%);
  filter:blur(11px);transform:rotate(-8deg);transition:opacity .8s;
}
.magic-flower{width:clamp(17px,2.5vw,43px);height:clamp(17px,2.5vw,43px);
  background:url('assets/banners/magic-blossom.png') center/contain no-repeat;
  opacity:0;transform:scale(.4) rotate(-20deg);filter:drop-shadow(0 0 5px #f7b7ef);
  transition:opacity .55s,transform .55s;
}
.flower-a{left:10%;bottom:12%}.flower-b{left:18%;bottom:24%}.flower-c{left:28%;bottom:7%}
.flower-d{left:39%;bottom:22%}.flower-e{left:47%;bottom:12%}.flower-f{left:65%;bottom:9%}
.hand-flower{position:absolute;z-index:6;left:59%;top:65%;width:clamp(15px,1.75vw,31px);height:clamp(15px,1.75vw,31px);
  background:url('assets/banners/magic-blossom.png') center/contain no-repeat;
  filter:drop-shadow(0 0 4px #f7eaa1);pointer-events:none;opacity:0;transform:scale(.5);transition:opacity .4s,transform .5s;
}
/* Preview the destination even before a student casts the spell. */
.world[data-scene="moon"] .moon-aura,.world[data-scene="duet"] .moon-aura{opacity:.5}
.world[data-scene="river"] .river-trails,.world[data-scene="duet"] .river-trails{opacity:.3}
.world[data-scene="flowers"] .bloom-field{opacity:.55}
.world[data-scene="flowers"] .magic-flower{opacity:.65;transform:scale(.74) rotate(0deg)}
.world[data-scene="lantern"] .lantern-aura{opacity:.4}
.world[data-scene="gate"] .gate-aura{opacity:.45}
.world[data-scene="moon"] .sky-ribbon,.world[data-scene="duet"] .sky-ribbon{opacity:.53}
/* Persistent cause-and-effect intensifies the matching visuals. */
.world[data-lit="true"] .lantern-aura{opacity:1;animation:srLightBreathe 2.6s ease-in-out infinite alternate}
.world[data-moon-lit="true"] .moon-aura{opacity:1;animation:srMoonBreathe 3.8s ease-in-out infinite alternate}
.world[data-water="true"] .river-trails{opacity:.85;animation:srRiverFlow var(--river-speed,3.5s) linear infinite}
.world[data-water="true"][data-water-manner="softly"]{--river-speed:4.5s}
.world[data-water="true"][data-water-manner="slowly"]{--river-speed:8.5s}
.world[data-water="true"][data-water-manner="normal"]{--river-speed:3.5s}
.world[data-flower-glowing="true"] .bloom-field{opacity:1;animation:srLightBreathe 3.5s ease-in-out infinite alternate}
.world[data-flower-glowing="true"] .magic-flower{opacity:1;transform:scale(1);animation:srFlowerPulse 3.2s ease-in-out infinite alternate}
.world[data-flower-glowing="true"] .flower-b,.world[data-flower-glowing="true"] .flower-d,.world[data-flower-glowing="true"] .flower-f{animation-delay:-1.6s}
.world[data-flower-carried="true"] .hand-flower{opacity:1;transform:scale(1)}
.world[data-gate-open="true"] .gate-aura{opacity:1;animation:srLightBreathe 2.6s ease-in-out infinite alternate}
.world[data-bridge-ready="true"] .sky-ribbon{opacity:.35;}
@keyframes srLightBreathe{to{opacity:.62;filter:brightness(1.16)}}
@keyframes srMoonBreathe{to{opacity:.63;transform:scale(1.13)}}
@keyframes srRiverFlow{to{background-position:115px 9px,0 0;transform:translateX(1.5%)}}
@keyframes srFlowerPulse{50%{filter:drop-shadow(0 0 11px #ffe5ed) brightness(1.35);transform:scale(1.14) rotate(7deg)}}
/* A review / stored-world state is always readable without motion. */
body.reduce-motion .scene-atmosphere *,body.reduce-motion .hand-flower,
body.reduce-motion .scene-backdrop img{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){
 .scene-atmosphere *, .hand-flower,.scene-backdrop img{animation:none!important;transition:none!important}
}

/* ─── v0.9.5: purpose-designed scenery, preserving the v0.9.4 fallback set ─── */
.world[data-scene="river"] .landscape-sprites,
.world[data-scene="flowers"] .landscape-sprites,
.world[data-scene="moon"] .landscape-sprites,
.world[data-scene="duet"] .landscape-sprites,
.world[data-scene="gate"] .landscape-sprites{display:none}
/* The new environment paintings already contain their own moon, water, foliage, and architecture. */
.world[data-scene="river"]>.foliage-layer,.world[data-scene="flowers"]>.foliage-layer,
.world[data-scene="moon"]>.foliage-layer,.world[data-scene="duet"]>.foliage-layer,
.world[data-scene="gate"]>.foliage-layer{display:none}
.world[data-scene="river"] .river-trails,
.world[data-scene="duet"] .river-trails{bottom:2%;height:39%}
.world[data-scene="moon"] .moon-aura,.world[data-scene="duet"] .moon-aura{left:35%;top:-35%;width:36%;height:130%}
.world[data-scene="flowers"] .bloom-field{left:12%;width:80%;height:85%}
.world[data-scene="gate"] .gate-aura{left:61%;right:auto;top:-33%;width:45%;height:162%}
.world[data-scene="river"] .scene-backdrop img,
.world[data-scene="flowers"] .scene-backdrop img,
.world[data-scene="moon"] .scene-backdrop img,
.world[data-scene="duet"] .scene-backdrop img,
.world[data-scene="gate"] .scene-backdrop img{object-position:center center!important}
/* The original intact closed gate is shown until the successful opening spell.
   The purpose-designed panorama reveals the portal on success; fireworks remain SVG. */
.world[data-scene="gate"][data-gate-open="true"] .gate-aura{opacity:1;animation:gateWaken 2.1s ease-in-out alternate infinite}
@keyframes gateWaken{0%{filter:brightness(1);opacity:.65}100%{filter:brightness(1.4);opacity:1}}
body.reduce-motion .world[data-scene="gate"] .gate-aura{animation:none!important}


/* v0.9.6: ONE four-world panorama, moving right-to-left as the story advances. */
.scene-backdrop{position:absolute;inset:0;overflow:hidden;}
.scene-backdrop .journey-strip{
 position:absolute;left:0;top:0;width:400%;height:100%;max-width:none;
 object-fit:cover;object-position:center center;
 transform:translate3d(var(--journey-offset,0%),0,0)!important;
 transition:transform 1850ms cubic-bezier(.2,.7,.2,1),filter .65s ease!important;
 will-change:transform;filter:brightness(.79) saturate(.96);
}
/* No duplicate architecture or moons; the single journey illustration contains them. */
.world .landscape-sprites,.world>.foliage-layer{display:none!important}
/* A subtle walking bob makes the travel beat more apparent without changing the artwork. */
.world[data-traveling="true"] .character-sprites{animation:worldTravelBop .65s ease-in-out infinite alternate}
@keyframes worldTravelBop{to{transform:translateY(-4px)}}
.journey-status{display:flex;align-items:center;gap:12px;min-width:0}
.journey-map{display:inline-flex;align-items:center;gap:7px;flex:none}
.journey-map i{width:14px;height:5px;border-radius:4px;background:#404d6c;border:1px solid #67708f;transition:background .4s,box-shadow .4s}
.journey-map i.active{background:#edc58b;box-shadow:0 0 8px #e6ce98;border-color:#e5c68e}
/* Gate magic still relies on the existing portal and SVG effects. */
.world[data-journey-stop="3"][data-gate-open="false"] .journey-strip{filter:brightness(.62) saturate(.68)}
.world[data-journey-stop="3"][data-gate-open="true"] .journey-strip{filter:brightness(.96) saturate(1.15)}
/* The flower/river/moon effects follow scene and world state as before. */
body.reduce-motion .scene-backdrop .journey-strip,
body.reduce-motion .world[data-traveling="true"] .character-sprites{transition:none!important;animation:none!important}
@media(prefers-reduced-motion:reduce){
 .scene-backdrop .journey-strip{transition:none!important}
 .world[data-traveling="true"] .character-sprites{animation:none!important}
}
@media(max-width:720px){
 /* A small phone is too narrow to show 1/4 of a 7680px-wide illustration legibly.
    Use the retained individual environment frame at the correct natural proportions. */
 .scene-backdrop .journey-strip{display:none}
 .scene-backdrop .mobile-scene{display:block!important}
 .journey-status{gap:6px}.journey-map{gap:4px}.journey-map i{width:10px}
}

/* Mobile fallback uses an actual image element, avoiding CSS URL quoting issues. */
.scene-backdrop .mobile-scene{display:none}

/* v0.9.7 • ONE UNINTERRUPTED PAINTING — no seams, no distortion.
   The camera samples four overlapping views from the same image. The painting
   is deliberately larger than the stage, so its original pixel proportions remain intact. */
.scene-backdrop .journey-strip{
 width:235%!important;height:auto!important;
 left:0!important;top:50%!important;max-width:none!important;
 object-fit:contain!important;object-position:center!important;
 transform:translate3d(var(--camera-x,0%),-50%,0)!important;
 transition:transform 1950ms cubic-bezier(.22,.72,.25,1),filter .7s ease!important;
 filter:brightness(.77) saturate(.98);
}
/* Camera's end range is width(2.35x) - viewport(1x) = 1.35x.
   --journey-offset runs 0..-100%; multiplied by .545 = -57.45% of 2.35x width.
   The last stage thus reaches approximately the far-right of the same painting. */
.parallax-stars{
 position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.40;
 background-image:radial-gradient(circle,#fff9da 1px,transparent 2px),radial-gradient(circle,#d7e9ff 1px,transparent 2px);
 background-size:97px 61px,153px 79px;background-position:13px 6px,55px 27px;
 transform:translateX(calc(-8px * var(--parallax-step,0)));
 transition:transform 1950ms cubic-bezier(.22,.72,.25,1);
 mask-image:linear-gradient(to bottom,#000 5%,transparent 63%);
}
.parallax-near{
 position:absolute;inset:0;pointer-events:none;z-index:4;opacity:.38;overflow:hidden;
 transform:translateX(calc(8px * var(--parallax-step,0)));
 transition:transform 1950ms cubic-bezier(.22,.72,.25,1);
}
.parallax-near img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;filter:brightness(.82) saturate(.75);}
/* Visually preserve the special-effect layers; runes and semantic state unchanged. */
.world[data-journey-stop="3"][data-gate-open="false"] .journey-strip{filter:brightness(.70) saturate(.9)}
.world[data-journey-stop="3"][data-gate-open="true"] .journey-strip{filter:brightness(1) saturate(1.13)}
body.reduce-motion .parallax-stars,body.reduce-motion .parallax-near,body.reduce-motion .scene-backdrop .journey-strip{transition:none!important;animation:none!important}
@media(prefers-reduced-motion:reduce){.parallax-stars,.parallax-near,.scene-backdrop .journey-strip{transition:none!important;animation:none!important}}
@media(max-width:720px){
 .parallax-stars{opacity:.22}
 .parallax-near{opacity:.22}
 .parallax-near img{object-fit:cover}
}

/* v0.9.7 visual-QA refinement: preserve legibility and restore the Moonlit Lake cue. */
.parallax-near{opacity:.16!important}
.parallax-near img{object-fit:cover!important}
.parallax-moon{
 position:absolute;left:72%;top:3%;height:67%;width:auto;max-width:150px;
 z-index:2;opacity:0;pointer-events:none;filter:brightness(.85);
 transition:opacity .65s ease,transform 1950ms cubic-bezier(.22,.72,.25,1);
 transform:translateX(calc(-5px * var(--parallax-step,0)));
}
.world[data-journey-stop="2"] .parallax-moon{opacity:.9}
.world[data-journey-stop="2"][data-moon-lit="true"] .parallax-moon{opacity:1;filter:brightness(1.3) drop-shadow(0 0 10px #d0e8ff)}
body.reduce-motion .parallax-moon{transition:none!important;animation:none!important}
@media(prefers-reduced-motion:reduce){.parallax-moon{transition:none!important;animation:none!important}}
@media(max-width:720px){.parallax-moon{height:38%;left:73%}}

/* v0.9.8: Expanded landscape view. Remove yellow-boxed narrative/status region
   and bottom decorative footer, but retain all original data hooks and goals. */
.app{grid-template-rows:auto auto minmax(0,1fr)!important;}
.story-copy,.footer{display:none!important;}
.story-panel{grid-template-rows:28px minmax(0,1fr)!important;}
.scene-topline{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.1fr) minmax(0,1fr);gap:12px;align-items:center;}
.scene-mission{min-width:0;display:flex;align-items:center;justify-content:center;gap:8px;color:#f9e8c6;font-size:clamp(10px,.88vw,12px);line-height:1.2;text-align:center;}
.scene-mission-label{color:#a6dacd;font-size:9px;letter-spacing:.09em;font-weight:800;white-space:nowrap;}
.scene-mission strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:650;}
.scene-topline .journey-status{justify-self:end;}
@media(min-width:1101px){
 .game-shell{grid-template-rows:minmax(0,1fr) minmax(0,1fr)!important;}
}
@media(max-width:1100px){
 .app{grid-template-rows:auto auto auto!important;}
 .story-panel{grid-template-rows:28px minmax(0,1fr)!important;}
 .scene-topline{grid-template-columns:auto minmax(0,1fr) auto;gap:5px;padding:0 7px;}
 .scene-mission-label{display:none;}
 .scene-mission{font-size:10px;}
}
@media(max-width:580px){
 .scene-topline{grid-template-columns:minmax(0,.9fr) minmax(0,1.7fr);}
 .scene-topline .journey-status{display:none;}
 .scene-tag{font-size:8px;}
}

/* Phone: allow the small scene header to wrap without covering the artwork. */
@media(max-width:580px){
 .story-panel{grid-template-rows:36px minmax(0,1fr)!important;}
 .scene-topline{height:36px;align-items:center;}
 .scene-tag{max-width:115px;line-height:1.15;}
 .scene-mission strong{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;}
}

/* v0.9.9 — world reconstruction. All world-space objects use one 4000-unit map. */
.scene-backdrop{z-index:2!important;isolation:isolate}
.scene-backdrop .world-plane{
 position:absolute;top:0;left:0;width:400%;height:100%;overflow:visible;
 transform:translate3d(calc(-25% * var(--world-stop,0)),0,0);
 transition:transform 1900ms cubic-bezier(.22,.72,.25,1)!important;
 will-change:transform;
}
.scene-backdrop .world-plane .world-backdrop{
 position:absolute;inset:0;display:block;width:100%!important;height:100%!important;
 max-width:none!important;object-fit:cover!important;object-position:center center!important;
 transform:none!important;transition:filter .65s ease!important;
 filter:brightness(.88) saturate(1.03)!important;
}
.scene-backdrop .mobile-scene{display:none!important}
.world-landmark,.world-actor{position:absolute;pointer-events:none;user-select:none;transform-origin:center bottom}
.world-landmark img,.world-actor{object-fit:contain!important;max-width:none!important;transform:none}
.world-bridge{left:62.2%;top:22%;height:78%;width:auto;aspect-ratio:1.51;z-index:2;filter:brightness(.78) drop-shadow(0 7px 4px #061329aa)}
.world-bridge>img{display:block;width:100%;height:100%;object-fit:contain!important}
.world-bridge-runes{position:absolute;left:10%;top:24%;width:80%;height:45%;opacity:0;filter:drop-shadow(0 0 8px #91ffe7);transition:opacity .7s ease}
.world[data-bridge-ready="true"] .world-bridge{filter:brightness(1.12) drop-shadow(0 0 8px #66e6cb66)}
.world[data-bridge-ready="true"] .world-bridge-runes{opacity:1;animation:bridgeDraw 4s linear infinite}
.world-moon{left:61.3%;top:4%;height:36%;aspect-ratio:1;z-index:3;opacity:0;transition:opacity .7s}
.world-moon img{height:100%;width:100%;object-fit:contain!important}
.world[data-camera-stop="2"] .world-moon{opacity:.65}
.world[data-moon-lit="true"] .world-moon{opacity:1;filter:brightness(1.35) drop-shadow(0 0 18px #cce4fa)}
.world-river-shimmer{left:1%;bottom:0;top:auto;width:24%;height:35%;z-index:2;opacity:0;background:repeating-linear-gradient(177deg,transparent 0 17px,#a5effc55 19px,transparent 23px 32px);mix-blend-mode:screen;filter:blur(2px)}
.world[data-water-flowing="true"] .world-river-shimmer{opacity:.85;animation:v099River var(--river-speed,4s) linear infinite}
.world[data-water-manner="slowly"]{--river-speed:9s}.world[data-water-manner="softly"]{--river-speed:5s}
@keyframes v099River{to{background-position:0 90px}}
.world-flower-glow{left:27%;top:30%;width:23%;height:65%;z-index:2;opacity:0;background:radial-gradient(ellipse,#ffb8e055 0%,transparent 65%);mix-blend-mode:screen}
.world[data-flower-glowing="true"] .world-flower-glow{opacity:1;animation:srFlowerPulse 3s ease-in-out infinite alternate}
/* Gate is one object: visible CLOSED doors, independent of the painted backdrop. */
.world-gate{left:89.6%;top:4%;height:92%;aspect-ratio:358/449;z-index:3;filter:drop-shadow(0 7px 6px #07112899)}
.world-gate-frame,.world-gate-leaf{position:absolute;inset:0;width:100%!important;height:100%!important;max-width:none!important;object-fit:contain!important}
.world-gate-frame{z-index:3}
.world-gate-leaf{z-index:2;transition:transform 1350ms cubic-bezier(.22,.72,.25,1)}
.world-gate-leaf.left{transform-origin:40% 50%}
.world-gate-leaf.right{transform-origin:60% 50%}
.world-gate-energy{position:absolute;left:26%;top:24%;width:48%;height:58%;border-radius:45% 45% 5% 5%;z-index:1;background:radial-gradient(ellipse,#c3ffff,#7fa4fc 49%,#3b266a 72%,transparent 80%);opacity:.15;transition:opacity 1.1s}
.world-gate-stars{position:absolute;left:15%;right:15%;top:21%;z-index:5;color:#ffe9a5;text-align:center;font-size:19px;opacity:0;pointer-events:none;filter:drop-shadow(0 0 12px #ffdd7e);animation:twinkle 2s ease-in-out infinite alternate}
.world[data-gate-open="true"] .world-gate-leaf.left{transform:translateX(-23%)}
.world[data-gate-open="true"] .world-gate-leaf.right{transform:translateX(23%)}
.world[data-gate-open="true"] .world-gate-energy{opacity:1;box-shadow:0 0 30px #d9f8fcaa}
.world[data-gate-open="true"] .world-gate-stars{opacity:1}
.world-actor{z-index:5;width:auto!important;max-width:none!important;object-fit:contain!important;transition:left 1900ms cubic-bezier(.22,.72,.25,1),top 1900ms cubic-bezier(.22,.72,.25,1)}
.world-mei{height:67%!important;filter:drop-shadow(0 5px 5px #000b)}
.world-abby{height:43%!important;filter:drop-shadow(0 5px 4px #000b)}
.world-luma{height:45%!important;filter:drop-shadow(0 0 9px #ffdfad9c)}
.world-lantern{height:24%!important;filter:drop-shadow(0 0 5px #ffda7199);opacity:.78}
.world[data-lantern-held="true"] .world-lantern{opacity:1}
.world[data-lantern-lit="true"] .world-lantern{filter:brightness(1.35) drop-shadow(0 0 18px #fcd468)}
.world[data-crossed="true"] .world-abby{filter:brightness(1.07) drop-shadow(0 0 8px #fff5b266)}
/* Legacy screen-pinned art is hidden to prevent duplicates and misleading effects. */
.world>.character-sprites,.world>.landscape-sprites,.world>.hand-flower,
.world>.magic-bridge,.world>.magic-lantern,.world>.parallax-moon,.world>.parallax-near{display:none!important}
/* Ambient effects remain screen-wide and purely decorative, not false object positions. */
.world>.scene-atmosphere{z-index:4;opacity:.30}
.world>.magic-fireworks{z-index:8;opacity:0}
.world[data-gate-open="true"]>.magic-fireworks{opacity:.8}
/* World construction has its own closed/open visual states even after changing missions. */
body.reduce-motion .world-plane,body.reduce-motion .world-actor,body.reduce-motion .world-gate-leaf,
body.reduce-motion .world-gate-energy{transition:none!important;animation:none!important}
@media(prefers-reduced-motion:reduce){.world-plane,.world-actor,.world-gate-leaf,.world-gate-energy{transition:none!important;animation:none!important}}
@media(max-width:720px){
 .scene-backdrop .world-plane .world-backdrop{display:none!important}
 .scene-backdrop .mobile-scene{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;filter:brightness(.85)}
 .world-mei{height:56%!important}.world-abby{height:36%!important}.world-luma{height:36%!important}.world-lantern{height:20%!important}
 .world-bridge{height:64%}.world-gate{height:83%}
}
/* Correct legacy !important centering: rebuilt banner fills the visible camera vertically. */
.scene-backdrop .world-plane .world-backdrop{top:0!important;left:0!important;right:0!important;bottom:0!important;}
/* Apply the travel transitions after the inherited .scene-backdrop img styles. */
.scene-backdrop .world-plane .world-actor{
  transform:none!important;
  transition:left 1900ms cubic-bezier(.22,.72,.25,1),top 1900ms cubic-bezier(.22,.72,.25,1)!important;
}
.scene-backdrop .world-plane .world-gate-leaf{
  transition:transform 1350ms cubic-bezier(.22,.72,.25,1)!important;
}
body.reduce-motion .scene-backdrop .world-plane .world-actor,
body.reduce-motion .scene-backdrop .world-plane .world-gate-leaf{transition:none!important}
@media(prefers-reduced-motion:reduce){.scene-backdrop .world-plane .world-actor,.scene-backdrop .world-plane .world-gate-leaf{transition:none!important}}

/* No misleading actor slide-in when the lesson first loads. */
.world.world-initializing .world-plane,.world.world-initializing .world-actor{transition:none!important}