:root{
  --bg: #f6e7da;
  --ink: #2b2b2b;
  --accent: #e0c3a5;
  --grass: #c7e8b3;
  --soil: #7a563a;
  --soil-top: #8c6747;
  --flower: #f78fb3;
  --flower2: #ffd166;
  --ui: #ffeecf;
}
*{box-sizing:border-box}
.title{ margin:16px 0 0; text-shadow: 0 2px #fff }
.subtitle{ margin:0 0 8px; color:#6b5a4a }
#hud{ display:flex; gap:16px; margin: 4px 0 8px; }
.meter{ background: var(--ui); border:2px solid var(--ink); padding:4px 8px; box-shadow: 0 2px 0 var(--ink); }
.controls{ display:flex; gap:8px; margin: 8px 0; flex-wrap:wrap; justify-content:center; }

#field{
  width: 320px;
  height: 240px;
  border: 4px solid var(--ink);
  box-shadow: 0 4px 0 var(--ink);
  background:
    linear-gradient(#a7d08c, #a7d08c) 0 75%, 
    linear-gradient(#9bd384, #9bd384) 0 50%, 
    linear-gradient(#8fd07d, #8fd07d) 0 25%,
    var(--bg);
  position: relative;
  image-rendering: pixelated;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 6px;
  padding: 6px;
}

.plot{
  position: relative;
  background: var(--soil);
  border: 3px solid #3d2a1a;
  box-shadow: inset 0 4px 0 var(--soil-top);
  cursor: pointer;
}
.plot.selected{ outline: 3px dashed #000; outline-offset: -3px; }

.pixel-plant{
  position:absolute; left:50%; bottom:8px; transform:translateX(-50%);
  width: 16px; height: 16px;
}

.bar{
  position:absolute; left: 4px; top: 4px;
  height: 6px; width: calc(100% - 8px);
  background: #00000022; border:1px solid #000;
}
.bar .fill{ height: 100%; background: #7cd992; }

.token{
  position:absolute; right:6px; bottom:6px;
  background: var(--ui); border: 2px solid var(--ink); padding: 2px 4px;
}
.tip{ color:#6b5a4a; margin: 8px 0 0; }
.panel{ margin: 8px 0; }
.credits{ margin: 8px 0 16px; color:#6b5a4a; }
@media (min-width: 420px){
  #field{ width: 384px; height: 288px; }
}