<!-- SOLID CITY · part 2922 -->
research-strip b{font:600 10px "Oxanium";display:block;margin-bottom:3px}.research-strip span{font-size:8px;line-height:1.4;color:var(--muted)}
    .kbd{border:1px solid var(--line);padding:1px 4px;background:var(--panel-2);font-size:8px}

    @media (max-width:900px){
      .game-grid{grid-template-columns:1fr}.side{grid-template-columns:1fr 1fr;grid-template-rows:auto auto}.side .log{grid-column:1/-1}.log-list{max-height:120px}canvas{height:min(52vh,540px)}
      .arch-grid{grid-template-columns:1fr}.arch-arrow{height:30px;transform:rotate(90deg)}.research-strip{grid-template-columns:1fr 1fr 1fr}.research-strip div:nth-child(n+4){grid-column:span 1}
    }
    @media (max-width:580px){
      .shell{padding:10px 8px 28px}.mission-rail{grid-template-columns:1fr}.route-chip{display:none}
      .ownership{grid-template-columns:1fr}.task+.task{border-left:0;border-top:1px solid var(--line)}.task{padding:8px 10px}.task-icon{width:30px;height:30px}.latency b{font-size:10px}
      .preset-row{gap:4px}.preset{padding:7px;min-height:58px}.preset span{font-size:8px}
      canvas{height:48vh;min-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 id="mirrorWrap" hidden><div class="hud-label" style="margin-top:7px"><span>MIRROR</span><span id="mirrorText">100%</span></div><div class="bar"><i id="mirrorBar"></i></div></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="debrie