feat: extend railroad track to viewport edges

Modify track waypoints to span from left edge (x: -50) to right edge
(x: 850) of the viewport, creating a more expansive journey across
the full screen width.

🤖 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,6 +214,60 @@ export function SteamTrainJourney({ momentum, trainPosition, pressure, elapsedTi
           strokeLinecap="round"
         />
 
+        {/* Left tunnel entrance */}
+        <g data-element="left-tunnel">
+          {/* Tunnel depth/interior */}
+          <ellipse
+            cx="-50"
+            cy="300"
+            rx="45"
+            ry="50"
+            fill="#1a1a1a"
+          />
+          {/* Tunnel arch opening */}
+          <path
+            d="M -95 300 Q -95 240, -50 240 Q -5 240, -5 300 Z"
+            fill="#2d2d2d"
+            stroke="#4a4a4a"
+            strokeWidth="3"
+          />
+          {/* Tunnel brickwork texture */}
+          <path
+            d="M -95 300 Q -95 240, -50 240 Q -5 240, -5 300"
+            fill="none"
+            stroke="#3a3a3a"
+            strokeWidth="2"
+            strokeDasharray="10,5"
+          />
+        </g>
+
+        {/* Right tunnel entrance */}
+        <g data-element="right-tunnel">
+          {/* Tunnel depth/interior */}
+          <ellipse
+            cx="850"
+            cy="300"
+            rx="45"
+            ry="50"
+            fill="#1a1a1a"
+          />
+          {/* Tunnel arch opening */}
+          <path
+            d="M 805 300 Q 805 240, 850 240 Q 895 240, 895 300 Z"
+            fill="#2d2d2d"
+            stroke="#4a4a4a"
+            strokeWidth="3"
+          />
+          {/* Tunnel brickwork texture */}
+          <path
+            d="M 805 300 Q 805 240, 850 240 Q 895 240, 895 300"
+            fill="none"
+            stroke="#3a3a3a"
+            strokeWidth="2"
+            strokeDasharray="10,5"
+          />
+        </g>
+
         {/* Railroad ties */}
         {tiesAndRails?.ties.map((tie, index) => (
           <line

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

@@ -48,15 +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
+    // Base waypoints for scenic railroad journey - extended to viewport edges
     const baseWaypoints: Waypoint[] = [
-      { x: 50, y: 300 },   // Start at depot
-      { x: 150, y: 220 },  // Climb into hills
-      { x: 280, y: 180 },  // Mountain pass
-      { x: 420, y: 240 },  // Descent to valley
-      { x: 550, y: 160 },  // Bridge over canyon
-      { x: 680, y: 200 },  // Rolling hills
-      { x: 750, y: 280 }   // Arrive at destination
+      { x: -50, y: 300 },  // Start at left tunnel entrance
+      { x: 100, y: 260 },  // Exit tunnel
+      { x: 230, 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
     ]
 
     // Add controlled randomness for variety (but keep start/end fixed)