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.

index.html

@@ -688,28 +688,28 @@
         <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>
+                    <h3 class="font-orbitron text-2xl">Redeem</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>
+                <p class="mb-6">Redeemable SC: <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>
+                    <p class="mt-2 text-sm text-muted">Minimum: $75.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>Bank Account</option>
                         <option>Bitcoin</option>
                     </select>
                     
-                    <label class="text-sm block mb-2 mt-6">Withdrawal PIN</label>
+                    <label class="text-sm block mb-2 mt-6">Payment Information</label>
                     <input type="password" class="bg-transparent w-full py-3 border-b border-soft-border" placeholder="••••">
                 </div>