/* ==========================================================================
   GoalLogic Mobile Responsive Layer
   Loaded last so shared pages remain usable on narrow screens.
   ========================================================================== */

/* Custom display toggles for widgets */
.mobile-only-widget {
    display: none;
}

@media (max-width: 1024px) {
    .hide-on-mobile-tools {
        display: none !important;
    }
    .mobile-only-widget {
        display: block;
        margin-top: 16px;
    }
    .ads-section {
        display: none !important;
    }
}

html,
body {
    width: 100%;
    max-width: 100%;
}

.mobile-bottom-nav {
    display: none; /* Hidden on desktop */
}

.mobile-more-top-toggle,
.mobile-more-overlay,
.mobile-more-drawer,
.mobile-calendar-overlay,
.mobile-calendar-panel {
    display: none;
}

img,
svg,
video,
canvas {
    max-width: 100%;
}

button,
input,
select,
textarea {
    max-width: 100%;
}

.content,
.page-container,
.layout,
.league-block,
.country-detail-page,
.team-detail-page,
.match-detail-page,
.tool-page,
.tool-shell,
.tools-layout,
.prediction-card,
.pc-card,
.stats-card,
.table-card {
    min-width: 0;
}

.hide-on-mobile {
    display: initial;
}

@media (max-width: 1024px) {
    .page-container {
        padding: 0 10px;
        margin-top: 10px;
    }

    .layout {
        max-width: 100%;
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    /* Off-canvas sidebar logic */
    .left-sidebar,
    .right-sidebar {
        display: block !important;
        position: fixed;
        top: 0;
        bottom: 60px; /* Leave space for bottom nav */
        width: 300px;
        max-width: 85vw;
        background: var(--bg-primary);
        z-index: 1001;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        box-shadow: 0 0 20px rgba(0,0,0,0.5);
        backface-visibility: hidden;
        contain: layout paint;
        will-change: transform;
    }
    
    .left-sidebar {
        left: 0;
        transform: translateX(-110%);
    }
    
    .right-sidebar {
        right: 0;
        transform: translateX(110%);
    }

    .left-sidebar.show,
    .right-sidebar.show {
        transform: translateX(0);
    }

    .left-sidebar {
        background: var(--bg-primary);
        padding: 12px;
        border-radius: 0 8px 8px 0;
        box-shadow: 12px 0 26px rgba(15, 23, 42, 0.24);
    }

    .left-sidebar .sidebar-block,
    .left-sidebar .other-countries {
        position: relative;
        isolation: isolate;
        transform: translateZ(0);
        backface-visibility: hidden;
    }

    .left-sidebar .pinned-teams-block,
    .left-sidebar .football-leagues-block,
    .left-sidebar .countries-block,
    .left-sidebar .other-countries {
        background: var(--bg-secondary);
        border: 1px solid rgba(148, 163, 184, 0.14);
        border-radius: 6px;
        box-shadow: none;
        overflow: clip;
    }

    .left-sidebar .countries-block {
        margin-bottom: 16px;
    }

    .left-sidebar .other-countries {
        margin-bottom: 90px;
    }

    .sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.6);
        z-index: 1000;
        display: none;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .sidebar-overlay.show {
        display: block;
        opacity: 1;
    }

    .content {
        width: 100%;
        border-radius: 0;
        overflow: visible;
    }

    .footer,
    .ms-date-nav {
        margin-top: 10px;
    }
}

/* =========================================================
   ULTRA-SMALL SCREENS (e.g., iPhone SE, Galaxy Fold < 350px)
   ========================================================= */
@media (max-width: 350px) {
    .prediction-card--corners .pc-body,
    .prediction-card--double-chance .pc-body,
    .prediction-card--half-time .pc-body,
    .prediction-card--halfTime-fullTime .pc-body,
    .prediction-card--match-result .pc-form-row,
    .prediction-card--double-chance .pc-form-row,
    .prediction-card--half-time .pc-form-row,
    .prediction-card--halfTime-fullTime .pc-form-row {
        grid-template-columns: 65px 1fr 65px !important;
    }

    .prediction-card .pc-name {
        max-width: 65px !important;
        font-size: 10px !important;
    }

    .prediction-card .pc-prob,
    .prediction-card .pc-prob svg {
        width: 40px !important;
        height: 40px !important;
    }

    .prediction-card .pc-probs-row {
        gap: 6px !important;
    }

    .prediction-card .form-dot {
        width: 11px !important;
        height: 11px !important;
        font-size: 7px !important;
    }
}

@media (max-width: 768px) {
    body {
        min-width: 0;
        overflow-x: hidden;
        -webkit-text-size-adjust: 100%;
    }

    .page-container {
        padding: 0;
    }

    .content {
        padding-left: 0;
        padding-right: 0;
    }

    .ads-banner,
    .ad-banner,
    .ad-block,
    .google-auto-placed {
        max-width: 100%;
        overflow: hidden;
    }

    /* Stack center header elements on mobile */
    .center-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        margin-bottom: 16px !important;
    }

    /* Reorder: date navigator (1st), market tabs (2nd), status filters (3rd) */
    .center-header .date-navigator {
        order: 1 !important;
        align-self: flex-end !important;  /* Right edge */
    }

    .center-header .ls-date-control-row {
        order: 1 !important;
        align-self: stretch !important;
    }

    .center-header .prediction-types-wrapper {
        order: 2 !important;
    }

    .center-header .status-filters,
    .center-header #status-filters {
        order: 3 !important;
    }

    .prediction-types-wrapper {
        width: 100%;
    }

    .prediction-types {
        max-width: 100% !important;
        width: 100%;
        gap: 6px !important;
    }

    .prediction-types-wrapper .scroll-btn {
        display: none !important;
    }

    /* Compact prediction type tab pills on mobile */
    .ptype {
        padding: 7px 10px !important;
        font-size: 10px !important;
        min-width: 0 !important;
        border-radius: 20px !important;
    }

    #stats-prediction-types .prediction-tab.active {
        padding: 7px 10px !important;
    }

    /* Status filter buttons */
    .status-filters {
        width: 100%;
        overflow-x: auto;
        gap: 6px !important;
    }

    .status-btn {
        padding: 6px 14px !important;
        font-size: 12px !important;
        border-radius: 16px !important;
        white-space: nowrap !important;
    }

    /* Hide sound toggle on mobile — saves vertical space */
    .gl-sound-toggle-btn {
        display: none !important;
    }

    .ls-sound-toggle-slot .gl-sound-toggle-btn {
        display: inline-flex !important;
        width: 36px;
        height: 36px;
        margin-left: 0;
        border-radius: 10px;
        font-size: 15px;
        background: var(--bg-primary, #ffffff);
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
    }



    /* ===== LEAGUE ACCORDION HEADER (MOBILE) ===== */
    .league-header {
        padding: 10px 12px !important;
        gap: 8px !important;
    }

    .league-left {
        gap: 8px !important;
        min-width: 0 !important;
        flex: 1 !important;
        overflow: hidden !important;
    }

    .league-name,
    .league-name-link {
        font-size: 12px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        min-width: 0 !important;
    }

    .country-logo {
        width: 20px !important;
        height: 20px !important;
        flex-shrink: 0 !important;
    }

    .league-right {
        gap: 8px !important;
        flex-shrink: 0 !important;
    }

    .league-match-count {
        font-size: 10px !important;
        white-space: nowrap !important;
    }

    .league-arrow {
        font-size: 12px !important;
    }

    /* Horizontal tab and filter bars should scroll instead of squeezing text. */
    .market-tabs,
    .prediction-tabs,
    .prediction-type-tabs,
    .stats-tabs,
    .stats-nav-tabs,
    .league-tabs,
    .country-tabs,
    .tool-tabs,
    .pma-tabs,
    .af-tabs,
    .gm-tabs,
    .mt-tabs,
    .tc-tabs,
    .pc-tabs,
    .status-filters,
    #status-filters,
    #ls-status-filters,
    #stats-prediction-types,
    #market-switcher,
    #league-tabs,
    #country-tabs {
        display: flex;
        flex-wrap: nowrap !important;
        gap: 6px;
        overflow-x: auto;
        overflow-y: hidden;
        max-width: 100%;
        padding-bottom: 6px;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .market-tabs::-webkit-scrollbar,
    .prediction-tabs::-webkit-scrollbar,
    .prediction-type-tabs::-webkit-scrollbar,
    .stats-tabs::-webkit-scrollbar,
    .stats-nav-tabs::-webkit-scrollbar,
    .league-tabs::-webkit-scrollbar,
    .country-tabs::-webkit-scrollbar,
    .tool-tabs::-webkit-scrollbar,
    .pma-tabs::-webkit-scrollbar,
    .af-tabs::-webkit-scrollbar,
    .gm-tabs::-webkit-scrollbar,
    .mt-tabs::-webkit-scrollbar,
    .tc-tabs::-webkit-scrollbar,
    .pc-tabs::-webkit-scrollbar,
    .status-filters::-webkit-scrollbar,
    #status-filters::-webkit-scrollbar,
    #ls-status-filters::-webkit-scrollbar,
    #stats-prediction-types::-webkit-scrollbar,
    #market-switcher::-webkit-scrollbar,
    #league-tabs::-webkit-scrollbar,
    #country-tabs::-webkit-scrollbar {
        display: none;
    }

    .market-tabs > *,
    .prediction-tabs > *,
    .prediction-type-tabs > *,
    .stats-tabs > *,
    .stats-nav-tabs > *,
    .league-tabs > *,
    .country-tabs > *,
    .tool-tabs > *,
    .pma-tabs > *,
    .af-tabs > *,
    .gm-tabs > *,
    .mt-tabs > *,
    .tc-tabs > *,
    .pc-tabs > *,
    .status-filters > *,
    #status-filters > *,
    #ls-status-filters > *,
    #stats-prediction-types > *,
    #market-switcher > *,
    #league-tabs > *,
    #country-tabs > * {
        flex: 0 0 auto;
        scroll-snap-align: start;
        white-space: nowrap;
    }

    #ls-status-filters .status-btn.live-status-btn {
        color: #ef4444 !important;
    }

    #ls-status-filters .status-btn.live-status-btn.active,
    #ls-status-filters .status-btn.live-status-btn:hover,
    #ls-status-filters .status-btn.live-status-btn:focus-visible {
        color: #dc2626 !important;
    }

    .prediction-tab,
    .market-tab,
    .filter-tab,
    .status-filter,
    .tab-btn,
    .tool-tab,
    .ms-time-tab,
    .ms-cat-tab {
        min-height: 38px;
        max-width: 86vw;
    }

    /* Fixture and prediction cards */
    .prediction-card,
    .pc-card,
    .fixture-card,
    .match-card,
    .league-card,
    .ls-fixture-row,
    .ls-match-row {
        width: 100%;
        max-width: 100%;
        border-radius: 8px;
        overflow: hidden;
        margin-bottom: 12px; /* Breathing space between cards */
    }



    .prediction-card *,
    .pc-card *,
    .fixture-card *,
    .match-card *,
    .league-card * {
        min-width: 0;
    }

    .pc-team-name,
    .pc-team-short,
    .pc-league-name,
    .pc-country-name,
    .fixture-team-name,
    .team-name,
    .league-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .pc-card-header,
    .pc-meta-row,
    .fixture-meta,
    .league-header,
    .country-header,
    .team-header,
    .match-header {
        max-width: 100%;
        min-width: 0;
    }

    .pc-teams,
    .pc-team-row,
    .fixture-teams,
    .match-teams,
    .ls-teams {
        min-width: 0;
    }

    .pc-score-block,
    .pc-score,
    .score-block {
        flex-shrink: 0;
    }

    .ls-match-row--odds {
        display: grid !important;
        grid-template-columns: 62px minmax(0, 1fr) 28px 42px;
        grid-template-areas:
            "time teams score action"
            "time odds odds action";
        align-items: center;
        column-gap: 7px;
        row-gap: 7px;
        padding: 9px 8px !important;
        min-height: 78px;
    }

    .ls-match-row--odds .ls-col-time {
        grid-area: time;
        width: auto;
        align-items: flex-start;
    }

    .ls-match-row--odds .ls-col-teams {
        grid-area: teams;
        width: 100%;
        min-width: 0;
        padding: 0;
    }

    .ls-match-row--odds .ls-team-line-row {
        gap: 6px;
    }

    .ls-match-row--odds .ls-crest,
    .ls-match-row--odds .ls-crest-ph {
        width: 17px;
        height: 17px;
        flex: 0 0 17px;
    }

    .ls-match-row--odds .ls-team-name {
        display: block;
        min-width: 0;
        max-width: 100%;
        font-size: 12px;
        line-height: 1.15;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ls-match-row--odds .ls-col-score {
        grid-area: score;
        width: 28px;
    }

    .ls-match-row--odds .ls-col-odds {
        grid-area: odds;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        width: 100%;
        margin: 0;
    }

    .ls-match-row--odds .ls-odd-box {
        width: 100%;
        min-width: 0;
        height: 30px;
        border-radius: 7px;
    }

    .ls-match-row--odds .ls-col-right-action {
        grid-area: action;
        width: 42px !important;
        min-width: 42px;
        justify-content: center !important;
    }

    .ls-match-row--odds .ls-stats-link {
        min-width: 34px;
        height: 34px;
    }

    .ls-match-row--odds .ls-bet-live-widget {
        width: 42px;
        min-width: 42px;
        padding: 0 8px;
    }

    .pc-prediction-pill,
    .prob-pill,
    .odds-pill,
    .badge,
    .status-badge {
        max-width: 100%;
        white-space: normal;
        line-height: 1.15;
    }

    .form-indicators {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        max-width: 100%;
        scrollbar-width: none;
    }

    .form-indicators::-webkit-scrollbar {
        display: none;
    }

    /* Tables: keep all columns reachable without breaking the page width. */
    .table-card,
    .table-wrap,
    .standings-table-wrap,
    .league-table-wrap,
    .stats-table-wrap,
    .responsive-table,
    .pma-table-wrap,
    .tc-table-wrap,
    .ta-table-wrap {
        width: 100%;
        max-width: 100%;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    table {
        max-width: 100%;
    }

    .table-card table,
    .table-wrap table,
    .standings-table-wrap table,
    .league-table-wrap table,
    .stats-table-wrap table,
    .responsive-table table {
        min-width: 620px;
    }

    /* Match detail stats and panels */
    .match-hero,
    .match-scoreboard,
    .stats-card,
    .stats-section,
    .ms-card,
    .ms-panel,
    .past-meetings-card,
    .voting_system,
    .prediction-card-shell {
        width: 100%;
        max-width: 100%;
    }

    .ms-header,
    .ms-scoreline,
    .match-scoreboard,
    .vote-block,
    .h2h-main,
    .h2h-bottom-row {
        min-width: 0;
    }

    .ms-header,
    .match-scoreboard {
        gap: 8px;
    }

    .h2h-main,
    .h2h-bottom-row,
    .vote-grid,
    .votes-grid,
    .prediction-grid,
    .tools-grid,
    .stats-grid,
    .cards-grid {
        grid-template-columns: 1fr !important;
    }

    /* Tool pages */
    .tool-shell,
    .tool-layout,
    .tool-content,
    .tool-panel,
    .filters-panel,
    .results-panel,
    .af-layout,
    .gm-layout,
    .pma-layout,
    .mt-layout,
    .ta-layout,
    .tc-layout,
    .pc-layout {
        width: 100%;
        max-width: 100%;
        grid-template-columns: 1fr !important;
    }

    .filter-grid,
    .filters-grid,
    .controls-grid,
    .form-grid,
    .selector-grid,
    .analytics-grid,
    .comparison-grid,
    .leaderboard-grid {
        grid-template-columns: 1fr !important;
    }

    .tool-panel,
    .filters-panel,
    .results-panel {
        border-radius: 8px;
    }

    .search-dropdown,
    .search-results,
    .navbar-search-results {
        max-width: calc(100vw - 16px);
    }

    #gl-tooltip {
        max-width: calc(100vw - 24px);
        white-space: normal;
        line-height: 1.4;
    }

    /* Navbar */
    .site-navbar {
        overflow: visible;
    }

    .nav-top-container,
    .nav-main-container {
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
    }

    .nav-top-container {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        column-gap: 8px;
        row-gap: 6px;
        padding-top: 10px;
        padding-bottom: 10px;
        position: relative;
    }

    .nav-top-right {
        display: none !important;
    }

    .mobile-more-top-toggle {
        order: 3;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
        border: 1px solid rgba(148, 163, 184, 0.32);
        border-radius: 12px;
        background: rgba(148, 163, 184, 0.12);
        color: #dbeafe;
        font-size: 18px;
        cursor: pointer;
    }
    
    @media (max-width: 360px) {
        .nav-top-container {
            column-gap: 4px;
            padding-left: 6px;
            padding-right: 6px;
        }
        .nav-top .mobile-logo .logo-icon {
            height: 32px;
        }
        .mobile-logo {
            height: 34px;
        }
        .search-wrapper, .search-pill {
            width: 34px !important;
            height: 34px !important;
        }
        .mobile-more-top-toggle {
            width: 34px;
            height: 34px;
            flex-basis: 34px;
        }
    }
    
    .desktop-logo { display: none !important; }
    .mobile-logo {
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        gap: 0;
        height: 34px;
        margin-left: -12px;
        margin-right: auto;
        overflow: visible;
        flex: 0 0 auto;
        color: #f8fafc;
        line-height: 1;
    }

    /* Show the actual logo images on mobile, respecting light/dark mode */
    .nav-top .mobile-logo .logo-icon {
        display: none !important;
        height: 78px !important;
        width: auto;
        max-width: 150px !important;
        object-fit: contain;
    }

    /* Always show dark logo — navbar is always dark themed */
    .nav-top .mobile-logo .logo-light {
        display: none !important;
    }

    .nav-top .mobile-logo .logo-dark {
        display: block !important;
    }

    /* Remove the pseudo-element icon crop */
    .mobile-logo::before {
        display: none;
    }

    /* The new logo asset is an icon, so keep the wordmark visible beside it. */
    .mobile-logo-text {
        display: inline-block;
        margin-left: -94px;
        color: #f8fafc;
        font-size: 17px;
        font-weight: 800;
        letter-spacing: -0.4px;
    }
    
    /* Layout */
    .mobile-logo { order: 1; }
    /* Profile Dropdown Fix */
    #userMenuOption .dropdown-menu {
        left: auto !important;
        right: 0 !important;
        z-index: 10005 !important;
    }

    /* Search Icon Default State */
    .nav-top-left {
        order: 2;
        width: auto !important;
        min-width: 0 !important;
        margin-top: 0;
        margin-left: auto;
        margin-right: 4px;
    }
    
    .search-wrapper {
        width: 38px !important;
        height: 38px !important;
    }

    .search-pill {
        width: 38px !important;
        height: 38px !important;
        border-radius: 50% !important;
        padding: 0 !important;
        justify-content: center !important;
        cursor: pointer;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    .search-input, .search-clear {
        display: none !important;
    }

    /* Active Search State */
    .nav-top-left.mobile-search-active {
        order: 4;
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        pointer-events: auto;
    }

    .nav-top-left.mobile-search-closing {
        position: absolute;
        left: 10px;
        right: 10px;
        top: 100%;
        margin-top: 2px;
        z-index: 10030;
        width: auto !important;
        pointer-events: none;
    }
    
    .nav-top-left.mobile-search-active .search-wrapper,
    .nav-top-left.mobile-search-closing .search-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    .nav-top-left.mobile-search-active .search-pill,
    .nav-top-left.mobile-search-closing .search-pill {
        width: 100% !important;
        max-width: 100% !important;
        height: 40px !important;
        border-radius: 8px !important;
        padding: 0 16px !important;
        background: var(--bg-tertiary) !important;
        border: 1px solid var(--border-color) !important;
        justify-content: flex-start !important;
    }

    .nav-top-left.mobile-search-active .search-input,
    .nav-top-left.mobile-search-closing .search-input {
        display: block !important;
        width: 100%;
        opacity: 1;
        color: #0f172a !important;
        caret-color: var(--accent-green);
    }

    .nav-top-left.mobile-search-active .search-input::placeholder,
    .nav-top-left.mobile-search-closing .search-input::placeholder {
        color: #64748b !important;
        opacity: 1;
    }

    .dark-mode .nav-top-left.mobile-search-active .search-input,
    .dark-mode .nav-top-left.mobile-search-closing .search-input {
        color: #f8fafc !important;
    }

    .dark-mode .nav-top-left.mobile-search-active .search-input::placeholder,
    .dark-mode .nav-top-left.mobile-search-closing .search-input::placeholder {
        color: #94a3b8 !important;
    }
    
    .nav-top-left.mobile-search-active .search-clear,
    .nav-top-left.mobile-search-closing .search-clear {
        display: flex !important;
    }

    .nav-top-left.mobile-search-active .search-pill {
        animation: mobileSearchIn 0.24s ease both;
    }

    .nav-top-left.mobile-search-closing .search-pill,
    .nav-top-left.mobile-search-closing .search-dropdown.open {
        animation: mobileSearchOut 0.28s ease both;
    }

    .search-dropdown {
        position: fixed !important;
        left: 8px !important;
        right: 8px !important;
        top: 118px !important;
        width: auto !important;
        max-width: calc(100vw - 16px) !important;
        max-height: 70vh;
        overflow-y: auto;
        z-index: 10020;
    }

    .nav-top-left.mobile-search-active .search-dropdown.open {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    @keyframes mobileSearchIn {
        from {
            opacity: 0;
            transform: translateY(-6px) scale(0.985);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    @keyframes mobileSearchOut {
        from {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
        to {
            opacity: 0;
            transform: translateY(-6px) scale(0.985);
        }
    }

    .search-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .search-tabs::-webkit-scrollbar {
        display: none;
    }

    .nav-main {
        display: none !important;
    }

    .nav-main-container {
        min-height: 54px;
        gap: 10px;
    }

    .nav-logo {
        flex: 0 0 auto;
    }

    .logo-icon {
        height: 56px !important;
        max-width: 128px;
        object-fit: contain;
    }

    .nav-menu {
        flex: 1 1 auto;
        gap: 8px !important;
        margin: 0;
        padding: 8px 0;
        overflow-x: auto;
        overflow-y: visible;
        white-space: nowrap;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .nav-menu::-webkit-scrollbar {
        display: none;
    }

    .nav-menu li {
        flex: 0 0 auto;
        padding: 8px 16px !important;
        font-size: 13px;
        font-weight: 600;
        background: var(--bg-tertiary);
        border-radius: 20px;
        border: 1px solid var(--border-color);
        transition: all 0.2s ease;
    }

    .nav-menu li.active {
        background: var(--accent-green) !important;
        color: white !important;
        border-color: var(--accent-green) !important;
    }

    .nav-menu li::after {
        display: none !important;
    }
    
    .dark-mode .nav-menu li {
        background: rgba(255, 255, 255, 0.05);
    }
    
    .dark-mode .nav-menu li.active {
        background: var(--accent-green) !important;
        color: white !important;
    }

    .menu-dropdown {
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        top: 150px;
        width: auto !important;
        max-width: calc(100vw - 24px);
        max-height: calc(100vh - 240px);
        overflow-y: auto;
        z-index: 10010;
        border-radius: 12px !important;
        box-shadow: 0 12px 28px rgba(0,0,0,0.28) !important;
        padding: 10px 0 8px !important;
        background: var(--dropdown-bg) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        --dropdown-arrow-left: 32px;
        --dropdown-arrow-top: 144px;
    }

    .menu-dropdown::before {
        display: none;
    }

    .mobile-menu-dropdown-arrow {
        position: fixed;
        width: 14px;
        height: 14px;
        background: var(--dropdown-bg);
        border-left: 1px solid rgba(255, 255, 255, 0.14);
        border-top: 1px solid rgba(255, 255, 255, 0.14);
        border-top-left-radius: 3px;
        box-shadow: -4px -4px 10px rgba(0, 0, 0, 0.08);
        opacity: 0;
        pointer-events: none;
        transform: rotate(45deg) translateY(4px) scale(0.96);
        transition: opacity 0.18s ease, transform 0.18s ease;
        z-index: 10020;
    }

    .mobile-menu-dropdown-arrow.is-visible {
        opacity: 1;
        transform: rotate(45deg) translateY(0) scale(1);
    }

    .nav-menu li.has-dropdown.active .menu-dropdown,
    .nav-menu li.has-dropdown.mobile-open .menu-dropdown {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
        pointer-events: auto !important;
    }

    .menu-dropdown .menu-dropdown-item {
        white-space: normal !important;
    }

    .login-link,
    .signup-link {
        font-size: 12px;
        white-space: nowrap;
    }

    .signup-link {
        padding: 6px 8px;
    }

    /* Mobile Bottom Navigation */
    

    html.dropdown-active,
    body.dropdown-active {
        overflow: hidden !important;
        overscroll-behavior: none !important;
        touch-action: none;
    }

    body.dropdown-active .menu-dropdown,
    body.dropdown-active .search-dropdown {
        touch-action: pan-y;
    }

    .mobile-bottom-nav {
        display: flex;
        justify-content: space-around;
        align-items: center;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 60px;
        background: var(--bg-primary);
        border-top: 1px solid var(--border-color);
        z-index: 1000;
        padding-bottom: env(safe-area-inset-bottom);
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    }

    .bottom-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: var(--text-tertiary);
        text-decoration: none;
        background: none;
        border: none;
        font-size: 10px;
        font-weight: 600;
        gap: 6px;
        flex: 1;
        cursor: pointer;
        transition: color 0.2s ease;
        padding: 0;
    }

    .bottom-nav-item.active,
    .bottom-nav-item:hover {
        color: var(--text-primary);
    }

    .bottom-nav-item i {
        font-size: 20px;
    }

    .mobile-bottom-nav {
        background: rgba(255, 255, 255, 0.96);
        border-top: 1px solid rgba(148, 163, 184, 0.28);
        z-index: 10050;
        box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.12);
        backdrop-filter: blur(14px);
    }

    .bottom-nav-item {
        position: relative;
        font-weight: 700;
        gap: 5px;
        min-width: 0;
        outline: none;
    }

    .bottom-nav-item.active,
    .bottom-nav-item:hover,
    .bottom-nav-item:focus-visible {
        color: var(--accent-green);
    }

    .bottom-nav-item.active::after {
        display: none;
    }

    .bottom-nav-label {
        position: relative;
        line-height: 1;
        padding-bottom: 7px;
        white-space: nowrap;
    }

    .bottom-nav-item.active .bottom-nav-label::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 0;
        width: 22px;
        height: 3px;
        border-radius: 999px;
        background: var(--accent-green);
        transform: translateX(-50%);
    }

    .bottom-nav-item i {
        font-size: 18px;
    }

    .bottom-nav-live-count {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 5px;
        left: calc(50% + 8px);
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        color: #ffffff;
        background: var(--accent-green);
        border: 2px solid rgba(255, 255, 255, 0.96);
        box-shadow: 0 4px 9px rgba(22, 163, 74, 0.25);
        font-size: 9px;
        transform: translateX(0);
        box-sizing: border-box;
        line-height: 1;
        font-weight: 800;
        letter-spacing: 0;
        white-space: nowrap;
    }

    .bottom-nav-live-count[hidden] {
        display: none !important;
    }

    .dark-mode .bottom-nav-live-count {
        border-color: #0f172a;
    }

    .mobile-calendar-overlay {
        display: block;
        position: fixed;
        inset: 58px 0 60px;
        z-index: 10055;
        background: transparent;
    }

    .mobile-calendar-overlay[hidden],
    .mobile-calendar-panel[hidden] {
        display: none;
    }

    .mobile-calendar-panel {
        display: block;
        position: fixed;
        top: 60px;
        left: 50%;
        width: min(480px, calc(100vw - 44px));
        max-height: calc(100vh - 140px);
        z-index: 10065;
        transform: translateX(-50%);
        overflow: auto;
        background: var(--bg-primary);
        color: var(--text-primary);
        border-radius: 0 0 4px 4px;
        box-shadow: 0 12px 28px rgba(15, 23, 42, 0.22);
        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    .mobile-calendar-content .calendar-widget {
        box-shadow: none;
        border-radius: 0;
        padding: 10px 12px 6px;
        background: var(--bg-primary);
    }

    .mobile-calendar-content .calendar-header {
        margin-bottom: 12px;
        padding: 8px 0;
        background: var(--bg-secondary);
    }

    .mobile-calendar-content .calendar-title #calendarMonth {
        font-size: 18px;
    }

    .mobile-calendar-content .calendar-weekdays {
        font-size: 18px;
        margin-bottom: 12px;
    }

    .mobile-calendar-content .calendar-grid {
        gap: 12px 10px;
    }

    .mobile-calendar-content .calendar-day {
        display: grid;
        place-items: center;
        min-height: 34px;
        padding: 0;
        border-radius: 999px;
        font-size: 19px;
    }

    .mobile-calendar-content .calendar-day.today,
    .mobile-calendar-content .calendar-day.selected {
        width: 54px;
        height: 54px;
        justify-self: center;
    }

    .mobile-calendar-close {
        display: block;
        width: 100%;
        padding: 12px 18px 16px;
        border: 0;
        background: var(--bg-primary);
        color: #651111;
        font-size: 18px;
        font-weight: 700;
        text-align: right;
        cursor: pointer;
    }

    .mobile-more-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 10060;
        background: rgba(2, 6, 23, 0.58);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.22s ease;
    }

    .mobile-more-overlay[hidden] {
        display: none;
    }

    .mobile-more-drawer {
        display: flex;
        flex-direction: column;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: 100vw;
        min-width: 0;
        z-index: 10070;
        max-height: min(82vh, 720px);
        background: #ffffff;
        color: #0f172a;
        border-top-left-radius: 18px;
        border-top-right-radius: 18px;
        box-shadow: 0 -20px 46px rgba(15, 23, 42, 0.18);
        transform: translateY(105%);
        transition: transform 0.26s ease;
        overflow: hidden;
        padding-bottom: env(safe-area-inset-bottom);
        box-sizing: border-box;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    body.mobile-more-open {
        overflow: hidden;
    }

    body.mobile-more-open .mobile-more-overlay {
        opacity: 1;
        pointer-events: auto;
    }

    body.mobile-more-open .mobile-more-drawer {
        transform: translateY(0);
    }

    .mobile-more-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 18px 18px 12px;
        border-bottom: 1px solid rgba(148, 163, 184, 0.18);
    }

    .mobile-more-kicker {
        margin: 0 0 3px;
        color: #64748b;
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

    .mobile-more-header h2 {
        margin: 0;
        font-size: 24px;
        line-height: 1;
        color: #0f172a;
    }

    .mobile-more-close {
        width: 38px;
        height: 38px;
        border: 1px solid rgba(148, 163, 184, 0.28);
        border-radius: 12px;
        background: #f1f5f9;
        color: #334155;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

    .mobile-more-content {
        overflow-y: auto;
        overflow-x: hidden;
        padding: 14px 14px 76px;
        -webkit-overflow-scrolling: touch;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }

    .mobile-more-section {
        margin-bottom: 18px;
        min-width: 0;
        max-width: 100%;
    }

    .mobile-more-section h3 {
        margin: 0 0 9px;
        color: #64748b;
        font-size: 12px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.08em;
    }

    .mobile-more-list,
    .mobile-more-preferences {
        display: grid;
        gap: 8px;
        min-width: 0;
        max-width: 100%;
    }

    .mobile-more-tools {
        gap: 0;
        padding: 4px 0;
        background: transparent;
    }

    .mobile-more-item,
    .mobile-more-tools .menu-dropdown-item {
        min-height: 42px;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 9px 12px;
        border: 0;
        border-radius: 6px;
        background: transparent;
        color: #0f172a;
        text-decoration: none;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.2;
        box-sizing: border-box;
        width: 100%;
    }

    .mobile-more-item i,
    .mobile-more-tools .menu-dropdown-item i {
        width: 16px;
        color: #94a3b8;
        text-align: center;
        margin-right: 6px;
        font-size: 13px;
        flex: 0 0 16px;
    }

    .mobile-more-tools .menu-dropdown-item .nav-tool-crown {
        color: #d4a017;
        filter: drop-shadow(0 1px 3px rgba(245, 158, 11, 0.35));
    }

    .mobile-more-tools .menu-dropdown-item:hover {
        padding-left: 16px;
        background: var(--bg-tertiary, #f1f5f9);
        color: var(--accent-green);
    }

    .mobile-more-tools .menu-dropdown-item:hover .nav-tool-crown {
        color: #e8b923;
    }

    .mobile-more-tools .menu-dropdown-item.tool-nav-disabled,
    .mobile-more-tools .menu-dropdown-item.tool-nav-disabled:hover {
        padding-left: 12px;
        background: transparent;
        color: #64748b;
    }

    .mobile-more-tools .tool-coming-soon-badge {
        padding: 4px 7px;
        font-size: 8px;
    }

    .dark-mode .mobile-more-tools .menu-dropdown-item.tool-nav-disabled,
    .dark-mode .mobile-more-tools .menu-dropdown-item.tool-nav-disabled:hover {
        color: #94a3b8;
    }

    .mobile-vip-link {
        display: inline-flex;
        justify-content: center;
        width: fit-content;
        min-height: 38px;
        margin-top: 2px;
        padding: 8px 14px;
        background: linear-gradient(135deg, #FDE68A 0%, #F59E0B 100%);
        color: #451a03;
        border: 1px solid rgba(253, 230, 138, 0.5);
        box-shadow: 0 4px 12px rgba(245, 158, 11, 0.18);
        font-size: 13px;
        font-weight: 800;
    }

    .mobile-vip-link i {
        color: #451a03;
    }

    .mobile-favorites-link {
        min-height: 36px;
        color: #0f172a;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.3px;
        text-transform: uppercase;
    }

    .mobile-favorites-link i {
        color: #94a3b8;
        font-size: 15px;
    }

    .mobile-favorites-link:hover i {
        color: var(--accent-yellow);
    }

    .mobile-more-count {
        margin-left: auto;
        min-width: 18px;
        height: 18px;
        border-radius: 4px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(15, 23, 42, 0.1);
        color: #0f172a;
        font-size: 12px;
        font-weight: 800;
    }

    .mobile-more-primary {
        background: var(--accent-green);
        color: #fff;
        border-color: var(--accent-green);
    }

    .mobile-login-link {
        width: fit-content;
        min-height: 34px;
        color: #0f172a;
        font-size: 13px;
        font-weight: 600;
        padding-left: 0;
    }

    .mobile-signup-link {
        width: fit-content;
        min-height: 36px;
        border-radius: 4px;
        padding: 8px 14px;
        font-size: 13px;
        font-weight: 700;
    }

    .mobile-more-primary i {
        color: #fff;
    }

    .mobile-more-danger {
        color: #dc2626;
    }

    .mobile-more-select {
        border: 1px solid rgba(148, 163, 184, 0.18);
        border-radius: 8px;
        background: #f8fafc;
        padding: 10px;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        box-sizing: border-box;
    }

    .mobile-more-select > span {
        display: flex;
        align-items: center;
        gap: 10px;
        color: #0f172a;
        font-weight: 700;
        font-size: 13px;
        margin-bottom: 9px;
    }

    .mobile-more-choice-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        min-width: 0;
        max-width: 100%;
    }

    .mobile-language-scroll {
        width: 100%;
        max-width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        margin: 0 -4px;
        padding: 0 4px 4px;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .mobile-language-scroll::-webkit-scrollbar {
        display: none;
    }

    .mobile-more-choice-grid button {
        min-height: 32px;
        border: 1px solid rgba(148, 163, 184, 0.22);
        border-radius: 999px;
        background: #ffffff;
        color: #334155;
        padding: 6px 10px;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
    }

    .mobile-language-scroll button {
        flex: 0 0 auto;
        min-width: max-content;
        scroll-snap-align: start;
        white-space: nowrap;
    }

    .mobile-more-choice-grid button.active {
        background: var(--accent-green);
        border-color: var(--accent-green);
        color: #fff;
    }

    .mobile-theme-toggle {
        justify-content: space-between;
    }

    .mobile-theme-label {
        display: inline-flex;
        align-items: center;
        gap: 12px;
    }

    .mobile-theme-switch {
        position: relative;
        width: 52px;
        height: 30px;
        margin-left: auto;
        flex: 0 0 52px;
    }

    .mobile-theme-switch .toggle-circle {
        width: 24px;
        height: 24px;
    }

    .dark-mode .mobile-bottom-nav {
        background: rgba(15, 23, 42, 0.96);
        border-top-color: rgba(148, 163, 184, 0.22);
    }

    .dark-mode .bottom-nav-item {
        color: #94a3b8;
    }

    .dark-mode .mobile-more-drawer {
        background: #0f172a;
        color: #f8fafc;
        box-shadow: 0 -20px 46px rgba(2, 6, 23, 0.42);
    }

    .dark-mode .mobile-more-header {
        border-bottom-color: rgba(148, 163, 184, 0.18);
    }

    .dark-mode .mobile-more-kicker,
    .dark-mode .mobile-more-section h3 {
        color: #94a3b8;
    }

    .dark-mode .mobile-more-header h2 {
        color: #f8fafc;
    }

    .dark-mode .mobile-more-close {
        background: rgba(148, 163, 184, 0.12);
        color: #e2e8f0;
    }

    .dark-mode .mobile-more-item,
    .dark-mode .mobile-more-tools .menu-dropdown-item,
    .dark-mode .mobile-more-select {
        background: transparent;
        color: #f8fafc;
    }

    .dark-mode .mobile-more-tools .menu-dropdown-item:hover {
        background: #1d2b42;
    }

    .dark-mode .mobile-vip-link {
        background: linear-gradient(135deg, #FDE68A 0%, #F59E0B 100%);
        color: #451a03;
    }

    .dark-mode .mobile-vip-link i {
        color: #451a03;
    }

    .dark-mode .mobile-favorites-link {
        color: #cbd5e1;
    }

    .dark-mode .mobile-login-link {
        color: #cbd5e1;
    }

    .dark-mode .mobile-signup-link {
        background: var(--accent-green);
        color: #fff;
    }

    .dark-mode .mobile-more-select {
        background: #172235;
    }

    .dark-mode .mobile-more-count {
        background: rgba(255, 255, 255, 0.12);
        color: #fff;
    }

    .dark-mode .mobile-more-danger {
        color: #fecaca;
    }

    .dark-mode .mobile-more-select > span {
        color: #f8fafc;
    }

    .dark-mode .mobile-more-choice-grid button {
        background: rgba(15, 23, 42, 0.74);
        color: #cbd5e1;
    }

    .dark-mode .mobile-more-choice-grid button.active {
        background: var(--accent-green);
        border-color: var(--accent-green);
        color: #fff;
    }
}

@media (max-width: 520px) {
    .page-container {
        margin-top: 6px;
    }

    .league-block,
    .country-section,
    .team-section,
    .stats-card,
    .tool-panel,
    .filters-panel,
    .results-panel {
        border-radius: 0;
    }

    .prediction-card,
    .pc-card,
    .fixture-card,
    .match-card,
    .ls-fixture-row,
    .ls-match-row {
        border-left: 0;
        border-right: 0;
    }

    .pc-team-logo,
    .team-logo,
    .fixture-team-logo,
    .ls-team-logo {
        width: 28px !important;
        height: 28px !important;
        flex: 0 0 28px;
    }

    .pc-team-name,
    .fixture-team-name,
    .team-name {
        font-size: 12px;
    }

    .pc-ns-time,
    .pc-score-dash,
    .pc-score,
    .score-main {
        font-size: 18px;
    }

    .pc-minute-label,
    .pc-kickoff,
    .fixture-time,
    .match-time {
        font-size: 11px;
    }

    .pc-prediction-pill,
    .prob-pill,
    .odds-pill {
        font-size: 11px;
        padding-left: 6px;
        padding-right: 6px;
    }

    .league-header,
    .country-header,
    .team-header,
    .tool-header,
    .section-header {
        padding-left: 8px;
        padding-right: 8px;
    }

    .league-name,
    .league-name-link {
        font-size: 11px !important;
    }

    .league-header h1,
    .country-header h1,
    .team-header h1,
    .tool-header h1,
    .section-header h1,
    .match-title,
    .page-title {
        font-size: clamp(18px, 6vw, 24px);
        line-height: 1.15;
        overflow-wrap: anywhere;
    }

    /* PREDICTION CARDS INNER LAYOUT COMPACTION FIXES */
    .prediction-card--match-result .pc-body,
    .prediction-card--over-under .pc-body,
    .prediction-card--btts .pc-body,
    .prediction-card--handicap .pc-body,
    .prediction-card--corners .pc-body,
    .prediction-card--double-chance .pc-body,
    .prediction-card--half-time .pc-body,
    .prediction-card--halfTime-fullTime .pc-body,
    .prediction-card--match-result .pc-form-row,
    .prediction-card--double-chance .pc-form-row,
    .prediction-card--half-time .pc-form-row,
    .prediction-card--halfTime-fullTime .pc-form-row {
        display: grid !important;
        grid-template-columns: 75px 1fr 75px !important;
        column-gap: 0px !important;
        row-gap: 4px !important;
    }

    .prediction-card .pc-form-row > .form-indicators:first-child {
        grid-column: 1;
        justify-self: center !important;
    }

    .prediction-card .pc-form-row > .form-indicators:last-child {
        grid-column: 3;
        justify-self: center !important;
    }

    .prediction-card .pc-logo,
    .prediction-card .pc-team-logo {
        width: 32px !important;
        height: 32px !important;
    }

    .prediction-card .pc-logo-wrapper {
        cursor: pointer !important;
        touch-action: manipulation;
    }

    .prediction-card .pc-name {
        font-size: 11px !important;
        max-width: 75px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        text-align: center !important;
    }

    .prediction-card .pc-probs-row {
        gap: 12px !important;
    }

    .prediction-card .pc-prob {
        width: 50px !important;
        height: 50px !important;
        gap: 2px !important;
    }

    .prediction-card .pc-prob svg {
        width: 50px !important;
        height: 50px !important;
    }

    .prediction-card .pc-percent {
        font-size: 12px !important;
    }

    .prediction-card .pc-odds {
        font-size: 12px !important;
        padding-top: 2px !important;
    }

    .prediction-card .pc-badge,
    .prediction-card .pc-badge.Pc-over {
        font-size: 10px !important;
        line-height: 1.1 !important;
    }

    .prediction-card .form-dot {
        width: 14px !important;
        height: 14px !important;
        padding: 0 !important;
        font-size: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-weight: 700 !important;
    }

    .prediction-card .score-predict {
        padding: 2px 6px !important;
        font-size: 10px !important;
    }

    .prediction-card .home-form,
    .prediction-card .away-form {
        width: 26px !important;
        font-size: 11px !important;
        padding: 2px 0 !important;
    }

    .prediction-card .pc-score {
        font-size: 20px !important;
    }

    .prediction-card .pc-minute {
        font-size: 12px !important;
    }

    .table-card table,
    .table-wrap table,
    .standings-table-wrap table,
    .league-table-wrap table,
    .stats-table-wrap table,
    .responsive-table table {
        min-width: 560px;
    }
}

@media (max-width: 380px) {
    .page-container {
        padding: 0;
    }

    .prediction-tab,
    .market-tab,
    .filter-tab,
    .status-filter,
    .tab-btn,
    .tool-tab {
        min-height: 36px;
        padding-left: 8px !important;
        padding-right: 8px !important;
        font-size: 11px !important;
    }

    .pc-team-logo,
    .team-logo,
    .fixture-team-logo,
    .ls-team-logo {
        width: 24px !important;
        height: 24px !important;
        flex-basis: 24px;
    }

    .pc-team-name,
    .fixture-team-name,
    .team-name {
        font-size: 11px;
    }

    .pc-ns-time,
    .pc-score-dash,
    .pc-score,
    .score-main {
        font-size: 16px;
    }

    .form-indicators .form-dot {
        width: 14px !important;
        height: 14px !important;
        font-size: 7px !important;
    }
}

/* =========================================================
   ULTRA-SMALL SCREENS (e.g., iPhone SE, Galaxy Fold < 350px)
   ========================================================= */
@media (max-width: 350px) {
    .prediction-card--match-result .pc-body,
    .prediction-card--over-under .pc-body,
    .prediction-card--btts .pc-body,
    .prediction-card--handicap .pc-body,
    .prediction-card--corners .pc-body,
    .prediction-card--double-chance .pc-body,
    .prediction-card--half-time .pc-body,
    .prediction-card--halfTime-fullTime .pc-body {
        grid-template-columns: 65px 1fr 65px !important;
    }
}

/* ==========================================================================
   MATCH DETAIL PAGE — MOBILE RESPONSIVE STYLES
   Targets all major content blocks on /matches/<id>/ on screens ≤ 768px.
   Prediction cards are excluded (already handled separately).
   ========================================================================== */

@media (max-width: 768px) {

    /* ── 1. PAGE WRAPPER & BREADCRUMB ───────────────────────────────────── */

    .content.stats-content {
        border-left: 0 !important;
        border-right: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    /* Flatten match-detail shell and top market card on mobile for a seamless breadcrumb join. */
    .stats_parents,
    .stats_parents #stats-market-card,
    .stats_parents #stats-market-card .prediction-card,
    .stats_parents #stats-market-card .pc-card {
        border-radius: 0 !important;
    }

    /* Mobile gets a fresh breadcrumb rail; desktop keeps the original .stats-breadcrumb. */
    .stats_parents {
        overflow: hidden !important;
        width: 100% !important;
        max-width: 100vw;
    }

    .stat_card_header {
        position: relative;
        border-radius: 0 !important;
        overflow: hidden !important;
        display: block !important;
        width: 100% !important;
        max-width: 100vw !important;
        min-width: 0;
        background: var(--bg-primary) !important;
        border-bottom: 1px solid var(--border-color) !important;
    }

    .stats-breadcrumb {
        display: none !important;
    }

    .stats-breadcrumb-scrollbar {
        display: none !important;
    }

    .mobile-match-breadcrumb {
        display: block;
        position: relative;
        width: 100%;
        max-width: 100vw;
        height: 60px;
        background: var(--bg-primary);
        border-radius: 0 !important;
        overflow: hidden;
    }

    .mobile-match-breadcrumb-scroll {
        width: 100%;
        height: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        touch-action: pan-x;
        box-sizing: border-box;
        padding: 0 11px 9px;
        display: flex;
        align-items: center;
    }

    .mobile-match-breadcrumb-scroll::-webkit-scrollbar {
        display: none;
    }

    .mobile-match-breadcrumb-track {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        flex: 0 0 max-content;
        width: max-content;
        max-width: none;
        padding-right: 28px;
        white-space: nowrap;
    }

    .mobile-match-breadcrumb-item {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        flex: 0 0 auto;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.5px;
        line-height: 1;
        text-transform: uppercase;
        text-decoration: none;
        color: var(--text-primary);
    }

    .mobile-match-breadcrumb-league {
        color: var(--text-secondary);
    }

    .mobile-match-breadcrumb-icon {
        font-size: 16px;
        color: var(--text-primary);
    }

    .mobile-match-breadcrumb-sep {
        flex: 0 0 auto;
        font-size: 14px;
        color: var(--text-tertiary);
        opacity: 0.85;
    }

    .mobile-match-breadcrumb-country img {
        width: 20px;
        height: 14px;
        object-fit: cover;
        border-radius: 1px;
        flex: 0 0 auto;
    }

    .mobile-match-breadcrumb-rail {
        display: none;
        position: absolute;
        left: 12px;
        right: 12px;
        bottom: 8px;
        height: 4px;
        border-radius: 999px;
        background: rgba(148, 163, 184, 0.36);
        overflow: hidden;
        pointer-events: none;
    }

    .mobile-match-breadcrumb.has-overflow .mobile-match-breadcrumb-rail {
        display: block;
    }

    .mobile-match-breadcrumb-thumb {
        width: var(--mobile-breadcrumb-thumb-width, 40%);
        height: 100%;
        border-radius: inherit;
        background: rgba(148, 163, 184, 0.9);
        transform: translateX(var(--mobile-breadcrumb-thumb-offset, 0px));
        transition: transform 0.08s linear, width 0.08s linear;
    }

    .mobile-match-breadcrumb::before,
    .mobile-match-breadcrumb::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 18px;
        z-index: 1;
        pointer-events: none;
    }

    .mobile-match-breadcrumb::before {
        left: 0;
        background: linear-gradient(90deg, var(--bg-primary), rgba(255,255,255,0));
    }

    .mobile-match-breadcrumb::after {
        right: 0;
        background: linear-gradient(270deg, var(--bg-primary), rgba(255,255,255,0));
    }

    /* ── 2. MARKET NAV TABS ─────────────────────────────────────────────── */

    .stats-nav-wrapper {
        margin-top: 8px;
        margin-bottom: 6px;
    }

    /* ── 3. MATCH STATS SECTION (ms-card) ──────────────────────────────── */

    .ms-card {
        border-radius: 0 !important;
        border-left: 0;
        border-right: 0;
    }

    .ms-time-tabs,
    .ms-cat-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        display: flex;
        flex-wrap: nowrap;
        gap: 4px;
        padding: 8px 10px 0;
    }

    .ms-time-tabs::-webkit-scrollbar,
    .ms-cat-tabs::-webkit-scrollbar {
        display: none;
    }

    .ms-time-tab,
    .ms-cat-tab {
        flex-shrink: 0;
        font-size: 10px;
        padding: 5px 9px;
        white-space: nowrap;
    }

    .ms-teams-header {
        gap: 6px;
        padding: 10px 8px;
    }

    .ms-team-logo {
        width: 28px;
        height: 28px;
    }

    .ms-team-name {
        font-size: 11px;
    }

    .ms-score {
        font-size: 17px;
    }

    /* ── 4. PREDICTION ENGINE ANALYSIS (PEA) ────────────────────────────── */

    .pea-container {
        padding: 12px;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }

    /* Hero bar — stack confidence ring above stats */
    .pea-hero-bar {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .pea-conf-ring {
        width: 90px;
        height: 90px;
    }

    .pea-conf-svg {
        width: 90px;
        height: 90px;
    }

    .pea-hero-stats {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    .pea-stat-block {
        flex: 0 0 auto;
        min-width: 80px;
    }

    /* Outcome grid — 3 columns stay, but shrink padding */
    .pea-outcome-grid {
        gap: 6px;
    }

    .pea-outcome-card {
        padding: 10px 6px;
    }

    .pea-prob-num {
        font-size: 20px;
    }

    .pea-outcome-label {
        font-size: 10px;
    }

    /* Signal cards — stack to single column */
    .pea-signals-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .pea-signal-card {
        padding: 10px 12px;
        border-radius: 8px;
    }

    .pea-sig-probs {
        gap: 8px;
    }

    .pea-prob-val {
        font-size: 13px;
    }

    /* Footer panel */
    .pea-footer-panel {
        flex-direction: column;
        gap: 10px;
    }

    .pea-quality-tags {
        flex-wrap: wrap;
        gap: 6px;
    }

    /* ── 5. VOTING SYSTEM ───────────────────────────────────────────────── */

    .voting_system {
        margin-top: 12px;
    }

    .vote-slider {
        display: flex;
        flex-wrap: nowrap;
        gap: 10px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 2px;
    }

    .vote-slider::-webkit-scrollbar {
        display: none;
    }

    .vote-block {
        flex: 0 0 100%;
        width: 100%;
        min-width: 100%;
        padding: 12px 10px;
        border-radius: 8px;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .vote-block h3 {
        font-size: 15px;
    }

    .vote-sub {
        font-size: 13px;
        margin-bottom: 10px;
    }

    .vote-btn {
        font-size: 12px;
        padding: 8px 6px;
        border-radius: 24px;
    }

    .vote-btn img {
        height: 18px;
    }

    /* ── 6. H2H CARD ────────────────────────────────────────────────────── */

    .h2h-card {
        margin-top: 12px;
        padding: 12px 10px;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }

    .h2h-title {
        font-size: 15px;
        padding: 10px 0 8px;
        letter-spacing: 1.5px;
    }

    .h2h-team {
        width: 72px;
    }

    .h2h-team img {
        width: 34px;
        height: 34px;
    }

    .h2h-team strong {
        font-size: 11px;
    }

    .h2h-goals-num {
        font-size: 15px;
    }

    /* Grid: 3 boxes in a row → wrap to 2 columns */
    .h2h-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }

    /* Bottom row: two side-by-side cards → stack vertically */
    .h2h-bottom-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    /* ── 7. LAST 6 MATCHES ROW ──────────────────────────────────────────── */

    /* Stack home/away last-6 cards vertically */
    .last6-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .last6-card {
        border-radius: 8px;
    }

    .last6-team-name {
        font-size: 12px;
    }

    /* Match rows inside last6 — tighten date column */
    .last6-list-inner .pm-row {
        grid-template-columns: 34px 1fr 52px 1fr 44px;
        gap: 3px;
    }

    /* ── 8. PERFORMANCE COMPARISON ──────────────────────────────────────── */

    /* Two-column perf comparison → single column */
    .perf-comparison-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .perf-card {
        border-radius: 8px;
    }

    .perf-card-header {
        padding: 10px 12px;
    }

    .perf-logo {
        width: 40px;
        height: 40px;
    }

    .perf-team-name {
        font-size: 13px;
    }

    /* ── 9. FORM EDGE ANALYSIS (FEA) ────────────────────────────────────── */

    .fea-card {
        padding: 12px 10px;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }

    .fea-logo-wrap {
        width: 60px;
        height: 60px;
    }

    .fea-logo {
        width: 44px;
        height: 44px;
    }

    .fea-ppg-badge {
        font-size: 12px;
        padding: 3px 8px;
        min-width: 48px;
    }

    /* Match lists: 3-col grid → 2-col side-by-side */
    .fea-matches-row {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    /* Stack TRENDS section vertically on mobile */
    .trends-row {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    #fea-home-matches {
        grid-column: 1;
    }

    #fea-away-matches {
        grid-column: 2;
    }

    /* Compress match row typography and spacing to fit two columns comfortably on narrow screens */
    .fea-match-row {
        font-size: 10px !important;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
        gap: 4px !important;
        padding: 4px 0 !important;
    }

    .fea-team-home,
    .fea-team-away {
        min-width: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .fea-score-badge {
        font-size: 10px !important;
        padding: 2px 4px !important;
        min-width: 32px !important;
        white-space: nowrap !important;
    }

    .fea-match-tabs {
        gap: 4px !important;
    }

    .fea-tab {
        font-size: 9px !important;
        padding: 3px 6px !important;
    }

    .fea-page-btn {
        font-size: 10px !important;
        padding: 3px 6px !important;
    }

    .fea-match-list {
        max-width: 100%;
    }

    /* ── 10. OVER/UNDER CARD ────────────────────────────────────────────── */

    .ou-card {
        padding: 12px 10px;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }

    .ou-gauge-row {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .ou-gauge-meta {
        text-align: center;
        max-width: 100%;
    }

    .ou-gauge {
        width: 90px;
        height: 90px;
    }

    /* Two team cards → stack */
    .ou-teams-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .ou-verdict {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .ou-verdict-badge {
        align-self: flex-start;
    }

    /* ── 11. BTTS TRACKER ───────────────────────────────────────────────── */

    .btts-card {
        padding: 14px 10px 0;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }

    .btts-hero {
        flex-direction: column;
        align-items: center;
        gap: 12px;
        text-align: center;
    }

    .btts-gauge {
        width: 80px;
        height: 80px;
    }

    .btts-hero-meta {
        align-items: center;
    }

    /* ── 12. STANDINGS CARD ─────────────────────────────────────────────── */

    .standings-card {
        border-radius: 0;
        border-left: 0;
        border-right: 0;
        overflow-x: hidden;
    }

    .standings-title {
        font-size: 15px;
        letter-spacing: 1px;
        padding: 10px 0 4px;
    }

    .standings-tabs {
        padding: 8px 10px 0;
        gap: 0;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .standings-tabs::-webkit-scrollbar {
        display: none;
    }

    .standings-tab {
        padding: 6px 12px;
        font-size: 11px;
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Table scrolls horizontally without breaking layout */
    .standings-table-wrap {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        position: relative;
        max-width: 100%;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -ms-overflow-style: none;
        touch-action: pan-x pan-y;
    }

    .standings-table-wrap::-webkit-scrollbar {
        display: none;
    }

    .standings-group-panel {
        overflow-x: hidden;
    }

    .standings-table {
        min-width: 560px;
        border-collapse: separate;
        border-spacing: 0;
    }

    .standings-table th,
    .standings-table td {
        padding: 7px 6px;
        font-size: 11px;
    }

    /* Keep # and TEAM visible while numeric stats scroll horizontally. */
    .standings-table th.col-rank,
    .standings-table td.col-rank {
        position: sticky;
        left: 0;
        z-index: 8;
        isolation: isolate;
        min-width: 38px;
        width: 38px;
        background: var(--bg-secondary);
        background-clip: padding-box;
    }

    .standings-table th.col-team,
    .standings-table td.col-team {
        position: sticky;
        left: 38px;
        z-index: 7;
        isolation: isolate;
        min-width: 126px;
        max-width: 126px;
        background: var(--bg-secondary);
        background-clip: padding-box;
        border-right: 0 !important;
    }

    /* Mask the moving columns edge so no scroll bleed enters sticky area. */
    .standings-table th.col-team::after,
    .standings-table td.col-team::after {
        content: "";
        position: absolute;
        top: 0;
        right: -1px;
        width: 3px;
        height: 100%;
        background: inherit;
        pointer-events: none;
        z-index: 12;
    }

    .standings-table thead th.col-rank,
    .standings-table thead th.col-team {
        z-index: 10;
    }

    .standings-table tbody tr.highlight-home td.col-rank,
    .standings-table tbody tr.highlight-home td.col-team {
        background: #dcfce7;
    }

    .standings-table tbody tr.highlight-away td.col-rank,
    .standings-table tbody tr.highlight-away td.col-team {
        background: #fee2e2;
    }

    .team-name-standing {
        max-width: 80px;
        font-size: 11px;
    }

    /* ── 13. PAST MEETINGS CARD ─────────────────────────────────────────── */

    .past-meetings-card {
        padding: 10px;
        border-radius: 8px;
    }

    .pm-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .pm-row {
        grid-template-columns: 32px 1fr 48px 1fr 42px;
        gap: 3px;
    }

    /* ── 14. MATCH INTRO CARD ───────────────────────────────────────────── */

    .match-intro-card {
        padding: 12px 10px;
        border-radius: 8px;
    }

    .match-intro-body p {
        font-size: 12px;
    }

    /* ── 15. INJURY CARD ────────────────────────────────────────────────── */

    .injury-card {
        margin-top: 12px;
        padding: 14px 10px;
        border-radius: 0;
        border-left: 0;
        border-right: 0;
    }

    .injury-title {
        font-size: 15px;
        letter-spacing: 1.5px;
    }

    .injury-tabs {
        overflow-x: auto;
        scrollbar-width: none;
        flex-wrap: nowrap;
        padding-bottom: 2px;
    }

    .injury-tabs::-webkit-scrollbar {
        display: none;
    }

    .injury-tab-btn {
        flex-shrink: 0;
        font-size: 12px;
        padding: 6px 14px;
    }

    /* Injury table: allow horizontal scroll, no layout break */
    .injury-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .injury-table {
        min-width: 340px;
        font-size: 12px;
    }

    .injury-table th {
        padding: 8px 8px;
        font-size: 11px;
    }

    .injury-row td {
        padding: 10px 8px;
        font-size: 12px;
    }

    .inj-player-photo,
    .inj-player-photo-placeholder {
        width: 24px;
        height: 24px;
    }

    /* ── 16. LEAGUE LEADERS CARD ────────────────────────────────────────── */

    .standings-title-block {
        overflow: hidden;
    }

    /* ── 17. BTTS BLOCK WITHIN STATS ────────────────────────────────────── */

    .btts-block {
        padding: 10px;
    }

    /* ── 18. PREDICTION CARD ODDS BOXES ─────────────────────────────────── */
    .prediction-card .pc-badge {
        font-weight: 700 !important;
        font-size: 12px !important;
        background: none !important;
        border: none !important;
        padding: 0 !important;
        line-height: 1 !important;
        display: block !important;
        text-align: center !important;
        width: 50px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .prediction-card .pc-odds {
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 4px 0 !important;
        width: 56px !important;     /* Equal compact width, with room for trend arrows */
        margin-left: auto !important;
        margin-right: auto !important;
        border: 1px solid var(--border-color);
        border-radius: 6px;
        background: var(--bg-primary); 
        font-weight: 600 !important;
        font-size: 12px !important;
        margin-top: 2px !important; /* Overrides default negative margins */
        line-height: 1;
        box-shadow: 0 1px 2px rgba(0,0,0,0.02);
        box-sizing: border-box !important;
    }

    /* ── 18b. MATCH RESULT & DOUBLE CHANCE: Vertically center badge between circle and box ── */
    .prediction-card--match-result .pc-badge,
    .prediction-card--double-chance .pc-badge {
        position: relative !important;
        top: 4px !important;
    }

    /* ── 18a. OVER/UNDER CARD: badge sits inside pc-prob, needs auto width ── */
    .prediction-card--over-under .pc-badge {
        width: auto !important;
        white-space: nowrap !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-align: center !important;
    }

    /* ── 19. STATS ICON ─────────────────────────────────────────────── */
    .prediction-card .stats {
        position: absolute !important;
        top: 7px !important;
        right: 12px !important;
        width: 30px !important;
        height: 30px !important;
        border-radius: 50% !important;
        background: var(--surface-card, #fff) !important;
        border: 1px solid var(--border-color) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        box-shadow: 0 2px 6px rgba(0,0,0,0.06) !important;
        z-index: 2;
    }

    .prediction-card .stats a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        height: 100% !important;
        color: var(--text-secondary) !important;
        font-size: 12px !important;
        text-decoration: none !important;
    }

    .prediction-card .stats:active {
        transform: scale(0.92);
        background: var(--bg-secondary) !important;
    }

} /* end @media (max-width: 768px) */

/* Ensure the rebuilt mobile breadcrumb is used across the full phone/foldable/tablet-mobile range. */
@media (max-width: 1024px) {
    .stat_card_header {
        position: relative;
        overflow: hidden !important;
        display: block !important;
    }

    .stat_card_header > .stats-breadcrumb,
    .stat_card_header > .stats-breadcrumb-scrollbar {
        display: none !important;
    }

    .stat_card_header > .mobile-match-breadcrumb {
        display: block !important;
        position: relative;
        width: 100%;
        max-width: 100vw;
        height: 60px;
        overflow: hidden;
    }

    .mobile-match-breadcrumb-scroll {
        width: 100%;
        height: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        touch-action: pan-x;
        box-sizing: border-box;
        padding: 0 11px 9px;
        display: flex;
        align-items: center;
    }

    .mobile-match-breadcrumb-scroll::-webkit-scrollbar {
        display: none;
    }

    .mobile-match-breadcrumb-track {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        flex: 0 0 max-content;
        width: max-content;
        max-width: none;
        padding-right: 28px;
        white-space: nowrap;
    }

    .mobile-match-breadcrumb-item {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        flex: 0 0 auto;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.5px;
        line-height: 1;
        text-transform: uppercase;
        text-decoration: none;
        color: var(--text-primary);
    }

    .mobile-match-breadcrumb-league {
        color: var(--text-secondary);
    }

    .mobile-match-breadcrumb-icon {
        font-size: 16px;
        color: var(--text-primary);
    }

    .mobile-match-breadcrumb-sep {
        flex: 0 0 auto;
        font-size: 14px;
        color: var(--text-tertiary);
        opacity: 0.85;
    }

    .mobile-match-breadcrumb-country img {
        width: 20px;
        height: 14px;
        object-fit: cover;
        border-radius: 1px;
        flex: 0 0 auto;
    }

    .mobile-match-breadcrumb-rail {
        display: none;
        position: absolute;
        left: 12px;
        right: 12px;
        bottom: 8px;
        height: 4px;
        border-radius: 999px;
        background: rgba(148, 163, 184, 0.36);
        overflow: hidden;
        pointer-events: none;
    }

    .mobile-match-breadcrumb.has-overflow .mobile-match-breadcrumb-rail {
        display: block;
    }

    .mobile-match-breadcrumb-thumb {
        width: var(--mobile-breadcrumb-thumb-width, 40%);
        height: 100%;
        border-radius: inherit;
        background: rgba(148, 163, 184, 0.9);
        transform: translateX(var(--mobile-breadcrumb-thumb-offset, 0px));
        transition: transform 0.08s linear, width 0.08s linear;
    }
}


/* ==========================================================================
   MATCH DETAIL — NARROW SCREENS (≤ 480px)
   Further compaction for phone-sized viewports
   ========================================================================== */

@media (max-width: 480px) {

    /* PEA outcome grid → 3 cards remain in row but very compact */
    .pea-outcome-card {
        padding: 8px 4px;
    }

    .pea-outcome-badge {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }

    .pea-prob-num {
        font-size: 18px;
    }

    .pea-outcome-label {
        font-size: 9px;
        letter-spacing: 0;
    }

    .pea-outcome-bar-bg {
        height: 4px;
        border-radius: 2px;
    }

    /* H2H grid → 2 cols still, but smaller padding */
    .h2h-grid .box {
        padding: 6px 8px;
    }

    .h2h-grid .box b {
        font-size: 16px;
    }

    /* Standings table horizontal scroll with compacted columns */
    .standings-table {
        min-width: 520px;
    }

    .standings-table th,
    .standings-table td {
        padding: 6px 4px;
        font-size: 10px;
    }

    .team-name-standing {
        max-width: 70px;
        font-size: 10px;
    }

    .team-logo-sm {
        width: 16px;
        height: 16px;
    }

    /* Voting */
    .vote-block h3 {
        font-size: 14px;
    }

    .vote-sub {
        font-size: 12px;
        margin-bottom: 8px;
    }

    /* FEA logo wrap */
    .fea-logo-wrap {
        width: 52px;
        height: 52px;
    }

    .fea-logo {
        width: 38px;
        height: 38px;
    }

    /* Past meetings rows */
    .pm-row {
        grid-template-columns: 28px 1fr 44px 1fr 36px;
    }

    .pm-date {
        font-size: 9px;
    }

    .pm-home-name,
    .pm-away-name {
        font-size: 10px;
    }

    .pm-score {
        font-size: 10px;
    }

} /* end @media (max-width: 480px) */

/* ==========================================================================
   HOME FEED MOBILE ACCORDION CARDS
   Keep fixture cards flush with the league accordion edges on the home page.
   ========================================================================== */

@media (max-width: 768px) {
    .home-content {
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow: visible !important;
    }

    .home-content #leagues-root,
    .home-content .league,
    .home-content .league-content {
        width: 100% !important;
        max-width: 100% !important;
    }

    .home-content .league {
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 10px !important;
        border-left: 0 !important;
        border-right: 0 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
    }

    .home-content .league-header {
        border-radius: 0 !important;
    }

    .home-content .league-content {
        padding: 0 !important;
        margin: 0 !important;
    }

    .home-content .league-content .prediction-card,
    .home-content .league-content .pc-card,
    .home-content .league-content .fixture-card,
    .home-content .league-content .match-card {
        width: 100% !important;
        max-width: none !important;
        margin: 0 0 8px !important;
        border-radius: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
        box-shadow: none !important;
    }

    .home-content .league-content .prediction-card:last-child,
    .home-content .league-content .pc-card:last-child,
    .home-content .league-content .fixture-card:last-child,
    .home-content .league-content .match-card:last-child {
        margin-bottom: 0 !important;
    }
}

@media (max-width: 768px) {
    /* =============================================
       MOBILE LINEUPS — both teams on one vertical pitch
       ============================================== */
    .msp-desktop-lineup {
        display: none !important;
    }

    .msp-mobile-lineup {
        display: block !important;
    }

    .msp-pitch--mobile-shared .msp-photo-wrap,
    .msp-pitch--mobile-shared .msp-photo,
    .msp-pitch--mobile-shared .msp-photo-fallback {
        width: 36px !important;
        height: 36px !important;
    }

    .msp-pitch--mobile-shared .msp-player {
        gap: 5px !important;
    }

    .msp-pitch--mobile-shared .msp-name {
        font-size: 10px !important;
        max-width: 100% !important;
        margin-top: 5px !important;
    }

    .msp-pitch--mobile-shared .msp-rating {
        font-size: 9px !important;
        padding: 1px 5px !important;
        bottom: -4px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    .msp-grid-row {
        gap: 6px 5px !important;
    }

    .msp-half--home .msp-grid-rows {
        justify-content: space-between;
    }

    .msp-half--away .msp-grid-rows {
        justify-content: space-between;
    }

    .msp-pitch--mobile-shared .player-stat-popup--pitch-centered {
        width: min(240px, calc(100% - 16px)) !important;
        max-height: min(340px, 72%) !important;
    }

    /* ===== MOBILE UI REFINEMENTS (Font, Padding, Radius) ===== */
    /* Category and Market tabs */
    .pm-tab, .prediction-tab, .market-tab, .ms-cat-tab {
        font-size: 11px !important;
        font-weight: 500 !important;
        padding: 6px 12px !important;
        border-radius: 6px !important; /* Less circled */
        min-height: auto !important;
    }

    /* Time tabs (TOTAL, 1ST HALF, 2ND HALF) */
    .ms-time-tab {
        font-size: 11px !important;
        font-weight: 600 !important;
        padding: 8px 0 !important;
    }

    /* Section headers (MATCH STATISTICS, HEAD TO HEAD, etc.) */
    .standings-title, .h2h-title {
        font-size: 15px !important;
        font-weight: 700 !important;
        letter-spacing: 0.5px !important;
        padding: 8px 0 2px !important;
    }
}

/* ==========================================================================
   Match Detail Stats - restored mobile component layer
   These selectors match the current stats-page markup and load after page CSS.
   ========================================================================== */

@media (max-width: 768px) {
    .content.stats-content .prediction-card .pc-minute-label.label-live {
        color: #e11d48 !important;
    }

    .content.stats-content .ou-premium-card,
    .content.stats-content .btts-card,
    .content.stats-content .mtr-card,
    .content.stats-content .corner-matrix-card {
        border-left: 0 !important;
        border-right: 0 !important;
        border-radius: 0 !important;
        margin-left: -10px !important;
        margin-right: -10px !important;
        width: calc(100% + 20px) !important;
        max-width: calc(100% + 20px) !important;
        box-sizing: border-box !important;
    }

    .content.stats-content .ou-premium-card,
    .content.stats-content .mtr-card {
        padding: 14px 10px !important;
    }

    .content.stats-content .btts-card {
        padding: 14px 10px 0 !important;
    }

    .content.stats-content .corner-matrix-card {
        padding: 12px 10px !important;
    }

    .content.stats-content .ou-line-tabs,
    .content.stats-content .btts-period-tabs {
        display: flex !important;
        gap: 6px !important;
        overflow-x: auto !important;
        padding-bottom: 4px !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .content.stats-content .ou-line-tabs::-webkit-scrollbar,
    .content.stats-content .btts-period-tabs::-webkit-scrollbar {
        display: none !important;
    }

    .content.stats-content .ou-line-tab,
    .content.stats-content .btts-tab {
        flex: 0 0 auto !important;
        font-size: 11px !important;
        padding: 6px 12px !important;
        border-radius: 999px !important;
        white-space: nowrap !important;
    }

    .content.stats-content .ou-gauge-row,
    .content.stats-content .btts-hero,
    .content.stats-content .mtr-hero,
    .content.stats-content .mtr-radar-wrap {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 12px !important;
    }

    .content.stats-content .ou-gauge,
    .content.stats-content .btts-gauge {
        width: 84px !important;
        height: 84px !important;
    }

    .content.stats-content .ou-gauge-meta,
    .content.stats-content .btts-hero-meta {
        align-items: center !important;
        max-width: 100% !important;
        text-align: center !important;
    }

    .content.stats-content .ou-teams-grid,
    .content.stats-content .mtr-sides,
    .content.stats-content .mtr-breakdown-grid,
    .content.stats-content .corner-matrix-summary {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .content.stats-content .btts-team-row,
    .content.stats-content .btts-timeline-row,
    .content.stats-content .btts-signal-row {
        align-items: flex-start !important;
        gap: 8px !important;
    }

    .content.stats-content .btts-team-info,
    .content.stats-content .btts-signal-meta {
        width: 86px !important;
        flex-shrink: 0 !important;
    }

    .content.stats-content .btts-tl-name {
        width: 56px !important;
    }

    .content.stats-content .btts-dot {
        width: 26px !important;
        height: 26px !important;
        font-size: 8px !important;
    }

    .content.stats-content .btts-signals-block,
    .content.stats-content .btts-timeline-wrap,
    .content.stats-content .corner-matrix-copy {
        padding: 10px !important;
        border-radius: 8px !important;
    }

    .content.stats-content .corner-matrix-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    .content.stats-content .corner-matrix-metric {
        padding: 10px !important;
    }

    .content.stats-content .corner-matrix-table {
        min-width: 680px !important;
        font-size: 11px !important;
    }

    .content.stats-content .corner-matrix-scroll {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .content.stats-content .ou-verdict,
    .content.stats-content .ou-verdict-banner,
    .content.stats-content .btts-verdict-footer,
    .content.stats-content .mtr-verdict,
    .content.stats-content .fhg-verdict,
    .content.stats-content .shg-verdict,
    .content.stats-content .corner-matrix-verdict {
        background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%) !important;
        border: 1px solid rgba(148, 163, 184, 0.18) !important;
        border-radius: 8px !important;
        padding: 10px 12px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        color: #94a3b8 !important;
    }

    .content.stats-content .ou-verdict-text,
    .content.stats-content .btts-verdict-label,
    .content.stats-content .mtr-verdict-text,
    .content.stats-content .fhg-verdict-text,
    .content.stats-content .shg-verdict-text,
    .content.stats-content .corner-matrix-verdict-text {
        width: 100% !important;
        font-size: 12px !important;
        line-height: 1.5 !important;
        color: #cbd5e1 !important;
    }

    .content.stats-content .ou-verdict-text strong:not([style]),
    .content.stats-content .btts-verdict-label strong:not([style]),
    .content.stats-content .mtr-verdict-text strong:not([style]),
    .content.stats-content .fhg-verdict-text strong:not([style]),
    .content.stats-content .shg-verdict-text strong:not([style]),
    .content.stats-content .corner-matrix-verdict-text strong:not([style]) {
        color: #ffffff !important;
        font-weight: 900 !important;
    }

    .content.stats-content .ou-verdict-badge,
    .content.stats-content .btts-verdict-badge,
    .content.stats-content .mtr-verdict-badge,
    .content.stats-content .fhg-verdict-badge,
    .content.stats-content .shg-verdict-badge,
    .content.stats-content .corner-matrix-verdict-badge {
        align-self: flex-start !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 7px 10px !important;
        border-radius: 6px !important;
        font-size: 11px !important;
        font-weight: 900 !important;
        white-space: normal !important;
        text-align: left !important;
        color: #ffffff !important;
    }

    .content.stats-content .ou-badge-over,
    .content.stats-content .fhg-badge-over,
    .content.stats-content .shg-badge-over {
        background: #f97316 !important;
    }

    .content.stats-content .ou-badge-under,
    .content.stats-content .fhg-badge-under,
    .content.stats-content .shg-badge-under {
        background: #64748b !important;
    }

    .content.stats-content .btts-badge-yes {
        background: #16a34a !important;
    }

    .content.stats-content .btts-badge-lean-yes {
        background: #84cc16 !important;
        color: #1a2e05 !important;
    }

    .content.stats-content .btts-badge-lean-no {
        background: #f59e0b !important;
        color: #451a03 !important;
    }

    .content.stats-content .btts-badge-no {
        background: #c0152a !important;
    }
}

/* Match detail stats blocks should mirror the Second Half Goal Probability card
   on mobile: same width, padding, internal verdict rhythm, and no edge drift. */
@media (max-width: 768px) {
    .content.stats-content .ou-premium-card,
    .content.stats-content .btts-card,
    .content.stats-content .mtr-card,
    .content.stats-content .corner-matrix-card,
    .content.stats-content .perf-comparison-row {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
        background: var(--bg-primary) !important;
        border: 1px solid var(--border-color) !important;
        border-radius: 0 0 12px 12px !important;
        padding: 16px !important;
        overflow: hidden !important;
    }

    .content.stats-content .perf-comparison-row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    .content.stats-content .perf-card {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    .content.stats-content .btts-card {
        padding-bottom: 16px !important;
    }

    .content.stats-content .corner-matrix-card {
        margin-top: 0 !important;
    }

    .content.stats-content .ou-insight,
    .content.stats-content .fhg-insight,
    .content.stats-content .shg-insight {
        padding: 7px 12px !important;
        border-radius: 6px !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        text-align: center !important;
        margin-bottom: 12px !important;
        min-height: 28px !important;
    }

    .content.stats-content .ou-verdict,
    .content.stats-content .ou-verdict-banner,
    .content.stats-content .btts-verdict-footer,
    .content.stats-content .mtr-verdict,
    .content.stats-content .corner-matrix-verdict {
        margin: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%) !important;
        border: 0 !important;
        border-radius: 8px !important;
        padding: 10px 14px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 10px !important;
    }

    .content.stats-content .ou-verdict-text,
    .content.stats-content .btts-verdict-label,
    .content.stats-content .mtr-verdict-text,
    .content.stats-content .corner-matrix-verdict-text {
        width: 100% !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        line-height: 1.5 !important;
        color: #94a3b8 !important;
    }

    .content.stats-content .ou-verdict-badge,
    .content.stats-content .btts-verdict-badge,
    .content.stats-content .mtr-verdict-badge,
    .content.stats-content .corner-matrix-verdict-badge {
        align-self: flex-start !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 6px 14px !important;
        border-radius: 6px !important;
        font-size: 13px !important;
        font-weight: 800 !important;
        line-height: 1.25 !important;
        white-space: normal !important;
        text-align: left !important;
    }

    .content.stats-content .btts-hero {
        padding-bottom: 16px !important;
        margin-bottom: 16px !important;
    }

    .content.stats-content .btts-verdict-footer {
        margin-top: 14px !important;
    }

    .content.stats-content .mtr-verdict {
        margin-top: 12px !important;
    }

    .content.stats-content .corner-matrix-verdict {
        margin-top: 12px !important;
    }
}

/* ==========================================================================
   MATCH DETAIL PAGE - NARROW MOBILE FIT
   Keeps prediction, statistics, and analysis blocks usable on 195-320px
   viewports without allowing fixed-width children to escape the page.
   ========================================================================== */
@media (max-width: 320px) {
    .site-navbar,
    .site-navbar .nav-top,
    .site-navbar .nav-top-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .site-navbar .nav-top-container {
        min-height: 58px !important;
        padding: 8px 6px !important;
        column-gap: 4px !important;
    }

    .site-navbar .mobile-logo {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: calc(100% - 78px) !important;
        height: 32px !important;
        margin-left: -8px !important;
        margin-right: auto !important;
    }

    .site-navbar .nav-top .mobile-logo .logo-icon {
        height: 64px !important;
        max-width: 122px !important;
    }

    .site-navbar .mobile-logo-text {
        margin-left: -78px !important;
        font-size: 15px !important;
        letter-spacing: -0.35px !important;
        white-space: nowrap;
    }

    .site-navbar .nav-top-left {
        margin-left: 0 !important;
        margin-right: 0 !important;
        flex: 0 0 32px !important;
    }

    .site-navbar .search-wrapper,
    .site-navbar .search-pill {
        width: 32px !important;
        height: 32px !important;
    }

    .site-navbar .search-icon {
        font-size: 15px !important;
    }

    .site-navbar .mobile-more-top-toggle {
        width: 40px !important;
        height: 40px !important;
        flex: 0 0 40px !important;
        border-radius: 11px !important;
        font-size: 17px !important;
    }

    .site-navbar .nav-separator {
        margin: 0 !important;
    }

    .mobile-bottom-nav {
        height: 54px !important;
    }

    .bottom-nav-item {
        min-width: 0 !important;
        gap: 3px !important;
        font-size: 8px !important;
    }

    .bottom-nav-item i {
        font-size: 17px !important;
    }

    .bottom-nav-label {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .content.stats-content .mobile-match-breadcrumb {
        height: 56px;
    }

    .content.stats-content .mobile-match-breadcrumb-scroll {
        padding: 0 8px 8px;
    }

    .content.stats-content .mobile-match-breadcrumb-track {
        gap: 8px;
        padding-right: 18px;
    }

    .content.stats-content .mobile-match-breadcrumb-item {
        gap: 4px;
        font-size: 11px;
        letter-spacing: 0.3px;
    }

    .content.stats-content .mobile-match-breadcrumb-icon,
    .content.stats-content .mobile-match-breadcrumb-sep {
        font-size: 13px;
    }

    .content.stats-content .mobile-match-breadcrumb-country img {
        width: 17px;
        height: 12px;
    }

    .content.stats-content,
    .content.stats-content .stats_parents,
    .content.stats-content #stats-market-container,
    .content.stats-content #stats-market-card,
    .content.stats-content #match-stats-section,
    .content.stats-content .ms-card,
    .content.stats-content .pea-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .content.stats-content .standings-title {
        padding-inline: 6px !important;
        font-size: 14px !important;
        overflow-wrap: anywhere;
    }

    .content.stats-content .prediction-card,
    .content.stats-content .pc-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .content.stats-content .prediction-card .pc-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 4px !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .content.stats-content .prediction-card .pc-kickoff {
        display: inline-flex !important;
        align-items: center !important;
        min-width: 0 !important;
        gap: 2px !important;
    }

    .content.stats-content .prediction-card .pc-date-text {
        min-width: 0 !important;
        font-size: 11px !important;
        white-space: nowrap !important;
    }

    .content.stats-content .prediction-card .pc-sep {
        margin-inline: 2px !important;
        font-size: 10px !important;
    }

    .content.stats-content .prediction-card .fav-btn {
        flex: 0 0 auto !important;
        padding: 1px !important;
        font-size: 13px !important;
    }

    .content.stats-content .prediction-card .pc-finished-kickoff {
        min-width: 0 !important;
        margin-left: 0 !important;
        gap: 3px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
    }

    .content.stats-content .prediction-card .pc-finished-kickoff i {
        font-size: 10px !important;
    }

    .content.stats-content .prediction-card .team-card-fav {
        width: 13px !important;
        height: 13px !important;
    }

    .content.stats-content .prediction-card .team-card-fav i {
        font-size: 6px !important;
    }

    .content.stats-content .prediction-card--match-result .pc-body,
    .content.stats-content .prediction-card--over-under .pc-body,
    .content.stats-content .prediction-card--btts .pc-body,
    .content.stats-content .prediction-card--handicap .pc-body,
    .content.stats-content .prediction-card--corners .pc-body,
    .content.stats-content .prediction-card--double-chance .pc-body,
    .content.stats-content .prediction-card--half-time .pc-body,
    .content.stats-content .prediction-card--halfTime-fullTime .pc-body,
    .content.stats-content .prediction-card--match-result .pc-form-row,
    .content.stats-content .prediction-card--double-chance .pc-form-row,
    .content.stats-content .prediction-card--half-time .pc-form-row,
    .content.stats-content .prediction-card--halfTime-fullTime .pc-form-row {
        grid-template-columns: minmax(0, 1fr) minmax(46px, 0.82fr) minmax(0, 1fr) !important;
        column-gap: 2px !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .content.stats-content .prediction-card .pc-team,
    .content.stats-content .prediction-card .pc-center,
    .content.stats-content .prediction-card .pc-score-block,
    .content.stats-content .prediction-card .pc-logo-wrapper,
    .content.stats-content .prediction-card .form-indicators {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .content.stats-content .prediction-card .pc-logo,
    .content.stats-content .prediction-card .pc-team-logo {
        width: 28px !important;
        height: 28px !important;
    }

    .content.stats-content .prediction-card .pc-name {
        width: 100% !important;
        max-width: 100% !important;
        padding-inline: 2px;
        font-size: 9px !important;
        line-height: 1.15 !important;
    }

    .content.stats-content .prediction-card .pc-score-block {
        width: 100% !important;
    }

    .content.stats-content .prediction-card .pc-score {
        font-size: 18px !important;
        white-space: nowrap !important;
    }

    .content.stats-content .prediction-card .score-sep {
        margin-inline: 2px !important;
    }

    .content.stats-content .prediction-card .pc-minute,
    .content.stats-content .prediction-card .pc-minute-label {
        font-size: 10px !important;
        line-height: 1.15 !important;
        white-space: normal !important;
        text-align: center !important;
    }

    .content.stats-content .prediction-card .pc-prob,
    .content.stats-content .prediction-card .pc-prob svg {
        width: 42px !important;
        height: 42px !important;
    }

    .content.stats-content .prediction-card .pc-percent,
    .content.stats-content .prediction-card .pc-odds {
        font-size: 10px !important;
    }

    .content.stats-content .prediction-card .pc-odds {
        max-width: 100% !important;
        min-width: 0 !important;
        padding-inline: 3px !important;
        box-sizing: border-box !important;
    }

    .content.stats-content .prediction-card .pc-badge,
    .content.stats-content .prediction-card .pc-badge.Pc-over {
        max-width: 100% !important;
        font-size: 8px !important;
        white-space: normal !important;
        text-align: center !important;
    }

    .content.stats-content .prediction-card .form-indicators {
        gap: 1px !important;
    }

    .content.stats-content .prediction-card .form-dot,
    .content.stats-content .form-indicators .form-dot {
        width: 11px !important;
        height: 11px !important;
        flex: 0 0 11px !important;
        font-size: 6px !important;
    }

    .content.stats-content .prediction-card .form-score-predict-row {
        width: 100% !important;
        min-width: 0 !important;
        gap: 2px !important;
    }

    .content.stats-content .prediction-card .score-predict {
        min-width: 0 !important;
        max-width: calc(100% - 50px) !important;
        padding: 2px 4px !important;
        font-size: 8px !important;
        line-height: 1.2 !important;
        overflow-wrap: anywhere;
    }

    .content.stats-content .prediction-card .home-form,
    .content.stats-content .prediction-card .away-form {
        width: 23px !important;
        flex: 0 0 23px !important;
        font-size: 9px !important;
    }

    .content.stats-content .prediction-card .pc-prediction-pill {
        max-width: calc(100% - 12px) !important;
        overflow-wrap: anywhere;
        text-align: center !important;
    }

    .content.stats-content .stats-nav-wrapper,
    .content.stats-content #stats-prediction-types {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .content.stats-content #stats-prediction-types {
        overflow-x: auto !important;
        scrollbar-width: none;
    }

    .content.stats-content #stats-prediction-types::-webkit-scrollbar {
        display: none;
    }

    .content.stats-content #stats-prediction-types .prediction-tab {
        flex: 0 0 auto !important;
        padding: 6px 8px !important;
        font-size: 9px !important;
        white-space: nowrap !important;
    }

    .content.stats-content .ms-time-tabs {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 0 !important;
        padding: 6px 4px 0 !important;
        overflow: hidden !important;
    }

    .content.stats-content .ms-time-tab {
        width: 100% !important;
        min-width: 0 !important;
        padding: 7px 1px !important;
        font-size: 9px !important;
        line-height: 1.1 !important;
        white-space: normal !important;
    }

    .content.stats-content .ms-cat-tabs {
        gap: 3px !important;
        padding: 6px 6px 0 !important;
    }

    .content.stats-content .ms-cat-tab {
        padding: 5px 7px !important;
        font-size: 9px !important;
    }

    .content.stats-content .ms-teams-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(42px, auto) minmax(0, 1fr) !important;
        gap: 3px !important;
        padding: 8px 5px !important;
    }

    .content.stats-content .ms-team {
        min-width: 0 !important;
        gap: 3px !important;
    }

    .content.stats-content .ms-team-logo {
        width: 22px !important;
        height: 22px !important;
        flex: 0 0 22px !important;
    }

    .content.stats-content .ms-team-name {
        min-width: 0 !important;
        max-width: 100% !important;
        font-size: 9px !important;
        line-height: 1.1 !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    .content.stats-content .ms-team-away .ms-team-name {
        text-align: right;
    }

    .content.stats-content .ms-score-center {
        min-width: 42px !important;
    }

    .content.stats-content .ms-score {
        font-size: 15px !important;
        white-space: nowrap;
    }

    .content.stats-content .ms-score-ht {
        max-width: 46px;
        font-size: 8px !important;
        text-align: center;
        white-space: normal;
    }

    .content.stats-content .ms-half-header,
    .content.stats-content .ms-section-header,
    .content.stats-content .ms-stat-row,
    .content.stats-content .ms-bar-row,
    .content.stats-content .ms-possession-row,
    .content.stats-content .ms-mini-icons-row {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .content.stats-content .ms-half-header {
        gap: 6px;
    }

    .content.stats-content .ms-event-row {
        gap: 4px !important;
        padding: 7px 8px !important;
    }

    .content.stats-content .ms-event-minute {
        min-width: 22px !important;
        font-size: 9px !important;
    }

    .content.stats-content .ms-event-icon {
        width: 22px !important;
        height: 22px !important;
    }

    .content.stats-content .ms-event-info {
        min-width: 0 !important;
        gap: 3px !important;
    }

    .content.stats-content .ms-event-player,
    .content.stats-content .ms-event-assist {
        min-width: 0 !important;
        font-size: 10px !important;
        line-height: 1.2 !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    .content.stats-content .ms-event-score {
        padding-inline: 4px !important;
        font-size: 9px !important;
    }

    .content.stats-content .ms-stat-row {
        grid-template-columns: minmax(22px, 1fr) minmax(0, auto) minmax(22px, 1fr) !important;
        gap: 5px !important;
    }

    .content.stats-content .ms-stat-label {
        min-width: 0 !important;
        font-size: 9px !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    .content.stats-content .pea-container {
        padding: 0 !important;
        overflow: hidden !important;
    }

    .content.stats-content .pea-hero-bar,
    .content.stats-content .pea-outcome-section,
    .content.stats-content .pea-signals-wrapper,
    .content.stats-content .pea-footer-panel {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 10px 8px !important;
        box-sizing: border-box !important;
    }

    .content.stats-content .pea-hero-stats {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        gap: 6px !important;
    }

    .content.stats-content .pea-stat-block {
        width: 100% !important;
        min-width: 0 !important;
        padding: 7px 8px !important;
        box-sizing: border-box !important;
    }

    .content.stats-content .pea-outcome-grid {
        grid-template-columns: 1fr !important;
        gap: 7px !important;
    }

    .content.stats-content .pea-outcome-card {
        min-width: 0 !important;
        min-height: 0 !important;
        padding: 9px 8px !important;
    }

    .content.stats-content .pea-signals-header {
        gap: 6px !important;
        margin-bottom: 10px !important;
    }

    .content.stats-content .pea-signals-title {
        min-width: 0 !important;
        font-size: 11px !important;
        letter-spacing: 0.6px !important;
        overflow-wrap: anywhere;
    }

    .content.stats-content .pea-signal-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
        padding: 9px 8px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .content.stats-content .pea-sig-left,
    .content.stats-content .pea-sig-info {
        width: 100% !important;
        min-width: 0 !important;
    }

    .content.stats-content .pea-sig-left {
        gap: 8px !important;
    }

    .content.stats-content .pea-sig-name,
    .content.stats-content .pea-sig-desc {
        min-width: 0 !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
    }

    .content.stats-content .pea-sig-probs {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 4px !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .content.stats-content .pea-prob-item {
        width: auto !important;
        min-width: 0 !important;
        padding: 5px 2px !important;
    }

    .content.stats-content .pea-prob-val {
        max-width: 100% !important;
        font-size: 10px !important;
    }

    .content.stats-content .pea-sig-pick,
    .content.stats-content .pea-weight-bar {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .content.stats-content .pea-consensus-block {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        width: 100% !important;
        min-width: 0 !important;
        gap: 6px !important;
    }

    .content.stats-content .pea-cons-label {
        grid-column: 1 / -1;
        white-space: normal !important;
    }

    .content.stats-content .pea-quality-tags {
        width: 100%;
        min-width: 0;
    }

    .content.stats-content .ou-premium-card,
    .content.stats-content .btts-card,
    .content.stats-content .mtr-card,
    .content.stats-content .corner-matrix-card,
    .content.stats-content .perf-comparison-row,
    .content.stats-content .h2h-card,
    .content.stats-content .fea-card,
    .content.stats-content .last6-card,
    .content.stats-content .trends-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .content.stats-content .btts-team-info,
    .content.stats-content .btts-signal-meta {
        width: 68px !important;
        min-width: 0 !important;
    }

    .content.stats-content .btts-tl-name {
        width: 44px !important;
    }

    .content.stats-content .h2h-grid,
    .content.stats-content .fea-matches-row,
    .content.stats-content .corner-matrix-metrics,
    .content.stats-content .mtr-stats-grid {
        grid-template-columns: 1fr !important;
    }

    .content.stats-content .aha-vb-grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .content.stats-content .aha-nt-row {
        grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr) !important;
        gap: 4px !important;
        padding-inline: 6px !important;
    }
}

@media (max-width: 240px) {
    .site-navbar .nav-top-container {
        min-height: 52px !important;
        padding: 6px 4px !important;
        column-gap: 2px !important;
    }

    .site-navbar .mobile-logo {
        max-width: calc(100% - 65px) !important;
        height: 29px !important;
        margin-left: -5px !important;
    }

    .site-navbar .nav-top .mobile-logo .logo-icon {
        height: 54px !important;
        max-width: 102px !important;
    }

    .site-navbar .mobile-logo-text {
        margin-left: -66px !important;
        font-size: 12px !important;
        letter-spacing: -0.2px !important;
    }

    .site-navbar .nav-top-left {
        flex-basis: 28px !important;
    }

    .site-navbar .search-wrapper,
    .site-navbar .search-pill {
        width: 28px !important;
        height: 28px !important;
    }

    .site-navbar .search-icon {
        font-size: 13px !important;
    }

    .site-navbar .mobile-more-top-toggle {
        width: 34px !important;
        height: 34px !important;
        flex-basis: 34px !important;
        border-radius: 10px !important;
        font-size: 15px !important;
    }

    .site-navbar .nav-top-left.mobile-search-active .search-pill,
    .site-navbar .nav-top-left.mobile-search-closing .search-pill {
        height: 36px !important;
        padding-inline: 10px !important;
    }

    .site-navbar .search-dropdown {
        left: 4px !important;
        right: 4px !important;
        max-width: calc(100vw - 8px) !important;
    }

    .mobile-bottom-nav {
        height: 50px !important;
    }

    .bottom-nav-item {
        gap: 2px !important;
        font-size: 7px !important;
    }

    .bottom-nav-item i {
        font-size: 15px !important;
    }

    .content.stats-content .mobile-match-breadcrumb {
        height: 50px;
    }

    .content.stats-content .mobile-match-breadcrumb-scroll {
        padding: 0 5px 7px;
    }

    .content.stats-content .mobile-match-breadcrumb-track {
        gap: 6px;
        padding-right: 12px;
    }

    .content.stats-content .mobile-match-breadcrumb-item {
        gap: 3px;
        font-size: 9px;
        letter-spacing: 0.2px;
    }

    .content.stats-content .mobile-match-breadcrumb-icon,
    .content.stats-content .mobile-match-breadcrumb-sep {
        font-size: 11px;
    }

    .content.stats-content .mobile-match-breadcrumb-country img {
        width: 15px;
        height: 10px;
    }

    .content.stats-content .prediction-card,
    .content.stats-content .pc-card {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    .content.stats-content .prediction-card .pc-header {
        gap: 2px !important;
    }

    .content.stats-content .prediction-card .pc-date-text,
    .content.stats-content .prediction-card .pc-finished-kickoff {
        font-size: 9px !important;
    }

    .content.stats-content .prediction-card .pc-sep,
    .content.stats-content .prediction-card .pc-finished-kickoff i {
        font-size: 8px !important;
    }

    .content.stats-content .prediction-card .fav-btn {
        font-size: 11px !important;
    }

    .content.stats-content .prediction-card .team-card-fav {
        width: 11px !important;
        height: 11px !important;
        right: -2px !important;
        bottom: -2px !important;
    }

    .content.stats-content .prediction-card .team-card-fav i {
        font-size: 5px !important;
    }

    .content.stats-content .prediction-card .pc-prob,
    .content.stats-content .prediction-card .pc-prob svg {
        width: 38px !important;
        height: 38px !important;
    }

    .content.stats-content .prediction-card .pc-logo,
    .content.stats-content .prediction-card .pc-team-logo {
        width: 24px !important;
        height: 24px !important;
    }

    .content.stats-content .prediction-card .pc-name {
        font-size: 8px !important;
    }

    .content.stats-content .prediction-card .form-dot,
    .content.stats-content .form-indicators .form-dot {
        width: 10px !important;
        height: 10px !important;
        flex-basis: 10px !important;
    }

    .content.stats-content .ms-team-logo {
        width: 19px !important;
        height: 19px !important;
        flex-basis: 19px !important;
    }

    .content.stats-content .ms-team-name {
        font-size: 8px !important;
    }

    .content.stats-content .ms-score {
        font-size: 14px !important;
    }

    .content.stats-content .pea-conf-ring,
    .content.stats-content .pea-conf-svg {
        width: 76px !important;
        height: 76px !important;
    }

    .content.stats-content .pea-sig-icon-wrap {
        width: 26px !important;
        height: 26px !important;
    }

    .content.stats-content .pea-sig-name {
        font-size: 10px !important;
    }

    .content.stats-content .pea-sig-desc,
    .content.stats-content .pea-prob-key {
        font-size: 8px !important;
    }

    .content.stats-content .pea-prob-val {
        font-size: 9px !important;
    }
}

/* ==========================================================================
   COMPLETE NARROW-MOBILE PASS
   Shared cards, search, lineups and analysis modules from 340px downward.
   ========================================================================== */
@media (max-width: 340px) {
    /* Search replaces the navbar contents while open, preserving a usable field. */
    .site-navbar .nav-top-container.mobile-search-open {
        min-height: 58px !important;
    }

    .site-navbar .nav-top-container.mobile-search-open > .mobile-logo,
    .site-navbar .nav-top-container.mobile-search-open > .mobile-more-top-toggle {
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .site-navbar .nav-top-container.mobile-search-open .nav-top-left,
    .site-navbar .nav-top-left.mobile-search-closing {
        position: absolute !important;
        inset: 7px 6px !important;
        z-index: 10030 !important;
        width: auto !important;
        max-width: none !important;
        height: 44px !important;
        margin: 0 !important;
        flex: none !important;
    }

    .site-navbar .nav-top-container.mobile-search-open .search-wrapper,
    .site-navbar .nav-top-left.mobile-search-closing .search-wrapper,
    .site-navbar .nav-top-container.mobile-search-open .search-pill,
    .site-navbar .nav-top-left.mobile-search-closing .search-pill {
        width: 100% !important;
        max-width: none !important;
        height: 44px !important;
    }

    .site-navbar .nav-top-container.mobile-search-open .search-pill,
    .site-navbar .nav-top-left.mobile-search-closing .search-pill {
        gap: 8px !important;
        padding: 0 11px !important;
        border-radius: 9px !important;
    }

    .site-navbar .nav-top-container.mobile-search-open .search-input,
    .site-navbar .nav-top-left.mobile-search-closing .search-input {
        display: block !important;
        min-width: 0 !important;
        font-size: 12px !important;
    }

    .site-navbar .nav-top-container.mobile-search-open .search-clear,
    .site-navbar .nav-top-left.mobile-search-closing .search-clear {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
    }

    .site-navbar .search-dropdown {
        top: 62px !important;
        left: 5px !important;
        right: 5px !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: calc(100vw - 10px) !important;
        max-height: calc(100dvh - 72px) !important;
        border-radius: 9px !important;
    }

    .site-navbar .search-tabs {
        gap: 3px;
        padding: 8px 6px 5px;
    }

    .site-navbar .search-tab {
        flex: 1 1 0;
        min-width: 0;
        padding: 4px 2px;
        font-size: 9px;
    }

    .site-navbar .search-result-row {
        gap: 7px;
        padding: 7px 8px;
    }

    .site-navbar .search-result-logo {
        width: 30px;
        height: 30px;
    }

    .site-navbar .search-result-logo img {
        width: 22px;
        height: 22px;
    }

    .site-navbar .search-result-name {
        font-size: 11px;
    }

    .site-navbar .search-result-country,
    .site-navbar .search-result-type-badge {
        font-size: 9px;
    }

    /* Shared prediction-card treatment for home, match details and other feeds. */
    .prediction-card,
    .pc-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 8px 6px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .prediction-card .pc-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 4px !important;
        min-width: 0 !important;
    }

    .prediction-card .pc-kickoff,
    .prediction-card .pc-finished-kickoff {
        min-width: 0 !important;
        gap: 3px !important;
        font-size: 10px !important;
        white-space: nowrap !important;
    }

    .prediction-card .pc-date-text {
        min-width: 0 !important;
        font-size: 10px !important;
        white-space: nowrap !important;
    }

    .prediction-card .fav-btn {
        padding: 1px !important;
        font-size: 12px !important;
    }

    .prediction-card--match-result .pc-body,
    .prediction-card--over-under .pc-body,
    .prediction-card--btts .pc-body,
    .prediction-card--handicap .pc-body,
    .prediction-card--corners .pc-body,
    .prediction-card--double-chance .pc-body,
    .prediction-card--half-time .pc-body,
    .prediction-card--halfTime-fullTime .pc-body,
    .prediction-card--htft .pc-body {
        grid-template-columns: minmax(0, 1fr) minmax(48px, 0.82fr) minmax(0, 1fr) !important;
        column-gap: 2px !important;
        row-gap: 4px !important;
        width: 100% !important;
        min-width: 0 !important;
        margin-top: 7px !important;
    }

    .prediction-card .pc-team,
    .prediction-card .pc-center,
    .prediction-card .pc-logo-wrapper,
    .prediction-card .pc-score-block,
    .prediction-card .pc-probs-row,
    .prediction-card .pc-form-row,
    .prediction-card .form-indicators,
    .prediction-card .foot {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .prediction-card .pc-logo,
    .prediction-card .pc-team-logo {
        width: 27px !important;
        height: 27px !important;
    }

    .prediction-card .team-card-fav {
        width: 12px !important;
        height: 12px !important;
        right: -2px !important;
        bottom: -2px !important;
    }

    .prediction-card .team-card-fav i {
        font-size: 5px !important;
    }

    .prediction-card .pc-name {
        width: 100% !important;
        max-width: 100% !important;
        padding-inline: 2px !important;
        font-size: 8px !important;
        line-height: 1.15 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .prediction-card .pc-score {
        gap: 2px !important;
        font-size: 17px !important;
        white-space: nowrap !important;
    }

    .prediction-card .score-sep {
        margin-inline: 1px !important;
    }

    .prediction-card .pc-minute,
    .prediction-card .pc-minute-label,
    .prediction-card .pc-ns-time {
        max-width: 64px !important;
        font-size: 9px !important;
        line-height: 1.15 !important;
        text-align: center !important;
        white-space: normal !important;
    }

    .prediction-card .pc-probs-row {
        gap: 7px !important;
        margin-top: 2px !important;
        justify-content: center !important;
    }

    .prediction-card .pc-prob,
    .prediction-card .pc-prob svg {
        width: 40px !important;
        height: 40px !important;
    }

    .prediction-card .pc-percent {
        font-size: 9px !important;
    }

    .prediction-card .pc-badge,
    .prediction-card .pc-badge.Pc-over {
        max-width: 54px !important;
        margin-top: 2px !important;
        font-size: 7px !important;
        line-height: 1.05 !important;
        white-space: normal !important;
        text-align: center !important;
    }

    .prediction-card .pc-odds,
    .prediction-card .pc-odds:not(.center-odds) {
        width: 45px !important;
        min-width: 0 !important;
        max-width: 45px !important;
        min-height: 24px !important;
        margin-inline: auto !important;
        padding: 3px 2px !important;
        font-size: 9px !important;
        box-sizing: border-box !important;
    }

    .prediction-card .form-indicators {
        gap: 1px !important;
        justify-content: center !important;
    }

    .prediction-card .form-dot {
        width: 10px !important;
        height: 10px !important;
        flex: 0 0 10px !important;
        padding: 0 !important;
        font-size: 6px !important;
        border-radius: 3px !important;
    }

    .prediction-card .form-score-predict-row {
        width: 100% !important;
        min-width: 0 !important;
        gap: 2px !important;
        padding-top: 5px !important;
    }

    .prediction-card .home-form,
    .prediction-card .away-form {
        width: 24px !important;
        flex: 0 0 24px !important;
        padding: 2px 1px !important;
        font-size: 8px !important;
    }

    .prediction-card .score-predict {
        min-width: 0 !important;
        max-width: calc(100% - 52px) !important;
        padding: 3px 4px !important;
        font-size: 7px !important;
        line-height: 1.15 !important;
        overflow-wrap: anywhere !important;
    }

    .prediction-card .foot {
        width: 100% !important;
        margin-top: 32px !important;
    }

    .prediction-card .pc-prediction-pill {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: fit-content !important;
        min-width: 0 !important;
        max-width: calc(100% - 10px) !important;
        min-height: 20px !important;
        margin: 4px auto 0 !important;
        padding: 3px 7px !important;
        border-radius: 4px !important;
        font-size: 8px !important;
        line-height: 1.1 !important;
        text-align: center !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        box-sizing: border-box !important;
    }

    .prediction-card .stats {
        min-width: 0 !important;
        padding: 6px 8px !important;
        font-size: 9px !important;
    }

    /* Voting cards retain three choices without clipping. */
    .content.stats-content .voting_system {
        margin-top: 10px;
    }

    .content.stats-content .vote-slider {
        gap: 8px;
    }

    .content.stats-content .vote-block {
        min-width: 100%;
        padding: 10px 7px;
        border-radius: 9px;
    }

    .content.stats-content .vote-block h3 {
        font-size: 14px !important;
    }

    .content.stats-content .vote-sub {
        margin: 4px 0 8px;
        font-size: 11px !important;
    }

    .content.stats-content .vote-options {
        gap: 4px;
    }

    .content.stats-content .vote-btn {
        min-width: 0;
        gap: 4px;
        padding: 5px 3px;
        font-size: 10px;
    }

    .content.stats-content .vote-btn img {
        width: 16px;
        height: 16px;
        object-fit: contain;
    }

    .content.stats-content .vote-total {
        font-size: 10px;
    }

    /* Form edge becomes teams first, analysis second instead of three squeezed columns. */
    .content.stats-content .fea-card {
        width: 100%;
        min-width: 0;
        padding: 10px 7px;
        overflow: hidden;
        box-sizing: border-box;
    }

    .content.stats-content .fea-labels-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        margin-bottom: 8px;
    }

    .content.stats-content .fea-label-home,
    .content.stats-content .fea-label-away {
        grid-column: auto;
        font-size: 10px;
    }

    .content.stats-content .fea-logo-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-bottom: 12px;
    }

    .content.stats-content .fea-side {
        grid-row: 1;
        min-width: 0;
        gap: 5px;
    }

    .content.stats-content .fea-side-right {
        grid-column: 2;
    }

    .content.stats-content .fea-bar-section {
        grid-column: 1 / -1;
        grid-row: 2;
        gap: 5px;
    }

    .content.stats-content .fea-logo-wrap {
        width: 50px;
        height: 50px;
        padding: 5px;
    }

    .content.stats-content .fea-logo {
        width: 38px;
        height: 38px;
    }

    .content.stats-content .fea-ppg-badge {
        min-width: 44px;
        padding: 3px 7px;
        font-size: 10px;
    }

    .content.stats-content .fea-form-badges {
        gap: 2px;
        justify-content: center;
    }

    .content.stats-content .fea-form-badges .form-badge {
        width: 14px;
        height: 14px;
        flex: 0 0 14px;
        font-size: 7px;
    }

    .content.stats-content .fea-bar-wrap {
        padding: 12px 4px;
    }

    .content.stats-content .fea-pin-logo {
        width: 26px;
        height: 26px;
    }

    .content.stats-content .fea-verdict {
        max-width: 100%;
        font-size: 10px;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    .content.stats-content .fea-matches-row {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
        padding-top: 10px;
    }

    .content.stats-content #fea-home-matches,
    .content.stats-content #fea-away-matches {
        grid-column: auto;
        min-width: 0;
    }

    .content.stats-content .fea-match-tabs {
        gap: 3px;
    }

    .content.stats-content .fea-tab {
        flex: 1 1 0;
        min-width: 0;
        padding: 4px 2px;
        font-size: 8px;
    }

    .content.stats-content .fea-match-row {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        gap: 4px;
        padding: 5px 0;
        font-size: 9px;
    }

    .content.stats-content .fea-score-badge {
        min-width: 34px;
        padding: 3px 5px;
        font-size: 9px;
    }

    /* Give each formation row more height and reduce visual noise. */
    .content.stats-content .msp-pitch--mobile-shared {
        aspect-ratio: 68 / 150 !important;
    }

    .content.stats-content .msp-pitch--mobile-shared .msp-half {
        padding-inline: 2% !important;
    }

    .content.stats-content .msp-pitch--mobile-shared .msp-grid-row {
        gap: 5px 2px !important;
    }

    .content.stats-content .msp-pitch--mobile-shared .msp-player {
        gap: 1px !important;
    }

    .content.stats-content .msp-pitch--mobile-shared .msp-photo-wrap,
    .content.stats-content .msp-pitch--mobile-shared .msp-photo,
    .content.stats-content .msp-pitch--mobile-shared .msp-photo-fallback {
        width: 27px !important;
        height: 27px !important;
        min-width: 27px !important;
    }

    .content.stats-content .msp-pitch--mobile-shared .msp-name {
        margin-top: 1px !important;
        font-size: 7px !important;
        line-height: 1 !important;
    }

    .content.stats-content .msp-pitch--mobile-shared .msp-rating {
        min-width: 18px !important;
        padding: 1px 2px !important;
        font-size: 6px !important;
    }
}

@media (max-width: 280px) {
    .prediction-card {
        padding-inline: 4px !important;
    }

    .prediction-card .pc-prob,
    .prediction-card .pc-prob svg {
        width: 36px !important;
        height: 36px !important;
    }

    .prediction-card .pc-logo,
    .prediction-card .pc-team-logo {
        width: 24px !important;
        height: 24px !important;
    }

    .prediction-card .pc-badge,
    .prediction-card .pc-badge.Pc-over {
        font-size: 6px !important;
    }

    .prediction-card .form-dot:nth-child(n + 5) {
        display: none !important;
    }

    .content.stats-content .msp-pitch--mobile-shared {
        aspect-ratio: 68 / 158 !important;
    }

    .content.stats-content .msp-pitch--mobile-shared .msp-num {
        display: none !important;
    }

    .content.stats-content .msp-pitch--mobile-shared .msp-photo-wrap,
    .content.stats-content .msp-pitch--mobile-shared .msp-photo,
    .content.stats-content .msp-pitch--mobile-shared .msp-photo-fallback {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
    }

    .content.stats-content .msp-pitch--mobile-shared .msp-rating {
        display: none !important;
    }

    .content.stats-content .vote-btn {
        font-size: 9px;
    }

    .content.stats-content .vote-btn img {
        width: 14px;
        height: 14px;
    }
}

/* Narrow match-stat tabs: keep summary, lineups and comparison data inside the viewport. */
@media (max-width: 320px) {
    .content.stats-content .ms-summary-wrap {
        width: 100%;
        min-width: 0;
        padding: 6px !important;
        overflow: hidden;
    }

    .content.stats-content .ms-half-header {
        min-width: 0;
        margin: 6px 0;
        padding: 8px 10px !important;
        font-size: 11px;
        gap: 6px;
    }

    .content.stats-content .ms-event-row,
    .dark-mode .content.stats-content .ms-event-row {
        width: 100%;
        min-width: 0;
        min-height: 40px !important;
        gap: 4px;
        padding: 7px 6px !important;
        overflow: hidden;
    }

    .content.stats-content .ms-event-minute,
    .dark-mode .content.stats-content .ms-event-minute {
        min-width: 20px;
        font-size: 9px !important;
    }

    .content.stats-content .ms-event-icon {
        width: 20px;
        height: 20px;
        flex: 0 0 20px;
        font-size: 12px;
    }

    .content.stats-content .ms-event-info {
        min-width: 0;
        gap: 1px;
    }

    .content.stats-content .ms-event-player,
    .content.stats-content .ms-event-assist {
        min-width: 0;
        font-size: 9px !important;
        line-height: 1.2;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .content.stats-content .ms-event-score,
    .dark-mode .content.stats-content .ms-event-score {
        min-width: 34px !important;
        padding: 3px 4px !important;
        font-size: 9px !important;
    }

    .content.stats-content .msp-mobile-lineup,
    .content.stats-content .msp-pitch--mobile-shared,
    .content.stats-content .msp-dual-grid-wrap,
    .content.stats-content .msp-half {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    .content.stats-content .msp-mobile-lineup {
        overflow: hidden;
    }

    .content.stats-content .ms-formation-header {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        gap: 4px;
        padding: 8px 6px;
    }

    .content.stats-content .ms-formation-badge {
        min-width: 0;
        font-size: 10px;
        letter-spacing: 0.4px;
    }

    .content.stats-content .ms-formation-label {
        font-size: 8px;
        letter-spacing: 0.5px;
    }

    .dark-mode .content.stats-content .ms-formation-badge,
    .dark-mode .content.stats-content .ms-formation-label {
        color: #f8fafc !important;
        opacity: 1;
    }

    .content.stats-content .msp-pitch--mobile-shared {
        aspect-ratio: 68 / 132;
        overflow: hidden;
    }

    .content.stats-content .msp-pitch--mobile-shared .msp-half {
        padding-right: 1.5%;
        padding-left: 1.5%;
    }

    .content.stats-content .msp-pitch--mobile-shared .msp-grid-row {
        gap: 3px 2px;
    }

    .content.stats-content .msp-pitch--mobile-shared .msp-player {
        min-width: 0;
        max-width: 100%;
        gap: 2px;
    }

    .content.stats-content .msp-pitch--mobile-shared .msp-photo-wrap,
    .content.stats-content .msp-pitch--mobile-shared .msp-photo,
    .content.stats-content .msp-pitch--mobile-shared .msp-photo-fallback {
        width: 30px;
        height: 30px;
        min-width: 30px;
    }

    .content.stats-content .msp-pitch--mobile-shared .msp-name {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        margin-top: 2px;
        font-size: 8px;
        line-height: 1.1;
    }

    .content.stats-content .msp-pitch--mobile-shared .msp-name-text {
        display: inline-block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dark-mode .content.stats-content .msp-name-text {
        color: #ffffff !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
    }

    .dark-mode .content.stats-content .msp-num {
        color: #dbeafe !important;
        opacity: 1;
    }

    .content.stats-content .msp-pitch--mobile-shared .msp-num {
        font-size: 7px;
    }

    .content.stats-content .msp-pitch--mobile-shared .msp-rating {
        min-width: 20px;
        padding: 1px 3px;
        font-size: 7px;
    }

    .content.stats-content .ms-sub-section-header,
    .content.stats-content .ms-coaches-header {
        padding: 7px 6px;
        font-size: 9px;
        letter-spacing: 0.6px;
    }

    .content.stats-content .ms-bench-grid,
    .content.stats-content .ms-coaches-grid {
        width: 100%;
        min-width: 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .content.stats-content .ms-bench-player {
        min-width: 0;
        gap: 3px;
        padding: 7px 4px;
        font-size: 9px;
        overflow: hidden;
    }

    .content.stats-content .ms-bench-number {
        min-width: 14px;
        font-size: 8px;
    }

    .content.stats-content .ms-bench-name {
        min-width: 0;
        max-width: 100%;
        font-size: 9px;
        text-overflow: ellipsis;
    }

    .content.stats-content .ms-bench-sub-icon {
        flex: 0 0 auto;
        font-size: 8px;
    }

    .content.stats-content .ms-coach {
        min-width: 0;
        gap: 5px;
        padding: 7px 5px;
        overflow: hidden;
    }

    .content.stats-content .ms-coach-photo {
        width: 26px;
        height: 26px;
        flex: 0 0 26px;
    }

    .content.stats-content .ms-coach-name {
        min-width: 0;
        font-size: 9px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dark-mode .content.stats-content .ms-sub-section-header,
    .dark-mode .content.stats-content .ms-coaches-header {
        color: #f8fafc !important;
        background: #0f2732 !important;
        border-color: rgba(148, 163, 184, 0.28) !important;
    }

    .dark-mode .content.stats-content .ms-bench-name,
    .dark-mode .content.stats-content .ms-coach-name,
    .dark-mode .content.stats-content .ms-bench-number {
        color: #f8fafc !important;
        opacity: 1;
    }

    .content.stats-content .ms-msub-tabs {
        padding: 9px 6px 6px;
    }

    .content.stats-content .ms-msub-tab {
        min-width: 0;
        gap: 5px;
        padding: 5px 14px;
        font-size: 9px;
    }

    .content.stats-content .ms-msub-tab img {
        width: 20px;
        height: 20px;
    }

    .content.stats-content .ms-msub-coach {
        min-width: 0;
        gap: 7px;
        padding: 9px 7px;
    }

    .content.stats-content .ms-msub-coach-img,
    .content.stats-content .ms-msub-coach-photo,
    .content.stats-content .ms-msub-coach-fb {
        width: 32px;
        height: 32px;
        flex: 0 0 32px;
    }

    .content.stats-content .ms-msub-coach-info {
        min-width: 0;
    }

    .content.stats-content .ms-msub-coach-name,
    .content.stats-content .ms-msub-name {
        min-width: 0;
        font-size: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .content.stats-content .ms-msub-section-title {
        padding: 9px 7px 5px;
        font-size: 10px;
    }

    .content.stats-content .ms-msub-row {
        min-width: 0;
        gap: 6px;
        padding: 7px;
    }

    .content.stats-content .ms-msub-photo-wrap,
    .content.stats-content .ms-msub-photo,
    .content.stats-content .ms-msub-photo-fb {
        width: 30px;
        height: 30px;
        flex: 0 0 30px;
    }

    .content.stats-content .ms-msub-info,
    .content.stats-content .ms-msub-detail {
        min-width: 0;
    }

    .content.stats-content .ms-msub-detail {
        font-size: 8px;
    }

    .content.stats-content .ms-msub-outname {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .content.stats-content .ms-msub-rating {
        min-width: 28px;
        padding: 3px 5px;
        font-size: 9px;
    }

    .dark-mode .content.stats-content .ms-msub-tab,
    .dark-mode .content.stats-content .ms-msub-coach-name,
    .dark-mode .content.stats-content .ms-msub-name,
    .dark-mode .content.stats-content .ms-msub-detail,
    .dark-mode .content.stats-content .ms-msub-outname,
    .dark-mode .content.stats-content .ms-msub-section-title {
        color: #f8fafc !important;
        opacity: 1;
    }

    .content.stats-content .perf-comparison-row {
        width: 100%;
        min-width: 0;
        gap: 8px;
        padding: 6px !important;
        overflow: hidden;
    }

    .content.stats-content .perf-card {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
    }

    .content.stats-content .perf-card-header {
        min-width: 0;
        gap: 7px;
        padding: 8px;
    }

    .content.stats-content .perf-logo {
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
    }

    .content.stats-content .perf-card-info {
        min-width: 0;
    }

    .content.stats-content .perf-team-name {
        min-width: 0;
        font-size: 11px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .content.stats-content .perf-league-name {
        min-width: 0;
        font-size: 8px;
        line-height: 1.2;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .content.stats-content .perf-league-flag {
        width: 14px;
        height: 10px;
    }

    .content.stats-content .perf-form-table,
    .content.stats-content .perf-stats-table {
        width: 100%;
        max-width: 100%;
        table-layout: fixed;
    }

    .content.stats-content .perf-form-table th,
    .content.stats-content .perf-form-table td,
    .content.stats-content .perf-stats-table th,
    .content.stats-content .perf-stats-table td {
        min-width: 0;
        padding: 6px 2px;
        font-size: 9px;
        line-height: 1.2;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .content.stats-content .perf-form-table th:first-child,
    .content.stats-content .perf-form-table td:first-child {
        width: 26%;
    }

    .content.stats-content .perf-form-table th:nth-child(2),
    .content.stats-content .perf-form-table td:nth-child(2) {
        width: 50%;
    }

    .content.stats-content .perf-form-table th:last-child,
    .content.stats-content .perf-form-table td:last-child {
        width: 24%;
    }

    .content.stats-content .perf-stats-table th:first-child,
    .content.stats-content .perf-stats-table td:first-child {
        width: 30%;
    }

    .content.stats-content .perf-form-badges {
        min-width: 0;
        gap: 2px;
        justify-content: center;
    }

    .content.stats-content .perf-form-badges .form-badge {
        width: 14px;
        height: 14px;
        flex: 0 0 14px;
        margin: 0;
        font-size: 7px;
    }

    .content.stats-content .perf-ppg {
        min-width: 0;
        padding: 3px 4px;
        font-size: 9px;
    }
}

@media (max-width: 240px) {
    .content.stats-content .ms-summary-wrap {
        padding: 4px !important;
    }

    .content.stats-content .ms-half-header {
        padding: 7px 8px !important;
        font-size: 10px;
    }

    .content.stats-content .ms-event-row,
    .dark-mode .content.stats-content .ms-event-row {
        min-height: 36px !important;
        padding: 6px 4px !important;
    }

    .content.stats-content .ms-event-icon {
        width: 18px;
        height: 18px;
        flex-basis: 18px;
        font-size: 10px;
    }

    .content.stats-content .ms-formation-header {
        padding: 7px 4px;
    }

    .content.stats-content .ms-formation-badge {
        font-size: 9px;
    }

    .content.stats-content .ms-formation-label {
        font-size: 7px;
    }

    .content.stats-content .msp-pitch--mobile-shared {
        aspect-ratio: 68 / 138;
    }

    .content.stats-content .msp-pitch--mobile-shared .msp-photo-wrap,
    .content.stats-content .msp-pitch--mobile-shared .msp-photo,
    .content.stats-content .msp-pitch--mobile-shared .msp-photo-fallback {
        width: 25px;
        height: 25px;
        min-width: 25px;
    }

    .content.stats-content .msp-pitch--mobile-shared .msp-name {
        font-size: 7px;
    }

    .content.stats-content .ms-bench-player {
        gap: 2px;
        padding: 6px 3px;
        font-size: 8px;
    }

    .content.stats-content .ms-bench-number {
        min-width: 11px;
        font-size: 7px;
    }

    .content.stats-content .ms-bench-name {
        font-size: 8px;
    }

    .content.stats-content .ms-msub-tab {
        padding: 5px 9px;
        font-size: 8px;
    }

    .content.stats-content .ms-msub-photo-wrap,
    .content.stats-content .ms-msub-photo,
    .content.stats-content .ms-msub-photo-fb {
        width: 26px;
        height: 26px;
        flex-basis: 26px;
    }

    .content.stats-content .perf-comparison-row {
        padding: 4px !important;
    }

    .content.stats-content .perf-card-header {
        gap: 5px;
        padding: 7px 5px;
    }

    .content.stats-content .perf-logo {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
    }

    .content.stats-content .perf-team-name {
        font-size: 9px;
    }

    .content.stats-content .perf-form-table th,
    .content.stats-content .perf-form-table td,
    .content.stats-content .perf-stats-table th,
    .content.stats-content .perf-stats-table td {
        padding: 5px 1px;
        font-size: 8px;
    }

    .content.stats-content .perf-form-badges .form-badge {
        width: 12px;
        height: 12px;
        flex-basis: 12px;
        font-size: 6px;
    }

    .content.stats-content .perf-ppg {
        padding: 2px;
        font-size: 8px;
    }
}

/* Match standings: reference-style mobile dark table.
   Keep the team focus pinned, but make the scroll boundary and highlighted
   fixture teams visually consistent on narrow dark-mode screens. */
@media (max-width: 640px) {
    .dark-mode .content.stats-content .standings-table-wrap {
        background: #06141b;
        border: 1px solid rgba(148, 163, 184, 0.22);
        border-radius: 0;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .dark-mode .content.stats-content .standings-table-wrap::-webkit-scrollbar {
        display: none;
    }

    .dark-mode .content.stats-content .standings-table {
        min-width: 540px !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
        background: #06141b !important;
    }

    .dark-mode .content.stats-content .standings-table thead tr,
    .dark-mode .content.stats-content .standings-table tbody tr {
        background: #06141b !important;
        border-color: rgba(148, 163, 184, 0.20) !important;
    }

    .dark-mode .content.stats-content .standings-table th,
    .dark-mode .content.stats-content .standings-table td {
        height: 45px;
        padding: 7px 7px !important;
        background: #06141b !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.20) !important;
        color: #f8fafc !important;
        font-size: 12px !important;
    }

    .dark-mode .content.stats-content .standings-table th {
        color: #9fb4c8 !important;
        font-size: 10px !important;
    }

    .dark-mode .content.stats-content .standings-table th.col-rank,
    .dark-mode .content.stats-content .standings-table td.col-rank {
        left: 0 !important;
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        z-index: 10 !important;
        background: #06141b !important;
    }

    .dark-mode .content.stats-content .standings-table th.col-team,
    .dark-mode .content.stats-content .standings-table td.col-team {
        left: 42px !important;
        width: 132px !important;
        min-width: 132px !important;
        max-width: 132px !important;
        z-index: 9 !important;
        background: linear-gradient(90deg, #06141b 0%, #06141b 82%, rgba(6, 20, 27, 0.92) 100%) !important;
        box-shadow: 12px 0 14px -12px rgba(0, 0, 0, 0.95);
    }

    .dark-mode .content.stats-content .standings-table th.col-team::after,
    .dark-mode .content.stats-content .standings-table td.col-team::after {
        width: 16px !important;
        right: -16px !important;
        background: linear-gradient(90deg, rgba(6, 20, 27, 0.92), rgba(6, 20, 27, 0)) !important;
    }

    .dark-mode .content.stats-content .standings-table .team-cell {
        gap: 8px;
        padding-left: 0;
    }

    .dark-mode .content.stats-content .standings-table .team-logo-sm {
        width: 24px;
        height: 24px;
    }

    .dark-mode .content.stats-content .standings-table .team-name-standing {
        max-width: 86px !important;
        color: #f8fafc !important;
        font-size: 12px !important;
        font-weight: 800 !important;
    }

    .dark-mode .content.stats-content .standings-table .rank-badge {
        width: 30px;
        min-width: 30px;
        height: 30px;
        border-radius: 8px;
        background: transparent;
        color: #f8fafc;
        font-size: 14px;
        font-weight: 900;
    }

    .dark-mode .content.stats-content .standings-table .rank-badge:not([class*="zone-"]) {
        background: transparent !important;
        color: #f8fafc !important;
    }

    .dark-mode .content.stats-content .standings-table .rank-badge.zone-relegation,
    .dark-mode .content.stats-content .standings-table .rank-badge.zone-relegation-q {
        background: #dc0000 !important;
        color: #ffffff !important;
        border-radius: 8px;
    }

    .dark-mode .content.stats-content .standings-table tbody tr.highlight-home td,
    .dark-mode .content.stats-content .standings-table tbody tr.highlight-away td,
    .dark-mode .content.stats-content .standings-table tbody tr.highlight-home:hover td,
    .dark-mode .content.stats-content .standings-table tbody tr.highlight-away:hover td {
        background: #063761 !important;
        color: #ffffff !important;
    }

    .dark-mode .content.stats-content .standings-table tbody tr.highlight-home td.col-rank,
    .dark-mode .content.stats-content .standings-table tbody tr.highlight-away td.col-rank {
        background: #063761 !important;
    }

    .dark-mode .content.stats-content .standings-table tbody tr.highlight-home td.col-team,
    .dark-mode .content.stats-content .standings-table tbody tr.highlight-away td.col-team {
        background: linear-gradient(90deg, #063761 0%, #063761 82%, rgba(6, 55, 97, 0.92) 100%) !important;
    }

    .dark-mode .content.stats-content .standings-table tbody tr.highlight-home td.col-team::after,
    .dark-mode .content.stats-content .standings-table tbody tr.highlight-away td.col-team::after {
        background: linear-gradient(90deg, rgba(6, 55, 97, 0.92), rgba(6, 55, 97, 0)) !important;
    }

    .dark-mode .content.stats-content .standings-table td.col-pts,
    .dark-mode .content.stats-content .standings-table .gd-pos,
    .dark-mode .content.stats-content .standings-table .gd-neg {
        color: #f8fafc !important;
    }
}

/* ==========================================================================
   NARROW PREDICTION CARD STRUCTURE LOCK
   Preserve the same three-column architecture continuously below 380px.
   ========================================================================== */
@media (max-width: 380px) {
    .prediction-card {
        --pc-narrow-side: clamp(44px, 22vw, 75px);
        --pc-narrow-logo: clamp(22px, 10vw, 32px);
        --pc-narrow-prob: clamp(34px, 16vw, 50px);
        --pc-narrow-odds: clamp(38px, 16vw, 56px);
        padding: 10px 6px !important;
    }

    .prediction-card--match-result .pc-body,
    .prediction-card--over-under .pc-body,
    .prediction-card--btts .pc-body,
    .prediction-card--handicap .pc-body,
    .prediction-card--corners .pc-body,
    .prediction-card--double-chance .pc-body,
    .prediction-card--half-time .pc-body,
    .prediction-card--halfTime-fullTime .pc-body,
    .prediction-card--htft .pc-body {
        display: grid !important;
        grid-template-columns:
            var(--pc-narrow-side)
            minmax(0, 1fr)
            var(--pc-narrow-side) !important;
        column-gap: 0 !important;
        row-gap: 5px !important;
        width: 100% !important;
        min-width: 0 !important;
        margin-top: 9px !important;
        align-items: center !important;
    }

    .prediction-card--match-result > .pc-form-row,
    .prediction-card--double-chance > .pc-form-row,
    .prediction-card--half-time > .pc-form-row {
        display: grid !important;
        grid-template-columns:
            var(--pc-narrow-side)
            minmax(0, 1fr)
            var(--pc-narrow-side) !important;
        column-gap: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .prediction-card .pc-team,
    .prediction-card .pc-center {
        display: contents !important;
    }

    .prediction-card .pc-logo,
    .prediction-card .pc-team-logo {
        width: var(--pc-narrow-logo) !important;
        height: var(--pc-narrow-logo) !important;
    }

    .prediction-card .pc-name {
        width: var(--pc-narrow-side) !important;
        max-width: var(--pc-narrow-side) !important;
        padding-inline: 2px !important;
        font-size: clamp(7px, 2.8vw, 11px) !important;
        line-height: 1.15 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    .prediction-card .pc-score-block {
        width: clamp(44px, 20vw, 72px) !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .prediction-card .pc-score {
        gap: 3px !important;
        font-size: clamp(14px, 5.6vw, 20px) !important;
        white-space: nowrap !important;
    }

    .prediction-card .pc-minute,
    .prediction-card .pc-minute-label,
    .prediction-card .pc-ns-time {
        max-width: 72px !important;
        font-size: clamp(7px, 3vw, 11px) !important;
        line-height: 1.15 !important;
        text-align: center !important;
        white-space: normal !important;
    }

    .prediction-card .pc-probs-row {
        min-width: 0 !important;
        max-width: 100% !important;
        gap: clamp(4px, 2.2vw, 12px) !important;
        margin-top: 4px !important;
        justify-content: center !important;
    }

    .prediction-card .pc-prob,
    .prediction-card .pc-prob svg {
        width: var(--pc-narrow-prob) !important;
        height: var(--pc-narrow-prob) !important;
    }

    .prediction-card .pc-percent {
        font-size: clamp(8px, 3.4vw, 12px) !important;
    }

    .prediction-card .pc-badge,
    .prediction-card .pc-badge.Pc-over {
        width: 100% !important;
        max-width: var(--pc-narrow-odds) !important;
        margin: 3px auto 0 !important;
        font-size: clamp(6px, 2.5vw, 9px) !important;
        line-height: 1.1 !important;
        text-align: center !important;
        white-space: normal !important;
    }

    .prediction-card .pc-odds,
    .prediction-card .pc-odds:not(.center-odds) {
        width: var(--pc-narrow-odds) !important;
        min-width: var(--pc-narrow-odds) !important;
        max-width: var(--pc-narrow-odds) !important;
        min-height: 28px !important;
        margin: 3px auto 0 !important;
        padding: 4px 3px !important;
        font-size: clamp(7px, 3vw, 11px) !important;
        box-sizing: border-box !important;
    }

    .prediction-card--handicap .pc-draw-square {
        width: clamp(44px, 22vw, 75px) !important;
        height: clamp(44px, 22vw, 75px) !important;
        font-size: clamp(15px, 7vw, 22px) !important;
    }

    .prediction-card .form-indicators {
        width: 100% !important;
        min-width: 0 !important;
        gap: 1px !important;
        justify-content: center !important;
        flex-wrap: nowrap !important;
    }

    .prediction-card .form-dot,
    .prediction-card .form-dot:nth-child(n + 5) {
        display: flex !important;
        width: clamp(7px, 3.2vw, 12px) !important;
        height: clamp(7px, 3.2vw, 12px) !important;
        flex: 0 0 clamp(7px, 3.2vw, 12px) !important;
        padding: 0 !important;
        font-size: clamp(6px, 2vw, 7px) !important;
        border-radius: 3px !important;
    }

    .prediction-card .form-score-predict-row {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        min-width: 0 !important;
        gap: 2px !important;
        padding-top: 6px !important;
    }

    .prediction-card .home-form,
    .prediction-card .away-form {
        width: clamp(20px, 8.5vw, 31px) !important;
        flex: 0 0 clamp(20px, 8.5vw, 31px) !important;
        padding: 2px 1px !important;
        font-size: clamp(7px, 2.8vw, 10px) !important;
    }

    .prediction-card .score-predict {
        width: auto !important;
        min-width: 0 !important;
        max-width: min(118px, calc(100% - 46px)) !important;
        padding: 3px 5px !important;
        font-size: clamp(6px, 2.5vw, 9px) !important;
        line-height: 1.15 !important;
        white-space: normal !important;
        overflow-wrap: normal !important;
    }

    .prediction-card--over-under .foot,
    .prediction-card--btts .foot,
    .prediction-card--corners .foot,
    .prediction-card--htft .foot,
    .prediction-card--halfTime-fullTime .foot {
        width: 100% !important;
        min-width: 0 !important;
        margin-top: 48px !important;
    }

    .prediction-card .pc-prediction-pill {
        width: fit-content !important;
        min-width: 24px !important;
        max-width: calc(100% - 12px) !important;
        min-height: 24px !important;
        margin: 5px auto 0 !important;
        padding: 4px 9px !important;
        font-size: clamp(7px, 2.8vw, 10px) !important;
        line-height: 1.1 !important;
        white-space: normal !important;
        text-align: center !important;
    }
}

/* ==========================================================================
   UNAVAILABLE CARD, HT/FT ALIGNMENT, AND HOME FEED TYPOGRAPHY
   ========================================================================== */
@media (max-width: 768px) {
    /* HT/FT has no side probability circles, so lower both complete team
       groups to align their form rows with the center HT/FT market block. */
    .prediction-card--htft .pc-team:first-of-type > .pc-logo-wrapper,
    .prediction-card--htft .pc-team:first-of-type > .pc-name,
    .prediction-card--htft .pc-team:first-of-type > .pc-form-row,
    .prediction-card--htft .pc-team:last-of-type > .pc-logo-wrapper,
    .prediction-card--htft .pc-team:last-of-type > .pc-name,
    .prediction-card--htft .pc-team:last-of-type > .pc-form-row {
        transform: translateY(clamp(10px, 3vw, 18px)) !important;
    }

    .prediction-card--htft .pc-team:first-of-type > .pc-form-row,
    .prediction-card--htft .pc-team:last-of-type > .pc-form-row {
        margin-top: 2px !important;
        padding-top: 3px !important;
    }
}

@media (max-width: 380px) {
    /* Keep teams and score in the normal top row; let the explanation use
       the full card width instead of an unreadable narrow center column. */
    .prediction-card--unavailable .prediction-unavailable-body {
        display: grid !important;
        grid-template-columns:
            var(--pc-narrow-side)
            minmax(44px, 1fr)
            var(--pc-narrow-side) !important;
        grid-template-rows: auto auto !important;
        align-items: center !important;
        gap: 8px 3px !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 10px 4px 12px !important;
        box-sizing: border-box !important;
    }

    .prediction-card--unavailable .prediction-unavailable-body > .pc-team {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 4px !important;
        min-width: 0 !important;
        transform: none !important;
    }

    .prediction-card--unavailable .prediction-unavailable-body > .pc-team:first-child {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    .prediction-card--unavailable .prediction-unavailable-body > .pc-team:last-child {
        grid-column: 3 !important;
        grid-row: 1 !important;
    }

    .prediction-card--unavailable .prediction-unavailable-center {
        display: contents !important;
    }

    .prediction-card--unavailable .prediction-unavailable-center > .pc-score-block {
        grid-column: 2 !important;
        grid-row: 1 !important;
        align-self: center !important;
        justify-self: center !important;
    }

    .prediction-card--unavailable .prediction-unavailable-box {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        gap: 4px !important;
        padding: 9px 10px !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    .prediction-card--unavailable .pc-logo {
        width: var(--pc-narrow-logo) !important;
        height: var(--pc-narrow-logo) !important;
    }

    .prediction-card--unavailable .pc-name {
        width: var(--pc-narrow-side) !important;
        max-width: var(--pc-narrow-side) !important;
        font-size: clamp(7px, 2.8vw, 10px) !important;
    }

    .prediction-card--unavailable .prediction-unavailable-kicker {
        font-size: clamp(8px, 2.8vw, 10px) !important;
        line-height: 1.15 !important;
    }

    .prediction-card--unavailable .prediction-unavailable-text {
        font-size: clamp(8px, 2.8vw, 10px) !important;
        line-height: 1.3 !important;
        overflow-wrap: anywhere !important;
    }

    /* Home feed only: compact navigation, filters and league accordions. */
    .home-content {
        font-size: 11px !important;
    }

    .home-content .center-header {
        gap: 7px !important;
        margin-bottom: 10px !important;
    }

    .home-content .prediction-types {
        gap: 5px !important;
    }

    .home-content .ptype {
        min-height: 32px !important;
        padding: 6px 10px !important;
        border-radius: 16px !important;
        font-size: 9px !important;
        line-height: 1.1 !important;
    }

    .home-content .status-filters {
        gap: 3px !important;
        padding: 3px !important;
        border-radius: 7px !important;
    }

    .home-content .status-btn {
        min-height: 30px !important;
        padding: 5px 9px !important;
        border-radius: 14px !important;
        font-size: 9px !important;
        line-height: 1 !important;
    }

    .home-content .date-navigator {
        width: min(178px, 66vw) !important;
        height: 29px !important;
    }

    .home-content .current-date {
        font-size: 9px !important;
        line-height: 29px !important;
    }

    .home-content .date-btn {
        width: 29px !important;
        font-size: 14px !important;
    }

    .home-content .league {
        margin-bottom: 7px !important;
    }

    .home-content .league-header {
        min-height: 54px !important;
        gap: 5px !important;
        padding: 8px 9px !important;
    }

    .home-content .league-left {
        gap: 6px !important;
    }

    .home-content .league-name,
    .home-content .league-name-link {
        font-size: 10px !important;
        line-height: 1.15 !important;
    }

    .home-content .country-logo {
        width: 18px !important;
        height: 18px !important;
    }

    .home-content .league-right {
        gap: 5px !important;
    }

    .home-content .league-match-count {
        font-size: 8px !important;
    }

    .home-content .league-arrow,
    .home-content .league-header i {
        font-size: 10px !important;
    }

    .home-content .league-loading,
    .home-content .show-more {
        font-size: 9px !important;
    }
}

@media (max-width: 300px) {
    .prediction-card--htft .pc-team:first-of-type > .pc-logo-wrapper,
    .prediction-card--htft .pc-team:first-of-type > .pc-name,
    .prediction-card--htft .pc-team:first-of-type > .pc-form-row,
    .prediction-card--htft .pc-team:last-of-type > .pc-logo-wrapper,
    .prediction-card--htft .pc-team:last-of-type > .pc-name,
    .prediction-card--htft .pc-team:last-of-type > .pc-form-row {
        transform: translateY(14px) !important;
    }

    .home-content {
        font-size: 10px !important;
    }

    .home-content .ptype {
        min-height: 30px !important;
        padding-inline: 8px !important;
        font-size: 8px !important;
    }

    .home-content .status-btn {
        min-height: 28px !important;
        padding-inline: 7px !important;
        font-size: 8px !important;
    }

    .home-content .league-header {
        min-height: 50px !important;
        padding: 7px 8px !important;
    }

    .home-content .league-name,
    .home-content .league-name-link {
        font-size: 9px !important;
    }

    .home-content .league-match-count {
        font-size: 7px !important;
    }
}

/* Keep Asian Handicap form badges directly beneath their team odds. */
@media (max-width: 768px) {
    .prediction-card--handicap > .pc-form-row {
        display: grid !important;
        grid-template-columns: 75px minmax(0, 1fr) 75px !important;
        align-items: center !important;
        width: 100% !important;
        min-width: 0 !important;
        column-gap: 0 !important;
        padding-top: 5px !important;
    }

    .prediction-card--handicap > .pc-form-row > .form-indicators {
        width: auto !important;
        min-width: 0 !important;
        justify-self: center !important;
        justify-content: center !important;
    }

    .prediction-card--handicap > .pc-form-row > .form-indicators:first-child {
        grid-column: 1 !important;
    }

    .prediction-card--handicap > .pc-form-row > .form-indicators:last-child {
        grid-column: 3 !important;
    }
}

@media (max-width: 380px) {
    .prediction-card--handicap > .pc-form-row {
        grid-template-columns:
            var(--pc-narrow-side)
            minmax(0, 1fr)
            var(--pc-narrow-side) !important;
    }
}

/* =========================================================
   DETAIL PAGES: COMPLETE NARROW-MOBILE LAYOUT
   Team, league and country pages share the stats-content shell,
   so every rule is scoped to their own page root.
========================================================= */
@media (max-width: 380px) {
    .content.stats-content .team-detail-page,
    .content.stats-content .ld-page,
    .content.stats-content .cd-page {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .content.stats-content .team-detail-page *,
    .content.stats-content .ld-page *,
    .content.stats-content .cd-page * {
        box-sizing: border-box;
        min-width: 0;
    }

    /* Page identity headers */
    .content.stats-content .team-header,
    .content.stats-content .ld-header,
    .content.stats-content .cd-header {
        gap: 9px !important;
        padding: 11px 9px !important;
        align-items: flex-start !important;
    }

    .content.stats-content .team-header-logo,
    .content.stats-content .team-header-logo-placeholder,
    .content.stats-content .ld-logo,
    .content.stats-content .ld-logo-placeholder {
        width: 44px !important;
        height: 44px !important;
        padding: 4px !important;
        flex: 0 0 44px !important;
    }

    .content.stats-content .cd-flag,
    .content.stats-content .cd-flag-placeholder {
        width: 44px !important;
        height: 30px !important;
        flex: 0 0 44px !important;
    }

    .content.stats-content .team-header-name-row {
        gap: 5px !important;
    }

    .content.stats-content .team-header-name,
    .content.stats-content .ld-league-name,
    .content.stats-content .cd-country-name {
        margin: 0 !important;
        font-size: 15px !important;
        line-height: 1.18 !important;
        overflow-wrap: anywhere;
    }

    .content.stats-content .team-fav-btn {
        width: 27px !important;
        height: 27px !important;
        flex: 0 0 27px !important;
        font-size: 12px !important;
    }

    .content.stats-content .team-header-meta,
    .content.stats-content .ld-country,
    .content.stats-content .ld-season {
        gap: 4px 7px !important;
        font-size: 9px !important;
        line-height: 1.25 !important;
    }

    .content.stats-content .team-header-meta-item,
    .content.stats-content .team-header-venue {
        gap: 3px !important;
        max-width: 100% !important;
    }

    .content.stats-content .team-standing-badge,
    .content.stats-content .cd-round-badge,
    .content.stats-content .ld-round-badge {
        padding: 3px 6px !important;
        font-size: 8px !important;
        line-height: 1.2 !important;
    }

    /* Form and tab navigation */
    .content.stats-content .team-form-row {
        gap: 4px !important;
        padding: 7px 9px !important;
        overflow: hidden !important;
    }

    .content.stats-content .team-form-label {
        font-size: 9px !important;
    }

    .content.stats-content .team-tabs,
    .content.stats-content .ld-tabs,
    .content.stats-content .cd-tabs,
    .content.stats-content .ss-tabs {
        width: 100% !important;
        gap: 3px !important;
        padding-inline: 6px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
    }

    .content.stats-content .team-tab,
    .content.stats-content .ld-tab,
    .content.stats-content .cd-tab,
    .content.stats-content .ss-tab {
        flex: 0 0 auto !important;
        min-height: 38px !important;
        padding: 9px 8px !important;
        font-size: 9px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        scroll-snap-align: start;
    }

    .content.stats-content .ld-tab i,
    .content.stats-content .cd-tab i {
        font-size: 9px !important;
    }

    .content.stats-content .cd-tab-count {
        min-width: 16px !important;
        height: 16px !important;
        padding: 0 4px !important;
        font-size: 8px !important;
    }

    .content.stats-content .team-tab-panel,
    .content.stats-content .ld-panel,
    .content.stats-content .cd-panel {
        width: 100% !important;
        padding: 10px 7px 14px !important;
    }

    .content.stats-content .standings-title-block {
        margin-block: 8px !important;
    }

    .content.stats-content .standings-title {
        font-size: 12px !important;
        line-height: 1.2 !important;
    }

    /* Team summary */
    .content.stats-content .team-next-fixture {
        padding: 9px 7px !important;
        border-radius: 7px !important;
    }

    .content.stats-content .team-next-fixture-teams {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr) !important;
        gap: 4px !important;
        width: 100% !important;
    }

    .content.stats-content .team-next-fixture-team {
        width: 100% !important;
        min-width: 0 !important;
    }

    .content.stats-content .team-next-fixture-team img {
        width: 29px !important;
        height: 29px !important;
    }

    .content.stats-content .team-next-fixture-team span,
    .content.stats-content .team-next-fixture-league-center,
    .content.stats-content .team-next-fixture-vs .vs-date {
        max-width: 100% !important;
        font-size: 8px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .content.stats-content .team-next-fixture-vs .vs-text {
        font-size: 12px !important;
    }

    .content.stats-content .team-next-fixture-vs .vs-time {
        font-size: 10px !important;
    }

    .content.stats-content .team-stats-grid,
    .content.stats-content .ss-grid {
        gap: 5px !important;
    }

    .content.stats-content .ss-card {
        padding: 9px 4px !important;
    }

    .content.stats-content .ss-card-val {
        font-size: 15px !important;
    }

    .content.stats-content .ss-card-lbl,
    .content.stats-content .ss-venue-title,
    .content.stats-content .ss-ou-lbl {
        font-size: 8px !important;
        line-height: 1.2 !important;
    }

    .content.stats-content .ss-bar-row {
        grid-template-columns: 70px minmax(0, 1fr) 37px !important;
        gap: 5px !important;
    }

    .content.stats-content .ss-bar-lbl,
    .content.stats-content .ss-bar-val {
        font-size: 9px !important;
    }

    .content.stats-content .ss-venue-row {
        gap: 6px !important;
    }

    .content.stats-content .ss-venue-card {
        padding: 9px 5px !important;
    }

    .content.stats-content .ss-ou-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 5px !important;
    }

    .content.stats-content .ss-ou-card {
        padding: 8px 4px !important;
    }

    .content.stats-content .ss-ou-val {
        font-size: 13px !important;
    }

    .content.stats-content .perf-comparison-row,
    .content.stats-content .perf-card,
    .content.stats-content .team-results-stats-row,
    .content.stats-content .team-overall-stats-card,
    .content.stats-content .last6-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .content.stats-content .team-results-stats-row {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
    }

    .content.stats-content .tos-header {
        gap: 7px !important;
        padding: 9px 8px !important;
    }

    .content.stats-content .tos-logo {
        width: 30px !important;
        height: 30px !important;
    }

    .content.stats-content .tos-team-name {
        font-size: 10px !important;
    }

    .content.stats-content .tos-played-badge,
    .content.stats-content .tos-section-lbl,
    .content.stats-content .tos-ou-lbl,
    .content.stats-content .tos-dual-pct {
        font-size: 8px !important;
    }

    .content.stats-content .tos-tabs {
        overflow-x: auto !important;
        scrollbar-width: none;
    }

    .content.stats-content .tos-tab {
        flex: 0 0 auto !important;
        padding: 7px 8px !important;
        font-size: 8px !important;
    }

    .content.stats-content .tos-panel {
        padding: 8px 7px 10px !important;
    }

    .content.stats-content .tos-goals-row {
        gap: 6px !important;
    }

    .content.stats-content .tos-goals-num {
        font-size: 14px !important;
    }

    .content.stats-content .perf-card {
        border-radius: 8px !important;
    }

    .content.stats-content .perf-card-header {
        padding: 9px !important;
        gap: 7px !important;
    }

    .content.stats-content .perf-logo {
        width: 38px !important;
        height: 38px !important;
    }

    .content.stats-content .perf-team-name {
        font-size: 12px !important;
    }

    .content.stats-content .perf-league-name,
    .content.stats-content .perf-position,
    .content.stats-content .perf-form-table,
    .content.stats-content .perf-stats-table {
        font-size: 9px !important;
    }

    .content.stats-content .perf-form-table th,
    .content.stats-content .perf-form-table td,
    .content.stats-content .perf-stats-table th,
    .content.stats-content .perf-stats-table td {
        padding: 6px 4px !important;
    }

    /* Team result and fixture rows */
    .content.stats-content .uf-league-header,
    .content.stats-content .tr-league-header {
        gap: 6px !important;
        padding: 7px 8px !important;
    }

    .content.stats-content .uf-league-logo,
    .content.stats-content .tr-league-logo {
        width: 16px !important;
        height: 16px !important;
    }

    .content.stats-content .uf-league-name,
    .content.stats-content .tr-league-name {
        font-size: 9px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .content.stats-content .uf-row,
    .content.stats-content .tr-row {
        display: grid !important;
        grid-template-columns: 47px minmax(0, 1fr) 24px !important;
        gap: 6px !important;
        padding: 8px 7px !important;
    }

    .content.stats-content .uf-date-col,
    .content.stats-content .tr-date-col {
        width: auto !important;
    }

    .content.stats-content .uf-date,
    .content.stats-content .uf-time,
    .content.stats-content .tr-date,
    .content.stats-content .tr-status {
        font-size: 8px !important;
    }

    .content.stats-content .uf-team,
    .content.stats-content .tr-team {
        gap: 4px !important;
    }

    .content.stats-content .uf-team-logo,
    .content.stats-content .tr-team-logo {
        width: 15px !important;
        height: 15px !important;
    }

    .content.stats-content .uf-team-name,
    .content.stats-content .tr-team-name,
    .content.stats-content .tr-score {
        font-size: 10px !important;
    }

    .content.stats-content .tr-filter-bar {
        gap: 4px !important;
        padding: 7px !important;
        overflow-x: auto !important;
        scrollbar-width: none;
    }

    .content.stats-content .tr-filter-btn {
        flex: 0 0 auto !important;
        min-height: 28px !important;
        padding: 5px 7px !important;
        font-size: 8px !important;
    }

    .content.stats-content .team-match-row {
        display: grid !important;
        grid-template-columns: 43px minmax(0, 1fr) 18px !important;
        gap: 5px !important;
        padding: 7px 5px !important;
    }

    .content.stats-content .team-match-date {
        min-width: 0 !important;
        font-size: 8px !important;
    }

    .content.stats-content .team-match-league-logo,
    .content.stats-content .team-match-venue-tag {
        display: none !important;
    }

    .content.stats-content .team-match-teams {
        gap: 3px !important;
    }

    .content.stats-content .team-match-team-logo {
        width: 14px !important;
        height: 14px !important;
    }

    .content.stats-content .team-match-home,
    .content.stats-content .team-match-away,
    .content.stats-content .team-match-score {
        font-size: 9px !important;
    }

    .content.stats-content .team-match-score {
        min-width: 28px !important;
        padding: 2px 4px !important;
    }

    .content.stats-content .team-match-outcome {
        width: 18px !important;
        height: 18px !important;
        font-size: 8px !important;
    }

    .content.stats-content .team-squad-row {
        gap: 7px !important;
        padding: 7px 6px !important;
    }

    .content.stats-content .squad-player-name {
        font-size: 10px !important;
    }

    /* Preserve all standings data without crushing columns. */
    .content.stats-content #panel-standings,
    .content.stats-content .ld-table-wrap,
    .content.stats-content .standings-table-container {
        overflow-x: auto !important;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }

    .content.stats-content .team-standings-table {
        min-width: 430px !important;
        font-size: 9px !important;
    }

    .content.stats-content .team-standings-table th,
    .content.stats-content .team-standings-table td {
        padding: 6px 5px !important;
    }

    /* League detail */
    .content.stats-content .ld-panel {
        overflow: hidden !important;
    }

    .content.stats-content .ld-predictions-round-block,
    .content.stats-content .ld-predictions-content,
    .content.stats-content .ld-trends-fixture-block,
    .content.stats-content .ld-stats-section {
        width: 100% !important;
        max-width: 100% !important;
    }

    .content.stats-content .ld-predictions-market-nav {
        margin-inline: -7px !important;
    }

    .content.stats-content .ld-trends-fixture-header {
        align-items: flex-start !important;
        gap: 6px !important;
        padding: 9px 8px !important;
    }

    .content.stats-content .ld-trends-fixture-matchup,
    .content.stats-content .ld-trends-fixture-meta {
        max-width: 100% !important;
        font-size: 9px !important;
    }

    .content.stats-content .ld-trends-fixture-names {
        font-size: 10px !important;
    }

    .content.stats-content .ld-trends-ai-block {
        padding: 9px 8px !important;
    }

    .content.stats-content .ld-trends-ai-header {
        gap: 5px !important;
    }

    .content.stats-content .ld-trends-ai-label,
    .content.stats-content .ld-trends-ai-conf,
    .content.stats-content .ld-trends-prediction-pill {
        font-size: 8px !important;
    }

    .content.stats-content .ld-trends-ai-pick {
        padding: 3px 6px !important;
        font-size: 9px !important;
    }

    .content.stats-content .ld-fixture-row {
        grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr) !important;
        gap: 4px !important;
        padding: 7px 5px !important;
    }

    .content.stats-content .ld-fixture-status {
        grid-column: 2 !important;
        font-size: 8px !important;
        text-align: center !important;
    }

    .content.stats-content .ld-fixture-team {
        gap: 4px !important;
        font-size: 9px !important;
        overflow: hidden !important;
    }

    .content.stats-content .ld-fixture-team span {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .content.stats-content .ld-fixture-score {
        padding: 3px 5px !important;
        font-size: 10px !important;
    }

    .content.stats-content .ls-card,
    .content.stats-content .leaders-card {
        padding: 10px 7px !important;
        border-radius: 8px !important;
    }

    .content.stats-content .ls-bar-row {
        grid-template-columns: minmax(54px, .95fr) minmax(38px, 1fr) 28px 32px !important;
        gap: 4px !important;
    }

    .content.stats-content .ls-team-header,
    .content.stats-content .ls-team-row {
        grid-template-columns: 17px minmax(0, 1fr) 32px 39px !important;
        gap: 4px !important;
        padding-inline: 3px !important;
    }

    .content.stats-content .ls-form-table .ls-team-header,
    .content.stats-content .ls-form-table .ls-team-row {
        grid-template-columns: 17px minmax(0, 1fr) minmax(50px, auto) 29px !important;
    }

    .content.stats-content .ls-team-logo {
        width: 15px !important;
        height: 15px !important;
    }

    .content.stats-content .ls-team-name,
    .content.stats-content .ls-team-stat,
    .content.stats-content .ls-team-rank {
        font-size: 9px !important;
    }

    .content.stats-content .ld-scorer-row {
        grid-template-columns: 22px minmax(0, 1fr) auto !important;
        gap: 5px !important;
        padding: 7px 5px !important;
        font-size: 10px !important;
    }

    .content.stats-content .leaders-title {
        font-size: 11px !important;
        letter-spacing: .7px !important;
    }

    .content.stats-content .leaders-league-badge {
        font-size: 8px !important;
        padding: 3px 6px !important;
    }

    /* Country accordion and its asynchronously loaded cards */
    .content.stats-content .cd-panel {
        padding-inline: 5px !important;
    }

    .content.stats-content .cd-league-block {
        width: 100% !important;
        border-radius: 6px !important;
    }

    .content.stats-content .cd-league-header {
        gap: 5px !important;
        padding: 9px 7px !important;
    }

    .content.stats-content .cd-league-left {
        flex: 1 1 auto !important;
        gap: 6px !important;
        overflow: hidden !important;
    }

    .content.stats-content .cd-league-logo {
        width: 17px !important;
        height: 17px !important;
    }

    .content.stats-content .cd-league-name {
        display: block !important;
        max-width: 100% !important;
        font-size: 9px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .content.stats-content .cd-league-right {
        flex: 0 0 auto !important;
        gap: 5px !important;
    }

    .content.stats-content .cd-league-count {
        font-size: 8px !important;
        white-space: nowrap !important;
    }

    .content.stats-content .cd-chevron {
        font-size: 9px !important;
    }

    .content.stats-content .cd-league-content {
        width: 100% !important;
        padding: 7px 3px 9px !important;
        overflow: hidden !important;
    }

    .content.stats-content .cd-league-content .prediction-card {
        width: 100% !important;
        max-width: 100% !important;
        margin-inline: 0 !important;
    }

    .content.stats-content .cd-empty-state {
        padding: 28px 10px !important;
    }

    .content.stats-content .cd-empty-state i {
        font-size: 24px !important;
    }

    .content.stats-content .cd-empty-state p,
    .content.stats-content .cd-loading {
        font-size: 9px !important;
    }
}

@media (max-width: 300px) {
    .content.stats-content .team-header,
    .content.stats-content .ld-header,
    .content.stats-content .cd-header {
        padding-inline: 7px !important;
    }

    .content.stats-content .team-header-logo,
    .content.stats-content .team-header-logo-placeholder,
    .content.stats-content .ld-logo,
    .content.stats-content .ld-logo-placeholder {
        width: 39px !important;
        height: 39px !important;
        flex-basis: 39px !important;
    }

    .content.stats-content .team-header-name,
    .content.stats-content .ld-league-name,
    .content.stats-content .cd-country-name {
        font-size: 13px !important;
    }

    .content.stats-content .team-tab,
    .content.stats-content .ld-tab,
    .content.stats-content .cd-tab,
    .content.stats-content .ss-tab {
        min-height: 34px !important;
        padding: 8px 7px !important;
        font-size: 8px !important;
    }

    .content.stats-content .team-next-fixture-teams {
        grid-template-columns: minmax(0, 1fr) 55px minmax(0, 1fr) !important;
    }

    .content.stats-content .ss-bar-row {
        grid-template-columns: 62px minmax(0, 1fr) 33px !important;
    }

    .content.stats-content .uf-row,
    .content.stats-content .tr-row {
        grid-template-columns: 42px minmax(0, 1fr) 21px !important;
        padding-inline: 5px !important;
    }

    .content.stats-content .ld-fixture-row {
        grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr) !important;
    }

    .content.stats-content .cd-league-count {
        max-width: 52px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

/* Team page tabs and trends accessibility on narrow screens. */
@media (max-width: 380px) {
    .content.stats-content .team-tabs {
        gap: 5px !important;
        padding-block: 6px !important;
        border-bottom: 1px solid var(--border-color) !important;
    }

    .content.stats-content .team-tab {
        min-height: 30px !important;
        padding: 7px 9px !important;
        border: 1px solid transparent !important;
        border-radius: 7px !important;
        color: var(--text-secondary) !important;
        background: transparent !important;
    }

    .content.stats-content .team-tab:hover,
    .content.stats-content .team-tab:focus-visible {
        color: var(--text-primary) !important;
        background: var(--bg-secondary) !important;
        border-color: var(--border-color) !important;
        outline: none !important;
    }

    .content.stats-content .team-tab.active {
        color: #ffffff !important;
        background: var(--accent-green, #16a34a) !important;
        border-color: var(--accent-green, #16a34a) !important;
        box-shadow: 0 2px 8px rgba(22, 163, 74, 0.24) !important;
    }

    .content.stats-content .trends-card {
        overflow: visible !important;
        padding: 10px !important;
    }

    .content.stats-content .trends-controls {
        width: 100% !important;
        margin-bottom: 10px !important;
    }

    .content.stats-content .trends-dropdown-wrap,
    .content.stats-content .trends-dropdown {
        width: 100% !important;
        min-width: 0 !important;
    }

    .content.stats-content .trends-dropdown-menu {
        position: static !important;
        width: 100% !important;
        max-height: min(44vh, 280px) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
        touch-action: pan-y !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-gutter: stable;
        z-index: auto !important;
    }

    .content.stats-content .trends-dropdown[data-open="true"] .trends-dropdown-menu {
        display: block !important;
    }

    .content.stats-content .trends-dropdown[data-open="true"] .trends-dropdown-btn {
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }

    .content.stats-content .trends-option {
        min-height: 38px !important;
        padding: 9px 10px !important;
        font-size: 10px !important;
    }

    .content.stats-content .trends-result {
        min-height: 0 !important;
    }

    .content.stats-content .trends-trend-sentence {
        font-size: 10px !important;
        line-height: 1.45 !important;
    }

    .content.stats-content .trends-trend-side {
        gap: 5px !important;
        padding-left: 24px !important;
    }
}

.dark-mode .content.stats-content .team-tab {
    color: #cbd5e1 !important;
}

.dark-mode .content.stats-content .team-tab:hover,
.dark-mode .content.stats-content .team-tab:focus-visible {
    color: #ffffff !important;
    background: #243247 !important;
    border-color: #52627a !important;
}

.dark-mode .content.stats-content .team-tab.active {
    color: #ffffff !important;
    background: #16865a !important;
    border-color: #35c987 !important;
}

.dark-mode .content.stats-content .trends-card,
.dark-mode .content.stats-content .trends-dropdown-btn,
.dark-mode .content.stats-content .trends-dropdown-menu {
    background: var(--bg-primary) !important;
    border-color: #52627a !important;
}

.dark-mode .content.stats-content .trends-card-header {
    border-bottom-color: #3f4f67 !important;
}

.dark-mode .content.stats-content .trends-dropdown-label,
.dark-mode .content.stats-content .trends-loading,
.dark-mode .content.stats-content .trends-empty {
    color: #b8c4d6 !important;
}

.dark-mode .content.stats-content .trends-dropdown-val,
.dark-mode .content.stats-content .trends-option,
.dark-mode .content.stats-content .trends-trend-sentence,
.dark-mode .content.stats-content .trends-trend-sentence strong {
    color: #f8fafc !important;
}

.dark-mode .content.stats-content .trends-option {
    border-bottom-color: #34435a !important;
}

.dark-mode .content.stats-content .trends-option:hover {
    color: #ffffff !important;
    background: #26364d !important;
}

.dark-mode .content.stats-content .trends-option.active {
    color: #ffffff !important;
    background: #1d4f41 !important;
}

.dark-mode .content.stats-content .trends-dropdown .trends-chevron path {
    stroke: #dbeafe !important;
}

/* Match details Head-to-Head: preserve the comparison hierarchy on narrow screens. */
@media (max-width: 380px) {
    .content.stats-content .h2h-card {
        padding: 9px 7px 12px !important;
        overflow: hidden !important;
    }

    .content.stats-content .h2h-title-block {
        margin-bottom: 10px !important;
    }

    .content.stats-content .h2h-title {
        padding: 8px 0 6px !important;
        font-size: 14px !important;
        line-height: 1.15 !important;
        letter-spacing: 1px !important;
    }

    .content.stats-content .h2h-red-stripe {
        height: 5px !important;
    }

    .content.stats-content .h2h-main {
        display: grid !important;
        grid-template-columns:
            minmax(58px, .8fr)
            minmax(90px, 1.15fr)
            minmax(58px, .8fr) !important;
        grid-template-rows: auto auto !important;
        align-items: start !important;
        gap: 6px 4px !important;
        width: 100% !important;
    }

    .content.stats-content .h2h-team {
        width: 100% !important;
        min-width: 0 !important;
        grid-row: 1 !important;
    }

    .content.stats-content .h2h-team:first-child {
        grid-column: 1 !important;
    }

    .content.stats-content .h2h-team:last-child {
        grid-column: 3 !important;
    }

    .content.stats-content .h2h-team img {
        width: 32px !important;
        height: 32px !important;
    }

    .content.stats-content .h2h-team strong {
        margin-top: 3px !important;
        font-size: 9px !important;
        line-height: 1.25 !important;
        overflow-wrap: anywhere !important;
    }

    .content.stats-content .h2h-team > span {
        margin-top: 3px !important;
        font-size: 8px !important;
        line-height: 1.25 !important;
    }

    .content.stats-content .h2h-center {
        display: contents !important;
    }

    .content.stats-content .h2h-total,
    .content.stats-content .h2h-bar,
    .content.stats-content .h2h-results {
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: 100% !important;
    }

    .content.stats-content .h2h-total {
        align-self: start !important;
        margin: 0 !important;
        padding: 1px 0 !important;
        font-size: 10px !important;
        line-height: 1.25 !important;
    }

    .content.stats-content .h2h-bar {
        align-self: start !important;
        height: 13px !important;
        margin: 35px 0 0 !important;
        border-radius: 5px !important;
    }

    .content.stats-content .h2h-results {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto !important;
        align-items: start !important;
        gap: 3px !important;
        align-self: start !important;
        margin: 54px 0 0 !important;
        font-size: 8px !important;
        line-height: 1.2 !important;
    }

    .content.stats-content .h2h-results > span {
        min-width: 0 !important;
        white-space: nowrap !important;
    }

    .content.stats-content .h2h-results > span:nth-child(2) {
        text-align: center !important;
        white-space: normal !important;
    }

    .content.stats-content .h2h-results em {
        display: block !important;
        margin-top: 1px !important;
    }

    .content.stats-content .h2h-goals-row {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        gap: 5px !important;
        margin: 2px 0 0 !important;
    }

    .content.stats-content .h2h-goals {
        flex: 1 1 0 !important;
        max-width: 112px !important;
        justify-content: center !important;
        gap: 3px !important;
        padding: 5px 9px !important;
    }

    .content.stats-content .h2h-goals-num {
        font-size: 14px !important;
        line-height: 1 !important;
    }

    .content.stats-content .h2h-goals-lbl {
        font-size: 8px !important;
        letter-spacing: .5px !important;
    }

    .content.stats-content .h2h-ball {
        flex: 0 0 auto !important;
        font-size: 15px !important;
    }
}

@media (max-width: 300px) {
    .content.stats-content .h2h-main {
        grid-template-columns:
            minmax(48px, .75fr)
            minmax(76px, 1.2fr)
            minmax(48px, .75fr) !important;
        column-gap: 2px !important;
    }

    .content.stats-content .h2h-team img {
        width: 28px !important;
        height: 28px !important;
    }

    .content.stats-content .h2h-team strong {
        font-size: 8px !important;
    }

    .content.stats-content .h2h-team > span,
    .content.stats-content .h2h-results {
        font-size: 7px !important;
    }

    .content.stats-content .h2h-bar {
        margin-top: 32px !important;
    }

    .content.stats-content .h2h-results {
        margin-top: 50px !important;
    }

    .content.stats-content .h2h-goals {
        padding-inline: 6px !important;
    }

    .content.stats-content .h2h-goals-num {
        font-size: 12px !important;
    }

    .content.stats-content .h2h-goals-lbl {
        font-size: 7px !important;
    }
}

/* =========================================================
   LIVESCORES: COMPLETE NARROW-MOBILE ROWS AND TAB ACCESS
========================================================= */
@media (max-width: 380px) {
    #livescores-ajax-container {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    #livescores-ajax-container .center-header {
        position: relative !important;
        z-index: 3 !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
        overflow: visible !important;
    }

    #livescores-ajax-container .ls-date-control-row {
        display: grid !important;
        grid-template-columns: 42px minmax(0, 1fr) !important;
        gap: 7px !important;
        width: 100% !important;
        align-items: center !important;
    }

    #livescores-ajax-container .ls-sound-toggle-slot {
        width: 42px !important;
    }

    #livescores-ajax-container .ls-sound-toggle-slot .gl-sound-toggle-btn {
        width: 38px !important;
        height: 38px !important;
    }

    #livescores-ajax-container .date-navigator {
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        justify-content: space-between !important;
    }

    #livescores-ajax-container .current-date {
        min-width: 0 !important;
        padding-inline: 5px !important;
        font-size: 10px !important;
        white-space: nowrap !important;
    }

    #ls-status-filters.status-filters {
        position: relative !important;
        z-index: 4 !important;
        display: flex !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 4px !important;
        gap: 2px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        pointer-events: auto !important;
        touch-action: pan-x !important;
        scroll-padding-inline: 10px;
        box-sizing: border-box !important;
    }

    #ls-status-filters .status-btn {
        position: relative !important;
        z-index: 1 !important;
        flex: 0 0 auto !important;
        min-width: 64px !important;
        min-height: 34px !important;
        padding: 6px 10px !important;
        font-size: 9px !important;
        pointer-events: auto !important;
        cursor: pointer !important;
    }

    #ls-status-filters .status-btn[data-status="scheduled"] {
        min-width: 82px !important;
    }

    #livescores-ajax-container .ls-league-group {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
        border-radius: 7px !important;
    }

    #livescores-ajax-container .ls-league-header {
        min-height: 58px !important;
        gap: 8px !important;
        padding: 8px 9px !important;
    }

    #livescores-ajax-container .ls-league-info {
        gap: 9px !important;
        overflow: hidden !important;
    }

    #livescores-ajax-container .ls-league-logo,
    #livescores-ajax-container .ls-league-logo-fallback {
        width: 28px !important;
        height: 28px !important;
    }

    #livescores-ajax-container .ls-league-copy {
        gap: 2px !important;
    }

    #livescores-ajax-container .ls-league-name {
        min-width: 0 !important;
        font-size: 11px !important;
    }

    #livescores-ajax-container .ls-league-country {
        max-width: 120px !important;
        font-size: 9px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    #livescores-ajax-container .ls-country-flag {
        width: 14px !important;
        height: 10px !important;
    }

    #livescores-ajax-container .ls-league-meta {
        gap: 5px !important;
    }

    #livescores-ajax-container .ls-league-count {
        min-width: 16px !important;
        height: auto !important;
        padding: 0 !important;
        font-size: 10px !important;
        background: transparent !important;
    }

    #livescores-ajax-container .ls-chevron-button {
        width: 32px !important;
        height: 32px !important;
    }

    #livescores-ajax-container .ls-chevron-slot {
        width: 34px !important;
    }

    #livescores-ajax-container .ls-odds-header-labels {
        display: none !important;
    }

    #livescores-ajax-container .ls-match-row,
    #livescores-ajax-container .ls-match-row--odds {
        display: grid !important;
        grid-template-columns: 43px minmax(0, 1fr) 22px 44px !important;
        grid-template-areas:
            "time teams score action"
            "time teams score action" !important;
        align-items: center !important;
        gap: 0 5px !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 66px !important;
        margin: 0 !important;
        padding: 8px 7px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    #livescores-ajax-container .ls-col-time {
        grid-area: time !important;
        width: auto !important;
        min-width: 0 !important;
        align-items: flex-start !important;
    }

    #livescores-ajax-container .ls-time-text,
    #livescores-ajax-container .ls-minute,
    #livescores-ajax-container .ls-disrupted-label,
    #livescores-ajax-container .ls-col-time .pc-minute-label {
        max-width: 43px !important;
        font-size: 9px !important;
        line-height: 1.15 !important;
        overflow-wrap: anywhere !important;
    }

    #livescores-ajax-container .ls-col-teams,
    #livescores-ajax-container .ls-match-row--odds .ls-col-teams {
        grid-area: teams !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        gap: 7px !important;
    }

    #livescores-ajax-container .ls-team-line-row {
        width: 100% !important;
        min-width: 0 !important;
        gap: 5px !important;
    }

    #livescores-ajax-container .ls-crest,
    #livescores-ajax-container .ls-crest-ph {
        width: 17px !important;
        height: 17px !important;
        flex: 0 0 17px !important;
    }

    #livescores-ajax-container .ls-team-name,
    #livescores-ajax-container .ls-match-row--odds .ls-team-name {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        font-size: 10px !important;
        line-height: 1.2 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    #livescores-ajax-container .ls-col-score,
    #livescores-ajax-container .ls-match-row--odds .ls-col-score {
        grid-area: score !important;
        width: 22px !important;
        min-width: 22px !important;
    }

    #livescores-ajax-container .ls-score-num {
        font-size: 11px !important;
    }

    #livescores-ajax-container .ls-col-actions,
    #livescores-ajax-container .ls-match-row--odds .ls-col-right-action {
        grid-area: action !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: center !important;
        width: 44px !important;
        min-width: 44px !important;
        gap: 4px !important;
        padding: 0 !important;
    }

    #livescores-ajax-container .ls-stats-link {
        width: 100% !important;
        min-width: 0 !important;
        height: 30px !important;
        padding: 0 !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 12px !important;
    }

    #livescores-ajax-container .ls-preview-btn.pc-preview-btn {
        width: 100% !important;
        min-width: 0 !important;
        padding: 4px 2px !important;
        font-size: 6px !important;
        text-align: center !important;
    }

    .pc-preview-btn .pc-preview-tooltip,
    .pc-preview-btn .pc-preview-tooltip::after {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        content: none !important;
        pointer-events: none !important;
    }

    #livescores-ajax-container .ls-bet-live-widget {
        width: 44px !important;
        min-width: 44px !important;
        height: 31px !important;
        padding: 0 5px !important;
    }

    /* Odds use the full center width on a dedicated second row. */
    #livescores-ajax-container .ls-match-row--odds {
        grid-template-rows: auto auto !important;
        grid-template-areas:
            "time teams score action"
            ". odds odds action" !important;
        min-height: 104px !important;
        row-gap: 7px !important;
    }

    #livescores-ajax-container .ls-match-row--odds .ls-col-odds {
        grid-area: odds !important;
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        width: 100% !important;
        min-width: 0 !important;
        gap: 4px !important;
        margin: 0 !important;
    }

    #livescores-ajax-container .ls-match-row--odds .ls-odd-box {
        width: 100% !important;
        min-width: 0 !important;
        height: 30px !important;
        padding-inline: 2px !important;
        font-size: 9px !important;
    }

    #livescores-ajax-container .ls-match-row--odds > div[style*="margin-right"] {
        display: none !important;
    }

    #livescores-ajax-container .ls-empty-league,
    #livescores-ajax-container .ls-no-matches {
        padding: 24px 10px !important;
        font-size: 10px !important;
    }
}

@media (max-width: 300px) {
    #livescores-ajax-container .ls-match-row,
    #livescores-ajax-container .ls-match-row--odds {
        grid-template-columns: 38px minmax(0, 1fr) 18px 39px !important;
        gap: 0 3px !important;
        padding-inline: 5px !important;
    }

    #livescores-ajax-container .ls-time-text,
    #livescores-ajax-container .ls-minute,
    #livescores-ajax-container .ls-disrupted-label,
    #livescores-ajax-container .ls-col-time .pc-minute-label {
        max-width: 38px !important;
        font-size: 8px !important;
    }

    #livescores-ajax-container .ls-team-name,
    #livescores-ajax-container .ls-match-row--odds .ls-team-name {
        font-size: 9px !important;
    }

    #livescores-ajax-container .ls-crest,
    #livescores-ajax-container .ls-crest-ph {
        width: 15px !important;
        height: 15px !important;
        flex-basis: 15px !important;
    }

    #livescores-ajax-container .ls-col-actions,
    #livescores-ajax-container .ls-match-row--odds .ls-col-right-action,
    #livescores-ajax-container .ls-bet-live-widget {
        width: 39px !important;
        min-width: 39px !important;
    }

    #livescores-ajax-container .ls-bet-live-widget {
        padding-inline: 4px !important;
    }

    #livescores-ajax-container .ls-bet-live-slide {
        font-size: 7px !important;
    }

    #ls-status-filters .status-btn {
        min-width: 58px !important;
        padding-inline: 8px !important;
        font-size: 8px !important;
    }
}

/* Compact the More drawer instead of allowing desktop-sized menu spacing. */
@media (max-width: 380px) {
    .mobile-more-drawer {
        max-height: 88vh !important;
        border-top-left-radius: 13px !important;
        border-top-right-radius: 13px !important;
    }

    .mobile-more-header {
        padding: 11px 12px 8px !important;
    }

    .mobile-more-kicker {
        font-size: 8px !important;
    }

    .mobile-more-header h2 {
        font-size: 18px !important;
    }

    .mobile-more-close {
        width: 32px !important;
        height: 32px !important;
        border-radius: 9px !important;
    }

    .mobile-more-content {
        padding: 8px 8px 64px !important;
    }

    .mobile-more-section {
        margin-bottom: 11px !important;
    }

    .mobile-more-section h3 {
        margin-bottom: 5px !important;
        font-size: 9px !important;
    }

    .mobile-more-item,
    .mobile-more-tools .menu-dropdown-item {
        min-height: 34px !important;
        gap: 5px !important;
        padding: 6px 8px !important;
        font-size: 10px !important;
    }

    .mobile-more-item i,
    .mobile-more-tools .menu-dropdown-item i {
        width: 14px !important;
        flex-basis: 14px !important;
        margin-right: 3px !important;
        font-size: 10px !important;
    }

    .mobile-more-select {
        padding: 8px !important;
    }

    .mobile-more-select > span,
    .mobile-more-choice-grid button {
        font-size: 9px !important;
    }
}

/* Match preview article: final compression for narrow handsets. */
@media (max-width: 380px) {
    .match-preview-container {
        width: 100% !important;
        min-width: 0 !important;
        padding: 12px 8px 22px !important;
        box-sizing: border-box !important;
    }

    .match-preview-container * {
        max-width: 100%;
        box-sizing: border-box;
    }

    .match-preview-container .mp-title {
        margin-bottom: 12px !important;
        padding: 8px 0 12px !important;
        font-size: 20px !important;
        line-height: 1.18 !important;
        overflow-wrap: anywhere !important;
    }

    .match-preview-container .mp-meta {
        gap: 5px !important;
        margin-bottom: 12px !important;
        font-size: 10px !important;
    }

    .match-preview-container .mp-meta > span:first-child,
    .match-preview-container .mp-meta > span:last-child,
    .match-preview-container .mp-meta .league-name {
        font-size: 10px !important;
        line-height: 1.3 !important;
    }

    .match-preview-container .mp-meta .action-badge {
        min-height: 25px !important;
        padding: 4px 7px !important;
        font-size: 8px !important;
    }

    .match-preview-container .auto-hero {
        height: 198px !important;
        margin-bottom: 14px !important;
    }

    .match-preview-container .auto-hero-watermark {
        top: 10px !important;
        font-size: 34px !important;
    }

    .match-preview-container .auto-hero-box {
        width: calc(100% - 18px) !important;
        padding: 7px 0 !important;
    }

    .match-preview-container .auto-hero-league {
        margin-bottom: 6px !important;
        font-size: 16px !important;
    }

    .match-preview-container .auto-hero-teams-panel {
        min-height: 72px !important;
        gap: 10px !important;
        padding: 10px 7px !important;
    }

    .match-preview-container .auto-hero-logo {
        width: 42px !important;
        height: 42px !important;
    }

    .match-preview-container .auto-hero-date {
        font-size: 14px !important;
    }

    .match-preview-container .auto-hero-footer {
        font-size: 11px !important;
    }

    .match-preview-container .auto-hero-brand img {
        height: 25px !important;
    }

    .match-preview-container .mp-stats-bar {
        gap: 7px !important;
        padding: 10px !important;
        margin-bottom: 14px !important;
        font-size: 9px !important;
    }

    .match-preview-container .mp-poll-card,
    .match-preview-container .mp-dashboard-card,
    .match-preview-container .premium-pick-box,
    .match-preview-container .form-timeline-box,
    .match-preview-container .mp-h2h-box {
        padding: 10px !important;
        margin-bottom: 12px !important;
        border-radius: 8px !important;
    }

    .match-preview-container .mp-poll-btn {
        min-height: 48px !important;
        font-size: 10px !important;
    }

    .match-preview-container .mp-content {
        margin-top: 18px !important;
        font-size: 13px !important;
        line-height: 1.55 !important;
    }

    .match-preview-container .mp-content p {
        margin-bottom: 16px !important;
    }

    .match-preview-container .mp-content h2 {
        margin-top: 25px !important;
        margin-bottom: 10px !important;
        font-size: 19px !important;
    }

    .match-preview-container .mp-content h3 {
        margin-top: 20px !important;
        font-size: 16px !important;
    }

    .match-preview-container .mp-content blockquote {
        margin-bottom: 18px !important;
        padding: 11px !important;
        font-size: 13px !important;
        line-height: 1.55 !important;
    }

    .match-preview-container .h2h-table {
        min-width: 430px !important;
    }

    .match-preview-container .h2h-table th,
    .match-preview-container .h2h-table td {
        padding: 7px !important;
        font-size: 9px !important;
    }
}

@media (max-width: 300px) {
    .match-preview-container {
        padding-inline: 6px !important;
    }

    .match-preview-container .mp-title {
        font-size: 17px !important;
    }

    .match-preview-container .auto-hero {
        height: 178px !important;
    }

    .match-preview-container .auto-hero-logo {
        width: 36px !important;
        height: 36px !important;
    }

    .match-preview-container .mp-content {
        font-size: 12px !important;
    }
}

/* Stats page mobile typography normalization.
   This sits late in the mobile cascade so narrow screens do not inherit the
   larger desktop/tablet type scale used by the match stats modules. */
@media (max-width: 640px) {
    .content.stats-content {
        font-size: 12px !important;
        line-height: 1.35 !important;
    }

    .content.stats-content .standings-title-block {
        padding: 12px 10px 10px !important;
        text-align: center;
    }

    .content.stats-content .standings-title {
        font-size: 14px !important;
        line-height: 1.2 !important;
        letter-spacing: 0.08em !important;
        font-weight: 800 !important;
    }

    .content.stats-content .standings-league-name {
        margin-top: 4px !important;
        font-size: 11px !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;
    }

    .content.stats-content .standings-nav-tabs,
    .content.stats-content .standings-tabs,
    .content.stats-content .standings-group-tabs,
    .content.stats-content .standings-secondary-tabs {
        gap: 7px !important;
        padding-inline: 10px !important;
    }

    .content.stats-content .standings-nav-tab,
    .content.stats-content .standings-tab,
    .content.stats-content .standings-group-tab,
    .content.stats-content .standings-secondary-tab {
        min-height: 32px !important;
        padding: 7px 12px !important;
        border-radius: 18px !important;
        font-size: 10px !important;
        line-height: 1 !important;
        letter-spacing: 0.03em !important;
        font-weight: 800 !important;
    }

    .dark-mode .content.stats-content .standings-table {
        min-width: 520px !important;
    }

    .dark-mode .content.stats-content .standings-table th,
    .dark-mode .content.stats-content .standings-table td {
        height: 39px !important;
        padding: 6px 6px !important;
        font-size: 10px !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
    }

    .dark-mode .content.stats-content .standings-table th {
        font-size: 8.5px !important;
        letter-spacing: 0.08em !important;
        font-weight: 800 !important;
    }

    .dark-mode .content.stats-content .standings-table th.col-rank,
    .dark-mode .content.stats-content .standings-table td.col-rank {
        width: 34px !important;
        min-width: 34px !important;
        max-width: 34px !important;
    }

    .dark-mode .content.stats-content .standings-table th.col-team,
    .dark-mode .content.stats-content .standings-table td.col-team {
        left: 34px !important;
        width: 122px !important;
        min-width: 122px !important;
        max-width: 122px !important;
    }

    .dark-mode .content.stats-content .standings-table .rank-badge {
        width: 24px !important;
        min-width: 24px !important;
        height: 24px !important;
        border-radius: 7px !important;
        font-size: 11px !important;
        line-height: 1 !important;
    }

    .dark-mode .content.stats-content .standings-table .team-logo-sm {
        width: 20px !important;
        height: 20px !important;
    }

    .dark-mode .content.stats-content .standings-table .team-cell {
        gap: 6px !important;
    }

    .dark-mode .content.stats-content .standings-table .team-name-standing {
        max-width: 82px !important;
        font-size: 10.5px !important;
        line-height: 1.15 !important;
        font-weight: 800 !important;
    }

    .content.stats-content .stat_card_header,
    .content.stats-content .h2h-title,
    .content.stats-content .last6-title,
    .content.stats-content .perf-team-name,
    .content.stats-content .pea-outcome-title,
    .content.stats-content .pea-signals-title,
    .content.stats-content .ou-team-name,
    .content.stats-content .btts-team-name,
    .content.stats-content .mtr-team-name,
    .content.stats-content .fhg-team-name,
    .content.stats-content .shg-team-name {
        font-size: 12px !important;
        line-height: 1.2 !important;
    }

    .content.stats-content .pm-tab,
    .content.stats-content .last6-tab,
    .content.stats-content .ms-time-tab,
    .content.stats-content .ms-cat-tab,
    .content.stats-content .pm-view-btn {
        font-size: 10px !important;
        line-height: 1.1 !important;
    }

    .content.stats-content .pm-date,
    .content.stats-content .pm-ht,
    .content.stats-content .pm-league-abbr,
    .content.stats-content .perf-position,
    .content.stats-content .pea-stat-label,
    .content.stats-content .pea-conf-label,
    .content.stats-content .pea-sig-desc,
    .content.stats-content .trends-trend-side,
    .content.stats-content .trends-league-badge {
        font-size: 10px !important;
        line-height: 1.25 !important;
    }
}

@media (max-width: 340px) {
    .content.stats-content .standings-title {
        font-size: 13px !important;
    }

    .content.stats-content .standings-nav-tab,
    .content.stats-content .standings-tab,
    .content.stats-content .standings-group-tab,
    .content.stats-content .standings-secondary-tab {
        padding-inline: 10px !important;
        font-size: 9.5px !important;
    }

    .dark-mode .content.stats-content .standings-table {
        min-width: 500px !important;
    }

    .dark-mode .content.stats-content .standings-table th,
    .dark-mode .content.stats-content .standings-table td {
        height: 37px !important;
        padding: 5px 5px !important;
        font-size: 9.5px !important;
    }

    .dark-mode .content.stats-content .standings-table th.col-team,
    .dark-mode .content.stats-content .standings-table td.col-team {
        width: 116px !important;
        min-width: 116px !important;
        max-width: 116px !important;
    }

    .dark-mode .content.stats-content .standings-table .team-name-standing {
        max-width: 76px !important;
        font-size: 10px !important;
    }
}

/* Complete narrow-mobile pass for every page exposed by the More > Tools menu. */
@media (max-width: 380px) {
    .af-page,
    .glm-page,
    .lp-container,
    .ep-page,
    .lmm-page,
    .pma-page,
    .vte-page,
    .mt-page,
    .mt-panel,
    .mt-content,
    .ta-page,
    .ta-content,
    .tc-page,
    .pc-page,
    .pc-main {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .af-page *,
    .glm-page *,
    .lp-container *,
    .ep-page *,
    .lmm-page *,
    .pma-page *,
    .vte-page *,
    .mt-page *,
    .mt-panel *,
    .mt-content *,
    .ta-page *,
    .tc-page *,
    .pc-page * {
        box-sizing: border-box;
        min-width: 0;
    }

    /* Shared tool shells and compact headings. */
    .af-page,
    .glm-page,
    .ep-page,
    .lmm-page,
    .pma-page,
    .vte-page,
    .ta-page,
    .tc-page,
    .pc-page {
        padding-inline: 6px !important;
        gap: 8px !important;
    }

    .lp-container,
    .mt-panel,
    .mt-content {
        padding-inline: 6px !important;
    }

    .af-panel-header,
    .af-results-header,
    .glm-panel-header,
    .glm-results-header,
    .lp-header,
    .ep-hdr,
    .lmm-header,
    .pma-header,
    .pma-results-header,
    .vte-panel-header,
    .vte-results-header,
    .mt-header,
    .ta-panel-header,
    .ta-card-header,
    .tc-selectors-title,
    .tc-card-header,
    .pc-tab-header {
        gap: 7px !important;
        padding: 9px !important;
        flex-wrap: wrap !important;
    }

    .af-panel-title,
    .af-results-title,
    .glm-panel-title,
    .glm-results-title,
    .lp-title,
    .ep-hdr-title,
    .lmm-title,
    .pma-title,
    .vte-panel-title,
    .vte-results-title,
    .mt-title,
    .ta-panel-title,
    .ta-card-title,
    .tc-selectors-title,
    .pc-tab-title {
        font-size: 14px !important;
        line-height: 1.2 !important;
        overflow-wrap: anywhere;
    }

    .af-panel,
    .af-results,
    .glm-panel,
    .glm-results,
    .ep-panel,
    .ep-main,
    .lmm-main,
    .pma-panel,
    .pma-main,
    .vte-panel,
    .vte-results,
    .ta-panel,
    .ta-content,
    .tc-selectors-card,
    .tc-card,
    .pc-sidebar,
    .pc-main {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .af-section-header,
    .glm-section-header,
    .vte-section-header {
        min-height: 48px !important;
        padding: 8px !important;
        gap: 6px !important;
    }

    .af-section-body,
    .glm-section-body,
    .vte-section-body,
    .ta-card-body,
    .tc-card-body {
        padding: 8px !important;
    }

    .af-section-name,
    .glm-section-name,
    .vte-section-name {
        font-size: 10px !important;
        overflow-wrap: anywhere;
    }

    .af-section-sub,
    .glm-section-sub,
    .vte-section-sub {
        font-size: 8px !important;
        line-height: 1.25 !important;
    }

    /* Advanced Filters and GoalLogic Machine. */
    .af-date-group,
    .glm-date-group,
    .af-confidence-grid,
    .glm-confidence-grid,
    .af-streak-grid,
    .glm-streak-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 5px !important;
    }

    .af-results-actions,
    .glm-results-actions {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 5px !important;
    }

    .af-sort-select,
    .glm-sort-select {
        width: 100% !important;
        max-width: none !important;
    }

    .af-match-row,
    .glm-match-row {
        display: grid !important;
        grid-template-columns: 36px minmax(0, 1fr) 54px !important;
        gap: 5px !important;
        padding: 8px 6px !important;
    }

    .af-team-name,
    .glm-team-name,
    .af-league-name,
    .glm-league-name {
        font-size: 9px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .af-match-odds,
    .glm-match-odds,
    .af-match-signal,
    .glm-match-signal {
        font-size: 9px !important;
    }

    /* League Performance keeps meaningful columns and scrolls as a table. */
    .lp-header,
    .lp-controls {
        align-items: stretch !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    .lp-search,
    .lp-custom-dropdown {
        width: 100% !important;
    }

    .lp-table-wrapper {
        width: 100% !important;
        overflow-x: auto !important;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }

    .lp-table {
        min-width: 520px !important;
        table-layout: fixed;
    }

    .lp-table th,
    .lp-table td {
        padding: 7px 5px !important;
        font-size: 9px !important;
    }

    .lp-league-name,
    .lp-league-country {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Expert Picks. */
    .ep-hdr {
        align-items: flex-start !important;
    }

    .ep-hdr-right {
        width: 100% !important;
        flex-wrap: wrap !important;
    }

    .ep-dash {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    .ep-dash-item:last-child {
        grid-column: 1 / -1;
    }

    .ep-pick-hdr,
    .ep-tip {
        gap: 7px !important;
        padding: 8px !important;
    }

    .ep-tip {
        align-items: flex-start !important;
    }

    .ep-tip-match {
        font-size: 10px !important;
    }

    .ep-tip-right {
        gap: 4px !important;
        flex-direction: column !important;
        align-items: flex-end !important;
    }

    .ep-tip-odds-val {
        min-width: 0 !important;
        font-size: 11px !important;
    }

    /* Live Match Monitor. */
    .lmm-header,
    .lmm-controls {
        align-items: stretch !important;
    }

    .lmm-controls {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    .lmm-card-head,
    .lmm-card-body {
        padding: 8px !important;
    }

    .lmm-teams {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr) !important;
        gap: 5px !important;
    }

    .lmm-team-name {
        max-width: 100% !important;
        font-size: 9px !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .lmm-team-logo {
        width: 30px !important;
        height: 30px !important;
    }

    .lmm-score {
        font-size: 18px !important;
    }

    .lmm-stats-grid {
        grid-template-columns: 1fr !important;
        gap: 5px !important;
    }

    .lmm-stat-row {
        grid-template-columns: 30px minmax(0, 1fr) 30px !important;
        gap: 5px !important;
    }

    /* Pre-Match Analyzer. */
    .pma-match-header,
    .pma-team-row,
    .pma-comparison-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr) !important;
        gap: 5px !important;
    }

    .pma-team-name {
        font-size: 9px !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .pma-team-logo {
        width: 30px !important;
        height: 30px !important;
    }

    .pma-tabs,
    .pma-market-tabs {
        display: flex !important;
        width: 100% !important;
        overflow-x: auto !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .pma-tabs::-webkit-scrollbar,
    .pma-market-tabs::-webkit-scrollbar {
        display: none;
    }

    .pma-tab,
    .pma-market-tab {
        flex: 0 0 auto !important;
        padding-inline: 9px !important;
        font-size: 9px !important;
    }

    .pma-card,
    .pma-result-card {
        padding: 8px !important;
    }

    .pma-ou-row {
        grid-template-columns: 32px minmax(0, 1fr) 22px minmax(0, 1fr) 32px !important;
        gap: 3px !important;
    }

    .pma-table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .pma-table {
        min-width: 440px !important;
    }

    /* Value & Trend Engine. */
    .vte-date-pills,
    .vte-view-tabs {
        display: flex !important;
        grid-template-columns: none !important;
        overflow-x: auto !important;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .vte-date-pills::-webkit-scrollbar,
    .vte-view-tabs::-webkit-scrollbar {
        display: none;
    }

    .vte-date-pill,
    .vte-view-tab {
        flex: 0 0 auto !important;
        min-width: 72px !important;
        padding-inline: 8px !important;
    }

    .vte-trend-chips {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 4px !important;
    }

    .vte-fixture-row,
    .vte-trend-row {
        display: grid !important;
        grid-template-columns: 34px minmax(0, 1fr) 54px !important;
        gap: 5px !important;
        padding: 8px 6px !important;
    }

    .vte-team-name,
    .vte-fixture-team,
    .vte-league-name {
        font-size: 9px !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Market Trends: preserve heatmap meaning instead of crushing columns. */
    .mt-controls,
    .mt-filter-row,
    .mt-tabs {
        width: 100% !important;
        flex-wrap: wrap !important;
        gap: 5px !important;
    }

    .mt-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scrollbar-width: none;
    }

    .mt-tabs::-webkit-scrollbar {
        display: none;
    }

    .mt-tab {
        flex: 0 0 auto !important;
        font-size: 9px !important;
        padding-inline: 9px !important;
    }

    .mt-heatmap-wrap,
    .mt-table-wrap {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .mt-heatmap,
    .mt-table {
        min-width: 460px !important;
    }

    .mt-grid,
    .mt-card-grid,
    .mt-digest-grid {
        grid-template-columns: 1fr !important;
        gap: 7px !important;
    }

    /* Team Analytics had no true phone breakpoint. */
    .ta-page {
        flex-direction: column !important;
    }

    .ta-panel {
        position: static !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .ta-search-results,
    .ta-team-results {
        max-height: 230px !important;
        overflow-y: auto !important;
    }

    .ta-team-header {
        padding: 10px !important;
        gap: 8px !important;
        align-items: flex-start !important;
    }

    .ta-th-logo {
        width: 42px !important;
        height: 42px !important;
    }

    .ta-th-name {
        font-size: 15px !important;
        overflow-wrap: anywhere;
    }

    .ta-th-meta {
        gap: 4px !important;
        flex-wrap: wrap !important;
        font-size: 9px !important;
    }

    .ta-th-elo {
        margin-left: 0 !important;
        padding: 5px 7px !important;
        font-size: 9px !important;
    }

    .ta-metric-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 5px !important;
    }

    .ta-metric-box {
        min-height: 62px !important;
        padding: 8px 5px !important;
    }

    .ta-grid-2col,
    .ta-adv-prob-row,
    .ta-adv-compare,
    .ta-adv-corners,
    .ta-adv-xg,
    .ta-adv-cs,
    .ta-adv-insights {
        grid-template-columns: 1fr !important;
        gap: 7px !important;
    }

    .ta-upcoming-item,
    .ta-ui-teams,
    .ta-ui-info,
    .ta-ui-preds {
        gap: 5px !important;
        padding: 7px !important;
    }

    .ta-chart-container,
    .ta-radar-container {
        min-height: 190px !important;
        height: 210px !important;
    }

    /* Team Comparison. */
    .tc-selectors-inputs-row,
    .tc-team-header,
    .tc-trend-grid,
    .tc-summary-grid {
        grid-template-columns: 1fr !important;
        gap: 7px !important;
    }

    .tc-team-header {
        text-align: center;
    }

    .tc-comparison-row,
    .tc-matrix-row {
        display: grid !important;
        grid-template-columns: minmax(42px, 0.72fr) minmax(66px, 1fr) minmax(42px, 0.72fr) !important;
        gap: 4px !important;
        padding-inline: 5px !important;
    }

    .tc-comparison-label,
    .tc-matrix-label {
        font-size: 8px !important;
        overflow-wrap: anywhere;
    }

    .tc-table-wrap,
    .tc-form-table-wrap {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .tc-table,
    .tc-form-table {
        min-width: 430px !important;
    }

    .tc-h2h-recent {
        grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr) !important;
        gap: 4px !important;
    }

    .tc-last6-row {
        grid-template-columns: 34px minmax(54px, 1fr) minmax(54px, 1fr) !important;
        gap: 4px !important;
    }

    /* Premium Community. */
    .pc-page {
        display: block !important;
    }

    .pc-sidebar {
        position: static !important;
        width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none;
    }

    .pc-sidebar::-webkit-scrollbar {
        display: none;
    }

    .pc-nav {
        display: flex !important;
        width: max-content !important;
        min-width: 100% !important;
    }

    .pc-nav-item {
        flex: 0 0 auto !important;
        min-width: 82px !important;
        padding: 8px 7px !important;
        font-size: 8px !important;
    }

    .pc-consensus-grid,
    .pc-performance-grid,
    .pc-profile-stats,
    .pc-war-grid {
        grid-template-columns: 1fr !important;
        gap: 7px !important;
    }

    .pc-consensus-card,
    .pc-match-card,
    .pc-sweat-card,
    .pc-profile-card,
    .pc-war-card {
        padding: 8px !important;
    }

    .pc-consensus-teams {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr) !important;
        gap: 5px !important;
    }

    .pc-team-name {
        font-size: 9px !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .pc-sweat-track {
        min-width: 190px !important;
    }
}

@media (max-width: 300px) {
    .af-page,
    .glm-page,
    .lp-container,
    .ep-page,
    .lmm-page,
    .pma-page,
    .vte-page,
    .mt-panel,
    .mt-content,
    .ta-page,
    .tc-page,
    .pc-page {
        padding-inline: 4px !important;
    }

    .af-date-group,
    .glm-date-group,
    .af-confidence-grid,
    .glm-confidence-grid,
    .af-streak-grid,
    .glm-streak-grid,
    .vte-trend-chips,
    .ep-mkt-grid,
    .ep-acca-row {
        grid-template-columns: 1fr !important;
    }

    .ep-dash {
        grid-template-columns: 1fr !important;
    }

    .ep-dash-item:last-child {
        grid-column: auto;
    }

    .af-section-icon,
    .glm-section-icon,
    .vte-section-icon {
        width: 28px !important;
        height: 28px !important;
        flex: 0 0 28px !important;
    }

    .af-section-badge,
    .glm-section-badge,
    .vte-section-badge {
        max-width: 54px !important;
        padding-inline: 4px !important;
        font-size: 7px !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .af-match-row,
    .glm-match-row,
    .vte-fixture-row,
    .vte-trend-row {
        grid-template-columns: 31px minmax(0, 1fr) 46px !important;
        padding-inline: 4px !important;
    }

    .lmm-teams,
    .pma-match-header,
    .pma-team-row,
    .pma-comparison-row,
    .pc-consensus-teams {
        grid-template-columns: minmax(0, 1fr) 38px minmax(0, 1fr) !important;
        gap: 3px !important;
    }

    .ta-metric-strip {
        grid-template-columns: 1fr !important;
    }

    .tc-comparison-row,
    .tc-matrix-row {
        grid-template-columns: minmax(36px, 0.68fr) minmax(58px, 1fr) minmax(36px, 0.68fr) !important;
        padding-inline: 3px !important;
    }

    .pc-nav-item {
        min-width: 74px !important;
        padding-inline: 5px !important;
    }
}

/* Narrow match cards: keep Over/Under and HT/FT visually structured. */
@media (max-width: 380px) {
    .prediction-card--over-under,
    .prediction-card--htft {
        --pc-narrow-side: clamp(54px, 24vw, 72px);
    }

    .prediction-card--over-under .pc-body,
    .prediction-card--htft .pc-body {
        grid-template-columns:
            var(--pc-narrow-side)
            minmax(46px, 1fr)
            var(--pc-narrow-side) !important;
        grid-template-rows: auto auto auto auto !important;
        row-gap: 4px !important;
        padding-inline: 2px !important;
    }

    .prediction-card--over-under .pc-team > *,
    .prediction-card--htft .pc-team > * {
        transform: none !important;
    }

    .prediction-card--over-under .pc-team:first-of-type > .pc-logo-wrapper,
    .prediction-card--htft .pc-team:first-of-type > .pc-logo-wrapper {
        grid-column: 1 !important;
        grid-row: 1 !important;
        align-self: end !important;
    }

    .prediction-card--over-under .pc-team:first-of-type > .pc-name,
    .prediction-card--htft .pc-team:first-of-type > .pc-name {
        grid-column: 1 !important;
        grid-row: 2 !important;
        align-self: start !important;
    }

    .prediction-card--over-under .pc-team:first-of-type > .pc-form-row,
    .prediction-card--htft .pc-team:first-of-type > .pc-form-row {
        grid-column: 1 !important;
        grid-row: 3 !important;
    }

    .prediction-card--over-under .pc-team:last-of-type > .pc-logo-wrapper,
    .prediction-card--htft .pc-team:last-of-type > .pc-logo-wrapper {
        grid-column: 3 !important;
        grid-row: 1 !important;
        align-self: end !important;
    }

    .prediction-card--over-under .pc-team:last-of-type > .pc-name,
    .prediction-card--htft .pc-team:last-of-type > .pc-name {
        grid-column: 3 !important;
        grid-row: 2 !important;
        align-self: start !important;
    }

    .prediction-card--over-under .pc-team:last-of-type > .pc-form-row,
    .prediction-card--htft .pc-team:last-of-type > .pc-form-row {
        grid-column: 3 !important;
        grid-row: 3 !important;
    }

    .prediction-card--over-under .pc-team > .pc-form-row,
    .prediction-card--htft .pc-team > .pc-form-row {
        width: var(--pc-narrow-side) !important;
        margin-top: 1px !important;
        padding-top: 1px !important;
        justify-self: center !important;
    }

    .prediction-card--over-under .pc-center > .pc-score-block,
    .prediction-card--htft .pc-center > .pc-score-block {
        grid-column: 2 !important;
        grid-row: 1 / span 3 !important;
        align-self: start !important;
        justify-self: center !important;
        margin: 2px 0 0 !important;
    }

    /* Give both O/U choices the full card width instead of squeezing them
       into the already narrow score column. */
    .prediction-card--over-under .pc-center > .pc-probs-row {
        grid-column: 1 / -1 !important;
        grid-row: 4 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(54px, 1fr)) !important;
        justify-items: center !important;
        width: min(128px, 60vw) !important;
        max-width: 100% !important;
        gap: 8px !important;
        margin: 4px auto 0 !important;
        justify-self: center !important;
    }

    .prediction-card--over-under .pc-prob,
    .prediction-card--over-under .pc-prob svg {
        width: clamp(48px, 19vw, 58px) !important;
        height: clamp(48px, 19vw, 58px) !important;
    }

    .prediction-card--over-under .pc-prob {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        overflow: visible !important;
    }

    .prediction-card--over-under .pc-badge.Pc-over {
        width: max-content !important;
        max-width: none !important;
        margin-top: 4px !important;
        font-size: clamp(7px, 2.8vw, 9px) !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    .prediction-card--over-under .pc-odds {
        width: clamp(48px, 19vw, 58px) !important;
        min-width: clamp(48px, 19vw, 58px) !important;
        max-width: clamp(48px, 19vw, 58px) !important;
        min-height: 30px !important;
        margin-top: 4px !important;
    }

    /* HT/FT has one market probability. It belongs beneath the match header,
       while the teams keep the same top alignment as every other card. */
    .prediction-card--htft .pc-center > .pc-probs-row.single {
        grid-column: 1 / -1 !important;
        grid-row: 4 !important;
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 6px 0 0 !important;
        justify-self: center !important;
    }

    .prediction-card--htft .pc-prob,
    .prediction-card--htft .pc-prob svg {
        width: clamp(50px, 20vw, 60px) !important;
        height: clamp(50px, 20vw, 60px) !important;
    }

    .prediction-card--htft .pc-prob {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        overflow: visible !important;
    }

    .prediction-card--htft .pc-badge {
        width: max-content !important;
        max-width: none !important;
        margin-top: 4px !important;
        white-space: nowrap !important;
    }

    .prediction-card--htft .pc-odds {
        width: clamp(50px, 20vw, 60px) !important;
        min-width: clamp(50px, 20vw, 60px) !important;
        max-width: clamp(50px, 20vw, 60px) !important;
        min-height: 30px !important;
    }

    .prediction-card--over-under .foot,
    .prediction-card--htft .foot {
        margin-top: 8px !important;
    }
}

@media (max-width: 300px) {
    .prediction-card--over-under .pc-center > .pc-probs-row {
        width: min(120px, 60vw) !important;
        grid-template-columns: repeat(2, minmax(52px, 1fr)) !important;
        gap: 6px !important;
    }

    .prediction-card--over-under .pc-prob,
    .prediction-card--over-under .pc-prob svg,
    .prediction-card--htft .pc-prob,
    .prediction-card--htft .pc-prob svg {
        width: 48px !important;
        height: 48px !important;
    }

    .prediction-card--over-under .pc-odds,
    .prediction-card--htft .pc-odds {
        width: 50px !important;
        min-width: 50px !important;
        max-width: 50px !important;
    }
}

/* Final narrow fixes for O/U rings and the Asian Handicap card. */
@media (max-width: 380px) {
    .prediction-card--over-under .pc-prob,
    .prediction-card--htft .pc-prob {
        height: auto !important;
        min-height: 96px !important;
    }

    .prediction-card--over-under .pc-prob svg,
    .prediction-card--htft .pc-prob svg {
        display: block !important;
        flex: 0 0 auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    .prediction-card--over-under .pc-percent,
    .prediction-card--htft .pc-percent {
        top: calc(clamp(48px, 19vw, 58px) / 2) !important;
    }

    .prediction-card--handicap {
        --pc-narrow-side: clamp(58px, 25vw, 74px);
    }

    .prediction-card--handicap .pc-body {
        display: grid !important;
        grid-template-columns:
            var(--pc-narrow-side)
            minmax(48px, 1fr)
            var(--pc-narrow-side) !important;
        grid-template-rows: auto auto auto auto auto auto !important;
        gap: 4px 2px !important;
        padding-inline: 2px !important;
        align-items: start !important;
    }

    .prediction-card--handicap .pc-team > *,
    .prediction-card--handicap .pc-center > * {
        transform: none !important;
    }

    .prediction-card--handicap .pc-team:first-of-type > .pc-logo-wrapper {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    .prediction-card--handicap .pc-team:first-of-type > .pc-name {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    .prediction-card--handicap .pc-team:first-of-type > .pc-prob {
        grid-column: 1 !important;
        grid-row: 3 !important;
    }

    .prediction-card--handicap .pc-team:first-of-type > .pc-badge {
        grid-column: 1 !important;
        grid-row: 4 !important;
    }

    .prediction-card--handicap .pc-team:first-of-type > .pc-odds {
        grid-column: 1 !important;
        grid-row: 5 !important;
    }

    .prediction-card--handicap .pc-team:first-of-type > .pc-form-row {
        grid-column: 1 !important;
        grid-row: 6 !important;
    }

    .prediction-card--handicap .pc-center > .pc-score-block {
        grid-column: 2 !important;
        grid-row: 1 / span 2 !important;
        align-self: start !important;
        margin-top: 1px !important;
    }

    .prediction-card--handicap .pc-center > .pc-draw-square {
        grid-column: 2 !important;
        grid-row: 3 / span 2 !important;
        align-self: start !important;
    }

    .prediction-card--handicap .pc-center > .pc-odds {
        grid-column: 2 !important;
        grid-row: 5 !important;
    }

    .prediction-card--handicap .pc-team:last-of-type > .pc-logo-wrapper {
        grid-column: 3 !important;
        grid-row: 1 !important;
    }

    .prediction-card--handicap .pc-team:last-of-type > .pc-name {
        grid-column: 3 !important;
        grid-row: 2 !important;
    }

    .prediction-card--handicap .pc-team:last-of-type > .pc-prob {
        grid-column: 3 !important;
        grid-row: 3 !important;
    }

    .prediction-card--handicap .pc-team:last-of-type > .pc-badge {
        grid-column: 3 !important;
        grid-row: 4 !important;
    }

    .prediction-card--handicap .pc-team:last-of-type > .pc-odds {
        grid-column: 3 !important;
        grid-row: 5 !important;
    }

    .prediction-card--handicap .pc-team:last-of-type > .pc-form-row {
        grid-column: 3 !important;
        grid-row: 6 !important;
    }

    .prediction-card--handicap .pc-prob {
        width: clamp(48px, 19vw, 58px) !important;
        height: clamp(48px, 19vw, 58px) !important;
        justify-self: center !important;
        align-self: start !important;
    }

    .prediction-card--handicap .pc-prob svg {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 100% !important;
        min-height: 100% !important;
    }

    .prediction-card--handicap .pc-draw-square {
        width: clamp(48px, 20vw, 62px) !important;
        height: clamp(48px, 20vw, 62px) !important;
        font-size: clamp(17px, 7vw, 22px) !important;
    }

    .prediction-card--handicap .pc-badge {
        width: var(--pc-narrow-side) !important;
        max-width: var(--pc-narrow-side) !important;
        min-height: 20px !important;
        margin: 2px auto 0 !important;
        font-size: clamp(7px, 2.7vw, 9px) !important;
        line-height: 1.1 !important;
        white-space: normal !important;
    }

    .prediction-card--handicap .pc-odds {
        margin-top: 2px !important;
    }

    .prediction-card--handicap .pc-team > .pc-form-row {
        width: var(--pc-narrow-side) !important;
        min-width: 0 !important;
        margin: 1px 0 0 !important;
        padding: 0 !important;
        justify-self: center !important;
        justify-content: center !important;
        align-self: start !important;
    }

    .prediction-card--handicap .pc-team > .pc-form-row .form-indicators {
        width: max-content !important;
        min-width: 0 !important;
        margin: 0 auto !important;
        justify-content: center !important;
    }

    .prediction-card--handicap .form-score-predict-row {
        padding-top: 8px !important;
    }

    .prediction-card--handicap .pc-prediction-pill {
        margin-top: 7px !important;
    }

    .ms-extra-time-header {
        margin-top: 18px !important;
        background: color-mix(in srgb, #7c3aed 24%, var(--bg-secondary)) !important;
        border-color: rgba(124, 58, 237, 0.38) !important;
    }
}

@media (max-width: 300px) {
    .prediction-card--over-under .pc-prob,
    .prediction-card--htft .pc-prob {
        min-height: 90px !important;
    }

    .prediction-card--over-under .pc-percent,
    .prediction-card--htft .pc-percent {
        top: 24px !important;
    }

    .prediction-card--handicap .pc-prob {
        width: 46px !important;
        height: 46px !important;
    }

    .prediction-card--handicap .pc-draw-square {
        width: 48px !important;
        height: 48px !important;
    }
}

/* Compact odds and final-pick controls across every narrow prediction card. */
@media (max-width: 380px) {
    .prediction-card {
        --pc-narrow-odds: clamp(40px, 15vw, 48px);
    }

    .prediction-card .pc-odds,
    .prediction-card .pc-odds:not(.center-odds),
    .prediction-card .pc-odds.center-odds,
    .prediction-card .pc-prob .pc-odds,
    .prediction-card .pc-odds.pc-odd-box,
    .prediction-card--over-under .pc-odds,
    .prediction-card--htft .pc-odds,
    .prediction-card--handicap .pc-odds {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: var(--pc-narrow-odds) !important;
        min-width: var(--pc-narrow-odds) !important;
        max-width: var(--pc-narrow-odds) !important;
        min-height: 24px !important;
        height: auto !important;
        margin: 2px auto 0 !important;
        padding: 3px 2px !important;
        gap: 2px !important;
        border-radius: 6px !important;
        font-size: clamp(7px, 2.7vw, 9px) !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    .prediction-card .pc-odd-val {
        font-size: inherit !important;
        line-height: 1 !important;
    }

    .prediction-card .pc-odd-trend {
        font-size: clamp(7px, 2.3vw, 8px) !important;
    }

    .prediction-card .pc-prediction-pill,
    .prediction-card--match-result .pc-prediction-pill,
    .prediction-card--over-under .pc-prediction-pill,
    .prediction-card--btts .pc-prediction-pill,
    .prediction-card--double-chance .pc-prediction-pill,
    .prediction-card--handicap .pc-prediction-pill,
    .prediction-card--half-time .pc-prediction-pill,
    .prediction-card--htft .pc-prediction-pill,
    .prediction-card--corners .pc-prediction-pill {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: max-content !important;
        min-width: 22px !important;
        max-width: min(92px, calc(100% - 16px)) !important;
        min-height: 22px !important;
        height: auto !important;
        margin: 4px auto 0 !important;
        padding: 3px 7px !important;
        border-radius: 5px !important;
        font-size: clamp(7px, 2.6vw, 9px) !important;
        line-height: 1.1 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 300px) {
    .prediction-card {
        --pc-narrow-odds: clamp(36px, 16vw, 44px);
    }

    .prediction-card .pc-prediction-pill {
        min-width: 20px !important;
        min-height: 21px !important;
        max-width: min(86px, calc(100% - 12px)) !important;
        padding: 3px 6px !important;
    }
}

/* Close the blank strip above the odds on three-column narrow markets. */
@media (max-width: 380px) {
    .prediction-card--match-result .pc-prob,
    .prediction-card--match-result .pc-badge,
    .prediction-card--double-chance .pc-prob,
    .prediction-card--double-chance .pc-badge {
        position: relative !important;
        top: 0 !important;
        transform: translateY(clamp(4px, 1.8vw, 6px)) !important;
    }

    /*
     * Handicap uses a shared six-row grid. Keep its market label row compact
     * so the odds sit directly below Home/Away handicap labels.
     */
    .prediction-card--handicap .pc-body {
        grid-template-rows: auto auto auto 12px auto auto !important;
        row-gap: 2px !important;
    }

    .prediction-card--handicap .pc-prob,
    .prediction-card--handicap .pc-draw-square,
    .prediction-card--handicap .pc-badge {
        position: static !important;
        top: auto !important;
        transform: none !important;
    }

    .prediction-card--handicap .pc-badge {
        height: 12px !important;
        min-height: 12px !important;
        margin: 0 auto !important;
        line-height: 12px !important;
        overflow: hidden !important;
    }

    .prediction-card--handicap .pc-odds {
        margin-top: 0 !important;
        align-self: start !important;
    }
}

@media (max-width: 300px) {
    .prediction-card--match-result .pc-prob,
    .prediction-card--match-result .pc-badge,
    .prediction-card--double-chance .pc-prob,
    .prediction-card--double-chance .pc-badge {
        transform: translateY(4px) !important;
    }

    .prediction-card--handicap .pc-body {
        grid-template-rows: auto auto auto 11px auto auto !important;
    }

    .prediction-card--handicap .pc-badge {
        height: 11px !important;
        min-height: 11px !important;
        line-height: 11px !important;
    }
}

/* ==========================================================================
   CANONICAL MOBILE PREDICTION RINGS
   Keep this final. Older market styles mix the ring, label and odds in one
   box; percentage positioning must always be based on the SVG square only.
   ========================================================================== */
@media (max-width: 768px) {
    .prediction-card {
        --pc-ring-size: 60px;
        --pc-ring-font-size: 13px;
    }

    .prediction-card .pc-prob,
    .prediction-card--match-result .pc-prob,
    .prediction-card--over-under .pc-prob,
    .prediction-card--btts .pc-prob,
    .prediction-card--double-chance .pc-prob,
    .prediction-card--handicap .pc-prob,
    .prediction-card--half-time .pc-prob,
    .prediction-card--htft .pc-prob,
    .prediction-card--corners .pc-prob {
        position: relative !important;
        display: flex !important;
        flex: 0 0 auto !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: var(--pc-ring-size) !important;
        min-width: var(--pc-ring-size) !important;
        max-width: var(--pc-ring-size) !important;
        height: auto !important;
        min-height: var(--pc-ring-size) !important;
        aspect-ratio: auto !important;
        overflow: visible !important;
        box-sizing: border-box !important;
        transform: none !important;
    }

    .prediction-card .pc-prob > svg,
    .prediction-card--match-result .pc-prob > svg,
    .prediction-card--over-under .pc-prob > svg,
    .prediction-card--btts .pc-prob > svg,
    .prediction-card--double-chance .pc-prob > svg,
    .prediction-card--handicap .pc-prob > svg,
    .prediction-card--half-time .pc-prob > svg,
    .prediction-card--htft .pc-prob > svg,
    .prediction-card--corners .pc-prob > svg {
        display: block !important;
        flex: 0 0 var(--pc-ring-size) !important;
        width: var(--pc-ring-size) !important;
        min-width: var(--pc-ring-size) !important;
        max-width: var(--pc-ring-size) !important;
        height: var(--pc-ring-size) !important;
        min-height: var(--pc-ring-size) !important;
        max-height: var(--pc-ring-size) !important;
        aspect-ratio: 1 / 1 !important;
        transform: rotate(-90deg) !important;
        transform-origin: 50% 50% !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    .prediction-card .pc-prob > .pc-percent,
    .prediction-card--match-result .pc-prob > .pc-percent,
    .prediction-card--over-under .pc-prob > .pc-percent,
    .prediction-card--btts .pc-prob > .pc-percent,
    .prediction-card--double-chance .pc-prob > .pc-percent,
    .prediction-card--handicap .pc-prob > .pc-percent,
    .prediction-card--half-time .pc-prob > .pc-percent,
    .prediction-card--htft .pc-prob > .pc-percent,
    .prediction-card--corners .pc-prob > .pc-percent {
        position: absolute !important;
        top: calc(var(--pc-ring-size) / 2) !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        width: max-content !important;
        min-width: 0 !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: translate(-50%, -50%) !important;
        font-size: var(--pc-ring-font-size) !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        text-align: center !important;
        white-space: nowrap !important;
        pointer-events: none !important;
        z-index: 3 !important;
    }

    .prediction-card .pc-probs-row {
        align-items: flex-start !important;
        justify-content: center !important;
    }

    .prediction-card--handicap .pc-draw-square {
        width: var(--pc-ring-size) !important;
        min-width: var(--pc-ring-size) !important;
        max-width: var(--pc-ring-size) !important;
        height: var(--pc-ring-size) !important;
        min-height: var(--pc-ring-size) !important;
        max-height: var(--pc-ring-size) !important;
        aspect-ratio: 1 / 1 !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 380px) {
    .prediction-card {
        --pc-ring-size: 56px;
        --pc-ring-font-size: 12px;
    }

    .prediction-card--btts .pc-body,
    .prediction-card--corners .pc-body {
        grid-template-rows: auto auto auto auto !important;
    }

    .prediction-card--over-under .pc-center > .pc-probs-row,
    .prediction-card--btts .pc-center > .pc-probs-row,
    .prediction-card--corners .pc-center > .pc-probs-row {
        grid-column: 1 / -1 !important;
        grid-row: 4 !important;
        display: grid !important;
        grid-template-columns: repeat(2, var(--pc-ring-size)) !important;
        justify-items: center !important;
        justify-self: center !important;
        width: auto !important;
        min-width: calc(var(--pc-ring-size) * 2 + 10px) !important;
        max-width: 100% !important;
        margin: 5px auto 0 !important;
        gap: 10px !important;
    }
}

@media (max-width: 280px) {
    .prediction-card {
        --pc-ring-size: 52px;
        --pc-ring-font-size: 11px;
    }

    .prediction-card--over-under .pc-center > .pc-probs-row,
    .prediction-card--btts .pc-center > .pc-probs-row,
    .prediction-card--corners .pc-center > .pc-probs-row {
        min-width: calc(var(--pc-ring-size) * 2 + 6px) !important;
        gap: 6px !important;
    }
}

/* Over/Under card: prevent the labels/odds and footer from sharing vertical
   space on 320px and smaller screens. */
@media (max-width: 320px) {
    .prediction-card--over-under {
        --pc-ring-size: 56px;
        overflow: hidden !important;
    }

    .prediction-card--over-under .pc-body {
        grid-template-rows: auto auto auto minmax(112px, auto) !important;
        row-gap: 4px !important;
        padding-bottom: 4px !important;
    }

    .prediction-card--over-under .pc-center > .pc-probs-row {
        grid-column: 1 / -1 !important;
        grid-row: 4 !important;
        align-self: start !important;
        min-height: 112px !important;
        margin: 5px auto 0 !important;
        padding-bottom: 4px !important;
        overflow: visible !important;
    }

    .prediction-card--over-under .pc-prob {
        min-height: 108px !important;
        gap: 0 !important;
    }

    .prediction-card--over-under .pc-prob > .pc-badge {
        position: static !important;
        flex: 0 0 auto !important;
        width: max-content !important;
        max-width: none !important;
        min-height: 12px !important;
        margin: 4px auto 0 !important;
        line-height: 12px !important;
        white-space: nowrap !important;
    }

    .prediction-card--over-under .pc-prob > .pc-odds {
        position: static !important;
        flex: 0 0 auto !important;
        margin: 3px auto 0 !important;
    }

    .prediction-card--over-under > .foot {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        clear: both !important;
        width: 100% !important;
        min-height: 64px !important;
        margin: 8px 0 0 !important;
        padding: 0 0 4px !important;
        gap: 5px !important;
        overflow: visible !important;
        z-index: 1 !important;
    }

    .prediction-card--over-under > .foot .form-score-predict-row {
        position: static !important;
        width: 100% !important;
        min-height: 30px !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
    }

    .prediction-card--over-under > .foot .pc-prediction-pill {
        position: static !important;
        margin: 0 auto !important;
        transform: none !important;
    }
}

@media (max-width: 280px) {
    .prediction-card--over-under {
        --pc-ring-size: 52px;
    }

    .prediction-card--over-under .pc-body {
        grid-template-rows: auto auto auto minmax(106px, auto) !important;
    }

    .prediction-card--over-under .pc-center > .pc-probs-row {
        min-height: 106px !important;
    }

    .prediction-card--over-under .pc-prob {
        min-height: 102px !important;
    }
}

/* Compact two-ring cards and join the prediction verdict to the score box. */
@media (max-width: 320px) {
    .prediction-card--over-under .pc-body,
    .prediction-card--btts .pc-body,
    .prediction-card--corners .pc-body {
        grid-template-rows: auto auto auto auto !important;
        padding-bottom: 0 !important;
    }

    .prediction-card--over-under .pc-center > .pc-probs-row,
    .prediction-card--btts .pc-center > .pc-probs-row,
    .prediction-card--corners .pc-center > .pc-probs-row {
        min-height: 0 !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    .prediction-card--over-under .pc-prob,
    .prediction-card--btts .pc-prob,
    .prediction-card--corners .pc-prob {
        min-height: 96px !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }

    .prediction-card--over-under > .foot,
    .prediction-card--btts > .foot,
    .prediction-card--corners > .foot {
        min-height: 0 !important;
        margin-top: 1px !important;
        padding-top: 0 !important;
        gap: 0 !important;
    }

    .prediction-card--over-under > .foot .form-score-predict-row,
    .prediction-card--btts > .foot .form-score-predict-row,
    .prediction-card--corners > .foot .form-score-predict-row {
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* All cards: the verdict belongs directly under the correct-score box. */
    .prediction-card .form-score-predict-row + .pc-prediction-pill,
    .prediction-card > .pc-prediction-pill {
        margin-top: 1px !important;
    }

    .prediction-card > .foot .pc-prediction-pill {
        margin-top: 1px !important;
    }
}

@media (max-width: 280px) {
    .prediction-card--over-under .pc-prob,
    .prediction-card--btts .pc-prob,
    .prediction-card--corners .pc-prob {
        min-height: 90px !important;
    }
}

/* Final compact spacing for two-ring cards and the single HT/FT stack. */
@media (max-width: 320px) {
    .prediction-card--over-under > .foot,
    .prediction-card--btts > .foot,
    .prediction-card--corners > .foot {
        margin-top: 5px !important;
    }

    .prediction-card--htft .pc-body {
        grid-template-rows: auto auto auto minmax(102px, auto) !important;
        padding-bottom: 0 !important;
    }

    .prediction-card--htft .pc-center > .pc-probs-row.single {
        grid-column: 1 / -1 !important;
        grid-row: 4 !important;
        min-height: 102px !important;
        margin: 5px auto 0 !important;
        padding: 0 !important;
        align-self: start !important;
        overflow: visible !important;
    }

    .prediction-card--htft .pc-prob {
        min-height: 100px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        gap: 0 !important;
    }

    .prediction-card--htft .pc-prob > .pc-badge {
        position: static !important;
        flex: 0 0 auto !important;
        min-height: 12px !important;
        margin: 4px auto 0 !important;
        line-height: 12px !important;
    }

    .prediction-card--htft .pc-prob > .pc-odds {
        position: static !important;
        flex: 0 0 auto !important;
        margin: 3px auto 0 !important;
    }

    .prediction-card--htft > .foot {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        margin: 5px 0 0 !important;
        padding: 0 0 4px !important;
        gap: 1px !important;
        transform: none !important;
    }

    .prediction-card--htft > .foot .form-score-predict-row {
        position: static !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: none !important;
    }

    .prediction-card--htft > .foot .pc-prediction-pill {
        position: static !important;
        margin: 1px auto 0 !important;
        transform: none !important;
    }
}

@media (max-width: 280px) {
    .prediction-card--htft .pc-body {
        grid-template-rows: auto auto auto minmax(96px, auto) !important;
    }

    .prediction-card--htft .pc-center > .pc-probs-row.single {
        min-height: 96px !important;
    }

    .prediction-card--htft .pc-prob {
        min-height: 94px !important;
    }
}

/* Compact the three-choice stacks without changing the equal ring sizes. */
@media (max-width: 320px) {
    .prediction-card--match-result .pc-body,
    .prediction-card--double-chance .pc-body {
        row-gap: 0 !important;
    }

    .prediction-card--match-result .pc-badge,
    .prediction-card--match-result .pc-odds,
    .prediction-card--match-result .pc-form-row,
    .prediction-card--double-chance .pc-badge,
    .prediction-card--double-chance .pc-odds,
    .prediction-card--double-chance .pc-form-row {
        position: static !important;
        top: auto !important;
        transform: none !important;
    }

    .prediction-card--match-result .pc-badge,
    .prediction-card--double-chance .pc-badge {
        min-height: 12px !important;
        height: 12px !important;
        margin-top: -2px !important;
        line-height: 12px !important;
        overflow: visible !important;
    }

    .prediction-card--match-result .pc-odds,
    .prediction-card--double-chance .pc-odds {
        margin-top: 2px !important;
    }

    .prediction-card--match-result .pc-form-row,
    .prediction-card--double-chance .pc-form-row {
        margin-top: 2px !important;
        padding-top: 0 !important;
    }

    .prediction-card .pc-ns-time,
    .prediction-card .pc-minute,
    .prediction-card .pc-minute-label {
        font-size: 11px !important;
        line-height: 1.25 !important;
    }

    .prediction-card .pc-ns-time,
    .prediction-card .pc-minute {
        font-weight: 800 !important;
    }

    .prediction-card .pc-minute-label {
        font-weight: 500 !important;
    }
}

/* Permanent bottom-nav guard: keep the mobile app nav stable across browser
   chrome/safe-area quirks and very narrow Android/iOS viewports. */
@media (max-width: 768px) {
    :root {
        --gl-mobile-nav-safe-bottom: 0px;
    }

    /*
     * iOS standalone/full-screen layouts need home-indicator clearance.
     * Android browsers such as Opera can report their browser toolbar as a
     * very large safe-area inset, so do not apply that value there.
     */
    @supports (-webkit-touch-callout: none) {
        :root {
            --gl-mobile-nav-safe-bottom: min(env(safe-area-inset-bottom, 0px), 20px);
        }
    }

    .mobile-bottom-nav {
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        align-items: stretch !important;
        justify-items: stretch !important;
        justify-content: initial !important;
        gap: 0 !important;
        position: fixed !important;
        inset-inline: 0 !important;
        bottom: 0 !important;
        width: auto !important;
        max-width: none !important;
        height: calc(62px + var(--gl-mobile-nav-safe-bottom)) !important;
        min-height: 0 !important;
        max-height: calc(62px + var(--gl-mobile-nav-safe-bottom)) !important;
        padding: 6px max(6px, env(safe-area-inset-left, 0px)) calc(6px + var(--gl-mobile-nav-safe-bottom)) max(6px, env(safe-area-inset-right, 0px)) !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        background: var(--bg-primary, #ffffff) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        transform: translate3d(0, 0, 0) !important;
        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;
        will-change: transform !important;
        contain: layout !important;
        isolation: isolate !important;
    }

    .dark-mode .mobile-bottom-nav {
        background: var(--bg-primary, #0f172a) !important;
    }

    .bottom-nav-item {
        display: flex !important;
        flex: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        min-height: 50px !important;
        padding: 4px 2px 3px !important;
        box-sizing: border-box !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        overflow: hidden !important;
        -webkit-appearance: none !important;
        appearance: none !important;
        line-height: 1 !important;
    }

    .bottom-nav-item i {
        flex: 0 0 auto !important;
        width: 22px !important;
        height: 22px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 18px !important;
        line-height: 1 !important;
    }

    .bottom-nav-label {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding-bottom: 6px !important;
        overflow: hidden !important;
        text-align: center !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        font-size: clamp(8px, 2.55vw, 11px) !important;
        line-height: 1.05 !important;
    }

    .bottom-nav-item.active .bottom-nav-label::after {
        bottom: 0 !important;
        width: min(24px, 42%) !important;
    }

    .bottom-nav-live-count {
        top: 4px !important;
        left: calc(50% + 7px) !important;
        max-width: 24px !important;
        overflow: hidden !important;
    }

    
}

@media (max-width: 340px) {
    .bottom-nav-item i {
        width: 20px !important;
        height: 20px !important;
        font-size: 16px !important;
    }

    .bottom-nav-label {
        font-size: clamp(7px, 2.45vw, 9px) !important;
    }
}

/* Team detail: final phone layout and visible light-theme tab states. */
@media (max-width: 768px) {
    .content.stats-content .team-detail-page .team-results-stats-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 14px !important;
    }

    .content.stats-content .team-detail-page .team-results-stats-row > .last6-card,
    .content.stats-content .team-detail-page .team-results-stats-row > .team-overall-stats-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .content.stats-content .team-detail-page .team-tabs {
        gap: 6px !important;
        padding: 8px 10px !important;
    }

    .content.stats-content .team-detail-page .team-tab {
        flex: 1 0 auto !important;
        min-height: 38px !important;
        padding: 9px 13px !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 999px !important;
        margin: 0 !important;
        background: #ffffff !important;
        color: #475569 !important;
        text-align: center !important;
    }

    .content.stats-content .team-detail-page .team-tab.active {
        color: #ffffff !important;
        background: #16865a !important;
        border-color: #16865a !important;
        box-shadow: 0 2px 8px rgba(22, 134, 90, 0.24) !important;
    }

    .content.stats-content .team-detail-page .tos-tabs {
        gap: 4px !important;
        padding: 7px 8px 0 !important;
        overflow-x: auto !important;
    }

    .content.stats-content .team-detail-page .tos-tab {
        flex: 1 0 auto !important;
        min-height: 36px !important;
        padding: 8px 10px !important;
        border: 1px solid transparent !important;
        border-radius: 7px 7px 0 0 !important;
        background: transparent !important;
        color: #475569 !important;
        font-size: 10px !important;
    }

    .content.stats-content .team-detail-page .tos-tab.active {
        color: #047857 !important;
        background: #ecfdf5 !important;
        border-color: #a7f3d0 !important;
        border-bottom-color: #10b981 !important;
    }

    .dark-mode .content.stats-content .team-detail-page .team-tab {
        color: #cbd5e1 !important;
        background: #172033 !important;
        border-color: #3a4960 !important;
    }

    .dark-mode .content.stats-content .team-detail-page .team-tab.active {
        color: #ffffff !important;
        background: #16865a !important;
        border-color: #35c987 !important;
    }

    .dark-mode .content.stats-content .team-detail-page .tos-tab {
        color: #cbd5e1 !important;
    }

    .dark-mode .content.stats-content .team-detail-page .tos-tab.active {
        color: #d1fae5 !important;
        background: rgba(16, 185, 129, 0.14) !important;
        border-color: rgba(52, 211, 153, 0.42) !important;
        border-bottom-color: #34d399 !important;
    }
}

/* Match preview: readable editorial typography on phones. */
@media (max-width: 768px) {
    .match-preview-container {
        padding: 18px 15px 30px !important;
    }

    .match-preview-container .mp-title {
        font-size: clamp(26px, 7.4vw, 32px) !important;
        line-height: 1.13 !important;
        letter-spacing: -0.025em !important;
        margin-bottom: 16px !important;
        padding: 8px 0 16px !important;
    }

    .match-preview-container .mp-meta,
    .match-preview-container .mp-meta > span:first-child,
    .match-preview-container .mp-meta > span:last-child {
        font-size: 14px !important;
        line-height: 1.45 !important;
    }

    .match-preview-container .mp-content {
        margin-top: 28px !important;
        font-size: 18px !important;
        line-height: 1.72 !important;
        color: #20242a !important;
        letter-spacing: 0 !important;
        text-align: left !important;
    }

    .match-preview-container .mp-content p {
        margin: 0 0 27px !important;
    }

    .match-preview-container .mp-content > p:first-child {
        font-size: 19px !important;
        line-height: 1.68 !important;
        color: #111827 !important;
    }

    .match-preview-container .mp-content h2 {
        margin: 38px 0 15px !important;
        font-size: 26px !important;
        line-height: 1.2 !important;
    }

    .match-preview-container .mp-content h3 {
        margin: 30px 0 13px !important;
        font-size: 22px !important;
        line-height: 1.25 !important;
    }

    .match-preview-container .mp-content blockquote {
        margin: 4px 0 30px !important;
        padding: 17px 18px !important;
        border-left: 4px solid #dc2626 !important;
        background: #f8fafc !important;
        color: #20242a !important;
        font-size: 18px !important;
        line-height: 1.68 !important;
        font-style: normal !important;
    }

    .dark-mode .match-preview-container .mp-content,
    .dark-mode .match-preview-container .mp-content > p:first-child {
        color: #e5e7eb !important;
    }

    .dark-mode .match-preview-container .mp-content blockquote {
        background: #172033 !important;
        color: #e5e7eb !important;
        border-left-color: #f87171 !important;
    }
}

@media (max-width: 340px) {
    .match-preview-container {
        padding-inline: 11px !important;
    }

    .match-preview-container .mp-content {
        font-size: 16.5px !important;
        line-height: 1.68 !important;
    }

    .match-preview-container .mp-content > p:first-child,
    .match-preview-container .mp-content blockquote {
        font-size: 17px !important;
    }
}

/* Team comparison: preserve the complete Match Details Last 6 row on phones. */
@media (max-width: 768px) {
    .tc-page .tc-last6-row {
        display: grid !important;
        grid-template-columns: 38px minmax(0, 1fr) 56px minmax(0, 1fr) 46px !important;
        gap: 4px !important;
        align-items: center !important;
    }

    .tc-page .tc-last6-row .pm-date,
    .tc-page .tc-last6-row .pm-home-name,
    .tc-page .tc-last6-row .pm-score-block,
    .tc-page .tc-last6-row .pm-away-name,
    .tc-page .tc-last6-row .pm-league-abbr {
        display: block !important;
        min-width: 0 !important;
    }

    .tc-page .tc-last6-row .pm-score-block {
        display: flex !important;
    }

    .tc-page .tc-standings-table-wrap {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-inline: contain;
    }

    .tc-page .tc-standings-table {
        width: max-content !important;
        min-width: 620px !important;
    }
}

@media (max-width: 360px) {
    .tc-page .tc-last6-row {
        grid-template-columns: 34px minmax(0, 1fr) 52px minmax(0, 1fr) 38px !important;
        gap: 3px !important;
    }
}

/* Match preview: readable defaults without discarding Writer Studio formats. */
@media (max-width: 768px) {
    .match-preview-container {
        padding: 16px 14px 28px !important;
    }

    .match-preview-container .mp-title {
        margin: 0 0 14px !important;
        padding: 8px 0 14px !important;
        font-size: 22px !important;
        font-weight: 700 !important;
        line-height: 1.18 !important;
        letter-spacing: -0.015em !important;
        text-align: left !important;
    }

    .match-preview-container .mp-meta,
    .match-preview-container .mp-meta > span:first-child,
    .match-preview-container .mp-meta > span:last-child,
    .match-preview-container .mp-meta .league-name {
        font-size: 13px !important;
        line-height: 1.4 !important;
    }

    .match-preview-container .mp-content {
        margin-top: 24px !important;
        font-size: 15px !important;
        font-weight: 400;
        line-height: 1.68 !important;
        color: #27303a !important;
    }

    .match-preview-container .mp-content p,
    .match-preview-container .mp-content li {
        font-size: inherit;
        line-height: inherit;
    }

    .match-preview-container .mp-content p {
        margin: 0 0 18px !important;
    }

    .match-preview-container .mp-content > p:first-child {
        font-size: inherit !important;
        line-height: inherit !important;
        color: inherit !important;
    }

    .match-preview-container .mp-content h2 {
        margin: 28px 0 11px !important;
        font-size: 20px !important;
        font-weight: 700 !important;
        line-height: 1.27 !important;
        color: #172033 !important;
    }

    .match-preview-container .mp-content h3 {
        margin: 24px 0 10px !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
        color: #172033 !important;
    }

    .match-preview-container .mp-content strong,
    .match-preview-container .mp-content b {
        font-weight: 700;
    }

    .match-preview-container .mp-content ul,
    .match-preview-container .mp-content ol {
        margin: 4px 0 20px !important;
        padding-left: 21px !important;
    }

    .match-preview-container .mp-content li {
        margin: 0 0 10px !important;
        padding-left: 2px !important;
    }

    .match-preview-container .mp-content li::marker {
        font-size: 0.78em;
        color: #64748b;
    }

    .match-preview-container .mp-content blockquote {
        margin: 2px 0 24px !important;
        padding: 13px 14px 13px 16px !important;
        border-left: 3px solid #dc2626 !important;
        background: #f8fafc !important;
        color: #27303a !important;
        font-size: inherit !important;
        line-height: inherit !important;
    }

    .match-preview-container .mp-content blockquote p {
        margin: 0 !important;
    }

    .dark-mode .match-preview-container .mp-content {
        color: #d7e0eb !important;
    }

    .dark-mode .match-preview-container .mp-content h2,
    .dark-mode .match-preview-container .mp-content h3 {
        color: #f1f5f9 !important;
    }

    .dark-mode .match-preview-container .mp-content blockquote {
        background: #172033 !important;
        color: #d7e0eb !important;
        border-left-color: #f87171 !important;
    }

    /* TinyMCE stores alignment inline. Mirror those explicit choices after
       older mobile rules that forced every rich-text block to the left. */
    .match-preview-container .mp-content [style*="text-align: justify"],
    .match-preview-container .mp-content [style*="text-align:justify"] {
        text-align: justify !important;
        text-align-last: auto !important;
        text-justify: inter-word !important;
    }

    .match-preview-container .mp-content [style*="text-align: center"],
    .match-preview-container .mp-content [style*="text-align:center"] {
        text-align: center !important;
    }

    .match-preview-container .mp-content [style*="text-align: right"],
    .match-preview-container .mp-content [style*="text-align:right"] {
        text-align: right !important;
    }

    .match-preview-container .mp-content [style*="text-align: left"],
    .match-preview-container .mp-content [style*="text-align:left"] {
        text-align: left !important;
    }
}

@media (max-width: 340px) {
    .match-preview-container {
        padding-inline: 12px !important;
    }

    .match-preview-container .mp-title {
        font-size: 21px !important;
    }

    .match-preview-container .mp-content {
        font-size: 14.5px !important;
        line-height: 1.66 !important;
    }

    .match-preview-container .mp-content h2 {
        font-size: 19px !important;
    }
}

/* Match lineups: keep mobile substitutions readable on the white card surface in both themes. */
.content.stats-content .msp-goal-wrap,
.content.stats-content .msp-goal-icon,
.content.stats-content .msp-goal-wrap svg {
    color: #fff !important;
    fill: #fff !important;
}

.content.stats-content .msp-pitch--mobile-shared .msp-name-text {
    color: #fff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95), 0 0 6px rgba(0, 0, 0, 0.55) !important;
}

.content.stats-content .msp-pitch--mobile-shared .msp-num {
    color: rgba(219, 234, 254, 0.95) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95) !important;
}

.content.stats-content .ms-msub-wrap,
.content.stats-content .ms-msub-coach,
.content.stats-content .ms-msub-row,
.dark-mode .content.stats-content .ms-msub-wrap,
.dark-mode .content.stats-content .ms-msub-coach,
.dark-mode .content.stats-content .ms-msub-row,
body.dark-mode .content.stats-content .ms-msub-wrap,
body.dark-mode .content.stats-content .ms-msub-coach,
body.dark-mode .content.stats-content .ms-msub-row {
    background: #fff !important;
    border-color: #e5e7eb !important;
}

.content.stats-content .ms-msub-section-title,
.dark-mode .content.stats-content .ms-msub-section-title,
body.dark-mode .content.stats-content .ms-msub-section-title {
    color: #334155 !important;
    background: #fff !important;
}

.content.stats-content .ms-msub-coach-name,
.content.stats-content .ms-msub-name,
.dark-mode .content.stats-content .ms-msub-coach-name,
.dark-mode .content.stats-content .ms-msub-name,
body.dark-mode .content.stats-content .ms-msub-coach-name,
body.dark-mode .content.stats-content .ms-msub-name {
    color: #0f172a !important;
}

.content.stats-content .ms-msub-detail,
.content.stats-content .ms-msub-min,
.content.stats-content .ms-msub-outname,
.dark-mode .content.stats-content .ms-msub-detail,
.dark-mode .content.stats-content .ms-msub-min,
.dark-mode .content.stats-content .ms-msub-outname,
body.dark-mode .content.stats-content .ms-msub-detail,
body.dark-mode .content.stats-content .ms-msub-min,
body.dark-mode .content.stats-content .ms-msub-outname {
    color: #64748b !important;
}

.dark-mode .content.stats-content .ms-formation-badge,
.dark-mode .content.stats-content .ms-formation-label,
body.dark-mode .content.stats-content .ms-formation-badge,
body.dark-mode .content.stats-content .ms-formation-label {
    color: #f8fafc !important;
    opacity: 1 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85) !important;
}

.dark-mode .content.stats-content .ms-team-avg-rating,
.dark-mode .content.stats-content .ms-avg-rating-val,
body.dark-mode .content.stats-content .ms-team-avg-rating,
body.dark-mode .content.stats-content .ms-avg-rating-val {
    color: #e2e8f0 !important;
    opacity: 1 !important;
}

/* Team Analytics mobile drawer guard: keep selector above the bottom nav. */
@media (max-width: 640px) {
    .ta-page {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 100dvh !important;
        gap: 0 !important;
        overflow: visible !important;
        padding: 8px 8px calc(88px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .ta-mobile-filter-bar {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        align-self: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 10px !important;
    }

    .ta-panel {
        position: fixed !important;
        left: max(8px, env(safe-area-inset-left, 0px)) !important;
        right: max(8px, env(safe-area-inset-right, 0px)) !important;
        top: auto !important;
        bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
        z-index: 1090 !important;
        width: auto !important;
        max-width: none !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 126px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
        margin: 0 !important;
        overflow: hidden !important;
        border-radius: 18px !important;
        transform: translateY(calc(100% + 96px)) !important;
        transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1) !important;
        will-change: transform !important;
    }

    .ta-page.mobile-filters-open .ta-panel {
        transform: translateY(0) !important;
    }

    .ta-panel-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 2 !important;
        min-height: 58px !important;
        border-radius: 18px 18px 0 0 !important;
    }

    .ta-filters-scroll {
        max-height: calc(100dvh - 184px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
        padding-bottom: 18px !important;
    }

    .ta-mobile-bottom-actions {
        display: grid !important;
        bottom: 0 !important;
    }
}

@supports not (height: 100dvh) {
    @media (max-width: 640px) {
        .ta-page {
            min-height: 100vh !important;
        }

        .ta-panel {
            max-height: calc(100vh - 126px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
        }

        .ta-filters-scroll {
            max-height: calc(100vh - 184px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
        }
    }
}