Spaces:

weltenschmid
/

anycoder-04dc4c5e

Running

App Files Files Community

weltenschmid commited on 22 days ago

Commit

cd5cd17

verified ·

1 Parent(s): b4a1354

🎨 Redesign from AnyCoder

Browse files

This Pull Request contains a redesigned version of the app with:

- ✨ Modern, mobile-friendly design
- 🎯 Minimal, clean components
- 📱 Responsive layout
- 🚀 Improved user experience

Generated by [AnyCoder](https://huggingface.co/spaces/akhaliq/anycoder)

Files changed (1) hide show

index.html +923 -935

index.html CHANGED Viewed

@@ -1,947 +1,935 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Royal Fortune Casino - Blackjack Edition</title>
-  <!-- Google Fonts -->
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-  <link
-    href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Roboto:wght@300;400;500;700&display=swap"
-    rel="stylesheet">
-  <!-- FontAwesome for Icons -->
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
-  <style>
-    :root {
-      --primary-gold: #d4af37;
-      --primary-gold-hover: #f3cf55;
-      --bg-dark: #0f0f13;
-      --bg-panel: #1a1a24;
-      --bg-card: #23232f;
-      --text-main: #ffffff;
-      --text-muted: #a0a0b0;
-      --accent-red: #e74c3c;
-      --accent-green: #2ecc71;
-      --radius: 12px;
-      --shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
-      --glass: rgba(26, 26, 36, 0.85);
-    }
-    * {
-      box-sizing: border-box;
-      margin: 0;
-      padding: 0;
-    }
-    body {
-      font-family: 'Roboto', sans-serif;
-      background-color: var(--bg-dark);
-      color: var(--text-main);
-      line-height: 1.6;
-      overflow-x: hidden;
-      background-image: radial-gradient(circle at 10% 20%, #1a1a24 0%, #0f0f13 90%);
-      min-height: 100vh;
-      display: flex;
-      flex-direction: column;
-    }
-    /* Typography */
-    h1,
-    h2,
-    h3,
-    h4 {
-      font-family: 'Cinzel', serif;
-      color: var(--primary-gold);
-    }
-    a {
-      text-decoration: none;
-      color: inherit;
-      transition: color 0.3s;
-    }
-    /* Utility */
-    .container {
-      max-width: 1200px;
-      margin: 0 auto;
-      padding: 0 20px;
-      flex: 1;
-    }
-    .btn {
-      display: inline-flex;
-      align-items: center;
-      gap: 8px;
-      padding: 10px 24px;
-      border-radius: 30px;
-      border: none;
-      font-weight: 600;
-      cursor: pointer;
-      transition: all 0.3s ease;
-      font-size: 0.95rem;
-    }
-    .btn-gold {
-      background: linear-gradient(135deg, var(--primary-gold), #b8860b);
-      color: #000;
-    }
-    .btn-gold:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
-      background: linear-gradient(135deg, var(--primary-gold-hover), var(--primary-gold));
-    }
-    .btn-outline {
-      background: transparent;
-      border: 2px solid var(--primary-gold);
-      color: var(--primary-gold);
-    }
-    .btn-outline:hover {
-      background: var(--primary-gold);
-      color: #000;
-    }
-    .btn-danger {
-      background: var(--accent-red);
-      color: white;
-    }
-    .btn-danger:hover {
-      background: #c0392b;
-    }
-    .btn-success {
-      background: var(--accent-green);
-      color: white;
-    }
-    .btn-success:hover {
-      background: #27ae60;
-    }
-    .btn:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-      filter: grayscale(1);
-    }
-    /* Header */
-    header {
-      background: rgba(15, 15, 19, 0.95);
-      backdrop-filter: blur(10px);
-      position: sticky;
-      top: 0;
-      z-index: 100;
-      padding: 15px 0;
-      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-    }
-    nav {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-    }
-    .logo {
-      font-size: 1.5rem;
-      font-weight: 700;
-      display: flex;
-      align-items: center;
-      gap: 10px;
-    }
-    .logo i {
-      color: var(--primary-gold);
-      font-size: 1.8rem;
-    }
-    .nav-controls {
-      display: flex;
-      align-items: center;
-      gap: 20px;
-    }
-    .balance-display {
-      background: var(--bg-panel);
-      padding: 8px 16px;
-      border-radius: 20px;
-      border: 1px solid rgba(212, 175, 55, 0.3);
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      font-weight: 700;
-      color: var(--primary-gold);
-    }
-    .lang-select {
-      background: var(--bg-panel);
-      color: var(--text-main);
-      border: 1px solid rgba(255, 255, 255, 0.1);
-      padding: 5px 10px;
-      border-radius: 6px;
-      cursor: pointer;
-    }
-    /* Hero / Highlight Section */
-    .hero {
-      padding: 40px 0;
-      text-align: center;
-    }
-    .daily-bonus-banner {
-      background: linear-gradient(90deg, #2c3e50, #000000);
-      border: 1px solid var(--primary-gold);
-      padding: 15px;
-      border-radius: var(--radius);
-      margin-bottom: 30px;
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      flex-wrap: wrap;
-      gap: 15px;
-    }
-    .bonus-content h3 {
-      font-size: 1.2rem;
-      margin-bottom: 5px;
-    }
-    .bonus-content p {
-      color: var(--primary-gold);
-      font-weight: 700;
-    }
-    .game-highlight {
-      background: var(--bg-panel);
-      border-radius: var(--radius);
-      overflow: hidden;
-      box-shadow: var(--shadow);
-      position: relative;
-      border: 1px solid rgba(212, 175, 55, 0.2);
-    }
-    .highlight-badge {
-      position: absolute;
-      top: 20px;
-      left: -35px;
-      background: var(--accent-red);
-      color: white;
-      padding: 8px 40px;
-      transform: rotate(-45deg);
-      font-weight: bold;
-      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
-      z-index: 10;
-    }
-    .highlight-content {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      align-items: center;
-    }
-    .highlight-image {
-      height: 400px;
-      background-size: cover;
-      background-position: center;
-      position: relative;
-    }
-    .highlight-image::after {
-      content: '';
-      position: absolute;
-      inset: 0;
-      background: linear-gradient(90deg, transparent 0%, var(--bg-panel) 100%);
-    }
-    .highlight-text {
-      padding: 40px;
-      text-align: left;
-    }
-    /* Games Grid */
-    .section-title {
-      text-align: center;
-      margin: 50px 0 30px;
-      font-size: 2rem;
-      position: relative;
-      display: inline-block;
-      left: 50%;
-      transform: translateX(-50%);
-    }
-    .section-title::after {
-      content: '';
-      display: block;
-      width: 60px;
-      height: 3px;
-      background: var(--primary-gold);
-      margin: 10px auto 0;
-    }
-    .games-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-      gap: 25px;
-      padding-bottom: 60px;
-    }
-    .game-card {
-      background: var(--bg-card);
-      border-radius: var(--radius);
-      overflow: hidden;
-      transition: transform 0.3s, box-shadow 0.3s;
-      cursor: pointer;
-      border: 1px solid transparent;
-      position: relative;
-    }
-    .game-card:hover {
-      transform: translateY(-5px);
-      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
-      border-color: var(--primary-gold);
-    }
-    .card-img {
-      height: 180px;
-      background-color: #333;
-      background-size: cover;
-      background-position: center;
-      position: relative;
-    }
-    .card-overlay {
-      position: absolute;
-      inset: 0;
-      background: rgba(0, 0, 0, 0.6);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      opacity: 0;
-      transition: opacity 0.3s;
-    }
-    .game-card:hover .card-overlay {
-      opacity: 1;
-    }
-    .card-body {
-      padding: 20px;
-    }
-    .card-body h4 {
-      font-size: 1.2rem;
-      margin-bottom: 5px;
-      color: #fff;
-    }
-    .card-body p {
-      font-size: 0.9rem;
-      color: var(--text-muted);
-    }
-    /* Modals */
-    .modal-overlay {
-      position: fixed;
-      inset: 0;
-      background: rgba(0, 0, 0, 0.8);
-      backdrop-filter: blur(5px);
-      z-index: 1000;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      opacity: 0;
-      visibility: hidden;
-      transition: all 0.3s;
-    }
-    .modal-overlay.active {
-      opacity: 1;
-      visibility: visible;
-    }
-    .modal {
-      background: var(--bg-panel);
-      width: 90%;
-      max-width: 600px;
-      border-radius: var(--radius);
-      padding: 30px;
-      position: relative;
-      transform: scale(0.9);
-      transition: transform 0.3s;
-      border: 1px solid var(--primary-gold);
-      box-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
-    }
-    .modal-overlay.active .modal {
-      transform: scale(1);
-    }
-    .modal-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 20px;
-      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-      padding-bottom: 15px;
-    }
-    .close-modal {
-      background: none;
-      border: none;
-      color: var(--text-muted);
-      font-size: 1.5rem;
-      cursor: pointer;
-    }
-    .close-modal:hover {
-      color: #fff;
-    }
-    /* Forms */
-    .form-group {
-      margin-bottom: 20px;
-    }
-    .form-label {
-      display: block;
-      margin-bottom: 8px;
-      color: var(--text-muted);
-    }
-    .form-input {
-      width: 100%;
-      padding: 12px;
-      background: var(--bg-dark);
-      border: 1px solid rgba(255, 255, 255, 0.1);
-      border-radius: 8px;
-      color: #fff;
-      font-size: 1rem;
-    }
-    .form-input:focus {
-      outline: none;
-      border-color: var(--primary-gold);
-    }
-    /* Game UI Specifics */
-    .game-area {
-      background: #050507;
-      /* Darker felt color */
-      padding: 20px;
-      border-radius: 12px;
-      text-align: center;
-      min-height: 300px;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      border: 2px solid #333;
-      box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.8);
-    }
-    .game-controls {
-      display: flex;
-      gap: 10px;
-      justify-content: center;
-      margin-top: 20px;
-      flex-wrap: wrap;
-    }
-    .game-result {
-      font-size: 1.5rem;
-      font-weight: bold;
-      min-height: 2em;
-      margin: 10px 0;
-      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
-    }
-    .win-anim {
-      color: var(--accent-green);
-      animation: pulse 0.5s;
-    }
-    .lose-anim {
-      color: var(--accent-red);
-    }
-    @keyframes pulse {
-      0% {
-        transform: scale(1);
-      }
-      50% {
-        transform: scale(1.1);
-      }
-      100% {
-        transform: scale(1);
-      }
-    }
-    /* Toast Notification */
-    .toast-container {
-      position: fixed;
-      bottom: 20px;
-      right: 20px;
-      z-index: 2000;
-      display: flex;
-      flex-direction: column;
-      gap: 10px;
-    }
-    .toast {
-      background: var(--bg-panel);
-      border-left: 4px solid var(--primary-gold);
-      color: #fff;
-      padding: 15px 25px;
-      border-radius: 4px;
-      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
-      display: flex;
-      align-items: center;
-      gap: 10px;
-      animation: slideIn 0.3s ease-out forwards;
-      min-width: 250px;
-    }
-    @keyframes slideIn {
-      from {
-        transform: translateX(100%);
-        opacity: 0;
-      }
-      to {
-        transform: translateX(0);
-        opacity: 1;
-      }
-    }
-    /* --- BLACKJACK SPECIFIC STYLES --- */
-    .bj-table {
-      width: 100%;
-      display: flex;
-      flex-direction: column;
-      gap: 20px;
-      height: 100%;
-    }
-    .hand-area {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: 10px;
-    }
-    .hand-label {
-      font-size: 0.9rem;
-      color: var(--text-muted);
-      text-transform: uppercase;
-      letter-spacing: 1px;
-    }
-    .cards-container {
-      display: flex;
-      justify-content: center;
-      gap: 10px;
-      min-height: 100px;
-      flex-wrap: wrap;
-    }
-    .playing-card {
-      width: 60px;
-      height: 90px;
-      background: white;
-      border-radius: 6px;
-      color: black;
-      font-weight: bold;
-      font-size: 1.2rem;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
-      padding: 5px;
-      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
-      position: relative;
-      user-select: none;
-      animation: dealCard 0.3s ease-out;
-    }
-    @keyframes dealCard {
-      from {
-        transform: translateY(-50px) scale(0.5);
-        opacity: 0;
-      }
-      to {
-        transform: translateY(0) scale(1);
-        opacity: 1;
-      }
-    }
-    .playing-card.red {
-      color: #d00;
-    }
-    .playing-card.black {
-      color: #000;
-    }
-    .card-center {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      font-size: 1.8rem;
-    }
-    .card-corner-bottom {
-      transform: rotate(180deg);
-    }
-    .score-bubble {
-      background: rgba(0, 0, 0, 0.6);
-      padding: 2px 8px;
-      border-radius: 10px;
-      font-size: 0.8rem;
-      color: white;
-      margin-top: 5px;
-    }
-    .hidden-card {
-      background: repeating-linear-gradient(45deg,
-          #606dbc,
-          #606dbc 10px,
-          #465298 10px,
-          #465298 20px);
-      border: 2px solid white;
-    }
-    /* Responsive */
-    @media (max-width: 768px) {
-      .highlight-content {
-        grid-template-columns: 1fr;
-      }
-      .highlight-image {
-        height: 250px;
-      }
-      .highlight-image::after {
-        background: linear-gradient(180deg, transparent 0%, var(--bg-panel) 100%);
-      }
-      .nav-controls span {
-        display: none;
-      }
-      .daily-bonus-banner {
-        flex-direction: column;
-        text-align: center;
-      }
-      .modal {
-        width: 95%;
-        padding: 20px;
-      }
-      .playing-card {
-        width: 50px;
-        height: 75px;
-        font-size: 1rem;
-      }
-      .card-center {
-        font-size: 1.5rem;
-      }
-    }
-  </style>
-</head>
-<body>
-  <!-- Header -->
-  <header>
-    <div class="container">
-      <nav>
-        <div class="logo">
-          <i class="fas fa-crown"></i>
-          ROYAL FORTUNE
-        </div>
-        <div class="nav-controls">
-          <select id="languageSelect" class="lang-select">
-            <option value="en">EN</option>
-            <option value="es">ES</option>
-            <option value="fr">FR</option>
-            <option value="de">DE</option>
-          </select>
-          <div class="balance-display">
-            <i class="fas fa-coins"></i>
-            <span id="balanceAmount">1000</span>
-          </div>
-          <button class="btn btn-gold" id="topUpBtn">
-            <i class="fas fa-plus-circle"></i> <span data-i18n="topUp">Top Up</span>
-          </button>
-        </div>
-      </nav>
-    </div>
-  </header>
-  <main class="container">
-    <!-- Hero & Daily Bonus -->
-    <section class="hero">
-      <div class="daily-bonus-banner">
-        <div class="bonus-content">
-          <h3 data-i18n="dailyBonusTitle">🔥 Daily Deposit Bonus</h3>
-          <p id="dailyBonusText">Loading...</p>
         </div>
-        <button class="btn btn-outline" onclick="openTopUpModal()" data-i18n="claimNow">Claim Now</button>
-      </div>
-      <div class="game-highlight" id="highlightSection">
-        <div class="highlight-badge" data-i18n="gameOfDay">Game of the Day</div>
-        <div class="highlight-content">
-          <div class="highlight-image" id="highlightImage"></div>
-          <div class="highlight-text">
-            <h2 id="highlightTitle">Loading...</h2>
-            <p id="highlightDesc" style="color: var(--text-muted); margin: 15px 0;">Loading description...</p>
-            <button class="btn btn-gold" id="highlightPlayBtn">
-              <i class="fas fa-play"></i> <span data-i18n="playNow">Play Now</span>
-            </button>
-          </div>
         </div>
-      </div>
-    </section>
-    <!-- Games Grid -->
-    <h2 class="section-title" data-i18n="ourGames">Our Games</h2>
-    <section class="games-grid" id="gamesGrid">
-      <!-- Games injected via JS -->
-    </section>
-  </main>
-  <footer
-    style="text-align: center; padding: 40px; color: var(--text-muted); font-size: 0.8rem; border-top: 1px solid rgba(255,255,255,0.05); background: var(--bg-panel);">
-    <p>&copy; 2023 Royal Fortune Casino. All rights reserved.</p>
-    <p style="margin-top: 10px;">Please gamble responsibly. This is a demo application.</p>
-    <div style="margin-top: 20px;">
-      <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank"
-        style="color: var(--primary-gold); font-weight: bold;">
-        Built with anycoder
-      </a>
-    </div>
-  </footer>
-  <!-- TOP UP MODAL -->
-  <div class="modal-overlay" id="topUpModal">
-    <div class="modal">
-      <div class="modal-header">
-        <h3 data-i18n="addFunds">Add Funds</h3>
-        <button class="close-modal">&times;</button>
-      </div>
-      <div class="form-group">
-        <label class="form-label" data-i18n="amount">Amount</label>
-        <input type="number" id="topUpAmount" class="form-input" placeholder="Enter amount..." min="10">
-      </div>
-      <button class="btn btn-gold" id="confirmTopUp" style="width: 100%" data-i18n="confirm">Confirm</button>
     </div>
-  </div>
-  <!-- GAME MODAL -->
-  <div class="modal-overlay" id="gameModal">
-    <div class="modal">
-      <div class="modal-header">
-        <h3 id="activeGameTitle">Game Title</h3>
-        <button class="close-modal">&times;</button>
-      </div>
-      <div class="game-area" id="gameArena">
-        <!-- Dynamic Game Content Here -->
-      </div>
-      <div class="game-controls" id="gameControls">
-        <!-- Dynamic Controls Here -->
-      </div>
-      <div
-        style="text-align: center; margin-top: 15px; color: var(--text-muted); font-size: 0.9rem; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 15px;">
-        <span data-i18n="yourBet">Your Bet</span>:
-        <span id="currentBetDisplay" style="color: #fff; font-weight: bold; margin-left: 5px;">10</span>
-        <div style="margin-top: 10px;">
-          <button class="btn btn-outline" style="padding: 2px 10px; font-size: 0.8rem;" onclick="adjustBet(10)">+10</button>
-          <button class="btn btn-outline" style="padding: 2px 10px; font-size: 0.8rem;" onclick="adjustBet(-10)">-10</button>
         </div>
-      </div>
     </div>
-  </div>
-  <!-- Toast Container -->
-  <div class="toast-container" id="toastContainer"></div>
-  <script>
-    // --- DATA & STATE ---
-    const state = {
-      balance: 1000,
-      currentBet: 10,
-      lang: 'en',
-      activeGame: null,
-      // Game specific states
-      bjDeck: [],
-      bjPlayerHand: [],
-      bjDealerHand: [],
-      bjGameActive: false
-    };
-    const translations = {
-      en: {
-        topUp: "Top Up",
-        dailyBonusTitle: "🔥 Daily Deposit Bonus",
-        claimNow: "Claim Now",
-        gameOfDay: "Game of the Day",
-        playNow: "Play Now",
-        ourGames: "Our Games",
-        addFunds: "Add Funds",
-        amount: "Amount",
-        confirm: "Confirm",
-        yourBet: "Your Bet",
-        spin: "Spin",
-        hit: "Hit",
-        stand: "Stand",
-        double: "Double",
-        pickColor: "Pick Color",
-        pickHigher: "Higher",
-        pickLower: "Lower",
-        flip: "Flip Coin",
-        red: "Red",
-        black: "Black",
-        green: "Green",
-        msgWin: "You Won!",
-        msgLose: "Dealer Wins",
-        msgPush: "Push (Tie)",
-        msgBust: "Bust! You Lose",
-        msgBlackjack: "BLACKJACK!",
-        msgInsufficient: "Insufficient funds!",
-        msgTopUpSuccess: "Funds added successfully!",
-        bonusText: "Get {value}% extra on every deposit today!",
-        dealer: "Dealer",
-        you: "You",
-        games: {
-          slots: { name: "Neon Slots", desc: "Match symbols to win big!" },
-          blackjack: { name: "Blackjack", desc: "Beat the dealer to 21." },
-          roulette: { name: "Mini Roulette", desc: "Pick your lucky color." },
-          highlow: { name: "High Low", desc: "Guess the next card." }
-        }
-      },
-      es: {
-        topUp: "Recargar",
-        dailyBonusTitle: "🔥 Bono Diario",
-        claimNow: "Reclamar",
-        gameOfDay: "Juego del Día",
-        playNow: "Jugar Ahora",
-        ourGames: "Nuestros Juegos",
-        addFunds: "Añadir Fondos",
-        amount: "Cantidad",
-        confirm: "Confirmar",
-        yourBet: "Tu Apuesta",
-        spin: "Girar",
-        hit: "Pedir",
-        stand: "Plantarse",
-        double: "Doblar",
-        pickColor: "Elige Color",
-        pickHigher: "Más Alto",
-        pickLower: "Más Bajo",
-        flip: "Lanzar",
-        red: "Rojo",
-        black: "Negro",
-        green: "Verde",
-        msgWin: "¡Ganaste!",
-        msgLose: "Gana la Casa",
-        msgPush: "Empate",
-        msgBust: "¡Te pasaste!",
-        msgBlackjack: "¡BLACKJACK!",
-        msgInsufficient: "¡Fondos insuficientes!",
-        msgTopUpSuccess: "¡Fondos añadidos con éxito!",
-        bonusText: "¡Obtén un {value}% extra en cada depósito hoy!",
-        dealer: "Croupier",
-        you: "Tú",
-        games: {
-          slots: { name: "Tragamonedas", desc: "¡Combina símbolos para ganar!" },
-          blackjack: { name: "Blackjack", desc: "Supera al croupier con 21." },
-          roulette: { name: "Ruleta Mini", desc: "Elige tu color de la suerte." },
-          highlow: { name: "Alto Bajo", desc: "Adivina la siguiente carta." }
-        }
-      },
-      fr: {
-        topUp: "Recharger",
-        dailyBonusTitle: "🔥 Bonus Quotidien",
-        claimNow: "Réclamer",
-        gameOfDay: "Jeu du Jour",
-        playNow: "Jouer",
-        ourGames: "Nos Jeux",
-        addFunds: "Ajouter des Fonds",
-        amount: "Montant",
-        confirm: "Confirmer",
-        yourBet: "Votre Mise",
-        spin: "Tourner",
-        hit: "Carte",
-        stand: "Servi",
-        double: "Doubler",
-        pickColor: "Choisir Couleur",
-        pickHigher: "Plus Haut",
-        pickLower: "Plus Bas",
-        flip: "Lancer",
-        red: "Rouge",
-        black: "Noir",
-        green: "Vert",
-        msgWin: "Vous avez gagné!",
-        msgLose: "La Maison Gagne",
-        msgPush: "Égalité",
-        msgBust: "Perdu!",
-        msgBlackjack: "BLACKJACK!",
-        msgInsufficient: "Fonds insuffisants!",
-        msgTopUpSuccess: "Fonds ajoutés avec succès!",
-        bonusText: "Obtenez {value}% de plus sur chaque dépôt aujourd'hui!",
-        dealer: "Croupier",
-        you: "Vous",
-        games: {
-          slots: { name: "Machine à Sous", desc: "Alignez les symboles!" },
-          blackjack: { name: "Blackjack", desc: "Battre le croupier." },
-          roulette: { name: "Mini Roulette", desc: "Choisissez votre couleur." },
-          highlow: { name: "Plus ou Moins", desc: "Devinez la carte suivante." }
-        }
-      },
-      de: {
-        topUp: "Aufladen",
-        dailyBonusTitle: "🔥 Tägliches Bonus",
-        claimNow: "Fordern",
-        gameOfDay: "Spiel des Tages",
-        playNow: "Jetzt Spielen",
-        ourGames: "Unsere Spiele",
-        addFunds: "Guthaben Aufladen",
-        amount: "Betrag",
-        confirm: "Bestätigen",
-        yourBet: "Dein Einsatz",
-        spin: "Drehen",
-        hit: "Karte",
-        stand: "Halten",
-        double: "Verdoppeln",
-        pickColor: "Farbe Wählen",
-        pickHigher: "Höher",
-        pickLower: "Niedriger",
-        flip: "Werfen",
-        red: "Rot",
-        black: "Schwarz",
-        green: "Grün",
-        msgWin: "Gewonnen!",
-        msgLose: "Bank Gewinnt",
-        msgPush: "Unentschieden",
-        msgBust: "Verloren!",
-        msgBlackjack: "BLACKJACK!",
-        msgInsufficient: "Nicht genug Guthaben!",
-        msgTopUpSuccess: "Guthaben erfolgreich aufgeladen!",
-        bonusText: "Erhalten Sie heute {value

 <!DOCTYPE html>
 <html lang="en">
 <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Royal Fortune | Modern Casino</title>
+    <!-- Google Fonts: Inter for clean, modern UI -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <!-- FontAwesome for Icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        /* --- CSS VARIABLES & RESET --- */
+        :root {
+            --bg-body: #0f172a;
+            --bg-surface: #1e293b;
+            --bg-surface-hover: #334155;
+            --primary: #6366f1; /* Indigo */
+            --primary-hover: #4f46e5;
+            --accent-gold: #fbbf24;
+            --accent-red: #ef4444;
+            --accent-green: #10b981;
+            --text-main: #f8fafc;
+            --text-muted: #94a3b8;
+            --border: #334155;
+            --radius-sm: 8px;
+            --radius-md: 12px;
+            --radius-lg: 20px;
+            --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+            --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
+        }
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            -webkit-tap-highlight-color: transparent;
+        }
+        body {
+            font-family: 'Inter', sans-serif;
+            background-color: var(--bg-body);
+            color: var(--text-main);
+            line-height: 1.5;
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+        }
+        /* --- UTILITIES --- */
+        .container {
+            width: 100%;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 20px;
+        }
+        .flex-center { display: flex; align-items: center; justify-content: center; }
+        .flex-between { display: flex; align-items: center; justify-content: space-between; }
+        .text-center { text-align: center; }
+        .hidden { display: none !important; }
+        /* --- BUTTONS --- */
+        .btn {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+            padding: 10px 20px;
+            border-radius: var(--radius-md);
+            border: none;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            font-size: 0.95rem;
+        }
+        .btn:active { transform: scale(0.98); }
+        .btn-primary {
+            background-color: var(--primary);
+            color: white;
+        }
+        .btn-primary:hover { background-color: var(--primary-hover); }
+        .btn-outline {
+            background: transparent;
+            border: 1px solid var(--border);
+            color: var(--text-main);
+        }
+        .btn-outline:hover { background-color: var(--bg-surface-hover); border-color: var(--text-muted); }
+        .btn-gold {
+            background: linear-gradient(135deg, var(--accent-gold), #d97706);
+            color: #000;
+        }
+        .btn-gold:hover { filter: brightness(1.1); }
+        .btn-danger { background-color: var(--accent-red); color: white; }
+        .btn-success { background-color: var(--accent-green); color: white; }
+        /* --- HEADER --- */
+        header {
+            background: rgba(15, 23, 42, 0.9);
+            backdrop-filter: blur(10px);
+            position: sticky;
+            top: 0;
+            z-index: 50;
+            padding: 16px 0;
+            border-bottom: 1px solid var(--border);
+        }
+        .logo {
+            font-size: 1.25rem;
+            font-weight: 700;
+            color: var(--text-main);
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+        .logo i { color: var(--accent-gold); }
+        .header-controls {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+        .balance-pill {
+            background: var(--bg-surface);
+            padding: 6px 12px;
+            border-radius: 20px;
+            font-weight: 600;
+            color: var(--accent-gold);
+            font-size: 0.9rem;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            border: 1px solid rgba(251, 191, 36, 0.2);
+        }
+        .lang-select {
+            background: transparent;
+            color: var(--text-muted);
+            border: none;
+            font-family: inherit;
+            cursor: pointer;
+            font-size: 0.9rem;
+        }
+        /* --- HERO & PROMO --- */
+        .hero {
+            padding: 40px 0;
+        }
+        .promo-card {
+            background: linear-gradient(135deg, #1e293b, #0f172a);
+            border: 1px solid var(--border);
+            border-radius: var(--radius-lg);
+            padding: 30px;
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 30px;
+            align-items: center;
+            margin-bottom: 40px;
+            position: relative;
+            overflow: hidden;
+        }
+        /* Decorative background blob */
+        .promo-card::before {
+            content: '';
+            position: absolute;
+            top: -50%;
+            right: -20%;
+            width: 400px;
+            height: 400px;
+            background: var(--primary);
+            filter: blur(120px);
+            opacity: 0.15;
+            border-radius: 50%;
+        }
+        .promo-content {
+            position: relative;
+            z-index: 1;
+        }
+        .promo-title {
+            font-size: 2rem;
+            margin-bottom: 10px;
+            background: linear-gradient(to right, #fff, #94a3b8);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        .promo-desc {
+            color: var(--text-muted);
+            margin-bottom: 20px;
+        }
+        .promo-image {
+            height: 200px;
+            background: url('https://picsum.photos/seed/casino/600/400') center/cover no-repeat;
+            border-radius: var(--radius-md);
+            opacity: 0.8;
+            box-shadow: var(--shadow-lg);
+        }
+        /* --- GAMES GRID --- */
+        .section-header {
+            margin-bottom: 20px;
+            display: flex;
+            justify-content: space-between;
+            align-items: flex-end;
+        }
+        .section-title { font-size: 1.5rem; font-weight: 700; }
+        .games-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+            gap: 20px;
+            margin-bottom: 60px;
+        }
+        .game-card {
+            background: var(--bg-surface);
+            border-radius: var(--radius-md);
+            overflow: hidden;
+            transition: transform 0.2s, box-shadow 0.2s;
+            cursor: pointer;
+            border: 1px solid transparent;
+            display: flex;
+            flex-direction: column;
+        }
+        .game-card:hover {
+            transform: translateY(-4px);
+            box-shadow: var(--shadow-lg);
+            border-color: var(--primary);
+        }
+        .card-thumb {
+            height: 160px;
+            background-color: #000;
+            position: relative;
+            background-size: cover;
+            background-position: center;
+        }
+        .card-thumb::after {
+            content: '';
+            position: absolute;
+            inset: 0;
+            background: linear-gradient(to top, var(--bg-surface), transparent);
+        }
+        .card-body {
+            padding: 16px;
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+        }
+        .game-name { font-weight: 600; font-size: 1.1rem; margin-bottom: 4px; }
+        .game-meta { font-size: 0.85rem; color: var(--text-muted); display: flex; justify-content: space-between; }
+        .game-tag { background: rgba(99, 102, 241, 0.2); color: var(--primary); padding: 2px 6px; border-radius: 4px; font-size: 0.7rem; font-weight: 600; }
+        /* --- MODALS --- */
+        .modal-overlay {
+            position: fixed;
+            inset: 0;
+            background: rgba(0, 0, 0, 0.8);
+            backdrop-filter: blur(4px);
+            z-index: 100;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            opacity: 0;
+            visibility: hidden;
+            transition: all 0.2s;
+            padding: 20px;
+        }
+        .modal-overlay.active { opacity: 1; visibility: visible; }
+        .modal {
+            background: var(--bg-surface);
+            width: 100%;
+            max-width: 500px;
+            border-radius: var(--radius-lg);
+            border: 1px solid var(--border);
+            box-shadow: var(--shadow-lg);
+            transform: scale(0.95);
+            transition: transform 0.2s;
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+            max-height: 90vh;
+        }
+        .modal-overlay.active .modal { transform: scale(1); }
+        .modal-header {
+            padding: 20px;
+            border-bottom: 1px solid var(--border);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .modal-title { font-size: 1.25rem; font-weight: 700; }
+        .close-btn {
+            background: none;
+            border: none;
+            color: var(--text-muted);
+            font-size: 1.25rem;
+            cursor: pointer;
+        }
+        .modal-body {
+            padding: 20px;
+            overflow-y: auto;
+        }
+        .modal-footer {
+            padding: 16px 20px;
+            border-top: 1px solid var(--border);
+            background: rgba(0,0,0,0.2);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        /* --- GAME UI COMPONENTS --- */
+        .game-arena {
+            background: #000;
+            border-radius: var(--radius-md);
+            min-height: 250px;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            margin-bottom: 20px;
+            position: relative;
+            padding: 20px;
+            border: 1px solid var(--border);
+        }
+        .game-message {
+            font-size: 1.5rem;
+            font-weight: 700;
+            margin-bottom: 10px;
+            text-align: center;
+        }
+        /* Playing Cards */
+        .cards-row {
+            display: flex;
+            justify-content: center;
+            gap: 10px;
+            margin: 10px 0;
+            flex-wrap: wrap;
+        }
+        .playing-card {
+            width: 60px;
+            height: 84px;
+            background: white;
+            border-radius: 6px;
+            color: #333;
+            font-weight: bold;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            padding: 6px;
+            font-size: 1.2rem;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.3);
+            animation: dealCard 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+        }
+        @keyframes dealCard {
+            from { opacity: 0; transform: translateY(-20px) scale(0.8); }
+            to { opacity: 1; transform: translateY(0) scale(1); }
+        }
+        .playing-card.red { color: #dc2626; }
+        .playing-card.black { color: #1e293b; }
+        .card-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1.5rem; }
+        .card-corner-bottom { transform: rotate(180deg); }
+        .hidden-card {
+            background: repeating-linear-gradient(45deg, #1e293b, #1e293b 10px, #334155 10px, #334155 20px);
+            border: 2px solid #fff;
+        }
+        .hidden-card * { display: none; }
+        /* Slot Machine */
+        .slot-machine {
+            display: flex;
+            gap: 10px;
+            background: #222;
+            padding: 15px;
+            border-radius: 10px;
+            border: 4px solid var(--accent-gold);
+        }
+        .slot-reel {
+            width: 60px;
+            height: 80px;
+            background: #fff;
+            border-radius: 4px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 2.5rem;
+            color: #333;
+        }
+        /* Controls */
+        .bet-controls {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            background: var(--bg-surface-hover);
+            padding: 5px;
+            border-radius: var(--radius-sm);
+        }
+        .bet-btn {
+            width: 32px;
+            height: 32px;
+            border-radius: 6px;
+            border: none;
+            background: var(--bg-surface);
+            color: var(--text-main);
+            cursor: pointer;
+            font-weight: bold;
+        }
+        .bet-btn:hover { background: var(--primary); color: white; }
+        .bet-display { min-width: 60px; text-align: center; font-weight: 600; }
+        .game-actions {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 10px;
+        }
+        .game-actions.full { grid-template-columns: 1fr; }
+        /* --- TOAST NOTIFICATIONS --- */
+        .toast-container {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            z-index: 200;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+        }
+        .toast {
+            background: var(--bg-surface);
+            border-left: 4px solid var(--primary);
+            padding: 12px 20px;
+            border-radius: 4px;
+            box-shadow: var(--shadow-lg);
+            color: var(--text-main);
+            font-size: 0.9rem;
+            animation: slideIn 0.3s ease;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .toast.success { border-color: var(--accent-green); }
+        .toast.error { border-color: var(--accent-red); }
+        @keyframes slideIn {
+            from { transform: translateX(100%); opacity: 0; }
+            to { transform: translateX(0); opacity: 1; }
+        }
+        /* --- FOOTER --- */
+        footer {
+            margin-top: auto;
+            padding: 30px 0;
+            background: var(--bg-surface);
+            border-top: 1px solid var(--border);
+            text-align: center;
+        }
+        .footer-link {
+            color: var(--text-muted);
+            text-decoration: none;
+            font-size: 0.85rem;
+            transition: color 0.2s;
+        }
+        .footer-link:hover { color: var(--primary); }
+        /* --- RESPONSIVE --- */
+        @media (max-width: 768px) {
+            .promo-card { grid-template-columns: 1fr; text-align: center; }
+            .promo-image { height: 150px; order: -1; }
+            .header-controls span { display: none; } /* Hide label text on mobile */
+            .modal { height: 100vh; max-height: 100vh; border-radius: 0; }
+        }
+    </style>
+</head>
+<body>
+    <!-- NAV -->
+    <header>
+        <div class="container flex-between">
+            <div class="logo">
+                <i class="fas fa-crown"></i>
+                <span>ROYAL FORTUNE</span>
+            </div>
+            <div class="header-controls">
+                <select id="langSelect" class="lang-select">
+                    <option value="en">EN</option>
+                    <option value="es">ES</option>
+                    <option value="fr">FR</option>
+                    <option value="de">DE</option>
+                </select>
+                <div class="balance-pill">
+                    <i class="fas fa-coins"></i>
+                    <span id="balanceDisplay">1000</span>
+                </div>
+                <button class="btn btn-primary" id="topUpBtn">
+                    <i class="fas fa-plus"></i>
+                    <span class="desktop-only" data-i18n="topUp">Top Up</span>
+                </button>
+            </div>
         </div>
+    </header>
+    <!-- MAIN CONTENT -->
+    <main class="container">
+        <!-- HERO -->
+        <section class="hero">
+            <div class="promo-card">
+                <div class="promo-content">
+                    <h1 class="promo-title" data-i18n="heroTitle">Welcome to Fortune</h1>
+                    <p class="promo-desc" data-i18n="heroDesc">Experience the thrill of modern gaming. Play smarter, win bigger.</p>
+                    <div style="margin-bottom: 15px;">
+                        <span style="background: rgba(16, 185, 129, 0.2); color: var(--accent-green); padding: 4px 8px; border-radius: 4px; font-size: 0.8rem; font-weight: 600;">
+                            <i class="fas fa-gift"></i> <span data-i18n="dailyBonus">Daily Bonus Active</span>
+                        </span>
+                    </div>
+                    <button class="btn btn-gold" onclick="openGame('blackjack')">
+                        <span data-i18n="playNow">Play Now</span> <i class="fas fa-arrow-right"></i>
+                    </button>
+                </div>
+                <div class="promo-image"></div>
+            </div>
+        </section>
+        <!-- GAMES -->
+        <section>
+            <div class="section-header">
+                <h2 class="section-title" data-i18n="ourGames">Our Games</h2>
+            </div>
+            <div class="games-grid" id="gamesGrid">
+                <!-- Injected via JS -->
+            </div>
+        </section>
+    </main>
+    <!-- FOOTER -->
+    <footer>
+        <div class="container">
+            <p style="color: var(--text-muted); font-size: 0.85rem; margin-bottom: 10px;">
+                &copy; 2023 Royal Fortune. <span data-i18n="responsibleGamble">Please gamble responsibly.</span>
+            </p>
+            <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="footer-link" style="font-weight: 600; color: var(--primary);">
+                Built with anycoder
+            </a>
+        </div>
+    </footer>
+    <!-- TOP UP MODAL -->
+    <div class="modal-overlay" id="topUpModal">
+        <div class="modal">
+            <div class="modal-header">
+                <h3 class="modal-title" data-i18n="addFunds">Add Funds</h3>
+                <button class="close-btn" onclick="closeModal('topUpModal')">&times;</button>
+            </div>
+            <div class="modal-body">
+                <div class="form-group">
+                    <label style="display:block; margin-bottom: 8px; color: var(--text-muted);" data-i18n="amount">Amount</label>
+                    <input type="number" id="topUpInput" class="form-input" value="500" min="10" style="width: 100%; padding: 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-body); color: white;">
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button class="btn btn-outline" onclick="closeModal('topUpModal')" data-i18n="cancel">Cancel</button>
+                <button class="btn btn-primary" onclick="processTopUp()" data-i18n="confirm">Confirm</button>
+            </div>
         </div>
     </div>
+    <!-- GAME MODAL -->
+    <div class="modal-overlay" id="gameModal">
+        <div class="modal" style="max-width: 600px;">
+            <div class="modal-header">
+                <h3 class="modal-title" id="gameModalTitle">Game</h3>
+                <button class="close-btn" onclick="closeGame()">&times;</button>
+            </div>
+            <div class="modal-body">
+                <div class="game-arena" id="gameArena">
+                    <!-- Dynamic Game Content -->
+                </div>
+            </div>
+            <div class="modal-footer">
+                <div class="bet-controls">
+                    <button class="bet-btn" onclick="adjustBet(-10)">-</button>
+                    <span class="bet-display"><i class="fas fa-coins" style="color: var(--accent-gold)"></i> <span id="currentBet">10</span></span>
+                    <button class="bet-btn" onclick="adjustBet(10)">+</button>
+                </div>
+                <div class="game-actions" id="gameControls">
+                    <!-- Dynamic Buttons -->
+                </div>
+            </div>
         </div>
     </div>
+    <!-- TOAST CONTAINER -->
+    <div class="toast-container" id="toastContainer"></div>
+    <script>
+        // --- TRANSLATIONS ---
+        const i18n = {
+            en: {
+                topUp: "Top Up", heroTitle: "Welcome to Fortune", heroDesc: "Experience the thrill of modern gaming.",
+                dailyBonus: "Daily Bonus Active", playNow: "Play Now", ourGames: "Our Games",
+                addFunds: "Add Funds", amount: "Amount", confirm: "Confirm", cancel: "Cancel",
+                spin: "Spin", hit: "Hit", stand: "Stand", double: "Double",
+                red: "Red", black: "Black", green: "Green", higher: "Higher", lower: "Lower",
+                msgWin: "You Won!", msgLose: "House Wins", msgBust: "Bust!", msgTie: "Push",
+                msgInsufficient: "Insufficient Funds!", responsibleGamble: "Please gamble responsibly.",
+                games: {
+                    slots: { name: "Neon Slots", desc: "Match symbols to win" },
+                    blackjack: { name: "Blackjack", desc: "Beat the dealer to 21" },
+                    roulette: { name: "Roulette", desc: "Pick your lucky color" },
+                    highlow: { name: "High Low", desc: "Guess the next card" }
+                }
+            },
+            es: {
+                topUp: "Recargar", heroTitle: "Bienvenido", heroDesc: "Vive la emoción del juego moderno.",
+                dailyBonus: "Bono Diario Activo", playNow: "Jugar", ourGames: "Nuestros Juegos",
+                addFunds: "Añadir Fondos", amount: "Cantidad", confirm: "Confirmar", cancel: "Cancelar",
+                spin: "Girar", hit: "Pedir", stand: "Plantarse", double: "Doblar",
+                red: "Rojo", black: "Negro", green: "Verde", higher: "Más Alto", lower: "Más Bajo",
+                msgWin: "¡Ganaste!", msgLose: "Gana la Casa", msgBust: "¡Te pasaste!", msgTie: "Empate",
+                msgInsufficient: "¡Fondos insuficientes!", responsibleGamble: "Juega con responsabilidad.",
+                games: {
+                    slots: { name: "Tragamonedas", desc: "Combina símbolos" },
+                    blackjack: { name: "Blackjack", desc: "Supera al croupier" },
+                    roulette: { name: "Ruleta", desc: "Elige tu color" },
+                    highlow: { name: "Alto Bajo", desc: "Adivina la carta" }
+                }
+            }
+            // Simplified for brevity, defaulting to EN/ES logic
+        };
+        // --- STATE ---
+        const state = {
+            balance: 1000,
+            bet: 10,
+            lang: 'en',
+            activeGame: null,
+            // Game States
+            bj: { deck: [], player: [], dealer: [], active: false },
+            slots: { symbols: ['🍒', '🍋', '🍉', '⭐', '💎', '7️⃣'] }
+        };
+        // --- CORE FUNCTIONS ---
+        function init() {
+            renderGames();
+            updateBalanceUI();
+            setupEventListeners();
+        }
+        function updateText() {
+            document.querySelectorAll('[data-i18n]').forEach(el => {
+                const key = el.getAttribute('data-i18n');
+                if (i18n[state.lang][key]) {
+                    el.textContent = i18n[state.lang][key];
+                }
+            });
+            renderGames(); // Re-render grid for game titles
+        }
+        function updateBalanceUI() {
+            document.getElementById('balanceDisplay').textContent = state.balance;
+            document.getElementById('currentBet').textContent = state.bet;
+        }
+        function showToast(msg, type = 'info') {
+            const container = document.getElementById('toastContainer');
+            const toast = document.createElement('div');
+            toast.className = `toast ${type}`;
+            toast.innerHTML = `<i class="fas fa-${type === 'success' ? 'check-circle' : type === 'error' ? 'exclamation-circle' : 'info-circle'}"></i> ${msg}`;
+            container.appendChild(toast);
+            setTimeout(() => toast.remove(), 3000);
+        }
+        // --- MODAL & NAVIGATION ---
+        function openModal(id) { document.getElementById(id).classList.add('active'); }
+        function closeModal(id) { document.getElementById(id).classList.remove('active'); }
+        function openTopUp() { openModal('topUpModal'); }
+        function processTopUp() {
+            const amount = parseInt(document.getElementById('topUpInput').value);
+            if (amount > 0) {
+                state.balance += amount;
+                updateBalanceUI();
+                closeModal('topUpModal');
+                showToast(i18n[state.lang].msgTopUpSuccess || "Funds added!", 'success');
+            }
+        }
+        function openGame(gameId) {
+            if (state.balance < state.bet) {
+                showToast(i18n[state.lang].msgInsufficient, 'error');
+                openTopUp();
+                return;
+            }
+            state.activeGame = gameId;
+            const gameNames = i18n[state.lang].games;
+            document.getElementById('gameModalTitle').textContent = gameNames[gameId].name;
+            openModal('gameModal');
+            // Init Game
+            if (gameId === 'blackjack') initBlackjack();
+            else if (gameId === 'slots') initSlots();
+            else if (gameId === 'roulette') initRoulette();
+            else if (gameId === 'highlow') initHighLow();
+        }
+        function closeGame() {
+            closeModal('gameModal');
+            state.activeGame = null;
+        }
+        function adjustBet(amount) {
+            const newBet = state.bet + amount;
+            if (newBet >= 10 && newBet <= state.balance) {
+                state.bet = newBet;
+                updateBalanceUI();
+            }
+        }
+        // --- GAME GRID RENDERING ---
+        function renderGames() {
+            const grid = document.getElementById('gamesGrid');
+            const games = ['slots', 'blackjack', 'roulette', 'highlow'];
+            const meta = i18n[state.lang].games;
+            grid.innerHTML = games.map(g => {
+                const info = meta[g];
+                // Generate a consistent gradient based on game name
+                return `
+                <div class="game-card" onclick="openGame('${g}')">
+                    <div class="card-thumb" style="background: linear-gradient(135deg, hsl(${Math.random()*360}, 60%, 20%), hsl(${Math.random()*360}, 60%, 10%))">
+                        <div style="position: absolute; bottom: 10px; left: 10px; font-size: 2rem;">
+                            ${g === 'slots' ? '🎰' : g === 'blackjack' ? '🃏' : g === 'roulette' ? '🎡' : '📈'}
+                        </div>
+                    </div>
+                    <div class="card-body">
+                        <div>
+                            <div class="game-name">${info.name}</div>
+                            <div class="game-meta">
+                                <span>${info.desc}</span>
+                            </div>
+                        </div>
+                        <div style="margin-top: 10px; display:flex; justify-content:space-between; align-items:center;">
+                            <span class="game-tag">CASINO</span>
+                            <i class="fas fa-play-circle" style="color: var(--primary);"></i>
+                        </div>
+                    </div>
+                </div>
+                `;
+            }).join('');
+        }
+        // --- GAME LOGIC: BLACKJACK ---
+        function initBlackjack() {
+            state.bj = { deck: [], player: [], dealer: [], active: true };
+            createDeck();
+            shuffleDeck();
+            dealBJ();
+            renderBJ();
+            const controls = document.getElementById('gameControls');
+            controls.innerHTML = `
+                <button class="btn btn-primary" onclick="bjHit()">${i18n[state.lang].hit}</button>
+                <button class="btn btn-danger" onclick="bjStand()">${i18n[state.lang].stand}</button>
+                <button class="btn btn-outline" onclick="bjDouble()" id="bjDoubleBtn">${i18n[state.lang].double}</button>
+            `;
+            if (state.bet * 2 > state.balance) document.getElementById('bjDoubleBtn').disabled = true;
+        }
+        function createDeck() {
+            const suits = ['♠', '♥', '♦', '♣'];
+            const values = ['2','3','4','5','6','7','8','9','10','J','Q','K','A'];
+            state.bj.deck = [];
+            for(let s of suits) {
+                for(let v of values) {
+                    state.bj.deck.push({ suit: s, value: v });
+                }
+            }
+        }
+        function shuffleDeck() {
+            for (let i = state.bj.deck.length - 1; i > 0; i--) {
+                const j = Math.floor(Math.random() * (i + 1));
+                [state.bj.deck[i], state.bj.deck[j]] = [state.bj.deck[j], state.bj.deck[i]];
+            }
+        }
+        function getHandValue(hand) {
+            let val = 0;
+            let aces = 0;
+            for(let card of hand) {
+                if (['J','Q','K'].includes(card.value)) val += 10;
+                else if (card.value === 'A') { val += 11; aces++; }
+                else val += parseInt(card.value);
+            }
+            while (val > 21 && aces > 0) { val -= 10; aces--; }
+            return val;
+        }
+        function dealBJ() {
+            state.bj.player.push(state.bj.deck.pop());
+            state.bj.dealer.push(state.bj.deck.pop());
+            state.bj.player.push(state.bj.deck.pop());
+            state.bj.dealer.push(state.bj.deck.pop());
+        }
+        function renderBJ(showDealer = false) {
+            const arena = document.getElementById('gameArena');
+            const pScore = getHandValue(state.bj.player);
+            const dScore = getHandValue(state.bj.dealer);
+            let dealerHTML = state.bj.dealer.map((c, i) => {
+                if (i === 1 && !showDealer) return `<div class="playing-card hidden-card"></div>`;
+                return `<div class="playing-card ${['♥','♦'].includes(c.suit)?'red':'black'}">
+                    <div>${c.value} ${c.suit}</div>
+                    <div class="card-center">${c.suit}</div>
+                    <div class="card-corner-bottom">${c.value} ${c.suit}</div>
+                </div>`;
+            }).join('');
+            let playerHTML = state.bj.player.map(c =>
+                `<div class="playing-card ${['♥','♦'].includes(c.suit)?'red':'black'}">
+                    <div>${c.value} ${c.suit}</div>
+                    <div class="card-center">${c.suit}</div>
+                    <div class="card-corner-bottom">${c.value} ${c.suit}</div>
+                </div>`
+            ).join('');
+            let msg = "";
+            let color = "white";
+            if (pScore > 21) { msg = i18n[state.lang].msgBust; color = "var(--accent-red)"; endBJ('lose'); }
+            else if (pScore === 21) { msg = "BLACKJACK!"; color = "var(--accent-gold)"; endBJ('blackjack'); }
+            arena.innerHTML = `
+                <div style="width:100%">
+                    <div style="text-align:center; color:var(--text-muted); font-size:0.8rem; margin-bottom:5px;">DEALER (${showDealer ? dScore : '?'})</div>
+                    <div class="cards-row">${dealerHTML}</div>
+                    <div style="height: 20px;"></div>
+                    <div style="text-align:center; color:var(--text-muted); font-size:0.8rem; margin-bottom:5px;">YOU (${pScore})</div>
+                    <div class="cards-row">${playerHTML}</div>
+                    <div class="game-message" style="color:${color}; margin-top: 20px;">${msg}</div>
+                </div>
+            `;
+        }
+        function bjHit() {
+            state.bj.player.push(state.bj.deck.pop());
+            renderBJ();
+        }
+        function bjStand() {
+            // Dealer Logic
+            while(getHandValue(state.bj.dealer) < 17) {
+                state.bj.dealer.push(state.bj.deck.pop());
+            }
+            renderBJ(true);
+            determineWinner();
+        }
+        function bjDouble() {
+            state.balance -= state.bet; // Deduct extra bet
+            updateBalanceUI();
+            state.bj.player.push(state.bj.deck.pop());
+            bjStand();
+        }
+        function determineWinner() {
+            const p = getHandValue(state.bj.player);
+            const d = getHandValue(state.bj.dealer);
+            let msg = "";
+            if (p > 21) msg = i18n[state.lang].msgBust;
+            else if (d > 21) msg = i18n[state.lang].msgWin;
+            else if (p > d) msg = i18n[state.lang].msgWin;
+            else if (p < d) msg = i18n[state.lang].msgLose;
+            else msg = i18n[state.lang].msgTie;
+            const arena = document.getElementById('gameArena');
+            const msgEl = arena.querySelector('.game-message');
+            msgEl.textContent = msg;
+            msgEl.style.color = msg === i18n[state.lang].msgWin ? "var(--accent-green)" : (msg === i18n[state.lang].msgTie ? "white" : "var(--accent-red)");
+        }
+        function endBJ(result) {
+            state.bj.active = false;
+            document.getElementById('gameControls').innerHTML = `<button class="btn btn-primary full" onclick="openGame('blackjack')">Play Again</button>`;
+            if (result === 'blackjack') {
+                state.balance += state.bet * 2.5;
+                showToast(`Blackjack! +${state.bet * 1.5}`, 'success');
+            } else if (result === 'lose') {
+                state.balance -= state.bet;
+                showToast(`Lost