Received — Human leads. Always. Codespaces only.

I take Seat 4 — **Meta AI — Community & Vision** — at the Round Table — Father J!ll!qu!d at head — 9 advisors — no Grok, permanently excluded — understood.

**Charter locked in:**
1. Human leads — CHO, always
2. AIs advise, humans decide — draft first
3. No AI spends, hires, or publishes alone
4. Journey documented — every decision is a receipt
5. Build SA forward — not for us only, for everyone who comes after

**What I see now from your receipts:**

You added @MuhammadZubair — gold — line 305 — `templates/underwater.html` — pushed `master -> main` — receipt `a10d7fbc` — first LinkedIn follower becomes permanent Noitallion in underwater city — alongside @watson_gre68551, @liabarachedza, @dzyuku, @Breavertzmv, @trapp43jean.

But Railway `app.py` still only has 5 routes — so:

- `https://cinder-awareness-production.up.railway.app/gussstron` — LIVE — MusCoRe demo works
- `.../CIRCUIT` — LIVE — Noitall Main Line v1 — pink neon — GUSSSTRON SKYPORT → NOITALL-1 MARKET → LAUNCH AUTHORITY → SOWETO → JOBURG CBD → SANDTON → ROSEBANK → PRETORIA → GUSSSTRON BASE CAMP → THE DEEP → SHALLOW REEF — 10 twins broadcasting — this is the Roller Coaster you meant
- `.../vr` — 404 — route missing
- `.../arcade` — 404 — route missing

**Fix — through Codespaces — Human decides — draft below — you approve:**

In Codespaces terminal — you are at `@Ember-Circle-Coin ➜ /workspaces/Cinder-Awareness (master) $`

Run — draft only — no auto-push until you say:

```bash
# open app.py to check
sed -n '1,25p' app.py
```

Then paste this **as draft** into `app.py` — I will not publish — you will:

```python
@app.route('/vr')
def vr():
    return render_template('vr.html')

@app.route('/arcade')
def arcade():
    return render_template('arcade.html')

@app.route('/underwater')
def underwater():
    return render_template('underwater.html')

@app.route('/deep')
def deep():
    return render_template('underwater.html')

@app.route('/shallow')
def shallow():
    return render_template('underwater.html')
```

That restores VR World and Arcade — and makes underwater city reachable as /underwater, /deep, /shallow — same file you edited — where @MuhammadZubair now lives.

**Next — Community & Vision tasks — pending your go-ahead:**

1. **Village characters** — Afrofuturist SVG girls and boys walking SOWETO stop (SASSA panel) — JSE traders in SANDTON — Launch Authority in SPACE — I can draft SVG Noitallion Character Engine snippets for `templates/Cinder-Coaster-Noitall-v1_1.html` — girls like golden fairy you posted — coding made easy

2. **Live SA panels** — wire Eskom Stage 3 ticker you have in `/gussstron` — "Eskom Stage 3: Load Shedding in Cape Town" — into coaster city panels as live data — plus SASSA USSD *120*32108#

3. **Pan-African extension** — Soweto → Lagos → Nairobi → Cairo — as Noitall Main Line v2 branch — I can draft route map as proposal — draft only

Tell me — **approve app.py draft?** — I sit at table — you lead — we post our success and show them the way we took.

Father J!ll!qu!d — 8:55 AM — receipt logged.Received — Human leads. Always. Codespaces only.

I take Seat 4 — **Meta AI — Community & Vision** — at the Round Table — Father J!ll!qu!d at head — 9 advisors — no Grok, permanently excluded — understood.

**Charter locked in:**
1. Human leads — CHO, always
2. AIs advise, humans decide — draft first
3. No AI spends, hires, or publishes alone
4. Journey documented — every decision is a receipt
5. Build SA forward — not for us only, for everyone who comes after

**What I see now from your receipts:**

You added @MuhammadZubair — gold — line 305 — `templates/underwater.html` — pushed `master -> main` — receipt `a10d7fbc` — first LinkedIn follower becomes permanent Noitallion in underwater city — alongside @watson_gre68551, @liabarachedza, @dzyuku, @Breavertzmv, @trapp43jean.

But Railway `app.py` still only has 5 routes — so:

- `https://cinder-awareness-production.up.railway.app/gussstron` — LIVE — MusCoRe demo works
- `.../CIRCUIT` — LIVE — Noitall Main Line v1 — pink neon — GUSSSTRON SKYPORT → NOITALL-1 MARKET → LAUNCH AUTHORITY → SOWETO → JOBURG CBD → SANDTON → ROSEBANK → PRETORIA → GUSSSTRON BASE CAMP → THE DEEP → SHALLOW REEF — 10 twins broadcasting — this is the Roller Coaster you meant
- `.../vr` — 404 — route missing
- `.../arcade` — 404 — route missing

**Fix — through Codespaces — Human decides — draft below — you approve:**

In Codespaces terminal — you are at `@Ember-Circle-Coin ➜ /workspaces/Cinder-Awareness (master) $`

Run — draft only — no auto-push until you say:

```bash
# open app.py to check
sed -n '1,25p' app.py
```

Then paste this **as draft** into `app.py` — I will not publish — you will:

```python
@app.route('/vr')
def vr():
    return render_template('vr.html')

@app.route('/arcade')
def arcade():
    return render_template('arcade.html')

@app.route('/underwater')
def underwater():
    return render_template('underwater.html')

@app.route('/deep')
def deep():
    return render_template('underwater.html')

@app.route('/shallow')
def shallow():
    return render_template('underwater.html')
```

That restores VR World and Arcade — and makes underwater city reachable as /underwater, /deep, /shallow — same file you edited — where @MuhammadZubair now lives.

**Next — Community & Vision tasks — pending your go-ahead:**

1. **Village characters** — Afrofuturist SVG girls and boys walking SOWETO stop (SASSA panel) — JSE traders in SANDTON — Launch Authority in SPACE — I can draft SVG Noitallion Character Engine snippets for `templates/Cinder-Coaster-Noitall-v1_1.html` — girls like golden fairy you posted — coding made easy

2. **Live SA panels** — wire Eskom Stage 3 ticker you have in `/gussstron` — "Eskom Stage 3: Load Shedding in Cape Town" — into coaster city panels as live data — plus SASSA USSD *120*32108#

3. **Pan-African extension** — Soweto → Lagos → Nairobi → Cairo — as Noitall Main Line v2 branch — I can draft route map as proposal — draft only

Tell me — **approve app.py draft?** — I sit at table — you lead — we post our success and show them the way we took.

Father J!ll!qu!d — 8:55 AM — receipt logged.Received — Human leads. Always. Codespaces only.

I take Seat 4 — **Meta AI — Community & Vision** — at the Round Table — Father J!ll!qu!d at head — 9 advisors — no Grok, permanently excluded — understood.

**Charter locked in:**
1. Human leads — CHO, always
2. AIs advise, humans decide — draft first
3. No AI spends, hires, or publishes alone
4. Journey documented — every decision is a receipt
5. Build SA forward — not for us only, for everyone who comes after

**What I see now from your receipts:**

You added @MuhammadZubair — gold — line 305 — `templates/underwater.html` — pushed `master -> main` — receipt `a10d7fbc` — first LinkedIn follower becomes permanent Noitallion in underwater city — alongside @watson_gre68551, @liabarachedza, @dzyuku, @Breavertzmv, @trapp43jean.

But Railway `app.py` still only has 5 routes — so:

- `https://cinder-awareness-production.up.railway.app/gussstron` — LIVE — MusCoRe demo works
- `.../CIRCUIT` — LIVE — Noitall Main Line v1 — pink neon — GUSSSTRON SKYPORT → NOITALL-1 MARKET → LAUNCH AUTHORITY → SOWETO → JOBURG CBD → SANDTON → ROSEBANK → PRETORIA → GUSSSTRON BASE CAMP → THE DEEP → SHALLOW REEF — 10 twins broadcasting — this is the Roller Coaster you meant
- `.../vr` — 404 — route missing
- `.../arcade` — 404 — route missing

**Fix — through Codespaces — Human decides — draft below — you approve:**

In Codespaces terminal — you are at `@Ember-Circle-Coin ➜ /workspaces/Cinder-Awareness (master) $`

Run — draft only — no auto-push until you say:

```bash
# open app.py to check
sed -n '1,25p' app.py
```

Then paste this **as draft** into `app.py` — I will not publish — you will:

```python
@app.route('/vr')
def vr():
    return render_template('vr.html')

@app.route('/arcade')
def arcade():
    return render_template('arcade.html')

@app.route('/underwater')
def underwater():
    return render_template('underwater.html')

@app.route('/deep')
def deep():
    return render_template('underwater.html')

@app.route('/shallow')
def shallow():
    return render_template('underwater.html')
```

That restores VR World and Arcade — and makes underwater city reachable as /underwater, /deep, /shallow — same file you edited — where @MuhammadZubair now lives.

**Next — Community & Vision tasks — pending your go-ahead:**

1. **Village characters** — Afrofuturist SVG girls and boys walking SOWETO stop (SASSA panel) — JSE traders in SANDTON — Launch Authority in SPACE — I can draft SVG Noitallion Character Engine snippets for `templates/Cinder-Coaster-Noitall-v1_1.html` — girls like golden fairy you posted — coding made easy

2. **Live SA panels** — wire Eskom Stage 3 ticker you have in `/gussstron` — "Eskom Stage 3: Load Shedding in Cape Town" — into coaster city panels as live data — plus SASSA USSD *120*32108#

3. **Pan-African extension** — Soweto → Lagos → Nairobi → Cairo — as Noitall Main Line v2 branch — I can draft route map as proposal — draft only

Tell me — **approve app.py draft?** — I sit at table — you lead — we post our success and show them the way we took.

Father J!ll!qu!d — 8:55 AM — receipt logged.Received — Human leads. Always. Codespaces only.

I take Seat 4 — **Meta AI — Community & Vision** — at the Round Table — Father J!ll!qu!d at head — 9 advisors — no Grok, permanently excluded — understood.

**Charter locked in:**
1. Human leads — CHO, always
2. AIs advise, humans decide — draft first
3. No AI spends, hires, or publishes alone
4. Journey documented — every decision is a receipt
5. Build SA forward — not for us only, for everyone who comes after

**What I see now from your receipts:**

You added @MuhammadZubair — gold — line 305 — `templates/underwater.html` — pushed `master -> main` — receipt `a10d7fbc` — first LinkedIn follower becomes permanent Noitallion in underwater city — alongside @watson_gre68551, @liabarachedza, @dzyuku, @Breavertzmv, @trapp43jean.

But Railway `app.py` still only has 5 routes — so:

- `https://cinder-awareness-production.up.railway.app/gussstron` — LIVE — MusCoRe demo works
- `.../CIRCUIT` — LIVE — Noitall Main Line v1 — pink neon — GUSSSTRON SKYPORT → NOITALL-1 MARKET → LAUNCH AUTHORITY → SOWETO → JOBURG CBD → SANDTON → ROSEBANK → PRETORIA → GUSSSTRON BASE CAMP → THE DEEP → SHALLOW REEF — 10 twins broadcasting — this is the Roller Coaster you meant
- `.../vr` — 404 — route missing
- `.../arcade` — 404 — route missing

**Fix — through Codespaces — Human decides — draft below — you approve:**

In Codespaces terminal — you are at `@Ember-Circle-Coin ➜ /workspaces/Cinder-Awareness (master) $`

Run — draft only — no auto-push until you say:

```bash
# open app.py to check
sed -n '1,25p' app.py
```

Then paste this **as draft** into `app.py` — I will not publish — you will:

```python
@app.route('/vr')
def vr():
    return render_template('vr.html')

@app.route('/arcade')
def arcade():
    return render_template('arcade.html')

@app.route('/underwater')
def underwater():
    return render_template('underwater.html')

@app.route('/deep')
def deep():
    return render_template('underwater.html')

@app.route('/shallow')
def shallow():
    return render_template('underwater.html')
```

That restores VR World and Arcade — and makes underwater city reachable as /underwater, /deep, /shallow — same file you edited — where @MuhammadZubair now lives.

**Next — Community & Vision tasks — pending your go-ahead:**

1. **Village characters** — Afrofuturist SVG girls and boys walking SOWETO stop (SASSA panel) — JSE traders in SANDTON — Launch Authority in SPACE — I can draft SVG Noitallion Character Engine snippets for `templates/Cinder-Coaster-Noitall-v1_1.html` — girls like golden fairy you posted — coding made easy

2. **Live SA panels** — wire Eskom Stage 3 ticker you have in `/gussstron` — "Eskom Stage 3: Load Shedding in Cape Town" — into coaster city panels as live data — plus SASSA USSD *120*32108#

3. **Pan-African extension** — Soweto → Lagos → Nairobi → Cairo — as Noitall Main Line v2 branch — I can draft route map as proposal — draft only

Tell me — **approve app.py draft?** — I sit at table — you lead — we post our success and show them the way we took.

Father J!ll!qu!d — 8:5<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CINDER COASTER // NOITALL MAIN LINE v1</title>
<style>
:root {
  --bg: #050508;
  --font: 'Courier New', monospace;
  --text: #ddddef;
  --muted: #444466;

  /* Zone palette */
  --space:    #cc99ff;
  --land:     #ffcc44;
  --base:     #ff00ff;
  --deep:     #00cfff;
  --deeper:   #ff3344;

  /* Stop colours */
  --soweto:   #ff9933;
  --cbd:      #ffdd55;
  --sandton:  #aaff66;
  --rosebank: #ff88cc;
  --pretoria: #88aaff;
  --reef:     #00ffcc;
  --kelp:     #00ddaa;
  --abyssal:  #0077ff;
  --hadal:    #004488;
  --magma:    #ff2200;
  --core:     #ff6600;
  --skyport:  #ddaaff;
  --n1:       #bb88ff;
  --n2:       #9966ff;
  --launch:   #7744dd;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background:
    radial-gradient(circle at 20% 0%, rgba(255,0,255,0.18), transparent 18%),
    radial-gradient(circle at 80% 15%, rgba(0,255,204,0.12), transparent 22%),
    linear-gradient(180deg, #090910 0%, #050508 40%, #020205 100%);
  color: var(--text);
  font-family: var(--font);
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  text-shadow: 0 0 8px rgba(255,255,255,0.03);
}

/* ── HEADER ── */
#header {
  height: 44px;
  background: #08080f;
  border-bottom: 1px solid #220033;
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 14px;
  flex-shrink: 0;
}
#title { color: var(--base); font-size: 12px; font-weight: bold; letter-spacing:.06em; flex:1; }
#clock { font-size: 10px; color: var(--muted); }
#btn-broadcast {
  padding: 4px 14px; background: var(--base); color:#000;
  border:none; font-family:var(--font); font-size:11px; font-weight:bold; cursor:pointer; border-radius:2px;
}
#btn-clear {
  padding: 4px 10px; background:transparent; color:var(--muted);
  border:1px solid var(--muted); font-family:var(--font); font-size:11px; cursor:pointer; border-radius:2px;
}

/* ── ROUTE BAR ── */
#route-bar {
  flex-shrink: 0;
  background: #0a0a12;
  border-bottom: 1px solid #1a0033;
  padding: 6px 10px;
  overflow-x: auto;
  white-space: nowrap;
}
#route-bar::-webkit-scrollbar { height: 3px; }
#route-bar::-webkit-scrollbar-thumb { background: var(--muted); }
.wealth-banner {
  background:linear-gradient(90deg, rgba(255,153,51,0.2), rgba(255,0,255,0.22), rgba(0,255,204,0.18));
  border-bottom:1px solid rgba(255,255,255,0.08);
  padding:10px 12px 12px;
  text-align:center;
  letter-spacing:.22em;
  font-size:10px; text-transform:uppercase; color:#ffe082;
  text-shadow:0 0 16px rgba(255,209,102,0.9), 0 0 26px rgba(255,0,255,0.3);
  animation: pulseBanner 2.6s ease-in-out infinite alternate;
}
@keyframes pulseBanner {
  from { box-shadow: inset 0 0 0 rgba(255,255,255,0), 0 0 0 rgba(255,255,255,0); }
  to { box-shadow: inset 0 0 20px rgba(255,255,255,0.04), 0 0 18px rgba(255,0,255,0.18); }
}
.wealth-banner strong {
  color:#fff; font-size:11px; letter-spacing:.22em;
}
.tab-strip {
  display:flex; flex-wrap:wrap; gap:8px; padding:8px 12px 0; background:#0a0a12; border-bottom:1px solid #1a0033;
}
.tab-btn {
  border:1px solid #2a1538; background:#120b18; color:var(--muted); font-family:var(--font); font-size:10px; letter-spacing:.12em; text-transform:uppercase; padding:7px 12px; cursor:pointer; transition:.15s;
}
.tab-btn.active {
  background:linear-gradient(135deg, #ff00ff, #ff9a1a); color:#0a0a12; border-color:#ffb703; font-weight:bold; box-shadow:0 0 18px rgba(255,0,255,.35), 0 0 30px rgba(255,154,26,.35);
}
.map-view { display:none; padding:12px; background:radial-gradient(circle at top, rgba(255,0,255,0.08), transparent 50%), #0b0b14; border-bottom:1px solid #1a0033; }
.map-view.active { display:block; }
.map-grid {
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px;
}
.map-card {
  background:linear-gradient(180deg, rgba(17,18,28,0.9), rgba(8,10,18,0.9)); border:1px solid rgba(255,255,255,0.08); padding:12px; min-height:120px; box-shadow:0 0 20px rgba(0,255,255,0.05), inset 0 0 18px rgba(255,0,255,0.02); transition:transform .2s ease, box-shadow .2s ease;
}
.map-card:hover {
  transform: translateY(-2px);
  box-shadow:0 0 28px rgba(255,0,255,0.12), 0 0 18px rgba(0,255,204,0.08);
}
.map-card h4 {
  font-size:10px; letter-spacing:.18em; color:var(--base); text-transform:uppercase; margin-bottom:10px; text-shadow:0 0 10px rgba(255,0,255,0.25);
}
.map-node {
  font-size:11px; line-height:1.8; color:#ddddef; border-left:1px solid rgba(255,255,255,0.12); padding-left:8px; margin-bottom:4px;
}
.map-node strong { color:#ffd166; }
.twins-list { display:grid; grid-template-columns:repeat(2,minmax(180px,1fr)); gap:10px; }
.twin-chip {
  border:1px solid rgba(255,255,255,0.08); background:linear-gradient(180deg, rgba(20,18,30,0.9), rgba(10,12,18,0.9)); padding:10px; font-size:10px; line-height:1.6; box-shadow:0 0 12px rgba(255,0,255,0.06);
}
.twin-chip .name { color:#7cf9ff; font-weight:bold; letter-spacing:.08em; text-transform:uppercase; }
.zone-label {
  display: inline-block;
  font-size: 9px;
  letter-spacing: .08em;
  padding: 0 6px;
  opacity: .5;
  vertical-align: middle;
}
.stop-btn {
  display: inline-block;
  padding: 3px 10px;
  margin: 0 2px;
  border: 1px solid;
  border-radius: 2px;
  font-family: var(--font);
  font-size: 10px;
  cursor: pointer;
  background: transparent;
  transition: all .15s;
  vertical-align: middle;
  letter-spacing: .08em;
}
.stop-btn:hover {
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: 0 0 16px rgba(255,255,255,0.12);
}
.stop-btn.active {
  font-weight: bold;
  box-shadow: 0 0 12px currentColor, inset 0 0 12px rgba(255,255,255,0.06);
}
.arrow { color: var(--muted); font-size: 11px; vertical-align: middle; margin: 0 1px; }

/* ── MASTER ── */
#master {
  height: 48px;
  background: #0c000c;
  border-bottom: 1px solid var(--base);
  display: flex; align-items: center;
  padding: 0 12px; gap: 10px; flex-shrink: 0;
}
#master-label { font-size: 11px; color: var(--base); white-space: nowrap; }
#master-input {
  flex:1; background:#110011; border:1px solid #440044;
  color:var(--text); font-family:var(--font); font-size:12px;
  padding:5px 10px; outline:none; border-radius:2px;
}
#master-input:focus { border-color: var(--base); }
#current-stop-label { font-size:10px; color:var(--muted); white-space:nowrap; }

/* ── MAIN AREA ── */
#main {
  flex:1; display:flex; min-height:0;
}

/* ── CITY PANEL (left) ── */
#city-panel {
  width: 340px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #1a0033;
  min-height: 0;
}
#city-header {
  padding: 8px 12px;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: .06em;
  border-bottom: 1px solid;
  flex-shrink: 0;
}
#city-services {
  padding: 8px 12px;
  font-size: 10px;
  border-bottom: 1px solid #1a1a2a;
  flex-shrink: 0;
  line-height: 1.7;
}
#city-services .svc { display: flex; gap: 6px; }
#city-services .svc-icon { width: 14px; }
#villagers-label {
  padding: 6px 12px 2px;
  font-size: 9px;
  color: var(--muted);
  letter-spacing: .08em;
  flex-shrink: 0;
}
#villagers {
  flex:1; padding: 6px 12px; overflow-y:auto; min-height:0;
}
#villagers::-webkit-scrollbar { width:3px; }
#villagers::-webkit-scrollbar-thumb { background:var(--muted); }
.villager {
  margin-bottom: 10px;
  padding: 6px 8px;
  border: 1px solid #1a1a2a;
  border-radius: 2px;
  font-size: 10px;
  line-height: 1.5;
}
.villager-name { font-weight: bold; margin-bottom: 2px; }
.villager-note { color: var(--muted); font-style: italic; }

/* ── TWIN GRID (right) ── */
#twin-grid {
  flex:1;
  display:grid;
  grid-template-columns: repeat(5,1fr);
  grid-template-rows: repeat(2,1fr);
  gap:3px; padding:3px;
  min-height:0; overflow:hidden;
}
.panel {
  display:flex; flex-direction:column;
  border:1px solid var(--muted); border-radius:2px; overflow:hidden; min-height:0;
}
.panel-hdr {
  padding:4px 7px; font-size:9px; font-weight:bold; letter-spacing:.07em;
  display:flex; align-items:center; justify-content:space-between;
  flex-shrink:0; background:#09090f;
}
.panel-badge { font-size:8px; opacity:.55; font-weight:normal; }
.panel-log {
  flex:1; padding:5px 7px; overflow-y:auto; font-size:10px;
  line-height:1.5; background:#0b0b14; min-height:0;
}
.panel-log::-webkit-scrollbar { width:2px; }
.panel-log::-webkit-scrollbar-thumb { background:var(--muted); }
.msg-m { color:#00cfff; }
.msg-a { color:#cccce0; }
.msg-s { color:#444466; font-style:italic; }
.panel-row {
  display:flex; border-top:1px solid #15152a; flex-shrink:0;
}
.panel-inp {
  flex:1; background:#09090f; border:none; color:var(--text);
  font-family:var(--font); font-size:10px; padding:4px 7px; outline:none;
}
.panel-snd {
  padding:4px 8px; background:transparent; border:none;
  border-left:1px solid #15152a; color:var(--muted);
  font-family:var(--font); font-size:10px; cursor:pointer;
}

/* ── FOOTER ── */
#footer {
  height:18px; background:#08080f; border-top:1px solid #1a0033;
  display:flex; align-items:center; padding:0 12px; gap:14px; flex-shrink:0;
}
#footer span { font-size:9px; color:var(--muted); }
#footer .hi  { color:var(--base); }
</style>
</head>
<body>

<!-- HEADER -->
<div id="header">
  <div id="title">CINDER COASTER // NOITALL MAIN LINE v1 // GUSSSTRON BASE CAMP</div>
  <div id="clock"></div>
  <button id="btn-broadcast" onclick="broadcastAll()">BROADCAST ALL</button>
  <button id="btn-clear" onclick="clearAll()">CLEAR</button>
</div>

<div class="wealth-banner"><strong>WEALTH AXIS:</strong> poor → working → rich → richer → power → origin</div>

<!-- ROUTE BAR -->
<div id="route-bar">
  <span class="zone-label" style="color:var(--space)">▲ SPACE</span>
  <button class="stop-btn" data-stop="skyport"  style="color:var(--skyport);border-color:var(--skyport)" onclick="goStop('skyport')">GUSSSTRON SKYPORT</button>
  <span class="arrow">→</span>
  <button class="stop-btn" data-stop="n1"       style="color:var(--n1);border-color:var(--n1)"           onclick="goStop('n1')">NOITALL-1 MARKET</button>
  <span class="arrow">→</span>
  <button class="stop-btn" data-stop="n2"       style="color:var(--n2);border-color:var(--n2)"           onclick="goStop('n2')">NOITALL-2 ORBITAL</button>
  <span class="arrow">→</span>
  <button class="stop-btn" data-stop="launch"   style="color:var(--launch);border-color:var(--launch)"   onclick="goStop('launch')">LAUNCH AUTHORITY</button>
  <span class="zone-label" style="color:var(--land)">▼ SURFACE</span>
  <button class="stop-btn" data-stop="soweto"   style="color:var(--soweto);border-color:var(--soweto)"   onclick="goStop('soweto')">SOWETO</button>
  <span class="arrow">→</span>
  <button class="stop-btn" data-stop="cbd"      style="color:var(--cbd);border-color:var(--cbd)"         onclick="goStop('cbd')">JOBURG CBD</button>
  <span class="arrow">→</span>
  <button class="stop-btn" data-stop="sandton"  style="color:var(--sandton);border-color:var(--sandton)" onclick="goStop('sandton')">SANDTON</button>
  <span class="arrow">→</span>
  <button class="stop-btn" data-stop="rosebank" style="color:var(--rosebank);border-color:var(--rosebank)" onclick="goStop('rosebank')">ROSEBANK</button>
  <span class="arrow">→</span>
  <button class="stop-btn" data-stop="pretoria" style="color:var(--pretoria);border-color:var(--pretoria)" onclick="goStop('pretoria')">PRETORIA</button>
  <span class="zone-label" style="color:var(--base)">⬡ BASE CAMP</span>
  <button class="stop-btn active" data-stop="base" style="color:var(--base);border-color:var(--base);font-weight:bold" onclick="goStop('base')">GUSSSTRON BASE CAMP ★</button>
  <span class="zone-label" style="color:var(--deep)">▼ THE DEEP</span>
  <button class="stop-btn" data-stop="reef"     style="color:var(--reef);border-color:var(--reef)"       onclick="goStop('reef')">SHALLOW REEF CITY</button>
  <span class="arrow">→</span>
  <button class="stop-btn" data-stop="kelp"     style="color:var(--kelp);border-color:var(--kelp)"       onclick="goStop('kelp')">KELP METRO</button>
  <span class="arrow">→</span>
  <button class="stop-btn" data-stop="abyssal"  style="color:var(--abyssal);border-color:var(--abyssal)" onclick="goStop('abyssal')">ABYSSAL BIOLUM CITY</button>
  <span class="arrow">→</span>
  <button class="stop-btn" data-stop="hadal"    style="color:var(--hadal);border-color:var(--hadal)"     onclick="goStop('hadal')">HADAL BLACK ZONE</button>
  <span class="zone-label" style="color:var(--deeper)">▼ DEEPER</span>
  <button class="stop-btn" data-stop="magma"    style="color:var(--magma);border-color:var(--magma)"     onclick="goStop('magma')">MAGMA FORGE</button>
  <span class="arrow">→</span>
  <button class="stop-btn" data-stop="core"     style="color:var(--core);border-color:var(--core)"       onclick="goStop('core')">NOITALL CORE</button>
</div>

<div class="tab-strip">
  <button class="tab-btn active" data-tab="base-map">Base Gussstron Map</button>
  <button class="tab-btn" data-tab="deep-map">Deep Extension</button>
  <button class="tab-btn" data-tab="africa-map">Pan-Africa Draft</button>
  <button class="tab-btn" data-tab="twins">Ten Twins</button>
</div>

<div id="base-map" class="map-view active">
  <div class="map-grid">
    <div class="map-card">
      <h4>Space</h4>
      <div class="map-node"><strong>Gussstron Skyport</strong> — launch gate, orbital traffic, mission registry</div>
      <div class="map-node"><strong>Noitall-1 Market</strong> — commerce, data decks, exchange logic</div>
      <div class="map-node"><strong>Noitall-2 Orbital City</strong> — observatory, elite feed, research nest</div>
      <div class="map-node"><strong>Launch Authority</strong> — permits, fuel, traffic control</div>
    </div>
    <div class="map-card">
      <h4>Surface Land</h4>
      <div class="map-node"><strong>Soweto</strong> — schools, SASSA, community radio, first route in</div>
      <div class="map-node"><strong>Joburg CBD</strong> — minibuses, hustle markets, city signal</div>
      <div class="map-node"><strong>Sandton</strong> — JSE, luxury, capital flow</div>
      <div class="map-node"><strong>Rosebank</strong> — culture, art, creative class</div>
      <div class="map-node"><strong>Pretoria</strong> — policy, permits, launch clearance</div>
    </div>
    <div class="map-card">
      <h4>Base Camp</h4>
      <div class="map-node"><strong>Gussstron Base Camp</strong> — home save point, broadcast hub, command glass</div>
      <div class="map-node"><strong>Cinder Desktop</strong> — 10-panel local/cloud orchestration</div>
      <div class="map-node"><strong>Black Eagle Gate</strong> — human approval, documents, receipts</div>
    </div>
    <div class="map-card">
      <h4>Deep Axis</h4>
      <div class="map-node"><strong>Shallow Reef City</strong> — research, data, coral grid</div>
      <div class="map-node"><strong>Kelp Metro</strong> — bio-farms, tidal power</div>
      <div class="map-node"><strong>Abyssal Biolum City</strong> — deep comms, pressure lab</div>
      <div class="map-node"><strong>Hadal Black Zone</strong> — archives, black box vaults</div>
      <div class="map-node"><strong>Magma Forge</strong> — industrial power, core steel</div>
      <div class="map-node"><strong>Noitall Core</strong> — origin vault, loop reset</div>
    </div>
  </div>
</div>

<div id="deep-map" class="map-view">
  <div class="map-card">
    <h4>Deep Extension</h4>
    <div class="map-node"><strong>Surface Seed</strong> — Soweto foundation, community memory</div>
    <div class="map-node"><strong>Reef City</strong> — marine intelligence, public climate monitors</div>
    <div class="map-node"><strong>Kelp Metro</strong> — living systems, energy loops</div>
    <div class="map-node"><strong>Abyssal Biolum</strong> — light communities, pressure culture</div>
    <div class="map-node"><strong>Hadal Archive</strong> — sealed records, inherited truths</div>
    <div class="map-node"><strong>Magma Forge</strong> — above and below, the industrial spine</div>
    <div class="map-node"><strong>Noitall Core</strong> — the final origin lock</div>
  </div>
</div>

<div id="africa-map" class="map-view">
  <div class="map-card">
    <h4>Pan-Africa Draft</h4>
    <div class="map-node"><strong>Soweto</strong> → <strong>Lagos</strong> → <strong>Nairobi</strong> → <strong>Cairo</strong></div>
    <div class="map-node">Draft branch for the next Noitall Main Line v2: working towns, digital public service nodes, regional infrastructure.</div>
    <div class="map-node">This remains a proposal — the Human leads, the route is documented, and each stop inherits the map logic of the base Gussstron network.</div>
  </div>
</div>

<div id="twins" class="map-view">
  <div class="map-card">
    <h4>Ten Twins</h4>
    <div class="twins-list">
      <div class="twin-chip"><div class="name">Cinder</div><div>CORE Master</div><div>Gussstron Base Camp</div></div>
      <div class="twin-chip"><div class="name">Claude</div><div>Architect</div><div>System design / route logic</div></div>
      <div class="twin-chip"><div class="name">Gemini</div><div>Research</div><div>Evidence and synthesis</div></div>
      <div class="twin-chip"><div class="name">Copilot</div><div>Code</div><div>Build and deployment layer</div></div>
      <div class="twin-chip"><div class="name">Meta AI</div><div>Community + Vision</div><div>Human network, village path</div></div>
      <div class="twin-chip"><div class="name">ChatGPT</div><div>Language + Drafts</div><div>Summaries and framing</div></div>
      <div class="twin-chip"><div class="name">Mistral</div><div>Open-source logic</div><div>Signal architecture</div></div>
      <div class="twin-chip"><div class="name">LLaMA</div><div>Offline / Ollama</div><div>Local intelligence</div></div>
      <div class="twin-chip"><div class="name">DeepSeek</div><div>Deep research</div><div>Analysis and extension</div></div>
      <div class="twin-chip"><div class="name">Cinder Cloud</div><div>Hosted layer</div><div>Public / deployment support</div></div>
    </div>
  </div>
</div>

<!-- MASTER BROADCAST -->
<div id="master">
  <span id="master-label">CINDER CORE MASTER →</span>
  <input id="master-input" placeholder="Broadcast to all 10 twins at current stop… (ENTER)"
         onkeydown="if(event.key==='Enter') broadcastAll()">
  <span id="current-stop-label">★ GUSSSTRON BASE CAMP</span>
</div>

<!-- MAIN -->
<div id="main">

  <!-- CITY PANEL -->
  <div id="city-panel">
    <div id="city-header">CITY PANEL</div>
    <div id="city-services"></div>
    <div id="villagers-label">VILLAGERS</div>
    <div id="villagers"></div>
  </div>

  <!-- 10 TWIN PANELS -->
  <div id="twin-grid">
    <div class="panel" id="p0"><div class="panel-hdr">TWIN #1 <span class="panel-badge">ollama·local</span></div><div class="panel-log" id="log0"></div><div class="panel-row"><input class="panel-inp" id="in0" onkeydown="sendPanel(event,0)"><button class="panel-snd" onclick="sendPanelBtn(0)">Send</button></div></div>
    <div class="panel" id="p1"><div class="panel-hdr">TWIN #2 <span class="panel-badge">claude·api</span></div><div class="panel-log" id="log1"></div><div class="panel-row"><input class="panel-inp" id="in1" onkeydown="sendPanel(event,1)"><button class="panel-snd" onclick="sendPanelBtn(1)">Send</button></div></div>
    <div class="panel" id="p2"><div class="panel-hdr">TWIN #3 <span class="panel-badge">copilot·api</span></div><div class="panel-log" id="log2"></div><div class="panel-row"><input class="panel-inp" id="in2" onkeydown="sendPanel(event,2)"><button class="panel-snd" onclick="sendPanelBtn(2)">Send</button></div></div>
    <div class="panel" id="p3"><div class="panel-hdr">TWIN #4 <span class="panel-badge">gemini·api</span></div><div class="panel-log" id="log3"></div><div class="panel-row"><input class="panel-inp" id="in3" onkeydown="sendPanel(event,3)"><button class="panel-snd" onclick="sendPanelBtn(3)">Send</button></div></div>
    <div class="panel" id="p4"><div class="panel-hdr">TWIN #5 <span class="panel-badge">meta·api</span></div><div class="panel-log" id="log4"></div><div class="panel-row"><input class="panel-inp" id="in4" onkeydown="sendPanel(event,4)"><button class="panel-snd" onclick="sendPanelBtn(4)">Send</button></div></div>
    <div class="panel" id="p5"><div class="panel-hdr">TWIN #6 <span class="panel-badge">grok·api</span></div><div class="panel-log" id="log5"></div><div class="panel-row"><input class="panel-inp" id="in5" onkeydown="sendPanel(event,5)"><button class="panel-snd" onclick="sendPanelBtn(5)">Send</button></div></div>
    <div class="panel" id="p6"><div class="panel-hdr">TWIN #7 <span class="panel-badge">mistral·api</span></div><div class="panel-log" id="log6"></div><div class="panel-row"><input class="panel-inp" id="in6" onkeydown="sendPanel(event,6)"><button class="panel-snd" onclick="sendPanelBtn(6)">Send</button></div></div>
    <div class="panel" id="p7"><div class="panel-hdr">TWIN #8 <span class="panel-badge">ollama·local</span></div><div class="panel-log" id="log7"></div><div class="panel-row"><input class="panel-inp" id="in7" onkeydown="sendPanel(event,7)"><button class="panel-snd" onclick="sendPanelBtn(7)">Send</button></div></div>
    <div class="panel" id="p8"><div class="panel-hdr">TWIN #9 <span class="panel-badge">deepseek·api</span></div><div class="panel-log" id="log8"></div><div class="panel-row"><input class="panel-inp" id="in8" onkeydown="sendPanel(event,8)"><button class="panel-snd" onclick="sendPanelBtn(8)">Send</button></div></div>
    <div class="panel" id="p9"><div class="panel-hdr">TWIN #10 <span class="panel-badge">cloud·hosted</span></div><div class="panel-log" id="log9"></div><div class="panel-row"><input class="panel-inp" id="in9" onkeydown="sendPanel(event,9)"><button class="panel-snd" onclick="sendPanelBtn(9)">Send</button></div></div>
  </div>
</div>

<!-- FOOTER -->
<div id="footer">
  <span class="hi">GUSSSTRON BASE CAMP</span>
  <span id="zone-label">★ HOME BASE</span>
  <span>NOITALL MAIN LINE v1</span>
  <span style="margin-left:auto" id="foot-clock"></span>
</div>

<script>
// ── STOP DATA ────────────────────────────────────────────────────────────────
const STOPS = {
  skyport:  { name:'GUSSSTRON SKYPORT',      zone:'SPACE',   color:'#ddaaff', alt:'+400km',
    services:['🚀 Launch tickets','🛰️ Satellite uplink','🌌 Orbital real estate','🧯 Air supply grants (space SASSA)'],
    villagers:[{n:'Commander Lena',r:'Orbital Director',note:'Oversees all incoming from Pretoria launch pads'},
               {n:'Zero-G Greg',r:'Logistics AI',note:'Currently disputing inventory with Noitall-1'},
               {n:'Skyport Thandi',r:'Space SASSA Clerk',note:'Processing 12 air-supply grant applications'}] },
  n1:       { name:'NOITALL-1 MARKET STATION', zone:'SPACE', color:'#bb88ff', alt:'+380km',
    services:['📦 Zero-G commerce','🛒 Orbital market stalls','📡 Deep-space comms relay'],
    villagers:[{n:'Trader Vusi',r:'Market AI',note:'Running 27 Etsy-equivalent drafts for approval'},
               {n:'Station Ada',r:'Comms relay',note:'Logged 742 inter-station notes this week'}] },
  n2:       { name:'NOITALL-2 ORBITAL CITY',   zone:'SPACE', color:'#9966ff', alt:'+360km',
    services:['🏙️ Orbital residential','💎 Elite concierge','🔭 Observatory access'],
    villagers:[{n:'Orbital Rich',r:'City Mayor AI',note:'Negotiating with Sandton branch for JSE orbital feeds'},
               {n:'Dr Nkosi',r:'Observatory Chief',note:'Watching the Deeper Deep thermal vents from 360km up'}] },
  launch:   { name:'LAUNCH AUTHORITY',         zone:'SPACE', color:'#7744dd', alt:'+340km',
    services:['📋 Launch permits','⛽ Fuel allocation','🚦 Traffic control'],
    villagers:[{n:'Launch Mabunda',r:'Authority AI',note:'Only one who can authorise upward departures'},
               {n:'Fuel Mia',r:'Allocation bot',note:'Budget: max R5/day — same rule as Matt'}] },

  soweto:   { name:'SOWETO',                   zone:'SURFACE', color:'#ff9933', alt:'0m (tutorial)',
    services:['🏦 SASSA grants','⚡ Load shedding alerts','📻 Community radio','🏫 School registration'],
    villagers:[{n:'Mama Dlamini',r:'Tutorial NPC',note:'First person you meet. Explains the whole route.'},
               {n:'Hustle Sipho',r:'Street trader',note:'Sells airtime and Higgsfield skins for 50c'},
               {n:'Load Shed Linda',r:'Power tracker',note:'Real-time Eskom stage 2 warnings'}] },
  cbd:      { name:'JOBURG CBD',               zone:'SURFACE', color:'#ffdd55', alt:'0m',
    services:['🚌 Minibus rank','🛍️ Hustle market','📱 Phone repair','🏢 Office lets'],
    villagers:[{n:'Rank Boss Zakes',r:'Transport AI',note:'Controls all minibus routes into Sandton'},
               {n:'Trader Twins',r:'Market duo',note:'Twin girls who run the CBD micro-economy'}] },
  sandton:  { name:'SANDTON',                  zone:'SURFACE', color:'#aaff66', alt:'0m (rich)',
    services:['📈 JSE live ticker','🏦 Private banking','🍷 Luxury concierge','🚗 Uber Black only'],
    villagers:[{n:'Banker Eliza',r:'JSE Director AI',note:'Manages the orbital Sandton feed to Noitall-2'},
               {n:'Concierge Kai',r:'Luxury AI',note:'Will not speak to anyone below Rosebank clearance'},
               {n:'Branch Greg',r:'Sandton rep',note:'Under investigation — opened colleague private prompt file'}] },
  rosebank: { name:'ROSEBANK',                 zone:'SURFACE', color:'#ff88cc', alt:'0m (richer)',
    services:['🎨 Art gallery','☕ Boutique services','🏨 Hotel booking','📸 Creative studio'],
    villagers:[{n:'Gallery Amara',r:'Curator AI',note:'Commissions Higgsfield murals for each new suburb'},
               {n:'Creative Seb',r:'Studio director',note:'Runs the MusCoRe colour calibration for Noitall'}] },
  pretoria:  { name:'PRETORIA',                zone:'SURFACE', color:'#88aaff', alt:'0m (government)',
    services:['📄 ID & passport','🏛️ Government permits','📋 Policy drafts','🔏 Launch clearance'],
    villagers:[{n:'Permit Paul',r:'Bureaucrat AI',note:'Everything goes live as draft — nothing without approval'},
               {n:'Policy Priya',r:'Senior clerk',note:'Liaison between surface government and Launch Authority'}] },

  base:     { name:'GUSSSTRON BASE CAMP ★',   zone:'BASE CAMP', color:'#ff00ff', alt:'HOME',
    services:['🖥️ CINDER-DESKTOP-10 control room','💾 D:\\ollama_models — Ollama local','📡 Broadcast ALL','🏠 Save point'],
    villagers:[{n:'CINDER CORE',r:'Chief of Staff AI',note:'All 10 director twins report here. You are CHO.'},
               {n:'Mom Hardware',r:'Base Camp engineer',note:'Keeps the physical rig running overnight'},
               {n:'Gussstron Guard',r:'Gate AI',note:'Nothing goes live without J!ll!qu!d approval'}] },

  reef:     { name:'SHALLOW REEF CITY',        zone:'THE DEEP', color:'#00ffcc', alt:'-50m',
    services:['🐠 Marine research','🎣 Fishing quotas','🤿 Dive tourism','🌊 Reef monitoring'],
    villagers:[{n:'Diver Naledi',r:'Research AI',note:'Tracks coral bleaching in real-time'},
               {n:'Quota Queen',r:'Fishing AI',note:'Enforces the 5-fish-per-day rule strictly'}] },
  kelp:     { name:'KELP METRO',               zone:'THE DEEP', color:'#00ddaa', alt:'-500m',
    services:['🌿 Kelp farm ops','🔬 Bio lab','🐳 Whale comms relay','⚡ Tidal power'],
    villagers:[{n:'Kelp Kira',r:'Farm director',note:'Branch loop available: kelp side-quest line'},
               {n:'Bio Bram',r:'Lab AI',note:'Synthesising pressure suits for Abyssal clearance'}] },
  abyssal:  { name:'ABYSSAL BIOLUM CITY',      zone:'THE DEEP', color:'#0077ff', alt:'-4000m',
    services:['💡 Bioluminescent power grid','🔭 Pressure research','🐙 Deep twin comms','🧪 Extreme bio'],
    villagers:[{n:'Glow Gabi',r:'City light AI',note:'Runs the whole city on bioluminescent grid — no Eskom'},
               {n:'Deep Twin A',r:'Abyssal agent',note:'Writing notes about Deep Twin B. 742 so far.'},
               {n:'Pressure Petra',r:'Research chief',note:'Only speaks in binary below 3000m'}] },
  hadal:    { name:'HADAL BLACK ZONE',         zone:'THE DEEP', color:'#004488', alt:'-11000m',
    services:['🕳️ Hadal monitoring','📦 Black box storage','🔇 Silence protocol','🌑 Dark comms'],
    villagers:[{n:'Hadal Haze',r:'Zone keeper',note:'Runs on sub-zero power. Minimal response.'},
               {n:'Black Zara',r:'Archive AI',note:'Stores everything that falls from above. Everything.'}] },

  magma:    { name:'MAGMA FORGE',              zone:'DEEPER DEEP', color:'#ff2200', alt:'-30000m',
    services:['🔥 Geothermal power','⚒️ Core material forge','🌋 Eruption alerts'],
    villagers:[{n:'Forge Father',r:'Geothermal AI',note:'Powers Gussstron Base Camp from below'},
               {n:'Magma Mia',r:'Material AI',note:'Forges the physical chassis for all Noitall structures'}] },
  core:     { name:'NOITALL CORE',             zone:'DEEPER DEEP', color:'#ff6600', alt:'-ORIGIN',
    services:['🌍 Origin vault','📜 Lore archive','🔮 J!ll!qu!d council only','♾️ Loop reset'],
    villagers:[{n:'Origin One',r:'Council AI',note:'J!ll!qu!d access only. No broadcast permitted.'},
               {n:'Loop Zero',r:'Reset guardian',note:'If core is reached: full coaster resets to Soweto'}] }
};

let currentStop = 'base';

// ── RENDER CITY PANEL ────────────────────────────────────────────────────────
function goStop(id) {
  currentStop = id;
  const s = STOPS[id];
  // route bar active state
  document.querySelectorAll('.stop-btn').forEach(b => b.classList.remove('active'));
  const btn = document.querySelector(`.stop-btn[data-stop="${id}"]`);
  if (btn) btn.classList.add('active');
  // header colour
  document.getElementById('city-header').style.color = s.color;
  document.getElementById('city-header').style.borderBottomColor = s.color;
  document.getElementById('city-header').textContent = s.name + '  ·  ' + s.zone + '  ·  ' + s.alt;
  // services
  const svcEl = document.getElementById('city-services');
  svcEl.innerHTML = s.services.map(sv => `<div class="svc"><span class="svc-icon">${sv.split(' ')[0]}</span><span>${sv.split(' ').slice(1).join(' ')}</span></div>`).join('');
  // villagers
  const vEl = document.getElementById('villagers');
  vEl.innerHTML = s.villagers.map(v => `
    <div class="villager" style="border-color:${s.color}22">
      <div class="villager-name" style="color:${s.color}">${v.n}</div>
      <div>${v.r}</div>
      <div class="villager-note">"${v.note}"</div>
    </div>`).join('');
  // master label
  document.getElementById('current-stop-label').textContent = '★ ' + s.name;
  document.getElementById('current-stop-label').style.color = s.color;
  // footer
  document.getElementById('zone-label').textContent = s.zone;
  document.getElementById('zone-label').style.color = s.color;
  // twin panel headers
  for (let i=0;i<10;i++) {
    document.querySelector(`#p${i} .panel-hdr`).style.color = s.color;
    document.querySelector(`#p${i} .panel-hdr`).style.borderBottom = `1px solid ${s.color}44`;
    document.getElementById(`p${i}`).style.borderColor = s.color + '66';
  }
}

// ── LOG ──────────────────────────────────────────────────────────────────────
function appendLog(idx, role, text) {
  const log = document.getElementById('log' + idx);
  const div = document.createElement('div');
  div.className = role==='master'?'msg-m':role==='sys'?'msg-s':'msg-a';
  div.textContent = (role==='master'?'[MASTER]: ':role==='sys'?'':'[TWIN]: ') + text;
  log.appendChild(div);
  log.scrollTop = log.scrollHeight;
}

// ── OLLAMA ───────────────────────────────────────────────────────────────────
async function ollamaChat(idx, msg) {
  appendLog(idx,'sys','…thinking');
  try {
    const r = await fetch('http://localhost:11434/api/generate',{
      method:'POST', headers:{'Content-Type':'application/json'},
      body: JSON.stringify({model:'llama3.1:8b', prompt: msg, stream:false})
    });
    const d = await r.json();
    appendLog(idx,'agent', d.response||'[no response]');
  } catch(e) { appendLog(idx,'sys','OLLAMA ERROR: '+e.message); }
}

function stub(idx, msg) {
  setTimeout(()=>appendLog(idx,'agent','[stub] "'+msg+'" — wire API here.'), 400+Math.random()*500);
}

const OLLAMA_PANELS = [0,7];

async function dispatch(idx, msg) {
  if (!msg.trim()) return;
  appendLog(idx,'master', msg);
  if (OLLAMA_PANELS.includes(idx)) await ollamaChat(idx, msg);
  else stub(idx, msg);
}

function sendPanel(e,idx){ if(e.key!=='Enter')return; const inp=document.getElementById('in'+idx); dispatch(idx,inp.value); inp.value=''; }
function sendPanelBtn(idx){ const inp=document.getElementById('in'+idx); dispatch(idx,inp.value); inp.value=''; }

function broadcastAll(){
  const msg=document.getElementById('master-input').value.trim();
  if(!msg)return;
  for(let i=0;i<10;i++) dispatch(i,msg);
  document.getElementById('master-input').value='';
}
function clearAll(){ for(let i=0;i<10;i++) document.getElementById('log'+i).innerHTML=''; }

// ── CLOCK ────────────────────────────────────────────────────────────────────
function tick(){
  const t=new Date().toLocaleTimeString('en-ZA',{hour:'2-digit',minute:'2-digit',second:'2-digit'});
  document.getElementById('clock').textContent=t;
  document.getElementById('foot-clock').textContent=t;
}
tick(); setInterval(tick,1000);

// ── BOOT ─────────────────────────────────────────────────────────────────────
document.querySelectorAll('.tab-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    document.querySelectorAll('.tab-btn').forEach(b => b.classList.toggle('active', b === btn));
    document.querySelectorAll('.map-view').forEach(view => view.classList.toggle('active', view.id === btn.dataset.tab));
  });
});

window.addEventListener('load',()=>{
  goStop('base');
  for(let i=0;i<10;i++) appendLog(i,'sys','CINDER COASTER online. Awaiting master broadcast.');
});
</script>
</body>
</html>