/* MYTT Player Cards — rank badge layout only.
   The badge image itself comes from the single TIERS mapping in app.js. */

.player-card.player-card-icon-tier > .player-card-rank-icon{
  border:0 !important;
  border-radius:50% !important;
  background:none !important;
  box-shadow:none !important;
  overflow:visible !important;
}

.player-card.player-card-icon-tier > .player-card-rank-icon > span{
  display:none !important;
}

.player-card.player-card-icon-tier > .player-card-rank-icon > .player-card-rank-img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
}

@media(max-width:759px){
  .player-card.player-card-icon-tier > .player-card-rank-icon{
    width:35px !important;
    min-width:35px !important;
    max-width:35px !important;
    height:35px !important;
    min-height:35px !important;
    max-height:35px !important;
    top:8px !important;
    right:9px !important;
  }
}

/* Desktop leaderboard: the inline tier image is a mobile-only helper.
   Hide it on desktop so the PLAYER column keeps the original compact layout. */
@media(min-width:769px){
  #singles .leaderboard-mobile-tier,
  #doubles .leaderboard-mobile-tier{
    display:none !important;
    width:0 !important;
    height:0 !important;
    min-width:0 !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
  }
}

/* =========================================================
   HOME RANK JOURNEY — alignment fix
   Keep every tier title and rating on the same horizontal rows.
   ========================================================= */
body .hero-rank-card-v5 .homepage-rank-road .home-rank-node{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
}

@media(min-width:769px){
  body .hero-rank-card-v5 .homepage-rank-road .home-rank-node > span{
    display:block !important;
    width:max-content !important;
    max-width:none !important;
    min-height:22px !important;
    height:22px !important;
    margin-top:10px !important;
    line-height:22px !important;
    white-space:nowrap !important;
    text-align:center !important;
  }

  body .hero-rank-card-v5 .homepage-rank-road .home-rank-node > small{
    display:block !important;
    min-height:22px !important;
    height:22px !important;
    margin-top:4px !important;
    line-height:22px !important;
    text-align:center !important;
  }
}

body .hero-rank-card-v5 .homepage-rank-road .home-rank-node .you-marker{
  position:static !important;
  inset:auto !important;
  top:auto !important;
  right:auto !important;
  bottom:auto !important;
  left:auto !important;
  transform:none !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  width:100% !important;
  min-height:26px !important;
  margin:5px 0 0 !important;
  padding:0 !important;
  line-height:1 !important;
  text-align:center !important;
}

body .hero-rank-card-v5 .homepage-rank-road .home-rank-node .you-marker em{
  position:static !important;
  inset:auto !important;
  transform:none !important;
  display:block !important;
  margin:3px 0 0 !important;
  padding:0 !important;
  line-height:1 !important;
  white-space:nowrap !important;
}

@media(max-width:768px){
  body .hero-rank-card-v5 .homepage-rank-road .home-rank-node > span{
    display:block !important;
    width:68px !important;
    max-width:68px !important;
    min-height:28px !important;
    height:28px !important;
    margin-top:6px !important;
    line-height:1.05 !important;
    white-space:normal !important;
    text-align:center !important;
  }

  body .hero-rank-card-v5 .homepage-rank-road .home-rank-node > small{
    display:block !important;
    min-height:14px !important;
    height:14px !important;
    margin-top:3px !important;
    line-height:14px !important;
    text-align:center !important;
  }

  body .hero-rank-card-v5 .homepage-rank-road .home-rank-node .you-marker{
    min-height:22px !important;
    margin-top:4px !important;
  }

  body .hero-rank-card-v5 .homepage-rank-road .home-rank-node .you-marker em{
    margin-top:2px !important;
  }
}