/* --- MOBILE OPTIMIZATIONS (Forced) --- */
@media (max-width: 768px) {
    body {
        padding: 5px;
    }

    .mobile-subtitle {
        display: block !important;
        text-align: center !important;
    }

    .seo-intro {
        text-align: center !important;
    }

    /* Centered Header on Mobile */
    .app-header {
        text-align: center;
        margin-bottom: 20px;
    }

    .app-header h1,
    .app-title {
        text-align: center !important;
        width: 100% !important;
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }



    /* FLATTEN GRID FOR REORDERING */
    .main-grid {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    /* Make content-area children direct flex items of main-grid */
    .content-area {
        display: contents;
    }

    /* 
       DESIRED ORDER:
       1. Dates (Nav)
       2. Bet of the Day (Sidebar) - LOCKED ABOVE MATCHES
       3. Matches 
       4. Footer/SEO
    */
    .date-nav {
        order: 1;
        margin-bottom: 10px;
    }

    .spacer-20 {
        display: none;
    }

    /* FIXED: Sidebar covering issue. Force static! */
    .sidebar {
        order: 2;
        position: static !important;
        margin-top: 0;
        margin-bottom: 15px;
        z-index: 1;
        width: 100% !important;
    }

    /* REMOVE SCROLLBAR FROM BOTD LIST */
    .botd-list {
        max-height: none !important;
        /* Allow full expansion */
        overflow: visible !important;
        /* No scrollbar */
    }

    .top-controls {
        order: 3;
        margin-bottom: 10px;
    }

    .matches-list {
        order: 4;
    }

    #matchesList {
        order: 4;
    }

    .seo-content {
        order: 5;
    }

    footer {
        order: 6;
    }


    .matches-header {
        display: none;
    }

    .match-row {
        padding: 10px 8px;
    }

    .match-content {
        overflow-x: auto;
        padding-bottom: 5px;
        white-space: nowrap;
        gap: 12px;
        margin-right: -8px;
        scrollbar-width: thin;
    }

    .col-match {
        width: 130px;
        flex-shrink: 0;
        margin-right: 2px;
    }

    .team-row {
        font-size: 11px;
    }

    .col-time {
        display: none !important;
        /* Hide Time Only */
    }

    /* Stats Columns: Small & Visible */
    .col-tip,
    .col-score,
    .col-ou,
    .col-btts {
        width: 34px;
        flex-shrink: 0;
        text-align: center;
        font-size: 10px;
        display: block !important;
        padding: 0;
    }

    /* Shorter Bar to fit screen */
    .col-prob {
        width: 65px;
        flex-shrink: 0;
        padding-right: 2px;
    }

    .date-btn {
        min-width: 60px;
        font-size: 11px;
        padding: 8px 1px;
    }

    .ad-header {
        height: 50px;
    }
}