/* ==========================================================
   MOBILE RESPONSIVE LAYOUT
   Only applies at ≤900px. Zero effect on desktop.
   ========================================================== */

/* ── Tablet (≤900px) ─────────────────────────────────────── */
@media (max-width: 900px) {

    /* Header: compact, wrap nav below logo */
    header {
        padding: 8px 14px;
        flex-wrap: wrap;
        gap: 6px;
    }
    .logo { font-size: 13px !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: 10px !important; white-space: nowrap; }

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

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

    /* Hide sidebar (news/server status) — screen too small to be useful */
    #sidebar { display: none !important; }

    /* Game area layout: controls panel becomes horizontal bar above canvas */
    #game-and-sidebar { flex-direction: column !important; gap: 0 !important; }
    #game-area { flex-direction: column !important; gap: 6px !important; align-items: stretch !important; }

    #game-controls-panel {
        flex-direction: row !important;
        width: 100% !important;
        height: auto !important;
        padding: 5px 6px !important;
        gap: 5px !important;
        justify-content: flex-start !important;
    }
    .game-control-btn {
        width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        font-size: 16px !important;
    }

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

    /* Left rail: smaller buttons */
    #left-rail { left: 6px !important; top: 54px !important; gap: 5px !important; }
    .rail-btn { width: 34px !important; height: 34px !important; }

    /* Left hud panel: full width */
    #left-hud-panel {
        left: 6px !important;
        top: 46px !important;
        width: calc(100% - 12px) !important;
        max-height: 65vh !important;
    }

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

    /* Minimap: smaller */
    #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: 10px !important; margin-top: 3px !important; }

    /* Chat window: narrower */
    #chat-window {
        width: min(300px, calc(100% - 56px)) !important;
        bottom: 6px !important;
        left: 46px !important;
    }

    /* All overlay modals: full width */
    #trade-panel   { width: 100vw !important; max-width: 100vw !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; }

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

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

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

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

    /* Collapse nav entirely to save space — key links are in-game */
    nav { display: none !important; }
    header { justify-content: center !important; }

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

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

    /* Rail buttons even smaller */
    .rail-btn { width: 30px !important; height: 30px !important; }
    #left-rail { gap: 4px !important; }

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

    /* Chat window */
    #chat-window { width: calc(100% - 46px) !important; left: 40px !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: 9px !important; margin-bottom: 12px !important; }

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

    /* Minimap collapsed by default hint — make toggle more obvious */
    #minimap-container {
        width: 110px !important;
        height: 122px !important;
    }
    #minimap-canvas { width: 90px !important; height: 90px !important; }
}