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" />
    <meta name="theme-color" content="#050d0c" />
    <meta
      name="description"
      content="Steer a thrusting rocket into stacked block towers and bring the skyline down."
    />
    <title>Blockfall</title>
  </head>
  <body>
    <!--
      A napplet is framed by its runtime, so this surface is the game itself:
      a status rail, the demolition range, and the console controls.
    -->
    <main id="app" class="app">
      <header class="hud" aria-label="Mission status">
        <div class="hud-cell">
          <span class="hud-key">Score</span>
          <span id="score" class="hud-value">000000</span>
        </div>
        <div class="hud-brand">
          <span class="brand-mark" aria-hidden="true"></span>
          <span>Blockfall</span>
          <em>demolition range</em>
        </div>
        <div class="hud-cell hud-right">
          <span class="hud-key">Sector</span>
          <span id="level" class="hud-value">01</span>
          <span class="best">best <b id="best">000000</b></span>
        </div>
      </header>

      <section id="stage" class="stage" aria-label="Demolition range">
        <canvas id="scene"></canvas>
        <div id="banner" class="banner" aria-live="polite" hidden>
          <p id="bannerTitle"></p>
          <p id="bannerSub"></p>
        </div>
        <button id="restartBtn" class="restart" type="button" hidden>Re-open range</button>
      </section>

      <footer class="console" aria-label="Launch console">
        <div class="readout">
          <div class="fuel">
            <span class="hud-key">Fuel</span>
            <div class="fuel-track"><span id="fuelFill"></span></div>
          </div>
          <div class="ammo">
            <span class="hud-key">Rockets</span>
            <div class="ammo-row">
              <div id="ammo" class="ammo-pips"></div>
              <span id="ammoCount" class="ammo-count">×8</span>
            </div>
          </div>
          <p id="hint" class="hint">Aim the rail · launch when locked</p>
        </div>
        <div class="controls" role="group" aria-label="Rocket controls">
          <button id="leftBtn" class="pad" type="button" aria-label="Rotate left">
            <span aria-hidden="true">◀</span>
          </button>
          <button id="thrustBtn" class="thrust" type="button">
            <span id="thrustLabel">Launch</span>
          </button>
          <button id="rightBtn" class="pad" type="button" aria-label="Rotate right">
            <span aria-hidden="true">▶</span>
          </button>
        </div>
      </footer>
    </main>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>