/*
 * Global matchday ticker
 *
 * This file is the single presentation owner for the shared matchday ribbon.
 * JavaScript supplies data and state only; sizing and layout remain in CSS.
 */

html body.mf-page-shell .mf-score-ribbon,
html body.mf-v42-ready .mf-score-ribbon,
html body .mf-score-ribbon.mf-polish-ticker-open {
  --mf-ticker-progress: 16.667%;
  position: relative;
  z-index: 80;
  box-sizing: border-box;
  display: grid !important;
  grid-template-columns: 138px minmax(0, 1fr) 132px 76px 96px !important;
  align-items: center !important;
  width: 100%;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #050b09;
  color: #f7fbff;
  border-block: 1px solid rgba(244, 196, 48, .32);
}

html body.mf-home-v22 .mf-score-ribbon.mf-polish-ticker-open {
  display: grid !important;
}

html body.mf-home-v22.mf-score-ribbon-ready .mf-score-ribbon[data-top-events-ticker] {
  display: grid !important;
}

.mf-score-ribbon::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: auto 0 0;
  width: var(--mf-ticker-progress);
  height: 2px;
  background: linear-gradient(90deg, #e53935 0 33%, #f4c430 33% 66%, #46a83e 66%);
  transition: width .35s ease;
  pointer-events: none;
}

.mf-score-ribbon__brand {
  position: relative;
  box-sizing: border-box;
  display: flex !important;
  align-items: center !important;
  gap: .48rem;
  width: 138px !important;
  min-width: 138px !important;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  padding: 0 .72rem;
  overflow: hidden;
  background: #080b0b;
  color: #f7f7f4;
  text-decoration: none;
  white-space: nowrap;
  border-inline-end: 1px solid rgba(244, 196, 48, .24);
}

.mf-score-ribbon__brand img {
  display: block !important;
  width: 30px !important;
  height: 30px !important;
  object-fit: contain !important;
  flex: 0 0 30px !important;
}

.mf-score-ribbon__brand span {
  display: grid;
  gap: 2px;
  font-size: .68rem !important;
  font-weight: 800 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase;
}

.mf-score-ribbon__brand span b,
.mf-score-ribbon__brand span i {
  display: block;
  font: inherit;
  line-height: 1;
}

.mf-score-ribbon__brand span b { color: #f4c430; }
.mf-score-ribbon__brand span i { color: #f7f7f4; font-size: .56rem; font-style: normal; }

.mf-score-ribbon__brand span::before {
  content: none;
}

.mf-score-ribbon__brand::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 39px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e53935;
  box-shadow: 0 0 0 4px rgba(229, 57, 53, .14);
  animation: mfTickerLive 1.8s ease-in-out infinite;
}

@keyframes mfTickerLive {
  50% { opacity: .45; transform: scale(.72); }
}

.mf-score-ribbon__rail {
  box-sizing: border-box;
  display: flex !important;
  align-items: stretch !important;
  min-width: 0 !important;
  width: 100%;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  background: #0b1517;
}

.mf-score-ribbon__rail::-webkit-scrollbar { display: none; }

.mf-score-ribbon__track {
  box-sizing: border-box;
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: stretch !important;
  align-content: stretch !important;
  width: max-content !important;
  min-width: max-content !important;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  overflow: visible !important;
  transform: none !important;
  animation: none !important;
  will-change: auto !important;
}

.mf-score-ribbon__card {
  position: relative;
  box-sizing: border-box;
  display: grid !important;
  grid-template-areas: "league date" "match score" "meta meta" !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-rows: 12px 25px 13px !important;
  align-content: center !important;
  column-gap: .5rem;
  row-gap: 1px;
  scroll-snap-align: start;
  flex: 0 0 264px !important;
  width: 264px !important;
  min-width: 264px !important;
  max-width: 264px !important;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  margin: 0 !important;
  padding: .32rem .72rem !important;
  overflow: hidden !important;
  border-inline-end: 1px solid rgba(244, 196, 48, .16);
  background: #0b1517;
  color: #f7f7f4;
  text-decoration: none;
  transition: background-color .2s ease, box-shadow .2s ease;
}

.mf-score-ribbon__card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: #52635e;
  transition: background-color .2s ease;
}

.mf-score-ribbon__card[data-ticker-lane="stl"]::before { background: #e53935; }
.mf-score-ribbon__card[data-ticker-lane="women"]::before { background: #f4c430; }
.mf-score-ribbon__card[data-ticker-lane="north-america"]::before { background: #f7f7f4; }
.mf-score-ribbon__card[data-ticker-lane="europe"]::before { background: #3da7ff; }
.mf-score-ribbon__card[data-ticker-lane="africa"]::before { background: #46a83e; }
.mf-score-ribbon__card[data-ticker-lane="south-america"]::before { background: #f4c430; }
.mf-score-ribbon__card[data-ticker-lane="asia"]::before { background: #e53935; }
.mf-score-ribbon__card[data-ticker-lane="oceania"]::before { background: #63d7c6; }

.mf-score-ribbon__card::after {
  content: "VERIFIED";
  position: absolute;
  right: .68rem;
  bottom: .31rem;
  color: #6f837d;
  font-size: .46rem;
  line-height: 1;
  letter-spacing: .08em;
  font-weight: 800;
}

.mf-score-ribbon__card[data-source-state="guide"]::after { content: "OFFICIAL LINK"; }

.mf-score-ribbon__card.is-current {
  background: #10201e;
  box-shadow: inset 0 1px 0 rgba(70, 168, 62, .2);
}

.mf-score-ribbon__card.is-current::before { background: #f4c430; }
.mf-score-ribbon__card:hover { background: #132823; }

.mf-score-ribbon__league,
.mf-score-ribbon__date,
.mf-score-ribbon__card small {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: .58rem !important;
  line-height: 1 !important;
  letter-spacing: .06em !important;
  font-weight: 700 !important;
}

.mf-score-ribbon__league {
  grid-area: league;
  color: #f4c430;
  text-transform: uppercase;
}

.mf-score-ribbon__date {
  grid-area: date;
  text-align: right;
  color: #b9c7c2;
}

.mf-score-ribbon__card small {
  grid-area: meta;
  max-width: calc(100% - 54px);
  color: #a9b7b2;
}

.mf-score-ribbon__match {
  grid-area: match;
  display: flex !important;
  align-items: center !important;
  gap: .38rem;
  min-width: 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  font-size: .82rem !important;
  line-height: 1 !important;
  font-weight: 800;
}

.mf-score-ribbon__team {
  display: inline-flex !important;
  align-items: center !important;
  gap: .3rem;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.mf-score-ribbon__team img {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  object-fit: contain !important;
  flex: 0 0 24px !important;
}

.mf-score-ribbon__mark {
  display: inline-grid;
  width: 24px;
  height: 24px;
  min-width: 24px;
  flex: 0 0 24px;
  place-items: center;
  background: #131919;
  color: #f7f7f4;
}

.mf-score-ribbon__team b { font-size: .78rem !important; }

.mf-score-ribbon__match em {
  color: #778883 !important;
  font-size: .56rem !important;
  font-style: normal !important;
  text-transform: uppercase;
}

.mf-score-ribbon__scoreline {
  grid-area: score;
  align-self: center;
  color: #f4c430;
  font-size: .9rem;
  font-variant-numeric: tabular-nums;
}

.mf-score-ribbon__controls {
  box-sizing: border-box;
  display: grid !important;
  grid-template-columns: repeat(3, 44px);
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  background: #080b0b;
  border-inline-start: 1px solid rgba(244, 196, 48, .22);
}

.mf-score-ribbon__controls button,
.mf-score-ribbon__visibility,
.mf-score-ribbon__utility {
  box-sizing: border-box;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  padding: 0;
  border: 0;
  border-inline-end: 1px solid rgba(244, 196, 48, .16);
  background: #080b0b;
  color: #f7f7f4;
  font: inherit;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.mf-score-ribbon__controls button {
  width: 44px !important;
  min-width: 44px !important;
  font-size: 1.35rem !important;
}

.mf-score-ribbon__toggle span {
  font-size: .74rem !important;
  letter-spacing: -.12em;
}

.mf-score-ribbon__visibility {
  width: 76px !important;
  min-width: 76px !important;
  font-size: .64rem !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
}

.mf-score-ribbon__utility {
  width: 92px !important;
  min-width: 92px !important;
  padding: 0 .6rem;
  color: #f4c430 !important;
  font-size: .62rem !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase;
}

.mf-score-ribbon__controls button:hover,
.mf-score-ribbon__visibility:hover,
.mf-score-ribbon__utility:hover {
  background: #14201b;
  color: #f4c430;
}

.mf-score-ribbon :is(button, a):focus-visible {
  outline: 3px solid #f4c430 !important;
  outline-offset: -3px !important;
}

@media (prefers-reduced-motion: reduce) {
  .mf-score-ribbon__brand span::before { animation: none; }
  .mf-score-ribbon__rail { scroll-behavior: auto; }
}

@media (max-width: 1540px) and (min-width: 761px) {
  html body.mf-page-shell .mf-score-ribbon,
  html body.mf-v42-ready .mf-score-ribbon,
  html body .mf-score-ribbon.mf-polish-ticker-open {
    grid-template-columns: 138px minmax(0, 1fr) 132px 76px !important;
  }

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

@media (max-width: 760px) {
  html body.mf-page-shell .mf-score-ribbon,
  html body.mf-home-v22 .mf-score-ribbon,
  html body .mf-score-ribbon.mf-polish-ticker-open {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 88px !important;
    grid-template-rows: 60px !important;
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
  }

  .mf-score-ribbon__brand,
  .mf-score-ribbon__toggle,
  .mf-score-ribbon__visibility,
  .mf-score-ribbon__utility { display: none !important; }

  html body .mf-score-ribbon__rail,
  html body .mf-score-ribbon.mf-polish-ticker-open .mf-score-ribbon__rail {
    display: flex !important;
    grid-column: auto !important;
    grid-row: auto !important;
    min-width: 0 !important;
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
  }

  .mf-score-ribbon__track,
  .mf-score-ribbon__card {
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
  }

  .mf-score-ribbon__card {
    flex-basis: calc(100vw - 88px) !important;
    width: calc(100vw - 88px) !important;
    min-width: calc(100vw - 88px) !important;
    max-width: calc(100vw - 88px) !important;
    padding-inline: .62rem !important;
  }

  .mf-score-ribbon__controls {
    grid-template-columns: repeat(2, 44px);
    width: 88px !important;
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
  }

  .mf-score-ribbon__controls button {
    width: 44px !important;
    min-width: 44px !important;
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
  }

  .mf-polish-ticker-toggle { display: none !important; }
}

/* This shared component owns its geometry after route-specific density rules. */
html body .mf-score-ribbon[data-top-events-ticker] {
  grid-template-columns: 138px minmax(0, 1fr) 132px 76px 96px !important;
  gap: 0 !important;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  opacity: 1 !important;
}

html body .mf-score-ribbon[data-top-events-ticker] :is(
  .mf-score-ribbon__brand,
  .mf-score-ribbon__rail,
  .mf-score-ribbon__track,
  .mf-score-ribbon__card,
  .mf-score-ribbon__controls,
  .mf-score-ribbon__controls button,
  .mf-score-ribbon__visibility,
  .mf-score-ribbon__utility
) {
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
}

html body .mf-score-ribbon[data-top-events-ticker] .mf-score-ribbon__card {
  flex-basis: 264px !important;
  width: 264px !important;
  min-width: 264px !important;
  max-width: 264px !important;
}

html body .mf-score-ribbon[data-top-events-ticker] :is(.mf-score-ribbon__league, .mf-score-ribbon__date) {
  font-size: .58rem !important;
}

@media (max-width: 1540px) and (min-width: 761px) {
  html body .mf-score-ribbon[data-top-events-ticker] {
    grid-template-columns: 138px minmax(0, 1fr) 132px 76px !important;
  }
}

@media (max-width: 760px) {
  html body .mf-score-ribbon[data-top-events-ticker] {
    grid-template-columns: minmax(0, 1fr) 88px !important;
    grid-template-rows: 60px !important;
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
  }

  html body .mf-score-ribbon[data-top-events-ticker] :is(
    .mf-score-ribbon__rail,
    .mf-score-ribbon__track,
    .mf-score-ribbon__card,
    .mf-score-ribbon__controls,
    .mf-score-ribbon__controls button
  ) {
    height: 60px !important;
    min-height: 60px !important;
    max-height: 60px !important;
  }

  html body .mf-score-ribbon[data-top-events-ticker] :is(
    .mf-score-ribbon__brand,
    .mf-score-ribbon__toggle,
    .mf-score-ribbon__visibility,
    .mf-score-ribbon__utility
  ) {
    display: none !important;
  }

  html body .mf-score-ribbon[data-top-events-ticker] .mf-score-ribbon__track {
    min-width: max-content !important;
  }

  html body .mf-score-ribbon[data-top-events-ticker] .mf-score-ribbon__card {
    flex-basis: calc(100vw - 88px) !important;
    width: calc(100vw - 88px) !important;
    min-width: calc(100vw - 88px) !important;
    max-width: calc(100vw - 88px) !important;
    padding: .32rem .62rem !important;
  }

  html body .mf-score-ribbon[data-top-events-ticker] :is(.mf-score-ribbon__date, .mf-score-ribbon__card small) {
    display: block !important;
  }

  html body .mf-score-ribbon[data-top-events-ticker] :is(.mf-score-ribbon__team img, .mf-score-ribbon__mark) {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
  }

  html body .mf-score-ribbon[data-top-events-ticker] .mf-score-ribbon__team b {
    font-size: .78rem !important;
  }

  html body .mf-score-ribbon[data-top-events-ticker] .mf-score-ribbon__controls {
    grid-template-columns: repeat(2, 44px) !important;
    width: 88px !important;
  }
}