/**
 * JavaESPORTS - Premium Mobile Navigation
 * eFootball/Gaming Theme - Professional Sport Aesthetics
 * Dynamic colors inspired by football energy and eSports
 * @version 4.0
 * @date 2025
 */

/* ============================================================================
   MOBILE MENU - eFootball GAMING INSPIRED DESIGN
   ============================================================================ */

@media (max-width: 1023px) {
    
    /* ========================================
       MENU HEADER - eFootball Electric Gradient
       ======================================== */
    
    /* Gradient header bar - Electric Blue to Cyber Green (Football field inspired) */
    .nav::before {
        content: '';
        display: block;
        height: 60px;
        /* eFootball Electric Theme: Cyber Blue → Energy Green → Victory Cyan */
        background: linear-gradient(135deg, 
            #0099ff 0%, 
            #00d4ff 25%,
            #00b894 50%,
            #00cec9 75%,
            #0099ff 100%);
        background-size: 200% 100%;
        animation: gradientShift 8s ease infinite;
        box-shadow: 0 4px 24px rgba(0, 153, 255, 0.4),
                    0 2px 12px rgba(0, 206, 201, 0.3),
                    inset 0 1px 0 rgba(255, 255, 255, 0.25);
        position: fixed;
        top: 0;
        left: 0;
        width: min(85vw, 380px);
        z-index: 100;
        margin: 0 !important;
        padding: 0 !important;
        flex-shrink: 0;
        opacity: 0;
        transition: opacity 0.3s ease;
        border-top-right-radius: 20px;
    }
    
    @keyframes gradientShift {
        0%, 100% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
    }
    
    .nav.is-open::before {
        opacity: 1;
    }
    
    /* Light mode - Fresh sport energy gradient */
    [data-theme="light"] .nav::before {
        background: linear-gradient(135deg, 
            #0099ff 0%, 
            #00d4ff 25%,
            #00b894 50%,
            #55efc4 75%,
            #00cec9 100%);
        background-size: 200% 100%;
        animation: gradientShift 8s ease infinite;
        box-shadow: 0 4px 24px rgba(0, 153, 255, 0.35),
                    0 2px 12px rgba(0, 206, 201, 0.25),
                    inset 0 1px 0 rgba(255, 255, 255, 0.4);
    }
    
    /* ========================================
       KATEGORIYALAR LABEL - Dynamic Text
       ======================================== */
    
    .nav::after {
        content: 'KATEGORIYALAR';
        position: fixed;
        top: 0 !important;
        left: 0;
        width: min(85vw, 380px);
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.9375rem;
        font-weight: 800;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: #ffffff;
        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4),
                     0 1px 3px rgba(0, 0, 0, 0.3);
        z-index: 101;
        opacity: 0;
        transition: opacity 0.3s ease 0.1s;
        margin: 0 !important;
        padding: 0 !important;
        border-top-right-radius: 20px;
    }
    
    .nav.is-open::after {
        opacity: 1;
    }
    
    [data-theme="light"] .nav::after {
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2),
                     0 1px 3px rgba(0, 0, 0, 0.15);
    }
    
    /* ========================================
       NAVIGATION LINKS - Football Inspired
       ======================================== */
    
    .nav__link {
        position: relative;
        display: flex !important;
        align-items: center;
        padding: 1rem 1.5rem;
        background: transparent;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        border: none !important;
        border-bottom: 1px solid rgba(167, 139, 250, 0.15) !important;
        min-height: 56px;
        margin: 0;
        font-size: 1rem;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.98);
        text-decoration: none;
        opacity: 1;
        visibility: visible;
        width: 100%;
        border-radius: 0 !important;
    }
    
    .nav__link:first-child {
        border-top: none !important;
    }
    
    .nav__link:last-child {
        border-bottom: none !important;
    }
    
    /* Light mode links */
    [data-theme="light"] .nav__link {
        color: rgba(30, 41, 59, 0.95);
        border-bottom-color: rgba(0, 153, 255, 0.12) !important;
    }
    
    /* ========================================
       NAVIGATION ICONS - CRM Style Professional Icons
       ======================================== */
    
    .nav__icon {
        width: 22px !important;
        height: 22px !important;
        margin-right: 0.875rem !important;
        flex-shrink: 0 !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        color: rgba(255, 255, 255, 0.85) !important;
        stroke-width: 2.5 !important;
    }
    
    .nav__text {
        flex: 1 !important;
    }
    
    /* Individual icon colors - Gaming Theme */
    
    /* Home - Electric Blue */
    .nav__link:nth-child(1) .nav__icon { 
        color: #00d4ff !important;
        filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.5)) !important;
    }
    
    /* News - Energy Orange */
    .nav__link:nth-child(2) .nav__icon { 
        color: #ffa502 !important;
        filter: drop-shadow(0 0 8px rgba(255, 165, 2, 0.5)) !important;
    }
    
    /* Accounts - Victory Green */
    .nav__link:nth-child(3) .nav__icon { 
        color: #55efc4 !important;
        filter: drop-shadow(0 0 8px rgba(85, 239, 196, 0.5)) !important;
    }
    
    /* Skill Training - Champion Yellow */
    .nav__link:nth-child(4) .nav__icon { 
        color: #ffeaa7 !important;
        filter: drop-shadow(0 0 8px rgba(255, 234, 167, 0.5)) !important;
    }
    
    /* Tactics - Cyber Purple */
    .nav__link:nth-child(5) .nav__icon { 
        color: #a29bfe !important;
        filter: drop-shadow(0 0 8px rgba(162, 155, 254, 0.5)) !important;
    }
    
    /* Coins - Premium Gold */
    .nav__link:nth-child(6) .nav__icon { 
        color: #fdcb6e !important;
        filter: drop-shadow(0 0 8px rgba(253, 203, 110, 0.5)) !important;
    }
    
    /* Admins - Trust Cyan */
    .nav__link:nth-child(7) .nav__icon { 
        color: #00cec9 !important;
        filter: drop-shadow(0 0 8px rgba(0, 206, 201, 0.5)) !important;
    }
    
    /* ========================================
       HOVER EFFECT - Stadium Energy
       ======================================== */
    
    .nav__link:hover {
        background: linear-gradient(90deg, 
            rgba(139, 92, 246, 0.2) 0%,
            rgba(167, 139, 250, 0.15) 100%) !important;
        padding-left: 1.75rem !important;
        transform: translateX(4px);
    }
    
    .nav__link:hover .nav__icon {
        transform: scale(1.15) !important;
        filter: drop-shadow(0 0 12px currentColor) brightness(1.2) !important;
    }
    
    [data-theme="light"] .nav__link:hover {
        background: linear-gradient(90deg, 
            rgba(0, 153, 255, 0.1) 0%,
            rgba(0, 206, 201, 0.08) 100%) !important;
    }
    
    [data-theme="light"] .nav__icon {
        color: rgba(30, 41, 59, 0.75) !important;
    }
    
    [data-theme="light"] .nav__link:hover .nav__icon,
    [data-theme="light"] .nav__link--active .nav__icon {
        color: rgba(30, 41, 59, 0.95) !important;
    }
    
    /* ========================================
       ACTIVE STATE - Champion Highlight
       ======================================== */
    
    .nav__link--active {
        /* Ochiqroq active state - Winner's highlight */
        background: linear-gradient(90deg, 
            rgba(167, 139, 250, 0.35) 0%, 
            rgba(139, 92, 246, 0.3) 50%,
            rgba(124, 58, 237, 0.25) 100%) !important;
        color: #ffffff !important;
        font-weight: 600 !important;
        border-left: 4px solid #c4b5fd !important;
        padding-left: calc(1.5rem - 4px) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2),
                    0 0 20px rgba(167, 139, 250, 0.3) !important;
    }
    
    .nav__link--active .nav__icon {
        transform: scale(1.15) !important;
        animation: iconPulse 2s ease-in-out infinite !important;
    }
    
    @keyframes iconPulse {
        0%, 100% {
            filter: drop-shadow(0 0 8px currentColor) brightness(1.2) !important;
        }
        50% {
            filter: drop-shadow(0 0 16px currentColor) brightness(1.4) !important;
        }
    }
    
    [data-theme="light"] .nav__link--active {
        background: linear-gradient(90deg, 
            rgba(0, 153, 255, 0.18) 0%, 
            rgba(0, 206, 201, 0.15) 50%,
            rgba(0, 153, 255, 0.12) 100%) !important;
        color: #1e293b !important;
        border-left-color: #0099ff !important;
    }
    
    .nav__link--active::after {
        display: none !important;
    }
    
    /* ========================================
       TOUCH FEEDBACK - Responsive Feel
       ======================================== */
    
    .nav__link:active {
        background: rgba(0, 206, 201, 0.2) !important;
        transform: scale(0.98);
    }
    
    /* ========================================
       SOCIAL LINKS SECTION - Bottom Area
       ======================================== */
    
    .nav__social-section {
        display: flex !important;
        flex-direction: column !important;
        margin-top: auto !important;
        padding: 2rem 1.5rem 1.5rem 1.5rem !important;
        border-top: 1px solid rgba(167, 139, 250, 0.2) !important;
        background: linear-gradient(180deg,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.15) 100%) !important;
    }
    
    .nav__social-title {
        font-size: 0.8125rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.1em !important;
        text-transform: uppercase !important;
        color: rgba(255, 255, 255, 0.55) !important;
        margin: 0 0 1rem 0 !important;
        text-align: center !important;
    }
    
    .nav__social-links {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 0.75rem !important;
        flex-wrap: nowrap !important;
        padding: 0 1rem !important;
    }
    
    .nav__social-link {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.625rem !important;
        padding: 0.875rem 1rem !important;
        text-decoration: none !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        border-radius: 14px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        flex: 1 !important;
        min-width: 0 !important;
        opacity: 0 !important;
        transform: scale(0.8) !important;
    }
    
    .nav.is-open .nav__social-link {
        animation: socialIconPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
    }
    
    .nav.is-open .nav__social-link:nth-child(1) { animation-delay: 0.5s !important; }
    .nav.is-open .nav__social-link:nth-child(2) { animation-delay: 0.55s !important; }
    .nav.is-open .nav__social-link:nth-child(3) { animation-delay: 0.6s !important; }
    .nav.is-open .nav__social-link:nth-child(4) { animation-delay: 0.65s !important; }
    
    @keyframes socialIconPop {
        0% {
            opacity: 0;
            transform: scale(0.8) translateY(10px);
        }
        70% {
            transform: scale(1.1) translateY(-2px);
        }
        100% {
            opacity: 1;
            transform: scale(1) translateY(0);
        }
    }
    
    .nav__social-icon {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 40px !important;
        height: 40px !important;
        border-radius: 10px !important;
        background: rgba(255, 255, 255, 0.12) !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        flex-shrink: 0 !important;
    }
    
    .nav__social-icon svg {
        width: 20px !important;
        height: 20px !important;
        color: rgba(255, 255, 255, 0.95) !important;
        transition: all 0.3s ease !important;
    }
    
    .nav__social-label {
        font-size: 0.8125rem !important;
        font-weight: 600 !important;
        color: rgba(255, 255, 255, 0.9) !important;
        text-align: left !important;
        transition: color 0.3s ease !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    
    /* Individual social media colors - Horizontal Layout */
    .nav__social-link--telegram:hover {
        background: linear-gradient(135deg, rgba(0, 136, 204, 0.15), rgba(34, 158, 217, 0.1)) !important;
        transform: translateX(2px) !important;
    }
    
    .nav__social-link--telegram:hover .nav__social-icon {
        background: linear-gradient(135deg, #0088cc, #229ED9) !important;
        box-shadow: 0 4px 16px rgba(34, 158, 217, 0.5) !important;
        transform: scale(1.08) !important;
    }
    
    .nav__social-link--instagram:hover {
        background: linear-gradient(135deg, rgba(131, 58, 180, 0.15), rgba(225, 48, 108, 0.1)) !important;
        transform: translateX(2px) !important;
    }
    
    .nav__social-link--instagram:hover .nav__social-icon {
        background: linear-gradient(135deg, #833AB4, #E1306C, #F77737) !important;
        box-shadow: 0 4px 16px rgba(225, 48, 108, 0.5) !important;
        transform: scale(1.08) !important;
    }
    
    .nav__social-link--youtube:hover {
        background: linear-gradient(135deg, rgba(255, 0, 0, 0.15), rgba(204, 0, 0, 0.1)) !important;
        transform: translateX(2px) !important;
    }
    
    .nav__social-link--youtube:hover .nav__social-icon {
        background: linear-gradient(135deg, #FF0000, #CC0000) !important;
        box-shadow: 0 4px 16px rgba(255, 0, 0, 0.5) !important;
        transform: scale(1.08) !important;
    }
    
    .nav__social-link--tiktok:hover {
        background: linear-gradient(135deg, rgba(0, 242, 234, 0.15), rgba(255, 0, 80, 0.1)) !important;
        transform: translateX(2px) !important;
    }
    
    .nav__social-link--tiktok:hover .nav__social-icon {
        background: linear-gradient(135deg, #00f2ea, #ff0050) !important;
        box-shadow: 0 4px 16px rgba(255, 0, 80, 0.5) !important;
        transform: scale(1.08) !important;
    }
    
    .nav__social-link:hover .nav__social-label {
        color: #ffffff !important;
    }
    
    .nav__social-link:active {
        transform: translateX(0) scale(0.98) !important;
    }
    
    .nav__social-link:active .nav__social-icon {
        transform: scale(0.95) !important;
    }
    
    /* Light mode social section - Horizontal Layout */
    [data-theme="light"] .nav__social-section {
        border-top-color: rgba(0, 153, 255, 0.15) !important;
        background: linear-gradient(180deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(0, 0, 0, 0.02) 100%) !important;
    }
    
    [data-theme="light"] .nav__social-title {
        color: rgba(30, 41, 59, 0.7) !important;
    }
    
    [data-theme="light"] .nav__social-link {
        background: rgba(0, 0, 0, 0.03) !important;
    }
    
    [data-theme="light"] .nav__social-icon {
        background: rgba(0, 0, 0, 0.08) !important;
    }
    
    [data-theme="light"] .nav__social-icon svg {
        color: rgba(30, 41, 59, 0.85) !important;
    }
    
    [data-theme="light"] .nav__social-label {
        color: rgba(30, 41, 59, 0.95) !important;
    }
    
    [data-theme="light"] .nav__social-link:hover {
        background: rgba(0, 0, 0, 0.06) !important;
    }
    
    /* Responsive for very small screens - Hide labels if needed */
    @media (max-width: 360px) {
        .nav__social-links {
            gap: 0.5rem !important;
            padding: 0 0.5rem !important;
        }
        
        .nav__social-link {
            padding: 0.75rem !important;
            flex: 0 1 auto !important;
        }
        
        .nav__social-label {
            display: none !important;
        }
        
        .nav__social-icon {
            width: 44px !important;
            height: 44px !important;
        }
        
        .nav__social-icon svg {
            width: 22px !important;
            height: 22px !important;
        }
    }
}

/* ============================================================================
   SMOOTH ENTRANCE ANIMATIONS - Dynamic Entry
   ============================================================================ */

@media (max-width: 1023px) {
    
    .nav__link {
        opacity: 0 !important;
        transform: translateX(-40px) !important;
        transition: none !important;
    }
    
    .nav__link .nav__icon,
    .nav__link .nav__text {
        opacity: 0 !important;
    }
    
    .nav.is-open .nav__link {
        animation: slideInDynamic 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
        opacity: 1 !important;
    }
    
    .nav.is-open .nav__link .nav__icon {
        animation: iconFadeIn 0.4s ease forwards !important;
    }
    
    .nav.is-open .nav__link .nav__text {
        animation: textFadeIn 0.4s ease forwards !important;
    }
    
    @keyframes slideInDynamic {
        0% {
            opacity: 0;
            transform: translateX(-40px) scale(0.9);
        }
        70% {
            transform: translateX(5px) scale(1.02);
        }
        100% {
            opacity: 1;
            transform: translateX(0) scale(1);
        }
    }
    
    @keyframes iconFadeIn {
        0% {
            opacity: 0;
            transform: scale(0.5) rotate(-180deg);
        }
        100% {
            opacity: 1;
            transform: scale(1) rotate(0deg);
        }
    }
    
    @keyframes textFadeIn {
        0% {
            opacity: 0;
            transform: translateX(-10px);
        }
        100% {
            opacity: 1;
            transform: translateX(0);
        }
    }
    
    /* Staggered delays */
    .nav.is-open .nav__link:nth-child(1) { animation-delay: 0.08s !important; }
    .nav.is-open .nav__link:nth-child(2) { animation-delay: 0.12s !important; }
    .nav.is-open .nav__link:nth-child(3) { animation-delay: 0.16s !important; }
    .nav.is-open .nav__link:nth-child(4) { animation-delay: 0.20s !important; }
    .nav.is-open .nav__link:nth-child(5) { animation-delay: 0.24s !important; }
    .nav.is-open .nav__link:nth-child(6) { animation-delay: 0.28s !important; }
    .nav.is-open .nav__link:nth-child(7) { animation-delay: 0.32s !important; }
    
    /* Icon animation delays */
    .nav.is-open .nav__link:nth-child(1) .nav__icon { animation-delay: 0.12s !important; }
    .nav.is-open .nav__link:nth-child(2) .nav__icon { animation-delay: 0.16s !important; }
    .nav.is-open .nav__link:nth-child(3) .nav__icon { animation-delay: 0.20s !important; }
    .nav.is-open .nav__link:nth-child(4) .nav__icon { animation-delay: 0.24s !important; }
    .nav.is-open .nav__link:nth-child(5) .nav__icon { animation-delay: 0.28s !important; }
    .nav.is-open .nav__link:nth-child(6) .nav__icon { animation-delay: 0.32s !important; }
    .nav.is-open .nav__link:nth-child(7) .nav__icon { animation-delay: 0.36s !important; }
    
    /* Text animation delays */
    .nav.is-open .nav__link:nth-child(1) .nav__text { animation-delay: 0.14s !important; }
    .nav.is-open .nav__link:nth-child(2) .nav__text { animation-delay: 0.18s !important; }
    .nav.is-open .nav__link:nth-child(3) .nav__text { animation-delay: 0.22s !important; }
    .nav.is-open .nav__link:nth-child(4) .nav__text { animation-delay: 0.26s !important; }
    .nav.is-open .nav__link:nth-child(5) .nav__text { animation-delay: 0.30s !important; }
    .nav.is-open .nav__link:nth-child(6) .nav__text { animation-delay: 0.34s !important; }
    .nav.is-open .nav__link:nth-child(7) .nav__text { animation-delay: 0.38s !important; }
    
    /* Animate social section */
    .nav__social-section {
        opacity: 0 !important;
        transform: translateY(20px) !important;
        transition: none !important;
    }
    
    .nav.is-open .nav__social-section {
        animation: fadeInUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
        animation-delay: 0.4s !important;
    }
    
    @keyframes fadeInUp {
        0% {
            opacity: 0;
            transform: translateY(20px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

/* ============================================================================
   CUSTOM SCROLLBAR - Sport Themed
   ============================================================================ */

@media (max-width: 1023px) {
    
    .nav::-webkit-scrollbar {
        width: 6px;
    }
    
    .nav::-webkit-scrollbar-track {
        background: rgba(139, 92, 246, 0.08);
    }
    
    .nav::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, #8b5cf6, #a78bfa);
        border-radius: 10px;
        transition: background 0.2s;
    }
    
    .nav::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, #a78bfa, #c4b5fd);
    }
    
    [data-theme="light"] .nav::-webkit-scrollbar-track {
        background: rgba(0, 153, 255, 0.08);
    }
    
    [data-theme="light"] .nav::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, #0099ff, #00b894);
    }
}

/* ============================================================================
   MOBILE OVERLAY - Dynamic Blur
   ============================================================================ */

@media (max-width: 1023px) {
    
    .mobile-menu-overlay {
        backdrop-filter: blur(20px) saturate(150%);
        -webkit-backdrop-filter: blur(20px) saturate(150%);
        background: linear-gradient(135deg, 
                rgba(30, 27, 75, 0.6) 0%,
            rgba(49, 46, 129, 0.55) 100%);
        transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    .mobile-menu-overlay.is-visible {
        backdrop-filter: blur(20px) saturate(150%);
        -webkit-backdrop-filter: blur(20px) saturate(150%);
    }
    
    [data-theme="light"] .mobile-menu-overlay {
        background: linear-gradient(135deg, 
            rgba(100, 150, 200, 0.4) 0%,
            rgba(150, 200, 220, 0.35) 100%);
    }
}

/* ============================================================================
   ACCESSIBILITY - Focus States
   ============================================================================ */

@media (max-width: 1023px) {
    
    .nav__link:focus-visible {
        outline: 3px solid #00d4ff;
        outline-offset: -3px;
        background: linear-gradient(90deg, 
            rgba(0, 153, 255, 0.2) 0%,
            rgba(0, 206, 201, 0.15) 100%) !important;
        z-index: 1;
    }
    
    [data-theme="light"] .nav__link:focus-visible {
        outline-color: #0099ff;
        background: linear-gradient(90deg, 
            rgba(0, 153, 255, 0.15) 0%,
            rgba(0, 206, 201, 0.12) 100%) !important;
    }
}

/* ============================================================================
   PERFORMANCE OPTIMIZATION
   ============================================================================ */

@media (max-width: 1023px) {
    
    .nav,
    .nav__link,
    .mobile-menu-overlay,
    .nav::before,
    .nav::after {
        will-change: transform, opacity;
        transform: translateZ(0);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }
    
    .nav.is-open {
        transform: translateX(0) translateZ(0);
    }
}

/* ============================================================================
   MOBILE HEADER ENHANCEMENTS - Sport Energy
   ============================================================================ */

@media (max-width: 767px) {
    
    .topbar__inner {
        /* Dark mode - Ochiqroq ranglar bilan sport stadium */
        background: linear-gradient(135deg, 
            rgba(67, 56, 202, 0.95) 0%, 
            rgba(79, 70, 229, 0.95) 50%,
            rgba(99, 102, 241, 0.92) 100%);
        backdrop-filter: blur(24px) saturate(180%);
        -webkit-backdrop-filter: blur(24px) saturate(180%);
        box-shadow: 0 4px 28px rgba(99, 102, 241, 0.25),
                    0 2px 14px rgba(129, 140, 248, 0.15);
    }
    
    [data-theme="light"] .topbar__inner {
        /* Light mode - Fresh stadium day */
        background: linear-gradient(135deg, 
            rgba(248, 252, 255, 0.98) 0%, 
            rgba(240, 248, 255, 0.98) 100%);
        box-shadow: 0 4px 28px rgba(0, 153, 255, 0.12),
                    0 2px 14px rgba(0, 0, 0, 0.05);
    }
    
    .logo__badge {
        box-shadow: 0 4px 24px rgba(0, 153, 255, 0.6),
                    0 2px 12px rgba(0, 206, 201, 0.4),
                    inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }
    
    .lang-selector__button,
    .theme-toggle,
    .mobile-toggle {
        transition: all 0.25s ease;
    }
    
    .mobile-toggle:hover {
        transform: scale(1.08);
    }
    
    .mobile-toggle:active {
        transform: scale(0.92);
    }
}

/* ============================================================================
   END OF PREMIUM eFootball THEMED MOBILE NAVIGATION
   ============================================================================ */