/* Ending capstone: one illustration with a slow push/pan, and a few lines of narration. */
#cutscene{position:absolute;inset:0;z-index:34;overflow:hidden;background:#0b1a24;cursor:pointer;opacity:0;transition:opacity .9s ease}
#cutscene.show{opacity:1}
#cutscene.leave{opacity:0;transition-duration:.6s}
#cutscene .cutscene-image{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;will-change:transform;pointer-events:none;user-select:none}
#cutscene .cutscene-image:not([src]){visibility:hidden}
/* Keeps the card readable over bright skies without dimming the art above it. */
#cutscene::after{content:'';position:absolute;left:0;right:0;bottom:0;height:46%;background:linear-gradient(180deg,#0b1a2400,#0b1a24b8);pointer-events:none}
.cutscene-card{position:absolute;z-index:1;left:50%;bottom:clamp(14px,4vh,34px);transform:translateX(-50%);width:min(760px,calc(100% - 32px));box-sizing:border-box;padding:15px 22px 12px;background:#fff4dbf5;color:var(--ink);border:2px solid #e7c987;border-radius:16px;box-shadow:0 7px 0 #c6ad7c,var(--shadow)}
.cutscene-card[hidden]{display:none}
.cutscene-card .eyebrow{display:block;font-size:10px;font-weight:800;letter-spacing:2px;color:#976624}
.cutscene-lines{margin:8px 0 4px}
.cutscene-lines p{margin:0 0 6px;font:500 17px/1.45 'Fraunces',Georgia,serif;animation:cutsceneLine .55s ease-out both}
.cutscene-next{display:block;margin-left:auto;padding:4px 0;background:none;font-size:12px;letter-spacing:.4px;color:#667463}
.cutscene-next kbd{margin-left:4px}
@keyframes cutsceneLine{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(max-width:520px){.cutscene-card{padding:12px 16px 10px}.cutscene-lines p{font-size:15px}}
@media(max-height:430px){.cutscene-card{padding:9px 16px 7px;bottom:10px}.cutscene-lines{margin:4px 0 2px}.cutscene-lines p{font-size:14px;margin-bottom:3px}}
@media(prefers-reduced-motion:reduce){#cutscene{transition:none}.cutscene-lines p{animation:none}}
/* The ending painting is daylight but the outro just ended at night: it surfaces from under a dusk
   veil, like a memory of earlier, rather than cutting from 23:30 to sunshine. The picture is there
   from the first moment, dim, cool and a little faded, never a held blank; then the veil lifts and
   its colour comes back over about three seconds, warmest once the narration has begun. */
#cutscene::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,#1b2352,#0e1532 70%,#0b1024);opacity:0}
#cutscene.show::before{animation:duskVeil 3.2s cubic-bezier(.35,.1,.35,1) both}
#cutscene.show .cutscene-image{animation:memoryWarm 3.2s cubic-bezier(.4,0,.3,1) both}
@keyframes duskVeil{0%{opacity:.7}100%{opacity:0}}
@keyframes memoryWarm{0%{filter:saturate(.45) brightness(.92)}100%{filter:none}}
@media(prefers-reduced-motion:reduce){#cutscene.show::before,#cutscene.show .cutscene-image{animation:none}}
/* The report container takes focus when it appears (for screen readers and keyboard); no ring on the box itself. */
#ending:focus{outline:none}
/* A picture that arrives after the narration has started fades in. */
#cutscene .cutscene-image{transition:opacity .6s ease}

/* The bridge kiss: one short film, played in place at the moment it happens rather than at the
   report. It sits under the pause screen so Escape still pauses, and skips like any other beat. */
#film{position:absolute;inset:0;z-index:34;overflow:hidden;background:#1c130f;cursor:pointer;opacity:0;transition:opacity .6s ease}
#film.show{opacity:1}
/* Leaving dips back into the warm wash first, then lets the (already golden) bridge show through.
   game.js endFilm() hides the element after the same .85s. */
#film.leave{opacity:0;transition:opacity .5s ease .35s}
/* The way in and out is a golden wash, not a cut to black: the map warms into it, the film surfaces from it. */
#film::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 50% 58%,#ffe4ae,#f3b56a 55%,#d58a57);opacity:0}
#film.show::before{animation:filmWashIn 1.6s ease-out both}
#film.leave::before{animation:filmWashOut .45s ease-in forwards}
@keyframes filmWashIn{0%,30%{opacity:1}100%{opacity:0}}
@keyframes filmWashOut{from{opacity:0}to{opacity:.8}}
/* The letterbox holds a blurred, dimmed, slightly larger copy of the film (a 32×18 canvas game.js
   repaints per video frame) instead of flat black bars. */
#film .film-ambient{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;filter:blur(12px) brightness(.46) saturate(1.2);transform:scale(1.2);pointer-events:none}
#film[hidden]{display:none}
/* Keep the deck out of the film frame, including while the pause scrim is over it. */
#game[data-mode="film"] #touch-controls{display:none!important}
#game:has(#film.show:not([hidden])) #touch-controls{display:none!important}
/* Preserve the authored 16:9 composition. Cover cropped both faces on a portrait screen.
   Letterboxing is intentional; the still ending's separate camera framing remains unchanged. */
#film video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain;object-position:center;pointer-events:none;user-select:none;background:transparent}
#film-skip{position:absolute;right:clamp(10px,2.5vw,22px);bottom:max(14px,env(safe-area-inset-bottom));z-index:2;min-width:64px;min-height:44px;padding:9px 16px;background:#0b1a2470;border:1px solid #ffffff2e;border-radius:999px;color:#fff4db;font-size:13px;letter-spacing:.4px;opacity:0;transition:opacity .5s ease}
#film.show #film-skip{opacity:1}
#film-skip:hover,#film-skip:focus-visible{background:#0b1a24a8;color:#fff4db}
#film-skip kbd{margin-left:5px}
.touch-layout #film-skip kbd{display:none}
/* The held last frame: a slow push-in and a warm vignette keep the still alive, and Continue turns
   gold with a soft ring, so the end of the film reads as a moment rather than a frozen player. */
#film video{transform-origin:52% 46%;transition:transform 9s cubic-bezier(.2,.55,.25,1)}
#film.holding video{transform:scale(1.045)}
#film::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 50% 48%,transparent 52%,#1c130fa6 100%);opacity:0;transition:opacity 2.2s ease}
#film.holding::after{opacity:1}
#film.leave::after{opacity:0;transition-duration:.35s}
#film.holding #film-skip{background:#f9ce69eb;border-color:#fff1c4;color:#173d3c;animation:continueRing 2.6s ease-in-out .9s infinite}
#film.holding #film-skip kbd{background:#173d3c;color:#f9ce69}
#film.holding #film-skip:hover,#film.holding #film-skip:focus-visible{background:#ffe08f;color:#173d3c}
@keyframes continueRing{0%,100%{box-shadow:0 0 0 0 #f9ce6970}55%{box-shadow:0 0 0 9px #f9ce6900}}
@media(prefers-reduced-motion:reduce){#film,#film.leave{transition:none}#film::before{display:none}#film video{transition:none}#film.holding video{transform:none}#film.holding #film-skip{animation:none}}