/* Адаптация для маленьких экранов (ноутбуки, планшеты) */

/* Базовые настройки */
* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

/* Для маленьких ноутбуков (1024px - 1366px) */
@media (max-width: 1366px) {

    /* Главный контейнер */
    .intro-container {
        max-width: 100%;
        padding: 20px;
        transform: scale(0.85);
        transform-origin: center top;
    }

    /* Карточки персонажей */
    .card {
        width: 140px !important;
        height: 280px !important;
    }

    .card.center {
        width: 140px !important;
        height: 280px !important;
    }

    /* Изображения персонажей */
    .card .human {
        max-width: 100%;
        height: auto;
    }

    /* Шапка */
    header {
        max-width: 100%;
        padding: 24px 20px 0;
    }

    /* Секции контента */
    .container {
        max-width: 100%;
        padding: 0 20px;
    }

    /* Новости */
    .titan-news {
        padding: 60px 20px;
    }

    .titan-news__grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 20px;
    }

    /* Как начать играть */
    .how-to-play {
        padding: 60px 20px;
    }

    .how-to-play .cards {
        gap: 16px;
    }

    /* Социальные сети */
    .move-with-us {
        padding: 60px 20px;
    }

    .move-with-us .cards {
        gap: 16px;
    }

    /* FAQ */
    .faq {
        padding: 60px 20px;
        max-width: 100%;
    }

    .faq-body {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 20px;
    }

    /* Футер */
    footer {
        padding: 60px 20px 30px;
        max-width: 100%;
    }

    footer nav ul {
        gap: 30px;
    }
}

/* Для очень маленьких ноутбуков (до 1024px) */
@media (max-width: 1024px) {

    /* Еще больше уменьшаем карточки */
    .intro-container {
        transform: scale(0.75);
        padding: 10px;
    }

    .card {
        width: 120px !important;
        height: 240px !important;
    }

    .card.center {
        width: 120px !important;
        height: 240px !important;
    }

    /* Шапка */
    header {
        padding: 20px 16px 0;
    }

    /* Логотип */
    .logo {
        transform: translate(-80px, 10px) scale(3.5) !important;
    }

    /* Меню */
    .nav-item {
        font-size: 14px;
    }

    /* Кнопка пополнить */
    .donate-button {
        font-size: 14px;
        padding: 12px 16px;
    }

    /* Контент */
    .container {
        padding: 0 16px;
    }

    /* Секции */
    .titan-news,
    .how-to-play,
    .move-with-us,
    .faq {
        padding: 48px 16px;
    }

    /* Футер */
    footer {
        padding: 48px 16px 24px;
    }

    footer nav ul {
        flex-wrap: wrap;
        gap: 24px;
    }

    .nav-block {
        min-width: 200px;
    }
}

/* Для планшетов в альбомной ориентации (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {

    /* Карточки в 2 ряда */
    .intro-container {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 12px;
        transform: scale(1);
        padding: 20px;
    }

    .card {
        width: 100% !important;
        height: 220px !important;
    }

    .card.center {
        width: 100% !important;
        height: 220px !important;
        grid-column: 2 / 4;
        grid-row: 1 / 3;
    }
}

/* Исправление горизонтального скролла */
.intro-back,
.intro-overlay,
.intro-back-biker {
    max-width: 100vw;
}

/* Убираем переполнение */
.app,
main,
section {
    max-width: 100vw;
    overflow-x: hidden;
}