@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes spin { 
    0% { transform: translate(-50%, -50%) rotate(0deg); } 
    100% { transform: translate(-50%, -50%) rotate(360deg); } 
}

/* Override spin for coin which doesn't use translate */
@keyframes spinCoin { 
    0% { transform: rotateY(0deg); } 
    100% { transform: rotateY(360deg); } 
}

@keyframes sparkle {
    0%, 90% { transform: scale(1); filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)) brightness(1); }
    92% { transform: scale(1.1) rotate(5deg); filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.5)) brightness(1.1); }
    94% { transform: scale(1.1) rotate(-5deg); filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.6)) brightness(1.2); }
    96%, 100% { transform: scale(1); filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)) brightness(1); }
}

@keyframes floatUpFade {
    0% { opacity: 0; transform: translate(-50%, 20px) scale(0.5); }
    15% { opacity: 1; transform: translate(-50%, 0) scale(1.2); }
    25% { transform: translate(-50%, -10px) scale(1); }
    80% { opacity: 1; transform: translate(-50%, -20px) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -100px) scale(0.9); }
}

@keyframes shakeFade {
    0%, 100% { transform: translateX(-50%); }
    20% { transform: translateX(calc(-50% - 10px)); }
    40% { transform: translateX(calc(-50% + 10px)); }
    60% { transform: translateX(calc(-50% - 5px)); }
    80% { transform: translateX(calc(-50% + 5px)); }
    90% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -20px); }
}

@keyframes scorePop { 
    0% { transform: scale(1); } 
    50% { transform: scale(1.5); } 
    100% { transform: scale(1); } 
}

@keyframes popElastic {
    0% { opacity: 0; transform: scale(0.5) rotate(var(--rotation, 0deg)); }
    40% { opacity: 1; transform: scale(1.2) rotate(var(--rotation, 0deg)); }
    60% { transform: scale(0.9) rotate(var(--rotation, 0deg)); }
    80% { transform: scale(1.05) rotate(var(--rotation, 0deg)); }
    100% { opacity: 1; transform: scale(1) rotate(var(--rotation, 0deg)); }
}

@keyframes fadeOutUp {
    0% { opacity: 1; transform: scale(1) rotate(var(--rotation, 0deg)); }
    100% { opacity: 0; transform: translateY(-100px) scale(1) rotate(var(--rotation, 0deg)); }
}

@keyframes sunburst {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Effects Layer */
#effects-layer {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 999; overflow: hidden;
}

.coin-icon {
    font-size: 1.2em;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
    animation: sparkle 20s infinite linear;
    display: inline-block;
    line-height: 1;
}
.coin-icon.spinning { animation: spinCoin 0.5s infinite linear; }

.score-pop { animation: scorePop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); color: var(--success-color) !important; }