Beneath the loot box spin carousel, add a SECOND horizontal RNG slider for the “Multiplier Roll.”

This multiplier slider must be visually simpler than the loot boxes. Design it as a long, horizontal meter-like strip with glowing number pills. Each pill represents a possible multiplier value.

List of multipliers to include:
×1, ×1.25, ×1.5, ×2, ×3, ×5
Repeat this sequence twice so the strip appears long and scrollable.

Multiplier Slider Visual Requirements:
- Clean, minimal, modern design.
- Transparent glassmorphism pills with a subtle blur and reflective highlights.
- Warm white or soft gold multiplier text with gentle neon glow.
- Pill shape: rounded rectangles, evenly spaced, floating slightly above the track.
- Track background: thin translucent bar with soft lighting.

Center Selection Window:
- Add a small, glowing rectangular frame in the exact center of the multiplier slider.
- Thin neon-orange outline (#FF8C00) with soft glow.
- Transparent interior.
- The selected multiplier must align perfectly inside this frame.

Motion State:
- The multiplier slider should appear mid-spin or slowing down:
- Non-selected multipliers should show slight motion blur.
- Mild stretching or streaking to indicate speed.
- The selected multiplier pill should be crisp, slightly enlarged, and glowing brighter than the others.

Placement:
- Position this multiplier slider directly beneath the loot box track.
- Maintain perfect alignment with the loot box selection frame above it.
- Keep the focus clean: no icons, no characters — only the glowing number pills inside the slider.

Overall Style:
- Match the Nioplay aesthetic.
- Neon orange and gold accents.
- Dark matte background with soft ambient light.
- Thin glassmorphism surfaces.
- Premium digital casino vibe.

Ensure the final scene clearly communicates:
1. The loot box spin happens first (top track).
2. The multiplier roll happens second (bottom track).
3. Both spins align visually through centered selection windows.

index.html

@@ -41,10 +41,25 @@
             <div class="absolute inset-y-0 right-0 w-32 bg-gradient-to-l from-premium-black to-transparent z-10"></div>
             <div class="absolute inset-0 bg-premium-orange/5 blur-xl opacity-0 motion-blur"></div>
         </div>
+        <!-- Multiplier Slider -->
+        <div class="relative h-24 w-full overflow-hidden mt-8">
+            <div class="multiplier-track absolute top-0 left-0 h-full flex items-center justify-center gap-4 transition-transform duration-1000 ease-[cubic-bezier(0.16,1,0.3,1)]">
+                <!-- Multipliers (generated by JS) -->
+            </div>
+            
+            <!-- Center Selection Frame -->
+            <div class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-24 h-16 border-2 border-premium-orange/80 rounded-lg pointer-events-none z-10">
+                <div class="absolute inset-0 rounded-lg bg-premium-orange/10 blur-sm"></div>
+            </div>
+            
+            <!-- Motion Blur Effects -->
+            <div class="absolute inset-y-0 left-0 w-32 bg-gradient-to-r from-premium-black to-transparent z-5"></div>
+            <div class="absolute inset-y-0 right-0 w-32 bg-gradient-to-l from-premium-black to-transparent z-5"></div>
+        </div>
         
         <!-- Roll Button -->
-        <div class="mt-16 flex justify-center">
-            <button id="rollButton" class="roll-button relative px-12 py-4 bg-premium-charcoal rounded-full border-2 border-premium-gold/50 text-premium-gold font-bold text-xl uppercase tracking-wider hover:bg-premium-gold/10 hover:border-premium-gold hover:text-premium-orange transition-all duration-300 group">
+        <div class="mt-8 flex justify-center">
+<button id="rollButton" class="roll-button relative px-12 py-4 bg-premium-charcoal rounded-full border-2 border-premium-gold/50 text-premium-gold font-bold text-xl uppercase tracking-wider hover:bg-premium-gold/10 hover:border-premium-gold hover:text-premium-orange transition-all duration-300 group">
                 <span class="relative z-10">SPIN</span>
                 <span class="absolute inset-0 rounded-full bg-premium-orange blur-md opacity-0 group-hover:opacity-30 transition-opacity duration-300"></span>
                 <span class="absolute inset-0 rounded-full border-2 border-premium-orange opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>

script.js

@@ -1,11 +1,12 @@
 
 document.addEventListener('DOMContentLoaded', () => {
     const carousel = document.querySelector('.loot-carousel');
+    const multiplierTrack = document.querySelector('.multiplier-track');
     const rollButton = document.getElementById('rollButton');
     const motionBlur = document.querySelector('.motion-blur');
     const rarities = ['common', 'rare', 'rare', 'common', 'epic', 'common', 'legendary', 'rare', 'common', 'epic', 'rare', 'common'];
-    
-    const rewards = [
+    const multipliers = [1, 1.25, 1.5, 2, 3, 5, 1, 1.25, 1.5, 2, 3, 5];
+const rewards = [
         { rarity: 'common', name: 'Basic Skin', description: 'A standard cosmetic item for your collection' },
         { rarity: 'common', name: '100 Coins', description: 'Use them to purchase items in the shop' },
         { rarity: 'rare', name: 'Rare Emote', description: 'Show off with this exclusive animation' },
@@ -15,9 +16,9 @@ document.addEventListener('DOMContentLoaded', () => {
         { rarity: 'legendary', name: 'Legendary Character', description: 'The rarest hero in the game' },
         { rarity: 'legendary', name: '10,000 Coins', description: 'Enough to buy anything you want' }
     ];
-// Generate loot boxes
+    // Generate loot boxes
     rarities.forEach((rarity, index) => {
-        const box = document.createElement('div');
+const box = document.createElement('div');
         box.className = `loot-box ${rarity} flex items-center justify-center cursor-pointer`;
         box.innerHTML = `
             <div class="box-front w-full h-full bg-premium-charcoal/90 backdrop-blur-sm rounded-lg border border-current flex items-center justify-center">
@@ -28,10 +29,16 @@ document.addEventListener('DOMContentLoaded', () => {
         `;
         carousel.appendChild(box);
     });
-    
+    // Generate multiplier pills
+    multipliers.forEach((multiplier, index) => {
+        const pill = document.createElement('div');
+        pill.className = 'multiplier-pill px-6 mx-2';
+        pill.textContent = `×${multiplier}`;
+        multiplierTrack.appendChild(pill);
+    });
+
     feather.replace();
-    
-    // Roll animation
+// Roll animation
     rollButton.addEventListener('click', () => {
         rollButton.disabled = true;
         motionBlur.classList.add('active');
@@ -50,17 +57,35 @@ document.addEventListener('DOMContentLoaded', () => {
             carousel.style.transitionDuration = '4000ms';
             carousel.style.transform = `translateX(${targetPosition}px)`;
         }, 10);
-        
         // Final selection
         setTimeout(() => {
             motionBlur.classList.remove('active');
             const selectedBox = carousel.children[randomIndex];
             selectedBox.classList.add('selected');
+
+            // Select random multiplier
+            const multiplierIndex = Math.floor(Math.random() * multipliers.length);
+            const targetMultiplierPos = -(multiplierIndex * 96) + (window.innerWidth / 2 - 48);
             
-            // Open lid animation
+            multiplierTrack.style.transitionDuration = '4000ms';
+            multiplierTrack.style.transform = `translateX(${targetMultiplierPos}px)`;
+            // Open lid animation and select multiplier
             setTimeout(() => {
                 selectedBox.querySelector('.box-lid').style.transform = 'translateY(-20px) rotateX(60deg)';
-            // Create coins burst and show reward
+                
+                // Highlight selected multiplier
+                const allMultipliers = document.querySelectorAll('.multiplier-pill');
+                allMultipliers.forEach(pill => pill.classList.remove('selected', 'blurred'));
+                const selectedMultiplier = allMultipliers[multiplierIndex];
+                selectedMultiplier.classList.add('selected');
+                
+                // Blur others
+                allMultipliers.forEach((pill, idx) => {
+                    if (idx !== multiplierIndex) {
+                        pill.classList.add('blurred');
+                    }
+                });
+// Create coins burst and show reward
             createCoinBurst(selectedBox);
             
             // Get random reward based on rarity

style.css

@@ -61,8 +61,60 @@
     z-index: 30;
     box-shadow: 0 0 8px #FF8C00;
 }
-
 .motion-blur.active {
     opacity: 0.3;
     transition: opacity 0.3s ease;
-}
+}
+
+.multiplier-pill {
+    position: relative;
+    min-width: 80px;
+    height: 48px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(255,255,255,0.05);
+    backdrop-filter: blur(8px);
+    border-radius: 12px;
+    border: 1px solid rgba(255,255,255,0.1);
+    color: #FFD700;
+    font-weight: bold;
+    font-size: 1.25rem;
+    box-shadow: 0 0 15px rgba(255,215,0,0.1);
+    transition: all 0.3s ease;
+}
+
+.multiplier-pill::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: linear-gradient(90deg, transparent, rgba(255,215,0,0.5), transparent);
+}
+
+.multiplier-pill.selected {
+    transform: scale(1.2);
+    background: rgba(255,255,255,0.1);
+    color: #FF8C00;
+    box-shadow: 0 0 30px rgba(255,140,0,0.3);
+    z-index: 10;
+}
+
+.multiplier-pill.blurred {
+    opacity: 0.6;
+    filter: blur(2px);
+    transform: scale(0.9);
+}
+
+.multiplier-track-bg {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    right: 0;
+    height: 2px;
+    transform: translateY(-50%);
+    background: rgba(255,255,255,0.1);
+    z-index: -1;
+}