*

1 files changed, 30 insertions, 12 deletions

diff --git a/html/rogue/js/rogue.js b/html/rogue/js/rogue.js
index f441bbd..72c53f1 100644
--- a/html/rogue/js/rogue.js
+++ b/html/rogue/js/rogue.js
@@ -56,25 +56,44 @@ const updateGame = (state, deltaTime) => {
 };
 
 const render = (ctx, state) => {
-    // Clear the canvas
-    ctx.fillStyle = '#000';
-    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+    // Create gradient for sky
+    const groundY = ctx.canvas.height - state.world.groundHeight;
+    const skyGradient = ctx.createLinearGradient(0, 0, 0, groundY);
+    
+    // Twilight colors from top to bottom
+    skyGradient.addColorStop(0, '#1a1a2e');    // Deep blue at top
+    skyGradient.addColorStop(0.4, '#2d1b3d');  // Dark purple
+    skyGradient.addColorStop(0.7, '#462639');  // Purple-red
+    skyGradient.addColorStop(1, '#1f1f2f');    // Dark blue-grey near ground
+
+    // Fill sky
+    ctx.fillStyle = skyGradient;
+    ctx.fillRect(0, 0, ctx.canvas.width, groundY);
 
     // Apply camera transform
     ctx.save();
     ctx.translate(-state.camera.x, -state.camera.y);
 
+    // Fill everything below ground with black (after camera transform)
+    ctx.fillStyle = '#000000';
+    ctx.fillRect(
+        state.camera.x - 1000, // Extend well beyond viewport
+        groundY,
+        ctx.canvas.width + 2000, // Make sure it covers everything
+        ctx.canvas.height
+    );
+
     // 1. Render background objects
     state.world.backgroundTrees.forEach(tree => {
-        renderTree(ctx, tree, ctx.canvas.height - state.world.groundHeight);
+        renderTree(ctx, tree, groundY);
     });
     
     state.world.backgroundRocks.forEach(rock => {
-        renderRock(ctx, rock, ctx.canvas.height - state.world.groundHeight);
+        renderRock(ctx, rock, groundY);
     });
 
     state.world.backgroundGrass.forEach(grass => {
-        renderGrass(ctx, grass, ctx.canvas.height - state.world.groundHeight, state.time);
+        renderGrass(ctx, grass, groundY, state.time);
     });
     
     // 2. Render platforms
@@ -88,25 +107,24 @@ const render = (ctx, state) => {
 
     // 4. Render foreground objects
     state.world.foregroundTrees.forEach(tree => {
-        renderTree(ctx, tree, ctx.canvas.height - state.world.groundHeight);
+        renderTree(ctx, tree, groundY);
     });
     
     state.world.foregroundRocks.forEach(rock => {
-        renderRock(ctx, rock, ctx.canvas.height - state.world.groundHeight);
+        renderRock(ctx, rock, groundY);
     });
 
     state.world.foregroundGrass.forEach(grass => {
-        renderGrass(ctx, grass, ctx.canvas.height - state.world.groundHeight, state.time);
+        renderGrass(ctx, grass, groundY, state.time);
     });
 
-    // 5. Render ground
-    const groundY = ctx.canvas.height - state.world.groundHeight;
+    // 5. Render ground (just the grass top)
     ctx.fillStyle = '#4a4';
     ctx.fillRect(
         state.camera.x - 1000,
         groundY,
         ctx.canvas.width + 2000,
-        state.world.groundHeight
+        1  // Only render the grass line
     );
 
     ctx.restore();