TITLE: Nioplay — Wallet Page (Single Page • UI-Only • Minimal Glass)

OBJECTIVE
Generate a production-ready Wallet page for Nioplay that clearly shows balances, 1×/5× playthrough progress, redeemables, and transactions. STRICTLY UI — no math, no API calls. Avoid overusing glassmorphism: use mostly soft panels and borders; only 1–2 glass highlights above the fold.

THEME (GLOBAL)
Background: radial-gradient(circle at center, #0a0a0a 0%, #1a0d00 40%, #2e1300 70%, #000000 100%)
Colors:
--fg:#F5F5F5; --muted:#B8B8B8;
--orange:#FF6A00; --blue:#00E4FF;
--success:#3CE27A; --warn:#FEC84B; --danger:#FF4D4D;
--soft:#111315; /* soft panel (default) */
--soft-border:rgba(255,255,255,.08);
--glass:rgba(255,255,255,.05); --glass-border:rgba(255,255,255,.12);
Typography: Orbitron (headings), Poppins (body). Numbers 28–36px; body min 14px.

COMPONENTS (REUSE EVERYWHERE)
• AppHeader (soft band, NOT glass) with title + actions
• SoftPanel (bg var(--soft), 1px border var(--soft-border), rounded-2xl)
• GlassPanel (bg var(--glass), 1px border var(--glass-border), rounded-2xl, blur(12px))
• NeoButton (pill, seamless border-trail animation; variants: orange/blue/ghost)
• ProgressBar (rounded-full; 10px height; 600ms ease; color ramps)
• PlaythroughChip: outline chips — “1×” (orange), “5×” (blue)
• Tooltip “ⓘ”
• Tabs (ghost style)
• DataTable (dense, zebra)
• Modal / Drawer
• Icon chips + Status badges (success/pending/failed)

ANIMATION RULES
• Buttons: animated border ring using repeating conic/linear gradient; loop must be seamless (no jump), 2.5s linear; ring 2px via mask; subtle hover glow.
• Progress: width transition .6s ease; soft outer glow; rounded-full.

LAYOUT RULES (MINIMAL GLASS)
• Above the fold: MAX 2 GlassPanels. Prefer SoftPanels + border-only sections elsewhere.
• Container max-width 1280px; 12-col grid ≥1024, stack on mobile.
• Vertical rhythm 24/32/40; gutters 24px.

========================
PAGE STRUCTURE (ONE PAGE)
========================

A) HEADER BAND — SoftPanel (full width; NOT glass)
Title: “Wallet”
Sub: “Track balances, playthrough, and redeemables.”
Actions (right):
[Deposit SC] (NeoButton orange → opens Drawer #drawer-deposit)
[Withdraw] (NeoButton blue → opens Drawer #drawer-withdraw)
Links row (tiny): Payment Methods → Drawer #drawer-payments • Bonus Terms → Modal #modal-terms • KYC Status → Drawer #drawer-kyc

B) BALANCE OVERVIEW — SoftPanel (4 responsive tiles: 1×4 / 2×2 / stack)
Tile 1 — Purchase SC
Chip: PlaythroughChip “1×”
Big number: {{purchase_sc}}
Mini: “Required {{purchase_required}} | {{purchase_progress_pct}}%”
Tooltip ⓘ: “Coins you bought; requires 1× wagering before withdrawal.”
Tile 2 — Bonus SC
Chip: PlaythroughChip “5×”
Big number: {{bonus_sc}}
Mini: “Required {{bonus_required}} | {{bonus_progress_pct}}%”
Tooltip ⓘ: “Promotional coins that require 5× wagering.”
Tile 3 — Withdrawable SC (WSC)
Tag: “Redeemable now”
Big number: {{wsc}}
Sub: “Ready to withdraw.”
Tile 4 — Gold Coins (GC)
Tag: “Gold Coins”
Big number: {{gc}}
Sub: “For fun play.”

C) PLAYTHROUGH PROGRESS — GlassPanel (Glass #1 of 2; two columns inside)
Left column — “Playthrough Progress”
Row A — Purchase SC (1×)
ProgressBar (orange→success near 100%)
Inline: “{{purchase_wagered}} / {{purchase_required}} ({{purchase_progress_pct}}%)”
Row B — Bonus SC (5×)
ProgressBar (blue→orange)
Inline: “{{bonus_wagered}} / {{bonus_required}} ({{bonus_progress_pct}}%)”
Right column — Collapsible “How your wagers count”
• Slots — 100%
• Instant Win — 75%
• RNG Table — 25%
• Live Casino — 10%
Footnote (lock copy): “Weights affect progress only, not redemption.”

D) REDEEMABLES & ACTIONS — GlassPanel (Glass #2 of 2; full width)
Title: “Redeemable Amounts”
Tiles (large numerals):
• Redeemable Purchase SC (WSC): {{redeemable_wsc}}
• Redeemable Bonus SC: {{redeemable_bonus_sc}}
Buttons:
[Withdraw to Wallet] → Drawer #drawer-withdraw
[Convert to WSC] → Modal #modal-convert (UI only)
[View Transactions] → scrollIntoView(#section-transactions)
State banners (UI-only visuals):
• Warning if KYC incomplete → “Verify to withdraw” (opens Drawer #drawer-kyc)
• Info if daily limit reached → “See limits” (opens Modal #modal-terms#limits)

E) QUICK ACTIONS STRIP — Border-only row (no card)
Four compact icon actions:
• “Buy Packages” → Drawer #drawer-deposit
• “Apply Promo Code” → Modal #modal-promo
• “VIP Snapshot” → tooltip: “This month wagered {{monthly_wagered}} • VIP +{{vip_progress_pct}}%”
• “Jackpot Contribution” → inline: “You’ve contributed {{jackpot_contrib}}”

F) TRANSACTION HISTORY — SoftPanel (full width) [id="section-transactions"]
Header: “Transactions”
Filters (compact, inline): Type (All/Deposit/Withdraw/Bonus/Wager/Adjustment), Date Range, Status
DataTable (compact rows, Dribbble-style density):
• Row height: 48px
• Left icon per Type (card/crypto/bonus/wager/adjustment)
• Columns: Date/Time | Type+Icon | Amount | Balance (SC/GC/BSC/WSC) | Status Chip | Ref
• Status chips: success=green, pending=yellow, failed=red (soft glow)
Buttons: [Export CSV] (ghost) • [Clear Filters]
Empty state: friendly message + CTA “Make a deposit” → Drawer #drawer-deposit

G) EDUCATION & POLICY — Border-only two-column text
Left: “Understanding Playthrough” (short bullets)
Right: “Tips to clear faster” (slots count 100%, etc.)
Re-use tooltips below.

H) SECURITY STRIP — SoftPanel (narrow)
KYC status pill (Not verified / In review / Verified) + buttons:
[Start/Continue KYC] → Drawer #drawer-kyc
[Manage Payment Methods] → Drawer #drawer-payments

========================
DRAWERS & MODALS (UI ONLY)
========================

#drawer-deposit — Right slide (merge of Nioplay + Dribbble “You will receive”)
Top: Package selector (tiles): mock amounts, include “Best Value” tag. Selecting a tile highlights it.
Summary SoftPanel (NOT glass) — EXACT COPY:
Title: “You will receive”
Rows (large numerals):
• Gold Coins (GC): {{pkg_gc}} [badge: “for fun play”]
• Sweepstakes Coins (SC): {{pkg_sc}}
• Bonus SC (BSC): +{{pkg_bsc}} [badge: “promo”]
Fee note (muted): “We cover payment fees.”
Mini grid (disabled inputs, UI only):
• Currency: USDT ▼ • Network: ETH ▼ • Your Address: 0x••• (copy icon, no logic)
Divider
Payment Method tiles (toggle highlight; fields stay disabled):
[ Crypto ] [ Card ]
Compact warning row (icon): “All crypto deposits are UI mocks in staging.”
Primary CTA — NeoButton orange (border-trail):
[Confirm transfer] → close drawer + toast “Deposit initiated (UI mock)”
Secondary link: “Change package” → keeps drawer open; focuses package grid.

#drawer-withdraw — Right slide
Summary: “Withdrawable SC (WSC): {{wsc}} • Daily limit {{withdraw_limit}} • Pending {{pending_withdrawals}}”
Form: Amount input, Method select, PIN input (masked)
CTA: [Submit Request] → toast “Request queued — UI mock”
Link: “View history” → scrollIntoView(#section-transactions)

#drawer-kyc — Right slide
Steps: ID • Address • Selfie (badges with states)
CTA: [Start Verification] → toast “KYC started — UI mock”

#drawer-payments — Right slide
Cards on file (masked) with [Add Method] (dummy modal)
Note: “Payment methods are stored for convenience only in this mock.”

#modal-convert
Copy: “Convert eligible Bonus SC to WSC after playthrough clears. This is a visual mock only.”
CTA: [OK]

#modal-promo
Input: “Have a code?” [Apply] (dummy success/error toasts)
List: active promo balances with timers + SAME ProgressBar component

#modal-terms
Scrollable policy text placeholders with anchors:
• #bonus-terms — contribution weights table (repeat the 100/75/25/10 card)
• #limits — daily withdrawal limits + processing notes
Close button only.

========================
TOOLTIP MICROCOPY (LOCK)
========================
• “Playthrough Requirement” — “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 (5×)” — “Promotional coins that require 5× wagering.”
• “Purchase SC (1×)” — “Coins you bought; requires 1× wagering.”
• Note — “Weights affect progress only, not redemption.”

========================
PLACEHOLDER DATA (BIND)
========================
{
"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",
"withdraw_limit": "500.00",
"pending_withdrawals": "0.00",
"pkg_gc": "1100",
"pkg_sc": "110",
"pkg_bsc": "110"
}

========================
COMPONENT / ID MAP
========================
#btn-deposit (#drawer-deposit) • #btn-withdraw (#drawer-withdraw)
#card-purchase • #card-bonus • #card-wsc • #card-gc
#bar-purchase • #bar-bonus
#redeemable-wsc • #redeemable-bonus
#quick-actions • #section-transactions
#drawer-deposit • #drawer-withdraw • #drawer-kyc • #drawer-payments
#modal-convert • #modal-promo • #modal-terms

QA CHECKS
• Above-the-fold uses ≤2 GlassPanels; rest are SoftPanels or border-only.
• Buttons share the same pill shape + seamless border-trail animation.
• Progress bars share one component across wallet & promos.
• Copy and tooltips match exactly; icons are thin-line with soft glow.
• No logic implemented; all numbers static placeholders; all CTAs open drawers/modals or scroll within the page.

README.md

@@ -1,10 +1,12 @@
 ---
-title: Wallet Ui 8
-emoji: 😻
-colorFrom: blue
+title: wallet-ui-8
+emoji: 🐳
+colorFrom: purple
 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,831 @@
-<!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>Nioplay Wallet</title>
+    
+    <!-- Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&family=Poppins:wght@300;400;500&display=swap" rel="stylesheet">
+    
+    <!-- Styles & Libraries -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
+    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
+    <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>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        fg: '#F5F5F5',
+                        muted: '#B8B8B8',
+                        orange: '#FF6A00',
+                        blue: '#00E4FF',
+                        success: '#3CE27A',
+                        warn: '#FEC84B',
+                        danger: '#FF4D4D',
+                        soft: '#111315',
+                        'soft-border': 'rgba(255,255,255,0.08)',
+                        glass: 'rgba(255,255,255,0.05)',
+                        'glass-border': 'rgba(255,255,255,0.12)'
+                    },
+                    fontFamily: {
+                        orbitron: ['Orbitron', 'sans-serif'],
+                        poppins: ['Poppins', 'sans-serif']
+                    }
+                }
+            }
+        }
+    </script>
+    
+    <style>
+        body {
+            background: radial-gradient(circle at center, #0a0a0a 0%, #1a0d00 40%, #2e1300 70%, #000000 100%);
+            color: theme('colors.fg');
+            font-family: theme('fontFamily.poppins');
+            min-height: 100vh;
+        }
+        
+        .app-header {
+            background: theme('colors.soft');
+            border: 1px solid theme('colors.soft-border');
+        }
+        
+        .soft-panel {
+            background: theme('colors.soft');
+            border: 1px solid theme('colors.soft-border');
+            border-radius: 1rem;
+        }
+        
+        .glass-panel {
+            background: theme('colors.glass');
+            border: 1px solid theme('colors.glass-border');
+            border-radius: 1rem;
+            backdrop-filter: blur(12px);
+        }
+        
+        /* Progress bar */
+        .progress-container {
+            height: 10px;
+            background: rgba(255,255,255,0.08);
+            border-radius: 9999px;
+            overflow: hidden;
+        }
+        
+        .progress-bar {
+            height: 100%;
+            border-radius: 9999px;
+            transition: width 600ms ease;
+        }
+        
+        .progress-orange { background: linear-gradient(90deg, #FF6A00 0%, #FF9E66 100%); }
+        .progress-blue { background: linear-gradient(90deg, #00E4FF 0%, #88EFFF 100%); }
+        
+        /* NeoButton animation */
+        .neo-button {
+            position: relative;
+            overflow: hidden;
+            border: none;
+            border-radius: 9999px;
+            transition: all 0.3s ease;
+            padding-top: 0.5rem;
+            padding-bottom: 0.5rem;
+            font-weight: 500;
+            letter-spacing: 0.5px;
+        }
+        
+        .neo-button::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
+            background-size: 200% 100%;
+            z-index: -1;
+            border-radius: 9999px;
+            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+            mask-composite: exclude;
+            padding: 2px;
+            animation: buttonTrail 2.5s linear infinite;
+            animation-play-state: paused;
+        }
+        
+        @keyframes buttonTrail {
+            0% { background-position: 150% 0; }
+            100% { background-position: -50% 0; }
+        }
+        
+        .neo-button:hover::before {
+            animation-play-state: running;
+        }
+        
+        .neo-button-orange {
+            background: theme('colors.orange');
+            color: white;
+        }
+        
+        .neo-button-blue {
+            background: theme('colors.blue');
+            color: #0A1927;
+        }
+        
+        .neo-button-ghost {
+            background: transparent;
+            color: theme('colors.fg');
+            border: 1px solid theme('colors.soft-border');
+        }
+        
+        /* Chips & Badges */
+        .playthrough-chip {
+            border-width: 1px;
+            border-radius: 9999px;
+            padding: 0.15rem 0.5rem;
+            font-size: 0.75rem;
+            font-weight: 500;
+            letter-spacing: 0.5px;
+        }
+        
+        .chip-1x {
+            border-color: theme('colors.orange');
+            color: theme('colors.orange');
+        }
+        
+        .chip-5x {
+            border-color: theme('colors.blue');
+            color: theme('colors.blue');
+        }
+        
+        .tooltip {
+            position: relative;
+            display: inline-flex;
+        }
+        
+        .tooltip:hover .tooltip-content {
+            opacity: 1;
+            visibility: visible;
+            transform: translate(-50%, 0);
+        }
+        
+        .tooltip-content {
+            position: absolute;
+            bottom: 100%;
+            left: 50%;
+            transform: translate(-50%, -10px);
+            background: rgba(30,30,30,0.95);
+            border: 1px solid theme('colors.soft-border');
+            color: theme('colors.muted');
+            padding: 0.75rem;
+            border-radius: 0.5rem;
+            min-width: 220px;
+            font-size: 0.875rem;
+            opacity: 0;
+            visibility: hidden;
+            transition: all 0.2s ease;
+            z-index: 10;
+            pointer-events: none;
+        }
+        
+        .container-style {
+            max-width: 1280px;
+            margin-left: auto;
+            margin-right: auto;
+            padding-left: 1.5rem;
+            padding-right: 1.5rem;
+        }
+        
+        /* Transactions table */
+        .transaction-row {
+            height: 48px;
+            border-bottom: 1px solid rgba(255,255,255,0.05);
+        }
+        
+        .zebra-row:nth-child(even) {
+            background: rgba(255,255,255,0.02);
+        }
+        
+        /* Drawers & Modals */
+        .drawer {
+            transform: translateX(100%);
+            transition: transform 0.4s ease-out;
+        }
+        
+        .drawer.open {
+            transform: translateX(0);
+        }
+        
+        .modal {
+            opacity: 0;
+            pointer-events: none;
+            transition: opacity 0.3s ease;
+        }
+        
+        .modal.open {
+            opacity: 1;
+            pointer-events: auto;
+        }
+    </style>
+</head>
+<body class="text-fg">
+    <div class="container-style">
+        <!-- A) App Header -->
+        <header class="app-header rounded-2xl px-6 py-4 mb-6">
+            <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3">
+                <div>
+                    <h1 class="text-2xl md:text-3xl font-bold font-orbitron">Wallet</h1>
+                    <p class="text-muted text-sm">Track balances, playthrough, and redeemables.</p>
+                </div>
+                <div class="flex flex-wrap gap-3">
+                    <button class="neo-button neo-button-orange px-6" onclick="openDrawer('drawer-deposit')">
+                        Deposit SC
+                    </button>
+                    <button class="neo-button neo-button-blue px-6" onclick="openDrawer('drawer-withdraw')">
+                        Withdraw
+                    </button>
+                </div>
+            </div>
+            <div class="flex flex-wrap gap-4 mt-3 text-xs text-muted">
+                <a href="#drawer-payments" class="hover:text-fg cursor-pointer inline-flex items-center gap-1"
+                   onclick="openDrawer('drawer-payments')">
+                    Payment Methods
+                </a>
+                <a href="#modal-terms" class="hover:text-fg cursor-pointer inline-flex items-center gap-1"
+                   onclick="openModal('modal-terms')">
+                    Bonus Terms
+                </a>
+                <a href="#drawer-kyc" class="hover:text-fg cursor-pointer inline-flex items-center gap-1"
+                   onclick="openDrawer('drawer-kyc')">
+                    KYC Status
+                </a>
+            </div>
+        </header>
+        
+        <!-- Main Content Grid -->
+        <div class="grid grid-cols-1 gap-6 mb-12">
+            <!-- B) Balance Overview -->
+            <div class="soft-panel p-6">
+                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+                    <!-- Purchase SC -->
+                    <div class="soft-panel p-5" id="card-purchase">
+                        <div class="flex justify-between items-start">
+                            <div class="playthrough-chip chip-1x">1×</div>
+                            <div class="tooltip cursor-pointer flex items-center justify-center w-4 h-4 rounded-full bg-opacity-30">
+                                <i data-feather="info" class="w-3 h-3 text-muted"></i>
+                                <div class="tooltip-content">
+                                    Purchase SC (1×): Coins you bought; requires 1× wagering before withdrawal.
+                                </div>
+                            </div>
+                        </div>
+                        <p class="mt-3 font-orbitron text-3xl">18.74</p>
+                        <p class="text-xs text-muted mt-1">Required 18.74 | 64.5%</p>
+                    </div>
+                    
+                    <!-- Bonus SC -->
+                    <div class="soft-panel p-5" id="card-bonus">
+                        <div class="flex justify-between items-start">
+                            <div class="playthrough-chip chip-5x">5×</div>
+                            <div class="tooltip cursor-pointer flex items-center justify-center w-4 h-4 rounded-full bg-opacity-30">
+                                <i data-feather="info" class="w-3 h-3 text-muted"></i>
+                                <div class="tooltip-content">
+                                    Bonus SC (5×): Promotional coins that require 5× wagering.
+                                </div>
+                            </div>
+                        </div>
+                        <p class="mt-3 font-orbitron text-3xl">0.30</p>
+                        <p class="text-xs text-muted mt-1">Required 1.50 | 0.0%</p>
+                    </div>
+                    
+                    <!-- Withdrawable SC -->
+                    <div class="soft-panel p-5" id="card-wsc">
+                        <span class="bg-blue bg-opacity-10 text-blue text-xs px-2 py-1 rounded">Redeemable now</span>
+                        <p class="mt-3 font-orbitron text-3xl">6.64</p>
+                        <p class="text-xs text-muted mt-1">Ready to withdraw.</p>
+                    </div>
+                    
+                    <!-- Gold Coins -->
+                    <div class="soft-panel p-5" id="card-gc">
+                        <span class="bg-muted bg-opacity-10 text-muted text-xs px-2 py-1 rounded">Gold Coins</span>
+                        <p class="mt-3 font-orbitron text-3xl">3,500</p>
+                        <p class="text-xs text-muted mt-1">For fun play.</p>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- C) Playthrough Progress - Glass Panel 1 -->
+            <div class="glass-panel p-6" data-aos="fade-up">
+                <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
+                    <div>
+                        <h3 class="font-orbitron font-semibold text-xl">Playthrough Progress</h3>
+                        
+                        <!-- Purchase SC Progress -->
+                        <div class="mt-5">
+                            <div class="flex justify-between text-sm">
+                                <span>Purchase SC (1×)</span>
+                                <span>12.10 / 18.74 (64.5%)</span>
+                            </div>
+                            <div class="progress-container mt-1.5 w-full">
+                                <div class="progress-bar progress-orange" style="width: 64.5%"></div>
+                            </div>
+                        </div>
+                        
+                        <!-- Bonus SC Progress -->
+                        <div class="mt-5">
+                            <div class="flex justify-between text-sm">
+                                <span>Bonus SC (5×)</span>
+                                <span>0.00 / 1.50 (0.0%)</span>
+                            </div>
+                            <div class="progress-container mt-1.5 w-full">
+                                <div class="progress-bar progress-blue" style="width: 0%"></div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div>
+                        <div class="flex justify-between items-center mb-4">
+                            <h3 class="font-orbitron font-semibold text-xl">How your wagers count</h3>
+                            <button class="text-blue text-sm">
+                                <i data-feather="chevron-down" class="w-4 h-4"></i>
+                            </button>
+                        </div>
+                        <ul class="space-y-2 text-sm">
+                            <li class="flex justify-between">
+                                <span>Slots</span>
+                                <span>100%</span>
+                            </li>
+                            <li class="flex justify-between">
+                                <span>Instant Win</span>
+                                <span>75%</span>
+                            </li>
+                            <li class="flex justify-between">
+                                <span>RNG Table</span>
+                                <span>25%</span>
+                            </li>
+                            <li class="flex justify-between">
+                                <span>Live Casino</span>
+                                <span>10%</span>
+                            </li>
+                        </ul>
+                        <p class="text-xs text-muted mt-4">Weights affect progress only, not redemption.</p>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- D) Redeemables & Actions - Glass Panel 2 -->
+            <div class="glass-panel p-6" data-aos="fade-up">
+                <h3 class="font-orbitron font-semibold text-xl">Redeemable Amounts</h3>
+                
+                <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 mt-5">
+                    <div class="text-center">
+                        <p class="text-muted text-sm">Redeemable Purchase SC (WSC)</p>
+                        <p id="redeemable-wsc" class="font-orbitron text-4xl mt-1">6.64</p>
+                    </div>
+                    <div class="text-center">
+                        <p class="text-muted text-sm">Redeemable Bonus SC</p>
+                        <p id="redeemable-bonus" class="font-orbitron text-4xl mt-1">0.00</p>
+                    </div>
+                </div>
+                
+                <!-- Buttons -->
+                <div class="flex flex-wrap gap-3 mt-8">
+                    <button class="neo-button neo-button-blue px-6" 
+                            onclick="openDrawer('drawer-withdraw')">Withdraw to Wallet</button>
+                    <button class="neo-button neo-button-blue bg-opacity-5 text-blue px-6" 
+                            onclick="openModal('modal-convert')">Convert to WSC</button>
+                    <button class="neo-button neo-button-ghost px-6" 
+                            onclick="document.querySelector('#section-transactions').scrollIntoView({behavior: 'smooth'})">
+                        View Transactions
+                    </button>
+                </div>
+                
+                <!-- Warning Banner -->
+                <div class="flex items-center gap-2 bg-blue bg-opacity-5 rounded-lg px-6 py-4 mt-6">
+                    <span class="bg-blue rounded-full p-1">
+                        <i data-feather="info" class="w-4 h-4 text-blue"></i>
+                    </span>
+                    <p class="flex-1 text-sm">For security reasons, withdraw requires KYC verification</p>
+                    <button class="text-blue text-sm font-medium" onclick="openDrawer('drawer-kyc')">Verify Account</button>
+                </div>
+            </div>
+            
+            <!-- E) Quick Actions Strip -->
+            <div class="py-5 border-b border-border flex flex-wrap gap-6 justify-between">
+                <button class="flex items-center gap-2 group" onclick="openDrawer('drawer-deposit')">
+                    <span class="bg-orange p-1.5 rounded-lg opacity-60 group-hover:opacity-100 transition">
+                        <i data-feather="shopping-cart" class="w-4 h-4"></i>
+                    </span>
+                    <span class="text-sm group-hover:text-orange transition">Buy Packages</span>
+                </button>
+                
+                <button class="flex items-center gap-2 group" onclick="openModal('modal-promo')">
+                    <span class="bg-blue p-1.5 rounded-lg opacity-60 group-hover:opacity-100 transition">
+                        <i data-feather="tag" class="w-4 h-4"></i>
+                    </span>
+                    <span class="text-sm group-hover:text-blue transition">Apply Promo Code</span>
+                </button>
+                
+                <button class="flex items-center gap-2 group tooltip">
+                    <span class="bg-green p-1.5 rounded-lg opacity-60 group-hover:opacity-100 transition">
+                        <i data-feather="award" class="w-4 h-4"></i>
+                    </span>
+                    <span class="text-sm group-hover:text-green transition">VIP Snapshot</span>
+                    <div class="tooltip-content">
+                        This month wagered 420.00 • VIP +12%
+                    </div>
+                </button>
+                
+                <button class="flex items-center gap-2 group">
+                    <span class="bg-yellow p-1.5 rounded-lg opacity-60 group-hover:opacity-100 transition">
+                        <i data-feather="gift" class="w-4 h-4"></i>
+                    </span>
+                    <span class="text-sm group-hover:text-yellow transition">Jackpot Contribution: 8.40</span>
+                </button>
+            </div>
+            
+            <!-- F) Transaction History -->
+            <div id="section-transactions" class="soft-panel p-6 mt-12">
+                <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6 gap-3">
+                    <h3 class="font-orbitron font-semibold text-xl">Transactions</h3>
+                    
+                    <div class="flex flex-wrap gap-2">
+                        <select class="text-sm bg-soft border border-muted border-opacity-20 rounded-lg px-3 py-1">
+                            <option>All Types</option>
+                            <option>Deposit</option>
+                            <option>Withdraw</option>
+                        </select>
+                        <select class="text-sm bg-soft border border-muted border-opacity-20 rounded-lg px-3 py-1">
+                            <option>Last 30 Days</option>
+                            <option>Last 90 Days</option>
+                        </select>
+                        <button class="text-xs neo-button-ghost px-3">Export CSV</button>
+                        <button class="text-xs neo-button-ghost px-3">Clear Filters</button>
+                    </div>
+                </div>
+                
+                <table class="w-full">
+                    <thead>
+                        <tr class="text-left text-sm text-muted border-b border-border">
+                            <th class="py-2 px-4">Date/Time</th>
+                            <th class="py-2 px-4">Type</th>
+                            <th class="py-2 px-4">Amount</th>
+                            <th class="py-2 px-4">Balance</th>
+                            <th class="py-2 px-4">Status</th>
+                        </tr>
+                    </thead>
+                    <tbody class="text-sm">
+                        <!-- Row 1 -->
+                        <tr class="zebra-row transaction-row">
+                            <td class="px-4">Jul 15, 19:23</td>
+                            <td class="px-4">
+                                <div class="flex items-center gap-2">
+                                    <i data-feather="dollar-sign" class="w-4 h-4"></i>
+                                    Deposit
+                                </div>
+                            </td>
+                            <td class="px-4">+10.00 SC</td>
+                            <td class="px-4">24.18 SC</td>
+                            <td class="px-4">
+                                <span class="bg-success bg-opacity-10 text-success px-2 py-1 rounded text-xs">
+                                    Complete
+                                </span>
+                            </td>
+                        </tr>
+                        <!-- Row 2 -->
+                        <tr class="zebra-row transaction-row">
+                            <td class="px-4">Jul 16, 14:15</td>
+                            <td class="px-4">
+                                <div class="flex items-center gap-2">
+                                    <i data-feather="activity" class="w-4 h-4"></i>
+                                    Wager
+                                </div>
+                            </td>
+                            <td class="px-4">-2.20 SC</td>
+                            <td class="px-4">21.98 SC</td>
+                            <td class="px-4">
+                                <span class="bg-success bg-opacity-10 text-success px-2 py-1 rounded text-xs">
+                                    Complete
+                                </span>
+                            </td>
+                        </tr>
+                        <tr class="zebra-row transaction-row">
+                            <td class="px-4">Jul 10, 10:08</td>
+                            <td class="px-4">
+                                <div class="flex items-center gap-2">
+                                    <i data-feather="package" class="w-4 h-4"></i>
+                                    Bonus Credit
+                                </div>
+                            </td>
+                            <td class="px-4">+0.30 BSC</td>
+                            <td class="px-4">0.30 BSC</td>
+                            <td class="px-4">
+                                <span class="bg-success bg-opacity-10 text-success px-2 py-1 rounded text-xs">
+                                    Complete
+                                </span>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+            
+            <!-- G) Education & Policy -->
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 py-10 border-b border-border">
+                <div>
+                    <h4 class="text-lg font-bold mb-4">Understanding Playthrough</h4>
+                    <ul class="space-y-4 text-sm text-muted">
+                        <li>Total amount you must wager before funds become withdrawable</li>
+                        <li>Purchased coins require 1× playthrough</li>
+                        <li>Bonus funds require 5× playthrough</li>
+                        <li>Wagers contribute differently across game types</li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-lg font-bold mb-4">Tips to clear faster</h4>
+                    <ul class="space-y-4 text-sm text-muted">
+                        <li>Slots contribute 100% towards playthrough</li>
+                        <li>Table games typically contribute at 10-25%</li>
+                        <li>Promotions can provide playthrough bonuses</li>
+                        <li>Higher variance slots clear playthrough faster statistically</li>
+                    </ul>
+                </div>
+            </div>
+            
+            <!-- H) Security Strip -->
+            <div class="soft-panel mt-8">
+                <div class="flex flex-col sm:flex-row justify-between gap-4 p-5">
+                    <div class="flex items-center gap-3">
+                        <span class="px-3 py-1 rounded-full bg-danger bg-opacity-10 text-danger text-xs">
+                            Not Verified
+                        </span>
+                        <p class="text-sm">Account security level: Basic</p>
+                    </div>
+                    
+                    <div class="flex gap-3">
+                        <button class="neo-button neo-button-blue bg-opacity-5 text-blue px-4 text-sm"
+                                onclick="openDrawer('drawer-kyc')">
+                            Complete KYC
+                        </button>
+                        <button class="neo-button neo-button-ghost px-4 text-sm"
+                                onclick="openDrawer('drawer-payments')">
+                            Payment Methods
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <!-- Drawers and Modals Section -->
+    
+    <!-- Deposit Drawer -->
+    <div id="drawer-deposit" class="drawer fixed inset-0 z-50 flex items-end justify-end">
+        <div class="bg-black bg-opacity-40 absolute inset-0" onclick="closeDrawer('drawer-deposit')"></div>
+        <div class="bg-soft w-full max-w-md h-full relative z-10 overflow-y-auto">
+            <div class="p-6">
+                <div class="flex justify-between items-center mb-8">
+                    <h3 class="font-orbitron text-2xl">Deposit</h3>
+                    <button onclick="closeDrawer('drawer-deposit')">
+                        <i data-feather="x" class="w-6 h-6"></i>
+                    </button>
+                </div>
+                
+                <!-- Package Grid -->
+                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                    <div class="soft-panel p-4 rounded-xl hover:border-orange border border-soft-border cursor-pointer">
+                        <div class="flex justify-between">
+                            <span class="font-medium">Starter</span>
+                            <span class="text-orange">$9.99</span>
+                        </div>
+                        <p class="font-orbitron text-2xl mt-2">500 GC + 50 SC</p>
+                    </div>
+                    <div class="soft-panel p-4 rounded-xl hover:border-orange border border-soft-border cursor-pointer border-orange">
+                        <div class="flex justify-between">
+                            <div>
+                                <span class="font-medium">Standard</span>
+                                <span class="bg-orange rounded-full text-xs px-2 ml-2">Best Value</span>
+                            </div>
+                            <span class="text-orange">$19.99</span>
+                        </div>
+                        <p class="font-orbitron text-2xl mt-2">1,100 GC + 110 SC + 55 BSC</p>
+                    </div>
+                </div>
+                
+                <!-- Soft Panel -->
+                <div class="soft-panel p-6 mt-8">
+                    <h3 class="font-orbitron text-xl mb-4">You will receive</h3>
+                    
+                    <div class="space-y-4">
+                        <div class="flex justify-between pb-4 border-b border-soft-border">
+                            <div>
+                                <p>Gold Coins (GC)</p>
+                                <span class="bg-muted bg-opacity-10 text-muted text-xs px-2 rounded">for fun play</span>
+                            </div>
+                            <p class="font-orbitron">1100</p>
+                        </div>
+                        
+                        <div class="flex justify-between pb-4 border-b border-soft-border">
+                            <p>Sweepstakes Coins (SC)</p>
+                            <p class="font-orbitron">110</p>
+                        </div>
+                        
+                        <div class="flex justify-between mb-6">
+                            <div>
+                                <p>Bonus SC (BSC)</p>
+                                <span class="bg-blue bg-opacity-10 text-blue text-xs px-2 rounded">promo</span>
+                            </div>
+                            <p class="font-orbitron">+55</p>
+                        </div>
+                    </div>
+                    
+                    <p class="text-sm text-muted">We cover payment fees.</p>
+                    
+                    <div class="grid grid-cols-2 gap-3 mt-6">
+                        <div>
+                            <p class="text-sm text-muted mb-1">Currency</p>
+                            <div class="soft-panel px-4 py-2">USDT <i class="float-right" data-feather="chevron-down"></i></div>
+                        </div>
+                        <div>
+                            <p class="text-sm text-muted mb-1">Network</p>
+                            <div class="soft-panel px-4 py-2">ETH <i class="float-right" data-feather="chevron-down"></i></div>
+                        </div>
+                        <div class="col-span-2">
+                            <p class="text-sm text-muted mb-1">Your Address</p>
+                            <div class="soft-panel px-4 py-2 flex justify-between">
+                                <span class="truncate mr-2">0x5a...2b1z</span>
+                                <button>
+                                    <i data-feather="copy" class="w-4 h-4"></i>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="flex gap-2 mt-6">
+                        <button class="soft-panel font-medium py-3 text-center flex-1">Crypto</button>
+                        <button class="soft-panel py-3 text-center flex-1 text-muted">Card</button>
+                    </div>
+                    
+                    <div class="flex items-center gap-2 bg-danger bg-opacity-5 rounded-lg px-4 py-3 mt-6">
+                        <i data-feather="alert-triangle" class="text-danger"></i>
+                        <p class="text-sm">All crypto deposits are UI mocks in staging.</p>
+                    </div>
+                </div>
+                
+                <!-- CTA -->
+                <button class="neo-button neo-button-orange w-full mt-8 py-4" 
+                        onclick="closeDrawer('drawer-deposit')">
+                    Confirm Transfer
+                </button>
+            </div>
+        </div>
+    </div>
+    
+    <!-- Withdraw Drawer -->
+    <div id="drawer-withdraw" class="drawer fixed inset-0 z-50 flex items-end justify-end">
+        <div class="bg-black bg-opacity-40 absolute inset-0" onclick="closeDrawer('drawer-withdraw')"></div>
+        <div class="bg-soft w-full max-w-md h-full relative z-10 overflow-y-auto">
+            <div class="p-6">
+                <div class="flex justify-between items-center mb-8">
+                    <h3 class="font-orbitron text-2xl">Withdraw</h3>
+                    <button onclick="closeDrawer('drawer-withdraw')">
+                        <i data-feather="x" class="w-6 h-6"></i>
+                    </button>
+                </div>
+                
+                <p class="mb-6">Withdrawable SC (WSC): <span class="font-orbitron">6.64</span> • Daily limit: $500 • Pending: <span class="font-orbitron">0.00</span></p>
+                
+                <div class="soft-panel p-5 mb-4">
+                    <label class="text-sm block mb-2">Amount (USD)</label>
+                    <input type="text" value="6.64" class="bg-transparent w-full text-xl py-3 border-b border-soft-border">
+                    <p class="mt-2 text-sm text-muted">Minimum: $5.00</p>
+                </div>
+                
+                <div class="soft-panel p-5 mb-8">
+                    <label class="text-sm block mb-2">Payment Method</label>
+                    <select class="bg-transparent w-full py-3">
+                        <option>USDT (ERC-20)</option>
+                        <option>Bitcoin</option>
+                    </select>
+                    
+                    <label class="text-sm block mb-2 mt-6">Withdrawal PIN</label>
+                    <input type="password" class="bg-transparent w-full py-3 border-b border-soft-border" placeholder="••••">
+                </div>
+                
+                <button class="neo-button neo-button-blue w-full py-4" 
+                        onclick="closeDrawer('drawer-withdraw')">
+                    Submit Request
+                </button>
+                
+                <p class="text-center mt-4">
+                    <button class="text-blue underline text-sm" 
+                            onclick="document.querySelector('#section-transactions').scrollIntoView({behavior: 'smooth'}); closeDrawer('drawer-withdraw')">
+                        View history
+                    </button>
+                </p>
+            </div>
+        </div>
+    </div>
+    
+    <!-- Modals - Terms -->
+    <div id="modal-terms" class="modal fixed inset-0 flex items-center justify-center z-50 p-4">
+        <div class="bg-black bg-opacity-50 absolute inset-0" onclick="closeModal('modal-terms')"></div>
+        <div class="bg-soft max-w-2xl rounded-xl relative z-10 w-full max-h-screen overflow-y-auto">
+            <div class="p-8">
+                <div class="flex justify-between items-center mb-4">
+                    <h3 class="font-orbitron text-xl">Bonus Terms</h3>
+                    <button onclick="closeModal('modal-terms')">
+                        <i data-feather="x" class="w-6 h-6"></i>
+                    </button>
+                </div>
+                
+                <div class="space-y-6">
+                    <!-- TOC -->
+                    <div class="flex flex-wrap gap-2 pb-4 border-b border-soft-border">
+                        <a href="#bonus-terms" class="text-blue underline">Contribution Rates</a>
+                        <a href="#limits" class="text-blue underline">Withdrawal Limits</a>
+                    </div>
+                    
+                    <!-- Contribution table -->
+                    <div id="bonus-terms">
+                        <h4 class="font-bold mb-3">Contribution Weights</h4>
+                        <p class="text-sm mb-4">Different games contribute differently toward playthrough requirements.</p>
+                        <div class="soft-panel p-4">
+                            <ul class="space-y-4 text-sm">
+                                <li class="flex justify-between">
+                                    <span>Slots</span>
+                                    <span>100%</span>
+                                </li>
+                                <li class="flex justify-between">
+                                    <span>Instant Win</span>
+                                    <span>75%</span>
+                                </li>
+                                <li class="flex justify-between">
+                                    <span>RNG Table</span>
+                                    <span>25%</span>
+                                </li>
+                                <li class="flex justify-between">
+                                    <span>Live Casino</span>
+                                    <span>10%</span>
+                                </li>
+                            </ul>
+                        </div>
+                        <p class="text-xs text-muted mt-4 italic">* Weights affect playthrough progress only, not redemption amounts.</p>
+                    </div>
+                    
+                    <!-- Limits -->
+                    <div id="limits" class="pt-6 border-t border-soft-border">
+                        <h4 class="font-bold mb-3">Withdrawal Limits</h4>
+                        <div class="soft-panel p-4">
+                            <div class="flex justify-between py-2">
+                                <span class="text-sm">Daily Limit</span>
+                                <span class="font-orbitron">$500 USD</span>
+                            </div>
+                            <div class="flex justify-between py-2">
+                                <span class="text-sm">Processing Time</span>
+                                <span>24-48 Hours</span>
+                            </div>
+                            <div class="flex justify-between py-2">
+                                <span class="text-sm">KYC Required</span>
+                                <span>Above $1000</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    
+    <!-- Initialize -->
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            feather.replace();
+            AOS.init({duration: 600});
+        });
+        
+        function openDrawer(id) {
+            document.getElementById(id).classList.add('open');
+            document.body.classList.add('overflow-hidden');
+        }
+        
+        function closeDrawer(id) {
+            document.getElementById(id).classList.remove('open');
+            document.body.classList.remove('overflow-hidden');
+        }
+        
+        function openModal(id) {
+            document.getElementById(id).classList.add('open');
+        }
+        
+        function closeModal(id) {
+            document.getElementById(id).classList.remove('open');
+        }
+    </script>
+</body>
+</html>
+
+</body>
 </html>