Mini RPG Clicker

<main class="rpg" role="application" aria-label="Mini RPG Clicker">
  <header class="rpg__top">
    <div class="hero">
      <div class="hero__sigil" aria-hidden="true">
        <span class="hero__rune">✦</span>
      </div>
      <div class="hero__id">
        <p class="hero__name">Wandering Adept</p>
        <p class="hero__class">Level <b id="level">1</b> · Arcane Clicker</p>
      </div>
    </div>
    <div class="hero__gold" aria-live="polite">
      <span class="coin" aria-hidden="true">◈</span>
      <b id="gold">0</b>
      <span class="gold-label">gold</span>
    </div>
  </header>

  <section class="xp" aria-label="Experience">
    <div class="xp__row">
      <span class="xp__label">XP</span>
      <span class="xp__nums"><b id="xp">0</b> / <span id="xpNext">50</span></span>
    </div>
    <div class="xp__track" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" id="xpBar">
      <div class="xp__fill" id="xpFill"></div>
      <div class="xp__shine" aria-hidden="true"></div>
    </div>
  </section>

  <section class="stage">
    <div class="stage__orb" aria-hidden="true">
      <div class="orb__glow"></div>
    </div>
    <button id="trainBtn" class="btn btn--train" type="button">
      <span class="btn__title">Train</span>
      <span class="btn__sub">+<b id="perClick">1</b> XP</span>
    </button>
    <div id="floaters" class="floaters" aria-hidden="true"></div>
  </section>

  <section class="shop">
    <button id="upgradeBtn" class="btn btn--upgrade" type="button">
      <span class="btn__title">Upgrade Focus</span>
      <span class="btn__sub">Cost <b id="upgradeCost">15</b> gold · +1 XP/click</span>
    </button>
    <p class="shop__hint" id="shopHint">Spend gold to hit harder.</p>
  </section>

  <section class="quests" aria-label="Quest log">
    <h2 class="quests__title">Quest Log</h2>
    <ul id="questList" class="quests__list"></ul>
  </section>

  <footer class="rpg__foot">Powered by Animica</footer>
</main>