* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

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

    padding: 16px;

    background:
        linear-gradient(
            to bottom,
            #dff4ef 0%,
            #dff4ef 48%,
            #b8d99a 48%,
            #9bc47d 100%
        );

    font-family:
        "Trebuchet MS",
        Arial,
        sans-serif;

    color: #31483d;
}

[hidden] {
    display: none !important;
}


/* MAIN */

.game-shell {
    width: min(1180px, 96vw);
    height: min(720px, 94vh);

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

    padding: 30px;

    overflow: hidden;

    background:
        rgba(255,255,255,0.86);

    border: 3px solid #6f9278;
    border-radius: 28px;

    text-align: center;

    box-shadow:
        0 18px 40px
        rgba(63,89,71,0.18);
}

.game-shell > section {
    width: 100%;
}

.game-shell h1 {
    margin: 0;

    font-size:
        clamp(42px, 6vw, 72px);

    color: #3f6250;
}

.game-shell h2 {
    margin: 8px 0;

    font-size: 32px;

    color: #3f6250;
}

.small-title {
    margin: 0 0 8px;

    font-size: 11px;
    font-weight: bold;

    letter-spacing: 3px;

    color: #799486;
}


/* OPENING */

#welcomeScreen > p {
    margin: 22px 0 34px;

    font-size: 18px;

    color: #668173;
}


/* BUTTONS */

#startButton,
#continueButton {
    padding: 14px 28px;

    border: 2px solid #557662;
    border-radius: 999px;

    background: #769d7f;
    color: white;

    font-family: inherit;
    font-size: 15px;
    font-weight: bold;

    cursor: pointer;
}


/* CHARACTER */

.character-hint {
    margin: 8px 0 24px;

    color: #80968a;

    font-size: 14px;
    font-style: italic;
}

.character-grid {
    display: grid;

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

    gap: 14px;

    max-width: 780px;

    margin: 0 auto;
}

.character-button {
    min-height: 145px;

    display: flex;
    flex-direction: column;

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

    gap: 8px;

    border: 2px solid #a9c3ae;
    border-radius: 20px;

    background: #f7fbf6;

    font-family: inherit;
    font-weight: bold;

    cursor: pointer;
}

.character-button:hover {
    transform: translateY(-4px);

    background: #edf6ec;
}

.character-emoji {
    font-size: 52px;
}

#characterMessage {
    min-height: 75px;

    margin-top: 18px;
}

.wrong-answer {
    font-size: 30px;
    font-weight: 900;

    color: #9b544f;
}

.wrong-caption {
    margin-top: 6px;

    color: #856d68;
}


/* IDENTIFIED */

.wolf-icon {
    font-size: 78px;
}

.welcome-message {
    margin: 20px auto 28px;

    color: #637d6f;
}


/* GAME LAYOUT */

#quietMeadow,
#tinyCafe,
#musicForest,
#starHill,
#signalShack,
#signalInterior {
    height: 100%;
}

.game-layout {
    width: 100%;
    height: 100%;

    display: grid;

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

    gap: 22px;
}

.game-sidebar {
    display: flex;
    flex-direction: column;

    justify-content: space-between;

    gap: 14px;

    text-align: left;
}

.game-sidebar h2 {
    font-size: 27px;
}

.area-instruction {
    font-size: 13px;

    color: #718775;
}


/* CARDS */

.counter-card,
.control-card,
.inventory-card,
.trail-notice {
    padding: 13px;

    border: 2px solid #9bb58d;
    border-radius: 16px;

    background: #eff7e8;

    text-align: center;
}

.counter-card > span,
.control-card > span,
.inventory-card > span {
    display: block;

    font-size: 9px;
    font-weight: bold;

    letter-spacing: 2px;

    color: #62805c;
}

.counter-card strong {
    display: block;

    font-size: 28px;

    color: #4f704f;
}

.inventory-icon {
    margin: 5px;

    font-size: 34px;
}

.inventory-card strong {
    display: block;

    font-size: 11px;

    color: #79553e;
}

.inventory-card small {
    color: #8c7463;
}


/* WASD */

.wasd-display {
    display: grid;

    grid-template-columns:
        repeat(3,34px);

    gap: 4px;

    justify-content: center;

    margin-top: 8px;
}

.key {
    width: 34px;
    height: 34px;

    display: flex;

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

    border: 2px solid #78917a;
    border-radius: 8px;

    background: #e8f1e4;

    font-weight: bold;
}

.control-card small {
    display: block;

    margin-top: 8px;

    color: #8b9b89;
}


/* PLAYER */

.wolf-player {
    position: absolute;

    z-index: 30;

    font-size: 45px;

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

    pointer-events: none;
}

.wolf-player.moving {
    animation:
        smoothWalk 0.32s
        ease-in-out infinite;
}


/* MESSAGE */

.game-message {
    position: absolute;

    z-index: 80;

    left: 50%;
    bottom: 2.5%;

    max-width: 82%;

    padding: 7px 14px;

    border-radius: 999px;

    background:
        rgba(255,255,255,0.92);

    color: #58705f;

    font-size: 11px;
    font-weight: bold;

    transform:
        translateX(-50%);

    pointer-events: none;
}


/* MEADOW */

.meadow-stage {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    border: 3px solid #71916b;
    border-radius: 24px;

    background:
        linear-gradient(
            to bottom,
            #bfe7ed 0%,
            #d8eff0 26%,
            #a8d486 27%,
            #83bd69 100%
        );
}

.cloud,
.scenery {
    position: absolute;

    pointer-events: none;
}

.cloud {
    font-size: 48px;
}

.cloud-one {
    top: 2%;
    left: 15%;
}

.cloud-two {
    top: 5%;
    right: 20%;
}

.tree {
    font-size: 65px;
}

.tree-one {
    left: 3%;
    top: 18%;
}

.tree-two {
    right: 3%;
    top: 29%;
}

.tree-three {
    right: 17%;
    top: 7%;
}

.bush {
    font-size: 46px;
}

.bush-one {
    left: 11%;
    top: 42%;
}

.bush-two {
    right: 12%;
    top: 48%;
}

.bush-three {
    left: 23%;
    bottom: 6%;
}

.bush-four {
    right: 23%;
    bottom: 9%;
}

.flowers {
    font-size: 28px;
}

.flowers-one {
    left: 25%;
    top: 36%;
}

.flowers-two {
    right: 29%;
    top: 31%;
}

.flowers-three {
    left: 45%;
    bottom: 14%;
}

.rock {
    font-size: 32px;
}

.rock-one {
    left: 38%;
    top: 48%;
}

.rock-two {
    right: 34%;
    bottom: 13%;
}

.world-item {
    position: absolute;

    z-index: 10;

    font-size: 25px;

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

.world-item.collected {
    opacity: 0;
}

.secret-path {
    position: absolute;

    width: 17%;
    height: 78%;

    left: 41.5%;
    top: -5%;

    background:
        rgba(205,188,135,0.85);

    opacity: 0;

    transform:
        scaleY(0);

    transform-origin: bottom;

    transition: 1s ease;
}

.secret-path.open {
    opacity: 1;

    transform:
        scaleY(1);
}

.meadow-exit {
    position: absolute;

    left: 50%;
    top: 6%;

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

.exit-sign {
    font-size: 30px;
}

.vomit-effect {
    position: absolute;

    z-index: 50;

    font-size: 38px;

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


/* CAFÉ */

.cafe-stage {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    border: 3px solid #886b55;
    border-radius: 24px;

    background:
        repeating-linear-gradient(
            90deg,
            #d8b996 0 70px,
            #e6c8a5 70px 140px
        );
}

.cafe-rug {
    position: absolute;

    left: 38%;
    top: 55%;

    width: 32%;
    height: 25%;

    border-radius: 50%;

    background:
        rgba(153,103,77,0.25);
}

.cafe-counter {
    position: absolute;

    left: 25%;
    top: 8%;

    width: 50%;
    height: 20%;

    border: 4px solid #76533d;
    border-radius:
        0 0 20px 20px;

    background: #9d704e;

    color: white;

    padding-top: 8px;
}

.cafe-object,
.npc,
.cafe-door {
    position: absolute;

    z-index: 10;

    font-size: 36px;

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

.npc {
    font-size: 44px;
}

.cafe-door {
    font-size: 48px;
}

.cafe-door.locked {
    filter: grayscale(1);

    opacity: 0.6;
}

.cafe-door.unlocked {
    filter: none;

    opacity: 1;
}


/* DIALOGUE */

.dialogue-box {
    position: absolute;

    z-index: 100;

    left: 50%;
    bottom: 6%;

    width: min(560px,90%);

    padding: 17px;

    border: 3px solid #755843;
    border-radius: 18px;

    background:
        rgba(255,250,241,0.98);

    transform:
        translateX(-50%);

    text-align: left;
}

.dialogue-speaker {
    margin: 0 0 7px;

    font-size: 10px;
    font-weight: bold;

    letter-spacing: 2px;

    color: #956e51;
}

.dialogue-text {
    margin-bottom: 14px;

    color: #60493b;

    line-height: 1.45;

    white-space: pre-line;
}

.dialogue-choices {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;
}

.dialogue-choice {
    padding: 9px 13px;

    border: 2px solid #b48e70;
    border-radius: 999px;

    background: #fff7ed;

    color: #6f513c;

    font-family: inherit;
    font-weight: bold;

    cursor: pointer;
}

.dialogue-choice:hover {
    background: #f0ddc9;
}


/* MUSIC FOREST */

.music-stage {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    border: 3px solid #486b61;
    border-radius: 24px;

    background:
        linear-gradient(
            to bottom,
            #223c45 0%,
            #315c59 38%,
            #416f58 39%,
            #567e59 100%
        );
}

.forest-moon {
    position: absolute;

    right: 9%;
    top: 6%;

    font-size: 55px;
}

.forest-stars {
    position: absolute;

    color: white;

    opacity: 0.8;
}

.stars-one {
    left: 18%;
    top: 9%;
}

.stars-two {
    left: 53%;
    top: 13%;
}

.music-tree {
    position: absolute;

    font-size: 70px;
}

.mtree-one {
    left: 2%;
    top: 17%;
}

.mtree-two {
    right: 2%;
    top: 36%;
}

.mtree-three {
    left: 22%;
    top: 38%;
}

.mtree-four {
    right: 20%;
    top: 7%;
}

.music-interactable {
    position: absolute;

    z-index: 15;

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

.music-bird {
    font-size: 45px;

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

.music-node {
    font-size: 38px;
}

.music-node.active {
    transform:
        translate(-50%,-50%)
        scale(1.45);

    filter:
        drop-shadow(
            0 0 12px white
        );
}

.music-path {
    position: absolute;

    left: 42%;
    top: -8%;

    width: 16%;
    height: 72%;

    border-radius:
        0 0 50% 50%;

    background:
        rgba(216,206,154,0.70);

    opacity: 0;

    transform:
        scaleY(0);

    transform-origin: bottom;

    transition: 1s ease;
}

.music-path.open {
    opacity: 1;

    transform:
        scaleY(1);
}

.music-exit {
    position: absolute;

    left: 50%;
    top: 7%;

    z-index: 20;

    font-size: 27px;

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

    animation:
        exitGlow 1s
        ease-in-out infinite;
}


/* STAR HILL */

.star-stage {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    border: 3px solid #525d78;
    border-radius: 24px;

    background:
        linear-gradient(
            to bottom,
            #11182d 0%,
            #202b48 48%,
            #34485c 49%,
            #49634f 100%
        );
}

.big-moon {
    position: absolute;

    right: 7%;
    top: 5%;

    z-index: 2;

    font-size: 65px;

    filter:
        drop-shadow(
            0 0 15px
            rgba(255,255,210,0.5)
        );
}

.star-dust {
    position: absolute;

    z-index: 1;

    color: #fff8d8;

    font-size: 18px;

    opacity: 0.75;

    pointer-events: none;
}

.dust-one {
    left: 10%;
    top: 9%;
}

.dust-two {
    left: 42%;
    top: 13%;
}

.dust-three {
    left: 72%;
    top: 30%;
}

.hill-one {
    position: absolute;

    z-index: 2;

    left: -10%;
    bottom: -15%;

    width: 70%;
    height: 55%;

    border-radius: 50% 50% 0 0;

    background: #48644e;
}

.hill-two {
    position: absolute;

    z-index: 2;

    right: -15%;
    bottom: -20%;

    width: 75%;
    height: 58%;

    border-radius: 50% 50% 0 0;

    background: #405a48;
}

.star-interactable {
    position: absolute;

    z-index: 20;

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

    user-select: none;
}

.star-npc {
    font-size: 45px;

    animation:
        npcFloat 1.8s
        ease-in-out infinite;
}

.star-object {
    font-size: 38px;
}

.observatory-station {
    width: 140px;

    text-align: center;
}

.scope-sky {
    min-height: 84px;

    display: flex;
    flex-direction: column;

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

    padding: 8px;

    border:
        2px solid
        rgba(255,255,255,0.35);

    border-radius: 18px;

    background:
        rgba(11,18,38,0.82);
}

.constellation-symbol {
    display: block;

    color: #fff4bd;

    font-size: 38px;
}

.constellation-name {
    margin-top: 2px;

    color: #dfe4f5;

    font-size: 10px;
    font-weight: bold;

    letter-spacing: 2px;

    text-transform: uppercase;
}

.telescope {
    margin-top: 3px;

    font-size: 35px;
}

.observatory-station.correct
.scope-sky {
    border-color: #fff0a8;

    box-shadow:
        0 0 20px
        rgba(255,239,158,0.55);
}

.star-connection {
    position: absolute;

    z-index: 8;

    left: 35%;
    top: 43%;

    width: 35%;
    height: 3px;

    background:
        linear-gradient(
            to right,
            transparent,
            #fff1a6,
            transparent
        );

    opacity: 0;

    transform:
        scaleX(0);

    transition: 1s ease;
}

.star-connection.open {
    opacity: 1;

    transform:
        scaleX(1);
}

.star-pair-label {
    position: absolute;

    z-index: 25;

    left: 52.5%;
    top: 28%;

    padding: 8px 15px;

    border-radius: 999px;

    background:
        rgba(20,27,52,0.86);

    color: #fff2b7;

    font-size: 13px;
    font-weight: bold;

    letter-spacing: 2px;

    transform:
        translateX(-50%);
}

.star-path {
    position: absolute;

    z-index: 4;

    left: 43%;
    top: -10%;

    width: 14%;
    height: 52%;

    background:
        rgba(170,180,150,0.45);

    opacity: 0;

    transform:
        scaleY(0);

    transform-origin: bottom;

    transition: 1s ease;
}

.star-path.open {
    opacity: 1;

    transform:
        scaleY(1);
}

.star-exit {
    position: absolute;

    z-index: 30;

    left: 50%;
    top: 7%;

    font-size: 28px;

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

    animation:
        exitGlow 1s
        ease-in-out infinite;
}


/* SIGNAL EXTERIOR */

.signal-stage {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    border: 3px solid #4b5860;
    border-radius: 24px;

    background:
        linear-gradient(
            to bottom,
            #182532 0%,
            #263844 52%,
            #465c4b 53%,
            #526b50 100%
        );
}

.signal-moon {
    position: absolute;

    right: 7%;
    top: 4%;

    font-size: 55px;
}

.signal-stars {
    position: absolute;

    color: #e8e6cd;

    opacity: 0.7;
}

.signal-stars-one {
    left: 8%;
    top: 8%;
}

.signal-stars-two {
    left: 55%;
    top: 13%;
}

.signal-tree {
    position: absolute;

    z-index: 2;

    font-size: 67px;
}

.signal-tree-one {
    left: 2%;
    top: 25%;
}

.signal-tree-two {
    right: 2%;
    top: 44%;
}

.signal-tree-three {
    right: 17%;
    top: 10%;
}

.radio-tower {
    position: absolute;

    z-index: 4;

    left: 77%;
    top: 19%;

    font-size: 86px;

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

.shack-building {
    position: absolute;

    z-index: 6;

    left: 50%;
    top: 31%;

    width: 38%;
    height: 31%;

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

    border: 4px solid #5c493d;
    border-radius: 8px;

    background:
        repeating-linear-gradient(
            90deg,
            #78604f 0 24px,
            #6a5143 24px 48px
        );
}

.shack-roof {
    position: absolute;

    left: -8%;
    top: -18%;

    width: 116%;
    height: 22%;

    display: flex;

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

    background: #393c3b;

    color: #c3b890;

    font-size: 10px;
    font-weight: bold;

    letter-spacing: 5px;
}

.shack-window {
    position: absolute;

    right: 14%;
    top: 29%;

    width: 23%;
    height: 34%;

    display: flex;

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

    border: 4px solid #4f4138;

    background: #273d40;

    color: #809b98;

    font-size: 34px;
}

.signal-interactable {
    position: absolute;

    z-index: 20;

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

.signal-npc {
    font-size: 48px;
}

.signal-door {
    font-size: 55px;
}

.signal-door.locked {
    filter: grayscale(1);

    opacity: 0.55;
}

.signal-door.unlocked {
    opacity: 1;

    animation:
        doorGlow 1.2s
        ease-in-out infinite;
}

.signal-object {
    font-size: 38px;
}


/* SHACK INTERIOR */

.shack-stage {
    position: relative;

    width: 100%;
    height: 100%;

    overflow: hidden;

    border: 3px solid #604e42;
    border-radius: 24px;

    background:
        linear-gradient(
            to bottom,
            #4b4139 0%,
            #59493e 42%,
            #76604f 43%,
            #6c594a 100%
        );
}

.shack-floor {
    position: absolute;

    inset: 43% 0 0 0;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(0,0,0,0.05) 0 55px,
            rgba(255,255,255,0.03) 55px 110px
        );
}

.shack-desk {
    position: absolute;

    left: 50%;
    top: 15%;

    width: 48%;
    height: 25%;

    transform:
        translateX(-50%);

    padding-top: 7px;

    border: 4px solid #3c322c;
    border-radius: 10px;

    background: #554238;

    color: #b7a286;

    font-size: 9px;
    font-weight: bold;

    letter-spacing: 4px;
}

.shack-interactable {
    position: absolute;

    z-index: 20;

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

.broken-radio {
    font-size: 58px;
}

.shack-part {
    min-width: 95px;

    padding: 12px 10px;

    border:
        2px solid
        rgba(235,219,195,0.30);

    border-radius: 12px;

    background:
        rgba(42,34,30,0.60);

    font-size: 34px;

    text-align: center;
}

.shack-part span {
    display: block;

    margin-top: 4px;

    color: #d0bfa8;

    font-size: 8px;
    font-weight: bold;

    letter-spacing: 2px;
}

.shack-part.fixed {
    border-color: #c4d7a9;

    box-shadow:
        0 0 14px
        rgba(199,225,167,0.35);
}

.shack-clutter {
    font-size: 35px;
}

.maintenance-note {
    font-size: 34px;

    transform:
        translate(-50%,-50%)
        rotate(-6deg);
}


/* TUNING */

.tuning-console {
    position: absolute;

    z-index: 120;

    left: 50%;
    top: 50%;

    width: min(410px,86%);

    padding: 25px;

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

    border: 4px solid #3c322c;
    border-radius: 18px;

    background:
        rgba(26,30,28,0.97);

    color: #d7deb7;

    box-shadow:
        0 15px 35px
        rgba(0,0,0,0.40);
}

.tuning-label {
    display: block;

    margin-bottom: 8px;

    font-size: 9px;
    font-weight: bold;

    letter-spacing: 4px;

    color: #909e7c;
}

#tuningFrequency {
    display: block;

    font-family:
        "Courier New",
        monospace;

    font-size: 62px;

    letter-spacing: 7px;

    color: #e4e7bf;

    text-shadow:
        0 0 15px
        rgba(225,235,180,0.35);
}

.signal-strength {
    margin-top: 7px;

    font-size: 13px;
    font-weight: bold;

    letter-spacing: 3px;
}

.signal-bars {
    margin: 8px 0 15px;

    font-size: 22px;

    letter-spacing: 5px;
}

#tuningHint {
    margin: 0;

    color: #99a18e;

    font-size: 11px;

    line-height: 1.7;
}

.tuning-console.locked {
    border-color: #dae5a3;

    box-shadow:
        0 0 30px
        rgba(219,235,163,0.35);
}


/* SHACK EXIT */

.shack-exit {
    position: absolute;

    z-index: 40;

    left: 50%;
    top: 9%;

    font-size: 28px;

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

    animation:
        exitGlow 1s
        ease-in-out infinite;
}


/* TRANSITION */

.trail-wolf {
    font-size: 85px;
}


/* ANIMATION */

@keyframes smoothWalk {

    0% {
        transform:
            translate(-50%,-50%)
            translateY(0);
    }

    50% {
        transform:
            translate(-50%,-50%)
            translateY(-3px);
    }

    100% {
        transform:
            translate(-50%,-50%)
            translateY(0);
    }

}

@keyframes birdFloat {

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

}

@keyframes npcFloat {

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

}

@keyframes exitGlow {

    50% {
        filter:
            drop-shadow(
                0 0 12px white
            );
    }

}

@keyframes doorGlow {

    50% {
        filter:
            drop-shadow(
                0 0 10px
                rgba(255,230,170,0.9)
            );
    }

}


@media (max-height:650px) {

    .game-shell {
        height: 96vh;

        padding: 20px;
    }

    .game-layout {
        grid-template-columns:
            205px minmax(0,1fr);
    }

    .observatory-station {
        width: 120px;
    }

}