/* MYTT Rank Journey V37 — transparent standalone badges + left-start mobile */
html body .hero-rank-card-v5 .homepage-rank-road.mytt-native-rank-road-v37{
  position:relative!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:center!important;
  width:100%!important;
  max-width:1240px!important;
  margin:0 auto!important;
  padding:20px 10px 12px!important;
  overflow:visible!important;
  background:transparent!important;
  isolation:isolate!important;
  scrollbar-width:none!important;
}
html body .hero-rank-card-v5 .homepage-rank-road.mytt-native-rank-road-v37::-webkit-scrollbar{display:none!important;}

html body .hero-rank-card-v5 .home-rank-native-node{
  --rank-color:#fff;
  position:relative!important;
  z-index:2!important;
  flex:0 0 110px!important;
  width:110px!important;
  min-width:110px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  text-align:center!important;
  color:var(--rank-color)!important;
  scroll-snap-align:start!important;
}

/* Standalone WebP assets have transparency. There is NO circular crop,
   clip-path or black backing layer, so the metallic/neon outer edge can blend
   directly into the MYTT card background. */
html body .hero-rank-card-v5 .home-rank-native-shell{
  position:relative!important;
  width:102px!important;
  height:102px!important;
  flex:0 0 102px!important;
  overflow:visible!important;
  display:grid!important;
  place-items:center!important;
  transform-origin:center!important;
  transition:filter .2s ease,transform .2s ease!important;
  will-change:transform,filter!important;
}
html body .hero-rank-card-v5 .home-rank-native-badge{
  position:relative!important;
  z-index:2!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  clip-path:none!important;
  background:transparent!important;
  transform:translateZ(0)!important;
  filter:contrast(1.04) saturate(1.035) brightness(1.015) drop-shadow(0 0 3px rgba(255,255,255,.16))!important;
  image-rendering:auto!important;
  pointer-events:none!important;
  user-select:none!important;
  -webkit-user-drag:none!important;
}

html body .hero-rank-card-v5 .home-rank-native-shell::before{
  content:""!important;
  position:absolute!important;
  z-index:0!important;
  left:50%!important;
  top:50%!important;
  width:88%!important;
  height:88%!important;
  border-radius:50%!important;
  transform:translate(-50%,-50%)!important;
  background:radial-gradient(circle,transparent 54%,var(--rank-color) 72%,transparent 84%)!important;
  filter:blur(8px)!important;
  opacity:.20!important;
  pointer-events:none!important;
}

html body .hero-rank-card-v5 .home-rank-native-name{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:center!important;
  min-height:34px!important;
  margin-top:5px!important;
  color:#fff!important;
  font-size:13px!important;
  line-height:1.1!important;
  font-weight:900!important;
  letter-spacing:-.15px!important;
}
html body .hero-rank-card-v5 .home-rank-native-score{
  display:block!important;
  margin-top:1px!important;
  color:#ff353f!important;
  font-size:15px!important;
  line-height:1!important;
  font-weight:950!important;
}

html body .hero-rank-card-v5 .home-rank-native-marker{
  height:31px!important;
  margin-top:7px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:flex-start!important;
  color:#ff4545!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
html body .hero-rank-card-v5 .home-rank-native-marker b{
  display:block!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:15px!important;
  line-height:11px!important;
  font-weight:950!important;
  font-style:normal!important;
  text-shadow:0 0 8px rgba(255,69,69,.68)!important;
}
html body .hero-rank-card-v5 .home-rank-native-marker em{
  display:block!important;
  margin-top:6px!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:8px!important;
  line-height:1!important;
  font-weight:950!important;
  font-style:normal!important;
  letter-spacing:.65px!important;
  white-space:nowrap!important;
  text-transform:uppercase!important;
  text-shadow:0 0 7px rgba(255,69,69,.42)!important;
}

html body .hero-rank-card-v5 .home-rank-native-node.active .home-rank-native-shell{
  animation:myttNativeCurrentTierPulse 1.7s ease-in-out infinite!important;
}
html body .hero-rank-card-v5 .home-rank-native-node.active .home-rank-native-shell::before{
  opacity:.88!important;
  animation:myttNativeGlowPulse 1.7s ease-in-out infinite!important;
}
html body .hero-rank-card-v5 .home-rank-native-node.active .home-rank-native-marker{
  opacity:1!important;
  visibility:visible!important;
}
html body .hero-rank-card-v5 .home-rank-native-node.active .home-rank-native-marker b{
  animation:myttNativeArrowPulse 1.7s ease-in-out infinite!important;
}

html body .hero-rank-card-v5 .home-rank-native-line{
  position:relative!important;
  z-index:1!important;
  flex:1 1 28px!important;
  min-width:18px!important;
  height:5px!important;
  margin:48.5px -7px 0!important;
  border-radius:999px!important;
  box-shadow:0 0 10px currentColor!important;
  opacity:.95!important;
}
html body .hero-rank-card-v5 .home-rank-native-line::before,
html body .hero-rank-card-v5 .home-rank-native-line::after{
  content:""!important;
  position:absolute!important;
  top:0!important;
  width:12px!important;
  height:5px!important;
  background:inherit!important;
}
html body .hero-rank-card-v5 .home-rank-native-line::before{left:-8px!important;}
html body .hero-rank-card-v5 .home-rank-native-line::after{right:-8px!important;}
html body .hero-rank-card-v5 .home-rank-native-line.line-red{color:#ff3a43!important;background:linear-gradient(90deg,#ff555d,#ff3a43)!important;}
html body .hero-rank-card-v5 .home-rank-native-line.line-orange{color:#ff8d1f!important;background:linear-gradient(90deg,#ff8d1f,#ffc115)!important;}
html body .hero-rank-card-v5 .home-rank-native-line.line-gold{color:#ffd31c!important;background:linear-gradient(90deg,#ffc115,#dff227)!important;}
html body .hero-rank-card-v5 .home-rank-native-line.line-yellow{color:#bceb28!important;background:linear-gradient(90deg,#dff227,#40dc6a)!important;}
html body .hero-rank-card-v5 .home-rank-native-line.line-green{color:#35db79!important;background:linear-gradient(90deg,#40dc6a,#24d8df)!important;}
html body .hero-rank-card-v5 .home-rank-native-line.line-cyan{color:#24d8df!important;background:linear-gradient(90deg,#24d8df,#7c55ef)!important;}
html body .hero-rank-card-v5 .home-rank-native-line.line-purple{color:#8655ef!important;background:linear-gradient(90deg,#7c55ef,#ef42c5)!important;}
html body .hero-rank-card-v5 .home-rank-native-line.line-pink{color:#ef42c5!important;background:linear-gradient(90deg,#ef42c5,#ff5a8f)!important;}

@keyframes myttNativeCurrentTierPulse{
  0%,100%{transform:scale(1);filter:brightness(1) drop-shadow(0 0 3px var(--rank-color));}
  50%{transform:scale(1.075);filter:brightness(1.10) drop-shadow(0 0 7px var(--rank-color)) drop-shadow(0 0 17px var(--rank-color));}
}
@keyframes myttNativeGlowPulse{0%,100%{opacity:.36;transform:translate(-50%,-50%) scale(.95);}50%{opacity:.94;transform:translate(-50%,-50%) scale(1.08);}}
@keyframes myttNativeArrowPulse{0%,100%{opacity:.78;transform:translateY(0) scale(.94);}50%{opacity:1;transform:translateY(-1px) scale(1.08);}}

@media (min-width:769px) and (max-width:1180px){
  html body .hero-rank-card-v5 .home-rank-native-node{flex-basis:94px!important;width:94px!important;min-width:94px!important;}
  html body .hero-rank-card-v5 .home-rank-native-shell{width:88px!important;height:88px!important;flex-basis:88px!important;}
  html body .hero-rank-card-v5 .home-rank-native-line{min-width:13px!important;margin-top:41.5px!important;}
  html body .hero-rank-card-v5 .home-rank-native-name{min-height:30px!important;font-size:11px!important;margin-top:4px!important;}
  html body .hero-rank-card-v5 .home-rank-native-score{font-size:13px!important;}
}

@media (max-width:768px){
  html body .hero-rank-card-v5 .homepage-rank-road.mytt-native-rank-road-v37{
    justify-content:flex-start!important;
    overflow-x:auto!important;
    overflow-y:visible!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-x:contain!important;
    scroll-snap-type:x proximity!important;
    scroll-padding-left:10px!important;
    padding:18px 10px 8px!important;
    cursor:grab!important;
  }
  html body .hero-rank-card-v5 .homepage-rank-road.mytt-native-rank-road-v37.is-dragging{cursor:grabbing!important;scroll-snap-type:none!important;}

  /* Do NOT add a left spacer: Rookie starts at the left edge on first load.
     Only add runway on the right so later ranks can still reach the left marker zone. */
  html body .hero-rank-card-v5 .homepage-rank-road.mytt-native-rank-road-v37::before{display:none!important;content:none!important;}
  html body .hero-rank-card-v5 .homepage-rank-road.mytt-native-rank-road-v37::after{
    content:""!important;
    flex:0 0 calc(100% - 86px)!important;
    min-width:calc(100% - 86px)!important;
    height:1px!important;
  }

  html body .hero-rank-card-v5 .home-rank-native-node{flex:0 0 84px!important;width:84px!important;min-width:84px!important;}
  html body .hero-rank-card-v5 .home-rank-native-shell{width:80px!important;height:80px!important;flex-basis:80px!important;}
  html body .hero-rank-card-v5 .home-rank-native-line{flex:0 0 24px!important;min-width:24px!important;max-width:24px!important;height:4px!important;margin:38px -7px 0!important;}
  html body .hero-rank-card-v5 .home-rank-native-line::before,
  html body .hero-rank-card-v5 .home-rank-native-line::after{height:4px!important;}
  html body .hero-rank-card-v5 .home-rank-native-name{min-height:29px!important;font-size:10.5px!important;margin-top:4px!important;}
  html body .hero-rank-card-v5 .home-rank-native-score{font-size:12px!important;}
  html body .hero-rank-card-v5 .home-rank-native-marker{height:29px!important;margin-top:6px!important;}
  html body .hero-rank-card-v5 .home-rank-native-marker b{font-size:12px!important;line-height:9px!important;}
  html body .hero-rank-card-v5 .home-rank-native-marker em{margin-top:6px!important;font-size:7px!important;letter-spacing:.45px!important;}
}

@media (max-width:430px){
  html body .hero-rank-card-v5 .homepage-rank-road.mytt-native-rank-road-v37{padding-left:8px!important;scroll-padding-left:8px!important;}
  html body .hero-rank-card-v5 .homepage-rank-road.mytt-native-rank-road-v37::after{flex-basis:calc(100% - 80px)!important;min-width:calc(100% - 80px)!important;}
  html body .hero-rank-card-v5 .home-rank-native-node{flex-basis:78px!important;width:78px!important;min-width:78px!important;}
  html body .hero-rank-card-v5 .home-rank-native-shell{width:74px!important;height:74px!important;flex-basis:74px!important;}
  html body .hero-rank-card-v5 .home-rank-native-line{flex-basis:21px!important;min-width:21px!important;max-width:21px!important;margin-top:35px!important;}
  html body .hero-rank-card-v5 .home-rank-native-name{font-size:9.5px!important;}
  html body .hero-rank-card-v5 .home-rank-native-score{font-size:11px!important;}
}

@media (prefers-reduced-motion:reduce){
  html body .hero-rank-card-v5 .home-rank-native-node.active .home-rank-native-shell,
  html body .hero-rank-card-v5 .home-rank-native-node.active .home-rank-native-shell::before,
  html body .hero-rank-card-v5 .home-rank-native-node.active .home-rank-native-marker b{animation:none!important;}
}