Made of little things.

<!doctype html>
<html lang="de">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Pünktlich!</title>
  </head>
  <body>
    <main id="app" class="app">
      <canvas id="scene" class="scene" aria-label="Klaus auf dem Weg zum Bahnhof"></canvas>

      <div class="hud" aria-live="polite">
        <div class="ordnung" title="Ordnung">
          <span class="ordnung-label">ORDNUNG</span>
          <span class="ordnung-bar"><span id="ordnungFill" class="ordnung-fill"></span></span>
          <span id="ordnungValue" class="ordnung-value">100</span>
        </div>
      </div>

      <div class="controls" role="group" aria-label="Steuerung">
        <button id="jumpButton" type="button" class="ctrl ctrl-jump" aria-label="Springen">
          <span aria-hidden="true">▲</span><span class="label">Springen</span>
        </button>
        <button id="walkButton" type="button" class="ctrl ctrl-walk" aria-label="Gehen (gedrückt halten)">
          <span class="label">Gehen</span><span aria-hidden="true">▶</span>
        </button>
      </div>

      <section id="overlay" class="overlay" hidden>
        <div class="card" role="dialog" aria-modal="true" aria-labelledby="cardTitle">
          <p id="cardKicker" class="kicker"></p>
          <h2 id="cardTitle" class="card-title"></h2>
          <p id="cardBody" class="card-body"></p>
          <div id="cardActions" class="card-actions"></div>
          <p id="cardHint" class="card-hint"></p>
        </div>
      </section>
    </main>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>