/* Правка 221 — скелет загрузки (общие классы). Ячейки #121318 на фоне #0a0b0e с мягким бегущим бликом 4,5% белого, 2 с —
   как в кадре дизайнера «Пример подгруза страницы» (Figma 4529:21116) и в заставке главной (правка 219). */
.sk{--sk-fon:#121318;--sk-fon2:#1b1d24;--sk-blik:rgba(255,255,255,.045);position:relative;display:block;box-sizing:border-box;
  pointer-events:none;user-select:none;opacity:0;transition:opacity .18s ease;contain:layout paint}
.sk *{box-sizing:border-box}
.sk.sk--vidno{opacity:1}
.sk.sk--uhod{opacity:0}
.sk--poverh{position:absolute;inset:0;z-index:6}
.sk--vnutri{width:100%}
.sk-yacheyka,.sk-polosa,.sk-krug,.sk-ryad,.sk-pilyulya{position:relative;overflow:hidden;background:var(--sk-fon);border-radius:12px;flex:none}
.sk-polosa{height:12px;border-radius:6px;width:60%}
.sk-pilyulya{border-radius:999px}
.sk-krug{border-radius:50%;width:40px;height:40px}
.sk-ryad{display:flex;align-items:center;gap:12px;padding:0 14px;border-radius:14px}
.sk-ryad .sk-krug,.sk-ryad .sk-polosa,.sk-ryad .sk-yacheyka,.sk-yacheyka .sk-polosa,.sk-yacheyka .sk-krug,.sk-yacheyka .sk-yacheyka{background:var(--sk-fon2)}
.sk-stolb{display:flex;flex-direction:column;gap:8px;flex:1 1 auto;min-width:0}
.sk-setka{display:grid;gap:10px}
.sk-stopka{display:flex;flex-direction:column;gap:10px}
.sk-strok{display:flex;align-items:center;gap:10px}
.sk-rast{flex:1 1 auto}
.sk-yacheyka::after,.sk-polosa::after,.sk-krug::after,.sk-ryad::after,.sk-pilyulya::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(255,255,255,0) 25%,var(--sk-blik) 50%,rgba(255,255,255,0) 75%);
  transform:translate3d(-100%,0,0);animation:sk-blik 2s linear infinite;animation-play-state:paused}
.sk.sk--vidno:not(.sk--uhod) :is(.sk-yacheyka,.sk-polosa,.sk-krug,.sk-ryad,.sk-pilyulya)::after{animation-play-state:running}
/* A nested avatar or text bar shares its row sweep; avoid stacked highlights. */
.sk-ryad :is(.sk-yacheyka,.sk-polosa,.sk-krug,.sk-pilyulya)::after,.sk-yacheyka :is(.sk-yacheyka,.sk-polosa,.sk-krug,.sk-pilyulya)::after{content:none}
@keyframes sk-blik{to{transform:translate3d(100%,0,0)}}
@media (prefers-reduced-motion:reduce){.sk ::after,.sk-yacheyka::after,.sk-polosa::after,.sk-krug::after,.sk-ryad::after,.sk-pilyulya::after{animation:none}}
/* контейнер, в который вставлен скелет поверх: даём ему точку отсчёта, если у него position:static */
.sk-tochka{position:relative}
/* экран перехода в режим: поверх главной, под корпусом режима (z-index 40) */
.sk-perehod{position:fixed;inset:0;z-index:39;background:#0a0b0e;overflow:hidden}
.sk-perehod .sk-yacheyka,.sk-perehod .sk-krug,.sk-perehod .sk-pilyulya{position:absolute}
/* картинки: блик на пустом боксе, пока не загрузились (класс sk-img-ok ставит движок) */
.sk-img:not(.sk-img-ok){background-color:#181a1f;background-image:linear-gradient(100deg,rgba(255,255,255,0) 25%,rgba(255,255,255,.07) 50%,rgba(255,255,255,0) 75%);background-size:250% 100%;animation:sk-blik-fon 1.6s ease-in-out infinite}
@keyframes sk-blik-fon{from{background-position:120% 0}to{background-position:-120% 0}}
@media (prefers-reduced-motion:reduce){.sk-img:not(.sk-img-ok){animation:none}}


/* Loading uses the page's real widths and Telegram insets. The background
   remains viewport-wide while the placeholders match the app column. */
.sk-screen{position:relative;width:100%;max-width:var(--ds-page-w,430px);height:calc(100% - var(--tg-inset-top,0px) - var(--tg-inset-bottom,0px));margin:var(--tg-inset-top,0px) auto 0}
.sk-perehod .sk-screen-cases{position:absolute;inset-inline:2.56%;top:75px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.sk-perehod .sk-screen-cases>.sk-yacheyka{position:relative;width:100%;height:auto;aspect-ratio:180/269;border-radius:16px}

/* Leaderboard: the same 114 / 122 / 114 columns and 30px podium steps as
   the actual cards, including on wider desktop viewports. */
/* Hide a retired overlay synchronously with the controller state; removal
   by the shared observer runs in the following animation frame. */
#tab-leaders .leaders-hero:not([data-leaderboard-state="loading"])>.sk,
#tab-leaders .leaders-data-status:not([data-leaderboard-state="loading"])>.sk{display:none}
#tab-leaders .leaders-hero[data-leaderboard-state="loading"]>:not(.sk){visibility:hidden}
#tab-leaders .leaders-hero[data-leaderboard-state="loading"]::after{opacity:0}
#tab-leaders .sk-lb-hero{background:var(--ds-bg-0,#0a0b0e);overflow:hidden}
#tab-leaders .sk-lb-cards{position:absolute;inset-inline:0;bottom:0;display:flex;align-items:flex-end;gap:var(--ds-space-4,10px)}
#tab-leaders .sk-lb-card{flex:114 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:5px}
#tab-leaders .sk-lb-card--first{flex-grow:122;margin-bottom:200px}
#tab-leaders .sk-lb-card--second{margin-bottom:170px}
#tab-leaders .sk-lb-card--third{margin-bottom:140px}
#tab-leaders .sk-lb-card>.sk-krug{width:50px;height:50px}
#tab-leaders .sk-lb-name{height:19px;width:min(72px,80%);margin-top:5px;display:flex;align-items:center}
#tab-leaders .sk-lb-name>.sk-polosa{width:100%;height:12px}
#tab-leaders .sk-lb-score{height:16px;width:48px;display:flex;align-items:center}
#tab-leaders .sk-lb-score>.sk-polosa{height:10px;width:100%}
#tab-leaders .sk-lb-podium{position:absolute;bottom:0;left:50%;transform:translateX(-50%);display:flex;align-items:flex-end;gap:10px;width:370px;max-width:100%;height:160px}
#tab-leaders .sk-lb-pillar{flex:114 1 0;min-width:0;border-radius:12px 12px 0 0}
#tab-leaders .sk-lb-pillar--first{flex-grow:122;height:160px}
#tab-leaders .sk-lb-pillar--second{height:130px}
#tab-leaders .sk-lb-pillar--third{height:100px}
#tab-leaders .sk-lb-hero::after{content:"";position:absolute;inset-inline:0;bottom:0;height:65px;background:linear-gradient(180deg,transparent,var(--ds-bg-0,#0a0b0e));pointer-events:none}
#tab-leaders .leaders-data-status[data-leaderboard-state="loading"]{min-height:377px;overflow:hidden}
#tab-leaders .sk-lb-list{gap:3px}
#tab-leaders .sk-lb-ryad{height:35px;padding:0 10px;gap:5px;border-radius:51px}
#tab-leaders .sk-lb-ryad>.sk-polosa{height:10px}
#tab-leaders .sk-lb-ryad>.sk-krug{width:28px;height:28px}
#tab-leaders .sk-lb-rank{width:22px}
#tab-leaders .sk-lb-person{width:var(--name-width,72px);max-width:24%}
#tab-leaders .sk-lb-prize{width:24px;height:24px;border-radius:6px;margin-inline-end:5px}
#tab-leaders .sk-lb-value{width:52px}
#tab-leaders .leaders-hero[data-leaderboard-state="ready"]>.leaders-cards{animation:sk-content-in .18s ease-out}
@keyframes sk-content-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){
 .sk{transition:none}
 #tab-leaders .leaders-hero[data-leaderboard-state="ready"]>.leaders-cards{animation:none}
 #tab-leaders img,#tab-profile .profile-inv-thumb img,#tab-draws .raffle-center-holder img,#tab-draws .raffle-side-holder img,#shopGrid img{animation:none!important}
}
