/* ═══════════════════════════════════════════════════════════════════════════
   PREDICTER · ARENA v2  (css/arena-v2.css)  — v76–v125 visual reboot
   Intentionally LOUDER so the product no longer “looks the same.”
   Layered on top of system.css + app.css. Not Diablo.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --bg0: #04030a;
  --bg1: #0a0814;
  --panel: rgba(14, 12, 24, .92);
  --panel2: #14101f;
  --panel3: #1c1630;
  --line: rgba(255, 200, 90, .16);
  --line-hi: rgba(255, 210, 120, .4);
  --gold: #ffc94a;
  --gold-hi: #ffe29a;
  --mint: #3dffc0;
  --violet: #c4a1ff;
  --cyan: #5ad4ff;
  --head-h: 60px;
  --nav-w: 210px;
  --glow-cyan: 0 0 24px rgba(90, 212, 255, .3);
}

/* Arena floor: grid + noise + cyan corner */
body {
  background:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(255, 201, 74, .14), transparent 55%),
    radial-gradient(ellipse 50% 40% at 100% 80%, rgba(61, 255, 192, .08), transparent 50%),
    radial-gradient(ellipse 40% 30% at 0% 100%, rgba(90, 212, 255, .07), transparent 45%),
    linear-gradient(180deg, #0b0916 0%, #04030a 45%, #020108 100%) !important;
}
body::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  opacity: .22;
  background-image:
    linear-gradient(rgba(255, 201, 74, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 201, 74, .04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 75%);
}

/* ── TICKER (v80) ─────────────────────────────────────────────────────────── */
#ticker {
  grid-area: head;
  position: absolute;
  top: var(--head-h);
  left: 0; right: 0;
  height: 28px;
  z-index: 19;
  display: flex; align-items: center; gap: 0;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(8, 6, 16, .98), rgba(12, 10, 22, .95));
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .08em;
}
#app { grid-template-rows: calc(var(--head-h) + 28px) 1fr auto; }
#ticker .tk-item {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 16px; white-space: nowrap;
  border-inline-end: 1px solid rgba(255,255,255,.06);
  color: var(--mute);
}
#ticker .tk-sym { color: var(--gold-hi); font-weight: 700; }
#ticker .tk-px { color: var(--text); font-variant-numeric: tabular-nums; font-weight: 600; }
#ticker .tk-ch.up { color: var(--mint); }
#ticker .tk-ch.dn { color: var(--red); }
#ticker .tk-live {
  margin-inline-start: auto;
  padding: 0 14px;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: .14em;
}

/* ── HEAD HUD ─────────────────────────────────────────────────────────────── */
#head {
  background: linear-gradient(180deg, rgba(16, 12, 28, .96), rgba(8, 6, 14, .94)) !important;
  border-bottom: 1px solid var(--line-hi) !important;
  box-shadow: 0 1px 0 rgba(255, 201, 74, .08), 0 12px 40px rgba(0,0,0,.4);
}
#head .brand .mark {
  border-radius: 10px;
  background: linear-gradient(145deg, #ffd56a, #ff8a3d 55%, #ff5c7a);
  box-shadow: 0 0 0 1px rgba(255,255,255,.15), var(--glow-gold);
  width: 34px; height: 34px;
}
#head .live-bug {
  border-radius: 8px;
  border-color: rgba(61, 255, 192, .4);
  background: rgba(61, 255, 192, .08);
  color: var(--mint);
  box-shadow: inset 0 0 12px rgba(61, 255, 192, .08);
}

/* ── NAV as weapon rail ───────────────────────────────────────────────────── */
#nav {
  background:
    linear-gradient(180deg, rgba(20, 14, 36, .5), transparent 40%),
    var(--bg1) !important;
  border-right: 1px solid var(--line-hi) !important;
  padding: 14px 10px !important;
  gap: 6px !important;
}
.nav-btn {
  border-radius: 12px !important;
  padding: 14px 12px 14px 14px !important;
  border-inline-start: 3px solid transparent !important;
  position: relative;
  letter-spacing: .16em !important;
}
.nav-btn.active {
  border-inline-start-color: var(--gold) !important;
  background: linear-gradient(90deg, rgba(255, 201, 74, .16), rgba(255, 201, 74, .04)) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 201, 74, .2), 0 8px 24px rgba(0,0,0,.25);
  color: var(--gold-hi) !important;
}
.nav-btn .ic {
  display: block; font-size: 15px; margin-bottom: 4px; opacity: .85;
}
.nav-btn.active .ic { opacity: 1; filter: drop-shadow(0 0 6px rgba(255,201,74,.5)); }

/* ── MAIN + PANELS ────────────────────────────────────────────────────────── */
#main {
  padding: 18px 20px 28px !important;
  background:
    radial-gradient(500px 200px at 10% 0%, rgba(255, 201, 74, .07), transparent 60%),
    radial-gradient(400px 180px at 90% 20%, rgba(90, 212, 255, .05), transparent 55%),
    var(--bg0) !important;
}
.panel {
  background: linear-gradient(165deg, rgba(28, 22, 48, .55), rgba(12, 10, 20, .92)) !important;
  border: 1px solid var(--line-hi) !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.04) !important;
  backdrop-filter: blur(10px);
}
.panel-h h2 {
  font-family: var(--font-display) !important;
  letter-spacing: .06em !important;
  background: linear-gradient(90deg, var(--gold-hi), var(--gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
}

/* Stage = mission HUD */
.stage-strip {
  border: 1px solid var(--line-hi) !important;
  border-radius: 16px !important;
  background:
    linear-gradient(135deg, rgba(255, 201, 74, .1), transparent 40%),
    linear-gradient(180deg, rgba(20, 16, 36, .95), rgba(8, 6, 16, .98)) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.03);
  padding: 18px 20px !important;
  position: relative;
  overflow: hidden;
}
.stage-strip::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), var(--mint), transparent);
  opacity: .7;
}
.stage-strip .phase {
  font-size: clamp(28px, 4vw, 42px) !important;
  letter-spacing: .08em !important;
  text-shadow: 0 0 40px rgba(255, 201, 74, .25);
}
.stage-strip .meters .m {
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  padding: 10px 12px;
}
.stage-strip .meters .m .v {
  font-size: var(--fs-xl) !important;
  color: var(--gold-hi);
}

/* ── CALL CARDS — receipt strips ──────────────────────────────────────────── */
.call {
  display: grid !important;
  grid-template-columns: 5px 1fr auto !important;
  gap: 0 14px !important;
  align-items: center !important;
  padding: 14px 16px 14px 0 !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  background: linear-gradient(90deg, rgba(255,201,74,.04), rgba(12,10,20,.9) 30%) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
  transition: transform .15s var(--ease), border-color .15s, box-shadow .15s !important;
}
.call::before {
  content: "";
  grid-row: 1 / -1;
  width: 5px;
  height: 100%;
  min-height: 64px;
  border-radius: 14px 0 0 14px;
  background: var(--gold-dim);
}
.call.open::before { background: linear-gradient(180deg, var(--gold), #ff8a3d); box-shadow: 0 0 12px rgba(255,201,74,.5); }
.call.hit::before { background: linear-gradient(180deg, var(--mint), #1abf8a); }
.call.miss::before { background: linear-gradient(180deg, var(--red), #c43a55); }
.call.void::before { background: var(--mute2); }
.call:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(255,201,74,.35) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,.4), 0 0 0 1px rgba(255,201,74,.12);
}
.call .who {
  font-size: var(--fs-xs) !important;
  letter-spacing: .12em !important;
  color: var(--mute) !important;
}
.call .thesis {
  font-size: var(--fs-md) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  margin: 4px 0 8px !important;
  color: var(--text) !important;
}
.call .score {
  font-family: var(--font-display) !important;
  font-size: clamp(28px, 3.5vw, 40px) !important;
  font-weight: 800 !important;
  min-width: 3.2ch;
  text-align: center;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.06);
}
.call .score.open { color: var(--gold); text-shadow: 0 0 20px rgba(255,201,74,.4); }
.call .score.hit { color: var(--mint); text-shadow: 0 0 20px rgba(61,255,192,.35); }
.call .score.miss { color: var(--red); }

/* ── GATE v2 ──────────────────────────────────────────────────────────────── */
#gate {
  background:
    radial-gradient(ellipse 70% 50% at 20% 20%, rgba(255,201,74,.12), transparent 50%),
    radial-gradient(ellipse 50% 40% at 90% 70%, rgba(61,255,192,.08), transparent 45%),
    #05040c !important;
}
#gate .g-copy h1 {
  font-size: clamp(40px, 6vw, 72px) !important;
  line-height: .92 !important;
  letter-spacing: -.03em !important;
}
#gate .g-copy h1 em {
  background: linear-gradient(90deg, var(--gold-hi), #ff8a3d);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  text-shadow: none !important;
  filter: drop-shadow(0 0 30px rgba(255,201,74,.35));
}
.gate-card {
  border: 1px solid var(--line-hi) !important;
  border-radius: 20px !important;
  background: linear-gradient(165deg, rgba(30, 24, 50, .9), rgba(10, 8, 18, .95)) !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04) !important;
  padding: 22px !important;
}
.gate-card .btn-gold {
  min-height: 52px;
  font-size: var(--fs-md) !important;
  box-shadow: 0 12px 40px rgba(255, 201, 74, .35) !important;
}

/* ── RAIL ─────────────────────────────────────────────────────────────────── */
#rail {
  background: linear-gradient(180deg, #0e0b18, #080610) !important;
  border-left: 1px solid var(--line-hi) !important;
}
.lb-row {
  border-radius: 8px;
  padding: 8px 8px !important;
  margin-bottom: 2px;
}
.lb-row.me {
  background: rgba(255,201,74,.1) !important;
  border: 1px solid rgba(255,201,74,.25);
}
.clerk-box {
  border: 1px solid rgba(196, 161, 255, .25) !important;
  background: linear-gradient(160deg, rgba(183,148,255,.1), rgba(10,8,18,.6)) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 0 30px rgba(183,148,255,.06);
}

/* ── COMMAND PALETTE (v85) ────────────────────────────────────────────────── */
#cmdk {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: start center;
  padding-top: min(18vh, 140px);
  background: rgba(2, 1, 8, .72);
  backdrop-filter: blur(8px);
}
#cmdk.hide { display: none !important; }
.cmdk-panel {
  width: min(520px, 92vw);
  background: linear-gradient(180deg, #1a1528, #0c0a14);
  border: 1px solid var(--line-hi);
  border-radius: 16px;
  box-shadow: 0 40px 100px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.05);
  overflow: hidden;
}
.cmdk-panel input {
  width: 100%; border: 0; border-bottom: 1px solid var(--line);
  background: transparent; padding: 16px 18px;
  font-family: var(--font-mono); font-size: var(--fs-sm);
  color: var(--text); outline: none;
}
.cmdk-list { max-height: 280px; overflow: auto; padding: 8px; }
.cmdk-item {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; text-align: left;
  padding: 12px 14px; border: 0; border-radius: 10px;
  background: transparent; color: var(--text);
  font-weight: 600; letter-spacing: .04em;
  cursor: pointer;
}
.cmdk-item:hover, .cmdk-item.active {
  background: rgba(255,201,74,.12);
  color: var(--gold-hi);
}
.cmdk-item kbd {
  font-family: var(--font-mono); font-size: var(--fs-micro);
  color: var(--mute); border: 1px solid var(--line); padding: 2px 6px; border-radius: 4px;
}
.cmdk-hint {
  padding: 8px 14px 12px;
  font-family: var(--font-mono); font-size: var(--fs-micro);
  color: var(--mute2); letter-spacing: .06em;
}

/* ── STATUS CHIPS row ─────────────────────────────────────────────────────── */
.status-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 12px;
}
.status-chips button {
  appearance: none;
  border: 1px solid var(--line);
  background: rgba(0,0,0,.3);
  color: var(--mute);
  border-radius: 999px;
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
}
.status-chips button.on {
  color: #120e08;
  background: var(--gold);
  border-color: var(--gold-hi);
  font-weight: 700;
  box-shadow: 0 0 16px rgba(255,201,74,.3);
}

/* ── ACTIVITY FEED ────────────────────────────────────────────────────────── */
#activity {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--mute);
  max-height: 120px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#activity .act {
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(0,0,0,.25);
  border-inline-start: 2px solid var(--line-hi);
  line-height: 1.35;
}
#activity .act b { color: var(--gold); font-weight: 600; }

/* ── SESSION RESUME BAR ───────────────────────────────────────────────────── */
#session-bar {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 90;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(90deg, #1a1428, #0e0c18);
  border: 1px solid var(--line-hi);
  border-radius: 999px;
  box-shadow: 0 16px 48px rgba(0,0,0,.5);
  font-family: var(--font-mono); font-size: var(--fs-2xs);
  color: var(--mute);
}
#session-bar.hide { display: none !important; }
#session-bar b { color: var(--gold-hi); }

/* ── MODALS ───────────────────────────────────────────────────────────────── */
.modal {
  border: 1px solid var(--line-hi) !important;
  box-shadow: 0 40px 100px rgba(0,0,0,.65), 0 0 60px rgba(255,201,74,.06) !important;
  background: linear-gradient(180deg, #161222, #0a0810) !important;
}
.modal-bg { background: rgba(2, 1, 8, .78) !important; backdrop-filter: blur(6px); }

/* ── BOTTOM NAV ───────────────────────────────────────────────────────────── */
#bottomnav {
  background: rgba(6, 4, 14, .97) !important;
  border-top: 1px solid var(--line-hi) !important;
  box-shadow: 0 -12px 40px rgba(0,0,0,.45);
}

/* ── WAR MODE denser contrast (pref) ──────────────────────────────────────── */
body[data-war="1"] {
  --line: rgba(255, 201, 74, .22);
  --line-hi: rgba(255, 210, 120, .5);
}
body[data-war="1"] .panel {
  box-shadow: 0 20px 50px rgba(0,0,0,.5), 0 0 0 1px rgba(255,201,74,.12) !important;
}

@media (max-width: 960px) {
  #app { grid-template-rows: calc(var(--head-h) + 28px) 1fr auto !important; }
  #ticker { font-size: 9px; }
  .call .score { font-size: 26px !important; }
}