.garden-area {
    flex: 1;
    position: relative;
    overflow: hidden;
    cursor: crosshair;
}

.instruction {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
    transition: opacity 0.5s;
    z-index: 5;
}

.instruction i {
    font-size: 3rem;
    color: var(--primary);
    margin-bottom: 20px;
    animation: bounce 2s infinite;
}

.instruction.hidden {
    opacity: 0;
}

.rose {
    position: absolute;
    width: 60px;
    height: 60px;
    transform: translate(-50%, -50%) scale(0);
    animation: bloom 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    pointer-events: none;
}

.rose::before {
    content: '🌹';
    font-size: 3rem;
    filter: drop-shadow(0 0 10px var(--primary));
    transform: rotate(var(--rot));
    display: block;
}

@keyframes bloom {
    to {
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-20px);
    }

    60% {
        transform: translateY(-10px);
    }
}