<!-- SOLID CITY · part 3456 -->
 b{font:800 1.35rem ui-monospace,SFMono-Regular,Menlo,monospace;display:block;color:#ffc34d}.debrief-grid span{font-size:.62rem;color:#9daeb0;text-transform:uppercase}
    @media(max-width:980px){
      .app{padding:8px}.mission-bar{grid-template-columns:1fr auto}.progress-wrap{grid-column:1/-1;grid-row:2}.layout{grid-template-columns:1fr}.field-shell,canvas{height:52dvh;min-height:380px}.field-shell{min-height:380px}.rail{grid-template-columns:1fr 1fr}.rail .roster-panel{grid-column:1/-1}.control-card{padding:8px}.dpad-wrap{grid-template-columns:1fr 110px}.pulse{min-height:145px}.order-btn{min-height:54px}.roster{grid-template-columns:repeat(6,1fr)}
    }
    @media(max-width:620px){
      .objective p{display:none}.integrity{padding:7px 9px}.integrity strong{font-size:1rem}.mission-bar{gap:8px;margin-bottom:8px}.layout{gap:8px}.field-shell,canvas{height:43dvh;min-height:330px}.field-shell{min-height:330px}.rail{grid-template-columns:1fr}.rail .roster-panel{grid-column:auto}.order-grid{grid-template-columns:repeat(3,1fr)}.dpad-wrap{grid-template-columns:1fr 96px}.dpad{grid-template-rows:repeat(2,48px)}.pulse{min-height:101px}.roster{grid-template-columns:repeat(6,1fr)}.drone-tile{min-height:45px;padding:5px 2px}.swarm-strip{grid-template-columns:repeat(4,1fr)}.start-screen{padding:12px;overflow-y:auto}.start-content .mark{font-size:.6rem;margin-bottom:7px}.start-content h2{font-size:2rem;margin-bottom:7px}.start-content p{font-size:.72rem;line-height:1.35;margin-bottom:9px}.brief{display:none}.launch{min-height:48px}.stats-summary{grid-template-columns:repeat(3,1fr)}.event{grid-template-columns:52px 86px 1fr}.drone-table{font-size:.62rem}.drone-table th,.drone-table td{padding:6px 3px}
    }
    @media(max-width:380px){.roster{grid-template-columns:repeat(4,1fr)}.field-shell,canvas{height:40dvh;min-height:290px}.field-shell{min-height:290px}.hud-chip{font-size:.58rem}.advisory{font-size:.65rem}}
    @media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
  </style>
</head>
<body>
<main class="app">
  <section class="mission-bar" aria-label="Mission status">
    <div class="objective"><h1>Clear the convoy lane</h1><p>12 drones · 3 AI sub-commanders · escalating debris</p></div>
    <div class="progress-wrap"><div class="progress-label"><span id="phaseText">WAVE 1 · APPROACH</span><span id="progressText">0% TO EXIT VECTOR</span></div><div class="progress-track"><div class="progress-fill" id="progressFill"></div></div></div>
    <div class="integrity"><strong id="integrityValue">100%</strong><span>Swarm<br>integrity</span></div>
  </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>Twelve minds.<em>One clear path.</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>
        </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 t