html, body{
  margin:0; padding:0; width:100%; height:100%; overflow:hidden;
  font-family:system-ui,sans-serif; background:#2f6b2f;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

#field{
  position:fixed; inset:0; overflow:hidden; touch-action:none;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.08), transparent 60%),
    linear-gradient(160deg, #6fae52 0%, #4a8a3a 55%, #2f6b2f 100%);
}
#field::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 60%),
    radial-gradient(circle, rgba(0,0,0,0.06) 0%, transparent 55%);
  background-size: 360px 360px, 300px 300px;
  background-position: 15% 20%, 70% 65%;
}

#scene{ position:absolute; inset:0; }

/* ---------- Tree (top-down, layered canopy) ---------- */
.tree{
  position:absolute; width:76px; height:76px; transform:translate(-50%,-58%);
}
.tree .t-shadow{
  position:absolute; left:50%; top:64%; width:82%; height:34%;
  background:rgba(0,0,0,0.25); border-radius:50%; filter:blur(2px);
  transform:translate(-50%,-50%);
}
.tree .t-svg{
  position:absolute; left:50%; top:50%; width:100%; height:100%;
  transform:translate(-50%,-50%);
  filter: grayscale(var(--char, 0)) brightness(calc(1 - var(--char, 0) * 0.58)) sepia(calc(var(--char, 0) * 0.22));
  transition: filter var(--ash-transition, 0s) ease;
}