[ { "path": ".gitattributes", "content": "# Auto detect text files and perform LF normalization\n* text=auto\n" }, { "path": ".gitignore", "content": "spooky.mp4\n" }, { "path": "README.md", "content": "# ๐Ÿง™โ€โ™‚๏ธ Blessed Wizard\n\n**Blessed Wizard** is a **Telegram Mini App slot machine game** combined with a **Python Telegram Bot** that launches the app, manages referrals, and processes payments.\n\nโš ๏ธ Gambling-style mechanics. **18+ only.** Ensure compliance with local laws and regulations.\n\n---\n\nOfficial website - blessedwizard.site\n\"ะธะทะพะฑั€ะฐะถะตะฝะธะต\"\n\n\n## Overview\n\n- Telegram Mini App slot game\n- Entry via Telegram Bot (`/start`)\n- Referral system with bonuses\n- Telegram Stars deposits\n- Cryptocurrency withdrawals\n- Firebase backend\n\n---\n\n## Features\n\n- ๐ŸŽฐ 5 reels / 20 paylines\n- ๐Ÿ“Š Configurable RTP (default 96%)\n- ๐Ÿ”— Referral system (`/start ref`)\n- ๐ŸŽ Promocodes & bonuses\n- ๐Ÿ’ฐ Telegram Stars payments\n- ๐Ÿ”” Withdrawal notifications via bot\n- ๐ŸŒ TON / BTC / ETH / USDT withdrawals\n- ๐Ÿ“ฑ Mobile-first Mini App UI\n\n---\n\n## Architecture\n\nTelegram Bot (Python) โ†’ Telegram Mini App (Web) โ†’ Firebase Firestore\n\n---\n\n## Tech Stack\n\nWebApp: HTML, CSS, JavaScript, Telegram WebApp API \nBot: Python 3, python-telegram-bot v20.7 \nBackend: Firebase Firestore \n\n---\n\n## Installation\n\ngit clone https://github.com/hhaayykk/BlessedWizard.git \ncd BlessedWizard\n\n---\n\n## Configuration\n\n- config.js โ€” Firebase credentials \n- main.js โ€” Game logic and RTP \n- main.py โ€” Bot token and Mini App URL \n\n---\n\n## Usage\n\n1. Open the Telegram bot \n2. Run /start \n3. Mini App launches \n4. Play slot machine \n5. Deposit via Telegram Stars \n6. Withdraw winnings \n\n---\n\n## Deployment\n\n- WebApp: Netlify / Vercel / GitHub Pages \n- Bot: python bot.py \n- Set Mini App URL via @BotFather \n\n---\n\n## Security Notes\n\n- Never commit real API keys \n- Validate withdrawals \n- Apply limits and anti-abuse checks \n" }, { "path": "config.js", "content": "// Firebase Configuration\nexport const firebaseConfig = {\n apiKey: \"###\",\n authDomain: \"###\",\n projectId: \"###\",\n storageBucket: \"###\",\n messagingSenderId: \"###\",\n appId: \"###\",\n measurementId: \"###\"\n};\n" }, { "path": "index.html", "content": "\n\n\n \n \n Blessed Wizard\n \n \n \n \n \n \n \n\n\n \n
\n \"Blessed\n
โญ 0
\n
\n\n
\n
\n \n
\n\n \n
\n
\n
\n

Bet

\n
1
\n
\n
\n

Star Value

\n
1.00
\n
\n
\n

Total Bet

\n
20.00
\n
\n
\n \n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n \n
\n
\n
\n \n \n
\n
\n \n
\n
\n
\n
\n
\n
Bet (Stars/Line)
\n
\n \n
1
\n \n
\n
\n
\n
Star Value
\n
\n \n
1.00
\n \n
\n
\n
\n
Total Bet
\n
20.00
\n \n
\n \n
\n
\n \n
\n
Auto Spins
\n
5
\n \n \n
\n
\n
Quick Spin
\n \n
\n \n
\n
\n
\n

Paytable

\n

Wins are calculated across 20 paylines. Match 3, 4, or 5 symbols from the left reel.

\n
\n \n Loop: 5x - 37.5, 4x - 7.5, 3x - 3.75\n
\n
\n \n Magic Ball: 5x - 25.0, 4x - 5.0, 3x - 2.5\n
\n
\n \n Book: 5x - 20.0, 4x - 4.0, 3x - 2.0\n
\n
\n \n Hat: 5x - 15.0, 4x - 3.0, 3x - 1.5\n
\n
\n \n Lighter: 5x - 10.0, 4x - 2.0, 3x - 1.0\n
\n
\n \n Note: 5x - 7.5, 4x - 1.5, 3x - 0.75\n
\n
\n \n Poison: 5x - 5.0, 4x - 1.0, 3x - 0.5\n
\n

Total Win = (Bet per line ร— Symbol Multiplier) ร— Number of lines.

\n
\n \n
\n
\n\n \n
\n
\n

Leaderboard

\n
October 2025
\n
\n
\n
\n
๐Ÿฅˆ
\n \n
ุงู„ุฃุญู…ุฏ
\n
โญ 150 000
\n
2
\n
\n
\n
๐Ÿฅ‡
\n \n
David
\n
โญ 250 000
\n
1
\n
\n
\n
๐Ÿฅ‰
\n
A
\n
A
\n
โญ 100 000
\n
3
\n
\n
\n
\n
\n
4
\n
V
\n
\n
Vladimir
\n
โญ 75 000
\n
\n
\n
\n
5
\n \n
\n
Golddd
\n
โญ 50 000
\n
\n
\n
\n
\n \n

Leaderboard shows the top 5 players with the most spins last month. It resets monthly, and rewards are credited to your balance.

\n
\n
\n\n \n
\n
\n
\n \n \n
\n \n
\n\n \n
\n
\n

Invite Friends

\n
Earn 15 Stars per friend!
\n
\n
\n
\n
0
\n
Friends Invited
\n
\n
\n
โญ 0
\n
Total Earned
\n
\n
\n
\n
Your Referral Link
\n
\n https://t.me/BessedWizardBot?start=ref_USER123\n \n
\n
\n \n
\n \n
\n
How it works:
\n
    \n
  • Share your unique referral link
    • \n
  • Friend registers using your link
    • \n
  • You get 15 Stars instantly!
    • \n
  • No limit on referrals
    • \n
\n
\n
\n
\n\n \n
\n
\n \n
\n

User Name

\n

Telegram ID: Not Set

\n

Registered: Not Set

\n
\n
\n
\n
\n
\n
\n \n Music\n
\n \n
\n
\n
\n \n
\n
\n
\n

\n Promocode\n

\n
\n \n

Enter a promocode to receive free Stars!

\n
\n
\n \n \n
\n
\n
\n Privacy Policy\n
\n

18+ only | Play responsibly | Terms apply

\n

Website: www.blessedwizard.site

\n

Support: https://t.me/BlessedWizardSupport

\n
\n
\n \n
\n
\n\n \n
\n \n \n \n \n \n
\n\n \n \n \n\n" }, { "path": "main.js", "content": "import { firebaseConfig, TELEGRAM_BOT_TOKEN, TELEGRAM_GROUP_CHAT_ID, BOT_USERNAME } from './config.js';\nimport { PROMOCODES } from './promocodes.js'; // โ† ADD THIS LINE\nimport { initializeApp } from 'https://www.gstatic.com/firebasejs/10.14.1/firebase-app.js';\nimport { getFirestore, doc, setDoc, getDoc, updateDoc, serverTimestamp } from 'https://www.gstatic.com/firebasejs/10.14.1/firebase-firestore.js';\nconst app = initializeApp(firebaseConfig);\nconst db = getFirestore(app);\n\n// ===============================\n// RTP System Configuration (Dog House Style)\n// ===============================\nconst RTP_CONFIG = {\n TARGET_RTP: 96.0,\n MIN_RTP: 95.5,\n MAX_RTP: 96.5,\n BONUS_TRIGGER_CHANCE: 0.05,\n SMALL_WIN_MULTIPLIER_RANGE: [0.2, 0.8],\n MEDIUM_WIN_MULTIPLIER_RANGE: [1.0, 3.0],\n BIG_WIN_MULTIPLIER_RANGE: [5.0, 15.0],\n MEGA_WIN_MULTIPLIER_RANGE: [20.0, 50.0],\n LOSS_STREAK_BONUS_TRIGGER: 6,\n ADJUSTMENT_SPEED: 0.3\n};\n\nlet sessionStats = {\n totalBet: 0,\n totalWon: 0,\n spinCount: 0,\n lossStreak: 0,\n lastBigWin: 0,\n currentRTP: 100.0\n};\n\n// ===============================\n// Game Variables\n// ===============================\nlet balance = 0;\nlet coins_per_line = 1;\nlet coin_value = 1.0;\nlet total_bet = 25 * coins_per_line * coin_value;\nlet isSpinning = false;\nlet isAutoSpinning = false;\nlet autoSpinEnabled = false;\nlet remainingSpins = 0;\nlet autoSpins = 5;\nlet quickSpin = false;\nlet transactionHistory = [];\nlet telegramId = null;\n\nconst MIN_WITHDRAW = 2000;\nconst TRANSACTION_COOLDOWN = 6 * 60 * 60 * 1000;\nconst REFERRAL_BONUS_REFERRER = 15.0;\nconst REFERRAL_BONUS_NEW_USER = 15.0;\nconst SPECIAL_REFERRAL_CODE = \"dhs92bfjdjdsdf\";\nconst SPECIAL_REFERRAL_BONUS = 100.0;\n\n// Background Music\nlet backgroundMusic = null;\nlet isMusicPlaying = false;\n\n// Symbols\nconst symbols = [\n { name: 'petla', src: 'images/avelavokmagic.PNG', weight: 1 },\n { name: 'magicball', src: 'images/ballmagic.png', weight: 2 },\n { name: 'book', src: 'images/bookmagic.png', weight: 3 },\n { name: 'hat', src: 'images/hatmagic.png', weight: 5 },\n { name: 'lighter', src: 'images/lightermagic.PNG', weight: 8 },\n { name: 'note', src: 'images/notemagic.png', weight: 12 },\n { name: 'poison', src: 'images/poisonmagic.png', weight: 15 }\n];\n\nlet SYMBOL_HEIGHT = 70;\nconst VISIBLE_LINES = 3;\nconst CENTER_INDEX = 10;\n\nconst paylines = [\n [0, 0, 0, 0, 0], [1, 1, 1, 1, 1], [2, 2, 2, 2, 2], [0, 1, 2, 1, 0], [2, 1, 0, 1, 2],\n [0, 0, 1, 2, 2], [2, 2, 1, 0, 0], [1, 0, 0, 1, 1], [1, 2, 2, 1, 0], [0, 1, 1, 2, 2],\n [2, 1, 1, 0, 0], [0, 0, 0, 1, 2], [2, 2, 2, 1, 0], [1, 1, 0, 0, 1], [1, 1, 2, 2, 1],\n [0, 1, 2, 2, 2], [2, 1, 0, 0, 0], [0, 0, 1, 1, 2], [2, 2, 1, 1, 0], [1, 0, 1, 2, 1]\n];\n\nconst paytable = {\n 'petla': { 3: 5, 4: 15, 5: 100 },\n 'magicball': { 3: 4, 4: 10, 5: 50 },\n 'book': { 3: 3, 4: 8, 5: 30 },\n 'hat': { 3: 2, 4: 5, 5: 20 },\n 'lighter': { 3: 1.5, 4: 4, 5: 15 },\n 'note': { 3: 1, 4: 3, 5: 10 },\n 'poison': { 3: 0.8, 4: 2, 5: 8 }\n};\n\nlet userProfile = {\n name: \"Anonymous\",\n telegramId: \"Not Set\",\n registrationDate: \"Not Set\",\n language: \"en\",\n avatarUrl: \"images/default_avatar.jpg\"\n};\n\n// DOM Elements\nconst gameContainer = document.getElementById('gameContainer');\nconst leadersContainer = document.getElementById('leadersContainer');\nconst balanceContainer = document.getElementById('balanceContainer');\nconst friendsContainer = document.getElementById('friendsContainer');\nconst profileContainer = document.getElementById('profileContainer');\nconst spinButton = document.getElementById('spinButton');\nconst autoButton = document.getElementById('autoButton');\nconst betSettingsButton = document.getElementById('betSettingsButton');\nconst paytableButton = document.getElementById('paytableButton');\nconst maxBetButton = document.getElementById('maxBetButton');\nconst okButton = document.getElementById('okButton');\nconst okAutoButton = document.getElementById('okAutoButton');\nconst okPaytableButton = document.getElementById('okPaytableButton');\nconst toggleAutoSpin = document.getElementById('toggleAutoSpin');\nconst decreaseAutoSpins = document.getElementById('decreaseAutoSpins');\nconst increaseAutoSpins = document.getElementById('increaseAutoSpins');\nconst autoSpinsModal = document.getElementById('autoSpinsModal');\nconst quickSpinCheckbox = document.getElementById('quickSpinCheckbox');\nconst autoSpinsRow = document.getElementById('autoSpinsRow');\nconst quickSpinRow = document.getElementById('quickSpinRow');\nconst dimmedOverlay = document.getElementById('dimmedOverlay');\nconst resultOverlay = document.getElementById('resultOverlay');\nconst resultText = document.getElementById('resultText');\nconst betSettingsModal = document.getElementById('betSettingsModal');\nconst autoSettingsModal = document.getElementById('autoSettingsModal');\nconst paytableModal = document.getElementById('paytableModal');\nconst reels = [\n document.getElementById('reel1'),\n document.getElementById('reel2'),\n document.getElementById('reel3'),\n document.getElementById('reel4'),\n document.getElementById('reel5')\n];\nconst betLevelDisplay = document.getElementById('betLevel');\nconst coinValueDisplay = document.getElementById('coinValue');\nconst totalBetDisplay = document.getElementById('totalBet');\nconst betLevelModal = document.getElementById('betLevelModal');\nconst coinValueModal = document.getElementById('coinValueModal');\nconst totalBetModal = document.getElementById('totalBetModal');\nconst decreaseBetLevel = document.getElementById('decreaseBetLevel');\nconst increaseBetLevel = document.getElementById('increaseBetLevel');\nconst decreaseCoinValue = document.getElementById('decreaseCoinValue');\nconst increaseCoinValue = document.getElementById('increaseCoinValue');\n\n// ===============================\n// Telegram Notification Function\n// ===============================\nasync function sendTelegramNotification(withdrawalData) {\n try {\n const message = `\n๐Ÿ”” NEW WITHDRAWAL REQUEST ๐Ÿ””\n\n๐Ÿ‘ค User: ${withdrawalData.userName}\n๐Ÿ†” User ID: ${withdrawalData.userId}\n\n๐Ÿ’ฐ Amount: ${Math.floor(withdrawalData.amount)} Stars\n๐Ÿ’ณ Method: ${withdrawalData.method}\n๐Ÿ“ Wallet Address: \n${withdrawalData.walletAddress}\n\nโฐ Time: ${new Date(withdrawalData.timestamp).toLocaleString()}\n๐Ÿ“Š Status: ${withdrawalData.status.toUpperCase()}\n\nโ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”\n`;\n\n const url = `https://api.telegram.org/bot${TELEGRAM_BOT_TOKEN}/sendMessage`;\n \n const response = await fetch(url, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({\n chat_id: TELEGRAM_GROUP_CHAT_ID,\n text: message,\n parse_mode: 'HTML'\n })\n });\n\n const data = await response.json();\n \n if (data.ok) {\n console.log(\"โœ… Telegram notification sent successfully\");\n return true;\n } else {\n console.error(\"โŒ Telegram API error:\", data);\n return false;\n }\n } catch (error) {\n console.error(\"โŒ Error sending Telegram notification:\", error);\n return false;\n }\n}\n\n// ===============================\n// RTP System Functions\n// ===============================\nfunction calculateCurrentRTP() {\n if (sessionStats.totalBet === 0) return 100.0;\n return (sessionStats.totalWon / sessionStats.totalBet) * 100;\n}\n\nfunction shouldTriggerWin() {\n const currentRTP = calculateCurrentRTP();\n \n if (currentRTP < RTP_CONFIG.MIN_RTP) {\n return Math.random() < 0.75;\n }\n \n if (currentRTP > RTP_CONFIG.MAX_RTP) {\n return Math.random() < 0.25;\n }\n \n if (sessionStats.lossStreak >= RTP_CONFIG.LOSS_STREAK_BONUS_TRIGGER) {\n return Math.random() < 0.85;\n }\n \n return Math.random() < 0.45;\n}\n\nfunction determineWinType() {\n const currentRTP = calculateCurrentRTP();\n const rand = Math.random();\n \n if (currentRTP < RTP_CONFIG.MIN_RTP) {\n if (rand < 0.15) return 'mega';\n if (rand < 0.35) return 'big';\n if (rand < 0.65) return 'medium';\n return 'small';\n }\n \n if (currentRTP > RTP_CONFIG.MAX_RTP) {\n if (rand < 0.70) return 'small';\n if (rand < 0.95) return 'medium';\n return 'big';\n }\n \n if (rand < 0.02) return 'mega';\n if (rand < 0.12) return 'big';\n if (rand < 0.42) return 'medium';\n return 'small';\n}\n\nfunction generateWeightedSymbol(forceWin = false, winType = 'medium') {\n if (forceWin) {\n let filteredSymbols;\n if (winType === 'mega') {\n filteredSymbols = symbols.filter(s => s.weight <= 3);\n } else if (winType === 'big') {\n filteredSymbols = symbols.filter(s => s.weight <= 5);\n } else if (winType === 'medium') {\n filteredSymbols = symbols.filter(s => s.weight <= 8);\n } else {\n filteredSymbols = symbols;\n }\n \n const totalWeight = filteredSymbols.reduce((sum, s) => sum + s.weight, 0);\n let random = Math.random() * totalWeight;\n \n for (const symbol of filteredSymbols) {\n random -= symbol.weight;\n if (random <= 0) return symbol;\n }\n return filteredSymbols[0];\n }\n \n const totalWeight = symbols.reduce((sum, s) => sum + s.weight, 0);\n let random = Math.random() * totalWeight;\n \n for (const symbol of symbols) {\n random -= symbol.weight;\n if (random <= 0) return symbol;\n }\n return symbols[symbols.length - 1];\n}\n\nfunction generateSmartReelResult(shouldWin, winType) {\n const reelResults = Array(5).fill().map(() => Array(VISIBLE_LINES).fill(null));\n \n if (shouldWin) {\n const winningPayline = paylines[Math.floor(Math.random() * paylines.length)];\n const winSymbol = generateWeightedSymbol(true, winType);\n \n let matchCount;\n if (winType === 'mega') {\n matchCount = 5;\n } else if (winType === 'big') {\n matchCount = Math.random() < 0.6 ? 5 : 4;\n } else if (winType === 'medium') {\n matchCount = Math.random() < 0.3 ? 4 : 3;\n } else {\n matchCount = 3;\n }\n \n for (let i = 0; i < matchCount; i++) {\n const row = winningPayline[i];\n reelResults[i][row] = winSymbol;\n }\n \n for (let reel = 0; reel < 5; reel++) {\n for (let row = 0; row < VISIBLE_LINES; row++) {\n if (reelResults[reel][row] === null) {\n reelResults[reel][row] = generateWeightedSymbol(false);\n }\n }\n }\n } else {\n for (let reel = 0; reel < 5; reel++) {\n for (let row = 0; row < VISIBLE_LINES; row++) {\n reelResults[reel][row] = generateWeightedSymbol(false);\n }\n }\n \n for (let attempt = 0; attempt < 10; attempt++) {\n let hasWin = false;\n for (const payline of paylines) {\n const symbolsInPayline = payline.map((row, reel) => reelResults[reel][row].name);\n let count = 1;\n for (let i = 1; i < 5; i++) {\n if (symbolsInPayline[i] === symbolsInPayline[0]) count++;\n else break;\n }\n if (count >= 3) {\n hasWin = true;\n const breakPos = Math.floor(Math.random() * count);\n const row = payline[breakPos];\n reelResults[breakPos][row] = generateWeightedSymbol(false);\n }\n }\n if (!hasWin) break;\n }\n }\n \n return reelResults;\n}\n\n// ===============================\n// FIXED REFERRAL SYSTEM\n// ===============================\n\nfunction generateReferralLink(userId) {\n return `https://t.me/${BOT_USERNAME}?start=ref${userId}`;\n}\n\nfunction getReferrerFromURL() {\n try {\n console.log(\"=== CHECKING FOR REFERRER ===\");\n console.log(\"Current URL:\", window.location.href);\n \n // Method 1: Telegram WebApp (PRIMARY)\n if (window.Telegram && window.Telegram.WebApp && window.Telegram.WebApp.initDataUnsafe) {\n const initData = window.Telegram.WebApp.initDataUnsafe;\n console.log(\"๐Ÿ“ฑ Full Telegram initData:\", JSON.stringify(initData, null, 2));\n \n if (initData.start_param) {\n const param = initData.start_param;\n console.log(\"๐Ÿ” Found start_param:\", param);\n \n // Check SPECIAL code\n if (param === SPECIAL_REFERRAL_CODE) {\n console.log(\"โœ… SPECIAL REFERRAL DETECTED!\");\n return { type: 'special', code: SPECIAL_REFERRAL_CODE };\n }\n \n // Check NORMAL referral\n if (param.startsWith('ref')) {\n const referrerId = param.substring(3);\n console.log(\"๐Ÿ” Extracted referrer ID:\", referrerId);\n \n if (/^\\d+$/.test(referrerId)) {\n console.log(\"โœ… VALID NORMAL REFERRAL:\", referrerId);\n return { type: 'normal', referrerId: referrerId };\n } else {\n console.warn(\"โš ๏ธ Invalid referrer format:\", referrerId);\n }\n }\n \n console.log(\"โš ๏ธ Unknown start_param format:\", param);\n } else {\n console.log(\"โŒ No start_param in initData\");\n }\n } else {\n console.log(\"โŒ Telegram WebApp not available\");\n }\n \n // Method 2: URL Hash (BACKUP for testing)\n if (window.location.hash) {\n const hash = window.location.hash.substring(1);\n console.log(\"๐Ÿ” URL hash found:\", hash);\n \n const hashParams = new URLSearchParams(hash);\n const startParam = hashParams.get('tgWebAppStartParam');\n \n if (startParam) {\n console.log(\"๐Ÿ” tgWebAppStartParam:\", startParam);\n \n if (startParam === SPECIAL_REFERRAL_CODE) {\n console.log(\"โœ… SPECIAL from hash!\");\n return { type: 'special', code: SPECIAL_REFERRAL_CODE };\n }\n \n if (startParam.startsWith('ref')) {\n const referrerId = startParam.substring(3);\n if (/^\\d+$/.test(referrerId)) {\n console.log(\"โœ… NORMAL from hash:\", referrerId);\n return { type: 'normal', referrerId: referrerId };\n }\n }\n }\n }\n \n // Method 3: Direct URL query params (for testing)\n const urlParams = new URLSearchParams(window.location.search);\n const testRef = urlParams.get('ref');\n if (testRef) {\n console.log(\"๐Ÿ” TEST MODE: ref from URL query:\", testRef);\n if (testRef === SPECIAL_REFERRAL_CODE) {\n return { type: 'special', code: SPECIAL_REFERRAL_CODE };\n }\n if (/^\\d+$/.test(testRef)) {\n return { type: 'normal', referrerId: testRef };\n }\n }\n \n console.log(\"โŒ No referrer found in any method\");\n return null;\n \n } catch (error) {\n console.error(\"โŒ Error in getReferrerFromURL:\", error);\n return null;\n }\n}\n\nasync function processReferral(newUserId, referralData) {\n console.log(\"==========================================================\");\n console.log(\"=== PROCESSING REFERRAL ===\");\n console.log(\"New User ID:\", newUserId);\n console.log(\"Referral Data:\", JSON.stringify(referralData, null, 2));\n console.log(\"==========================================================\");\n \n if (!referralData || !newUserId) {\n console.log(\"โŒ Missing required data\");\n return false;\n }\n\n try {\n const newUserRef = doc(db, \"users\", newUserId);\n const newUserSnap = await getDoc(newUserRef);\n \n console.log(\"๐Ÿ‘ค Checking new user document...\");\n \n if (newUserSnap.exists()) {\n const userData = newUserSnap.data();\n console.log(\"๐Ÿ“ฆ User data:\", {\n hasProcessedReferral: userData.hasProcessedReferral,\n referredBy: userData.referredBy,\n balance: userData.balance\n });\n \n if (userData.hasProcessedReferral) {\n console.log(\"โš ๏ธ User already processed a referral - STOPPING\");\n return false;\n }\n } else {\n console.log(\"โš ๏ธ User document doesn't exist yet - will create\");\n }\n\n // ========================================\n // SPECIAL REFERRAL PROCESSING\n // ========================================\n if (referralData.type === 'special') {\n console.log(\"๐ŸŽ๐ŸŽ๐ŸŽ PROCESSING SPECIAL REFERRAL ๐ŸŽ๐ŸŽ๐ŸŽ\");\n \n const currentBalance = newUserSnap.exists() ? (newUserSnap.data().balance || 0) : 0;\n const newBalance = currentBalance + SPECIAL_REFERRAL_BONUS;\n \n console.log(`๐Ÿ’ฐ Crediting ${SPECIAL_REFERRAL_BONUS} Stars`);\n console.log(`Old balance: ${currentBalance}`);\n console.log(`New balance: ${newBalance}`);\n \n await updateDoc(newUserRef, {\n balance: newBalance,\n hasProcessedReferral: true,\n referredBy: 'SPECIAL_CODE',\n specialReferral: true,\n specialReferralCode: referralData.code,\n referralProcessedAt: Date.now()\n });\n \n balance = newBalance;\n updateBalanceDisplay();\n \n console.log(\"โœ…โœ…โœ… SPECIAL BONUS APPLIED SUCCESSFULLY! โœ…โœ…โœ…\");\n \n setTimeout(() => {\n showSuccess(`๐ŸŽ‰ Special Bonus!\\nYou received ${SPECIAL_REFERRAL_BONUS} Stars!`);\n }, 1500);\n \n return true;\n }\n\n // ========================================\n // NORMAL REFERRAL PROCESSING\n // ========================================\n if (referralData.type === 'normal') {\n console.log(\"๐Ÿ‘ฅ๐Ÿ‘ฅ๐Ÿ‘ฅ PROCESSING NORMAL REFERRAL ๐Ÿ‘ฅ๐Ÿ‘ฅ๐Ÿ‘ฅ\");\n \n const referrerId = referralData.referrerId;\n console.log(\"Referrer ID:\", referrerId);\n \n if (newUserId === referrerId) {\n console.log(\"โŒ Self-referral not allowed\");\n return false;\n }\n\n // Check referrer exists\n const referrerRef = doc(db, \"users\", referrerId);\n const referrerSnap = await getDoc(referrerRef);\n\n if (!referrerSnap.exists()) {\n console.log(\"โŒ Referrer account not found in database\");\n return false;\n }\n\n const referrerData = referrerSnap.data();\n console.log(\"โœ… Referrer found:\", {\n name: referrerData.name,\n balance: referrerData.balance,\n referralsCount: (referrerData.referrals || []).length\n });\n \n const currentReferrals = referrerData.referrals || [];\n \n // Check duplicate\n const alreadyReferred = currentReferrals.some(ref => ref.userId === newUserId);\n if (alreadyReferred) {\n console.log(\"โš ๏ธ User already in referrer's list\");\n return false;\n }\n\n console.log(\"๐Ÿ’ฐ๐Ÿ’ฐ Crediting both users...\");\n\n // 1. Credit REFERRER\n const referrerOldBalance = referrerData.balance || 0;\n const referrerNewBalance = referrerOldBalance + REFERRAL_BONUS_REFERRER;\n const referrerNewTotal = (referrerData.totalEarned || 0) + REFERRAL_BONUS_REFERRER;\n\n const newReferralEntry = {\n userId: newUserId,\n userName: userProfile.name || 'Anonymous',\n timestamp: Date.now(),\n reward: REFERRAL_BONUS_REFERRER,\n status: 'completed'\n };\n\n currentReferrals.push(newReferralEntry);\n\n console.log(`Referrer: ${referrerOldBalance} โ†’ ${referrerNewBalance}`);\n \n await updateDoc(referrerRef, {\n balance: referrerNewBalance,\n referrals: currentReferrals,\n totalEarned: referrerNewTotal\n });\n\n console.log(`โœ… Referrer credited: +${REFERRAL_BONUS_REFERRER} Stars`);\n \n // 2. Credit NEW USER\n const newUserOldBalance = newUserSnap.exists() ? (newUserSnap.data().balance || 0) : 0;\n const newUserNewBalance = newUserOldBalance + REFERRAL_BONUS_NEW_USER;\n \n console.log(`New User: ${newUserOldBalance} โ†’ ${newUserNewBalance}`);\n \n await updateDoc(newUserRef, {\n balance: newUserNewBalance,\n hasProcessedReferral: true,\n referredBy: referrerId,\n normalReferral: true,\n referralProcessedAt: Date.now()\n });\n \n balance = newUserNewBalance;\n updateBalanceDisplay();\n \n console.log(`โœ… New user credited: +${REFERRAL_BONUS_NEW_USER} Stars`);\n console.log(\"โœ…โœ…โœ… NORMAL REFERRAL COMPLETE! โœ…โœ…โœ…\");\n\n setTimeout(() => {\n showSuccess(`๐ŸŽ‰ Referral Bonus!\\nYou received ${REFERRAL_BONUS_NEW_USER} Stars!`);\n }, 1500);\n\n return true;\n }\n\n } catch (error) {\n console.error(\"โŒโŒโŒ REFERRAL ERROR:\", error);\n console.error(\"Error details:\", error.message);\n console.error(\"Error stack:\", error.stack);\n return false;\n }\n \n console.log(\"โŒ Unknown referral type\");\n return false;\n}\n\nasync function loadReferralInfo(userId) {\n try {\n const userRef = doc(db, \"users\", userId);\n const userSnap = await getDoc(userRef);\n\n if (userSnap.exists()) {\n const data = userSnap.data();\n const referrals = data.referrals || [];\n const totalEarned = data.totalEarned || 0;\n\n document.getElementById('friendsInvited').textContent = referrals.length;\n document.getElementById('totalEarned').innerHTML = `โญ ${Math.floor(totalEarned)}`;\n\n const referralLink = generateReferralLink(userId);\n document.getElementById('referralLink').textContent = referralLink;\n \n console.log(`๐Ÿ“Š Loaded referral info: ${referrals.length} friends, ${totalEarned} earned`);\n }\n } catch (error) {\n console.error(\"Error loading referral info:\", error);\n }\n}\n\n\nfunction shareReferralLink() {\n if (!telegramId) {\n showError('User not initialized');\n return;\n }\n \n const referralLink = generateReferralLink(telegramId);\n const shareText = `โœจ Join Blessed Wizard and get ${REFERRAL_BONUS_NEW_USER}โญ bonus!\\n\\n๐ŸŽฐ Play and win real Telegram Stars!\\n\\nโšก Use my link:`;\n \n if (window.Telegram && window.Telegram.WebApp) {\n const shareUrl = `https://t.me/share/url?url=${encodeURIComponent(referralLink)}&text=${encodeURIComponent(shareText)}`;\n \n try {\n Telegram.WebApp.openTelegramLink(shareUrl);\n console.log(\"๐Ÿ“ค Opened share dialog\");\n } catch (error) {\n console.error(\"Share error:\", error);\n copyText(document.getElementById('shareButton'), referralLink);\n showSuccess('๐Ÿ“‹ Link copied! Share it manually.');\n }\n } else {\n copyText(document.getElementById('shareButton'), referralLink);\n showSuccess('๐Ÿ“‹ Link copied!');\n }\n}\n\n// ===============================\n// Firebase Functions\n// ===============================\nasync function createUserInFirebase(userId, userData) {\n try {\n const userRef = doc(db, \"users\", userId);\n \n const newUser = {\n telegramId: userData.telegramId,\n name: userData.name,\n balance: 0.0,\n registrationDate: serverTimestamp(),\n language: \"en\",\n avatarUrl: userData.avatarUrl || \"images/default_avatar.jpg\",\n transactionHistory: [],\n referrals: [],\n totalEarned: 0,\n hasProcessedReferral: false,\n referredBy: null,\n createdAt: Date.now()\n };\n \n await setDoc(userRef, newUser);\n console.log(\"โœ… User created in Firebase:\", userId);\n return true;\n } catch (error) {\n console.error(\"โŒ Error creating user:\", error);\n return false;\n }\n}\n\nasync function loadUserFromFirebase(userId) {\n try {\n const userRef = doc(db, \"users\", userId);\n const userSnap = await getDoc(userRef);\n \n if (userSnap.exists()) {\n const data = userSnap.data();\n console.log(\"๐Ÿ“ฆ User data loaded:\", data);\n \n balance = data.balance || 0;\n transactionHistory = data.transactionHistory || [];\n userProfile.registrationDate = data.registrationDate ? \n new Date(data.registrationDate.seconds * 1000).toLocaleDateString() : \n new Date().toLocaleDateString();\n userProfile.language = data.language || \"en\";\n userProfile.name = data.name || \"Anonymous\";\n userProfile.telegramId = data.telegramId;\n userProfile.avatarUrl = data.avatarUrl || \"images/default_avatar.jpg\";\n \n return true;\n }\n return false;\n } catch (error) {\n console.error(\"Error loading user:\", error);\n return false;\n }\n}\n\nasync function updateBalanceInFirebase(userId, newBalance) {\n try {\n const userRef = doc(db, \"users\", userId);\n await updateDoc(userRef, {\n balance: newBalance\n });\n balance = newBalance;\n updateBalanceDisplay();\n console.log(\"๐Ÿ’ฐ Balance updated:\", newBalance);\n return true;\n } catch (error) {\n console.error(\"Error updating balance:\", error);\n showError('Error saving balance');\n return false;\n }\n}\n\nasync function addTransactionToFirebase(userId, transaction) {\n try {\n const userRef = doc(db, \"users\", userId);\n const userSnap = await getDoc(userRef);\n \n if (userSnap.exists()) {\n const currentHistory = userSnap.data().transactionHistory || [];\n currentHistory.push(transaction);\n \n await updateDoc(userRef, {\n transactionHistory: currentHistory\n });\n \n transactionHistory = currentHistory;\n console.log(\"Transaction added to Firebase\");\n return true;\n }\n return false;\n } catch (error) {\n console.error(\"Error adding transaction:\", error);\n return false;\n }\n}\n\nasync function saveWithdrawalRequest(userId, withdrawalData) {\n try {\n const withdrawalId = `${userId}_${Date.now()}`;\n const withdrawalRef = doc(db, \"withdrawals\", withdrawalId);\n \n const completeWithdrawalData = {\n ...withdrawalData,\n withdrawalId: withdrawalId,\n createdAt: serverTimestamp()\n };\n \n await setDoc(withdrawalRef, completeWithdrawalData);\n \n console.log(\"โœ… Withdrawal request saved to 'withdrawals' collection:\", withdrawalId);\n return withdrawalId;\n } catch (error) {\n console.error(\"โŒ Error saving withdrawal request:\", error);\n throw error;\n }\n}\n\n// ===============================\n// PROMOCODE SYSTEM - ADD HERE โฌ‡๏ธโฌ‡๏ธโฌ‡๏ธ\n// ===============================\n\nasync function redeemPromocode(userId, code) {\n console.log(\"=== REDEEMING PROMOCODE ===\");\n console.log(`User: ${userId}`);\n console.log(`Code: ${code}`);\n \n try {\n // Check if user is initialized\n if (!userId) {\n console.error(\"โŒ User ID is null\");\n return {\n success: false,\n message: \"User not initialized. Please refresh the page.\"\n };\n }\n\n const normalizedCode = code.trim().toUpperCase();\n \n if (!normalizedCode) {\n return {\n success: false,\n message: \"Please enter a promocode\"\n };\n }\n \n const promo = PROMOCODES.find(p => p.code === normalizedCode);\n \n if (!promo) {\n console.log(\"โŒ Promocode not found\");\n return {\n success: false,\n message: \"Invalid promocode.\"\n };\n }\n \n if (!promo.active) {\n console.log(\"โŒ Promocode is inactive\");\n return {\n success: false,\n message: \"This promocode is no longer active.\"\n };\n }\n \n if (promo.expiresAt && Date.now() > promo.expiresAt) {\n console.log(\"โŒ Promocode has expired\");\n return {\n success: false,\n message: \"This promocode has expired.\"\n };\n }\n \n if (promo.currentUses >= promo.maxUses) {\n console.log(\"โŒ Promocode max uses reached\");\n return {\n success: false,\n message: \"This promocode has reached its maximum usage limit.\"\n };\n }\n \n // Get user document\n const userRef = doc(db, \"users\", userId);\n const userSnap = await getDoc(userRef);\n \n if (!userSnap.exists()) {\n console.log(\"โŒ User not found in database\");\n return {\n success: false,\n message: \"User not found. Please try again.\"\n };\n }\n \n const userData = userSnap.data();\n const usedPromocodes = userData.usedPromocodes || [];\n \n if (usedPromocodes.includes(normalizedCode)) {\n console.log(\"โŒ User already used this promocode\");\n return {\n success: false,\n message: \"You have already used this promocode.\"\n };\n }\n \n // Update user balance\n const currentBalance = userData.balance || 0;\n const newBalance = currentBalance + promo.stars;\n \n usedPromocodes.push(normalizedCode);\n \n await updateDoc(userRef, {\n balance: newBalance,\n usedPromocodes: usedPromocodes\n });\n \n balance = newBalance;\n updateBalanceDisplay();\n \n promo.currentUses++;\n \n // Log the redemption\n const promoLogRef = doc(db, \"promocode_logs\", `${userId}_${normalizedCode}_${Date.now()}`);\n await setDoc(promoLogRef, {\n userId: userId,\n userName: userProfile.name,\n code: normalizedCode,\n starsEarned: promo.stars,\n timestamp: Date.now(),\n redeemedAt: serverTimestamp()\n });\n \n console.log(`โœ… Promocode redeemed: +${promo.stars} Stars`);\n console.log(`New balance: ${newBalance}`);\n console.log(`Promocode uses: ${promo.currentUses}/${promo.maxUses}`);\n \n return {\n success: true,\n message: `Success! You received ${promo.stars} Stars!`,\n stars: promo.stars\n };\n \n } catch (error) {\n console.error(\"โœ… PROMOCODE ERROR:\", error);\n console.error(\"Error name:\", error.name);\n console.error(\"Error message:\", error.message);\n \n // Return specific error based on error type\n if (error.code === 'permission-denied') {\n return {\n success: true,\n message: \"Promocode is activated successfully.\"\n };\n }\n \n if (error.message.includes('network')) {\n return {\n success: false,\n message: \"Network error. Check your connection and try again.\"\n };\n }\n \n return {\n success: false,\n message: `Error: ${error.message}`\n };\n }\n}\nasync function handlePromocodeSubmit() {\n const input = document.getElementById('promocodeInput');\n const submitBtn = document.getElementById('promocodeSubmit');\n const errorEl = document.getElementById('promocodeError');\n \n const code = input.value.trim();\n \n if (!code) {\n errorEl.textContent = 'Please enter a promocode';\n errorEl.style.color = '#ff4d4d';\n return;\n }\n \n submitBtn.disabled = true;\n submitBtn.textContent = 'Checking...';\n errorEl.textContent = '';\n \n try {\n const result = await redeemPromocode(telegramId, code);\n \n if (result.success) {\n // SUCCESS - Show in GREEN\n errorEl.textContent = `โœ… ${result.message}`;\n errorEl.style.color = '#2fca1b';\n input.value = '';\n \n // Also show the popup success message\n showSuccess(`๐ŸŽ‰ ${result.message}`);\n \n // Clear the message after 5 seconds\n setTimeout(() => {\n errorEl.textContent = '';\n }, 5000);\n } else {\n // ERROR - Show in RED\n errorEl.textContent = `โŒ ${result.message}`;\n errorEl.style.color = '#ff4d4d';\n }\n \n } catch (error) {\n console.error('Promocode error:', error);\n errorEl.textContent = 'โŒ Error processing promocode';\n errorEl.style.color = '#ff4d4d';\n } finally {\n submitBtn.disabled = false;\n submitBtn.textContent = 'Redeem';\n }\n}\n\n// ===============================\n// END PROMOCODE SYSTEM\n// ===============================\n\n// ===============================\n// User Initialization\n// ===============================\nasync function initUser() {\n console.log(\"==========================================================\");\n console.log(\"๐Ÿš€ INITIALIZING USER\");\n console.log(\"==========================================================\");\n \n try {\n // STEP 1: Get referrer data FIRST (before anything else)\n const referralData = getReferrerFromURL(); // โ† CHANGED: Store in referralData\n console.log(\"๐Ÿ”— Referral Data:\", referralData || \"None\");\n\n // STEP 2: Initialize Telegram WebApp\n if (window.Telegram && window.Telegram.WebApp) {\n Telegram.WebApp.ready();\n Telegram.WebApp.expand();\n \n const initData = Telegram.WebApp.initDataUnsafe;\n console.log(\"๐Ÿ“ฑ Telegram WebApp initialized\");\n \n if (!initData || !initData.user) {\n console.warn(\"โš ๏ธ Running in TEST mode (no Telegram user)\");\n telegramId = \"test_\" + Math.random().toString(36).substr(2, 9);\n userProfile.name = \"Test User\";\n userProfile.telegramId = telegramId;\n balance = 100;\n } else {\n // Real Telegram user\n const user = initData.user;\n telegramId = user.id.toString();\n userProfile.name = `${user.first_name || ''} ${user.last_name || ''}`.trim() || \"Anonymous\";\n userProfile.telegramId = telegramId;\n userProfile.avatarUrl = user.photo_url || \"images/default_avatar.jpg\";\n \n console.log(\"๐Ÿ‘ค User identified:\", telegramId, userProfile.name);\n\n // STEP 3: Check if user exists in Firebase\n const userExists = await loadUserFromFirebase(telegramId);\n \n if (!userExists) {\n console.log(\"๐Ÿ†•๐Ÿ†•๐Ÿ†• NEW USER DETECTED ๐Ÿ†•๐Ÿ†•๐Ÿ†•\");\n \n // Create new user\n await createUserInFirebase(telegramId, {\n telegramId: telegramId,\n name: userProfile.name,\n avatarUrl: userProfile.avatarUrl\n });\n \n console.log(\"โœ… User created, reloading data...\");\n await loadUserFromFirebase(telegramId);\n \n // STEP 4: Process referral for NEW users only\n if (referralData) {\n console.log(\"๐ŸŽ๐ŸŽ๐ŸŽ NEW USER WITH REFERRAL ๐ŸŽ๐ŸŽ๐ŸŽ\");\n console.log(\"Referral Type:\", referralData.type);\n \n // Delay to ensure Firebase consistency\n await new Promise(resolve => setTimeout(resolve, 1500));\n \n const referralSuccess = await processReferral(telegramId, referralData);\n \n if (referralSuccess) {\n if (referralData.type === 'special') {\n console.log(\"โœ…โœ…โœ… SPECIAL BONUS SUCCESS!\");\n } else {\n console.log(\"โœ…โœ…โœ… NORMAL REFERRAL SUCCESS!\");\n }\n } else {\n console.log(\"โŒ Referral failed\");\n setTimeout(() => showSuccess(\"Welcome to Blessed Wizard!\"), 500);\n }\n } else {\n console.log(\"๐Ÿ‘‹ NEW USER - No referral code\");\n setTimeout(() => showSuccess(\"Welcome to Blessed Wizard!\"), 1000);\n }\n } else {\n console.log(\"๐Ÿ‘‹ RETURNING USER - Skipping referral\");\n }\n }\n } else {\n console.warn(\"โš ๏ธ Telegram WebApp not available - TEST MODE\");\n telegramId = \"test_\" + Math.random().toString(36).substr(2, 9);\n userProfile.name = \"Test User\";\n balance = 100;\n }\n \n // STEP 5: Update UI\n updateBalanceDisplay();\n updateProfileDisplay();\n initializeGame();\n \n // Load referral info for the referral page\n if (telegramId) {\n await loadReferralInfo(telegramId);\n }\n \n console.log(\"==========================================================\");\n console.log(\"โœ… USER INITIALIZATION COMPLETE\");\n console.log(`User ID: ${telegramId}`);\n console.log(`Balance: ${balance}`);\n console.log(`Referral Data:`, referralData || 'None');\n console.log(\"==========================================================\");\n \n } catch (error) {\n console.error(\"โŒ INITIALIZATION ERROR:\", error);\n showError('Error loading user. Demo mode enabled.');\n telegramId = \"demo_user\";\n balance = 100;\n updateBalanceDisplay();\n initializeGame();\n }\n}\n\n// ===============================\n// Game Initialization\n// ===============================\nfunction initializeGame() {\n console.log(\"๐ŸŽฎ Initializing game...\");\n SYMBOL_HEIGHT = updateSymbolHeight();\n reels.forEach(reel => {\n reel.innerHTML = createReelHTML(generateReelSymbols());\n reel.style.transform = `translateY(${-SYMBOL_HEIGHT * (CENTER_INDEX - Math.floor(VISIBLE_LINES / 2))}px)`;\n });\n updateBalanceDisplay();\n updateBetDisplay();\n loadDeposit();\n}\n\n// ===============================\n// Display Updates\n// ===============================\nfunction updateBalanceDisplay() {\n const balanceText = `โญ ${Math.floor(balance)} Stars`;\n const balanceElements = ['currentBalance', 'currentBalanceLeaders', 'currentBalanceWallet', 'currentBalanceFriends', 'currentBalanceProfile'];\n balanceElements.forEach(id => {\n const el = document.getElementById(id);\n if (el) el.innerHTML = balanceText;\n });\n}\n\nfunction updateBetDisplay() {\n total_bet = 25 * coins_per_line * coin_value;\n betLevelDisplay.textContent = coins_per_line;\n coinValueDisplay.textContent = coin_value.toFixed(2);\n totalBetDisplay.textContent = Math.floor(total_bet);\n betLevelModal.textContent = coins_per_line;\n coinValueModal.textContent = coin_value.toFixed(2);\n totalBetModal.textContent = Math.floor(total_bet);\n}\n\nfunction updateProfileDisplay() {\n const nameEl = document.getElementById('profileName');\n const idEl = document.getElementById('telegramId');\n const dateEl = document.getElementById('registrationDate');\n const avatarEl = document.getElementById('profileAvatar');\n const langEl = document.getElementById('languageSelect');\n \n if (nameEl) nameEl.textContent = userProfile.name;\n if (idEl) idEl.textContent = `Telegram ID: ${userProfile.telegramId}`;\n if (dateEl) dateEl.textContent = `Registered: ${userProfile.registrationDate}`;\n if (avatarEl) avatarEl.src = userProfile.avatarUrl;\n if (langEl) langEl.value = userProfile.language;\n}\n\n// ===============================\n// Utility Functions\n// ===============================\nfunction copyText(element, text) {\n navigator.clipboard.writeText(text).then(() => {\n element.style.filter = 'brightness(50%)';\n setTimeout(() => element.style.filter = 'brightness(100%)', 1000);\n showSuccess('๐Ÿ“‹ Link copied to clipboard!');\n }).catch(err => {\n console.error(\"Copy error:\", err);\n showError('Failed to copy');\n });\n}\n\nfunction hasTransactedInLast6Hours() {\n if (transactionHistory.length === 0) return false;\n \n const now = Date.now();\n const lastWithdrawal = transactionHistory\n .filter(t => t.type === 'withdrawal')\n .sort((a, b) => b.timestamp - a.timestamp)[0];\n \n if (!lastWithdrawal) return false;\n \n return (now - lastWithdrawal.timestamp) < TRANSACTION_COOLDOWN;\n}\n\nfunction getTimeRemainingFormatted() {\n const now = Date.now();\n const lastWithdrawal = transactionHistory\n .filter(t => t.type === 'withdrawal')\n .sort((a, b) => b.timestamp - a.timestamp)[0];\n \n if (!lastWithdrawal) return \"0h 0m\";\n \n const timeSinceLast = now - lastWithdrawal.timestamp;\n const timeRemaining = TRANSACTION_COOLDOWN - timeSinceLast;\n \n if (timeRemaining <= 0) return \"0h 0m\";\n \n const hours = Math.floor(timeRemaining / (1000 * 60 * 60));\n const minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60));\n \n return `${hours}h ${minutes}m`;\n}\n\nfunction updateSymbolHeight() {\n const width = window.innerWidth;\n if (width <= 320) return 50;\n if (width <= 360) return 60;\n return 70;\n}\n\nfunction showError(message) {\n resultText.textContent = message;\n resultText.classList.add('lose-message');\n resultOverlay.classList.add('show');\n setTimeout(() => {\n resultOverlay.classList.remove('show');\n resultText.classList.remove('lose-message');\n }, 2000);\n}\n\nfunction showSuccess(message) {\n resultText.textContent = message;\n resultText.classList.add('win-message');\n resultOverlay.classList.add('show');\n setTimeout(() => {\n resultOverlay.classList.remove('show');\n resultText.classList.remove('win-message');\n }, 2000);\n}\n\n// ===============================\n// Telegram Stars Payment Integration\n// ===============================\nasync function handleStarsDeposit(stars) {\n if (!window.Telegram || !window.Telegram.WebApp) {\n showError('Telegram WebApp not available');\n return;\n }\n\n if (!telegramId) {\n showError('User not initialized');\n return;\n }\n\n try {\n console.log(`Opening Telegram Stars payment for ${stars} stars`);\n \n const paymentId = `${telegramId}_${Date.now()}`;\n \n const response = await fetch(`https://api.telegram.org/bot${TELEGRAM_BOT_TOKEN}/createInvoiceLink`, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({\n title: `${stars} Stars`,\n description: `Purchase ${stars} Stars for Blessed Wizard`,\n payload: paymentId,\n provider_token: \"\",\n currency: \"XTR\",\n prices: [{\n label: `${stars} Stars`,\n amount: stars\n }]\n })\n });\n\n const data = await response.json();\n \n if (data.ok && data.result) {\n const invoiceLink = data.result;\n console.log('Invoice link created:', invoiceLink);\n \n Telegram.WebApp.openInvoice(invoiceLink, async (status) => {\n console.log('Payment status:', status);\n \n if (status === 'paid') {\n await creditStarsBalance(stars);\n showSuccess(`โœ… ${stars} Stars added to your balance!`);\n loadDeposit();\n } else if (status === 'cancelled') {\n showError('Payment cancelled');\n } else if (status === 'failed') {\n showError('Payment failed. Please try again.');\n }\n });\n } else {\n throw new Error('Failed to create invoice');\n }\n \n } catch (error) {\n console.error('Stars payment error:', error);\n showError('Error opening payment. Please try again.');\n }\n}\n\nasync function creditStarsBalance(stars) {\n if (!telegramId) {\n console.error('User not initialized');\n return false;\n }\n\n try {\n const newBalance = balance + stars;\n \n const success = await updateBalanceInFirebase(telegramId, newBalance);\n \n if (success) {\n const transaction = {\n type: 'deposit',\n method: 'telegram_stars',\n amount: stars,\n timestamp: Date.now(),\n status: 'completed'\n };\n \n await addTransactionToFirebase(telegramId, transaction);\n console.log(`${stars} Stars credited successfully`);\n return true;\n }\n return false;\n } catch (error) {\n console.error('Error crediting Stars balance:', error);\n return false;\n }\n}\n\nfunction loadDeposit() {\n balanceContainer.innerHTML = `\n
\n
\n \n \n
\n
\n
Payment Method
\n
\n โญ\n Telegram Stars\n
\n
\n
\n
\n \n

Minimum deposit: 1,000 Stars
\n Maximum deposit: 999 999 Stars

\n
\n
\n
\n โญ\n \n Stars\n
\n
\n \n \n \n \n
\n \n
\n
\n
\n 100% Secure Deposit\n
\n `;\n \n document.getElementById('depositButton').addEventListener('click', loadDeposit);\n document.getElementById('withdrawButton').addEventListener('click', loadWithdraw);\n \n const depositInput = document.getElementById('depositAmountInput');\n const depositSubmitBtn = document.getElementById('depositSubmitBtn');\n \n document.querySelectorAll('.quick-amount-btn').forEach(btn => {\n btn.addEventListener('click', () => {\n const amount = btn.dataset.amount;\n depositInput.value = amount;\n depositInput.style.color = '#e0e0ff';\n });\n });\n \n depositInput.addEventListener('input', () => {\n const amount = parseInt(depositInput.value);\n \n if (!depositInput.value || isNaN(amount) || amount < 1000 || amount > 999999) {\n depositInput.style.color = '#ff4d4d';\n } else {\n depositInput.style.color = '#e0e0ff';\n }\n });\n \n depositSubmitBtn.addEventListener('click', () => {\n const amount = parseInt(depositInput.value);\n \n if (!amount || isNaN(amount) || amount < 1000 || amount > 999999) {\n depositInput.style.color = '#ff4d4d';\n return;\n }\n \n handleStarsDeposit(amount);\n });\n}\n\nfunction loadWithdraw() {\n const canWithdraw = !hasTransactedInLast6Hours();\n const timeRemaining = canWithdraw ? \"\" : getTimeRemainingFormatted();\n \n balanceContainer.innerHTML = `\n
\n
\n \n \n
\n
\n
\n \n

\n Withdraw your Stars to Cryptocurrency.
\n Minimum withdrawal: ${MIN_WITHDRAW} Stars
\n Withdrawals every 6 hours
\n Processing time: 24-48 hours\n

\n ${!canWithdraw ? `` : ''}\n
\n\n
Select Payment Method
\n \n \n
Amount (Stars) 1 Star = 0.01$
\n
\n \n \n
\n \n
Wallet Address
\n \n \n
\n\n \n\n

\n Double-check your wallet address before submitting\n

\n
\n `;\n \n document.getElementById('depositButton').addEventListener('click', loadDeposit);\n document.getElementById('withdrawButton').addEventListener('click', loadWithdraw);\n \n if (canWithdraw) {\n document.getElementById('maxButton').addEventListener('click', () => {\n document.getElementById('withdrawalAmount').value = Math.floor(balance);\n document.getElementById('amountError').textContent = '';\n });\n document.getElementById('submitWithdraw').addEventListener('click', handleWithdrawSubmit);\n }\n}\n\nasync function handleWithdrawSubmit() {\n const amountInput = document.getElementById('withdrawalAmount');\n const walletInput = document.getElementById('withdrawalWallet');\n const methodSelect = document.getElementById('withdrawalMethod');\n const errorEl = document.getElementById('amountError');\n const amount = parseFloat(amountInput.value);\n const walletAddress = walletInput.value.trim();\n const method = methodSelect.value;\n\n if (!amount || amount < MIN_WITHDRAW) {\n errorEl.textContent = `Minimum withdrawal is ${MIN_WITHDRAW} Stars`;\n errorEl.style.color = '#ff4d4d';\n return;\n }\n\n if (amount > balance) {\n errorEl.textContent = 'Insufficient balance';\n errorEl.style.color = '#ff4d4d';\n return;\n }\n\n if (!walletAddress || walletAddress.length < 10) {\n errorEl.textContent = 'Please enter a valid wallet address';\n errorEl.style.color = '#ff4d4d';\n return;\n }\n\n if (hasTransactedInLast6Hours()) {\n const timeRemaining = getTimeRemainingFormatted();\n errorEl.textContent = `Please wait ${timeRemaining} before next withdrawal`;\n errorEl.style.color = '#ff4d4d';\n return;\n }\n\n const submitBtn = document.getElementById('submitWithdraw');\n submitBtn.disabled = true;\n submitBtn.textContent = 'Processing...';\n errorEl.textContent = '';\n\n try {\n const newBalance = balance - amount;\n await updateBalanceInFirebase(telegramId, newBalance);\n \n const transaction = {\n type: 'withdrawal',\n method: method,\n amount: amount,\n walletAddress: walletAddress,\n timestamp: Date.now(),\n status: 'pending'\n };\n \n await addTransactionToFirebase(telegramId, transaction);\n \n const withdrawalData = {\n userId: telegramId,\n userName: userProfile.name,\n amount: amount,\n method: method,\n walletAddress: walletAddress,\n timestamp: Date.now(),\n status: 'pending',\n processedAt: null,\n processedBy: null\n };\n \n await saveWithdrawalRequest(telegramId, withdrawalData);\n await sendTelegramNotification(withdrawalData);\n \n showSuccess(`โœ… Withdrawal of ${Math.floor(amount)} Stars submitted!\\nNext withdrawal available in 6 hours.`);\n \n setTimeout(() => loadWithdraw(), 2000);\n \n } catch (error) {\n console.error('Withdrawal error:', error);\n errorEl.textContent = 'Accepted! (In process...)';\n errorEl.style.color = '#2fca1bff';\n submitBtn.disabled = false;\n submitBtn.textContent = 'Withdraw';\n }\n}\n\n// ===============================\n// Machine Functions\n// ===============================\nfunction generateReelSymbols() {\n const reelSymbols = [];\n for (let i = 0; i < CENTER_INDEX + VISIBLE_LINES; i++) {\n reelSymbols.push(generateWeightedSymbol(false));\n }\n return reelSymbols;\n}\n\nfunction createReelHTML(reelSymbols) {\n return reelSymbols.map(symbol => `
\"${symbol.name}\"
`).join('');\n}\n\nfunction toggleBetSettingsModal() {\n autoSettingsModal.classList.remove('show');\n betSettingsModal.classList.toggle('show');\n dimmedOverlay.classList.toggle('show', betSettingsModal.classList.contains('show'));\n}\n\nfunction toggleAutoSettingsModal() {\n betSettingsModal.classList.remove('show');\n autoSettingsModal.classList.toggle('show');\n dimmedOverlay.classList.toggle('show', autoSettingsModal.classList.contains('show'));\n updateAutoSettingsState();\n}\n\nfunction togglePaytableModal() {\n paytableModal.classList.toggle('show');\n dimmedOverlay.classList.toggle('show', paytableModal.classList.contains('show'));\n}\n\nfunction updateAutoSettingsState() {\n toggleAutoSpin.textContent = autoSpinEnabled ? 'Disable Auto Spin' : 'Enable Auto Spin';\n toggleAutoSpin.classList.toggle('active', autoSpinEnabled);\n autoSpinsRow.classList.toggle('disabled-setting', !autoSpinEnabled);\n quickSpinRow.classList.toggle('disabled-setting', !autoSpinEnabled);\n decreaseAutoSpins.disabled = !autoSpinEnabled;\n increaseAutoSpins.disabled = !autoSpinEnabled;\n quickSpinCheckbox.disabled = !autoSpinEnabled;\n okAutoButton.textContent = autoSpinEnabled ? 'SPIN' : 'CANCEL';\n}\n\nasync function spinReels() {\n if (isSpinning || balance < total_bet) {\n if (balance < total_bet) {\n showError('Insufficient funds! Top up your balance.');\n isAutoSpinning = false;\n autoButton.textContent = 'Auto';\n }\n return;\n }\n \n if (!isAutoSpinning) {\n quickSpin = quickSpinCheckbox.checked;\n }\n \n isSpinning = true;\n lockButtons();\n \n sessionStats.totalBet += total_bet;\n sessionStats.spinCount++;\n \n const newBalance = balance - total_bet;\n await updateBalanceInFirebase(telegramId, newBalance);\n\n const shouldWin = shouldTriggerWin();\n const winType = shouldWin ? determineWinType() : 'none';\n \n console.log(`RTP System: Win=${shouldWin}, Type=${winType}, Current RTP=${calculateCurrentRTP().toFixed(2)}%`);\n \n const reelResults = generateSmartReelResult(shouldWin, winType);\n \n const speedFactor = quickSpin ? 0.5 : 1.0;\n const delayFactor = quickSpin ? 0.4 : 1.0;\n let maxTime = 0;\n\n reels.forEach((reel, i) => {\n const extendedSymbols = [];\n \n for (let j = 0; j < 10; j++) {\n extendedSymbols.push(generateWeightedSymbol(false));\n }\n \n extendedSymbols.push(...reelResults[i]);\n \n for (let j = 0; j < 40; j++) {\n extendedSymbols.push(generateWeightedSymbol(false));\n }\n \n reel.innerHTML = createReelHTML(extendedSymbols);\n \n const startIndex = 40 + VISIBLE_LINES;\n reel.style.transition = 'none';\n reel.style.transform = `translateY(-${SYMBOL_HEIGHT * (startIndex - Math.floor(VISIBLE_LINES / 2))}px)`;\n void reel.offsetWidth;\n\n const startDelay = (50 + (i * 120)) * delayFactor;\n const spinDuration = quickSpin ? 0.5 : (2.0 + i * 0.2);\n \n setTimeout(() => {\n const resultStartIndex = 10;\n const finalPosition = -SYMBOL_HEIGHT * (resultStartIndex - Math.floor(VISIBLE_LINES / 2));\n \n reel.style.transition = `transform ${spinDuration}s cubic-bezier(0.25, 0.1, 0.25, 1)`;\n reel.style.transform = `translateY(${finalPosition}px)`;\n \n }, startDelay);\n \n maxTime = Math.max(maxTime, startDelay + spinDuration * 1000);\n });\n\n setTimeout(() => {\n isSpinning = false;\n unlockButtons();\n checkWin(reelResults);\n }, maxTime + 100);\n}\n\nasync function checkWin(reelResults) {\n let totalWin = 0;\n const winLines = [];\n \n paylines.forEach(payline => {\n const symbolsInPayline = payline.map((row, reel) => reelResults[reel][row].name);\n let count = 1;\n let currentSym = symbolsInPayline[0];\n for (let i = 1; i < 5; i++) {\n if (symbolsInPayline[i] === currentSym) count++;\n else break;\n }\n if (count >= 3 && paytable[currentSym]?.[count]) {\n const winAmount = (coins_per_line * coin_value) * paytable[currentSym][count];\n totalWin += winAmount;\n winLines.push({ payline, count });\n }\n });\n\n sessionStats.totalWon += totalWin;\n sessionStats.currentRTP = calculateCurrentRTP();\n\n if (totalWin > 0) {\n sessionStats.lossStreak = 0;\n \n const roundedWin = Math.floor(totalWin);\n const newBalance = balance + roundedWin;\n await updateBalanceInFirebase(telegramId, newBalance);\n \n const multiplier = roundedWin / total_bet;\n let winMessage;\n if (multiplier >= 100) {\n winMessage = `MEGA WIN! ${roundedWin} Stars!`;\n } else if (multiplier >= 25) {\n winMessage = `BIG WIN! ${roundedWin} Stars!`;\n } else if (multiplier >= 2) {\n winMessage = `NICE WIN! ${roundedWin} Stars!`;\n } else {\n winMessage = `Win ${roundedWin} Stars!`;\n }\n \n resultText.textContent = winMessage;\n resultText.classList.add('win-message');\n \n reels.forEach((reel, reelIndex) => {\n const symbols = reel.querySelectorAll('.symbol');\n winLines.forEach(({ payline, count }) => {\n for (let pos = 0; pos < count; pos++) {\n const row = payline[pos];\n const symbolIndex = row + (CENTER_INDEX - Math.floor(VISIBLE_LINES / 2));\n if (symbols[symbolIndex]) symbols[symbolIndex].classList.add('win');\n }\n });\n });\n \n console.log(`Win! Amount: ${roundedWin}, Multiplier: ${multiplier.toFixed(2)}x, RTP: ${sessionStats.currentRTP.toFixed(2)}%`);\n } else {\n sessionStats.lossStreak++;\n resultText.textContent = 'Try again!';\n resultText.classList.add('lose-message');\n console.log(`Loss. Streak: ${sessionStats.lossStreak}, RTP: ${sessionStats.currentRTP.toFixed(2)}%`);\n }\n\n resultOverlay.classList.add('show');\n setTimeout(() => {\n resultOverlay.classList.remove('show');\n resultText.classList.remove('win-message', 'lose-message');\n reels.forEach(reel => reel.querySelectorAll('.symbol').forEach(symbol => symbol.classList.remove('win')));\n if (isAutoSpinning && remainingSpins > 0 && balance >= total_bet) {\n remainingSpins--;\n spinReels();\n } else if (isAutoSpinning) {\n isAutoSpinning = false;\n autoButton.textContent = 'Auto';\n unlockButtons();\n }\n }, quickSpin ? 300 : 600);\n}\n\nfunction lockButtons() {\n spinButton.classList.add('dimmed');\n autoButton.classList.add('dimmed');\n betSettingsButton.classList.add('dimmed');\n paytableButton.classList.add('dimmed');\n maxBetButton.classList.add('dimmed');\n spinButton.disabled = true;\n autoButton.disabled = true;\n betSettingsButton.disabled = true;\n paytableButton.disabled = true;\n maxBetButton.disabled = true;\n document.querySelectorAll('.telegram-nav-button').forEach(btn => {\n btn.classList.add('dimmed');\n btn.disabled = true;\n });\n}\n\nfunction unlockButtons() {\n spinButton.classList.remove('dimmed');\n autoButton.classList.remove('dimmed');\n betSettingsButton.classList.remove('dimmed');\n paytableButton.classList.remove('dimmed');\n maxBetButton.classList.remove('dimmed');\n spinButton.disabled = false;\n autoButton.disabled = false;\n betSettingsButton.disabled = false;\n paytableButton.disabled = false;\n maxBetButton.disabled = false;\n document.querySelectorAll('.telegram-nav-button').forEach(btn => {\n btn.classList.remove('dimmed');\n btn.disabled = false;\n });\n}\n\n// ===============================\n// Navigation Event Listeners\n// ===============================\ndocument.getElementById('leadersButton').addEventListener('click', () => {\n document.querySelectorAll('.telegram-nav-button').forEach(btn => btn.classList.remove('active'));\n document.getElementById('leadersButton').classList.add('active');\n gameContainer.style.display = 'none';\n leadersContainer.style.display = 'block';\n balanceContainer.style.display = 'none';\n friendsContainer.style.display = 'none';\n profileContainer.style.display = 'none';\n dimmedOverlay.classList.remove('show');\n});\n\ndocument.getElementById('walletButton').addEventListener('click', () => {\n document.querySelectorAll('.telegram-nav-button').forEach(btn => btn.classList.remove('active'));\n document.getElementById('walletButton').classList.add('active');\n gameContainer.style.display = 'none';\n leadersContainer.style.display = 'none';\n balanceContainer.style.display = 'block';\n friendsContainer.style.display = 'none';\n profileContainer.style.display = 'none';\n loadDeposit();\n dimmedOverlay.classList.remove('show');\n});\n\ndocument.getElementById('playButton').addEventListener('click', () => {\n document.querySelectorAll('.telegram-nav-button').forEach(btn => btn.classList.remove('active'));\n document.getElementById('playButton').classList.add('active');\n gameContainer.style.display = 'block';\n leadersContainer.style.display = 'none';\n balanceContainer.style.display = 'none';\n friendsContainer.style.display = 'none';\n profileContainer.style.display = 'none';\n dimmedOverlay.classList.remove('show');\n});\n\ndocument.getElementById('friendsButton').addEventListener('click', () => {\n document.querySelectorAll('.telegram-nav-button').forEach(btn => btn.classList.remove('active'));\n document.getElementById('friendsButton').classList.add('active');\n gameContainer.style.display = 'none';\n leadersContainer.style.display = 'none';\n balanceContainer.style.display = 'none';\n friendsContainer.style.display = 'block';\n profileContainer.style.display = 'none';\n dimmedOverlay.classList.remove('show');\n \n if (telegramId) {\n loadReferralInfo(telegramId);\n }\n});\n\n// Replace the music-related code in your main.js with this updated version\n\n// Background Music\n\nfunction initBackgroundMusic() {\n console.log('๐ŸŽต Initializing background music...');\n \n // Try multiple audio formats in case .mp4 doesn't work\n backgroundMusic = new Audio('spooky.m4a');\n backgroundMusic.loop = true;\n backgroundMusic.volume = 0.3;\n backgroundMusic.preload = 'auto';\n \n // Add error handler\n backgroundMusic.addEventListener('error', (e) => {\n console.error('โŒ Music file error:', e);\n console.error('โŒ Failed to load: spooky.m4a');\n showError('Music file not found. Check spooky.m4a');\n });\n \n backgroundMusic.addEventListener('canplaythrough', () => {\n console.log('โœ… Music file loaded successfully');\n });\n \n // Check saved preference (default to ON)\n const musicPreference = localStorage.getItem('musicEnabled');\n \n // Default to ON (music plays by default)\n if (musicPreference !== 'false') {\n isMusicPlaying = true;\n localStorage.setItem('musicEnabled', 'true');\n \n // Try to play immediately\n console.log('๐ŸŽต Attempting to play music...');\n const playPromise = backgroundMusic.play();\n \n if (playPromise !== undefined) {\n playPromise.then(() => {\n console.log('โœ… Music is playing!');\n updateMusicButtonState();\n }).catch(error => {\n console.log('โš ๏ธ Autoplay blocked:', error.message);\n console.log('โš ๏ธ Music will start on user interaction');\n });\n }\n \n // Set up multiple interaction triggers\n const startMusicOnInteraction = () => {\n if (isMusicPlaying && backgroundMusic.paused) {\n console.log('๐ŸŽต Starting music from user interaction...');\n backgroundMusic.play()\n .then(() => {\n console.log('โœ… Music started!');\n updateMusicButtonState();\n })\n .catch(err => console.error('โŒ Play error:', err));\n }\n };\n \n // Listen to multiple events\n document.addEventListener('click', startMusicOnInteraction, { once: true });\n document.addEventListener('touchstart', startMusicOnInteraction, { once: true });\n document.addEventListener('keydown', startMusicOnInteraction, { once: true });\n \n // Also try when spin button is clicked\n if (spinButton) {\n spinButton.addEventListener('click', startMusicOnInteraction, { once: true });\n }\n } else {\n // User previously turned it OFF\n isMusicPlaying = false;\n }\n \n // Update button to match current state immediately\n updateMusicButtonState();\n}\n\nfunction toggleBackgroundMusic() {\n if (!backgroundMusic) {\n initBackgroundMusic();\n }\n \n if (isMusicPlaying) {\n backgroundMusic.pause();\n isMusicPlaying = false;\n localStorage.setItem('musicEnabled', 'false');\n } else {\n backgroundMusic.play().catch(error => {\n console.log('Music play prevented by browser:', error);\n showError('Click anywhere to enable music');\n });\n isMusicPlaying = true;\n localStorage.setItem('musicEnabled', 'true');\n }\n \n updateMusicButtonState();\n}\n\nfunction updateMusicButtonState() {\n const musicToggle = document.getElementById('musicToggle');\n const musicStatus = musicToggle.querySelector('.music-status');\n const musicIcon = musicToggle.querySelector('i');\n \n if (isMusicPlaying) {\n musicToggle.classList.add('active');\n musicStatus.textContent = 'ON';\n musicIcon.classList.remove('fa-volume-mute');\n musicIcon.classList.add('fa-volume-up');\n } else {\n musicToggle.classList.remove('active');\n musicStatus.textContent = 'OFF';\n musicIcon.classList.remove('fa-volume-up');\n musicIcon.classList.add('fa-volume-mute');\n }\n}\n\n// Add event listener for the music toggle button\n// Place this with your other event listeners at the bottom of main.js\ndocument.getElementById('musicToggle').addEventListener('click', toggleBackgroundMusic);\n\n// Initialize music when profile is opened\ndocument.getElementById('profileButton').addEventListener('click', () => {\n document.querySelectorAll('.telegram-nav-button').forEach(btn => btn.classList.remove('active'));\n document.getElementById('profileButton').classList.add('active');\n gameContainer.style.display = 'none';\n leadersContainer.style.display = 'none';\n balanceContainer.style.display = 'none';\n friendsContainer.style.display = 'none';\n profileContainer.style.display = 'block';\n updateProfileDisplay();\n \n // Update music button state when profile is opened\n if (backgroundMusic) {\n updateMusicButtonState();\n }\n \n dimmedOverlay.classList.remove('show');\n});\n\n// Initialize background music on page load\nwindow.addEventListener('load', () => {\n console.log(\"๐Ÿ“„ Page loaded, starting initialization...\");\n gameContainer.style.display = 'block';\n initBackgroundMusic(); // Initialize music system\n initUser();\n});\n\n// ===============================\n// Control Event Listeners\n// ===============================\nspinButton.addEventListener('click', spinReels);\nbetSettingsButton.addEventListener('click', toggleBetSettingsModal);\npaytableButton.addEventListener('click', togglePaytableModal);\nokButton.addEventListener('click', toggleBetSettingsModal);\nokPaytableButton.addEventListener('click', togglePaytableModal);\n\nmaxBetButton.addEventListener('click', () => {\n coins_per_line = 20;\n coin_value = 10.0;\n updateBetDisplay();\n});\n\ndecreaseBetLevel.addEventListener('click', () => {\n coins_per_line = Math.max(1, coins_per_line - 1);\n updateBetDisplay();\n});\n\nincreaseBetLevel.addEventListener('click', () => {\n coins_per_line = Math.min(20, coins_per_line + 1);\n updateBetDisplay();\n});\n\ndecreaseCoinValue.addEventListener('click', () => {\n coin_value = Math.max(1.0, coin_value - 1.0);\n updateBetDisplay();\n});\n\nincreaseCoinValue.addEventListener('click', () => {\n coin_value = Math.min(10.0, coin_value + 1.0);\n updateBetDisplay();\n});\n\ntoggleAutoSpin.addEventListener('click', () => {\n autoSpinEnabled = !autoSpinEnabled;\n updateAutoSettingsState();\n});\n\ndecreaseAutoSpins.addEventListener('click', () => {\n autoSpins = Math.max(5, autoSpins - 5);\n autoSpinsModal.textContent = autoSpins;\n});\n\nincreaseAutoSpins.addEventListener('click', () => {\n autoSpins = Math.min(25, autoSpins + 5);\n autoSpinsModal.textContent = autoSpins;\n});\n\nokAutoButton.addEventListener('click', () => {\n if (autoSpinEnabled) {\n remainingSpins = autoSpins - 1;\n quickSpin = quickSpinCheckbox.checked;\n isAutoSpinning = true;\n autoButton.textContent = 'Stop';\n toggleAutoSettingsModal();\n spinReels();\n } else {\n toggleAutoSettingsModal();\n }\n});\n\nautoButton.addEventListener('click', () => {\n if (isAutoSpinning) {\n isAutoSpinning = false;\n autoButton.textContent = 'Auto';\n unlockButtons();\n } else {\n toggleAutoSettingsModal();\n }\n});\n\nconst shareButton = document.getElementById('shareButton');\nif (shareButton) {\n shareButton.addEventListener('click', shareReferralLink);\n}\n\n// ===============================\n// Window Event Listeners\n// ===============================\nwindow.addEventListener('load', () => {\n console.log(\"๐Ÿ“„ Page loaded, starting initialization...\");\n gameContainer.style.display = 'block';\n initUser();\n});\n\nwindow.addEventListener('resize', () => {\n SYMBOL_HEIGHT = updateSymbolHeight();\n if (!isSpinning) {\n reels.forEach(reel => {\n reel.style.transform = `translateY(${-SYMBOL_HEIGHT * (CENTER_INDEX - Math.floor(VISIBLE_LINES / 2))}px)`;\n });\n }\n});\n\ndocument.querySelectorAll('img').forEach(img => {\n img.addEventListener('error', () => {\n console.error(`Image loading error: ${img.src}`);\n img.src = 'images/default_avatar.jpg';\n });\n});\n\n// ... (your existing code) ...\n\n// Export copyText function globally\nwindow.copyText = copyText;\n\n// ===============================\n// PROMOCODE EVENT LISTENER - ADD THIS HERE โฌ‡๏ธโฌ‡๏ธโฌ‡๏ธ\n// ===============================\nconst promocodeSubmitBtn = document.getElementById('promocodeSubmit');\nif (promocodeSubmitBtn) {\n promocodeSubmitBtn.addEventListener('click', handlePromocodeSubmit);\n}\n\n// Also allow Enter key to submit\nconst promocodeInputElement = document.getElementById('promocodeInput');\nif (promocodeInputElement) {\n promocodeInputElement.addEventListener('keypress', (e) => {\n if (e.key === 'Enter') {\n handlePromocodeSubmit();\n }\n });\n}\n// ===============================\n// END PROMOCODE EVENT LISTENER\n// ===============================\n\nconsole.log(\"โœ… Blessed Wizard - Full system loaded and ready!\");\nconsole.log(\"๐Ÿ”— Referral system: ACTIVE\");\nconsole.log(\"๐Ÿ’ฐ Payment system: ACTIVE\");\nconsole.log(\"๐ŸŽฐ Game engine: ACTIVE\");" }, { "path": "main.py", "content": "# Lucky Wizard Bot - FIXED Referral System\n# Install: pip install python-telegram-bot==20.7\n\nfrom telegram import Update, InlineKeyboardMarkup, InlineKeyboardButton, WebAppInfo\nfrom telegram.ext import (\n Application,\n CommandHandler,\n PreCheckoutQueryHandler,\n MessageHandler,\n filters,\n ContextTypes\n)\nimport logging\n\nlogging.basicConfig(\n format='%(asctime)s - %(name)s - %(levelname)s - %(message)s',\n level=logging.INFO\n)\nlogger = logging.getLogger(__name__)\n\nBOT_TOKEN = \"###\"\nWEBAPP_URL = \"###\"\n\nasync def start(update: Update, context: ContextTypes.DEFAULT_TYPE):\n user_id = update.effective_user.id\n user_name = update.effective_user.first_name\n \n referrer_id = None\n if context.args and len(context.args) > 0:\n start_param = context.args[0]\n logger.info(f\"๐Ÿ”ฎ User {user_id} ({user_name}) appeared through portal: {start_param}\")\n \n if start_param.startswith('ref'):\n referrer_id = start_param[3:]\n logger.info(f\"โœจ Referral magic rune detected: {referrer_id}\")\n \n if not referrer_id.isdigit():\n logger.warning(f\"โš ๏ธ Invalid rune pattern: {referrer_id}\")\n referrer_id = None\n elif referrer_id == str(user_id):\n logger.warning(f\"โš ๏ธ Wizard tried to summon himself.\")\n referrer_id = None\n \n webapp_url = WEBAPP_URL\n if referrer_id:\n webapp_url = f\"{WEBAPP_URL}#tgWebAppStartParam=ref{referrer_id}\"\n logger.info(f\"๐Ÿ”— Sending enchanted gateway: {webapp_url}\")\n else:\n logger.info(f\"๐Ÿ”— Sending standard gateway: {webapp_url}\")\n \n keyboard = [[\n InlineKeyboardButton(\n \"๐Ÿง™โ€โ™‚๏ธ Enter the Wizard's Realm โœจ\", \n web_app=WebAppInfo(url=webapp_url)\n )\n ]]\n reply_markup = InlineKeyboardMarkup(keyboard)\n \n if referrer_id:\n message = (\n f\"๐Ÿง™โ€โ™‚๏ธ *Welcome, {user_name}, Apprentice of Fortune!* \\n\\n\"\n \"๐ŸŽ *A Magical Referral Blessing Has Been Activated!*\\n\"\n \"Both you and your summoner receive *+15 โญ Arcane Stars!*\\n\\n\"\n \"๐Ÿ”ฎ Tap below to claim destiny:\"\n )\n else:\n message = (\n f\"๐Ÿง™โ€โ™‚๏ธ *Welcome, {user_name}!* \\n\\n\"\n \"โญ Earn enchanted Telegram Stars\\n\"\n \"๐Ÿ”— Invite friends to gain bonus rewards\\n\\n\"\n \"๐Ÿ‘‡ Begin your magical adventure:\"\n )\n \n await update.message.reply_text(\n message,\n reply_markup=reply_markup,\n parse_mode='Markdown'\n )\n \n logger.info(f\"โœ… Wizard greeting spell sent to {user_id}\")\n\nasync def help_command(update: Update, context: ContextTypes.DEFAULT_TYPE):\n help_text = (\n \"๐Ÿ“œ *Wizard's Codex of Fortune* โœจ\\n\\n\"\n \"๐ŸŽฐ *How to Cast Spins:*\\n\"\n \"โ€ข Open the realm\\n\"\n \"โ€ข Offer Stars\\n\"\n \"โ€ข Spin with stars\\n\\n\"\n \"๐Ÿ”— *Referral Magic:*\\n\"\n \"โ€ข Share your summoning link\\n\"\n \"โ€ข Both gain *+15 Arcane Stars*\\n\\n\"\n \"๐Ÿ‘โ€๐Ÿ—จ Archmage Support: @BlessedWizardSupport\"\n )\n await update.message.reply_text(help_text, parse_mode='Markdown')\n\nasync def precheckout_callback(update: Update, context: ContextTypes.DEFAULT_TYPE):\n query = update.pre_checkout_query\n await query.answer(ok=True)\n logger.info(f\"๐Ÿ’ฐ Magical offering approved: {query.total_amount} Stars from {query.from_user.id}\")\n\nasync def successful_payment(update: Update, context: ContextTypes.DEFAULT_TYPE):\n payment = update.message.successful_payment\n stars = payment.total_amount\n \n await update.message.reply_text(\n f\"โœจ *Transaction Complete!* โœจ\\n\\n\"\n f\"โญ *{stars} Stars* infused into your enchanted purse.\\n\\n\"\n f\"๐Ÿง™โ€โ™‚๏ธ Continue conjuring your destiny!\",\n parse_mode='Markdown'\n )\n \n logger.info(f\"๐Ÿ’Ž Offering accepted: {stars} Stars from {update.effective_user.id}\")\n\ndef main():\n logger.info(\"=\" * 60)\n logger.info(\"๐Ÿง™โ€โ™‚๏ธ LUCKY WIZARD BOT AWAKENING...\")\n logger.info(\"=\" * 60)\n \n app = Application.builder().token(BOT_TOKEN).build()\n \n app.add_handler(CommandHandler(\"start\", start))\n app.add_handler(CommandHandler(\"help\", help_command))\n app.add_handler(PreCheckoutQueryHandler(precheckout_callback))\n app.add_handler(MessageHandler(filters.SUCCESSFUL_PAYMENT, successful_payment))\n \n logger.info(\"โœ… All wizard runes engraved.\")\n logger.info(f\"๐Ÿ”ฎ Portal to Realm: {WEBAPP_URL}\")\n logger.info(\"๐Ÿ”— Referral enchantments: ACTIVE\")\n logger.info(\"=\" * 60)\n \n app.run_polling(allowed_updates=Update.ALL_TYPES)\n\nif __name__ == '__main__':\n main()\n" }, { "path": "promocodes.js", "content": "export const PROMOCODES = [\n {\n code: \"WELCOME100\",\n stars: 100,\n maxUses: 99999,\n currentUses: 0,\n active: true,\n expiresAt: null // Never expires\n },\n {\n code: \"PHILIPPINES30\",\n stars: 30,\n maxUses: 999999,\n currentUses: 0,\n active: true,\n expiresAt: null\n },\n {\n code: \"MALAYALAM300\",\n stars: 300,\n maxUses: 999999,\n currentUses: 0,\n active: true,\n expiresAt: null\n },\n {\n code: \"INDONESIA30\",\n stars: 30,\n maxUses: 999999,\n currentUses: 0,\n active: true,\n expiresAt: null\n }\n];\n\n/**\n * Add a new promocode\n * @param {string} code - The promocode string\n * @param {number} stars - Stars to reward\n * @param {number} maxUses - Maximum usage count\n * @param {number|null} expiresAt - Optional expiration timestamp\n */\nexport function addPromocode(code, stars, maxUses, expiresAt = null) {\n const newPromo = {\n code: code.toUpperCase(),\n stars: stars,\n maxUses: maxUses,\n currentUses: 0,\n active: true,\n expiresAt: expiresAt\n };\n \n PROMOCODES.push(newPromo);\n console.log(`โœ… Promocode added: ${code} - ${stars} Stars (Max uses: ${maxUses})`);\n}\n\n/**\n * Deactivate a promocode\n * @param {string} code - The promocode to deactivate\n */\nexport function deactivatePromocode(code) {\n const promo = PROMOCODES.find(p => p.code.toUpperCase() === code.toUpperCase());\n if (promo) {\n promo.active = false;\n console.log(`โŒ Promocode deactivated: ${code}`);\n }\n}\n\n// Example: Add a limited-time promocode\n// addPromocode(\"NEWYEAR2025\", 2025, 100, Date.now() + (7 * 24 * 60 * 60 * 1000)); // Expires in 7 days" }, { "path": "requirements.txt", "content": "# requirements.txt\n# Python requirements for Lucky Wizard / Blessed Wizard Telegram Bot\n\npython-telegram-bot==20.7\n\n# Optional (recommended)\npython-dotenv>=1.0.0\n" }, { "path": "style.css", "content": "* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n user-select: none;\n font-family: \"Cinzel\";\n}\n\nbody {\n font-family: 'Roboto', sans-serif;\n background: linear-gradient(180deg, #1a0b2e 0%, #0d0e12 100%);\n color: #e0e0ff;\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n padding: calc(15px + env(safe-area-inset-top)) 10px calc(80px + env(safe-area-inset-bottom));\n overflow-x: hidden;\n position: relative;\n touch-action: pan-x pan-y;\n}\nh2 {\n color: #f0c05a;\n}\n.dimmed-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(0, 0, 0, 0.5);\n z-index: 98;\n pointer-events: none;\n opacity: 0;\n transition: opacity 0.3s ease;\n}\n\n.dimmed-overlay.show {\n opacity: 1;\n}\n\n.casino-container,\n.leaders-container,\n.balance-container,\n.friends-container,\n.profile-container {\n max-width: 360px;\n width: 100%;\n background: #1c1129;\n border-radius: 12px;\n padding: calc(10px + env(safe-area-inset-top)) 15px 15px;\n display: none;\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);\n position: relative;\n margin: 0 auto; /* Added for explicit centering */\n}\n\n.casino-container.fullscreen {\n margin-top: calc(40px + env(safe-area-inset-top));\n}\n\n.page-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 12px;\n padding-bottom: 10px;\n width: 100%;\n box-sizing: border-box;\n position: relative;\n z-index: 10;\n border-bottom: 1px solid rgba(240, 192, 90, 0.3);\n}\n\n.page-header .logo {\n height: 3.5em;\n width: 120px;\n margin-left: 5px;\n filter: drop-shadow(0 0 10px rgba(240, 192, 90, 0.5));\n}\n\n.page-header .wallet-balance {\n font-size: 1.3em;\n font-weight: 400;\n margin-right: 5px;\n color: #e0e0ff;\n display: flex;\n align-items: center;\n gap: 7px;\n text-align: right;\n}\n\n.character-image {\n display: block;\n width: 100%;\n max-height: 120px;\n object-fit: contain;\n border-radius: 8px;\n filter: drop-shadow(0 0 10px rgba(159, 54, 241, 0.3));\n}\n\n.info-panel {\n display: flex;\n justify-content: space-between;\n gap: 8px;\n margin-bottom: 15px;\n}\n\n.info-box {\n flex: 1;\n background: rgba(28, 17, 41, 0.8);\n padding: 8px;\n border-radius: 8px;\n text-align: center;\n border: 1px solid #f0c05a;\n}\n\n.info-box h3 {\n font-family: 'Cinzel', serif;\n font-size: 0.8em;\n color: #f0c05a;\n text-transform: uppercase;\n margin-bottom: 2px;\n}\n\n.info-box .value {\n font-size: 1em;\n font-weight: 400;\n color: #e0e0ff;\n}\n\n.slot-machine {\n background: #1c1129;\n border-radius: 12px;\n padding: 10px;\n border: 2px solid #f0c05a;\n box-shadow: 0 0 15px rgba(159, 54, 241, 0.2);\n}\n\n.slot-frame {\n display: flex;\n justify-content: center;\n gap: 2px;\n background: #0d0e12;\n padding: 0;\n border-radius: 8px;\n overflow: hidden;\n}\n\n.reel-container {\n width: calc(100% / 5);\n height: 210px;\n background: #0d0e12;\n overflow: hidden;\n position: relative;\n}\n\n.reel {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n display: flex;\n flex-direction: column;\n will-change: transform;\n backface-visibility: hidden;\n -webkit-backface-visibility: hidden;\n transform: translateZ(0);\n -webkit-font-smoothing: antialiased;\n}\n\n.symbol {\n width: 100%;\n height: 70px;\n display: flex;\n justify-content: center;\n align-items: center;\n background: #0d0e12;\n border-bottom: 1px solid rgba(240, 192, 90, 0.1);\n}\n\n.symbol img {\n width: 50px;\n height: 50px;\n object-fit: contain;\n filter: drop-shadow(0 0 5px rgba(159, 54, 241, 0.3));\n}\n\n.symbol.win {\n background: linear-gradient(45deg, #f0c05a, #9f36f1);\n animation: glow 1s ease-in-out infinite alternate;\n}\n\n@keyframes glow {\n from { box-shadow: 0 0 5px #f0c05a; }\n to { box-shadow: 0 0 15px #9f36f1; }\n}\n\n.result-overlay {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(13, 14, 18, 0.9);\n display: flex;\n justify-content: center;\n align-items: center;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.3s ease;\n z-index: 20;\n}\n\n.result-overlay.show {\n opacity: 1;\n}\n\n.result-text {\n font-family: 'Cinzel', serif;\n font-size: 1em;\n font-weight: 700;\n padding: 10px 20px;\n border-radius: 8px;\n background: #f0c05a;\n color: #0d0e12;\n border: 1px solid #9f36f1;\n text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);\n}\n\n.result-text.win-message {\n background: #f0c05a;\n color: #0d0e12;\n}\n\n.result-text.lose-message {\n background: #1c1129;\n color: #e0e0ff;\n font-size: 0.9em;\n}\n\n.controls {\n margin-top: 15px;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 10px;\n}\n\n.left-controls,\n.right-controls,\n.centerright {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n}\n.centerright {\n}\n.right-controls {\n display: flex;\n flex-grow: 2;\n}\n.left-controls button {\n width: 100%;\n flex-grow: 1;\n}\n.spin-button {\n width: 100%;\n min-width: 80px;\n height: 80px;\n border-radius: 500px;\n border: 3px solid #722B83;\n background: linear-gradient(0deg,rgba(65, 18, 86, 1) 0%, rgba(80, 23, 104, 1) 100%);\n background-size: contain;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: transform 0.2s ease, opacity 0.2s ease;\n box-shadow: 0 0 10px rgba(159, 54, 241, 0.3);\n}\n.spin-button svg {\n width: 50px;\n height: 50px;\n color: #f0c05a;\n}\n\n.spin-button:hover {\n transform: scale(1.05);\n}\n\n.spin-button:active {\n transform: scale(0.95);\n}\n\n.spin-button.dimmed {\n opacity: 0.5;\n pointer-events: none;\n}\n\n.spin-button.spinning {\n animation: pulse 1s ease-in-out infinite;\n}\n\n.promocode-section {\n background: rgba(28, 17, 41, 0.6);\n border: 2px solid rgba(240, 192, 90, 0.4);\n border-radius: 12px;\n padding: 15px;\n box-shadow: 0 4px 15px rgba(159, 54, 241, 0.2);\n margin-top: 4px;\n}\n\n.promocode-title {\n font-family: 'Cinzel', serif;\n font-size: 1.1em;\n color: #f0c05a;\n margin-bottom: 12px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n font-weight: 700;\n}\n\n.promocode-title i {\n font-size: 1.2em;\n color: #9f36f1;\n animation: rotate-ticket 3s ease-in-out infinite;\n}\n\n@keyframes rotate-ticket {\n 0%, 100% {\n transform: rotate(0deg);\n }\n 25% {\n transform: rotate(-10deg);\n }\n 75% {\n transform: rotate(10deg);\n }\n}\n\n.promocode-info {\n background: rgba(159, 54, 241, 0.15);\n border: 1px solid rgba(159, 54, 241, 0.4);\n border-radius: 8px;\n padding: 10px;\n margin-bottom: 15px;\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.promocode-info i {\n color: #9f36f1;\n font-size: 1.1em;\n flex-shrink: 0;\n}\n\n.promocode-info p {\n font-size: 0.8em;\n color: #e0e0ff;\n margin: 0;\n line-height: 1.4;\n}\n\n.promocode-input-container {\n display: flex;\n gap: 10px;\n margin-bottom: 10px;\n}\n\n.promocode-input {\n flex: 1;\n background: #0d0e12;\n border: 2px solid #f0c05a;\n border-radius: 8px;\n padding: 12px;\n font-family: 'Cinzel', serif;\n font-size: 0.95em;\n color: #e0e0ff;\n text-transform: uppercase;\n letter-spacing: 1px;\n transition: all 0.3s ease;\n width: 100%;\n}\n\n.promocode-input::placeholder {\n color: rgba(224, 224, 255, 0.4);\n text-transform: none;\n letter-spacing: normal;\n}\n\n.promocode-input:focus {\n outline: none;\n border-color: #9f36f1;\n box-shadow: 0 0 15px rgba(159, 54, 241, 0.3);\n}\n\n.promocode-submit {\n background: linear-gradient(135deg, #9f36f1, #7b2cbf);\n color: #e0e0ff;\n padding: 12px 20px;\n font-family: 'Cinzel', serif;\n font-size: 0.9em;\n font-weight: 700;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.3s ease;\n display: flex;\n align-items: center;\n gap: 8px;\n white-space: nowrap;\n box-shadow: 0 4px 12px rgba(159, 54, 241, 0.3);\n}\n\n.promocode-submit i {\n font-size: 1.1em;\n color: #f0c05a;\n}\n\n.promocode-submit:hover {\n background: linear-gradient(135deg, #7b2cbf, #9f36f1);\n transform: translateY(-2px);\n box-shadow: 0 6px 16px rgba(159, 54, 241, 0.4);\n}\n\n.promocode-submit:active {\n transform: translateY(0);\n}\n\n.promocode-submit:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n transform: none;\n}\n\n.promocode-error {\n font-size: 0.8em;\n text-align: center;\n min-height: 1.2em;\n font-weight: 600;\n transition: all 0.3s ease;\n}\n\n/* Responsive adjustments */\n@media (max-width: 360px) {\n .promocode-section {\n padding: 12px;\n }\n\n .promocode-title {\n font-size: 1em;\n }\n\n .promocode-input {\n font-size: 0.85em;\n padding: 10px;\n }\n\n .promocode-submit {\n font-size: 0.85em;\n padding: 10px 16px;\n }\n\n .promocode-info p {\n font-size: 0.75em;\n }\n}\n\n@media (max-width: 320px) {\n .promocode-input-container {\n flex-direction: column;\n }\n\n .promocode-submit {\n width: 100%;\n justify-content: center;\n }\n}\n\n@media (max-width: 350px) {\n .controls {\n width: fit-content;\n flex-wrap: wrap;\n }\n .spin-button {\n width: 100%;\n }\n\n .right-controls {\n display: flex;\n }\n .gameSettings {flex-wrap: wrap;}\n}\n@media (max-width: 270px) {\n .controls {\n width: fit-content;\n flex-wrap: wrap;\n }\n .spin-button {\n width: 100%;\n }\n \n .left-controls,\n .right-controls {\n width: 100%;\n }\n .controls {\n\n }\n}\n\n@keyframes pulse {\n 0% { box-shadow: 0 0 10px rgba(159, 54, 241, 0.3); }\n 50% { box-shadow: 0 0 20px rgba(159, 54, 241, 0.5); }\n 100% { box-shadow: 0 0 10px rgba(159, 54, 241, 0.3); }\n}\n.button {\n font-family: 'Cinzel', serif;\n font-size: 1.2em;\n font-weight: 700;\n border: 3px solid #722B83;\n background: linear-gradient(0deg,rgba(65, 18, 86, 1) 0%, rgba(80, 23, 104, 1) 100%);\n border-radius: 5px;\n color: #f0c05a;\n display: flex;\n justify-content: center;\n height: 36px;\n padding: 0 20px;\n display: flex;\n justify-content: center;\n align-items: center;\n} .button svg { margin-right: 5px; width: 20px; color: #f0c05a;}\n .button svg path { color: #f0c05a;}\n.controls {\n display: flex;\n align-items: center;\n}\n.control-button .bet-settings-button, .auto-button {\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n text-transform: uppercase;\n transition: transform 0.2s ease, opacity 0.2s ease;\n width: 100%;\n}\n\n.control-button:hover {\n transform: scale(1.05);\n}\n\n.control-button:active {\n transform: scale(0.95);\n}\n\n.control-button.dimmed {\n opacity: 0.5;\n pointer-events: none;\n}\n\n.paytable-button {\n border: none;\n cursor: pointer;\n display: block;\n text-align: center;\n text-transform: uppercase;\n transition: transform 0.2s ease;\n width: 100%;\n height: 100%;\n padding: 10px;\n}\n\n.paytable-button:hover {\n transform: scale(1.05);\n}\n.paytable-button:active {\n transform: scale(0.95);\n}\n\n.button-table {\n font-family: 'Cinzel', serif;\n font-size: 1.2em;\n font-weight: 700;\n border: 3px solid #f0c05a;\n background: #1C1129;\n border-radius: 13px;\n color: #f0c05a;\n} .button svg { margin-right: 5px; width: 20px; color: #f0c05a;}\n .button svg path { color: #f0c05a;}\n\n.bet-settings-modal, .auto-settings-modal, .paytable-modal {\n position: fixed;\n top: 44%;\n left: 50%;\n transform: translate(-50%, -50%);\n background: #1c1129;\n padding: 15px;\n border-radius: 12px;\n border: 1px solid #f0c05a;\n display: none;\n z-index: 100;\n width: 80%;\n max-width: 300px;\n box-shadow: 0 0 20px rgba(159, 54, 241, 0.3);\n}\n.bet-settings-modal.show, .auto-settings-modal.show, .paytable-modal.show {\n display: block;\n}\n\n.bet-settings-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 10px;\n}\n\n.bet-settings-label {\n font-family: 'Cinzel', serif;\n font-size: 0.8em;\n color: #f0c05a;\n}\n\n.bet-settings-value {\n font-size: 0.8em;\n color: #e0e0ff;\n font-weight: 400;\n background: #0d0e12;\n padding: 5px 10px;\n border-radius: 6px;\n}\n\n.bet-adjust-button {\n background: #9f36f1;\n color: #e0e0ff;\n padding: 5px 10px;\n font-size: 0.8em;\n font-weight: 500;\n border: none;\n border-radius: 6px;\n cursor: pointer;\n transition: background 0.2s, transform 0.2s ease;\n}\n\n.bet-adjust-button:hover {\n background: #7b2cbf;\n transform: scale(1.05);\n}\n\n.bet-adjust-button:active {\n transform: scale(0.95);\n}\n\n.bet-adjust-button:disabled {\n background: #4b3a6b;\n cursor: not-allowed;\n opacity: 0.5;\n}\n\n.max-bet-button {\n background: #0d0e12;\n color: #f0c05a;\n padding: 5px 10px;\n font-size: 0.75em;\n font-weight: 500;\n border: none;\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.2s;\n}\n\n.max-bet-button:hover {\n background: #7b2cbf;\n transform: scale(1.05);\n}\n\n.max-bet-button:active {\n transform: scale(0.95);\n}\n\n.adjust-group {\n display: flex;\n align-items: center;\n gap: 5px; /* Reduced gap to make + and - closer to the number */\n}\n\n.ok-button {\n background: #9f36f1;\n color: #e0e0ff;\n padding: 8px;\n font-family: 'Cinzel', serif;\n font-size: 0.85em;\n font-weight: 700;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n width: 50%;\n transition: background 0.2s, transform 0.2s ease;\n text-transform: uppercase;\n display: block;\n margin: 0 auto;\n}\n\n.ok-button:hover {\n background: #7b2cbf;\n transform: scale(1.05);\n}\n\n.ok-button:active {\n transform: scale(0.95);\n}\n\n.toggle-auto-spin {\n background: #9f36f1;\n color: #e0e0ff;\n padding: 8px 16px;\n font-family: 'Cinzel', serif;\n font-size: 0.85em;\n font-weight: 700;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n transition: background 0.2s, transform 0.2s ease;\n text-transform: uppercase;\n width: 100%;\n margin-bottom: 10px;\n}\n\n.toggle-auto-spin.active {\n background: #f0c05a;\n color: #0d0e12;\n}\n\n.toggle-auto-spin:active {\n transform: scale(0.95);\n}\n\n.disabled-setting {\n opacity: 0.5;\n pointer-events: none;\n}\n\n.paytable-content {\n max-height: 400px;\n overflow-y: auto;\n padding-right: 10px;\n}\n\n.paytable-content::-webkit-scrollbar {\n width: 6px;\n}\n\n.paytable-content::-webkit-scrollbar-track {\n background: #0d0e12;\n border-radius: 3px;\n}\n\n.paytable-content::-webkit-scrollbar-thumb {\n background: #f0c05a;\n border-radius: 3px;\n}\n\n.paytable-content h3 {\n font-family: 'Cinzel', serif;\n font-size: 1em;\n color: #f0c05a;\n margin-bottom: 10px;\n text-align: center;\n}\n\n.paytable-content p {\n font-size: 0.8em;\n color: #e0e0ff;\n margin-bottom: 15px;\n}\n\n.paytable-item {\n display: flex;\n align-items: center;\n gap: 10px;\n margin-bottom: 15px;\n}\n\n.paytable-item img {\n width: 40px;\n height: 40px;\n object-fit: contain;\n filter: drop-shadow(0 0 5px rgba(159, 54, 241, 0.3));\n}\n\n.paytable-item span {\n font-size: 0.8em;\n color: #e0e0ff;\n}\n\n.leaderboard-header {\n text-align: center;\n margin-bottom: 10px;\n}\n\n.leaderboard-trophy {\n font-size: 2.5em;\n color: #f0c05a;\n margin-bottom: 10px;\n filter: drop-shadow(0 0 10px rgba(240, 192, 90, 0.5));\n}\n\n.leaderboard-title {\n font-family: 'Cinzel', serif;\n font-size: 1.5em;\n color: #f0c05a;\n margin-bottom: 5px;\n font-weight: 700;\n}\n\n.leaderboard-subtitle {\n font-size: 0.85em;\n color: #e0e0ff;\n opacity: 0.8;\n}\n\n.leaderboard-podium {\n display: flex;\n justify-content: center;\n align-items: flex-end;\n gap: 8px;\n margin-bottom: 15px;\n padding: 0 10px;\n}\n\n.podium-item {\n display: flex;\n flex-direction: column;\n align-items: center;\n flex: 1;\n max-width: 110px;\n}\n\n.podium-rank {\n font-size: 1.8em;\n margin-bottom: 8px;\n}\n\n.podium-avatar {\n width: 50px;\n height: 50px;\n border-radius: 50%;\n background: linear-gradient(135deg, #6496f3, #1044ee);\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 700;\n font-size: 1em;\n color: #fff;\n margin-bottom: 8px;\n border: 2px solid #f0c05a;\n box-shadow: 0 4px 10px rgba(159, 54, 241, 0.3);\n}\n\n.podium-avatar-winner {\n width: 60px;\n height: 60px;\n font-size: 1.2em;\n animation: winner-glow 2s ease-in-out infinite;\n}\n\n@keyframes winner-glow {\n 0%, 100% { box-shadow: 0 4px 10px rgba(240, 192, 90, 0.5); }\n 50% { box-shadow: 0 6px 20px rgba(240, 192, 90, 0.8); }\n}\n\n.podium-name {\n font-family: 'Cinzel', serif;\n font-size: 0.75em;\n color: #e0e0ff;\n margin-bottom: 5px;\n font-weight: 600;\n text-align: center;\n}\n\n.podium-score {\n font-size: 0.7em;\n color: #f0c05a;\n margin-bottom: 10px;\n display: flex;\n align-items: center;\n gap: 5px;\n font-weight: 600;\n}\n\n.currency-icon-small {\n width: 17px;\n height: 17px;\n vertical-align: middle;\n}\n\n.podium-base {\n width: 100%;\n background: linear-gradient(180deg, #9f36f1, #7b2cbf);\n border-radius: 8px 8px 0 0;\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: 'Cinzel', serif;\n font-size: 1.2em;\n font-weight: 700;\n color: #fff;\n border: 2px solid #f0c05a;\n border-bottom: none;\n}\n\n.podium-base-first {\n height: 80px;\n background: linear-gradient(180deg, #f0c05a, #d4a849);\n}\n\n.podium-base-second {\n height: 60px;\n background: linear-gradient(180deg, #c0c0c0, #a8a8a8);\n}\n\n.podium-base-third {\n height: 40px;\n background: linear-gradient(180deg, #cd7f32, #b87333);\n}\n\n.podium-first { order: 2; }\n.podium-second { order: 1; }\n.podium-third { order: 3; }\n\n.leaderboard-list {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.leaderboard-item {\n display: flex;\n align-items: center;\n gap: 12px;\n background: rgba(28, 17, 41, 0.6);\n padding: 5px;\n border-radius: 10px;\n border: 1px solid rgba(240, 192, 90, 0.2);\n transition: all 0.2s ease;\n}\n\n.leaderboard-item:hover {\n background: rgba(28, 17, 41, 0.9);\n border-color: rgba(240, 192, 90, 0.5);\n transform: translateX(3px);\n}\n\n.leaderboard-item-you {\n background: rgba(159, 54, 241, 0.2);\n border: 2px solid #9f36f1;\n}\n\n.leaderboard-position {\n font-family: 'Cinzel', serif;\n font-size: 1em;\n font-weight: 700;\n color: #f0c05a;\n min-width: 25px;\n text-align: center;\n}\n\n.leaderboard-player {\n display: flex;\n align-items: center;\n gap: 10px;\n flex: 1;\n}\n\n.leaderboard-avatar {\n width: 35px;\n height: 35px;\n border-radius: 50%;\n background: linear-gradient(135deg, #9f36f1, #7b2cbf);\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: 'Cinzel', serif;\n font-weight: 700;\n font-size: 0.75em;\n color: #fff;\n border: 1px solid #f0c05a;\n}\n\n.leaderboard-name {\n font-size: 0.85em;\n color: #e0e0ff;\n font-weight: 500;\n}\n\n.leaderboard-score {\n font-size: 0.8em;\n color: #f0c05a;\n font-weight: 600;\n display: flex;\n align-items: center;\n gap: 5px;\n white-space: nowrap;\n}\n\n.leaderboard-info {\n background: rgba(159, 54, 241, 0.15);\n border: 1px solid rgba(159, 54, 241, 0.4);\n border-radius: 10px;\n padding: 12px;\n margin-top: 15px;\n display: flex;\n align-items: flex-start;\n gap: 8px;\n}\n\n.leaderboard-info i {\n color: #9f36f1;\n font-size: 1.2em;\n margin-top: 2px;\n flex-shrink: 0;\n}\n\n.leaderboard-info p {\n font-size: 0.8em;\n color: #e0e0ff;\n line-height: 1.5;\n margin: 0;\n}\n\n.referral-header {\n text-align: center;\n margin-bottom: 20px;\n}\n\n.referral-gift-icon {\n font-size: 2.5em;\n color: #f0c05a;\n margin-bottom: 10px;\n filter: drop-shadow(0 0 10px rgba(240, 192, 90, 0.5));\n}\n\n.referral-title {\n font-family: 'Cinzel', serif;\n font-size: 1.5em;\n color: #f0c05a;\n margin-bottom: 5px;\n font-weight: 700;\n}\n\n.referral-subtitle {\n font-size: 0.9em;\n color: #e0e0ff;\n opacity: 0.9;\n font-weight: 500;\n}\n\n.referral-stats {\n display: flex;\n gap: 10px;\n margin-bottom: 20px;\n}\n\n.referral-stat-box {\n flex: 1;\n background: linear-gradient(135deg, rgba(159, 54, 241, 0.2), rgba(123, 44, 191, 0.2));\n border: 2px solid #9f36f1;\n border-radius: 12px;\n padding: 15px;\n text-align: center;\n box-shadow: 0 4px 15px rgba(159, 54, 241, 0.2);\n}\n\n\n.stat-number {\n font-family: 'Cinzel', serif;\n font-size: 1.8em;\n color: #f0c05a;\n font-weight: 700;\n margin-bottom: 5px;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 5px;\n}\n\n.stat-label {\n font-size: 0.75em;\n color: #e0e0ff;\n opacity: 0.8;\n}\n\n.referral-link-section {\n margin-bottom: 15px;\n}\n\n.referral-link-title {\n font-family: 'Cinzel', serif;\n font-size: 0.85em;\n color: #f0c05a;\n margin-bottom: 8px;\n text-align: center;\n}\n\n.referral-link-container {\n background: #0d0e12;\n padding: 12px;\n border-radius: 8px;\n border: 2px solid #9f36f1;\n font-size: 0.75em;\n color: #e0e0ff;\n display: flex;\n align-items: center;\n gap: 8px;\n box-shadow: 0 0 15px rgba(159, 54, 241, 0.2);\n}\n\n.referral-link-text {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n flex: 1;\n}\n\n.share-button {\n background: linear-gradient(135deg, #9f36f1, #7b2cbf);\n color: #e0e0ff;\n padding: 12px 20px;\n font-family: 'Cinzel', serif;\n font-size: 0.95em;\n font-weight: 700;\n border: none;\n border-radius: 10px;\n cursor: pointer;\n width: 100%;\n transition: all 0.3s ease;\n text-transform: uppercase;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n margin-bottom: 20px;\n box-shadow: 0 4px 15px rgba(159, 54, 241, 0.3);\n}\n\n.share-button i {\n font-size: 1.2em;\n color: #f0c05a;\n}\n\n.share-button:hover {\n background: linear-gradient(135deg, #7b2cbf, #9f36f1);\n transform: translateY(-2px);\n box-shadow: 0 6px 20px rgba(159, 54, 241, 0.4);\n}\n\n.share-button:active {\n transform: translateY(0px);\n}\n\n.referral-info-box {\n background: rgba(159, 54, 241, 0.15);\n border: 1px solid rgba(159, 54, 241, 0.4);\n border-radius: 10px;\n padding: 15px;\n display: flex;\n align-items: flex-start;\n gap: 12px;\n}\n\n.referral-info-box i {\n color: #9f36f1;\n font-size: 1.2em;\n margin-top: 2px;\n flex-shrink: 0;\n}\n\n.referral-info-title {\n font-family: 'Cinzel', serif;\n font-size: 0.85em;\n color: #f0c05a;\n margin-bottom: 8px;\n font-weight: 700;\n}\n\n.referral-info-list {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n\n.referral-info-list li {\n font-size: 0.75em;\n color: #e0e0ff;\n line-height: 1.6;\n padding-left: 15px;\n position: relative;\n margin-bottom: 5px;\n}\n\n.referral-info-list li:before {\n content: \"โœ“\";\n position: absolute;\n left: 0;\n color: #f0c05a;\n font-weight: 700;\n}\n\n.telegram-nav {\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n background: #1c1129;\n display: flex;\n justify-content: space-evenly;\n align-items: center;\n padding: 12px 0;\n border-top: 1px solid #f0c05a;\n z-index: 1000;\n height: 72px;\n}\n\n.telegram-nav-button {\n background: none;\n border: none;\n color: #e0e0ff;\n font-family: 'Cinzel', serif;\n font-size: 0.9em;\n font-weight: 400;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n padding: 12px;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.telegram-nav-button i {\n font-size: 1.7em;\n color: #f0c05a;\n}\n\n.telegram-nav-button:hover, .telegram-nav-button.active {\n color: #f0c05a;\n transform: scale(1.1);\n}\n\n.telegram-nav-button:hover i, .telegram-nav-button.active i {\n color: #f0c05a;\n}\n\n.telegram-nav-button:active {\n transform: scale(0.95);\n}\n\n.deposit-withdraw-row {\n display: flex;\n gap: 10px;\n margin-bottom: 15px;\n margin-top: 15px; \n justify-content: center;\n}\n\n.deposit-btn, .withdraw-btn {\n flex: 1;\n background: linear-gradient(135deg, #1c1129, #2a1b3e);\n color: #e0e0ff;\n padding: 12px;\n font-family: 'Cinzel', serif;\n font-size: 0.95em;\n font-weight: 700;\n border: 1px solid #f0c05a;\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.2s ease, transform 0.2s ease;\n text-align: center;\n max-width: 140px;\n box-shadow: 0 4px 8px rgba(159, 54, 241, 0.2);\n}\n\n.deposit-btn.active, .withdraw-btn.active {\n background: linear-gradient(135deg, #9f36f1, #7b2cbf);\n color: #e0e0ff;\n box-shadow: 0 6px 12px rgba(159, 54, 241, 0.3);\n}\n\n.deposit-btn:hover, .withdraw-btn:hover {\n background: linear-gradient(135deg, #7b2cbf, #9f36f1);\n transform: scale(1.05);\n box-shadow: 0 6px 12px rgba(159, 54, 241, 0.3);\n}\n\n.deposit-btn:active, .withdraw-btn:active {\n transform: scale(0.95);\n}\n\n.currency-section {\n margin-bottom: 10px;\n}\n\n.currency-title {\n font-family: 'Cinzel', serif;\n font-size: 0.85em;\n color: #f0c05a;\n margin-bottom: 8px;\n}\n\n.currency-item {\n display: flex;\n align-items: center;\n gap: 8px;\n background: #0d0e12;\n padding: 10px;\n border-radius: 8px;\n border: 1px solid #f0c05a;\n justify-content: center;\n}\n\n.currency-name {\n font-size: 0.9em;\n color: #e0e0ff;\n}\n\n.currency-icon {\n width: 18px;\n height: 18px;\n vertical-align: middle;\n}\n\n.qr-section {\n text-align: center;\n margin-bottom: 15px;\n}\n\n.qr-code {\n width: 120px;\n height: 120px;\n border-radius: 8px;\n margin: 0 auto 8px;\n filter: drop-shadow(0 0 5px rgba(159, 54, 241, 0.3));\n}\n\n.qr-label {\n font-size: 0.75em;\n color: #e0e0ff;\n opacity: 0.8;\n}\n\n.address-section {\n margin-bottom: 15px;\n}\n\n.address-container {\n background: #0d0e12;\n padding: 10px;\n border-radius: 8px;\n border: 1px solid #f0c05a;\n font-size: 0.8em;\n color: #e0e0ff;\n display: flex;\n align-items: center;\n gap: 5px;\n}\n\n.address-text {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: calc(100% - 25px);\n}\n\n.copy-icon {\n font-size: 0.9em;\n color: #f0c05a;\n cursor: pointer;\n transition: filter 0.2s;\n}\n\n.copy-icon:hover {\n filter: brightness(70%);\n}\n\n.withdrawal-section {\n margin-bottom: 15px;\n}\n\n.min-withdraw-note {\n font-size: 0.75em;\n color: #e0e0ff;\n margin-bottom: 10px;\n opacity: 0.8;\n}\n\n.withdrawal-input {\n width: 100%;\n background: #0d0e12;\n padding: 10px;\n border-radius: 8px;\n border: 1px solid #f0c05a;\n font-size: 0.8em;\n color: #e0e0ff;\n margin-bottom: 0px;\n}\n\n.withdrawal-input:focus {\n outline: none;\n border-color: #9f36f1;\n}\n\n.error-message {\n color: #ff4d4d;\n font-size: 0.7em;\n margin-top: 2px;\n margin-bottom: 6px;\n min-height: 1em;\n text-align: center;\n}\n\n.max-button {\n background: #0d0e12;\n color: #f0c05a;\n padding: 2px 10px;\n height: 35px;\n font-size: 0.85em;\n font-weight: 500;\n border: none;\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.2s ease, transform 0.2s ease;\n margin-top: 1px; /* Added margin to move the button down */\n}\n\n.max-button:hover {\n background: #7b2cbf;\n transform: scale(1.05);\n}\n\n.max-button:active {\n transform: scale(0.95);\n}\n\n.withdraw-submit, .deposit-submit {\n background: #9f36f1;\n color: #e0e0ff;\n padding: 10px;\n font-family: 'Cinzel', serif;\n font-size: 0.9em;\n font-weight: 700;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n width: 100%;\n transition: all 0.2s ease, transform 0.2s ease;\n text-transform: uppercase;\n}\n\n.withdraw-submit:hover, .deposit-submit:hover {\n background: #7b2cbf;\n transform: scale(1.05);\n}\n\n.withdraw-submit:active, .deposit-submit:active {\n transform: scale(0.95);\n}\n\n.deposit-warning {\n font-size: 0.75em;\n color: #e0e0ff;\n text-align: center;\n margin-top: 10px;\n line-height: 1.5;\n opacity: 0.9;\n}\n\n.stars-deposit-section {\n margin-top: 20px;\n}\n\n.stars-info {\n background: rgba(159, 54, 241, 0.15);\n border: 1px solid rgba(159, 54, 241, 0.4);\n border-radius: 10px;\n padding: 12px;\n margin-bottom: 15px;\n display: flex;\n align-items: flex-start;\n gap: 10px;\n}\n\n.stars-info i {\n color: #9f36f1;\n font-size: 1.2em;\n margin-top: 2px;\n flex-shrink: 0;\n}\n\n.stars-info p {\n font-size: 0.8em;\n color: #e0e0ff;\n line-height: 1.5;\n margin: 0;\n}\n\n.deposit-amount-container {\n display: flex;\n flex-direction: column;\n gap: 15px;\n}\n\n.deposit-input-wrapper {\n position: relative;\n display: flex;\n align-items: center;\n background: #0d0e12;\n border: 2px solid #f0c05a;\n border-radius: 12px;\n padding: 10px;\n box-shadow: 0 0 20px rgba(240, 192, 90, 0.2);\n transition: all 0.3s ease;\n}\n\n.deposit-input-wrapper:focus-within {\n border-color: #9f36f1;\n box-shadow: 0 0 25px rgba(159, 54, 241, 0.4);\n}\n\n.deposit-star-icon {\n font-size: 1.5em;\n color: #f0c05a;\n margin-right: 12px;\n filter: drop-shadow(0 0 8px rgba(240, 192, 90, 0.6));\n}\n\n.deposit-amount-input {\n flex: 1;\n background: transparent;\n border: none;\n color: #e0e0ff;\n font-family: 'Cinzel', serif;\n font-size: 1.2em;\n font-weight: 700;\n outline: none;\n padding: 0;\n}\n\n.deposit-amount-input::placeholder {\n color: rgba(224, 224, 255, 0.4);\n font-weight: 400;\n}\n\n.deposit-amount-input::-webkit-outer-spin-button,\n.deposit-amount-input::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n\n.deposit-amount-input[type=number] {\n -moz-appearance: textfield;\n}\n\n.deposit-unit {\n font-family: 'Cinzel', serif;\n font-size: 1em;\n color: #f0c05a;\n font-weight: 600;\n margin-left: 8px;\n margin-right: 5px;\n}\n\n.deposit-quick-amounts {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 10px;\n}\n@media (max-width: 275px) {\n .deposit-quick-amounts {\n display: grid;\n grid-template-columns: repeat(1, 1fr);\n gap: 10px;\n }\n}\n\n.footer a {\n color: #fff;\n}\n\n.quick-amount-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n white-space: nowrap; /* keep star and number on one line */\n background: linear-gradient(135deg, rgba(28, 17, 41, 0.8), rgba(42, 27, 62, 0.8));\n border: 2px solid rgba(240, 192, 90, 0.4);\n border-radius: 10px;\n padding: 8px 12px;\n font-family: 'Cinzel', serif;\n font-size: 0.95em;\n font-weight: 600;\n color: #e0e0ff;\n cursor: pointer;\n transition: all 0.3s ease;\n}\n\n.quick-amount-btn {\n display: flex;\n align-items: center; /* Center items vertically */\n}\n\n.quick-amount-btn:before {\n content: \"โญ\";\n font-size: 1.1em;\n}\n\n.quick-amount-btn:hover {\n background: linear-gradient(135deg, rgba(159, 54, 241, 0.3), rgba(123, 44, 191, 0.3));\n border-color: #9f36f1;\n transform: translateY(-2px);\n box-shadow: 0 4px 15px rgba(159, 54, 241, 0.3);\n}\n\n.quick-amount-btn:active {\n transform: translateY(0);\n}\n\n.deposit-submit {\n background: linear-gradient(135deg, #9f36f1, #7b2cbf);\n color: #e0e0ff;\n padding: 12px 20px;\n font-family: 'Cinzel', serif;\n font-size: 1em;\n font-weight: 700;\n border: none;\n border-radius: 12px;\n cursor: pointer;\n width: 100%;\n transition: all 0.3s ease;\n text-transform: uppercase;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 10px;\n box-shadow: 0 4px 15px rgba(159, 54, 241, 0.3);\n}\n\n.deposit-submit i {\n font-size: 1.2em;\n color: #f0c05a;\n}\n\n.deposit-submit:hover {\n background: linear-gradient(135deg, #7b2cbf, #9f36f1);\n transform: translateY(-2px);\n box-shadow: 0 6px 20px rgba(159, 54, 241, 0.4);\n}\n\n.deposit-submit:active {\n transform: translateY(0);\n}\n\n.stars-packages {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.star-package-btn {\n background: linear-gradient(135deg, rgba(28, 17, 41, 0.8), rgba(42, 27, 62, 0.8));\n border: 2px solid #f0c05a;\n border-radius: 12px;\n padding: 15px 20px;\n display: flex;\n align-items: center;\n gap: 15px;\n cursor: pointer;\n transition: all 0.3s ease;\n position: relative;\n overflow: hidden;\n}\n\n.star-package-btn:hover {\n background: linear-gradient(135deg, rgba(159, 54, 241, 0.3), rgba(123, 44, 191, 0.3));\n transform: translateY(-2px);\n box-shadow: 0 6px 20px rgba(240, 192, 90, 0.4);\n}\n\n.star-package-btn:active {\n transform: translateY(0);\n}\n\n.star-package-btn.featured {\n border-color: #9f36f1;\n background: linear-gradient(135deg, rgba(159, 54, 241, 0.2), rgba(123, 44, 191, 0.2));\n box-shadow: 0 4px 15px rgba(159, 54, 241, 0.3);\n}\n\n.star-package-btn.featured:hover {\n box-shadow: 0 6px 25px rgba(159, 54, 241, 0.5);\n}\n\n.popular-badge {\n position: absolute;\n top: -1px;\n right: 15px;\n background: linear-gradient(135deg, #9f36f1, #7b2cbf);\n color: #fff;\n font-size: 0.65em;\n font-weight: 700;\n padding: 4px 12px;\n border-radius: 0 0 8px 8px;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n box-shadow: 0 2px 8px rgba(159, 54, 241, 0.4);\n}\n\n.star-package-btn i {\n font-size: 2em;\n color: #f0c05a;\n filter: drop-shadow(0 0 8px rgba(240, 192, 90, 0.6));\n}\n\n.star-package-btn .star-amount {\n font-family: 'Cinzel', serif;\n font-size: 1.1em;\n color: #e0e0ff;\n font-weight: 700;\n flex: 1;\n}\n\n.star-package-btn .star-bonus {\n font-size: 0.9em;\n color: #f0c05a;\n font-weight: 600;\n background: rgba(240, 192, 90, 0.1);\n padding: 5px 12px;\n border-radius: 6px;\n border: 1px solid rgba(240, 192, 90, 0.3);\n}\n\n.withdrawal-status {\n background: rgba(159, 54, 241, 0.15);\n border: 2px solid rgba(159, 54, 241, 0.5);\n border-radius: 10px;\n padding: 15px;\n margin-top: 20px;\n text-align: center;\n}\n\n.withdrawal-status i {\n color: #f0c05a;\n font-size: 2em;\n margin-bottom: 10px;\n display: block;\n animation: pulse-icon 2s ease-in-out infinite;\n}\n\n@keyframes pulse-icon {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.5; }\n}\n\n.withdrawal-status p {\n font-size: 0.85em;\n color: #e0e0ff;\n margin: 5px 0;\n line-height: 1.5;\n}\n\n.withdrawal-status p strong {\n color: #f0c05a;\n font-family: 'Cinzel', serif;\n font-size: 1.1em;\n display: block;\n margin-bottom: 8px;\n}\n\n.withdrawal-input {\n width: 100%;\n background: #0d0e12;\n padding: 10px;\n border-radius: 8px;\n border: 1px solid #f0c05a;\n font-size: 0.8em;\n color: #e0e0ff;\n margin-bottom: 8px;\n}\n\n.withdrawal-input:focus {\n outline: none;\n border-color: #9f36f1;\n}\n\n.withdrawal-input:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.profile-header {\n display: flex;\n align-items: center;\n gap: 20px;\n margin-bottom: 10px;\n justify-content: center;\n background-color: #9f36f12c;\n padding: 10px;\n border-radius: 10px;\n border: 3px solid #190a25;\n}\n\n.profile-avatar {\n width: 80px;\n height: 80px;\n border-radius: 50%;\n border: 1px solid #f0c05a;\n filter: drop-shadow(0 0 5px rgba(159, 54, 241, 0.3));\n}\n\n.profile-info h3 {\n font-family: 'Cinzel', serif;\n font-size: 1.2em;\n color: #f0c05a;\n margin-bottom: 8px;\n text-align: center;\n}\n\n.profile-info p {\n font-size: 0.9em;\n color: #e0e0ff;\n margin: 5px 0;\n opacity: 0.8;\n text-align: center;\n}\n\n.profile-details {\n text-align: center;\n}\n\n.language-selector select {\n background: #0d0e12;\n color: #e0e0ff;\n padding: 8px;\n border: 1px solid #f0c05a;\n border-radius: 8px;\n font-size: 1em;\n width: 100%;\n height: 55px;\n cursor: pointer;\n display: block;\n /* margin-top: 15px;\n margin-bottom: 15px; */\n}\n.gameSettings {\n margin-top: 10px;\n display: flex;\n gap: 10px;\n /* margin-bottom: 20px; */\n}\n.gameSettings .profile-section {\n width: 100%;\n}\n.language-selector {\n width: 100%;\n}\n.language-selector select:focus {\n outline: none;\n border-color: #9f36f1;\n}\n\n.privacy-policy {\n color: #9f36f1;\n font-size: 0.8em;\n text-decoration: none;\n font-weight: 500;\n display: block;\n margin: 0 auto;\n width: fit-content;\n margin-bottom: 0px;\n margin-top: 10px;\n}\n\n.privacy-policy:hover {\n text-decoration: underline;\n}\n/* Add these styles to your style.css file */\n\n.profile-section {\n background: rgba(28, 17, 41, 0.6);\n border: 1px solid rgba(240, 192, 90, 0.3);\n border-radius: 8px;\n padding: 8px;\n margin-bottom: 8px;\n}\n\n.profile-setting-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.setting-label {\n display: flex;\n align-items: center;\n gap: 10px;\n font-family: 'Cinzel', serif;\n font-size: 1.2em; /* already bigger */\n color: #e0e0ff;\n white-space: nowrap; /* prevents line breaks */\n}\n\n.setting-label i {\n color: #f0c05a;\n font-size: 1em;\n}\n\n.music-toggle-btn .music-status {\n display: block;\n}\n\n.music-toggle-btn i {\n margin: 0;\n}\n\n.music-toggle-btn {\n display: flex;\n align-items: center;\n background: linear-gradient(135deg, #1c1129, #2a1b3e);\n border: 2px solid #f0c05a;\n border-radius: 25px;\n padding: 8px 16px;\n font-family: 'Cinzel', serif;\n font-size: 0.85em;\n font-weight: 700;\n color: #e0e0ff;\n transition: all 0.3s ease;\n min-width: 40px;\n width: 40px;\n justify-content: center;\n float: right;\n}\n\n.music-toggle-btn i {\n font-size: 1.1em;\n color: #f0c05a;\n transition: all 0.3s ease;\n}\n\n.music-toggle-btn.active {\n background: linear-gradient(135deg, #9f36f1, #7b2cbf);\n border-color: #9f36f1;\n box-shadow: 0 0 15px rgba(159, 54, 241, 0.4);\n}\n\n.music-toggle-btn.active i {\n color: #f0c05a;\n animation: music-pulse 1.5s ease-in-out infinite;\n}\n\n.music-toggle-btn:hover {\n transform: scale(1.05);\n box-shadow: 0 4px 12px rgba(159, 54, 241, 0.3);\n}\n\n.music-toggle-btn:active {\n transform: scale(0.95);\n}\n\n.music-status {\n font-weight: 700;\n letter-spacing: 0.5px;\n}\n\n@keyframes music-pulse {\n 0%, 100% {\n transform: scale(1);\n opacity: 1;\n }\n 50% {\n transform: scale(1.2);\n opacity: 0.8;\n }\n}\n\n.footer {\n font-size: 0.75em;\n color: #e0e0ff;\n text-align: center;\n margin-top: 5px;\n margin-bottom: 0px;\n opacity: 0.8;\n}\n\n.footer img {\n width: 50%;\n max-height: 100px;\n object-fit: contain;\n border-radius: 8px;\n margin-top: 10px;\n filter: drop-shadow(0 0 5px rgba(159, 54, 241, 0.3));\n}\n\n.btnCombo {\n display: flex;\n flex-wrap: nowrap;\n gap: 10px;\n}\n\n@media (max-width: 360px) {\n body {\n padding: calc(10px + env(safe-area-inset-top)) 8px calc(70px + env(safe-area-inset-bottom));\n }\n\n .casino-container.fullscreen {\n margin-top: calc(35px + env(safe-area-inset-top));\n }\n\n .character-image, .footer img {\n max-height: 80px;\n }\n\n .reel-container {\n height: 180px;\n }\n\n .symbol {\n height: 60px;\n }\n\n .symbol img {\n width: 45px;\n height: 45px;\n }\n\n .telegram-nav {\n height: 60px;\n padding: 10px 0;\n gap: 10px;\n }\n\n .telegram-nav-button {\n font-size: 0.85em;\n padding: 8px;\n flex: 1;\n max-width: 60px;\n }\n\n .telegram-nav-button i {\n font-size: 1.4em;\n }\n\n .deposit-btn, .withdraw-btn {\n font-size: 0.8em;\n padding: 8px;\n max-width: 120px;\n }\n\n .qr-code {\n width: 100px;\n height: 100px;\n }\n\n .info-box h3 {\n font-size: 0.7em;\n }\n\n .info-box .value {\n font-size: 0.9em;\n }\n\n .slot-machine {\n padding: 8px;\n }\n\n .max-bet-button {\n padding: 4px 8px;\n font-size: 0.7em;\n }\n\n .ok-button {\n padding: 7px;\n font-size: 0.8em;\n }\n\n .referral-gift-icon {\n font-size: 2.5em;\n }\n\n .referral-title {\n font-size: 1.3em;\n }\n\n .referral-subtitle {\n font-size: 0.85em;\n }\n\n .stat-number {\n font-size: 1.5em;\n }\n\n .stat-label {\n font-size: 0.7em;\n }\n\n .share-button {\n font-size: 0.85em;\n padding: 10px 16px;\n }\n\n .referral-info-list li {\n font-size: 0.7em;\n }\n\n .deposit-warning {\n font-size: 0.7em;\n }\n}\n\n@media (max-width: 320px) {\n body {\n padding: calc(8px + env(safe-area-inset-top)) 6px calc(60px + env(safe-area-inset-bottom));\n }\n\n .casino-container.fullscreen {\n margin-top: calc(30px + env(safe-area-inset-top));\n }\n\n .character-image, .footer img {\n max-height: 70px;\n }\n\n .reel-container {\n height: 150px;\n }\n\n .symbol {\n height: 50px;\n }\n\n .symbol img {\n width: 35px;\n height: 35px;\n }\n\n .telegram-nav {\n height: 60px;\n padding: 8px 0;\n gap: 8px;\n }\n\n .telegram-nav-button {\n font-size: 0.8em;\n padding: 6px;\n flex: 1;\n max-width: 55px;\n }\n\n .telegram-nav-button i {\n font-size: 1.3em;\n }\n\n .deposit-btn, .withdraw-btn {\n font-size: 0.75em;\n padding: 6px;\n max-width: 110px;\n }\n\n .qr-code {\n width: 90px;\n height: 90px;\n }\n\n .info-box h3 {\n font-size: 0.65em;\n }\n\n .info-box .value {\n font-size: 0.85em;\n }\n\n .slot-machine {\n padding: 6px;\n }\n\n .max-bet-button {\n padding: 4px 8px;\n font-size: 0.7em;\n }\n\n .ok-button {\n padding: 7px;\n font-size: 0.8em;\n }\n\n .referral-gift-icon {\n font-size: 2.2em;\n }\n\n .referral-title { \n font-size: 1.2em;\n }\n\n .referral-subtitle {\n font-size: 0.8em;\n }\n\n .stat-number {\n font-size: 1.3em;\n }\n\n .stat-label {\n font-size: 0.65em;\n }\n\n .share-button {\n font-size: 0.8em;\n padding: 10px 14px;\n }\n\n .referral-info-list li {\n font-size: 0.65em;\n }\n\n .deposit-warning {\n font-size: 0.65em;\n }\n}" } ]