/* Bro Rogue — Battle: Damage Number Variants (2026-08)
   Crit / super-effective / element-tinted / min / miss styles for
   floating damage numbers. Lives in its own file so the per-file
   token budget stays tractable; the base .damage-number rule and
   float keyframes (damageFloat / damageFloatCrit / damageFloatSuper)
   stay in battle-base.css. */

/* Crit: gold, big, skewed, with a radial burst ring. Bumped in 2026-08 so
   crits out-mass super-effective by default — bigger burst, quicker pulse. */
.damage-number.critical {
    --damage-color: #ffd700;
    --damage-size: 44px;

    animation: damageFloatCrit 1.6s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
    text-shadow:
        0 0 18px rgb(255 215 0 / 90%),
        0 0 38px rgb(255 215 0 / 55%),
        0 2px 0 rgb(0 0 0 / 75%);
}

.damage-number.critical::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgb(255 215 0 / 60%);
    animation: critBurst 0.55s ease-out forwards;
}

@keyframes critBurst {
    to {
        box-shadow: 0 0 0 42px rgb(255 215 0 / 0%);
    }
}

/* Super-effective: magenta, biggest, hardest pop. Class taps into the
   existing damageFloatSuper keyframes (defined in battle-base.css)
   for the wildest float of any variant. */
.damage-number.super-effective {
    --damage-color: #ff4df0;
    --damage-size: 40px;

    animation: damageFloatSuper 1.7s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
    text-shadow:
        0 0 16px rgb(255 77 240 / 85%),
        0 0 34px rgb(255 77 240 / 45%),
        0 2px 0 rgb(0 0 0 / 70%);
}

/* Super-effective + element combo: dominant element color, larger than
   vanilla super-effective. Keeps the magenta tint as a ring so the "big
   hit" cue still reads regardless of element identity. */
.damage-number.super-effective.element-fire {
    --damage-color: #ff7a2a;
    --damage-size: 44px;
}

.damage-number.super-effective.element-ice {
    --damage-color: #7fd0ff;
    --damage-size: 44px;
}

.damage-number.super-effective.element-thunder {
    --damage-color: #ffe24a;
    --damage-size: 44px;
}

.damage-number.super-effective.element-water {
    --damage-color: #2fa9ff;
    --damage-size: 44px;
}

.damage-number.super-effective.element-light {
    --damage-color: #fff7c2;
    --damage-size: 44px;
}

.damage-number.super-effective.element-dark {
    --damage-color: #b97aff;
    --damage-size: 44px;
}

/* Element-only color cues (no super-effective / crit). Falls back to a
   generic colored tint so any move tagged with an element reads as themed
   without dominating the screen. */
.damage-number.element-fire {
    --damage-color: #ff8a3d;
    --damage-size: 26px;
}

.damage-number.element-ice {
    --damage-color: #8ed8ff;
    --damage-size: 26px;
}

.damage-number.element-thunder {
    --damage-color: #f5d342;
    --damage-size: 26px;
}

.damage-number.element-water {
    --damage-color: #4cb1ff;
    --damage-size: 26px;
}

.damage-number.element-light {
    --damage-color: #fff3a8;
    --damage-size: 26px;
}

.damage-number.element-dark {
    --damage-color: #a580ff;
    --damage-size: 26px;
}

.damage-number.element-nature {
    --damage-color: #5ad27a;
    --damage-size: 24px;
}

.damage-number.element-poison {
    --damage-color: #b06bff;
    --damage-size: 24px;
}

.damage-number.element-earth {
    --damage-color: #b87b4a;
    --damage-size: 26px;
}

.damage-number.element-wind {
    --damage-color: #c0e8d4;
    --damage-size: 24px;
}

.damage-number.element-gravity {
    --damage-color: #8a8aa8;
    --damage-size: 28px;
}

.damage-number.element-void {
    --damage-color: #c466ff;
    --damage-size: 28px;
}

/* Min damage: tiny and faded so the eye picks out hits that matter. The
   showDamage() helper auto-tags values <= 3 with this class; callers can
   also force it via { type: 'min' }. */
.damage-number.min {
    --damage-color: #b66060;
    --damage-size: 14px;

    opacity: 0.55;
    animation-duration: 1s;
}

/* Crit/super-effective + min never coexist; size fallback if they do. */
.damage-number.critical.min,
.damage-number.super-effective.min {
    --damage-size: 18px;
}

.damage-number.miss {
    --damage-color: #9aa;
    --damage-size: 16px;

    animation-duration: 1.1s;
    opacity: 0.85;
}