/* ===========================================
   5. SPRITES & ANIMATIONS (From styles.css)
   =========================================== */

/* BASE FIGHTER - Enhanced Quality - Higher Resolution */
.pixel-fighter {
    width: 80px; height: 80px; position: relative; margin: 8px auto 20px; 
    display: flex; align-items: center; justify-content: center;
    image-rendering: crisp-edges; /* Better pixel clarity */
    transform-origin: 50% 50%;
    transition: opacity 160ms ease;
    overflow: visible; /* Prevent clipping */
}
.pixel-fighter-sprite { 
    width: 3px; height: 3px; position: absolute; 
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    image-rendering: crisp-edges;
    overflow: visible;
}

/* ATTACKING ANIMATIONS - Dynamic movement with fighter approaching opponent */
.pixel-fighter.attacking {
    animation: attackDash 0.3s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes attackDash {
    0% {
        transform: scale(1) translateX(0) translateY(0);
    }
    30% {
        transform: scale(1.05) translateX(40px) translateY(-5px);
    }
    60% {
        transform: scale(1.1) translateX(70px) translateY(-8px) rotate(3deg);
    }
    100% {
        transform: scale(1.08) translateX(65px) translateY(-5px) rotate(0deg);
    }
}

/* DEFENDING ANIMATION - Loser recoils and gets knocked back */
.pixel-fighter.defending {
    animation: defendRecoil 0.3s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes defendRecoil {
    0% {
        transform: scale(1) translateX(0) translateY(0) rotate(0deg);
    }
    40% {
        transform: scale(0.95) translateX(-15px) translateY(0) rotate(-3deg);
    }
    100% {
        transform: scale(0.92) translateX(-10px) translateY(2px) rotate(-2deg);
    }
}

/* CLASH ANIMATION - Both fighters collide in the middle for dramatic impact */
.pixel-fighter.clash {
    animation: clashImpact 0.15s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    filter: brightness(1.3) contrast(1.2);
    z-index: 10;
    position: relative;
}

/* Left fighter (first duel-card) moves right toward center */
.duel-container > .duel-card:first-of-type .pixel-fighter.clash {
    animation: clashImpactRight 0.15s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Right fighter (second duel-card) moves left toward center */
.duel-container > .duel-card:last-of-type .pixel-fighter.clash {
    animation: clashImpactLeft 0.15s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes clashImpact {
    0% {
        transform: scale(1) translateX(0) translateY(0) rotate(0deg);
        filter: brightness(1) contrast(1);
    }
    50% {
        transform: scale(1.15) translateY(-8px) rotate(3deg);
        filter: brightness(1.5) contrast(1.3) drop-shadow(0 0 15px rgba(255, 107, 53, 0.9));
    }
    100% {
        transform: scale(1.1) translateY(-4px) rotate(0deg);
        filter: brightness(1.2) contrast(1.1);
    }
}

@keyframes clashImpactRight {
    0% {
        transform: scale(1) translateX(0) translateY(0) rotate(0deg);
        filter: brightness(1) contrast(1);
    }
    50% {
        transform: scale(1.15) translateX(35px) translateY(-10px) rotate(8deg);
        filter: brightness(1.6) contrast(1.4) drop-shadow(0 0 20px rgba(255, 107, 53, 1));
    }
    100% {
        transform: scale(1.08) translateX(25px) translateY(-5px) rotate(2deg);
        filter: brightness(1.2) contrast(1.1);
    }
}

@keyframes clashImpactLeft {
    0% {
        transform: scale(1) translateX(0) translateY(0) rotate(0deg);
        filter: brightness(1) contrast(1);
    }
    50% {
        transform: scale(1.15) translateX(-35px) translateY(-10px) rotate(-8deg);
        filter: brightness(1.6) contrast(1.4) drop-shadow(0 0 20px rgba(255, 107, 53, 1));
    }
    100% {
        transform: scale(1.08) translateX(-25px) translateY(-5px) rotate(-2deg);
        filter: brightness(1.2) contrast(1.1);
    }
}

/* WINNER ANIMATIONS - 5 distinct victory celebrations with movement */
.pixel-fighter.win {
    animation: winnerPunchStrike 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.pixel-fighter.win2 {
    animation: winnerJumpSlam 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.pixel-fighter.win3 {
    animation: winnerSpinKick 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.pixel-fighter.win4 {
    animation: winnerDashUppercut 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.pixel-fighter.win5 {
    animation: winnerFlipKick 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Punch Strike - Dash forward with punch */
@keyframes winnerPunchStrike {
    0% {
        transform: scale(1) translateX(0) translateY(0) rotate(0deg);
    }
    25% {
        transform: scale(1.05) translateX(50px) translateY(-10px) rotate(5deg);
    }
    50% {
        transform: scale(1.15) translateX(90px) translateY(-15px) rotate(-3deg);
    }
    75% {
        transform: scale(1.12) translateX(80px) translateY(-10px) rotate(2deg);
    }
    100% {
        transform: scale(1.1) translateX(75px) translateY(-8px) rotate(0deg);
    }
}

/* Jump Slam - Leap high and come down */
@keyframes winnerJumpSlam {
    0% {
        transform: scale(1) translateX(0) translateY(0) rotate(0deg);
    }
    30% {
        transform: scale(1.1) translateX(30px) translateY(-40px) rotate(10deg);
    }
    60% {
        transform: scale(1.2) translateX(60px) translateY(-50px) rotate(15deg);
    }
    85% {
        transform: scale(1.15) translateX(75px) translateY(-5px) rotate(-5deg);
    }
    100% {
        transform: scale(1.12) translateX(70px) translateY(-8px) rotate(0deg);
    }
}

/* Spin Kick - Rotating dash attack */
@keyframes winnerSpinKick {
    0% {
        transform: scale(1) translateX(0) translateY(0) rotate(0deg);
    }
    25% {
        transform: scale(1.05) translateX(40px) translateY(-8px) rotate(120deg);
    }
    50% {
        transform: scale(1.1) translateX(70px) translateY(-12px) rotate(240deg);
    }
    75% {
        transform: scale(1.08) translateX(75px) translateY(-10px) rotate(350deg);
    }
    100% {
        transform: scale(1.1) translateX(72px) translateY(-8px) rotate(360deg);
    }
}

/* Dash Uppercut - Fast dash with rising uppercut */
@keyframes winnerDashUppercut {
    0% {
        transform: scale(1) translateX(0) translateY(0) rotate(0deg);
    }
    20% {
        transform: scale(1.05) translateX(60px) translateY(5px) rotate(0deg);
    }
    50% {
        transform: scale(1.15) translateX(85px) translateY(-35px) rotate(-8deg);
    }
    80% {
        transform: scale(1.12) translateX(78px) translateY(-25px) rotate(3deg);
    }
    100% {
        transform: scale(1.1) translateX(75px) translateY(-20px) rotate(0deg);
    }
}

/* Flip Kick - Acrobatic forward flip */
@keyframes winnerFlipKick {
    0% {
        transform: scale(1) translateX(0) translateY(0) rotate(0deg);
    }
    25% {
        transform: scale(1.05) translateX(30px) translateY(-25px) rotate(90deg);
    }
    50% {
        transform: scale(1.1) translateX(60px) translateY(-35px) rotate(180deg);
    }
    75% {
        transform: scale(1.12) translateX(75px) translateY(-20px) rotate(270deg);
    }
    100% {
        transform: scale(1.1) translateX(72px) translateY(-10px) rotate(360deg);
    }
}

/* WINNER POSE - Raised Arms Victory (Very short arms) - All win variants */
.pixel-fighter.win .pixel-fighter-sprite::before,
.pixel-fighter.win2 .pixel-fighter-sprite::before,
.pixel-fighter.win3 .pixel-fighter-sprite::before,
.pixel-fighter.win4 .pixel-fighter-sprite::before,
.pixel-fighter.win5 .pixel-fighter-sprite::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3px;
    height: 3px;
    background: transparent;
    box-shadow:
        /* Left raised arm - starts from left shoulder, goes up-left in V (minimal) */
        4px -8px 0 0 #ffdbac,  /* Shoulder connection point */
        1px -11px 0 0 #ffdbac,
        -2px -14px 0 0 #ffdbac,
        /* Right raised arm - starts from right shoulder, goes up-right in V (minimal) */
        24px -8px 0 0 #ffdbac,  /* Shoulder connection point */
        27px -11px 0 0 #ffdbac,
        30px -14px 0 0 #ffdbac;
    z-index: 10;
    animation: armsRaise 0.3s steps(3, end) forwards;
}

@keyframes armsRaise {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(8px);
    }
    50% {
        opacity: 0.5;
        transform: translate(-50%, -50%) translateY(4px);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) translateY(0);
    }
}

/* LOSER ANIMATIONS - 5 dramatic knockback variations with more movement */
.pixel-fighter.lose {
    animation: loserKnockbackSpin 0.5s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
}
.pixel-fighter.lose2 {
    animation: loserFlyBack 0.5s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
}
.pixel-fighter.lose3 {
    animation: loserTumble 0.5s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
}
.pixel-fighter.lose4 {
    animation: loserCrashDown 0.5s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
}
.pixel-fighter.lose5 {
    animation: loserSpinOut 0.5s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
}

/* Knockback Spin - Gets hit and spins backward */
@keyframes loserKnockbackSpin {
    0% {
        transform: scale(1) translateX(0) translateY(0) rotate(0deg);
        opacity: 1;
    }
    20% {
        transform: scale(0.95) translateX(-20px) translateY(-10px) rotate(-30deg);
        opacity: 1;
    }
    50% {
        transform: scale(0.8) translateX(-60px) translateY(20px) rotate(-180deg);
        opacity: 1;
    }
    80% {
        transform: scale(0.72) translateX(-90px) translateY(50px) rotate(-300deg);
        opacity: 0.9;
    }
    100% {
        transform: scale(0.7) translateX(-100px) translateY(60px) rotate(-360deg);
        opacity: 0.8;
    }
}

/* Fly Back - Gets launched backward through the air */
@keyframes loserFlyBack {
    0% {
        transform: scale(1) translateX(0) translateY(0) rotate(0deg);
        opacity: 1;
    }
    15% {
        transform: scale(0.95) translateX(-15px) translateY(-8px) rotate(-10deg);
        opacity: 1;
    }
    40% {
        transform: scale(0.85) translateX(-70px) translateY(-25px) rotate(-40deg);
        opacity: 1;
    }
    70% {
        transform: scale(0.75) translateX(-110px) translateY(10px) rotate(-70deg);
        opacity: 0.9;
    }
    100% {
        transform: scale(0.7) translateX(-120px) translateY(55px) rotate(-90deg);
        opacity: 0.8;
    }
}

/* Tumble - Multiple flips backward */
@keyframes loserTumble {
    0% {
        transform: scale(1) translateX(0) translateY(0) rotate(0deg);
        opacity: 1;
    }
    25% {
        transform: scale(0.9) translateX(-30px) translateY(-15px) rotate(-90deg);
        opacity: 1;
    }
    50% {
        transform: scale(0.82) translateX(-65px) translateY(0px) rotate(-180deg);
        opacity: 1;
    }
    75% {
        transform: scale(0.75) translateX(-90px) translateY(30px) rotate(-270deg);
        opacity: 0.9;
    }
    100% {
        transform: scale(0.7) translateX(-105px) translateY(58px) rotate(-360deg);
        opacity: 0.8;
    }
}

/* Crash Down - Gets slammed into the ground */
@keyframes loserCrashDown {
    0% {
        transform: scale(1) translateX(0) translateY(0) rotate(0deg);
        opacity: 1;
    }
    20% {
        transform: scale(0.95) translateX(-25px) translateY(-30px) rotate(-20deg);
        opacity: 1;
    }
    40% {
        transform: scale(0.9) translateX(-50px) translateY(-40px) rotate(-50deg);
        opacity: 1;
    }
    70% {
        transform: scale(0.78) translateX(-80px) translateY(25px) rotate(-120deg);
        opacity: 0.95;
    }
    100% {
        transform: scale(0.72) translateX(-95px) translateY(62px) rotate(-140deg);
        opacity: 0.8;
    }
}

/* Spin Out - Spins wildly and flies off */
@keyframes loserSpinOut {
    0% {
        transform: scale(1) translateX(0) translateY(0) rotate(0deg);
        opacity: 1;
    }
    20% {
        transform: scale(0.95) translateX(-20px) translateY(-5px) rotate(60deg);
        opacity: 1;
    }
    40% {
        transform: scale(0.85) translateX(-55px) translateY(-10px) rotate(180deg);
        opacity: 1;
    }
    60% {
        transform: scale(0.78) translateX(-85px) translateY(15px) rotate(300deg);
        opacity: 0.95;
    }
    80% {
        transform: scale(0.72) translateX(-105px) translateY(45px) rotate(440deg);
        opacity: 0.9;
    }
    100% {
        transform: scale(0.68) translateX(-115px) translateY(65px) rotate(540deg);
        opacity: 0.8;
    }
}

/* LOSER POSE - Defeated on Side - All lose variants */
.pixel-fighter.lose .pixel-fighter-sprite,
.pixel-fighter.lose2 .pixel-fighter-sprite,
.pixel-fighter.lose3 .pixel-fighter-sprite,
.pixel-fighter.lose4 .pixel-fighter-sprite,
.pixel-fighter.lose5 .pixel-fighter-sprite {
    animation: spriteDefeat 0.5s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
}

@keyframes spriteDefeat {
    0% {
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
    }
    40% {
        transform: translate(-50%, -50%) rotate(45deg) scale(0.9);
    }
    70% {
        transform: translate(-50%, -50%) rotate(75deg) scale(0.8);
    }
    100% {
        transform: translate(-50%, -50%) rotate(90deg) scale(0.72);
    }
}

/* LOSER POSE - No arms (defeated, arms removed) - All lose variants */
.pixel-fighter.lose .pixel-fighter-sprite::after,
.pixel-fighter.lose2 .pixel-fighter-sprite::after,
.pixel-fighter.lose3 .pixel-fighter-sprite::after,
.pixel-fighter.lose4 .pixel-fighter-sprite::after,
.pixel-fighter.lose5 .pixel-fighter-sprite::after {
    display: none; /* No arms for loser */
}

@keyframes armsDown {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0.9;
    }
}

/* === RED FIGHTER (Martial Artist) === */
.pixel-fighter-red .pixel-fighter-sprite {
    box-shadow: 
        8px -24px 0 0 #ffdbac, 12px -24px 0 0 #ffdbac, 16px -24px 0 0 #ffdbac, 20px -24px 0 0 #ffdbac,
        8px -28px 0 0 #cc0000, 12px -28px 0 0 #cc0000, 16px -28px 0 0 #cc0000, 20px -28px 0 0 #cc0000,
        12px -20px 0 0 #000, 16px -20px 0 0 #000, 12px -16px 0 0 #ffdbac, 16px -16px 0 0 #ffdbac,
        4px -12px 0 0 #ff4444, 8px -12px 0 0 #ff4444, 12px -12px 0 0 #ff4444, 16px -12px 0 0 #ff4444, 20px -12px 0 0 #ff4444, 24px -12px 0 0 #ff4444,
        4px -8px 0 0 #ffdbac, 24px -8px 0 0 #ffdbac, 4px -4px 0 0 #ffdbac, 24px -4px 0 0 #ffdbac,
        8px -8px 0 0 #ff4444, 12px -8px 0 0 #ff4444, 16px -8px 0 0 #ff4444, 20px -8px 0 0 #ff4444, 
        8px -4px 0 0 #cc0000, 12px -4px 0 0 #cc0000, 16px -4px 0 0 #cc0000, 20px -4px 0 0 #cc0000,
        8px 4px 0 0 #000, 12px 4px 0 0 #000, 16px 4px 0 0 #000, 20px 4px 0 0 #000,
        8px 8px 0 0 #ffffff, 12px 8px 0 0 #ffffff, 16px 8px 0 0 #ffffff, 20px 8px 0 0 #ffffff, 
        8px 12px 0 0 #ffffff, 20px 12px 0 0 #ffffff, 8px 16px 0 0 #ffffff, 20px 16px 0 0 #ffffff,
        8px 20px 0 0 #000, 12px 20px 0 0 #000, 16px 20px 0 0 #000, 20px 20px 0 0 #000;
}

/* === BLUE FIGHTER (Brawler) === */
.pixel-fighter-blue .pixel-fighter-sprite {
    box-shadow:
        8px -24px 0 0 #ffdbac, 12px -24px 0 0 #ffdbac, 16px -24px 0 0 #ffdbac, 20px -24px 0 0 #ffdbac,
        8px -28px 0 0 #4a3000, 12px -28px 0 0 #4a3000, 16px -28px 0 0 #4a3000, 20px -28px 0 0 #4a3000, 
        12px -32px 0 0 #4a3000, 16px -32px 0 0 #4a3000, 12px -20px 0 0 #000, 16px -20px 0 0 #000,
        12px -16px 0 0 #ffdbac, 16px -16px 0 0 #ffdbac,
        4px -12px 0 0 #0066ff, 8px -12px 0 0 #0066ff, 12px -12px 0 0 #0066ff, 16px -12px 0 0 #0066ff, 20px -12px 0 0 #0066ff, 24px -12px 0 0 #0066ff,
        4px -8px 0 0 #ffdbac, 24px -8px 0 0 #ffdbac, 4px -4px 0 0 #ffdbac, 24px -4px 0 0 #ffdbac,
        8px -8px 0 0 #0066ff, 12px -8px 0 0 #0066ff, 16px -8px 0 0 #0066ff, 20px -8px 0 0 #0066ff,
        8px 4px 0 0 #000, 12px 4px 0 0 #000, 16px 4px 0 0 #000, 20px 4px 0 0 #000,
        8px 8px 0 0 #2244aa, 12px 8px 0 0 #2244aa, 16px 8px 0 0 #2244aa, 20px 8px 0 0 #2244aa,
        8px 12px 0 0 #2244aa, 20px 12px 0 0 #2244aa, 8px 16px 0 0 #2244aa, 20px 16px 0 0 #2244aa,
        8px 20px 0 0 #000, 12px 20px 0 0 #000, 16px 20px 0 0 #000, 20px 20px 0 0 #000;
}

/* === YELLOW FIGHTER (Ninja) === */
.pixel-fighter-yellow .pixel-fighter-sprite {
    box-shadow:
        8px -24px 0 0 #ffdd00, 12px -24px 0 0 #ffdd00, 16px -24px 0 0 #ffdd00, 20px -24px 0 0 #ffdd00,
        8px -28px 0 0 #ffdd00, 12px -28px 0 0 #ffdd00, 16px -28px 0 0 #ffdd00, 20px -28px 0 0 #ffdd00,
        12px -20px 0 0 #000, 16px -20px 0 0 #000, 12px -16px 0 0 #ffdd00, 16px -16px 0 0 #ffdd00,
        4px -12px 0 0 #ffdd00, 8px -12px 0 0 #ffdd00, 12px -12px 0 0 #ffdd00, 16px -12px 0 0 #ffdd00, 20px -12px 0 0 #ffdd00, 24px -12px 0 0 #ffdd00,
        4px -8px 0 0 #ffaa00, 24px -8px 0 0 #ffaa00, 4px -4px 0 0 #ffaa00, 24px -4px 0 0 #ffaa00,
        8px -8px 0 0 #ffdd00, 12px -8px 0 0 #ffdd00, 16px -8px 0 0 #ffdd00, 20px -8px 0 0 #ffdd00,
        8px 4px 0 0 #000, 12px 4px 0 0 #000, 16px 4px 0 0 #000, 20px 4px 0 0 #000,
        8px 8px 0 0 #ffdd00, 12px 8px 0 0 #ffdd00, 16px 8px 0 0 #ffdd00, 20px 8px 0 0 #ffdd00,
        8px 12px 0 0 #ffaa00, 20px 12px 0 0 #ffaa00, 8px 16px 0 0 #ffaa00, 20px 16px 0 0 #ffaa00,
        8px 20px 0 0 #000, 12px 20px 0 0 #000, 16px 20px 0 0 #000, 20px 20px 0 0 #000;
}

/* === GREEN FIGHTER (Boxer) === */
.pixel-fighter-green .pixel-fighter-sprite {
    box-shadow:
        8px -24px 0 0 #ffdbac, 12px -24px 0 0 #ffdbac, 16px -24px 0 0 #ffdbac, 20px -24px 0 0 #ffdbac,
        8px -28px 0 0 #000, 12px -28px 0 0 #000, 16px -28px 0 0 #000, 20px -28px 0 0 #000,
        12px -20px 0 0 #000, 16px -20px 0 0 #000, 12px -16px 0 0 #ffdbac, 16px -16px 0 0 #ffdbac,
        4px -12px 0 0 #00ff44, 8px -12px 0 0 #00ff44, 12px -12px 0 0 #00ff44, 16px -12px 0 0 #00ff44, 20px -12px 0 0 #00ff44, 24px -12px 0 0 #00ff44,
        4px -8px 0 0 #ffdbac, 24px -8px 0 0 #ffdbac, 4px -4px 0 0 #ffdbac, 24px -4px 0 0 #ffdbac,
        8px -8px 0 0 #00ff44, 12px -8px 0 0 #00ff44, 16px -8px 0 0 #00ff44, 20px -8px 0 0 #00ff44,
        8px -4px 0 0 #00cc33, 12px -4px 0 0 #00cc33, 16px -4px 0 0 #00cc33, 20px -4px 0 0 #00cc33,
        8px 4px 0 0 #000, 12px 4px 0 0 #000, 16px 4px 0 0 #000, 20px 4px 0 0 #000,
        8px 8px 0 0 #00cc33, 12px 8px 0 0 #00cc33, 16px 8px 0 0 #00cc33, 20px 8px 0 0 #00cc33,
        8px 12px 0 0 #00cc33, 20px 12px 0 0 #00cc33, 8px 16px 0 0 #00cc33, 20px 16px 0 0 #00cc33,
        8px 20px 0 0 #000, 12px 20px 0 0 #000, 16px 20px 0 0 #000, 20px 20px 0 0 #000;
}

/* --- WEIGHT FX (Video Game Style Score Popup) --- */
@keyframes weightChange {
    0% { 
        opacity: 0; 
        transform: translateY(20px) scale(0.8); 
    }
    25% { 
        opacity: 0.7; 
        transform: translateY(-5px) scale(1.2); 
    }
    50% { 
        opacity: 0.7; 
        transform: translateY(-10px) scale(1.1); 
    }
    100% { 
        opacity: 0; 
        transform: translateY(-25px) scale(0.95); 
    }
}

.weight-change-fx {
    position: absolute;
    left: 20px; /* Position to the left of the figure */
    font-size: 22px;
    font-family: 'Fredoka', sans-serif;
    font-weight: 900;
    letter-spacing: 1px;
    animation: weightChange 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    pointer-events: none;
    text-shadow: 
        0 0 10px rgba(0,0,0,0.9),
        0 2px 4px rgba(0,0,0,0.8),
        0 4px 8px rgba(0,0,0,0.6);
    z-index: 100;
    white-space: nowrap;
    opacity: 0.7; /* Make scores fainter */
}

.weight-change-fx.winner-score {
    top: 10%; /* Away from character, near top of card */
}

.weight-change-fx.loser-score {
    top: 25%; /* Positioned below winner score */
}

/* --- XP CHANGE FX (Video Game Style Score Popup) --- */
@keyframes xpChange {
    0% { 
        opacity: 0; 
        transform: translateY(20px) translateX(-50%) scale(0.8); 
    }
    15% { 
        opacity: 1; 
        transform: translateY(-5px) translateX(-50%) scale(1.2); 
    }
    30% { 
        opacity: 1; 
        transform: translateY(-10px) translateX(-50%) scale(1.15); 
    }
    60% { 
        opacity: 1; 
        transform: translateY(-15px) translateX(-50%) scale(1.1); 
    }
    100% { 
        opacity: 0; 
        transform: translateY(-30px) translateX(-50%) scale(0.95); 
    }
}

.xp-change-fx {
    position: absolute;
    top: 15%;
    left: 50%;
    z-index: 100;
    font-size: 24px;
    font-family: 'Fredoka', sans-serif;
    font-weight: 900;
    letter-spacing: 1px;
    animation: xpChange 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    pointer-events: none;
    text-shadow: 
        0 0 10px rgba(0,0,0,0.9),
        0 2px 4px rgba(0,0,0,0.8),
        0 4px 8px rgba(0,0,0,0.6);
}

/* ===========================================
   ANIMATED 32-BIT WIN/LOSE CHARACTERS
   =========================================== */

/* Container for animated characters */
.duel-character-fx {
    position: absolute;
    width: 48px;
    height: 48px;
    pointer-events: none;
    z-index: -1; /* Behind everything */
    image-rendering: crisp-edges;
    overflow: visible;
    transform-origin: center center;
    opacity: 0.15; /* Very subtle */
}

/* === VICTORY CHARACTERS === */

/* Trophy Character - Appears on win */
.duel-character-fx.trophy {
    animation: trophyPop 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.duel-character-fx.trophy::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.5);
    width: 4px;
    height: 4px;
    box-shadow:
        /* Trophy base */
        8px 20px 0 0 #ffd700, 12px 20px 0 0 #ffd700, 16px 20px 0 0 #ffd700,
        6px 24px 0 0 #ffd700, 10px 24px 0 0 #ffd700, 14px 24px 0 0 #ffd700, 18px 24px 0 0 #ffd700,
        /* Trophy stem */
        12px 16px 0 0 #ffd700, 16px 16px 0 0 #ffd700,
        12px 12px 0 0 #ffd700, 16px 12px 0 0 #ffd700,
        /* Trophy cup */
        8px 8px 0 0 #ffd700, 12px 8px 0 0 #ffd700, 16px 8px 0 0 #ffd700, 20px 8px 0 0 #ffd700,
        6px 4px 0 0 #ffd700, 10px 4px 0 0 #ffd700, 14px 4px 0 0 #ffd700, 18px 4px 0 0 #ffd700, 22px 4px 0 0 #ffd700,
        4px 0px 0 0 #ffd700, 8px 0px 0 0 #ffd700, 12px 0px 0 0 #ffd700, 16px 0px 0 0 #ffd700, 20px 0px 0 0 #ffd700, 24px 0px 0 0 #ffd700,
        /* Trophy handle left */
        4px 4px 0 0 #ffd700, 4px 8px 0 0 #ffd700,
        /* Trophy handle right */
        24px 4px 0 0 #ffd700, 24px 8px 0 0 #ffd700;
}

@keyframes trophyPop {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-180deg);
    }
    50% {
        transform: scale(1.2) rotate(10deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

/* Star Character - Appears on win */
.duel-character-fx.star {
    animation: starSpin 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.duel-character-fx.star::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.5);
    width: 4px;
    height: 4px;
    box-shadow:
        /* Star shape */
        12px 4px 0 0 #ffd700,
        8px 8px 0 0 #ffd700, 16px 8px 0 0 #ffd700,
        4px 12px 0 0 #ffd700, 20px 12px 0 0 #ffd700,
        12px 12px 0 0 #ffd700,
        6px 16px 0 0 #ffd700, 18px 16px 0 0 #ffd700,
        10px 20px 0 0 #ffd700, 14px 20px 0 0 #ffd700,
        12px 24px 0 0 #ffd700;
}

@keyframes starSpin {
    0% {
        opacity: 0;
        transform: scale(0) rotate(0deg);
    }
    50% {
        transform: scale(1.3) rotate(180deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(360deg);
    }
}

/* Confetti Character - Appears on win */
.duel-character-fx.confetti {
    animation: confettiBounce 1s ease-out forwards;
}

.duel-character-fx.confetti::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.5);
    width: 4px;
    height: 4px;
    box-shadow:
        /* Confetti pieces */
        0px 0px 0 0 #ff6b6b,
        8px 4px 0 0 #4ecdc4,
        16px 8px 0 0 #ffe66d,
        4px 12px 0 0 #ff6b6b,
        20px 16px 0 0 #4ecdc4,
        12px 20px 0 0 #ffe66d;
}

@keyframes confettiBounce {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0);
    }
    30% {
        opacity: 1;
        transform: translateY(-10px) scale(1.2);
    }
    60% {
        transform: translateY(5px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Celebration Emoji - Appears on win */
.duel-character-fx.celebration {
    animation: celebrationPop 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
    font-size: 32px;
    width: auto;
    height: auto;
    line-height: 1;
}

@keyframes celebrationPop {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-20deg);
    }
    50% {
        transform: scale(1.4) rotate(10deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

/* === DEFEAT CHARACTERS === */

/* Sad Face Character - Appears on lose */
.duel-character-fx.sad {
    animation: sadDrop 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.duel-character-fx.sad::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.5);
    width: 4px;
    height: 4px;
    box-shadow:
        /* Face outline */
        4px 0px 0 0 #ffdbac, 8px 0px 0 0 #ffdbac, 12px 0px 0 0 #ffdbac, 16px 0px 0 0 #ffdbac, 20px 0px 0 0 #ffdbac, 24px 0px 0 0 #ffdbac,
        4px 4px 0 0 #ffdbac, 24px 4px 0 0 #ffdbac,
        4px 8px 0 0 #ffdbac, 24px 8px 0 0 #ffdbac,
        4px 12px 0 0 #ffdbac, 8px 12px 0 0 #ffdbac, 12px 12px 0 0 #ffdbac, 16px 12px 0 0 #ffdbac, 20px 12px 0 0 #ffdbac, 24px 12px 0 0 #ffdbac,
        4px 16px 0 0 #ffdbac, 8px 16px 0 0 #ffdbac, 12px 16px 0 0 #ffdbac, 16px 16px 0 0 #ffdbac, 20px 16px 0 0 #ffdbac, 24px 16px 0 0 #ffdbac,
        8px 20px 0 0 #ffdbac, 12px 20px 0 0 #ffdbac, 16px 20px 0 0 #ffdbac, 20px 20px 0 0 #ffdbac,
        12px 24px 0 0 #ffdbac, 16px 24px 0 0 #ffdbac,
        /* Left eye (sad) */
        8px 8px 0 0 #000,
        /* Right eye (sad) */
        20px 8px 0 0 #000,
        /* Sad mouth */
        10px 20px 0 0 #000, 14px 20px 0 0 #000, 18px 20px 0 0 #000,
        12px 22px 0 0 #000, 16px 22px 0 0 #000;
}

@keyframes sadDrop {
    0% {
        opacity: 0;
        transform: translateY(-20px) scale(0);
    }
    50% {
        transform: translateY(10px) scale(1.1);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Broken Heart Character - Appears on lose */
.duel-character-fx.broken-heart {
    animation: heartBreak 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.duel-character-fx.broken-heart::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.5);
    width: 4px;
    height: 4px;
    box-shadow:
        /* Left half of broken heart */
        8px 4px 0 0 #ff6b6b, 12px 4px 0 0 #ff6b6b,
        4px 8px 0 0 #ff6b6b, 8px 8px 0 0 #ff6b6b, 12px 8px 0 0 #ff6b6b,
        4px 12px 0 0 #ff6b6b, 8px 12px 0 0 #ff6b6b,
        8px 16px 0 0 #ff6b6b,
        /* Right half of broken heart */
        16px 4px 0 0 #ff6b6b, 20px 4px 0 0 #ff6b6b,
        16px 8px 0 0 #ff6b6b, 20px 8px 0 0 #ff6b6b, 24px 8px 0 0 #ff6b6b,
        20px 12px 0 0 #ff6b6b, 24px 12px 0 0 #ff6b6b,
        20px 16px 0 0 #ff6b6b,
        /* Crack in the middle */
        12px 8px 0 0 #000, 16px 8px 0 0 #000,
        14px 12px 0 0 #000;
}

@keyframes heartBreak {
    0% {
        opacity: 0;
        transform: scale(0) rotate(0deg);
    }
    30% {
        opacity: 1;
        transform: scale(1.2) rotate(-5deg);
    }
    60% {
        transform: scale(0.9) rotate(5deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

/* Defeat Emoji - Appears on lose */
.duel-character-fx.defeat {
    animation: defeatShake 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
    font-size: 32px;
    width: auto;
    height: auto;
    line-height: 1;
}

@keyframes defeatShake {
    0% {
        opacity: 0;
        transform: scale(0) rotate(20deg);
    }
    30% {
        opacity: 1;
        transform: scale(1.3) rotate(-10deg);
    }
    50% {
        transform: scale(0.9) rotate(5deg);
    }
    70% {
        transform: scale(1.1) rotate(-3deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

/* Multiple characters animation - stagger effect */
.duel-character-fx:nth-child(1) { animation-delay: 0s; }
.duel-character-fx:nth-child(2) { animation-delay: 0.1s; }
.duel-character-fx:nth-child(3) { animation-delay: 0.2s; }
.duel-character-fx:nth-child(4) { animation-delay: 0.3s; }