/* ==========================================================
   MOBILE RESPONSIVE LAYOUT
   Breakpoints:
     ≤1024px — phones in landscape, narrow tablets, narrow windows
     ≤480px  — phones in portrait
   Zero effect on desktop (≥1025px).
   ========================================================== */

/* ── Tablet & landscape phone (≤1024px) ──────────────────── */
@media (max-width: 1024px) {

    /* Header: compact, wrap nav below logo */
    header {
        padding: 8px 14px;
        flex-wrap: wrap;
        gap: 6px;
    }
    .logo { font-size: 19px !important; }
    nav {
        width: 100%;
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 0;
        padding-bottom: 2px;
    }
    nav a { margin: 0 10px !important; font-size: 16px !important; white-space: nowrap; }

    /* Body padding */
    #main-content { padding: 8px 10px !important; gap: 8px !important; }

    /* Status bar */
    #status { padding: 5px 12px !important; font-size: 16px !important; margin-bottom: 6px !important; }

    /* Force the desktop multi-column flex chain into a single column. */
    #game-content-wrapper { flex-direction: column !important; gap: 8px !important; }
    #game-and-sidebar     { flex-direction: column !important; gap: 0 !important; width: 100% !important; }
    #game-area            { flex-direction: column !important; gap: 6px !important; align-items: stretch !important; }

    /* Hide the right-side widgets column (Minimap + Activity);
       Minimap is shown as an in-canvas overlay (#minimap-container). */
    #right-widgets-col { display: none !important; }

    /* Hide the marketing/info panels in #sidebar — but DO NOT hide
       #sidebar itself, because #chat-window lives inside it and we
       repositon it as a slide-up overlay below. */
    #sidebar > .sidebar-panel { display: none !important; }
    #sidebar {
        display: contents !important; /* sidebar disappears as a layout box */
    }

    /* Canvas fills full available width. */
    #game-container { width: 100% !important; }
    #canvas-wrap {
        width: 100% !important;
        height: auto !important;
        max-width: 100vw !important;
    }
    #game-canvas {
        width: 100% !important;
        height: auto !important;
        display: block;
    }

    /* Left rail: 44px touch targets per Apple HIG / Material recs. */
    #left-rail { left: 6px !important; top: 54px !important; gap: 6px !important; }
    .rail-btn { width: 44px !important; min-height: 44px !important; padding: 4px 0 2px !important; }
    .rail-btn-label { font-size: 12px !important; }

    /* Left HUD slide-out: fill nearly the whole screen on mobile. */
    #left-hud-panel {
        left: 56px !important;
        top: 46px !important;
        width: calc(100vw - 62px) !important;
        max-width: calc(100vw - 62px) !important;
        max-height: 70vh !important;
    }

    /* Inventory panel: anchored bottom, full width. */
    #ui-panel {
        position: absolute !important;
        left: 6px !important;
        right: 6px !important;
        bottom: 6px !important;
        width: auto !important;
        max-height: 60vh !important;
    }

    /* In-canvas minimap overlay (top-right). */
    #minimap-container {
        width: 140px !important;
        height: 152px !important;
        padding: 4px !important;
        top: 6px !important;
        right: 6px !important;
    }
    #minimap-canvas { width: 120px !important; height: 120px !important; }
    #minimap-compass { font-size: 16px !important; margin-top: 3px !important; }

    /* ── Chat & Social as slide-up overlay ────────────────────
       Hidden by default; chat-rail-btn toggles body.mobile-chat-open
       to reveal it. Stays in the DOM (no markup changes needed). */
    #chat-window {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        max-height: 60vh !important;
        z-index: 200 !important;
        transform: translateY(100%);
        transition: transform 0.18s ease-out;
        margin: 0 !important;
    }
    body.mobile-chat-open #chat-window {
        transform: translateY(0);
    }
    #chat-box { height: 32vh !important; }

    /* All overlay modals: full width */
    #trade-panel   { width: 100vw !important; max-width: 100vw !important; }
    #courier-panel, #letter-composer-panel { width: 96vw !important; max-width: 96vw !important; }
    #crafting-modal { padding: 0 6px 6px !important; }
    #crafting-panel {
        width: calc(100% - 2px) !important;
        max-height: 72vh !important;
    }
    #crafting-items {
        display: block !important;
        padding: 8px !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }
    .craft-tabs {
        gap: 6px !important;
        padding-bottom: 8px !important;
    }
    .craft-tab-btn {
        flex: 1 1 calc(50% - 6px) !important;
        min-width: 0 !important;
        font-size: 16px !important;
        padding: 8px 6px !important;
    }
    .craft-group-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    #leaderboard-panel { width: 96vw !important; }
    #economy-panel { width: 96vw !important; }
    .equipment-select-modal { width: 96vw !important; max-width: 96vw !important; }
    #controls-panel { width: 92vw !important; }
    #courier-tabs { flex-wrap: wrap !important; gap: 6px !important; }
    .courier-tab-btn { flex: 1 1 calc(50% - 6px) !important; }
    .courier-card-top { flex-direction: column !important; align-items: flex-start !important; }
    .courier-card-actions, #letter-composer-actions, #mail-dispatch-actions { flex-direction: column !important; }
    .courier-card-actions button, #letter-composer-actions button, #courier-compose-btn, #mail-dispatch-actions button { width: 100% !important; }
    #mail-dispatch-panel { width: 96vw !important; max-width: 96vw !important; }
    .mail-dispatch-attachment-row { flex-wrap: wrap !important; }
    .mail-dispatch-attachment-row select { min-width: 60% !important; }

    /* Login form inside canvas */
    #login-form {
        width: 80% !important;
        max-width: 320px !important;
        padding: 16px 18px 20px !important;
    }
    #login-form h2 { font-size: 16px !important; margin-bottom: 14px !important; }
    #login-form input { padding: 8px 10px !important; font-size: 18px !important; margin-bottom: 10px !important; }
    #login-form button { padding: 8px !important; font-size: 17px !important; }

    /* Action progress bar */
    #action-progress { width: 90vw !important; }

    /* Footer */
    footer { padding: 10px 14px !important; font-size: 16px !important; }
    footer a { margin: 0 6px !important; }
}

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

    /* Collapse top nav entirely — links are reachable in-game. */
    nav { display: none !important; }
    header { justify-content: center !important; }

    .logo { font-size: 18px !important; }

    #main-content { padding: 4px 6px !important; }

    /* Leaderboard tabs: 3 columns on narrow screens */
    #leaderboard-tabs { grid-template-columns: repeat(3, 1fr) !important; }

    /* Inventory full width on phone */
    #ui-panel { left: 3px !important; right: 3px !important; bottom: 3px !important; }

    /* Login form */
    #login-form { width: 90% !important; padding: 14px 14px 18px !important; }
    #login-form h2 { font-size: 15px !important; margin-bottom: 12px !important; }

    /* Economy grid single column */
    .economy-grid { grid-template-columns: 1fr !important; }

    /* Minimap smaller in portrait */
    #minimap-container {
        width: 110px !important;
        height: 122px !important;
    }
    #minimap-canvas { width: 90px !important; height: 90px !important; }
}