:root {
    --pink: #ff4d79;
    --green: #159a44;
}

body, html {
    margin: 0; padding: 0;
    width: 100%; height: 100%;
    background: #0b1522;
    overflow: hidden;
}

.night {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at bottom, #1B2735 0%, #090A0F 100%);
    z-index: -1;
}

.flower-garden {
    position: absolute;
    width: 100%; height: 100%;
    bottom: 0;
}

.flower {
    position: absolute;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform-origin: bottom center;
    animation: sway 5s ease-in-out infinite;
}

/* Cánh hoa hồng */
.flower__leafs {
    position: relative;
    width: 2vmin; height: 2vmin;
    animation: bloom 2s ease-out forwards;
}

.flower__leaf {
    position: absolute;
    bottom: 0; left: 50%;
    width: 7vmin; height: 10vmin;
    background: linear-gradient(to top, var(--pink), #ffadad);
    border-radius: 50% 50% 20% 20%;
    transform-origin: bottom center;
}

.flower__leaf--1 { transform: translate(-50%) rotate(-30deg); }
.flower__leaf--2 { transform: translate(-50%) rotate(30deg); }
.flower__leaf--3 { transform: translate(-50%) rotate(-60deg); }
.flower__leaf--4 { transform: translate(-50%) rotate(60deg); }

/* Thân hoa */
.flower__line {
    width: 0.8vmin;
    background: linear-gradient(to top, #063d17, var(--green));
    border-radius: 10px;
    position: relative;
}

/* Lá trên thân */
.flower__grass {
    position: absolute;
    width: 2.5vmin; height: 7vmin;
    background: var(--green);
    border-radius: 100% 0% 100% 0%;
    bottom: 40%;
}
.flower__grass--1 { left: 100%; transform: rotate(40deg); }
.flower__grass--2 { right: 100%; transform: rotate(-40deg) scaleX(-1); }

/* Hiệu ứng phấn hoa lấp lánh */
.dot {
    position: absolute;
    width: 4px; height: 4px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 0 10px white;
    animation: fly 10s linear infinite;
    opacity: 0.5;
}

@keyframes bloom {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

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

@keyframes fly {
    0% { transform: translateY(0) translateX(0); opacity: 0; }
    50% { opacity: 0.8; }
    100% { transform: translateY(-100vh) translateX(50px); opacity: 0; }
}

/* Menu & Box */
.hidden { display: none; }
#message-box {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    background: rgba(255, 255, 255, 0.95); padding: 30px; border-radius: 20px;
    text-align: center; z-index: 1000; min-width: 250px;
    box-shadow: 0 0 20px rgba(255, 77, 121, 0.4);
}
.menu-container { position: fixed; bottom: 30px; right: 30px; z-index: 1000; }
.menu-options { display: flex; flex-direction: column; gap: 15px; margin-bottom: 15px; transition: 0.5s; opacity: 0; transform: scale(0); }
.menu-options.active { opacity: 1; transform: scale(1); }
.menu-option, .menu-trigger { width: 50px; height: 50px; background: rgba(255,255,255,0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; cursor: pointer; backdrop-filter: blur(5px); border: 1px solid rgba(255,255,255,0.2); }
.menu-trigger { background: var(--pink); border: none; }
/* Tìm đến đoạn .flower__leaf và sửa lại như sau */
.flower__leaf {
    position: absolute;
    bottom: 0; left: 50%;
    width: 7vmin; height: 10vmin;
    /* Sử dụng biến --flower-color, mặc định là hồng nếu không có màu */
    background: linear-gradient(to top, var(--flower-color, #ff4d79), #ffffffaa);
    border-radius: 50% 50% 20% 20%;
    transform-origin: bottom center;
    opacity: 0.9;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
}