.prologue-story{position:absolute;inset:0;z-index:80;isolation:isolate;overflow:hidden;background:#111112;color:#f7f1e6;font-family:var(--font-ui,"Noto Sans KR",sans-serif);--story-dialogue-height:clamp(182px,24%,218px);--story-light:#d6aa68;--story-shadow:#111112;touch-action:manipulation}
.prologue-story-backdrop,.prologue-story-atmosphere,.prologue-story-light{position:absolute;inset:0;pointer-events:none}
.prologue-story-backdrop{z-index:0;overflow:hidden;transform-origin:50% 42%}
.prologue-story-background{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 45%;filter:brightness(.84) saturate(.9)}
.prologue-story-atmosphere{z-index:3;background:linear-gradient(180deg,#10101422,transparent 30%,transparent 58%,#101014bb 92%),radial-gradient(ellipse at 50% 40%,transparent 45%,#0b0b1033 100%);box-shadow:inset 0 0 55px #08080c33}
.prologue-story-cast{position:absolute;top:auto;left:16px;right:16px;bottom:calc(var(--story-dialogue-height) - 18px);height:min(80cqw,420px);z-index:2;pointer-events:none;overflow:visible}
.prologue-story-character{position:absolute;width:130%;height:100%;bottom:0;overflow:visible;clip-path:inset(-100vh -100vw 0);transition:filter 240ms ease,transform 280ms ease;transform-origin:50% 65%;filter:brightness(.7) saturate(.74);transform:scale(.95)}
.prologue-story-character[data-position=left]{left:-28%;z-index:1}
.prologue-story-character[data-position=right]{right:-22%;z-index:1}
.prologue-story-character[data-position=center]{left:-15%;width:130%;z-index:2}
.prologue-story-character[data-character=garon]{width:110%;right:-14%;left:auto}
.prologue-story-character[data-character=garon] .prologue-story-portrait{top:-9cqw}
.prologue-story-character[data-speaking=true]{z-index:2;filter:brightness(1) saturate(.9);transform:scale(1)}
/* Garon stays behind Elia so changing speaker cannot cover her face. */
.prologue-story-character[data-character=garon]{z-index:0}
.prologue-story-portrait{position:absolute;display:block;left:0;top:0;width:100%;max-width:100%;height:auto;object-fit:contain;object-position:50% 0;transform:none}
.prologue-story-character[data-character=elia] .prologue-story-portrait{transform:scaleX(-1);transform-origin:50% 50%}
.prologue-story-character.is-fairy{--fairy-size:clamp(64px,20cqw,90px);width:var(--fairy-size);height:var(--fairy-size);top:16%;bottom:auto;clip-path:none;mask-image:none;-webkit-mask-image:none;overflow:visible;transform:none;transform-origin:50% 50%;filter:brightness(.86) saturate(.9)}
.prologue-story-character.is-fairy[data-position=right],.prologue-story-character.is-fairy[data-position=left],.prologue-story-character.is-fairy[data-position=center]{left:56%;right:auto;z-index:3}
.prologue-story-character.is-fairy[data-speaking=true]{transform:none;filter:brightness(1.08) saturate(1)}
.prologue-story-character.is-fairy .prologue-story-portrait{position:static;width:100%;height:100%;transform:none;object-fit:contain;object-position:center;mask-image:none;-webkit-mask-image:none}
.prologue-story[data-mood=rescue],.prologue-story[data-mood=safe],.prologue-story[data-mood=warm]{--story-light:#eed6a2}
.prologue-story[data-mood=rescue] .prologue-story-background,.prologue-story[data-mood=safe] .prologue-story-background,.prologue-story[data-mood=warm] .prologue-story-background{filter:brightness(.94) saturate(.92)}
.prologue-story[data-mood=rescue] .prologue-story-atmosphere,.prologue-story[data-mood=safe] .prologue-story-atmosphere{background:radial-gradient(ellipse at 88% 36%,#ffe1a526,transparent 53%),linear-gradient(180deg,#10101411,transparent 54%,#101014bb 92%)}
.prologue-story-light{z-index:4;opacity:0;background:radial-gradient(ellipse at 84% 38%,#fff5ddeb,#ebcd9688 28%,transparent 76%)}
.prologue-story-dialogue{box-sizing:border-box;position:absolute;z-index:5;left:16px;right:16px;bottom:calc(var(--safe-bottom,env(safe-area-inset-bottom,0px)) + 16px);min-height:calc(var(--story-dialogue-height) - 24px);max-height:47%;display:grid;grid-template-rows:auto minmax(0,1fr) 44px;gap:8px;padding:21px 20px 10px;background:linear-gradient(120deg,#fffaf0fa,#eee5d5fc 70%,#dfd2bffa);border:1px solid #bd9b61;border-radius:5px;box-shadow:inset 0 0 0 3px #1c1b19,inset 0 0 0 4px #d4bb80,0 14px 40px #0007}
.prologue-story-dialogue:before,.prologue-story-dialogue:after{content:'';position:absolute;top:-1px;width:40px;height:2px;background:linear-gradient(90deg,transparent,#e2c892);pointer-events:none}
.prologue-story-dialogue:before{left:9px}.prologue-story-dialogue:after{right:9px;transform:rotate(180deg)}
.prologue-story-name{justify-self:start;position:relative;align-self:start;margin-top:-36px;padding:7px 17px;min-height:19px;background:linear-gradient(135deg,#30302f,#171719);border:1px solid #c7ae75;border-radius:3px;box-shadow:inset 0 0 0 2px #151515,0 3px 8px #0004;color:#efdbb1;font-size:14px;font-weight:700;line-height:1.4;letter-spacing:.045em}
.prologue-story-copy{position:relative;min-height:0;margin:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;font-size:clamp(15px,4.15cqw,18px);font-weight:500;line-height:1.8;word-break:keep-all;overflow-wrap:anywhere;text-align:left;color:#262421;text-shadow:0 1px #fff7}
.prologue-story-next{appearance:none;justify-self:end;align-self:end;display:flex;align-items:center;justify-content:center;gap:12px;min-width:86px;min-height:44px;padding:0 8px 0 14px;border:0;border-radius:3px;background:transparent;box-shadow:none;color:#66502c;font:600 13px/1 var(--font-ui,"Noto Sans KR",sans-serif);letter-spacing:.08em;cursor:pointer;touch-action:manipulation}
.prologue-story-next:after{content:'';width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:6px solid currentColor;opacity:.8}
.prologue-story-next:active{background:#e0ca8b13;transform:translateY(1px)}
.prologue-story-next:disabled{opacity:.5;cursor:default}
.prologue-story[data-typing=true] .prologue-story-next:after{opacity:.35}
@media(max-width:350px){.prologue-story{--story-dialogue-height:200px}.prologue-story-dialogue{left:12px;right:12px;bottom:calc(var(--safe-bottom,env(safe-area-inset-bottom,0px)) + 12px);padding:19px 17px 8px;gap:5px}.prologue-story-copy{font-size:15px;line-height:1.7}.prologue-story-name{font-size:13px;margin-top:-34px}.prologue-story-cast{left:14px;right:14px}}
@media(max-height:600px){.prologue-story{--story-dialogue-height:194px}.prologue-story-cast{bottom:calc(var(--story-dialogue-height) - 22px);height:min(80cqw,calc(100% - 235px))}.prologue-story-dialogue{max-height:48%;min-height:180px}.prologue-story-copy{font-size:15px;line-height:1.65}}
@media(orientation:landscape) and (max-height:500px){.prologue-story{--story-dialogue-height:174px}.prologue-story-cast{top:16px;bottom:122px;height:auto;left:24px;right:24px}.prologue-story-character{width:min(90%,420px)}.prologue-story-character[data-character=garon]{width:min(82%,380px);left:auto;right:0}.prologue-story-character[data-character=garon] .prologue-story-portrait{top:0}.prologue-story-character[data-position=left]{left:-9%}.prologue-story-character[data-position=right]{right:-9%}.prologue-story-dialogue{bottom:8px;min-height:144px;max-height:48%;grid-template-rows:auto minmax(0,1fr);padding-bottom:14px;padding-right:96px}.prologue-story-next{position:absolute;right:9px;bottom:8px}.prologue-story-copy{font-size:14px;line-height:1.6}}
@media(prefers-reduced-motion:reduce){.prologue-story-character{transition:none}.prologue-story-next:active{transform:none}}