/* Three distinct anchors: rank badge, XP/level, and the momentum character. */
.hero-identity{
  grid-template-columns:116px minmax(0,1fr) 96px;
  gap:16px;
}
.hero .hero-identity .badge{width:116px;height:140px;}
.hero .hero-identity .badge::before,.hero .hero-identity .badge::after{
  margin:0;translate:-50% -50%;height:auto;aspect-ratio:1;
}
.hero .hero-identity .badge::before{width:154%;}
.hero .hero-identity .badge::after{width:138%;}
.hero-xp-row{justify-content:flex-start;gap:12px;max-width:none;}
.hero-xp-row .lvl-ring{top:0;}
.hero-character{
  --aura-opacity:.12;--aura-scale:.75;--aura-radius:2px;
  position:relative;isolation:isolate;display:grid;place-items:center;
  width:100%;height:194px;color:var(--rank);pointer-events:auto;
}
.hero-character::before,.hero-character::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  opacity:var(--aura-opacity);
  transition:opacity .28s ease-out,transform .28s ease-out;
}
.hero-character::before{
  inset:5% -15% 0;border-radius:50%;
  background:radial-gradient(ellipse,currentColor 0%,color-mix(in srgb,currentColor 45%,transparent) 32%,transparent 70%);
  transform:scale(var(--aura-scale));
}
.hero-character::after{
  bottom:0;width:90%;height:18px;border-radius:50%;
  background:radial-gradient(ellipse,currentColor,transparent 70%);
  transform:scaleX(var(--aura-scale));
}
.hero-character img{
  display:block;width:100%;height:184px;object-fit:contain;
  filter:drop-shadow(0 0 var(--aura-radius) var(--rank));
  user-select:none;pointer-events:none;
}
@media(max-width:459px){
  .hero-identity{grid-template-columns:76px minmax(0,1fr) 66px;gap:10px;text-align:left;}
  .hero .hero-identity .badge{width:76px;height:100px;}
  .hero .rank-name{font-size:20px;}
  .hero .rank-title{font-size:10px;letter-spacing:.06em;}
  .hero-xp-row{justify-content:flex-start;gap:10px;margin-top:12px;}
  .hero .points b{font-size:26px;transform-origin:left center;}
  .hero-character{height:182px;}
  .hero-character img{height:174px;}
}
@media(prefers-reduced-motion:reduce){
  .hero-character::before,.hero-character::after{transition:none;}
}
