Quantum Dice Roller

<main class="qd" role="main">
  <header class="qd-head">
    <span class="qd-eyebrow">Quantum-style randomness demo</span>
    <h1 class="qd-title">Quantum Dice</h1>
    <p class="qd-sub">Unbiased rolls from your device's cryptographic RNG. On-chain, hardware-attested verifiable quantum randomness is an Animica protocol feature.</p>
  </header>

  <section class="qd-stage" aria-live="polite">
    <div class="qd-dice" id="dice" aria-label="dice"></div>
    <div class="qd-total" id="total" aria-live="polite">
      <span class="qd-total-num" id="totalNum">—</span>
      <span class="qd-total-label">total</span>
    </div>
  </section>

  <section class="qd-controls">
    <div class="qd-count" role="group" aria-label="Number of dice">
      <button class="qd-step" id="dec" type="button" aria-label="Fewer dice">−</button>
      <span class="qd-count-val"><strong id="countVal">1</strong> <span>dice</span></span>
      <button class="qd-step" id="inc" type="button" aria-label="More dice">+</button>
    </div>
    <button class="qd-roll" id="roll" type="button">Roll</button>
  </section>

  <section class="qd-history" aria-label="Roll history">
    <div class="qd-history-head">
      <h2>History</h2>
      <button class="qd-clear" id="clear" type="button">Clear</button>
    </div>
    <ul class="qd-list" id="list">
      <li class="qd-empty" id="empty">No rolls yet — hit Roll to begin.</li>
    </ul>
  </section>

  <footer class="qd-foot">Powered by Animica</footer>
</main>