/* Critical CSS for immediate rendering */
        body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; margin: 0; }
        .loading { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
        :root {
            --primary-color: #0066CC;
            --secondary-color: #004499;
            --accent-color: #FF6B35;
            --success-color: #10b981;
            --danger-color: #ef4444;
            --text-primary: #1a1a1a;
            --text-secondary: #4a5568;
            --text-light: #718096;
            --border-color: #e2e8f0;
            --bg-light: #fafafa;
        }
        
        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
            color: var(--text-primary);
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
        }
        
        .news-title {
            font-family: 'Playfair Display', Georgia, serif;
        }
        
        /* Breaking News Ticker */
        .breaking-news {
            background: linear-gradient(90deg, #dc2626, #b91c1c);
            position: relative;
            overflow: hidden;
        }
        
        .news-ticker {
            display: flex;
            animation: scroll 30s linear infinite;
            white-space: nowrap;
        }
        
        @keyframes scroll {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }
        
        /* Live Score Ticker */
        .live-ticker {
            background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
            color: white;
            padding: 0.5rem 0;
            overflow: hidden;
        }
        
        .live-ticker-content {
            display: flex;
            animation: ticker 40s linear infinite;
            white-space: nowrap;
        }
        
        @keyframes ticker {
            0% { transform: translateX(100%); }
            100% { transform: translateX(-100%); }
        }
        
        .live-dot {
            display: inline-block;
            width: 8px;
            height: 8px;
            background: #ef4444;
            border-radius: 50%;
            margin-right: 0.5rem;
            animation: pulse 1.5s infinite;
        }
        
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        
        /* Article Cards */
        .article-card {
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            transform: translateY(0);
            position: relative;
            overflow: hidden;
        }
        
        .article-card:hover {
            transform: translateY(-8px) scale(1.02);
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        }
        
        .article-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .article-card:hover::before {
            opacity: 1;
        }
        
        .article-image {
            aspect-ratio: 16 / 10;
            overflow: hidden;
            background: linear-gradient(45deg, #f3f4f6, #e5e7eb);
        }
        
        .article-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .article-card:hover .article-image img {
            transform: scale(1.05);
            filter: brightness(1.05) saturate(1.1);
        }
        
        /* Featured Badge */
        .featured-badge {
            background: linear-gradient(45deg, #f59e0b, #d97706);
            animation: glow 2s infinite;
            box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
        }
        
        @keyframes glow {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.8; }
        }
        
        /* Featured Carousel Styles */
        .featured-carousel {
            position: relative;
            overflow: hidden;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 1rem;
            padding: 2rem;
            margin-top: 2rem;
        }
        
        .carousel-container {
            display: flex;
            transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }
        
        .carousel-slide {
            min-width: 100%;
            padding: 0 1rem;
        }
        
        .carousel-controls {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 100%;
            display: flex;
            justify-content: space-between;
            padding: 0 1rem;
            pointer-events: none;
        }
        
        .carousel-btn {
            background: rgba(255, 255, 255, 0.9);
            border: none;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.3s;
            pointer-events: all;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }
        
        .carousel-btn:hover {
            background: white;
            transform: scale(1.1);
        }
        
        .carousel-dots {
            display: flex;
            justify-content: center;
            gap: 8px;
            margin-top: 1rem;
        }
        
        .carousel-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.4);
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .carousel-dot.active {
            width: 24px;
            border-radius: 4px;
            background: white;
        }
        
        /* Sub-featured grid */
        .sub-featured-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 1.5rem;
            margin-top: 2rem;
        }
        
        .sub-featured-card {
            background: white;
            border-radius: 0.75rem;
            overflow: hidden;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            transition: all 0.3s;
            border: 2px solid transparent;
        }
        
        .sub-featured-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15);
            border-color: var(--primary-color);
        }
        
        /* Game Cards */
        .game-card {
            background: white;
            border: 1px solid var(--border-color);
            border-radius: 8px;
            padding: 0.75rem;
            margin-bottom: 0.5rem;
            transition: all 0.3s ease;
        }
        
        .game-card:hover {
            transform: translateX(4px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            border-color: var(--primary-color);
        }
        
        .game-card.live {
            border-left: 3px solid var(--danger-color);
            background: linear-gradient(to right, rgba(239, 68, 68, 0.05), white);
        }
        
        /* Rankings */
        .rank-item {
            padding: 0.5rem;
            border-radius: 4px;
            transition: all 0.2s ease;
        }
        
        .rank-item:hover {
            background: var(--bg-light);
            transform: translateX(4px);
        }
        
        .rank-up { color: var(--success-color); }
        .rank-down { color: var(--danger-color); }
        .rank-same { color: var(--text-light); }
        
        /* Sidebar Cards */
        .sidebar-card {
            background: white;
            border-radius: 1rem;
            padding: 1.5rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }
        
        .sidebar-card:hover {
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
            transform: translateY(-2px);
        }
        
        /* Sticky Elements */
        .sticky-sidebar {
            position: sticky;
            top: 80px;
            max-height: calc(100vh - 100px);
            overflow-y: auto;
        }
        
        /* Custom Scrollbar */
        .custom-scrollbar::-webkit-scrollbar {
            width: 6px;
        }
        
        .custom-scrollbar::-webkit-scrollbar-track {
            background: var(--bg-light);
            border-radius: 3px;
        }
        
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: var(--text-light);
            border-radius: 3px;
        }
        
        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background: var(--text-secondary);
        }
        
        /* Mobile Responsive */
        @media (max-width: 1024px) {
            .sticky-sidebar {
                position: static;
                max-height: none;
            }
            
            .sub-featured-grid {
                grid-template-columns: 1fr;
            }
        }
        
        /* Enhanced Mobile Design */
        @media (max-width: 768px) {
            /* Base font size for better readability */
            html {
                font-size: 16px !important;
            }
            
            body {
                -webkit-text-size-adjust: 100%;
                -ms-text-size-adjust: 100%;
            }
            
            /* Header improvements */
            .site-header {
                padding: 0.5rem 0 !important;
            }
            
            /* Reduce vertical spacing on mobile */
            .breaking-news {
                padding-top: 0.375rem !important;
                padding-bottom: 0.375rem !important;
                font-size: 0.8125rem !important;  /* 13px - more readable */
            }

            .breaking-news .font-bold {
                font-size: 0.75rem !important;  /* "BREAKING" badge smaller */
            }
            
            nav {
                height: 3.5rem !important;
            }
            
            /* Logo and branding - responsive sizing */
            .site-logo {
                font-size: 0.95rem !important;  /* 15.2px for tablets/mobile */
                font-weight: 700;
                line-height: 1.2;
            }
            
            /* Navigation tabs - better spacing and size */
            .nav-container {
                padding: 0.75rem 0;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }
            
            .nav-tabs {
                display: flex;
                gap: 0.5rem;
                padding: 0 1rem;
                white-space: nowrap;
            }
            
            .nav-tabs a,
            .nav-tabs button {
                font-size: 1rem !important;
                padding: 0.75rem 1.25rem !important;
                border-radius: 0.5rem;
                font-weight: 500;
                min-width: auto;
            }
            
            /* Gender toggle buttons - better touch targets */
            .gender-toggle {
                display: flex;
                gap: 0.375rem;  /* Tighter gap */
                padding: 0.5rem;
            }

            .gender-toggle a {
                flex: 1;
                text-align: center;
                padding: 0.875rem 0.75rem !important;  /* Taller for better touch */
                font-size: 0.9375rem !important;  /* Slightly smaller */
                font-weight: 600;
                min-height: 44px;  /* iOS minimum touch target */
                display: flex;
                align-items: center;
                justify-content: center;
            }
            
            /* Featured article improvements */
            .featured-article h1 {
                font-size: 1.5rem !important;  /* Reduced from 1.875rem (30px to 24px) */
                line-height: 1.3 !important;
                margin-bottom: 0.75rem;
            }

            /* Hero section - more compact */
            section.bg-gradient-to-br {
                padding-top: 1rem !important;  /* Reduced from py-12 */
                padding-bottom: 1rem !important;
            }

            section.bg-gradient-to-br h2 {
                font-size: 1.125rem !important;  /* "Today's Top Story" smaller - 18px */
                margin-bottom: 0.5rem !important;
            }

            /* Hero article title */
            section.bg-gradient-to-br h1.news-title {
                font-size: 1.5rem !important;  /* 24px instead of 48px */
                line-height: 1.3 !important;
                margin-bottom: 0.75rem !important;
            }

            /* Hero article description */
            section.bg-gradient-to-br article p.text-xl {
                font-size: 0.9375rem !important;  /* 15px instead of 20px */
                line-height: 1.5 !important;
                margin-bottom: 1rem !important;
            }

            /* Category badges in hero */
            section.bg-gradient-to-br .inline-block,
            section.bg-gradient-to-br .inline-flex {
                font-size: 0.75rem !important;  /* 12px */
                padding: 0.375rem 0.625rem !important;
            }
            
            /* Category badges */
            .category-badge,
            .featured-badge,
            span[class*="badge"] {
                font-size: 0.875rem !important;
                padding: 0.5rem 0.875rem !important;
                font-weight: 600;
                border-radius: 0.375rem;
            }
            
            /* Article cards - more compact */
            .article-card {
                padding: 1rem !important;  /* Reduced from 1.25rem */
                margin-bottom: 0.75rem;  /* Tighter spacing */
                display: flex !important;
                flex-direction: column !important;
            }

            /* Reorder on mobile: image first, then content */
            .article-card .article-team-logos,
            .article-card .article-image {
                order: -1 !important;  /* Move images to top */
            }

            .article-card > div:not(.article-team-logos):not(.article-image) {
                order: 1 !important;  /* Content after image */
            }

            .article-card h2,
            .article-card h3 {
                font-size: 1.125rem !important;  /* Reduced from 1.25rem (20px to 18px) */
                line-height: 1.4 !important;
                margin-bottom: 0.5rem;  /* Tighter spacing */
            }

            /* Remove transform on mobile - causes janky scrolling */
            .article-card:hover {
                transform: none !important;
            }
            
            .article-card p {
                font-size: 1rem !important;
                line-height: 1.6 !important;
                color: #4a5568;
            }
            
            /* Meta information */
            .article-meta,
            .text-sm {
                font-size: 0.9375rem !important;
            }
            
            .text-xs {
                font-size: 0.875rem !important;
            }
            
            /* Buttons and links */
            button,
            .btn,
            a.button {
                min-height: 48px !important;
                padding: 0.75rem 1.25rem !important;
                font-size: 1rem !important;
                font-weight: 500;
            }
            
            /* Touch targets */
            a, button, input, select, textarea {
                min-height: 44px;
            }
            
            /* Form elements */
            input[type="text"],
            input[type="email"],
            input[type="search"],
            select,
            textarea {
                font-size: 16px !important;
                padding: 0.875rem !important;
                border-radius: 0.5rem;
            }
            
            /* Section spacing - more compact on mobile */
            section {
                padding: 1.5rem 1rem !important;  /* Reduced from 2.5rem (40px to 24px) */
            }
            
            /* Live ticker */
            .live-ticker {
                font-size: 0.9375rem !important;
                padding: 0.75rem;
            }
            
            /* Breaking news ticker */
            .news-ticker {
                animation-duration: 20s;
                font-size: 0.9375rem !important;
            }
            
            /* Team logos in hero - smaller on mobile */
            section.bg-gradient-to-br .w-32 {
                width: 6rem !important;  /* 96px instead of 128px */
                height: 6rem !important;
            }

            section.bg-gradient-to-br .text-4xl {
                font-size: 2rem !important;  /* "VS" text smaller */
            }

            /* Hide featured carousel on mobile */
            .featured-carousel {
                display: none !important;
            }

            /* Hide entire left sidebar (games section) on mobile */
            aside#scores {
                display: none !important;
            }

            /* Hide right sidebar (rankings section) on mobile */
            aside.lg\:col-span-3:not(#scores) {
                display: none !important;
            }

            /* Filter buttons - smaller and more compact */
            .sidebar-card .flex.space-x-1 button {
                padding: 0.375rem 0.5rem !important;  /* Smaller padding */
                font-size: 0.65rem !important;  /* 10.4px */
            }

            /* Navigation dots - smaller and more subtle on mobile */
            section.bg-gradient-to-br button.w-3 {
                width: 0.625rem !important;  /* 10px instead of 12px */
                height: 0.625rem !important;
                opacity: 0.6;  /* Make inactive dots more subtle */
            }

            section.bg-gradient-to-br button.w-3.bg-red-600,
            section.bg-gradient-to-br button.bg-red-600 {
                opacity: 1 !important;  /* Active dot fully visible */
            }

            .featured-carousel {
                padding: 1rem;
                margin-top: 1rem;
            }

            .carousel-slide {
                padding: 0 0.5rem;
            }

            .carousel-btn {
                width: 40px;  /* Larger touch target */
                height: 40px;
            }

            .sub-featured-grid {
                grid-template-columns: 1fr;
                gap: 1rem;
            }
        }
        
        @media (max-width: 640px) {
            .carousel-slide .flex {
                flex-direction: column;
            }

            .carousel-slide img,
            .carousel-slide .w-32 {
                width: 100%;
                max-width: 200px;
                height: auto;
                margin: 0 auto 1rem;
            }

            .carousel-controls {
                padding: 0 0.5rem;
            }
        }

        /* Ultra-small screens (small phones) */
        @media (max-width: 480px) {
            .site-logo {
                font-size: 0.85rem !important;  /* 13.6px for small phones */
            }

            /* Reduce logo image size on very small screens */
            nav a img.h-8 {
                height: 1.75rem !important; /* 28px instead of 32px */
                width: 1.75rem !important;
            }

            /* Tighter spacing between logo and text */
            nav .flex.items-center.space-x-2,
            nav .flex.items-center.space-x-3 {
                gap: 0.5rem !important;
            }

            /* Reduce beta badge size */
            nav .flex.items-center span.text-xs {
                font-size: 0.65rem !important;
                padding: 0.125rem 0.375rem !important;
            }
        }

        /* Remove white circular backgrounds from NCAA SVG logos */
        .article-card img.w-6.h-6,
        .article-card img.object-contain {
            mix-blend-mode: darken;
        }

        /* Date Headers */
        .date-header {
            scroll-margin-top: 100px;
        }

        .date-header-gradient {
            background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
            box-shadow: 0 10px 25px rgba(255, 107, 53, 0.3);
        }
        /* Custom Select2 styling */
        .select2-container .select2-selection--single {
            height: 38px !important;
            padding: 4px 10px 4px 40px !important;
            border: 1px solid #d1d5db !important;
            border-radius: 0.5rem !important;
            font-size: 0.875rem !important;
        }
        .select2-container--default .select2-selection--single .select2-selection__arrow {
            display: none;
        }
        .select2-container--default .select2-selection--single .select2-selection__placeholder {
            color: #9ca3af;
        }
        .select2-dropdown {
            border: 1px solid #d1d5db !important;
            border-radius: 0.5rem !important;
            margin-top: 2px;
        }
        .select2-results__option {
            padding: 8px 12px !important;
            font-size: 0.875rem !important;
        }
        .select2-results__option--highlighted {
            background-color: #3b82f6 !important;
        }
        .select2-search__field {
            font-size: 0.875rem !important;
            padding: 6px 10px !important;
        }
        /* REMOVE BOTTOM WHITESPACE GAP */
        html, body {
            margin: 0 !important;
            padding: 0 !important;
            min-height: 100vh !important;
            height: auto !important;
        }

        body {
            overflow-x: hidden !important;
        }

        /* Ensure footer is at the bottom with no gap */
        footer {
            margin-bottom: 0 !important;
            padding-bottom: 40px !important;
        }

        /* Remove any extra space after footer */
        footer::after,
        body::after {
            content: none !important;
            display: none !important;
        }

        /* Floating chat button */
        .chat-widget-button {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
            transition: all 0.3s ease;
            z-index: 9998;
            border: 3px solid white;
        }

        .chat-widget-button:hover {
            /* Disabled - Coming Soon */
            /* transform: scale(1.1); */
            box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
        }

        .chat-widget-button i {
            color: white;
            font-size: 24px;
        }

        /* Chat badge (notification dot) */
        .chat-widget-badge {
            position: absolute;
            top: -8px;
            right: -8px;
            background: #ffa500;
            color: white;
            border-radius: 12px;
            padding: 4px 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 9px;
            font-weight: bold;
            border: 2px solid white;
            white-space: nowrap;
            letter-spacing: 0.5px;
        }

        /* Coming soon tooltip */
        .chat-widget-tooltip {
            position: absolute;
            bottom: 70px;
            right: 0;
            background: rgba(0, 0, 0, 0.9);
            color: white;
            padding: 10px 15px;
            border-radius: 8px;
            font-size: 13px;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }

        .chat-widget-button:hover .chat-widget-tooltip {
            opacity: 1;
        }

        .chat-widget-tooltip::after {
            content: '';
            position: absolute;
            bottom: -8px;
            right: 20px;
            width: 0;
            height: 0;
            border-left: 8px solid transparent;
            border-right: 8px solid transparent;
            border-top: 8px solid rgba(0, 0, 0, 0.9);
        }

        /* Modal overlay */
        .chat-modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            padding: 20px;
        }

        .chat-modal-overlay.active {
            display: flex;
        }

        /* Modal container */
        .chat-modal-container {
            position: relative;
            width: 100%;
            max-width: 900px;
            height: 85vh;
            background: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
            animation: slideUp 0.3s ease;
        }

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

        /* Close button */
        .chat-modal-close {
            position: absolute;
            top: 15px;
            right: 15px;
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.95);
            border: none;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 10000;
            transition: all 0.2s;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        }

        .chat-modal-close:hover {
            background: white;
            transform: scale(1.1);
        }

        .chat-modal-close i {
            color: #667eea;
            font-size: 20px;
        }

        /* iframe styling */
        .chat-modal-iframe {
            width: 100%;
            height: 100%;
            border: none;
        }

        /* Mobile responsive */
        @media (max-width: 768px) {
            .chat-modal-container {
                max-width: 100%;
                height: 100vh;
                border-radius: 0;
            }

            .chat-widget-button {
                width: 55px;
                height: 55px;
                bottom: 15px;
                right: 15px;
            }

            .chat-widget-button i {
                font-size: 22px;
            }
        }

        /* Minimize button on desktop */
        @media (min-width: 769px) {
            .chat-modal-minimize {
                position: absolute;
                top: 15px;
                right: 65px;
                width: 40px;
                height: 40px;
                background: rgba(255, 255, 255, 0.95);
                border: none;
                border-radius: 50%;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;
                z-index: 10000;
                transition: all 0.2s;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
            }

            .chat-modal-minimize:hover {
                background: white;
                transform: scale(1.1);
            }

            .chat-modal-minimize i {
                color: #667eea;
                font-size: 18px;
            }
        }