body{font-family:Arial, sans-serif;background:#efe9d6;margin:0;padding:12px}
#topbar{display:flex;align-items:center;gap:12px;margin-bottom:8px}
#sun{font-weight:700;padding:6px 10px;background:#fff3a7;border-radius:6px;border:1px solid #e6d07a}
#plant-slot-bar{display:flex;gap:6px;padding:4px 6px;background:#d2e6ff;border-radius:6px;border:1px solid #9bb7e0}
.plant-card{width:64px;height:84px;background:#f5f5f5;border-radius:6px;border:2px solid #5f8ac6;position:relative;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:12px;color:#222;box-shadow:0 1px 2px rgba(0,0,0,0.2)}
.plant-card.selected{border-color:#ffcc00;box-shadow:0 0 0 2px rgba(255,204,0,0.6)}
.plant-card-icon{display:block;width:32px;height:32px;object-fit:contain;margin:2px auto 0}
.plant-card .name{font-weight:bold;margin-bottom:2px}
.plant-card .cost{font-size:11px;color:#555}
.plant-card .cooldown-mask{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,0.4);height:0}
.plant-card .cooldown-text{position:absolute;bottom:2px;right:4px;font-size:10px;color:#fff;text-shadow:0 0 2px #000}
#controls button{margin-right:6px;padding:6px 10px}
#game{display:block;background:#8fc1ff;border:4px solid #3a6ea5;border-radius:6px}
#help{margin-top:8px;color:#333}

.grid-cell{box-sizing:border-box}