@import url('tema_completo.min.css');
@import url('ultrachromic_final.min.css');

.splide__track {
  border-radius: 16px;
}

.verticalSection.MyMedia h2 {
   color: transparent;
   text-shadow: none !important;
}

/* ===== Top 10 style – seção SERIES_ALTA ===== */
.SERIES_ALTA .itemsContainer {
  counter-reset: rank;              /* zera contador */
}

/* cada card vira um “passo” do contador e vira container de empilhamento */
.SERIES_ALTA .itemsContainer .card {
  counter-increment: rank;          /* 1,2,3... */
  position: relative;
}

/* garante que a arte do poster fique acima do número */
.SERIES_ALTA .itemsContainer .card .cardBox {
  position: relative;
  z-index: 2;
}

/* pequenas melhorias de layout para dar “respiro” entre cards */
.SERIES_ALTA .itemsContainer .card {
  margin-right: clamp(8px, 1.2vw, 18px);
}

/* ajuste fino em telas muito pequenas */
@media (max-width: 520px) {
  .SERIES_ALTA .itemsContainer .card::before {
    left: -0.5rem;
    -webkit-text-stroke-width: 6px;
  }
}

/* opcional: se quiser o número levemente “atrás” de tudo, inclusive overlays */
.SERIES_ALTA .itemsContainer .card::before {
  mix-blend-mode: normal; /* troque para 'overlay' se quiser um efeito mais forte */
}
/* Base — continua igual ao que já fizemos */
.SERIES_ALTA .itemsContainer { counter-reset: rank; }
.SERIES_ALTA .itemsContainer .card { position: relative; }
.SERIES_ALTA .itemsContainer .card .cardBox { position: relative; z-index: 2; }

/* ---- Puxar número do data-index e somar +1 ---- */
.SERIES_ALTA .itemsContainer .card {
  /* Seta o contador com o valor do atributo ... */
  counter-set: rank attr(data-index number);
  /* ...e incrementa 1 para exibir 1..N em vez de 0..N-1 */
  counter-increment: rank;
}

.SERIES_ALTA .itemsContainer .card::before {
  content: counter(rank);           /* <-- agora vem do data-index (+1) */
  position: absolute;
  top: 50%;
  left: 0.75rem;
  transform: translateY(-50%);
  font-size: clamp(120px, 10vw, 380px);
  font-weight: 900;
  line-height: 0.9;
  color: rgba(255, 255, 255, 0.3);
  -webkit-text-stroke: 10px rgba(255,255,255,0.12);
  text-shadow: 0 0 24px rgba(0,0,0,0.45), 0 6px 28px rgba(0,0,0,0.8);
  z-index: 9;
  pointer-events: none;
}

/* ---- Fallback (caso attr(...) em propriedades não seja suportado) ---- */
/* Força manualmente 1..10 pelo índice visual */
.SERIES_ALTA .itemsContainer > .card:nth-child(1)::before { content: "1"; }
.SERIES_ALTA .itemsContainer > .card:nth-child(2)::before { content: "2"; }
.SERIES_ALTA .itemsContainer > .card:nth-child(3)::before { content: "3"; }
.SERIES_ALTA .itemsContainer > .card:nth-child(4)::before { content: "4"; }
.SERIES_ALTA .itemsContainer > .card:nth-child(5)::before { content: "5"; }
.SERIES_ALTA .itemsContainer > .card:nth-child(6)::before { content: "6"; }
.SERIES_ALTA .itemsContainer > .card:nth-child(7)::before { content: "7"; }
.SERIES_ALTA .itemsContainer > .card:nth-child(8)::before { content: "8"; }
.SERIES_ALTA .itemsContainer > .card:nth-child(9)::before { content: "9"; }
.SERIES_ALTA .itemsContainer > .card:nth-child(10)::before { content: "10"; }