.impact-vfx,.combat-projectile,.skill-scene-fx,.skill-cut-in{pointer-events:none!important}
.impact-vfx{position:absolute;width:110px;height:110px;margin:-55px;z-index:65;color:#e2bdff;isolation:isolate}
.impact-core{position:absolute;inset:10%;display:grid;place-items:center;font:72px/1 Georgia;filter:drop-shadow(0 0 9px currentColor);animation:impact-core .55s ease-out both}
.fx-hit .impact-core:before,.fx-heavy .impact-core:before,.fx-break .impact-core:before{content:'';position:absolute;inset:46% -25%;background:linear-gradient(90deg,transparent,#fff 25%,#fff 75%,transparent);box-shadow:0 0 13px 3px currentColor;transform:rotate(-37deg);clip-path:polygon(0 60%,100% 0,75% 65%,0 100%)}
.fx-heavy{color:#f4b4dc;scale:1.35}.fx-break{color:#8acbff}.fx-shield{color:#a8d9ff}.fx-heal{color:#9be4cb}.fx-doom{color:#bd8bf1}.fx-equipment{color:#d4cbf2}
.impact-ring{position:absolute;inset:18%;border:2px solid currentColor;border-radius:50%;box-shadow:0 0 12px currentColor,inset 0 0 10px currentColor;animation:impact-ring .6s ease-out both}
.fx-shield .impact-ring{border-radius:35% 35% 48% 48%;inset:-10% 9%;background:linear-gradient(130deg,#b3ddff44,transparent);animation:shield-rise .6s ease-out both}
.impact-spark{position:absolute;left:50%;top:50%;width:3px;height:13px;background:currentColor;box-shadow:0 0 5px currentColor;animation:impact-spark .5s ease-out both;transform-origin:50% 0}
.combat-projectile{position:absolute;height:3px;z-index:60;transform-origin:left center;background:linear-gradient(90deg,transparent,#b991eb55,#f7e7ff);box-shadow:0 0 7px #d3a5ef;animation:projectile .25s ease-out both}
.skill-cut-in{position:absolute;left:18%;right:15%;bottom:12px;height:126px;z-index:170;display:flex;align-items:center;overflow:hidden;border:0;border-top:1px solid #e4c9ffb3;border-bottom:1px solid #bc8ddb80;background:linear-gradient(105deg,#17111aeb,#302036ed 45%,#17121ee8 83%,transparent);box-shadow:0 -8px 35px #07030d70,0 7px 22px #0b051b70;clip-path:polygon(3% 0,100% 0,97% 100%,0 100%);animation:cut-in var(--cut-time) ease both}
.cut-portrait{width:36%;height:100%;flex:none;background:url('../assets/battle/luneth-portrait.png') 72% 16%/180% auto;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 65%,transparent);animation:portrait-reveal var(--cut-time) ease-out both}
.cut-copy{position:relative;z-index:2;flex:1;min-width:0;padding:8px 14px;color:#f5e8ff;text-shadow:0 2px 6px #000}
.cut-copy small{display:block;font:11px/1.4 'SimSun',serif;color:#cbb2df;letter-spacing:3px}
.cut-copy strong{display:block;font:29px/1.4 'SimSun',serif;letter-spacing:5px;margin:3px 0}
.cut-copy span{font:12px/1.5 'SimSun',serif;letter-spacing:1px;color:#ded0e9}
.skill-cut-in>img{width:83px;height:83px;object-fit:contain;margin-right:6%;opacity:.75;filter:drop-shadow(0 0 7px #c6a0ed)}
.cut-power{height:102px}.cut-bloom{height:145px;border-color:#dfc7eb;background:linear-gradient(105deg,#0e0814f0,#452853f0 50%,#1c1227ee 88%,transparent)}
.cut-bloom .cut-copy strong{font-size:35px;color:#f8dfff;text-shadow:0 0 13px #ca86eb}
.skill-scene-fx{position:absolute;inset:0;z-index:38;overflow:hidden;background:radial-gradient(ellipse at 56% 40%,#b180e322,transparent 66%);animation:scene-fade var(--cut-time) ease both}
.scene-ring{position:absolute;width:260px;height:260px;left:57%;top:36%;margin:-130px;border:1px solid #dec5f3;border-radius:50%;box-shadow:0 0 20px #bd88eb66,inset 0 0 20px #ad80c944;animation:scene-expand var(--cut-time) ease-out both}
.scene-ring:before,.scene-ring:after{content:'';position:absolute;inset:12%;border:1px solid #ddc5ff80;transform:rotate(45deg)}.scene-ring:after{inset:24%;transform:rotate(15deg)}
.scene-ring.second{animation-delay:80ms;scale:.65;opacity:.6}.scene-power .scene-ring{width:110px;height:110px;margin:-55px;left:27%;top:42%}
.scene-bloom{background:radial-gradient(ellipse at 43% 43%,#d398f545,transparent 69%)}.scene-bloom .scene-ring{left:43%;width:390px;height:390px;margin:-195px;border-color:#f2d6ff;box-shadow:0 0 40px #c887f177}
.scene-mote{position:absolute;left:var(--x);top:var(--y);width:4px;height:16px;background:#edddff;box-shadow:0 0 8px #d5aeff;animation:mote-rise var(--cut-time) ease-out both;animation-delay:calc(var(--n)*12ms)}
.scene-domain .scene-mote{width:16px;height:22px;background:linear-gradient(90deg,#d8c7ee88,#eee2ffbb);border:1px solid #e8d5ff99;box-shadow:0 0 8px #b288d555}
.fx-still,.fx-still *{animation:none!important}.impact-vfx.fx-still .impact-core{font-size:45px;filter:none}.impact-vfx.fx-still .impact-ring{box-shadow:none;opacity:.45}.skill-cut-in.fx-still{height:90px;opacity:1;clip-path:none;box-shadow:none}
@media(max-width:700px){body .skill-cut-in{position:fixed;bottom:max(8px,env(safe-area-inset-bottom))}}
@keyframes cut-in{0%{opacity:0;transform:translateX(-8%)}15%,74%{opacity:1;transform:translateX(0)}100%{opacity:0;transform:translateX(5%)}}
@keyframes portrait-reveal{from{transform:scale(1.08) translateX(-5%)}to{transform:scale(1) translateX(2%)}}
@keyframes impact-core{0%{opacity:0;transform:scale(.5)}18%{opacity:1;transform:scale(1.1)}100%{opacity:0;transform:scale(1.3)}}
@keyframes impact-ring{from{opacity:.9;transform:scale(.35)}to{opacity:0;transform:scale(1.6)}}
@keyframes shield-rise{0%{opacity:0;transform:translateY(13px) scale(.85)}30%{opacity:.9}100%{opacity:0;transform:translateY(-8px) scale(1.1)}}
@keyframes impact-spark{from{opacity:1;transform:rotate(var(--angle)) translateY(8px) scaleY(1)}to{opacity:0;transform:rotate(var(--angle)) translateY(var(--reach)) scaleY(.1)}}
@keyframes projectile{0%{opacity:0;clip-path:inset(0 100% 0 0)}35%{opacity:.8;clip-path:inset(0 0 0 0)}100%{opacity:0;clip-path:inset(0 0 0 80%)}}
@keyframes scene-fade{0%{opacity:0}22%,58%{opacity:1}100%{opacity:0}}
@keyframes scene-expand{from{transform:scale(.55) rotate(-20deg)}to{transform:scale(1.5) rotate(30deg)}}
@keyframes mote-rise{from{opacity:0;transform:translateY(60px) rotate(-25deg)}30%{opacity:.7}to{opacity:0;transform:translateY(-65px) rotate(30deg)}}
@media(min-width:701px) and (max-height:800px){.skill-cut-in{left:18%;right:13%;height:105px;bottom:6px}.cut-power{height:90px}.cut-bloom{height:120px}}
@media(max-width:700px){.skill-cut-in,.cut-power,.cut-bloom{left:0;right:0;bottom:8px;height:112px}.cut-portrait{width:35%;background-size:260%;background-position:72% 12%}.cut-copy{padding:8px 10px 8px 0}.cut-copy small{font-size:9px;letter-spacing:1px}.cut-copy strong,.cut-bloom .cut-copy strong{font-size:23px;letter-spacing:2px}.cut-copy span{font-size:10px;letter-spacing:0}.skill-cut-in>img{position:absolute;right:8px;top:8px;width:37px;height:37px;opacity:.25;margin:0}.impact-vfx{scale:.72}.scene-ring{scale:.7}.scene-bloom .scene-ring{scale:.65}}
