/* ═══════════════════════════════════════════════════════════════════════════
   mobile.css  —  INFINITE mobile layout
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── INJECTED ELEMENTS ───────────────────────────────────────────────────── */
/* Hidden by default everywhere. On touch devices, mobile.js sets             */
/* display directly (block/flex) when the game starts, and none when it ends. */
#mobile-joystick-zone { display: none; }
#mobile-hud-btns      { display: none; }
#mobile-longpress-ring { display: none; }


/* ── VIRTUAL JOYSTICK ─────────────────────────────────────────────────────── */
#mobile-joystick-zone {
    position: fixed;
    left: 8px;
    bottom: 70px;
    width: 110px;
    height: 110px;
    z-index: 105;
    touch-action: none;
    pointer-events: auto;
}
#mobile-joystick-base {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(99,102,241,0.18);
    border: 2px solid rgba(99,102,241,0.45);
}
#mobile-joystick-thumb {
    position: absolute;
    width: 42px;
    height: 42px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgba(129,140,248,0.85);
    border: 2px solid rgba(199,210,254,0.7);
    box-shadow: 0 2px 12px rgba(99,102,241,0.5);
    pointer-events: none;
}

/* ── HUD BUTTON ROW ──────────────────────────────────────────────────────── */
#mobile-hud-btns {
    position: fixed;
    top: 4px;
    left: 4px;
    z-index: 115;
    flex-direction: row;
    gap: 4px;
    pointer-events: auto;
}
.mob-hud-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(15,15,30,0.88);
    border: 1px solid rgba(99,102,241,0.45);
    color: #e0e7ff;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.mob-hud-btn:active { background: rgba(99,102,241,0.55); }

/* ── LONG-PRESS RING ─────────────────────────────────────────────────────── */
#mobile-longpress-ring {
    position: fixed;
    width: 58px;
    height: 58px;
    margin-left: -29px;
    margin-top: -29px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 400;
}
#mobile-longpress-ring svg  { width: 100%; height: 100%; transform: rotate(-90deg); }
#mobile-longpress-ring circle {
    fill: none; stroke: #818cf8; stroke-width: 3;
    stroke-dasharray: 157; stroke-dashoffset: 157;
    transition: stroke-dashoffset 0.48s linear;
}

/* ── MAP CLOSE BUTTON ────────────────────────────────────────────────────── */
#mob-map-close-btn { display: none; }

/* ══════════════════════════════════════════════════════════════════════════
   TOUCH / SMALL-SCREEN OVERRIDES
   ══════════════════════════════════════════════════════════════════════════ */
@media (pointer: coarse), (max-width: 900px) {

    html, body {
        touch-action: none;
        overscroll-behavior: none;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
        -webkit-user-select: none;
    }

    #gameCanvas {
        width: 100vw !important;
        height: 100vh !important;
        touch-action: none;
    }

    /* ── PLAYER INFO (top-right) ──────────────────────────────────────────── */
    #player-info-ui {
        top: 4px !important;
        right: 4px !important;
        width: auto !important;
        min-width: 90px !important;
        padding: 4px 8px !important;
        pointer-events: none !important;
    }
    /* Hide the desktop icon buttons row inside player-info */
    #player-info-ui .flex.justify-end.gap-1.mt-2 { display: none !important; }
    #player-info-ui h2 { font-size: 0.7rem !important; }
    #player-info-ui p  { font-size: 0.65rem !important; margin-bottom: 0 !important; }

    /* ── OBJECTIVE / BARRIER ─────────────────────────────────────────────── */
    #game-objective-ui {
        top: 4px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
        font-size: 11px !important;
        padding: 2px 8px !important;
    }
    #barrier-hud {
        top: 50px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        font-size: 11px !important;
        padding: 3px 8px !important;
    }

    /* ── LEADERBOARD — compact slide-in from left ───────────────────────── */
    #leaderboard-wrapper {
        position: fixed !important;
        top: 44px !important;      /* below HUD button row */
        left: 0 !important;
        bottom: 66px !important;   /* above hotbar */
        width: min(200px, 65vw) !important;
        overflow-y: auto !important;
        background: rgba(12,12,24,0.97) !important;
        border-radius: 0 12px 12px 0 !important;
        z-index: 120 !important;
        transform: translateX(-110%) !important;
        opacity: 1 !important;
        transition: transform 0.22s ease !important;
    }
    #leaderboard-wrapper.lb-hidden {
        transform: translateX(-110%) !important;
        opacity: 1 !important;
    }
    #leaderboard-wrapper.lb-visible {
        transform: translateX(0) !important;
    }
    .lb-table th, .lb-table td { font-size: 9px !important; padding: 2px 4px !important; }
    #lb-search { font-size: 10px !important; padding: 3px 6px !important; }

    /* ── CHAT ────────────────────────────────────────────────────────────── */
    /* Chat-tab buttons (Chat / 💬 / ⚔️ / 🖥️) sit above the wrapper at     */
    /* top:-26px. When the wrapper slides off-screen they still render at   */
    /* the bottom edge. Hide them on mobile — the HUD 💬 button replaces.  */
    .chat-toggles-container { display: none !important; }

    #chat-wrapper {
        position: fixed !important;
        bottom: 66px !important;
        left: 4px !important;
        right: 4px !important;
        width: auto !important;
        height: 200px !important;
        max-height: 32vh !important;
        transform: translateY(130%) !important;
        transition: transform 0.22s ease !important;
        z-index: 112 !important;
    }
    #chat-wrapper.chat-hidden { transform: translateY(130%) !important; }
    #chat-wrapper.chat-visible { transform: translateY(0) !important; }

    .chat-resize-n, .chat-resize-e, .chat-resize-ne { display: none !important; }
    #chat-input { font-size: 16px !important; height: 36px !important; padding: 0 10px !important; }

    /* ── HOTBAR — full width, joystick sits beside it via ::before ───────── */
    #hotbar {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;        /* full width — joystick floats above */
        right: 0 !important;
        width: 100% !important;
        transform: none !important;
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-evenly !important;
        align-items: center !important;
        /* Extra left padding so buttons don't sit under joystick */
        padding: 4px 6px 10px 128px !important;
        gap: 3px !important;
        background: rgba(10,10,20,0.92) !important;
        border-top: 1px solid rgba(99,102,241,0.3) !important;
        border-radius: 0 !important;
        z-index: 100 !important;
        box-sizing: border-box !important;
    }
    .hotbar-cat {
        flex: 1 !important;
        min-width: 0 !important;
        height: 52px !important;
        padding: 2px !important;
        border-radius: 8px !important;
    }
    .hotbar-cat .hb-icon {
        display: block !important;
        font-size: 1.1rem !important;
        line-height: 1 !important;
        margin-bottom: 1px !important;
    }
    .hotbar-cat .name    {
        font-size: 0.46rem !important;
        line-height: 1.1 !important;
        white-space: normal !important;
        word-break: break-word !important;
        text-align: center !important;
        display: block !important;
        padding: 0 1px !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    .hotbar-cat .keybind { display: none !important; }

    /* Remove the pseudo-element (no longer needed) */
    #hotbar::before { display: none !important; }

    /* ── SPECTATE WARNING — tappable on mobile ───────────────────────────── */
    #spectate-warning {
        cursor: pointer !important;
        padding: 4px 8px !important;
        border-radius: 6px !important;
        border: 1px solid rgba(239,68,68,0.4) !important;
        background: rgba(239,68,68,0.08) !important;
        pointer-events: auto !important;
        font-size: 10px !important;
    }
    #spectate-warning::after {
        content: ' — TAP TO STOP';
        opacity: 0.7;
    }
    #shift-place-btn {
        position: fixed !important;
        right: 8px !important;
        bottom: 70px !important;
        width: 46px !important;
        height: 46px !important;
        font-size: 18px !important;
        z-index: 110 !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* ── CLASS MODAL (building picker) — bottom sheet ────────────────────── */
    #class-modal { align-items: flex-end !important; }
    #class-modal .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 60vh !important;
        border-radius: 16px 16px 0 0 !important;
        overflow-y: auto !important;
        margin: 0 !important;
        padding: 16px 12px 24px !important;
    }
    .class-btn { min-height: 48px !important; font-size: 13px !important; padding: 10px 12px !important; }

    /* ── UPGRADE MODAL — bottom sheet ────────────────────────────────────── */
    #upgrade-modal { align-items: flex-end !important; }
    #upgrade-modal .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 65vh !important;
        border-radius: 16px 16px 0 0 !important;
        overflow-y: auto !important;
        margin: 0 !important;
        padding: 20px 16px 32px !important;
    }
    .upg-btn {
        min-height: 44px !important;
        min-width: 60px !important;
        font-size: 14px !important;
        border-radius: 8px !important;
    }

    /* ── RADIAL MENU — moved off-screen on mobile (action sheet replaces it) ── */
    /* We can't use display:none !important because openRadialFor() sets            */
    /* display:block via JS and !important would prevent it from showing the sheet. */
    /* Instead push it off-screen so it never renders visibly.                      */
    #radial-menu {
        position: fixed !important;
        left: -9999px !important;
        top: -9999px !important;
        pointer-events: none !important;
        opacity: 0 !important;
    }

    /* ── MAP OVERLAY ─────────────────────────────────────────────────────── */
    #map-overlay { padding: 8px !important; gap: 8px !important; }
    #map-grid-inner {
        width: min(92vw, 420px) !important;
        height: min(92vw, 420px) !important;
    }
    #mob-map-close-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        background: rgba(239,68,68,0.12);
        border: 1px solid #ef4444;
        color: #ef4444;
        border-radius: 8px;
        padding: 8px 28px;
        font-size: 14px;
        font-weight: bold;
        cursor: pointer;
        min-height: 44px;
        -webkit-tap-highlight-color: transparent;
    }
    #map-close-hint { display: none !important; }
    #map-attack-panel {
        font-size: 12px !important;
        padding: 10px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        bottom: 8px !important;
        width: min(360px, 94vw) !important;
        box-sizing: border-box !important;
    }

    /* ── PIP — hidden ────────────────────────────────────────────────────── */
    #pip-container { display: none !important; }

    /* ── MODALS ──────────────────────────────────────────────────────────── */
    .modal-content {
        width: min(96vw, 380px) !important;
        max-height: 88vh !important;
        overflow-y: auto !important;
    }
    .keybind-row { display: none !important; }
    #pan-btn     { display: none !important; }

    /* ── TUTORIAL HURA BUBBLE ────────────────────────────────────────────── */
    #tut-bubble {
        font-size: 12px !important;
        padding: 10px 14px !important;
        max-width: 92vw !important;
        bottom: 80px !important;
    }

    /* ── SPAWN / FARMABLE SCREENS ────────────────────────────────────────── */
    #spawn-picker-screen, #farmable-reveal-screen { padding: 10px !important; }
    #spawn-grid-container { max-height: 55vh !important; }
}