/* ================================================
   MOBILE RESPONSIVE OVERRIDES
   Desktop-first: sidebar collapses, tables scroll
   ================================================ */

@media (max-width: 768px) {
    /* Hide desktop sidebar, show mobile topbar and bottom tabs */
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        width: 280px;
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .sidebar-overlay.open {
        display: block;
    }

    .topbar {
        display: flex;
    }

    .bottom-tabs {
        display: flex;
    }

    .content {
        margin-left: 0;
        padding: 72px 16px 80px;
        max-width: 100%;
    }

    /* Typography scale down */
    .page-title {
        font-size: 22px;
    }

    .page-subtitle {
        font-size: 13px;
    }

    /* Stat boxes 2-up with bigger values */
    .stat-row {
        gap: 10px;
    }

    .stat-box {
        min-width: calc(50% - 5px);
        padding: 12px 14px;
    }

    .stat-value {
        font-size: 26px;
    }

    .stat-label {
        font-size: 10px;
    }

    /* ---- Top pick card ---- */
    .top-pick-logo-bleed {
        width: 120px;
        height: 120px;
        left: -10px;
    }

    .top-pick-team {
        font-size: 22px;
    }

    .top-pick-stats {
        gap: 20px;
    }

    .top-pick-stat-value {
        font-size: 22px;
    }

    /* ---- Pick table: hide vs, score, rules columns ---- */
    .pick-vs,
    .pick-score,
    .pick-rules {
        display: none;
    }

    /* Hide matching <th> by position: 2nd (vs), 5th (score), 6th (rules) */
    .picks-table thead th:nth-child(2),
    .picks-table thead th:nth-child(5),
    .picks-table thead th:nth-child(6) {
        display: none;
    }

    /* Pick team bleed logo — scale down on mobile */
    .pick-team .team-logo-bleed {
        width: 36px;
        height: 36px;
        left: -4px;
    }

    .pick-team .pick-team-name {
        padding-left: 22px;
    }

    /* ---- Tables: better readability ---- */
    .table-wrap {
        margin: 0 -1px;
        -webkit-overflow-scrolling: touch;
    }

    .data-table tbody td,
    .picks-table tbody td {
        padding: 7px 9px;
        font-size: 13px;
    }

    .data-table thead th,
    .picks-table thead th {
        padding: 8px 9px;
        font-size: 10px;
    }

    /* ---- Date navigation: bigger touch targets ---- */
    .date-nav {
        gap: 10px;
    }

    .date-nav-current {
        font-size: 16px;
    }

    .date-nav-btn {
        min-width: 44px;
        min-height: 44px;
        width: 44px;
        height: 44px;
        font-size: 20px;
    }

    /* ---- Bottom tabs: larger touch targets ---- */
    .bottom-tab {
        font-size: 11px;
        padding: 8px 12px;
        gap: 3px;
    }

    .bottom-tab svg {
        width: 24px;
        height: 24px;
    }

    /* Tier cards on analysis page */
    .tier-cards {
        gap: 10px;
    }

    .tier-card {
        min-width: calc(50% - 5px);
        padding: 14px;
    }

    .tier-card-record {
        font-size: 22px;
    }

    .tier-card-pct {
        font-size: 16px;
    }

    /* Split tables stack vertically */
    .split-tables {
        flex-direction: column;
        gap: 16px;
    }

    /* Error pages */
    .error-code {
        font-size: 64px;
    }

    .error-title {
        font-size: 22px;
    }

    /* Game detail hero */
    .detail-hero {
        flex-direction: column;
        gap: 16px;
        padding: 20px 16px;
    }

    .detail-hero-side { min-width: auto; }

    .detail-hero-logo {
        width: 56px;
        height: 56px;
    }

    .detail-hero-team { font-size: 18px; }

    .detail-scores { flex-direction: column; gap: 8px; }

    .detail-score-box { flex: auto; flex-direction: row; justify-content: space-between; padding: 12px 16px; }

    .detail-pitchers { flex-direction: column; gap: 20px; padding: 16px; }

    .detail-links { flex-direction: column; }

    .detail-link-btn { justify-content: center; }

    /* How It Works */
    .how-tier { flex-direction: column; align-items: flex-start; gap: 6px; }

    .how-rules-grid { padding: 12px 16px 16px; }

    /* Accuracy chart */
    .chart-bars { gap: 8px; padding: 16px 12px 12px; min-height: 220px; }
    .chart-bar-track { height: 140px; }

    /* Cards */
    .card-header {
        padding: 10px 14px;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .card-footer {
        padding: 10px 14px;
    }

    .legend {
        gap: 6px;
    }
}

/* Small phones */
@media (max-width: 480px) {
    .content {
        padding: 64px 12px 72px;
    }

    .stat-box {
        min-width: 100%;
    }

    .stat-row {
        flex-direction: column;
        gap: 8px;
    }

    .top-pick-stats {
        flex-direction: column;
        gap: 12px;
    }

    .tier-card {
        min-width: 100%;
    }

    .tier-cards {
        flex-direction: column;
    }
}