:root {
    --sky-top: #051026;
    --sky-mid: #16295e;
    --sky-low: #3b2d59;
    --moon-glow: #f9f0cc;
    --text-main: #f7f7fb;
    --accent-gold: #ffd97a;
    --accent-cyan: #97f8ff;
    --accent-rose: #ff9ebb;
    --you-color: #9ad7ff;
    --jake-color: #ffc86f;
    --ella-color: #bf9dff;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
    overflow: hidden;
    background: radial-gradient(circle at 20% 25%, #253f83 0%, transparent 35%),
        radial-gradient(circle at 85% 10%, #602d73 0%, transparent 42%),
        linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 48%, var(--sky-low) 100%);
    color: var(--text-main);
    font-family: "Manrope", "Segoe UI", sans-serif;
}

.scene {
    position: relative;
    height: 100vh;
    isolation: isolate;
}

#webgl-stars,
#heart-canvas,
#fx-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

#webgl-stars {
    z-index: 0;
}

#heart-canvas {
    z-index: 3;
}

#fx-canvas {
    z-index: 10;
}

.sky-glow,
.aurora {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.sky-glow {
    z-index: 1;
    background: radial-gradient(circle at 50% 100%, rgba(255, 223, 146, 0.2) 0%, transparent 45%);
}

.aurora {
    z-index: 2;
    opacity: 0.28;
    filter: blur(18px);
    background: linear-gradient(135deg,
            rgba(83, 191, 255, 0.22) 5%,
            rgba(89, 255, 221, 0.16) 30%,
            rgba(212, 152, 255, 0.2) 55%,
            rgba(255, 170, 205, 0.18) 80%);
    transform-origin: top center;
    animation: auroraShift 16s ease-in-out infinite alternate;
}

.season-overlay,
.grade-overlay,
.memory-sky,
.lantern-field {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.season-overlay {
    z-index: 2;
    opacity: 0.24;
    background:
        radial-gradient(circle at 15% 85%, rgba(255, 175, 104, 0.22), transparent 34%),
        radial-gradient(circle at 85% 18%, rgba(149, 222, 255, 0.18), transparent 38%);
    mix-blend-mode: screen;
}

.grade-overlay {
    z-index: 3;
    opacity: 0.58;
    background:
        radial-gradient(circle at 50% 6%, rgba(254, 250, 214, 0.2), transparent 50%),
        radial-gradient(circle at 50% 100%, rgba(9, 12, 26, 0.55), transparent 58%),
        linear-gradient(180deg, rgba(20, 14, 37, 0.2), rgba(5, 7, 17, 0.26));
}

.memory-sky {
    z-index: 9;
}

.memory-node {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fffef8 0%, #fdd5a0 45%, #ff8e8e 100%);
    box-shadow: 0 0 14px rgba(255, 220, 170, 0.85);
    opacity: 0;
    transform: scale(0.2);
}

.memory-line {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg, rgba(183, 235, 255, 0.1), rgba(255, 221, 188, 0.92), rgba(255, 210, 248, 0.18));
    transform-origin: 0 50%;
    opacity: 0;
}

.rocket-doodle {
    position: absolute;
    font-size: clamp(0.9rem, 2vw, 1.45rem);
    opacity: 0;
    filter: drop-shadow(0 0 10px rgba(255, 211, 154, 0.65));
}

.lantern-field {
    z-index: 8;
}

.lantern {
    position: absolute;
    width: 14px;
    height: 22px;
    border-radius: 6px;
    opacity: 0;
    background: linear-gradient(180deg, #fff2b4 0%, #ffd186 42%, #e28f5b 100%);
    box-shadow: 0 0 14px rgba(255, 182, 104, 0.75);
}

.lantern::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -8px;
    width: 2px;
    height: 9px;
    background: rgba(255, 226, 180, 0.7);
}

.title-block {
    position: absolute;
    z-index: 6;
    top: 1.2rem;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    width: min(92vw, 700px);
    text-wrap: balance;
    text-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}

.title-block h1 {
    margin: 0;
    font-family: "Cinzel", "Times New Roman", serif;
    font-size: clamp(1.8rem, 3.8vw, 3.4rem);
    letter-spacing: 0.04em;
    color: #fff5d4;
}

.title-block p {
    margin: 0.55rem 0 0;
    font-size: clamp(0.9rem, 1.8vw, 1.2rem);
    opacity: 0.92;
}

.hills {
    position: absolute;
    width: 140%;
    left: -20%;
    border-radius: 50%;
    pointer-events: none;
    transform-origin: bottom center;
}

.hill-back {
    z-index: 3;
    bottom: -28vh;
    height: 60vh;
    background: radial-gradient(circle at 48% 12%, #1f3b4a 0%, #152d40 62%, #12243a 100%);
    animation: hillBreath 12s ease-in-out infinite;
}

.hill-mid {
    z-index: 4;
    bottom: -32vh;
    height: 62vh;
    background: radial-gradient(circle at 60% 30%, #233051 0%, #1a2744 68%, #141f38 100%);
    animation: hillBreath 9s ease-in-out infinite;
}

.hill-front {
    z-index: 5;
    bottom: -38vh;
    height: 66vh;
    background: radial-gradient(circle at 40% 22%, #2e2f53 0%, #222443 68%, #161a32 100%);
    animation: hillBreath 7s ease-in-out infinite;
}

.stage {
    position: absolute;
    inset: 0;
    z-index: 11;
}

.narration {
    position: absolute;
    top: 17vh;
    left: 50%;
    transform: translateX(-50%);
    width: min(92vw, 760px);
    text-align: center;
    font-size: clamp(1rem, 2.1vw, 1.45rem);
    letter-spacing: 0.015em;
    color: #fef5d8;
    text-shadow: 0 0 14px rgba(255, 240, 201, 0.6), 0 8px 18px rgba(0, 0, 0, 0.45);
    opacity: 0;
}

.echo-pond {
    position: absolute;
    z-index: 10;
    left: 50%;
    bottom: 9vh;
    width: clamp(180px, 24vw, 280px);
    height: clamp(44px, 7vh, 78px);
    transform: translateX(-50%);
    border-radius: 999px;
    opacity: 0.58;
    background:
        radial-gradient(ellipse at 50% 40%, rgba(126, 214, 255, 0.42), rgba(100, 144, 225, 0.24), rgba(20, 30, 62, 0.14));
    box-shadow: inset 0 0 20px rgba(180, 236, 255, 0.24), 0 0 18px rgba(78, 143, 225, 0.3);
    filter: blur(0.3px);
}

.echo-pond::after {
    content: "";
    position: absolute;
    inset: 6px 22px;
    border: 1px solid rgba(180, 236, 255, 0.38);
    border-radius: inherit;
    opacity: 0.58;
}

.pond-ripple {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 66%;
    height: 54%;
    border-radius: 999px;
    border: 1px solid rgba(174, 236, 255, 0.7);
    transform: translate(-50%, -50%) scale(0.2);
    box-shadow: 0 0 14px rgba(174, 236, 255, 0.34);
}

.characters {
    position: absolute;
    bottom: 14.5vh;
    left: 50%;
    transform: translateX(-50%);
    width: min(90vw, 860px);
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: clamp(0.9rem, 2.5vw, 3.8rem);
}

.character {
    position: relative;
    width: clamp(90px, 12vw, 130px);
    height: clamp(170px, 23vh, 255px);
    transform-origin: center bottom;
    filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.45));
}

.character .glow {
    position: absolute;
    width: 80%;
    height: 22%;
    left: 10%;
    bottom: 6%;
    border-radius: 50%;
    filter: blur(12px);
    opacity: 0.3;
}

.character .head {
    position: absolute;
    width: 42%;
    aspect-ratio: 1;
    border-radius: 50%;
    left: 29%;
    top: 12%;
    z-index: 3;
    box-shadow: inset 0 -5px 10px rgba(0, 0, 0, 0.28), 0 6px 12px rgba(0, 0, 0, 0.18);
}

.character .hair {
    position: absolute;
    top: 8%;
    left: 23%;
    width: 54%;
    height: 26%;
    border-radius: 55% 55% 44% 44%;
    z-index: 2;
}

.character .eye {
    position: absolute;
    top: 41%;
    width: 13%;
    height: 13%;
    border-radius: 50%;
    background: #1e2030;
}

.character .eye.left {
    left: 29%;
}

.character .eye.right {
    right: 29%;
}

.character .body {
    position: absolute;
    width: 46%;
    height: 38%;
    left: 27%;
    top: 38%;
    z-index: 1;
    border-radius: 30px 30px 16px 16px;
}

.character .arm,
.character .leg {
    position: absolute;
    border-radius: 12px;
}

.character .arm {
    width: 14%;
    height: 26%;
    top: 42%;
    transform-origin: top center;
}

.character .arm.left {
    left: 18%;
}

.character .arm.right {
    right: 18%;
}

.character .leg {
    width: 13%;
    height: 24%;
    top: 73%;
}

.character .leg.left {
    left: 32%;
}

.character .leg.right {
    right: 32%;
}

.character .nameplate {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -16%;
    padding: 0.22rem 0.62rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: rgba(14, 18, 34, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.you .glow {
    background: color-mix(in srgb, var(--you-color) 70%, transparent);
}

.you .head,
.you .arm,
.you .leg {
    background: #ffd8bf;
}

.you .body {
    background: linear-gradient(180deg, #6bc3ff 0%, #438fcd 100%);
}

.you .hair {
    background: linear-gradient(165deg, #5e3826 0%, #3c2419 70%, #28180f 100%);
    clip-path: polygon(0 68%, 8% 30%, 34% 8%, 64% 6%, 100% 28%, 100% 84%, 70% 58%, 24% 56%);
}

.you .hair::after {
    content: "";
    position: absolute;
    right: 8%;
    top: 8%;
    width: 44%;
    height: 38%;
    border-radius: 50%;
    background: rgba(255, 220, 170, 0.22);
    transform: rotate(-24deg);
}

.jake .glow {
    background: color-mix(in srgb, var(--jake-color) 72%, transparent);
}

.jake .head,
.jake .arm,
.jake .leg {
    background: #ffe2c8;
}

.jake .body {
    background: linear-gradient(180deg, #ffc86f 0%, #da9349 100%);
}

.jake .hair {
    background: linear-gradient(180deg, #6f422e 0%, #523122 72%, #3a2318 100%);
    border-radius: 52% 60% 34% 40%;
}

.jake .hair::before {
    content: "";
    position: absolute;
    left: 10%;
    top: -8%;
    width: 34%;
    height: 52%;
    border-radius: 45% 55% 40% 40%;
    background: #5b3626;
    transform: rotate(-16deg);
}

.ella .glow {
    background: color-mix(in srgb, var(--ella-color) 72%, transparent);
}

.ella .head,
.ella .arm,
.ella .leg {
    background: #ffe6d8;
}

.ella .body {
    background: linear-gradient(180deg, #bf9dff 0%, #8367d4 100%);
    border-radius: 34px 34px 16px 16px;
}

.character.ella {
    width: clamp(78px, 10.6vw, 114px);
    height: clamp(152px, 21vh, 232px);
}

.ella .hair {
    top: 7%;
    left: 18%;
    width: 64%;
    height: 56%;
    border-radius: 52% 52% 36% 36%;
    background: linear-gradient(180deg, #ffe89f 0%, #f6cc67 42%, #d8a447 100%);
}

.ella .hair::before,
.ella .hair::after {
    content: "";
    position: absolute;
    width: 34%;
    height: 70%;
    bottom: -34%;
    border-radius: 24px;
    background: linear-gradient(180deg, #ffd882 0%, #d9a248 100%);
}

.ella .hair::before {
    left: -10%;
    transform: rotate(8deg);
}

.ella .hair::after {
    right: -10%;
    transform: rotate(-8deg);
}

.ella .eye {
    width: 14%;
    height: 14%;
}

.ella .eye::after {
    content: "";
    position: absolute;
    top: -40%;
    left: -18%;
    width: 140%;
    height: 30%;
    border-radius: 50%;
    border-top: 1px solid rgba(34, 18, 38, 0.68);
}

.ella .body::after {
    content: "";
    position: absolute;
    left: -11%;
    right: -11%;
    bottom: -14%;
    height: 30%;
    border-radius: 20px 20px 34px 34px;
    background: linear-gradient(180deg, #d7b8ff 0%, #9b80e8 100%);
}

.wish-orb,
.sprite {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.2);
}

.wish-orb {
    width: clamp(28px, 3vw, 38px);
    height: clamp(28px, 3vw, 38px);
    left: 50%;
    top: 46%;
    transform: translate(-50%, -50%) scale(0.2);
    background: radial-gradient(circle at 30% 30%, #fffde4 0%, #ffe292 45%, #ffa45e 100%);
    box-shadow: 0 0 16px rgba(255, 223, 126, 0.95), 0 0 44px rgba(255, 169, 103, 0.8);
    z-index: 8;
}

.sprite {
    width: clamp(20px, 2.1vw, 30px);
    height: clamp(20px, 2.1vw, 30px);
    left: 56%;
    top: 39%;
    background: radial-gradient(circle at 30% 30%, #f7ffff 0%, #94f0ff 45%, #59c5f4 100%);
    box-shadow: 0 0 14px rgba(140, 237, 255, 0.95), 0 0 30px rgba(98, 195, 255, 0.8);
    z-index: 8;
}

.speech {
    position: absolute;
    z-index: 11;
    min-width: min(42vw, 280px);
    max-width: min(60vw, 360px);
    padding: 0.65rem 0.9rem;
    font-size: clamp(0.86rem, 1.45vw, 1.03rem);
    line-height: 1.45;
    border-radius: 14px;
    color: #231a1b;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
    opacity: 0;
    transform: translateY(8px) scale(0.94);
    transform-origin: 50% 100%;
}

.speech::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    transform: rotate(45deg);
    background: rgba(255, 255, 255, 0.96);
}

.bubble-you {
    left: 19%;
    bottom: 45%;
}

.bubble-you::after {
    left: 18%;
    bottom: -7px;
}

.bubble-jake {
    left: 39%;
    bottom: 58%;
}

.bubble-jake::after {
    left: 40%;
    bottom: -7px;
}

.bubble-ella {
    right: 14%;
    bottom: 51%;
}

.bubble-ella::after {
    right: 21%;
    bottom: -7px;
}

.bubble-sprite {
    left: 52%;
    bottom: 67%;
    min-width: 180px;
    max-width: 240px;
    background: rgba(228, 252, 255, 0.98);
}

.bubble-sprite::after {
    left: 24px;
    bottom: -7px;
    background: rgba(228, 252, 255, 0.98);
}

.replay {
    position: absolute;
    bottom: 3.8vh;
    left: 50%;
    transform: translateX(-50%);
    z-index: 12;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: linear-gradient(135deg, rgba(255, 249, 221, 0.18), rgba(168, 226, 255, 0.2));
    color: #fff;
    padding: 0.68rem 1.2rem;
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    backdrop-filter: blur(8px);
    cursor: pointer;
    transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.audio-toggle {
    position: absolute;
    bottom: 3.8vh;
    right: 2.8vw;
    z-index: 13;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: linear-gradient(135deg, rgba(153, 225, 255, 0.24), rgba(255, 236, 178, 0.18));
    color: #fff;
    padding: 0.58rem 0.9rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    backdrop-filter: blur(8px);
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.audio-toggle:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.audio-toggle.active {
    background: linear-gradient(135deg, rgba(169, 247, 222, 0.3), rgba(255, 239, 190, 0.25));
    border-color: rgba(196, 255, 239, 0.65);
}

.replay:hover {
    transform: translateX(-50%) translateY(-2px);
    background: linear-gradient(135deg, rgba(255, 249, 221, 0.28), rgba(168, 226, 255, 0.28));
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
}

.replay:active {
    transform: translateX(-50%) translateY(0);
}

@keyframes auroraShift {
    0% {
        transform: translateY(-4%) scale(1.04) rotate(-1deg);
    }
    50% {
        transform: translateY(2%) scale(1.1) rotate(1.4deg);
    }
    100% {
        transform: translateY(-3%) scale(1.03) rotate(-1deg);
    }
}

@keyframes hillBreath {
    0%,
    100% {
        transform: scaleX(1) translateY(0);
    }
    50% {
        transform: scaleX(1.02) translateY(-6px);
    }
}

@media (max-width: 980px) {
    .characters {
        width: min(96vw, 680px);
        bottom: 18vh;
        gap: 0.4rem;
    }

    .bubble-you {
        left: 6%;
        bottom: 46%;
    }

    .bubble-jake {
        left: 32%;
        bottom: 59%;
    }

    .bubble-ella {
        right: 3%;
        bottom: 51%;
    }

    .bubble-sprite {
        left: 43%;
        bottom: 67%;
    }

    .replay {
        bottom: 4.8vh;
    }

    .audio-toggle {
        right: 2vw;
        bottom: 4.8vh;
        font-size: 0.75rem;
    }
}

@media (max-width: 680px) {
    .title-block {
        top: 0.7rem;
    }

    .title-block p {
        margin-top: 0.3rem;
    }

    .narration {
        top: 14.5vh;
        width: min(94vw, 440px);
    }

    .characters {
        width: 98vw;
        bottom: 19vh;
    }

    .echo-pond {
        width: min(58vw, 220px);
        bottom: 12vh;
    }

    .character .nameplate {
        font-size: 0.66rem;
        bottom: -18%;
    }

    .speech {
        min-width: min(67vw, 240px);
        max-width: min(78vw, 290px);
        font-size: 0.78rem;
        padding: 0.55rem 0.7rem;
    }

    .bubble-you {
        left: 2%;
        bottom: 43%;
    }

    .bubble-jake {
        left: 27%;
        bottom: 57%;
    }

    .bubble-ella {
        right: 0;
        bottom: 48%;
    }

    .bubble-sprite {
        left: 38%;
        bottom: 64%;
    }

    .replay {
        left: 41%;
    }

    .audio-toggle {
        right: 1.8vw;
        padding: 0.5rem 0.65rem;
    }
}