/* ============================================
   MOBILE NAVBAR - OPTIMIZED MOBILE INTERFACE
   ============================================ */

@media (max-width: 768px) {
    /* Navbar - Transparent background where logo is */
    nav,
    nav.navbar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        margin: 0 !important;
        padding: 0.6rem 0 !important;
        z-index: 99999 !important;
        background: transparent !important;
        backdrop-filter: none !important;
        border-bottom: none !important;
        box-sizing: border-box !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Container - Align to left edge */
    nav .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
    }

    /* Nav Content - Column layout: Logo on top, buttons below at left edge */
    .nav-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 0.5rem !important;
        background: transparent !important;
    }

    /* Logo and BrainArk text - Large, NO BACKGROUND */
    .logo {
        display: flex !important;
        align-items: center !important;
        gap: 0.6rem !important;
        flex-shrink: 0 !important;
        padding: 0 0.6rem !important;
        margin: 0 auto !important;
        width: auto !important;
        background: transparent !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    .logo img {
        width: 37.44px !important;
        height: 37.44px !important;
        flex-shrink: 0 !important;
        image-rendering: -webkit-optimize-contrast !important;
        image-rendering: crisp-edges !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    .logo span {
        font-size: 28.08px !important;
        font-weight: 700 !important;
        background: linear-gradient(135deg, #00f5ff 0%, #0099ff 100%) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
        white-space: nowrap !important;
        letter-spacing: 0.5px !important;
        flex-shrink: 0 !important;
        display: inline-block !important;
        min-width: fit-content !important;
    }

    /* Nav Links - Second row, left edge aligned, NO BACKGROUND */
    .nav-links {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 0.15rem !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        width: 100% !important;
        padding: 0 0.15rem !important;
        visibility: visible !important;
        opacity: 1 !important;
        justify-content: flex-start !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        background: transparent !important;
        backdrop-filter: none !important;
        border-bottom: none !important;
        padding-bottom: 0.3rem !important;
    }

    .nav-links::-webkit-scrollbar {
        display: none !important;
    }

    /* Nav Link Buttons - 30% SMALLER, 80% LARGER TEXT, NO BACKGROUND */
    .nav-links a {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        /* Text 80% larger */
        font-size: 0.756rem !important;
        padding: 0.168rem 0.224rem !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        /* NO BACKGROUND - Transparent */
        background: transparent !important;
        border: 0.5px solid rgba(0, 245, 255, 0.6) !important;
        border-radius: 3px !important;
        color: #00f5ff !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        transition: all 0.3s ease !important;
        line-height: 1.3 !important;
        letter-spacing: 0.02em !important;
        /* Scale down by 30% */
        transform: scale(0.7) !important;
        transform-origin: left center !important;
        margin-right: -0.3rem !important;
        text-shadow: 0 0 5px rgba(0, 245, 255, 0.3) !important;
    }

    .nav-links a:hover,
    .nav-links a:active {
        background: rgba(0, 245, 255, 0.15) !important;
        border-color: rgba(0, 245, 255, 1) !important;
        transform: scale(0.7) translateY(-1px) !important;
        text-shadow: 0 0 10px rgba(0, 245, 255, 0.6) !important;
    }

    /* Launch dApp button - Highlighted with gradient text, NO DARK BACKGROUND */
    .nav-links a.btn-primary,
    .nav-links a:last-child {
        background: transparent !important;
        color: #00f5ff !important;
        font-weight: 700 !important;
        border: 1px solid rgba(0, 245, 255, 0.8) !important;
        box-shadow: 0 0 10px rgba(0, 245, 255, 0.4) !important;
        font-size: 0.864rem !important;
        text-shadow: 0 0 8px rgba(0, 245, 255, 0.5) !important;
    }

    .nav-links a.btn-primary:hover,
    .nav-links a:last-child:hover {
        background: rgba(0, 245, 255, 0.2) !important;
        box-shadow: 0 0 15px rgba(0, 245, 255, 0.7) !important;
    }

    /* Hide mobile menu button */
    .mobile-menu-btn,
    .mobile-menu-toggle,
    .hamburger {
        display: none !important;
    }

    /* Body spacing */
    body {
        padding-top: 75px !important;
    }
}