static/game.html

<div class="sq-root" data-state="booting">
  <div class="sq-hud">
    <div class="sq-title">semantique</div>
    <div class="sq-targets"><span class="sq-target-list"></span></div>
    <div class="sq-hud-right">
      <div class="sq-context" aria-label="hops">
        <span class="sq-context-count"><b class="sq-ctx-used">0</b>/<b class="sq-ctx-cap"></b></span>
      </div>
      <div class="sq-help sq-hidden">
        <button class="sq-help-btn" type="button" aria-label="hint" aria-haspopup="dialog" aria-expanded="false"></button>
      </div>
      <div class="sq-audio">
        <button class="sq-audio-btn sq-music-btn" type="button" aria-label="music volume" aria-haspopup="dialog" aria-expanded="false"></button>
        <button class="sq-audio-btn sq-sfx-btn" type="button" aria-label="sound effects volume" aria-haspopup="dialog" aria-expanded="false"></button>
        <div class="sq-audio-pop sq-hidden" role="dialog" aria-label="audio levels">
          <div class="sq-vol-row">
            <button class="sq-vol-icon sq-vol-music" type="button" aria-label="mute music"></button>
            <div class="sq-slider" data-ch="music"></div>
          </div>
          <div class="sq-vol-row">
            <button class="sq-vol-icon sq-vol-sfx" type="button" aria-label="mute sound effects"></button>
            <div class="sq-slider" data-ch="sfx"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="sq-prompt">
    <span class="sq-chips"></span>
  </div>
  <div class="sq-stage"></div>
  <div class="sq-hint">arrow keys / WASD to hop</div>
  <div class="sq-overlay sq-hidden">
    <div class="sq-card">
      <div class="sq-card-sentence"></div>
      <div class="sq-bars"></div>
      <div class="sq-stamp"></div>
      <div class="sq-card-actions">
        <button class="sq-retry sq-hidden" type="button">poke the judge again</button>
        <button class="sq-again sq-hidden" type="button">hop again</button>
      </div>
    </div>
  </div>
  <div class="sq-hintbox sq-hidden" role="dialog" aria-modal="true" aria-label="hint">
    <div class="sq-hintbox-card">
      <div class="sq-hintbox-q">Do you want a hint? Hints are lame.</div>
      <div class="sq-hintbox-text sq-hidden"></div>
      <div class="sq-hintbox-actions">
        <button class="sq-hintbox-yes" type="button">yes</button>
        <button class="sq-hintbox-no" type="button">no</button>
      </div>
      <button class="sq-hintbox-close sq-hidden" type="button">got it</button>
    </div>
  </div>
  <div class="sq-welcome sq-hidden" role="dialog" aria-modal="true" aria-label="welcome">
    <div class="sq-welcome-card">
      <div class="sq-welcome-title">How well can you prompt a small AI?</div>
      <div class="sq-welcome-body">A short adventure game. Get MiniCPM3-4B to guess all the <span class="sq-welcome-target">words</span>. But be careful! Your context window can only stretch so far…</div>
      <button class="sq-welcome-close" type="button" aria-label="close (enter)">⏎</button>
    </div>
  </div>
  <div class="sq-victory sq-hidden" role="dialog" aria-modal="true" aria-label="you win">
    <div class="sq-victory-card">
      <div class="sq-victory-title">you win!</div>
      <div class="sq-victory-body">Congratulations. I hereby crown you a competent wrangler of small LLMs</div>
      <dl class="sq-victory-stats"></dl>
      <button class="sq-victory-close" type="button">keep prompting</button>
    </div>
  </div>
  <div class="sq-errorbox sq-hidden" role="dialog" aria-modal="true" aria-label="error">
    <div class="sq-errorbox-card">
      <div class="sq-errorbox-title">Error 404</div>
      <div class="sq-errorbox-body">Uh-oh, looks like the AI just deleted everything. Maybe setup some better guardrails next time?</div>
      <button class="sq-errorbox-ok" type="button">yikes</button>
    </div>
  </div>
</div>