/* =================================================================
   Vibha — Cloud Desktop  ·  Garden playground styles
   ================================================================= */
.win-content.garden-content { padding: 0; overflow: hidden; }
.window--garden { width: 860px; }

.garden { display: flex; flex-direction: column; height: min(620px, calc(100vh - 130px)); }

.garden-tools {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 18px;
  background: linear-gradient(180deg, #FBF8F2, #F1ECE2);
  border-bottom: 1px solid var(--border-warm);
  flex: none; flex-wrap: wrap;
}
.gt-title { font-family: var(--font-script); font-size: 22px; font-weight: 600; color: var(--ink-blue); }
.gt-tools, .gt-colors { display: flex; gap: 7px; }
.gt-tool {
  width: 38px; height: 38px; font-size: 19px;
  background: #fff; border: 1px solid var(--border-warm); border-radius: 9px;
  cursor: pointer; transition: all 160ms var(--ease);
}
.gt-tool:hover { transform: translateY(-2px); }
.gt-tool.on { border-color: var(--ink-blue); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ink-blue) 22%, transparent); background: #FFFDF8; }
.gt-color { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.12); cursor: pointer; padding: 0; }
.gt-color.on { box-shadow: 0 0 0 2px var(--ink-blue); transform: scale(1.12); }
.gt-clear {
  margin-left: auto; background: transparent; border: 1px solid var(--border-warm);
  border-radius: 8px; padding: 8px 14px; font-family: var(--font-ui); font-size: 13px; font-weight: 600;
  color: var(--ink); cursor: pointer;
}
.gt-clear:hover { background: rgba(0,0,0,0.05); }

.garden-stage {
  position: relative; flex: 1; overflow: hidden; cursor: crosshair;
  background: linear-gradient(180deg, #BFE0F2 0%, #DCEFF6 42%, #EAF4E4 60%, #CDE7B8 100%);
  touch-action: none;
}
.garden-sun {
  position: absolute; top: 30px; right: 64px; width: 70px; height: 70px; border-radius: 50%;
  background: radial-gradient(circle, #FFE89A, #FBD24E 60%, rgba(251,210,78,0) 72%);
  box-shadow: 0 0 50px rgba(251,210,78,0.55);
}
.garden-hill { position: absolute; left: -5%; right: -5%; border-radius: 50% 50% 0 0; }
.garden-hill.h3 { bottom: 0; height: 34%; background: #B6D98F; }
.garden-hill.h2 { bottom: 0; height: 24%; background: #9FCE76; }
.garden-hill.h1 { bottom: 0; height: 14%; background: #86BE5C; }
.garden-hint {
  position: absolute; left: 50%; top: 16px; transform: translateX(-50%);
  font-family: var(--font-script); font-size: 19px; color: var(--ink-blue);
  opacity: 0.8; pointer-events: none; transition: opacity 400ms; z-index: 5;
}

.g-item { position: absolute; transform: translate(-50%, -90%) rotate(var(--rot, 0deg)); pointer-events: none; }
.g-flower { animation: g-grow 360ms var(--ease) both; }
@keyframes g-grow { from { transform: translate(-50%, -90%) scale(0.2); } to { transform: translate(-50%, -90%) rotate(var(--rot)) scale(1); } }
.g-bird { transform: translate(-50%, -80%); animation: g-pop 320ms var(--ease) both; }
@keyframes g-pop { from { transform: translate(-50%, -70%) scale(0.5); } to { transform: translate(-50%, -80%) scale(1); } }
.g-leaf { transform: translate(-50%, -50%) rotate(var(--rot)); }
.g-butterfly {
  transform: translate(-50%, -50%);
  animation: g-flutter 6s ease-in-out infinite alternate;
}
@keyframes g-flutter {
  0% { transform: translate(-50%, -50%); }
  100% { transform: translate(calc(-50% + var(--fx, 20px)), calc(-50% + var(--fy, -16px))) rotate(6deg); }
}
.g-butterfly .bw { transform-origin: 50% 50%; animation: g-wing 0.32s ease-in-out infinite alternate; }
.g-butterfly .bw-l { transform-origin: 52% 50%; }
.g-butterfly .bw-r { transform-origin: 48% 50%; }
@keyframes g-wing { from { transform: scaleX(1); } to { transform: scaleX(0.42); } }