<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-9L198NC26X"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-9L198NC26X');
</script>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>QuickMath Pro - Speed Mathematics Training Game | Brain Training & Mental Math</title>

<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png">
<link rel="shortcut icon" href="favicon.png" type="image/png">
<link rel="apple-touch-icon" href="favicon.png">

  <meta name="description" content="Master mental math with QuickMath Pro! Train your arithmetic skills with timed challenges, multiple difficulty levels, and performance tracking. Perfect for students, professionals, and brain training enthusiasts." />
  <meta name="keywords" content="quick math, speed math, mental arithmetic, brain training, math games, mathematics practice, arithmetic skills, math drill, number games, educational games" />
  <meta name="author" content="QuickMath Pro" />
  <meta name="robots" content="index, follow" />
  <!-- Open Graph Tags -->
  <meta property="og:title" content="QuickMath Pro - Speed Mathematics Training Game" />
  <meta property="og:description" content="Train your mental math skills with our professional speed mathematics game. Multiple difficulty levels and performance tracking." />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="" />
  <meta property="og:site_name" content="QuickMath Pro" />
  <!-- Twitter Card Tags -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="QuickMath Pro - Speed Mathematics Training Game" />
  <meta name="twitter:description" content="Master mental math with timed challenges and performance tracking." />
  <!-- Favicon 
  <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🔢</text></svg>"> -->
  <!-- External Libraries -->
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css" />
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet" />
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <!-- JSON-LD Structured Data -->
  <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "Game",
      "name": "QuickMath Pro - Speed Mathematics Training Game",
      "description": "Professional speed mathematics training game with multiple difficulty levels and performance tracking",
      "genre": "Educational Game",
      "audience": "Students, Professionals, Brain Training Enthusiasts",
      "educationalUse": "Mathematics Practice",
      "learningResourceType": "Game",
      "interactivityType": "active"
    }
  </script>
  <style>
    :root {
      --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
      --success-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
      --warning-gradient: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
      --error-gradient: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
      --light-blue-gradient: linear-gradient(135deg, #56ccf2 0%, #2f80ed 100%);
      --glass-bg: rgba(255, 255, 255, 0.15);
      --glass-border: rgba(255, 255, 255, 0.2);
      --shadow-soft: 0 20px 40px rgba(0, 0, 0, 0.1);
      --shadow-medium: 0 10px 30px rgba(0, 0, 0, 0.15);
    }
    * {
      font-family: 'Inter', sans-serif;
    }
    body {
      background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
      min-height: 100vh;
    }
    .glass-card {
      background: rgba(255, 255, 255, 0.25);
      backdrop-filter: blur(10px);
      border: 1px solid var(--glass-border);
      box-shadow: var(--shadow-soft);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    /* Remove hover on the entire #gameSetup card */
    /* .glass-card:hover {
      background: rgba(255, 255, 255, 0.35);
      transform: translateY(-1px);
      box-shadow: var(--shadow-medium);
    } */
    /* Add hover effect to individual difficulty cards */
    .difficulty-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
      cursor: pointer;
      transition: all 0.3s ease;
    }
    .gradient-text {
      background: var(--primary-gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .btn-primary {
      background: var(--primary-gradient);
      color: white;
      border: none;
      padding: 12px 24px;
      border-radius: 12px;
      font-weight: 600;
      font-size: 14px;
      transition: all 0.3s ease;
      box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
      cursor: pointer;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
    .btn-primary:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
    }
    .btn-light-blue {
      background: var(--light-blue-gradient);
      color: white;
      border: none;
      padding: 12px 24px;
      border-radius: 12px;
      font-weight: 600;
      font-size: 14px;
      transition: all 0.3s ease;
      box-shadow: 0 4px 15px rgba(86, 204, 242, 0.4);
      cursor: pointer;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }
    .btn-light-blue:hover {
      transform: translateY(-1px);
      box-shadow: 0 6px 20px rgba(86, 204, 242, 0.5);
    }
    .game-button {
      padding: 20px;
      border: 2px solid transparent;
      border-radius: 16px;
      background: rgba(255, 255, 255, 0.9);
      cursor: pointer;
      transition: all 0.2s ease;
      font-weight: 600;
      font-size: 20px;
      font-family: 'JetBrains Mono', monospace;
      box-shadow: var(--shadow-soft);
      position: relative;
      overflow: hidden;
    }
    .game-button:hover {
      transform: translateY(-1px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
      background: rgba(255, 255, 255, 0.95);
    }
    .game-button.correct {
      background: var(--success-gradient);
      color: white;
      border-color: #10b981;
    }
    .game-button.wrong {
      background: var(--error-gradient);
      color: white;
      border-color: #ef4444;
    }
    .game-button.disabled {
      cursor: not-allowed;
      opacity: 0.6;
    }
    .progress-bar {
      width: 100%;
      height: 12px;
      background: rgba(102, 126, 234, 0.1);
      border-radius: 6px;
      overflow: hidden;
      position: relative;
    }
    .progress-fill {
      height: 100%;
      background: var(--primary-gradient);
      transition: width 0.3s ease;
      border-radius: 6px;
    }
    .stat-card {
      background: rgba(255, 255, 255, 0.9);
      border-radius: 16px;
      padding: 24px;
      text-align: center;
      backdrop-filter: blur(10px);
      border: 1px solid var(--glass-border);
      box-shadow: var(--shadow-soft);
      transition: all 0.3s ease;
    }
    .stat-number {
      font-size: 2.5rem;
      font-weight: 800;
      font-family: 'JetBrains Mono', monospace;
      color: #2d3748;
      margin-bottom: 8px;
    }
    .difficulty-selector {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap: 16px;
      margin: 20px 0;
    }
    .difficulty-card {
      background: rgba(255, 255, 255, 0.9);
      border: 2px solid transparent;
      border-radius: 12px;
      padding: 20px;
      cursor: pointer;
      transition: all 0.3s ease;
      text-align: center;
      min-height: 120px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .difficulty-card.active {
      border-color: #667eea;
      background: var(--primary-gradient);
      color: white;
    }
    .achievement-badge {
      background: var(--warning-gradient);
      color: white;
      padding: 8px 16px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin: 4px;
    }
    .floating-number {
      position: absolute;
      font-size: 24px;
      font-weight: bold;
      pointer-events: none;
      animation: floatUp 1s ease-out forwards;
      z-index: 1000;
    }
    @keyframes floatUp {
      0% {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
      100% {
        opacity: 0;
        transform: translateY(-50px) scale(1.2);
      }
    }
    .combo-indicator {
      background: var(--warning-gradient);
      color: white;
      padding: 8px 16px;
      border-radius: 20px;
      font-weight: 700;
      font-size: 14px;
    }
    .game-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
      margin: 24px 0;
    }
    .timer-circle {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      background: conic-gradient(var(--primary-gradient) 0deg, rgba(102, 126, 234, 0.2) 0deg);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28px;
      font-weight: 700;
      font-family: 'JetBrains Mono', monospace;
      color: #2d3748;
      transition: all 0.3s ease;
    }
    .modal {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.8);
      backdrop-filter: blur(10px);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
    }
    .modal.active {
      opacity: 1;
      visibility: visible;
    }
    .modal-content {
      background: white;
      border-radius: 20px;
      padding: 32px;
      max-width: 600px;
      width: 90%;
      max-height: 80vh;
      overflow-y: auto;
      transform: scale(0.8);
      transition: transform 0.3s ease;
    }
    .modal.active .modal-content {
      transform: scale(1);
    }
    .hero-section {
      background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
      border-radius: 20px;
      backdrop-filter: blur(10px);
      border: 1px solid var(--glass-border);
      padding: 12px 24px 12px 24px !important;
      text-align: center;
      margin-bottom: 0 !important;
    }
    .logo {
      font-size: 3.5rem;
      font-weight: 800;
      background: var(--primary-gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin-bottom: 0;
      font-family: 'JetBrains Mono', monospace;
    }
    .hero-section h1 {
      margin-bottom: 0;
    }
    /* --- AD and Mascot styles --- */
    .ad-container {
      position: fixed;
      width: 160px;
      height: 600px;
      background: #f0f0f0;
      display: flex;
      flex-direction: column;
      align-items: center;
      border-radius: 8px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      border: 1.2px solid #ddd;
      z-index: 10;
      padding: 1px 0;
      box-sizing: border-box;
    }
    .ad-left {
      left: 20px;
      top: 80px;
    }
    .ad-right {
      right: 20px;
      top: 80px;
    }
    .ad-game-list {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .ad-game-link {
      display: block;
      width: 100px;
      height: 100px;
      margin-bottom: 24px;
      border-radius: 12px;
      overflow: hidden;
      border: 0.5px solid #cccccc;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
      background: #fff;
      text-align: center;
      transition: box-shadow 0.18s;
    }
    .ad-game-link:last-child {
      margin-bottom: 0;
    }
    .ad-game-link img {
      width: 100px;
      height: 100px;
      object-fit: cover;
      display: block;
    }
    .angel-mascot-move {
      position: fixed !important;
      top: 18px;
      left: 15px;
      z-index: 20;
      display: block;
    }
    .angel-mascot-container {
      min-width: 44px;
      min-height: 44px;
    }
    .chart-container {
      position: relative;
      height: 300px;
      width: 100%;
    }
    @media (max-width: 1000px) {
      .ad-container {
        display: none;
      }
      .angel-mascot-move {
        display: none;
      }
    }
    @media (max-width: 768px) {
      .stat-number {
        font-size: 1.8rem;
      }
      .game-button {
        padding: 16px;
        font-size: 18px;
      }
      .timer-circle {
        width: 100px;
        height: 100px;
        font-size: 24px;
      }
      .hero-section {
        padding: 16px 10px;
      }
      .logo {
        font-size: 2.5rem;
      }
      .difficulty-selector {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
      }
      .difficulty-card {
        padding: 16px;
        min-height: 100px;
      }
    }
    @media (max-width: 640px) {
      .game-grid {
        grid-template-columns: 1fr;
        gap: 12px;
      }
      .difficulty-selector {
        grid-template-columns: 1fr;
        gap: 12px;
      }
      .hero-section {
        padding: 10px 5px;
      }
      .logo {
        font-size: 2rem;
      }
    }
  </style>
</head>
<body>
  <!-- Angel Mascot (fixed, top-left, clickable) -->
  <a href="..\index.html" class="angel-mascot-move" aria-label="Home">
    <div class="angel-mascot-container">
      <div class="angel-face" id="angelFace" style="display:inline-block;width:40px;height:40px;position:relative;vertical-align:middle;margin:0 4px;border-radius:50%;background:linear-gradient(145deg,#ffecd1,#ffb88c);box-shadow:0 4px 12px rgba(0,0,0,0.15),inset 0 2px 4px rgba(255,255,255,0.3);transition:all 0.3s ease;overflow:visible;">
        <!-- Hair -->
        <div style="content:'';position:absolute;top:-8px;left:-2px;right:-2px;height:25px;background:linear-gradient(145deg,#d4af37,#ffd700);border-radius:50% 50% 45% 45%;z-index:2;box-shadow:0 2px 6px rgba(0,0,0,0.1);"></div>
        <!-- Halo -->
        <div style="content:'';position:absolute;top:-15px;left:50%;transform:translateX(-50%);width:35px;height:6px;border:2px solid #ffd700;border-radius:50%;background:transparent;box-shadow:0 0 8px rgba(255,215,0,0.4);z-index:3;"></div>
        <!-- Left Eye -->
        <div class="left-eye" style="position:absolute;width:8px;height:8px;background:#fff;border-radius:50%;top:45%;left:28%;border:1px solid #e0e0e0;box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);z-index:1;">
          <div class="left-pupil" id="leftPupil" style="position:absolute;width:4px;height:4px;background:#2563eb;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);transition:all 0.1s ease;z-index:1;">
            <div style="content:'';position:absolute;width:1.5px;height:1.5px;background:white;border-radius:50%;top:20%;left:30%;"></div>
          </div>
        </div>
        <!-- Right Eye -->
        <div class="right-eye" style="position:absolute;width:8px;height:8px;background:#fff;border-radius:50%;top:45%;left:64%;border:1px solid #e0e0e0;box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);z-index:1;">
          <div class="right-pupil" id="rightPupil" style="position:absolute;width:4px;height:4px;background:#2563eb;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);transition:all 0.1s ease;z-index:1;">
            <div style="content:'';position:absolute;width:1.5px;height:1.5px;background:white;border-radius:50%;top:20%;left:30%;"></div>
          </div>
        </div>
        <!-- Nose -->
        <div class="nose" style="position:absolute;top:55%;left:50%;transform:translateX(-50%);width:2px;height:3px;background:#ffb88c;border-radius:0 0 50% 50%;z-index:1;"></div>
        <!-- Smile -->
        <div class="smile" style="position:absolute;top:65%;left:50%;transform:translateX(-50%);width:12px;height:6px;border:1.5px solid #ff6b8a;border-top:none;border-radius:0 0 12px 12px;background:transparent;z-index:1;"></div>
        <!-- Cheeks -->
        <div class="left-cheek" style="position:absolute;width:6px;height:4px;background:rgba(255,182,193,0.6);border-radius:50%;top:58%;left:15%;z-index:1;"></div>
        <div class="right-cheek" style="position:absolute;width:6px;height:4px;background:rgba(255,182,193,0.6);border-radius:50%;top:58%;right:15%;z-index:1;"></div>
      </div>
      <script>
        document.addEventListener('DOMContentLoaded', function () {
          const angelFace = document.getElementById('angelFace');
          const leftPupil = document.getElementById('leftPupil');
          const rightPupil = document.getElementById('rightPupil');
          if (angelFace && leftPupil && rightPupil) {
            document.addEventListener('mousemove', function (e) {
              const rect = angelFace.getBoundingClientRect();
              const faceCenterX = rect.left + rect.width / 2;
              const faceCenterY = rect.top + rect.height / 2;
              const angle = Math.atan2(e.clientY - faceCenterY, e.clientX - faceCenterX);
              const maxMovement = 1.5;
              const pupilX = Math.cos(angle) * maxMovement;
              const pupilY = Math.sin(angle) * maxMovement;
              leftPupil.style.transform = `translate(calc(-50% + ${pupilX}px), calc(-50% + ${pupilY}px)`;
              rightPupil.style.transform = `translate(calc(-50% + ${pupilX}px), calc(-50% + ${pupilY}px)`;
            });
            document.addEventListener('mouseleave', function () {
              leftPupil.style.transform = 'translate(-50%, -50%)';
              rightPupil.style.transform = 'translate(-50%, -50%)';
            });
          }
        });
      </script>
    </div>
  </a>

  <!-- Ad containers with linked images -->
  <div class="ad-container ad-left">
    <div class="ad-game-list">
      <a class="ad-game-link" href="..\balloonblast/balloonblast.html" title="Balloon Blast">
        <img src="..\balloonblast/balloonblast.png" alt="Balloon Blast" />
      </a>
      <a class="ad-game-link" href="..\memorychallenge/memchal.html" title="Memory Challenge">
        <img src="..\memorychallenge/memorychallenge.png" alt="Memory Challenge" />
      </a>
      <a class="ad-game-link" href="..\mergetiles/mergetiles.html" title="Merge Tiles">
        <img src="..\mergetiles/mergetiles.png" alt="Merge Tiles" />
      </a>
      <a class="ad-game-link" href="..\multihorn/multihorn.html" title="Multihorn">
        <img src="..\multihorn/multihorn.png" alt="Multihorn" />
      </a>
      <a class="ad-game-link" href="..\zenbreath/zenbreath.html" title="ZenBreath">
        <img src="..\zenbreath/zenbreath.png" alt="ZenBreath" />
      </a>
    </div>
  </div>
  <div class="ad-container ad-right">
    <div class="ad-game-list">
      <a class="ad-game-link" href="..\numberflow/numberflowpro.html" title="NumberFlow Pro">
        <img src="..\numberflow/numberflowpro.png" alt="NumberFlow Pro" />
      </a>
      <a class="ad-game-link" href="..\quickmath/quickmath.html" title="QuickMath">
        <img src="..\quickmath/quickmath.png" alt="QuickMath" />
      </a>
      <a class="ad-game-link" href="..\aquarium/aquarium.html" title="Aquarium">
        <img src="..\aquarium/aquarium.png" alt="Aquarium" />
      </a>
      <a class="ad-game-link" href="..\nexusgrid/nexusgrid.html" title="NexusGrid">
        <img src="..\nexusgrid/nexusgrid.png" alt="NexusGrid" />
      </a>
      <a class="ad-game-link" href="..\interactivelights/interactivelights.html" title="Interactive Lights">
        <img src="..\interactivelights/interactivelights.png" alt="Interactive Lights" />
      </a>
    </div>
  </div>

  <!-- Header -->
  <header class="px-6 py-4">
    <nav class="max-w-6xl mx-auto flex items-center justify-between">
      <div class="flex items-center space-x-4">
        <!-- Left header content removed -->
      </div>
    </nav>
  </header>

  <!-- Main Content -->
  <main class="px-6 py-8">
    <div class="max-w-4xl mx-auto">
      <!-- Hero Section -->
      <section class="hero-section">
        <div class="logo">🔢 QuickMath Pro</div>
        <h1 class="text-2xl font-semibold text-gray-700 mb-0">Speed Mathematics Training</h1>
      </section>

      <!-- Game Setup -->
      <section id="gameSetup" class="glass-card rounded-2xl p-8 mb-8">
        <h2 class="text-2xl font-bold gradient-text mb-6 text-center">
          <i class="fas fa-cogs mr-2"></i> Game Setup
        </h2>

        <div class="difficulty-selector">
          <div class="difficulty-card" data-difficulty="easy" onclick="selectDifficulty('easy')">
            <div class="text-3xl mb-2">🌱</div>
            <h3 class="font-semibold mb-2">Beginner</h3>
            <p class="text-sm text-gray-600">1-20 numbers<br />Easy operations</p>
          </div>
          <div class="difficulty-card" data-difficulty="medium" onclick="selectDifficulty('medium')">
            <div class="text-3xl mb-2">🔥</div>
            <h3 class="font-semibold mb-2">Intermediate</h3>
            <p class="text-sm text-gray-600">1-50 numbers<br />Mixed operations</p>
          </div>
          <div class="difficulty-card active" data-difficulty="hard" onclick="selectDifficulty('hard')">
            <div class="text-3xl mb-2">⚡</div>
            <h3 class="font-semibold mb-2">Advanced</h3>
            <p class="text-sm text-gray-600">1-100 numbers<br />All operations</p>
          </div>
          <div class="difficulty-card" data-difficulty="expert" onclick="selectDifficulty('expert')">
            <div class="text-3xl mb-2">🚀</div>
            <h3 class="font-semibold mb-2">Expert</h3>
            <p class="text-sm text-gray-600">1-200 numbers<br />Complex problems</p>
          </div>
        </div>

        <div class="text-center mt-8">
          <button class="btn-primary text-lg px-8 py-4" onclick="startGame()">
            <i class="fas fa-rocket"></i> Launch Game
          </button>
          <button class="btn-light-blue text-lg px-8 py-4 ml-4" onclick="showInstructions()">
            <i class="fas fa-info-circle"></i> How to Play
          </button>
        </div>
      </section>

      <!-- Remaining game sections (unchanged) -->

      <section id="gameArea" class="glass-card rounded-2xl p-8 hidden">
        <!-- Game Stats -->
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
          <div class="stat-card">
            <div class="stat-number" id="currentScore">0</div>
            <div class="stat-label">Score</div>
          </div>
          <div class="stat-card">
            <div class="stat-number" id="currentStreak">0</div>
            <div class="stat-label">Streak</div>
          </div>
          <div class="stat-card">
            <div class="stat-number" id="questionsAnswered">0</div>
            <div class="stat-label">Questions</div>
          </div>
          <div class="stat-card relative">
            <div class="timer-circle" id="timerCircle">
              <span id="timeLeft">60</span>
            </div>
          </div>
        </div>

        <!-- Progress Bar -->
        <div class="progress-bar mb-8">
          <div class="progress-fill" id="progressFill" style="width: 100%"></div>
        </div>

        <!-- Current Question -->
        <div class="text-center mb-8">
          <div class="text-5xl font-bold font-mono mb-6" id="mathQuestion">Ready?</div>
          <div id="comboIndicator" class="combo-indicator hidden">
            🔥 Streak x<span id="comboMultiplier">1</span>
          </div>
        </div>

        <!-- Answer Buttons -->
        <div class="game-grid" id="answerGrid"></div>

        <!-- Controls -->
        <div class="flex justify-center space-x-4 mt-8">
          <button class="btn-light-blue" onclick="pauseGame()" id="pauseBtn">
            <i class="fas fa-pause"></i> Pause
          </button>
          <button class="btn-error" onclick="endGame()">
            <i class="fas fa-stop"></i> End Game
          </button>
        </div>
      </section>

      <section id="resultsSection" class="glass-card rounded-2xl p-8 hidden">
        <div class="text-center">
          <div class="text-6xl mb-4">🏆</div>
          <h2 class="text-3xl font-bold gradient-text mb-6">Game Complete!</h2>
          <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
            <div class="stat-card">
              <div class="stat-number" id="finalScore">0</div>
              <div class="stat-label">Final Score</div>
            </div>
            <div class="stat-card">
              <div class="stat-number" id="finalAccuracy">0%</div>
              <div class="stat-label">Accuracy</div>
            </div>
            <div class="stat-card">
              <div class="stat-number" id="finalQuestions">0</div>
              <div class="stat-label">Questions</div>
            </div>
          </div>
          <div class="bg-white rounded-xl p-6 mb-8">
            <h3 class="text-lg font-semibold mb-4">Performance Over Time</h3>
            <div class="chart-container">
              <canvas id="performanceChart"></canvas>
            </div>
          </div>

          <div id="newAchievements" class="mb-8 hidden">
            <h3 class="text-lg font-semibold mb-4">🎉 New Achievements!</h3>
            <div id="achievementsList" class="flex flex-wrap justify-center gap-2"></div>
          </div>

          <div class="flex flex-wrap justify-center gap-4">
            <button class="btn-primary" onclick="playAgain()">
              <i class="fas fa-redo"></i> Play Again
            </button>
            <button class="btn-light-blue" onclick="backToMenu()">
              <i class="fas fa-home"></i> Main Menu
            </button>
          </div>
        </div>
      </section>
    </div>
  </main>

  <!-- Instructions Modal -->
  <div id="instructionsModal" class="modal">
    <div class="modal-content">
      <div class="flex items-center justify-between mb-6">
        <h2 class="text-2xl font-bold gradient-text">
          <i class="fas fa-info-circle mr-2"></i> How to Play
        </h2>
        <button onclick="closeModal('instructionsModal')" class="text-gray-400 hover:text-gray-600 text-2xl">
          <i class="fas fa-times"></i>
        </button>
      </div>
      <div class="space-y-6">
        <div class="flex items-start space-x-4">
          <div class="text-2xl">🎯</div>
          <div>
            <h3 class="font-semibold mb-2">Objective</h3>
            <p class="text-gray-600">Solve as many math problems as possible within 60 seconds to achieve the highest score.</p>
          </div>
        </div>
        <div class="flex items-start space-x-4">
          <div class="text-2xl">⚡</div>
          <div>
            <h3 class="font-semibold mb-2">Scoring</h3>
            <p class="text-gray-600">Earn points for correct answers. Build streaks for bonus multipliers!</p>
          </div>
        </div>
        <div class="flex items-start space-x-4">
          <div class="text-2xl">🔥</div>
          <div>
            <h3 class="font-semibold mb-2">Streaks</h3>
            <p class="text-gray-600">Answer consecutively correct to build streaks and earn bonus points.</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    /*=============== GAME LOGIC: All your previously provided scripts remain unchanged ===============*/
let gameState = {isPlaying: false,isPaused: false,difficulty: 'hard',score: 0,streak: 0,maxStreak: 0,questionsAnswered: 0,correctAnswers: 0,timeLeft: 60,currentQuestion: null,gameTimer: null,startTime: null,performanceData: [],comboMultiplier: 1};
let stats = JSON.parse(localStorage.getItem('quickMathStats')) || { totalGames: 0, totalScore: 0, bestScore: 0, totalQuestions: 0, totalCorrect: 0, scoreHistory: [], achievements: [] };
const achievements = [
    { id:'first_game', name:'First Steps', desc:'Play your first game', icon:'🎮', unlocked: false },
    { id:'score_100', name:'Century', desc:'Score 100 points in a single game', icon:'💯', unlocked:false },
    { id:'score_500', name:'High Roller', desc:'Score 500 points in a single game', icon:'🔥', unlocked:false },
    { id:'streak_10', name:'On Fire', desc:'Get a 10 question streak', icon:'🔥', unlocked:false },
    { id:'streak_20', name:'Unstoppable', desc:'Get a 20 question streak', icon:'⚡', unlocked:false },
    { id:'accuracy_90', name:'Sharpshooter', desc:'Achieve 90% accuracy', icon:'🎯', unlocked:false },
    { id:'games_10', name:'Regular', desc:'Play 10 games', icon:'🏃', unlocked:false },
    { id:'games_50', name:'Dedicated', desc:'Play 50 games', icon:'💪', unlocked:false },
    { id:'perfect_game', name:'Perfection', desc:'100% accuracy with 20+ questions', icon:'👑', unlocked:false }
];
achievements.forEach(a=>a.unlocked = stats.achievements.includes(a.id));
const difficultySettings = {
    easy:   { maxNumber: 20, operations:['+','-'], timeBonus: 1.2, basePoints: 5 },
    medium: { maxNumber: 50, operations:['+','-','*'], timeBonus: 1.0, basePoints: 10 },
    hard:   { maxNumber: 100, operations:['+','-','*'], timeBonus: 0.8, basePoints: 15 },
    expert: { maxNumber: 200, operations:['+','-','*','/'], timeBonus: 0.6, basePoints: 20 }
};
let performanceChart = null;
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
function playSound(frequency, duration, type='sine') {
    const oscillator = audioContext.createOscillator();
    const gainNode = audioContext.createGain();
    oscillator.connect(gainNode); gainNode.connect(audioContext.destination);
    oscillator.frequency.setValueAtTime(frequency, audioContext.currentTime);
    oscillator.type = type;
    gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);
    gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + duration);
    oscillator.start(audioContext.currentTime);
    oscillator.stop(audioContext.currentTime + duration);
}
document.addEventListener('DOMContentLoaded', function() {
    document.addEventListener('click', function enableAudio() {
        audioContext.resume(); document.removeEventListener('click', enableAudio);
    }, { once: true });
});
function showGameSetup() {
    hideAllSections();
    document.getElementById('gameSetup').classList.remove('hidden');
}
function showInstructions() {
    document.getElementById('instructionsModal').classList.add('active');
}
function hideAllSections() {
    ['gameSetup','gameArea','resultsSection'].forEach(id=>{
        document.getElementById(id).classList.add('hidden');
    });
}
function selectDifficulty(difficulty) {
    gameState.difficulty = difficulty;
    document.querySelectorAll('.difficulty-card').forEach(card=>card.classList.remove('active'));
    document.querySelector(`[data-difficulty="${difficulty}"]`).classList.add('active');
}
function startGame() {
    gameState = {
        isPlaying: true, isPaused: false, difficulty: gameState.difficulty, score: 0,
        streak: 0, maxStreak: 0, questionsAnswered: 0, correctAnswers: 0, timeLeft: 60,
        currentQuestion: null, gameTimer: null, startTime: Date.now(), performanceData: [],
        comboMultiplier: 1
    };
    hideAllSections();
    document.getElementById('gameArea').classList.remove('hidden');
    updateGameDisplay(); startTimer(); generateNewQuestion();
}
function startTimer() {
    gameState.gameTimer = setInterval(()=>{
        if(!gameState.isPaused && gameState.isPlaying){
            gameState.timeLeft--; updateTimerDisplay();
            if(gameState.timeLeft<=0){ endGame(); }
            else if(gameState.timeLeft<=10){ document.getElementById('timerCircle').classList.add('timer-warning'); }
        }
    },1000);
}
function updateTimerDisplay() {
    const timeLeftEl = document.getElementById('timeLeft');
    const timerCircle = document.getElementById('timerCircle');
    const progressFill = document.getElementById('progressFill');
    timeLeftEl.textContent = gameState.timeLeft;
    const progressPercentage = (gameState.timeLeft / 60) * 100;
    progressFill.style.width = `${progressPercentage}%`;
    const progress = (60 - gameState.timeLeft) / 60 * 360;
    const gradient = `conic-gradient(var(--primary-gradient) ${progress}deg, rgba(102,126,234,0.2) ${progress}deg)`;
    timerCircle.style.background = gradient;
}
function generateNewQuestion() {
    const settings = difficultySettings[gameState.difficulty];
    const operation = settings.operations[Math.floor(Math.random()*settings.operations.length)];
    let num1, num2, answer;
    switch(operation){
        case '+': num1 = Math.floor(Math.random()*settings.maxNumber)+1; num2 = Math.floor(Math.random()*settings.maxNumber)+1; answer = num1+num2; break;
        case '-': num1 = Math.floor(Math.random()*settings.maxNumber)+(settings.maxNumber/2); num2 = Math.floor(Math.random()*(settings.maxNumber/2))+1; answer = num1-num2; break;
        case '*': num1 = Math.floor(Math.random()*Math.min(settings.maxNumber/5,20))+1; num2 = Math.floor(Math.random()*Math.min(settings.maxNumber/5,20))+1; answer = num1*num2; break;
        case '/': answer = Math.floor(Math.random()*Math.min(settings.maxNumber/10,20))+1; num2 = Math.floor(Math.random()*12)+1; num1 = answer*num2; break;
    }
    gameState.currentQuestion = {num1,num2,operation,answer};
    displayQuestion();
    generateAnswerOptions(answer);
}
function displayQuestion() {
    const {num1,num2,operation} = gameState.currentQuestion;
    document.getElementById('mathQuestion').textContent = `${num1} ${operation} ${num2} = ?`;
}
function generateAnswerOptions(correctAnswer) {
    const options = [correctAnswer];
    const maxDeviation = Math.max(10, correctAnswer * 0.3);
    const isIntegerAnswer = Number.isInteger(correctAnswer);
    
    while(options.length<4){
        let wrongAnswer;
        if(isIntegerAnswer){
            const deviation = Math.floor(Math.random()*maxDeviation*2)-maxDeviation;
            wrongAnswer = correctAnswer+deviation;
            if(wrongAnswer>0 && wrongAnswer!==correctAnswer && !options.includes(wrongAnswer)){
                options.push(wrongAnswer);
            }
        }else{
            // Only generate decimal answers if the correct answer requires it (division problems)
            const deviation = (Math.random()*maxDeviation*2)-maxDeviation;
            wrongAnswer = correctAnswer+deviation;
            wrongAnswer = parseFloat(wrongAnswer.toFixed(1));
            if(wrongAnswer>0 && !options.some(opt=>Math.abs(opt-wrongAnswer)<0.1)){
                options.push(wrongAnswer);
            }
        }
    }
    
    for(let i=options.length-1;i>0;i--){
        const j=Math.floor(Math.random()*(i+1));
        [options[i],options[j]]=[options[j],options[i]];
    }
    
    const answerGrid = document.getElementById('answerGrid');
    answerGrid.innerHTML='';
    options.forEach(option=>{
        const button = document.createElement('button');
        button.className='game-button';
        // Only show decimal if necessary (for division problems)
        button.textContent = isIntegerAnswer ? option : option.toFixed(1);
        button.onclick=()=>handleAnswer(option);
        answerGrid.appendChild(button);
    });
}
function handleAnswer(selectedAnswer) {
    const buttons = document.querySelectorAll('.game-button');
    buttons.forEach(btn=>btn.classList.add('disabled'));
    const isCorrect = Math.abs(selectedAnswer - gameState.currentQuestion.answer) < 0.01;
    const correctBtn = [...buttons].find(btn=>Math.abs(parseFloat(btn.textContent)-gameState.currentQuestion.answer)<0.01);
    const selectedBtn=[...buttons].find(btn=>Math.abs(parseFloat(btn.textContent)-selectedAnswer)<0.01);
    if(isCorrect){
        selectedBtn.classList.add('correct');
        gameState.correctAnswers++; gameState.streak++; gameState.maxStreak=Math.max(gameState.maxStreak,gameState.streak);
        const basePoints=difficultySettings[gameState.difficulty].basePoints;
        const streakBonus=Math.floor(gameState.streak/5);
        const timeBonus=gameState.timeLeft>50?2:gameState.timeLeft>30?1:0;
        gameState.comboMultiplier=1+streakBonus;
        const points=(basePoints+timeBonus)*gameState.comboMultiplier;
        gameState.score+=points;
        showFloatingScore(points,selectedBtn);
        playSound(800,0.2);
        if(gameState.streak>=5){
            const comboIndicator=document.getElementById('comboIndicator');
            document.getElementById('comboMultiplier').textContent=gameState.comboMultiplier;
            comboIndicator.classList.remove('hidden');
        }
    }else{
        selectedBtn.classList.add('wrong');
        if(correctBtn) correctBtn.classList.add('correct');
        gameState.streak=0; gameState.comboMultiplier=1;
        document.getElementById('comboIndicator').classList.add('hidden');
        playSound(300,0.4,'sawtooth');
    }
    gameState.questionsAnswered++;
    gameState.performanceData.push({
        time:60-gameState.timeLeft, score:gameState.score,
        correct:isCorrect, streak:gameState.streak
    });
    updateGameDisplay();
    setTimeout(()=>{
        if(gameState.isPlaying&&!gameState.isPaused) generateNewQuestion();
    },500);
}
function showFloatingScore(points,element){
    const floatingEl=document.createElement('div');
    floatingEl.className='floating-number';
    floatingEl.textContent=`+${points}`;
    floatingEl.style.color='#10b981';
    const rect=element.getBoundingClientRect();
    floatingEl.style.left=(rect.left+rect.width/2)+'px'; floatingEl.style.top=rect.top+'px';
    document.body.appendChild(floatingEl);
    setTimeout(()=>{document.body.removeChild(floatingEl);},1000);
}
function updateGameDisplay() {
    document.getElementById('currentScore').textContent=gameState.score;
    document.getElementById('currentStreak').textContent=gameState.streak;
    document.getElementById('questionsAnswered').textContent=gameState.questionsAnswered;
}
function pauseGame() {
    const pauseBtn=document.getElementById('pauseBtn');
    if(gameState.isPaused){ gameState.isPaused=false; pauseBtn.innerHTML='<i class="fas fa-pause"></i> Pause'; generateNewQuestion(); }
    else{ gameState.isPaused=true; pauseBtn.innerHTML='<i class="fas fa-play"></i> Resume'; document.getElementById('mathQuestion').textContent='Game Paused'; document.getElementById('answerGrid').innerHTML=''; }
}
function endGame(){
    gameState.isPlaying=false;
    if(gameState.gameTimer){clearInterval(gameState.gameTimer);}
    stats.totalGames++; stats.totalScore+=gameState.score; stats.totalQuestions+=gameState.questionsAnswered;
    stats.totalCorrect+=gameState.correctAnswers; stats.bestScore=Math.max(stats.bestScore,gameState.score);
    stats.scoreHistory.push({
        score:gameState.score,
        accuracy:gameState.questionsAnswered>0?(gameState.correctAnswers/gameState.questionsAnswered*100):0,
        date:new Date().toLocaleDateString()
    });
    if(stats.scoreHistory.length>20) stats.scoreHistory=stats.scoreHistory.slice(-20);
    const newAchievements=checkAchievements();
    localStorage.setItem('quickMathStats', JSON.stringify(stats));
    showResults(newAchievements);
}
function checkAchievements(){
    const newAchievements=[];
    achievements.forEach(achievement=>{
        if(!achievement.unlocked){
            let shouldUnlock=false;
            switch(achievement.id){
                case 'first_game': shouldUnlock=stats.totalGames>=1; break;
                case 'score_100': shouldUnlock=gameState.score>=100; break;
                case 'score_500': shouldUnlock=gameState.score>=500; break;
                case 'streak_10': shouldUnlock=gameState.maxStreak>=10; break;
                case 'streak_20': shouldUnlock=gameState.maxStreak>=20; break;
                case 'accuracy_90':
                    const accuracy=gameState.questionsAnswered>0?(gameState.correctAnswers/gameState.questionsAnswered*100):0;
                    shouldUnlock=accuracy>=90&&gameState.questionsAnswered>=10; break;
                case 'games_10': shouldUnlock=stats.totalGames>=10; break;
                case 'games_50': shouldUnlock=stats.totalGames>=50; break;
                case 'perfect_game':
                    const perfectAccuracy=gameState.questionsAnswered>0?(gameState.correctAnswers/gameState.questionsAnswered*100):0;
                    shouldUnlock=perfectAccuracy===100&&gameState.questionsAnswered>=20; break;
            }
            if(shouldUnlock){
                achievement.unlocked=true;
                newAchievements.push(achievement);
                stats.achievements.push(achievement.id);
            }
        }
    });
    return newAchievements;
}
function showResults(newAchievements=[]){
    hideAllSections();
    document.getElementById('resultsSection').classList.remove('hidden');
    document.getElementById('finalScore').textContent=gameState.score;
    document.getElementById('finalQuestions').textContent=gameState.questionsAnswered;
    const accuracy=gameState.questionsAnswered>0?Math.round((gameState.correctAnswers/gameState.questionsAnswered)*100):0;
    document.getElementById('finalAccuracy').textContent=accuracy+'%';
    if(newAchievements.length>0){
        document.getElementById('newAchievements').classList.remove('hidden');
        const achievementsList=document.getElementById('achievementsList');
        achievementsList.innerHTML='';
        newAchievements.forEach(achievement=>{
            const badge=document.createElement('div');
            badge.className='achievement-badge';
            badge.innerHTML=`${achievement.icon} ${achievement.name}`;
            achievementsList.appendChild(badge);
        });
    }
    setTimeout(()=>{ createPerformanceChart();},100);
}
function createPerformanceChart(){
    const ctx=document.getElementById('performanceChart');
    if(!ctx) return;
    if(performanceChart){performanceChart.destroy();performanceChart=null;}
    if(!gameState.performanceData||gameState.performanceData.length===0){return;}
    const timeLabels=[], scoreData=[];
    const dataPoints=gameState.performanceData;
    const sampleSize=Math.min(15,dataPoints.length);
    const interval=Math.max(1,Math.floor(dataPoints.length/sampleSize));
    for(let i=0;i<dataPoints.length;i+=interval){
        const point=dataPoints[i];
        timeLabels.push(`${point.time}s`);
        scoreData.push(point.score);
    }
    if(dataPoints.length>0&&!timeLabels.includes(`${dataPoints[dataPoints.length-1].time}s`)){
        const finalPoint=dataPoints[dataPoints.length-1];
        timeLabels.push(`${finalPoint.time}s`);
        scoreData.push(finalPoint.score);
    }
    try{
        performanceChart=new Chart(ctx,{
            type:'line',
            data:{labels:timeLabels,datasets:[
                {label:'Score Progress', data:scoreData, borderColor:'#667eea', backgroundColor:'rgba(102,126,234,0.1)',
                    borderWidth:3, fill:true, tension:0.4, pointBackgroundColor:'#667eea', pointBorderColor:'#fff', pointBorderWidth:2, pointRadius:4
                }
            ]},
            options:{
                responsive:true, maintainAspectRatio:false,
                plugins:{legend:{display:false}},
                scales:{
                    y:{beginAtZero:true,grid:{color:'rgba(0,0,0,0.1)'},ticks:{color:'#666'}},
                    x:{grid:{color:'rgba(0,0,0,0.1)'},ticks:{color:'#666'}}
                }
            }
        });
    }catch(error){
        console.error('Error creating chart:',error);
        const chartContainer=document.querySelector('.chart-container').parentElement;
        chartContainer.innerHTML='<div class="text-center text-gray-500 py-8">Chart data unavailable</div>';
    }
}
function closeModal(modalId){ document.getElementById(modalId).classList.remove('active'); }
function playAgain(){ showGameSetup(); }
function backToMenu(){ showGameSetup(); }
// Keyboard shortcuts
document.addEventListener('keydown', function(e){
    if(gameState.isPlaying && !gameState.isPaused){
        const key=e.key;
        if(key>='1'&&key<='4'){
            const buttons=document.querySelectorAll('.game-button');
            const index=parseInt(key)-1;
            if(buttons[index]&&!buttons[index].classList.contains('disabled')){
                const answer=parseFloat(buttons[index].textContent);
                handleAnswer(answer);
            }
        }
    }
    if(e.key==='Escape'){
        document.querySelectorAll('.modal.active').forEach(modal=>{
            modal.classList.remove('active');
        });
    }
});
document.addEventListener('click', function(e){
    if(e.target.classList.contains('modal')) e.target.classList.remove('active');
});
  </script>
</body>
</html>