/* Лиги GGTM: плашка ника (.rank-nick) и рамка аватарки (.ggtm-frame, рисует ranks.js).
   Цвета лиг здесь и в LEAGUE_STYLE в ranks.js должны совпадать. */


/* ── Плашка ника ── */
.rank-nick {
  --c: #6c7a89;
  display: inline-flex; align-items: center; gap: .3em;
  padding: .05em .65em .1em; border-radius: 999px;
  border: 1.5px solid var(--c);
  background: color-mix(in srgb, var(--c) 17%, transparent);
  color: #f1f8ff; font-weight: 800; line-height: 1.45; white-space: nowrap;
  text-decoration: none; vertical-align: middle; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis;
}
a:hover > .rank-nick, a .rank-nick:hover { background: color-mix(in srgb, var(--c) 30%, transparent); }
a:has(> .rank-nick) { text-decoration: none; }
.rank-nick .fa-star { font-size: .78em; color: var(--c); }
.rank-nick.lg-diamond, .rank-nick.lg-master, .rank-nick.lg-staff {
  box-shadow: 0 0 8px color-mix(in srgb, var(--c) 45%, transparent);
}
.rank-nick.lg-honorary {
  box-shadow: 0 0 10px color-mix(in srgb, var(--c) 60%, transparent), 0 -2px 10px color-mix(in srgb, var(--f) 35%, transparent);
}
/* Длинное название лиги (карточки, окно «i») переносится */
.rank-nick.wrap { white-space: normal; text-align: center; border-radius: 12px; line-height: 1.25; padding-block: .15em .2em; }

@media (prefers-reduced-motion: no-preference) {
  .rank-nick.lg-diamond, .rank-nick.lg-master { animation: ggtm-pulse 4s ease-in-out infinite; }
  .rank-nick.lg-honorary { animation: ggtm-flicker 1.6s ease-in-out infinite; }
}
@keyframes ggtm-pulse {
  0%, 100% { box-shadow: 0 0 5px color-mix(in srgb, var(--c) 35%, transparent); }
  50% { box-shadow: 0 0 13px color-mix(in srgb, var(--c) 70%, transparent); }
}
@keyframes ggtm-flicker {
  0%, 100% { box-shadow: 0 0 8px color-mix(in srgb, var(--c) 55%, transparent), 0 -2px 10px color-mix(in srgb, var(--f) 35%, transparent); }
  35% { box-shadow: 0 0 14px color-mix(in srgb, var(--c) 75%, transparent), 0 -4px 16px color-mix(in srgb, var(--f) 55%, transparent); }
  60% { box-shadow: 0 0 9px color-mix(in srgb, var(--c) 60%, transparent), 0 -3px 12px color-mix(in srgb, var(--f) 40%, transparent); }
}

/* ── Рамка аватарки ──
   --av — диаметр аватарки; рамка шире в 200/128 раза и выше на щит (215/200). */
.ggtm-frame {
  --av: 90px; --int: 1;
  position: relative; display: inline-block; flex-shrink: 0; vertical-align: middle;
  width: calc(var(--av) * 1.5625); height: calc(var(--av) * 1.6797);
  line-height: 0;
}
.ggtm-frame > img.ggtm-frame-av {
  position: absolute; left: 50%; top: calc(var(--av) * .78125);
  width: var(--av); height: var(--av); transform: translate(-50%, -50%);
  border-radius: 50%; object-fit: cover; border: 0; margin: 0; z-index: 1;
}
.ggtm-frame > svg.ggtm-frame-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; }
.ggtm-frame > canvas { position: absolute; pointer-events: none; }
.ggtm-frame > canvas.back { z-index: 0; }
.ggtm-frame > canvas.front { z-index: 3; }
.ggtm-frame .glowring { transform-box: fill-box; transform-origin: center; }
.ggtm-frame .sheen { transform-box: view-box; transform-origin: 100px 100px; opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .ggtm-frame .glowring.fire { animation: ggtm-breathe calc(3.2s - 1.2s * var(--int)) ease-in-out infinite; }
  .ggtm-frame .glowring.calm { animation: ggtm-breathe calc(6s - 2s * var(--int)) ease-in-out infinite; }
  .ggtm-frame .sheen.fire { animation: ggtm-sheen calc(6s - 2.5s * var(--int)) ease-in-out infinite; }
  .ggtm-frame .sheen.calm { animation: ggtm-sheen calc(12s - 5s * var(--int)) ease-in-out infinite; }
}
@keyframes ggtm-breathe {
  0%, 100% { opacity: calc(.08 + .3 * var(--int)); transform: scale(.98); }
  50% { opacity: calc(.22 + .78 * var(--int)); transform: scale(calc(1 + .08 * var(--int))); }
}
@keyframes ggtm-sheen {
  0%, 45% { transform: rotate(-60deg); opacity: 0; }
  50% { opacity: 1; }
  75% { opacity: 1; }
  80%, 100% { transform: rotate(300deg); opacity: 0; }
}

/* ── Плитка «Ранг» и окно описания лиг ── */
.rank-tile-name { font-weight: 800; line-height: 1.25; color: var(--c); text-wrap: balance; }
.rank-bar { height: 5px; background: rgba(255, 255, 255, .07); border-radius: 3px; overflow: hidden; margin-top: 8px; }
.rank-bar > i { display: block; height: 100%; border-radius: 3px; background: var(--c); }
.rank-next { font-size: .74rem; color: rgba(180, 220, 255, .5); margin-top: 5px; font-variant-numeric: tabular-nums; }
.rank-rules { display: flex; flex-direction: column; gap: 6px; }
.rank-rule { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 6px 8px; border-radius: 10px; }
.rank-rule.cur { background: rgba(2, 207, 243, .07); outline: 1px solid rgba(2, 207, 243, .18); }
.rank-rule .ggtm-frame { --av: 34px; }
.rank-rule-sub { font-size: .76rem; color: rgba(180, 220, 255, .5); margin-top: 3px; }
.rank-rule-hrs { font-size: .8rem; color: rgba(180, 220, 255, .55); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.rank-you { font-size: .7rem; color: #02cff3; text-transform: uppercase; letter-spacing: .08em; }

/* Цвета лиг — в конце, чтобы перекрывать --c по умолчанию у .rank-nick */
.lg-bronze   { --c: #c47f4a; }
.lg-silver   { --c: #b8c4cf; }
.lg-gold     { --c: #e5b33d; }
.lg-platinum { --c: #7fd3cb; }
.lg-diamond  { --c: #5bb8ff; --f: #96d2ff; }
.lg-master   { --c: #a46cff; --f: #c896ff; }
.lg-honorary { --c: #02cff3; --f: #02cff3; }
.lg-staff    { --c: #02cff3; }