<!-- SOLID CITY · part 3457 -->
hreat</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>

<dialog id="statsDialog" aria-labelledby="statsTitle">
  <div class="dialog-head"><h2 id="statsTitle">Event-derived mission STATS</h2><button class="close" id="closeStats" aria-label="Close stats">✕</button></div>
  <div class="stats-body">
    <div class="stats-summary" id="statsSummary"></div>
    <section class="stats-section"><h3>Per-drone control record</h3><div style="overflow:auto"><table class="drone-table"><thead><tr><th>Drone</th><th>Owner</th><th>Epoch</th><th>Task</th><th>Status</th><th>Hull</th></tr></thead><tbody id="droneRows"></tbody></table></div></section>
    <section class="stats-section"><h3>Coordination events · newest first</h3><div class="event-list" id="eventList"></div></section>
  </div>
</dialog>

<script>
(function(){
  'use strict';
  var canvas=document.getElementById('field'),ctx=canvas.getContext('2d');
  var startScreen=document.getElementById('startScreen'),debrief=document.getElementById('debrief');
  var running=false,last=0,missionStart=0,elapsed=0,progress=0,wave=1,activeOrder='FORM UP',selectedId=null;
  var drones=[],debris=[],particles=[],events=[],commandQueue=[],pressed={up:false,down:false,left:false,right:false};
  var nextHazardAt=0,nextAdvisoryAt=0,convoyX=.12,canvasW=0,canvasH=0,dpr=1,uid=0;
  var GROUPS=['ALPHA','BETA','GAMMA'];
  var colors={gold:'#ffc34d',teal:'#52e0d0',red:'#ff625f',white:'#eaf9f7',deep:'#031012'};

  function nowStamp(){var s=Math.max(0,Math.floor(elapsed));return String(Math.floor(s/60)).padStart(2,'0')+':'+String(s%60).padStart(2,'0')}
  function addEvent(type,subject,detail){events.push({id:++uid,time:nowStamp(),type:type,subject:subject,detail:detail});if(events.length>180)events.shift();updateMetrics()}
  function count(type){return events.filter(function(e){return e.type===type}).length}
  function setup(){
    progress=0;wave=1;activeOrder='FORM UP';selectedId=null;events=[];commandQueue=[];debris=[];particles=[];convoyX=.12;elapsed=0;nextHazardAt=1.4;nextAdvisoryAt=4;
    drones=[];
    for(var i=0;i<12;i++)drones.push({id:i+1,name:'D-'+String(i+1).padStart(2,'0'),group:GROUPS[Math.floor(i/4)],x:.20+(i%4)*.035,y:.32+Math.floor(i/4)*.18+(i%2)*.025,vx:0,vy:0,owner:'AI',epoch:1,task:'ESCORT',status:'ACTIVE',hp:100,recover:0,pulse:0,hit:0});
    addEvent('MISSION','CONTROL','Swarm registry initialized: 12 independent tasks');
    addEvent('ORDER','AI COMMAND','FORM UP issued to 12 AI-held drones');
    spawnWave(1);updateAllUI();
  }
  function resize(){
    var r=canvas.getBoundingClientRect();dpr=Math.min(window.devicePixelRatio||1,2);canvas.width=Math.max(1,Math.floor(r.width*dpr));canvas.height=Math.max(1,Math.floor(r.height*dpr));canvasW=r.width;canvasH=r.height;ctx.setTransform(dpr,0,0,dpr,0,0)
  }
  window.addEventListener('resize',resize);

  function spawnWave(n){
    var amount=5+n*2;
    for(var i=0;i<amount;i++)debris.pus