```html
<!DOCTYPE html>
<html>
<head>
    <style>
        @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); }
        }
        @keyframes popIn {
            0% { opacity: 0; transform: scale(0.5); }
            100% { opacity: 1; transform: scale(1); }
        }
        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
            40% { transform: translateY(-20px); }
            60% { transform: translateY(-10px); }
        }
    </style>
</head>
<body>
    <div style="width:400px; height:400px; border:2px solid #000; background-color:#ffeb3b; display:flex; flex-direction:column; align-items:center; justify-content:center; position:relative; overflow:hidden;">
        <div style="position:absolute; top:10px; left:10px;">🎉🎈✨😄🎊</div>
        <button id="actionBtn" style="background-color:#000; color:#ff0; border:none; padding:15px 30px; font-size:18px; cursor:pointer; border-radius:10px; box-shadow: 0 5px 15px rgba(0,0,0,0.3);">
            🚀 Go! 🚀
        </button>
        <div id="result" style="margin-top:20px; font-size:20px; text-align:center; opacity:0;"></div>
        <div style="position:absolute; bottom:10px; right:10px;">🎶🎵🥳💥🔥</div>
    </div>
    <script>
        const cities = ["バリ", "ハワイ", "北極", "ローマ", "アステカ"];
        const btn = document.getElementById('actionBtn');
        const result = document.getElementById('result');

        btn.addEventListener('click', () => {
            // Button Animation
            btn.style.animation = 'shake 0.5s';
            setTimeout(() => {
                btn.style.animation = '';
            }, 500);

            // Generate Random City
            const city = cities[Math.floor(Math.random() * cities.length)];

            // Generate Random Distance
            const distance = Math.floor(Math.random() * (100000000 - 1000000 + 1)) + 1000000;
            const formattedDistance = distance.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');

            // Set Result with Emojis
            result.innerHTML = `🌍 ${city} 🌍<br>🍋レモン${formattedDistance}個分🍋`;

            // Show Result with Animation
            result.style.animation = 'popIn 0.5s forwards';
        });
    </script>
</body>
</html>
```