body {
    font-family: "Plus Jakarta Sans", sans-serif;
    background-color: #f0f0f0; /* Fallback background, canvas will cover */
    color: #333;
}

#game-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#ui-container {
    /* Styles for ui-container are in index.html for higher specificity */
    /* This ensures they override default body/flex behaviors if any */
}

.hud-score-display {
    display:flex;
    flex-direction: row;
}


#hud-top {
    padding-top: 15px;
    display:flex;
    justify-content: row;
}

#score-display, #player-score-hud, #ai-score-hud, #vs-text-hud {
    vertical-align: middle;
    align-self: center;
    font-size: 1.2em;
    /* font-weight: bold; */
    color: #333;
    /* background-color: rgba(255, 255, 255, 0.7); */
    padding: 3px 10px;
    border-radius: 5px;
}

#money-display {
    font-size: 1.5em;
    font-weight: bold;
    background-color: rgba(255, 255, 255, 0.7);
    padding: 5px 15px;
    border-radius: 8px;
}

#stage-display {
    font-size: 0.8em; /* Smaller font for inside the bar */
    font-weight: bold;
    color: rgba(0, 0, 0, 0.7); /* Dark text for contrast */
    text-shadow: 1px 1px 1px rgba(255,255,255,0.5); /* Light shadow for readability */
    position: absolute; /* Position absolutely inside container */
    left: 50%; /* Center horizontally */
    top: 50%;  /* Center vertically */
    transform: translate(-50%, -50%); /* Exact centering */
    z-index: 2; /* Ensure it's above the progress bar fill */
    pointer-events: none; /* Prevent text from interfering with clicks if any */
}

#hud-bottom {
    padding-bottom: 20px;
    max-width: 500px; /* Limit width of buttons on wider screens */
    margin-left: auto;
    margin-right: auto;
}

#hud-bottom button {
    font-family: "Plus Jakarta Sans", sans-serif; /* Explicitly set font */

    padding: 12px 8px;
    font-size: 0.9em;
    font-weight: bold;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    flex-grow: 1;
    margin: 0 5px;
    text-align: center;
    line-height: 1.3;
    box-shadow: 0 3px 5px rgba(0,0,0,0.2);
    transition: background-color 0.2s ease, transform 0.1s ease;
    min-width: 110px; /* Ensure buttons don't get too squeezed */
}

#hud-bottom button span {
    font-size: 1.1em;
    display: block;
    margin-top: 4px;
}

#hud-bottom button:hover {
    transform: translateY(-2px);
}

#hud-bottom button:active {
    transform: translateY(0px);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

#upgrade-speed {
    background-color: #f39c12; /* Yellow/Orange */
}
#upgrade-speed:hover:not(:disabled) {
    background-color: #e68a00;
}

#upgrade-knives {
    background-color: #e74c3c; /* Red/Orange */
}
#upgrade-knives:hover:not(:disabled) {
    background-color: #c0392b;
}

#upgrade-multiplier, #upgrade-blitz {
    background-color: #2ecc71; /* Green */
}
#upgrade-multiplier:hover:not(:disabled), #upgrade-blitz:hover:not(:disabled) {
    background-color: #27ae60;
}

/* Style for disabled buttons */
#hud-bottom button:disabled {
    background-color: #95a5a6; /* Grey */
    color: #e0e0e0;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

#progress-bar-container {
    width: 80%;
    max-width: 300px;
    height: 18px; /* Slightly taller to accommodate text */
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 9px; /* Match height */
    margin: 8px auto 0;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.1);
    position: relative; /* Needed for absolute positioning of children */
}

#progress-bar-fill {
    width: 0%; 
    height: 100%;
    background-color: #4CAF50; 
    border-radius: 8px; /* Slightly smaller */
    transition: width 0.3s ease-in-out;
    position: relative; /* To potentially place things relative to the fill if needed */
    z-index: 1; /* Below the stage text */
}

/* Start Screen Styles */
#top-right-profile-area {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    z-index: 1001; /* Ensure it's above other start screen elements but potentially below popups */
}

#welcome-message-span {
    color: #ffffff;
    margin-right: 10px;
    font-size: 0.9em; /* Adjust as needed */
    font-weight: bold;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

#add-to-homescreen-button {
    position: absolute;
    bottom: 20px; /* Adjust as needed for padding from the bottom */
    padding: 12px 25px;
    font-size: 0.7em;
    background-color: #dadada; /* Example color, adjust to your theme */
    color: #333;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    width:300px;
    left:0;
    right:0;
    margin:auto;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    z-index: 100; /* Ensure it's above other start screen elements if necessary */
    line-height: 1.5;
}

#add-to-homescreen-button:hover {
    background: linear-gradient(145deg, #42A5F5, #1E88E5);
}

#add-to-homescreen-button:active {
    background: linear-gradient(145deg, #1976D2, #1565C0);
}

#add-to-homescreen-button .material-icons {
    font-size: 1.4em;
    margin-right: 8px;
    vertical-align: middle;
}

#start-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Subtle gradient background */
    background: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.85));
    display: flex;
    flex-direction: column; /* Stack title and button vertically */
    justify-content: center;
    align-items: center;
    z-index: 1000; 
    color: white; /* Default text color for start screen */
    text-align: center; /* Ensure text within elements is centered */
    padding-bottom: 100px; /* Added padding to prevent overlap with bottom button */
    box-sizing: border-box; /* Ensure padding is included in height calculation */
}

#game-title {
    font-size: 4.5em; /* Much larger title */
    font-weight: 700; /* Bold weight */
    color: #FFC107; /* Amber color, like Game Over title */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* Add shadow */
    margin-bottom: 40px; /* Space between title and button */
    letter-spacing: 2px; /* Add some letter spacing */
    text-transform: uppercase; /* Make title uppercase */
}

#start-game-button, #start-vs-ai-button {
    padding: 20px 45px; /* Slightly adjusted padding */
    font-size: 1.9em;
    font-weight: 700; /* Bold button text */
    color: white;
    background: linear-gradient(145deg, #5cb85c, #4CAF50); /* Green gradient */
    border: none;
    border-radius: 12px; /* Slightly more rounded */
    cursor: pointer;
    width: 300px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.4); /* Stronger shadow */
    transition: background 0.3s ease, transform 0.1s ease, box-shadow 0.2s ease;
}

#start-vs-ai-button {
    background: linear-gradient(145deg, #eb1845, #eb1845); /* Green gradient */
    font-size: 1.9em;
}

#start-game-button:hover {
    background: linear-gradient(145deg, #66cc66, #5cb85c);
    transform: scale(1.05) translateY(-2px); /* Lift and scale */
    box-shadow: 0 8px 22px rgba(0,0,0,0.45);
}

#start-game-button:active {
    transform: scale(1.0) translateY(0px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

/* Top Right Controls */
#top-right-controls {
    position: absolute;
    top: 120px; /* Further increased top margin based on user feedback (60px + 100px) */
    right: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    pointer-events: auto;
}

#top-right-controls button {
    background-color: rgba(0,0,0,0.4);
    color: white;
    /* border: 1px solid rgba(255,255,255,0.3); */
    padding: 6px 10px;
    border-radius:100%;
    cursor: pointer;
    margin-bottom: 5px;
    font-size: 0.8em;
    width: 50; /* Ensure text fits */
    height:50px;
    text-align: center;
}

#top-right-controls button:hover {
    background-color: rgba(0,0,0,0.6);
}

/* Timer Display */
#timer-display {
    font-size: 1.8em; /* Or your preferred size */
    color: black;   /* --- ADD THIS LINE or change to your default HUD text color --- */
    margin-top: 8px;
    width: 100px;
    background-color: rgba(255, 255, 255, 0.6);
    padding: 10px 0px;
    border-radius: 5px;
    display: inline-block;
    transition: color 0.3s ease, transform 0.3s ease; /* Smooth transition for color/scale if needed */
    display:none;
}

@keyframes pulsate {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.12);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.timer-pulsate {
    animation: pulsate 0.6s infinite ease-in-out;
    color: #E53935 !important; /* Pulsates to red. !important can help override other styles */
    font-weight: bold;
}

/* Game Over Screen Styles */
#game-over-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1000; 
    color: white;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
}

#game-over-screen h2 {
    font-size: 2.5em;
    margin-bottom: 15px;
    color: #FFC107; /* Amber */
}

#game-over-screen p {
    font-size: 1.4em;
    margin-bottom: 20px;
}

#game-over-screen h3 {
    font-size: 1.2em;
    margin-bottom: 10px;
    color: #FF9800; /* Orange */
}

#high-scores-list {
    list-style-type: none;
    padding: 0;
    margin-bottom: 30px;
    max-width: 300px;
    width: 100%;
}

#high-scores-list li {
    background-color: rgba(255,255,255,0.1);
    padding: 8px;
    margin-bottom: 5px;
    border-radius: 4px;
    font-size: 1.1em;
    text-align: left;
}

#high-scores-list li.current-high-score {
    font-weight: bold;
    color: #FFEB3B; /* Yellow */
    background-color: rgba(255, 235, 59, 0.2);
}

#restart-game-button {
    padding: 15px 30px;
    font-size: 1.5em;
    color: white;
    background-color: #4CAF50;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}
#restart-game-button:hover {
    background-color: #45a049;
}

/* Icon Button Specific Styles */
.icon-button {
    font-size: 1.2em;
    padding: 8px;
    min-width: 48px;
    max-width: 48px;
    height: 48px;
    line-height: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    background: none; /* Transparent background */
    border: none; /* No border */
    color: #555; /* Darker icon color for visibility without background */
    cursor: pointer; /* Ensure cursor indicates clickability */
    transition: color 0.2s ease, transform 0.1s ease;
}

.icon-button:hover {
    color: #000; /* Darken icon on hover */
    transform: scale(1.1);
}

.icon-button .material-icons {
    font-size: 30px; /* Slightly larger icon size */
    vertical-align: middle;
}

/* Specific margin for share button icon */
#share-score-button .material-icons {
    margin-right: 8px;
}

/* Remove specific background colors for icon buttons */
#pause-button {
    /* background-color: #FF9800; */
}
#pause-button:hover {
    /* background-color: #FB8C00; */
}

#menu-button {
    /* background-color: #2196F3; */
}
#menu-button:hover {
    /* background-color: #1E88E5; */
}

#sound-toggle-button {
    /* background-color: #4CAF50; */
}
#sound-toggle-button:hover {
    /* background-color: #43A047; */
} 

.floating-money{position:absolute;}

/* Toggle Switch Styles */
.setting-toggle {
    /* Add any container styling if needed */
}

.switch {
    position: relative;
    display: inline-block;
    width: 50px;  /* Width of the switch */
    height: 24px; /* Height of the switch */
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #777; /* Default OFF color */
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px; /* Size of the knob */
    width: 18px;
    left: 3px;   /* Padding from left */
    bottom: 3px; /* Padding from bottom */
    background-color: white;
    transition: .4s;
}

input:checked + .slider {
    background-color: #4CAF50; /* ON color (e.g., Green) */
}

input:focus + .slider {
    box-shadow: 0 0 1px #4CAF50;
}

input:checked + .slider:before {
    transform: translateX(26px); /* How far the knob moves */
}

/* Rounded sliders */
.slider.round {
    border-radius: 24px;
}

.slider.round:before {
    border-radius: 50%;
}

#chop-button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

#object-type-selector button {
    background-color: white;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 50%; /* Makes the button round */
    width: 50px; /* Fixed width */
    height: 50px; /* Fixed height */
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 5px; /* Spacing between buttons and display */
    padding: 0; /* Remove default padding */
    line-height: 1; /* Adjust for better vertical centering of text */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

#object-type-selector button:hover {
    background-color: #f0f0f0;
    box-shadow: 0 3px 6px rgba(0,0,0,0.15);
}

#object-type-selector button:active {
    background-color: #e0e0e0;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* Specific styles if needed, but the common one above should cover it */
/*
#prev-object-type-button {
}

#next-object-type-button {
}
*/

#order-display-container {
    position: absolute;
    bottom: 20px; /* Adjust based on the height of your bottom UI */
    left: 0px;
    right: 0px;
    width: 80%; /* Reduced from 250px */
    max-height: 350px; /* Reduced from 200px */
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 8px; /* Reduced from 10px */
    border-radius: 6px; /* Reduced from 8px */
    border: 1px solid #555;
    font-family: 'Arial', sans-serif;
    overflow-y: auto;
    z-index: 100;
    margin:auto;
}

#order-display-container h3 {
    margin-top: 0;
    margin-bottom: 8px; /* Reduced */
    font-size: 1em; /* Reduced */
    text-align: center;
}

.order-salad-item {
    margin-bottom: 10px; /* Reduced */
}

.order-salad-item h4 {
    margin: 0 0 4px 0; /* Reduced */
    font-size: 0.9em; /* Reduced */
    color: #ffdd57;
}

.order-salad-item ul {
    list-style-type: none;
    padding-left: 5px;
    margin: 0;
}

.order-salad-item li {
    font-size: 0.8em; /* Reduced */
    margin-bottom: 2px; /* Reduced */
}

.ingredient-completed {
    text-decoration: line-through;
    color: #888;
}

/* Main container for each salad in the order display */
.order-salad-item-container {
    display: flex; /* Arrange details and plate side-by-side */
    justify-content: space-between; /* Space them out */
    align-items: flex-start; /* Align items to the top */
    margin-bottom: 15px; /* Existing margin from .order-salad-item */
    padding-bottom: 10px;
    border-bottom: 1px dashed #444; /* Separator for each salad */
}

.order-salad-item-container:last-child {
    border-bottom: none; /* No border for the last item */
    margin-bottom: 0;
}

/* Container for text details (name, ingredients list) */
.order-salad-details {
    flex-grow: 1; /* Allow text details to take available space */
    padding-right: 8px; /* Space between text and plate */
}

/* Plate area on the right */
.order-plate-area {
    width: 60px;
    height: 60px;
    position: relative;
    /* border: 1px solid #666; */ /* Optional: keep or remove border */
    /* background-color: #d2b48c; */ /* REMOVE THIS LINE */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transform: scale(1.5);
    margin-right: 20px;
    /* Add this if your plate.png has transparency and you want a fallback color */
    /* background-color: #your_preferred_fallback_color_if_plate_is_transparent; */
}

/* Visual placeholder for the plate background - can be an <img> if you have plate.png */
.plate-background-visual {
    width: 100%;
    height: 100%;
    border-radius: 50%; /* To keep it round if the image itself isn't perfectly circular */
    background-image: url('img/plate.png'); /* ADD THIS LINE */
    background-size: contain; /* Or 'cover', depending on your plate image and desired look */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Prevent tiling */
    /*
    If you were using the content property before, remove it unless specifically needed for other reasons.
    The background-image properties are generally better for this.
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0; // This would place it behind the fruit slots, which is good.
    */
}

/* Container for fruit icons on the plate */
.fruit-slots-container {
    position: absolute; /* Positioned relative to .order-plate-area */
    top: 0;
    left: 0;
    width: 100%;      /* Takes full width of .order-plate-area */
    height: 100%;     /* Takes full height of .order-plate-area */
    /* Ensure NO 'display: grid' or 'display: flex' here if it was present from before */
    z-index: 1;       /* Ensures icons are above the plate background visual */
}

/* Individual fruit icons on the plate */
.fruit-icon-on-plate {
    position: absolute; /* THIS IS CRITICAL for the JavaScript positioning to work */
    /* width and height are now set by JavaScript (e.g., 20px) */
    object-fit: contain; /* Scales the fruit image nicely within its set dimensions */
}

.fruit-icon-on-plate.monotone {
    filter: grayscale(100%) opacity(0.6);
    /* Optional: add a transition if you want a smooth change to color */
    /* transition: filter 0.3s ease-in-out; */
}

/* Existing styles for .order-salad-item h4 and li might need minor tweaks if any issues */
.order-salad-item-container h4 { /* Was .order-salad-item h4 */
    margin: 0 0 4px 0;
    font-size: 0.9em;
    color: #ffdd57;
}

.order-salad-item-container ul { /* Was .order-salad-item ul */
    list-style-type: none;
    padding-left: 5px;
    margin: 0;
}

.order-salad-item-container li { /* Was .order-salad-item li */
    font-size: 0.8em;
    margin-bottom: 2px;
}

.ingredient-completed { /* No change needed here */
    text-decoration: line-through;
    color: #888;
}

.collect-salad-button {
    background-color: #4CAF50; /* Green background */
    color: white; /* White text */
    border: none;
    border-radius: 15px; /* More rounded corners */
    padding: 10px 20px; /* Comfortable padding */
    font-size: 1em;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow */
    transition: background-color 0.3s ease, transform 0.1s ease; /* Smooth transitions */
    margin-left: 10px; /* Ensure some space from the salad details */
}

.collect-salad-button:hover {
    background-color: #45a049; /* Darker green on hover */
    transform: translateY(-2px); /* Slight lift on hover */
}

.collect-salad-button:active {
    transform: translateY(1px); /* Press down effect */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Smaller shadow when pressed */
}

#lives-display {
    font-size: 1.2em;
    color: #ff0000; /* Example: Red color for lives */
    font-weight: bold;
    /* Add other styles like padding, background, etc. as needed */
    margin-left: 20px; /* Example margin */
    margin-top:20px;
}

.lives-container {
    display: flex;
    align-items: center;
    /* Add any other layout styling you need for its position in the HUD */
    /* For example, if it's inside #hud-top next to the timer: */
    margin-left: 15px; /* Space it from the timer */
}

/* Styling for the heart icons in the lives display */
#lives-display .life-heart-icon { /* Targets .material-icons within #lives-display that also have .life-heart-icon */
    font-size: 28px; /* Adjust size of the heart icon font */
    color: red;      /* Color for active hearts */
    margin-right: 5px; /* Small space between hearts - INCREASED from 2px */
    line-height: 1;  /* Helps with consistent vertical alignment */
}

#lives-display .life-heart-icon.lost {
    color: #757575; /* Darker grey for 'favorite_border' to make it look empty/lost */
    /* Or you could use a lighter color if your background is dark */
    /* opacity: 0.6; */ /* Another option to make them look faded */
}

/*
   The .floating-money class is already styled for position.
   The prepended heart icon in showFloatingText is styled inline in JS for its size
   and will inherit the red color from its parent when isWarning is true.
   No extra CSS should be strictly needed for the floating text heart unless you want
   more specific control beyond what's done in JS.
*/

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.order-container-shake {
  animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}