<!-- SOLID CITY · part 33 -->
g:.2em;color:var(--mut)}
.card p{font-size:13.5px;line-height:1.55;color:#cfe0e8}
.card .brief{border-left:3px solid var(--cyan);padding-left:12px;margin:14px 0}
.btn{display:block;width:100%;margin-top:10px;min-height:52px;border:1px solid var(--gold);background:var(--gold);color:#1a1206;font:900 14px monospace;letter-spacing:.1em;cursor:pointer}
.btn.ghost{background:transparent;color:var(--gold)}
.btn.danger{border-color:#ff5b66;color:#ff5b66;background:transparent}
#brief-last{display:none;margin-top:10px;padding:8px 10px;background:#101f29;border:1px solid #263a45;font:800 11px monospace;color:var(--gold)}
.ledger-h{margin:16px 0 6px;font:800 11px monospace;letter-spacing:.18em;color:var(--mut)}
#brief-ledger,#debrief-ledger{display:flex;flex-direction:column;gap:4px}
.lrow{display:flex;justify-content:space-between;background:#0d1820;border:1px solid #1d2b34;padding:6px 9px;font:800 11px monospace}
.lrow.win b{color:#51d39b}.lrow.loss b{color:#ff5b66}
.lempty{font:italic 12px serif;color:var(--mut)}
#debrief-title{font-family:Georgia,serif;font-size:30px;letter-spacing:.05em;margin:0 0 6px}
.kv{font:800 11px monospace;color:var(--mut);margin-top:8px}
</style>
</head>
<body>
<div id="stage"></div>
<div id="flash"></div>

<div id="topbar">
  <div id="stormbox"><div class="t">STORM INBOUND</div><div id="stormtime">4:00</div><div id="stormbarwrap"><div id="stormbar"></div></div></div>
  <div id="sysbars">
    <div class="sysbar" id="sb-propulsion">PROP</div>
    <div class="sysbar" id="sb-shielding">SHLD</div>
    <div class="sysbar" id="sb-comms">COM</div>
  </div>
  <button id="pausebtn" aria-label="pause">II</button>
</div>

<div id="chips">
  <div class="chip solid" id="chip-propulsion"><span class="who">SOLID</span>PROPULSION · <span class="dmg">NOMINAL</span></div>
  <div class="chip solid" id="chip-shielding"><span class="who">SOLID</span>SHIELDING · <span class="dmg">NOMINAL</span></div>
  <div class="chip solid" id="chip-comms"><span class="who">SOLID</span>COMMS · <span class="dmg">NOMINAL</span></div>
</div>

<ul id="feed"></ul>
<div id="prompt"></div>
<div id="repairwrap"><div class="bar"><div id="repairprog"></div></div></div>
<button id="repairbtn">HOLD TO REPAIR</button>
<div id="joy"><div id="joyknob"></div></div>

<div class="overlay" id="brief">
  <div class="card">
    <h1>AXIOM</h1><h2>THE LIVING FRONTIER · VERTICAL SLICE</h2>
    <div class="brief"><p><b>Station Meridian-Kepler is breaking up.</b> Propulsion, shielding, comms — three systems, one storm, 240 seconds. You are the watch officer. <b>SOLID</b> is your partner: she repairs what you don't, yields the instant you touch her task, and takes the next one. Tap a console to claim it. Hold REPAIR to fix it. Keep two systems alive and you ride out the storm.</p></div>
    <p style="color:var(--mut);font-size:12px">Move: WASD / left-thumb joystick · Look: drag / right-thumb · Claim: tap a console · Repair: hold the green button · P pauses.</p>
    <div id="brief-last"></div>
    <div class="ledger-h">THE FRONTIER REMEMBERS</div>
    <div id="brief-ledger"></div>
    <button class="btn" id="launch">▶ LAUNCH — TAKE THE WATCH</button>
    <button class="btn ghost danger" id="resetfrontier">RESET THE FRONTIER</button>
  </div>
</div>

<div class="overlay" id="debrief" style="display:none">
  <div class="card">
    <div id="debrief-title">STATION SAVED</div>
    <p id="debrief-why"></p>
    <div class="kv" id="debrief-sys"></div>
    <div class="ledger-h">THE FRONTIER REMEMBERS</div>
    <div id="debrief-ledger"></div>
    <button class="btn" id="again">↻ NEXT WATCH</button>
    <button class="btn ghost danger" id="resetfrontier2">RESET THE FRONTIER</button>
  </div>
</div>

<div class="overlay" id="pausemenu" style="display:none">
  <div class="card" style="text-align:center">
    <h1>PAUSED</h1><h2>THE STORM WAITS FOR NO ONE — EXCEPT NOW</h2>
    <button class="btn" id="resume">▶ RESUME</button>
    <button class="btn ghost" id="quit">QUIT TO BRIEFING</button>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.149.0/three.min.js"></script>
<script>
/**
 * ControlCoordination — reusable human/AI task authority.
 * No game logic, DOM access, network access, or persistence.
 */
const ControlCoordination = (() => {
  const now = () => performance.now();
  const wall = () => new Date().toISOString();
  const clone = value => JSON.parse(JSON.stringify(value));

  function create(options = {}) {
    const config = {
      freshnessMs: options.freshnessMs ?? 1200,
      heartbeatTimeoutMs: options.heartbeatTimeoutMs ?? 4500,
      releaseGraceMs: options.releaseGraceMs ?? 700,
      queueLimit: options.queueLimit ?? 6,
      drainDelayMs: options.drainDelayMs ?? 28,
      onExecute: options.onExecute ?? (() => {}),
      onSafeBehavior: options.onSafeBehavior ?? (() => {})
    };
    const operators = new Map();
    const tasks = new Map();
    const seenCommandIds = new Set();
    c