/* ========================================
   游戏胜利庆祝动画 - 全屏彩蛋和洗牌特效
   ======================================== */

/* 全屏庆祝容器 */
.celebration-fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99999;
    pointer-events: none;
    background: radial-gradient(circle at center, rgba(255, 215, 0, 0.2) 0%, rgba(0, 0, 0, 0.3) 100%);
    animation: celebration-pulse 2s ease-in-out;
}

@keyframes celebration-pulse {
    0%, 100% { background-color: rgba(0, 0, 0, 0); }
    50% { background-color: rgba(255, 215, 0, 0.15); }
}

.celebration-fullscreen.celebration-fadeout {
    opacity: 0;
    transition: opacity 0.5s ease-out;
}

/* 庆祝消息 */
.celebration-message {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    animation: celebration-message-zoom 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 10;
}

@keyframes celebration-message-zoom {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.3);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.1);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.celebration-title {
    font-size: clamp(3rem, 10vw, 8rem);
    font-weight: 900;
    color: #ffd700;
    text-shadow: 
        0 0 20px rgba(255, 215, 0, 0.8),
        0 0 40px rgba(255, 215, 0, 0.6),
        0 0 60px rgba(255, 215, 0, 0.4),
        4px 4px 8px rgba(0, 0, 0, 0.5);
    font-family: 'Luckiest Guy', 'Arial Black', cursive;
    letter-spacing: 0.05em;
    animation: celebration-title-glow 2s ease-in-out infinite;
}

@keyframes celebration-title-glow {
    0%, 100% {
        text-shadow: 
            0 0 20px rgba(255, 215, 0, 0.8),
            0 0 40px rgba(255, 215, 0, 0.6),
            0 0 60px rgba(255, 215, 0, 0.4),
            4px 4px 8px rgba(0, 0, 0, 0.5);
    }
    50% {
        text-shadow: 
            0 0 30px rgba(255, 215, 0, 1),
            0 0 60px rgba(255, 215, 0, 0.8),
            0 0 90px rgba(255, 215, 0, 0.6),
            4px 4px 8px rgba(0, 0, 0, 0.5);
    }
}

.celebration-subtitle {
    font-size: clamp(1.5rem, 4vw, 3rem);
    font-weight: 700;
    color: #fff;
    text-shadow: 
        2px 2px 4px rgba(0, 0, 0, 0.6),
        0 0 10px rgba(255, 255, 255, 0.5);
    margin-top: 1rem;
    animation: celebration-subtitle-fade 1.5s ease-in 0.5s both;
}

@keyframes celebration-subtitle-fade {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 彩纸效果 */
.celebration-confetti {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.confetti {
    position: absolute;
    top: -10%;
    width: 10px;
    height: 10px;
    opacity: 0.9;
    animation: confetti-fall linear forwards;
    transform-origin: center;
}

@keyframes confetti-fall {
    0% {
        top: -10%;
        opacity: 1;
        transform: translateX(0) rotate(0deg);
    }
    100% {
        top: 110%;
        opacity: 0;
        transform: translateX(calc(var(--random-x, 0) * 100px)) rotate(720deg);
    }
}

/* 洗牌雨效果 */
.celebration-cards-rain {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.falling-card {
    position: absolute;
    top: -15%;
    width: clamp(60px, 8vw, 120px);
    height: calc(clamp(60px, 8vw, 120px) * 1.4);
    opacity: 0.95;
    animation: card-fall linear forwards;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
    transform-style: preserve-3d;
}

@keyframes card-fall {
    0% {
        top: -15%;
        opacity: 1;
        transform: translateZ(0) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    100% {
        top: 110%;
        opacity: 0;
        transform: 
            translateZ(0) 
            rotateX(calc(var(--random-rotx, 0) * 360deg)) 
            rotateY(calc(var(--random-roty, 0) * 720deg)) 
            rotateZ(calc(var(--random-rotz, 0) * 1080deg));
    }
}

/* 响应式优化 */
@media (max-width: 768px) {
    .celebration-title {
        font-size: clamp(2rem, 12vw, 4rem);
    }
    
    .celebration-subtitle {
        font-size: clamp(1rem, 5vw, 1.5rem);
    }
    
    .falling-card {
        width: clamp(40px, 10vw, 80px);
        height: calc(clamp(40px, 10vw, 80px) * 1.4);
    }
    
    .confetti {
        width: 8px;
        height: 8px;
    }
}

@media (max-width: 480px) {
    .celebration-message {
        top: 25%;
    }
    
    .celebration-title {
        font-size: clamp(1.8rem, 15vw, 3rem);
    }
    
    .celebration-subtitle {
        font-size: clamp(0.9rem, 6vw, 1.2rem);
        margin-top: 0.5rem;
    }
    
    .falling-card {
        width: clamp(35px, 12vw, 60px);
        height: calc(clamp(35px, 12vw, 60px) * 1.4);
    }
}

/* 性能优化 */
.celebration-fullscreen,
.confetti,
.falling-card {
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* ========================================
   面包屑导航和模态框额外样式
   ======================================== */

/* 面包屑导航 */
.breadcrumb-nav {
    background: rgba(0, 0, 0, 0.3);
    padding: 0.5rem 1rem;
}

.breadcrumb-list {
    font-size: 0.875rem;
}

.breadcrumb-link {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
}

.breadcrumb-link:hover {
    color: rgba(255, 255, 255, 0.9);
}

.breadcrumb-active {
    color: #fff;
}

/* 胜利模态框额外样式 */
.win-modal-title {
    font-size: 2rem;
}

.win-trophy-icon {
    font-size: 4rem;
}

.spider-stats-card {
    background: #f8f9fa;
    border-radius: 8px;
}

.stats-label-small {
    font-size: 0.75rem;
}

.stats-hint {
    font-size: 0.7rem;
}

.achievement-box {
    background: #e7f5e9;
}