#unity-container {
    container-type: size;
    container-name: game;
}

#badgeContainer {
    position: absolute;
    display: flex;
    box-sizing: border-box;
}

#badgeContainer .store-badge {
    display: block;
    text-decoration: none;
    min-height: 0;
    flex-shrink: 1;
}

#badgeContainer .store-badge img,
#badgeContainer .store-badge .arcade-placeholder {
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

#badgeContainer .arcade-placeholder {
    background-color: black;
    aspect-ratio: 374 / 125;
    border-radius: 8% / 24%;
    border: 1px solid #A6A6A6;
    box-sizing: border-box;
}

/* Layout from #unity-container size, not viewport. */
@container game (min-aspect-ratio: 1/1) {
    #badgeContainer {
        width: 22.5%;
        height: 32%;
        max-height: 32%;
        left: 1%;
        bottom: 50%;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 4%;
        overflow: hidden;
    }

    #badgeContainer .store-badge {
        max-height: calc((100% - 8%) / 3);
    }

    #gpBadge {
        width: 77.5%;
    }

    #iosBadge,
    #appleArcadeBadge {
        width: 67.5%;
        margin-left: 5%;
    }

    #badgeContainer .store-badge img,
    #badgeContainer .store-badge .arcade-placeholder {
        width: auto;
        height: 100%;
        max-height: 100%;
    }
}

@container game (max-aspect-ratio: 1/1) {
    #badgeContainer {
        width: 100%;
        height: 10%;
        max-height: 10%;
        bottom: 25%;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 2%;
        padding: 0 25%;
        overflow: hidden;
    }

    #badgeContainer .store-badge {
        width: 45%;
        height: 100%;
        max-height: 100%;
    }

    #badgeContainer .store-badge img,
    #badgeContainer .store-badge .arcade-placeholder {
        width: auto;
        height: 100%;
        max-height: 100%;
    }
}
