/* Animations */
@keyframes deal {
    from { transform: translate(-100vw, -100vh) rotate(720deg); }
}

.card.dealing {
    animation: deal 0.5s ease-out;
}

@keyframes fallAndRotate {
    0% {
        transform: translateY(-250px) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(calc(100vh + 250px)) rotate(360deg);
        opacity: 0;
    }
}

@keyframes riseAndRotate {
    0% {
        transform: translateY(calc(100vh + 250px)) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-250px) rotate(360deg);
        opacity: 0;
    }
}

.falling-bg-card-down {
    animation: fallAndRotate linear infinite;
}

.falling-bg-card-up {
    animation: riseAndRotate linear infinite;
}

@keyframes popScale {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    15% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
    30% { transform: translate(-50%, -50%) scale(1); }
    80% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); }
}

.uno-pop {
    animation: popScale 2s ease-out forwards;
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

#uno-btn {
    animation: pulse 2s infinite;
}

.flying-card {
    position: fixed;
    pointer-events: none;
    z-index: 1600;
    transition: all 0.4s ease-in-out;
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

@keyframes shake {
  0%, 100% { transform: translate3d(0, 0, 0); }
  10%, 90% { transform: translate3d(-5px, -5px, 0); }
  20%, 80% { transform: translate3d(5px, 5px, 0); }
  30%, 50%, 70% { transform: translate3d(-10px, 5px, 0); }
  40%, 60% { transform: translate3d(10px, -5px, 0); }
}