web/index.html

<div id="mm-root">
  <div id="mm-stage">
    <canvas id="mm-canvas" width="900" height="420"></canvas>
    <button id="mm-mute" title="Mute (M)">🔊</button>
    <div class="mm-bars">
      <div class="mm-boss-name">⚔ Demon Slime ⚔</div>
      <div class="mm-bar-row"><span class="mm-bar-label">Boss</span>
        <div class="mm-bar mm-fill-boss"><i id="mm-hp-boss" style="width:100%"></i></div></div>
      <div class="mm-bar-row"><span class="mm-bar-label">Ashen One</span>
        <div class="mm-bar mm-fill-php"><i id="mm-hp-php" style="width:100%"></i></div></div>
      <div class="mm-bar-row"><span class="mm-bar-label">Stamina</span>
        <div class="mm-bar mm-fill-stam"><i id="mm-stam" style="width:100%"></i></div></div>
      <div class="mm-bar-row" id="mm-shield-row"><span class="mm-bar-label">Aegis</span>
        <div class="mm-bar mm-fill-shield"><i id="mm-shield" style="width:100%"></i></div></div>
    </div>
    <div id="mm-overlay">
      <div id="mm-big">BOSS FIGHT</div>
      <div id="mm-sub"></div>
      <div id="mm-diff" class="mm-diff">
        <span class="mm-diff-label">Boss brain:</span>
        <button class="mm-diff-btn" data-diff="easy">Easy<small>partly trained</small></button>
        <button class="mm-diff-btn" data-diff="normal">Normal<small>mid training</small></button>
        <button class="mm-diff-btn mm-diff-on" data-diff="hard">Hard<small>fully trained</small></button>
      </div>
      <button id="mm-start-btn">Enter the Fog</button>
      <div class="mm-keys">
        <b>← →</b> move &nbsp; <b>Space</b> roll/dodge &nbsp; <b>J</b> attack &nbsp; <b>K</b> hold to block
      </div>
    </div>
  </div>

  <div id="mm-panel">
    <h3>Modular Mind</h3>
    <div class="mm-tag">6 specialists · RecursiveLink shared latent · brain: <b id="mm-difftag">HARD</b></div>
    <div class="mm-decision">
      <div><div class="lbl">CURRENT DECISION</div><div class="act" id="mm-act">—</div></div>
      <span class="mm-phase p1" id="mm-phase">PHASE 1</span>
    </div>
    <div class="mm-sec-title">Specialist activity</div>
    <div id="mm-specs"></div>
    <div class="mm-sec-title">Shared latent · RecursiveLink bridge</div>
    <div class="mm-latent" id="mm-latent"></div>
    <div class="mm-flow" id="mm-flow">Awaiting first decision…</div>
    <div class="mm-note">Each move is chosen by a tiny neural Modular Mind. Four specialists own an
      action; two <b>modulators</b> (Punisher, Enrage) own none — they steer the fight only by what
      they write into the shared latent.</div>
  </div>
</div>