body {
    font-family: Arial; /* Sets the font family for the entire page */
    display: flex; /* Enables flexbox layout on the body */
    justify-content: space-between;
    align-items: center; /* Centers the container vertically */
    height: 100vh; /* Sets the height of the body to 100% of the viewport height */
    background-color: #1c2229; /* Sets the background color of the body */
    margin: 0; /* Removes the default margin of the body */
    overflow: hidden; /* Prevents content from overflowing the viewport */

}


.right-panel {
    flex: 0.6;
    display: flex; /* Enables flexbox layout on the right panel */
    flex-direction: column; /* Arranges children elements in a column */
    align-items: flex-start; /* Aligns children elements to the end of the cross axis (right) */
    padding: 20px; /* Adds padding inside the right panel */
    height: 100vh; /* Sets maximum height of the right panel */
    overflow-y: auto; /* Adds vertical scrollbar if content overflows */
    overflow-y: auto; /* Adds vertical scrollbar if content overflows */
    background-image: url("game assets/pictures/shop_background.png");
    background-position: center; /* Optional: Center the image */
    background-size: 100% 100%; /* Stretch to fill both dimensions */
    width: 100%; /* Make sure the panel takes up the full width */
    height: 100%; /* Make sure the panel takes up the full height */
    max-width: 400px;
    min-width: 350px;
    align-items: center;
}

/* Panel width settings */
.middle-panel {
    text-align: center; /* Centers the text inside the left panel */
    display: flex; /* Enables flexbox layout on the left panel */
    flex-direction: column; /* Arranges children elements in a column */
    align-items: center; /* Centers children elements horizontally */
    height: 100vh;
    flex: 1; /* Smaller flex value reduces the width of the middle panel */
    background-image: url("game assets/pictures/backgroundR.png");
    width: 100%; 
    background-repeat: repeat-x; /* Repeat the background horizontally */
    background-size: cover; /* Double the width for smooth looping */
    animation: slideBackground 100s linear infinite; /* Continuous animation */
    overflow-y: auto; /* Adds vertical scrollbar when content overflows */
    overflow-x: hidden; /* Prevents horizontal scrolling if content overflows */
}

@keyframes slideBackground {
    0% {
        background-position: 0 0; /* Start from the left */
    }
    100% {
        background-position: -200% 0; /* Move two full image widths to the left */
    }
}


.left-panel {
    text-align: center; /* Centers the text inside the left panel */
    display: flex; /* Enables flexbox layout on the left panel */
    flex-direction: column; /* Arranges children elements in a column */
    align-items: center; /* Centers children elements horizontally */
    height: 100vh;
    width: 50%;
    max-width: 480px;
    min-width: 280px;
    background-image: url('game assets/pictures/background.png');
    background-size: cover; /* Adjust this value to fit your needs */
    background-repeat: no-repeat; /* Prevent the background from repeating */
    background-position: center; /* Center the background image */
}

.cloud {
    margin: 20px 0; /* Adds vertical margin above and below the cloud container */
    text-align: center; /* Centers the content inside the cloud container */
}
.cloud:active {
    transform: scale(0.96); /* Shrinks cloud briefly */
    transition: transform 0.2s ease-in-out;
}

.cloud img {
    width: 400px; /* Sets the width of the cloud image */
    cursor: pointer; /* Changes the cursor to a pointer when hovering over the cloud image */
    transition: transform 0.2s; /* Smooth transition for the scaling effect */
}

.cloud img:hover {
    transform: scale(1.1); /* Enlarge the cloud image by 1.1 times on hover */
}

button.upgrade-button {
    font-size: 50;
    display: block; /* Makes the button a block-level element */
    margin: 10px 0; /* Adjust the margin to reduce the space between buttons */
    padding: 10px 20px; /* Adds padding inside the button */
    font-size: 18px; /* Sets the font size of the button text */
    cursor: pointer; /* Changes the cursor to a pointer when hovering over the button */
    width: 300px; /* Sets the width of the button */
    text-align: center; /* Centers the text inside the button */
    position: relative; /* Enables positioning of child elements */
}

button.upgrade-button .cost {
    font-size: 18;
    display: block; /* Makes the cost span a block-level element */
    margin-top: 10px; /* Adds top margin to the cost span */
}

button.upgrade-button .info {
    display: none; /* Hides the info span by default */
    position: absolute; /* Positions the info span relative to the button */
    top: -20px; /* Aligns the top of the info span with the top of the button */
    right: 80%; /* Positions the info span to the right of the button */
    background-color: #fff; /* Sets the background color of the info span */
    color: #000; /* Sets the text color of the info span */
    padding: 7px; /* Adds padding inside the info span */
    border: 1px solid #000; /* Adds a border to the info span */
    z-index: 1; /* Ensures the info span appears above other elements */
    width: max-content; /* Ensures the info span takes up only as much width as needed */
    white-space: nowrap; /* Prevents the info span text from wrapping */
    flex-direction: column; /* Arranges the children of the info span in a column */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Adds a shadow to the tooltip for better visibility */
    font-size: 16px; /* Sets the font size of the button text */
}

button.upgrade-button .info p {
    margin: 5px 0; /* Added margin to separate each piece of information */
}

.divider1, .divider2{
    height: 100vh;
    width: 15px;
    flex-shrink: 0;
}

#saveModal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background: white;
    padding: 20px;
    border-radius: 5px;
    width: 300px;
    text-align: center;
}

textarea {
    width: 100%;
    height: 100px;
}

#saveNotification {
    position: fixed;
    bottom: 10px;
    right: 10px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 10px;
    border-radius: 3px;
    font-size: 14px;
    display: none; /* Hidden by default */
    z-index: 1000;
}

/* Tab container */
.tab-container {
    display: flex;
    justify-content: space-around;
    margin-bottom: 10px;
}

/* Tab buttons */
.tab-button {
    padding: 10px 20px;
    cursor: pointer;
    background-color: #f1f1f1;
    border: none;
    outline: none;
    transition: background-color 0.3s;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Shadow for better visibility */
}

.tab-button:hover {
    background-color: #ddd;
}

.tab-button.active {
    background-color: #ccc;
}

/* Tab content */
.tab-content {
    display: none;
}

.tab-content h3 {
    margin-top: 0;
}

.settings-option {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

/* General button styling */
.settings-option button {
    padding: 10px 15px;
    font-size: 16px;
    width: 120px;
    height: 40px;
    background-color: #4CAF50; /* Default green color */
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    margin-right: 15px;
}

/* Red styling for the Wipe Save button */
#wipeSaveButton {
    background-color: #f44336; /* Red color */
}

#wipeSaveButton:hover {
    background-color: #d32f2f; /* Darker red on hover */
}

.settings-option button:hover {
    background-color: #45a049; /* Slightly darker shade on hover */
}

/* Description styling */
.settings-option p {
    margin: 0;
    font-size: 14px;
    color: #555;
}

/* Align button to the left and description to the right */
.settings-option {
    justify-content: flex-start;
}

.building {
    display: flex;               /* Use flexbox for each building */
    align-items: center;          /* Align image and content vertically */
    margin-bottom: 3px;          /* Space between buildings */
    width: 100%;                  /* Ensure the building container takes full width */
    min-height: 250px;
}

/* Styling for the building images */
.building-img {
    width: 170px;                 /* Increase image size */
    height: 170px;                /* Keep height proportional */
    margin-right: 5px;          /* Space between image and text */
}

.building-img:hover {
    opacity: 0.9; /* Slight transparency on hover */
}

/* Styling for the building info and buttons */
.building-info {
    flex: 1;                     /* Allow the info to take up the remaining space */
    display: flex;
    flex-direction: column;       /* Stack name, description, and button */
}

/* Button styling */
.buy-button {
    width: 175px;
    font-size: 18px;
    padding: 10px 15px;
    margin-top: 5px;
    margin-bottom: 25px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.buy-button:hover {
    background-color: #45a049;
}

/* Cost display */
.cost {
    font-size: 18;
    margin-top: 5px;
    font-size: 14px;
}

/* Click upgrade container */
.click-upgrade {
    align-items: center;          /* Align image and content vertically */
    margin-bottom: 20px;          /* Space between items */
    width: 100%;                  /* Make the container take full width */
}

/* Reuse the same building image size for consistency */
.click-upgrade .building-img {
    width: 80px;                 /* Larger image size */
    height: 80px;                /* Keep height proportional */
    margin-right: 15px;          /* Space between image and text */
}

/* Click upgrade info (name, description, button) */
.click-upgrade-info {
    flex: 1;                     /* Let the info take the remaining space */
    display: flex;
    flex-direction: column;       /* Stack text and button */
}

.building-info-display {
    flex: 1 1 200px; /* Allows the boxes to be flexible, with a minimum width of 200px */
    max-width: 250px; /* Optional: limits the maximum width */
    box-sizing: border-box;
    padding: 10px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    border-radius: 5px;
    text-align: center; /* Center-align the text inside the box */
    display: flex;
    flex-direction: column; /* Arrange content vertically */
    align-items: center; /* Center content horizontally */
}

.building-info-display h4 {
    margin: 0;
}

.building-info-display p {
    margin: 5px 0;
}

.upgrade-button {
    width: auto; /* Set width to auto for more control */
    max-width: 80%; /* Limit the maximum width to 80% of the container */
    margin-top: 8px; /* Add some top margin for spacing */
    padding: 5px 10px; /* Adjust padding for a smaller size */
    cursor: pointer;
    background-color: #4caf50;
    color: white;
    border: none;
    border-radius: 3px;
    font-size: 0.85em; /* Slightly reduce font size */
}

.upgrade-button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

.upgrade-button.outline {
    border: 2px solid #4caf50; /* Green outline */
    background-color: transparent; /* Transparent background */
    color: #4caf50; /* Green text */
}

.upgrade-button.enabled {
    background-color: #4caf50; /* Solid green background */
    color: white; /* White text for the enabled button */
}

#buildingList {
    display: flex;
    flex-wrap: wrap; /* Allows the boxes to wrap to the next line */
    gap: 10px; /* Spacing between the boxes */
    justify-content: center; /* Center the building boxes horizontally */
    padding: 20px; /* Optional: adds padding around the container */
}