/* =========================================================
   BIOLOGY BRAIN
   WATER MOLECULES & HYDROGEN BONDING
========================================================= */


:root {
    --bb-green: #1f7a45;
    --bb-green-dark: #155b33;
    --bb-green-soft: #eaf6ef;

    --ink: #1f2933;
    --muted: #667085;

    --line: #d9e2dc;

    --surface: #ffffff;
    --workspace: #eef8f3;

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


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

* {
    box-sizing: border-box;
}


html,
body {
    margin: 0;

    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

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

    color: var(--ink);

    background: #edf1ee;

    overflow: hidden;
}


html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}


body {
    padding: 0;

    overscroll-behavior: none;
}


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

.module-shell {
    width: 100%;

    height: 100vh;
    height: 100dvh;

    min-width: 0;
    min-height: 0;

    margin: 0;

    display: grid;

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

    background: var(--surface);

    border:
        1px solid #dfe6e1;

    border-radius: 22px;

    overflow: hidden;

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


/* =========================================================
   FULLSCREEN
========================================================= */

.module-shell:fullscreen,
.module-shell:-webkit-full-screen {
    width: 100vw;

    height: 100vh;
    height: 100dvh;

    min-height: 0;

    margin: 0;

    border: none;
    border-radius: 0;

    box-shadow: none;
}


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

.module-topbar {
    min-height: 68px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding:
        10px 20px;

    border-bottom:
        1px solid var(--line);

    background: #ffffff;

    position: relative;

    z-index: 40;
}


.module-brand {
    display: flex;
    align-items: center;

    gap: 13px;

    min-width: 0;

    flex: 1;
}


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

    flex: 0 0 42px;

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

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

    display: block;

    object-fit: contain;
}


.module-brand > div:last-child {
    min-width: 0;
}


.module-eyebrow {
    margin:
        0 0 2px;

    font-size: .75rem;
    font-weight: 800;

    letter-spacing: .08em;

    text-transform: uppercase;

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


.module-title {
    margin: 0;

    font-size:
        clamp(
            1.02rem,
            2vw,
            1.5rem
        );

    line-height: 1.15;

    overflow-wrap: anywhere;
}


.module-meta {
    flex: 0 0 auto;

    display: flex;
    align-items: center;

    gap: 9px;
}


.badge {
    padding:
        7px 10px;

    border:
        1px solid var(--line);

    border-radius: 999px;

    background: #f8faf8;

    color: #435047;

    font-size: .78rem;
    font-weight: 800;
}


.icon-button {
    min-width: 40px;
    height: 40px;

    padding:
        0 12px;

    border:
        1px solid var(--line);

    border-radius: 11px;

    background: #ffffff;

    color: #334039;

    font-size: .95rem;
    font-weight: 800;

    white-space: nowrap;

    cursor: pointer;

    touch-action: manipulation;
}


@media (hover: hover) {

    .icon-button:hover,
    .control-button:hover {
        background:
            #f7faf8;
    }
}


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

.workspace {
    position: relative;

    width: 100%;

    min-width: 0;
    min-height: 0;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 34% 20%,
            rgba(255, 255, 255, .96),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #f7fbf9 0%,
            var(--workspace) 100%
        );
}


/* =========================================================
   ACTIVITY STAGE
========================================================= */

.activity-stage {
    position: absolute;

    inset:
        14px 18px;

    min-width: 0;
    min-height: 0;

    display: grid;

    place-items: center;

    overflow: hidden;
}


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

.molecule-demo {
    position: relative;

    width:
        min(
            900px,
            94%
        );

    height:
        min(
            500px,
            100%
        );

    max-width: 100%;
    max-height: 100%;

    min-width: 0;
    min-height: 0;

    overflow: hidden;
}


/* =========================================================
   STEP 1 — ATOMS
========================================================= */

.atom-image {
    position: absolute;

    display: block;

    user-select: none;
    -webkit-user-drag: none;

    z-index: 10;
}


/* =========================================================
   STEP 1 — OXYGEN
========================================================= */

.oxygen-image {
    width: 260px;
    height: auto;

    left: 50%;
    top: 20px;

    transform:
        translateX(-50%)
        scale(2.6);

    transform-origin:
        center center;

    pointer-events: none;
}


/* =========================================================
   STEP 1 — HYDROGEN
========================================================= */

.hydrogen-image {
    position: absolute;

    width: 165px;
    height: auto;

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

    transform-origin:
        center center;

    cursor: grab;

    user-select: none;

    -webkit-user-drag: none;

    touch-action: none;

    z-index: 10;
}


.hydrogen-image:active {
    cursor: grabbing;
}


.hydrogen-left {
    left: 15%;
    top: 82%;
}


.hydrogen-right {
    left: 85%;
    top: 82%;
}


/* =========================================================
   STEP 1 — SNAP TARGETS
========================================================= */

.hydrogen-target {
    position: absolute;

    width: 120px;
    height: 120px;

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

    border-radius: 50%;

    opacity: 0;

    pointer-events: none;

    z-index: 1;
}


.hydrogen-target-left {
    left: 39%;
    top: 53%;
}


.hydrogen-target-right {
    left: 61%;
    top: 53%;
}


/* =========================================================
   STEP 1 — TEMPORARY BONDS
========================================================= */

.covalent-bond {
    position: absolute;

    height: 10px;

    background:
        #303633;

    border-radius:
        999px;

    transform-origin:
        left center;

    opacity: 0;

    pointer-events: none;

    z-index: 2;
}


/* =========================================================
   STEP 1 — DRAG HINT
========================================================= */

.drop-hint {
    position: absolute;

    left: 50%;
    bottom: 4px;

    transform:
        translateX(-50%);

    max-width: 90%;

    padding:
        9px 14px;

    border-radius: 12px;

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

    color:
        #526057;

    font-size:
        .86rem;

    font-weight: 700;

    white-space: nowrap;

    text-align: center;

    box-shadow:
        0 8px 20px
        rgba(42, 57, 48, .08);

    z-index: 13;
}


/* =========================================================
   COMPLETED WATER MOLECULE
========================================================= */

.completed-water {
    position: absolute;

    width: 320px;

    max-width: 58%;

    height: auto;

    left: 50%;
    top: 42%;

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

    display: none;

    user-select: none;

    -webkit-user-drag: none;

    pointer-events: none;

    z-index: 10;
}


/* =========================================================
   STEP 2 — ELECTRONS
========================================================= */

.bond-electron {
    position: absolute;

    width: 14px;
    height: 14px;

    border-radius: 50%;

    background:
        #202623;

    box-shadow:
        0 2px 5px
        rgba(0, 0, 0, .18);

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

    opacity: 0;

    pointer-events: none;

    z-index: 14;

    transition:
        opacity .25s ease;
}


.bond-electron.visible {
    opacity: 1;
}


/* =========================================================
   STEP 2 — CONTROL BUTTONS
========================================================= */

.electron-control-button,
.charge-control-button {
    position: absolute;

    left: 50%;
    bottom: 40px;

    transform:
        translateX(-50%);

    min-height: 42px;

    max-width: 80%;

    padding:
        11px 18px;

    border: none;

    border-radius: 11px;

    background:
        var(--bb-green);

    color: #ffffff;

    font-size: .9rem;

    font-weight: 800;

    white-space: nowrap;

    cursor: pointer;

    touch-action: manipulation;

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

    display: none;

    z-index: 16;
}


@media (hover: hover) {

    .electron-control-button:hover,
    .charge-control-button:hover {
        background:
            var(--bb-green-dark);
    }
}


.electron-control-button:disabled,
.charge-control-button:disabled {
    opacity: .65;

    cursor: default;
}


/* =========================================================
   STEP 2 — PARTIAL CHARGES
========================================================= */

.partial-charge {
    position: absolute;

    font-size: 1.6rem;

    font-weight: 900;

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

    opacity: 0;

    pointer-events: none;

    z-index: 15;

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

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


.partial-charge.visible {
    opacity: 1;

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


/*
    Actual charge coordinates are assigned
    by JS based on completed-water.svg.
*/

.oxygen-charge,
.hydrogen-charge-left,
.hydrogen-charge-right {
    left: 50%;
    top: 50%;
}


/* =========================================================
   STEP 3 — SECOND WATER
========================================================= */

.second-water {
    position: absolute;

    width: 320px;

    max-width: 55%;

    height: auto;

    left: 18%;
    top: 70%;

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

    display: none;

    cursor: grab;

    user-select: none;

    -webkit-user-drag: none;

    touch-action: none;

    z-index: 11;
}


.second-water:active {
    cursor: grabbing;
}


/* =========================================================
   STEP 3 — HYDROGEN BOND
========================================================= */

.hydrogen-bond-line {
    position: absolute;

    height: 4px;

    background:
        repeating-linear-gradient(
            to right,
            #4f8f72 0,
            #4f8f72 7px,
            transparent 7px,
            transparent 14px
        );

    border: none;

    transform-origin:
        left center;

    opacity: 0;

    pointer-events: none;

    z-index: 12;
}


/* =========================================================
   STEP 3 — TARGET GLOW
========================================================= */

.hydrogen-bond-target {
    position: absolute;

    width: 34px;
    height: 34px;

    border-radius: 50%;

    background:
        rgba(31, 122, 69, .18);

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

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

    opacity: 0;

    pointer-events: none;

    z-index: 13;
}


.hydrogen-bond-target.visible {
    opacity: 1;

    animation:
        hydrogenTargetPulse
        1.5s
        ease-in-out
        infinite;
}


@keyframes hydrogenTargetPulse {

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

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


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

        box-shadow:
            0 0 0 11px
            rgba(31, 122, 69, .10),
            0 0 28px
            rgba(31, 122, 69, .55);
    }
}


/* =========================================================
   STEP 4 — NETWORK WATER
========================================================= */

.network-water {
    position: absolute;

    width: 220px;

    max-width: 36%;

    height: auto;

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

    display: none;

    cursor: grab;

    user-select: none;

    -webkit-user-drag: none;

    touch-action: none;

    z-index: 11;
}


.network-water:active {
    cursor: grabbing;
}


.network-water-1 {
    left: 15%;
    top: 25%;
}


.network-water-2 {
    left: 15%;
    top: 78%;
}


.network-water-3 {
    left: 86%;
    top: 75%;
}


/* =========================================================
   STEP 4 — TARGETS
========================================================= */

.network-target {
    position: absolute;

    width: 32px;
    height: 32px;

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

    border-radius: 50%;

    background:
        rgba(31, 122, 69, .18);

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

    opacity: 0;

    pointer-events: none;

    z-index: 14;

    display: grid;

    place-items: center;

    color: #1f7a45;

    font-size: .9rem;

    font-weight: 900;

    border:

        2px dashed

        rgba(31, 122, 69, .55);

    background:

        rgba(255, 255, 255, .92);
}


.network-target.visible {
    opacity: 1;

    animation:
        networkTargetPulse
        1.5s
        ease-in-out
        infinite;
}


@keyframes networkTargetPulse {

    0%,
    100% {
        transform:
            translate(-50%, -50%)
            scale(.9);
    }


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


/* =========================================================
   STEP 4 — BONDS
========================================================= */

.network-bond {
    position: absolute;

    height: 4px;

    background:
        repeating-linear-gradient(
            to right,
            #4f8f72 0,
            #4f8f72 7px,
            transparent 7px,
            transparent 14px
        );

    transform-origin:
        left center;

    opacity: 0;

    pointer-events: none;

    z-index: 8;
}


/* =========================================================
   FLOATING INSTRUCTIONS
========================================================= */

.instruction-popup {
    position: absolute;

    top: 22px;
    right: 22px;

    width:
        min(
            350px,
            calc(100% - 44px)
        );

    border:
        1px solid #d9e5dd;

    border-radius: 18px;

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

    box-shadow:
        0 18px 42px
        rgba(28, 44, 34, .16);

    overflow: hidden;

    z-index: 30;
}


.instruction-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding:
        12px 14px 11px 16px;

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

    border-bottom:
        1px solid #dbe9df;

    cursor: grab;

    user-select: none;
}


.instruction-header:active {
    cursor: grabbing;
}


.instruction-step {
    font-size: .76rem;

    font-weight: 900;

    letter-spacing: .08em;

    text-transform: uppercase;

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


.popup-actions {
    display: flex;

    gap: 6px;
}


.popup-action {
    width: 30px;
    height: 30px;

    border: none;

    border-radius: 8px;

    background:
        transparent;

    color:
        #536057;

    font-size: 1rem;

    cursor: pointer;

    touch-action: manipulation;
}


@media (hover: hover) {

    .popup-action:hover {
        background:
            rgba(31, 122, 69, .1);
    }
}


.instruction-body {
    padding:
        16px 18px 17px;
}


.instruction-body h2 {
    margin:
        0 0 9px;

    font-size:
        1.22rem;

    line-height: 1.25;
}


.instruction-body p {
    margin: 0;

    color:
        #4e5b53;

    line-height: 1.5;

    font-size:
        .94rem;
}


.instruction-goal {
    margin-top: 14px;

    padding:
        11px 13px;

    border:
        1px solid #e0e8e3;

    border-radius: 12px;

    background:
        #f7faf8;

    color:
        #435047;

    font-size:
        .86rem;
}


.instruction-goal strong {
    display: block;

    margin-bottom: 3px;
}


.instruction-restore {
    position: absolute;

    top: 20px;
    right: 20px;

    display: none;
    align-items: center;

    gap: 8px;

    padding:
        9px 13px;

    border:
        1px solid #d8e3db;

    border-radius: 999px;

    background:
        #ffffff;

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

    font-weight: 850;

    box-shadow:
        0 10px 24px
        rgba(28, 44, 34, .1);

    cursor: pointer;

    touch-action: manipulation;

    z-index: 35;
}


/* =========================================================
   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 var(--line);

    background:
        #ffffff;

    position: relative;

    z-index: 100;
}


.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 var(--line);

    border-radius: 11px;

    background:
        #ffffff;

    color:
        #334039;

    font-weight: 800;

    white-space: nowrap;

    cursor: pointer;

    touch-action: manipulation;
}


.control-button.primary {
    border-color:
        var(--bb-green);

    background:
        var(--bb-green);

    color:
        #ffffff;
}


.control-button.primary:disabled {
    opacity: .38;

    cursor: not-allowed;
}


/* =========================================================
   PROGRESS
========================================================= */

.module-progress {
    display: flex;
    align-items: center;
    justify-content: center;

    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);
}


/*
    HTML currently contains five dots,
    but this module has four steps.
*/

.module-progress
.progress-dot:nth-child(n + 5) {
    display: none;
}


.sound-active {
    border-color:
        var(--bb-green);

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

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


/* =========================================================
   SHORT HEIGHTS
========================================================= */

@media (max-height: 760px) {

    .module-topbar {
        min-height: 56px;

        padding:
            7px 14px;
    }


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

        font-size: 19px;
    }


    .module-eyebrow {
        font-size: .66rem;
    }


    .module-title {
        font-size:
            clamp(
                .92rem,
                1.7vw,
                1.22rem
            );
    }


    .icon-button {
        height: 34px;

        min-width: 34px;
    }


    .badge {
        padding:
            5px 8px;

        font-size: .7rem;
    }


    .module-footer {
        min-height: 52px;

        padding:
            5px 12px;
    }


    .control-button {
        min-height: 36px;

        padding:
            0 11px;

        font-size: .82rem;
    }


    .activity-stage {
        inset:
            6px 10px;
    }


    .molecule-demo {
        height:
            min(
                440px,
                100%
            );
    }


    .instruction-popup {
        top: 10px;
        right: 10px;
    }


    .instruction-header {
        padding:
            8px 11px;
    }


    .instruction-body {
        padding:
            11px 13px 12px;
    }


    .instruction-body h2 {
        font-size:
            1rem;
    }


    .instruction-body p {
        font-size:
            .82rem;
    }


    .instruction-goal {
        margin-top: 8px;

        padding:
            8px 10px;
    }


    .electron-control-button,
    .charge-control-button {
        bottom: 12px;
    }
}


/* =========================================================
   MOBILE / TABLET
========================================================= */

@media (max-width: 1100px) {

    html,
    body {
        width: 100%;
        height: 100%;

        min-width: 0;
        min-height: 0;

        overflow: hidden;
    }


    .module-shell {
        width: 100%;

        height: 100vh;
        height: 100dvh;

        min-height: 0;

        border: 0;
        border-radius: 0;

        box-shadow: none;

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


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

    .module-topbar {
        min-height: 56px;

        padding:
            max(
                6px,
                env(safe-area-inset-top)
            )
            10px
            6px;

        gap: 8px;
    }


    .module-brand {
        gap: 8px;

        flex: 1;

        min-width: 0;
    }


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

        border-radius: 10px;

        font-size: 18px;
    }


    .module-eyebrow {
        font-size: .59rem;

        letter-spacing: .055em;

        white-space: nowrap;

        overflow: hidden;

        text-overflow: ellipsis;
    }


    .module-title {
        max-width: 100%;

        font-size: .9rem;

        line-height: 1.12;

        white-space: normal;
    }


    .module-meta {
        gap: 4px;
    }


    .module-meta .badge {
        display: none;
    }


    .icon-button {
        min-width: 34px;
        height: 34px;

        padding:
            0 8px;

        border-radius: 9px;

        font-size: .76rem;
    }


    /*
        Mobile Safari does not consistently support
        arbitrary element fullscreen. The module
        already occupies the usable viewport.
    */

    #fullscreenButton {
        display: none;
    }


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

    .workspace {
        min-width: 0;
        min-height: 0;

        overflow: hidden;
    }


    .activity-stage {
        inset:
            5px 7px;

        overflow: hidden;
    }


    .molecule-demo {
        width: 100%;
        height: 100%;

        max-width: none;
        max-height: none;

        overflow: hidden;
    }


    /* =====================================================
       MOBILE INSTRUCTIONS
    ====================================================== */

    .instruction-popup {
        left:
            10px !important;

        right:
            10px !important;

        top:
            8px !important;

        width: auto;

        max-width: none;

        max-height:
            min(
                48dvh,
                300px
            );

        border-radius: 13px;

        overflow-y: auto;

        overscroll-behavior: contain;

        box-shadow:
            0 10px 28px
            rgba(28, 44, 34, .18);
    }


    .instruction-header {
        padding:
            8px 10px;

        cursor: default;
    }


    .instruction-header:active {
        cursor: default;
    }


    .instruction-step {
        font-size:
            .66rem;
    }


    .instruction-body {
        padding:
            10px 12px 12px;
    }


    .instruction-body h2 {
        margin-bottom:
            5px;

        font-size:
            .94rem;
    }


    .instruction-body p {
        font-size:
            .76rem;

        line-height:
            1.38;
    }


    .instruction-goal {
        margin-top:
            8px;

        padding:
            7px 9px;

        font-size:
            .72rem;
    }


    .popup-action {
        width: 32px;
        height: 32px;
    }


    .instruction-restore {
        top: 8px;
        right: 8px;

        padding:
            7px 10px;

        font-size:
            .68rem;

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


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

    .module-footer {
        min-height: 56px;

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

        gap: 7px;

        padding:
            5px
            8px
            max(
                5px,
                env(safe-area-inset-bottom)
            );

        flex-shrink: 0;
    }


    #soundButton {
        display: none;
    }


    .footer-left {
        display: flex;

        min-width: 0;
    }


    .footer-right {
        display: flex;

        justify-content: flex-end;

        gap: 5px;

        min-width: 0;
    }


    .control-button {
        min-height: 38px;

        padding:
            0 10px;

        border-radius: 9px;

        font-size: .73rem;
    }


    .module-progress {
        justify-self: center;

        gap: 5px;

        min-width: 0;
    }


    .progress-dot {
        width: 8px;
        height: 8px;

        border-width: 1.5px;
    }


    /* =====================================================
       STEP 1
    ====================================================== */

    .oxygen-image {
        width:
            min(
                190px,
                25vw
            );

        top: 8%;

        transform:
            translateX(-50%)
            scale(2);
    }


    .hydrogen-image {
        width:
            min(
                115px,
                17vw
            );

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


    .hydrogen-left {
        left: 18%;
        top: 78%;
    }


    .hydrogen-right {
        left: 82%;
        top: 78%;
    }


    .hydrogen-target {
        width: 90px;
        height: 90px;
    }


    .hydrogen-target-left {
        left: 39%;
        top: 55%;
    }


    .hydrogen-target-right {
        left: 61%;
        top: 55%;
    }


    .covalent-bond {
        height: 7px;
    }


    .drop-hint {
        bottom: 5px;

        max-width: 78%;

        padding:
            6px 9px;

        font-size: .68rem;

        white-space: normal;
    }


    /* =====================================================
       STEPS 2 + 3
    ====================================================== */

    .completed-water {
        width:
            min(
                250px,
                36vw
            );

        max-width: 46%;

        top: 42%;
    }


    .second-water {
        width:
            min(
                220px,
                32vw
            );

        max-width: 42%;
    }


    .electron-control-button,
    .charge-control-button {
        bottom: 12px;

        min-height: 38px;

        max-width: 78%;

        padding:
            8px 14px;

        font-size: .74rem;

        line-height: 1.2;

        white-space: normal;

        text-align: center;
    }


    .bond-electron {
        width: 11px;
        height: 11px;
    }


    .partial-charge {
        font-size:
            1.12rem;
    }


    .hydrogen-bond-line {
        height: 3px;
    }


    .hydrogen-bond-target {
        width: 28px;
        height: 28px;
    }


    /* =====================================================
       STEP 4
    ====================================================== */

    .network-water {
        width:
            min(
                165px,
                24vw
            );

        max-width: 29%;
    }


    .network-water-1 {
        left: 18%;
        top: 22%;
    }


    .network-water-2 {
        left: 18%;
        top: 76%;
    }


    .network-water-3 {
        left: 82%;
        top: 74%;
    }


    .network-target {
        width: 27px;
        height: 27px;
    }


    .network-bond {
        height: 3px;
    }
}


/* =========================================================
   PHONE
========================================================= */

@media (max-width: 600px) {

    .module-topbar {
        min-height: 52px;

        padding-left: 8px;
        padding-right: 8px;
    }


    .module-eyebrow {
        font-size:
            .52rem;
    }


    .module-title {
        font-size:
            .78rem;

        line-height:
            1.08;
    }


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

        font-size: 16px;
    }


    .icon-button {
        min-width: 32px;
        width: 32px;
        height: 32px;

        padding: 0;
    }


    .activity-stage {
        inset: 4px;
    }


    .module-footer {
        min-height: 54px;

        padding-left: 6px;
        padding-right: 6px;
    }


    #resetButton {
        min-width: 46px;

        padding:
            0 7px;

        font-size: .67rem;
    }


    .footer-right
    .control-button {
        padding:
            0 8px;

        font-size: .69rem;
    }


    .module-progress {
        gap: 4px;
    }


    .progress-dot {
        width: 7px;
        height: 7px;
    }


    .oxygen-image {
        width:
            min(
                150px,
                35vw
            );

        top: 10%;

        transform:
            translateX(-50%)
            scale(1.8);
    }


    .hydrogen-image {
        width:
            min(
                92px,
                23vw
            );

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


    .hydrogen-left {
        left: 20%;
        top: 76%;
    }


    .hydrogen-right {
        left: 80%;
        top: 76%;
    }


    .hydrogen-target {
        width: 72px;
        height: 72px;
    }


    .completed-water {
        width:
            min(
                210px,
                48vw
            );

        max-width: 52%;

        top: 41%;
    }


    .second-water {
        width:
            min(
                185px,
                43vw
            );

        max-width: 48%;
    }


    .network-water {
        width:
            min(
                135px,
                31vw
            );

        max-width: 34%;
    }


    .electron-control-button,
    .charge-control-button {
        max-width: 74%;

        bottom: 9px;

        padding:
            7px 11px;

        font-size: .69rem;
    }


    .instruction-popup {
        left:
            7px !important;

        right:
            7px !important;

        top:
            6px !important;

        max-height: 44dvh;
    }


    .instruction-restore {
        top: 6px;
        right: 6px;

        font-size: .64rem;

        padding:
            6px 8px;
    }
}


/* =========================================================
   VERY SHORT LANDSCAPE PHONE
========================================================= */

@media
(max-width: 1100px)
and
(max-height: 520px) {

    .module-topbar {
        min-height: 48px;

        padding-top: 4px;
        padding-bottom: 4px;
    }


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

        font-size: 15px;
    }


    .module-title {
        font-size:
            .76rem;
    }


    .module-eyebrow {
        font-size:
            .5rem;
    }


    .icon-button {
        width: 30px;
        min-width: 30px;
        height: 30px;
    }


    .module-footer {
        min-height: 48px;

        padding-top: 3px;

        padding-bottom:
            max(
                3px,
                env(safe-area-inset-bottom)
            );
    }


    .control-button {
        min-height: 34px;
    }


    .activity-stage {
        inset:
            2px 5px;
    }


    .completed-water {
        top: 39%;
    }


    .drop-hint {
        bottom: 2px;
    }


    .electron-control-button,
    .charge-control-button {
        bottom: 5px;
    }


    .instruction-popup {
        max-height: 62dvh;
    }
}


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

.module-complete-overlay {
    position: fixed;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 24px;

    background:
        rgba(8, 12, 10, .72);

    backdrop-filter:
        blur(7px);

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

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

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

    z-index: 9999;
}


.module-complete-overlay.visible {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}


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

.module-complete-card {
    width:
        min(
            560px,
            100%
        );

    max-height:
        calc(
            100dvh -
            48px
        );

    overflow-y: auto;

    overscroll-behavior: contain;

    padding: 30px;

    border:
        1px solid
        #dce6df;

    border-radius: 26px;

    background:
        #ffffff;

    color:
        #1f2933;

    text-align: center;

    box-shadow:
        0 28px 80px
        rgba(0, 0, 0, .32);

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

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


.module-complete-overlay.visible
.module-complete-card {
    transform:
        translateY(0)
        scale(1);
}


/* =========================================================
   COMPLETION TOP AREA
========================================================= */

.completion-icon {
    width: 86px;
    height: 86px;

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

    margin: 0 auto 18px;

    background: #eaf7ee;
    border-radius: 50%;
}

.completion-icon img {
    width: 62px;
    height: 62px;

    display: block;

    object-fit: contain;
}


@keyframes completionBurst {

    0% {
        transform:
            scale(.5)
            rotate(-15deg);

        opacity: 0;
    }


    70% {
        transform:
            scale(1.12)
            rotate(4deg);

        opacity: 1;
    }


    100% {
        transform:
            scale(1)
            rotate(0deg);
    }
}


.completion-eyebrow {
    margin:
        0 0 5px;

    color:
        #1f7a45;

    font-size: .72rem;

    font-weight: 900;

    letter-spacing: .12em;
}


.module-complete-card h2 {
    margin: 0;

    font-size:
        clamp(
            1.45rem,
            3vw,
            2rem
        );

    line-height: 1.16;
}


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

.completion-xp {
    margin:
        20px 0 24px;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 3px;
}


.completion-xp-plus {
    color:
        #58b92f;

    font-size: 2rem;

    font-weight: 950;
}


.completion-xp-total {
    color:
        #7a847e;

    font-size: .78rem;

    font-weight: 750;
}
/* =========================================================
   PROGRESS SECTIONS
========================================================= */

.completion-progress-section {
    margin-top: 14px;

    padding:
        18px 18px;

    border:
        1px solid
        #e1e7e3;

    border-radius: 16px;

    background:
        #f9fbfa;

    text-align: left;
}


.completion-section-heading {
    display: grid;

    grid-template-columns:
        auto
        1fr
        auto;

    align-items: center;

    gap: 14px;

    margin-bottom: 14px;
}


/* =========================================================
   PROGRESS / BADGE ICONS
========================================================= */

.completion-section-icon,
.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;
}


/* =========================================================
   PROGRESS / BADGE HEADINGS
========================================================= */

.completion-section-label {
    display: block;

    margin-bottom: 3px;

    color:
        #1f7a45;

    font-size: 12px;

    font-weight: 850;

    letter-spacing: .10em;

    text-transform: uppercase;
}


.completion-section-heading strong {
    display: block;

    color:
        #20272d;

    font-size: 18px;

    font-weight: 800;

    line-height: 1.2;
}


.completion-progress-number {
    color:
        #48554d;

    font-size: 17px;

    font-weight: 900;

    white-space: nowrap;
}


/* =========================================================
   PROGRESS BAR
========================================================= */

.completion-progress-track {
    width: 100%;

    height: 12px;

    overflow: hidden;

    border-radius: 999px;

    background:
        #dce3df;
}


.completion-progress-fill {
    width: 0;

    height: 100%;

    border-radius: inherit;

    background:
        #59b832;

    transition:
        width 1.05s
        cubic-bezier(.2, .8, .2, 1);
}


.badge-progress-fill {
    background:
        #1f7a45;
}


/* =========================================================
   PROGRESS MESSAGE
========================================================= */

.completion-progress-message {
    margin:
        14px 0 0;

    color:
        #4f5b54;

    font-size: 17px;

    font-weight: 650;

    line-height: 1.5;
}


/* =========================================================
   WATER BADGE PANEL
========================================================= */

.badge-section {
    background:
        #fbfcfb;
}


.badge-section .completion-section-label {
    color:
        #23834a;
}


.badge-section .completion-section-heading strong {
    color:
        #20272d;

    font-size: 18px;

    font-weight: 800;
}


.badge-section .completion-progress-message {
    color:
        #4f5b54;

    font-size: 17px;

    font-weight: 650;

    line-height: 1.5;
}


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

.activity-feedback {

    margin-top:
        16px;

    padding:
        17px 18px;

    border:
        1px solid
        #dfe8e2;

    border-radius:
        16px;

    background:
        #f7fbf8;

    text-align:
        left;

}


.activity-feedback-question {

    margin:
        0 0 12px;

    color:
        #20272d;

    font-size:
        .92rem;

    font-weight:
        850;

}


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

.activity-feedback-buttons {

    display:
        grid;

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

    gap:
        10px;

}


.activity-feedback-button {

    min-height:
        43px;

    padding:
        10px 14px;

    border:
        1px solid
        #d7e2da;

    border-radius:
        11px;

    background:
        #ffffff;

    color:
        #334039;

    font-size:
        .85rem;

    font-weight:
        800;

    cursor:
        pointer;

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

}


@media (hover: hover) {

    .activity-feedback-button:hover {

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

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

        transform:
            translateY(-1px);

    }

}

.activity-feedback-buttons[hidden] {
    display: none;
}

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

.activity-feedback-reasons {

    margin-top:
        14px;

}


.activity-feedback-reasons[hidden] {

    display:
        none;

}


.activity-feedback-reasons p {

    margin:
        0 0 9px;

    color:
        #526057;

    font-size:
        .76rem;

    font-weight:
        800;

}


.activity-feedback-reasons p span {

    margin-left:
        5px;

    color:
        #89938d;

    font-size:
        .68rem;

    font-weight:
        650;

}


.activity-feedback-reason-grid {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        7px;

}


.activity-feedback-reason-grid button {

    padding:
        7px 10px;

    border:
        1px solid
        #d7e2da;

    border-radius:
        999px;

    background:
        #ffffff;

    color:
        #526057;

    font-size:
        .72rem;

    font-weight:
        750;

    cursor:
        pointer;

}


@media (hover: hover) {

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

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

        color:
            var(--bb-green);

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

    }

}


/* =========================================================
   THANK-YOU STATE
========================================================= */

.activity-feedback-thanks {

    padding:
        11px 13px;

    border-radius:
        10px;

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

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

    font-size:
        .78rem;

    font-weight:
        800;

}


.activity-feedback-thanks[hidden] {

    display:
        none;

}


/* =========================================================
   MOBILE
========================================================= */

@media (
    max-width:
    600px
) {

    .activity-feedback-buttons {

        grid-template-columns:
            1fr;

    }

}

/* =========================================================
   COMPLETION BUTTONS
========================================================= */

.completion-actions {
    margin-top: 24px;

    display: grid;

    gap: 9px;
}


.completion-primary-button,
.completion-secondary-button {
    min-height: 46px;

    border-radius: 12px;

    font: inherit;

    font-weight: 850;

    cursor: pointer;

    touch-action: manipulation;
}


.completion-primary-button {
    border: 0;

    background:
        #1f7a45;

    color:
        #ffffff;

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


@media (hover: hover) {

    .completion-primary-button:hover {
        background:
            #248d51;
    }
}


.completion-secondary-button {
    border:
        1px solid
        #d9e2dc;

    background:
        #ffffff;

    color:
        #455248;
}


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

@media (max-width: 600px) {

    .module-complete-overlay {
        padding: 10px;
    }


    .module-complete-card {
        max-height:
            calc(
                100dvh -
                20px
            );

        padding:
            18px 15px;

        border-radius: 18px;
    }


 .completion-icon {
    width: 64px;
    height: 64px;

    margin-bottom: 12px;
}

.completion-icon img {
    width: 46px;
    height: 46px;
}


    .module-complete-card h2 {
        font-size:
            1.25rem;
    }


    .completion-xp {
        margin:
            12px 0 15px;
    }


    .completion-xp-plus {
        font-size:
            1.55rem;
    }


    .completion-progress-section {
        margin-top: 9px;

        padding:
            12px;
    }


    .completion-section-heading {
        gap: 10px;

        margin-bottom: 11px;
    }


    .completion-section-icon,
    .completion-badge-icon {
        width: 48px;
        height: 48px;

        flex: 0 0 48px;
    }


    .completion-badge-icon img {
        width: 42px;
        height: 42px;
    }


    .completion-section-label {
        font-size: 10px;
    }


    .completion-section-heading strong {
        font-size: 15px;
    }


    .completion-progress-number {
        font-size: 14px;
    }


    .completion-progress-message,
    .badge-section .completion-progress-message {
        margin-top: 10px;

        font-size: 14px;

        font-weight: 650;

        line-height: 1.45;
    }


    .completion-actions {
        margin-top: 14px;
    }
}