#ending-dialog { width:min(1120px,96vw); max-width:96vw; max-height:96dvh; padding:0; overflow:auto; }
.ending-scene { display:grid; position:relative; isolation:isolate; overflow:hidden; }
.ending-landscape { grid-area:1 / 1; display:block; width:100%; aspect-ratio:3/2; max-height:calc(96dvh - 260px); min-height:240px; object-fit:cover; object-position:50% 100%; image-rendering:pixelated; }
.ending-stage { grid-area:1 / 1; position:relative; min-height:0; pointer-events:none; }
.ending-actor { position:absolute; bottom:8%; left:35%; width:14%; max-width:156px; filter:drop-shadow(0 6px 3px #24231880); }
.ending-actor[data-facing="left"] .ending-facing { transform:scaleX(-1); }
.ending-actor .animal-portrait { width:100%; height:auto; }
.ending-actor.guest { left:58%; opacity:0; }
.ending-actor.second { left:68%; }
.ending-caption { grid-area:2 / 1; position:relative; padding:18px 30px; text-align:center; }
.ending-caption h2 { font-family:var(--font-ui); font-size:var(--font-size-24); margin:7px 0; }
.ending-caption p { color:var(--skin-ink); line-height:1.8; margin:8px auto; max-width:780px; font-size:var(--font-size-14); }
.ending-caption small,.ending-caption span { font-size:var(--font-size-12); }
.ending-caption span { color:var(--skin-ink); }
.ending-controls { display:flex; gap:12px; align-items:center; justify-content:center; padding:12px; flex-wrap:wrap; }
.ending-controls p { margin:0; font-size:var(--font-size-12); }
.ending-controls button { min-height:44px; }
.ending-mist { position:absolute; inset:32% -20% 22%; background:radial-gradient(ellipse,#fff3dc4d,transparent 65%); animation:ending-mist 16s ease-in-out infinite alternate; pointer-events:none; }
.ending-petals { position:absolute; inset:0; pointer-events:none; }
.ending-petals i { position:absolute; left:calc(var(--i)*12%); top:-6%; width:7px; height:5px; background:#f8b8ad; border-radius:60% 0; animation:ending-petal 12s linear infinite; animation-delay:calc(var(--i)*-1.3s); }
.wish-object { position:absolute; display:block; left:48%; bottom:16%; width:9%; height:auto; color:#ffe8a9; opacity:0; text-align:center; filter:drop-shadow(0 0 9px #fbe4a8); }
.ending-prop { display:block; width:100%; aspect-ratio:1; background-image:url("assets/scenes/ending/ending-wish-props.png"); background-size:400% 400%; background-repeat:no-repeat; image-rendering:pixelated; }
.fulfilled .wish-object { opacity:1; animation:ending-appear 2s both; }
.fulfilled .hero { animation:ending-arrive 2s both; }
.fulfilled .guest { opacity:1; animation:ending-reunion 3s both; }
.fulfilled .guest.second { animation-delay:.6s; }
.fulfilled[data-motion="embrace"] .guest { left:49%; }
.fulfilled[data-motion="embrace"] .hero { left:39%; }
.fulfilled .heart { bottom:35%; animation:ending-appear 4s both,ending-float 3s 4s ease-in-out infinite; }
.fulfilled[data-wish="forgiveness"] .hero { animation:ending-bow 3s both; }
.fulfilled .tea-cup { animation:ending-tea 4s both; width:22%; left:40%; bottom:0; }
.wish-object.bell { bottom:12%; width:17%; left:47%; }
.fulfilled .sword { animation:ending-melt 3s both; }
.fulfilled .bell { animation:ending-appear 2s 2s both,ending-bell 2s 4s ease-in-out infinite; transform-origin:50% 0; }
.fulfilled .rings { width:14%; aspect-ratio:1; border:2px solid #ffe1a4; border-radius:50%; bottom:18%; animation:ending-ring 3s 3s infinite; }
.wish-object.gate { left:55%; bottom:2%; width:28%; }
.fulfilled[data-motion="gate"] .hero { animation:ending-freedom 5s both; z-index:1; }
.fulfilled .thread { width:30%; left:10%; height:3px; background:#ac937c; animation:ending-melt 2s both; }
.wish-object.spring { bottom:0; width:24%; left:43%; }
.wish-object.cake { bottom:21%; width:15%; left:48%; }
.fulfilled .cake { animation:ending-appear 3s 1s both; }
.wish-object.memory-name { width:30%; left:37%; bottom:37%; font-size:18px; color:#fff7cf; }
.wish-object.book,.wish-object.map { bottom:12%; width:19%; left:44%; }
.wish-object.light { bottom:34%; width:12%; left:48%; }
.wish-object.notes,.wish-object.pages { width:25%; left:39%; bottom:35%; }
.fulfilled .notes,.fulfilled .pages { animation:ending-appear 2s both,ending-float 4s 2s ease-in-out infinite; }
.wish-object.universe { width:33%; left:36%; bottom:30%; }
.fulfilled .universe { animation:ending-universe 5s both; }
.wish-object.blooms { width:27%; left:43%; bottom:0; transform-origin:bottom; }
.fulfilled .blooms { animation:ending-grow 4s both; }
.fulfilled .seed { width:12%; animation:ending-melt 2s both; }
.wish-object.trail { width:55%; left:22%; bottom:8%; display:flex; justify-content:space-between; }
.fulfilled .trail i { width:12%; height:6px; background:#ffe1a4; animation:ending-appear 3s both; }
.wish-object.stream { width:29%; left:43%; bottom:0; }
.fulfilled .stream { transform-origin:top; animation:ending-grow 3s both; }
.fulfilled[data-motion="tea"] .hero,.fulfilled[data-motion="company"] .hero { left:27%; }
.fulfilled[data-motion="tea"] .guest { left:63%; }
@keyframes ending-arrive { from { transform:translateX(-50px); opacity:0; } to { transform:none; opacity:1; } }
@keyframes ending-reunion { from { transform:translateX(80px); opacity:0; } to { transform:none; opacity:1; } }
@keyframes ending-appear { from { opacity:0; } to { opacity:1; } }
@keyframes ending-melt { 0%,25% { opacity:1; transform:scale(1); } 100% { opacity:0; transform:scale(.1) translateY(30px); } }
@keyframes ending-float { 50% { transform:translateY(-8px); } }
@keyframes ending-bell { 25% { transform:rotate(9deg); } 75% { transform:rotate(-9deg); } }
@keyframes ending-ring { from { opacity:.8; transform:scale(.3); } to { opacity:0; transform:scale(2.4); } }
@keyframes ending-bow { 40% { transform:rotate(18deg) translateY(8px); } }
@keyframes ending-tea { from { opacity:0; transform:translateX(-80px) rotate(-25deg); } to { opacity:1; transform:translateX(22px); } }
@keyframes ending-freedom { from { transform:translateX(0); } to { transform:translateX(160%); } }
@keyframes ending-note { 0% { opacity:0; transform:translateY(20px); } 30% { opacity:1; } 100% { opacity:0; transform:translateY(-40px); } }
@keyframes ending-grow { from { opacity:0; transform:scale(.05); } to { opacity:1; transform:scale(1); } }
@keyframes ending-universe { from { opacity:0; transform:scale(.05) rotate(-40deg); } to { opacity:1; transform:scale(1); } }
@keyframes ending-mist { to { transform:translateX(12%); } }
@keyframes ending-petal { to { transform:translate(80px,650px) rotate(300deg); } }
@media (max-width:600px) {
  .ending-landscape { aspect-ratio:3/4; }
  .ending-actor { width:21%; left:25%; }
  .ending-caption { padding:12px 16px; }
  .ending-caption h2 { font-size:var(--font-size-20); }
  .ending-controls { gap:7px; }
  .wish-object.tea-cup { width:29%; left:37%; }
  .wish-object.blooms,.wish-object.stream { width:34%; }
}
body.reduce-motion #ending-dialog *,body.reduce-motion #ending-dialog *::before { animation:none !important; }
body.reduce-motion .fulfilled :is(.sword,.thread,.seed,.rings) { opacity:0; }
body.reduce-motion .fulfilled[data-motion="gate"] .hero { transform:translateX(160%); }
@media (prefers-reduced-motion:reduce) {
  #ending-dialog *,#ending-dialog *::before { animation:none !important; }
  .fulfilled :is(.sword,.thread,.seed,.rings) { opacity:0; }
  .fulfilled[data-motion="gate"] .hero { transform:translateX(160%); }
}

.ending-text { display:grid; }
.ending-text > span { grid-area:1 / 1; font-size:inherit; }
.ending-text-space { visibility:hidden; }