/* =========================================================
   MYTT RANK SYSTEM V23 — PRESENTATION LAYER
   ---------------------------------------------------------
   Badge-to-tier mapping is owned by the TIERS table in app.js.
   This file only styles badge slots and neutralises legacy
   sprite/pseudo-element mappings from earlier rank stylesheets.
   ========================================================= */

/* Home Rank Journey keeps its approved geometry. app.js assigns
   the standalone badge image to each orb from the TIERS table. */
.homepage-rank-road .home-rank-orb{
  color:transparent !important;
  font-size:0 !important;
  line-height:0 !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:contain !important;
  background-color:transparent !important;
}

.homepage-rank-road .home-rank-node.active .home-rank-orb{
  outline:0 !important;
}

/* Dynamic tier pills now contain the real badge <img> + real label.
   Disable the old CSS-generated sprite and label. */
body .tier-pill{
  color:#fff !important;
  font-size:12px !important;
  line-height:1 !important;
  gap:6px !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:26px !important;
  height:26px !important;
  min-width:26px !important;
  flex:0 0 26px !important;
  object-fit:contain !important;
}

/* Mobile leaderboard uses the actual image emitted by app.js.
   Earlier V22 compatibility CSS hid the image pixels and painted a
   background instead; V23 deliberately reverses that workaround. */
#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;
  color:transparent !important;
  font-size:0 !important;
  line-height:0 !important;
}

#singles .leaderboard-mobile-tier::before,
#singles .leaderboard-mobile-tier::after,
#doubles .leaderboard-mobile-tier::before,
#doubles .leaderboard-mobile-tier::after{
  content:none !important;
  display:none !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;
    border-radius:0 !important;
    box-shadow:none !important;
    background-image:none !important;
    overflow:hidden !important;
    vertical-align:middle !important;
  }

  /* At the final 50px mobile size, centre HOF slightly lower so its crown is not clipped. */
  .homepage-rank-road .tier-hof-home .home-rank-orb{
    transform:none !important;
    background-position:center calc(50% + 1px) !important;
  }
}

@media(max-width:390px){
  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{
    flex-basis:28px !important;
    width:28px !important;
    height:28px !important;
    min-width:28px !important;
    min-height:28px !important;
  }
}

/* Full Rank Journey: each node receives its badge <img> from app.js. */
.profile-rank-detail-badge{
  display:block !important;
  width:34px !important;
  height:34px !important;
  margin:0 auto 5px !important;
  object-fit:contain !important;
}

/* Current → next progress uses actual badge images and text. */
#profileContent .tier-progress-top > span{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  font-size:12px !important;
  line-height:1 !important;
  font-weight:900 !important;
  color:#fff !important;
}

#profileContent .tier-progress-top > span::before,
#profileContent .tier-progress-top > span::after{
  content:none !important;
  display:none !important;
}

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

/* Legacy V21 treated MYTT Champion as the top tier and replaced this
   heading with a CSS pseudo-label. Champion now progresses to HOF. */
#profileContent:has(.tier-pill.tier-champion) .profile-rank-compact-head h3{
  display:block !important;
  font-size:18px !important;
  color:#fff !important;
  gap:0 !important;
}

#profileContent:has(.tier-pill.tier-champion) .profile-rank-compact-head h3::before,
#profileContent:has(.tier-pill.tier-champion) .profile-rank-compact-head h3::after{
  content:none !important;
  display:none !important;
}