/* ==========================================================
   GEORGIA'S LITTLE QUEST
   Main Styling v3
   ========================================================== */


:root {

    --cream:#fff8e7;
    --yellow:#ffe28a;
    --yellow-dark:#e5b94d;

    --pink:#ffd6e0;
    --green:#d8f2d0;

    --brown:#66513d;

    --white:#ffffff;

    --shadow:
    rgba(100,75,40,.2);

}





* {

    box-sizing:border-box;

}





body {

    margin:0;

    width:100vw;

    height:100vh;

    overflow:hidden;

    background:

    radial-gradient(
        circle,
        #fff8d8,
        #fff2c4
    );


    font-family:
    "Quicksand",
    sans-serif;


    color:var(--brown);

}






/* ==========================================================
   HIDDEN ELEMENTS
   ========================================================== */


[hidden] {

    display:none !important;

}








/* ==========================================================
   INTRO SCREEN
   ========================================================== */


#intro {

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

}





.intro-card {

    background:white;

    width:500px;

    padding:45px;

    border-radius:35px;

    text-align:center;

    box-shadow:
    0 20px 50px var(--shadow);

}








/* ==========================================================
   GAME AREA
   ========================================================== */


#game {

    width:100vw;

    height:100vh;

    position:relative;

}





#hud {

    position:fixed;

    top:20px;

    left:50%;

    transform:translateX(-50%);

    background:white;

    padding:15px 30px;

    border-radius:30px;

    text-align:center;

    z-index:50;

    box-shadow:
    0 10px 25px var(--shadow);

}





#questTitle {

    font-weight:bold;

    font-size:20px;

}





#questProgress {

    font-size:15px;

}









/* ==========================================================
   WORLD
   ========================================================== */


#world {


    position:absolute;


    width:700px;


    height:500px;


    left:50%;


    top:50%;


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



    background:


    linear-gradient(
        135deg,
        #fff4c9,
        #fffbea
    );



    border:

    6px solid #f3d891;



    border-radius:35px;



    overflow:hidden;



    box-shadow:

    0 25px 60px var(--shadow);



}








/* ==========================================================
   SCENERY
   ========================================================== */


#scenery {

    position:absolute;

    inset:0;

    z-index:0;

    pointer-events:none;

}


.world-decor {

    position:absolute;

    pointer-events:none;

    user-select:none;

    filter:

    drop-shadow(0 4px 3px var(--shadow));

}


.path-layer {

    left:0;

    top:0;

    width:700px;

    height:500px;

    filter:none;

}


.tree-decor {

    width:70px;

    z-index:2;

}


.bush-decor {

    width:50px;

    z-index:1;

}


.house-decor {

    width:110px;

    z-index:2;

}









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


#player {


    position:absolute;


    width:50px;


    height:65px;


    z-index:20;



}



#player img {


    width:100%;


    height:100%;


    object-fit:contain;



}





.walking {


    animation:

    walk .25s infinite;



}




@keyframes walk {


50%{

transform:
translateY(-4px);

}


}









/* ==========================================================
   WORLD OBJECTS
   ========================================================== */


.tree,
.flower {


    position:absolute;


    font-size:40px;



}




.npc {


    position:absolute;


    font-size:35px;


    text-align:center;


    width:40px;


    line-height:1;


    transform:translateX(-5px);
}



.npc-name {


    display:inline-block;


    background:white;


    padding:4px 12px;


    border-radius:20px;


    font-size:12px;


    margin-top:6px;


    white-space:nowrap;


}







/* ==========================================================
   LOCATIONS
   ========================================================== */


.location {


    position:absolute;


    font-size:40px;


    text-align:center;


    z-index:5;


    width:40px;


    line-height:1;


    transform:translateX(-5px);
}



.location span {


    display:inline-block;


    background:white;


    padding:5px 12px;


    border-radius:20px;


    font-size:12px;


    margin-top:6px;


    white-space:nowrap;

    position:relative;
    left:-30px;
    top:-10px;

}




.locked {


    opacity:.35;


    filter:grayscale(1);


}








/* ==========================================================
   CHEST
   ========================================================== */


#treasureChest {


    position:absolute;


    font-size:55px;


    z-index:5;


}



#treasureChest.ready {


    animation:

    chestPulse 1.5s infinite;



}



@keyframes chestPulse {


50%{

transform:
scale(1.1);

}


}








/* ==========================================================
   INTERACTION PROMPT
   ========================================================== */


#interactionPrompt {


    position:fixed;


    bottom:120px;


    left:50%;


    transform:
    translateX(-50%);



    background:white;


    padding:12px 30px;


    border-radius:30px;


    font-weight:bold;


    z-index:300;


    box-shadow:

    0 10px 25px var(--shadow);



}








/* ==========================================================
   DIALOGUE
   ========================================================== */


#dialogueBox {


    position:fixed;


    bottom:30px;


    left:50%;


    transform:
    translateX(-50%);



    width:600px;


    max-width:90%;



    background:white;


    border:

    5px solid var(--yellow);



    border-radius:30px;



    padding:25px;



    z-index:200;



    box-shadow:

    0 20px 50px var(--shadow);



}



#speaker {


    font-weight:bold;


    margin-bottom:10px;


}






#dialogueText {


    min-height:50px;


}








/* ==========================================================
   CHALLENGES
   ========================================================== */


#challengeModal {


    position:fixed;


    inset:0;



    background:

    rgba(80,60,40,.35);



    display:flex;


    justify-content:center;


    align-items:center;



    z-index:250;



}



#challengeContent {


    width:600px;


    max-width:90%;



    background:white;



    border-radius:35px;



    padding:35px;



    text-align:center;



    box-shadow:

    0 20px 50px var(--shadow);



}









/* ==========================================================
   GARDEN TRIAL
   ========================================================== */


#gardenArena {

    position:relative;

    width:300px;

    height:200px;

    margin:20px auto 10px;

    overflow:hidden;

    border-radius:25px;

    background:

    linear-gradient(
        #eaffd8,
        white
    );

    border:

    3px solid var(--green);

}


#gardenHeart {

    position:absolute;

    width:30px;

    height:30px;

    font-size:28px;

    line-height:30px;

    z-index:10;

    transition:filter .15s;

}


#gardenHeart.hurt {

    filter:

    drop-shadow(0 0 6px #ff5d5d);

    animation:gardenHurt .3s;

}


@keyframes gardenHurt {

    50%{

    transform:scale(1.3);

    }

}


#gardenLives {

    position:absolute;

    top:8px;

    left:8px;

    font-size:16px;

    z-index:11;

}


.gardenObstacle {

    position:absolute;

    width:30px;

    height:30px;

    font-size:24px;

    line-height:30px;

    text-align:center;

    z-index:5;

}


#gardenTimer {

    margin-top:5px;

}


/* ==========================================================
   MEMORY MEADOW
   ========================================================== */


#memoryGrid {

    display:grid;

    grid-template-columns:repeat(4,100px);

    grid-template-rows:repeat(2,100px);

    gap:16px;

    justify-content:center;

    margin:25px auto 5px;

}


.memoryCard {

    width:100px;

    height:100px;

    font-size:46px;

    background:white;

    border:3px solid var(--yellow);

    border-radius:20px;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:

    0 10px 22px var(--shadow);

    transition:transform .15s;

}


.memoryCard:hover {

    transform:scale(1.05);

}


/* ==========================================================
   PARKOUR
   ========================================================== */


#parkourArena {


    position:relative;


    width:480px;


    height:300px;


    margin:auto;



    overflow:hidden;



    border-radius:25px;



    background:

    linear-gradient(
        #dff5ff,
        white
    );



}




#parkourPlayer {


    position:absolute;


    width:34px;


    height:34px;


    font-size:30px;


    line-height:34px;


    text-align:center;


    z-index:10;


}




#parkourGoal {


    position:absolute;


    width:30px;


    height:30px;


    font-size:28px;


    line-height:30px;


    text-align:center;


    z-index:5;


}





.platform {


    position:absolute;


    width:75px;


    height:15px;


    background:var(--cream);


    border:3px solid var(--yellow-dark);


    border-radius:20px;


    box-shadow:

    0 6px 12px var(--shadow);



}



.platform-moving {


    background:var(--pink);


    border:3px solid #ff8fae;


    box-shadow:

    0 6px 12px var(--shadow);


}








/* ==========================================================
   ENDING
   ========================================================== */


#ending {


    position:fixed;


    inset:0;


    display:flex;


    justify-content:center;


    align-items:center;



}



.ending-card {


    background:white;


    padding:45px;


    border-radius:35px;


    text-align:center;


    box-shadow:

    0 20px 60px var(--shadow);



}