.ending-film{position:fixed;inset:0;z-index:100000;background:#040709;color:#eee6d6;isolation:isolate;font-family:var(--font,serif);display:flex;flex-direction:column;overflow:hidden}.ending-film canvas,.ending-vignette{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1}.ending-vignette{background:linear-gradient(#000 0%,transparent 18%,#0006 40%,#000c 80%,#000),radial-gradient(ellipse at center,transparent,#000 90%)}.ending-frame{width:min(760px,90%);margin:auto;text-align:center;padding:28vh 0 0;min-height:0;display:flex;flex-direction:column;max-height:82dvh}.ending-kicker{font-size:11px;letter-spacing:.24em;color:#baaa88}.ending-frame h1{font-size:clamp(22px,4vw,36px);font-weight:400;letter-spacing:.16em;margin:16px 0 28px}.ending-copy{overflow:auto;min-height:0;padding:0 12px;font-size:clamp(16px,2.2vw,21px);line-height:2;white-space:normal}.ending-copy>p{animation:ending-arrive 1.1s ease both;margin:0 0 1em}.ending-film footer{display:flex;justify-content:center;gap:20px;padding:18px 12px max(20px,env(safe-area-inset-bottom));flex-shrink:0}.ending-film button{font:inherit;font-size:13px;color:#dfd1b4;background:#10151b;border:1px solid #706149;padding:12px 18px;cursor:pointer;min-height:44px}.ending-film button:focus-visible{outline:2px solid #f3d7a0;outline-offset:4px}.ending-frame.is-credits{padding-top:3vh;height:75dvh}.is-credits .ending-copy{flex:1;overflow:hidden;mask-image:linear-gradient(transparent,#000 12%,#000 88%,transparent)}.ending-roll>div{padding:15px 0}.ending-roll small{font:12px Georgia,serif;letter-spacing:.14em;color:#baa680}.ending-roll p{font:22px Georgia,serif;margin:8px 0 20px}.ending-logo{padding:20px 0 40px;animation:ending-arrive 2s ease both;color:#ddc99f}@keyframes ending-arrive{from{opacity:0;filter:blur(3px)}to{opacity:1;filter:blur(0)}}@media(prefers-reduced-motion:reduce){.ending-copy>p,.ending-logo{animation:none}}@media(max-height:540px){.ending-frame{padding-top:8vh}.ending-frame h1{margin:5px 0 10px}.ending-copy{font-size:15px}.ending-film footer{padding:8px}}

.ending-backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;z-index:-2;transition:opacity 1.8s ease;filter:saturate(.65);transform:none}.ending-backdrop.is-ready{opacity:.46;animation:ending-camera 50s ease-out both}.ending-film canvas{z-index:-1}.ending-vignette{z-index:0;background:linear-gradient(#000b,transparent 18%,#0007 42%,#000e 90%,#000)}.ending-frame,.ending-film footer{position:relative;z-index:1}@keyframes ending-camera{from{object-position:46% center}to{object-position:54% center}}@media(prefers-reduced-motion:reduce){.ending-backdrop,.ending-backdrop.is-ready{animation:none;transition:none;transform:none}}

/* 回想は横画面では左、縦画面では上。文字の後ろへ人物の顔を重ねない。 */
.ending-film.has-memories{background:#050708}
.ending-memories{position:absolute;left:0;top:0;bottom:0;width:63%;margin:0;z-index:0;overflow:hidden;mask-image:linear-gradient(90deg,#000 88%,transparent)}
.ending-memories img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity 2.4s ease;filter:saturate(.85)}
.ending-memories img.is-ready{opacity:1}
.has-memories .ending-vignette{background:linear-gradient(transparent 70%,#050708);pointer-events:none}
.has-memories canvas{opacity:.18}
.has-memories .ending-frame{width:34%;margin:0 2% 0 auto;height:100dvh;max-height:none;padding:25px 0 0;box-sizing:border-box}
.has-memories .ending-frame h1{font-size:24px;margin:10px 0 16px}
.has-memories .ending-kicker{font-size:10px;letter-spacing:.12em}
.has-memories footer{margin-top:auto}
.ending-thanks{position:absolute;right:2%;top:44%;width:34%;text-align:center;line-height:2.2;opacity:0;transition:opacity 3s;color:#e8d7b6;z-index:2;pointer-events:none}
.ending-thanks p{font-size:13px}.ending-thanks strong{font-size:clamp(15px,2vw,22px);font-weight:400;letter-spacing:.1em}
.is-thanking .ending-thanks{opacity:1}.is-thanking .ending-copy{opacity:0;transition:opacity 2s}
@media(max-width:650px) and (orientation:portrait){
 .ending-memories{width:100%;bottom:auto;height:44dvh;mask-image:linear-gradient(#000 88%,transparent)}
 .has-memories .ending-frame{width:90%;margin:44dvh auto 0;height:56dvh;padding:0}
 .has-memories .ending-kicker{margin:3px 0}.has-memories .ending-frame h1{font-size:20px;margin:4px 0 8px}
 .ending-thanks{right:5%;width:90%;top:61%}
}
@media(prefers-reduced-motion:reduce){.ending-memories img,.ending-thanks{transition:none}}

.ending-music-role{padding:36px 0;line-height:1.9;color:#dfd1b4}.ending-music-role span{display:block;font-size:12px}.ending-music-role h2{font-size:18px;font-weight:400;margin:12px 0}.ending-music-role span:first-child{font-size:11px;letter-spacing:.15em;color:#baa680}


/* スタッフロールは操作札を置かず、曲の終わりまで上映する。 */
.ending-film footer[hidden], .ending-film [hidden]{display:none}
.has-memories .ending-frame{padding:0}
.ending-roll .ending-music-role{padding:45px 0}
.ending-film[data-tableau="logo"]{background:#000}
.ending-film[data-tableau="logo"] canvas,.ending-film[data-tableau="logo"] .ending-vignette{display:none}
.ending-film[data-tableau="logo"] .ending-frame{width:100%;height:100dvh;max-height:none;margin:0;padding:0}
.ending-film[data-tableau="logo"] .ending-copy{display:flex;align-items:center;justify-content:center;flex:1;padding:0;overflow:hidden}
.ending-logo{padding:0}
.ending-logo img{display:block;width:min(88vw,1000px);height:auto;max-height:75dvh;object-fit:contain}

/* 接続後に再生許可が必要な端末でも、止まった黒い画面にしない。上映中は隠す。 */
.ending-playback{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:24px;text-align:center;background:#040709e8;color:#eee6d6}
.ending-playback p{font-size:15px;line-height:1.8}