/* 自定义滚动条 */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* 动画效果 */
@keyframes fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

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

.animate-fade-in {
    animation: fade-in 0.3s ease-out;
}

.animate-fade-out {
    animation: fade-out 0.3s ease-in;
}
    .text-shadow {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }
    .transition-all-300 {
        @apply transition-all duration-300 ease-in-out;
    }
    .card-hover {
        @apply hover:shadow-lg hover:-translate-y-1 transition-all-300;
    }
    .progress-ring-circle {
        transition: stroke-dashoffset 1s cubic-bezier(0.4, 0, 0.2, 1);
        transform: rotate(-90deg);
        transform-origin: 50% 50%;
        animation: progressPulse 2s ease-in-out infinite alternate;
    }
    @keyframes progressPulse {
        from { opacity: 1; }
        to { opacity: 0.7; }
    }
    .tab-active {
        @apply bg-primary text-white;
    }
    .tab-inactive {
        @apply bg-dark-lighter text-gray-300 hover:bg-dark-light;
    }
    .empty-state-icon {
        @apply text-gray-500 opacity-50 text-4xl;
    }
    .empty-state-text {
        @apply text-gray-400 text-sm mt-2;
    }
    .fab {
        @apply fixed right-6 bottom-24 w-14 h-14 rounded-full bg-primary text-white flex items-center justify-center shadow-lg hover:bg-secondary transition-all-300;
    }
    .rank-1 {
        @apply text-accent;
    }
    .rank-2 {
        @apply text-gray-300;
    }
    .rank-3 {
        @apply text-amber-700;
    }
    /* 粒子动画 */
    @keyframes particle-1 {
        0% { 
            top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); opacity: 0; 
        }
        10% { 
            opacity: 1; 
        }
        100% { 
            top: 10%; left: 20%; transform: translate(-50%, -50%) scale(1); opacity: 0; 
        }
    }
    @keyframes particle-2 {
        0% { 
            top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); opacity: 0; 
        }
        20% { 
            opacity: 1; 
        }
        100% { 
            top: 80%; left: 70%; transform: translate(-50%, -50%) scale(1); opacity: 0; 
        }
    }
    @keyframes particle-3 {
        0% { 
            top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); opacity: 0; 
        }
        30% { 
            opacity: 1; 
        }
        100% { 
            top: 30%; left: 80%; transform: translate(-50%, -50%) scale(1); opacity: 0; 
        }
    }
    .animate-particle-1 {
        animation: particle-1 4s ease-in-out infinite;
    }
    .animate-particle-2 {
        animation: particle-2 5s ease-in-out infinite;
    }
    .animate-particle-3 {
        animation: particle-3 6s ease-in-out infinite;
    }

@layer utilities {
    .bg-glass {
        @apply bg-glass-bg backdrop-blur-glass border border-glass-border;
    }
}