/* Fix cho effect text bị đen - CSS tối ưu đã test hoạt động */
.skill-effect-text {
    color: #FFD700 !important;
    text-shadow: 0 0 10px #FFD700, 2px 2px 4px #000 !important;
    font-weight: bold !important;
    opacity: 1 !important;
    z-index: 100003 !important;
}

/* Screen shake animation mạnh hơn - Rung màn hình cực mạnh */
@keyframes skillShakeStrong {
    0%, 100% { transform: translate(0, 0) scale(1); }
    2% { transform: translate(-12px, -8px) scale(1.02); }
    4% { transform: translate(12px, 8px) scale(1.02); }
    6% { transform: translate(-10px, 10px) scale(1.02); }
    8% { transform: translate(10px, -10px) scale(1.02); }
    10% { transform: translate(-12px, 4px) scale(1.03); }
    12% { transform: translate(12px, -4px) scale(1.03); }
    14% { transform: translate(-8px, 12px) scale(1.02); }
    16% { transform: translate(8px, -12px) scale(1.02); }
    18% { transform: translate(-10px, 8px) scale(1.02); }
    20% { transform: translate(10px, -8px) scale(1.02); }
    25% { transform: translate(-8px, 10px) scale(1.01); }
    30% { transform: translate(8px, -10px) scale(1.01); }
    35% { transform: translate(-6px, 6px) scale(1.01); }
    40% { transform: translate(6px, -6px) scale(1.01); }
    45% { transform: translate(-4px, 8px) scale(1); }
    50% { transform: translate(4px, -8px) scale(1); }
    55% { transform: translate(-6px, 4px) scale(1); }
    60% { transform: translate(6px, -4px) scale(1); }
    65% { transform: translate(-4px, 6px) scale(1); }
    70% { transform: translate(4px, -6px) scale(1); }
    75% { transform: translate(-2px, 4px) scale(1); }
    80% { transform: translate(2px, -4px) scale(1); }
    85% { transform: translate(-2px, 2px) scale(1); }
    90% { transform: translate(2px, -2px) scale(1); }
    95% { transform: translate(-1px, 0px) scale(1); }
}

/* Animation hiệu ứng phát sáng */
@keyframes skillEffectGlow {
    0% { 
        color: #FFD700 !important; 
        text-shadow: 0 0 5px #FFD700 !important;
    }
    50% { 
        color: #FFFF00 !important; 
        text-shadow: 0 0 20px #FFD700, 0 0 30px #FFA500 !important;
    }
    100% { 
        color: #FFD700 !important; 
        text-shadow: 0 0 10px #FFD700 !important;
    }
}

/* Animation text bay lên và mờ dần - cho skill effects */
@keyframes skillTextFlyUp {
    0% { 
        transform: translate(-50%, -50%) translateY(0px) scale(1);
        opacity: 1;
        text-shadow: 0 0 25px #FFD700, 0 0 50px #FFA500, 0 0 75px #FFFF00;
    }
    20% {
        transform: translate(-50%, -50%) translateY(-20px) scale(1.1);
        opacity: 1;
        text-shadow: 0 0 30px #FFD700, 0 0 60px #FFA500, 0 0 90px #FFFF00;
    }
    40% {
        transform: translate(-50%, -50%) translateY(-40px) scale(1.05);
        opacity: 0.9;
        text-shadow: 0 0 25px #FFD700, 0 0 50px #FFA500, 0 0 75px #FFFF00;
    }
    60% {
        transform: translate(-50%, -50%) translateY(-60px) scale(1);
        opacity: 0.7;
        text-shadow: 0 0 20px #FFD700, 0 0 40px #FFA500;
    }
    80% {
        transform: translate(-50%, -50%) translateY(-80px) scale(0.95);
        opacity: 0.4;
        text-shadow: 0 0 15px #FFD700, 0 0 30px #FFA500;
    }
    100% {
        transform: translate(-50%, -50%) translateY(-100px) scale(0.9);
        opacity: 0;
        text-shadow: 0 0 10px #FFD700;
    }
}
