:root { --fg:#e8f0ff; --fg-dim:#a9b7d9; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: radial-gradient(1200px 800px at 70% 10%, #0d1220, #070b14 60%, #050810 100%);
  overflow: hidden;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  color: var(--fg);
}

/* Canvas */
#grove { width: 100vw; height: 100vh; display: block; }

/* HUD */
.hud {
  position: fixed;
  left: 16px; top: 16px;
  background: rgba(8,12,22,0.55);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 8px 30px rgba(0,0,0,0.35);
  backdrop-filter: blur(4px);
  border-radius: 14px;
  padding: 10px 12px;
  min-width: 200px;
  z-index: 10;
}
.hud .row { display:flex; align-items:baseline; justify-content:space-between; margin: 2px 0; }
.hud .label { font-weight:600; letter-spacing:.2px; color:var(--fg-dim); }
.hud .value { font-variant-numeric: tabular-nums; font-weight:700; letter-spacing:.3px; }
.hud .small { font-size: 12px; color: var(--fg-dim); justify-content:flex-start; gap:8px; margin-top:6px; }

/* Buttons (top-right) */
.btn-stack{
  position: fixed;
  top: 16px; right: 16px;
  display: flex; flex-direction: column; gap: 8px;
  z-index: 11;
}
.btn {
  background: rgba(8,12,22,0.55);
  color: var(--fg);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 8px 10px;
  cursor: pointer;
  font-weight: 600;
  letter-spacing: .2px;
  backdrop-filter: blur(4px);
  text-decoration: none;
  text-align: center;
}
.btn.small { font-size: 12px; padding: 6px 8px; }
.btn:hover { background: rgba(14,20,34,0.7); }

/* Shop (bottom-right) */
.shop {
  position: fixed;
  bottom: 16px; right: 16px;
  background: rgba(12,18,28,0.7);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 8px;
  font-size: 13px;
  color: #fff;
  width: 200px;
  z-index: 10;
}
.shop h4{
  margin: 0 0 6px;
  font-size: 13px;
  color: #dbeafe;
  letter-spacing: .2px;
}
.shop-item {
  padding: 6px;
  margin: 4px 0;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  cursor: pointer;
  display:flex; flex-direction:column; gap:2px;
}
.shop-item:hover { background: rgba(255,255,255,0.14); }
.shop-item .line{ display:flex; justify-content:space-between; gap:8px; }
.shop-item .muted{ color:#a9b7d9; font-size:12px; }
.shop .tip { margin-top:6px; font-size:11px; color:#a9b7d9; }