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>Chase'n Those Narly Waves</title>
  </head>
  <body>
    <main id="app" class="app">
      <canvas id="scene" tabindex="0" aria-label="Surfing game"></canvas>
      <canvas id="hud" aria-hidden="true"></canvas>
      <p id="noWebgl" class="no-webgl" hidden>This game needs 3D graphics (WebGL), and this browser can't show them. Try another browser!</p>

      <!-- Title screen -->
      <section id="titleScreen" class="overlay" aria-label="Start">
        <div class="card">
          <p class="logo">Chase'n Those <span>Narly Waves</span></p>
          <ul class="how">
            <li>Tap <kbd>W</kbd> at the right time to catch a wave: when it's in the <b>green zone</b> (gold = perfect!)</li>
            <li><kbd>A</kbd> <kbd>D</kbd> steer &nbsp; <kbd>S</kbd> slow down</li>
            <li>Don't turn too long or you'll <b>fall over</b>!</li>
            <li>Dodge the <b>rocks</b> and watch out for <b>sharks</b>! (They can't hurt you on a wave.)</li>
            <li>Ride a wave, then use the arrows for tricks. The basics:</li>
          </ul>
          <ul id="trickList" class="tricks"></ul>
          <p id="secretTricks" class="secret"></p>
          <button id="startButton" class="big" type="button">Let's Surf!</button>
          <p id="titleBest" class="small"></p>
        </div>
      </section>

      <!-- Pause screen -->
      <section id="pauseScreen" class="overlay" aria-label="Paused" hidden>
        <div class="card">
          <p class="logo small-logo">Paused, dude</p>
          <button id="resumeButton" class="big" type="button">Keep Surfing</button>
          <button id="restartButton" type="button">Start Over</button>
          <p class="small">Press <kbd>P</kbd> or <kbd>Esc</kbd> to pause</p>
        </div>
      </section>

      <!-- Game over screen -->
      <section id="overScreen" class="overlay" aria-label="Game over" hidden>
        <div class="card">
          <p class="logo small-logo">Wiped Out!</p>
          <p id="finalScore" class="score"></p>
          <p id="finalBest" class="small"></p>
          <button id="againButton" class="big" type="button">Paddle Back Out</button>
        </div>
      </section>

      <!-- Buttons for phones and tablets -->
      <div id="touch" class="touch" hidden>
        <div class="pad">
          <button type="button" data-hold="a" aria-label="Steer left">A</button>
          <button type="button" data-hold="w" aria-label="Paddle">W</button>
          <button type="button" data-hold="s" aria-label="Slow down">S</button>
          <button type="button" data-hold="d" aria-label="Steer right">D</button>
        </div>
        <div class="pad">
          <button type="button" data-arrow="left" aria-label="Trick left">←</button>
          <button type="button" data-arrow="up" aria-label="Trick up">↑</button>
          <button type="button" data-arrow="down" aria-label="Trick down">↓</button>
          <button type="button" data-arrow="right" aria-label="Trick right">→</button>
        </div>
      </div>
      <button id="pauseButton" class="pause-button" type="button" aria-label="Pause" hidden>II</button>
    </main>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>