:root {

    --cream:#f8f8ee;

    --teal:#16cfbf;

    --deep-teal:#13605e;

    --magenta:#a22282;

    --brown:#4d3b34;

    --paper:#fffef8;

    --muted:#786e68;

    --line:rgba(77,59,52,.12);

    --soft-teal:rgba(22,207,191,.09);

    --soft-magenta:rgba(162,34,130,.07);

    --shadow:
        0 22px 60px
        rgba(77,59,52,.11);

}


/* ==========================================
GENERAL
========================================== */

.hidden {
    display:none !important;
}


body {
    margin:0;
    background:var(--cream);
    color:var(--brown);
}


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

.object-header {

    height:64px;

    background:
        rgba(248,248,238,.95);

    border-bottom:
        1px solid rgba(77,59,52,.08);

    backdrop-filter:
        blur(10px);

}


.object-header-inner {

    height:64px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:18px;

}


.object-logo {
    height:42px;
    width:auto;
    max-width:155px;
    object-fit:contain;
}


.object-header-actions {

    display:flex;
    align-items:center;
    gap:9px;

}


.header-button,
.back-to-library {

    appearance:none;

    border:
        1px solid rgba(19,96,94,.18);

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

    color:
        var(--deep-teal);

    border-radius:
        999px;

    padding:
        8px 13px;

    font:
        inherit;

    font-size:
        .82rem;

    font-weight:
        700;

    text-decoration:none;

    cursor:pointer;

    transition:.2s ease;

}


.header-button:hover,
.back-to-library:hover {

    color:
        var(--magenta);

    border-color:
        var(--magenta);

    transform:
        translateY(-1px);

}


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

.object-game-page {

    min-height:
        calc(100vh - 64px);

    background:

        radial-gradient(
            circle at 10% 15%,
            rgba(22,207,191,.10),
            transparent 26%
        ),

        radial-gradient(
            circle at 90% 82%,
            rgba(162,34,130,.08),
            transparent 26%
        ),

        var(--cream);

}


.game-screen {
    display:none;
}


.game-screen.active {

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:
        calc(100vh - 64px);

    padding:
        20px 0;

    box-sizing:border-box;

}


.game-shell {

    width:
        min(
            860px,
            91vw
        );

    margin:auto;

}


.wide-shell {

    width:
        min(
            980px,
            92vw
        );

}


.intro-shell {

    width:
        min(
            720px,
            91vw
        );

}


.result-shell {

    width:
        min(
            850px,
            91vw
        );

}


/* ==========================================
CARDS
========================================== */

.game-card {

    position:relative;

    overflow:hidden;

    box-sizing:border-box;

    width:100%;

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

    border:
        1px solid rgba(77,59,52,.08);

    border-radius:
        28px;

    box-shadow:
        var(--shadow);

    padding:
        32px 38px;

}


.intro-card {

    padding:
        56px 46px;

    text-align:center;

}


.intro-content {
    position:relative;
    z-index:2;
}


.intro-orb {

    position:absolute;

    border-radius:50%;

    pointer-events:none;

}


.orb-one {

    width:220px;
    height:220px;

    left:-90px;
    top:-100px;

    background:
        rgba(22,207,191,.11);

}


.orb-two {

    width:190px;
    height:190px;

    right:-75px;
    bottom:-80px;

    background:
        rgba(162,34,130,.09);

}


/* ==========================================
TYPE
========================================== */

.eyebrow {

    margin:0 0 7px;

    color:
        var(--magenta);

    text-transform:uppercase;

    letter-spacing:.13em;

    font-size:.7rem;

    font-weight:800;

}


.game-card h1,
.game-card h2,
.clues-panel h2 {

    font-family:
        var(
            --heading-font,
            "Lora",
            serif
        );

    color:
        var(--deep-teal);

}


.game-card h1 {

    margin:
        7px 0 12px;

    font-size:
        clamp(
            2.5rem,
            5vw,
            4rem
        );

}


.game-card h2 {

    margin:
        7px 0 11px;

    font-size:
        clamp(
            1.75rem,
            3vw,
            2.45rem
        );

}


.game-card h3 {
    margin:0 0 7px;
    color:var(--brown);
}


.intro-lead {

    margin:
        0 0 10px;

    font-size:
        1.2rem;

    font-weight:
        750;

}


.intro-copy {

    max-width:
        600px;

    margin:
        7px auto;

    color:
        var(--muted);

    line-height:
        1.6;

}


.intro-copy.smaller {
    font-size:.93rem;
}


.screen-copy,
.question-help {

    color:
        var(--muted);

    line-height:
        1.5;

}


.screen-copy {
    margin:0 0 20px;
}


.question-help {
    margin:0 0 11px;
    font-size:.87rem;
}


/* ==========================================
WELCOME
========================================== */

.intro-pills {

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:8px;

    margin:
        22px 0 27px;

}


.intro-pills span {

    padding:
        7px 12px;

    border-radius:
        999px;

    background:
        var(--soft-teal);

    color:
        var(--deep-teal);

    font-size:
        .77rem;

    font-weight:
        700;

}


/* ==========================================
PROFILE
========================================== */

.profile-topline {

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

    margin-bottom:15px;

}


.object-number {
    color:var(--muted);
    font-size:.75rem;
}


.profile-layout {

    display:grid;

    grid-template-columns:
        160px 1fr;

    gap:28px;

    align-items:center;

}


.object-visual {

    min-height:175px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:22px;

    background:

        linear-gradient(
            145deg,
            rgba(22,207,191,.10),
            rgba(162,34,130,.06)
        );

}


.object-emoji {

    font-size:6.5rem;

    line-height:1;

    filter:
        drop-shadow(
            0 10px 13px
            rgba(77,59,52,.12)
        );

}


.profile-basics {

    display:grid;

    gap:9px;

}


.profile-basics div {

    padding-bottom:8px;

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

}


.profile-basics div:last-child {
    border-bottom:none;
}


.profile-basics span,
.profile-fun-card span {

    display:block;

    margin-bottom:3px;

    color:
        var(--magenta);

    text-transform:uppercase;

    letter-spacing:.07em;

    font-size:.66rem;

    font-weight:800;

}


.profile-basics p,
.profile-fun-card p {

    margin:0;

    line-height:1.45;

}


.profile-fun-grid {

    display:grid;

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

    gap:10px;

    margin-top:23px;

}


.profile-fun-card {

    min-height:95px;

    padding:
        13px 14px;

    border-radius:
        16px;

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

    border:
        1px solid rgba(77,59,52,.07);

}


.profile-fun-card p {
    font-size:.87rem;
}


/* ==========================================
QUESTIONS / CHOICES
========================================== */

.question-block {

    margin-top:25px;

    padding-top:21px;

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

}


.choice-grid {

    display:flex;

    flex-wrap:wrap;

    gap:9px;

}


.choice-button,
.trait-bank-button,
.reaction-button,
.decision-button {

    appearance:none;

    border:
        1px solid rgba(19,96,94,.19);

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

    color:
        var(--brown);

    border-radius:
        999px;

    padding:
        9px 14px;

    font:
        inherit;

    font-size:
        .86rem;

    cursor:pointer;

    transition:
        .18s ease;

}


.choice-button:hover,
.trait-bank-button:hover,
.reaction-button:hover,
.decision-button:hover {

    transform:
        translateY(-1px);

    border-color:
        var(--teal);

    background:#fff;

}


.choice-button.selected,
.reaction-button.selected,
.decision-button.selected {

    background:
        var(--deep-teal);

    border-color:
        var(--deep-teal);

    color:#fff;

    font-weight:700;

}


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

.sort-instructions {

    display:grid;

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

    gap:10px;

    margin:
        17px 0;

}


.sort-instructions > div {

    display:flex;

    gap:9px;

    align-items:flex-start;

    padding:
        11px 12px;

    border-radius:
        14px;

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

    border:
        1px solid rgba(77,59,52,.07);

}


.instruction-number {

    flex-shrink:0;

    width:24px;
    height:24px;

    border-radius:50%;

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

    background:
        var(--deep-teal);

    color:#fff;

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

}


.sort-instructions p {

    margin:0;

    font-size:.78rem;

    line-height:1.4;

}


/* ==========================================
TRAIT SORTING
========================================== */

.trait-bank {

    display:flex;

    flex-wrap:wrap;

    gap:9px;

    margin:
        18px 0 23px;

    padding:
        18px;

    border-radius:
        18px;

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

    border:
        1px dashed rgba(19,96,94,.20);

}


.trait-bank-button {

    position:relative;
}


.trait-bank-button.positive {

    background:
        rgba(22,207,191,.13);

    color:
        var(--deep-teal);

    border-color:
        rgba(19,96,94,.30);

}


.trait-bank-button.concern {

    background:
        rgba(162,34,130,.10);

    color:
        var(--magenta);

    border-color:
        rgba(162,34,130,.25);

}


.sorting-grid {

    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:15px;

}


.sorting-column {

    min-height:205px;

    padding:
        18px;

    border-radius:
        19px;

}


.draws-column {

    background:
        rgba(22,207,191,.075);

    border:
        1px solid rgba(19,96,94,.13);

}


.pause-column {

    background:
        rgba(162,34,130,.055);

    border:
        1px solid rgba(162,34,130,.12);

}


.sorting-heading {

    display:flex;

    gap:10px;

    align-items:flex-start;

    margin-bottom:13px;

}


.sorting-icon {
    font-size:1.45rem;
}


.sorting-heading h3 {
    margin:0 0 2px;
}


.sorting-heading p {

    margin:0;

    color:
        var(--muted);

    font-size:.79rem;

    line-height:1.35;

}


.sorted-traits {

    display:flex;

    flex-wrap:wrap;

    gap:7px;

}


.sorted-trait {

    border-radius:
        999px;

    padding:
        7px 11px;

    font-size:
        .8rem;

    font-weight:
        650;

}


.draws-column
.sorted-trait {

    background:
        rgba(22,207,191,.16);

    color:
        var(--deep-teal);

}


.pause-column
.sorted-trait {

    background:
        rgba(162,34,130,.11);

    color:
        var(--magenta);

}


.empty-sort {

    color:
        var(--muted);

    font-size:.78rem;

    font-style:italic;

}



/* ==========================================
DATE SCENE
========================================== */

.date-scene {

    display:grid;

    grid-template-columns:
        115px 1fr;

    gap:23px;

    margin-top:22px;

    padding:
        24px;

    border-radius:
        22px;

    background:

        linear-gradient(
            145deg,
            rgba(22,207,191,.07),
            rgba(255,255,255,.48)
        );

    border:
        1px solid rgba(19,96,94,.09);

}


.date-scene-emoji {

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:4.6rem;

}


.date-scene-copy {

    line-height:1.68;

}


.date-scene-copy p {

    margin:
        0 0 11px;

}


.date-scene-copy
p:last-child {
    margin-bottom:0;
}


/* ==========================================
MOMENT
========================================== */

.moment-box {

    margin:
        23px 0;

    padding:
        27px;

    border-radius:
        22px;

    background:

        linear-gradient(
            145deg,
            rgba(162,34,130,.06),
            rgba(22,207,191,.07)
        );

    text-align:center;

}


.moment-emoji {
    font-size:3.6rem;
    margin-bottom:10px;
}


.moment-text {

    max-width:650px;

    margin:auto;

    line-height:1.68;

    font-size:1.03rem;

}


.moment-text p {
    margin:0 0 10px;
}


.reaction-grid {

    display:grid;

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

    gap:9px;

}


.reaction-button {

    border-radius:
        15px;

    text-align:left;

    line-height:1.4;

}


.reaction-button.selected {

    background:
        var(--deep-teal);

    color:#fff;

    border-color:
        var(--deep-teal);

}


/* ==========================================
DECISION
========================================== */

.decision-grid {

    display:grid;

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

    gap:12px;

    margin-top:24px;

}


.decision-button {

    border-radius:18px;

    min-height:95px;

    padding:14px;

    font-weight:700;

    line-height:1.4;

}


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

.result-copy {

    margin-top:17px;

    line-height:1.72;

}


.result-copy p {
    margin:0 0 14px;
}


.personal-pattern-box {

    margin-top:23px;

    padding:
        19px 21px;

    border-radius:
        18px;

    background:
        var(--soft-magenta);

    border:
        1px solid rgba(162,34,130,.10);

    line-height:1.55;

}


.personal-pattern-box h3 {
    margin:0 0 9px;
}


.personal-pattern-box p {
    margin:0 0 8px;
}


.personal-pattern-box
p:last-child {
    margin-bottom:0;
}


.lesson-box {

    margin-top:21px;

    padding:
        20px 22px;

    border-radius:
        18px;

    background:
        var(--soft-teal);

    border:
        1px solid rgba(19,96,94,.10);

    text-align:center;

}


.lesson-box p {
    margin:0 0 4px;
}


.lesson-box strong {

    color:
        var(--deep-teal);

    font-family:
        var(
            --heading-font,
            "Lora",
            serif
        );

    font-size:1.15rem;

}


/* ==========================================
SAVE CLUES
========================================== */

.save-clues-card {

    display:grid;

    grid-template-columns:
        55px 1fr;

    gap:16px;

    margin-top:24px;

    padding:
        21px 22px;

    border-radius:
        20px;

    background:

        linear-gradient(
            135deg,
            rgba(22,207,191,.08),
            rgba(162,34,130,.055)
        );

    border:
        1px solid rgba(19,96,94,.12);

}


.save-clues-icon {

    width:50px;
    height:50px;

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

    border-radius:16px;

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

    font-size:1.8rem;

}


.save-clues-copy h3 {
    margin:0 0 6px;
}


.save-clues-copy p {

    margin:
        0 0 8px;

    line-height:1.55;

    font-size:.88rem;

}


.save-clues-small {

    color:
        var(--muted);

    font-size:.78rem !important;

}


.save-button {

    margin-top:7px;

    background:
        linear-gradient(
            135deg,
            var(--magenta),
            #bb3b98
        );

    color:#fff;

    box-shadow:
        0 7px 18px
        rgba(162,34,130,.18);

}


.save-status {

    min-height:18px;

    margin:
        8px 0 0 !important;

    color:
        var(--deep-teal);

    font-weight:700;

    font-size:.78rem !important;

}


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

.game-actions {

    display:flex;

    justify-content:center;

    gap:11px;

    margin-top:26px;

}


.split-actions {
    justify-content:space-between;
}


.result-actions {
    flex-wrap:wrap;
}


.game-button {

    appearance:none;

    border:none;

    border-radius:
        999px;

    padding:
        11px 19px;

    font:
        inherit;

    font-size:
        .88rem;

    font-weight:
        750;

    cursor:pointer;

    text-decoration:none;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    transition:.18s ease;

}


.game-button:disabled {

    opacity:.36;
    cursor:not-allowed;

}


.primary-button {

    background:
        linear-gradient(
            135deg,
            var(--deep-teal),
            #18827d
        );

    color:#fff;

    box-shadow:
        0 8px 20px
        rgba(19,96,94,.17);

}


.reflection-button {

    background:
        linear-gradient(
            135deg,
            var(--magenta),
            #bd3b99
        );

    color:#fff;

    box-shadow:
        0 8px 20px
        rgba(162,34,130,.17);

}


.primary-button:not(:disabled):hover,
.reflection-button:not(:disabled):hover,
.save-button:not(:disabled):hover {

    transform:
        translateY(-2px);

}


.ghost-button {

    background:transparent;

    color:
        var(--deep-teal);

    border:
        1px solid rgba(19,96,94,.20);

}


.ghost-button:hover {
    background:var(--soft-teal);
}


/* ==========================================
DATING CLUES MODAL
========================================== */

.clues-overlay {

    position:fixed;

    inset:0;

    z-index:2000;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:20px;

    background:
        rgba(28,38,36,.48);

    backdrop-filter:
        blur(6px);

}


.clues-panel {

    width:
        min(
            760px,
            94vw
        );

    max-height:
        84vh;

    overflow:auto;

    box-sizing:border-box;

    padding:
        25px;

    border-radius:
        24px;

    background:
        var(--paper);

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

}


.clues-header {

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:14px;

    margin-bottom:18px;

}


.clues-header h2 {
    margin:0;
}


.clues-close {

    width:35px;
    height:35px;

    border:none;

    border-radius:50%;

    background:
        var(--soft-teal);

    color:
        var(--deep-teal);

    font-size:1.4rem;

    cursor:pointer;

}


.clue-section {

    margin-top:18px;

    padding:
        18px;

    border-radius:
        17px;

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

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

}


.clue-section h3 {
    margin:0 0 9px;
}


.clue-tags {

    display:flex;

    flex-wrap:wrap;

    gap:7px;

}


.clue-tag {

    padding:
        6px 10px;

    border-radius:
        999px;

    background:
        var(--soft-teal);

    color:
        var(--deep-teal);

    font-size:
        .8rem;

    font-weight:
        700;

}


.clue-tag.concern {
    background:var(--soft-magenta);
    color:var(--magenta);
}


.clue-note {

    margin-top:17px;

    color:
        var(--muted);

    font-size:
        .83rem;

    line-height:1.5;

}


.empty-clues {

    text-align:center;

    padding:
        32px 15px;

    color:
        var(--muted);

}


/* ==========================================
DESKTOP HEIGHT
========================================== */

@media
(min-width:850px)
and
(max-height:800px) {

    .game-screen.active {

        align-items:flex-start;

        min-height:auto;

        padding:
            12px 0 18px;

    }


    .game-card {
        padding:24px 32px;
    }


    .profile-fun-grid {
        margin-top:15px;
    }


    .profile-fun-card {
        min-height:76px;
        padding:10px 12px;
    }


    .profile-fun-card p {
        font-size:.81rem;
    }


    .question-block {
        margin-top:18px;
        padding-top:16px;
    }


    .game-actions {
        margin-top:19px;
    }

}


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

@media
(max-width:760px) {

    .game-screen.active {

        align-items:flex-start;

        min-height:auto;

        padding:
            18px 0 30px;

    }


    .game-card {

        padding:
            26px 20px;

        border-radius:
            22px;

    }


    .intro-card {
        padding:43px 22px;
    }


    .profile-layout {

        grid-template-columns:
            1fr;

        gap:16px;

    }


    .object-visual {
        min-height:135px;
    }


    .object-emoji {
        font-size:5.4rem;
    }


    .profile-fun-grid {
        grid-template-columns:1fr 1fr;
    }


    .sort-instructions {
        grid-template-columns:1fr;
    }


    .sorting-grid {
        grid-template-columns:1fr;
    }


    .date-scene {

        grid-template-columns:1fr;

        text-align:left;

    }


    .date-scene-emoji {
        font-size:4rem;
    }


    .reaction-grid,
    .decision-grid {
        grid-template-columns:1fr;
    }


    .save-clues-card {
        grid-template-columns:1fr;
    }


    .save-clues-icon {
        margin:auto;
    }


    .split-actions {
        gap:8px;
    }


    .split-actions .game-button {

        flex:1;

        padding-left:10px;

        padding-right:10px;

    }


    .header-button {
        display:none;
    }

}


@media
(max-width:480px) {

    .profile-fun-grid {
        grid-template-columns:1fr;
    }

}