/* Лига недели (screens/league.js, game/leagues.py): карточка на «Заданиях», таблица группы, лестница лиг.
   Цвет лиги — переменная --lg; анимаций почти нет (только появление строк, transform/opacity). */
.tk-league { --lg: #C98A54; }
.tk-league.t1 { --lg: #C9D3DA; } .tk-league.t2 { --lg: #F3D28B; } .tk-league.t3 { --lg: #7FD8BE; } .tk-league.t4 { --lg: #C9A2FF; }
.tk-league .tk-pass-ico { color: var(--lg); }
.tk-league small em { font-style: normal; font-weight: 800; }
.tk-league small em.up { color: var(--aqua); } .tk-league small em.down { color: #F29A8E; }

.lg .lg-st b svg { width: 34px; height: 34px; }
.lg-last { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px; border-radius: 18px;
  background: rgba(8, 20, 24, .7); border: 1.5px solid rgba(255, 255, 255, .12); }
.lg-last.up { border-color: rgba(127, 216, 190, .6); } .lg-last.down { border-color: rgba(242, 154, 142, .55); }
.lg-last-ico { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .08); }
.lg-last.up .lg-last-ico { color: var(--aqua); } .lg-last.down .lg-last-ico { color: #F29A8E; transform: rotate(-90deg); }
.lg-last-ico svg { width: 20px; height: 20px; }
.lg-last b { display: block; font-size: 19px; line-height: 1.1; }
.lg-last small { display: block; margin-top: 2px; font-size: 13px; font-weight: 600; color: rgba(246, 243, 236, .75); }

.lg-table { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.lg-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; min-height: 52px;
  padding: 6px 14px 6px 10px; border-radius: 16px; background: rgba(8, 20, 24, .62); border: 1px solid rgba(255, 255, 255, .08); }
.lg-row.up { background: linear-gradient(90deg, rgba(127, 216, 190, .16), rgba(8, 20, 24, .62) 60%); }
.lg-row.down { background: linear-gradient(90deg, rgba(242, 154, 142, .14), rgba(8, 20, 24, .62) 60%); }
.lg-row.me { border-color: rgba(243, 210, 139, .85); box-shadow: 0 0 0 1px rgba(243, 210, 139, .35); }
.lg-place { font-size: 24px; text-align: center; color: rgba(246, 243, 236, .7); }
.lg-row.up .lg-place { color: var(--aqua); } .lg-row.me .lg-place { color: var(--accent); }
.lg-name { min-width: 0; }
.lg-name b { display: block; font-size: 18px; line-height: 1.1; overflow-wrap: anywhere; }
.lg-name small { display: block; font-size: 12px; font-weight: 600; color: rgba(246, 243, 236, .6); }
.lg-tag { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-style: normal; }
.lg-tag svg { width: 14px; height: 14px; }
.lg-tag.up { color: var(--aqua); background: rgba(127, 216, 190, .16); }
.lg-tag.down { color: #F29A8E; background: rgba(242, 154, 142, .14); transform: rotate(180deg); }
.lg-pts { font-size: 22px; min-width: 40px; text-align: right; }

.lg-ladder { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.lg-tier { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 16px; background: rgba(8, 20, 24, .55);
  border: 1px solid rgba(255, 255, 255, .07); opacity: .7; }
.lg-tier.cur { opacity: 1; border-color: rgba(243, 210, 139, .8); }
.lg-tier.past { opacity: .5; }
.lg-tier-ico { flex: none; width: 34px; height: 34px; display: grid; place-items: center; color: var(--accent); }
.lg-tier-ico svg { width: 26px; height: 26px; }
.lg-tier b { display: block; font-size: 19px; line-height: 1.1; }
.lg-tier small { display: block; font-size: 12.5px; font-weight: 600; color: rgba(246, 243, 236, .7); }