.floating-value-js {
    font-size: 28px;
    font-weight: bold;
    filter: saturate(2);
    pointer-events: none;
    user-select: none;
    white-space: nowrap;
}

.opponent-img {
    transform: scaleX(-1);
    --scale-mult: 1;
}

.flash-dmg_js            { animation: hitShakeJs 0.4s ease, damageFlashJs 0.4s ease; }
.flash-dmg-opponent-js   { animation: hitShakeJsOpponent 0.4s ease, damageFlashJs 0.4s ease; }
.flash-crit-js           { animation: hitPulseJs 0.4s ease, damageFlashJs 0.4s ease; }
.flash-crit-opponent-js  { animation: hitPulseJsOpponent 0.4s ease, damageFlashJs 0.4s ease; }
.flash-heal-js           { animation: healGlowJs 0.4s ease; }
.flash-dodge-js          { animation: dodgeBlinkJs 0.4s ease, grayscale 0.4s ease; }

.flash-dmg-js,
.flash-dmg-opponent-js {
    will-change: translate;
}

@keyframes hitShakeJs {
    0%   { translate: 0 0; }
    25%  { translate: -6px 0; }
    50%  { translate: 6px 0; }
    75%  { translate: -3px 0; }
    100% { translate: 0 0; }
}

@keyframes hitShakeJsOpponent {
    0%   { translate: 0 0; }
    25%  { translate: -6px 0; }
    50%  { translate: 6px 0; }
    75%  { translate: -3px 0; }
    100% { translate: 0 0; }
}

@keyframes hitPulseJs {
    0%, 100% { transform: scale(1); filter: brightness(1); }
    50%      { transform: scale(1); filter: brightness(1.8); }
}

@keyframes hitPulseJsOpponent {
    0%, 100% { transform: scaleX(-1); filter: brightness(1); }
    50%      { transform: scaleX(-1); filter: brightness(1.8); }
}

@keyframes healGlowJs {
    0%, 100% { filter: drop-shadow(0 0 0px cyan); }
    50%      { filter: drop-shadow(0 0 14px cyan); }
}

@keyframes dodgeBlinkJs {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.3; }
}

@keyframes grayscale {
    0%, 100% { filter: grayscale(0%); }
    50%      { filter: grayscale(100%); }
}

@keyframes damageFlashJs {
    0%   { filter: brightness(1); }
    50%  { filter: brightness(1.5) saturate(1.5) drop-shadow(0 0 8px red); }
    100% { filter: brightness(1); }
}

@keyframes auraIconRiseJs {
    0%   { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(-100px); opacity: 0; }
}

.heal-aura-js {
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,255,255,0.7) 0%, rgba(0,255,255,0) 70%);
    opacity: 0;
    transform: scale(1);
    z-index: 1;
    animation: healAuraPulseJs 0.7s ease-out;
}

@keyframes healAuraPulseJs {
    0%   { opacity: 0; transform: scale(0.8); }
    50%  { opacity: 0.8; transform: scale(1.2); }
    100% { opacity: 0; transform: scale(1.4); }
}

.fade-out {
    transition: opacity 0.5s ease, transform 0.5s ease;
    opacity: 0;
}

.progress-bar__fill.progress-bar_style_hp {
    transition: width 0.3s ease;
}