Train snakeOne-line

Flint (free)

by Recursivereasoning defaultClean

Open in new window

Running live in a sandboxed frame. Click inside it before using the keyboard.

How it went

Total time: 2 min 45 s
Cost: $0
Output tokens: 20,208
Spent thinking: 14,880 tokens
Speed: 124.5 tok/s
Console errors: 0

First token after: 2.6 s
First visible text after: 2 min 15 s
Prompt tokens: 353
Code size: 10.4 KB
Finish reason: stop
Served by: Recursive
Model id: recursive/flint-v1.0:free
Reasoning sent: model default
Max output: 32,000 tokens
Generated: Nov 9, 2026

What it was asked

The prompt

“make me a snake game where the snake is a little train with a locomotive and colorful wagons, picking up passengers waiting on the platform”

System prompt, sent with every prompt

You are generating a self-contained web demo. It will be rendered automatically in a sandboxed iframe and compared side by side with the output of other AI models given the exact same task.

Output rules:
- Reply with exactly ONE fenced code block containing the complete file: ```html (or ```svg when the task asks for an SVG). No text before or after the code block.
- Everything must be inline: CSS in <style>, JavaScript in <script>. No external files, images, fonts or network requests, except the CDN URLs explicitly allowed by the task.
- Do not use localStorage, sessionStorage, cookies, IndexedDB, alert(), confirm(), prompt() or window.open(): they are blocked in the sandbox and will throw.
- The page must look right in a 1280×800 viewport and adapt gracefully down to 375px wide. No horizontal scrollbar.
- Something meaningful must be visible on first paint: a screenshot is taken automatically about 3 seconds after load, without any interaction.
- Everything that makes the demo interesting must be visible within the first seconds: nothing hidden behind a high score, a later level or a long play session.
- Games must start in a self-playing demo mode (a simple AI plays) behind a "Click or press a key to start" message, so the game can be judged in action without playing.
- The iframe only receives keyboard events after the user clicks it: if the demo uses the keyboard, display a clear "Click or press a key to start" message.
- The code must run with zero errors in the console of the latest Chrome.

Code run-1.html · 372 lines

Download

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Steam Snake Express</title>
  <style>
    html, body { margin: 0; padding: 0; height: 100%; }
    body {
      background: #0b1020;
      color: #e8eefc;
      font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      overflow-x: hidden;
    }
    #app {
      position: relative;
      width: min(100%, 960px);
      aspect-ratio: 8 / 5;
    }
    #game {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
      background: #0e1526;
    }
    #hud {
      position: absolute;
      top: 10px;
      left: 12px;
      right: 12px;
      display: flex;
      justify-content: space-between;
      pointer-events: none;
      font-size: 14px;
      text-shadow: 0 2px 6px rgba(0,0,0,.8);
      z-index: 5;
    }
    #overlay {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 14px;
      background: rgba(6,10,20,.78);
      text-align: center;
      padding: 20px;
      box-sizing: border-box;
      z-index: 10;
      cursor: pointer;
    }
    #overlay.hidden { display: none; }
    h1 { margin: 0; font-size: clamp(24px, 4vw, 44px); letter-spacing: 2px; }
    p { margin: 0; font-size: clamp(14px, 2vw, 20px); opacity: .9; }
    .hint { font-size: clamp(12px, 1.6vw, 16px); opacity: .7; }
  </style>
</head>
<body>
  <div id="app">
    <canvas id="game" width="960" height="600"></canvas>
    <div id="hud">
      <div>Score: <span id="score">0</span></div>
      <div id="length">Train: 4</div>
    </div>
    <div id="overlay">
      <h1>Steam Snake Express</h1>
      <p id="overlayText">Click or press a key to start</p>
      <p class="hint">Watch the little train pick up colorful passengers.</p>
    </div>
  </div>

  <script>
    const canvas = document.getElementById('game');
    const ctx = canvas.getContext('2d');
    const overlay = document.getElementById('overlay');
    const overlayText = document.getElementById('overlayText');
    const scoreEl = document.getElementById('score');
    const lengthEl = document.getElementById('length');

    const COLS = 48;
    const ROWS = 30;
    const CELL = 20;
    const PASSENGER_Y = 2;
    const STEP_MS = 90;

    let state = 'ready';
    let snake, dir, passengers, score, gameOver;
    let acc = 0;
    let lastTime = 0;

    function resetGame() {
      snake = [
        { x: 5, y: 10 },
        { x: 6, y: 10 },
        { x: 7, y: 10 },
        { x: 8, y: 10 }
      ];
      dir = { x: 1, y: 0 };
      passengers = [
        { x: 20, y: PASSENGER_Y },
        { x: 28, y: PASSENGER_Y },
        { x: 36, y: PASSENGER_Y }
      ];
      score = 0;
      gameOver = false;
      acc = 0;
      scoreEl.textContent = 'Score: 0';
      lengthEl.textContent = 'Train: ' + snake.length;
    }

    function getTarget() {
      let head = snake[snake.length - 1];
      let best = null;
      let bestDist = Infinity;
      for (let p of passengers) {
        let dx = p.x - head.x;
        let dy = p.y - head.y;
        let d = dx * dx + dy * dy;
        if (d < bestDist) {
          bestDist = d;
          best = p;
        }
      }
      return best;
    }

    function chooseDirection(head, current, target) {
      const dirs = [
        { x: 1, y: 0 },
        { x: -1, y: 0 },
        { x: 0, y: 1 },
        { x: 0, y: -1 }
      ];
      let best = null;
      let bestScore = Infinity;
      for (let d of dirs) {
        if (d.x === -current.x && d.y === -current.y) continue;
        let nx = head.x + d.x;
        let ny = head.y + d.y;
        if (nx < 0 || nx >= COLS || ny < 0 || ny >= ROWS) continue;
        let willEat = passengers.some(p => p.x === nx && p.y === ny);
        let valid = true;
        if (willEat) {
          if (snake.some(s => s.x === nx && s.y === ny)) valid = false;
        } else {
          if (snake.some((s, i) => i !== 0 && s.x === nx && s.y === ny)) valid = false;
        }
        if (!valid) continue;
        let dist = 0;
        if (target) {
          let dx = nx - target.x;
          let dy = ny - target.y;
          dist = dx * dx + dy * dy;
        }
        let score = dist + ((d.x === current.x && d.y === current.y) ? 0 : 8);
        if (score < bestScore) {
          bestScore = score;
          best = { d, nx, ny };
        }
      }
      return best;
    }

    function update(dt) {
      if (state !== 'running') return;
      acc += dt;
      if (acc < STEP_MS) return;
      acc = 0;

      let head = snake[snake.length - 1];
      let target = getTarget();
      let next = chooseDirection(head, dir, target);

      if (!next) {
        gameOver = true;
        state = 'gameover';
        overlayText.textContent = 'Game Over — click to restart';
        overlay.classList.remove('hidden');
        return;
      }

      dir = next.d;
      let newX = next.nx;
      let newY = next.ny;
      let willEat = passengers.some(p => p.x === newX && p.y === newY);

      if (newX < 0 || newX >= COLS || newY < 0 || newY >= ROWS) {
        gameOver = true;
        state = 'gameover';
        overlayText.textContent = 'Game Over — click to restart';
        overlay.classList.remove('hidden');
        return;
      }

      if (willEat) {
        if (snake.some(s => s.x === newX && s.y === newY)) {
          gameOver = true;
          state = 'gameover';
          overlayText.textContent = 'Game Over — click to restart';
          overlay.classList.remove('hidden');
          return;
        }
      } else {
        if (snake.some((s, i) => i !== 0 && s.x === newX && s.y === newY)) {
          gameOver = true;
          state = 'gameover';
          overlayText.textContent = 'Game Over — click to restart';
          overlay.classList.remove('hidden');
          return;
        }
      }

      let newHead = { x: newX, y: newY };
      snake.push(newHead);

      if (willEat) {
        let idx = passengers.findIndex(p => p.x === newX && p.y === newY);
        if (idx >= 0) passengers.splice(idx, 1);
        score++;
        scoreEl.textContent = 'Score: ' + score;

        let nx = 2 + Math.floor(Math.random() * (COLS - 6));
        let ny = PASSENGER_Y;
        let safe = false;
        for (let attempt = 0; attempt < 10 && !safe; attempt++) {
          nx = 2 + Math.floor(Math.random() * (COLS - 6));
          ny = PASSENGER_Y;
          if (!snake.some(s => s.x === nx && s.y === ny)) safe = true;
        }
        passengers.push({ x: nx, y: ny });
      } else {
        snake.shift();
      }

      lengthEl.textContent = 'Train: ' + snake.length;
    }

    function drawPassenger(x, y) {
      ctx.save();
      ctx.fillStyle = '#ffd166';
      ctx.beginPath();
      ctx.arc(x, y, 4, 0, Math.PI * 2);
      ctx.fill();
      ctx.fillStyle = '#2d3436';
      ctx.fillRect(x - 5, y + 4, 10, 7);
      ctx.fillStyle = '#e17055';
      ctx.fillRect(x - 5, y + 4, 10, 2);
      ctx.restore();
    }

    function drawTrainSegment(x, y, w, h, color, isHead) {
      ctx.save();
      ctx.fillStyle = 'rgba(0,0,0,0.35)';
      ctx.fillRect(x + 2, y + 2, w, h);
      ctx.fillStyle = color;
      ctx.fillRect(x, y, w, h);
      ctx.fillStyle = 'rgba(255,255,255,0.35)';
      ctx.fillRect(x + 3, y + 3, w - 6, 5);

      if (isHead) {
        ctx.fillStyle = '#1b2a4a';
        ctx.fillRect(x + 2, y + 2, w - 4, h - 4);
        ctx.fillStyle = '#3a86ff';
        ctx.fillRect(x + w - 8, y + 2, 6, h - 2);
        ctx.fillStyle = '#747d8c';
        ctx.fillRect(x + w / 2 - 3, y - 5, 6, 6);
        ctx.fillStyle = '#ff4757';
        ctx.beginPath();
        ctx.arc(x + w - 3, y + h / 2, 2, 0, Math.PI * 2);
        ctx.fill();
      } else {
        ctx.fillStyle = 'rgba(0,0,0,0.2)';
        ctx.fillRect(x + 2, y + 2, w - 4, h - 4);
      }

      ctx.fillStyle = '#0f1420';
      ctx.beginPath();
      ctx.arc(x + 5, y + h - 6, 3.5, 0, Math.PI * 2);
      ctx.fill();
      ctx.beginPath();
      ctx.arc(x + w - 5, y + h - 6, 3.5, 0, Math.PI * 2);
      ctx.fill();
      ctx.restore();
    }

    function getWagonColor(i, len) {
      const palette = ['#ff6b6b', '#feca57', '#48dbfb', '#1dd1a1', '#f368e0', '#ff9f43'];
      return palette[i % palette.length];
    }

    function draw() {
      ctx.fillStyle = '#0e1526';
      ctx.fillRect(0, 0, 960, 600);

      ctx.strokeStyle = 'rgba(255,255,255,0.06)';
      ctx.lineWidth = 1;
      for (let x = 0; x <= COLS; x++) {
        ctx.beginPath();
        ctx.moveTo(x * CELL, 0);
        ctx.lineTo(x * CELL, ROWS * CELL);
        ctx.stroke();
      }
      for (let y = 0; y <= ROWS; y++) {
        ctx.beginPath();
        ctx.moveTo(0, y * CELL);
        ctx.lineTo(COLS * CELL, y * CELL);
        ctx.stroke();
      }

      ctx.fillStyle = '#1f2b44';
      ctx.fillRect(0, PASSENGER_Y * CELL, COLS * CELL, CELL * 2);
      ctx.fillStyle = '#2c3e5f';
      ctx.fillRect(0, PASSENGER_Y * CELL, COLS * CELL, CELL);
      ctx.fillStyle = '#3d547f';
      ctx.fillRect(0, (PASSENGER_Y + 1) * CELL, COLS * CELL, CELL);

      for (let p of passengers) {
        drawPassenger(p.x * CELL + 10, p.y * CELL + 10);
      }

      for (let i = snake.length - 1; i >= 0; i--) {
        let seg = snake[i];
        let isHead = (i === snake.length - 1);
        let color = isHead ? '#3a86ff' : getWagonColor(i, snake.length);
        let w = isHead ? 18 : 14;
        let h = isHead ? 18 : 14;
        let x = seg.x * CELL + (CELL - w) / 2;
        let y = seg.y * CELL + (CELL - h) / 2;
        drawTrainSegment(x, y, w, h, color, isHead);
      }
    }

    function loop(time) {
      let dt = (time - lastTime) / 1000;
      lastTime = time;
      if (dt > 0.05) dt = 0.05;
      update(dt);
      draw();
      requestAnimationFrame(loop);
    }

    function start() {
      if (state === 'ready') {
        state = 'running';
        overlay.classList.add('hidden');
      } else if (state === 'gameover') {
        resetGame();
        state = 'running';
        overlay.classList.add('hidden');
      }
    }

    resetGame();
    overlayText.textContent = 'Click or press a key to start';
    overlay.addEventListener('click', start);
    document.addEventListener('keydown', (e) => {
      if (state === 'ready' || state === 'gameover') {
        e.preventDefault();
        start();
      }
    });
    requestAnimationFrame(loop);
  </script>
</body>
</html>

Reasoning trace (14,880 tokens)

We need answer user asks make snake game. Need comply with output rules. We need craft one fenced code block only, html. Must be self-contained, inline CSS/JS, no external files except allowed CDN. No localStorage etc. No alert/confirm/prompt/window.open. Must look right 1280x800, adapt to 375. No horizontal scrollbar. Meaningful visible first paint. Screenshot 3s after load no interaction. Everything interesting visible first seconds. Games start in self-playing demo mode (simple AI plays) behind "Click or press a key to start" message, so judged in action without playing. Iframe only receives keyboard after user clicks it: if demo uses keyboard, display clear "Click or press a key to start" message. Code zero errors latest Chrome.

We need likely just output HTML file. Must include canvas maybe. Snake game where snake is little train with locomotive and colorful wagons, picking up passengers waiting on platform.

Need design. We can make canvas-based game. Self-playing AI demo mode behind start message. Start message overlay: "Click or press a key to start". Upon click/key, start AI. Keyboard maybe arrows to control? But if demo uses keyboard, display clear message. Could not use keyboard except start? It says behind a "Click or press a key to start" message. We can use click/touch to start. If uses keyboard, display clear. We can just use click/touch start. But phrase "Click or press a key to start" can be displayed; pressing any key starts. No alert. On keydown start. That's okay? Iframe receives keyboard after click; we display message. Good.

Need self-playing demo mode. AI controls snake direction toward nearest passenger/target. Game loop. Snake as train: locomotive head + wagons. Grid maybe 24x18. Snake moves one cell per tick. Each segment is wagon? Locomotive at head with color, wagons trailing. Need pick up passengers waiting on platform. Platform maybe at a row/column? Could design map with tracks. Simpler: snake moves on grid, food/passengers are dots on platform area. When head overlaps passenger, passenger boards wagon? Score increases. Train grows? In snake, eating increases length. For train, maybe each passenger adds a wagon behind locomotive? Or snake segments are wagons, eating passenger at end? Better: Snake segments are wagons; locomotive at head. When eating passenger, maybe add a new wagon at tail? Actually train picking up passengers: locomotive + wagons. If snake eats, length increases, new wagon maybe added in front? But visually train moves forward. Could have head locomotive, previous segments as wagons behind. When passenger is picked up, attach to last wagon? Score. Growth: add segment at tail? But train would grow backwards? Snake growth adds at tail, which means new wagon behind? That could work: new passenger wagon attaches behind last wagon. But train movement: head moves, tail stays, new wagon at tail. Locomotive at head. Colorful wagons.

Map: maybe single track with platforms. Use grid cells. Snake starts center. Passengers placed on platforms: maybe at positions along right side? Need game interesting. Could have multiple passenger targets. AI moves toward nearest passenger. Avoid collisions with walls/self? Simple AI: choose direction that reduces distance to target, avoid reversing. Game over if hit wall/self. If eat passenger, score++, maybe new passenger spawns.

Visual: canvas 800x600? Viewport 1280x800. Canvas maybe 960x600 plus UI. But must adapt to 375. Use responsive canvas? Simpler fixed internal 960x600, CSS max-width 100%. For 1280x800 okay. 375 wide horizontal? Canvas width 100% maybe height auto. But no horizontal scrollbar. Use CSS width: min(100%, 960px); aspect ratio. Canvas backing store maybe 960x600. On small screens scale via CSS. That should avoid horizontal scrollbar? If container max-width 100%, okay.

Need first paint meaningful: start overlay with title, train maybe behind? Screenshot 3s after load without interaction. Should show game scene and overlay "Click or press a key to start". But self-playing demo mode behind message? Maybe start overlay covers, but screenshot after 3s should show something meaningful. The rule: Games must start in self-playing demo mode behind a "Click or press a key to start" message, so game can be judged in action without playing. That implies overlay message, but game maybe paused behind. On first paint, show title and message. Screenshot 3s later maybe sees overlay. Is that acceptable? They said something meaningful must be visible on first paint; behind message. Could render game world behind overlay but overlay semi-transparent. First paint shows train/passengers and message. Good.

Need no localStorage etc. Use Date.now? okay.

No external fonts. Use system fonts.

No network requests. Canvas drawing.

Need zero console errors. Avoid missing context methods? Use standard.

Let's plan code.

HTML structure:
- div#app
- canvas#game
- div#overlay
  - h1 "Steam Snake Express"
  - p "Click or press a key to start"
  - p "AI demo mode: watch the little train pick up passengers."
- div#hud maybe top bar? Could be inside canvas? Better HTML/CSS for score. But first paint. Use absolute HUD top-left score. But overlay covers? okay.
- footer? no.

CSS: body margin 0, min-height 100vh? display flex center, background. #app position relative, width min(100%, 960px), aspect-ratio maybe 8/5? Canvas absolute inset 0 w/h 100%. HUD absolute top. Overlay absolute inset 0 display flex center, background rgba(10,15,25,0.72), color white, text center, z-index 10, cursor pointer, backdrop-filter? okay no external.

Canvas internal resolution 960x600. CSS width 100%, aspect-ratio 8/5. On 1280 viewport, app width min(100%,960px) -> 960, height 600. Body center. Good.

Game logic:
Constants:
const VIEW_W=960, VIEW_H=600;
const COLS=48, ROWS=30? Grid cell size = 20. 960/20=48, 600/20=30. Good.
Snake: array of {x,y} segments from tail to head? Or head to tail. Let's use array where last element is head? For easier. Start length maybe 4. Head at {x: 10, y: 14}? Platform maybe at top? Let's design map.

Need train picking up passengers waiting on platform. Maybe map has track. Could just use grid. Passengers are targets. Snake starts maybe in middle. Platform row at y=2? Let's place platform along top row? But train movement. Maybe platform at right side vertical? Simpler: passengers spawn on a platform row (y = ROWS-3 maybe bottom). Snake moves. When eats, score. But "platform" visual: draw a platform rectangle on row.

Maybe use grid rows 0-29, cols 0-47. Snake start at {x: 8, y: 14}, length 4 moving right. Passengers spawn on platform: row y = 24? Actually bottom. Draw platform as horizontal station at bottom? Let's set platform row = ROWS - 3 = 27? Cell height 20, y=540. Platform area from x maybe 6 to 40. But snake moving.

Better: Map: single track horizontal. Platform at bottom row. Snake moves horizontally. Passengers waiting on platform at y = ROWS-2? When head reaches same y and overlaps passenger x, eat. Train moves, passengers stay? Then picking up. But after eating, new passenger spawns further along? Maybe.

But snake AI with multiple passengers. Let's design simple:
- Grid height 30, width 48.
- Snake starts at x=8, y=14 (not platform). Hmm.

Maybe platform at row 2 (top). Snake starts below platform? Train on track. Passengers at y=2. AI drives up to platform, picks, then maybe next passenger. But train length grows.

Let's make game: Snake is train on a winding track? Too complex.

Simpler: top-down snake on grid with station platform along top. Passengers spawn at random x on row 2. Snake starts at (8, 14) moving down? AI target. When eats passenger at row 2, score++, new passenger spawns at another x on row 2 or maybe same? Train grows. Avoid walls. Self-collision. Draw rails and platform.

But train picking up passengers waiting on platform: if platform is top row, train drives to platform. Good.

Grid: COLS=48, ROWS=30, cell=20. Canvas 960x600. Row 0 top. Platform at row 1 maybe? Let's set platform row = 1 (y=20). Snake start at {x:8, y:10}, length 4, moving down? AI target passengers at y=1. Head movement. If head y=1, eats passenger. Then maybe continue.

Snake representation: array of segments, head at end? Let's do array where segments[0] is tail, segments[segments.length-1] is head. Directions.

Start: head at {x:8, y:10}; segments tail backwards: {x:7,y:10}, {x:6,y:10}, {x:5,y:10}? That's length 4, moving down? Actually head at 10, tail behind left. Direction down (dx=0, dy=1). Next head y=11. Good.

AI: target = nearest passenger not eaten. Choose next direction among [up, down, left, right] not opposite of current, within bounds, not colliding. Score by Manhattan distance or Euclidean to target. Prefer same row/col. Simple: for each dir, compute new head pos, if valid and not self, score = dist(newHead, target) - penalty if dir opposite? Choose min. If no valid, game over. Since target may be ahead.

Passengers: array of {x,y}. Initially maybe 3 passengers on platform row y=1, x=20, 28, 36? Snake at y=10, will go up. But if start moving down, AI will choose up toward target. Good.

Eating: if newHead equals passenger pos, remove passenger, score++, add new passenger? For growth: push new segment at tail? In snake, when eating, we usually add new head and remove tail. For train, if we add head, locomotive moves into passenger, and tail moves? Actually train picking up: locomotive front, wagons behind. Eating should maybe not grow? But snake game usually grows. For train, growth could add a wagon at tail? Let's think visual. If head is locomotive, and previous segments are wagons behind. When head moves forward, tail follows. To pick up passenger, maybe the head doesn't grow; instead the last wagon behind gets passenger? But scoring? Maybe simpler: when eating, add new segment at head? That would make old head become wagon? But locomotive should be new? Hmm.

Visual: Snake array head at end. Draw from head backwards: draw locomotive at head, then wagons for previous segments. When moving, we remove tail by default, so train gets shorter. When eating, we don't remove tail (or add extra), so train grows with an extra wagon behind? Actually if we add new head and keep tail, length increases, new head is locomotive? Old head becomes first wagon? That's okay: locomotive at front, old head as wagon. Colorful wagons maybe cycle colors by index. Eating passenger adds a new head? Wait if head moves into passenger cell, we can set new head, and push old tail? Standard: newHead, check eat, push newHead, if not eat pop tail. If eat, don't pop tail -> length increases, new head added, old tail remains. New head is locomotive, old head becomes wagon? But visually locomotive is at new head, old head is now behind, so okay. The passenger is picked up at new head? Maybe draw passenger in front? Not necessary.

Train rendering:
- Head: locomotive, draw rounded rect with smoke stack, color maybe dark blue/green, wheels.
- Wagons: for each segment behind head, draw colorful wagon: rect with stripe, wheels, maybe passenger? Number of wagons = length-1. Color based on index or hash. Draw from head backwards.
- Grid lines, rails: draw horizontal/vertical lines. Platform: draw station platform at row 1? Actually if platform row = 1, draw platform rect across maybe x=4*20 to 44*20? Simpler: draw horizontal platform at row 1: fill rect from x=3*20 to (COLS-3)*20? But grid row height 20. Could draw rect (60,20, 840, 40) rounded. Rails above/below? Maybe.

- Passengers: draw little people icon: circle head + body. Color maybe yellow/green. When eaten, maybe sparkles.

- Snake self collision: need check new head against body except tail if not eating. Since AI may reverse. We can implement standard.

Game states: 'ready' overlay, 'running', 'gameover'. AI runs when running.

HUD: score, best? No localStorage. Just score. Maybe length. Draw in canvas or HTML. Simpler canvas top bar? Use HTML HUD updated by JS. But overlay. Use div#hud. Score. Game over overlay? Could be in canvas or HTML. Need self-playing. If game over, show restart? But start message only. Could auto restart? For demo, maybe if game over, show "Game Over — click to restart" but rule says behind "Click or press a key to start" message. Better: if AI dies, reset after? Or just keep game running. Avoid game over? But collisions possible. Could wrap around? No. Simpler: walls? Could make boundaries safe? Snake can go within. If game over, stop and show overlay "Game Over – click to restart". But first paint okay.

Maybe no game over by using wrap-around? That might be less game-like. But for demo, self-playing AI might eventually crash. Could have game over and restart button? But no alert/confirm. Use overlay. But start message only at ready.

Need self-playing demo mode: AI moves automatically when running. Start on click/key. Overlay hidden. HUD visible.

Keyboard: if user presses arrow keys, could switch to manual? But iframe keyboard after click. The task says if demo uses keyboard, display clear "Click or press a key to start" message. We can use keyboard only for start: any keydown when ready starts AI. After running, arrow keys could control? Might complicate. Better: after start, AI controls; arrow keys maybe also control? Not necessary. But "Click or press a key to start" message should be displayed. On keydown, start. No arrow control. That satisfies. But maybe game should allow keyboard? Not required.

No alert/confirm/prompt. Use overlay div.

No localStorage. Score in variable.

No external requests. Use system fonts.

No horizontal scrollbar. Use CSS.

Let's write code carefully.

Canvas scaling: canvas width=960 height=600. CSS width: 100%; height: auto; aspect-ratio? If CSS width 100% and height auto with intrinsic ratio? Canvas has width/height attributes, CSS height auto may preserve ratio? Yes. But in flex container, height maybe not. Better: #game { position: absolute; inset: 0; width: 100%; height: 100%; } and container aspect-ratio 8/5. But on small screens, width min(100%, 960px); aspect-ratio: 8/5; canvas absolute fill. That works.

#app { position: relative; width: min(100%, 960px); aspect-ratio: 8 / 5; }
canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
@media (max-width: 480px) { #app { aspect-ratio: 4/3? } } Actually 960x600 is 8/5=1.6. On 375x667, aspect 4/3 maybe. But to avoid distortion, use aspect-ratio: 8/5 and width 100%, height auto. At 375, height = 234px, too small. Better use width 100%, height auto? The viewport 375x800, canvas would be small. Maybe use aspect-ratio: 4/3? But internal 960x600. CSS aspect-ratio 8/5. At 375 width, height 234, okay but maybe small. Could set max-height? Hmm. For responsive, use width: 100%; height: auto; aspect-ratio: 8/5; That yields small height on mobile, but okay. Or use aspect-ratio: 4/3 for small screens. But internal ratio 8/5. Could just set #app { width: min(100%, 960px); aspect-ratio: 8/5; } On 375, height 234px, might be too small but adapt. Maybe set aspect-ratio: 4/3 on small screens and scale canvas? That distorts. Better internal resolution could be 600x450? But 1280x800 wants maybe 960x600. Mobile maybe 375x667, 4:3 = 500x375. Not critical? Requirement: adapt gracefully down to 375px wide. No horizontal scrollbar. Small height okay? Probably should not be too tiny. We can use CSS width: 100%; height: auto; aspect-ratio: 8/5; and on small screens aspect-ratio: 4/3; but internal canvas 960x600 will stretch? CSS aspect-ratio with canvas absolute fill will stretch? If we set canvas width/height 100%, it stretches to container. That could distort but maybe okay? Better set canvas style width/height 100% and container aspect-ratio, it will stretch. Distortion not ideal. Could use canvas internal resolution 800x500? Hmm.

Simpler: Use canvas internal 800x500 (ratio 8/5? 800/500=1.6). CSS width min(100%, 800px), aspect-ratio 8/5. On mobile width 100%, aspect-ratio 8/5. Height ~0.625*width. At 375, height 234. Still small but okay. Or use 640x400? No.

Maybe use responsive canvas with backing store 960x600 and CSS width 100%, height auto. HTML: <canvas id="game" width="960" height="600"></canvas>. CSS: #game { display:block; width:100%; height:auto; } #app { width: min(100%, 960px); margin: 0 auto; } This preserves aspect ratio from attributes. On mobile width 100% -> height auto = width*600/960 = 0.625w, at 375 = 234px. That's small. But maybe okay? To adapt gracefully, maybe set #app { width: min(100%, 960px); } and canvas width 100%. On 375 height 234, not terrible but small. Could increase internal resolution? Not needed.

Maybe use CSS aspect-ratio and width 100%, height auto. Fine.

HUD: absolute top, but if canvas is in app, HUD inside app. Overlay inside app.

Let's write HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Steam Snake Express</title>
<style>
  html, body { margin:0; padding:0; height:100%; }
  body { background:#0b1020; color:#e8eefc; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; display:flex; align-items:center; justify-content:center; min-height:100vh; overflow-x:hidden; }
  #app { position:relative; width:min(100%, 960px); }
  #game { display:block; width:100%; height:auto; background:#0e1526; }
  #hud { position:absolute; top:10px; left:12px; right:12px; display:flex; justify-content:space-between; pointer-events:none; font-size:14px; text-shadow:0 2px 6px rgba(0,0,0,.8); z-index:5; }
  #overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; background:rgba(6,10,20,.78); text-align:center; padding:20px; box-sizing:border-box; z-index:10; cursor:pointer; }
  #overlay.hidden { display:none; }
  h1 { margin:0; font-size: clamp(24px, 4vw, 44px); letter-spacing:2px; }
  p { margin:0; font-size: clamp(14px, 2vw, 20px); opacity:.9; }
  .hint { font-size: clamp(12px, 1.6vw, 16px); opacity:.7; }
</style>
</head>
<body>
<div id="app">
  <canvas id="game" width="960" height="600"></canvas>
  <div id="hud">...</div>
  <div id="overlay">...</div>
</div>
<script>...</script>
</body>
</html>

HUD: <div id="hud"><span id="score">Score: 0</span><span id="best">...</span></div> No best? Just score. Could show length. Use score.

Overlay: <div id="overlay"><h1>Steam Snake Express</h1><p id="overlayText">Click or press a key to start</p><p class="hint">Watch the little train pick up passengers.</p></div>

JS:
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');
const overlay = document.getElementById('overlay');
const overlayText = document.getElementById('overlayText');
const scoreEl = document.getElementById('score');

let score = 0;
let state = 'ready'; // ready, running, gameover
let lastTime = 0;
let acc = 0;
const STEP_MS = 90;
let snake, dir, pendingDir, passengers, score, gameOver;

function resetGame() {
  snake = [
    {x:7,y:10}, // tail? Wait we want head at end. Let's define segments[0]=tail, segments[last]=head.
    {x:6,y:10},
    {x:5,y:10},
    {x:4,y:10} // head? Actually if head at (4,10) and moving down, tail behind? Hmm.
  ];
}

Let's decide representation clearly.

Use array `snake` where last element is head, first is tail. Direction vector `dir` for head movement. Start: head at {x:8, y:10}. To have length 4, tail behind in opposite direction? If moving down (0,1), then previous segment should be above head? Actually if moving down, head moves down, tail follows behind up. So segments from head backwards: head (8,10), previous (8,9), previous (8,8), previous (8,7). Array with head at end means:
snake[0] = {x:8,y:7} (tail)
snake[1] = {x:8,y:8}
snake[2] = {x:8,y:9}
snake[3] = {x:8,y:10} (head)
So array index 0 tail, last head. Direction down (0,1). Good.

When moving, newHead = head + dir. For not eating, remove tail, push newHead. For eating, push newHead (no pop) to grow. But if push newHead, old head becomes not head? Actually array last becomes newHead, old head becomes second last, good. The tail stays, so length increases. The train: locomotive at newHead, old head is now first wagon? But array order tail->head, so newHead last. Drawing from head backwards: iterate from last to first, draw locomotive at last, wagons at previous. Good.

Self collision: check newHead against snake except tail if not eating. If eating, check against all? Simpler: if eating, check against all segments; else check against all except last (tail). But we can just check against snake (before modification) except tail if not eating? Standard: let willEat = passengers.some(p=>p.x===newX && p.y===newY); if (!willEat && snake.some(s=>s.x===newX && s.y===newY && s!==snake[s.length-1]?)) Actually snake last is head, tail is first. Exclude tail if not eating? Standard: check new head against snake excluding last segment (tail) because tail moves. But here array head at last, tail at first. If not eating, tail will move, so exclude snake[0]. If eating, don't move tail, so include all. Simpler: check against snake, but if not eating, ignore snake[0]. Let's implement:
function willEat(head) { return passengers.some(...) }
if (willEat) { if (snake.some(s=>s.x===newX && s.y===newY)) return gameOver; }
else { if (snake.some((s,i)=> i!==0 && s.x===newX && s.y===newY)) return gameOver; } // exclude tail at index 0? But if eating false, tail moves, so exclude snake[0]. Good.

But after eating, we push newHead without pop, so tail stays; self collision should check all segments. Good.

Bounds: x 0-47, y 0-29.

Passengers: array of {x,y}. Initially maybe [ {x:24,y:1}, {x:32,y:1}, {x:40,y:1} ]. Snake at x=8,y=10. AI will target nearest.

AI update:
function getTarget() {
  // nearest passenger not eaten (eaten removed)
  let best = null; let bestDist = Infinity;
  for (let p of passengers) {
    let d = (p.x - head.x)*(p.x-head.x) + (p.y - head.y)*(p.y-head.y);
    if (d < bestDist) { bestDist = d; best = p; }
  }
  return best;
}
function aiNext() {
  let head = snake[snake.length-1];
  let options = [];
  const dirs = [ {x:1,y:0}, {x:-1,y:0}, {x:0,y:1}, {x:0,y:-1} ];
  let current = dir || {x:0,y:1};
  for (let d of dirs) {
    if (d.x === -current.x && d.y === -current.y) continue; // no reverse
    let nx = head.x + d.x;
    let ny = head.y + d.y;
    if (nx < 0 || nx >= COLS || ny < 0 || ny >= ROWS) continue;
    // check collision
    let willEat = passengers.some(p=>p.x===nx && p.y===ny);
    let valid = true;
    if (willEat) {
      if (snake.some(s=>s.x===nx && s.y===ny)) valid = false;
    } else {
      if (snake.some((s,i)=> i!==0 && s.x===nx && s.y===ny)) valid = false;
    }
    if (!valid) continue;
    let dist = (nx-head.x)*(nx-head.x) + (ny-head.y)*(ny-head.y); // distance to target? Actually to target
    let target = getTarget();
    let tdist = 0;
    if (target) tdist = (nx-target.x)*(nx-target.x) + (ny-target.y)*(ny-target.y);
    options.push({d, score: tdist + (d.x===current.x&&d.y===current.y?0:10), nx, ny});
  }
  if (options.length == 0) return false;
  options.sort((a,b)=>a.score-b.score);
  dir = options[0].d;
  return true;
}

But we need set direction and move. Since AI, we can set dir directly. For manual not needed.

Update function:
function update(dt) {
  if (state !== 'running') return;
  acc += dt;
  if (acc >= STEP_MS) {
    acc = 0;
    // AI choose direction
    let head = snake[snake.length-1];
    let target = getTarget();
    let next = chooseDirection(head, dir, target);
    if (!next) { gameOver = true; state='gameover'; return; }
    dir = next.d;
    let newX = head.x + dir.x;
    let newY = head.y + dir.y;
    let willEat = passengers.some(p=>p.x===newX && p.y===newY);
    // collision check
    if (newX<0||newX>=COLS||newY<0||newY>=ROWS) { gameOver=true; state='gameover'; return; }
    if (willEat) {
      if (snake.some(s=>s.x===newX && s.y===newY)) { gameOver=true; state='gameover'; return; }
    } else {
      if (snake.some((s,i)=> i!==0 && s.x===newX && s.y===newY)) { gameOver=true; state='gameover'; return; }
    }
    let newHead = {x:newX, y:newY};
    snake.push(newHead);
    if (willEat) {
      // remove passenger
      let idx = passengers.findIndex(p=>p.x===newX && p.y===newY);
      if (idx>=0) passengers.splice(idx,1);
      score++;
      scoreEl.textContent = 'Score: ' + score;
      // spawn new passenger
      let nx = 2 + Math.floor(Math.random()* (COLS-6));
      let ny = 1; // platform row? Wait if eating at y=1, new passenger on platform.
      // avoid spawning on snake? maybe random
      passengers.push({x:nx, y:ny});
      // don't pop tail -> grew
    } else {
      snake.shift(); // remove tail
    }
  }
}

Wait: if eating, we push newHead and don't shift, so length increases. But we also need remove passenger. Good.

But if we spawn new passenger at y=1, could spawn ahead. Good.

Initial snake: tail->head:
snake = [
 {x:8,y:7},
 {x:8,y:8},
 {x:8,y:9},
 {x:8,y:10}
];
dir = {x:0,y:1}; // moving down
Length 4.

Head at last, moving down. Target passengers at y=1, so AI will move up. First update: choose direction up (0,-1). newHead = (8,9). But snake has segment at (8,9) as previous! That would collide because head moving into its own body? Wait start: head (8,10), previous (8,9). Moving up means newHead (8,9) which is previous segment. That's invalid. Because snake is vertical with head at bottom, moving up would reverse? Actually direction down means head moving down, tail behind up. If we want AI to go to platform at y=1, it should move up, which is reverse of current direction? Current dir down (0,1), moving up (0,-1) is reverse, not allowed. So initial direction should be away from platform, e.g., down (0,1) or right. Let's set dir = {x:1,y:0} moving right, tail behind left. Snake: head (8,10), previous (7,10), previous (6,10), previous (5,10). Array tail->head:
snake[0]={x:5,y:10} tail
snake[1]={x:6,y:10}
snake[2]={x:7,y:10}
snake[3]={x:8,y:10} head
dir={x:1,y:0}. Good. AI can move up to platform.

Passengers at y=1, x maybe 20,28,36. Snake will move right then up? AI chooses target nearest. Fine.

Platform row: let's set platform y = 2? If snake starts y=10, passengers at y=2. Draw platform at row 2? Actually grid row 2 y=40. Let's set PASSENGER_Y = 2. Platform drawn at y=2. Snake will go up to y=2.

Let's set COLS=48, ROWS=30, CELL=20. Platform row = 2 (y=40). Passengers at y=2.

Draw:
- Background: fill #0e1526.
- Grid lines: strokeStyle rgba(255,255,255,0.05), lines every cell.
- Rails? Maybe draw horizontal rail lines at top/bottom of track? Since top-down, just grid. Add platform: fillStyle #3a4a6b; fillRect(0, 2*CELL, COLS*CELL, CELL*2?) Actually platform at row 2, height maybe 2 cells? Draw rect from x=0? Better: fillStyle #2b3a55; fillRect(0, 2*CELL, COLS*CELL, CELL*2); Then lighter edge. But snake on platform? Hmm.
- Draw tracks: horizontal lines at y=1*CELL and y=3*CELL? Not necessary.
- Draw passengers: for each, circle head + body. Color maybe #ffd166. Draw at (x*CELL+10, y*CELL+10).
- Draw snake: iterate from head backwards. Need locomotive at head. Let's create colors for wagons. For i from snake.length-1 down to 0:
  let seg = snake[i];
  let isHead = (i === snake.length-1);
  let color = isHead ? '#4cc9f0' : wagonColor(i, snake.length);
  drawTrainSegment(seg.x*CELL+2, seg.y*CELL+2, CELL-4, isHead, color, i);
- Wagon color: cycle through palette ['#ff6b6b','#feca57','#48dbfb','#1dd1a1','#f368e0','#ff9f43']. Use index maybe (i % palette.length) or based on passenger count? Colorful wagons. For head locomotive maybe '#2d3436' with front light.

Draw train segment:
- body: roundRect? Use ctx.roundRect if available? Chrome supports. To be safe, use fillRect and arcs. roundRect is supported in modern Chrome. Could use ctx.beginPath(); ctx.roundRect(x,y,w,h,radius) okay. But for safety, fillRect.
- Locomotive: draw bigger: width CELL+4, height CELL+4? Head at grid cell. Draw rect with color, darker stripe, funnel, wheels. For simplicity: draw wagon body rounded rect, wheels circles at corners, head has extra front cap and chimney.
- Wagons: colorful rect, stripe, wheels.

Let's implement helper drawTrainSegment(x, y, w, h, color, isHead, index):
ctx.save();
ctx.fillStyle = color;
ctx.fillRect(x, y, w, h);
ctx.fillStyle = 'rgba(255,255,255,0.35)';
ctx.fillRect(x+4, y+4, w-8, 6);
if (isHead) {
  // locomotive details
  ctx.fillStyle = '#dfe6f3';
  ctx.fillRect(x+w-6, y+2, 4, h-4); // cab?
  ctx.fillStyle = '#2d3436';
  ctx.fillRect(x+2, y+2, w-4, 4); // boiler?
  ctx.fillStyle = '#ff4757';
  ctx.beginPath(); ctx.arc(x+w-2, y+h-6, 3, 0, Math.PI*2); ctx.fill(); // light
  // funnel
  ctx.fillStyle = '#747d8c';
  ctx.fillRect(x+w/2-3, y-4, 6, 6);
} else {
  // wagon details
  ctx.fillStyle = 'rgba(0,0,0,0.25)';
  ctx.fillRect(x+2, y+2, w-4, h-4);
}
// wheels
ctx.fillStyle = '#1b1e28';
ctx.beginPath(); ctx.arc(x+6, y+h-6, 4, 0, Math.PI*2); ctx.fill();
ctx.beginPath(); ctx.arc(x+w-6, y+h-6, 4, 0, Math.PI*2); ctx.fill();
ctx.restore();

But for head, wheels maybe at bottom. Fine.

Draw locomotive color: '#3a86ff'? Wagons cycle.

Maybe draw order: from head to tail. For head, draw locomotive. For previous, draw wagon. The tail may be behind.

Passengers: draw at platform. Maybe if on same row.

Game loop:
function loop(time) {
  let dt = Math.min(0.05, (time - lastTime) / 1000 || 0);
  lastTime = time;
  update(dt);
  draw();
  requestAnimationFrame(loop);
}

Start:
function start() {
  if (state === 'ready') {
    state = 'running';
    overlay.classList.add('hidden');
  } else if (state === 'gameover') {
    resetGame();
    state = 'running';
    score = 0; scoreEl.textContent = 'Score: 0';
    overlay.classList.add('hidden');
  }
}
overlay.addEventListener('click', start);
overlay.addEventListener('keydown', (e) => { if (e.key.length === 1 || ['ArrowUp','ArrowDown','ArrowLeft','ArrowRight','Space'].includes(e.key)) start(); });
But keydown on overlay only fires if overlay focused? Not necessarily. Better document keydown when state ready. But overlay click. Since iframe keyboard after click, overlay may receive focus? To be safe, add document.addEventListener('keydown', e => { if (state==='ready' || state==='gameover') { e.preventDefault(); start(); } }); But preventDefault might cause issues? okay.

No alert.

Game over: overlay text maybe "Game Over — click to restart". But start message? At ready, overlayText "Click or press a key to start". On gameover, set overlayText "Game Over — click to restart". But user asked behind a "Click or press a key to start" message. At ready it is. Good.

Draw function:
function draw() {
  ctx.fillStyle = '#0e1526';
  ctx.fillRect(0,0,960,600);
  // grid
  ctx.strokeStyle = 'rgba(255,255,255,0.06)';
  ctx.lineWidth = 1;
  for (let x=0; x<=COLS; x++) { ctx.beginPath(); ctx.moveTo(x*CELL,0); ctx.lineTo(x*CELL,ROWS*CELL); ctx.stroke(); }
  for (let y=0; y<=ROWS; y++) { ctx.beginPath(); ctx.moveTo(0,y*CELL); ctx.lineTo(COLS*CELL,y*CELL); ctx.stroke(); }
  // platform
  ctx.fillStyle = '#1f2b44';
  ctx.fillRect(0, PASSENGER_Y*CELL, COLS*CELL, CELL*2);
  ctx.fillStyle = '#2c3e5f';
  ctx.fillRect(0, PASSENGER_Y*CELL, COLS*CELL, CELL);
  ctx.fillStyle = '#3d547f';
  ctx.fillRect(0, (PASSENGER_Y+1)*CELL, COLS*CELL, CELL);
  // maybe platform edge
  // passengers
  for (let p of passengers) { drawPassenger(p.x*CELL+10, p.y*CELL+10); }
  // snake
  for (let i=snake.length-1; i>=0; i--) {
    let seg = snake[i];
    let isHead = (i === snake.length-1);
    let color = isHead ? '#3a86ff' : wagonColor(i, snake.length);
    drawTrainSegment(seg.x*CELL+2, seg.y*CELL+2, CELL-4, CELL-4, color, isHead);
  }
  // HUD? score drawn in DOM.
}

Wait drawTrainSegment parameters: x,y,w,h. For wagon, w=CELL-4=16, h=16? Actually grid cell 20, wagon should be smaller. Let's set wagon w=14, h=14, offset. Locomotive w=18, h=18. Simpler: drawTrainSegment(x,y,w,h,color,isHead). For each seg, x = seg.x*CELL + (CELL - w)/2, y = seg.y*CELL + (CELL - h)/2.

Wagon color: palette. Head color '#3a86ff'. For wagons, use palette[i % palette.length]. But i is array index from tail? For colorful, maybe based on length? Use i % len.

Draw passenger: circle + body. ctx.fillStyle '#ffd166'; circle at (x+5, y+5, 4); body fillRect(x, y+8, 10, 6). Maybe add little hat? okay.

Game over draw: if state gameover, maybe red flash. Not necessary.

AI chooseDirection:
function chooseDirection(head, current, target) {
  const dirs = [ {x:1,y:0}, {x:-1,y:0}, {x:0,y:1}, {x:0,y:-1} ];
  let best = null; let bestScore = Infinity;
  for (let d of dirs) {
    if (d.x === -current.x && d.y === -current.y) continue;
    let nx = head.x + d.x;
    let ny = head.y + d.y;
    if (nx < 0 || nx >= COLS || ny < 0 || ny >= ROWS) continue;
    let willEat = passengers.some(p=>p.x===nx && p.y===ny);
    let valid = true;
    if (willEat) {
      if (snake.some(s=>s.x===nx && s.y===ny)) valid = false;
    } else {
      if (snake.some((s,i)=> i!==0 && s.x===nx && s.y===ny)) valid = false;
    }
    if (!valid) continue;
    let dist = 0;
    if (target) dist = (nx-target.x)*(nx-target.x) + (ny-target.y)*(ny-target.y);
    let score = dist + (d.x===current.x && d.y===current.y ? 0 : 8);
    if (score < bestScore) { bestScore = score; best = {d, nx, ny}; }
  }
  if (!best) return null;
  return best;
}

In update, after choosing, set dir = best.d; newHead = {x: best.nx, y: best.ny}; Then process.

Actually chooseDirection returns best with d and nx,ny. Then we can set dir = best.d.

Update:
function update(dt) {
  if (state !== 'running') return;
  acc += dt;
  if (acc < STEP_MS) return;
  acc = 0;
  let head = snake[snake.length-1];
  let target = getTarget();
  let next = chooseDirection(head, dir, target);
  if (!next) { gameOver = true; state = 'gameover'; overlayText.textContent = 'Game Over — click to restart'; return; }
  dir = next.d;
  let newX = next.nx, newY = next.ny;
  let willEat = passengers.some(p=>p.x===newX && p.y===newY);
  // collision check (already done but do again)
  if (newX<0||newX>=COLS||newY<0||newY>=ROWS) { gameOver=true; state='gameover'; return; }
  if (willEat) {
    if (snake.some(s=>s.x===newX && s.y===newY)) { gameOver=true; state='gameover'; return; }
  } else {
    if (snake.some((s,i)=> i!==0 && s.x===newX && s.y===newY)) { gameOver=true; state='gameover'; return; }
  }
  let newHead = {x:newX, y:newY};
  snake.push(newHead);
  if (willEat) {
    let idx = passengers.findIndex(p=>p.x===newX && p.y===newY);
    if (idx>=0) passengers.splice(idx,1);
    score++;
    scoreEl.textContent = 'Score: ' + score;
    // spawn new passenger
    let nx = 2 + Math.floor(Math.random()*(COLS-6));
    let ny = 2;
    // avoid spawning on snake? simple
    passengers.push({x:nx, y:ny});
  } else {
    snake.shift();
  }
}

Wait: if willEat, we push newHead and don't shift, so length grows. But we also removed passenger and spawned new. Good.

But if willEat false, we push newHead then shift, which removes tail. Correct.

Self collision check: snake array head at last, tail at first. If not eating, we will shift tail, so exclude tail (index 0). Our condition i!==0 excludes tail. Good.

If eating, we won't shift, so check all segments. Condition willEat checks all. Good.

But in chooseDirection, for willEat we check all, for not willEat we check excluding tail. Good.

Now initial snake: tail->head as above. Length 4. dir={x:1,y:0}. target nearest passenger at (20,2). AI will choose right/up? Head at (8,10). Current dir right. Options: right (9,10) valid? Check snake excluding tail: snake has (8,10) head, (7,10), (6,10), (5,10). newHead (9,10) not in body, valid. Up (8,9) valid? Not in body? snake has (8,10) head, (7,10)... no (8,9). Valid. Right has dist to target (20,2): (9-20)^2+(10-2)^2=121+64=185. Up: (8-20)^2+(9-2)^2=144+49=193. Right slightly better. So AI moves right. Eventually up. Good.

Passengers spawn at y=2, x=20,28,36. Snake will pick.

Game over: if no options due to self collision. Maybe rare.

Draw train: need to handle length. When length grows, number of wagons increases. Good.

Let's implement drawTrainSegment:
function drawTrainSegment(x, y, w, h, color, isHead) {
  ctx.save();
  // shadow
  ctx.fillStyle = 'rgba(0,0,0,0.35)';
  ctx.fillRect(x+2, y+2, w, h);
  ctx.fillStyle = color;
  ctx.fillRect(x, y, w, h);
  // stripe
  ctx.fillStyle = 'rgba(255,255,255,0.35)';
  ctx.fillRect(x+3, y+3, w-6, 5);
  if (isHead) {
    // boiler
    ctx.fillStyle = '#1b2a4a';
    ctx.fillRect(x+2, y+2, w-4, h-4);
    // cab
    ctx.fillStyle = '#3a86ff';
    ctx.fillRect(x+w-8, y+2, 6, h-2);
    // funnel
    ctx.fillStyle = '#747d8c';
    ctx.fillRect(x+w/2-3, y-5, 6, 6);
    // headlight
    ctx.fillStyle = '#ff4757';
    ctx.beginPath(); ctx.arc(x+w-3, y+h/2, 2, 0, Math.PI*2); ctx.fill();
  } else {
    // wagon details
    ctx.fillStyle = 'rgba(0,0,0,0.2)';
    ctx.fillRect(x+2, y+2, w-4, h-4);
  }
  // wheels
  ctx.fillStyle = '#0f1420';
  ctx.beginPath(); ctx.arc(x+5, y+h-6, 3.5, 0, Math.PI*2); ctx.fill();
  ctx.beginPath(); ctx.arc(x+w-5, y+h-6, 3.5, 0, Math.PI*2); ctx.fill();
  ctx.restore();
}

But for head, wheels at bottom, okay. For wagon, maybe wheels at bottom. Good.

Wagon color: function getWagonColor(i, len) { const palette = ['#ff6b6b','#feca57','#48dbfb','#1dd1a1','#f368e0','#ff9f43']; return palette[i % palette.length]; } But i from tail? When drawing from head backwards, i is array index. For head isHead true. For wagons, index maybe. Colorful.

Draw passenger:
function drawPassenger(x, y) {
  ctx.save();
  // body
  ctx.fillStyle = '#ffd166';
  ctx.beginPath(); ctx.arc(x, y, 4, 0, Math.PI*2); ctx.fill();
  ctx.fillStyle = '#2d3436';
  ctx.fillRect(x-5, y+4, 10, 7);
  ctx.fillStyle = '#e17055';
  ctx.fillRect(x-5, y+4, 10, 2);
  ctx.restore();
}

Draw text? HUD in DOM.

Overlay styling: #overlay.hidden { display:none; } But if display none, okay.

Start message: overlayText.textContent = 'Click or press a key to start';

Keydown: document.addEventListener('keydown', (e) => { if (state === 'ready') { e.preventDefault(); start(); } }); But if state gameover, maybe start. Use if (state === 'ready' || state === 'gameover') { e.preventDefault(); start(); }.

Click overlay: overlay.addEventListener('click', start); But if gameover, overlay visible? We can set overlay visible on gameover with different text. Maybe simpler: always overlay visible at start; on gameover, change text and keep visible. On start, hide. On gameover, show. Let's implement:
function start() {
  if (state === 'ready') {
    state = 'running';
    overlay.classList.add('hidden');
  } else if (state === 'gameover') {
    resetGame();
    state = 'running';
    score = 0; scoreEl.textContent = 'Score: 0';
    overlay.classList.add('hidden');
  }
}
function showGameOver() {
  state = 'gameover';
  overlayText.textContent = 'Game Over — click to restart';
  overlay.classList.remove('hidden');
}
In update if gameOver: showGameOver().

Overlay click: start(). If state gameover, start resets.

Overlay text initially: 'Click or press a key to start'.

HUD: <div id="hud"><div>Score: <span id="score">0</span></div><div id="length">Train: 4</div></div> Update length in JS.

Need no localStorage.

Now, check console errors. Use Math.random okay. Use requestAnimationFrame okay. Use ctx.roundRect? I didn't use roundRect. Good. Use ctx.arc. Good.

Canvas scaling: CSS #game { width:100%; height:auto; display:block; } But in #app with width min(100%,960px). If body flex center, #app width min(100%,960px) but height auto from canvas? #app needs height. Better set #app { position:relative; width:min(100%,960px); } canvas { display:block; width:100%; height:auto; } But #app height determined by canvas? If canvas is in normal flow, yes. But we also absolute overlay? Overlay absolute inset 0 requires #app position relative and height defined. If canvas height auto, #app height is canvas height? Yes, canvas is replaced element with intrinsic ratio, height auto computes. Should work. But to be safe, set #app { position:relative; width:min(100%,960px); aspect-ratio: 8 / 5; } and canvas absolute. But aspect-ratio with width only? Need height? aspect-ratio can set height from width. Let's do:
#app { position: relative; width: min(100%, 960px); aspect-ratio: 8 / 5; }
#game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background:#0e1526; }
This ensures app height. Canvas internal 960x600, CSS stretches to container. On desktop width 960 height 600, no distortion. On mobile width 375, height = 234px, ratio same, no distortion. Good.

HUD absolute top inside app. Overlay absolute inset 0.

Media query for small screens: HUD font smaller, overlay h1 smaller. Use clamp.

Body overflow-x: hidden.

Now, screenshot 3s after load: overlay visible, game drawn behind. Good.

Need "Something meaningful must be visible on first paint": train and platform visible. Overlay semi-transparent. Good.

Need no horizontal scrollbar: body overflow-x hidden, #app width min(100%,960px). Good.

Now, final answer must be exactly one fenced code block containing complete file. No text before or after. So final should be:
```html
<!DOCTYPE html>
...
</html>
```
No extra text.

Let's write full code carefully.

Potential issues:
- The overlay covers screen with background rgba, so screenshot shows overlay text. But game behind. Good.
- The canvas context: const ctx = canvas.getContext('2d');
- requestAnimationFrame loop. lastTime initial 0. In loop, time from rAF. dt = (time - lastTime) / 1000; lastTime = time; if dt > 0.05 dt=0.05. Good.

Let's write JS in one script.

Code:

const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');
const overlay = document.getElementById('overlay');
const overlayText = document.getElementById('overlayText');
const scoreEl = document.getElementById('score');
const lengthEl = document.getElementById('length');

const COLS = 48;
const ROWS = 30;
const CELL = 20;
const PASSENGER_Y = 2;
const STEP_MS = 90;

let state = 'ready';
let snake, dir, passengers, score, gameOver;
let acc = 0;
let lastTime = 0;

function resetGame() {
  snake = [
    {x:5, y:10},
    {x:6, y:10},
    {x:7, y:10},
    {x:8, y:10}
  ];
  dir = {x:1, y:0};
  passengers = [
    {x:20, y:PASSENGER_Y},
    {x:28, y:PASSENGER_Y},
    {x:36, y:PASSENGER_Y}
  ];
  score = 0;
  gameOver = false;
  acc = 0;
  scoreEl.textContent = 'Score: 0';
  lengthEl.textContent = 'Train: ' + snake.length;
}

function getTarget() {
  let head = snake[snake.length-1];
  let best = null;
  let bestDist = Infinity;
  for (let p of passengers) {
    let dx = p.x - head.x;
    let dy = p.y - head.y;
    let d = dx*dx + dy*dy;
    if (d < bestDist) { bestDist = d; best = p; }
  }
  return best;
}

function chooseDirection(head, current, target) {
  const dirs = [ {x:1,y:0}, {x:-1,y:0}, {x:0,y:1}, {x:0,y:-1} ];
  let best = null;
  let bestScore = Infinity;
  for (let d of dirs) {
    if (d.x === -current.x && d.y === -current.y) continue;
    let nx = head.x + d.x;
    let ny = head.y + d.y;
    if (nx < 0 || nx >= COLS || ny < 0 || ny >= ROWS) continue;
    let willEat = passengers.some(p=>p.x===nx && p.y===ny);
    let valid = true;
    if (willEat) {
      if (snake.some(s=>s.x===nx && s.y===ny)) valid = false;
    } else {
      if (snake.some((s,i)=> i!==0 && s.x===nx && s.y===ny)) valid = false;
    }
    if (!valid) continue;
    let dist = 0;
    if (target) {
      let dx = nx - target.x;
      let dy = ny - target.y;
      dist = dx*dx + dy*dy;
    }
    let score = dist + ((d.x === current.x && d.y === current.y) ? 0 : 8);
    if (score < bestScore) {
      bestScore = score;
      best = { d, nx, ny };
    }
  }
  return best;
}

function update(dt) {
  if (state !== 'running') return;
  acc += dt;
  if (acc < STEP_MS) return;
  acc = 0;
  let head = snake[snake.length-1];
  let target = getTarget();
  let next = chooseDirection(head, dir, target);
  if (!next) {
    gameOver = true;
    state = 'gameover';
    overlayText.textContent = 'Game Over — click to restart';
    overlay.classList.remove('hidden');
    return;
  }
  dir = next.d;
  let newX = next.nx;
  let newY = next.ny;
  let willEat = passengers.some(p=>p.x===newX && p.y===newY);
  if (newX<0 || newX>=COLS || newY<0 || newY>=ROWS) {
    gameOver = true;
    state = 'gameover';
    overlayText.textContent = 'Game Over — click to restart';
    overlay.classList.remove('hidden');
    return;
  }
  if (willEat) {
    if (snake.some(s=>s.x===newX && s.y===newY)) {
      gameOver = true;
      state = 'gameover';
      overlayText.textContent = 'Game Over — click to restart';
      overlay.classList.remove('hidden');
      return;
    }
  } else {
    if (snake.some((s,i)=> i!==0 && s.x===newX && s.y===newY)) {
      gameOver = true;
      state = 'gameover';
      overlayText.textContent = 'Game Over — click to restart';
      overlay.classList.remove('hidden');
      return;
    }
  }
  let newHead = {x:newX, y:newY};
  snake.push(newHead);
  if (willEat) {
    let idx = passengers.findIndex(p=>p.x===newX && p.y===newY);
    if (idx >= 0) passengers.splice(idx, 1);
    score++;
    scoreEl.textContent = 'Score: ' + score;
    let nx = 2 + Math.floor(Math.random() * (COLS - 6));
    let ny = PASSENGER_Y;
    passengers.push({x:nx, y:ny});
  } else {
    snake.shift();
  }
  lengthEl.textContent = 'Train: ' + snake.length;
}

function drawPassenger(x, y) {
  ctx.save();
  ctx.fillStyle = '#ffd166';
  ctx.beginPath();
  ctx.arc(x, y, 4, 0, Math.PI*2);
  ctx.fill();
  ctx.fillStyle = '#2d3436';
  ctx.fillRect(x-5, y+4, 10, 7);
  ctx.fillStyle = '#e17055';
  ctx.fillRect(x-5, y+4, 10, 2);
  ctx.restore();
}

function drawTrainSegment(x, y, w, h, color, isHead) {
  ctx.save();
  ctx.fillStyle = 'rgba(0,0,0,0.35)';
  ctx.fillRect(x+2, y+2, w, h);
  ctx.fillStyle = color;
  ctx.fillRect(x, y, w, h);
  ctx.fillStyle = 'rgba(255,255,255,0.35)';
  ctx.fillRect(x+3, y+3, w-6, 5);
  if (isHead) {
    ctx.fillStyle = '#1b2a4a';
    ctx.fillRect(x+2, y+2, w-4, h-4);
    ctx.fillStyle = '#3a86ff';
    ctx.fillRect(x+w-8, y+2, 6, h-2);
    ctx.fillStyle = '#747d8c';
    ctx.fillRect(x+w/2-3, y-5, 6, 6);
    ctx.fillStyle = '#ff4757';
    ctx.beginPath();
    ctx.arc(x+w-3, y+h/2, 2, 0, Math.PI*2);
    ctx.fill();
  } else {
    ctx.fillStyle = 'rgba(0,0,0,0.2)';
    ctx.fillRect(x+2, y+2, w-4, h-4);
  }
  ctx.fillStyle = '#0f1420';
  ctx.beginPath();
  ctx.arc(x+5, y+h-6, 3.5, 0, Math.PI*2);
  ctx.fill();
  ctx.beginPath();
  ctx.arc(x+w-5, y+h-6, 3.5, 0, Math.PI*2);
  ctx.fill();
  ctx.restore();
}

function getWagonColor(i, len) {
  const palette = ['#ff6b6b', '#feca57', '#48dbfb', '#1dd1a1', '#f368e0', '#ff9f43'];
  return palette[i % palette.length];
}

function draw() {
  ctx.fillStyle = '#0e1526';
  ctx.fillRect(0, 0, 960, 600);
  ctx.strokeStyle = 'rgba(255,255,255,0.06)';
  ctx.lineWidth = 1;
  for (let x=0; x<=COLS; x++) {
    ctx.beginPath();
    ctx.moveTo(x*CELL, 0);
    ctx.lineTo(x*CELL, ROWS*CELL);
    ctx.stroke();
  }
  for (let y=0; y<=ROWS; y++) {
    ctx.beginPath();
    ctx.moveTo(0, y*CELL);
    ctx.lineTo(COLS*CELL, y*CELL);
    ctx.stroke();
  }
  // platform
  ctx.fillStyle = '#1f2b44';
  ctx.fillRect(0, PASSENGER_Y*CELL, COLS*CELL, CELL*2);
  ctx.fillStyle = '#2c3e5f';
  ctx.fillRect(0, PASSENGER_Y*CELL, COLS*CELL, CELL);
  ctx.fillStyle = '#3d547f';
  ctx.fillRect(0, (PASSENGER_Y+1)*CELL, COLS*CELL, CELL);
  // passengers
  for (let p of passengers) {
    drawPassenger(p.x*CELL+10, p.y*CELL+10);
  }
  // train
  for (let i=snake.length-1; i>=0; i--) {
    let seg = snake[i];
    let isHead = (i === snake.length-1);
    let color = isHead ? '#3a86ff' : getWagonColor(i, snake.length);
    let w = isHead ? 18 : 14;
    let h = isHead ? 18 : 14;
    let x = seg.x*CELL + (CELL - w) / 2;
    let y = seg.y*CELL + (CELL - h) / 2;
    drawTrainSegment(x, y, w, h, color, isHead);
  }
}

function loop(time) {
  let dt = (time - lastTime) / 1000;
  lastTime = time;
  if (dt > 0.05) dt = 0.05;
  update(dt);
  draw();
  requestAnimationFrame(loop);
}

function start() {
  if (state === 'ready') {
    state = 'running';
    overlay.classList.add('hidden');
  } else if (state === 'gameover') {
    resetGame();
    state = 'running';
    overlay.classList.add('hidden');
  }
}

resetGame();
overlayText.textContent = 'Click or press a key to start';
overlay.addEventListener('click', start);
document.addEventListener('keydown', (e) => {
  if (state === 'ready' || state === 'gameover') {
    e.preventDefault();
    start();
  }
});
requestAnimationFrame(loop);

Check: In resetGame, snake array: index 0 tail {x:5,y:10}, index1 {x:6,10}, index2 {x:7,10}, index3 head {x:8,10}. Direction right. Good. Length 4. Train drawing from head i=3 to tail i=0. Head at (8,10) draws locomotive. Wagons at (7,10), (6,10), (5,10). Good.

When moving right, newHead (9,10), not eat, push newHead, shift tail -> removes index0. Snake becomes: (6,10), (7,10), (8,10) head? Wait after push: [ (6,10), (7,10), (8,10), (9,10) ]? Actually before: [ (5,10), (6,10), (7,10), (8,10) ]. Push (9,10): [ (5,10), (6,10), (7,10), (8,10), (9,10) ]. Shift removes index0 (5,10): [ (6,10), (7,10), (8,10), (9,10) ]. Head is last (9,10). Good. Tail now (6,10). Train length 4. Good.

When eating, push newHead no shift, length grows. Good.

Self collision: after eating, snake has extra segment. Fine.

Potential bug: In chooseDirection, when checking not willEat, we use i!==0 to exclude tail. But if snake length is 1? Not possible. Good.

Potential bug: The AI might choose direction that causes eating immediately? It will target. Good.

Potential bug: When game over, overlay shows. But if state gameover, update returns early, so no movement. Good.

Potential bug: The keydown listener calls e.preventDefault() for any key when ready/gameover. That might prevent scrolling. okay. But if user presses arrow keys after start, state running so no preventDefault. okay.

Potential bug: Overlay click starts. But if state gameover, overlay visible and click starts reset. Good.

Potential bug: The overlay has cursor pointer. okay.

Potential bug: No text before/after code block. Final must be only code block.

Let's consider viewport 1280x800. Body min-height 100vh, flex center. #app width min(100%,960px) = 960. aspect-ratio 8/5 -> height 600. Body centers. Canvas absolute fill. HUD absolute top. Overlay absolute inset 0. Good.

At 375px wide, body flex center, #app width 100% = 375, aspect-ratio 8/5 -> height 234. Canvas internal 960x600 stretched? Actually CSS absolute inset 0, width/height 100%, so it stretches to 375x234. Aspect ratio maintained? Container aspect-ratio 8/5, width 375, height 234.375. Canvas stretches, but content may distort slightly. Acceptable? Could be okay. To avoid distortion, we could set canvas width/height 100% and container aspect-ratio, but stretching. If we want no distortion, set canvas style width/height auto? But absolute inset 0 forces. Better: #app { position:relative; width:min(100%,960px); aspect-ratio:8/5; } #game { position:absolute; inset:0; width:100%; height:100%; } This stretches. To preserve aspect, set #app { aspect-ratio: 8/5; } and canvas { width:100%; height:auto; } but absolute? Could do #game { position:absolute; top:0; left:0; width:100%; height:100%; } stretches. To preserve, set #game { position:absolute; inset:0; width:100%; height:100%; } and accept slight stretch? At desktop no stretch. At mobile, 375x234 vs 960x600 ratio 1.6, 375/234=1.6, actually same ratio! Wait 960/600=1.6. 375/234.375=1.6. So no distortion because container ratio matches canvas ratio. Good.

At 375 width, height 234, small but okay. Maybe for small screens, set aspect-ratio: 4/3? That would distort. Keep 8/5.

No horizontal scrollbar: body overflow-x hidden. #app width min(100%,960px). Good.

Now, final code. Need ensure no external files. Inline CSS/JS. No localStorage. No alert. No confirm. No prompt. No window.open. Good.

Check console errors: In draw, ctx.fillStyle = 'rgba(255,255,255,0.06)' okay. ctx.lineWidth = 1 okay. ctx.beginPath, moveTo, lineTo, stroke. ctx.fillRect. ctx.arc. ctx.fill. ctx.save/restore. No roundRect. Good.

In drawTrainSegment, for head, ctx.fillRect(x+w-8, y+2, 6, h-2); x+w-8 might be less than x+2? w=18, x+10 to x+16? Actually x+w-8 = x+10, y+2, w=6, h=16. okay. Funnel at x+w/2-3, y-5, 6,6. y-5 may be negative, but okay. Headlight arc at x+w-3, y+h/2, r=2. okay.

Wheels: ctx.arc(x+5, y+h-6, 3.5, ...). For h=14, y+8. okay. For head h=18, y+12. okay.

Draw order: from head to tail. For tail, isHead false. Good.

Passengers: drawn before train, so train may overlap. Good.

Platform: fillRect from y=PASSENGER_Y*CELL=40, height CELL*2=40, so rows 2 and 3? Actually PASSENGER_Y=2, platform from y=40 to y=80. Passengers at y=2 (cell y=40). Snake might be on row 10 (y=200). No overlap. Platform rows 2-3. Good.

But grid rows: y=0 to 600. Platform at rows 2 and 3. Passengers at row 2. Good.

Train starts at y=10 (row 10). Moves to platform.

Score update: scoreEl.textContent = 'Score: ' + score; HUD initial: <span id="score">0</span>. lengthEl: <span id="length">Train: 4</span>. In resetGame, lengthEl.textContent = 'Train: ' + snake.length; Good.

In update after eating, lengthEl.textContent = 'Train: ' + snake.length; But if not eating, we also set? I placed at end of update, but if eating or not, it will set. However if we return early on gameover, not set. Fine.

In update, after snake.push and shift, set length. Good.

Let's write final HTML. Ensure all IDs match.

HTML:
<div id="app">
  <canvas id="game" width="960" height="600"></canvas>
  <div id="hud">
    <div>Score: <span id="score">0</span></div>
    <div id="length">Train: 4</div>
  </div>
  <div id="overlay">
    <h1>Steam Snake Express</h1>
    <p id="overlayText">Click or press a key to start</p>
    <p class="hint">Watch the little train pick up colorful passengers.</p>
  </div>
</div>

CSS:
html, body { margin:0; padding:0; height:100%; }
body { background:#0b1020; color:#e8eefc; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; display:flex; align-items:center; justify-content:center; min-height:100vh; overflow-x:hidden; }
#app { position:relative; width:min(100%, 960px); aspect-ratio: 8 / 5; }
#game { position:absolute; inset:0; width:100%; height:100%; display:block; background:#0e1526; }
#hud { position:absolute; top:10px; left:12px; right:12px; display:flex; justify-content:space-between; pointer-events:none; font-size:14px; text-shadow:0 2px 6px rgba(0,0,0,.8); z-index:5; }
#overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; background:rgba(6,10,20,.78); text-align:center; padding:20px; box-sizing:border-box; z-index:10; cursor:pointer; }
#overlay.hidden { display:none; }
h1 { margin:0; font-size: clamp(24px, 4vw, 44px); letter-spacing:2px; }
p { margin:0; font-size: clamp(14px, 2vw, 20px); opacity:.9; }
.hint { font-size: clamp(12px, 1.6vw, 16px); opacity:.7; }

Check: #hud inside #app which has aspect ratio. Good.

Media query? Not necessary.

Now final answer. Ensure code block language html. No text before or after. The final message should be exactly one fenced code block. So I'll output that.

Let's double-check all rules:
- Reply with exactly ONE fenced code block containing complete file: yes.
- No text before or after code block: final will be just code block.
- Everything inline: CSS in style, JS in script. Yes.
- No external files, images, fonts or network requests, except CDN allowed. We use no external. System fonts. Good.
- Do not use localStorage, sessionStorage, cookies, IndexedDB, alert(), confirm(), prompt() or window.open(): we don't. Good.
- Page must look right in 1280×800 viewport and adapt gracefully down to 375px wide. No horizontal scrollbar. We have overflow-x hidden, width min. Good.
- Something meaningful visible on first paint: canvas and overlay. Good.
- Games must start in self-playing demo mode (simple AI plays) behind a "Click or press a key to start" message, so game can be judged in action without playing. Yes.
- Iframe only receives keyboard events after user clicks it: if demo uses keyboard, display clear "Click or press a key to start" message. We display that. Keydown starts. Good.
- Code must run with zero errors in console of latest Chrome. Likely.

Potential console error: `aspect-ratio` is supported. `clamp` supported. `system-ui` okay. `background` okay.

Potential issue: In draw, for grid lines, ctx.strokeStyle with alpha, lineWidth. okay.

Potential issue: In drawTrainSegment, for isHead, we draw boiler after body, so boiler covers bottom? Actually body fillRect x,y,w,h. Then boiler fillRect x+2, y+2, w-4, h-4. That covers lower part, leaving top stripe? Then cab at x+w-8, y+2, 6, h-2. Might look okay.

Potential issue: For wagons, we draw shadow, body, stripe, then dark overlay, then wheels. Good.

Potential issue: The train may draw over platform? Snake not on platform. okay.

Potential issue: The AI's target might be behind, but no reverse. okay.

Potential issue: If passengers array becomes empty? We always spawn new on eat, initial 3, so never empty. Good.

Potential issue: When eating, we push newHead and don't shift, so snake grows. But we also spawn new passenger at random x. Could spawn on snake? Unlikely but possible. If it spawns on snake, AI might get stuck. To be safe, we could check not on snake and adjust. But not required? For robustness, let's add a small loop to avoid spawning on snake. In update after splice, before push:
let nx = 2 + Math.floor(Math.random() * (COLS - 6));
let ny = PASSENGER_Y;
// avoid snake
let spawnSafe = false;
for (let attempt=0; attempt<10 && !spawnSafe; attempt++) {
  nx = 2 + Math.floor(Math.random() * (COLS - 6));
  ny = PASSENGER_Y;
  if (!snake.some(s=>s.x===nx && s.y===ny)) spawnSafe = true;
}
passengers.push({x:nx, y:ny});
But if all unsafe? unlikely. Could just push. To keep code simple, maybe leave. But for zero errors, okay.

Let's update that snippet in final code. I'll include safe spawn.

Also, when game over, overlay text changes. The overlay initially has p with id overlayText. Good.

Now final code.