@media (max-width: 900px) {
    body {
        background-attachment: scroll;
    }
}

@media (min-width: 768px) {
    :root {
        --app-max-width: 640px;
        --menu-height: 96px;
        --content-bottom-space: calc(var(--menu-height) + var(--menu-gap) + var(--menu-safe-bottom) + 20px);
    }

    .panel.card {
        padding: 18px;
    }

    .home-stats-panel {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .home-zoo-preview-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .home-quick-panel {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .home-quick-card {
        min-height: 92px;
    }
}

@media (max-width: 520px) {
    #app {
        width: 100%;
    }

    .home-stats-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #screen-zoo .panel.card,
    #screen-shop .panel.card,
    #screen-missions .panel.card,
    #screen-minigames .panel.card,
    #screen-ranking .panel.card {
        overflow: hidden;
    }

    #screen-minigames .panel.card {
        padding-bottom: 16px;
    }

    #minigamesWrap {
        width: 100%;
        min-width: 0;
    }

    #wheelGame,
    #memoryGame {
        width: 100%;
        min-width: 0;
    }

    #wheelGame > div:first-of-type {
        width: min(100%, 260px) !important;
        height: auto !important;
        aspect-ratio: 1 / 1;
        margin: 0 auto 16px auto !important;
    }

    #wheel {
        width: 100% !important;
        height: 100% !important;
    }

    #wheelPointer {
        top: -10px !important;
        font-size: 24px !important;
    }

    #memoryBoard {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: min(100%, 320px);
    }

    #memoryBoard > * {
        min-width: 0;
    }

    #rankingList,
    #missionsList,
    #shopList,
    #zooList,
    #boxesList {
        min-width: 0;
    }

    .animal-row,
    .shop-item,
    .expedition-card,
    #rankingList li {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .animal-row {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .animal-left,
    .animal-text,
    .animal-actions {
        min-width: 0;
    }

    .animal-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .boxes {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .boxes button {
        min-width: 0;
    }

    .home-quick-panel {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 420px) {
    #memoryBoard {
        width: min(100%, 296px);
        gap: 7px !important;
    }

    .boxes {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 380px) {
    .home-stats-panel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #wheelGame > div:first-of-type {
        width: min(100%, 236px) !important;
    }

    #wheelPointer {
        font-size: 22px !important;
    }

    #memoryBoard {
        width: min(100%, 272px);
        gap: 6px !important;
    }

    .animal-actions {
        grid-template-columns: 1fr;
    }
}