<!-- SOLID CITY · part 2031 -->
uce){*{scroll-behavior:auto!important;transition:none!important}}
  </style>
</head>
<body>
  <div class="start-overlay" id="startOverlay" role="dialog" aria-modal="true" aria-labelledby="startTitle">
    <div class="start-card">
      <div class="start-mark">MERIDIAN BEACON MISSION</div>
      <h1 id="startTitle">FLEET CONTROL</h1>
      <p class="start-brief">Two commanders. Four ships each. <strong>Gold squadron</strong> and <strong style="color:var(--teal)">teal squadron</strong> share one battlefield. Lead your squadron, keep your ships alive, and complete the mission.</p>
      <div class="start-grid">
        <section aria-labelledby="controlsTitle"><h2 id="controlsTitle">CONTROLS</h2><ul><li>Tap a ship to take its helm.</li><li>Use formation, attack, and defend orders to direct your squadron.</li><li>The AI yields any ship you take; tap YIELD to hand it back safely.</li></ul></section>
        <div class="config"><h2>COMMANDERS</h2><label for="mode">Choose who leads the two squadrons</label><select id="mode" class="mode" aria-label="Commander configuration"><option value="human">HUMAN + AI</option><option value="auto">AI + AI</option></select></div>
      </div>
      <button class="launch" id="launch">LAUNCH FLEET</button>
      <a class="city-back" href="../?back=strike">← back to Solid City</a>
    </div>
  </div>
  <header class="topbar">
    <div class="mission"><strong>Mission · Hold the Meridian Beacon</strong><small id="missionLine">First squadron to secure 100% control wins.</small></div>
    <button class="pause-trigger" id="pauseTrigger" aria-label="Pause battle" hidden>PAUSE</button>
    <button class="stat-open" id="statsOpen">LIVE STATS</button>
  </header>
  <main class="battlefield">
    <section class="screen gold" data-team="gold">
      <div class="screen-head"><b>GOLD SQUADRON · SCREEN 1</b><span class="health" id="goldHealth">4 ships combat-ready</span><span class="signal">LINK GOOD</span></div>
      <div class="view"><canvas id="goldCanvas" aria-label="Gold Squadron tactical view"></canvas><div class="objective"><span>BEACON</span><div class="meter"><i id="goldMeter"></i></div><span id="goldProgress">0%</span></div><div class="selected" id="goldSelected"><strong>Tap a Gold fighter</strong> to take its helm</div></div>
      <div class="commands"><div class="orders" aria-label="Gold squadron orders"><button data-team="gold" data-order="form">FORM UP</button><button data-team="gold" data-order="attack">ATTACK</button><button data-team="gold" data-order="defend">DEFEND</button><button data-team="gold" data-order="intercept">INTERCEPT</button></div><div class="pilot"><button class="fire" data-team="gold" data-action="fire">FIRE</button><button data-team="gold" data-action="shield">SHIELD</button><button class="release" data-team="gold" data-action="release">YIELD</button></div></div>
    </section>
    <section class="screen teal" data-team="teal">
      <div class="screen-head"><b>TEAL SQUADRON · SCREEN 2</b><span class="health" id="tealHealth">4 ships combat-ready</span><span class="signal">LINK GOOD</span></div>
      <div class="view"><canvas id="tealCanvas" aria-label="Teal Squadron tactical view"></canvas><div class="objective"><span>BEACON</span><div class="meter"><i id="tealMeter"></i></div><span id="tealProgress">0%</span></div><div class="selected" id="tealSelected"><strong>Tap a Teal fighter</strong> to intervene</div></div>
      <div class="commands"><div class="orders" aria-label="Teal squadron orders"><button data-team="teal" data-order="form">FORM UP</button><button data-team="teal" data-order="attack">ATTACK</button><button data-team="teal" data-order="defend">DEFEND</button><button data-team="teal" data-order="intercept">INTERCEPT</button></div><div class="pilot"><button class="fire" data-team="teal" data-action="fire">FIRE</button><button data-team="teal" data-action="shield">SHIELD</button><button class="release" data-team="teal" data-action="release">YIELD</button></div></div>
    </section>
  </main>
  <div class="toast" id="toast"></div>
  <div class="pause-overlay" id="pauseOverlay" role="dialog" aria-modal="true" aria-label="Battle paused">
    <div class="pause-card"><strong>BATTLE PAUSED</strong><button id="resumeBattle">RESUME</button><a href="/city/?back=strike">QUIT TO CITY</a></div>
  </div>
  <div class="drawer" id="drawer" role="dialog" aria-modal="true" aria-label="Fleet statistics"><div class="sheet"><div class="sheet-head"><div><h2>Fleet telemetry</h2><p>Values come from this battle’s state and event ledger.</p></div><button class="close" id="statsClose" aria-label="Close statistics">×</button></div><div class="scoreboard"><div class="score gold"><b id="goldScore">0%</b><span>GOLD MISSION PROGRESS</span></div><div class="score teal"><b id="tealScore">0%</b><span>TEAL MISSION PROGRESS</span></div></div><div class="ships" id="shipStats"></div><h3 class="event-title">COORDINATION EVENTS</h3><div class="events" id="e