/* Compact analysis summaries: preserve comparison rows and unbroken values. */
.range-label-short { display: none; }
.home-page .sample-note { text-align: left; margin: -1.5rem 0 1.5rem; font-size: .7rem; color: var(--text-tertiary); font-style: italic; padding-left: .5rem; }
.chart-data-scroll {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
}
@media (max-width: 1300px) {
    .navbar .nav-links {
        max-height: 100dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .navbar .nav-links > a:not([hidden]) { min-height: 44px; display: flex; align-items: center; }
}

@media (max-width: 600px) {
    .range-label-full { display: none; }
    .range-label-short { display: inline; }
    :is(.home-page, .game-modal) .stats-grid,
    .prop-modal .modal-stats-grid {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 4px;
    }
    .home-page .stats-grid-new-5, .prop-modal .modal-stats-grid {
        grid-template-columns: 1fr 1fr .9fr 1.1fr 1.3fr;
    }
    :is(.home-page, .game-modal) .stats-grid .stat-card,
    .prop-modal .modal-stat-card {
        min-width: 0;
        padding: 8px 3px;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        background: var(--bg-secondary);
        justify-content: flex-start;
    }
    :is(.home-page, .game-modal) .stats-grid .stat-label,
    .prop-modal .modal-stat-label {
        font-size: 10px;
        line-height: 1.2;
        min-height: 24px;
        align-items: center;
        justify-content: center;
        letter-spacing: .025em;
        margin: 0 0 6px;
        padding: 0;
    }
    :is(.home-page, .game-modal) .stats-grid .stat-value,
    .prop-modal .modal-stat-value {
        font-size: 14px;
        line-height: 1.4;
        font-variant-numeric: tabular-nums;
    }
    :is(.home-page, .game-modal) .team-perf-rows { width: 100%; gap: 4px; }
    :is(.home-page, .game-modal) .perf-row { justify-content: center; gap: 3px; line-height: 1.5; }
    :is(.home-page, .game-modal) .team-abbr { font-size: 9px; }
    :is(.home-page, .game-modal) .perf-value {
        font-size: 12px;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }
    :is(.home-page, .game-modal) .game-stats-grid-ats {
        grid-template-columns: .8fr 1.25fr .9fr .85fr 1.05fr;
        gap: 0;
        border: 1px solid var(--border-color);
        border-radius: 10px;
        overflow: hidden;
    }
    :is(.home-page, .game-modal) .game-stats-grid-ats > .stat-card {
        border: 0;
        border-radius: 0;
        border-right: 1px solid var(--border-color);
    }
    :is(.home-page, .game-modal) .game-stats-grid-ats > .stat-card:last-child { border-right: 0; }
    /* The record column identifies both teams; keep their values aligned across
       the other columns. Retain repeated labels for assistive technology. */
    :is(.home-page, .game-modal) .game-stats-grid-ats > .stat-card:nth-child(n+3) .team-abbr {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }
    :is(.home-page, .game-modal) .game-stats-grid-ou { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    :is(.home-page, .game-modal) .game-stats-grid-ou .perf-value { font-size: 11px; }
    :is(.home-page, .game-modal) .game-stats-grid-ou .ou-model-values,
    :is(.home-page, .game-modal) .game-stats-grid-ou .ou-model-values :is(div, span) { font-size: 11px !important; }
    .home-page .stats-grid-new-5 :is(.avg-row, .odds-row),
    .prop-modal :is(.modal-avg-row, .modal-odds-row) { font-size: 10px; line-height: 1.5; white-space: normal; }
    .home-page .stats-grid-new-5 .odds-row,
    .prop-modal .modal-odds-row { white-space: nowrap; }
    .home-page .stats-grid-new-5 .avg-row,
    .prop-modal .modal-avg-row { font-size: 9px; }
    .home-page .stats-grid-new-5 .line-card .stat-value,
    .prop-modal .line-card .modal-stat-value { font-size: 12px; white-space: nowrap; }
    .home-page .stats-grid-new-5 .average-rows,
    .prop-modal .modal-average-rows { width: 100%; }
    .home-page .stats-grid-new-5 :is(.hit-value, .model-value, .ev-value),
    .prop-modal :is(.modal-hit-value, .modal-model-value, .modal-ev-value) {
        font-size: 12px;
        line-height: 1.5;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }
    .home-page .stats-grid-new-5 :is(.hit-label, .model-label, .ev-label),
    .prop-modal :is(.modal-hit-label, .modal-model-label, .modal-ev-label) { font-size: 9px; line-height: 1.4; }
    .home-page .stats-card-wrapper { padding: 0; }
    .prop-modal .modal-stats-card-wrapper { margin: 0 0 16px; padding: 0; border: 0; background: transparent; }

    .home-page .button-group:has(> .lookback-btn),
    .home-page .button-group:has(> .period-btn),
    .game-modal .button-group:has(> [data-period]),
    .prop-modal .modal-period-selector {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
        padding: 0;
        width: 100%;
    }
    :is(.home-page, .game-modal) .nav-section:has(.lookback-btn) { margin-bottom: 12px; }
    :is(.home-page, .game-modal) .nav-section:has(.lookback-btn) .nav-label { font-size: 12px; margin-bottom: 8px; }
    .home-page :is(.lookback-btn, .period-btn),
    .game-modal [data-period], .prop-modal .modal-period-button {
        min-height: 44px;
        min-width: 0;
        margin: 0;
        padding: 8px 2px;
        font-size: 11px;
        white-space: normal;
    }
    :is(.game-modal, .prop-modal) .modal-content { width: 100%; margin: 0; max-height: calc(100dvh - 16px); }
    :is(.game-modal, .prop-modal) .modal-close { min-width: 44px; min-height: 44px; }
    .prop-modal .modal-body { padding: 12px; max-height: none; overflow: visible; }
    .game-modal .modal-header { padding: 10px 12px; }
    .game-modal .analysis-context, .game-modal .chart-explanation { font-size: 11px; margin: 8px 0; }
    .prop-modal .modal-charts-container { padding: 0; gap: 16px; }
    .prop-modal :is(.modal-analysis-summary, .modal-ev-summary-section) { margin-inline: 0; padding: 12px; }
    :is(.home-page, .game-modal) .chart-container,
    .prop-modal .modal-charts-container .chart-container { padding: 10px; }
    :is(.home-page, .game-modal) .chart-section h4 { font-size: 17px; line-height: 1.35; }
}

@media (max-width: 360px) {
    .home-page .stats-grid-new-5 :is(.model-value, .ev-value),
    .prop-modal :is(.modal-model-value, .modal-ev-value) { font-size: 11px; }
    .home-page .stats-grid-new-5 .stat-label,
    .prop-modal .modal-stat-label { font-size: 9px; letter-spacing: 0; }
}

/* Dense mobile controls and expanded tables, not scaled-down desktop panels. */
@media (max-width: 600px) {
    .home-page .nav-section:has(.period-btn, .lookback-btn, [data-short-label]),
    .game-modal .nav-section.modal-period-selector {
        display: grid;
        grid-template-columns: 52px minmax(0, 1fr);
        align-items: center;
        gap: 8px;
        margin: 0 0 8px;
    }
    .home-page .nav-section:has(.period-btn, .lookback-btn, [data-short-label]) .nav-label,
    .game-modal .nav-section.modal-period-selector .nav-label {
        font-size: 10px;
        line-height: 1.3;
        letter-spacing: 0;
        margin: 0;
    }
    .home-page .nav-section:has([data-short-label]) .button-group,
    .home-page .button-group:has(.lookback-btn),
    .game-modal .modal-period-selector .button-group { gap: 4px; margin: 0; }
    .home-page .nav-section:has([data-short-label]) .nav-btn,
    .home-page .lookback-btn,
    .game-modal .modal-period-button,
    .prop-modal .modal-period-button {
        min-height: 32px;
        min-width: 0;
        padding: 5px 4px;
        font-size: 10px;
        line-height: 1.3;
    }
    .home-page .button-group.scrollable { justify-content: flex-start; }
    .home-page .button-group.scrollable .nav-btn { flex: 1 0 auto; }
    .home-page .player-header { padding: 0; gap: 8px; margin-bottom: 12px; }
    .home-page .player-header .player-name { margin: 0 0 4px; }
    .home-page .stats-card-wrapper { margin-bottom: 10px; border: 0; background: transparent; }
    .home-page .stats-grid-new-5 .stat-label { min-height: 16px; margin-bottom: 4px; }
    .home-page .stats-grid-new-5 .info-icon { font-size: 10px; }
    :is(.home-page, .prop-modal) :is(.average-rows, .modal-average-rows) { gap: 3px; }
    .home-page .player-analysis-card > p { font-size: 11px; line-height: 1.45; margin-block: 10px; }
    .home-page .player-analysis-card .sample-note { margin: 0 0 12px; padding-left: 0; }
    .prop-modal .prop-buttons-container { margin-bottom: 8px; padding-block: 0; }
    .prop-modal .modal-period-selector { margin-bottom: 10px; gap: 4px; }

    .home-page .chart-data { min-width: 0; max-width: 100%; padding: 8px; margin-top: 10px; }
    .home-page .chart-data summary { font-size: 12px; line-height: 1.4; }
    .home-page .chart-data table { font-size: 10px; margin: 0; }
    .home-page .chart-data caption { font-size: 10px; line-height: 1.4; margin: 4px 0 6px; }
    .home-page .chart-data table :is(th, td) {
        font-size: 10px;
        line-height: 1.4;
        padding: 5px 3px;
        letter-spacing: 0;
        white-space: nowrap;
        font-variant-numeric: tabular-nums;
    }
    .home-page .chart-data-note { font-size: 10px; margin: 6px 0 0; }
    .home-page .analysis-breakdown:has(.ev-summary-table) { padding: 10px; }
    .home-page .analysis-breakdown:has(.ev-summary-table) h5 { font-size: 12px !important; margin-bottom: 8px !important; }
    .home-page .ev-summary-table :is(th, td) { padding: 6px 4px; font-size: 11px; letter-spacing: 0; }
}