/**
 * Winner Marquee Component Styles
 * Clean rewrite of the Grand Prize Record 2-row carousel.
 *
 * Reference values (verified, do not re-derive):
 * - 2-row grid, column flow (d:2 in winnerCarousels config)
 * - Continuous left scroll: 73s linear infinite
 * - Card: 2.74rem width, 0.14rem padding, 0.20rem gaps
 * - All text: weight 400, size 0.20rem
 */

/* Section container */
.winner-marquee {
  width: 100%;
  padding: 0 var(--y888-space-md);
  overflow: hidden;
  overflow-x: clip;
}

/* Section title */
.winner-marquee__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--y888-space-sm);
  margin: 0 var(--y888-space-sm);
  text-align: center;
  color: var(--y888-text);
  font-size: 0.3rem;
  font-weight: var(--y888-font-weight);
  font-family: var(--y888-font-family);
}

.winner-marquee__title img {
  width: 1.5rem;
  height: 0.35rem;
}

/* Viewport masks the scrolling track */
.winner-marquee__viewport {
  overflow: hidden;
  margin-top: var(--y888-space-md);
}

/* The scrolling track: 2-row grid, column flow.
   DOM order interleaves rows: card 1 -> row 1 col 1,
   card 2 -> row 2 col 1, card 3 -> row 1 col 2, etc.
   Content is duplicated once for a seamless -50% loop. */
.winner-marquee__track {
  display: grid;
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  column-gap: var(--y888-space-md);
  row-gap: var(--y888-space-md);
  width: max-content;
  animation: winner-marquee-scroll 73s linear infinite;
}

@keyframes winner-marquee-scroll {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .winner-marquee__track {
    animation: none;
  }
}

/* Winner card */
.winner-card {
  width: 2.74rem;
  display: flex;
  align-items: center;
  padding: var(--y888-space-sm);
  border-radius: var(--y888-radius-md);
  border: 0.01rem solid var(--y888-border);
  background-color: var(--y888-bg-card);
  box-sizing: border-box;
  cursor: pointer;
  font-family: var(--y888-font-family);
}

/* Game thumbnail */
.winner-card__thumb {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 0.08rem;
  flex-shrink: 0;
  object-fit: cover;
}

/* Text column */
.winner-card__body {
  flex: 1;
  min-width: 0;
  margin-left: 0.12rem;
  text-align: left;
}

/* "Congrats 7***31" line */
.winner-card__user {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--y888-font-size-sm);
  font-weight: var(--y888-font-weight);
  line-height: 1.4;
  color: var(--y888-text);
}

.winner-card__congrats {
  color: var(--y888-success);
}

/* "win 9,443,500.9" line */
.winner-card__win {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-top: 0.08rem;
  font-size: var(--y888-font-size-sm);
  font-weight: var(--y888-font-weight);
  line-height: 1.4;
}

.winner-card__win-label {
  color: var(--y888-text-muted);
}

.winner-card__win-amount {
  color: var(--y888-warning);
  font-variant-numeric: tabular-nums lining-nums;
}