:root{
  --green:#00FFA3;
  --cyan:#00E5FF;
  --text:#E8F4FF;
  --muted:#7A8BA8;
  --danger:#FF3B6B;
  --floor:#02040A;
  --sky:#070B18;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --sans:'Inter',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:var(--floor)}
body{font-family:var(--sans);color:var(--text)}
#city{position:fixed;inset:0;width:100vw;height:100vh;display:block}

/* ---------- HUD ---------- */
.hud{
  position:fixed;left:22px;bottom:46px;z-index:10;
  display:flex;align-items:center;gap:12px;
  padding:10px 16px 10px 12px;
  background:linear-gradient(135deg,rgba(7,11,24,.86),rgba(2,4,10,.72));
  border:1px solid rgba(0,229,255,.22);
  border-radius:12px;
  box-shadow:0 0 26px rgba(0,229,255,.10), inset 0 1px 0 rgba(232,244,255,.06);
  backdrop-filter:blur(6px);
}
.hud-logo{width:36px;height:36px;object-fit:contain;filter:drop-shadow(0 0 8px rgba(0,255,163,.45))}
.hud-title{
  font-family:var(--sans);font-weight:800;font-size:15px;letter-spacing:.16em;
  color:var(--text);text-shadow:0 0 12px rgba(0,229,255,.35);
}
.hud-sub{
  display:flex;align-items:center;gap:7px;margin-top:3px;
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;color:var(--green);
}
.hud-sub .sep{color:var(--muted)}
#hud-clock{color:var(--text)}
.phase{margin-left:8px;color:var(--muted);font-size:10px;font-weight:600;letter-spacing:.14em}
.dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.72)}}

/* ---------- status chip ---------- */
.status{
  position:fixed;right:22px;bottom:46px;z-index:10;
  display:flex;align-items:center;gap:8px;
  padding:7px 13px;border-radius:999px;
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.13em;
  color:var(--muted);
  background:rgba(2,4,10,.78);border:1px solid rgba(122,139,168,.26);
  box-shadow:0 0 18px rgba(0,0,0,.5);
}
.s-dot{width:6px;height:6px;border-radius:50%;background:var(--muted);box-shadow:0 0 8px currentColor}
.status.live #status-text{color:var(--green)}
.status.live .s-dot{background:var(--green);box-shadow:0 0 9px var(--green)}
.status.demo #status-text{color:var(--cyan)}
.status.demo .s-dot{background:var(--cyan);box-shadow:0 0 9px var(--cyan)}
.status.stale{border-color:rgba(255,59,107,.45)}
.status.stale #status-text{color:var(--danger)}
.status.stale .s-dot{background:var(--danger);box-shadow:0 0 10px var(--danger);animation:pulse 1.1s ease-in-out infinite}

/* ---------- bottom ticker ---------- */
.scroller{
  position:fixed;left:0;right:0;bottom:0;z-index:10;height:34px;overflow:hidden;
  background:linear-gradient(180deg,rgba(2,4,10,0),rgba(2,4,10,.92) 42%);
  border-top:1px solid rgba(0,255,163,.14);
  display:flex;align-items:center;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
}
.scroller-track{
  display:inline-flex;gap:44px;white-space:nowrap;padding-left:100%;
  font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.1em;color:var(--muted);
  animation:marquee 42s linear infinite;
}
.scroller-track b{color:var(--text);font-weight:700}
.scroller-track .up{color:var(--green)}
.scroller-track .down{color:var(--danger)}
.scroller-track .tag{color:var(--cyan)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){.scroller-track{animation-duration:120s}}