<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
  <title>Asteroid Dodge</title>
  <script src="https://unpkg.com/react@18.3.1/umd/react.production.min.js" integrity="sha384-DGyLxAyjq0f9SPpVevD6IgztCFlnMF6oW/XQGmfe+IsZ8TqEiDrcHkMLKI6fiB/Z" crossorigin="anonymous"></script>
  <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.production.min.js" integrity="sha384-gTGxhz21lVGYNMcdJOyq01Edg0jhn/c22nsx0kyqP0TxaV5WVdsSH1fSDUf5YJj1" crossorigin="anonymous"></script>
  <script src="https://unpkg.com/@babel/standalone@7.29.8/babel.min.js" integrity="sha384-Ux6uBqExf/7ahsSNrA9VI7vuaw6sKjDoVdjdUxmIoL2qdlzFVZ157sTi6JK3Z9Q8" crossorigin="anonymous"></script>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      background: #0a0a1a;
      color: #fff;
      font-family: 'Segoe UI', system-ui, sans-serif;
      overflow: hidden;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      touch-action: none;
      user-select: none;
      -webkit-user-select: none;
    }
    #root { width: 100%; height: 100%; }

    .game-container {
      width: 100%;
      height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;
      background: linear-gradient(180deg, #0a0a0f 0%, #0f1a2e 50%, #0a0a0f 100%);
      overflow: hidden;
      outline: none;
    }

    /* Stars */
    .star {
      position: absolute;
      background: #fff;
      border-radius: 50%;
      animation: twinkle var(--dur) ease-in-out infinite alternate;
    }
    @keyframes twinkle {
      0% { opacity: 0.2; }
      100% { opacity: 1; }
    }

    /* Canvas area */
    .game-canvas {
      position: relative;
      width: min(400px, 85vw);
      height: min(600px, calc(min(400px, 85vw) * 1.5));
      background: radial-gradient(ellipse at center, #0d0d2b 0%, #050510 100%);
      border: 2px solid rgba(34, 211, 238, 0.2);
      border-radius: 8px;
      overflow: hidden;
      cursor: none;
      touch-action: none;
    }

    /* Player ship */
    .ship {
      position: absolute;
      width: 32px;
      height: 32px;
      pointer-events: none;
      z-index: 10;
      transition: none;
    }
    .ship svg {
      width: 100%;
      height: 100%;
      filter: drop-shadow(0 0 6px #22d3ee);
    }
    .ship.shielded svg {
      filter: drop-shadow(0 0 12px #22d3ee) drop-shadow(0 0 20px rgba(34, 211, 238, 0.4));
    }

    /* Shield bubble */
    .shield-bubble {
      position: absolute;
      border-radius: 50%;
      border: 2px solid rgba(34, 211, 238, 0.6);
      background: radial-gradient(circle, rgba(34, 211, 238, 0.08) 0%, transparent 70%);
      pointer-events: none;
      z-index: 9;
      animation: shield-pulse 1s ease-in-out infinite alternate;
      transform: translate(-50%, -50%);
    }
    @keyframes shield-pulse {
      0% { border-color: rgba(34, 211, 238, 0.4); box-shadow: 0 0 8px rgba(34, 211, 238, 0.2); }
      100% { border-color: rgba(34, 211, 238, 0.8); box-shadow: 0 0 20px rgba(34, 211, 238, 0.5); }
    }

    /* Engine trail particle */
    .trail-particle {
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
      z-index: 4;
      transition: none;
    }

    /* Asteroid */
    .asteroid {
      position: absolute;
      pointer-events: none;
      z-index: 5;
      transition: none;
    }

    /* Power-up falling collectible */
    .powerup-item {
      position: absolute;
      pointer-events: none;
      z-index: 6;
      animation: powerup-glow 0.8s ease-in-out infinite alternate;
    }
    @keyframes powerup-glow {
      0% { filter: brightness(1); transform: scale(1); }
      100% { filter: brightness(1.4); transform: scale(1.1); }
    }

    /* Explosion */
    .explosion {
      position: absolute;
      pointer-events: none;
      z-index: 20;
      animation: explode 0.6s ease-out forwards;
    }
    @keyframes explode {
      0% { transform: scale(1); opacity: 1; }
      50% { transform: scale(2.5); opacity: 0.8; }
      100% { transform: scale(3); opacity: 0; }
    }

    /* HUD */
    .hud {
      position: absolute;
      top: 8px;
      left: 0;
      right: 0;
      display: flex;
      justify-content: space-between;
      padding: 0 12px;
      font-size: 14px;
      font-weight: 600;
      z-index: 30;
      pointer-events: none;
    }
    .hud span {
      background: rgba(0,0,0,0.5);
      padding: 4px 10px;
      border-radius: 4px;
      border: 1px solid rgba(255,255,255,0.1);
    }
    .hud .score { color: #22d3ee; }
    .hud .lives { color: #ef4444; }
    .hud .level { color: #22d3ee; }

    /* Active power-up HUD */
    .powerup-hud {
      position: absolute;
      top: 40px;
      left: 0;
      right: 0;
      display: flex;
      justify-content: center;
      gap: 6px;
      padding: 0 12px;
      z-index: 30;
      pointer-events: none;
      flex-wrap: wrap;
    }
    .powerup-hud .pup-badge {
      background: rgba(0,0,0,0.5);
      padding: 2px 8px;
      border-radius: 4px;
      border: 1px solid var(--pup-color, rgba(255,255,255,0.15));
      font-size: 12px;
      display: flex;
      align-items: center;
      gap: 3px;
      box-shadow: 0 0 6px var(--pup-color-translucent, transparent);
    }
    .powerup-hud .pup-badge .pup-timer {
      color: rgba(255,255,255,0.6);
      font-size: 10px;
      min-width: 16px;
      text-align: center;
    }

    /* Overlay (Start / Game Over) */
    .overlay {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: rgba(0,0,0,0.78);
      z-index: 50;
      animation: fadeIn 0.3s ease;
    }
    @keyframes fadeIn {
      0% { opacity: 0; }
      100% { opacity: 1; }
    }
    .overlay h1 {
      font-size: 32px;
      margin-bottom: 8px;
      color: #22d3ee;
      text-shadow: 0 0 20px rgba(34, 211, 238, 0.4);
    }
    .overlay h2 {
      font-size: 28px;
      margin-bottom: 4px;
      color: #ff4444;
      text-shadow: 0 0 20px rgba(255, 68, 68, 0.4);
    }
    .overlay p {
      color: #aaa;
      margin-bottom: 16px;
      font-size: 14px;
      text-align: center;
      line-height: 1.5;
    }
    .overlay .final-score {
      color: #ffd700;
      font-size: 18px;
      margin-bottom: 6px;
    }
    .overlay .high-score {
      color: #22d3ee;
      font-size: 15px;
      margin-bottom: 4px;
    }
    .overlay .high-score.new-record {
      color: #ffd700;
      text-shadow: 0 0 12px rgba(255, 215, 0, 0.6);
      animation: pulse-gold 0.6s ease-in-out infinite alternate;
    }
    @keyframes pulse-gold {
      0% { transform: scale(1); }
      100% { transform: scale(1.05); text-shadow: 0 0 20px rgba(255, 215, 0, 0.9); }
    }
    .overlay .controls-hint {
      color: rgba(255,255,255,0.3);
      font-size: 11px;
      margin-bottom: 16px;
    }
    .btn {
      padding: 12px 36px;
      font-size: 18px;
      font-weight: 700;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      background: #06b6d4;
      color: #fff;
      transition: transform 0.15s, box-shadow 0.15s;
      pointer-events: all;
    }
    .btn:hover {
      transform: scale(1.05);
      box-shadow: 0 0 20px rgba(34, 211, 238, 0.4);
    }
    .btn:active {
      transform: scale(0.97);
    }

    .hint {
      position: absolute;
      bottom: 8px;
      left: 0;
      right: 0;
      text-align: center;
      font-size: 11px;
      color: rgba(255,255,255,0.25);
      z-index: 1;
      pointer-events: none;
    }

    @media (max-width: 440px) {
      .game-canvas {
        width: 92vw;
        height: calc(92vw * 1.5);
        max-height: 80vh;
      }
      .hud { font-size: 12px; }
      .hud span { padding: 2px 6px; }
      .overlay h1 { font-size: 26px; }
      .overlay h2 { font-size: 22px; }
    }
    @media (max-width: 360px) {
      .game-canvas {
        width: 95vw;
        height: calc(95vw * 1.5);
      }
      .btn { padding: 10px 24px; font-size: 16px; }
    }
  </style>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
    const { useState, useEffect, useRef, useCallback } = React;

    // ────────────────────────────────────────────────────────────────
    // ─── Sound Manager (Web Audio API) ────────────────────────────
    // ────────────────────────────────────────────────────────────────
    const Sound = {
      _ctx: null,
      init() {
        if (this._ctx) return;
        try {
          const AC = window.AudioContext || window.webkitAudioContext;
          this._ctx = new AC();
        } catch (e) { /* silently degrade */ }
      },
      resume() {
        if (this._ctx && this._ctx.state === 'suspended') this._ctx.resume();
      },
      _tone(freq, dur, type = 'sine', vol = 0.12) {
        if (!this._ctx) return;
        try {
          const o = this._ctx.createOscillator();
          const g = this._ctx.createGain();
          o.type = type;
          o.frequency.value = freq;
          g.gain.setValueAtTime(vol, this._ctx.currentTime);
          g.gain.exponentialRampToValueAtTime(0.001, this._ctx.currentTime + dur);
          o.connect(g);
          g.connect(this._ctx.destination);
          o.start();
          o.stop(this._ctx.currentTime + dur);
        } catch (e) { /* ignore */ }
      },
      _noise(dur, vol = 0.08) {
        if (!this._ctx) return;
        try {
          const sr = this._ctx.sampleRate;
          const buf = this._ctx.createBuffer(1, sr * dur, sr);
          const d = buf.getChannelData(0);
          for (let i = 0; i < d.length; i++) d[i] = Math.random() * 2 - 1;
          const src = this._ctx.createBufferSource();
          src.buffer = buf;
          const g = this._ctx.createGain();
          g.gain.setValueAtTime(vol, this._ctx.currentTime);
          g.gain.exponentialRampToValueAtTime(0.001, this._ctx.currentTime + dur);
          src.connect(g);
          g.connect(this._ctx.destination);
          src.start();
        } catch (e) { /* ignore */ }
      },
      hit() { this._noise(0.25, 0.12); this._tone(70, 0.25, 'sawtooth', 0.08); },
      score() { this._tone(660, 0.06, 'sine', 0.06); },
      powerUp() { this._tone(523, 0.08, 'sine', 0.08); setTimeout(() => this._tone(784, 0.12, 'sine', 0.08), 90); },
      levelUp() { this._tone(523, 0.1, 'sine', 0.08); setTimeout(() => this._tone(659, 0.1, 'sine', 0.08), 100); setTimeout(() => this._tone(784, 0.14, 'sine', 0.08), 200); },
      gameOver() { this._tone(400, 0.2, 'sawtooth', 0.1); setTimeout(() => this._tone(200, 0.35, 'sawtooth', 0.1), 150); },
    };

    // ────────────────────────────────────────────────────────────────
    // ─── Constants ────────────────────────────────────────────────
    // ────────────────────────────────────────────────────────────────
    const CW = 400, CH = 600, SHIP = 32;
    const ASTEROID_SIZES = [24, 32, 40, 48];
    const AST_FALL_DIST = CH + 80;
    const MAX_LIVES = 3;
    const TRAIL_LEN = 18;
    const PU_SPAWN_MIN = 12000;
    const PU_SPAWN_MAX = 22000;

    const POWERUPS = [
      { type: 'shield',    icon: '🛡️', color: '#22d3ee', dur: 5000 },
      { type: 'slowmo',    icon: '⏱️', color: '#a855f7', dur: 4000 },
      { type: 'speed',     icon: '⚡',  color: '#22c55e', dur: 3000 },
      { type: 'extralife', icon: '❤️', color: '#ef4444', dur: 0 },
    ];

    const rand = (min, max) => Math.random() * (max - min) + min;
    const randInt = (min, max) => Math.floor(rand(min, max + 1));

    // ────────────────────────────────────────────────────────────────
    // ─── Stars ─────────────────────────────────────────────────────
    // ────────────────────────────────────────────────────────────────
    function Stars() {
      const s = Array.from({ length: 60 }, (_, i) => ({
        id: i, left: rand(0, 100) + '%', top: rand(0, 100) + '%',
        size: rand(1, 2.5) + 'px', dur: rand(1.5, 4) + 's', delay: rand(0, 3) + 's',
      }));
      return s.map(si => (
        <div key={si.id} className="star" style={{ left: si.left, top: si.top, width: si.size, height: si.size, '--dur': si.dur, animationDelay: si.delay }} />
      ));
    }

    // ────────────────────────────────────────────────────────────────
    // ─── Trail Particle ────────────────────────────────────────────
    // ────────────────────────────────────────────────────────────────
    function TrailParticle({ x, y, alpha, size }) {
      return (
        <div className="trail-particle" style={{
          left: x - size / 2, top: y - size / 2,
          width: size, height: size,
          background: `rgba(34, 211, 238, ${alpha})`,
          boxShadow: `0 0 ${size * 2}px rgba(34, 211, 238, ${alpha * 0.4})`,
        }} />
      );
    }

    // ────────────────────────────────────────────────────────────────
    // ─── Ship ──────────────────────────────────────────────────────
    // ────────────────────────────────────────────────────────────────
    function Ship({ x, y }) {
      return (
        <div className="ship" style={{ left: x - SHIP / 2, top: y - SHIP / 2 }}>
          <svg viewBox="0 0 32 32" fill="none">
            <polygon points="16,2 6,28 16,22 26,28" fill="#44ddff" />
            <polygon points="16,6 10,24 16,20 22,24" fill="#88eeff" />
            <rect x="14" y="18" width="4" height="6" fill="#ff6633" rx="1" />
          </svg>
        </div>
      );
    }

    // ────────────────────────────────────────────────────────────────
    // ─── Shield Bubble ─────────────────────────────────────────────
    // ────────────────────────────────────────────────────────────────
    function ShieldBubble({ x, y }) {
      const r = 28;
      return (
        <div className="shield-bubble" style={{
          left: x, top: y,
          width: r * 2, height: r * 2,
        }} />
      );
    }

    // ────────────────────────────────────────────────────────────────
    // ─── Asteroid (JS-driven position) ─────────────────────────────
    // ────────────────────────────────────────────────────────────────
    function Asteroid({ x, y, size }) {
      const s = size;
      return (
        <div className="asteroid" style={{ left: x - s / 2, top: y - s / 2, width: s, height: s }}>
          <svg viewBox="0 0 48 48" width={s} height={s}>
            <ellipse cx="24" cy="24" rx="22" ry="20" fill="#555" />
            <ellipse cx="24" cy="24" rx="22" ry="20" fill="#666" opacity="0.6" />
            <circle cx="16" cy="18" r="4" fill="#444" />
            <circle cx="30" cy="22" r="5" fill="#3a3a3a" />
            <circle cx="22" cy="32" r="3" fill="#4a4a4a" />
            <ellipse cx="10" cy="14" rx="3" ry="2" fill="#3a3a3a" />
          </svg>
        </div>
      );
    }

    // ────────────────────────────────────────────────────────────────
    // ─── PowerUp Item (falling collectible) ────────────────────────
    // ────────────────────────────────────────────────────────────────
    function PowerUpItem({ x, y, type, size }) {
      const cfg = POWERUPS.find(p => p.type === type) || POWERUPS[0];
      return (
        <div className="powerup-item" style={{
          left: x - size / 2, top: y - size / 2, width: size, height: size,
          fontSize: size * 0.6, display: 'flex', alignItems: 'center', justifyContent: 'center',
          background: `radial-gradient(circle, ${cfg.color}33 0%, transparent 70%)`,
          borderRadius: '50%', border: `2px solid ${cfg.color}88`,
          boxShadow: `0 0 12px ${cfg.color}44`,
        }}>
          {cfg.icon}
        </div>
      );
    }

    // ────────────────────────────────────────────────────────────────
    // ─── Explosion ─────────────────────────────────────────────────
    // ────────────────────────────────────────────────────────────────
    function Explosion({ x, y, id }) {
      return (
        <div className="explosion" key={id} style={{ left: x - 16, top: y - 16 }}>
          <svg viewBox="0 0 32 32" width="32" height="32">
            <circle cx="16" cy="16" r="8" fill="#ff6600" opacity="0.9" />
            <circle cx="16" cy="16" r="4" fill="#ffcc00" />
          </svg>
        </div>
      );
    }

    // ────────────────────────────────────────────────────────────────
    // ─── Main Game Component ───────────────────────────────────────
    // ────────────────────────────────────────────────────────────────
    function Game() {
      const [status, setStatus] = useState('start'); // start | playing | over
      const [score, setScore] = useState(0);
      const [lives, setLives] = useState(MAX_LIVES);
      const [level, setLevel] = useState(1);
      const [highScore, setHighScore] = useState(() => {
        const saved = parseInt(localStorage.getItem('adodge_hs'), 10);
        return isNaN(saved) ? 0 : saved;
      });
      const [shipPos, setShipPos] = useState({ x: CW / 2, y: CH - 50 });
      const [asteroids, setAsteroids] = useState([]);
      const [explosions, setExplosions] = useState([]);
      const [powerUpItems, setPowerUpItems] = useState([]);
      const [activePowerUps, setActivePowerUps] = useState([]); // [{ type, expiresAt }]
      const [trail, setTrail] = useState([]);
      const [mousePos, setMousePos] = useState({ x: CW / 2, y: CH - 50 });
      const [newRecord, setNewRecord] = useState(false);

      // Refs for mutable game state
      const frameRef = useRef(null);
      const lastTimeRef = useRef(0);
      const astIdRef = useRef(0);
      const puIdRef = useRef(0);
      const lastSpawnRef = useRef(0);
      const lastPUSpawnRef = useRef(0);
      const keysRef = useRef(new Set());
      const keyboardActiveRef = useRef(false);
      const trailRef = useRef([]);
      const gameRef = useRef({ score: 0, lives: MAX_LIVES, level: 1, shipX: CW / 2, shipY: CH - 50 });
      const canvasRef = useRef(null);

      // Sync mutable ref
      useEffect(() => {
        gameRef.current = { score, lives, level, shipX: shipPos.x, shipY: shipPos.y };
      }, [score, lives, level, shipPos]);

      // ─── Keyboard handling ───────────────────────────────────
      useEffect(() => {
        const onDown = (e) => {
          const k = e.key;
          if (['ArrowUp','ArrowDown','ArrowLeft','ArrowRight','w','a','s','d','W','A','S','D'].includes(k)) {
            e.preventDefault();
            keysRef.current.add(k.toLowerCase());
            keyboardActiveRef.current = true;
          }
          // Space or Enter to start
          if ((k === ' ' || k === 'Enter') && status === 'start') {
            e.preventDefault();
            startGame();
          }
        };
        const onUp = (e) => {
          const k = e.key.toLowerCase();
          keysRef.current.delete(k);
          keysRef.current.delete(e.key); // also try original case
          if (keysRef.current.size === 0) keyboardActiveRef.current = false;
        };
        // Also handle blur to reset keys
        const onBlur = () => { keysRef.current.clear(); keyboardActiveRef.current = false; };

        window.addEventListener('keydown', onDown);
        window.addEventListener('keyup', onUp);
        window.addEventListener('blur', onBlur);
        return () => {
          window.removeEventListener('keydown', onDown);
          window.removeEventListener('keyup', onUp);
          window.removeEventListener('blur', onBlur);
        };
      }, [status]);

      // ─── Pointer handling (mouse + touch) ────────────────────
      const handlePointer = useCallback((clientX, clientY) => {
        const rect = canvasRef.current?.getBoundingClientRect();
        if (!rect) return;
        if (!keyboardActiveRef.current) {
          const x = Math.max(SHIP / 2, Math.min(CW - SHIP / 2, (clientX - rect.left) * (CW / rect.width)));
          const y = Math.max(SHIP / 2, Math.min(CH - SHIP / 2, (clientY - rect.top) * (CH / rect.height)));
          setMousePos({ x, y });
        }
      }, []);

      const onMouseMove = useCallback((e) => handlePointer(e.clientX, e.clientY), [handlePointer]);
      const onTouchMove = useCallback((e) => {
        if (e.touches.length > 0) handlePointer(e.touches[0].clientX, e.touches[0].clientY);
      }, [handlePointer]);
      const onTouchStart = useCallback((e) => {
        if (e.touches.length > 0) handlePointer(e.touches[0].clientX, e.touches[0].clientY);
      }, [handlePointer]);

      // ─── Spawn asteroid ──────────────────────────────────────
      const spawnAsteroid = useCallback((lvl) => {
        const size = ASTEROID_SIZES[randInt(0, ASTEROID_SIZES.length - 1)];
        const x = rand(size / 2, CW - size / 2);
        const dur = BASE_SPEED + rand(0, 1.5) - lvl * 0.15;
        const spd = Math.max(1.0, dur);
        const vy = AST_FALL_DIST / (spd * 60); // px per frame at 60fps
        astIdRef.current += 1;
        return { id: astIdRef.current, x, y: -size, size, vy };
      }, []);

      // ─── Spawn power-up item ─────────────────────────────────
      const spawnPowerUp = useCallback(() => {
        const cfg = POWERUPS[randInt(0, POWERUPS.length - 1)];
        const size = 28;
        const x = rand(size / 2, CW - size / 2);
        puIdRef.current += 1;
        return { id: puIdRef.current, x, y: -size, size, type: cfg.type, vy: 1.5 };
      }, []);

      const BASE_SPEED = 1.8; // reference duration in seconds at level 1

      // ─── Collision check ─────────────────────────────────────
      const checkCollision = useCallback((ax, ay, aSize, sx, sy) => {
        const r = aSize / 2 + SHIP / 2 - 4;
        const dx = ax - sx, dy = ay - sy;
        return dx * dx + dy * dy < r * r;
      }, []);

      // ─── Game loop (requestAnimationFrame) ───────────────────
      useEffect(() => {
        if (status !== 'playing') return;
        Sound.resume();

        let spawnInterval = Math.max(300, 1200 - level * 60);
        let puSpawnInterval = rand(PU_SPAWN_MIN, PU_SPAWN_MAX);
        let running = true;

        const tick = (now) => {
          if (!running) return;
          const dt = lastTimeRef.current ? (now - lastTimeRef.current) / 1000 : 1 / 60;
          lastTimeRef.current = now;
          if (dt > 0.1) { frameRef.current = requestAnimationFrame(tick); return; } // tab was hidden

          const g = gameRef.current;
          const slowMo = activePowerUps.some(p => p.type === 'slowmo');
          const speedBoost = activePowerUps.some(p => p.type === 'speed');
          const speedMult = slowMo ? 0.3 : 1;
          const shipSpeed = speedBoost ? 10 : 6;

          // ── Update asteroid positions ──
          setAsteroids(prev => {
            if (prev.length === 0) return prev;
            return prev.map(ast => ({
              ...ast,
              y: ast.y + ast.vy * speedMult * 60 * dt,
            }));
          });

          // ── Update power-up item positions ──
          setPowerUpItems(prev => {
            if (prev.length === 0) return prev;
            return prev.map(pu => ({
              ...pu,
              y: pu.y + pu.vy * speedMult * 60 * dt,
            }));
          });

          // ── Keyboard movement ──
          if (keyboardActiveRef.current) {
            let dx = 0, dy = 0;
            const k = keysRef.current;
            if (k.has('arrowleft') || k.has('a')) dx -= 1;
            if (k.has('arrowright') || k.has('d')) dx += 1;
            if (k.has('arrowup') || k.has('w')) dy -= 1;
            if (k.has('arrowdown') || k.has('s')) dy += 1;
            if (dx !== 0 || dy !== 0) {
              const len = Math.sqrt(dx * dx + dy * dy);
              setShipPos(prev => ({
                x: Math.max(SHIP / 2, Math.min(CW - SHIP / 2, prev.x + (dx / len) * shipSpeed)),
                y: Math.max(SHIP / 2, Math.min(CH - SHIP / 2, prev.y + (dy / len) * shipSpeed)),
              }));
            }
          } else {
            // ── Mouse / Touch movement ──
            setShipPos(prev => {
              const dx = mousePos.x - prev.x;
              const dy = mousePos.y - prev.y;
              const dist = Math.sqrt(dx * dx + dy * dy);
              if (dist < 1) return prev;
              const speed = Math.min(dist, shipSpeed);
              return {
                x: prev.x + (dx / dist) * speed,
                y: prev.y + (dy / dist) * speed,
              };
            });
          }

          // ── Engine trail ──
          trailRef.current.push({ x: g.shipX, y: g.shipY, life: 1 });
          if (trailRef.current.length > TRAIL_LEN) trailRef.current.shift();
          // Fade trail
          for (let i = trailRef.current.length - 1; i >= 0; i--) {
            trailRef.current[i].life -= 0.06;
            if (trailRef.current[i].life <= 0) trailRef.current.splice(i, 1);
          }
          setTrail([...trailRef.current]);

          // ── Spawn asteroids ──
          if (now - lastSpawnRef.current > spawnInterval) {
            lastSpawnRef.current = now;
            setAsteroids(prev => [...prev, spawnAsteroid(g.level)]);
            spawnInterval = Math.max(300, spawnInterval - 5);
          }

          // ── Spawn power-ups ──
          if (now - lastPUSpawnRef.current > puSpawnInterval && powerUpItems.length < 2) {
            lastPUSpawnRef.current = now;
            setPowerUpItems(prev => [...prev, spawnPowerUp()]);
            puSpawnInterval = rand(PU_SPAWN_MIN, PU_SPAWN_MAX);
          }

          frameRef.current = requestAnimationFrame(tick);
        };

        frameRef.current = requestAnimationFrame(tick);
        return () => { running = false; cancelAnimationFrame(frameRef.current); };
      }, [status, level, mousePos, spawnAsteroid, spawnPowerUp, activePowerUps, powerUpItems.length]);

      // ─── Collision + scoring loop (30ms) ─────────────────────
      useEffect(() => {
        if (status !== 'playing') return;

        const interval = setInterval(() => {
          const g = gameRef.current;
          const shieldActive = activePowerUps.some(p => p.type === 'shield');

          // ── Check asteroid collisions ──
          setAsteroids(prev => {
            if (prev.length === 0) return prev;
            let newScore = g.score;
            let newLives = g.lives;
            const newExplosions = [];
            let died = false;
            let scoreThisTick = false;

            const surviving = prev.filter(ast => {
              const oob = ast.y > CH + 40;
              const hit = !shieldActive && checkCollision(ast.x, ast.y, ast.size, g.shipX, g.shipY);

              if (hit) {
                newExplosions.push({ id: Date.now() + Math.random(), x: ast.x, y: ast.y });
                newLives -= 1;
                Sound.hit();
                if (newLives <= 0) died = true;
                return false;
              }
              if (oob) {
                newScore += Math.max(1, Math.floor(ast.size / 10));
                scoreThisTick = true;
                Sound.score();
                return false;
              }
              return true;
            });

            if (newScore !== g.score) setScore(newScore);
            if (newLives !== g.lives) setLives(newLives);
            if (newExplosions.length > 0) setExplosions(prev => [...prev, ...newExplosions]);

            if (died) {
              setStatus('over');
              return [];
            }

            // Level up
            const newLevel = Math.min(20, Math.floor(newScore / 30) + 1);
            if (newLevel !== g.level) {
              setLevel(newLevel);
              Sound.levelUp();
            }

            return surviving;
          });

          // ── Check power-up collisions ──
          setPowerUpItems(prev => {
            if (prev.length === 0) return prev;
            const collected = [];
            const remaining = prev.filter(pu => {
              const hit = checkCollision(pu.x, pu.y, pu.size, g.shipX, g.shipY);
              if (hit) collected.push(pu);
              return !hit;
            });

            if (collected.length > 0) {
              Sound.powerUp();
              collected.forEach(pu => {
                if (pu.type === 'extralife') {
                  setLives(prev => Math.min(prev + 1, 5));
                } else {
                  const cfg = POWERUPS.find(p => p.type === pu.type);
                  const expiresAt = Date.now() + (cfg ? cfg.dur : 3000);
                  setActivePowerUps(prev => {
                    // Replace existing of same type
                    const filtered = prev.filter(p => p.type !== pu.type);
                    return [...filtered, { type: pu.type, expiresAt }];
                  });
                }
              });
            }

            // Remove items that fell off screen
            return remaining.filter(pu => pu.y < CH + 40);
          });

          // ── Clean up expired power-ups ──
          setActivePowerUps(prev => {
            const now = Date.now();
            return prev.filter(p => p.expiresAt > now);
          });

          // ── Clean up out-of-bounds asteroids ──
          setAsteroids(prev => prev.filter(a => a.y < CH + 60));

          // ── Shield hit (handle shield absorbing hit) ──
          // If shield is active and an asteroid hits, destroy the asteroid
          // but don't lose a life. We already check this above with shieldActive.
          // Additional: if shield is active, also destroy any asteroid close enough
          // (shield acts as a barrier)
          if (shieldActive) {
            setAsteroids(prev => {
              let changed = false;
              const result = prev.filter(ast => {
                const hit = checkCollision(ast.x, ast.y, ast.size, g.shipX, g.shipY);
                if (hit) {
                  changed = true;
                  Sound.playShield?.();
                  return false;
                }
                return true;
              });
              return changed ? result : prev;
            });
          }
        }, 33); // ~30fps

        return () => clearInterval(interval);
      }, [status, checkCollision, activePowerUps]);

      // ─── Clean up explosions ─────────────────────────────────
      useEffect(() => {
        if (explosions.length === 0) return;
        const timer = setTimeout(() => setExplosions([]), 700);
        return () => clearTimeout(timer);
      }, [explosions]);

      // ─── Check high score ────────────────────────────────────
      useEffect(() => {
        if (status === 'over' && score > highScore) {
          setHighScore(score);
          setNewRecord(true);
          localStorage.setItem('adodge_hs', score.toString());
          Sound.gameOver();
          // Re-set newRecord after a brief flash
          setTimeout(() => setNewRecord(false), 3000);
        } else if (status === 'over') {
          setNewRecord(false);
          Sound.gameOver();
        }
      }, [status]);

      // ─── Active power-up timer countdown effect ─────────────
      const [now, setNow] = useState(Date.now());
      useEffect(() => {
        if (status !== 'playing' || activePowerUps.length === 0) return;
        const timer = setInterval(() => setNow(Date.now()), 250);
        return () => clearInterval(timer);
      }, [status, activePowerUps.length]);

      // ─── Start / Restart ─────────────────────────────────────
      const startGame = useCallback(() => {
        Sound.init();
        Sound.resume();
        setScore(0);
        setLives(MAX_LIVES);
        setLevel(1);
        setAsteroids([]);
        setExplosions([]);
        setPowerUpItems([]);
        setActivePowerUps([]);
        setTrail([]);
        trailRef.current = [];
        setShipPos({ x: CW / 2, y: CH - 50 });
        setMousePos({ x: CW / 2, y: CH - 50 });
        astIdRef.current = 0;
        puIdRef.current = 0;
        lastSpawnRef.current = 0;
        lastPUSpawnRef.current = 0;
        keyboardActiveRef.current = false;
        keysRef.current.clear();
        setStatus('playing');
      }, []);

      // ─── Compute active power-up remaining time ────────────
      const getPUInfo = (p) => {
        const cfg = POWERUPS.find(c => c.type === p.type);
        if (!cfg || cfg.dur === 0) return null;
        const remaining = Math.max(0, p.expiresAt - now);
        return { ...cfg, remaining };
      };

      // ─── Render ─────────────────────────────────────────────
      return (
        <div className="game-container" tabIndex={0}>
          <Stars />

          <div
            className="game-canvas"
            ref={canvasRef}
            onMouseMove={status === 'playing' ? onMouseMove : undefined}
            onTouchMove={status === 'playing' ? onTouchMove : undefined}
            onTouchStart={status === 'playing' ? onTouchStart : undefined}
          >
            {/* HUD */}
            <div className="hud">
              <span className="score">✦ {score}</span>
              <span className="level">Lv.{level}</span>
              <span className="lives">{'♥'.repeat(lives)}{'♡'.repeat(MAX_LIVES - lives)}</span>
            </div>

            {/* Active power-up HUD */}
            {activePowerUps.length > 0 && (
              <div className="powerup-hud">
                {activePowerUps.map(p => {
                  const info = getPUInfo(p);
                  if (!info) return null;
                  const secs = (info.remaining / 1000).toFixed(1);
                  return (
                    <span key={p.type} className="pup-badge" style={{
                      '--pup-color': info.color,
                      '--pup-color-translucent': info.color + '44',
                      borderColor: info.color + '66',
                    }}>
                      {info.icon}
                      <span className="pup-timer">{secs}s</span>
                    </span>
                  );
                })}
              </div>
            )}

            {/* Engine trail */}
            {trail.map((p, i) => (
              <TrailParticle key={i} x={p.x} y={p.y} alpha={p.life * 0.5} size={3 + p.life * 2} />
            ))}

            {/* Ship */}
            {status === 'playing' && <Ship x={shipPos.x} y={shipPos.y} />}

            {/* Shield bubble */}
            {status === 'playing' && activePowerUps.some(p => p.type === 'shield') && (
              <ShieldBubble x={shipPos.x} y={shipPos.y} />
            )}

            {/* Asteroids */}
            {asteroids.map(a => (
              <Asteroid key={a.id} x={a.x} y={a.y} size={a.size} />
            ))}

            {/* Power-up items */}
            {powerUpItems.map(pu => (
              <PowerUpItem key={pu.id} x={pu.x} y={pu.y} type={pu.type} size={pu.size} />
            ))}

            {/* Explosions */}
            {explosions.map(e => (
              <Explosion key={e.id} x={e.x} y={e.y} />
            ))}

            {/* Start overlay */}
            {status === 'start' && (
              <div className="overlay">
                <h1>☄️ Asteroid Dodge</h1>
                <p>
                  Dodge asteroids and survive as long as you can!<br />
                  Collect power-ups to help you.
                </p>
                {highScore > 0 && (
                  <div className="high-score">🏆 High Score: {highScore}</div>
                )}
                <div className="controls-hint">
                  🖱️ Mouse / 🖐️ Touch / ⌨️ WASD + Arrows
                </div>
                <button className="btn" onClick={startGame}>Start Game</button>
              </div>
            )}

            {/* Game Over overlay */}
            {status === 'over' && (
              <div className="overlay">
                <h2>💥 Game Over</h2>
                <div className="final-score">Score: {score}</div>
                {highScore > 0 && (
                  <div className={`high-score ${newRecord ? 'new-record' : ''}`}>
                    {newRecord ? '🎉 NEW RECORD!' : `🏆 High Score: ${highScore}`}
                  </div>
                )}
                <p>Level reached: {level}</p>
                <button className="btn" onClick={startGame}>Play Again</button>
              </div>
            )}
          </div>

          <div className="hint">Mouse · Touch · WASD + Arrows — dodge the asteroids!</div>
        </div>
      );
    }

    // ─── Mount ─────────────────────────────────────────────────
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(<Game />);
  </script>
</body>
</html>