Made of little things.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
    <meta name="theme-color" content="#101d25" />
    <title>Rail Game</title>
  </head>
  <body>
    <main id="app">
      <div class="too-small">Needs 240 × 280 to play.<br />Enlarge this pane.</div>
      <div class="game-surface">
        <canvas id="game" tabindex="0" aria-label="Rail track. Move with A and D or arrow keys, drag, or use the on-screen arrows. Shooting is automatic."></canvas>
        <div class="hud">
          <div class="stage-info"><span class="micro">STAGE <b id="stageNumber">01 / 08</b></span><strong id="stageName">The causeway</strong></div>
          <div class="stats"><div><span class="micro">SQUAD</span><strong id="squad">12</strong></div><span class="stat-divider"></span><div><span class="micro">DAMAGE</span><strong id="damage">×1</strong></div><span class="stat-divider score-stat"></span><div class="score-stat"><span class="micro">SCORE</span><strong id="score">0000</strong></div></div>
          <div class="actions"><button id="soundButton" class="icon-button" aria-label="Enable sound" title="Enable sound">♪<span id="soundOff">╱</span></button><button id="pauseButton" class="icon-button" aria-label="Pause game" title="Pause (P or Escape)" disabled>Ⅱ</button></div>
        </div>
        <div class="route"><div class="route-track"><div id="progress"></div><i></i><i></i><i></i></div><span id="routeLabel">330 m TO WARDEN</span></div>
        <div id="powerStatus" class="power-status"></div>
        <div id="bossHud" class="boss-hud" hidden><span>WARDEN</span><div><i id="bossHealth"></i></div></div>
        <output id="toast" class="toast" aria-live="polite"></output>
        <div id="overlay" class="overlay">
          <div class="briefing">
            <div class="briefing-top"><span id="panelLabel" class="micro">STAGE 01 · 330 METERS</span><span class="live-dot" aria-hidden="true"></span></div>
            <h2 id="panelTitle">Build your squad.</h2>
            <p id="panelText">Collect soldiers. Hit the multipliers.<br />Keep moving and take down the warden.</p>
            <div id="legend" class="legend"><span><i class="cyan"></i>Recruit</span><span><i class="green"></i>Multiply</span><span><i class="coral"></i>Avoid / shoot</span></div>
            <div id="resultStats" class="result-stats" hidden></div>
            <div id="stagePicker" class="stage-picker" aria-label="Choose stage"></div>
            <button id="primaryButton" class="primary-button">Start run <span aria-hidden="true">↗</span></button>
            <button id="secondaryButton" class="secondary-button" hidden>Restart stage</button>
            <div id="saveStatus" class="save-status">Records stay in this session</div>
          </div>
        </div>
        <div class="controls"><button id="leftButton" aria-label="Move left">←</button><div class="control-hint"><span class="keyboard-hint"><kbd>A</kbd><kbd>D</kbd> or <kbd>←</kbd><kbd>→</kbd></span><span class="touch-hint">DRAG TO MOVE</span><span class="auto-fire"><i></i>AUTO FIRE</span></div><button id="rightButton" aria-label="Move right">→</button></div>
      </div>
    </main>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>