/* ============================================
   КОМПАКТНАЯ ШАПКА ДЛЯ МОБИЛЬНЫХ УСТРОЙСТВ
   Применяется ко всем modern меню
   ============================================ */

@media (max-width: 768px) {
    
    /* === ОБЩИЕ СТИЛИ ДЛЯ ВСЕХ MODERN МЕНЮ === */
    
    /* Компактная шапка */
    .skill-modern-header,
    .stat-modern-header,
    .colony-modern-header,
    .settings-modern-header,
    .tree-modern-header {
        padding: 8px 12px !important;
        min-height: auto !important;
    }
    
    /* Компактный заголовок */
    .skill-modern-title,
    .stat-modern-title,
    .colony-modern-title,
    .settings-modern-title,
    .tree-modern-title {
        font-size: 16px !important;
        gap: 6px !important;
    }
    
    .skill-modern-title-icon,
    .stat-modern-title-icon,
    .colony-modern-title-icon,
    .settings-modern-title-icon,
    .tree-modern-title-icon {
        font-size: 18px !important;
    }
    
    /* Компактная навигация */
    .menu-navigation,
    .stat-menu-navigation,
    .colony-menu-navigation,
    .settings-menu-navigation,
    .tree-menu-navigation {
        gap: 3px !important;
    }
    
    .menu-navigation .nav-btn,
    .stat-menu-navigation .stat-nav-btn,
    .colony-menu-navigation .colony-nav-btn,
    .settings-menu-navigation .settings-nav-btn,
    .tree-menu-navigation .tree-nav-btn {
        width: 32px !important;
        height: 32px !important;
        padding: 4px !important;
        max-width: 45px !important;
    }
    
    .menu-navigation .nav-btn img,
    .stat-menu-navigation .stat-nav-btn img,
    .colony-menu-navigation .colony-nav-btn img,
    .settings-menu-navigation .settings-nav-btn img,
    .tree-menu-navigation .tree-nav-btn img {
        width: 18px !important;
        height: 18px !important;
    }
    
    /* Компактная кнопка закрытия */
    .close-menu-btn,
    .skill-modern-close,
    .stat-close-btn,
    .colony-close-btn,
    .settings-close-btn,
    .tree-close-btn {
        width: 32px !important;
        height: 32px !important;
        padding: 4px !important;
    }
    
    .close-menu-btn img,
    .skill-modern-close img,
    .stat-close-btn img,
    .colony-close-btn img,
    .settings-close-btn img,
    .tree-close-btn img {
        width: 18px !important;
        height: 18px !important;
    }
    
    /* === ПОДЗАГОЛОВОК СО СТАТИСТИКОЙ === */
    
    /* Компактный подзаголовок */
    .skill-modern-subheader,
    .stat-modern-points,
    .colony-modern-subheader {
        padding: 6px 12px !important;
    }
    
    /* Компактная статистика */
    .skill-modern-stats,
    .stat-modern-stats,
    .colony-modern-stats {
        gap: 8px !important;
        flex-wrap: wrap !important;
    }
    
    .skill-stat-item,
    .stat-stat-item,
    .colony-stat-item {
        font-size: 11px !important;
        padding: 4px 8px !important;
        gap: 4px !important;
    }
    
    .skill-stat-icon,
    .stat-stat-icon,
    .colony-stat-icon {
        font-size: 14px !important;
    }
    
    .skill-stat-value,
    .stat-stat-value,
    .colony-stat-value {
        font-weight: 600 !important;
    }
    
    /* === ФИЛЬТРЫ И СОРТИРОВКА === */
    
    /* Компактные фильтры */
    .skill-modern-filters {
        padding: 6px 12px !important;
        gap: 6px !important;
    }
    
    .skill-filter-group {
        gap: 4px !important;
    }
    
    .skill-filter-label {
        font-size: 11px !important;
        margin-bottom: 3px !important;
    }
    
    .skill-filter-btn,
    .skill-sort-btn {
        font-size: 10px !important;
        padding: 4px 6px !important;
        min-width: calc(50% - 2px) !important;
    }
    
    /* === КОНТЕНТ === */
    
    /* Увеличиваем высоту контента за счет компактной шапки */
    .skill-modern-content,
    .stat-modern-content,
    .colony-modern-content,
    .settings-modern-content,
    .tree-modern-content {
        flex: 1 !important;
        overflow-y: auto !important;
        padding: 10px 12px !important;
    }
    
    /* === ДОПОЛНИТЕЛЬНЫЕ ОПТИМИЗАЦИИ === */
    
    /* Скрываем иконки в статистике на очень маленьких экранах */
    @media (max-width: 360px) {
        .skill-stat-icon,
        .stat-stat-icon,
        .colony-stat-icon {
            display: none !important;
        }
        
        .skill-stat-item,
        .stat-stat-item,
        .colony-stat-item {
            padding: 3px 6px !important;
            font-size: 10px !important;
        }
        
        .skill-modern-title,
        .stat-modern-title,
        .colony-modern-title,
        .settings-modern-title,
        .tree-modern-title {
            font-size: 14px !important;
        }
        
        .menu-navigation .nav-btn,
        .stat-menu-navigation .stat-nav-btn,
        .colony-menu-navigation .colony-nav-btn,
        .settings-menu-navigation .settings-nav-btn,
        .tree-menu-navigation .tree-nav-btn {
            width: 28px !important;
            height: 28px !important;
        }
        
        .menu-navigation .nav-btn img,
        .stat-menu-navigation .stat-nav-btn img,
        .colony-menu-navigation .colony-nav-btn img,
        .settings-menu-navigation .settings-nav-btn img,
        .tree-menu-navigation .tree-nav-btn img {
            width: 16px !important;
            height: 16px !important;
        }
    }
}

/* === ЛАНДШАФТНАЯ ОРИЕНТАЦИЯ === */

@media (max-width: 768px) and (orientation: landscape) {
    /* Еще более компактная шапка в ландшафте */
    .skill-modern-header,
    .stat-modern-header,
    .colony-modern-header,
    .settings-modern-header,
    .tree-modern-header {
        padding: 6px 10px !important;
    }
    
    .skill-modern-subheader,
    .stat-modern-points,
    .colony-modern-subheader {
        padding: 4px 10px !important;
    }
    
    .skill-modern-filters {
        padding: 4px 10px !important;
    }
    
    .skill-modern-title,
    .stat-modern-title,
    .colony-modern-title,
    .settings-modern-title,
    .tree-modern-title {
        font-size: 14px !important;
    }
    
    .skill-stat-item,
    .stat-stat-item,
    .colony-stat-item {
        font-size: 10px !important;
        padding: 3px 6px !important;
    }
}