/* Main CSS file - Imports all style modules */

/* Import CSS variables */
@import 'variables.css';

/* Import reset and base styles */
@import 'reset.css';

/* Import typography styles */
@import 'typography.css';

/* Import layout styles */
@import 'layout.css';

/* Import component styles */
@import 'components.css';

/* Import utility classes */
@import 'utilities.css';

/* Import animations */
@import 'animations.css';

/* 
 * This is the main CSS file that imports all modular CSS files.
 * 
 * File structure:
 * - variables.css: Contains CSS variables and theme configuration
 * - reset.css: Contains resets and base styles
 * - typography.css: Contains text-related styles
 * - layout.css: Contains layout-related styles (grid, flex, positioning)
 * - components.css: Contains UI component styles (buttons, cards, tables)
 * - utilities.css: Contains utility classes
 * - animations.css: Contains animation styles
 */

/* IMPROVED: Rules specifically for the period controls to display inline */
@media (min-width: 768px) {
    .period-controls {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* Make buttons display in a row with proper spacing */
    .period-selector {
        display: flex;
        justify-content: center;
        flex-wrap: nowrap;
        gap: 10px;
        margin-bottom: 15px;
    }
    
    /* Navigation items (prev/next and current period) in single row */
    .navigation {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
    }
    
    /* Make current period text fit better */
    .current-period {
        min-width: 150px;
        text-align: center;
    }
    
    /* Arrange tutorial buttons in a row */
    .tutorial-buttons-container {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-top: 15px;
        flex-wrap: wrap;
    }
}

/* IMPROVED: Mobile optimizations for period controls */
@media (max-width: 767px) {
    .period-controls {
        padding: 0 5px;
    }
    
    .period-selector {
        padding-bottom: 8px;
    }
    
    .period-selector button {
        min-width: auto;
        padding: 6px 12px;
        font-size: 0.8rem;
    }
    
    .navigation {
        gap: 8px;
    }
    
    .current-period {
        font-size: 0.9rem;
        padding: 6px 10px;
    }
    
    .nav-button {
        padding: 6px 10px;
    }
    
    /* Stack tutorial buttons for small screens but keep them visible */
    .tutorial-buttons-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        margin-top: 12px;
    }
    
    .tutorial-button {
        width: 100%;
        max-width: 280px;
    }
}

/* IMPROVED: Enhanced top performers styles with more subtle animations */
.top-1 {
    overflow: visible; /* Allow content to overflow for effects */
    animation: subtle-float 6s ease-in-out infinite;
}

.top-1::after {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border-radius: 25px;
    background: linear-gradient(45deg, 
        rgba(255, 215, 0, 0.2) 0%, 
        rgba(145, 71, 255, 0.2) 50%, 
        rgba(255, 215, 0, 0.2) 100%
    );
    z-index: -1;
    filter: blur(15px);
    opacity: 0.5;
    animation: glow-border-animation 12s ease infinite;
}

.top-2 {
    animation: subtle-pulse 5s ease-in-out infinite;
}

.top-3 {
    animation: subtle-brightness 7s ease-in-out infinite;
}

@keyframes subtle-float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

@keyframes subtle-pulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(192, 192, 192, 0.3);
    }
    50% {
        box-shadow: 0 0 30px rgba(192, 192, 192, 0.5);
    }
}

@keyframes subtle-brightness {
    0%, 100% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.1);
    }
}

/* IMPROVED: Arrange tutorial buttons in a container */
.tutorial-buttons-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
    flex-wrap: wrap;
}

/* Fix the leaderboard overflow */
.leaderboard { 
    overflow-x: hidden; 
}

/* Fix the tutorial modal layout */
.tutorial-content {
    max-height: 70vh;
    overflow-y: auto;
    padding-right: 10px;
}

/* Improved animations for top performers */
.top-1 .user-emoji {
    animation: float 4s ease-in-out infinite;
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.5));
}

.top-2 .user-emoji {
    animation: float 5s ease-in-out infinite 0.5s;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
}

.top-3 .user-emoji {
    animation: float 6s ease-in-out infinite 1s;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
}

/* Top user cards additional animations */
.top-1 .user-name {
    position: relative;
    display: inline-block;
}

.top-1 .user-name::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold-color), transparent);
    animation: shimmer 3s infinite;
}

.top-2 .user-name::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--silver-color), transparent);
    animation: shimmer 3s infinite 0.5s;
}

.top-3 .user-name::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--bronze-color), transparent);
    animation: shimmer 3s infinite 1s;
}

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

/* Fix for stat gain colors */
.stat-gain {
    color: #4caf50 !important;
    font-weight: 600;
    display: inline-block;
    animation: pulse-text 2s infinite;
}

@keyframes pulse-text {
    0%, 100% {
        opacity: 0.8;
    }
    50% {
        opacity: 1;
    }
}

/* Enhanced table hover effects */
.leaderboard-table tr.user-row:hover td {
    background: linear-gradient(135deg, rgba(60, 60, 60, 0.7), rgba(50, 50, 50, 0.7));
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
    transition: all 0.3s ease;
}