@import url('https://fonts.googleapis.com/css2?family=Chiron+GoRound+TC:wght@200..900&display=swap');

:root {
    --main-font: "Chiron GoRound TC", sans-serif;
    --weight: auto;
    --style: normal;
    --optical-sizing: auto;
    
}
body {
            background: linear-gradient(135deg, #74eb9a 0%, #f3ee8c 100%);
            background-attachment: fixed;
            min-height: 100vh;
            margin: 0;
            text-align: center;
            font-weight: var(--weight);
            font-style: var(--style);
            font-size: var(--optical-sizing);
            font-family: var(--main-font);
        }
        .flower {
            position: relative; 
            width: 150px; 
            height: 150px; 
            margin: 1rem auto;
            transform-origin: center center; /* scale from center */
            transition: transform 300ms ease; /* smooth growth */
        }
        .petal {
            width: 29px; 
            height: 29px; 
            border-radius: 50%;
            position: absolute; 

            top: 45%;
            left: 50%;

            transform-origin: 0 -1px;
        }
        .p1 {
           transform : rotate(0deg);
           background: radial-gradient(circle at 20% 20%, #ff9da5, #ff5a7e);
        }
        .p2 {
            transform : rotate(60deg);
            background: radial-gradient(circle at 20% 20%, #ff9da5, #ff5a7e);
        }
        .p3 {
            transform: rotate(120deg);
            background: radial-gradient(circle at 20% 20%, #ff9da5, #ff5a7e);
        }
        .p4 {
            transform: rotate(180deg);
            background: radial-gradient(circle at 20% 20%, #ff9da5, #ff5a7e);
        }
        .p5 {
            transform: rotate(240deg);
            background: radial-gradient(circle at 20% 20%, #ff9da5, #ff5a7e);
        }
        .p6 {
            transform: rotate(300deg);
            background: radial-gradient(circle at 20% 20%, #ff9da5, #ff5a7e);
        }
        .center{ 
            width: 33px; 
            height: 33px; 
           
            background: radial-gradient(circle at center, gold 60%, orange 100%, transparent 110%);
            border-radius: 50%;
            position: absolute;
            filter: blur(1px); 

            top: 33%;
            left: 39%;
        }
        .stem {
            width: 10px; 
            height: 50px; 
            background: linear-gradient(to top, #6bbf59, #2f7a32);
            position: absolute;
            border-radius: 20%;

            top: 75px; 
            left: 47%;
        }

        h1 {
            color: darkgreen;
            margin-top: 50px; 
        }
        button {
    display: inline-flex;
    align-items: center;
    font-family: 'Outfit', sans-serif;
    margin:20px auto 15px;
    background: #f8fafc;
    padding: 20px;
    border-radius: 18px;
    cursor: pointer;
    border: 3px solid #e2e8f0;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bouncy feel */
}


button:hover {
    border-color: #f6ad55; /* Golden Yellow */
    background: #fffaf0;
    transform: scale(1.05) rotate(1deg); /* Playful tilt */
}

#generate-btn {
    background: #48bb78;
    color: white;
    border: none;
    border-radius: 15px;
    padding: 15px 30px;
    font-size: 1.5rem;
    transition: background 0.3s ease, transform 0.2s ease;
}

#generate-btn:hover {
    background: #38a169;
    transform: scale(1.05);
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

        .setup-btn {
            position: absolute;
            top: 5.25rem;
            right: 3.5rem;
            background: #48bb78;
            color: white;
            text-decoration: none;
            border-radius: 15px;
            padding: 10px 20px;
            font-size: 1.5rem;
            cursor: pointer;
            transition: background 0.3s ease;
        }

        .setup-btn:hover {
            background: #38a169;
        }

        #loading-indicator {
            display: none;
            text-align: center;
            margin-top: 15px;
            color: #4a5568;
            font-weight: bold;
        }
        .spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #48bb78;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            animation: spin 1s linear infinite;
            margin: 0 auto 10px auto;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }