/* MYTT Rank System V30 — locked approved artwork
   ---------------------------------------------------------
   Homepage rank journey uses ONE approved image.
   The artwork itself is never reconstructed, recoloured or transformed.
   --------------------------------------------------------- */

html body .hero-rank-card-v5 .homepage-rank-road.mytt-approved-rank-road-v29{
  position:relative !important;
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  height:auto !important;
  padding:0 !important;
  margin:0 !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  -webkit-overflow-scrolling:touch !important;
  overscroll-behavior-x:contain !important;
  touch-action:pan-x !important;
  scrollbar-width:none !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  transform:none !important;
  cursor:grab !important;
}

html body .hero-rank-card-v5 .homepage-rank-road.mytt-approved-rank-road-v29.is-dragging{
  cursor:grabbing !important;
  user-select:none !important;
}

html body .hero-rank-card-v5 .homepage-rank-road.mytt-approved-rank-road-v29::-webkit-scrollbar{
  display:none !important;
}

html body .hero-rank-card-v5 .homepage-rank-road.mytt-approved-rank-road-v29::before,
html body .hero-rank-card-v5 .homepage-rank-road.mytt-approved-rank-road-v29::after{
  content:none !important;
  display:none !important;
}

/* Keep the approved artwork at or below its natural 1200px width.
   This prevents the browser from enlarging the badges on wide desktop screens. */
html body .hero-rank-card-v5 .mytt-approved-rank-strip-v29{
  display:block !important;
  width:1200px !important;
  max-width:calc(100vw - 80px) !important;
  min-width:0 !important;
  height:auto !important;
  margin:0 auto !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  outline:0 !important;
  object-fit:contain !important;
  object-position:center !important;
  box-shadow:none !important;
  filter:none !important;
  transform:none !important;
  opacity:1 !important;
  image-rendering:auto !important;
  user-select:none !important;
  -webkit-user-drag:none !important;
  pointer-events:none !important;
}

html body .hero-rank-card-v5 .mytt-approved-rank-strip-loading{
  display:block !important;
  width:1200px !important;
  max-width:calc(100vw - 80px) !important;
  aspect-ratio:1200 / 287 !important;
  margin:0 auto !important;
  background:transparent !important;
}

/* Tablet: keep it slightly wider than the viewport so the row can still move. */
@media (min-width:769px) and (max-width:1180px){
  html body .hero-rank-card-v5 .mytt-approved-rank-strip-v29,
  html body .hero-rank-card-v5 .mytt-approved-rank-strip-loading{
    width:1020px !important;
    min-width:1020px !important;
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
}

/* Mobile: same untouched artwork, simply scaled down and horizontally scrollable. */
@media (max-width:768px){
  html body .hero-rank-card-v5 .homepage-rank-road.mytt-approved-rank-road-v29{
    padding:0 4px 8px !important;
  }

  html body .hero-rank-card-v5 .mytt-approved-rank-strip-v29,
  html body .hero-rank-card-v5 .mytt-approved-rank-strip-loading{
    width:900px !important;
    min-width:900px !important;
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
}

@media (max-width:430px){
  html body .hero-rank-card-v5 .mytt-approved-rank-strip-v29,
  html body .hero-rank-card-v5 .mytt-approved-rank-strip-loading{
    width:840px !important;
    min-width:840px !important;
  }
}

/* =========================================================
   TIER PILLS / LEADERBOARD / PROFILE
   Site-wide labels keep the approved rating order.
   ========================================================= */
body .tier-pill{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  color:#fff !important;
  font-size:12px !important;
  line-height:1 !important;
}
body .tier-pill::before,
body .tier-pill::after{
  content:none !important;
  display:none !important;
}
body .tier-pill .tier-badge-img{
  display:block !important;
  width:27px !important;
  height:27px !important;
  min-width:27px !important;
  flex:0 0 27px !important;
  object-fit:contain !important;
}

body .tier-pill.tier-rookie{background:rgba(180,190,200,.13) !important;color:#f2f4f7 !important;}
body .tier-pill.tier-challenger{background:rgba(34,197,94,.16) !important;color:#bbf7d0 !important;}
body .tier-pill.tier-elite{background:rgba(14,165,233,.17) !important;color:#bae6fd !important;}
body .tier-pill.tier-master{background:rgba(168,85,247,.17) !important;color:#e9d5ff !important;}
body .tier-pill.tier-grandmaster{background:rgba(239,68,68,.18) !important;color:#fecaca !important;}
body .tier-pill.tier-champion{background:rgba(236,72,153,.18) !important;color:#fbcfe8 !important;}
body .tier-pill.tier-legend{background:rgba(245,158,11,.18) !important;color:#fde68a !important;}
body .tier-pill.tier-immortal{background:rgba(250,204,21,.18) !important;color:#fef08a !important;}
body .tier-pill.tier-hof{background:linear-gradient(135deg,rgba(250,204,21,.28),rgba(245,158,11,.16)) !important;color:#fff3a3 !important;}

#singles img.leaderboard-mobile-tier,
#doubles img.leaderboard-mobile-tier{
  background-image:none !important;
  background-color:transparent !important;
  object-fit:contain !important;
  object-position:center !important;
}

.profile-rank-detail-badge{
  display:block !important;
  width:36px !important;
  height:36px !important;
  margin:0 auto 5px !important;
  object-fit:contain !important;
}

#profileContent .profile-progress-badge{
  display:block !important;
  width:24px !important;
  height:24px !important;
  min-width:24px !important;
  object-fit:contain !important;
}

@media (max-width:768px){
  html body #singles .player-cell .leaderboard-name-wrap > .leaderboard-mobile-tier,
  html body #doubles .player-cell .leaderboard-name-wrap > .leaderboard-mobile-tier,
  html body #doubles .team-cell > .leaderboard-mobile-tier{
    display:inline-block !important;
    flex:0 0 30px !important;
    width:30px !important;
    height:30px !important;
    min-width:30px !important;
    min-height:30px !important;
    padding:0 !important;
    margin:0 0 0 6px !important;
    border:0 !important;
    box-shadow:none !important;
    overflow:visible !important;
    vertical-align:middle !important;
  }
}