/* --- Part 6: Share Cake Scene --- */

.share-cake-stage {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    z-index: 20;
}

/* Change only these values when you want to adjust both characters */
.share-cake-stage {
    --girl-width: 19vw;
    --boy-width: 19.5vw;
    --character-gap: 5vw;
    --characters-bottom: 12vh;
}

/* Both characters use the same bottom position */
.share-character {
    position: absolute;
    bottom: var(--characters-bottom);
    opacity: 0;
    z-index: 20;
}

/* Girl ends exactly 5vw before the boy begins */
.share-girl {
    left: calc(
        50% - (var(--character-gap) / 2) - var(--girl-width)
    );
    width: var(--girl-width);
}

/* Boy begins exactly 5vw after the girl ends */
.share-boy {
    left: calc(50% + (var(--character-gap) / 2));
    right: auto;
    width: var(--boy-width);
}

/* Dialogue boxes */
.share-dialogue {
    position: absolute;
    width: min(300px, 40vw);
    padding: 14px 22px;
    opacity: 0;
    border-radius: 28px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.15);
    font-family: 'Fredoka', sans-serif;
    text-align: center;
    z-index: 30;
}

.share-dialogue p {
    margin: 0;
    font-size: clamp(0.95rem, 1.3vw, 1.1rem);
    font-weight: 600;
    line-height: 1.42;
}

/* Girl has a warm pink dialogue box */
.girl-share-dialogue {
    top: auto;
    bottom: calc(100% + 18px);
    left: 50%;
    transform: translateX(-50%);
    border: 2px solid #ff78a8;
    background: rgba(255, 232, 241, 0.97);
    color: #b71855;
}

.girl-share-dialogue p {
    color: #b71855;
}

/* Boy has a soft blue dialogue box */
.boy-share-dialogue {
    top: auto;
    bottom: calc(100% + 18px);
    left: 50%;
    transform: translateX(-50%);
    border: 2px solid #75bff1;
    background: rgba(229, 246, 255, 0.97);
    color: #1877a8;
}

.boy-share-dialogue p {
    color: #1877a8;
}

/* Final rain-cloud world */
.rain-world {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 0;
    z-index: 50;
    pointer-events: none;
}

/* Full-screen soft cloud cover */
.cloud-layer {
    position: absolute;
    inset: -4%;
    height: auto;
    opacity: 0;
    overflow: hidden;
    background:
        radial-gradient(ellipse 22% 13% at 5% 10%, rgba(213, 230, 239, 0.98) 0 58%, transparent 70%),
        radial-gradient(ellipse 28% 16% at 22% 20%, rgba(237, 246, 250, 0.95) 0 57%, transparent 72%),
        radial-gradient(ellipse 25% 14% at 46% 7%, rgba(202, 221, 233, 0.96) 0 60%, transparent 73%),
        radial-gradient(ellipse 30% 18% at 74% 17%, rgba(232, 242, 248, 0.97) 0 58%, transparent 73%),
        radial-gradient(ellipse 26% 15% at 96% 8%, rgba(195, 216, 230, 0.96) 0 60%, transparent 73%),
        radial-gradient(ellipse 34% 19% at 8% 56%, rgba(219, 235, 243, 0.92) 0 54%, transparent 72%),
        radial-gradient(ellipse 27% 17% at 91% 53%, rgba(210, 229, 239, 0.94) 0 55%, transparent 73%),
        radial-gradient(ellipse 35% 20% at 42% 100%, rgba(225, 240, 246, 0.96) 0 56%, transparent 74%),
        linear-gradient(180deg, rgba(194, 218, 232, 0.52), rgba(232, 243, 248, 0.42));
    filter: blur(5px);
    transform: scale(1.08);
}

/* Extra soft cloud layers so the screen has no empty cloud gaps */
.cloud-layer::before,
.cloud-layer::after {
    position: absolute;
    inset: 0;
    content: "";
    background:
        radial-gradient(ellipse 26% 15% at 33% 39%, rgba(245, 250, 252, 0.72) 0 56%, transparent 73%),
        radial-gradient(ellipse 24% 14% at 64% 48%, rgba(194, 217, 231, 0.68) 0 58%, transparent 74%),
        radial-gradient(ellipse 25% 16% at 15% 83%, rgba(201, 222, 234, 0.76) 0 58%, transparent 74%),
        radial-gradient(ellipse 30% 18% at 82% 85%, rgba(240, 247, 250, 0.8) 0 58%, transparent 74%);
}

.cloud-layer::after {
    opacity: 0.62;
    filter: blur(14px);
    transform: scale(1.15);
}

/* Rain is removed completely */
.rain-lines {
    display: none;
}

/* Grass remains at the bottom */
.grass-layer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 20%;
    opacity: 0;
    transform: translateY(100%);
    background:
        linear-gradient(165deg, transparent 44%, #6fbb4c 45%, transparent 46%) 0 0 / 23px 70px,
        linear-gradient(195deg, transparent 44%, #4f9f3c 45%, transparent 46%) 8px 0 / 25px 62px,
        linear-gradient(180deg, #8acb5d, #4f963a);
    box-shadow: inset 0 16px 20px rgba(255, 255, 255, 0.22);
}

.grass-layer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 20%;
    opacity: 0;
    transform: translateY(100%);
    background:
        linear-gradient(165deg, transparent 44%, #6fbb4c 45%, transparent 46%) 0 0 / 23px 70px,
        linear-gradient(195deg, transparent 44%, #4f9f3c 45%, transparent 46%) 8px 0 / 25px 62px,
        linear-gradient(180deg, #8acb5d, #4f963a);
    box-shadow: inset 0 16px 20px rgba(255, 255, 255, 0.22);
}

@media (max-width: 768px) {
    .share-character {
        bottom: 11%;
        width: 34vw;
    }

    .share-girl {
        left: 13%;
    }

    .share-boy {
        right: 13%;
    }

    .share-dialogue {
        width: min(230px, 55vw);
        padding: 12px 16px;
    }

    .girl-share-dialogue {
        top: -28%;
    }

    .boy-share-dialogue {
        top: -28%;
    }
}