:root {
  --bg:        #f4f1ec;
  --surface:   #ffffff;
  --s2:        #eae6df;
  --s3:        #e2ddd5;

  /* Borders */
  --border:    #d5cfc5;
  --border2:   #ccc8c0;

  /* Text */
  --text:      #3d3830;
  --text2:     #5c564e;
  --muted:     #8a8278;

  /* Semantic */
  --green:     #1a7a44;
  --green-bg:  #bfe8d0;
  --red:       #a83428;
  --red-bg:    #eddbd9;
  --amber:     #A34A07;
  --amber-bg:  #fef0c7;

  /* Team color */
  --team:      #E05A14;
  --team-r:    224; --team-g: 90; --team-b: 20;
  --on-dark:   #EDE7E0;
  --radius:    2px;
  --hdr-h:     54px;

  /* Dark surface */
  --dk:        #2c1f14;
  --dk-bd:     #4a3828;
  --dk-t:      #ede7e0;
  --dk-t2:     #c4bab0;

  /* Betting systems grid column template */
  --sys-g:     28px 165px 1fr 80px;

  /* Typography */
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'Roboto Mono', monospace;
  --font-display: 'Bebas Neue', sans-serif;
  font-variant-numeric: tabular-nums;

  /* Type Scale */
  --fs-xs:   10px;
  --fs-sm:   11px;
  --fs-base: 12px;
  --fs-md:   13px;
  --fs-lg:   14px;
  --fs-xl:   16px;
  --fs-2xl:  20px;
}

/* ════════════════════════════════════════════════════════════════════════
   BREAKPOINT INDEX  (responsive rules live next to their feature, not here)
   The same width is declared in multiple places on purpose — each block
   targets a different, non-overlapping feature. Source order across widths
   is load-bearing (narrower widths must stay AFTER wider ones), so these are
   intentionally NOT merged. Use this map to jump to the right block.

     900px   header CTA layout .......... ~L278    feature panels ........... ~L489
     680px   header menu / nav .......... ~L283    team-hdr + main body ..... ~L1868    HF nav/footer ... ~L2431
     640px   systems footer ............. ~L2456   sys-detail stats ......... ~L2986    sys rows ........ ~L3099
     600px   bet strip (stacked) ........ ~L492    bet strip (tablet) ....... ~L1313
     560px   header CTA (narrow) ........ ~L287
     480px   landing tweaks ............. ~L1967
     420px   footer columns ............. ~L2464
     360px   landing grid ............... ~L1973   sys-detail stats ......... ~L2993    sys rows ........ ~L3209
     1080 / 860px   team-hdr scaling .... ~L1827 / L1831
     landscape (max-height)  phone/tablet rotation ... ~L2475 / L2510 / L2523 / L3058
     prefers-reduced-motion  consolidated at END of file
   ════════════════════════════════════════════════════════════════════════ */

/* Reset */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: hidden;
}
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.5;
  min-height: 100vh;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  overflow-x: hidden;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000' fill-opacity='0.015'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
}
/* prefers-reduced-motion rules consolidated at end of file */

/* Mega Dropdown */
#mega-bd {
  position: fixed; inset: 0;
  background: rgba(30,24,18,.38);
  backdrop-filter: blur(3px);
  z-index: 98; opacity: 0; pointer-events: none;
  transition: opacity .24s ease;
}
#mega-bd.open { opacity: 1; pointer-events: auto; }
#mega-drop {
  position: fixed; left: 0; right: 0; top: var(--hdr-h);
  background: var(--surface);
  border-bottom: 2px solid var(--border2);
  z-index: 99;
  overflow-y: auto; max-height: calc(100svh - var(--hdr-h));
  transform: translateY(-16px); opacity: 0; pointer-events: none;
  transition: transform .32s cubic-bezier(.16,1,.3,1), opacity .22s ease;
}
#mega-drop.open { transform: translateY(0); opacity: 1; pointer-events: auto; }
#mega-drop::-webkit-scrollbar { width: 4px; }
#mega-drop::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }

.mega-cols { display: grid; grid-template-columns: 1fr 1fr; max-width: 1400px; margin: 0 auto; }
.mega-col:first-child { border-right: 1.5px solid var(--border); }
.mega-league-hdr {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 22px 11px;
  border-bottom: 1.5px solid var(--border);
  background: var(--s2);
  position: sticky; top: 0; z-index: 2;
}
.mega-league-name { font-family: var(--font-body); font-size: 13px; font-weight: 800; letter-spacing: 0.04em; color: var(--team); transition: color .3s; text-transform: uppercase; }
.mega-league-count {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--text2); background: var(--s3); border: 1px solid var(--border);
  padding: 2px 6px;
}
.mega-col-inner { padding: 12px 18px 18px; }
.mega-divs    { display: flex; column-gap: 14px; }
.mega-div-col { flex: 1; min-width: 0; }
.mega-div-label {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--text); text-transform: uppercase;
  background: var(--s3);
  padding: 4px 7px; margin-bottom: 5px;
}
.mega-trow {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 6px;
  min-height: 44px;
  cursor: pointer; transition: background .12s;
  touch-action: manipulation;
}
.mega-trow:hover { background: rgba(var(--team-r),var(--team-g),var(--team-b),.09); }
.mega-trow img  { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; }
.mega-tabbr {
  font-family: var(--font-body);
  font-size: 13px; font-weight: 600;
  color: var(--text); letter-spacing: 0; flex: 1;
}
/* Landing Page */
.main {
  flex: 1;
  width: 100%;
  padding: 20px 24px;
  max-width: 1520px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
/* ===== Header menu button ===== */
.hf-menu-btn {
  display: flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 12px;
  background: #2E2218; border: 1px solid #5C4535; border-radius: 0;
  color: #EDE7E0; cursor: pointer; flex-shrink: 0;
  font-family: 'Roboto Mono', monospace; font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  transition: background .16s, border-color .16s, color .16s;
}
.hf-menu-btn:hover,
.hf-menu-btn.open { background: #E05A14; border-color: #E05A14; color: #fff; }
.hf-menu-ico { flex-shrink: 0; }
.hf-menu-lbl { line-height: 1; }

/* ===== Header nav menu panel ===== */
#nav-bd {
  position: fixed; inset: 0;
  background: rgba(20,15,10,.46); backdrop-filter: blur(3px);
  z-index: 98; opacity: 0; pointer-events: none; transition: opacity .22s ease;
}
#nav-bd.open { opacity: 1; pointer-events: auto; }

#nav-menu {
  position: fixed; top: var(--hdr-h);
  right: max(16px, env(safe-area-inset-right));
  width: 320px; max-width: calc(100vw - 24px);
  background: #211912; border: 1px solid #4A3828; border-top: 3px solid #E05A14;
  border-radius: 0; z-index: 99; padding: 8px;
  transform: translateY(-12px); opacity: 0; pointer-events: none;
  transition: transform .28s cubic-bezier(.16,1,.3,1), opacity .2s ease;
}
#nav-menu.open { transform: translateY(0); opacity: 1; pointer-events: auto; }

.nav-item {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 12px; min-height: 64px;
  text-decoration: none; transition: background .14s;
}
.nav-item + .nav-item { border-top: 1px solid #382A1E; }
.nav-item:hover { background: rgba(224,90,20,.10); }

.nav-item-ico {
  width: 40px; height: 40px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.nav-item-ico--home    { background: #2E2218; border: 1px solid #5C4535; color: #E05A14; }
.nav-item-ico--patreon { background: #E05A14; }
.nav-item-ico--members { background: #E8A040; color: #211912; }

.nav-item-txt   { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.nav-item-title {
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700;
  color: #fff; letter-spacing: .01em; display: flex; align-items: center; gap: 8px;
}
.nav-item-sub {
  font-family: 'Roboto Mono', monospace; font-size: 10px; font-weight: 500;
  letter-spacing: .04em; color: #C8C0B4;
}
.nav-item-badge {
  font-family: 'Roboto Mono', monospace; font-size: 8px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: #211912; background: #E8A040; padding: 2px 5px; line-height: 1;
}
.nav-item-arrow { color: #A08C78; flex-shrink: 0; transition: color .14s, transform .14s; }
.nav-item:hover .nav-item-arrow { color: #E05A14; transform: translateX(3px); }

/* ===== Footer membership CTA ===== */
.hf-f-hero--grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: 40px; align-items: stretch; }
.hf-f-cta { display: flex; flex-direction: row; gap: 16px; padding-top: 0; }
.hf-f-cta-card { flex: 1; }

.hf-f-cta-card {
  position: relative; display: flex; flex-direction: column;
  padding: 20px 20px 18px; text-decoration: none;
  background: rgba(255,255,255,0.05);
  border: 1px solid #4A3828; border-left: 3px solid #E05A14; border-radius: 0;
  transition: background .16s, border-color .16s;
}
.hf-f-cta-card:hover { background: rgba(224,90,20,.10); }
.hf-f-cta-card--members { border-left-color: #E8A040; }
.hf-f-cta-card--members:hover { background: rgba(232,160,64,.10); }

.hf-f-cta-ico {
  width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
  background: #E05A14; color: #fff; margin-bottom: 14px;
}
.hf-f-cta-card--members .hf-f-cta-ico { background: #E8A040; color: #211912; }

.hf-f-cta-lock-badge {
  position: absolute; top: 18px; right: 18px;
  font-family: 'Roboto Mono', monospace; font-size: 8px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: #211912; background: #E8A040; padding: 3px 7px; line-height: 1;
}
.hf-f-cta-kicker {
  font-family: 'Roboto Mono', monospace; font-size: 9px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: #E8A040; margin-bottom: 6px;
}
.hf-f-cta-card--patreon .hf-f-cta-kicker { color: #E05A14; }
.hf-f-cta-title {
  font-family: 'Bebas Neue', sans-serif; font-size: 26px; letter-spacing: .04em;
  color: #fff; line-height: 1; margin-bottom: 8px;
}
.hf-f-cta-sub {
  font-family: 'Roboto Mono', monospace; font-size: 11px; font-weight: 400;
  line-height: 1.65; color: #D4CEC6; margin-bottom: 16px;
}
.hf-f-cta-go {
  display: flex; align-items: center; gap: 8px; margin-top: auto;
  padding-top: 16px; border-top: 1px solid #4A3828;
  font-family: 'Roboto Mono', monospace; font-size: 10px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: #fff;
}
.hf-f-cta-go svg { transition: transform .16s; }
.hf-f-cta-card:hover .hf-f-cta-go svg { transform: translateX(4px); }

/* ===== Menu + CTA responsive ===== */
@media (max-width: 900px) {
  .hf-f-hero--grid { grid-template-columns: minmax(0,1fr); gap: 32px; }
  .hf-f-cta { flex-direction: row; }
  .hf-f-cta-card { flex: 1; }
}
@media (max-width: 680px) {
  .hf-menu-btn { order: 1; margin-left: auto; height: 44px; }
  #nav-menu { left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); width: auto; }
}
@media (max-width: 560px) {
  .hf-f-cta { flex-direction: column; }
}

.landing-hero {
  background: url('cover.png') center 35% / cover no-repeat;
  margin: 0 0 28px;
  padding: 64px 40px 52px;
  text-align: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
@supports (overflow: clip) {
  .landing-hero { overflow: clip; }
}

.landing-hero::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(
    180deg,
    rgba(240, 237, 231, 0.08) 0%,
    rgba(240, 237, 231, 0.28) 46%,
    rgba(240, 237, 231, 0.62) 100%
  );
}
.landing-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700; letter-spacing: 0.22em; color: var(--text2);
  text-transform: uppercase; margin-bottom: 16px;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  position: relative; z-index: 1;
}
.landing-eyebrow::before,
.landing-eyebrow::after { content: ''; flex: 0 0 48px; height: 1px; background: var(--text2); opacity: 0.35; }
.landing-wordmark {
  font-family: var(--font-display);
  font-size: clamp(72px, 12vw, 136px); letter-spacing: 0.04em; line-height: .9;
  color: var(--text); margin: 0 0 20px; position: relative; z-index: 1;
}
.landing-wordmark span { color: var(--team); }
.landing-tagline {
  font-family: var(--font-body);
  font-size: 14px; font-weight: 400; line-height: 1.7; color: var(--text);
  max-width: 460px; margin: 0 auto 36px;
  position: relative; z-index: 1;
}
.landing-feats { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; position: relative; z-index: 1; }
.landing-feat {
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 16px 18px;
  min-width: 150px; flex: 1; max-width: 210px;
  text-align: left;
  transition: background .12s ease, border-color .12s ease;
  cursor: pointer;
}
.landing-feat:hover { background: rgba(255,255,255,1); border-color: var(--border2); }
.landing-feat.bat { --ac: var(--team); }
.landing-feat.pit { --ac: var(--red); }
.landing-feat.inn { --ac: var(--green); }
.landing-feat.sys { --ac: var(--amber); }
.lf-eyebrow { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ac); margin-bottom: 13px; }
.lf-preview { height: 46px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 3px; }
.lf-row { display: flex; gap: 3px; }
.lf-cell { flex: 1; height: 12px; display: block; border-radius: 0; }
.lf-preview.lf-bars { flex-direction: row; align-items: flex-end; gap: 5px; }
.lf-bar { flex: 1; display: block; border-radius: 0; }
.landing-feat.sys .lf-cell { height: 20px; }
.lf-f0{background:#531111}.lf-f1{background:#9c2018}.lf-f2{background:#e0401d}.lf-f3{background:#c2a85c}.lf-f4{background:#62b074}.lf-f5{background:#1a7a44}.lf-f6{background:#0e3b1f}
.lf-r0{height:8px;background:#ece6da}.lf-r1{height:21px;background:#fbe2b4}.lf-r2{height:33px;background:#e0691f}.lf-r3{height:46px;background:#a8401a}
.landing-feat-title { font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text); margin-bottom: 6px; text-decoration: underline; text-decoration-color: var(--ac); text-underline-offset: 4px; text-decoration-thickness: 2px; }
.landing-feat-sub   { font-family: var(--font-body); font-size: 11px; font-weight: 400; color: var(--text2); line-height: 1.5; }
@media (max-width: 1024px) { .landing-feat { flex: 0 0 calc(50% - 5px); max-width: none; } }
.landing-divider { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.landing-divider-label { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.12em; color: var(--text2); text-transform: uppercase; white-space: nowrap; }
.landing-divider-line  { flex: 1; height: 1px; background: var(--border); }
.landing-team-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; background: var(--s2); }
.landing-tile {
  display: flex; flex-direction: column;
  padding: 12px 12px 10px;
  background: var(--surface);
  border-top: 2px solid transparent;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
  user-select: none;
  position: relative; overflow: hidden;
}
.landing-tile:hover {
  border-top-color: var(--team);
  background: rgba(var(--team-r),var(--team-g),var(--team-b),.04);
}
.lt-top { display: flex; align-items: center; gap: 8px; }
.landing-tile img { width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; }
.lt-name { font-family: var(--font-body); font-size: 13px; font-weight: 700; color: var(--text); line-height: 1.25; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-bottom { margin-top: 8px; }
.lt-record { font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--text2); background: var(--s2); border: 1px solid var(--border); padding: 2px 6px; white-space: nowrap; letter-spacing: 0.04em; flex-shrink: 0; line-height: 1.5; }
.lt-record.good { color: #fff; background: var(--green); border-color: var(--green); }
.lt-record.bad  { color: #fff; background: var(--red);   border-color: var(--red); }
.lt-spark-wrap { width: 100%; overflow: hidden; aspect-ratio: 200 / 36; max-height: 50px; min-height: 24px; }
.lt-spark-wrap svg { display: block; width: 100%; height: 100%; }
.lt-abbr { display: none; }
.landing-tile.skel { cursor: default; pointer-events: none; }
.landing-tile.skel .skel-logo { width: 30px; height: 30px; flex-shrink: 0; }
.landing-tile.skel .skel-abbr { flex: 1; height: 13px; }
.landing-tile.skel .skel-bar  { width: 100%; height: 3px; margin-top: 8px; }
/* ===== How MLB Lab Works — landing explainer ===== */
.landing-about {
  margin: 2px 0 28px;
}
.landing-about-inner {
  background: var(--surface);
  border-radius: 0;
  padding: 36px 40px 40px;
}
/* Header */
.hiw-head { max-width: 760px; }
.hiw-eyebrow {
  display: block;
  font: 700 10px/1 var(--font-mono);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--team);
  margin-bottom: 13px;
}
.hiw-title {
  margin: 0 0 16px;
  font: normal 38px/1 var(--font-display);
  letter-spacing: .04em;
  color: var(--text);
}
.hiw-lede {
  margin: 0;
  font: 400 15px/1.65 var(--font-body);
  color: var(--text);
}

/* "Reading the tiles" readout */
.hiw-readout {
  margin: 28px 0 32px;
  padding: 16px 22px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--team);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hiw-readout-tag {
  flex-shrink: 0;
  font: 700 10px/1.4 var(--font-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--team);
}
.hiw-readout-copy {
  margin: 0;
  flex: 1;
  min-width: 300px;
  font: 400 14px/1.7 var(--font-body);
  color: var(--text);
}
.hiw-pos { color: var(--green); font-weight: 700; }
.hiw-neg { color: var(--red);   font-weight: 700; }

/* Feature panels */
.hiw-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.hiw-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-top: 2px solid var(--team);
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
}
.hiw-card-head-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.hiw-num {
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  font: normal 17px/1 var(--font-display);
  letter-spacing: .02em;
  color: #fff;
  background: var(--team);
}
.hiw-card-head {
  margin: 0;
  font: normal 20px/1 var(--font-display);
  letter-spacing: .06em;
  color: var(--text);
}
.hiw-card-body {
  margin: 0 0 13px;
  font: 400 14px/1.72 var(--font-body);
  color: var(--text);
}
.hiw-card-body:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  .hiw-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .landing-about-inner { padding: 26px 18px 28px; }
  .hiw-title { font-size: 38px; }
  .hiw-lede { font-size: 16px; }
  .hiw-readout { flex-direction: column; gap: 9px; }
  .hiw-readout-copy { min-width: 0; }
}
/* Team Header */
.team-hdr {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  padding: 20px 24px;
  background: var(--surface);
  border-radius: var(--radius);
  border-left: 4px solid var(--team);
  transition: border-color .4s;
  position: relative;
  overflow: hidden;
}
.team-hdr::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 220px; height: 100%;
  background: radial-gradient(ellipse 80% 80% at 100% 50%, rgba(var(--team-r),var(--team-g),var(--team-b),.06) 0%, transparent 70%);
  pointer-events: none;
  transition: background .4s;
}
.team-hdr-info { flex: 1; min-width: 180px; }
.team-hdr-identity { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.team-hdr-logo { width: 68px; height: 68px; object-fit: contain; flex-shrink: 0; }
.team-hdr-name { font-family: var(--font-body); font-size: 36px; font-weight: 800; line-height: 1; letter-spacing: -0.01em; color: var(--text); }

.hdr-record-row {
  display: flex; align-items: stretch; flex-wrap: wrap;
  row-gap: 8px; margin-top: 12px;
}
.hdr-rec-item {
  display: flex; flex-direction: column; justify-content: center;
  gap: 2px; padding: 0 18px 0 0;
}
.hdr-rec-item + .hdr-rec-item {
  padding-left: 18px;
}
.hdr-rec-lbl {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 600; letter-spacing: 0.06em;
  color: var(--text2); text-transform: uppercase;
  white-space: nowrap; line-height: 1;
}
.hdr-rec-val {
  font-family: var(--font-body);
  font-size: 22px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--text); line-height: 1; white-space: nowrap;
}
.hdr-rec-val.good { color: var(--green); }
.hdr-rec-val.bad  { color: var(--red); }
.hdr-rec-val.team { color: var(--team); transition: color .3s; }

.form-strip { display: flex; align-items: stretch; gap: 5px; margin-top: 12px; flex-wrap: wrap; }
.momentum-widget-group {
  display: inline-flex; align-items: stretch;
  border: 1px solid #5C4535;
  border-radius: 2px; overflow: hidden;
}
.momentum-badge {
  display: inline-flex; align-items: stretch; gap: 12px;
  padding: 10px 14px 10px 12px;
  background: #2E2218;
  flex-shrink: 0; cursor: default;
}
.momentum-lbl {
  font-family: var(--font-mono);
  font-size: 9px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--on-dark);
}
.momentum-bar-wrap { display: flex; flex-direction: column; justify-content: center; gap: 5px; }
.momentum-segs     { display: flex; gap: 2px; align-items: flex-end; }
.momentum-seg      { width: 6px; height: 16px; }
.momentum-seg.off      { background: rgba(107,79,56,0.30); }
.momentum-seg.on.cold  { background: #e05050; }
.momentum-seg.on.warm  { background: #E05A14; }
.momentum-seg.on.hot   { background: #3ddc84; }
.momentum-trend-lbl {
  font-family: var(--font-mono);
  font-size: 9px; font-weight: 700; letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--on-dark);
}
.momentum-right { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.momentum-score {
  font-family: var(--font-display);
  font-size: 28px; line-height: 1; letter-spacing: 0.04em;
  color: #ffffff;
}
.momentum-sub {
  font-family: var(--font-mono);
  font-size: 9px; font-weight: 700; letter-spacing: 0.10em;
  text-transform: uppercase; white-space: nowrap; padding: 2px 6px;
}
.momentum-badge      .momentum-sub { background: rgba(224,90,20,0.18); color: #E05A14; }
.momentum-badge.high .momentum-sub { background: #1a3028; color: #3ddc84; }
.momentum-badge.low  .momentum-sub { background: #2e1a1a; color: #e05050; }
.form-blowout-badge {
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  padding: 10px 14px 10px 12px;
  background: #2E2218; border-left: 1px solid #5C4535;
  flex-shrink: 0;
}
.fbb-lbl {
  font-family: var(--font-mono);
  font-size: 9px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--on-dark);
}
.fbb-val {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; white-space: nowrap; padding: 2px 6px;
}
.form-blowout-badge.blowout-w .fbb-val { background: #1a3028; color: #3ddc84; }
.form-blowout-badge.blowout-l .fbb-val { background: #2e1a1a; color: #e05050; }
.hdr-groups { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; margin-left: auto; position: relative; z-index: 1; }
.hdr-group  { display: flex; flex-direction: column; gap: 0; }
.hdr-group-label {
  font-family: var(--font-display);
  font-size: 24px; letter-spacing: 0.04em; line-height: 1;
  color: #fff; padding: 7px 14px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.hdr-group-label.offense { background: var(--team); }
.hdr-group-label.defense { background: var(--green); }
.hdr-group-ctx {
  font-family: var(--font-mono);
  font-size: 9px; font-weight: 500; letter-spacing: 0.06em;
  font-style: italic; color: rgba(255,255,255,0.85);
  white-space: nowrap; margin-left: auto;
  overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.hdr-stat-bar {
  display: flex; align-items: stretch;
  background: linear-gradient(180deg, #ffffff 0%, #ede9e1 100%);
  overflow: hidden;
  border: 1px solid var(--border);
  border-top: none;
}
.hdr-stat-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 11px 14px 9px; min-width: 64px; flex: 1; gap: 2px;
  position: relative; cursor: default;
  border-right: 1px solid var(--border);
}
.hdr-stat-item:last-child { border-right: none; }
.hdr-stat-item + .hdr-stat-item::before { display: none; }

.hdr-stat-val {
  font-family: var(--font-display);
  font-size: 36px; letter-spacing: 0.01em;
  color: var(--text); line-height: 1; white-space: nowrap;
}
.hdr-stat-val.good  { color: var(--green); }
.hdr-stat-val.bad   { color: var(--red); }
.hdr-stat-val.amber { color: var(--amber); }

.hdr-stat-lbl {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700; color: var(--text2);
  letter-spacing: 0.10em; text-transform: uppercase; white-space: nowrap;
}
.hdr-stat-delta {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 600; line-height: 1; margin-top: 1px;
  white-space: nowrap;
}
.hdr-stat-delta.up   { color: var(--green); }
.hdr-stat-delta.down { color: var(--red); }
.hdr-stat-delta.flat { color: var(--text2); }
/* Section Headers */
.sec-hdr   { display: flex; flex-direction: column; gap: 6px; margin: 34px 0 16px; }
.sec-hdr-top { display: flex; align-items: center; }
.sec-title {
  font-family: var(--font-display);
  font-size: 34px; letter-spacing: 0.05em;
  color: var(--text); line-height: 1;
}
.sec-title::before { display: none; }
.sec-title span { color: var(--team); transition: color .3s; }
.sec-sub {
  font-family: var(--font-body);
  font-size: 12px; font-weight: 400; color: var(--text2);
  line-height: 1.55; letter-spacing: 0; padding-left: 0;
}
.sec-line { display: none; }

/* Card Wrappers + Metric Bars */
.card-wrap {
  background: var(--surface);
  border-radius: 0;
  overflow: hidden;
  margin-bottom: 24px;
}
@supports (overflow: clip) { .card-wrap { overflow: clip; } }

.metric-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--s2);
  flex-wrap: wrap;
}
.metric-label { font-family: var(--font-mono); font-size: 10px; font-weight: 500; color: var(--text2); letter-spacing: 0.06em; margin-right: 2px; }
.metric-btn {
  padding: 6px 13px;
  font-family: var(--font-body);
  font-size: 12px; font-weight: 600; letter-spacing: 0;
  border: 1px solid transparent;
  background: transparent; color: var(--text2);
  border-radius: 2px; cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease; white-space: nowrap;
  min-height: 32px;
  touch-action: manipulation;
}
.metric-btn:hover                { color: var(--team); background: rgba(var(--team-r),var(--team-g),var(--team-b),.07); }
.metric-btn.active               { background: var(--team);   color: #fff; border-color: transparent; }
.metric-btn.active.amber         { background: var(--amber);  border-color: transparent;  color: #fff; }
.metric-btn.active.red           { background: var(--red);    border-color: transparent;    color: #fff; }
.metric-btn.active.green         { background: var(--green);  border-color: transparent;  color: #fff; }
.metric-btn.active.purple        { background: #6B3FB5;       border-color: transparent;       color: #fff; }

/* Heatmap Tables */
.hm-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.hm-scroll::-webkit-scrollbar       { height: 5px; }
.hm-scroll::-webkit-scrollbar-track { background: var(--s3); }
.hm-scroll::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }

.hm-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.hm-table thead th {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700; color: var(--dk-t);
  padding: 11px 4px; text-align: center;
  background: linear-gradient(180deg,#3a2a1a 0%,#2c1f14 55%,#241910 100%);
  border-top: none; border-bottom: 2px solid var(--team); border-right: 1px solid var(--dk-bd);
  letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
}
.hm-table thead th.hm-player-th { text-align: left; padding-left: 14px; padding-right: 10px; width: 180px; min-width: 180px; max-width: 180px; color: var(--dk-t); font-size: 11px; font-weight: 700; letter-spacing: 0.10em; border-right: 1px solid var(--dk-bd); }
.hm-table thead th.hm-avg-th    { color: var(--dk-t); font-weight: 800; min-width: 48px; border-right: none; }
.hm-table tbody td { padding: 1px 2px; border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); }
.hm-table tbody td.hm-player-td { padding: 4px 8px 4px 14px; width: 180px; min-width: 180px; max-width: 180px; overflow: hidden; border-right: 1px solid var(--border2); }
.hm-table tbody tr:last-child td { border-bottom: none; }
.hm-table tbody tr:hover td { background: var(--surface); }
.hm-table tbody tr:hover td.hm-player-td { background: var(--surface); }
.p-name   { font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--text); }
.p-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.p-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px;
  background: var(--s2); border: 1px solid var(--border);
  font-family: var(--font-body);
  font-size: 10px; font-weight: 500; color: var(--text2);
  letter-spacing: 0; white-space: nowrap; line-height: 1.5;
}
.p-badge.pos  { border-left: 2.5px solid var(--team); color: var(--text); font-weight: 600; background: var(--surface); transition: border-color .12s ease; }
.p-badge.win  { color: var(--green); border-color: rgba(37,87,60,.3);  background: var(--green-bg); font-weight: 700; }
.p-badge.save { color: var(--amber); border-color: rgba(163,74,7,.3);   background: var(--amber-bg); font-weight: 700; }
.p-badge.loss { color: var(--red);   border-color: rgba(168,52,40,.3);  background: var(--red-bg);   font-weight: 700; }
[class*="status-"].p-badge { font-weight: 700; letter-spacing: 0.05em; color: #fff; border-color: transparent; }
[class*="status-"].p-badge::before {
  content: ''; display: inline-block;
  width: 5px; height: 5px; flex-shrink: 0;
  background: rgba(255,255,255,0.55);
}
.p-badge.status-active  { background: var(--green);  font-weight: 600; }
.p-badge.status-dtd     { background: var(--amber); }
.p-badge.status-il      { background: #B84F10; }
.p-badge.status-il-long { background: var(--red); }
.p-badge.status-out     { background: #7A1A12; }
.p-badge.status-susp    { background: #6B3FB5; }
.heat-cell {
  width: 58px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 700;
  margin: 2px auto; cursor: default;
  position: relative; overflow: hidden;
  color: var(--text);
  transition: opacity .12s;
}
.heat-cell:hover { opacity: .78; }
.heat-accent { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.heat-cell.dnp {
  background: var(--s2) !important;
  color: var(--text2) !important;
  font-size: 11px !important;
  border: 1px dashed var(--border2) !important;
}
.hm-avg-cell {
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 700; color: var(--text);
  text-align: center; padding: 0 14px;
  white-space: nowrap;
}
.hm-game-hdr { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.hm-wl      { font-size: 12px; font-weight: 800; font-family: var(--font-body); }
.hm-wl.w   { color: #4fc274; }
.hm-wl.l   { color: #e07060; }
.hm-opp    { font-family: var(--font-body); font-size: 11px; font-weight: 700; color: var(--dk-t); }
.hm-date   { font-family: var(--font-mono); font-size: 9px; font-weight: 600; color: var(--dk-t2); }
.hm-legend {
  display: flex; align-items: center; gap: 16px;
  padding: 8px 16px;
  border-top: 1px solid var(--border);
  background: var(--s2);
  font-family: var(--font-mono);
  font-size: 10px; color: var(--text2);
  flex-wrap: wrap; letter-spacing: 0.06em;
}
.hm-legend-scale { display: flex; align-items: center; gap: 0; flex-shrink: 0; }
.hm-ls-swatch {
  width: 26px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700;
}
.hm-legend-sep { color: var(--text2); margin: 0 4px; flex-shrink: 0; }
.hm-legend-dnp {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 18px;
  border: 1px dashed var(--border2);
  font-family: var(--font-mono); font-size: 10px;
  color: var(--text2); flex-shrink: 0;
}
/* Inning Table */
.inn-table { width: 100%; border-collapse: collapse; }
.inn-table thead th {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700; color: var(--dk-t);
  padding: 14px 0; text-align: center;
  background: linear-gradient(180deg,#3a2a1a 0%,#2c1f14 55%,#241910 100%);
  border-bottom: 2px solid var(--team);
  letter-spacing: 0.10em; text-transform: uppercase; white-space: nowrap;
}
.inn-table thead th.inn-game-th {
  text-align: left; padding-left: 16px;
  width: 195px; min-width: 195px;
  color: var(--dk-t); font-size: 10px; font-weight: 700;
  letter-spacing: 0.10em;
  border-left: 3px solid #241910;
}
.inn-table thead th.inn-tot-th {
  width: 64px; min-width: 64px;
  color: var(--dk-t); font-weight: 800; font-size: 10px;
  border-left: 2px solid var(--dk-bd); letter-spacing: 0.10em;
}
.inn-table thead th.inn-peak { color: #fff; background: linear-gradient(180deg,#D9590F 0%,#C2440A 55%,#AB3A07 100%); border-bottom: 2px solid #8C3205; }
.inn-table tbody td { border-bottom: 1px solid var(--border); padding: 0; }
.inn-table tbody td.inn-game-td {
  padding: 4px 8px 4px 0;
  background: var(--surface);
  border-right: 2px solid var(--border2);
  transition: background .12s;
  border-left: 3px solid transparent;
  width: 195px; min-width: 195px;
}
.inn-table tbody tr.row-w td.inn-game-td { border-left-color: var(--green); }
.inn-table tbody tr.row-l td.inn-game-td { border-left-color: var(--red); }
.inn-table tbody td.inn-num {
  text-align: center;
  width: 58px; min-width: 58px;
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 700;
  height: 34px; vertical-align: middle;
  position: relative; overflow: hidden;
  transition: opacity .12s;
}
.inn-table tbody td.inn-num.inn-none { background: transparent; color: var(--text2); font-size: 12px; font-weight: 600; }
.inn-table tbody td.inn-avg-td {
  text-align: center; font-family: var(--font-mono);
  font-size: 13px; font-weight: 800; color: var(--text);
  padding: 0 6px; border-left: 2px solid var(--border2);
  width: 64px; min-width: 64px;
}
.inn-table tbody tr:last-child td { border-bottom: none; }
.inn-table tbody tr:not(.inn-avg-row):hover td.inn-game-td { background: var(--surface) !important; }
.inn-table tbody tr:not(.inn-avg-row):hover td.inn-num { opacity: .80; }

.inn-game-meta {
  font-family: var(--font-body);
  font-size: 13px; font-weight: 700; color: var(--text);
  display: flex; align-items: center; gap: 5px;
  padding-left: 10px;
}
.inn-opp { flex: 0 1 auto; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; font-weight: 700; }
.inn-score {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 700;
  background: var(--s3); border: 1px solid var(--border);
  padding: 1px 7px; flex-shrink: 0; border-radius: 2px;
}
.inn-score-ours   { font-weight: 800; }
.inn-score-ours.w { color: var(--green); }
.inn-score-ours.l { color: var(--red); }
.inn-score-sep    { color: var(--border2); font-weight: 400; margin: 0 1px; }
.inn-score-theirs { color: var(--text2); font-weight: 600; }
.inn-date {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 500; color: var(--text2);
  flex-shrink: 0;
}
.inn-game-sub {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 500; color: var(--text2);
  margin-top: 2px; padding-left: 10px;
  display: flex; align-items: center; gap: 5px;
}
.inn-wl-badge {
  display: inline-flex; align-items: center; flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 800; letter-spacing: 0.06em;
  padding: 2px 6px; border-radius: 2px;
}
.inn-wl-badge.w { background: var(--green); color: #fff; border: 1px solid var(--green); }
.inn-wl-badge.l { background: var(--red);   color: #fff; border: 1px solid var(--red); }
.inn-ou-badge {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  padding: 1px 5px; border-radius: 2px; flex-shrink: 0;
}
.inn-ou-badge.over  { background: var(--green); color: #fff; border: 1px solid var(--green); }
.inn-ou-badge.under { background: var(--red);   color: #fff; border: 1px solid var(--red); }
.inn-ou-badge.push  { background: var(--amber); color: #fff; border: 1px solid var(--amber); }
.inn-spr-th, .inn-tot2-th { width: 134px; min-width: 134px; border-left: 1px solid var(--dk-bd); }
.inn-tot2-th { border-right: 1px solid var(--dk-bd); border-left: none; }
.inn-spr-td, .inn-tot2-td {
  width: 134px; min-width: 134px;
  padding: 10px 10px; text-align: center; vertical-align: middle;
  border-left: 1px solid var(--border);
}
.inn-tot2-td { border-right: 1px solid var(--border); border-left: none; }
.inn-bet-inner { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: nowrap; }
.inn-bet-line {
  font-family: var(--font-mono);
  font-size: 14px; font-weight: 800; letter-spacing: -0.01em;
  line-height: 1; color: var(--text); white-space: nowrap; flex-shrink: 0;
}
.inn-bet-result {
  display: inline-flex; align-items: center;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 800; letter-spacing: 0.08em;
  padding: 3px 8px; border-radius: 2px; white-space: nowrap; flex-shrink: 0;
}
.inn-bet-result.cover    { background: var(--green); color: #fff; border: 1px solid var(--green); }
.inn-bet-result.no-cover { background: var(--red);   color: #fff; border: 1px solid var(--red); }
.inn-bet-result.over     { background: var(--green); color: #fff; border: 1px solid var(--green); }
.inn-bet-result.under    { background: var(--red);   color: #fff; border: 1px solid var(--red); }
.inn-bet-result.push     { background: var(--amber); color: #fff; border: 1px solid var(--amber); }
.inn-bet-result.no-data  { background: transparent; color: var(--border); font-size: 13px; letter-spacing: 0; }
.inn-bet-line:empty      { display: none; }
.inn-avg-row td                { border-top: 2px solid var(--border2) !important; }
.inn-avg-row td.inn-game-td    { background: var(--s2) !important; border-left-color: var(--border2) !important; }
.inn-avg-row td.inn-avg-td     { background: var(--s2) !important; color: var(--text); font-size: 13px; font-weight: 800; }
.inn-avg-row td.inn-num        { font-size: 12px; font-weight: 700; height: 42px; opacity: 0.9; }
.inn-avg-row td.inn-spr-td,
.inn-avg-row td.inn-tot2-td    { padding: 5px 8px; text-align: center; vertical-align: middle; background: var(--s2) !important; }
.inn-avg-row-lbl {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700; letter-spacing: 0.10em;
  color: var(--text); text-transform: uppercase;
  padding-left: 13px;
}
.inn-scale { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.inn-scale-swatch {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 24px;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700;
  border: 1px solid rgba(0,0,0,.18);
}
/* Batting Stats Table */
.st-scroll { overflow-x: auto; overflow-y: hidden; }
.st-scroll::-webkit-scrollbar       { height: 5px; }
.st-scroll::-webkit-scrollbar-track { background: var(--s3); }
.st-scroll::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }

.st-table { width: 100%; border-collapse: separate; border-spacing: 3px 2px; }
.st-table thead th {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700; color: var(--dk-t);
  padding: 10px 10px; text-align: right;
  background: linear-gradient(180deg,#3a2a1a 0%,#2c1f14 55%,#241910 100%);
  border-bottom: 2px solid var(--team);
  letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; user-select: none; white-space: nowrap;
  transition: color .12s ease;
}
.st-table thead th:first-child { text-align: left; cursor: default; min-width: 170px; padding-left: 10px; letter-spacing: 0.10em; }
.st-table thead th.sorted      { color: #F5853A; font-weight: 800; }
.st-table thead th.sorted::after      { content: ' ↓'; font-size: 10px; opacity: .85; }
.st-table thead th.sorted.asc::after  { content: ' ↑'; }
.st-table thead th.col-ops   { color: #F5853A; font-weight: 800; letter-spacing: 0.06em; }
.st-table thead th.col-ops.sorted { color: #FF9A4D; filter: none; }
.st-table thead th.col-edge  { text-align: left; cursor: default; color: var(--dk-t); font-weight: 800; letter-spacing: 0.06em; min-width: 130px; width: 130px; }
.st-table tbody td { padding: 0; border: none; }
.st-table tbody td:first-child { padding: 5px 10px 5px 4px; background: transparent !important; }
.st-table tbody tr:last-child td { border-bottom: none; }
.st-table tbody tr:hover .st-stat-cell { filter: brightness(0.88); }
.st-table tbody tr:hover td:first-child { background: var(--surface) !important; border-radius: 2px; }
.st-stat-cell { position: relative; min-width: 56px; text-align: right; padding: 0; vertical-align: middle; height: 30px; border-radius: 2px; overflow: hidden; transition: filter .12s; }
.st-val { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--text); }
.st-val.good  { color: var(--green); }
.st-val.bad   { color: var(--red); }
.st-val.elite { color: #25573c; font-weight: 700; }
.st-pname { font-family: var(--font-body); font-size: 14px; font-weight: 600; display: block; color: var(--text); }
.st-edge-cell { text-align: left; padding: 4px 8px; vertical-align: middle; width: 130px; min-width: 130px; border-radius: 2px; background: var(--s2); }
.edge-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.edge-view-btn {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700; letter-spacing: 0.07em;
  color: var(--team); white-space: nowrap; text-transform: uppercase;
  padding: 4px 0; width: 100%;
  border: none; border-top: 1px solid var(--border);
  background: transparent;
  cursor: pointer; display: block;
  transition: color .12s, border-color .12s;
}
.edge-view-btn:hover { color: var(--text); border-top-color: var(--border2); }
.edge-desc {
  font-family: var(--font-body);
  font-size: 12px; color: var(--text2); line-height: 1.55;
  letter-spacing: 0; max-width: 200px;
  display: none;
}
/* Intelligence / Insights Cards */
.intel-section { margin-top: 4px; margin-bottom: 24px; }
.intel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.intel-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 14px 16px;
  border-left: 4px solid var(--border2);
  transition: transform .12s ease;
  will-change: transform;
}
.intel-card:hover { transform: translateY(-1px); }
.intel-card.edge-high         { border-left-color: var(--green); }
.intel-card.edge-med          { border-left-color: var(--amber); }
.intel-card.edge-fade         { border-left-color: var(--red); }
.intel-card.edge-info         { border-left-color: var(--team); }
.intel-card.edge-venue-hot    { border-left-color: #c45c00; }
.intel-card.edge-venue-cold   { border-left-color: #0f6b8a; }
.intel-card.edge-f5-hot       { border-left-color: #92400e; }
.intel-card.edge-f5-fade      { border-left-color: #7f1d1d; }
.intel-card.edge-starter      { border-left-color: #1e3a8a; }
.intel-card.edge-starter-cold { border-left-color: #065f46; }
.intel-card.edge-sys-gold     { border-left-color: #a16207; }
.intel-card.edge-sys-teal     { border-left-color: #0d9488; }
.intel-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.intel-tag {
  font-family: var(--font-body);
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  padding: 2px 8px;
  text-transform: uppercase; flex-shrink: 0;
  color: #fff;
}
.intel-tag.high          { background: var(--green); }
.intel-tag.med           { background: #C07000; }
.intel-tag.fade          { background: var(--red); }
.intel-tag.info          { background: var(--team); }
.intel-tag.venue-hot     { background: #c45c00; }
.intel-tag.venue-cold    { background: #0f6b8a; }
.intel-tag.f5-hot        { background: #92400e; }
.intel-tag.f5-fade       { background: #7f1d1d; }
.intel-tag.starter       { background: #1e3a8a; }
.intel-tag.starter-cold  { background: #065f46; }
.intel-tag.sys-gold      { background: #a16207; }
.intel-tag.sys-teal      { background: #0d9488; }
.intel-title {
  font-family: var(--font-body);
  font-size: 14px; font-weight: 700; color: var(--text);
  line-height: 1.35;
}
.intel-body {
  font-family: var(--font-body);
  font-size: 12px; color: var(--text2);
  line-height: 1.6; letter-spacing: 0;
  margin-top: 5px;
}
.intel-stat          { font-weight: 700; color: var(--text); }
.intel-stat.good     { color: var(--green); }
.intel-stat.bad      { color: var(--red); }
.intel-stat.warn     { color: var(--amber); }
.intel-conf {
  font-family: var(--font-body);
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em;
  padding: 2px 8px;
  margin-left: auto; text-transform: uppercase; flex-shrink: 0;
  color: #fff;
}
.conf-high { background: var(--green); }
.conf-med  { background: var(--muted); }
.conf-low  { background: #C07000; }
.intel-lean {
  font-family: var(--font-body);
  font-size: 11px; font-weight: 600; letter-spacing: 0;
  color: var(--text2); margin-top: 8px;
  padding-top: 8px; border-top: 1px solid var(--border);
  line-height: 1.5;
}
.intel-lean .lean-val { color: var(--team); }

/* Edge badges */
.eb {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  padding: 4px 9px;
  text-transform: uppercase; white-space: nowrap;
  display: inline-block; cursor: default; line-height: 1.3;
  border: 1px solid transparent; color: #fff;
}
.eb-elite   { background: #92400E; }
.eb-power   { background: #C07000; }
.eb-high    { background: var(--green); }
.eb-contact { background: var(--team); }
.eb-risk    { background: #C2610A; }
.eb-fade    { background: var(--red); }
.eb-avg     { background: var(--s3);  color: var(--text2); border-color: var(--border2); }
.eb-small   { background: var(--s3);  color: var(--text2); border-color: var(--border2); }
/* Next Game Banner */
.ng-banner {
  background: var(--surface);
  border-left: 4px solid var(--team);
  margin-bottom: 6px;
  display: grid;
  grid-template-columns: auto 1fr 1fr auto;
  grid-template-rows: auto auto;
  align-items: stretch;
  transition: border-color .3s;
  overflow: hidden;
}
.ng-game-info {
  grid-column: 1; grid-row: 1;
  display: flex; flex-direction: column; justify-content: center;
  gap: 6px; padding: 18px 24px 18px 20px;
  border-right: 1px solid var(--border); min-width: 0;
}
.ng-label {
  font-family: var(--font-mono);
  font-size: 9px; font-weight: 700; letter-spacing: 0.16em;
  color: var(--text2); text-transform: uppercase;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.ng-matchup-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.ng-ha-badge {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  padding: 2px 7px; border-radius: 2px; flex-shrink: 0;
  text-transform: uppercase; line-height: 1.4;
}
.ng-ha-badge.home { background: rgba(var(--team-r),var(--team-g),var(--team-b),0.12); color: var(--team); border: 1px solid rgba(var(--team-r),var(--team-g),var(--team-b),0.35); font-weight: 700; }
.ng-ha-badge.away { background: rgba(90,110,140,0.12); color: #6B8BAF; border: 1px solid rgba(90,110,140,0.30); font-weight: 700; }
.ng-opponent { font-family: var(--font-body); font-size: 14px; font-weight: 700; color: var(--text); line-height: 1; white-space: nowrap; letter-spacing: -0.01em; }
.ng-meta { font-family: var(--font-mono); font-size: 10px; color: var(--text2); letter-spacing: 0; line-height: 1.3; }
.ng-pitchers {
  grid-column: 2 / 4; grid-row: 1;
  display: grid; grid-template-columns: 1fr 1fr;
  border-right: 1px solid var(--border);
}
.ng-pitcher {
  display: flex; flex-direction: column; justify-content: center;
  gap: 4px; padding: 18px 20px; min-width: 0;
}
.ng-pitcher + .ng-pitcher { border-left: 1px solid var(--border); }
.ng-pitcher-lbl {
  font-family: var(--font-mono);
  font-size: 9px; font-weight: 700; letter-spacing: 0.16em;
  color: var(--text2); text-transform: uppercase;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.ng-pitcher-name {
  font-family: var(--font-body);
  font-size: 15px; font-weight: 600; color: var(--text);
  line-height: 1.1; margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ng-pitcher-stats { font-family: var(--font-mono); font-size: 11px; color: var(--text); margin-top: 3px; display: flex; flex-wrap: wrap; gap: 0 6px; row-gap: 2px; }
.ng-pitcher-stat { white-space: nowrap; color: var(--text); }
.ng-pitcher-stat.era-good { color: var(--green); font-weight: 600; }
.ng-pitcher-stat.era-bad  { color: var(--red);   font-weight: 600; }
.ng-pitcher-stat + .ng-pitcher-stat::before { content: '·'; margin-right: 6px; color: var(--border2); }
.ng-park {
  grid-column: 4; grid-row: 1;
  font-family: var(--font-mono);
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  padding: 14px 18px 13px;
}
.ng-park-venue { font-size: 13px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; white-space: nowrap; }
.ng-park-factor-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ng-park-factor-badge {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700; padding: 2px 9px;
  border-radius: 2px; white-space: nowrap; line-height: 1.5;
}
.ng-park-factor-badge.h { color: var(--red);   background: var(--red-bg);   border: 1px solid rgba(168,52,40,0.18); }
.ng-park-factor-badge.p { color: var(--green); background: var(--green-bg); border: 1px solid rgba(37,87,60,0.18); }
.ng-park-factor-badge.n { color: #8A9BB0; background: rgba(90,110,140,0.10); border: 1px solid rgba(90,110,140,0.28); }
.ng-park-note { font-size: 10px; color: var(--text2); line-height: 1.4; font-family: var(--font-mono); }
.ng-split-row {
  grid-column: 1 / -1; grid-row: 2;
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 0;
  border-top: 1px solid var(--border);
  padding: 8px 16px;
  background: var(--s2);
}
.ng-split-lbl {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700; letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--text2);
  margin-right: 12px; white-space: nowrap; flex-shrink: 0;
}
.ng-split-stats-group { display: flex; align-items: center; flex-wrap: wrap; gap: 0; }
.ng-split-stat { font-family: var(--font-mono); font-size: 10px; color: var(--text2); padding: 0 12px; white-space: nowrap; line-height: 1; }
.ng-split-stat + .ng-split-stat { border-left: 1px solid var(--border); }
.ng-split-stat strong { color: var(--text); font-weight: 600; }
.ng-split-stat.good strong { color: var(--green); }
.ng-split-stat.bad  strong { color: var(--red); }
.ng-split-divider { width: 1px; height: 14px; background: var(--border2); margin: 0 4px; flex-shrink: 0; }
.ng-park-val { font-weight: 700; }
.ng-park-val.h { color: var(--red); }
.ng-park-val.p { color: var(--green); }

/* Betting Metrics */
.bet-strip {
  display: flex; gap: 0;
  background: linear-gradient(135deg, #f5ede0 0%, #ecdcc8 40%, #e2ccb4 100%);
  border: 1px solid #d4b896;
  margin-bottom: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.bet-strip::-webkit-scrollbar { display: none; }
.bet-chip {
  flex: 1 1 0%;
  min-width: 0;
  max-width: none;
  background: transparent;
  padding: 14px 18px 13px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 4px;
  border-right: 1px solid rgba(160,110,60,0.18);
  position: relative;
  transition: background .15s ease;
  cursor: default;
}
.bet-chip:hover { background: rgba(160,100,40,0.06); }
.bet-chip:last-child { border-right: none; }
.bet-chip::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: rgba(160,110,60,0.18); }
.bet-chip--good::before { background: #25573c; }
.bet-chip--bad::before  { background: #a83428; }
.bet-chip-lbl {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  color: #3d1f08 !important; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bet-chip-val {
  font-family: var(--font-body);
  font-size: 24px; font-weight: 800; letter-spacing: -0.02em; line-height: 1;
  color: #2a1a0a !important;
}
.bet-chip-val.good { color: #25573c !important; }
.bet-chip-val.bad  { color: #a83428 !important; }
.bet-chip-sub {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 500;
  color: #3d1f08 !important; line-height: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-transform: uppercase;
}
.bet-chip-ou { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; }
.bet-chip-ou-count {
  font-family: var(--font-body);
  font-size: 20px; font-weight: 800; letter-spacing: -0.02em; line-height: 1;
  color: #2a1a0a !important;
}
.bet-chip-ou-word {
  font-family: var(--font-mono);
  font-size: 9px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; line-height: 1; color: #6b4423 !important;
}
.bet-chip-ou-over  .bet-chip-ou-count { color: #25573c !important; }
.bet-chip-ou-over  .bet-chip-ou-word  { color: #25573c !important; }
.bet-chip-ou-under .bet-chip-ou-count { color: #a83428 !important; }
.bet-chip-ou-under .bet-chip-ou-word  { color: #a83428 !important; }
.bet-chip-ou-bar {
  width: 100%; height: 7px;
  background: rgba(160,110,60,0.60);
  border-radius: 0;
  overflow: hidden; margin: 6px 0 0; display: flex;
  position: relative;
}
.bet-chip-ou-bar::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    to right,
    transparent 0px, transparent 7px,
    rgba(240,226,206,0.5) 7px, rgba(240,226,206,0.5) 8px
  );
  z-index: 2; pointer-events: none;
}
.bet-chip-ou-bar-over  { background: #25573c; height: 100%; transition: width .5s cubic-bezier(.4,0,.2,1); }
.bet-chip-ou-bar-under { background: #a83428; height: 100%; transition: width .5s cubic-bezier(.4,0,.2,1); }
.bet-chip-ou-sep { width: 1px; height: 18px; background: rgba(160,110,60,0.30); flex-shrink: 0; align-self: center; margin: 0 2px; }
.bet-chip-ou-push-note {
  font-family: var(--font-mono);
  font-size: 9px; font-weight: 600; color: #9a7050 !important;
  margin-top: 3px; line-height: 1;
}
@media (max-width: 600px) {
  .bet-strip { display: flex; flex-wrap: wrap; overflow-x: visible; }
  .bet-chip { flex: 0 0 50%; max-width: 50%; border-right: none; border-bottom: 1px solid rgba(160,110,60,0.18); box-sizing: border-box; padding: 12px 14px; }
  .bet-chip:nth-child(odd) { border-right: 1px solid rgba(160,110,60,0.18); }
  .bet-chip-lbl { white-space: normal; overflow: visible; text-overflow: unset; font-size: 9px; }
  .bet-chip-sub { white-space: normal; overflow: visible; text-overflow: unset; }
  .bet-chip-val { font-size: 22px; }
  .bet-chip-ou-count { font-size: 18px; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .bet-strip { flex-wrap: wrap; overflow-x: visible; }
  .bet-chip { flex: 0 0 25%; min-width: 0; max-width: 25%; padding: 12px 14px 11px; border-bottom: 1px solid rgba(160,110,60,0.18); }
  .bet-chip-val { font-size: 20px; }
  .bet-chip-ou-count { font-size: 17px; }
}
/* Prop Research Drawer */
#propDrawerBd {
  position: fixed; inset: 0;
  background: rgba(30,24,18,.46);
  backdrop-filter: blur(4px);
  z-index: 200; opacity: 0; pointer-events: none;
  transition: opacity .24s ease;
}
#propDrawerBd.open { opacity: 1; pointer-events: auto; }
#propDrawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(640px, 100vw);
  background: var(--surface);
  border-left: 2px solid var(--border2);
  z-index: 201;
  transform: translateX(100%);
  transition: transform .32s cubic-bezier(.16,1,.3,1);
  display: flex; flex-direction: column;
  overflow: hidden;
}
#propDrawer.open { transform: translateX(0); }

.pd-pull-handle { display: none; width: 36px; height: 4px; background: var(--border2); margin: 10px auto 4px; flex-shrink: 0; }

/* ─── Prop Drawer Header ──────────────────────────────────────────────────── */
.pd-header {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 48px 0 20px;
  border-bottom: 2px solid var(--team);
  background: linear-gradient(135deg, rgba(var(--team-r),var(--team-g),var(--team-b),.13) 0%, var(--surface) 60%);
  flex-shrink: 0;
  position: relative; overflow: hidden;
}
.pd-header::before { display: none; }
.pd-header::after {
  content: '';
  position: absolute; top: 0; right: 0;
  width: 200px; height: 100%;
  background: linear-gradient(to left, rgba(var(--team-r),var(--team-g),var(--team-b),.05) 0%, transparent 100%);
  pointer-events: none;
}
.pd-header-inner { flex: 1; min-width: 0; position: relative; z-index: 1; }
.pd-team-tag {
  font-family: var(--font-mono);
  font-size: 9px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--team);
  margin-bottom: 5px; line-height: 1;
}
.pd-name {
  font-family: var(--font-display);
  font-size: 30px; letter-spacing: .04em;
  color: var(--text); line-height: 1; margin-bottom: 8px;
}
.pd-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 12px; }
.pd-key-stats {
  display: grid; grid-template-columns: repeat(4,1fr);
  background: transparent;
  border-top: 1px solid var(--border);
}
.pd-ks-item {
  padding: 8px 10px; text-align: center;
  border-right: 1px solid var(--border);
  transition: background .12s;
}
.pd-ks-item:last-child { border-right: none; }
.pd-ks-item:hover { background: rgba(var(--team-r),var(--team-g),var(--team-b),.04); }
.pd-ks-val {
  font-family: var(--font-mono);
  font-size: 16px; font-weight: 700; color: var(--text);
  line-height: 1; display: block; margin-bottom: 3px;
}
.pd-ks-val.good { color: var(--green); }
.pd-ks-val.bad  { color: var(--red); }
.pd-ks-lbl {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text2); display: block;
}
.pd-close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 28px; height: 28px;
  border: 1px solid #E05A14; background: #2E2218;
  cursor: pointer; color: var(--on-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 400; line-height: 1;
  transition: background .12s, color .12s, border-color .12s;
  flex-shrink: 0;
}
.pd-close:hover { background: #3A2A1A; color: var(--team); border-color: var(--team); }
/* Prop Drawer Body */
.pd-body { flex: 1; overflow-y: auto; padding: 0; }
.pd-body::-webkit-scrollbar { width: 4px; }
.pd-body::-webkit-scrollbar-track { background: var(--s2); }
.pd-body::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }

/* Prop Tabs */
.pd-prop-tabs {
  display: flex; flex-wrap: wrap; overflow-x: auto;
  padding: 10px 12px; gap: 5px;
  border-top: 2px solid var(--team);
  border-bottom: 1px solid #5C4535;
  background: #1A1510; scrollbar-width: none;
  max-height: 160px; overflow-y: auto;
}
.pd-prop-tabs::-webkit-scrollbar { display: none; }
.pd-prop-tab {
  font-family: var(--font-mono);
  display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  padding: 9px 12px 8px;
  border: 1.5px solid #5C4535; background: #2E2218; cursor: pointer;
  transition: border-color .15s, background .15s;
  flex-shrink: 0; touch-action: manipulation; min-width: 0;
}
.pd-prop-tab:hover { border-color: rgba(224,90,20,.7); background: #3A2A1A; }
.pd-prop-tab.active { border: 1.5px solid var(--team); background: #3A2A1A; }
.pd-tab-lbl {
  font-size: 9px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; white-space: nowrap;
  color: var(--on-dark); display: block; line-height: 1;
}
.pd-prop-tab.active .pd-tab-lbl { color: var(--team); }
.pd-tab-rate {
  font-size: 16px; font-weight: 700; color: var(--team);
  display: block; line-height: 1;
}
.pd-tab-bar {
  display: block; width: 100%; height: 3px;
  background: #3A2A1A; margin-top: 2px;
}
.pd-tab-bar-fill { display: block; height: 100%; background: rgba(224,90,20,.55); }
.pd-prop-tab.active .pd-tab-bar { background: rgba(224,90,20,.2); }
.pd-prop-tab.active .pd-tab-bar-fill { background: var(--team); }

/* Hit Rate Section */
.pd-rate-section {
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 18px;
}
.pd-rate-left { flex-shrink: 0; }
.pd-rate-pct {
  font-family: var(--font-display);
  font-size: 60px; letter-spacing: .02em; line-height: 1;
  color: var(--text); display: block;
}
.pd-rate-pct.hit  { color: var(--green); }
.pd-rate-pct.miss { color: var(--red); }
.pd-rate-pct.mid  { color: var(--amber); }
.pd-rate-frac {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600; color: var(--text2);
  display: block; margin-top: 2px;
}
.pd-rate-right {
  flex: 1; min-width: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
.pd-rate-win {
  padding: 10px 11px;
  background: var(--s2); border: 1px solid var(--border);
  border-top: 2px solid var(--border2);
  transition: border-top-color .2s;
}
.pd-rate-win.hit  { border-top-color: var(--green); }
.pd-rate-win.miss { border-top-color: var(--red); }
.pd-rate-win.mid  { border-top-color: var(--amber); }
.pd-rate-win-lbl {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text2); display: block; margin-bottom: 5px;
}
.pd-rate-win-val { font-family: var(--font-mono); font-size: 17px; font-weight: 700; display: block; }
.pd-rate-win-val.hit  { color: var(--green); }
.pd-rate-win-val.miss { color: var(--red); }
.pd-rate-win-val.mid  { color: var(--amber); }
.pd-rate-win-sub { font-family: var(--font-mono); font-size: 10px; color: var(--text2); margin-top: 3px; display: block; }

/* Chart Section */
.pd-chart-section {
  padding: 14px 20px 10px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
  display: flex; flex-direction: column; align-items: flex-start;
}
.pd-chart-section::-webkit-scrollbar { display: none; }
.pd-chart-wrap { position: relative; }
.pd-chart-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 6px; border-top: 1px solid var(--border);
  background: var(--s2); line-height: 0;
}
.pd-scroll-btn {
  width: 28px; height: 24px;
  background: var(--surface);
  border: 1.5px solid var(--border2);
  border-radius: var(--radius);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; line-height: 0; color: var(--muted);
  transition: background .12s, opacity .16s, color .12s, border-color .12s;
  padding: 0;
}
.pd-scroll-btn:hover { background: var(--s3); color: var(--text); border-color: var(--border2); }
.pd-scroll-btn.pd-scroll-disabled { opacity: .20; pointer-events: none; }
.pd-prop-chart {
  position: relative;
  display: inline-flex; align-items: flex-end; gap: 6px;
  height: 140px; min-width: min-content; max-width: 100%;
  overflow: visible;
}
.pd-chart-line {
  position: absolute; left: 0; right: 0; height: 0;
  border-top: 2px dashed var(--team);
  z-index: 2; pointer-events: none;
}
.pd-chart-line-lbl {
  position: absolute; left: 100%; margin-left: 6px;
  top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700; color: var(--team);
  background: var(--surface);
  border: 1.5px solid var(--team);
  border-radius: var(--radius);
  padding: 2px 5px; white-space: nowrap;
}
.pd-chart-col { display: flex; flex-direction: column; align-items: center; gap: 0; flex-shrink: 0; width: 48px; }
.pd-chart-labels { display: inline-flex; gap: 6px; margin-top: 5px; }
.pd-chart-val {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700; line-height: 1; color: var(--text2);
  margin-bottom: 3px;
}
.pd-chart-bar { width: 36px; min-height: 4px; border-radius: 2px 2px 0 0; }
.pd-chart-bar.hit  { background: var(--green); }
.pd-chart-bar.miss { background: var(--red); }
.pd-chart-bar.zero { background: var(--border); }
.pd-chart-game-lbl {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 600; color: var(--text2);
  white-space: nowrap; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  line-height: 1.3; width: 48px; flex-shrink: 0;
}
.pd-chart-wl { font-family: var(--font-mono); font-size: 10px; font-weight: 700; }
.pd-chart-wl.w { color: var(--green); }
.pd-chart-wl.l { color: var(--red); }

/* Game Log Table */
.pd-gamelog { padding: 0 20px 16px; border-bottom: 1px solid var(--border); }
.pd-gamelog-title {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text2);
  padding-top: 14px; margin-bottom: 10px;
  display: flex; align-items: center; gap: 10px;
}
.pd-gamelog-title::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.pd-gl-scroll { overflow-x: auto; }
.pd-gl-scroll::-webkit-scrollbar { height: 3px; }
.pd-gl-scroll::-webkit-scrollbar-thumb { background: var(--border2); }
.pd-gl-table {
  width: 100%; border-collapse: collapse; min-width: 380px;
  font-family: var(--font-mono); font-size: 11px;
}
.pd-gl-table th {
  padding: 5px 7px; text-align: center;
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text2);
  background: var(--s3); border-bottom: 1.5px solid var(--border2);
  white-space: nowrap;
}
.pd-gl-table th:first-child { text-align: left; min-width: 80px; }
.pd-gl-table td {
  padding: 6px 7px; text-align: center;
  border-bottom: 1px solid var(--border); font-weight: 600;
  transition: background .1s;
}
.pd-gl-table td:first-child { text-align: left; font-size: 11px; }
.pd-gl-table tr:last-child td { border-bottom: none; }
.pd-gl-table tbody tr:nth-child(even) td { background: var(--s2); }
.pd-gl-table tbody tr:hover td { background: rgba(var(--team-r),var(--team-g),var(--team-b),.07); }
.pd-gl-wl { font-weight: 700; }
.pd-gl-wl.w { color: var(--green); }
.pd-gl-wl.l { color: var(--red); }
.pd-gl-hit  { color: var(--green); }
.pd-gl-miss { color: var(--red); }

/* Stats Row */
.pd-stats-row { display: flex; border-bottom: 1px solid var(--border); }
.pd-stat-item {
  flex: 1; padding: 12px 14px;
  border-right: 1px solid var(--border);
  text-align: center; transition: background .12s;
}
.pd-stat-item:last-child { border-right: none; }
.pd-stat-item:hover { background: var(--s2); }
.pd-stat-val {
  font-family: var(--font-mono);
  font-size: 18px; font-weight: 700; color: var(--text);
  line-height: 1; margin-bottom: 3px;
}
.pd-stat-val.good  { color: var(--green); }
.pd-stat-val.bad   { color: var(--red); }
.pd-stat-val.amber { color: var(--amber); }
.pd-stat-lbl {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 600; letter-spacing: 0.07em;
  color: var(--text2); text-transform: uppercase;
}

/* Edge Analysis */
.pd-edge-section { padding: 14px 20px 0; }
.pd-edge-title {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  color: var(--text2); text-transform: uppercase;
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 10px;
}
.pd-edge-title::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.pd-edge-card {
  border: 1px solid var(--border);
  border-left: 3px solid var(--border2);
  padding: 12px 14px;
  background: var(--s2);
  margin-bottom: 10px;
  transition: border-left-color .15s, background .12s;
}
.pd-edge-card:last-child { margin-bottom: 0; }
.pd-edge-card.eb-elite   { border-left-color: #92400E; }
.pd-edge-card.eb-power   { border-left-color: var(--amber); }
.pd-edge-card.eb-high    { border-left-color: var(--green); }
.pd-edge-card.eb-contact { border-left-color: var(--team); }
.pd-edge-card.eb-avg     { border-left-color: var(--border2); }
.pd-edge-card.eb-risk    { border-left-color: #D97706; }
.pd-edge-card.eb-fade    { border-left-color: var(--red); }
.pd-edge-card.eb-small   { border-left-color: var(--border2); }
.pd-edge-desc {
  font-family: var(--font-body);
  font-size: 13px; color: var(--text2); line-height: 1.65; letter-spacing: 0;
}

/* Prop Angles */
.pd-angles-title {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  color: var(--text2); text-transform: uppercase;
  margin-bottom: 10px; padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
}
.pd-angles-title::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.pd-angles-section {
  padding: 0 20px 20px;
  display: flex; flex-direction: column; gap: 0;
}
.pd-angle-item {
  display: flex; flex-direction: column; gap: 0;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.pd-angle-item:last-child { border-bottom: none; }

.pd-angle-label-row {
  display: flex; align-items: center;
  gap: 10px;
  padding: 12px 0 8px;
}

.pd-angle-pill {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 800; letter-spacing: 0.10em;
  text-transform: uppercase; white-space: nowrap;
  padding: 5px 11px; color: #fff; flex-shrink: 0;
  display: inline-flex; align-items: center;
}
.pd-angle-pill::after { display: none; }
.pd-angle-pill.green { background: var(--green); }
.pd-angle-pill.amber { background: var(--amber); }
.pd-angle-pill.red   { background: var(--red); }
.pd-angle-pill.blue  { background: var(--team); }
.pd-angle-pill.gray  { background: var(--muted); color: #fff; }
.pd-angle-text {
  font-family: var(--font-body);
  font-size: 13px; color: var(--text); line-height: 1.60; letter-spacing: 0;
  display: block; padding-bottom: 13px;
  padding-left: 14px;
  border-left: 3px solid var(--muted);
  margin-left: 2px;
}
.pd-angle-item.green .pd-angle-text { border-left-color: var(--green); }
.pd-angle-item.amber .pd-angle-text { border-left-color: var(--amber); }
.pd-angle-item.red   .pd-angle-text { border-left-color: var(--red); }
.pd-angle-item.blue  .pd-angle-text { border-left-color: var(--team); }
.pd-angle-item.gray .pd-angle-text,
.pd-angle-item:not(.green):not(.amber):not(.red):not(.blue) .pd-angle-text {
  border-left-color: var(--muted);
}
/* Mini Bar Charts */
.pd-charts { padding: 16px 20px 12px; border-bottom: 1px solid var(--border); }
.pd-charts-title {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  color: var(--text2); text-transform: uppercase;
  margin-bottom: 12px;
}
.pd-chart-row { display: flex; gap: 12px; }
.pd-chart-item { flex: 1; min-width: 0; }
.pd-chart-label {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--text2); text-transform: uppercase; margin-bottom: 4px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px;
}
.pd-chart-avg {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  color: var(--team); flex-shrink: 0;
}
.pd-bar-chart {
  display: flex; align-items: flex-end; gap: 3px;
  height: 64px; position: relative;
}
.pd-bar-wrap {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-end; gap: 2px;
}
.pd-bar { width: 100%; min-height: 3px; border-radius: 2px 2px 0 0; transition: opacity .12s; }
.pd-bar:hover { opacity: .75; }
.pd-bar-val  { font-family: var(--font-mono); font-size: 10px; font-weight: 600; color: var(--text2); line-height: 1; }
.pd-bar-game { font-family: var(--font-mono); font-size: 10px; color: var(--text2); line-height: 1; margin-top: 2px; }

/* Window Note */
.pd-window-note {
  font-family: var(--font-mono); font-size: 10px; color: var(--text2);
  letter-spacing: 0; padding: 10px 20px 16px; text-align: center;
}
.ref-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.ref-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.ref-col { border-right: 1px solid var(--border); }
.ref-col:last-child { border-right: none; }
.ref-col-hdr {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px 9px;
  background: var(--s2); border-bottom: 1px solid var(--border);
  font-family: var(--font-body);
  font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text2);
}
.ref-col-hdr::before { content: ''; width: 3px; height: 12px; border-radius: 2px; flex-shrink: 0; }
.ref-col--hit .ref-col-hdr { border-top: 2px solid var(--team); }
.ref-col--pit .ref-col-hdr { border-top: 2px solid var(--red); }
.ref-col--mkt .ref-col-hdr { border-top: 2px solid var(--amber); }
.ref-col--hit .ref-col-hdr::before { background: var(--team); }
.ref-col--pit .ref-col-hdr::before { background: var(--red); }
.ref-col--mkt .ref-col-hdr::before { background: var(--amber); }
.ref-row { padding: 16px 20px; border-bottom: 1px solid var(--border); transition: background .12s ease; }
.ref-row:last-child { border-bottom: none; }
.ref-row:hover { background: var(--s2); }
.ref-abbr { font-family: var(--font-mono); font-size: 17px; font-weight: 700; letter-spacing: 0.04em; display: block; line-height: 1; margin-bottom: 4px; }
.ref-col--hit .ref-abbr { color: var(--team); }
.ref-col--pit .ref-abbr { color: var(--red); }
.ref-col--mkt .ref-abbr { color: var(--amber); }
.ref-sep      { display: none; }
.ref-stat-sep { display: none; }
.ref-stat-name {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--text);
  display: block; margin-top: 3px; margin-bottom: 10px;
  padding-bottom: 9px;
  border-bottom: 1px dotted var(--border2);
}
.ref-col--hit .ref-stat-name { border-bottom-color: rgba(var(--team-r),var(--team-g),var(--team-b),0.30); }
.ref-col--pit .ref-stat-name { border-bottom-color: rgba(168,52,40,0.28); }
.ref-col--mkt .ref-stat-name { border-bottom-color: rgba(193,132,0,0.30); }
.ref-stat-def { font-family: var(--font-body); font-size: 13px; font-weight: 400; color: var(--text2); line-height: 1.7; display: block; }
/* Utility Classes */
.loading-state { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 48px 20px; }
.spinner { width: 28px; height: 28px; border: 2px solid var(--border); border-top-color: var(--team); border-radius: 50%; animation: spin .7s linear infinite; }
.loading-text { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--text2); }
.error-state  { padding: 32px 20px; text-align: center; font-family: var(--font-mono); font-size: 12px; color: var(--red); }
.info-state   { padding: 24px 20px; text-align: center; font-family: var(--font-mono); font-size: 11px; color: var(--text2); line-height: 1.7; }

.skeleton {
  background: linear-gradient(90deg, var(--s3) 25%, var(--border) 50%, var(--s3) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite; border-radius: 2px;
}

@keyframes spin    { to { transform: rotate(360deg); } }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes fadeIn  { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

:focus-visible { outline: 2px solid var(--team); outline-offset: 2px; }
.metric-btn:focus-visible { outline: 2px solid var(--team); outline-offset: 2px; }
.mega-trow:focus-visible,
.landing-tile:focus-visible  { outline: 2px solid var(--team); outline-offset: 2px; }
/* Media Queries */
@media (max-width: 1080px) {
  .hdr-groups { margin-left: 0; width: 100%; padding-top: 14px; border-top: 1px solid var(--border); margin-top: 4px; flex-wrap: wrap; gap: 12px; }
}

@media (max-width: 860px) {
  .mega-cols { grid-template-columns: 1fr; }
  .mega-col:first-child { border-right: none; border-bottom: 2px solid var(--border2); }
  .intel-grid { grid-template-columns: 1fr; }
  .team-hdr { gap: 12px 16px; padding: 18px 20px; }
  .team-hdr-identity { gap: 12px; }
  .team-hdr-logo { width: 54px; height: 54px; }
  .team-hdr-name { font-size: 34px; }
  .hdr-stat-bar { overflow-x: auto; scrollbar-width: none; }
  .hdr-stat-bar::-webkit-scrollbar { display: none; }
  .ng-banner { grid-template-columns: 1fr; grid-template-rows: auto; }
  .ng-game-info { grid-column: 1; grid-row: 1; border-right: none; border-bottom: 1px solid var(--border); flex-direction: column; padding: 0; }
  .ng-game-info .ng-matchup-row { padding: 10px 14px 0; }
  .ng-game-info .ng-meta { padding: 4px 14px 12px; }
  .ng-label { margin-right: 0; padding: 10px 14px 5px; }
  .ng-pitchers { grid-column: 1; grid-row: 2; border-right: none; border-bottom: 1px solid var(--border); grid-template-columns: 1fr; }
  .ng-pitcher + .ng-pitcher { border-left: none; border-top: 1px solid var(--border); }
  .ng-pitcher-name { font-size: 14px; }
  .ng-pitcher-stats { font-size: 10px; }
  .ng-park { grid-column: 1; grid-row: 3; flex-direction: column; padding: 0; border-bottom: 1px solid var(--border); }
  .ng-park-venue { font-size: 12px; padding: 0 14px 3px; }
  .ng-park-factor-row { padding: 6px 14px 10px; }
  .ng-park .ng-pitcher-lbl { padding: 10px 14px 5px; }
  .ng-split-row { grid-column: 1; grid-row: 4; padding: 8px 14px; }
  .ref-cols { grid-template-columns: 1fr; }
  .ref-col { border-right: none; border-bottom: 2px solid var(--border2); }
  .ref-col:last-child { border-bottom: none; }
}

@media (max-width: 860px) and (min-width: 681px) {
  .landing-team-grid { grid-template-columns: repeat(4, 1fr); }
  .lt-top { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 4px 8px; align-items: center; }
  .lt-top > img { grid-area: 1 / 1; align-self: center; }
  .lt-record   { grid-area: 1 / 2; justify-self: start; align-self: center; font-size: 9px; padding: 1px 5px; }
  .lt-name     { grid-area: 2 / 1 / 3 / 3; font-size: 12px; line-height: 1.2; white-space: normal; overflow: hidden; }
}

@media (max-width: 680px) {
  :root { --hdr-h: 187px; }
  .main { padding: 10px 10px 16px; }
  .team-hdr { gap: 0; padding: 0; align-items: flex-start; margin-bottom: 14px; }
  .team-hdr-info { flex: 1; min-width: 0; padding: 12px 14px 14px; }
  .team-hdr-identity { gap: 10px; margin-bottom: 0; align-items: center; }
  .team-hdr-logo { width: 32px; height: 32px; flex-shrink: 0; }
  .team-hdr-name { font-size: 28px; letter-spacing: 0.02em; line-height: 1; }
  .hdr-record-row { display: grid; grid-template-columns: auto auto auto; justify-content: start; column-gap: 0; row-gap: 8px; margin-top: 10px; border-top: 1px solid var(--border); padding-top: 10px; }
  .hdr-rec-item { padding: 0 14px 0 0; gap: 1px; border-left: none; }
  .hdr-rec-item + .hdr-rec-item { padding-left: 0; border-left: none; }
  .hdr-rec-item:not(:nth-child(3n+1)) { padding-left: 14px; border-left: 1.5px solid var(--border); }
  .hdr-rec-val  { font-size: 17px; letter-spacing: -0.01em; }
  .hdr-rec-lbl  { font-size: 10px; letter-spacing: 0.05em; }
  .form-strip { gap: 6px; margin-top: 10px; align-items: stretch; flex-wrap: wrap; }
  .momentum-badge { padding: 8px 10px 8px 8px; gap: 8px; }
  .momentum-score { font-size: 22px; }
  .momentum-seg   { width: 5px; height: 12px; }
  .form-blowout-badge { padding: 8px 10px 8px 10px; gap: 4px; }
  .fbb-val            { font-size: 10px; }
  .hdr-groups { gap: 10px; padding: 12px 14px 14px; }
  .hdr-group-label { font-size: 12px; letter-spacing: 0.05em; }
  .hdr-stat-item { padding: 6px 10px; min-width: 52px; }
  .hdr-stat-val { font-size: 20px; }
  .hdr-stat-delta { display: none; }
  .metric-bar { gap: 5px; padding: 8px 12px; overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap; scrollbar-width: none; }
  .metric-bar::-webkit-scrollbar { display: none; }
  .metric-btn { padding: 6px 11px; font-size: 12px; flex-shrink: 0; min-height: 36px; }
  .metric-label { display: none; }
  .heat-cell { width: 48px; height: 28px; font-size: 11px; }
  .hm-table thead th.hm-player-th { width: 140px; min-width: 140px; max-width: 140px; }
  .hm-table tbody td.hm-player-td { width: 140px; min-width: 140px; max-width: 140px; }
  .p-name { font-size: 12px; }
  .hm-avg-cell { font-size: 12px; padding: 0 10px; }
  .hm-legend { font-size: 10px; gap: 8px; padding: 8px 12px; }
  .card-wrap { margin-bottom: 18px; }
  .inn-table thead th.inn-game-th,
  .inn-table tbody td.inn-game-td  { width: 195px; min-width: 195px; }
  .inn-table thead th.inn-game-th  { padding-left: 10px; }
  .inn-table tbody td.inn-game-td  { padding: 4px 8px 4px 10px; }
  .inn-table thead th              { padding: 8px 0; }
  .inn-table tbody td.inn-num      { width: 38px; min-width: 38px; font-size: 11px; height: 32px; }
  .inn-table thead th.inn-spr-th,
  .inn-table tbody td.inn-spr-td,
  .inn-table thead th.inn-tot2-th,
  .inn-table tbody td.inn-tot2-td  { width: 96px; min-width: 96px; padding: 8px 8px; }
  .inn-bet-line                    { font-size: 13px; margin-bottom: 4px; }
  .inn-bet-result                  { font-size: 9px; padding: 2px 5px; letter-spacing: 0; }
  .inn-table tbody td.inn-avg-td   { width: 52px; min-width: 52px; font-size: 11px; padding: 0 4px; }
  .inn-game-meta                   { font-size: 12px; gap: 5px; }
  .inn-opp                         { font-size: 12px; }
  .inn-game-sub                    { font-size: 10px; }
  .inn-wl-badge                    { font-size: 10px; padding: 1px 4px; }
  .landing-hero { margin: 0 0 20px; padding: 40px 18px 36px; min-height: 260px; background-image: url('cover-mobile.png'); background-position: center center; }
  .landing-feat { min-width: calc(50% - 6px); max-width: none; flex: 0 0 calc(50% - 6px); padding: 12px 14px; }
  .landing-team-grid { grid-template-columns: repeat(3, 1fr); gap: 3px; }
  .landing-tile { padding: 8px 9px 7px; touch-action: manipulation; }
  .landing-tile img { width: 24px; height: 24px; }
  .lt-top { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; gap: 3px 6px; align-items: center; }
  .lt-top > img { grid-area: 1 / 1; align-self: center; }
  .lt-record { grid-area: 1 / 2; justify-self: start; align-self: center; font-size: 9px; padding: 1px 5px; }
  .lt-name { grid-area: 2 / 1 / 3 / 3; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mega-divs { flex-direction: column; gap: 2px; }
  .mega-col-inner { padding: 10px 14px 14px; }
  .intel-lean { font-size: 11px; }
  #propDrawer { top: auto; left: 0; right: 0; bottom: 0; width: 100%; height: auto; max-height: 94vh; border-left: none; border-top: 2px solid var(--border2); transform: translateY(100%); overflow: visible; }
  #propDrawer.open { transform: translateY(0); }
  .pd-rate-pct { font-size: 46px; }
  .pd-rate-section { padding: 12px 16px 10px; gap: 12px; }
  .pd-rate-win { padding: 8px 10px; }
  .pd-rate-win-val { font-size: 15px; }
  .pd-header { padding: 10px 48px 12px 14px; }
  .pd-name { font-size: 24px; margin-bottom: 6px; }
  .pd-ks-val { font-size: 14px; }
  .pd-ks-item { padding: 6px 8px; }
  .pd-pull-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 22px;
    background: var(--s2);
    margin: 0;
  }
  .pd-pull-handle::after {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: var(--border2);
  }
  .pd-gamelog                { padding: 0 12px 16px; }
  .pd-gl-table               { min-width: 0; }
  .pd-gl-table th            { padding: 4px 5px; }
  .pd-gl-table th:first-child{ min-width: 60px; }
  .pd-gl-table td            { padding: 4px 5px; }
  .pd-gl-table td:first-child{ font-size: 10px; }
}

@media (max-width: 480px) {
  .ng-pitcher { padding: 10px 14px; }
  .ng-split-stat { padding: 0 8px; font-size: 10px; }
  .ng-opponent { font-size: 14px; }
}

@media (max-width: 360px) {
  .landing-team-grid { grid-template-columns: repeat(2, 1fr); gap: 5px; }
  .landing-feat { flex: 0 0 100%; max-width: 100%; }
}

@media (hover: none) {
  .heat-cell:hover    { opacity: 1; }
  .intel-card:hover   { transform: none; }
  .landing-feat:hover { background: rgba(255,255,255,0.88); }
  .landing-tile:hover { border-color: transparent; background: var(--surface); }
  .momentum-badge     { cursor: default; }
  #mega-bd, #propDrawerBd { backdrop-filter: none; }
}

/* prefers-reduced-motion rules consolidated at end of file */

/* HF Header / Footer */
.hf-header { position: relative; z-index: 100; background: #1A1510; width: 100%; padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.hf-header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: #E05A14;
}

.hf-nav {
  height: 54px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 24px;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

.hf-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; text-decoration: none; margin-right: 4px; }
.hf-brand-logo { width: 38px; height: 38px; object-fit: contain; display: block; flex-shrink: 0; }
.hf-brand-stack { display: flex; flex-direction: column; }
.hf-brand-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: 0.2em;
  line-height: 1;
  color: #ffffff;
  white-space: nowrap;
}
.hf-brand-sub {
  font-family: 'Roboto Mono', monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--on-dark);
  line-height: 1;
  text-transform: uppercase;
  margin-top: 4px;
  white-space: nowrap;
}

.hf-team-btn {
  display: flex;
  align-items: stretch;
  border: 1px solid #5C4535;
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
  height: 32px;
  background: transparent;
  padding: 0;
  max-width: 280px;
  min-width: 160px;
  transition: border-color .16s;
}
.hf-team-btn:hover                              { border-color: #E05A14; }
.hf-team-btn[aria-expanded="true"] .hf-chevron { transform: rotate(180deg); }

.hf-tib {
  width: 36px;
  background: #E05A14;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hf-tib-icon { display: flex; align-items: center; justify-content: center; }
.hf-team-btn.has-team .hf-tib-icon { display: none; }
.hf-tib img { width: 22px; height: 22px; object-fit: contain; display: none; }
.hf-tib-abbr {
  font-family: 'Roboto Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.06em;
  display: none;
  text-align: center;
  line-height: 1;
}
.hf-tib-abbr.visible { display: block; }

.hf-ttb {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  background: #2E2218;
  border-left: 1px solid #5C4535;
  font-family: 'Roboto Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--on-dark);
  white-space: nowrap;
  overflow: hidden;
  min-width: 0;
  flex: 1;
  transition: color .14s;
}
.hf-team-btn.has-team .hf-ttb { color: #ffffff; }
#navTeamName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.hf-chevron {
  flex-shrink: 0;
  margin-left: auto;
  color: currentColor;
  opacity: 0.75;
  transition: transform .24s cubic-bezier(.16,1,.3,1);
}

.hf-spacer { flex: 1; min-width: 0; }

.hf-mode-group,
.hf-window-group {
  position: relative;
  display: flex;
  background: #2E2218;
  border: 1px solid #5C4535;
  padding: 2px;
  flex-shrink: 0;
}
.hf-mode-pill,
.hf-window-pill {
  position: absolute;
  top: 2px; left: 2px;
  height: calc(100% - 4px);
  background: #E05A14;
  pointer-events: none;
}
.hf-mode-pill  { transition: left .24s cubic-bezier(0.34,1.3,0.64,1), width .24s cubic-bezier(0.34,1.3,0.64,1); }
.hf-window-pill{ transition: left .22s cubic-bezier(0.34,1.3,0.64,1), width .22s cubic-bezier(0.34,1.3,0.64,1); }

.hf-mode-btn,
.hf-window-btn {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: 'Roboto Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-dark);
  transition: color .16s, background .16s;
  user-select: none;
  white-space: nowrap;
}
.hf-mode-btn   { gap: 6px; padding: 6px 12px; }
.hf-window-btn { padding: 6px 11px; }
.hf-mode-btn.active,
.hf-window-btn.active                         { color: #ffffff; }
.hf-mode-btn:not(.active):hover,
.hf-window-btn:not(.active):hover             { color: #E05A14; background: rgba(224,90,20,0.12); }

.hf-home-btn {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2E2218;
  border: 1px solid #5C4535;
  color: var(--on-dark);
  text-decoration: none;
  flex-shrink: 0;
  transition: background .16s, border-color .16s, color .16s;
}
.hf-home-btn:hover { background: #E05A14; border-color: #E05A14; color: #ffffff; }

/* Footer */

.hf-footer {
  position: relative;
  background: #17120E;
  background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fff' fill-opacity='0.015'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
  color: var(--on-dark);
  font-family: 'Roboto Mono', monospace;
  width: 100%;
}
.hf-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: #E05A14;
}

.hf-f-inner { max-width: 1400px; margin: 0 auto; padding: 0 max(24px, env(safe-area-inset-right)); padding-left: max(24px, env(safe-area-inset-left)); }
.hf-f-hero  { padding: 48px 0 36px; }

.hf-f-wordmark {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 72px;
  letter-spacing: 0.1em;
  line-height: 0.88;
  color: #ffffff;
}
.hf-f-wordmark span { color: #E05A14; }

.hf-f-tagline {
  font-family: 'Roboto Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #C8C0B4;
  margin-top: 14px;
}

.hf-f-mission {
  font-family: 'Roboto Mono', monospace;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.82;
  color: var(--on-dark);
  margin-top: 16px;
  max-width: 520px;
}

.hf-f-rule { border: none; border-top: 1px solid #5C4535; margin: 0; }

.hf-f-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.hf-f-badge {
  display: flex;
  flex-direction: column;
  padding: 10px 18px 10px 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid #4A3828;
  border-left: 2px solid #4A3828;
  border-radius: 0;
  min-width: 88px;
}
.hf-f-badge-val {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  letter-spacing: 0.06em;
  color: #ffffff;
  line-height: 1;
}
.hf-f-badge-lbl {
  font-family: 'Roboto Mono', monospace;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #C8C0B4;
  margin-top: 5px;
}
.hf-f-badge--blue  .hf-f-badge-val { color: #E05A14; }
.hf-f-badge--amber .hf-f-badge-val { color: #E8A040; }

.hf-f-grid { display: grid; grid-template-columns: repeat(4, 1fr); padding: 48px 0; }
.hf-f-col { padding: 0 36px 0 0; border-right: 1px solid #5C4535; }
.hf-f-col + .hf-f-col { padding-left: 36px; }
.hf-f-col:last-child   { border-right: none; }

.hf-f-col-head {
  display: inline-block;
  font-family: 'Roboto Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  background: #E05A14;
  padding: 4px 9px 3px;
  margin-bottom: 20px;
}

.hf-f-col ul { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.hf-f-col li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Roboto Mono', monospace;
  font-size: 12px;
  font-weight: 400;
  color: #D4CEC6;
  line-height: 1.5;
}
.hf-f-col li::before { content: ''; width: 2px; height: 10px; background: #E05A14; opacity: 1; flex-shrink: 0; }
.hf-f-col a { font-family: 'Roboto Mono', monospace; color: #D4CEC6; text-decoration: none; transition: color .14s, padding-left .14s; }
.hf-f-col a:hover { color: #ffffff; padding-left: 4px; }

.hf-f-about-text {
  font-family: 'Roboto Mono', monospace;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.82;
  color: #D4CEC6;
}

.hf-f-about-link {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  padding: 13px 16px;
  border: 1px solid #E05A14;
  border-radius: 0;
  background: transparent;
  color: #E05A14;
  font-family: 'Roboto Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: color .28s ease;
}
.hf-f-about-link::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #E05A14;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .28s cubic-bezier(0.4,0,0.2,1);
  z-index: 0;
}
.hf-f-about-link:hover::before { transform: scaleX(1); }
.hf-f-about-link:hover { color: #ffffff; }
.hf-f-about-link-icon,
.hf-f-about-link-label,
.hf-f-about-link-arrow { position: relative; z-index: 1; }
.hf-f-about-link-label { flex: 1; }
.hf-f-about-link-arrow { transition: transform .28s cubic-bezier(0.4,0,0.2,1); }
.hf-f-about-link:hover .hf-f-about-link-arrow { transform: translateX(4px); }

.hf-f-disclaimer-wrap { background: #120F0B; border-top: 1px solid #5C4535; }
.hf-f-disclaimer { max-width: 1400px; margin: 0 auto; padding: 32px 24px 36px; }
.hf-f-disclaimer-head {
  display: inline-block;
  font-family: 'Roboto Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  background: #E05A14;
  padding: 4px 9px 3px;
  margin-bottom: 20px;
}
.hf-f-disclaimer-text {
  font-family: 'Roboto Mono', monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.80;
  color: #C8C0B4;
}

.hf-f-bottom-wrap { background: #0F0C09; border-top: 1px solid #5C4535; }
.hf-f-bottom {
  max-width: 1400px;
  margin: 0 auto;
  padding: 14px max(24px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
}
.hf-f-bottom-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  min-width: 0;
}
.hf-f-copyright {
  font-family: 'Roboto Mono', monospace;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: #C8C0B4;
  white-space: nowrap;
}
.hf-f-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Roboto Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #C8C0B4;
  white-space: nowrap;
}
.hf-f-status::before {
  content: '';
  width: 5px; height: 5px;
  background: #6ABF60;
  flex-shrink: 0;
  animation: hf-pulse 2.4s ease-in-out infinite;
}
@keyframes hf-pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.hf-f-build {
  font-family: 'Roboto Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--team);
  border: 1px dotted rgba(224,90,20,.4);
  padding: 4px 8px;
  white-space: nowrap;
}
.hf-back-top {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2E2218;
  border: 1px solid #5C4535;
  color: var(--on-dark);
  cursor: pointer;
  flex-shrink: 0;
  transition: background .16s, border-color .16s, color .16s, transform .16s;
}
.hf-back-top:hover { background: #E05A14; border-color: #E05A14; color: #ffffff; transform: translateY(-2px); }

@media (max-width: 1000px) {
  .hf-f-grid             { grid-template-columns: repeat(2, 1fr); }
  .hf-f-col:nth-child(2) { border-right: none; }
  .hf-f-col:nth-child(3),
  .hf-f-col:nth-child(4) { border-top: 1px solid #5C4535; padding-top: 32px; margin-top: 32px; }
}

@media (max-width: 680px) {
  .hf-nav { height: auto; flex-wrap: wrap; padding: 10px 16px 13px; column-gap: 8px; row-gap: 8px; }
  .hf-brand        { order: 0; }
  .hf-brand-logo   { width: 34px; height: 34px; }
  .hf-home-btn     { order: 1; margin-left: auto; min-width: 44px; min-height: 44px; }
  .hf-spacer       { order: 2; flex: 0 0 100%; height: 0; }
  .hf-team-btn     { order: 3; flex: 0 0 100%; max-width: none; height: 44px; }
  .hf-tib          { width: 48px; }
  .hf-ttb          { font-size: 14px; font-weight: 700; justify-content: center; flex: 1; }
  .hf-mode-group   { order: 4; flex: 1; }
  .hf-window-group { order: 5; flex-shrink: 0; }
  .hf-mode-btn     { flex: 1; justify-content: center; padding: 10px 8px; min-height: 44px; }
  .hf-window-btn             { padding: 10px 5px; min-height: 44px; font-size: 0; letter-spacing: 0; }
  .hf-window-btn::after      { font-size: 10px; letter-spacing: 0.05em; font-family: 'Roboto Mono', monospace; font-weight: 600; }
  .hf-window-btn[data-n="5"]::after  { content: "5"; }
  .hf-window-btn[data-n="10"]::after { content: "10"; }
  .hf-window-btn[data-n="15"]::after { content: "15"; }
  .hf-window-btn.active[data-n="5"]::after  { content: "LAST 5"; }
  .hf-window-btn.active[data-n="10"]::after { content: "LAST 10"; }
  .hf-window-btn.active[data-n="15"]::after { content: "LAST 15"; }
  .hf-f-wordmark   { font-size: 52px; }
  .hf-f-hero       { padding: 36px 0 28px; }
  .hf-f-col + .hf-f-col { padding-left: 24px; }
  .hf-f-col              { padding-right: 24px; }
}

@media (max-width: 640px) {
  .pd-prop-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    max-height: none;
  }
}

@media (max-width: 420px) {
  .hf-f-grid             { grid-template-columns: 1fr; }
  .hf-f-col              { border-right: none; border-top: 1px solid #5C4535; padding: 24px 0 0; margin-top: 0; }
  .hf-f-col:first-child  { border-top: none; padding-top: 0; }
  .hf-f-col + .hf-f-col  { padding-left: 0; }
  .hf-f-col:nth-child(3),
  .hf-f-col:nth-child(4) { margin-top: 0; padding-top: 24px; }
  .hf-f-wordmark         { font-size: 36px; }
  .hf-f-about-link       { width: 100%; }
}

@media (orientation: landscape) and (max-height: 768px) {
  :root { --hdr-h: 92px; }
  .hf-brand-sub  { display: none; }
  .hf-brand-logo { width: 28px; height: 28px; }
  .hf-spacer     { display: none; }
  .hf-home-btn   { min-height: 36px; min-width: 36px; }
  .hf-team-btn   { flex: 0 1 140px; max-width: 140px; height: 38px; }
  .hf-mode-btn   { padding: 7px 8px; min-height: 38px; }
  .hf-window-btn             { padding: 7px 4px; min-height: 38px; font-size: 0; letter-spacing: 0; }
  .hf-window-btn::after      { font-size: 9px; letter-spacing: 0.08em; font-family: 'Roboto Mono', monospace; font-weight: 600; }
  .hf-window-btn[data-n="5"]::after  { content: "5"; }
  .hf-window-btn[data-n="10"]::after { content: "10"; }
  .hf-window-btn[data-n="15"]::after { content: "15"; }
  .hf-window-btn.active[data-n="5"]::after  { content: "LAST 5"; }
  .hf-window-btn.active[data-n="10"]::after { content: "LAST 10"; }
  .hf-window-btn.active[data-n="15"]::after { content: "LAST 15"; }
  .landing-team-grid { grid-template-columns: repeat(5, 1fr); }
  #mega-drop { max-height: calc(100svh - 92px); }
  #propDrawer {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    max-height: 88svh;
    border-left: none;
    border-top: 2px solid var(--border2);
    transform: translateY(100%);
    overflow: visible;
  }
  #propDrawer.open { transform: translateY(0); }
  #propDrawerBd { backdrop-filter: none; }
  .main { padding: 8px 10px 12px; }
}

@media (orientation: landscape) and (max-height: 768px) and (max-width: 1000px) {
  .lt-top {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 3px 6px;
    align-items: center;
  }
  .lt-top > img { grid-area: 1 / 1; align-self: center; width: 24px; height: 24px; }
  .lt-record   { grid-area: 1 / 2; justify-self: start; align-self: center; font-size: 9px; padding: 1px 5px; }
  .lt-name     { grid-area: 2 / 1 / 3 / 3; font-size: 11px; line-height: 1.2; white-space: normal; overflow: hidden; }
}

@media (orientation: landscape) and (max-height: 768px) and (min-width: 1024px) {
  :root { --hdr-h: 57px; }
  #mega-drop { max-height: calc(100svh - 57px); }
  #propDrawer {
    top: 0;
    left: auto;
    right: 0;
    bottom: 0;
    width: min(640px, 50vw);
    height: 100%;
    max-height: none;
    border-left: 2px solid var(--border2);
    border-top: none;
    transform: translateX(100%);
    overflow: visible;
  }
  #propDrawer.open { transform: translateX(0); }
}

/* Betting Systems */

#sysSection {
  max-width: 1520px;
  margin: 56px auto 0;
  padding: 0 0 72px;
  position: relative;
  z-index: 1;
}

.sys-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--border);
  padding-top: 20px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.sys-header-left { display: flex; flex-direction: column; gap: 6px; }
.sys-header-eyebrow {
  font: 700 10px/1 var(--font-mono);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--team);
}
.sys-header-title {
  margin: 0;
  font: normal 42px/1 var(--font-display);
  letter-spacing: .05em;
  color: var(--text);
}
.sys-header-sub {
  font: 500 10px/1.5 var(--font-mono);
  color: var(--text2);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.sys-header-pip {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 600 10px/1 var(--font-mono);
  color: var(--text2);
  letter-spacing: .08em;
  text-transform: uppercase;
  align-self: flex-end;
  padding-bottom: 4px;
}
.sys-header-pip-dot {
  width: 6px; height: 6px;
  background: #4ade80;
  flex-shrink: 0;
  animation: pip 2.4s ease-in-out infinite;
}
@keyframes pip { 0%,100%{opacity:1} 50%{opacity:.3} }

/* Divider between sections */
.sys-divider {
  display: flex;
  align-items: center;
  margin: 0 0 16px;
  grid-column: 1 / -1;
}
.sys-divider-lbl {
  font: 700 9px/1 var(--font-mono);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--text);
  background: var(--s3);
  border: 1px solid var(--border2);
  border-right: none;
  padding: 5px 12px;
  white-space: nowrap;
}
.sys-divider-tag {
  font: 600 9px/1 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text2);
  background: var(--s2);
  border: 1px solid var(--border);
  border-left: none;
  padding: 5px 10px;
  white-space: nowrap;
}
.sys-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* Mobile nav tabs (hidden on desktop) */
.sys-nav-tabs {
  display: none;
  gap: 4px;
  overflow-x: auto;
  padding: 0 0 10px;
  scrollbar-width: none;
  margin-bottom: 10px;
}
.sys-nav-tabs::-webkit-scrollbar { display: none; }
.sys-nav-tab {
  background: var(--surface);
  border: 1px solid var(--border2);
  padding: 7px 12px;
  font: 700 9px/1 var(--font-mono);
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: .07em;
  white-space: nowrap;
  cursor: pointer;
  border-radius: 0;
  touch-action: manipulation;
  transition: background .12s, color .12s, border-color .12s;
  flex-shrink: 0;
}
.sys-nav-tab.active {
  background: var(--dk);
  color: var(--dk-t);
  border-color: var(--dk);
}

/* 2-col grid on desktop */
.sys-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 16px;
}
.sys-group { display: flex; flex-direction: column; }
.sys-unit  { display: flex; flex-direction: column; }
.sys-card {
  background: var(--dk);
  border-top: 1px solid var(--dk-bd);
  border-left: 3px solid var(--team);
  border-right: 1px solid var(--dk-bd);
  padding: 20px 20px 16px;
  position: relative;
  overflow: hidden;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}
.sys-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.sys-left { display: flex; align-items: center; gap: 12px; }
.sys-num {
  font-family: var(--font-display);
  font-size: 54px;
  line-height: .9;
  color: var(--team);
  letter-spacing: .02em;
  flex-shrink: 0;
  user-select: none;
}
.sys-titles { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.sys-title {
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: .06em;
  color: var(--dk-t);
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sys-sub {
  font: 600 10px/1 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--team);
}
.sys-badge {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: .06em;
  line-height: 1;
  color: var(--team);
  border: 1.5px solid rgba(224,90,20,.55);
  background: rgba(224,90,20,.11);
  padding: 6px 14px 4px;
  flex-shrink: 0;
  white-space: nowrap;
  align-self: flex-start;
}
.sys-desc {
  font: 400 12.5px/1.72 var(--font-body);
  color: var(--dk-t2);
  margin-bottom: 12px;
}
.sys-how {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.065);
  border-left: 2px solid rgba(224,90,20,.45);
  padding: 9px 12px;
  margin-bottom: 13px;
}
.sys-how-lbl {
  font: 700 9px/1.5 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--team);
  white-space: nowrap;
  flex-shrink: 0;
  padding-top: 1px;
}
.sys-how-txt {
  font: 400 11px/1.65 var(--font-body);
  color: var(--dk-t2);
}
.sys-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 13px; }
.sys-leg-item { display: flex; align-items: center; gap: 6px; }
.sys-leg-sw { width: 22px; height: 11px; flex-shrink: 0; }
.sys-leg-lbl { font: 500 10px/1 var(--font-mono); color: var(--dk-t2); white-space: nowrap; }
.t-yrfi-0  { background: rgb(110,65,12);   color: #fff; }
.t-yrfi-1  { background: rgb(140,80,0);    color: #fff; }
.t-yrfi-2  { background: rgb(240,165,0);   color: #1a0800; }
.t-yrfi-3p { background: rgb(255,200,50);  color: #1a0800; }
.t-nrfi-0  { background: rgb(0,72,58);     color: #fff; }
.t-nrfi-1  { background: rgb(5,132,115);   color: #fff; }
.t-nrfi-2  { background: rgb(18,172,152);  color: #002e27; }
.t-nrfi-3p { background: rgb(40,185,165);  color: #002e27; }
.t-h-0     { background: rgb(255,212,172); color: #581600; }
.t-rbi-0   { background: rgb(188,212,248); color: #010A3E; }
.t-hr-0    { background: rgb(235,198,145); color: #321600; }
.t-tb-0    { background: rgb(180,240,252); color: #003A5F; }
.t-h-1     { background: rgb(248,135,57);  color: #581600; }
.t-h-2     { background: rgb(209,81,17);   color: #fff; }
.t-h-3p    { background: rgb(115,38,8);    color: #fff; }
.t-rbi-1   { background: rgb(71,135,221);  color: #010A3E; }
.t-rbi-2   { background: rgb(11,57,151);   color: #fff; }
.t-rbi-3p  { background: rgb(8,22,85);     color: #fff; }
.t-hr-1    { background: rgb(158,97,14);   color: #fff; }
.t-hr-2p   { background: rgb(75,38,5);     color: #fff; }
.t-tb-1    { background: rgb(60,216,240);  color: #003A5F; }
.t-tb-2    { background: rgb(0,177,212);   color: #fff; }
.t-tb-4p   { background: rgb(0,80,122);    color: #fff; }
.sys-meta {
  border-top: 1px solid rgba(58,43,30,.8);
  padding-top: 10px;
  font: 600 9.5px/1.4 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dk-t2);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.sys-meta-dot { color: var(--team); font-size: 12px; line-height: 1; }

.sys-sec {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 2px solid var(--dk-bd);
  flex: 1;
  overflow: hidden;
}
.sys-sec-hdr {
  display: grid;
  grid-template-columns: var(--sys-g);
  align-items: center;
  height: 32px;
  background: var(--s2);
  border-bottom: 1px solid var(--border);
}
.ssh-rk {
  display: flex; align-items: center; justify-content: center;
  height: 100%; border-right: 1px solid var(--border);
  font: 700 10px/1 var(--font-mono); color: var(--text);
}
.ssh-name {
  display: flex; align-items: center;
  padding: 0 10px; height: 100%;
  border-right: 1px solid var(--border);
  overflow: hidden; min-width: 0;
}
.ssh-lbl { font: 700 10px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text); white-space: nowrap; }
.ssh-tiles {
  display: flex; align-items: center;
  padding: 0 12px; height: 100%;
  border-right: 1px solid var(--border);
  overflow: hidden;
}
.ssh-dir { font: 600 9px/1 var(--font-mono); color: var(--text2); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.ssh-rate {
  display: flex; align-items: center; justify-content: center;
  padding: 0 12px; height: 100%;
}
.ssh-rate-lbl { font: 700 10px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text); }
.sys-row {
  display: grid;
  grid-template-columns: var(--sys-g);
  grid-template-rows: 40px;
  align-items: stretch;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
  transition: background .18s cubic-bezier(.16,1,.3,1);
}
.sys-row:last-child { border-bottom: none; }
.sys-row-top { display: contents; }

.sys-row-rk {
  grid-column: 1; grid-row: 1;
  display: flex; align-items: center; justify-content: center;
  border-right: 1px solid var(--border);
  transition: border-color .18s;
}
.sys-rk { font: 700 13px/1 var(--font-body); text-align: center; }
.sys-rk-1 { color: #b8580e; }
.sys-rk-2 { color: #5a5650; }
.sys-rk-3 { color: #7a5c32; }
.sys-rk-n { color: var(--text2); }

.sys-row-l {
  grid-column: 2; grid-row: 1;
  display: flex; align-items: center; gap: 7px;
  padding: 0 10px;
  border-right: 1px solid var(--border);
  min-width: 0;
  transition: border-color .18s;
}
.sys-logo { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; }
.sys-logo--pl { display: none; }
.sys-iname {
  font: 700 13px/1 var(--font-body);
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: .01em;
  transition: color .18s;
  flex: 1; min-width: 0;
}
.sys-team-badge { display: none; }
.sys-row-tiles {
  grid-column: 3; grid-row: 1;
  display: flex; align-items: stretch; gap: 1px;
  padding: 5px 8px;
  border-right: 1px solid var(--border);
  overflow: hidden; min-width: 0;
  transition: border-color .18s;
}
.sys-tl {
  flex: 1; min-width: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font: 700 10px/1 var(--font-mono);
  cursor: default; user-select: none;
  transition: filter .15s ease;
}
.sys-tl:hover { filter: brightness(1.12) saturate(1.08); }
.sys-row-r {
  grid-column: 4; grid-row: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 0 12px;
}
.sys-rate {
  font-family: var(--font-display);
  font-size: 22px; letter-spacing: .04em;
  white-space: nowrap; line-height: 1;
  transition: color .18s;
}

.sys-row-empty {
  padding: 20px;
  text-align: center;
  font: 500 11px/1 var(--font-mono);
  color: var(--text2);
}

@media (hover: hover) {
  .sys-row:hover { background: #bfb5a8; box-shadow: inset 3px 0 0 var(--team); transition: background .12s, box-shadow .12s; }
  .sys-row:hover .sys-iname { color: var(--team); }
  .sys-row:hover .sys-row-rk { border-right-color: var(--border2); }
  .sys-row:hover .sys-row-l  { border-right-color: var(--border2); }
  .sys-row:hover .sys-row-tiles { border-right-color: var(--border2); }
  .sys-row:hover .sys-rate { color: var(--team); }
  .sys-row:hover .sys-logo { transform: scale(1.12); }
}

/* Rate colors */
.sys-rc-gold   { color: #c87800; }
.sys-rc-amber  { color: #b45309; }
.sys-rc-teal   { color: #0d9488; }
.sys-rc-fire   { color: #c04c0a; }
.sys-rc-cobalt { color: #1d4ed8; }
.sys-rc-sky    { color: #0284c7; }
.sys-rc-copper { color: #8a4e05; }
.sys-rc-aqua   { color: #007a94; }
.sys-rc-dark   { color: var(--text2); }

/* ===== Systems — accordion drawers ===== */
.sys-acc { display: block; }
.sys-acc:focus-visible { outline: 2px solid var(--team); outline-offset: -2px; }
.sys-acc .sys-row { cursor: pointer; }
.sys-acc:last-child .sys-row { border-bottom: none; }
.sys-row-r { gap: 5px; padding: 0 8px; }
.sys-cv { display: inline-flex; align-items: center; color: var(--text2); flex-shrink: 0; transition: transform .26s cubic-bezier(.16,1,.3,1), color .15s; }
.sys-cv svg { display: block; }
.sys-acc:hover .sys-cv { color: var(--team); }
.sys-acc.open .sys-cv { transform: rotate(180deg); color: var(--team); }
.sys-acc.open .sys-row { background: #efe9e0; box-shadow: inset 3px 0 0 var(--team); }
.sys-acc.open .sys-iname { color: var(--team); }

.sys-detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s cubic-bezier(.16,1,.3,1); background: var(--s2); }
.sys-acc.open .sys-detail { grid-template-rows: 1fr; }
.sys-detail-inner { overflow: hidden; min-height: 0; }
.sd-pad { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 11px; border-top: 1px solid var(--border); }
.sd-read { font: 500 13px/1.6 var(--font-body); color: var(--text); }
.sd-read b { font-weight: 700; color: var(--text); }
.sd-read .pos { color: var(--green); font-weight: 700; }
.sd-read .neg { color: var(--red); font-weight: 700; }

/* Rich drawer */
.sd-read .sd-line { margin: 0 0 9px; }
.sd-read .sd-line:last-of-type { margin-bottom: 0; }
.sd-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 12px;
}
.sd-stats-6 { grid-template-columns: repeat(3, 1fr); }
.sd-stat {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 9px 6px 7px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 2px solid var(--border2);
}
.sd-stat-v { font: 800 18px/1 var(--font-mono); color: var(--text); letter-spacing: .01em; }
.sd-stat-l { font: 700 8px/1.2 var(--font-mono); letter-spacing: .04em; color: var(--text2); text-transform: uppercase; text-align: center; white-space: nowrap; }
.sd-stat.hot  { border-top-color: var(--red); }
.sd-stat.hot  .sd-stat-v { color: var(--red); }
.sd-stat.cool { border-top-color: #2f6fb0; }
.sd-stat.cool .sd-stat-v { color: #2f6fb0; }
.sd-stat.good { border-top-color: var(--green); }
.sd-stat.good .sd-stat-v { color: var(--green); }
.sd-stat.bad  { border-top-color: var(--red); }
.sd-stat.bad  .sd-stat-v { color: var(--red); }

@media (max-width: 640px) {
  .sd-stats { grid-template-columns: repeat(4, 1fr); gap: 5px; }
  .sd-stat { padding: 8px 4px 6px; }
  .sd-stat-v { font-size: 16px; }
  .sd-stat-l { font-size: 7.5px; letter-spacing: .06em; }
}

@media (max-width: 360px) {
  .sd-stats { grid-template-columns: repeat(2, 1fr); }
  .sd-stats-6 { grid-template-columns: repeat(2, 1fr); }
}
.sd-cta {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 7px;
  font: 700 11px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--dk-t); background: var(--dk); border: none; border-left: 3px solid var(--team);
  padding: 10px 14px; cursor: pointer; transition: background .15s;
}
.sd-cta:hover { background: #3a2a1c; }
.sd-cta:focus-visible { outline: 2px solid var(--team); outline-offset: 2px; }
.sys-rc-green { color: var(--green); }
.sys-rc-red   { color: var(--red); }

/* Desktop tile tooltip */
#sysTip {
  position: fixed; z-index: 9999; pointer-events: none;
  opacity: 0; transform: translateY(3px);
  background: var(--dk); border: 1px solid var(--dk-bd); border-left: 3px solid var(--team);
  padding: 7px 11px; max-width: 280px;
  transition: opacity .1s ease, transform .1s ease;
}
#sysTip.on { opacity: 1; transform: none; }
#sysTip .stl { display: block; font: 600 9px/1.4 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dk-t2); margin-bottom: 3px; }
#sysTip .stv { display: block; font: 700 12px/1.35 var(--font-body); color: var(--dk-t); }

/* prefers-reduced-motion rules consolidated at end of file */

/* Sys section loading skeleton */
.sys-skeleton-row {
  height: 40px;
  background: linear-gradient(90deg, var(--s2) 25%, var(--s3) 50%, var(--s2) 75%);
  background-size: 200% 100%;
  animation: sys-shimmer 1.6s infinite;
  border-bottom: 1px solid var(--border);
}
@keyframes sys-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (min-width: 981px) and (max-width: 1160px) {
  :root { --sys-g: 28px 1fr 80px; }

  .sys-row-tiles { display: none; }
  .ssh-tiles     { display: none; }
  .sys-row-r     { grid-column: 3; }
  .sys-sec       { min-width: 0; overflow: hidden; }
}

@media (min-width: 641px) and (max-width: 980px) {
  :root { --sys-g: 28px 1fr 80px; }

  .sys-grid { grid-template-columns: 1fr; gap: 14px; }
  .sys-sec  { min-width: 0; overflow: hidden; }

  .sys-row-tiles { display: none; }
  .ssh-tiles     { display: none; }
  .sys-row-r     { grid-column: 3; }
}

/* Phone landscape — rotated phone (~844×390). 2-col grid + compact tile strip */
@media (orientation: landscape) and (max-height: 500px) {
  :root { --sys-g: 28px 1fr 60px; }
  .sys-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .sys-row {
    display: flex;
    flex-direction: column;
    height: auto;
    overflow: visible;
    padding: 0;
  }
  .sys-row-top   { display: flex; align-items: center; height: 36px; }
  .sys-row-rk    { width: 26px; flex-shrink: 0; border-right: none; justify-content: center; }
  .sys-row-l     { flex: 1; min-width: 0; padding: 0 8px; border-right: none; }
  .sys-row-r     { grid-column: unset; width: 60px; flex-shrink: 0; padding: 0 8px 0 4px; justify-content: flex-end; }
  .sys-row-tiles {
    display: flex;
    width: 100%;
    height: 8px;
    min-height: 8px;
    max-height: 8px;
    gap: 2px;
    padding: 0 8px;
    margin-bottom: 4px;
    align-items: stretch;
    border-right: none;
    overflow: hidden;
  }
  .sys-row-tiles .sys-tl {
    flex: 1;
    min-height: 0;
    font-size: 0;
    color: transparent;
    overflow: hidden;
  }
  .ssh-tiles { display: none; }
  .sys-rate  { font-size: 15px; }
  .sys-iname { font-size: 12px; }
  .sys-rk    { font-size: 11px; }
  .sys-logo  { width: 15px; height: 15px; }
}

@media (max-width: 640px) {
  :root { --sys-g: 28px 1fr 60px; }

  #sysSection { padding: 0 0 60px; margin-top: 36px; }
  .sys-header            { padding-top: 16px; margin-bottom: 14px; }
  .sys-header-title      { font-size: 28px; }
  .sys-header-pip        { display: none; }
  .sys-nav-tabs          { display: none; }
  .hf-f-wordmark   { font-size: 42px; }
  .hf-f-hero       { padding: 28px 0 24px; }
  .hf-f-badge-val  { font-size: 16px; }
  .hf-f-about-link { width: 100%; }
  .hf-f-disclaimer { padding: 24px 24px 28px; }
  .sys-grid              { grid-template-columns: 1fr; gap: 10px; overflow: clip; }
  .sys-group             { display: block; }
  .sys-unit              { min-width: 0; width: 100%; }
  .sys-divider           { display: none; }
  .landing-divider { gap: 10px; margin-bottom: 10px; }
  .landing-divider-label { font-size: 9px; letter-spacing: 0.08em; white-space: normal; }
  .sys-card    { padding: 12px 12px 10px; margin-bottom: 0; width: 100%; box-sizing: border-box; }
  .sys-top     { overflow: hidden; }
  .sys-left              { min-width: 0; }
  .sys-badge   { font-size: 18px; padding: 4px 9px 3px; white-space: nowrap; }
  .sys-desc    { width: 100%; overflow-wrap: break-word; word-break: break-word; font-size: 11.5px; line-height: 1.6; margin-bottom: 10px; }
  .sys-legend  { width: 100%; gap: 5px 12px; margin-bottom: 10px; }
  .sys-meta    { width: 100%; font-size: 9px; gap: 5px; padding-top: 8px; }
  .sys-how-txt { overflow-wrap: break-word; word-break: break-word; }
  .sys-title   { font-size: 20px; }
  .sys-num     { font-size: 34px; }
  .sys-how     { display: flex; }
  .sys-leg-lbl { font-size: 9.5px; }
  .sys-sec     { min-width: 0; overflow: visible; }
  .sys-row {
    display: flex;
    flex-direction: column;
    height: auto;
    overflow: visible;
    padding: 0;
  }
  .sys-row-top {
    display: flex;
    align-items: center;
    height: 38px;
  }

  .sys-row-rk {
    width: 28px;
    flex-shrink: 0;
    border-right: none;
    justify-content: center;
  }

  .sys-row-l {
    flex: 1;
    min-width: 0;
    padding: 0 8px;
    border-right: none;
  }

  .sys-row-r {
    width: 62px;
    flex-shrink: 0;
    padding: 0 8px 0 4px;
    justify-content: flex-end;
  }

  /* colour tile strip below each row */
  .sys-row-tiles {
    display: flex;
    width: 100%;
    height: 10px;
    min-height: 10px;
    max-height: 10px;
    gap: 2px;
    padding: 0 10px;
    margin-bottom: 7px;
    align-items: stretch;
    border-right: none;
    overflow: hidden;
  }

  .sys-row-tiles .sys-tl {
    flex: 1;
    min-height: 0;
    font-size: 0;
    color: transparent;
    overflow: hidden;
  }

  .sys-tl:hover  { filter: none; }

  .sys-rate  { font-size: 16px; }
  .sys-iname { font-size: 13px; }
  .sys-rk    { font-size: 12px; }
  .sys-sec-hdr { display: none; }
  .sys-logo--pl { display: inline-block; width: 16px; height: 16px; }
  .sys-team-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--team);
    color: #fff;
    font: 700 9px/1 var(--font-mono);
    letter-spacing: .06em;
    padding: 3px 5px 2px;
    flex-shrink: 0;
    white-space: nowrap;
  }
}

@media (max-width: 360px) {
  .sys-row-rk { width: 22px; }
  .sys-row-r  { width: 50px; }
  .sys-num    { font-size: 26px; }
  .sys-rate   { font-size: 13px; }
  .sys-iname  { font-size: 12px; }
}

/* Prop feed */
.prop-feed { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 0 0 4px; }
.prop-feed-empty { font-family: var(--font-mono); font-size: 12px; color: var(--text2); padding: 14px 16px; background: var(--s2); border: 1px solid var(--border); }
.prop-card {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--border2);
  border-radius: 0; padding: 11px 13px; font-family: var(--font-body);
  transition: background .12s ease, border-color .12s ease;
}
.prop-card:hover { background: var(--s2); border-color: var(--border2); }
.prop-card:focus-visible { outline: 2px solid var(--team); outline-offset: -2px; }
.prop-card.eb-elite   { border-left-color: #92400E; }
.prop-card.eb-power   { border-left-color: #C07000; }
.prop-card.eb-high    { border-left-color: var(--green); }
.prop-card.eb-contact { border-left-color: var(--team); }
.prop-card.eb-risk    { border-left-color: #C2610A; }
.prop-card.eb-fade    { border-left-color: var(--red); }
.prop-card.eb-avg, .prop-card.eb-small { border-left-color: var(--border2); }
.pc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.pc-id { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.pc-name { font-size: 15px; font-weight: 800; color: var(--text); letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-pos { font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--text2); letter-spacing: 0.04em; flex-shrink: 0; }
.pc-prop { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; }
.pc-prop-lbl { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--text); letter-spacing: 0.04em; }
.pc-prop-rate { font-family: var(--font-mono); font-size: 15px; font-weight: 800; }
.pc-prop-rate.hit  { color: var(--green); }
.pc-prop-rate.mid  { color: var(--amber); }
.pc-prop-rate.miss { color: var(--red); }
.pc-bar { height: 4px; background: var(--s3); margin-bottom: 9px; overflow: hidden; }
.pc-bar-fill { display: block; height: 100%; }
.pc-bar-fill.hit  { background: var(--green); }
.pc-bar-fill.mid  { background: var(--amber); }
.pc-bar-fill.miss { background: var(--red); }
.pc-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pc-form { display: inline-flex; gap: 3px; flex-shrink: 0; }
.pc-dot { width: 9px; height: 9px; display: inline-block; }
.pc-dot.hit  { background: var(--green); }
.pc-dot.miss { background: var(--red); }
.pc-stat { font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--text2); text-align: right; }
@media (min-width: 760px) {
  .prop-feed { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .skeleton { animation: none; background: var(--s3); }
  .spinner  { animation: none; border-top-color: var(--team); }
  .momentum-fill { transition: none; }
  .ref-row { transition: none; }
  .sys-detail, .sys-cv { transition: none; }
}