Embed

<!DOCTYPE html>
<html>
<head>
  <title>Find the Diamond</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      font-family: 'Arial', sans-serif;
      text-align: center;
      background-color: #f0f8ff;
      padding: 20px;
      margin: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      min-height: 100vh;
      position: relative;
    }
    .game-container {
      max-width: 500px;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    h1 {
      color: #2c3e50;
      margin-bottom: 10px;
      font-size: clamp(24px, 5vw, 32px);
    }
    .balance {
      font-size: clamp(18px, 4vw, 24px);
      margin-bottom: 20px;
      color: #27ae60;
      font-weight: bold;
    }
    .card-container {
      display: flex;
      justify-content: center;
      gap: 15px;
      margin-bottom: 20px;
      width: 100%;
      min-height: clamp(100px, 25vw, 150px);
      position: relative;
    }
    .card {
      width: clamp(70px, 20vw, 100px);
      height: clamp(90px, 25vw, 130px);
      border-radius: 10px;
      border: 3px solid #2c3e50;
      font-size: clamp(24px, 7vw, 40px);
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #3498db;
      color: white;
      cursor: pointer;
      transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
      position: absolute;
    }
    .card:hover {
      transform: translateY(-5px) scale(1.05);
      box-shadow: 0 6px 12px rgba(0,0,0,0.3);
    }
    .revealed {
      background-color: white;
      color: #2c3e50;
    }
    #message {
      font-size: clamp(16px, 4vw, 20px);
      font-weight: bold;
      min-height: 40px;
      margin: 20px 0;
      color: #2c3e50;
      width: 100%;
    }
    button {
      background-color: #2ecc71;
      color: white;
      border: none;
      padding: 12px 24px;
      font-size: clamp(16px, 4vw, 18px);
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s;
      margin: 10px 0;
      width: 80%;
      max-width: 250px;
    }
    button:hover {
      background-color: #27ae60;
    }
    button:disabled {
      background-color: #95a5a6;
      cursor: not-allowed;
    }
    .stats {
      margin-top: 20px;
      font-size: clamp(14px, 3.5vw, 16px);
      width: 100%;
    }
    .wrong {
      color: red;
      font-size: clamp(30px, 8vw, 50px);
      font-weight: bold;
    }
    .diamond {
      color: #00b4d8;
      font-size: clamp(30px, 8vw, 50px);
    }
    .bet-info {
      margin: 15px 0;
      font-size: clamp(14px, 3.5vw, 16px);
      width: 100%;
    }
    .help-container {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0,0,0,0.8);
      z-index: 100;
      padding: 20px;
      overflow-y: auto;
      color: white;
    }
    .help-content {
      background-color: #2c3e50;
      max-width: 600px;
      margin: 50px auto;
      padding: 20px;
      border-radius: 10px;
      text-align: left;
    }
    .close-help {
      float: right;
      cursor: pointer;
      font-size: 24px;
    }
    .bonus-round {
      color: #f39c12;
      font-weight: bold;
    }
    .copyright {
      position: fixed;
      bottom: 10px;
      right: 10px;
      font-size: 12px;
      color: #7f8c8d;
    }
    .attempts-counter {
      font-size: 14px;
      color: #7f8c8d;
      margin-top: 5px;
    }
    
    @media (max-width: 480px) {
      body {
        padding: 15px;
      }
      .card {
        width: 22vw;
        height: 28vw;
      }
      .card-container {
        gap: 10px;
      }
      button {
        padding: 10px 20px;
      }
      .help-content {
        margin: 20px auto;
        padding: 15px;
      }
      .copyright {
        font-size: 10px;
      }
    }
    
    @media (min-width: 768px) {
      .game-container {
        max-width: 600px;
      }
      .card {
        width: 90px;
        height: 120px;
      }
      .card-container {
        gap: 20px;
      }
    }
  </style>
</head>
<body>
  <div class="game-container">
    <h1>Find the Diamond 💎</h1>
    <div class="balance">Balance: $<span id="balance">2000</span></div>
    <div class="bet-info">Bet: $100 per try | Win: $300 | Bonus Round: $200</div>
    
    <div class="card-container" id="cards"></div>
    
    <p id="message">Click "Shuffle Cards" to start</p>
    <div class="attempts-counter">Attempts: <span id="attempts">0</span>/20</div>
    
    <button onclick="startGame()" id="playButton">Shuffle Cards ($100)</button>
    <button onclick="showHelp()" style="background-color: #3498db;">Help</button>
    
    <div class="stats">
      <p>Rounds: <span id="rounds">0</span>/20 | Wins: <span id="wins">0</span></p>
      <p>Current round: <span id="current-round">1</span></p>
    </div>
  </div>

  <div class="copyright">© 2025 BetDiamondsGroup. All rights reserved.</div>

  <div class="help-container" id="helpContainer">
    <div class="help-content">
      <span class="close-help" onclick="hideHelp()">×</span>
      <h2>How to Play Find the Diamond</h2>
      <h3>Game Rules:</h3>
      <ul>
        <li>Each round costs $100 to play</li>
        <li>3 cards will be shuffled - one contains a diamond</li>
        <li>You get 1 attempt per round</li>
        <li>If you find the diamond, you win $300!</li>
        <li>If you don't find it, you lose your bet</li>
        <li>Game consists of 20 rounds with:
          <ul>
            <li>Round 1 is always a losing round</li>
            <li>Rounds 2-20 have 4-6 guaranteed wins</li>
          </ul>
        </li>
      </ul>
      
      <h3>Bonus Round:</h3>
      <ul>
        <li>After completing all 20 rounds, you get a free Bonus Round</li>
        <li>No cost to play the Bonus Round</li>
        <li>Only 2 cards in bonus round</li>
        <li>1 attempt to find the diamond</li>
        <li>If you win, you get $200 added to your balance</li>
        <li>The Bonus Round has 50% chance to win</li>
        <li>After the Bonus Round, the game resets to Round 1</li>
      </ul>
    </div>
  </div>

  <script>
    let diamondIndex;
    let attempts = 0;
    let wins = 0;
    let balance = 2000;
    let gameActive = false;
    let cardElements = [];
    let shuffleCount = 0;
    const totalShuffles = 3;
    const message = document.getElementById("message");
    let roundsCompleted = 0;
    const totalRounds = 20;
    let inBonusRound = false;
    let isShuffling = false;
    const playButton = document.getElementById("playButton");
    
    // Win tracking system - ensures 4-6 wins in rounds 2-20
    let winRounds = [];
    let currentWinIndex = 0;

    function initializeGame() {
      // Generate exactly 4-6 wins (never fewer)
      const totalWins = Math.floor(Math.random() * 3) + 4; // 4,5, or 6
      winRounds = [];
      
      // Create array of possible rounds (2-20)
      const allRounds = [];
      for (let i = 2; i <= totalRounds; i++) {
        allRounds.push(i);
      }
      
      // Proper Fisher-Yates shuffle
      for (let i = allRounds.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [allRounds[i], allRounds[j]] = [allRounds[j], allRounds[i]];
      }
      
      // Take first 'totalWins' rounds as winning rounds
      winRounds = allRounds.slice(0, totalWins).sort((a,b) => a-b);
      currentWinIndex = 0;
      
      console.log("Guaranteed wins in rounds:", winRounds);
    }

    function getIsWinRound(roundNumber) {
      // Round 1 always loses
      if (roundNumber === 1) return false;
      
      // Check if this is one of our guaranteed wins
      if (currentWinIndex < winRounds.length && 
          roundNumber === winRounds[currentWinIndex]) {
        currentWinIndex++;
        return true;
      }
      return false;
    }

    // Initialize on first load
    initializeGame();

    function updateBalance() {
      document.getElementById("balance").innerText = balance;
      playButton.disabled = (balance < 100 && !inBonusRound) || isShuffling || gameActive;
    }

    function updateStats() {
      document.getElementById("attempts").innerText = attempts;
      document.getElementById("rounds").innerText = roundsCompleted;
      document.getElementById("current-round").innerText = roundsCompleted + 1;
      document.getElementById("wins").innerText = wins;
    }

    function startGame() {
      if (isShuffling || gameActive) return;
      
      // Check for bonus round
      if (roundsCompleted >= totalRounds && !inBonusRound) {
        startBonusRound();
        return;
      }

      if (balance < 100 && !inBonusRound) {
        message.innerText = "Not enough money!";
        return;
      }

      const container = document.getElementById("cards");
      container.innerHTML = "";
      message.innerText = inBonusRound ? "Bonus Round: Find the diamond!" : 
                       `Round ${roundsCompleted+1}: Find the diamond!`;
      message.style.color = "#2c3e50";
      gameActive = false;

      if (!inBonusRound) {
        balance -= 100;
        updateBalance();
      }
      
      // Create cards - 2 for bonus, 3 for normal
      cardElements = [];
      const cardCount = inBonusRound ? 2 : 3;
      const cardWidth = window.innerWidth < 768 ? '22vw' : '90px';
      const positions = [];
      
      if (inBonusRound) {
        positions.push({left: `calc(50% - ${cardWidth})`, top: '0'});
        positions.push({left: `calc(50% + ${cardWidth})`, top: '0'});
      } else {
        positions.push({left: `calc(50% - ${cardWidth} - ${cardWidth}/2)`, top: '0'});
        positions.push({left: `calc(50% - ${cardWidth}/2)`, top: '0'});
        positions.push({left: `calc(50% + ${cardWidth}/2)`, top: '0'});
      }
      
      for (let i = 0; i < cardCount; i++) {
        const card = document.createElement("div");
        card.className = "card";
        card.innerText = "?";
        card.dataset.index = i;
        card.style.left = positions[i].left;
        card.style.top = positions[i].top;
        card.onclick = function() {
          if (gameActive && !card.classList.contains("revealed") && !isShuffling) {
            if (inBonusRound) {
              revealCardInBonusRound(card, i);
            } else {
              revealCard(card, i);
            }
          }
        };
        container.appendChild(card);
        cardElements.push(card);
      }

      // Set diamond position
      if (inBonusRound) {
        diamondIndex = Math.random() < 0.5 ? Math.floor(Math.random() * 2) : -1;
      } else {
        const currentRound = roundsCompleted + 1;
        const isWinRound = getIsWinRound(currentRound);
        diamondIndex = isWinRound ? Math.floor(Math.random() * 3) : -1;
      }
      
      shuffleCount = 0;
      isShuffling = true;
      playButton.disabled = true;
      updateBalance();
      setTimeout(() => shuffleCards(), 500);
    }

    function shuffleCards() {
      if (shuffleCount >= totalShuffles) {
        isShuffling = false;
        gameActive = true;
        updateBalance();
        return;
      }

      shuffleCount++;
      
      // Shuffle card positions with animation
      cardElements.forEach((card, i) => {
        const newPos = Math.floor(Math.random() * cardElements.length);
        const tempLeft = card.style.left;
        const tempTop = card.style.top;
        
        card.style.left = cardElements[newPos].style.left;
        card.style.top = cardElements[newPos].style.top;
        cardElements[newPos].style.left = tempLeft;
        cardElements[newPos].style.top = tempTop;
        
        // Animation effect
        card.style.transform = 'translateY(-20px)';
        setTimeout(() => {
          card.style.transform = 'translateY(0)';
        }, 200);
      });

      setTimeout(() => shuffleCards(), 500);
    }

    function startBonusRound() {
      inBonusRound = true;
      playButton.textContent = "Play Bonus Round (FREE)";
      message.innerHTML = "<span class='bonus-round'>BONUS ROUND! Win $200 for free!</span>";
      updateBalance();
      setTimeout(() => startGame(), 1000);
    }

    function completeBonusRound() {
      inBonusRound = false;
      roundsCompleted = 0;
      attempts = 0;
      initializeGame(); // Regenerate wins for new game
      playButton.textContent = "Shuffle Cards ($100)";
      document.getElementById("wins").textContent = wins;
      message.textContent = "Bonus round complete! Game reset to Round 1.";
      updateStats();
      updateBalance();
    }

    function revealCard(card, index) {
      if (!gameActive || isShuffling) return;
      
      card.classList.add("revealed");
      attempts++;
      
      const currentRound = roundsCompleted + 1;
      
      if (index === diamondIndex) {
        card.innerHTML = '<span class="diamond">💎</span>';
        message.innerText = `You won $300 in round ${currentRound}! 🎉`;
        message.style.color = "#2ecc71";
        wins++;
        balance += 300;
      } else {
        card.innerHTML = '<span class="wrong">✖</span>';
        message.innerText = `Round ${currentRound}: Wrong! Try next.`;
        message.style.color = "#e74c3c";
      }

      gameActive = false;
      cardElements.forEach(c => {
        c.style.cursor = "not-allowed";
        c.style.opacity = "0.7";
      });
      
      roundsCompleted++;
      updateStats();
      updateBalance();
      
      if (roundsCompleted >= totalRounds && !inBonusRound) {
        setTimeout(() => startBonusRound(), 2000);
      } else {
        setTimeout(() => {
          playButton.disabled = (balance < 100 && !inBonusRound);
        }, 2000);
      }
    }

    function revealCardInBonusRound(card, index) {
      if (!gameActive || isShuffling) return;
      
      card.classList.add("revealed");
      attempts++;
      
      if (index === diamondIndex) {
        card.innerHTML = '<span class="diamond">💎</span>';
        message.innerHTML = "<span class='bonus-round'>You won $200 in Bonus Round! 🎉</span>";
        message.style.color = "#2ecc71";
        wins++;
        balance += 200;
      } else {
        card.innerHTML = '<span class="wrong">✖</span>';
        message.innerHTML = "<span class='bonus-round'>No win this time.</span>";
        message.style.color = "#e74c3c";
      }

      gameActive = false;
      cardElements.forEach(c => {
        c.style.cursor = "not-allowed";
        c.style.opacity = "0.7";
      });
      
      setTimeout(() => {
        completeBonusRound();
      }, 2000);
    }

    function showHelp() {
      document.getElementById("helpContainer").style.display = "block";
    }

    function hideHelp() {
      document.getElementById("helpContainer").style.display = "none";
    }

    // Initialize the game
    updateBalance();
    updateStats();
  </script>
</body>
</html>

betdiamonds