// ============================================================
// D1 · ARENA — gamified · top-nav · neon magenta + cyan
// ============================================================

const arenaCSS = `
.d-arena .a-shell {
  min-height: calc(100vh - 60px);
  background:
    radial-gradient(ellipse 900px 500px at 8% -200px, oklch(55% 0.28 320 / 0.18), transparent 60%),
    radial-gradient(ellipse 800px 500px at 95% -100px, oklch(60% 0.20 215 / 0.16), transparent 60%),
    radial-gradient(ellipse 1600px 700px at 50% 110%, oklch(50% 0.20 280 / 0.10), transparent 60%),
    var(--bg);
}

/* === Top HUD bar === */
.d-arena .a-hud {
  position: sticky; top: 0; z-index: 30;
  background: linear-gradient(180deg, rgba(11,13,23,0.95), rgba(11,13,23,0.72));
  backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--line);
  padding: 14px 28px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 22px;
}
.d-arena .a-logo {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Space Grotesk'; font-weight: 700;
  font-size: 19px; letter-spacing: -0.03em;
}
.d-arena .a-logo .badge {
  width: 30px; height: 30px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--magenta), var(--cyan));
  display: flex; align-items: center; justify-content: center;
  color: #06070D;
  font-weight: 800;
  box-shadow: 0 0 24px -4px var(--magenta);
}
.d-arena .a-logo small {
  font-size: 10px; color: var(--text-faint);
  font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase;
}

.d-arena .a-nav { display: flex; gap: 2px; justify-content: center; }
.d-arena .a-nav button {
  border: none; background: transparent;
  color: var(--text-dim);
  font-family: inherit; font-size: 13px; font-weight: 500;
  padding: 10px 16px;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: color .15s, background .15s;
  position: relative;
}
.d-arena .a-nav button:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.d-arena .a-nav button.active {
  color: var(--text);
  background: linear-gradient(135deg, color-mix(in oklab, var(--magenta) 18%, transparent), color-mix(in oklab, var(--cyan) 12%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--magenta) 35%, transparent);
}
.d-arena .a-nav button .k {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; opacity: 0.5;
  padding: 1px 4px;
  border: 1px solid currentColor;
  border-radius: 3px;
}

.d-arena .a-tier {
  display: flex; align-items: center; gap: 12px;
}
.d-arena .a-tier .xp {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 200px;
}
.d-arena .a-tier .xp-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; color: var(--text-dim);
}
.d-arena .a-tier .xp-head b { color: var(--text); }
.d-arena .a-tier .xp-bar {
  height: 6px; border-radius: 999px;
  background: rgba(255,255,255,0.06);
  overflow: hidden; position: relative;
}
.d-arena .a-tier .xp-bar > i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--magenta), var(--cyan));
  border-radius: 999px;
  box-shadow: 0 0 14px var(--magenta);
}
.d-arena .a-tier .rank-badge {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--gold), oklch(70% 0.18 60));
  position: relative;
  display: flex; align-items: center; justify-content: center;
  color: #2A1A00;
  font-weight: 800;
  font-size: 16px;
  font-family: 'Space Grotesk';
  box-shadow:
    0 0 32px -4px oklch(85% 0.16 80 / 0.6),
    inset 0 -3px 0 oklch(50% 0.16 60);
}
.d-arena .a-tier .rank-badge::after {
  content: '';
  position: absolute; inset: 3px;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 9px;
  pointer-events: none;
}
.d-arena .a-tier .avatar {
  width: 38px; height: 38px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--magenta), var(--cyan));
  border: 2px solid var(--bg-2);
  display: flex; align-items: center; justify-content: center;
  color: #06070D; font-weight: 700; font-size: 13px;
  cursor: pointer;
}
.d-arena .a-tier .icon-btn {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  color: var(--text-dim);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.d-arena .a-tier .icon-btn:hover { color: var(--text); border-color: var(--line-3); }
.d-arena .a-tier .icon-btn .ping {
  position: absolute; top: 7px; right: 7px;
  width: 8px; height: 8px; border-radius: 999px;
  background: var(--magenta);
  box-shadow: 0 0 0 3px rgba(255,92,245,0.25);
}

.d-arena .a-content {
  max-width: 1480px; width: 100%; margin: 0 auto;
  padding: 28px;
  display: flex; flex-direction: column; gap: 22px;
}

.d-arena .a-pagehead {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
}
.d-arena .a-pagehead h1 {
  font-family: 'Space Grotesk';
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.035em;
  margin: 0;
}
.d-arena .a-pagehead h1 em {
  font-style: normal;
  background: linear-gradient(90deg, var(--magenta), var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.d-arena .a-pagehead .sub {
  color: var(--text-dim);
  font-size: 14px;
  margin-top: 6px;
}
.d-arena .a-btn {
  border: none;
  font-family: inherit; font-weight: 600; font-size: 13px;
  height: 40px; padding: 0 18px;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: filter .15s, transform .1s;
}
.d-arena .a-btn.primary {
  background: linear-gradient(135deg, var(--magenta), var(--magenta-2));
  color: #fff;
  box-shadow: 0 0 24px -6px var(--magenta);
}
.d-arena .a-btn.primary:hover { filter: brightness(1.08); }
.d-arena .a-btn.secondary {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-3);
  color: var(--text);
}
.d-arena .a-btn.secondary:hover { background: rgba(255,255,255,0.08); }
.d-arena .a-btn.ghost {
  background: transparent;
  color: var(--text-dim);
}
.d-arena .a-btn.ghost:hover { color: var(--text); }
.d-arena .a-btn.lg { height: 46px; padding: 0 22px; font-size: 14px; border-radius: 12px; }
.d-arena .a-btn.sm { height: 30px; padding: 0 12px; font-size: 12px; border-radius: 8px; }
.d-arena .a-btn:active { transform: scale(0.98); }

.d-arena .a-iconbtn {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  color: var(--text-dim);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.d-arena .a-iconbtn:hover { color: var(--text); border-color: var(--line-3); }

/* === Dashboard hero === */
.d-arena .a-hero {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 18px;
}
.d-arena .a-hero-card {
  position: relative;
  border-radius: 22px;
  padding: 24px;
  background:
    linear-gradient(135deg, rgba(255,92,245,0.10), transparent 50%),
    linear-gradient(225deg, rgba(92,217,255,0.08), transparent 50%),
    var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
}
.d-arena .a-hero-card::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 400px 200px at 90% -50px, var(--magenta), transparent 70%);
  opacity: 0.15;
  pointer-events: none;
}
.d-arena .a-hero-eyebrow {
  font-size: 11px; font-weight: 600;
  color: var(--text-dim);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 16px;
}
.d-arena .a-hero-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--positive);
  box-shadow: 0 0 8px var(--positive);
  animation: a-pulse 2s infinite;
}
@keyframes a-pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.4 } }

.d-arena .a-hero-eq {
  font-family: 'JetBrains Mono', monospace;
  font-size: 56px;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
}
.d-arena .a-hero-eq .c { color: var(--text-dim); font-size: 26px; font-weight: 500; }
.d-arena .a-hero-eq .d { color: var(--text-dim); font-size: 26px; }
.d-arena .a-hero-delta {
  margin-top: 14px;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  color: var(--positive);
  background: color-mix(in oklab, var(--positive) 12%, transparent);
  padding: 5px 10px;
  border-radius: 8px;
}
.d-arena .a-hero-delta .label {
  color: var(--text-faint);
  font-family: 'Space Grotesk';
  margin-left: 8px;
  font-size: 12px;
}
.d-arena .a-hero-spark {
  margin-top: 18px; height: 56px;
}
.d-arena .a-hero-acts {
  margin-top: 20px;
  display: flex; gap: 8px; flex-wrap: wrap;
}

/* === Stat tile === */
.d-arena .a-tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
}
.d-arena .a-tile .l {
  font-size: 11px; color: var(--text-dim);
  letter-spacing: 0.06em; text-transform: uppercase;
  font-weight: 600;
  display: flex; align-items: center; gap: 6px;
}
.d-arena .a-tile .v {
  font-family: 'JetBrains Mono', monospace;
  font-size: 26px; font-weight: 600;
  letter-spacing: -0.03em;
  margin-top: 8px;
}
.d-arena .a-tile .d {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  margin-top: 4px;
}
.d-arena .a-tile.glow {
  background: linear-gradient(135deg, rgba(255,92,245,0.10), var(--surface) 60%);
  border-color: color-mix(in oklab, var(--magenta) 30%, var(--line));
}
.d-arena .a-tile.cyan {
  background: linear-gradient(135deg, rgba(92,217,255,0.10), var(--surface) 60%);
  border-color: color-mix(in oklab, var(--cyan) 30%, var(--line));
}

/* === Account card · holographic === */
.d-arena .a-acct {
  position: relative;
  background:
    linear-gradient(135deg, rgba(255,92,245,0.04), rgba(92,217,255,0.04) 100%),
    var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 0;
  overflow: hidden;
  transition: transform .2s, border-color .2s, box-shadow .2s;
  cursor: pointer;
  display: flex; flex-direction: column;
}
.d-arena .a-acct::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 250px 150px at 95% 0%, var(--magenta), transparent 70%);
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
}
.d-arena .a-acct:hover { transform: translateY(-2px); border-color: var(--line-3); }
.d-arena .a-acct:hover::before { opacity: 0.10; }
.d-arena .a-acct.funded { border-color: color-mix(in oklab, var(--magenta) 35%, var(--line)); }
.d-arena .a-acct.funded::before { opacity: 0.18; }

.d-arena .a-acct-top {
  padding: 18px 20px 14px;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
  position: relative;
}
.d-arena .a-acct-id {
  display: flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; color: var(--text);
}
.d-arena .a-acct-tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 5px;
}
.d-arena .a-acct-tag.funded {
  background: linear-gradient(90deg, var(--magenta), var(--magenta-2));
  color: #fff;
  box-shadow: 0 0 12px -2px var(--magenta);
}
.d-arena .a-acct-tag.eval {
  background: color-mix(in oklab, var(--cyan) 14%, transparent);
  color: var(--cyan);
  border: 1px solid color-mix(in oklab, var(--cyan) 35%, transparent);
}
.d-arena .a-acct-tag.failed {
  background: color-mix(in oklab, var(--negative) 14%, transparent);
  color: var(--negative);
  border: 1px solid color-mix(in oklab, var(--negative) 35%, transparent);
}
.d-arena .a-acct-tag.passed {
  background: color-mix(in oklab, var(--gold) 14%, transparent);
  color: var(--gold);
  border: 1px solid color-mix(in oklab, var(--gold) 35%, transparent);
}
.d-arena .a-acct-size {
  font-family: 'Space Grotesk';
  font-size: 22px; font-weight: 700;
  letter-spacing: -0.025em;
  margin-top: 2px;
}
.d-arena .a-acct-size small {
  color: var(--text-dim);
  font-weight: 500;
  font-size: 12px;
  margin-left: 6px;
  display: inline-block;
}
.d-arena .a-acct-bal {
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.025em;
  text-align: right;
}
.d-arena .a-acct-bal-label {
  font-size: 10px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  margin-bottom: 2px;
  text-align: right;
}
.d-arena .a-acct-delta {
  font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
  text-align: right;
}

.d-arena .a-acct-stages {
  padding: 6px 20px 14px;
  display: flex; align-items: center; gap: 6px;
}
.d-arena .a-stage-node {
  flex: 1;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line);
  font-size: 11px;
  color: var(--text-dim);
}
.d-arena .a-stage-node.passed {
  background: color-mix(in oklab, var(--magenta) 8%, transparent);
  border-color: color-mix(in oklab, var(--magenta) 30%, var(--line));
  color: var(--text);
}
.d-arena .a-stage-node.active {
  background: color-mix(in oklab, var(--cyan) 10%, transparent);
  border-color: color-mix(in oklab, var(--cyan) 40%, var(--line));
  color: var(--text);
  box-shadow: 0 0 16px -6px var(--cyan);
}
.d-arena .a-stage-node.failed {
  background: color-mix(in oklab, var(--negative) 10%, transparent);
  border-color: color-mix(in oklab, var(--negative) 35%, var(--line));
  color: var(--text);
}
.d-arena .a-stage-node .dot {
  width: 16px; height: 16px;
  border-radius: 999px;
  background: var(--surface-3);
  display: flex; align-items: center; justify-content: center;
  flex: none;
  font-size: 9px;
}
.d-arena .a-stage-node.passed .dot {
  background: linear-gradient(135deg, var(--magenta), var(--magenta-2));
  color: #fff;
}
.d-arena .a-stage-node.active .dot { background: var(--cyan); color: #06070D; }
.d-arena .a-stage-node.failed .dot { background: var(--negative); color: #fff; }
.d-arena .a-stage-node .label { font-weight: 600; line-height: 1.1; }
.d-arena .a-stage-node .label small { display: block; color: var(--text-faint); font-size: 9px; margin-top: 1px; }

.d-arena .a-acct-obj {
  padding: 4px 20px 12px;
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px;
}
.d-arena .a-obj {
  display: flex; flex-direction: column; gap: 5px;
}
.d-arena .a-obj-head {
  display: flex; justify-content: space-between;
  font-size: 10px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.d-arena .a-obj-head .pct {
  font-family: 'JetBrains Mono', monospace;
  color: var(--text);
}
.d-arena .a-obj-bar {
  height: 4px; border-radius: 999px;
  background: rgba(255,255,255,0.05);
  overflow: hidden;
}
.d-arena .a-obj-bar > i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--magenta), var(--cyan));
  border-radius: 999px;
}
.d-arena .a-obj-bar.warn > i {
  background: linear-gradient(90deg, var(--gold), oklch(70% 0.20 50));
}
.d-arena .a-obj-bar.danger > i {
  background: linear-gradient(90deg, var(--negative), oklch(60% 0.22 25));
}
.d-arena .a-obj-vals {
  display: flex; justify-content: space-between; align-items: baseline;
}
.d-arena .a-obj-vals .cur {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 600;
}
.d-arena .a-obj-vals .tgt {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: var(--text-faint);
}

.d-arena .a-acct-foot {
  border-top: 1px solid var(--line);
  background: rgba(0,0,0,0.18);
  padding: 12px 16px;
  display: flex; align-items: center; gap: 10px;
}
.d-arena .a-acct-foot .creds {
  flex: 1;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-dim);
  display: flex; align-items: center; gap: 8px;
}
.d-arena .a-acct-foot .sep { color: var(--text-faint); }

/* === Leaderboard === */
.d-arena .a-leader {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px;
}
.d-arena .a-leader h3 {
  margin: 0 0 4px;
  font-size: 16px;
  font-family: 'Space Grotesk';
}
.d-arena .a-leader-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-2);
}
.d-arena .a-leader-row:last-child { border-bottom: none; }
.d-arena .a-leader-row.self {
  background: linear-gradient(90deg, rgba(255,92,245,0.10), transparent);
  margin: 0 -10px; padding: 10px;
  border-radius: 10px;
  border-color: transparent;
}
.d-arena .a-leader-rank {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
}
.d-arena .a-leader-rank.top1 { color: var(--gold); }
.d-arena .a-leader-rank.top2 { color: #C7C9D1; }
.d-arena .a-leader-rank.top3 { color: oklch(70% 0.13 40); }
.d-arena .a-leader-name { font-weight: 500; }
.d-arena .a-leader-gain {
  font-family: 'JetBrains Mono', monospace;
  color: var(--positive);
  font-weight: 600;
  font-size: 13px;
}

/* === Achievements row === */
.d-arena .a-ach {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px;
}
.d-arena .a-ach-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-top: 14px;
}
.d-arena .a-ach-tile {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center;
  position: relative;
}
.d-arena .a-ach-tile.unlocked {
  background: linear-gradient(135deg, rgba(255,92,245,0.10), rgba(92,217,255,0.06));
  border-color: color-mix(in oklab, var(--magenta) 25%, var(--line));
}
.d-arena .a-ach-tile.locked { opacity: 0.45; }
.d-arena .a-ach-tile .glyph {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  color: var(--text-dim);
}
.d-arena .a-ach-tile.unlocked .glyph {
  background: linear-gradient(135deg, var(--magenta), var(--cyan));
  color: #06070D;
}
.d-arena .a-ach-tile .n {
  font-size: 11px; font-weight: 600;
  line-height: 1.2;
}
.d-arena .a-ach-tile .x {
  font-size: 10px;
  color: var(--text-faint);
  font-family: 'JetBrains Mono', monospace;
}

/* === Cols layout === */
.d-arena .a-cols-2 {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 18px;
}

/* === Accounts grid list === */
.d-arena .a-acct-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
  gap: 18px;
}

/* === Filter chips === */
.d-arena .a-chips {
  display: inline-flex;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}
.d-arena .a-chips button {
  border: none; background: transparent;
  color: var(--text-dim);
  font: inherit; font-size: 12px; font-weight: 500;
  padding: 7px 12px;
  border-radius: 7px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.d-arena .a-chips button.active {
  background: rgba(255,255,255,0.06);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line-3);
}
.d-arena .a-chips button .c {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
}

/* === Account detail === */
.d-arena .a-detail-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 18px;
}
.d-arena .a-stage-hero {
  background:
    linear-gradient(135deg, rgba(255,92,245,0.10), rgba(92,217,255,0.06) 100%),
    var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 24px;
}
.d-arena .a-stage-bar {
  display: flex; align-items: center; gap: 10px;
  margin-top: 16px;
}
.d-arena .a-stage-bar .link {
  flex: 1; height: 3px; border-radius: 999px;
  background: rgba(255,255,255,0.06);
}
.d-arena .a-stage-bar .link.lit {
  background: linear-gradient(90deg, var(--magenta), var(--cyan));
}
.d-arena .a-stage-bar .node {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-width: 70px;
}
.d-arena .a-stage-bar .ring {
  width: 36px; height: 36px;
  border-radius: 999px;
  background: var(--surface-3);
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 700;
  color: var(--text-dim);
  border: 2px solid var(--line);
}
.d-arena .a-stage-bar .node.passed .ring {
  background: linear-gradient(135deg, var(--magenta), var(--magenta-2));
  border-color: transparent;
  color: #fff;
}
.d-arena .a-stage-bar .node.active .ring {
  background: var(--cyan);
  border-color: transparent;
  color: #06070D;
  box-shadow: 0 0 0 6px color-mix(in oklab, var(--cyan) 25%, transparent);
}
.d-arena .a-stage-bar .node.failed .ring {
  background: var(--negative);
  border-color: transparent;
  color: #fff;
}
.d-arena .a-stage-bar .node .lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  font-weight: 600;
}
.d-arena .a-stage-bar .node.active .lbl,
.d-arena .a-stage-bar .node.passed .lbl { color: var(--text); }

.d-arena .a-obj-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 20px;
}
.d-arena .a-obj-tile {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
}

.d-arena .a-side {
  display: flex; flex-direction: column; gap: 14px;
}

/* === Mobile === */
.d-arena .am {
  width: 100%; min-height: 100%;
  background:
    radial-gradient(ellipse 400px 300px at 0% 0%, rgba(255,92,245,0.20), transparent 60%),
    radial-gradient(ellipse 400px 300px at 100% 30%, rgba(92,217,255,0.12), transparent 60%),
    var(--bg);
  color: var(--text);
  padding: 56px 20px 110px;
  position: relative;
  font-family: 'Space Grotesk', sans-serif;
}
.d-arena .am-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
}
.d-arena .am-greet {
  font-size: 22px; font-weight: 700;
  letter-spacing: -0.025em;
}
.d-arena .am-greet small {
  display: block;
  font-size: 12px;
  color: var(--text-dim);
  font-weight: 500;
  margin-top: 2px;
  letter-spacing: 0;
}
.d-arena .am-hero {
  background:
    linear-gradient(135deg, rgba(255,92,245,0.16), rgba(92,217,255,0.10) 100%),
    var(--surface);
  border: 1px solid var(--line-3);
  border-radius: 22px;
  padding: 22px;
  margin-bottom: 16px;
}
.d-arena .am-rankbar {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px;
}
.d-arena .am-rankbar .b {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--gold), oklch(70% 0.18 60));
  color: #2A1A00;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  box-shadow: 0 0 24px -6px var(--gold);
}
.d-arena .am-rankbar .meta { flex: 1; }
.d-arena .am-rankbar .meta b { font-size: 14px; font-weight: 700; }
.d-arena .am-rankbar .meta div { font-size: 11px; color: var(--text-dim); }
.d-arena .am-eq {
  font-family: 'JetBrains Mono', monospace;
  font-size: 42px;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
}
.d-arena .am-eq .c { color: var(--text-dim); font-size: 20px; font-weight: 500; }
.d-arena .am-eq .d { color: var(--text-dim); font-size: 20px; }
.d-arena .am-delta {
  margin-top: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--positive);
}
.d-arena .am-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  margin-top: 16px;
}
.d-arena .am-acts-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 10px;
  margin-bottom: 16px;
}
.d-arena .am-act {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 6px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 10px;
  color: var(--text-dim);
  cursor: pointer;
}
.d-arena .am-act .ico {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(255,92,245,0.16), rgba(92,217,255,0.10));
  display: flex; align-items: center; justify-content: center;
  color: var(--text);
}
.d-arena .am-act b { color: var(--text); font-size: 11px; }

.d-arena .am-section-head {
  display: flex; justify-content: space-between; align-items: center;
  margin: 18px 0 12px;
}
.d-arena .am-section-head h3 {
  margin: 0;
  font-size: 14px; font-weight: 700;
  letter-spacing: -0.01em;
}
.d-arena .am-section-head a {
  font-size: 12px; color: var(--text-dim);
  display: inline-flex; align-items: center; gap: 4px;
}

.d-arena .am-acct {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 10px;
  position: relative;
}
.d-arena .am-acct.funded {
  background: linear-gradient(135deg, rgba(255,92,245,0.10), var(--surface));
  border-color: color-mix(in oklab, var(--magenta) 25%, var(--line));
}
.d-arena .am-acct-row1 {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 6px;
}
.d-arena .am-acct-id {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; color: var(--text-dim);
}
.d-arena .am-acct-size {
  font-size: 18px; font-weight: 700; letter-spacing: -0.02em;
}
.d-arena .am-acct-bal {
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px; font-weight: 600; letter-spacing: -0.02em;
  text-align: right;
}
.d-arena .am-acct-bar {
  margin-top: 10px;
  display: flex; align-items: center; gap: 8px;
}
.d-arena .am-acct-bar .seg {
  flex: 1; height: 4px;
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
  overflow: hidden;
}
.d-arena .am-acct-bar .seg.lit {
  background: linear-gradient(90deg, var(--magenta), var(--cyan));
}
.d-arena .am-acct-bar .seg .ind {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--magenta), var(--cyan));
}

/* mobile tabbar */
.d-arena .am-tabbar {
  position: absolute;
  left: 16px; right: 16px; bottom: 18px;
  height: 68px;
  background: rgba(11,13,23,0.85);
  backdrop-filter: blur(20px);
  border: 1px solid var(--line-3);
  border-radius: 22px;
  display: flex; align-items: center; justify-content: space-around;
  padding: 0 10px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.5);
}
.d-arena .am-tab {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 9px; font-weight: 600;
  color: var(--text-faint);
  cursor: pointer;
}
.d-arena .am-tab.active { color: var(--text); }
.d-arena .am-tab.cta {
  flex: none; width: 52px; height: 52px;
  background: linear-gradient(135deg, var(--magenta), var(--cyan));
  border-radius: 16px;
  color: #06070D;
  justify-content: center;
  font-size: 0;
  box-shadow: 0 0 28px -6px var(--magenta);
}
`;

function ArenaApp() {
  const { page } = useApp();
  // Inject CSS once
  useEffect(() => {
    if (!document.getElementById('arena-css')) {
      const s = document.createElement('style');
      s.id = 'arena-css'; s.textContent = arenaCSS;
      document.head.appendChild(s);
    }
  }, []);

  const { view } = useApp();
  const ROUTES = {
    dashboard:    ArenaDashboard,
    accounts:     ArenaAccounts,
    account:      ArenaAccountDetail,
    newAccount:   window.ArenaNewChallenge,
    payouts:      window.ArenaPayouts,
    billing:      window.ArenaBilling,
    settings:     window.ArenaSettings,
    credentials:  window.ArenaCredentials,
    notifications:window.ArenaNotifications,
    tiers:        window.ArenaTiers,
    journal:      window.ArenaJournal,
    calendar:     window.ArenaCalendar,
    affiliates:   window.ArenaAffiliates,
    help:         window.ArenaHelp,
      wallet:       window.ArenaWallet,
    grandcup:     window.ArenaGrandCup,
    education:    window.ArenaEducation,
    tv:           window.ArenaTV,
    merchandise:  window.ArenaMerchandise,
    webtrader:    window.ArenaWebtrader,
    inbox:        window.ArenaInbox,
    profile:      window.ArenaProfile,
    profileEdit:  window.ArenaProfileEdit,
    security:     window.ArenaSecurity,
    deposit:      window.ArenaDeposit,
    depositCrypto:window.ArenaDepositCrypto,
    depositCard:  window.ArenaDepositCard,
    depositWire:  window.ArenaDepositWire,
    withdraw:     window.ArenaWithdraw,
    withdrawCrypto: window.ArenaWithdrawCrypto,
    withdrawWire:   window.ArenaWithdrawWire,
    withdrawConfirm:window.ArenaWithdrawConfirm,
  };
  const MOBILE_ROUTES = {
    dashboard:    ArenaMobileDash,
    accounts:     ArenaMobileAccounts,
    account:      ArenaMobileAccount,
    newAccount:   window.ArenaMobileNewChallenge,
    payouts:      window.ArenaMobilePayouts,
    billing:      window.ArenaMobileBilling,
    settings:     window.ArenaMobileSettings,
    credentials:  window.ArenaMobileCredentials,
    notifications:window.ArenaMobileNotifications,
    tiers:        window.ArenaMobileTiers,
    journal:      window.ArenaMobileJournal,
    calendar:     window.ArenaMobileCalendar,
    affiliates:   window.ArenaMobileAffiliates,
    help:         window.ArenaMobileHelp,
    webtrader:    window.ArenaMobileWebtrader,
    inbox:        window.ArenaMobileInbox,
    profile:      window.ArenaMobileProfile,
    profileEdit:  window.ArenaMobileProfileEdit,
    security:     window.ArenaMobileSecurity,
    wallet:       window.ArenaMobileWallet,
    deposit:      window.ArenaMobileDeposit,
    depositCrypto:window.ArenaMobileDepositCrypto,
    depositCard:  window.ArenaMobileDepositCard,
    depositWire:  window.ArenaMobileDepositWire,
    withdraw:     window.ArenaMobileWithdraw,
    withdrawCrypto: window.ArenaMobileWithdrawCrypto,
    withdrawWire:   window.ArenaMobileWithdrawWire,
    withdrawConfirm:window.ArenaMobileWithdrawConfirm,
    grandcup:     window.ArenaMobileGrandCup,
    education:    window.ArenaMobileEducation,
    tv:           window.ArenaMobileTV,
    merchandise:  window.ArenaMobileMerchandise,
  };
  if (view === 'mobile') {
    return (
      <div className="d-arena">
        <Phone w={390} h={844}>
          <ArenaMobile routes={MOBILE_ROUTES}/>
        </Phone>
        {window.ArenaTraderChooserHost ? <window.ArenaTraderChooserHost mobile/> : null}
      </div>
    );
  }
  return (
    <div className="d-arena">
      <div className="a-shell">
        <ArenaHUD/>
        <div className="a-content">
          {(() => {
            const C = ROUTES[page] || ArenaDashboard;
            return <C/>;
          })()}
        </div>
      </div>
      {window.ArenaTraderChooserHost ? <window.ArenaTraderChooserHost/> : null}
    </div>
  );
}

function ArenaHUD() {
  const { page, setPage, view, setView, setAuthed } = useApp();
  const xp = window.CURRENT_XP;
  const { tier, next, progress } = window.xpToTier(xp);
  const [time, setTime] = useState(() => formatCountdown());
  const [menuOpen, setMenuOpen] = useState(false);
  useEffect(() => {
    const id = setInterval(() => setTime(formatCountdown()), 1000);
    return () => clearInterval(id);
  }, []);
  function formatCountdown() {
    const now = new Date();
    const cutoff = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate(), 17, 0, 0));
    if (cutoff < now) cutoff.setUTCDate(cutoff.getUTCDate() + 1);
    const diff = cutoff - now;
    const h = String(Math.floor(diff/3600000)).padStart(2,'0');
    const m = String(Math.floor((diff%3600000)/60000)).padStart(2,'0');
    const s = String(Math.floor((diff%60000)/1000)).padStart(2,'0');
    return `${h}:${m}:${s}`;
  }
  const nav = [
    { id: 'dashboard',   label: 'Dashboard' },
    { id: 'accounts',    label: 'Accounts' },
    { id: 'journal',     label: 'Journal' },
    { id: 'grandcup',    label: 'Grand Cup', badge: 'LIVE' },
    { id: 'education',   label: 'Academy' },
    { id: 'tv',          label: 'TV' },
    { id: 'calendar',    label: 'Calendar' },
    { id: 'merchandise', label: 'Shop' },
  ];
  return (
    <>
      <div style={{
        position: 'sticky', top: 0, zIndex: 31,
        background: 'rgba(11,13,23,0.95)',
        backdropFilter: 'blur(18px)',
        borderBottom: '1px solid var(--line)',
        padding: '8px 28px',
        display: 'flex', alignItems: 'center', gap: 12,
        fontSize: 12,
      }}>
        <PropArenaLockup size={24}/>
        <div style={{ width: 1, height: 18, background: 'var(--line)', marginLeft: 8 }}/>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: 'var(--positive)', fontWeight: 600 }}>
          <span style={{ width: 7, height: 7, borderRadius: 999, background: 'var(--positive)', boxShadow: '0 0 6px var(--positive)' }}/>
          LIVE
        </span>
        <span style={{ color: 'var(--text-dim)', fontFamily: 'JetBrains Mono' }}>
          Day ends in <b style={{ color: 'var(--text)' }}>{time}</b>
        </span>
        <div style={{ flex: 1 }}/>
        <button className="a-btn ghost sm" onClick={() => setPage('wallet')}>
          <I.wallet size={11}/> Wallet · <span className="mono" style={{ color: 'var(--text)', marginLeft: 2 }}>$1,284.50</span>
        </button>
        <button className="a-btn ghost sm" onClick={() => setPage('inbox')} title="Inbox">
          <I.mail size={11}/> Inbox
        </button>
        <button className="a-btn ghost sm" onClick={() => setPage('notifications')}>
          <I.bell size={11}/>
          <span style={{ background: 'var(--magenta)', color: '#fff', borderRadius: 999, padding: '0 5px', fontSize: 10, fontWeight: 700, marginLeft: 4 }}>3</span>
        </button>
        <button className="a-btn ghost sm" onClick={() => setPage('help')} title="Help">
          <I.help size={11}/>
        </button>
        <button className="a-btn ghost sm" onClick={() => setView(view === 'mobile' ? 'desktop' : 'mobile')} title={view === 'mobile' ? 'Switch to desktop' : 'Switch to mobile'}>
          {view === 'mobile' ? <I.candles size={11}/> : <I.candles size={11}/>}
          <span style={{ marginLeft: 4 }}>{view === 'mobile' ? 'Desktop' : 'Mobile'} view</span>
        </button>
        <button className="a-btn primary sm" onClick={() => setPage('newAccount')}>
          <I.plus size={11}/> Add account
        </button>
        <button className="a-btn ghost sm" onClick={() => { setAuthed(false); }} title="Log out">
          <I.logout size={11}/>
        </button>
      </div>

      <div className="a-hud">
        <div className="a-tier" style={{ position: 'relative' }}>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 12,
            padding: '8px 14px 8px 8px',
            background: 'rgba(255,255,255,0.03)',
            border: '1px solid var(--line)',
            borderRadius: 14,
            cursor: 'pointer',
          }} onClick={() => setMenuOpen(o => !o)}>
            <div style={{
              width: 36, height: 36, borderRadius: 999,
              background: 'linear-gradient(135deg, var(--magenta), var(--cyan))',
              color: '#06070D', display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontWeight: 700, fontSize: 13,
              boxShadow: 'inset 0 -3px 0 color-mix(in oklab, var(--magenta-2) 60%, transparent)',
            }}>YL</div>
            <div style={{ display: 'flex', flexDirection: 'column', minWidth: 0 }}>
              <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--text)', whiteSpace: 'nowrap' }}>Yulia Larssen</span>
              <span style={{ fontSize: 10, fontWeight: 600, color: 'var(--text-faint)', letterSpacing: '0.14em', textTransform: 'uppercase', whiteSpace: 'nowrap' }}>KYC verified</span>
            </div>
            <button onClick={e=>{e.stopPropagation(); setAuthed(false);}} style={{
              border: 'none', background: 'transparent',
              color: 'var(--text-dim)', cursor: 'pointer',
              width: 26, height: 26, borderRadius: 6,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }} title="Log out">
              <I.logout size={14}/>
            </button>
          </div>
          {menuOpen && (
            <>
              <div onClick={() => setMenuOpen(false)} style={{ position: 'fixed', inset: 0, zIndex: 100 }}/>
              <div style={{
                position: 'absolute', top: 'calc(100% + 8px)', right: 0,
                minWidth: 220, zIndex: 101,
                background: 'var(--surface)',
                border: '1px solid var(--line-3)',
                borderRadius: 14,
                padding: 6,
                boxShadow: '0 20px 50px rgba(0,0,0,0.5)',
              }}>
                {[
                  { id: 'profile',    l: 'Profile',        i: 'user' },
                  { id: 'security',   l: 'Security',       i: 'shield' },
                  { id: 'affiliates', l: 'Refer a friend', i: 'users' },
                  { id: 'settings',   l: 'Email preferences', i: 'settings' },
                  { id: 'help',       l: 'Help & support', i: 'help' },
                ].map(it => {
                  const Ic = I[it.i];
                  return (
                    <button key={it.id} onClick={() => { setMenuOpen(false); setPage(it.id); }} style={{
                      width: '100%',
                      display: 'flex', alignItems: 'center', gap: 12,
                      padding: '10px 12px',
                      border: 'none', background: 'transparent',
                      color: 'var(--text)', font: 'inherit', fontSize: 13,
                      borderRadius: 9, cursor: 'pointer', textAlign: 'left',
                    }}
                    onMouseEnter={e => e.currentTarget.style.background = 'rgba(255,255,255,0.04)'}
                    onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
                      <Ic size={15} style={{ color: 'var(--text-dim)' }}/>
                      <span>{it.l}</span>
                    </button>
                  );
                })}
              </div>
            </>
          )}
        </div>
        <div className="a-nav" style={{ overflowX: 'auto', justifyContent: 'flex-start', flexWrap: 'wrap' }}>
          {nav.map(n => (
            <button key={n.id} className={page === n.id ? 'active' : ''} onClick={() => setPage(n.id)} style={{ position: 'relative', whiteSpace: 'nowrap' }}>
              {n.label}
              {n.badge && <span style={{ fontSize: 8, padding: '1px 5px', background: 'var(--magenta)', color: '#fff', borderRadius: 3, fontWeight: 700, letterSpacing: 0.04, marginLeft: 4 }}>{n.badge}</span>}
            </button>
          ))}
        </div>
        <div className="a-tier" style={{ minWidth: 'auto' }}>
          <div className="rank-badge" onClick={() => setPage('tiers')} style={{ cursor: 'pointer' }}>G</div>
          <div className="xp" onClick={() => setPage('tiers')} style={{ cursor: 'pointer', minWidth: 160 }}>
            <div className="xp-head">
              <span><b>{tier.name}</b> · Lv {Math.floor(xp/100)}</span>
              <span className="mono">{xp}<span style={{ color: 'var(--text-faint)' }}> / {next?.min || '∞'}</span></span>
            </div>
            <div className="xp-bar"><i style={{ width: (progress*100) + '%' }}></i></div>
          </div>
        </div>      </div>
    </>
  );
}

// Inject CSS immediately on script load (so auth screens get the base styles too).
(function() {
  if (typeof document === 'undefined') return;
  if (document.getElementById('arena-css')) return;
  const s = document.createElement('style');
  s.id = 'arena-css';
  s.textContent = arenaCSS;
  document.head.appendChild(s);
})();