/* «Живой» фон легендарных скинов: в игре (sdk.js, CG.live) и на карточках хаба.
   <div class="lv-bd" data-bd="aurora" style="--c1:#..;--c2:#..;--c3:#.."><i></i>…</div>
   Только transform/opacity — анимации на композиторе, без перерисовки кадра игры.
   Текстуры — белые маски (3D-рендер tools/render/page/scenes/live.js), цвет даёт background.
   Эффект держится у краёв и сверху: центр поля остаётся читаемым.
   --k — сила (в игре 1, на маленькой карточке больше), --lvd — сдвиг общего часового цикла. */
.lv-bd {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; contain: strict;
  --k: 1; --c1: #ffd23a; --c2: #ff5fb4; --c3: #ffffff;
}
.lv-bd > i { position: absolute; display: block; will-change: transform, opacity; animation-delay: var(--lvd, 0s); }
.lv-bd .cl, .lv-bd .au, .lv-bd .ry {
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
  -webkit-mask-size: 50% 100%; mask-size: 50% 100%;
}
.lv-bd .cl { -webkit-mask-image: url(/assets/live/bd-cloud.webp?v=1); mask-image: url(/assets/live/bd-cloud.webp?v=1); }
.lv-bd .au { -webkit-mask-image: url(/assets/live/bd-aurora.webp?v=1); mask-image: url(/assets/live/bd-aurora.webp?v=1); }
.lv-bd .ry {
  -webkit-mask-image: url(/assets/live/bd-rays.webp?v=1); mask-image: url(/assets/live/bd-rays.webp?v=1);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.lv-bd .gl {
  width: 18%; aspect-ratio: 1; opacity: 0;
  background: url(/assets/live/glint-white.webp?v=1) center / contain no-repeat;
}
/* мягкая подсветка краёв экрана */
.lv-bd .vg { inset: 0; background: radial-gradient(ellipse 75% 62% at 50% 46%, transparent 58%, var(--c1) 100%); }

@keyframes lv-drift { to { transform: translateX(-50%); } }
@keyframes lv-drift-r { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes lv-breathe { 0%, 100% { opacity: calc(var(--o) * .55 * var(--k)); } 50% { opacity: calc(var(--o) * var(--k)); } }
@keyframes lv-flicker {
  0%, 100% { opacity: calc(var(--o) * .7 * var(--k)); transform: scaleY(1); }
  23% { opacity: calc(var(--o) * var(--k)); transform: scaleY(1.08); }
  41% { opacity: calc(var(--o) * .8 * var(--k)); transform: scaleY(.97); }
  67% { opacity: calc(var(--o) * .95 * var(--k)); transform: scaleY(1.05); }
}
@keyframes lv-aurora {
  0% { transform: translateX(0) scaleY(1); }
  50% { transform: translateX(-25%) scaleY(1.18); }
  100% { transform: translateX(-50%) scaleY(1); }
}
@keyframes lv-swing { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
@keyframes lv-sweep-l { from { transform: rotate(-32deg); } to { transform: rotate(6deg); } }
@keyframes lv-sweep-r { from { transform: rotate(32deg); } to { transform: rotate(-6deg); } }
@keyframes lv-band { 0% { transform: translateX(-70%); } 45%, 100% { transform: translateX(70%); } }
@keyframes lv-twinkle {
  0%, 62%, 100% { opacity: 0; transform: scale(.2) rotate(0); }
  74% { opacity: var(--k); transform: scale(1) rotate(45deg); }
  86% { opacity: 0; transform: scale(.35) rotate(90deg); }
}

/* ---- туманность: два слоя клубов плывут навстречу, края дышат */
[data-bd="nebula"] .cl.a { left: 0; top: -8%; width: 200%; height: 58%; background: var(--c1); --o: .34;
  animation: lv-drift 46s linear infinite, lv-breathe 9s ease-in-out infinite; animation-delay: var(--lvd, 0s); }
[data-bd="nebula"] .cl.b { left: 0; bottom: -10%; width: 200%; height: 46%; background: var(--c2); --o: .24;
  animation: lv-drift-r 62s linear infinite, lv-breathe 12s ease-in-out infinite; animation-delay: var(--lvd, 0s); }
[data-bd="nebula"] .vg { --o: .32; animation: lv-breathe 6s ease-in-out infinite; animation-delay: var(--lvd, 0s); }

/* ---- северное сияние: занавесы сверху колышутся и тянутся */
[data-bd="aurora"] .au.a { left: 0; top: -2%; width: 200%; height: 44%; transform-origin: 50% 0;
  background: linear-gradient(90deg, var(--c1), var(--c2) 25%, var(--c1) 50%, var(--c2) 75%, var(--c1));
  opacity: calc(.62 * var(--k)); animation: lv-aurora 26s linear infinite; animation-delay: var(--lvd, 0s); }
[data-bd="aurora"] .au.b { left: 0; top: 6%; width: 200%; height: 34%; transform-origin: 50% 0;
  -webkit-mask-position: 37% 0; mask-position: 37% 0;
  background: linear-gradient(90deg, var(--c2), var(--c1) 25%, var(--c2) 50%, var(--c1) 75%, var(--c2));
  --o: .42; animation: lv-drift-r 38s linear infinite, lv-breathe 7s ease-in-out infinite; animation-delay: var(--lvd, 0s); }
[data-bd="aurora"] .vg { --o: .2; animation: lv-breathe 8s ease-in-out infinite; animation-delay: var(--lvd, 0s); }

/* ---- лучи сверху: веер медленно качается, второй — навстречу */
[data-bd="rays"] .ry.a, [data-bd="rays"] .ry.b { left: -40%; top: -6%; width: 180%; height: 90%; transform-origin: 50% 0; }
[data-bd="rays"] .ry.a { background: radial-gradient(ellipse at 50% 0, var(--c3), var(--c1) 45%, transparent 80%); --o: .5;
  animation: lv-swing 11s ease-in-out infinite alternate, lv-breathe 5s ease-in-out infinite; animation-delay: var(--lvd, 0s); }
[data-bd="rays"] .ry.b { background: radial-gradient(ellipse at 50% 0, var(--c1), var(--c2) 60%, transparent 85%); --o: .3;
  animation: lv-swing 15s ease-in-out infinite alternate-reverse, lv-breathe 7s ease-in-out infinite; animation-delay: var(--lvd, 0s); }
[data-bd="rays"] .vg { --o: .18; animation: lv-breathe 5s ease-in-out infinite; animation-delay: var(--lvd, 0s); }

/* ---- жар: снизу дышит раскалённое зарево, над ним плывёт марево */
[data-bd="heat"] .hg { left: -10%; right: -10%; bottom: -6%; height: 48%; transform-origin: 50% 100%;
  background: radial-gradient(ellipse 60% 100% at 50% 100%, var(--c1), var(--c2) 40%, transparent 75%); --o: .55;
  animation: lv-flicker 2.4s ease-in-out infinite; animation-delay: var(--lvd, 0s); }
[data-bd="heat"] .cl.a { left: 0; bottom: 4%; width: 200%; height: 30%; background: var(--c2); --o: .26;
  animation: lv-drift 18s linear infinite, lv-breathe 3s ease-in-out infinite; animation-delay: var(--lvd, 0s); }
[data-bd="heat"] .vg { --o: .26; animation: lv-breathe 3.2s ease-in-out infinite; animation-delay: var(--lvd, 0s); }

/* ---- иней: холодные края, позёмка сверху, блик-полоса по экрану */
[data-bd="frost"] .vg { --o: .42; animation: lv-breathe 7s ease-in-out infinite; animation-delay: var(--lvd, 0s); }
[data-bd="frost"] .cl.a { left: 0; top: -6%; width: 200%; height: 40%; background: var(--c3); --o: .22;
  animation: lv-drift 30s linear infinite, lv-breathe 10s ease-in-out infinite; animation-delay: var(--lvd, 0s); }
[data-bd="frost"] .bd { inset: -10% -60%; opacity: calc(.32 * var(--k));
  background: linear-gradient(110deg, transparent 44%, var(--c1) 49%, var(--c3) 50%, var(--c1) 51%, transparent 56%);
  animation: lv-band 7s ease-in-out infinite; animation-delay: var(--lvd, 0s); }

/* ---- стадион: два прожектора ходят навстречу, по трибунам — вспышки камер */
[data-bd="stadium"] .ry.a, [data-bd="stadium"] .ry.b { top: -8%; width: 90%; height: 95%; --o: .42;
  background: radial-gradient(ellipse at 50% 0, var(--c3), var(--c1) 50%, transparent 85%); }
[data-bd="stadium"] .ry.a { left: -35%; transform-origin: 50% 0;
  animation: lv-sweep-l 6s ease-in-out infinite alternate, lv-breathe 3s ease-in-out infinite; animation-delay: var(--lvd, 0s); }
[data-bd="stadium"] .ry.b { right: -35%; transform-origin: 50% 0;
  animation: lv-sweep-r 6s ease-in-out infinite alternate, lv-breathe 3s ease-in-out infinite; animation-delay: var(--lvd, 0s); }
[data-bd="stadium"] .gl { animation: lv-twinkle 3s ease-out infinite; }
[data-bd="stadium"] .gl.g1 { left: 8%; top: 5%; animation-delay: calc(var(--lvd, 0s) - .4s); }
[data-bd="stadium"] .gl.g2 { right: 12%; top: 9%; width: 12%; animation-delay: calc(var(--lvd, 0s) - 1.5s); }
[data-bd="stadium"] .gl.g3 { left: 46%; top: 2%; width: 10%; animation-delay: calc(var(--lvd, 0s) - 2.3s); }
[data-bd="stadium"] .vg { --o: .16; animation: lv-breathe 3s ease-in-out infinite; animation-delay: var(--lvd, 0s); }

/* ---- кристалл: радужная грань-блик проходит по экрану, по углам вспыхивают искры */
[data-bd="prism"] .bd { inset: -20% -80%; opacity: calc(.34 * var(--k));
  background: linear-gradient(105deg, transparent 40%, var(--c1) 46%, var(--c3) 50%, var(--c2) 54%, transparent 60%);
  animation: lv-band 8s ease-in-out infinite; animation-delay: var(--lvd, 0s); }
[data-bd="prism"] .gl { animation: lv-twinkle 4s ease-out infinite; }
[data-bd="prism"] .gl.g1 { left: 4%; top: 4%; animation-delay: calc(var(--lvd, 0s) - 1s); }
[data-bd="prism"] .gl.g2 { right: 5%; top: 14%; width: 13%; animation-delay: calc(var(--lvd, 0s) - 2.4s); }
[data-bd="prism"] .gl.g3 { right: 10%; bottom: 8%; width: 15%; animation-delay: calc(var(--lvd, 0s) - 3.4s); }
[data-bd="prism"] .vg { --o: .3; animation: lv-breathe 6s ease-in-out infinite; animation-delay: var(--lvd, 0s); }

/* ---- плазма: края пульсируют двумя цветами по очереди, сверху течёт разряд */
[data-bd="plasma"] .vg { --o: .5; animation: lv-breathe 1.8s ease-in-out infinite; animation-delay: var(--lvd, 0s); }
[data-bd="plasma"] .vg.b { background: radial-gradient(ellipse 75% 62% at 50% 46%, transparent 58%, var(--c2) 100%);
  animation-delay: calc(var(--lvd, 0s) - .9s); }
[data-bd="plasma"] .cl.a { left: 0; top: -10%; width: 200%; height: 34%; background: var(--c1); --o: .3;
  animation: lv-drift 12s linear infinite, lv-breathe 1.8s ease-in-out infinite; animation-delay: var(--lvd, 0s); }
[data-bd="plasma"] .cl.b { left: 0; bottom: -10%; width: 200%; height: 30%; background: var(--c2); --o: .26;
  animation: lv-drift-r 14s linear infinite, lv-breathe 1.8s ease-in-out infinite; animation-delay: calc(var(--lvd, 0s) - .9s); }

/* ---- туман: полосы тумана плывут на разной высоте */
[data-bd="fog"] .cl.a { left: 0; top: -4%; width: 200%; height: 46%; background: var(--c3); --o: .2;
  animation: lv-drift 50s linear infinite, lv-breathe 11s ease-in-out infinite; animation-delay: var(--lvd, 0s); }
[data-bd="fog"] .cl.b { left: 0; bottom: -6%; width: 200%; height: 40%; background: var(--c1); --o: .22;
  animation: lv-drift-r 36s linear infinite, lv-breathe 8s ease-in-out infinite; animation-delay: var(--lvd, 0s); }
[data-bd="fog"] .vg { --o: .24; animation: lv-breathe 9s ease-in-out infinite; animation-delay: var(--lvd, 0s); }

/* ================= «Звёздная коллекция»: фоны за звёзды =================================
   starnebula | polar | goldstorm | neoncity — в игре слой один и только по краям/сверху
   (центр поля читаемый), в хабе тот же слой лежит поверх картины фона (web/hub/stars.css).
   Только transform/opacity; .gr — наклон у обёртки, бег сетки — transform вложенного <b>. */
@keyframes sx-comet {
  0% { opacity: 0; transform: rotate(16deg) translateX(0); }
  3% { opacity: var(--k); }
  20% { opacity: 0; transform: rotate(16deg) translateX(380%); }
  100% { opacity: 0; transform: rotate(16deg) translateX(380%); }
}
@keyframes sx-spin { to { transform: rotate(360deg); } }
@keyframes sx-grid { to { transform: translateY(40px); } }
.lv-bd .tw { width: 9%; aspect-ratio: 1; opacity: 0; background: url(/assets/live/glint-white.webp?v=1) center / contain no-repeat;
  animation: lv-twinkle 3.6s ease-out infinite; }
.lv-bd .tw.g { background-image: url(/assets/live/glint-gold.webp?v=1); }
.lv-bd .tw.t1 { left: 5%; top: 6%; animation-delay: calc(var(--lvd, 0s) - .3s); }
.lv-bd .tw.t2 { right: 7%; top: 16%; width: 7%; animation-delay: calc(var(--lvd, 0s) - 1.5s); }
.lv-bd .tw.t3 { left: 12%; bottom: 10%; width: 6%; animation-delay: calc(var(--lvd, 0s) - 2.6s); }

/* ---- звёздная туманность: клубы сверху и снизу плывут навстречу, искры, раз в 9 с — комета */
[data-bd="starnebula"] .cl.a { left: 0; top: -10%; width: 200%; height: 50%; background: var(--c1); --o: .36;
  animation: lv-drift 52s linear infinite, lv-breathe 9s ease-in-out infinite; animation-delay: var(--lvd, 0s); }
[data-bd="starnebula"] .cl.b { left: 0; bottom: -12%; width: 200%; height: 40%; background: var(--c2); --o: .28;
  animation: lv-drift-r 64s linear infinite, lv-breathe 11s ease-in-out infinite; animation-delay: var(--lvd, 0s); }
[data-bd="starnebula"] .cm { left: -34%; top: 4%; width: 34%; aspect-ratio: 512 / 96; opacity: 0; transform-origin: 0 50%;
  background: url(/assets/live/sx-comet.webp?v=1) center / 100% 100% no-repeat; animation: sx-comet 9s linear infinite;
  animation-delay: calc(var(--lvd, 0s) - 2s); }
[data-bd="starnebula"] .vg { --o: .3; animation: lv-breathe 7s ease-in-out infinite; animation-delay: var(--lvd, 0s); }

/* ---- полярная ночь: два занавеса сияния сверху колышутся навстречу, мерцают звёзды */
[data-bd="polar"] .au.a { left: 0; top: -4%; width: 200%; height: 46%; transform-origin: 50% 0;
  background: linear-gradient(90deg, var(--c1), var(--c3) 12%, var(--c1) 25%, var(--c2) 50%, var(--c1) 75%, var(--c3) 88%, var(--c1));
  opacity: calc(.68 * var(--k)); animation: lv-aurora 22s linear infinite; animation-delay: var(--lvd, 0s); }
[data-bd="polar"] .au.b { left: 0; top: 4%; width: 200%; height: 36%; transform-origin: 50% 0;
  -webkit-mask-position: 41% 0; mask-position: 41% 0;
  background: linear-gradient(90deg, var(--c2), var(--c1) 25%, var(--c2) 50%, var(--c1) 75%, var(--c2));
  --o: .5; animation: lv-drift-r 30s linear infinite, lv-breathe 6s ease-in-out infinite; animation-delay: var(--lvd, 0s); }
[data-bd="polar"] .vg { --o: .22; animation: lv-breathe 8s ease-in-out infinite; animation-delay: var(--lvd, 0s); }

/* ---- золотой шторм: медленный золотой вихрь, веер лучей сверху, золотые искры */
[data-bd="goldstorm"] .sw { left: -30%; top: 50%; width: 160%; aspect-ratio: 1; margin-top: -80%;
  -webkit-mask: url(/assets/live/sx-swirl.webp?v=1) center / contain no-repeat; mask: url(/assets/live/sx-swirl.webp?v=1) center / contain no-repeat;
  background: radial-gradient(circle, var(--c3), var(--c1) 40%, var(--c2) 75%); opacity: calc(.16 * var(--k));
  animation: sx-spin 48s linear infinite; animation-delay: var(--lvd, 0s); }
[data-bd="goldstorm"] .ry.a { left: -40%; top: -6%; width: 180%; height: 80%; transform-origin: 50% 0;
  background: radial-gradient(ellipse at 50% 0, var(--c3), var(--c1) 45%, transparent 80%); --o: .4;
  animation: lv-swing 13s ease-in-out infinite alternate, lv-breathe 5s ease-in-out infinite; animation-delay: var(--lvd, 0s); }
[data-bd="goldstorm"] .vg { --o: .3; animation: lv-breathe 4s ease-in-out infinite; animation-delay: var(--lvd, 0s); }

/* ---- неоновый город: внизу бежит неоновая сетка, края пульсируют розовым и голубым */
[data-bd="neoncity"] .gr { left: -60%; width: 220%; bottom: -2%; height: 30%; overflow: hidden; transform-origin: 50% 100%;
  transform: perspective(220px) rotateX(58deg); opacity: calc(.75 * var(--k));
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 55%); mask-image: linear-gradient(180deg, transparent, #000 55%); }
[data-bd="neoncity"] .gr b { position: absolute; left: 0; right: 0; top: -40px; bottom: 0; display: block; background: var(--c1);
  -webkit-mask: url(/assets/live/sx-grid.webp?v=1) 0 0 / 40px 40px repeat; mask: url(/assets/live/sx-grid.webp?v=1) 0 0 / 40px 40px repeat;
  will-change: transform; animation: sx-grid 1.4s linear infinite; animation-delay: var(--lvd, 0s); }
[data-bd="neoncity"] .vg { --o: .42; animation: lv-breathe 2.4s ease-in-out infinite; animation-delay: var(--lvd, 0s); }
[data-bd="neoncity"] .vg.b { background: radial-gradient(ellipse 75% 62% at 50% 46%, transparent 58%, var(--c2) 100%);
  animation-delay: calc(var(--lvd, 0s) - 1.2s); }
/* ================= /«Звёздная коллекция» ================================================= */

/* ---- частицы на карточке (в игре частицы рисует canvas sdk.js) */
.lv-pt { position: absolute; inset: 0; overflow: hidden; pointer-events: none; contain: strict; }
.lv-pt i {
  position: absolute; bottom: 0; width: 16%; aspect-ratio: 1; opacity: 0; will-change: transform, opacity;
  -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
  background: var(--c1); animation: lv-rise 4.8s linear infinite;
}
.lv-pt i:nth-child(3n+2) { background: var(--c2); }
.lv-pt i:nth-child(3n) { background: var(--c3); }
.lv-pt i:nth-child(1) { left: 6%; animation-delay: calc(var(--lvd, 0s) - .2s); }
.lv-pt i:nth-child(2) { left: 26%; width: 11%; animation-delay: calc(var(--lvd, 0s) - 1.9s); }
.lv-pt i:nth-child(3) { left: 47%; animation-delay: calc(var(--lvd, 0s) - 3.4s); }
.lv-pt i:nth-child(4) { left: 66%; width: 12%; animation-delay: calc(var(--lvd, 0s) - 1.1s); }
.lv-pt i:nth-child(5) { left: 82%; animation-delay: calc(var(--lvd, 0s) - 2.7s); }
.lv-pt i:nth-child(6) { left: 37%; width: 9%; animation-delay: calc(var(--lvd, 0s) - 4.2s); }
.lv-pt.fall i { bottom: auto; top: 0; animation-name: lv-fall; }
@keyframes lv-rise {
  0% { opacity: 0; transform: translateY(40%) rotate(0); }
  15% { opacity: .95; }
  80% { opacity: .8; }
  100% { opacity: 0; transform: translateY(-640%) rotate(160deg); }
}
@keyframes lv-fall {
  0% { opacity: 0; transform: translateY(-60%) rotate(0); }
  15% { opacity: .95; }
  80% { opacity: .8; }
  100% { opacity: 0; transform: translateY(620%) rotate(200deg); }
}

/* за экраном (IntersectionObserver ставит .lv-off) и в фоне — стоп */
.lv-off, .lv-off * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .lv-bd > i, .lv-bd .gr b, .lv-pt i { animation: none !important; }
  .lv-bd > i { opacity: calc(var(--o, .3) * .8 * var(--k)); }
  .lv-bd .gl, .lv-bd .bd, .lv-bd .tw, .lv-bd .cm { opacity: 0; }
}