Upload index.html

index.html

@@ -88,48 +88,12 @@ function genKoiPatches(type) {
 }
 let fishes = [], bubbles = [], seaweeds = [], backSeaweeds = [], midSeaweeds = [], farSeaweeds = [], motes = [], rays = [], rocks = [], grass = [], fgGrass = [];
 let playerFish = null; // the fish controlled by gamepad (spawned with F key)
-let bubblePool = [];
-let bubblePoolSize = 0;
-
-function getBubble() {
-  if (bubblePool.length > 0) {
-    return bubblePool.pop();
-  }
-  bubblePoolSize++;
-  return new Bubble(true);
-}
-function returnBubble(b) {
-  if (bubblePool.length < 50) {
-    bubblePool.push(b);
-  }
-}
 const GAMEPAD_DEADZONE = 0.15; // ignore small stick movements
 let curNight = 0; // v7: shared night factor (dims the top-light + sheen)
 let plantPoints = [], _ppUsed = 0; // collision points — a pooled set, reused in place
 let sandHeights = [];
 let sandParticles = []; // v22: grains of sand kicked up when a fast fish skims the sea floor
 
-
-// v26: Trig lookup table for faster sin/cos (360 entries, 1 degree resolution)
-const SIN_TABLE = new Float32Array(360);
-const COS_TABLE = new Float32Array(360);
-for (let i = 0; i < 360; i++) {
-  const rad = i * Math.PI / 180;
-  SIN_TABLE[i] = Math.sin(rad);
-  COS_TABLE[i] = Math.cos(rad);
-}
-function fastSin(x) {
-  // Convert radians to degrees, normalize to 0-360
-  let deg = (x * 180 / Math.PI) % 360;
-  if (deg < 0) deg += 360;
-  return SIN_TABLE[Math.floor(deg)];
-}
-function fastCos(x) {
-  let deg = (x * 180 / Math.PI) % 360;
-  if (deg < 0) deg += 360;
-  return COS_TABLE[Math.floor(deg)];
-}
-
 class Fish {
   static nextId = 0;
   constructor() {
@@ -402,11 +366,11 @@ class Fish {
     // Occasionally release a small cluster of bubbles from the mouth
     this.bubbleTimer -= dt;
     if (this.bubbleTimer <= 0) {
-      const mx = this.x + fastCos(this.angle) * this.size * 0.62;
+      const mx = this.x + Math.cos(this.angle) * this.size * 0.62;
       const my = this.y + Math.sin(this.angle) * this.size * 0.62;
       const n = (2 + ((Math.random() * 3) | 0)) * 2; // 4..8 bubbles — doubled from the old 2..4
       for (let i = 0; i < n; i++) {
-        const bb = getBubble(); bb.reset(false); bb.x = mx + rand(-3, 3); bb.y = my + rand(-3, 3); bb.r = rand(1.4, 3.2) * (this.size / 28); bb.speed = rand(45, 85) * (0.7 + 0.3 * (this.size / 28)); bb.p = rand(0, Math.PI * 2); bb.rgb = bubbleColor(); bb.isMouth = true;
+        const bb = new Bubble(false, mx + rand(-3, 3), my + rand(-3, 3), this.size);
         bb.owner = this; // v10: a fish never pops its own bubbles
         bubbles.push(bb);
       }
@@ -418,7 +382,7 @@ class Fish {
 
     // Target sits ahead of the fish (in heading direction), offset by wanderTheta.
     // Steering toward it yields smooth meandering and genuine direction changes.
-    let wx = this.x + fastCos(this.angle) * this.wanderDist + Math.cos(this.wanderTheta) * this.wanderRadius;
+    let wx = this.x + Math.cos(this.angle) * this.wanderDist + Math.cos(this.wanderTheta) * this.wanderRadius;
     let wy = this.y + Math.sin(this.angle) * this.wanderDist + Math.sin(this.wanderTheta) * this.wanderRadius;
 
     // v7: after dark, most fish bed down low in the grass; a few still hover by the seaweed.
@@ -427,7 +391,7 @@ class Fish {
         // v14: drift toward this fish's own sleep spot along the sand line —
         // spreads sleeping fish across the tank instead of one big clump
         wx += (this.sleepSpotX - wx) * night * 0.75;
-        const groundY = sandAt(this.x + fastCos(this.angle) * this.wanderDist) - this.size * 0.5;
+        const groundY = sandAt(this.x + Math.cos(this.angle) * this.wanderDist) - this.size * 0.5;
         wy += (groundY - wy) * night * 0.85;
       } else if (seaweeds.length) {
         // v9: each seaweed-hungry fish keeps to its own stalk instead of all crowding the nearest one
@@ -564,13 +528,13 @@ class Fish {
       if (inp.slow > 0) speedMult -= inp.slow * 0.85;    // slow down
       speedMult = Math.max(0.15, Math.min(3.0, speedMult));
       const playerSpeed = this.speed * this.cruiseSpeed * speedMult * 60 * dt;
-      this.x += fastCos(this.angle) * playerSpeed;
+      this.x += Math.cos(this.angle) * playerSpeed;
       this.y += Math.sin(this.angle) * playerSpeed;
       this.currentVelocity = this.speed * this.cruiseSpeed * speedMult * 60; // track actual velocity
     } else {
       // Normal AI fish movement.
       const sp = this.speed * this.cruiseSpeed * this.speedFactor * 60 * dt;
-      this.x += fastCos(this.angle) * sp;
+      this.x += Math.cos(this.angle) * sp;
       this.y += Math.sin(this.angle) * sp;
       this.currentVelocity = this.speed * this.cruiseSpeed * this.speedFactor * 60; // track actual velocity
     }
@@ -601,7 +565,7 @@ class Fish {
     const v = Math.max(0, Math.min(1, this.viewAngle));
     let scaleY = 1 - 0.34 * v;                 // foreshorten toward the back view
     if (Math.abs(this.roll) > 0.01) {          // banking roll still squashes a touch
-      scaleY *= Math.max(0.42, fastCos(this.roll));
+      scaleY *= Math.max(0.42, Math.cos(this.roll));
       c.rotate(this.roll * 0.1);
     }
     c.scale(1, scaleY);
@@ -616,7 +580,7 @@ class Fish {
     // traveling body wave
     const waveK = Math.PI / s;
     const waveAmp = s * 0.12;
-    const sway = fastSin(-s * waveK + this.phase) * s * 0.34;
+    const sway = Math.sin(-s * waveK + this.phase) * s * 0.34;
 
     // Top/bottom view: body seen from above or below
     // Dorsal fin visible as a line down the center when viewed from above
@@ -701,7 +665,7 @@ class Fish {
     const waveK = Math.PI / s;   // ~one wavelength across the body length
     const waveAmp = s * 0.12;    // subtle flex amplitude
     // tail fin follows the body wave at its base, amplified (same phase → no fighting)
-    const sway = fastSin(-s * waveK + this.phase) * s * 0.34;
+    const sway = Math.sin(-s * waveK + this.phase) * s * 0.34;
 
     // v24: Ecco-style blend factor (0 = side profile, 1 = seen from above/below).
     // Flattens the tail lobes and spreads eyes/barbels as we see more of the back.
@@ -762,7 +726,7 @@ class Fish {
           const bx = rootX - L * (0.25 + 0.65 * spd) * t;
           const by = rootY + side * L * (0.42 + 0.3 * ev) * t * t;
           const amp = s * 0.17 * t * (0.35 + 0.65 * spd);
-          const off = fastSin(t * 5.5 - this.phase * 1.4 + this.whiskPh) * amp;
+          const off = Math.sin(t * 5.5 - this.phase * 1.4 + this.whiskPh) * amp;
           c.lineTo(bx, by + off);
         }
         c.stroke();
@@ -828,16 +792,16 @@ class Fish {
         // left edge, top → bottom: bend the centerline + taper the width with t
         for (let j = 0; j <= N; j++) {
           const t = j / N;
-          const cx = sx + fastSin(t * st.cFreq * Math.PI + st.cPh) * st.cAmp * s;
-          const hwL = hw0 * (1 + st.tAmp * fastSin(t * st.tFreq * Math.PI + st.tPh));
+          const cx = sx + Math.sin(t * st.cFreq * Math.PI + st.cPh) * st.cAmp * s;
+          const hwL = hw0 * (1 + st.tAmp * Math.sin(t * st.tFreq * Math.PI + st.tPh));
           const xL = cx - hwL, yL = wy(xL) + (t - 0.5) * H;
           if (j === 0) c.moveTo(xL, yL); else c.lineTo(xL, yL);
         }
         // right edge, bottom → top
         for (let j = N; j >= 0; j--) {
           const t = j / N;
-          const cx = sx + fastSin(t * st.cFreq * Math.PI + st.cPh) * st.cAmp * s;
-          const hwR = hw0 * (1 + st.tAmp * fastSin(t * st.tFreq * Math.PI + st.tPh));
+          const cx = sx + Math.sin(t * st.cFreq * Math.PI + st.cPh) * st.cAmp * s;
+          const hwR = hw0 * (1 + st.tAmp * Math.sin(t * st.tFreq * Math.PI + st.tPh));
           const xR = cx + hwR, yR = wy(xR) + (t - 0.5) * H;
           c.lineTo(xR, yR);
         }
@@ -984,7 +948,7 @@ class Fish {
           const bx = rootX - L * (0.25 + 0.65 * spd) * t;
           const by = rootY + side * L * (0.42 + 0.3 * ev) * t * t;
           const amp = s * 0.17 * t * (0.35 + 0.65 * spd);
-          const off = fastSin(t * 5.5 - this.phase * 1.4 + this.whiskPh) * amp;
+          const off = Math.sin(t * 5.5 - this.phase * 1.4 + this.whiskPh) * amp;
           c.lineTo(bx, by + off);
         }
         c.stroke();
@@ -1047,7 +1011,6 @@ class Bubble {
     }
   }
   reset(init) {
-    this.dead = false;
     this.x = rand(0, W);
     this.y = init ? rand(H * 0.3, H) : H + rand(10, 80);
     this.r = rand(2, 7);
@@ -1058,7 +1021,7 @@ class Bubble {
   }
   update(dt, t) {
     this.y -= this.speed * dt;
-    this.x += fastSin(t * 1.6 + this.p) * 22 * dt;
+    this.x += Math.sin(t * 1.6 + this.p) * 22 * dt;
     if (this.y < -12) { if (this.isMouth) this.dead = true; else this.reset(false); }
   }
   draw(c) {
@@ -1373,9 +1336,8 @@ function buildScene() {
         sPh: rand(0, Math.PI * 2),
         // PERF: per-blade scratch points — drawGrass reuses them instead of
         // allocating a fresh pts array + point objects every frame (GC churn)
-        pts: Array.from({ length: bladeSegs + 1 }, () => ({ x: 0, y: 0 })),
-        fillStyle: `hsla(${baseHue + rand(-9, 9)},58%,40%,0.92)`,
-        strokeStyle: `hsla(${baseHue + rand(-9, 9) + 6},64%,45%,0.5)`      });
+        pts: Array.from({ length: bladeSegs + 1 }, () => ({ x: 0, y: 0 }))
+      });
     }
   }
 
@@ -1415,9 +1377,8 @@ function buildScene() {
         // v28: ~40% of blades get a gentle blur (pre-rendered sprite) for depth
         blurred: Math.random() < 0.4,
         sprite: null,
-        spriteScale: 1,
-        fillStyle: `hsla(${baseHue + rand(-10, 10)},60%,31%,0.96)`,
-        strokeStyle: `hsla(${baseHue + rand(-10, 10) + 6},64%,45%,0.5)`      });
+        spriteScale: 1
+      });
     }
   }
   buildFgGrassSprites(); // v28: bake the defocused-blade sprites once (free at runtime)
@@ -1432,7 +1393,7 @@ function buildScene() {
   for (let i = 0; i < nFish; i++) fishes.push(new Fish());
 
   const nAmbient = Math.round(26 * 0.75); // v10: ambient bubbles reduced 25% (fish production unchanged)
-  for (let i = 0; i < nAmbient; i++) { const b = getBubble(); b.reset(true); bubbles.push(b); }
+  for (let i = 0; i < nAmbient; i++) bubbles.push(new Bubble(true));
 
   for (let i = 0; i < 45; i++) {
     motes.push({ x: rand(0, W), y: rand(0, H), r: rand(0.6, 1.8), s: rand(3, 9), p: rand(0, Math.PI * 2) });
@@ -1690,10 +1651,13 @@ function drawRays(t, light) {
     applyRayTint(); // cheap re-tint of the cached blurred sprites (no blur re-run)
   }
 
+
+
+  ctx.restore();
   for (const r of rays) {
     // blit horizontal slices with the undulation offset at each depth — same wave
     // math as before, so the beams shimmer exactly like they always have
-    const off = fastSin(t * r.speed * 6 + r.x) * 55; // slow drift of the whole beam
+    const off = Math.sin(t * r.speed * 6 + r.x) * 55; // slow drift of the whole beam
     for (let i = 0; i < RAY_SLICES; i++) {
       const vT = i / RAY_SLICES, vB = (i + 1) / RAY_SLICES, vM = (vT + vB) / 2;
       const ya = yTop0 + vT * ySpan, yb = yTop0 + vB * ySpan;
@@ -1709,6 +1673,47 @@ function drawRays(t, light) {
   }
 }
 
+// v29: Fish occlude godrays - cast long blurred shadows down to the tank floor
+function drawFishShadows(t) {
+  ctx.save();
+  ctx.globalCompositeOperation = 'multiply';
+  for (const f of fishes) {
+    // Fish blocks light, casting a shadow that extends down to the sand
+    const shadowTop = f.y - f.size * 0.3;
+    const shadowBottom = sandAt(f.x) - 5;
+    const shadowHeight = shadowBottom - shadowTop;
+    
+    if (shadowHeight > 0) {
+      // Shadow width tapers from fish size at top to wider at bottom
+      const topWidth = f.size * 1.2;
+      const bottomWidth = f.size * 2.5;
+      
+      // Create gradient for shadow (darker near fish, fading downward)
+      const g = ctx.createLinearGradient(f.x, shadowTop, f.x, shadowBottom);
+      g.addColorStop(0, 'rgba(0,0,0,0.22)');
+      g.addColorStop(0.3, 'rgba(0,0,0,0.12)');
+      g.addColorStop(1, 'rgba(0,0,0,0.03)');
+      
+      ctx.fillStyle = g;
+      ctx.beginPath();
+      // Draw tapered shadow shape with soft edges using quadratic curves
+      const blur = f.size * 0.4;
+      ctx.moveTo(f.x - topWidth/2, shadowTop + blur);
+      ctx.quadraticCurveTo(f.x - topWidth/2, shadowTop, f.x, shadowTop);
+      ctx.quadraticCurveTo(f.x + topWidth/2, shadowTop, f.x + topWidth/2, shadowTop + blur);
+      ctx.lineTo(f.x + bottomWidth/2, shadowBottom - blur);
+      ctx.quadraticCurveTo(f.x + bottomWidth/2, shadowBottom, f.x, shadowBottom);
+      ctx.quadraticCurveTo(f.x - bottomWidth/2, shadowBottom, f.x - bottomWidth/2, shadowBottom - blur);
+      ctx.closePath();
+      ctx.fill();
+    }
+  }
+  ctx.restore();
+}
+
+
+
+
 function updateMotes(dt, t) {
   ctx.fillStyle = "rgba(220,240,255,0.3)";
   for (const m of motes) {
@@ -1761,9 +1766,9 @@ function stalkCurveX(w, f) {
 
 // PERF: shared sway function (was a per-stalk closure recreated every frame)
 function stalkSwayX(w, t, f) {
-  return fastSin(t * w.waveF1 + w.wavePh1 + f * 2.4) * w.waveA1 * f * f +
-         fastSin(t * w.waveF2 + w.wavePh2 + f * 3.8) * w.waveA2 * f * f +
-         fastSin(t * w.waveF3 + w.wavePh3 + f * 5.4) * w.waveA3 * f;
+  return Math.sin(t * w.waveF1 + w.wavePh1 + f * 2.4) * w.waveA1 * f * f +
+         Math.sin(t * w.waveF2 + w.wavePh2 + f * 3.8) * w.waveA2 * f * f +
+         Math.sin(t * w.waveF3 + w.wavePh3 + f * 5.4) * w.waveA3 * f;
 }
 
 // v4.3: draw background seaweed procedurally — multi-wave organic motion instead of
@@ -1823,7 +1828,7 @@ function drawMidSeaweeds(t) {
       for (const b of w.branches) {
         const idx = Math.min(n, Math.max(1, Math.round(b.f * n)));
         const ax = pxs[idx], ay = pys[idx];
-        const flutter = fastSin(t * w.waveF2 * 1.4 + b.ph) * (3 + w.waveA2 * 0.4);
+        const flutter = Math.sin(t * w.waveF2 * 1.4 + b.ph) * (3 + w.waveA2 * 0.4);
         const bx = ax + b.side * b.len + flutter;
         const by = ay - b.up;
         ctx.beginPath();
@@ -1895,7 +1900,7 @@ function drawBackSeaweeds(t) {
       for (const b of w.branches) {
         const idx = Math.min(n, Math.max(1, Math.round(b.f * n)));
         const ax = pxs[idx], ay = pys[idx];
-        const flutter = fastSin(t * w.waveF2 * 1.4 + b.ph) * (3 + w.waveA2 * 0.4);
+        const flutter = Math.sin(t * w.waveF2 * 1.4 + b.ph) * (3 + w.waveA2 * 0.4);
         const bx = ax + b.side * b.len + flutter;
         const by = ay - b.up;
         ctx.beginPath();
@@ -2086,7 +2091,7 @@ function drawFarSeaweeds(t) {
     
     const baseY = sandAt(w.x) + 10;
     // Simple rotational sway - root stays planted, sprite rotates slightly
-    const swayAngle = fastSin(t * w.speed + w.phase) * 0.04; // very subtle rotation
+    const swayAngle = Math.sin(t * w.speed + w.phase) * 0.04; // very subtle rotation
     
     ctx.save();
     // Translate to the base point (where the stalk meets the sand)
@@ -2112,7 +2117,7 @@ function updatePlants(t, dt) {
       const moveF = Math.min(1, fSpd / 1.2);          // v9: how actively this fish is swimming
       for (let i = 1; i <= w.segs; i++) {
         const fl = i / w.segs;
-        const px = w.x + w.off[i] + stalkCurveX(w, fl) + fastSin(t * w.speed + w.phase + fl * 2.6) * fl * fl * 24;
+        const px = w.x + w.off[i] + stalkCurveX(w, fl) + Math.sin(t * w.speed + w.phase + fl * 2.6) * fl * fl * 24;
         const py = sandAt(w.x) + 8 - w.h * fl;
         const dx = px - f.x, dy = py - f.y;
         const d2 = dx * dx + dy * dy;
@@ -2154,10 +2159,10 @@ function updatePlants(t, dt) {
     for (let i = 0; i <= w.segs; i++) {
       const f = i / w.segs;
       // normal sway + a fast extra flinch while being pushed
-      const sway = fastSin(t * w.speed + w.phase + f * 2.6) * f * f * 24
-                 + fastSin(t * 7 + w.phase) * w.touch * f * 16;
+      const sway = Math.sin(t * w.speed + w.phase + f * 2.6) * f * f * 24
+                 + Math.sin(t * 7 + w.phase) * w.touch * f * 16;
       // v17: secondary wobble - a finer inner movement for unique per-stalk motion
-      const sWobble = fastSin(t * w.sFreq + w.sPh + f * 4.2) * w.sAmp * f;
+      const sWobble = Math.sin(t * w.sFreq + w.sPh + f * 4.2) * w.sAmp * f;
       const px = w.x + (w.off[i] || 0) + stalkCurveX(w, f) + sway + sWobble;
       const py = baseY - w.h * f;
       w.points.push({ x: px, y: py });
@@ -2165,7 +2170,7 @@ function updatePlants(t, dt) {
     }
     for (const b of w.branches) {
       const a = w.points[Math.min(w.segs, Math.max(1, Math.round(b.f * w.segs)))];
-      const flutter = fastSin(t * w.speed * 1.4 + b.ph) * (3 + w.touch * 9);
+      const flutter = Math.sin(t * w.speed * 1.4 + b.ph) * (3 + w.touch * 9);
       b.tx = a.x + b.side * b.len + flutter;
       b.ty = a.y - b.up;
       plantPoints.push({ x: b.tx, y: b.ty, r: 5, s: w });
@@ -2209,7 +2214,7 @@ function drawSeaweed() {
       const p = pts[i];
       const a = pts[Math.max(0, i - 1)], b = pts[Math.min(n - 1, i + 1)];
       let dx = b.x - a.x, dy = b.y - a.y;
-      const dl = Math.sqrt(dx*dx + dy*dy) || 1;
+      const dl = Math.hypot(dx, dy) || 1;
       const nx = -dy / dl, ny = dx / dl;     // perpendicular to the local stalk direction
       const f = i / (n - 1);
       const hw = (w.width * (1 - f) + w.tipW * f) / 2; // half-width: base → tip taper
@@ -2219,7 +2224,7 @@ function drawSeaweed() {
     {                                        // rounded cap at the tip
       const tp = pts[n - 1], pp = pts[n - 2];
       let dx = tp.x - pp.x, dy = tp.y - pp.y;
-      const dl = Math.sqrt(dx*dx + dy*dy) || 1;
+      const dl = Math.hypot(dx, dy) || 1;
       const nx = -dy / dl, ny = dx / dl;
       const hwT = w.tipW / 2;
       ctx.quadraticCurveTo(tp.x + dx, tp.y + dy * 0.6, tp.x - nx * hwT, tp.y - ny * hwT);
@@ -2228,7 +2233,7 @@ function drawSeaweed() {
       const p = pts[i];
       const a = pts[Math.max(0, i - 1)], b = pts[Math.min(n - 1, i + 1)];
       let dx = b.x - a.x, dy = b.y - a.y;
-      const dl = Math.sqrt(dx*dx + dy*dy) || 1;
+      const dl = Math.hypot(dx, dy) || 1;
       const nx = -dy / dl, ny = dx / dl;
       const f = i / (n - 1);
       const hw = (w.width * (1 - f) + w.tipW * f) / 2;
@@ -2304,22 +2309,22 @@ function drawGrass(t) {
       // organic rest-curve: each blade has its own natural bend (like seaweed)
       const curveX = f * g.cA1 * Math.sin(f * g.cF1 + g.cP1);
       // constant sway, amplified while rippling from a passing fish
-      const sway = fastSin(t * g.speed + g.phase + f * 2.4) * amp * f;
+      const sway = Math.sin(t * g.speed + g.phase + f * 2.4) * amp * f;
       // v17: secondary wobble - finer inner movement for unique per-blade motion
-      const sWobble = fastSin(t * g.sFreq + g.sPh + f * 3.8) * g.sAmp * f;
+      const sWobble = Math.sin(t * g.sFreq + g.sPh + f * 3.8) * g.sAmp * f;
       pts.push({
         x: g.x + g.lean * g.h * f + curveX + sway + sWobble,
         y: g.y - g.h * f * (1 - g.ripple * 0.06)
       });
     }
     // draw tapered outline around the physics points
-    ctx.fillStyle = g.fillStyle;
+    ctx.fillStyle = `hsla(${g.hue},58%,40%,0.92)`;
     ctx.beginPath();
     for (let i = 0; i < n; i++) {
       const p = pts[i];
       const a = pts[Math.max(0, i - 1)], b = pts[Math.min(n - 1, i + 1)];
       let dx = b.x - a.x, dy = b.y - a.y;
-      const dl = Math.sqrt(dx*dx + dy*dy) || 1;
+      const dl = Math.hypot(dx, dy) || 1;
       const nx = -dy / dl, ny = dx / dl; // perpendicular to local blade direction
       const f = i / (n - 1);
       const hw = (g.width * (1 - f) + 0.8 * f) / 2; // half-width: base → tip taper
@@ -2330,7 +2335,7 @@ function drawGrass(t) {
     {
       const tp = pts[n - 1], pp = pts[n - 2];
       let dx = tp.x - pp.x, dy = tp.y - pp.y;
-      const dl = Math.sqrt(dx*dx + dy*dy) || 1;
+      const dl = Math.hypot(dx, dy) || 1;
       const nx = -dy / dl, ny = dx / dl;
       const hwT = 0.4; // tip half-width
       ctx.quadraticCurveTo(tp.x + dx, tp.y + dy * 0.6, tp.x - nx * hwT, tp.y - ny * hwT);
@@ -2339,7 +2344,7 @@ function drawGrass(t) {
       const p = pts[i];
       const a = pts[Math.max(0, i - 1)], b = pts[Math.min(n - 1, i + 1)];
       let dx = b.x - a.x, dy = b.y - a.y;
-      const dl = Math.sqrt(dx*dx + dy*dy) || 1;
+      const dl = Math.hypot(dx, dy) || 1;
       const nx = -dy / dl, ny = dx / dl;
       const f = i / (n - 1);
       const hw = (g.width * (1 - f) + 0.8 * f) / 2;
@@ -2359,7 +2364,7 @@ function drawFgGrass(t) {
     // around its base (same trick as the ultra-far seaweed). The baked blur hides the
     // simplified motion, and this path is far cheaper than per-frame canvas filters.
     if (g.sprite) {
-      const swayAngle = fastSin(t * g.speed + g.phase) * 0.05; // subtle: like farSeaweeds
+      const swayAngle = Math.sin(t * g.speed + g.phase) * 0.05; // subtle: like farSeaweeds
       ctx.save();
       ctx.translate(g.x, g.y);
       ctx.rotate(swayAngle);
@@ -2376,22 +2381,22 @@ function drawFgGrass(t) {
       // organic rest-curve: each blade has its own natural bend
       const curveX = f * g.cA1 * Math.sin(f * g.cF1 + g.cP1);
       // constant sway, weighted toward the tip
-      const sway = fastSin(t * g.speed + g.phase + f * 2.4) * amp * f;
+      const sway = Math.sin(t * g.speed + g.phase + f * 2.4) * amp * f;
       // v17: secondary wobble - finer inner movement for unique per-blade motion
-      const sWobble = fastSin(t * g.sFreq + g.sPh + f * 4.5) * g.sAmp * f;
+      const sWobble = Math.sin(t * g.sFreq + g.sPh + f * 4.5) * g.sAmp * f;
       pts.push({
         x: g.x + g.lean * g.h * f + curveX + sway + sWobble,
         y: g.y - g.h * f
       });
     }
     // dark body of the blade (tapered outline)
-    ctx.fillStyle = g.fillStyle;
+    ctx.fillStyle = `hsla(${g.hue},60%,31%,0.96)`;
     ctx.beginPath();
     for (let i = 0; i < n; i++) {
       const p = pts[i];
       const a = pts[Math.max(0, i - 1)], b = pts[Math.min(n - 1, i + 1)];
       let dx = b.x - a.x, dy = b.y - a.y;
-      const dl = Math.sqrt(dx*dx + dy*dy) || 1;
+      const dl = Math.hypot(dx, dy) || 1;
       const nx = -dy / dl, ny = dx / dl;
       const f = i / (n - 1);
       const hw = (g.width * (1 - f) + 1.2 * f) / 2; // half-width: base → tip
@@ -2402,7 +2407,7 @@ function drawFgGrass(t) {
     {
       const tp = pts[n - 1], pp = pts[n - 2];
       let dx = tp.x - pp.x, dy = tp.y - pp.y;
-      const dl = Math.sqrt(dx*dx + dy*dy) || 1;
+      const dl = Math.hypot(dx, dy) || 1;
       const nx = -dy / dl, ny = dx / dl;
       const hwT = 0.6; // tip half-width
       ctx.quadraticCurveTo(tp.x + dx, tp.y + dy * 0.6, tp.x - nx * hwT, tp.y - ny * hwT);
@@ -2411,7 +2416,7 @@ function drawFgGrass(t) {
       const p = pts[i];
       const a = pts[Math.max(0, i - 1)], b = pts[Math.min(n - 1, i + 1)];
       let dx = b.x - a.x, dy = b.y - a.y;
-      const dl = Math.sqrt(dx*dx + dy*dy) || 1;
+      const dl = Math.hypot(dx, dy) || 1;
       const nx = -dy / dl, ny = dx / dl;
       const f = i / (n - 1);
       const hw = (g.width * (1 - f) + 1.2 * f) / 2;
@@ -2421,7 +2426,7 @@ function drawFgGrass(t) {
     ctx.fill();
 
     // lighter inner highlight for depth: a thin centerline stroke
-    ctx.strokeStyle = g.strokeStyle;
+    ctx.strokeStyle = `hsla(${g.hue + 6},64%,45%,0.5)`;
     ctx.lineWidth = g.width * 0.3;
     ctx.lineCap = "round";
     ctx.beginPath();
@@ -2720,7 +2725,7 @@ function drawLightPooling(t) {
   for (const r of rays) {
     // Compute where this ray hits the sand at y ≈ sandTop
     // Use the same wave math as the ray drawing to match positions
-    const off = fastSin(t * r.speed * 6 + r.x) * 55;
+    const off = Math.sin(t * r.speed * 6 + r.x) * 55;
     // At the sand depth (vM near the bottom), compute the x position
     const vM = 0.95; // approximate depth where sand starts
     const wave =
@@ -2784,6 +2789,7 @@ function frame(now) {
   const light = sampleLight(t);
   drawBackground(light);
   drawRays(t, light);
+  drawFishShadows(t);
   updateMotes(dt, t);
 
   // v5: ultra-far pre-rendered blurry seaweed — deepest layer, behind everything else
@@ -2883,7 +2889,7 @@ function frame(now) {
         if (dx * dx + dy * dy < rr * rr) { b.dead = true; break; }
       }
     }
-    if (b.dead) { returnBubble(b); bubbles.splice(i, 1); continue; }
+    if (b.dead) { bubbles.splice(i, 1); continue; }
     b.draw(ctx);
   }