/* Rankings composition. Shared ui-* components own all surfaces and controls. */
.rankings-screen.ui-screen { gap: var(--ui-space-3); }
.rankings-heading { gap: var(--ui-space-2); }
.rankings-heading h1 { flex: 1; min-width: 0; margin: 0; }
.rankings-refresh { flex: 0 0 var(--ui-touch); width: var(--ui-touch); padding: var(--ui-space-2); }
.rankings-refresh > svg { width: var(--ui-space-6); height: var(--ui-space-6); }
.rankings-screen .rankings-modes { gap: var(--ui-space-2); }
.rankings-screen .rankings-modes .ui-button { min-height: 52px; padding-inline: var(--ui-space-1); gap: var(--ui-space-1); }
.rankings-screen .rankings-modes .ui-icon { width: 21px; height: 21px; }
.rankings-screen .rankings-modes .ui-selection .ui-icon { width: var(--ui-space-4); height: var(--ui-space-4); }
.rankings-modes [aria-pressed=true] > .ui-icon { display: none; }
.rankings-mode-label { min-width: 0; overflow-wrap: normal; }
.rankings-status { min-height: 20px; margin: var(--ui-space-3) 0; font-size: var(--ui-text-sm); line-height: var(--ui-leading-body); }
.rankings-status.is-error { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-2); }
.rankings-status.is-error .ui-button { flex-shrink: 0; }
.rankings-screen .rankings-own { display: flex; width: 100%; justify-content: space-between; gap: var(--ui-space-2); padding: var(--ui-space-3); text-align: left; }
.rankings-own strong { font-size: var(--ui-text-lg); }
.rankings-own > span { display: flex; align-items: center; gap: var(--ui-space-1); font-size: var(--ui-text-sm); }
.rankings-outside { margin: 0 0 var(--ui-space-3); }
.rankings-columns, .rankings-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: var(--ui-space-2); }
.rankings-columns { padding: 0 calc(var(--ui-space-3) + 3px) var(--ui-space-2); color: var(--ui-muted); font-size: var(--ui-text-sm); line-height: var(--ui-leading-body); }
.rankings-columns > span:last-child { text-align: right; }
.rankings-screen .rankings-list { display: grid; gap: var(--ui-space-2); margin: 0; padding: 0; border: 0; border-radius: 0; list-style: none; overflow: visible; }
.rankings-row { min-height: 68px; scroll-margin-block: calc(var(--app-inset-top) + var(--ui-space-4)) calc(var(--app-inset-bottom) + var(--ui-nav-reserve)); }
.rankings-rank { font-size: var(--ui-text-title); font-variant-numeric: tabular-nums; text-align: center; }
.rankings-row.is-leading .rankings-rank { color: var(--ui-gold); }
.rankings-row.is-you { border-color: var(--ui-gold); }
.rankings-row:focus-visible { outline: 3px solid var(--ui-focus); outline-offset: 3px; }
.rankings-screen .leaderboard-name { min-width: 0; white-space: normal; overflow: visible; overflow-wrap: anywhere; font-size: var(--ui-text-lg); line-height: var(--ui-leading-body); font-weight: 700; text-align: left; }
.rankings-screen .leaderboard-name small { display: table; margin-top: var(--ui-space-1); font-size: var(--ui-text-xs); }
.rankings-screen .leaderboard-name small .ui-icon { margin-right: var(--ui-space-1); }
.rankings-value { max-width: 100%; font-size: var(--ui-text-action); font-variant-numeric: tabular-nums; text-align: right; }
.rankings-empty { display: grid; justify-items: start; gap: var(--ui-space-2); padding: var(--ui-space-4); }
.rankings-empty > .ui-icon { width: 40px; height: 40px; }
.rankings-empty p { margin: 0; }
.rankings-note { margin: var(--ui-space-4) 0 0; }
.rankings-skeleton { display: grid; gap: var(--ui-space-2); }
.rankings-skeleton > div { display: grid; grid-template-columns: 30px 1fr 56px; align-items: center; gap: var(--ui-space-4); min-height: 68px; }
.rankings-skeleton i { display: block; height: var(--ui-space-3); background: var(--ui-control-disabled); border-radius: var(--ui-radius-sm); }
.rankings-skeleton > div:nth-child(even) i:nth-child(2) { width: 70%; }
.rankings-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Large server values get a separate line without compressing fighter names. */
.rankings-row.has-long-value { row-gap: var(--ui-space-1); }
.rankings-row.has-long-value .rankings-rank { grid-row: span 2; }
.rankings-row.has-long-value .leaderboard-name { grid-column: 2 / -1; }
.rankings-row.has-long-value .rankings-value { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: var(--ui-space-1) var(--ui-space-2); text-align: left; }
.rankings-row.has-long-value .rankings-sr-only { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; white-space: normal; font: 400 var(--ui-text-sm)/var(--ui-leading-body) var(--ui-font-body); color: var(--ui-muted); -webkit-text-stroke: 0; text-shadow: none; }
@media (max-width: 335px) {
  .rankings-screen .rankings-own { align-items: flex-start; flex-direction: column; }
}