<!-- WHY NOT QUEST GAME -->
<div id="game" style="position:relative;width:100%;height:400px;overflow:hidden;background:linear-gradient(to top, #004cb3, #8ED6FF);font-family:sans-serif;">
  <div id="player" style="position:absolute;bottom:10px;left:50px;width:40px;height:40px;background:gold;border-radius:50%;"></div>
  <div id="obstacle" style="position:absolute;bottom:10px;right:-50px;width:30px;height:50px;background:red;"></div>
  <div id="key" style="position:absolute;bottom:150px;right:-200px;width:20px;height:20px;background:limegreen;border-radius:50%;"></div>
  <div id="score" style="position:absolute;top:10px;left:10px;color:white;font-size:20px;">Keys: 0</div>
  <div id="message" style="position:absolute;top:40px;left:10px;color:white;font-size:16px;"></div>
</div>

<script>
// Variables
const player = document.getElementById('player');
const obstacle = document.getElementById('obstacle');
const key = document.getElementById('key');
const scoreDisplay = document.getElementById('score');
const messageDisplay = document.getElementById('message');

let isJumping = false;
let score = 0;
let quotes = [
  "Believe in your next step!",
  "Limits are illusions!",
  "Your breakthrough is near!",
  "One mile or a million, you move forward!",
  "Why not now? Why not you?"
];

// Jump on click
document.getElementById('game').addEventListener('click', function() {
  if (!isJumping) {
    isJumping = true;
    player.style.transition = 'bottom 0.4s';
    player.style.bottom = '120px';
    setTimeout(() => {
      player.style.bottom = '10px';
      setTimeout(() => { isJumping = false; }, 400);
    }, 400);
  }
});

// Move elements
function moveElement(elem, speed, resetX) {
  let pos = parseInt(window.getComputedStyle(elem).right);
  if (pos > window.innerWidth + 100) {
    elem.style.right = resetX + 'px';
    if (elem === key) {
      elem.style.bottom = (Math.random() * 200 + 80) + 'px';
    }
  } else {
    elem.style.right = (pos + speed) + 'px';
  }
}

// Check collision
function checkCollision(a, b) {
  const aRect = a.getBoundingClientRect();
  const bRect = b.getBoundingClientRect();
  return !(aRect.top > bRect.bottom || 
           aRect.bottom < bRect.top || 
           aRect.right < bRect.left || 
           aRect.left > bRect.right);
}

// Reset game
function resetGame() {
  score = 0;
  scoreDisplay.textContent = 'Keys: 0';
  messageDisplay.textContent = "You are strong! Try again.";
  obstacle.style.right = '-50px';
  key.style.right = '-200px';
}

// Game loop
function gameLoop() {
  moveElement(obstacle, 5, -50);
  moveElement(key, 4, -200);

  if (checkCollision(player, obstacle)) {
    resetGame();
  }

  if (checkCollision(player, key)) {
    score++;
    scoreDisplay.textContent = 'Keys: ' + score;
    key.style.right = '-200px';
    key.style.bottom = (Math.random() * 200 + 80) + 'px';

    if (score % 3 === 0) {
      const quote = quotes[Math.floor(Math.random() * quotes.length)];
      messageDisplay.textContent = quote;
    }
  }

  requestAnimationFrame(gameLoop);
}

// Start game
gameLoop();
</script>