@font-face {
  font-family: 'Poppins';
  src: url('assets/Poppins-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('assets/Poppins-Medium.ttf') format('truetype');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('assets/Poppins-SemiBold.ttf') format('truetype');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('assets/Poppins-Bold.ttf') format('truetype');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo Black';
  src: url('assets/ArchivoBlack-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Whitney';
  src: url('assets/Whitney-Semibold.ttf') format('truetype');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Material Symbols Rounded Filled';
  src: url('assets/MaterialSymbolsRoundedFilled-subset.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: block;
}
:root {
  color-scheme: dark;
  --bg: #131313;
  --text: #f3f6f5;
  --muted: #828282;
  --accent: #049b5a;
  --hero-fill: rgb(4 155 90 / 10%);
  --button-fill: rgb(4 155 90 / 70%);
  --button-text: #f1f1f1;
  --background-image: url('background.webp');
  --space-xs: 4px;
  --space-s: 8px;
  --space-m: 12px;
  --space-l: 16px;
  --space-xl: 24px;
  --radius-panel: 32px;
  --radius-pill: 1000px;
  font-family: 'Poppins', Arial, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--text);
  isolation: isolate;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100dvh;
  z-index: -1;
  pointer-events: none;
  background: var(--background-image) center / cover no-repeat;
  opacity: 0.2;
}
a {
  color: inherit;
  text-decoration: none;
}
a:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 4px;
}
p,
h1,
h2 {
  margin: 0;
}
::selection {
  background: var(--accent);
  color: white;
}
.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  padding: 12px 16px;
  z-index: 5;
  background: var(--bg);
  transform: translateY(-160%);
}
.skip-link:focus {
  transform: none;
}
.page {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  min-height: 100vh;
  min-height: 100svh;
  max-width: 600px;
  margin-inline: auto;
  padding: var(--space-xl) var(--space-l);
}
.landing {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  min-width: 0;
}
/* Figma GLASS has no direct CSS equivalent. Blur and an inset light edge approximate it. */
.glass {
  position: relative;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%),
    inset 0 -1px 0 rgb(255 255 255 / 20%);
}
.glass::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 1px 0 0 rgb(255 255 255 / 12%),
    inset -1px 0 0 rgb(255 255 255 / 12%);
}
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-m);
  padding: var(--space-l) var(--space-m);
  border-radius: var(--radius-panel);
  background: var(--hero-fill);
  text-align: center;
}
.brand-block {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.brand {
  font-family: 'Archivo Black', Arial, sans-serif;
  font-size: 31px;
  font-weight: 400;
  line-height: 32px;
  letter-spacing: -1.7px;
}
.brand span,
h1 span {
  color: var(--accent);
}
.eyebrow {
  color: var(--accent);
  font-size: 10px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 1.35px;
}
.hero-copy {
  display: grid;
  gap: var(--space-s);
  width: 100%;
}
h1 {
  font-size: 36px;
  font-weight: 700;
  line-height: 40px;
  letter-spacing: -1px;
}
.intro {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -1px;
}
.contact-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-s);
  width: 100%;
}
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 44px;
  padding: var(--space-m) var(--space-l);
  border-radius: var(--radius-pill);
  color: var(--button-text);
  background: var(--button-fill);
  font: 600 14px/20px 'Whitney', Arial, sans-serif;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 2px 40px rgb(0 0 0 / 10%),
    inset 0 0 7.6px rgb(255 255 255 / 15%);
  transition: background-color 0.15s, box-shadow 0.15s;
}
.button:hover {
  background: var(--accent);
  box-shadow: 0 2px 40px rgb(0 0 0 / 10%),
    inset 0 0 7.6px rgb(255 255 255 / 25%);
}
.button:active {
  background: #047d49;
}
.symbol,
.button-icon {
  display: block;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}
.symbol {
  font-family: 'Material Symbols Rounded Filled';
  font-size: 20px;
  font-weight: 400;
  font-style: normal;
  line-height: 20px;
  letter-spacing: normal;
  font-feature-settings: 'liga';
  white-space: nowrap;
  direction: ltr;
  overflow: hidden;
}
.button-icon {
  border-radius: 50%;
  object-fit: cover;
}
.contact-status {
  max-width: 100%;
  font-size: 12px;
  line-height: 1.4;
}
.benefits {
  --benefit-gap: 12px;
  /* Let the marquee cross the page gutters and exit at the viewport edges. */
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  min-width: 0;
  overflow: hidden;
}
.benefits-track {
  display: flex;
  width: max-content;
}
.benefits-track.is-running {
  animation: benefits-scroll var(--scroll-duration) linear infinite;
  will-change: transform;
}
.benefits-group {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--benefit-gap);
  padding-right: var(--benefit-gap);
}
@keyframes benefits-scroll {
  to {
    transform: translateX(calc(-1 * var(--scroll-distance)));
  }
}
.benefit {
  flex: 0 0 auto;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: var(--space-s);
  padding: var(--space-xs) var(--space-m);
  border-radius: var(--radius-pill);
  background: rgb(0 0 0 / 10%);
  max-width: 100%;
}
.benefit .symbol {
  color: #f1f1f1;
  filter: drop-shadow(0 3px 2.5px rgb(0 0 0 / 40%));
}
.benefit h2 {
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: -1px;
}
.benefit p {
  font-size: 11px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -1px;
}
.footer {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -1px;
  text-align: center;
}
@media (max-width: 359px) {
  h1 {
    font-size: 31px;
    line-height: 36px;
  }
  .button {
    padding-inline: 12px;
  }
}
@media (min-width: 640px) {
  .page {
    max-width: 1248px;
    padding: 32px;
    gap: 24px;
  }
  .landing {
    gap: 24px;
  }
  .hero {
    padding: 28px 32px;
    gap: 20px;
  }
  .hero-copy {
    max-width: 460px;
    gap: 12px;
  }
  h1 {
    font-size: 44px;
    line-height: 48px;
  }
  .intro {
    font-size: 18px;
    line-height: 1.4;
  }
  .benefit {
    min-height: 58px;
  }
}
@media (min-width: 960px) {
  .page {
    /* 1078px of content plus 40px padding on each side. */
    max-width: calc(1078px + 80px);
    padding: 48px 40px 28px;
    gap: 24px;
  }
  .landing {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr auto;
    align-items: center;
    gap: 32px;
  }
  .hero {
    padding: 40px 28px;
    gap: 28px;
  }
  .hero-copy {
    gap: 16px;
  }
  h1 {
    font-size: clamp(44px, 4.2vw, 56px);
    line-height: 1.12;
    letter-spacing: -1.5px;
  }
  .intro {
    max-width: 410px;
    margin-inline: auto;
  }
  .brand {
    font-size: 38px;
    line-height: 42px;
  }
  .eyebrow {
    font-size: 11px;
    line-height: 16px;
  }
  .button {
    min-height: 48px;
    padding: 14px 20px;
    font-size: 16px;
  }
  .benefits {
    grid-column: 1/-1;
    --benefit-gap: 24px;
  }
  .benefit {
    min-height: 52px;
    padding: 8px 16px;
    gap: 12px;
  }
  .benefit h2 {
    font-size: 14px;
    letter-spacing: -0.5px;
  }
  .benefit p {
    font-size: 12px;
    letter-spacing: -0.5px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .benefits {
    width: 100%;
    margin-inline: 0;
  }
  .benefits-track.is-running {
    animation: none;
    will-change: auto;
  }
  .benefits-track {
    width: 100%;
  }
  .benefits-group {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    padding-right: 0;
  }
  .benefits-group[aria-hidden='true'] {
    display: none;
  }
  .button {
    transition: none;
  }
}

/* Three independent scenes share one stable stage; only the cards move. */
.widget-deck {
  flex: 1;
  min-width: 0;
  min-height: 372px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  padding: 24px 14px 0;
  overflow: visible;
  isolation: isolate;
}
.widget-stage {
  display: grid;
  align-items: center;
  min-width: 0;
}
.widget-card {
  grid-area: 1 / 1;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  min-height: 286px;
  padding: 18px;
  border: 1px solid #34483f;
  border-radius: 22px;
  background: linear-gradient(145deg, #1d2e26, #171e1b 65%);
  box-shadow: 0 18px 40px rgb(0 0 0 / 24%), inset 0 1px 0 rgb(255 255 255 / 5%);
  transform-origin: 50% 65%;
  will-change: transform;
}
.widget-card:first-child {
  z-index: 3;
  transform: rotate(-1.5deg);
}
.widget-card:nth-child(2) {
  z-index: 2;
  transform: translate(8px, 12px) rotate(4deg) scale(0.96);
}
.widget-card:nth-child(3) {
  z-index: 1;
  transform: translate(-8px, 24px) rotate(-4deg) scale(0.92);
}
.widget-card[aria-hidden='true'] {
  pointer-events: none;
}
.event-dot {
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  border-radius: 50%;
  background: #049b5a;
}
.chart-axis {
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  color: #91a59a;
}
@media (min-width: 640px) {
  .widget-stage {
    width: 100%;
    max-width: 440px;
    align-self: center;
  }
  .widget-card {
    padding: 24px;
    gap: 18px;
    min-height: 330px;
  }
  .widget-card h2 {
    font-size: 21px;
  }
}
@media (min-width: 960px) {
  .widget-deck {
    min-height: 460px;
    padding: 32px 26px 0;
    gap: 32px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .widget-card {
    will-change: auto;
  }
}

@font-face {
  font-family: 'Space Mono';
  src: url('assets/SpaceMono-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Mono';
  src: url('assets/SpaceMono-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Whitney';
  src: url('assets/Whitney-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.widget-card.broadcast-card {
  min-height: 0;
  gap: 0;
  padding: 12px;
  border-radius: 32px 32px 32px 16px;
  background: rgb(0 0 0 / 10%);
  border-color: rgb(255 255 255 / 15%);
  box-shadow: 0 18px 40px rgb(0 0 0 / 24%), inset 0 1px 0 rgb(255 255 255 / 8%);
}
.broadcast-field {
  padding: 8px 0;
}
.broadcast-pitch {
  position: relative;
  aspect-ratio: 343 / 176;
  padding: 12px 16px;
  border-radius: 16px;
  background: #1d2e22;
}
.broadcast-artwork {
  display: flex;
  width: 100%;
  height: 100%;
}
.broadcast-half {
  width: 50%;
  height: 100%;
  overflow: hidden;
}
.broadcast-artwork img {
  display: block;
  /* Crop the SVG export gutters: field lines run from x=.552 to x=152.521. */
  width: 101.337%;
  max-width: none;
  height: 100%;
  transform: translateX(-0.35844%);
  object-fit: fill;
}
.broadcast-direction {
  position: absolute;
  top: var(--pass-y);
  left: var(--pass-x);
  width: var(--pass-length);
  height: 2px;
  margin-top: -1px;
  color: #d7e4dc;
  transform-origin: 0 50%;
  transform: rotate(var(--ball-angle));
}
.broadcast-direction::before {
  content: '';
  position: absolute;
  inset: 0 10px 0 0;
  background: currentColor;
  border-radius: 1px;
}
.broadcast-direction::after {
  content: '';
  position: absolute;
  right: 10px;
  top: -3px;
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}
.broadcast-direction[hidden] {
  display: none;
}
.broadcast-ball {
  position: absolute;
  top: var(--ball-y, 65%);
  left: var(--ball-x, 57%);
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  font-size: 20px;
  line-height: 20px;
  border-radius: 50%;
  background: #fbfbfb;
  color: #0ebb73;
  filter: drop-shadow(0 3px 2.5px rgb(0 0 0 / 20%));
}
.danger-banner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(var(--notice-scale, 1));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  max-width: 94%;
  padding: 4px 8px;
  border: 1px solid #fff1d6;
  border-radius: 8px;
  background: #fff7e7;
  color: #39393f;
  box-shadow: 0 2px 6px rgb(0 0 0 / 15%);
  font: 500 11px/16px 'Whitney', Arial, sans-serif;
  white-space: nowrap;
  z-index: 2;
}
.danger-banner[hidden] {
  display: none;
}
.danger-banner .symbol {
  font-size: 16px;
  line-height: 16px;
  height: 16px;
  width: 16px;
  flex-basis: 16px;
  color: #f5a300;
}
.broadcast-teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 4px;
  min-height: 50px;
  padding: 8px 4px;
}
.broadcast-team {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  color: #f3f6f5;
  font-size: 10px;
}
.broadcast-team img {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  object-fit: contain;
}
.broadcast-team span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.broadcast-team-away {
  justify-content: end;
}
.broadcast-score {
  text-align: center;
}
.broadcast-score strong {
  display: block;
  color: #fd686b;
  font: 700 20px/20px 'Space Mono', monospace;
  letter-spacing: -1.4px;
}
.broadcast-score > span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: #a8b2b0;
  font: 500 11px/16px 'Whitney', Arial, sans-serif;
  white-space: nowrap;
}
.broadcast-score .symbol {
  width: 12px;
  height: 12px;
  flex-basis: 12px;
  font-size: 12px;
  line-height: 12px;
  color: #fd686b;
}
.broadcast-odds {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 0 4px;
}
.broadcast-coef {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 4px 8px;
  border-radius: 1000px;
  background: rgb(255 255 255 / 8%);
  color: #d8e2dc;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 7%);
  min-width: 0;
}
.broadcast-coef > span {
  margin-right: auto;
  font: 500 12px/16px 'Whitney', Arial, sans-serif;
}
.broadcast-coef strong {
  font: 400 12px/16px 'Space Mono', monospace;
  letter-spacing: -0.72px;
  font-variant-numeric: tabular-nums;
}
.broadcast-coef .symbol {
  visibility: hidden;
  width: 10px;
  height: 14px;
  flex: 0 0 10px;
  font-size: 14px;
  line-height: 14px;
}
.broadcast-card[data-danger='true']
  .broadcast-coef[data-direction='down']
  .symbol {
  visibility: visible;
}
.broadcast-card[data-danger='true'] .broadcast-coef[data-direction='down'] {
  color: #f39b9f;
  background: rgb(194 59 72 / 15%);
}
.broadcast-demo {
  position: absolute;
  right: 16px;
  bottom: -14px;
  color: #9ca8a0;
  font-size: 7px;
  letter-spacing: 1px;
}
@media (min-width: 640px) {
  .broadcast-field {
    padding: 8px 12px;
  }
  .broadcast-teams {
    padding-inline: 16px;
  }
  .broadcast-team {
    font-size: 11px;
  }
  .broadcast-odds {
    padding-inline: 16px;
    gap: 12px;
  }
}
@media (max-width: 639px) {
  .page {
    min-height: 100svh;
    padding: 24px 16px 0;
    gap: 16px;
  }
  .landing {
    flex: 1 0 auto;
    justify-content: center;
    gap: 36px;
  }
  .widget-deck {
    flex: 0 0 auto;
    min-height: 0;
    padding: 0 14px;
    gap: 0;
  }
  .footer {
    /* The growing main area holds this at the bottom only when content fits. */
    flex: none;
    padding: 12px 0 calc(16px + env(safe-area-inset-bottom, 0px));
  }
}

.widget-card[aria-hidden='true']:not(.is-leaving) > * {
  visibility: hidden;
}
.widget-card.is-entering > * {
  opacity: calc(var(--content-opacity, 0) * var(--record-opacity, 1));
}

/* Companion cards share the broadcast's glass, pitch tint and number font. */
.widget-card.data-card {
  min-height: 0;
  padding: 16px 12px 12px;
  gap: 10px;
  border-radius: 32px 32px 32px 16px;
  background: rgb(0 0 0 / 10%);
  border-color: rgb(255 255 255 / 15%);
  box-shadow: 0 18px 40px rgb(0 0 0 / 24%), inset 0 1px 0 rgb(255 255 255 / 8%);
}
.data-heading,
.data-heading h2,
.data-teams,
.data-teams > span {
  display: flex;
  align-items: center;
}
.data-heading {
  justify-content: space-between;
  padding-inline: 4px;
  gap: 8px;
}
.data-heading h2 {
  gap: 6px;
  font: 500 13px/18px 'Whitney', Arial, sans-serif;
  letter-spacing: 0;
}
.data-heading .symbol {
  width: 16px;
  height: 16px;
  font-size: 16px;
  line-height: 16px;
  flex: 0 0 16px;
  color: #94b7a2;
}
.data-tag {
  font: 500 9px/16px 'Whitney', Arial, sans-serif;
  letter-spacing: 0.7px;
  color: #a8b2b0;
}
.data-teams {
  justify-content: space-between;
  gap: 8px;
  padding-inline: 4px;
}
.data-teams > span {
  gap: 4px;
  font: 500 11px/22px 'Whitney', Arial, sans-serif;
  white-space: nowrap;
}
.data-teams img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}
.momentum-panel {
  padding: 10px 12px 8px;
  border-radius: 16px;
  background: #1d2e22;
}
.chart-caption {
  display: flex;
  justify-content: space-between;
  font: 500 8px/12px 'Whitney', Arial, sans-serif;
  letter-spacing: 0.6px;
  color: #acbcb1;
}
.momentum-key {
  color: #78c69b;
}
.momentum-key i {
  display: inline-block;
  height: 6px;
  border-left: 1px solid #82978a;
  margin-inline: 4px;
}
.momentum-chart {
  position: relative;
  height: 66px;
  margin: 6px 0;
  background: linear-gradient(
    transparent calc(50% - 0.5px),
    #607566 50%,
    transparent calc(50% + 0.5px)
  );
}
.momentum-window {
  position: absolute;
  inset: 0 0 0 80%;
  background: rgb(4 155 90 / 9%);
  border-left: 1px dashed rgb(123 171 145 / 25%);
}
.momentum-bars {
  display: flex;
  position: absolute;
  inset: 0;
  gap: 3px;
  clip-path: inset(0 calc(100% - var(--chart-reveal, 60%)) 0 0);
}
.momentum-bars i {
  flex: 1;
  position: relative;
  height: var(--bar-height);
  border-radius: 1px;
}
.momentum-bars .home {
  top: calc(50% - var(--bar-height));
  background: #049b5a;
}
.momentum-bars .away {
  top: 50%;
  background: #86998c;
}
.momentum-cursor {
  position: absolute;
  left: clamp(0px, var(--chart-reveal, 60%), calc(100% - 1px));
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgb(200 230 211 / 35%);
}
.analytics-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}
.analytics-metric {
  min-width: 0;
  border-radius: 10px;
  padding: 7px 5px;
  background: rgb(255 255 255 / 5%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 5%);
  transition: background 0.35s, box-shadow 0.35s;
}
.analytics-metric > span {
  display: block;
  color: #a8b2b0;
  font: 500 10px/12px 'Whitney', Arial, sans-serif;
  margin-bottom: 5px;
}
.analytics-metric > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px;
  font: 400 11px/16px 'Space Mono', monospace;
  letter-spacing: -0.6px;
}
.analytics-metric strong {
  font-weight: 400;
}
.analytics-metric strong:last-child {
  color: #a8b2b0;
}
.analytics-metric > div > span {
  color: #63786b;
  font-size: 9px;
}
.analytics-metric > i {
  display: block;
  height: 3px;
  margin-top: 6px;
  background: #64786b;
  border-radius: 2px;
  overflow: hidden;
}
.analytics-metric b {
  display: block;
  height: 100%;
  background: #049b5a;
}
.analytics-metric.is-highlighted {
  background: rgb(4 155 90 / 18%);
  box-shadow: inset 0 0 0 1px rgb(91 187 131 / 45%);
}
.data-status {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 7px 4px 0;
  border-top: 1px solid rgb(255 255 255 / 8%);
  font: 500 11px/16px 'Whitney', Arial, sans-serif;
  color: #acbeb2;
}
.widget-card.history-card {
  gap: 8px;
}
.history-range {
  padding-inline: 4px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
}
.history-range strong {
  font: 700 19px/26px 'Space Mono', monospace;
  letter-spacing: -1px;
  white-space: nowrap;
}
.history-range strong span {
  color: #688573;
}
.history-range > span {
  max-width: 80px;
  text-align: right;
  color: #a8b2b0;
  font: 500 10px/12px 'Whitney', Arial, sans-serif;
}
.history-seasons {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  height: 30px;
  padding: 3px;
  border-radius: 10px;
  background: #1d2e22;
  isolation: isolate;
}
.history-seasons > i {
  position: absolute;
  z-index: -1;
  left: 3px;
  top: 3px;
  bottom: 3px;
  width: calc((100% - 6px) / 3);
  border-radius: 7px;
  background: rgb(4 155 90 / 30%);
  box-shadow: inset 0 0 0 1px rgb(117 200 151 / 35%);
  transform: translateX(calc(var(--season-index, 0) * 100%));
  transition: transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.history-seasons > span {
  display: grid;
  place-items: center;
  font: 400 11px/20px 'Space Mono', monospace;
  color: #93aa9c;
}
.history-seasons .is-selected {
  color: #e4f2e9;
}
.history-section-label {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  padding: 0 4px;
  font: 500 11px/14px 'Whitney', Arial, sans-serif;
}
.history-section-label span:last-child {
  color: #9eafa5;
  font-size: 10px;
}
.history-results {
  display: grid;
  gap: 2px;
  padding: 0 4px;
}
.history-result {
  display: grid;
  grid-template-columns: 5px 1fr auto 46px;
  gap: 8px;
  align-items: center;
  height: 25px;
  padding-inline: 5px;
}
.history-result > i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #7cb492;
}
.history-result time {
  color: #a8b2b0;
  font: 500 9px/14px 'Whitney', Arial, sans-serif;
  letter-spacing: 0.3px;
}
.history-result strong {
  font: 400 12px/16px 'Space Mono', monospace;
  letter-spacing: -0.5px;
}
.history-result strong span {
  color: #64786b;
}
.result-badge {
  padding: 2px 4px;
  border-radius: 4px;
  background: rgb(4 155 90 / 12%);
  color: #96c5a8;
  text-align: center;
  font: 500 8px/12px 'Whitney', Arial, sans-serif;
}
.result-badge.away,
.result-badge.draw {
  background: rgb(255 255 255 / 6%);
  color: #a8b2b0;
}
.history-odds-panel {
  opacity: var(--record-opacity, 1);
  padding: 8px;
  border-radius: 14px;
  background: #1d2e22;
}
.history-odds-heading {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 7px;
  font: 500 9px/12px 'Whitney', Arial, sans-serif;
  letter-spacing: 0.3px;
  color: #a8bcb0;
}
.history-odds-heading time {
  color: #d8e9df;
}
.history-odds {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.history-odds > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border-radius: 8px;
  padding: 4px;
  background: rgb(255 255 255 / 5%);
  font: 500 10px/12px 'Whitney', Arial, sans-serif;
  color: #a8b2b0;
}
.history-odds strong {
  font: 400 12px/16px 'Space Mono', monospace;
  color: #e2ece6;
}
@media (min-width: 640px) {
  .widget-card.data-card {
    padding: 20px;
    gap: 14px;
  }
  .widget-card.history-card {
    gap: 10px;
  }
  .momentum-chart {
    height: 94px;
  }
  .analytics-metric {
    padding: 9px 8px;
  }
  .analytics-metric > div {
    font-size: 13px;
  }
  .data-heading h2 {
    font-size: 15px;
  }
  .history-range strong {
    font-size: 24px;
    line-height: 30px;
  }
  .history-range > span {
    max-width: none;
  }
  .history-result {
    height: 28px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .analytics-metric {
    transition: none;
  }
}

.history-result {
  border-radius: 5px;
  transition: background 0.8s;
}
.history-result.is-emphasized {
  background: rgb(4 155 90 / 16%);
  box-shadow: inset 2px 0 #049b5a;
}
.history-result > i {
  transition: box-shadow 0.8s;
}
.history-result.is-emphasized > i {
  box-shadow: 0 0 0 3px rgb(4 155 90 / 15%);
}
@media (prefers-reduced-motion: reduce) {
  .history-result,
  .history-result > i {
    transition: none;
  }
}

.history-odds-heading {
  align-items: center;
  margin-bottom: 5px;
}
.history-xg {
  display: flex;
  align-items: center;
  gap: 5px;
}
.history-xg strong {
  color: #d8e9df;
  font: 400 10px/14px 'Space Mono', monospace;
  letter-spacing: -0.5px;
}
.history-odds-caption {
  margin-bottom: 5px;
  color: #95ab9e;
  font: 500 8px/10px 'Whitney', Arial, sans-serif;
  letter-spacing: 0.7px;
}
@media (prefers-reduced-motion: reduce) {
  .history-seasons > i {
    transition: none;
  }
}