@media (max-width: 1050px) {
    /* Forçar ocultação dos elementos exclusivos do PC */
    .header-direita { display: none !important; }
    .loja-desktop { display: none !important; }

    /* Garante que o header permaneça fixo, alinhado e visível no topo */
    header { 
        position: fixed !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        height: 90px !important;
        top: 0 !important;
        left: 0 !important;
        padding: 0 4% !important;
        box-sizing: border-box !important;
    }

    /* ==========================================
       1. LOJA BEM NO MEIO DO HEADER (FORÇADO)
       ========================================== */
    .loja-mobile-header {
        display: block !important; /* Força a aparição contra o display:none */
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important; /* Centralização perfeita */
        z-index: 1010 !important;
    }

    .img-animada-mobile { 
        height: 45px !important; 
        width: auto !important;
        display: block !important;
        animation: balançoLoja 3s infinite ease-in-out; 
    }

    /* ==========================================
       2. BOTÃO HAMBÚRGUER MANTIDO À DIREITA
       ========================================== */
    .controles-mobile {
        display: flex !important; /* Força a aparição */
        align-items: center !important;
        margin-left: auto !important; /* Empurra totalmente para a direita */
        z-index: 2100 !important;
    }
    
    .menu-mobile-btn {
        display: block !important;
        background: none !important;
        border: none !important;
        color: #DFD52F !important; /* Cor amarela padrão do New Pong */
        font-size: 2.2rem !important;
        cursor: pointer !important;
    }

    /* ==========================================
       3. OVERLAY DO MENU ABERTO (TELA CHEIA)
       ========================================== */
    .menu-principal {
        display: none; 
        position: fixed !important;
        top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
        width: 100vw !important; height: 100vh !important;
        background: linear-gradient(rgba(35, 33, 69, 0.99), rgba(20, 20, 40, 0.99)) !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        z-index: 2000 !important; 
        padding-top: 100px !important;
        padding-bottom: 40px !important;
        overflow-y: auto !important;
    }

    .menu-principal.ativo {
        display: flex !important;
        animation: fadeInMenu 0.4s ease forwards;
    }

    @keyframes fadeInMenu {
        from { opacity: 0; transform: translateY(-20px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* Itens de dentro do Menu Aberto */
    .logo-menu-mobile { 
        display: block !important; 
        margin-bottom: 30px !important; 
        text-align: center !important;
        flex-shrink: 0 !important;
    }
    
    .logo-menu-mobile img { 
        height: 60px !important; 
        width: auto !important;
        filter: drop-shadow(0 0 10px rgba(223, 213, 47, 0.3)) !important; 
    }

    .menu-links { 
        display: flex !important; 
        flex-direction: column !important; 
        gap: 20px !important; 
        text-align: center !important; 
        margin: 0 !important; 
        padding: 0 !important;
        flex-shrink: 0 !important;
    }
    
    .menu-links li { list-style: none !important; }
    
    .menu-links li a {
        font-family: 'Fredoka One', cursive !important;
        font-size: 1.5rem !important;
        color: #FFFFFF !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        text-decoration: none !important;
    }
    .menu-links li a:hover { color: #DFD52F !important; }

    .header-direita-mobile { 
        display: block !important; 
        margin-top: 25px !important; 
        flex-shrink: 0 !important;
    }

    /* ==========================================
       4. REDES SOCIAIS NO RODAPÉ DO MENU
       ========================================== */
    .redes-sociais-mobile {
        display: flex !important; 
        gap: 40px !important; 
        margin-top: auto !important; /* Empurra para o fim da tela */
        padding-top: 30px !important; 
        width: 100% !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }
    
    .redes-sociais-mobile a { 
        color: #DFD52F !important; 
        font-size: 2.2rem !important; 
        transition: 0.3s !important;
    }
    .redes-sociais-mobile a:hover {
        color: #FFFFFF !important;
        transform: translateY(-5px) !important;
    }
}