
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Stake Mines Game</title>
    <style>
        :root {
            --primary-color: #6c5ce7;
            --secondary-color: #a29bfe;
            --dark-color: #2d3436;
            --darker-color: #1e272e;
            --light-color: #f5f6fa;
            --success-color: #00b894;
            --danger-color: #d63031;
            --warning-color: #fdcb6e;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial', sans-serif;
        }

        body {
            background-color: var(--darker-color);
            color: var(--light-color);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
        }

        .container {
            max-width: 800px;
            width: 100%;
            margin: 0 auto;
        }

        header {
            text-align: center;
            margin-bottom: 30px;
        }

        h1 {
            color: var(--primary-color);
            margin-bottom: 10px;
            text-shadow: 0 0 10px rgba(108, 92, 231, 0.5);
        }

        .balance-container {
            background-color: var(--dark-color);
            padding: 15px;
            border-radius: 10px;
            margin-bottom: 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .balance {
            font-size: 24px;
            font-weight: bold;
            color: var(--warning-color);
        }

        .game-controls {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 20px;
            justify-content: center;
        }

        .control-group {
            display: flex;
            flex-direction: column;
            background-color: var(--dark-color);
            padding: 15px;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        label {
            margin-bottom: 5px;
            font-size: 14px;
            color: var(--secondary-color);
        }

        select, input {
            padding: 8px 12px;
            border: none;
            border-radius: 5px;
            background-color: var(--darker-color);
            color: var(--light-color);
        }

        button {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s ease;
        }

        .btn-primary {
            background-color: var(--primary-color);
            color: var(--light-color);
        }

        .btn-primary:hover {
            background-color: #5649c0;
            box-shadow: 0 0 15px rgba(108, 92, 231, 0.5);
        }

        .btn-success {
            background-color: var(--success-color);
            color: var(--light-color);
        }

        .btn-success:hover {
            background-color: #00a884;
            box-shadow: 0 0 15px rgba(0, 184, 148, 0.5);
        }

        .btn-danger {
            background-color: var(--danger-color);
            color: var(--light-color);
        }

        .btn-danger:hover {
            background-color: #c0392b;
            box-shadow: 0 0 15px rgba(214, 48, 49, 0.5);
        }

        .game-info {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
            background-color: var(--dark-color);
            padding: 15px;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .info-item {
            text-align: center;
        }

        .info-label {
            font-size: 14px;
            color: var(--secondary-color);
            margin-bottom: 5px;
        }

        .info-value {
            font-size: 18px;
            font-weight: bold;
        }

        .game-board {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 10px;
            margin-bottom: 20px;
        }

        @media (min-width: 768px) {
            .game-board {
                grid-template-columns: repeat(8, 1fr);
            }
        }

        .tile {
            aspect-ratio: 1/1;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--dark-color);
            border-radius: 5px;
            cursor: pointer;
            font-size: 24px;
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .tile:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
        }

        .tile.revealed {
            background-color: var(--darker-color);
            cursor: default;
        }

        .tile.gem {
            background-color: rgba(0, 184, 148, 0.2);
            color: var(--success-color);
            box-shadow: 0 0 15px rgba(0, 184, 148, 0.5);
        }

        .tile.bomb {
            background-color: rgba(214, 48, 49, 0.2);
            color: var(--danger-color);
            box-shadow: 0 0 15px rgba(214, 48, 49, 0.5);
        }

        .game-message {
            text-align: center;
            padding: 15px;
            border-radius: 10px;
            margin-bottom: 20px;
            font-weight: bold;
            display: none;
        }

        .success-message {
            background-color: rgba(0, 184, 148, 0.2);
            color: var(--success-color);
            display: block;
        }

        .danger-message {
            background-color: rgba(214, 48, 49, 0.2);
            color: var(--danger-color);
            display: block;
        }

        .hidden {
            display: none !important;
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>Stake Mines</h1>
        </header>

        <div class="balance-container">
            <div class="info-label">Your Balance</div>
            <div class="balance">₹<span id="balance">1000</span></div>
        </div>

        <div class="game-controls">
            <div class="control-group">
                <label for="bet-amount">Bet Amount</label>
                <input type="number" id="bet-amount" min="10" value="10">
            </div>
            <div class="control-group">
                <label for="mine-count">Number of Mines</label>
                <select id="mine-count">
                    <option value="1">1 Mine</option>
                    <option value="2">2 Mines</option>
                    <option value="3">3 Mines</option>
                    <option value="4">4 Mines</option>
                    <option value="5">5 Mines</option>
                    <option value="6">6 Mines</option>
                    <option value="7">7 Mines</option>
                    <option value="8">8 Mines</option>
                    <option value="9">9 Mines</option>
                    <option value="10">10 Mines</option>
                </select>
            </div>
            <button id="start-game" class="btn-primary hidden">Start Game</button>
        </div>

        <div id="game-message" class="game-message"></div>

        <div id="game-info" class="game-info">
            <div class="info-item">
                <div class="info-label">Mines Left</div>
                <div class="info-value" id="mines-left">0</div>
            </div>
            <div class="info-item">
                <div class="info-label">Current Multiplier</div>
                <div class="info-value" id="current-multiplier">1.00x</div>
            </div>
            <div class="info-item">
                <div class="info-label">Potential Win</div>
                <div class="info-value" id="potential-win">₹0</div>
            </div>
        </div>

        <div id="game-board" class="game-board"></div>

        <div id="game-actions" class="game-controls">
            <button id="cash-out" class="btn-success">Cash Out</button>
            <button id="new-game" class="btn-danger">New Game</button>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            // Game elements
            const balanceElement = document.getElementById('balance');
            const betAmountInput = document.getElementById('bet-amount');
            const mineCountSelect = document.getElementById('mine-count');
            const startGameButton = document.getElementById('start-game');
            const gameMessageElement = document.getElementById('game-message');
            const gameInfoElement = document.getElementById('game-info');
            const minesLeftElement = document.getElementById('mines-left');
            const currentMultiplierElement = document.getElementById('current-multiplier');
            const potentialWinElement = document.getElementById('potential-win');
            const gameBoardElement = document.getElementById('game-board');
            const cashOutButton = document.getElementById('cash-out');
            const newGameButton = document.getElementById('new-game');
            const gameActionsElement = document.getElementById('game-actions');

            // Game state
            let balance = 1000;
            let betAmount = 10;
            let mineCount = 1;
            let gameActive = false;
            let revealedTiles = 0;
            let minesLeft = 0;
            let currentMultiplier = 1;
            let multiplierIncrement = 0.25;
            let tiles = [];
            let minePositions = [];

            // Initialize game immediately when page loads
            initGame();

            // Initialize game
            function initGame() {
                betAmount = parseInt(betAmountInput.value);
                mineCount = parseInt(mineCountSelect.value);
                
                if (betAmount > balance) {
                    showMessage(`You don't have enough balance for this bet!`, 'danger');
                    return;
                }
                
                if (betAmount < 10) {
                    showMessage('Minimum bet amount is ₹10!', 'danger');
                    return;
                }
                
                balance -= betAmount;
                updateBalance();
                
                gameActive = true;
                revealedTiles = 0;
                minesLeft = mineCount;
                currentMultiplier = 1;
                
                // Update UI
                minesLeftElement.textContent = minesLeft;
                currentMultiplierElement.textContent = currentMultiplier.toFixed(2) + 'x';
                potentialWinElement.textContent = '₹' + (betAmount * currentMultiplier).toFixed(2);
                
                // Create game board
                createBoard();
            }
            
            // Create game board
            function createBoard() {
                gameBoardElement.innerHTML = '';
                tiles = [];
                minePositions = [];
                
                // Determine grid size based on screen width
                const isMobile = window.innerWidth < 768;
                const gridSize = isMobile ? 5 : 8;
                const totalTiles = gridSize * gridSize;
                
                // Set grid columns
                gameBoardElement.style.gridTemplateColumns = `repeat(${gridSize}, 1fr)`;
                
                // Place mines randomly
                while (minePositions.length < mineCount) {
                    const randomPos = Math.floor(Math.random() * totalTiles);
                    if (!minePositions.includes(randomPos)) {
                        minePositions.push(randomPos);
                    }
                }
                
                // Create tiles
                for (let i = 0; i < totalTiles; i++) {
                    const tile = document.createElement('div');
                    tile.className = 'tile';
                    tile.dataset.index = i;
                    tile.dataset.revealed = 'false';
                    
                    tile.addEventListener('click', () => handleTileClick(i));
                    
                    gameBoardElement.appendChild(tile);
                    tiles.push(tile);
                }
            }
            
            // Handle tile click
            function handleTileClick(index) {
                if (!gameActive || tiles[index].dataset.revealed === 'true') return;
                
                tiles[index].dataset.revealed = 'true';
                tiles[index].classList.add('revealed');
                
                if (minePositions.includes(index)) {
                    // Clicked on a mine
                    tiles[index].classList.add('bomb');
                    tiles[index].textContent = '💣';
                    gameOver(false);
                    revealAllMines();
                } else {
                    // Clicked on a gem
                    tiles[index].classList.add('gem');
                    tiles[index].textContent = '💎';
                    revealedTiles++;
                    
                    // Update multiplier and potential win
                    currentMultiplier += multiplierIncrement;
                    currentMultiplierElement.textContent = currentMultiplier.toFixed(2) + 'x';
                    potentialWinElement.textContent = '₹' + (betAmount * currentMultiplier).toFixed(2);
                    
                    // Play gem sound
                    playSound('gem');
                }
            }
            
            // Cash out
            function cashOut() {
                if (!gameActive || revealedTiles === 0) return;
                
                const winnings = betAmount * currentMultiplier;
                balance += winnings;
                updateBalance();
                
                showMessage(`You cashed out and won ₹${winnings.toFixed(2)}!`, 'success');
                gameOver(true);
            }
            
            // Game over
            function gameOver(won) {
                gameActive = false;
                
                if (!won) {
                    showMessage('Game over! You hit a mine.', 'danger');
                    // Play explosion sound
                    playSound('explosion');
                }
                
                // Disable all tiles
                tiles.forEach(tile => {
                    tile.style.cursor = 'default';
                });
            }
            
            // Reveal all mines
            function revealAllMines() {
                minePositions.forEach(pos => {
                    if (tiles[pos].dataset.revealed === 'false') {
                        tiles[pos].classList.add('bomb');
                        tiles[pos].textContent = '💣';
                    }
                });
            }
            
            // Show message
            function showMessage(message, type) {
                gameMessageElement.textContent = message;
                gameMessageElement.className = 'game-message';
                gameMessageElement.classList.add(`${type}-message`);
            }
            
            // Update balance
            function updateBalance() {
                balanceElement.textContent = balance.toFixed(2);
            }
            
            // Play sound
            function playSound(type) {
                // In a real implementation, you would play actual sound files here
                console.log(`Playing ${type} sound`);
            }
            
            // Reset game
            function resetGame() {
                gameActive = false;
                gameMessageElement.classList.add('hidden');
                initGame();
            }
            
            // Event listeners
            cashOutButton.addEventListener('click', cashOut);
            newGameButton.addEventListener('click', resetGame);
            
            // Update game when settings change
            mineCountSelect.addEventListener('change', resetGame);
            betAmountInput.addEventListener('change', resetGame);
            
            // Initialize balance display
            updateBalance();
        });
    </script>
</body>
</html>