.rankbadge{align-items:center;display:flex;flex-direction:column;gap:var(--gap-8)}.rankbadge__ring{display:grid;height:var(--rb-size);place-items:center;position:relative;width:var(--rb-size)}.rankbadge__ring svg{height:100%;inset:0;position:absolute;rotate:-90deg;width:100%}.rankbadge__track{fill:none;stroke:var(--surface-4);stroke-width:5}.rankbadge__fill{animation:ring-draw 1.15s var(--ease-out-expo) .18s both;fill:none;filter:drop-shadow(0 0 5px color-mix(in srgb,var(--tier,var(--color-brand)) 45%,transparent));stroke:var(--tier,var(--color-brand));stroke-dashoffset:var(--rb-off);stroke-linecap:round;stroke-width:5}@keyframes ring-draw{0%{stroke-dashoffset:var(--rb-c)}to{stroke-dashoffset:var(--rb-off)}}.rankbadge__art{height:80%;image-rendering:pixelated;-o-object-fit:contain;object-fit:contain;position:relative;transition:transform .52s var(--ease-spring),filter .38s var(--ease-out);width:80%}.rankbadge:hover .rankbadge__art{filter:drop-shadow(0 10px 16px rgba(0,0,0,.45));transform:translateY(-4px) scale(1.06)}.rankbadge__pct{color:var(--color-text-secondary);font-size:var(--text-12);letter-spacing:.04em;text-transform:uppercase}@media(prefers-reduced-motion:reduce){.rankbadge__fill{animation:none}.rankbadge:hover .rankbadge__art{transform:none}}