<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Math Snake Neon</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <!-- Nickname Prompt (Modal) -->
  <div id="nicknameModal" class="modal hidden">
    <div class="modal-content">
      <h2>Enter Your Nickname</h2>
      <input type="text" id="nicknameInput" placeholder="Your name..." />
      <button id="nicknameConfirm" class="neon-button">OK</button>
    </div>
  </div>

  <!-- Main Menu -->
  <div class="menu">
      <h1 class="neon-title">MATH SNAKE NEON</h1>
      <p class="neonspan"><a href="https://www.techgrapple.com/online-tools/">Created by TechGrapple.Com</a></p>
      <div class="mode-select">
          <button data-mode="addition">Addition</button>
          <button data-mode="subtraction">Subtraction</button>
          <button data-mode="multiplication">Multiplication</button>
          <button data-mode="division">Division</button>
          <button data-mode="mixed">Mixed</button>
      </div>
  </div>

  <!-- Game Canvas -->
  <canvas id="gameCanvas"></canvas>
  
  <!-- Game Information -->
  <div class="game-info">
      <div class="lives">
          <span class="life"></span>
          <span class="life"></span>
          <span class="life"></span>
      </div>
      <div class="score neon-text">SCORE: 0</div>
  </div>

  <!-- Life Lost Screen -->
  <div id="lifeLostScreen" class="hidden">
      <h2 class="neon-title">You Died!</h2>
      <p class="instruction">Tap or Click to Continue</p>
  </div>

  <!-- Game Over Screen -->
  <div id="gameOverScreen" class="hidden">
    <h2 class="neon-title">GAME OVER</h2>
    <p class="final-score">Final Score: <span>0</span></p>
    <p id="highScoreMessage" class="high-score-msg"></p>
    <div id="scoreBoard" class="score-board"></div>

    <div class="game-over-buttons">
        <button id="restartButton">Restart</button>
        <button id="menuButton">Main Menu</button>
    </div>
  </div>

  <!-- JavaScript File -->
  <script src="game.js"></script>
</body>
</html>
