.prologue-backdrop{padding:0;background:var(--modal-backdrop-color);backdrop-filter:none}
.prologue-cutscene{position:relative;width:min(1180px,calc(100vw - 50px));height:min(650px,calc(100vh - 40px));overflow:hidden;border:2px solid #bda25d;border-radius:8px;background-color:#09110d;background-position:center;background-size:cover;background-repeat:no-repeat;box-shadow:0 28px 90px #000;isolation:isolate;transition:filter .4s ease}
.prologue-cutscene.story-scene-dark{filter:brightness(0);pointer-events:none}
.prologue-cutscene:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#07100be8 0%,#07100b4d 48%,#07100bcf 100%),linear-gradient(0deg,#020504e8 0%,transparent 58%)}
.prologue-cutscene:after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;box-shadow:inset 0 0 100px #000b}
.prologue-heading{position:absolute;z-index:6;top:30px;left:38px;right:38px;display:flex;align-items:center;gap:18px;color:#e8d6a4;text-shadow:0 2px 8px #000}
.prologue-heading small{letter-spacing:3px;color:#d3b76e;font-weight:700}
.prologue-heading h2{font:400 24px Georgia,'Batang',serif;letter-spacing:.5px}
.prologue-chapters{margin-left:auto;display:flex;gap:8px}
.prologue-chapters i{width:30px;height:3px;background:#8b805c80}
.prologue-chapters i.active{background:#f0ce83;box-shadow:0 0 10px #f0ce8380}
.prologue-chapter-count{color:#e7cb86;font-size:14px;font-weight:800;white-space:nowrap}
.chapter-story-index{margin-left:auto;color:#e7cb86;font-size:14px;font-weight:800;letter-spacing:1px;white-space:nowrap}
.prologue-character{position:absolute;z-index:2;top:42px;bottom:34px;width:60%;overflow:visible;opacity:0;animation:prologueReveal .35s ease forwards;pointer-events:none}
.prologue-character.left{left:1%}.prologue-character.right{right:1%}
.prologue-character img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:saturate(.92) contrast(1.04) drop-shadow(0 14px 18px #0009);transform:scale(.78)}
.prologue-character.actor-leon,.prologue-character.actor-garon{overflow:hidden}
.prologue-character.actor-leon img{object-position:left top;transform:translateY(10%) scale(1.91475);transform-origin:left top}
.prologue-character.left img{object-position:left bottom;transform-origin:left bottom}.prologue-character.right img{object-position:right bottom;transform-origin:right bottom}
.prologue-character.actor-leon.left img{object-position:left top;transform-origin:left top}
.prologue-character.actor-ren img{transform:scale(.663)}
.prologue-character.actor-luca img{transform:scale(.702)}
.prologue-character.actor-garon img{object-position:left top;transform:translateY(25%) scale(1.425875);transform-origin:left top}
.prologue-character .closed{opacity:1}
.prologue-character .talking{display:none}
.prologue-dialogue{position:absolute;z-index:7;left:36px;right:36px;bottom:22px;min-height:82px;padding:10px 112px 9px 18px;border:2px solid #a68e55;background:#101913f2;box-shadow:0 12px 34px #000b;display:flex;align-items:center;cursor:pointer;user-select:none;transition:border-color .16s,background-color .16s}
.prologue-dialogue:hover{border-color:#e0c273;background:#142019f5}
.prologue-copy{min-width:0}
.prologue-speaker{display:block;margin-bottom:2px;color:#e7c978;font-size:24px;font-weight:800;letter-spacing:.5px}
.prologue-dialogue.narrator .prologue-speaker{color:#9fb197}
.prologue-dialogue p{margin:0;color:#f0ead8;font-size:24px;line-height:1.38;text-shadow:0 1px 5px #000}
.prologue-word{opacity:0;animation:prologueWordReveal 1ms forwards;animation-delay:calc(var(--word-index) * var(--prologue-word-ms))}
.prologue-controls{position:absolute;right:14px;top:50%;transform:translateY(-50%)}
.prologue-controls button{width:82px;min-width:82px;min-height:38px;padding:7px 12px;letter-spacing:1.5px}
.prologue-controls:has(button+button){display:flex;flex-direction:column;gap:5px}
.prologue-controls:has(button+button) button{width:112px;min-width:112px;min-height:30px;padding:4px 6px;letter-spacing:0;font-size:12px}
.prologue-dialogue:has(.prologue-controls button+button){padding-right:132px}
@keyframes prologueWordReveal{to{opacity:1}}
@keyframes prologueReveal{from{opacity:0}to{opacity:1}}
@media(max-width:760px){.prologue-cutscene{width:100vw;height:100dvh;border-width:0;border-radius:0}.prologue-heading{top:20px;left:20px;right:20px}.prologue-heading h2{font-size:18px}.chapter-story-index{font-size:11px}.prologue-character{top:auto;bottom:18%;width:68%;height:53%;overflow:hidden}.prologue-character.left{left:7%}.prologue-character.right{right:7%}.prologue-character img{object-fit:contain;transform:scale(1)}.prologue-character.left img,.prologue-character.right img{object-position:center bottom;transform-origin:center bottom}.prologue-character.actor-leon img,.prologue-character.actor-leon.left img{object-position:center top;transform:translateY(10%) scale(1.91475);transform-origin:center top}.prologue-character.actor-ren img{transform:scale(.85)}.prologue-character.actor-luca img{transform:scale(.9)}.prologue-character.actor-garon img,.prologue-character.actor-garon.left img{object-position:center top;transform:translateY(25%) scale(1.425875);transform-origin:center top}.prologue-dialogue{left:14px;right:14px;bottom:14px;min-height:78px;padding:9px 88px 8px 13px}.prologue-speaker,.prologue-dialogue p{font-size:21px}.prologue-controls{right:9px}.prologue-controls button{width:70px;min-width:70px;font-size:12px}}
@media(max-width:760px){.prologue-heading:has(.prologue-chapter-count){align-items:flex-start;gap:6px;flex-direction:column}.prologue-heading:has(.prologue-chapter-count) .prologue-chapters{margin-left:0}.prologue-dialogue:has(.prologue-controls button+button){padding-right:107px}.prologue-controls:has(button+button) button{width:90px;min-width:90px;font-size:11px}}
@media(prefers-reduced-motion:reduce){.prologue-cutscene{transition:none}.prologue-character{animation:none;opacity:1}.prologue-character .closed{animation:none;opacity:1}.prologue-character .talking{display:none}.prologue-word{animation:none;opacity:1}}

/* Keep the approved size/anchor while reflecting artwork toward the dialogue center. */
.prologue-art{position:absolute;inset:0}
.prologue-character.story-mirrored .prologue-art{transform:scaleX(-1)}
.prologue-character.story-mirrored.right img{object-position:left bottom;transform-origin:left bottom}
.prologue-character.story-mirrored.left img{object-position:right bottom;transform-origin:right bottom}
.prologue-character.actor-bram .prologue-art{translate:0 10%}
@media(max-width:760px){.prologue-character.story-mirrored img{object-position:center bottom;transform-origin:center bottom}}

.chapter-story-cutscene .prologue-copy.story-text-complete .prologue-word{animation:none;opacity:1}

/* Chapter scenes share the logical game canvas, including on scaled phones. */
.pc-mode .chapter-story-cutscene{width:min(1180px,calc(var(--pc-width) - 50px));height:min(650px,calc(var(--pc-height) - 40px))}

/* Approved dual-dagger Luca: frame the unchanged full-length cutout for dialogue. */
.prologue-character.actor-luca img{object-view-box:inset(0% 10% 42% 10%)}

/* Align women's head/hood crowns to the approved 35% dialogue line.
   Source head offsets exclude raised staffs; original artwork and scales stay intact. */
.prologue-cutscene{container-type:size}
.prologue-character:is(.actor-ela,.actor-ren,.actor-bram,.actor-luca,.actor-lumi){top:35%;bottom:auto;height:calc(100% - 76px);--dialogue-art-height:calc(100cqh - 76px);--dialogue-art-width:60cqw;--dialogue-art-scale:.78;overflow:visible}
.prologue-character.actor-ela{--dialogue-head-y:.089871612;--dialogue-art-ratio:1.249554367}
.prologue-character.actor-ren{--dialogue-head-y:.079787234;--dialogue-art-ratio:1.437858509;--dialogue-art-scale:.663}
.prologue-character.actor-bram{--dialogue-head-y:.011333333;--dialogue-art-ratio:1.42993327}
.prologue-character.actor-luca{--dialogue-head-y:.002244971;--dialogue-art-ratio:1.0875;--dialogue-art-scale:.702}
.prologue-character.actor-lumi{--dialogue-head-y:.029274784;--dialogue-art-ratio:1.436902486}
.prologue-character:is(.actor-ela,.actor-ren,.actor-bram,.actor-luca,.actor-lumi) .prologue-art{translate:0 calc(-1 * var(--dialogue-head-y) * min(calc(var(--dialogue-art-height) * var(--dialogue-art-scale)),calc(var(--dialogue-art-width) * var(--dialogue-art-ratio) * var(--dialogue-art-scale))))}
.prologue-character:is(.actor-ela,.actor-ren,.actor-bram,.actor-luca,.actor-lumi).left img{object-position:left top;transform-origin:left top}
.prologue-character:is(.actor-ela,.actor-ren,.actor-bram,.actor-luca,.actor-lumi).right img{object-position:right top;transform-origin:right top}
.prologue-character:is(.actor-ela,.actor-ren,.actor-bram,.actor-luca,.actor-lumi).story-mirrored.right img{object-position:left top;transform-origin:left top}
.prologue-character:is(.actor-ela,.actor-ren,.actor-bram,.actor-luca,.actor-lumi).story-mirrored.left img{object-position:right top;transform-origin:right top}
@media(max-width:760px){
 .prologue-character:is(.actor-ela,.actor-ren,.actor-bram,.actor-luca,.actor-lumi){height:53%;--dialogue-art-height:53cqh;--dialogue-art-width:68cqw;--dialogue-art-scale:1}
 .prologue-character.actor-ren{--dialogue-art-scale:.85}.prologue-character.actor-luca{--dialogue-art-scale:.9}
 .prologue-character:is(.actor-ela,.actor-ren,.actor-bram,.actor-luca,.actor-lumi):not(.story-mirrored) img{object-position:center top;transform-origin:center top}
}