body.blue{
    background: radial-gradient(circle, var(--light_bg), var(--light_bg2));
}   

.card-container{
    position: relative;
    width: 30vw;
    height: 30vw;
    display:flex;
    flex-direction:column;
    align-items:center;
}

.card-container:nth-child(even) {
    transform: translateY(150px);
}

/* Raises the open card above neighbouring cards so its popup isn't covered */
.card-container.open {
    z-index: 10;
}

.card-background {
    top: 36%;
    left: 50%;
    width: 110%;
    height: 70%;
    position: absolute;
    transform: translate(-50%, -50%);
    background-image: url('assets/bg.png');
    background-size:contain;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 2;
    pointer-events: none;     /* background art should never block clicks */
}

.icon-container{
    margin-top: 15%;
    width:90%;
    height: 40%;
    z-index:3;
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.character-icon {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
    min-width: 0;
    z-index: 4;
}

.character-button{
    /* --btn-scale is set per button from the button_scales array in the HTML */
    width: calc(4vw * var(--btn-scale, 1));
    padding-bottom: calc(3vw * var(--btn-scale, 1));
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 10;              /* sits above the icons (z 4) and bg image (z 2) */
}
.trd-icon{
    width: 105%;
    height: 105%;
    transform: translateY(-0.6vw);
}

.textbackground{
    position: absolute;
    margin-top: 92%;
    width: 100%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
}


.card-tag{
    margin-top: 5%;
    width: 50%;
}

/* Popup wrapper (holds the popup image + close button) */
.character-popup {
    display: none;
    position: absolute;
    top: 20%;                 /* tweak to taste */
    left: 50%;
    transform: translateX(-50%);
    width: 80%;               /* tweak to taste */
    z-index: 20;
    pointer-events: none;     /* popup art doesn't block clicks on cards beneath it */
}

.popup-image {
    display: block;
    width: 100%;
}

/* Close button on the top-right corner of the popup */
.popup-close {
    position: absolute;
    top: 5%;                  /* move inward/outward to taste */
    right: 3%;
    width: 15%;                /* tweak to taste */
    min-width: 24px;          /* keeps it tappable on small screens */
    cursor: pointer;
    pointer-events: auto;     /* re-enable clicks (wrapper has them off) */
}

.card-container.open .character-popup {
    display: block;
}

@media (max-width:850px) {
    .grid-container {
        grid-template-columns: 1fr;
        gap: 10px;
        row-gap: 9vh;
        padding-bottom: 20vh;
    }

    .card-container{
        width: 80vw;
        height: 80vw;
    }

    .card-container:nth-child(even) {
        transform: translateY(0px);
    }

    :root {
        --cloud-scale: 0.8;
    }
    .character-button{
        width: calc(8vw * var(--btn-scale, 1));
        padding-bottom: calc(8vw * var(--btn-scale, 1));
    }
    .popup-close {
        width: 10%;
    }
}

@media (min-width:850px){
    .textbox p {
        font-size: 0.8vw;
    }
    .footer{
        width: 20vw;
    }
    #white{
        --cloud-scale: 1;
    }
    .grid-container {
        padding-bottom: calc(var(--grid-bottom-space) + 150px);
    }
    .clouds {
        width: 100px;
        position: absolute;
        z-index: 1;
        will-change: transform;
        top: calc(var(--cloud-v-start) + (var(--i, 0) * var(--cloud-v-gap)));
    }
}