/* Story stages share the existing dialog focus boundary, with their own full-screen layout. */
.exp-overlay.vn-overlay{position:fixed;inset:0;display:block;padding:0;gap:0;background:#0b1620;overflow:hidden;max-height:none;isolation:isolate}
.vn-scene{position:relative;isolation:isolate;width:100%;height:100%;height:100dvh;min-height:0;overflow:hidden;color:#f6f4ea;display:grid;grid-template-rows:minmax(120px,1fr) auto;background:#142733;--vn-accent:#a6e4dc;--vn-pan:0px}
.vn-scene[data-shot=left]{--vn-pan:12px}.vn-scene[data-shot=right]{--vn-pan:-12px}
.vn-backdrop,.vn-depth,.vn-particles,.vn-stage,.vn-stage-shade{position:absolute;inset:0;pointer-events:none}
.vn-backdrop{overflow:hidden;z-index:-2}.vn-backdrop>img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;transform:scale(1.07) translateX(var(--vn-pan));transition:transform 1.5s ease;filter:saturate(.88)}
.vn-depth{background:linear-gradient(180deg,#07131c9c,transparent 27%,#0a182733 65%,#08141ee6),radial-gradient(ellipse at 50% 35%,transparent 25%,#07142060 100%)}
.vn-header{position:absolute;z-index:5;top:0;left:0;right:0;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:max(17px,env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) 15px max(18px,env(safe-area-inset-left));background:linear-gradient(#091824b8,transparent);text-shadow:0 2px 6px #08111d}
.vn-header>div:first-child{min-width:0}.vn-header span,.vn-kicker{font-size:9px;font-weight:700;letter-spacing:.22em;color:var(--vn-accent)}
.vn-header .vn-title{font-size:clamp(17px,3.5vw,27px);line-height:1.2;margin:5px 0 0;font-weight:700;letter-spacing:-.02em}
.vn-header-tools{display:flex;gap:7px;flex-shrink:0}.vn-header .exp-icon-button{height:44px;width:44px;min-width:44px;background:#112632a8;border:1px solid #d1e6ee35;border-radius:13px;box-shadow:none}
.vn-header .vn-replay-back{min-height:44px;min-width:44px;max-width:160px;padding:9px 12px;border:1px solid #d1e6ee35;border-radius:13px;background:#112632df;color:#e8f0f4;font-size:11px;line-height:1.35;text-shadow:none;box-shadow:none;flex-shrink:0}
.vn-stage{inset:65px 0 160px;overflow:hidden;z-index:-1}
.vn-actor{position:absolute;bottom:-8%;height:100%;width:60%;max-width:670px;opacity:1;filter:brightness(.67) saturate(.8);transition:filter .65s ease,opacity .65s ease,transform .75s ease;transform:translateY(9px) scale(.96);transform-origin:center bottom}
.vn-actor-left{left:calc(50% - min(620px,51vw))}.vn-actor-right{right:calc(50% - min(620px,51vw))}
.vn-actor.is-speaking{opacity:1;filter:brightness(1.04) saturate(1);transform:translateY(0) scale(1);z-index:1}
.vn-actor-breathe{height:100%;width:100%;animation:vn-breathe 6s ease-in-out infinite;transform-origin:center bottom}
.vn-actor-right .vn-actor-breathe{animation-delay:-3s}
.vn-actor img{height:100%;width:100%;max-width:none;object-fit:contain;object-position:center bottom;user-select:none;-webkit-user-drag:none}
.vn-actor.is-mirrored img{transform:scaleX(-1)}
.vn-stage-shade{inset:auto 0 0;height:100px;background:linear-gradient(transparent,#0b1a2a65)}
.vn-stage-touch{position:absolute;inset:80px 0 0;width:100%;height:auto;z-index:0;border:0;border-radius:0;background:transparent;box-shadow:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.vn-bottom{grid-row:2;position:relative;z-index:3;width:min(100% - 28px,1000px);margin:0 auto;padding-bottom:max(10px,env(safe-area-inset-bottom));min-height:0;max-height:calc(100dvh - 100px);display:flex;flex-direction:column}
.vn-scene .vn-caption{font-size:11px;letter-spacing:.03em;color:#f0f2eac4;text-align:center;margin:0 10px 9px;text-shadow:0 1px 5px #000}
.vn-dialogue{position:relative;display:flex;flex-direction:column;min-height:0;padding:17px 18px 12px;border:1px solid #c0dbe342;border-top:2px solid var(--vn-accent);border-radius:3px 17px 17px 17px;background:linear-gradient(120deg,#102735f5,#0b1c2af5);box-shadow:0 16px 50px #030b1670;text-align:left}
.vn-speaker-row{display:flex;align-items:baseline;gap:14px;justify-content:space-between;margin-bottom:10px}
.vn-scene .vn-speaker{font-size:14px;line-height:1.35;color:var(--vn-accent);font-weight:700}
.vn-count{font-size:10px;letter-spacing:.1em;color:#cad9e1;white-space:nowrap}
.vn-scene .vn-text{font-size:clamp(15px,1.6vw,20px);line-height:1.55;margin:0;min-height:min(4.65em,32dvh);max-height:32vh;overflow-y:auto;overscroll-behavior:contain;overflow-wrap:break-word;color:#f1f2eb;scrollbar-width:thin;scrollbar-color:#9dcac766 transparent;white-space:pre-wrap;touch-action:pan-y}
.vn-text [data-vn-unread]{visibility:hidden}.vn-text [data-vn-visible],.vn-text [data-vn-unread]{font:inherit;color:inherit;letter-spacing:inherit;line-height:inherit}
.vn-text:empty::before{content:'\00a0'}.vn-scene .is-narrator .vn-text{font-style:italic;color:#e2e8eb}.vn-scene .is-narrator .vn-speaker{font-size:12px;color:#c9d9e3}
.vn-dialogue-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:13px;flex-shrink:0}
.vn-auto-progress{position:absolute;left:-1px;right:16px;top:-2px;height:3px;overflow:hidden;pointer-events:none;background:#244955;border-radius:2px}
.vn-auto-progress::after{content:'';display:block;width:100%;height:100%;background:var(--vn-accent);transform-origin:left center;animation:vn-auto-wait var(--vn-auto-ms,4000ms) linear both}
.vn-read-hint{font-size:10px;line-height:1.4;color:#b4c7d4;max-width:46%}
.vn-continue,.vn-tool{border:1px solid #b8d4df3d;min-height:44px;min-width:44px;padding:10px 14px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;touch-action:manipulation;font:inherit;font-size:12px;font-weight:600;color:#e8f0f4;background:#142e3e;box-shadow:none;white-space:normal;line-height:1.3}
.vn-continue{background:var(--vn-accent);color:#10252e;border-color:var(--vn-accent);min-width:126px;font-size:13px}.vn-continue svg{width:17px;height:17px;flex-shrink:0}
.vn-toolbar{display:flex;justify-content:flex-end;gap:3px;margin-top:5px;flex-shrink:0}.vn-toolbar .vn-tool{background:#0a19299e;border-color:transparent;padding:9px 12px;font-size:11px;border-radius:7px}
.vn-tool[aria-pressed=true]{color:var(--vn-accent);background:#183a4ce0;border-color:#c0ded448}.vn-tool:hover,.vn-continue:hover{filter:brightness(1.13)}
.vn-scene button:focus-visible,.vn-text:focus-visible,.vn-log-scroll:focus-visible{outline:2px solid #fff;outline-offset:3px}.vn-stage-touch:focus-visible{outline-offset:-5px}
.vn-continue:active,.vn-tool:active{filter:brightness(.92)}.vn-scene button:disabled{cursor:default;filter:none;opacity:.55}
.vn-particles{z-index:-1;overflow:hidden;opacity:.55}.vn-particles i{position:absolute;left:var(--x);top:-12%;width:3px;height:5px;background:#e7f7ff;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);animation:vn-snow calc(11s + var(--i)*.7s) linear infinite;animation-delay:var(--delay)}
[data-weather=dust] .vn-particles{opacity:.3}[data-weather=dust] .vn-particles i{background:var(--vn-accent);width:3px;height:3px;animation-name:vn-dust}
[data-weather=mist] .vn-particles{opacity:.13;filter:blur(12px)}[data-weather=mist] .vn-particles i{width:160px;height:70px;background:#d4e7ed;clip-path:none;animation-name:vn-dust;animation-duration:28s}
.vn-reader,.vn-skip{position:absolute;z-index:10;box-shadow:0 0 0 100vmax #030e1dcc,0 20px 90px #0009;background:#0d2230f7;border:1px solid #bedee74d;border-radius:18px}
.vn-reader{inset:max(16px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));max-width:900px;margin:auto;display:flex;flex-direction:column;min-height:0;padding:18px;max-height:700px}
.vn-reader>header{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid #d3e9ed26;padding-bottom:15px;flex-shrink:0}.vn-reader h2,.vn-skip h2{margin:6px 0 0;font-size:23px;line-height:1.2}
.vn-reader .vn-tool{flex-shrink:0;max-width:130px}.vn-log-scroll{overflow:auto;overscroll-behavior:contain;min-height:0;padding:5px 0;scrollbar-width:thin;scrollbar-color:#9dcac766 transparent;touch-action:pan-y;overflow-wrap:break-word}
.vn-log-scroll article{padding:20px 0;border-bottom:1px solid #d3e9ed1c}.vn-log-scroll strong{font-size:13px;color:var(--vn-accent)}.vn-log-scroll p{font-size:16px;line-height:1.65;margin:9px 0 0;color:#e3eaf0}.vn-log-scroll article[aria-current]{border-left:2px solid var(--vn-accent);padding-left:14px}
.vn-scene .vn-reader-note{font-size:11px;color:#a9c0ce;margin:14px 0 0}.vn-skip{top:50%;left:50%;transform:translate(-50%,-50%);width:min(420px,calc(100% - 32px));padding:24px}.vn-skip p{font-size:15px;line-height:1.6;color:#c5d7e2}.vn-skip>div{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:9px;margin-top:22px}
.vn-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
/* The log and confirmation cover the stage; their reader should be the only activity. */
.vn-scene[data-vn-paused=true] *,.vn-scene:has(.vn-reader) .vn-actor-breathe,.vn-scene:has(.vn-reader) .vn-particles i,.vn-scene:has(.vn-skip) .vn-actor-breathe,.vn-scene:has(.vn-skip) .vn-particles i{animation-play-state:paused!important}
.vn-scene[data-vn-paused=true] .vn-auto-progress::after,.vn-scene:has(.vn-reader) .vn-auto-progress::after,.vn-scene:has(.vn-skip) .vn-auto-progress::after{animation-play-state:paused!important}
@keyframes vn-auto-wait{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@keyframes vn-breathe{0%,100%{transform:translateY(0) rotate(-.3deg)}50%{transform:translateY(-4px) rotate(.3deg)}}
@keyframes vn-snow{from{transform:translate3d(25px,-10vh,0) rotate(0deg)}to{transform:translate3d(-45px,115vh,0) rotate(180deg)}}
@keyframes vn-dust{from{transform:translate3d(-20px,100vh,0);opacity:0}20%,75%{opacity:1}to{transform:translate3d(40px,0,0);opacity:0}}
@media(min-width:850px) and (min-height:600px){.vn-stage{inset:65px 0 135px}.vn-actor{width:46%;height:100%;bottom:-13%}.vn-bottom{padding-bottom:max(18px,env(safe-area-inset-bottom))}.vn-dialogue{padding:23px 28px 16px}.vn-scene .vn-text{min-height:3.1em;max-height:22vh}.vn-scene .vn-speaker{font-size:17px}.vn-scene .vn-caption{margin-bottom:12px;font-size:12px}.vn-toolbar .vn-tool{font-size:12px;padding:10px 16px}.vn-read-hint{font-size:11px}.vn-continue{min-width:155px}}
@media(max-width:370px){.vn-header{padding-left:14px;padding-right:14px;gap:7px}.vn-header-tools{gap:4px}.vn-header .vn-title{font-size:16px}.vn-bottom{width:calc(100% - 20px)}.vn-dialogue{padding:14px 13px 10px}.vn-scene .vn-speaker{font-size:13px}.vn-toolbar{justify-content:space-between}.vn-toolbar .vn-tool{padding:8px 9px;font-size:10px}.vn-read-hint{font-size:9px}.vn-continue{min-width:112px;padding:10px}.vn-scene .vn-caption{font-size:10px}.vn-actor{width:66%;height:95%}.vn-actor-left{left:-6%}.vn-actor-right{right:-6%}}
@media(max-width:600px){.vn-header .vn-replay-back{max-width:90px;padding:8px;font-size:10px}}
@media(max-height:500px) and (min-aspect-ratio:4/3){.vn-scene{grid-template-rows:minmax(50px,1fr) auto}.vn-header{padding:10px 16px}.vn-header .vn-title{font-size:17px}.vn-header span{font-size:8px}.vn-header .exp-icon-button{height:44px;width:44px}.vn-stage{inset:20px 0 75px}.vn-actor{height:100%;width:44%;bottom:-13%;max-width:440px}.vn-actor-left{left:1%}.vn-actor-right{right:1%}.vn-bottom{width:min(100% - 40px,1000px);padding-bottom:4px}.vn-scene .vn-caption{display:none}.vn-dialogue{padding:10px 16px 8px}.vn-speaker-row{margin-bottom:5px;padding-right:135px}.vn-scene .vn-speaker{font-size:12px}.vn-scene .vn-text{font-size:14px;line-height:1.45;min-height:2.9em;max-height:22vh;padding-right:135px}.vn-dialogue-footer{margin:0;position:absolute;right:13px;bottom:10px}.vn-read-hint{display:none}.vn-continue{min-width:112px;max-width:130px}.vn-toolbar{margin-top:2px}.vn-toolbar .vn-tool{padding:8px 12px}.vn-reader{inset:10px 25px;padding:13px 18px}.vn-reader>header{padding-bottom:8px}.vn-log-scroll article{padding:13px 0}.vn-log-scroll p{font-size:14px;margin-top:5px}.vn-scene .vn-reader-note{margin-top:8px}}
/* Short landscape overrides must still clear a phone's notch and home bar. */
@media(max-height:500px) and (min-aspect-ratio:4/3){
 .vn-header{padding:max(10px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left))}
 .vn-bottom{width:min(calc(100% - max(20px,env(safe-area-inset-left)) - max(20px,env(safe-area-inset-right))),1000px);padding-bottom:max(4px,env(safe-area-inset-bottom))}
 .vn-reader{inset:max(10px,env(safe-area-inset-top)) max(25px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(25px,env(safe-area-inset-left))}
 .vn-skip{max-height:calc(100dvh - max(10px,env(safe-area-inset-top)) - max(10px,env(safe-area-inset-bottom)));overflow-y:auto;overscroll-behavior:contain}
}
.vn-calm *,.calm-motion .vn-scene *{animation:none!important;transition:none!important;scroll-behavior:auto!important}.vn-calm .vn-auto-progress::after,.calm-motion .vn-scene .vn-auto-progress::after{animation:none!important}.vn-calm .vn-particles,.calm-motion .vn-particles{display:none}.vn-calm .vn-backdrop>img,.calm-motion .vn-backdrop>img{transform:none}
@media(prefers-reduced-motion:reduce){.vn-scene *,.vn-auto-progress::after{animation:none!important;transition:none!important}.vn-particles{display:none}.vn-backdrop>img{transform:none}}

/* Slanted rain, with no flashing lightning; existing Calm/reduced-motion controls apply. */
[data-weather=storm] .vn-backdrop>img{filter:brightness(.72) saturate(.85)}
[data-weather=storm] .vn-particles{opacity:.4;transform:skewX(-20deg)}
[data-weather=storm] .vn-particles i{width:2px;height:34px;background:#b4d7e6;clip-path:none;animation-duration:1.5s}

/* Airship portraits share the deck; fill portrait framing without a pasted scene panel. */
@media(max-width:600px) and (max-aspect-ratio:1/1){
 .vn-scene[data-weather=storm] .vn-stage{inset:80px 0 180px}
 .vn-scene[data-weather=storm] .vn-actor{width:78%;height:100%;bottom:-8%}
 .vn-scene[data-weather=storm] .vn-actor-left{left:-14%}
 .vn-scene[data-weather=storm] .vn-actor-right{right:-17%}
}