/* ========================================================================== */
/*                           RESPONSIVE (Mobile)                              */
/* ========================================================================== */

@media (max-width: 992px) {
    /* Reset total de transbordamento */
    html, body { 
        width: 100vw !important;
        overflow-x: hidden !important; 
        margin: 0 !important;
        padding: 0 !important;
    }

    /* CAMADA 1: HEADER (Deve estar acima do overlay) */
    header { 
        height: 72px !important; 
        z-index: 10000 !important; /* Maior que o overlay */
    }
    nav { padding: 0 1.5rem; }

    .arena-container { 
        padding-top: 100px; 
        padding-left: 1rem;
        padding-right: 1rem;
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden;
    }

    /* Hero Arena */
    .arena-hero { margin-bottom: 2rem; }
    .arena-title { font-size: 2.5rem; }
    .arena-subtitle { font-size: 1rem; padding: 0 10px; }
    
    .hero-stats { flex-direction: column; align-items: center; gap: 10px; }
    .stat-bubble { width: 100%; justify-content: center; }

    .hero-actions { flex-direction: column; width: 100%; gap: 10px; }
    .hero-actions .cta-button { width: 100%; justify-content: center; }

    /* Match Room Mobile */
    .vs-arena { grid-template-columns: 1fr !important; gap: 1.5rem; margin-bottom: 2rem; }
    .vs-center-column { order: 2; margin: 1rem 0; }
    .match-player-card.is-creator { order: 1; }
    .match-player-card.is-joiner { order: 3; }
    .match-player-card { flex-direction: column !important; text-align: center !important; padding: 2rem 1.5rem !important; width: 100% !important; }
    .mp-avatar-box { margin: 0 auto 1rem !important; }
    .mp-info { width: 100%; }
    .mp-stats { justify-content: center; gap: 2rem; border-top: 1px solid var(--border-color); padding-top: 1rem; margin-top: 1rem; }

    /* Menu & Navigation Standardized */
    .mobile-menu-toggle { 
        display: flex !important; 
        align-items: center;
        justify-content: center;
        order: -1; 
        background: rgba(255,255,255,0.05);
        border: 1px solid rgba(255,255,255,0.1);
        color: #fff;
        width: 40px;
        height: 40px;
        border-radius: 10px;
        cursor: pointer;
    }
    .logo { 
        display: flex !important; 
        order: 1;
        margin-left: 1rem;
    }
    .nav-actions { margin-left: auto; }
    
    /* CAMADA 3: SIDEBAR (Dentro do header, herda z-index 10000) */
    .nav-links { 
        position: fixed; 
        top: 72px; 
        left: -300px; 
        width: 280px; 
        height: calc(100vh - 72px); 
        background: #09090B; 
        flex-direction: column; 
        justify-content: flex-start; 
        align-items: stretch; 
        padding: 1.5rem 0; 
        gap: 0; 
        transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); 
        border-right: 2px solid var(--cor-primaria); 
        visibility: visible; 
        border-radius: 0;
        margin: 0;
        transform: translateX(0);
    }

    .nav-links.active { transform: translateX(300px); }

    .nav-links a { 
        width: 100%; 
        justify-content: flex-start; 
        padding: 1.2rem 2rem; 
        gap: 15px; 
        color: #fff; 
        border: none;
        border-bottom: 1px solid rgba(255,255,255,0.03);
        height: auto;
        pointer-events: auto; /* Garante que recebe cliques */
    }

    .nav-links a span { position: static !important; transform: none !important; background: none !important; border: none !important; box-shadow: none !important; padding: 0 !important; font-size: 0.8rem !important; max-width: none !important; opacity: 1 !important; display: inline-block !important; pointer-events: auto !important; bottom: auto !important; left: auto !important; }

    /* CAMADA 2: OVERLAY (Deve estar abaixo do Header mas acima do conteúdo da página) */
    .mobile-overlay {
        position: fixed;
        inset: 0;
        background: transparent;
        z-index: 9000; /* Menor que o Header (10000) */
        display: none;
    }

    .mobile-overlay.active {
        display: block !important;
    }
}