body {
    margin: 0;
}

#start-screen{
    background-image: url('Images/kitchen-background1.png');
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
    width:100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* Make the card large and styled */
.start-card {
    /* Sizing from the travel game */
    width: min(500px, 85vw);
    padding: 40px 25px;
    background-color: rgba(252, 251, 231, 0.85);
    text-align: center;
    border-radius: 10px;
        
}

.start-card h1 {
    color: #144a7b;
    font-family: 'Wendy One', sans-serif;
    font-size: 120px ;
    margin-bottom: 20px;
    font-weight: bold;
}

.start-card p {
    color: #339fba;
    font-family: 'Wendy One', sans-serif;
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 20px;
}

.start-card button {
    font-family: 'Wendy One', sans-serif;
    background: #e5556c;
    color:#fcfbe7;
    border: none;
    padding: 15px 50px;
    font-size: 30px;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
}

#mission-screen {
    background-image: url('Images/kitchen-background-blurry.png');
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;     
    width:100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.mission-card {
    width: min(500px, 85vw);
    padding: 40px 25px;
    background-color: rgba(252, 251, 231, 0.85);
    text-align: center;
    border-radius: 10px;
}

.mission-card h1 {
    color: #339fba;
    font-family: 'Wendy One', sans-serif;
    font-size: 55px ;
    margin-bottom: 20px;
    font-weight: bold;
}

.mission-card h2 {
    color: #144a7b;
    font-family: 'Wendy One', sans-serif;
    font-size: 86px;
    font-weight: bold;
    margin-bottom: 20px;
}

.mission-card p {
    color: #144a7b;
    font-family: "Sanchez",sans-serif;
    font-size: 45px;
}

.next-button {
    position:absolute;
    width: 80px;
    height: auto;
    right: 200px;
    bottom: 90px;
    animation: heartbeat 1.5s infinite; /* Duration and repeat count */
    cursor: pointer;
}

@keyframes heartbeat {
      0% { transform: scale(1); }
  15% { transform: scale(1.15); } /* First rapid pulse */
  30% { transform: scale(1); }
  45% { transform: scale(1.25); } /* Second larger pulse */
  70% { transform: scale(1); }
  100% { transform: scale(1); } /* Pause between beats */
}

#click-note-screen {
    /* Change 'cover' to 'contain' to ensure the full image fits */
    background-image: url('Images/kitchen-background2.png');
    background-size: contain; 
    background-position: center; 
    background-repeat: no-repeat; 
    
    /* Pick a color from your image (like the floor or wall color) 
       to fill the empty space around the image on tall screens */
    background-color: #dec88d; 

    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.click-note-card {
    width: 750px;
    height: 130px;
    padding: 20px 40px 60px 40px;
    background-color: rgba(252, 251, 231, 0.85);
    text-align: center;
    margin-bottom:400px;
}

.click-note-card h1 {
    color: #144a7b;
    font-family: 'Wendy One', sans-serif;
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 20px;
}

.click-note-card p {
    color: #144a7b;
    font-family: "Sanchez",sans-serif;
    font-size: 24px;
}

.sticky-note-button {
    position: absolute;
    width: 100px;
    height: auto;
    right: 110px;
    top: 470px;
    animation: heartbeat 1.5s infinite; /* Duration and repeat count */
    cursor: pointer;
}

#directions-screen {
    background-image: url('Images/kitchen-background-blurry.png');
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;     
    width:100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.directions-card {
    background-image: url('Images/sticky-note-directions.png');
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;   
    width: 470px;
    height: 490px;
    text-align: center;
    border-radius: 10px;
}

/* Makes the bullet points look clean inside a centered card */
.mission-list {
    text-align: left;         /* Aligns the text cleanly to the left */
    display: inline-block;    /* Keeps the whole list centered inside the card */
    margin: 20px auto;        /* Adds space around the list */
    font-size: 22px;          /* Adjust to match your paragraph size */
    line-height: 1.6;         /* Gives the text room to breathe */
    font-family: "Wendy One", sans-serif;
    color: #144a7b;


}

/* Adds a little space above the nested food options */
.mission-list ul {
    margin-top: 10px;
}

#quiz-screen {
    background-image: url('Images/kitchen-background3.png');
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;     
    width:100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* --- QUIZ SCREEN STYLES --- */

.quiz-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 90%;
    max-width: 1200px;
}

/* Timer Sticky Note */
.timer-box {
    background-color: #fcfbe7;
    padding: 15px 40px;
    position: relative;
    z-index: 2;
    box-shadow: 2px 4px 10px rgba(0,0,0,0.1);
    margin-bottom: -20px; /* Pulls the quiz board up slightly behind it */
}

/* The little piece of tape on the timer */
.tape {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 25px;
    background-color: rgba(220, 220, 220, 0.8);
}

.timer-box h1 {
    color: #2883d4; /* Bright blue from your travel game / image */
    font-family: 'Wendy One', sans-serif;
    font-size: 60px;
    margin: 0;
    letter-spacing: 2px;
}

/* The dashed box wrapping the quiz */
.quiz-board {
    border: 4px dashed #b1aebf; /* Purple/Grey dashed line */
    padding: 60px 40px 40px 40px;
    width: 100%;
    text-align: center;
}

.quiz-question {
    color: #144a7b;
    font-family: 'Wendy One', sans-serif;
    font-size: 32px;
    margin-bottom: 40px;
    text-transform: uppercase;
}

/* Flexbox to put answers in a row */
.answers-row {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.answer-btn {
    background-color: #fcfbe7;
    border: none;
    border-radius: 5px;
    padding: 20px;
    width: 220px;
    min-height: 120px;
    color: #144a7b;
    font-family: 'Wendy One', sans-serif;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: transform 0.1s;
}

.answer-btn:active {
    transform: scale(0.95);
}

#reminders-screen {
    /* Use whatever background you want here! */
    background-image: url('Images/kitchen-background-blurry.png');
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;     
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* ========================================================
   CUSTOM GAME POPUP ALERT
======================================================== */
#custom-alert-overlay {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.8);
    display: flex; justify-content: center; align-items: center;
    z-index: 9999; /* Makes sure it is ALWAYS on top! */
}

#custom-alert-box {
    background: white;
    border: 6px solid #111;
    border-radius: 20px;
    padding: 40px;
    text-align: center;
    width: min(500px, 85vw);
    box-shadow: 10px 10px 0px #111;
    
    /* FIX: Changed the animation name to alertPop */
    animation: alertPop 0.3s ease-out; 
}
/* --- NEW: Custom animation just for the alert box --- */
@keyframes alertPop {
    0% { transform: scale(0); }
    80% { transform: scale(1.1); } /* Slight bounce effect */
    100% { transform: scale(1); }
}

#custom-alert-text {
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(20px, 4vw, 28px);
    font-weight: bold;
    color: #333;
    margin-bottom: 30px;
}

#custom-alert-btn {
    font-family: 'Titan One', sans-serif;
    background: #2883d4;
    color: white;
    border: 4px solid #111;
    font-size: clamp(20px, 4vw, 26px);
    padding: 10px 40px;
    border-radius: 40px;
    cursor: pointer;
    box-shadow: 4px 4px 0px #111;
    transition: transform 0.1s;
}
#custom-alert-btn:active { transform: translateY(4px); box-shadow: 0px 0px 0px #111; }


/* --- DAY 1 SCREEN STYLES --- */
#day1-screen {
    background-image: url('Images/kitchen-background3.png');
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;     
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center; /* Keeps everything centered vertically */
    align-items: center;
    position: relative;
    flex-direction: column;
}

/* Sticky Note in Top Right */
.budget-sticky {
    position: absolute;
    top: 5px;
    left: 270px;
    background-color: #f9e5af;
    
    /* Adjusted padding */
    padding: 25px 40px 15px 40px; 
    box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
    transform: rotate(5deg);
    text-align: center;
    position: relative; /* Make sure the tape attaches to this box */
}

.budget-sticky h2 {
    color: #144a7b; /* Blue text */
    font-family: 'Sanchez', sans-serif;
    font-size: 32px;
    margin: 5px 0;
}

/* Prompt Box */
.prompt-box {
    background-color: #fceea7;
    padding: 20px 40px;
    width: 600px;
    text-align: center;
    box-shadow: 4px 4px 10px rgba(0,0,0,0.1);
    
    /* Changed this to push the cards down slightly, instead of a massive gap */
    margin-bottom: 40px; 
    
    /* Added this so the tape inside it positions correctly */
    position: relative; 
}

.prompt-tape {
    position: absolute;
    /* Moved the tape to the top edge of the prompt box */
    top: -10px; 
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 25px;
    background-color: rgba(220, 220, 220, 0.8);
}

.prompt-box p {
    color:#3f6619;
    font-family: 'Wendy One', sans-serif;
    font-size: 22px;
    margin: 0;
}

/* Cards Row */
.cards-container {
    display: flex;
    justify-content: center;
    gap: 40px;
}

.food-card {
    background-color: #5ab1e6; /* Light blue */
    width: 200px;
    border-radius: 20px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 4px 4px 12px rgba(0,0,0,0.2);
}

.image-box {
    background-color: white;
    width: 100%;
    height: 180px;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;
    overflow: hidden;
}

.image-box img {
    width: 90%; /* Adjusts the image to fit nicely inside the white box */
    height: auto;
}

.food-card h2 {
    color: #111;
    font-family: 'Wendy One', sans-serif;
    font-size: 36px;
    font-weight: bold;
    margin: 5px 0;
}

.food-card h3 {
    color: #111;
    font-family: 'Wendy One', sans-serif;
    font-weight: bold;
    font-size: 28px;
    margin: 0 0 15px 0;
}

/* Green Buy Button */
.buy-btn {
    background-color: #28a745; /* Bright green */
    color: white;
    font-family: 'Wendy One', sans-serif;
    font-size: 24px;
    border: none;
    border-radius: 30px;
    padding: 10px 40px;
    cursor: pointer;
    box-shadow: 2px 4px 0px #1e7e34; /* Darker green shadow for 3D effect */
    transition: transform 0.1s, box-shadow 0.1s;
}

.buy-btn:active {
    transform: translateY(4px); /* Pushes the button down when clicked */
    box-shadow: 0px 0px 0px #1e7e34; /* Removes shadow so it looks pressed */
}

/* --- AISLE DODGER GAME STYLES --- */
#dodger-game-screen {
    background-image: url('Images/kitchen-background-blurry.png');
    background-size: cover; 
    background-position: center; 
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.game-header {
    display: flex;
    justify-content: space-between;
    width: 400px;
    background: #fceea7;
    padding: 10px 25px;
    border: 4px solid #b1aebf;
    border-radius: 15px;
    margin-bottom: 15px;
    box-shadow: 4px 4px 0px rgba(0,0,0,0.2);
}

.game-header h2 {
    font-family: 'Wendy One', sans-serif;
    color: #144a7b;
    margin: 0;
    font-size: 28px;
}

#game-board {
    width: 400px;
    height: 500px;
    background-color: #fdfbe2; /* Super light yellow floor */
    border: 6px solid #b1aebf;
    border-radius: 15px;
    position: relative;
    overflow: hidden; /* Stops items from showing outside the box */
    box-shadow: inset 0px 0px 15px rgba(0,0,0,0.1);
    
    /* CRITICAL: Stops the screen from moving when dragging on mobile! */
    touch-action: none; 
}

/* Creating the visual grocery aisles using CSS lines */
#game-board::before {
    content: '';
    position: absolute;
    top: 0; left: 33%;
    width: 4px; height: 100%;
    background: rgba(0,0,0,0.05);
}
#game-board::after {
    content: '';
    position: absolute;
    top: 0; left: 66%;
    width: 4px; height: 100%;
    background: rgba(0,0,0,0.05);
}

#player-cart {
    position: absolute;
    bottom: 10px;
    left: 170px; /* Centers it perfectly (400/2 - 30) */
    font-size: 50px;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: grab; /* Shows the grab hand icon on desktop */
    user-select: none; /* Stops the emoji from being highlighted */
}

#player-cart:active {
    cursor: grabbing;
}

.falling-item {
    position: absolute;
    top: -50px; /* Starts just above the board */
    font-size: 40px;
    width: 40px;
    height: 40px;
    user-select: none;
    filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.3));
}

/* --- FAST FOOD DRIVE-THRU GAME STYLES --- */
#fastfood-game-screen {
    background-image: url('Images/kitchen-background-blurry.png');
    background-size: cover; 
    background-position: center; 
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#drive-thru-board {
    width: 600px;
    height: 400px;
    background-color: #87CEEB; /* Sky blue outside */
    border: 12px solid #333;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    box-shadow: 0px 10px 30px rgba(0,0,0,0.5);
    margin-bottom: 30px;
}

/* The CSS Car */
#moving-car {
    position: absolute;
    top: 120px;
    left: 0px;
    width: 200px;
    height: 120px;
}

#car-body {
    position: absolute;
    bottom: 20px;
    width: 100%;
    height: 60px;
    background-color: #e74c3c; /* Red car */
    border-radius: 20px 20px 10px 10px;
}

/* The Target Zone (The Window) */
#car-window {
    position: absolute;
    bottom: 80px;
    left: 50px;
    width: 80px;
    height: 50px;
    background-color: rgba(255, 255, 255, 0.4);
    border: 4px solid #111;
    border-radius: 10px;
    z-index: 2; /* Needs to be above the car body */
}

/* Car Wheels */
.wheel {
    position: absolute;
    bottom: 5px;
    width: 30px;
    height: 30px;
    background-color: #111;
    border-radius: 50%;
}
.wheel-left { left: 30px; }
.wheel-right { right: 30px; }

/* The Food Bag */
#food-bag {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 80px;
    z-index: 5;
    filter: drop-shadow(4px 4px 5px rgba(0,0,0,0.5));
}

/* The Toss Animation (Moves up and shrinks to look like it's flying away) */
.bag-flying {
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    bottom: 220px !important; /* Moves up to window height */
    font-size: 40px !important; /* Shrinks to look far away */
}

/* The Button */
#toss-btn {
    background-color: #f4d35e;
    color: #111;
    font-family: 'Wendy One', sans-serif;
    font-size: 40px;
    padding: 15px 80px;
    border: 6px solid #111;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 6px 6px 0px #111;
    transition: transform 0.1s, box-shadow 0.1s;
}

#toss-btn:active {
    transform: translateY(6px);
    box-shadow: 0px 0px 0px #111;
}

/* --- DINING OUT TIP GAME STYLES --- */
#dining-game-screen {
    background-image: url('Images/kitchen-background-blurry.png');
    background-size: cover; 
    background-position: center; 
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* The Restaurant Check */
.receipt {
    background-color: #fff;
    width: 350px;
    padding: 30px;
    text-align: center;
    border: 2px solid #ccc;
    box-shadow: 5px 10px 20px rgba(0,0,0,0.3);
    margin-bottom: 30px;
    font-family: 'Courier New', Courier, monospace; /* Makes it look like a receipt printer! */
    color: #111;
}

.receipt h3 {
    font-size: 28px;
    margin-top: 0;
}

.receipt p {
    font-size: 20px;
    font-weight: bold;
    margin: 5px 0;
}

.receipt h2 {
    font-family: 'Wendy One', sans-serif;
    color: #e74c3c;
    font-size: 32px;
    margin-top: 20px;
}

/* The Slider Area */
#tip-game-container {
    width: 600px;
    margin-bottom: 40px;
}

.slider-labels {
    display: flex;
    justify-content: space-between;
    font-family: 'Wendy One', sans-serif;
    font-size: 24px;
    color: white;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
    margin-bottom: -2px;
}

#slider-track {
    width: 100%;
    height: 40px;
    background: linear-gradient(to right, #e74c3c, #f4d35e, #e74c3c); /* Red to Yellow to Red */
    border: 6px solid #111;
    border-radius: 20px;
    position: relative;
    box-shadow: inset 0px 5px 10px rgba(0,0,0,0.5);
}

/* The Green 20% Zone (Placed exactly at 66% of the bar) */
#tip-target-zone {
    position: absolute;
    top: 0;
    left: 60%; /* Starts at 60% width */
    width: 12%; /* Covers exactly the 20% tip area */
    height: 100%;
    background-color: rgba(40, 167, 69, 0.9); /* Bright Green */
    border-left: 3px solid #111;
    border-right: 3px solid #111;
}

#tip-pointer {
    position: absolute;
    top: -45px;
    left: 0%; /* Start position */
    font-size: 50px;
    transform: translateX(-50%); /* Centers the finger over the exact percentage */
    filter: drop-shadow(2px 4px 2px rgba(0,0,0,0.4));
}

#stop-tip-btn {
    background-color: #2883d4;
    color: white;
    font-family: 'Wendy One', sans-serif;
    font-size: 40px;
    padding: 15px 80px;
    border: 6px solid #111;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 6px 6px 0px #111;
    transition: transform 0.1s, box-shadow 0.1s;
}

#stop-tip-btn:active {
    transform: translateY(6px);
    box-shadow: 0px 0px 0px #111;
}

#day2-screen {
    background-image: url('Images/kitchen-background3.png');
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;     
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center; /* Keeps everything centered vertically */
    align-items: center;
    position: relative;
    flex-direction: column;
}
/* --- SHELF SCAVENGER HUNT STYLES --- */
#scavenger-game-screen {
    background-image: url('Images/kitchen-background-blurry.png');
    background-size: cover; 
    background-position: center; 
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#shopping-list-note {
    background-color: #fcfbe7;
    padding: 15px 40px 15px 20px;
    border: 2px solid #e0ddb1;
    box-shadow: 4px 4px 10px rgba(0,0,0,0.2);
    position: relative;
    margin-bottom: 20px;
    width: 300px;
    transform: rotate(-2deg);
}

#shopping-list-note h3 {
    font-family: 'Wendy One', sans-serif;
    color: #e74c3c;
    font-size: 28px;
    margin-top: 5px;
    margin-bottom: 5px;
    text-align: center;
}

#target-list-ui {
    font-family: 'Sanchez', sans-serif;
    font-size: 22px;
    color: #111;
    list-style-type: square;
    padding-left: 20px;
    margin: 0;
}

/* When the player finds an item, it crosses off the list! */
.found-item {
    text-decoration: line-through;
    color: #aaa !important;
}

/* The Wooden Shelf Game Board */
#shelf-board {
    width: 700px;
    height: 350px;
    background-color: #8b5a2b; /* Wood brown */
    border: 12px solid #5c3a21; /* Darker wood border */
    border-radius: 10px;
    position: relative;
    box-shadow: inset 0px 10px 20px rgba(0,0,0,0.5);
    
    /* Creates the look of horizontal shelf planks */
    background-image: repeating-linear-gradient(
        transparent,
        transparent 110px,
        #5c3a21 110px,
        #5c3a21 120px
    );
}

/* Individual Grocery Items scattered on the shelf */
.grocery-item {
    position: absolute;
    font-size: 45px;
    cursor: pointer;
    user-select: none; /* Stops text highlighting when clicking fast */
    filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.5));
    transition: transform 0.1s;
}

.grocery-item:active {
    transform: scale(0.8); /* Shrinks slightly when clicked */
}

/* A quick red flash animation if they click the wrong item */
.wrong-click {
    animation: flashRed 0.3s;
}

@keyframes flashRed {
    0% { background-color: rgba(231, 76, 60, 0); }
    50% { background-color: rgba(231, 76, 60, 0.5); border-radius: 50%; }
    100% { background-color: rgba(231, 76, 60, 0); }
}

/* --- MINI-GAME DIRECTIONS OVERLAY --- */
#game-directions-overlay {
    position: fixed;
    top: 0; 
    left: 0; 
    width: 100vw; 
    height: 100vh;
    background: rgba(0,0,0,0.8); /* Darkens the game behind it */
    z-index: 1000; /* Makes sure it stays on top of everything */
    display: flex;
    justify-content: center;
    align-items: center;
}

.directions-popup {
    background-color: #fcfbe7;
    border: 6px solid #144a7b;
    border-radius: 15px;
    padding: 40px;
    width: 550px;
    text-align: center;
    box-shadow: 10px 10px 0px #111;
}

.directions-popup h1 {
    color: #e74c3c;
    font-family: 'Wendy One', sans-serif;
    font-size: 45px;
    margin-top: 0;
    margin-bottom: 20px;
}

.directions-popup .mission-list {
    font-size: 24px;
    color: #111;
    margin-bottom: 30px;
}

#start-minigame-btn {
    background-color: #28a745;
    color: white;
    font-family: 'Wendy One', sans-serif;
    font-size: 30px;
    padding: 15px 50px;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 4px 6px 0px #1e7e34;
    transition: transform 0.1s, box-shadow 0.1s;
}

#start-minigame-btn:active {
    transform: translateY(6px);
    box-shadow: 0px 0px 0px #1e7e34;
}

/* --- BURGER BUILDER STYLES --- */
#burger-game-screen {
    background-image: url('Images/kitchen-background-blurry.png');
    background-size: cover; 
    background-position: center; 
    width: 100vw; height: 100vh;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}

#order-note {
    background-color: #fff;
    width: 250px;
    padding: 20px;
    border: 1px solid #ccc;
    box-shadow: 4px 4px 10px rgba(0,0,0,0.1);
    position: relative;
    margin-bottom: 20px;
    font-family: 'Courier New', monospace;
    text-align: center;
}

#recipe-display {
    font-weight: bold;
    font-size: 20px;
    line-height: 1.5;
}

#assembly-tray {
    width: 400px;
    height: 250px;
    background-color: #d1d1d1; /* Metallic tray look */
    border: 8px solid #999;
    border-radius: 15px;
    position: relative;
    display: flex;
    flex-direction: column-reverse; /* Stacks burger from bottom up */
    align-items: center;
    padding-bottom: 20px;
    margin-bottom: 30px;
}

/* Individual burger layers inside the tray */
.burger-layer {
    width: 180px;
    height: 30px;
    border-radius: 10px;
    margin-bottom: 2px;
    text-align: center;
    line-height: 30px;
    font-weight: bold;
    color: white;
    font-family: 'Wendy One', sans-serif;
    animation: slideIn 0.2s ease-out;
}

@keyframes slideIn {
    from { transform: translateY(-50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.layer-Bun { background-color: #e67e22; }
.layer-Meat { background-color: #7d4627; }
.layer-Cheese { background-color: #f1c40f; }
.layer-Lettuce { background-color: #2ecc71; }

.ingredient-controls {
    display: flex;
    gap: 15px;
}

.ing-btn {
    padding: 15px 20px;
    font-family: 'Wendy One', sans-serif;
    font-size: 20px;
    border-radius: 10px;
    border: 4px solid #111;
    cursor: pointer;
    background: white;
    transition: transform 0.1s;
}

.ing-btn:active { transform: scale(0.9); }


/* --- BALANCE THE TRAY STYLES --- */
#balance-game-screen {
    background-image: url('Images/kitchen-background-blurry.png');
    background-size: cover;
    background-position: center;
    width: 100vw; height: 100vh;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    cursor: crosshair; /* Helps the player see their exact pointer */
}

#tray-surface {
    width: 600px;
    height: 400px;
    background: radial-gradient(circle, #dcdcdc, #a9a9a9);
    border: 15px solid #444;
    border-radius: 50%; /* Large oval tray */
    position: relative;
    overflow: hidden;
    box-shadow: 0px 20px 40px rgba(0,0,0,0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    touch-action: none;           /* Prevents scrolling/zooming */
    user-select: none;            /* Prevents selecting text/emojis */
    -webkit-user-select: none;    /* Safari specific */
    -webkit-touch-callout: none;  /* Prevents "Save Image" popup on emojis */
}

#balance-zone {
    width: 100px;
    height: 100px;
    background-color: rgba(46, 204, 113, 0.4);
    border: 4px solid #2ecc71;
    border-radius: 50%;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: none; 
    pointer-events: none;         /* Makes sure the circle itself doesn't block the touch */
}

.inner-circle {
    width: 10px;
    height: 10px;
    background-color: #27ae60;
    border-radius: 50%;
}

.tray-food {
    font-size: 80px;
    pointer-events: none; /* Mouse ignores the emojis */
    opacity: 0.8;
}

.game-hint {
    font-family: 'Sanchez', sans-serif;
    color: white;
    font-size: 24px;
    margin-top: 20px;
    text-shadow: 2px 2px 5px #000;
}


/* --- CHECKOUT SORT STYLES --- */
#sort-game-screen {
    background-image: url('Images/kitchen-background-blurry.png');
    background-size: cover;
    background-position: center;
    width: 100vw; height: 100vh;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}

#conveyor-container {
    width: 800px;
    height: 200px;
    background-color: #444;
    border: 10px solid #222;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    margin-bottom: 40px;
}

/* Update this in your style.css */
#conveyor-belt {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.sort-item {
    position: absolute;
    font-size: 60px;
    top: 50%;
    transform: translateY(-50%);
    /* Transition must be none for RequestAnimationFrame to work */
    transition: none; 
}

.wrong-flash {
    background-color: rgba(255, 0, 0, 0.5);
    border-radius: 50%;
}

@keyframes beltMove {
    from { left: 0; }
    to { left: -80px; }
}

#grocery-bag-goal {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 100px;
    z-index: 5;
}

#moving-item {
    position: absolute;
    right: -100px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 70px;
    z-index: 10;
}

.sort-controls {
    display: flex;
    gap: 30px;
}

.sort-btn {
    padding: 20px 60px;
    font-family: 'Wendy One', sans-serif;
    font-size: 32px;
    border: 5px solid #111;
    border-radius: 50px;
    cursor: pointer;
    color: white;
    box-shadow: 6px 6px 0px #111;
    transition: transform 0.1s;
}

.keep { background-color: #28a745; }
.toss { background-color: #e74c3c; }

.sort-btn:active { transform: scale(0.9); box-shadow: 0px 0px 0px #111; }

/* --- BAGGING RUSH STYLES --- */
#bagging-game-screen {
    background-color: #f2f2f2;
    width: 100vw; height: 100vh;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}

#kitchen-chute {
    width: 600px; height: 120px;
    background: #bbb;
    border: 5px solid #888;
    position: relative;
    overflow: hidden;
    margin-bottom: 50px;
}

#chute-item {
    position: absolute;
    left: -100px; top: 50%;
    transform: translateY(-50%);
    font-size: 60px;
    padding: 10px;
    border-radius: 10px;
    border: 5px solid black; /* This border color will change via JS */
}

#bagging-zone {
    display: flex; gap: 20px;
}

.bag {
    width: 120px; height: 160px;
    border: 6px solid #333;
    border-radius: 15px;
    font-family: 'Wendy One', sans-serif;
    font-size: 20px;
    cursor: pointer;
    transition: transform 0.1s;
}

.red-bag { background-color: #ff4d4d; color: white; }
.blue-bag { background-color: #4d94ff; color: white; }
.yellow-bag { background-color: #ffd633; color: black; }

.bag:active { transform: scale(0.9); }

/* --- FANCY GARNISH STYLES --- */
#garnish-game-screen {
    background-color: #34495e;
    width: 100vw; height: 100vh;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}

#plating-area {
    width: 800px;
    height: 400px;
    background-color: #2c3e50;
    border: 10px solid #bdc3c7;
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;
}

#falling-garnish {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 60px;
    z-index: 10;
}

#moving-plate {
    width: 220px;
    height: 220px;
    background-color: white;
    border: 8px solid #d4af37; /* Gold trim */
    border-radius: 50%;
    position: absolute;
    bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 10px 20px rgba(0,0,0,0.5);
}

#chefs-circle {
    width: 60px;
    height: 60px;
    border: 3px dashed #e74c3c;
    border-radius: 50%;
}

#drop-btn {
    background: #d4af37;
    color: #111;
    font-family: 'Wendy One', sans-serif;
    font-size: 32px;
    padding: 15px 60px;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    box-shadow: 0px 6px 0px #917524;
}

.garnish-falling-anim {
    transition: top 0.6s cubic-bezier(0.47, 0, 0.745, 0.715);
    top: 280px !important; /* Lands on the plate height */
}