/* ============================================
   RESPONSIVE
   ============================================ */

/* Hamburger — hidden on desktop */
.nav-hamburger {
    display: none;
    background: none;
    border: none;
    color: var(--text);
    font-size: 20px;
    cursor: pointer;
    padding: 4px 6px;
    line-height: 1;
}

@media (max-width: 640px) {
    #navbar {
        padding: 0 12px;
        position: relative;
    }

    /* Hide desktop nav links; show hamburger */
    .nav-links {
        display: none;
        position: absolute;
        top: 56px;
        left: 0;
        right: 0;
        background: var(--surface);
        border-bottom: 1px solid var(--border);
        flex-direction: column;
        gap: 0;
        z-index: 200;
        padding: 8px 0;
    }
    .nav-links.nav-open {
        display: flex;
    }
    .nav-links a {
        font-size: 14px;
        padding: 10px 20px;
        border-bottom: none;
    }
    .nav-links a:hover,
    .nav-links a.active {
        background: var(--surface2);
        border-bottom: none;
    }
    .nav-hamburger { display: block; }

    .btn-discord,
    .btn-google { display: none; }

    /* Move My Decks into hamburger on mobile; hide nav-right copy and username text */
    .nav-my-decks { display: block; }
    .nav-link,
    .nav-username { display: none; }

    /* Login links in hamburger menu */
    .nav-mobile-auth {
        display: block;
        font-size: 14px;
        padding: 10px 20px;
        color: var(--text-muted);
    }
    .nav-mobile-auth:hover {
        background: var(--surface2);
        color: var(--text);
    }

    /* Align page content left/right edges with navbar */
    .page-container {
        padding: 16px 12px;
    }

    /* Card detail: stack image above info */
    .cd-layout {
        grid-template-columns: 1fr;
        margin: 20px auto;
    }
    .cd-img { max-width: 240px; }
    /* Landscape cards: natural orientation; override the desktop height and the portrait max-width */
    .cd-img--landscape {
        width: 100%;
        height: auto;
        max-width: 100%;
    }

    /* Modal: full-width, centered, reduced padding on mobile */
    .modal-overlay {
        align-items: center;
        padding: 12px;
    }
    .modal {
        max-width: calc(100vw - 24px); /* vw = simulated viewport; avoids % resolving against wrong parent */
        max-height: 92vh;
    }
    .modal-body {
        padding: 16px;
        padding-top: 52px; /* clear the close button */
    }

    /* Card popup modal stacks vertically */
    .cb-modal-inner { flex-direction: column; }
    .cb-modal-img { width: 100%; max-width: 200px; }
    .cb-modal-img--landscape { width: 100%; max-width: 300px; height: auto; }

    /* Deck builder touch targets */
    .db-qty-btn {
        width: 36px;
        height: 36px;
        font-size: 18px;
    }
    .db-card-row {
        padding: 6px 6px 6px 12px;
    }
    .db-top-row,
    .db-action-row {
        flex-wrap: wrap;
    }
    .db-format-sel {
        min-height: 34px;
        font-size: 14px;
        flex: 1;
    }
    .db-action-row .btn {
        padding: 7px 14px;
    }
    .db-vrow {
        flex-wrap: wrap;
        gap: 2px;
    }

    /* Sticky page headers: too tall on mobile — let header scroll, keep filter bar sticky */
    .page-sticky-top {
        position: static;
        margin-top: 0;
        padding-top: 0;
    }
    .page-sticky-top .dg-filter-bar {
        position: sticky;
        top: var(--navbar-height);
        padding: 12px 0;
        margin-top: -12px;
    }

    /* Deck view: stack stats below cards */
    .dv-layout {
        grid-template-columns: 1fr;
    }
    .dv-stats {
        position: static;
    }

    /* Deck builder: stack panel above browser, normal scroll */
    .db-layout {
        grid-template-columns: minmax(0, 1fr); /* min=0 prevents card browser content from inflating the track */
        height: auto;
        overflow: visible;
    }
    .db-panel {
        height: auto;
        overflow: visible;
        border-right: none;
        border-bottom: 1px solid var(--border);
        max-height: none;
        min-width: 0;
    }
    .db-panel-top {
        position: static;
    }
    .db-browser {
        height: auto;
        overflow: visible;
        min-width: 0;
    }
    .db-browser .cb-results-header {
        position: static;
    }

    /* Card browser results header: wrap onto two lines on mobile.
       Line 1: count + per-page controls.  Line 2: pagination buttons. */
    .cb-results-header {
        flex-wrap: wrap;
        gap: 6px;
        padding: 10px 12px;
    }
    .cb-count { flex: 1; }
    .cb-pagination--inline {
        flex-wrap: wrap;   /* override the desktop nowrap */
        order: 3;          /* push pagination below count + per-page */
        width: 100%;
        justify-content: center;
    }

    /* Filter bar: remove sticky on mobile — iOS Safari collapses browser chrome,
       leaving a gap above the bar where deck tiles bleed through */
    .dg-filter-bar {
        position: static;
        margin-top: 0;
    }

    /* Gallery tiles: 1 column on very small screens */
    .dg-grid {
        grid-template-columns: 1fr;
    }

    /* Landing page — hide 3D card scene (fixed-width cards overflow mobile) */
    .lp-card-display-wrap { display: none; }
    .lp-hero {
        min-height: auto;
        padding-bottom: 56px;
    }
    .lp-hero-inner { padding: 40px 20px 0; }
    .lp-hero-content {
        background: linear-gradient(to bottom, var(--bg) 80%, transparent 100%);
    }

    /* Card detail — deck appearance list wraps to two lines on mobile */
    .cd-deck-link {
        flex-wrap: wrap;
    }
    .cd-deck-badges {
        width: auto;
        gap: 4px;
    }
    .cd-deck-name {
        flex: 1 1 60%;
    }
    .cd-deck-owner {
        flex: 1 1 60%;
        order: 3;
    }
    .cd-deck-count {
        order: 4;
    }
}