<!-- SOLID CITY · part 2011 -->
px;font-size:9px}.pilot{grid-template-columns:repeat(3,48px);gap:4px}.pilot button{min-height:40px}.shiprow{grid-template-columns:66px 72px 1fr;gap:6px}.task{grid-column:2/4;text-align:left}.screen-head{padding:7px 9px}}
    @media(max-width:900px) and (orientation:landscape){.topbar{min-height:52px;padding:6px 10px}.battlefield{min-height:calc(100svh - 52px)}.screen{grid-template-rows:auto minmax(180px,1fr) auto}.view{min-height:180px}.screen-head{padding:6px 8px}.commands{padding:5px 6px}.orders{gap:3px}.orders button{min-height:36px;font-size:8px}.pilot{grid-template-columns:repeat(3,44px);gap:3px}.pilot button{min-height:36px;font-size:8px}.selected{bottom:5px}.objective{top:5px}}
    @media(max-width:560px){.topbar{gap:6px}.mission strong{font-size:11px}.mission small{font-size:9px}.stat-open{font-size:0}.stat-open::after{content:"STATS";font-size:10px}.mode{font-size:10px}.scoreboard{grid-template-columns:1fr 1fr}.sheet{padding-left:10px;padding-right:10px}}
    @media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
  </style>
</head>
<body>
  <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>
    <select id="mode" class="mode" aria-label="Commander configuration"><option value="human">HUMAN + AI</option><option value="auto">AI + AI</option></select>
    <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="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="events"></div></div></div>
  <div class="debrief" id="debrief"><div class="debrief-card"><h2 id="winner">Gold secures the beacon.</h2><p id="summary"></p><button id="again">FLY AGAIN</button></div></div>
<script>
(function(){
  'use strict';
  var W=1200,H=720,BEACON={x:600,y:360,r:70},rngSeed=88421,ships=[],shots=[],rocks=[],sparks=[],events=[],progress={gold:0,teal:0},selected={gold:null,teal:null},order={gold:'form',teal:'form'},running=tru