/* Modern Leaderboard Enhancement CSS */
/* This file extends the existing design with contemporary styling */

/* Import modern design system variables */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Bebas+Neue&display=swap');

/* Enhanced Player Card Styling */
.player-card {
    background: var(--gradient-card) !important;
    border: 1px solid hsl(var(--border)) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-card) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.32, 1) !important;
    margin-bottom: 12px !important;
    padding: 16px !important;
    position: relative;
    overflow: hidden;
}

/* Mobile touch optimization for buttons */
@media (max-width: 768px) {
    .leaderboard-filters .btn {
        -webkit-tap-highlight-color: transparent !important;
        user-select: none !important;
    }
    
    .leaderboard-filters .btn:active {
        transform: scale(0.95) !important;
    }
    
    /* Enhanced carousel performance on mobile */
    .carousel-wrapper {
        will-change: transform;
        transform: translateZ(0); /* Hardware acceleration */
    }
    
    .carousel-section {
        will-change: opacity;
        backface-visibility: hidden;
        perspective: 1000px;
    }
    
    /* iOS Safari optimizations */
    .carousel-container {
        -webkit-transform: translateZ(0);
        -webkit-perspective: 1000;
        -webkit-backface-visibility: hidden;
        transform-style: preserve-3d;
        /* Reduce blur for better mobile clarity */
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
    }
    
    /* Better touch targets for tabs */
    .tab-btn {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }
}

/* Enhanced Carousel Animation System */
.carousel-wrapper {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.32, 1);
}

/* Smooth scroll behavior for the entire page */
html {
    scroll-behavior: smooth;
}

/* Focus states for accessibility */
.tab-btn:focus-visible {
    outline: 2px solid hsl(var(--primary));
    outline-offset: 2px;
}

/* Enhanced glass morphism for better clarity */
@supports (backdrop-filter: blur(20px)) {
    .sticky-leaderboard-filters {
        background: hsl(var(--background) / 0.85) !important;
    }
}

/* Fallback for older browsers */
@supports not (backdrop-filter: blur(20px)) {
    .sticky-leaderboard-filters {
        background: hsl(var(--background)) !important;
    }
    
    .carousel-container {
        background: hsl(var(--card)) !important;
    }
}

/* Improved player card animations in carousel */
.carousel-section.active .player-card {
    animation: slideInFromBottom 0.4s ease-out forwards;
}

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

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .carousel-wrapper {
        transition: none !important;
    }
    
    .tab-slider {
        transition: none !important;
    }
    
    .carousel-section {
        transition: none !important;
    }
    
    .player-card {
        animation: none !important;
    }
}

.player-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 
        var(--shadow-card), 
        0 8px 32px -8px hsl(0 0% 0% / 0.3),
        var(--shadow-glow-green) !important;
    border-color: hsl(var(--primary) / 0.3) !important;
}

.player-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, hsl(var(--primary) / 0.05), transparent);
    transition: left 0.5s ease;
}

.player-card:hover::before {
    left: 100%;
}

/* Modern Table Styling */
.table-dark {
    background: hsl(var(--card)) !important;
    color: hsl(var(--card-foreground)) !important;
    border-radius: var(--radius) !important;
    overflow: hidden;
    box-shadow: var(--shadow-card) !important;
}

.table-dark thead th {
    background: hsl(var(--secondary)) !important;
    color: hsl(var(--secondary-foreground)) !important;
    border-bottom: 1px solid hsl(var(--border)) !important;
    font-weight: 600 !important;
    padding: 16px 12px !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.02em !important;
}

.table-dark tbody tr {
    border-bottom: 1px solid hsl(var(--border)) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.32, 1) !important;
}

.table-dark tbody tr:hover {
    background: hsl(var(--secondary) / 0.5) !important;
    transform: scale(1.005) !important;
}

.table-dark tbody td {
    padding: 14px 12px !important;
    font-weight: 500 !important;
    vertical-align: middle !important;
    border-bottom: 1px solid hsl(var(--border) / 0.5) !important;
}

/* Enhanced Badge Styling */
.badge {
    font-weight: 600 !important;
    font-size: 0.8rem !important;
    padding: 6px 12px !important;
    border-radius: calc(var(--radius) - 6px) !important;
    letter-spacing: 0.02em !important;
}

.badge.bg-success {
    background: var(--gradient-primary) !important;
    color: hsl(var(--primary-foreground)) !important;
    box-shadow: var(--shadow-glow-green) !important;
}

.badge.bg-warning {
    background: var(--gradient-gold) !important;
    color: hsl(var(--accent-foreground)) !important;
    box-shadow: var(--shadow-glow-gold) !important;
}

/* Enhanced GG Button */
.gg-btn {
    background: var(--gradient-primary) !important;
    border: 1px solid hsl(var(--primary)) !important;
    border-radius: calc(var(--radius) - 4px) !important;
    box-shadow: var(--shadow-button) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.32, 1) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    padding: 8px 16px !important;
}

.gg-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-button-hover) !important;
}

.gg-btn:active {
    transform: translateY(0) !important;
}

/* Enhanced Coins Display */
.coins-display {
    background: hsl(var(--secondary)) !important;
    border: 1px solid hsl(var(--border)) !important;
    border-radius: calc(var(--radius) - 4px) !important;
    box-shadow: var(--shadow-button) !important;
    color: hsl(var(--accent)) !important;
    padding: 8px 12px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

/* Modern Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: hsl(var(--muted));
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: hsl(var(--border));
    border-radius: 4px;
    transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--primary));
}

/* Rank Badge Enhancements */
.rank-1 {
    background: var(--gradient-gold) !important;
    color: hsl(var(--accent-foreground)) !important;
    box-shadow: var(--shadow-glow-gold) !important;
    font-weight: 700 !important;
}

.rank-2 {
    background: linear-gradient(135deg, #C0C0C0, #A8A8A8) !important;
    color: hsl(var(--primary-foreground)) !important;
    box-shadow: 0 0 20px -6px hsl(0 0% 75% / 0.4) !important;
    font-weight: 700 !important;
}

.rank-3 {
    background: linear-gradient(135deg, #CD7F32, #B8860B) !important;
    color: hsl(var(--primary-foreground)) !important;
    box-shadow: 0 0 20px -6px hsl(25 40% 35% / 0.4) !important;
    font-weight: 700 !important;
}

/* Champion Section Styling */
.champion-card {
    background: var(--gradient-card) !important;
    border: 2px solid hsl(var(--accent)) !important;
    border-radius: var(--radius) !important;
    box-shadow: 
        var(--shadow-card),
        var(--shadow-glow-gold) !important;
    position: relative;
    overflow: hidden;
}

.champion-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-gold);
}

/* Responsive Design Enhancements */
@media (max-width: 768px) {
    body {
        overflow-x: hidden !important;
    }
    
    .modern-card {
        margin: 8px 4px !important;
        padding: 12px !important;
    }
    
    .championship-banner {
        padding: 2rem 1rem !important;
        margin: 0 4px !important;
    }
    
    .championship-title {
        font-size: 2.5rem !important;
    }
    
    /* Enhanced mobile button behavior */
    .leaderboard-filters .btn {
        flex-shrink: 0 !important;
        scroll-snap-align: center !important;
        font-size: 0.75rem !important;
        padding: 6px 10px !important;
        margin: 0 !important;
        min-width: fit-content !important;
        max-width: none !important;
        white-space: nowrap !important;
        touch-action: manipulation !important;
        border-radius: 6px !important;
    }
    
    /* Prevent button text from being cut off */
    .leaderboard-filters .btn .btn-text-mobile {
        font-weight: 600 !important;
        letter-spacing: -0.01em !important;
    }
    
    /* Smooth scroll behavior for mobile */
    .leaderboard-filters {
        scroll-behavior: smooth !important;
        scroll-snap-type: x mandatory !important;
        padding-bottom: 4px !important;
    }
    
    /* Mobile search input adjustments */
    .modern-search-input {
        font-size: 16px !important; /* Prevents zoom on iOS */
        margin: 0 4px !important;
    }
    
    /* Fix container overflow on mobile */
    .sticky-leaderboard-filters,
    .sticky-search-bar {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* Higher specificity for better override */
.player-container-wrapper .modern-card,
#playerContainer .modern-card {
    background: var(--gradient-card) !important;
    backdrop-filter: blur(var(--glass-blur)) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur)) !important;
}

/* Animation for smooth section changes */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.section-content {
    animation: fadeInUp 0.4s cubic-bezier(0.16, 1, 0.32, 1);
}

/* Focus states for better accessibility */
.modern-toggle-switch:focus-within .modern-slider {
    box-shadow: 
        inset 0 1px 2px hsl(var(--primary) / 0.2),
        0 0 0 2px hsl(var(--primary) / 0.3),
        var(--shadow-glow-green);
}

.leaderboard-filters .btn:focus-visible {
    outline: 2px solid hsl(var(--primary)) !important;
    outline-offset: 2px !important;
}

/* Enhanced accessibility and modern focus states */
*:focus-visible {
    outline: 2px solid hsl(var(--ring)) !important;
    outline-offset: 2px !important;
    border-radius: 4px;
}

/* Smooth page transitions */
* {
    scroll-behavior: smooth;
}

/* Modern selection colors */
::selection {
    background: hsl(var(--primary) / 0.2);
    color: hsl(var(--foreground));
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --border: 220 10% 40%;
        --ring: 158 99% 50%;
    }
}

/* Player card video expansion styles */
.player-card.video-expanded {
    transform: scale(1.02) !important;
    z-index: 1000 !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.4) !important;
    border: 2px solid #01AB7A !important;
    margin: 10px 0 !important;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%) !important;
}

/* Expanded video content styling */
.expanded-video-content {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
}

.expanded-header {
    background: linear-gradient(135deg, rgba(0,0,0,0.9), rgba(40,40,40,0.9));
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(1,171,122,0.3);
}

.expanded-video-player {
    position: relative;
    width: 100%;
    height: 250px;
    background: #000;
}

.expanded-video-player iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.expanded-controls button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255,0,0,0.4);
}

/* Break video container styles */
.break-video-container {
    width: 100%;
    margin-top: 12px;
}

.break-video-wrapper {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(135deg, #1a1a1a, #2d2d2d);
    border: 1px solid rgba(1,171,122,0.3);
    transition: all 0.3s ease;
}

.break-video-wrapper:hover {
    border-color: rgba(1,171,122,0.6);
    box-shadow: 0 4px 20px rgba(1,171,122,0.1);
}

.break-video-header {
    padding: 12px 16px;
    background: rgba(0,0,0,0.6);
    border-bottom: 1px solid rgba(1,171,122,0.2);
}

.break-video-player {
    position: relative;
    width: 100%;
    height: 180px;
    background: #000;
}

.break-video-player iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Reel video content styling */
.reel-video-content {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
}

.reel-header {
    background: linear-gradient(135deg, rgba(0,0,0,0.9), rgba(40,40,40,0.9));
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(1,171,122,0.3);
}

.reel-video-player iframe {
    border-radius: 0;
    transition: all 0.3s ease;
}

.reel-controls button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255,0,0,0.4);
}

/* Ensure video cards don't interfere with normal layout */
.player-card:not(.video-expanded) {
    transition: transform 0.2s ease;
}

.player-card:not(.video-expanded):hover {
    transform: translateY(-2px);
}

/* Mobile responsiveness for video player */
@media (max-width: 768px) {
    .player-card.video-expanded {
        transform: scale(1.01) !important;
        margin: 5px 0 !important;
        min-height: 320px !important;
    }
    
    .break-video-player {
        height: 160px !important;
    }
    
    .break-video-header {
        padding: 10px 12px !important;
    }
    
    .break-video-header h5 {
        font-size: 0.9em !important;
    }
    
    .break-video-header p {
        font-size: 0.8em !important;
    }
    
    .expanded-video-player {
        height: 200px !important;
    }
    
    .expanded-header {
        padding: 12px 16px !important;
    }
    
    .expanded-controls {
        padding: 10px 16px !important;
    }
    
    .expanded-controls button {
        padding: 8px 16px !important;
        font-size: 0.85em !important;
    }
    
    .reel-video-player {
        height: 200px !important;
    }
    
    .reel-header {
        padding: 12px 16px !important;
    }
    
    .reel-controls {
        padding: 10px 16px !important;
    }
    
    .reel-controls button {
        padding: 8px 16px !important;
        font-size: 0.85em !important;
    }
}