body {
    margin: 0;
    overflow: hidden; /* Prevent scrollbars */
    font-family: sans-serif;
    background-color: #333;
    color: #eee;
}

#game-container {
    position: relative;
    width: 100vw;
    height: 100vh;
}

#game-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

#ui-overlay {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    display: flex;
    justify-content: space-between;
    pointer-events: none; /* Allow clicks to pass through to canvas */
    color: white;
    text-shadow: 1px 1px 2px black;
}

#ui-overlay > div {
    background-color: rgba(0, 0, 0, 0.6);
    padding: 10px;
    border-radius: 5px;
    margin: 5px;
    pointer-events: auto; /* Enable interaction for UI elements */
    align-self: flex-start; /* Align panels to the top */
    max-height: 90vh; /* Prevent panels from becoming too tall */
    overflow-y: auto; /* Add scroll if content overflows */
}

#info-panel, #inventory-panel, #selected-seed-panel {
    min-width: 150px;
}

#message-log {
    position: absolute;
    bottom: 10px;
    left: 10px;
    right: 10px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 5px;
    border-radius: 3px;
    pointer-events: auto;
}

#upgrades-panel {
    min-width: 200px;
}

#upgrades-list button {
    display: block;
    margin-top: 5px;
    pointer-events: auto; /* Ensure buttons are clickable */
    cursor: pointer;
    padding: 5px 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #e0e0e0; /* Default: Ready to buy background */
    color: #222; /* Default: Dark text for readability */
    text-align: left; /* Align text nicely */
    width: 100%; /* Make buttons fill container */
    box-sizing: border-box; /* Include padding/border in width */
}

#upgrades-list button small {
    color: #555; /* Slightly lighter color for description/cost */
    display: block; /* Put cost/desc on new lines */
    margin-top: 2px;
}


#upgrades-list button:disabled {
    cursor: not-allowed;
    background-color: #aaa; /* Disabled/Unaffordable background */
    color: #333; /* Still dark text */
    opacity: 0.7; /* Keep opacity adjustment */
}

/* Style for purchased upgrades */
#upgrades-list button.purchased {
    background-color: #d0e0d0; /* Light green background */
    color: #1a3a1a; /* Dark green text */
    border-color: #a0c0a0;
    cursor: default;
    pointer-events: none; /* Not interactive */
}
#upgrades-list button.purchased small {
     color: #4a6a4a;
}

#seeds-inventory button {
     margin-left: 10px;
     pointer-events: auto;
     cursor: pointer;
}

#selected-seed-panel button {
    margin-left: 10px;
    pointer-events: auto;
    cursor: pointer;
}

h2, h3, h4 {
    margin-top: 0;
    margin-bottom: 8px;
}

#inventory-panel div {
    margin-bottom: 4px;
}

/* Tooltip Style */
#tooltip {
    position: absolute;
    display: none; /* Hidden by default */
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.9em;
    pointer-events: none; /* Don't let tooltip interfere with clicks */
    white-space: nowrap; /* Prevent wrapping */
    z-index: 100; /* Ensure it's on top */
}