/* 1. Сброс базовых отступов */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 2. Оформление фона и шрифта */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f7f6;
    color: #333;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /*padding-top: 120px;*/ /* Резервирует 140 пикселей сверху под зафиксированную шапку */
}

/* 3. Шапка сайта */
header {
    background-color: #f2fb98; /*желтый #ecf96a*/
    padding: 7px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* МАГИЯ ЗАКРЕПЛЕНИЯ: */
    position: fixed; /* Вырывает шапку из общего потока и фиксирует её на экране */
    top: 0; /* Прижимает строго к самому верхнему краю */
    left: 0; /* Растягивает от левого края */
    width: 100%; /* Растягивает шапку на всю ширину экрана */
    z-index: 1000; /* Помещает шапку на самый верхний "слой", чтобы текст не перекрывал её */

    box-shadow: 0 2px 10px rgba(0,0,0,0.2); /* Добавляем тень снизу для эффекта парения */
}

/* Блок для выстраивания картинок в ряд верхнерго колонтитула */
.header-images-container {
    display: flex;
    justify-content: center; /* Центрируем картинки */ /* flex-end;  перемещает картинки в правый край  */
    gap: 40px; /* Расстояние между картинками */
    flex-wrap: wrap; /* МАГИЯ ПЕРЕНОСА: если картинкам тесно, они перейдут на строку ниже */
    /*display: flex;
    justify-content: flex-end;*/ /* Сами картинки внутри контейнера прижаты вправо */
    /*gap: 20px;
    max-width: 1100px;*/ /* Ограничиваем ширину шапки (сделайте такую же цифру, как у вашего main) */
    /*margin: 0 auto;*/ /* Центрируем эту невидимую область по экрану */
    /*padding-right: 40px;*/ /* Дополнительный отступ, который аккуратно пододвигает картинки еще ближе к центру */
}

/* МАГИЯ КРУГА: Стили для картинок */
.round-img {
    width: 40px; /* Одинаковая ширина */
    height: 40px; /* Одинаковая высота */
    border-radius: 50%; /* Делает картинку идеально круглой */
    object-fit: cover; /* Защищает от растягивания */
    border: 2px solid #ffffff; /* Белая рамка вокруг */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Легкая тень для красоты */
    /* Вот эта строчка добавляет плавность анимации при наведении */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Добавляем плавность */
   
    /* ИСПРАВЛЕНИЕ: Убираем текстовое поведение картинки */
    display: block; /* Превращаем картинку в блок, убирая нижний "хвостик" */
    vertical-align: middle; /* Выравниваем строго по центру линии */
}

/* 4. Главный контент */
main {
    max-width: 1500px; /* Было 800px, теперь текстовая область станет намного шире */
    margin: 40px auto 10px; /*отступ сверху , сбоку, снизу*/
    padding: 20px; /* Можно увеличить внутренние отступы, чтобы тексту было просторнее */
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    flex: 1;
}

/* Оформление заголовка h1 */
h1 {
    font-size: 32px;
    color: #2c3e50;
    margin-bottom: 15px;
    font-weight: 700;
}

/* Оформление абзацев p */
p {
    font-size: 16px;
    color: #555555;
    margin-bottom: 20px;
    text-align: justify; /* растягивает текст ровно по ширине блока */
}
.p2 {
    text-indent: 30px; /* Каждая новая строка тега <p> начнется с отступа в 30 пикселей */    
}

/* 5. Кнопка действия */
.btn {
    display: inline-block;
    background-color: #3498db;
    color: #ffffff;
    padding: 12px 24px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background 0.3s ease;
}

    /* Кнопка при наведении */
    .btn:hover {
        background-color: #2980b9;
    }

/* 6. Подвал сайта */
footer {
    background-color: #f2fb98; /*желтый*/
    padding: 16px; /* Делаем подвал аккуратной неширокой полосой */
    margin: 20px 0px 10px; /* Отступ только снизу */
}

/* Контейнер, который выстраивает картинки строго по центру в ряд */
.footer-social-container {
    display: flex;
    justify-content: center; /* Центрирование по горизонтали */
    align-items: center; /* Центрирование по вертикали */
    gap: 25px; /* Расстояние между картинками */
    flex-wrap: wrap; /* МАГИЯ ПЕРЕНОСА: если картинкам тесно, они перейдут на строку ниже */
}

/* Стили для картинок со скруглёнными краями */
.rounded-footer-img {
    width: 120px; /* Аккуратный небольшой размер для подвала */
    height: 120px; /* Высота равна ширине */
    border-radius: 20px; /* Скругляет только углы (не делает круг, а делает мягкий квадрат) */
    object-fit: cover; /* Защита от деформации */
    border: 3px solid #ffffff; /* Добавили красивую белую рамку, как в шапке */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3); /* Плотная тень для объема */
    transition: transform 0.2s ease, opacity 0.2s ease; /* Плавная анимация */
}

/* Эффект при наведении мышки */
.footer-img-link:hover .rounded-footer-img {
    transform: translateY(-3px); /* Картинка изящно приподнимается вверх */
    opacity: 0.9; /* Слегка меняет яркость */
}


/* Эффект при наведении курсора на картинку-ссылку */
.header-link:hover .round-img {
    transform: scale(1.08); /* Картинка слегка увеличивается в размерах */
    box-shadow: 0 6px 12px rgba(0,0,0,0.3); /* Тень становится глубже */
    cursor: pointer; /* Курсор меняется на "пальчик" */
}


/* Контейнер, который выстраивает картинку и текст в одну линию */
.title-container {
    display: flex;
    align-items: center; /* Центрирует картинку и текст по вертикали относительно друг друга */
    gap: 15px; /* Расстояние между картинкой и текстом */
    margin-bottom: 20px; /* Отступ снизу от всего блока до следующего абзаца */
}


/* Главный блок: выстраивает картинку и всю текстовую группу в ряд */
.main-hero-block {
    display: flex;
    align-items: flex-start; /* Выравнивает картинку по верхнему краю текста */
    gap: 25px; /* Расстояние между картинкой и текстом */
    margin-bottom: 35px; /* Отступ снизу до следующего раздела <section> */
}

/* Крупная картинка слева */
.hero-image {
    width: 120px; /* Увеличили размер, так как теперь рядом и заголовок, и абзац */
    height: 120px;
    object-fit: cover;
    border-radius: 15px; /* Красивые скруглённые углы */
    border: 2px solid #ffffff; /* Белая рамка вокруг #ffffff #d1f7ff*/
    box-shadow: 0 4px 8px rgba(0,0,0,0.6); /* Легкая тень для красоты */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1.5);
    flex-shrink: 0; /* Запрещает картинке сжиматься, если тексту мало места */
}

/* Текстовая группа (держит заголовок и абзац вместе) */
.hero-text-group {
    display: flex;
    flex-direction: column; /* Заголовок и абзац внутри группы идут друг под другом */
}





/* Стили для картинки рядом с заголовком */
.title-icon {
    width: 45px; /* Аккуратный размер иконки под высоту шрифта */
    height: 45px; /* Высота равна ширине */
    object-fit: cover; /* Защита от растягивания */
    border-radius: 8px; /* Мягкие скруглённые углы (если хотите круглую, замените на 50%) */
}

/* Вводный абзац */
.intro-text {
    font-size: 18px;
    color: #555555;
    margin: 0; /* Убираем лишние отступы */
    text-align: justify; /* растягивает текст ровно по ширине блока */
}


/* Стили для разделов (создают отступы между крупными блоками текста) */
.site-section {
    margin-top: 40px; /* Отступ сверху между разделами */
    border-top: 1px solid #eaeded; /* Тонкая линия-разделитель для красоты */
    padding-top: 20px; /* Отступ от линии до текста */
   
}

/* Главный заголовок */
h1 {
    font-size: 32px;
    color: #2c3e50;
    margin-bottom: 10px; /* Небольшой отступ снизу до вводного текста */
    line-height: 1.2;
}

/* Заголовки крупных разделов */
h2 {
    font-size: 24px;
    color: #2c3e50;
    margin-bottom: 15px;
    margin-top: 10px;
}

/* Заголовки мелких подразделов */
h3 {
    font-size: 19px;
    color: #34495e; /* Чуть более мягкий оттенок синего */
    margin-bottom: 10px;
    margin-top: 20px; /* Отступ сверху, чтобы отделить от предыдущего текста */
}

.email-link {
    font-size: 16px;
    font-weight: 500; /*жирность))*/
    color: #34495e; /* Чуть более мягкий оттенок синего */
    margin-bottom: 20px;
    margin-top: 10px; /*  Отступ сверху, чтобы отделить от предыдущего текста */
    text-align: center;
}

.link {
    color: #4340e7; /* Чуть более мягкий оттенок синего */
    text-decoration: none; /* УБИРАЕМ ПОДЧЕРКИВАНИЕ ТЕКСТА у ссылки */
}

.privacy-link {
    font-size: 12px;
    color: #000000;
    opacity: 0.8; /*прозрачность*/
    text-decoration: none;
    text-align: center;
    margin-top: -10px;  /*принудительно поднять вверх*/
    padding-bottom: 12px; /*отступ снизу*/   
}



/* Стили для списка с точками */
.dot-list {
    margin-left: 50px; /* Отступ слева, чтобы точки не вылезали за край */
    margin-bottom: 60px; /* Отступ снизу до следующего текста */
    margin-top: -20px;
}

    .dot-list li {
        /*font-size: 16px;*/ /* Размер текста (для мобильных в медиазапросе можно сделать 15px) */
/*        color: #555555;*/
        margin-bottom: -20px; /*  Расстояние между строчками списка */
        list-style-type: disc; /* Задает жирную круглую точку (стоит по умолчанию) */
    }




/* Контейнер, который выстраивает карточки в ряд */
.image-grid-container {
    display: flex;
    justify-content: center; /* Равномерно распределяет карточки по ширине */
    gap: 25px; /* Расстояние между карточками */
    /*margin-top: 0px;*/ /* Отступ сверху от предыдущего текста */
    /*margin-bottom: 0px;*/ /* Отступ снизу */
    flex-wrap: wrap; /* разрешает карточкам переходить на новую строку */
}

/* Стили для отдельной карточки */
.grid-card {
    /*flex: 1;*/ /* Все карточки будут одинаковой ширины */
    width: calc(33.333% - 17px); /* Точный расчет: ровно 3 карточки в один ряд на ПК */
    max-width: 500px;
    min-width: 300px; /* МИНИМАЛЬНАЯ ШИРИНА: если экрану тесно, карточка уйдет вниз */
    background-color: #f8f9fa; /* СВЕТЛО-СЕРЫЙ ФОН для карточки */
    padding: 15px; /* Внутренние отступы, чтобы контент не прилипал к краям */
    border-radius: 12px; /* Скругляем углы самой серой карточки */
    border: 1px solid #eaeded; /* Тонкая рамка в цвет нашей линии-разделителя */
    display: flex;
    flex-direction: column; /* Картинка и текст идут строго друг под другом */
    align-items: center; /* Центрирует картинку и текст по горизонтали */
    text-align: center; /* Выравнивает сам текст по центру */
    text-decoration: none; /* УБИРАЕМ ПОДЧЕРКИВАНИЕ ТЕКСТА у ссылки */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Плавная анимация */
}

    /* Красивый интерактивный эффект при наведении курсора на карточку */
    .grid-card:hover {
        transform: translateY(-5px); /* Карточка изящно приподнимается вверх */
        box-shadow: 0 8px 15px rgba(0,0,0,0.1); /* Тень становится объемнее */
        background-color: #f1f2f6; /* Фон становится чуть темнее для отклика */
        cursor: pointer; /* Курсор меняется на "пальчик" */
    }

/* Стили для картинок в блоке */
.grid-card-img {
    width: 100%; /* Картинка занимает всю ширину своей карточки */
    /*height: 180px;*/ /* Фиксированная высота для одинакового вида */
    max-width: 180px; /* Ограничиваем максимальный размер картинки */
    aspect-ratio: 1 / 1; /*  жесткая пропорция 1 к 1 для любых экранов */
    object-fit: cover; /* Защита от растягивания и деформации */
    border-radius: 16px; /* ЗАКРУГЛЕННЫЕ КРАЯ у картинки */
    border: 3px solid #ffffff; /* Белая рамка вокруг #ffffff */
    box-shadow: 0 4px 10px rgba(0,0,0,0.6); /* Легкая тень для объема */
    margin-bottom: 14px; /* Отступ от картинки до текста под ней */
}

/* Текст под картинкой */
.grid-card-text {
    font-size: 15px;
    color: #555555;
    text-indent: 30px; /* Каждая новая строка тега начнется с отступа в 30 пикселей */
    margin: 0; /* Сбрасываем лишние отступы */
    line-height: 1.4;
}




/* Контейнер для баннера */
.hero-banner {
    width: 100%; /* Растягивается строго на всю ширину экрана */
    height: 200px; /* Высота баннера на компьютере (можно изменить под себя) */

    /*background-image: url('image/bannerMax.png');*/ /* Большая картинка */

    overflow: hidden; /* Прячет всё, что не помещается в границы */
    /*        margin: 0;*/

    padding: 0;
    margin-top: 52px; /* Сдвигает баннер вниз из-под зафиксированной шапки */

    background-color: #FFE989; /* Например, темно-синий. Если картинка светлая, напишите #ffffff */



    display: flex;
    justify-content: center; /* Центрирует картинку по горизонтали */
    align-items: center; /* Центрирует картинку по вертикали */
}

/* Стили для самой картинки внутри баннера */
.banner-img {
    /*width: 100%;*/ /* Картинка занимает 100% ширины контейнера */
    height: 200px; /* Картинка занимает 100% высоты контейнера */
    object-position: center; /* Центрирует изображение, если края обрезаются */
    /*object-fit: contain;*/ /* МАГИЯ: картинка сожмется или растянется, но покажется НА 100% БЕЗ ОБРЕЗАНИЙ */


    object-fit: cover; /* ИСПРАВЛЕНИЕ: Картинка полностью заменяет contain. Она заполняет весь блок, плавно обрезая бока */
}



.game-card {
    
    display: none; /* По умолчанию скрываем элемент (для обычных ПК с мышкой) */
}

.game-card-PC {
    display: flex;
    flex-direction: column;
    margin-top: auto;
}

.card-bottom {
    margin: 15px 0 0; /* Минимальный отступ сверху, если текста много */
    font-weight: bold;
    color: #007bff;
    text-align: center;
    padding: 6px 20px; /* Отступы внутри рамки (сверху/снизу, слева/справа) */
    border: 1px solid #e0e0e0; /* Светлый цвет рамки (можно заменить на #cbd5e1) */
    border-radius: 12px; /* Скругление краев (чем больше число, тем круглее) */

    color: #555555; /* Цвет текста (спокойный серый) */
    background-color: #f9f9f9; /* Очень светлый фон внутри рамки */
}




/* Настройки красного пульсирующего текста */
.pulse-text {
    margin: 15px 0 0; /* Минимальный отступ сверху, если текста много */
    color: #e74c3c; /* Яркий красный цвет */
    font-weight: bold; /* Делаем текст жирным, чтобы он выделялся */
    font-size: 18px; /* Чуть крупнее основного текста */
    text-align: center; /* Выравнивание по центру (по желанию) */

    padding: 6px 20px; /* Отступы внутри рамки (сверху/снизу, слева/справа) */
    border: 1px solid #e0e0e0; /* Светлый цвет рамки (можно заменить на #cbd5e1) */
    border-radius: 12px; /* Скругление краев (чем больше число, тем круглее) */
    background-color: #f9f9f9; /* Очень светлый фон внутри рамки */

    /* Подключаем анимацию: название 'pulsing', длительность 1.5 секунды, крутится бесконечно (infinite) */
    animation: pulsing 1.5s infinite ease-in-out;
}

/* Описание магии пульсации через ключевые кадры */
@keyframes pulsing {
    0% {
        transform: scale(1); /* Исходный размер */
        opacity: 0.85; /* Полная видимость */
    }

    50% {
        transform: scale(1.05); /* Текст плавно увеличивается на 5% */
        opacity: 1; /* Слегка блекнет (становится прозрачнее) */
    }

    100% {
        transform: scale(1); /* Возвращается к исходному размеру */
        opacity: 0.85; /* Снова полностью видимый */
    }
}






    /* Стилизация линии-разделителя */
    hr {
    border: none; /* Полностью убираем стандартную грубую рамку браузера */
    border-top: 1px solid #eaeded; /* Рисуем нашу красивую, тонкую и аккуратную линию */
    margin: 30px 0; /* Отступы: 30px сверху и снизу от текста, 0 по бокам */
}




/* ==========================================================================
   Стили для страницы формы тестирования приложений (адаптированные под сайт)
   ========================================================================== */

.testing-form {
    max-width: 500px;
    margin: 30px auto;
    padding: 25px;
    background: #ffffff; /* Белый аккуратный фон для светлой темы сайта */
    border: 1px solid #eaeded; /* Тонкая рамка в цвет ваших разделителей сайтов */
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02); /* Почти незаметная мягкая тень */
}

.form-group {
    margin-bottom: 20px;
    text-align: left;
}

    .form-group label {
        display: block;
        margin-bottom: 8px;
        font-weight: bold;
        color: #2c3e50; /* В цвет ваших главных заголовков h1 и h2 */
    }

.form-input {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    box-sizing: border-box;
    color: #555555; /* В цвет вашего основного текста */
    transition: border-color 0.2s;
}

    .form-input:focus {
        border-color: #34495e; /* При клике подсвечивается цветом h3 подгрупп */
        outline: none;
    }

/* Блок чекбокса политики конфиденциальности */
.checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 25px;
    cursor: pointer;
    width: 100%;
}

    .checkbox-group input {
        margin-top: 4px;
        width: 18px;
        height: 18px;
        cursor: pointer;
    }

.checkbox-text {
    font-size: 14px;
    line-height: 1.4;
    color: #555555; /* Текст чекбокса теперь совпадает с цветом текста сайта */
    text-align: left;
}

/* Настройки для текста статуса отправки */
#formStatusMessage {
    margin-top: 20px;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    min-height: 24px; /* Резервирует место, чтобы контент под формой не прыгал */
}

/* Стиль для отключенной (неактивной) кнопки отправки */
.btn:disabled {
    background-color: #bdc3c7 !important; /* Мягкий серый цвет вместо агрессивного черного */
    color: #ffffff !important;
    cursor: not-allowed;
    opacity: 0.7;
}

.qa-rules-list {
    margin-top: 15px; /* Отступ сверху от вводного текста */
    margin-bottom: 30px; /* Отступ снизу до формы */
    margin-left: 30px; /* Аккуратный отступ слева, чтобы точки не вылезали */
    padding: 0;
}

    .qa-rules-list li {
        list-style-type: disc; /* Стандартная круглая точка */
        /*margin-bottom: 6px;*/ /* Комфортное расстояние МЕЖДУ пунктами списка */
        /*line-height: 1.6;*/ /* Правильный межстрочный интервал (текст не слипается) */
        font-size: 16px; /* Удобный для чтения размер шрифта */
        color: #555555; /* Приятный серый цвет основного текста */
        text-align: left; /* Выравнивание строго по левому краю */
    }

        .qa-rules-list li strong {
            color: #066310; /* Выделение важных слов (Google Play) цветом ваших заголовков */
        }

/* ==========================================================================
  ВЫШЕ Стили для страницы формы тестирования приложений (адаптированные под сайт)
   ========================================================================== */




/* ==========================================
   АДАПТИВНОСТЬ ДЛЯ РАЗНЫХ УСТРОЙСТВ
   ========================================== */

/* 📱 Для мобильных телефонов (ширина экрана меньше 600px) */
@media (max-width: 600px) {
    header {
        padding: 6px; /* Уменьшаем отступы шапки, чтобы сэкономить место */
    }

    /*body {
        padding-top: 90px;*/ /* На смартфонах уменьшаем отступ сверху до 110px */
    /*}*/

    .header-images-container {
        gap: 16px; /* Делаем расстояние между иконками чуть меньше */
    }

    .round-img {
        width: 30px; /* Уменьшаем размер иконок, чтобы они не занимали весь экран */
        height: 30px; /* Высота строго равна ширине, чтобы круг не стал овалом */
        border-width: 2px; /* Делаем белую рамку чуть тоньше */
    }

    /* Адаптируем контент сайта, чтобы на телефонах всё смотрелось аккуратно */
    main {
        margin: 20px 15px 10px; /* Уменьшаем отступы вокруг главной карточки */
        padding: 15px; /* Внутренние отступы карточки тоже делаем меньше */
    }

    .title-container {
        flex-direction: column; /* На телефонах картинка встанет НАД заголовком */
        text-align: center; /* Текст отцентрируется */
        gap: 10px;
    }

    .main-hero-block {
        flex-direction: column; /* На смартфонах картинка встанет НАД текстом */
        align-items: center; /* Центрируем картинку */
        text-align: center; /* Текст тоже центрируется */
        gap: 15px;
    }


    h1 {
        font-size: 22px; /* Уменьшаем заголовок, чтобы он не переносился некрасиво */
    }

    /* Заголовки крупных разделов */
    h2 {
        font-size: 18px;       
    }

    /* Вводный абзац для мобилки*/
    .intro-text {
        font-size: 16px;
        color: #555555;
        margin: 0; /* Убираем лишние отступы */
        text-align: center;
    }

    /* Заголовки мелких подразделов */
    h3 {
        font-size: 15px;
        color: #34495e; /* Чуть более мягкий оттенок синего */
        margin-bottom: 10px; /*нижний отступ*/
        margin-top: 20px; /* Отступ сверху, чтобы отделить от предыдущего текста */
    }

    p {
        font-size: 14px; /* Размер основного текста на смартфонах (чуть компактнее) */
        line-height: 1.5; /* Межстрочный интервал для мобильных экранов */
        margin-bottom: 15px; /* Немного уменьшаем отступ снизу между абзацами */
    }

    /* Стили для списка с точками */
    .dot-list {
        margin-left: 50px; /* Отступ слева, чтобы точки не вылезали за край */
        margin-bottom: 50px; /* Отступ снизу до следующего текста */
        margin-top: -15px;
    }

        .dot-list li {
            /*font-size: 16px;*/ /* Размер текста (для мобильных в медиазапросе можно сделать 15px) */
            /*        color: #555555;*/
            margin-bottom: -15px; /*       Расстояние между строчками списка */
                list-style-type: disc; /* Задает жирную круглую точку (стоит по умолчанию) */
        }


    hr {
        margin: 20px 0; /* На смартфонах делаем отступы чуть меньше, чтобы сберечь место */
    }



    .grid-card {
        width: 100%; /* На смартфонах каждая карточка займет всю ширину экрана */
    }

    .image-grid-container {
        flex-direction: column; /* На смартфонах карточки встанут друг под друга */
        gap: 35px; /* Увеличиваем расстояние между карточками в колонке */
    }

    .grid-card-img {
        max-width: 40%; /* На телефонах картинка может стать крупнее на весь экран */
/*        height:150px;*/
    }

    .hero-banner {
        height: 140px; /* На смартфонах делаем баннер в два раза уже, чтобы он не занимал весь экран */
        margin-top: 42px; /* На смартфонах шапка ниже, поэтому уменьшаем отступ сверху */

 }

    .banner-img {
         height: 140px; /* Картинка занимает 100% высоты контейнера */
    }


        /* Контейнер, который выстраивает картинки строго по центру в ряд */
        .footer-social-container {
        gap: 20px 35px; /* Расстояние между картинками 20 - высота 30 - ширина*/
    }

    /* Стили для картинок со скруглёнными краями в подвале */
    .rounded-footer-img {
        width: 90px; /* Аккуратный небольшой размер для подвала */
        height: 90px; /* Высота равна ширине */
        border-radius: 16px; /* Скругляет только углы (не делает круг, а делает мягкий квадрат) */
        border: 2px solid #ffffff; /* Добавили красивую белую рамку, как в шапке */
    }

}

/* 💻 Для планшетов и небольших ноутбуков (ширина от 601px до 1024px) */
@media (min-width: 601px) and (max-width: 1024px) {

    .header-images-container {
        gap: 26px; /* Делаем расстояние между иконками чуть меньше */
    }
    
    .round-img {
        width: 35px; /* Средний размер иконок для планшетов */
        height: 35px;
    }

    main {
        margin: 30px auto 10px;
        max-width: 95%; /* Карточка занимает 90% ширины экрана планшета */
    }

    .grid-card {
        width: calc(50% - 17px); /* Точный расчет: ровно 3 карточки в один ряд на ПК */
        max-width: 500px;
        min-width: 300px; /* МИНИМАЛЬНАЯ ШИРИНА: если экрану тесно, карточка уйдет вниз */
    }

    .hero-banner {
        /*height: 140px;*/ /* На смартфонах делаем баннер в два раза уже, чтобы он не занимал весь экран */
        margin-top: 48px; /* На смартфонах шапка ниже, поэтому уменьшаем отступ сверху */
    }

}





/* Показываем элемент только если устройство имеет сенсорный ввод (coarse) */
@media (pointer: coarse) {

    .game-card {
        display: flex;
        flex-direction: column;
        margin-top: auto;
      
    }

   

}