@media screen and (max-width: 768px) {
    body {
        font-size: 14px; /* Уменьшаем базовый размер шрифта */
    }

    .preloader h1 {
        font-size: 1.8rem; /* Меньше заголовок */
        margin-bottom: 15px;
    }

    .loading-bar {
        width: 90%;
        max-width: 300px;
        height: 15px; /* Тоньше полоса */
    }

    .top-bar {
        padding: 8px 5px; /* Меньше отступы */
        flex-wrap: wrap; /* Перенос строк при необходимости */
        gap: 5px; /* Меньше зазоры */
    }

    .resource {
        min-width: 50px; /* Уменьшаем ширину ресурса */
    }

    .resource-icon {
        font-size: 1.2rem; /* Меньше иконки */
    }

    .resource-value {
        font-size: 1rem; /* Меньше текст */
    }

    .energy-bar {
        height: 8px; /* Тоньше полоса энергии */
    }

    .passive-income {
        position: static; /* Убираем абсолютное позиционирование */
        transform: none;
        font-size: 0.8rem; /* Меньше шрифт */
        margin-top: 5px;
        text-align: center;
    }

    .mel-character {
        bottom: 0px; /* Высота нижней панели на мобильных (примерно) */
        margin-bottom: -15px; /* "Вогнать" Мела вниз, за нижнюю границу (меньше чем на ПК) */
        left: 5px; /* Меньший отступ слева */
    }

    .mel-character img {
        max-width: 250px; /* Уменьшенный размер для мобильных */
        max-height: 400px; /* Уменьшенный размер для мобильных */
    }

    .bottom-bar {
        flex-direction: column; /* Вертикальная ориентация кнопок */
        align-items: center;
        gap: 8px; /* Расстояние между кнопками */
        padding: 10px 5px;
    }

    .action-btn, .nav-btn {
        width: 90%; /* Кнопки на всю ширину */
        max-width: 300px; /* Максимальная ширина */
        padding: 10px 15px; /* Меньше внутренние отступы */
        font-size: 0.95rem;
    }

    .menu {
        width: 95%; /* Практически на всю ширину */
        max-width: 95%;
        max-height: 90vh; /* Больше высоты */
        padding: 15px 10px;
    }

    .menu h2 {
        font-size: 1.3rem; /* Меньше заголовок меню */
        margin-bottom: 10px;
    }

    .close-btn, .buy-btn {
        padding: 8px 12px; /* Меньше кнопки */
        font-size: 0.9rem;
    }

    .upgrade-item, .team-item, .achievement-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px; /* Отступ между элементами внутри */
    }

    .upgrade-cost, .team-cost, .achievement-desc {
        margin: 0; /* Убираем боковые отступы */
    }

    .buy-btn {
        align-self: stretch; /* Растягиваем кнопку на всю ширину */
        min-width: auto;
    }

    .setting-item {
        width: 100%;
    }

    .notifications-container {
        width: 90%; /* Шире контейнер */
        top: 10px;
        right: 5%;
        left: 5%;
        align-items: center; /* Центрируем уведомления */
    }

    .notification {
        width: 100%;
        padding: 8px 12px;
        font-size: 0.8rem;
    }
}

@media screen and (max-width: 480px) {
    body {
        font-size: 12px; /* Еще меньше шрифт */
    }

    .preloader h1 {
        font-size: 1.5rem;
    }

    .loading-bar {
        height: 12px;
    }

    .resource {
        min-width: 45px;
    }

    .resource-icon {
        font-size: 1.1rem;
    }

    .resource-value {
        font-size: 0.9rem;
    }

    .mel-character {
        bottom: 1px; /* Еще чуть выше для очень маленьких экранов */
        margin-bottom: -10px; /* Меньше "вогнан" */
        left: 3px; /* Еще меньше отступа */
    }

    .mel-character img {
        max-width: 200px; /* Еще меньше */
        max-height: 350px; /* Еще меньше */
    }

    .action-btn, .nav-btn {
        padding: 8px 10px;
        font-size: 0.9rem;
        max-width: none; /* Remove max-width constraint to fill parent */
    }

    .menu {
        padding: 10px 8px;
    }

    .menu h2 {
        font-size: 1.1rem;
    }

    .upgrade-item, .team-item, .achievement-item {
        padding: 8px;
        margin: 8px 0;
    }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    body {
        font-size: 15px;
    }

    .top-bar {
        padding: 10px;
    }

    .resource {
        min-width: 55px;
    }

    .mel-character {
        bottom: 0px; /* Пример */
        margin-bottom: -18px; /* Пример */
    }

    .mel-character img {
        max-width: 300px; /* Промежуточный размер */
        max-height: 500px; /* Промежуточный размер */
    }

    .bottom-bar {
        gap: 8px;
        padding: 12px 8px;
    }

    .action-btn, .nav-btn {
        padding: 10px 18px;
        font-size: 0.95rem;
        min-width: 90px;
    }

    .menu {
        width: 85%;
        max-width: 550px;
    }
}