/* Живые фоны карточки (09.10, js/core/livebg.js; constants/cosmetics.CARD_BACKGROUNDS[*].live).
   Только transform и opacity (update/… miniapp-performance: телефон не должен греться), без filter и mix-blend.
   .lfx — вся видимая часть фона; .lfx-st — кадр картинки 3:2, обрезанный как background-size: cover (единицы cq от .lfx),
   поэтому проценты внутри него — места на самой картинке: костёр (50 %, 69 %), лампа маяка (26,3 %, 14,2 %),
   огни ледокола (70,7 %, 39 %). Падающее и всплывающее (снег, пузыри) — «дорожка» во всю высоту, точка на её краю:
   дорожка едет на свою высоту, поэтому путь от края до края без единиц cq. */
.lfx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; container-type: size; }
.lfx-st { position: absolute; left: 50%; top: 50%; width: 100%; height: 100%;
  width: max(100cqw, 150cqh); height: max(100cqh, 66.667cqw); transform: translate(-50%, -50%); }
.lfx i { position: absolute; display: block; }
.lfx i::before { content: ""; position: absolute; }

/* общие движения */
@keyframes lfBreath { from { opacity: .3; transform: scale(1, .94); } to { opacity: 1; transform: scale(1.04, 1.05); } }
@keyframes lfFade { from { opacity: .35; } to { opacity: 1; } }
@keyframes lfDrift { from { transform: translateX(-7%); } to { transform: translateX(7%); } }
@keyframes lfTwinkle { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes lfSoft { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes lfSway { from { transform: translateX(calc(var(--dx) * -.5)); } to { transform: translateX(calc(var(--dx) * .5)); } }
@keyframes lfWander { 0% { transform: translate(0, 0); } 33% { transform: translate(var(--ax), var(--ay)); }
  66% { transform: translate(var(--bx), var(--by)); } 100% { transform: translate(calc(var(--ax) * -.6), calc(var(--by) * .5)); } }
@keyframes lfFall { from { transform: translateY(0); } to { transform: translateY(108%); } }
@keyframes lfUp { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 85% { opacity: .9; } 100% { transform: translateY(-112%); opacity: 0; } }

/* ── Сияние над льдами: переливы сияния, звёзды, огни ледокола, снег ── */
.lf-aglow { left: 0; top: 0; width: 100%; height: 52%;
  background: radial-gradient(55% 55% at 42% 42%, rgba(80, 255, 170, .24), rgba(80, 255, 170, 0) 70%),
    radial-gradient(38% 48% at 78% 30%, rgba(176, 116, 255, .22), rgba(176, 116, 255, 0) 70%);
  animation: lfBreath 7s ease-in-out infinite alternate; }
.lf-curtain { left: -25%; top: 0; width: 150%; height: 54%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 58%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 22%, #000 58%, transparent 100%);
  animation: lfDrift 24s ease-in-out infinite alternate, lfFade 5s ease-in-out infinite alternate; }
.lf-curtain.a { background: repeating-linear-gradient(90deg, rgba(120, 255, 190, 0) 0 14px, rgba(120, 255, 190, .22) 20px,
  rgba(120, 255, 190, 0) 27px, rgba(120, 255, 190, 0) 44px); }
.lf-curtain.b { background: repeating-linear-gradient(90deg, rgba(190, 130, 255, 0) 0 22px, rgba(190, 130, 255, .18) 29px,
  rgba(190, 130, 255, 0) 37px, rgba(190, 130, 255, 0) 61px);
  animation-duration: 31s, 6.5s; animation-direction: alternate-reverse, alternate; }
.lf-star { left: var(--x); top: var(--y); width: 3px; height: 3px; margin: -1.5px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 6px 1px rgba(200, 220, 255, .9); opacity: 0; animation: lfTwinkle var(--d) ease-in-out var(--dl) infinite; }
.lf-lamp { left: var(--x); top: var(--y); width: 22px; height: 22px; margin: -11px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 244, 200, .95) 0 12%, rgba(255, 205, 100, .45) 30%, rgba(255, 205, 100, 0) 70%);
  animation: lfSoft var(--d) ease-in-out infinite; }
.lf-lamp.sm { width: 14px; height: 14px; margin: -7px; }
.lf-fall { left: var(--x); top: -100%; width: 0; height: 100%; animation: lfFall var(--d) linear var(--dl) infinite; }
.lf-fall::before { left: calc(var(--sz) / -2); bottom: 0; width: var(--sz); height: var(--sz); border-radius: 50%; background: #fff;
  opacity: var(--o); box-shadow: 0 0 4px rgba(255, 255, 255, .8); animation: lfSway 2.6s ease-in-out infinite alternate; }

/* ── Светлячки: луна, туман над водой, блики на лунной дорожке, светлячки ── */
.lf-moon { left: 38.7%; top: 0; width: 22%; height: 34%; background: radial-gradient(closest-side, rgba(230, 240, 255, .32), rgba(230, 240, 255, 0));
  animation: lfBreath 6s ease-in-out infinite alternate; }
.lf-mist { left: -30%; top: 27%; width: 160%; height: 18%;
  background: radial-gradient(40% 50% at 30% 50%, rgba(215, 230, 245, .22), rgba(215, 230, 245, 0) 70%),
    radial-gradient(35% 45% at 72% 55%, rgba(215, 230, 245, .17), rgba(215, 230, 245, 0) 70%);
  animation: lfDrift 28s ease-in-out infinite alternate, lfFade 9s ease-in-out infinite alternate; }
.lf-mist.b { top: 33%; height: 14%; animation-duration: 36s, 7s; animation-direction: alternate-reverse, alternate; }
.lf-glint { left: var(--x); top: var(--y); width: 5px; height: 2px; margin: -1px -2.5px; border-radius: 2px; background: #eef4ff;
  box-shadow: 0 0 5px rgba(230, 240, 255, .9); opacity: 0; animation: lfTwinkle var(--d) ease-in-out var(--dl) infinite; }
.lf-fly { left: var(--x); top: var(--y); width: var(--sz); height: var(--sz); margin: calc(var(--sz) / -2); border-radius: 50%;
  background: radial-gradient(circle, #fffbe0 0 16%, rgba(214, 255, 120, .75) 30%, rgba(190, 255, 90, 0) 68%);
  animation: lfWander var(--d) ease-in-out var(--dl) infinite alternate, lfBlink var(--b) ease-in-out var(--dl) infinite; }
@keyframes lfBlink { 0%, 100% { opacity: .08; } 45%, 60% { opacity: 1; } }

/* ── Костёр у реки: отсвет и пламя дрожат, искры летят вверх, над чайником пар ── */
.lf-fireglow { left: 28%; top: 47%; width: 44%; height: 44%;
  background: radial-gradient(closest-side, rgba(255, 150, 50, .4), rgba(255, 120, 40, .13) 55%, rgba(255, 120, 40, 0));
  animation: lfFlicker 2.3s linear infinite; }
@keyframes lfFlicker { 0% { opacity: .75; transform: scale(1); } 12% { opacity: .95; transform: scale(1.04); } 20% { opacity: .7; }
  34% { opacity: 1; transform: scale(1.06); } 47% { opacity: .8; transform: scale(.98); } 60% { opacity: .95; }
  72% { opacity: .72; transform: scale(1.03); } 86% { opacity: 1; } 100% { opacity: .75; transform: scale(1); } }
.lf-flame { left: 45.5%; top: 60%; width: 9%; height: 13%; transform-origin: 50% 90%;
  background: radial-gradient(50% 55% at 50% 72%, rgba(255, 240, 170, .7), rgba(255, 170, 60, .28) 50%, rgba(255, 140, 40, 0) 80%);
  animation: lfFlame .9s ease-in-out infinite alternate; }
@keyframes lfFlame { 0% { transform: scale(1, 1); opacity: .7; } 30% { transform: scale(.94, 1.12); opacity: 1; }
  60% { transform: scale(1.05, .95); opacity: .8; } 100% { transform: scale(.97, 1.08); opacity: .95; } }
.lf-spark { left: var(--x); top: calc(67% - var(--h)); width: 0; height: var(--h); animation: lfRise var(--d) cubic-bezier(.2, .6, .4, 1) var(--dl) infinite; }
.lf-spark::before { left: calc(var(--sz) / -2); bottom: 0; width: var(--sz); height: var(--sz); border-radius: 50%; background: #ffd27a;
  box-shadow: 0 0 6px 1px rgba(255, 140, 40, .9); animation: lfSway var(--w) ease-in-out infinite alternate; }
@keyframes lfRise { 0% { transform: translateY(0); opacity: 0; } 8% { opacity: 1; } 70% { opacity: .9; } 100% { transform: translateY(-100%); opacity: 0; } }
.lf-steam { left: 48.5%; top: 44%; width: 4%; height: 12%; opacity: 0; animation: lfSteam var(--d) ease-out var(--dl) infinite; }
.lf-steam::before { left: 0; right: 0; bottom: 0; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(235, 235, 240, .3), rgba(235, 235, 240, 0)); }
@keyframes lfSteam { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 20% { opacity: .9; } 100% { transform: translate(var(--dx), -100%) scale(2.2); opacity: 0; } }

/* ── Солнце под водой: рябь поверхности, лучи колышутся, взвесь, пузыри со дна ── */
.lf-surface { left: -20%; top: 0; width: 140%; height: 16%;
  background: repeating-linear-gradient(100deg, rgba(255, 255, 255, 0) 0 18px, rgba(255, 255, 255, .13) 24px, rgba(255, 255, 255, 0) 31px, rgba(255, 255, 255, 0) 47px);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent); mask-image: linear-gradient(180deg, #000, transparent);
  animation: lfDrift 14s ease-in-out infinite alternate; }
.lf-ray { left: calc(var(--x) - var(--w) / 2); top: -6%; width: var(--w); height: 105%; transform-origin: 50% 0;
  background: linear-gradient(90deg, rgba(200, 245, 255, 0), rgba(200, 245, 255, .32) 50%, rgba(200, 245, 255, 0));
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .6) 45%, transparent 90%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .6) 45%, transparent 90%);
  animation: lfRay var(--d) ease-in-out var(--dl) infinite alternate; }
@keyframes lfRay { from { transform: rotate(calc(var(--r) - 3deg)); opacity: calc(var(--o) * .35); } to { transform: rotate(calc(var(--r) + 3deg)); opacity: var(--o); } }
.lf-mote { left: var(--x); top: var(--y); width: 3px; height: 3px; margin: -1.5px; border-radius: 50%; background: rgba(220, 250, 255, .75);
  animation: lfWander var(--d) ease-in-out var(--dl) infinite alternate, lfSoft 5s ease-in-out var(--dl) infinite; }
.lf-rise { left: var(--x); top: 0; width: 0; height: 100%; animation: lfUp var(--d) linear var(--dl) infinite; }
.lf-rise::before { left: calc(var(--sz) / -2); top: 100%; width: var(--sz); height: var(--sz); border-radius: 50%; box-sizing: border-box;
  border: 1.2px solid rgba(225, 250, 255, .75);
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .85) 0 14%, rgba(200, 240, 255, .14) 34%, rgba(200, 240, 255, 0) 70%);
  animation: lfSway var(--w) ease-in-out infinite alternate; }

/* ── Маяк в шторм: луч ходит по кругу (к нам — вспышка лампы, за башней — гаснет), молния, дождь ── */
.lf-beam { left: 26.3%; top: 5.2%; width: 85%; height: 18%; transform-origin: 0 50%;
  background: linear-gradient(90deg, rgba(255, 240, 190, .6), rgba(255, 240, 190, .2) 45%, rgba(255, 240, 190, 0));
  clip-path: polygon(0 46%, 100% 0, 100% 100%, 0 54%); animation: lfBeam 9s linear infinite; }
@keyframes lfBeam {
  0% { transform: scaleX(1); opacity: .85; animation-timing-function: ease-in; }
  40% { transform: scaleX(.03); opacity: 1; }
  40.01% { transform: scaleX(-.03); opacity: 1; animation-timing-function: ease-out; }
  70% { transform: scaleX(-1); opacity: .8; }
  80% { transform: scaleX(-1); opacity: 0; }
  90% { transform: scaleX(1); opacity: 0; }
  100% { transform: scaleX(1); opacity: .85; } }
.lf-lampglow { left: 17.3%; top: .7%; width: 18%; height: 27%;
  background: radial-gradient(closest-side, rgba(255, 235, 170, .75), rgba(255, 210, 120, .25) 40%, rgba(255, 210, 120, 0));
  animation: lfLamp 9s linear infinite; }
@keyframes lfLamp { 0% { opacity: .35; transform: scale(.8); } 34% { opacity: .55; transform: scale(.9); } 40% { opacity: 1; transform: scale(1.5); }
  47% { opacity: .5; transform: scale(.95); } 100% { opacity: .35; transform: scale(.8); } }
.lf-bolt { left: 52%; top: 0; width: 13%; height: 44%; opacity: 0; animation: lfBolt 11s linear infinite;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 120' preserveAspectRatio='none'%3E%3Cg fill='none' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath stroke='rgba(170,200,255,.35)' stroke-width='7' d='M36 0L27 34L37 37L21 72L31 75L15 120M27 34L14 52'/%3E%3Cpath stroke='%23fff' stroke-width='2' d='M36 0L27 34L37 37L21 72L31 75L15 120M27 34L14 52'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat; }
@keyframes lfBolt { 0%, 61% { opacity: 0; } 62% { opacity: 1; } 63% { opacity: .15; } 64.5% { opacity: .95; } 67%, 100% { opacity: 0; } }
.lfx i.lf-flash { inset: 0; opacity: 0; animation: lfBolt 11s linear infinite;
  background: radial-gradient(70% 60% at 58% 16%, rgba(215, 228, 255, .5), rgba(215, 228, 255, .12) 60%, rgba(215, 228, 255, 0)); }
.lfx i.lf-rain { left: -40%; right: -40%; top: -260px; bottom: 0; background-repeat: repeat; background-size: 180px 260px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='260'%3E%3Cg fill='none' stroke='rgb(223,234,255)' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath stroke-opacity='.3' d='M4.6 137.4v16.7 M70 249.1V260 M70 0v15.3'/%3E%3Cpath stroke-opacity='.42' d='M81.6 145.5v27.1 M113.7 154.8v20.8 M156.8 155.9v25.3 M177.2 218.5v24.5 M39.6 241v16.6'/%3E%3Cpath stroke-opacity='.55' d='M81.5 222.3v18.3 M80.6 36.9v22.5 M135.4 133.4v16.4 M174.5 103.3v16.9'/%3E%3C/g%3E%3C/svg%3E");
  animation: lfRain .42s linear infinite; }
.lfx i.lf-rain.far { top: -210px; background-size: 150px 210px; animation: lfRainF .6s linear infinite;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='210'%3E%3Cg fill='none' stroke='rgb(223,234,255)' stroke-width='1' stroke-linecap='round'%3E%3Cpath stroke-opacity='.22' d='M49.3 31.7v12.6 M33.3 18v10.9 M15.2 89.1v13.8 M140.3 132.4v12.1 M86.3 83.3v14.8 M38.3 37.8v13.5 M108.5 60.5v14.9 M53.1 104.3v13.6'/%3E%3Cpath stroke-opacity='.3' d='M28.4 122.1v12.5 M47.9 123v11.2 M76.7 34.6v10.4'/%3E%3Cpath stroke-opacity='.4' d='M121.9 19.8v12.1 M83.3 28v10.9 M16.2 149.5v12 M63.6 202V210 M63.6 0v0.5 M85.7 183.9v10.2'/%3E%3C/g%3E%3C/svg%3E"); }
@keyframes lfRain { from { transform: skewX(11.5deg) translateY(0); } to { transform: skewX(11.5deg) translateY(260px); } }
@keyframes lfRainF { from { transform: skewX(11.5deg) translateY(0); } to { transform: skewX(11.5deg) translateY(210px); } }
.lfx.lite i.lf-rain.far, .lfx.lite .lf-mist.b, .lfx.lite .lf-curtain.b { display: none; }

@media (prefers-reduced-motion: reduce) { .lfx { display: none; } }

/* ── где показываются ── */
/* карточка игрока: затемнение снизу мягче — картинку видно, имя читается */
.pcard2.live::after { background: linear-gradient(180deg, rgba(6, 14, 16, .12) 0%, rgba(6, 14, 16, .2) 42%, rgba(6, 14, 16, .84) 100%); }
.pcard2.live .pcard2-bg { animation-duration: 40s; }
/* вкладка «Профиль»: выбранный фон карточки — за лучшей рыбой */
.pf-bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.pf-shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(6, 14, 16, .62) 0%, rgba(6, 14, 16, .12) 30%, rgba(6, 14, 16, .08) 58%, rgba(6, 14, 16, .86) 100%); }
.pf-hero.has-bg .pf-rays, .pf-hero.has-bg .pf-glow { display: none; }
/* «Оформление»: плитка живого фона */
.cos-bg > .lfx { position: absolute; }
.cos-bg.live.locked { filter: none; }
.cos-bg > .cos-live { position: absolute; left: 8px; top: 8px; padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 800;
  color: #10201f; background: rgba(243, 210, 139, .92); }
/* магазин: превью на плитке и в карточке покупки */
.don-pv.bg.live { position: relative; width: 100%; background-size: cover; background-position: center; }
.don-sheet-pv { position: relative; overflow: hidden; }