body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: #87CEEB; text-align: center; color: #333;
    padding-top: 20px; overflow-y: auto; user-select: none;
}
h1 { margin-bottom: 15px; color: #004d40; }

/* --- Dashboard --- */
#dashboard {
    display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 20px;
    background-color: #FFFBEA; border: 2px solid #D1B894; border-radius: 16px;
    padding: 10px 20px; max-width: 800px; margin: 0 auto 30px auto;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}
#stats { display: flex; gap: 25px; }
#stats .stat { font-size: 16px; font-weight: 600; }
#store { display: flex; align-items: center; gap: 10px; }
#crop-store-buttons { display: flex; gap: 8px; }
#store button {
    padding: 10px 15px; font-size: 14px; font-weight: 600; cursor: pointer; border: 1px solid rgba(0,0,0,0.1);
    border-radius: 10px; color: #333; transition: all 0.2s;
}
#store button:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
#store button:active { transform: translateY(0); }
#store button.selected { box-shadow: 0 0 0 3px #FBC02D; border-color: #FBC02D; }
#store button:disabled { background-color: #E0E0E0; cursor: not-allowed; opacity: 0.7; transform: none; box-shadow: none; color: #9E9E9E; }
#buy-land-btn { background-color: #CFD8DC; }
#reset-btn { background-color: #EF5350; color: white; }
#crop-store-buttons button { background-color: #FFFFFF; }

/* --- Farm Land & Plots --- */
#farm-land { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 15px; justify-content: center; max-width: 800px; margin: 0 auto; }
.farm-plot { border: 3px dashed #A1887F; border-radius: 16px; cursor: pointer; font-size: 50px; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; width: 110px; height: 110px; position: relative; overflow: hidden; background-color: #A1887F; }
.farm-plot.empty:hover { background-color: #BCAAA4; }
.farm-plot.planted { background-color: #6D4C41; cursor: not-allowed; }
.farm-plot.ready { background-color: #C8E6C9; animation: grow-pulse 1.5s infinite; }
.plot-timer { position: absolute; bottom: 0; left: 0; width: 0%; height: 10px; background-color: #66BB6A; transition: width 0.1s linear; }
.plot-crop { z-index: 2; }
@keyframes grow-pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }

/* --- NEW: Floating Harvest Text --- */
.harvest-float {
    position: absolute; color: #FFD700; font-size: 20px; font-weight: bold;
    z-index: 10; pointer-events: none; animation: float-up 1.5s ease-out forwards;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
@keyframes float-up { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-60px); opacity: 0; } }

/* --- Sun, Notifications & Animations --- */
#sun { position: fixed; top: 20px; left: 20px; font-size: 60px; animation: pulse-sun 5s infinite; }
@keyframes pulse-sun { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }
#notification-container { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 1000; display: flex; flex-direction: column; gap: 10px; }
.notification { padding: 12px 20px; border-radius: 8px; color: white; font-weight: bold; box-shadow: 0 4px 8px rgba(0,0,0,0.2); animation: slide-down 0.5s ease, fade-out 0.5s ease 3.5s forwards; }
.notification.error { background-color: #e53935; } .notification.success { background-color: #43a047; } .notification.info { background-color: #1e88e5; }
@keyframes slide-down { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
.ui-flash-green { animation: flash-green 0.5s ease-out; }
@keyframes flash-green { 0% { color: #2e7d32; transform: scale(1.2); } 100% { color: #333; transform: scale(1); } }