@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');

:root {
    /* LIGHT MODE (Google Style) */
    --bg-color: #f1f3f4;
    --card-bg: #ffffff;
    --text-primary: #202124;
    --text-secondary: #5f6368;
    --accent-blue: #1a73e8;
    --shadow: 0 1px 6px rgba(32,33,36,0.28);
    --border: 1px solid rgba(0,0,0,0.05);
}

body.dark-mode {
    /* DARK MODE (OLED Friendly) */
    --bg-color: #202124;
    --card-bg: #303134;
    --text-primary: #e8eaed;
    --text-secondary: #9aa0a6;
    --shadow: 0 1px 6px rgba(0,0,0,0.5);
    --border: 1px solid rgba(255,255,255,0.1);
}

body {
    font-family: 'Roboto', Arial, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-primary);
    margin: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.container {
    max-width: 650px;
    width: 100%;
}

/* --- HEADER & BRANDING --- */
.app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 650px;
    margin-bottom: 20px;
}

.logo-text { font-size: 24px; font-weight: 700; margin: 0; }
.match-count { font-size: 12px; color: var(--text-secondary); margin-left: 10px; }

/* --- FILTER SCROLL BAR (New Feature) --- */

/* Update this block */
.filter-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    
    /* ADDED THIS: Prevents the last button from being cut off */
    padding-right: 20px; 
    
    padding-bottom: 5px;
    margin-bottom: 15px;
    max-width: 650px;
    width: 100%;
    scrollbar-width: none;
}
.filter-scroll::-webkit-scrollbar { display: none; }

.filter-btn {
    background: var(--card-bg);
    border: 1px solid var(--text-secondary);
    color: var(--text-primary);
    padding: 6px 16px;
    border-radius: 20px; /* Pill Shape */
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    opacity: 0.8;
}

.filter-btn.active {
    background: var(--accent-blue);
    color: white;
    border-color: var(--accent-blue);
    opacity: 1;
}

/* --- MATCH CARD (Restored to Solid + Inverted Radius) --- */
.match-card {
    background: var(--card-bg);
    /* Inverted Radius (Leaf Shape) */
    border-radius: 24px 4px 24px 4px;
    position: relative;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 1px 2px rgba(60,64,67,0.3);
    border: var(--border);
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform 0.1s;
}

.match-card:active { transform: scale(0.98); }

.card-header { margin-bottom: 12px; }
.league-name { font-size: 12px; font-weight: 900; color: var(--accent-blue); text-transform: uppercase; }
.match-time { font-size: 13px; color: var(--text-secondary); }

.match-content { display: flex; align-items: center; justify-content: space-between; }
.team { display: flex; flex-direction: column; align-items: center; width: 40%; text-align: center; }
.team img { width: 40px; height: 40px; object-fit: contain; margin-bottom: 8px; }
.team-name { font-size: 14px; font-weight: 500; }
.vs-badge { background: #f1f3f4; color: #5f6368; padding: 4px 8px; border-radius: 8px; font-size: 11px; font-weight: bold; }
body.dark-mode .vs-badge { background: #3c4043; color: #bdc1c6; }

/* --- LIQUID BADGES (Solid Colors) --- */
.signal-badge {
    position: absolute; top: 0; right: 0;
    padding: 8px 16px;
    font-size: 11px; font-weight: 900; color: white; text-transform: uppercase;
    border-bottom-left-radius: 16px;
    background-color: var(--badge-color); 
    z-index: 10;
}
.signal-badge::before {
    content: ""; position: absolute; top: 0; left: -20px; width: 20px; height: 20px;
    background: transparent; border-top-right-radius: 20px;
    box-shadow: 5px -5px 0 0 var(--badge-color);
}
.signal-badge::after {
    content: ""; position: absolute; bottom: -20px; right: 0; width: 20px; height: 20px;
    background: transparent; border-top-right-radius: 20px;
    box-shadow: 5px -5px 0 0 var(--badge-color);
}

/* --- DASHBOARD ELEMENTS (Restored) --- */
.dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.stat-box { background: var(--card-bg); padding: 16px; border-radius: 8px; box-shadow: var(--shadow); margin-bottom: 15px; }
.stat-box h3 { margin-top: 0; font-size: 14px; color: var(--text-secondary); border-bottom: 1px solid #eee; padding-bottom: 8px; }
.stat-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 13px; font-weight: 500; }

/* Gauges */
/* --- GAUGE BARS (FIXED) --- */
.gauge-container {
    flex-grow: 1;
    height: 8px;
    background: #e0e0e0; /* Light gray track */
    border-radius: 4px;
    margin: 0 10px;
    overflow: hidden;
}

.gauge-fill {
    height: 100%;
    /* Gradient from Yellow (Average) to Green (Strong) */
    background: linear-gradient(90deg, #ffc107, #28a745); 
    border-radius: 4px;
    transition: width 0.5s ease-out; /* Smooth animation */
}

/* Dark mode adjustment */
body.dark-mode .gauge-container {
    background: #444;
}

/* Shields */
.shield { padding: 2px 8px; border-radius: 4px; color: white; font-weight: bold; }
.shield-strong { background-color: #28a745; }
.shield-mid { background-color: #fd7e14; }
.shield-weak { background-color: #dc3545; }

/* Probability Bar (FIXED) */
.prob-bar { display: flex; width: 100%; height: 14px; background-color: #f1f3f4; border-radius: 7px; overflow: hidden; margin-top: 5px; }
.prob-segment { height: 100%; }
.prob-segment.home { background-color: #00b862; }
.prob-segment.draw { background-color: #bdc1c6; }
.prob-segment.away { background-color: #1a73e8; }

/* --- UTILITIES (Switch & Loader) --- */
.switch { position: relative; display: inline-block; width: 50px; height: 24px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 34px; }
.slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .slider { background-color: #1a73e8; }
input:checked + .slider:before { transform: translateX(26px); }

.loader-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--bg-color); z-index: 9999; display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.loader-overlay.active { opacity: 1; pointer-events: all; }
.spinner { width: 40px; height: 40px; border: 4px solid var(--text-secondary); border-top: 4px solid var(--accent-blue); border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 15px; }
@keyframes spin { 100% { transform: rotate(360deg); } }
.loader-text { font-family: 'Roboto', sans-serif; font-size: 14px; color: var(--text-secondary); letter-spacing: 1px; }
/* --- NEW: DETAILED STATS GRID --- */
.mini-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4px;
    background: #f8f9fa; /* Light container for stats */
    border-radius: 8px;
    padding: 8px;
    margin-bottom: 8px;
}
body.dark-mode .mini-stat-grid { background: #3c4043; }

.mini-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.mini-stat .label {
    font-size: 9px;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 2px;
}

.mini-stat .value {
    font-size: 13px;
    font-weight: 900;
    color: var(--text-primary);
}

.text-orange { color: #f57c00; }
.text-green { color: #1e8e3e; }

/* --- NEW: INJURY LIST --- */
.injury-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.injury-list li {
    font-size: 12px;
    padding: 4px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
}

.injury-list li::before {
    content: "🚑"; /* Injury Icon */
    margin-right: 6px;
    font-size: 10px;
}

.injury-list li.suspended::before {
    content: "🟥"; /* Red Card Icon */
}

/* Style for when there is no news */
.injury-list li.no-news {
    color: var(--text-secondary);
    font-style: italic;
}
.injury-list li.no-news::before {
    content: "✅"; /* Checkmark */
}
/* --- FINISHED MATCH STYLES (Fixed) --- */
.match-card.finished {
    background-color: #f1f3f4; /* Gray background to show it's done */
    border: 1px solid #e0e0e0;
    /* REMOVED: opacity: 0.6; */
    /* REMOVED: filter: grayscale(100%); */
}

/* Dim the TEAMS and HEADER, but keep the SCORE/BADGE bright */
.match-card.finished .team,
.match-card.finished .card-header {
    opacity: 0.5; /* Fade out the team names/logos */
    filter: grayscale(100%); /* Make logos B&W */
}

/* Dark Mode Finished */
body.dark-mode .match-card.finished {
    background-color: #28292c;
    border-color: #3c4043;
}

/* The Score Display (e.g., 2 - 1) */
.score-badge {
    background: var(--text-primary);
    color: var(--card-bg); /* Inverted colors for impact */
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: 2px;
}

/* Live Blink Animation */
@keyframes blink {
    50% { opacity: 0.5; }
}
/* --- FILTER SCROLL WRAPPER --- */
.filter-wrapper {
    position: relative;
    max-width: 650px;
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

/* The buttons (< and >) */
.scroll-arrow {
    background-color: var(--card-bg);
    color: var(--text-primary);
    border: 1px solid var(--text-secondary);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    font-size: 14px;
    flex-shrink: 0; /* Prevents button from getting squished */
    transition: background 0.2s;
}

.scroll-arrow:hover {
    background-color: var(--accent-blue);
    color: white;
    border-color: var(--accent-blue);
}

.scroll-arrow.left-arrow {
    margin-right: 8px;
}

.scroll-arrow.right-arrow {
    margin-left: 8px;
}

/* Update the existing filter-scroll to work with the wrapper */
.filter-scroll {
    /* Keep existing styles, but remove margin-bottom since wrapper handles it */
    margin-bottom: 0;
    /* Ensure it takes available space between arrows */
    flex-grow: 1; 
}
/* --- PRO PICKS GRID (2x2) --- */
.picks-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.pick-card {
    background: #f8f9fa;
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 8px;
    padding: 10px;
    text-align: center;
}
body.dark-mode .pick-card { background: #3c4043; border-color: #555; }

.pick-label { font-size: 10px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.pick-value { font-size: 14px; font-weight: 900; color: var(--text-primary); margin-bottom: 6px; }
.pick-conf { font-size: 10px; color: var(--text-secondary); margin-bottom: 4px; }

.conf-bar-bg { height: 4px; background: #ddd; border-radius: 2px; overflow: hidden; }
.conf-bar-fill { height: 100%; background: var(--accent-blue); }

/* --- MODERN FORM BADGES --- */
.form-row { display: flex; gap: 4px; }

.form-badge {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: bold;
    color: white;
}

.form-badge.win { background-color: #28a745; } /* Green */
.form-badge.draw { background-color: #6c757d; } /* Gray */
.form-badge.loss { background-color: #dc3545; } /* Red */
/* --- FORM TIMELINE (The Connected Badges) --- */
.form-timeline-container {
    position: relative;
    display: flex;
    justify-content: center; /* Center the badges */
    align-items: center;
    margin-bottom: 15px;
    padding: 10px 0;
}

/* The Grey Line running through the background */
.form-timeline-line {
    position: absolute;
    top: 50%;
    left: 10%;
    right: 10%;
    height: 2px;
    background-color: #e0e0e0;
    z-index: 0;
    transform: translateY(-50%);
}

.form-badge-circle {
    width: 24px;
    height: 24px;
    border-radius: 50%; /* Circle shape */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: bold;
    color: white;
    z-index: 1; /* Sit on top of the line */
    margin: 0 4px; /* Space between circles */
    border: 2px solid var(--card-bg); /* White border to separate from line */
}

/* Colors */
.form-badge-circle.W { background-color: #28a745; } /* Green */
.form-badge-circle.D { background-color: #adb5bd; } /* Gray */
.form-badge-circle.L { background-color: #dc3545; } /* Red */

/* --- FORM SUMMARY (Wins/Draws/Losses Stats) --- */
.form-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    text-align: center;
    margin-bottom: 20px;
}

.form-stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.form-stat-label { font-size: 11px; color: var(--text-secondary); margin-bottom: 2px; }
.form-stat-value { font-size: 13px; font-weight: 900; color: var(--text-primary); margin-bottom: 4px; }

/* Mini Progress Bars */
.mini-prog-bg {
    width: 100%;
    height: 4px;
    background-color: #f1f3f4;
    border-radius: 2px;
    overflow: hidden;
}

.mini-prog-fill { height: 100%; border-radius: 2px; }
.mini-prog-fill.green { background-color: #28a745; }
.mini-prog-fill.gray { background-color: #adb5bd; }
.mini-prog-fill.red { background-color: #dc3545; }
/* --- HEAD TO HEAD STYLES --- */
.h2h-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.h2h-item {
    display: flex;
    flex-direction: column;
    background: var(--bg-color);
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid rgba(0,0,0,0.05);
}

.h2h-date {
    font-size: 10px;
    color: var(--text-secondary);
    margin-bottom: 4px;
    text-align: center;
}

.h2h-score-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
}

.h2h-score-badge {
    background: #333;
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 11px;
    margin: 0 8px;
}
body.dark-mode .h2h-score-badge { background: #555; }

.bold-team {
    font-weight: 900;
    color: var(--text-primary);
}
/* --- HISTORY LISTS (SportsDB) --- */
.history-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.history-item {
    background: #f8f9fa;
    padding: 6px;
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,0.05);
    font-size: 10px;
}
body.dark-mode .history-item { background: #3c4043; border-color: #555; }

.hist-date {
    display: block;
    color: var(--text-secondary);
    font-size: 9px;
    margin-bottom: 2px;
}

.hist-score {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
}

.score-box {
    background: var(--text-primary);
    color: var(--bg-color);
    padding: 1px 5px;
    border-radius: 3px;
    font-weight: bold;
    font-size: 9px;
    margin: 0 4px;
    white-space: nowrap;
}
/* --- SEO ARTICLE STYLING --- */
.seo-content {
    font-family: 'Roboto', Arial, sans-serif; /* Standard readable font */
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.seo-content p {
    margin-bottom: 12px;
    text-align: justify; /* Makes it look like a newspaper block */
}

.seo-content strong {
    color: var(--text-primary);
}

.seo-sub-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin-top: 20px;
    margin-bottom: 8px;
    border-left: 3px solid var(--accent-blue);
    padding-left: 8px;
}

.seo-list {
    list-style-type: none; /* Remove default bullets */
    padding: 0;
    background: #f8f9fa;
    border-radius: 8px;
    padding: 10px 15px;
    border: 1px solid rgba(0,0,0,0.05);
}
body.dark-mode .seo-list { background: #3c4043; border-color: #555; }

.seo-list li {
    margin-bottom: 6px;
    border-bottom: 1px dashed rgba(0,0,0,0.1);
    padding-bottom: 6px;
}
.seo-list li:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
/* --- MODERN LANG SWITCHER --- */
.lang-dropdown {
    position: relative;
    display: inline-block;
}

.lang-btn {
    background: var(--card-bg);
    border: 1px solid var(--text-secondary);
    color: var(--text-primary);
    padding: 6px 12px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.lang-btn:hover {
    background: var(--bg-color);
    border-color: var(--accent-blue);
}

.lang-arrow {
    font-size: 10px;
    color: var(--text-secondary);
}

.lang-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%; /* Attach exactly to the bottom of the button */
    background-color: var(--card-bg);
    min-width: 140px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    border-radius: 12px;
    z-index: 1000; /* Higher z-index to be safe */
    overflow: visible; /* Allow the 'bridge' to sit outside */
    border: 1px solid rgba(0,0,0,0.1);
    margin-top: 10px; /* Visual space */
}

/* THE INVISIBLE BRIDGE (Fixes the closing issue) */
.lang-menu::before {
    content: "";
    position: absolute;
    top: -15px; /* Extends invisible area up to the button */
    left: 0;
    width: 100%;
    height: 15px;
    background: transparent;
}

.lang-dropdown:hover .lang-menu {
    display: block;
}

.lang-menu a {
    color: var(--text-primary);
    padding: 10px 16px;
    text-decoration: none;
    display: block;
    font-size: 13px;
    font-weight: 500;
}

.lang-menu a:hover {
    background-color: var(--bg-color);
    color: var(--accent-blue);
}

.lang-menu a.active {
    background-color: var(--accent-blue);
    color: white;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}
/* --- ACCURACY PILL (Green/Orange & Larger) --- */
.acc-pill {
    font-size: 12px; /* Bigger text */
    font-weight: 900;
    margin-top: 8px;
    padding: 5px 14px; /* Bigger badge */
    border-radius: 14px;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 2; /* Sit on top */
    position: relative;
}

/* HIGH ACCURACY (Green) */
.acc-high {
    background-color: #34a853; /* Vibrant Google Green */
    color: white;
    border: none;
}

/* LOW ACCURACY (Orange) */
.acc-low {
    background-color: #fbbc04; /* Vibrant Google Yellow/Orange */
    color: #333;
    border: none;
}

/* Dark Mode Adjustments */
body.dark-mode .acc-high { background-color: #1e8e3e; color: white; }
body.dark-mode .acc-low { background-color: #fdd663; color: black; }
/* --- RELATED MATCHES (Internal Links) --- */
.related-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.related-match-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: var(--bg-color);
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 6px;
    text-decoration: none;
    color: var(--text-primary);
    font-size: 12px;
    transition: background 0.2s;
}

.related-match-link:hover {
    background: #e8f0fe;
    border-color: var(--accent-blue);
    color: var(--accent-blue);
}

body.dark-mode .related-match-link:hover {
    background: rgba(26, 115, 232, 0.2);
}
/* --- BACK TO TOP BUTTON --- */
#backToTop {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: var(--accent-blue);
    color: white;
    border: none;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    cursor: pointer;
    font-size: 20px;
    display: none; /* Hidden by default */
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: transform 0.3s, opacity 0.3s;
    opacity: 0;
}

#backToTop.show {
    display: flex;
    opacity: 1;
}

#backToTop:hover {
    transform: translateY(-5px);
    background-color: #1557b0; /* Darker blue */
}

/* Dark Mode Adjustment */
body.dark-mode #backToTop {
    box-shadow: 0 4px 12px rgba(0,0,0,0.6);
}
/* --- LIVE MATCH STYLES (Clean Version) --- */

/* 1. The Card itself (No Border/Background change) */
.match-card.live-match {
    /* We keep the standard look, just let the text/badge do the talking */
    border: 1px solid rgba(0,0,0,0.05); 
    background-color: var(--card-bg);
}
body.dark-mode .match-card.live-match {
    border-color: rgba(255,255,255,0.1);
    background-color: var(--card-bg);
}

/* 2. The Text (Keep Red & Bold) */
.live-indicator {
    color: #ff3b30;
    font-weight: 900;
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* 3. The Blinking Dot (Keep) */
.live-dot {
    width: 8px;
    height: 8px;
    background-color: #ff3b30;
    border-radius: 50%;
    display: inline-block;
    animation: blink 1s infinite;
}

/* 4. The Live Score Badge (Keep Red Background) */
.score-badge.live-score {
    background-color: #405cd6;
    color: white;
    border: none;
    box-shadow: 0 2px 5px rgba(255, 59, 48, 0.4);
}

@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}
/* --- MOBILE RESPONSIVENESS (The Final Polish) --- */

@media (max-width: 768px) {
    
    /* 1. Stack the Main Dashboard (Season, Stats, etc.) */
    .dashboard-grid {
        grid-template-columns: 1fr; /* 1 Column instead of 2 */
        gap: 20px;
    }

    /* 2. Stack the "Pro Predictions" Grid */
    .picks-grid {
        grid-template-columns: 1fr 1fr; /* Keep 2x2 on mobile, it fits well */
        gap: 8px;
    }

    /* 3. Adjust Header padding */
    .app-header {
        padding: 0 5px;
    }
    
    /* 4. Make fonts slightly smaller/tighter */
    h3 { font-size: 13px; }
    .stat-row { font-size: 12px; }

    /* 5. Stack the "Split Columns" inside cards (History, Injuries) */
    /* This targets the divs we will add the class 'mobile-stack' to */
    .mobile-stack {
        grid-template-columns: 1fr !important; /* Force stack */
    }
    
    /* 6. Fix Padding for the Container */
    .container {
        padding: 0 10px;
    }
}
/* --- FIX MOBILE SCORE LAYOUT --- */

/* 1. Target the Center Wrapper (Score + AI Pill) */
/* We assume the structure is [Team] [Center] [Team] */
.match-content > div:nth-child(2) {
    min-width: 90px; /* Force minimum width so it doesn't get squashed */
    flex-shrink: 0;  /* Prevent it from shrinking */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

/* 2. Fix the Score Badge (Prevent wrapping & Fix RTL) */
.score-badge {
    white-space: nowrap; /* Never break into two lines */
    direction: ltr;      /* Force Left-to-Right (1-0), even in Arabic */
    display: inline-block;
    min-width: 60px;     /* Ensure space for numbers */
    text-align: center;
}

/* 3. Fix the AI Pill (Keep it under score) */
.acc-pill {
    white-space: nowrap;
    margin-top: 6px;
    direction: ltr; /* Keep % sign correct */
}

/* 4. Fix Team Names on Mobile (Prevent them from pushing too hard) */
@media (max-width: 768px) {
    .team {
        width: 35%; /* Reduce team width slightly to give space to score */
    }
    
    /* If team name is too long, cut it nicely */
    .team-name {
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 0 5px;
    }
}
/* --- FIX MOBILE SCORE LAYOUT (Add this to the bottom) --- */

/* 1. Force the Center Column (Score + AI) to stay visible */
.match-content > div:nth-child(2) {
    min-width: 80px; /* Force space for the score */
    flex-shrink: 0;  /* Prevent it from getting squashed */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

/* 2. Fix the Score Text Direction */
.score-badge {
    white-space: nowrap; /* Keep on one line */
    direction: ltr;      /* Force Left-to-Right (1-0) even in Arabic */
    display: inline-block;
    text-align: center;
}

/* 3. Fix the AI Pill */
.acc-pill {
    white-space: nowrap;
    direction: ltr; 
    margin-top: 6px;
}

/* 4. Mobile Specific Adjustments */
@media (max-width: 768px) {
    /* Make teams smaller to give space to the score */
    .team {
        width: 30%; 
    }
    
    /* Handle long team names gracefully */
    .team-name {
        font-size: 12px; /* Slightly smaller font */
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; /* Adds "..." if too long */
        padding: 0 2px;
    }
}
/* --- TEXT PAGE STYLING (For About, Terms, etc.) --- */
.text-page {
    padding: 30px;
    line-height: 1.8;
    font-size: 15px;
}
.text-page h1 { font-size: 24px; margin-bottom: 10px; }
.text-page h4 { font-size: 18px; margin-bottom: 10px; margin-top: 0; color: var(--text-primary); }
.text-page p { color: var(--text-secondary); margin-bottom: 15px; }


/* --- MODERN FOOTER STYLING --- */
.modern-footer {
    background-color: var(--card-bg);
    margin-top: 60px;
    padding: 40px 20px 20px;
    border-top: 1px solid rgba(0,0,0,0.05);
    
    /* ADD THESE LINES */
    width: 100%;
    height: auto;
    box-sizing: border-box;
    position: relative;
    z-index: 10;
}
body.dark-mode .modern-footer {
    border-top: 1px solid rgba(255,255,255,0.05);
}

.footer-content {
    max-width: 650px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 20px;
}

/* Brand Section */
.footer-logo {
    font-size: 24px;
    font-weight: 900;
    color: var(--text-primary);
    letter-spacing: -1px;
}
.footer-logo span { color: var(--accent-blue); }

.footer-tagline {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 5px;
    font-weight: 500;
}

/* Navigation Links */
.footer-nav {
    display: flex;
    gap: 20px;
}

.footer-nav a {
    text-decoration: none;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    transition: color 0.2s;
    position: relative;
}

.footer-nav a:hover {
    color: var(--accent-blue);
}

/* Bottom Bar */
.footer-bottom {
    max-width: 650px;
    margin: 30px auto 0;
    padding-top: 20px;
    border-top: 1px solid rgba(0,0,0,0.05);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
body.dark-mode .footer-bottom { border-top-color: rgba(255,255,255,0.05); }

.social-icons span {
    font-size: 16px;
    margin-left: 15px;
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.2s;
}
.social-icons span:hover { opacity: 1; }

/* Mobile Adjustment */
@media (max-width: 480px) {
    .footer-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .footer-nav {
        margin-top: 10px;
    }
}
/* --- HERO SECTION --- */
.hero-container {
    margin-bottom: 20px;
    text-align: center;
}

.hero-box {
    padding: 10px 5px;
}

.hero-box h1 {
    font-size: 22px; /* Large but readable on mobile */
    font-weight: 900;
    margin: 0 0 10px 0;
    color: var(--text-primary);
    line-height: 1.3;
}

.hero-sub {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0 auto 20px auto;
    line-height: 1.5;
    max-width: 600px; /* Prevents text from stretching too wide on PC */
}

.hero-disclaimer {
    display: inline-block;
    font-size: 11px;
    color: var(--text-secondary);
    background-color: var(--card-bg);
    border: 1px solid rgba(0,0,0,0.05);
    padding: 8px 12px;
    border-radius: 8px;
    max-width: 90%;
    line-height: 1.4;
}

body.dark-mode .hero-disclaimer {
    border-color: rgba(255,255,255,0.1);
    background-color: rgba(255,255,255,0.02);
}

/* Mobile Tweak */
@media (max-width: 480px) {
    .hero-box h1 {
        font-size: 18px;
    }
}
/* --- DEEP STATS LAYOUT (New) --- */
.stats-comparison-box {
    margin-top: 15px;
}

.comparison-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 700;
}

/* The Bar Container */
.comp-bar-container {
    display: flex;
    width: 100%;
    height: 8px;
    background-color: #eee;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 15px; /* Space between stat rows */
}

/* Home Bar (Left, Blue) */
.comp-bar-home {
    height: 100%;
    background-color: var(--accent-blue);
    /* Width will be set by JS/EJS */
}

/* Away Bar (Right, Red or Grey) */
.comp-bar-away {
    height: 100%;
    background-color: #ff3b30; 
    /* The remaining space is automatically the background #eee, 
       but for a dual-color bar we visually split it. */
}

/* Labels */
.stat-val-home { color: var(--accent-blue); }
.stat-val-away { color: #ff3b30; }
.stat-label-center { 
    color: var(--text-secondary); 
    font-size: 10px; 
    text-transform: uppercase; 
    letter-spacing: 1px;
}

/* Lineups Section (Preparation) */
.lineup-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.player-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.player-item {
    font-size: 12px;
    padding: 3px 0;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    color: var(--text-primary);
}
.player-number {
    font-weight: bold;
    color: var(--text-secondary);
    margin-inline-end: 5px;
    display: inline-block;
    width: 20px;
}
/* --- RESPONSIBLE GAMBLING LINK --- */
.copyright-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}

.responsible-link {
    color: var(--text-secondary);
    font-size: 11px;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.responsible-link:hover {
    opacity: 1;
    color: var(--accent-blue);
    text-decoration: underline;
}

.age-badge {
    border: 1px solid currentColor;
    padding: 1px 4px;
    border-radius: 4px;
    font-weight: 900;
    font-size: 10px;
}

/* Update Footer Bottom layout for Mobile */
@media (min-width: 481px) {
    .copyright-row {
        flex-direction: row;
        align-items: center;
    }
    .responsible-link::before {
        content: "•";
        margin-right: 6px;
        opacity: 0.5;
    }
}