<!-- SOLID CITY · part 3714 -->
r)}.tables{grid-template-columns:1fr}.console{position:relative}
    }
    @media(max-width:500px){
      .app{padding:8px;gap:7px}.objective strong{font-size:17px}.objective span{font-size:10px}.game-shell{grid-template-rows:minmax(360px,52svh) auto}.stations{grid-template-columns:1fr}.station{min-height:126px}.controls .ctrl{min-height:44px}.crewline span{display:none}.brief-grid{grid-template-columns:1fr}.card{padding:20px}.advisory{max-width:75%;font-size:10px}.console-actions .flat{padding:0 9px}
    }
    @media(orientation:landscape) and (max-height:560px){
      .app{grid-template-rows:auto minmax(0,1fr);height:100svh;padding:6px;gap:6px}.mission-bar{min-height:35px}.objective span,.progress-label{display:none}.health .meter{width:78px}.game-shell{grid-template-columns:minmax(0,1fr) 45%;grid-template-rows:1fr}.viewport{min-height:0}.stations{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:5px}.station{min-height:0;padding:6px;gap:4px}.ctrl,.reclaim{min-height:32px}.console{display:none}.station-status{display:none}.hud-top{top:5px}.advisory{bottom:5px}.pause-btn{width:36px;height:36px}.progress-wrap{grid-column:auto;grid-row:auto}
    }
    @media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
  </style>
</head>
<body>
<div class="app">
  <header class="mission-bar" aria-label="Mission status">
    <div class="objective"><strong id="objectiveTitle">Reach Meridian Gate</strong><span>Cross the hostile sector. Survival and arrival take priority over kills.</span></div>
    <div class="health">
      <div class="meter"><label>HULL <span id="hullText">100%</span></label><div class="bar"><i id="hullBar"></i></div></div>
      <div class="meter"><label>SHIELD <span id="shieldText">100%</span></label><div class="bar shield"><i id="shieldBar"></i></div></div>
    </div>
    <div class="progress-wrap"><div class="progress"><i id="progressBar"></i></div><div class="progress-label" id="rangeText">8,000 KM</div></div>
    <button class="pause-btn" id="pauseBtn" type="button" aria-label="Pause game" hidden>Ⅱ</button>
  </header>

  <main class="game-shell">
    <section class="viewport" aria-label="Tactical battlefield">
      <canvas id="game" aria-label="Warship combat sector"></canvas>
      <div class="hud-top"><div class="chip" id="waveChip">WAVE 1 · CONTACTS 0</div><div class="chip signal"><i></i><span id="signalText">LINK VERIFIED · 0 ms</span></div></div>
      <div class="warning" id="warning"></div>
      <div class="advisory"><b>AI TACTICAL:</b> <span id="advisoryText">Crew stations ready. Touch any station to take command.</span></div>
    </section>

    <aside class="stations" aria-label="Command stations">
      <section class="station" data-station="nav" data-owner="ai">
        <div class="station-head"><span class="station-name">NAVIGATION</span><span class="owner">AI CREW</span></div>
        <div class="station-status">Tracking route · evasive helm</div>
        <button class="reclaim ai-control" type="button">RECLAIM HELM</button>
        <div class="controls four human-controls">
          <button class="ctrl" data-action="left" type="button">◀</button><button class="ctrl" data-action="up" type="button">THRUST</button><button class="ctrl" data-action="right" type="button">▶</button><button class="ctrl release" data-action="release" type="button">AI</button>
        </div>
      </section>
      <section class="station" data-station="batteryA" data-owner="ai">
        <div class="station-head"><span class="station-name">BATTERY A · 4 GUNS</span><span class="owner">AI CREW</span></div>
        <div class="station-status">Forward arc · target seeking</div>
        <button class="reclaim ai-control" type="button">RECLAIM BATTERY A</button>
        <div class="controls human-controls">
          <button class="ctrl" data-action="cycle" type="button">TARGET</button><button class="ctrl primary" data-action="fire" type="button">SALVO</button><button class="ctrl release" data-action="release" type="button">AI</button>
        </div>
      </section>
      <section class="station" data-station="batteryB" data-owner="ai">
        <div class="station-head"><span class="station-name">BATTERY B · 4 GUNS</span><span class="owner">AI CREW</span></div>
        <div class="station-status">Aft arc · escort suppression</div>
        <button class="reclaim ai-control" type="button">RECLAIM BATTERY B</button>
        <div class="controls human-controls">
          <button class="ctrl" data-action="cycle" type="button">TARGET</button><button class="ctrl primary" data-action="fire" type="button">SALVO</button><button class="ctrl release" data-action="release" type="button">AI</button>
        </div>
      </section>
      <section class="station" data-station="defense" data-owner="ai">
        <div class="station-head"><span class="station-name">SHIELDS / DEFENSE</span><span class="owner">AI CREW</span></div>
    