<!-- SOLID CITY · part 3472 -->
ss-fill" id="progressFill"></div></div></div>
    <div class="integrity"><strong id="integrityValue">100%</strong><span>Swarm<br>integrity</span></div>
    <button class="pause-btn" id="pauseBtn" aria-label="Pause mission" hidden>Ⅱ</button>
  </section>

  <div class="layout">
    <section class="field-shell" aria-label="Tactical field">
      <canvas id="field" aria-label="Tactical view of drones clearing hazardous debris from the convoy lane"></canvas>
      <div class="hud-top"><div class="hud-chip">ORDER <b id="activeOrder">FORM UP</b></div><div class="hud-chip">HUMAN <b id="humanCount">0</b> · AI <b id="aiCount">12</b></div></div>
      <div class="advisory" id="advisory" aria-live="polite">Sub-commanders aligned. Tap any drone to take it from AI control.</div>
      <div class="start-screen" id="startScreen">
        <div class="start-content">
          <div class="mark">CONVOY LANE K-9 // HAZARD RESPONSE</div>
          <h2>Swarm<em>Command.</em></h2>
          <p>Debris is closing around a civilian convoy. Command the swarm as a formation, or tap any drone and fly it yourself. AI yields only the drone you claim.</p>
          <div class="brief"><div><b>GROUP ORDERS</b><span>Shape the AI swarm without overriding human-held drones.</span></div><div><b>DIRECT CONTROL</b><span>Tap a drone, steer, and pulse nearby debris.</span></div><div><b>COORDINATE</b><span>Losses hurt. Regrouping recovers disabled units.</span></div></div>
          <button class="launch" id="launchBtn">LAUNCH SWARM</button>
          <a class="city-back" href="/city/">← back to Solid City</a>
        </div>
      </div>
      <div class="debrief" id="debrief" hidden><div class="debrief-card"><h2 id="debriefTitle">Lane secured.</h2><p id="debriefCopy">The convoy reached the exit vector under swarm protection.</p><div class="debrief-grid"><div><b id="finalTime">00:00</b><span>mission time</span></div><div><b id="finalClear">0</b><span>debris cleared</span></div><div><b id="finalLost">0</b><span>drones lost</span></div></div><button class="launch" id="restartBtn">FLY AGAIN</button></div></div>
    </section>

    <aside class="rail">
      <section class="panel">
        <div class="panel-head"><h2>Group orders</h2><span class="signal"><i></i><span id="queueHealth">LOCAL · 0 QUEUED</span></span></div>
        <div class="order-grid" id="orderGrid">
          <button class="order-btn active" data-order="FORM UP">FORM UP<small>tight escort</small></button>
          <button class="order-btn" data-order="SWEEP">SWEEP<small>clear lane</small></button>
          <button class="order-btn" data-order="CONVERGE">CONVERGE<small>focus threat</small></button>
          <button class="order-btn" data-order="SCATTER">SCATTER<small>avoid impacts</small></button>
          <button class="order-btn" data-order="REGROUP">REGROUP<small>recover units</small></button>
          <button class="order-btn" data-order="GUARD">GUARD<small>shield convoy</small></button>
        </div>
        <div class="help-note" id="orderNote">Orders route through AI sub-commanders. Human-held drones are excluded.</div>
      </section>

      <section class="panel">
        <div class="panel-head"><h2>Direct control</h2><span class="signal"><i></i>READY</span></div>
        <div class="control-card">
          <div class="held-line"><strong id="selectedName">No drone selected</strong><span id="selectedOwner">TAP TO CLAIM</span></div>
          <div class="dpad-wrap">
            <div class="dpad" aria-label="Direction controls">
              <button class="up" data-dir="up" aria-label="Move up">▲</button><button class="left" data-dir="left" aria-label="Move left">◀</button><button class="down" data-dir="down" aria-label="Move down">▼</button><button class="right" data-dir="right" aria-label="Move right">▶</button>
            </div>
            <button class="pulse" id="pulseBtn"><b>◎</b>CLEAR<br>PULSE</button>
          </div>
          <div class="utility-row"><button class="utility release" id="releaseBtn">SAFE RELEASE</button><button class="utility stats" id="statsBtn">OPEN STATS</button></div>
        </div>
      </section>

      <section class="panel roster-panel">
        <div class="panel-head"><h2>Swarm registry</h2><span class="signal"><i></i><span id="statusLine">12 ACTIVE</span></span></div>
        <div class="roster" id="roster"></div>
        <div class="swarm-strip"><div class="metric"><b id="metricOrders">0</b><span>orders</span></div><div class="metric"><b id="metricClaims">0</b><span>takeovers</span></div><div class="metric"><b id="metricCleared">0</b><span>cleared</span></div><div class="metric"><b id="metricRejected">0</b><span>stale rejected</span></div></div>
      </section>
    </aside>
  </div>
</main>

<div class="pause-screen" id="pauseScreen" role="dialog" aria-modal="true" aria-labelledby="pauseTitle" hidden>
  <div class="pause-card">
    <h2 id="pauseTitle">Mission paused.</h2>
    <p>The swarm is frozen 