.story-scene{position:fixed;z-index:120;inset:0;background:#07111f;color:#fff;overflow:hidden;font-family:'DM Sans',Arial,sans-serif}
.story-scene[hidden]{display:none}
.story-backdrop{position:absolute;inset:0;background:linear-gradient(90deg,#071425b8 0%,#07142558 48%,#07142524 100%),url('assets/nerima-anime-story.png') center/cover}
.story-backdrop:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 94px,#a9edff0b 95px 96px);opacity:.6}
.story-scene.bad-ending .story-backdrop{background:linear-gradient(#08091255,#080912aa),url('assets/future-war-bad-end.png') center/cover}
.story-scene.good-ending .story-backdrop{background:linear-gradient(90deg,#11274285,#11274220 68%,#11274224),url('assets/future-peace-ending.png') center/cover}
.story-scene.event-one .story-backdrop{background:linear-gradient(90deg,#09172d91,#09172d2b 72%),url('assets/future-shared-art-studio.png') center/cover}
.story-scene.event-two .story-backdrop{background:linear-gradient(90deg,#0d142d94,#0d142d30 72%),url('assets/future-broken-gallery.png') center/cover}
.story-scene.event-three .story-backdrop{background:linear-gradient(90deg,#090e1db8,#090e1d33 72%),url('assets/future-war-bad-end.png') center/cover}
.story-scene.event-four .story-backdrop{background:linear-gradient(90deg,#132850b8,#183e6955 72%),url('assets/future-broken-gallery.png') center/cover}
.story-frame{position:relative;width:min(1180px,100%);height:100%;margin:auto;display:flex;flex-direction:column;justify-content:space-between}
.story-heading{z-index:2;max-width:48%;margin:clamp(16px,4vw,48px);display:flex;flex-direction:column;gap:6px;text-shadow:0 3px 18px #000}
.story-heading span{color:#82f6ff;font-size:clamp(11px,1.3vw,15px);font-weight:900;letter-spacing:.3em}
.story-heading strong{font-size:clamp(23px,3vw,42px);font-weight:900}
.bad-ending .story-heading span{color:#ff757f}
.story-character{position:absolute;bottom:12%;right:3%;height:min(76vh,760px);aspect-ratio:2/3;filter:drop-shadow(0 12px 22px #0009);animation:storyEnter .45s both;pointer-events:none}
.story-character img{width:100%;height:100%;object-fit:contain}
.story-delivered-art{display:none;position:absolute;z-index:1;top:20%;left:9%;height:min(44vh,360px);aspect-ratio:2/3;padding:7px 7px 29px;border:2px solid #fffad1;border-radius:6px;background:#f5e6bd;box-shadow:0 16px 45px #071425a8,0 0 28px #ffe59980;transform:rotate(-3deg)}
.story-delivered-art img{width:100%;height:100%;object-fit:cover;display:block}
.story-delivered-art span{display:block;color:#334765;text-align:center;font-size:12px;font-weight:900;line-height:26px}
.good-ending .story-delivered-art,.stage-event .story-delivered-art{display:block}
.good-ending .story-heading span{color:#fff2aa}
.story-dialog{z-index:2;align-self:stretch;box-sizing:border-box;height:clamp(240px,34vh,280px);flex:0 0 auto;display:flex;flex-direction:column;margin:0 clamp(14px,3vw,36px) clamp(15px,3vw,35px);padding:22px clamp(20px,3vw,36px);border:2px solid #9bf4ff99;border-radius:22px;background:linear-gradient(135deg,#091b36f2,#172640ed);box-shadow:0 16px 55px #000a, inset 0 1px #ffffff40;backdrop-filter:blur(12px)}
.story-speaker{font-size:15px;font-weight:900;color:#94f3ff;letter-spacing:.12em}
.story-dialog p{flex:1;min-height:0;overflow-y:auto;font-size:clamp(17px,2vw,26px);font-weight:700;line-height:1.6;margin:12px 0}
.story-actions{display:flex;align-items:center;justify-content:flex-end;gap:18px;color:#b5c8dc;font-size:13px}
.story-actions button{border:0;border-radius:10px;padding:12px 22px;color:#05172d;background:linear-gradient(100deg,#78e8ff,#e58bf6);font-weight:900;font-size:15px;cursor:pointer}
.bad-ending .story-dialog{border-color:#ff8899a8;background:linear-gradient(135deg,#240e1bef,#241826ed)}
.bad-ending .story-speaker{color:#ff9aad}
@keyframes storyEnter{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:none}}
@media(max-width:700px){.story-heading{max-width:calc(100% - 32px)}.story-character{height:56vh;right:-12%;bottom:21%;opacity:.9}.story-delivered-art{height:30vh;top:24%;left:5%}.story-dialog{height:clamp(210px,38vh,250px)}}
@media(prefers-reduced-motion:reduce){.story-character{animation:none}}