/* Рейтинг — Figma: капсула + круг слева (badge-ring + clover) */
:root {
  --lr-text: #bebebe;
  --lr-green: #0ae60d;
  --lr-gold: #eab34f;
  --lr-silver: #d2dadc;
  --lr-bronze: #d97e42;
  --lr-board-w: 800px;
  --lr-row-h: 4rem;
  --lr-badge-size: 4rem;
  --lr-arc-ratio: 1.09375;
  --lr-ring-ratio: 0.875;
  --lr-clover-ratio: 0.46875;
  --lr-stat-w: 48px;
  --lr-stat-gap: 20px;
  --lr-cols: var(--lr-badge-size) minmax(120px, 1fr) var(--lr-stat-w) var(--lr-stat-w) 54px;
}

body.league-rating {
  /* rem — дуга и строки масштабируются при зуме страницы */
  --lr-row-h: 4rem;
}

body.league-rating main {
  font-family: 'Russo One', sans-serif;
}

/* Команды — строка-ссылка; league-theme даёт ссылкам Inter — как у игроков, Russo One */
body.league-rating .lr-board,
body.league-rating .lr-board a,
body.league-rating .lr-head,
body.league-rating .lr-head-stats span {
  font-family: 'Russo One', sans-serif;
  font-weight: 400;
  line-height: 1;
}

.lr-wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px 56px;
  box-sizing: border-box;
}

.lr-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lr-text);
  text-align: center;
  margin: 0 0 20px;
}

.lr-tabs {
  display: flex;
  max-width: 400px;
  margin: 0 auto 22px;
  padding: 4px;
  gap: 4px;
  border-radius: 10px;
  border: 1px solid #424242;
  background: #0a0a0a;
}

.lr-tab {
  flex: 1;
  text-align: center;
  text-decoration: none;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(190, 190, 190, 0.55);
  padding: 11px 12px;
  border-radius: 8px;
  transition: background 0.2s, color 0.2s;
}

.lr-tab:hover {
  color: var(--lr-text);
}

.lr-tab--active {
  background: var(--lr-green);
  color: #080808;
}

.lr-board {
  width: 100%;
  max-width: var(--lr-board-w);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lr-head,
.lr-row {
  display: grid;
  grid-template-columns: var(--lr-cols);
  column-gap: var(--lr-stat-gap);
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}

.lr-head {
  padding: 0 16px 6px 0;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(190, 190, 190, 0.55);
}

.lr-head__rank {
  text-align: center;
}

.lr-head__name {
  padding-left: 2px;
  white-space: nowrap;
}

.lr-head-stats {
  display: contents;
}

.lr-head-stats span {
  text-align: center;
  white-space: nowrap;
}

/* Капсула: фон отдельным слоем — дуга на том же градиенте, что обводка рамки */
.lr-row {
  position: relative;
  z-index: 0;
  height: var(--lr-row-h);
  min-height: var(--lr-row-h);
  padding: 0 16px 0 0;
  border: none;
  background: transparent;
  text-decoration: none;
  color: inherit;
  overflow: visible;
}

.lr-row::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: var(--lr-row-bg) left center / 100% 100% no-repeat;
  transition: filter 0.2s;
  pointer-events: none;
}

.lr-row > .lr-badge,
.lr-row > .lr-entity {
  position: relative;
  z-index: 1;
}

.lr-row-stats > * {
  position: relative;
  z-index: 1;
}

a.lr-row:hover::before {
  filter: brightness(1.08);
}

.lr-row--gold {
  --lr-row-stroke: #eab34f;
  --lr-row-bg: url('../league/rating/row-gold.svg');
}

.lr-row--silver {
  --lr-row-stroke: #d2dadc;
  --lr-row-bg: url('../league/rating/row-silver.svg');
}

.lr-row--bronze {
  --lr-row-stroke: #d97e42;
  --lr-row-bg: url('../league/rating/row-bronze.svg');
}

.lr-row--green {
  --lr-row-stroke: #0ae60d;
  --lr-row-bg: url('../league/rating/row-green.svg');
}

/* Клевер + дуга: фикс. 4rem — одинаково в командах и у игроков с двумя строками имени */
.lr-badge {
  position: relative;
  font-size: var(--lr-badge-size);
  width: 1em;
  height: 1em;
  justify-self: center;
  line-height: 0;
  pointer-events: none;
  overflow: visible;
}

.lr-badge__arc {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(1em * var(--lr-arc-ratio));
  height: calc(1em * var(--lr-arc-ratio));
  display: block;
  pointer-events: none;
  z-index: 0;
}

.lr-badge__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(1em * var(--lr-ring-ratio) + 1mm);
  height: calc(1em * var(--lr-ring-ratio) + 1mm);
  display: block;
  pointer-events: none;
  z-index: 1;
}

.lr-badge__ring circle {
  stroke: var(--lr-row-stroke, var(--lr-green));
  fill: none;
}

.lr-badge__num {
  position: absolute;
  top: calc(0.11em + 1mm);
  left: 50%;
  transform: translateX(calc(-50% - 0.1mm));
  min-width: 0.4em;
  font-size: 0.15625em;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--lr-row-stroke, var(--lr-green));
  z-index: 3;
  pointer-events: none;
}

/* Обводка дуги = тот же hex, что stroke в row-*.svg (на общем фоне строки) */
.lr-badge__arc path {
  stroke: var(--lr-row-stroke, var(--lr-green));
  fill: none;
  stroke-opacity: 1;
  shape-rendering: geometricprecision;
}

.lr-badge__clover {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(1em * var(--lr-clover-ratio));
  height: auto;
  display: block;
  pointer-events: none;
  z-index: 2;
}

.lr-entity {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding-left: 0;
}

.lr-row-stats {
  display: contents;
}

.lr-flag {
  flex-shrink: 0;
  width: 22px;
  height: 16px;
  border-radius: 2px;
  object-fit: cover;
}

.lr-logo {
  width: 28px;
  height: 28px;
  border-radius: 5px;
  object-fit: cover;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.35);
}

.lr-logo--round {
  border-radius: 50%;
}

.lr-logo--ph {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: rgba(190, 190, 190, 0.7);
  border: 1px solid #424242;
}

.lr-name,
.lr-name a {
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
}

.lr-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lr-name-block {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
}

.lr-name-sub {
  font-size: 8px;
  letter-spacing: 0.06em;
  color: rgba(190, 190, 190, 0.45);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lr-row:has(.lr-name-sub) {
  --lr-row-h: 4.25rem;
  height: var(--lr-row-h);
  min-height: var(--lr-row-h);
}

.lr-stat {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: #fff;
  text-align: center;
}

.lr-stat--cr {
  font-size: 14px;
}

.lr-row--gold .lr-stat--cr { color: var(--lr-gold); }
.lr-row--silver .lr-stat--cr { color: var(--lr-silver); }
.lr-row--bronze .lr-stat--cr { color: var(--lr-bronze); }
.lr-row--green .lr-stat--cr { color: var(--lr-green); }

.lr-foot {
  margin-top: 24px;
  text-align: center;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  line-height: 1.55;
  color: rgba(190, 190, 190, 0.4);
  max-width: 52em;
  margin-left: auto;
  margin-right: auto;
}

.lr-empty {
  text-align: center;
  padding: 40px 20px;
  border: 1px dashed #424242;
  border-radius: 12px;
  color: rgba(190, 190, 190, 0.45);
  font-size: 14px;
  max-width: var(--lr-board-w);
  margin: 0 auto;
}

@media (max-width: 840px) {
  :root {
    --lr-board-w: 100%;
    --lr-stat-gap: 12px;
    --lr-stat-w: 42px;
    --lr-cols: var(--lr-badge-size) minmax(80px, 1fr) var(--lr-stat-w) var(--lr-stat-w) 48px;
  }
}

@media (max-width: 480px) {
  .lr-wrap {
    padding: 0 12px 40px;
  }

  .lr-board {
    overflow-x: auto;
  }

  .lr-head,
  .lr-row {
    min-width: 520px;
  }
}