Design a modern, mobile-optimized Jackpot page for the online sweepstakes casino Nioplay. Use selective glassmorphism, neon gold accents, animated jackpot counters, and lightweight iconography. Avoid overusing glass cards — use glow icons, badge counters, and infographic layouts where possible. Visual hierarchy should guide players step-by-step without overwhelming them. 🌌 BACKGROUND & AESTHETIC FOUNDATION Background: radial-gradient(circle at center, #0a0a0a 0%, #1a0d00 40%, #2e1300 70%, #000000 100%) Font: Orbitron or Poppins Accent Glow: Primary: #FFD700 (golden yellow) Secondary: #FF6A00 (neon orange) UI Style: Use glass cards only for important interactive blocks (e.g., toggles, leaderboards, tables). Use icon rows or highlight badges for supportive info. 🥇 SECTION 1: JACKPOT HEADER Header Text: Glowing neon yellow “JACKPOT” headline with dice, coins, or slot symbols faintly floating behind. Add light shimmer or slow twinkle animation. Jackpot Total Display: Large number (e.g., 3,198,392.30 SC) with pulsing animated increase. Slight radial glow around the number. Below: Small text: "Updates live as players spin in Jackpot Mode." Jackpot Mode Toggle: Pill-shaped toggle (green ON/OFF) with glowing outline. Label: "Jackpot Mode" Subtext: "0.05 SC per spin while active" 💡 This section should be bold and attention-grabbing, but not overly boxed-in. No need for glass cards — just let it breathe. 🎯 SECTION 2: HOW TO ENTER (USE ICON ROW) Use a horizontal icon row (no glass cards), each with: Circle icon (minimal glow) Bold label underneath Optional short subtext below 4 Steps: Enable Jackpot Mode (Toggle Icon) Spin Any Game (Slot Reel Icon) Pay Entry Fee (Coin Drop Icon) Win Big (Treasure Icon) 🧠 Use responsive layout: Stack into two rows on mobile. Icons should be color-coded with soft shadows — no need for borders or backgrounds here. ⏳ SECTION 3: COUNTDOWN TIMER (MINIMAL GLASS CARD) Use a single thin glass card for the countdown block. Inside: Label: "Next Jackpot Drops In:" Countdown Timer: 01:23:52 (animated glow digits) Small gold sparkles around timer. Caption: "Jackpot drops every 6 hours or when pot cap is hit." ✂️ Don't overdesign — treat this as a divider between top and mid sections. 💰 SECTION 4: JACKPOT TIERS (ICON GRID) Replace full cards with an infographic-style 3-tier layout: 3 vertical icons, each with: Tier Name (Mini / Mega / Legendary) Range Text (e.g., 500–1,999 SC) Pot Icon (styled differently per tier) Tier glow color: Mini = Gold Mega = Orange Legendary = Red Pulse ✅ Avoid using separate cards. Use subtle line dividers or just space them evenly. Think “slot game infographic.” 📊 SECTION 5: RECENT WINNERS TABLE (GLASS CARD — ONE OF THE FEW) One wide glassmorphism card Title: "Recent Nioplay Jackpot Winners" Table format: Columns: Username | Prize | Game | Date Each row glows green briefly when added (animated). Hover glow on row: soft neon outline. ✅ This is one of the few places glass works — use it to frame player wins clearly. 🔔 SECTION 6: LIVE WIN FEED (TICKER STYLE) Create a thin horizontal scroll bar under the winner table (not inside a card). Scrolls recent wins: "🎉 LuckyRoller88 won 4,200 SC on Super Panda!" Auto-scrolls or fades between each win every 5 seconds. 💡 Keep it sleek — small text on black background with gold glow. 📈 SECTION 7: JACKPOT STATS (BADGE STYLE) Instead of cards, use horizontal glowing badges with icons: Spins Today: 182,390 Players in Jackpot Mode: 982 Biggest Jackpot Ever: 41,200 SC Each badge has: Icon on the left Bold glowing number No background card — just floating with light drop shadow 🧍‍♂️ SECTION 8: TOP CONTRIBUTORS (OPTIONAL) If used, limit to a simple scroll list, no card Each row: Avatar Username Amount contributed Use crown emojis 🥇🥈🥉 for top 3. Minimalistic, not boxed. 📃 SECTION 9: TERMS COLLAPSE Dropdown-style collapsible block titled: "Nioplay Jackpot Terms & Details" Show hidden block on click with clean text. No need for a card — just a thin line separator and dropdown. - Follow Up Deployment

index.html

@@ -5,24 +5,26 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Nioplay Jackpot</title>
     <script src="https://cdn.tailwindcss.com"></script>
-    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700;800;900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <script>
         tailwind.config = {
             theme: {
                 extend: {
+                    fontFamily: {
+                        orbitron: ['Orbitron', 'sans-serif'],
+                        poppins: ['Poppins', 'sans-serif']
+                    },
                     colors: {
                         'gold': '#FFD700',
                         'neon-orange': '#FF6A00',
                         'dark-bg': '#0a0a0a',
+                        'glass': 'rgba(255, 255, 255, 0.05)'
                     },
-                    fontFamily: {
-                        'orbitron': ['Orbitron', 'sans-serif'],
-                        'poppins': ['Poppins', 'sans-serif'],
-                    },
-                    dropShadow: {
-                        'gold': '0 0 8px rgba(255, 215, 0, 0.6)',
-                        'neon': '0 0 15px rgba(255, 106, 0, 0.7)',
+                    boxShadow: {
+                        'gold-glow': '0 0 15px rgba(255, 215, 0, 0.7)',
+                        'gold-glow-lg': '0 0 25px rgba(255, 215, 0, 0.8)',
+                        'neon-glow': '0 0 10px rgba(255, 106, 0, 0.7)'
                     }
                 }
             }
@@ -33,416 +35,485 @@
             background: radial-gradient(circle at center, #0a0a0a 0%, #1a0d00 40%, #2e1300 70%, #000000 100%);
             min-height: 100vh;
             color: white;
-            overflow-x: hidden;
             font-family: 'Poppins', sans-serif;
         }
         
-        /* Glowing text effects */
-        .glow-gold {
-            text-shadow: 0 0 10px rgba(255, 215, 0, 0.7);
-            color: #FFD700;
+        .jackpot-text {
+            font-family: 'Orbitron', sans-serif;
+            text-shadow: 0 0 15px rgba(255, 215, 0, 0.7);
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .jackpot-text::after {
+            content: '';
+            position: absolute;
+            top: -50%;
+            left: -60%;
+            width: 20px;
+            height: 200%;
+            background: rgba(255, 255, 255, 0.3);
+            transform: rotate(25deg);
+            animation: shine 3s infinite;
+        }
+        
+        @keyframes shine {
+            0% { left: -60%; }
+            20% { left: 100%; }
+            100% { left: 100%; }
+        }
+        
+        .jackpot-amount {
+            font-family: 'Orbitron', sans-serif;
+            animation: pulse 2s infinite;
         }
         
-        .glow-orange {
-            text-shadow: 0 0 10px rgba(255, 106, 0, 0.7);
-            color: #FF6A00;
+        @keyframes pulse {
+            0% { text-shadow: 0 0 5px rgba(255, 215, 0, 0.5); }
+            50% { text-shadow: 0 0 20px rgba(255, 215, 0, 0.9); }
+            100% { text-shadow: 0 0 5px rgba(255, 215, 0, 0.5); }
         }
         
-        /* Glass card effect */
         .glass-card {
-            background: rgba(15, 10, 5, 0.2);
+            background: rgba(255, 255, 255, 0.05);
             backdrop-filter: blur(10px);
-            border: 1px solid rgba(255, 215, 0, 0.1);
-            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+            border: 1px solid rgba(255, 255, 255, 0.1);
             border-radius: 12px;
-            position: relative;
-            overflow: hidden;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
         }
         
-        .glass-card:before {
-            content: '';
-            position: absolute;
-            top: -2px; left: -2px; right: -2px; bottom: -2px;
-            background: linear-gradient(45deg, 
-                rgba(255, 215, 0, 0.05), 
-                rgba(255, 106, 0, 0.05), 
-                rgba(255, 215, 0, 0.05));
-            z-index: -1;
-            border-radius: 14px;
+        .toggle-bg {
+            background: linear-gradient(145deg, #1a1a1a, #0d0d0d);
+            box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
         }
         
-        /* Jackpot counter animation */
-        @keyframes pulse {
-            0% { transform: scale(1); }
-            50% { transform: scale(1.03); }
-            100% { transform: scale(1); }
+        .toggle-switch {
+            transition: all 0.3s ease;
+            box-shadow: 0 0 10px rgba(0, 200, 0, 0.5);
         }
         
-        .pulse-animation {
-            animation: pulse 1.5s infinite;
+        .step-icon {
+            transition: all 0.3s ease;
+            filter: drop-shadow(0 0 5px rgba(255, 215, 0, 0.5));
         }
         
-        /* Floating dice animation */
-        @keyframes float {
-            0% { transform: translateY(0px); }
-            50% { transform: translateY(-10px); }
-            100% { transform: translateY(0px); }
+        .step-icon:hover {
+            transform: translateY(-5px);
+            filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.8));
         }
         
-        .dice-float {
-            animation: float 6s ease-in-out infinite;
+        .countdown-digit {
+            font-family: 'Orbitron', sans-serif;
+            text-shadow: 0 0 10px rgba(255, 215, 0, 0.7);
+            animation: digitGlow 1.5s infinite alternate;
         }
         
-        .coin-float {
-            animation: float 4s ease-in-out infinite 1s;
+        @keyframes digitGlow {
+            0% { text-shadow: 0 0 5px rgba(255, 215, 0, 0.5); }
+            100% { text-shadow: 0 0 15px rgba(255, 215, 0, 0.9); }
         }
         
-        .slot-float {
-            animation: float 5s ease-in-out infinite 0.5s;
+        .tier-icon {
+            filter: drop-shadow(0 0 8px currentColor);
+            transition: all 0.3s ease;
         }
         
-        /* Progress bar animation */
-        .progress-bar-grow {
-            animation: grow 1.5s ease-in-out forwards;
+        .tier-icon:hover {
+            transform: scale(1.1);
         }
         
-        @keyframes grow {
-            from { width: 0; }
-            to { width: 100%; }
+        .winner-row {
+            transition: all 0.3s ease;
         }
         
-        /* Blinking animation for live elements */
-        @keyframes blink {
-            0% { opacity: 0.4; }
-            50% { opacity: 1; }
-            100% { opacity: 0.4; }
+        .winner-row:hover {
+            background: rgba(255, 215, 0, 0.05);
+            box-shadow: inset 0 0 15px rgba(255, 215, 0, 0.1);
         }
         
-        .blink-animation {
-            animation: blink 1.5s infinite;
+        .new-winner {
+            animation: highlight 3s ease;
         }
         
-        /* Shimmer effect for jackpot header */
-        @keyframes shimmer {
-            0% { background-position: -200% 0; }
-            100% { background-position: 200% 0; }
+        @keyframes highlight {
+            0% { background: rgba(0, 200, 0, 0.3); }
+            100% { background: transparent; }
         }
         
-        .shimmer-effect {
-            background: linear-gradient(90deg, transparent, rgba(255,215,0,0.3), transparent);
-            background-size: 200% 100%;
-            animation: shimmer 4s linear infinite;
+        .stat-badge {
+            background: rgba(30, 30, 30, 0.7);
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.5), 0 0 15px rgba(255, 215, 0, 0.3);
+            transition: all 0.3s ease;
         }
         
-        /* Row glow on hover */
-        .glow-row:hover {
-            background: rgba(255, 215, 0, 0.05);
-            box-shadow: 0 0 15px rgba(255, 215, 0, 0.1);
+        .stat-badge:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.6), 0 0 20px rgba(255, 215, 0, 0.5);
+        }
+        
+        .win-feed {
+            overflow: hidden;
+            white-space: nowrap;
+        }
+        
+        .win-item {
+            display: inline-block;
+            padding-right: 50px;
+            animation: ticker 20s linear infinite;
+        }
+        
+        @keyframes ticker {
+            0% { transform: translateX(100%); }
+            100% { transform: translateX(-100%); }
+        }
+        
+        .floating {
+            animation: floating 3s ease-in-out infinite;
+        }
+        
+        @keyframes floating {
+            0% { transform: translateY(0px); }
+            50% { transform: translateY(-10px); }
+            100% { transform: translateY(0px); }
+        }
+        
+        .twinkle {
+            animation: twinkle 2s infinite alternate;
+        }
+        
+        @keyframes twinkle {
+            0% { opacity: 0.3; }
+            100% { opacity: 1; }
         }
     </style>
 </head>
-<body class="dark-bg">
-    <!-- Jackpot Header -->
-    <header class="py-8 px-4 text-center relative overflow-hidden">
-        <div class="absolute top-0 left-0 w-full h-full opacity-10 pointer-events-none">
-            <i class="fas fa-dice-d20 text-6xl absolute top-1/4 left-1/6 opacity-40 dice-float"></i>
-            <i class="fas fa-coins text-5xl absolute top-2/3 left-3/4 opacity-40 coin-float"></i>
-            <i class="fas fa-cherries text-4xl absolute top-1/3 left-4/5 opacity-40 slot-float"></i>
-            <i class="fas fa-diamond text-4xl absolute top-2/5 left-1/4 opacity-40 slot-float"></i>
-        </div>
-        
-        <h1 class="text-5xl md:text-7xl font-bold mb-2 font-orbitron glow-gold relative">
-            <span class="shimmer-effect">JACKPOT</span>
-        </h1>
-        
-        <div class="my-6 relative z-10">
-            <div class="pulse-animation glow-gold text-5xl md:text-6xl font-bold font-orbitron">
-                <span id="jackpotCounter">3,198,392.30</span> SC
-            </div>
-            <p class="mt-2 text-sm text-gray-300">Updates live as players spin in Jackpot Mode.</p>
-            
-            <div class="mt-6 flex justify-center items-center gap-3">
-                <label for="jackpotToggle" class="text-sm font-semibold">Jackpot Mode</label>
-                <div class="relative">
-                    <input type="checkbox" id="jackpotToggle" class="sr-only">
-                    <div class="block w-16 h-8 bg-gray-700 rounded-full cursor-pointer relative overflow-hidden">
-                        <div class="absolute inset-0.5 rounded-full border border-gold opacity-30"></div>
-                        <div class="absolute left-1 top-1 w-6 h-6 rounded-full bg-gray-400 transform transition-transform duration-300 ease-in-out"></div>
-                    </div>
+<body class="min-h-screen py-8 px-4 sm:px-6 lg:px-8">
+    <div class="max-w-6xl mx-auto">
+        <!-- SECTION 1: JACKPOT HEADER -->
+        <section class="text-center mb-12 relative">
+            <div class="absolute inset-0 overflow-hidden pointer-events-none">
+                <div class="absolute top-10 left-1/4 floating twinkle">
+                    <i class="fas fa-dice text-gold opacity-20 text-4xl"></i>
                 </div>
-                <span class="text-xs text-gray-400">0.05 SC per spin while active</span>
-            </div>
-        </div>
-    </header>
-
-    <!-- How to Enter (Icon Row) -->
-    <section class="py-8 px-4">
-        <h2 class="text-xl font-semibold text-center mb-8 glow-gold font-orbitron">HOW TO ENTER</h2>
-        <div class="grid grid-cols-2 lg:grid-cols-4 gap-8 max-w-4xl mx-auto">
-            <!-- Step 1 -->
-            <div class="flex flex-col items-center text-center gap-2">
-                <div class="w-20 h-20 rounded-full flex items-center justify-center text-2xl relative">
-                    <div class="absolute inset-0 bg-gradient-to-br from-gold to-transparent rounded-full opacity-30"></div>
-                    <i class="fas fa-toggle-on glow-gold"></i>
+                <div class="absolute top-5 right-1/4 floating twinkle" style="animation-delay: 0.5s;">
+                    <i class="fas fa-coins text-gold opacity-20 text-5xl"></i>
                 </div>
-                <span class="font-bold mt-2 glow-gold">Enable Jackpot Mode</span>
-            </div>
-            
-            <!-- Step 2 -->
-            <div class="flex flex-col items-center text-center gap-2">
-                <div class="w-20 h-20 rounded-full flex items-center justify-center text-2xl relative">
-                    <div class="absolute inset-0 bg-gradient-to-br from-gold to-transparent rounded-full opacity-30"></div>
-                    <i class="fas fa-slot-machine glow-gold"></i>
+                <div class="absolute top-20 left-1/3 floating twinkle" style="animation-delay: 1s;">
+                    <i class="fas fa-gem text-gold opacity-20 text-3xl"></i>
+                </div>
+                <div class="absolute top-16 right-1/3 floating twinkle" style="animation-delay: 1.5s;">
+                    <i class="fas fa-crown text-gold opacity-20 text-4xl"></i>
                 </div>
-                <span class="font-bold mt-2 glow-gold">Spin Any Game</span>
-                <span class="text-xs text-gray-400">All games qualify</span>
             </div>
             
-            <!-- Step 3 -->
-            <div class="flex flex-col items-center text-center gap-2">
-                <div class="w-20 h-20 rounded-full flex items-center justify-center text-2xl relative">
-                    <div class="absolute inset-0 bg-gradient-to-br from-gold to-transparent rounded-full opacity-30"></div>
-                    <i class="fas fa-coins glow-gold"></i>
+            <h1 class="jackpot-text text-5xl sm:text-6xl md:text-7xl font-bold mb-6 text-gold">
+                JACKPOT
+            </h1>
+            
+            <div class="relative inline-block mb-4">
+                <div class="absolute inset-0 rounded-full bg-gold opacity-20 blur-lg"></div>
+                <div class="jackpot-amount text-4xl sm:text-5xl md:text-6xl font-bold relative z-10">
+                    3,198,392.30 <span class="text-xl">SC</span>
                 </div>
-                <span class="font-bold mt-2 glow-gold">Pay Entry Fee</span>
-                <span class="text-xs text-gray-400">0.05 SC per spin</span>
             </div>
             
-            <!-- Step 4 -->
-            <div class="flex flex-col items-center text-center gap-2">
-                <div class="w-20 h-20 rounded-full flex items-center justify-center text-2xl relative">
-                    <div class="absolute inset-0 bg-gradient-to-br from-gold to-transparent rounded-full opacity-30"></div>
-                    <i class="fas fa-gem glow-gold"></i>
+            <p class="text-gray-300 mb-8 text-sm">
+                Updates live as players spin in Jackpot Mode.
+            </p>
+            
+            <div class="flex items-center justify-center space-x-4">
+                <div class="text-lg font-semibold">Jackpot Mode</div>
+                <div class="toggle-bg w-20 h-10 rounded-full p-1 cursor-pointer relative">
+                    <div class="toggle-switch bg-green-500 w-8 h-8 rounded-full absolute left-1 top-1"></div>
                 </div>
-                <span class="font-bold mt-2 glow-gold">Win Big</span>
+                <div class="text-green-400 font-semibold">ON</div>
             </div>
-        </div>
-    </section>
-
-    <!-- Countdown Timer -->
-    <section class="py-8 px-4 max-w-2xl mx-auto">
-        <div class="glass-card py-6 px-8">
-            <div class="text-center">
-                <span class="text-sm glow-orange">Next Jackpot Drops In:</span>
-                <div class="flex justify-center items-center mt-4 space-x-2 md:space-x-4">
-                    <div class="text-4xl md:text-5xl font-bold font-orbitron glow-gold">01</div>
-                    <div class="text-3xl font-bold font-orbitron glow-gold">:</div>
-                    <div class="text-4xl md:text-5xl font-bold font-orbitron glow-gold">23</div>
-                    <div class="text-3xl font-bold font-orbitron glow-gold">:</div>
-                    <div class="text-4xl md:text-5xl font-bold font-orbitron glow-gold">52</div>
+            <p class="text-gray-400 mt-2 text-sm">
+                0.05 SC per spin while active
+            </p>
+        </section>
+        
+        <!-- SECTION 2: HOW TO ENTER -->
+        <section class="mb-16">
+            <h2 class="text-2xl font-bold text-center mb-8 text-gold">How to Enter</h2>
+            <div class="grid grid-cols-2 sm:grid-cols-4 gap-6 sm:gap-4">
+                <div class="step-icon text-center">
+                    <div class="w-16 h-16 mx-auto rounded-full bg-gradient-to-br from-gray-800 to-gray-900 flex items-center justify-center mb-3 border border-gold">
+                        <i class="fas fa-toggle-on text-2xl text-gold"></i>
+                    </div>
+                    <div class="font-bold text-gold">Enable Jackpot Mode</div>
+                    <div class="text-xs text-gray-400 mt-1">Toggle on in settings</div>
                 </div>
-                <p class="mt-4 text-xs text-gray-400">Jackpot drops every 6 hours or when pot cap is hit.</p>
-            </div>
-        </div>
-    </section>
-
-    <!-- Jackpot Tiers -->
-    <section class="py-12 px-4 max-w-4xl mx-auto">
-        <h2 class="text-xl font-semibold text-center mb-8 glow-gold font-orbitron">JACKPOT TIERS</h2>
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-            <!-- Mini Tier -->
-            <div class="flex flex-col items-center">
-                <div class="h-40 w-40 rounded-full border-2 border-gold flex items-center justify-center mb-4 glow-gold">
-                    <i class="fas fa-chess-pawn text-4xl glow-gold"></i>
+                
+                <div class="step-icon text-center">
+                    <div class="w-16 h-16 mx-auto rounded-full bg-gradient-to-br from-gray-800 to-gray-900 flex items-center justify-center mb-3 border border-gold">
+                        <i class="fas fa-dice text-2xl text-gold"></i>
+                    </div>
+                    <div class="font-bold text-gold">Spin Any Game</div>
+                    <div class="text-xs text-gray-400 mt-1">Slots, table games, etc.</div>
                 </div>
-                <span class="text-lg font-bold glow-gold">Mini</span>
-                <span class="text-sm glow-orange mt-2">500 - 1,999 SC</span>
-            </div>
-            
-            <!-- Mega Tier -->
-            <div class="flex flex-col items-center">
-                <div class="h-40 w-40 rounded-full border-2 border-neon-orange flex items-center justify-center mb-4 glow-orange">
-                    <i class="fas fa-chess-knight text-4xl glow-orange"></i>
+                
+                <div class="step-icon text-center">
+                    <div class="w-16 h-16 mx-auto rounded-full bg-gradient-to-br from-gray-800 to-gray-900 flex items-center justify-center mb-3 border border-gold">
+                        <i class="fas fa-coins text-2xl text-gold"></i>
+                    </div>
+                    <div class="font-bold text-gold">Pay Entry Fee</div>
+                    <div class="text-xs text-gray-400 mt-1">Small fee per spin</div>
                 </div>
-                <span class="text-lg font-bold glow-orange">Mega</span>
-                <span class="text-sm glow-orange mt-2">2,000 - 9,999 SC</span>
-            </div>
-            
-            <!-- Legendary Tier -->
-            <div class="flex flex-col items-center">
-                <div class="h-40 w-40 rounded-full border-2 border-red-500 flex items-center justify-center mb-4" style="box-shadow: 0 0 15px rgba(255, 0, 0, 0.4);">
-                    <i class="fas fa-chess-king text-4xl" style="text-shadow: 0 0 8px rgba(255, 0, 0, 0.6);"></i>
+                
+                <div class="step-icon text-center">
+                    <div class="w-16 h-16 mx-auto rounded-full bg-gradient-to-br from-gray-800 to-gray-900 flex items-center justify-center mb-3 border border-gold">
+                        <i class="fas fa-trophy text-2xl text-gold"></i>
+                    </div>
+                    <div class="font-bold text-gold">Win Big</div>
+                    <div class="text-xs text-gray-400 mt-1">Massive prizes!</div>
                 </div>
-                <span class="text-lg font-bold" style="text-shadow: 0 0 8px rgba(255, 0, 0, 0.6); color: #ff5555;">Legendary</span>
-                <span class="text-sm mt-2" style="text-shadow: 0 0 5px rgba(255, 85, 85, 0.6);">10,000+ SC</span>
             </div>
-        </div>
-    </section>
-
-    <!-- Recent Winners -->
-    <section class="py-8 px-4 max-w-6xl mx-auto">
-        <h2 class="text-xl font-semibold text-center mb-6 glow-gold font-orbitron">RECENT NIOPLAY JACKPOT WINNERS</h2>
-        <div class="glass-card overflow-hidden">
-            <table class="w-full">
-                <thead>
-                    <tr class="bg-gray-800/40 text-left">
-                        <th class="py-3 px-6">Username</th>
-                        <th class="py-3 px-6">Prize</th>
-                        <th class="py-3 px-6">Game</th>
-                        <th class="py-3 px-6">Date</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr class="glow-row border-b border-gray-700/50 transition duration-200 cursor-pointer relative">
-                        <td class="py-3 px-6">GoldSpinner</td>
-                        <td class="py-3 px-6 font-semibold glow-gold">2,450 SC</td>
-                        <td class="py-3 px-6">Golden Fortune</td>
-                        <td class="py-3 px-6 text-gray-400">2 min ago</td>
-                    </tr>
-                    <tr class="glow-row border-b border-gray-700/50 transition duration-200 cursor-pointer">
-                        <td class="py-3 px-6">NeonRider</td>
-                        <td class="py-3 px-6 font-semibold glow-orange">8,220 SC</td>
-                        <td class="py-3 px-6">Diamond Jacks</td>
-                        <td class="py-3 px-6 text-gray-400">17 min ago</td>
-                    </tr>
-                    <tr class="glow-row border-b border-gray-700/50 transition duration-200 cursor-pointer">
-                        <td class="py-3 px-6">CasinoViking</td>
-                        <td class="py-3 px-6 font-semibold glow-gold">1,250 SC</td>
-                        <td class="py-3 px-6">Nordic Luck</td>
-                        <td class="py-3 px-6 text-gray-400">35 min ago</td>
-                    </tr>
-                    <tr class="glow-row border-b border-gray-700/50 transition duration-200 cursor-pointer">
-                        <td class="py-3 px-6">LuckDragon</td>
-                        <td class="py-3 px-6 font-semibold" style="color: #ff5555; text-shadow: 0 0 8px rgba(255,85,85,0.6);">16,500 SC</td>
-                        <td class="py-3 px-6">Dragon's Hoard</td>
-                        <td class="py-3 px-6 text-gray-400">1 hr ago</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </section>
-
-    <!-- Live Win Feed -->
-    <section class="py-6 px-4 max-w-6xl mx-auto">
-        <div class="relative overflow-hidden">
-            <div class="bg-black/20 p-3 rounded-md flex items-center space-x-3 text-sm glow-gold blink-animation">
-                <i class="fas fa-fire glow-gold"></i>
-                <div class="overflow-hidden h-6">
-                    <div id="liveFeed" class="transform transition-transform duration-500"></div>
+        </section>
+        
+        <!-- SECTION 3: COUNTDOWN TIMER -->
+        <section class="mb-16">
+            <div class="glass-card max-w-md mx-auto p-6 relative overflow-hidden">
+                <div class="absolute -top-4 -right-4 w-8 h-8 rounded-full bg-gold opacity-20 blur-md"></div>
+                <div class="absolute -bottom-4 -left-4 w-10 h-10 rounded-full bg-gold opacity-20 blur-md"></div>
+                
+                <div class="text-center">
+                    <div class="text-gray-300 mb-4">Next Jackpot Drops In:</div>
+                    <div class="flex justify-center items-center space-x-2 mb-4">
+                        <div class="countdown-digit bg-gray-900 rounded-lg py-2 px-4 text-3xl">01</div>
+                        <div class="text-gold text-xl">:</div>
+                        <div class="countdown-digit bg-gray-900 rounded-lg py-2 px-4 text-3xl">23</div>
+                        <div class="text-gold text-xl">:</div>
+                        <div class="countdown-digit bg-gray-900 rounded-lg py-2 px-4 text-3xl">52</div>
+                    </div>
+                    <div class="text-sm text-gray-400">
+                        Jackpot drops every 6 hours or when pot cap is hit.
+                    </div>
                 </div>
             </div>
-        </div>
-    </section>
-
-    <!-- Jackpot Stats -->
-    <section class="py-10 px-4 max-w-4xl mx-auto">
-        <div class="flex flex-wrap justify-center gap-6">
-            <div class="flex items-center gap-3 py-2 px-4 bg-gradient-to-r from-gray-800/30 to-gray-900/30 rounded-lg drop-shadow-lg">
-                <i class="fas fa-spinner text-xl glow-gold"></i>
-                <div>
-                    <p class="text-xs">Spins Today</p>
-                    <p class="text-lg font-bold glow-gold">182,390</p>
+        </section>
+        
+        <!-- SECTION 4: JACKPOT TIERS -->
+        <section class="mb-16">
+            <h2 class="text-2xl font-bold text-center mb-8 text-gold">Jackpot Tiers</h2>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl mx-auto">
+                <div class="text-center">
+                    <div class="tier-icon mx-auto mb-4 text-5xl text-gold">
+                        <i class="fas fa-medal"></i>
+                    </div>
+                    <h3 class="font-bold text-xl text-gold mb-2">Mini</h3>
+                    <div class="text-lg">500–1,999 SC</div>
+                    <div class="text-sm text-gray-400 mt-2">Frequent smaller wins</div>
+                </div>
+                
+                <div class="text-center">
+                    <div class="tier-icon mx-auto mb-4 text-5xl text-neon-orange">
+                        <i class="fas fa-star"></i>
+                    </div>
+                    <h3 class="font-bold text-xl text-neon-orange mb-2">Mega</h3>
+                    <div class="text-lg">2,000–9,999 SC</div>
+                    <div class="text-sm text-gray-400 mt-2">Life-changing amounts</div>
+                </div>
+                
+                <div class="text-center">
+                    <div class="tier-icon mx-auto mb-4 text-5xl text-red-500">
+                        <i class="fas fa-crown"></i>
+                    </div>
+                    <h3 class="font-bold text-xl text-red-400 mb-2">Legendary</h3>
+                    <div class="text-lg">10,000+ SC</div>
+                    <div class="text-sm text-gray-400 mt-2">Ultimate jackpot prizes</div>
                 </div>
             </div>
-            
-            <div class="flex items-center gap-3 py-2 px-4 bg-gradient-to-r from-gray-800/30 to-gray-900/30 rounded-lg drop-shadow-lg">
-                <i class="fas fa-users text-xl glow-orange"></i>
-                <div>
-                    <p class="text-xs">Players in Jackpot Mode</p>
-                    <p class="text-lg font-bold glow-orange">982</p>
+        </section>
+        
+        <!-- SECTION 5: RECENT WINNERS TABLE -->
+        <section class="mb-12">
+            <div class="glass-card p-6">
+                <h2 class="text-2xl font-bold mb-6 text-gold text-center">Recent Nioplay Jackpot Winners</h2>
+                <div class="overflow-x-auto">
+                    <table class="w-full">
+                        <thead>
+                            <tr class="border-b border-gray-700">
+                                <th class="py-3 text-left text-gold">Username</th>
+                                <th class="py-3 text-left text-gold">Prize</th>
+                                <th class="py-3 text-left text-gold">Game</th>
+                                <th class="py-3 text-left text-gold">Date</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr class="winner-row border-b border-gray-800 hover:border-gold">
+                                <td class="py-3"><i class="fas fa-crown text-gold mr-2"></i>LuckyDice88</td>
+                                <td class="text-gold font-bold">12,450 SC</td>
+                                <td>Diamond Slots</td>
+                                <td>Today 14:32</td>
+                            </tr>
+                            <tr class="winner-row border-b border-gray-800 hover:border-gold">
+                                <td class="py-3"><i class="fas fa-crown text-gold mr-2"></i>GoldRush99</td>
+                                <td class="text-gold font-bold">8,120 SC</td>
+                                <td>Fortune Wheel</td>
+                                <td>Today 12:15</td>
+                            </tr>
+                            <tr class="winner-row new-winner border-b border-gray-800 hover:border-gold">
+                                <td class="py-3"><i class="fas fa-crown text-gold mr-2"></i>SpinMaster</td>
+                                <td class="text-gold font-bold">5,670 SC</td>
+                                <td>Pharaoh's Gold</td>
+                                <td>Today 11:48</td>
+                            </tr>
+                            <tr class="winner-row border-b border-gray-800 hover:border-gold">
+                                <td class="py-3"><i class="fas fa-crown text-gold mr-2"></i>CasinoKing</td>
+                                <td class="text-gold font-bold">3,210 SC</td>
+                                <td>Blackjack Pro</td>
+                                <td>Today 10:22</td>
+                            </tr>
+                            <tr class="winner-row">
+                                <td class="py-3"><i class="fas fa-crown text-gold mr-2"></i>SlotQueen</td>
+                                <td class="text-gold font-bold">1,980 SC</td>
+                                <td>Jungle Jackpot</td>
+                                <td>Today 09:45</td>
+                            </tr>
+                        </tbody>
+                    </table>
                 </div>
             </div>
-            
-            <div class="flex items-center gap-3 py-2 px-4 bg-gradient-to-r from-gray-800/30 to-gray-900/30 rounded-lg drop-shadow-lg">
-                <i class="fas fa-trophy text-xl" style="color: #ff5555; text-shadow: 0 0 8px rgba(255,85,85,0.6);"></i>
-                <div>
-                    <p class="text-xs">Biggest Jackpot Ever</p>
-                    <p class="text-lg font-bold" style="color: #ff5555; text-shadow: 0 0 8px rgba(255,85,85,0.6);">41,200 SC</p>
+        </section>
+        
+        <!-- SECTION 6: LIVE WIN FEED -->
+        <section class="mb-16">
+            <div class="win-feed py-3 px-4 bg-black bg-opacity-50 rounded-lg overflow-hidden">
+                <div class="win-item text-gold">
+                    <span class="mr-2">🎉</span> LuckyRoller88 won 4,200 SC on Super Panda!
+                </div>
+                <div class="win-item text-gold">
+                    <span class="mr-2">🎉</span> DiceMaster won 2,150 SC on Royal Dice!
+                </div>
+                <div class="win-item text-gold">
+                    <span class="mr-2">🎉</span> SlotPro won 7,800 SC on Diamond Mine!
                 </div>
             </div>
-        </div>
-    </section>
-
-    <!-- Top Contributors -->
-    <section class="py-8 px-4 max-w-4xl mx-auto">
-        <h2 class="text-xl font-semibold text-center mb-6 glow-gold font-orbitron">TOP CONTRIBUTORS</h2>
-        <div class="space-y-2">
-            <div class="flex justify-between items-center py-3 px-6 bg-black/20 rounded-lg glow-row">
-                <div class="flex items-center gap-3">
-                    <span>🥇</span>
-                    <span>BigWinner777</span>
+        </section>
+        
+        <!-- SECTION 7: JACKPOT STATS -->
+        <section class="mb-16">
+            <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 max-w-4xl mx-auto">
+                <div class="stat-badge flex items-center p-4 rounded-lg">
+                    <div class="w-12 h-12 rounded-full bg-gray-900 flex items-center justify-center mr-4">
+                        <i class="fas fa-sync-alt text-xl text-gold"></i>
+                    </div>
+                    <div>
+                        <div class="text-2xl font-bold text-gold">182,390</div>
+                        <div class="text-sm text-gray-400">Spins Today</div>
+                    </div>
+                </div>
+                
+                <div class="stat-badge flex items-center p-4 rounded-lg">
+                    <div class="w-12 h-12 rounded-full bg-gray-900 flex items-center justify-center mr-4">
+                        <i class="fas fa-users text-xl text-gold"></i>
+                    </div>
+                    <div>
+                        <div class="text-2xl font-bold text-gold">982</div>
+                        <div class="text-sm text-gray-400">Players in Jackpot Mode</div>
+                    </div>
+                </div>
+                
+                <div class="stat-badge flex items-center p-4 rounded-lg">
+                    <div class="w-12 h-12 rounded-full bg-gray-900 flex items-center justify-center mr-4">
+                        <i class="fas fa-trophy text-xl text-gold"></i>
+                    </div>
+                    <div>
+                        <div class="text-2xl font-bold text-gold">41,200 SC</div>
+                        <div class="text-sm text-gray-400">Biggest Jackpot Ever</div>
+                    </div>
                 </div>
-                <span class="font-bold glow-gold">5,230 SC</span>
             </div>
-            
-            <div class="flex justify-between items-center py-3 px-6 bg-black/20 rounded-lg glow-row">
-                <div class="flex items-center gap-3">
-                    <span>🥈</span>
-                    <span>CasinoRoyale</span>
+        </section>
+        
+        <!-- SECTION 8: TOP CONTRIBUTORS -->
+        <section class="mb-16">
+            <h2 class="text-2xl font-bold text-center mb-6 text-gold">Top Contributors</h2>
+            <div class="max-w-2xl mx-auto">
+                <div class="flex justify-between items-center py-3 border-b border-gray-800">
+                    <div class="flex items-center">
+                        <span class="text-2xl mr-3">🥇</span>
+                        <div class="w-8 h-8 rounded-full bg-gray-700 mr-3"></div>
+                        <span>HighRollerX</span>
+                    </div>
+                    <div class="text-gold font-bold">8,250 SC</div>
+                </div>
+                <div class="flex justify-between items-center py-3 border-b border-gray-800">
+                    <div class="flex items-center">
+                        <span class="text-2xl mr-3">🥈</span>
+                        <div class="w-8 h-8 rounded-full bg-gray-700 mr-3"></div>
+                        <span>DiceMasterPro</span>
+                    </div>
+                    <div class="text-gold font-bold">6,890 SC</div>
+                </div>
+                <div class="flex justify-between items-center py-3 border-b border-gray-800">
+                    <div class="flex items-center">
+                        <span class="text-2xl mr-3">🥉</span>
+                        <div class="w-8 h-8 rounded-full bg-gray-700 mr-3"></div>
+                        <span>SlotQueen</span>
+                    </div>
+                    <div class="text-gold font-bold">5,420 SC</div>
+                </div>
+                <div class="flex justify-between items-center py-3">
+                    <div class="flex items-center pl-10">
+                        <div class="w-8 h-8 rounded-full bg-gray-700 mr-3"></div>
+                        <span>GoldDigger99</span>
+                    </div>
+                    <div class="text-gold font-bold">4,830 SC</div>
                 </div>
-                <span class="font-bold glow-gold">4,890 SC</span>
             </div>
-            
-            <div class="flex justify-between items-center py-3 px-6 bg-black/20 rounded-lg glow-row">
-                <div class="flex items-center gap-3">
-                    <span>🥉</span>
-                    <span>SlotMaster</span>
+        </section>
+        
+        <!-- SECTION 9: TERMS COLLAPSE -->
+        <section class="max-w-3xl mx-auto">
+            <div class="border-t border-gray-800 pt-6">
+                <div class="cursor-pointer flex justify-between items-center">
+                    <h2 class="text-xl font-bold text-gold">Nioplay Jackpot Terms & Details</h2>
+                    <i class="fas fa-chevron-down text-gold"></i>
+                </div>
+                <div class="mt-4 text-gray-300 hidden">
+                    <p class="mb-3">• Jackpot Mode must be enabled to participate in jackpot draws.</p>
+                    <p class="mb-3">• Each spin contributes 0.05 SC to the jackpot pool.</p>
+                    <p class="mb-3">• Jackpots are awarded every 6 hours or when the pool cap is reached.</p>
+                    <p class="mb-3">• Winners are selected randomly from all eligible spins during the jackpot period.</p>
+                    <p class="mb-3">• Prizes are distributed within 24 hours of winning.</p>
+                    <p class="mb-3">• Players must have completed KYC verification to claim prizes over 5,000 SC.</p>
+                    <p>• Nioplay reserves the right to modify or cancel the jackpot promotion at any time.</p>
                 </div>
-                <span class="font-bold glow-gold">3,750 SC</span>
             </div>
-        </div>
-    </section>
+        </section>
+    </div>
 
-    <!-- Terms Collapse -->
-    <section class="py-8 px-4 max-w-3xl mx-auto">
-        <div class="border-t border-gray-700/50 pt-6">
-            <div class="cursor-pointer group">
-                <h3 class="text-lg font-semibold flex items-center gap-2 glow-gold">
-                    Nioplay Jackpot Terms & Details
-                    <i class="fas fa-chevron-down text-sm transform transition-transform group-focus:rotate-180"></i>
-                </h3>
-            </div>
-            <div class="mt-4 text-sm text-gray-300 space-y-2">
-                <p>The Nioplay Jackpot contributes 0.05 SC to the pool from every eligible spin while in Jackpot Mode. Prize tiers are determined by accumulated amounts and awarded randomly throughout the day.</p>
-                <p>Games contributing: All slot machines, roulette (spins only), and select table games. Terms and conditions apply.</p>
-            </div>
-        </div>
-    </section>
+    <footer class="text-center text-gray-500 text-sm mt-16">
+        © 2023 Nioplay Casino. All rights reserved. Gambling can be addictive. Play responsibly.
+    </footer>
 
     <script>
-        // Jackpot counter animation
-        let jackpot = 3198392.30;
-        let jackpotIncrement = 0;
-        
-        function updateJackpotCounter() {
-            jackpotIncrement += Math.random() * 50;
-            const incrementFactor = 1 + (Math.random() * 0.0003);
-            jackpot *= incrementFactor;
-            
-            const displayValue = (jackpot + jackpotIncrement).toFixed(2);
-            document.getElementById('jackpotCounter').innerText = 
-                parseInt(displayValue).toLocaleString() + '.' + displayValue.split('.')[1];
-                
-            setTimeout(updateJackpotCounter, 2000);
-        }
-        
-        // Live win feed updates
-        const winMessages = [
-            "🎉 LuckyRoller88 won 4,200 SC on Super Panda!",
-            "🚀 JackpotJester scored 1,830 SC on Cosmic Fortune!",
-            "💰 CasinoQueen hit 3,450 SC on Diamond Jacks!",
-            "💫 SlotMaster just won 8,920 SC on Pharaoh's Gold!",
-            "🎰 RouletteRoyale landed 5,340 SC on European Roulette!"
-        ];
-        
-        function updateLiveFeed() {
-            const liveFeed = document.getElementById('liveFeed');
-            const index = Math.floor(Math.random() * winMessages.length);
-            liveFeed.innerHTML = winMessages[index];
-            liveFeed.classList.add('transition-transform');
+        // Initialize animations and interactions
+        document.addEventListener('DOMContentLoaded', function() {
+            // Terms collapse toggle
+            const termsToggle = document.querySelector('section:last-of-type > div');
+            const termsContent = termsToggle.querySelector('.hidden');
             
-            setTimeout(() => {
-                liveFeed.classList.remove('transition-transform');
-                liveFeed.style.transform = 'translateY(0)';
-            }, 100);
+            termsToggle.addEventListener('click', function() {
+                termsContent.classList.toggle('hidden');
+                const icon = termsToggle.querySelector('i');
+                icon.classList.toggle('fa-chevron-down');
+                icon.classList.toggle('fa-chevron-up');
+            });
             
-            setTimeout(updateLiveFeed, 5000);
-        }
-        
-        // Initialize all animations
-        document.addEventListener('DOMContentLoaded', function() {
-            updateJackpotCounter();
-            updateLiveFeed();
+            // Simulate new winner animation
+            setInterval(function() {
+                const rows = document.querySelectorAll('.winner-row');
+                const randomRow = Math.floor(Math.random() * rows.length);
+                
+                rows[randomRow].classList.add('new-winner');
+                setTimeout(() => {
+                    rows[randomRow].classList.remove('new-winner');
+                }, 3000);
+                
+            }, 15000);
         });
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ProjectGenesis/jackpot-ui" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>