:root {

    color-scheme: dark;

    --black: #06060a;
    --night: #0a0910;

    --panel: #111019;
    --panel-2: #17151e;

    --cream: #f0eadf;
    --muted: #aaa3a2;

    --teal: #83cbbb;
    --teal-dark: #396f68;

    --gold: #dfa947;
    --gold-light: #f0c66d;
    --gold-dark: #795b29;

    --wine: #43232c;

    --line: #55472e;

    --focus: #ffffff;

}


* {
    box-sizing: border-box;
}


html,
body {

    width: 100%;
    min-height: 100%;

    margin: 0;

}


button {

    font: inherit;

}


[hidden] {

    display: none !important;

}


body {

    min-height: 100svh;

    overflow-x: hidden;

    background:

        radial-gradient(
            circle at 78% 18%,
            #181522 0,
            #0b0a10 40%,
            #06060a 75%
        );

    color: var(--cream);

    font-family:

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

}


.screen {

    width: 100%;
    min-height: 100svh;

}


/* ==========================================================
   TITLE
========================================================== */


.title-screen {

    display: grid;

    place-items: center;

    padding:
        clamp(
            20px,
            5vw,
            60px
        );

}


.title-card {

    width:
        min(
            760px,
            94vw
        );

    padding:

        clamp(
            34px,
            6vw,
            72px
        )

        clamp(
            30px,
            6vw,
            70px
        );

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

    background:

        linear-gradient(
            150deg,
            rgba(22,20,29,.97),
            rgba(12,11,17,.97)
        );

    box-shadow:

        0 40px 120px
        rgba(0,0,0,.56),

        inset 0 0 80px
        rgba(255,205,105,.018);

}


.eyebrow,
.room-kicker {

    margin:
        0 0 12px;

    color:
        var(--gold);

    font-size:
        .73rem;

    font-weight:
        800;

    letter-spacing:
        .18em;

}


h1 {

    margin: 0;

    color:
        var(--cream);

    font-family:

        Georgia,
        "Times New Roman",
        serif;

    font-size:

        clamp(
            3.3rem,
            10vw,
            6.8rem
        );

    font-weight:
        400;

    line-height:
        .84;

}


h1 span {

    display: block;

    margin-top:
        26px;

    color:
        var(--teal);

    font-size:
        .55em;

    letter-spacing:
        .12em;

}


.tagline {

    margin:

        clamp(
            30px,
            5vw,
            48px
        )

        0 24px;

    color:
        #c9c0b5;

    font-family:

        Georgia,
        "Times New Roman",
        serif;

    font-size:
        1.08rem;

    font-style:
        italic;

}


.primary-button,
.secondary-button {

    min-height:
        50px;

    padding:
        13px 24px;

    cursor:
        pointer;

    font-weight:
        850;

}


.primary-button {

    border:
        1px solid
        #edbd61;

    background:

        linear-gradient(
            #e4b24f,
            #cc9130
        );

    color:
        #171008;

}


.secondary-button {

    display: block;

    margin-top:
        10px;

    border:
        1px solid
        #585159;

    background:
        #1b1821;

    color:
        #d7cfca;

}


.access-note {

    margin:
        18px 0 0;

    color:
        var(--muted);

    font-size:
        .77rem;

}


.baseline-mark {

    margin:
        28px 0 0;

    color:
        #6d686b;

    font-size:
        .62rem;

    font-weight:
        700;

    letter-spacing:
        .12em;

}


/* ==========================================================
   GAME FRAME
========================================================== */


.game-screen {

    min-height:
        100svh;

    padding:

        max(
            12px,
            env(safe-area-inset-top)
        )

        max(
            12px,
            env(safe-area-inset-right)
        )

        max(
            12px,
            env(safe-area-inset-bottom)
        )

        max(
            12px,
            env(safe-area-inset-left)
        );

    background:

        radial-gradient(
            circle at 50% 20%,
            #201821,
            #09080d 65%
        );

}


.game-header {

    width:
        min(
            1280px,
            100%
        );

    margin:
        0 auto 10px;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        20px;

}


.game-header h2 {

    margin: 0;

    font-family:

        Georgia,
        "Times New Roman",
        serif;

    font-size:

        clamp(
            1.45rem,
            4vw,
            2.2rem
        );

    font-weight:
        400;

}


.room-kicker {

    margin-bottom:
        4px;

}


.header-actions {

    display:
        flex;

    gap:
        8px;

}


.small-button {

    min-height:
        42px;

    border:
        1px solid
        #534c45;

    padding:
        8px 14px;

    background:
        #17151c;

    color:
        #d8d2cb;

    cursor:
        pointer;

}


.hover-label {

    width:
        min(
            1280px,
            100%
        );

    min-height:
        29px;

    margin:
        0 auto 7px;

    color:
        var(--gold-light);

    font-size:
        .72rem;

    font-weight:
        750;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

}


/* ==========================================================
   SHARED ROOM SCENE
========================================================== */


.scene {

    position:
        relative;

    width:
        min(
            1280px,
            100%
        );

    aspect-ratio:
        16 / 9;

    margin:
        auto;

    overflow:
        hidden;

    border:
        1px solid
        rgba(213,164,82,.48);

    box-shadow:

        0 30px 80px
        rgba(0,0,0,.5),

        inset 0 0 100px
        rgba(0,0,0,.4);

}


.scene::after {

    content: "";

    position:
        absolute;

    inset:
        0;

    pointer-events:
        none;

    background:

        radial-gradient(
            ellipse at center,
            transparent 28%,
            rgba(0,0,0,.5) 100%
        );

    z-index:
        20;

}


/* ==========================================================
   FOYER
========================================================== */


.scene-foyer {

    background:

        linear-gradient(
            #15121c 0 12%,
            #29222d 12% 72%,
            #171117 72%
        );

}


.scene-wall {

    position:
        absolute;

    inset:
        13% 0 24%;

    background:

        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,.016) 0 2px,
            transparent 2px 86px
        ),

        linear-gradient(
            180deg,
            #2b2230,
            #211a25
        );

}


.ceiling-beam {

    position:
        absolute;

    left:
        0;

    right:
        0;

    top:
        12%;

    height:
        2%;

    background:

        linear-gradient(
            #59472f,
            #2b2119
        );

}


.window {

    position:
        absolute;

    top:
        23%;

    width:
        11%;

    height:
        32%;

    overflow:
        hidden;

    border:
        6px solid
        #32251d;

    background:

        linear-gradient(
            #101625,
            #182436
        );

    box-shadow:
        inset 0 0 30px
        #05070b;

}


.window::before,
.window::after {

    content: "";

    position:
        absolute;

    background:
        #382c25;

    z-index:
        4;

}


.window::before {

    width:
        5px;

    top:
        0;

    bottom:
        0;

    left:
        48%;

}


.window::after {

    height:
        5px;

    left:
        0;

    right:
        0;

    top:
        47%;

}


.window-left {

    left:
        7%;

}


.window-right {

    right:
        7%;

}


.moon {

    position:
        absolute;

    width:
        33%;

    aspect-ratio:
        1;

    right:
        12%;

    top:
        12%;

    border-radius:
        50%;

    background:
        #d9dbc2;

    box-shadow:
        0 0 30px
        rgba(230,235,198,.22);

}


.rain {

    position:
        absolute;

    width:
        2px;

    height:
        26%;

    background:
        rgba(172,193,211,.35);

    transform:
        rotate(13deg);

    animation:
        rainfall 1.3s linear infinite;

}


.rain-a {

    left:
        23%;

}


.rain-b {

    left:
        58%;

    animation-delay:
        -.6s;

}


.rain-c {

    left:
        77%;

    animation-delay:
        -.3s;

}


@keyframes rainfall {

    from {

        top:
            -30%;

    }

    to {

        top:
            115%;

    }

}


.chandelier-art {

    position:
        absolute;

    left:
        50%;

    top:
        4%;

    width:
        18%;

    height:
        22%;

    transform:
        translateX(-50%);

    z-index:
        4;

}


.chandelier-art::before {

    content: "";

    position:
        absolute;

    left:
        50%;

    top:
        0;

    width:
        3px;

    height:
        53%;

    background:
        #7c663d;

}


.chandelier-art::after {

    content: "";

    position:
        absolute;

    left:
        16%;

    right:
        16%;

    bottom:
        22%;

    height:
        7%;

    border:
        4px solid
        #79623a;

    border-top:
        0;

    border-radius:
        0 0 50% 50%;

}


.chandelier-art span {

    position:
        absolute;

    bottom:
        9%;

    width:
        5%;

    height:
        15%;

    border-radius:
        50% 50% 35% 35%;

    background:
        #e3b155;

    box-shadow:
        0 0 20px
        rgba(240,176,73,.3);

    animation:
        lampflicker
        2.2s ease-in-out
        infinite;

}


.chandelier-art span:nth-child(1) {

    left:
        18%;

}


.chandelier-art span:nth-child(2) {

    left:
        48%;

    animation-delay:
        -.7s;

}


.chandelier-art span:nth-child(3) {

    right:
        18%;

    animation-delay:
        -1.3s;

}


@keyframes lampflicker {

    0%,
    94%,
    100% {

        opacity:
            1;

    }

    95% {

        opacity:
            .55;

    }

}


.stairs-art {

    position:
        absolute;

    left:
        22%;

    bottom:
        22%;

    width:
        35%;

    height:
        50%;

    z-index:
        5;

}


.stair-step {

    position:
        absolute;

    left:
        0;

    height:
        9%;

    border-top:
        2px solid
        #755b41;

    background:

        linear-gradient(
            90deg,
            #342923,
            #574131
        );

}


.s1 {

    bottom:
        0;

    width:
        100%;

}


.s2 {

    bottom:
        9%;

    left:
        8%;

    width:
        92%;

}


.s3 {

    bottom:
        18%;

    left:
        16%;

    width:
        84%;

}


.s4 {

    bottom:
        27%;

    left:
        24%;

    width:
        76%;

}


.s5 {

    bottom:
        36%;

    left:
        32%;

    width:
        68%;

}


.s6 {

    bottom:
        45%;

    left:
        40%;

    width:
        60%;

}


.stair-rail {

    position:
        absolute;

    left:
        16%;

    bottom:
        42%;

    width:
        79%;

    height:
        5px;

    background:
        #8e6a3c;

    transform:
        rotate(-29deg);

    transform-origin:
        left center;

    box-shadow:
        0 6px 0
        #29201a;

}


.portrait-art {

    position:
        absolute;

    right:
        27%;

    top:
        24%;

    width:
        10%;

    height:
        24%;

    border:
        7px ridge
        #876432;

    background:

        radial-gradient(
            ellipse at center 40%,
            #60504e 0 18%,
            #33272e 19% 55%,
            #171218 56%
        );

    z-index:
        3;

}


.portrait-face {

    position:
        absolute;

    width:
        23%;

    aspect-ratio:
        .8;

    left:
        39%;

    top:
        23%;

    border-radius:
        50% 50% 45% 45%;

    background:
        #9c8170;

}


.table-art {

    position:
        absolute;

    right:
        23%;

    bottom:
        21%;

    width:
        18%;

    height:
        17%;

    z-index:
        6;

}


.table-top {

    position:
        absolute;

    top:
        0;

    width:
        100%;

    height:
        22%;

    border:
        2px solid
        #8d6941;

    background:
        #463124;

}


.table-drawer {

    position:
        absolute;

    left:
        23%;

    top:
        22%;

    width:
        54%;

    height:
        20%;

    border:
        1px solid
        #60402d;

    background:
        #2d201a;

}


.table-leg {

    position:
        absolute;

    top:
        20%;

    width:
        8%;

    height:
        80%;

    background:
        #38261d;

}


.leg-a {

    left:
        12%;

}


.leg-b {

    right:
        12%;

}


.east-door-art {

    position:
        absolute;

    right:
        4%;

    bottom:
        23%;

    width:
        14%;

    height:
        45%;

    border:
        8px solid
        #241b18;

    background:

        linear-gradient(
            90deg,
            #3f2b27,
            #261c1d
        );

    z-index:
        5;

}


.east-door-art.unlocked {

    box-shadow:
        inset 18px 0 40px
        rgba(90,137,127,.17);

}


.door-panel {

    position:
        absolute;

    inset:
        10%;

    border:
        2px solid
        #63453a;

}


.door-knob {

    position:
        absolute;

    left:
        13%;

    top:
        53%;

    width:
        7%;

    aspect-ratio:
        1;

    border-radius:
        50%;

    background:
        #c39441;

    box-shadow:
        0 0 8px
        #daa950;

}


.front-door-art {

    position:
        absolute;

    left:
        2%;

    bottom:
        23%;

    width:
        15%;

    height:
        44%;

    border:
        8px solid
        #251c19;

    background:

        linear-gradient(
            90deg,
            #34241f,
            #251919
        );

    z-index:
        5;

}


.front-door-panel {

    position:
        absolute;

    inset:
        10%;

    border:
        2px solid
        #5a3b30;

}


.foyer-rug {

    position:
        absolute;

    left:
        34%;

    bottom:
        8%;

    width:
        34%;

    height:
        19%;

    transform:

        perspective(260px)
        rotateX(55deg);

    border:
        6px double
        #a7733b;

    background:

        repeating-linear-gradient(
            45deg,
            #4e2630 0 22px,
            #30191f 22px 44px
        );

    z-index:
        4;

}


/* ==========================================================
   STUDY
========================================================== */


.scene-study {

    background:

        linear-gradient(
            #11141a 0 12%,
            #1d2024 12% 73%,
            #121014 73%
        );

}


.study-wall {

    position:
        absolute;

    inset:
        12% 0 24%;

    background:

        repeating-linear-gradient(
            90deg,
            rgba(173,140,89,.025) 0 3px,
            transparent 3px 95px
        ),

        linear-gradient(
            #242328,
            #1a191e
        );

}


.study-window {

    position:
        absolute;

    left:
        5%;

    top:
        21%;

    width:
        14%;

    height:
        34%;

    overflow:
        hidden;

    border:
        7px solid
        #29221d;

    background:
        #0c1520;

}


.study-window::before,
.study-window::after {

    content: "";

    position:
        absolute;

    background:
        #3b3028;

    z-index:
        3;

}


.study-window::before {

    width:
        5px;

    top:
        0;

    bottom:
        0;

    left:
        48%;

}


.study-window::after {

    height:
        5px;

    left:
        0;

    right:
        0;

    top:
        48%;

}


.study-moon {

    position:
        absolute;

    right:
        12%;

    top:
        9%;

    width:
        29%;

    aspect-ratio:
        1;

    border-radius:
        50%;

    background:
        #d9d7ba;

    box-shadow:
        0 0 25px
        rgba(222,220,185,.22);

}


.rain-line {

    position:
        absolute;

    width:
        2px;

    height:
        24%;

    top:
        -30%;

    background:
        rgba(169,190,210,.33);

    transform:
        rotate(12deg);

    animation:
        studyRain
        1.15s linear
        infinite;

}


.r1 {

    left:
        20%;

}


.r2 {

    left:
        42%;

    animation-delay:
        -.3s;

}


.r3 {

    left:
        67%;

    animation-delay:
        -.6s;

}


.r4 {

    left:
        83%;

    animation-delay:
        -.9s;

}


@keyframes studyRain {

    to {

        top:
            120%;

    }

}


.bookshelf {

    position:
        absolute;

    right:
        5%;

    top:
        18%;

    width:
        20%;

    height:
        53%;

    border:
        8px solid
        #2d211a;

    background:
        #211818;

    z-index:
        5;

}


.bookshelf-shelf {

    position:
        absolute;

    left:
        4%;

    right:
        4%;

    height:
        3%;

    background:
        #64452d;

}


.shelf-one {

    top:
        28%;

}


.shelf-two {

    top:
        56%;

}


.shelf-three {

    top:
        84%;

}


.book {

    position:
        absolute;

    bottom:
        72%;

    width:
        7%;

    height:
        21%;

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

}


.b1 {

    left:
        10%;

    background:
        #56313b;

}


.b2 {

    left:
        19%;

    height:
        18%;

    background:
        #315558;

}


.b3 {

    left:
        30%;

    background:
        #6b552c;

}


.b4 {

    left:
        42%;

    height:
        19%;

    background:
        #3c3f64;

}


.b5 {

    left:
        55%;

    background:
        #684038;

}


.b6 {

    left:
        66%;

    height:
        17%;

    background:
        #426045;

}


.b7 {

    left:
        77%;

    background:
        #594066;

}


.study-desk {

    position:
        absolute;

    left:
        30%;

    bottom:
        22%;

    width:
        28%;

    height:
        24%;

    z-index:
        6;

}


.desk-top {

    position:
        absolute;

    top:
        0;

    width:
        100%;

    height:
        17%;

    border:
        2px solid
        #765138;

    background:
        #493326;

}


.desk-drawer {

    position:
        absolute;

    left:
        23%;

    top:
        18%;

    width:
        54%;

    height:
        23%;

    border:
        1px solid
        #704b34;

    background:
        #34251e;

}


.desk-leg {

    position:
        absolute;

    top:
        17%;

    width:
        8%;

    height:
        83%;

    background:
        #38261e;

}


.dl {

    left:
        8%;

}


.dr {

    right:
        8%;

}


.desk-paper {

    position:
        absolute;

    left:
        57%;

    top:
        -5%;

    width:
        18%;

    height:
        16%;

    transform:
        rotate(-7deg);

    background:
        #c5b79b;

    box-shadow:
        0 3px 5px
        rgba(0,0,0,.35);

}


.globe {

    position:
        absolute;

    left:
        23%;

    top:
        29%;

    width:
        10%;

    height:
        28%;

    z-index:
        5;

}


.globe-ball {

    position:
        absolute;

    left:
        5%;

    top:
        0;

    width:
        90%;

    aspect-ratio:
        1;

    border:
        4px solid
        #836b43;

    border-radius:
        50%;

    background:

        radial-gradient(
            circle at 35% 35%,
            #4e817b 0 18%,
            #315a59 19% 45%,
            #2d3f48 46% 100%
        );

}


.globe-stand {

    position:
        absolute;

    left:
        42%;

    bottom:
        0;

    width:
        17%;

    height:
        40%;

    background:
        #745835;

}


.fireplace {

    position:
        absolute;

    left:
        4%;

    bottom:
        20%;

    width:
        18%;

    height:
        36%;

    border:
        9px solid
        #3b302b;

    background:
        #21191a;

    z-index:
        5;

}


.mantle {

    position:
        absolute;

    left:
        -9%;

    top:
        -11%;

    width:
        118%;

    height:
        12%;

    background:
        #625142;

}


.firebox {

    position:
        absolute;

    left:
        18%;

    right:
        18%;

    bottom:
        11%;

    height:
        54%;

    overflow:
        hidden;

    background:
        #090808;

}


.flame {

    position:
        absolute;

    bottom:
        -5%;

    width:
        24%;

    height:
        60%;

    border-radius:
        50% 50% 35% 35%;

    background:

        linear-gradient(
            #f3d268,
            #d77a30 55%,
            #752623
        );

    transform-origin:
        center bottom;

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

}


.f1 {

    left:
        15%;

}


.f2 {

    left:
        39%;

    height:
        75%;

    animation-delay:
        -.25s;

}


.f3 {

    right:
        12%;

    height:
        52%;

    animation-delay:
        -.48s;

}


@keyframes flameMove {

    from {

        transform:
            skewX(-7deg)
            scaleY(.92);

    }

    to {

        transform:
            skewX(7deg)
            scaleY(1.06);

    }

}


.grandfather-clock {

    position:
        absolute;

    right:
        29%;

    bottom:
        20%;

    width:
        11%;

    height:
        50%;

    border:
        7px solid
        #38271f;

    background:
        #211818;

    z-index:
        6;

}


.clock-face {

    position:
        absolute;

    left:
        17%;

    top:
        7%;

    width:
        66%;

    aspect-ratio:
        1;

    border:
        4px solid
        #8a7046;

    border-radius:
        50%;

    background:
        #c8ba98;

}


.clock-hand {

    position:
        absolute;

    left:
        49%;

    bottom:
        50%;

    width:
        3%;

    transform-origin:
        center bottom;

    background:
        #292326;

}


.clock-hour {

    height:
        24%;

    transform:
        rotate(40deg);

}


.clock-minute {

    height:
        34%;

    transform:
        rotate(170deg);

}


.clock-body {

    position:
        absolute;

    left:
        19%;

    right:
        19%;

    top:
        39%;

    bottom:
        8%;

    border:
        2px solid
        #604331;

}


.pendulum {

    position:
        absolute;

    left:
        47%;

    top:
        5%;

    width:
        5%;

    height:
        75%;

    background:
        #9a7441;

    transform-origin:
        center top;

    animation:
        pendulumMove
        2.1s ease-in-out
        infinite alternate;

}


.pendulum::after {

    content: "";

    position:
        absolute;

    left:
        -220%;

    bottom:
        -4%;

    width:
        540%;

    aspect-ratio:
        1;

    border-radius:
        50%;

    background:
        #a57c43;

}


@keyframes pendulumMove {

    from {

        transform:
            rotate(-7deg);

    }

    to {

        transform:
            rotate(7deg);

    }

}


.study-secret-panel {

    position:
        absolute;

    right:
        40%;

    top:
        24%;

    width:
        8%;

    height:
        24%;

    border:
        4px inset
        #615840;

    background:
        #13191b;

    box-shadow:
        inset 0 0 30px
        rgba(100,194,175,.16);

    z-index:
        7;

}


.secret-symbol {

    display:
        grid;

    place-items:
        center;

    width:
        100%;

    height:
        100%;

    color:
        #86c9ba;

    font-family:
        Georgia,
        serif;

    font-size:
        clamp(
            18px,
            4vw,
            50px
        );

}


.study-door-back {

    position:
        absolute;

    left:
        1%;

    bottom:
        21%;

    width:
        11%;

    height:
        44%;

    border:
        7px solid
        #28201d;

    background:
        #30221f;

    z-index:
        5;

}


/* ==========================================================
   PLAYER
========================================================== */


.player {

    position:
        absolute;

    left:
        48%;

    bottom:
        19%;

    width:
        4%;

    height:
        18%;

    z-index:
        12;

    transition:
        left .22s ease;

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

}


.study-player {

    left:
        14%;

}


.player-head {

    position:
        absolute;

    left:
        23%;

    top:
        0;

    width:
        52%;

    aspect-ratio:
        1;

    border-radius:
        50%;

    background:
        #b98b72;

}


.player-body {

    position:
        absolute;

    left:
        10%;

    bottom:
        0;

    width:
        80%;

    height:
        68%;

    border-radius:
        38% 38% 12% 12%;

    background:

        linear-gradient(
            #567a75,
            #263d3b
        );

}


/* ==========================================================
   HOTSPOTS
========================================================== */


.hotspot {

    position:
        absolute;

    border:
        1px solid transparent;

    background:
        transparent;

    cursor:
        pointer;

    z-index:
        30;

}


.hotspot:hover,
.hotspot:focus-visible {

    border:
        2px dashed
        rgba(232,180,87,.9);

    background:
        rgba(224,168,73,.08);

    outline:
        none;

}


.stairs-hotspot {

    left:
        21%;

    bottom:
        21%;

    width:
        38%;

    height:
        51%;

}


.portrait-hotspot {

    right:
        26%;

    top:
        23%;

    width:
        12%;

    height:
        27%;

}


.table-hotspot {

    right:
        22%;

    bottom:
        19%;

    width:
        20%;

    height:
        21%;

}


.east-door-hotspot {

    right:
        3%;

    bottom:
        21%;

    width:
        16%;

    height:
        49%;

}


.front-door-hotspot {

    left:
        1%;

    bottom:
        21%;

    width:
        17%;

    height:
        48%;

}


.chandelier-hotspot {

    left:
        39%;

    top:
        3%;

    width:
        22%;

    height:
        25%;

}


.rug-hotspot {

    left:
        32%;

    bottom:
        4%;

    width:
        38%;

    height:
        25%;

}


.key-hotspot {

    right:
        29%;

    bottom:
        33%;

    width:
        7%;

    height:
        8%;

    border:
        1px solid
        rgba(230,180,81,.65);

    background:
        rgba(36,28,19,.75);

}


.key-art {

    color:
        #e4b95e;

    font-size:

        clamp(
            18px,
            3vw,
            34px
        );

}


/* STUDY HOTSPOTS */


.study-back-hotspot {

    left:
        0;

    bottom:
        20%;

    width:
        13%;

    height:
        48%;

}


.bookshelf-hotspot {

    right:
        4%;

    top:
        17%;

    width:
        22%;

    height:
        56%;

}


.study-desk-hotspot {

    left:
        29%;

    bottom:
        19%;

    width:
        30%;

    height:
        29%;

}


.globe-hotspot {

    left:
        21%;

    top:
        26%;

    width:
        13%;

    height:
        34%;

}


.fireplace-hotspot {

    left:
        3%;

    bottom:
        17%;

    width:
        20%;

    height:
        42%;

}


.clock-hotspot {

    right:
        27%;

    bottom:
        18%;

    width:
        15%;

    height:
        54%;

}


.winder-hotspot {

    left:
        14%;

    bottom:
        30%;

    width:
        7%;

    height:
        9%;

    border:
        1px solid
        #8f6f3e;

    background:
        rgba(35,26,18,.78);

}


.winder-art {

    color:
        #d8ad5e;

    font-size:

        clamp(
            18px,
            3vw,
            32px
        );

}


.secret-panel-hotspot {

    right:
        39%;

    top:
        22%;

    width:
        10%;

    height:
        28%;

}


/* ==========================================================
   COMMAND CONSOLE
========================================================== */


.command-console {

    width:
        min(
            1280px,
            100%
        );

    margin:
        10px auto 0;

    display:
        grid;

    grid-template-columns:

        minmax(
            280px,
            .8fr
        )

        minmax(
            300px,
            1.25fr
        )

        minmax(
            220px,
            .75fr
        );

    gap:
        10px;

}


.verb-bar,
.status-panel,
.inventory-panel {

    min-height:
        112px;

    border:
        1px solid
        #403a36;

    padding:
        12px;

    background:
        rgba(17,15,22,.96);

}


.verb-label,
.status-heading,
.inventory-heading {

    display:
        block;

    margin:
        0 0 10px;

    color:
        #8f8887;

    font-size:
        .65rem;

    font-weight:
        850;

    letter-spacing:
        .15em;

}


.verb-bar {

    display:
        flex;

    flex-wrap:
        wrap;

    align-content:
        flex-start;

    gap:
        7px;

}


.verb-label {

    flex-basis:
        100%;

}


.verb {

    min-height:
        42px;

    border:
        1px solid
        #4b4544;

    padding:
        8px 12px;

    background:
        #1b1820;

    color:
        #d5ceca;

    cursor:
        pointer;

}


.verb span {

    margin-right:
        5px;

    color:
        #887f7c;

    font-size:
        .7rem;

}


.verb.active {

    border-color:
        var(--gold);

    background:
        #352716;

    color:
        #f4d390;

}


.status-panel p:last-child {

    margin:
        0;

    color:
        #e3ddd5;

    font-family:

        Georgia,
        "Times New Roman",
        serif;

    line-height:
        1.5;

}


.inventory {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;

}


.inventory-item {

    min-height:
        42px;

    border:
        1px solid
        #645239;

    padding:
        7px 10px;

    background:
        #231c18;

    color:
        #e7c377;

    cursor:
        pointer;

}


.inventory-item.selected {

    outline:
        2px solid
        var(--gold);

    outline-offset:
        2px;

}


.empty-inventory {

    color:
        #777071;

    font-style:
        italic;

}


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


.completion-badge {

    width:
        min(
            1280px,
            100%
        );

    margin:
        9px auto 0;

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

    padding:
        10px 14px;

    background:
        rgba(20,65,57,.44);

    color:
        #a6e5d8;

    font-size:
        .77rem;

    font-weight:
        800;

    letter-spacing:
        .08em;

}


.study-complete {

    border-color:
        #6e5540;

    background:
        rgba(92,60,35,.35);

    color:
        #f0cf8e;

}


.game-footer {

    width:
        min(
            1280px,
            100%
        );

    margin:
        8px auto 0;

    display:
        flex;

    flex-wrap:
        wrap;

    justify-content:
        space-between;

    gap:
        8px 18px;

    color:
        #777174;

    font-size:
        .64rem;

    letter-spacing:
        .04em;

}


#save-indicator {

    color:
        #75a696;

}


/* ==========================================================
   FOCUS
========================================================== */


button:focus-visible {

    outline:
        3px solid
        var(--focus);

    outline-offset:
        3px;

}


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


@media (
    max-width:
    900px
) {

    .command-console {

        grid-template-columns:
            1fr 1fr;

    }


    .status-panel {

        grid-column:
            1 / -1;

        grid-row:
            1;

    }

}


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


@media (
    max-width:
    620px
) {

    .game-screen {

        padding:
            8px;

    }


    .game-header {

        align-items:
            center;

    }


    .room-kicker {

        display:
            none;

    }


    .header-actions {

        gap:
            5px;

    }


    .small-button {

        min-height:
            38px;

        padding:
            6px 9px;

        font-size:
            .72rem;

    }


    .scene {

        aspect-ratio:
            4 / 3;

    }


    .command-console {

        grid-template-columns:
            1fr;

    }


    .status-panel,
    .verb-bar,
    .inventory-panel {

        grid-column:
            auto;

        grid-row:
            auto;

        min-height:
            0;

    }


    .verb {

        flex:
            1;

        min-width:
            65px;

    }


    .title-card {

        padding:
            34px 27px;

    }


    .game-footer {

        font-size:
            .58rem;

    }

}


/* ==========================================================
   REDUCED MOTION
========================================================== */


@media (
    prefers-reduced-motion:
    reduce
) {

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

        scroll-behavior:
            auto !important;

        transition-duration:
            .001ms !important;

        animation-duration:
            .001ms !important;

        animation-iteration-count:
            1 !important;

    }

}