/* ===== 动画效果 ===== */

/* 淡入淡出 */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

.fade-in {
    animation: fadeIn 0.3s ease forwards;
}

.fade-out {
    animation: fadeOut 0.3s ease forwards;
}

/* 缩放动画 */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes scaleOut {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.8);
    }
}

.scale-in {
    animation: scaleIn 0.3s ease forwards;
}

.scale-out {
    animation: scaleOut 0.3s ease forwards;
}

/* 滑动动画 */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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

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

.slide-in-up {
    animation: slideInUp 0.4s ease forwards;
}

.slide-in-down {
    animation: slideInDown 0.4s ease forwards;
}

.slide-out-up {
    animation: slideOutUp 0.3s ease forwards;
}

.slide-out-down {
    animation: slideOutDown 0.3s ease forwards;
}

/* 弹跳动画 */
@keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
        transform: translateY(0);
    }
    40%, 43% {
        transform: translateY(-20px);
    }
    70% {
        transform: translateY(-10px);
    }
    90% {
        transform: translateY(-4px);
    }
}

.bounce {
    animation: bounce 1s ease;
}

/* 脉冲动画 */
@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.4);
    }
    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 15px rgba(255, 215, 0, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 215, 0, 0);
    }
}

.pulse {
    animation: pulse 1.5s infinite;
}

/* 闪烁动画 */
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.blink {
    animation: blink 1s infinite;
}

/* 摇晃动画 */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.shake {
    animation: shake 0.5s ease;
}

/* 旋转动画 */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.spin {
    animation: spin 1s linear infinite;
}

/* 筹码动画 */
@keyframes chipMove {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--move-x, 0), var(--move-y, -100px)) scale(0.5);
        opacity: 0;
    }
}

.chip-move {
    animation: chipMove 0.5s ease forwards;
}

/* 筹码收集动画 */
@keyframes chipCollect {
    0% {
        transform: translate(var(--start-x, 0), var(--start-y, 0)) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(0, 0) scale(0.3);
        opacity: 0;
    }
}

.chip-collect {
    animation: chipCollect 0.6s ease forwards;
}

/* 获胜庆祝动画 */
@keyframes winCelebrate {
    0% {
        transform: scale(1);
        filter: brightness(1);
    }
    25% {
        transform: scale(1.1);
        filter: brightness(1.3);
    }
    50% {
        transform: scale(1);
        filter: brightness(1);
    }
    75% {
        transform: scale(1.05);
        filter: brightness(1.2);
    }
    100% {
        transform: scale(1);
        filter: brightness(1);
    }
}

.win-celebrate {
    animation: winCelebrate 1s ease;
}

/* 星星闪烁 */
@keyframes starTwinkle {
    0%, 100% {
        opacity: 0;
        transform: scale(0) rotate(0deg);
    }
    50% {
        opacity: 1;
        transform: scale(1) rotate(180deg);
    }
}

.star-twinkle {
    animation: starTwinkle 1.5s ease infinite;
}

/* 金币飞舞 */
@keyframes coinFly {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(-200px) rotate(720deg);
        opacity: 0;
    }
}

.coin-fly {
    animation: coinFly 1.5s ease forwards;
}

/* 当前玩家指示动画 */
@keyframes activePlayerGlow {
    0%, 100% {
        box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    }
    50% {
        box-shadow: 0 0 25px rgba(255, 215, 0, 0.8), 0 0 40px rgba(255, 215, 0, 0.4);
    }
}

.active-glow {
    animation: activePlayerGlow 1.5s ease infinite;
}

/* 倒计时动画 */
@keyframes countdownPulse {
    0% {
        transform: scale(1);
        color: #fff;
    }
    50% {
        transform: scale(1.2);
        color: #ff6b6b;
    }
    100% {
        transform: scale(1);
        color: #fff;
    }
}

.countdown-pulse {
    animation: countdownPulse 1s ease infinite;
}

/* 进度条动画 */
@keyframes progressShrink {
    from { width: 100%; }
    to { width: 0%; }
}

.progress-shrink {
    animation: progressShrink var(--duration, 30s) linear forwards;
}

/* 消息提示动画 */
@keyframes toastSlide {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    10% {
        transform: translateX(0);
        opacity: 1;
    }
    90% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}

.toast-slide {
    animation: toastSlide 3s ease forwards;
}

/* 按钮点击波纹 */
@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 0.5;
    }
    100% {
        transform: scale(4);
        opacity: 0;
    }
}

.ripple-effect {
    position: relative;
    overflow: hidden;
}

.ripple-effect::after {
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: scale(0);
    animation: ripple 0.6s ease-out;
    pointer-events: none;
}

/* 悬浮效果 */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.float {
    animation: float 3s ease-in-out infinite;
}

/* 延迟动画类 */
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }

/* 动画持续时间类 */
.duration-fast { animation-duration: 0.2s; }
.duration-normal { animation-duration: 0.5s; }
.duration-slow { animation-duration: 1s; }

/* 禁用动画（用于偏好减少动画的用户） */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}