2048-

export default {
  async fetch(request, env) {
    const url = new URL(request.url);

    // API routes for game state (if needed for leaderboard later)
    if (url.pathname.startsWith('/api/')) {
      return new Response(JSON.stringify({ error: 'Not found' }), {
        status: 404,
        headers: { 'Content-Type': 'application/json' }
      });
    }

    // Serve HTML
    return new Response(getHTML(), {
      headers: { 'Content-Type': 'text/html' }
    });
  }
};

function getHTML() {
  return `<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>2048 - The Ultimate Puzzle Game</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  <style>
    body { font-family: 'Inter', sans-serif; }
    .tile {
      transition: all 0.2s ease-in-out;
    }
    .tile-new {
      animation: appear 0.2s ease-in-out;
    }
    .tile-merged {
      animation: pop 0.3s ease-in-out;
    }
    @keyframes appear {
      from { opacity: 0; transform: scale(0); }
      to { opacity: 1; transform: scale(1); }
    }
    @keyframes pop {
      0% { transform: scale(1); }
      50% { transform: scale(1.2); }
      100% { transform: scale(1); }
    }
    .game-grid {
      background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
    }
    .shimmer {
      animation: shimmer 2s infinite;
    }
    @keyframes shimmer {
      0% { background-position: -200px 0; }
      100% { background-position: calc(200px + 100%) 0; }
    }
  </style>
</head>
<body class="bg-gray-900 text-white min-h-screen flex items-center justify-center p-4">
  <div class="max-w-md w-full">
    <!-- Header -->
    <div class="text-center mb-8">
      <h1 class="text-5xl font-bold bg-gradient-to-r from-violet-500 to-blue-500 bg-clip-text text-transparent mb-2">
        2048
      </h1>
      <p class="text-gray-400 text-lg">Join tiles to reach 2048!</p>
    </div>

    <!-- Score & Controls -->
    <div class="flex justify-between items-center mb-6">
      <div class="bg-white/5 backdrop-blur border border-white/10 rounded-xl px-4 py-3">
        <div class="text-sm text-gray-400">Score</div>
        <div id="score" class="text-2xl font-bold text-white">0</div>
      </div>
      <div class="bg-white/5 backdrop-blur border border-white/10 rounded-xl px-4 py-3">
        <div class="text-sm text-gray-400">Best</div>
        <div id="best" class="text-2xl font-bold text-white">0</div>
      </div>
      <button id="newGame" class="bg-gradient-to-r from-violet-500 to-blue-500 hover:scale-105 transition-transform px-6 py-3 rounded-xl font-semibold">
        New Game
      </button>
    </div>

    <!-- Game Grid -->
    <div id="gameContainer" class="game-grid rounded-2xl p-4 mb-6">
      <div id="grid" class="grid grid-cols-4 gap-2">
        <!-- Grid cells will be generated by JavaScript -->
      </div>
    </div>

    <!-- Instructions -->
    <div class="bg-white/5 backdrop-blur border border-white/10 rounded-xl p-4 mb-4">
      <h3 class="font-semibold mb-2 text-violet-400">How to Play:</h3>
      <p class="text-sm text-gray-300 leading-relaxed">
        Use arrow keys or swipe to move tiles. When two tiles with the same number touch, they merge into one!
        Try to reach the 2048 tile to win! 🎉
      </p>
    </div>

    <!-- Controls for mobile -->
    <div class="grid grid-cols-3 gap-2 max-w-48 mx-auto">
      <div></div>
      <button id="upBtn" class="bg-white/10 hover:bg-white/20 transition-colors p-3 rounded-xl text-2xl">⬆️</button>
      <div></div>
      <button id="leftBtn" class="bg-white/10 hover:bg-white/20 transition-colors p-3 rounded-xl text-2xl">⬅️</button>
      <div></div>
      <button id="rightBtn" class="bg-white/10 hover:bg-white/20 transition-colors p-3 rounded-xl text-2xl">➡️</button>
      <div></div>
      <button id="downBtn" class="bg-white/10 hover:bg-white/20 transition-colors p-3 rounded-xl text-2xl">⬇️</button>
      <div></div>
    </div>

    <!-- Game Over Modal -->
    <div id="gameOverModal" class="hidden fixed inset-0 bg-black/50 backdrop-blur flex items-center justify-center p-4 z-50">
      <div class="bg-gray-800 border border-white/20 rounded-2xl p-6 max-w-sm w-full text-center">
        <div id="gameOverTitle" class="text-3xl font-bold mb-2"></div>
        <div id="gameOverMessage" class="text-gray-300 mb-4"></div>
        <div class="text-sm text-gray-400 mb-6">
          Final Score: <span id="finalScore" class="text-white font-semibold">0</span>
        </div>
        <div class="space-y-2">
          <button id="playAgain" class="w-full bg-gradient-to-r from-violet-500 to-blue-500 hover:scale-105 transition-transform py-3 rounded-xl font-semibold">
            Play Again
          </button>
          <button id="continueGame" class=
...