:root {
  --bg: #f5f1e6;
  --bg-accent: #e9e3d3;
  --trunk: #8b5a2b;
  --leaf-green: #6aa56a;
  --leaf-green-light: #88c07a;
  --leaf-green-soft: #cbe5b4;
  --accent: #ffcf6e;
  --danger: #d9534f;
  --text: #4b463f;
  --panel-bg: rgba(255,255,255,0.55);
  --panel-border: rgba(0,0,0,0.08);
  --radius: 18px;
  --transition: 0.35s cubic-bezier(.4,.0,.2,1);
  font-family: "LXGW WenKai","HarmonyOS Sans","PingFang SC","Microsoft YaHei",sans-serif;
}

* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

body,html {
  margin:0;
  width:100%;
  height:100%;
  background: linear-gradient(#f7f3e9,#efe9dc 60%, #e4dfd2);
  color: var(--text);
  overflow:hidden;
}

#app {
  width:100%;
  height:100%;
  position:relative;
}

.screen {
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:2rem;
  opacity:0;
  pointer-events:none;
  transition: var(--transition);
}

.screen.visible {
  opacity:1;
  pointer-events:auto;
}

.title {
  font-size: clamp(2.2rem,5vw,3.3rem);
  letter-spacing: .05em;
  margin:0 0 0.6rem;
  background: linear-gradient(120deg,#7c5a31,#ad8352);
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.15));
}

.subtitle {
  font-size:1.1rem;
  max-width:540px;
  text-align:center;
  line-height:1.55;
  margin:0 0 1.4rem;
}

.btn-group {
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  margin-bottom:1rem;
}

button {
  font:inherit;
  cursor:pointer;
  padding:.9rem 1.6rem;
  border:none;
  border-radius: var(--radius);
  background: linear-gradient(160deg,#ffdb93,#ffc663);
  color:#5a431f;
  font-weight:600;
  letter-spacing:.05em;
  box-shadow:0 4px 12px -4px rgba(0,0,0,0.25),0 2px 4px rgba(0,0,0,0.12);
  position:relative;
  overflow:hidden;
  transition: var(--transition);
}

button.secondary {
  background: linear-gradient(160deg,#d9e7d0,#b9d7b1);
  color:#3b573b;
}

button:before {
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 30% 20%,rgba(255,255,255,0.7),transparent 60%);
  opacity:0;
  transition: var(--transition);
}

button:hover:before {
  opacity:1;
}

button:hover {
  transform: translateY(-4px);
  box-shadow:0 6px 18px -4px rgba(0,0,0,0.3),0 3px 6px rgba(0,0,0,0.18);
}

button:active {
  transform: translateY(0);
  box-shadow:0 3px 8px -2px rgba(0,0,0,0.4);
}

.hint {
  font-size:.8rem;
  opacity:.7;
}

#grow-screen {
  background:
    radial-gradient(circle at 70% 20%,rgba(255,255,255,0.7),transparent 60%),
    linear-gradient(#f7f3e9,#ece4d7 60%,#e3ddd1);
}

#tree-canvas {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}

#toast {
  position:absolute;
  bottom:2.2rem;
  left:50%;
  transform:translateX(-50%) translateY(40px);
  background:rgba(255,255,255,0.85);
  backdrop-filter: blur(10px);
  padding:.9rem 1.3rem;
  border-radius: 14px;
  font-size:.85rem;
  color:#4b463f;
  box-shadow:0 8px 24px -6px rgba(0,0,0,0.25);
  opacity:0;
  transition:.5s cubic-bezier(.4,0,.2,1);
  max-width:320px;
  text-align:center;
}

#toast.show {
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

.hidden { display:none; }