/*
 * Wanxiang Shanhai v3.5 cinematic layer.
 * This file is intentionally standalone: load it beside cinematic-fx.js.
 * The layer only paints over the existing battle DOM and never owns combat state.
 */
.shanhai-cinematic-layer{position:fixed;inset:0;z-index:19;overflow:hidden;pointer-events:none;contain:layout paint;isolation:isolate;font-family:"Songti SC","STSong","Hiragino Sans GB",serif;color:#f6ebcf}
.shanhai-cinematic-layer:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 42%,transparent 36%,rgba(1,5,7,.18) 75%,rgba(1,4,5,.55));opacity:0;transition:opacity .18s ease}
.cinematic-affinity-wood{--cinematic-accent:#72bf8f;--cinematic-soft:rgba(114,191,143,.22)}
.cinematic-affinity-fire{--cinematic-accent:#e26f54;--cinematic-soft:rgba(226,111,84,.24)}
.cinematic-affinity-earth{--cinematic-accent:#c7a45c;--cinematic-soft:rgba(199,164,92,.24)}
.cinematic-affinity-metal{--cinematic-accent:#d8d4c6;--cinematic-soft:rgba(216,212,198,.24)}
.cinematic-affinity-water{--cinematic-accent:#62aeca;--cinematic-soft:rgba(98,174,202,.24)}
.cinematic-affinity-neutral{--cinematic-accent:#d9bd72;--cinematic-soft:rgba(217,189,114,.2)}
.cinematic-banner{position:absolute;left:50%;top:15%;width:min(88vw,510px);padding:9px 16px 10px;display:grid;justify-items:center;gap:4px;transform:translate(-50%,-14px) scale(.98);opacity:0;border-top:1px solid var(--cinematic-accent,#d9bd72);border-bottom:1px solid color-mix(in srgb,var(--cinematic-accent,#d9bd72),transparent 35%);background:linear-gradient(90deg,transparent,rgba(6,17,19,.9) 17%,rgba(20,40,39,.94) 50%,rgba(6,17,19,.9) 83%,transparent);box-shadow:0 0 34px var(--cinematic-soft,rgba(217,189,114,.2));animation:cinematic-banner-in .72s cubic-bezier(.18,.82,.22,1) forwards}
.cinematic-banner:before{content:"";position:absolute;inset:2px 18%;border-top:1px solid color-mix(in srgb,var(--cinematic-accent,#d9bd72),transparent 78%);border-bottom:1px solid color-mix(in srgb,var(--cinematic-accent,#d9bd72),transparent 78%);opacity:.6}
.cinematic-banner-kicker{position:relative;color:var(--cinematic-accent,#d9bd72);font:700 9px/1.2 ui-sans-serif,system-ui,sans-serif;letter-spacing:.28em;text-transform:uppercase}
.cinematic-banner-title{position:relative;color:#fff2d2;font-size:clamp(19px,5.5vw,29px);font-weight:600;letter-spacing:.14em;text-shadow:0 2px 12px #000;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cinematic-banner-note{position:relative;color:#b7c9c0;font:11px/1.3 ui-sans-serif,system-ui,sans-serif;letter-spacing:.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cinematic-banner.cinematic-skill{top:20%;padding-top:11px;padding-bottom:12px}
.cinematic-banner.cinematic-skill .cinematic-banner-title{font-size:clamp(21px,6.2vw,32px)}
.cinematic-banner.cinematic-boss{top:11%;padding-top:12px;padding-bottom:13px;background:linear-gradient(90deg,rgba(29,8,8,.05),rgba(40,13,13,.94) 19%,rgba(50,22,17,.96) 50%,rgba(40,13,13,.94) 81%,rgba(29,8,8,.05));box-shadow:0 0 42px rgba(210,85,63,.32)}
.cinematic-banner.cinematic-boss .cinematic-banner-kicker{color:#f1a070}
.cinematic-banner.cinematic-victory,.cinematic-banner.cinematic-defeat{top:39%;width:min(90vw,560px);padding:20px 16px 22px;background:radial-gradient(ellipse,rgba(26,70,61,.93),rgba(4,12,14,.91) 72%,transparent);border:1px solid var(--cinematic-accent,#d9bd72);box-shadow:0 0 70px var(--cinematic-soft,rgba(217,189,114,.24));animation:cinematic-victory-in .82s cubic-bezier(.16,.84,.22,1) forwards}
.cinematic-banner.cinematic-victory .cinematic-banner-title,.cinematic-banner.cinematic-defeat .cinematic-banner-title{font-size:clamp(29px,9vw,49px);letter-spacing:.2em}
.cinematic-banner.cinematic-stage{top:27%;padding-top:17px;padding-bottom:18px}
.cinematic-banner.cinematic-team-switch{top:42%;left:52%;width:auto;min-width:150px;padding:7px 15px;background:rgba(6,16,18,.88);border:1px solid var(--cinematic-accent,#d9bd72);animation:cinematic-switch-in .55s ease-out forwards}
.cinematic-banner.cinematic-team-switch .cinematic-banner-title{font-size:17px;letter-spacing:.13em}
.cinematic-banner.cinematic-team-switch .cinematic-banner-note{font-size:10px}
.cinematic-banner.cinematic-director-break{top:31%;width:min(90vw,520px);background:linear-gradient(90deg,transparent,rgba(12,41,39,.94) 18%,rgba(25,65,57,.97) 50%,rgba(12,41,39,.94) 82%,transparent);box-shadow:0 0 44px rgba(114,191,143,.28);animation:cinematic-banner-in .62s cubic-bezier(.18,.82,.22,1) forwards}
.cinematic-banner.cinematic-director-break .cinematic-banner-kicker{color:#8ed9a7}
.cinematic-banner.cinematic-director-danger{top:18%;width:min(92vw,540px);background:linear-gradient(90deg,transparent,rgba(55,13,13,.95) 16%,rgba(79,23,17,.98) 50%,rgba(55,13,13,.95) 84%,transparent);border-color:#ef8d67;box-shadow:0 0 48px rgba(226,111,84,.38);animation:cinematic-banner-in .62s cubic-bezier(.18,.82,.22,1) forwards}
.cinematic-banner.cinematic-director-danger .cinematic-banner-kicker{color:#ffad78}
.cinematic-banner.cinematic-director-interrupt{top:34%;width:min(90vw,520px);background:linear-gradient(90deg,transparent,rgba(25,35,31,.95) 17%,rgba(53,63,44,.98) 50%,rgba(25,35,31,.95) 83%,transparent);box-shadow:0 0 44px rgba(199,164,92,.32);animation:cinematic-banner-in .62s cubic-bezier(.18,.82,.22,1) forwards}
.cinematic-banner.cinematic-director-interrupt .cinematic-banner-kicker{color:#f0d28a}
.cinematic-impact{position:absolute;width:72px;height:72px;margin:-36px 0 0 -36px;border:1px solid var(--cinematic-accent,#d9bd72);border-radius:50%;background:radial-gradient(circle,rgba(255,243,201,.9) 0 3%,var(--cinematic-soft,rgba(217,189,114,.24)) 4% 15%,transparent 58%);box-shadow:0 0 0 8px var(--cinematic-soft,rgba(217,189,114,.18)),0 0 35px var(--cinematic-accent,#d9bd72);animation:cinematic-impact .38s cubic-bezier(.2,.8,.2,1) forwards}
.cinematic-impact:before,.cinematic-impact:after{content:"";position:absolute;left:50%;top:50%;width:110px;height:1px;background:linear-gradient(90deg,transparent,var(--cinematic-accent,#d9bd72),transparent);transform:translate(-50%,-50%) rotate(45deg)}
.cinematic-impact:after{transform:translate(-50%,-50%) rotate(-45deg)}
.cinematic-impact.cinematic-heal{border-radius:42% 58% 54% 46%;background:radial-gradient(circle,rgba(239,255,220,.88) 0 4%,rgba(104,210,151,.22) 5% 22%,transparent 63%);box-shadow:0 0 0 10px rgba(114,191,143,.16),0 0 34px #72bf8f}
.cinematic-impact.cinematic-counter{transform:rotate(45deg);border-radius:7px}
.cinematic-trajectory{position:absolute;height:2px;transform-origin:0 50%;background:linear-gradient(90deg,transparent,var(--cinematic-accent,#d9bd72) 20%,#fff2c7 52%,transparent);box-shadow:0 0 12px var(--cinematic-accent,#d9bd72);opacity:0;animation:cinematic-trajectory .34s cubic-bezier(.22,.8,.22,1) forwards}
.cinematic-amount{position:absolute;color:var(--cinematic-accent,#d9bd72);font:900 19px/1 ui-sans-serif,system-ui,sans-serif;text-shadow:0 2px 4px #000,0 0 13px currentColor;transform:translate(-50%,-50%);animation:cinematic-amount .62s ease-out forwards;white-space:nowrap}
.cinematic-amount.cinematic-heal{color:#8ed9a7}.cinematic-amount.cinematic-damage{color:#f0a17e}.cinematic-amount.cinematic-counter{color:#e8d28a}
.cinematic-rune{position:absolute;left:50%;top:48%;width:min(48vw,210px);height:min(48vw,210px);border:1px solid var(--cinematic-accent,#d9bd72);border-radius:50%;transform:translate(-50%,-50%) scale(.55) rotate(-18deg);opacity:0;box-shadow:0 0 0 12px var(--cinematic-soft,rgba(217,189,114,.14)),inset 0 0 28px var(--cinematic-soft,rgba(217,189,114,.14)),0 0 44px var(--cinematic-accent,#d9bd72);animation:cinematic-rune .72s ease-out forwards}
.cinematic-rune:before,.cinematic-rune:after{content:"";position:absolute;left:50%;top:50%;width:130%;height:1px;background:linear-gradient(90deg,transparent,var(--cinematic-accent,#d9bd72),transparent);transform:translate(-50%,-50%) rotate(30deg)}
.cinematic-rune:after{transform:translate(-50%,-50%) rotate(-30deg)}
.cinematic-boss-seal{position:absolute;right:8%;top:18%;width:54px;height:54px;border:1px solid #ef8d67;color:#ef8d67;display:grid;place-items:center;font:700 11px/1.1 ui-sans-serif,system-ui,sans-serif;letter-spacing:.08em;transform:rotate(8deg);opacity:0;animation:cinematic-seal-in .6s .08s ease-out forwards;box-shadow:0 0 22px rgba(226,111,84,.24)}
.cinematic-battle-in .combat-card{animation:cinematic-card-in .68s cubic-bezier(.18,.86,.22,1) var(--cinematic-delay,0ms) both}
.combat-card.cinematic-source{box-shadow:0 0 0 2px var(--cinematic-accent,#d9bd72),0 0 28px var(--cinematic-soft,rgba(217,189,114,.2));border-color:var(--cinematic-accent,#d9bd72)}
.combat-card.cinematic-target-hit{animation:cinematic-target-hit .22s steps(2,end) both;box-shadow:0 0 0 2px #f2b18a,0 0 34px rgba(238,125,92,.38)}
.combat-card.cinematic-target-heal{animation:cinematic-target-heal .52s ease-out both;box-shadow:0 0 0 2px #8ed9a7,0 0 28px rgba(114,191,143,.34)}
.combat-card.cinematic-target-counter{animation:cinematic-target-counter .32s ease-out both;box-shadow:0 0 0 2px #e8d28a,0 0 31px rgba(232,210,138,.34)}
#battle-screen.cinematic-camera-push .arena{animation:cinematic-camera-push .54s cubic-bezier(.2,.76,.2,1) both}
#battle-screen.cinematic-enemy-pressure .arena{box-shadow:inset 0 0 55px rgba(215,85,67,.2),0 0 20px rgba(215,85,67,.08);animation:cinematic-pressure .62s ease-out both}
#battle-screen.cinematic-boss-arena .arena{box-shadow:inset 0 0 32px rgba(224,91,67,.08)}
#battle-screen.cinematic-boss-pressure:before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border:1px solid rgba(226,111,84,.25);box-shadow:inset 0 0 80px rgba(130,25,20,.2);animation:cinematic-pressure .72s ease-out both}
#battle-screen.cinematic-victory:after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(circle at 50% 44%,rgba(241,219,137,.18),transparent 36%);animation:cinematic-victory-glow .9s ease-out both}
#battle-screen.cinematic-director-break .arena{box-shadow:inset 0 0 48px rgba(114,191,143,.2),0 0 22px rgba(114,191,143,.1)}
#battle-screen.cinematic-director-danger .arena{box-shadow:inset 0 0 58px rgba(226,111,84,.28),0 0 22px rgba(226,111,84,.12)}
#battle-screen.cinematic-director-interrupt .arena{box-shadow:inset 0 0 48px rgba(199,164,92,.24),0 0 22px rgba(199,164,92,.1)}
#battle-screen.cinematic-stage-2{--cinematic-terrain:#c7a45c}#battle-screen.cinematic-stage-3{--cinematic-terrain:#62aeca}
@keyframes cinematic-banner-in{0%{opacity:0;transform:translate(-50%,-14px) scale(.98)}18%,75%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,7px) scale(1.01)}}
@keyframes cinematic-victory-in{0%{opacity:0;transform:translate(-50%,20px) scale(.86)}18%,80%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-5px) scale(1.02)}}
@keyframes cinematic-switch-in{0%{opacity:0;transform:translate(-50%,9px) scale(.9)}22%,75%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-5px) scale(1.02)}}
@keyframes cinematic-card-in{0%{opacity:0;transform:translateY(18px) scale(.94)}65%{opacity:1;transform:translateY(-3px) scale(1.015)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes cinematic-impact{0%{opacity:0;transform:scale(.35) rotate(0)}20%{opacity:1}100%{opacity:0;transform:scale(1.55) rotate(25deg)}}
@keyframes cinematic-trajectory{0%{opacity:0;transform:rotate(var(--cinematic-angle,0deg)) scaleX(0)}18%{opacity:1}100%{opacity:0;transform:rotate(var(--cinematic-angle,0deg)) scaleX(1)}}
@keyframes cinematic-amount{0%{opacity:0;transform:translate(-50%,0) scale(.72)}18%{opacity:1;transform:translate(-50%,-10px) scale(1.08)}100%{opacity:0;transform:translate(-50%,-43px) scale(.94)}}
@keyframes cinematic-rune{0%{opacity:0;transform:translate(-50%,-50%) scale(.55) rotate(-18deg)}22%{opacity:.75}100%{opacity:0;transform:translate(-50%,-50%) scale(1.06) rotate(22deg)}}
@keyframes cinematic-seal-in{0%{opacity:0;transform:rotate(8deg) scale(.72)}24%,72%{opacity:.86;transform:rotate(8deg) scale(1)}100%{opacity:0;transform:rotate(8deg) scale(1.06)}}
@keyframes cinematic-target-hit{0%,100%{transform:translate3d(0,0,0)}35%{transform:translate3d(-5px,0,0)}70%{transform:translate3d(5px,0,0)}}
@keyframes cinematic-target-heal{0%{filter:brightness(1)}30%{filter:brightness(1.45)}100%{filter:brightness(1)}}
@keyframes cinematic-target-counter{0%{transform:rotate(0)}35%{transform:rotate(-2deg) scale(1.035)}70%{transform:rotate(2deg) scale(1.01)}100%{transform:rotate(0)}}
@keyframes cinematic-camera-push{0%{transform:scale(1)}34%{transform:scale(1.012) translateY(-2px)}100%{transform:scale(1)}}
@keyframes cinematic-pressure{0%{opacity:.55;transform:scale(1)}35%{opacity:1;transform:scale(1.006)}100%{opacity:1;transform:scale(1)}}
@keyframes cinematic-victory-glow{0%{opacity:0}36%{opacity:1}100%{opacity:0}}
@media(max-width:430px){.cinematic-banner{top:16%;width:92vw;padding-left:10px;padding-right:10px}.cinematic-banner.cinematic-skill{top:23%}.cinematic-banner.cinematic-boss{top:12%}.cinematic-banner.cinematic-director-break{top:29%}.cinematic-banner.cinematic-director-danger{top:17%}.cinematic-banner.cinematic-director-interrupt{top:32%}.cinematic-banner.cinematic-victory,.cinematic-banner.cinematic-defeat{top:38%}.cinematic-banner-note{font-size:10px}.cinematic-boss-seal{right:4%;top:20%;width:46px;height:46px;font-size:9px}.cinematic-impact{width:62px;height:62px;margin:-31px 0 0 -31px}}
html[data-reduced-motion="true"] .shanhai-cinematic-layer:before{transition:none}html[data-reduced-motion="true"] .shanhai-cinematic-layer *,html[data-reduced-motion="true"] .cinematic-battle-in .combat-card,html[data-reduced-motion="true"] #battle-screen.cinematic-camera-push .arena,html[data-reduced-motion="true"] #battle-screen.cinematic-enemy-pressure .arena,html[data-reduced-motion="true"] #battle-screen.cinematic-boss-pressure:before,html[data-reduced-motion="true"] #battle-screen.cinematic-victory:after{animation-duration:.04s!important;animation-iteration-count:1!important}html[data-reduced-motion="true"] .cinematic-battle-in .combat-card{animation:none!important}html[data-reduced-motion="true"] .cinematic-rune{display:none}html[data-reduced-motion="true"] .cinematic-impact,html[data-reduced-motion="true"] .cinematic-trajectory,html[data-reduced-motion="true"] .cinematic-amount{animation-duration:.04s!important}html[data-reduced-motion="true"] .cinematic-boss-seal{animation-duration:.04s!important}