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>Mini Samurai</title>
  </head>
  <body>
    <main id="app" class="app">
      <canvas id="view" tabindex="-1" aria-label="Mini Samurai battle view"></canvas>

      <section id="menu" class="screen menu" aria-label="Main menu">
        <div class="card menu-card">
          <header class="title">
            <span class="seal" aria-hidden="true">小侍</span>
            <div>
              <p class="logo">Mini Samurai</p>
              <p class="tagline">Tiny blades. A giant house.</p>
            </div>
            <button type="button" class="fullscreen-btn title-fs" aria-pressed="false" aria-label="Full screen" title="Full screen"></button>
          </header>

          <div class="opt">
            <span class="opt-label" id="lblMode">Battle</span>
            <div class="seg" data-key="mode" role="radiogroup" aria-labelledby="lblMode">
              <button type="button" data-v="1v1">1 vs 1</button>
              <button type="button" data-v="2v2">2 vs 2</button>
              <button type="button" data-v="ffa">Free for all</button>
              <button type="button" data-v="waves">Waves</button>
              <button type="button" data-v="explore">Explore</button>
            </div>
          </div>
          <div class="opt">
            <span class="opt-label" id="lblPlayers">Players</span>
            <div class="players-row" id="playersRow" aria-labelledby="lblPlayers" aria-live="polite"></div>
          </div>
          <div class="opt" id="teamsOpt">
            <span class="opt-label" id="lblTeams">Teams</span>
            <div class="seg" data-key="teams" role="radiogroup" aria-labelledby="lblTeams">
              <button type="button" data-v="together">Players vs CPU</button>
              <button type="button" data-v="split">Player vs player</button>
            </div>
          </div>
          <div class="opt" id="fillOpt">
            <span class="opt-label" id="lblFill">Empty slots</span>
            <div class="seg" data-key="fill" role="radiogroup" aria-labelledby="lblFill">
              <button type="button" data-v="cpus">Fill with CPUs</button>
              <button type="button" data-v="empty">Leave empty</button>
            </div>
          </div>
          <div class="opt" id="skillOpt">
            <span class="opt-label" id="lblSkill">CPU skill</span>
            <div class="seg" data-key="difficulty" role="radiogroup" aria-labelledby="lblSkill">
              <button type="button" data-v="easy">Easy</button>
              <button type="button" data-v="normal">Normal</button>
              <button type="button" data-v="hard">Hard</button>
            </div>
          </div>

          <label class="opt">
            <span class="opt-label">Mouse speed</span>
            <span class="speed"><input type="range" class="mouse-speed" min="0.25" max="3" step="0.05" value="1" aria-label="Mouse speed" /><output class="speed-value">1.0×</output></span>
          </label>

          <div class="opt-label rooms-label" id="lblRoom">Choose a room</div>
          <div class="rooms seg" data-key="room" role="radiogroup" aria-labelledby="lblRoom"></div>

          <button type="button" id="startBtn" class="start">Fight!</button>

          <button type="button" id="controlsBtn" class="controls-btn">Controls &amp; controllers</button>
        </div>
      </section>

      <section id="pause" class="screen overlay" hidden aria-label="Paused">
        <div class="card small-card">
          <h2>Paused</h2>
          <label class="speed pause-speed">
            <span class="opt-label">Mouse speed</span>
            <input type="range" class="mouse-speed" min="0.25" max="3" step="0.05" value="1" aria-label="Mouse speed" /><output class="speed-value">1.0×</output>
          </label>
          <button type="button" data-act="resume" class="start">Resume</button>
          <button type="button" data-act="restart">Restart match</button>
          <button type="button" data-act="controls">Controls</button>
          <button type="button" class="fullscreen-btn" aria-pressed="false">Full screen</button>
          <button type="button" data-act="menu">Main menu</button>
        </div>
      </section>

      <section id="results" class="screen overlay" hidden aria-label="Match result">
        <div class="card small-card">
          <span class="seal big" aria-hidden="true">勝</span>
          <h2 id="resultText">Victory</h2>
          <button type="button" data-act="restart" class="start">Rematch</button>
          <button type="button" data-act="menu">Main menu</button>
        </div>
      </section>

      <div id="tooSmall" class="too-small" hidden>
        <span class="seal" aria-hidden="true">小侍</span>
        <p>Make the frame a little bigger to fight.</p>
      </div>
    </main>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>