window.sketch = (p) => {
  let embers = [];
  let buildings = [];

function createEmbers(n){
  for(let i = 0; i < n; i++){
    embers.push({
      x: p.random(0, p.width),
      y: p.height + 10,
      size: p.random(1, 3),
      speed: p.random(2, 60),
      color: p.color(p.random(200, 255), p.random(50, 200), 0)
    });
  }
}

  p.setup = () => {
    p.createCanvas(p.windowWidth, p.windowHeight);
    // Create skyline
    let x = 0;
    while (x < p.width) {
      let w = p.random(40, 120);
      let h = p.random(100, p.height * 0.7);
      buildings.push({ x, w, h });
      x += w + p.random(5, 20);
    }
  };

  p.draw = () => {
    p.background(20, 5, 5, 50);

    // Draw Cityscape
    p.fill(10, 5, 5);
    p.stroke(40, 10, 10);
    for (let b of buildings) {
      p.rect(b.x, p.height - b.h, b.w, b.h);
    }

    // Spawn embers/brimstone
    if (p.frameCount % 2 === 0) {
      embers.push({
        x: p.random(0, p.width),
        y: p.height + 10,
        size: p.random(2, 12),
        speed: p.random(2, 60),
        color: p.color(p.random(200, 255), p.random(50, 200), 0)
      });
    }

    createEmbers(20);

    // Update and draw embers
    p.noStroke();
    for (let i = embers.length - 1; i >= 0; i--) {
      let e = embers[i];
      e.y -= e.speed;
      e.x += Math.sin(p.frameCount * 0.05 + e.y) * 2;
      
      p.fill(e.color);
      p.ellipse(e.x, e.y, e.size);

      if (e.y < -20) embers.splice(i, 1);
    }

    // Add atmospheric glow
    p.fill(255, 60, 0, 20);
    p.rect(0, 0, p.width, p.height);
  };

  p.windowResized = () => {
    p.resizeCanvas(p.windowWidth, p.windowHeight);
  };
};
