```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>🎉 くじ引きアプリ 🎲</title>
    <style>
        /* Bounce animation for emojis */
        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
            40% { transform: translateY(-30px); }
            60% { transform: translateY(-15px); }
        }
        /* Sparkle animation for background */
        @keyframes sparkle {
            0%, 100% { background-color: #ffefd5; }
            50% { background-color: #ffe4e1; }
        }
        /* Shake animation on button click */
        @keyframes shake {
            0% { transform: translate(1px, 1px) rotate(0deg); }
            10% { transform: translate(-1px, -2px) rotate(-1deg); }
            20% { transform: translate(-3px, 0px) rotate(1deg); }
            30% { transform: translate(3px, 2px) rotate(0deg); }
            40% { transform: translate(1px, -1px) rotate(1deg); }
            50% { transform: translate(-1px, 2px) rotate(-1deg); }
            60% { transform: translate(-3px, 1px) rotate(0deg); }
            70% { transform: translate(3px, 1px) rotate(-1deg); }
            80% { transform: translate(-1px, -1px) rotate(1deg); }
            90% { transform: translate(1px, 2px) rotate(0deg); }
            100% { transform: translate(1px, -2px) rotate(-1deg); }
        }
        .bouncing {
            animation: bounce 2s infinite;
        }
        .sparkling {
            animation: sparkle 10s infinite;
        }
        .shaking {
            animation: shake 0.5s;
        }
        /* Flashing emojis on click */
        @keyframes flash {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }
        .flashing {
            animation: flash 1s infinite;
        }
    </style>
</head>
<body>
    <div style="width: 400px; height: 400px; margin: auto; text-align: center; position: relative; border: 2px solid #FFD700; border-radius: 20px; box-shadow: 0 0 20px rgba(255, 215, 0, 0.5);" class="sparkling">
        <div style="font-size: 40px; margin-top: 20px;" class="bouncing">🍀🎊✨🎉🍀</div>
        <div id="numberDisplay" style="font-size: 60px; margin: 40px 0; color: #FF4500;">🎲</div>
        <input type="button" value="くじを引く 🎁" onclick="drawLottery()" style="font-size: 24px; padding: 10px 20px; border: none; border-radius: 10px; background-color: #32CD32; color: white; cursor: pointer;" id="drawButton">
        <div id="emojiReaction" style="font-size: 40px; margin-top: 20px;"></div>
    </div>
    <script>
        function drawLottery() {
            const button = document.getElementById('drawButton');
            const numberDisplay = document.getElementById('numberDisplay');
            const reaction = document.getElementById('emojiReaction');
            
            // Add shaking animation to button
            button.classList.add('shaking');
            // Clear previous reaction
            reaction.textContent = "";
            // Show loading emoji
            numberDisplay.textContent = "⏳";
            
            setTimeout(() => {
                // Remove shaking animation
                button.classList.remove('shaking');
                // Generate random number
                const randomNumber = Math.floor(Math.random() * 1850) + 1;
                // Display the number with celebration emojis
                numberDisplay.textContent = randomNumber;
                reaction.textContent = "🎉🎉🎉 おめでとう！ 🎉🎉🎉";
            }, 3000);
        }
    </script>
</body>
</html>
```