/* Aerodynamix mobile layout foundation.
   This file intentionally loads after page styles and uses !important only
   where it must override older inline responsive rules. */

html {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

body {
    min-width: 0;
    overflow-x: hidden;
    padding-bottom: env(safe-area-inset-bottom);
}

/* The access-code button is intentionally a touch-only entry point.
   Desktop users use the hidden Shop ArrowUp, ArrowDown, 2005 sequence. */
@media (min-width: 701px) {
    .mobile-access-button {
        display: none !important;
    }
}

.mobile-menu-toggle {
    display: none;
}

@media (max-width: 700px) {
    nav {
        box-sizing: border-box;
        height: calc(64px + env(safe-area-inset-top)) !important;
        min-height: calc(64px + env(safe-area-inset-top)) !important;
        padding: max(8px, env(safe-area-inset-top)) .75rem .5rem !important;
        gap: .65rem !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        background: rgba(5, 11, 24, .96) !important;
        border-bottom: 1px solid rgba(130, 183, 255, .14);
        box-shadow: 0 8px 28px rgba(0, 0, 0, .24);
        z-index: 100;
    }

    nav img {
        width: 40px !important;
        height: 40px !important;
        flex: 0 0 40px !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 10px !important;
    }

    nav h1 {
        min-width: 0 !important;
        max-width: 48vw;
        margin: 0 !important;
        overflow: hidden;
        font-size: clamp(.86rem, 4vw, 1.08rem) !important;
        letter-spacing: .035em !important;
        text-overflow: ellipsis;
    }

    nav > div,
    nav .collection-nav-links,
    nav .discs-nav-links {
        position: fixed !important;
        top: calc(64px + env(safe-area-inset-top)) !important;
        left: .65rem;
        right: .65rem;
        z-index: 110;
        display: none !important;
        box-sizing: border-box;
        flex: none !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        width: auto !important;
        max-height: calc(100svh - 80px);
        overflow-y: auto !important;
        padding: .45rem !important;
        gap: .25rem !important;
        border: 1px solid rgba(130, 183, 255, .25);
        border-radius: 16px;
        background: rgba(8, 17, 36, .98);
        box-shadow: 0 22px 60px rgba(0, 0, 0, .55);
        scrollbar-width: thin;
    }

    body.mobile-nav-open nav > div,
    body.mobile-nav-open nav .collection-nav-links,
    body.mobile-nav-open nav .discs-nav-links {
        display: flex !important;
    }

    nav > div a,
    nav .collection-nav-links a,
    nav .discs-nav-links a,
    nav > div .mobile-nav-settings {
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
        min-height: 44px;
        box-sizing: border-box;
        width: 100%;
        padding: .65rem .8rem !important;
        border: 1px solid transparent;
        border-radius: 10px !important;
        font-size: .78rem !important;
        text-align: left;
    }

    nav > div a:hover,
    nav .collection-nav-links a:hover,
    nav .discs-nav-links a:hover,
    nav > div a.active,
    nav .collection-nav-links a.active,
    nav .discs-nav-links a.active {
        background: rgba(44, 127, 252, .2) !important;
        border-color: rgba(130, 183, 255, .25) !important;
    }

    nav > a,
    nav > .collection-nav-settings,
    nav > .discs-nav-settings {
        display: none !important;
    }

    .mobile-menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        min-height: 40px;
        margin-left: auto;
        padding: .55rem .75rem;
        border: 1px solid rgba(130, 183, 255, .28);
        border-radius: 10px;
        color: #dceaff;
        background: rgba(44, 127, 252, .16);
        font: 800 .72rem Montserrat, sans-serif;
        letter-spacing: .04em;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .mobile-menu-toggle::before {
        content: '☰';
        margin-right: .4rem;
        font-size: 1rem;
        line-height: 1;
    }

    body.mobile-nav-open .mobile-menu-toggle {
        color: #fff;
        background: #2c7ffc;
    }

    body.mobile-nav-open .mobile-menu-toggle::before {
        content: '×';
        font-size: 1.25rem;
    }

    body.mobile-nav-open::after {
        content: '';
        position: fixed;
        inset: calc(64px + env(safe-area-inset-top)) 0 0;
        z-index: 90;
        background: rgba(0, 0, 0, .35);
    }

    .content {
        padding: calc(4.8rem + env(safe-area-inset-top)) .85rem 4rem !important;
    }

    .featured {
        margin: calc(4.7rem + env(safe-area-inset-top)) 0 1.25rem !important;
        padding: .5rem 0 !important;
    }

    .featured h1 {
        font-size: 1.15rem !important;
        margin-bottom: .7rem !important;
        letter-spacing: .18em !important;
    }

    .featured .games-row {
        gap: .65rem !important;
        padding: 0 .85rem .45rem !important;
    }

    .featured .games-row a {
        flex: 0 0 min(74vw, 300px) !important;
    }

    .search {
        width: 100%;
        margin: .9rem 0 .8rem !important;
    }

    #games {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: .65rem !important;
        margin-top: .35rem !important;
        padding-bottom: 3rem !important;
    }

    #games img {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
        object-fit: cover;
        margin: 0;
        border-radius: 13px;
    }

    .shop-page,
    .collection-page,
    .apps-page {
        padding: calc(5.35rem + env(safe-area-inset-top)) .9rem 5rem !important;
    }

    .shop-heading,
    .collection-heading {
        margin-bottom: 1.4rem !important;
        padding: 1.35rem 1.15rem !important;
        border-radius: 18px !important;
    }

    .shop-heading h1,
    .collection-heading h1,
    .apps-title {
        font-size: clamp(1.8rem, 9vw, 2.35rem) !important;
    }

    .shop-heading p,
    .collection-heading p,
    .apps-subtitle {
        font-size: .82rem !important;
    }

    .shop-grid,
    .collection-grid,
    .apps-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: .7rem !important;
    }

    .shop-card-body {
        min-height: 96px !important;
        padding: .72rem !important;
    }

    .shop-card h2,
    .collection-card h3 {
        font-size: .75rem !important;
    }

    .shop-buy,
    .sell-card,
    .app-card-launch {
        min-height: 44px;
        padding: .65rem .45rem;
    }

    .card-pack-inner {
        flex-direction: column !important;
        gap: 1rem !important;
        padding: 1.35rem 1rem !important;
        text-align: center !important;
    }

    .pack-buy {
        width: 100% !important;
        min-width: 0 !important;
    }

    .collection-page .collection-meta {
        gap: .45rem;
    }

    .collection-stat {
        font-size: .68rem;
    }

    .discs-page {
        min-height: 100svh;
        padding: calc(5.45rem + env(safe-area-inset-top)) .85rem 4rem !important;
    }

    .discs-panel {
        padding: 1.7rem 1rem 1.35rem !important;
        border-radius: 20px !important;
    }

    .daily-claim-button {
        width: 100%;
        min-width: 0;
        min-height: 48px;
    }

    .dc-container {
        padding-top: calc(5.2rem + env(safe-area-inset-top)) !important;
        padding-left: .8rem !important;
        padding-right: .8rem !important;
    }

    .mobile-access-button {
        min-height: 44px;
        margin-top: 1rem !important;
    }
}

@media (max-width: 900px) and (orientation: landscape) and (max-height: 600px) {
    nav {
        height: calc(54px + env(safe-area-inset-top)) !important;
        min-height: calc(54px + env(safe-area-inset-top)) !important;
        padding: max(5px, env(safe-area-inset-top)) .7rem .35rem !important;
    }

    nav img {
        width: 34px !important;
        height: 34px !important;
        flex-basis: 34px !important;
    }

    nav h1 {
        max-width: 25vw;
        font-size: .86rem !important;
    }

    nav > div,
    nav .collection-nav-links,
    nav .discs-nav-links {
        top: calc(54px + env(safe-area-inset-top)) !important;
        left: .6rem;
        right: .6rem;
        max-height: calc(100svh - 68px);
    }

    .mobile-menu-toggle {
        min-height: 34px;
        padding: .4rem .6rem;
        font-size: .66rem;
    }

    .content {
        padding-top: calc(3.9rem + env(safe-area-inset-top)) !important;
    }

    .featured {
        margin-top: calc(3.8rem + env(safe-area-inset-top)) !important;
    }

    .featured .games-row a {
        flex-basis: 29vw !important;
    }

    #games {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: .5rem !important;
    }

    .shop-page,
    .collection-page,
    .apps-page {
        padding: calc(4rem + env(safe-area-inset-top)) .8rem 3rem !important;
    }

    .shop-heading,
    .collection-heading {
        padding: .95rem 1.15rem !important;
        margin-bottom: 1rem !important;
    }

    .shop-heading h1,
    .collection-heading h1,
    .apps-title {
        font-size: 1.55rem !important;
    }

    .shop-heading p,
    .collection-heading p,
    .apps-subtitle {
        font-size: .72rem !important;
    }

    .shop-grid,
    .collection-grid,
    .apps-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: .5rem !important;
    }

    .shop-card-body {
        min-height: 72px !important;
        padding: .5rem !important;
    }

    .shop-card h2,
    .collection-card h3 {
        font-size: .66rem !important;
    }

    .shop-buy,
    .sell-card,
    .app-card-launch {
        min-height: 34px;
        padding: .4rem .3rem;
        font-size: .62rem;
    }

    .card-pack-inner {
        flex-direction: row !important;
        gap: 1rem !important;
        padding: .9rem 1.1rem !important;
        text-align: left !important;
    }

    .pack-art {
        width: 90px !important;
        height: 122px !important;
    }

    .pack-buy {
        width: auto !important;
        min-width: 140px !important;
    }

    .discs-page {
        padding: calc(4.2rem + env(safe-area-inset-top)) .8rem 2rem !important;
    }

    .dc-container {
        padding-top: calc(3.9rem + env(safe-area-inset-top)) !important;
    }
}