/* ══════════════════════════════════════════════════════════════
   PURCHASED ITEMS - Overlays on garden
   ══════════════════════════════════════════════════════════════ */

.purchased-items {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}

/* Growth boost indicator - shows near the sunflower */
.growth-boost {
    position: absolute;
    top: 25%;
    left: 45%;
    background: linear-gradient(135deg, #4CAF50, #8BC34A);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    animation: boost-pulse 2s ease-in-out infinite;
}

@keyframes boost-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

/* Planted flowers - positioned in the garden bed */
.planted-flower {
    position: absolute;
    font-size: 24px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
    animation: flower-sway 3s ease-in-out infinite;
}

.flower-1 { bottom: 28%; left: 25%; animation-delay: 0s; }
.flower-2 { bottom: 26%; left: 35%; animation-delay: 0.5s; }
.flower-3 { bottom: 30%; left: 45%; animation-delay: 1s; }
.flower-4 { bottom: 27%; left: 55%; animation-delay: 1.5s; }
.flower-5 { bottom: 29%; left: 65%; animation-delay: 2s; }
.flower-6 { bottom: 25%; left: 75%; animation-delay: 0.3s; }
.flower-7 { bottom: 31%; left: 30%; animation-delay: 0.8s; }
.flower-8 { bottom: 28%; left: 60%; animation-delay: 1.3s; }

@keyframes flower-sway {
    0%, 100% { transform: rotate(-2deg); }
    50% { transform: rotate(2deg); }
}

/* Garden lantern */
.garden-lantern-item {
    position: absolute;
    bottom: 18%;
    left: 8%;
    font-size: 32px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
    transition: filter 0.5s ease;
}

.garden-lantern-item.glowing {
    filter: drop-shadow(0 0 15px rgba(255, 200, 100, 0.8))
            drop-shadow(0 0 30px rgba(255, 150, 50, 0.5));
    animation: lantern-flicker 2s ease-in-out infinite;
}

@keyframes lantern-flicker {
    0%, 100% { filter: drop-shadow(0 0 15px rgba(255, 200, 100, 0.8)) drop-shadow(0 0 30px rgba(255, 150, 50, 0.5)); }
    50% { filter: drop-shadow(0 0 20px rgba(255, 200, 100, 0.9)) drop-shadow(0 0 40px rgba(255, 150, 50, 0.6)); }
}