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>Truffle Rush</title>
  </head>
  <body>
    <main id="app" class="app">
      <canvas id="game" aria-label="Truffle Rush play field. Move the pig with the pointer, touch, or arrow keys."></canvas>

      <header class="hud">
        <div class="hud-left">
          <div class="stat stat-score">
            <span class="stat-label">Score</span>
            <span id="score" class="stat-value">0</span>
          </div>
          <div class="stat stat-best">
            <span class="stat-label">Best</span>
            <span id="best" class="stat-value">0</span>
          </div>
        </div>
        <div class="hud-right">
          <div id="hearts" class="hearts" role="img" aria-label="3 lives"></div>
          <button id="soundButton" class="icon-button" type="button" aria-label="Mute sound" title="Sound (M)">
            <span aria-hidden="true">♪</span>
          </button>
          <button id="pauseButton" class="icon-button" type="button" aria-label="Pause" title="Pause (Space)">
            <span aria-hidden="true">❚❚</span>
          </button>
        </div>
      </header>

      <div id="combo" class="combo" hidden>×2</div>
      <div id="toast" class="toast" aria-live="polite"></div>

      <div class="belly" aria-hidden="true">
        <span class="belly-label">Belly</span>
        <div class="belly-track"><div id="bellyFill" class="belly-fill"></div></div>
      </div>

      <div id="overlay" class="overlay">
        <section class="card" aria-labelledby="overlayTitle">
          <p id="overlayKicker" class="kicker">Moonlit piggy arcade</p>
          <p id="overlayTitle" class="title">Truffle Rush</p>
          <p id="overlayText" class="blurb">
            Catch the falling snacks. Dodge the crows. Fill your belly for a golden frenzy.
          </p>
          <div id="overlayStats" class="overlay-stats" hidden></div>
          <button id="playButton" class="play-button" type="button">Play</button>
          <p id="hint" class="hint">Drag · Arrow keys · Space to pause</p>
        </section>
      </div>
    </main>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>