/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }

/* ================================================================
   PUNCH THE NUMBERS — Design System v2
   Direction: Fight Night — Dynamic Sports
   ================================================================ */

:root {
  /* Backgrounds */
  --bg:        #080809;
  --bg2:       #0d0d10;
  --bg3:       #111116;
  --bg4:       #18181e;
  --bg5:       #1e1e26;

  /* Borders */
  --border:    rgba(255,255,255,0.06);
  --border2:   rgba(255,255,255,0.11);
  --border3:   rgba(255,255,255,0.18);

  /* Text */
  --text:      #ece9e3;
  --text2:     #7a7875;
  --text3:     rgba(255,255,255,0.20);

  /* Brand */
  --accent:    #e03528;
  --accent2:   #ff5f52;
  --accent-glow: rgba(224,53,40,0.18);

  /* Semantic */
  --green:     #22b876;
  --gold:      #c8a030;
  --amber:     #e0960a;
  --red:       #e03030;
  --blue:      #3a8fe0;
  --purple:    #9060e0;

  /* Typography */
  --font-head: 'Barlow Condensed', sans-serif;
  --font-body: 'Barlow', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Type scale */
  --tx-xs:   10px;
  --tx-sm:   11px;
  --tx-base: 13px;
  --tx-md:   14px;
  --tx-lg:   16px;
  --tx-xl:   20px;
  --tx-2xl:  28px;
  --tx-3xl:  38px;
  --tx-4xl:  52px;

  /* Spacing */
  --sp1: 4px;  --sp2: 8px;  --sp3: 12px;  --sp4: 16px;
  --sp5: 20px; --sp6: 24px; --sp8: 32px;  --sp10: 40px;

  /* Geometry */
  --sidebar-w: 220px;
  --topbar-h:  52px;
  --radius-sm: 4px;
  --radius:    6px;
  --radius-lg: 10px;
  --radius-xl: 16px;

  /* Motion */
  --ease:      0.15s ease;
  --ease-fast: 0.10s ease;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--tx-md);
  line-height: 1.6;
}

/* ── App shell ── */
.app-shell { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

/* ================================================================
   SIDEBAR
   ================================================================ */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--bg2);
  border-right: 1px solid var(--border);
  display: none;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

/* Subtle red accent stripe at top of sidebar */
.sidebar::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent);
}

/* Brand */
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--sp3);
  padding: var(--sp5) var(--sp4);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.brand-logo-img {
  width: 34px; height: 34px;
  object-fit: contain; flex-shrink: 0;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-punch {
  font-family: var(--font-head);
  font-weight: 800; font-size: 17px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent);
}
.brand-numbers {
  font-family: var(--font-head);
  font-weight: 800; font-size: 17px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text);
}

/* Nav */
.sidebar-nav { flex: 1; padding: var(--sp4) var(--sp3); overflow-y: auto; }

.nav-section-label {
  font-family: var(--font-head);
  font-size: var(--tx-xs); font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text3);
  padding: 0 var(--sp2) var(--sp1);
  display: block;
  margin-top: var(--sp5);
}
.sidebar-nav > .nav-section-label:first-child { margin-top: 0; }

.nav-item {
  display: flex; align-items: center; gap: var(--sp2);
  width: 100%;
  padding: 9px var(--sp2);
  border-radius: var(--radius);
  border: none;
  background: none;
  color: var(--text2);
  font-family: var(--font-head);
  font-size: var(--tx-lg); font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  margin-bottom: 1px;
  text-align: left;
  transition: background var(--ease), color var(--ease);
  position: relative;
}
.nav-item:hover { background: rgba(255,255,255,0.04); color: var(--text); }
.nav-item.active {
  background: rgba(224,53,40,0.10);
  color: var(--accent);
}
.nav-item.active::before {
  content: "";
  position: absolute; left: 0; top: 20%; bottom: 20%;
  width: 2px; border-radius: 2px;
  background: var(--accent);
}
.nav-icon {
  width: 16px; height: 16px;
  flex-shrink: 0; opacity: 0.55;
  color: currentColor;
}
.nav-item.active .nav-icon { opacity: 1; }
.nav-item:hover .nav-icon { opacity: 0.9; }

/* Topnav icons — slightly smaller, tighter opacity */
.tnav-item .nav-icon { width: 14px; height: 14px; opacity: 0.45; margin-right: 4px; }
.tnav-item.active .nav-icon { opacity: 0.85; }
.tnav-item:hover .nav-icon { opacity: 0.75; }

.sidebar-footer {
  padding: var(--sp3) var(--sp4);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  font-size: var(--tx-xs);
  color: var(--text3);
  font-family: var(--font-mono);
}

/* ================================================================
   TOP NAVIGATION — desktop
   ================================================================ */
.topnav {
  height: var(--topbar-h);
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 50;
  overflow: hidden;
}

/* Red accent gradient on left edge of bottom border */
.topnav::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--border) 35%, transparent 100%);
  pointer-events: none;
}

/* Brand */
.topnav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px 0 16px;
  border-right: 1px solid var(--border);
  flex-shrink: 0;
}

.topnav-logo { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; }

.topnav-wordmark { display: flex; flex-direction: column; line-height: 1.08; }

.topnav-punch {
  font-family: var(--font-head);
  font-weight: 800; font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent);
}

.topnav-nums {
  font-family: var(--font-head);
  font-weight: 800; font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text);
}

/* Nav items */
.topnav-nav {
  display: flex;
  align-items: stretch;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}
.topnav-nav::-webkit-scrollbar { display: none; }

.tnav-group { display: flex; align-items: stretch; }

.tnav-sep {
  width: 1px;
  background: var(--border);
  flex-shrink: 0;
  margin: 14px 2px;
}

.tnav-item {
  display: flex;
  align-items: center;
  padding: 0 12px;
  border: none;
  background: none;
  color: var(--text2);
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  transition: color var(--ease), background var(--ease);
}

.tnav-item:hover { color: var(--text); background: rgba(255,255,255,0.03); }

.tnav-item.active { color: var(--text); }

.tnav-item.active::after {
  content: "";
  position: absolute;
  bottom: 0; left: 6px; right: 6px; height: 2px;
  background: var(--accent);
  border-radius: 2px 2px 0 0;
}

/* Right: search */
.topnav-right {
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-left: 1px solid var(--border);
  flex-shrink: 0;
}

.topnav-search-wrap {
  position: relative;
  width: 200px;
}

.topnav-search-input {
  width: 100%;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--tx-sm);
  padding: 6px 10px 6px 28px;
  outline: none;
  transition: border-color var(--ease);
}
.topnav-search-input:focus { border-color: var(--accent); }
.topnav-search-input::placeholder { color: var(--text3); }

.topnav-search-icon {
  position: absolute;
  left: 8px; top: 50%;
  transform: translateY(-50%);
  color: var(--text3);
  pointer-events: none;
  width: 13px; height: 13px;
}

/* ================================================================
   MAIN AREA
   ================================================================ */
.main-area {
  flex: 1; display: flex; flex-direction: column;
  overflow: hidden; min-width: 0;
}

/* Topbar — mobile only, hidden on desktop */
.topbar {
  height: var(--topbar-h);
  display: none; align-items: center;
  padding: 0 var(--sp6);
  gap: var(--sp4);
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
  flex-shrink: 0;
}
.topbar-title {
  font-family: var(--font-head);
  font-weight: 700; font-size: var(--tx-xl);
  letter-spacing: 0.04em;
  color: var(--text);
  flex: 1; margin: 0;
}
.topbar-search-wrap {
  position: relative; width: 220px;
}
.topbar-search-input {
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--tx-sm);
  padding: 7px var(--sp3);
  outline: none;
  transition: border-color var(--ease);
  width: 100%;
}
.topbar-search-input:focus { border-color: var(--accent); }
.topbar-search-input::placeholder { color: var(--text3); }

/* Panel area */
.panel-area { flex: 1; overflow: hidden; position: relative; }
.panel {
  display: none; height: 100%;
  overflow-y: auto;
  padding: var(--sp6) var(--sp8);
}
.panel.active { display: block; }

/* Scrollbars */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.14); }

/* ================================================================
   SEARCH RESULTS
   ================================================================ */
.search-results {
  display: none;
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  z-index: 200;
  max-height: 320px;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.search-results.open { display: block; }
.search-result-item {
  padding: var(--sp2) var(--sp3);
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background var(--ease);
}
.search-result-item:hover { background: rgba(255,255,255,0.05); }
.search-result-item:last-child { border-bottom: none; }
.result-name { font-family: var(--font-head); font-size: var(--tx-lg); font-weight: 600; }
.result-meta { font-size: var(--tx-sm); color: var(--text2); }

/* ================================================================
   FIGHTER PROFILE — Fight Night: name as a statement
   ================================================================ */
.profile-header {
  display: flex;
  align-items: flex-start;
  gap: var(--sp4);
  padding: var(--sp5) var(--sp5);
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--sp5);
  position: relative;
  overflow: hidden;
}

/* Subtle red glow emanating top-left */
.profile-header::before {
  content: "";
  position: absolute; top: 0; left: 0;
  width: 200px; height: 100%;
  background: radial-gradient(ellipse at top left,
    rgba(224,53,40,0.08) 0%, transparent 70%);
  pointer-events: none;
}

.profile-avatar {
  width: 52px; height: 52px;
  border-radius: var(--radius);
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head);
  font-weight: 800; font-size: 18px;
  color: #fff; letter-spacing: 0.05em;
  flex-shrink: 0;
}
.profile-name {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: var(--tx-3xl);
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--text);
  margin-bottom: var(--sp1);
}
.profile-meta { font-size: var(--tx-sm); color: var(--text2); margin-bottom: var(--sp2); }
.profile-badges { display: flex; flex-wrap: wrap; gap: 5px; }

/* Momentum badge — top right of header */
.profile-header .momentum-big {
  margin-left: auto;
  flex-shrink: 0;
  text-align: right;
}
.momentum-score {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: var(--tx-3xl);
  line-height: 1;
}
.momentum-denom {
  font-family: var(--font-mono);
  font-size: var(--tx-xs);
  color: var(--text3);
}

/* ================================================================
   STATS GRID
   ================================================================ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp2);
}
@media (max-width: 900px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }

.stat-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-top: 2px solid var(--border2);
  border-radius: var(--radius);
  padding: var(--sp3);
  transition: border-color var(--ease);
}
.stat-card.good { border-top-color: var(--green); }
.stat-card.mid  { border-top-color: var(--amber); }
.stat-card.bad  { border-top-color: var(--red); }

.stat-card-label {
  font-family: var(--font-head);
  font-size: var(--tx-xs); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text3);
  margin-bottom: var(--sp1);
  display: block;
}
.stat-card-value {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--tx-2xl);
  line-height: 1.1;
  color: var(--text);
}
.stat-card.good .stat-card-value { color: var(--green); }
.stat-card.mid  .stat-card-value { color: var(--gold); }
.stat-card.bad  .stat-card-value { color: var(--red); }

/* ================================================================
   LAYOUT PRIMITIVES
   ================================================================ */
.section { margin-bottom: var(--sp5); }
.section:last-child { margin-bottom: 0; }

.section-label {
  font-family: var(--font-head);
  font-size: var(--tx-xs); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text3);
  margin-bottom: var(--sp2);
  display: block;
}

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp4); }

.info-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp4);
}
.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp1) 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--tx-sm);
}
.info-row:last-child { border-bottom: none; }
.info-key { color: var(--text2); }
.info-val { font-family: var(--font-mono); font-size: var(--tx-xs); color: var(--text); }

/* ================================================================
   TAGS
   ================================================================ */
.tags-wrap { display: flex; flex-wrap: wrap; gap: 5px; }
.tag {
  font-family: var(--font-mono);
  font-size: var(--tx-xs);
  padding: 3px var(--sp2);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.04);
  color: var(--text2);
  border: 1px solid var(--border);
  white-space: nowrap;
  transition: background var(--ease), color var(--ease);
  cursor: help;
  position: relative;
}
.tag.t-accent { background: rgba(224,53,40,0.08); color: var(--accent2); border-color: rgba(224,53,40,0.18); }
.tag.t-gold   { background: rgba(200,160,48,0.08); color: var(--gold);   border-color: rgba(200,160,48,0.18); }
.tag.t-green  { background: rgba(34,184,118,0.08); color: var(--green);  border-color: rgba(34,184,118,0.18); }
.tag.t-red    { background: rgba(224,48,40,0.08);  color: var(--red);    border-color: rgba(224,48,40,0.18); }

/* Tag tooltip */
.tag[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px); left: 50%;
  transform: translateX(-50%);
  background: var(--bg5);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  padding: 6px 10px;
  font-size: var(--tx-xs);
  font-family: var(--font-mono);
  color: var(--text);
  white-space: normal;
  z-index: 300;
  pointer-events: none;
  max-width: 280px;
  line-height: 1.5;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.tag[data-tip]:hover::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 1px); left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--border2);
  z-index: 301;
  pointer-events: none;
}

/* ================================================================
   FIGHT HISTORY TABLE
   ================================================================ */
.fight-history-table { width: 100%; border-collapse: collapse; font-size: var(--tx-sm); }
.fight-history-table th {
  font-family: var(--font-head);
  font-size: var(--tx-xs); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text3);
  padding: var(--sp2) var(--sp2);
  text-align: left;
  border-bottom: 1px solid var(--border2);
}
.fight-history-table td { padding: var(--sp2); border-bottom: 1px solid var(--border); color: var(--text2); }
.fight-history-table tr:hover td { background: rgba(255,255,255,0.02); }
.fh-result { font-family: var(--font-head); font-weight: 700; font-size: var(--tx-md); }
.fh-result.win  { color: var(--green); }
.fh-result.loss { color: var(--red); }
.fh-result.draw { color: var(--amber); }
.fh-opponent { color: var(--text); font-weight: 500; }
.fh-method { font-family: var(--font-mono); font-size: var(--tx-xs); }
.fh-date, .fh-round { color: var(--text3); font-size: var(--tx-xs); }

/* ================================================================
   CHART CARDS
   ================================================================ */
.chart-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp4);
}
.chart-wrap { position: relative; height: 260px; }
.chart-legend { display: flex; gap: var(--sp4); flex-wrap: wrap; margin-top: var(--sp3); }
.chart-legend-item { display: flex; align-items: center; gap: 6px; font-size: var(--tx-sm); color: var(--text2); }
.chart-legend-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }

/* ================================================================
   MATCHUP
   ================================================================ */
.matchup-selectors {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: var(--sp3); align-items: center; margin-bottom: var(--sp5);
}
.vs-badge {
  font-family: var(--font-head); font-weight: 800;
  font-size: var(--tx-2xl); color: var(--text3);
  text-align: center; letter-spacing: 0.06em;
}
.matchup-search {
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--tx-sm);
  padding: var(--sp2) var(--sp3);
  outline: none;
  width: 100%;
  transition: border-color var(--ease);
}
.matchup-search:focus { border-color: var(--accent); }
.matchup-selector { position: relative; }
.selected-fighter {
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  padding: var(--sp2) var(--sp3);
  font-size: var(--tx-sm); color: var(--green);
  display: flex; align-items: center; justify-content: space-between;
}

/* Matchup fighter cards */
.matchup-cards {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--sp4); margin-bottom: var(--sp4);
}
.matchup-fighter-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp4);
}
.matchup-fighter-name {
  font-family: var(--font-head);
  font-weight: 800; font-size: var(--tx-2xl);
  letter-spacing: 0.02em;
  margin-bottom: var(--sp1);
}
.matchup-fighter-meta { font-size: var(--tx-sm); color: var(--text2); margin-bottom: var(--sp3); }

/* Advantage rows */
.adv-row {
  display: grid;
  grid-template-columns: 1fr 120px 1fr;
  gap: var(--sp2); align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--tx-sm);
}
.adv-row:last-child { border-bottom: none; }
.adv-val1 { text-align: right; font-family: var(--font-mono); font-size: var(--tx-sm); color: var(--text2); }
.adv-val2 { text-align: left;  font-family: var(--font-mono); font-size: var(--tx-sm); color: var(--text2); }
.adv-label-center { text-align: center; font-size: var(--tx-xs); color: var(--text3); }
.adv-val1.winner { color: var(--green); font-weight: 700; }
.adv-val2.winner { color: var(--gold);  font-weight: 700; }
.matchup-result { margin-top: var(--sp4); }

/* Heat maps in matchup */
.matchup-heatmap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp6); }
.matchup-hm-name {
  font-family: var(--font-head);
  font-weight: 700; font-size: var(--tx-md);
  letter-spacing: 0.03em; text-align: center;
  margin-bottom: var(--sp2);
}

/* ================================================================
   CARD ANALYSIS — Fight Night centrepiece
   ================================================================ */
.card-event-header {
  margin-bottom: var(--sp5);
  padding-bottom: var(--sp4);
  border-bottom: 1px solid var(--border);
}
.card-event-title {
  font-family: var(--font-head);
  font-weight: 800; font-size: var(--tx-3xl);
  letter-spacing: 0.03em; line-height: 1;
  color: var(--text);
  margin-bottom: var(--sp1);
}
.card-event-meta { font-size: var(--tx-sm); color: var(--text2); }

/* Fight block */
.fight-block {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--sp3);
  overflow: hidden;
  transition: border-color var(--ease);
}
.fight-block:hover { border-color: var(--border2); }

/* Main event styling */
.fight-block.main-event {
  border-color: rgba(224,53,40,0.25);
}
.fight-block.main-event .fight-block-header {
  background: linear-gradient(135deg,
    rgba(224,53,40,0.08) 0%, transparent 60%);
}

.fight-block-header {
  display: flex; align-items: center;
  padding: var(--sp3) var(--sp4);
  cursor: pointer;
  transition: background var(--ease);
  user-select: none;
}
.fight-block-header:hover { background: rgba(255,255,255,0.02); }

.fight-block-label {
  font-family: var(--font-head);
  font-size: var(--tx-xs); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent);
  width: 80px; flex-shrink: 0;
}
.fight-block.prelim .fight-block-label { color: var(--text3); }

.fight-block-names {
  flex: 1;
  font-family: var(--font-head);
  font-weight: 700; font-size: var(--tx-xl);
  letter-spacing: 0.02em;
  color: var(--text);
}
.fight-block.main-event .fight-block-names {
  font-size: var(--tx-2xl);
}
.fight-block-meta { font-size: var(--tx-xs); color: var(--text3); margin-left: var(--sp3); }
.fight-block-chevron {
  width: 16px; height: 16px;
  color: var(--text3); flex-shrink: 0; margin-left: var(--sp3);
  transition: transform var(--ease);
}
.fight-block.open .fight-block-chevron { transform: rotate(180deg); }

/* Fight block body */
.fight-block-body { display: none; padding: var(--sp4); border-top: 1px solid var(--border); }
.fight-block.open .fight-block-body { display: block; }

/* Fighters grid inside open block */
.fight-fighters-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp4); margin-bottom: var(--sp4); }
.fight-fighter-summary { background: var(--bg4); border-radius: var(--radius); padding: var(--sp3); }

.ffs-name {
  font-family: var(--font-head);
  font-weight: 700; font-size: var(--tx-xl);
  letter-spacing: 0.02em; margin-bottom: 2px;
}
.ffs-meta { font-size: var(--tx-xs); color: var(--text2); margin-bottom: var(--sp2); }
.ffs-momentum {
  font-family: var(--font-mono); font-size: var(--tx-xs);
  color: var(--text2); margin-bottom: var(--sp2);
}
.ffs-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.ffs-tag {
  font-family: var(--font-mono); font-size: 9px;
  padding: 2px 5px; border-radius: 3px;
  background: rgba(255,255,255,0.04);
  color: var(--text3); border: 1px solid var(--border);
}

/* ── Card analysis fighter pair header ── */
.card-fp {
  display: grid;
  grid-template-columns: 1fr 52px 1fr;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 18px;
  overflow: hidden;
}

.card-fp-side {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 16px 18px;
  border-left: 3px solid var(--fi-a);
}

.card-fp-side.fp-b {
  text-align: right;
  align-items: flex-end;
  border-left: none;
  border-right: 3px solid var(--fi-b);
}

.card-fp-vs {
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
}

.card-fp-vs-mark {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--fg-mute);
}

.card-fp-name {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.1;
}

.card-fp-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.card-fp-mom {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text2);
}

.card-fp-traits {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 3px;
}

.card-fp-side.fp-b .card-fp-traits { justify-content: flex-end; }

/* Stat comparison rows */
.fight-stat-row {
  display: grid; grid-template-columns: 1fr 140px 1fr;
  gap: var(--sp2); align-items: center;
  padding: 5px 0; border-bottom: 1px solid var(--border);
  font-size: var(--tx-sm);
}
.fight-stat-row:last-child { border-bottom: none; }
.fight-stat-row.with-ratings {
  grid-template-columns: auto 1fr 140px 1fr auto;
  gap: var(--sp2);
}
.fight-stat-val1 { text-align: right; font-family: var(--font-mono); font-size: var(--tx-sm); color: var(--text2); }
.fight-stat-val2 { text-align: left;  font-family: var(--font-mono); font-size: var(--tx-sm); color: var(--text2); }
.fight-stat-label { text-align: center; font-size: var(--tx-xs); color: var(--text3); }
.fight-stat-label-center { text-align: center; }
.fight-stat-val1.w { color: var(--green); font-weight: 700; }
.fight-stat-val2.w { color: var(--gold);  font-weight: 700; }

/* Edge call */
.edge-call {
  background: rgba(224,53,40,0.06);
  border: 1px solid rgba(224,53,40,0.20);
  border-radius: var(--radius-lg);
  padding: var(--sp3) var(--sp4);
  margin-bottom: var(--sp4);
}
.edge-call p { font-size: var(--tx-sm); color: var(--text2); line-height: 1.6; }
.edge-call p:first-child { font-family: var(--font-head); font-weight: 700; font-size: var(--tx-lg); color: var(--accent); letter-spacing: 0.03em; }

/* Fight narrative */
.fight-narrative p { font-size: var(--tx-sm); color: var(--text2); margin-bottom: var(--sp2); line-height: 1.65; }
.fight-narrative p:first-child { color: var(--text); }

/* Batch matchup section within matchup panel */
.batch-section {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}

.batch-section-head {
  margin-bottom: 18px;
}

.batch-section-title {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 4px;
}

.batch-section-sub {
  font-size: 12px;
  color: var(--text2);
  line-height: 1.5;
}

/* Card controls (Create a Matchup) */
.card-controls { max-width: 560px; }
.divider-or {
  text-align: center; position: relative;
  margin: var(--sp3) 0; color: var(--text3); font-size: var(--tx-xs);
}
.divider-or::before, .divider-or::after {
  content: ""; position: absolute;
  top: 50%; width: 42%; height: 1px;
  background: var(--border);
}
.divider-or::before { left: 0; }
.divider-or::after  { right: 0; }

/* ================================================================
   FORM ELEMENTS
   ================================================================ */
.field-input, .matchup-search, .topbar-search-input {
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--tx-base);
  padding: var(--sp2) var(--sp3);
  outline: none;
  transition: border-color var(--ease);
  width: 100%;
}
.field-input:focus { border-color: var(--accent); }
.field-input::placeholder { color: var(--text3); }

.field-select {
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--tx-base);
  padding: var(--sp2) var(--sp3);
  outline: none;
  cursor: pointer;
  transition: border-color var(--ease);
}
.field-select:focus { border-color: var(--accent); }

.field-textarea {
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--tx-base);
  padding: var(--sp2) var(--sp3);
  outline: none;
  resize: vertical;
  width: 100%;
  transition: border-color var(--ease);
}
.field-textarea:focus { border-color: var(--accent); }

.field-label, .selector-label, .form-label {
  display: block;
  font-family: var(--font-head);
  font-size: var(--tx-xs); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text3); margin-bottom: var(--sp1);
}
.form-row { margin-bottom: var(--sp3); }

.primary-btn {
  background: var(--accent);
  color: #fff; border: none;
  border-radius: var(--radius);
  font-family: var(--font-head);
  font-weight: 700; font-size: var(--tx-base);
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 9px var(--sp5);
  cursor: pointer;
  transition: background var(--ease), transform var(--ease-fast), box-shadow var(--ease);
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(224,53,40,0.28);
}
.primary-btn:hover  { background: var(--accent2); box-shadow: 0 4px 16px rgba(224,53,40,0.38); }
.primary-btn:active { transform: scale(0.97); }

.checkbox-label {
  display: flex; align-items: center; gap: var(--sp2);
  font-size: var(--tx-sm); color: var(--text2);
  cursor: pointer; white-space: nowrap;
}

/* ================================================================
   LOADING / EMPTY STATES
   ================================================================ */
.loading-state { padding: 3rem 0; text-align: center; }
.loading-pulse {
  font-family: var(--font-mono); font-size: var(--tx-base);
  color: var(--text3);
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }
.hidden { display: none !important; }

.empty-state { text-align: center; padding: 4rem 2rem; }
.empty-icon  { margin-bottom: var(--sp4); }
.empty-title { font-family: var(--font-head); font-weight: 700; font-size: var(--tx-xl); margin-bottom: var(--sp2); }
.empty-sub   { font-size: var(--tx-sm); color: var(--text2); }
.no-fights   { font-size: var(--tx-sm); color: var(--text3); font-family: var(--font-mono); padding: var(--sp4) 0; }

/* ================================================================
   ROSTER / DATA TABLES
   ================================================================ */
.roster-filter-bar {
  display: flex; gap: var(--sp2); align-items: center;
  flex-wrap: wrap; margin-bottom: var(--sp4);
}
.roster-count { font-family: var(--font-mono); font-size: var(--tx-xs); color: var(--text3); }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
  font-family: var(--font-head);
  font-size: var(--tx-xs); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text3); padding: var(--sp2) var(--sp3);
  text-align: left; border-bottom: 1px solid var(--border2);
  white-space: nowrap;
}
.data-table td {
  padding: var(--sp2) var(--sp3);
  border-bottom: 1px solid var(--border);
  font-size: var(--tx-sm); color: var(--text2);
}
.data-table tr:hover td { background: rgba(255,255,255,0.02); }
.dt-name { color: var(--text); font-weight: 500; }
.dt-arc  { font-family: var(--font-mono); font-size: var(--tx-xs); }
.dt-division { font-size: var(--tx-xs); color: var(--text3); }
.dt-record   { font-family: var(--font-mono); font-size: var(--tx-xs); }
.dt-score    { font-family: var(--font-mono); font-size: var(--tx-sm); font-weight: 600; }
.dt-tags  { display: flex; flex-wrap: wrap; gap: 3px; }
.dt-tag   {
  font-family: var(--font-mono); font-size: 9px;
  padding: 1px 5px; border-radius: 3px;
  background: rgba(255,255,255,0.04);
  color: var(--text3); border: 1px solid var(--border);
}

/* Arc pills */
.arc-pill {
  font-family: var(--font-mono); font-size: var(--tx-xs);
  padding: 2px 7px; border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.05);
  color: var(--text2); border: 1px solid var(--border);
}
.badge-arc  { color: var(--accent2); border-color: rgba(224,53,40,0.2); background: rgba(224,53,40,0.06); }
.badge-arc2 { color: var(--gold);   border-color: rgba(200,160,48,0.2); background: rgba(200,160,48,0.06); }

/* Momentum badges */
.badge-mom-high { color: var(--green); border-color: rgba(34,184,118,0.2); background: rgba(34,184,118,0.06); }
.badge-mom-mid  { color: var(--amber); border-color: rgba(224,150,10,0.2); background: rgba(224,150,10,0.06); }
.badge-mom-low  { color: var(--red);   border-color: rgba(224,48,40,0.2);  background: rgba(224,48,40,0.06); }

/* ================================================================
   MOMENTUM BROWSE
   ================================================================ */
.momentum-filter-bar { display: flex; gap: var(--sp3); flex-wrap: wrap; margin-bottom: var(--sp4); align-items: center; }
.momentum-meta { font-size: var(--tx-sm); color: var(--text2); }

.mom-scatter-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px 20px 14px;
  margin-bottom: 20px;
  position: relative;
}

.mom-scatter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.mom-scatter-title {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text2);
}

.mom-scatter-legend {
  display: flex;
  gap: 14px;
}

.mom-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-family: var(--font-mono);
  color: var(--text2);
}

.mom-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.mom-scatter-wrap {
  position: relative;
  height: 340px;
}

.mom-scatter-wrap canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
}

/* Quadrant labels — positioned in each corner of the chart area */
.mom-scatter-quadrants {
  position: absolute;
  /* Approximate chart area inset (accounts for axis labels) */
  top: 52px; bottom: 46px; left: 66px; right: 20px;
  pointer-events: none;
}

.mom-q {
  position: absolute;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text3);
  opacity: 0.7;
}

.mom-q.top-left  { top: 6px; left: 6px; }
.mom-q.top-right { top: 6px; right: 6px; }
.mom-q.bot-left  { bottom: 6px; left: 6px; }
.mom-q.bot-right { bottom: 6px; right: 6px; }

.mom-table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.mom-section-label {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text2);
}

/* ================================================================
   STYLE MATCHUP
   ================================================================ */
.style-matchup-layout { display: grid; grid-template-columns: 200px 1fr; gap: var(--sp4); }
.style-filter-col { display: flex; flex-direction: column; gap: var(--sp3); }
.style-fighter-col { }
.mode-toggle { display: flex; gap: 4px; background: var(--bg4); border-radius: var(--radius); padding: 3px; }
.mode-btn {
  flex: 1; padding: 5px var(--sp2);
  border: none; background: none;
  border-radius: var(--radius-sm);
  color: var(--text2); font-family: var(--font-head);
  font-size: var(--tx-sm); font-weight: 600;
  cursor: pointer; transition: background var(--ease), color var(--ease);
}
.mode-btn.selected { background: var(--accent); color: #fff; }

/* ── Matchup tab redesign ── */
.mu-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
  gap: 0;
}

.mu-tab {
  background: none;
  border: none;
  color: var(--text3);
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 10px 20px;
  cursor: pointer;
  position: relative;
  transition: color var(--ease);
  white-space: nowrap;
}

.mu-tab:hover { color: var(--text2); }

.mu-tab.active { color: var(--text); }

.mu-tab.active::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
  border-radius: 2px 2px 0 0;
}

/* Fighter picker grid */
.mu-picker {
  display: grid;
  grid-template-columns: 1fr 64px 1fr;
  gap: 0;
  margin-bottom: 28px;
  align-items: stretch;
  min-height: 180px;
}

.mu-slot {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mu-slot-a { border-top: 3px solid var(--fi-a); }
.mu-slot-b { border-top: 3px solid var(--fi-b); }

.mu-slot-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text3);
}

/* Search within slot */
.mu-search-wrap { position: relative; }

.mu-search {
  width: 100%;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  padding: 10px 14px 10px 36px;
  outline: none;
  transition: border-color var(--ease);
  box-sizing: border-box;
}

.mu-search:focus { border-color: var(--accent); }

.mu-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text3);
  font-size: 16px;
  pointer-events: none;
  line-height: 1;
}

/* VS column */
.mu-vs-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 0;
}

.mu-vs-line {
  flex: 1;
  width: 1px;
  background: var(--border);
  min-height: 16px;
}

.mu-vs-text {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 20px;
  color: var(--accent);
  letter-spacing: 0.12em;
}

/* Selected fighter mini-card */
.mu-selected {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 2px;
}

.mu-selected-photo {
  width: 40px;
  height: 52px;
  object-fit: cover;
  object-position: top center;
  border-radius: 4px;
  flex-shrink: 0;
}

.mu-selected-info { flex: 1; min-width: 0; }

.mu-selected-name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 16px;
  color: var(--text);
  line-height: 1.1;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mu-selected-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text2);
  margin-bottom: 2px;
}

.mu-selected-arc {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--accent);
  text-transform: capitalize;
}

/* Style filters inside slot */
.mu-style-filters {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Batch card */
.mu-batch-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px 28px;
  max-width: 640px;
}

.mu-batch-head { margin-bottom: 20px; }

.mu-batch-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 18px;
  color: var(--text);
  margin-bottom: 6px;
}

.mu-batch-sub {
  font-size: 13px;
  color: var(--text2);
  line-height: 1.5;
}
.style-summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp3); margin-bottom: var(--sp4); }
.summary-card {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--sp3);
  text-align: center;
}
.summary-label { font-size: var(--tx-xs); color: var(--text3); margin-bottom: var(--sp1); font-family: var(--font-head); letter-spacing: 0.08em; text-transform: uppercase; }
.summary-value { font-family: var(--font-head); font-weight: 700; font-size: var(--tx-2xl); color: var(--text); }

/* ================================================================
   PREDICTIONS
   ================================================================ */
.pred-card {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 10px 14px; min-width: 100px;
}
.pred-card-label { font-size: var(--tx-xs); color: var(--text3); font-family: var(--font-mono); margin-bottom: 4px; }
.pred-card-value { font-family: var(--font-head); font-weight: 700; font-size: 26px; letter-spacing: 0.02em; }
.pred-entry {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: var(--radius); padding: var(--sp3) 14px;
  margin-bottom: var(--sp2);
  display: grid; grid-template-columns: 1fr auto;
  gap: 10px; align-items: start;
}
.pred-entry.correct { border-left: 3px solid var(--green); }
.pred-entry.wrong   { border-left: 3px solid var(--red); }
.pred-entry.pending { border-left: 3px solid var(--amber); }
.pred-fight { font-family: var(--font-head); font-weight: 700; font-size: var(--tx-lg); letter-spacing: 0.02em; margin-bottom: 2px; }
.pred-event { font-size: var(--tx-xs); color: var(--text2); margin-bottom: 5px; }
.pred-meta  { display: flex; gap: var(--sp2); flex-wrap: wrap; align-items: center; }
.pred-badge { font-family: var(--font-mono); font-size: var(--tx-xs); padding: 2px 7px; border-radius: 3px; border: 1px solid; }
.pred-badge-edge { background: rgba(224,53,40,0.08); color: var(--accent2); border-color: rgba(224,53,40,0.18); }
.pred-badge-conf { background: rgba(255,255,255,0.04); color: var(--text2); border-color: var(--border); }
.pred-badge-win  { background: rgba(34,184,118,0.10); color: var(--green); border-color: rgba(34,184,118,0.20); }
.pred-badge-loss { background: rgba(224,48,40,0.10); color: var(--red); border-color: rgba(224,48,40,0.20); }
.pred-badge-pend { background: rgba(224,150,10,0.10); color: var(--amber); border-color: rgba(224,150,10,0.20); }
.pred-badge-tier { background: rgba(144,96,224,0.08); color: var(--purple); border-color: rgba(144,96,224,0.18); }
.pred-actions { display: flex; gap: 6px; flex-shrink: 0; }
.pred-btn {
  font-family: var(--font-head); font-weight: 600;
  font-size: var(--tx-xs); letter-spacing: 0.06em; text-transform: uppercase;
  background: none; border: 1px solid var(--border2);
  border-radius: var(--radius-sm); color: var(--text2);
  padding: 4px 9px; cursor: pointer;
  transition: background var(--ease), color var(--ease);
}
.pred-btn:hover  { background: var(--bg4); color: var(--text); }
.pred-btn.primary { border-color: var(--accent); color: var(--accent); }
.pred-btn.primary:hover { background: rgba(224,53,40,0.10); }
.pred-btn.danger  { border-color: rgba(224,48,40,0.3); color: var(--red); }
.pred-btn.danger:hover  { background: rgba(224,48,40,0.08); }

/* ================================================================
   MODALS
   ================================================================ */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 500;
  display: flex; align-items: center; justify-content: center;
}
.modal {
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: var(--radius-xl);
  padding: var(--sp6);
  width: 480px; max-width: 95vw;
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 16px 48px rgba(0,0,0,0.7);
}
.modal-title {
  font-family: var(--font-head);
  font-weight: 700; font-size: 18px;
  letter-spacing: 0.03em;
  margin-bottom: var(--sp4);
}
.modal-actions { display: flex; gap: var(--sp2); margin-top: var(--sp5); justify-content: flex-end; }
.tier-selector { display: flex; gap: 4px; flex-wrap: wrap; }
.tier-btn {
  font-family: var(--font-mono); font-size: var(--tx-xs);
  padding: 5px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--border2);
  background: none; color: var(--text2);
  cursor: pointer; transition: all var(--ease);
}
.tier-btn:hover { background: var(--bg3); }
.tier-btn.selected { border-color: var(--accent); color: var(--accent); background: rgba(224,53,40,0.08); }
.conf-display { font-family: var(--font-mono); font-size: 22px; font-weight: 500; color: var(--accent); text-align: center; margin: 4px 0; }

/* ================================================================
   BACKTEST
   ================================================================ */
.bt-bar-row {
  display: grid; grid-template-columns: 160px 1fr 60px 50px;
  gap: var(--sp2); align-items: center;
  padding: 5px 0; border-bottom: 1px solid var(--border); font-size: var(--tx-sm);
}
.bt-bar-row:last-child { border-bottom: none; }
.bt-label { font-family: var(--font-mono); font-size: var(--tx-xs); color: var(--text2); }
.bt-bar-track { height: 8px; background: var(--bg4); border-radius: 4px; overflow: hidden; position: relative; }
.bt-bar-fill  { height: 100%; border-radius: 4px; transition: width 0.3s ease; }
.bt-midline   { position: absolute; left: 50%; top: 0; width: 1px; height: 100%; background: rgba(255,255,255,0.12); }
.bt-rate { font-family: var(--font-mono); font-size: var(--tx-sm); font-weight: 600; }
.bt-n    { font-family: var(--font-mono); font-size: var(--tx-xs); color: var(--text3); }

/* ================================================================
   MODEL HEALTH
   ================================================================ */
.mh-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: var(--sp4); }
@media (max-width:800px) { .mh-grid { grid-template-columns: repeat(2,1fr); } }
.mh-card { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp3) 14px; }
.mh-card-label { font-size: var(--tx-xs); color: var(--text3); font-family: var(--font-mono); margin-bottom: 6px; }
.mh-pct { font-family: var(--font-head); font-weight: 700; font-size: 28px; letter-spacing: 0.02em; }
.mh-sub { font-size: var(--tx-xs); color: var(--text2); margin-top: 2px; }
.mh-progress-wrap { height: 6px; background: var(--bg4); border-radius: 3px; overflow: hidden; margin-top: 6px; }
.mh-progress-fill { height: 100%; border-radius: 3px; }

/* ================================================================
   STRIKE HEAT MAP
   ================================================================ */
.heatmap-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hm-pos-bars { width: 100px; }
.hm-pos-row  { display: flex; align-items: center; gap: 5px; margin-bottom: 4px; font-size: var(--tx-xs); }
.hm-pos-label { color: var(--text2); width: 48px; flex-shrink: 0; font-size: var(--tx-xs); }
.hm-pos-track { flex: 1; height: 4px; background: var(--bg4); border-radius: 3px; overflow: hidden; }
.hm-pos-fill  { height: 100%; border-radius: 3px; }
.hm-pos-pct   { font-family: var(--font-mono); font-size: var(--tx-xs); color: var(--text3); width: 26px; text-align: right; }
.matchup-heatmap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp6); }
.matchup-hm-name { font-family: var(--font-head); font-weight: 700; font-size: var(--tx-sm); letter-spacing: 0.03em; text-align: center; margin-bottom: 10px; }
.hm-section-label { font-size: var(--tx-xs); color: var(--text3); font-family: var(--font-head); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 5px; text-align: left; }
.hm-no-data { font-size: var(--tx-xs); color: var(--text3); font-family: var(--font-mono); text-align: center; padding: var(--sp4) 0; }
.thermal-legend { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: var(--sp2); }
.thermal-legend-label { font-size: 9px; color: var(--text3); font-family: var(--font-mono); }

/* ================================================================
   TAG TOOLTIPS & GLOSSARY
   ================================================================ */
.glossary-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp2); }
.glossary-entry {
  background: var(--bg3); border: 1px solid var(--border);
  border-left: 3px solid transparent;
  border-radius: var(--radius); padding: 10px var(--sp3);
  transition: border-color var(--ease), background var(--ease);
}
.glossary-entry:hover { background: var(--bg4); }
.glossary-tag-name { font-size: var(--tx-xs); font-family: var(--font-mono); margin-bottom: 4px; display: flex; align-items: center; }
.glossary-definition { font-size: var(--tx-sm); color: var(--text2); line-height: 1.5; }
.glossary-section-head {
  grid-column: 1 / -1;
  font-family: var(--font-head); font-size: var(--tx-xs); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  border-left: 3px solid transparent; padding-left: 10px;
  color: var(--text3); margin: 14px 0 6px;
  grid-column: 1 / -1; padding-bottom: 5px;
  border-bottom: 1px solid var(--border);
}

/* ================================================================
   DIVISIONAL RATING BADGES
   ================================================================ */
.div-rating {
  display: inline-block;
  font-family: var(--font-head); font-weight: 700;
  font-size: var(--tx-xs); letter-spacing: 0.08em;
  padding: 2px 6px; border-radius: var(--radius-sm);
  border: 1px solid; white-space: nowrap; flex-shrink: 0;
}
.div-rating-POOR     { color: var(--red);   border-color: rgba(224,48,40,0.3);  background: rgba(224,48,40,0.08); }
.div-rating-BELOW-AVG{ color: #e88030;      border-color: rgba(232,128,48,0.3); background: rgba(232,128,48,0.08); }
.div-rating-AVERAGE  { color: var(--text2); border-color: var(--border);        background: var(--bg3); }
.div-rating-GOOD     { color: var(--green); border-color: rgba(34,184,118,0.3); background: rgba(34,184,118,0.08); }
.div-rating-ELITE    { color: var(--purple);border-color: rgba(144,96,224,0.3); background: rgba(144,96,224,0.08); }

/* ================================================================
   FIGHT HISTORY
   ================================================================ */
.fh-result { font-family: var(--font-head); font-weight: 700; }
.fh-result.win  { color: var(--green); }
.fh-result.loss { color: var(--red); }
.fh-result.draw { color: var(--amber); }
.fh-opponent { color: var(--text); font-weight: 500; font-size: var(--tx-sm); }
.fh-method, .fh-date, .fh-round { font-family: var(--font-mono); font-size: var(--tx-xs); }
.w { color: var(--green) !important; font-weight: 700; }
.winner { font-weight: 700; }
.good { border-top-color: var(--green) !important; }
.bad  { border-top-color: var(--red) !important; }
.mid  { border-top-color: var(--amber) !important; }
.correct { border-left: 3px solid var(--green); }
.wrong   { border-left: 3px solid var(--red); }
.pending { border-left: 3px solid var(--amber); }

/* ================================================================
   STYLE FIGHTS TABLE
   ================================================================ */
.style-fights-table { width: 100%; border-collapse: collapse; font-size: var(--tx-xs); font-family: var(--font-mono); }
.style-fights-table th { color: var(--text3); padding: 4px var(--sp2); text-align: left; border-bottom: 1px solid var(--border); }
.style-fights-table td { padding: 4px var(--sp2); border-bottom: 1px solid var(--border); color: var(--text2); }

/* ================================================================
   HAMBURGER / MOBILE OVERLAY
   ================================================================ */
.hamburger-btn {
  display: none; flex-direction: column;
  justify-content: center; gap: 5px;
  width: 36px; height: 36px;
  background: none; border: none; cursor: pointer;
  padding: 6px; flex-shrink: 0;
}
.hamburger-btn span {
  display: block; width: 100%; height: 2px;
  background: var(--text); border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}
.mobile-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.65); z-index: 98; }
.mobile-overlay.active { display: block; }

/* ================================================================
   RESPONSIVE — 768px breakpoint
   ================================================================ */
@media (max-width: 768px) {
  .topnav { display: none; }
  .topbar { display: flex; padding: 0 var(--sp3); gap: var(--sp2); }
  .topbar-title { font-size: var(--tx-lg); }
  .topbar-search-wrap { width: 130px; }
  .hamburger-btn { display: flex; }
  .app-shell { overflow: hidden; }
  .sidebar {
    display: flex;
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 260px; z-index: 99;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
  }
  .sidebar.open { transform: translateX(0); }
  .main-area { width: 100%; min-width: 0; }
  .panel { padding: 12px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .stat-card-value { font-size: var(--tx-xl); }
  .profile-header { flex-wrap: wrap; }
  .profile-name { font-size: var(--tx-2xl); }
  .two-col { grid-template-columns: 1fr; }
  .matchup-selectors { grid-template-columns: 1fr; gap: var(--sp2); }
  .fight-fighters-grid { grid-template-columns: 1fr; }
  .matchup-heatmap { grid-template-columns: 1fr 1fr; gap: 10px; }
  .roster-filter-bar { flex-direction: column; align-items: stretch; gap: var(--sp2); }
  .mh-grid { grid-template-columns: repeat(2,1fr); }
  #pred-summary-cards { flex-wrap: wrap; }
  .pred-card { min-width: 80px; flex: 1; }
  .modal { width: calc(100vw - 24px); max-height: 85vh; }
  .bt-bar-row { grid-template-columns: 120px 1fr 50px 42px; }
  .glossary-grid { grid-template-columns: 1fr; }
  .nav-item { padding: 12px var(--sp2); font-size: var(--tx-xl); }
  .card-controls .primary-btn { width: 100%; }
  .matchup-cards { grid-template-columns: 1fr; }
  .style-matchup-layout { grid-template-columns: 1fr; }
  .mu-picker { grid-template-columns: 1fr; }
  .mu-vs-col { flex-direction: row; height: 40px; padding: 0 16px; }
  .mu-vs-line { flex: 1; width: auto; height: 1px; min-height: 0; }
  .mu-batch-card { padding: 18px 16px; }

  /* ── fi-hero compact padding ── */
  .fi-hero { border-radius: 12px; margin-bottom: 16px; }
  .fi-hero-body { padding: 14px 12px 12px; gap: 12px; }
  .fi-section { margin-bottom: 14px; }
  .fi-section-names { display: none; }

  /* ── Gauge: fill available width, keep proportions ── */
  .fi-gauge { width: min(260px, 88vw); height: auto; aspect-ratio: 260 / 128; }
  .fi-gauge-num { font-size: 22px; }

  /* ── Photos: show on mobile, give fighter divs enough height ── */
  .fi-fighter { min-height: 150px; }
  .fi-photo { opacity: 0.45; }

  /* ── Tape: compact cells ── */
  .tape-cell { padding: 8px 6px; }
  .tape-va, .tape-vb { font-size: 12px; }
  .tape-label { font-size: 8px; letter-spacing: 0.08em; }

  /* ── Record strip: tighter ── */
  .fi-rec-cell { padding: 5px 8px; }
  .fi-rec-v { font-size: 14px; }
  .fi-rec-l { font-size: 7px; }

  /* ── Stat rows: narrower center so bars get more room ── */
  .stat-row { grid-template-columns: 1fr 100px 1fr; padding: 8px 10px; gap: 8px; }
  .stat-label { font-size: 9px; letter-spacing: 0.06em; }
  .bar { height: 22px; }
  .bar .val { font-size: 10px; }
  .bar .tier { font-size: 7px; }

  /* ── Traits: 2-col on mobile ── */
  .traits-grid { grid-template-columns: 1fr 1fr; gap: 12px; }

  /* ── Analysis + prediction cards ── */
  .fi-analysis-card { padding: 14px 14px; }
  .fi-pred-card { padding: 0; }
  .fi-pred-body { padding: 14px 14px 10px; }
  .fi-lock-btn { margin: 0 14px 14px; }

  /* ── Style edges: stack to single column ── */
  .se-grid { grid-template-columns: 1fr; }
  .se-divider { display: none; }
  .se-col { padding: 12px 14px; }
  .se-col:first-child { border-bottom: 1px solid var(--border); }

  /* ── Card-fp (old card header): stack fighters ── */
  .card-fp { grid-template-columns: 1fr; }
  .card-fp-vs { display: none; }
  .card-fp-side.fp-b {
    border-left: 3px solid var(--fi-b);
    border-right: none;
    text-align: left;
    align-items: flex-start;
    border-top: 1px solid var(--border);
  }
  .card-fp-side.fp-b .card-fp-traits { justify-content: flex-start; }

  /* ── Section head: tighter ── */
  .fi-section-head { margin-bottom: 8px; padding-bottom: 8px; }
  .fi-section-title { font-size: 9px; }

  /* ── Bottom grid cards: reduce padding ── */
  .fi-beat { gap: 8px; }
  .fi-analysis-head { margin-bottom: 10px; }
}

@media (max-width: 390px) {
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 4px; }
  .stat-card-value { font-size: 18px; }
  .topbar-search-wrap { width: 110px; }
  .matchup-heatmap { grid-template-columns: 1fr; }

  /* ── Extra compact for 375px phones (iPhone SE etc.) ── */
  .panel { padding: 10px; }
  .fi-hero-body { padding: 10px 8px 8px; }
  .fi-hero { border-radius: 8px; margin-bottom: 12px; }
  .fi-tape { grid-template-columns: repeat(2, 1fr); }
  .stat-row { grid-template-columns: 1fr 80px 1fr; padding: 7px 8px; gap: 6px; }
  .stat-label { font-size: 8px; }
  .fi-first { font-size: clamp(18px, 6vw, 28px); }
  .fi-last { font-size: clamp(13px, 4vw, 20px); }
  .fi-rec-cell { padding: 4px 6px; }
  .fi-rec-v { font-size: 12px; }
  .traits-grid { grid-template-columns: 1fr; }
  .se-col { padding: 10px 10px; }
}


/* ================================================================
   DIRECTION 3 — FIGHT NIGHT REDESIGN
   ================================================================ */

/* ── Sidebar footer hidden when collapsed ── */
.sidebar-footer {
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.sidebar:hover .sidebar-footer,
.sidebar.open .sidebar-footer { opacity: 1; }

/* ── Brand text hidden when collapsed ── */
.brand-text {
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.sidebar:hover .brand-text,
.sidebar.open .brand-text { opacity: 1; }

/* ── Fighter profile — headline treatment ── */
.profile-name {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 48px);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--text);
}

.profile-header {
  background: linear-gradient(135deg,
    rgba(224,53,40,0.08) 0%,
    rgba(224,53,40,0.03) 30%,
    transparent 60%
  );
  border-bottom: 1px solid var(--border);
  padding: var(--sp-5) var(--sp-6);
}

.profile-weight-class {
  font-family: var(--font-head);
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--sp-1);
}

/* ── Momentum score — big display ── */
.momentum-score-display {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 52px;
  line-height: 1;
  letter-spacing: -0.01em;
}

/* ── Fight card — main event treatment ── */
.fight-block.is-main .fight-block-header {
  background: linear-gradient(135deg,
    rgba(224,53,40,0.08) 0%,
    transparent 50%
  );
  border-left: 3px solid var(--accent);
}

.fight-block.is-main .fight-block-names {
  font-size: clamp(18px, 2.5vw, 28px);
  letter-spacing: 0.04em;
}

.main-event-badge {
  font-family: var(--font-head);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-dim);
  border: 1px solid rgba(224,53,40,0.25);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  display: inline-block;
  margin-bottom: var(--sp-2);
}

/* ── Stat cards — bigger number treatment ── */
.stat-card-value {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 28px;
  letter-spacing: 0.01em;
  line-height: 1.1;
}
.stat-card-label {
  font-family: var(--font-head);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: var(--sp-1);
}
.stat-card.good .stat-card-value { color: var(--green); }
.stat-card.mid  .stat-card-value { color: var(--amber); }
.stat-card.bad  .stat-card-value { color: var(--red); }

/* Default stat value colour */
.stat-card:not(.good):not(.mid):not(.bad) .stat-card-value {
  color: var(--accent);
}

/* ── Edge call box — bolder treatment ── */
.edge-call {
  background: linear-gradient(135deg,
    rgba(224,53,40,0.12) 0%,
    rgba(224,53,40,0.04) 100%
  );
  border: 1px solid rgba(224,53,40,0.3);
  border-radius: var(--radius-lg);
  padding: var(--sp-4) var(--sp-5);
}

/* ── Section labels — tighter, sharper ── */
.section-label {
  font-family: var(--font-head);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text3);
  display: block;
  margin-bottom: var(--sp-3);
}

/* ── Profile avatar — larger, bolder ── */
.profile-avatar {
  width: 52px;
  height: 52px;
  border-radius: var(--radius);
  background: var(--accent-dim);
  border: 1px solid rgba(224,53,40,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 0.05em;
  color: var(--accent);
  flex-shrink: 0;
}

/* ── Info card refinement ── */
.info-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  transition: border-color var(--ease);
}
.info-card:hover { border-color: var(--border2); }

/* ── Primary button — Fight Night style ── */
.primary-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--text-base);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 9px var(--sp-5);
  cursor: pointer;
  transition: background var(--ease), transform var(--ease-fast), box-shadow var(--ease);
  white-space: nowrap;
  box-shadow: 0 2px 12px rgba(224,53,40,0.35);
}
.primary-btn:hover {
  background: var(--accent2);
  box-shadow: 0 4px 20px rgba(224,53,40,0.45);
  transform: translateY(-1px);
}
.primary-btn:active { transform: scale(0.97) translateY(0); }

/* ── Fight block — cleaner card style ── */
.fight-block {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--sp-3);
  overflow: hidden;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.fight-block:hover { border-color: var(--border2); }
.fight-block.open  { border-color: rgba(224,53,40,0.2); }

.fight-block-header {
  padding: var(--sp-4) var(--sp-5);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  transition: background var(--ease);
}
.fight-block-header:hover { background: rgba(255,255,255,0.02); }

.fight-block-names {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.1;
}

.fight-block-body {
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  border-top: 1px solid var(--border);
}

/* ── Tags — sharper Fight Night style ── */
.tag {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 3px 7px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.04);
  color: var(--text2);
  border: 1px solid var(--border);
  white-space: nowrap;
  transition: background var(--ease), color var(--ease);
  text-transform: lowercase;
}
.tag.t-accent {
  background: rgba(224,53,40,0.08);
  color: var(--accent2);
  border-color: rgba(224,53,40,0.2);
}
.tag.t-gold {
  background: rgba(200,164,74,0.08);
  color: var(--gold);
  border-color: rgba(200,164,74,0.2);
}
.tag.t-green {
  background: rgba(39,194,126,0.08);
  color: var(--green);
  border-color: rgba(39,194,126,0.2);
}
.tag.t-red {
  background: rgba(224,56,56,0.08);
  color: var(--red);
  border-color: rgba(224,56,56,0.2);
}

/* ── Scrollbar — thinner, accent on hover ── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ── Panel ── */
.panel {
  display: none;
  height: 100%;
  overflow-y: auto;
  padding: var(--sp-6) var(--sp-8);
}
.panel.active { display: block; }

/* ── Topbar search ── */
.topbar-search-input {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  padding: 7px 12px;
  outline: none;
  transition: border-color var(--ease);
  width: 100%;
}
.topbar-search-input:focus { border-color: var(--accent); }
.topbar-search-input::placeholder { color: var(--text3); }

/* ── Field inputs ── */
.field-input, .field-select, .matchup-search {
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  padding: 8px 12px;
  outline: none;
  transition: border-color var(--ease);
  width: 100%;
}
.field-input:focus,
.field-select:focus,
.matchup-search:focus { border-color: var(--accent); }

/* ── Roster table ── */
.data-table th {
  font-family: var(--font-head);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text3);
  padding: 8px 12px;
  border-bottom: 1px solid var(--border2);
  text-align: left;
}
.data-table td {
  font-size: var(--text-sm);
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  color: var(--text2);
}
.data-table tbody tr:hover td { background: rgba(255,255,255,0.02); }
.data-table .td-name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--text-base);
  letter-spacing: 0.02em;
  color: var(--text);
}

/* ── Empty/loading states ── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-10) var(--sp-6);
  gap: var(--sp-3);
  text-align: center;
}
.empty-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--text-xl);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text2);
}
.empty-sub {
  font-size: var(--text-sm);
  color: var(--text3);
  max-width: 320px;
  line-height: 1.6;
}

/* ── Checkbox label ── */
.checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  color: var(--text2);
  cursor: pointer;
  user-select: none;
}

/* Hamburger is hidden on desktop (nav is the topnav rail); shown via media query on mobile */



/* ================================================================
   FIGHT INTEL MATCHUP DESIGN — Fight Night Card
   Adopted from styles.css design by the user
   ================================================================ */

/* Fighter color variables for matchup context */
:root {
  --fi-a: #FF4D4D;
  --fi-b: #3FA9FF;
  --fi-a-soft: rgba(255,77,77,0.10);
  --fi-b-soft: rgba(63,169,255,0.10);
  --fi-a-border: rgba(255,77,77,0.25);
  --fi-b-border: rgba(63,169,255,0.25);
  --bg-0: #08090C;
  --bg-1: #0E1015;
  --bg-2: #14171E;
  --bg-3: #1B1F28;
  --fg-dim: #A8ADB8;
  --fg-mute: #6B7080;
  --fg-faint: #43485A;
  --r-card: 12px;
  --r-chip: 999px;
  --font-display: "Space Grotesk", "Barlow Condensed", system-ui, sans-serif;
}

/* ── HERO — 3-column fighter card ── */
.fi-hero {
  background: linear-gradient(180deg, var(--bg-1) 0%, rgba(14,16,21,0.4) 100%);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 28px;
  position: relative;
}

.fi-hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 0% 50%, rgba(255,77,77,0.08), transparent 70%),
    radial-gradient(ellipse 60% 80% at 100% 50%, rgba(63,169,255,0.08), transparent 70%);
  pointer-events: none;
}

.fi-hero-body {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 300px 1fr;
  gap: 0;
  padding: 28px 28px 24px;
  align-items: center;
}

/* ── Fighter sides ── */
.fi-fighter {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}

.fi-photo {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 52%;
  max-width: 250px;
  object-fit: cover;
  object-position: top center;
  pointer-events: none;
  user-select: none;
  opacity: 0.60;
}

.fi-a .fi-photo {
  right: -8px;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 55%);
  mask-image: linear-gradient(to right, transparent 0%, black 55%);
}

.fi-b .fi-photo {
  left: -8px;
  -webkit-mask-image: linear-gradient(to left, transparent 0%, black 55%);
  mask-image: linear-gradient(to left, transparent 0%, black 55%);
}

.fi-b {
  text-align: right;
  align-items: flex-end;
}

.fi-corner {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 10px;
  border-radius: var(--r-chip);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--fi-a-soft);
  border: 1px solid var(--fi-a-border);
  color: var(--fi-a);
}

.fi-corner-b {
  background: var(--fi-b-soft);
  border-color: var(--fi-b-border);
  color: var(--fi-b);
}

.fi-corner-dot {
  width: 7px; height: 7px;
  border-radius: 2px;
  background: var(--fi-a);
  flex-shrink: 0;
}

.fi-corner-dot-b { background: var(--fi-b); }

.fi-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fi-first {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 3vw, 38px);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text);
}

.fi-last {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(16px, 2vw, 26px);
  letter-spacing: -0.01em;
  line-height: 1;
  color: var(--fg-dim);
}

.fi-name-b { align-items: flex-end; }

.fi-name-link { cursor: pointer; transition: opacity var(--ease); }
.fi-name-link:hover { opacity: 0.75; }
.fi-name-link:hover .fi-first,
.fi-name-link:hover .fi-last { color: var(--accent2); }

.fi-tagline {
  font-size: 12px;
  color: var(--fg-mute);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Record strip */
.fi-record-strip {
  display: flex;
  gap: 0;
  font-family: var(--font-mono);
}

.fi-record-strip-b { justify-content: flex-end; }

.fi-rec-cell {
  padding: 7px 12px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.fi-rec-cell:first-child { border-radius: 6px 0 0 6px; }
.fi-rec-cell:last-child  { border-radius: 0 6px 6px 0; border-left: none; }
.fi-rec-cell + .fi-rec-cell { border-left: none; }

.fi-rec-v {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  display: block;
  line-height: 1;
}

.fi-rec-l {
  font-size: 8px;
  color: var(--fg-mute);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.fi-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.fi-tags-b { justify-content: flex-end; }

/* ── VS / Gauge column ── */
.fi-vs-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
}

.fi-vs-mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--fg-mute);
}

.fi-gauge {
  position: relative;
  width: 240px;
  height: 128px;
}

.fi-gauge svg { width: 100%; height: 100%; overflow: visible; }

.fi-gauge-label {
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
  pointer-events: none;
}

.fi-gauge-pre {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--fg-mute);
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.fi-gauge-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.fi-weight-pill {
  padding: 4px 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-radius: var(--r-chip);
  background: var(--bg-2);
  border: 1px solid var(--border-strong, var(--border2));
  color: var(--text);
}

/* ── Tale of the Tape strip ── */
.fi-tape {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-top: 1px solid var(--border);
  background: rgba(0,0,0,0.18);
}

.tape-cell {
  padding: 12px 14px;
  text-align: center;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.tape-cell:last-child { border-right: none; }

.tape-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--fg-mute);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.tape-vals {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
}

.tape-va {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--fi-a);
}

.tape-vb {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--fi-b);
}

.tape-vs {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--fg-faint);
}

/* ── Section wrapper ── */
.fi-section {
  margin-bottom: 24px;
}

.fi-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.fi-section-title {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-mute);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  display: flex;
  align-items: center;
  gap: 10px;
}

.fi-section-title::before {
  content: "";
  width: 16px;
  height: 1px;
  background: var(--border2);
}

.fi-section-names {
  display: flex;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
}

.fi-card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
}

/* ── Dual-bar stat rows ── */
.stat-grid { display: flex; flex-direction: column; }

.stat-row {
  display: grid;
  grid-template-columns: 1fr 180px 1fr;
  align-items: center;
  padding: 12px 20px;
  gap: 16px;
  border-bottom: 1px solid var(--border);
}

.stat-row:last-child { border-bottom: none; }
.stat-row:hover { background: rgba(255,255,255,0.012); }

.stat-row-head {
  padding: 8px 20px;
  background: rgba(0,0,0,0.20);
  border-bottom: 1px solid var(--border);
}

.stat-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
}

.stat-label {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--fg-dim);
  font-weight: 500;
}

/* Dual bar — Fighter A (extends right-to-left) */
.bar {
  position: relative;
  height: 26px;
  background: var(--bg-3);
  border-radius: 4px;
  overflow: hidden;
}

.bar .fill {
  position: absolute;
  top: 0; bottom: 0;
  border-radius: 3px;
}

.bar.a .fill {
  right: 0;
  background: linear-gradient(90deg, transparent, var(--fi-a));
}

.bar.b .fill {
  left: 0;
  background: linear-gradient(90deg, var(--fi-b), transparent);
}

.bar.a { direction: rtl; }

.bar .val {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  z-index: 2;
  color: var(--text);
}

.bar.a .val { right: 8px; }
.bar.b .val { left: 8px; }

.bar .tier {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--fg-mute);
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(0,0,0,0.35);
  z-index: 2;
}

.bar.a .tier { left: 7px; }
.bar.b .tier { right: 7px; }

.tier.elite { color: oklch(0.80 0.14 290); }
.tier.good  { color: var(--green); }
.tier.mid   { color: var(--amber); }
.tier.bad   { color: var(--red); }

.bar.winner .fill { opacity: 1; }
.bar:not(.winner) .fill { opacity: 0.55; }

/* ── Style profile ── */
.profile-grid {
  display: grid;
  grid-template-columns: 1fr 320px 1fr;
  gap: 0;
}

.profile-side {
  padding: 18px;
}

.profile-side.a { border-right: 1px solid var(--border); }
.profile-side.b { border-left: 1px solid var(--border); text-align: right; }

.profile-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
}

.profile-head.b { justify-content: flex-end; }

.profile-head-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.radar-wrap {
  display: grid;
  place-items: center;
  padding: 12px;
}

/* ── Strike panels ── */
.strike-grid {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 0;
}

.strike-divider { background: var(--border); }

.strike-panel { padding: 20px; }

.strike-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.strike-who {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
}

.strike-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Traits / Tags ── */
.traits-card { padding: 20px 24px; }

.traits-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

.traits-col-head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-mute);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.traits-col-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.traits-col-name { color: var(--fg-dim); }

.traits-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── Trait cards ── */
.trait-card {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
}

.trait-glyph {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  background: var(--bg-3);
  border-radius: 5px;
  color: var(--fg-mute);
  font-size: 11px;
  flex-shrink: 0;
}

.trait-text { flex: 1; color: var(--text); }

.trait-impact {
  font-size: 9px;
  color: var(--fg-mute);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  white-space: nowrap;
}

.trait-card.trait-a .trait-glyph { background: rgba(255,77,77,0.12); color: var(--fi-a); }
.trait-card.trait-b .trait-glyph { background: rgba(63,169,255,0.14); color: var(--fi-b); }

/* ── Edge arrows in stat rows ── */
.fi-edge-mark {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fg-mute);
}

.fi-edge-arrow { font-size: 9px; }
.fi-ea { color: var(--fi-a); }
.fi-eb { color: var(--fi-b); }
.fi-edge-even { color: var(--fg-mute); }

/* ── Gauge needle label ── */
.fi-gauge-edge {
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--fg-mute);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  white-space: nowrap;
}

/* ── Analysis + Prediction two-column layout ── */
.fi-bottom-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 20px;
}

.fi-analysis-card { padding: 24px 26px; }

.fi-analysis-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.fi-analysis-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 9px;
}

.fi-ai-mark {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 5px;
  background: linear-gradient(135deg, oklch(0.55 0.18 280), oklch(0.55 0.18 200));
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  color: #0A0A0A;
  letter-spacing: 0.04em;
}

.fi-analysis-body { display: flex; flex-direction: column; gap: 13px; }

.fi-beat {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 12px;
  align-items: start;
}

.fi-beat-marker {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--fg-mute);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  padding-top: 2px;
}

.fi-beat-body {
  color: var(--fg-dim);
  line-height: 1.55;
  font-size: 13px;
}

.fi-beat-body b { color: var(--text); font-weight: 600; }
.fi-beat-a { color: var(--fi-a); font-weight: 500; }
.fi-beat-b { color: var(--fi-b); font-weight: 500; }

/* ── Prediction card ── */
.fi-pred-card {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--bg-1), var(--bg-2));
  position: relative;
  overflow: hidden;
}

.fi-pred-card::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at top right, rgba(63,169,255,0.08), transparent 60%);
  pointer-events: none;
}

.fi-pred-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fg-mute);
  position: relative; z-index: 1;
}

.fi-pred-lock-state { display: flex; align-items: center; gap: 6px; }
.fi-pred-lock-state.locked { color: var(--green); }

.fi-pred-body {
  padding: 22px 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative; z-index: 1;
  flex: 1;
}

.fi-pred-winner { display: flex; align-items: center; gap: 13px; }

.fi-pred-avatar {
  width: 44px; height: 44px;
  background: var(--bg-3);
  border: 2px solid var(--fi-b);
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
}

.fi-pred-meta { flex: 1; }

.fi-pred-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--fg-mute);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 3px;
}

.fi-pred-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.01em;
}

.fi-confidence { display: flex; flex-direction: column; gap: 7px; }

.fi-conf-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--fg-mute);
  text-transform: uppercase;
  letter-spacing: 0.10em;
}

.fi-conf-pct { color: var(--text); font-size: 13px; font-weight: 500; }

.fi-conf-track {
  height: 7px;
  background: var(--bg-3);
  border-radius: 4px;
  overflow: hidden;
}

.fi-conf-fill {
  height: 100%;
  background: linear-gradient(90deg, rgba(63,169,255,0.5), var(--fi-b));
  border-radius: 4px;
}

/* Lock button */
.fi-lock-btn {
  margin: 0 22px 22px;
  padding: 11px 14px;
  background: var(--fi-b);
  color: #0A0A0A;
  border: none;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition: 120ms ease;
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}

.fi-lock-btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
.fi-lock-btn.locked { background: var(--bg-3); color: var(--green); border: 1px solid rgba(34,184,118,0.35); }

.fi-dim { color: var(--fg-mute); font-size: 12px; }

/* ── Statistical edges vs opponent style ── */
.se-desc {
  font-size: 11px;
  color: var(--fg-mute);
  margin: 4px 0 14px;
}

.se-grid {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 0;
  overflow: hidden;
}

.se-divider { background: var(--border); }

.se-col { padding: 16px 20px; }

.se-col-head {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.se-seg { margin-bottom: 14px; }
.se-seg:last-child { margin-bottom: 0; }

.se-seg-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.se-seg-label {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 5px;
}

.se-notable-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.se-seg-rec {
  font-family: var(--font-mono);
  font-size: 11px;
}

.se-seg-count {
  font-size: 10px;
  color: var(--fg-mute);
  margin-left: auto;
}

.se-metrics {
  background: rgba(0,0,0,0.20);
  border-radius: 5px;
  overflow: hidden;
}

.se-metric-head {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 8px;
  padding: 5px 10px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

.se-metric-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 8px;
  align-items: center;
  padding: 5px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
}

.se-metric-row:last-child { border-bottom: none; }

.se-metric-label { color: var(--text2); }

.se-metric-val {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-mute);
}

.se-metric-delta {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  min-width: 52px;
  text-align: right;
}

.se-empty {
  font-size: 11px;
  color: var(--fg-mute);
  padding: 8px 0;
}

/* Fighter-specific tag variants */
.tag-a {
  background: rgba(255,77,77,0.08);
  border-color: rgba(255,77,77,0.22);
  color: var(--fi-a) !important;
}

.tag-b {
  background: rgba(63,169,255,0.08);
  border-color: rgba(63,169,255,0.22);
  color: var(--fi-b) !important;
}

/* ── Dotted grid background on matchup panel ── */
#view-matchup {
  background-image: radial-gradient(rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 24px 24px;
}

#view-card {
  background-image: radial-gradient(rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* ── Google Font import for Space Grotesk ── */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ── Responsive ── */
@media (max-width: 900px) {
  .fi-hero-body { grid-template-columns: 1fr; gap: 20px; }
  .fi-b { text-align: left; align-items: flex-start; }
  .fi-tags-b { justify-content: flex-start; }
  .fi-record-strip-b { justify-content: flex-start; }
  /* Fighter B text is now left-aligned, so flip its photo to the right */
  .fi-b .fi-photo {
    left: auto;
    right: -8px;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 55%);
    mask-image: linear-gradient(to right, transparent 0%, black 55%);
  }
  .fi-tape { grid-template-columns: repeat(3, 1fr); }
  .profile-grid { grid-template-columns: 1fr; }
  .strike-grid { grid-template-columns: 1fr; }
  .strike-divider { display: none; }
  .traits-grid { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: 1fr 140px 1fr; padding: 10px 12px; }
  .fi-bottom-grid { grid-template-columns: 1fr; }
}