/* Estilos adicionais para suporte a orientação portrait */

/* Classe adicionada ao body quando em modo portrait */
body.portrait-mode {
    overflow-y: auto !important;
}

/* Ajustes para o app principal em modo portrait */
@media (orientation: portrait) {
    .invix-main {
        margin-left: 60px !important;
        padding: 10px 5px;
    }
    
    .welcome-banner {
        grid-template-columns: 1fr !important;
        padding: 15px 10px;
    }
    
    .category-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px;
    }
    
    .featured-games-section {
        grid-template-columns: 1fr !important;
        gap: 10px;
    }
    
    .skills-xp-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* Ajustes para jogos em modo portrait */
    .game-container {
        width: 100vw;
        height: 100vh;
    }
    
    /* Ajustes para controles de jogos */
    .ui-container {
        top: 5px !important;
        right: 5px !important;
        gap: 5px !important;
    }
    
    .btn {
        padding: 8px 12px !important;
        font-size: 0.85rem !important;
    }
    
    #tools-container {
        bottom: 5px !important;
        padding: 5px !important;
        max-width: 90vw !important;
    }
}

/* Ajustes específicos para telas muito pequenas */
@media (max-width: 360px) and (orientation: portrait) {
    .category-grid {
        grid-template-columns: 1fr !important;
    }
    
    .tile {
        min-height: 100px !important;
    }
    
    .mode-card .emoji-icon {
        font-size: 2rem !important;
    }
    
    .mode-card p {
        font-size: 0.8rem !important;
    }
}