:root {
    --heart-width: 5vw;
    --heart-height: 5vh;
}

.main-p-babe {
    background-image: url("../files/img/babe/babe_background.webp");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;

    background-color: whitesmoke;
    text-align: center;
    margin: 0;
    overflow-wrap: anywhere;
    overflow: hidden;
    align-items: center;
    cursor: crosshair;
}

.cutie {
    position: fixed;
    width: 50vh;
    height: 50vh;
    border: 0.3vw pink solid;
    border-radius: 20%;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    z-index: 0;
}

.ily {
    position: fixed;
    color: pink;
    text-shadow: 0.1vh 0.1vh 0.5vh rgba(255, 80, 166, 0.8);
    transform: translateX(-50%);
    left: 50%;
    font-size: 10vh;
    z-index: 1;
}

.windowRef {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
}

.values {
    position: fixed;
    left: 7.5vw;
    top: 7.5vh;
    width: 85vw;
    height: 85vh;
    z-index: 9999;
}

#comboTracker {
    position: fixed;
    top: 2vw;
    right: 2vw;
    font-size: 5vw;
    color: pink;
    font-weight: bold;
    text-shadow: 0 0 1vw rgba(255, 80, 166, 0.8);
    opacity: 0;
    transform: translateX(50%);
    transition: transform 0.5s ease-in-out, opacity 0.5s ease;
}

#attributeContainer {
    position: fixed;
    display: flex;
    flex-direction: column;
    gap: 1vh;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.attribute {
    background-color: rgba(255, 80, 166, 0.7);
    color: whitesmoke;
    padding: 1vh 2vh;
    font-size: 2vw;
    border-radius: 1vw;
    box-shadow: 0 0.3vw 0.5vw rgba(0, 0, 0, 0.3);
    transform: translateX(100%);
    transition: transform 0.5s ease;
    animation: slideIn 0.5s ease-in-out forwards;
    z-index: 3;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

.heart {
    position: fixed;
    cursor: inherit;
    user-select: none;
    touch-action: none;
    display: flex;
    z-index: 10000;
    justify-content: center;
    color: pink; /* Gentle Blush Pink */
    padding: 1vh 2vh;
    font-weight: bold;
    text-shadow:
            0 0 2vh #FFAACF,
            0 0 1vh #FF80A6;
    opacity: 0;
    transform: scale(0.5) translate(-50%, -50%);
    transition: transform 0.3s ease, opacity 0.3s ease, font-size 0.2s;
}
.heart.combo {
    color: #FFAACF !important; /* Rosy Romance */
    font-weight: bold;
    text-shadow:
            0 0 1vh #E45685,
            0 0 2vh #FF8AB3;
}
.heart.combo.I {
    color: #D77ED9 !important; /* Peony Bloom */
    font-weight: bold;
    text-shadow:
            0 0 1vh #C366C3,
            0 0 2vh #E698E4;
}
.heart.combo.II {
    color: #A48BFF !important; /* Royal Lavender */
    font-weight: bold;
    text-shadow:
            0 0 1vh #8E74E8,
            0 0 2vh #B8A5FF;
}
.heart.combo.III {
    color: #74B3FF !important; /* Deep Sky Serenade */
    font-weight: bold;
    text-shadow:
            0 0 1vh #5E9DE5,
            0 0 2vh #8CC7FF;
}
.heart.combo.IV {
    color: #5ACFE0 !important; /* Ocean Jewel */
    font-weight: bold;
    text-shadow:
            0 0 1vh #46B7C8,
            0 0 2vh #74E3F0;
}
.heart.combo.V {
    color: #72D994 !important; /* Emerald Dream */
    font-weight: bold;
    text-shadow:
            0 0 1vh #5EC17D,
            0 0 2vh #8AEAAD;
}
.heart.combo.VI {
    color: #DDE758 !important; /* Golden Sunflower */
    font-weight: bold;
    text-shadow:
            0 0 1vh #C5D143,
            0 0 2vh #EBF274;
}
.heart.combo.VII {
    color: #F8D247 !important; /* Bright Sunfire Gold */
    font-weight: bold;
    text-shadow:
            0 0 1vh #E2BA39,
            0 0 2vh #FFE25D;
}
.heart.combo.VIII {
    color: #FFDF5F !important; /* Shining Rich Gold */
    font-weight: bold;
    text-shadow:
            0 0 1vh #FFCE33,
            0 0 2vh #FF80A6, /* Romantic Pink Glow */
            0 0 3vh #FFD94A;
}
.heart.combo.IX {
    color: #FFDF5F !important; /* Bright Medal Gold */
    font-weight: bold;
    text-shadow:
            0 0 1vh #FFCE33,
            0 0 2vh #FF80A6, /* Romantic Pink Glow */
            0 0 3vh #FFD94A;
}
.heart.combo.X {
    color: #FFE76A !important; /* Ultra Trophy Gold */
    font-weight: bold;
    text-shadow:
            0 0 1vh #FFD23F,
            0 0 2vh #FF94B5, /* Soft Romantic Pink Edge */
            0 0 3vh #FFEA70;
}

.heart.spawned {
    opacity: 0.92;
    transform: scale(1);
}
.heart:hover {
    transform: scale(1.2);
}
.heart.disappearing {
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.3s ease, transform 0.2s ease;
}
.heart.clicked {
    transform: scale(1.5);
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
}