<!-- SOLID CITY · part 2894 -->
gap:3px;margin-top:0}.count{padding:6px 4px}.count b{font-size:17px}.count span{font-size:7px}.stats-grid{grid-template-columns:repeat(2,1fr)}.lower{margin-top:6px;gap:6px}.start-card h1{font-size:34px;margin-bottom:8px}.start-card p{font-size:11px;line-height:1.35;margin-bottom:10px}.primary{min-height:46px}.start-screen{padding:10px}.result-copy{font-size:11px}.result{padding:12px}}
    @media(max-height:560px) and (orientation:landscape){.shell{padding:6px}.mission-strip{display:none}.layout{grid-template-columns:minmax(0,1.45fr) minmax(315px,.75fr);gap:6px}.battle-wrap{height:calc(100vh - 12px)}#battle{height:100%;width:100%;aspect-ratio:auto}.station-panel{max-height:calc(100vh - 12px);overflow:auto}.panel-head{padding:8px}.station{min-height:74px;padding:8px}.station-note{display:none}.controls{padding:8px}.control-btn{min-height:42px}.mission-state{margin-top:7px}.lower{display:none}}
    @media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}
  </style>
</head>
<body>
  <main class="shell">
    <section class="mission-strip" aria-label="Mission status">
      <div>
        <div class="eyebrow">Rescue Wing · Operation Lantern · Rescue Corridor 7</div>
        <div class="objective" id="objective">Choose who we reach first. Three pilots are calling — and the scanner hears something else.</div>
        <div class="brief">The AI flies and scans. You set triage, hold the rescue steady, and decide how far we go for one more life.</div>
      </div>
      <div class="status-line">
        <div class="status-pill"><i class="dot"></i><span id="signalText">Signal verified</span></div>
        <div class="status-pill">Crew <b id="crewSplit">0 human · 4 AI</b></div>
      </div>
    </section>

    <div class="layout">
      <section class="battle-wrap" aria-label="Rescue mission battlefield">
        <canvas id="battle" width="960" height="600" aria-label="The rescue vessel moving through debris, interceptors, unstable zones, and escape pods"></canvas>
        <div class="hud-top">
          <div class="meter" id="shipMeter"><span><b>Vessel</b><em id="shipVal">100%</em></span><div class="bar"><i id="shipBar" style="width:100%"></i></div></div>
          <div class="meter gold"><span><b>Shield</b><em id="shieldVal">100%</em></span><div class="bar"><i id="shieldBar" style="width:100%"></i></div></div>
          <div class="meter" id="podMeter"><span><b>Cargo pod</b><em id="podVal">None</em></span><div class="bar"><i id="podBar" style="width:0%"></i></div></div>
          <div class="meter danger hidden" id="anchorMeter"><span><b>Anchor</b><em id="anchorVal">100%</em></span><div class="bar"><i id="anchorBar" style="width:100%"></i></div></div>
        </div>
        <div class="advisory" id="advisory"><strong>AI crew</strong> Three clear life signs. A fourth echo flickers beneath the scanner noise.</div>
        <div class="start-screen" id="startScreen">
          <div class="start-card">
            <h1>Bring them home.</h1>
            <p>Aster, Morrow, and Kite are adrift beyond the debris belt. Kite's clock is running out. Beneath their signals, the scanner catches a fourth echo from the condemned Lantern Anchor.</p>
            <button class="primary" id="launchBtn">Launch rescue</button>
            <a class="city-back" href="/city/">← back to Solid City</a>
          </div>
        </div>
        <button class="pause-button hidden" id="pauseBtn" type="button" aria-label="Pause mission">Ⅱ&nbsp; Pause</button>
        <div class="pause-screen" id="pauseScreen" role="dialog" aria-modal="true" aria-labelledby="pauseTitle" aria-hidden="true">
          <div class="pause-card">
            <h2 id="pauseTitle">Mission paused</h2>
            <div class="pause-actions">
              <button class="primary" id="resumeBtn" type="button">Resume</button>
              <a class="pause-quit" href="/city/?back=strike">Quit to city</a>
            </div>
          </div>
        </div>
        <div class="result" id="result">
          <div><h2 id="resultTitle">Mission complete</h2><div class="result-copy" id="resultCopy"></div><button class="primary" id="againBtn">Fly again tonight</button></div>
        </div>
      </section>

      <aside class="station-panel" aria-label="Control stations">
        <div class="panel-head"><h2>Flight stations</h2><div class="hint">Tap to claim<br>Tap again to release</div></div>
        <div class="stations" id="stations">
          <button class="station" data-task="navigation" data-owner="ai"><span class="epoch">E1</span><div class="station-name">Navigation</div><div class="owner">AI pilot</div><div class="station-note">Steering, thrust, precision approach</div></button>
          <button class="station" data-task="extraction" data-owner="ai"><span class="epoch">E1</span><div class="station-name">Extraction</div><div class="owner">AI operator</div><div class="station-note">Stabilize, tracto