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" />
    <title>Pursuit PIT</title>
  </head>
  <body>
    <!--
      The runtime already shows the napplet's name; the only title is on the game's own title screen.
      The 3D view fills the frame; the HUD is a police dash laid over it.
    -->
    <main id="app" class="app">
      <div id="view" class="view"></div>

      <div class="hud" aria-live="off">
        <div class="readout clock"><span class="label">TIME</span><span id="clock">0:00</span></div>
        <div class="readout police"><span class="label">POLICE BEHIND</span><span id="policeGap">0 m</span></div>
        <div id="lights" class="lights" aria-hidden="true"><i></i><i></i></div>
      </div>

      <output id="callout" class="callout" aria-live="polite"></output>

      <div id="radioLine" class="radio-line" aria-live="polite" hidden>
        <span id="radioWho" class="who"></span> <span id="radioText"></span>
      </div>

      <div id="replayBanner" class="replay-banner" role="status" hidden>
        <span class="rec">● REPLAY</span><span id="slowmo" class="slowmo" hidden>SLOW MOTION</span>
        <span class="any-key">Press Enter or tap to continue</span>
      </div>

      <!-- Title screen: pick a mode. Nothing runs behind it. -->
      <section id="title" class="title-screen" aria-label="Choose a mode">
        <!-- The interstate at dusk running into the city, drawn once (title-scene.ts). -->
        <canvas id="titleScene" class="title-canvas" aria-hidden="true"></canvas>
        <div class="title-inner">
          <header class="brand">
            <p class="route">Interstate 87 · Northbound</p>
            <h1 class="logo">PURSUIT <span class="pit">PIT</span></h1>
            <div class="lightbar" aria-hidden="true"><i></i><i></i></div>
          </header>
          <div class="modes">
            <button id="modePursuit" type="button" class="mode pursuit">
              <span class="mode-key">Enter</span>
              <svg class="mode-icon" viewBox="0 0 48 48" aria-hidden="true">
                <path d="M24 4 29 15 41 16 32 24 35 36 24 30 13 36 16 24 7 16 19 15Z" />
                <circle cx="24" cy="21" r="4" class="cut" />
              </svg>
              <span class="mode-name">Pursuit</span>
              <span id="pursuitText" class="mode-text">A sedan is fleeing. PIT it off the road before it gets 700 m ahead.</span>
              <span id="titleBest" class="mode-best"></span>
            </button>
            <button id="modeGetaway" type="button" class="mode getaway">
              <span class="mode-key">G</span>
              <svg class="mode-icon" viewBox="0 0 48 48" aria-hidden="true">
                <path d="M10 30h30l-3-8c-.6-1.6-2-2.6-3.7-2.6H19c-1.5 0-2.9.8-3.6 2.1L12 27H10Z" />
                <circle cx="17" cy="32" r="3.5" class="cut" />
                <circle cx="34" cy="32" r="3.5" class="cut" />
                <path d="M2 22h8M0 27h8M4 32h4" class="stroke" />
              </svg>
              <span class="mode-name">Getaway</span>
              <span class="mode-text">You're the one running. Lose eight cruisers by 600 m, or spin them out.</span>
            </button>
            <button id="modeFree" type="button" class="mode free">
              <span class="mode-key">F</span>
              <svg class="mode-icon" viewBox="0 0 48 48" aria-hidden="true">
                <path d="M20 8h8l12 34H8Z" />
                <path d="M24 12v4M24 21v5M24 31v6" class="stroke dark" />
              </svg>
              <span class="mode-name">Free drive</span>
              <span class="mode-text">No chase. Just the open interstate, the traffic and the odd flock of birds.</span>
            </button>
          </div>
          <footer class="title-foot">
            <button id="titleGarage" type="button" class="foot-button">Garage</button>
            <details class="controls">
              <summary>Controls</summary>
              <ul class="keys">
                <li><kbd>W</kbd>/<kbd>↑</kbd> gas</li>
                <li><kbd>S</kbd>/<kbd>↓</kbd> brake</li>
                <li><kbd>A</kbd><kbd>D</kbd>/<kbd>←</kbd><kbd>→</kbd> steer</li>
                <li><kbd>H</kbd> siren · <kbd>V</kbd> radio · <kbd>E</kbd> wipers · <kbd>M</kbd> mute</li>
                <li><kbd>P</kbd> pause · <kbd>R</kbd> restart</li>
                <li>Controller: left stick / D-pad steer · right trigger gas · left trigger brake / reverse</li>
                <li>South face: wipers · west: siren · north: radio / stereo · View/Select: mute</li>
                <li>Menus: stick / D-pad navigate · south: confirm · east: back · Menu/Start: pause / resume</li>
                <li>Garage: ↑↓ row · ←→ option · shoulders: other car · east / Menu: done</li>
                <li>Replay: south to skip after one second</li>
              </ul>
            </details>
          </footer>
          <p class="controller-status controller-note" role="status">Connect a controller, then press a button</p>
        </div>
      </section>

      <!-- After a mode is picked: when to drive. Night on the left, dusk, day on the right. -->
      <section id="timePicker" class="time-picker" aria-labelledby="timeHead" hidden>
        <div class="time-inner">
          <p id="timeMode" class="route">Pursuit</p>
          <h2 id="timeHead" class="time-head">Pick the time of day</h2>
          <div class="times">
            <button type="button" class="time-card" data-time="night">
              <canvas aria-hidden="true"></canvas>
              <span class="time-name">Night</span>
              <span class="time-text">Headlights and street lamps. Watch for tail lights.</span>
            </button>
            <button type="button" class="time-card" data-time="dusk">
              <canvas aria-hidden="true"></canvas>
              <span class="time-name">Dusk</span>
              <span class="time-text">Sunset glare and lights coming on.</span>
            </button>
            <button type="button" class="time-card" data-time="day">
              <canvas aria-hidden="true"></canvas>
              <span class="time-name">Day</span>
              <span class="time-text">Clear skies, best visibility.</span>
            </button>
          </div>
          <p class="controller-note">Controller: stick / D-pad choose · south confirm · east back</p>
          <p class="time-keys"><kbd>←</kbd><kbd>→</kbd> choose · <kbd>Enter</kbd> drive · <kbd>Esc</kbd> back</p>
          <button id="timeBack" type="button" class="foot-button">Back</button>
        </div>
      </section>

      <section id="overlay" class="overlay" aria-label="Pursuit briefing" hidden>
        <div class="card">
          <p id="overlayKicker" class="kicker">DISPATCH</p>
          <p id="overlayTitle" class="headline">Sedan fleeing on the interstate</p>
          <p id="overlayBody" class="body">
            Pursuit: catch up, then tap the suspect's rear quarter, behind the back wheel, to spin it out (a PIT).
            Don't let them get more than 700 m ahead. Free drive: no suspect, just you and the traffic.
            Getaway: eight police cars are after you. Lose them by 600 m, or PIT them off the road.
            You can't leave the highway, and traffic always leaves a way through.
          </p>
          <ul class="keys">
            <li><kbd>W</kbd>/<kbd>↑</kbd> gas</li>
            <li><kbd>S</kbd>/<kbd>↓</kbd> brake</li>
            <li><kbd>A</kbd><kbd>D</kbd>/<kbd>←</kbd><kbd>→</kbd> steer</li>
            <li><kbd>H</kbd> siren · <kbd>V</kbd> radio · <kbd>M</kbd> mute · <kbd>E</kbd> wipers</li>
            <li><kbd>P</kbd> pause · <kbd>R</kbd> restart</li>
            <li><kbd>Enter</kbd> pursuit · <kbd>F</kbd> free drive · <kbd>G</kbd> getaway</li>
          </ul>
          <p class="controller-note">Controller: stick / D-pad navigate · south confirm · east / Menu resume when paused</p>
          <p class="controller-status controller-note" role="status"></p>
          <p id="best" class="best"></p>
          <div class="choices">
            <button id="startButton" type="button" class="start">Start pursuit</button>
            <button id="freeButton" type="button" class="start secondary">Free drive</button>
            <button id="getawayButton" type="button" class="start secondary">Getaway</button>
            <button id="menuButton" type="button" class="start secondary" hidden>Main menu</button>
            <button id="garageButton" type="button" class="start secondary garage-open">Garage</button>
          </div>
        </div>
      </section>

      <section id="garage" class="garage" aria-label="Garage" hidden>
        <div class="garage-panel">
          <p class="kicker">GARAGE</p>
          <div class="tabs" role="tablist">
            <button id="tabPolice" type="button" role="tab" aria-selected="true">Patrol car</button>
            <button id="tabGetaway" type="button" role="tab" aria-selected="false">Getaway car</button>
          </div>
          <div id="garageRows" class="garage-rows"></div>
          <p id="garageNote" class="garage-note"></p>
          <p class="garage-keys"><kbd>↑</kbd><kbd>↓</kbd> pick · <kbd>←</kbd><kbd>→</kbd> change · <kbd>Tab</kbd> other car</p>
          <p class="controller-note">Controller: ↑↓ row · ←→ change · shoulders other car · east / Menu done</p>
          <div class="choices">
            <button id="garageDone" type="button" class="start">Done</button>
          </div>
        </div>
      </section>

      <div class="touch" aria-hidden="true">
        <div class="pad left">
          <button type="button" data-touch="left">◀</button>
          <button type="button" data-touch="right">▶</button>
        </div>
        <div class="pad right">
          <button type="button" id="wipeButton">WIPE</button>
          <button type="button" data-touch="brake">BRK</button>
          <button type="button" data-touch="gas">GAS</button>
        </div>
      </div>
    </main>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>