<div class="fd-wrap">
  <div class="fd-stage">
    <canvas id="fd-canvas" width="360" height="520"></canvas>
    <div class="fd-hud">
      <span id="fd-score">0</span>
    </div>
    <div class="fd-screen fd-start-screen" id="start-screen">
      <p class="fd-logo">Flap &amp; Dodge</p>
      <p class="fd-sub">Tap, click, or press Space to flap</p>
      <button class="fd-btn" id="start-btn">Start</button>
      <p class="fd-best">Best: <span id="start-best">0</span></p>
    </div>
    <div class="fd-screen fd-over-screen" id="over-screen">
      <p class="fd-logo">Game Over</p>
      <p class="fd-final-score">Score: <span id="final-score">0</span></p>
      <p class="fd-best">Best: <span id="over-best">0</span></p>
      <button class="fd-btn" id="retry-btn">Try Again</button>
    </div>
  </div>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #0f172a; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }

.fd-wrap { display: flex; align-items: center; justify-content: center; }

.fd-stage {
  position: relative;
  width: 360px; height: 520px;
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  cursor: pointer;
}

#fd-canvas { display: block; width: 100%; height: 100%; background: #7dd3fc; }

.fd-hud {
  position: absolute; top: 16px; left: 0; right: 0;
  text-align: center; pointer-events: none;
}
#fd-score {
  font-size: 42px; font-weight: 800; color: #fff;
  text-shadow: 0 2px 0 rgba(0,0,0,0.25);
  font-family: 'Courier New', monospace;
}

.fd-screen {
  position: absolute; inset: 0;
  background: rgba(15,23,42,0.72);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.fd-screen.show { opacity: 1; pointer-events: all; }

.fd-logo { font-size: 26px; font-weight: 800; color: #fff; }
.fd-sub { font-size: 13px; color: #cbd5e1; margin-bottom: 6px; }
.fd-final-score { font-size: 18px; font-weight: 700; color: #f1f5f9; }
.fd-best { font-size: 12px; color: #94a3b8; margin-top: 2px; }

.fd-btn {
  background: #6366f1; color: #fff; border: none; border-radius: 10px;
  padding: 10px 26px; font-size: 14px; font-weight: 700; cursor: pointer;
  font-family: inherit; transition: background 0.15s, transform 0.1s;
  margin-top: 4px;
}
.fd-btn:hover { background: #4f46e5; }
.fd-btn:active { transform: scale(0.96); }

const canvas = document.getElementById('fd-canvas');
const ctx = canvas.getContext('2d');
const W = canvas.width, H = canvas.height;
const BEST_KEY = 'flap-dodge-best';

const startScreen = document.getElementById('start-screen');
const overScreen = document.getElementById('over-screen');
const scoreEl = document.getElementById('fd-score');
const finalScoreEl = document.getElementById('final-score');
const startBestEl = document.getElementById('start-best');
const overBestEl = document.getElementById('over-best');
const stage = document.querySelector('.fd-stage');

let best = parseInt(localStorage.getItem(BEST_KEY) || '0', 10) || 0;
startBestEl.textContent = best;
overBestEl.textContent = best;

const GRAVITY = 1400;        // px/s^2
const FLAP_VELOCITY = -420;  // px/s
const PIPE_SPEED = 150;      // px/s
const PIPE_GAP = 150;        // px
const PIPE_WIDTH = 58;
const PIPE_INTERVAL = 1.5;   // seconds between pipe pairs
const BIRD_RADIUS = 14;
const BIRD_X = 90;

let state = 'idle'; // idle | playing | over
let bird = { y: H / 2, vy: 0 };
let pipes = [];
let score = 0;
let timeSincePipe = 0;
let lastTime = 0;
let rafId = null;

function resetGame() {
  bird = { y: H / 2, vy: 0 };
  pipes = [];
  score = 0;
  timeSincePipe = 0;
  scoreEl.textContent = '0';
}

function startGame() {
  resetGame();
  state = 'playing';
  startScreen.classList.remove('show');
  overScreen.classList.remove('show');
  lastTime = performance.now();
  rafId = requestAnimationFrame(loop);
}

function endGame() {
  state = 'over';
  cancelAnimationFrame(rafId);
  if (score > best) {
    best = score;
    localStorage.setItem(BEST_KEY, String(best));
  }
  finalScoreEl.textContent = score;
  overBestEl.textContent = best;
  overScreen.classList.add('show');
}

function flap() {
  if (state === 'idle') { startGame(); return; }
  if (state === 'over') return;
  bird.vy = FLAP_VELOCITY;
}

function spawnPipe() {
  const margin = 60;
  const gapCenter = margin + Math.random() * (H - margin * 2);
  pipes.push({
    x: W + PIPE_WIDTH,
    gapCenter,
    passed: false,
  });
}

function update(dt) {
  bird.vy += GRAVITY * dt;
  bird.y += bird.vy * dt;

  timeSincePipe += dt;
  if (timeSincePipe >= PIPE_INTERVAL) {
    timeSincePipe = 0;
    spawnPipe();
  }

  for (const pipe of pipes) {
    pipe.x -= PIPE_SPEED * dt;
    if (!pipe.passed && pipe.x + PIPE_WIDTH < BIRD_X - BIRD_RADIUS) {
      pipe.passed = true;
      score++;
      scoreEl.textContent = score;
    }
  }
  pipes = pipes.filter(p => p.x > -PIPE_WIDTH);

  // Collisions: ground / ceiling
  if (bird.y - BIRD_RADIUS < 0 || bird.y + BIRD_RADIUS > H) {
    endGame();
    return;
  }

  // Collisions: pipes
  for (const pipe of pipes) {
    const withinX = BIRD_X + BIRD_RADIUS > pipe.x && BIRD_X - BIRD_RADIUS < pipe.x + PIPE_WIDTH;
    if (withinX) {
      const gapTop = pipe.gapCenter - PIPE_GAP / 2;
      const gapBottom = pipe.gapCenter + PIPE_GAP / 2;
      if (bird.y - BIRD_RADIUS < gapTop || bird.y + BIRD_RADIUS > gapBottom) {
        endGame();
        return;
      }
    }
  }
}

function draw() {
  ctx.clearRect(0, 0, W, H);

  // Sky gradient
  const g = ctx.createLinearGradient(0, 0, 0, H);
  g.addColorStop(0, '#7dd3fc');
  g.addColorStop(1, '#bae6fd');
  ctx.fillStyle = g;
  ctx.fillRect(0, 0, W, H);

  // Pipes
  ctx.fillStyle = '#22c55e';
  ctx.strokeStyle = '#15803d';
  ctx.lineWidth = 3;
  for (const pipe of pipes) {
    const gapTop = pipe.gapCenter - PIPE_GAP / 2;
    const gapBottom = pipe.gapCenter + PIPE_GAP / 2;
    ctx.fillRect(pipe.x, 0, PIPE_WIDTH, gapTop);
    ctx.strokeRect(pipe.x, 0, PIPE_WIDTH, gapTop);
    ctx.fillRect(pipe.x, gapBottom, PIPE_WIDTH, H - gapBottom);
    ctx.strokeRect(pipe.x, gapBottom, PIPE_WIDTH, H - gapBottom);
  }

  // Ground line
  ctx.fillStyle = '#a3e635';
  ctx.fillRect(0, H - 4, W, 4);

  // Bird
  const angle = Math.max(-0.5, Math.min(0.9, bird.vy / 600));
  ctx.save();
  ctx.translate(BIRD_X, bird.y);
  ctx.rotate(angle);
  ctx.fillStyle = '#f59e0b';
  ctx.beginPath();
  ctx.arc(0, 0, BIRD_RADIUS, 0, Math.PI * 2);
  ctx.fill();
  ctx.fillStyle = '#fff';
  ctx.beginPath();
  ctx.arc(4, -4, 4, 0, Math.PI * 2);
  ctx.fill();
  ctx.fillStyle = '#1e293b';
  ctx.beginPath();
  ctx.arc(5, -4, 1.8, 0, Math.PI * 2);
  ctx.fill();
  ctx.fillStyle = '#f97316';
  ctx.beginPath();
  ctx.moveTo(BIRD_RADIUS - 2, 0);
  ctx.lineTo(BIRD_RADIUS + 8, -3);
  ctx.lineTo(BIRD_RADIUS + 8, 3);
  ctx.closePath();
  ctx.fill();
  ctx.restore();
}

function loop(now) {
  const dt = Math.min(0.033, (now - lastTime) / 1000);
  lastTime = now;
  if (state === 'playing') {
    update(dt);
    draw();
    if (state === 'playing') rafId = requestAnimationFrame(loop);
  }
}

stage.addEventListener('mousedown', (e) => {
  if (e.target.closest('.fd-btn')) return;
  flap();
});
stage.addEventListener('touchstart', (e) => {
  if (e.target.closest('.fd-btn')) return;
  e.preventDefault();
  flap();
}, { passive: false });

document.addEventListener('keydown', (e) => {
  if (e.code === 'Space') {
    e.preventDefault();
    flap();
  }
});

document.getElementById('start-btn').addEventListener('click', startGame);
document.getElementById('retry-btn').addEventListener('click', startGame);

draw();
startScreen.classList.add('show');