/* ═══════════════════════════════════════════════════════════════
   ML Arena — Cinematic visual rebuild
   Keeps every class hook from app.js; restyled to match MLArena.png
   ═══════════════════════════════════════════════════════════════ */

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

/* ── Design tokens ──────────────────────────────────────────── */
:root{
  --void:#000;
  --base:#02060d;
  --surface:rgba(4,9,18,0.78);
  --raised:rgba(8,14,26,0.88);
  --card:rgba(6,12,22,0.85);

  --neon:#38BDF8;
  --neon-2:#22D3EE;
  --neon-dim:rgba(56,189,248,.12);
  --neon-mid:rgba(56,189,248,.28);
  --neon-bright:rgba(56,189,248,.65);
  --neon-glow:0 0 12px rgba(56,189,248,.55),0 0 28px rgba(56,189,248,.18);

  --speed:#38BDF8;
  --damage:#22D3EE;
  --balanced:#FBBF24;

  --good:#34D399;
  --warn:#FFD60A;
  --alert:#FB7185;
  --violet:#818CF8;

  --t1:rgba(232,242,255,1);
  --t2:rgba(180,205,230,.66);
  --t3:rgba(140,170,200,.42);
  --t4:rgba(110,140,170,.26);

  --b0:rgba(255,255,255,.03);
  --b1:rgba(255,255,255,.07);
  --b2:rgba(56,189,248,.22);
  --b3:rgba(56,189,248,.50);

  --panel-shadow:
    inset 0 0 0 1px var(--b1),
    inset 0 1px 0 rgba(56,189,248,.04),
    0 2px 24px rgba(0,0,0,.85);

  --font-mono:"JetBrains Mono","Cascadia Code","Fira Code",ui-monospace,monospace;
  --font-ui:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;

  --r-panel:6px;
  --r-card:3px;
  --r-pill:999px;
  --gap:10px;

  --ease:cubic-bezier(.16,1,.3,1);
}

/* ── Base ───────────────────────────────────────────────────── */
html{height:100%;background:var(--void)}
body{
  min-height:100vh; min-height:100dvh;
  background:
    radial-gradient(ellipse 90% 50% at 50% 0%, rgba(0,30,60,.30) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(20,0,40,.20) 0%, transparent 60%),
    var(--void);
  color:var(--t1);
  font-family:var(--font-mono);
  font-size:13px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  display:grid;
  grid-template-rows:auto 1fr auto auto;
  gap:var(--gap);
  padding:12px 14px;
  overflow-x:hidden;
  position:relative;
}
body::after{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:9000;
  background:repeating-linear-gradient(to bottom,
    transparent 0,transparent 3px,
    rgba(0,0,0,.035) 3px,rgba(0,0,0,.035) 4px);
}

/* ── Topbar ─────────────────────────────────────────────────── */
.topbar{
  display:flex; justify-content:space-between; align-items:center;
  gap:12px; flex-wrap:wrap;
  padding:6px 4px 10px;
  border-bottom:1px solid var(--b1);
  position:relative;
}
.topbar::after{
  content:''; position:absolute; left:0; bottom:-1px;
  width:120px; height:1px;
  background:linear-gradient(90deg,var(--neon),transparent);
  box-shadow:0 0 8px var(--neon);
}

.brand{display:flex; align-items:center; gap:10px}
.brand-mark{
  width:30px;height:30px;border-radius:6px;overflow:hidden;
  border:1px solid var(--b2);
  box-shadow:0 0 12px rgba(56,189,248,.25);
}
.brand-mark img{width:100%;height:100%;object-fit:cover;display:block}
.brand-text{display:flex;flex-direction:column;gap:2px}
.brand-name{
  font-family:var(--font-mono); font-weight:700; font-size:13px;
  letter-spacing:.10em; text-transform:uppercase;
  color:var(--neon); text-shadow:0 0 12px rgba(56,189,248,.7); line-height:1;
}
.brand-tag{
  font-family:var(--font-mono); font-size:9px;
  letter-spacing:.08em; color:var(--t4); text-transform:uppercase; line-height:1;
}

.topnav{display:flex; gap:6px; flex-wrap:wrap}
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 11px;
  border:1px solid var(--b1);
  background:rgba(255,255,255,.015);
  border-radius:var(--r-pill);
  font-family:var(--font-mono);
  font-size:9.5px; font-weight:600;
  color:var(--t2); letter-spacing:.08em; text-transform:uppercase;
  transition:border-color .2s, color .2s, box-shadow .2s;
}
.chip:hover{ border-color:var(--b2); color:var(--t1); box-shadow:0 0 10px rgba(56,189,248,.12) }
.chip-dot{ width:6px; height:6px; border-radius:50%; flex-shrink:0 }
.c-q{    background:var(--speed);    box-shadow:0 0 6px var(--speed) }
.c-igad{ background:var(--violet);   box-shadow:0 0 6px var(--violet) }
.c-flow{ background:var(--neon-2);   box-shadow:0 0 6px var(--neon-2) }
.c-logic{background:var(--balanced); box-shadow:0 0 6px var(--balanced) }

/* ── Stage ──────────────────────────────────────────────────── */
.stage{
  display:grid;
  grid-template-columns:minmax(255px,21%) minmax(0,1fr) minmax(255px,21%);
  gap:var(--gap);
  min-height:0; height:100%;
}
.col{
  display:grid; grid-template-rows:1fr 1fr; gap:var(--gap);
  min-height:0; min-width:0;
}

/* ── Panel ──────────────────────────────────────────────────── */
.panel{
  display:flex; flex-direction:column;
  min-height:0; min-width:0;
  background:var(--surface);
  border:1px solid var(--b1);
  border-radius:var(--r-panel);
  overflow:hidden;
  box-shadow:var(--panel-shadow);
  position:relative;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.panel:hover{
  border-color:var(--b2);
  box-shadow:
    inset 0 0 0 1px var(--b2),
    inset 0 1px 0 rgba(56,189,248,.07),
    0 4px 32px rgba(0,0,0,.9),
    0 0 32px rgba(56,189,248,.06);
}
.panel::before,.panel::after{
  content:''; position:absolute; width:12px; height:12px;
  pointer-events:none; z-index:2; opacity:.55;
}
.panel::before{ top:5px; left:5px; border-top:1px solid var(--neon); border-left:1px solid var(--neon) }
.panel::after{  top:5px; right:5px; border-top:1px solid var(--neon); border-right:1px solid var(--neon) }
.panel:hover::before,.panel:hover::after{ opacity:.95 }

.panel-h{
  display:flex; justify-content:space-between; align-items:center;
  gap:8px; padding:10px 14px 9px;
  border-bottom:1px solid var(--b1);
  background:var(--raised);
  flex-shrink:0; position:relative;
}
.panel-h::after{
  content:''; position:absolute; bottom:-1px; left:14px;
  width:36px; height:1px; background:var(--neon); box-shadow:0 0 6px var(--neon);
}
.panel-title{
  font-family:var(--font-mono); font-weight:700; font-size:10px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--neon); text-shadow:0 0 8px rgba(56,189,248,.55); line-height:1;
}
.panel-sub{
  font-family:var(--font-mono); font-size:9px; color:var(--t4);
  margin-top:3px; letter-spacing:.05em; line-height:1;
}

.badge{
  font-family:var(--font-mono); font-size:8.5px; font-weight:700;
  letter-spacing:.10em; text-transform:uppercase;
  padding:3px 9px; border-radius:var(--r-pill);
  border:1px solid var(--b1); background:rgba(56,189,248,.04);
  color:var(--t3); white-space:nowrap;
  transition:all .3s var(--ease);
}
.badge.active{
  background:rgba(56,189,248,.12); border-color:var(--neon-mid);
  color:var(--neon); box-shadow:0 0 10px rgba(56,189,248,.30);
}
.badge.alert{
  background:rgba(251,113,133,.12); border-color:rgba(251,113,133,.4);
  color:var(--alert); box-shadow:0 0 10px rgba(251,113,133,.28);
  animation:alertPulse 1.8s ease-in-out infinite;
}
.badge.warn{
  background:rgba(255,214,10,.10); border-color:rgba(255,214,10,.35);
  color:var(--warn); box-shadow:0 0 8px rgba(255,214,10,.22);
}
@keyframes alertPulse{ 0%,100%{opacity:1} 50%{opacity:.55} }

.panel-body{
  padding:12px 14px; flex:1; overflow:auto; min-height:0; color:var(--t2);
}
.panel-body::-webkit-scrollbar{width:3px}
.panel-body::-webkit-scrollbar-track{background:transparent}
.panel-body::-webkit-scrollbar-thumb{background:var(--b1); border-radius:2px}
.panel-body::-webkit-scrollbar-thumb:hover{background:var(--b2)}

.panel-body-canvas{ padding:0; display:flex; flex-direction:column; min-height:0 }
.panel-body-canvas canvas{ display:block; width:100%; flex:1; min-height:150px }

.placeholder{
  font-family:var(--font-mono); font-size:10.5px; color:var(--t4);
  text-align:center; line-height:1.7; padding:22px 14px; letter-spacing:.04em;
}

/* ── Arena Window ───────────────────────────────────────────── */
.arena-window{
  display:grid; grid-template-rows:auto 1fr auto auto;
  min-height:480px; min-width:0;
  background:radial-gradient(ellipse at 50% 35%, #0a121e 0%, #04080f 60%, #000 100%);
  border:1px solid var(--b1);
  border-radius:var(--r-panel);
  overflow:hidden;
  box-shadow:
    inset 0 0 0 1px rgba(56,189,248,.18),
    inset 0 0 80px rgba(0,0,0,.9),
    0 0 60px rgba(56,189,248,.04);
  position:relative;
}

/* Big corner brackets (the four "L"s in the screenshot) */
.arena-window::before,
.arena-window::after{
  content:''; position:absolute; width:26px; height:26px;
  pointer-events:none; z-index:3; opacity:.75;
}
.arena-window::before{
  top:8px; left:8px;
  border-top:2px solid var(--neon-2);
  border-left:2px solid var(--neon-2);
  box-shadow:-1px -1px 12px rgba(34,211,238,.4);
}
.arena-window::after{
  top:8px; right:8px;
  border-top:2px solid var(--neon-2);
  border-right:2px solid var(--neon-2);
  box-shadow:1px -1px 12px rgba(34,211,238,.4);
}

/* Chrome bar */
.window-chrome{
  display:flex; align-items:center; gap:10px;
  padding:9px 14px;
  border-bottom:1px solid var(--b1);
  background:rgba(0,0,0,.55);
  flex-shrink:0; position:relative; z-index:4;
}
.window-chrome::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg, var(--neon-mid) 0%, transparent 50%, var(--neon-dim) 100%);
}
.window-title{
  font-family:var(--font-mono); font-weight:700; font-size:10px;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--neon); text-shadow:0 0 10px rgba(56,189,248,.6);
  flex:1;
}
.window-dots{display:none}

.window-controls{display:flex; align-items:center; gap:5px}
.window-controls button,
#stepBtn, #autoPauseToggle{
  appearance:none;
  background:rgba(56,189,248,.04);
  border:1px solid var(--b1);
  color:var(--t2);
  font-family:var(--font-mono); font-size:9.5px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
  padding:4px 10px; border-radius:3px;
  min-height:25px; cursor:pointer;
  transition:all .15s var(--ease);
}
.window-controls button:hover,
#stepBtn:hover, #autoPauseToggle:hover{
  background:rgba(56,189,248,.10);
  border-color:var(--b2); color:var(--neon);
  box-shadow:0 0 10px rgba(56,189,248,.20);
}
.window-controls button:active,
#stepBtn:active, #autoPauseToggle:active{ transform:scale(.95) }
.window-controls button.primary{
  background:rgba(56,189,248,.12); border-color:var(--neon-mid);
  color:var(--neon); box-shadow:0 0 10px rgba(56,189,248,.22);
}
.window-controls button.primary:hover{
  background:rgba(56,189,248,.20); box-shadow:var(--neon-glow);
}
#autoPauseToggle[data-on="1"]{
  background:rgba(52,211,153,.10); border-color:rgba(52,211,153,.35);
  color:var(--good); box-shadow:0 0 8px rgba(52,211,153,.22);
}
#speedLabel{
  font-family:var(--font-mono); font-weight:700; font-size:10px;
  color:var(--neon); text-shadow:0 0 8px rgba(56,189,248,.6);
  min-width:32px; text-align:center; letter-spacing:.04em;
}

/* Arena canvas — the cinematic grid floor */
.arena-canvas-wrap{
  position:relative; overflow:hidden; min-height:0;
  background:
    radial-gradient(ellipse at 50% 50%, #050a14 0%, #02060c 60%, #000 100%);
}
/* edge LED dashes — top, left, right (rendered with repeating gradients) */
.arena-canvas-wrap::before{
  content:''; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:
    /* top LEDs */
    repeating-linear-gradient(90deg,
      transparent 0 28px,
      var(--neon) 28px 46px,
      transparent 46px 64px) top    /6px no-repeat,
    /* left LEDs */
    repeating-linear-gradient(180deg,
      transparent 0 26px,
      var(--neon) 26px 40px,
      transparent 40px 56px) left   8px/3px 100% no-repeat,
    /* right LEDs (amber) */
    repeating-linear-gradient(180deg,
      transparent 0 26px,
      var(--balanced) 26px 40px,
      transparent 40px 56px) right  8px/3px 100% no-repeat;
  background-size:100% 3px, 3px 100%, 3px 100%;
  filter:drop-shadow(0 0 6px var(--neon)) drop-shadow(0 0 4px var(--balanced));
  opacity:.85;
}
/* faint grid floor overlay */
.arena-canvas-wrap::after{
  content:''; position:absolute; inset:18px; pointer-events:none; z-index:1;
  background-image:
    linear-gradient(rgba(56,189,248,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56,189,248,.05) 1px, transparent 1px);
  background-size:42px 42px;
  box-shadow:inset 0 0 80px rgba(0,0,0,.7);
}
#gameCanvas{
  display:block; width:100% !important; height:100% !important;
  min-height:380px !important; cursor:crosshair;
  touch-action:manipulation; position:relative; z-index:1;
}
.arena-overlay{
  position:absolute; inset:0; pointer-events:none;
  display:flex; align-items:center; justify-content:center; z-index:10;
}

/* ── Wave Announcement ──────────────────────────────────────── */
.wave-announce{
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:28px 48px 26px;
  background:rgba(0,4,14,.85);
  border:1px solid rgba(56,189,248,.35);
  border-radius:8px;
  backdrop-filter:blur(20px);
  box-shadow:
    0 0 0 1px rgba(56,189,248,.10),
    0 0 60px rgba(56,189,248,.22),
    inset 0 0 40px rgba(56,189,248,.04),
    0 8px 48px rgba(0,0,0,.9);
  opacity:0; transform:scale(.88) translateY(-12px);
  pointer-events:none; text-align:center; overflow:hidden; min-width:320px;
}
.wave-announce::before{
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(56,189,248,.9) 50%, transparent);
  box-shadow:0 0 18px rgba(56,189,248,.8);
}
.wave-announce::after{
  content:''; position:absolute; inset:6px;
  border:1px solid rgba(56,189,248,.08); border-radius:5px; pointer-events:none;
}
.wa-scanlines{
  position:absolute; inset:0; pointer-events:none; border-radius:8px;
  background:repeating-linear-gradient(to bottom,
    transparent 0,transparent 3px,
    rgba(0,0,0,.06) 3px,rgba(0,0,0,.06) 4px);
}
.wa-header{
  font-family:var(--font-mono); font-size:9px; font-weight:700;
  letter-spacing:.26em; text-transform:uppercase;
  color:rgba(56,189,248,.65); position:relative;
}
.wa-header.anomaly{ color:rgba(251,113,133,.85); text-shadow:0 0 12px rgba(251,113,133,.55) }
.wa-wave{
  font-family:var(--font-mono); font-size:52px; font-weight:700;
  letter-spacing:.12em; color:#fff; line-height:1; position:relative;
  text-shadow:
    0 0 20px rgba(56,189,248,1),
    0 0 50px rgba(56,189,248,.55),
    0 0 90px rgba(56,189,248,.22);
}
.wa-wave.anomaly{ text-shadow:0 0 20px var(--alert),0 0 50px rgba(251,113,133,.55),0 0 90px rgba(251,113,133,.22) }
.wa-label{
  font-family:var(--font-mono); font-size:13px; font-weight:700;
  letter-spacing:.38em; text-transform:uppercase;
  color:var(--neon); text-shadow:0 0 16px rgba(56,189,248,.85);
  margin-top:-4px; position:relative;
}
.wa-label.anomaly{ color:var(--alert); text-shadow:0 0 16px rgba(251,113,133,.85) }
.wa-divider{
  width:80px; height:1px; margin:4px 0;
  background:linear-gradient(90deg, transparent, rgba(56,189,248,.55), transparent);
}
.wa-divider.anomaly{ background:linear-gradient(90deg, transparent, rgba(251,113,133,.55), transparent) }
.wa-count{
  font-family:var(--font-mono); font-size:11px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:rgba(232,242,255,.65);
}
.wa-count b{ color:rgba(232,242,255,.95); font-weight:700 }
.wa-bar-track{
  width:180px; height:2px; margin-top:12px;
  background:rgba(56,189,248,.10); border-radius:1px;
  position:relative; overflow:hidden;
}
.wa-bar-fill{
  position:absolute; inset:0; background:var(--neon);
  box-shadow:0 0 8px var(--neon); border-radius:1px;
  transform-origin:left center; transform:scaleX(1);
}
.wa-bar-fill.anomaly{ background:var(--alert); box-shadow:0 0 8px var(--alert) }
@keyframes waEnter{ from{opacity:0;transform:scale(.86) translateY(-14px)} to{opacity:1;transform:scale(1) translateY(0)} }
@keyframes waExit { from{opacity:1;transform:scale(1) translateY(0)}    to{opacity:0;transform:scale(.94) translateY(8px)} }
@keyframes waBarDrain{ from{transform:scaleX(1)} to{transform:scaleX(0)} }
@keyframes waPulse{
  0%,100%{ box-shadow:0 0 0 1px rgba(56,189,248,.10),0 0 60px rgba(56,189,248,.22),inset 0 0 40px rgba(56,189,248,.04),0 8px 48px rgba(0,0,0,.9) }
  50%    { box-shadow:0 0 0 1px rgba(56,189,248,.24),0 0 90px rgba(56,189,248,.40),inset 0 0 60px rgba(56,189,248,.08),0 8px 48px rgba(0,0,0,.9) }
}
.wave-announce.wa-entering{
  animation: waEnter .38s var(--ease) forwards, waPulse 1.8s ease-in-out .38s infinite;
}
.wave-announce.wa-entering.anomaly{
  border-color:rgba(251,113,133,.42);
  box-shadow:0 0 0 1px rgba(251,113,133,.10),0 0 60px rgba(251,113,133,.26),inset 0 0 40px rgba(251,113,133,.05),0 8px 48px rgba(0,0,0,.9);
}
.wave-announce.wa-exiting{ animation: waExit .42s cubic-bezier(.4,0,1,1) forwards }

/* ── Moments strip ──────────────────────────────────────────── */
#moments-strip{
  height:28px; border-top:1px solid var(--b1);
  background:rgba(0,0,0,.55);
  flex-shrink:0; position:relative;
}
#moments-strip::before{
  content:'EVENT LOG'; position:absolute; left:10px; top:50%;
  transform:translateY(-50%);
  font-family:var(--font-mono); font-size:7px;
  color:var(--t4); letter-spacing:.12em; pointer-events:none; z-index:1;
}
#moments-strip canvas{ display:block; width:100%; height:100% }
#moment-tooltip{
  position:fixed; display:none; pointer-events:none;
  padding:5px 11px; background:rgba(1,4,14,.98);
  border:1px solid var(--b2); border-radius:3px;
  font-family:var(--font-mono); font-size:9.5px; line-height:1.5;
  color:var(--t2); z-index:9999; white-space:nowrap; letter-spacing:.04em;
  box-shadow:0 0 24px rgba(0,0,0,.85), 0 0 10px rgba(56,189,248,.12);
}

/* ── Window footer (cinematic stat strip) ───────────────────── */
.window-footer{
  display:flex; align-items:center; gap:12px;
  padding:8px 14px;
  border-top:1px solid var(--b1);
  background:rgba(0,0,0,.55);
  font-family:var(--font-mono); font-size:9.5px; font-weight:600;
  color:var(--t3); flex-wrap:wrap; flex-shrink:0;
  letter-spacing:.06em; text-transform:uppercase;
}
.window-footer b{
  color:var(--neon); font-weight:700; text-shadow:0 0 7px rgba(56,189,248,.45);
}
.window-footer .sep{ color:var(--b2) }
.window-footer .grow{ flex:1 }
.window-footer .hint{ color:var(--good); text-shadow:0 0 8px rgba(52,211,153,.5) }

/* ── IGAD meters (HP-bar look) ──────────────────────────────── */
.meter{
  border-top:1px solid var(--b1);
  background:rgba(0,0,0,.45);
  padding:10px 14px;
  display:flex; flex-direction:column; gap:8px;
  flex-shrink:0;
}
.meter-row{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:9.5px;
}
.meter-label{
  color:var(--t3); min-width:42px;
  letter-spacing:.08em; text-transform:uppercase;
}
.meter-track{
  flex:1; height:8px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  border-radius:2px; overflow:hidden; position:relative;
}
.meter-bar{
  height:100%; width:0%;
  background:linear-gradient(90deg, var(--neon), var(--neon-2));
  border-radius:2px;
  box-shadow:0 0 12px var(--neon), inset 0 0 6px rgba(255,255,255,.25);
  transition:width .45s var(--ease);
}
.meter-bar.amber{
  background:linear-gradient(90deg, var(--balanced), #FCD34D);
  box-shadow:0 0 12px var(--balanced), inset 0 0 6px rgba(255,255,255,.25);
}
.meter-bar.alert{
  background:linear-gradient(90deg, var(--alert), #FCA5A5);
  box-shadow:0 0 12px rgba(251,113,133,.8), inset 0 0 6px rgba(255,255,255,.25);
  animation:barAlert .85s ease infinite;
}
@keyframes barAlert{
  0%,100%{ box-shadow:0 0 12px rgba(251,113,133,.8), inset 0 0 6px rgba(255,255,255,.25) }
  50%    { box-shadow:0 0 22px rgba(251,113,133,1), 0 0 36px rgba(251,113,133,.35), inset 0 0 6px rgba(255,255,255,.25) }
}
.meter-value{
  font-family:var(--font-mono); font-weight:700; font-size:10px;
  color:var(--t1); min-width:50px; text-align:right;
  letter-spacing:.02em; text-shadow:0 0 6px rgba(56,189,248,.28);
}

/* ── Logic Engine ───────────────────────────────────────────── */
.logic-chain{display:flex; flex-direction:column; gap:5px}
.fact-row{
  display:flex; align-items:center; gap:8px;
  padding:7px 10px;
  background:var(--card);
  border:1px solid var(--b0);
  border-left:2px solid var(--b1);
  border-radius:var(--r-card);
  font-family:var(--font-mono); font-size:9.5px; line-height:1.45;
  color:var(--t3);
  opacity:0; transform:translateX(-5px);
  animation:factIn .4s var(--ease) forwards;
}
.fact-row.revised{
  background:rgba(251,113,133,.06);
  border-color:rgba(251,113,133,.22);
  border-left-color:rgba(251,113,133,.7);
  color:var(--t2);
}
.fact-row.terminal{
  background:rgba(251,113,133,.06);
  border-left-color:var(--alert);
  color:rgba(255,160,160,.9);
}
@keyframes factIn{ to{opacity:1; transform:translateX(0)} }
.fact-arrow{color:var(--t4)}
.fact-key{
  font-family:var(--font-mono); font-weight:700;
  color:var(--neon); min-width:20px;
  text-shadow:0 0 7px rgba(56,189,248,.45);
}
.revision-summary{
  margin-top:10px; padding:10px 12px;
  background:var(--card);
  border:1px solid var(--b1);
  border-left:2px solid var(--neon);
  border-radius:var(--r-card);
  font-family:var(--font-mono); font-size:9.5px; line-height:1.65;
  color:var(--t2);
  box-shadow:inset 0 0 16px rgba(56,189,248,.04);
  opacity:0; animation:factIn .5s var(--ease) forwards;
}
.revision-summary b{ color:var(--neon); font-weight:700; text-shadow:0 0 7px rgba(56,189,248,.45) }

/* ── Telemetry (HP STATUS — the hero strip from the screenshot) */
.telem-row{
  padding:10px 0;
  border-bottom:1px solid var(--b0);
  display:flex; align-items:center; gap:12px;
}
.telem-row:last-child{border-bottom:none}
.telem-name{
  font-family:var(--font-mono); font-weight:700; font-size:13px;
  letter-spacing:.04em; min-width:108px; flex-shrink:0;
  /* color is set inline by app.js per-robot; fallback: */
  color:var(--neon);
  text-shadow:0 0 10px currentColor;
}
.telem-bars{
  flex:1; display:flex; flex-direction:column; gap:5px; min-width:0;
}
.telem-bar{
  height:10px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  border-radius:2px;
  overflow:hidden;
  position:relative;
}
.telem-bar-fill{
  height:100%; border-radius:2px;
  background:linear-gradient(90deg, currentColor, currentColor);
  box-shadow:0 0 12px currentColor, inset 0 0 6px rgba(255,255,255,.3);
  transition:width .35s var(--ease);
}
/* secondary bars (ε, R) — thinner */
.telem-bar + .telem-bar{ height:3px }
.telem-bar + .telem-bar .telem-bar-fill{ box-shadow:0 0 6px currentColor }
.telem-stats{
  display:flex; justify-content:space-between;
  font-family:var(--font-mono); font-size:9.5px;
  color:var(--t3); margin-top:3px; letter-spacing:.05em;
}
.telem-stats b{ font-weight:700; color:var(--t1); text-shadow:0 0 6px rgba(56,189,248,.25) }

/* ── Narration bar ──────────────────────────────────────────── */
.narration{
  display:flex; align-items:center; gap:11px;
  padding:10px 14px;
  background:var(--surface);
  border:1px solid var(--b1);
  border-radius:var(--r-panel);
  font-size:11.5px; color:var(--t2);
  box-shadow:var(--panel-shadow);
  position:relative; overflow:hidden;
}
.narration::before{
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, var(--neon-dim), transparent 40%);
}
.narr-dot{
  width:8px; height:8px; border-radius:50%; flex-shrink:0;
  background:var(--good);
  box-shadow:0 0 10px var(--good), 0 0 22px rgba(52,211,153,.35);
  animation:narrPulse 2.2s ease-in-out infinite;
}
.narr-dot.violet{ background:var(--violet);   box-shadow:0 0 10px var(--violet) }
.narr-dot.amber { background:var(--balanced); box-shadow:0 0 10px var(--balanced) }
.narr-dot.pink  { background:var(--alert);    box-shadow:0 0 10px var(--alert) }
@keyframes narrPulse{ 0%,100%{transform:scale(1); opacity:1} 50%{transform:scale(1.55); opacity:.45} }
.narr-text{ flex:1; min-width:0; line-height:1.5 }
.narr-text b{ color:var(--neon); font-weight:600; text-shadow:0 0 7px rgba(56,189,248,.4) }

/* ── Footer ─────────────────────────────────────────────────── */
.footer{
  display:flex; justify-content:center; align-items:center; gap:10px;
  padding:5px;
  font-family:var(--font-mono); font-size:9px;
  color:var(--good); letter-spacing:.08em; text-transform:uppercase;
  border-top:1px solid var(--b0);
  text-shadow:0 0 8px rgba(52,211,153,.4);
}
.footer .sep{ color:var(--b1); text-shadow:none }

/* ── Focus ──────────────────────────────────────────────────── */
button:focus-visible{
  outline:1px solid var(--neon); outline-offset:2px;
  box-shadow:0 0 10px rgba(56,189,248,.4);
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width:1100px){
  .stage{ grid-template-columns:1fr 1fr; grid-template-rows:auto auto; height:auto }
  .arena-window{ grid-column:1/-1; grid-row:1; min-height:440px; height:56vh; max-height:580px }
  .col{ grid-template-rows:auto auto }
  .col-left { grid-column:1; grid-row:2 }
  .col-right{ grid-column:2; grid-row:2 }
  .col .panel{ min-height:240px }
}
@media (max-width:720px){
  body{ padding:8px; gap:8px }
  .topnav{ display:none }
  .stage{ grid-template-columns:1fr }
  .arena-window{ grid-column:1; grid-row:1; min-height:360px; height:50vh }
  .col{ grid-template-rows:auto auto }
  .col-left { grid-column:1; grid-row:2 }
  .col-right{ grid-column:1; grid-row:3 }
  .col .panel{ min-height:220px }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
}