zeroed-some/cob / 2fe52d1

-        body {

-            margin: 0;

-            padding: 0;

-            overflow: hidden;

-            background: #000;

-            width: 100vw;

-            height: 100vh;

-            font-family: Arial, sans-serif;

-        }

-        #game-container {

-            position: fixed;

-            top: 0;

-            left: 0;

-            width: 100vw;

-            height: 100vh;

-        }

-        canvas {

-            display: block;

-            width: 100% !important;

-            height: 100% !important;

-        }

-        #info {

-            position: absolute;

-            top: 20px;

-            left: 20px;

-            color: white;

-            font-size: 16px;

-            text-shadow: 2px 2px 4px rgba(0,0,0,0.8);

-            pointer-events: none;

-            z-index: 10;

-            background: rgba(0,0,0,0.3);

-            padding: 10px 15px;

-            border-radius: 8px;

-        }

-        #phase-indicator {

-            position: absolute;

-            top: 20px;

-            right: 20px;

-            color: white;

-            font-size: 20px;

-            font-weight: bold;

-            text-shadow: 2px 2px 4px rgba(0,0,0,0.8);

-            pointer-events: none;

-            z-index: 10;

-            text-align: right;

-            background: rgba(0,0,0,0.3);

-            padding: 10px 15px;

-            border-radius: 8px;

-        }

-        #web-meter {

-            position: absolute;

-            bottom: 30px;

-            left: 50%;

-            transform: translateX(-50%);

-            width: 300px;

-            height: 40px;

-            background: rgba(0,0,0,0.4);

-            border: 3px solid rgba(255,255,255,0.6);

-            border-radius: 20px;

-            overflow: hidden;

-            box-shadow: 0 4px 15px rgba(0,0,0,0.5);

-        }

-        #web-meter-fill {

-            height: 100%;

-            background: linear-gradient(90deg, #87CEEB, #E0F6FF);

-            transition: width 0.3s ease;

-            box-shadow: inset 0 0 15px rgba(255,255,255,0.5);

-        }

-        #web-meter-label {

-            position: absolute;

-            bottom: 75px;

-            left: 50%;

-            transform: translateX(-50%);

-            color: white;

-            font-size: 14px;

-            font-weight: bold;

-            text-shadow: 2px 2px 4px rgba(0,0,0,0.8);

-        }

-        <div id="web-meter-label">WEB SILK</div>

-    <script>

-        let spider;

-        let obstacles = [];

-        let webStrands = [];

-        let flies = [];

-        let foodBoxes = [];

-        let particles = [];

-        let isDeployingWeb = false;

-        let currentStrand = null;

-        let spacePressed = false; // Track spacebar state

-        let isMunching = false;

-        

-        // Web resource management

-        let webSilk = 100;

-        let maxWebSilk = 100;

-        let silkRechargeRate = 0.05;

-        let silkDrainRate = 2;

-        

-        // Game phases

-        let gamePhase = 'DUSK';

-        let phaseTimer = 0;

-        let DUSK_DURATION = 1500; // 25 seconds at 60fps

-        let TRANSITION_DURATION = 180; // 3 seconds

-        let skyColor1, skyColor2, currentSkyColor1, currentSkyColor2;

-        let moonY = 100;

-        let moonOpacity = 0;

-        let fliesCaught = 0;

-        let fliesMunched = 0;

-

-        // Web physics

-        let webNodes = [];

-

-        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; // Range for munching

-                this.munchCooldown = 0;

-            }

-

-            jump(targetX, targetY) {

-                if (!this.canJump) return;

-                

-                let direction = createVector(targetX - this.pos.x, targetY - this.pos.y);

-                direction.normalize();

-                direction.mult(this.jumpPower);

-                

-                this.vel = direction;

-                this.isAirborne = true;

-                this.canJump = false;

-                this.lastAnchorPoint = this.pos.copy();

-            }

-            

-            munch() {

-                if (this.munchCooldown > 0) return;

-                

-                isMunching = true;

-                this.munchCooldown = 30;

-                

-                // Check for flies in munch range

-                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);

-                    if (d < this.munchRadius) {

-                        // Successful munch!

-                        fliesMunched++;

-                        webSilk = min(webSilk + 15, maxWebSilk); // Munching gives good silk

-                        

-                        // Create munch particles

-                        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);

-                        }

-                        

-                        flies.splice(i, 1);

-                        break; // Only munch one fly at a time

-                    }

-                }

-            }

-

-            update() {

-                if (this.isAirborne) {

-                    this.acc.add(this.gravity);

-                }

-                

-                this.vel.add(this.acc);

-                this.vel.limit(this.maxSpeed);

-                this.pos.add(this.vel);

-                this.acc.mult(0);

-                

-                // Update munch cooldown

-                if (this.munchCooldown > 0) {

-                    this.munchCooldown--;

-                    if (this.munchCooldown === 0) {

-                        isMunching = false;

-                    }

-                }

-

-                // Check ground collision

-                if (this.pos.y >= height - this.radius) {

-                    this.pos.y = height - this.radius;

-                    this.land();

-                }

-

-                // 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;

-                }

-

-                // Check ceiling

-                if (this.pos.y <= this.radius) {

-                    this.pos.y = this.radius;

-                    this.vel.y *= -0.5;

-                }

-

-                // Check obstacle collisions

-                for (let obstacle of obstacles) {

-                    if (this.checkObstacleCollision(obstacle)) {

-                        this.landOnObstacle(obstacle);

-                    }

-                }

-

-                // Check web strand collisions

-                for (let strand of webStrands) {

-                    if (this.isAirborne && this.checkStrandCollision(strand)) {

-                        this.landOnStrand(strand);

-                    }

-                }

-                

-                // Check food box collisions

-                for (let i = foodBoxes.length - 1; i >= 0; 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);

-                    }

-                }

-            }

-

-            checkObstacleCollision(obstacle) {

-                let d = dist(this.pos.x, this.pos.y, obstacle.x, obstacle.y);

-                return d < this.radius + obstacle.radius;

-            }

-

-            checkStrandCollision(strand) {

-                let d = this.pointToLineDistance(this.pos, strand.start, strand.end);

-                return d < this.radius + 2;

-            }

-

-            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 closestPoint = p5.Vector.add(lineStart, p5.Vector.mult(line, projLength));

-                return p5.Vector.dist(point, closestPoint);

-            }

-

-            landOnObstacle(obstacle) {

-                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.land();

-            }

-

-            landOnStrand(strand) {

-                let line = p5.Vector.sub(strand.end, strand.start);

-                let lineLength = line.mag();

-                line.normalize();

-                

-                let pointToStart = p5.Vector.sub(this.pos, strand.start);

-                let projLength = constrain(pointToStart.dot(line), 0, lineLength);

-                

-                let closestPoint = p5.Vector.add(strand.start, p5.Vector.mult(line, projLength));

-                this.pos = closestPoint;

-                this.land();

-            }

-

-            land() {

-                this.vel.mult(0);

-                this.isAirborne = false;

-                this.canJump = true;

-                

-                if (currentStrand && isDeployingWeb) {

-                    currentStrand.end = this.pos.copy();

-                    // Make sure to capture the final position in the path

-                    currentStrand.path.push(this.pos.copy());

-                    webNodes.push(new WebNode(this.pos.x, this.pos.y));

-                    currentStrand = null;

-                }

-                isDeployingWeb = false;

-            }

-

-            display() {

-                push();

-                translate(this.pos.x, this.pos.y);

-                

-                // Munch animation

-                if (isMunching && this.munchCooldown > 15) {

-                    // Chomping mouth effect

-                    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();

-                }

-                

-                // Spider body

-                fill(20);

-                stroke(0);

-                strokeWeight(1);

-                ellipse(0, 0, this.radius * 2);

-                

-                // Spider details

-                fill(40);

-                noStroke();

-                ellipse(0, -2, this.radius * 1.2, this.radius * 1.5);

-                

-                // Eyes (glow in night)

-                if (gamePhase === 'NIGHT') {

-                    fill(255, 100, 100);

-                } else {

-                    fill(255, 0, 0);

-                }

-                ellipse(-3, -3, 3);

-                ellipse(3, -3, 3);

-                

-                // Legs

-                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);

-                }

-                

-                // Low silk warning indicator

-                if (webSilk < 20) {

-                    fill(255, 100, 100, 150 + sin(frameCount * 0.2) * 50);

-                    noStroke();

-                    ellipse(0, -15, 8);

-                }

-                

-                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);

-            }

-            

-            collect() {

-                webSilk = min(webSilk + this.silkValue, maxWebSilk);

-                

-                // Create particle effect

-                for (let i = 0; i < 8; i++) {

-                    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);

-                

-                // Glow effect

-                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);

-                

-                // Bento box shape

-                rectMode(CENTER);

-                

-                // Shadow

-                fill(0, 0, 0, 50);

-                rect(2, 2, this.radius * 2, this.radius * 1.8, 3);

-                

-                // Main box

-                fill(139, 69, 19);

-                stroke(100, 50, 0);

-                strokeWeight(1);

-                rect(0, 0, this.radius * 2, this.radius * 1.8, 3);

-                

-                // Box dividers

-                stroke(100, 50, 0);

-                strokeWeight(1);

-                line(-this.radius, 0, this.radius, 0);

-                line(0, -this.radius * 0.9, 0, this.radius * 0.9);

-                

-                // Food dots

-                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));

-            }

-            

-            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, 6);

-                pop();

-            }

-            

-            isDead() {

-                return this.lifetime <= 0;

-            }

-        }

-

-        class Obstacle {

-            constructor(x, y, radius, type) {

-                this.x = x;

-                this.y = y;

-                this.radius = radius;

-                this.type = type || (random() < 0.5 ? 'branch' : 'leaf');

-                this.rotation = random(TWO_PI);

-                this.leafPoints = [];

-                

-                if (this.type === 'leaf') {

-                    // Generate random leaf shape

-                    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; // Make leaf pointed

-                        this.leafPoints.push({angle: angle, radius: r});

-                    }

-                }

-            }

-

-            display() {

-                push();

-                translate(this.x, this.y);

-                rotate(this.rotation);

-                

-                if (this.type === 'branch') {

-                    // Draw branch/twig

-                    if (gamePhase === 'NIGHT') {

-                        stroke(40, 20, 0);

-                        fill(50, 25, 5);

-                    } else {

-                        stroke(101, 67, 33);

-                        fill(139, 90, 43);

-                    }

-                    strokeWeight(3);

-                    

-                    // Main branch

-                    push();

-                    strokeWeight(this.radius / 3);

-                    line(-this.radius, 0, this.radius, 0);

-                    

-                    // Small twigs

-                    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);

-                    

-                    // Texture lines

-                    stroke(80, 50, 20, 100);

-                    strokeWeight(1);

-                    for (let i = -this.radius; i < this.radius; i += 5) {

-                        line(i, -2, i + 2, 2);

-                    }

-                    pop();

-                    

-                    // Anchor point indicator (subtle)

-                    noStroke();

-                    fill(255, 255, 255, 30);

-                    ellipse(0, 0, this.radius * 2);

-                    

-                } else if (this.type === 'leaf') {

-                    // Draw organic leaf shape

-                    if (gamePhase === 'NIGHT') {

-                        fill(20, 40, 20);

-                        stroke(10, 20, 10);

-                    } else {

-                        fill(34, 139, 34);

-                        stroke(25, 100, 25);

-                    }

-                    strokeWeight(2);

-                    

-                    // Leaf shape

-                    beginShape();

-                    for (let point of this.leafPoints) {

-                        let x = cos(point.angle) * point.radius;

-                        let y = sin(point.angle) * point.radius;

-                        curveVertex(x, y);

-                    }

-                    // Close the shape

-                    let firstPoint = this.leafPoints[0];

-                    curveVertex(cos(firstPoint.angle) * firstPoint.radius, 

-                               sin(firstPoint.angle) * firstPoint.radius);

-                    let secondPoint = this.leafPoints[1];

-                    curveVertex(cos(secondPoint.angle) * secondPoint.radius, 

-                               sin(secondPoint.angle) * secondPoint.radius);

-                    endShape();

-                    

-                    // Leaf veins

-                    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);

-                }

-                

-                pop();

-            }

-        }

-

-        class WebStrand {

-            constructor(start, end) {

-                this.start = start;

-                this.end = end;

-                this.strength = 1;

-                this.vibration = 0;

-                this.path = []; // Store the path the spider traveled

-            }

-

-            update() {

-                this.vibration *= 0.95;

-                

-                for (let node of webNodes) {

-                    if (dist(node.x, node.y, this.start.x, this.start.y) < 5 ||

-                        dist(node.x, node.y, this.end.x, this.end.y) < 5) {

-                        node.applyForce(0, 0.1);

-                    }

-                }

-            }

-

-            display() {

-                push();

-                

-                if (gamePhase === 'NIGHT') {

-                    stroke(255, 255, 255, 250);

-                    strokeWeight(2);

-                } else {

-                    stroke(255, 255, 255, 200);

-                    strokeWeight(1.5);

-                }

-                

-                noFill();

-                

-                // If we have a path, draw the curved strand following the spider's arc

-                if (this.path && this.path.length > 2) {

-                    beginShape();

-                    // Start with first point twice for curve vertex

-                    curveVertex(this.path[0].x, this.path[0].y + this.vibration * sin(frameCount * 0.3));

-                    

-                    // Draw all path points with vibration applied

-                    for (let i = 0; i < this.path.length; i++) {

-                        let point = this.path[i];

-                        let vibOffset = this.vibration * sin(frameCount * 0.3 + i * 0.1) * (i / this.path.length);

-                        curveVertex(point.x, point.y + vibOffset);

-                    }

-                    

-                    // End with last point twice

-                    let lastPoint = this.path[this.path.length - 1];

-                    curveVertex(lastPoint.x, lastPoint.y + this.vibration * sin(frameCount * 0.3));

-                    endShape();

-                    

-                    // Glow effect

-                    stroke(255, 255, 255, 50);

-                    strokeWeight(4);

-                    beginShape();

-                    curveVertex(this.path[0].x, this.path[0].y);

-                    for (let point of this.path) {

-                        curveVertex(point.x, point.y);

-                    }

-                    curveVertex(lastPoint.x, lastPoint.y);

-                    endShape();

-                } else {

-                    // Fallback to simple line if no path

-                    let midX = (this.start.x + this.end.x) / 2;

-                    let midY = (this.start.y + this.end.y) / 2 + this.vibration * sin(frameCount * 0.3);

-                    

-                    beginShape();

-                    curveVertex(this.start.x, this.start.y);

-                    curveVertex(this.start.x, this.start.y);

-                    curveVertex(midX, midY);

-                    curveVertex(this.end.x, this.end.y);

-                    curveVertex(this.end.x, this.end.y);

-                    endShape();

-                    

-                    stroke(255, 255, 255, 50);

-                    strokeWeight(4);

-                    beginShape();

-                    curveVertex(this.start.x, this.start.y);

-                    curveVertex(this.start.x, this.start.y);

-                    curveVertex(midX, midY);

-                    curveVertex(this.end.x, this.end.y);

-                    curveVertex(this.end.x, this.end.y);

-                    endShape();

-                }

-                

-                pop();

-            }

-

-            vibrate(amount) {

-                this.vibration = min(this.vibration + amount, 10);

-            }

-        }

-

-        class WebNode {

-            constructor(x, y) {

-                this.x = x;

-                this.y = y;

-                this.vx = 0;

-                this.vy = 0;

-                this.pinned = false;

-            }

-

-            applyForce(fx, fy) {

-                if (!this.pinned) {

-                    this.vx += fx;

-                    this.vy += fy;

-                }

-            }

-

-            update() {

-                if (!this.pinned) {

-                    this.x += this.vx;

-                    this.y += this.vy;

-                    this.vx *= 0.98;

-                    this.vy *= 0.98;

-                }

-            }

-        }

-

-        class Fly {

-            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.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.webTouchCount = 0; // Track how many strands touched

-                this.requiredStrands = 3; // Need to touch 3+ strands to get caught

-                this.touchedStrands = new Set(); // Track unique strands touched

-            }

-

-            update() {

-                if (this.stuck) return;

-                

-                if (this.caught) {

-                    this.vel.mult(0.95);

-                    if (this.vel.mag() < 0.1) {

-                        this.stuck = true;

-                        fliesCaught++;

-                        webSilk = min(webSilk + 5, maxWebSilk);

-                    }

-                    return;

-                }

-                

-                // Wander behavior

-                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.vel.add(this.acc);

-                this.vel.limit(3);

-                this.pos.add(this.vel);

-                this.acc.mult(0);

-                

-                // Wrap around screen

-                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 collision - need multiple strands to catch

-                this.touchedStrands.clear();

-                for (let strand of webStrands) {

-                    let d = this.pointToLineDistance(this.pos, strand.start, strand.end);

-                    if (d < this.radius + 3) {

-                        this.touchedStrands.add(strand);

-                    }

-                }

-                

-                // Only get caught if touching enough strands (a proper web)

-                if (this.touchedStrands.size >= this.requiredStrands) {

-                    this.caught = true;

-                    // Vibrate all touched strands

-                    for (let strand of this.touchedStrands) {

-                        strand.vibrate(5);

-                    }

-                    // Propagate vibrations

-                    for (let strand of webStrands) {

-                        if (!this.touchedStrands.has(strand)) {

-                            for (let touched of this.touchedStrands) {

-                                let d1 = dist(strand.start.x, strand.start.y, touched.start.x, touched.start.y);

-                                let d2 = dist(strand.start.x, strand.start.y, touched.end.x, touched.end.y);

-                                let d3 = dist(strand.end.x, strand.end.y, touched.start.x, touched.start.y);

-                                let d4 = dist(strand.end.x, strand.end.y, touched.end.x, touched.end.y);

-                                if (min(d1, d2, d3, d4) < 50) {

-                                    strand.vibrate(2);

-                                    break;

-                                }

-                            }

-                        }

-                    }

-                }

-            }

-

-            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 closestPoint = p5.Vector.add(lineStart, p5.Vector.mult(line, projLength));

-                return p5.Vector.dist(point, closestPoint);

-            }

-

-            display() {

-                push();

-                translate(this.pos.x, this.pos.y);

-                

-                // Show if fly is near a web but not caught yet

-                if (this.touchedStrands.size > 0 && !this.caught) {

-                    // Warning indicator

-                    stroke(255, 255, 0, 100);

-                    strokeWeight(1);

-                    noFill();

-                    ellipse(0, 0, 20);

-                }

-                

-                // Glow effect for firefly

-                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);

-                }

-                

-                // Body

-                fill(30);

-                stroke(0);

-                strokeWeight(0.5);

-                ellipse(0, 0, this.radius * 2);

-                

-                // Wings (animated)

-                if (!this.stuck) {

-                    this.wingPhase += 0.5;

-                    let wingSpread = sin(this.wingPhase) * 5;

-                    

-                    fill(255, 255, 255, 150);

-                    noStroke();

-                    ellipse(-wingSpread, 0, 6, 4);

-                    ellipse(wingSpread, 0, 6, 4);

-                }

-                

-                // Glow abdomen at night

-                if (gamePhase === 'NIGHT') {

-                    fill(255, 255, 100, this.glowIntensity);

-                    noStroke();

-                    ellipse(0, 2, 3);

-                }

-                

-                pop();

-            }

-        }

-

-        function spawnFoodBox() {

-            let x, y;

-            let attempts = 0;

-            let valid = false;

-            

-            while (!valid && attempts < 50) {

-                x = random(50, width - 50);

-                y = random(50, height - 100);

-                valid = true;

-                

-                for (let obstacle of obstacles) {

-                    if (dist(x, y, obstacle.x, obstacle.y) < obstacle.radius + 30) {

-                        valid = false;

-                        break;

-                    }

-                }

-                

-                for (let box of foodBoxes) {

-                    if (dist(x, y, box.pos.x, box.pos.y) < 50) {

-                        valid = false;

-                        break;

-                    }

-                }

-                

-                attempts++;

-            }

-            

-            if (valid) {

-                foodBoxes.push(new FoodBox(x, y));

-            }

-        }

-

-        function setup() {

-            // Use full viewport dimensions

-            let canvas = createCanvas(window.innerWidth, window.innerHeight);

-            canvas.parent('game-container');

-            

-            skyColor1 = color(135, 206, 235);

-            skyColor2 = color(255, 183, 77);

-            currentSkyColor1 = skyColor1;

-            currentSkyColor2 = skyColor2;

-            

-            spider = new Spider(width / 2, height - 50);

-            

-            // Create organic obstacles with variety - scale with viewport

-            let numObstacles = Math.floor((width * height) / 60000); // Scale based on area

-            numObstacles = constrain(numObstacles, 8, 20);

-            

-            for (let i = 0; i < numObstacles; i++) {

-                let x = random(100, width - 100);

-                let y = random(100, height - 150);

-                let radius = random(25, 45);

-                let type = random() < 0.6 ? 'branch' : 'leaf';

-                

-                let valid = true;

-                for (let obstacle of obstacles) {

-                    if (dist(x, y, obstacle.x, obstacle.y) < radius + obstacle.radius + 30) {

-                        valid = false;

-                        break;

-                    }

-                }

-                

-                if (valid) {

-                    obstacles.push(new Obstacle(x, y, radius, type));

-                }

-            }

-            

-            // Add guaranteed anchor points with specific types - distributed across viewport

-            obstacles.push(new Obstacle(50, height/2, 35, 'branch'));

-            obstacles.push(new Obstacle(width - 50, height/2, 35, 'branch'));

-            obstacles.push(new Obstacle(width/2, 50, 40, 'leaf'));

-            obstacles.push(new Obstacle(width/4, height - 200, 30, 'leaf'));

-            obstacles.push(new Obstacle(3*width/4, height - 200, 30, 'branch'));

-            

-            // Add more anchor points for larger screens

-            if (width > 1200) {

-                obstacles.push(new Obstacle(width/3, height/3, 35, 'leaf'));

-                obstacles.push(new Obstacle(2*width/3, height/3, 35, 'branch'));

-            }

-            

-            // Spawn initial food boxes

-            let numBoxes = Math.max(3, Math.floor(width / 400));

-            for (let i = 0; i < numBoxes; i++) {

-                spawnFoodBox();

-            }

-        }

-        

-        function windowResized() {

-            resizeCanvas(window.innerWidth, window.innerHeight);

-        }

-

-        function draw() {

-            phaseTimer++;

-            

-            // Phase transitions

-            if (gamePhase === 'DUSK' && phaseTimer >= DUSK_DURATION) {

-                gamePhase = 'TRANSITION';

-                phaseTimer = 0;

-            } else if (gamePhase === 'TRANSITION' && 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();

-                }

-            }

-            

-            // Update sky colors

-            if (gamePhase === 'DUSK') {

-                currentSkyColor1 = lerpColor(color(135, 206, 235), color(255, 140, 90), phaseTimer / DUSK_DURATION);

-                currentSkyColor2 = lerpColor(color(255, 183, 77), color(120, 60, 120), phaseTimer / DUSK_DURATION);

-            } else if (gamePhase === 'TRANSITION') {

-                let t = phaseTimer / TRANSITION_DURATION;

-                currentSkyColor1 = lerpColor(color(255, 140, 90), 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') {

-                currentSkyColor1 = color(25, 25, 112);

-                currentSkyColor2 = color(0, 0, 40);

-                moonOpacity = 255;

-                

-                if (phaseTimer % 120 === 0 && flies.length < 15) {

-                    flies.push(new Fly());

-                }

-                

-                if (phaseTimer % 300 === 0 && foodBoxes.length < 6) {

-                    spawnFoodBox();

-                }

-            }

-            

-            // Draw sky gradient

-            for(let i = 0; i <= height; i++) {

-                let inter = map(i, 0, height, 0, 1);

-                let c = lerpColor(currentSkyColor1, currentSkyColor2, inter);

-                stroke(c);

-                line(0, i, width, i);

-            }

-            

-            // Draw moon during night

-            if (moonOpacity > 0) {

-                push();

-                noStroke();

-                fill(255, 255, 230, moonOpacity);

-                ellipse(width - 100, moonY, 50);

-                fill(255, 255, 200, moonOpacity * 0.3);

-                ellipse(width - 100, moonY, 70);

-                

-                fill(230, 230, 200, moonOpacity * 0.5);

-                ellipse(width - 105, moonY - 5, 8);

-                ellipse(width - 95, moonY + 8, 12);

-                ellipse(width - 110, moonY + 10, 6);

-                pop();

-                

-                if (gamePhase === 'NIGHT') {

-                    randomSeed(42);

-                    for (let i = 0; i < 50; i++) {

-                        let x = random(width);

-                        let y = random(height * 0.6);

-                        let brightness = random(100, 255);

-                        stroke(255, 255, 255, brightness);

-                        strokeWeight(random(1, 2));

-                        point(x, y);

-                    }

-                    randomSeed(millis());

-                }

-            }

-            

-            // Display everything

-            for (let obstacle of obstacles) {

-                obstacle.display();

-            }

-            

-            for (let box of foodBoxes) {

-                box.display();

-            }

-            

-            for (let i = particles.length - 1; i >= 0; i--) {

-                particles[i].update();

-                particles[i].display();

-                if (particles[i].isDead()) {

-                    particles.splice(i, 1);

-                }

-            }

-            

-            for (let strand of webStrands) {

-                strand.update();

-                strand.display();

-            }

-            

-            for (let node of webNodes) {

-                node.update();

-            }

-            

-            if (currentStrand && isDeployingWeb && spider.isAirborne) {

-                let opacity = map(webSilk, 0, 20, 50, 150);

-                stroke(255, 255, 255, opacity);

-                strokeWeight(1.5);

-                line(currentStrand.start.x, currentStrand.start.y, spider.pos.x, spider.pos.y);

-            }

-            

-            for (let i = flies.length - 1; i >= 0; i--) {

-                flies[i].update();

-                flies[i].display();

-            }

-            

-            spider.update();

-            spider.display();

-            

-            // Update resources

-            webSilk = min(webSilk + silkRechargeRate, maxWebSilk);

-            

-            if (isDeployingWeb && spider.isAirborne && webSilk > 0) {

-                webSilk = max(0, webSilk - silkDrainRate);

-                if (webSilk <= 0) {

-                    isDeployingWeb = false;

-                    if (currentStrand) {

-                        webStrands.pop();

-                        currentStrand = null;

-                    }

-                }

-            }

-            

-            // Update UI

-            document.getElementById('strand-count').textContent = webStrands.length;

-            document.getElementById('flies-caught').textContent = fliesCaught;

-            document.getElementById('flies-munched').textContent = fliesMunched;

-            document.getElementById('phase').textContent = gamePhase === 'TRANSITION' ? 'NIGHTFALL' : gamePhase;

-            

-            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`;

-            }

-            

-            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)';

-            }

-            

-            if (mouseIsPressed && spider.isAirborne && !isDeployingWeb && webSilk > 10) {

-                isDeployingWeb = true;

-                currentStrand = new WebStrand(spider.lastAnchorPoint.copy(), null);

-                webStrands.push(currentStrand);

-                webNodes.push(new WebNode(spider.lastAnchorPoint.x, spider.lastAnchorPoint.y));

-            }

-            

-            if (currentStrand && isDeployingWeb && spider.isAirborne) {

-                currentStrand.end = spider.pos.copy();

-            }

-        }

-

-        function keyPressed() {

-            if (key === ' ') {

-                spacePressed = true;

-                return false; // Prevent page scroll

-            }

-            if (keyCode === SHIFT) {

-                spider.munch();

-                return false;

-            }

-        }

-        

-        function keyReleased() {

-            if (key === ' ') {

-                spacePressed = false;

-                isDeployingWeb = false;

-                return false;

-            }

-        }

-

-        function mousePressed() {

-            // Only jump on mouse press, no web deployment

-            if (!spider.isAirborne) {

-                spider.jump(mouseX, mouseY);

-            }

-        }

-

-        function mouseReleased() {

-            // No longer needed for web deployment

-        }

-

-        function touchStarted() {

-            // Only jump on touch, no web deployment

-            if (!spider.isAirborne) {

-                spider.jump(touches[0].x, touches[0].y);

-            }

-            return false;

-        }

-

-        function touchEnded() {

-            // No longer needed for web deployment

-            return false;

-        }

-    </script>