.container {
        background: #ffffff;
        padding: 30px;
        border-radius: 15px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
        position: relative;
    }

    h2 {
        color: #d32f2f;
        margin-bottom: 25px;
    }

    .buttons {
        margin-top: 20px;
        display: flex;
        gap: 20px;
        justify-content: center;
        position: relative;
    }

    button {
        padding: 15px 30px;
        font-size: 1.2em;
        font-weight: bold;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.3s ease;
        white-space: nowrap;
    }

    #yesBtn {
        background-color: #4CAF50;
        color: white;
        position: relative;
    }

    #yesBtn:hover {
        background-color: #45a049;
        transform: scale(1.05);
    }

    #noBtn {
        background-color: #f44336;
        color: white;
        position: absolute; 
        /* yesBtn နားမှာရှိနေအောင် */
        left: calc(50% + 10px); 
        z-index: 5;
        /* ပြောင်းလဲမှု လှုပ်ရှားမှုကို ပိုမြန်အောင် */
        transition: transform 0.1s ease-out, opacity 0.3s ease; 
    }

    /* Emoji ပျံတက်တာအတွက် CSS */
    .flying-emoji {
        position: fixed;
        font-size: 3em;
        pointer-events: none;
        animation: slow-fly-up 6s linear infinite; /* ဖြေးဖြေးချင်း (6s) နဲ့ မရပ်မနား ပျံစေဖို့ */
        opacity: 0;
        z-index: 1000;
    }

    @keyframes slow-fly-up {
        0% {
            transform: translateY(0) rotate(0deg);
            opacity: 0.8;
        }
        100% {
            transform: translateY(-100vh) rotate(360deg);
            opacity: 0;
        }
    }
</style>

<div class="container">
    <h2>စာမေးပွဲ စာအဖြေတွေ ငါ့ကို **ပြမှာလား**၊ **မပြဘူးလား**? 🤔</h2>
    <div class="buttons">
        <button id="yesBtn">ပြပေးမယ်! (မိတ်ဆွေအရင်း)</button>
        <button id="noBtn">မပြဘူး!</button>
    </div>
    <p id="message" style="margin-top: 30px; font-size: 1.1em; color: #333;"></p>
</div>

<script>
    const yesBtn = document.getElementById('yesBtn');
    const noBtn = document.getElementById('noBtn');
    const messageDisplay = document.getElementById('message');
    const container = document.querySelector('.container');
    let noClickCount = 0; // နှိပ်တဲ့ အကြိမ်ရေ မှတ်ထားဖို့
    let buttonMovementActive = true; // ရွှေ့တာကို ထိန်းချုပ်ဖို့

    // "မပြဘူး" ခလုတ်ကို ထိမိတဲ့အခါ (Mobile မှာရော ကောင်းအောင်)
    noBtn.addEventListener('mouseover', moveButton);
    noBtn.addEventListener('touchstart', moveButton); // Mobile touch event

    // "မပြဘူး" ခလုတ်ကို နှိပ်တဲ့အခါ (အဓိက ရေတွက်မှု)
    noBtn.addEventListener('click', function(e) {
        e.preventDefault(); 
        if (!buttonMovementActive) return; // ပျောက်သွားရင် ဆက်မလုပ်တော့ဘူး

        noClickCount++;
        
        if (noClickCount >= 2) {
            // ၂ ကြိမ် နှိပ်ရင် ခလုတ်ကို ဖျောက်မယ်
            noBtn.style.opacity = '0';
            noBtn.style.pointerEvents = 'none'; // နှိပ်လို့မရတော့အောင်
            buttonMovementActive = false; // ရွှေ့တာကို ရပ်မယ်
            messageDisplay.textContent = "ကဲ.. မင်းရှောင်ပြေးစရာ မရှိတော့ဘူး။ ပြပေးရမယ့်အလှည့်ရောက်ပြီ! 😂";
            messageDisplay.style.color = '#ff0000';
        } else {
            // ရွှေ့တဲ့ function ကို ခေါ်မယ်
            moveButton(); 
            messageDisplay.textContent = `အဲ့လိုလုပ်လို့မရဘူးလေ! ပြမယ်ဆိုတာပဲ နှိပ်ပါ! (${noClickCount}/2) 😉`;
            messageDisplay.style.color = '#ff9800';
        }
    });

    // ခလုတ် ရွှေ့တဲ့ Logic
    function moveButton() {
        if (!buttonMovementActive) return;

        const containerRect = container.getBoundingClientRect();
        const btnRect = noBtn.getBoundingClientRect();
        
        // X ဝင်ရိုးပေါ် ရွှေ့ဖို့ (Container အလယ်ဗဟိုကို 0 အဖြစ်ယူဆ)
        const padding = 10;
        const minX = -containerRect.width / 2 + btnRect.width / 2 + padding;
        const maxX = containerRect.width / 2 - btnRect.width / 2 - padding;
        const newX = Math.random() * (maxX - minX) + minX;

        // Y ဝင်ရိုးပေါ် ရွှေ့ဖို့
        const minY = -containerRect.height / 2 + btnRect.height / 2 + padding;
        const maxY = containerRect.height / 2 - btnRect.height / 2 - padding;
        const newY = Math.random() * (maxY - minY) + minY;

        noBtn.style.transform = `translate(${newX}px, ${newY}px)`;
    }

    // "ပြပေးမယ်" ကို နှိပ်ရင်
    yesBtn.addEventListener('click', function() {
        messageDisplay.innerHTML = "ကျေးဇူးပါကွာ! အဲ့လိုမှပေါ့! 😈😈😈";
        messageDisplay.style.color = '#4CAF50';
        noBtn.style.display = 'none'; 
        yesBtn.disabled = true; 
        createFlyingEmojis();
    });

    // Emoji တွေ ပျံတက်အောင် လုပ်တဲ့ function
    function createFlyingEmojis() {
        const emojiToFly = '🖕'; // တောင်းဆိုထားတဲ့အတိုင်း 🖕 တစ်ခုတည်း
        
        // မရပ်မနား Emoji တွေ ဖန်တီးဖို့
        setInterval(() => {
            const emoji = document.createElement('div');
            emoji.classList.add('flying-emoji');
            
            emoji.innerHTML = emojiToFly;

            // စတင်နေရာကို Screen အောက်ခြေနားမှာ ကျပန်းနေရာ ပေးမယ်
            emoji.style.left = `${Math.random() * 100}vw`; 
            emoji.style.bottom = `-50px`; 
            
            // ကျပန်း animation delay ပေးမယ်
            emoji.style.animationDelay = `${Math.random() * 2}s`;
            emoji.style.animationDuration = `6s`; // ဖြည်းဖြည်းချင်း ၆ စက္ကန့်

            document.body.appendChild(emoji);

            // 6 စက္ကန့်ကြာရင် ဖျက်ပစ်မယ်
            setTimeout(() => {
                emoji.remove();
            }, 6000);

        }, 200); // 0.2 စက္ကန့်တိုင်း အသစ်တွေ ထပ်ဖန်တီးမယ်
    }
</script>