/* Garden-specific styles */

.garden-background {
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}

.grass {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to bottom, #7dd3c0 0%, #5ebd9e 100%);
  border-top: 3px solid #4a9d7f;
}

.sky {
  background: linear-gradient(to bottom, #87ceeb 0%, #e0f6ff 100%);
}

/* Flower types for garden display */
.flower {
  display: inline-block;
  position: relative;
  animation: grow-in 0.6s ease-out;
}

.flower-red {
  color: #ef4444;
}

.flower-pink {
  color: #ec4899;
}

.flower-yellow {
  color: #fbbf24;
}

.flower-purple {
  color: #a855f7;
}

.flower-blue {
  color: #3b82f6;
}

.flower-orange {
  color: #f97316;
}

/* Butterfly decorations */
.butterfly {
  display: inline-block;
  animation: flutter 3s ease-in-out infinite;
}

/* Tree styles */
.tree {
  display: inline-block;
  position: relative;
}

/* Garden grid for organized display */
.garden-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  gap: 15px;
  padding: 20px;
}

.garden-slot {
  min-height: 60px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  position: relative;
}

.garden-slot.empty {
  opacity: 0.3;
  border: 2px dashed rgb(0, 0, 0, 0.1);
  border-radius: 10px;
}

/* Sparkle effect */
.sparkle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: white;
  border-radius: 50%;
  box-shadow:
    0 0 10px #fff,
    0 0 20px #fff;
  animation: sparkle-fade 1s ease-out forwards;
}