/* Damage animation and effects on the map */

.damage {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, 0);
    pointer-events: none;
    color: #e63946;
    font-size: 28px;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    opacity: 1;
    animation: damageFloat 1.2s ease-out forwards;
}

@keyframes damageFloat {
    0%   { transform: translate(-50%, 0) scale(1) rotate(0deg); opacity: 1; }
    50%  { transform: translate(calc(-50% + var(--offsetX)), -60px) scale(1.2) rotate(var(--rotate)); opacity: 1; }
    100% { transform: translate(calc(-50% + var(--offsetX)), -120px) scale(0.8) rotate(calc(var(--rotate) * -1)); opacity: 0; }
}