/* Dashboard-specific styles - inherits from common.css */
        
        /* CLS Prevention - Reserve space for dynamic content */
        .prediction-card {
            min-height: 300px;
            margin-bottom: 20px;
            transition: none; /* Prevent layout shifts during transitions */
        }
        
        .stats-container {
            min-height: 120px;
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
        }
        
        .filters-container {
            min-height: 80px;
            padding: 15px 0;
        }
        
        /* Prevent layout shift during data loading */
        .loading-placeholder {
            min-height: 400px;
            background: #f5f5f5;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
        }
        
        /* CLS Prevention - Main element */
        main {
            /* Removed min-height to prevent layout shifts */
            transition: none;
            overflow-x: visible;
        }
        
        /* CLS Prevention - Main container */
        .main-container {
            /* Removed min-height to prevent layout shifts */
            transition: none;
        }
        
        /* CLS Prevention for predictions container */
        #predictionsContainer {
            min-height: 600px;
            transition: none;
            /* Content Visibility API - Modern browsers only */
            content-visibility: auto;
            contain-intrinsic-size: 0 800px;
        }
        
        /* Skeleton Loader - Wave Effect (Option 3) */
        .skeleton-loader {
            position: relative;
            background: #e0e0e0;
            overflow: hidden;
            border-radius: 8px;
            margin-bottom: 16px;
        }
        
        .skeleton-loader::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            height: 100%;
            width: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
            animation: skeleton-wave 2s infinite;
        }
        
        @keyframes skeleton-wave {
            0% { left: -100%; }
            100% { left: 100%; }
        }
        
        .skeleton-tournament-header {
            height: 80px;
            border-radius: 12px;
            margin-bottom: 20px;
        }
        
        .skeleton-match-card {
            height: 250px;
            border-radius: 8px;
        }
        
        /* Ensure consistent height for prediction cards */
        .prediction-card {
            min-height: 300px;
            margin-bottom: 20px;
            transition: none;
        }
        
        /* Prevent layout shift in tournament sections */
        .tournament-section {
            min-height: 200px;
            margin-bottom: 32px;
            overflow: visible;
        }
        
        /* Prevent layout shift in collapsible sections */
        .collapsible-content {
            min-height: 50px;
            transition: none;
        }
        
        .collapsible-content.collapsed {
            min-height: 0;
            overflow: hidden;
        }
        
        /* Ensure consistent card heights */
        .card {
            min-height: 200px;
            transition: none; /* Prevent layout shifts */
        }
        
        /* Prevent text reflow */
        .card-title {
            min-height: 1.2em;
            overflow: hidden;
        }
        
        .card-content {
            min-height: 100px;
        }
        
        /* Web font CLS prevention */
        body {
            font-display: swap;
        }
        
        /* Prevent layout shifts from dynamic content */
        .loading-placeholder {
            min-height: 600px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        /* Ensure consistent heights for all major sections */
        .header-card {
            min-height: auto;
            transition: none;
        }
        
        .stats-filters-container {
            min-height: auto;
            transition: none;
        }
        
        .stats-row {
            min-height: auto;
            transition: none;
        }
        
        .filters-row {
            min-height: auto;
            transition: none;
        }
        
        .stat-card {
            min-height: auto;
            transition: none;
        }
        
        .stat-number {
            min-height: auto;
            line-height: 1.2;
            transition: none;
        }
        
        /* Prevent shifts from player analysis */
        .player-analysis {
            min-height: 200px;
        }
        
        /* Prevent shifts from H2H sections */
        .h2h-section {
            min-height: 100px;
        }
        
        /* Prevent shifts from underdog sections */
        .underdog-section {
            min-height: 100px;
        }
        
        /* Aggressive CLS Prevention - Prevent all layout shifts */
        * {
            transition: none !important;
        }
        
        /* Ensure all dynamic content has consistent dimensions */
        .header-title {
            min-height: 1.65em;
        }
        
        .header-subtitle {
            min-height: 1.1em;
        }
        
        .last-updated {
            min-height: 1.2em;
        }
        
        /* Prevent shifts from dynamic content updates */
        .stat-number:empty::before {
            content: "-";
            visibility: hidden;
        }
        
        /* Ensure consistent spacing */
        .main-container > * {
            margin-bottom: 20px;
        }
        
        .main-container > *:last-child {
            margin-bottom: 0;
        }
        
        /* Navigation styles inherited from common.css */
        
        .main-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
            padding-top: 80px;
        }
        
.header-card {
    background: var(--primary-color);
            color: white;
            border-radius: 8px;
            padding: 4px 24px 4px 24px;
            margin-bottom: 24px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.08);
            position: relative;
            width: 100vw;
            left: 50%;
            right: 50%;
            margin-left: -50vw;
            margin-right: -50vw;
        }
        
        .header-title {
            font-size: 1.5rem;
            font-weight: 300;
            margin: 0;
            line-height: 1.1;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .header-subtitle {
            font-size: 0.95rem;
            opacity: 0.9;
            margin: 4px 0 12px 0;
        }
        
        /* Dashboard Introduction (Material Design style) */
        .header-description {
            color: rgba(255, 255, 255, 0.7); /* Material Design secondary text on dark */
            font-size: 0.9rem;
            line-height: 1.5;
            margin: 0;
            text-align: left;
            font-weight: 300;
            padding-top: 8px;
            border-top: 1px solid rgba(255, 255, 255, 0.12); /* Material Design divider */
        }
        
        .last-updated {
            position: absolute;
            top: 8px;
            right: 24px;
            font-size: 0.8rem;
            opacity: 0.8;
            white-space: nowrap;
            max-width: 250px;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        /* Loading state */
        .loading {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 40px;
            color: var(--text-secondary);
        }
        /* Performance optimizations */
        * {
            box-sizing: border-box;
        }
        
        /* Optimize font loading */
        @font-face {
            font-family: 'Roboto';
            font-display: swap; /* Improves loading performance */
        }
        
        /* Reduce layout thrashing */
        .prediction-card {
            contain: layout style paint;
        }
        
        .player-analysis {
            contain: layout style;
        }
        
        /* Optimize animations */
        .collapsible-content {
            will-change: max-height;
        }
        
        .toast {
            will-change: transform, opacity;
        }

        /* Screen reader only class for accessibility */
        .sr-only {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }

        body {
            font-family: 'Roboto', sans-serif;
            background-color: var(--background-color);
            color: var(--text-primary);
            line-height: 1.6;
        }

        .main-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
        }

.header-card {
    background: var(--primary-color);
            color: white;
            border-radius: 8px;
            padding: 12px 32px 12px 32px;
            margin-bottom: 24px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.08);
            position: relative;
        }

        .header-title {
            font-size: 2.5rem;
            font-weight: 300;
            margin: 0 0 8px 0;
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .header-subtitle {
            font-size: 1.1rem;
            opacity: 0.9;
            margin: 0;
        }

        .last-updated {
            position: absolute;
            top: 24px;
            right: 32px;
            font-size: 0.8rem;
            opacity: 0.8;
            white-space: nowrap;
            max-width: 250px;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .stats-row {
            display: flex;
            gap: 12px;
            margin-bottom: 0;
            flex-wrap: wrap;
            flex: 3;
        }

        .stat-card {
            flex: 1;
            min-width: 120px;
            background: var(--surface-color);
            border-radius: 6px;
            padding: 6px 8px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            transition: box-shadow 0.3s ease;
        }

        .stat-card:hover {
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        }

        /* Ensemble betting badges - unicolor */
        .betting-badge.strong-bet,
        .betting-badge.good-bet,
        .betting-badge.cautious-bet,
        .betting-badge.avoid-bet {
            background-color: var(--primary-color) !important;
            color: white !important;
        }
        
        /* Unicolor styling for ensemble modal */
        #ensembleModal .modal-content {
            color: var(--text-primary);
        }
        
        #ensembleModal .modal-content h4,
        #ensembleModal .modal-content h5 {
            color: var(--primary-color) !important;
        }
        
        #ensembleModal .modal-content .material-icons {
            color: var(--primary-color) !important;
        }
        
        #ensembleModal .modal-content .ensemble-result {
            background: var(--primary-color) !important;
            color: white !important;
        }
        
        #ensembleModal .modal-content .ensemble-result h5 {
            color: white !important;
        }
        
        #ensembleModal .modal-content .model-result {
            border-color: var(--primary-color) !important;
        }
        
        #ensembleModal .modal-content .model-result > div:first-child {
            color: var(--primary-color) !important;
        }

        .stat-number {
            font-size: 1.3rem;
            font-weight: 300;
            color: var(--primary-color);
            margin: 0 0 2px 0;
            line-height: 1.1;
        }

        .stat-label {
            color: var(--text-secondary);
            font-size: 0.7rem;
            font-weight: 500;
            text-transform: uppercase;
            line-height: 1.2;
            letter-spacing: 0.3px;
        }

        .filters-card {
            background: var(--surface-color);
            border-radius: 4px;
            padding: 4px 6px;
            margin: 0;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            flex: 1;
        }

        .stats-filters-container {
            display: flex;
            gap: 12px;
            margin-bottom: 16px;
            align-items: stretch;
        }

        .filters-row {
            display: flex;
            flex-direction: column;
            gap: 4px;
            align-items: stretch;
        }

        .filter-row {
            display: flex;
            align-items: center;
            gap: 4px;
            min-height: 20px;
        }

        .filter-label {
            display: flex;
            align-items: center;
            gap: 3px;
            color: var(--text-secondary);
            font-size: 0.75rem;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.3px;
            margin-bottom: 0;
            margin-right: 8px;
            min-width: fit-content;
            padding: 0;
        }

        .filter-input {
            flex: 1;
        }

        .filter-group {
            flex: 1;
            min-width: 100%;
        }


        .predictions-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(320px, 1fr));
            gap: 28px;
            overflow: visible;
        }

        .predictions-grid > .tournament-section,
        .predictions-grid > .tournament-separator {
            grid-column: 1 / -1;
        }

        .predictions-grid #skeletonLoader,
        .predictions-grid #predictionsContainer {
            grid-column: 1 / -1;
            width: 100%;
        }

        #predictionsContainer {
            display: flex;
            flex-direction: column;
            gap: 32px;
        }

        @media (max-width: 1500px) {
            .predictions-grid {
                grid-template-columns: repeat(2, minmax(320px, 1fr));
            }
        }

        @media (max-width: 900px) {
            .predictions-grid {
                grid-template-columns: minmax(0, 1fr);
                gap: 20px;
            }
        }

        .prediction-card {
            background: var(--surface-color);
            border-radius: 8px;
            overflow: visible; /* Allow content to be visible */
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
            min-height: 0; /* Allow card to shrink */
        }

        .prediction-card:hover {
            box-shadow: 0 8px 16px rgba(0,0,0,0.15);
            transform: translateY(-2px);
        }

        .prediction-card.high-confidence {
            border-left: 4px solid var(--success-color);
        }

        .prediction-card.medium-confidence {
            border-left: 4px solid var(--warning-color);
        }

        .prediction-card.low-confidence {
            border-left: 4px solid var(--error-color);
        }

        .prediction-card.toss-up {
            border-left: 4px solid var(--error-color);
            background: linear-gradient(135deg, rgba(244, 67, 54, 0.05) 0%, var(--surface-color) 100%);
        }

        .prediction-card.underdog-opportunity {
            border-left: 4px solid #ff4081;
            background: linear-gradient(135deg, rgba(255, 64, 129, 0.02) 0%, var(--surface-color) 100%);
        }

        /* Tournament grouping styles */
        .tournament-section {
            margin-bottom: 32px;
            display: block;
            width: 100%;
            clear: both;
            grid-column: 1 / -1;  /* Span all grid columns */
        }
        
        .tournament-header {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
            color: white;
            border-radius: 20px;
            padding: 24px 40px;
            margin: 32px 0 20px 0;
            width: 100%;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            position: relative;
            box-sizing: border-box;
        }
        
        /* First tournament header should not have top margin */
        .tournament-section:first-of-type .tournament-header {
            margin-top: 0;
        }
        
        .tournament-predictions {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: 20px;
        }
        
        /* Responsive multi-column layout for tournament predictions */
        @media (min-width: 900px) {
            .tournament-predictions {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 24px;
            }
        }
        
        @media (min-width: 1200px) {
            .tournament-predictions {
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 28px;
            }
        }
        
        @media (min-width: 1600px) {
            .tournament-predictions {
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 28px;
            }
        }
        
        @media (min-width: 2000px) {
            .tournament-predictions {
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 28px;
            }
        }

        .tournament-title {
            display: flex;
            align-items: center;
            gap: 12px;
            flex-wrap: wrap;
            width: 100%;
        }

        .tournament-title h2 {
            font-size: 1.6rem;
            font-weight: 500;
            margin: 0;
            flex: 0 1 auto;
        }

        .tournament-title .material-icons {
            font-size: 1.8rem;
            opacity: 0.9;
        }

        .match-count {
            background: rgba(255, 255, 255, 0.2);
            padding: 4px 12px;
            border-radius: 16px;
            font-size: 0.9rem;
            font-weight: 500;
            white-space: nowrap;
        }

        .tournament-separator {
            display: flex;
            align-items: center;
            margin: 8px 0;  /* Minimal spacing */
            gap: 16px;
            width: 100%;
            clear: both;
            grid-column: 1 / -1;  /* Span all grid columns */
        }

        .separator-line {
            flex: 1;
            height: 2px;
            background: linear-gradient(90deg, transparent 0%, var(--divider-color) 50%, transparent 100%);
        }

        .separator-content {
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--text-secondary);
            font-size: 0.9rem;
            font-weight: 500;
            white-space: nowrap;
        }

        .separator-content .material-icons {
            font-size: 1.2rem;
            opacity: 0.7;
        }
        
        /* Responsive adjustments for tournament header and predictions */
        @media (max-width: 768px) {
            .header-description {
                font-size: 0.85rem;
                line-height: 1.4;
                padding-top: 10px;
                margin-top: 8px;
            }
            
            .tournament-header {
                margin: 24px 0 16px 0;
                padding: 20px 32px;
                border-radius: 16px;
                width: 100%;
                box-sizing: border-box;
            }
            
            .tournament-section:first-of-type .tournament-header {
                margin-top: 0;
            }
            
            .tournament-title h2 {
                font-size: 1.4rem;
            }
            
            .tournament-predictions {
                grid-template-columns: 1fr;
                gap: 12px;
            }
        }
        
        @media (max-width: 480px) {
            .tournament-header {
                margin: 20px 0 14px 0;
                padding: 16px 24px;
                border-radius: 12px;
                width: 100%;
                box-sizing: border-box;
            }
            
            .tournament-section:first-of-type .tournament-header {
                margin-top: 0;
            }
            
            .tournament-title h2 {
                font-size: 1.2rem;
            }
            
            .tournament-title .material-icons {
                font-size: 1.4rem;
            }
            
            .tournament-predictions {
                grid-template-columns: 1fr;
                gap: 10px;
            }
        }

        .match-header {
            background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary-color) 100%);
            color: white;
            padding: 12px 16px;
        }

        .match-title {
            font-size: 1.2rem;
            font-weight: 500;
            margin: 0 0 8px 0;
        }

        .match-details {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
        }

        .match-detail {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.9rem;
            opacity: 0.9;
        }

        .prediction-content {
            padding: 12px 16px;
            min-height: 0; /* Allow content to shrink */
            overflow: visible; /* Allow content to be visible */
        }

        .winner-section {
            text-align: center;
            margin-bottom: 12px;
            padding: 8px 12px;
            background: linear-gradient(135deg, rgba(25, 118, 210, 0.05) 0%, rgba(0, 188, 212, 0.05) 100%);
            border-radius: 6px;
            border: 1px solid rgba(25, 118, 210, 0.1);
            cursor: pointer;
            user-select: none;
            transition: all 0.3s ease;
            position: relative;
        }
        
        .winner-section:hover {
            background: linear-gradient(135deg, rgba(25, 118, 210, 0.08) 0%, rgba(0, 188, 212, 0.08) 100%);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(25, 118, 210, 0.15);
        }
        
        .winner-section:hover::after {
            color: #c53030;
            opacity: 1;
            transform: scale(1.1);
            text-shadow: 0 2px 8px rgba(229, 62, 62, 0.4);
        }
        
        .winner-section::after {
            content: '▼';
            font-size: 1.2rem;
            color: #e53e3e;
            position: absolute;
            right: 16px;
            top: 12px;
            transition: all 0.3s ease;
            opacity: 1;
        }
        
        .winner-section.collapsed::after {
            content: '▶';
            transform: none;
        }
        
        .collapsible-content {
            max-height: 1000px;
            overflow: hidden;
            transition: max-height 0.3s ease, padding 0.3s ease, margin 0.3s ease;
        }
        
        .collapsible-content.collapsed {
            max-height: 0 !important;
            height: 0 !important;
            padding: 0 !important;
            margin: 0 !important;
            border: none !important;
            min-height: 0 !important;
        }
        
        /* Hide individual analysis sections when main analysis section is collapsed */
        .analysis-section.collapsed .analysis-section-header,
        .analysis-section.collapsed .analysis-item,
        .analysis-section.collapsed .player-analysis,
        .analysis-section.collapsed .analysis-title {
            display: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
            height: 0 !important;
            overflow: hidden !important;
        }
        
        /* Mobile-specific aggressive hiding */
        @media (max-width: 768px) {
            .winner-section::after {
                content: '▼';
                font-size: 1.2rem;
                color: #e53e3e;
                position: absolute;
                right: 16px;
                top: 12px;
                transition: all 0.3s ease;
                opacity: 1;
            }
            
            .winner-section.collapsed::after {
                content: '▶';
                transform: none;
            }
            
            .collapsible-content.collapsed {
                max-height: 0 !important;
                height: 0 !important;
                padding: 0 !important;
                margin: 0 !important;
                border: none !important;
                min-height: 0 !important;
            }
            
            .analysis-section.collapsed {
                max-height: 0 !important;
                height: 0 !important;
                padding: 0 !important;
                margin: 0 !important;
                border: none !important;
                min-height: 0 !important;
            }
            
            /* Override conflicting mobile min-height rules when collapsed */
            .analysis-section.collapsed {
                min-height: 0 !important;
            }
            
            .player-analysis.collapsed,
            .analysis-section.collapsed .player-analysis {
                min-height: 0 !important;
                height: 0 !important;
                padding: 0 !important;
                margin: 0 !important;
            }
            
            /* Nuclear option - override ALL conflicting min-height rules */
            .prediction-card .analysis-section.collapsed {
                min-height: 0 !important;
            }
            
            .prediction-card .analysis-section.collapsed .player-analysis {
                min-height: 0 !important;
                height: 0 !important;
                padding: 0 !important;
                margin: 0 !important;
            }
        }
        
        @media (max-width: 480px) {
            .winner-section::after {
                content: '▼';
                font-size: 1.2rem;
                color: #e53e3e;
                position: absolute;
                right: 16px;
                top: 12px;
                transition: all 0.3s ease;
                opacity: 1;
            }
            
            .winner-section.collapsed::after {
                content: '▶';
                transform: none;
            }
            
            .collapsible-content.collapsed {
                max-height: 0 !important;
                height: 0 !important;
                padding: 0 !important;
                margin: 0 !important;
                border: none !important;
                min-height: 0 !important;
            }
            
            .analysis-section.collapsed {
                max-height: 0 !important;
                height: 0 !important;
                padding: 0 !important;
                margin: 0 !important;
                border: none !important;
                min-height: 0 !important;
            }
            
            /* Override conflicting mobile min-height rules when collapsed */
            .analysis-section.collapsed {
                min-height: 0 !important;
            }
            
            .player-analysis.collapsed,
            .analysis-section.collapsed .player-analysis {
                min-height: 0 !important;
                height: 0 !important;
                padding: 0 !important;
                margin: 0 !important;
            }
            
            /* Nuclear option - override ALL conflicting min-height rules */
            .prediction-card .analysis-section.collapsed {
                min-height: 0 !important;
            }
            
            .prediction-card .analysis-section.collapsed .player-analysis {
                min-height: 0 !important;
                height: 0 !important;
                padding: 0 !important;
                margin: 0 !important;
            }
        }
        
        @media (max-width: 390px) {
            .winner-section::after {
                content: '▼';
                font-size: 1.2rem;
                color: #e53e3e;
                position: absolute;
                right: 16px;
                top: 12px;
                transition: all 0.3s ease;
                opacity: 1;
            }
            
            .winner-section.collapsed::after {
                content: '▶';
                transform: none;
            }
            
            .collapsible-content.collapsed {
                max-height: 0 !important;
                height: 0 !important;
                padding: 0 !important;
                margin: 0 !important;
                border: none !important;
                min-height: 0 !important;
            }
            
            .analysis-section.collapsed {
                max-height: 0 !important;
                height: 0 !important;
                padding: 0 !important;
                margin: 0 !important;
                border: none !important;
                min-height: 0 !important;
            }
            
            /* Override conflicting mobile min-height rules when collapsed */
            .analysis-section.collapsed {
                min-height: 0 !important;
            }
            
            .player-analysis.collapsed,
            .analysis-section.collapsed .player-analysis {
                min-height: 0 !important;
                height: 0 !important;
                padding: 0 !important;
                margin: 0 !important;
            }
            
            /* Nuclear option - override ALL conflicting min-height rules */
            .prediction-card .analysis-section.collapsed {
                min-height: 0 !important;
            }
            
            .prediction-card .analysis-section.collapsed .player-analysis {
                min-height: 0 !important;
                height: 0 !important;
                padding: 0 !important;
                margin: 0 !important;
            }
        }
        
        /* Ensure collapsible behavior works on all screen sizes */
        @media (min-width: 769px) {
            .winner-section {
                cursor: pointer;
                user-select: none;
                transition: all 0.3s ease;
            }
            
            .winner-section:hover {
                background: linear-gradient(135deg, rgba(25, 118, 210, 0.08) 0%, rgba(0, 188, 212, 0.08) 100%);
            }
            
            .winner-section:hover::after {
                color: #c53030;
                opacity: 1;
                transform: scale(1.1);
                text-shadow: 0 2px 8px rgba(229, 62, 62, 0.4);
            }
            
            .winner-section::after {
                content: '▼';
                font-size: 1.2rem;
                color: #e53e3e;
                position: absolute;
                right: 16px;
                top: 12px;
                transition: all 0.3s ease;
                opacity: 1;
            }
            
            .winner-section.collapsed::after {
                content: '▶';
                transform: none;
            }
            
            .collapsible-content {
                max-height: 1000px;
                overflow: hidden;
                transition: max-height 0.3s ease, padding 0.3s ease, margin 0.3s ease;
            }
            
            .collapsible-content.collapsed {
                max-height: 0 !important;
                height: 0 !important;
                padding: 0 !important;
                margin: 0 !important;
                border: none !important;
                min-height: 0 !important;
            }
            
            /* Hide individual analysis sections when main analysis section is collapsed */
            .analysis-section.collapsed .analysis-section-header,
            .analysis-section.collapsed .analysis-item,
            .analysis-section.collapsed .player-analysis,
            .analysis-section.collapsed .analysis-title {
                display: none !important;
                visibility: hidden !important;
                opacity: 0 !important;
                height: 0 !important;
                overflow: hidden !important;
            }
        }

        .predicted-winner {
            font-size: 1.3rem;
            font-weight: 500;
            color: var(--primary-color);
            margin: 0 0 12px 0;
        }

        .confidence-section {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            margin-bottom: 8px;
        }

        .confidence-bar {
            width: 160px;
            height: 6px;
            background: var(--divider-color);
            border-radius: 3px;
            overflow: hidden;
        }

        .confidence-fill {
            height: 100%;
            border-radius: 4px;
            transition: width 0.3s ease;
        }

        .confidence-fill.high { background: var(--success-color); }
        .confidence-fill.medium { background: var(--warning-color); }
        .confidence-fill.toss-up { background: var(--error-color); }
        .confidence-fill.low { background: var(--error-color); }

        .confidence-text {
            font-weight: 500;
            font-size: 1rem;
            color: var(--text-primary);
        }


        .odds-section {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            margin: 12px 0;
        }

        .player-odds {
            text-align: center;
            padding: 8px;
            border-radius: 4px;
            border: 1px solid var(--divider-color);
            transition: all 0.3s ease;
        }

        .player-odds.winner {
            border-color: var(--success-color);
            background: rgba(76, 175, 80, 0.05);
        }

        .player-odds.underdog {
            border-color: #ff4081;
            background: rgba(255, 64, 129, 0.05);
        }

        .player-odds.monitoring {
            border-color: var(--warning-color);
            background: rgba(255, 152, 0, 0.05);
        }

        .player-odds.first-match-back {
            border-color: var(--warning-color);
            background: rgba(255, 152, 0, 0.05);
        }

        .injury-indicator {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 0.75rem;
            font-weight: 500;
            padding: 2px 6px;
            border-radius: 12px;
            margin-top: 4px;
        }

        .injury-indicator.current {
            background: rgba(244, 67, 54, 0.1);
            color: var(--error-color);
            border: 1px solid rgba(244, 67, 54, 0.3);
        }

        .injury-indicator.recent {
            background: rgba(255, 152, 0, 0.1);
            color: var(--warning-color);
            border: 1px solid rgba(255, 152, 0, 0.3);
        }

        .injury-indicator.first-match {
            background: rgba(33, 150, 243, 0.1);
            color: #2196f3;
            border: 1px solid rgba(33, 150, 243, 0.3);
        }

        .player-name {
            font-weight: 500;
            margin-bottom: 6px;
            font-size: 0.9rem;
        }

        .odds-display {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin: 6px 0;
        }

        .probability {
            font-size: 1.1rem;
            font-weight: 500;
            color: var(--text-primary);
        }

        .decimal-odds {
            font-size: 0.85rem;
            color: var(--text-primary);
            font-weight: 600;
            opacity: 0.9;
        }

        .value-indicator {
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 0.7rem;
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }

        .value-indicator.good-value {
            background: rgba(76, 175, 80, 0.1);
            color: var(--success-color);
        }

        .value-indicator.poor-value {
            background: rgba(244, 67, 54, 0.1);
            color: var(--error-color);
        }

        .value-indicator.potential-underdog {
            background: rgba(255, 152, 0, 0.1);
            color: var(--warning-color);
        }

        .value-indicator.proven-underdog {
            background: rgba(244, 67, 54, 0.1);
            color: var(--error-color);
        }

        .value-indicator.value-bet {
            background: rgba(76, 175, 80, 0.15);
            color: #2e7d32;
            border: 1px solid rgba(76, 175, 80, 0.4);
        }

        .value-indicator.great-value-bet {
            background: rgba(76, 175, 80, 0.25);
            color: #1b5e20;
            border: 1px solid rgba(76, 175, 80, 0.6);
        }

        /* Upset Risk Indicators - Material Design */
        .value-indicator.upset-risk-safe,
        .value-indicator.upset-risk-safe-win,
        .value-indicator.upset-risk-upset-low {
            background: rgba(76, 175, 80, 0.15);
            color: #2e7d32;
            border: 1px solid rgba(76, 175, 80, 0.3);
        }

        .value-indicator.upset-risk-at-risk,
        .value-indicator.upset-risk-upset-medium {
            background: rgba(255, 152, 0, 0.15);
            color: #f57c00;
            border: 1px solid rgba(255, 152, 0, 0.3);
        }

        .value-indicator.upset-risk-vulnerable,
        .value-indicator.upset-risk-upset-high {
            background: rgba(244, 67, 54, 0.15);
            color: #c62828;
            border: 1px solid rgba(244, 67, 54, 0.3);
        }

        /* Ensemble Information - Material Design Card */
        .ensemble-info {
            margin: 12px 0;
            padding: 12px;
            border-radius: 8px;
            background: rgba(33, 150, 243, 0.08);
            border: 1px solid rgba(33, 150, 243, 0.2);
        }

        .ensemble-info.high-confidence {
            background: rgba(76, 175, 80, 0.08);
            border: 1px solid rgba(76, 175, 80, 0.3);
        }

        .ensemble-info.medium-confidence {
            background: rgba(255, 152, 0, 0.08);
            border: 1px solid rgba(255, 152, 0, 0.3);
        }

        .ensemble-info.low-confidence {
            background: rgba(244, 67, 54, 0.08);
            border: 1px solid rgba(244, 67, 54, 0.3);
        }

        .ensemble-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px;
            padding-bottom: 8px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        }

        .ensemble-status {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 0.85rem;
        }

        .ensemble-status .material-icons {
            font-size: 18px;
            color: inherit;
        }

        .ensemble-status-label {
            color: var(--text-secondary);
            font-weight: 500;
        }

        .ensemble-confidence {
            color: var(--primary-color);
            font-weight: 700;
            font-size: 1.1rem;
        }

        .ensemble-main {
            text-align: center;
            margin-bottom: 10px;
        }

        .ensemble-info.high-confidence .ensemble-main,
        .ensemble-info.high-confidence .ensemble-status,
        .ensemble-info.high-confidence .ensemble-status-label,
        .ensemble-info.high-confidence .ensemble-confidence {
            color: #2e7d32;
        }

        .ensemble-info.medium-confidence .ensemble-main,
        .ensemble-info.medium-confidence .ensemble-status,
        .ensemble-info.medium-confidence .ensemble-status-label,
        .ensemble-info.medium-confidence .ensemble-confidence {
            color: #f57c00;
        }

        .ensemble-info.low-confidence .ensemble-main,
        .ensemble-info.low-confidence .ensemble-status,
        .ensemble-info.low-confidence .ensemble-status-label,
        .ensemble-info.low-confidence .ensemble-confidence {
            color: #c62828;
        }

        .ensemble-actions {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .ensemble-risk {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            margin-top: 8px;
            padding-top: 8px;
            border-top: 1px solid rgba(0, 0, 0, 0.1);
            font-size: 0.75rem;
            color: var(--text-secondary);
        }

        .ensemble-risk .material-icons {
            font-size: 0.9rem;
            vertical-align: middle;
        }

        /* Betting Recommendation Badges */
        .betting-badge {
            display: inline-flex;
            align-items: center;
            padding: 4px 12px;
            border-radius: 16px;
            font-size: 0.8rem;
            font-weight: 600;
            text-transform: uppercase;
            transition: all 0.2s ease;
        }

        .betting-badge.strong-bet,
        .betting-badge.moderate-bet,
        .betting-badge.weak-bet,
        .betting-badge.avoid-bet {
            background: rgba(33, 150, 243, 0.15);
            color: #1565c0;
            border: 1px solid rgba(33, 150, 243, 0.3);
        }

        .ensemble-details-btn {
            background: transparent;
            border: 1px solid;
            padding: 4px 12px;
            border-radius: 4px;
            font-size: 0.75rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .ensemble-info.high-confidence .ensemble-details-btn {
            border-color: #2e7d32;
            color: #2e7d32;
        }

        .ensemble-info.medium-confidence .ensemble-details-btn {
            border-color: #f57c00;
            color: #f57c00;
        }

        .ensemble-info.low-confidence .ensemble-details-btn {
            border-color: #c62828;
            color: #c62828;
        }

        .ensemble-info.high-confidence .ensemble-details-btn:hover {
            background: #2e7d32;
            color: white;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .ensemble-info.medium-confidence .ensemble-details-btn:hover {
            background: #f57c00;
            color: white;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .ensemble-info.low-confidence .ensemble-details-btn:hover {
            background: #c62828;
            color: white;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .ensemble-details-btn:active {
            transform: scale(0.98);
        }

        .analysis-section {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            gap: 12px;
            margin: 16px 0;
            min-height: 0; /* Allow flexible height */
            align-items: start; /* Align items to top */
        }
        
        /* Mobile approach - maintain side-by-side but with smaller gap and padding */
        @media (max-width: 768px) {
            .analysis-section {
                display: grid !important;
                grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
                gap: 6px !important;
                margin: 12px 0 !important;
                min-height: 0 !important;
                width: 100% !important;
                max-width: 100% !important;
                overflow: hidden !important;
            }
        }

        .player-analysis {
            padding: 2px;
            background: rgba(0, 0, 0, 0.02);
            border-radius: 3px;
            border-left: 1px solid var(--primary-color);
            min-height: 0; /* Allow flexible height */
            overflow: visible; /* Allow content to be fully visible */
            word-wrap: break-word; /* Break long words */
            display: flex;
            flex-direction: column;
            font-size: 0.75rem;
        }
        
        /* Mobile-specific player-analysis styles - optimized for side-by-side */
        @media (max-width: 768px) {
            .player-analysis {
                padding: 2px !important;
                min-height: 0 !important;
                font-size: 0.7rem !important;
                display: flex !important;
                flex-direction: column !important;
                box-sizing: border-box !important;
                width: 100% !important;
                max-width: 100% !important;
                overflow: hidden !important;
            }
        }

        .analysis-title {
            font-weight: 500;
            margin-bottom: 16px;
            color: var(--text-primary);
            font-size: 1rem;
        }

        .analysis-section-header {
            font-weight: 600;
            font-size: 0.85rem;
            color: var(--primary-color);
            margin: 12px 0 6px 0;
            padding: 6px 0;
            border-bottom: 2px solid var(--primary-color);
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 6px;
        }

        .analysis-section-header:first-child {
            margin-top: 0;
        }

        /* Ensure all section headers are properly aligned */
        .analysis-section-header {
            text-align: left !important;
            justify-content: flex-start !important;
        }

        .analysis-item {
            display: flex;
            justify-content: space-between;
            margin: 6px 0;
            font-size: 0.85rem;
            min-height: 0; /* Allow items to shrink */
            word-wrap: break-word; /* Break long words */
        }
        
        .distribution-graphics {
            margin: 16px 0 40px 0;
            padding: 12px 8px 18px 8px;
            background-color: rgba(255, 255, 255, 0.06);
            border-radius: 8px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: background-color 0.2s ease, border-color 0.2s ease;
        }
        
        .distribution-graphics:hover {
            background-color: rgba(255, 255, 255, 0.09);
            border-color: rgba(255, 255, 255, 0.15);
        }
        
        /* Mobile-optimized analysis items for side-by-side layout */
        @media (max-width: 768px) {
            .analysis-item {
                margin: 4px 0 !important;
                font-size: 0.8rem !important;
                line-height: 1.2 !important;
            }
            
            .distribution-graphics {
                margin: 12px 0 32px 0 !important;
                padding: 10px 6px 14px 6px !important;
            }
            
            /* Mobile layout for stats-filters container */
            .stats-filters-container {
                flex-direction: column !important;
                gap: 8px !important;
            }
            
            /* Allow stat-cards to wrap on mobile - 3 per row */
            .stats-row {
                display: flex !important;
                flex-wrap: wrap !important;
                gap: 6px !important;
                width: 100% !important;
                max-width: 100% !important;
                justify-content: flex-start !important;
                margin-bottom: 8px !important;
            }
            
            .stat-card {
                width: calc(33.33% - 4px) !important;
                min-width: calc(33.33% - 4px) !important;
                max-width: calc(33.33% - 4px) !important;
                flex: 0 0 calc(33.33% - 4px) !important;
                padding: 6px 4px !important;
                font-size: 0.7rem !important;
                box-sizing: border-box !important;
            }
            
            .stat-number {
                font-size: 1.4rem !important;
            }
            
            .stat-label {
                font-size: 0.7rem !important;
            }
            
            /* Keep filters horizontal on mobile */
            .main-container {
                overflow: visible !important;
            }
            
            /* H2H stats responsive layout */
            .h2h-stats {
                grid-template-columns: 1fr !important;
                gap: 8px !important;
                width: 100% !important;
            }
            
            .h2h-stat {
                padding: 10px 8px !important;
                max-width: 100% !important;
            }
            
            .h2h-stat-value {
                font-size: 1.3rem !important;
            }
            
            .h2h-stat-label {
                font-size: 0.65rem !important;
                line-height: 1.2 !important;
                letter-spacing: 0.2px !important;
                max-width: 100% !important;
                overflow-wrap: anywhere !important;
            }
            
            .filters-card {
                overflow: visible !important;
                z-index: 1000 !important;
                position: relative !important;
                margin-left: 0 !important;
                margin-bottom: 0 !important;
            }
            
            .filters-row {
                flex-direction: column !important;
                gap: 6px !important;
                width: 100% !important;
                max-width: 100% !important;
                overflow: visible !important;
            }

            .filter-row {
                flex-direction: column !important;
                gap: 4px !important;
                align-items: stretch !important;
            }

            .filter-label {
                font-size: 0.7rem !important;
                margin-bottom: 0 !important;
                margin-right: 6px !important;
                gap: 2px !important;
                padding: 0 !important;
            }
            
            .filter-group {
                min-width: 100% !important;
                max-width: 100% !important;
                flex: 1 !important;
                box-sizing: border-box !important;
                padding: 0 2px !important;
                overflow: visible !important;
                position: relative !important;
            }
            
            /* Ensure dropdowns can extend beyond all containers */
            .dropdown-content {
                position: absolute !important;
                z-index: 9999 !important;
                max-height: none !important;
                overflow-y: visible !important;
                overflow-x: visible !important;
                width: auto !important;
                min-width: fit-content !important;
                max-width: max-content !important;
            }
            
            .filter-label {
                font-size: 0.7rem !important;
                margin-bottom: 0 !important;
                margin-right: 6px !important;
                gap: 2px !important;
                padding: 0 !important;
            }
            
            .filter-label span,
            .filter-label i {
                font-size: 0.7rem !important;
            }
            
            .input-field {
                font-size: 0.7rem !important;
                margin: 0 !important;
            }
            
            .input-field input,
            .input-field select {
                font-size: 0.85rem !important;
                padding: 4px 8px !important;
                height: 28px !important;
                margin: 0 !important;
            }

            .input-field select option {
                font-size: 0.85rem !important;
                padding: 6px 8px !important;
            }
            
            .input-field label {
                font-size: 0.5rem !important;
            }
            
            /* Material Design dropdown options */
            .dropdown-content {
                max-height: none !important;
                overflow-y: visible !important;
                background-color: #ffffff !important;
                box-shadow: 0 4px 12px rgba(0,0,0,0.25) !important;
                z-index: 99999 !important;
                position: absolute !important;
                width: auto !important;
                min-width: fit-content !important;
                max-width: max-content !important;
                height: auto !important;
            }
            
            .dropdown-content li {
                font-size: 0.85rem !important;
                padding: 8px 12px !important;
                min-height: 36px !important;
                background-color: #ffffff !important;
                opacity: 1 !important;
                position: relative !important;
                z-index: 100000 !important;
            }
            
            .dropdown-content li span {
                font-size: 0.85rem !important;
                background-color: #ffffff !important;
                opacity: 1 !important;
                color: #000000 !important;
                position: relative !important;
                z-index: 100001 !important;
            }
            
            /* Select dropdown options */
            select {
                position: relative !important;
                z-index: 1000 !important;
                overflow: visible !important;
            }
            
            select option {
                font-size: 0.7rem !important;
                padding: 4px 6px !important;
                position: relative !important;
                z-index: 1001 !important;
            }
            
            /* Ensure select dropdowns can extend beyond containers */
            .input-field {
                position: relative !important;
                z-index: 10000 !important;
                overflow: visible !important;
            }
            
            .input-field select {
                position: relative !important;
                z-index: 10001 !important;
                overflow: visible !important;
                width: 100% !important;
                background-color: white !important;
            }
            
            /* Force select dropdown to appear above everything */
            select:focus {
                z-index: 99999 !important;
                position: relative !important;
            }
            
            /* Override body overflow for dropdowns */
            body {
                overflow-x: hidden !important;
                overflow-y: visible !important;
            }
            
            /* Ensure html allows dropdowns */
            html {
                overflow-x: hidden !important;
                overflow-y: visible !important;
            }
            
            /* Native select dropdown styling */
            select {
                -webkit-appearance: none !important;
                -moz-appearance: none !important;
                appearance: none !important;
                background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e") !important;
                background-repeat: no-repeat !important;
                background-position: right 8px center !important;
                background-size: 16px !important;
                padding-right: 32px !important;
            }
            
            .analysis-section-header {
                font-size: 0.8rem !important;
                margin: 12px 0 6px 0 !important;
                padding: 6px 0 !important;
            }
            
            .analysis-title {
                font-size: 0.9rem !important;
                margin-bottom: 12px !important;
            }
        }

        .analysis-label {
            color: var(--text-secondary);
            flex: 1;
            min-width: 0; /* Allow label to shrink */
            word-wrap: break-word; /* Break long words */
        }

        .analysis-value {
            font-weight: 500;
            color: var(--text-primary);
            flex: 0 0 auto; /* Don't shrink value */
            margin-left: 8px; /* Add spacing */
            text-align: right; /* Right align values */
        }

        .momentum-indicator {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 0.8rem;
            font-weight: 500;
        }

        .momentum-strong_positive { 
            background: rgba(33, 150, 243, 0.1); 
            color: #2196f3; 
            font-weight: bold;
        }
        .momentum-positive { 
            background: rgba(33, 150, 243, 0.1); 
            color: #2196f3; 
        }
        .momentum-stable { 
            background: rgba(33, 150, 243, 0.1); 
            color: #2196f3; 
        }
        .momentum-negative { 
            background: rgba(33, 150, 243, 0.1); 
            color: #2196f3; 
        }
        .momentum-strong_negative { 
            background: rgba(33, 150, 243, 0.1); 
            color: #2196f3; 
            font-weight: bold;
        }

        .surface-performance {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 0.8rem;
            font-weight: 500;
            text-transform: uppercase;
        }

        .surface-performance.surface-excellent {
            background: rgba(76, 175, 80, 0.1);
            color: var(--success-color);
        }

        .surface-performance.surface-good {
            background: rgba(33, 150, 243, 0.1);
            color: var(--primary-color);
        }

        .surface-performance.surface-average {
            background: rgba(255, 193, 7, 0.1);
            color: var(--warning-color);
        }

        .surface-performance.surface-poor {
            background: rgba(244, 67, 54, 0.1);
            color: var(--error-color);
        }

        .surface-performance.surface-unknown {
            background: rgba(158, 158, 158, 0.1);
            color: var(--text-secondary);
        }

        .intensity-level {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 0.8rem;
            font-weight: 500;
            text-transform: uppercase;
        }

        .intensity-level.intensity-high {
            background: rgba(255, 87, 34, 0.1);
            color: #ff5722;
        }

        .intensity-level.intensity-medium {
            background: rgba(255, 193, 7, 0.1);
            color: var(--warning-color);
        }

        .intensity-level.intensity-low {
            background: rgba(76, 175, 80, 0.1);
            color: var(--success-color);
        }

        .intensity-level.intensity-very-low {
            background: rgba(158, 158, 158, 0.1);
            color: var(--text-secondary);
        }

        .intensity-level.intensity-unknown {
            background: rgba(158, 158, 158, 0.1);
            color: var(--text-secondary);
        }

        /* Tier Information Styles */
        .tier-indicator {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 0.8rem;
            font-weight: 500;
            text-transform: uppercase;
        }

        .tier-indicator.tier-1 {
            background: rgba(255, 215, 0, 0.2);
            color: #ffd700;
            border: 1px solid rgba(255, 215, 0, 0.3);
        }

        .tier-indicator.tier-2 {
            background: rgba(192, 192, 192, 0.2);
            color: #c0c0c0;
            border: 1px solid rgba(192, 192, 192, 0.3);
        }

        .tier-indicator.tier-3 {
            background: rgba(205, 127, 50, 0.2);
            color: #cd7f32;
            border: 1px solid rgba(205, 127, 50, 0.3);
        }

        .tier-indicator.tier-4 {
            background: rgba(33, 150, 243, 0.2);
            color: var(--primary-color);
            border: 1px solid rgba(33, 150, 243, 0.3);
        }

        .tier-indicator.tier-5 {
            background: rgba(76, 175, 80, 0.2);
            color: var(--success-color);
            border: 1px solid rgba(76, 175, 80, 0.3);
        }

        .tier-indicator.tier-6 {
            background: rgba(158, 158, 158, 0.2);
            color: var(--text-secondary);
            border: 1px solid rgba(158, 158, 158, 0.3);
        }

        .tier-indicator.tier-7 {
            background: rgba(255, 193, 7, 0.2);
            color: var(--warning-color);
            border: 1px solid rgba(255, 193, 7, 0.3);
        }

        .tier-indicator.tier-8 {
            background: rgba(244, 67, 54, 0.2);
            color: var(--error-color);
            border: 1px solid rgba(244, 67, 54, 0.3);
        }

        /* Tournament Performance Styles */
        .efficiency-rating {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 0.8rem;
            font-weight: 500;
            text-transform: uppercase;
        }

        .efficiency-rating.efficiency-very-efficient {
            background: rgba(76, 175, 80, 0.2);
            color: var(--success-color);
            border: 1px solid rgba(76, 175, 80, 0.3);
        }

        .efficiency-rating.efficiency-efficient {
            background: rgba(33, 150, 243, 0.2);
            color: var(--primary-color);
            border: 1px solid rgba(33, 150, 243, 0.3);
        }

        .efficiency-rating.efficiency-standard {
            background: rgba(255, 193, 7, 0.2);
            color: var(--warning-color);
            border: 1px solid rgba(255, 193, 7, 0.3);
        }

        .efficiency-rating.efficiency-no-data {
            background: rgba(158, 158, 158, 0.2);
            color: var(--text-secondary);
            border: 1px solid rgba(158, 158, 158, 0.3);
        }

        .tournament-bonus {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 0.8rem;
            font-weight: 500;
        }

        .tournament-bonus.bonus-active {
            background: rgba(76, 175, 80, 0.2);
            color: var(--success-color);
            border: 1px solid rgba(76, 175, 80, 0.3);
        }

        .tournament-bonus.bonus-inactive {
            background: rgba(158, 158, 158, 0.1);
            color: var(--text-secondary);
        }

        .risk-section {
            margin: 6px 0 0 0;
            padding: 6px;
            border-radius: 3px;
            font-size: 0.75rem;
        }

        .risk-low { 
            background: rgba(76, 175, 80, 0.1); 
            color: var(--success-color); 
            border-left: 3px solid var(--success-color);
        }
        .risk-medium { 
            background: rgba(255, 152, 0, 0.1); 
            color: var(--warning-color); 
            border-left: 3px solid var(--warning-color);
        }
        .risk-toss-up { 
            background: rgba(244, 67, 54, 0.1); 
            color: var(--error-color); 
            border-left: 3px solid var(--error-color);
        }
        .risk-high { 
            background: rgba(244, 67, 54, 0.1); 
            color: var(--error-color); 
            border-left: 3px solid var(--error-color);
        }

        .recommendation-section {
            margin: 6px 0;
            padding: 6px 10px;
            border-radius: 4px;
            text-align: center;
            font-weight: 500;
            font-size: 0.8rem;
        }

        .recommendation-bet { 
            background: rgba(76, 175, 80, 0.1); 
            color: var(--success-color);
            border: 1px solid var(--success-color);
        }
        .recommendation-caution { 
            background: rgba(255, 152, 0, 0.1); 
            color: var(--warning-color);
            border: 1px solid var(--warning-color);
        }
        .recommendation-toss-up { 
            background: rgba(244, 67, 54, 0.1); 
            color: var(--error-color);
            border: 1px solid var(--error-color);
        }
        .recommendation-avoid { 
            background: rgba(244, 67, 54, 0.1); 
            color: var(--error-color);
            border: 1px solid var(--error-color);
        }

        .h2h-section {
            margin: 16px 0;
            padding: 14px;
            background: rgba(0, 188, 212, 0.05);
            border-radius: 8px;
            border-left: 3px solid var(--accent-color);
        }

        .h2h-title {
            font-weight: 500;
            margin-bottom: 16px;
            color: var(--text-primary);
            font-size: 1rem;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .h2h-stats {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 12px;
            margin-bottom: 16px;
            width: 100%;
            box-sizing: border-box;
        }

        .h2h-stat {
            text-align: center;
            padding: 10px 8px;
            background: rgba(255, 255, 255, 0.5);
            border-radius: 6px;
            min-width: 0; /* Prevent grid blowout */
            max-width: 100%; /* Ensure container constraint */
            overflow: hidden; /* Prevent content overflow */
            box-sizing: border-box;
        }

        .h2h-stat-value {
            font-size: 1.5rem;
            font-weight: 500;
            color: var(--primary-color);
            margin-bottom: 4px;
            word-break: break-word; /* Prevent overflow */
        }

        .h2h-stat-label {
            font-size: 0.75rem;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.3px;
            word-break: break-word; /* Prevent long player names from overflowing */
            overflow-wrap: anywhere; /* More aggressive wrapping */
            hyphens: auto;
            line-height: 1.2;
            max-width: 100%;
            white-space: normal; /* Allow wrapping */
        }

        .h2h-matches {
            margin-top: 16px;
        }

        .h2h-match {
            padding: 12px;
            background: rgba(255, 255, 255, 0.08);
            border-radius: 8px;
            margin-bottom: 8px;
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-left: 3px solid var(--primary-color);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
            transition: all 0.2s ease;
        }
        
        .h2h-match:hover {
            background: rgba(255, 255, 255, 0.12);
            border-color: rgba(255, 255, 255, 0.25);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
            transform: translateY(-1px);
        }

        .h2h-match:last-child {
            margin-bottom: 0;
        }

        .h2h-match-date {
            font-size: 0.8rem;
            color: var(--text-secondary);
        }

        .h2h-match-result {
            font-weight: 500;
            color: var(--text-primary);
        }

        .h2h-match-winner {
            color: var(--success-color);
        }

        .h2h-match-loser {
            color: var(--error-color);
        }

        .h2h-match-surface {
            margin-top: 6px;
            padding-top: 6px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            display: flex;
            align-items: center;
        }

        .h2h-no-data {
            text-align: center;
            color: var(--text-secondary);
            font-style: italic;
            padding: 20px;
        }

        /* Underdog section styles */
        .underdog-section {
            margin: 16px 0;
            padding: 14px;
            background: rgba(76, 175, 80, 0.05);
            border-radius: 8px;
            border-left: 3px solid #4CAF50;
        }

        .underdog-title {
            font-weight: 500;
            margin-bottom: 16px;
            color: var(--text-primary);
            font-size: 1rem;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .underdog-content {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .underdog-player {
            background: rgba(255, 255, 255, 0.3);
            border-radius: 6px;
            padding: 16px;
        }

        .underdog-player-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
        }

        .underdog-player-name {
            font-weight: 500;
            color: var(--text-primary);
            font-size: 1rem;
        }

        .underdog-badges {
            display: flex;
            gap: 6px;
        }

        .underdog-badge {
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 0.7rem;
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .underdog-badge.proven {
            background: #FF5722;
            color: white;
        }

        .underdog-badge.potential {
            background: #FF9800;
            color: white;
        }

        .underdog-stats {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 12px;
            margin-bottom: 12px;
        }

        .underdog-stat {
            text-align: center;
            padding: 8px;
            background: rgba(255, 255, 255, 0.4);
            border-radius: 4px;
        }

        .underdog-stat-value {
            font-size: 1.2rem;
            font-weight: 500;
            color: #4CAF50;
            margin-bottom: 2px;
        }

        .underdog-stat-label {
            font-size: 0.7rem;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .underdog-advantages {
            margin-top: 8px;
        }

        .underdog-advantage {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 6px 8px;
            margin-bottom: 4px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 4px;
            font-size: 0.85rem;
        }

        .advantage-name {
            color: var(--text-primary);
        }

        .advantage-multiplier {
            color: #4CAF50;
            font-weight: 500;
        }

        .underdog-no-data {
            text-align: center;
            color: var(--text-secondary);
            font-style: italic;
            padding: 20px;
        }

        .no-data {
            text-align: center;
            padding: 60px 20px;
            color: var(--text-secondary);
            font-size: 1.2rem;
        }

        .loading {
            text-align: center;
            padding: 40px;
            color: var(--text-secondary);
        }

        /* Material Design form elements */
        .input-field {
            margin-bottom: 0;
        }

        .input-field input, .input-field select {
            height: 12px;
            font-size: 0.4rem;
            padding: 0px 1px;
            border-bottom: 1px solid var(--divider-color);
            color: var(--text-primary);
            line-height: 1;
        }

        .input-field select {
            padding: 0px 0px;
        }

        .input-field select option {
            font-size: 0.4rem;
            padding: 0px 1px;
            line-height: 1;
        }

        /* Material Design dropdown trigger */
        .select-dropdown {
            height: 18px !important;
            font-size: 0.75rem !important;
            padding: 2px 4px !important;
            line-height: 1.2 !important;
            margin: 0 !important;
            vertical-align: middle !important;
            display: inline-block !important;
        }

        /* Search input - readable size */
        #searchInput {
            height: 18px !important;
            font-size: 0.75rem !important;
            padding: 2px 4px !important;
            line-height: 1.2 !important;
            margin: 0 !important;
            vertical-align: middle !important;
        }
        
        /* Dropdown content options */
        .dropdown-content {
            max-height: none !important;
            overflow-y: visible !important;
            background-color: #ffffff !important;
            box-shadow: 0 4px 12px rgba(0,0,0,0.25) !important;
            z-index: 99999 !important;
            position: absolute !important;
            width: auto !important;
            min-width: fit-content !important;
            max-width: max-content !important;
            height: auto !important;
        }
        
        .dropdown-content li {
            font-size: 0.85rem !important;
            min-height: 36px !important;
            line-height: 1.3 !important;
            padding: 8px 12px !important;
            background-color: #ffffff !important;
            opacity: 1 !important;
            position: relative !important;
            z-index: 100000 !important;
        }
        
        .dropdown-content li span {
            font-size: 0.85rem !important;
            background-color: #ffffff !important;
            opacity: 1 !important;
            color: #000000 !important;
            position: relative !important;
            z-index: 100001 !important;
        }
        
        .dropdown-content li:hover {
            background-color: #f5f5f5 !important;
        }

        .input-field input:focus, .input-field select:focus {
            border-bottom: 2px solid var(--primary-color);
            box-shadow: 0 1px 0 0 var(--primary-color);
        }

        .input-field label {
            color: var(--text-secondary);
        }

        .input-field label.active {
            color: var(--primary-color);
        }

        /* Mobile input styles - even smaller */
        @media (max-width: 768px) {
            .input-field input, .input-field select {
                height: 10px;
                font-size: 0.3rem;
                padding: 0px 0px;
                line-height: 1;
            }

            .input-field select {
                padding: 0px 0px;
            }

            .input-field select option {
                font-size: 0.3rem;
                padding: 0px 0px;
                line-height: 1;
            }

            .select-dropdown {
                height: 20px !important;
                font-size: 0.7rem !important;
                padding: 2px 4px !important;
                line-height: 1.2 !important;
            }

            .dropdown-content {
                background-color: #ffffff !important;
                box-shadow: 0 4px 12px rgba(0,0,0,0.25) !important;
                z-index: 99999 !important;
                position: absolute !important;
                width: auto !important;
                min-width: fit-content !important;
                max-width: max-content !important;
                height: auto !important;
            }

            .dropdown-content li {
                font-size: 0.85rem !important;
                min-height: 36px !important;
                line-height: 1.3 !important;
                padding: 8px 12px !important;
                background-color: #ffffff !important;
                opacity: 1 !important;
                position: relative !important;
                z-index: 100000 !important;
            }
            
            .dropdown-content li span {
                font-size: 0.85rem !important;
                background-color: #ffffff !important;
                opacity: 1 !important;
                color: #000000 !important;
                position: relative !important;
                z-index: 100001 !important;
            }
            
            .dropdown-content li:hover {
                background-color: #f5f5f5 !important;
            }

            #searchInput {
                height: 20px !important;
                font-size: 0.7rem !important;
                padding: 2px 4px !important;
                line-height: 1.2 !important;
            }
        }

        /* Responsive design */
        @media (max-width: 768px) {
            .main-container {
                padding: 16px;
            }
            
            .header-title {
                font-size: 2rem;
            }
            
            .header-card {
                padding: 32px;
            }
            
            .last-updated {
                position: static;
                margin-top: 16px;
                max-width: none;
                text-align: left;
                font-size: 0.9rem;
            }
            
            /* .stats-row {
                flex-direction: column;
            } */
            
            /* .filters-row {
                flex-direction: column;
                gap: 16px;
            } */
            
            .predictions-grid {
                grid-template-columns: 1fr;
                gap: 16px;
            }
            
            .odds-section {
                grid-template-columns: 1fr 1fr;
                gap: 8px;
            }
            
            .analysis-section {
                display: block !important;
                grid-template-columns: none !important;
                gap: 0 !important;
            }
            
            .player-analysis {
                padding: 16px;
                width: 100% !important;
                display: block !important;
                margin-bottom: 16px !important;
                box-sizing: border-box !important;
            }
            
            .player-analysis:last-child {
                margin-bottom: 0 !important;
            }
            
            .analysis-item {
                flex-direction: column;
                align-items: flex-start;
            }
            
            .analysis-value {
                margin-left: 0;
                margin-top: 4px;
                text-align: left;
            }
        }
        
        /* Additional mobile breakpoint for very small screens */
        @media (max-width: 480px) {
            .main-container {
                padding: 12px;
            }
            
            .header-card {
                padding: 20px;
            }
            
            .header-title {
                font-size: 1.8rem;
            }
            
            .predictions-grid {
                grid-template-columns: 1fr;
                gap: 12px;
            }
            
            .analysis-section {
                display: block !important;
                grid-template-columns: none !important;
                gap: 0 !important;
                width: 100% !important;
                max-width: 100% !important;
                overflow: hidden !important;
            }
            
            .player-analysis {
                padding: 12px;
                width: 100% !important;
                max-width: 100% !important;
                display: block !important;
                margin-bottom: 12px !important;
                box-sizing: border-box !important;
                overflow: hidden !important;
                word-wrap: break-word !important;
            }
            
            .player-analysis:last-child {
                margin-bottom: 0 !important;
            }
            
            .prediction-content {
                padding: 16px;
            }
            
            .prediction-card {
                overflow: hidden !important;
                width: 100% !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
            }
            
            .player-odds {
                display: flex !important;
                flex-direction: column !important;
                text-align: center !important;
                padding: 8px !important;
                margin: 0 !important;
                min-height: auto !important;
            }
            
            .player-name {
                display: block !important;
                font-size: 1.0rem !important;
                margin: 4px 0 !important;
                padding: 4px 0 !important;
                line-height: 1.3 !important;
            }
            
            .odds-display {
                display: block !important;
                margin: 4px 0 !important;
                padding: 4px 0 !important;
            }
            
            .probability {
                display: block !important;
                font-size: 1.1rem !important;
                margin: 4px 0 !important;
                padding: 4px 0 !important;
                line-height: 1.2 !important;
            }
            
            .decimal-odds {
                display: block !important;
                font-size: 0.9rem !important;
                margin: 4px 0 !important;
                padding: 4px 0 !important;
                line-height: 1.2 !important;
            }
            
            .value-indicator {
                display: block !important;
                margin: 4px 0 !important;
                font-size: 0.7rem !important;
                padding: 2px 4px !important;
            }
        }
        
        /* Force width constraints for all mobile devices */
        @media (max-width: 390px) {
            html, body {
                width: 100% !important;
                max-width: 100% !important;
                overflow-x: hidden !important;
            }
            
            .prediction-card {
                width: 390px !important;
                max-width: 390px !important;
                box-sizing: border-box !important;
            }
            
            .prediction-content {
                width: 100% !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
            }
        }
        
        /* iPhone and mobile device specific fixes */
        @media screen and (max-width: 390px) {
            * {
                max-width: 100% !important;
                box-sizing: border-box !important;
            }
            
            /* Exception: header needs full width */
            .header-card {
                width: 100vw !important;
                max-width: 100vw !important;
                left: 50% !important;
                right: 50% !important;
                margin-left: -50vw !important;
                margin-right: -50vw !important;
            }
            
            body {
                overflow-x: hidden !important;
                width: 100% !important;
                max-width: 100% !important;
            }
            
            .main-container {
                padding: 12px !important;
                width: 100% !important;
                max-width: 100% !important;
                overflow-x: hidden !important;
            }
            
            .predictions-grid {
                width: 100% !important;
                max-width: 100% !important;
                overflow-x: hidden !important;
                display: block !important;
            }
            
            .analysis-section {
                display: block !important;
                grid-template-columns: none !important;
                grid-template-rows: none !important;
                gap: 0 !important;
                margin: 8px 0 !important;
                width: 100% !important;
                max-width: 100% !important;
                overflow: hidden !important;
            }
            
            .player-analysis {
                display: block !important;
                width: 100% !important;
                max-width: 100% !important;
                float: none !important;
                clear: both !important;
                margin-bottom: 16px !important;
                padding: 12px !important;
                box-sizing: border-box !important;
                overflow: hidden !important;
                word-wrap: break-word !important;
            }
            
            .prediction-card {
                overflow: hidden !important;
                margin: 8px 0 !important;
                width: 100% !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
            }
            
            .prediction-content {
                overflow: visible !important;
                padding: 12px !important;
                width: 100% !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
                min-width: 0 !important;
                flex-shrink: 1 !important;
            }
            
            .header-card {
                padding: 20px !important;
                margin-bottom: 16px !important;
            }
            
            /* Fix player odds overlap on iPhone */
            .player-odds {
                display: flex !important;
                flex-direction: column !important;
                text-align: center !important;
                padding: 8px !important;
                margin: 0 !important;
                min-height: auto !important;
            }
            
            .player-name {
                display: block !important;
                margin-bottom: 8px !important;
                font-size: 0.9rem !important;
                line-height: 1.2 !important;
            }
            
            .odds-display {
                display: block !important;
                margin: 4px 0 !important;
            }
            
            .probability {
                display: block !important;
                font-size: 1.1rem !important;
                margin: 4px 0 !important;
                line-height: 1.2 !important;
            }
            
            .decimal-odds {
                display: block !important;
                font-size: 0.8rem !important;
                margin: 4px 0 !important;
                line-height: 1.2 !important;
            }
            
            .value-indicator {
                display: block !important;
                margin: 4px 0 !important;
                font-size: 0.7rem !important;
                padding: 2px 4px !important;
            }
            
            .analysis-item {
                width: 100% !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
                overflow: hidden !important;
                word-wrap: break-word !important;
            }
            
            .analysis-section-header {
                width: 100% !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
                overflow: hidden !important;
                word-wrap: break-word !important;
            }
        }
        
        /* Force block layout for all mobile devices */
        @media (max-width: 768px) {
            .analysis-section * {
                max-width: 100% !important;
            }
        }
        
        /* iPhone-specific optimizations for side-by-side layout */
        @media only screen and (max-width: 768px) {
            .analysis-section {
                display: grid !important;
                grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
                gap: 6px !important;
                margin: 12px 0 !important;
                min-height: 0 !important;
            }
            
            .player-analysis {
                padding: 1px !important;
                min-height: 0 !important;
                font-size: 0.65rem !important;
                display: flex !important;
                flex-direction: column !important;
                box-sizing: border-box !important;
            }
        }
        
        /* Additional iPhone Safari specific fixes - maintain side-by-side */
        @media only screen and (max-device-width: 390px) {
            .analysis-section {
                -webkit-display: grid !important;
                display: grid !important;
                -webkit-grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
                grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
                gap: 4px !important;
            }
            
            .player-analysis {
                -webkit-display: flex !important;
                display: flex !important;
                -webkit-flex-direction: column !important;
                flex-direction: column !important;
                padding: 1px !important;
                font-size: 0.6rem !important;
            }
        }
        
        /* Nuclear option - force side-by-side layout on all mobile devices */
        @media (max-width: 768px) {
            .prediction-card .analysis-section {
                display: grid !important;
                grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
                gap: 6px !important;
                margin: 12px 0 !important;
                min-height: 0 !important;
            }
            
            .prediction-card .analysis-section .player-analysis {
                display: flex !important;
                flex-direction: column !important;
                width: 100% !important;
                max-width: 100% !important;
                padding: 1px !important;
                box-sizing: border-box !important;
                position: relative !important;
                left: auto !important;
                right: auto !important;
                top: auto !important;
                bottom: auto !important;
                visibility: visible !important;
                opacity: 1 !important;
                min-height: 0 !important;
                font-size: 0.65rem !important;
            }
        }
        
        /* ===== MOBILE TOUCH INTERACTIONS CSS ===== */
        
        /* Touch feedback */
        .touchable {
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
            touch-action: manipulation;
        }
        
        
        
        /* Swipe indicators */
        .swipe-indicator {
            position: fixed;
            top: 50%;
            transform: translateY(-50%);
            opacity: 0;
            transition: opacity 0.3s ease;
            z-index: 1000;
            pointer-events: none;
        }
        
        .swipe-indicator.left {
            left: 20px;
        }
        
        .swipe-indicator.right {
            right: 20px;
        }
        
        .swipe-indicator.visible {
            opacity: 1;
        }
        
        .swipe-indicator i {
            font-size: 3rem;
            color: var(--primary-color);
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        }
        
        /* Pull-to-refresh styles removed - feature disabled for performance */
        
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        
        
        /* Toast notifications */
        .toast {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%) translateY(100px);
            background: var(--surface-color);
            color: var(--text-primary);
            padding: 4px 8px !important;
            border-radius: 3px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
            display: flex;
            align-items: center;
            gap: 3px;
            z-index: 1000;
            transition: transform 0.3s ease;
            max-width: 60%;
            font-size: 0.75rem;
            line-height: 1.2;
            min-height: auto !important;
            height: auto !important;
            max-height: 30px !important;
        }
        
        .toast.show {
            transform: translateX(-50%) translateY(0);
        }
        
        .toast-success {
            border-left: 4px solid var(--success-color);
        }
        
        .toast-error {
            border-left: 4px solid var(--error-color);
        }
        
        .toast-info {
            border-left: 4px solid var(--primary-color);
        }
        
        .toast i {
            font-size: 0.8rem;
        }
        
        .toast-success i {
            color: var(--success-color);
        }
        
        .toast-error i {
            color: var(--error-color);
        }
        
        .toast-info i {
            color: var(--primary-color);
        }
        
        /* Nuclear option - force minimal toast height */
        .toast,
        .toast-success,
        .toast-error,
        .toast-info {
            height: auto !important;
            min-height: auto !important;
            max-height: 30px !important;
            padding: 4px 8px !important;
            line-height: 1.2 !important;
        }
        
        /* Fix for expanded analysis sections - ensure proper height */
        .analysis-section:not(.collapsed) {
            max-height: none !important;
            height: auto !important;
            overflow: visible !important;
        }
        
        .analysis-section:not(.collapsed) .player-analysis {
            max-height: none !important;
            height: auto !important;
            overflow: visible !important;
        }
        
        /* Mobile-specific touch improvements */
        @media (max-width: 768px) {
            .prediction-card {
                touch-action: pan-y;
                -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
                overflow: hidden !important;
                width: 100% !important;
                max-width: 100% !important;
                box-sizing: border-box !important;
            }
            
            .player-odds {
                display: flex !important;
                flex-direction: column !important;
                text-align: center !important;
                padding: 8px !important;
                margin: 0 !important;
                min-height: auto !important;
            }
            
            .player-name {
                display: block !important;
                font-size: 1.1rem !important;
                margin: 4px 0 !important;
                padding: 4px 0 !important;
                line-height: 1.3 !important;
            }
            
            .odds-display {
                display: block !important;
                margin: 4px 0 !important;
                padding: 4px 0 !important;
            }
            
            .probability {
                display: block !important;
                font-size: 1.2rem !important;
                margin: 4px 0 !important;
                padding: 4px 0 !important;
                line-height: 1.2 !important;
            }
            
            .decimal-odds {
                display: block !important;
                font-size: 1.0rem !important;
                margin: 4px 0 !important;
                padding: 4px 0 !important;
                line-height: 1.2 !important;
            }
            
            .value-indicator {
                display: block !important;
                margin: 4px 0 !important;
                font-size: 0.8rem !important;
                padding: 2px 4px !important;
            }
            
            
            
            .swipe-indicator {
                font-size: 2rem;
            }
            
            .swipe-indicator.left {
                left: 10px;
            }
            
            .swipe-indicator.right {
                right: 10px;
            }
            
            
            .toast {
                bottom: 10px;
                left: 50%;
                transform: translateX(-50%) translateY(100px);
                max-width: 60%;
                padding: 4px 8px !important;
                font-size: 0.75rem;
                gap: 3px;
                line-height: 1.2;
                min-height: auto !important;
                height: auto !important;
                max-height: 30px !important;
            }
            
            .toast.show {
                transform: translateX(-50%) translateY(0);
            }
        }
        
        /* Touch gesture hints */
        .touch-hint {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 0.8rem;
            z-index: 999;
            animation: fadeInOut 3s ease-in-out;
        }
        
        @keyframes fadeInOut {
            0%, 100% { opacity: 0; }
            20%, 80% { opacity: 1; }
        }
        
        /* Improved touch targets */
        @media (max-width: 768px) {
            .match-detail,
            .player-odds,
            .analysis-item {
                min-height: 44px;
                display: flex;
                align-items: center;
            }
            
            .material-icons {
                min-width: 24px;
                min-height: 24px;
            }
        }
        
        /* Mobile layout optimization - prevents forced reflows */
        .mobile-layout {
            display: grid !important;
            grid-template-columns: 1fr 1fr !important;
            gap: 6px !important;
            min-height: 380px !important;
        }
        
        .mobile-layout .player-analysis {
            display: flex !important;
            flex-direction: column !important;
            width: 100% !important;
            padding: 10px !important;
            min-height: 360px !important;
            font-size: 0.8rem !important;
            box-sizing: border-box !important;
        }
        
        /* Screen reader only - accessibility */
        .sr-only {
            position: absolute !important;
            width: 1px !important;
            height: 1px !important;
            padding: 0 !important;
            margin: -1px !important;
            overflow: hidden !important;
            clip: rect(0, 0, 0, 0) !important;
            white-space: nowrap !important;
            border: 0 !important;
        }

        /* Skeleton Loader */
        .skeleton-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 24px;
            padding: 16px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .skeleton-card {
            position: relative;
            display: flex;
            flex-direction: column;
            gap: 20px;
            padding: 20px;
            border-radius: 16px;
            background: var(--card-background);
            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
            overflow: hidden;
        }

        .skeleton-card::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%);
            transform: translateX(-100%);
            animation: skeleton-shimmer 1.5s infinite;
        }

        @keyframes skeleton-shimmer {
            100% {
                transform: translateX(100%);
            }
        }

        .skeleton-section {
            display: flex;
            gap: 16px;
            align-items: center;
        }

        .skeleton-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: rgba(148, 163, 184, 0.2);
        }

        .skeleton-lines {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .skeleton-line {
            height: 12px;
            border-radius: 8px;
            background: rgba(148, 163, 184, 0.2);
        }

        .skeleton-line.short {
            width: 60%;
        }

        .skeleton-line.medium {
            width: 80%;
        }

        .skeleton-line.tiny {
            width: 40%;
        }

        .skeleton-pills {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 8px;
        }

        .skeleton-pill {
            width: 90px;
            height: 28px;
            border-radius: 999px;
            background: rgba(148, 163, 184, 0.2);
        }

        @media (max-width: 768px) {
            .skeleton-grid {
                grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
                gap: 16px;
                padding: 12px;
            }
            
            .skeleton-card {
                padding: 16px;
            }
        }

        .stat-card:hover {
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        }

        .stats-skeleton-grid {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
            margin-bottom: 0;
        }

        .stats-skeleton-card {
            position: relative;
            flex: 1;
            min-width: 120px;
            height: 70px;
            background: var(--surface-color);
            border-radius: 6px;
            padding: 10px;
            overflow: hidden;
        }

        .stats-skeleton-card::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.25) 50%, transparent 100%);
            transform: translateX(-100%);
            animation: stats-skeleton-shimmer 1.4s infinite;
        }

        @keyframes stats-skeleton-shimmer {
            100% {
                transform: translateX(100%);
            }
        }

        .stats-skeleton-value,
        .stats-skeleton-label {
            position: relative;
            z-index: 1;
            border-radius: 999px;
            background: rgba(148, 163, 184, 0.18);
        }

        .stats-skeleton-value {
            height: 22px;
            width: 60%;
            margin-bottom: 10px;
        }

        .stats-skeleton-label {
            height: 14px;
            width: 80%;
        }

        /* ================================
           Palette Refresh Overrides
           ================================ */
        body {
            background-color: var(--background-color);
            color: var(--text-primary);
        }

        .main-container {
            background: transparent;
        }

        .header-card {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
            color: white;
            border: none;
            box-shadow: 0 12px 24px rgba(25, 118, 210, 0.35);
        }

        .header-title {
            color: white;
        }

        .header-subtitle,
        .header-description,
        .last-updated {
            color: rgba(255, 255, 255, 0.82);
        }

        .header-description {
            border-top: 1px solid rgba(255, 255, 255, 0.18);
        }

        .header-card .material-icons {
            color: rgba(255, 255, 255, 0.9);
        }

        .stats-row,
        .filters-row {
            background: transparent;
        }

        .stat-card,
        .filters-card,
        .prediction-card {
            background: var(--surface-color);
            border: 1px solid var(--border-subtle);
            box-shadow: 0 12px 24px rgba(31, 41, 51, 0.06);
        }

        .stat-number {
            color: var(--text-primary);
            font-weight: 400;
        }

        .tournament-header {
            background: var(--surface-muted);
            color: var(--text-primary);
            border: 1px solid var(--border-subtle);
            padding-left: 52px;
            box-shadow: 0 16px 32px rgba(31, 41, 51, 0.06);
        }

        .tournament-header::before {
            content: "";
            position: absolute;
            top: 16px;
            bottom: 16px;
            left: 24px;
            width: 8px;
            border-radius: 999px;
            background: linear-gradient(180deg, var(--primary-light) 0%, var(--primary-dark) 100%);
            pointer-events: none;
        }

        .tournament-title .material-icons {
            color: var(--primary-color);
        }

        .match-count {
            background: rgba(31, 102, 195, 0.12);
            color: var(--primary-dark);
        }

        .match-header {
            background: linear-gradient(135deg, rgba(25, 118, 210, 0.05) 0%, rgba(0, 188, 212, 0.05) 100%);
            color: var(--text-primary);
            border-bottom: 1px solid rgba(25, 118, 210, 0.12);
            border-left: 4px solid rgba(25, 118, 210, 0.15);
        }

        .match-title {
            color: var(--text-primary);
        }

        .match-detail,
        .match-detail .material-icons {
            color: var(--text-secondary);
        }

        .betting-badge.strong-bet {
            background-color: var(--success-color) !important;
        }

        .betting-badge.good-bet {
            background-color: var(--primary-light) !important;
        }

        .betting-badge.cautious-bet {
            background-color: var(--warning-color) !important;
        }

        .betting-badge.avoid-bet {
            background-color: var(--error-color) !important;
        }

        #ensembleModal .modal-content h4,
        #ensembleModal .modal-content h5,
        #ensembleModal .modal-content .material-icons {
            color: var(--primary-dark) !important;
        }

        #ensembleModal .modal-content .ensemble-result {
            background: var(--surface-muted) !important;
            color: var(--text-primary) !important;
            border: 1px solid var(--border-subtle) !important;
        }

        #ensembleModal .modal-content .ensemble-result h5 {
            color: var(--primary-dark) !important;
        }

        #ensembleModal .modal-content .model-result {
            border-color: var(--divider-color) !important;
        }

        .player-analysis {
            background: var(--surface-color);
            border: 1px solid var(--border-subtle);
        }

        .analysis-section .section-title {
            color: var(--text-secondary);
        }

        .analysis-label {
            color: var(--text-secondary);
        }

        .analysis-value {
            color: var(--text-primary);
        }

        .odds-section {
            background: transparent;
        }

        .player-odds strong {
            color: var(--text-primary);
        }

        .value-indicator {
            background: rgba(31, 102, 195, 0.12);
            color: var(--primary-dark);
        }

        .underdog-advantages {
            background: var(--surface-muted);
        }

        .badge.primary {
            background: rgba(31, 102, 195, 0.12);
            color: var(--primary-dark);
        }

        .timeline-entry::before {
            background: var(--primary-color);
        }

        .timeline-entry::after {
            border-left: 2px solid var(--primary-color);
        }

        .toast {
            background: rgba(31, 41, 51, 0.92);
        }