GLM 5.3

Let me build a train-themed snake game. Key requirements:

1. Single HTML file, all inline
2. Snake = train: locomotive head + colorful wagons
3. Food = passengers waiting on platforms
4. Auto-playing demo mode behind "Click or press a key to start" overlay
5. Responsive 1280×800 down to 375px, no horizontal scrollbar
6. Meaningful first paint

Design concept: I want this to feel like an authored, crafted piece — not a generic snake clone. Ideas:

- Top-down railway aesthetic: a grid where the track curves. Draw rails between grid cells — the path the train has traveled renders as track with sleepers (ties). That's a lovely signature detail: the snake's body IS the track being laid behind the locomotive.
- Locomotive: drawn with canvas — a steam engine facing direction of travel, with a chimney puffing smoke particles.
- Wagons: colorful (different hues), each with windows, wheels.
- Passengers: little people standing on a small platform with a bench/sign, waiting. When picked up, the train grows a wagon in that passenger's color — nice narrative: you pick up passengers, they become your wagons? Hmm, thematically wagons shouldn't be passengers. Better: picking up passengers adds a passenger wagon (a new colorful wagon joins the train to carry them). That's the game mechanic — snake grows.
- Score: "Passengers aboard".
- Stations/platforms: spawn a passenger on a random cell with a small platform tile drawn.

Visual style: I'll go for a warm, tactile "toy railway on a table" look. Cream/paper background for the ground with subtle grass texture patches, or a night scene? Let me pick a warm daylight countryside: soft sage green ground, cream UI, a dark warm palette for text. Avoid gradients as decoration — use flat colors with subtle noise/shapes. Actually a subtle radial vignette is fine but let me keep it mostly flat and crafted.

Font: use a Google Font via CDN? External CDN allowed. Something characterful — "Bungee"? Too loud. For a toy train vibe: "Fredoka" or "Baloo 2" — rounded, playful. Or a slab like "Alfa Slab One" for the title. I'll use "Fredoka" for UI and maybe "Alfa Slab One" or just Fredoka weights. Let me do: title in a chunky style. Google Fonts CDN is fine.

Layout: center the game board (canvas), header with title, score, best (in-memory, since localStorage is blocked). Maybe a small side panel? Keep it a single centered column: title bar above the board, board canvas, controls hint below. Actually for 1280x800 I could do a wider composition: left side big canvas, right side a "conductor's card" with score, next passenger color, length, speed. But careful about dashboard feel — I'll keep it minimal: a header strip with title on left, and a few stats inline. Then the canvas. Bottom: key hints. That's clean and game-like, not dashboardy.

Grid: maybe 24×16 cells (3:2). Canvas sized responsively via CSS, with devicePixelRatio scaling. Cell ~34px logical. 24*34 = 816 wide, 16*34=544 tall. Fits in 800 height with header (~70px) + footer (~50). Good.

Game mechanics:
- Snake grid movement with a move timer (e.g., 140ms per step, speeding up slightly per passenger).
- Direction queue to prevent reversing.
- Walls: wrap or die? Classic snake dies on wall; but for a train, wrap feels odd. I'll do walls = derailment (game over) with a clear crash animation. Or wrap-around like a tunnel? Trains going through tunnels at edges could be cute — but collisions with self = crash. Let me do: hitting the edge derails (game over), classic. Actually to be friendly, maybe edges wrap with a "tunnel" visual? That complicates drawing. I'll go with walls kill — classic snake, and demo AI must handle it.

Demo AI: simple pathfinding — greedy toward food avoiding immediate collisions; better: BFS on grid to food avoiding body (excluding tail that will move). BFS is easy and robust for the demo. If no path, pick any safe move. Let me implement BFS each move for the AI. Also avoid moves that trap: BFS to food is usually fine for a demo.

When player starts: keyboard arrows/WASD control. Restart on death after showing game-over overlay with "Press to restart" — the demo AI should resume? Requirement says game starts in self-playing demo mode behind a message; after game over, show results, then go back to attract mode after a few seconds or on click restart. I'll do: game over → overlay with score, "click/press to play again". On click: reset and player controls. If idle on game-over for ~6s, return to attract mode? Simpler: game over overlay has two options — clicking restarts player mode. Keep attract only on first load. Hmm, spec: "Games must start in a self-playing demo mode... behind a 'Click or press a key to start' message". First load only is required. I'll do: after game over, wait 5s then auto-return to attract mode; pressing key/click immediately starts new player game.

Rendering details (the craft):

Ground: warm sage `#b7c9a1`-ish? Let me pick a palette:
- Ground: soft green `#a8c69f`... I want a slightly desaturated, toy-like palette. Maybe:
  - Ground grass: #9DBB8F or a muted #A3B98C
  - Track ballast: warm sand #E8D9B8 strip under rails
  - Rails: dark brown #5B4636, sleepers: #8A6D4E
  - Board frame: dark wood brown #4A3B2E with rounded corners
- Train colors: red #E15A4E, yellow #F2B950, teal #3FA8A0, blue #5B8BD9? avoid default-blue vibe... it's a wagon color among many, fine — but I could use more distinctive: #E15A4E (red), #F2B950 (yellow), #4E9E8F (teal), #8C6BC8 (purple? avoid purple gradient rule is about themes, a purple wagon is fine), #E2874B (orange), #6BA14F (green). Locomotive: dark charcoal #3A3A3A with red accents.

Passengers: tiny people with varied shirt colors, standing on a platform tile (grey platform with edge line, a tiny bench or a sign "WAIT"). Slight idle bobbing animation. Maybe a thought bubble? Keep simple: bobbing + occasional wave. When train approaches... too much. Bobbing suffices.

Locomotive drawing: top-down view. A rounded rectangle body (dark), a chimney circle near front, cab area, cowcatcher at the nose, small headlight. Wheels along sides as dark stubs. Direction-aware rotation.

Wagons: rounded rects in their color, darker roof stripe, small windows (light squares), wheels, connector gap between cars.

Track rendering: draw the rail path beneath the train — for each segment between adjacent body cells, draw ballast strip + two rails + sleepers. This is the killer detail: the train lays track behind it. Draw from the tail to head. Sleepers perpendicular to segment direction.

Smoke: particles emitted from chimney while moving, drifting opposite to travel, expanding and fading. Gray-white puffs.

Pickup effect: when collecting a passenger — little "+1" or a small puff, and a new wagon color = passenger's shirt color? Nice: each passenger has a random color; when picked up, a wagon of that color is added. Passenger count of unique colors though — snake wagons each get a color when grown. Standard snake grows at tail. I'll color new wagon with the passenger's shirt color — cohesive and delightful.

Score UI: "Passengers aboard: N", "Train length", "Speed". Best score stored in memory only (no localStorage).

Overlay: dark translucent over canvas with title "PLATFORM SNAKE" / "TRAIN SNAKE"... name idea: "SNAKE EXPRESS" — good. Tagline. "Click or press a key to start". Also show controls (arrows / WASD). During attract mode, AI plays visibly behind the translucent overlay — overlay must be light enough to see the game. Use a centered card with slight backdrop blur? backdrop-filter might be heavy but fine. Use semi-transparent panel only in the center, leaving the game visible around it. 

Pause: press P or Space? Space could pause. Keep: Space = pause during play. Esc too maybe.

Game over: "DERAILED!" message with stats. Then auto-attract after 5s or click to retry.

Audio: skip (network/autoplay issues), or WebAudio beeps — small pickup "ding" via oscillator. Autoplay policy: audio context resumes on first interaction. Nice touch: pickup ding, crash sound. I'll add tiny WebAudio, guarded in try/catch, only after user gesture.

Now, movement & grid details:
- Grid COLS=24, ROWS=15 (fits 3:2-ish; 15 keeps canvas shorter for vertical space). Cell 36 → 864×540. With 1280 width fine; on 375px wide, canvas scales via CSS width:100%, aspect ratio maintained.
- Snake stored as array of {x,y}, head first.
- dir {x,y}, input queue.
- step interval starts 160ms, decreases by ~3ms per passenger, min 80.
- Passenger spawn: random free cell, not too close to head maybe.
- Also multiple passengers? Classic one at a time. Maybe 1 passenger at a time but occasionally a "group" (3 standing together) worth bonus? Keep single for clarity, but spawn a new one immediately after pickup.

Collision: next head cell in wall or in body (excluding tail cell if not growing) → game over.

AI (attract): BFS from head to food over free cells (body cells blocked, except tail if it will move — approximate: block all body except tail). If path found, take first step. Else pick any safe neighbor. Also safety: prefer moves where BFS to food exists after move — the simple version is adequate.

Also the AI shouldn't be too perfect/fast — keep normal speed so it looks natural. Attract speed 150ms fixed-ish, gradually speeding too is fine.

Drawing pipeline per frame (rAF with interpolation? Grid steps could be interpolated for smooth motion — that elevates feel a lot). Interpolation: keep prev positions of each segment, lerp between prev and current by t = elapsed/interval. Each segment has from→to. On step, store previous array. For track drawing, use the current logical cells (path is discrete anyway; rails drawn on cell centers). Actually drawing track on discrete cell connections looks fine (right angles). The train drawn interpolated along the path — the head between cells. But then train wagons between cells while track is at right angles — a top-down train turning 90° instantly looks okay if we rotate cars per segment. Interpolating positions per car: each car lerps from its previous cell to current cell — cars will naturally follow. Rotation per car: direction from its prev to current cell. At turns the car snaps rotation — acceptable, or I can rotate the car to face travel direction smoothly. Simple snap is fine for toy aesthetic.

Track: draw rails for all occupied cells chain (head→tail) plus maybe fade older? The track exists only under the train (like the snake body is the track). Draw ballast+rails beneath each car, connecting cell centers. Since body cells are adjacent, draw for each consecutive pair. Sleepers along each pair.

Wait — draw the track under the whole train so it reads as "train on track". Also draw small track stub ahead of locomotive (a few ties extending) for charm? Maybe 0.5 cell ahead. Nice detail: a short "rail preview" ahead of the head in the current direction. I'll add subtle.

Grass texture: sprinkle random static tufts/flowers (seeded, precomputed) on cells without track... track covers cells dynamically; just draw tufts on all cells first, track over them. Precompute decoration positions (tiny grass blades, dots, flowers) once.

Also scattered decorative elements: a pond? trees? Trees could block... keep them outside the grid? The board is the play field entirely; decorations are small and non-blocking (tufts, flowers, pebbles). Maybe a station house drawn behind the passenger? Passenger stands on a platform tile: draw grey platform with white edge line and a small sign. That's the "station" marker. Good enough and clear.

Edge: draw a wooden board frame around canvas (border-radius, thick border via CSS on a wrapper with wood color, canvas inset).

HUD: above canvas: left title "SNAKE EXPRESS 🚂" — no emoji! Use text + maybe a small inline SVG icon of a train. I can inline a small SVG loco icon. Stats right-aligned: Passengers, Length, Best. Use tabular numbers.

Footer: control hints with key caps (styled kbd elements): "↑↓←→ / WASD steer · SPACE pause · R restart". 

Responsive: max-width container ~900px; on small screens HUD wraps. Canvas CSS width 100%.

Fonts: Google Fonts link: "Fredoka:wght@400;500;600;700" plus maybe "Alfa Slab One" for the title. Two families ok. Actually let me use "Fredoka" (rounded, playful, fits toy train) for everything with 700 weight for title — cohesive. Or "Baloo 2". I'll take Fredoka.

Colors final:
- Page bg: warm cream #F3EBDC with subtle dot pattern? Flat cream + maybe very subtle noise via repeating radial? Keep flat #F1E8D8.
- Text ink: #3D3126.
- Board frame: #6B4F35 (wood), inner board grass #A9C08C? Let me refine: grass #A3BF87 slightly muted. Ballast #E5D5AE. Rails #7A6A55 / dark #54483A. Sleepers #8A6B4A.
- Platform (passenger): light grey #DCD9D0 with #B9B4A6 edge, sign post.
- UI accents: red #D9534F-ish (#C74A3C) for title icon.

Smoke: white-ish rgba(255,255,255,.8) to transparent, drawn as circles growing.

Now the overlay design: centered card (cream, rounded, drop shadow) with title, subtitle, and a pulsing "Click or press any key to start". Behind it the attract game runs. Card shouldn't cover whole board. Also small note "Demo: autopilot driving".

Game states: 'attract', 'playing', 'paused', 'over'. 

Key handling: any key during attract → start playing (except modifier keys). Click on canvas too. During 'over': any key/click → start new game (after brief lockout 400ms to avoid accidental instant restart). During 'paused': space/esc/p to resume.

Let me also add a subtle screen shake on crash? Small — 300ms shake of canvas via CSS class. Nice.

Crash animation: train cars derail — tilt cars randomly? Could add: on death, each car gets a random small offset/rotation for the "over" state render. Cute. And smoke burst.

Let me write the code carefully.

Structure:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Snake Express</title>
<link fonts...>
<style>...</style>
</head>
<body>
<div class="page">
  <header class="hud">
    <div class="brand">
      <svg loco icon/>
      <div><h1>Snake Express</h1><p class="tag">a tiny railway in the grass</p></div>
    </div>
    <div class="stats">
      <div class="stat"><span class="label">Passengers</span><span id="score">0</span></div>
      <div class="stat"><span>Train length</span><span id="len">1</span></div>
      <div class="stat"><span>Best trip</span><span id="best">0</span></div>
    </div>
  </header>
  <div class="board-wrap" id="boardWrap">
    <canvas id="game"></canvas>
    <div class="overlay" id="overlay"> ... card ... </div>
  </div>
  <footer class="hints">
    <span><kbd>←</kbd><kbd>↑</kbd><kbd>↓</kbd><kbd>→</kbd> or <kbd>W</kbd><kbd>A</kbd><kbd>S</kbd><kbd>D</kbd> steer</span>
    <span><kbd>Space</kbd> pause</span>
    <span><kbd>R</kbd> restart</span>
  </footer>
</div>
<script>...</script>
</body>
</html>
```

Overlay content changes per state — I'll build it with JS (set innerHTML per state) or have separate divs toggled. I'll do one overlay div and update its innerHTML via functions showAttract(), showOver(score), hide().

Canvas sizing: fixed logical size 24*36=864 × 15*36=540. Set canvas width/height with DPR: canvas.width = 864*dpr etc., ctx.scale? I'll compute: 

```js
const CELL = 36, COLS = 24, ROWS = 15;
const W = COLS*CELL, H = ROWS*CELL;
function fit() {
  const dpr = Math.min(window.devicePixelRatio||1, 2);
  canvas.width = W*dpr; canvas.height = H*dpr;
  canvas.style.width = '100%'; canvas.style.aspectRatio = W+'/'+H; // CSS handles
  ctx.setTransform(dpr,0,0,dpr,0,0);
}
```

CSS: canvas { width:100%; height:auto; display:block; aspect-ratio: 864/540; } and canvas element has width/height attrs set with dpr. Note: setting canvas.width resets transform each time, so set transform after. Fine.

Rendering each rAF: 
```
function frame(now) {
  requestAnimationFrame(frame);
  if (state==='playing'||state==='attract') {
    if (now - lastStep >= interval) { lastStep = now; step(); }
  }
  draw(now);
}
```
For interpolation, t = clamp((now-lastStep)/interval, 0, 1). After step(), prevBody = old body. But careful: growth adds a segment — new tail's prev = same as its current (appears statically). When growing, we push tail duplicate; prev for that new car = same position so it "grows out" from tail. Standard.

step():
```
function step(){
  prevSnake = snake.map(s=>({...s}));
  // dir already validated
  let dir = pendingDirs.length? ... 
```
Let me implement: `let ndir` chosen from queue (first valid one). Compute new head. Check collisions. If food eaten: don't pop tail; spawn passenger; addWagonColor push; score++; adjust interval; effects. Else pop tail.
When growing: snake.unshift(newHead); and prevSnake handling — for interpolation, each drawn car i uses snake[i] with prev position = snake[i]... Simpler approach: keep for each car index: draw car at lerp(prevCells[i], cells[i]). Build `cells = snake.slice()` after step; `prevCells` = positions before step aligned by index: prev for index i is old snake[i-1]... hmm classic: after unshift, snake[i] corresponds to old snake[i-1]'s cell? No — snake[i] new = old snake[i]... let's think: new snake = [newHead, ...oldSnake (minus popped tail or not)]. So for car 0 (head): from old head pos (old snake[0]) to newHead. Car i: from old snake[i-1]? No: new snake[i] = old snake[i-1] (for i>=1 when we unshifted). Wait new snake[i] equals old snake[i-1] cell exactly. The car at index i moved from old snake[i] to new snake[i] = old snake[i-1]. So car i's motion: from its old position old snake[i] to new position new snake[i]. So prevCells[i] = old snake[i] (if exists; for the last car when grown, old snake[i] doesn't exist → prev = its own current = old snake[i-1]).

So: store `old = snake.map(clone)` before mutation. After mutation, for each i: prev = old[i] ?? snake[i] (when grown, snake.length = old.length+1; the new last car's prev = its current cell so it just appears — actually nicer: prev = old[old.length-1]... that would make it slide from tail position — that's actually the classic "grows from tail" look. Hmm, new last car sits at old tail position (since tail wasn't popped, new snake last = old last). prev = old[i] doesn't exist because length grew by 1. new snake[last] = old snake[last] (same cell, tail not popped). So prev = same cell → static. That's fine and correct: the tail car stays put one tick while everything ahead moves. Good — so prevCells[i] = old[i] !== undefined ? old[i] : snake[i]. 

Track drawing: iterate pairs (snake[i], snake[i+1]) — draw segments. Also, since interpolated cars move between cells, track drawn on logical cells is fine (ballast under the cells).

Draw order:
1. ground (base color, decorations)
2. platform + passenger (drawn under train? train passes over platform? Train drives through the platform cell... in snake the food is on the track. It's fine—passenger stands beside track within the cell. When head reaches cell, passenger boards.) Draw platform before train.
3. track (ballast, sleepers, rails)
4. rails preview ahead of head (short)
5. train cars from tail to head (head last on top)
6. smoke particles
7. pickup particles/effects

Decorations: precompute array of {x,y,type} in pixel coords: tuft (3 short lines darker green), flower (dot with petals — small circles), pebble (grey ellipse). ~90 items. Static seeded random (Math.random fine, generate once).

Passenger drawing: standing figure top-down... top-down person = circle (head/hat) with shoulders? Hmm top-down small person: draw as slightly side-ish "token": I'll draw a simple figure viewed from above-ish: a rounded rectangle body (shirt color) with a head circle (skin) and hat, plus tiny feet shadow. Or draw a cute front-facing chibi standing (like a board-game token viewed from an angle) — many top-down games draw characters front-facing anyway. I'll draw a small front-facing person: head (circle, skin #F2C9A0), hair/hat (colored arc), body (shirt color rounded rect), legs dark. Bobbing: y offset = sin(now/300 + phase)*1.5. Plus a shadow ellipse under. Standing on platform tile (grey rounded rect with white safety line, small bench maybe — skip bench, add a sign: a pole with a small blue "H" plate? Avoid blue default... a cream plate with dark "P"? I'll add a small station sign with "WAIT" no—too tiny. A pole with circle sign (like a railway sign). Keep it: platform tile + person + tiny suitcase beside some passengers (randomly). Suitcase = brown small rounded rect with handle. Cute!

Locomotive top-down: 
```
drawLoco(x,y,angle)
- rotate context
- body: rounded rect from -14..14 length? Cell 36; car size ~ 30×22 (length along travel dir 30, width 22).
Loco: dark charcoal #3B3B42 body, red stripe, cab at rear (slightly wider), boiler front circle, chimney circle at front-third with inner dark, cowcatcher: small triangle at nose in red/dark, headlight: yellow dot at nose. Wheels: black stubs on both sides (small rects). Roof detail line.
```
Wagon: color body rounded rect, roof lighter/darker stripe down middle, 3 windows (light squares #FFF8E8) along sides? Windows on sides: small rounded squares near both edges. Wheels stubs. Coupling: small dark link at both ends (tiny rect).

Smoke: emit from chimney world position each ~90ms while moving. Particle {x,y,vx,vy,r,life}. Update: pos += v, r grows, life decreases; draw rgba(90,85,80,alpha)? Steam white: rgba(255,253,247, a) with slight gray. On light grass white smoke visible? White on sage green — visible enough. Add subtle darker outline? Just semi-white, fine. Cap ~40 particles.

Pickup: burst of small confetti-ish particles in passenger color + a floating "+1" text particle. And a soft ring expanding.

Sound (WebAudio): pickup = two quick sine notes (660→880). crash = low sawtooth drop. Guard with `audioReady` after gesture; wrap in try/catch.

Attract AI (BFS):
```
function aiDir(){
  const start = snake[0];
  const target = food;
  const blocked = new Set(snake cells except tail? include all but allow tail);
  BFS from start to target over grid, 4-neighbors, avoiding blocked (exclude tail cell from blocked since it moves... if not growing. Simple: block all body except last).
  If path: first step direction.
  Else: fallback - safe neighbor maximizing free space (flood fill count).
}
```
Then set direction via same queue mechanism (AI writes into pendingDirs). Also AI must not reverse.

Edge case: BFS each tick is cheap (24*15=360 cells).

Also demo mode: run indefinitely; when AI dies (rare with BFS but possible), auto-restart attract after 1.5s without showing game over card (or show quick "restarting..." ). I'll just reset silently after brief pause.

Player start: reset(), state='playing'.

HUD updates on change: score, len, best. Best kept in JS var.

Speed: interval = max(80, 165 - score*3). Attract uses 130 fixed? Let attract use same formula, resets on its own.

Pause overlay: dim + "Paused — Space to resume".

Also add: while paused, dim canvas via overlay.

Now write draw() with interpolation:

```
const t = state playing/attract ? clamp((now-lastStep)/interval,0,1) : 1;
```
For 'over' state, t=1 (frozen). For 'paused', t frozen at current? Keep t as is: since lastStep doesn't advance, (now-lastStep) grows → t clamps to 1. But paused mid-step shows cars at end of motion — fine. Actually to freeze mid-motion we'd store pausedT. Simpler: on pause, cars just settle to grid. OK.

Car positions: px = lerp(prev.x, cur.x)*CELL + CELL/2.

Car angle: direction of motion for that car = cur - prev (if different). angle = atan2(dy,dx). If prev==cur (tail growth), keep previous angle or derive from neighbor. Store per-car lastAngle. Simpler: compute angle from next cell toward prev cell? The car faces from prev to cur; if zero, use angle of segment between snake[i+1] and snake[i]... I'll compute: if dx||dy use it; else fallback to car's previous stored angle (keep array carAngles). Or fallback: direction from snake[i] to snake[i-1] (toward head). Let me maintain `carDir` array updated each step: carDir[i] = normalized (snake_new[i] - snake_old[i]) or fallback to old carDir[i]... but on turns we want the car to visibly rotate. Snap rotation is fine — toy-like.

Simplify: angle = atan2(cur.y-prev.y, cur.x-prev.x) when different; else keep last computed for that index (store in array `angles`, persist across steps). Init all to dir.

Track ahead preview: from head, in current facing angle, draw short rail stubs extending half a cell beyond head — cute "about to lay track". Implement: draw a small ballast+2 rail lines from head center outward 20px. Only if state playing/attract. Eh — optional; adds charm. I'll include, subtle, alpha .5.

Track drawing function for a segment between two cell centers:
```
function drawTrackSeg(ax,ay,bx,by){ // pixel centers
  // ballast: thick line
  ctx.strokeStyle = ballast; lineWidth = CELL*0.72; lineCap='butt'
  stroke line
  // sleepers: perpendicular dashes spaced 7px
  // rails: two parallel lines offset ±4.5 from center, color dark
}
```
Sleepers: along the segment, every 7px, draw short perpendicular line (length 18, width 3.5, color brown). For nicer look draw them as rounded rects. Since consecutive segments share the joint, drawing each pair segment with butt caps works; joint overlap fine since ballast same color; rails continuous-ish (each segment's rails meet at cell centers — good, aligned).

Rails offset: perpendicular normal to segment. For straight segments trivial.

Full track path = polyline through all snake cell centers. I can just stroke the whole polyline at once for ballast and rails (path through centers) — but offsetting parallel curves at corners leaves gaps at 90° turns for rails. Standard trick: draw rails as polyline with lineWidth 3 — offset polylines at corners create small gaps outside corner / overlap inside. Minor artifacts acceptable? At 90° turns, outer rail has a gap of ~4.5px. Could look broken. Alternative: draw each rail as individual segments computed with miter join by extending... Simplest robust: for each pair draw two rail segments corner to corner — at a corner, the rails of the two segments meet at slightly different points, causing tiny notch. Honestly at 4px offset, corner notch ~4px — noticeable but rustic/toy-like, acceptable. Alternatively draw rounded corner caps: draw each rail segment with round caps → corners get blobby but connected. Round caps radius 1.5 (lineWidth 3) doesn't cover 4.5 offset gap. Hmm.

Better approach for corners: draw each rail per segment with `lineJoin` handled by drawing the whole offset path per segment chain but with "manual miter": for each intermediate corner point, compute the two rail points on each segment and connect them with a small line (the miter). That's: for segment between corner points P_i-1,P_i,P_i+1: rail points computed by offsetting along each segment, then join. Doable but let me just accept per-segment straight rails with butt caps; at a 90° turn, inner rail overlaps slightly, outer rail has a small square gap. With sleepers underneath and dark color, it will read fine — actually toy wooden tracks have exactly this look (like Brio). I'm okay with it; even charming.

Let me draw per consecutive pair:
```
for i in 0..snake.length-2:
  drawTrack(snake[i], snake[i+1])
```
And skip drawing ballast twice (overlap same color fine).

Sleepers: spacing along segment from a=cell center to b: total dist = CELL (36). Sleeper every ~9px → 4 per cell. Draw from t=4 to t=32. Sleeper: rotated rect 3×16 centered at point, rotate to perpendicular of segment direction (i.e., along normal). Since segments axis-aligned, easy.

Actually since all segments are axis-aligned, I can simplify: no rotation math needed, but I'll write generic with save/translate/rotate for cleanliness... performance: 24 cars × small ops, fine at 60fps.

Draw car function:
```
function drawCar(cx, cy, ang, type, color, wobble){
  ctx.save(); ctx.translate(cx,cy); ctx.rotate(ang);
  // shadow
  ctx.fillStyle='rgba(60,50,35,.18)'; roundRect(-L/2+2, -W/2+3, L, W, 6); fill
  ...
}
```
Where +x is facing direction. Car dims: length 30, width 22.

Loco details (facing +x):
- body: dark #37363C roundRect(-15,-11,30,22,5)
- boiler front: circle at x=+13? nose at +15. Chimney: circle at x=+7, r=4.5, color #26252A with inner #111.
- cab: at rear x from -15..-5, slightly wider: roundRect(-16,-12,11,24,3) color #37363C with red roof? Let me structure: main body dark; a red stripe along middle: rect(-15,-2,30,4)? Hmm keep: 
  - boiler: roundRect(-4,-10,19,20,4) slightly lighter dark #44434A
  - cab: roundRect(-15,-11,12,22,4) #2E2D33 with red roof rect(-14,-9,10,18)? 
  Simpler stylized: whole loco body #3A3940, front cowcatcher: triangle at nose (x 15..19) colored #C74A3C, chimney circle at x=8 r=4 color #232227, headlight small yellow circle at x=15 r=2.5, cab window at rear: rounded rect(-12,-6,7,12) color #FFEEC9? Cab at rear (loco usually: chimney front, cab rear). Yes: chimney near front, cab at back. Windows: since top-down, show cab roof: roundRect(-15,-10,11,20,4) color #514F58 roof with red border? I'll do: roof rect color #B8433A (red cab roof) — classic toy steam engine: black boiler + red cab. 
  - wheels: dark stubs: rects at (-10..12, ±11) small black rounded rects: e.g., fillRect(-12,-12.5, 7,3) sides ×3 each side. 
  - front coupling.
- Also small gold dome between chimney and cab: circle r=3 #E0A83C at x=1.

Wagon details:
- shadow
- body roundRect(-14,-10,28,20,5) color
- roof stripe: roundRect(-10,-6,20,12,3)? A center roof panel slightly darker: darken(color). Plus two small roof ribs lines.
- windows: not visible top-down except maybe through... skip windows, but add side openings: small light squares at edges? Top-down toy wagons just have roof. I'll add: darker roof panel + 2 thin rib lines + wheels + couplings (dark small rects at ends: rect(14,-2,4,4) and (-18,-2,4,4) color #3A3128).
- Number the wagons? tiny circle badge? skip.

Color helpers: shade(hex, amt).

Passenger boarding animation: when picked up, spawn particle ring + floating "+1"; also brief "boarding" — skip complexity.

Also show a small "next station" flavor: passenger has a bubble? skip.

HUD: I'll also flash the score stat on pickup (CSS class 'bump' with animation).

Overlay HTML for attract:
```
<div class="card">
  <svg small train divider?>
  <h2>Snake Express</h2>
  <p>Drive the locomotive to waiting passengers — every pickup couples one more colorful wagon.</p>
  <p class="pulse">Click or press any key to start</p>
  <p class="mini">Watch out: hitting the grass edge or your own wagons derails the train.</p>
</div>
```
Game over:
```
<h2>Derailment!</h2>
<p>You carried <b>N</b> passengers with a <b>L</b>-car train.</p>
<p class="pulse">Click or press any key to try again</p>
```
Best score note if new best: "New record!".

Wait — hitting the grass edge: edges kill. The board is grass; the frame is wood. "Running off the ballast"? Message: "mind the edges". Fine.

Keyboard: keydown listener on window. Prevent default for arrows/space to avoid scrolling.

Restart key R during play → reset to playing directly (or to attract? playing).

Edge behavior: death when head outside 0..COLS-1.

Let me also handle click on overlay/boardWrap: if attract → start; if over (and cooldown passed) → start; if playing → ignore (or pause? ignore). If paused → resume.

Focus note: "The iframe only receives keyboard events after the user clicks it" — our message says click or press key; fine.

Now write the actual code. Let me be careful with details.

```js
const COLS=24, ROWS=15, CELL=36;
const W=COLS*CELL, H=ROWS*CELL;
```

864×540. Header ~64px + footer ~40 + paddings: total ~700 within 800. Good.

State vars:
```js
let snake, snakePrev, angles, dir, dirQueue, food, foodColor, score, best=0, interval, state='attract', lastStep=0, deadAt=0;
let particles=[], smokes=[], floats=[];
let growBy=0? // not needed; instant grow
```

reset():
```js
snake = [{x:6,y:7},{x:5,y:7},{x:4,y:7}];
snakePrev = snake.map(clone); // wait: need prev to lerp; init same
angles = [0,0,0] wait angles face dir: dir = {x:1,y:0} => angle 0. But draw angle uses atan2 of motion. Init angles=[0,0,0] wait but for x-reverse... fine.
dir = {x:1,y:0}; dirQueue=[];
score=0; interval=160; spawnFood(); smokes=[]; particles=[]; floats=[];
```

Wagon colors: initial wagons: loco + 2 wagons (random colors from palette). On pickup, new wagon color = passenger's color. Passenger color chosen from palette (random, not same as maybe). WagonColors array parallel to snake (index 0 = loco, others colors).

spawnFood(): pick random free cell, at distance >= 3 from head? and not on snake. color = palette random; also random passenger look params: skin tone variant, hat style, hasSuitcase, phase.

Palette: 
```js
const PALETTE = ['#E2574C','#EEB545','#4FA08B','#5D87B8'? ...]
```
Let me choose 6 distinct toy colors: red #E0533F, amber #EFAF3C, teal #3E9C8C, blue #4E7FB8? A blue wagon is okay but avoid the exact tailwind blue #3B82F6 — mine #4E7FB8 is different enough. Also plum #9A6BB0, green #7FA653. OK: 
`['#E0533F','#EFAF3C','#3E9C8C','#4E7FB8','#9A6BB0','#7FA653']`

Passenger skins: ['#F4CBA4','#E2B18B','#C68E63','#8D5A3B'] hair/hat colors: dark browns/black/blonde/red.

step():
```js
function step(){
  // choose direction
  while(dirQueue.length){
    const d = dirQueue.shift();
    if(d.x!==-dir.x || d.y!==-dir.y){ if(d.x!==dir.x||d.y!==dir.y){dir=d;} break; }
  }
  // hmm: standard: take first valid; if invalid (reverse) skip it? I take: shift until found non-reverse; apply & break. Actually break after applying first non-reverse. If reverse, discard and continue examining next. That's what loop does but it applies then breaks; if first is reverse it discards, then tries next. OK.
```
Hmm subtle: if queue has [reverse, left] we want left applied. My loop: shift reverse → discarded; shift left → applied, break. 

AI fills dirQueue each step (replace queue with computed dir).

```js
  const old = snake.map(p=>({x:p.x,y:p.y}));
  const head = {x:old[0].x+dir.x, y:old[0].y+dir.y};
  // collisions
  let hit = head.x<0||head.y<0||head.x>=COLS||head.y>=ROWS;
  const willEat = !hit && head.x===food.x && head.y===food.y;
  if(!hit){
    const bodyToCheck = willEat? snake : snake.slice(0,snake.length-1); // tail moves away if not eating
    // but head cell can't equal tail-of-check... check body cells
    if(bodyToCheck.some(p=>p.x===head.x&&p.y===head.y)) hit=true;
  }
  if(hit){ die(); return; }
  snake.unshift(head);
  if(willEat){ 
    wagonColors.push(food.color);
    score++; if(score>best){best=score;}
    interval = Math.max(78, 160 - score*3);
    effects at head pixel;
    spawnFood();
    updateHUD();
    playDing();
  } else snake.pop();
  // rebuild prev alignment
  snakePrev = snake.map((p,i)=> old[i] || {x:p.x,y:p.y});
```
Wait: old[i] for i beyond old length: when grown, snake length = old+1; index i from 0..len-1; for i<=old.length-1 old[i] exists. New last index = old.length → undefined → use its own cell (which equals old tail). ✓.

But there's a subtlety: snakePrev[i] should be the previous position of the car now at index i. Car now at index i was previously at... new snake[1] = old snake[0]. That car moved from old snake[1] to old snake[0]. prev for index1 = old[1]? new snake[1] is at cell old[0]; the car occupying it came from old snake[1] (everything shifts forward). Yes: prev of car i = old[i]. ✓ (car i is the physical car that was at index i before; it moved to index i's new cell = old[i-1].) ✓

  // angles
  for i: if moved (snake[i] vs snakePrev[i] differ) angles[i]=atan2(...)
  else keep angles[i] (angles array must be same length; when grown push tail's angle from previous angles[last]).
```
Angles update:
```js
if(angles.length < snake.length) angles.push(angles[angles.length-1]);
for(let i=0;i<snake.length;i++){
  const a = snakePrev[i], b = snake[i];
  if(a.x!==b.x||a.y!==b.y) angles[i]=Math.atan2(b.y-a.y,b.x-a.x);
}
```
Hmm but on a turn, the car rotates at start of motion — snap. OK. Nice extra: smooth angle interpolation would be lovely but complicated with wrap? no wrap. I could lerp angle visually: displayAngle lerps toward target angle each frame. Let me add simple smoothing: `renderAngles[i] += shortestAngleDiff * 0.35` per frame. That gives nice cornering swing! Cars pivot through turns. Cheap and pretty. But cars rotating mid-cell while corners snap position — fine, looks organic. However risk: 180 flip impossible (no reverse). Shortest diff fine. I'll implement renderAngles initialized to angles; each frame: renderAngles[i] = lerpAngle(renderAngles[i], angles[i], 1-Math.pow(0.001, dt))? Use factor min(1, dt*12). Good.

Smoke emission: track head position each frame (interpolated head pos + chimney offset in facing dir): chimney local x=+8 (in car space, units before rotation) → world = head + rotate((8,0), angle). Emit every 80ms while state is playing/attract and (moving always true). Particle: vx = -cos(angle)*8 + rand*6, vy = -sin... plus slight rise? Top-down no rise; drift opposite travel + random. r grows from 2.5 to 8, life 1.6s, alpha fade.

Draw passenger:
```js
function drawPassenger(now){
  const px = food.x*CELL+CELL/2, py=food.y*CELL+CELL/2;
  // platform
  ctx.fillStyle='#DCD6C8'; roundRect(px-16,py-15,32,30,5); fill;
  ctx.strokeStyle='#B8AF9C' edge; plus yellow safety line along one edge: rect(px-14, py+9, 28, 3) color #E3B23C.
  // sign: pole at (px+12? corner) small: line + round sign
  // person bobbing
  const bob = Math.sin(now/280 + food.phase)*1.6;
  shadow ellipse; 
  legs: two small rects dark #3A3A3A at bottom; body roundRect(-6, -8+bob, 12, 12, 4) shirt color; arms small circles at sides; head circle r=5 skin at top with hat arc (colored) or hair.
```
Front-facing tiny person ~ 20px tall. Coordinates: person standing centered slightly above platform center. Let me design in local space translate(px, py-2+bob):
- shadow: ellipse (0, 10, 9, 3) rgba(0,0,0,.15) — draw before translate bob (shadow shouldn't bob): draw shadow at fixed, then body with bob.
- legs: fillRect(-5, 2, 4, 8), (1,2,4,8) color #4A4440, rounded small.
- body/shirt: roundRect(-7,-8,14,12,4).
- arms: circles at (-8,0),(8,0) r=2.5 shirt darker? skin. Use skin circles r=2.5.
- head: circle (0,-12) r=5 skin.
- hat: arc over top: ctx.arc(0,-13,5.5, PI, 0) filled hat color + brim rect(-6,-13.5,12,2). Randomly choose hat vs hair: hair = full circle slightly bigger top half color hair.
- suitcase (if food.suit): at (12,6): roundRect(9,0,10,8,2) brown #8A5A33 with handle.
- occasionally wave: arm raised? skip.

Nice enough.

drawLoco specifics (in car-local, facing +x, size ~ 34 long, 24 wide):
```
// wheels first (under body): black rounded rects along sides
wheel positions x: -10, 0, 10; y: ±11; size 6×4 (length×thickness)
ctx.fillStyle='#1F1E22'
// body
boiler: roundRect(-2,-10,20,20,6) fill #3B3A42  (front part x -2..18)
cab: roundRect(-17,-12,16,24,5) fill #B8433A (red cab) 
  with roof inset roundRect(-15,-10,12,20,3) fill #9A3630
nose cowcatcher: path triangle from (18,-8)→(23,0)→(18,8) fill #5A4636? make it dark red? Use #2E2D33.
chimney: circle (10,0) r=4.2 fill #232227; inner r=2 #0e0e10
dome: circle (2,0) r=3 fill #E0A83C
headlight: circle (17.5,0) r=2.2 fill #FFE9A8
cab windows front: small roundRect(-6,-7,3.5,14, 1.5)? On cab front x=-2.. hmm cab spans -17..-1. windows: two squares (-6,-7,4,6) and (-6,1,4,6)? Or one big roundRect(-7,-7,5,14,2) fill #FFE9A8 (cab front window). Let's: fill #FFEEC9 roundRect(-6.5,-7,5,14,2).
```
Check overlap: boiler -2..18, cab -17..-1 → overlap 1px fine. Coupling at rear: rect(-21,-2,5,4) dark.

Total loco length ~ -21..23 = 44? Too big for CELL 36. Scale down: use car dims ~ length 30 total. Let me set: L=30 span, half=15. Redo:
- wheels at x=-8,-1,6? Loco: 
  - cab: roundRect(-14,-10,11,20,4) red; roof inset roundRect(-12.5,-8,8,16,3) darker red.
  - boiler: roundRect(-3,-9,16,18,5) #3B3A42 (x -3..13)
  - cowcatcher: triangle (13,-7)→(18,0)→(13,7), fill #232227
  - chimney: circle (8,0) r=3.6; inner dark r=1.8
  - dome: circle (1,0) r=2.6 #E0A83C
  - headlight: circle (13,0)?? overlapped by cowcatcher; put at (13.5,0) r=1.8 #FFE9A8 drawn after cowcatcher.
  - cab window: skip or small on cab roof? skip, roof inset enough.
  - wheels: x at -9, -2, 5, 11? sides y=±10.5: rects (x-2.5, ±9.5.. ) I'll draw 4 per side small 5×3 rounded.
  - coupling rear: rect(-18,-1.8,5,3.6) #2A2622.
Length -18..18 = 36 = CELL exactly; cars will nearly touch — with interpolation cars occupy distinct cells so spacing = 36 center-to-center, cars 36 long touch end to end — that's actually perfect for a train (couplers touching). But corner turning will overlap visually at 90° turns... cars rotating on center with pivoting smoothing, small overlaps fine.

Maybe slightly shorter: 32 long (half 16) so small gaps show couplers. Wagons: length 28 (half 14), couplers ±14..17.

drawWagon(color):
- wheels: x=-8,8 sides.
- body: roundRect(-14,-10,28,20,5) fill color; 
- roof: roundRect(-10,-6.5,20,13,4) fill shade(color,-18)? For top-down the whole top is roof; make body = color with border darker, then inner roof panel darker/lighter. Let me: body fill color, stroke shade(color,-35) lw 2. inner panel roundRect(-9,-6,18,12,3) fill shade(color,-15). two rib lines: vertical lines at x=-3,3 from -6..6 stroke shade(color,-30).
- couplers both ends: rect(14,-1.8,4,3.6) and (-18,...) fill #2A2622.

shade(hex,amt): parse, clamp.

Ground decorations:
```js
const deco=[];
for(let i=0;i<110;i++){ deco.push({x:rand*W, y:rand*H, t: pick(['tuft','flower','pebble']), r:Math.random()}) }
```
Draw tuft: 3 arcs strokes dark green #8FA876; flower: white/pink dot cluster; pebble: ellipse #C9C4B0 alpha.

Ground base: fill '#A6BF8B'. Add subtle checker: alternate cells with alpha 0.03 darker to hint grid — helpful for gameplay! Yes: very subtle checker helps player judge grid. `if((x+y)%2) fill rgba(0,0,0,0.03)`.

Board frame: wrapper div with border: 10px solid #6B4F35; border-radius 18px; box-shadow. Plus inner thin line. Canvas radius 10px.

Page bg: #F3ECDF; add subtle pattern? maybe repeating-linear... flat is fine; add slight paper texture with radial-gradient dots? I'd rather keep flat + a soft top area. Keep flat cream.

HUD styling: flex space-between, brand with inline SVG loco mark (simple: rounded shapes) — I'll draw a tiny loco side-view icon in SVG: red cab + dark boiler + chimney + wheels. 32×24.

Stat pills: label small uppercase letter-spaced, value big Fredoka 600. Use border-left separators instead of pill boxes (avoid card-chips feel): a row of stat groups separated by thin rules. Color ink #3D3126, accent red for score value.

Footer hints: kbd styled: cream bg, border, bottom shadow 2px, radius 6, font small.

Overlay card: background #FBF6EA, radius 14, shadow, padding 28 36, max-width 420, text center. Title h2 Fredoka 700 30px, colored "Snake" ink + "Express" red? Title in HUD already; overlay title can repeat with a loco SVG + "All aboard!" for attract. Let me craft copy:

Attract card:
- small loco icon (reuse SVG, scale 40px)
- h2 "All aboard!"
- p: "Steer the locomotive to waiting passengers. Each pickup couples one more colorful wagon to your train."
- p.howto: "Arrows / WASD to steer — don't run off the ballast or into your own wagons."
- p.pulse: "Click or press any key to start"
- p.mini: "Autopilot is driving the demo"

Over card:
- h2 "Derailed!"
- p: "Your train carried <b>N</b> passenger(s) at <b>L</b> cars long."
- (if record) p.record "★ New record!" — no emoji; ★ is a symbol... it's a dingbat; I'd avoid — use text "New best trip!" styled red.
- p.pulse: "Click or press any key to try again"

Paused overlay: simple center text card small: "Paused — press Space to resume". Overlay bg: rgba(40,32,22,0.25) light dim so game visible. Card semi-opaque.

For attract, overlay dim should be minimal: use no full dim, just the card floating with shadow? The card over the board center, board fully visible around. Set overlay background transparent for attract; for pause/over slight dim rgba(45,36,24,.35).

Animations: .pulse { animation: pulse 1.4s infinite } scale/opacity. Card entrance: pop keyframes.

Now input:
```js
window.addEventListener('keydown', e=>{
  if(e.repeat) return; // allow? movement keys repeat fine but we ignore repeats for start
  const k = e.key;
  if(['ArrowUp','ArrowDown','ArrowLeft','ArrowRight',' '].includes(k)) e.preventDefault();
  if(state==='attract'){ startPlay(); return; }
  if(state==='over'){ if(now>deadAt+600) startPlay(); return; }
  if(state==='paused'){ if(k===' '||k==='Escape'||k==='p'||k==='P'){ resume(); } return; }
  // playing
  if(k===' ') { pause(); return; }
  if(k==='r'||k==='R'){ startPlay(); return; }
  let d=null;
  if(k==='ArrowUp'||k==='w'||k==='W') d={x:0,y:-1};
  ...
  if(d){ dirQueue.push(d); if(dirQueue.length>3) dirQueue.shift(); }
});
```
Note keys during attract: pressing arrow should start AND maybe apply direction — nice: start then push dir. I'll do that: startPlay(); then fallthrough to dir mapping. Simplify: after startPlay() also handle direction if arrow. I'll structure: if attract: startPlay(); then continue to direction handling (not return). But careful with 'r' etc. Fine.

Click: boardWrap click → same logic (attract→start, over→start, paused→resume).

Attract AI death: die() in attract → state stays 'attract' but we set a flag: attractDeadUntil = now+1200, and during that period freeze; then reset() and continue. Implement in die(): 
```js
function die(){
  playCrash();
  if(state==='attract'){ state='attractWait'; setTimeout(()=>{ if(state==='attractWait'){ reset(); state='attract'; } }, 1300); }
  else { state='over'; deadAt=performance.now(); showOver(); updateHUD(); }
  // crash particles + smoke burst
}
```
But state machine in frame loop: treat 'attractWait' like paused (no stepping). Draw with t=1, cars derailed tilt? Add derailed jitter: when dead, each car gets fixed random offset/rotation stored in array `derail`. Rendered when state over/attractWait: apply derail offsets. Nice touch! Generate on die: derail[i] = {dx: (rand-.5)*10, dy:(rand-.5)*10, rot:(rand-.5)*0.5}. Head loco bigger rot 0.6.

Also small screen shake: add CSS class 'shake' to canvas for 400ms. Keyframes translate few px.

Smoke burst on crash: 20 gray puffs from head.

Floats: {x,y,text,life} rising "+1" in white with dark outline? On grass, use ink color text with cream halo. Rise 24px over 0.9s, fade.

Particles (confetti): 10 small rects in passenger color, velocity outward, gravity? top-down no gravity — just outward decelerating, rotating, fading. life 0.6s.

Ring: expanding circle stroke passenger color fading.

HUD flash: scoreEl.parentElement class 'bump' re-trigger.

Sound:
```js
let actx=null;
function ensureAudio(){ if(!actx){ try{actx=new (window.AudioContext||window.webkitAudioContext)()}catch(e){} } if(actx&&actx.state==='suspended') actx.resume(); }
call ensureAudio() on first user gesture (startPlay).
function tone(freq, dur, type='sine', vol=0.15, when=0){...}
playDing(): tone(660,.09); tone(880,.12, delay .07)
playCrash(): tone sawtooth 160→ sliding down: use frequency ramp.
```
Keep simple: oscillator with exponential ramp.

Attract mode shouldn't ding every pickup (audio not started anyway pre-gesture — AudioContext creation before gesture is allowed but suspended; tone() would schedule silently. Guard: only play when state==='playing'... after game over return to attract? I don't return to attract after over. But attractWait→attract after AI death never happens post-play. Simplest: play sounds only if actx exists & state!=='attract'... dings during attract after user has played? Not possible since attract only pre-first-gesture... wait, click to start → never attract again. OK guard anyway: if(!actx||state==='attract') skip.

Hmm, one more consideration: "Games must start in a self-playing demo mode (a simple AI plays) behind a 'Click or press a key to start' message" ✓.

Frame loop:
```js
let lastFrame=0;
function frame(now){
  requestAnimationFrame(frame);
  const dt = Math.min(0.05,(now-lastFrame)/1000); lastFrame=now;
  if((state==='playing'||state==='attract') && now-lastStep>=interval){ lastStep=now; if(state==='attract') aiSteer(); step(); }
  updateSmoke(dt); updateParticles(dt);
  draw(now, dt);
}
```
Note if step interval small and frame long, could do multiple steps — ignore, fine (lastStep=now avoids spiral).

AI:
```js
function aiSteer(){
  const d = bfsDir();
  if(d) dirQueue=[d];
}
function bfsDir(){
  const head=snake[0], target=food;
  const blocked=new Uint8Array(COLS*ROWS);
  for(let i=0;i<snake.length-1;i++) blocked[snake[i].y*COLS+snake[i].x]=1; // exclude tail (moves)
  // hmm exclude tail cell from blocked: indices 0..len-2 (skip last). ✓
  const prev=new Int32Array(COLS*ROWS).fill(-1);
  const q=[head.y*COLS+head.x]; blocked[q[0]]=1;
  const ti=target.y*COLS+target.x;
  let found=q[0]===ti? ... head can't equal food.
  for(let h=0; h<q.length; h++){
    const c=q[h]; if(c===ti){ found=true; break; }
    const cx=c%COLS, cy=(c/COLS)|0;
    for(const [dx,dy] of [[1,0],[-1,0],[0,1],[0,-1]]){
      const nx=cx+dx, ny=cy+dy;
      if(nx<0||ny<0||nx>=COLS||ny>=ROWS) continue;
      const n=ny*COLS+nx;
      if(blocked[n]) continue;
      blocked[n]=1; prev[n]=c; q.push(n);
    }
  }
```
BFS with early exit when dequeued target. Then reconstruct first step: walk back from ti to head, first move direction = from head cell to next cell in path.
```js
  if(found){
    let cur=ti;
    while(prev[cur]!==q[0] && cur!==q[0]) cur=prev[cur];
```
careful: reconstruct: let cur=ti; while(prev[cur]!==start) cur=prev[cur]; then step = cur (neighbor of start). But if prev[ti]===start, loop exits immediately with cur=ti ✓. Guard: prev[start] = -1; if cur becomes start without matching... while(prev[cur]!==start){ cur=prev[cur]; if(cur===-1||cur===start) break; } then if cur!==start use cur.
    return {x:cur%COLS - head.x, y:((cur/COLS)|0)-head.y};
  }
  // fallback: any safe move (prefer not reverse)
  const cands=[[1,0],[-1,0],[0,1],[0,-1]].map... filter in-bounds & not blocked(all body except tail? body full including tail? tail moves, exclude) & not reverse of dir
  if none: return dir (will die, attract resets)
  Prefer one with most free space: flood fill count — small grid, do simple flood fill for each candidate (cheap enough at ~10Hz). Implement floodCount(cell, blockedFull).
```
Also avoid the reverse: candidates exclude -dir.

blocked for fallback should include all body cells except tail. I blocked body except tail already (array reused). But BFS blocked array got extra marks (visited cells). Rebuild separate for fallback: compute fresh blockedFull = all snake except tail; candidates safe = not in snake body except tail; then flood fill to count reachable; pick max.

Edge: also the BFS path might immediately be a reverse — impossible since reverse cell is the neck (blocked as body). ✓

Note about tail exclusion: if eating food this step tail doesn't move — but food cell is the target; tail adjacency edge case rare; acceptable for demo.

Draw function full:

```js
function draw(now, dt){
  ctx.clearRect? just fill ground.
  // ground
  ctx.fillStyle='#A6BF8B'; fillRect(0,0,W,H);
  // checker
  ...
  // decorations
  // platform+passenger
  // track (only segments; also draw for attractWait/over states still)
  // rail preview ahead
  // train
  // smoke, particles, floats
}
```
Order note: draw passenger before track? If train passes... passenger cell never under train (it's removed when head arrives). Draw passenger after track so it stands on rails? Passenger stands on platform which is beside; just draw platform after ground, before track. The passenger stands at cell center where track will be when train arrives... The platform is a tile in the cell; the track passes over the platform cell only at the pickup moment. Fine.

Interpolated positions:
```js
const t = (state==='playing'||state==='attract') ? Math.min(1,(now-lastStep)/interval) : 1;
```
On 'paused', freeze: keep t at pausedT: store when pausing: pausedT = Math.min(1,(now-lastStep)/interval), and use it while paused. I'll store pausedT on pause; on resume, adjust lastStep = now - pausedT*interval. Nice, resumes mid-motion.

renderAngles smoothing: ra[i] += angDiff(ra[i], angles[i]) * min(1, dt*10).

Derailed offsets applied when state over/attractWait: px += derail[i].dx etc, rotation += rot. Also for over state maybe slight settle... static fine.

Draw track:
```js
function drawTrack(){
  ctx.lineCap='butt';
  for(let i=snake.length-1;i>0;i--){
    const a=center(snake[i]), b=center(snake[i-1]);
    // ballast
    ctx.strokeStyle='#E7D7AE'; ctx.lineWidth=CELL*0.78; segment(a,b);
    // sleepers
    ctx.save(); translate/rotate along; draw ties; restore
    // rails
    ctx.strokeStyle='#6E5A42'; lineWidth=3; offset ±5 lines;
  }
}
```
Wait rails color: dark brown-gray. Two rails at ±5 perpendicular. For axis-aligned segs perpendicular is (−dy,dx).

Hmm, ballast width 0.78*36≈28. Rails inset ±5. Sleeper length 20, at spacing 9: positions along segment at fractions: for k in [4.5, 13.5, 22.5, 31.5]: draw rect centered at point along dir, dims 4×20 rotated to be perpendicular (i.e., aligned with normal). Sleeper color #B09068? On ballast #E7D7AE, sleepers darker #A98C5F. Rails on top: #5E4E3C? Make rails darker for contrast: #574A3A. Hmm rails should be strongest dark: rails #4E4234, sleepers #A98C5F, ballast #E7D7AE, grass #A6BF8B. Good contrast pyramid.

Since segments share cell centers, consecutive segment draws: ballast butt caps meet at center — same color, seamless. Rails: two parallel lines per segment meeting at center — at corners, gap/notch of ~5px on outer. Accept (Brio style).

Additionally, to make rails look continuous on straights — same line coordinates, perfect.

Preview ahead: from head center, in dir angle, draw two rails from +18 to +34 with alpha .35 and a couple sleepers faint. Subtle. Compute head interpolated pos & renderAngle[0]. Only when playing/attract.

Let me now also double check speed of drawing text "+1": use Fredoka via canvas font '700 16px Fredoka' — canvas can use webfont after loaded; may fallback initially, fine.

Floats drawn: fillText with stroke cream.

updateHUD: score, len, best text.

Score display: number of passengers. len: snake.length (cars incl loco). 

Also stat "Speed"? skip, three stats enough.

CSS details:

```css
:root{
  --ink:#3D3126; --paper:#F3ECDE; --card:#FBF6EA; --red:#C7483A; --wood:#6B4F35;
}
*{box-sizing:border-box; margin:0; padding:0}
body{ background:var(--paper); color:var(--ink); font-family:'Fredoka',sans-serif; min-height:100vh; display:flex; align-items:center; justify-content:center; padding:18px; }
.page{ width:min(920px, 100%); }
.hud{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; padding:0 6px 12px; flex-wrap:wrap; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand h1{ font-size:26px; font-weight:600; letter-spacing:.5px; line-height:1 }
.brand h1 em{ color:var(--red); font-style:normal }
.tag{ font-size:13px; opacity:.65; margin-top:2px }
.stats{ display:flex; gap:0 }
.stat{ padding:0 18px; border-left:1px solid rgba(61,49,38,.18); text-align:right; min-width:86px }
.stat:first-child{ border-left:none }? Actually keep border-left for all but first; first has padding-left 0.
.stat .label{ display:block; font-size:11px; text-transform:uppercase; letter-spacing:.12em; opacity:.55; margin-bottom:2px }
.stat .value{ font-size:24px; font-weight:600; font-variant-numeric:tabular-nums; }
.stat#scoreWrap .value{ color:var(--red) }
.stat.bump .value{ animation:bump .35s }
@keyframes bump{ 40%{ transform:scale(1.25) } }
.value display inline-block for transform.
.board-wrap{ position:relative; border:10px solid var(--wood); border-radius:20px; box-shadow: 0 4px 0 rgba(61,49,38,.25), inset 0 0 0 2px rgba(0,0,0,.15); background:#A6BF8B; }
canvas{ display:block; width:100%; height:auto; border-radius:10px; }
.overlay{ position:absolute; inset:10px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:rgba(45,36,24,0); pointer-events:none; transition:background .3s; }
.overlay.dim{ background:rgba(45,36,24,.38) }
.card{ background:var(--card); border-radius:16px; padding:26px 34px 24px; max-width:430px; margin:0 16px; text-align:center; box-shadow:0 10px 30px rgba(40,30,15,.35), 0 0 0 3px rgba(61,49,38,.12); pointer-events:auto; cursor:pointer; animation:pop .45s cubic-bezier(.2,1.4,.4,1); }
```
Wait overlay pointer-events none but card auto so clicks pass through to boardWrap? boardWrap click listener: clicking canvas area outside card triggers start. Card click also triggers. Put click handler on boardWrap (parent) — covers both. pointer-events auto on card not needed then; but cursor pointer set on overlay entirely? overlay pointer-events:none means no cursor change... set overlay pointer-events:none, card pointer-events:auto for cursor. Or simply set cursor:pointer on .board-wrap. Do that. Keep card pointer-events:none too then (so clicks land on wrap). Actually clicks on child with pointer-events none pass to parent — fine, one handler on boardWrap.

card content styles: h2 28px 600; p 14px line-height 1.5 opacity .85 margin 10px 0; .pulse font-weight 600 color red margin-top:14px animation pulse; .mini 12px opacity .5.

@keyframes pulse{50%{opacity:.35}}
@keyframes pop{from{transform:scale(.85);opacity:0}}
@keyframes shake{...} canvas.shake or .board-wrap.shake translate. Use transform on boardWrap: 0%,100% 0; 20% translate(-5px,2px) rotate(-.4deg)... apply class, remove after 450ms.

.hints{ display:flex; justify-content:center; gap:26px; flex-wrap:wrap; padding:14px 0 0; font-size:13px; opacity:.75 }
kbd{ font-family:inherit; font-size:11px; background:#fff; border:1px solid rgba(61,49,38,.3); border-bottom-width:2px; border-radius:5px; padding:1px 6px; margin:0 1px; }

Media query small: .stat{padding 0 10px; min-width auto}; .brand h1 22px; hud padding.

Also overlay hidden: .overlay.hidden{display:none}.

Title tag copy: "a tiny railway, growing car by car" hmm: tag under h1: "Pick up passengers, grow your train." 

SVG loco icon (side view), 40×28:
```svg
<svg viewBox="0 0 48 32" width="42" height="28" aria-hidden="true">
  <!-- cab -->
  <rect x="2" y="6" width="12" height="16" rx="2" fill="#C7483A"/>
  <rect x="4" y="8" width="8" height="6" rx="1" fill="#FFE9C9"/>
  <!-- boiler -->
  <rect x="14" y="11" width="22" height="11" rx="4" fill="#3B3A42"/>
  <!-- chimney -->
  <rect x="30" y="4" width="5" height="8" rx="1.5" fill="#3B3A42"/>
  <!-- dome -->
  <circle cx="22" cy="10" r="3" fill="#E0A83C"/>
  <!-- cowcatcher -->
  <path d="M36 12 L43 22 L36 22 Z" fill="#3B3A42"/>  hmm triangle at front: M36,11 L44,22 H36 Z
  <!-- wheels -->
  <circle cx="9" cy="24" r="4" fill="#232227"/><circle cx="19" cy="24" r="4"/><circle cx="29" cy="24" r="4"/>? wheels fill #232227 with hub #E0A83C small
  <!-- base rail line -->
</svg>
```
I'll fine-tune inline. Good enough, hand-drawn feel.

Overlay card icon: reuse same SVG scaled bigger (60 wide).

Let me also make sure no horizontal scrollbar at 375: page padding 14px, canvas 100% width, height auto ~ 375-28-20border ≈ 327 wide → 204 tall. HUD wraps. OK.

Fonts CDN:
```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap" rel="stylesheet">
```

Now, the draw of the train: draw wagons tail-first so head overlaps. Iterate i from snake.length-1 down to 0.

For each car i:
```js
const p = snake[i], pp = snakePrev[i];
const fx = pp.x + (p.x-pp.x)*t, fy = ...;
let px = fx*CELL+CELL/2, py=...
if(derail && state in over/attractWait): px+=derail[i].dx...
ctx.save(); translate(px,py); rotate(ra[i] + (derail? derail[i].rot:0));
if(i===0) drawLoco(); else drawWagon(wagonColors[i]);
ctx.restore();
```
Wait — direction: angle from atan2(b-a) means facing +x when moving right. drawLoco faces +x. ✓

wagonColors[0] unused.

Smoke chimney pos: from head car: local (8,0) rotated by ra[0], plus interpolation pos. Emit timer: smokeAcc += dt; while >0.09 emit.

Also when paused/over: no smoke emit (state check).

One more flourish — the passenger "waves" when the train gets within 3 cells? Compute dist head→food; if <=3 cells, raise arm: draw one arm circle higher + slight lean. Cute, cheap. I'll add: near = manhattan distance <=4 → arm raised (circle at (7,-6) instead of (8,0)) and maybe exclamation? no. Just raised arm + faster bob. 

Also add tiny "!"-style eagerness? skip.

Passenger also should be drawn with slight sway; add scale bounce? bob enough.

Let me write passenger params on spawn:
```js
food = { x,y, color, skin, hat: Math.random()<0.5, hairC, suit: Math.random()<0.45, phase: Math.random()*6.28 }
```

HUD update calls.

Now sizes: header brand h1 "Snake <em>Express</em>".

Let me now also handle the "attractWait" freeze and draw with t=1 and derail offsets — need derail array; generate in die().

Also on die: floats/particles crash burst: spawn 26 smoke puffs + a few dark debris? smoke enough + ring.

Also crash: canvas shake class.

gameover overlay after short delay (500ms) so player sees the crash? show immediately but with deadAt cooldown for restart 700ms. Fine: show immediately.

Let me write playCrash with WebAudio noise-ish: oscillator type 'sawtooth', freq 120 → exp ramp to 40 over 0.4s, gain 0.2→0.0001. Plus a thud square 80Hz.

Now, code volume is getting large but manageable. Let me carefully write everything.

Also ensure zero console errors: guard AudioContext, roundRect helper (ctx.roundRect exists in modern Chrome — I'll implement my own `rr()` to be safe and consistent).

Text: "Passengers" label, value score; "Cars" length; "Best" best.

Also handle window blur → auto pause if playing: nice touch: window.addEventListener('blur', ()=> if playing pause()). 

visibilitychange not needed.

Now potential subtle bug: in attract mode before any user gesture, we call step() which calls playDing() — guarded by actx null → skip. ✓

Frame start: lastStep init 0; first frame now ~ some ms → immediately step? now-lastStep >= interval true (now maybe 300ms+) → immediate step at load. Fine. Actually set lastStep = performance.now() at start via reset? Set lastStep=performance.now() when starting frame loop.

Init: reset(); state='attract'; showAttract(); updateHUD(); requestAnimationFrame(frame).

Also spawnFood must avoid snake cells and not immediately in front? just avoid snake and avoid the head-adjacent cell? Allow anywhere not on snake; also keep ≥2 cells from head to be fair: try 50 attempts picking manhattan dist >= 4, else any free.

Write spawnFood:
```js
function spawnFood(){
  let tries=0, c;
  while(true){
    c = {x: (Math.random()*COLS)|0, y:(Math.random()*ROWS)|0};
    const onSnake = snake.some(p=>p.x===c.x&&p.y===c.y);
    const near = Math.abs(c.x-snake[0].x)+Math.abs(c.y-snake[0].y) < 4;
    if(!onSnake && (!near || tries>60)) break;
    tries++;
  }
  food = {...c, color: PALETTE[(Math.random()*PALETTE.length)|0], ...};
}
```
Careful infinite loop when board full — snake length 360 max, whatever, add tries>200 fallback to any free scan; if none, player won — show over with "perfect". Rare; just guard with scan and if no free cell → die() (win). I'll add simple guard.

Let me also think about first paint visual: attract mode running with card "All aboard!" — trains moving, smoke, passenger bobbing. Good.

Colors of checker: rgba(0,0,0,0.035) alt cells.

Edge frame inner shadow: draw inner vignette on canvas? skip.

Let me write final HTML now, carefully.

Extra check — the overlay for 'over' should include dim. Class toggling: overlay.className management: 'overlay' + ' hidden'/' dim'.

showAttract(): overlay visible, no dim; card content attract.
pause(): state='paused'; pausedT=...; overlay dim; card "Paused".
resume(): state='playing'; lastStep = performance.now() - pausedT*interval; overlay hidden.
startPlay(): ensureAudio(); reset(); state='playing'; overlay hidden; updateHUD.
showOver(): overlay dim; card over.

Also blur-pause only when playing.

Keyboard: also prevent space scrolling always when target body.

One thing: keydown 'any key' to start — ignore modifier-only keys (Shift etc.)? e.key like 'Shift' — starting on shift is harmless. But avoid starting on F12? devtools... whatever, ignore keys starting with 'F' and length>1 like 'F5': if(k.length>1 && !k.startsWith('Arrow')) maybe ignore for start. I'll require k.length===1 || Arrow keys to start.

dirQueue processing in step: implemented as described.

For player turning responsiveness: process queue at step time; but also allow immediate: standard is at step. Fine at 160ms.

Also prevent 180 via queue double-press quickly: e.g., moving right, press up then left quickly: queue [up,left]; step: apply up (valid), break — left stays for next step, next step from up, left valid. Good.

Now write drawWagon wheels: small rounded rects at sides: positions x=-7 and 7, y=±10 (outside body half-width 10 → wheels at y=±10.5, size 3.5 tall). Visible as dark stubs. With rr helper.

Shadow: before body: ctx.fillStyle='rgba(45,55,30,.25)'? On grass, shadow green-dark. Draw ellipse: use ctx.ellipse translated slightly (+2,+3) rotated same frame. rr with offset works: rr(-L/2+2, -W/2+3.5, ...) but shadow should be behind (offset in world down-right regardless of rotation — offsetting in local space rotates it; acceptable).

Let me write the code now in full. I'll aim for clean organized JS with sections.

Also floats: "+1" — maybe show "All aboard!" occasionally? Every 5th passenger show "+5 record"? keep +1.

Also HUD speed indicator? skip.

Passenger colors also used for the wagon that gets added — so wagon colors come from PALETTE too. Initial wagons: two random palette colors.

drawPassenger near-arm: compute near = (state playing/attract) && manhattan(head, food)<=4.

Also draw a subtle pulsing target ring under platform when train near? skip.

Write CSS shake:
```css
@keyframes shake{
 10%{transform:translate(-6px,3px) rotate(-.5deg)}
 30%{transform:translate(5px,-3px) rotate(.4deg)}
 50%{transform:translate(-4px,2px)}
 70%{transform:translate(3px,-2px)}
 90%{transform:translate(-2px,1px)}
}
.board-wrap.shake{animation:shake .5s}
```
Remove class on animationend or timeout.

Now sizes for responsive header at 375: brand h1 22px, stats values 20px, .stat padding smaller.

Let me also double check the rails preview: draw after track, before train: 
```js
if(state==='playing'||state==='attract'){
  const hp = interpolated head pos; const a = ra[0];
  const dx=Math.cos(a), dy=Math.sin(a);
  const nx=-dy, ny=dx;
  ctx.globalAlpha=.4; ballast short? just rails:
  line from hp + dir*18 ± normal*5, to hp + dir*34 ± normal*5, color rails;
  plus 3 sleepers faint.
  ctx.globalAlpha=1;
}
```
Hmm but at corners, ra smoothed... acceptable.

Actually simpler: preview direction uses logical dir rather than renderAngle (dir is exact next movement). Use dir. Position from interpolated head pos. Good.

Let me write everything now. Also remember: explanation after code block? The instructions say reply with exactly ONE fenced code block, no text before/after. So no explanation. The outer system says include brief explanation after code, but the task output rules override: "Reply with exactly ONE fenced code block... No text before or after the code block." Follow the task.

Code:

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Snake Express</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap" rel="stylesheet">
<style> ... </style>
</head>
<body>
<div class="page">
  <header class="hud">
    <div class="brand">
      <svg ...loco icon...></svg>
      <div>
        <h1>Snake <em>Express</em></h1>
        <p class="tag">Pick up waiting passengers — your train grows car by car.</p>
      </div>
    </div>
    <div class="stats">
      <div class="stat" id="scoreWrap"><span class="label">Passengers</span><span class="value" id="scoreEl">0</span></div>
      <div class="stat"><span class="label">Cars</span><span class="value" id="lenEl">3</span></div>
      <div class="stat"><span class="label">Best trip</span><span class="value" id="bestEl">0</span></div>
    </div>
  </header>
  <div class="board-wrap" id="boardWrap">
    <canvas id="game"></canvas>
    <div class="overlay" id="overlay"><div class="card" id="card"></div></div>
  </div>
  <footer class="hints">
    <span><kbd>←</kbd><kbd>↑</kbd><kbd>↓</kbd><kbd>→</kbd> / <kbd>W</kbd><kbd>A</kbd><kbd>S</kbd><kbd>D</kbd> steer</span>
    <span><kbd>Space</kbd> pause</span>
    <span><kbd>R</kbd> restart</span>
  </footer>
</div>
<script>
"use strict";
/* ---------- setup ---------- */
const COLS=24, ROWS=15, CELL=36, W=COLS*CELL, H=ROWS*CELL;
const canvas=document.getElementById('game'), ctx=canvas.getContext('2d');
function fit(){
  const dpr=Math.min(window.devicePixelRatio||1,2);
  canvas.width=W*dpr; canvas.height=H*dpr;
  ctx.setTransform(dpr,0,0,dpr,0,0);
}
fit(); // no resize handling needed (CSS scales)
```
Wait: CSS width:100% scales the canvas bitmap — fine since bitmap fixed at W*dpr. On small screens the 864 logical px shrink — fine, crisp enough. On window resize nothing to redo. ✓ (dpr fixed at load.)

Continue:

```js
const PALETTE=['#E0533F','#EFAF3C','#3E9C8C','#4E7FB8','#9A6BB0','#7FA653'];
const SKINS=['#F4CBA4','#E8BC92','#C68E63','#9C6B45'];
const HAIRS=['#3A2C22','#5A4232','#1E1B18','#8C5A2E','#B8B8B8'];

function rr(x,y,w,h,r){ ctx.beginPath(); ctx.moveTo(x+r,y); ctx.arcTo(x+w,y,x+w,y+h,r); ctx.arcTo(x+w,y+h,x,y+h,r); ctx.arcTo(x,y+h,x,y,r); ctx.arcTo(x,y,x+w,y,r); ctx.closePath(); }
function shade(hex, amt){
  const n=parseInt(hex.slice(1),16);
  const f=c=>Math.max(0,Math.min(255,c+amt));
  return `rgb(${f(n>>16)},${f((n>>8)&255)},${f(n&255)})`;
}
```

Decor:
```js
const deco=[];
(function(){
  for(let i=0;i<130;i++){
    deco.push({x:Math.random()*W, y:Math.random()*H, t:(Math.random()*10)|0, s:.7+Math.random()*.7});
  }
})();
function drawDecor(){
  for(const d of deco){
    if(d.t<5){ // tuft
      ctx.strokeStyle='rgba(90,110,70,.5)'; ctx.lineWidth=1.5*d.s;
      ctx.beginPath();
      ctx.moveTo(d.x-3*d.s, d.y); ctx.lineTo(d.x-4*d.s, d.y-4*d.s);
      ctx.moveTo(d.x, d.y); ctx.lineTo(d.x, d.y-5.5*d.s);
      ctx.moveTo(d.x+3*d.s, d.y); ctx.lineTo(d.x+4*d.s, d.y-4*d.s);
      ctx.stroke();
    } else if(d.t<8){ // flower
      ctx.fillStyle = d.s>1.1? '#F6F1E4':'#F0C8C2';
      for(let k=0;k<4;k++){ const a=k*Math.PI/2 + d.x; ctx.beginPath(); ctx.arc(d.x+Math.cos(a)*2.2*d.s, d.y+Math.sin(a)*2.2*d.s, 1.6*d.s, 0, 7); ctx.fill(); }
      ctx.fillStyle='#E8B23C'; ctx.beginPath(); ctx.arc(d.x,d.y,1.4*d.s,0,7); ctx.fill();
    } else { // pebble
      ctx.fillStyle='rgba(120,115,95,.35)';
      ctx.beginPath(); ctx.ellipse(d.x,d.y,3.2*d.s,2.2*d.s,0,0,7); ctx.fill();
    }
  }
}
```

State + game logic per plan. Let me write drawTrack seg:

```js
function drawTrackSeg(ax,ay,bx,by){
  const dx=bx-ax, dy=by-ay, len=Math.hypot(dx,dy), ux=dx/len, uy=dy/len, nx=-uy, ny=ux;
  // ballast
  ctx.strokeStyle='#E7D7AE'; ctx.lineWidth=27; ctx.lineCap='butt';
  ctx.beginPath(); ctx.moveTo(ax,ay); ctx.lineTo(bx,by); ctx.stroke();
  // sleepers
  ctx.fillStyle='#B39468';
  for(let s=5; s<=len-4; s+=8.5){
    const px=ax+ux*s, py=ay+uy*s;
    ctx.save(); ctx.translate(px,py); ctx.rotate(Math.atan2(ny,nx));
    rr(-1.8,-9.5,3.6,19,1.8); ctx.fill(); ctx.restore();
  }
  // rails
  ctx.strokeStyle='#57493A'; ctx.lineWidth=3;
  for(const side of [-5,5]){
    ctx.beginPath();
    ctx.moveTo(ax+nx*side, ay+ny*side);
    ctx.lineTo(bx+nx*side, by+ny*side);
    ctx.stroke();
  }
}
```
Sleeper rotated along normal: rotate(atan2(ny,nx)) then rect along local x of length 19 → wait I wrote rr(-1.8,-9.5,3.6,19) — that's w=3.6 (along local x) h=19 (local y). If rotated so local x = normal direction... I want sleeper long axis perpendicular to track = along normal. So long axis along normal. If rotate(atan2(ny,nx)) local +x points along normal → rect should be long in x: rr(-9.5,-1.8,19,3.6). Fix that.

Ballast width 27, sleeper length 19 fits inside. Rails at ±5. Good.

drawTrain per plan.

Smoke:
```js
let smokes=[], smokeAcc=0;
function emitSmoke(x,y,ang,burst){
  smokes.push({x,y, vx:-Math.cos(ang)*14+(Math.random()-.5)*12, vy:-Math.sin(ang)*14+(Math.random()-.5)*12, r:2+Math.random()*2, life:1, decay: burst? 1.6: .55+Math.random()*.25});
}
function updateSmoke(dt){
  for(const s of smokes){ s.x+=s.vx*dt; s.y+=s.vy*dt; s.vx*=.98; s.vy*=.98; s.r+=9*dt; s.life-=s.decay*dt; }
  smokes=smokes.filter(s=>s.life>0);
  if(smokes.length>90) smokes.splice(0, smokes.length-90);
}
function drawSmoke(){
  for(const s of smokes){
    ctx.fillStyle=`rgba(250,248,242,${(.5*s.life).toFixed(3)})`;
    ctx.beginPath(); ctx.arc(s.x,s.y,s.r,0,7); ctx.fill();
  }
}
```
decay: normal puff lives ~1/0.55≈1.8s hmm that's long; life 1, decay .55 → 1.8s lifespan, drifting ~14px/s * 1.8 ≈ 25px + growth to r≈2+16=18. Looks like a trail. Maybe decay .7. Fine.

Particles (confetti) & ring & floats:
```js
let parts=[], floats=[], rings=[];
function burst(px,py,color){
  rings.push({x:px,y:py,r:6,life:1});
  for(let i=0;i<12;i++){
    const a=Math.random()*Math.PI*2, sp=40+Math.random()*70;
    parts.push({x:px,y:py,vx:Math.cos(a)*sp,vy:Math.sin(a)*sp,rot:Math.random()*6,vr:(Math.random()-.5)*10,life:1,color});
  }
}
update: pos += v*dt; v*=.9 (per frame at 60fps: multiply by Math.pow(.02,dt)? use v *= Math.exp(-4*dt)); life -= 2*dt... life 0.5s: decay 2.
draw: save translate rotate fillRect(-2.5,-1.5,5,3) alpha life.
rings: r += 90*dt; life -= 2.4*dt; stroke circle color? store color.
floats: {x,y,text,life:1}; y -= 30*dt; life -= 1.1*dt; draw text font 700 15px Fredoka; stroke '#F7F0DE' lw 4 strokeText then fillText '#3D3126'.
```

Audio:
```js
let actx=null;
function ensureAudio(){ try{ if(!actx) actx=new (window.AudioContext||window.webkitAudioContext)(); if(actx&&actx.state==='suspended') actx.resume(); }catch(e){} }
function tone(freq,dur,type,vol,delay,slideTo){
  if(!actx||actx.state!=='running') return;
  const t0=actx.currentTime+(delay||0);
  const o=actx.createOscillator(), g=actx.createGain();
  o.type=type||'sine'; o.frequency.setValueAtTime(freq,t0);
  if(slideTo) o.frequency.exponentialRampToValueAtTime(slideTo,t0+dur);
  g.gain.setValueAtTime(vol||.12,t0);
  g.gain.exponentialRampToValueAtTime(.0001,t0+dur);
  o.connect(g); g.connect(actx.destination);
  o.start(t0); o.stop(t0+dur+.02);
}
const sndPickup=()=>{ tone(660,.1,'triangle',.14); tone(990,.14,'triangle',.12,.08); };
const sndCrash=()=>{ tone(150,.5,'sawtooth',.18,0,45); tone(70,.4,'square',.12,.02,40); };
```

Main loop and logic. Also updateHUD with bump.

AI: implement bfs + fallback.

Also for attract I want AI not to be too jittery-perfect — it's fine.

Rail preview: subtle.

Passenger draw: implement carefully.

```js
function drawPassenger(now){
  const cx=food.x*CELL+CELL/2, cy=food.y*CELL+CELL/2;
  // platform
  ctx.fillStyle='#DFD9CB'; rr(cx-16,cy-14,32,29,6); ctx.fill();
  ctx.strokeStyle='#BFB6A2'; ctx.lineWidth=1.5; ctx.stroke();  hmm stroke path after rr works (path still open). yes.
  // safety line
  ctx.fillStyle='#E3B23C'; rr(cx-13, cy+8, 26, 3.5, 1.75); ctx.fill();
  // sign pole at right edge of platform
  ctx.strokeStyle='#7A6A55'; ctx.lineWidth=2;
  ctx.beginPath(); ctx.moveTo(cx+11, cy-2); ctx.lineTo(cx+11, cy-13); ctx.stroke();
  ctx.fillStyle='#C7483A'; ctx.beginPath(); ctx.arc(cx+11, cy-14, 3.4, 0, 7); ctx.fill();
  ...
```
Hmm sign overlaps person maybe; person centered at (cx, cy-2)? Let me place person center-ish (cx-2, cy), sign at (cx+11). Person height ~24 exceeds platform 29 tall barely fits. OK.

Person:
```js
  const near = (state==='playing'||state==='attract') && (Math.abs(snake[0].x-food.x)+Math.abs(snake[0].y-food.y)<=4);
  const bob = Math.sin(now/(near?150:300)+food.phase)*1.7;
  const ox=cx-2, oy=cy-3+bob;
  // shadow
  ctx.fillStyle='rgba(60,55,40,.18)';
  ctx.beginPath(); ctx.ellipse(ox, cy+9, 8.5, 3, 0, 0, 7); ctx.fill();
  // legs
  ctx.fillStyle='#4A4440';
  rr(ox-5, oy+3, 4, 7, 1.5); ctx.fill();
  rr(ox+1, oy+3, 4, 7, 1.5); ctx.fill();
  // body
  ctx.fillStyle=food.color; rr(ox-7, oy-7, 14, 12, 4); ctx.fill();
  // arms
  ctx.fillStyle=food.skin;
  ctx.beginPath(); ctx.arc(ox-8, oy-1, 2.4, 0, 7); ctx.fill();
  ctx.beginPath(); ctx.arc(ox+8, oy-1, 2.4, 0, 7); ctx.fill();
  if(near){ ctx.beginPath(); ctx.arc(ox+8, oy-7, 2.4, 0, 7); ctx.fill(); } // raised arm waving
  // head
  ctx.beginPath(); ctx.arc(ox, oy-12, 5, 0, 7); ctx.fill();
  // hair or hat
  if(food.hat){
    ctx.fillStyle=shade(food.color,-25);
    ctx.beginPath(); ctx.arc(ox, oy-13, 5.4, Math.PI, 0); ctx.fill();
    rr(ox-6.5, oy-14.2, 13, 2.2, 1.1); ctx.fill();
  } else {
    ctx.fillStyle=food.hair;
    ctx.beginPath(); ctx.arc(ox, oy-13, 5, Math.PI*0.95, Math.PI*0.05); ctx.fill();
```
Hmm hair arc: draw top half circle slightly bigger: arc(ox, oy-12.5, 5.2, Math.PI, 0) fill → half disc covering top of head. Do that.
```js
  }
  // suitcase
  if(food.suit){
    ctx.fillStyle='#8A5A33'; rr(ox+9, oy+2, 9, 7, 2); ctx.fill();
    ctx.strokeStyle='#5E3C21'; ctx.lineWidth=1.5;
    ctx.beginPath(); ctx.arc(ox+13.5, oy+2, 2, Math.PI, 0); ctx.stroke();
  }
}
```
Hat arc: center (ox, oy-13) radius 5.4 from PI to 0 (top half) — arc(…, Math.PI, 0) draws counterclockwise? default anticlockwise=false draws from PI to 0 going clockwise through bottom (in canvas, angles increase clockwise since y-down). arc(x,y,r,PI,0,false): going from angle PI (left) increasing... from PI to 0 with anticlockwise=false means it goes PI→2PI? Canvas: arc goes from startAngle to endAngle in clockwise direction when anticlockwise=false. Angles: PI (left), 3PI/2 (top? no—y-down: 3PI/2 is up)... In canvas, angle 0 = +x, PI/2 = +y (down). Clockwise from PI: PI → PI/2? No: increasing angle = clockwise visually. arc(start=PI, end=0, ccw=false) goes PI → 3PI/2 (top) → 2PI=0. Wait increasing from PI: PI/2? Let's just think: arc from PI to 2PI passes through 3PI/2 which is up. End angle 0 = 2PI effectively. So arc(x,y,r,Math.PI, Math.PI*2) = top half. Using end 0 with ccw=false: the implementation goes from PI increasing to... endAngle 0 < startAngle PI, so it adds 2PI: PI → 2PI. Top half ✓. So arc(ox,oy-13,5.4,Math.PI,Math.PI*2) then closePath fills top semicircle. ✓ For hair same.

Wave arm: when near, replace right arm: draw circle at (ox+9, oy-8). Also skip normal right arm then? Both drawn would show two right arms; draw right arm conditionally.

drawLoco & drawWagon final:

```js
function drawLoco(){
  // coupler
  ctx.fillStyle='#2A2622'; rr(-19,-1.8,6,3.6,1.5); ctx.fill();
  // wheels
  ctx.fillStyle='#1F1E22';
  for(const wx of [-9,-1,7]) { rr(wx-2.8,-12.8,5.6,3.2,1.5); ctx.fill(); rr(wx-2.8,9.6,5.6,3.2,1.5); ctx.fill(); }
  // cab
  ctx.fillStyle='#B8433A'; rr(-15,-11,13,22,5); ctx.fill();
  ctx.fillStyle='#9A3630'; rr(-13,-9,9,18,4); ctx.fill();
  // boiler
  ctx.fillStyle='#3B3A42'; rr(-4,-10,18,20,5); ctx.fill();
  // bands
  ctx.strokeStyle='#2E2D33'; ctx.lineWidth=1.5;
  ctx.beginPath(); ctx.moveTo(2,-10); ctx.lineTo(2,10); ctx.stroke();
  // cowcatcher
  ctx.fillStyle='#232227';
  ctx.beginPath(); ctx.moveTo(14,-8); ctx.lineTo(19.5,0); ctx.lineTo(14,8); ctx.closePath(); ctx.fill();
  // chimney
  ctx.fillStyle='#232227'; ctx.beginPath(); ctx.arc(9,0,3.7,0,7); ctx.fill();
  ctx.fillStyle='#0F0E11'; ctx.beginPath(); ctx.arc(9,0,1.8,0,7); ctx.fill();
  // dome
  ctx.fillStyle='#E0A83C'; ctx.beginPath(); ctx.arc(1.5,0,2.6,0,7); ctx.fill();
  // headlight
  ctx.fillStyle='#FFE9A8'; ctx.beginPath(); ctx.arc(14.8,0,2,0,7); ctx.fill();
  // shadow strip? skip
}
```
Hmm cowcatcher triangle from x14 to 19.5 — boiler ends at 14. Good. Headlight at 14.8 on the cowcatcher — draws a yellow circle at nose; maybe better small circle at (13,0) on boiler front... boiler front is at x=14 rounded. Put headlight circle at (13.5, 0) r2 drawn before cowcatcher? It'd be hidden. I'll place headlight ON boiler front face: can't see front face top-down. A top-down headlight is a dot at the nose — draw at (15.5, 0) r 2 on top of cowcatcher tip? Looks like a lamp on the pilot. OK draw after cowcatcher at (15,0) r=2. Fine.

Wagon:
```js
function drawWagon(color){
  ctx.fillStyle='#2A2622';
  rr(14,-1.8,5,3.6,1.5); ctx.fill();
  rr(-19,-1.8,5,3.6,1.5); ctx.fill();
  ctx.fillStyle='#1F1E22';
  for(const wx of [-6,6]){ rr(wx-3,-12.6,6,3.2,1.5); ctx.fill(); rr(wx-3,9.4,6,3.2,1.5); ctx.fill(); }
  ctx.fillStyle=color; rr(-14,-10,28,20,5); ctx.fill();
  ctx.strokeStyle=shade(color,-45); ctx.lineWidth=2; rr(-14,-10,28,20,5); ctx.stroke();
  ctx.fillStyle=shade(color,-16); rr(-9.5,-6.5,19,13,4); ctx.fill();
  ctx.strokeStyle=shade(color,-38); ctx.lineWidth=1.5;
  ctx.beginPath(); ctx.moveTo(-3,-6.5); ctx.lineTo(-3,6.5); ctx.moveTo(3,-6.5); ctx.lineTo(3,6.5); ctx.stroke();
}
```
Hmm ribs vertical lines — with top-down, ribs across (perpendicular to travel) would be more realistic (planks across)? Either. Perpendicular ribs: horizontal lines at y=-2,2: moveTo(-9.5,-2)→(9.5,-2)... Let me do 2 horizontal ribs. Looks like planks. OK.

Shadow per car: before drawing: 
```js
ctx.fillStyle='rgba(40,50,30,.22)';
rr(-13, -8+4, 30, 20, 5)... 
```
Let me just do: rr(-14+2, -10+4, 28, 20, 5) fill dark translucent, drawn first in car space. For loco similar slightly bigger. Add param? I'll inline before each: generic:
```js
function carShadow(l,w){ ctx.fillStyle='rgba(35,45,25,.25)'; rr(-l/2+2.5,-w/2+4,l,w,5); ctx.fill(); }
```
call with (36,24) loco, (30,22) wagon.

Train draw loop:
```js
function drawTrain(now, t, dt){
  const derailed = (state==='over'||state==='attractWait');
  for(let i=snake.length-1;i>=0;i--){
    const cur=snake[i], prev=snakePrev[i]||cur;
    let fx=prev.x+(cur.x-prev.x)*t, fy=prev.y+(cur.y-prev.y)*t;
    let px=fx*CELL+CELL/2, py=fy*CELL+CELL/2, rot=ra[i];
    if(derailed && derail[i]){ px+=derail[i].dx; py+=derail[i].dy; rot+=derail[i].rot; }
    ctx.save(); ctx.translate(px,py); ctx.rotate(rot);
    if(i===0){ carShadow(38,24); drawLoco(); } else { carShadow(30,22); drawWagon(wagonColors[i]); }
    ctx.restore();
    // smoke emit for head
    if(i===0 && !derailed && (state==='playing'||state==='attract')){
      smokeAcc+=dt;
      while(smokeAcc>0.085){ smokeAcc-=0.085; emitSmoke(px+Math.cos(rot)*9, py+Math.sin(rot)*9, rot); }
    }
  }
}
```
Wait smokeAcc accumulation inside loop with i===0 — fine (runs once). But if paused, skip emission (state check ✓; paused state isn't playing). attractWait derailed skip ✓. over skip ✓.

Hmm smokeAcc while paused keeps... no, we skip emission entirely. ✓

ra smoothing:
```js
function angleLerp(a,b,k){ let d=(b-a+Math.PI*3)%(Math.PI*2)-Math.PI; return a+d*k; }
ra[i] = angleLerp(ra[i], angles[i], Math.min(1, dt*9));
```
Init ra = angles copy on reset.

Rail preview:
```js
function drawPreview(t){
  if(state!=='playing'&&state!=='attract') return;
  const prev=snakePrev[0], cur=snake[0];
  const fx=(prev.x+(cur.x-prev.x)*t)*CELL+CELL/2, fy=(prev.y+(cur.y-prev.y)*t)*CELL+CELL/2;
  const a=Math.atan2(dir.y,dir.x), ca=Math.cos(a), sa=Math.sin(a);
  const nx=-sa, ny=ca;
  ctx.globalAlpha=.45;
  ctx.strokeStyle='#57493A'; ctx.lineWidth=3;
  for(const s of [-5,5]){
    ctx.beginPath();
    ctx.moveTo(fx+ca*17+nx*s, fy+sa*17+ny*s);
    ctx.lineTo(fx+ca*33+nx*s, fy+sa*33+ny*s);
    ctx.stroke();
  }
  ctx.fillStyle='#B39468';
  for(const d of [20,28]){
    const mx=fx+ca*d, my=fy+sa*d;
    ctx.save(); ctx.translate(mx,my); ctx.rotate(Math.atan2(ny,nx)); rr(-9.5,-1.8,19,3.6,1.8); ctx.fill(); ctx.restore();
  }
  ctx.globalAlpha=1;
}
```

Full draw():
```js
function draw(now, dt){
  ctx.fillStyle='#A6BF8B'; ctx.fillRect(0,0,W,H);
  // checker
  ctx.fillStyle='rgba(30,45,20,.045)';
  for(let y=0;y<ROWS;y++)for(let x=0;x<COLS;x++) if((x+y)&1) ctx.fillRect(x*CELL,y*CELL,CELL,CELL);
  drawDecor();
  if(food) drawPassenger(now);
  // track
  for(let i=snake.length-1;i>0;i--) drawTrackSeg((snake[i].x+.5)*CELL,(snake[i].y+.5)*CELL,(snake[i-1].x+.5)*CELL,(snake[i-1].y+.5)*CELL);
  const t = ...;
  drawPreview(t);
  drawTrain(now,t,dt);
  drawSmoke();
  drawParts();
  drawFloats();
  drawRings();
}
```
t computed once: 
```js
let t=1;
if(state==='playing'||state==='attract') t=Math.min(1,(now-lastStep)/interval);
else if(state==='paused') t=pausedT;
```

HUD:
```js
function updateHUD(bumpScore){
  scoreEl.textContent=score;
  lenEl.textContent=snake.length;
  bestEl.textContent=best;
  if(bumpScore){ scoreWrap.classList.remove('bump'); void scoreWrap.offsetWidth; scoreWrap.classList.add('bump'); }
}
```
CSS .stat.bump .value animation.

Overlay builders:
```js
const overlay=document.getElementById('overlay'), card=document.getElementById('card');
const LOCO_SVG = `<svg viewBox="0 0 52 34" width="52" height="34" aria-hidden="true">...</svg>`;
function showOverlay(html, dim){ card.innerHTML=html; overlay.classList.remove('hidden'); overlay.classList.toggle('dim', !!dim); }
function hideOverlay(){ overlay.classList.add('hidden'); }
function showAttract(){
  showOverlay(`
    <div class="icon">${LOCO_SVG}</div>
    <h2>All aboard!</h2>
    <p>Steer the little locomotive to passengers waiting on platforms. Every pickup couples one more colorful wagon to your train.</p>
    <p class="keys"><kbd>←</kbd><kbd>↑</kbd><kbd>↓</kbd><kbd>→</kbd> or <kbd>W</kbd><kbd>A</kbd><kbd>S</kbd><kbd>D</kbd></p>
    <p class="pulse">Click or press any key to start</p>
    <p class="mini">Autopilot is driving this demo — running off the grass or into your own wagons derails the train.</p>
  `, false);
}
function showOver(newBest){
  showOverlay(`
    <h2 class="crash">Derailed!</h2>
    <p>This trip carried <b>${score}</b> passenger${score===1?'':'s'} on a <b>${snake.length}</b>-car train.</p>
    ${newBest && score>0 ? '<p class="record">New best trip!</p>' : ''}
    <p class="pulse">Click or press any key to try again</p>
  `, true);
}
function showPaused(){ showOverlay(`<h2>Paused</h2><p class="pulse">Press <kbd>Space</kbd> or click to resume</p>`, true); }
```

Restart cooldown: deadAt.

Events:
```js
function primaryAction(){
  if(state==='attract'){ startPlay(); return true; }
  if(state==='over'){ if(performance.now()-deadAt>700){ startPlay(); } return true; }
  if(state==='paused'){ resume(); return true; }
  return false;
}
boardWrap.addEventListener('click', ()=>{ ensureAudio(); primaryAction(); });
```
Hmm ensureAudio on click even during play (first gesture might be click during attract → handled). Audio only needed for play anyway.

Keyboard:
```js
window.addEventListener('keydown', e=>{
  const k=e.key;
  if(['ArrowUp','ArrowDown','ArrowLeft','ArrowRight',' '].includes(k)) e.preventDefault();
  if(e.repeat) return;
  ensureAudio();
  if(state==='attract' && (k.length===1 || k.startsWith('Arrow'))){ startPlay(); /* fallthrough to dir */ }
  else if(state==='over'){ if(performance.now()-deadAt>700 && (k.length===1||k.startsWith('Arrow'))) startPlay(); else return; }
  else if(state==='paused'){ if(k===' '||k==='p'||k==='P'||k==='Escape') resume(); return; }
  if(state!=='playing') return;
  if(k===' '){ pause(); return; }
  if(k==='r'||k==='R'){ startPlay(); return; }
  let d=null;
  if(k==='ArrowUp'||k==='w'||k==='W') d={x:0,y:-1};
  else if(k==='ArrowDown'||k==='s'||k==='S') d={x:0,y:1};
  else if(k==='ArrowLeft'||k==='a'||k==='A') d={x:-1,y:0};
  else if(k==='ArrowRight'||k==='d'||k==='D') d={x:1,y:0};
  if(d){ dirQueue.push(d); if(dirQueue.length>3) dirQueue.shift(); }
});
```
Careful with control flow: after startPlay() from attract, state==='playing', falls to the playing block: pressing 'x' does nothing more; pressing arrow sets dir ✓. But pressing ' ' from attract starts game then immediately pauses! Because after startPlay, `if(k===' '){pause()}`. Guard: when starting from attract/over with key, return after pushing direction if arrow. Let me restructure:

```js
window.addEventListener('keydown', e=>{
  const k=e.key;
  if([' ','ArrowUp','ArrowDown','ArrowLeft','ArrowRight'].includes(k)) e.preventDefault();
  if(e.repeat) return;
  ensureAudio();
  const isActionKey = k.length===1 || k.startsWith('Arrow');
  if(state==='attract'){
    if(!isActionKey) return;
    startPlay();
  } else if(state==='over'){
    if(!isActionKey || performance.now()-deadAt<700) return;
    startPlay();
    return; // fresh start, ignore the key beyond starting
  } else if(state==='paused'){
    if(k===' '||k==='p'||k==='P'||k==='Escape') resume();
    return;
  }
  // playing
  if(k===' '){ pause(); return; }
  if(k==='r'||k==='R'){ startPlay(); return; }
  let d=...;
  if(d){ push }
});
```
In attract branch after startPlay, don't return → falls to playing block; pressing 'r' would restart (just started, harmless); pressing ' ' would pause immediately — mildly annoying; add return after startPlay() in attract branch too? Then arrow key wouldn't queue direction. Starting direction then comes from current dir (rightward). It's fine — simplest: return after startPlay() in both branches. Player presses arrow again to steer. Actually queuing the arrow is a nice touch... but ' ' edge case is worse. I'll return.

pause/resume:
```js
function pause(){ if(state!=='playing')return; state='paused'; pausedT=Math.min(1,(performance.now()-lastStep)/interval); showPaused(); }
function resume(){ if(state!=='paused')return; state='playing'; lastStep=performance.now()-pausedT*interval; hideOverlay(); }
```

window blur:
```js
window.addEventListener('blur', ()=>{ if(state==='playing') pause(); });
```

die():
```js
function die(){
  sndCrash();
  derail = snake.map((_,i)=>({dx:(Math.random()-.5)*12, dy:(Math.random()-.5)*12, rot:(Math.random()-.5)*(i===0?1.1:.6)}));
  const hp=headPixelNow(); // approximate: snake[0] center
  for(let i=0;i<22;i++) emitSmoke(hp.x, hp.y, Math.random()*6.283, true);
  boardWrap.classList.remove('shake'); void boardWrap.offsetWidth; boardWrap.classList.add('shake');
  if(state==='attract'){
    state='attractWait';
    setTimeout(()=>{ if(state==='attractWait'){ reset(); state='attract'; } }, 1400);
  } else {
    const newBest = score>=best && score>0;  // best already updated in step
    state='over'; deadAt=performance.now();
    showOver(newBest && score===best && score>0 && prevBest < score)... 
```
Track prevBest: in step when score++: if(score>best){best=score; newRecord=true}. Store flag `achievedNewBest` set in step, consumed/reset on start. Simpler: keep `bestAtStart` set in reset? Let me: in step: `scoreIsRecord = score>best; if(scoreIsRecord) best=score;` — scoreIsRecord true only in the moment we exceed. Then die uses a latched variable `madeRecord = madeRecord || scoreIsRecord`. Reset madeRecord=false in reset(). OK.

updateHUD(); showOver(madeRecord);
```

step() full:
```js
function step(){
  // direction from queue
  while(dirQueue.length){
    const d=dirQueue.shift();
    if((d.x!==-dir.x||d.y!==-dir.y)){ dir=d; break; }
  }
  const old=snake.map(p=>({x:p.x,y:p.y}));
  const nh={x:old[0].x+dir.x, y:old[0].y+dir.y};
  let dead = nh.x<0||nh.y<0||nh.x>=COLS||nh.y>=ROWS;
  if(!dead){
    const willEat = nh.x===food.x&&nh.y===food.y;
    const lim = willEat? snake.length : snake.length-1;
    for(let i=0;i<lim;i++) if(snake[i].x===nh.x&&snake[i].y===nh.y){ dead=true; break; }
  }
  if(dead){ die(); return; }
  const willEat = nh.x===food.x&&nh.y===food.y;
  snake.unshift(nh);
  if(willEat){
    wagonColors.push(food.color);
    score++;
    if(score>best){ best=score; madeRecord=true; }
    interval=Math.max(80, 162-score*3);
    burst((nh.x+.5)*CELL,(nh.y+.5)*CELL, food.color);
    floats.push({x:(nh.x+.5)*CELL, y:(nh.y+.5)*CELL-10, text:'+1', life:1});
    sndPickup();
    spawnFood();
  } else snake.pop();
  snakePrev = snake.map((p,i)=> old[i]||{x:p.x,y:p.y});
  if(angles.length<snake.length) angles.push(angles[angles.length-1]);
  if(ra.length<snake.length) ra.push(ra[ra.length-1]);
  for(let i=0;i<snake.length;i++){
    const a=snakePrev[i], b=snake[i];
    if(a.x!==b.x||a.y!==b.y) angles[i]=Math.atan2(b.y-a.y,b.x-a.x);
  }
  if(willEat) updateHUD(true); else updateHUD(false);
}
```
Hmm: `if(willEat)` defined twice (I compute inside !dead block then recompute). Fine, restructure cleanly: compute willEat before dead check but food exists always. 

Wait — willEat check requires nh in bounds for food comparison; food always in bounds; nh out of bounds can't equal food coords anyway (food within grid) — so willEat computed safely regardless. Compute once at top.

Also, note when game over in attract: state becomes attractWait — frame loop stepping only for playing/attract ✓.

reset():
```js
function reset(){
  const sy=7;
  snake=[{x:6,y:sy},{x:5,y:sy},{x:4,y:sy}];
  snakePrev=snake.map(p=>({x:p.x,y:p.y}));
  wagonColors=[null, PALETTE[(Math.random()*PALETTE.length)|0], PALETTE[(Math.random()*PALETTE.length)|0]];
  // ensure two distinct? fine whatever
  dir={x:1,y:0}; dirQueue=[];
  angles=[0,Math.PI,Math.PI]; wait angles: car1 (at 5,7) faces toward head direction +x → 0; car2 at 4 faces +x → 0. All facing right: [0,0,0].
  ra=[0,0,0];
  score=0; madeRecord=false; interval=162;
  smokes=[]; parts=[]; floats=[]; rings=[]; derail=null; smokeAcc=0;
  spawnFood();
  updateHUD(false);
}
```
wagonColors[0] is loco — push null placeholder.

startPlay():
```js
function startPlay(){
  ensureAudio(); reset(); state='playing'; lastStep=performance.now(); hideOverlay();
}
```
Also for attract initial: reset(); state='attract'; lastStep=performance.now().

AI:
```js
function aiSteer(){
  const head=snake[0];
  const blocked=new Uint8Array(COLS*ROWS);
  for(let i=0;i<snake.length-1;i++) blocked[snake[i].y*COLS+snake[i].x]=1;
  const start=head.y*COLS+head.x, ti=food.y*COLS+food.x;
  const prev=new Int32Array(COLS*ROWS).fill(-1);
  const q=[start]; blocked[start]=1;
  let found=start===ti; // impossible but safe
  for(let h=0; h<q.length && !found; h++){
    const c=q[h];
    const cx=c%COLS, cy=(c/COLS)|0;
    const nb=[[1,0],[-1,0],[0,1],[0,-1]];
    for(const [dx,dy] of nb){
      const nx2=cx+dx, ny2=cy+dy;
      if(nx2<0||ny2<0||nx2>=COLS||ny2>=ROWS) continue;
      const n=ny2*COLS+nx2;
      if(blocked[n]) continue;
      blocked[n]=1; prev[n]=c; q.push(n);
      if(n===ti){ found=true; break; }
    }
  }
```
Hmm found when *discovered* (pushed), but need prev chain complete — it is at push time. OK, mark found on push.
```js
  if(found){
    let cur=ti;
    while(prev[cur]!==-1 && prev[cur]!==start) cur=prev[cur];
    const nx=cur%COLS, ny=(cur/COLS)|0;
    const d={x:nx-head.x, y:ny-head.y};
    if(!(d.x===-dir.x&&d.y===-dir.y)) { dirQueue=[d]; return; }
  }
```
Edge: if prev[ti]===-1? ti discovered means prev set (unless ti===start impossible). while loop: cur=ti; condition prev[cur]!==-1 && prev[cur]!==start → walk back until parent is start. Then cur is the first step cell. If prev[cur]===-1 (shouldn't happen) → fallback.
```js
  // fallback: safest free neighbor by flood fill
  const full=new Uint8Array(COLS*ROWS);
  for(const p of snake) full[p.y*COLS+p.x]=1;
  let bestD=null, bestN=-1;
  const cands=[[1,0],[-1,0],[0,1],[0,-1]];
  for(const [dx,dy] of cands){
    if(dx===-dir.x&&dy===-dir.y) continue;
    const nx2=head.x+dx, ny2=head.y+dy;
    if(nx2<0||ny2<0||nx2>=COLS||ny2>=ROWS) continue;
    if(full[ny2*COLS+nx2]) continue;
    // flood count
    const seen=new Uint8Array(COLS*ROWS); const qq=[ny2*COLS+nx2]; seen[qq[0]]=1; let cnt=0;
    while(qq.length){
      const c=qq.pop(); cnt++;
      const cx=c%COLS, cy=(c/COLS)|0;
      for(const [ex,ey] of cands){
        const mx=cx+ex,my=cy+ey;
        if(mx<0||my<0||mx>=COLS||my>=ROWS) continue;
        const m=my*COLS+mx;
        if(seen[m]||full[m]) continue;
        seen[m]=1; qq.push(m);
      }
    }
    if(cnt>bestN){ bestN=cnt; bestD={x:dx,y:dy}; }
  }
  if(bestD) dirQueue=[bestD];
}
```
Note fallback excludes tail... uses full snake including tail — conservative, fine.

AI quality: BFS ignoring future growth may trap itself sometimes → then dies → attractWait resets. Acceptable (looks natural even).

One more thing: when AI's BFS path found but is a reverse — can't be (neck blocked). The check I added is harmless.

Frame:
```js
let lastFrame=performance.now(), lastStep=performance.now();
function frame(now){
  requestAnimationFrame(frame);
  const dt=Math.min(.05,(now-lastFrame)/1000)||0; lastFrame=now;
  if((state==='playing'||state==='attract') && now-lastStep>=interval){
    lastStep=now;
    if(state==='attract') aiSteer();
    step();
  }
  updateFx(dt);
  // render angles smoothing
  for(let i=0;i<ra.length;i++) ra[i]=angleLerp(ra[i], angles[i]||0, Math.min(1,dt*10));
  draw(now);
}
```
draw needs t: compute inside draw from now/lastStep/pausedT.

Careful: after die() during attract, state='attractWait' but step already returned; draw uses t=1 with derail. ✓ And setTimeout resets. Note: if user starts playing during attractWait — startPlay sets state playing, then timeout fires checking state==='attractWait' false → skip. ✓

updateFx: smoke, parts, rings, floats.

Shake class removal: 
```js
boardWrap.addEventListener('animationend', ()=>boardWrap.classList.remove('shake'));
```
But pop animation on card is inside overlay (child) — animationend bubbles from card too! Check e.target===boardWrap or use e.animationName==='shake'. Use animationName check.

Overlay hidden initial? No—show attract immediately.

Also the overlay covers the canvas — pointer-events none so clicks reach wrap ✓ (card too: set pointer-events:none on card; cursor pointer on board-wrap).

Hmm wait: if overlay has pointer-events:none and card none, click handler on boardWrap gets the click. ✓

Fonts in canvas: `600 15px Fredoka, sans-serif`.

Let me also double-check no horizontal scrollbar at 375: body padding 14, .page width min(920,100%). footer hints wrap. ✓

Height on 1280×800: page height = hud (~60) + board (864+20 borders → but width min(920,1280-36=1244)→920 → wait .page width 920, board-wrap width 920 minus? board-wrap is full width of page (920) with border 10 → canvas display width 900 → height 900/1.6=562.5 → total 60+582+40+padding 36 ≈ 718 < 800 ✓.

Now title svg for brand — let me draw a decent side-view loco:

```html
<svg viewBox="0 0 56 36" width="46" height="30" aria-hidden="true">
  <rect x="4" y="4" width="13" height="18" rx="2.5" fill="#C7483A"/>
  <rect x="6.5" y="6.5" width="8" height="7" rx="1.5" fill="#FFE9C9"/>
  <rect x="17" y="9" width="24" height="13" rx="5" fill="#3B3A42"/>
  <rect x="36" y="3" width="5.5" height="9" rx="1.8" fill="#3B3A42"/>
  <circle cx="25" cy="8" r="3" fill="#E0A83C"/>
  <path d="M41 10 L50 22 L41 22 Z" fill="#232227"/>
  <circle cx="10" cy="24" r="4.5" fill="#232227"/><circle cx="10" cy="24" r="1.6" fill="#E0A83C"/>
  <circle cx="20" cy="25" r="4.5" fill="#232227"/><circle cx="20" cy="25" r="1.6" fill="#E0A83C"/>
  <circle cx="30" cy="25" r="4.5" fill="#232227"/><circle cx="30" cy="25" r="1.6" fill="#E0A83C"/>
  <rect x="38" y="20" width="10" height="3" rx="1.5" fill="#232227"/>
</svg>
```
Wheels y=24-25 with r4.5 → bottom ~29.5, viewBox 36 ✓. Chimney at x36-41.5 above boiler (boiler y9..22). Cowcatcher path triangle from (41,10) to (50,22)... it should attach at boiler right edge x=41, y 10..22, triangle to point (50,22)? That makes a right-pointing wedge along bottom — should point forward: apex at (50,22)? Hmm side view: cowcatcher is at front-bottom, sloping: path M41,12 L50,22 L41,22 Z — wedge. I wrote y10..22, ok make M41,12. And the small rect under it (38,20,10,3) as a rail/skid. Fine, it's decorative.

Card icon: same svg at width 64.

Also add a tiny divider in card? nah.

Let me also consider the "record" class styling: color red, weight 600.

Edge case: floats/parts draw after train — visible. ✓

Another check: drawTrackSeg for snake.length-1 down to 1 (pairs (i, i-1)) — I wrote loop `for(let i=snake.length-1;i>0;i--) drawTrackSeg(snake[i]→snake[i-1])`. ✓ Single car (len 1) → no track; initial len 3 ok. Loco alone never happens (start len 3).

But what if snake length is 3 and drawing — fine.

Also should the track draw under the passenger's platform cell? Passenger cell isn't part of snake until eaten ✓.

One more polish: subtle vignette on board edges — draw once per frame: 4 rects? skip, frame border suffices.

Also HUD "Cars" — maybe "Train" label. Use "Cars".

Let me also handle case: window resized — nothing needed.

Potential bug: `ctx.setTransform(dpr,0,0,dpr,0,0)` — after canvas.width assignment, transform resets; set after fit() each time; fit called once. ✓

Let me also double check `arc(...,0,7)` — 7 > 2π ✓ full circle.

Ensure `void boardWrap.offsetWidth` reflow trick used properly.

Font loading for canvas text — use `document.fonts` no need.

I think it's ready to write out. Also include brief comments in code (English, matching user language).

One more detail: the "pulse" message and attract card should be visible in screenshot at ~3s ✓ (card shown immediately, train moving behind).

Let me also add `user-select:none` and `touch-action: manipulation` on page; mobile: could add swipe? The task says 375px wide look right — swipe steering would be a bonus. Add simple touch support: touchstart/touchend delta → direction, and tap counts as primaryAction. Let me add:
```js
let tS=null;
boardWrap.addEventListener('touchstart', e=>{ tS=e.touches[0]; }, {passive:true});
boardWrap.addEventListener('touchend', e=>{
  if(!tS) return;
  const t=e.changedTouches[0];
  const dx=t.clientX-tS.clientX, dy=t.clientY-tS.clientY;
  if(Math.hypot(dx,dy)<20){ primaryAction(); ensureAudio(); }
  else if(state==='playing'){
    const d = Math.abs(dx)>Math.abs(dy) ? {x:Math.sign(dx),y:0} : {x:0,y:Math.sign(dy)};
    dirQueue.push(d);
  }
  tS=null;
},{passive:true});
```
Good addition.

Also click handler: ensureAudio() then primaryAction().

Now, overlay 'hidden' default CSS: .overlay.hidden{display:none}. Initially visible with attract content.

Also noticed: overlay inset:10px matches border width; border-radius 10.

Board wrap background between border and canvas: none — canvas fills exactly. inset 0 would align with canvas edge: overlay inset should equal border thickness so overlay aligns with canvas area. inset:10px ✓ (borders 10px).

Write final HTML/CSS/JS carefully, complete.

Also small detail: `lineCap` reset — I set 'butt' in track fn each time; other strokes (decor) use default butt ✓.

drawParts:
```js
function updateFx(dt){
  for(const s of smokes){...}
  smokes=smokes.filter(...);
  for(const p of parts){ p.x+=p.vx*dt; p.y+=p.vy*dt; p.vx*=Math.exp(-3.5*dt); p.vy*=...; p.rot+=p.vr*dt; p.life-=2.2*dt; }
  parts=parts.filter(p=>p.life>0);
  for(const r of rings){ r.r+=95*dt; r.life-=2.6*dt; } rings=rings.filter(r=>r.life>0);
  for(const f of floats){ f.y-=32*dt; f.life-=1.15*dt; } floats=floats.filter(f=>f.life>0);
}
function drawFx(){
  for(const r of rings){ ctx.strokeStyle=r.color; ctx.globalAlpha=Math.max(0,r.life)*.8; ctx.lineWidth=3; ctx.beginPath(); ctx.arc(r.x,r.y,r.r,0,7); ctx.stroke(); }
  ctx.globalAlpha=1;
  for(const p of parts){ ctx.save(); ctx.translate(p.x,p.y); ctx.rotate(p.rot); ctx.globalAlpha=Math.max(0,p.life); ctx.fillStyle=p.color; ctx.fillRect(-2.6,-1.7,5.2,3.4); ctx.restore(); }
  ctx.globalAlpha=1;
  for(const f of floats){ ctx.globalAlpha=Math.max(0,Math.min(1,f.life*1.4)); ctx.font='700 15px Fredoka, sans-serif'; ctx.textAlign='center'; ctx.lineWidth=4; ctx.strokeStyle='rgba(251,246,234,.9)'; ctx.strokeText(f.text,f.x,f.y); ctx.fillStyle='#3D3126'; ctx.fillText(f.text,f.x,f.y); }
  ctx.globalAlpha=1;
}
```
rings need color: push {x,y,r:6,life:1,color}.

OK — write it all out now. Also verify no leftover issues: `ra` length must match snake — when grown push in step ✓; derail array sized to snake at death ✓ (drawTrain guards derail[i] existence).

Let me make sure draw() handles food null — spawnFood always sets before draw; guard if(food).

Also, first frame: state attract, reset done, overlay attract shown, lastStep set at init.

Alright, compose the final file. I'll write comments in English (user language).

Also double check: no gradients used (I use flat colors ✓), no emoji ✓, no alert ✓, no localStorage ✓, single file ✓, fonts via Google CDN ✓.

Estimated total ~600 lines. Let me write it.