body, html { margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; font-family: sans-serif; user-select: none; }
#gameCanvas { display: block; width: 100%; height: 100%; z-index: 1; position: absolute; }
#sky-overlay { position: absolute; width: 100%; height: 100%; z-index: 0; transition: background-color 1s linear; }

/* Panels */
#roster-panel { position: absolute; left: 10px; top: 10px; width: 150px; max-height: 80vh; background: rgba(255,255,255,0.8); padding: 10px; border-radius: 8px; overflow-y: auto; z-index: 10; }
#top-right-controls { position: absolute; right: 10px; top: 10px; background: rgba(255,255,255,0.8); padding: 10px; border-radius: 8px; z-index: 10; }
#bottom-left-controls { position: absolute; left: 10px; bottom: 10px; display: flex; gap: 10px; z-index: 10; }
#seed-bag, #feeder-item, #birdhouse-item { background: #d4a373; padding: 10px; border-radius: 8px; cursor: grab; text-align: center; font-weight: bold;}
#retire-nest { position: absolute; right: 20px; bottom: 20px; background: #8B4513; color: white; padding: 20px; border-radius: 50%; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; text-align: center; font-weight: bold; z-index: 10; border: 4px solid #5c2e0b; box-shadow: 0 4px 8px rgba(0,0,0,0.5); }
button { margin: 5px 0; width: 100%; padding: 5px; cursor: pointer;}

/* Modals */
.hidden { display: none !important; }
.modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 20px; border-radius: 10px; z-index: 20; box-shadow: 0 4px 10px rgba(0,0,0,0.5); width: 280px; }
#bird-fact { font-style: italic; font-size: 0.85em; color: #555; }
#chronology-list { max-height: 250px; overflow-y: auto; text-align: left; font-size: 0.85em; padding-left: 20px; color: #333; }

@media (max-width: 768px) { #bottom-left-controls { flex-direction: column; } }