/* effects.css */

/* Rainbow name color animation */
@keyframes rainbow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Click effect animations */
@keyframes explode {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.7; }
    100% { transform: scale(0); opacity: 0; }
}

@keyframes gentleGlow {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
    50% { box-shadow: 0 0 10px 5px rgba(255, 255, 255, 0.7); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

@keyframes ripple {
    0% { transform: scale(1); opacity: 0.7; border: 2px solid #ADD8E6; }
    100% { transform: scale(1.5); opacity: 0; border: 2px solid #ADD8E6; }
}

@keyframes sparkle {
    0% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7); }
    50% { box-shadow: 0 0 10px 5px rgba(255, 215, 0, 0.7); }
    100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0); }
}

@keyframes pulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 255, 255, 0.7); }
    50% { transform: scale(1.2); box-shadow: 0 0 10px 5px rgba(0, 255, 255, 0.7); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 255, 255, 0); }
}

@keyframes flameBurst {
    0% { box-shadow: 0 0 0 0 rgba(255, 69, 0, 0.7); }
    50% { box-shadow: 0 0 15px 7px rgba(255, 69, 0, 0.7); }
    100% { box-shadow: 0 0 0 0 rgba(255, 69, 0, 0); }
}

@keyframes lightning {
    0% { box-shadow: 0 0 0 0 rgba(135, 206, 235, 0.7); }
    50% { box-shadow: 0 0 20px 10px rgba(135, 206, 235, 0.7); }
    100% { box-shadow: 0 0 0 0 rgba(135, 206, 235, 0); }
}

@keyframes crystalSparkle {
    0% { box-shadow: 0 0 0 0 rgba(185, 242, 255, 0.7); }
    50% { box-shadow: 0 0 15px 7px rgba(185, 242, 255, 0.7); }
    100% { box-shadow: 0 0 0 0 rgba(185, 242, 255, 0); }
}

/* Emoji overlay and click effect styles */
.emoji-overlay, .click-emoji {
    position: absolute;
    pointer-events: none;
    z-index: 1000;
}

/* Glow effects for winning item */
.glow-common {
    animation: glow-common 0.8s infinite alternate;
}

.glow-rare {
    animation: glow-rare 0.8s infinite alternate;
}

.glow-epic {
    animation: glow-epic 0.8s infinite alternate;
}

.glow-legendary {
    animation: glow-legendary 0.8s infinite alternate;
}

@keyframes glow-common {
    from { box-shadow: 0 0 5px #4CAF50, 0 0 10px #4CAF50; }
    to { box-shadow: 0 0 15px #4CAF50, 0 0 25px #4CAF50; }
}

@keyframes glow-rare {
    from { box-shadow: 0 0 5px #2196F3, 0 0 10px #2196F3; }
    to { box-shadow: 0 0 15px #2196F3, 0 0 25px #2196F3; }
}

@keyframes glow-epic {
    from { box-shadow: 0 0 5px #9C27B0, 0 0 10px #9C27B0; }
    to { box-shadow: 0 0 15px #9C27B0, 0 0 25px #9C27B0; }
}

@keyframes glow-legendary {
    from { box-shadow: 0 0 5px #FFD700, 0 0 10px #FFD700; }
    to { box-shadow: 0 0 15px #FFD700, 0 0 25px #FFD700; }
}

/* Shiny glow effects */
.shadow-glow-common {
    box-shadow: 0 0 10px #4CAF50, 0 0 20px #4CAF50;
}

.shadow-glow-rare {
    box-shadow: 0 0 10px #2196F3, 0 0 20px #2196F3;
}

.shadow-glow-epic {
    box-shadow: 0 0 10px #9C27B0, 0 0 20px #9C27B0;
}

.shadow-glow-legendary {
    box-shadow: 0 0 10px #FFD700, 0 0 20px #FFD700;
}

/* Hover glow effects for possible items */
#possible-items .rarity-common:hover {
    box-shadow: 0 0 10px #4CAF50;
}

#possible-items .rarity-rare:hover {
    box-shadow: 0 0 10px #2196F3;
}

#possible-items .rarity-epic:hover {
    box-shadow: 0 0 10px #9C27B0;
}

#possible-items .rarity-legendary:hover {
    box-shadow: 0 0 10px #FFD700;
}