<!-- SOLID CITY · part 3184 -->
ition:sticky;top:0;background:var(--panel);display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--line);z-index:1}.drawer-head h2{font:700 20px "Chakra Petch",sans-serif;margin:0}.close{width:44px;height:44px;border:1px solid var(--line);background:var(--panel2);font-size:20px;cursor:pointer}.drawer-content{padding:16px}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.stat{background:var(--panel2);padding:12px;min-height:76px}.stat b{display:block;font:700 22px "Chakra Petch",sans-serif;margin-top:5px}.event-list{margin-top:14px;border-top:1px solid var(--line)}.event{display:grid;grid-template-columns:76px 120px 1fr;gap:8px;padding:8px 0;border-bottom:1px solid var(--line);font-size:10px;line-height:1.4}.event span:first-child{color:var(--muted)}
    .overlay{position:fixed;z-index:30;inset:0;background:rgba(1,4,6,.84);display:grid;place-items:center;padding:18px}.overlay.hidden{display:none}.brief{width:min(660px,100%);background:#0a1115;color:#edf5f5;border:1px solid #3b555f;box-shadow:0 30px 90px #000;padding:clamp(20px,5vw,42px)}.brief .eyebrow{color:#ff5a43;font-size:11px;letter-spacing:.14em}.brief h1{font:700 clamp(34px,7vw,64px)/.94 "Chakra Petch",sans-serif;margin:10px 0 16px;letter-spacing:-.03em}.brief p{color:#b7c7cb;line-height:1.55;font-size:13px}.orders{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#34474e;margin:22px 0}.order{background:#101b20;padding:12px}.order b{display:block;color:#fff;font:700 13px "Chakra Petch",sans-serif}.order span{font-size:10px;color:#91a6ac}.begin{width:100%;min-height:56px;border:0;background:#e23a26;color:white;font:700 16px "Chakra Petch",sans-serif;cursor:pointer;letter-spacing:.06em}.sub{margin-top:10px;text-align:center;font-size:10px;color:#789097}
    .end-actions{display:flex;gap:8px}.end-actions button{flex:1;min-height:50px;border:1px solid #526a72;background:#132229;color:#eaf3f3;cursor:pointer}.end-actions .primary{background:#e23a26;border-color:#e23a26}
    @media(max-width:900px){
      .app{display:block;padding-bottom:70px}.hud{grid-template-columns:1.5fr 1fr 1fr}.hud .readout:last-child{display:none}.battle-layout{display:block}.viewport{height:48dvh;min-height:360px}.viewport canvas{min-height:360px}.command-panel{grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto;gap:6px;margin-top:6px}.signal-bar{grid-column:1/-1}.station{min-height:110px}.station-body{padding:7px}.bottom{position:fixed;z-index:10;left:0;right:0;bottom:0;background:var(--bg);padding:7px max(8px,env(safe-area-inset-right)) max(7px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));display:block}.tabs{display:grid;grid-template-columns:repeat(3,1fr)}.tab{min-width:0}.ticker{display:none}.stats-grid{grid-template-columns:repeat(2,1fr)}
    }
    @media(max-width:560px){
      .hud{grid-template-columns:1.35fr 1fr}.hud .readout:nth-child(3){display:none}.readout{min-height:51px;padding:7px 9px}.value{font-size:15px}.viewport{height:42dvh;min-height:310px}.viewport canvas{min-height:310px}.phase-ribbon{left:8px;top:8px}.target-hint{display:none}.advisory{left:8px;bottom:8px;font-size:10px;padding:7px 9px}.command-panel{grid-template-columns:1fr 1fr}.station-head{padding:7px}.station-name{font-size:12px}.claim{min-height:36px;padding:4px 7px}.station-body{display:block}.station-desc{min-height:28px;margin-bottom:5px}.controls{justify-content:stretch}.control{flex:1;min-width:0;min-height:40px}.dpad{width:100%;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,34px)}.event{grid-template-columns:62px 84px 1fr}.orders{grid-template-columns:1fr}.order{padding:9px}
    }
    @media(max-height:560px) and (orientation:landscape){
      .app{padding-bottom:8px;display:grid}.hud{grid-template-columns:1.5fr repeat(3,1fr)}.hud .readout:nth-child(3),.hud .readout:last-child{display:flex}.battle-layout{display:grid;grid-template-columns:minmax(0,1fr) 46%;}.viewport,.viewport canvas{height:auto;min-height:300px}.command-panel{margin:0;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr 1fr}.station{min-height:0}.station-desc{display:none}.bottom{display:none}.signal-bar{grid-column:1/-1}.station-body{padding:5px}.phase-ribbon span{display:none}.advisory{font-size:9px;padding:6px}
    }
    @media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.meter>i{transition:none}}
  </style>
</head>
<body>
<div class="app">
  <header class="hud" aria-label="Siege status">
    <div class="readout"><span class="label">Current objective</span><span class="value" id="objective">Outer turret ring</span><div class="meter"><i id="objectiveMeter"></i></div></div>
    <div class="readout"><span class="label">Fortress target</span><span class="value" id="targetCount">8 / 8 <small>ACTIVE</small></span></div>
    <div class="readout"><span class="label">Fleet strength</span><span class="value" id="fleetStrength">100%</span><di