window.sketch = (runtime) => {
  const { c2, canvas, startFrame } = runtime;
  const renderer = new c2.Renderer(canvas);

  // City building parameters
  const buildings = [];
  const numBuildings = 40;
  const buildingWidth = 30;
  const maxHeight = 280;
  const groundY = canvas.height - 40;

  // Fire particles
  const particles = [];
  const numParticles = 300;

  // Brimstone embers
  const embers = [];
  const numEmbers = 120;

  // Initialize buildings
  for (let i = 0; i < numBuildings; i++) {
    const x = i * buildingWidth + 10;
    const height = 60 + Math.random() * maxHeight;
    const windows = [];
    const winCols = Math.floor((buildingWidth - 10) / 12);
    const winRows = Math.floor((height - 20) / 18);
    for (let r = 0; r < winRows; r++) {
      for (let c = 0; c < winCols; c++) {
        windows.push({
          x: 6 + c * 12 + Math.random() * 3,
          y: 12 + r * 18 + Math.random() * 4,
          lit: Math.random() > 0.3,
          flicker: Math.random() * 0.5 + 0.5
        });
      }
    }
    buildings.push({
      x, height, windows,
      damage: Math.random() * 0.3,
      fireIntensity: Math.random() * 0.6 + 0.2,
      collapseOffset: 0
    });
  }

  // Initialize particles (flames, smoke, debris)
  for (let i = 0; i < numParticles; i++) {
    particles.push({
      x: Math.random() * canvas.width,
      y: Math.random() * canvas.height * 0.6,
      vx: (Math.random() - 0.5) * 2,
      vy: -(Math.random() * 2 + 1),
      size: Math.random() * 12 + 4,
      life: Math.random() * 0.8 + 0.2,
      type: Math.random() > 0.6 ? 'smoke' : 'flame',
      hue: Math.random() * 40 + 10, // 10-50 degrees
      sat: 80 + Math.random() * 20,
      light: 50 + Math.random() * 30
    });
  }

  // Initialize embers (glowing orange/red dots)
  for (let i = 0; i < numEmbers; i++) {
    embers.push({
      x: Math.random() * canvas.width,
      y: Math.random() * canvas.height,
      vx: (Math.random() - 0.5) * 3,
      vy: -(Math.random() * 1.5 + 0.5),
      size: Math.random() * 5 + 2,
      life: Math.random() * 0.7 + 0.3,
      drift: Math.random() * 0.02
    });
  }

  // Simple easing helper
  const easeInOut = (t) => t * t * (3 - 2 * t);

  startFrame((frameCount) => {
    // Clear with dark fiery background
    renderer.clear('#1a0500');

    // Draw sky glow (apocalyptic backdrop)
    renderer.fill('#4a1500');
    renderer.rect(0, 0, canvas.width, canvas.height * 0.3);

    // Radial glow effect using layers (simulated with large circles)
    renderer.alpha(0.15);
    renderer.fill('#ff4500');
    renderer.circle(canvas.width / 2, canvas.height * 0.3, canvas.width * 0.6);
    renderer.alpha(0.1);
    renderer.fill('#ff6600');
    renderer.circle(canvas.width / 2, canvas.height * 0.2, canvas.width * 0.8);
    renderer.alpha(0.08);
    renderer.fill('#ffaa00');
    renderer.circle(canvas.width / 2, canvas.height * 0.15, canvas.width * 0.9);
    renderer.alpha(1.0);

    // Draw ground (scorched earth)
    renderer.fill('#2a0a00');
    renderer.rect(0, groundY, canvas.width, canvas.height - groundY);
    renderer.fill('#3a1500');
    renderer.rect(0, groundY - 5, canvas.width, 10);

    // Update and draw buildings
    for (let i = 0; i < buildings.length; i++) {
      const b = buildings[i];
      // Simulate slow collapse/lean over time
      b.collapseOffset = Math.sin(frameCount * 0.002 + i) * 2 * b.damage;
      const shakeX = Math.sin(frameCount * 0.1 + i * 2) * b.damage * 1.5;

      // Building body (dark silhouettes with fire glow)
      const r = 30 + Math.floor(30 * b.fireIntensity);
      const g = 5 + Math.floor(10 * b.fireIntensity);
      const bl = 2;
      renderer.fill(`rgb(${r},${g},${bl})`);
      renderer.rect(b.x + shakeX, groundY - b.height, buildingWidth - 5, b.height);

      // Fire glow on building edges
      renderer.alpha(0.2 * b.fireIntensity);
      renderer.fill('#ff6600');
      renderer.rect(b.x + shakeX - 3, groundY - b.height, 4, b.height);
      renderer.rect(b.x + shakeX + buildingWidth - 6, groundY - b.height, 4, b.height);
      renderer.alpha(1.0);

      // Windows with flickering light
      for (let w of b.windows) {
        const flicker = Math.sin(frameCount * 0.05 + w.x + w.y) * 0.3 + 0.7;
        if (w.lit && flicker > 0.4) {
          const intensity = flicker * (0.6 + 0.4 * Math.sin(frameCount * 0.02 + w.x * 0.1));
          renderer.fill(`rgba(255, ${Math.floor(180 * intensity)}, ${Math.floor(60 * intensity)}, ${intensity * 0.9})`);
        } else {
          // Dark window with slight orange reflection
          renderer.fill(`rgba(40, 10, 0, 0.6)`);
        }
        renderer.rect(b.x + w.x + shakeX, groundY - b.height + w.y, 6, 8);
      }

      // Rooftop flames
      if (b.fireIntensity > 0.3) {
        const flameCount = Math.floor(5 * b.fireIntensity);
        renderer.alpha(0.6);
        for (let f = 0; f < flameCount; f++) {
          const fx = b.x + shakeX + 5 + f * (buildingWidth - 15) / Math.max(flameCount - 1, 1);
          const fy = groundY - b.height - 10 - Math.sin(frameCount * 0.08 + f * 2) * 8;
          const flameSize = 8 + Math.sin(frameCount * 0.1 + f) * 4;
          renderer.fill(`hsl(${20 + f * 5}, 100%, ${55 + Math.sin(frameCount * 0.07 + f) * 10}%)`);
          renderer.circle(fx, fy, flameSize);
        }
        renderer.alpha(1.0);
      }
    }

    // Update and draw particles (fire and smoke)
    renderer.alpha(0.7);
    for (let i = 0; i < particles.length; i++) {
      const p = particles[i];
      // Update
      p.x += p.vx + Math.sin(frameCount * 0.01 + i) * 0.5;
      p.y += p.vy;
      p.vy += 0.02; // slight upward acceleration (smoke rises)
      p.life -= 0.002;
      p.size *= 0.998;

      // Respawn if dead or off-screen
      if (p.life <= 0 || p.y < -50 || p.x < -50 || p.x > canvas.width + 50) {
        p.x = Math.random() * canvas.width;
        p.y = groundY - Math.random() * 100;
        p.vy = -(Math.random() * 2 + 1);
        p.vx = (Math.random() - 0.5) * 2;
        p.life = Math.random() * 0.8 + 0.2;
        p.size = Math.random() * 12 + 4;
        p.type = Math.random() > 0.6 ? 'smoke' : 'flame';
      }

      // Draw
      if (p.type === 'flame') {
        const hue = 20 + Math.sin(frameCount * 0.02 + i) * 10;
        renderer.fill(`hsl(${hue}, 100%, ${50 + Math.sin(frameCount * 0.05 + i) * 20}%)`);
        renderer.alpha(p.life * 0.8);
        renderer.circle(p.x, p.y, p.size);
      } else {
        // smoke (dark grey with some glow)
        renderer.fill(`rgba(40, 30, 20, ${p.life * 0.3})`);
        renderer.alpha(p.life * 0.2);
        renderer.circle(p.x, p.y, p.size * 2);
      }
    }
    renderer.alpha(1.0);

    // Update and draw embers (glowing hot particles)
    renderer.alpha(0.9);
    for (let i = 0; i < embers.length; i++) {
      const e = embers[i];
      e.x += e.vx + Math.sin(frameCount * 0.01 + i) * 0.3;
      e.y += e.vy;
      e.vy += 0.01;
      e.life -= 0.003;
      e.size *= 0.999;

      if (e.life <= 0 || e.y > groundY || e.x < -20 || e.x > canvas.width + 20) {
        e.x = Math.random() * canvas.width;
        e.y = groundY - Math.random() * 200;
        e.vy = -(Math.random() * 2 + 0.5);
        e.vx = (Math.random() - 0.5) * 4;
        e.life = Math.random() * 0.8 + 0.2;
        e.size = Math.random() * 6 + 2;
      }

      const intensity = e.life;
      renderer.fill(`rgba(255, ${Math.floor(180 * intensity)}, ${Math.floor(50 * intensity)}, ${intensity * 0.9})`);
      renderer.circle(e.x, e.y, e.size);
    }
    renderer.alpha(1.0);

    // Additional drifting smoke layer (very transparent)
    renderer.alpha(0.08);
    renderer.fill('#2a1a0a');
    for (let i = 0; i < 20; i++) {
      const cx = (Math.sin(frameCount * 0.002 + i * 1.7) * 0.5 + 0.5) * canvas.width;
      const cy = canvas.height * 0.2 + Math.sin(frameCount * 0.003 + i * 2.3) * 80;
      renderer.circle(cx, cy, 120 + Math.sin(frameCount * 0.001 + i) * 40);
    }
    renderer.alpha(1.0);

    // Foreground flames (licking bottom)
    renderer.fill('#ff5500');
    renderer.alpha(0.3);
    for (let i = 0; i < 15; i++) {
      const fx = i * (canvas.width / 15) + Math.sin(frameCount * 0.05 + i) * 20;
      const fy = groundY + 10 - Math.abs(Math.sin(frameCount * 0.06 + i * 0.7)) * 30;
      renderer.circle(fx, fy, 20 + Math.sin(frameCount * 0.04 + i) * 8);
    }
    renderer.alpha(1.0);
  });
};
