@charset "UTF-8";

/* ==========================================================
   TNSB MAIN TOP RANKING — portrait artwork + outlined ranks
   Only this shelf is 3:4; other reels keep their original ratio.
   ========================================================== */

.tnsb-main-top-ranking {
  /* 210 × 280px at desktop (40px shorter than the previous 240 × 320px). */
  --tnsb-ranking-artwork-width: 210px;
  --tnsb-ranking-number-gutter: 52px;
  --tnsb-ranking-outline: #b4ff00;
  position: relative;
  margin-bottom: 0;
}

/* Reel.css forces horizontal scrolling; keep its responsive edge behavior. */
.tnsb-main-top-ranking .tnsb-main-top-ranking__scroller {
  gap: 32px;
  align-items: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-padding-left: 18px;
  -webkit-overflow-scrolling: touch;
  padding-top: 0;
  padding-bottom: 0;
}

/* Keep the first outline number inside the horizontal viewport.
   The spacer is already present in RANKING markup; only this shelf uses it. */
.tnsb-main-top-ranking .tnsb-main-top-ranking__scroller > .reel-spacer {
  flex: 0 0 10px;
  width: 10px;
}

/* Full card contains both the exposed number and the inset artwork. */
.tnsb-main-top-ranking .tnsb-main-top-ranking__card {
  width: calc(var(--tnsb-ranking-artwork-width) + var(--tnsb-ranking-number-gutter));
  max-width: none;
  position: relative;
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.tnsb-main-top-ranking__link {
  position: relative;
  isolation: isolate;
  display: block;
  width: 100%;
  text-decoration: none;
}

/* The 10th card gets extra spacing, not smaller numerals.
   Mobile adjusts only its gutter while desktop stays at 100px. */
.tnsb-main-top-ranking .tnsb-main-top-ranking__card--double-digit {
  --tnsb-ranking-number-gutter: 100px;
}

/* A flex container has one shared gap. Desktop rank 10 needs a 20px
   preceding gap rather than the normal 32px: subtract 12px from that
   card's start without shifting any other rank. reel.css applies
   margin: 0 !important, so this override must also be !important. */
@media (min-width: 769px) {
  .tnsb-main-top-ranking .tnsb-main-top-ranking__card--double-digit {
    margin-left: -12px !important;
  }
}

/* Guests use an actual button for the native TOP login popup.
   Normalize button chrome without touching linked members' cards. */
button.tnsb-main-top-ranking__link {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.tnsb-main-top-ranking__link:focus-visible {
  outline: 2px solid #b4ff00;
  outline-offset: 3px;
}

/* These numbers sit BEHIND the artwork, not on top of it. */
.tnsb-main-top-ranking__number {
  position: absolute;
  z-index: 0;
  bottom: 0;
  left: -10px; /* Desktop: common position for ranks 1–10. */
  font-family: Arial, Helvetica, sans-serif;
  font-size: 164px;
  font-weight: 900;
  font-style: normal;
  letter-spacing: -0.12em;
  line-height: 0.9;
  white-space: nowrap;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2.5px var(--tnsb-ranking-outline);
  pointer-events: none;
  user-select: none;
}

/* Override the global square reel rule ONLY for ranking cards. */
.tnsb-main-top-ranking .reel-img.tnsb-main-top-ranking__image {
  position: relative;
  z-index: 1;
  width: var(--tnsb-ranking-artwork-width);
  aspect-ratio: 3 / 4;
  height: auto;
  margin: 0 0 0 var(--tnsb-ranking-number-gutter);
  overflow: hidden;
  border: 0;
  border-radius: 4px;
  background: #121212;
  background-image: none;
  /* Leftward shadow separates the artwork from the outlined rank behind it. */
  box-shadow: -14px 8px 24px rgba(0, 0, 0, 0.6), 0 8px 20px rgba(0, 0, 0, 0.22);
}

.tnsb-main-top-ranking .tnsb-main-top-ranking__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* The episode title and program subtitle are intentionally not rendered. */

@media (max-width: 768px) {
  .tnsb-main-top-ranking {
    /* 145 × 193px at mobile (about 40px shorter than before). */
    --tnsb-ranking-artwork-width: 145px;
    --tnsb-ranking-number-gutter: 38px;
  }

  .tnsb-main-top-ranking .tnsb-main-top-ranking__scroller {
    gap: 24px;
  }

  .tnsb-main-top-ranking__number {
    left: -5px;
    font-size: 120px;
    -webkit-text-stroke-width: 2px;
  }

  .tnsb-main-top-ranking .tnsb-main-top-ranking__card--double-digit {
    --tnsb-ranking-number-gutter: 70px;
  }

  /* Rank 10: numeral moves 10px left; artwork net 6px left
     (10px left plus a 4px right correction). Keep its card width and gap. */
  .tnsb-main-top-ranking .tnsb-main-top-ranking__card--double-digit .tnsb-main-top-ranking__number {
    left: -15px;
  }

  .tnsb-main-top-ranking .tnsb-main-top-ranking__card--double-digit .tnsb-main-top-ranking__image {
    left: -6px;
  }
}