/* A fixed 16:9 picture with captions inside its safe area. */
#story-player[hidden]{display:none!important}
#story-player{position:absolute;inset:0;z-index:90;isolation:isolate;outline:none;cursor:pointer;color:white}
#story-player[data-kind=comic]{position:fixed;background:#060a10;z-index:1000}
.comic-viewport{position:absolute;width:min(94vw,160vh);aspect-ratio:16/9;left:50%;top:50%;transform:translate(-50%,-50%);overflow:hidden;isolation:isolate}
#story-player[data-kind=scene] .comic-viewport{display:none}
.comic-stage{position:absolute;inset:0;overflow:hidden;background:#060a10}
.comic-page{position:absolute;inset:0;width:100%;height:100%;display:block;animation:story-fade-in .8s ease both}
.comic-page.outgoing{animation:none;pointer-events:none}
.story-subtitle{position:absolute;z-index:2;bottom:6%;left:9%;right:9%;margin:0;text-align:center;color:#fff;font:500 clamp(18px,2vw,30px)/1.8 'Noto Serif TC','Songti TC',serif;letter-spacing:.06em;text-shadow:0 2px 5px #000,0 0 18px #000;white-space:normal}
.comic-viewport:after{content:'';position:absolute;inset:60% 0 0;background:linear-gradient(transparent,#000b);pointer-events:none}
.story-hint{position:absolute;z-index:3;right:2%;bottom:1%;color:#ffffffb8;border:1px solid #ffffff60;border-radius:3px;padding:2px 7px;font:14px system-ui;pointer-events:none}
#story-player[data-kind=scene] .comic-stage,#story-player[data-kind=scene] .story-subtitle,#story-player[data-kind=scene] .story-hint{display:none}
.story-access{position:absolute;z-index:4;top:16px;right:16px;display:flex;gap:8px;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}
.story-access:focus-within{clip-path:none;width:auto;height:auto}
.story-access button{background:#13212de8;color:#fff;border:1px solid #93a5b0;padding:8px 12px;cursor:pointer}
body.story-playing .hub-hud,body.story-playing #flow-debug{visibility:hidden}
body.story-comic{overflow:hidden}body.story-comic .topbar,body.story-comic > header,body.story-comic > footer{visibility:hidden}
@keyframes story-fade-in{from{opacity:0}to{opacity:1}}
@keyframes story-hint-out{0%,65%{opacity:1}100%{opacity:0}}
@media(max-width:700px){.story-subtitle{left:6%;right:6%;bottom:7%;font-size:18px;line-height:1.7}.story-hint{font-size:12px;right:2%}}
@media(prefers-reduced-motion:reduce){.comic-page{animation:none}}
