`79340ef`

expand on phases, game loop

Authored by

espadonne 8 months ago

SHA: 79340ef8e8cf418a0fe18106ee23f7c31278076e
Parents: 503d6d2
Tree: a0b5340

3 changed files

Status	File	+	-
M	`index.html`	59	2
M	`js/entities.js`	603	604
M	`js/game.js`	1457	53

index.htmlmodified

          <div id="info">
              Click to jump • Space to spin web • Shift to munch!<br>
              Web Strands: <span id="strand-count">0</span><br>
 -            Flies Caught: <span id="flies-caught">0</span> | Munched: <span id="flies-munched">0</span>
 +            Flies Caught: <span id="flies-caught">0</span> | Munched: <span id="flies-munched">0</span><br>
 +            Total Score: <span id="total-score">0</span>
          </div>
          <div id="phase-indicator">
              <span id="phase">DUSK</span><br>
 -            <span id="timer"></span>
 +            <span id="timer"></span><br>
 +            <span id="night-counter" style="font-size: 14px; color: #FFD700;">Night 1</span>
          </div>
          <div id="web-meter-label">SILK</div>
          <div id="web-meter">
              <div id="web-meter-fill"></div>
          </div>
      </div>
++
 +    <!-- PHASE 5: Stats & Skins Panel -->
 +    <div id="stats-panel" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
 +                                  background: rgba(20, 20, 40, 0.95); border: 3px solid #87CEEB; border-radius: 20px;
 +                                  padding: 30px; color: white; z-index: 100; min-width: 500px; max-width: 700px; max-height: 80vh; overflow-y: auto;">
 +        <h2 style="text-align: center; color: #87CEEB; margin-top: 0;">📊 Statistics & Skins 📊</h2>
++
 +        <div id="stats-content" style="margin-bottom: 20px;">
 +            <h3 style="color: #FFD700;">Lifetime Stats</h3>
 +            <div id="stats-list" style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;"></div>
 +        </div>
++
 +        <div id="skins-content" style="margin-bottom: 20px;">
 +            <h3 style="color: #FFD700;">Spider Skins</h3>
 +            <div id="skins-list" style="display: flex; gap: 15px; flex-wrap: wrap; justify-content: center;"></div>
 +        </div>
++
 +        <div id="achievements-content">
 +            <h3 style="color: #FFD700;">Achievements</h3>
 +            <div id="achievements-list" style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-height: 200px; overflow-y: auto;"></div>
 +        </div>
++
 +        <button id="close-stats-btn" style="width: 100%; padding: 15px; font-size: 18px; margin-top: 20px;
 +                                            background: #87CEEB; color: #000; border: none;
 +                                            border-radius: 10px; cursor: pointer; font-weight: bold;">
 +            Close
 +        </button>
 +    </div>
++
 +    <!-- PHASE 3: Upgrade Shop -->
 +    <div id="upgrade-shop" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
 +                                   background: rgba(20, 20, 40, 0.95); border: 3px solid #FFD700; border-radius: 20px;
 +                                   padding: 30px; color: white; z-index: 100; min-width: 400px; max-width: 600px;">
 +        <h2 style="text-align: center; color: #FFD700; margin-top: 0;">🕷️ Spider Upgrades 🕷️</h2>
 +        <div id="shop-points" style="text-align: center; font-size: 20px; margin-bottom: 20px;">
 +            Points Available: <span id="available-points">0</span>
 +        </div>
++
 +        <div id="tier1-upgrades" style="margin-bottom: 20px;">
 +            <h3 style="color: #87CEEB;">Tier 1 Upgrades</h3>
 +            <div id="upgrade-list-tier1"></div>
 +        </div>
++
 +        <div id="tier2-upgrades" style="margin-bottom: 20px; opacity: 0.5;">
 +            <h3 style="color: #FFB6C1;">Tier 2 Upgrades (Unlock Tier 1 First)</h3>
 +            <div id="upgrade-list-tier2"></div>
 +        </div>
++
 +        <button id="continue-btn" style="width: 100%; padding: 15px; font-size: 18px;
 +                                        background: #FFD700; color: #000; border: none;
 +                                        border-radius: 10px; cursor: pointer; font-weight: bold;">
 +            Continue to Next Night
 +        </button>
 +    </div>
++
      <script src="js/physics.js"></script>
      <script src="js/entities.js"></script>
      <script src="js/game.js"></script>

js/entities.jsmodified

1804 lines changed — click to load

  // entities.js - All game entity classes
  class Spider {
 -  constructor (x, y) {
 -    this.pos = createVector(x, y)
 -    this.vel = createVector(0, 0)
 -    this.acc = createVector(0, 0)
 -    this.radius = 8
 -    this.isAirborne = false
 -    this.canJump = true
 -    this.lastAnchorPoint = null
 -    this.gravity = createVector(0, 0.3)
 -    this.jumpPower = 12
 -    this.maxSpeed = 15
 -    this.munchRadius = 20
 -    this.munchCooldown = 0
 -    this.attachedObstacle = null // Track which obstacle spider is on
 +  constructor(x, y) {
 +    this.pos = createVector(x, y);
 +    this.vel = createVector(0, 0);
 +    this.acc = createVector(0, 0);
 +    this.radius = 8;
 +    this.isAirborne = false;
 +    this.canJump = true;
 +    this.lastAnchorPoint = null;
 +    this.gravity = createVector(0, 0.3);
 +    this.jumpPower = 12;
 +    this.maxSpeed = 15;
 +    this.munchRadius = 20;
 +    this.munchCooldown = 0;
 +    this.attachedObstacle = null; // Track which obstacle spider is on
+   }
    jump(targetX, targetY) {
+     }
+   }
 -  munch () {
 -    if (this.munchCooldown > 0) return
 +  munch() {
 +    if (this.munchCooldown > 0) return;
 -    isMunching = true
 -    this.munchCooldown = 30
 +    isMunching = true;
 +    this.munchCooldown = 30;
      for (let i = flies.length - 1; i >= 0; i--) {
 -      let fly = flies[i]
 -      let d = dist(this.pos.x, this.pos.y, fly.pos.x, fly.pos.y)
 +      let fly = flies[i];
 +      let d = dist(this.pos.x, this.pos.y, fly.pos.x, fly.pos.y);
        if (d < this.munchRadius) {
 -        fliesMunched++
 -        webSilk = min(webSilk + 15, maxWebSilk)
 +        fliesMunched++;
 +        webSilk = min(webSilk + 15, maxWebSilk);
          for (let j = 0; j < 12; j++) {
 -          let p = new Particle(fly.pos.x, fly.pos.y)
 -          p.color = color(255, random(100, 255), 0)
 -          particles.push(p)
 +          let p = new Particle(fly.pos.x, fly.pos.y);
 +          p.color = color(255, random(100, 255), 0);
 +          particles.push(p);
+         }
 -        flies.splice(i, 1)
 -        break
 +        flies.splice(i, 1);
 +        break;
+       }
+     }
+   }
 -  update () {
 +  update() {
      // If attached to a moving obstacle, move with it
      if (this.attachedObstacle && !this.isAirborne) {
        // Calculate angle from obstacle center to spider
 -      let angle = atan2(this.pos.y - this.attachedObstacle.y, this.pos.x - this.attachedObstacle.x)
 +      let angle = atan2(this.pos.y - this.attachedObstacle.y, this.pos.x - this.attachedObstacle.x);
        // Keep spider on the surface of the obstacle
 -      this.pos.x = this.attachedObstacle.x + cos(angle) * (this.attachedObstacle.radius + this.radius)
 -      this.pos.y = this.attachedObstacle.y + sin(angle) * (this.attachedObstacle.radius + this.radius)
 +      this.pos.x = this.attachedObstacle.x + cos(angle) * (this.attachedObstacle.radius + this.radius);
 +      this.pos.y = this.attachedObstacle.y + sin(angle) * (this.attachedObstacle.radius + this.radius);
+     }
      if (this.isAirborne) {
 -      this.acc.add(this.gravity)
 -      this.attachedObstacle = null // Clear attachment when jumping
 +      this.acc.add(this.gravity);
 +      this.attachedObstacle = null; // Clear attachment when jumping
+     }
 -    this.vel.add(this.acc)
 -    this.vel.limit(this.maxSpeed)
 -    this.pos.add(this.vel)
 -    this.acc.mult(0)
 +    this.vel.add(this.acc);
 +    this.vel.limit(this.maxSpeed);
 +    this.pos.add(this.vel);
 +    this.acc.mult(0);
      if (this.munchCooldown > 0) {
 -      this.munchCooldown--
 +      this.munchCooldown--;
        if (this.munchCooldown === 0) {
 -        isMunching = false
 +        isMunching = false;
+       }
+     }
      // Check ground collision
      if (this.pos.y >= height - this.radius) {
 -      this.pos.y = height - this.radius
 -      this.land()
 -      this.attachedObstacle = null
 +      this.pos.y = height - this.radius;
 +      this.land();
 +      this.attachedObstacle = null;
+     }
      // Check wall collisions
      if (this.pos.x <= this.radius || this.pos.x >= width - this.radius) {
 -      this.pos.x = constrain(this.pos.x, this.radius, width - this.radius)
 -      this.vel.x *= -0.5
 +      this.pos.x = constrain(this.pos.x, this.radius, width - this.radius);
 +      this.vel.x *= -0.5;
+     }
      // Check ceiling
      if (this.pos.y <= this.radius) {
 -      this.pos.y = this.radius
 -      this.vel.y *= -0.5 // Bounce off ceiling, don't land
 +      this.pos.y = this.radius;
 +      this.vel.y *= -0.5; // Bounce off ceiling, don't land
+     }
      // Check home branch collision (one-way platform)
      if (window.homeBranch && this.isAirborne && this.vel.y > 0.1) {
        // Only when actually falling
 -      let branch = window.homeBranch
 +      let branch = window.homeBranch;
        // Check if spider is within branch X range
 -      let branchStart = Math.min(branch.startX, branch.endX)
 -      let branchEnd = Math.max(branch.startX, branch.endX)
 +      let branchStart = Math.min(branch.startX, branch.endX);
 +      let branchEnd = Math.max(branch.startX, branch.endX);
        // Since the branch angle is very small (0.05 radians ≈ 3 degrees),
        // we can use a simpler approximation
        if (this.pos.x >= branchStart - 10 && this.pos.x <= branchEnd + 10) {
          // Calculate position along branch (0 to 1)
 -        let t = (this.pos.x - branchStart) / (branchEnd - branchStart)
 -        t = constrain(t, 0, 1)
 +        let t = (this.pos.x - branchStart) / (branchEnd - branchStart);
 +        t = constrain(t, 0, 1);
          // Branch visual thickness tapers from full at start to 35% at end
          // This matches exactly how it's drawn in the bezier curves
            branch.thickness * 0.9,
            branch.thickness * 0.35,
+           t
 -        )
 +        );
          // The branch is drawn centered at branch.y
          // With small angle approximation: the top of the branch is at
 -        let branchSurfaceY = branch.y - branchTopThickness
 +        let branchSurfaceY = branch.y - branchTopThickness;
          // Add slight angle correction (for small angles, tan ≈ sin ≈ angle in radians)
 -        let angleCorrection = (this.pos.x - branchStart) * branch.angle
 -        branchSurfaceY += angleCorrection
 +        let angleCorrection = (this.pos.x - branchStart) * branch.angle;
 +        branchSurfaceY += angleCorrection;
          // Check if spider is crossing the branch from above
 -        let prevY = this.pos.y - this.vel.y
 +        let prevY = this.pos.y - this.vel.y;
          if (
            prevY <= branchSurfaceY && // Was above
            // Not too far below
            // Place spider on the branch surface
 -          this.pos.y = branchSurfaceY - this.radius
 -          this.land()
 -          this.attachedObstacle = null
 +          this.pos.y = branchSurfaceY - this.radius;
 +          this.land();
 +          this.attachedObstacle = null;
+         }
+       }
+     }
      // Check obstacle collisions
      for (let obstacle of obstacles) {
        if (this.checkObstacleCollision(obstacle)) {
 -        this.landOnObstacle(obstacle)
 +        this.landOnObstacle(obstacle);
+       }
+     }
      // Check web strand collisions
      for (let strand of webStrands) {
 -      if (strand === currentStrand) continue
 +      if (strand === currentStrand) continue;
        if (this.isAirborne && this.checkStrandCollision(strand)) {
 -        this.landOnStrand(strand)
 +        this.landOnStrand(strand);
+       }
+     }
      // Check food box collisions
      for (let i = foodBoxes.length - 1; i >= 0; i--) {
 -      let box = foodBoxes[i]
 +      let box = foodBoxes[i];
        if (
          dist(this.pos.x, this.pos.y, box.pos.x, box.pos.y) <
          this.radius + box.radius
        ) {
 -        box.collect()
 -        foodBoxes.splice(i, 1)
 +        box.collect();
 +        foodBoxes.splice(i, 1);
+       }
+     }
+   }
 -  checkObstacleCollision (obstacle) {
 -    let d = dist(this.pos.x, this.pos.y, obstacle.x, obstacle.y)
 -    return d < this.radius + obstacle.radius
 +  checkObstacleCollision(obstacle) {
 +    let d = dist(this.pos.x, this.pos.y, obstacle.x, obstacle.y);
 +    return d < this.radius + obstacle.radius;
+   }
 -  checkStrandCollision (strand) {
 +  checkStrandCollision(strand) {
      if (!strand || !strand.start || !strand.end) return false;
      let d = this.pointToLineDistance(this.pos, strand.start, strand.end);
      return d < this.radius + 2;
+   }
 -  pointToLineDistance (point, lineStart, lineEnd) {
 +  pointToLineDistance(point, lineStart, lineEnd) {
      // Guard nulls
      if (!lineStart || !lineEnd) {
        return Infinity;
      return p5.Vector.dist(point, closestPoint);
+   }
 -  landOnObstacle (obstacle) {
 +  landOnObstacle(obstacle) {
      // Only land if we're actually airborne
      if (!this.isAirborne) return;
 -    let angle = atan2(this.pos.y - obstacle.y, this.pos.x - obstacle.x)
 -    this.pos.x = obstacle.x + cos(angle) * (obstacle.radius + this.radius)
 -    this.pos.y = obstacle.y + sin(angle) * (obstacle.radius + this.radius)
 -    this.attachedObstacle = obstacle // Track which obstacle we're on
 -    this.land()
 +    let angle = atan2(this.pos.y - obstacle.y, this.pos.x - obstacle.x);
 +    this.pos.x = obstacle.x + cos(angle) * (obstacle.radius + this.radius);
 +    this.pos.y = obstacle.y + sin(angle) * (obstacle.radius + this.radius);
 +    this.attachedObstacle = obstacle; // Track which obstacle we're on
 +    this.land();
+   }
 -  landOnStrand (strand) {
 +  landOnStrand(strand) {
      // Only land if we're actually airborne
      if (!this.isAirborne) return;
      if (!strand || !strand.start || !strand.end) return;
      this.land();
+   }
 -  land () {
 -    this.vel.mult(0)
 -    this.isAirborne = false
 -    this.canJump = true
 +  land() {
 +    this.vel.mult(0);
 +    this.isAirborne = false;
 +    this.canJump = true;
      if (currentStrand && isDeployingWeb && (spacePressed || touchHolding)) {
        // Ensure the strand has a valid end and a final node on landing
        webNodes.push(new WebNode(this.pos.x, this.pos.y));
+     }
 -    currentStrand = null
 -    isDeployingWeb = false
 +    currentStrand = null;
 +    isDeployingWeb = false;
+   }
 -  display () {
 -    push()
 -    translate(this.pos.x, this.pos.y)
 +  display() {
 +    push();
 +    translate(this.pos.x, this.pos.y);
      if (isMunching && this.munchCooldown > 15) {
 -      push()
 -      fill(255, 100, 100, 150)
 -      noStroke()
 -      let munchSize = 15 + sin(frameCount * 0.5) * 5
 -      arc(0, 0, munchSize, munchSize, 0, PI + HALF_PI, PIE)
 -      pop()
 +      push();
 +      fill(255, 100, 100, 150);
 +      noStroke();
 +      let munchSize = 15 + sin(frameCount * 0.5) * 5;
 +      arc(0, 0, munchSize, munchSize, 0, PI + HALF_PI, PIE);
 +      pop();
+     }
 -    fill(20)
 -    stroke(0)
 -    strokeWeight(1)
 -    ellipse(0, 0, this.radius * 2)
 +    fill(20);
 +    stroke(0);
 +    strokeWeight(1);
 +    ellipse(0, 0, this.radius * 2);
 -    fill(40)
 -    noStroke()
 -    ellipse(0, -2, this.radius * 1.2, this.radius * 1.5)
 +    fill(40);
 +    noStroke();
 +    ellipse(0, -2, this.radius * 1.2, this.radius * 1.5);
      if (gamePhase === 'NIGHT') {
 -      fill(255, 100, 100)
 +      fill(255, 100, 100);
      } else {
 -      fill(255, 0, 0)
 +      fill(255, 0, 0);
+     }
 -    ellipse(-3, -3, 3)
 -    ellipse(3, -3, 3)
 +    ellipse(-3, -3, 3);
 +    ellipse(3, -3, 3);
 -    stroke(0)
 -    strokeWeight(1.5)
 +    stroke(0);
 +    strokeWeight(1.5);
      for (let i = 0; i < 4; i++) {
 -      let angle = PI / 6 + (i * PI) / 8
 -      line(0, 0, cos(angle) * 12, sin(angle) * 8)
 -      line(0, 0, -cos(angle) * 12, sin(angle) * 8)
 +      let angle = PI / 6 + (i * PI) / 8;
 +      line(0, 0, cos(angle) * 12, sin(angle) * 8);
 +      line(0, 0, -cos(angle) * 12, sin(angle) * 8);
+     }
      if (webSilk < 20) {
 -      fill(255, 100, 100, 150 + sin(frameCount * 0.2) * 50)
 -      noStroke()
 -      ellipse(0, -15, 8)
 +      fill(255, 100, 100, 150 + sin(frameCount * 0.2) * 50);
 +      noStroke();
 +      ellipse(0, -15, 8);
+     }
 -    pop()
 +    pop();
+   }
+ }
  class Fly {
 -  constructor () {
 +  constructor() {
      if (random() < 0.5) {
        this.pos = createVector(
          random() < 0.5 ? -20 : width + 20,
          random(50, height - 100)
 -      )
 +      );
      } else {
 -      this.pos = createVector(random(width), random() < 0.5 ? -20 : height + 20)
 +      this.pos = createVector(random(width), random() < 0.5 ? -20 : height + 20);
+     }
 -    this.vel = createVector(random(-2, 2), random(-1, 1))
 -    this.acc = createVector(0, 0)
 -    this.radius = 4
 -    this.caught = false
 -    this.stuck = false
 -    this.wingPhase = random(TWO_PI)
 -    this.wanderAngle = random(TWO_PI)
 -    this.glowIntensity = random(150, 255)
 -    this.touchedStrands = new Set()
 -    this.slowedBy = new Set() // Track which strands are slowing us
 -    this.baseSpeed = 3
 -    this.currentSpeed = this.baseSpeed
 +    this.vel = createVector(random(-2, 2), random(-1, 1));
 +    this.acc = createVector(0, 0);
 +    this.radius = 4;
 +    this.caught = false;
 +    this.stuck = false;
 +    this.wingPhase = random(TWO_PI);
 +    this.wanderAngle = random(TWO_PI);
 +    this.glowIntensity = random(150, 255);
 +    this.touchedStrands = new Set();
 +    this.slowedBy = new Set(); // Track which strands are slowing us
 +    this.baseSpeed = 3;
 +    this.currentSpeed = this.baseSpeed;
+   }
 -  update () {
 +  update() {
      if (this.stuck) {
        // If stuck, check if we need to move with a drifting web
 -      this.updatePositionOnWeb()
 -      return
 +      this.updatePositionOnWeb();
 +      return;
+     }
      if (this.caught) {
 -      this.vel.mult(0.95)
 +      this.vel.mult(0.95);
        if (this.vel.mag() < 0.1) {
 -        this.stuck = true
 -        fliesCaught++
 -        webSilk = min(webSilk + 5, maxWebSilk)
 +        this.stuck = true;
 +        fliesCaught++;
 +        webSilk = min(webSilk + 5, maxWebSilk);
+       }
        // While caught but not yet stuck, also follow the web
 -      this.updatePositionOnWeb()
 -      return
 +      this.updatePositionOnWeb();
 +      return;
+     }
 -    this.wanderAngle += random(-0.3, 0.3)
 -    let wanderForce = createVector(cos(this.wanderAngle), sin(this.wanderAngle))
 -    wanderForce.mult(0.1)
 -    this.acc.add(wanderForce)
 +    this.wanderAngle += random(-0.3, 0.3);
 +    let wanderForce = createVector(cos(this.wanderAngle), sin(this.wanderAngle));
 +    wanderForce.mult(0.1);
 +    this.acc.add(wanderForce);
      // Apply current speed (which may be slowed)
 -    this.vel.add(this.acc)
 -    this.vel.limit(this.currentSpeed)
 -    this.pos.add(this.vel)
 -    this.acc.mult(0)
 +    this.vel.add(this.acc);
 +    this.vel.limit(this.currentSpeed);
 +    this.pos.add(this.vel);
 +    this.acc.mult(0);
 -    if (this.pos.x < -30) this.pos.x = width + 30
 -    if (this.pos.x > width + 30) this.pos.x = -30
 -    if (this.pos.y < -30) this.pos.y = height + 30
 -    if (this.pos.y > height + 30) this.pos.y = -30
 +    if (this.pos.x < -30) this.pos.x = width + 30;
 +    if (this.pos.x > width + 30) this.pos.x = -30;
 +    if (this.pos.y < -30) this.pos.y = height + 30;
 +    if (this.pos.y > height + 30) this.pos.y = -30;
      // Check web collisions
 -    this.checkWebCollisions()
 +    this.checkWebCollisions();
+   }
    updatePositionOnWeb() {
      // Find the web strand(s) this fly is attached to
      for (let strand of webStrands) {
 -      if (strand.broken) continue
 +      if (strand.broken) continue;
        // Check if fly is on this strand
 -      let closestPoint = null
 -      let closestDistance = Infinity
 +      let closestPoint = null;
 +      let closestDistance = Infinity;
        if (strand.path && strand.path.length > 1) {
          for (let i = 0; i < strand.path.length - 1; i++) {
 -          let p1 = strand.path[i]
 -          let p2 = strand.path[i + 1]
 +          let p1 = strand.path[i];
 +          let p2 = strand.path[i + 1];
            // Find closest point on this segment
 -          let line = p5.Vector.sub(p2, p1)
 -          let lineLength = line.mag()
 -          if (lineLength === 0) continue
 -          line.normalize()
 +          let line = p5.Vector.sub(p2, p1);
 +          let lineLength = line.mag();
 +          if (lineLength === 0) continue;
 +          line.normalize();
 -          let pointToStart = p5.Vector.sub(this.pos, p1)
 -          let projLength = constrain(pointToStart.dot(line), 0, lineLength)
 +          let pointToStart = p5.Vector.sub(this.pos, p1);
 +          let projLength = constrain(pointToStart.dot(line), 0, lineLength);
 -          let projPoint = p5.Vector.add(p1, p5.Vector.mult(line, projLength))
 -          let d = p5.Vector.dist(this.pos, projPoint)
 +          let projPoint = p5.Vector.add(p1, p5.Vector.mult(line, projLength));
 +          let d = p5.Vector.dist(this.pos, projPoint);
            if (d < closestDistance && d < this.radius + 5) {
 -            closestDistance = d
 -            closestPoint = projPoint
 +            closestDistance = d;
 +            closestPoint = projPoint;
+           }
+         }
+       }
        // If we found a close point on this strand, stick to it
        if (closestPoint) {
          // Move fly to follow the strand's movement
 -        this.pos.x = closestPoint.x
 -        this.pos.y = closestPoint.y
 +        this.pos.x = closestPoint.x;
 +        this.pos.y = closestPoint.y;
          // Add small vibration when on a moving web
          if (strand.vibration > 0) {
 -          this.pos.x += random(-1, 1) * strand.vibration * 0.1
 -          this.pos.y += random(-1, 1) * strand.vibration * 0.1
 +          this.pos.x += random(-1, 1) * strand.vibration * 0.1;
 +          this.pos.y += random(-1, 1) * strand.vibration * 0.1;
+         }
+       }
+     }
+   }
 -  checkWebCollisions () {
 -    let currentlyTouching = new Set()
 +  checkWebCollisions() {
 +    let currentlyTouching = new Set();
      for (let strand of webStrands) {
 -      let touching = false
 +      let touching = false;
        // Check collision with strand path
        if (strand.path && strand.path.length > 1) {
          for (let i = 0; i < strand.path.length - 1; i++) {
 -          let p1 = strand.path[i]
 -          let p2 = strand.path[i + 1]
 -          let d = this.pointToLineDistance(this.pos, p1, p2)
 +          let p1 = strand.path[i];
 +          let p2 = strand.path[i + 1];
 +          let d = this.pointToLineDistance(this.pos, p1, p2);
            if (d < this.radius + 3) {
 -            touching = true
 -            break
 +            touching = true;
 +            break;
+           }
+         }
        } else if (strand.start && strand.end) {
          // Fallback for strands without path
 -        let d = this.pointToLineDistance(this.pos, strand.start, strand.end)
 +        let d = this.pointToLineDistance(this.pos, strand.start, strand.end);
          if (d < this.radius + 3) {
 -          touching = true
 +          touching = true;
+         }
+       }
        if (touching) {
 -        currentlyTouching.add(strand)
 +        currentlyTouching.add(strand);
          // If this is a new strand we're touching
          if (!this.touchedStrands.has(strand)) {
 -          this.touchedStrands.add(strand)
 +          this.touchedStrands.add(strand);
            // Vibrate the web when first touching
 -          strand.vibrate(3)
 +          strand.vibrate(3);
            // First strand slows us down
            if (this.touchedStrands.size === 1) {
 -            this.currentSpeed = this.baseSpeed * 0.4 // Slow to 40% speed
 -            this.slowedBy.add(strand)
 +            this.currentSpeed = this.baseSpeed * 0.4; // Slow to 40% speed
 +            this.slowedBy.add(strand);
              // Visual feedback - yellow particles for slowing
              for (let j = 0; j < 3; j++) {
 -              let p = new Particle(this.pos.x, this.pos.y)
 -              p.color = color(255, 255, 0, 150)
 -              p.vel = createVector(random(-1, 1), random(-1, 1))
 -              p.size = 3
 -              particles.push(p)
 +              let p = new Particle(this.pos.x, this.pos.y);
 +              p.color = color(255, 255, 0, 150);
 +              p.vel = createVector(random(-1, 1), random(-1, 1));
 +              p.size = 3;
 +              particles.push(p);
+             }
+           }
            // Second strand catches us
            else if (this.touchedStrands.size >= 2 && !this.caught) {
 -            this.caught = true
 -            this.currentSpeed = 0
 +            this.caught = true;
 +            this.currentSpeed = 0;
              // Stronger vibration when caught
 -            strand.vibrate(8)
 +            strand.vibrate(8);
              // Also vibrate nearby strands
              for (let otherStrand of webStrands) {
                      otherStrand.start.y,
                      touchedStrand.start.x,
                      touchedStrand.start.y
 -                  )
 +                  );
                    let d2 = dist(
                      otherStrand.start.x,
                      otherStrand.start.y,
                      touchedStrand.end.x,
                      touchedStrand.end.y
 -                  )
 +                  );
                    let d3 = dist(
                      otherStrand.end.x,
                      otherStrand.end.y,
                      touchedStrand.start.x,
                      touchedStrand.start.y
 -                  )
 +                  );
                    let d4 = dist(
                      otherStrand.end.x,
                      otherStrand.end.y,
                      touchedStrand.end.x,
                      touchedStrand.end.y
 -                  )
 +                  );
                    if (min(d1, d2, d3, d4) < 50) {
 -                    otherStrand.vibrate(2)
 -                    break
 +                    otherStrand.vibrate(2);
 +                    break;
+                   }
+                 }
+               }
              // Create caught particles
              for (let j = 0; j < 6; j++) {
 -              let p = new Particle(this.pos.x, this.pos.y)
 -              p.color = color(255, 200, 0, 200)
 -              p.vel = createVector(random(-2, 2), random(-2, 2))
 -              particles.push(p)
 +              let p = new Particle(this.pos.x, this.pos.y);
 +              p.color = color(255, 200, 0, 200);
 +              p.vel = createVector(random(-2, 2), random(-2, 2));
 +              particles.push(p);
+             }
+           }
+         }
      // If we're no longer touching strands we were slowed by, speed back up
      if (this.slowedBy.size > 0 && currentlyTouching.size === 0) {
 -      this.currentSpeed = this.baseSpeed
 -      this.slowedBy.clear()
 +      this.currentSpeed = this.baseSpeed;
 +      this.slowedBy.clear();
+     }
+   }
 -  pointToLineDistance (point, lineStart, lineEnd) {
 -    let line = p5.Vector.sub(lineEnd, lineStart)
 -    let lineLength = line.mag()
 -    line.normalize()
 +  pointToLineDistance(point, lineStart, lineEnd) {
 +    let line = p5.Vector.sub(lineEnd, lineStart);
 +    let lineLength = line.mag();
 +    line.normalize();
 -    let pointToStart = p5.Vector.sub(point, lineStart)
 -    let projLength = constrain(pointToStart.dot(line), 0, lineLength)
 +    let pointToStart = p5.Vector.sub(point, lineStart);
 +    let projLength = constrain(pointToStart.dot(line), 0, lineLength);
      let closestPoint = p5.Vector.add(
        lineStart,
        p5.Vector.mult(line, projLength)
 -    )
 -    return p5.Vector.dist(point, closestPoint)
 +    );
 +    return p5.Vector.dist(point, closestPoint);
+   }
 -  display () {
 -    push()
 -    translate(this.pos.x, this.pos.y)
 +  display() {
 +    push();
 +    translate(this.pos.x, this.pos.y);
      // Show slowdown effect
      if (this.slowedBy.size > 0 && !this.caught) {
 -      stroke(255, 255, 0, 100)
 -      strokeWeight(1)
 -      noFill()
 -      ellipse(0, 0, 20)
 +      stroke(255, 255, 0, 100);
 +      strokeWeight(1);
 +      noFill();
 +      ellipse(0, 0, 20);
+     }
      if (gamePhase === 'NIGHT') {
 -      noStroke()
 -      fill(255, 255, 150, this.glowIntensity * 0.3)
 -      ellipse(0, 0, 30)
 -      fill(255, 255, 100, this.glowIntensity * 0.5)
 -      ellipse(0, 0, 20)
 +      noStroke();
 +      fill(255, 255, 150, this.glowIntensity * 0.3);
 +      ellipse(0, 0, 30);
 +      fill(255, 255, 100, this.glowIntensity * 0.5);
 +      ellipse(0, 0, 20);
+     }
 -    fill(30)
 -    stroke(0)
 -    strokeWeight(0.5)
 -    ellipse(0, 0, this.radius * 2)
 +    fill(30);
 +    stroke(0);
 +    strokeWeight(0.5);
 +    ellipse(0, 0, this.radius * 2);
      if (!this.stuck) {
 -      this.wingPhase += 0.5
        // Wing animation slows down when slowed
 -      let wingSpeed = this.slowedBy.size > 0 ? 0.25 : 0.5
 -      this.wingPhase += wingSpeed
 -      let wingSpread = sin(this.wingPhase) * 5
+-
 -      fill(255, 255, 255, 150)
 -      noStroke()
 -      ellipse(-wingSpread, 0, 6, 4)
 -      ellipse(wingSpread, 0, 6, 4)
 +      let wingSpeed = this.slowedBy.size > 0 ? 0.25 : 0.5;
 +      this.wingPhase += wingSpeed;
 +      let wingSpread = sin(this.wingPhase) * 5;
++
 +      fill(255, 255, 255, 150);
 +      noStroke();
 +      ellipse(-wingSpread, 0, 6, 4);
 +      ellipse(wingSpread, 0, 6, 4);
+     }
      if (gamePhase === 'NIGHT') {
 -      fill(255, 255, 100, this.glowIntensity)
 -      noStroke()
 -      ellipse(0, 2, 3)
 +      fill(255, 255, 100, this.glowIntensity);
 +      noStroke();
 +      ellipse(0, 2, 3);
+     }
 -    pop()
 +    pop();
+   }
+ }
  class Obstacle {
 -  constructor (x, y, radius, type) {
 +  constructor(x, y, radius, type) {
      // Store original position for drift tracking
 -    this.originalX = x
 -    this.originalY = y
 -    this.x = x
 -    this.y = y
 -    this.radius = radius
 -    this.type = type || 'leaf'
 -    this.rotation = random(TWO_PI)
 -    this.leafPoints = []
 +    this.originalX = x;
 +    this.originalY = y;
 +    this.x = x;
 +    this.y = y;
 +    this.radius = radius;
 +    this.type = type || 'leaf';
 +    this.rotation = random(TWO_PI);
 +    this.leafPoints = [];
      // Movement properties for all types
 -    this.bobOffset = random(TWO_PI)
 -    this.bobSpeed = random(0.02, 0.04)
 -    this.bobAmount = 0
 +    this.bobOffset = random(TWO_PI);
 +    this.bobSpeed = random(0.02, 0.04);
 +    this.bobAmount = 0;
      // Type-specific initialization
      if (this.type === 'balloon') {
 -      this.bobAmount = 8 // Balloons bob more
 +      this.bobAmount = 8; // Balloons bob more
        this.balloonColors = [
          color(255, 100, 100), // Red
          color(100, 200, 255), // Blue
          color(255, 200, 100)  // Yellow
 -      ]
 -      this.balloonColor = random(this.balloonColors)
 -      this.stringWave = 0
 -      this.antLegPhase = random(TWO_PI)
 +      ];
 +      this.balloonColor = random(this.balloonColors);
 +      this.stringWave = 0;
 +      this.antLegPhase = random(TWO_PI);
      } else if (this.type === 'beetle') {
 -      this.bobAmount = 4
 -      this.driftSpeed = random(0.15, 0.35)
 -      this.driftAngle = random(TWO_PI)
 -      this.driftChangeRate = random(0.005, 0.015)
 -      this.wingPhase = random(TWO_PI)
 +      this.bobAmount = 4;
 +      this.driftSpeed = random(0.15, 0.35);
 +      this.driftAngle = random(TWO_PI);
 +      this.driftChangeRate = random(0.005, 0.015);
 +      this.wingPhase = random(TWO_PI);
        this.beetleColor = random() < 0.5 ?
          color(20, 60, 20) : // Dark green
 -        color(40, 20, 60)   // Purple
 -      this.driftDistance = 0 // Track total drift
 +        color(40, 20, 60);   // Purple
 +      this.driftDistance = 0; // Track total drift
      } else if (this.type === 'leaf') {
 -      this.bobAmount = 2 // Leaves bob slightly
 -      let numPoints = 8
 +      this.bobAmount = 2; // Leaves bob slightly
 +      let numPoints = 8;
        for (let i = 0; i < numPoints; i++) {
 -        let angle = (TWO_PI / numPoints) * i
 -        let r = radius * random(0.7, 1.2)
 -        if (i === 0 || i === numPoints / 2) r = radius * 1.3
 -        this.leafPoints.push({ angle: angle, radius: r })
 +        let angle = (TWO_PI / numPoints) * i;
 +        let r = radius * random(0.7, 1.2);
 +        if (i === 0 || i === numPoints / 2) r = radius * 1.3;
 +        this.leafPoints.push({ angle: angle, radius: r });
+       }
      } else if (this.type === 'branch') {
        // Keep for backwards compatibility
 -      this.bobAmount = 0
 +      this.bobAmount = 0;
+     }
+   }
    update() {
      // Bobbing motion for all types
 -    let bob = sin(frameCount * this.bobSpeed + this.bobOffset) * this.bobAmount
 -    this.y = this.originalY + bob
 +    let bob = sin(frameCount * this.bobSpeed + this.bobOffset) * this.bobAmount;
 +    this.y = this.originalY + bob;
      // Beetle-specific drift
      if (this.type === 'beetle') {
        // Store initial position if not set
        if (!this.initialX) {
 -        this.initialX = this.x
 -        this.initialY = this.y
 +        this.initialX = this.x;
 +        this.initialY = this.y;
+       }
        // Slowly change drift direction using Perlin noise
 -      this.driftAngle += (noise(frameCount * this.driftChangeRate, this.originalX * 0.01) - 0.5) * 0.1
 +      this.driftAngle += (noise(frameCount * this.driftChangeRate, this.originalX * 0.01) - 0.5) * 0.1;
        // Apply drift to original position
 -      this.originalX += cos(this.driftAngle) * this.driftSpeed
 -      this.originalY += sin(this.driftAngle) * this.driftSpeed * 0.5
 +      this.originalX += cos(this.driftAngle) * this.driftSpeed;
 +      this.originalY += sin(this.driftAngle) * this.driftSpeed * 0.5;
        // Calculate total drift distance from initial position
 -      this.driftDistance = dist(this.originalX, this.originalY, this.initialX, this.initialY)
 +      this.driftDistance = dist(this.originalX, this.originalY, this.initialX, this.initialY);
        // Keep beetles on screen with soft boundaries
        if (this.originalX < 80) {
 -        this.driftAngle = random(-PI/4, PI/4)
 -        this.originalX = 80
 +        this.driftAngle = random(-PI/4, PI/4);
 +        this.originalX = 80;
+       }
        if (this.originalX > width - 80) {
 -        this.driftAngle = random(3*PI/4, 5*PI/4)
 -        this.originalX = width - 80
 +        this.driftAngle = random(3*PI/4, 5*PI/4);
 +        this.originalX = width - 80;
+       }
        if (this.originalY < 80) {
 -        this.driftAngle = random(-3*PI/4, -PI/4)
 -        this.originalY = 80
 +        this.driftAngle = random(-3*PI/4, -PI/4);
 +        this.originalY = 80;
+       }
        if (this.originalY > height - 150) {
 -        this.driftAngle = random(PI/4, 3*PI/4)
 -        this.originalY = height - 150
 +        this.driftAngle = random(PI/4, 3*PI/4);
 +        this.originalY = height - 150;
+       }
        // Update actual position (with bob already applied to y)
 -      this.x = this.originalX
 +      this.x = this.originalX;
        // Check if beetle has drifted too far and break attached strands
        if (this.driftDistance > 100) {
 -        this.breakAttachedStrands()
 +        this.breakAttachedStrands();
+       }
+     }
      // Update animation phases
      if (this.type === 'balloon') {
 -      this.stringWave = sin(frameCount * 0.05 + this.bobOffset) * 0.1
 -      this.antLegPhase += 0.1
 +      this.stringWave = sin(frameCount * 0.05 + this.bobOffset) * 0.1;
 +      this.antLegPhase += 0.1;
      } else if (this.type === 'beetle') {
 -      this.wingPhase += 0.15
 +      this.wingPhase += 0.15;
+     }
      // For all moving obstacles, update any attached web strands
      if (this.bobAmount > 0 || this.type === 'beetle') {
 -      this.updateAttachedStrands()
 +      this.updateAttachedStrands();
+     }
+   }
      for (let strand of webStrands) {
        // Check if strand starts at this obstacle
        if (dist(strand.start.x, strand.start.y, this.x, this.y) < this.radius + 10) {
 -        strand.start.x = this.x
 -        strand.start.y = this.y
 +        strand.start.x = this.x;
 +        strand.start.y = this.y;
          if (strand.path && strand.path.length > 0) {
 -          strand.path[0].x = this.x
 -          strand.path[0].y = this.y
 +          strand.path[0].x = this.x;
 +          strand.path[0].y = this.y;
+         }
+       }
        // Check if strand ends at this obstacle
        if (strand.end && dist(strand.end.x, strand.end.y, this.x, this.y) < this.radius + 10) {
 -        strand.end.x = this.x
 -        strand.end.y = this.y
 +        strand.end.x = this.x;
 +        strand.end.y = this.y;
          if (strand.path && strand.path.length > 0) {
 -          strand.path[strand.path.length - 1].x = this.x
 -          strand.path[strand.path.length - 1].y = this.y
 +          strand.path[strand.path.length - 1].x = this.x;
 +          strand.path[strand.path.length - 1].y = this.y;
+         }
+       }
+     }
    breakAttachedStrands() {
      // Break any strands attached to this beetle that has drifted too far
      for (let strand of webStrands) {
 -      let attachedToStart = dist(strand.start.x, strand.start.y, this.x, this.y) < this.radius + 10
 -      let attachedToEnd = strand.end && dist(strand.end.x, strand.end.y, this.x, this.y) < this.radius + 10
 +      let attachedToStart = dist(strand.start.x, strand.start.y, this.x, this.y) < this.radius + 10;
 +      let attachedToEnd = strand.end && dist(strand.end.x, strand.end.y, this.x, this.y) < this.radius + 10;
        if (attachedToStart || attachedToEnd) {
          // Mark strand as broken
 -        strand.broken = true
 +        strand.broken = true;
          // Release any flies stuck to this strand
          for (let fly of flies) {
            if (fly.stuck || fly.caught) {
              // Check if fly is touching this breaking strand
 -            let touchingStrand = false
 +            let touchingStrand = false;
              if (strand.path && strand.path.length > 1) {
 -              for (let i = 0; i < strand.path.length - 1; i++) {
 -                let p1 = strand.path[i]
 -                let p2 = strand.path[i + 1]
 -                let d = fly.pointToLineDistance(fly.pos, p1, p2)
 +              for (let k = 0; k < strand.path.length - 1; k++) {
 +                let p1 = strand.path[k];
 +                let p2 = strand.path[k + 1];
 +                let d = fly.pointToLineDistance(fly.pos, p1, p2);
                  if (d < fly.radius + 5) {
 -                  touchingStrand = true
 -                  break
 +                  touchingStrand = true;
 +                  break;
+                 }
+               }
+             }
              // If fly was on this strand, release it
              if (touchingStrand) {
 -              fly.stuck = false
 -              fly.caught = false
 -              fly.currentSpeed = fly.baseSpeed
 -              fly.touchedStrands.clear()
 -              fly.slowedBy.clear()
 +              fly.stuck = false;
 +              fly.caught = false;
 +              fly.currentSpeed = fly.baseSpeed;
 +              fly.touchedStrands.clear();
 +              fly.slowedBy.clear();
                // Give it a little downward velocity to start falling
 -              fly.vel = createVector(random(-0.5, 0.5), 2)
 +              fly.vel = createVector(random(-0.5, 0.5), 2);
                // Create release particles
                for (let j = 0; j < 3; j++) {
 -                let p = new Particle(fly.pos.x, fly.pos.y)
 -                p.color = color(255, 255, 100, 150)
 -                p.vel = createVector(random(-1, 1), random(0, 2))
 -                p.size = 2
 -                particles.push(p)
 +                let p = new Particle(fly.pos.x, fly.pos.y);
 +                p.color = color(255, 255, 100, 150);
 +                p.vel = createVector(random(-1, 1), random(0, 2));
 +                p.size = 2;
 +                particles.push(p);
+               }
+             }
+           }
+         }
          // Create dramatic snap particles
 -        let snapX = attachedToStart ? strand.start.x : strand.end.x
 -        let snapY = attachedToStart ? strand.start.y : strand.end.y
 +        let snapX = attachedToStart ? strand.start.x : strand.end.x;
 +        let snapY = attachedToStart ? strand.start.y : strand.end.y;
          // Red/pink particles for the snap
          for (let i = 0; i < 8; i++) {
 -          let p = new Particle(snapX, snapY)
 -          p.color = color(255, random(100, 200), random(100, 150))
 -          p.vel = createVector(random(-5, 5), random(-5, 2))
 -          p.size = random(4, 8)
 -          particles.push(p)
 +          let p = new Particle(snapX, snapY);
 +          p.color = color(255, random(100, 200), random(100, 150));
 +          p.vel = createVector(random(-5, 5), random(-5, 2));
 +          p.size = random(4, 8);
 +          particles.push(p);
+         }
          // White strand particles
          for (let i = 0; i < 4; i++) {
 -          let p = new Particle(snapX, snapY)
 -          p.color = color(255, 255, 255)
 -          p.vel = createVector(random(-3, 3), random(-3, 0))
 -          p.size = 3
 -          particles.push(p)
 +          let p = new Particle(snapX, snapY);
 +          p.color = color(255, 255, 255);
 +          p.vel = createVector(random(-3, 3), random(-3, 0));
 +          p.size = 3;
 +          particles.push(p);
+         }
          // Reset beetle drift after breaking strands
 -        this.initialX = this.x
 -        this.initialY = this.y
 -        this.driftDistance = 0
 +        this.initialX = this.x;
 +        this.initialY = this.y;
 +        this.driftDistance = 0;
+       }
+     }
+   }
 -  display () {
 -    push()
 -    translate(this.x, this.y)
 +  display() {
 +    push();
 +    translate(this.x, this.y);
      if (this.type === 'balloon') {
        // Hot air balloon with canvas texture!
 -      push()
 +      push();
        // String/rope first (behind balloon)
 -      stroke(80, 60, 40)
 -      strokeWeight(1.5)
 -      noFill()
 -      beginShape()
 +      stroke(80, 60, 40);
 +      strokeWeight(1.5);
 +      noFill();
 +      beginShape();
        for (let i = 0; i <= 10; i++) {
 -        let t = i / 10
 -        let stringX = sin(t * PI * 2 + this.stringWave) * 3
 -        let stringY = t * 40 + this.radius
 -        curveVertex(stringX, stringY)
 +        let t = i / 10;
 +        let stringX = sin(t * PI * 2 + this.stringWave) * 3;
 +        let stringY = t * 40 + this.radius;
 +        curveVertex(stringX, stringY);
+       }
 -      endShape()
 +      endShape();
        // Balloon shadow
 -      noStroke()
 -      fill(0, 0, 0, 30)
 -      ellipse(5, 5, this.radius * 2.2, this.radius * 2.5)
 +      noStroke();
 +      fill(0, 0, 0, 30);
 +      ellipse(5, 5, this.radius * 2.2, this.radius * 2.5);
        // Main balloon with canvas panels
 -      push()
 +      push();
        // Draw vertical panels for that classic hot air balloon look
 -      let numPanels = 8
 +      let numPanels = 8;
        for (let i = 0; i < numPanels; i++) {
 -        let angle1 = (TWO_PI / numPanels) * i
 -        let angle2 = (TWO_PI / numPanels) * (i + 1)
 +        let angle1 = (TWO_PI / numPanels) * i;
 +        let angle2 = (TWO_PI / numPanels) * (i + 1);
          // Alternate panel colors for striped effect
          if (i % 2 === 0) {
 -          fill(red(this.balloonColor), green(this.balloonColor), blue(this.balloonColor), 200)
 +          fill(red(this.balloonColor), green(this.balloonColor), blue(this.balloonColor), 200);
          } else {
            fill(
              red(this.balloonColor) - 30,
              green(this.balloonColor) - 30,
              blue(this.balloonColor) - 30,
 -          )
 +          );
+         }
          // Draw tapered panel (wider at middle, narrow at top/bottom)
 -        beginShape()
 +        beginShape();
          // Top point
 -        vertex(0, -this.radius * 1.2)
 +        vertex(0, -this.radius * 1.2);
          // Upper curve
          bezierVertex(
            cos(angle1) * this.radius * 0.3, -this.radius * 0.9,
            cos(angle1) * this.radius * 0.8, -this.radius * 0.3,
            cos(angle1) * this.radius * 1.1, 0
 -        )
 +        );
          // Lower curve to bottom
          bezierVertex(
            cos(angle1) * this.radius * 0.9, this.radius * 0.5,
            cos(angle1) * this.radius * 0.4, this.radius * 0.9,
 , this.radius * 1.1
 -        )
 +        );
          // Back up the other side
          bezierVertex(
            cos(angle2) * this.radius * 0.4, this.radius * 0.9,
            cos(angle2) * this.radius * 0.9, this.radius * 0.5,
            cos(angle2) * this.radius * 1.1, 0
 -        )
 +        );
          bezierVertex(
            cos(angle2) * this.radius * 0.8, -this.radius * 0.3,
            cos(angle2) * this.radius * 0.3, -this.radius * 0.9,
 , -this.radius * 1.2
 -        )
 -        endShape(CLOSE)
 +        );
 +        endShape(CLOSE);
+       }
        // Panel seams/ropes
 -      stroke(60, 40, 20, 100)
 -      strokeWeight(0.5)
 +      stroke(60, 40, 20, 100);
 +      strokeWeight(0.5);
        for (let i = 0; i < numPanels; i++) {
 -        let angle = (TWO_PI / numPanels) * i
 +        let angle = (TWO_PI / numPanels) * i;
          // Vertical seam lines
 -        beginShape()
 -        noFill()
 -        vertex(0, -this.radius * 1.2)
 +        beginShape();
 +        noFill();
 +        vertex(0, -this.radius * 1.2);
          bezierVertex(
            cos(angle) * this.radius * 0.3, -this.radius * 0.9,
            cos(angle) * this.radius * 0.8, -this.radius * 0.3,
            cos(angle) * this.radius * 1.1, 0
 -        )
 +        );
          bezierVertex(
            cos(angle) * this.radius * 0.9, this.radius * 0.5,
            cos(angle) * this.radius * 0.4, this.radius * 0.9,
 , this.radius * 1.1
 -        )
 -        endShape()
 +        );
 +        endShape();
+       }
        // Highlight on balloon
 -      noStroke()
 -      fill(255, 255, 255, 80)
 -      ellipse(-this.radius * 0.3, -this.radius * 0.5, this.radius * 0.6, this.radius * 0.7)
 -      pop()
 +      noStroke();
 +      fill(255, 255, 255, 80);
 +      ellipse(-this.radius * 0.3, -this.radius * 0.5, this.radius * 0.6, this.radius * 0.7);
 +      pop();
        // FLAME EFFECT!
 -      push()
 -      translate(0, this.radius - 5)
 +      push();
 +      translate(0, this.radius - 5);
        // Flame glow
 -      noStroke()
 -      fill(255, 200, 0, 40 + sin(frameCount * 0.3) * 20)
 -      ellipse(0, 0, 25, 25)
 -      fill(255, 150, 0, 60 + sin(frameCount * 0.4) * 30)
 -      ellipse(0, 0, 15, 18)
 +      noStroke();
 +      fill(255, 200, 0, 40 + sin(frameCount * 0.3) * 20);
 +      ellipse(0, 0, 25, 25);
 +      fill(255, 150, 0, 60 + sin(frameCount * 0.4) * 30);
 +      ellipse(0, 0, 15, 18);
        // Flame itself
 -      fill(255, 200, 0)
 -      push()
 -      let flameHeight = 8 + sin(frameCount * 0.5) * 3
 -      translate(0, -2)
 -      beginShape()
 -      vertex(-3, 0)
 -      bezierVertex(-3, -flameHeight * 0.7, -1, -flameHeight, 0, -flameHeight * 1.2)
 -      bezierVertex(1, -flameHeight, 3, -flameHeight * 0.7, 3, 0)
 -      endShape(CLOSE)
 -      fill(255, 255, 200)
 -      ellipse(0, -flameHeight * 0.5, 3, 4)
 -      pop()
 -      pop()
 +      fill(255, 200, 0);
 +      push();
 +      let flameHeight = 8 + sin(frameCount * 0.5) * 3;
 +      translate(0, -2);
 +      beginShape();
 +      vertex(-3, 0);
 +      bezierVertex(-3, -flameHeight * 0.7, -1, -flameHeight, 0, -flameHeight * 1.2);
 +      bezierVertex(1, -flameHeight, 3, -flameHeight * 0.7, 3, 0);
 +      endShape(CLOSE);
 +      fill(255, 255, 200);
 +      ellipse(0, -flameHeight * 0.5, 3, 4);
 +      pop();
 +      pop();
        // Basket
 -      push()
 -      translate(0, this.radius + 10)
 -      fill(101, 67, 33)
 -      stroke(80, 50, 20)
 -      strokeWeight(1)
 +      push();
 +      translate(0, this.radius + 10);
 +      fill(101, 67, 33);
 +      stroke(80, 50, 20);
 +      strokeWeight(1);
        // Woven basket shape
 -      beginShape()
 -      vertex(-8, 0)
 -      vertex(8, 0)
 -      vertex(6, 10)
 -      vertex(-6, 10)
 -      endShape(CLOSE)
 +      beginShape();
 +      vertex(-8, 0);
 +      vertex(8, 0);
 +      vertex(6, 10);
 +      vertex(-6, 10);
 +      endShape(CLOSE);
        // Basket weave pattern
 -      stroke(80, 50, 20, 150)
 +      stroke(80, 50, 20, 150);
        for (let i = -6; i < 6; i += 2) {
 -        line(i, 1, i, 9)
 +        line(i, 1, i, 9);
+       }
        for (let i = 2; i < 9; i += 2) {
 -        line(-6, i, 6, i)
 +        line(-6, i, 6, i);
+       }
        // Basket rim
 -      stroke(60, 40, 20)
 -      strokeWeight(1.5)
 -      line(-8, 0, 8, 0)
 -      pop()
 +      stroke(60, 40, 20);
 +      strokeWeight(1.5);
 +      line(-8, 0, 8, 0);
 +      pop();
        // Ant in basket (peeking over edge)
 -      push()
 -      translate(0, this.radius + 12)
 -      fill(20)
 -      noStroke()
 +      push();
 +      translate(0, this.radius + 12);
 +      fill(20);
 +      noStroke();
        // Just ant head and antennae visible
 -      ellipse(0, -2, 6, 4) // Head peeking up
 +      ellipse(0, -2, 6, 4); // Head peeking up
        // Antennae
 -      stroke(20)
 -      strokeWeight(0.5)
 -      line(-1, -3, -3, -6)
 -      line(1, -3, 3, -6)
 +      stroke(20);
 +      strokeWeight(0.5);
 +      line(-1, -3, -3, -6);
 +      line(1, -3, 3, -6);
        // Tiny ant arms gripping basket edge
 -      strokeWeight(1)
 -      line(-3, 0, -4, 2)
 -      line(3, 0, 4, 2)
 -      pop()
 +      strokeWeight(1);
 +      line(-3, 0, -4, 2);
 +      line(3, 0, 4, 2);
 +      pop();
 -      pop()
 +      pop();
      } else if (this.type === 'beetle') {
        // Big floating beetle!
 -      push()
 -      rotate(this.rotation)
 +      push();
 +      rotate(this.rotation);
        // Shadow
 -      noStroke()
 -      fill(0, 0, 0, 40)
 -      ellipse(3, 3, this.radius * 1.8, this.radius * 2.2)
 +      noStroke();
 +      fill(0, 0, 0, 40);
 +      ellipse(3, 3, this.radius * 1.8, this.radius * 2.2);
        // Wings - always visible and flapping since they're floating
 -      push()
 +      push();
        // Wing flap animation
 -      let wingAngle = sin(this.wingPhase) * 0.3
 -      let wingSpread = 15 + sin(this.wingPhase) * 10
 +      let wingAngle = sin(this.wingPhase) * 0.3;
 +      let wingSpread = 15 + sin(this.wingPhase) * 10;
        // Left wing
 -      push()
 -      translate(-this.radius * 0.4, 0)
 -      rotate(-wingAngle)
 -      fill(255, 255, 255, 120)
 -      stroke(0, 0, 0, 100)
 -      strokeWeight(0.5)
 -      ellipse(-wingSpread * 0.7, 0, wingSpread * 1.2, 15)
 +      push();
 +      translate(-this.radius * 0.4, 0);
 +      rotate(-wingAngle);
 +      fill(255, 255, 255, 120);
 +      stroke(0, 0, 0, 100);
 +      strokeWeight(0.5);
 +      ellipse(-wingSpread * 0.7, 0, wingSpread * 1.2, 15);
        // Wing details
 -      noStroke()
 -      fill(200, 200, 200, 80)
 -      ellipse(-wingSpread * 0.6, 0, wingSpread * 0.8, 10)
 -      pop()
 +      noStroke();
 +      fill(200, 200, 200, 80);
 +      ellipse(-wingSpread * 0.6, 0, wingSpread * 0.8, 10);
 +      pop();
        // Right wing
 -      push()
 -      translate(this.radius * 0.4, 0)
 -      rotate(wingAngle)
 -      fill(255, 255, 255, 120)
 -      stroke(0, 0, 0, 100)
 -      strokeWeight(0.5)
 -      ellipse(wingSpread * 0.7, 0, wingSpread * 1.2, 15)
 +      push();
 +      translate(this.radius * 0.4, 0);
 +      rotate(wingAngle);
 +      fill(255, 255, 255, 120);
 +      stroke(0, 0, 0, 100);
 +      strokeWeight(0.5);
 +      ellipse(wingSpread * 0.7, 0, wingSpread * 1.2, 15);
        // Wing details
 -      noStroke()
 -      fill(200, 200, 200, 80)
 -      ellipse(wingSpread * 0.6, 0, wingSpread * 0.8, 10)
 -      pop()
 +      noStroke();
 +      fill(200, 200, 200, 80);
 +      ellipse(wingSpread * 0.6, 0, wingSpread * 0.8, 10);
 +      pop();
        // Extra glow at night
        if (gamePhase === 'NIGHT') {
 -        noStroke()
 -        fill(255, 255, 200, 30 + sin(this.wingPhase * 2) * 20)
 -        ellipse(0, 0, this.radius * 3, this.radius * 2)
 +        noStroke();
 +        fill(255, 255, 200, 30 + sin(this.wingPhase * 2) * 20);
 +        ellipse(0, 0, this.radius * 3, this.radius * 2);
+       }
 -      pop()
 +      pop();
        // Main beetle body (on top of wings)
 -      fill(red(this.beetleColor), green(this.beetleColor), blue(this.beetleColor))
 -      stroke(0)
 -      strokeWeight(2)
 -      ellipse(0, 0, this.radius * 1.6, this.radius * 2)
 +      fill(red(this.beetleColor), green(this.beetleColor), blue(this.beetleColor));
 +      stroke(0);
 +      strokeWeight(2);
 +      ellipse(0, 0, this.radius * 1.6, this.radius * 2);
        // Shell split line
 -      stroke(0)
 -      strokeWeight(1)
 -      line(0, -this.radius, 0, this.radius)
 +      stroke(0);
 +      strokeWeight(1);
 +      line(0, -this.radius, 0, this.radius);
        // Head
 -      fill(10)
 -      ellipse(0, -this.radius * 0.8, this.radius * 0.8, this.radius * 0.6)
 +      fill(10);
 +      ellipse(0, -this.radius * 0.8, this.radius * 0.8, this.radius * 0.6);
        // Spots/pattern
 -      noStroke()
 -      fill(0, 0, 0, 80)
 -      ellipse(-this.radius * 0.3, 0, this.radius * 0.4)
 -      ellipse(this.radius * 0.3, -this.radius * 0.2, this.radius * 0.3)
 -      ellipse(this.radius * 0.2, this.radius * 0.4, this.radius * 0.35)
 -      ellipse(-this.radius * 0.25, this.radius * 0.3, this.radius * 0.25)
 +      noStroke();
 +      fill(0, 0, 0, 80);
 +      ellipse(-this.radius * 0.3, 0, this.radius * 0.4);
 +      ellipse(this.radius * 0.3, -this.radius * 0.2, this.radius * 0.3);
 +      ellipse(this.radius * 0.2, this.radius * 0.4, this.radius * 0.35);
 +      ellipse(-this.radius * 0.25, this.radius * 0.3, this.radius * 0.25);
        // No legs - they're flying!
        // Just small leg stubs tucked under the body
 -      stroke(0)
 -      strokeWeight(1)
 +      stroke(0);
 +      strokeWeight(1);
        // Tiny tucked legs
 -      line(-this.radius * 0.5, -this.radius * 0.2, -this.radius * 0.6, -this.radius * 0.1)
 -      line(this.radius * 0.5, -this.radius * 0.2, this.radius * 0.6, -this.radius * 0.1)
 -      line(-this.radius * 0.5, this.radius * 0.2, -this.radius * 0.6, this.radius * 0.1)
 -      line(this.radius * 0.5, this.radius * 0.2, this.radius * 0.6, this.radius * 0.1)
 +      line(-this.radius * 0.5, -this.radius * 0.2, -this.radius * 0.6, -this.radius * 0.1);
 +      line(this.radius * 0.5, -this.radius * 0.2, this.radius * 0.6, -this.radius * 0.1);
 +      line(-this.radius * 0.5, this.radius * 0.2, -this.radius * 0.6, this.radius * 0.1);
 +      line(this.radius * 0.5, this.radius * 0.2, this.radius * 0.6, this.radius * 0.1);
        // Antennae
 -      strokeWeight(1)
 -      line(-3, -this.radius * 1.1, -8, -this.radius * 1.4)
 -      line(3, -this.radius * 1.1, 8, -this.radius * 1.4)
 +      strokeWeight(1);
 +      line(-3, -this.radius * 1.1, -8, -this.radius * 1.4);
 +      line(3, -this.radius * 1.1, 8, -this.radius * 1.4);
        // Eyes (bigger and more prominent)
 -      fill(255, 0, 0)
 -      noStroke()
 -      ellipse(-5, -this.radius * 0.7, 5)
 -      ellipse(5, -this.radius * 0.7, 5)
 +      fill(255, 0, 0);
 +      noStroke();
 +      ellipse(-5, -this.radius * 0.7, 5);
 +      ellipse(5, -this.radius * 0.7, 5);
        // Eye shine
 -      fill(255, 150, 150)
 -      ellipse(-4, -this.radius * 0.72, 2)
 -      ellipse(6, -this.radius * 0.72, 2)
 +      fill(255, 150, 150);
 +      ellipse(-4, -this.radius * 0.72, 2);
 +      ellipse(6, -this.radius * 0.72, 2);
 -      pop()
 +      pop();
      } else if (this.type === 'leaf') {
        // Original leaf code
 -      rotate(this.rotation)
 +      rotate(this.rotation);
        if (gamePhase === 'NIGHT') {
 -        fill(20, 40, 20)
 -        stroke(10, 20, 10)
 +        fill(20, 40, 20);
 +        stroke(10, 20, 10);
        } else {
 -        fill(34, 139, 34)
 -        stroke(25, 100, 25)
 +        fill(34, 139, 34);
 +        stroke(25, 100, 25);
+       }
 -      strokeWeight(2)
 +      strokeWeight(2);
 -      beginShape()
 +      beginShape();
        for (let point of this.leafPoints) {
 -        let x = cos(point.angle) * point.radius
 -        let y = sin(point.angle) * point.radius
 -        curveVertex(x, y)
 +        let x = cos(point.angle) * point.radius;
 +        let y = sin(point.angle) * point.radius;
 +        curveVertex(x, y);
+       }
 -      let firstPoint = this.leafPoints[0]
 +      let firstPoint = this.leafPoints[0];
        curveVertex(
          cos(firstPoint.angle) * firstPoint.radius,
          sin(firstPoint.angle) * firstPoint.radius
 -      )
 -      let secondPoint = this.leafPoints[1]
 +      );
 +      let secondPoint = this.leafPoints[1];
        curveVertex(
          cos(secondPoint.angle) * secondPoint.radius,
          sin(secondPoint.angle) * secondPoint.radius
 -      )
 -      endShape()
+-
 -      stroke(25, 100, 25, 100)
 -      strokeWeight(1)
 -      line(0, -this.radius, 0, this.radius)
 -      line(0, 0, -this.radius / 2, -this.radius / 2)
 -      line(0, 0, this.radius / 2, -this.radius / 2)
 -      line(0, 0, -this.radius / 2, this.radius / 2)
 -      line(0, 0, this.radius / 2, this.radius / 2)
 +      );
 +      endShape();
++
 +      stroke(25, 100, 25, 100);
 +      strokeWeight(1);
 +      line(0, -this.radius, 0, this.radius);
 +      line(0, 0, -this.radius / 2, -this.radius / 2);
 +      line(0, 0, this.radius / 2, -this.radius / 2);
 +      line(0, 0, -this.radius / 2, this.radius / 2);
 +      line(0, 0, this.radius / 2, this.radius / 2);
      } else if (this.type === 'branch') {
        // Keep old branch code for backwards compatibility
 -      rotate(this.rotation)
 +      rotate(this.rotation);
        if (gamePhase === 'NIGHT') {
 -        stroke(40, 20, 0)
 -        fill(50, 25, 5)
 +        stroke(40, 20, 0);
 +        fill(50, 25, 5);
        } else {
 -        stroke(101, 67, 33)
 -        fill(139, 90, 43)
 +        stroke(101, 67, 33);
 +        fill(139, 90, 43);
+       }
 -      strokeWeight(3)
 +      strokeWeight(3);
 -      push()
 -      strokeWeight(this.radius / 3)
 -      line(-this.radius, 0, this.radius, 0)
 +      push();
 +      strokeWeight(this.radius / 3);
 +      line(-this.radius, 0, this.radius, 0);
 -      strokeWeight(2)
 -      line(-this.radius / 2, 0, -this.radius / 2 - 10, -10)
 -      line(this.radius / 3, 0, this.radius / 3 + 8, -8)
 -      line(0, 0, 5, -15)
 +      strokeWeight(2);
 +      line(-this.radius / 2, 0, -this.radius / 2 - 10, -10);
 +      line(this.radius / 3, 0, this.radius / 3 + 8, -8);
 +      line(0, 0, 5, -15);
 -      stroke(80, 50, 20, 100)
 -      strokeWeight(1)
 +      stroke(80, 50, 20, 100);
 +      strokeWeight(1);
        for (let i = -this.radius; i < this.radius; i += 5) {
 -        line(i, -2, i + 2, 2)
 +        line(i, -2, i + 2, 2);
+       }
 -      pop()
 +      pop();
 -      noStroke()
 -      fill(255, 255, 255, 30)
 -      ellipse(0, 0, this.radius * 2)
 +      noStroke();
 +      fill(255, 255, 255, 30);
 +      ellipse(0, 0, this.radius * 2);
+     }
 -    pop()
 +    pop();
+   }
+ }
  class FoodBox {
 -  constructor (x, y) {
 -    this.pos = createVector(x, y)
 -    this.radius = 10
 -    this.collected = false
 -    this.floatOffset = random(TWO_PI)
 -    this.silkValue = random(20, 35)
 -    this.glowPhase = random(TWO_PI)
 +  constructor(x, y) {
 +    this.pos = createVector(x, y);
 +    this.radius = 10;
 +    this.collected = false;
 +    this.floatOffset = random(TWO_PI);
 +    this.silkValue = random(20, 35);
 +    this.glowPhase = random(TWO_PI);
+   }
 -  collect () {
 -    webSilk = min(webSilk + this.silkValue, maxWebSilk)
 +  collect() {
 +    webSilk = min(webSilk + this.silkValue, maxWebSilk);
      for (let i = 0; i < 8; i++) {
 -      particles.push(new Particle(this.pos.x, this.pos.y))
 +      particles.push(new Particle(this.pos.x, this.pos.y));
+     }
+   }
 -  display () {
 -    push()
 -    let floatY = sin(frameCount * 0.05 + this.floatOffset) * 3
 -    translate(this.pos.x, this.pos.y + floatY)
+-
 -    let glowIntensity = 100 + sin(frameCount * 0.1 + this.glowPhase) * 50
 -    noStroke()
 -    fill(255, 200, 100, glowIntensity * 0.3)
 -    ellipse(0, 0, 40)
 -    fill(255, 220, 150, glowIntensity * 0.5)
 -    ellipse(0, 0, 25)
+-
 -    rectMode(CENTER)
+-
 -    fill(0, 0, 0, 50)
 -    rect(2, 2, this.radius * 2, this.radius * 1.8, 3)
+-
 -    fill(139, 69, 19)
 -    stroke(100, 50, 0)
 -    strokeWeight(1)
 -    rect(0, 0, this.radius * 2, this.radius * 1.8, 3)
+-
 -    stroke(100, 50, 0)
 -    strokeWeight(1)
 -    line(-this.radius, 0, this.radius, 0)
 -    line(0, -this.radius * 0.9, 0, this.radius * 0.9)
+-
 -    noStroke()
 -    fill(255, 200, 100)
 -    ellipse(-5, -4, 4)
 -    ellipse(5, -4, 3)
 -    ellipse(-4, 5, 3)
 -    ellipse(4, 4, 4)
+-
 -    pop()
 +  display() {
 +    push();
 +    let floatY = sin(frameCount * 0.05 + this.floatOffset) * 3;
 +    translate(this.pos.x, this.pos.y + floatY);
++
 +    let glowIntensity = 100 + sin(frameCount * 0.1 + this.glowPhase) * 50;
 +    noStroke();
 +    fill(255, 200, 100, glowIntensity * 0.3);
 +    ellipse(0, 0, 40);
 +    fill(255, 220, 150, glowIntensity * 0.5);
 +    ellipse(0, 0, 25);
++
 +    rectMode(CENTER);
++
 +    fill(0, 0, 0, 50);
 +    rect(2, 2, this.radius * 2, this.radius * 1.8, 3);
++
 +    fill(139, 69, 19);
 +    stroke(100, 50, 0);
 +    strokeWeight(1);
 +    rect(0, 0, this.radius * 2, this.radius * 1.8, 3);
++
 +    stroke(100, 50, 0);
 +    strokeWeight(1);
 +    line(-this.radius, 0, this.radius, 0);
 +    line(0, -this.radius * 0.9, 0, this.radius * 0.9);
++
 +    noStroke();
 +    fill(255, 200, 100);
 +    ellipse(-5, -4, 4);
 +    ellipse(5, -4, 3);
 +    ellipse(-4, 5, 3);
 +    ellipse(4, 4, 4);
++
 +    pop();
+   }
+ }
  class Particle {
 -  constructor (x, y) {
 -    this.pos = createVector(x, y)
 -    this.vel = createVector(random(-3, 3), random(-5, -2))
 -    this.lifetime = 255
 -    this.color = color(255, random(200, 255), random(100, 200))
 -    this.size = 6 // Default size
 +  constructor(x, y) {
 +    this.pos = createVector(x, y);
 +    this.vel = createVector(random(-3, 3), random(-5, -2));
 +    this.lifetime = 255;
 +    this.color = color(255, random(200, 255), random(100, 200));
 +    this.size = 6; // Default size
+   }
 -  update () {
 -    this.vel.y += 0.2
 -    this.pos.add(this.vel)
 -    this.lifetime -= 8
 +  update() {
 +    this.vel.y += 0.2;
 +    this.pos.add(this.vel);
 +    this.lifetime -= 8;
+   }
 -  display () {
 -    push()
 -    noStroke()
 -    fill(red(this.color), green(this.color), blue(this.color), this.lifetime)
 -    ellipse(this.pos.x, this.pos.y, this.size)
 -    pop()
 +  display() {
 +    push();
 +    noStroke();
 +    fill(red(this.color), green(this.color), blue(this.color), this.lifetime);
 +    ellipse(this.pos.x, this.pos.y, this.size);
 +    pop();
+   }
 -  isDead () {
 -    return this.lifetime <= 0
 +  isDead() {
 +    return this.lifetime <= 0;
+   }
+ }

js/game.jsmodified

1687 lines changed — click to load

  let silkRechargeRate = 0.05;
  let silkDrainRate = 2;
 -// Game phases
 +// Game phases - PHASE 1 UPDATES
  let gamePhase = 'DUSK';
  let phaseTimer = 0;
 -let DUSK_DURATION = 1500; // 25 seconds
++
 +// Phase durations (in frames, 60fps) - PHASE 1 NEW
 +let DAWN_DURATION = 1800; // 30 seconds
 +let DAY_DURATION = 2700; // 45 seconds
 +let DUSK_DURATION = 1800; // 30 seconds (was 1500)
 +let NIGHT_DURATION = 3600; // 60 seconds
  let TRANSITION_DURATION = 180; // 3 seconds
++
  let skyColor1, skyColor2, currentSkyColor1, currentSkyColor2;
  let moonY = 100;
  let moonOpacity = 0;
 +let sunY = -50; // PHASE 1 NEW
 +let sunOpacity = 0; // PHASE 1 NEW
++
 +// Progression tracking - PHASE 1 NEW
  let fliesCaught = 0;
  let fliesMunched = 0;
 +let totalFliesCaught = 0; // Lifetime counter
 +let nightsSurvived = 0;
 +let currentNight = 1;
 +let baseFlySpeed = 3;
 +let fliesEscaped = [];
++
 +// PHASE 2: Special fly notifications
 +let notifications = [];
++
 +// PHASE 3: Upgrade System
 +let playerPoints = 0;
 +let shopOpen = false;
++
 +// PHASE 4: Dawn Exhaustion System
 +let jumpStamina = 100;
 +let maxJumpStamina = 100;
 +let jumpCost = 20;
 +let staminaRegenRate = 0.2;
 +let isExhausted = false;
 +let fliesMunchedLastNight = 0;
 +let birds = [];
++
 +// PHASE 4B: Wind System
 +let windActive = false;
 +let windDirection = 0;
 +let windStrength = 0;
 +let windTimer = 0;
 +let windDuration = 0;
 +let windParticles = [];
 +let nextWindTime = 0;
++
 +// PHASE 4B: Thief bird timer
 +let thiefBirdTimer = 0;
 +let nextThiefTime = 0;
++
 +// PHASE 5: Achievements & Stats System
 +let achievements = {
 +    nightOwl: { name: "Night Owl", desc: "Survive 10 nights", icon: "🦉", unlocked: false, progress: 0, target: 10 },
 +    silkMaster: { name: "Silk Master", desc: "Have 15+ strands at once", icon: "🕸️", unlocked: false, progress: 0, target: 15 },
 +    feast: { name: "Feast", desc: "Munch 20 flies in one night", icon: "🍽️", unlocked: false, progress: 0, target: 20 },
 +    architect: { name: "Architect", desc: "Catch 5 flies without munching", icon: "🏗️", unlocked: false, progress: 0, target: 5 },
 +    untouchable: { name: "Untouchable", desc: "Survive a night without losing a strand", icon: "💎", unlocked: false },
 +    windRider: { name: "Wind Rider", desc: "Jump 10 times during wind", icon: "🌬️", unlocked: false, progress: 0, target: 10 },
 +    thiefDefender: { name: "Thief Defender", desc: "Scare off 10 thief birds", icon: "🛡️", unlocked: false, progress: 0, target: 10 },
 +    exhaustionMaster: { name: "Exhaustion Master", desc: "Survive dawn with < 20 stamina", icon: "😴", unlocked: false },
 +    queenSlayer: { name: "Queen Slayer", desc: "Catch 10 queen flies", icon: "👑", unlocked: false, progress: 0, target: 10 },
 +    perfectDawn: { name: "Perfect Dawn", desc: "No bird hits during dawn", icon: "☀️", unlocked: false },
 +    speedrunner: { name: "Speedrunner", desc: "Catch 30 flies before Night 5", icon: "⚡", unlocked: false },
 +    galaxyUnlock: { name: "Cosmic Spider", desc: "Survive 15 nights", icon: "🌌", unlocked: false, progress: 0, target: 15 },
 +    goldenHunter: { name: "Golden Hunter", desc: "Catch 100 golden flies", icon: "✨", unlocked: false, progress: 0, target: 100 },
 +    shadowPredator: { name: "Shadow Predator", desc: "Catch 50 flies in one night", icon: "🌑", unlocked: false, progress: 0, target: 50 },
 +    webMaster: { name: "Web Master", desc: "500 total flies caught", icon: "🏆", unlocked: false, progress: 0, target: 500 }
 +};
++
 +// Statistics tracking
 +let stats = {
 +    totalFliesCaught: 0,
 +    regularCaught: 0,
 +    goldenCaught: 0,
 +    mothsCaught: 0,
 +    queensCaught: 0,
 +    longestNight: 0,
 +    totalSilkSpun: 0,
 +    totalJumps: 0,
 +    windJumps: 0,
 +    thievesScared: 0,
 +    birdHitsTaken: 0,
 +    strandsCreated: 0,
 +    perfectDawns: 0,
 +    fliesMunchedInCurrentNight: 0,
 +    fliesCaughtWithoutMunch: 0,
 +    strandsLostInNight: 0
 +};
++
 +// Cosmetics
 +let unlockedSkins = {
 +    default: true,
 +    galaxy: false,
 +    golden: false,
 +    shadow: false,
 +    rainbow: false
 +};
++
 +let currentSkin = 'default';
 +let achievementQueue = [];
 +let showingAchievement = null;
 +let achievementDisplayTimer = 0;
 +let upgrades = {
 +    // Tier 1 Upgrades
 +    strongLegs: {
 +        level: 0,
 +        maxLevel: 3,
 +        cost: 15,
 +        name: "Strong Legs",
 +        description: "Jump 15% farther",
 +        icon: "🦵",
 +        tier: 1
 +    },
 +    silkGlands: {
 +        level: 0,
 +        maxLevel: 3,
 +        cost: 20,
 +        name: "Silk Glands",
 +        description: "+20 max silk capacity",
 +        icon: "🕸️",
 +        tier: 1
 +    },
 +    efficientSpinning: {
 +        level: 0,
 +        maxLevel: 3,
 +        cost: 15,
 +        name: "Efficient Spinning",
 +        description: "-20% silk consumption",
 +        icon: "♻️",
 +        tier: 1
 +    },
 +    quickMunch: {
 +        level: 0,
 +        maxLevel: 2,
 +        cost: 10,
 +        name: "Quick Munch",
 +        description: "Munch cooldown -30%",
 +        icon: "🦷",
 +        tier: 1
 +    },
++
 +    // Tier 2 Upgrades (requires at least 2 Tier 1 upgrades)
 +    powerJump: {
 +        level: 0,
 +        maxLevel: 1,
 +        cost: 50,
 +        name: "Power Jump",
 +        description: "Hold to charge jump (2x distance)",
 +        icon: "⚡",
 +        tier: 2,
 +        requires: 2 // Number of tier 1 upgrades needed
 +    },
 +    silkRecycle: {
 +        level: 0,
 +        maxLevel: 1,
 +        cost: 75,
 +        name: "Silk Recycle",
 +        description: "Press R near old web to recover 50% silk",
 +        icon: "🔄",
 +        tier: 2,
 +        requires: 2
 +    },
 +    spiderSense: {
 +        level: 0,
 +        maxLevel: 1,
 +        cost: 100,
 +        name: "Spider Sense",
 +        description: "See faint prediction lines for fly paths",
 +        icon: "👁️",
 +        tier: 2,
 +        requires: 3
 +    },
 +    metabolize: {
 +        level: 0,
 +        maxLevel: 1,
 +        cost: 60,
 +        name: "Metabolize",
 +        description: "Munching heals nearby broken strands",
 +        icon: "💚",
 +        tier: 2,
 +        requires: 2
 +    }
 +};
++
 +// Track if charging jump (Tier 2 upgrade)
 +let chargingJump = false;
 +let jumpChargeTime = 0;
 +let maxJumpCharge = 60; // 1 second at 60fps
++
 +class Notification {
 +    constructor(text, color) {
 +        this.text = text;
 +        this.color = color;
 +        this.y = height * 0.3;
 +        this.alpha = 255;
 +        this.lifetime = 180; // 3 seconds
 +    }
++
 +    update() {
 +        this.lifetime--;
 +        if (this.lifetime < 60) {
 +            this.alpha = map(this.lifetime, 0, 60, 0, 255);
 +        }
 +        this.y -= 0.5; // Slowly rise
 +    }
++
 +    display() {
 +        push();
 +        textAlign(CENTER);
 +        textSize(24);
 +        strokeWeight(4);
 +        stroke(0, 0, 0, this.alpha);
 +        fill(red(this.color), green(this.color), blue(this.color), this.alpha);
 +        text(this.text, width / 2, this.y);
 +        pop();
 +    }
++
 +    isDead() {
 +        return this.lifetime <= 0;
 +    }
 +}
  function setup() {
      let canvas = createCanvas(window.innerWidth, window.innerHeight);
      canvas.parent('game-container');
 +    // PHASE 5: Load saved game
 +    loadGame();
++
      skyColor1 = color(135, 206, 235);
      skyColor2 = color(255, 183, 77);
      currentSkyColor1 = skyColor1;
      // Place spider on top of the visual branch at the tip (8 is spider radius)
      spider = new Spider(spiderStartX, branchSurfaceY - 8);
 +    // PHASE 3: Apply any existing upgrades at start
 +    applyUpgradeEffects();
++
      // Add invisible obstacles along the branch for web anchor points
      let numBranchAnchors = 3;
      for (let i = 0; i < numBranchAnchors; i++) {
      // Update phase timer
      phaseTimer++;
 -    // Phase transitions
 +    // Phase transitions with endless cycle - PHASE 1 UPDATE
      if (gamePhase === 'DUSK' && phaseTimer >= DUSK_DURATION) {
 -        gamePhase = 'TRANSITION';
 +        gamePhase = 'DUSK_TO_NIGHT';
          phaseTimer = 0;
 -    } else if (gamePhase === 'TRANSITION' && phaseTimer >= TRANSITION_DURATION) {
 +    } else if (gamePhase === 'DUSK_TO_NIGHT' && phaseTimer >= TRANSITION_DURATION) {
          gamePhase = 'NIGHT';
          phaseTimer = 0;
 -        for (let i = 0; i < 5; i++) {
 -            flies.push(new Fly());
 -        }
 -        for (let i = 0; i < 3; i++) {
 -            spawnFoodBox();
 +        // Spawn flies based on difficulty
 +        spawnNightFlies();
 +    } else if (gamePhase === 'NIGHT' && phaseTimer >= NIGHT_DURATION) {
 +        gamePhase = 'NIGHT_TO_DAWN';
 +        phaseTimer = 0;
 +        nightsSurvived++;
 +        currentNight++;
 +        // PHASE 5: Check night achievements
 +        checkNightAchievements();
 +        // PHASE 4: Track flies munched for dawn stamina
 +        fliesMunchedLastNight = fliesMunched;
 +        fliesMunched = 0; // Reset for next night
 +        // PHASE 4B: Clear any thief birds
 +        birds = birds.filter(b => !b.isThief);
 +        windActive = false; // Stop any active wind
 +    } else if (gamePhase === 'NIGHT_TO_DAWN' && phaseTimer >= TRANSITION_DURATION) {
 +        gamePhase = 'DAWN';
 +        phaseTimer = 0;
 +        // PHASE 4: Calculate dawn stamina and spawn birds
 +        maxJumpStamina = 30 + (fliesMunchedLastNight * 10);
 +        maxJumpStamina = min(maxJumpStamina, 150); // Cap at 150
 +        jumpStamina = maxJumpStamina;
 +        // Spawn birds
 +        spawnDawnBirds();
 +        // Flies escape at dawn
 +        escapeFlies();
 +    } else if (gamePhase === 'DAWN' && phaseTimer >= DAWN_DURATION) {
 +        gamePhase = 'DAWN_TO_DAY';
 +        phaseTimer = 0;
 +        // PHASE 5: Check dawn achievements
 +        checkDawnAchievements();
 +        // PHASE 4: Clear birds when dawn ends
 +        birds = [];
 +        // PHASE 3: Open shop at dawn
 +        if (currentNight > 1) {
 +            openUpgradeShop();
+         }
 +    } else if (gamePhase === 'DAWN_TO_DAY' && phaseTimer >= TRANSITION_DURATION) {
 +        gamePhase = 'DAY';
 +        phaseTimer = 0;
 +        // Degrade webs by 10%
 +        degradeWebs();
 +        // PHASE 5: Open stats panel during day
 +        openStatsPanel();
 +    } else if (gamePhase === 'DAY' && phaseTimer >= DAY_DURATION) {
 +        gamePhase = 'DAY_TO_DUSK';
 +        phaseTimer = 0;
 +    } else if (gamePhase === 'DAY_TO_DUSK' && phaseTimer >= TRANSITION_DURATION) {
 +        gamePhase = 'DUSK';
 +        phaseTimer = 0;
 +        // Return some flies for next night
 +        prepareDusk();
+     }
      // Update sky colors
          drawMoon();
+     }
 +    // Draw sun during day phases - PHASE 1 NEW
 +    if (sunOpacity > 0) {
 +        drawSun();
 +    }
++
 +    // PHASE 4B: Update wind system
 +    updateWind();
++
 +    // PHASE 4B: Apply wind to airborne entities
 +    if (windActive) {
 +        // Push spider if airborne
 +        if (spider.isAirborne) {
 +            spider.vel.x += cos(windDirection) * windStrength * 0.1;
 +        }
++
 +        // Push flies
 +        for (let fly of flies) {
 +            if (!fly.stuck && !fly.caught) {
 +                fly.vel.x += cos(windDirection) * windStrength * 0.05;
 +            }
 +        }
++
 +        // Make webs sway
 +        for (let strand of webStrands) {
 +            if (!strand.broken) {
 +                strand.vibrate(windStrength * 0.5);
 +                // Check if strand is overstretched and should break
 +                if (strand.tension > 1.2 && windStrength > 3) {
 +                    if (random() < 0.01) { // Small chance per frame
 +                        strand.broken = true;
 +                        notifications.push(new Notification("Wind snapped a web!", color(255, 150, 100)));
 +                    }
 +                }
 +            }
 +        }
++
 +        // Update wind particles
 +        for (let i = windParticles.length - 1; i >= 0; i--) {
 +            let p = windParticles[i];
 +            p.x += cos(windDirection) * windStrength * 3;
 +            p.life--;
 +            if (p.life <= 0 || p.x < -50 || p.x > width + 50) {
 +                windParticles.splice(i, 1);
 +            }
 +        }
++
 +        // Spawn new wind particles
 +        if (frameCount % 5 === 0) {
 +            windParticles.push({
 +                x: windDirection > 0 ? -20 : width + 20,
 +                y: random(height),
 +                life: 120,
 +                size: random(2, 4)
 +            });
 +        }
 +    }
++
      // Update and display game objects
      for (let obstacle of obstacles) {
          obstacle.update(); // Update movement and animations
          box.display();
+     }
 +    // PHASE 4B: Display wind effects
 +    if (windActive) {
 +        push();
 +        noStroke();
 +        for (let p of windParticles) {
 +            fill(255, 255, 255, p.life * 0.5);
 +            ellipse(p.x, p.y, p.size);
 +        }
++
 +        // Wind indicator
 +        push();
 +        translate(width / 2, 50);
 +        stroke(255, 255, 255, 100);
 +        strokeWeight(3);
 +        let arrowLength = windStrength * 10;
 +        line(0, 0, cos(windDirection) * arrowLength, 0);
 +        // Arrowhead
 +        push();
 +        translate(cos(windDirection) * arrowLength, 0);
 +        rotate(windDirection);
 +        line(0, 0, -5, -3);
 +        line(0, 0, -5, 3);
 +        pop();
++
 +        // Wind strength text
 +        fill(255, 255, 255, 150);
 +        noStroke();
 +        textAlign(CENTER);
 +        textSize(12);
 +        text("WIND: " + Math.round(windStrength), 0, 20);
 +        pop();
 +        pop();
 +    }
++
      for (let i = particles.length - 1; i >= 0; i--) {
          particles[i].update();
          particles[i].display();
+         }
+     }
 +    // PHASE 1 UPDATE - Handle broken strands
      for (let i = webStrands.length - 1; i >= 0; i--) {
          let strand = webStrands[i];
          strand.update();
                          fly.slowedBy.clear();
                          fly.vel = createVector(random(-0.5, 0.5), 1.5);
 -                        // Yellow particles for release
 +                        // Create release particles
                          for (let j = 0; j < 3; j++) {
                              let p = new Particle(fly.pos.x, fly.pos.y);
                              p.color = color(255, 255, 0, 100);
      spider.update();
      spider.display();
 +    // PHASE 4: Exhaustion indicator
 +    if (gamePhase === 'DAWN' && isExhausted) {
 +        push();
 +        textAlign(CENTER);
 +        textSize(16);
 +        fill(255, 100, 100, 200 + sin(frameCount * 0.2) * 55);
 +        stroke(0);
 +        strokeWeight(2);
 +        text("NO STAMINA!", spider.pos.x, spider.pos.y - 30);
 +        pop();
 +    }
++
 +    // PHASE 4: Update and display birds during dawn
 +    if (gamePhase === 'DAWN') {
 +        // Update stamina
 +        if (!spider.isAirborne && spider.vel.mag() < 0.1) {
 +            // Resting - faster regen
 +            jumpStamina += staminaRegenRate * 2.5;
 +        } else {
 +            // Moving - normal regen
 +            jumpStamina += staminaRegenRate;
 +        }
 +        jumpStamina = min(jumpStamina, maxJumpStamina);
 +        isExhausted = jumpStamina < jumpCost;
++
 +        // Update birds
 +        for (let bird of birds) {
 +            bird.update();
 +            bird.display();
 +        }
 +    }
++
 +    // PHASE 4B: Update thief birds during night
 +    if (gamePhase === 'NIGHT') {
 +        for (let i = birds.length - 1; i >= 0; i--) {
 +            let bird = birds[i];
 +            bird.update();
 +            bird.display();
++
 +            // Remove inactive thief birds
 +            if (bird.isThief && !bird.active) {
 +                birds.splice(i, 1);
 +            }
 +        }
 +    }
++
 +    // PHASE 3: Spider Sense - show fly path predictions
 +    if (upgrades.spiderSense && upgrades.spiderSense.level > 0) {
 +        push();
 +        strokeWeight(1);
 +        for (let fly of flies) {
 +            if (!fly.stuck && !fly.caught) {
 +                // Predict future position
 +                let futurePos = p5.Vector.add(fly.pos, p5.Vector.mult(fly.vel, 30));
 +                stroke(255, 255, 255, 30);
 +                line(fly.pos.x, fly.pos.y, futurePos.x, futurePos.y);
 +                noFill();
 +                stroke(255, 255, 255, 20);
 +                ellipse(futurePos.x, futurePos.y, 10);
 +            }
 +        }
 +        pop();
 +    }
++
 +    // PHASE 2: Display notifications
 +    for (let i = notifications.length - 1; i >= 0; i--) {
 +        notifications[i].update();
 +        notifications[i].display();
 +        if (notifications[i].isDead()) {
 +            notifications.splice(i, 1);
 +        }
 +    }
++
 +    // PHASE 5: Display achievements
 +    displayAchievements();
++
      // Update resources
      updateResources();
 +    // PHASE 5: Check achievements continuously
 +    checkAchievements();
++
 +    // PHASE 3: Update jump charging
 +    if (chargingJump && !spider.isAirborne) {
 +        jumpChargeTime++;
 +        spider.jumpChargeVisual = min(jumpChargeTime / maxJumpCharge, 1);
 +    } else {
 +        spider.jumpChargeVisual = 0;
 +    }
++
      // Handle web deployment
      handleWebDeployment();
      // Update UI
      updateUI();
 -    // Spawn entities during night
 +    // Spawn entities during night - PHASE 1 UPDATE
      if (gamePhase === 'NIGHT') {
 -        if (phaseTimer % 120 === 0 && flies.length < 15) {
 -            flies.push(new Fly());
 +        // Dynamic spawn rate based on difficulty
 +        let spawnRate = max(90, 120 - currentNight * 5); // Faster spawning over time
 +        if (phaseTimer % spawnRate === 0 && flies.length < 10 + currentNight * 2) {
 +            // PHASE 2: Spawn different types during the night too
 +            let flyType = 'regular';
 +            let roll = random();
++
 +            if (currentNight >= 5 && roll < 0.03) {
 +                flyType = 'queen';
 +            } else if (roll < 0.08) {
 +                flyType = 'golden';
 +            } else if (roll < 0.20) {
 +                flyType = 'moth';
 +            }
++
 +            let fly = new Fly(flyType);
 +            let speedMult = 1 + Math.floor((currentNight - 1) / 3) * 0.1;
 +            fly.baseSpeed = baseFlySpeed * speedMult;
 +            if (flyType === 'golden') fly.baseSpeed *= 1.3;
 +            if (flyType === 'moth') fly.baseSpeed *= 0.8;
 +            if (flyType === 'queen') fly.baseSpeed *= 0.5;
 +            fly.currentSpeed = fly.baseSpeed;
 +            flies.push(fly);
+         }
          if (phaseTimer % 300 === 0 && foodBoxes.length < 6) {
              spawnFoodBox();
+         }
++
 +        // PHASE 4B: Spawn thief birds at night (after Night 5)
 +        if (currentNight >= 5) {
 +            thiefBirdTimer++;
 +            if (thiefBirdTimer >= nextThiefTime) {
 +                spawnThiefBird();
 +                thiefBirdTimer = 0;
 +                nextThiefTime = random(2700, 3600); // 45-60 seconds
 +            }
 +        }
++
 +        // PHASE 4B: Random wind gusts at night
 +        if (!windActive && frameCount > nextWindTime) {
 +            startWindGust();
 +        }
 +    }
 +}
++
 +function openStatsPanel() {
 +    // Update stats display
 +    let statsHTML = `
 +        <div>Total Flies Caught: ${stats.totalFliesCaught}</div>
 +        <div>Regular: ${stats.regularCaught}</div>
 +        <div>Golden: ${stats.goldenCaught}</div>
 +        <div>Moths: ${stats.mothsCaught}</div>
 +        <div>Queens: ${stats.queensCaught}</div>
 +        <div>Longest Night: ${stats.longestNight}</div>
 +        <div>Total Jumps: ${stats.totalJumps}</div>
 +        <div>Wind Jumps: ${stats.windJumps}</div>
 +        <div>Thieves Scared: ${stats.thievesScared}</div>
 +        <div>Perfect Dawns: ${stats.perfectDawns}</div>
 +    `;
 +    document.getElementById('stats-list').innerHTML = statsHTML;
++
 +    // Update skins display
 +    let skinsHTML = '';
 +    let skins = [
 +        { id: 'default', name: 'Classic', icon: '🕷️', unlocked: true },
 +        { id: 'galaxy', name: 'Galaxy', icon: '🌌', unlocked: unlockedSkins.galaxy },
 +        { id: 'golden', name: 'Golden', icon: '✨', unlocked: unlockedSkins.golden },
 +        { id: 'shadow', name: 'Shadow', icon: '🌑', unlocked: unlockedSkins.shadow },
 +        { id: 'rainbow', name: 'Rainbow', icon: '🌈', unlocked: unlockedSkins.rainbow }
 +    ];
++
 +    for (let skin of skins) {
 +        let selected = currentSkin === skin.id;
 +        let locked = !skin.unlocked;
 +        skinsHTML += `
 +            <div onclick="selectSkin('${skin.id}')"
 +                 style="padding: 10px; background: ${selected ? '#FFD700' : locked ? '#444' : '#666'};
 +                        border-radius: 10px; cursor: ${locked ? 'not-allowed' : 'pointer'};
 +                        opacity: ${locked ? '0.5' : '1'}; text-align: center;">
 +                <div style="font-size: 30px;">${skin.icon}</div>
 +                <div style="font-size: 12px; color: ${selected ? '#000' : '#FFF'};">
 +                    ${skin.name}${locked ? ' 🔒' : ''}
 +                </div>
 +            </div>
 +        `;
 +    }
 +    document.getElementById('skins-list').innerHTML = skinsHTML;
++
 +    // Update achievements display
 +    let achievementsHTML = '';
 +    for (let key in achievements) {
 +        let ach = achievements[key];
 +        let progress = ach.progress !== undefined ? ` (${ach.progress}/${ach.target})` : '';
 +        achievementsHTML += `
 +            <div style="padding: 8px; background: ${ach.unlocked ? '#4CAF50' : '#444'};
 +                       border-radius: 5px; opacity: ${ach.unlocked ? '1' : '0.6'};">
 +                ${ach.icon} ${ach.name}${!ach.unlocked ? progress : ' ✓'}
 +            </div>
 +        `;
 +    }
 +    document.getElementById('achievements-list').innerHTML = achievementsHTML;
++
 +    // Show panel
 +    document.getElementById('stats-panel').style.display = 'block';
++
 +    // Add close button listener
 +    document.getElementById('close-stats-btn').onclick = () => {
 +        document.getElementById('stats-panel').style.display = 'none';
 +    };
 +}
++
 +// Make selectSkin global
 +window.selectSkin = function(skinId) {
 +    if (unlockedSkins[skinId]) {
 +        currentSkin = skinId;
 +        saveGame();
 +        openStatsPanel(); // Refresh display
 +        notifications.push(new Notification(`Skin changed to ${skinId}!`, color(100, 255, 100)));
 +    }
 +}
++
 +// ============================================
 +// PHASE 5: ACHIEVEMENTS & COSMETICS
 +// ============================================
++
 +function checkAchievements() {
 +    // Night Owl - Survive X nights
 +    if (!achievements.nightOwl.unlocked) {
 +        achievements.nightOwl.progress = nightsSurvived;
 +        if (nightsSurvived >= achievements.nightOwl.target) {
 +            unlockAchievement('nightOwl');
 +        }
 +    }
++
 +    // Silk Master - 15+ strands at once
 +    if (!achievements.silkMaster.unlocked) {
 +        let activeStrands = webStrands.filter(s => !s.broken).length;
 +        achievements.silkMaster.progress = max(achievements.silkMaster.progress, activeStrands);
 +        if (activeStrands >= achievements.silkMaster.target) {
 +            unlockAchievement('silkMaster');
 +        }
 +    }
++
 +    // Wind Rider - Jump during wind
 +    if (!achievements.windRider.unlocked && achievements.windRider.progress >= achievements.windRider.target) {
 +        unlockAchievement('windRider');
 +    }
++
 +    // Thief Defender
 +    if (!achievements.thiefDefender.unlocked && stats.thievesScared >= achievements.thiefDefender.target) {
 +        achievements.thiefDefender.progress = stats.thievesScared;
 +        unlockAchievement('thiefDefender');
 +    }
++
 +    // Queen Slayer
 +    if (!achievements.queenSlayer.unlocked) {
 +        achievements.queenSlayer.progress = stats.queensCaught;
 +        if (stats.queensCaught >= achievements.queenSlayer.target) {
 +            unlockAchievement('queenSlayer');
 +        }
 +    }
++
 +    // Galaxy Unlock - 15 nights
 +    if (!achievements.galaxyUnlock.unlocked) {
 +        achievements.galaxyUnlock.progress = nightsSurvived;
 +        if (nightsSurvived >= achievements.galaxyUnlock.target) {
 +            unlockAchievement('galaxyUnlock');
 +            unlockedSkins.galaxy = true;
 +        }
 +    }
++
 +    // Golden Hunter - 100 golden flies
 +    if (!achievements.goldenHunter.unlocked) {
 +        achievements.goldenHunter.progress = stats.goldenCaught;
 +        if (stats.goldenCaught >= achievements.goldenHunter.target) {
 +            unlockAchievement('goldenHunter');
 +            unlockedSkins.golden = true;
 +        }
 +    }
++
 +    // Web Master - 500 total flies
 +    if (!achievements.webMaster.unlocked) {
 +        achievements.webMaster.progress = stats.totalFliesCaught;
 +        if (stats.totalFliesCaught >= achievements.webMaster.target) {
 +            unlockAchievement('webMaster');
 +            unlockedSkins.rainbow = true;
 +        }
 +    }
++
 +    // Speedrunner - 30 flies before night 5
 +    if (!achievements.speedrunner.unlocked && currentNight < 5 && stats.totalFliesCaught >= 30) {
 +        unlockAchievement('speedrunner');
 +    }
 +}
++
 +function checkNightAchievements() {
 +    // Called at end of night
++
 +    // Feast - 20 flies munched in one night
 +    if (!achievements.feast.unlocked && stats.fliesMunchedInCurrentNight >= achievements.feast.target) {
 +        achievements.feast.progress = stats.fliesMunchedInCurrentNight;
 +        unlockAchievement('feast');
 +    }
++
 +    // Architect - Catch 5 flies without munching
 +    if (!achievements.architect.unlocked && stats.fliesCaughtWithoutMunch >= achievements.architect.target) {
 +        achievements.architect.progress = stats.fliesCaughtWithoutMunch;
 +        unlockAchievement('architect');
 +    }
++
 +    // Untouchable - No strands lost
 +    if (!achievements.untouchable.unlocked && stats.strandsLostInNight === 0) {
 +        unlockAchievement('untouchable');
 +    }
++
 +    // Shadow Predator - 50 flies in one night
 +    if (!achievements.shadowPredator.unlocked && fliesCaught >= achievements.shadowPredator.target) {
 +        achievements.shadowPredator.progress = fliesCaught;
 +        unlockAchievement('shadowPredator');
 +        unlockedSkins.shadow = true;
 +    }
++
 +    // Reset night-specific counters
 +    stats.fliesMunchedInCurrentNight = 0;
 +    stats.fliesCaughtWithoutMunch = fliesCaught;
 +    stats.strandsLostInNight = 0;
 +}
++
 +function checkDawnAchievements() {
 +    // Perfect Dawn - no bird hits
 +    if (!achievements.perfectDawn.unlocked && stats.birdHitsTaken === 0) {
 +        unlockAchievement('perfectDawn');
 +        stats.perfectDawns++;
 +    }
++
 +    // Exhaustion Master - survive with < 20 stamina
 +    if (!achievements.exhaustionMaster.unlocked && jumpStamina < 20) {
 +        unlockAchievement('exhaustionMaster');
 +    }
++
 +    // Reset dawn counter
 +    stats.birdHitsTaken = 0;
 +}
++
 +function unlockAchievement(achievementKey) {
 +    let achievement = achievements[achievementKey];
 +    if (achievement.unlocked) return;
++
 +    achievement.unlocked = true;
 +    achievementQueue.push(achievement);
++
 +    // Save to localStorage
 +    saveGame();
 +}
++
 +function displayAchievements() {
 +    // Show queued achievements
 +    if (!showingAchievement && achievementQueue.length > 0) {
 +        showingAchievement = achievementQueue.shift();
 +        achievementDisplayTimer = 240; // 4 seconds
 +    }
++
 +    // Display current achievement
 +    if (showingAchievement && achievementDisplayTimer > 0) {
 +        push();
++
 +        // Background
 +        let alpha = achievementDisplayTimer > 200 ? 255 : map(achievementDisplayTimer, 0, 40, 0, 255);
 +        fill(20, 20, 40, alpha * 0.9);
 +        stroke(255, 215, 0, alpha);
 +        strokeWeight(3);
 +        rectMode(CENTER);
 +        rect(width / 2, 100, 400, 80, 10);
++
 +        // Icon
 +        textAlign(CENTER);
 +        textSize(30);
 +        fill(255, 255, 255, alpha);
 +        text(showingAchievement.icon, width / 2 - 150, 105);
++
 +        // Text
 +        textSize(20);
 +        fill(255, 215, 0, alpha);
 +        text("ACHIEVEMENT UNLOCKED!", width / 2, 85);
++
 +        textSize(16);
 +        fill(255, 255, 255, alpha);
 +        text(showingAchievement.name, width / 2, 105);
++
 +        textSize(12);
 +        fill(200, 200, 200, alpha);
 +        text(showingAchievement.desc, width / 2, 125);
++
 +        pop();
++
 +        achievementDisplayTimer--;
 +        if (achievementDisplayTimer <= 0) {
 +            showingAchievement = null;
 +        }
+     }
+ }
 +function saveGame() {
 +    // Save to localStorage
 +    let saveData = {
 +        achievements: achievements,
 +        stats: stats,
 +        unlockedSkins: unlockedSkins,
 +        currentSkin: currentSkin,
 +        upgrades: upgrades,
 +        playerPoints: playerPoints,
 +        nightsSurvived: nightsSurvived,
 +        currentNight: currentNight
 +    };
++
 +    localStorage.setItem('cobGameSave', JSON.stringify(saveData));
 +}
++
 +function loadGame() {
 +    let saveData = localStorage.getItem('cobGameSave');
 +    if (saveData) {
 +        let data = JSON.parse(saveData);
 +        achievements = data.achievements || achievements;
 +        stats = data.stats || stats;
 +        unlockedSkins = data.unlockedSkins || unlockedSkins;
 +        currentSkin = data.currentSkin || 'default';
 +        upgrades = data.upgrades || upgrades;
 +        playerPoints = data.playerPoints || 0;
 +        nightsSurvived = data.nightsSurvived || 0;
 +        currentNight = data.currentNight || 1;
++
 +        // Apply upgrades
 +        applyUpgradeEffects();
 +    }
 +}
++
 +// ============================================
 +// PHASE 4B: NIGHT THREATS
 +// ============================================
++
 +function spawnThiefBird() {
 +    // Check if there are caught flies to steal
 +    let caughtFlies = flies.filter(f => f.stuck || f.caught);
 +    if (caughtFlies.length === 0) return;
++
 +    // Create a thief bird
 +    let thief = new Bird('swoop', true);
 +    thief.active = true;
 +    thief.attackDelay = 60; // Attack quickly
 +    birds.push(thief);
++
 +    // PHASE 5: Track thief scared if spider is near
 +    if (dist(spider.pos.x, spider.pos.y, caughtFlies[0].pos.x, caughtFlies[0].pos.y) < 80) {
 +        stats.thievesScared++;
 +    }
++
 +    // Visual warning
 +    push();
 +    textAlign(CENTER);
 +    textSize(30);
 +    fill(200, 50, 200);
 +    stroke(0);
 +    strokeWeight(3);
 +    text("THIEF!", width / 2, height / 2);
 +    pop();
 +}
++
 +function startWindGust() {
 +    windActive = true;
 +    windDirection = random() < 0.5 ? 0 : PI; // Left or right
 +    windStrength = random(2, 5); // Variable strength
 +    windDuration = random(300, 600); // 5-10 seconds
 +    windTimer = 0;
 +    windParticles = [];
++
 +    // Notification
 +    let direction = windDirection === 0 ? "→" : "←";
 +    notifications.push(new Notification(`Wind gust ${direction}`, color(200, 200, 255)));
 +}
++
 +function updateWind() {
 +    if (!windActive) return;
++
 +    windTimer++;
++
 +    // Fade in and out
 +    if (windTimer < 60) {
 +        // Fade in
 +        windStrength = lerp(0, windStrength, windTimer / 60);
 +    } else if (windTimer > windDuration - 60) {
 +        // Fade out
 +        windStrength = lerp(windStrength, 0, (windTimer - (windDuration - 60)) / 60);
 +    }
++
 +    // End wind
 +    if (windTimer >= windDuration) {
 +        windActive = false;
 +        windTimer = 0;
 +        windParticles = [];
 +        nextWindTime = frameCount + random(1800, 3600); // 30-60 seconds until next wind
 +    }
 +}
++
 +// ============================================
 +// PHASE 4: DAWN SURVIVAL FUNCTIONS
 +// ============================================
++
 +function spawnDawnBirds() {
 +    birds = [];
++
 +    // Start with 3 birds, add 1 every 3 nights (capped at 6)
 +    let numBirds = min(3 + Math.floor((currentNight - 1) / 3), 6);
++
 +    // Mix of attack patterns
 +    let patterns = ['dive', 'dive', 'glide']; // More dive birds
 +    if (currentNight >= 3) patterns.push('circle');
 +    if (currentNight >= 6) patterns.push('dive', 'glide');
++
 +    for (let i = 0; i < numBirds; i++) {
 +        let pattern = random(patterns);
 +        let bird = new Bird(pattern);
 +        bird.active = true;
 +        // Stagger attack delays
 +        bird.attackDelay = 60 + i * 60; // 1 second apart initially
 +        birds.push(bird);
 +    }
++
 +    // Notification
 +    notifications.push(new Notification(`DAWN! ${numBirds} birds hunting!`, color(255, 150, 100)));
 +}
++
 +// ============================================
 +// PHASE 3: UPGRADE SHOP FUNCTIONS
 +// ============================================
++
 +function openUpgradeShop() {
 +    if (currentNight <= 1) return; // No shop on first night
++
 +    shopOpen = true;
 +    noLoop(); // Pause the game
++
 +    // Calculate points from flies caught this session
 +    playerPoints = totalFliesCaught;
++
 +    // Update shop UI
 +    document.getElementById('upgrade-shop').style.display = 'block';
 +    document.getElementById('available-points').textContent = playerPoints;
++
 +    // Populate upgrade lists
 +    updateShopDisplay();
++
 +    // Add continue button listener
 +    document.getElementById('continue-btn').onclick = closeUpgradeShop;
 +}
++
 +function closeUpgradeShop() {
 +    shopOpen = false;
 +    document.getElementById('upgrade-shop').style.display = 'none';
 +    loop(); // Resume the game
 +}
++
 +function updateShopDisplay() {
 +    let tier1HTML = '';
 +    let tier2HTML = '';
 +    let tier1Count = 0;
++
 +    // Count tier 1 upgrades
 +    for (let key in upgrades) {
 +        if (upgrades[key].tier === 1 && upgrades[key].level > 0) {
 +            tier1Count++;
 +        }
 +    }
++
 +    // Display Tier 1 upgrades
 +    for (let key in upgrades) {
 +        let upgrade = upgrades[key];
 +        if (upgrade.tier === 1) {
 +            let canAfford = playerPoints >= upgrade.cost;
 +            let maxed = upgrade.level >= upgrade.maxLevel;
 +            let buttonText = maxed ? 'MAXED' : `Buy (${upgrade.cost} pts)`;
 +            let buttonDisabled = maxed || !canAfford ? 'disabled' : '';
 +            let opacity = maxed ? '0.5' : '1';
++
 +            tier1HTML += `
 +                <div style="margin: 10px 0; padding: 10px; background: rgba(0,0,0,0.3);
 +                           border-radius: 10px; opacity: ${opacity};">
 +                    <div style="display: flex; justify-content: space-between; align-items: center;">
 +                        <div>
 +                            <span style="font-size: 24px;">${upgrade.icon}</span>
 +                            <strong>${upgrade.name}</strong> (${upgrade.level}/${upgrade.maxLevel})
 +                            <br><small>${upgrade.description}</small>
 +                        </div>
 +                        <button onclick="buyUpgrade('${key}')" ${buttonDisabled}
 +                                style="padding: 5px 15px; background: ${canAfford && !maxed ? '#4CAF50' : '#666'};
 +                                      color: white; border: none; border-radius: 5px; cursor: ${canAfford && !maxed ? 'pointer' : 'not-allowed'};">
 +                            ${buttonText}
 +                        </button>
 +                    </div>
 +                </div>
 +            `;
 +        }
 +    }
++
 +    // Display Tier 2 upgrades
 +    for (let key in upgrades) {
 +        let upgrade = upgrades[key];
 +        if (upgrade.tier === 2) {
 +            let unlocked = tier1Count >= upgrade.requires;
 +            let canAfford = playerPoints >= upgrade.cost && unlocked;
 +            let maxed = upgrade.level >= upgrade.maxLevel;
 +            let buttonText = maxed ? 'MAXED' : !unlocked ? `Needs ${upgrade.requires} Tier 1` : `Buy (${upgrade.cost} pts)`;
 +            let buttonDisabled = maxed || !canAfford ? 'disabled' : '';
 +            let opacity = !unlocked ? '0.3' : maxed ? '0.5' : '1';
++
 +            tier2HTML += `
 +                <div style="margin: 10px 0; padding: 10px; background: rgba(0,0,0,0.3);
 +                           border-radius: 10px; opacity: ${opacity};">
 +                    <div style="display: flex; justify-content: space-between; align-items: center;">
 +                        <div>
 +                            <span style="font-size: 24px;">${upgrade.icon}</span>
 +                            <strong>${upgrade.name}</strong> (${upgrade.level}/${upgrade.maxLevel})
 +                            <br><small>${upgrade.description}</small>
 +                        </div>
 +                        <button onclick="buyUpgrade('${key}')" ${buttonDisabled}
 +                                style="padding: 5px 15px; background: ${canAfford && !maxed ? '#FF69B4' : '#666'};
 +                                      color: white; border: none; border-radius: 5px; cursor: ${canAfford && !maxed ? 'pointer' : 'not-allowed'};">
 +                            ${buttonText}
 +                        </button>
 +                    </div>
 +                </div>
 +            `;
 +        }
 +    }
++
 +    document.getElementById('upgrade-list-tier1').innerHTML = tier1HTML;
 +    document.getElementById('upgrade-list-tier2').innerHTML = tier2HTML;
++
 +    // Update tier 2 section opacity
 +    document.getElementById('tier2-upgrades').style.opacity = tier1Count >= 2 ? '1' : '0.5';
 +}
++
 +// Make buyUpgrade global so onclick can access it
 +window.buyUpgrade = function(upgradeKey) {
 +    let upgrade = upgrades[upgradeKey];
 +    if (!upgrade) return;
++
 +    // Check tier requirements
 +    if (upgrade.tier === 2) {
 +        let tier1Count = 0;
 +        for (let key in upgrades) {
 +            if (upgrades[key].tier === 1 && upgrades[key].level > 0) {
 +                tier1Count++;
 +            }
 +        }
 +        if (tier1Count < upgrade.requires) return;
 +    }
++
 +    // Check if can afford and not maxed
 +    if (playerPoints >= upgrade.cost && upgrade.level < upgrade.maxLevel) {
 +        playerPoints -= upgrade.cost;
 +        upgrade.level++;
++
 +        // Apply upgrade effects immediately
 +        applyUpgradeEffects();
++
 +        // Update display
 +        document.getElementById('available-points').textContent = playerPoints;
 +        updateShopDisplay();
++
 +        // Show notification
 +        notifications.push(new Notification(`Upgraded ${upgrade.name}!`, color(100, 255, 100)));
 +    }
 +}
++
 +function applyUpgradeEffects() {
 +    // Reset to base values
 +    spider.jumpPower = 12;
 +    maxWebSilk = 100;
 +    silkDrainRate = 2;
 +    spider.munchCooldownMax = 30; // Add this property to spider
++
 +    // Apply Tier 1 upgrades
 +    if (upgrades.strongLegs.level > 0) {
 +        spider.jumpPower = 12 * (1 + 0.15 * upgrades.strongLegs.level);
 +    }
++
 +    if (upgrades.silkGlands.level > 0) {
 +        maxWebSilk = 100 + (20 * upgrades.silkGlands.level);
 +        webSilk = min(webSilk, maxWebSilk); // Cap current silk to new max
 +    }
++
 +    if (upgrades.efficientSpinning.level > 0) {
 +        silkDrainRate = 2 * (1 - 0.2 * upgrades.efficientSpinning.level);
 +    }
++
 +    if (upgrades.quickMunch.level > 0) {
 +        spider.munchCooldownMax = 30 * (1 - 0.3 * upgrades.quickMunch.level);
 +    }
++
 +    // Tier 2 upgrades are handled in their respective functions
 +}
++
 +function spawnNightFlies() {
 +    // Base flies + more per night
 +    let numFlies = 5 + currentNight;
++
 +    // Apply difficulty scaling
 +    let flySpeedMultiplier = 1 + Math.floor((currentNight - 1) / 3) * 0.1; // +10% every 3 nights
++
 +    for (let i = 0; i < numFlies; i++) {
 +        // PHASE 2: Spawn different fly types with rarity
 +        let flyType = 'regular';
 +        let roll = random();
++
 +        if (currentNight >= 5 && roll < 0.05) {
 +            // Queen flies: 5% chance after night 5
 +            flyType = 'queen';
 +        } else if (roll < 0.1) {
 +            // Golden flies: 10% chance
 +            flyType = 'golden';
 +        } else if (roll < 0.25) {
 +            // Moths: 15% chance
 +            flyType = 'moth';
 +        }
++
 +        let fly = new Fly(flyType);
 +        fly.baseSpeed = baseFlySpeed * flySpeedMultiplier;
 +        if (flyType === 'golden') fly.baseSpeed *= 1.3; // Golden are always faster
 +        if (flyType === 'moth') fly.baseSpeed *= 0.8; // Moths are slower
 +        if (flyType === 'queen') fly.baseSpeed *= 0.5; // Queens are much slower
 +        fly.currentSpeed = fly.baseSpeed;
 +        flies.push(fly);
 +    }
++
 +    // PHASE 2: Guarantee at least 1 golden fly per night
 +    if (flies.filter(f => f.type === 'golden').length === 0) {
 +        let goldenFly = new Fly('golden');
 +        goldenFly.baseSpeed = baseFlySpeed * flySpeedMultiplier * 1.3;
 +        goldenFly.currentSpeed = goldenFly.baseSpeed;
 +        flies.push(goldenFly);
 +        // Add notification
 +        notifications.push(new Notification("Golden Firefly Appeared! ✨", color(255, 215, 0)));
 +    }
++
 +    // PHASE 2: Guarantee a queen on nights 10+
 +    if (currentNight >= 10 && flies.filter(f => f.type === 'queen').length === 0) {
 +        let queenFly = new Fly('queen');
 +        queenFly.baseSpeed = baseFlySpeed * flySpeedMultiplier * 0.5;
 +        queenFly.currentSpeed = queenFly.baseSpeed;
 +        flies.push(queenFly);
 +        // Add notification
 +        notifications.push(new Notification("Queen Firefly Arrived! 👑", color(200, 100, 255)));
 +    }
++
 +    // Spawn some food boxes
 +    for (let i = 0; i < 3; i++) {
 +        spawnFoodBox();
 +    }
 +}
++
 +function escapeFlies() {
 +    // Store escaping flies (could be used for visual effect later)
 +    fliesEscaped = [];
++
 +    for (let fly of flies) {
 +        if (!fly.stuck) {
 +            fliesEscaped.push({
 +                x: fly.pos.x,
 +                y: fly.pos.y,
 +                type: fly.type // PHASE 2: Store actual type
 +            });
 +        }
 +    }
++
 +    // Clear all flies
 +    flies = [];
 +}
++
 +function degradeWebs() {
 +    // Degrade each web strand by 10%
 +    for (let strand of webStrands) {
 +        strand.strength *= 0.9;
++
 +        // Very weak strands break
 +        if (strand.strength < 0.3) {
 +            strand.broken = true;
 +        }
++
 +        // Add slight sag to simulate aging
 +        if (strand.path && strand.path.length > 2) {
 +            for (let i = 1; i < strand.path.length - 1; i++) {
 +                strand.path[i].y += random(2, 5);
 +            }
 +        }
 +    }
++
 +    // Create some particles to show degradation
 +    for (let i = 0; i < 10; i++) {
 +        let p = new Particle(random(width), random(height));
 +        p.color = color(255, 255, 255, 100);
 +        p.vel = createVector(0, random(0.5, 2));
 +        p.size = 2;
 +        particles.push(p);
 +    }
 +}
++
 +function prepareDusk() {
 +    // Return some flies for the next night (visual continuity)
 +    let returnCount = min(3, fliesEscaped.length);
 +    for (let i = 0; i < returnCount; i++) {
 +        // PHASE 2: Recreate the same type of fly that escaped
 +        let fly = new Fly(fliesEscaped[i].type);
 +        // Start from edge but move toward previous positions
 +        fly.wanderAngle = atan2(
 +            fliesEscaped[i].y - fly.pos.y,
 +            fliesEscaped[i].x - fly.pos.x
 +        );
 +        flies.push(fly);
 +    }
 +}
++
 +function drawSun() {
 +    push();
 +    noStroke();
++
 +    // Sun glow
 +    fill(255, 230, 100, sunOpacity * 0.3);
 +    ellipse(width - 150, sunY, 120);
 +    fill(255, 220, 50, sunOpacity * 0.5);
 +    ellipse(width - 150, sunY, 80);
 +    fill(255, 200, 0, sunOpacity);
 +    ellipse(width - 150, sunY, 50);
++
 +    pop();
 +}
++
 +// ============================================
 +// ORIGINAL FUNCTIONS WITH PHASE 1 UPDATES
 +// ============================================
++
  function updateSkyColors() {
 -    if (gamePhase === 'DUSK') {
 -        currentSkyColor1 = lerpColor(color(135, 206, 235), color(255, 140, 90), phaseTimer / DUSK_DURATION);
 +    // PHASE 1 - Complete rewrite for full cycle
 +    if (gamePhase === 'DAWN') {
 +        // Dawn: dark purple/blue to soft orange/pink
 +        currentSkyColor1 = lerpColor(color(70, 70, 120), color(255, 200, 150), phaseTimer / DAWN_DURATION);
 +        currentSkyColor2 = lerpColor(color(30, 30, 60), color(255, 150, 100), phaseTimer / DAWN_DURATION);
 +        moonOpacity = lerp(255, 0, phaseTimer / DAWN_DURATION);
 +        moonY = lerp(60, -50, phaseTimer / DAWN_DURATION);
 +        sunY = lerp(height + 50, height - 100, phaseTimer / DAWN_DURATION);
 +        sunOpacity = lerp(0, 100, phaseTimer / DAWN_DURATION);
 +    } else if (gamePhase === 'DAWN_TO_DAY') {
 +        let t = phaseTimer / TRANSITION_DURATION;
 +        currentSkyColor1 = lerpColor(color(255, 200, 150), color(135, 206, 235), t);
 +        currentSkyColor2 = lerpColor(color(255, 150, 100), color(255, 255, 200), t);
 +        sunY = lerp(height - 100, height * 0.3, t);
 +        sunOpacity = lerp(100, 255, t);
 +    } else if (gamePhase === 'DAY') {
 +        // Day: bright blue sky
 +        currentSkyColor1 = color(135, 206, 235);
 +        currentSkyColor2 = color(255, 255, 200);
 +        sunY = lerp(height * 0.3, 100, phaseTimer / DAY_DURATION);
 +        sunOpacity = 255;
 +    } else if (gamePhase === 'DAY_TO_DUSK') {
 +        let t = phaseTimer / TRANSITION_DURATION;
 +        currentSkyColor1 = lerpColor(color(135, 206, 235), color(255, 140, 90), t);
 +        currentSkyColor2 = lerpColor(color(255, 255, 200), color(255, 183, 77), t);
 +        sunY = lerp(100, 60, t);
 +        sunOpacity = lerp(255, 150, t);
 +    } else if (gamePhase === 'DUSK') {
 +        // Dusk: orange/purple sunset
 +        currentSkyColor1 = lerpColor(color(255, 140, 90), color(200, 100, 120), phaseTimer / DUSK_DURATION);
          currentSkyColor2 = lerpColor(color(255, 183, 77), color(120, 60, 120), phaseTimer / DUSK_DURATION);
 -    } else if (gamePhase === 'TRANSITION') {
 +        sunY = lerp(60, -50, phaseTimer / DUSK_DURATION);
 +        sunOpacity = lerp(150, 0, phaseTimer / DUSK_DURATION);
 +    } else if (gamePhase === 'DUSK_TO_NIGHT') {
          let t = phaseTimer / TRANSITION_DURATION;
 -        currentSkyColor1 = lerpColor(color(255, 140, 90), color(25, 25, 112), t);
 +        currentSkyColor1 = lerpColor(color(200, 100, 120), color(25, 25, 112), t);
          currentSkyColor2 = lerpColor(color(120, 60, 120), color(0, 0, 40), t);
          moonOpacity = t * 255;
          moonY = lerp(100, 60, t);
      } else if (gamePhase === 'NIGHT') {
 +        // Night: dark blue/purple
          currentSkyColor1 = color(25, 25, 112);
          currentSkyColor2 = color(0, 0, 40);
          moonOpacity = 255;
 +        moonY = 60;
 +    } else if (gamePhase === 'NIGHT_TO_DAWN') {
 +        let t = phaseTimer / TRANSITION_DURATION;
 +        currentSkyColor1 = lerpColor(color(25, 25, 112), color(70, 70, 120), t);
 +        currentSkyColor2 = lerpColor(color(0, 0, 40), color(30, 30, 60), t);
+     }
+ }
          noStroke();
 -        // Base color
 -        if (gamePhase === 'NIGHT') {
 +        // Base color - PHASE 1: Update for all phases
 +        if (gamePhase === 'NIGHT' || gamePhase === 'NIGHT_TO_DAWN') {
              fill(30, 15, 5);
          } else {
              fill(92, 51, 23);
          rotate((branch.side === 'right' ? -1 : 1) * PI/6);
          // Fork branch
 -        if (gamePhase === 'NIGHT') {
 +        if (gamePhase === 'NIGHT' || gamePhase === 'NIGHT_TO_DAWN') {
              fill(35, 18, 6);
          } else {
              fill(102, 58, 28);
          pop();
          // Add lighter highlights
 -        if (gamePhase === 'NIGHT') {
 +        if (gamePhase === 'NIGHT' || gamePhase === 'NIGHT_TO_DAWN') {
              fill(50, 25, 10, 150);
          } else {
              fill(139, 90, 43, 180);
          // Knots
          noStroke();
 -        if (gamePhase === 'NIGHT') {
 +        if (gamePhase === 'NIGHT' || gamePhase === 'NIGHT_TO_DAWN') {
              fill(40, 20, 5);
          } else {
              fill(80, 40, 15);
          pop();
          // Small twigs - properly attached to the rotated branch
 -        stroke(gamePhase === 'NIGHT' ? color(40, 20, 0) : color(101, 67, 33));
 +        stroke(gamePhase === 'NIGHT' || gamePhase === 'NIGHT_TO_DAWN' ? color(40, 20, 0) : color(101, 67, 33));
          // Just add a couple simple twigs for visual interest
          strokeWeight(3);
              ellipse(2, 2, leaf.width, leaf.height);
              // Leaf body
 -            if (gamePhase === 'NIGHT') {
 +            if (gamePhase === 'NIGHT' || gamePhase === 'NIGHT_TO_DAWN') {
                  fill(20, 40, 20);
              } else {
                  fill(34, 139, 34);
+     }
+ }
 -function drawMoon()
 -{
 +function drawMoon() {
      push();
      noStroke();
+ }
  function updateResources() {
 -    webSilk = min(webSilk + silkRechargeRate, maxWebSilk);
 +    // PHASE 1 - Apply difficulty scaling to silk regen
 +    let silkPenalty = Math.floor((currentNight - 1) / 5) * 0.05;
 +    let adjustedRegenRate = silkRechargeRate * (1 - silkPenalty);
++
 +    webSilk = min(webSilk + adjustedRegenRate, maxWebSilk);
      // Handle silk drain for both keyboard and touch
      if (isDeployingWeb && spider.isAirborne && (spacePressed || touchHolding) && webSilk > 0) {
      // Update control instructions based on device
      let isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
 +    // PHASE 3: Add upgrade-specific controls
 +    let controls = [];
      if (isMobile) {
 -        document.getElementById('info').innerHTML =
 -            'Tap to jump • Hold mid-air for web • Double-tap spider to munch!<br>' +
 -            'Web Strands: <span id="strand-count">0</span><br>' +
 -            'Flies Caught: <span id="flies-caught">0</span> | Munched: <span id="flies-munched">0</span>';
 +        controls.push('Tap to jump • Hold mid-air for web • Double-tap spider to munch!');
      } else {
 -        document.getElementById('info').innerHTML =
 -            'Click to jump • Space to spin web • Shift to munch!<br>' +
 -            'Web Strands: <span id="strand-count">0</span><br>' +
 -            'Flies Caught: <span id="flies-caught">0</span> | Munched: <span id="flies-munched">0</span>';
 +        controls.push('Click to jump • Space to spin web • Shift to munch!');
 +    }
++
 +    // Add upgrade controls
 +    if (upgrades.powerJump && upgrades.powerJump.level > 0) {
 +        controls.push('Hold click to charge jump!');
 +    }
 +    if (upgrades.silkRecycle && upgrades.silkRecycle.level > 0) {
 +        controls.push('Press R to recycle web!');
+     }
 -    document.getElementById('strand-count').textContent = webStrands.length;
 +    document.getElementById('info').innerHTML =
 +        controls.join('<br>') + '<br>' +
 +        'Web Strands: <span id="strand-count">0</span><br>' +
 +        'Flies Caught: <span id="flies-caught">0</span> | Munched: <span id="flies-munched">0</span><br>' +
 +        'Total Score: <span id="total-score">0</span>';
++
 +    // PHASE 1 UPDATES
 +    document.getElementById('strand-count').textContent = webStrands.filter(s => !s.broken).length;
      document.getElementById('flies-caught').textContent = fliesCaught;
      document.getElementById('flies-munched').textContent = fliesMunched;
 -    document.getElementById('phase').textContent = gamePhase === 'TRANSITION' ? 'NIGHTFALL' : gamePhase;
 +    document.getElementById('total-score').textContent = totalFliesCaught;
++
 +    // Update phase display
 +    let phaseDisplay = gamePhase;
 +    if (gamePhase === 'DUSK_TO_NIGHT') phaseDisplay = 'NIGHTFALL';
 +    else if (gamePhase === 'NIGHT_TO_DAWN') phaseDisplay = 'DAWN BREAKS';
 +    else if (gamePhase === 'DAWN_TO_DAY') phaseDisplay = 'SUNRISE';
 +    else if (gamePhase === 'DAY_TO_DUSK') phaseDisplay = 'SUNSET';
 +    document.getElementById('phase').textContent = phaseDisplay;
++
 +    // Update night counter
 +    document.getElementById('night-counter').textContent = `Night ${currentNight}`;
 +    // Update timer based on phase
 +    let timerText = '';
      if (gamePhase === 'DUSK') {
          let timeLeft = Math.ceil((DUSK_DURATION - phaseTimer) / 60);
 -        document.getElementById('timer').textContent = `${timeLeft}s to prepare!`;
 -    } else if (gamePhase === 'TRANSITION') {
 -        document.getElementById('timer').textContent = 'Night approaches...';
 -    } else {
 -        document.getElementById('timer').textContent = `${flies.length} flies active`;
 +        timerText = `${timeLeft}s to prepare!`;
 +    } else if (gamePhase === 'NIGHT') {
 +        let timeLeft = Math.ceil((NIGHT_DURATION - phaseTimer) / 60);
 +        // PHASE 2: Count different fly types
 +        let regularCount = flies.filter(f => f.type === 'regular').length;
 +        let goldenCount = flies.filter(f => f.type === 'golden').length;
 +        let mothCount = flies.filter(f => f.type === 'moth').length;
 +        let queenCount = flies.filter(f => f.type === 'queen').length;
++
 +        timerText = `${timeLeft}s • ${flies.length} flies`;
++
 +        // Show special fly counts if any
 +        if (goldenCount > 0 || mothCount > 0 || queenCount > 0) {
 +            let specialCounts = [];
 +            if (queenCount > 0) specialCounts.push(`${queenCount}👑`);
 +            if (goldenCount > 0) specialCounts.push(`${goldenCount}✨`);
 +            if (mothCount > 0) specialCounts.push(`${mothCount}🦋`);
 +            timerText += ` (${specialCounts.join(' ')})`;
 +        }
 +    } else if (gamePhase === 'DAWN') {
 +        let timeLeft = Math.ceil((DAWN_DURATION - phaseTimer) / 60);
 +        // PHASE 4: Show birds and exhaustion status
 +        let activeBirds = birds.filter(b => b.attacking).length;
 +        timerText = `${timeLeft}s • ${birds.length} birds`;
 +        if (activeBirds > 0) timerText += ` (${activeBirds} attacking!)`;
 +        if (isExhausted) timerText += ' EXHAUSTED!';
 +    } else if (gamePhase === 'DAY') {
 +        timerText = 'Rest & repair';
 +    } else if (gamePhase.includes('TO')) {
 +        timerText = '...';
+     }
 +    document.getElementById('timer').textContent = timerText;
 -    let meterPercent = (webSilk / maxWebSilk) * 100;
 -    document.getElementById('web-meter-fill').style.width = meterPercent + '%';
 +    // Show difficulty indicators
 +    if (currentNight > 1) {
 +        let speedBonus = Math.floor((currentNight - 1) / 3) * 10;
 +        let silkPenalty = Math.floor((currentNight - 1) / 5) * 5;
++
 +        if (speedBonus > 0 || silkPenalty > 0) {
 +            let diffText = [];
 +            if (speedBonus > 0) diffText.push(`Flies +${speedBonus}% speed`);
 +            if (silkPenalty > 0) diffText.push(`Silk -${silkPenalty}% regen`);
++
 +            // Add a small difficulty indicator if needed
 +            if (gamePhase === 'DUSK' && phaseTimer < 180) {
 +                document.getElementById('timer').textContent += ` (${diffText.join(', ')})`;
 +            }
 +        }
 +    }
 -    if (webSilk < 20) {
 -        let flash = sin(frameCount * 0.2) * 0.5 + 0.5;
 -        document.getElementById('web-meter-fill').style.background =
 -            `linear-gradient(90deg, rgb(255, ${100 + flash * 100}, ${100 + flash * 100}), rgb(255, ${150 + flash * 50}, ${150 + flash * 50}))`;
 +    // PHASE 4: Update meter based on phase
 +    if (gamePhase === 'DAWN') {
 +        // Show stamina instead of silk during dawn
 +        document.getElementById('web-meter-label').textContent = 'STAMINA';
 +        let staminaPercent = (jumpStamina / maxJumpStamina) * 100;
 +        document.getElementById('web-meter-fill').style.width = staminaPercent + '%';
++
 +        // Color based on stamina level
 +        if (jumpStamina < jumpCost) {
 +            // Exhausted - red flash
 +            let flash = sin(frameCount * 0.3) * 0.5 + 0.5;
 +            document.getElementById('web-meter-fill').style.background =
 +                `linear-gradient(90deg, rgb(255, ${50 + flash * 50}, ${50 + flash * 50}), rgb(200, ${30 + flash * 30}, ${30 + flash * 30}))`;
 +        } else if (jumpStamina < maxJumpStamina * 0.3) {
 +            // Very tired - orange-red
 +            document.getElementById('web-meter-fill').style.background =
 +                'linear-gradient(90deg, #FF6B35, #FF4444)';
 +        } else if (jumpStamina < maxJumpStamina * 0.5) {
 +            // Tired - orange
 +            document.getElementById('web-meter-fill').style.background =
 +                'linear-gradient(90deg, #FFA500, #FF8C00)';
 +        } else {
 +            // Good stamina - yellow-orange
 +            document.getElementById('web-meter-fill').style.background =
 +                'linear-gradient(90deg, #FFD700, #FFA500)';
 +        }
      } else {
 -        document.getElementById('web-meter-fill').style.background =
 -            'linear-gradient(90deg, #87CEEB, #E0F6FF)';
 +        // Normal silk meter
 +        document.getElementById('web-meter-label').textContent = 'SILK';
 +        let meterPercent = (webSilk / maxWebSilk) * 100;
 +        document.getElementById('web-meter-fill').style.width = meterPercent + '%';
++
 +        if (webSilk < 20) {
 +            let flash = sin(frameCount * 0.2) * 0.5 + 0.5;
 +            document.getElementById('web-meter-fill').style.background =
 +                `linear-gradient(90deg, rgb(255, ${100 + flash * 100}, ${100 + flash * 100}), rgb(255, ${150 + flash * 50}, ${150 + flash * 50}))`;
 +        } else {
 +            document.getElementById('web-meter-fill').style.background =
 +                'linear-gradient(90deg, #87CEEB, #E0F6FF)';
 +        }
+     }
+ }
          spider.munch();
          return false;
+     }
 +    // PHASE 3: Silk Recycle with R key
 +    if (key === 'r' || key === 'R') {
 +        if (upgrades.silkRecycle && upgrades.silkRecycle.level > 0) {
 +            recycleNearbyWeb();
 +        }
 +        return false;
 +    }
 +    // PHASE 5: Stats panel with S key
 +    if (key === 's' || key === 'S') {
 +        if (gamePhase === 'DAY' || gamePhase === 'DUSK') {
 +            openStatsPanel();
 +        }
 +        return false;
 +    }
+ }
  function keyReleased() {
      // Only handle mouse on desktop (not touch devices)
      if (touches.length === 0) {
          if (!spider.isAirborne) {
 -            spider.jump(mouseX, mouseY);
 +            // PHASE 3: Power Jump - start charging if upgrade unlocked
 +            if (upgrades.powerJump && upgrades.powerJump.level > 0) {
 +                chargingJump = true;
 +                jumpChargeTime = 0;
 +            } else {
 +                spider.jump(mouseX, mouseY);
 +            }
+         }
+     }
+ }
  function mouseReleased() {
 -    // No longer needed for web deployment
 +    // PHASE 3: Power Jump - release charged jump
 +    if (chargingJump && !spider.isAirborne) {
 +        let chargeRatio = min(jumpChargeTime / maxJumpCharge, 1);
 +        let chargeMultiplier = 1 + chargeRatio; // 1x to 2x multiplier
 +        spider.jumpChargeVisual = 0;
 +        spider.jump(mouseX, mouseY, chargeMultiplier);
++
 +        // Create charge release particles
 +        if (chargeRatio > 0.5) {
 +            for (let i = 0; i < 10; i++) {
 +                let p = new Particle(spider.pos.x, spider.pos.y);
 +                p.color = color(255, 255, 100);
 +                p.vel = createVector(random(-3, 3), random(-1, 2));
 +                p.size = 5;
 +                particles.push(p);
 +            }
 +        }
 +    }
 +    chargingJump = false;
 +    jumpChargeTime = 0;
 +}
++
 +// PHASE 3: Silk Recycle function
 +function recycleNearbyWeb() {
 +    let recycled = false;
++
 +    for (let i = webStrands.length - 1; i >= 0; i--) {
 +        let strand = webStrands[i];
 +        if (strand.broken) continue;
++
 +        // Check if spider is near any part of the strand
 +        let nearStrand = false;
 +        if (strand.path && strand.path.length > 0) {
 +            for (let point of strand.path) {
 +                if (dist(spider.pos.x, spider.pos.y, point.x, point.y) < 50) {
 +                    nearStrand = true;
 +                    break;
 +                }
 +            }
 +        }
++
 +        if (nearStrand) {
 +            // Recycle the strand
 +            webSilk = min(webSilk + 10, maxWebSilk); // Recover 50% of typical strand cost
++
 +            // Create recycling particles
 +            for (let j = 0; j < strand.path.length; j += 3) {
 +                let point = strand.path[j];
 +                let p = new Particle(point.x, point.y);
 +                p.color = color(150, 255, 150);
 +                p.vel = createVector(
 +                    (spider.pos.x - point.x) * 0.02,
 +                    (spider.pos.y - point.y) * 0.02
 +                );
 +                p.size = 3;
 +                particles.push(p);
 +            }
++
 +            // Remove the strand
 +            webStrands.splice(i, 1);
 +            recycled = true;
++
 +            // Show notification
 +            notifications.push(new Notification("Web Recycled +10 Silk", color(150, 255, 150)));
 +            break; // Only recycle one strand at a time
 +        }
 +    }
++
 +    if (!recycled) {
 +        notifications.push(new Notification("No web nearby to recycle", color(255, 100, 100)));
 +    }
+ }
  function touchStarted() {