Promote version 682bd85 to main

Promoted commit 682bd85a8457683b08dbec2413c891ab27f51aaa to main branch

script.js

@@ -66,12 +66,10 @@ document.addEventListener('DOMContentLoaded', () => {
             // Get random reward based on rarity
             const possibleRewards = rewards.filter(r => r.rarity === rarities[randomIndex]);
             const reward = possibleRewards[Math.floor(Math.random() * possibleRewards.length)];
+            
             const popup = document.createElement('reward-popup');
             document.body.appendChild(popup);
-            setTimeout(() => {
-                popup.show(reward);
-                createConfettiBurst();
-            }, 1000);
+            setTimeout(() => popup.show(reward), 1000);
 }, 800);
             
             // Reset after animation
@@ -82,69 +80,9 @@ document.addEventListener('DOMContentLoaded', () => {
             }, 3000);
         }, 4000);
     });
-function createConfettiBurst() {
-    const colors = ['#FFD700', '#FF8C00', '#00FFAA', '#00AAFF', '#AA00FF'];
-    const container = document.createElement('div');
-    container.style.position = 'fixed';
-    container.style.top = '0';
-    container.style.left = '0';
-    container.style.width = '100%';
-    container.style.height = '100%';
-    container.style.pointerEvents = 'none';
-    container.style.zIndex = '999';
-    document.body.appendChild(container);
-
-    for (let i = 0; i < 150; i++) {
-        const confetti = document.createElement('div');
-        confetti.style.position = 'absolute';
-        confetti.style.width = '10px';
-        confetti.style.height = '10px';
-        confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
-        confetti.style.borderRadius = '50%';
-        confetti.style.opacity = '0.8';
-        
-        const startX = Math.random() * window.innerWidth;
-        const startY = -10;
-        const endY = window.innerHeight + 10;
-        const rotation = Math.random() * 360;
-        const scale = 0.5 + Math.random() * 1.5;
-        const duration = 3 + Math.random() * 2;
-        const delay = Math.random() * 0.5;
-        
-        confetti.style.left = `${startX}px`;
-        confetti.style.top = `${startY}px`;
-        confetti.style.transform = `rotate(${rotation}deg) scale(${scale})`;
-        
-        container.appendChild(confetti);
-        
-        const animation = confetti.animate([
-            { 
-                top: `${startY}px`, 
-                transform: `rotate(${rotation}deg) scale(${scale})`,
-                opacity: 0.8 
-            },
-            { 
-                top: `${endY}px`,
-                transform: `rotate(${rotation + 360}deg) scale(${scale})`,
-                opacity: 0 
-            }
-        ], {
-            duration: duration * 1000,
-            delay: delay * 1000,
-            easing: 'cubic-bezier(0.1, 0.8, 0.3, 1)'
-        });
-        
-        animation.onfinish = () => {
-            confetti.remove();
-            if (container.children.length === 0) {
-                container.remove();
-            }
-        };
-    }
-}
-
-function createCoinBurst(box) {
-for (let i = 0; i < 12; i++) {
+    
+    function createCoinBurst(box) {
+        for (let i = 0; i < 12; i++) {
             const coin = document.createElement('div');
             coin.className = 'coin-particle';
             

style.css

@@ -8,6 +8,7 @@
     50% { transform: translateY(-20px) scale(1.1); }
     100% { transform: translateY(0) scale(1.1); }
 }
+
 @keyframes particle-burst {
     0% { 
         opacity: 0;
@@ -20,28 +21,6 @@
     }
 }
 
-@keyframes confetti-fall {
-    0% {
-        transform: translateY(-100px) rotate(0deg);
-        opacity: 1;
-    }
-    100% {
-        transform: translateY(100vh) rotate(360deg);
-        opacity: 0;
-    }
-}
-
-0% { 
-        opacity: 0;
-        transform: scale(0.5) translate(0, 0);
-    }
-    20% { opacity: 1; }
-    100% { 
-        opacity: 0;
-        transform: scale(2) translate(var(--tx), var(--ty));
-    }
-}
-
 .loot-box {
     position: relative;
     width: 140px;