/* Anime cut-in: split screen over the two close-ups arena3d.js renders while it runs (see cutin in arena.js). */
.cutin{position:absolute;inset:0;z-index:6;pointer-events:none;visibility:hidden;overflow:hidden;--dur:1.2s}
.cutin.show{visibility:visible;animation:ci-life var(--dur) linear both}
.cutin-on .masthead,.cutin-on .scoreboard,.cutin-on .fight-area,.cutin-on .action-bar,.cutin-on .combo-book,.cutin-on .damage-layer{opacity:0;transition:opacity .08s}
.cutin-on .stage::after{opacity:0}
.masthead,.scoreboard,.fight-area,.action-bar,.combo-book,.damage-layer{transition:opacity .2s}

.ci-side{position:absolute;inset:0;overflow:hidden}
.ci-hero{clip-path:polygon(0 0,61% 0,39% 100%,0 100%);--fx:34%;--lc:rgba(255,226,150,.45);--tint:rgba(255,150,40,.42)}
.ci-foe{clip-path:polygon(61% 0,100% 0,100% 100%,39% 100%);--fx:66%;--lc:rgba(255,120,150,.42);--tint:rgba(160,40,120,.5)}
.ci-side::before{content:'';position:absolute;inset:0;background:linear-gradient(var(--a,110deg),var(--tint),transparent 62%);mix-blend-mode:overlay}
.ci-foe::before{--a:250deg}
.ci-lines{position:absolute;inset:-30%;background:repeating-conic-gradient(from 0deg at var(--fx) 47%,transparent 0 2.1deg,var(--lc) 2.3deg 2.8deg,transparent 3deg 4.6deg);
 -webkit-mask-image:radial-gradient(circle at var(--fx) 47%,transparent 0 16vh,#000 38vh);mask-image:radial-gradient(circle at var(--fx) 47%,transparent 0 16vh,#000 38vh);mix-blend-mode:screen}
.cutin.show .ci-lines{animation:ci-jitter .1s steps(2) infinite}
.cutin.show .ci-hero{animation:ci-in-l .2s cubic-bezier(.2,.9,.25,1) both,ci-shake .09s steps(2) .3s 5}
.cutin.show .ci-foe{animation:ci-in-r .2s .07s cubic-bezier(.2,.9,.25,1) both,ci-shake .09s steps(2) .34s 5}
.ci-side b{position:absolute;top:14%;font:900 clamp(22px,2.2vw,42px)/1 Satoshi,sans-serif;font-style:italic;letter-spacing:.02em;color:#fff;
 -webkit-text-stroke:2px #12081a;text-shadow:0 4px 0 #12081a,0 0 24px rgba(0,0,0,.6);transform:skewX(-10deg)}
.ci-hero b{left:6%}.ci-foe b{right:6%}
.cutin.show .ci-side b{animation:ci-tag .3s .2s cubic-bezier(.2,1.4,.4,1) both}
.cutin.show .ci-foe b{animation-delay:.27s}

/* Lightning along the seam the 3D pass draws; tilted to match it (--tilt is set from the stage's aspect). */
.ci-bolt{position:absolute;left:50%;top:-8%;z-index:2;width:120px;height:116%;margin-left:-60px;overflow:visible;transform:rotate(var(--tilt,.37rad));filter:drop-shadow(0 0 8px #fff) drop-shadow(0 0 22px #ffd071);opacity:0}
.cutin.show .ci-bolt{animation:ci-pop .12s .26s both}
.ci-bolt polyline{fill:none;stroke:#fff;stroke-width:5;stroke-linejoin:miter;vector-effect:non-scaling-stroke}
.ci-bolt polyline+polyline{stroke:#ffe9a8;stroke-width:3}
.cutin.show .ci-bolt polyline{animation:ci-flicker .14s steps(2) infinite}
.cutin.show .ci-bolt polyline+polyline{animation-delay:-.07s}

.ci-bar{position:absolute;left:0;right:0;z-index:3;height:12%;background:#000}
.ci-bar.top{top:0}.ci-bar.bottom{bottom:0}
.cutin.show .ci-bar.top{animation:ci-bar-t .2s cubic-bezier(.2,.9,.2,1) both}
.cutin.show .ci-bar.bottom{animation:ci-bar-b .2s cubic-bezier(.2,.9,.2,1) both}

.ci-title{position:absolute;left:0;right:0;bottom:3.5%;z-index:4;display:flex;flex-direction:column;align-items:center;text-align:center}
.ci-title em{font:900 clamp(20px,2vw,38px)/1 "Noto Sans CJK JP","Noto Sans CJK TC","Noto Sans CJK SC",sans-serif;font-style:normal;letter-spacing:.2em;color:#ff4136;
 text-shadow:0 3px 0 #2a0710,0 0 18px rgba(255,60,40,.7);margin-bottom:-.15em}
.ci-title strong{display:block;padding:0 .2em;font:900 clamp(56px,7.4vw,150px)/.95 Satoshi,sans-serif;font-style:italic;letter-spacing:-.015em;transform:skewX(-10deg);
 background:linear-gradient(180deg,#fffbe0 0%,#ffe066 34%,#ff9d1f 60%,#e8401c 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
 -webkit-text-stroke:3px #1a0710;filter:drop-shadow(0 7px 0 #1a0710) drop-shadow(0 0 34px rgba(255,150,40,.65))}
.ci-title span{display:flex;gap:12px;margin-top:8px}
.ci-title img{width:clamp(30px,2.6vw,50px);height:clamp(30px,2.6vw,50px);object-fit:contain;background:#fff8ec;border-radius:10px;padding:5px;box-shadow:0 0 0 3px #1a0710,0 0 18px rgba(255,200,90,.6)}
.cutin.show .ci-title em{animation:ci-pop .25s .1s both}
.cutin.show .ci-title strong{animation:ci-slam .38s .14s cubic-bezier(.2,1.25,.35,1) both,ci-chroma .5s .14s both}
.ci-title::before{content:'';position:absolute;left:50%;top:58%;width:60vw;height:16vw;margin:-8vw 0 0 -30vw;border-radius:50%;border:6px solid rgba(255,230,160,.9);box-shadow:0 0 40px rgba(255,200,90,.8),inset 0 0 40px rgba(255,200,90,.6);opacity:0}
.cutin.show .ci-title::before{animation:ci-ring .5s .2s ease-out forwards}
.cutin.show .ci-title img{animation:ci-pop .22s both}
.cutin.show .ci-title img:nth-child(1){animation-delay:.3s}.cutin.show .ci-title img:nth-child(2){animation-delay:.35s}.cutin.show .ci-title img:nth-child(3){animation-delay:.4s}
.cutin.show .ci-title img:nth-child(4){animation-delay:.45s}.cutin.show .ci-title img:nth-child(5){animation-delay:.5s}
.cutin.super .ci-title strong{background-image:linear-gradient(90deg,#ff6b6b,#ffd166 25%,#5ef2c4 50%,#6c8bff 75%,#e46bff);background-size:200% 100%}
.cutin.super.show .ci-title strong{animation:ci-slam .38s .14s cubic-bezier(.2,1.25,.35,1) both,ci-rainbow .6s linear infinite}
.cutin.super .ci-hero{--lc:rgba(160,255,230,.6);--tint:rgba(80,220,255,.4)}

.ci-flash{position:absolute;inset:0;z-index:5;background:#fff;opacity:0}
.cutin.show .ci-flash{animation:ci-flash var(--dur) linear both}

@keyframes ci-life{0%,97%{opacity:1}100%{opacity:0}}
@keyframes ci-flash{0%{opacity:1}7%{opacity:0}91%{opacity:0}96%{opacity:.9}100%{opacity:0}}
@keyframes ci-in-l{from{transform:translateX(-80%)}}
@keyframes ci-in-r{from{transform:translateX(80%)}}
@keyframes ci-ring{from{opacity:1;transform:scale(.2)}to{opacity:0;transform:scale(1.5)}}
@keyframes ci-chroma{0%,40%{filter:drop-shadow(6px 0 0 rgba(255,0,90,.85)) drop-shadow(-6px 0 0 rgba(0,230,255,.85)) drop-shadow(0 7px 0 #1a0710)}}
@keyframes ci-bar-t{from{transform:translateY(-100%)}}
@keyframes ci-bar-b{from{transform:translateY(100%)}}
@keyframes ci-jitter{50%{transform:rotate(1.2deg) scale(1.02)}}
@keyframes ci-shake{50%{transform:translate(4px,-3px)}}
@keyframes ci-flicker{50%{opacity:.35}}
@keyframes ci-tag{from{opacity:0;transform:skewX(-10deg) translateY(30px)}}
@keyframes ci-pop{from{opacity:0;transform:scale(.3)}}
@keyframes ci-slam{from{opacity:0;transform:skewX(-10deg) scale(2.8);filter:blur(10px)}60%{opacity:1;transform:skewX(-10deg) scale(.94)}}
@keyframes ci-rainbow{to{background-position:200% 0}}
@media (prefers-reduced-motion:reduce){.cutin{display:none}}

/* p2: the story's monologue is cut on the drop (cutin.cut) under the story's own flash; it has no exit flash of its own */
.cutin.monologue.show .ci-flash{animation-name:ci-flash-mono}
@keyframes ci-flash-mono{0%{opacity:1}7%{opacity:0}100%{opacity:0}}