Design a production-ready Wallet Page for a neon-casino theme. Use Nioplay’s established system:

- Background: radial gradient (black → warm dark orange/brown).
- Glassmorphism cards (transparent, frosted, subtle noise), limited so layout breathes.
- Neon accents: orange #FF6A00, blue #00E4FF. Fonts: Orbitron (headings), Poppins (body).
- Modern pill buttons with seamless border-trail animation (continuous loop, no visible reset).
- Clean grid, large readable numbers, dense tooltips.

DO NOT implement any wallet math or API logic. Values are placeholders. Focus on layout, states, and components.

GLOBAL STYLE TOKENS:
- Background: radial-gradient(circle at center, #0a0a0a 0%, #1a0d00 40%, #2e1300 70%, #000000 100%)
- Text: #F5F5F5 primary, #B8B8B8 secondary
- Accent: Neon Orange #FF6A00, Neon Blue #00E4FF, Success #3CE27A, Warning #FEC84B, Danger #FF4D4D
- Glass card: rgba(255,255,255,0.05) bg, 1px border rgba(255,255,255,0.12), backdrop-blur(10–14px), rounded-2xl, shadow-xl
- Icon style: thin line + soft glow
- Progress bar: inner glow, smooth 0.6s ease, rounded-full

LAYOUT HIERARCHY:

(1) PAGE HEADER (full-width, glass card)
- Title: “Wallet”
- Sub: “Track balances, playthrough progress, and redeemables.”
- Right side: 2 CTA pills:
- [Deposit SC] (primary, neon orange, border-trail)
- [Withdraw] (secondary, neon blue, border-trail)
- Small links under CTAs: “Payment Methods”, “Withdrawal Policy”, “KYC Status”

(2) BALANCE OVERVIEW (4-card grid, responsive 1×4 → 2×2 on tablet → 1×4 scroll on mobile)
Card A — Purchase SC (1×)
- Label chip: “1× Playthrough”
- Big number: {{purchase_sc}}
- Mini stat: “Required: {{purchase_required}} | Progress: {{purchase_progress_pct}}%”
- Tiny info icon (hover): “Purchase SC requires 1× wagering before withdrawal.”

Card B — Bonus SC (5×)
- Label chip: “5× Playthrough”
- Big number: {{bonus_sc}}
- Mini stat: “Required: {{bonus_required}} | Progress: {{bonus_progress_pct}}%”
- Info hover: “Bonus SC requires 5× wagering. Table & live games may count less.”

Card C — Withdrawable SC (WSC)
- Label chip: “Redeemable Now”
- Big number: {{wsc}}
- Subtext: “Ready to withdraw.”

Card D — Gold Coins (GC)
- Label chip: “Gold Coins”
- Big number: {{gc}}
- Subtext: “For fun play.”

(3) PLAYTHROUGH PROGRESS (two half-width glass cards side-by-side; stack on mobile)

Left Card — Playthrough Bars
Section title: “Playthrough Progress”
- Row 1: Purchase SC (1×)
• Bar with endpoints: 0 → {{purchase_required}}
• Inline numbers: “{{purchase_wagered}} / {{purchase_required}}” and “{{purchase_progress_pct}}%”
• Color: gradient from #FF6A00 → #3CE27A near completion
- Divider
- Row 2: Bonus SC (5×)
• Bar with endpoints: 0 → {{bonus_required}}
• Inline: “{{bonus_wagered}} / {{bonus_required}}” and “{{bonus_progress_pct}}%”
• Color: gradient #00E4FF → #FF6A00

Right Card — Game Contribution Weights (collapsible)
Title row: “How your wagers count”
List with icons + weights:
• Slots — 100%
• Instant Win — 75%
• RNG Table — 25%
• Live Casino — 10%
Footnote text: “Weights affect progress only, not redemption math.”
(Add “ⓘ” tooltips explaining examples: “$100 on Live Casino → $10 progress.”)

(4) REDEEMABLES & ACTIONS (full-width glass card)
- Title: “Redeemable Amounts”
- Two numeric tiles:
• Redeemable Purchase SC (WSC): {{redeemable_wsc}}
• Redeemable Bonus SC: {{redeemable_bonus_sc}}
- Helper text: “Bonus SC becomes redeemable as you clear its playthrough.”
- Action buttons:
[Withdraw to Wallet] [Convert to WSC] [View Withdrawal History]
- Small alert banners (optional states):
• Warning if KYC incomplete.
• Info if withdrawal limit per day reached.
- Microcopy under buttons: “Processing time: 24–48h after KYC.”

(5) TRANSACTION HISTORY (glass card, full width)
- Tabs: All | Deposits | Withdrawals | Bonuses | Wagers | Adjustments
- Filters: Date range picker; Amount min/max; Status
- Table columns:
Date/Time | Type | Description | Amount | Balance Type (SC/GC/BSC/WSC) | Status | Ref ID
- Empty state with illustration + “No transactions yet. Top up your wallet to get started.”
- Button: [Export CSV] (ghost)

(6) STORE & PROMOS STRIP (two cards)
Left: “Buy Packages”
- Featured package tiles with price, bonus badge, “Best Value” tag.
- CTA: [Go to Store]

Right: “Active Bonuses & Codes”
- List of active promo balances with expiry timers and progress bars.
- Input: “Have a code?” [Apply]

(7) VIP & JACKPOT TIE-INS (two mini cards)
- VIP Snapshot: “This month wagered: {{monthly_wagered}} → VIP +{{vip_progress_pct}}%”
- Jackpot Contribution: “You’ve contributed {{jackpot_contrib}} to the pool.” Link: [View Jackpots]

(8) SECURITY & SETTINGS (accordion list)
- Payment Methods (cards on file)
- Set Withdrawal PIN
- KYC / Verification status + steps
- Notification preferences (wallet alerts)
- Responsible play links

(9) CONTEXTUAL TOOLTIP COPY (use exactly as hover content)
- “Playthrough Requirement”: “The total amount you must wager before funds are withdrawable.”
- “Contribution Weights”: “Different games count differently toward playthrough.”
- “WSC”: “Withdrawable Sweepstakes Coins you can cash out.”
- “Bonus SC”: “Promotional coins with 5× playthrough.”
- “Purchase SC”: “Coins bought by you; 1× playthrough.”

COMPONENT/ID MAP (for dev handoff & future binding)
- #btn-deposit, #btn-withdraw, #btn-convert
- #card-purchase-sc, #card-bonus-sc, #card-wsc, #card-gc
- #bar-purchase, #bar-bonus
- #redeemable-wsc, #redeemable-bonus
- #tx-table, #tx-filter, #tx-export
- #store-card, #promos-card
- #vip-card, #jackpot-card
- #security-accordion

ANIMATIONS (exact instructions)
- Button border-trail (continuous, no pause):
• Create an absolutely positioned gradient border layer that animates background-position from 0%→100% with linear infinite 2.5s.
• Use mask-composite to reveal only the 2px border.
• Ensure animation loops seamlessly by using a repeating conic or linear-gradient with matching start/end colors (avoid hard stops).
- Progress bars:
• Animate width from previous value to new value with 600ms ease; add subtle outer glow.
- Hover:
• Cards lift 4px, border alpha +0.08, glow of accent color.

RESPONSIVE RULES
- ≥1280px: 12-col grid; Overview (4 cols each), Progress (6/6), History full-width.
- 1024–1279: 12-col; Overview 6/6; Progress stack.
- <1024: Stack everything; sticky subheader with [Deposit], [Withdraw].

ACCESSIBILITY
- Min text 14px body, 18–22px numbers; 28–36px for big balances.
- Focus rings visible (accent blue).
- Tooltips accessible on keyboard (aria-describedby).
- Color contrast ≥ 4.5:1 for body.

PLACEHOLDER DATA (bind these to numbers for mock):
{
"purchase_sc": "18.74",
"purchase_required": "18.74",
"purchase_wagered": "12.10",
"purchase_progress_pct": "64.5",
"bonus_sc": "0.30",
"bonus_required": "1.50",
"bonus_wagered": "0.00",
"bonus_progress_pct": "0.0",
"wsc": "6.64",
"gc": "3,500",
"redeemable_wsc": "6.64",
"redeemable_bonus_sc": "0.00",
"monthly_wagered": "420.00",
"vip_progress_pct": "12",
"jackpot_contrib": "8.40"
}

VISUAL NOTES
- Purchase SC chip is orange outline with “1×”.
- Bonus SC chip is blue outline with “5×”.
- “Total Redeemable Now” should be visually emphasized near the top (mirrors WSC).
- Keep white space; limit glass cards to these sections to avoid clutter.

DELIVERABLES
- One responsive page with all sections above.
- Include a style block (or component CSS) for the seamless border-trail button and progress bars.
- Provide semantic HTML structure ready for data-binding.
- No external logic; values populated from placeholders. - Initial Deployment

README.md

@@ -1,10 +1,12 @@
 ---
-title: Ui 2
-emoji: 📈
-colorFrom: gray
-colorTo: green
+title: ui-2
+emoji: 🐳
+colorFrom: green
+colorTo: red
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html

@@ -1,19 +1,769 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Neon Wallet - Nioplay</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+    
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        'neon-orange': '#FF6A00',
+                        'neon-blue': '#00E4FF',
+                        'neon-success': '#3CE27A',
+                        'neon-warning': '#FEC84B',
+                        'neon-danger': '#FF4D4D',
+                        'glass-bg': 'rgba(255,255,255,0.05)',
+                        'glass-border': 'rgba(255,255,255,0.12)',
+                        'secondary-text': '#B8B8B8'
+                    },
+                    backgroundImage: {
+                        'global': 'radial-gradient(circle at center, #0a0a0a 0%, #1a0d00 40%, #2e1300 70%, #000000 100%)'
+                    },
+                    fontFamily: {
+                        'orbitron': ['Orbitron', 'sans-serif'],
+                        'poppins': ['Poppins', 'sans-serif']
+                    },
+                    backdropBlur: {
+                        'sm': '10px',
+                        'md': '14px'
+                    },
+                    boxShadow: {
+                        'glass': '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
+                        'glow-orange': '0 0 10px rgba(255, 106, 0, 0.5)',
+                        'glow-blue': '0 0 10px rgba(0, 228, 255, 0.5)'
+                    }
+                }
+            }
+        }
+    </script>
+    <style type="text/css">
+        body {
+            background-image: radial-gradient(circle at center, #0a0a0a 0%, #1a0d00 40%, #2e1300 70%, #000000 100%);
+            color: #F5F5F5;
+            font-family: 'Poppins', sans-serif;
+            min-height: 100vh;
+        }
+        
+        h1, h2, h3, h4, h5 {
+            font-family: 'Orbitron', sans-serif;
+            letter-spacing: 0.025em;
+        }
+        
+        .glass-card {
+            background: rgba(255,255,255,0.05);
+            border: 1px solid rgba(255,255,255,0.12);
+            backdrop-filter: blur(14px);
+            border-radius: 1rem;
+            box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
+            overflow: hidden;
+            position: relative;
+        }
+        
+        .glass-card::before {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
+            z-index: -1;
+            opacity: 0.5;
+        }
+        
+        .glass-card:hover {
+            border-color: rgba(255,255,255,0.2);
+            transform: translateY(-3px);
+            transition: all 0.2s ease-out;
+        }
+        
+        .btn-trail {
+            position: relative;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            padding: 0.75rem 1.5rem;
+            border-radius: 9999px;
+            font-weight: 600;
+            font-size: 0.9rem;
+            text-align: center;
+            overflow: hidden;
+            z-index: 1;
+        }
+        
+        .btn-trail::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 200%;
+            height: 100%;
+            background: linear-gradient(
+                115deg,
+                transparent,
+                rgba(255, 106, 0, 0.5),
+                #FF6A00,
+                rgba(255, 106, 0, 0.5),
+                transparent
+            );
+            background-size: 50% 100%;
+            animation: borderTrail 2.5s linear infinite;
+            z-index: -1;
+        }
+        
+        .btn-orange-trail::before {
+            background: linear-gradient(
+                115deg,
+                transparent,
+                rgba(255, 106, 0, 0.5),
+                #FF6A00,
+                rgba(255, 106, 0, 0.5),
+                transparent
+            );
+        }
+        
+        .btn-blue-trail::before {
+            background: linear-gradient(
+                115deg,
+                transparent,
+                rgba(0, 228, 255, 0.5),
+                #00E4FF,
+                rgba(0, 228, 255, 0.5),
+                transparent
+            );
+        }
+        
+        .btn-trail span {
+            position: relative;
+            z-index: 2;
+            background: radial-gradient(circle at center, #0a0a0a 0%, #1a0d00 40%, #2e1300 70%, #000000 100%);
+            padding: 0.5rem 1.25rem;
+            border-radius: 9999px;
+            width: calc(100% - 4px);
+            height: calc(100% - 4px);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        @keyframes borderTrail {
+            0% { transform: translateX(-100%); }
+            100% { transform: translateX(100%); }
+        }
+        
+        .big-number {
+            font-size: 2rem;
+            font-weight: 700;
+            font-family: 'Orbitron', sans-serif;
+            letter-spacing: 0.025em;
+            text-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
+        }
+        
+        .chip-label {
+            border-radius: 9999px;
+            border-width: 1px;
+            padding: 0.25rem 0.75rem;
+            font-size: 0.75rem;
+            font-weight: 500;
+        }
+        
+        .progress-track {
+            height: 12px;
+            background: rgba(255,255,255,0.1);
+            border-radius: 9999px;
+            overflow: hidden;
+        }
+        
+        .progress-bar {
+            height: 100%;
+            border-radius: 9999px;
+            transition: width 0.6s ease;
+            position: relative;
+        }
+        
+        .progress-bar::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            box-shadow: inset 0 0 8px rgba(255,255,255,0.5);
+            border-radius: 9999px;
+        }
+        
+        .tooltip-container {
+            position: relative;
+            display: inline-flex;
+            margin-left: 0.25rem;
+        }
+        
+        .tooltip {
+            visibility: hidden;
+            width: 200px;
+            background: rgba(10,10,10,0.95);
+            color: #F5F5F5;
+            border: 1px solid rgba(255,255,255,0.15);
+            padding: 12px;
+            border-radius: 8px;
+            position: absolute;
+            bottom: 125%;
+            left: 50%;
+            transform: translateX(-50%);
+            opacity: 0;
+            transition: opacity 0.3s;
+            font-size: 0.85rem;
+            font-weight: 400;
+            z-index: 10;
+            backdrop-filter: blur(4px);
+        }
+        
+        .tooltip-container:hover .tooltip {
+            visibility: visible;
+            opacity: 1;
+        }
+        
+        @media (min-width: 768px) {
+            .overview-grid {
+                grid-template-columns: repeat(2, minmax(0, 1fr));
+            }
+        }
+        
+        @media (min-width: 1024px) {
+            .overview-grid {
+                grid-template-columns: repeat(4, minmax(0, 1fr));
+            }
+            
+            .progress-grid {
+                grid-template-columns: repeat(2, minmax(0, 1fr));
+            }
+        }
+        
+        @media (max-width: 640px) {
+            .overview-grid {
+                grid-template-columns: repeat(1, minmax(0, 1fr));
+                overflow-x: auto;
+            }
+            
+            .big-number {
+                font-size: 1.75rem;
+            }
+        }
+        
+        .accordion-content {
+            max-height: 0;
+            overflow: hidden;
+            transition: max-height 0.2s ease-out;
+        }
+        
+        input:focus, button:focus {
+            outline: 2px solid #00E4FF;
+            outline-offset: 2px;
+        }
+    </style>
+</head>
+<body class="min-h-screen flex flex-col bg-cover">
+    <div class="container mx-auto px-4 py-8">
+        <!-- HEADER -->
+        <header class="glass-card mb-8 py-4 px-6" data-aos="fade-down">
+            <div class="flex flex-col md:flex-row md:items-center md:justify-between">
+                <div>
+                    <h1 class="text-2xl md:text-3xl font-bold text-white">Wallet</h1>
+                    <p class="text-sm text-secondary-text mt-1">Track balances, playthrough progress, and redeemables.</p>
+                </div>
+                
+                <div class="mt-4 md:mt-0">
+                    <div class="flex gap-3">
+                        <button id="btn-deposit" class="btn-trail btn-orange-trail">
+                            <span>Deposit SC</span>
+                        </button>
+                        <button id="btn-withdraw" class="btn-trail btn-blue-trail">
+                            <span>Withdraw</span>
+                        </button>
+                    </div>
+                    <div class="flex gap-3 mt-2 justify-center md:justify-end">
+                        <a href="#" class="text-xs text-secondary-text hover:text-neon-blue">Payment Methods</a>
+                        <a href="#" class="text-xs text-secondary-text hover:text-neon-blue">Withdrawal Policy</a>
+                        <a href="#" class="text-xs text-secondary-text hover:text-neon-blue">KYC Status</a>
+                    </div>
+                </div>
+            </div>
+        </header>
+        
+        <!-- BALANCE OVERVIEW -->
+        <section class="mb-8">
+            <div class="overview-grid grid gap-4">
+                <!-- Purchase SC Card -->
+                <div id="card-purchase-sc" class="glass-card p-5" data-aos="fade-right">
+                    <div class="flex justify-between">
+                        <div class="flex items-center gap-1 mb-2">
+                            <div class="chip-label border-neon-orange text-neon-orange">
+                                1×
+                            </div>
+                            <p class="text-sm font-semibold">Purchase SC</p>
+                        </div>
+                        <div class="tooltip-container">
+                            <i data-feather="info" class="w-4 h-4 text-secondary-text"></i>
+                            <div class="tooltip">Purchase SC requires 1× wagering before withdrawal.</div>
+                        </div>
+                    </div>
+                    <p class="big-number text-white">18.74</p>
+                    <p class="text-xs text-secondary-text mt-2">Required: 18.74 | Progress: 64.5%</p>
+                </div>
+                
+                <!-- Bonus SC Card -->
+                <div id="card-bonus-sc" class="glass-card p-5" data-aos="fade-right" data-aos-delay="50">
+                    <div class="flex justify-between">
+                        <div class="flex items-center gap-1 mb-2">
+                            <div class="chip-label border-neon-blue text-neon-blue">
+                                5×
+                            </div>
+                            <p class="text-sm font-semibold">Bonus SC</p>
+                        </div>
+                        <div class="tooltip-container">
+                            <i data-feather="info" class="w-4 h-4 text-secondary-text"></i>
+                            <div class="tooltip">Bonus SC requires 5× wagering. Table & live games may count less.</div>
+                        </div>
+                    </div>
+                    <p class="big-number text-white">0.30</p>
+                    <p class="text-xs text-secondary-text mt-2">Required: 1.50 | Progress: 0.0%</p>
+                </div>
+                
+                <!-- WSC Card -->
+                <div id="card-wsc" class="glass-card p-5" data-aos="fade-right" data-aos-delay="100">
+                    <div class="flex justify-between">
+                        <div class="flex items-center gap-1 mb-2">
+                            <div class="chip-label border-neon-success text-neon-success">
+                                Redeemable Now
+                            </div>
+                            <p class="text-sm font-semibold">Withdrawable SC</p>
+                        </div>
+                        <div class="tooltip-container">
+                            <i data-feather="info" class="w-4 h-4 text-secondary-text"></i>
+                            <div class="tooltip">Withdrawable Sweepstakes Coins you can cash out.</div>
+                        </div>
+                    </div>
+                    <p class="big-number text-white">6.64</p>
+                    <p class="text-sm text-secondary-text mt-1">Ready to withdraw.</p>
+                </div>
+                
+                <!-- GC Card -->
+                <div id="card-gc" class="glass-card p-5" data-aos="fade-right" data-aos-delay="150">
+                    <div class="flex justify-between">
+                        <div class="flex items-center gap-1 mb-2">
+                            <div class="chip-label border-secondary-text text-secondary-text">
+                                Gold Coins
+                            </div>
+                            <p class="text-sm font-semibold">Gold Coins</p>
+                        </div>
+                        <div class="tooltip-container">
+                            <i data-feather="info" class="w-4 h-4 text-secondary-text"></i>
+                            <div class="tooltip">For fun play only, no cash value.</div>
+                        </div>
+                    </div>
+                    <p class="big-number text-white">3,500</p>
+                    <p class="text-sm text-secondary-text mt-1">For fun play.</p>
+                </div>
+            </div>
+        </section>
+        
+        <!-- PLAYTHROUGH PROGRESS -->
+        <section class="mb-8">
+            <div class="progress-grid grid gap-6">
+                <div id="bar-purchase" class="glass-card p-5" data-aos="fade-up">
+                    <h3 class="text-lg font-semibold mb-4">Playthrough Progress</h3>
+                    
+                    <div class="mb-5">
+                        <div class="flex justify-between text-sm mb-2">
+                            <div>
+                                <span class="text-secondary-text">Purchase SC (1×)</span>
+                                <span class="text-white ml-1">64.5%</span>
+                            </div>
+                            <div class="flex gap-1">
+                                <span class="text-secondary-text">12.10 /</span>
+                                <span>18.74</span>
+                            </div>
+                        </div>
+                        <div class="progress-track">
+                            <div class="progress-bar" style="width: 64.5%; background: linear-gradient(to right, #FF6A00, #3CE27A);"></div>
+                        </div>
+                        <div class="flex justify-between text-xs mt-1">
+                            <span>0</span>
+                            <span>Required: 18.74</span>
+                        </div>
+                    </div>
+                    
+                    <div class="pt-2 border-t border-white/10"></div>
+                    
+                    <div class="mt-5">
+                        <div class="flex justify-between text-sm mb-2">
+                            <div>
+                                <span class="text-secondary-text">Bonus SC (5×)</span>
+                                <span class="text-white ml-1">0.0%</span>
+                            </div>
+                            <div class="flex gap-1">
+                                <span class="text-secondary-text">0.00 /</span>
+                                <span>1.50</span>
+                            </div>
+                        </div>
+                        <div class="progress-track">
+                            <div class="progress-bar" style="width: 0%; background: linear-gradient(to right, #00E4FF, #FF6A00);"></div>
+                        </div>
+                        <div class="flex justify-between text-xs mt-1">
+                            <span>0</span>
+                            <span>Required: 1.50</span>
+                        </div>
+                    </div>
+                </div>
+                
+                <div id="game-weights" class="glass-card p-5" data-aos="fade-up" data-aos-delay="50">
+                    <div class="flex justify-between items-center mb-4">
+                        <h3 class="text-lg font-semibold">How your wagers count</h3>
+                    </div>
+                    
+                    <div class="space-y-3">
+                        <div class="flex justify-between items-center">
+                            <div class="flex items-center gap-2">
+                                <i data-feather="grid" class="w-4 h-4"></i>
+                                <span>Slots</span>
+                            </div>
+                            <span>100%</span>
+                        </div>
+                        
+                        <div class="flex justify-between items-center">
+                            <div class="flex items-center gap-2">
+                                <i data-feather="target" class="w-4 h-4"></i>
+                                <span>Instant Win</span>
+                            </div>
+                            <span>75%</span>
+                        </div>
+                        
+                        <div class="flex justify-between items-center">
+                            <div class="flex items-center gap-2">
+                                <i data-feather="sliders" class="w-4 h-4"></i>
+                                <span>RNG Table</span>
+                            </div>
+                            <span>25%</span>
+                        </div>
+                        
+                        <div class="flex justify-between items-center">
+                            <div class="flex items-center gap-2">
+                                <i data-feather="users" class="w-4 h-4"></i>
+                                <span>Live Casino</span>
+                                <div class="tooltip-container ml-1">
+                                    <i data-feather="info" class="w-4 h-4 text-secondary-text"></i>
+                                    <div class="tooltip">$100 on Live Casino → $10 progress</div>
+                                </div>
+                            </div>
+                            <span>10%</span>
+                        </div>
+                    </div>
+                    
+                    <p class="text-xs text-secondary-text mt-4">
+                        Weights affect progress only, not redemption math.
+                    </p>
+                </div>
+            </div>
+        </section>
+        
+        <!-- REDEEMABLES SECTION -->
+        <section class="mb-8">
+            <div class="glass-card p-5" data-aos="zoom-in">
+                <h3 class="text-lg font-semibold mb-4">Redeemable Amounts</h3>
+                
+                <div class="flex flex-wrap gap-4 mb-4">
+                    <div class="flex-1 min-w-[150px] glass-card p-4">
+                        <p class="text-sm text-secondary-text mb-1">Redeemable WSC</p>
+                        <p id="redeemable-wsc" class="text-xl font-semibold">6.64</p>
+                    </div>
+                    
+                    <div class="flex-1 min-w-[150px] glass-card p-4">
+                        <p class="text-sm text-secondary-text mb-1">Redeemable Bonus SC</p>
+                        <p id="redeemable-bonus" class="text-xl font-semibold">0.00</p>
+                    </div>
+                </div>
+                
+                <p class="text-xs text-secondary-text mb-3">Bonus SC becomes redeemable as you clear its playthrough.</p>
+                
+                <div class="flex flex-wrap gap-2 mt-4">
+                    <button id="btn-withdraw-action" class="px-4 py-2 rounded-lg bg-neon-orange font-medium">Withdraw to Wallet</button>
+                    <button id="btn-convert" class="px-4 py-2 rounded-lg bg-glass-bg border border-glass-border font-medium">Convert to WSC</button>
+                    <button class="px-4 py-2 rounded-lg bg-glass-bg border border-glass-border font-medium">View Withdrawal History</button>
+                </div>
+                
+                <div class="mt-4">
+                    <div class="px-4 py-2 rounded-lg bg-glass-bg border border-glass-border flex items-start">
+                        <i data-feather="clock" class="w-4 h-4 mr-2 text-secondary-text flex-shrink-0 mt-0.5"></i>
+                        <span class="text-sm">Processing time: 24–48h after KYC verification</span>
+                    </div>
+                </div>
+            </div>
+        </section>
+        
+        <!-- TRANSACTION HISTORY -->
+        <section class="mb-8" data-aos="fade-up">
+            <div class="glass-card p-5">
+                <div class="flex justify-between items-center mb-5 flex-wrap gap-3">
+                    <h3 class="text-lg font-semibold">Transaction History</h3>
+                    <div class="flex gap-2 flex-wrap">
+                        <button id="tx-export" class="px-3 py-1.5 text-sm rounded-lg bg-glass-bg border border-glass-border">Export CSV</button>
+                        <select class="px-3 py-1.5 text-sm rounded-lg bg-glass-bg border border-glass-border">
+                            <option>All Status</option>
+                            <option>Pending</option>
+                            <option>Completed</option>
+                        </select>
+                        <input type="date" class="px-3 py-1.5 text-sm rounded-lg bg-glass-bg border border-glass-border" placeholder="Date">
+                    </div>
+                </div>
+                
+                <div class="overflow-x-auto">
+                    <table id="tx-table" class="w-full">
+                        <thead>
+                            <tr class="text-left text-sm text-secondary-text">
+                                <th class="pb-3">Date/Time</th>
+                                <th class="pb-3">Type</th>
+                                <th class="pb-3">Description</th>
+                                <th class="pb-3">Amount</th>
+                                <th class="pb-3">Balance Type</th>
+                                <th class="pb-3">Status</th>
+                                <th class="pb-3">Ref ID</th>
+                            </tr>
+                        </thead>
+                        <tbody class="divide-y divide-white/10">
+                            <tr>
+                                <td class="py-3">-</td>
+                                <td class="py-3">-</td>
+                                <td class="py-3">-</td>
+                                <td class="py-3">-</td>
+                                <td class="py-3">-</td>
+                                <td class="py-3">-</td>
+                                <td class="py-3">-</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+                
+                <div id="empty-state" class="py-12 text-center">
+                    <i data-feather="database" class="w-16 h-16 mx-auto text-secondary-text"></i>
+                    <h4 class="mt-4 text-lg font-medium">No transactions yet</h4>
+                    <p class="text-sm text-secondary-text max-w-md mx-auto mt-2">
+                        Top up your wallet to get started with casino play
+                    </p>
+                </div>
+                
+                <div class="border-t border-white/10 mt-4 pt-4">
+                    <ul class="flex flex-wrap gap-3 justify-center">
+                        <li class="text-sm"><button>All</button></li>
+                        <li class="text-sm"><button>Deposits</button></li>
+                        <li class="text-sm"><button>Withdrawals</button></li>
+                        <li class="text-sm"><button>Bonuses</button></li>
+                        <li class="text-sm"><button>Wagers</button></li>
+                        <li class="text-sm"><button>Adjustments</button></li>
+                    </ul>
+                </div>
+            </div>
+        </section>
+        
+        <!-- BOTTOM CARDS -->
+        <section class="mb-8 grid md:grid-cols-2 gap-6">
+            <div id="store-card" class="glass-card p-5" data-aos="fade-right">
+                <div class="flex items-center justify-between mb-4">
+                    <h3 class="text-lg font-semibold">Buy Packages</h3>
+                    <button class="px-4 py-1.5 text-sm rounded-lg bg-glass-bg border border-glass-border">Go to Store</button>
+                </div>
+                
+                <div class="grid grid-cols-3 gap-3 mt-5">
+                    <div class="glass-card p-3">
+                        <p class="text-sm font-medium">$10</p>
+                        <p class="text-xs text-secondary-text mt-1">10 SC + 50 GC</p>
+                    </div>
+                    <div class="glass-card p-3 relative">
+                        <div class="absolute top-2 right-2 text-xs bg-neon-blue px-1.5 py-0.5 rounded">Best</div>
+                        <p class="text-sm font-medium">$25</p>
+                        <p class="text-xs text-secondary-text mt-1">25 SC + 250 GC</p>
+                    </div>
+                    <div class="glass-card p-3">
+                        <p class="text-sm font-medium">$50</p>
+                        <p class="text-xs text-secondary-text mt-1">50 SC + 1500 GC</p>
+                    </div>
+                </div>
+            </div>
+            
+            <div id="promos-card" class="glass-card p-5" data-aos="fade-left">
+                <h3 class="text-lg font-semibold mb-4">Active Bonuses & Codes</h3>
+                
+                <div class="space-y-3">
+                    <div class="glass-card p-3">
+                        <div class="flex justify-between">
+                            <p class="text-sm font-medium">Welcome Bonus</p>
+                            <span class="text-xs">2 days left</span>
+                        </div>
+                        <div class="progress-track mt-2">
+                            <div class="progress-bar" style="width: 15%; background: #00E4FF;"></div>
+                        </div>
+                    </div>
+                    
+                    <div class="glass-card p-3">
+                        <div class="flex justify-between">
+                            <p class="text-sm font-medium">Weekly Reload</p>
+                            <span class="text-xs">6 days left</span>
+                        </div>
+                        <div class="progress-track mt-2">
+                            <div class="progress-bar" style="width: 65%; background: #FF6A00;"></div>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="flex mt-5">
+                    <input type="text" placeholder="Have a code?" class="px-3 py-2 text-sm rounded-l-lg bg-glass-bg border border-glass-border w-full">
+                    <button class="px-4 py-2 text-sm rounded-r-lg bg-glass-bg border border-glass-border font-medium">Apply</button>
+                </div>
+            </div>
+        </section>
+        
+        <!-- ADDITIONAL CARDS -->
+        <section class="mb-8 grid md:grid-cols-2 gap-6">
+            <div id="vip-card" class="glass-card p-5" data-aos="fade-right">
+                <h3 class="text-lg font-semibold mb-3">VIP Snapshot</h3>
+                <p class="text-sm">
+                    This month wagered: <span class="font-semibold">420.00</span> → VIP +<span class="font-semibold">12%</span>
+                </p>
+                <button class="mt-3 text-sm text-neon-blue hover:underline">View VIP benefits</button>
+            </div>
+            
+            <div id="jackpot-card" class="glass-card p-5" data-aos="fade-left">
+                <h3 class="text-lg font-semibold mb-3">Jackpot Contribution</h3>
+                <p class="text-sm">
+                    You've contributed <span class="font-semibold">8.40</span> to the pool
+                </p>
+                <button class="mt-3 text-sm text-neon-blue hover:underline">View Jackpots</button>
+            </div>
+        </section>
+        
+        <!-- SECURITY & SETTINGS -->
+        <section class="glass-card p-5" data-aos="fade-up">
+            <h3 class="text-lg font-semibold mb-4">Security & Settings</h3>
+            
+            <div class="space-y-3">
+                <div>
+                    <button class="w-full text-left py-3 flex justify-between items-center">
+                        <span>Payment Methods</span>
+                        <i data-feather="chevron-down" class="w-5 h-5"></i>
+                    </button>
+                    <div class="accordion-content">
+                        <div class="pb-4 pl-2">
+                            <p class="text-sm">Visa ending in 1234</p>
+                            <p class="text-sm">Mastercard ending in 5678</p>
+                            <button class="mt-3 text-sm text-neon-blue hover:underline">Add New Method</button>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="border-t border-white/10 pt-3">
+                    <button class="w-full text-left py-3 flex justify-between items-center">
+                        <span>Set Withdrawal PIN</span>
+                        <i data-feather="chevron-down" class="w-5 h-5"></i>
+                    </button>
+                    <div class="accordion-content">
+                        <div class="pb-4 pl-2">
+                            <div class="flex gap-2 max-w-md">
+                                <input type="password" placeholder="New 4-digit PIN" class="px-3 py-2 text-sm rounded-lg bg-glass-bg border border-glass-border w-full">
+                                <button class="px-4 py-2 text-sm rounded-lg bg-glass-bg border border-glass-border font-medium">Set</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="border-t border-white/10 pt-3">
+                    <button class="w-full text-left py-3 flex justify-between items-center">
+                        <span>KYC / Verification</span>
+                        <i data-feather="chevron-down" class="w-5 h-5"></i>
+                    </button>
+                    <div class="accordion-content">
+                        <div class="pb-4 pl-2">
+                            <div class="flex items-center gap-2 text-sm mb-2">
+                                <div class="w-3 h-3 rounded-full bg-neon-success"></div>
+                                <span>Email Verified</span>
+                            </div>
+                            <div class="flex items-center gap-2 text-sm">
+                                <div class="w-3 h-3 rounded-full bg-neon-warning"></div>
+                                <span>ID Verification: Pending</span>
+                                <button class="ml-2 text-sm text-neon-blue hover:underline">Upload</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                
+                <div class="border-t border-white/10 pt-3">
+                    <button class="w-full text-left py-3 flex justify-between items-center">
+                        <span>Notification Preferences</span>
+                        <i data-feather="chevron-down" class="w-5 h-5"></i>
+                    </button>
+                </div>
+                
+                <div class="border-t border-white/10 pt-3">
+                    <a href="#" class="flex justify-between items-center py-3 text-neon-blue">
+                        Responsible Play Guide
+                    </a>
+                </div>
+            </div>
+        </section>
+    </div>
+    
+    <script>
+        AOS.init({
+            duration: 600,
+            easing: 'ease-out-sine',
+            once: true
+        });
+        
+        feather.replace();
+        
+        // Button hover effects
+        const buttons = document.querySelectorAll('.btn-trail');
+        buttons.forEach(btn => {
+            btn.addEventListener('mouseenter', () => {
+                const type = btn.classList.contains('btn-orange-trail') ? 'glow-orange' : 'glow-blue';
+                btn.style.boxShadow = `0 0 15px rgba(var(--tw-${type.split('-')[1]} / 0.5))`;
+            });
+            
+            btn.addEventListener('mouseleave', () => {
+                btn.style.boxShadow = 'none';
+            });
+        });
+        
+        // Tooltip init
+        document.querySelectorAll('.tooltip-container').forEach(el => {
+            const tooltip = el.querySelector('.tooltip');
+            
+            el.addEventListener('mouseenter', () => {
+                tooltip.style.opacity = '1';
+                tooltip.style.visibility = 'visible';
+            });
+            
+            el.addEventListener('mouseleave', () => {
+                tooltip.style.opacity = '0';
+                tooltip.style.visibility = 'hidden';
+            });
+        });
+        
+        // Accordion functionality
+        document.querySelectorAll('.accordion').forEach(acc => {
+            acc.addEventListener('click', function() {
+                const panel = this.nextElementSibling;
+                panel.style.maxHeight = panel.style.maxHeight ? null : `${panel.scrollHeight}px`;
+            });
+        });
+    </script>
+</body>
 </html>