.story-entry{border-color:#c8ae73!important;color:#ffe2a0!important}.story-map{max-width:1150px;margin:auto;padding:24px 0 60px}.story-banner{padding:44px;border:1px solid #4b5265;border-radius:20px;background:radial-gradient(ellipse at 85% 15%,#56778e55,transparent 60%),linear-gradient(125deg,#172d35,#191c30 65%,#332a39);position:relative}.story-banner h1{font-size:clamp(32px,5vw,54px);margin:16px 0}.story-banner p{line-height:1.9;color:#c9d4de}.story-banner>span,.story-footnote{font-size:12px;color:#a6b4c7;line-height:1.9}.story-progress{height:4px;background:#414758;margin:24px 0 12px;max-width:440px}.story-progress i{display:block;height:100%;background:#ead295;transition:width .4s}.story-toolbar,.story-resume{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:20px 0}.story-resume{background:#243349;padding:16px;border-radius:10px;justify-content:space-between}.story-toolbar select{margin-left:12px;padding:10px;background:#1a2333;color:#ece8dc;border:1px solid #536071;border-radius:8px}.story-nodes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.story-node{padding:26px;background:linear-gradient(140deg,#1a2434,#131c29);border:1px solid #344253;border-top:2px solid var(--accent);border-radius:14px}.story-node.locked{opacity:.64}.story-node-top{display:flex;justify-content:space-between;color:var(--accent);font-size:12px;letter-spacing:1px}.story-node-top b{font-weight:400}.story-node h2{font-size:23px;margin:18px 0 8px}.story-node p{font-size:13px;line-height:1.9;color:#a8b5c8}.story-location{color:#d4c094!important}.story-reward{background:#ffffff05;border:1px solid #ffffff12;border-radius:8px;padding:12px;margin:18px 0}.story-reward span,.story-reward small{display:block;line-height:1.7}.story-reward span{color:#eddbb1;font-size:13px}.story-reward small{font-size:11px;color:#99adbf}.story-node-actions{display:flex;gap:8px;flex-wrap:wrap}.story-node-actions button{font-size:12px}.story-epilogue{text-align:center;padding:40px;color:#e5d6b8}.story-scene{position:relative;isolation:isolate;max-width:1100px;min-height:620px;margin:20px auto;border:1px solid #465263;border-radius:20px;overflow:hidden;background:#121c2c}.scene-backdrop{position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,#0d1428 5%,#11162b44 80%),url('fields-v8.png') center/cover;filter:saturate(.5);opacity:.5}.scene-header{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:22px;color:#dfcfac;font-size:13px}.scene-stage{height:260px;position:relative;display:flex;align-items:end;justify-content:center;overflow:hidden}.scene-stage>span{position:absolute;bottom:10px;left:24px;font-size:12px;letter-spacing:2px;color:#d5d3d0}.scene-portrait{height:440px;width:290px;align-self:start;background-image:var(--hero-image);background-size:var(--hero-size);background-position:var(--hero-x) 12%;mask-image:linear-gradient(black 70%,transparent)}.scene-sigil{font-size:160px;color:#e1cd94;text-shadow:0 0 70px #bca561}.scene-dialogue{margin:0 24px 24px;padding:28px 32px;border:1px solid #87939f55;border-left:3px solid var(--accent);background:#101b2bf2;border-radius:12px;min-height:220px}.scene-dialogue .eyebrow{color:var(--accent)}.scene-dialogue>p{font-size:clamp(17px,2vw,21px);line-height:1.9;min-height:84px;color:#eee9df;white-space:pre-wrap}.scene-controls{display:flex;justify-content:space-between;gap:15px;align-items:center}.scene-controls small{font-size:11px;color:#8c9bb3}.scene-controls>div{display:flex;gap:10px}.story-earned{padding:20px;margin:20px 0;background:#8cba9d12;border:1px solid #8cba9d66;border-radius:12px}.story-earned strong{color:#a9e3bd}.story-earned small{color:#a3b2c2}.story-result h2{font-size:30px}@media(max-width:650px){.story-nodes{grid-template-columns:1fr}.story-banner{padding:26px}.scene-header{align-items:start}.scene-header button{font-size:11px}.scene-stage{height:200px}.scene-dialogue{margin:0 12px 12px;padding:22px}.scene-controls{align-items:start;flex-direction:column}.scene-controls>div{width:100%;justify-content:end}.story-toolbar{align-items:stretch;flex-direction:column}.story-scene{min-height:570px}.story-map{padding-top:12px}}
/* Portrait and dialogue have separate grid cells; text can grow without covering art. */
.story-scene{display:grid;grid-template-columns:minmax(250px,.85fr) minmax(0,1.15fr);align-items:center;gap:18px;padding:22px;min-height:580px}.scene-header{grid-column:1/-1;padding:0 0 12px}.scene-stage{height:auto;min-height:450px;align-self:stretch;display:flex;flex-direction:column;justify-content:center;align-items:center;overflow:visible}.scene-portrait{width:100%;max-width:340px;height:440px;flex-shrink:0;align-self:center;background-position:var(--hero-x) top;mask-image:none;border-radius:14px;background-repeat:no-repeat;box-shadow:0 12px 36px #0004}.scene-stage>span{position:static;display:block;margin:14px 0 0;line-height:1.7;text-align:center}.scene-dialogue{margin:0;padding:26px;min-width:0;align-self:center}.scene-dialogue>p{min-height:0;overflow-wrap:anywhere}.scene-controls{flex-wrap:wrap}.scene-controls>div{margin-left:auto}.scene-sigil{font-size:150px}@media(max-width:750px){.story-scene{grid-template-columns:minmax(0,1fr);padding:16px;gap:16px;min-height:0}.scene-header{grid-column:1}.scene-stage{min-height:0}.scene-portrait{height:360px;width:min(100%,290px)}.scene-dialogue{padding:22px}.scene-controls{flex-direction:column;align-items:start}.scene-controls>div{margin-left:0;width:100%;justify-content:end}.scene-stage>span{margin-top:10px}}

.scene-portrait{height:auto;aspect-ratio:var(--scene-ratio,1 / 2);max-width:300px}@media(max-width:750px){.scene-portrait{height:auto;width:min(100%,240px)}}

.story-chapters{display:grid;gap:32px}.story-chapter>h2{margin:8px 0}.story-chapter>p{margin:0 0 15px;color:#c1c9d8}

.story-film{width:min(72vw,760px);max-width:100%;display:grid;gap:12px}
.story-film h2{margin:0;font-size:clamp(18px,3vw,26px)}

.story-film-preview{margin:0 0 12px}
@media(max-width:600px){.story-film{width:min(82vw,760px)}}
.story-film h2 small{font-size:.48em;color:#b9a78a;font-weight:500;margin-left:.6em}
.rain-stage{position:relative;isolation:isolate;overflow:hidden;border-radius:12px;aspect-ratio:16/9;width:min(100%,92dvh);justify-self:center;background:#293945 url('rain-childhood-bg.webp') center/cover}
.rain-stage>*{position:absolute;pointer-events:none}
.rain-fall{inset:-16% -4% 0 42%;opacity:.3;background:repeating-linear-gradient(107deg,transparent 0 25px,#b9e5f477 26px,transparent 27px 41px);mask-image:linear-gradient(90deg,transparent,#000 22%);transform:skewX(-7deg)}
.rain-actor{bottom:15%;height:81%;aspect-ratio:5/6;background-repeat:no-repeat;background-size:100% 100%;transform-origin:50% 94%}
.rain-cla{left:10%;background-image:url('rain-childhood-cla.webp')}
.rain-dep{right:9%;background-image:url('rain-childhood-dep.webp');transform:translateY(73%) rotate(6deg)}
.rain-actor i{position:absolute;width:7%;height:4%;background:#713348;transform-origin:center;border-radius:45% 45% 55% 55%;opacity:0}
.rain-cla i{left:62%;top:50%}
.rain-dep i{left:35%;top:49%}
.rain-stage[data-speaker="cla"] .rain-cla i,.rain-stage[data-speaker="dep"] .rain-dep i{opacity:1;animation:rain-mouth .31s steps(3,end) infinite alternate}
.rain-desk{inset:77% -1% 0;background:repeating-linear-gradient(4deg,#925c31aa 0 1px,transparent 2px 23px),linear-gradient(170deg,#a2693d,#774429 66%,#552f23);box-shadow:inset 0 4px 0 #e0a56d,inset 0 8px 13px #e2a36665,0 -1px 7px #30180b55}
.rain-map{left:51%;top:77%;width:22%;height:16%;transform:translateX(132%) rotate(-7deg);transform-origin:right center;opacity:0}
.rain-map span{position:absolute;inset:0;background:linear-gradient(112deg,#f1d4a3,#d9b88b 50%,#efd7a8 51%,#e2be87);clip-path:polygon(4% 8%,48% 0,55% 10%,98% 0,95% 92%,56% 100%,43% 91%,0 99%);box-shadow:inset 0 0 11px #854f39}
.rain-map span::after{content:"";position:absolute;inset:14% 10%;background:repeating-radial-gradient(ellipse at 68% 60%,transparent 0 7px,#936a474a 8px 9px);opacity:.62}
.rain-map i{position:absolute;right:-15%;top:-31%;width:35%;height:50%;border-radius:28% 70% 48% 52%;background:linear-gradient(95deg,#ecc4a0 0 47%,#8596cb 49%);transform-origin:100% 0}
.rain-cup{left:34%;top:70%;width:8%;height:15%;transform-origin:50% 85%}
.rain-cup::before{content:"";position:absolute;left:-12%;bottom:0;width:126%;height:28%;border-radius:50%;background:#eed2aa;box-shadow:0 3px 2px #482c21aa}
.rain-cup::after{content:"";position:absolute;left:80%;top:36%;width:30%;height:29%;border:3px solid #e8c5a0;border-left:0;border-radius:0 70% 70% 0}
.rain-cup span{position:absolute;inset:12% 8% 13% 0;border-radius:20% 20% 38% 38%;background:linear-gradient(#733c25 0 19%,#fff0d3 22%,#e4c4a5 95%)}
.rain-route{inset:0;width:100%;height:100%;overflow:visible}
.rain-route path{fill:none;stroke:#9bfffa;stroke-linecap:round;stroke-width:4;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 6px #46edff) drop-shadow(0 0 13px #35d6e6)}
.rain-caption{margin:0;min-height:2.8em;text-align:center;font-size:clamp(14px,2.5vw,20px);line-height:1.4;color:#ead7ac;font-weight:650}
.rain-caption[data-speaker="dep"]{color:#bceaff}
.rain-caption[data-speaker="cla"]{color:#ffe0aa}
.rain-controls{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.rain-controls label{font-size:13px;margin-right:auto;color:#d5dbea}
.rain-playing .rain-fall{animation:rain-fall .72s linear infinite}
.rain-playing .rain-dep{animation:rain-dep 16s ease-in-out both}
.rain-playing .rain-cla{animation:rain-cla 16s ease-in-out both}
.rain-playing .rain-map{animation:rain-map 16s ease-in-out both}
.rain-playing .rain-map i{animation:rain-hand 16s ease-in-out both}
.rain-playing .rain-cup{animation:rain-cup 16s ease-in-out both}
.rain-playing .rain-route path{animation:rain-route 16s ease-out both}
@keyframes rain-fall{to{transform:translate(13px,9%) skewX(-7deg)}}
@keyframes rain-mouth{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
@keyframes rain-dep{0%,7%{transform:translateY(73%) rotate(6deg)}11%{transform:translateY(37%) rotate(6deg)}17%{transform:translateY(1%) rotate(-6deg)}21%{transform:translateY(5%) rotate(-2deg)}29%{transform:translate(-10%,4%) rotate(-5deg)}36%,55%{transform:translateY(3%) rotate(-2deg)}62%{transform:translateY(-4%) rotate(5deg)}70%,100%{transform:translateY(1%) rotate(2deg)}}
@keyframes rain-cla{0%,12%{transform:translateY(1%)}23%,34%{transform:rotate(5deg)}44%{transform:translateX(-9%) rotate(-6deg)}53%,57%{transform:rotate(1deg)}63%{transform:translateY(-3%) rotate(6deg)}74%,100%{transform:translateY(1%) rotate(3deg)}}
@keyframes rain-map{0%,22%{opacity:0;transform:translateX(132%) rotate(-7deg)}24%{opacity:1;transform:translateX(107%) rotate(-7deg)}39%,100%{opacity:1;transform:translateX(0) rotate(2deg)}}
@keyframes rain-hand{0%,38%{opacity:1;transform:none}46%,100%{opacity:0;transform:translate(90%,-38%) rotate(18deg)}}
@keyframes rain-cup{0%,39%{transform:none}44%{transform:translateX(-86%) rotate(-7deg)}51%,100%{transform:translateX(-105%)}}
@keyframes rain-route{0%,56%{stroke-dashoffset:1;opacity:0}59%{opacity:1}76%,95%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:.62}}
@media(prefers-reduced-motion:reduce){.rain-playing .rain-fall,.rain-stage .rain-actor i{animation:none}}

.deck-slot-picker{display:flex;align-items:center;gap:12px;margin:12px 0;font-weight:600}
.scene-route-memory{width:min(94%,580px,100dvh);margin:auto;filter:drop-shadow(0 12px 28px #081322aa)}
.scene-route-memory svg{display:block;width:100%;height:auto}
.scene-route-drawn{stroke-dasharray:1;animation:scene-route-draw 2.3s ease-in-out both}
.scene-route-umbrella{animation:scene-route-mark .45s 2.05s both}
@keyframes scene-route-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes scene-route-mark{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.scene-route-drawn,.scene-route-umbrella{animation:none}}

.rain-story-video{display:block;justify-self:center;width:min(100%,98dvh);max-height:55dvh;aspect-ratio:9/5;background:#101624;border-radius:12px}