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" />
    <title>Obsidian Breaker</title>
  </head>
  <body>
    <main id="app" class="app">
      <canvas id="board" class="board" aria-label="Obsidian Breaker playfield" role="img">
        Obsidian Breaker: a breakout game about shattering volatile mineral seams.
      </canvas>

      <header class="hud">
        <div class="hud-brand" aria-hidden="true">
          <span class="brand-mark">◆</span>
          <span class="brand-text">OBSIDIAN<br />BREAKER</span>
        </div>

        <dl class="hud-stats">
          <div class="stat stat-score">
            <dt>Score</dt>
            <dd id="scoreValue">0</dd>
          </div>
          <div class="stat stat-chain" id="chainStat">
            <dt>Chain</dt>
            <dd id="chainValue">—</dd>
          </div>
          <div class="stat stat-lives">
            <dt>Shields</dt>
            <dd id="livesValue" aria-label="3 shields">◆◆◆</dd>
          </div>
          <div class="stat">
            <dt>Seam</dt>
            <dd id="levelValue">01/07</dd>
          </div>
          <div class="stat stat-best">
            <dt>Best</dt>
            <dd id="bestValue">0</dd>
          </div>
        </dl>

        <div class="hud-actions">
          <button id="warpButton" class="icon-button ability-button" type="button" aria-pressed="false" aria-label="Warp (F): needs 3 projected wall or stone impacts" title="Warp (F): fast-forward through 3 projected impacts">
            <span aria-hidden="true">»</span>
          </button>
          <button id="bulletButton" class="icon-button ability-button" type="button" aria-pressed="false" aria-label="Bullet time (B): 100% charged" title="Bullet time (B)">
            <span aria-hidden="true">◒</span>
          </button>
          <button id="guideButton" class="icon-button" type="button" aria-pressed="true" aria-label="Toggle bounce prediction" title="Toggle bounce prediction">
            <span aria-hidden="true">✧</span>
          </button>
          <button id="soundButton" class="icon-button" type="button" aria-pressed="true" aria-label="Mute sound" title="Mute sound">
            <span aria-hidden="true">♪</span>
          </button>
          <button id="pauseButton" class="icon-button" type="button" aria-label="Pause" title="Pause">
            <span aria-hidden="true">❚❚</span>
          </button>
        </div>
      </header>

      <div id="banner" class="banner" aria-hidden="true">
        <span id="bannerKicker" class="banner-kicker"></span>
        <span id="bannerTitle" class="banner-title"></span>
      </div>

      <p id="hint" class="hint">Drag to steer · Space launch · B bullet time · F warp · P pause</p>
      <div id="bulletMeter" class="bullet-meter" role="progressbar" aria-label="Bullet time charge" aria-valuemin="0" aria-valuemax="100" aria-valuenow="100">
        <span class="bullet-label">Bullet</span>
        <span class="bullet-track"><span id="bulletFill" class="bullet-fill"></span></span>
      </div>
      <div id="toast" class="toast" aria-live="polite"></div>

      <div id="overlay" class="overlay" hidden>
        <div class="overlay-card" role="dialog" aria-modal="true" aria-labelledby="overlayTitle">
          <p id="overlayKicker" class="overlay-kicker">Paused</p>
          <h2 id="overlayTitle">The seam waits</h2>
          <p id="overlayBody" class="overlay-body"></p>
          <div id="overlayActions" class="overlay-actions"></div>
          <p id="overlayNote" class="overlay-note"></p>
        </div>
      </div>

      <p id="gameStatus" class="sr-only" aria-live="polite"></p>
    </main>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>