/* Source → target → result. Native frames and arrow rails remain unchanged. */
#battle{--combat-attack:#ff8e82;--combat-heal:#8fe3b1;--combat-buff:#96caff;--combat-debuff:#d6a5ff;--combat-neutral:#dcc895}
body.pc .phone.fighting .top{opacity:1;filter:brightness(.7);background:none}
body.pc #battle .bstats{font-family:var(--font-ui);font-weight:650;letter-spacing:normal}
#battle .bstats b{font-weight:650;text-shadow:0 1px 2px #0008}
body.pc #battle{background-image:linear-gradient(#101926d9,#14213188 45%,#0c1420e8),url('battle-arena.webp')}
#battle .arena{gap:16px;padding:0 8px;justify-content:center;isolation:isolate}
body.pc #battle .arena::before,body.pc #battle .arena::after{display:none}
#battle .round{flex:none;white-space:nowrap}
.combat-caption{min-width:0;max-width:680px;display:flex;align-items:center;gap:14px;line-height:1.3;text-shadow:0 2px 3px #000;--cue:var(--combat-neutral)}
.combat-caption[data-kind=attack]{--cue:var(--combat-attack)}
.combat-caption[data-kind=heal]{--cue:var(--combat-heal)}
.combat-caption[data-kind=buff]{--cue:var(--combat-buff)}
.combat-caption[data-kind=debuff]{--cue:var(--combat-debuff)}
.combat-caption strong{color:var(--cue);font:600 15px var(--font-ui);flex:none}
.combat-caption span{font:15px/1.4 var(--font-ui);color:#e0ded8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Placement, round labels and changing event names share reserved columns. */
body.pc #battle .arena{display:grid;grid-template-columns:166px minmax(0,680px);gap:16px;justify-content:center}
body.pc #battle .round{width:100%;height:30px;box-sizing:border-box;text-align:center;display:grid;place-items:center;padding:6px 10px}
body.pc #battle .combat-caption{display:grid;grid-template-columns:185px minmax(0,1fr);width:100%;max-width:none}
body.pc #battle .combat-caption strong{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#battle .head.enemy{gap:10px}
#battle .head.enemy .nick{flex:1;min-width:0}
#battle .head.enemy .speed{margin-left:0}
#battle .combat-sound{display:grid;place-items:center;flex:none;width:40px;min-height:36px;padding:7px;border-image:none;border:1px solid #bda16a70;background:#152130;border-radius:5px}
#battle .combat-sound .audio-icon{width:22px;height:22px;stroke:#e7d8b8;fill:none;stroke-width:1.6}
#battle .combat-sound:focus-visible{outline:2px solid #daca9b;outline-offset:3px}
#battle .bunit.acting{transform:none}
#battle .bunit.lunge-up{animation:combat-advance-up var(--fx-lunge-ms,500ms) ease both}
#battle .bunit.lunge-down{animation:combat-advance-down var(--fx-lunge-ms,500ms) ease both}
@keyframes combat-advance-up{25%,60%{transform:translateY(-7px)}100%{transform:none}}
@keyframes combat-advance-down{25%,60%{transform:translateY(7px)}100%{transform:none}}
body.pc #battle .bunit[data-combat-source],#battle .bunit[data-combat-source]{box-shadow:0 0 0 2px #eed6a0,0 0 24px #e8bc563d}
#battle [data-combat-target=attack]{outline:2px solid var(--combat-attack);outline-offset:2px}
#battle [data-combat-target=heal]{outline:2px solid var(--combat-heal);outline-offset:2px}
#battle [data-combat-target=buff]{outline:2px solid var(--combat-buff);outline-offset:2px}
#battle [data-combat-target=debuff]{outline:2px solid var(--combat-debuff);outline-offset:2px}
#battle .bunit.dead{opacity:.35;filter:grayscale(.85)}
/* Statuses sit above level/ability badges and scale with the same 5:7 card. */
body.pc #battle .bunit{--combat-status-size:clamp(20px,calc(var(--card-width,256px)*.11),32px);--combat-info-height:calc(clamp(26px,var(--card-width,256px)*.1172,38px) + clamp(24px,var(--card-width,256px)*.1094,34px) + 6px + var(--card-width,256px)*.043);--combat-status-bottom:calc(var(--combat-info-height) + 28px)}
#battle .bunit .aura{inset:auto 7% var(--combat-status-bottom,90px);display:flex;flex-direction:row;flex-wrap:wrap;align-content:flex-end;justify-content:flex-start;gap:4px;height:auto;max-height:calc(var(--combat-status-size,26px)*2 + 4px);overflow:hidden;border-radius:0;z-index:7}
#battle .bunit .aura .fxband{flex:0 0 var(--combat-status-size,26px);height:var(--combat-status-size,26px);box-sizing:border-box;border:1px solid var(--status-color,#a6bed0)!important;border-radius:5px;background:#0a1424f2!important;box-shadow:inset 0 0 8px color-mix(in srgb,var(--status-color,#a6bed0) 24%,transparent),0 2px 4px #000b!important;pointer-events:auto}
#battle .bunit .aura .fxicon,#battle .bunit .aura[data-n="1"] .fxicon{width:85%;height:85%;max-width:none;max-height:none;animation:none!important;filter:drop-shadow(0 1px 2px #000)}
#battle .abilityburst{inset:5px;border:1px solid #99c6ee85;border-radius:3px;background:none!important;box-shadow:inset 0 0 22px #73a9df33;animation:combat-seal var(--fx-ability-ms,900ms) ease both}
#battle .abilityburst img{position:absolute;left:auto;right:calc(var(--frame-w,15px) + 7px);top:26%;bottom:auto;width:clamp(24px,calc(var(--card-width,256px)*.12),38px);height:clamp(24px,calc(var(--card-width,256px)*.12),38px);transform:none;padding:4px;border:1px solid #b8d6f388;border-radius:8px;background:#10223bed;box-sizing:content-box;filter:drop-shadow(0 2px 4px #000);animation:none}
#battle .abilityburst[data-ability=healAdjacent],#battle .abilityburst[data-ability=rebirth]{border-color:#91eab28c;box-shadow:inset 0 0 22px #73df9c33}
#battle .abilityburst[data-ability=debuffOppositeAttack]{border-color:#d6a5ff99;box-shadow:inset 0 0 22px #a559cf44}
#battle .ability-motes{display:none}
@keyframes combat-seal{0%,100%{opacity:0}20%,70%{opacity:1}}
#battle .float{top:53%;min-width:30px;padding:3px 7px;border:1px solid currentColor;border-radius:6px;background:#0c1524ee;box-shadow:0 3px 10px #000a;font:700 clamp(14px,calc(var(--card-width,256px)*.085),24px)/1.2 var(--font-ui);text-shadow:none;animation:combat-number var(--fx-float-ms,850ms) ease both;white-space:nowrap}
#battle .float.dmg{color:var(--combat-attack)}
#battle .float.debuff{color:var(--combat-debuff)}
#battle .float.heal{color:var(--combat-heal)}
#battle .float.buff,#battle .float.shield{color:var(--combat-buff)}
#battle .float small{display:inline-block;vertical-align:middle;margin-left:5px;font:600 clamp(10px,calc(var(--card-width,256px)*.054),15px)/1 var(--font-ui);letter-spacing:.04em;opacity:.85}
#battle .hprow .float{top:-12px;font-size:24px}
@keyframes combat-number{0%{opacity:0;transform:translate(-50%,8px) scale(.9)}18%,72%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-10px)}}
.ability-wave.fx-heal{--afx:#76e5a3!important}
.ability-wave.fx-buff{--afx:#86c1ff!important}
.ability-wave.fx-debuff{--afx:#cf9af6!important}
.ability-wave.fx-direct,.ability-wave.fx-purge{--afx:#fa8e85!important}
/* A moving tip reaches the recipient at the same beat as its number and sound. */
body .ability-wave[class]{height:4px;background:none;border-radius:0;transform:rotate(var(--ang));filter:drop-shadow(0 0 4px var(--afx));animation:none}
body .ability-wave[class]::before{content:"";position:absolute;inset:1px 0;background:linear-gradient(90deg,transparent,var(--afx),transparent);transform-origin:left;animation:combat-transfer-trail var(--fx-wave-ms,300ms) linear both}
body .ability-wave[class]::after{content:"";position:absolute;left:0;right:auto;top:50%;width:14px;height:6px;border-radius:50%;background:#eafff5;box-shadow:0 0 7px 2px var(--afx),-12px 0 10px var(--afx);transform:translate(-50%,-50%);animation:combat-transfer-tip var(--fx-wave-ms,300ms) linear both}
@keyframes combat-transfer-trail{0%{opacity:0;transform:scaleX(0)}25%{opacity:.6}80%{opacity:.4}100%{opacity:0;transform:scaleX(1)}}
@keyframes combat-transfer-tip{0%{left:0;opacity:0}12%,85%{opacity:1}100%{left:100%;opacity:0}}
/* Three distinct responses: red cut, green rising motes, blue expanding seal. */
#battle .combat-bloom{--bloom:var(--combat-attack);position:absolute;z-index:8;pointer-events:none;left:5%;top:20%;width:90%;aspect-ratio:1;filter:drop-shadow(0 0 3px var(--bloom))}
#battle .combat-bloom::before,#battle .combat-bloom::after{content:"";position:absolute;inset:8%;border:2px solid var(--bloom);border-radius:50%;animation:combat-bloom-ring var(--fx-bloom-ms,560ms) ease-out both}
#battle .combat-bloom.struck::before{inset:48% -10%;border:0;border-radius:50%;background:linear-gradient(90deg,transparent,#fff2e8 30% 70%,transparent);transform:rotate(-32deg);animation:combat-cut var(--fx-bloom-ms,560ms) ease-out both}
#battle .combat-bloom.struck::after{border-color:transparent var(--bloom);border-width:1px}
#battle .combat-bloom.healed{--bloom:var(--combat-heal)}
#battle .combat-bloom.healed::before{border-color:transparent var(--bloom) var(--bloom);border-width:3px;transform:rotate(-25deg)}
#battle .combat-bloom.healed::after{inset:25%;border-width:1px;border-color:var(--bloom) transparent transparent}
#battle .combat-bloom.buffpulse,#battle .combat-bloom.shielded{--bloom:var(--combat-buff)}
#battle .combat-bloom.buffpulse::before{border-radius:4px;rotate:45deg}
#battle .combat-bloom.buffpulse::after{inset:25%;border-radius:3px;rotate:45deg}
#battle .combat-bloom i{position:absolute;left:50%;top:50%;width:3px;height:11px;background:linear-gradient(#fff,var(--bloom),transparent);border-radius:2px;rotate:calc(var(--i)*60deg);animation:combat-sparks var(--fx-bloom-ms,560ms) ease-out both}
#battle .combat-bloom.healed i{left:calc(12% + var(--i)*15%);top:70%;width:3px;height:5px;rotate:0deg;animation-name:combat-restore}
#battle .combat-bloom.buffpulse i{width:3px;height:3px}
#battle .combat-bloom.weakened{--bloom:var(--combat-debuff)}
#battle .combat-bloom.weakened::before{border-style:dashed;animation-name:combat-weaken}
#battle .combat-bloom.weakened::after{border-color:var(--bloom) transparent;animation-name:combat-weaken}
#battle .combat-bloom.weakened i{animation-name:combat-drain}
@keyframes combat-weaken{0%{opacity:0;scale:1.15}20%{opacity:.9}100%{opacity:0;scale:.35;rotate:-25deg}}
@keyframes combat-drain{0%{opacity:0;transform:translateY(-30px)}20%{opacity:.9}100%{opacity:0;transform:translateY(12px) scale(.3)}}
@keyframes combat-cut{0%{opacity:0;scale:.3 1}15%{opacity:1;scale:1 1}65%,100%{opacity:0;scale:1.2 1}}
@keyframes combat-bloom-ring{0%{opacity:0;scale:.45}18%{opacity:.9}100%{opacity:0;scale:1.25}}
@keyframes combat-sparks{0%{opacity:0;transform:translateY(0)}15%{opacity:.9}100%{opacity:0;transform:translateY(-42px) scale(.4)}}
@keyframes combat-restore{0%{opacity:0;transform:translateY(0)}25%{opacity:.95}100%{opacity:0;transform:translateY(calc(-22px - var(--i)*5px)) scale(.4)}}
.proj.faction-cyber,.impact.faction-cyber{--fx:#78d9f0}
.proj.faction-cyber .proj-core{border-radius:3px;clip-path:polygon(0 35%,72% 12%,100% 50%,72% 88%,0 65%);background:linear-gradient(90deg,#2888b3,#c8f7ff);box-shadow:0 0 10px #69dbff}
.proj.faction-cyber .proj-core::after{display:none}
.impact.faction-cyber .impact-debris{border-radius:1px;background:linear-gradient(#e6fbff,#78d9f0)}
@media(max-width:999px){
 #battle .arena{min-height:54px;gap:6px;flex-direction:column;padding:4px 8px}
 #battle .round{padding:4px 12px;font-size:15px}
 .combat-caption{width:100%;justify-content:center;gap:7px}
 .combat-caption strong{font-size:15px}.combat-caption span{font-size:15px;max-width:65%}
 #battle .float{min-width:24px;padding:2px 4px;font-size:17px}
 #battle .float small{font-size:15px;margin-left:3px}
 #battle .bunit{--combat-status-size:18px;--combat-status-bottom:43px}
 #battle .bunit.foe{--combat-status-bottom:9px}
 #battle .bunit .aura{left:5px;right:5px;gap:2px}
 #battle .abilityburst img{width:20px;height:20px;padding:2px;right:7px}
}
@media(prefers-reduced-motion:reduce){
 #battle .bunit,#battle .art,#battle .float,#battle .abilityburst,#battle .round,#battle .evobreach,#battle .aura,#battle .hpbar i,#battle .hpbig i{animation:none!important;transition:none!important}
 #battle .bunit.acting{transform:none!important}
 #battle .float{transform:translateX(-50%);opacity:1}
 #battle .abilityburst{opacity:.65}
 .proj,.impact,.ability-wave,#battle .combat-bloom{display:none!important}
}