/* ======================================================
   BIOLOGY BRAIN
   WATER DRAWING CHALLENGE
====================================================== */


:root {

    --green:
        #1e7e34;

    --green-dark:
        #176329;

    --green-soft:
        #e8f4eb;

    --background:
        #edf7f5;

    --white:
        #ffffff;

    --text:
        #172019;

    --muted:
        #68736c;

    --border:
        #d7e3dc;

    --shadow:
        0 12px 34px
        rgba(27, 69, 42, 0.08);

}


/* ======================================================
   RESET
====================================================== */

*,
*::before,
*::after {

    box-sizing:
        border-box;

}


html {

    scroll-behavior:
        smooth;

}


body {

    margin:
        0;

    min-height:
        100vh;

    background:
        linear-gradient(
            135deg,
            #edf7f5,
            #f4faf8
        );

    color:
        var(--text);

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

}


/* ======================================================
   PAGE
====================================================== */

.drawing-page {

    width:
        min(
            1440px,
            calc(100% - 48px)
        );

    margin:
        0 auto;

    padding:
        34px 0 54px;

}


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

.drawing-header {

    margin-bottom:
        28px;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        30px;

}


.drawing-header-copy {

    max-width:
        820px;

}


.drawing-eyebrow,
.sidebar-eyebrow {

    margin:
        0 0 7px;

    color:
        var(--green);

    font-size:
        11px;

    font-weight:
        900;

    letter-spacing:
        .11em;

    text-transform:
        uppercase;

}


.drawing-header h1 {

    margin:
        0;

    font-size:
        clamp(
            34px,
            4vw,
            52px
        );

    line-height:
        1.08;

    letter-spacing:
        -.03em;

}


.drawing-subtitle {

    max-width:
        760px;

    margin:
        12px 0 0;

    color:
        var(--muted);

    font-size:
        17px;

    line-height:
        1.55;

}


/* ======================================================
   MODE TOGGLE
====================================================== */

.mode-toggle {

    flex:
        0 0 auto;

    padding:
        5px;

    display:
        inline-flex;

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

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

    border-radius:
        14px;

}


.mode-button {

    min-width:
        92px;

    padding:
        11px 18px;

    border:
        none;

    border-radius:
        10px;

    background:
        transparent;

    color:
        var(--muted);

    font:
        inherit;

    font-size:
        14px;

    font-weight:
        850;

    cursor:
        pointer;

}


.mode-button.active {

    background:
        var(--green);

    color:
        white;

}


/* ======================================================
   MAIN LAYOUT
====================================================== */

.drawing-layout {

    display:
        grid;

    grid-template-columns:
        310px
        minmax(
            0,
            1fr
        );

    gap:
        24px;

    align-items:
        start;

}


/* ======================================================
   SIDEBAR
====================================================== */

.drawing-sidebar {

    display:
        flex;

    flex-direction:
        column;

    gap:
        18px;

}


.sidebar-card {

    padding:
        22px;

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

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

    border-radius:
        18px;

    box-shadow:
        0 5px 18px
        rgba(
            30,
            70,
            45,
            .045
        );

}


.task-card h2 {

    margin:
        0;

    font-size:
        21px;

    line-height:
        1.35;

}


/* ======================================================
   TASK CHECKLIST
====================================================== */

.task-checklist {

    margin:
        20px 0 0;

    padding:
        0;

    list-style:
        none;

    display:
        flex;

    flex-direction:
        column;

    gap:
        13px;

}


.task-checklist li {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    color:
        #465149;

    font-size:
        14px;

}


.task-checklist li > span {

    width:
        12px;

    height:
        12px;

    flex:
        0 0 auto;

    border:
        2px solid var(--green);

    border-radius:
        50%;

}


/* ======================================================
   TOOL GRID
====================================================== */

.tool-grid {

    display:
        grid;

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

    gap:
        10px;

}


.drawing-tool {

    min-height:
        96px;

    padding:
        12px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    background:
        white;

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

    border-radius:
        13px;

    color:
        var(--text);

    font:
        inherit;

    font-size:
        13px;

    font-weight:
        800;

    cursor:
        pointer;

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

}


.drawing-tool:hover {

    transform:
        translateY(-2px);

    border-color:
        #a9cdb4;

}


.drawing-tool.active {

    background:
        var(--green-soft);

    border-color:
        var(--green);

}


.tool-icon {

    font-size:
        24px;

}


/* ======================================================
   BOND ICONS
====================================================== */

.bond-tool-icon,
.hydrogen-bond-tool-icon {

    width:
        34px;

    height:
        18px;

    position:
        relative;

}


.bond-tool-icon::after {

    content:
        "";

    position:
        absolute;

    left:
        2px;

    right:
        2px;

    top:
        8px;

    height:
        3px;

    background:
        #202520;

    border-radius:
        999px;

}


.hydrogen-bond-tool-icon::after {

    content:
        "";

    position:
        absolute;

    left:
        2px;

    right:
        2px;

    top:
        8px;

    border-top:
        3px dashed #202520;

}


/* ======================================================
   SCIENTIFIC SYMBOLS
====================================================== */

.symbol-heading {

    margin-top:
        22px;

}


.symbol-grid {

    display:
        grid;

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

    gap:
        8px;

}


.symbol-tool {

    min-height:
        52px;

    background:
        white;

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

    border-radius:
        11px;

    color:
        var(--text);

    font:
        inherit;

    font-size:
        20px;

    font-weight:
        900;

    cursor:
        pointer;

}


.symbol-tool:hover {

    background:
        var(--green-soft);

    border-color:
        #a9cdb4;

}


.symbol-tool.active {

    background:
        var(--green);

    border-color:
        var(--green);

    color:
        white;

}


/* ======================================================
   UTILITIES
====================================================== */

.utility-grid {

    display:
        grid;

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

    gap:
        10px;

}


.utility-button {

    min-height:
        48px;

    background:
        white;

    border:
        2px solid #b9d2c0;

    border-radius:
        11px;

    color:
        var(--green);

    font:
        inherit;

    font-weight:
        850;

    cursor:
        pointer;

}


.submit-drawing-button {

    width:
        100%;

    min-height:
        52px;

    margin-top:
        12px;

    padding:
        12px 16px;

    background:
        var(--green);

    border:
        none;

    border-radius:
        11px;

    color:
        white;

    font:
        inherit;

    font-size:
        14px;

    font-weight:
        850;

    cursor:
        pointer;

}


.submit-drawing-button:hover {

    background:
        var(--green-dark);

}


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

.drawing-workspace {

    min-width:
        0;

    padding:
        24px;

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

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

    border-radius:
        20px;

    box-shadow:
        var(--shadow);

}


.drawing-workspace-header {

    margin-bottom:
        17px;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        24px;

}


.drawing-workspace-header h2 {

    margin:
        0;

    font-size:
        25px;

}


.drawing-workspace-header > p {

    max-width:
        440px;

    margin:
        0;

    color:
        var(--muted);

    font-size:
        14px;

    line-height:
        1.5;

    text-align:
        right;

}


/* ======================================================
   CANVAS SHELL
====================================================== */

.canvas-shell {

    position:
        relative;

    width:
        100%;

    aspect-ratio:
        16 / 10;

    overflow:
        hidden;

    background:
        #ffffff;

    border:
        2px solid #cbdcd1;

    border-radius:
        17px;

}


/* ======================================================
   TRACE GUIDE
====================================================== */

.trace-guide {

    position:
        absolute;

    inset:
        0;

    z-index:
        1;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        6%;

    pointer-events:
        none;

    transition:
        opacity .2s ease;

}


.trace-guide img {

    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        contain;

    opacity:
        .28;

}


.trace-guide.hidden {

    opacity:
        0;

}


/*
    The SVG does not exist yet.

    If Chrome cannot load it, the broken-image
    icon should never interfere with Hard Mode.
*/

.trace-guide.image-missing {

    display:
        none;

}


/* ======================================================
   DRAWING CANVAS
====================================================== */

.drawing-canvas {

    position:
        absolute;

    inset:
        0;

    z-index:
        2;

    width:
        100%;

    height:
        100%;

    display:
        block;

    cursor:
        crosshair;

    touch-action:
        none;

}


/* ======================================================
   SYMBOL LAYER
====================================================== */

.symbol-layer {

    position:
        absolute;

    inset:
        0;

    z-index:
        3;

    pointer-events:
        none;

}


.placed-symbol {

    position:
        absolute;

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

    color:
        #172019;

    font-size:
        clamp(
            18px,
            2vw,
            28px
        );

    font-weight:
        900;

    line-height:
        1;

    user-select:
        none;

}


/* ======================================================
   MODE BADGE
====================================================== */

.canvas-mode-badge {

    position:
        absolute;

    right:
        16px;

    bottom:
        16px;

    z-index:
        4;

    padding:
        7px 11px;

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

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

    border-radius:
        999px;

    color:
        var(--green);

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        .08em;

    pointer-events:
        none;

}


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

.drawing-tip {

    margin:
        12px 0 0;

    color:
        var(--muted);

    font-size:
        12px;

    text-align:
        center;

}


.drawing-feedback {

    min-height:
        24px;

    margin-top:
        14px;

    color:
        var(--green);

    font-size:
        14px;

    font-weight:
        750;

    text-align:
        center;

}


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

@media (
    max-width:
        1000px
) {

    .drawing-layout {

        grid-template-columns:
            1fr;

    }


    .drawing-sidebar {

        display:
            grid;

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

    }


    .drawing-sidebar
    .sidebar-card:last-child {

        grid-column:
            1 / -1;

    }

}


@media (
    max-width:
        700px
) {

    .drawing-page {

        width:
            calc(
                100% - 24px
            );

        padding-top:
            18px;

    }


    .drawing-header {

        align-items:
            stretch;

        flex-direction:
            column;

    }


    .mode-toggle {

        align-self:
            flex-start;

    }


    .drawing-sidebar {

        display:
            flex;

    }


    .drawing-workspace {

        padding:
            15px;

    }


    .drawing-workspace-header {

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .drawing-workspace-header > p {

        text-align:
            left;

    }


    .canvas-shell {

        aspect-ratio:
            4 / 3;

    }

}

/* ======================================================
   BACK TO A1.1
====================================================== */

.drawing-back-link {
    display: inline-flex;
    align-items: center;

    margin-bottom: 16px;

    color: #1e7e34;

    font-size: 14px;
    font-weight: 800;

    text-decoration: none;

    transition:
        transform 0.18s ease,
        color 0.18s ease;
}


.drawing-back-link:hover {
    color: #176329;

    transform:
        translateX(-3px);
}


/* ======================================================
   DRAWING RESULT OVERLAY
====================================================== */

body.drawing-result-open {
    overflow: hidden;
}


.drawing-result-overlay {
    position: fixed;
    inset: 0;

    z-index: 100000;

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

    padding: 24px;

    background:
        rgba(
            12,
            24,
            16,
            0.68
        );

    backdrop-filter:
        blur(5px);

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

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity 0.22s ease,
        visibility 0.22s ease;
}


.drawing-result-overlay.show {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}



.drawing-result-logo {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}

/* ======================================================
   RESULT MODAL
====================================================== */

.drawing-result-modal {
    position: relative;

    width:
        min(
            620px,
            100%
        );

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

    overflow-y: auto;

    padding:
        38px;

    background:
        #ffffff;

    border:
        1px solid
        #d7e4da;

    border-radius:
        26px;

    text-align:
        center;

    box-shadow:
        0 30px 90px
        rgba(
            0,
            0,
            0,
            0.32
        );

    transform:
        translateY(
            12px
        )
        scale(
            0.98
        );

    transition:
        transform
        0.22s ease;
}


.drawing-result-overlay.show
.drawing-result-modal {
    transform:
        translateY(
            0
        )
        scale(
            1
        );
}


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

.drawing-result-close {
    position: absolute;

    top: 16px;
    right: 16px;

    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    padding: 0;

    background:
        #eff5f1;

    border: none;

    border-radius:
        50%;

    color:
        #172019;

    font-size:
        27px;

    cursor: pointer;
}


.drawing-result-close:hover {
    background:
        #e4f2e8;

    color:
        #1e7e34;
}


/* ======================================================
   RESULT CONTENT
====================================================== */

.drawing-result-eyebrow {
    margin:
        0 0 14px;

    color:
        #1e7e34;

    font-size:
        12px;

    font-weight:
        900;

    letter-spacing:
        0.11em;

    text-transform:
        uppercase;
}


.drawing-result-icon {
    width: 110px;
    height: 110px;

    margin: 0 auto 18px;

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

    background: transparent;
    border-radius: 0;
}

.drawing-result-logo {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: contain;
}


.drawing-result-modal h2 {
    margin:
        0 0 20px;

    color:
        #18221c;

    font-size:
        32px;
}


.drawing-result-score {
    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        5px;

    margin:
        0 auto 18px;
}


.drawing-result-score strong {
    color:
        #1e7e34;

    font-size:
        48px;

    font-weight:
        900;

    line-height:
        1;
}


.drawing-result-score span {
    color:
        #657069;

    font-size:
        22px;

    font-weight:
        800;
}


.drawing-result-message {
    max-width:
        480px;

    margin:
        0 auto 22px;

    color:
        #49534d;

    font-size:
        16px;

    line-height:
        1.55;
}


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

.drawing-result-feedback {
    margin-top:
        22px;

    padding:
        20px;

    background:
        #f5faf6;

    border:
        1px solid
        #dbe9df;

    border-radius:
        16px;

    text-align:
        left;
}


.drawing-result-feedback-item {
    display:
        flex;

    align-items:
        flex-start;

    gap:
        10px;

    padding:
        6px 0;

    color:
        #48534c;

    font-size:
        14px;

    line-height:
        1.45;
}


.drawing-result-feedback-item.correct {
    color:
        #176329;
}


.drawing-result-feedback-item.incorrect {
    color:
        #a63838;
}


.drawing-result-feedback-icon {
    flex:
        0 0 auto;

    width:
        22px;

    font-weight:
        900;
}


/* ======================================================
   RESULT ACTIONS
====================================================== */

.drawing-result-actions {
    margin-top:
        26px;

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        11px;
}


.drawing-result-share,
.drawing-result-retry,
.drawing-result-back {
    min-height:
        50px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        12px 18px;

    border-radius:
        12px;

    font:
        inherit;

    font-size:
        14px;

    font-weight:
        800;

    text-decoration:
        none;

    cursor:
        pointer;
}


.drawing-result-share {
    background:
        #1e7e34;

    color:
        #ffffff;

    border:
        2px solid
        #1e7e34;
}


.drawing-result-share:hover {
    background:
        #176329;

    border-color:
        #176329;
}


.drawing-result-retry {
    background:
        #ffffff;

    color:
        #1e7e34;

    border:
        2px solid
        #1e7e34;
}


.drawing-result-retry:hover {
    background:
        #edf8f0;
}


.drawing-result-back {
    grid-column:
        1 /
        -1;

    background:
        #f2f5f3;

    color:
        #37423b;

    border:
        2px solid
        #d9e1db;
}


.drawing-result-back:hover {
    background:
        #e9eeeb;
}


/* ======================================================
   SHARE STATUS
====================================================== */

.drawing-share-status {
    min-height:
        21px;

    margin:
        16px 0 0;

    color:
        #1e7e34;

    font-size:
        13px;

    font-weight:
        750;
}


/* ======================================================
   MOBILE RESULT MODAL
====================================================== */

@media (
    max-width:
    600px
) {

    .drawing-result-overlay {
        padding:
            14px;
    }


    .drawing-result-modal {
        padding:
            32px 20px 22px;
    }


    .drawing-result-modal h2 {
        font-size:
            27px;
    }


    .drawing-result-score strong {
        font-size:
            42px;
    }


    .drawing-result-actions {
        grid-template-columns:
            1fr;
    }


    .drawing-result-back {
        grid-column:
            auto;
    }

}