/* ==========================================
   MOBILE.CSS - RESPONSIVIDADE PARA SMARTPHONES
   ========================================== */

/* Regras para telas menores que 768px (Celulares e Tablets pequenos) */
@media (max-width: 768px) {
    
    /* 1. Esconde a Sidebar padrão do PC */
    .sidebar {
        display: none !important;
    }

    /* 2. Ajusta o container principal para ocupar toda a tela */
    .main-content {
        margin-left: 0 !important;
        padding: 10px !important;
        padding-bottom: 70px !important; /* Espaço para a barra inferior */
    }

    /* 3. Cria a Bottom Navigation (Barra inferior estilo App) */
    .bottom-nav {
        display: flex !important;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: #0a0a0a;
        border-top: 1px solid #333;
        z-index: 9999;
        justify-content: space-around;
        padding: 10px 0;
        box-shadow: 0 -5px 20px rgba(0,0,0,0.8);
    }

    .bottom-nav-item {
        color: #888;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 0.6rem;
        text-decoration: none;
        transition: 0.2s;
    }

    .bottom-nav-item i {
        font-size: 1.2rem;
        margin-bottom: 4px;
    }

    .bottom-nav-item.active {
        color: var(--neon-green);
    }

    /* 4. Ajustes no Perfil (Mural de Jogos) */
    .profile-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    #profAvatar {
        width: 100px !important;
        height: 100px !important;
    }

    .stat-item {
        font-size: 0.7rem;
        padding: 5px;
    }

    /* 5. Ajustes nos Cards de Jogos (Grid) */
    .game-cartridge {
        flex-direction: column;
        align-items: center;
        text-align: center;
        position: relative;
    }

    .cart-art img {
        width: 100%;
        max-width: 200px;
        height: auto;
    }

    .scores-row {
        justify-content: center;
        flex-wrap: wrap;
    }

    .rank-box-absolute {
        position: absolute;
        top: 10px;
        right: 10px;
    }

    /* 6. Modal / Janelas Pop-up */
    .modal-box {
        width: 95% !important;
        max-height: 90vh;
        overflow-y: auto;
        padding: 15px !important;
    }

    /* 7. Chat e Inputs */
    #globalSearchInp {
        width: 100% !important;
    }
}

/* Esconde a barra inferior em telas de PC */
@media (min-width: 769px) {
    .bottom-nav {
        display: none !important;
    }
}