/* ===== 場景分層背景 ===== */
#backdrop{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
#backdrop .sc{position:absolute;inset:0;background:linear-gradient(var(--sky1),var(--sky2) 70%)}
#backdrop .sc.enter{animation:inkIn 1.6s ease-out both}
#backdrop .sc.leave{animation:fadeout 1.4s ease forwards}
@keyframes inkIn{0%{-webkit-mask-size:0% 0%;mask-size:0% 0%;filter:blur(8px)}60%{filter:blur(0)}100%{-webkit-mask-size:400% 400%;mask-size:400% 400%}}
#backdrop .sc.enter{-webkit-mask-image:radial-gradient(circle,#000 35%,rgba(0,0,0,.6) 50%,transparent 70%);mask-image:radial-gradient(circle,#000 35%,rgba(0,0,0,.6) 50%,transparent 70%);
  -webkit-mask-position:center 40%;mask-position:center 40%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
@keyframes fadeout{to{opacity:0}}
#backdrop .L{position:absolute;left:-24px;right:-24px;top:0;bottom:170px}
#backdrop .L svg{position:absolute;inset:0;width:100%;height:100%}
#backdrop .l-fx{left:0;right:0;bottom:0;overflow:hidden}
#backdrop .enter .l-far{animation:px 3.2s cubic-bezier(.2,.7,.2,1) both;--d:14px}
#backdrop .enter .l-mid{animation:px 3.2s cubic-bezier(.2,.7,.2,1) both;--d:30px}
#backdrop .enter .l-near{animation:px 3.2s cubic-bezier(.2,.7,.2,1) both;--d:60px}
@keyframes px{from{transform:translateX(var(--d)) scale(1.04)}to{transform:none}}
#backdrop .l-sky{animation:breathe 30s ease-in-out infinite alternate}
@keyframes breathe{to{transform:scale(1.05) translateY(-6px)}}
#backdrop .vig{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 35%,transparent 45%,rgba(0,0,0,.28));pointer-events:none}
.t-day #backdrop .vig,.sc.t-day .vig,.sc.t-dawn .vig{background:radial-gradient(ellipse at 50% 35%,transparent 50%,rgba(60,40,20,.18))}
#backdrop .bd-place{position:absolute;right:30px;top:110px;writing-mode:vertical-rl;font-family:var(--title);font-weight:900;font-size:44px;letter-spacing:.25em;opacity:.13;color:var(--ink)}
.sc.t-night .bd-place,.sc.t-storm .bd-place{color:#efe6d2;opacity:.1}

/* 時辰色調 */
.sc.t-night,body[data-bg=night]{--k1:#07080c;--k2:#151823;--k3:#262c3c;--k4:#363d52;--lt:#f6d58c;--mo:#f4ecd6;--wt:#1a2232;--wl:#5d6b85;--ac:#9a3a2c;--sky1:#0e1220;--sky2:#2a2f40;--wood:#2a1d14;--wallc:#3a2a1e}
.sc.t-dusk,body[data-bg=dusk]{--k1:#24140d;--k2:#4a2c1d;--k3:#7e5139;--k4:#a8765a;--lt:#ffd98a;--mo:#c8432f;--wt:#9c6a50;--wl:#f0c99a;--ac:#8a2a22;--sky1:#ecbf8e;--sky2:#b9774f;--wood:#5a3a26;--wallc:#7a5236}
.sc.t-dawn,body[data-bg=dawn]{--k1:#25282b;--k2:#4a5153;--k3:#7d888a;--k4:#a5b0b1;--lt:#f1c27a;--mo:#f0c07a;--wt:#9fb0b3;--wl:#f3ead8;--ac:#8a3a2f;--sky1:#b5c3c8;--sky2:#ead3a9;--wood:#6b5440;--wallc:#9c8366}
.sc.t-day,body[data-bg=day]{--k1:#1f1b16;--k2:#4a4036;--k3:#857b69;--k4:#b3a990;--lt:#f2d38a;--mo:#e8b84a;--wt:#87a2a2;--wl:#eef3ea;--ac:#a8322d;--sky1:#dbe3dc;--sky2:#efe6d2;--wood:#7a5d43;--wallc:#b49c78}
.sc.t-storm,body[data-bg=storm]{--k1:#030405;--k2:#0c0e12;--k3:#181c23;--k4:#232831;--lt:#d8c48a;--mo:#9aa3ad;--wt:#141920;--wl:#3a4452;--ac:#5a1f1a;--sky1:#0a0c10;--sky2:#20252d;--wood:#1a130e;--wallc:#241a12}
body[data-bg=night]{background:#1c2030}body[data-bg=dusk]{background:#b9774f}body[data-bg=dawn]{background:#d9c9a6}
body[data-bg=day]{background:#e9e1cc}body[data-bg=storm]{background:#15181e}

/* SVG 填色 */
.sc .k1{fill:var(--k1)}.sc .k2{fill:var(--k2)}.sc .k3{fill:var(--k3)}.sc .k4{fill:var(--k4)}
.sc .mo{fill:var(--mo)}.sc .mo2{fill:#000;opacity:.05}.sc .sun{fill:var(--mo);opacity:.75}
.sc .halo{fill:var(--mo);opacity:.12;filter:blur(6px)}
.sc .star{fill:#fff;animation:tw 3s ease-in-out infinite alternate}
@keyframes tw{from{opacity:.15}to{opacity:.9}}
.sc .cl ellipse{fill:#fff;opacity:.35}.sc.t-night .cl ellipse{opacity:.06}.sc.t-dusk .cl ellipse{fill:#ffe2c0;opacity:.4}
.sc .cl.dark ellipse{fill:#000;opacity:.5}
.sc .drift{animation:drift 140s linear infinite}
@keyframes drift{to{transform:translateX(-400px)}}
.sc .cl.dark .drift{animation-duration:50s}
.sc .sea{fill:var(--wt)}
.sc .w1{fill:var(--k1)}.sc .w2{fill:var(--k2)}.sc .w3{fill:var(--wt);filter:brightness(1.15)}
.sc .wave{animation:wave 9s linear infinite}
@keyframes wave{to{transform:translateX(100px)}}
.sc .rip{fill:var(--wl);opacity:.25;animation:rip 4s ease-in-out infinite alternate}
@keyframes rip{from{opacity:.05;transform:translateX(-6px)}to{opacity:.35;transform:translateX(6px)}}
.sc .moonpath{fill:var(--mo);opacity:.12;filter:blur(10px);animation:shim 3s ease-in-out infinite alternate}
@keyframes shim{to{opacity:.22}}
.sc .win{fill:var(--k1);opacity:.6}
.sc .win.lit{fill:var(--lt);opacity:.75;animation:lamp 3s ease-in-out infinite alternate}
@keyframes lamp{0%{opacity:.55}50%{opacity:.85}100%{opacity:.65}}
.sc .lan{fill:var(--ac)}
.sc.t-night .lan,.sc.t-storm .lan,.sc.t-dusk .lan{fill:#d0573a}
.sc .glow{fill:var(--lt);opacity:0;filter:blur(8px)}
.sc.t-night .glow,.sc.t-storm .glow,.sc.t-dusk .glow{opacity:.28}
.sc .flame{fill:#ffcf6b}
.sc .flick{animation:flick .18s steps(2) infinite alternate;transform-box:fill-box;transform-origin:50% 100%}
@keyframes flick{from{transform:scale(1,1);opacity:.9}to{transform:scale(.92,1.08);opacity:1}}
.sc .swing{animation:swing 4.5s ease-in-out infinite alternate}
@keyframes swing{from{transform:rotate(-4deg)}to{transform:rotate(4deg)}}
.sc .sway{animation:sway 5s ease-in-out infinite alternate}
@keyframes sway{from{transform:skewX(-3deg)}to{transform:skewX(4deg)}}
.sc .sway-s{animation:sways 6s ease-in-out infinite alternate}
@keyframes sways{from{transform:rotate(-.8deg)}to{transform:rotate(1deg)}}
.sc .bob{animation:bob 5s ease-in-out infinite alternate}
@keyframes bob{from{transform:translateY(-2px) rotate(-1deg)}to{transform:translateY(3px) rotate(1.2deg)}}
.sc .rock{animation:rock 6s ease-in-out infinite alternate}
@keyframes rock{from{transform:rotate(-1.4deg) translateY(-2px)}to{transform:rotate(1.4deg) translateY(3px)}}
.sc .sail{fill:#e8dcc0;opacity:.85}.sc.t-night .sail{fill:#3a3f4f;opacity:1}.sc.t-storm .sail{fill:#1c2028}.sc.t-dusk .sail{fill:#d9a77a}
.sc .mistband ellipse{fill:#fff;opacity:.35;filter:blur(8px)}.sc.t-night .mistband ellipse{opacity:.08}
.sc .mistband{animation:mb 30s ease-in-out infinite alternate}.sc .mistband.fast{animation-duration:18s}
@keyframes mb{from{transform:translateX(-30px)}to{transform:translateX(30px)}}
.sc .pk{fill:#e7a2ad}.sc.t-night .pk{fill:#8a5a66}.sc.t-dusk .pk{fill:#e59b8a}
.sc .moongate{fill:var(--sky2);opacity:.9}
.sc .wallc{fill:var(--wallc)}.sc .wood{fill:var(--wood)}
.sc .plank{stroke:var(--k1);stroke-width:1.5;opacity:.35}
.sc .pillar{fill:#5a2620}.sc.t-night .pillar,.sc.t-storm .pillar{fill:#2a1310}
.sc .floor{fill:var(--k2)}
.sc .skyfill{fill:var(--sky1)}
.sc .lattice line{stroke:var(--k1);stroke-width:3}
.sc .frame{fill:none;stroke:var(--k1);stroke-width:8}
.sc .warm{fill:url(#none);fill:#ffb24a;opacity:.07;mix-blend-mode:screen}
.sc .shaft{fill:#fff6dc;opacity:.12;filter:blur(6px)}
.sc .cloth{fill:#e9dcc0}.sc.t-night .cloth,.sc.t-storm .cloth{fill:#8a7a5c}
.sc .flagtx{font:900 20px var(--title);text-anchor:middle;fill:var(--ac)}
.sc .flag{animation:flag 3s ease-in-out infinite alternate}
@keyframes flag{from{transform:skewY(-3deg)}to{transform:skewY(4deg) scaleX(.94)}}
.sc .smoke path{fill:none;stroke:#e9dcc0;stroke-width:2;opacity:0;animation:smoke 4.8s ease-out infinite}
@keyframes smoke{0%{opacity:0;transform:translateY(0) scaleX(1)}20%{opacity:.35}100%{opacity:0;transform:translateY(-60px) scaleX(2.2)}}
.sc .flashwin{fill:#fff;opacity:0;animation:lit 7s infinite}
.sc *{transform-box:view-box}
.sc .flick{transform-box:fill-box}

/* 粒子 */
.l-fx i,.l-fx div{position:absolute;display:block;pointer-events:none}
.rain{top:-10%;width:1px;height:46px;background:linear-gradient(transparent,#cfd8e0);animation:rain .6s linear infinite;transform:rotate(12deg)}
@keyframes rain{to{transform:translate(-90px,120vh) rotate(12deg)}}
.lightning{inset:0;background:#e8f0ff;opacity:0;animation:lit 7.5s infinite}
.lightning.soft{background:#cfe0ff}
@keyframes lit{0%,90%,100%{opacity:0}91%{opacity:.55}92%{opacity:.05}93.5%{opacity:.4}96%{opacity:0}}
.ff{width:4px;height:4px;border-radius:50%;background:#f8f0a0;box-shadow:0 0 8px 3px rgba(240,230,120,.6);animation:ff 9s ease-in-out infinite}
@keyframes ff{0%{transform:translate(0,0);opacity:0}20%{opacity:1}50%{transform:translate(30px,-40px);opacity:.3}75%{opacity:1}100%{transform:translate(-20px,-80px);opacity:0}}
.petal{top:-5%;width:9px;height:6px;border-radius:60% 0;background:#eba7b2;animation:fall 10s linear infinite}
.leaf{top:-5%;width:12px;height:6px;border-radius:70% 0;background:#8a5a2a;animation:fall 12s linear infinite}
@keyframes fall{0%{transform:translate(0,0) rotate(0)}25%{transform:translate(-30px,25vh) rotate(160deg)}50%{transform:translate(20px,50vh) rotate(300deg)}75%{transform:translate(-40px,75vh) rotate(460deg)}100%{transform:translate(-10px,110vh) rotate(620deg)}}
.mist{left:-60%;width:160%;height:90px;background:radial-gradient(ellipse,rgba(255,255,255,.35),transparent 70%);animation:mist 50s linear infinite;filter:blur(4px)}
.sc.t-night .mist{opacity:.35}
@keyframes mist{from{transform:translateX(-20%)}to{transform:translateX(40%)}}
.gust{left:-30%;width:120px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);animation:gust 2.4s linear infinite}
@keyframes gust{to{transform:translateX(160vw)}}
.bird{left:-10%;width:14px;height:6px;border:solid var(--k1);border-width:2px 0 0;border-radius:50% 50% 0 0;animation:bird 30s linear infinite;opacity:.7}
.bird::after{content:"";position:absolute;left:12px;top:-2px;width:14px;height:6px;border:solid var(--k1);border-width:2px 0 0;border-radius:50% 50% 0 0}
@keyframes bird{0%{transform:translate(0,0)}50%{transform:translate(60vw,-20px)}100%{transform:translate(125vw,10px)}}
.dust{width:3px;height:3px;border-radius:50%;background:#fff6dc;opacity:.5;animation:dust 10s ease-in-out infinite}
@keyframes dust{0%,100%{transform:translate(0,0);opacity:0}50%{transform:translate(20px,-30px);opacity:.6}}
.glint{width:18px;height:2px;background:#f4ecd6;border-radius:2px;animation:glint 3s ease-in-out infinite;opacity:0}
@keyframes glint{50%{opacity:.6}}

/* ===== 演出特效 ===== */
#fxLayer{position:fixed;inset:0;pointer-events:none;z-index:50}
#fxLayer .flash{position:absolute;inset:0;background:#fff;animation:fxFlash .55s ease-out forwards}
@keyframes fxFlash{0%{opacity:.95}100%{opacity:0}}
#fxLayer .red{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 30%,rgba(140,10,10,.75));animation:fxRed 1.6s ease-out forwards}
@keyframes fxRed{0%{opacity:0}15%{opacity:1}100%{opacity:0}}
#fxLayer .dark{position:absolute;inset:0;background:#000;animation:fxDark 2.2s ease-in-out forwards}
@keyframes fxDark{0%{opacity:0}40%,60%{opacity:1}100%{opacity:0}}
#fxLayer .bolt{position:absolute;inset:0;background:#eef4ff;animation:lit .9s linear forwards;animation-name:fxBolt}
@keyframes fxBolt{0%{opacity:.9}15%{opacity:.1}25%{opacity:.75}60%,100%{opacity:0}}
#fxLayer .big{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse 60% 45%,rgba(239,230,210,.92),rgba(239,230,210,.6) 55%,rgba(239,230,210,0) 100%);animation:fxBigBg 2.4s ease forwards}
#fxLayer .big span{font-family:var(--title);font-weight:900;color:#1f1b16;font-size:min(16vw,84px);letter-spacing:.12em;writing-mode:vertical-rl;
  text-shadow:0 0 1px #000,2px 2px 0 rgba(0,0,0,.15);animation:fxBig 2.4s cubic-bezier(.2,.8,.2,1) forwards}
#fxLayer .big span.h{writing-mode:horizontal-tb}
@keyframes fxBig{0%{opacity:0;transform:scale(1.6);filter:blur(12px)}18%{opacity:1;transform:scale(1);filter:blur(0)}80%{opacity:1}100%{opacity:0;transform:scale(1.04)}}
@keyframes fxBigBg{0%{opacity:0}15%,80%{opacity:1}100%{opacity:0}}
#fxLayer .seal{position:absolute;width:44px;height:44px;border:3px solid var(--red);background:var(--red);color:#efe6d2;font:900 16px var(--title);display:flex;align-items:center;justify-content:center;transform:rotate(-8deg);opacity:0;animation:seal .4s .5s ease-out forwards}
@keyframes seal{from{opacity:0;transform:scale(2) rotate(-8deg)}to{opacity:.9;transform:scale(1) rotate(-8deg)}}
#story.shake{animation:shake .5s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{10%,90%{transform:translate(-2px,1px)}20%,80%{transform:translate(4px,-2px)}30%,50%,70%{transform:translate(-7px,3px)}40%,60%{transform:translate(7px,-3px)}}

@media (prefers-reduced-motion:reduce){ .sc *,.l-fx *{animation:none!important} }