#garden { position:relative; overflow:hidden; width:100%; aspect-ratio:1672/941; background:#030404; --corruption:0; isolation:isolate; }
#garden-world { position:absolute; inset:0; }
.garden-background { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.garden-background.corrupt { opacity:var(--corruption); }
#garden #player { bottom:16%; width:8%; height:24%; z-index:4; }
#moon { position:absolute; left:28%; top:8%; width:9%; height:16%; min-height:44px; min-width:44px; padding:0; border:0; outline:0; appearance:none; -webkit-appearance:none; -webkit-tap-highlight-color:transparent; background:transparent; border-radius:0; box-shadow:none; z-index:5; cursor:pointer; touch-action:manipulation; }
#moon:hover, #moon:focus, #moon:focus-visible, #moon:active { border:0; outline:0; background:transparent; box-shadow:none; }
.musical-star { position:absolute; width:4px; height:4px; border-radius:50%; background:#fff4cb; box-shadow:0 0 6px 2px #f5dd9c,0 0 16px 6px #f5dd9c55; transform:translate(-50%,-50%); opacity:0; }
.corrupted .musical-star { background:#bc7c70; box-shadow:0 0 7px 2px #9a3c30,0 0 15px 5px #7b211b55; }
#garden-stars { position:absolute; inset:0; pointer-events:none; z-index:2; }
/* The lantern uses the exact pixels of each reference, clipped to its silhouette. */
#garden-lantern { position:absolute; left:20.2%; top:34.5%; width:3.8%; height:11.8%; transform-origin:50% 0; pointer-events:none; z-index:3; clip-path:polygon(50% 0,70% 23%,94% 45%,77% 91%,61% 100%,26% 92%,13% 45%,33% 23%); }
#garden-lantern span { position:absolute; inset:0; background:url('garden-beautiful.webp') 21% 39.1% / 2631.58% 847.46%; }
#garden-lantern .lantern-corrupt { background-image:url('garden-corrupted.webp'); opacity:var(--corruption); }
#garden-lantern.swing { animation:lantern-sway 3s ease-out; }
.corrupted #garden-lantern.swing { animation:lantern-wrong 3s ease-out; }
@keyframes lantern-sway { 0%,100%{transform:rotate(0)} 20%{transform:rotate(3deg)} 45%{transform:rotate(-2deg)} 70%{transform:rotate(1deg)} }
@keyframes lantern-wrong { 0%,100%{transform:rotate(0)} 15%{transform:rotate(-3deg)} 38%{transform:rotate(1deg)} 55%{transform:rotate(-2deg)} }
#moon-warning { position:absolute; left:64%; top:45%; z-index:5; width:14%; min-width:88px; margin:0; padding:0; color:#d8d0c2; background:none; border:0; font-family:'Courier New',monospace; font-size:clamp(12px,1.15vw,15px); line-height:1.35; text-align:center; letter-spacing:.08em; transform:rotate(-3deg) skewX(-2deg); opacity:0; transition:opacity .55s; pointer-events:none; text-shadow:1px 2px #000, -1px 0 #222; box-shadow:none; }
#moon-warning.revealed:not(.touched) { opacity:.92; }
#area-fade { position:absolute; inset:0; z-index:20; pointer-events:none; background:#000; opacity:0; transition:opacity .65s ease; }
#area-fade.black { opacity:1; }
@media(max-width:600px){ #garden { aspect-ratio:1.2; } #garden-world { top:50%; bottom:auto; height:auto; aspect-ratio:1672/941; transform:translateY(-50%); } #garden #player {width:9%;} #moon-warning{left:61%;top:43%;min-width:76px;font-size:11px;letter-spacing:.03em;} }

@media(prefers-reduced-motion:reduce){#garden-lantern.swing{animation:none;} }

#ending-area2 { min-height:390px; display:grid; place-content:center; text-align:center; opacity:0; transition:opacity 1.1s ease; background:radial-gradient(ellipse at 50% 20%,#44444435,transparent 65%); border-top:1px solid var(--line); }
#ending-area2.visible { opacity:1; }
#ending-area2 h2 { margin-bottom:8px; }
#ending-area2 p { margin:8px 0 36px; }

/* A restrained tear in the scene: black depth, burgundy damage and a pale light beyond it. */
#rift { position:absolute; right:2.1%; bottom:15.5%; width:4.8%; height:28%; z-index:3; background:linear-gradient(92deg,#251517 0%,#5b292d 24%,#171112 47%,#663036 69%,#211416 100%); opacity:0; transform:scaleX(.05); transform-origin:center bottom; clip-path:polygon(52% 0,61% 17%,78% 28%,67% 41%,91% 56%,73% 71%,84% 88%,62% 100%,18% 98%,33% 80%,12% 66%,36% 51%,21% 35%,43% 20%); filter:drop-shadow(0 0 1px #e9ece3a3) drop-shadow(0 0 4px #e1e5dc52) drop-shadow(0 0 11px #dde2d420) drop-shadow(0 0 2px #8b444b99) drop-shadow(0 0 7px #38171b66); transition:opacity .8s ease,transform .8s ease; pointer-events:none; }
#rift::before { content:""; position:absolute; inset:clamp(2px,.24vw,4px); background:radial-gradient(ellipse at 48% 48%,#000 0 64%,#070304 82%,#16090b 100%); clip-path:polygon(51% 0,60% 18%,76% 29%,65% 42%,89% 56%,71% 70%,82% 88%,61% 100%,19% 98%,35% 79%,14% 66%,38% 51%,23% 35%,44% 20%); }
#rift::after { content:""; position:absolute; inset:0; background:conic-gradient(from 202deg at 48% 49%,transparent 0 8%,#eef1e99c 10%,transparent 14% 31%,#dfe4da52 34%,transparent 39% 58%,#f0f1e999 61%,transparent 65% 81%,#d9ded45c 84%,transparent 89%),radial-gradient(ellipse at 48% 49%,transparent 0 53%,#e8ece48f 65%,#e1e5dc38 76%,transparent 89%),radial-gradient(ellipse at center,transparent 48%,#8a414855 72%,#b05a6033 83%,transparent 100%); opacity:.48; mix-blend-mode:screen; filter:blur(.25px); animation:rift-edge-flicker 5.8s ease-in-out infinite alternate; }
#rift.revealed { opacity:1; transform:scaleX(1); animation:rift-breath 4.8s ease-in-out infinite alternate; }
@keyframes rift-breath {
 from{transform:scaleX(.96) scaleY(.985) rotate(-.18deg);filter:drop-shadow(0 0 1px #e9ece394) drop-shadow(0 0 4px #e1e5dc48) drop-shadow(0 0 10px #dde2d41a) drop-shadow(0 0 2px #78404788) drop-shadow(0 0 5px #35171a55)}
 to{transform:scaleX(1.035) scaleY(1.015) rotate(.16deg);filter:drop-shadow(0 0 1.5px #f0f2ebad) drop-shadow(0 0 5px #e5e8df5c) drop-shadow(0 0 13px #e1e6d929) drop-shadow(0 0 3px #9a4d5599) drop-shadow(0 0 9px #431b2066)}
}
@keyframes rift-edge-flicker { 0%,18%{opacity:.4} 47%{opacity:.52} 72%{opacity:.44} 100%{opacity:.58} }
.area3-placeholder, .area3-placeholder #ending-area2 { background:#000; }
.area3-placeholder header { display:none; }
.area3-placeholder #ending-area2 { border:0; min-height:65svh; }
.area3-placeholder #ending-area2 h2 { font-size:clamp(24px,4vw,40px);letter-spacing:.15em; }

@media(prefers-reduced-motion:reduce){#rift.revealed,#rift::after{animation:none;}}