<!-- SOLID CITY · part 3693 -->
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}}
  
    .warden-banner{position:absolute;top:78px;left:50%;transform:translateX(-50%);width:min(92%,560px);text-align:center;background:rgba(3,9,17,.91);border:1px solid #e5b567;color:#ffe6aa;padding:10px;font:800 12px ui-monospace,monospace;letter-spacing:.09em;pointer-events:none;z-index:4}
    .warden-banner[hidden]{display:none}
    .blackout{position:absolute;inset:0;background:rgba(0,0,0,.94);z-index:9;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;color:#f9c678;text-align:center;padding:14px}
    .blackout[hidden]{display:none}
    .blackout h2{font:900 clamp(20px,5vw,38px) Georgia,serif;margin:0}
    .blackout p{max-width:430px;font-size:12px;line-height:1.5}
    .emergency{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:min(100%,510px)}
    .emergency button{background:#1a1110;border:2px solid #c58043;color:#ffe0a3;min-height:76px;font:900 12px ui-monospace,monospace;cursor:pointer}
    .emergency button:active{background:#6b321b}
    .warden-progress{font:800 11px ui-monospace,monospace;color:#f9d9a1}
    @media(max-width:500px){.emergency button{font-size:10px;min-height:68px}.warden-banner{top:48px;font-size:10px}}
  </style>
</head>
<body>
<div class="app">
  <header class="mission-bar" aria-label="Mission status">
    <div class="objective"><strong>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="warden-banner" id="wardenBanner" hidden></div>
       <div class="blackout" id="blackout" hidden><h2>BRIDGE BLACKOUT</h2><p>The Warden has cut main power. Three emergency circuits remain. Work them by hand while your crew holds the line.</p><div class="emergency"><button id="emHelm" type="button">01 · HELM<br>ALIGN</button><button id="emShield" type="button">02 · SHIELD<br>REFLECT</button><button id="emGuns" type="button">03 · GUNS<br>SIGNAL</button></div><div class="warden-progress" id="emProgress">EMERGENCY SEQUENCE · 0 / 3</div></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="b