/* Custom scrollbar for dark theme */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #0f172a;
}

::-webkit-scrollbar-thumb {
    background: #334155;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

/* Smooth transitions */
* {
    transition-property: background-color, border-color, color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

/* Custom animations */
@keyframes scoreUpdate {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); color: #34d399; }
    100% { transform: scale(1); }
}

.score-updated {
    animation: scoreUpdate 0.5s ease-out;
}

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

.row-enter {
    animation: slideUp 0.3s ease-out;
}

/* Glass morphism enhancement */
.glass {
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Rank badges */
.rank-1 {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #000;
    font-weight: bold;
}

.rank-2 {
    background: linear-gradient(135deg, #e5e7eb 0%, #9ca3af 100%);
    color: #000;
    font-weight: bold;
}

.rank-3 {
    background: linear-gradient(135deg, #fdba74 0%, #ea580c 100%);
    color: #000;
    font-weight: bold;
}

/* Input focus styles */
input:focus {
    box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1);
}

/* Button hover effects */
button {
    transform: translateY(0);
    transition: transform 0.2s, background-color 0.2s;
}

button:active {
    transform: translateY(1px);
}

/* Pulse animation for live indicator */
.live-dot {
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7);
    animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(52, 211, 153, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(52, 211, 153, 0);
    }
}

/* Responsive table */
@media (max-width: 640px) {
    .responsive-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* Loading skeleton */
.skeleton {
    background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}