/* Safe retention layer.
   Layout, navigation, heroes, cards, and page rhythm are controlled by page CSS. */
:root {
  --mf-ux-nav-height: 50px;
  --nav-height: var(--mf-ux-nav-height);
}

html {
  scroll-padding-top: calc(var(--mf-ux-nav-height) + 0.75rem);
}

img,
iframe,
video {
  max-width: 100%;
}

details {
  border-radius: 8px;
}

summary {
  cursor: pointer;
}

.mf-score-ribbon {
  position: relative;
  z-index: 80;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: stretch;
  min-height: 42px;
  margin-top: 0;
  border-top: 1px solid rgba(245, 200, 66, 0.18);
  border-bottom: 1px solid rgba(255, 255, 255, 0.055);
  background:
    radial-gradient(circle at 12% 0%, rgba(245, 200, 66, 0.16), transparent 30%),
    linear-gradient(90deg, #040604, #08210f 34%, #091628 70%, #030503);
  color: #f7f7f7;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.38);
}

body.mf-score-ribbon-ready main > :first-child {
  padding-top: clamp(0.9rem, 2.4vw, 1.55rem) !important;
}

.mf-score-ribbon__brand,
.mf-score-ribbon__utility,
.mf-score-ribbon__card {
  text-decoration: none;
}

.mf-score-ribbon__brand {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 118px;
  padding: 0.28rem 0.72rem;
  background:
    linear-gradient(115deg, #f5c842 0 42%, #070807 42% 100%);
  color: #050505;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.mf-score-ribbon__brand img {
  width: 25px;
  height: 25px;
  object-fit: contain;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.82);
}

.mf-score-ribbon__rail {
  display: flex;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(90deg, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
}

.mf-score-ribbon__track {
  display: flex;
  min-width: max-content;
  will-change: transform;
}

.mf-score-ribbon__rail.is-marquee .mf-score-ribbon__track {
  animation: mf-score-ribbon-scroll 46s linear infinite;
}

.mf-score-ribbon__rail:hover .mf-score-ribbon__track,
.mf-score-ribbon__rail:focus-within .mf-score-ribbon__track {
  animation-play-state: paused;
}

@keyframes mf-score-ribbon-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.mf-score-ribbon__rail::-webkit-scrollbar {
  height: 6px;
}

.mf-score-ribbon__rail::-webkit-scrollbar-thumb {
  background: rgba(245, 200, 66, 0.5);
  border-radius: 999px;
}

.mf-score-ribbon__card {
  position: relative;
  display: grid;
  grid-template:
    "league date" auto
    "match match" 1fr
    "meta meta" auto / minmax(0, 1fr) auto;
  gap: 0.1rem 0.42rem;
  align-content: center;
  min-width: 176px;
  max-width: 218px;
  padding: 0.22rem 0.52rem;
  border-right: 1px solid rgba(0, 0, 0, 0.18);
  background:
    linear-gradient(90deg, rgba(245, 200, 66, 0.08), transparent 38%),
    linear-gradient(180deg, #101411, #090c0a);
  color: #f7f7f7;
  scroll-snap-align: start;
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.mf-score-ribbon__card:hover,
.mf-score-ribbon__card:focus-visible {
  z-index: 1;
  transform: translateY(-1px) scale(1.01);
  background: linear-gradient(180deg, #151a15, #0b0f0c);
  box-shadow: 0 12px 22px rgba(0, 0, 0, 0.34);
}

.mf-score-ribbon__league,
.mf-score-ribbon__date,
.mf-score-ribbon__card small,
.mf-score-ribbon__utility {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.mf-score-ribbon__league {
  grid-area: league;
  color: #f5c842;
  font-size: 0.55rem;
  font-weight: 900;
}

.mf-score-ribbon__date {
  grid-area: date;
  color: rgba(240, 244, 240, 0.62);
  font-size: 0.55rem;
  font-weight: 800;
}

.mf-score-ribbon__match {
  grid-area: match;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
}

.mf-score-ribbon__match em {
  color: rgba(240, 244, 240, 0.62);
  font-style: normal;
  font-size: 0.58rem;
  font-weight: 900;
  text-transform: uppercase;
}

.mf-score-ribbon__match--single {
  gap: 0.5rem;
}

.mf-score-ribbon__single-title {
  overflow: hidden;
  color: #ffffff;
  font-family: "Archivo Black", "Arial Black", system-ui, sans-serif;
  font-size: 0.82rem;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.mf-score-ribbon__team {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  min-width: 0;
  font-weight: 950;
  line-height: 1;
}

.mf-score-ribbon__team img,
.mf-score-ribbon__mark {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: contain;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(245, 200, 66, 0.18);
}

.mf-score-ribbon__mark {
  display: inline-grid;
  place-items: center;
  font-size: 0.58rem;
}

.mf-score-ribbon__team b {
  max-width: 3.35rem;
  overflow: hidden;
  color: #ffffff;
  font-family: "Archivo Black", "Arial Black", system-ui, sans-serif;
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mf-score-ribbon__card small {
  grid-area: meta;
  overflow: hidden;
  color: rgba(240, 244, 240, 0.58);
  font-size: 0.49rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mf-score-ribbon__utility {
  display: grid;
  place-items: center;
  min-width: 76px;
  padding-inline: 0.62rem;
  background: linear-gradient(180deg, #101411, #070807);
  color: #fff;
  font-size: 0.58rem;
  font-weight: 900;
}

.mf-score-ribbon__utility:hover,
.mf-score-ribbon__utility:focus-visible {
  background: #f5c842;
  color: #050505;
}

.mf-score-ribbon__card.is-loading {
  color: #333;
}

:focus-visible {
  outline: 2px solid rgba(245, 200, 66, 0.72);
  outline-offset: 3px;
}

.mf-ux-empty,
.mf-ux-hidden,
.mf-ux-rail,
.mf-ux-section-actions {
  display: none !important;
}

@media (max-width: 760px) {
  :root {
    --mf-ux-nav-height: 44px;
  }

  .mf-score-ribbon {
    grid-template-columns: minmax(112px, auto) minmax(0, 1fr);
    min-height: 40px;
  }

  .mf-score-ribbon__brand {
    min-width: 100px;
    padding-inline: 0.72rem;
    font-size: 0.66rem;
  }

  .mf-score-ribbon__brand img {
    width: 22px;
    height: 22px;
  }

  .mf-score-ribbon__card {
    min-width: 164px;
    padding: 0.22rem 0.5rem;
  }

  .mf-score-ribbon__team img,
  .mf-score-ribbon__mark {
    flex-basis: 21px;
    width: 21px;
    height: 21px;
  }

  .mf-score-ribbon__team b {
    max-width: 3.25rem;
    font-size: 0.78rem;
  }

  .mf-score-ribbon__utility {
    display: none;
  }
}