/* Featured markets carousel — 1:1 with polymarket.com's homepage carousel.
   Geometry and colours come from research/polymarket/carousel-css.txt
   (getComputedStyle dump of the live site, 2026-09-06). Loaded after
   layout-form.css so nothing here needs !important. */

.pm-fc {
  /* Palette read off polymarket.com's own carousel, so shell tokens (which
     differ per theme build) cannot recolour it. */
  --fc-text: #dee3e7;
  --fc-text-soft: #e5e5e5;
  --fc-team: #bbc4cd;
  --fc-muted: #7b8996;
  --fc-dim: #586879;
  --fc-surface: #181d21;
  --fc-surface-1: #1e2428;
  --fc-surface-2: #242b32;
  --fc-surface-3: #2e3841;
  --fc-green: #3db468;
  --fc-red: #cb3131;
  --fc-accent: #0093fd;

  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  font-family: inter, 'Inter', system-ui, sans-serif;
  color: var(--fc-text);
}

html.pm-shell--light .pm-fc {
  --fc-text: #12141a;
  --fc-text-soft: #12141a;
  --fc-team: #2b323b;
  --fc-muted: #565c66;
  --fc-dim: #7a8290;
  --fc-surface: #ffffff;
  --fc-surface-1: #ffffff;
  --fc-surface-2: #eef0f3;
  --fc-surface-3: #e2e6ea;
}

.pm-fc__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.pm-fc__frame {
  position: relative;
  flex: 1 1 auto;
  min-height: min(480px, 60vh);
  max-height: 500px;
  border-radius: 18px;
  border: 0;
  background: var(--fc-surface);
  overflow: hidden;
}

html.pm-shell--light .pm-fc__frame {
  border: 0;
  background: var(--surface-1, #fff);
  box-shadow: 0 4px 16px 0 rgba(59, 130, 246, 0.07);
}

.pm-fc__viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Value labels sit outside the plot, so a neighbouring slide's labels would
   otherwise bleed across the frame while it slides past. */
.pm-fc__slide {
  position: absolute;
  inset: 0;
  overflow: hidden;
  padding: 20px 20px 16px;
  visibility: hidden;
  opacity: 1;
  transition: transform 0.5s cubic-bezier(0, 0, 0.2, 1), visibility 0.5s, opacity 0.12s ease-in;
  will-change: transform;
}

/* Jumping the strip's seam: move without sliding the whole way round. */
.pm-fc__slide[data-wrapping='true'] {
  transition: visibility, opacity 0.12s ease-in;
}

.pm-fc__slide[data-jumping='true'] {
  transition: visibility, opacity 0.12s ease-out;
}

.pm-fc__slide.is-active,
.pm-fc__slide.is-adjacent {
  visibility: visible;
}

.pm-fc__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  height: 100%;
}

.pm-fc__slide[data-type='sports'] .pm-fc__inner {
  gap: 8px;
}

.pm-fc__overlay-link {
  position: absolute;
  inset: 0;
}

/* ------------------------------------------------------------------ head -- */

.pm-fc__head {
  position: relative;
  display: flex;
  gap: 16px;
  width: 100%;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 6px;
}

.pm-fc__head-main {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  gap: 16px;
}

.pm-fc__head-icon {
  position: relative;
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  min-width: 56px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--fc-surface-2);
}

.pm-fc__head-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pm-fc__head-text {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.pm-fc__title {
  position: relative;
  width: 100%;
  min-width: 0;
  margin: 0;
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  letter-spacing: -0.4px;
  color: var(--fc-text);
}

.pm-fc__title a {
  color: inherit;
  text-decoration: none;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-fc__title a:hover {
  text-decoration: underline;
}

.pm-fc__crumbs {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 4px;
  pointer-events: auto;
}

.pm-fc__crumb {
  font-size: 14px;
  line-height: 20px;
  font-weight: 540;
  letter-spacing: -0.09px;
  color: var(--fc-muted);
  text-decoration: none;
}

.pm-fc__crumb:hover {
  color: var(--fc-dim);
}

.pm-fc__crumb-sep {
  color: var(--fc-muted);
}

.pm-fc__head-mobile {
  display: none;
}

/* ------------------------------------------------------------------ body -- */

.pm-fc__body {
  display: flex;
  flex-direction: row;
  gap: 24px;
  flex: 1 1 auto;
  min-height: 0;
}

.pm-fc__col-left {
  position: relative;
  display: flex;
  flex: 0 0 40%;
  flex-direction: column;
  gap: 16px;
  width: 40%;
  min-width: 0;
  justify-content: space-between;
}

/* Sports/esports: head + team buttons + board stack from the top with an even
   16px gap. space-between threw all the slack into one gap between the buttons
   and the board, which read as a broken empty band. */
.pm-fc__slide[data-type='sports'] .pm-fc__col-left {
  justify-content: flex-start;
}

.pm-fc__col-right {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}

/* ---------------------------------------------------------------- sports -- */

.pm-fc__team-btns {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pm-fc__team-btns-row {
  display: flex;
  gap: 8px;
}

.pm-fc__team-btn {
  position: relative;
  flex: 1 1 0;
  height: 56px;
  min-width: 0;
  border-radius: 8px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-decoration: none;
  transition: color 150ms ease;
}

.pm-fc__team-btn-label {
  position: relative;
  z-index: 1;
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  color: var(--pm-team, #576b57);
  filter: brightness(1.5);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 150ms ease;
}

html.pm-shell--light .pm-fc__team-btn-label {
  filter: none;
}

.pm-fc__team-btn-wash {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 8px;
  background: var(--pm-team, #576b57);
  opacity: 0.2;
  transition: opacity 150ms ease;
}

html.pm-shell--light .pm-fc__team-btn-wash {
  opacity: 0.1;
}

.pm-fc__team-btn:hover .pm-fc__team-btn-wash {
  opacity: 1;
}

.pm-fc__team-btn:hover .pm-fc__team-btn-label {
  color: #fff;
}

/* leaderboard */

.pm-fc__lb {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0 8px 0 0;
}

.pm-fc__lb-head,
.pm-fc__lb-row {
  display: grid;
  /* Side was 2.5rem — enough for short team codes (LSU, MOUZ) but not for
     individual-sport names (tennis surnames like "C. Alcaraz"), which just
     got clipped. Widened so it clears realistic surnames too. */
  grid-template-columns: 1.25rem 1fr 4.25rem 3.5rem;
  align-items: center;
  column-gap: 8px;
  width: 100%;
  flex-shrink: 0;
}

.pm-fc__lb-head {
  padding-bottom: 8px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: var(--fc-dim);
}

.pm-fc__lb-head .pm-fc__lb-rank {
  padding-left: 7px;
}

.pm-fc__lb-side-head {
  text-align: center;
}

.pm-fc__lb-amount-head {
  text-align: right;
}

.pm-fc__lb-scroll {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}

.pm-fc__lb-scroll::-webkit-scrollbar {
  display: none;
}

.pm-fc__lb-list {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.pm-fc__lb-row {
  padding: 8px 0;
}

.pm-fc__lb-rank {
  font-size: 12px;
  line-height: 16px;
  color: var(--fc-dim);
  text-align: center;
}

.pm-fc__lb-trader {
  position: relative;
  z-index: 10;
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.pm-fc__lb-avatar {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--fc-surface-2);
}

.pm-fc__lb-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pm-fc__lb-name {
  font-size: 13px;
  line-height: 16px;
  font-weight: 400;
  color: var(--fc-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-fc__lb-side {
  font-size: 11px;
  line-height: 16px;
  font-weight: 400;
  padding: 3px 4px;
  min-width: 32px;
  border-radius: 4px;
  text-align: center;
  color: var(--fc-muted);
  background: var(--fc-surface-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-fc__lb-amount {
  display: flex;
  justify-content: flex-end;
}

.pm-fc__lb-amount span {
  font-size: 13px;
  line-height: 16px;
  font-weight: 500;
  color: var(--fc-green);
}

/* team headers on the chart side */

.pm-fc__teams {
  display: flex;
  align-items: center;
  gap: 16px;
}

.pm-fc__team {
  position: relative;
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.pm-fc__team-logo {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pm-fc__team-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pm-fc__team-name {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: var(--fc-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-fc__team:hover .pm-fc__team-name {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.pm-fc__teams-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}

.pm-fc__live {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pm-fc__live-dot {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fc-red);
}

.pm-fc__live-ping {
  position: absolute;
  inset: -1px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fc-red);
  opacity: 0.75;
  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes ping {
  0% {
    opacity: 0.75;
    transform: scale(1);
  }
  75%,
  to {
    opacity: 0;
    transform: scale(2);
  }
}

.pm-fc__live-text {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--fc-red);
  white-space: nowrap;
}

.pm-fc__kickoff {
  font-size: 13px;
  line-height: 16px;
  font-weight: 490;
  letter-spacing: -0.1px;
  color: var(--fc-dim);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- binary -- */

.pm-fc__prob-block {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pm-fc__prob {
  margin: 0;
  font-size: 28px;
  line-height: 34px;
  font-weight: 600;
  color: var(--fc-accent);
}

.pm-fc__delta {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pm-fc__delta[data-direction='up'] {
  color: var(--fc-green);
}

.pm-fc__delta[data-direction='down'] {
  color: var(--fc-red);
}

.pm-fc__delta[data-direction='down'] svg {
  transform: rotate(180deg);
}

.pm-fc__delta span {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
}

.pm-fc__yesno {
  display: flex;
  gap: 8px;
}

.pm-fc__yes,
.pm-fc__no {
  position: relative;
  z-index: 10;
  flex: 1 1 0;
  height: 56px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  transition: background-color 150ms ease, color 150ms ease;
}

.pm-fc__yes {
  color: var(--fc-green);
  background: color-mix(in srgb, var(--fc-green) 14%, transparent);
}

.pm-fc__yes:hover {
  color: #fff;
  background: var(--fc-green);
}

.pm-fc__no {
  color: var(--fc-red);
  background: color-mix(in srgb, var(--fc-red) 14%, transparent);
}

.pm-fc__no:hover {
  color: #fff;
  background: var(--fc-red);
}

/* ----------------------------------------------------------------- multi -- */

.pm-fc__outcomes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-radius: 8px;
}

.pm-fc__outcome {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 40px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--fc-surface-2);
  text-decoration: none;
}

.pm-fc__outcome-main {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
}

.pm-fc__outcome-icon {
  position: relative;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 5.2px;
  overflow: hidden;
  background: var(--fc-surface-2);
}

.pm-fc__outcome-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pm-fc__outcome-label {
  margin: 0;
  font-size: 15px;
  line-height: 20px;
  font-weight: 450;
  letter-spacing: -0.01em;
  color: var(--fc-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-fc__outcome:hover .pm-fc__outcome-label {
  text-decoration: underline;
}

.pm-fc__outcome-pct {
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  color: var(--fc-text);
  white-space: nowrap;
}

/* -------------------------------------------------------------- marquee -- */

.pm-fc__marquee {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.pm-fc__marquee-mask {
  position: relative;
  height: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent 0px, black 40px, black 100%);
  mask-image: linear-gradient(transparent 0px, black 40px, black 100%);
}

.pm-fc__marquee-track {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  animation: marquee-vertical 25s linear infinite;
  will-change: transform;
}

.pm-fc__marquee-track:hover {
  animation-play-state: paused;
}

@keyframes marquee-vertical {
  0% {
    transform: translateY(0);
  }
  to {
    transform: translateY(var(--marquee-vertical-distance, -33.333%));
  }
}

.pm-fc__comment {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 8px 0;
  flex-shrink: 0;
  text-decoration: none;
}

.pm-fc__comment-avatar {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--fc-surface-2);
}

.pm-fc__comment-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pm-fc__comment-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pm-fc__comment-name {
  margin: 0;
  font-size: 13px;
  line-height: 16px;
  font-weight: 400;
  color: var(--fc-text);
}

.pm-fc__comment-text {
  margin: 0;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: var(--fc-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ------------------------------------------------------------------ chart -- */

.pm-fc__chart-wrap {
  flex: 1 1 auto;
  min-height: 0;
}

.pm-fc__chart {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding-top: 8px;
  animation: 0.15s ease-out backwards fade-in;
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
}

@keyframes fade-enter {
  0% {
    opacity: 0;
  }
}

.pm-fc__chart-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.pm-fc__grid-line {
  stroke: var(--fc-surface-2);
}

.pm-fc__line-bg {
  stroke: var(--fc-surface);
}

.pm-fc__line-shimmer {
  stroke-opacity: 0;
}

.pm-fc__dot-pulse {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.pm-fc__chart-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}

.pm-fc__chart-label {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 10;
}

.pm-fc__chart-label-name {
  font-size: 13px;
  line-height: 14px;
  font-weight: 500;
  white-space: nowrap;
}

.pm-fc__chart-label-value {
  font-size: 26px;
  line-height: 1;
  font-weight: 600;
  white-space: nowrap;
  -webkit-text-stroke: 3px var(--fc-surface);
  paint-order: stroke;
}

html.pm-shell--light .pm-fc__chart-label-value {
  -webkit-text-stroke-color: var(--surface-1, #fff);
}

/* ----------------------------------------------------------------- footer -- */

.pm-fc__footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 18px;
}

.pm-fc__volume {
  margin: 0;
  font-size: 13px;
  line-height: 16px;
  font-weight: 490;
  letter-spacing: -0.1px;
  color: var(--fc-dim);
}

/* -------------------------------------------------------------------- nav -- */

.pm-fc__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pm-fc__nav-btn {
  display: flex;
  align-items: center;
  cursor: pointer;
  outline: none;
  border: 0;
  background: none;
  padding: 8px 6px 8px 8px;
}

.pm-fc__nav-btn--next {
  padding: 8px 8px 8px 6px;
}

.pm-fc__nav-pill {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  height: 40px;
  border-radius: 9999px;
  background: var(--fc-surface-1);
  transition: width 0.4s cubic-bezier(0.19, 1, 0.22, 1), transform 0.15s,
    background-color 0.15s ease;
}

.pm-fc__nav-btn:hover .pm-fc__nav-pill {
  background: var(--fc-surface-2);
}

.pm-fc__nav-btn:active .pm-fc__nav-pill {
  transform: scale(0.98);
}

.pm-fc__nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  color: var(--fc-muted);
}

.pm-fc__nav-btn--prev .pm-fc__nav-arrow {
  left: 15px;
}

.pm-fc__nav-btn--next .pm-fc__nav-arrow {
  right: 15px;
}

.pm-fc__nav-label {
  animation: fade-enter 200ms ease-in-out 50ms both;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--fc-muted);
}

.pm-fc__nav-btn--prev .pm-fc__nav-label {
  padding-left: 31px;
}

.pm-fc__nav-btn--next .pm-fc__nav-label {
  padding-right: 31px;
}

/* ------------------------------------------------------------- responsive -- */

@media (max-width: 1023px) {
  .pm-fc__frame {
    flex: none;
    min-height: 0;
    max-height: none;
    height: auto;
  }

  /* Stack collapses to a single slide in normal flow — an absolutely
     positioned strip has no height to give the card. */
  .pm-fc__viewport {
    position: relative;
    inset: auto;
  }

  .pm-fc__slide {
    display: none;
    position: relative;
    inset: auto;
    transform: none !important;
  }

  .pm-fc__slide.is-active {
    display: block;
  }

  .pm-fc__inner {
    height: auto;
  }

  .pm-fc__body {
    flex: none;
  }

  .pm-fc__body {
    flex-direction: column-reverse;
    gap: 16px;
  }

  .pm-fc__col-left,
  .pm-fc__col-right {
    width: 100%;
  }

  .pm-fc__slide[data-type='sports'] .pm-fc__head-desktop {
    display: none;
  }

  .pm-fc__head-mobile {
    display: block;
  }

  .pm-fc__title {
    font-size: 20px;
    line-height: 28px;
  }

  .pm-fc__chart-wrap,
  .pm-fc__marquee {
    display: none;
  }

  .pm-fc__lb {
    max-height: 200px;
  }
}

/* --------------------------------------------------------------- skeleton -- */

.pm-fc__skeleton {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: color-mix(in srgb, var(--fc-surface-2) 50%, transparent);
}

.pm-fc__skeleton::before {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%) skewX(-12deg);
  background: linear-gradient(
    to right,
    transparent,
    var(--fc-surface-2),
    transparent
  );
  animation: skeletonShimmer 2s infinite;
}

@keyframes skeletonShimmer {
  to {
    transform: translate(200%) skewX(-12deg);
  }
}

/* Image sits above its own placeholder once it decodes. */
.pm-fc__head-icon img,
.pm-fc__outcome-icon img,
.pm-fc__team-logo img,
.pm-fc__lb-avatar img,
.pm-fc__comment-avatar img {
  position: relative;
  z-index: 1;
}

/* ----------------------------------------------------------------- ticker -- */

/* A value that changes while the page is open rolls the new number in from
   below, the way the live figures move on polymarket.com. */
.pm-fc__tick {
  position: relative;
  display: inline-flex;
  overflow: hidden;
  vertical-align: bottom;
}

.pm-fc__tick > span {
  display: block;
}

.pm-fc__tick > span.is-entering {
  animation: pm-fc-tick-in 0.35s cubic-bezier(0.19, 1, 0.22, 1) both;
}

.pm-fc__tick > span.is-leaving {
  position: absolute;
  inset: 0;
  animation: pm-fc-tick-out 0.35s cubic-bezier(0.19, 1, 0.22, 1) both;
}

@keyframes pm-fc-tick-in {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes pm-fc-tick-out {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-100%);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pm-fc__slide,
  .pm-fc__slide[data-wrapping='true'],
  .pm-fc__slide[data-jumping='true'],
  .pm-fc__nav-pill {
    transition: none;
  }

  .pm-fc__marquee-track,
  .pm-fc__chart,
  .pm-fc__skeleton::before,
  .pm-fc__tick > span,
  .pm-fc__nav-label,
  .pm-fc__dot-pulse,
  .pm-fc__live-ping {
    animation: none;
  }
}

/* ------------------------------------------------------ carousel + side -- */

/* Carousel on the left, promo/hot-topics column on the right — the homepage
   split from polymarket.com. The column is as tall as the frame plus the nav
   row beneath it, so both edges line up. */
.markets-page__featured {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 24px;
  width: 100%;
}

.markets-page__featured .pm-fc {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 899px;
}

/* Below this the column would be narrower than its own promo cards. */
@media (max-width: 1240px) {
  .pm-fc-side {
    display: none;
  }
}

.markets-page__featured .pm-fc__frame {
  min-height: min(474px, 60vh);
  max-height: 494px;
}

.pm-fc-side {
  /* The column is a sibling of `.pm-fc`, not a child, so it needs the palette
     declared here too — without it the promo cards and the hot-topics panel
     lost their background and border entirely. */
  --fc-text: #dee3e7;
  --fc-text-soft: #e5e5e5;
  --fc-team: #bbc4cd;
  --fc-muted: #7b8996;
  --fc-dim: #586879;
  --fc-surface: #181d21;
  --fc-surface-1: #1e2428;
  --fc-surface-2: #242b32;
  --fc-surface-3: #2e3841;
  --fc-green: #3db468;
  --fc-red: #cb3131;
  --fc-accent: #0093fd;

  display: flex;
  flex: 0 1 379px;
  min-width: 300px;
  max-width: 427px;
  flex-direction: column;
  justify-content: space-between;
  height: calc(min(474px, 60vh) + 56px);
  font-family: inter, 'Inter', system-ui, sans-serif;
  color: var(--fc-text);
}

html.pm-shell--light .pm-fc-side {
  --fc-text: #12141a;
  --fc-text-soft: #12141a;
  --fc-team: #2b323b;
  --fc-muted: #565c66;
  --fc-dim: #7a8290;
  --fc-surface: #ffffff;
  --fc-surface-1: #ffffff;
  --fc-surface-2: #eef0f3;
  --fc-surface-3: #e2e6ea;
}

/* ----------------------------------------------------------------- promo -- */

.pm-fc-side__promos {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 12px;
  margin-bottom: 20px;
}

/* Phone-only search field under the bonus card (hidden on desktop). */
.pm-fc-side__search {
  display: none;
  position: relative;
  align-items: center;
  width: 100%;
  flex-shrink: 0;
}

.pm-fc-side__search-icon {
  position: absolute;
  left: 14px;
  display: inline-flex;
  color: var(--fc-muted);
  pointer-events: none;
}

.pm-fc-side__search-field {
  width: 100%;
  height: 44px;
  padding: 0 14px 0 40px;
  border-radius: 12px;
  border: 0;
  background: var(--fc-surface);
  color: var(--fc-text);
  font-family: inherit;
  font-size: 15px;
  outline: none;
  transition: border-color 150ms ease;
}

.pm-fc-side__search-field::placeholder {
  color: var(--fc-muted);
}

.pm-fc-side__search-field:focus {
  box-shadow: inset 0 0 0 1px var(--fc-accent);
}

.pm-fc-promo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 102px;
  padding: 0 16px;
  border-radius: 20px;
  border: 1px solid var(--fc-surface-2);
  background: var(--fc-surface);
  overflow: hidden;
  text-decoration: none;
  transition: border-color 150ms ease, background-color 150ms ease;
}

.pm-fc-promo:hover {
  border-color: var(--fc-surface-3);
}

.pm-fc-promo--signup {
  background: linear-gradient(
    100deg,
    var(--fc-surface-1) 0%,
    color-mix(in srgb, var(--fc-accent) 22%, var(--fc-surface-1)) 100%
  );
}

/* The single bonus card fills the height the two stacked promos used to. */
.pm-fc-promo--bonus {
  height: 160px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 18px 14px 20px;
  border: 0;
}

.pm-fc-promo--bonus:hover {
  border: 0;
}

/* Animated treasure chest, peeking from the top-right of the bonus card. */
/* Lottie sticker (bonus-chest.json), pinned to the right side of the card. */
.pm-fc-promo__chest {
  position: absolute;
  top: 50%;
  right: -10px;
  width: 160px;
  height: 160px;
  transform: translateY(-50%);
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

.pm-fc-promo__chest svg {
  display: block;
  width: 100%;
  height: 100%;
}

.pm-fc-promo__text {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}

.pm-fc-promo--bonus .pm-fc-promo__text {
  max-width: calc(100% - 116px);
}

/* Bigger title so the left column fills the card height next to the chest. */
.pm-fc-promo--bonus .pm-fc-promo__title {
  font-size: 17px;
  line-height: 23px;
}

/* Larger copy, balanced onto two full lines instead of one long + one stubby. */
.pm-fc-promo--bonus .pm-fc-promo__body {
  font-size: 13px;
  line-height: 17px;
  text-wrap: balance;
}

.pm-fc-promo__title {
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  color: var(--fc-text);
}

.pm-fc-promo__body {
  font-size: 13px;
  line-height: 17px;
  font-weight: 490;
  letter-spacing: -0.1px;
  color: var(--fc-muted);
}

.pm-fc-promo__cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 16px;
  border: 0;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  color: #fff;
  background: var(--fc-accent);
  cursor: pointer;
  transition: filter 150ms ease;
}

.pm-fc-promo--signup .pm-fc-promo__cta {
  background: var(--fc-surface-2);
  color: var(--fc-text);
}

.pm-fc-promo:hover .pm-fc-promo__cta {
  filter: brightness(1.1);
}

/* Bonus CTA: same blue button as the rest of the site, just pinned to the
   bottom-right corner of the card. */
/* Button sits at the bottom-left, under the copy — the text + button form the
   left column, the chest fills the right, so no corner is left empty. */
.pm-fc-promo--bonus .pm-fc-promo__cta {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  margin-top: auto;
  font-size: 15px;
}

/* ----------------------------------------------------------- hot topics -- */

/* Flat panel: no card chrome, so "Explore all" lines up with the carousel's
   nav pills at the bottom of the row. */
.pm-fc-hot {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  padding: 0;
  border: 0;
  background: none;
}

html.pm-shell--light .pm-fc-promo {
  border-color: rgba(37, 99, 235, 0.1);
  background: var(--fc-surface-1);
}

.pm-fc-hot__head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 6px;
  font-size: 18px;
  line-height: 24px;
  font-weight: 600;
  color: var(--fc-text);
  text-decoration: none;
}

.pm-fc-hot__head .pm-fc-hot__chevron {
  color: var(--fc-muted);
}

.pm-fc-hot__list {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  overflow-y: auto;
  scrollbar-width: none;
}

.pm-fc-hot__list::-webkit-scrollbar {
  display: none;
}

.pm-fc-hot__row {
  display: grid;
  grid-template-columns: 16px 1fr auto 16px 12px;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 10px;
  text-decoration: none;
  transition: background-color 150ms ease;
}

.pm-fc-hot__row:hover {
  background: var(--fc-surface-2);
}

.pm-fc-hot__rank {
  font-size: 14px;
  line-height: 20px;
  font-weight: 490;
  color: var(--fc-dim);
  text-align: center;
}

.pm-fc-hot__label {
  font-size: 15px;
  line-height: 20px;
  font-weight: 540;
  letter-spacing: -0.01em;
  color: var(--fc-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pm-fc-hot__volume {
  font-size: 13px;
  line-height: 16px;
  font-weight: 490;
  letter-spacing: -0.1px;
  color: var(--fc-dim);
  white-space: nowrap;
}

.pm-fc-hot__flame {
  font-size: 12px;
  line-height: 1;
}

.pm-fc-hot__chevron {
  display: inline-flex;
  color: var(--fc-dim);
}

.pm-fc-hot__all {
  flex-shrink: 0;
  margin-top: 10px;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--fc-surface);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  text-align: center;
  color: var(--fc-text);
  text-decoration: none;
  transition: background-color 150ms ease;
}

.pm-fc-hot__all:hover {
  background: var(--fc-surface-3);
}

@media (max-width: 1023px) {
  .markets-page__featured {
    flex-direction: column;
    gap: 16px;
    /* Pull the bonus card + search to the very top, above the category rail
       (which then sits right above the "All markets" heading). */
    order: -1;
  }

  /* Phone layout: the whole featured block is just the bonus card — no
     carousel, no hot-topics list. Desktop (>1240) is untouched; the
     1024–1240 range still hides the column via the max-width:1240 rule. */
  .markets-page__featured .pm-fc {
    display: none;
  }

  .pm-fc-side {
    display: flex;
    /* In a column flex parent `flex: 0 1 379px` makes 379px the *height*, which
       left ~220px of dead space under the card. Shrink-wrap to the card. */
    flex: none;
    height: auto;
    min-height: 0;
    width: 100%;
    max-width: none;
    gap: 12px;
  }

  .pm-fc-side__promos {
    margin-bottom: 0;
  }

  .pm-fc-side__search {
    display: flex;
  }

  .pm-fc-hot {
    display: none;
  }
}

/* --------------------------------------------------------- live activity -- */

/* Fills float up from the bottom-left of the chart. Geometry, stacking and the
   two keyframes below are Polymarket's own (LiveActivityOverlay + the
   liveActivityIndicator* keyframes in their bundle). */
.pm-fc__activity {
  position: absolute;
  z-index: 10;
  pointer-events: none;
  bottom: 40px;
  left: 10px;
}

.pm-fc__activity-item {
  position: absolute;
  left: 0;
  transition: bottom 200ms ease-in-out;
  animation: liveActivityIndicatorIn 0.2s ease-in-out both;
}

.pm-fc__activity-item.is-leaving {
  animation: liveActivityIndicatorOut 0.2s ease-in-out forwards;
}

.pm-fc__activity-item span {
  white-space: nowrap;
  font-weight: 600;
  font-size: 13px;
  /* Their outline: 1px in eight directions, in the chart's own background. */
  text-shadow: 1px 0 0 var(--fc-surface), -1px 0 0 var(--fc-surface),
    0 1px 0 var(--fc-surface), 0 -1px 0 var(--fc-surface),
    1px 1px 0 var(--fc-surface), -1px -1px 0 var(--fc-surface),
    1px -1px 0 var(--fc-surface), -1px 1px 0 var(--fc-surface);
}

html.pm-shell--light .pm-fc__activity-item span {
  text-shadow: 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff, 1px 1px 0 #fff,
    -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
}

@keyframes liveActivityIndicatorIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes liveActivityIndicatorOut {
  to {
    opacity: 0;
    transform: translateY(-20px);
  }
}

/* ---------------------------------------------------------------- nav row -- */

.pm-fc__nav-pills {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pm-fc__dots {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 4px;
}

.pm-fc__dots .pm-fc__dot-btn {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  cursor: pointer;
  background: var(--fc-dim);
  opacity: 0.45;
  transition: width 300ms cubic-bezier(0.19, 1, 0.22, 1), opacity 200ms ease,
    background-color 200ms ease;
}

.pm-fc__dots .pm-fc__dot-btn:hover {
  opacity: 0.8;
}

.pm-fc__dots .pm-fc__dot-btn.is-active {
  width: 28px;
  opacity: 1;
  background: var(--fc-muted);
}

/* --------------------------------------------------------------- avatars -- */

.pm-fc__lb-avatar,
.pm-fc__comment-avatar {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .pm-fc__activity-item,
  .pm-fc__activity-item.is-leaving {
    animation: none;
  }

  .pm-fc__dots .pm-fc__dot-btn {
    transition: none;
  }
}

/* ------------------------------------------------------ spreads / totals -- */

.pm-fc__board {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--fc-surface-2) 60%, transparent);
}

.pm-fc__board-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pm-fc__board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.pm-fc__board-label {
  flex-shrink: 0;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: var(--fc-text);
}

/* Their line strip is a 112px window you scroll through. */
.pm-fc__lines {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: safe center;
  gap: 2px;
  width: 112px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
}

.pm-fc__lines::-webkit-scrollbar {
  display: none;
}

.pm-fc__lines .pm-fc__line {
  flex: 0 0 auto;
  padding: 4px 12px;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  color: var(--fc-dim);
  transition: color 150ms ease, background-color 150ms ease;
}

.pm-fc__lines .pm-fc__line:hover {
  color: var(--fc-muted);
}

.pm-fc__lines .pm-fc__line.is-active {
  /* Theirs grows to 15/22.5 and turns white rather than sitting on a chip. */
  font-size: 15px;
  line-height: 22.5px;
  color: var(--fc-text);
  background: transparent;
}

.pm-fc__board-pairs {
  position: relative;
}

.pm-fc__board-pair {
  display: none;
  gap: 8px;
  width: 100%;
}

.pm-fc__board-pair.is-active {
  display: flex;
}

.pm-fc__board-btn {
  position: relative;
  z-index: 10;
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  height: 40px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 8px;
  background: var(--fc-surface-2);
  color: var(--fc-muted);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  overflow: hidden;
  transition: background-color 150ms ease, color 150ms ease;
}

.pm-fc__board-btn:hover {
  background: var(--fc-surface-3);
  color: var(--fc-text);
}

.pm-fc__board-btn span {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Switching lines slides the new pair in — their `slide-enter`. */
.pm-fc__board-pair.is-entering .pm-fc__board-btn:first-child span {
  animation: slide-enter 200ms ease-in-out both;
  --slide-enter-from: 32px;
}

.pm-fc__board-pair.is-entering .pm-fc__board-btn:last-child span {
  animation: slide-enter 200ms ease-in-out both;
  --slide-enter-from: -32px;
}

@keyframes slide-enter {
  0% {
    translate: 0 var(--slide-enter-from, 12px);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pm-fc__board-pair.is-entering .pm-fc__board-btn span {
    animation: none;
  }
}

/* ------------------------------------------------- chart axes / scoreboard -- */

/* Axis labels: Arial 12, as measured on the live chart. */
.pm-fc__axis-x,
.pm-fc__axis-y {
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
}

.pm-fc__axis-x {
  fill: var(--fc-dim);
}

.pm-fc__axis-y {
  fill: var(--fc-muted);
}

/* The grey that stays behind when the coloured line is clipped on hover —
   their `stroke-neutral-50`, measured as #1E2428 in dark mode. */
.pm-fc__line-bg {
  stroke: var(--fc-surface-1);
}

.pm-fc__line {
  clip-path: inset(-13px);
}

.pm-fc__cursor {
  stroke: var(--fc-surface-2);
  pointer-events: none;
  transition: opacity 120ms ease;
}

.pm-fc__hit {
  cursor: crosshair;
}

/* Timestamp that follows the cursor, as on their chart. */
.pm-fc__chart-time {
  position: absolute;
  z-index: 11;
  pointer-events: none;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 12px;
  font-weight: 500;
  color: var(--fc-muted);
}

/* ------------------------------------------------------------- scoreboard -- */

.pm-fc__scoreboard {
  display: flex;
  flex: 0 0 auto;
  width: 140px;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.pm-fc__score {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: 12px;
}

.pm-fc__score-num {
  font-size: 2rem;
  line-height: 1;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--fc-text);
}

.pm-fc__score-num:first-child {
  justify-self: end;
}

.pm-fc__score-num:last-child {
  justify-self: start;
}

.pm-fc__score-num.is-behind {
  color: var(--fc-dim);
}

.pm-fc__score-dash {
  width: 12px;
  height: 4px;
  margin-bottom: 20px;
  border-radius: 9999px;
  background: var(--fc-dim);
}

.pm-fc__game-status {
  font-size: 14px;
  line-height: 20px;
  color: var(--fc-muted);
  text-transform: uppercase;
  white-space: nowrap;
}

/* Team badges are bare artwork — no plate, no border. */
.pm-fc__team-logo {
  background: none;
}

/* ----------------------------------------------------------------- legend -- */

.pm-fc__legend {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  flex-shrink: 0;
  padding-bottom: 2px;
}

.pm-fc__legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.pm-fc__legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
}

.pm-fc__legend-label {
  margin: 0;
  font-size: 13px;
  line-height: 16px;
  font-weight: 490;
  letter-spacing: -0.1px;
  color: var(--fc-muted);
}

.pm-fc__legend-value {
  margin-left: 2px;
  font-weight: 600;
  color: var(--fc-text);
}

@media (prefers-reduced-motion: reduce) {
  .pm-fc__cursor {
    transition: none;
  }
}

/* ------------------------------------------------ measured against the live
   carousel (CDP audit, research/polymarket/audit/*.txt). Every number below is
   a computed value read off polymarket.com, not an estimate. ------------- */

/* Title: 24/32 on binary+multi, 24/28 with -0.36 tracking on sports & up/down. */
.pm-fc__title {
  font-size: 24px;
  line-height: 32px;
  letter-spacing: normal;
}

.pm-fc__slide[data-type='sports'] .pm-fc__title,
.pm-fc__slide[data-type='updown'] .pm-fc__title {
  line-height: 28px;
  letter-spacing: -0.36px;
}

/* Event icon and team badges: 9.2px corners, not 6. */
.pm-fc__head-icon,
.pm-fc__team-logo {
  border-radius: 9.2px;
}

/* Share / bookmark, 36px circles at the top right. */
.pm-fc__head-actions {
  position: relative;
  z-index: 10;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 4px;
}

.pm-fc__head-btn {
  display: flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  cursor: pointer;
  color: var(--fc-muted);
  transition: background-color 150ms ease, color 150ms ease;
}

.pm-fc .pm-fc__head-btn {
  background: transparent;
}

.pm-fc .pm-fc__head-btn:hover {
  background: var(--fc-surface-2);
  color: var(--fc-text);
}

/* Flash green after the event link is copied to the clipboard. */
.pm-fc .pm-fc__head-btn.is-copied,
.pm-fc .pm-fc__head-btn.is-copied:hover {
  color: var(--fc-green);
}

/* Team buttons: 16/20 w600 -0.18, not 18/24. */
.pm-fc__team-btn-label {
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.18px;
}

/* Yes / No: same type as the team buttons, 8px 16px padding, 15% wash. */
.pm-fc__yes,
.pm-fc__no {
  height: 56px;
  padding: 8px 16px;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.18px;
}

.pm-fc__yes {
  background: color-mix(in srgb, var(--fc-green) 15%, transparent);
}

.pm-fc__no {
  background: color-mix(in srgb, var(--fc-red) 15%, transparent);
}

/* Probability line: 28/28 w600 -0.42. */
.pm-fc__prob {
  font-size: 28px;
  line-height: 28px;
  letter-spacing: -0.42px;
}

.pm-fc__prob-block {
  gap: 12px;
}

/* Outcome rows: 15/22.5 w450 -0.15 for the label, 20/24 w600 -0.2 for the value. */
.pm-fc__outcome-label {
  font-size: 15px;
  line-height: 22.5px;
  font-weight: 450;
  letter-spacing: -0.15px;
  color: var(--fc-text-soft);
}

.pm-fc__outcome-pct {
  font-size: 20px;
  line-height: 24px;
  letter-spacing: -0.2px;
  color: var(--fc-text-soft);
}

.pm-fc__outcome {
  gap: 12px;
  padding-bottom: 8px;
}

.pm-fc__outcomes {
  border-radius: 11.2px;
}

/* Spread / total pair buttons: 40px tall, 13/19.5 w500, no upper-casing. */
.pm-fc__board-btn {
  gap: 6px;
  padding: 0 12px;
  font-size: 13px;
  line-height: 19.5px;
  font-weight: 500;
  text-transform: none;
}

.pm-fc__board-head {
  height: 32px;
}

/* Their line strip is a 112px window flanked by two 32px arrows. */
.pm-fc__lines-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.pm-fc__lines {
  width: 112px;
}

.pm-fc .pm-fc__lines-arrow {
  display: flex;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 7.2px;
  cursor: pointer;
  background: transparent;
  color: var(--fc-muted);
  transition: background-color 150ms ease, color 150ms ease;
}

.pm-fc .pm-fc__lines-arrow:hover {
  background: var(--fc-surface-2);
  color: var(--fc-text);
}

/* Scoreboard: 154 / 140 / 154 grid, 32/48 numerals. */
.pm-fc__teams {
  display: grid;
  grid-template-columns: minmax(0, 180px) 140px minmax(0, 180px);
  justify-content: center;
  align-items: end;
  gap: 24px;
  width: 100%;
}

.pm-fc__team {
  gap: 12px;
}

.pm-fc__team-name {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: var(--fc-team);
}

.pm-fc__scoreboard {
  width: 140px;
  gap: 12px;
}

.pm-fc__score-num {
  font-size: 32px;
  line-height: 48px;
  font-weight: 500;
}

.pm-fc__score-num.is-behind {
  color: var(--fc-dim);
}

.pm-fc__score-dash {
  background: var(--fc-surface-3);
}

.pm-fc__game-status {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
}

/* Chart column: 12px between the scoreboard and the plot. */
.pm-fc__col-right {
  gap: 12px;
}

/* ------------------------------------------------------------- up / down -- */

.pm-fc__ud-row {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.pm-fc__ud {
  position: relative;
  z-index: 10;
  display: flex;
  flex: 1 1 0;
  height: 56px;
  min-width: 0;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  text-decoration: none;
  background: color-mix(in srgb, var(--pm-ud) 15%, transparent);
  transition: background-color 150ms ease;
}

.pm-fc__ud:hover {
  background: color-mix(in srgb, var(--pm-ud) 28%, transparent);
}

.pm-fc__ud-inner {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pm-fc__ud-label {
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: -0.18px;
  color: var(--pm-ud);
}

.pm-fc__ud-odds {
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: -0.18px;
  color: var(--pm-ud);
}

/* Comment rows: 13/16 name over 12/16 body, 20px avatar, 8px padding. */
.pm-fc__comment {
  gap: 6px;
  padding: 8px 0;
}

.pm-fc__comment-name {
  font-size: 13px;
  line-height: 16px;
  letter-spacing: -0.1px;
  color: var(--fc-text-soft);
}

.pm-fc__comment-text {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.1px;
}

/* Breadcrumb separator matches their 16/24. */
.pm-fc__crumb-sep {
  font-size: 16px;
  line-height: 24px;
}

.pm-fc__crumb {
  padding-right: 2px;
}

/* ---------------------------------------------------------------- links -- */

/* `.pm-shell a{color:inherit}` in the shell outranks a single class, so every
   link colour inside the carousel is restated one level deeper. */
.pm-fc .pm-fc__crumb {
  color: var(--fc-muted);
}

.pm-fc .pm-fc__crumb:hover {
  color: var(--fc-dim);
}

.pm-fc .pm-fc__title a {
  color: var(--fc-text);
}

.pm-fc .pm-fc__lb-trader,
.pm-fc .pm-fc__lb-name {
  color: var(--fc-text);
}

.pm-fc .pm-fc__team .pm-fc__team-name {
  color: var(--fc-team);
}

.pm-fc .pm-fc__board-btn {
  color: var(--fc-muted);
}

.pm-fc .pm-fc__board-btn:hover {
  color: var(--fc-text);
}

.pm-fc .pm-fc__outcome .pm-fc__outcome-label,
.pm-fc .pm-fc__outcome .pm-fc__outcome-pct {
  color: var(--fc-text-soft);
}

.pm-fc .pm-fc__comment .pm-fc__comment-name {
  color: var(--fc-text-soft);
}

.pm-fc .pm-fc__comment .pm-fc__comment-text {
  color: var(--fc-muted);
}

.pm-fc .pm-fc__yes {
  color: var(--fc-green);
}

.pm-fc .pm-fc__no {
  color: var(--fc-red);
}

.pm-fc .pm-fc__yes:hover,
.pm-fc .pm-fc__no:hover {
  color: #fff;
}

.pm-fc .pm-fc__ud .pm-fc__ud-label,
.pm-fc .pm-fc__ud .pm-fc__ud-odds {
  color: var(--pm-ud);
}

.pm-fc .pm-fc__team-btn .pm-fc__team-btn-label {
  color: var(--pm-team, #576b57);
}

.pm-fc .pm-fc__team-btn:hover .pm-fc__team-btn-label {
  color: #fff;
}

.pm-fc-side .pm-fc-hot__row .pm-fc-hot__label {
  color: var(--fc-text);
}

.pm-fc-side .pm-fc-hot__head,
.pm-fc-side .pm-fc-hot__all {
  color: var(--fc-text);
}

.pm-fc-side .pm-fc-promo .pm-fc-promo__title {
  color: var(--fc-text);
}

.pm-fc-side .pm-fc-promo .pm-fc-promo__body {
  color: var(--fc-muted);
}

.pm-fc__footer-right {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  line-height: 16px;
  font-weight: 490;
  letter-spacing: -0.1px;
  color: var(--fc-dim);
}

/* ------------------------------------------------- engine on event pages -- */

/* The same chart engine drives the event pages, where it lands inside
   `.event-chart__plot` rather than a carousel slide. */
.event-chart__plot .pm-fc__chart {
  --fc-text: #dee3e7;
  --fc-text-soft: #e5e5e5;
  --fc-muted: #7b8996;
  --fc-dim: #586879;
  --fc-surface: #181d21;
  --fc-surface-1: #1e2428;
  --fc-surface-2: #242b32;

  position: absolute;
  inset: 0;
  padding-top: 0;
}

html.pm-shell--light .event-chart__plot .pm-fc__chart {
  --fc-text: #12141a;
  --fc-text-soft: #12141a;
  --fc-muted: #565c66;
  --fc-dim: #7a8290;
  --fc-surface: #ffffff;
  --fc-surface-1: #ffffff;
  --fc-surface-2: #eef0f3;
}

/* --------------------------------------------------------- up/down header -- */

/* Target price / live price / countdown, the trio across the top of their
   Up/Down slide. */
.pm-fc__ud-stats {
  display: flex;
  flex-shrink: 0;
  align-items: flex-start;
  gap: 28px;
  padding-left: 24px;
}

.pm-fc__ud-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  white-space: nowrap;
}

.pm-fc__ud-stat-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  line-height: 16px;
  font-weight: 490;
  letter-spacing: -0.1px;
  color: var(--fc-muted);
}

.pm-fc__ud-stat-value {
  font-size: 22px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: -0.3px;
  color: var(--fc-text);
  font-variant-numeric: tabular-nums;
}

.pm-fc__ud-stat--live .pm-fc__ud-stat-label,
.pm-fc__ud-stat--live .pm-fc__ud-stat-value {
  color: #ff9900;
}

.pm-fc__ud-stat--ends .pm-fc__ud-stat-value {
  color: var(--fc-red);
}

.pm-fc__ud-delta {
  font-weight: 600;
}

.pm-fc__ud-delta[data-direction='up'] {
  color: var(--fc-green);
}

.pm-fc__ud-delta[data-direction='down'] {
  color: var(--fc-red);
}

/* Dashed line at the window's target price. */
.pm-fc__target-line {
  stroke: var(--fc-surface-3);
  pointer-events: none;
}

@media (max-width: 1023px) {
  .pm-fc__ud-stats {
    display: none;
  }
}

/* ------------------------------------------------------------- odometer -- */

/* Their live price rolls each digit into place instead of redrawing the number. */
.pm-fc__odometer {
  display: inline-flex;
  align-items: center;
}

.pm-fc__odo-digit {
  display: inline-block;
  width: 0.62em;
  height: 1em;
  overflow: hidden;
  line-height: 1;
}

.pm-fc__odo-reel {
  display: block;
  transition: transform 380ms cubic-bezier(0.19, 1, 0.22, 1);
}

.pm-fc__odo-reel > span {
  display: block;
  height: 1em;
  line-height: 1;
  text-align: center;
}

.pm-fc__odo-sep {
  display: inline-block;
}

/* Pill that labels the dashed target line. */
.pm-fc__target-pill rect {
  fill: var(--fc-surface-3);
}

.pm-fc__target-pill text {
  fill: var(--fc-text);
  font-family: inter, 'Inter', system-ui, sans-serif;
  font-weight: 600;
}

/* "LIVE" strip under the up/down chart. */
.pm-fc__live-row {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding-top: 2px;
}

.pm-fc__live-word {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--fc-red);
}