```html
<!DOCTYPE html>
<html>
<head>
    <style>
        @keyframes bounce {
            0% { transform: scale(1); }
            50% { transform: scale(1.2); }
            100% { transform: scale(1); }
        }
        @keyframes sparkle {
            0% { opacity: 0; transform: translateY(0) rotate(0deg); }
            50% { opacity: 1; transform: translateY(-20px) rotate(360deg); }
            100% { opacity: 0; transform: translateY(-40px) rotate(720deg); }
        }
    </style>
</head>
<body>
    <div style="width: 400px; height: 400px; margin: auto; padding: 10px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: space-between; background-color: #f0f8ff; border: 2px solid #add8e6; border-radius: 10px; position: relative;">
        <div style="width: 100%; text-align: center; font-size: 24px; margin-bottom: 10px;">
            🎉 gen Das 🎉
        </div>
        <div style="width: 100%; text-align: center; font-size: 14px; margin-bottom: 10px;">
            ⭐️ 評価★4.5 ⭐️ 総使用人数:約36万人 🚀 使用人数増加中 📉 評価激減中
        </div>
        <div style="width: 100%; height: 60px; background-color: #fff; border: 2px solid #000; border-radius: 5px; display: flex; align-items: center; justify-content: flex-end; padding: 10px; font-size: 32px;">
            0️⃣
        </div>
        <div style="width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px;">
            <button style="font-size: 24px; padding: 10px; border: none; border-radius: 5px; background-color: #ffebcd;" onclick="animateClick(this)">7️⃣</button>
            <button style="font-size: 24px; padding: 10px; border: none; border-radius: 5px; background-color: #ffebcd;" onclick="animateClick(this)">8️⃣</button>
            <button style="font-size: 24px; padding: 10px; border: none; border-radius: 5px; background-color: #ffebcd;" onclick="animateClick(this)">9️⃣</button>
            <button style="font-size: 24px; padding: 10px; border: none; border-radius: 5px; background-color: #ffd700;" onclick="animateClick(this)">➕</button>
            
            <button style="font-size: 24px; padding: 10px; border: none; border-radius: 5px; background-color: #ffebcd;" onclick="animateClick(this)">4️⃣</button>
            <button style="font-size: 24px; padding: 10px; border: none; border-radius: 5px; background-color: #ffebcd;" onclick="animateClick(this)">5️⃣</button>
            <button style="font-size: 24px; padding: 10px; border: none; border-radius: 5px; background-color: #ffebcd;" onclick="animateClick(this)">6️⃣</button>
            <button style="font-size: 24px; padding: 10px; border: none; border-radius: 5px; background-color: #ff4500;" onclick="animateClick(this)">➖</button>
            
            <button style="font-size: 24px; padding: 10px; border: none; border-radius: 5px; background-color: #ffebcd;" onclick="animateClick(this)">1️⃣</button>
            <button style="font-size: 24px; padding: 10px; border: none; border-radius: 5px; background-color: #ffebcd;" onclick="animateClick(this)">2️⃣</button>
            <button style="font-size: 24px; padding: 10px; border: none; border-radius: 5px; background-color: #ffebcd;" onclick="animateClick(this)">3️⃣</button>
            <button style="font-size: 24px; padding: 10px; border: none; border-radius: 5px; background-color: #32cd32;" onclick="calculate()">=️⃣</button>
            
            <button style="font-size: 24px; padding: 10px; border: none; border-radius: 5px; background-color: #add8e6;" onclick="animateClick(this)">0️⃣</button>
            <button style="font-size: 20px; padding: 10px; border: none; border-radius: 5px; background-color: #dda0dd;" onclick="animateClick(this)">🔄</button>
            <button style="font-size: 18px; padding: 10px; border: none; border-radius: 5px; background-color: #ff69b4;" onclick="animateClick(this)">⭐️評価0にする</button>
            <button style="font-size: 24px; padding: 10px; border: none; border-radius: 5px; background-color: #dc143c;" onclick="animateClick(this)">❌</button>
        </div>
        <div style="width: 100%; text-align: center; font-size: 12px; margin-top: 10px;">
            📢 コメント: <span style="color: red;">無能電卓ですwww</span>
        </div>
        <canvas id="animationCanvas" width="400" height="400" style="position: absolute; top: 0; left: 0; pointer-events: none;"></canvas>
    </div>
    <script>
        function animateClick(button) {
            button.style.animation = 'bounce 0.3s';
            button.addEventListener('animationend', () => {
                button.style.animation = '';
            });
            showSparkle(event.clientX, event.clientY);
        }

        function calculate() {
            const display = document.querySelector('div[style*="height: 60px"]');
            display.textContent = '0️⃣';
            animateClick(document.querySelector('button[onclick="calculate()"]'));
        }

        function showSparkle(x, y) {
            const canvas = document.getElementById('animationCanvas');
            const ctx = canvas.getContext('2d');
            const sparkle = {
                x: Math.random() * canvas.width,
                y: Math.random() * canvas.height,
                opacity: 1,
                size: Math.random() * 10 + 10,
                speed: Math.random() * 2 + 1
            };
            function draw() {
                if (sparkle.opacity <= 0) return;
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                ctx.globalAlpha = sparkle.opacity;
                ctx.font = sparkle.size + 'px serif';
                ctx.fillText('✨', sparkle.x, sparkle.y);
                ctx.globalAlpha = 1;
                sparkle.y -= sparkle.speed;
                sparkle.opacity -= 0.02;
                requestAnimationFrame(draw);
            }
            draw();
        }

        // Override the rating button functionality
        document.querySelector('button[onclick="animateClick(this)"]:nth-child(3)').addEventListener('click', function() {
            const rating = document.querySelector('div[style*="font-size: 14px"]');
            rating.innerHTML = '⭐️ 評価★4.2 ⭐️ 総使用人数:約36万人 🚀 使用人数増加中 📉 評価激減中';
            animateClick(this);
        });
    </script>
</body>
</html>
```