<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Gold Under the Mines</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      background-color: #f4f4f4;
      margin: 0;
      padding: 0;
    }

    h1 {
      margin: 20px 0;
    }

    #game-board {
      display: grid;
      grid-template-columns: repeat(5, 60px);
      gap: 10px;
      justify-content: center;
      margin: 20px auto;
    }

    .tile {
      width: 60px;
      height: 60px;
      background-color: #8B4513;
      border: 2px solid #654321;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 20px;
      font-weight: bold;
      color: white;
    }

    .tile.revealed {
      background-color: #D3D3D3;
      cursor: default;
    }

    #message {
      margin: 20px;
      font-size: 18px;
    }

    button {
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1>Gold Under the Mines</h1>
  <div id="message">Find the gold hidden under the tiles!</div>
  <div id="game-board"></div>
  <button onclick="startGame()">Restart Game</button>

  <audio id="gold-sound" src="https://www.soundjay.com/button/beep-07.wav"></audio>
  <audio id="miss-sound" src="https://www.soundjay.com/button/beep-10.wav"></audio>

  <script>
    const rows = 5;
    const cols = 5;
    let goldPosition = [];

    function startGame() {
      const board = document.getElementById('game-board');
      board.innerHTML = '';
      document.getElementById('message').textContent = 'Find the gold hidden under the tiles!';
      goldPosition = [
        Math.floor(Math.random() * rows),
        Math.floor(Math.random() * cols)
      ];
      for (let row = 0; row < rows; row++) {
        for (let col = 0; col < cols; col++) {
          const tile = document.createElement('div');
          tile.classList.add('tile');
          tile.dataset.row = row;
          tile.dataset.col = col;
          tile.addEventListener('click', () => revealTile(tile));
          board.appendChild(tile);
        }
      }
    }

    function revealTile(tile) {
      if (tile.classList.contains('revealed')) return;
      const row = parseInt(tile.dataset.row);
      const col = parseInt(tile.dataset.col);

      if (row === goldPosition[0] && col === goldPosition[1]) {
        tile.textContent = '💰';
        document.getElementById('message').textContent = 'You found the gold! 🎉';
        document.getElementById('gold-sound').play();
        endGame();
      } else {
        tile.textContent = '❌';
        tile.classList.add('revealed');
        document.getElementById('miss-sound').play();
      }
    }

    function endGame() {
      const tiles = document.querySelectorAll('.tile');
      tiles.forEach(tile => tile.classList.add('revealed'));
    }

    // Initialize the game
    startGame();
  </script>
</body>
</html>
