/* =========================================================
   BIOLOGY BRAIN
   WATER BEYOND EARTH — HL
========================================================= */

:root {

    --bb-green:
        #1f7a45;

    --bb-green-dark:
        #155b33;

    --bb-green-soft:
        #eaf6ef;

    --ink:
        #1f2933;

    --muted:
        #667085;

    --line:
        #d9e2dc;

    --space:
        #0d0a18;

    --space-soft:
        #171224;

    --shadow:
        0 18px 45px
        rgba(29, 45, 36, .14);
}


/* =========================================================
   GLOBAL
========================================================= */

* {
    box-sizing:
        border-box;
}


html,
body {

    margin:
        0;

    width:
        100%;

    height:
        100%;

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    color:
        var(--ink);

    background:
        #edf1ee;

    overflow:
        hidden;
}


button {
    font:
        inherit;
}


/* =========================================================
   MODULE SHELL
========================================================= */

.module-shell {

    width:
        100%;

    height:
        100vh;

    display:
        grid;

    grid-template-rows:
        auto
        minmax(0, 1fr)
        auto;

    background:
        #ffffff;

    border:
        1px solid
        #dfe6e1;

    border-radius:
        22px;

    overflow:
        hidden;

    box-shadow:
        var(--shadow);
}


.module-shell:fullscreen,
.module-shell:-webkit-full-screen {

    width:
        100vw;

    height:
        100vh;

    border:
        0;

    border-radius:
        0;

    box-shadow:
        none;
}


/* =========================================================
   TOP BAR
========================================================= */

.module-topbar {

    min-height:
        72px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        18px;

    padding:
        10px 20px;

    border-bottom:
        1px solid
        #dfe6e1;

    background:
        #ffffff;

    z-index:
        50;
}


.module-brand {

    display:
        flex;

    align-items:
        center;

    gap:
        13px;
}

.brand-mark {
    width: 46px;
    height: 46px;

    flex: 0 0 46px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-mark img {
    width: 46px;
    height: 46px;

    display: block;
    object-fit: contain;
}


.module-eyebrow {

    margin:
        0 0 2px;

    color:
        var(--bb-green);

    font-size:
        .77rem;

    font-weight:
        900;

    letter-spacing:
        .09em;

    text-transform:
        uppercase;
}


.module-title {

    margin:
        0;

    font-size:
        clamp(
            1.2rem,
            2vw,
            1.55rem
        );

    line-height:
        1.1;
}


.module-meta {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;
}


.badge {

    padding:
        7px 11px;

    border:
        1px solid
        #d8e1dc;

    border-radius:
        999px;

    background:
        #f8faf8;

    font-size:
        .78rem;

    font-weight:
        800;
}


.hl-badge {

    border-color:
        #d8b04a;

    background:
        #fff4cc;

    color:
        #8a6200;
}


.icon-button {

    min-width:
        42px;

    height:
        42px;

    padding:
        0 13px;

    border:
        1px solid
        #d8e1dc;

    border-radius:
        11px;

    background:
        #ffffff;

    color:
        #334039;

    font-weight:
        800;

    cursor:
        pointer;
}


/* =========================================================
   WORKSPACE
========================================================= */

.workspace {

    position:
        relative;

    min-width:
        0;

    min-height:
        0;

    overflow:
        hidden;

    background:
        #0d0a18;
}


/* =========================================================
   SCENES
========================================================= */

.lesson-scene {

    position:
        absolute;

    inset:
        0;

    display:
        none;

    padding:
        28px 400px 24px 32px;

    color:
        #ffffff;

    overflow:
        hidden;
}


.lesson-scene.active {

    display:
        flex;

    flex-direction:
        column;
}


/* =========================================================
   SCENE HEADING
========================================================= */

.scene-heading {

    flex:
        0 0 auto;

    margin-bottom:
        12px;

    z-index:
        5;
}


.scene-kicker {

    color:
        #91dab3;

    font-size:
        .76rem;

    font-weight:
        900;

    letter-spacing:
        .11em;
}


.scene-heading h2 {

    margin:
        4px 0 3px;

    font-size:
        clamp(
            1.35rem,
            2.2vw,
            1.85rem
        );

    line-height:
        1.1;
}


.scene-heading p {

    margin:
        0;

    color:
        #bbb6c5;

    font-size:
        .94rem;
}


/* =========================================================
   STEP 1 — ORIGIN STAGE
========================================================= */

.origin-stage {

    position:
        relative;

    flex:
        1;

    min-height:
        0;

    overflow:
        hidden;

    border:
        1px solid
        rgba(255, 255, 255, .14);

    border-radius:
        24px;

    background:
        #0d0a18;
}


/* =========================================================
   SPACE BACKGROUND
========================================================= */

.space-background {

    position:
        absolute;

    inset:
        0;

    background-image:
        linear-gradient(
            rgba(9, 7, 19, .34),
            rgba(9, 7, 19, .55)
        ),
        url("assets/space-background.jpg");

    background-size:
        cover;

    background-position:
        center;

    opacity:
        .63;

    z-index:
        0;
}


.space-vignette {

    position:
        absolute;

    inset:
        0;

    background:
        radial-gradient(
            circle at 50% 46%,
            transparent 0 34%,
            rgba(6, 4, 14, .22) 65%,
            rgba(6, 4, 14, .66) 100%
        );

    z-index:
        1;

    pointer-events:
        none;
}


/* =========================================================
   COUNTER
========================================================= */

.delivery-counter {

    position:
        absolute;

    top:
        22px;

    right:
        22px;

    min-width:
        126px;

    padding:
        11px 14px;

    border:
        1px solid
        rgba(255, 255, 255, .08);

    border-radius:
        14px;

    background:
        rgba(11, 8, 24, .72);

    text-align:
        center;

    z-index:
        20;
}


.delivery-counter span {

    display:
        block;

    margin-bottom:
        3px;

    color:
        #a9a3b5;

    font-size:
        .7rem;

    font-weight:
        750;
}


.delivery-counter strong {

    color:
        #ffffff;

    font-size:
        1.25rem;
}


/* =========================================================
   ASTEROID AREA
========================================================= */

.asteroid-area {

    position:
        absolute;

    left:
        4%;

    top:
        27%;

    width:
        250px;

    z-index:
        10;
}


.asteroid-launch-zone {

    position:
        relative;

    width:
        110px;

    height:
        110px;

    margin:
        0 auto 12px;
}


.water-asteroid {

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    width:
        92px;

    height:
        auto;

    transform:
        translate(-50%, -50%);

    user-select:
        none;

    -webkit-user-drag:
        none;

    filter:
        drop-shadow(
            0 8px 12px
            rgba(0, 0, 0, .28)
        );

    z-index:
        3;
}


.water-asteroid.launching {

    animation:
        asteroidLaunch
        1.05s
        cubic-bezier(.45, .02, .55, 1)
        forwards;
}

@keyframes asteroidLaunch {

    0% {

        transform:
            translate(-50%, -50%)
            translate(0, 0)
            rotate(0deg)
            scale(1);

        opacity:
            1;
    }


    82% {

        opacity:
            1;
    }


    100% {

        transform:
            translate(-50%, -50%)
            translate(
                var(--launch-x, 430px),
                var(--launch-y, 40px)
            )
            rotate(300deg)
            scale(.42);

        opacity:
            0;
    }
}


.asteroid-info-card {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    padding:
        10px 13px;

    border:
        1px solid
        rgba(255,255,255,.14);

    border-radius:
        14px;

    background:
        rgba(12, 9, 25, .78);

    box-shadow:
        0 10px 24px
        rgba(0,0,0,.18);
}


.asteroid-info-icon {

    width:
        38px;

    height:
        38px;

    flex:
        0 0 auto;

    display:
        grid;

    place-items:
        center;

    border-radius:
        10px;

    background:
        rgba(43, 111, 170, .22);
}


.asteroid-info-card strong {

    display:
        block;

    font-size:
        .78rem;
}


.asteroid-info-card span:not(.asteroid-info-icon) {

    display:
        block;

    margin-top:
        2px;

    color:
        #a9a3b5;

    font-size:
        .67rem;
}


/* =========================================================
   EARTH SYSTEM
========================================================= */

.earth-system {

    position:
        absolute;

    left:
        52%;

    top:
        42%;

    width:
        clamp(
            320px,
            31vw,
            430px
        );

    aspect-ratio:
        1 / 1;

    transform:
        translate(-50%, -50%);

    z-index:
        8;
}


.earth-glow {

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    width:
        88%;

    height:
        88%;

    transform:
        translate(-50%, -50%);

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(239, 70, 31, .24),
            rgba(173, 35, 24, .09) 48%,
            transparent 72%
        );

    filter:
        blur(18px);

    transition:
        background 1.3s ease,
        opacity 1.3s ease;
}


/* =========================================================
   EARTH GLOW EVOLUTION
========================================================= */

.earth-system.delivery-1
.earth-glow {

    background:
        radial-gradient(
            circle,
            rgba(209, 78, 45, .18),
            rgba(89, 116, 134, .10) 50%,
            transparent 74%
        );
}


.earth-system.delivery-2
.earth-glow {

    background:
        radial-gradient(
            circle,
            rgba(160, 75, 47, .13),
            rgba(55, 129, 166, .15) 54%,
            transparent 75%
        );
}


.earth-system.delivery-3
.earth-glow {

    background:
        radial-gradient(
            circle,
            rgba(112, 80, 58, .10),
            rgba(46, 151, 201, .22) 56%,
            transparent 76%
        );
}


/* =========================================================
   EARTH EVOLUTION CONTAINER
========================================================= */

.earth-evolution {

    position:
        absolute;

    inset:
        7%;

    border-radius:
        50%;

    transform-origin:
        center center;

    z-index:
        2;
}

/* =========================================================
   EARTH EVOLUTION IMAGES
========================================================= */

.earth-evolution {
    position:
        absolute;

    inset:
        0;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;
}


.earth-stage {
    position:
        absolute;

    left:
        50%;

    top:
        50%;

    width:
        100%;

    height:
        100%;

    object-fit:
        contain;

    transform:
        translate(-50%, -50%);

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    user-select:
        none;

    -webkit-user-drag:
        none;

    z-index:
        2;
}


/*
    IMPORTANT:
    No opacity transition.

    We deliberately swap planet states instantly
    while the impact flash hides the change.
*/

.earth-stage.visible {
    opacity:
        1;

    visibility:
        visible;
}


/*
    The original Hadean SVG has more transparent
    padding inside its canvas than the three newer
    Earth states.

    Scale only the first asset so its visible planet
    diameter matches the others.
*/

#hadeanEarth {
    transform:
        translate(-50%, -50%)
        scale(1.18);
}


/*
    The later three Earth stages are already
    visually aligned.
*/

#earthStage1,
#earthStage2,
#earthStage3 {
    transform:
        translate(-50%, -50%)
        scale(1);
}

/* =========================================================
   OPTIONAL CROSSFADE TRANSITION HELPERS
========================================================= */

.earth-stage.fading-out {

    opacity:
        0;

    transform:
        translate(-50%, -50%)
        scale(1.015);
}


.earth-stage.fading-in {

    opacity:
        1;

    transform:
        translate(-50%, -50%)
        scale(1);
}

/* =========================================================
   EARTH IMPACT SHAKE
========================================================= */

.earth-evolution.impact {
    animation:
        earthImpactShake
        .52s
        ease;
}


@keyframes earthImpactShake {

    0%,
    100% {
        transform:
            translate(0, 0)
            rotate(0deg);
    }


    18% {
        transform:
            translate(-6px, 2px)
            rotate(-.9deg);
    }


    38% {
        transform:
            translate(7px, -4px)
            rotate(.9deg);
    }


    58% {
        transform:
            translate(-5px, -2px)
            rotate(-.6deg);
    }


    78% {
        transform:
            translate(4px, 2px)
            rotate(.4deg);
    }
}


/* =========================================================
   IMPACT FLASH
========================================================= */

.impact-flash {
    position:
        absolute;

    left:
        18%;

    top:
        40%;

    width:
        58px;

    height:
        58px;

    transform:
        translate(-50%, -50%)
        scale(.15);

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            #ffffff 0 10%,
            #fff4b5 13%,
            #ffd36b 22%,
            #ff8a3d 45%,
            rgba(255, 83, 35, .20) 66%,
            transparent 73%
        );

    opacity:
        0;

    pointer-events:
        none;

    z-index:
        40;
}


.impact-flash.active {
    animation:
        impactFlash
        .62s
        ease-out;
}


@keyframes impactFlash {

    0% {
        transform:
            translate(-50%, -50%)
            scale(.1);

        opacity:
            0;
    }


    18% {
        opacity:
            1;
    }


    42% {
        transform:
            translate(-50%, -50%)
            scale(2.4);

        opacity:
            1;
    }


    100% {
        transform:
            translate(-50%, -50%)
            scale(4.1);

        opacity:
            0;
    }
}


/* =========================================================
   IMPACT RING
========================================================= */

.impact-ring {
    position:
        absolute;

    left:
        18%;

    top:
        40%;

    width:
        36px;

    height:
        36px;

    transform:
        translate(-50%, -50%)
        scale(.25);

    border:
        4px solid
        rgba(255, 201, 101, .92);

    border-radius:
        50%;

    opacity:
        0;

    pointer-events:
        none;

    z-index:
        39;
}


.impact-ring.active {
    animation:
        impactRing
        .82s
        ease-out;
}


@keyframes impactRing {

    0% {
        transform:
            translate(-50%, -50%)
            scale(.3);

        opacity:
            .95;
    }


    100% {
        transform:
            translate(-50%, -50%)
            scale(5.6);

        opacity:
            0;
    }
}


/* =========================================================
   IMPACT PARTICLES
========================================================= */

.impact-particles {
    position:
        absolute;

    left:
        18%;

    top:
        40%;

    width:
        1px;

    height:
        1px;

    pointer-events:
        none;

    z-index:
        41;
}


.impact-particles span {
    position:
        absolute;

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        #ffc05b;

    box-shadow:
        0 0 9px
        rgba(255, 170, 77, .85);

    opacity:
        0;
}


.impact-particles.active span:nth-child(1) {
    animation: debris1 .68s ease-out;
}

.impact-particles.active span:nth-child(2) {
    animation: debris2 .68s ease-out;
}

.impact-particles.active span:nth-child(3) {
    animation: debris3 .68s ease-out;
}

.impact-particles.active span:nth-child(4) {
    animation: debris4 .68s ease-out;
}

.impact-particles.active span:nth-child(5) {
    animation: debris5 .68s ease-out;
}

.impact-particles.active span:nth-child(6) {
    animation: debris6 .68s ease-out;
}

.impact-particles.active span:nth-child(7) {
    animation: debris7 .68s ease-out;
}

.impact-particles.active span:nth-child(8) {
    animation: debris8 .68s ease-out;
}


@keyframes debris1 {

    15% {
        opacity: 1;
    }

    100% {
        transform:
            translate(-60px, -52px);

        opacity:
            0;
    }
}


@keyframes debris2 {

    15% {
        opacity: 1;
    }

    100% {
        transform:
            translate(-82px, 4px);

        opacity:
            0;
    }
}


@keyframes debris3 {

    15% {
        opacity: 1;
    }

    100% {
        transform:
            translate(-52px, 57px);

        opacity:
            0;
    }
}


@keyframes debris4 {

    15% {
        opacity: 1;
    }

    100% {
        transform:
            translate(8px, -73px);

        opacity:
            0;
    }
}


@keyframes debris5 {

    15% {
        opacity: 1;
    }

    100% {
        transform:
            translate(49px, -49px);

        opacity:
            0;
    }
}


@keyframes debris6 {

    15% {
        opacity: 1;
    }

    100% {
        transform:
            translate(70px, 8px);

        opacity:
            0;
    }
}


@keyframes debris7 {

    15% {
        opacity: 1;
    }

    100% {
        transform:
            translate(47px, 58px);

        opacity:
            0;
    }
}


@keyframes debris8 {

    15% {
        opacity: 1;
    }

    100% {
        transform:
            translate(-6px, 78px);

        opacity:
            0;
    }
}

/* =========================================================
   DELIVERY DOTS
========================================================= */

.delivery-progress {

    position:
        absolute;

    left:
        52%;

    bottom:
        145px;

    transform:
        translateX(-50%);

    display:
        flex;

    gap:
        10px;

    z-index:
        20;
}


.delivery-dot {

    width:
        13px;

    height:
        13px;

    border:
        2px solid
        rgba(255,255,255,.52);

    border-radius:
        50%;

    background:
        transparent;

    transition:
        background .3s ease,
        border-color .3s ease,
        transform .3s ease;
}


.delivery-dot.complete {

    border-color:
        #7fcda0;

    background:
        #2e9f61;

    transform:
        scale(1.12);
}


/* =========================================================
   TIMELINE
========================================================= */

.earth-timeline {

    position:
        absolute;

    left:
        20%;

    right:
        20%;

    bottom:
        62px;

    z-index:
        19;
}


.timeline-title {

    display:
        flex;

    justify-content:
        space-between;

    margin-bottom:
        7px;

    color:
        #aca6b6;

    font-size:
        .63rem;

    font-weight:
        750;
}


.timeline-track {

    position:
        relative;

    height:
        8px;

    border-radius:
        999px;

    background:
        rgba(255,255,255,.15);
}


.timeline-progress {

    position:
        absolute;

    left:
        0;

    top:
        0;

    width:
        0;

    height:
        100%;

    border-radius:
        inherit;

    background:
        linear-gradient(
            90deg,
            #d85a35,
            #6db7cf
        );

    transition:
        width .8s ease;
}


.timeline-marker {

    position:
        absolute;

    left:
        0;

    top:
        50%;

    width:
        18px;

    height:
        18px;

    transform:
        translate(-50%, -50%);

    border:
        3px solid
        #ffffff;

    border-radius:
        50%;

    background:
        var(--bb-green);

    box-shadow:
        0 0 0 5px
        rgba(31,122,69,.18);

    transition:
        left .8s ease;

    z-index:
        5;
}


.timeline-point {

    position:
        absolute;

    top:
        50%;

    width:
        8px;

    height:
        8px;

    transform:
        translate(-50%, -50%);

    border-radius:
        50%;

    background:
        rgba(255,255,255,.62);
}


.timeline-point.point-1 {
    left:
        0%;
}


.timeline-point.point-2 {
    left:
        33.333%;
}


.timeline-point.point-3 {
    left:
        66.666%;
}


.timeline-point.point-4 {
    left:
        100%;
}


.timeline-labels {

    display:
        flex;

    justify-content:
        space-between;

    margin-top:
        8px;

    color:
        #b9b4c1;

    font-size:
        .64rem;
}


.timeline-current {

    margin-top:
        8px;

    color:
        #ffffff;

    font-size:
        .72rem;

    font-weight:
        750;

    text-align:
        center;
}


/* =========================================================
   LAUNCH BUTTON
========================================================= */

.launch-button {

    position:
        absolute;

    left:
        52%;

    bottom:
        16px;

    transform:
        translateX(-50%);

    min-width:
        174px;

    min-height:
        42px;

    padding:
        0 17px;

    border:
        0;

    border-radius:
        11px;

    background:
        var(--bb-green);

    color:
        #ffffff;

    font-weight:
        850;

    cursor:
        pointer;

    box-shadow:
        0 8px 18px
        rgba(31,122,69,.22);

    z-index:
        25;
}


.launch-button:hover:not(:disabled) {

    background:
        #248d51;

    transform:
        translateX(-50%)
        translateY(-1px);
}


.launch-button:disabled {

    opacity:
        .5;

    cursor:
        default;
}


/* =========================================================
   FEEDBACK
========================================================= */

.impact-feedback {

    position:
        absolute;

    left:
        52%;

    top:
        16%;

    transform:
        translate(-50%, -8px);

    padding:
        8px 13px;

    border:
        1px solid
        rgba(131, 212, 165, .34);

    border-radius:
        999px;

    background:
        rgba(13, 10, 24, .88);

    color:
        #a9efc4;

    font-size:
        .72rem;

    font-weight:
        850;

    opacity:
        0;

    pointer-events:
        none;

    transition:
        opacity .25s ease,
        transform .25s ease;

    z-index:
        30;
}


.impact-feedback.visible {

    opacity:
        1;

    transform:
        translate(-50%, 0);
}


/* =========================================================
   PLACEHOLDERS
========================================================= */

.placeholder-scene {

    flex:
        1;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;
}


.placeholder-scene h2 {

    margin:
        8px 0;

    font-size:
        2rem;
}


.placeholder-scene p {

    max-width:
        540px;

    margin:
        0;

    color:
        #aaa4b3;
}


/* =========================================================
   INSTRUCTION POPUP
========================================================= */

.instruction-popup {

    position:
        absolute;

    top:
        20px;

    right:
        20px;

    width:
        355px;

    border:
        1px solid
        #d9e5dd;

    border-radius:
        18px;

    overflow:
        hidden;

    background:
        rgba(255,255,255,.98);

    color:
        var(--ink);

    box-shadow:
        0 18px 42px
        rgba(0,0,0,.22);

    z-index:
        50;
}


.instruction-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        12px 14px 11px 16px;

    background:
        var(--bb-green-soft);

    border-bottom:
        1px solid
        #dbe9df;

    cursor:
        grab;

    user-select:
        none;
}


.instruction-step {

    color:
        var(--bb-green-dark);

    font-size:
        .76rem;

    font-weight:
        900;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;
}


.popup-actions {

    display:
        flex;

    gap:
        6px;
}


.popup-action {

    width:
        30px;

    height:
        30px;

    border:
        0;

    border-radius:
        8px;

    background:
        transparent;

    color:
        #536057;

    cursor:
        pointer;
}


.popup-action:hover {

    background:
        rgba(31,122,69,.1);
}


.instruction-body {

    padding:
        17px 19px 18px;
}


.instruction-body h2 {

    margin:
        0 0 9px;

    font-size:
        1.16rem;
}


.instruction-body p {

    margin:
        0;

    color:
        #4e5b53;

    font-size:
        .9rem;

    line-height:
        1.5;
}


.instruction-goal {

    margin-top:
        14px;

    padding:
        11px 13px;

    border:
        1px solid
        #e0e8e3;

    border-radius:
        12px;

    background:
        #f7faf8;

    color:
        #435047;

    font-size:
        .84rem;

    line-height:
        1.4;
}


.instruction-goal strong {

    display:
        block;

    margin-bottom:
        3px;
}


.instruction-restore {

    position:
        absolute;

    top:
        22px;

    right:
        22px;

    display:
        none;

    padding:
        9px 13px;

    border:
        1px solid
        #d8e3db;

    border-radius:
        999px;

    background:
        #ffffff;

    color:
        var(--bb-green-dark);

    font-weight:
        850;

    cursor:
        pointer;

    z-index:
        49;
}


/* =========================================================
   FOOTER
========================================================= */

.module-footer {

    min-height:
        60px;

    display:
        grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items:
        center;

    gap:
        16px;

    padding:
        8px 18px;

    border-top:
        1px solid
        #d9e2dc;

    background:
        #ffffff;

    z-index:
        50;
}


.footer-left,
.footer-right {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;
}


.footer-right {

    justify-content:
        flex-end;
}


.control-button {

    min-height:
        40px;

    padding:
        0 14px;

    border:
        1px solid
        #d9e2dc;

    border-radius:
        11px;

    background:
        #ffffff;

    color:
        #334039;

    font-weight:
        800;

    cursor:
        pointer;
}


.control-button.primary {

    border-color:
        var(--bb-green);

    background:
        var(--bb-green);

    color:
        #ffffff;
}


.control-button.primary:disabled {

    opacity:
        .38;

    cursor:
        not-allowed;
}


.module-progress {

    display:
        flex;

    gap:
        8px;
}


.progress-dot {

    width:
        10px;

    height:
        10px;

    border:
        2px solid
        #9db7a6;

    border-radius:
        50%;

    background:
        #ffffff;
}


.progress-dot.active {

    border-color:
        var(--bb-green);

    background:
        var(--bb-green);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1200px) {

    .lesson-scene {

        padding-right:
            330px;
    }


    .instruction-popup {

        width:
            300px;
    }


    .earth-system {

        width:
            clamp(
                290px,
                30vw,
                370px
            );
    }


    .asteroid-area {

        left:
            3%;

        width:
            220px;
    }


    .earth-timeline {

        left:
            17%;

        right:
            17%;
    }
}


@media (max-height: 760px) {

    .module-topbar {

        min-height:
            62px;
    }


    .lesson-scene {

        padding-top:
            18px;

        padding-bottom:
            16px;
    }


    .scene-heading {

        margin-bottom:
            7px;
    }


    .earth-system {

        width:
            min(
                330px,
                38vh
            );
    }


    .delivery-progress {

        bottom:
            128px;
    }


    .earth-timeline {

        bottom:
            55px;
    }


    .launch-button {

        bottom:
            9px;
    }
}


@media (max-width: 820px) {

    .lesson-scene {

        padding:
            18px;
    }


    .instruction-popup {

        width:
            min(
                320px,
                calc(100% - 28px)
            );

        right:
            14px;

        top:
            14px;
    }


    .asteroid-area {

        left:
            4%;

        top:
            30%;

        width:
            175px;
    }


    .asteroid-info-card {

        font-size:
            .7rem;
    }


    .earth-system {

        left:
            59%;

        width:
            min(
                330px,
                44vw
            );
    }


    .earth-timeline {

        left:
            8%;

        right:
            8%;
    }
}

/* =========================================================
   STEP 2 — CONDITIONS FOR LIQUID WATER
========================================================= */

.conditions-stage {

    position:
        relative;

    flex:
        1;

    min-height:
        0;

    overflow:
        hidden;

    border:
        1px solid
        rgba(255, 255, 255, .14);

    border-radius:
        24px;

    background:
        #0d0a18;
}


/* =========================================================
   STEP 2 — SPACE BACKGROUND
========================================================= */

.conditions-space {

    position:
        absolute;

    inset:
        0;

    background-image:
        linear-gradient(
            rgba(9, 7, 19, .42),
            rgba(9, 7, 19, .62)
        ),
        url("assets/space-background.jpg");

    background-size:
        cover;

    background-position:
        center;

    opacity:
        .72;

    z-index:
        0;
}


.conditions-vignette {

    position:
        absolute;

    inset:
        0;

    background:
        radial-gradient(
            circle at 50% 48%,
            transparent 0 28%,
            rgba(6, 4, 14, .15) 58%,
            rgba(6, 4, 14, .68) 100%
        );

    pointer-events:
        none;

    z-index:
        1;
}


/* =========================================================
   STEP 2 — CENTRAL PLANET
========================================================= */

.conditions-planet-system {

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    width:
        clamp(
            210px,
            21vw,
            300px
        );

    aspect-ratio:
        1 / 1;

    transform:
        translate(-50%, -50%);

    display:
        grid;

    place-items:
        center;

    z-index:
        5;
}


.conditions-planet-glow {

    position:
        absolute;

    width:
        95%;

    height:
        95%;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            rgba(64, 151, 202, .22),
            rgba(41, 105, 151, .08) 50%,
            transparent 72%
        );

    filter:
        blur(18px);

    transition:
        background .6s ease,
        transform .6s ease;
}


.conditions-planet {

    position:
        relative;

    width:
        83%;

    height:
        83%;

    object-fit:
        contain;

    user-select:
        none;

    -webkit-user-drag:
        none;

    pointer-events:
        none;

    filter:
        drop-shadow(
            0 0 18px
            rgba(79, 170, 215, .28)
        );

    z-index:
        3;
}


.conditions-planet-system.complete
.conditions-planet-glow {

    background:
        radial-gradient(
            circle,
            rgba(74, 201, 127, .34),
            rgba(39, 142, 86, .12) 52%,
            transparent 74%
        );

    transform:
        scale(1.12);
}


.planet-status {

    position:
        absolute;

    left:
        50%;

    bottom:
        -8px;

    transform:
        translateX(-50%);

    min-width:
        190px;

    padding:
        8px 12px;

    border:
        1px solid
        rgba(255, 255, 255, .13);

    border-radius:
        999px;

    background:
        rgba(9, 7, 20, .82);

    color:
        #c9c4d1;

    font-size:
        .71rem;

    font-weight:
        800;

    text-align:
        center;

    white-space:
        nowrap;

    transition:
        color .3s ease,
        border-color .3s ease;

    z-index:
        6;
}


.conditions-planet-system.complete
.planet-status {

    color:
        #9de7ba;

    border-color:
        rgba(110, 218, 151, .32);
}


/* =========================================================
   STEP 2 — CONDITION CARDS
========================================================= */

.condition-card {

    position:
        absolute;

    width:
        230px;

    min-height:
        82px;

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    padding:
        12px 14px;

    border:
        1px solid
        rgba(255, 255, 255, .16);

    border-radius:
        16px;

    background:
        rgba(13, 10, 28, .86);

    color:
        #ffffff;

    text-align:
        left;

    cursor:
        pointer;

    box-shadow:
        0 10px 30px
        rgba(0, 0, 0, .20);

    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease;

    z-index:
        10;
}


.condition-card:hover {

    transform:
        translateY(-2px);

    border-color:
        rgba(136, 220, 169, .42);

    background:
        rgba(20, 16, 37, .95);
}


.temperature-card {

    left:
        50%;

    top:
        6%;

    transform:
        translateX(-50%);
}


.temperature-card:hover {

    transform:
        translateX(-50%)
        translateY(-2px);
}


.gravity-card {

    left:
        5%;

    bottom:
        13%;
}


.stellar-card {

    right:
        5%;

    bottom:
        13%;
}


.condition-card-icon {

    width:
        44px;

    height:
        44px;

    flex:
        0 0 auto;

    display:
        grid;

    place-items:
        center;

    border-radius:
        12px;

    background:
        rgba(255, 255, 255, .08);

    font-size:
        1.4rem;
}


.condition-card-copy {

    min-width:
        0;

    flex:
        1;
}


.condition-card-copy strong {

    display:
        block;

    margin-bottom:
        3px;

    font-size:
        .84rem;
}


.condition-card-copy span {

    display:
        block;

    color:
        #aaa4b4;

    font-size:
        .68rem;

    line-height:
        1.3;
}


.condition-check {

    width:
        25px;

    height:
        25px;

    flex:
        0 0 auto;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        #31925a;

    color:
        white;

    font-size:
        .72rem;

    font-weight:
        900;

    opacity:
        0;

    transform:
        scale(.7);

    transition:
        opacity .25s ease,
        transform .25s ease;
}


.condition-card.complete {

    border-color:
        rgba(109, 216, 151, .48);

    background:
        rgba(22, 68, 46, .74);
}


.condition-card.complete
.condition-check {

    opacity:
        1;

    transform:
        scale(1);
}


/* =========================================================
   STEP 2 — INVESTIGATION WINDOWS
========================================================= */

.condition-investigation {

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    width:
        min(
            680px,
            84%
        );

    min-height:
        355px;

    transform:
        translate(-50%, -50%)
        scale(.96);

    padding:
        22px;

    border:
        1px solid
        rgba(255, 255, 255, .18);

    border-radius:
        20px;

    background:
        rgba(13, 10, 27, .97);

    box-shadow:
        0 24px 70px
        rgba(0, 0, 0, .48);

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transition:
        opacity .22s ease,
        transform .22s ease,
        visibility .22s;

    z-index:
        40;
}


.condition-investigation.open {

    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;

    transform:
        translate(-50%, -50%)
        scale(1);
}


.condition-close {

    position:
        absolute;

    right:
        14px;

    top:
        14px;

    width:
        32px;

    height:
        32px;

    border:
        none;

    border-radius:
        8px;

    background:
        rgba(255, 255, 255, .07);

    color:
        #d9d5dd;

    font-size:
        1.2rem;

    cursor:
        pointer;
}


.condition-close:hover {

    background:
        rgba(255, 255, 255, .13);
}


.investigation-header {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    margin-bottom:
        21px;
}


.investigation-icon {

    width:
        46px;

    height:
        46px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        12px;

    background:
        rgba(255, 255, 255, .08);

    font-size:
        1.5rem;
}


.investigation-header strong {

    display:
        block;

    font-size:
        1rem;
}


.investigation-header span:not(.investigation-icon) {

    display:
        block;

    margin-top:
        3px;

    color:
        #aaa4b4;

    font-size:
        .72rem;
}


/* =========================================================
   STEP 2 — TEMPERATURE INVESTIGATION
========================================================= */

.temperature-options {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    gap:
        14px;
}


.temperature-option {

    min-height:
        190px;

    padding:
        16px 10px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    border:
        1px solid
        rgba(255, 255, 255, .12);

    border-radius:
        16px;

    background:
        rgba(255, 255, 255, .04);

    color:
        white;

    cursor:
        pointer;

    transition:
        background .2s ease,
        transform .2s ease,
        border-color .2s ease;
}


.temperature-option:hover {

    transform:
        translateY(-3px);

    background:
        rgba(255, 255, 255, .07);
}


.temperature-option.correct {

    border-color:
        rgba(94, 218, 143, .6);

    background:
        rgba(44, 132, 82, .23);
}


.temperature-option.incorrect {

    animation:
        conditionWrong
        .38s ease;
}


@keyframes conditionWrong {

    25% {
        transform:
            translateX(-5px);
    }

    50% {
        transform:
            translateX(5px);
    }

    75% {
        transform:
            translateX(-3px);
    }
}


.temperature-world {

    width:
        82px;

    height:
        82px;

    display:
        block;

    border-radius:
        50%;

    box-shadow:
        inset -14px -12px 20px
        rgba(0, 0, 0, .24),

        0 7px 20px
        rgba(0, 0, 0, .2);
}


.hot-world {

    background:
        radial-gradient(
            circle at 35% 30%,
            #ffd56f,
            #df6037 48%,
            #67231d
        );
}


.habitable-world {

    background:
        radial-gradient(
            circle at 34% 30%,
            #82d083,
            #3f9fc9 48%,
            #174c76
        );
}


.cold-world {

    background:
        radial-gradient(
            circle at 34% 30%,
            #ffffff,
            #a7d4e9 50%,
            #507b9e
        );
}


.temperature-option strong {

    font-size:
        .8rem;
}


.temperature-option > span:last-child {

    color:
        #aaa4b4;

    font-size:
        .67rem;

    text-align:
        center;
}


/* =========================================================
   STEP 2 — INVESTIGATION FEEDBACK
========================================================= */

.investigation-feedback {

    margin-top:
        16px;

    min-height:
        38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        8px 12px;

    border:
        1px solid
        rgba(255, 255, 255, .09);

    border-radius:
        10px;

    background:
        rgba(255, 255, 255, .035);

    color:
        #b9b4c2;

    font-size:
        .72rem;

    font-weight:
        700;

    text-align:
        center;

    line-height:
        1.35;
}


.investigation-feedback.success {

    border-color:
        rgba(101, 212, 145, .24);

    background:
        rgba(48, 130, 80, .15);

    color:
        #a7e9be;
}


/* =========================================================
   STEP 2 — GRAVITY INVESTIGATION
========================================================= */

.gravity-demo {

    display:
        grid;

    grid-template-columns:
        1fr
        1fr;

    gap:
        22px;
}


.gravity-space {

    position:
        relative;

    min-height:
        245px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(255, 255, 255, .10);

    border-radius:
        16px;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(62, 96, 144, .13),
            rgba(5, 4, 13, .8)
        );
}


.gravity-demo-planet {

    position:
        absolute;

    left:
        50%;

    top:
        55%;

    width:
        100px;

    height:
        100px;

    transform:
        translate(-50%, -50%);

    border-radius:
        50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #709ab3,
            #39566c 55%,
            #192a38
        );

    box-shadow:
        0 0 24px
        rgba(76, 151, 190, .22);
}


.gravity-water-molecule {

    position:
        absolute;

    width:
        42px;

    height:
        25px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        999px;

    background:
        rgba(95, 193, 234, .86);

    color:
        white;

    font-size:
        .58rem;

    font-weight:
        900;

    transition:
        transform 1.25s ease,
        opacity 1.25s ease;
}


.gravity-water-1 {

    left:
        22%;

    top:
        30%;
}


.gravity-water-2 {

    right:
        18%;

    top:
        26%;
}


.gravity-water-3 {

    left:
        18%;

    bottom:
        18%;
}


.gravity-water-4 {

    right:
        16%;

    bottom:
        23%;
}


.gravity-space.low-gravity
.gravity-water-1 {

    transform:
        translate(-130px, -90px);

    opacity:
        0;
}


.gravity-space.low-gravity
.gravity-water-2 {

    transform:
        translate(130px, -110px);

    opacity:
        0;
}


.gravity-space.low-gravity
.gravity-water-3 {

    transform:
        translate(-145px, 100px);

    opacity:
        0;
}


.gravity-space.low-gravity
.gravity-water-4 {

    transform:
        translate(145px, 90px);

    opacity:
        0;
}


.gravity-space.strong-gravity
.gravity-water-molecule {

    transform:
        translate(0, 0);

    opacity:
        1;
}


.gravity-controls {

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;
}


.gravity-slider-labels {

    display:
        flex;

    justify-content:
        space-between;

    margin-bottom:
        8px;

    color:
        #aaa4b4;

    font-size:
        .65rem;
}


.gravity-slider {

    width:
        100%;

    accent-color:
        var(--bb-green);

    cursor:
        pointer;
}


.investigation-action {

    margin-top:
        20px;

    min-height:
        41px;

    border:
        none;

    border-radius:
        10px;

    background:
        var(--bb-green);

    color:
        white;

    font-weight:
        850;

    cursor:
        pointer;
}


.investigation-action:hover {

    background:
        #268c52;
}


/* =========================================================
   STEP 2 — STELLAR ENVIRONMENT
========================================================= */

.stellar-comparison {

    display:
        grid;

    grid-template-columns:
        1fr
        1fr;

    gap:
        16px;
}


.stellar-option {

    padding:
        14px;

    border:
        1px solid
        rgba(255, 255, 255, .12);

    border-radius:
        16px;

    background:
        rgba(255, 255, 255, .035);

    color:
        white;

    cursor:
        pointer;

    transition:
        background .2s ease,
        border-color .2s ease,
        transform .2s ease;
}


.stellar-option:hover {

    transform:
        translateY(-2px);

    background:
        rgba(255, 255, 255, .07);
}


.stellar-option.visited {

    border-color:
        rgba(103, 211, 145, .35);
}


.stellar-demo {

    position:
        relative;

    height:
        155px;

    margin-bottom:
        10px;

    overflow:
        hidden;

    border-radius:
        12px;

    background:
        radial-gradient(
            circle at 25% 50%,
            rgba(255, 202, 86, .08),
            #080713 68%
        );
}


.demo-star {

    position:
        absolute;

    left:
        22%;

    top:
        50%;

    width:
        70px;

    height:
        70px;

    transform:
        translate(-50%, -50%);

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            #fff4b1,
            #ffb13e 47%,
            #de632e 70%,
            transparent 72%
        );
}


.active-star {

    box-shadow:
        0 0 38px
        rgba(255, 114, 52, .62);
}


.demo-planet {

    position:
        absolute;

    right:
        19%;

    top:
        50%;

    width:
        52px;

    height:
        52px;

    transform:
        translateY(-50%);

    border-radius:
        50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #65c38f,
            #387fa5 50%,
            #1d3f60
        );
}


.stellar-radiation {

    position:
        absolute;

    left:
        37%;

    right:
        31%;

    top:
        50%;

    display:
        flex;

    flex-direction:
        column;

    gap:
        9px;

    transform:
        translateY(-50%);
}


.stellar-radiation i {

    display:
        block;

    height:
        2px;

    background:
        linear-gradient(
            to right,
            rgba(255, 111, 54, .8),
            transparent
        );

    animation:
        stellarPulse
        1s ease-in-out
        infinite;
}


@keyframes stellarPulse {

    50% {

        transform:
            translateX(9px);

        opacity:
            .4;
    }
}


.stellar-option strong {

    display:
        block;

    font-size:
        .78rem;
}


.stellar-option > span {

    display:
        block;

    margin-top:
        4px;

    color:
        #aaa4b4;

    font-size:
        .67rem;
}


/* =========================================================
   STEP 2 — COMPLETE MESSAGE
========================================================= */

.conditions-complete-message {

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    width:
        min(
            520px,
            72%
        );

    transform:
        translate(-50%, -50%)
        scale(.92);

    padding:
        16px 18px;

    border:
        1px solid
        rgba(99, 219, 146, .33);

    border-radius:
        16px;

    background:
        rgba(12, 31, 22, .94);

    text-align:
        center;

    box-shadow:
        0 18px 55px
        rgba(0, 0, 0, .34);

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transition:
        opacity .32s ease,
        transform .32s ease,
        visibility .32s;

    z-index:
        50;
}


.conditions-complete-message.visible {

    opacity:
        1;

    visibility:
        visible;

    transform:
        translate(-50%, -50%)
        scale(1);
}


.conditions-complete-message strong {

    display:
        block;

    margin-bottom:
        6px;

    color:
        #a7e9be;

    font-size:
        .92rem;
}


.conditions-complete-message span {

    display:
        block;

    color:
        #c5d4ca;

    font-size:
        .75rem;

    line-height:
        1.45;
}


/* =========================================================
   STEP 2 — RESPONSIVE
========================================================= */

@media (max-width: 1200px) {

    .condition-card {

        width:
            195px;
    }


    .conditions-planet-system {

        width:
            230px;
    }
}


@media (max-width: 820px) {

    .conditions-stage {

        overflow-y:
            auto;
    }


    .condition-card {

        width:
            175px;

        min-height:
            72px;
    }


    .condition-card-icon {

        width:
            36px;

        height:
            36px;
    }


    .gravity-demo {

        grid-template-columns:
            1fr;
    }


    .temperature-options {

        gap:
            8px;
    }


    .temperature-world {

        width:
            62px;

        height:
            62px;
    }
}
/* =========================================================
   STEP 3 — EXOPLANET SEARCH
========================================================= */

.exoplanet-search-stage {

    position:
        relative;

    flex:
        1;

    min-height:
        0;

    overflow:
        hidden;

    border:
        1px solid
        rgba(255, 255, 255, .14);

    border-radius:
        24px;

    background:
        #090713;
}


/* =========================================================
   STEP 3 — SPACE BACKGROUND
========================================================= */

.exoplanet-space-background {

    position:
        absolute;

    inset:
        0;

    background-image:
        linear-gradient(
            rgba(7, 5, 18, .30),
            rgba(7, 5, 18, .62)
        ),
        url("assets/space-background.jpg");

    background-size:
        cover;

    background-position:
        center;

    opacity:
        .72;

    z-index:
        0;
}


.exoplanet-space-vignette {

    position:
        absolute;

    inset:
        0;

    background:
        radial-gradient(
            circle at 53% 44%,
            transparent 0 28%,
            rgba(6, 4, 15, .18) 56%,
            rgba(4, 3, 11, .72) 100%
        );

    pointer-events:
        none;

    z-index:
        1;
}


/* =========================================================
   STEP 3 — SEARCH COUNTER
========================================================= */

.planet-search-counter {

    position:
        absolute;

    top:
        6px;

    right:
        18px;

    min-width:
        132px;

    padding:
        9px 13px;

    border:
        1px solid
        rgba(255, 255, 255, .10);

    border-radius:
        14px;

    background:
        rgba(10, 7, 22, .88);

    text-align:
        center;

    box-shadow:
        0 8px 24px
        rgba(0, 0, 0, .20);

    z-index:
        35;
}


.planet-search-counter span {

    display:
        block;

    margin-bottom:
        2px;

    color:
        #aaa4b5;

    font-size:
        .64rem;

    font-weight:
        750;
}


.planet-search-counter strong {

    color:
        #ffffff;

    font-size:
        1.15rem;
}


/* =========================================================
   STEP 3 — OBSERVATORY COLUMN
========================================================= */

.telescope-search-panel {

    position:
        absolute;

    left:
        24px;

    top:
        50%;

    width:
        180px;

    transform:
        translateY(-50%);

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    z-index:
        12;
}


/* =========================================================
   OBSERVATORY IMAGE BUTTON
========================================================= */

.observatory-button {

    position:
        relative;

    width:
        145px;

    height:
        145px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin:
        0 0 10px;

    padding:
        4px;

    border:
        0;

    border-radius:
        22px;

    background:
        transparent;

    cursor:
        pointer;

    transition:
        transform .2s ease,
        filter .2s ease;
}


.observatory-image {

    display:
        block;

    width:
        132px;

    height:
        132px;

    object-fit:
        contain;

    pointer-events:
        none;

    user-select:
        none;

    -webkit-user-drag:
        none;

    transition:
        transform .35s ease,
        filter .35s ease;
}


.observatory-button:hover:not(:disabled) {

    transform:
        translateY(-3px);
}


.observatory-button:hover:not(:disabled)
.observatory-image {

    filter:
        drop-shadow(
            0 0 10px
            rgba(74, 222, 128, .30)
        )
        drop-shadow(
            0 0 22px
            rgba(56, 189, 248, .18)
        );
}


.observatory-button:active:not(:disabled) {

    transform:
        translateY(0)
        scale(.97);
}


.observatory-button:disabled {

    cursor:
        default;
}


/* =========================================================
   OBSERVATORY SCANNING
========================================================= */

.observatory-button.scanning {

    pointer-events:
        none;
}


.observatory-button.scanning
.observatory-image {

    animation:
        observatoryScan
        .75s
        ease-in-out
        infinite alternate;
}


@keyframes observatoryScan {

    from {

        transform:
            translateY(0)
            rotate(-1deg)
            scale(1);

        filter:
            drop-shadow(
                0 0 8px
                rgba(56, 189, 248, .25)
            );
    }


    to {

        transform:
            translateY(-3px)
            rotate(2deg)
            scale(1.025);

        filter:
            drop-shadow(
                0 0 15px
                rgba(74, 222, 128, .48)
            )
            drop-shadow(
                0 0 28px
                rgba(56, 189, 248, .30)
            );
    }
}


/* =========================================================
   TELESCOPE / SCAN BUTTON
========================================================= */

.telescope-button {

    min-width:
        166px;

    min-height:
        42px;

    padding:
        0 15px;

    border:
        0;

    border-radius:
        11px;

    background:
        var(--bb-green);

    color:
        #ffffff;

    font-size:
        .76rem;

    font-weight:
        850;

    cursor:
        pointer;

    box-shadow:
        0 8px 18px
        rgba(31, 122, 69, .24);

    transition:
        transform .18s ease,
        background .18s ease,
        opacity .18s ease;
}


.telescope-button:hover:not(:disabled) {

    background:
        #278e53;

    transform:
        translateY(-1px);
}


.telescope-button:disabled {

    opacity:
        .48;

    cursor:
        default;
}


/* =========================================================
   OBSERVATORY HELPER TEXT
========================================================= */

.telescope-helper,
.telescope-caption {

    width:
        170px;

    margin:
        9px 0 14px;

    color:
        #aaa4b5;

    font-size:
        .64rem;

    line-height:
        1.4;

    text-align:
        center;
}


/* =========================================================
   PLANET SEARCH PROGRESS
========================================================= */

.planet-search-progress,
.planet-progress {

    position:
        static;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        9px;

    z-index:
        20;
}


.planet-progress-dot {

    width:
        11px;

    height:
        11px;

    border:
        2px solid
        rgba(255, 255, 255, .42);

    border-radius:
        50%;

    background:
        transparent;

    transition:
        background .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}


.planet-progress-dot.complete {

    border-color:
        #86efac;

    background:
        #36a966;

    box-shadow:
        0 0 8px
        rgba(74, 222, 128, .38);

    transform:
        scale(1.08);
}


/* =========================================================
   STEP 3 — PLANET OBSERVATION AREA
========================================================= */

.planet-observation-panel {

    position:
        absolute;

    left:
        220px;

    top:
        22px;

    bottom:
        122px;

    right:
        330px;

    min-width:
        0;

    min-height:
        0;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        stretch;

    gap:
        10px;

    z-index:
        10;
}


/* =========================================================
   PLANET TITLE
========================================================= */
.planet-title-card,
.planet-name-card {

    position:
        absolute;

    left:
        220px;

    right:
        358px;

    top:
        10px;

    width:
        min(
            360px,
            calc(100% - 40px)
        );

    margin:
        0 auto;

    padding:
        8px 14px 9px;

    border:
        1px solid
        rgba(255, 255, 255, .12);

    border-radius:
        13px;

    background:
        rgba(11, 8, 24, .88);

    text-align:
        center;

    box-shadow:
        0 8px 20px
        rgba(0, 0, 0, .18);

    opacity:
        0;

    visibility:
        hidden;

    transition:
        opacity .3s ease;

    z-index:
        15;
}

.planet-title-card.visible,
.planet-name-card.visible {

    opacity:
        1;

    visibility:
        visible;
}


.planet-title-kicker,
.planet-name-card span {

    display:
        block;

    margin-bottom:
        2px;

    color:
        #8f899b;

    font-size:
        .57rem;

    font-weight:
        850;

    letter-spacing:
        .10em;

    text-transform:
        uppercase;
}


.planet-title-card h3,
.planet-name-card strong {

    display:
        block;

    margin:
        0;

    color:
        #ffffff;

    font-size:
        1.08rem;

    line-height:
        1.15;
}

/* =========================================================
   PLANET VIEWER
========================================================= */

.planet-viewer {

    position:
        absolute;

    left:
        220px;

    right:
        358px;

    top:
        68px;

    bottom:
        122px;

    min-width:
        0;

    min-height:
        180px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    border:
        1px solid
        rgba(255, 255, 255, .09);

    border-radius:
        21px;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(38, 58, 99, .27),
            rgba(8, 6, 18, .42) 65%,
            rgba(5, 4, 13, .75)
        );

    box-shadow:
        inset 0 0 45px
        rgba(0, 0, 0, .16);

    z-index:
        8;
}

/* =========================================================
   EMPTY PLANET VIEW
========================================================= */

.planet-placeholder {

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    width:
        min(
            250px,
            80%
        );

    transform:
        translate(-50%, -50%);

    color:
        #aaa4b5;

    text-align:
        center;

    transition:
        opacity .3s ease;

    z-index:
        2;
}


.planet-placeholder.hidden {

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;
}

.planet-placeholder-icon {

    display:
        block;

    margin-bottom:
        8px;

    color:
        #92d9b2;

    font-size:
        2.3rem;
}


.planet-placeholder strong {

    display:
        block;

    color:
        #ffffff;

    font-size:
        .92rem;
}


.planet-placeholder p {

    margin:
        5px 0 0;

    font-size:
        .7rem;

    line-height:
        1.4;
}
/* =========================================================
   EXOPLANET VISUAL
========================================================= */

.exoplanet-visual {

    position:
        absolute;

    inset:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    border-radius:
        inherit;

    pointer-events:
        none;

    z-index:
        5;
}


.exoplanet-image {

    display:
        block;

    width:
        min(
            330px,
            72%
        );

    height:
        auto;

    max-width:
        72%;

    max-height:
        86%;

    object-fit:
        contain;

    opacity:
        0;

    visibility:
        hidden;

    transform:
        scale(.90);

    filter:
        drop-shadow(
            0 0 30px
            rgba(94, 165, 255, .22)
        );

    transition:
        opacity .38s ease,
        transform .42s ease;

    z-index:
        6;
}


.exoplanet-visual.visible
.exoplanet-image {

    opacity:
        1;

    visibility:
        visible;

    transform:
        scale(1);
}


.exoplanet-visual.scanning
.exoplanet-image {

    opacity:
        .18;

    visibility:
        visible;

    transform:
        scale(.92);
}

/* =========================================================
   STEP 3 — EVIDENCE CARD
========================================================= */

.planet-evidence-card,
.planet-data-card {

    position:
        absolute;

    top:
        72px;

    right:
        18px;

    bottom:
        122px;

    width:
        320px;

    min-width:
        0;

    overflow-y:
        auto;

    overflow-x:
        hidden;

    transform:
        none;

    padding:
        13px 14px;

    border:
        1px solid
        rgba(255, 255, 255, .12);

    border-radius:
        18px;

    background:
        rgba(12, 9, 25, .91);

    box-shadow:
        0 14px 30px
        rgba(0, 0, 0, .18);

    opacity:
        0;

    visibility:
        hidden;

    transition:
        opacity .3s ease;

    z-index:
        14;

    scrollbar-width:
        thin;

    scrollbar-color:
        rgba(255,255,255,.18)
        transparent;
}


.planet-evidence-card.visible,
.planet-data-card.visible {

    right:
        18px;

    opacity:
        1;

    visibility:
        visible;
}


/* =========================================================
   EVIDENCE HEADER
========================================================= */

.evidence-card-header {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        10px;

    margin-bottom:
        8px;
}


.evidence-kicker {

    display:
        block;

    margin-bottom:
        2px;

    color:
        #8ed6ae;

    font-size:
        .55rem;

    font-weight:
        900;

    letter-spacing:
        .1em;

    text-transform:
        uppercase;
}


.evidence-card-header h3 {

    margin:
        0;

    color:
        #ffffff;

    font-size:
        1rem;

    line-height:
        1.2;
}


.evidence-status {

    flex:
        0 0 auto;

    max-width:
        108px;

    padding:
        4px 7px;

    border:
        1px solid
        rgba(255,255,255,.10);

    border-radius:
        999px;

    background:
        rgba(255,255,255,.05);

    color:
        #aaa4b6;

    font-size:
        .56rem;

    font-weight:
        800;

    line-height:
        1.2;

    text-align:
        center;
}


/* =========================================================
   EVIDENCE SECTIONS
========================================================= */

.evidence-section {

    padding:
        8px 0;

    border-top:
        1px solid
        rgba(255,255,255,.08);
}


.evidence-section-heading {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    margin-bottom:
        7px;
}


.evidence-icon {

    width:
        27px;

    height:
        27px;

    flex:
        0 0 auto;

    display:
        grid;

    place-items:
        center;

    border-radius:
        8px;

    background:
        rgba(71, 164, 116, .14);

    color:
        #8fe0b3;

    font-size:
        .76rem;
}


.evidence-section-heading strong {

    display:
        block;

    color:
        #ffffff;

    font-size:
        .78rem;
}


.evidence-section-heading span:not(.evidence-icon) {

    display:
        block;

    margin-top:
        1px;

    color:
        #858091;

    font-size:
        .60rem;

    line-height:
        1.25;
}


/* =========================================================
   EVIDENCE DATA ITEMS
========================================================= */

.evidence-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    gap:
        7px;
}


.evidence-item {

    min-width:
        0;

    padding:
        7px 8px;

    border:
        1px solid
        rgba(255,255,255,.07);

    border-radius:
        9px;

    background:
        rgba(255,255,255,.035);
}


.evidence-item-wide {

    margin-bottom:
        7px;
}


.evidence-item span {

    display:
        block;

    margin-bottom:
        2px;

    color:
        #858091;

    font-size:
        .58rem;
}


.evidence-item strong {

    display:
        block;

    color:
        #f6f7f8;

    font-size:
        .72rem;

    line-height:
        1.3;

    overflow-wrap:
        anywhere;
}


/* =========================================================
   GOLDILOCKS / HABITABLE-ZONE METER
========================================================= */

.habitable-zone-meter {

    margin:
        8px 0;
}


.zone-labels {

    display:
        grid;

    grid-template-columns:
        1fr
        1.35fr
        1fr;

    margin-bottom:
        4px;

    color:
        #8f899a;

    font-size:
        .54rem;

    text-align:
        center;
}


.zone-track {

    position:
        relative;

    height:
        9px;

    display:
        grid;

    grid-template-columns:
        1fr
        1.35fr
        1fr;

    overflow:
        visible;

    border-radius:
        999px;
}


.zone-hot {

    background:
        linear-gradient(
            90deg,
            #d65a39,
            #dd8b42
        );

    border-radius:
        999px 0 0 999px;
}


.zone-habitable {

    background:
        linear-gradient(
            90deg,
            #8bbd72,
            #3ba46b
        );
}


.zone-cold {

    background:
        linear-gradient(
            90deg,
            #559fc7,
            #477fbb
        );

    border-radius:
        0 999px 999px 0;
}


.zone-planet-marker {

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    width:
        17px;

    height:
        17px;

    transform:
        translate(-50%, -50%);

    border:
        3px solid
        #ffffff;

    border-radius:
        50%;

    background:
        #17263d;

    box-shadow:
        0 0 0 4px
        rgba(255,255,255,.11);

    transition:
        left .45s ease;

    z-index:
        3;
}


/* =========================================================
   EVIDENCE TEXT
========================================================= */

.zone-evidence-text,
.stellar-evidence-text {

    padding:
        7px 8px;

    border-radius:
        9px;

    background:
        rgba(255,255,255,.035);

    color:
        #d9d6de;

    font-size:
        .67rem;

    line-height:
        1.35;
}


.zone-evidence-text {

    color:
        #9ce3b9;
}


/* =========================================================
   THINKING PROMPT
========================================================= */

.evidence-question {

    margin-top:
        8px;

    padding:
        8px 9px;

    border:
        1px solid
        rgba(143, 224, 179, .15);

    border-radius:
        10px;

    background:
        rgba(40, 126, 78, .09);
}


.evidence-question span {

    display:
        block;

    margin-bottom:
        3px;

    color:
        #8fe0b3;

    font-size:
        .58rem;

    font-weight:
        850;

    text-transform:
        uppercase;

    letter-spacing:
        .06em;
}


.evidence-question strong {

    display:
        block;

    color:
        #ffffff;

    font-size:
        .69rem;

    line-height:
        1.35;
}


/* =========================================================
   LEGACY DATA ROW SUPPORT

   These can remain because the JS still references
   IDs originally used by the older data card.
========================================================= */

.planet-data-row {

    padding:
        7px 0;

    border-bottom:
        1px solid
        rgba(255,255,255,.08);
}


.planet-data-row:last-child {

    border-bottom:
        0;
}


.planet-data-row span {

    display:
        block;

    margin-bottom:
        2px;

    color:
        #9993a5;

    font-size:
        .57rem;
}


.planet-data-row strong {

    display:
        block;

    color:
        #ffffff;

    font-size:
        .67rem;

    line-height:
        1.3;
}


.planet-data-row.highlight-row strong {

    color:
        #9be1ba;
}


/* =========================================================
   HABITABILITY CLASSIFICATION PANEL
========================================================= */

.habitability-panel {

    position:
        absolute;

    left:
        220px;

    right:
        18px;

    bottom:
        18px;

    min-height:
        86px;

    display:
        grid;

    grid-template-columns:
        minmax(160px, .8fr)
        auto
        minmax(240px, 1.2fr);

    align-items:
        center;

    gap:
        16px;

    padding:
        11px 15px;

    border:
        1px solid
        rgba(255,255,255,.11);

    border-radius:
        15px;

    background:
        rgba(10, 7, 22, .95);

    box-shadow:
        0 10px 30px
        rgba(0,0,0,.24);

    z-index:
        25;
}


.habitability-question {

    color:
        #ffffff;

    font-size:
        .72rem;

    font-weight:
        800;

    line-height:
        1.4;
}


.habitability-buttons {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;
}


.habitability-choice {

    min-height:
        38px;

    padding:
        0 12px;

    border:
        1px solid
        rgba(255,255,255,.14);

    border-radius:
        10px;

    background:
        rgba(255,255,255,.06);

    color:
        #ffffff;

    font-size:
        .7rem;

    font-weight:
        850;

    white-space:
        nowrap;

    cursor:
        pointer;

    transition:
        background .2s ease,
        border-color .2s ease,
        opacity .2s ease;
}


.possible-choice:hover:not(:disabled) {

    border-color:
        #70c795;

    background:
        rgba(48, 150, 88, .26);
}


.unlikely-choice:hover:not(:disabled) {

    border-color:
        #d78175;

    background:
        rgba(173, 71, 58, .20);
}


.habitability-choice:disabled {

    opacity:
        .38;

    cursor:
        default;
}


.habitability-feedback {

    max-height:
        65px;

    overflow-y:
        auto;

    padding-right:
        3px;

    color:
        #b9b4c2;

    font-size:
        .63rem;

    line-height:
        1.4;

    scrollbar-width:
        thin;
}


.habitability-feedback.correct {

    color:
        #9be1ba;
}


.habitability-feedback.incorrect {

    color:
        #f0b7a9;
}


/* =========================================================
   STEP 3 — COMPLETION CARD
========================================================= */

.planet-search-complete {

    position:
        absolute;

    left:
        50%;

    top:
        50%;

    width:
        min(
            440px,
            72%
        );

    transform:
        translate(-50%, -50%)
        scale(.94);

    padding:
        24px 25px;

    border:
        1px solid
        rgba(123, 213, 161, .28);

    border-radius:
        18px;

    background:
        rgba(10, 8, 22, .98);

    text-align:
        center;

    box-shadow:
        0 20px 65px
        rgba(0,0,0,.38);

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transition:
        opacity .35s ease,
        transform .35s ease,
        visibility .35s;

    z-index:
        60;
}


.planet-search-complete.visible {

    opacity:
        1;

    visibility:
        visible;

    transform:
        translate(-50%, -50%)
        scale(1);
}


.planet-search-complete > span {

    display:
        block;

    margin-bottom:
        5px;

    color:
        #82daa7;

    font-size:
        2rem;
}


.planet-search-complete strong {

    display:
        block;

    color:
        #ffffff;

    font-size:
        1.15rem;
}


.planet-search-complete p {

    margin:
        8px 0 0;

    color:
        #b4aebe;

    font-size:
        .76rem;

    line-height:
        1.5;
}


/* =========================================================
   STEP 3 — MEDIUM SCREENS
========================================================= */

@media (max-width: 1200px) {

    .telescope-search-panel {

        left:
            14px;

        width:
            150px;
    }


    .observatory-button {

        width:
            125px;

        height:
            125px;
    }


    .observatory-image {

        width:
            115px;

        height:
            115px;
    }


    .telescope-button {

        min-width:
            140px;

        padding:
            0 10px;

        font-size:
            .68rem;
    }


    .telescope-helper,
    .telescope-caption {

        width:
            145px;
    }


    .planet-observation-panel {

        left:
            170px;

        right:
            280px;
    }


    .planet-evidence-card,
    .planet-data-card {

        right:
            12px;

        width:
            255px;
    }


    .planet-evidence-card.visible,
    .planet-data-card.visible {

        right:
            12px;
    }


    .habitability-panel {

        left:
            170px;

        right:
            12px;

        grid-template-columns:
            minmax(150px, 1fr)
            auto;

        gap:
            9px;
    }


    .habitability-feedback {

        grid-column:
            1 / -1;

        max-height:
            38px;
    }
}


/* =========================================================
   STEP 3 — SHORT SCREENS
========================================================= */

@media (max-height: 760px) {

    .planet-observation-panel {

        top:
            14px;

        bottom:
            105px;
    }


    .planet-evidence-card,
    .planet-data-card {

        top:
            58px;

        bottom:
            105px;
    }


    .habitability-panel {

        bottom:
            12px;

        min-height:
            76px;

        padding:
            8px 12px;
    }


    .observatory-button {

        width:
            120px;

        height:
            120px;
    }


    .observatory-image {

        width:
            110px;

        height:
            110px;
    }
}


/* =========================================================
   STEP 3 — MOBILE
========================================================= */

@media (max-width: 820px) {

    .exoplanet-search-stage {

        overflow-y:
            auto;

        padding-bottom:
            20px;
    }


    .planet-search-counter {

        position:
            relative;

        top:
            auto;

        right:
            auto;

        width:
            130px;

        margin:
            14px 14px 8px auto;
    }


    .telescope-search-panel {

        position:
            relative;

        left:
            auto;

        top:
            auto;

        width:
            100%;

        transform:
            none;

        padding:
            10px 18px 18px;
    }


    .planet-observation-panel {

        position:
            relative;

        left:
            auto;

        right:
            auto;

        top:
            auto;

        bottom:
            auto;

        width:
            calc(100% - 28px);

        height:
            400px;

        min-width:
            0;

        margin:
            0 auto;
    }


    .planet-evidence-card,
    .planet-data-card {

        position:
            relative;

        top:
            auto;

        right:
            auto;

        bottom:
            auto;

        width:
            calc(100% - 28px);

        max-height:
            none;

        margin:
            14px auto 0;

        opacity:
            0;

        visibility:
            hidden;
    }


    .planet-evidence-card.visible,
    .planet-data-card.visible {

        right:
            auto;

        opacity:
            1;

        visibility:
            visible;
    }


    .habitability-panel {

        position:
            relative;

        left:
            auto;

        right:
            auto;

        bottom:
            auto;

        width:
            calc(100% - 28px);

        margin:
            14px auto 18px;

        grid-template-columns:
            1fr;

        gap:
            9px;
    }


    .habitability-question {

        text-align:
            center;
    }


    .habitability-buttons {

        justify-content:
            center;
    }


    .habitability-feedback {

        max-height:
            none;

        text-align:
            center;
    }
}

/* =========================================================
   MODULE COMPLETION SCREEN
========================================================= */

.module-completion-overlay {

    position:
        fixed;

    inset:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        28px;

    background:
        rgba(7, 5, 16, .92);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;

    transition:
        opacity .35s ease,
        visibility .35s ease;

    z-index:
        1000;
}


.module-completion-overlay.visible {

    opacity:
        1;

    visibility:
        visible;

    pointer-events:
        auto;
}


/* =========================================================
   COMPLETION CARD
========================================================= */

.module-completion-card {

    position:
        relative;

    width:
        min(
            620px,
            94vw
        );

    max-height:
        calc(100vh - 56px);

    overflow-y:
        auto;

    padding:
        30px 32px 28px;

    border:
        1px solid
        rgba(125, 220, 164, .28);

    border-radius:
        24px;

    background:
        #ffffff;

    color:
        var(--ink);

    box-shadow:
        0 26px 80px
        rgba(0, 0, 0, .48);

    transform:
        translateY(14px)
        scale(.96);

    transition:
        transform .38s
        cubic-bezier(.2, .8, .2, 1);
}


.module-completion-overlay.visible
.module-completion-card {

    transform:
        translateY(0)
        scale(1);
}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.completion-close-button {

    position:
        absolute;

    top:
        16px;

    right:
        16px;

    width:
        34px;

    height:
        34px;

    display:
        grid;

    place-items:
        center;

    border:
        0;

    border-radius:
        9px;

    background:
        #f1f5f2;

    color:
        #59655d;

    font-size:
        1.2rem;

    cursor:
        pointer;
}


.completion-close-button:hover {

    background:
        #e6eee9;
}


/* =========================================================
   SUCCESS ICON
========================================================= */

.completion-success-icon {

    width:
        70px;

    height:
        70px;

    display:
        grid;

    place-items:
        center;

    margin:
        0 auto 14px;

    border-radius:
        50%;

    background:
        var(--bb-green-soft);

    color:
        var(--bb-green);

    font-size:
        1.9rem;

    font-weight:
        900;

    box-shadow:
        0 0 0 8px
        rgba(31, 122, 69, .06);
}


.completion-success-icon img {

    width:
        78%;

    height:
        78%;

    display:
        block;

    object-fit:
        contain;
}

/* =========================================================
   COMPLETION HEADING
========================================================= */

.completion-eyebrow {

    margin:
        0 0 5px;

    color:
        var(--bb-green);

    font-size:
        .68rem;

    font-weight:
        900;

    letter-spacing:
        .12em;

    text-align:
        center;

    text-transform:
        uppercase;
}


.module-completion-card > h2 {

    margin:
        0;

    color:
        var(--ink);

    font-size:
        1.8rem;

    line-height:
        1.15;

    text-align:
        center;
}


.completion-subtitle {

    max-width:
        510px;

    margin:
        9px auto 20px;

    color:
        var(--muted);

    font-size:
        .84rem;

    line-height:
        1.5;

    text-align:
        center;
}


/* =========================================================
   XP REWARD
========================================================= */

.completion-reward-card {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    margin-bottom:
        12px;

    padding:
        13px 16px;

    border:
        1px solid
        #dce9e0;

    border-radius:
        13px;

    background:
        var(--bb-green-soft);
}


.completion-reward-card span {

    color:
        #526058;

    font-size:
        .76rem;

    font-weight:
        750;
}


.completion-reward-card strong {

    color:
        var(--bb-green);

    font-size:
        1rem;
}


/* =========================================================
   A1.1 PROGRESS CARD
========================================================= */

.completion-progress-card {

    margin-bottom:
        12px;

    padding:
        15px 16px;

    border:
        1px solid
        #e0e7e2;

    border-radius:
        14px;

    background:
        #f9fbfa;
}


.completion-progress-heading {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;
}


.completion-progress-heading span {

    display:
        block;

    margin-bottom:
        2px;

    color:
        var(--bb-green);

    font-size:
        .66rem;

    font-weight:
        850;
}


.completion-progress-heading strong {

    color:
        var(--ink);

    font-size:
        .78rem;
}


.completion-progress-track {

    height:
        8px;

    margin-top:
        11px;

    overflow:
        hidden;

    border-radius:
        999px;

    background:
        #dfe8e2;
}


.completion-progress-fill {

    height:
        100%;

    border-radius:
        inherit;

    background:
        var(--bb-green);
}


.completion-progress-message {

    margin:
        9px 0 0;

    color:
        var(--muted);

    font-size:
        .7rem;

    line-height:
        1.4;
}


/* =========================================================
   BADGE CARD
========================================================= */

.completion-badge-card {

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    padding:
        14px 16px;

    border:
        1px solid
        #e0e7e2;

    border-radius:
        14px;

    background:
        #f9fbfa;
}


.completion-badge-icon {

    width: 72px;

    height: 72px;

    flex: 0 0 72px;

    display: grid;

    place-items: center;

    border-radius: 16px;

    background: #eef8f3;

}

.completion-badge-icon img {

    width: 62px;

    height: 62px;

    display: block;

    object-fit: contain;

}


.completion-badge-copy > span {

    display: block;

    margin-bottom: 3px;

    color: #23834a;

    font-size: 12px;

    font-weight: 850;

    letter-spacing: .10em;

    text-transform: uppercase;

}


.completion-badge-copy > strong {

    display: block;

    margin-top: 0;

    color: #20272d;

    font-size: 18px;

    font-weight: 800;

    line-height: 1.2;

}



.completion-badge-copy p {

    margin: 12px 0 0;

    color: #4f5b54;

    font-size: 17px;

    font-weight: 650;

    line-height: 1.5;

}

/* =========================================================
   COMPLETION — ACTIVITY FEEDBACK
========================================================= */

.activity-feedback {

    margin-top:
        16px;

    padding:
        16px;

    border:
        1px solid
        #dfe8e2;

    border-radius:
        16px;

    background:
        #f7fbf8;

    text-align:
        left;
}


.activity-feedback-question {

    margin:
        0 0 12px;

    color:
        #29352e;

    font-size:
        .92rem;

    font-weight:
        850;

    text-align:
        center;
}


/* =========================================================
   YES / NO BUTTONS
========================================================= */

.activity-feedback-buttons {

    display:
        grid;

    grid-template-columns:
        1fr
        1fr;

    gap:
        10px;
}


.activity-feedback-button {

    min-height:
        42px;

    padding:
        0 14px;

    border:
        1px solid
        #d4dfd8;

    border-radius:
        11px;

    background:
        #ffffff;

    color:
        #3f4c44;

    font:
        inherit;

    font-size:
        .86rem;

    font-weight:
        800;

    cursor:
        pointer;

    transition:
        border-color .18s ease,
        background .18s ease,
        color .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}


.activity-feedback-button:hover {

    border-color:
        #a9c9b5;

    background:
        #eef8f3;

    color:
        var(--bb-green-dark);

    transform:
        translateY(-1px);

    box-shadow:
        0 5px 12px
        rgba(31, 122, 69, .08);
}


.activity-feedback-button.selected {

    border-color:
        var(--bb-green);

    background:
        var(--bb-green-soft);

    color:
        var(--bb-green-dark);
}


/* =========================================================
   NEGATIVE FEEDBACK REASONS
========================================================= */

.activity-feedback-reasons {

    margin-top:
        14px;

    padding-top:
        14px;

    border-top:
        1px solid
        #e0e7e2;
}


.activity-feedback-reasons[hidden] {

    display:
        none;
}


.activity-feedback-reasons > p {

    margin:
        0 0 10px;

    color:
        #536057;

    font-size:
        .8rem;

    font-weight:
        750;
}


.activity-feedback-reasons > p span {

    margin-left:
        4px;

    color:
        #89948d;

    font-size:
        .72rem;

    font-weight:
        650;
}


.activity-feedback-reason-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        8px;
}


.activity-feedback-reason-grid button {

    min-height:
        36px;

    padding:
        7px 9px;

    border:
        1px solid
        #d7e0da;

    border-radius:
        9px;

    background:
        #ffffff;

    color:
        #4b5950;

    font:
        inherit;

    font-size:
        .75rem;

    font-weight:
        750;

    cursor:
        pointer;

    transition:
        border-color .18s ease,
        background .18s ease,
        color .18s ease,
        transform .18s ease;
}


.activity-feedback-reason-grid button:hover {

    border-color:
        #a9c9b5;

    background:
        var(--bb-green-soft);

    color:
        var(--bb-green-dark);

    transform:
        translateY(-1px);
}


.activity-feedback-reason-grid button.selected {

    border-color:
        var(--bb-green);

    background:
        var(--bb-green-soft);

    color:
        var(--bb-green-dark);
}


/* =========================================================
   FEEDBACK THANK YOU
========================================================= */

.activity-feedback-thanks {

    margin-top:
        12px;

    padding:
        10px 12px;

    border:
        1px solid
        #cce2d4;

    border-radius:
        10px;

    background:
        #edf8f1;

    color:
        var(--bb-green-dark);

    font-size:
        .8rem;

    font-weight:
        800;

    line-height:
        1.4;

    text-align:
        center;
}


.activity-feedback-thanks[hidden] {

    display:
        none;
}


/* =========================================================
   HIDDEN FEEDBACK CONTROLS
========================================================= */

.activity-feedback-buttons[hidden] {

    display:
        none;
}



/* =========================================================
   COMPLETION ACTIONS
========================================================= */

.completion-actions {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    margin-top:
        18px;
}


.completion-secondary-button,
.completion-primary-button {

    min-height:
        42px;

    padding:
        0 18px;

    border-radius:
        11px;

    font-size:
        .76rem;

    font-weight:
        850;

    cursor:
        pointer;
}


.completion-secondary-button {

    border:
        1px solid
        #d8e2db;

    background:
        #ffffff;

    color:
        #35423a;
}


.completion-primary-button {

    border:
        1px solid
        var(--bb-green);

    background:
        var(--bb-green);

    color:
        #ffffff;
}


.completion-primary-button:hover {

    background:
        #278e53;
}


/* =========================================================
   COMPLETION — SHORT SCREENS
========================================================= */

@media (max-height: 760px) {

    .module-completion-overlay {

        padding:
            18px;
    }


    .module-completion-card {

        max-height:
            calc(100vh - 36px);

        padding:
            22px 26px 20px;
    }


    .completion-success-icon {

        width:
            54px;

        height:
            54px;

        margin-bottom:
            9px;

        font-size:
            1.45rem;
    }


    .completion-subtitle {

        margin-bottom:
            13px;
    }


    .completion-reward-card,
    .completion-progress-card {

        margin-bottom:
            9px;
    }


    .completion-actions {

        margin-top:
            12px;
    }
}


/* =========================================================
   COMPLETION — MOBILE
========================================================= */

@media (max-width: 600px) {

    .module-completion-overlay {

        padding:
            14px;
    }


    .module-completion-card {

        width:
            100%;

        max-height:
            calc(100vh - 28px);

        padding:
            24px 18px 20px;
    }


    .completion-badge-card {

        align-items:
            flex-start;
    }


    .completion-actions {

        flex-direction:
            column;
    }


    .completion-secondary-button,
    .completion-primary-button {

        width:
            100%;
    }
}


/* =========================================================
   STEP 3 — NEXT ACTION ATTENTION
========================================================= */

.observatory-button.attention
.observatory-image {

    animation:
        telescopeAttention
        1.25s ease-in-out
        infinite;
}


.telescope-button.attention {

    animation:
        telescopeButtonAttention
        1.25s ease-in-out
        infinite;
}


@keyframes telescopeAttention {

    0%,
    100% {

        transform:
            scale(1);

        filter:
            drop-shadow(
                0 0 8px
                rgba(74, 222, 128, .22)
            );
    }


    50% {

        transform:
            scale(1.07);

        filter:
            drop-shadow(
                0 0 18px
                rgba(74, 222, 128, .55)
            );
    }
}


@keyframes telescopeButtonAttention {

    0%,
    100% {

        transform:
            translateY(0);

        box-shadow:
            0 8px 18px
            rgba(31, 122, 69, .24);
    }


    50% {

        transform:
            translateY(-2px);

        box-shadow:
            0 8px 28px
            rgba(74, 222, 128, .48);
    }
}