feat: extend track and tunnels to absolute viewport edges

- Extend track waypoints from x: -120 to x: 920 (beyond viewport)
- Add mountain face rectangles at absolute left and right edges
- Redesign tunnel entrances as proper mountain tunnels with:
  - Gray stone mountain faces extending to viewport edges
  - Dark tunnel interiors
  - Arched stone openings
  - Stone rim detail around arch

Train now truly emerges from and enters into mountain tunnels at
the viewport boundaries.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

apps/web/src/app/games/complement-race/components/RaceTrack/SteamTrainJourney.tsx

@@ -214,57 +214,77 @@ export function SteamTrainJourney({ momentum, trainPosition, pressure, elapsedTi
           strokeLinecap="round"
         />
 
-        {/* Left tunnel entrance */}
+        {/* Left tunnel - positioned at absolute left edge */}
         <g data-element="left-tunnel">
-          {/* Tunnel depth/interior */}
+          {/* Mountain face */}
+          <rect
+            x="-60"
+            y="200"
+            width="80"
+            height="250"
+            fill="#5a5a5a"
+            stroke="#4a4a4a"
+            strokeWidth="2"
+          />
+          {/* Tunnel depth/interior (dark entrance) */}
           <ellipse
             cx="-50"
             cy="300"
-            rx="45"
-            ry="50"
-            fill="#1a1a1a"
+            rx="50"
+            ry="55"
+            fill="#0a0a0a"
           />
           {/* Tunnel arch opening */}
           <path
-            d="M -95 300 Q -95 240, -50 240 Q -5 240, -5 300 Z"
-            fill="#2d2d2d"
+            d="M -50 355 L -100 355 L -100 245 Q -100 235, -50 235 Q 0 235, 0 245 L 0 355 Z"
+            fill="#1a1a1a"
             stroke="#4a4a4a"
             strokeWidth="3"
           />
-          {/* Tunnel brickwork texture */}
+          {/* Tunnel arch rim (stone) */}
           <path
-            d="M -95 300 Q -95 240, -50 240 Q -5 240, -5 300"
+            d="M -100 245 Q -100 235, -50 235 Q 0 235, 0 245"
             fill="none"
-            stroke="#3a3a3a"
-            strokeWidth="2"
-            strokeDasharray="10,5"
+            stroke="#6a6a6a"
+            strokeWidth="6"
+            strokeLinecap="round"
           />
         </g>
 
-        {/* Right tunnel entrance */}
+        {/* Right tunnel - positioned at absolute right edge */}
         <g data-element="right-tunnel">
-          {/* Tunnel depth/interior */}
+          {/* Mountain face */}
+          <rect
+            x="780"
+            y="200"
+            width="80"
+            height="250"
+            fill="#5a5a5a"
+            stroke="#4a4a4a"
+            strokeWidth="2"
+          />
+          {/* Tunnel depth/interior (dark entrance) */}
           <ellipse
             cx="850"
             cy="300"
-            rx="45"
-            ry="50"
-            fill="#1a1a1a"
+            rx="50"
+            ry="55"
+            fill="#0a0a0a"
           />
           {/* Tunnel arch opening */}
           <path
-            d="M 805 300 Q 805 240, 850 240 Q 895 240, 895 300 Z"
-            fill="#2d2d2d"
+            d="M 850 355 L 800 355 L 800 245 Q 800 235, 850 235 Q 900 235, 900 245 L 900 355 Z"
+            fill="#1a1a1a"
             stroke="#4a4a4a"
             strokeWidth="3"
           />
-          {/* Tunnel brickwork texture */}
+          {/* Tunnel arch rim (stone) */}
           <path
-            d="M 805 300 Q 805 240, 850 240 Q 895 240, 895 300"
+            d="M 800 245 Q 800 235, 850 235 Q 900 235, 900 245"
             fill="none"
-            stroke="#3a3a3a"
-            strokeWidth="2"
-            strokeDasharray="10,5"
+            stroke="#6a6a6a"
+            strokeWidth="6"
+            strokeLinecap="round"
           />
         </g>
 

apps/web/src/app/games/complement-race/lib/RailroadTrackGenerator.ts

@@ -48,16 +48,16 @@ export class RailroadTrackGenerator {
    * Based on route number for variety across different routes
    */
   private generateTrackWaypoints(routeNumber: number): Waypoint[] {
-    // Base waypoints for scenic railroad journey - extended to viewport edges
+    // Base waypoints for scenic railroad journey - extended beyond viewport edges
     const baseWaypoints: Waypoint[] = [
-      { x: -50, y: 300 },  // Start at left tunnel entrance
-      { x: 100, y: 260 },  // Exit tunnel
-      { x: 230, y: 200 },  // Climb into hills
+      { x: -120, y: 300 }, // Start well beyond left edge (continues into tunnel)
+      { x: 80, y: 260 },   // Emerging from left tunnel
+      { x: 220, y: 200 },  // Climb into hills
       { x: 360, y: 170 },  // Mountain pass
-      { x: 490, y: 220 },  // Descent to valley
-      { x: 620, y: 160 },  // Bridge over canyon
-      { x: 750, y: 240 },  // Rolling hills
-      { x: 850, y: 300 }   // Enter right tunnel
+      { x: 500, y: 220 },  // Descent to valley
+      { x: 640, y: 160 },  // Bridge over canyon
+      { x: 780, y: 240 },  // Rolling hills
+      { x: 920, y: 300 }   // Enter right tunnel (continues beyond right edge)
     ]
 
     // Add controlled randomness for variety (but keep start/end fixed)