/* Large, readable action cutaways with one impact flash per strike. */
.cinematic-scene{position:fixed;inset:0;z-index:1350;pointer-events:none;overflow:hidden;isolation:isolate;--action-color:#f6c67d;animation:cinema-enter .2s ease-out both}
.cinematic-shade{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 48%,#07101a33,#030712e8 85%)}
.cinematic-letterbox{position:absolute;left:0;right:0;height:7.5vh;background:#02050b;z-index:8}.cinematic-letterbox.top{top:0;border-bottom:1px solid var(--action-color)}.cinematic-letterbox.bottom{bottom:0;border-top:1px solid var(--action-color)}
.cinematic-speedlines{position:absolute;inset:-50%;opacity:.2;background:repeating-conic-gradient(from 12deg at 50% 50%,transparent 0 6deg,var(--action-color) 6.1deg 6.3deg,transparent 6.4deg 13deg);animation:cinema-speed .7s linear infinite;mask-image:radial-gradient(transparent 10%,#000 60%)}
.cinematic-orbit{position:absolute;left:50%;top:49%;width:min(67vw,590px);aspect-ratio:1;border:2px solid var(--action-color);border-radius:50%;box-shadow:0 0 45px var(--action-color),inset 0 0 50px var(--action-color);opacity:.23;transform:translate(-50%,-50%) rotateX(60deg);animation:cinema-orbit 1.4s ease-out both}.cinematic-orbit:after,.cinematic-orbit:before{content:"";position:absolute;inset:8%;border:2px dashed var(--action-color);border-radius:50%}.cinematic-orbit:after{inset:22%;border-style:solid;border-radius:15%;transform:rotate(45deg)}
.cinematic-title{position:absolute;left:50%;top:12%;width:90%;transform:translateX(-50%);text-align:center;z-index:7;color:#fff;animation:cinema-title .3s ease-out both;text-shadow:0 3px 3px #000,0 0 25px var(--action-color)}.cinematic-title small{display:block;font:600 11px Arial,sans-serif;letter-spacing:5px;color:var(--action-color);margin-bottom:12px}.cinematic-title strong{font-size:clamp(25px,4vw,51px);font-weight:800;letter-spacing:-1.5px}
.cinematic-actor{position:absolute;width:min(30vw,330px);height:min(62vh,480px);top:26%;z-index:4;filter:drop-shadow(0 0 25px var(--action-color));will-change:transform;transform-origin:50% 70%}.cinematic-actor img{width:100%;height:100%;object-fit:cover;object-position:50% 23%;clip-path:polygon(9% 0,100% 0,91% 100%,0 100%);mask-image:linear-gradient(#000 72%,transparent 100%)}.cinematic-actor-copy{position:absolute;left:3%;right:3%;bottom:8%;padding:15px 10px;background:linear-gradient(90deg,transparent,#050c1ee8 20%,#050c1ee8 80%,transparent);text-align:center;border-block:1px solid var(--action-color);color:#fff;text-shadow:0 2px 5px #000}.cinematic-actor-copy strong{font-size:clamp(16px,2vw,25px);display:block}.cinematic-actor-copy span{display:block;font:700 16px Georgia,serif;letter-spacing:3px;margin-top:8px;color:var(--action-color)}
.cinematic-actor.striker{left:12%;animation:cinema-strike 1.1s cubic-bezier(.18,.75,.2,1) both}.cinematic-actor.defender{right:12%;animation:cinema-defend .4s cubic-bezier(.15,.8,.2,1) both;filter:drop-shadow(0 0 18px #90b5df80)}.cinematic-actor.defender img{clip-path:polygon(0 0,91% 0,100% 100%,9% 100%)}
.cinematic-hero-target{position:absolute;right:8%;top:34%;width:30%;text-align:center;color:#b1c9e0;z-index:2;animation:cinema-defend .4s ease-out both}.cinematic-hero-target span{font:180px Georgia,serif;display:block;text-shadow:0 0 50px #9fbdff}.cinematic-hero-target strong{font:600 12px Arial,sans-serif;letter-spacing:4px}
.cinematic-beam{position:absolute;left:-20%;top:44%;width:140%;height:90px;z-index:3;transform:rotate(-12deg) scaleX(0);background:linear-gradient(transparent,var(--action-color) 32%,#fff9d8 49%,white 50%,var(--action-color) 65%,transparent);filter:drop-shadow(0 0 18px var(--action-color));opacity:0}
.cinematic-impact{position:absolute;left:57%;top:48%;width:320px;height:320px;transform:translate(-50%,-50%);z-index:6;opacity:0}.cinematic-impact i{position:absolute;inset:0;border:5px solid var(--action-color);border-radius:50%;box-shadow:0 0 35px var(--action-color),inset 0 0 30px var(--action-color)}.cinematic-impact i:nth-child(2){inset:18%;border:3px solid #fff;transform:rotate(30deg);border-radius:8%}.cinematic-impact i:nth-child(3){inset:32%;background:radial-gradient(white,var(--action-color),transparent 72%);border:0}
.cinematic-glyph{position:absolute;left:57%;top:48%;transform:translate(-50%,-50%) scale(.3);opacity:0;z-index:5;font:230px Georgia,serif;color:white;text-shadow:0 0 20px white,0 0 70px var(--action-color)}
.cinematic-hit{position:absolute;left:58%;top:54%;z-index:9;text-align:center;color:#fff;transform:translate(-50%,-50%) scale(.3);opacity:0;white-space:nowrap;text-shadow:0 5px 1px #170b1a,0 0 30px var(--action-color)}.cinematic-hit small{display:block;font:800 11px Arial,sans-serif;letter-spacing:7px;color:var(--action-color)}.cinematic-hit b{font:900 clamp(86px,13vw,170px)/1 Georgia,serif;-webkit-text-stroke:2px #47221f}
.cinematic-streaks{position:absolute;inset:0;z-index:2;overflow:hidden}.cinematic-streaks i{position:absolute;width:35%;height:2px;left:-40%;top:calc(12% + var(--n)*5.5%);background:linear-gradient(90deg,transparent,var(--action-color),#fff);opacity:.55;transform:rotate(-12deg);animation:cinema-streak .45s linear infinite;animation-delay:calc(var(--n)*-.035s)}
.cinematic-scene.is-impact .cinematic-impact{animation:cinema-burst .65s ease-out both}.cinematic-scene.is-impact .cinematic-glyph{animation:cinema-glyph .65s ease-out both}.cinematic-scene.is-impact .cinematic-hit{animation:cinema-hit .7s cubic-bezier(.1,.8,.2,1) both}.cinematic-scene.is-impact .cinematic-beam{animation:cinema-beam .6s ease-out both}.cinematic-scene.is-impact .defender,.cinematic-scene.is-impact .cinematic-hero-target{animation:cinema-recoil .55s ease-out both}.cinematic-scene.hit-stop .striker{animation-play-state:paused}.cinematic-scene.is-impact .cinematic-shade{background:radial-gradient(ellipse at 57% 48%,color-mix(in srgb,var(--action-color) 38%,transparent),#030712c9 80%)}
.cinematic-scene.positive-impact .cinematic-hit{color:#b8ffd4}.cinematic-scene.finishing-action .cinematic-hit{left:50%;top:50%}.cinematic-scene.finishing-action .cinematic-hit b{font-size:clamp(120px,18vw,220px)}
.cinematic-actor.caster{left:10%;animation:cinema-caster 1.15s ease-out both}.cinematic-spell .cinematic-glyph{left:65%;font-size:min(33vw,370px)}.cinematic-spell .cinematic-hit{left:65%}.cinematic-spell .cinematic-impact{left:65%}.cinematic-spell .cinematic-orbit{left:65%;top:49%;transform:translate(-50%,-50%);width:min(53vw,540px)}.cinematic-spell .cinematic-beam{height:180px;top:40%}.cinematic-spell.area-spell .cinematic-beam{height:340px;top:28%;background:repeating-linear-gradient(115deg,transparent 0 35px,var(--action-color) 40px,#fff 43px,transparent 49px 95px)}
.cinematic-scene[data-element=water] .cinematic-beam{clip-path:polygon(0 40%,70% 30%,100% 0,90% 50%,100% 100%,70% 70%,0 60%)}.cinematic-scene[data-element=storm] .cinematic-beam{clip-path:polygon(0 30%,35% 15%,30% 45%,65% 0,60% 40%,100% 25%,70% 70%,73% 43%,40% 100%,45% 60%,0 80%);height:230px;top:35%}.cinematic-scene[data-element=moon] .cinematic-impact i{border-radius:50%;border-width:12px;border-left-color:transparent;border-bottom-color:transparent;transform:rotate(-35deg)}.cinematic-scene[data-element=nature] .cinematic-beam{background:repeating-linear-gradient(175deg,transparent 0 12px,var(--action-color) 17px,#dbffe1 20px,transparent 24px 43px)}.cinematic-scene[data-element=astral] .cinematic-glyph{font-size:min(38vw,430px)}
.cinematic-actor.summoned{left:50%;top:22%;width:min(37vw,390px);height:min(68vh,540px);transform:translateX(-50%);animation:cinema-summon .75s cubic-bezier(.12,.8,.18,1) both}.cinematic-summon .cinematic-title,.cinematic-legendary .cinematic-title{top:auto;bottom:12%}.cinematic-summon .cinematic-actor-copy,.cinematic-legendary .cinematic-actor-copy{display:none}.cinematic-summon .cinematic-orbit,.cinematic-legendary .cinematic-orbit{top:71%;width:min(73vw,670px)}.cinematic-summon .cinematic-glyph,.cinematic-legendary .cinematic-glyph,.cinematic-summon .cinematic-hit,.cinematic-legendary .cinematic-hit{display:none}.cinematic-legendary .summoned{width:min(48vw,490px);height:76vh;top:9%;animation-duration:1.2s}.cinematic-legendary .cinematic-title strong{font-size:clamp(34px,5vw,67px)}.cinematic-legendary .cinematic-orbit{opacity:.6}.cinematic-legendary .cinematic-shade{background:radial-gradient(ellipse at 50% 45%,color-mix(in srgb,var(--action-color) 20%,#061020),#02040cf5)}
.cinematic-scene.departing{animation:cinema-exit .18s ease-in both}
.fx-shockwave{position:fixed;left:var(--x);top:var(--y);width:180px;height:180px;border:5px solid var(--fx-color);border-radius:50%;z-index:1420;pointer-events:none;box-shadow:0 0 35px var(--fx-color),inset 0 0 35px var(--fx-color);animation:cinema-shockwave .65s ease-out both}.fx-shockwave:after{content:"";position:absolute;inset:18%;border:2px solid white;border-radius:50%}
#fx-canvas{z-index:1410}.attack-ghost{z-index:1370;width:170px;height:225px}.impact-ring{z-index:1420;width:150px;height:150px;border-width:4px}.impact-slash{width:250px;height:250px;z-index:1430}.impact-slash>i{height:6px}.effect-status{z-index:1460;font-size:17px;padding:10px 16px}.battle-number{z-index:1470;font-size:64px;-webkit-text-stroke:1.5px #321e19}.battle-number.massive{font-size:96px}.summon-sigil{width:230px;height:230px;z-index:1420}.summon-sigil.legendary{width:360px;height:360px}.elemental-flash{z-index:1430}.battle-shake{animation:cinema-board-shake .4s ease-out}.impact-flash{animation:cinema-card-hit .4s ease-out}
@keyframes cinema-enter{from{opacity:0}to{opacity:1}}@keyframes cinema-exit{to{opacity:0;scale:1.04}}@keyframes cinema-title{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}@keyframes cinema-speed{from{transform:scale(.85) rotate(-5deg)}to{transform:scale(1.45) rotate(4deg)}}@keyframes cinema-orbit{from{opacity:0;scale:.35}to{opacity:.4;scale:1.15}}
@keyframes cinema-strike{0%{opacity:0;transform:translateX(-35vw) scale(.7) rotate(-16deg)}22%{opacity:1;transform:translateX(-2vw) scale(1.02) rotate(-8deg)}39%{transform:translateX(-4vw) scale(.95) rotate(-15deg)}58%{transform:translateX(28vw) scale(1.22) rotate(13deg)}72%{opacity:1;transform:translateX(23vw) scale(1.14) rotate(8deg)}100%{opacity:0;transform:translateX(4vw) scale(.82) rotate(-4deg)}}@keyframes cinema-defend{from{opacity:0;transform:translateX(35vw) rotate(12deg)}to{opacity:.85;transform:translateX(0) rotate(5deg)}}@keyframes cinema-recoil{0%{opacity:1;transform:translateX(0) rotate(5deg)}15%{transform:translateX(35px) rotate(15deg);filter:brightness(2.5)}35%{transform:translateX(17px) rotate(7deg);filter:brightness(1)}70%{opacity:.75;transform:translateX(45px) rotate(12deg)}100%{opacity:0;transform:translateX(100px) rotate(18deg)}}
@keyframes cinema-beam{0%{opacity:0;transform:rotate(-12deg) scaleX(.1)}20%{opacity:1;transform:rotate(-12deg) scaleX(1.05)}65%{opacity:.7;transform:rotate(-12deg) scaleX(1)}100%{opacity:0;transform:rotate(-12deg) scaleX(1.1)}}@keyframes cinema-burst{0%{opacity:0;scale:.1}18%{opacity:1;scale:.8}100%{opacity:0;scale:2.2;rotate:35deg}}@keyframes cinema-glyph{0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-25deg)}25%{opacity:.85;transform:translate(-50%,-50%) scale(1.1) rotate(8deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.55) rotate(25deg)}}@keyframes cinema-hit{0%{opacity:0;transform:translate(-50%,-50%) scale(2.1) rotate(-12deg)}18%,60%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-6deg)}100%{opacity:0;transform:translate(-50%,-90%) scale(.9) rotate(-6deg)}}@keyframes cinema-streak{to{left:140%}}@keyframes cinema-caster{0%{opacity:0;transform:translateX(-30vw) scale(.75) rotate(-12deg)}30%{opacity:1;transform:translateX(0) scale(1.05) rotate(-6deg)}70%{opacity:1;transform:translateX(7vw) scale(1.1) rotate(2deg)}100%{opacity:0;transform:translateX(0) scale(.9)}}@keyframes cinema-summon{0%{opacity:0;transform:translate(-50%,18%) scale(.25);filter:brightness(4) drop-shadow(0 0 60px var(--action-color))}40%{opacity:1;transform:translate(-50%,-2%) scale(1.05);filter:brightness(1.4) drop-shadow(0 0 35px var(--action-color))}100%{opacity:1;transform:translate(-50%,0) scale(1);filter:brightness(1) drop-shadow(0 0 20px var(--action-color))}}@keyframes cinema-shockwave{from{opacity:1;transform:translate(-50%,-50%) scale(.1)}to{opacity:0;transform:translate(-50%,-50%) scale(4)}}@keyframes cinema-board-shake{0%,100%{translate:0 0}15%{translate:12px -4px}30%{translate:-12px 5px}45%{translate:8px -3px}60%{translate:-6px 2px}80%{translate:3px 0}}@keyframes cinema-card-hit{15%{filter:brightness(3);transform:scale(.9) rotate(-4deg)}45%{filter:brightness(1.4);transform:scale(1.04) rotate(2deg)}100%{filter:none;transform:none}}
@media(max-width:760px){.cinematic-actor{width:47vw;height:45vh;top:30%}.cinematic-actor.striker{left:0}.cinematic-actor.defender{right:0}.cinematic-title{top:17%}.cinematic-title small{font-size:8px;letter-spacing:3px}.cinematic-title strong{font-size:27px}.cinematic-letterbox{height:9vh}.cinematic-hit{left:56%;top:54%}.cinematic-hit small{font-size:9px;letter-spacing:4px}.cinematic-hit b{font-size:100px}.cinematic-impact{width:220px;height:220px}.cinematic-glyph{font-size:180px}.cinematic-hero-target{right:0;top:37%;width:45%}.cinematic-hero-target span{font-size:120px}.cinematic-hero-target strong{font-size:8px;letter-spacing:2px}.cinematic-actor.caster{left:1%;width:59vw}.cinematic-spell .cinematic-glyph{font-size:240px}.cinematic-spell .cinematic-hit{left:66%}.cinematic-actor.summoned{width:69vw;height:54vh;top:21%}.cinematic-legendary .summoned{width:90vw;height:67vh;top:13%}.cinematic-legendary .cinematic-title strong{font-size:36px}.cinematic-actor-copy strong{font-size:16px}.cinematic-actor-copy span{font-size:12px}.battle-number{font-size:51px}.battle-number.massive{font-size:78px}.effect-status{font-size:13px}.summon-sigil{width:175px;height:175px}.impact-ring{width:125px;height:125px}.impact-slash{width:190px;height:190px}.attack-ghost{width:125px;height:170px}}
@media(prefers-reduced-motion:reduce){.cinematic-scene{display:none}.fx-shockwave{animation:none;opacity:.35;transform:translate(-50%,-50%)}.battle-number{font-size:43px;animation:none}.battle-number.massive{font-size:58px}.battle-shake,.impact-flash{animation:none}.impact-ring,.impact-slash,.summon-sigil{animation:none}}

/* Hold the impact long enough to read; align the lunge with the audio hit. */
.cinematic-actor.striker{animation-name:cinema-strike-held;animation-duration:1.5s}.cinematic-actor.caster{animation-duration:1.55s}.cinematic-scene.is-impact .cinematic-hit{animation-duration:1.1s}.cinematic-scene.is-impact .defender,.cinematic-scene.is-impact .cinematic-hero-target{animation-duration:1s}
@keyframes cinema-strike-held{0%{opacity:0;transform:translateX(-35vw) scale(.7) rotate(-16deg)}12%{opacity:1;transform:translateX(-2vw) scale(1.02) rotate(-8deg)}20%{transform:translateX(-4vw) scale(.95) rotate(-15deg)}28%{transform:translateX(28vw) scale(1.22) rotate(13deg)}72%{opacity:1;transform:translateX(23vw) scale(1.14) rotate(8deg)}100%{opacity:0;transform:translateX(4vw) scale(.82) rotate(-4deg)}}