.ranking-row--own .rank { position: relative; }
.ranking-row--own .rank::before { position: absolute; top: calc(50% - 19px); left: -15px; width: 38px; height: 38px; background: url("assets/rank-hover.svg") center no-repeat; opacity: 0; pointer-events: none; transition: opacity 140ms ease-out; content: ""; }
.ranking-row--own .rank:has(.rank-progress-trigger:focus-visible)::before,
.ranking-row--own .rank:has(.rank-progress-trigger[aria-expanded="true"])::before { opacity: 1; }
.rank-progress-trigger { position: absolute; z-index: 1; top: calc(50% - 16px); left: -12px; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; }
.rank-progress-trigger::before { position: absolute; inset: -6px; content: ""; }
.rank-progress-trigger:focus-visible { outline-color: var(--input-border-focus); }
.rank-popover { position: fixed; z-index: 20; width: 288px; height: 159.5px; padding: 0; overflow: clip; border: 0.5px solid #b3cac8; border-radius: 16px; background: linear-gradient(90deg, #fff, #fdfefd 55%, #f8fcfa); box-shadow: 0 10px 24px -7px rgb(31 64 54 / 8%), 0 2px 5px -1px rgb(31 64 54 / 5%); color: var(--content-secondary); }
.rank-popover[hidden] { display: none; }
.rank-popover__rings { position: absolute; inset: 0; overflow: clip; pointer-events: none; }
.rank-popover__rings-motion { position: absolute; inset: 0; transform-origin: 247px 52px; }
.rank-popover:not([hidden]):not([data-instant]) .rank-popover__rings-motion { animation: rank-rings-breathe 5.6s cubic-bezier(0.455, 0.03, 0.515, 0.955) 240ms infinite both; will-change: transform; }
@keyframes rank-rings-breathe {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.12); opacity: 1; }
}
.rank-popover__rings img { position: absolute; display: block; max-width: none; }
.rank-popover__rings img:nth-child(1) { left: 214.5px; top: 19.5px; }
.rank-popover__rings img:nth-child(2) { left: 194.5px; top: -0.5px; }
.rank-popover__rings img:nth-child(3) { left: 174.5px; top: -20.5px; }
.rank-popover__rings img:nth-child(4) { left: 154.5px; top: -40.5px; }
.rank-popover__rings img:nth-child(5) { left: 134.5px; top: -60.5px; }
.rank-popover__rings img:nth-child(6) { left: 114.5px; top: -80.5px; }
.rank-popover__content { position: relative; display: flex; align-items: center; gap: 12px; padding: 24px 20px; height: 102px; }
.rank-popover__place { display: flex; flex: 0 0 40px; align-items: center; justify-content: center; height: 40px; border-radius: 50%; font-size: 24px; font-weight: 400; line-height: 30px; }
.rank-popover__place--current { opacity: 0.85; }
.rank-popover__place--next { background: var(--own-position-teal-bg-end); }
.rank-popover__gap { display: flex; flex: 1; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.rank-popover__amount { background: linear-gradient(90deg, #2b4a45, #4f7066 48%, #305247); background-clip: text; color: transparent; font-size: 16px; font-weight: 600; line-height: 22px; }
.rank-popover__track { position: relative; width: 100%; height: 2px; border-radius: 9999px; background: #b3cac8; }
.rank-popover__fill { width: var(--rank-progress); height: 2px; border-radius: inherit; background: var(--own-content); opacity: 0.75; transform-origin: left center; }
.rank-popover__marker { position: absolute; left: calc(var(--rank-progress) - 3.5px); top: -2.5px; display: block; }
.rank-popover:not([hidden]):not([data-instant]) :is(.rank-popover__fill, .rank-popover__marker) { animation-duration: 640ms; animation-delay: 240ms; animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); animation-fill-mode: both; }
.rank-popover:not([hidden]):not([data-instant]) .rank-popover__fill { animation-name: rank-progress-fill; }
.rank-popover:not([hidden]):not([data-instant]) .rank-popover__marker { animation-name: rank-progress-marker; }
@keyframes rank-progress-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes rank-progress-marker {
  from { transform: translateX(calc(-1 * var(--rank-progress-distance))); }
  to { transform: translateX(0); }
}
.rank-popover__caption { margin: 0; font-size: 12px; font-weight: 400; line-height: 18px; white-space: nowrap; }
.rank-popover__footer { position: relative; display: flex; align-items: center; justify-content: center; height: 56.5px; padding: 8px 16px; border-top: 0.5px solid rgb(232 231 230 / 45%); background: var(--surface); }
.rank-popover__share { display: flex; align-items: center; justify-content: center; gap: 6px; width: 179.211px; height: 40px; padding: 0 14px; border: 1px solid var(--border-secondary); border-radius: 9999px; background: var(--surface); color: var(--content-primary); font-size: 14px; font-weight: 400; line-height: 20px; white-space: nowrap; }
.rank-popover__share img { display: block; flex: 0 0 16px; }
@media (hover: hover) and (pointer: fine) {
  .ranking-row--own .rank:has(.rank-progress-trigger:not([hidden]):hover)::before { opacity: 1; }
  .rank-popover__share:hover { background: var(--button-secondary-bg-hover); }
}
.rank-popover__share:active { background: var(--button-bg-pressed); }
@media (prefers-reduced-motion: reduce) {
  .ranking-row--own .rank::before { transition: none; }
  .rank-popover:not([hidden]):not([data-instant]) .rank-popover__rings-motion { animation: none; will-change: auto; }
  .rank-popover:not([hidden]):not([data-instant]) :is(.rank-popover__fill, .rank-popover__marker) { animation: none; }
}