/* --- 盲盒入场 --- */
.box-card {
    animation: fadeInUp 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
@keyframes fadeInUp {
    to { opacity: 1; transform: translateY(0); }
}

/* --- 3D 开箱动画 --- */
.draw-phase-opening {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    height: 300px;
}
.box-3d-container {
    width: 120px; height: 120px; position: relative; perspective: 600px; margin-bottom: 40px;
}
.box-3d {
    width: 100%; height: 100%; position: absolute; transform-style: preserve-3d;
    animation: spinAndOpen 2s ease-in-out infinite;
}
.face {
    position: absolute; width: 120px; height: 120px;
    background: rgba(176, 66, 255, 0.2);
    border: 2px solid rgba(176, 66, 255, 0.6);
    box-shadow: 0 0 15px rgba(176, 66, 255, 0.4) inset;
}
.front { transform: translateZ(60px); }
.back { transform: rotateY(180deg) translateZ(60px); }
.left { transform: rotateY(-90deg) translateZ(60px); }
.right { transform: rotateY(90deg) translateZ(60px); }
.top { transform: rotateX(90deg) translateZ(60px); background: rgba(176, 66, 255, 0.4); }
.bottom { transform: rotateX(-90deg) translateZ(60px); }

@keyframes spinAndOpen {
    0% { transform: rotateX(20deg) rotateY(0); }
    100% { transform: rotateX(20deg) rotateY(360deg); }
}

.opening-status {
    font-size: 16px; color: var(--color-premium-main); letter-spacing: 2px;
    animation: blink 1.5s infinite;
}
@keyframes blink { 50% { opacity: 0.5; } }

/* --- 金色爆炸特效 --- */
.gold-particle {
    position: absolute; width: 8px; height: 8px; background: #ffd700; border-radius: 50%;
    box-shadow: 0 0 10px #ffd700;
    animation: particleFly 1s ease-out forwards;
    pointer-events: none;
    z-index: 2000;
}
@keyframes particleFly {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0); opacity: 0; }
}

/* 屏幕闪烁 */
.flash-effect {
    position: fixed; inset: 0; background: #fff; z-index: 1900;
    animation: flash 0.5s ease-out forwards; pointer-events: none;
}
@keyframes flash { 0% { opacity: 0.8; } 100% { opacity: 0; } }

/* 边缘发光 (紫光) */
.edge-glow-purple {
    box-shadow: inset 0 0 50px rgba(176, 66, 255, 0.8);
    animation: pulseEdge 1s ease-out forwards;
    position: fixed; inset: 0; pointer-events: none; z-index: 1800;
}
@keyframes pulseEdge { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } }