/* ============================================================
   Iron Front — Mobile polish (≤900px / ≤600px / ≤480px)
   Loaded AFTER game.css so these rules win without !important
   spam. Specific selectors used; sparing use of !important only
   where existing rules already use it.
   ============================================================ */

/* ── Universal touch targets ────────────────────────────────── */
@media (max-width: 900px) {
    /* Easier to tap — anything that's clickable gets a 38px min */
    button, .btn, .btn-primary, .btn-secondary, .btn-small,
    .profile-link, .filter-chip, .nav-link, a.back-btn {
        min-height: 38px;
        touch-action: manipulation;       /* removes 300ms tap delay on iOS */
    }

    /* Prevent horizontal scroll trapping */
    html, body { overflow-x: hidden; }
}

/* ============================================================
   Main game (index.php) — topbar, nav, map toolbar
   ============================================================ */
@media (max-width: 900px) {
    /* Topbar nav links: convert text+icon to icon-only on mobile.
       Each .profile-link first text node holds the icon glyph. */
    .topbar-right {
        gap: .15rem;
    }
    .topbar-right .profile-link {
        padding: .35rem .45rem;
        font-size: 0;            /* hide the text */
        line-height: 1;
        white-space: nowrap;
    }
    /* Restore the leading icon character (which is the html entity) */
    .topbar-right .profile-link::first-letter {
        font-size: 1rem;
    }
    /* The username on the profile link still wants to be visible —
       except on really small phones */
    .topbar-right .profile-link[href*="/profile/"] {
        font-size: .68rem;       /* keep username visible */
    }

    /* Logout button (form) — make icon-only too */
    .topbar-right form button.btn-logout {
        font-size: 1rem;
        padding: .35rem .45rem;
    }

    /* Show WB + GOLD on the stat pills (not just WB).
       We previously hid n+3 children; now show n+3 (gold), still hide
       rank and era pills past that. */
    .topbar-center .stat-pill:nth-child(1),
    .topbar-center .stat-pill:nth-child(2) {
        display: inline-flex;
    }
    .topbar-center .stat-pill:nth-child(n+3) {
        display: none;
    }

    /* Map toolbar — horizontal scroll when buttons don't fit */
    .map-toolbar {
        bottom: .6rem;
        left: .5rem;
        right: .5rem;
        transform: none;
        max-width: none;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
        padding: .25rem;
        justify-content: flex-start;
    }
    .map-toolbar::-webkit-scrollbar { height: 4px; }
    .map-toolbar .map-btn {
        flex-shrink: 0;
        font-size: .7rem;
        padding: .5rem .75rem;
    }

    /* The Leaflet zoom control overlaps with the map toolbar on iOS
       Safari with bottom bars. Move it to the upper-left and make it
       smaller. */
    .leaflet-top.leaflet-left {
        top: 60px;
    }
    .leaflet-control-zoom a {
        width: 30px !important;
        height: 30px !important;
        line-height: 30px !important;
        font-size: 18px !important;
    }
}

/* Tiny phones — extra compression */
@media (max-width: 480px) {
    .topbar-right .profile-link[href*="/profile/"] {
        font-size: 0;
    }
    .topbar-right .profile-link[href*="/profile/"]::first-letter {
        font-size: 1rem;
    }
    .map-toolbar .map-btn { font-size: .65rem; padding: .5rem .6rem; }
}

/* ============================================================
   Command Centre status panel — already in right sidebar, 
   needs height fix on mobile
   ============================================================ */
@media (max-width: 900px) {
    .panel--cc { min-height: unset; }
    .cc-status__list {
        max-height: calc(100vh - 360px);   /* leave room for header + stats */
        min-height: 150px;
    }
    .cc-summary {
        grid-template-columns: 1fr 1fr;
        gap: .25rem .65rem;
    }
    .cc-row { padding: .45rem .55rem; }
    .cc-row__name { font-size: .8rem; }
    .cc-row__bottom { font-size: .65rem; }
}

/* ============================================================
   Sub-pages: profile / players / shop / faq / coalition / messages
   ============================================================ */

/* The sub-page topbar (no hamburgers — back-button instead) needs
   the same icon-only nav treatment on mobile. */
@media (max-width: 900px) {
    body:not(.body) .topbar { gap: .15rem !important; }

    /* Sub-pages: back button, logo, stat pills, nav links */
    body.profile-page .topbar,
    body.players-page .topbar,
    body.shop-page    .topbar,
    body.faq-page     .topbar,
    body.coalition-page .topbar,
    body.messages-page .topbar {
        padding: 0 .4rem;
        height: 52px;
    }

    /* Logo: text hidden, icon stays */
    body.profile-page .game-logo span,
    body.players-page .game-logo span,
    body.shop-page    .game-logo span,
    body.faq-page     .game-logo span,
    body.coalition-page .game-logo span,
    body.messages-page .game-logo span {
        display: none;
    }

    /* Back button — compact */
    .back-btn {
        padding: .25rem .4rem;
        font-size: .7rem;
    }
}

/* ── Profile page ───────────────────────────────────────────── */
@media (max-width: 900px) {
    .profile-layout {
        grid-template-columns: 1fr !important;
        gap: .85rem;
    }
    .profile-header__top {
        flex-direction: column;
        align-items: flex-start;
        gap: .65rem;
    }
    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: .5rem;
    }
    .stat-card { padding: .65rem; }
    .stat-card__value { font-size: 1.4rem; }
    .awards-grid {
        grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
        gap: .5rem;
    }
    .award-card { padding: .55rem; }
    .rank-rung { padding: .55rem; }
    .rank-rung__name { font-size: .85rem; }
    .rank-rung__abbr { font-size: .7rem; }
    .theme-picker {
        grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
        gap: .5rem;
    }
    .text-size-picker {
        grid-template-columns: 1fr 1fr;
        gap: .5rem;
    }
}

@media (max-width: 480px) {
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .rank-rung__xp { font-size: .65rem; }
    .rank-status { font-size: .55rem; padding: .1rem .35rem; }
    /* Hide era badge on really small screens to reduce row height */
    .rank-rung__era { display: none; }
}

/* ── Players page ───────────────────────────────────────────── */
@media (max-width: 700px) {
    /* Already had rules for this; reinforce edge cases */
    .all-players__header { gap: .5rem; }
    .all-players h2 { font-size: .95rem; }
    .search-bar { padding: .3rem .55rem; }
    .search-bar input { font-size: .9rem; }   /* prevent iOS zoom on focus */
    .leaderboard__list li { padding: .3rem .15rem; }
    .lb-name {
        max-width: 130px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ── Shop page ─────────────────────────────────────────────── */
@media (max-width: 700px) {
    .shop-intro { padding: .65rem .8rem; }
    .balance-card__value { font-size: 1.3rem; }
    .shop-intro__text { font-size: .8rem; }
    .shop-section h2 { font-size: .9rem; }
    .future-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
    .package-grid { grid-template-columns: 1fr; }
    .package { padding: 1rem .85rem; }
}

/* ── FAQ page ──────────────────────────────────────────────── */
@media (max-width: 700px) {
    .faq-section h2 { font-size: 1rem; }
    .qa { padding: .65rem .75rem; }
    .qa h3 { font-size: .9rem; }
    .qa p, .qa ul, .qa ol { font-size: .82rem; }
    .ranks-table th, .ranks-table td {
        padding: .35rem .4rem;
        font-size: .68rem;
    }
    /* Show only essential columns on phone */
    .ranks-table th:nth-child(4),
    .ranks-table td:nth-child(4),
    .ranks-table th:nth-child(5),
    .ranks-table td:nth-child(5) {
        display: none;
    }
    .eras-grid { grid-template-columns: 1fr; }
}

/* ── Coalition page ────────────────────────────────────────── */
@media (max-width: 900px) {
    .coalition-layout {
        grid-template-columns: 1fr !important;
        gap: .75rem;
    }
    .coal-card { padding: .85rem; }
    .coal-banner__row {
        grid-template-columns: 1fr 1fr !important;
        gap: .4rem;
    }
}

/* ── Messages page ─────────────────────────────────────────── */
@media (max-width: 700px) {
    .messages-layout {
        grid-template-columns: 1fr !important;
    }
    .messages-list { max-height: 250px; }
    .message-thread { padding: .65rem; }
}

/* ============================================================
   Modals — full-screen on phones; ensure no overflow trapping
   ============================================================ */
@media (max-width: 600px) {
    /* Dispatch / base / school panels already go fullscreen at 900px.
       Ensure scroll works inside them. */
    #panel-base-detail,
    #panel-training-building,
    #detail-panel,
    .dispatch-modal__inner,
    .all-units-modal__inner,
    .purchase-modal__inner {
        max-height: calc(100vh - 8px) !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* iOS input zoom — bump all form inputs to 16px so Safari
       doesn't zoom in when focused */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="number"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* ============================================================
   Auth pages (login / register)
   ============================================================ */
@media (max-width: 700px) {
    .auth-container,
    .auth-card {
        max-width: 100%;
        margin: 1rem .65rem;
        padding: 1.25rem 1rem;
    }
}

/* ============================================================
   Topbar overflow safety — last-resort fallback so the topbar
   NEVER scrolls horizontally on any screen size.
   ============================================================ */
@media (max-width: 900px) {
    .topbar {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .topbar::-webkit-scrollbar { display: none; }
}

/* ============================================================
   Safe area for iPhones with notches
   ============================================================ */
@supports (padding: max(0px)) {
    @media (max-width: 900px) {
        .topbar {
            padding-left: max(.5rem, env(safe-area-inset-left)) !important;
            padding-right: max(.5rem, env(safe-area-inset-right)) !important;
        }
        .map-toolbar {
            bottom: max(.6rem, env(safe-area-inset-bottom));
        }
    }
}