:root {
  --cyan: #3ad8f0;
  --cyan-hot: #7ef4ff;
  --cyan-dim: #1aa8c4;
  --gold: #e8b020;
  --gold-2: #f0c848;
  --green: #3cff9a;
  --green-dim: #2ad878;
  --mag: #c070ff;
  --mag-hot: #e0a0ff;
  --red: #e05068;
  --pink: #d05090;
  --navy: #070b14;
  --panel: rgba(8, 14, 24, 0.88);
  --panel-2: rgba(10, 16, 28, 0.92);
  --ink: #e8f4ff;
  --muted: #6aa8c0;
  --border: #2ad4ec;
}

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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #070b14;
  color: var(--ink);
  font-family: "Rajdhani", "Exo 2", "Segoe UI", sans-serif;
  user-select: none;
}

#stage, #c {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
#c { z-index: 0; }

#vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 48%, transparent 42%, rgba(4, 8, 16, 0.55) 100%),
    linear-gradient(180deg, rgba(4, 8, 14, 0.35) 0%, transparent 16%, transparent 82%, rgba(4, 8, 14, 0.4) 100%);
}

#float-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}

.hidden { display: none !important; }
button { font-family: inherit; cursor: pointer; }

/* ========== WORLD TAGS ========== */
.wtag {
  position: absolute;
  transform: translate(-50%, -100%);
  white-space: nowrap;
  font-family: "Share Tech Mono", "Orbitron", monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 4px 12px;
  border-radius: 14px;
  pointer-events: none;
}
.wtag.echo {
  color: #8af4ff;
  background: rgba(8, 28, 36, 0.9);
  border: 1px solid #3ad8f0;
  box-shadow: 0 0 10px rgba(58, 216, 240, 0.35);
}
.wtag.patrol {
  color: #ffc0c8;
  background: rgba(48, 10, 16, 0.9);
  border: 1px solid #e05068;
  box-shadow: 0 0 10px rgba(224, 80, 104, 0.35);
}
.wtag.ghost {
  color: #e0b8ff;
  background: rgba(28, 10, 40, 0.9);
  border: 1px solid #c070ff;
  box-shadow: 0 0 10px rgba(192, 112, 255, 0.35);
}
.wtag.deliver {
  color: #ffe8a0;
  background: rgba(36, 24, 8, 0.9);
  border: 1px solid #e8b020;
  box-shadow: 0 0 10px rgba(232, 176, 32, 0.35);
}

/* ========== HUD ========== */
#hud {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
}
#hud button { pointer-events: auto; }

#hud-tl {
  position: absolute;
  top: 16px;
  left: 20px;
}
.title-bar {
  background: var(--panel);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 8px 16px 8px 14px;
  box-shadow: 0 0 16px rgba(42, 212, 236, 0.16);
}
.title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.title-word {
  font-family: "Orbitron", "Exo 2", sans-serif;
  font-weight: 800;
  font-size: clamp(16px, 1.55vw, 22px);
  letter-spacing: 0.14em;
  color: #7eeeff;
  text-shadow: 0 0 12px rgba(58, 216, 240, 0.55);
}
.ep-badge {
  display: inline-block;
  background: #c88818;
  color: #1a1004;
  font-family: "Orbitron", sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 4px 10px;
  border-radius: 4px;
  white-space: nowrap;
}
.ep-badge.lg { font-size: 11px; padding: 6px 14px; margin: 10px 0 16px; }
.obj-bar {
  margin-top: 8px;
  background: rgba(8, 18, 28, 0.82);
  border: 1px solid #1a4a58;
  border-radius: 6px;
  padding: 6px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 520px;
}
.obj-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 8px var(--cyan);
  flex-shrink: 0;
}
.obj-txt {
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #7ec8d8;
}

#hud-tc {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
}
.loop-panel {
  background: var(--panel);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 8px 16px 8px;
  min-width: min(560px, 40vw);
  box-shadow: 0 0 16px rgba(42, 212, 236, 0.14);
}
.loop-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.loop-lab {
  font-family: "Orbitron", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #5ad8f0;
}
.loop-lab b { color: #9ef4ff; }
.loop-ico { margin-right: 6px; }
.loop-timer {
  font-family: "Orbitron", "Share Tech Mono", monospace;
  font-size: 18px;
  font-weight: 800;
  color: #f0c848;
  letter-spacing: 0.06em;
  text-shadow: 0 0 8px rgba(240, 200, 72, 0.4);
}
.loop-track {
  position: relative;
  height: 8px;
  background: #0a121c;
  border-radius: 4px;
  margin: 8px 0 6px;
  overflow: hidden;
}
.loop-track i {
  display: block;
  height: 100%;
  width: 64%;
  background: linear-gradient(90deg, #2ad4f0 0%, #7ef0c0 55%, #f0e080 85%, #f8f0c0 100%);
  border-radius: 4px;
}
.loop-events {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  font-family: "Share Tech Mono", monospace;
  font-size: 8px;
  letter-spacing: 0.04em;
  color: #6a98a8;
}
.loop-events .ev-now { color: #f0c848; }

#hud-tr {
  position: absolute;
  top: 14px;
  right: 18px;
  display: flex;
  gap: 8px;
}
.stat-card {
  background: var(--panel);
  border: 1.5px solid #2a6a78;
  border-radius: 8px;
  padding: 8px 12px 7px;
  min-width: 110px;
  text-align: center;
}
.stealth-card { border-color: #2ad878; }
.score-card { border-color: #3a7080; }
.orders-card { border-color: #2a6a78; }
.stat-k {
  font-family: "Share Tech Mono", monospace;
  font-size: 9px;
  letter-spacing: 0.12em;
  color: #6aa8b8;
}
.stat-v {
  font-family: "Orbitron", sans-serif;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.15;
  margin-top: 2px;
}
.stat-v.green { color: #3cff9a; text-shadow: 0 0 8px rgba(60, 255, 154, 0.45); }
.stat-v.white { color: #e8f0f8; }
.stat-v.cyan { color: #7eeeff; }
.stat-s {
  font-family: "Share Tech Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #5a8898;
  margin-top: 2px;
}
.stat-s.cyan { color: #5ad8f0; }
.stat-s.gold { color: #e8b020; }

/* bottom left echo cards */
#hud-bl {
  position: absolute;
  left: 18px;
  bottom: 18px;
}
.swap-hint {
  text-align: center;
  font-family: "Orbitron", sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--mag-hot);
  text-shadow: 0 0 10px rgba(192, 112, 255, 0.55);
  margin-bottom: 8px;
}
.echo-pair { display: flex; gap: 8px; }
.echo-card {
  background: var(--panel-2);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px 10px;
  width: 210px;
  box-shadow: 0 0 14px rgba(42, 212, 236, 0.12);
}
.echo-card.mag-card {
  border-color: #a050e0;
  box-shadow: 0 0 14px rgba(160, 80, 224, 0.16);
}
.echo-card.active-glow {
  box-shadow: 0 0 18px rgba(58, 216, 240, 0.45);
}
.echo-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.echo-id {
  font-family: "Orbitron", sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #7eeeff;
}
.echo-id.mag { color: #d090ff; }
.echo-st {
  font-family: "Share Tech Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  color: #3cff9a;
}
.echo-st.mag { color: #c070ff; }
.echo-role {
  font-family: "Share Tech Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #5aa8b8;
  margin: 4px 0 6px;
}
.echo-role.mag { color: #a070c8; }
.echo-bar {
  height: 6px;
  background: #0a1820;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
}
.echo-bar i {
  display: block;
  height: 100%;
  width: 90%;
  background: linear-gradient(90deg, #1aa8c4, #3ad8f0);
}
.echo-bar.mag i {
  width: 100%;
  background: linear-gradient(90deg, #7030b0, #c070ff);
}
.echo-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  font-family: "Share Tech Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: #6aa8b8;
  line-height: 1.3;
}
.echo-meta b { color: #c8f0f8; font-weight: 700; }
.echo-meta.mag { color: #a080c0; }
.echo-meta.mag b { color: #e0c0ff; }

/* ability bar */
#hud-bc {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
}
.ability-bar {
  display: flex;
  gap: 6px;
  background: rgba(8, 14, 24, 0.92);
  border: 1.5px solid #1a4a58;
  border-radius: 12px;
  padding: 8px 10px;
  pointer-events: auto;
}
.abil {
  position: relative;
  width: 92px;
  height: 86px;
  background: #0c1824;
  border: 1.5px solid #1a5060;
  border-radius: 10px;
  color: #c8e8f0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  pointer-events: auto;
}
.abil:hover { border-color: var(--cyan); }
.abil.hot, .abil#btn-tab {
  border-color: var(--cyan);
  box-shadow: 0 0 12px rgba(58, 216, 240, 0.25);
}
.abil.held { border-color: #3cff9a; background: #0c2418; }
.abil img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: drop-shadow(0 0 4px #3ad8f0);
}
.abil-key {
  position: absolute;
  top: 5px;
  left: 7px;
  font-family: "Orbitron", sans-serif;
  font-size: 10px;
  font-weight: 800;
  color: var(--cyan);
  letter-spacing: 0.06em;
}
.abil-name {
  font-family: "Share Tech Mono", monospace;
  font-size: 8px;
  letter-spacing: 0.06em;
  color: #8ec8d4;
  text-align: center;
  line-height: 1.15;
  margin-top: 2px;
}
.abil-sub {
  font-family: "Share Tech Mono", monospace;
  font-size: 10px;
  color: #6aa8b8;
}
.abil-sub.ready { color: #f0c848; font-weight: 700; }

#hud-br {
  position: absolute;
  right: 18px;
  bottom: 18px;
}
.radar-panel {
  background: var(--panel);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px 8px;
  box-shadow: 0 0 14px rgba(42, 212, 236, 0.12);
}
.radar-head {
  display: flex;
  justify-content: space-between;
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: #7ec8d8;
  margin-bottom: 4px;
}
.radar-head .live { color: var(--cyan); }
#radar { display: block; }

#toast {
  position: absolute;
  top: 22%;
  left: 50%;
  transform: translateX(-50%);
  font-family: "Orbitron", sans-serif;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: #7eeeff;
  text-shadow: 0 0 16px rgba(58, 216, 240, 0.7);
  background: rgba(8, 14, 24, 0.7);
  border: 1px solid var(--cyan);
  padding: 10px 22px;
  border-radius: 8px;
  pointer-events: none;
}
#detect-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(180, 20, 40, 0.35) 100%);
  opacity: 0;
  transition: opacity 0.15s;
}
#detect-flash.on { opacity: 1; }

/* ========== MENU / OVERLAYS ========== */
#menu, #how, #pause, #end {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 40%, rgba(8, 24, 36, 0.28), rgba(4, 8, 16, 0.55));
}
.menu-frame, .how-card {
  background: rgba(8, 14, 24, 0.92);
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 36px 44px 28px;
  max-width: 640px;
  text-align: center;
  box-shadow: 0 0 40px rgba(42, 212, 236, 0.18);
}
.menu-kicker {
  font-family: "Share Tech Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.28em;
  color: #5aa8b8;
}
.menu-title {
  font-family: "Orbitron", sans-serif;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 900;
  letter-spacing: 0.12em;
  color: #7eeeff;
  text-shadow: 0 0 18px rgba(58, 216, 240, 0.55);
  margin-top: 8px;
}
.menu-blurb {
  font-family: "Rajdhani", sans-serif;
  font-size: 16px;
  line-height: 1.45;
  color: #b8d4de;
  margin: 8px 0 22px;
}
.menu-blurb b { color: #7eeeff; }
.menu-actions { display: flex; gap: 12px; justify-content: center; }
.menu-btn {
  background: #0c1824;
  border: 1.5px solid #2a6a78;
  color: #c8e8f0;
  font-family: "Orbitron", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 12px 22px;
  border-radius: 8px;
}
.menu-btn.primary {
  background: linear-gradient(180deg, #1a6880, #0e3a4a);
  border-color: var(--cyan);
  color: #e8ffff;
  box-shadow: 0 0 16px rgba(58, 216, 240, 0.25);
}
.menu-btn:hover { border-color: var(--cyan-hot); color: #fff; }
.menu-keys {
  margin-top: 18px;
  font-family: "Share Tech Mono", monospace;
  font-size: 11px;
  color: #6a98a8;
  letter-spacing: 0.04em;
}
.how-card h2 {
  font-family: "Orbitron", sans-serif;
  letter-spacing: 0.16em;
  color: #7eeeff;
  margin-bottom: 16px;
}
.how-card ul {
  text-align: left;
  list-style: none;
  font-family: "Rajdhani", sans-serif;
  font-size: 16px;
  color: #c8dce4;
  line-height: 1.7;
  margin-bottom: 14px;
}
.how-card ul b { color: #7eeeff; font-family: "Share Tech Mono", monospace; }
.how-note {
  font-family: "Rajdhani", sans-serif;
  font-size: 14px;
  color: #8ab0bc;
  margin-bottom: 16px;
}
.end-score {
  font-family: "Orbitron", sans-serif;
  font-size: 22px;
  color: #f0c848;
  margin: 8px 0 12px;
}

@media (max-width: 1200px) {
  .obj-bar { min-width: 0; max-width: 42vw; }
  .echo-card { width: 180px; }
  .abil { width: 76px; height: 78px; }
  .stat-v { font-size: 16px; }
}