window.sketch = (p) => {
  let buildings = [];
  let particles = [];
  let fireEmbers = [];
  let time = 0;

  p.setup = () => {
    p.createCanvas(p.windowWidth, p.windowHeight);
    // Initialize buildings
    for (let i = 0; i < 30; i++) {
      buildings.push({
        x: p.random(0, p.width),
        w: p.random(20, 60),
        h: p.random(80, 250),
        baseY: p.height - 20,
        color: p.color(p.random(40, 80), p.random(20, 50), p.random(10, 30)),
        damage: p.random(0.3, 1.0),
        hasFire: p.random() > 0.4
      });
    }
    // Sort buildings by width for depth illusion
    buildings.sort((a, b) => a.w - b.w);
    // Seed particles
    for (let i = 0; i < 200; i++) {
      spawnParticle();
    }
    for (let i = 0; i < 60; i++) {
      spawnEmber();
    }
  };

  p.draw = () => {
    p.background(10, 0, 0, 20);
    time += 0.02;

    // Draw smoky/ashy atmosphere
    p.noStroke();
    for (let i = 0; i < 5; i++) {
      let cx = p.width * (0.3 + 0.4 * p.sin(time * 0.1 + i));
      let cy = p.height * 0.2;
      let r = 200 + 100 * p.sin(time * 0.05 + i * 2);
      p.fill(30, 15, 10, 10);
      p.ellipse(cx, cy, r, r * 0.6);
    }

    // Draw ground (molten)
    p.fill(180, 40, 0, 80);
    p.rect(0, p.height - 30, p.width, 30);
    // Lava cracks
    p.stroke(255, 100, 20, 150);
    p.strokeWeight(2);
    for (let i = 0; i < 8; i++) {
      let x = i * p.width / 8 + p.sin(time * 0.5 + i) * 20;
      let y = p.height - 25 + p.sin(time * 1.2 + i * 0.7) * 8;
      p.line(x - 10, y + 5, x + 10, y - 5);
    }

    // Draw buildings
    p.noStroke();
    for (let b of buildings) {
      if (!b) continue;
      let flicker = 0.9 + 0.2 * p.sin(time * 3 + b.x);
      let r = p.red(b.color) * flicker;
      let g = p.green(b.color) * 0.7;
      let blue = p.blue(b.color) * 0.3;
      p.fill(r, g, blue, 200 * b.damage);
      let bw = b.w * (0.8 + 0.2 * p.sin(time * 0.5 + b.x));
      let bh = b.h * b.damage * (0.9 + 0.2 * p.sin(time * 1.5 + b.x * 0.1));
      let bx = b.x - bw / 2;
      let by = b.baseY - bh;
      p.rect(bx, by, bw, bh);

      // Windows (fiery glow)
      if (b.hasFire && bh > 30) {
        p.fill(255, p.random(100, 200), 20, 180);
        for (let wy = by + 12; wy < b.baseY - 15; wy += 22) {
          for (let wx = bx + 6; wx < bx + bw - 6; wx += 16) {
            let glow = 0.6 + 0.4 * p.sin(time * 2 + wx * 0.5 + wy);
            p.fill(255, 150 * glow, 30, 180 * glow);
            p.rect(wx, wy, 8, 12);
          }
        }
      }
      // Building fire streaks
      if (b.hasFire && p.random() > 0.98) {
        p.fill(255, 200, 50, 200);
        let fx = b.x + p.random(-b.w/3, b.w/3);
        let fy = b.baseY - p.random(10, bh * 0.8);
        p.rect(fx, fy, 3, 15 + p.random(20));
      }
    }

    // Update and draw particles (smoke & debris)
    for (let i = particles.length - 1; i >= 0; i--) {
      let pt = particles[i];
      if (!pt) continue;
      pt.x += pt.vx;
      pt.y += pt.vy;
      pt.vy -= 0.02; // rise
      pt.life -= 0.003;
      pt.size *= 0.997;
      if (pt.life <= 0 || pt.y < -50 || pt.size < 0.5) {
        particles.splice(i, 1);
        spawnParticle();
        continue;
      }
      p.noStroke();
      p.fill(60, 40, 30, pt.life * 100);
      p.ellipse(pt.x, pt.y, pt.size, pt.size * 0.8);
    }

    // Draw embers
    for (let i = fireEmbers.length - 1; i >= 0; i--) {
      let em = fireEmbers[i];
      if (!em) continue;
      em.x += em.vx;
      em.y += em.vy;
      em.vy -= 0.008;
      em.life -= 0.005;
      em.size *= 0.995;
      if (em.life <= 0 || em.y < -20) {
        fireEmbers.splice(i, 1);
        spawnEmber();
        continue;
      }
      let alpha = em.life * 255;
      p.noStroke();
      p.fill(255, 180 * em.life, 40, alpha);
      p.ellipse(em.x, em.y, em.size, em.size);
      // Glow
      p.fill(255, 100, 20, alpha * 0.3);
      p.ellipse(em.x, em.y, em.size * 3, em.size * 3);
    }

    // Sky rain of fire
    p.noStroke();
    for (let i = 0; i < 3; i++) {
      let fx = p.random(p.width);
      let fy = p.random(p.height * 0.3);
      p.fill(255, 200, 50, 150);
      p.triangle(fx, fy, fx - 4, fy + 18, fx + 4, fy + 18);
      p.fill(255, 100, 0, 100);
      p.ellipse(fx, fy + 18, 12, 6);
    }

    // Occasionally spawn extra embers
    if (p.frameCount % 3 === 0 && fireEmbers.length < 200) {
      spawnEmber();
    }
    if (p.frameCount % 2 === 0 && particles.length < 300) {
      spawnParticle();
    }
  };

  function spawnParticle() {
    particles.push({
      x: p.random(p.width),
      y: p.height - 30 - p.random(50),
      vx: p.random(-0.3, 0.3),
      vy: p.random(-0.2, -0.5),
      size: p.random(15, 50),
      life: 0.6 + p.random(0.4)
    });
  }

  function spawnEmber() {
    fireEmbers.push({
      x: p.random(p.width),
      y: p.height - 20 - p.random(100),
      vx: p.random(-0.5, 0.5),
      vy: p.random(-0.3, -0.8),
      size: p.random(3, 12),
      life: 0.7 + p.random(0.3)
    });
  }

  p.windowResized = () => {
    p.resizeCanvas(p.windowWidth, p.windowHeight);
    // Redistribute buildings to new width
    for (let b of buildings) {
      if (b) b.x = p.random(0, p.width);
    }
  };
};
