/* I Like That Bet Sports Ticker 4.1 — Unified Mobile-Fit Interface */
:root {
  color-scheme: dark;
  --bg: #02050c;
  --bg-deep: #01030a;
  --surface: #07111f;
  --surface-2: #0a1729;
  --surface-3: #0e2036;
  --surface-soft: rgba(10, 23, 41, 0.74);
  --glass: rgba(6, 16, 31, 0.82);
  --glass-strong: rgba(5, 13, 27, 0.96);
  --line: rgba(124, 179, 255, 0.15);
  --line-strong: rgba(87, 211, 255, 0.38);
  --text: #f7fbff;
  --text-soft: #cedced;
  --muted: #7f93ad;
  --muted-2: #5e718a;
  --cyan: #35e7ff;
  --blue: #4f7cff;
  --violet: #9b5cff;
  --pink: #ff4dcd;
  --green: #42efaa;
  --gold: #ffc85a;
  --orange: #ff8a5c;
  --red: #ff5b78;
  --radius-xl: 30px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 11px;
  --shadow-xl: 0 34px 110px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 22px 65px rgba(0, 0, 0, 0.36);
  --shadow-md: 0 12px 36px rgba(0, 0, 0, 0.28);
  --max: 1560px;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { max-width: 100%; }
main, section, article, aside, header, nav, footer, div, form, label { min-width: 0; }
select, button, input { max-width: 100%; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--text);
  font-family: var(--font);
  line-height: 1.45;
  background:
    radial-gradient(circle at 12% -5%, rgba(48, 118, 255, 0.16), transparent 31%),
    radial-gradient(circle at 98% 20%, rgba(161, 66, 255, 0.16), transparent 29%),
    radial-gradient(circle at 50% 105%, rgba(0, 201, 255, 0.08), transparent 30%),
    linear-gradient(180deg, #030711 0%, #050b16 45%, #02050c 100%);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -8;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.017) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(to bottom, #000, transparent 78%);
}
button, select, input { font: inherit; }
button, a { touch-action: manipulation; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
::selection { background: rgba(53,231,255,.26); color: #fff; }

/* Ambient effects */
.fx {
  position: fixed;
  width: 48vw;
  height: 48vw;
  z-index: -7;
  border-radius: 50%;
  filter: blur(110px);
  opacity: .15;
  pointer-events: none;
  animation: drift 15s ease-in-out infinite alternate;
}
.fx--cyan { left: -25vw; top: 8vh; background: #0ddcff; }
.fx--violet { right: -21vw; top: 20vh; background: #853fff; animation-delay: -6s; }
.fx--gold { left: 27vw; bottom: -42vw; background: #ffb84d; opacity: .06; animation-delay: -10s; }
@keyframes drift { from { transform: translate3d(-2%,0,0) scale(.96); } to { transform: translate3d(4%,4%,0) scale(1.05); } }
.stadiumGrid {
  position: fixed;
  inset: 0;
  z-index: -6;
  pointer-events: none;
  opacity: .18;
  background-image: radial-gradient(circle, rgba(98,164,255,.13) 0 1px, transparent 1.5px);
  background-size: 32px 32px;
  mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 72%, transparent);
}
.scanBeam {
  position: fixed;
  left: -12%;
  top: 0;
  z-index: -4;
  width: 124%;
  height: 1px;
  pointer-events: none;
  opacity: .27;
  background: linear-gradient(90deg, transparent, rgba(53,231,255,.6), rgba(155,92,255,.6), transparent);
  box-shadow: 0 0 24px rgba(53,231,255,.35);
  animation: scanPage 12s linear infinite;
}
@keyframes scanPage { from { transform: translateY(0); } to { transform: translateY(100vh); } }

/* Header */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: 82px;
  padding: 11px clamp(14px, 2vw, 30px);
  display: grid;
  grid-template-columns: minmax(250px,.76fr) minmax(280px,1fr) auto;
  align-items: center;
  gap: 16px;
  background: linear-gradient(180deg, rgba(2,6,15,.97), rgba(2,6,15,.87));
  border-bottom: 1px solid rgba(86,176,255,.18);
  backdrop-filter: blur(24px) saturate(135%);
  box-shadow: 0 12px 40px rgba(0,0,0,.28);
}
.topbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  opacity: .68;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--violet), var(--pink), transparent);
}
.brandPanel { min-width: 0; display: flex; align-items: center; gap: 12px; }
.brandLogo { width: 150px; flex: 0 0 auto; filter: drop-shadow(0 0 20px rgba(71,177,255,.16)); }
.brandCopy { min-width: 0; display: grid; gap: 2px; }
.brandCopy strong { overflow: hidden; color: #f7fbff; font-size: .94rem; white-space: nowrap; text-overflow: ellipsis; }
.brandEyebrow { display: flex; align-items: center; gap: 7px; color: #8eecff; font-size: .59rem; font-weight: 950; letter-spacing: .13em; }
.livePulse {
  width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 0 0 rgba(66,239,170,.55);
  animation: pulse 1.8s ease-out infinite;
}
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(66,239,170,.55); } 70% { box-shadow: 0 0 0 9px rgba(66,239,170,0); } 100% { box-shadow: 0 0 0 0 rgba(66,239,170,0); } }
.topbarCenter {
  min-width: 0;
  max-width: 100%;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 9px;
  border: 1px solid rgba(114,172,255,.13);
  border-radius: 999px;
  background: rgba(7,16,31,.58);
}
.healthBadge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  border-radius: 999px;
  font-size: .62rem;
  font-weight: 950;
  letter-spacing: .055em;
  text-transform: uppercase;
  white-space: nowrap;
}
.healthDot { width: 7px; height: 7px; border-radius: 50%; background: #8595a8; box-shadow: 0 0 12px currentColor; }
.healthText { line-height: 1; }
.healthBadge.is-connecting { color: #8edfff; background: rgba(53,231,255,.07); }
.healthBadge.is-connecting .healthDot { background: var(--cyan); }
.healthBadge.is-live { color: var(--green); background: rgba(66,239,170,.07); }
.healthBadge.is-live .healthDot { background: var(--green); }
.healthBadge.is-warning { color: var(--gold); background: rgba(255,200,90,.08); }
.healthBadge.is-warning .healthDot { background: var(--gold); }
.healthBadge.is-error { color: #ff8799; background: rgba(255,91,120,.08); }
.healthBadge.is-error .healthDot { background: var(--red); }
.status { min-width: 0; max-width: 380px; overflow: hidden; color: #8398b1; font-size: .69rem; white-space: nowrap; text-overflow: ellipsis; }
.topbarActions { display: flex; justify-content: flex-end; gap: 8px; }
.iconAction {
  min-height: 42px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid rgba(121,177,255,.16);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
  color: #dceaff;
  font-size: .72rem;
  font-weight: 850;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.iconAction:hover { transform: translateY(-2px); border-color: rgba(53,231,255,.42); box-shadow: 0 10px 28px rgba(26,142,255,.12); }
.iconAction.primaryAction { color: #021017; border-color: transparent; background: linear-gradient(135deg, var(--cyan), #7fb2ff 58%, #b082ff); box-shadow: 0 8px 24px rgba(53,231,255,.16); }
.actionIcon { font-size: 1rem; }

/* Main navigation */
.quickNav {
  position: sticky;
  top: 82px;
  z-index: 90;
  width: min(calc(100% - 26px), var(--max));
  margin: 10px auto 0;
  padding: 6px;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  border: 1px solid rgba(119,178,255,.15);
  border-radius: 15px;
  background: rgba(4,10,22,.84);
  backdrop-filter: blur(20px);
  box-shadow: 0 10px 32px rgba(0,0,0,.22);
}
.quickNav::-webkit-scrollbar { display: none; }
.quickNavLink {
  position: relative;
  min-height: 38px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  border-radius: 10px;
  color: #8094ad;
  font-size: .67rem;
  font-weight: 850;
  letter-spacing: .02em;
  white-space: nowrap;
  transition: .18s ease;
}
.quickNavLink span { color: #586c84; font-size: .56rem; }
.quickNavLink:hover, .quickNavLink.active { color: #fff; background: linear-gradient(135deg, rgba(47,111,255,.18), rgba(126,70,255,.14)); box-shadow: inset 0 0 0 1px rgba(97,174,255,.18); }
.quickNavLink.active::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 1px; height: 2px; border-radius: 99px; background: linear-gradient(90deg, var(--cyan), var(--violet)); box-shadow: 0 0 12px rgba(53,231,255,.5); }

.wrap { width: min(calc(100% - 28px), var(--max)); margin: 16px auto 0; padding-bottom: 28px; display: grid; gap: 22px; }

/* Hero */
.commandHero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0,1.15fr) minmax(400px,.85fr);
  gap: 28px;
  padding: clamp(28px,4vw,56px);
  padding-bottom: 118px;
  border: 1px solid rgba(100,172,255,.23);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 82% 8%, rgba(162,80,255,.22), transparent 25%),
    radial-gradient(circle at 7% 92%, rgba(28,181,255,.18), transparent 34%),
    linear-gradient(125deg, rgba(13,29,59,.97), rgba(6,14,31,.97) 51%, rgba(31,18,62,.93));
  box-shadow: var(--shadow-xl), inset 0 1px 0 rgba(255,255,255,.07);
}
.commandHero::before { content: ""; position: absolute; inset: 0; z-index: -2; opacity: .25; background: repeating-linear-gradient(115deg, transparent 0 64px, rgba(255,255,255,.025) 65px 66px, transparent 67px 132px); }
.commandHero::after { content: ""; position: absolute; width: 610px; height: 610px; right: -270px; bottom: -340px; z-index: -1; border-radius: 50%; border: 1px solid rgba(53,231,255,.18); box-shadow: 0 0 0 54px rgba(53,231,255,.024), 0 0 0 108px rgba(155,92,255,.018); }
.heroNoise { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .11; background-image: radial-gradient(circle at 20% 20%, rgba(255,255,255,.11) 0 1px, transparent 1.2px); background-size: 8px 8px; mask-image: linear-gradient(135deg, #000, transparent 78%); }
.heroCopy { position: relative; z-index: 2; align-self: center; min-width: 0; }
.heroBadgeRow { margin-bottom: 20px; display: flex; flex-wrap: wrap; gap: 7px; }
.heroBadge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 9px; border: 1px solid rgba(119,177,255,.16); border-radius: 999px; background: rgba(4,12,28,.52); color: #95aac4; font-size: .58rem; font-weight: 900; letter-spacing: .09em; }
.heroBadge--live { color: #9affcf; border-color: rgba(66,239,170,.22); }
.heroBadge--source { color: #d5bcff; border-color: rgba(155,92,255,.23); }
.heroKicker { margin: 0 0 6px; color: #78eaff; font-size: .71rem; font-weight: 950; letter-spacing: .18em; text-transform: uppercase; }
.heroCopy h1 { max-width: 10.4ch; margin: 0; font-size: clamp(3rem,5.8vw,6.4rem); line-height: .84; letter-spacing: -.068em; text-wrap: balance; text-shadow: 0 10px 50px rgba(0,0,0,.33); }
.heroCopy h1 span { color: transparent; background: linear-gradient(90deg, #fff 0%, #50e8ff 32%, #748fff 62%, #bd6cff 100%); background-clip: text; -webkit-background-clip: text; filter: drop-shadow(0 0 18px rgba(53,231,255,.12)); }
.heroLead { max-width: 760px; margin: 21px 0 24px; color: #aebfd3; font-size: clamp(.88rem,1.1vw,1.04rem); }

.leagueRail { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.leagueChip {
  min-width: 0;
  min-height: 72px;
  padding: 9px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid rgba(115,176,255,.14);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
  color: #d7e6f8;
  text-align: left;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.leagueChip:hover, .leagueChip.active { transform: translateY(-2px); border-color: rgba(53,231,255,.36); background: linear-gradient(135deg, rgba(24,98,167,.22), rgba(73,42,136,.2)); box-shadow: 0 12px 28px rgba(0,0,0,.2), inset 0 0 0 1px rgba(255,255,255,.025); }
.leagueOrb { width: 41px; height: 41px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 12px; color: #fff; font-size: .58rem; font-weight: 950; letter-spacing: -.02em; box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 10px 22px rgba(0,0,0,.22); }
.leagueOrb--nfl { background: linear-gradient(145deg,#1f63ff,#143070); }
.leagueOrb--nba { background: linear-gradient(145deg,#ff6f2b,#7e2913); }
.leagueOrb--mlb { background: linear-gradient(145deg,#3d82ff,#a92f58); }
.leagueOrb--nhl { background: linear-gradient(145deg,#657488,#111923); }
.leagueChipCopy { min-width: 0; display: grid; gap: 2px; }
.leagueChipCopy strong { overflow: hidden; font-size: .73rem; white-space: nowrap; text-overflow: ellipsis; }
.leagueChipCopy small { overflow: hidden; color: #7389a3; font-size: .55rem; white-space: nowrap; text-overflow: ellipsis; }

/* Player focus */
.focusConsole {
  position: relative;
  align-self: stretch;
  overflow: hidden;
  min-width: 0;
  padding: 20px;
  border: 1px solid rgba(112,181,255,.23);
  border-radius: 24px;
  background: linear-gradient(160deg, rgba(7,18,38,.92), rgba(5,12,27,.9));
  box-shadow: 0 24px 60px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.06);
}
.focusConsoleGlow { position: absolute; width: 210px; height: 210px; top: -105px; right: -80px; border-radius: 50%; background: rgba(155,92,255,.24); filter: blur(52px); pointer-events: none; }
.focusTopline { position: relative; z-index: 1; margin-bottom: 17px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.focusLabel { color: #7087a2; font-size: .58rem; font-weight: 950; letter-spacing: .14em; }
.focusModeBadge { padding: 5px 8px; border: 1px solid rgba(53,231,255,.21); border-radius: 999px; background: rgba(53,231,255,.065); color: #86edff; font-size: .55rem; font-weight: 950; letter-spacing: .07em; }
.focusPlayer { position: relative; z-index: 1; display: flex; align-items: center; gap: 15px; }
.focusPortraitWrap { position: relative; width: 92px; height: 92px; flex: 0 0 auto; }
.focusPortraitPlaceholder, .focusPlayerPortrait { position: absolute; inset: 5px; width: 82px; height: 82px; border-radius: 23px; object-fit: cover; }
.focusPortraitPlaceholder { display: grid; place-items: center; background: linear-gradient(145deg, rgba(53,231,255,.2), rgba(79,124,255,.16) 48%, rgba(155,92,255,.2)); color: #eafaff; font-size: 1.22rem; font-weight: 950; letter-spacing: -.03em; }
.portraitRing { position: absolute; inset: 0; border: 1px solid rgba(53,231,255,.33); border-radius: 28px; box-shadow: 0 0 22px rgba(53,231,255,.11), inset 0 0 24px rgba(155,92,255,.055); animation: portraitGlow 3s ease-in-out infinite alternate; }
@keyframes portraitGlow { from { border-color: rgba(53,231,255,.24); } to { border-color: rgba(155,92,255,.45); box-shadow: 0 0 28px rgba(155,92,255,.16); } }
.focusPlayerCopy { min-width: 0; }
.focusLeague { color: #71eaff; font-size: .56rem; font-weight: 950; letter-spacing: .12em; }
.focusPlayerCopy h2 { margin: 3px 0 4px; overflow: hidden; color: #fff; font-size: clamp(1.45rem,2.5vw,2.15rem); line-height: 1; letter-spacing: -.04em; white-space: nowrap; text-overflow: ellipsis; }
.focusPlayerCopy p { margin: 0; overflow: hidden; color: #8093aa; font-size: .66rem; white-space: nowrap; text-overflow: ellipsis; }
.selectorDeck { position: relative; z-index: 1; margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.filterControl { min-width: 0; padding: 8px 10px; display: grid; gap: 4px; border: 1px solid rgba(120,177,255,.13); border-radius: 12px; background: rgba(255,255,255,.025); }
.filterControl--wide { grid-column: 1 / -1; }
.filterControl > span { color: #617690; font-size: .5rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
.filterControl select { width: 100%; min-width: 0; border: 0; outline: 0; background: #09172a; color: #eff7ff; font-size: .73rem; font-weight: 800; cursor: pointer; }
.filterControl select:focus-visible { outline: 2px solid rgba(53,231,255,.48); outline-offset: 2px; }
.focusActions { position: relative; z-index: 1; margin-top: 9px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.focusActions button { min-height: 41px; border: 1px solid rgba(121,177,255,.14); border-radius: 11px; background: rgba(255,255,255,.03); color: #c9d9ec; font-size: .65rem; font-weight: 900; cursor: pointer; }
.focusActions button:hover { border-color: rgba(53,231,255,.36); background: rgba(53,231,255,.055); }
.focusActions .focusActionPrimary { color: #06101b; border-color: transparent; background: linear-gradient(135deg, #55edff, #7b91ff 58%, #bd75ff); }

.commandMetrics { position: absolute; left: clamp(28px,4vw,56px); right: clamp(28px,4vw,56px); bottom: 24px; z-index: 3; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.commandMetric { position: relative; min-width: 0; min-height: 67px; padding: 11px 12px 10px 38px; display: grid; align-content: center; gap: 2px; overflow: hidden; border: 1px solid rgba(110,170,238,.13); border-radius: 13px; background: rgba(4,12,27,.68); backdrop-filter: blur(13px); }
.metricIndex { position: absolute; left: 11px; top: 11px; color: #4f637b; font-size: .5rem; font-weight: 950; }
.metricLabel { color: #657a93; font-size: .5rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.commandMetric strong { overflow: hidden; color: #e9f4ff; font-size: .84rem; white-space: nowrap; text-overflow: ellipsis; }
.commandMetric.accentMetric { border-color: rgba(53,231,255,.22); background: linear-gradient(135deg, rgba(28,103,143,.18), rgba(31,38,92,.28)); }
.commandMetric.accentMetric strong { color: #7cecff; font-size: 1.05rem; }

/* Integrity */
.integrityStrip { padding: 9px; display: grid; grid-template-columns: minmax(250px,1.35fr) repeat(4,minmax(0,1fr)); gap: 8px; border: 1px solid rgba(110,169,237,.12); border-radius: 18px; background: rgba(5,13,27,.74); box-shadow: var(--shadow-md); }
.integrityLead, .integrityMetric { min-width: 0; min-height: 66px; padding: 11px 13px; border: 1px solid rgba(110,169,237,.09); border-radius: 12px; background: rgba(255,255,255,.018); }
.integrityLead { display: flex; align-items: center; gap: 11px; }
.integrityIcon { width: 32px; height: 32px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 10px; background: rgba(66,239,170,.09); border: 1px solid rgba(66,239,170,.2); color: var(--green); font-weight: 950; }
.integrityLead div { min-width: 0; display: grid; gap: 2px; }
.integrityLead strong { color: #eff7ff; font-size: .77rem; }
.integrityLead small { overflow: hidden; color: #6e829c; font-size: .55rem; white-space: nowrap; text-overflow: ellipsis; }
.integrityMetric { display: grid; align-content: center; gap: 4px; }
.integrityMetric span { color: #5e748e; font-size: .48rem; font-weight: 950; letter-spacing: .1em; }
.integrityMetric strong { overflow: hidden; color: #dcecff; font-size: .68rem; white-space: nowrap; text-overflow: ellipsis; }

/* Section headings */
.scoreboardZone, .workspace, .liveEventsZone { scroll-margin-top: 150px; }
.sectionBar { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.sectionTitleBlock { min-width: 0; display: flex; align-items: flex-start; gap: 11px; }
.sectionNumber { width: 35px; height: 35px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid rgba(53,231,255,.18); border-radius: 11px; background: rgba(53,231,255,.045); color: #71eaff; font-size: .58rem; font-weight: 950; }
.sectionKicker { color: #66dff2; font-size: .52rem; font-weight: 950; letter-spacing: .13em; text-transform: uppercase; }
.sectionBar h2, .panelHeading h3 { margin: 2px 0 0; color: #f5f9ff; letter-spacing: -.035em; }
.sectionBar h2 { font-size: clamp(1.4rem,2.4vw,2rem); }
.sectionBar p, .panelHeading p { margin: 3px 0 0; color: #71869f; font-size: .67rem; }
.sectionMeta { display: inline-flex; align-items: center; gap: 7px; color: #657990; font-size: .59rem; white-space: nowrap; }
.metaDot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px rgba(53,231,255,.55); }
.accuracyLegend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; color: #71859e; font-size: .57rem; }
.accuracyLegend span { display: inline-flex; align-items: center; gap: 6px; }
.legendDot { width: 7px; height: 7px; border-radius: 50%; }
.legendDot--official { background: var(--green); }
.legendDot--derived { background: var(--cyan); }
.legendDot--fallback { background: var(--gold); }

/* Score rail */
.tickerShell { position: relative; overflow: hidden; margin-top: 11px; border: 1px solid rgba(112,176,248,.13); border-radius: 21px; background: linear-gradient(180deg, rgba(8,19,37,.88), rgba(4,10,21,.9)); box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.025); }
.tickerLight { position: absolute; z-index: 0; left: 5%; right: 5%; top: -36px; height: 72px; border-radius: 50%; background: linear-gradient(90deg, rgba(53,231,255,.17), rgba(155,92,255,.15)); filter: blur(28px); pointer-events: none; }
.tickerViewport { position: relative; z-index: 1; overflow: hidden; padding: 12px; }
.tickerTrack { display: flex; align-items: stretch; gap: 9px; width: max-content; min-width: 100%; will-change: transform; }
.scoreCard { width: 296px; min-height: 172px; flex: 0 0 auto; padding: 12px; display: grid; gap: 10px; border: 1px solid rgba(113,174,247,.12); border-radius: 15px; background: linear-gradient(155deg, rgba(14,31,55,.86), rgba(5,13,27,.88)); box-shadow: 0 12px 30px rgba(0,0,0,.19), inset 0 1px 0 rgba(255,255,255,.025); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.scoreCard:hover { transform: translateY(-3px); border-color: rgba(53,231,255,.34); box-shadow: 0 17px 40px rgba(0,0,0,.26), 0 0 30px rgba(53,231,255,.05); }
.scoreCard.is-live { border-color: rgba(66,239,170,.25); box-shadow: 0 14px 36px rgba(0,0,0,.24), inset 0 0 30px rgba(66,239,170,.025); }
.scoreCard.is-final { opacity: .86; }
.scoreCard__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.scoreCard__league { padding: 4px 6px; border-radius: 7px; background: rgba(53,231,255,.07); border: 1px solid rgba(53,231,255,.11); color: #81eaff; font-size: .49rem; font-weight: 950; letter-spacing: .08em; }
.scoreCard__state { overflow: hidden; color: #687e98; font-size: .52rem; font-weight: 800; white-space: nowrap; text-overflow: ellipsis; }
.scoreCard.is-live .scoreCard__state { color: #79f2bd; }
.scoreCard__teams { display: grid; gap: 7px; }
.scoreCard__teamRow { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 8px; }
.scoreCard__team { min-width: 0; display: flex; align-items: center; gap: 8px; }
.scoreCard__logo { width: 29px; height: 29px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; background: rgba(255,255,255,.025); }
.scoreCard__logo img { width: 24px; height: 24px; object-fit: contain; }
.scoreCard__teamName { overflow: hidden; color: #dce8f6; font-size: .68rem; font-weight: 850; white-space: nowrap; text-overflow: ellipsis; }
.scoreCard__score { min-width: 34px; color: #fff; font-size: 1.18rem; font-weight: 950; text-align: right; font-variant-numeric: tabular-nums; }
.scoreCard__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #5b718b; font-size: .5rem; }
.scoreCard__meta span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tickerMessage { width: min(680px,calc(100vw - 60px)); padding: 28px; display: grid; gap: 5px; border: 1px dashed rgba(108,170,240,.16); border-radius: 15px; color: #7f94ad; font-size: .72rem; text-align: center; }
.tickerMessage--error { color: #ff9aaa; border-color: rgba(255,91,120,.19); background: rgba(255,91,120,.03); }
.tickerMessage strong { color: #f3f8ff; }

/* Workspace */
.workspace { display: grid; gap: 11px; }
.analyticsGrid { display: grid; grid-template-columns: minmax(0,1.75fr) minmax(320px,.7fr); gap: 12px; align-items: start; }
.premiumPanel { min-width: 0; border: 1px solid rgba(112,174,245,.12); border-radius: 21px; background: linear-gradient(165deg, rgba(9,21,40,.9), rgba(4,11,24,.92)); box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.027); }
.statsCard { min-height: 560px; padding: 18px; }
.panelHeading { margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panelHeading > div { min-width: 0; }
.panelHeading h3 { font-size: 1.35rem; }
.panelBadge { padding: 5px 8px; border: 1px solid rgba(66,239,170,.16); border-radius: 999px; background: rgba(66,239,170,.055); color: #83f2bd; font-size: .5rem; font-weight: 950; letter-spacing: .07em; white-space: nowrap; }
.compactHeading { margin-bottom: 10px; }
.compactHeading h3 { font-size: 1rem; }

/* Stat controls */
.playerStats { min-width: 0; }
.statsControls { margin-bottom: 13px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.statMode { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid rgba(112,174,245,.11); border-radius: 12px; background: rgba(3,10,22,.55); }
.modeBtn { min-height: 34px; padding: 0 10px; border: 0; border-radius: 9px; background: transparent; color: #70849d; font-size: .61rem; font-weight: 900; cursor: pointer; }
.modeBtn:hover { color: #dbe9f8; background: rgba(255,255,255,.035); }
.modeBtn.active { color: #06121a; background: linear-gradient(135deg, #53ebff, #7f9bff 60%, #bd76ff); box-shadow: 0 6px 18px rgba(53,231,255,.11); }
.presetWrap, .phaseWrap, .opponentWrap { min-width: 0; display: flex; align-items: center; gap: 7px; }
.presetLabel { color: #5d718a; font-size: .49rem; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.presetSelect { min-height: 35px; max-width: 220px; min-width: 120px; padding: 0 30px 0 9px; border: 1px solid rgba(113,174,245,.12); border-radius: 9px; outline: 0; background: #08172a; color: #dce9f8; font-size: .61rem; font-weight: 800; }
.presetSelect:focus-visible { border-color: rgba(53,231,255,.42); box-shadow: 0 0 0 3px rgba(53,231,255,.08); }
.opponentScopeSelect { min-width: 126px; }
.statsContent { min-width: 0; }

.statLine { min-width: 0; padding: 2px 0; }
.statHeader { margin-bottom: 13px; display: flex; align-items: center; gap: 12px; }
.headshot { width: 72px; height: 72px; flex: 0 0 auto; border-radius: 19px; object-fit: cover; border: 1px solid rgba(124,187,255,.2); background: #0a1729; box-shadow: 0 10px 30px rgba(0,0,0,.24); }
.statHeaderText { min-width: 0; flex: 1; }
.statPlayerName { overflow: hidden; color: #f8fbff; font-size: clamp(1.35rem,2.2vw,1.85rem); font-weight: 950; line-height: 1.02; letter-spacing: -.035em; white-space: nowrap; text-overflow: ellipsis; }
.statSubline { margin-top: 4px; color: #7b90aa; font-size: .62rem; }
.statFootnote { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(111,169,236,.08); color: #586d87; }
.statTrustRow { margin-top: 7px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.statTrustBadge { display: inline-flex; padding: 4px 6px; border-radius: 7px; font-size: .48rem; font-weight: 950; letter-spacing: .07em; text-transform: uppercase; }
.statTrustBadge.high { color: #7ff1bc; background: rgba(66,239,170,.07); border: 1px solid rgba(66,239,170,.16); }
.statTrustBadge.standard { color: #7ee8ff; background: rgba(53,231,255,.065); border: 1px solid rgba(53,231,255,.14); }
.statTrustBadge.low { color: #ffd17a; background: rgba(255,200,90,.065); border: 1px solid rgba(255,200,90,.15); }
.statTrustBadge.unavailable { color: #ff8ea1; background: rgba(255,91,120,.06); border: 1px solid rgba(255,91,120,.15); }
.statTrustMeta { color: #637992; font-size: .52rem; }
.statTrustWarning { margin-top: 7px; padding: 7px 8px; border: 1px solid rgba(255,200,90,.13); border-radius: 8px; background: rgba(255,200,90,.035); color: #b8a071; font-size: .54rem; }

.statHighlights { margin: 12px 0; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
.statTile { position: relative; overflow: hidden; min-width: 0; min-height: 96px; padding: 12px; display: grid; align-content: space-between; border: 1px solid rgba(111,174,245,.13); border-radius: 14px; background: linear-gradient(145deg, rgba(12,30,53,.8), rgba(6,15,29,.8)); }
.statTile::after { content: ""; position: absolute; width: 80px; height: 80px; right: -35px; top: -35px; border-radius: 50%; background: rgba(53,231,255,.08); filter: blur(18px); }
.statTile:nth-child(2)::after { background: rgba(79,124,255,.1); }
.statTile:nth-child(3)::after { background: rgba(155,92,255,.1); }
.statTile:nth-child(4)::after { background: rgba(255,77,205,.08); }
.statTileLabel { position: relative; z-index: 1; overflow: hidden; color: #687e97; font-size: .52rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; }
.statTileValue { position: relative; z-index: 1; overflow: hidden; color: #f8fbff; font-size: clamp(1.5rem,2.4vw,2rem); font-weight: 950; line-height: 1; letter-spacing: -.045em; white-space: nowrap; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.statSection { margin-top: 9px; overflow: hidden; border: 1px solid rgba(111,169,236,.09); border-radius: 13px; background: rgba(255,255,255,.014); }
.statSectionTitle { padding: 8px 10px; border-bottom: 1px solid rgba(111,169,236,.08); color: #7790aa; font-size: .54rem; font-weight: 950; letter-spacing: .09em; text-transform: uppercase; background: rgba(255,255,255,.012); }
.statKV { min-width: 0; min-height: 39px; padding: 7px 10px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px; border-bottom: 1px solid rgba(111,169,236,.055); }
.statKV:last-child { border-bottom: 0; }
.statKV span { min-width: 0; overflow: hidden; color: #8296ad; font-size: .61rem; white-space: nowrap; text-overflow: ellipsis; }
.statKV strong { color: #edf6ff; font-size: .68rem; font-weight: 950; font-variant-numeric: tabular-nums; }
.emptyState { padding: 24px 12px; border: 1px dashed rgba(111,169,236,.12); border-radius: 12px; color: #70859f; font-size: .64rem; text-align: center; }

/* Right rail */
.rightRail { position: sticky; top: 136px; display: grid; gap: 12px; }
.dataRadar, .favoritesCard { padding: 15px; }
.radarStatus { display: grid; grid-template-columns: 70px minmax(0,1fr); align-items: center; gap: 12px; padding: 11px; border: 1px solid rgba(111,169,236,.09); border-radius: 13px; background: rgba(255,255,255,.015); }
.radarCore { position: relative; width: 64px; height: 64px; display: grid; place-items: center; border: 1px solid rgba(53,231,255,.18); border-radius: 50%; background: radial-gradient(circle, rgba(53,231,255,.08), transparent 68%); }
.radarCore span { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 18px rgba(53,231,255,.65); }
.radarCore i, .radarCore b { position: absolute; inset: 8px; border: 1px solid rgba(53,231,255,.16); border-radius: 50%; animation: radar 3.8s linear infinite; }
.radarCore b { inset: 17px; border-color: rgba(155,92,255,.19); animation-direction: reverse; animation-duration: 5s; }
@keyframes radar { to { transform: rotate(360deg); } }
.radarStatus small { color: #5d738d; font-size: .49rem; }
.radarStatus strong { display: block; margin-top: 2px; overflow: hidden; color: #e8f4ff; font-size: .75rem; white-space: nowrap; text-overflow: ellipsis; }
.radarStatus p { margin: 4px 0 0; color: #6b819a; font-size: .54rem; line-height: 1.35; }
.radarGrid { margin-top: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.radarGrid > div { min-width: 0; padding: 9px; display: grid; gap: 3px; border: 1px solid rgba(111,169,236,.075); border-radius: 10px; background: rgba(255,255,255,.012); }
.radarGrid span { color: #566d87; font-size: .46rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.radarGrid strong { overflow: hidden; color: #dce9f7; font-size: .62rem; white-space: nowrap; text-overflow: ellipsis; }
.radarNote { margin-top: 8px; display: flex; align-items: flex-start; gap: 7px; padding: 8px; border-radius: 10px; background: rgba(53,231,255,.025); border: 1px solid rgba(53,231,255,.07); }
.radarNote span { width: 18px; height: 18px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: rgba(53,231,255,.08); color: #77eaff; font-size: .54rem; font-weight: 950; }
.radarNote p { margin: 0; color: #60768f; font-size: .51rem; line-height: 1.4; }

.favorites { display: grid; gap: 7px; }
.favItem { min-width: 0; padding: 9px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid rgba(111,169,236,.08); border-radius: 10px; background: rgba(255,255,255,.014); }
.favItem > div { min-width: 0; }
.favItem strong, .favItem small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.favItem strong { color: #dce9f7; font-size: .64rem; }
.favItem small { margin-top: 2px; color: #60758e; font-size: .5rem; }
.favItem button { min-width: 28px; height: 28px; flex: 0 0 auto; border: 1px solid rgba(255,91,120,.12); border-radius: 8px; background: rgba(255,91,120,.035); color: #ff8ca0; cursor: pointer; }
.favPlayer { align-items: flex-start; }
.favStatLine { margin-top: 5px; color: #7b90a9; font-size: .51rem; line-height: 1.35; }
.favFeedWrap { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(111,169,236,.08); }
.favFeedTitle { color: #91a5bc; font-size: .54rem; font-weight: 950; letter-spacing: .06em; text-transform: uppercase; }
.favFeedHint, .favFeedEmpty { margin-top: 6px; color: #61768f; font-size: .53rem; }
.favFeedList { margin-top: 6px; display: grid; gap: 6px; }

/* Favorite player stats and event cards */
.favCoreHeader { display: flex; margin: 7px 0 6px; }
.favCorePill { display: inline-flex; padding: 3px 6px; border: 1px solid rgba(100,178,255,.15); border-radius: 7px; background: rgba(73,130,255,.08); color: #8dc9ff; font-size: .48rem; font-weight: 950; letter-spacing: .07em; }
.favCoreGrid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px; }
.favCoreTile { min-height: 46px; padding: 7px; border: 1px solid rgba(109,168,236,.085); border-radius: 8px; background: rgba(255,255,255,.016); }
.favCoreK { color: #607791; font-size: .49rem; font-weight: 800; text-transform: uppercase; }
.favCoreV { margin-top: 2px; color: #eaf4ff; font-size: .84rem; font-weight: 950; font-variant-numeric: tabular-nums; }
.favCoreLoading, .favCoreEmpty { padding: 7px 0; color: #6d829c; font-size: .54rem; }
.favorite-feed-item, .live-event-card { padding: 8px 9px; border: 1px solid rgba(110,168,235,.09); border-radius: 9px; background: rgba(255,255,255,.017); }
.favorite-feed-item.live, .live-event-card.live { border-color: rgba(66,239,170,.17); background: rgba(66,239,170,.028); }
.favorite-feed-item.final, .live-event-card.final { opacity: .82; }
.favorite-feed-item .event-row, .live-event-card .event-row { color: #9fb2c8; font-size: .56rem; line-height: 1.38; }
.favEventText { margin-top: 4px; }
.feed-pill { display: inline-flex; padding: 3px 5px; border-radius: 6px; background: rgba(53,231,255,.06); border: 1px solid rgba(53,231,255,.1); color: #7cecff; font-size: .47rem; font-weight: 900; }
.favFeedPlayers { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 4px; }
.favFeedChip { padding: 3px 5px; border-radius: 6px; background: rgba(155,92,255,.07); border: 1px solid rgba(155,92,255,.12); color: #bea6e8; font-size: .47rem; font-weight: 800; }

/* Live Center */
.liveEventsZone { display: grid; gap: 11px; }
.liveEventBadge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 9px; border: 1px solid rgba(66,239,170,.13); border-radius: 999px; background: rgba(66,239,170,.035); color: #7ef1bc; font-size: .5rem; font-weight: 950; letter-spacing: .07em; white-space: nowrap; }
.iltb-live-tracker { overflow: hidden; border: 1px solid rgba(112,174,245,.12); border-radius: 21px; background: linear-gradient(160deg, rgba(9,21,40,.92), rgba(4,11,24,.94)); box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.025); }
.iltb-live-tracker__topbar { min-height: 68px; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid rgba(111,169,236,.08); background: rgba(255,255,255,.012); }
.iltb-live-tracker__eyebrow { color: #61def0; font-size: .5rem; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; }
.iltb-live-tracker__title { margin: 2px 0 0; color: #f3f9ff; font-size: 1.08rem; letter-spacing: -.03em; }
.iltb-live-tracker__topbar-actions { display: flex; align-items: center; gap: 8px; }
.iltb-live-tracker__status { padding: 5px 7px; border-radius: 7px; background: rgba(53,231,255,.045); color: #79dff0; font-size: .52rem; font-weight: 850; }
.iltb-live-tracker__status.is-live { color: #7ef1bc; background: rgba(66,239,170,.05); }
.iltb-live-tracker__status.is-error { color: #ff8fa2; background: rgba(255,91,120,.05); }
.iltb-live-tracker__layout { display: grid; grid-template-columns: minmax(220px,270px) minmax(0,1fr); min-height: 420px; }
.iltb-live-tracker__games { min-width: 0; max-height: 560px; overflow-y: auto; padding: 8px; display: grid; align-content: start; gap: 6px; border-right: 1px solid rgba(111,169,236,.08); scrollbar-width: thin; scrollbar-color: #203858 transparent; }
.iltb-live-tracker__game { width: 100%; padding: 9px; border: 1px solid rgba(111,169,236,.08); border-radius: 10px; background: rgba(255,255,255,.012); color: #9bb0c7; text-align: left; cursor: pointer; }
.iltb-live-tracker__game:hover, .iltb-live-tracker__game.is-active { border-color: rgba(53,231,255,.25); background: linear-gradient(135deg, rgba(53,231,255,.055), rgba(155,92,255,.045)); color: #ecf7ff; }
.iltb-live-tracker__game-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .62rem; font-weight: 850; }
.iltb-live-tracker__game-meta { margin-top: 5px; color: #5f7690; font-size: .49rem; }
.iltb-live-tracker__main { min-width: 0; padding: 12px; }
.iltb-live-tracker__scorecard { min-width: 0; padding: 13px; border: 1px solid rgba(111,169,236,.09); border-radius: 15px; background: rgba(255,255,255,.014); }
.iltb-live-tracker__scoreboard { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; }
.iltb-live-tracker__team { min-width: 0; }
.iltb-live-tracker__team--right { text-align: right; }
.iltb-live-tracker__team-name { overflow: hidden; color: #a8bbcf; font-size: .68rem; font-weight: 850; white-space: nowrap; text-overflow: ellipsis; }
.iltb-live-tracker__team-score { margin-top: 3px; color: #fff; font-size: 2.25rem; font-weight: 950; line-height: 1; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.iltb-live-tracker__game-center { text-align: center; }
.iltb-live-tracker__game-state { color: #7deeff; font-size: .58rem; font-weight: 950; }
.iltb-live-tracker__game-detail { margin-top: 3px; color: #657b95; font-size: .5rem; }
.iltb-live-tracker__probability { margin-top: 11px; }
.iltb-live-tracker__probability-label { margin-bottom: 5px; color: #61768e; font-size: .48rem; }
.iltb-live-tracker__probbar { height: 20px; display: flex; overflow: hidden; border: 1px solid rgba(111,169,236,.09); border-radius: 8px; background: #071426; }
.iltb-live-tracker__prob { min-width: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; color: #f7fbff; font-size: .48rem; font-weight: 950; }
.iltb-live-tracker__prob--away { background: linear-gradient(90deg, rgba(53,231,255,.36), rgba(79,124,255,.4)); }
.iltb-live-tracker__prob--home { background: linear-gradient(90deg, rgba(155,92,255,.42), rgba(255,77,205,.34)); }
.iltb-live-tracker__panels { margin-top: 9px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.iltb-live-tracker__panel { min-width: 0; padding: 11px; border: 1px solid rgba(111,169,236,.09); border-radius: 12px; background: rgba(3,10,23,.34); }
.iltb-live-tracker__panel-header { margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #9db2ca; font-size: .56rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.iltb-live-tracker__feed { max-height: 320px; overflow-y: auto; padding-right: 3px; display: grid; gap: 6px; scrollbar-width: thin; scrollbar-color: #213a5e transparent; }
.iltb-live-tracker__feed-item { padding: 8px; border-left: 2px solid rgba(86,152,255,.24); border-radius: 0 8px 8px 0; background: rgba(255,255,255,.018); }
.iltb-live-tracker__feed-item.scoring { border-left-color: rgba(66,239,170,.44); background: rgba(66,239,170,.025); }
.iltb-live-tracker__feed-meta { margin-bottom: 2px; color: #5f7691; font-size: .49rem; }
.iltb-live-tracker__feed-text { color: #a7b9ce; font-size: .59rem; line-height: 1.4; }
.iltb-live-tracker__empty { padding: 18px; color: #72869f; font-size: .62rem; text-align: center; }

/* PWA */
.pwaInstall { position: relative; overflow: hidden; padding: 18px 20px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; border: 1px solid rgba(110,180,255,.17); border-radius: 22px; background: linear-gradient(115deg, rgba(17,54,89,.76), rgba(8,18,39,.92) 48%, rgba(45,23,79,.78)); box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,.05); }
.pwaInstall::after { content: ""; position: absolute; width: 270px; height: 270px; right: -130px; top: -150px; border-radius: 50%; background: radial-gradient(circle, rgba(155,92,255,.23), transparent 70%); }
.pwaInstallMark { position: relative; z-index: 1; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 18px; border: 1px solid rgba(53,231,255,.23); background: linear-gradient(145deg, rgba(53,231,255,.16), rgba(115,71,255,.16)); box-shadow: 0 12px 30px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08); }
.pwaInstallMark span { color: #dcfaff; font-size: .7rem; font-weight: 950; letter-spacing: .08em; }
.pwaInstallText { position: relative; z-index: 1; min-width: 0; }
.pwaInstallTitle { overflow: hidden; color: #f6fbff; font-size: 1.08rem; font-weight: 950; letter-spacing: -.02em; text-overflow: ellipsis; }
.pwaInstallText p { margin: 3px 0 0; color: #7187a1; font-size: .64rem; }
.pwaInstall button { position: relative; z-index: 1; min-height: 44px; padding: 0 15px; border: 0; border-radius: 12px; background: linear-gradient(135deg, var(--cyan), #85b8ff 58%, #b37cff); color: #041019; font-size: .68rem; font-weight: 950; cursor: pointer; box-shadow: 0 11px 28px rgba(53,231,255,.12); transition: transform .18s ease, box-shadow .18s ease; }
.pwaInstall button:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(53,231,255,.18); }
.install-highlight { animation: installGlow 1.2s ease-in-out infinite alternate; }
@keyframes installGlow { from { box-shadow: 0 0 0 0 rgba(53,231,255,.1); } to { box-shadow: 0 0 0 9px rgba(53,231,255,.08), 0 0 35px rgba(53,231,255,.22); } }
.appFooter { width: min(calc(100% - 28px), var(--max)); margin: 0 auto 24px; padding: 14px 2px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid rgba(110,165,230,.09); color: #526782; font-size: .58rem; }

/* Responsive — mobile-first repair 4.1 */
@media (max-width: 1260px) {
  .topbar { grid-template-columns: minmax(210px,.65fr) minmax(240px,1fr) auto; }
  .brandCopy { display: none; }
  .brandLogo { width: 130px; }
  .commandHero { grid-template-columns: minmax(0,1fr) minmax(360px,.82fr); }
  .leagueRail { grid-template-columns: 1fr 1fr; }
  .analyticsGrid { grid-template-columns: minmax(0,1.55fr) 320px; }
  .statHighlights { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 980px) {
  .topbar { grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
  .topbarCenter { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; justify-content: center; min-height: 35px; }
  .topbarActions { grid-column: 2; grid-row: 1; }
  .quickNav { top: 118px; }

  .commandHero {
    grid-template-columns: minmax(0,1fr);
    padding-bottom: clamp(28px,4vw,46px);
  }
  .heroCopy h1 { max-width: 12ch; }
  .focusConsole { max-width: none; }
  .commandMetrics {
    position: relative;
    inset: auto;
    grid-column: 1 / -1;
    grid-template-columns: repeat(4,minmax(0,1fr));
    margin-top: 2px;
  }

  .integrityStrip { grid-template-columns: 1fr 1fr; }
  .integrityLead { grid-column: 1 / -1; }
  .analyticsGrid { grid-template-columns: minmax(0,1fr); }
  .rightRail { position: static; grid-template-columns: 1fr 1fr; }

  .iltb-live-tracker__layout { grid-template-columns: minmax(0,1fr); }
  .iltb-live-tracker__games {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    max-height: none;
    border-right: 0;
    border-bottom: 1px solid rgba(111,169,236,.08);
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .iltb-live-tracker__game { min-width: 210px; scroll-snap-align: start; }
  .scoreboardZone, .workspace, .liveEventsZone { scroll-margin-top: 185px; }
}

@media (max-width: 760px) {
  html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
  body { min-width: 0; }
  .fx { width: 78vw; height: 78vw; filter: blur(72px); opacity: .11; }

  /* The full header scrolls away on phones; the small section nav stays reachable. */
  .topbar {
    position: relative;
    top: auto;
    min-height: 0;
    padding: max(8px, env(safe-area-inset-top)) 9px 8px;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 7px;
  }
  .brandPanel { min-width: 0; gap: 8px; }
  .brandLogo { width: 100px; }
  .topbarActions { min-width: 0; }
  .topbarActions .iconAction:not(.primaryAction) { display: none; }
  .iconAction { min-height: 38px; padding: 0 10px; border-radius: 10px; }
  .topbarCenter {
    min-width: 0;
    width: 100%;
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: stretch;
    justify-content: flex-start;
    gap: 6px;
    padding: 5px 7px;
    overflow: hidden;
  }
  .healthBadge { flex: 0 0 auto; }
  .status { min-width: 0; max-width: none; flex: 1 1 auto; }

  .quickNav {
    top: max(6px, env(safe-area-inset-top));
    width: calc(100% - 12px);
    max-width: 100%;
    margin-top: 6px;
    padding: 5px;
    gap: 3px;
    border-radius: 13px;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }
  .quickNavLink { min-height: 34px; padding: 0 9px; font-size: .6rem; gap: 6px; }

  .wrap {
    width: calc(100% - 12px);
    max-width: 100%;
    margin-top: 9px;
    padding-bottom: max(22px, env(safe-area-inset-bottom));
    gap: 16px;
  }
  .wrap > *, .commandHero > *, .analyticsGrid > *, .rightRail > * { min-width: 0; max-width: 100%; }

  .commandHero {
    overflow: hidden;
    padding: 20px 12px 14px;
    gap: 16px;
    border-radius: 20px;
  }
  .commandHero::after { width: 420px; height: 420px; right: -260px; bottom: -260px; }
  .heroBadgeRow { margin-bottom: 13px; gap: 5px; }
  .heroBadge { padding: 5px 7px; font-size: .49rem; }
  .heroKicker { font-size: .58rem; letter-spacing: .14em; }
  .heroCopy h1 {
    max-width: 100%;
    font-size: clamp(2.2rem, 11.5vw, 4rem);
    line-height: .89;
    letter-spacing: -.055em;
    overflow-wrap: normal;
  }
  .heroLead { max-width: none; margin: 14px 0 16px; font-size: .79rem; line-height: 1.55; }
  .leagueRail { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
  .leagueChip { min-height: 58px; padding: 7px; gap: 7px; border-radius: 12px; }
  .leagueOrb { width: 34px; height: 34px; border-radius: 10px; font-size: .52rem; }
  .leagueChipCopy strong { font-size: .65rem; }
  .leagueChipCopy small { display: none; }

  .focusConsole { padding: 13px; border-radius: 18px; }
  .focusTopline { margin-bottom: 12px; }
  .focusPlayer { gap: 10px; }
  .focusPortraitWrap { width: 66px; height: 66px; }
  .focusPortraitPlaceholder, .focusPlayerPortrait { inset: 4px; width: 58px; height: 58px; border-radius: 16px; }
  .portraitRing { border-radius: 20px; }
  .focusPlayerCopy h2 { font-size: clamp(1.12rem,5.8vw,1.42rem); }
  .focusPlayerCopy p { white-space: normal; line-height: 1.35; }
  .selectorDeck { margin-top: 13px; grid-template-columns: minmax(0,1fr); gap: 7px; }
  .filterControl--wide { grid-column: auto; }
  .filterControl { padding: 7px 9px; }
  .filterControl select { max-width: 100%; font-size: .72rem; }
  .focusActions { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
  .focusActions button { min-width: 0; padding: 0 7px; }

  .commandMetrics {
    position: static;
    inset: auto;
    width: 100%;
    margin: 0;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 6px;
  }
  .commandMetric { min-height: 58px; padding: 8px 8px 8px 31px; border-radius: 11px; }
  .metricIndex { left: 9px; top: 9px; }
  .metricLabel { font-size: .46rem; }
  .commandMetric strong { font-size: .72rem; }

  .integrityStrip { grid-template-columns: minmax(0,1fr); padding: 7px; gap: 6px; border-radius: 15px; }
  .integrityLead { grid-column: auto; min-height: 58px; }
  .integrityLead small { white-space: normal; line-height: 1.35; }
  .integrityMetric { min-height: 55px; padding: 9px 10px; }
  .integrityMetric strong { white-space: normal; overflow-wrap: anywhere; line-height: 1.3; }

  .sectionBar { flex-direction: column; align-items: stretch; gap: 8px; }
  .sectionTitleBlock { width: 100%; gap: 9px; }
  .sectionNumber { width: 29px; height: 29px; flex: 0 0 auto; }
  .sectionBar h2 { font-size: 1.22rem; line-height: 1.05; }
  .sectionBar p, .panelHeading p { font-size: .61rem; line-height: 1.45; }
  .sectionMeta, .accuracyLegend { display: none; }

  .tickerShell { margin-top: 8px; border-radius: 17px; }
  .tickerViewport {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px;
    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tickerViewport::-webkit-scrollbar { display: none; }
  .tickerTrack { min-width: max-content; gap: 7px; transform: none !important; }
  .scoreCard {
    width: min(82vw, 286px);
    max-width: calc(100vw - 30px);
    min-height: 160px;
    padding: 10px;
    scroll-snap-align: start;
    border-radius: 13px;
  }

  .premiumPanel { border-radius: 17px; }
  .statsCard { min-height: 0; padding: 12px; }
  .panelHeading { margin-bottom: 11px; flex-direction: column; align-items: flex-start; gap: 6px; }
  .panelHeading h3 { font-size: 1.18rem; }
  .panelBadge { display: none; }

  .statsControls { width: 100%; display: grid; grid-template-columns: minmax(0,1fr); align-items: stretch; gap: 7px; }
  .statMode { width: 100%; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .modeBtn { width: 100%; min-width: 0; padding: 0 5px; }
  .presetWrap, .phaseWrap, .opponentWrap {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(72px,auto) minmax(0,1fr);
    gap: 7px;
  }
  .presetSelect, .opponentScopeSelect { width: 100%; min-width: 0; max-width: 100%; }

  .statHeader { align-items: flex-start; gap: 9px; }
  .headshot { width: 56px; height: 56px; border-radius: 15px; }
  .statPlayerName { font-size: 1.12rem; white-space: normal; overflow-wrap: anywhere; line-height: 1.05; }
  .statSubline { font-size: .57rem; line-height: 1.4; }
  .statHighlights { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
  .statTile { min-height: 78px; padding: 9px; border-radius: 11px; }
  .statTileLabel { font-size: .46rem; }
  .statTileValue { font-size: clamp(1.2rem,7vw,1.52rem); }
  .statSection { border-radius: 11px; }
  .statKV { min-height: 38px; padding: 7px 8px; gap: 8px; }
  .statKV span { white-space: normal; overflow-wrap: anywhere; line-height: 1.25; }
  .statKV strong { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; text-align: right; }

  .rightRail { grid-template-columns: minmax(0,1fr); gap: 10px; }
  .dataRadar, .favoritesCard { padding: 12px; }
  .radarStatus { grid-template-columns: 58px minmax(0,1fr); gap: 9px; padding: 9px; }
  .radarStatus strong { white-space: normal; overflow-wrap: anywhere; }
  .radarGrid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .radarGrid strong { white-space: normal; overflow-wrap: anywhere; }
  .favItem { align-items: flex-start; }
  .favItem strong, .favItem small { white-space: normal; overflow-wrap: anywhere; }

  .liveEventsZone { gap: 8px; }
  .liveEventBadge { align-self: flex-start; }
  .iltb-live-tracker { border-radius: 17px; }
  .iltb-live-tracker__topbar {
    min-height: 0;
    padding: 10px;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .iltb-live-tracker__topbar-actions { width: 100%; flex-wrap: wrap; justify-content: space-between; }
  .iltb-live-tracker__games { padding: 7px; gap: 6px; }
  .iltb-live-tracker__game { min-width: min(76vw, 235px); max-width: 235px; }
  .iltb-live-tracker__main { padding: 8px; }
  .iltb-live-tracker__scorecard { padding: 10px; border-radius: 12px; }
  .iltb-live-tracker__scoreboard { gap: 7px; }
  .iltb-live-tracker__team-name { font-size: .6rem; }
  .iltb-live-tracker__team-score { font-size: 1.7rem; }
  .iltb-live-tracker__game-state { font-size: .52rem; }
  .iltb-live-tracker__game-detail { font-size: .46rem; }
  .iltb-live-tracker__panels { grid-template-columns: minmax(0,1fr); gap: 7px; }
  .iltb-live-tracker__panel { padding: 9px; }

  .pwaInstall { padding: 14px; grid-template-columns: auto minmax(0,1fr); gap: 10px; border-radius: 17px; }
  .pwaInstallMark { width: 48px; height: 48px; border-radius: 14px; }
  .pwaInstallTitle { white-space: normal; line-height: 1.2; }
  .pwaInstall button { grid-column: 1 / -1; width: 100%; }
  .appFooter {
    width: calc(100% - 12px);
    margin-bottom: max(18px, env(safe-area-inset-bottom));
    padding: 11px 2px;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .scoreboardZone, .workspace, .liveEventsZone { scroll-margin-top: 58px; }
}

@media (max-width: 480px) {
  .brandLogo { width: 88px; }
  .healthBadge { padding: 5px 7px; font-size: .51rem; }
  .status { font-size: .55rem; }
  .topbarActions .primaryAction span:last-child { display: none; }
  .topbarActions .primaryAction { width: 38px; padding: 0; }
  .quickNavLink span { display: none; }

  .heroBadge--source { display: none; }
  .heroCopy h1 { font-size: clamp(2.08rem,11.3vw,3rem); }
  .heroLead { font-size: .74rem; }
  .focusModeBadge { font-size: .5rem; }
  .focusActions { grid-template-columns: minmax(0,1fr); }
  .commandMetrics { grid-template-columns: repeat(2,minmax(0,1fr)); }

  .statMode { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .radarGrid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .scoreCard { width: min(84vw, 270px); }

  .iltb-live-tracker__scoreboard {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    grid-template-rows: auto auto;
    row-gap: 10px;
  }
  .iltb-live-tracker__scoreboard > .iltb-live-tracker__team:first-child { grid-column: 1; grid-row: 2; }
  .iltb-live-tracker__game-center { grid-column: 1 / -1; grid-row: 1; }
  .iltb-live-tracker__team--right { grid-column: 2; grid-row: 2; }
  .iltb-live-tracker__team-name { white-space: normal; line-height: 1.2; }
  .iltb-live-tracker__team-score { font-size: 1.55rem; }
}

@media (max-width: 360px) {
  .topbarCenter .status { display: none; }
  .topbarCenter { justify-content: center; }
  .quickNavLink { padding-inline: 8px; }
  .heroBadge:not(.heroBadge--live) { display: none; }
  .heroCopy h1 { font-size: 2.05rem; }
  .leagueChip { gap: 5px; }
  .leagueOrb { width: 32px; height: 32px; }
  .leagueChipCopy strong { font-size: .59rem; }
  .commandMetric { padding-left: 28px; }
  .statHighlights { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .radarStatus { grid-template-columns: 1fr; }
  .radarCore { margin-inline: auto; }
  .pwaInstall { grid-template-columns: minmax(0,1fr); text-align: center; }
  .pwaInstallMark { margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fx, .scanBeam, .livePulse, .portraitRing, .radarCore i, .radarCore b, .install-highlight { animation: none !important; }
  .leagueChip, .iconAction, .scoreCard, .favItem, .pwaInstall button { transition: none !important; }
}

/* Component state hooks */
.sectionBar--workspace { margin-bottom: 0; }
.iltb-live-tracker__status.is-ok { color: #7ef1bc; background: rgba(66,239,170,.05); }
.iltb-live-tracker__status.is-warn { color: #ffd17a; background: rgba(255,200,90,.06); }
.iltb-live-tracker__feed-item.is-positive { border-left-color: rgba(66,239,170,.48); background: rgba(66,239,170,.025); }
.iltb-live-tracker__feed-item.is-negative { border-left-color: rgba(255,91,120,.42); background: rgba(255,91,120,.024); }

/* Offline shell */
.offlinePage { min-height: 100vh; padding: 24px; display: grid; place-items: center; text-align: center; }
.offlineCard { width: min(100%,620px); padding: clamp(24px,5vw,42px); border: 1px solid rgba(53,231,255,.24); border-radius: 26px; background: linear-gradient(145deg, rgba(10,24,47,.96), rgba(4,10,23,.96)); box-shadow: var(--shadow-xl), 0 0 55px rgba(53,231,255,.07); }
.offlineEyebrow { color: #70e9fb; font-size: .58rem; font-weight: 950; letter-spacing: .14em; }
.offlineCard h1 { margin: 8px 0 12px; font-size: clamp(2rem,6vw,3.4rem); line-height: .95; letter-spacing: -.055em; }
.offlineCard p { margin: 0 auto; max-width: 520px; color: #a6b8cc; line-height: 1.65; }
.offlineRetry { margin-top: 22px; min-height: 44px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: linear-gradient(135deg,var(--cyan),#789bff 58%,#b46fff); color: #041019; font-size: .72rem; font-weight: 950; box-shadow: 0 12px 30px rgba(53,231,255,.14); }