/* =========================================
   АДАПТАЦИЯ ДЛЯ БОЛЬШИХ МОНИТОРОВ (27" и шире)
   ========================================= */
@media (min-width: 1920px) {
    
     /* 1. Увеличиваем главный логотип, убираем агрессивный сдвиг вверх */
    .custom-game-logo {
        max-width: 1000px !important;
        margin-top: 0 !important; 
        transform: none !important; 
    }

    .ambience-intro-wrapper {
        margin-top: 0 !important; /* Убрали отрицательный отступ */
    }

    /* Опускаем текст [NODE GAMES] в шапке, чтобы он был на одном уровне с меню */
    .brand-logo {
        position: relative !important;
        top: 5px !important; 
    }

    /* 2. Увеличиваем статус "В РАЗРАБОТКЕ" */
    .game-status {
        font-size: 70px !important; 
        letter-spacing: 28px !important;
        margin-top: 50px !important;
        margin-bottom: 70px !important;
    }

    /* 3. Увеличиваем кнопки */
    .btn {
        font-size: 24px !important; 
        padding: 16px 45px !important;
    }

    .steam-icon {
        width: 32px !important;
        height: 32px !important;
    }

    /* 4. Увеличиваем текст описания под кнопками */
    #page-news p[data-i18n="news_subtext"] {
        font-size: 26px !important; 
        max-width: 1300px !important; 
        margin-top: 60px !important;
    }

    /* 5. Отталкиваем карточки с новостями вниз, как на MacBook */
    .news-section-wrapper {
        margin-top: 150px !important; 
    }
}


/* -----------------------------------------
   2. МАЛЕНЬКИЕ МОНИТОРЫ И НОУТБУКИ (max-width: 1280px)
   ----------------------------------------- */
@media (max-width: 1280px) {
    /* --- ШРИФТЫ --- */
    #created-by-text { font-size: 65px !important; }
    .page-title, .page-title-about { font-size: 40px !important; }
    .game-title-large { font-size: 65px !important; }
    
    /* --- ЛОГОТИПЫ --- */
    .custom-game-logo { 
        max-width: 600px !important; 
        margin-top: -60px !important; /* <--- Добавили, чтобы поднять весь блок наверх */
    }
    #ambience-logo-reveal { max-width: 500px !important; }
    
    /* --- КОМАНДА --- */
    .team-row { gap: 15px !important; }
    .team-card { min-width: 230px !important; padding: 25px 15px !important; }
    .team-name { font-size: 22px !important; }

    /* --- PRESS --- */
    .press-panel { max-width: 600px !important; gap: 20px !important; padding: 30px !important; }
    .press-title-lg { font-size: 35px !important; }
    .press-title-sm { font-size: 26px !important; }
}

/* -----------------------------------------
   3. ПЛАНШЕТЫ ГОРИЗОНТАЛЬНО (max-width: 1024px)
   ----------------------------------------- */
@media (max-width: 1024px) {
    /* --- ШАПКА --- */
    .nav-list-left, .nav-list-right { gap: 15px !important; }
    .nav-link { font-size: 16px !important; }
    .brand-logo { font-size: 32px !important; }
    .steam-top-link { left: 20px !important; }
    .lang-selector { right: 20px !important; }
    
    /* --- КОНТЕЙНЕРЫ ABOUT И PRESS --- */
    .about-row { flex-direction: column !important; align-items: center !important; }
    .panel-img-main, .panel-text-main, .panel-grid { width: 100% !important; min-width: 100% !important; }
    
    .press-panel { flex-direction: column !important; align-items: center !important; text-align: center !important; }
    .press-panel-right { align-items: center !important; width: 100% !important; }

    /* --- СОЦСЕТИ И КОНТАКТЫ --- */
    .social-media-row { flex-direction: column !important; }
    .social-box-left, .social-box-right { width: 100% !important; }
    .contacts-socials-wrapper { flex-wrap: wrap !important; padding: 0 20px !important; }
    
    /* --- AMBIENCE 3D --- */
    /* Уменьшаем угол наклона стекол, чтобы они не сплющивались */
    .glass-shard { transform: rotateX(60deg) translateZ(-400px) !important; width: 95% !important; }
    .glass-shard .shard-info h3 {
        font-size: 22px !important;    
        letter-spacing: 2px !important; 
        text-align: center !important; /* Убедись, что здесь тоже есть центрирование */
    }
    .btn-wishlist-huge2, .btn-wishlist-huge { font-size: 24px !important; padding: 20px 30px !important; }
}

/* -----------------------------------------
   4. ПЛАНШЕТЫ ВЕРТИКАЛЬНО И СМАРТФОНЫ (max-width: 768px)
   ----------------------------------------- */
@media (max-width: 768px) {
    /* --- ФИКСИРОВАННАЯ ШАПКА КАК НА СКРИНШОТЕ --- */
    .site-header { 
        position: fixed !important; 
        top: 0 !important; 
        left: 0 !important; 
        width: 100% !important; 
        padding: 15px 20px !important; 
        display: flex !important; 
        justify-content: center !important; 
        align-items: center !important; 
        background: rgba(0, 0, 0, 0.9) !important; 
        backdrop-filter: blur(15px) !important; 
        -webkit-backdrop-filter: blur(15px) !important; 
        z-index: 9999 !important; 
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    }

    /* Прячем ПК-элементы */
    .steam-top-link, 
    .nav-list-left, 
    .nav-list-right, 
    .lang-selector { 
        display: none !important; 
    }

    .main-nav {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
    }
    
    /* Гамбургер слева по центру */
    .mobile-menu-btn { 
        display: block !important; 
        position: absolute !important; 
        left: 20px !important; 
        top: 50% !important; 
        transform: translateY(-50%) !important; 
        font-size: 32px !important; 
    }

    /* Идеально центрируем обертку логотипа */
    .logo-wrapper {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 0 auto !important;
        
    }

    /* --- ЖЕСТКО СКРЫВАЕМ STEAM (ПЕРЕБИВАЕМ STYLE.CSS) --- */
    body .steam-top-link,
    body.page-ambience-active .steam-top-link {
        display: none !important;
    }
    
    /* Логотип по центру */
/* Настраиваем сам текст логотипа */
    .brand-logo { 
        font-size: 26px !important; 
        margin: 0 !important; 
        text-align: center !important;
        transform: none !important; /* Убираем десктопное смещение по высоте */
    }
    
/* Убираем автоматическое прижатие выбора языка к нижнему краю экрана */
.mobile-nav { 
    margin-bottom: 0 !important; 
}

/* --- ПЕРЕНОС СТРОК В ЗАГОЛОВКЕ ВАКАНСИЙ --- */
    #page-careers .page-title {
        max-width: 250px !important; /* Ограничиваем ширину, заставляя текст переноситься */
        margin-left: auto !important;
        margin-right: auto !important;
        line-height: 1.3 !important;
    }

    /* --- ИСПРАВЛЕНИЕ СЕКЦИИ ABOUT НА МОБИЛЬНЫХ --- */
    
    /* Делаем одинаковые отступы между всеми панелями */
    #page-about .about-row {
        gap: 20px !important; /* Расстояние между блоками внутри одного ряда */
        padding: 0 15px !important; /* Боковые отступы от краев экрана */
    }
    
    /* Делаем такой же отступ между первым и вторым рядом */
    #page-about .about-row-mb {
        margin-bottom: 20px !important; 
    }

    /* Настраиваем внутренние отступы стеклянных блоков, чтобы текст дышал */
    #page-about .glass-panel {
        padding: 25px 20px !important; 
        border-radius: 16px !important;
        box-sizing: border-box !important;
    }
    
    /* Делаем картинку Wrencher'а более аккуратной */
    #page-about .panel-img-main {
        padding: 15px !important;
    }
    
    /* Уменьшаем шрифт заголовков внутри панелей для мобилок */
    #page-about .panel-title {
        font-size: 18px !important;
        margin-bottom: 15px !important;
    }

    /* --- МЕНЯЕМ ПОРЯДОК: КАРТИНКИ ВСЕГДА СВЕРХУ НА МОБИЛЬНЫХ --- */
    
    #page-about .about-row {
        display: flex !important;
        flex-direction: column !important;
    }

    /* Панели с одиночной картинкой и сеткой картинок поднимаем наверх */
    #page-about .panel-img-main,
    #page-about .panel-grid {
        order: -1 !important;
    }

    /* Панели с текстом опускаем вниз */
    #page-about .panel-text-main {
        order: 1 !important;
    }

/* Настраиваем аккуратный отступ от блока ссылок */
.mobile-lang-container { 
    margin-top: 40px !important; /* Можешь регулировать это значение, чтобы сдвинуть блок выше/ниже */
}

    .brand-logo::after { 
        display: none !important; 
    }
    
    /* Отступ для контента, чтобы он не ушел под фиксированную шапку */
    .main-content { padding-top: 70px !important; }

    /* Устранение вылезания за края (Overflow) */
    html, body { overflow-x: hidden !important; width: 100vw !important; max-width: 100% !important; }

    /* --- ЛОГОТИПЫ ИГР НА ГЛАВНОЙ --- */
    .custom-game-logo {
        width: 100% !important;
        max-width: 85vw !important;
        height: auto !important;
        object-fit: contain !important;
        margin-top: 30px !important; /* Отменяем минусовой отступ и опускаем логотип */
    }

    /* --- 3 КНОПКИ СТРОГО В ОДИН РЯД --- */
    .action-buttons { 
        flex-direction: row !important; 
        flex-wrap: nowrap !important; 
        justify-content: space-between !important; 
        gap: 5px !important; 
        width: 100% !important; 
        max-width: 100% !important;
        padding: 0 10px !important; 
        box-sizing: border-box !important; 
    }
    .action-buttons .btn { 
        width: auto !important; 
        flex: 1 1 0px !important; 
        font-size: 14px !important; 
        padding: 12px 4px !important; 
        text-align: center !important;
        white-space: nowrap !important; 
    }
    .steam-icon { width: 16px !important; height: 16px !important; margin-left: 5px !important; }

    /* --- ТЕКСТ ПРО ИГРЫ --- */
    .news-subtext { 
        font-size: 11px !important; 
        line-height: 1.5 !important; 
        padding: 0 15px !important; 
        margin-top: 25px !important; 
    }

    /* --- ГЛОБАЛЬНЫЕ ШРИФТЫ --- */
    .page-title, .page-title-about { font-size: 30px !important; text-align: center !important; margin-bottom: 25px !important; }
    .game-status { font-size: 16px !important; letter-spacing: 6px !important; text-align: center !important; margin-top: 10px !important; }
    .game-title-large { font-size: 55px !important; }

    /* --- НОВОСТИ И КОМАНДА --- */
    .news-grid-placeholder { grid-template-columns: 1fr !important; padding: 0 15px !important; }
    .team-row { flex-direction: column !important; padding: 0 15px !important; gap: 15px !important; }
    .team-card { min-width: 100% !important; max-width: 100% !important; }

    /* ================================================== */
    /* --- ИСПРАВЛЕНИЕ СЕКЦИИ AMBIENCE INTRO --- */
    /* ================================================== */
    #page-ambience {
        margin-top: 70px !important; 
        width: 100% !important;
        overflow-x: hidden !important; 
    }
    
    .ambience-intro-wrapper {
        padding: 0 15px !important;
        box-sizing: border-box !important;
        width: 100% !important;
        /* Убираем растягивание на 75% экрана, чтобы убрать пустоту сверху */
        min-height: auto !important; 
        /* Делаем небольшой отступ от шапки и подтягиваем всё наверх */
        margin-top: 40px !important; 
    }

    #ambience-reveal-group {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

#ambience-logo-reveal {
        width: 100% !important;
        max-width: 90vw !important; /* Увеличили: теперь логотип занимает 90% ширины телефона */
        height: auto !important;
        margin-bottom: 5px !important; 
        object-fit: contain !important;
    }

    #created-by-text { 
        font-size: 32px !important; 
        white-space: normal !important; 
        width: 90vw !important; 
        text-align: center !important; 
        top: 15vh !important; /* Подняли стартовый текст повыше */
    }

.ambience-dev-status {
        font-size: 22px !important; /* Увеличили шрифт */
        letter-spacing: 12px !important; /* Раздвинули буквы */
        margin: 5px 0 25px 0 !important; 
        text-align: center !important;
        width: 100% !important; 
    }

    .ambience-buttons-wrapper {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important; 
        width: 100% !important;
        align-items: center !important;
    }

    .btn-wishlist-huge, .btn-wishlist-huge2 {
        width: 100% !important;
        max-width: 320px !important; /* Сделали кнопки по ширине логотипа */
        margin: 0 !important; 
        padding: 14px 20px !important;
        font-size: 14px !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    /* --- ОТКЛЮЧЕНИЕ 3D АНИМАЦИЙ В AMBIENCE --- */
    /* --- ОТКЛЮЧЕНИЕ 3D АНИМАЦИЙ В AMBIENCE --- */
    #glass-shards-container { 
        perspective: none !important; 
        gap: 20px !important; 
        margin-top: 100px !important; /* <-- Увеличили отступ, чтобы опустить блок (было 0) */
        padding-top: 30px !important; 
    }
    .glass-shard { 
        transform: none !important; 
        width: 85% !important;          /* Занимают 85% ширины экрана, оставляя красивые поля */
        max-width: 340px !important;    /* Ограничиваем максимальную ширину на планшетах */
        margin-left: auto !important;   /* Центрируем */
        margin-right: auto !important;  /* Центрируем */
        border-radius: 12px !important; 
        padding: 20px !important; 
        box-sizing: border-box !important; 
    }
    .glass-shard img, .shard-info { transform: none !important; }
    .shard-info { text-align: center !important; margin-top: 15px !important; }
    .glass-shard .shard-info h3 {
        font-size: 22px !important;    
        letter-spacing: 2px !important; 
        text-align: center !important; /* Убедись, что здесь тоже есть центрирование */
    }
    .shard-info p { font-size: 12px !important; }

 /* --- ФУТЕР И СОЦСЕТИ --- */
    .social-icons-grid, .footer-socials { justify-content: center !important; gap: 12px !important; flex-wrap: wrap !important; }
    .social-link i { font-size: 26px !important; } 
    .footer-logos-img { width: 85% !important; max-width: 250px !important; height: auto !important; margin-bottom: 15px !important;}
    .footer-legal-disclaimer { font-size: 9px !important; padding: 0 10px !important; }

    /* --- ССЫЛКИ В САМОМ НИЗУ ФУТЕРА НА МОБИЛЬНЫХ --- */
    .footer-links {
        gap: 15px !important;
        flex-direction: column !important; /* Выстраиваем в столбик только на телефонах */
        margin-top: 25px !important;
        padding-top: 20px !important;
    }
    
    .footer-text-link {
        font-size: 14px !important;
        padding: 5px 0 !important; 
    }

    /* --- АДАПТИВ ДЛЯ ВАКАНСИЙ И МОДАЛКИ НА МОБИЛЬНЫХ --- */
    .careers-row { 
        display: flex !important;
        flex-direction: column !important; /* На телефонах 1 колонка */
        align-items: center !important; 
    }
    .career-card { width: 100% !important; max-width: 320px !important; }
    
    .career-modal-content {
        flex-direction: column !important; 
        overflow-y: auto !important;
    }
    
    .career-modal-left { 
        max-width: 100% !important; 
        height: 200px !important; 
        flex: none !important; 
    }
    
    .career-modal-right { padding: 25px !important; }
    #career-modal-title { font-size: 26px !important; margin-bottom: 15px !important; }
    .btn-apply { width: 100% !important; justify-content: center !important; }

/* <--- ВОТ ТУТ ТЕПЕРЬ СТОИТ ЗАКРЫВАЮЩАЯ СКОБКА ДЛЯ МОБИЛЬНОГО БЛОКА */

/* --- СУЖАЕМ ПАНЕЛЬ ДОНАТОВ НА МОБИЛЬНЫХ --- */
    .support-panel {
        width: 85% !important;          
        max-width: 340px !important;    
        margin-left: auto !important;   
        margin-right: auto !important;  
        padding: 30px 20px !important;  
        box-sizing: border-box !important;
    }

    /* --- СУЖАЕМ ПАНЕЛИ ПРЕССЫ НА МОБИЛЬНЫХ --- */
    .press-panel {
        width: 85% !important;          
        max-width: 340px !important;    
        margin-left: auto !important;   
        margin-right: auto !important;  
        margin-bottom: 30px !important; 
        padding: 30px 20px !important;  
        box-sizing: border-box !important;
    }

    /* --- СУЖАЕМ ПАНЕЛЬ КОНТАКТОВ НА МОБИЛЬНЫХ --- */
    #page-contacts .news-card-empty {
        width: 85% !important;          
        max-width: 340px !important;    
        margin-left: auto !important;   
        margin-right: auto !important;  
        padding: 40px 20px !important;  
        box-sizing: border-box !important;
    }

}

/* -----------------------------------------
   5. МЕЛКИЕ СМАРТФОНЫ (max-width: 480px / 320px)
   ----------------------------------------- */
@media (max-width: 480px) {
    /* Для совсем узких экранов (iPhone SE) */
    .action-buttons .btn { font-size: 12px !important; padding: 10px 1px !important; }
    .steam-icon { width: 14px !important; height: 14px !important; }
    
    .custom-game-logo { max-width: 90vw !important; }
    
    .game-status { font-size: 14px !important; letter-spacing: 4px !important; }
    .news-subtext { font-size: 10px !important; padding: 0 10px !important; }

    /* Ужимаем панели */
    .glass-panel, .size-constrained-panel { padding: 20px 15px !important; }
    .press-panel { padding: 20px 10px !important; }
    
    /* Тексты в панелях */
    .panel-title { font-size: 16px !important; text-align: center !important; }
    .panel-text { font-size: 13px !important; text-align: center !important; }
    
    /* Модальное окно новостей */
    .news-modal-content { margin: 0 10px !important; }
    .news-modal-text-container { padding: 20px !important; }
    #news-modal-title { font-size: 20px !important; }
    
    /* Support & Press */
    .support-amount { font-size: 36px !important; }
    .btn-donate { font-size: 16px !important; padding: 12px !important; width: 100% !important; }
    .press-title-lg { font-size: 28px !important; }
    .press-title-sm { font-size: 22px !important; }
    
/* Дополнительное сжатие Ambience для микро-смартфонов */
    #ambience-logo-reveal { 
        max-width: 95vw !important; /* Разрешаем логотипу быть огромным на телефонах */
    }
    
    .ambience-dev-status { 
        font-size: 18px !important; /* Сделали текст крупнее */
        letter-spacing: 10px !important; /* Увеличили межбуквенный интервал */
        margin: 5px 0 20px 0 !important; 
    }
    
    .btn-wishlist-huge, .btn-wishlist-huge2 { 
        max-width: 95vw !important; /* Кнопки тоже растянутся под размер логотипа */
        font-size: 14px !important; 
        padding: 14px 15px !important; 
    }

    /* Отступ для футера */
    .size-constrained-panel { margin-bottom: 150px !important; }
}