/* =============================================================================
 * FanPulse · mobile overlay
 * Loaded after the rest of the wireframe stylesheets. Targets ≤480px first,
 * with a softer tablet layer at 640–880px where the wireframe's 880px
 * breakpoint hasn't covered.
 * ============================================================================= */

/* --------- Phone (≤480px) ----------------------------------------------- */
@media (max-width: 480px) {

    /* Header: wrap nav, shrink text, hide some chrome */
    .header {
        flex-wrap: wrap;
        gap: var(--sp-1);
        padding-left: var(--sp-3);
        padding-right: var(--sp-3);
    }
    .header .btn-sm {
        font-size: 11px;
        padding: 4px 8px;
    }
    .header > div[style*="flex:1"] { display: none; }  /* drop the desktop spacer */

    /* Hero typography drops one step */
    h1, h2 { font-size: clamp(22px, 6vw, 28px) !important; line-height: 1.15; }
    h1.mb-4, h2.mb-4 { margin-bottom: var(--sp-3) !important; }
    .font-display[style*="font-size:64px"] { font-size: 44px !important; }

    /* Cards and shell tighter */
    .shell-main { padding: var(--sp-2) !important; }
    main.shell { padding: 0 !important; }
    .card, .card-hero { padding: var(--sp-3) !important; }
    .card-hero h1, .card-hero h2 { font-size: 22px !important; }

    /* Grids collapse */
    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

    /* Schedule / leaderboard / standings: horizontal scroll instead of squish */
    .card > .table,
    .card[style*="overflow:hidden"] > .table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    .table th, .table td { padding: 6px 8px; font-size: 12px; }
    .table thead { display: table-header-group; }

    /* Pick card: keep side + odds on one line but reduce wrap */
    .pick-card .pick-line { flex-wrap: wrap; gap: var(--sp-2); }
    .pick-card .pick-side { font-size: var(--fs-md); }
    .pick-card .pick-odds { font-size: var(--fs-md); }

    /* Filter chip rows scrollable */
    .flex.gap-2.flex-wrap.mb-3,
    .flex.gap-2.flex-wrap.mb-4 {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
        padding-bottom: var(--sp-1);
    }
    .chip { flex-shrink: 0; }

    /* Stat strip stacks */
    .grid-4.gap-3.mb-4,
    .grid-4.gap-3.mb-5 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

    /* Buttons in the post-actions row wrap */
    .post-actions { flex-wrap: wrap; gap: var(--sp-2); }

    /* Game scoreboard hero: stack the 3-column score layout */
    .grid-3.gap-3.items-center.text-center {
        grid-template-columns: 1fr;
        gap: var(--sp-4) !important;
    }

    /* Comment textareas fit width */
    .textarea, .input { width: 100%; box-sizing: border-box; }

    /* Watch party iframe shrinks but keeps aspect */
    iframe[src*="/videostream/"] { height: 420px !important; }
}

/* --------- Tablet middle ground (481–880px) ----------------------------- */
@media (min-width: 481px) and (max-width: 880px) {
    .grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .font-display[style*="font-size:64px"] { font-size: 52px !important; }
    h1, h2 { font-size: clamp(24px, 4vw, 32px) !important; }
}