/* The finale fills the game stage, including while the user selects fullscreen. */
.story.finale-scene{
 --finale-gold:#e4c58c;
 --finale-ink:#101715;
 --finale-dialogue:#15201c;
 --finale-inset:clamp(16px,3vw,48px);
 position:absolute!important;
 inset:0!important;
 width:100%!important;
 height:100%!important;
 max-width:none!important;
 max-height:none!important;
 z-index:8000!important;
 isolation:isolate;
 grid-template-rows:44px minmax(0,1fr) auto;
 background:var(--finale-ink);
}
.story.finale-scene::before{
 content:"";
 position:absolute;
 inset:-24px;
 z-index:-1;
 pointer-events:none;
 background-image:var(--finale-dialogue-art,none);
 background-position:center;
 background-size:cover;
 filter:blur(24px) saturate(.65) brightness(.46);
}
.story.finale-scene .cinematic{
 z-index:0;
 background-size:contain;
 background-position:center;
 background-color:transparent;
}
/* Like the opening scene, artwork covers the game behind the dialogue. */
.story.finale-scene:not(.finale-quiz) .cinematic{
 position:absolute;
 grid-row:auto;
 grid-column:auto;
 inset:0;
 width:100%;
 height:100%;
 background-size:cover;
 background-position:center 35%;
}
.story.finale-scene:not(.finale-quiz)::before{display:none}
.story.finale-scene:not(.finale-quiz) .story-top{
 position:absolute;
 inset:0 0 auto;
 background:linear-gradient(#080d16b3,transparent);
}
.story.finale-scene:not(.finale-quiz) .cinematic.finale-title-stage{
 background-image:var(--finale-dialogue-art)!important;
}
.story.finale-scene:not(.coach-fullscreen) .finale-title{background:transparent}
.story.finale-scene .story-top{
 z-index:1;
 max-width:none;
 padding:12px var(--finale-inset);
 color:#ded7be;
}
.story.finale-scene:not(.finale-quiz):not(.coach-fullscreen) .dialogue-card{
 position:absolute;
 inset:auto 0 0;
 width:100%;
 z-index:1;
 display:grid;
 grid-template-columns:128px minmax(0,1fr) minmax(160px,auto);
 grid-template-rows:auto minmax(0,1fr);
 column-gap:24px;
 row-gap:8px;
 padding:20px var(--finale-inset) max(20px,env(safe-area-inset-bottom));
 max-height:min(45dvh,360px);
 min-height:208px;
 border-top:2px solid #ad9162;
 background:linear-gradient(105deg,#15201cf2,#101715eb);
 backdrop-filter:blur(5px);
 scrollbar-color:#b8a174 var(--finale-dialogue);
 scrollbar-width:thin;
}
.finale-dialogue-portrait{
 position:relative;
 grid-column:1;
 grid-row:1/3;
 align-self:start;
 width:128px;
 overflow:hidden;
 border:2px solid var(--finale-gold);
 border-radius:8px;
 background:#f9f8f3;
}
#finalePortraitFace{
 width:100%;
 aspect-ratio:3/4;
 background-repeat:no-repeat;
}
.finale-dialogue-portrait[data-who="阿動"] #finalePortraitFace,
.finale-dialogue-portrait[data-who="小晴老師"] #finalePortraitFace{aspect-ratio:1}
#finalePortraitLabel{
 position:absolute;
 inset:auto 0 0;
 padding:5px 3px;
 background:#101715ed;
 color:#f8e8c5;
 font-size:11px;
 line-height:1.4;
 text-align:center;
}
.story.finale-scene:not(.finale-quiz):not(.coach-fullscreen) .speaker{
 grid-column:2/4;
 grid-row:1;
 align-self:center;
 gap:6px 16px;
 color:var(--finale-gold);
}
.story.finale-scene:not(.finale-quiz):not(.coach-fullscreen) .speaker b{font-size:clamp(20px,1.6vw,25px)}
.story.finale-scene:not(.finale-quiz):not(.coach-fullscreen) .speaker span{font-size:13px;color:#bed0c5}
.story.finale-scene:not(.finale-quiz):not(.coach-fullscreen) #dialogueText{
 grid-column:2;
 grid-row:2;
 align-self:start;
 min-width:0;
 max-width:70ch;
 min-height:0;
 margin:0;
 color:#fff5e4;
 font-size:clamp(18px,1.5vw,23px);
 line-height:1.65;
 overflow-wrap:anywhere;
}
.story.finale-scene:not(.finale-quiz):not(.coach-fullscreen) #storyNext{
 grid-column:3;
 grid-row:2;
 align-self:end;
 justify-self:end;
 position:static;
 width:auto;
 min-width:160px;
 min-height:48px;
 max-width:220px;
 margin:0;
 padding:12px 20px;
 line-height:1.4;
}
.story.finale-scene:not(.finale-quiz):not(.coach-fullscreen) #retryNetwork{grid-column:2/4}
.story.finale-scene #dialogueText:focus-visible{outline:2px solid var(--finale-gold);outline-offset:5px}
.story.finale-scene ::selection{background:#e4c58c;color:#101715}
.story.finale-scene.finale-quiz .finale-dialogue-portrait{display:none}
/* Timed character/title reveal must never expose a dialogue or its portrait. */
.story.finale-scene.coach-fullscreen::before{display:none}
.story.finale-scene.coach-fullscreen .dialogue-card{display:none}

@media(max-width:800px){
 .story.finale-scene:not(.finale-quiz):not(.coach-fullscreen) .dialogue-card{
  grid-template-columns:96px minmax(0,1fr);
  grid-template-rows:auto minmax(0,1fr) auto;
  gap:8px 16px;
  min-height:0;
  max-height:55dvh;
  padding:16px var(--finale-inset) max(16px,env(safe-area-inset-bottom));
 }
 .finale-dialogue-portrait{width:96px}
 .story.finale-scene:not(.finale-quiz):not(.coach-fullscreen) .speaker{grid-column:2;gap:4px}
 .story.finale-scene:not(.finale-quiz):not(.coach-fullscreen) .speaker span{width:100%;font-size:12px;line-height:1.5}
 .story.finale-scene:not(.finale-quiz):not(.coach-fullscreen) #dialogueText{font-size:17px;line-height:1.65}
 .story.finale-scene:not(.finale-quiz):not(.coach-fullscreen) #storyNext{grid-column:1/-1;grid-row:3;min-width:160px;min-height:44px;padding:10px 18px}
}
@media(max-width:480px) and (orientation:portrait){
 .story.finale-scene{grid-template-rows:40px minmax(0,1fr) auto}
 .story.finale-scene .story-top{font-size:10px;padding:12px 16px}
 .story.finale-scene:not(.finale-quiz):not(.coach-fullscreen) .dialogue-card{grid-template-columns:80px minmax(0,1fr);column-gap:14px}
 .finale-dialogue-portrait{width:80px}
 #finalePortraitLabel{font-size:10px;padding:4px 2px}
}
@media(max-height:600px) and (orientation:landscape){
 .story.finale-scene{grid-template-rows:32px minmax(0,1fr) auto}
 .story.finale-scene .story-top{padding:8px var(--finale-inset);font-size:10px}
 .story.finale-scene:not(.finale-quiz):not(.coach-fullscreen) .dialogue-card{
  grid-template-columns:76px minmax(0,1fr) 154px;
  grid-template-rows:auto minmax(0,1fr);
  column-gap:18px;
  row-gap:4px;
  min-height:126px;
  max-height:49dvh;
  padding:10px var(--finale-inset) max(10px,env(safe-area-inset-bottom));
 }
 .finale-dialogue-portrait{width:76px}
 #finalePortraitLabel{font-size:10px;padding:3px 2px}
 .story.finale-scene:not(.finale-quiz):not(.coach-fullscreen) .speaker{grid-column:2/4;gap:4px 12px}
 .story.finale-scene:not(.finale-quiz):not(.coach-fullscreen) .speaker b{font-size:18px}
 .story.finale-scene:not(.finale-quiz):not(.coach-fullscreen) .speaker span{width:auto;font-size:11px}
 .story.finale-scene:not(.finale-quiz):not(.coach-fullscreen) #dialogueText{font-size:16px;line-height:1.5}
 .story.finale-scene:not(.finale-quiz):not(.coach-fullscreen) #storyNext{grid-column:3;grid-row:2;min-width:0;width:154px;min-height:44px;padding:10px 14px;font-size:14px}
 .story.finale-quiz{grid-template-columns:42% 58%;grid-template-rows:32px minmax(0,1fr)}
}