#game.chapter-finale{background:#182026;color:#fff}
#finale-host{position:absolute;inset:0;z-index:30}
.finale{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;overflow:auto;background:#172025;color:#faf6e9;font-family:"Noto Serif SC","Songti SC",serif}
.finale-heading{width:100%;display:flex;justify-content:space-between;align-items:center;padding:14px max(4vw,env(safe-area-inset-right)) 10px max(4vw,env(safe-area-inset-left));box-sizing:border-box;z-index:2;font-size:14px;letter-spacing:.15em;text-shadow:0 1px 8px #0009}
.finale-progress{font-family:system-ui,sans-serif;font-size:12px;letter-spacing:.1em;color:#e2d6bd}
.finale-frame{position:relative;flex:1 1 auto;width:min(100%,calc((100dvh - 250px)*16/9));min-height:170px;max-height:calc(100dvh - 205px);aspect-ratio:16/9;margin:auto;overflow:hidden;background:#253039;box-shadow:0 12px 45px #0005}
.finale-image{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.finale-footer{box-sizing:border-box;width:min(100%,900px);min-height:170px;padding:14px 24px max(18px,env(safe-area-inset-bottom));display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.finale-footer h1{font-size:clamp(22px,2.5vw,34px);line-height:1.3;margin:0;font-weight:600;letter-spacing:.08em;text-shadow:0 1px 5px #0009}
.finale-body{font-size:clamp(16px,1.5vw,20px);line-height:1.5;margin:0;max-width:760px;text-shadow:0 1px 5px #0008}
.finale-actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;width:100%;font-family:"Noto Serif SC","Songti SC",serif}
.finale button{cursor:pointer;color:#f9f0da;background:transparent;border:0;border-bottom:1px solid #dbc8a0a8;font:inherit;font-size:16px;line-height:1.4;padding:9px 13px;min-height:42px;touch-action:manipulation}
.finale button:hover,.finale button:focus-visible{color:#fff;border-bottom-color:#fff;outline:none;text-shadow:0 0 12px #fff8}
.finale button:disabled{opacity:.55;cursor:default}
.finale-compare .finale-frame{overflow:visible}
.finale-compare-view{position:relative;width:100%;height:100%;overflow:hidden;--split:50%;touch-action:none}
.finale-compare-view>.finale-image{position:absolute;inset:0}
.finale-compare-view>.finale-past{clip-path:inset(0 calc(100% - var(--split)) 0 0);will-change:clip-path}
.finale-divider{position:absolute;top:0;bottom:0;width:3px;background:#fbf1d4;box-shadow:0 0 0 1px #332e2799,0 0 18px #000b;transform:translateX(-50%);cursor:ew-resize;touch-action:none;z-index:3}
.finale-knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:44px;height:44px;border:2px solid #fff4de;border-radius:50%;background:#252e32bd;color:white;font:24px system-ui}
.finale-era{position:absolute;left:14px;bottom:10px;color:white;font:13px system-ui;text-shadow:0 1px 5px #000,0 0 9px #000;z-index:2}
.finale-slider-controls{display:flex;align-items:center;justify-content:center;gap:8px;width:100%}
.finale-range{width:min(220px,35vw);accent-color:#d7bf8e;touch-action:pan-y}
.finale-mini{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:7px 12px;width:100%;font-family:system-ui,sans-serif}
.finale-mini strong{font-size:15px;font-weight:500}
.finale-choices{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.finale-mini .finale-choices button{font:15px system-ui;min-height:38px;padding:6px 10px}
.finale-feedback{min-width:100%;margin:0;font-size:14px;color:#e8dcbf}
.finale-mini .finale-skip,.finale-actions>.finale-skip{font-size:13px;opacity:.82}
.finale-beauty-hot{position:absolute!important;z-index:2;transform:translate(-50%,-50%);width:44px;height:44px;border:1px solid #fff!important;border-radius:50%;background:#28312966!important;color:#fff;font-size:26px!important;padding:0!important;text-shadow:0 1px 4px #000}
.finale-identity-form{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:9px;width:100%}
.finale-identity-form label{font-size:16px;display:flex;align-items:center;gap:8px;min-width:min(100%,600px)}
.finale-identity-form textarea{box-sizing:border-box;min-width:0;flex:1;width:100%;height:55px;border:1px solid #ebdfc4aa;border-radius:3px;background:#f7f0e4;color:#2f211b;font:16px/1.4 "Noto Serif SC","Songti SC",serif;padding:8px;resize:vertical}
.finale-identity-form small{font:12px system-ui;color:#e4d8c0}
.finale-hold{position:relative;overflow:hidden;min-width:220px;user-select:none;touch-action:none}
.finale-hold-meter{position:absolute;left:0;bottom:0;height:3px;width:0;background:#e9d6aa}
.finale-moving .finale-image{animation:finale-walk 1.8s ease-in forwards}
@keyframes finale-walk{to{transform:scale(1.12) translateY(-1.4%)}}
.finale-souvenir{background:#3d2c27}
.finale-souvenir .finale-frame{width:auto;height:min(71dvh,calc(100vw * 1.333));max-height:none;min-height:0;aspect-ratio:3/4;flex:0 1 auto;box-shadow:0 8px 30px #0008}
.finale-card{display:block;height:100%;width:100%;object-fit:contain}
.finale-card-status{font:13px system-ui;margin:0;width:100%;color:#e8dac4}
@media(max-width:700px){.finale-heading{font-size:13px;padding-top:max(9px,env(safe-area-inset-top))}.finale-frame{width:100%;max-height:none;min-height:0;flex:0 0 auto;aspect-ratio:16/9;margin:3px 0}.finale-footer{min-height:0;flex:1 0 auto;padding:12px 14px max(16px,env(safe-area-inset-bottom));gap:7px}.finale-footer h1{font-size:clamp(20px,5vw,27px)}.finale-body{font-size:clamp(14px,3.6vw,18px)}.finale button{font-size:14px;min-height:40px;padding:7px 10px}.finale-mini strong{font-size:14px}.finale-mini .finale-choices button{font-size:13px}.finale-souvenir .finale-frame{height:min(66dvh,calc(100vw * 1.333));width:auto;max-width:100%}.finale-souvenir .finale-footer{flex:0 0 auto}}
@media(max-height:560px) and (orientation:landscape){.finale-heading{padding:6px 3vw 2px}.finale-frame{height:calc(100dvh - 130px);max-height:none;width:auto;min-height:0;flex:0 0 auto;margin:0}.finale-footer{padding:4px 12px 6px;min-height:0;gap:2px;flex:1 1 auto}.finale-footer h1{font-size:18px}.finale-body{font-size:13px;line-height:1.25}.finale button{font-size:13px;min-height:31px;padding:3px 7px}.finale-mini strong,.finale-mini .finale-choices button{font-size:12px}.finale-mini .finale-choices button{min-height:28px}.finale-feedback{font-size:11px}.finale-souvenir .finale-frame{height:min(78dvh,calc(100vw * 1.333));width:auto}}
@media(prefers-reduced-motion:reduce){.finale-moving .finale-image{animation:none}}
/* The picture is the stage; copy and controls sit in its quiet lower edge. */
.finale:not(.finale-souvenir){background:#18201b}
.finale:not(.finale-souvenir) .finale-frame{position:absolute;inset:0;width:100%;height:100%;max-height:none;min-height:0;margin:0;aspect-ratio:auto;box-shadow:none}
.finale:not(.finale-souvenir) .finale-heading{position:absolute;top:0;left:0;background:linear-gradient(#10201999,transparent);padding-top:max(18px,env(safe-area-inset-top));pointer-events:none}
.finale:not(.finale-souvenir) .finale-footer{position:absolute;bottom:0;left:0;width:100%;max-height:52%;overflow:auto;min-height:0;padding:40px 5% max(24px,env(safe-area-inset-bottom));background:linear-gradient(transparent,#0d1915b3 30%,#0d1915e8);z-index:4;gap:10px;pointer-events:none}
.finale-footer button,.finale-footer input,.finale-footer textarea,.finale-mini,.finale-slider-controls{pointer-events:auto}
.finale:not(.finale-souvenir) .finale-body{font-size:clamp(17px,1.7vw,22px)}
.finale-era{inset:65px 6% auto;display:flex;justify-content:space-between;font-size:17px;pointer-events:none}
.finale-compare-view{height:100%;width:100%}
.finale-slider-controls{gap:16px}
.finale-range{height:32px}
.finale-compare .finale-image{object-position:50% 45%}
.finale-beauty-hot{z-index:3}
.finale-heading .finale-progress{display:none}
.finale-hold{min-height:48px!important}
.finale-image{transition:none;animation:none}
@keyframes finale-enter{from{opacity:0}to{opacity:1}}
@media(orientation:landscape) and (max-height:560px){
 .finale:not(.finale-souvenir) .finale-footer{padding:15px 4% max(8px,env(safe-area-inset-bottom));max-height:54%;gap:3px}
 .finale:not(.finale-souvenir) .finale-footer h1{font-size:22px}
 .finale:not(.finale-souvenir) .finale-body{font-size:15px}
 .finale-era{top:42px;font-size:14px}
 .finale button,.finale-mini .finale-choices button{min-height:36px;font-size:14px}
}
@media(prefers-reduced-motion:reduce){.finale-image{animation:none;transition:none}}
.finale .finale-heading button{pointer-events:auto;font-size:16px;padding:6px 10px;min-height:40px;letter-spacing:0}

/* Both periods occupy one shared full-screen stage. */
.finale:not(.finale-souvenir) .finale-frame{inset:0;width:100%;height:100%;background:#17201b}
.finale:not(.finale-souvenir) .finale-image{object-fit:cover;object-position:center}
.finale-compare-view>.finale-past{clip-path:inset(0 calc(100% - var(--split)) 0 0)}
.finale:not(.finale-souvenir) .finale-footer{background:none;padding:18px 4% max(18px,env(safe-area-inset-bottom));max-height:38%;overflow:visible;gap:7px;text-shadow:0 2px 5px #000,0 0 14px #000}
.finale:not(.finale-souvenir) .finale-footer::before{content:'';position:absolute;inset:-40px 0 0;z-index:-1;background:linear-gradient(transparent,#10171399);pointer-events:none}
.finale-compare .finale-slider-controls{display:none}
.finale-compare .finale-footer h1{font-size:clamp(22px,2.5vw,32px)}
.finale-compare .finale-body{display:none}
.finale-era{top:66px;font-size:20px;letter-spacing:.12em}
.finale-mini{gap:6px 14px}
.finale-feedback:empty{display:none}
.finale-compare-view>.finale-image{animation:none;transition:none}
@media(orientation:landscape) and (max-height:560px){
 .finale:not(.finale-souvenir) .finale-frame{inset:0;height:100%}
 .finale:not(.finale-souvenir) .finale-footer{max-height:40%;padding:7px 4% max(7px,env(safe-area-inset-bottom));gap:3px}
 .finale-era{top:44px;font-size:16px}
 .finale-compare .finale-footer h1{font-size:20px}
}

.finale-compare .finale-body{display:block;font-size:clamp(16px,1.6vw,21px)}
.finale-compare-hint{margin:0;font-size:14px;color:#f0e6d1;text-shadow:0 2px 5px #000}
.finale-compare .finale-actions{gap:7px 20px}
.finale-compare .finale-next{font-size:17px}

.finale-compare-view>.finale-image{z-index:0}
.finale-compare-view>.finale-past{z-index:1}
.finale-compare-view>.finale-era{z-index:4}

/* Register the clasped hands in the two supplied inclusive scenes. */
.finale-compare-inclusive .finale-compare-view>.finale-image{object-fit:cover;object-position:center;transform-origin:center;transform:scale(1.16)}
.finale-compare-inclusive .finale-compare-view>.finale-image:not(.finale-past){transform:translate(-2.5%,-5.2%) scale(1.16)}

.finale-past-layer{position:absolute;inset:0;z-index:1;overflow:hidden;clip-path:inset(0 calc(100% - var(--split)) 0 0);pointer-events:none}
.finale-past-layer>.finale-past{position:absolute;inset:0;clip-path:none}
.finale-compare-inclusive .finale-past-layer>.finale-past{transform:scale(1.16);transform-origin:center}

.finale-compare-view>.finale-image,.finale-past-layer>.finale-past{transform-origin:50% 50%;object-position:center!important}

.finale-compare .finale-compare-view>.finale-image,.finale-compare .finale-past-layer>.finale-past{transform:none!important}

/* Keep finale lettering clear without a heavy dark halo or footer veil. */
.finale:not(.finale-souvenir) .finale-footer{ text-shadow:none }
.finale:not(.finale-souvenir) .finale-footer::before{background:linear-gradient(transparent,#10171338)}
.finale:not(.finale-souvenir) .finale-footer h1,.finale:not(.finale-souvenir) .finale-body,.finale-compare-hint{ text-shadow:0 1px 2px #0009 }
.finale button:hover,.finale button:focus-visible{ text-shadow:none }

/* Center the remaining souvenir actions after removing the redundant generate control. */
.finale-souvenir .finale-actions{justify-content:center;align-items:center;gap:10px 20px}
.finale-souvenir .finale-card-status{flex-basis:100%;text-align:center}

/* Keep the final campus scene behind the souvenir instead of a flat brown field. */
.finale.finale-souvenir{background:linear-gradient(#10171245,#10171270),url('../assets/finale/17.pages.webp?v=grounded-rescue-v5') center/cover no-repeat;isolation:isolate}
.finale-souvenir .finale-heading{background:none;text-shadow:0 1px 4px #0009}
.finale-souvenir .finale-footer{position:relative;z-index:1;text-shadow:0 1px 3px #000b}
.finale-souvenir .finale-footer::before{content:none}
.finale-souvenir .finale-frame{position:relative;z-index:1;background:transparent;box-shadow:0 8px 28px #0005}
.finale-souvenir .finale-card-status{color:#f2e7d1}

/* The souvenir artwork supplies its own quiet, continuous backdrop. */
.finale.finale-souvenir{background:#26251f}
.finale.finale-souvenir::before{content:"";position:absolute;inset:-18px;z-index:-2;background:url('../assets/finale/18.pages.webp?v=grounded-rescue-v5') center 43%/cover no-repeat;filter:blur(12px);pointer-events:none}
.finale.finale-souvenir::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(#10151066,#101510a3);pointer-events:none}

/* A landscape-phone answer field must shrink within its label. */
.finale-identity-form{min-width:0;max-width:100%}
.finale-identity-form label{flex:1 1 480px;min-width:0;max-width:100%}
.finale-identity-form textarea{flex:1 1 0;width:0;min-width:0;max-width:100%}

@media(orientation:landscape) and (max-height:560px){
 .finale-souvenir .finale-frame{height:calc(100dvh - 140px);flex:0 0 auto;max-height:none}
 .finale-souvenir .finale-footer{flex:0 0 auto}
}

/* Move only the identity heading; leave the answer form in the original footer flow. */
#game.ui-playing .finale.finale-identity-question .finale-footer{background:none!important;border:0!important;box-shadow:none!important}
#game.ui-playing .finale.finale-identity-question .finale-footer::before{content:none}
#game.ui-playing .finale.finale-identity-question .finale-body{display:none}
#game.ui-playing .finale.finale-identity-question .finale-footer h1{position:fixed;left:50%;top:42%;margin:0;transform:translate(-50%,-50%);font-size:clamp(52px,7vw,108px);font-weight:500;line-height:1.3;letter-spacing:.15em;white-space:nowrap;color:#fff5df;text-shadow:0 2px 5px #14201880;animation:identity-question-appear 3s ease-out both;pointer-events:none}
@keyframes identity-question-appear{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){#game.ui-playing .finale.finale-identity-question .finale-footer h1{animation:none}}