/* =========================================================
   BIOLOGY BRAIN
   MATCHING GAME
========================================================= */


/* =========================================================
   ROOT
========================================================= */

:root {

    --bb-green:
        #1e7e34;

    --bb-green-dark:
        #17642a;

    --bb-green-soft:
        #e7f4eb;

    --bb-green-pale:
        #f2f8f4;

    --bb-background:
        #f7faf8;

    --bb-card:
        #ffffff;

    --bb-text:
        #18221c;

    --bb-muted:
        #69756e;

    --bb-border:
        #dce7df;

    --bb-border-dark:
        #c9d8ce;

    --bb-success:
        #1e7e34;

    --bb-success-bg:
        #e7f6ec;

    --bb-error:
        #c9413d;

    --bb-error-bg:
        #fceceb;

}


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

* {

    box-sizing:
        border-box;

}


html {

    scroll-behavior:
        smooth;

}


body {

    margin:
        0;

    min-height:
        100vh;

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

    background:
        var(--bb-background);

    color:
        var(--bb-text);

}


button,
a {

    font:
        inherit;

}


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

.matching-page {

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

    margin:
        0 auto;

    padding:
        28px 0 60px;

}


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

.matching-topbar {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        18px;

}


.back-link {

    display:
        inline-flex;

    align-items:
        center;

    min-height:
        42px;

    padding:
        0 16px;

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

    border-radius:
        999px;

    background:
        #ffffff;

    color:
        var(--bb-green);

    text-decoration:
        none;

    font-size:
        14px;

    font-weight:
        800;

    transition:
        0.18s ease;

}


.back-link:hover {

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

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

}


.matching-brand {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    text-decoration:
        none;

}


.matching-brand img {

    width:
        105px;

    height:
        105px;

    display:
        block;

    object-fit:
        contain;

    transition:
        transform 0.18s ease;

}


.matching-brand:hover img {

    transform:
        scale(1.05);

}


/* =========================================================
   HERO
========================================================= */

.matching-hero {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        36px;

    margin-bottom:
        24px;

}


.matching-hero-copy {

    max-width:
        780px;

}


.matching-eyebrow {

    margin:
        0 0 10px;

    color:
        var(--bb-green);

    font-size:
        13px;

    font-weight:
        850;

    letter-spacing:
        0.09em;

}


.matching-hero h1 {

    margin:
        0;

    font-size:
        clamp(
            36px,
            5vw,
            58px
        );

    line-height:
        1.05;

    letter-spacing:
        -0.035em;

}


.matching-subtitle {

    max-width:
        720px;

    margin:
        16px 0 0;

    color:
        var(--bb-muted);

    font-size:
        18px;

    line-height:
        1.55;

}


.matching-hero-badge {

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    min-width:
        190px;

    padding:
        16px 18px;

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

    border-radius:
        18px;

    background:
        #ffffff;

    box-shadow:
        0 8px 24px
        rgba(
            25,
            76,
            42,
            0.06
        );

}


.matching-hero-badge > span {

    display:
        grid;

    place-items:
        center;

    width:
        46px;

    height:
        46px;

    border-radius:
        14px;

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

    font-size:
        23px;

}


.matching-hero-badge strong {

    display:
        block;

    font-size:
        15px;

}


.matching-hero-badge small {

    display:
        block;

    margin-top:
        3px;

    color:
        var(--bb-muted);

}


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

.matching-instruction-card {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        14px;

    margin-bottom:
        24px;

    padding:
        17px 20px;

    border:
        1px solid #d6e9dc;

    border-radius:
        18px;

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

}


.instruction-icon {

    font-size:
        20px;

}


.matching-instruction-card strong {

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

}


.matching-instruction-card p {

    margin:
        4px 0 0;

    color:
        var(--bb-muted);

    font-size:
        14px;

    line-height:
        1.5;

}


/* =========================================================
   MAIN SHELL
========================================================= */

.matching-shell {

    padding:
        28px;

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

    border-radius:
        26px;

    background:
        #ffffff;

    box-shadow:
        0 14px 38px
        rgba(
            24,
            67,
            38,
            0.07
        );

}


.matching-layout {

    display:
        grid;

    grid-template-columns:
        minmax(
            260px,
            0.7fr
        )
        minmax(
            0,
            1.7fr
        );

    gap:
        24px;

    align-items:
        start;

}


/* =========================================================
   PANELS
========================================================= */

.term-panel,
.match-panel {

    padding:
        22px;

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

    border-radius:
        21px;

    background:
        #fbfdfb;

}


.panel-heading {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;

}


.panel-heading p {

    margin:
        0 0 3px;

    color:
        var(--bb-green);

    font-size:
        11px;

    font-weight:
        850;

    letter-spacing:
        0.08em;

}


.panel-heading h2 {

    margin:
        0;

    font-size:
        23px;

    letter-spacing:
        -0.02em;

}


.panel-helper {

    margin:
        10px 0 20px;

    color:
        var(--bb-muted);

    font-size:
        13px;

    line-height:
        1.5;

}


.term-count {

    display:
        grid;

    place-items:
        center;

    min-width:
        38px;

    height:
        34px;

    padding:
        0 10px;

    border-radius:
        999px;

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

    color:
        var(--bb-green);

    font-size:
        13px;

    font-weight:
        850;

}


/* =========================================================
   TERM BANK
========================================================= */

.term-bank {

    display:
        flex;

    flex-direction:
        column;

    gap:
        11px;

}


.term-card {

    width:
        100%;

    padding:
        14px 15px;

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

    border-radius:
        14px;

    background:
        #ffffff;

    color:
        var(--bb-text);

    font-size:
        15px;

    font-weight:
        800;

    text-align:
        center;

    cursor:
        grab;

    user-select:
        none;

    -webkit-user-select:
        none;

    touch-action:
        manipulation;

    transition:
        transform 0.15s ease,
        border-color 0.15s ease,
        background 0.15s ease,
        box-shadow 0.15s ease;

}


.term-card:hover {

    border-color:
        #91c29e;

    box-shadow:
        0 5px 16px
        rgba(
            30,
            126,
            52,
            0.08
        );

    transform:
        translateY(
            -1px
        );

}


.term-card:active {

    cursor:
        grabbing;

}


.term-card.selected {

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

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

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

    box-shadow:
        0 0 0 3px
        rgba(
            30,
            126,
            52,
            0.09
        );

}


/* =========================================================
   MATCH BOARD
========================================================= */

.match-board {

    display:
        flex;

    flex-direction:
        column;

    gap:
        13px;

}


.match-row {

    display:
        grid;

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

    gap:
        14px;

    align-items:
        stretch;

}


.description-card {

    display:
        flex;

    align-items:
        center;

    min-height:
        72px;

    padding:
        16px 18px;

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

    border-radius:
        15px;

    background:
        #ffffff;

    color:
        #354239;

    font-size:
        15px;

    line-height:
        1.5;

}


.match-drop-zone {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        72px;

    padding:
        12px 14px;

    border:
        2px dashed #b7cabe;

    border-radius:
        15px;

    background:
        #f8fbf9;

    color:
        #708078;

    font-size:
        14px;

    font-weight:
        800;

    text-align:
        center;

    cursor:
        pointer;

    touch-action:
        manipulation;

    transition:
        0.16s ease;

}


.match-drop-zone::before {

    content:
        "Place term here";

}


.match-drop-zone:hover {

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

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

}


.match-drop-zone.filled {

    border-style:
        solid;

    border-color:
        #98b9a2;

    background:
        #ffffff;

    color:
        var(--bb-text);

}


.match-drop-zone.filled::before {

    display:
        none;

}


.match-drop-zone.correct {

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

    background:
        var(--bb-success-bg);

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

}


.match-drop-zone.incorrect {

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

    background:
        var(--bb-error-bg);

    color:
        #9f302d;

}


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

.matching-footer {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        24px;

    margin-top:
        28px;

    padding-top:
        22px;

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

}


.game-status {

    min-height:
        26px;

    color:
        var(--bb-text);

    font-size:
        15px;

    font-weight:
        750;

}


.matching-actions {

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        12px;

}


.primary-btn,
.secondary-btn {

    min-height:
        46px;

    padding:
        0 21px;

    border-radius:
        12px;

    font-size:
        14px;

    font-weight:
        800;

    cursor:
        pointer;

    transition:
        0.16s ease;

}


.primary-btn {

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

    background:
        var(--bb-green);

    color:
        #ffffff;

}


.primary-btn:hover {

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

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

}


.secondary-btn {

    border:
        2px solid var(--bb-border-dark);

    background:
        #ffffff;

    color:
        var(--bb-green);

}


.secondary-btn:hover {

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

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

}


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

@media (
    max-width: 900px
) {

    .matching-page {

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

    }


    .matching-layout {

        grid-template-columns:
            1fr;

    }


    .term-bank {

        display:
            grid;

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

    }


    .matching-footer {

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .matching-actions {

        width:
            100%;

        justify-content:
            flex-end;

    }

}


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

@media (
    max-width: 650px
) {

    .matching-page {

        width:
            100%;

        padding:
            16px 14px 36px;

    }


    .matching-topbar {

        margin-bottom:
            22px;

    }


    .matching-brand img {

        width:
            78px;
    
        height:
            78px;
    
    }


    .matching-hero {

        align-items:
            stretch;

        flex-direction:
            column;

        gap:
            18px;

    }


    .matching-hero h1 {

        font-size:
            38px;

    }


    .matching-subtitle {

        font-size:
            16px;

    }


    .matching-hero-badge {

        width:
            100%;

    }


    .matching-shell {

        padding:
            16px;

        border-radius:
            20px;

    }


    .term-panel,
    .match-panel {

        padding:
            16px;

    }


    .term-bank {

        grid-template-columns:
            1fr 1fr;

        gap:
            9px;

    }


    .term-card {

        padding:
            13px 10px;

        font-size:
            14px;

    }


    .match-row {

        grid-template-columns:
            1fr;

        gap:
            7px;

        padding-bottom:
            12px;

        border-bottom:
            1px solid #e7eee9;

    }


    .match-row:last-child {

        border-bottom:
            none;

    }


    .description-card,
    .match-drop-zone {

        min-height:
            62px;

    }


    .matching-footer {

        margin-top:
            20px;

    }


    .matching-actions {

        display:
            grid;

        grid-template-columns:
            1fr 1.35fr;

    }


    .primary-btn,
    .secondary-btn {

        width:
            100%;

        padding:
            0 12px;

    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (
    max-width: 420px
) {

    .term-bank {

        grid-template-columns:
            1fr;

    }


    .matching-instruction-card {

        padding:
            14px 15px;

    }


    .matching-actions {

        grid-template-columns:
            1fr;

    }

}