/* Shared cinematic VN; legacy Reader remains a text-only safety fallback. */
.vn-ending{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(1.5rem,6svh,4rem);padding:5rem max(1.5rem,env(safe-area-inset-right)) max(1.5rem,env(safe-area-inset-bottom)) max(1.5rem,env(safe-area-inset-left));box-sizing:border-box;background:radial-gradient(ellipse at 50% 40%,#17202a,#080b10 70%);text-align:center;color:#f0ede4}
.vn-ending-card{opacity:1;transition:opacity .5s ease;max-width:100%}.vn-ending-fade{opacity:0}
.vn-ending-chapter{font-size:.85rem;letter-spacing:.25em;color:#d4bd91;margin:0 0 1rem}
.vn-ending-title{font-size:clamp(1.5rem,4.5vw,2.7rem);font-weight:400;letter-spacing:.08em;line-height:1.6;margin:0}
.vn-ending-line{font-size:1rem;letter-spacing:.14em;line-height:1.7;margin:1.2rem 0 0}
.vn-player:has(.vn-ending) .vn-top{z-index:11}
.vn-player .vn-content[hidden]{display:none}
@media(max-height:480px){.vn-ending{gap:1rem;padding-top:4.5rem;padding-bottom:.75rem}.vn-ending-chapter{margin-bottom:.5rem}.vn-ending-title{font-size:1.7rem}.vn-ending-line{margin-top:.6rem}}
@media(prefers-reduced-motion:reduce){.vn-ending-card{transition:none}}
.vn-glossary-dialog{max-width:min(34rem,calc(100vw - 2rem));max-height:75svh;overflow:auto;background:#0b1118;color:#f8f3e8;border:1px solid #a89976;padding:1.2rem;font-size:1rem;line-height:1.8}
.vn-glossary-dialog::backdrop{background:#0009}.vn-glossary-entry h3{color:#f0d6a4;margin:.6rem 0}.vn-glossary-entry p{margin:.3rem 0 1rem}
.vn-glossary,.vn-glossary-close,.vn-term-hint{background:#0b1118a1;color:#f0d6a4;border:1px solid #a8997680;padding:.5rem .7rem;min-height:44px;font:inherit;cursor:pointer}
.vn-term-hints{display:flex;flex-wrap:wrap;gap:.4rem}.vn-term-hint{margin-top:.5rem;font-size:.85rem}.vn-term-hint:focus-visible,.vn-glossary-close:focus-visible{outline:2px solid #f0d7a8;outline-offset:3px}
html.resume-pending #title{display:none}
.vn-text .vn-paragraph,.vn-history-text .vn-paragraph{display:block;margin-top:.4em}
.vn-text .vn-paragraph:first-child,.vn-history-text .vn-paragraph:first-child,.vn-speaker-source + .vn-paragraph{margin-top:0}
.vn-input{padding:1rem;background:#080b10e8;border:1px solid #a2947566;max-height:40svh;overflow:auto}
.vn-input label{display:block;margin-bottom:.5rem}
.vn-input textarea{display:block;width:100%;box-sizing:border-box;min-height:5rem;background:#101722;color:#f0ede4;font:inherit;padding:.6rem;margin-bottom:.5rem}
.vn-input[hidden]{display:none}
.vn-text-only .vn-placeholder{background:radial-gradient(ellipse at 50% 40%,#26313d,#0b1118 65%,#080b10);padding:0}
.vn-text-only .vn-content{margin-top:auto;margin-bottom:auto}
.vn-text-only .vn-dialogue{background:transparent;border-color:transparent;box-shadow:none;text-align:center;padding:2rem 1rem}
@media(max-height:480px) and (min-width:601px){.vn-text-only .vn-stage{right:0}.vn-text-only .vn-content{width:85%;align-self:center}}
.vn-dialogue{overflow:auto;max-height:46svh;white-space:pre-wrap}
@media(max-height:480px){.vn-input{padding:.5rem;max-height:52svh}.vn-input textarea{min-height:3rem;max-height:5rem}.vn-player .vn-dialogue{max-height:43svh}}
body.vn-active{background:#080b10;overflow:hidden}
.vn-active .shell{max-width:none;padding:0}
.vn-active .masthead,.vn-active footer{display:none}
.vn-player{position:relative;isolation:isolate;display:flex;flex-direction:column;height:100svh;min-height:100svh;background:#080b10;overflow:hidden;color:#f0ede4}
.vn-stage,.vn-curtain{position:absolute;inset:0}
.vn-stage{overflow:hidden;z-index:-3}
.vn-stage::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#080b103b,transparent 28%,#080b1020 55%,#080b10aa)}
.vn-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform-origin:center;animation-duration:45s;animation-timing-function:linear;animation-fill-mode:forwards}
.vn-stage[data-camera="zoom"] .vn-image{animation-name:vn-zoom}
.vn-stage[data-camera="pan"] .vn-image{animation-name:vn-pan}
.vn-stage[data-camera="cup-to-face"] .vn-image{animation-name:vn-coffee;transform-origin:60% 48%}
.vn-stage[data-camera="still"] .vn-image{animation:none}
@keyframes vn-zoom{from{transform:scale(1)}to{transform:scale(1.035)}}
@keyframes vn-pan{from{transform:scale(1.015) translateX(-.6%)}to{transform:scale(1.015) translateX(.6%)}}
@keyframes vn-coffee{from{transform:scale(1.025) translateY(-.4%)}to{transform:scale(1.04) translateY(.5%)}}
.vn-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1rem;background:linear-gradient(165deg,#26313d,#121a23 58%,#080b10);padding:2rem;text-align:center}
.vn-placeholder-label{font:500 .7rem/1.5 system-ui,sans-serif;letter-spacing:.16em;color:#bfc7cd}
.vn-placeholder-title{font-size:clamp(1.1rem,3vw,1.6rem);color:#d9dedf;letter-spacing:.08em}
.vn-curtain{z-index:-1;background:#000;transition:opacity .6s ease;pointer-events:none}
.vn-top{display:flex;flex-shrink:0;align-items:center;gap:1.2rem;padding:clamp(1rem,3vw,2rem);font:500 .7rem/1.5 system-ui,sans-serif;letter-spacing:.16em;z-index:2;text-shadow:0 1px 8px #000}
.vn-act{color:#e2d1aa}.vn-time{color:#fff;font-variant-numeric:tabular-nums}
.vn-sound{margin-left:auto;background:#080b1080;color:#e2ddd2;border:1px solid #a29475;padding:.5rem .8rem;min-height:44px;cursor:pointer;font:inherit;letter-spacing:.08em}
.vn-center{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:2rem;font-size:clamp(1.5rem,4vw,2.8rem);letter-spacing:.2em;transition:opacity .6s;pointer-events:none;text-shadow:0 2px 15px #000}
.vn-center.vn-title{font-size:clamp(2.2rem,7vw,4.6rem);letter-spacing:.13em}
.vn-center-hidden{opacity:0}
.vn-content{position:relative;z-index:2;margin-top:auto;padding:clamp(1rem,3vw,2rem);width:min(100%,1100px);max-height:calc(100svh - 5rem);overflow-y:auto;scrollbar-width:thin;align-self:center}
.vn-dialogue{padding:clamp(1rem,2vw,1.35rem) clamp(1.2rem,3vw,2rem);background:rgba(11,17,24,.63);border:1px solid #a8997680;cursor:pointer;box-shadow:0 8px 28px #0006;color:#f8f3e8;text-shadow:0 1px 2px #000c}
.vn-dialogue[aria-disabled="true"]{cursor:default}
.vn-speaker{margin:0 0 .5rem;color:#f0d6a4;font-size:clamp(1rem,2vw,1.125rem);letter-spacing:.07em}
.vn-text{margin:0;white-space:pre-wrap;font-size:clamp(1.125rem,2vw,1.375rem);line-height:1.9;letter-spacing:.025em;overflow-wrap:anywhere}
.vn-controls{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-top:.85rem}
.vn-status{margin:0;color:#c5c8cb;font:.75rem/1.5 system-ui,sans-serif;text-shadow:0 1px 6px #000}
.vn-next,.vn-choice{min-height:44px;padding:.7rem 1.3rem;background:#0a111aeb;color:#f0ede4;border:1px solid #bdab84;cursor:pointer;font-family:inherit;font-size:.9rem;font-weight:500;line-height:1.6}
.vn-next{min-width:6rem;background:rgba(10,17,26,.63);text-shadow:0 1px 2px #000c}.vn-next:disabled{opacity:.4;cursor:default}
.vn-choices{display:grid;gap:.65rem;margin-top:.8rem}
.vn-choice{text-align:left;width:100%}
.vn-choice:hover,.vn-next:hover:not(:disabled),.vn-sound:hover{background:#3c382e}
.vn-dialogue:focus-visible,.vn-next:focus-visible,.vn-choice:focus-visible,.vn-sound:focus-visible{outline:2px solid #f0d7a8;outline-offset:3px}
@media(max-width:600px){.vn-top{gap:.6rem}.vn-text{font-size:1.125rem;line-height:1.95}.vn-image{height:66%;top:7%;object-fit:contain}.vn-placeholder{padding-bottom:40%}.vn-content{padding:1rem 1rem max(1rem,env(safe-area-inset-bottom))}.vn-center{padding-bottom:9rem}.vn-choices{gap:.5rem}.vn-choice{padding:.6rem .8rem}}
@media(max-height:480px) and (min-width:601px){.vn-stage{right:0}.vn-top{padding:.5rem max(1rem,env(safe-area-inset-right)) .5rem max(1rem,env(safe-area-inset-left))}.vn-content{width:min(100%,1100px);align-self:center;max-height:calc(100svh - 4rem);padding:.65rem max(.75rem,env(safe-area-inset-right)) max(.65rem,env(safe-area-inset-bottom)) max(.75rem,env(safe-area-inset-left))}.vn-dialogue{padding:.6rem 1rem}.vn-text{font-size:1.125rem;line-height:1.7}.vn-center{padding-right:2rem}.vn-choices{gap:.35rem}.vn-choice{padding:.5rem .7rem}}
@media(prefers-reduced-motion:reduce){.vn-image{animation:none!important}.vn-curtain,.vn-center{transition:none}html:has(.vn-player){scroll-behavior:auto}}

/* Passage-gated prototype: S0102 only. No animated character/body layers. */
.vn-stage[data-cinematic="active"] .vn-image{animation:none;transform-origin:50% 50%;will-change:transform}
.vn-window-light,.vn-window-air{position:absolute;inset:0;opacity:0;pointer-events:none;display:none}
.vn-stage[data-cinematic="active"] .vn-window-light,.vn-stage[data-cinematic="active"] .vn-window-air{display:block}
.vn-window-light{background:radial-gradient(ellipse at 16% 38%,#ffe5b5,transparent 58%);mix-blend-mode:screen}
.vn-player[data-shot="S0101"] .vn-window-light{background:radial-gradient(ellipse at 70% 32%,#ffe5b5,transparent 65%)}
.vn-player[data-shot="S0103"] .vn-window-light{background:radial-gradient(ellipse at 84% 32%,#ffe5b5,transparent 60%)}
.vn-player[data-shot="S0104"] .vn-window-light{background:radial-gradient(ellipse at 82% 28%,#edf1f6,transparent 65%)}
.vn-window-air{background:radial-gradient(circle at 14% 30%,#fff0ce 0 1px,transparent 2px),radial-gradient(circle at 22% 48%,#fff0ce 0 1px,transparent 2px),radial-gradient(circle at 35% 36%,#fff0ce 0 1px,transparent 2px),radial-gradient(circle at 10% 56%,#fff0ce 0 1px,transparent 2px);will-change:transform,opacity}
.vn-top{gap:.65rem;flex-wrap:wrap}
.vn-skip,.vn-speed{min-height:44px;padding:.45rem .65rem;background:#080b10b8;color:#e2ddd2;border:1px solid #a2947566;cursor:pointer;font:500 .7rem/1.4 system-ui,sans-serif;letter-spacing:0}
.vn-skip{margin-left:auto}.vn-sound{margin-left:0}
.vn-skip:focus-visible,.vn-speed:focus-visible{outline:2px solid #f0d7a8;outline-offset:3px}
@media(max-width:600px){.vn-top{padding:.65rem 1rem;gap:.35rem}.vn-act{flex-basis:100%}.vn-skip{margin-left:0}.vn-sound{margin-left:auto}.vn-player[data-shot="S0102"] .vn-image{top:15%;height:53%;object-fit:cover;object-position:55% 50%}}
@media(max-height:480px) and (min-width:601px){.vn-player[data-shot="S0102"] .vn-stage{right:0}.vn-player[data-shot="S0102"] .vn-content{width:78%;align-self:center;max-height:calc(100svh - 4rem);padding:.5rem .75rem}.vn-player[data-shot="S0102"] .vn-dialogue{padding:.6rem 1rem}.vn-player[data-shot="S0102"] .vn-controls{padding-top:.4rem}.vn-player[data-shot="S0102"] .vn-text{font-size:18px;line-height:1.7}.vn-player[data-shot="S0102"] .vn-speaker{margin-bottom:.25rem}}
/* Reading subpages fit the viewport; the scene clock and media stay untouched. */
.vn-menu-button,.vn-previous{min-height:44px;padding:.5rem .8rem;background:#080b10c9;color:#f0ede4;border:1px solid #a8997680;font:inherit;cursor:pointer}
.vn-top .vn-act{flex-basis:auto}.vn-top .vn-sound{margin-left:auto}
.vn-player .vn-controls{gap:.5rem}.vn-controls .vn-status{flex:1}.vn-previous:disabled{opacity:.4;cursor:default}
.vn-menu-dialog,.vn-history-dialog{box-sizing:border-box;width:min(44rem,calc(100vw - 2rem));max-height:calc(100svh - 2rem);overflow:auto;background:#0b1118;color:#f8f3e8;border:1px solid #a89976;padding:1rem;font:1rem/1.6 system-ui,sans-serif}
.vn-menu-dialog::backdrop,.vn-history-dialog::backdrop{background:#000b}
.vn-menu-dialog h2,.vn-history-dialog h2{margin:0 0 .5rem;font-size:1.1rem}
.vn-menu-dialog button,.vn-history-dialog button{min-height:44px;background:#101722;color:#f8f3e8;border:1px solid #a8997680;padding:.5rem .7rem;font:inherit;cursor:pointer}
.vn-menu-dialog>button{margin:.3rem}.vn-menu-tools{display:flex;gap:.4rem;flex-wrap:wrap;margin:.7rem 0}.vn-menu-tools .vn-skip{margin-left:0}
.vn-title-confirm{border-top:1px solid #a8997666;margin-top:.5rem}.vn-title-confirm p{margin:.5rem 0}.vn-title-confirm button{margin-right:.5rem}
.vn-history-dialog{height:min(42rem,calc(100svh - 2rem));overflow:hidden;display:flex;flex-direction:column}
.vn-history-dialog:not([open]){display:none}.vn-history-position{margin:.3rem 0;font-size:.8rem;color:#c5c8cb}
.vn-history-list{overflow:auto;flex:1;min-height:0}.vn-history-item{display:block;width:100%;text-align:left;margin:.35rem 0}
.vn-history-text{white-space:pre-wrap;font-family:inherit;font-size:1.125rem;line-height:1.7;overflow:hidden;margin:.5rem 0;flex:1;min-height:0}
.vn-history-controls{display:flex;gap:.4rem;flex-wrap:wrap;flex-shrink:0;margin-top:auto}
@media(max-width:600px){.vn-player .vn-top{gap:.4rem}.vn-player .vn-controls .vn-status{font-size:.65rem}.vn-player .vn-previous,.vn-player .vn-next{min-width:0;padding:.5rem .7rem}.vn-history-controls button{font-size:.8rem;padding:.4rem}}
@media(max-height:480px){.vn-player .vn-top{flex-wrap:nowrap}.vn-player .vn-act{font-size:.6rem}.vn-player .vn-content{width:min(100%,1100px)}.vn-player .vn-content .vn-choices{grid-template-columns:repeat(var(--choice-count,3),minmax(0,1fr))}.vn-history-dialog{width:min(50rem,calc(100vw - 2rem))}.vn-history-text{font-size:1.125rem}.vn-controls .vn-status{font-size:.65rem}}
.vn-player .vn-content{overflow:hidden;flex-shrink:1}
.vn-player .vn-dialogue{overflow:hidden;max-height:none;white-space:normal}
.vn-player .vn-text{overflow:hidden}
.vn-player .vn-input{overflow:hidden;max-height:none;flex-shrink:0}
.vn-player .vn-choices{flex-shrink:0}
.vn-player .vn-input{background:rgba(11,17,24,.63);border-color:#a8997680;padding:.65rem 1rem}
.vn-player .vn-input label{color:#f8f3e8;font-family:inherit;margin-bottom:.4rem}
.vn-player .vn-input textarea{background:#080f18a8;border:1px solid #a8997680;min-height:3.5rem;font-size:1rem;line-height:1.5}
.vn-input-actions{display:flex;justify-content:flex-end;gap:.5rem}.vn-input-actions button{min-height:44px;width:auto}
.vn-input-suggest{font:inherit;font-size:.9rem;border:1px solid #a8997680;color:#e2d1aa;background:#080f18a8;padding:.5rem .8rem;cursor:pointer}
.vn-input button:disabled{opacity:.45;cursor:default}
.vn-input-suggestions .vn-input-suggestion{display:block;width:100%;text-align:left;margin:.45rem 0}.vn-input-suggestions p{font-size:.9rem}
@media(max-height:480px){
 .vn-player .vn-choices{grid-template-columns:repeat(3,minmax(0,1fr));gap:.35rem}
 .vn-player .vn-input{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.35rem;padding:.4rem}
 .vn-player .vn-input[hidden]{display:none}
 .vn-player .vn-input label{grid-column:1/-1;margin:0;font-size:.85rem}
 .vn-player .vn-input textarea{min-height:2.7rem;height:2.7rem;max-height:2.7rem;margin:0;padding:.4rem;resize:none}
 .vn-player .vn-input button{width:auto}
 .vn-player .vn-input-actions{align-items:stretch}
 .vn-player .vn-controls{padding-top:.35rem}
 .vn-player .vn-dialogue{max-height:none}
}