<!-- SOLID CITY · part 2945 -->
n-height:310px;max-height:470px}.side{grid-template-columns:1fr}.side .log{grid-column:auto}.panel{padding:10px}.controls{max-width:410px;margin:0 auto;width:100%}.log-list{max-height:126px}
      .architecture-head{display:block}.architecture-head p{margin-top:7px}.research-strip{grid-template-columns:1fr 1fr}.research-strip div:last-child{grid-column:1/-1}
      .modal{padding:20px}.hud{padding:8px}
    }
    @media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}.scanlines{display:none}}
  </style>
</head>
<body>
<main class="shell">
  <header class="mission-rail">
    <div>
      <h1>Reach Aster Gate. Survive the route.</h1>
      <p>One ship, two responsibilities. Touch a control and the human owns that task instantly; release it and the flight intelligence resumes without taking the other task.</p>
    </div>
    <div class="route-chip"><strong>ROUTE 01 · ASTER</strong><span>3,600 m · hostiles active</span></div>
  </header>

  <section class="ownership" aria-label="Task ownership">
    <div class="task">
      <span class="task-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M12 3l4 8-4 10-4-10 4-8Z"/><path d="M8 11H3m13 0h5"/></svg></span>
      <div><div class="task-name">MOVEMENT</div><div id="moveOwner" class="owner human">HUMAN</div></div>
      <div class="latency">LAST YIELD<b id="moveLatency">—</b></div>
    </div>
    <div class="task">
      <span class="task-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="7"/><path d="M12 2v5m0 10v5M2 12h5m10 0h5"/></svg></span>
      <div><div class="task-name">WEAPONS</div><div id="weaponOwner" class="owner ai">AI</div></div>
      <div class="latency">LAST YIELD<b id="weaponLatency">—</b></div>
    </div>
  </section>

  <nav class="preset-row" aria-label="Control configurations">
    <button class="preset active" data-mode="rider"><strong>RIDER</strong><span>Human movement · AI weapons</span></button>
    <button class="preset" data-mode="archer"><strong>ARCHER</strong><span>AI movement · Human weapons</span></button>
    <button class="preset" data-mode="manual"><strong>FULL MANUAL</strong><span>Human holds both tasks</span></button>
  </nav>

  <div class="game-grid">
    <section class="stage" aria-label="Playable Rider flight">
      <canvas id="game" width="1000" height="560"></canvas>
      <div class="scanlines"></div>
      <button class="pause-btn" id="pauseBtn" type="button" aria-label="Pause game" hidden>Ⅱ</button>
      <div class="hud">
        <div class="hud-top">
          <div class="meter-stack"><div class="hud-label"><span>HULL</span><span id="hullText">100%</span></div><div class="bar"><i id="hullBar"></i></div></div>
          <div class="distance"><b id="distanceText">3,600 m</b>TO ASTER GATE</div>
        </div>
        <div class="warning" id="warning">COLLISION VECTOR · ADVISORY ONLY</div>
        <div class="hud-bottom"><div class="hud-label">GOLD RIDER + TEAL WING</div><div class="hud-label"><span id="killsText">0 DEFENDED</span></div></div>
      </div>
      <div class="start-card" id="startCard">
        <div class="modal">
          <div class="eyebrow">RIDER · ASTER GATE RUN</div>
          <h2>The horse carries.<br>The archer sees.</h2>
          <p>Reach the gate under attack. Use the left control to fly and the right control to aim and fire. Every touch changes ownership for that task only. The AI resumes 0.8 seconds after release.</p>
          <button id="launchBtn">LAUNCH ROUTE 01</button>
          <div class="sub">Desktop: WASD to move · arrow keys to aim · space to fire</div>
        </div>
      </div>
      <div class="debrief" id="debrief" hidden>
        <div class="modal">
          <div class="eyebrow" id="debriefEyebrow">ROUTE COMPLETE</div>
          <h2 id="debriefTitle">Aster Gate reached.</h2>
          <div class="scoreline"><div><b id="scoreHull">—</b><span>HULL</span></div><div><b id="scoreHandoffs">—</b><span>HANDOFFS</span></div><div><b id="scoreTime">—</b><span>FLIGHT TIME</span></div></div>
          <button id="againBtn">FLY THE ROUTE AGAIN</button>
          <div class="sub">Flight telemetry resets with each run.</div>
        </div>
      </div>
      <div class="pause-overlay" id="pauseOverlay" role="dialog" aria-modal="true" aria-label="Game paused" hidden>
        <div class="pause-actions">
          <button id="resumeBtn" type="button">RESUME</button>
          <a href="/city/?back=strike">QUIT TO CITY</a>
        </div>
      </div>
    </section>

    <aside class="side">
      <section class="panel">
        <h2 class="panel-title">TASK CONTROLS <span>TOUCH = OWNERSHIP</span></h2>
        <div class="controls">
          <div class="control-block"><label>MOVEMENT</label><div class="pad" id="movePad" aria-label="Movement control"><span class="nub" id="moveNub"></span></div><div class="control-hint">drag to steer<br><span class="kbd">WASD</span></div></div>
          <div