/* Mobile and small-screen overrides (extracted from sports_dashboard.css) */
/* Keep this file loaded after sports_dashboard.css. */

@media (max-width: 700px) {
body.page-american .roster-table th:nth-child(4),
body.page-american .roster-table td:nth-child(4),
body.page-american .roster-table th:nth-child(5),
body.page-american .roster-table td:nth-child(5),
body.page-american .roster-table th:nth-child(7),
body.page-american .roster-table td:nth-child(7),
body.page-american .roster-table col:nth-child(4),
body.page-american .roster-table col:nth-child(5),
body.page-american .roster-table col:nth-child(7) {
                display: none;
            }
body.page-american .roster-table col.col-num {
                width: 12%;
            }
body.page-american .roster-table col.col-name {
                width: 56%;
            }
body.page-american .roster-table col.col-age {
                width: 12%;
            }
body.page-american .roster-table col.col-weight {
                width: 20%;
            }
body.page-american .roster-selected-team {
                padding: 9px 12px;
                font-size: 12px;
                gap: 10px;
            }
body.page-american .roster-selected-team-logo {
                width: 20px;
                height: 20px;
            }

body.page-american {
                padding: 14px;
                min-height: 100dvh;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
            }
body.page-american h1 {
                margin-top: 56px;
                margin-bottom: 10px;
            }
body.page-american .mobile-collapsible {
                border: 1px solid #2d2d2d;
                border-radius: 10px;
                background: #1b1b1b;
                overflow: hidden;
            }
body.page-american .mobile-collapsible[data-mobile-collapse-key="american-seasons"],
body.page-american .mobile-collapsible[data-mobile-collapse-key="american-teams"] {
                margin-bottom: 14px;
            }
body.page-american .mobile-collapsible > summary {
                display: block;
                list-style: none;
                cursor: pointer;
                padding: 10px 12px;
                font-size: 12px;
                font-weight: 700;
                letter-spacing: 0.04em;
                text-transform: uppercase;
                color: #d0d0d0;
                background: #252525;
            }
body.page-american .mobile-collapsible > summary::-webkit-details-marker {
                display: none;
            }
body.page-american .mobile-collapsible > summary::after {
                content: "Anzeigen";
                float: right;
                color: #9ca3af;
                font-weight: 600;
                letter-spacing: 0;
                text-transform: none;
            }
body.page-american .mobile-collapsible[open] > summary::after {
                content: "Ausblenden";
            }
body.page-american .mobile-collapsible .panel {
                border: none;
                border-radius: 0;
            }
body.page-american .mobile-collapsible .panel-header {
                display: none;
            }
body.page-american .season-picker,
body.page-american .team-picker {
                position: static;
                width: 100%;
            }
body.page-american .season-picker .panel-body-vertical,
body.page-american .team-picker .panel-body,
body.page-american .week-nav {
                max-height: 42vh;
                overflow-y: auto;
                display: flex;
                flex-direction: column;
                gap: 8px;
            }
body.page-american .team-btn {
                margin-bottom: 0;
            }
body.page-american .matches-wrap {
                gap: 14px;
            }
body.page-american .page-grid {
                grid-template-columns: 1fr;
                grid-template-areas: "matches" "standings" "teams";
                gap: 14px;
            }
body.page-american .match-header {
                display: none;
            }
body.page-american .match-row {
                display: flex;
                flex-direction: row;
                gap: 10px;
                padding: 12px;
                flex-wrap: wrap;
                align-items: center;
            }
body.page-american .match-team,
body.page-american .match-team-away {
                flex-direction: row;
                align-items: center;
                gap: 10px;
                flex: 1;
                min-width: 0;
            }
body.page-american .team-info-right {
                text-align: left;
            }
body.page-american .team-logo,
body.page-american .team-logo-fallback {
                width: 34px;
                height: 34px;
                min-width: 34px;
                min-height: 34px;
                max-width: 34px;
                max-height: 34px;
            }
body.page-american .score-stack {
                width: auto;
                min-width: 80px;
                padding: 8px 4px;
                gap: 4px;
                flex: 0 0 auto;
            }
body.page-american .match-score {
                font-size: 20px;
            }
body.page-american .quarter-scores {
                font-size: 11px;
                line-height: 1.35;
                white-space: normal;
                overflow-wrap: anywhere;
            }
body.page-american .standings-content {
                padding: 10px;
            }
body.page-american .standings-table {
                table-layout: fixed;
            }
body.page-american .standings-table th,
body.page-american .standings-table td {
                padding: 8px 6px;
                font-size: 11px;
            }
body.page-american .standings-table th:nth-child(4),
body.page-american .standings-table td:nth-child(4) {
                display: none;
            }
body.page-american .standings-table .team-name {
                font-size: 11px;
                overflow-wrap: anywhere;
            }
body.page-american .roster-unit-tabs {
                flex-wrap: nowrap;
                padding: 10px;
            }
body.page-american .roster-unit-tabs .roster-close-btn {
                margin-left: 0;
                width: 100%;
                display: none;
            }
body.page-american .roster-tab-btn {
                flex: 1 1 0;
                min-width: 0;
                text-align: center;
                padding: 8px 10px;
                font-size: 12px;
            }
body.page-american .roster-content {
                padding: 10px;
                gap: 12px;
            }
body.page-american .roster-table th,
body.page-american .roster-table td {
                padding: 6px 6px;
                font-size: 11px;
            }
body.page-american .roster-table {
                width: 100%;
                table-layout: fixed;
            }
body.page-american .roster-table .col-name {
                overflow-wrap: anywhere;
            }
        }

@media (max-width: 700px) {
body.page-american .mobile-content-tabs {
                display: flex;
                gap: 0;
                margin-bottom: 14px;
                border-radius: 8px;
                overflow: hidden;
            }
body.page-american .mobile-content-tabs button {
                flex: 1;
                padding: 12px;
                background: #2a2a2a;
                border: none;
                color: #b0b0b0;
                font-weight: 600;
                font-size: 13px;
                cursor: pointer;
                transition: background 0.2s, color 0.2s;
            }
body.page-american .mobile-content-tabs button.active {
                background: #22c55e;
                color: #111;
            }
body.page-american .standings-wrap {
                display: none;
            }
body.page-american .standings-wrap.active {
                display: block;
            }
        }

@media (max-width: 1200px) {
body.page-home .sport-name {
        font-size: clamp(1.2rem, 2.1vw, 1.7rem);
        letter-spacing: 1.6px;
        white-space: normal;
        padding: 0 10px;
    }
body.page-home .sport-subtitle {
        font-size: 0.78rem;
        letter-spacing: 1.2px;
        white-space: normal;
        padding: 0 12px;
        text-align: center;
    }
body.page-home .trophy-layer {
    background-size: auto clamp(190px, 27vw, 290px);
        background-position: center calc(56% - 42px);
        opacity: 0.2;
    }
}

@media (max-width: 900px) {
body.page-home {
        overflow: auto;
        height: auto;
    }
body.page-home .container {
        flex-direction: column;
        width: 100%;
        min-height: 100svh;
        height: auto;
    }
body.page-home .sport-section {
        min-height: 33.33vh;
        flex: 1 1 auto;
        transition: transform 0.3s ease, filter 0.3s ease;
    }
body.page-home .sport-section:not(:last-child) {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    }
body.page-home .sport-section:hover {
        flex: 1 1 auto;
    }
body.page-home .sport-name {
        font-size: clamp(1.25rem, 4.8vw, 1.8rem);
        letter-spacing: 1.2px;
    }
body.page-home .sport-subtitle,
body.page-home .arrow {
        opacity: 1;
        transform: translateY(0);
    }
body.page-home .sport-subtitle {
        font-size: clamp(0.72rem, 2.8vw, 0.9rem);
    }
body.page-home .arrow {
        font-size: 1rem;
        opacity: 0.6;
    }
body.page-home .trophy-layer {
    background-size: auto clamp(140px, 24vh, 220px);
        background-position: center 40%;
        opacity: 0.18;
    }
body.page-home .docs-button,
body.page-home .impressum-button {
        bottom: 12px;
        padding: 8px 12px;
        font-size: 12px;
    }
}

@media (max-width: 760px) {

body.page-docs .container {
        padding: 72px 14px 24px;
    }
body.page-docs h1 {
    font-size: clamp(2rem, 6.8vw, 2.35rem);
        line-height: 1.25;
    }
body.page-docs .home-button {
        left: 12px;
        width: auto;
        right: auto;
        max-width: none;
    }
}

@media (max-width: 1400px) {

body.page-american .season-picker {
                position: static;
                width: 100%;
                margin-bottom: 20px;
            }
body.page-american .page-grid {
                grid-template-columns: 1fr;
                grid-template-areas: "matches" "standings" "teams";
            }
body.page-american .all-standings-grid {
                grid-template-columns: 1fr;
            }
        }

@media (max-width: 760px) {

body.page-formula1 {
                padding: 16px 16px 0;
                min-height: 100dvh;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
            }
body.page-formula1 .page {
                margin-top: 52px;
                padding-bottom: 24px;
            }
body.page-formula1 .weekend-header {
                grid-template-columns: 1fr;
            }
body.page-formula1 .session-row {
                grid-template-columns: 1fr;
                gap: 4px;
            }
body.page-formula1 .content-grid {
                grid-template-columns: 1fr;
            }
body.page-formula1 .championship-panel {
                position: static;
            }
/* Mobile tabs for Races vs Championship */
body.page-formula1 .mobile-content-tabs {
                display: flex;
                gap: 0;
                margin-bottom: 14px;
                border: 1px solid #3a4658;
                border-radius: 8px;
                overflow: hidden;
            }
body.page-formula1 .mobile-content-tabs button {
                flex: 1;
                padding: 12px;
                background: #1f2631;
                border: none;
                color: #d9e2f0;
                font-weight: 600;
                font-size: 13px;
                cursor: pointer;
                transition: background 0.2s, color 0.2s;
            }
body.page-formula1 .mobile-content-tabs button.active {
                background: var(--accent-soft);
                color: #ffd5d5;
            }
body.page-formula1 .content-grid > section {
                display: block;
            }
body.page-formula1 .content-grid > section .weekends-view {
                display: none !important;
            }
body.page-formula1 .content-grid > section .weekends-view.active {
                display: block !important;
            }
body.page-formula1 .content-grid aside {
                display: none;
            }
body.page-formula1 .content-grid aside.active {
                display: block;
            }
        }

@media (max-width: 700px) {

body.page-fussball {
                padding: 14px;
                min-height: 100dvh;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
            }
body.page-fussball .page-title {
                margin-top: 52px;
            }
body.page-fussball .mobile-collapsible {
                border: 1px solid #2d2d2d;
                border-radius: 10px;
                background: #1b1b1b;
                overflow: hidden;
            }
body.page-fussball .mobile-collapsible > summary {
                display: block;
                list-style: none;
                cursor: pointer;
                padding: 10px 12px;
                font-size: 12px;
                font-weight: 700;
                letter-spacing: 0.04em;
                text-transform: uppercase;
                color: #d0d0d0;
                background: #252525;
            }
body.page-fussball .mobile-collapsible > summary::-webkit-details-marker {
                display: none;
            }
body.page-fussball .mobile-collapsible > summary::after {
                content: "Anzeigen";
                float: right;
                color: #9ca3af;
                font-weight: 600;
                letter-spacing: 0;
                text-transform: none;
            }
body.page-fussball .mobile-collapsible[open] > summary::after {
                content: "Ausblenden";
            }
body.page-fussball .mobile-collapsible .team-picker {
                padding: 10px;
                max-height: 42vh;
                overflow-y: auto;
            }
body.page-fussball .page-grid {
                grid-template-columns: 1fr;
                grid-template-areas:
                    "teams"
                    "matches"
                    "standings";
                gap: 14px;
                box-sizing: border-box;
                min-height: auto;
            }
body.page-fussball .page-grid.standings-only {
                grid-template-columns: 1fr;
                grid-template-areas: "standings";
                gap: 0;
                margin-bottom: 14px;
            }
body.page-fussball .table-wrap table,
body.page-fussball .standings-wrap table {
                table-layout: fixed;
            }
body.page-fussball .standings-wrap,
body.page-fussball .standings-wrap table {
                width: 100%;
            }
body.page-fussball th, body.page-fussball td {
                padding: 10px 8px;
                font-size: 13px;
            }
body.page-fussball .table-wrap th,
body.page-fussball .table-wrap td {
                padding: 8px 6px;
                font-size: 12px;
            }
body.page-fussball td.center {
                font-size: 12px;
            }
body.page-fussball .team-cell {
                gap: 6px;
            }
body.page-fussball .table-wrap .team-logo {
                width: 24px;
                height: 24px;
            }
body.page-fussball .table-wrap .team-cell span {
                font-size: 11px;
                line-height: 1.25;
                overflow-wrap: anywhere;
            }
body.page-fussball .table-wrap td.center .date-time {
                font-size: 11px;
                line-height: 1.3;
            }
body.page-fussball .standings-wrap th:nth-child(3),
body.page-fussball .standings-wrap td:nth-child(3) {
                display: none;
            }
body.page-fussball .standings-wrap th,
body.page-fussball .standings-wrap td {
                padding: 8px 6px;
                font-size: 11px;
            }
body.page-fussball .standings-wrap th:first-child,
body.page-fussball .standings-wrap td.pos {
                width: 34px;
                padding-left: 4px;
                padding-right: 4px;
            }
body.page-fussball .standings-wrap th:nth-child(4),
body.page-fussball .standings-wrap td:nth-child(4) {
                width: 40px;
                padding-left: 4px;
                padding-right: 4px;
            }
body.page-fussball .standings-wrap th:last-child,
body.page-fussball .standings-wrap td.points {
                width: 44px;
                padding-left: 4px;
                padding-right: 4px;
            }
body.page-fussball .standings-wrap .team-inline span {
                overflow-wrap: normal;
                word-break: normal;
                font-size: 11px;
            }
body.page-fussball .standings-wrap .team-logo {
                width: 20px;
                height: 20px;
            }
/* Mobile tabs for Matches vs Standings */
body.page-fussball .mobile-content-tabs {
                display: flex;
                gap: 0;
                margin-bottom: 14px;
                border-radius: 8px;
                overflow: hidden;
            }
body.page-fussball .mobile-content-tabs button {
                flex: 1;
                padding: 12px;
                background: #2a2a2a;
                border: none;
                color: #b0b0b0;
                font-weight: 600;
                font-size: 13px;
                cursor: pointer;
                transition: background 0.2s, color 0.2s;
            }
body.page-fussball .mobile-content-tabs button.active {
                background: #ffd24a;
                color: #111;
            }
body.page-fussball .standings-wrap {
                display: none;
            }
body.page-fussball .standings-wrap.active {
                display: block;
            }
        }

@media (max-width: 760px) {

body.page-formula1 footer {
    margin-top: auto;
        margin-left: -16px;
        margin-right: -16px;
        padding-left: 16px;
        padding-right: 16px;
    }
}

@media (max-width: 700px) {

body.page-american footer,
body.page-fussball footer {
        margin-left: -14px;
        margin-right: -14px;
        padding: 18px 14px;
    }
body.page-american footer,
body.page-fussball footer {
        margin-top: auto;
    }
}

@media (max-width: 760px) {
body.page-docs .home-button,
body.page-impressum .home-button {
        background: #1f1f1f;
        border-color: #4b4b4b;
        color: #f5f5f5;
    }

body.page-docs .home-button:hover,
body.page-impressum .home-button:hover {
        background: #262626;
        border-color: #6a6a6a;
        color: #ffffff;
    }
}