/* A single, quiet stage stays mounted throughout the round. */
#battleCinematic{
 z-index:16!important;pointer-events:auto;
 background:radial-gradient(ellipse at 50% 63%,#274a68e8,#0b1b30fa 76%)!important;
 backdrop-filter:blur(3px);animation:none!important;
 transition:opacity .65s ease;opacity:1;
}
#battleCinematic.playback-ending{opacity:0}
#battleCinematic::before{
 content:"";position:absolute;left:-10%;right:-10%;bottom:-18%;height:58%;
 border-top:1px solid #70b5c54f;border-radius:50%;
 background:radial-gradient(ellipse at 50% 10%,#5985a542,transparent 70%);
 pointer-events:none;
}
#battleCinematic .film-heading{
 position:absolute;left:5%;right:9%;top:4%;z-index:8;
 display:flex;justify-content:space-between;align-items:center;gap:3cqh;
 padding:1cqh 0;border-bottom:1px solid #8fdae13d;color:#c8e5ee;
 font-size:clamp(6px,2cqh,20px);letter-spacing:.08em;
}
#battleCinematic #filmPhase{text-align:right;letter-spacing:.02em}
#stage:has(#battleCinematic:not([hidden])) #restart{z-index:18;right:1.4%;top:3.5%;width:5cqh;height:5cqh;font-size:2.8cqh}
#battleCinematic .film-vitals{
 position:absolute;top:15%;width:29%;z-index:9;display:grid;gap:.8cqh;
 color:#edf6f6;font-size:clamp(6px,2cqh,20px);
}
#battleCinematic .film-vitals-left{left:5%}
#battleCinematic .film-vitals-right{right:5%;text-align:right}
#battleCinematic .film-vitals strong{font-size:clamp(7px,2.5cqh,24px);font-weight:850}
#battleCinematic .film-vitals span{font-variant-numeric:tabular-nums;color:#a7d6d8}
#battleCinematic .film-vitals progress{width:100%;height:1cqh;border:0;accent-color:#7bd4b7;border-radius:1cqh;overflow:hidden;background:#081a2c}
#battleCinematic .film-vitals progress::-webkit-progress-bar{background:#081a2c}
#battleCinematic .film-vitals progress::-webkit-progress-value{background:linear-gradient(90deg,#53a99d,#93e4bd);transition:width .75s ease}
#battleCinematic .cinematic-monster{
 bottom:22%;width:29%;max-width:29%;height:52%;object-fit:contain;
 animation:none;transition:filter .65s ease;
 filter:drop-shadow(0 1cqh 1.2cqh #030d1bb0);
 transform:scaleX(var(--facing,1));
}
#battleCinematic .cinematic-monster-left{left:6%;--facing:1}
#battleCinematic .cinematic-monster-right{right:6%;--facing:-1}
#battleCinematic .cinematic-monster.perform-charge{animation:pb-charge 1.1s ease-in-out both}
#battleCinematic .cinematic-monster.perform-target{animation:pb-receive .85s ease-out both}
@keyframes pb-charge{0%,100%{transform:scaleX(var(--facing)) translateY(0)}45%{transform:scaleX(var(--facing)) translateY(-1.2cqh);filter:drop-shadow(0 0 1.8cqh var(--fx))}}
@keyframes pb-receive{0%,100%{transform:scaleX(var(--facing)) translateX(0)}30%{transform:scaleX(var(--facing)) translateX(-1.5cqh)}}
#battleCinematic .cinematic-halo{bottom:21%;width:30%;height:5%;filter:blur(.65cqh);opacity:.25;background:radial-gradient(ellipse,#98e0dd,transparent 75%)}
#battleCinematic .halo-left{left:5.5%}
#battleCinematic .halo-right{right:5.5%}
#battleCinematic #filmAction{
 top:auto;left:8%;bottom:4%;width:84%;min-height:12%;padding:2cqh 3cqh;
 display:grid;place-items:center;font-size:clamp(8px,3cqh,30px);font-weight:750;
 color:#edf6f6;line-height:1.35;text-shadow:none;text-align:center;
 border:1px solid #89cdd34a;border-radius:1cqh;
 background:linear-gradient(120deg,#183950f2,#10253bea);
}
#battleCinematic #filmChip{
 position:absolute;z-index:10;left:50%;top:33%;width:24cqh;
 transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:1cqh;
 padding:1.6cqh 1.3cqh;border-radius:2cqh;border:1px solid #9ddce34f;
 background:linear-gradient(150deg,#213e54e8,#0f2339ed);
 box-shadow:0 1cqh 3cqh #04101b59;text-align:center;
}
#battleCinematic #filmChipArt{width:17cqh;height:17cqh;object-fit:contain;filter:drop-shadow(0 .5cqh .7cqh #020a15a0);border:0;background:none}
#battleCinematic #filmChipType{font-size:clamp(5px,1.45cqh,14px);letter-spacing:.12em;color:#9dc7d1}
#battleCinematic #filmChipName{font-size:clamp(6px,2.1cqh,21px);line-height:1.2;color:#fff6dd}
#battleCinematic[data-phase="perform"] #filmChip{border-color:var(--fx);box-shadow:0 0 2cqh color-mix(in srgb,var(--fx) 20%,transparent)}
#battleCinematic #filmDamage{
 left:var(--target-x,50%);top:47%;font-size:clamp(12px,7cqh,65px);z-index:12;
 color:#ffd3a4;text-shadow:0 .3cqh .8cqh #091423;
 -webkit-text-stroke:0;transform:translate(-50%,-50%);font-weight:950;
}
#battleCinematic #filmDamage[data-healing="true"]{color:#b3f4cc}
#battleCinematic[data-family="roll"] #filmDamage{left:50%;top:70%;color:#e1eafa;font-size:5cqh}
#battleCinematic #filmDamage.playback-number{animation:pb-number 1.25s ease-out both}
@keyframes pb-number{0%{opacity:0;transform:translate(-50%,-20%)}20%,80%{opacity:1;transform:translate(-50%,-60%)}100%{opacity:1;transform:translate(-50%,-75%)}}
#battleCinematic #filmEffects{background:none!important;overflow:hidden;z-index:7}
.playback-effect{position:absolute;inset:0;pointer-events:none;--impact-x:var(--target-x,50%)}
.playback-effect i{position:absolute;display:block;font-style:normal;box-sizing:border-box}
.pb-slash i{left:var(--impact-x);top:44%;width:.9cqh;height:16cqh;opacity:0;border-radius:50%;background:linear-gradient(transparent,#fce9c8,transparent);box-shadow:0 0 .7cqh #f6c88b;animation:pb-cut .8s ease-out both;animation-delay:calc(var(--i)*100ms)}
@keyframes pb-cut{0%{opacity:0;transform:translate(-50%,-70%) translateX(calc((var(--i) - 1)*2cqh)) rotate(32deg) scaleY(.1)}35%{opacity:1}100%{opacity:0;transform:translate(-50%,-20%) translateX(calc((var(--i) - 1)*2cqh)) rotate(32deg) scaleY(1)}}
.pb-impact i,.pb-flame i,.pb-bleed i{left:var(--impact-x);top:49%;width:6cqh;height:6cqh;border:.4cqh solid var(--fx);border-radius:50%;opacity:0;animation:pb-impact .85s ease-out both;animation-delay:calc(var(--i)*90ms)}
@keyframes pb-impact{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}30%{opacity:.7}100%{opacity:0;transform:translate(-50%,-50%) scale(2)}}
.pb-flame i{border-color:#ee955c;background:radial-gradient(circle,#ffd9a0b0,#e7663820,transparent);filter:blur(.3cqh)}
.pb-bleed i{width:1.3cqh;height:2.4cqh;border:0;background:#d46b86;transform:rotate(30deg);border-radius:70% 5% 70% 70%}
.pb-bite i{left:var(--impact-x);top:calc(42% + var(--i)*9%);width:13cqh;height:5cqh;clip-path:polygon(0 0,15% 80%,30% 10%,45% 90%,60% 10%,75% 80%,90% 0);background:#f0ddbc;opacity:0;animation:pb-fang .85s ease-out both;--jaw:1}
.pb-bite i:nth-child(2){rotate:180deg;--jaw:-1}
@keyframes pb-fang{0%{opacity:0;transform:translate(-50%,calc(var(--jaw)*-3cqh))}40%{opacity:.9;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,0)}}
.pb-bolt i{left:var(--actor-x);top:49%;width:3cqh;height:1.5cqh;border-radius:50%;background:#b4edec;box-shadow:0 0 1cqh #70d9ee;opacity:0;animation:pb-bolt .85s ease-in both;animation-delay:calc(var(--i)*90ms)}
@keyframes pb-bolt{0%{opacity:0;transform:translateX(0)}20%{opacity:.8}90%{opacity:.8}100%{opacity:0;transform:translateX(var(--travel))}}
.pb-aura i,.pb-charge i,.pb-reveal i,.pb-shield i{left:var(--impact-x);top:48%;width:19cqh;height:23cqh;border:1px solid var(--fx);border-radius:50%;opacity:0;animation:pb-aura 1.1s ease-in-out both;animation-delay:calc(var(--i)*80ms)}
.pb-charge i{left:var(--actor-x)}
.pb-reveal i{border-style:dashed}
.pb-shield i{width:18cqh;height:22cqh;border-radius:45% 45% 50% 50%;background:linear-gradient(120deg,#a9dae62e,#86c5e00b)}
@keyframes pb-aura{0%{opacity:0;transform:translate(-50%,-50%) scale(.8)}50%{opacity:.5}100%{opacity:0;transform:translate(-50%,-50%) scale(1.12)}}
.pb-heal i{left:calc(var(--impact-x) + (var(--i) - 2)*2cqh);top:55%;width:.6cqh;height:2cqh;background:#a5e7c4;opacity:0;animation:pb-heal 1.1s ease-out both;animation-delay:calc(var(--i)*80ms)}
.pb-heal i::after{content:"";position:absolute;width:2cqh;height:.6cqh;left:-.7cqh;top:.7cqh;background:inherit}
@keyframes pb-heal{0%{opacity:0;transform:translateY(0)}30%{opacity:.8}100%{opacity:0;transform:translateY(-12cqh)}}
.pb-evade i{display:none}
#battleCinematic #filmEffects .codvd-physical-roll{top:48%!important;width:36cqh!important;height:27cqh!important}
@media(prefers-reduced-motion:reduce){
 #battleCinematic,#battleCinematic *{animation:none!important;transition:none!important}
 #battleCinematic .playback-effect{display:none}
 #battleCinematic.playback-ending{opacity:1}
}