/**
 * Mobile Navigation - Complete Redesign
 * Modern bottom tab bar + hamburger menu for app-like experience
 */

@media (max-width: 768px) {

    /* ==========================================================================
       HIDE DESKTOP SIDEBAR ON MOBILE
       ========================================================================== */

    /* Hide desktop sidebar completely on mobile */
    .unified-nav-bar,
    #sidebarNav,
    .sidebar-nav,
    aside.sidebar,
    .left-sidebar {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Hide old desktop hamburger/menu buttons */
    .hamburger-menu,
    .menu-toggle,
    .nav-toggle,
    .mobile-nav-toggle,
    button[onclick*="toggleNav"],
    button[onclick*="toggleMenu"],
    .toggle-sidebar-btn,
    #menuToggle,
    .header-menu-btn {
        display: none !important;
    }

    /* Hide Cyber Breach button on mobile */
    #bossRoomBtn,
    .btn-boss-room,
    button[onclick*="startBossFight"],
    button[onclick*="cyberBreach"],
    .cyber-breach-btn,
    #cyberBreachBtn {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Show hamburger menu button if exists */
    .mobile-menu-toggle,
    .hamburger-btn,
    #mobileMenuBtn {
        display: flex !important;
        visibility: visible !important;
    }


    /* Remove sidebar padding from body */
    body {
        padding-left: 0 !important;
        margin-left: 0 !important;
    }

    /* Remove sidebar margin from containers */
    .game-container,
    .character-container,
    .pvp-wrapper,
    .guild-container,
    .market-container,
    .forum-container,
    .leaderboard-container,
    .quests-container,
    .statistics-container,
    .profile-container {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    /* ==========================================================================
       MOBILE GAME HEADER - PLAYER STATS
       ========================================================================== */

    /* Hide desktop header elements */
    header,
    .header,
    .game-header,
    .main-header {
        display: none !important;
    }

    /* Mobile game header with stats */
    .mobile-game-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.98) 0%, rgba(0, 0, 0, 0.90) 100%) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        border-bottom: 2px solid rgba(0, 242, 255, 0.3) !important;
        padding: 8px 12px !important;
        z-index: 998 !important;
        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.5) !important;
    }

    /* Top row: Name, Level, Coins */
    .mobile-header-top {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-bottom: 8px !important;
    }

    .mobile-player-info {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
    }

    .mobile-player-name {
        font-family: 'Orbitron', sans-serif !important;
        font-size: 0.95rem !important;
        font-weight: 700 !important;
        color: var(--accent-neon) !important;
        text-shadow: 0 0 8px rgba(0, 242, 255, 0.6) !important;
        max-width: 120px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .mobile-player-level {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        padding: 3px 8px !important;
        background: linear-gradient(135deg, rgba(0, 242, 255, 0.2), rgba(138, 43, 226, 0.2)) !important;
        border: 1px solid rgba(0, 242, 255, 0.4) !important;
        border-radius: 12px !important;
    }

    .mobile-player-level .level-label {
        font-size: 0.7rem !important;
        color: rgba(255, 255, 255, 0.6) !important;
        font-weight: 600 !important;
    }

    .mobile-player-level .level-value {
        font-size: 0.85rem !important;
        font-weight: 700 !important;
        color: var(--accent-neon) !important;
    }

    .mobile-coins {
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        padding: 4px 10px !important;
        background: rgba(255, 215, 0, 0.15) !important;
        border: 1px solid rgba(255, 215, 0, 0.4) !important;
        border-radius: 15px !important;
    }

    .mobile-coins .coin-icon {
        font-size: 1rem !important;
    }

    .mobile-coins .coin-value {
        font-size: 0.9rem !important;
        font-weight: 700 !important;
        color: #ffd700 !important;
        text-shadow: 0 0 8px rgba(255, 215, 0, 0.5) !important;
    }

    /* Stats bars: HP and XP */
    .mobile-header-stats {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
    }

    .mobile-stat-bar {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .mobile-stat-bar .stat-label {
        font-size: 0.75rem !important;
        font-weight: 700 !important;
        width: 24px !important;
        text-align: center !important;
    }

    .hp-bar .stat-label {
        color: #ff0040 !important;
        text-shadow: 0 0 6px rgba(255, 0, 64, 0.6) !important;
    }

    .xp-bar .stat-label {
        color: #00f2ff !important;
        text-shadow: 0 0 6px rgba(0, 242, 255, 0.6) !important;
    }

    .stat-bar-container {
        flex: 1 !important;
        height: 18px !important;
        background: rgba(0, 0, 0, 0.6) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        border-radius: 10px !important;
        position: relative !important;
        overflow: hidden !important;
    }

    .stat-bar-fill {
        height: 100% !important;
        transition: width 0.3s ease !important;
        border-radius: 9px !important;
    }

    .hp-fill {
        background: linear-gradient(90deg, #ff0040, #ff4081) !important;
        box-shadow: 0 0 10px rgba(255, 0, 64, 0.5) !important;
    }

    .xp-fill {
        background: linear-gradient(90deg, #00f2ff, #00bfff) !important;
        box-shadow: 0 0 10px rgba(0, 242, 255, 0.5) !important;
    }

    .stat-bar-text {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        font-size: 0.7rem !important;
        font-weight: 700 !important;
        color: white !important;
        text-shadow: 0 0 4px rgba(0, 0, 0, 0.8), 1px 1px 2px rgba(0, 0, 0, 0.9) !important;
        pointer-events: none !important;
        z-index: 1 !important;
    }

    /* Adjust content spacing for new header */
    .game-container,
    .character-container,
    .pvp-wrapper,
    .guild-container,
    .market-container,
    .forum-container,
    .leaderboard-container,
    .quests-container,
    .statistics-container,
    .profile-container {
        padding-top: 80px !important;
        padding-bottom: 80px !important;
    }


    /* ==========================================================================
       BOTTOM TAB BAR - PRIMARY NAVIGATION
       ========================================================================== */

    /* Bottom navigation bar */
    .mobile-bottom-nav {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 64px !important;
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.98) 0%, rgba(10, 10, 20, 0.95) 100%) !important;
        backdrop-filter: blur(15px) !important;
        -webkit-backdrop-filter: blur(15px) !important;
        border-top: 2px solid rgba(0, 242, 255, 0.3) !important;
        display: flex !important;
        justify-content: space-around !important;
        align-items: center !important;
        padding: 0 !important;
        padding-bottom: env(safe-area-inset-bottom) !important;
        z-index: 1000 !important;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5), 0 -1px 0 rgba(0, 242, 255, 0.2) !important;
    }

    /* Bottom nav items */
    .mobile-bottom-nav .nav-item {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        height: 64px !important;
        text-decoration: none !important;
        color: #888 !important;
        transition: all 0.2s ease !important;
        position: relative !important;
        cursor: pointer !important;
    }

    /* Nav item icon */
    .mobile-bottom-nav .nav-item .icon {
        font-size: 1.5rem !important;
        margin-bottom: 4px !important;
        transition: all 0.2s ease !important;
    }

    /* Nav item label */
    .mobile-bottom-nav .nav-item .label {
        font-size: 0.7rem !important;
        font-weight: 600 !important;
        letter-spacing: 0.5px !important;
        transition: all 0.2s ease !important;
    }

    /* Active state */
    .mobile-bottom-nav .nav-item.active {
        color: var(--accent-neon) !important;
    }

    .mobile-bottom-nav .nav-item.active .icon {
        transform: translateY(-2px) !important;
        filter: drop-shadow(0 0 5px var(--accent-neon)) !important;
    }

    .mobile-bottom-nav .nav-item .icon img {
        width: 24px !important;
        height: 24px !important;
        vertical-align: middle !important;
        transition: all 0.2s ease !important;
    }

    .mobile-bottom-nav .nav-item.active .icon img {
        filter: drop-shadow(0 0 5px var(--accent-neon)) !important;
    }

    .mobile-bottom-nav .nav-item.active::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 40px !important;
        height: 3px !important;
        background: linear-gradient(90deg, transparent, var(--accent-neon), transparent) !important;
        box-shadow: 0 0 10px rgba(0, 242, 255, 0.8) !important;
    }

    /* Tap effect */
    .mobile-bottom-nav .nav-item:active {
        transform: scale(0.95) !important;
    }

    /* ==========================================================================
       HAMBURGER MENU - SECONDARY NAVIGATION
       ========================================================================== */

    /* Menu backdrop */
    .mobile-menu-backdrop {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0, 0, 0, 0.8) !important;
        backdrop-filter: blur(5px) !important;
        -webkit-backdrop-filter: blur(5px) !important;
        z-index: 9998 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: all 0.3s ease !important;
    }

    .mobile-menu-backdrop.active {
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Hamburger menu panel */
    .mobile-menu-panel {
        position: fixed !important;
        top: 0 !important;
        right: -100% !important;
        width: 85vw !important;
        max-width: 320px !important;
        height: 100vh !important;
        background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 100%) !important;
        border-left: 2px solid rgba(0, 242, 255, 0.3) !important;
        z-index: 9999 !important;
        overflow-y: auto !important;
        transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        box-shadow: -5px 0 30px rgba(0, 0, 0, 0.5) !important;
    }

    .mobile-menu-panel.active {
        right: 0 !important;
    }

    /* Menu header */
    .mobile-menu-header {
        padding: 20px !important;
        border-bottom: 1px solid rgba(0, 242, 255, 0.2) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        background: rgba(0, 242, 255, 0.05) !important;
    }

    .mobile-menu-header .title {
        font-family: 'Orbitron', sans-serif !important;
        font-size: 1.3rem !important;
        font-weight: 700 !important;
        color: var(--accent-neon) !important;
        text-shadow: 0 0 10px rgba(0, 242, 255, 0.5) !important;
    }

    .mobile-menu-header .close-btn {
        width: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1.5rem !important;
        color: var(--text-secondary) !important;
        cursor: pointer !important;
        border-radius: 8px !important;
        transition: all 0.2s ease !important;
    }

    .mobile-menu-header .close-btn:active {
        background: rgba(255, 0, 64, 0.2) !important;
        color: #ff0040 !important;
    }

    /* Menu items */
    .mobile-menu-items {
        padding: 12px 0 !important;
    }

    .mobile-menu-item {
        display: flex !important;
        align-items: center !important;
        gap: 16px !important;
        padding: 16px 20px !important;
        min-height: 56px !important;
        color: var(--text-secondary) !important;
        text-decoration: none !important;
        transition: all 0.2s ease !important;
        border-left: 3px solid transparent !important;
        cursor: pointer !important;
    }

    .mobile-menu-item .icon {
        font-size: 1.5rem !important;
        width: 32px !important;
        text-align: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .mobile-menu-item .icon img {
        width: 24px !important;
        height: 24px !important;
        vertical-align: middle !important;
    }

    .mobile-menu-item .label {
        font-size: 1rem !important;
        font-weight: 600 !important;
        flex: 1 !important;
    }

    .mobile-menu-item:active {
        background: rgba(0, 242, 255, 0.1) !important;
        border-left-color: var(--accent-neon) !important;
        color: var(--accent-neon) !important;
    }

    .mobile-menu-item.active {
        background: rgba(0, 242, 255, 0.15) !important;
        border-left-color: var(--accent-neon) !important;
        color: var(--accent-neon) !important;
    }

    /* Menu section divider */
    .mobile-menu-divider {
        height: 1px !important;
        background: linear-gradient(90deg, transparent, rgba(0, 242, 255, 0.2), transparent) !important;
        margin: 12px 20px !important;
    }

    /* ==========================================================================
       CONTENT SPACING ADJUSTMENTS
       ========================================================================== */

    /* Add top padding for fixed header */
    /* Add top padding for fixed header */
    .game-container,
    .character-container,
    .pvp-wrapper,
    .guild-container,
    .market-container,
    .forum-container,
    .leaderboard-container,
    .quests-container,
    .statistics-container,
    .profile-container {
        padding-top: 110px !important;
        /* Increased from 65px to prevent overlap with header */
        padding-bottom: 80px !important;
    }

    /* Move toggle buttons down a bit more to be safe */
    .mobile-panel-toggles {
        margin-top: 10px !important;
        margin-bottom: 20px !important;
        position: relative !important;
        z-index: 10 !important;
    }

    /* ==========================================================================
       FLOATING ACTION BUTTON (OPTIONAL)
       ========================================================================== */

    /* FAB for quick actions */
    .mobile-fab {
        position: fixed !important;
        bottom: 80px !important;
        right: 16px !important;
        width: 56px !important;
        height: 56px !important;
        border-radius: 50% !important;
        background: linear-gradient(135deg, var(--accent-purple), var(--accent-pink)) !important;
        border: 2px solid var(--accent-neon) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1.5rem !important;
        color: white !important;
        box-shadow: 0 4px 20px rgba(0, 242, 255, 0.4), 0 0 40px rgba(255, 0, 255, 0.3) !important;
        z-index: 999 !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
    }

    .mobile-fab:active {
        transform: scale(0.9) !important;
    }

    /* ==========================================================================
       ANIMATIONS
       ========================================================================== */

    @keyframes slideInRight {
        from {
            right: -100%;
        }

        to {
            right: 0;
        }
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    /* ==========================================================================
       LANDSCAPE MODE
       ========================================================================== */

    @media (orientation: landscape) {
        .mobile-bottom-nav {
            height: 56px !important;
        }

        .mobile-bottom-nav .nav-item {
            height: 56px !important;
        }

        .mobile-bottom-nav .nav-item .icon {
            font-size: 1.3rem !important;
        }

        .mobile-bottom-nav .nav-item .label {
            font-size: 0.65rem !important;
        }
    }

    /* ==========================================================================
       VERY SMALL SCREENS
       ========================================================================== */

    @media (max-width: 400px) {
        .mobile-bottom-nav .nav-item .label {
            font-size: 0.65rem !important;
        }

        .mobile-menu-panel {
            width: 90vw !important;
        }
    }
}