/* Slide "Recorde do Grande Prêmio" — categoria Esporte.
   Estilos espelhados do componente nativo (HTML fornecido pelo usuário).
   Largura total do grid, carrossel horizontal auto-rolante, 4+ cards
   simultaneamente, imagem real do jogo, moeda + seta ao lado do valor. */

.sg-wc-winner-container {
  /* Fica FORA do grid principal (como próximo irmão de [data-sg="gx"]).
     Isso faz a sidebar sticky parar de grudar quando o slide entra em
     cena: sidebar e slide rolam juntos para cima, sem sobreposição.
     As regras de grid abaixo são defensivas, caso algum ancestral vire
     grid por conta própria. */
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  justify-self: stretch !important;
  align-self: start !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: .05rem 0 .2rem !important;
  padding: 0 .2rem !important;    /* mesmo respiro lateral do content */
  box-sizing: border-box !important;
  color: #effffb !important;
  font-family: inherit !important;
}

.sg-wc-winner-container,
.sg-wc-winner-container * {
  box-sizing: border-box;
}

/* ----- Caixa principal ----- */
.sg-wc-winner {
  position: relative;
  width: 100%;
  padding: .12rem .08rem .14rem;
  border: 1px solid rgba(49, 158, 137, .35);
  border-radius: .14rem;
  overflow: hidden;
  background:
    radial-gradient(120% 180% at 50% -30%, rgba(94, 220, 194, .12), transparent 55%),
    linear-gradient(155deg, #075e55 0%, #034a42 68%, #03433d 100%);
  box-shadow:
    0 .03rem .08rem rgba(0, 0, 0, .25),
    inset 0 1px 0 rgba(255, 255, 255, .04);
}

/* ----- Título com ornamentos ----- */
.sg-wc-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 0 0 .0rem;
  color: #6fd3bc;
  text-align: center;
}

.sg-wc-ornament--left  { margin-right: -.04rem; }
.sg-wc-ornament--right { margin-left:  -.04rem; }

.sg-wc-title p {
  margin: 0;
  color: #f3fffc;
  font-size: .2rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: .005rem;
}

.sg-wc-ornament {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #6fd3bc;
  line-height: 0;
}

/* Dois PNGs com silhueta pintados em verde-água via mask-image. */
.sg-wc-ornament-img {
  display: inline-block;
  width: .5rem;
  height: .36rem;
  background-color: #6fd3bc;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

.sg-wc-ornament-img--left {
  -webkit-mask-image: url('/assets/custom/icons/laurel-left.png?v=1');
          mask-image: url('/assets/custom/icons/laurel-left.png?v=1');
}

.sg-wc-ornament-img--right {
  -webkit-mask-image: url('/assets/custom/icons/laurel-right.png?v=1');
          mask-image: url('/assets/custom/icons/laurel-right.png?v=1');
}

/* ----- Trilha do carrossel ----- */
.sg-wc-list-slide-box {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding: 0;
  margin: 0;
  mask-image: linear-gradient(90deg, transparent 0, #000 .14rem, #000 calc(100% - .14rem), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 .14rem, #000 calc(100% - .14rem), transparent 100%);
}

.sg-wc-list-box {
  display: block;
  width: 100%;
  overflow: hidden;
}

.sg-wc-swiper {
  width: 100%;
  overflow: hidden;
}

/* O wrapper duplica a lista 2x; a animação translada -50% em loop infinito. */
.sg-wc-swiper-wrapper {
  display: flex;
  align-items: stretch;
  width: max-content;
  gap: .14rem;
  animation: sg-wc-marquee 60s linear infinite;
  will-change: transform;
}

.sg-wc-winner-container:hover .sg-wc-swiper-wrapper,
.sg-wc-swiper-wrapper:active {
  animation-play-state: paused;
}

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

/* ----- Slide individual ----- */
.sg-wc-slide {
  flex: 0 0 auto;
  width: 1.15rem;
}

.sg-wc-list-ordinary,
.sg-wc-list-ordinary-layout {
  display: block;
  width: 100%;
}

.sg-wc-card-below {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

/* ----- Imagem do jogo ----- */
.sg-wc-poster-image {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: .14rem;
  overflow: hidden;
  background-color: #0d4b44;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow:
    0 .03rem .07rem rgba(0, 0, 0, .28),
    inset 0 0 0 1px rgba(255, 255, 255, .05);
}

/* ----- Linha de identificação ----- */
.sg-wc-game-name-normal {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: .07rem;
  gap: .03rem;
}

.sg-wc-user-name-box {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: .03rem;
  color: #7cdcc6;
  font-size: .17rem;
  line-height: 1.1;
  white-space: nowrap;
}

.sg-wc-words {
  color: #ea7355;
  font-size: .15rem;
  font-weight: 600;
}

/* ----- Linha do valor ----- */
.sg-wc-win-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .04rem;
  color: #ffc83a;
  font-size: .18rem;
  font-weight: 800;
  line-height: 1.05;
  white-space: nowrap;
}

.sg-wc-icon-currency {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: .2rem;
  height: .2rem;
  flex: 0 0 .2rem;
  color: inherit;
}

.sg-wc-icon-currency svg {
  width: 100%;
  height: 100%;
  display: block;
}

.sg-wc-netProfit {
  color: #ffc83a;
}

.sg-wc-more-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: .12rem;
  height: .15rem;
  flex: 0 0 .12rem;
  color: #ffc83a;
  margin-left: .02rem;
}

.sg-wc-more-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ----- Componente nativo reposicionado (quando existir) ----- */
.sg-grand-prize-native {
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  justify-self: stretch !important;
  align-self: start !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: .1rem 0 .2rem !important;
}

.sg-grand-prize-native [class*="_list-slide-box_"],
.sg-grand-prize-native [class*="_list-box_"],
.sg-grand-prize-native [class*="_carousel-list-swiper_"] {
  width: 100% !important;
  max-width: 100% !important;
}

/* ----- Ajustes para telas estreitas ----- */
@media (max-width: 360px) {
  .sg-wc-slide { width: 1.02rem; }
  .sg-wc-title p { font-size: .18rem; }
  .sg-wc-user-name-box { font-size: .15rem; }
  .sg-wc-words { font-size: .13rem; }
  .sg-wc-win-box { font-size: .16rem; }
  .sg-wc-icon-currency { width: .18rem; height: .18rem; flex-basis: .18rem; }
}