.story-cinematic{position:fixed;z-index:100;inset:0;display:grid;place-items:end center;overflow:hidden;background:#1c1613;color:#fff;font-family:"Microsoft YaHei",sans-serif;touch-action:manipulation}.story-cinematic.hidden{display:none}.story-backdrop{position:absolute;inset:-5%;background-position:center;background-size:cover;filter:saturate(.72) brightness(.72);transform:scale(1.08);transition:transform 5s ease,filter .8s ease,opacity .35s ease}.story-cinematic.scene-warm .story-backdrop{filter:saturate(1.14) brightness(.86);transform:scale(1.01)}.story-cinematic.scene-coast .story-backdrop{filter:saturate(1.05) brightness(.78);animation:story-coast-pan 7s ease-in-out both}.story-vignette{position:absolute;inset:0;background:linear-gradient(180deg,#19110c4d 0%,transparent 32%,#160f0bbd 78%,#120c09f2 100%),radial-gradient(circle at 50% 42%,transparent 28%,#160e0a55 100%)}.story-dialogue{position:relative;z-index:3;width:min(680px,calc(100% - 32px));margin:0 0 max(24px,env(safe-area-inset-bottom));padding:18px 20px 16px;border:1px solid #f4d38b80;border-radius:24px;background:linear-gradient(145deg,#3b2515e8,#201510ed);box-shadow:0 18px 50px #0009,inset 0 1px #fff3;backdrop-filter:blur(12px);animation:story-card-in .45s ease both}.story-dialogue>small{display:block;margin-bottom:4px;color:#f4bd63;font-size:12px;letter-spacing:.12em}.story-dialogue h1{margin:0;color:#fff6d6;font-size:clamp(23px,5.5vw,38px);line-height:1.22;text-shadow:0 3px 14px #000}.story-dialogue>p{margin:9px 0 13px;color:#f5ead8;font-size:14px;line-height:1.65}.story-speech{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid #f7d89455;border-radius:15px;background:#fff7e614}.story-speech>b{display:grid;place-items:center;width:38px;height:38px;flex:0 0 auto;border-radius:50%;background:#fff1c9;color:#54331e;font-size:23px;box-shadow:0 2px 8px #0004}.story-speech>span{display:grid;gap:2px}.story-speech strong{color:#ffd779;font-size:11px}.story-speech em{color:#fff8e8;font-size:13px;font-style:normal;line-height:1.45}.story-controls{display:flex;align-items:center;gap:12px;margin-top:13px}.story-dots{display:flex;gap:6px;margin-right:auto}.story-dots i{width:6px;height:6px;border-radius:99px;background:#fff4}.story-dots i.active{width:22px;background:#f6b54c}.story-controls button{min-width:100px;padding:10px 16px;border:0;border-radius:99px;background:linear-gradient(#ffc65b,#ed8b35);color:#5f3218;font-weight:800;box-shadow:0 4px 0 #a85222}.story-skip{position:absolute;z-index:5;right:max(18px,env(safe-area-inset-right));top:max(18px,env(safe-area-inset-top));padding:7px 13px;border:1px solid #fff5;border-radius:99px;background:#17100a88;color:#fff;font-size:12px;backdrop-filter:blur(7px)}.story-particles{position:absolute;z-index:2;inset:0;pointer-events:none}.story-particles i{position:absolute;top:-12%;font-style:normal;animation:story-leaf-fall 5.5s linear infinite;filter:drop-shadow(0 3px 4px #5d251c80)}.story-particles i:nth-child(1){left:8%;animation-delay:-1s}.story-particles i:nth-child(2){left:26%;animation-delay:-4s}.story-particles i:nth-child(3){left:52%;animation-delay:-2.2s}.story-particles i:nth-child(4){left:76%;animation-delay:-.2s}.story-particles i:nth-child(5){left:91%;animation-delay:-3.1s}.story-cinematic.scene-magic:after{content:"";position:absolute;z-index:1;inset:0;background:radial-gradient(circle at 50% 49%,#ffc34a7a,transparent 34%);animation:story-glow 1.8s ease-in-out infinite alternate}.story-cinematic.story-leaving{animation:story-wipe .55s ease both}.story-replay-button{padding:5px 8px!important;color:#845631!important}
@keyframes story-card-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}@keyframes story-leaf-fall{to{transform:translate3d(55px,115vh,0) rotate(440deg)}}@keyframes story-glow{to{opacity:.25}}@keyframes story-coast-pan{from{transform:scale(1.1) translateX(-2%)}to{transform:scale(1.02) translateX(2%)}}@keyframes story-wipe{to{opacity:0;transform:translateY(-2%)}}
@media(max-width:430px){.story-dialogue{width:calc(100% - 22px);margin-bottom:max(14px,env(safe-area-inset-bottom));padding:15px 15px 13px;border-radius:20px}.story-dialogue>small{font-size:9px}.story-dialogue h1{font-size:24px}.story-dialogue>p{font-size:12px;line-height:1.55}.story-speech{padding:8px}.story-speech>b{width:34px;height:34px;font-size:20px}.story-speech strong{font-size:9px}.story-speech em{font-size:11px}.story-controls{margin-top:10px}.story-controls button{padding:9px 13px}.story-skip{right:12px;top:max(12px,env(safe-area-inset-top));font-size:10px}}
@media(prefers-reduced-motion:reduce){.story-backdrop,.story-dialogue,.story-particles i,.story-cinematic.scene-magic:after,.story-cinematic.story-leaving{animation:none!important;transition:none!important}}
.story-dialogue{box-sizing:border-box;width:calc(100vw - 32px);max-width:680px;min-width:0;justify-self:center}.story-dialogue>p,.story-speech em{overflow-wrap:anywhere}.story-speech>span,.story-controls{min-width:0}.story-replay-button{padding:5px 7px!important;font-size:9px!important}
body.story-playing{overflow:hidden}.story-atmosphere{position:absolute;z-index:1;inset:-15%;overflow:hidden;pointer-events:none}.scene-fog .story-atmosphere:before,.scene-fog .story-atmosphere:after{content:"";position:absolute;width:95%;height:46%;border-radius:50%;background:radial-gradient(ellipse,#d9dde1e8 0%,#c8ced5b8 42%,transparent 72%);filter:blur(20px);animation:storybook-fog 6.5s ease-in-out infinite alternate}.scene-fog .story-atmosphere:before{right:-42%;top:8%}.scene-fog .story-atmosphere:after{right:-25%;top:42%;animation-delay:-3.2s}.scene-fog .story-backdrop{animation:storybook-drain 5s ease both}.scene-still .story-backdrop{filter:saturate(.48) brightness(.7);transform:scale(1.035)}.scene-still .story-particles{display:none}.scene-arrival .story-backdrop{animation:storybook-arrival 6s ease both}.scene-restore .story-backdrop{animation:storybook-restore 4.2s ease both}.scene-restore .story-atmosphere:after{content:"";position:absolute;inset:10%;background:radial-gradient(circle,#ffd5678f,transparent 62%);filter:blur(18px);animation:story-glow 1.5s ease-in-out infinite alternate}.story-game-enter .canvas-frame{animation:storybook-game-enter .85s ease both}
@keyframes storybook-fog{from{transform:translate3d(8%,2%,0) scale(.9);opacity:.55}to{transform:translate3d(-24%,8%,0) scale(1.18);opacity:.95}}@keyframes storybook-drain{from{filter:saturate(1) brightness(.84);transform:scale(1.08) translateX(-2%)}to{filter:saturate(.62) brightness(.68);transform:scale(1.02) translateX(2%)}}@keyframes storybook-arrival{from{transform:scale(1.12) translateX(3%)}to{transform:scale(1.02) translateX(-1%)}}@keyframes storybook-restore{from{filter:grayscale(1) saturate(.2) brightness(.64);transform:scale(1.06)}to{filter:grayscale(0) saturate(1.15) brightness(.88);transform:scale(1.01)}}@keyframes storybook-game-enter{from{opacity:.3;filter:brightness(1.45);transform:scale(1.025)}to{opacity:1;filter:none;transform:none}}
.scene-rain .story-atmosphere{background:repeating-linear-gradient(106deg,transparent 0 34px,#dff6ff80 35px 37px,transparent 38px 66px);animation:story-rain .7s linear infinite}.scene-rain .story-backdrop{filter:saturate(.72) brightness(.72)}.scene-path .story-atmosphere:after,.scene-memory .story-atmosphere:after,.scene-moon .story-atmosphere:after,.scene-aurora .story-atmosphere:after{content:"";position:absolute;inset:12%;border-radius:50%;background:radial-gradient(ellipse,#ffd86575,transparent 65%);filter:blur(16px);animation:story-glow 1.5s ease-in-out infinite alternate}.scene-path .story-backdrop,.scene-wind .story-backdrop{animation:storybook-arrival 6s ease both}.scene-wind .story-particles i{animation-duration:3.2s}.scene-aurora .story-atmosphere:after{background:conic-gradient(from 210deg at 50% 20%,transparent,#59d9ff4f,#cf71ff50,#ffd05b4d,transparent);filter:blur(24px);animation:story-aurora 4s ease-in-out infinite alternate}.scene-memory .story-atmosphere:after{background:radial-gradient(ellipse,#bb78ff72,#ffcf7760 32%,transparent 67%)}.scene-moon .story-atmosphere:after{background:radial-gradient(ellipse at 68% 38%,#9575ff70,#5bdcff35 32%,transparent 68%)}.scene-finale .story-backdrop{animation:story-finale 5s ease both}.scene-finale .story-atmosphere:after{content:"";position:absolute;inset:0;background:conic-gradient(from 200deg at 50% 15%,transparent,#ff729b26,#ffd65a32,#6fe5c226,#77a7ff30,transparent);animation:story-aurora 3s ease-in-out infinite alternate}
@keyframes story-rain{to{transform:translate3d(-22px,34px,0)}}@keyframes story-aurora{to{transform:rotate(4deg) scale(1.12);opacity:.55}}@keyframes story-finale{from{filter:saturate(.65) brightness(.7);transform:scale(1.08)}to{filter:saturate(1.2) brightness(.9);transform:scale(1.01)}}