/* de-Frog's ending (ending.js; Andrew, 11-07): a full-screen scene over the game, 9:16, scaled to fit. Each moment
   (data-beat, and past-* classes for moments already reached) moves the ship and the alien in SVG user units.
   Reduced motion (.calm): the same positions, no movement. */
body.ending-on{overflow:hidden}
.ending{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:#07060a;color:#eee4cf;
 -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;cursor:pointer;touch-action:manipulation}
.end-frame{position:relative;width:min(100vw,calc(100svh * 9 / 16));aspect-ratio:9/16;overflow:hidden;container-type:inline-size}
.end-scene{display:block;width:100%;height:100%;transition:filter 1.2s}
.ending.past-end .end-scene{filter:brightness(.3) saturate(.6)}
.end-live{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#ending-skip{position:fixed;top:max(12px,env(safe-area-inset-top));right:12px;min-width:64px;min-height:44px;padding:6px 14px;
 font:700 14px/1 system-ui,sans-serif;color:#eee4cf;background:#211b13cc;border:1px solid #79745b;border-radius:12px;cursor:pointer;z-index:2}
#ending-skip:focus-visible{outline:3px solid #c5aa70;outline-offset:2px}
.end-hint{position:fixed;bottom:max(14px,env(safe-area-inset-bottom));left:0;right:0;margin:0;text-align:center;font:600 12px system-ui,sans-serif;color:#b2a88e;opacity:.8}
.ending.past-end .end-hint{opacity:0}

/* Words: the narrator at the top, the alien in a speech bubble above its head, THE END in the middle. */
.end-caption{position:absolute;top:22%;left:8%;right:8%;margin:0;text-align:center;font:italic 600 clamp(14px,6.2cqw,26px)/1.3 system-ui,sans-serif;color:#eee4cf;text-shadow:0 2px 10px #000}
.end-bubble{position:absolute;bottom:62%;left:6%;right:6%;padding:14px 16px;background:#f4efe6;color:#1a1020;border:3px solid #6e4bb8;border-radius:18px;
 font:800 clamp(13px,6.4cqw,27px)/1.25 system-ui,sans-serif;box-shadow:0 6px 20px #000a}
.end-bubble::after{content:'';position:absolute;left:30%;bottom:-17px;border:14px solid transparent;border-top:16px solid #6e4bb8;border-bottom:0}
.end-bubble span{display:block;min-height:1.25em}
.end-bubble{display:grid}
.end-bubble[hidden]{display:none}
.end-bubble>span,.end-ghost{grid-area:1/1}
.end-ghost{visibility:hidden;font-style:normal}
.end-card{position:absolute;top:36%;left:0;right:0;margin:0;text-align:center;font:900 clamp(30px,15cqw,64px)/1 system-ui,sans-serif;letter-spacing:.06em;color:#f1dca0;text-shadow:0 4px 18px #000;animation:end-card-in 1.4s ease-out both}
@keyframes end-card-in{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}

/* The ship: where play left it, then it glides to the bank, opens its hatch, and finally leaves. */
.end-ship-pos{transform:translate(180px,575px);transition:transform 1.4s cubic-bezier(.4,0,.2,1)}
.ending.past-land .end-ship-pos{transform:translate(222px,398px)}
.ending.past-leave .end-ship-pos{transform:translate(222px,-140px);transition:transform 1.3s cubic-bezier(.6,0,.9,.4) .7s}
.end-ship{animation:end-bob 2.2s ease-in-out infinite}
@keyframes end-bob{50%{transform:translateY(-4px)}}
.end-flame{transform-box:fill-box;transform-origin:50% 0;animation:end-flicker .18s steps(2) infinite}
@keyframes end-flicker{50%{transform:scaleY(.6)}}
.ending.past-land .end-flame{animation:none;transform:scaleY(.25)}
.ending.past-leave .end-flame{animation:end-flicker .1s steps(2) .7s infinite;transform:scaleY(1.6)}
.end-hatch{transform-box:fill-box;transform-origin:100% 100%;transition:transform .5s cubic-bezier(.3,1.4,.6,1)}
.ending.past-open .end-hatch{transform:rotate(112deg)}
.ending.past-leave .end-hatch{transform:none;transition-delay:.45s}

/* The alien: inside the ship, it climbs up out of the open hatch (clipped at the hatch's lower edge while it rises,
   so it comes out of the hole; Andrew, 11-07), hops down onto the bank, looks at the empty pond, then at you. At the
   end it hops back in and the hatch closes. */
.end-alien-pos{transform:translate(222px,446px) scale(.7);opacity:0;transition:transform .9s cubic-bezier(.2,.8,.3,1)}
.ending[data-beat="rise"] .end-alien-clip{clip-path:url(#end-hatch-clip)}
.ending.past-rise .end-alien-pos{transform:translate(222px,377px) scale(.7);opacity:1}
.ending.past-out .end-alien-pos{transform:translate(118px,396px) scale(1.4);animation:end-hop .9s ease-in-out both}
@keyframes end-hop{0%{transform:translate(222px,377px) scale(.7)}45%{transform:translate(176px,316px) scale(1.05)}100%{transform:translate(118px,396px) scale(1.4)}}
/* Back in (Andrew liked the first version best, 11-07): he shrinks back toward the hatch in .55 s and fades as he
   reaches it, as an animation of its own so nothing can cut it short. */
.ending.past-leave .end-alien-pos{transform:translate(222px,372px) scale(.12);opacity:0;animation:end-back .6s ease-in both}
@keyframes end-back{0%{transform:translate(118px,396px) scale(1.4);opacity:1}67%{opacity:1}92%,100%{transform:translate(222px,372px) scale(.12)}100%{opacity:0}}
.end-alien{animation:end-breathe 1.6s ease-in-out infinite}
@keyframes end-breathe{50%{transform:translateY(-2px) scaleY(1.02)}}
.ending[data-beat="laugh"] .end-alien{animation:end-laugh .3s ease-in-out infinite}
@keyframes end-laugh{50%{transform:translateY(-7px) rotate(-3deg)}}
.end-pupil{transform-box:fill-box;transform-origin:50% 50%;transition:transform .5s}
.ending[data-beat="say1"] .end-pupil{transform:translate(4px,4px)}
.ending.past-say2 .end-pupil{transform:translate(-5px,0) scale(1.3)}
.end-tip{animation:end-blink 1.1s steps(2) infinite}
@keyframes end-blink{50%{fill:#ff7166}}
.end-arm-r{transform-box:fill-box;transform-origin:0 100%;transition:transform .4s}
.ending[data-beat="say2"] .end-arm-r{transform:rotate(-40deg)}
.end-grin,.end-teeth{opacity:0;transition:opacity .2s}
.ending.past-say2 .end-smile{opacity:0}
.ending.past-say2 .end-grin,.ending.past-say2 .end-teeth{opacity:1}

/* Reduced motion: every moment's positions, reached at once. */
.ending.calm *,.ending.calm{animation:none!important;transition:none!important}