/* Награды пасхалок (разметка — js/look.js): рамки и эффекты аватарки (.la), эффекты ника (.nm), фоны профиля (.ls).
   Цвета сайта не меняются: всё рисуется акцентом и токенами темы, поэтому работает и в тёмной, и в светлой теме.
   Размеры аватарки — в долях var(--s): одинаково на большой аватарке профиля и в превью 52px. */

/* ---------- Каркас ---------- */
.la { --s: 88px; position: relative; display: inline-grid; place-items: center; width: var(--s); height: var(--s); flex: none; vertical-align: middle; margin: var(--pad, 0); isolation: isolate; }
.la-back, .la-front { position: absolute; inset: 0; pointer-events: none; }
.la-back { z-index: -1; }
.la-front { z-index: 2; }
.la-move, .la-flip { position: relative; display: grid; width: 100%; height: 100%; }
.la-flip { isolation: isolate; transform-style: preserve-3d; }
.la .ava { position: relative; z-index: 1; }
.la-frame { position: absolute; pointer-events: none; z-index: 2; }

/* ---------- Рамка «Чеканка» (монета из красного металла): круглая, с гуртом, раз в 12 с переворачивается ---------- */
.la-f-coin { --pad: calc(var(--s) * .1); }
.la-f-coin .ava { border-radius: 50%; box-shadow: 0 calc(var(--s) * .12) calc(var(--s) * .34) calc(var(--s) * -.1) color-mix(in srgb, var(--accent) 65%, transparent); }
.la-f-coin .la-frame { inset: calc(var(--s) * -.1); border-radius: 50%;
  background: repeating-conic-gradient(color-mix(in srgb, var(--accent) 45%, #fff) 0 3deg, var(--accent) 3deg 6deg, color-mix(in srgb, var(--accent) 45%, #000) 6deg 7deg);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - var(--s) * .1), #000 calc(100% - var(--s) * .1 + .5px));
          mask: radial-gradient(closest-side, transparent calc(100% - var(--s) * .1), #000 calc(100% - var(--s) * .1 + .5px)); }
.la-f-coin .la-frame::after { content: ''; position: absolute; inset: calc(var(--s) * .085); border-radius: 50%; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--accent) 35%, #fff), 0 0 0 3px color-mix(in srgb, var(--accent) 40%, #000); }
.la-f-coin .la-flip::after { content: ''; position: absolute; inset: 0; z-index: 3; border-radius: 50%; pointer-events: none; mix-blend-mode: overlay;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .8) 50%, transparent 65%) 0 0 / 300% 100%; animation: la-shine 6s ease-in-out infinite; }
.la-f-coin .la-flip { animation: la-coin 12s cubic-bezier(.3, .1, .25, 1) infinite; }
.la-f-coin:hover .la-flip { animation: la-coin-now .9s cubic-bezier(.3, .1, .25, 1); }
@keyframes la-coin { 0%, 90% { rotate: y 0deg; } 100% { rotate: y 360deg; } }
@keyframes la-coin-now { to { rotate: y 360deg; } }
@keyframes la-shine { 0%, 55% { background-position: 100% 0; } 85%, 100% { background-position: 0 0; } }

/* ---------- Рамка «Вавилон»: кольцо из «привет» на разных языках медленно вращается ---------- */
.la-f-polyglot { --pad: calc(var(--s) * .32); }
.la-f-polyglot .ava { border-radius: 50%; box-shadow: 0 0 0 2px var(--accent), 0 0 calc(var(--s) * .35) calc(var(--s) * -.08) var(--accent); }
.la-f-polyglot .la-frame { inset: calc(var(--s) * -.3); animation: la-spin 48s linear infinite; }
.la-f-polyglot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.la-f-polyglot svg text { fill: var(--soft); stroke: none; font: 800 6.3px/1 Inter, system-ui, sans-serif; letter-spacing: .4px; }
.la-f-polyglot svg .la-line { fill: none; stroke: var(--accent); stroke-width: .6; stroke-dasharray: 1.5 2.5; }
@keyframes la-spin { to { rotate: 360deg; } }

/* ---------- Рамка «Прицел»: красный HUD машины из будущего — уголки дышат, сканер бегает ---------- */
.la-f-stoneface { --pad: calc(var(--s) * .14); }
.la-f-stoneface .ava { filter: saturate(.75) contrast(1.08); }
.la-f-stoneface .la-frame { --c: var(--accent); --l: calc(var(--s) * .24); --t: max(2px, calc(var(--s) * .03));
  inset: calc(var(--s) * -.12); filter: drop-shadow(0 0 calc(var(--s) * .05) var(--accent));
  background:
    linear-gradient(var(--c) 0 0) top left / var(--l) var(--t), linear-gradient(var(--c) 0 0) top left / var(--t) var(--l),
    linear-gradient(var(--c) 0 0) top right / var(--l) var(--t), linear-gradient(var(--c) 0 0) top right / var(--t) var(--l),
    linear-gradient(var(--c) 0 0) bottom left / var(--l) var(--t), linear-gradient(var(--c) 0 0) bottom left / var(--t) var(--l),
    linear-gradient(var(--c) 0 0) bottom right / var(--l) var(--t), linear-gradient(var(--c) 0 0) bottom right / var(--t) var(--l);
  background-repeat: no-repeat; animation: la-aim 2.4s ease-in-out infinite; }
.la-f-stoneface .la-frame::after { content: ''; position: absolute; left: calc(var(--s) * .12); right: calc(var(--s) * .12); top: calc(var(--s) * .12); height: max(2px, calc(var(--s) * .025));
  background: linear-gradient(90deg, transparent, var(--accent) 20%, color-mix(in srgb, var(--accent) 35%, #fff) 50%, var(--accent) 80%, transparent); box-shadow: 0 0 calc(var(--s) * .1) var(--accent); animation: la-scan 2.8s ease-in-out infinite alternate; }
.la-f-stoneface .la-frame b { position: absolute; right: 0; top: calc(var(--s) * -.15); font: 800 max(8px, calc(var(--s) * .1))/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .12em; color: var(--accent); animation: la-blink 1.2s steps(1) infinite; }
@keyframes la-aim { 0%, 100% { scale: 1; } 50% { scale: 1.06; } }
@keyframes la-scan { to { top: calc(100% - var(--s) * .12); } }
@keyframes la-blink { 50% { opacity: 0; } }

/* ---------- Рамка «Осколки»: стеклянная рамка с трещинами (грани — цвет текста темы и красный), осколки отлетают и возвращаются ---------- */
.la-f-shatter { --pad: calc(var(--s) * .1); }
.la-f-shatter .la-frame { inset: calc(var(--s) * -.08); filter: drop-shadow(0 0 calc(var(--s) * .06) color-mix(in srgb, var(--accent) 60%, transparent)); }
.la-f-shatter .la-frame::before { content: ''; position: absolute; inset: 0; border-radius: calc(var(--s) * .3); padding: calc(var(--s) * .055);
  --g1: color-mix(in srgb, var(--text) 92%, transparent); --g2: var(--accent); --g3: color-mix(in srgb, var(--text) 60%, var(--accent));
  background: conic-gradient(from 12deg, var(--g1) 0 34deg, transparent 0 39deg, var(--g2) 0 92deg, transparent 0 96deg, var(--g3) 0 150deg, transparent 0 157deg,
    var(--g1) 0 214deg, transparent 0 218deg, var(--g2) 0 276deg, transparent 0 282deg, var(--g3) 0 330deg, transparent 0 335deg, var(--g1) 0 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.la-f-shatter .la-frame i { position: absolute; width: calc(var(--s) * .14); height: calc(var(--s) * .14); background: linear-gradient(135deg, var(--text), var(--accent) 70%);
  clip-path: polygon(50% 0, 100% 80%, 10% 100%); animation: la-shard 4.2s cubic-bezier(.3, .7, .3, 1) infinite; }
.la-f-shatter .la-frame i:nth-child(1) { top: -2%; left: 14%; --dx: -.16; --dy: -.2; --r: -40deg; }
.la-f-shatter .la-frame i:nth-child(2) { top: 18%; right: -3%; --dx: .22; --dy: -.08; --r: 65deg; animation-delay: -.8s; scale: .8; }
.la-f-shatter .la-frame i:nth-child(3) { bottom: -3%; right: 22%; --dx: .1; --dy: .22; --r: 120deg; animation-delay: -1.7s; }
.la-f-shatter .la-frame i:nth-child(4) { bottom: 26%; left: -3%; --dx: -.22; --dy: .06; --r: -90deg; animation-delay: -2.6s; scale: .7; }
.la-f-shatter .la-frame i:nth-child(5) { top: -3%; right: 34%; --dx: .04; --dy: -.24; --r: 30deg; animation-delay: -3.3s; scale: .6; }
@keyframes la-shard { 0%, 40%, 100% { translate: 0 0; rotate: 0deg; } 65% { translate: calc(var(--s) * var(--dx)) calc(var(--s) * var(--dy)); rotate: var(--r); } }

/* ---------- Рамка «Окно»: аватарка в окне программы, красная кнопка закрытия (остальные две — серые) ---------- */
.la-f-closer { --pad: calc(var(--s) * .3) calc(var(--s) * .07) calc(var(--s) * .07); }
.la-f-closer .ava { border-radius: calc(var(--s) * .06); }
.la-f-closer .la-frame { z-index: 0; inset: calc(var(--s) * -.28) calc(var(--s) * -.06) calc(var(--s) * -.06); border-radius: calc(var(--s) * .14);
  background: linear-gradient(#2c2c32, #1d1d21 calc(var(--s) * .26)); border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 calc(var(--s) * .2) calc(var(--s) * .4) calc(var(--s) * -.16) rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .08); }
.la-f-closer .la-frame::before { content: ''; position: absolute; top: calc(var(--s) * .09); left: calc(var(--s) * .07); width: calc(var(--s) * .32); height: calc(var(--s) * .09);
  --d: calc(var(--s) * .045);
  background: radial-gradient(circle var(--d) at calc(var(--d)) 50%, var(--accent) 98%, transparent),
    radial-gradient(circle var(--d) at calc(var(--d) * 3.6) 50%, #6b6b74 98%, transparent),
    radial-gradient(circle var(--d) at calc(var(--d) * 6.2) 50%, #6b6b74 98%, transparent);
  animation: la-close 3s ease-in-out infinite; }
.la-f-closer .la-frame b { position: absolute; top: calc(var(--s) * .085); left: 40%; right: calc(var(--s) * .06); overflow: hidden; white-space: nowrap; text-overflow: clip;
  font: 600 max(7px, calc(var(--s) * .085))/1 ui-monospace, Menlo, Consolas, monospace; color: #8e8e98; text-align: center; }
@keyframes la-close { 0%, 70%, 100% { filter: none; } 80% { filter: drop-shadow(0 0 calc(var(--s) * .05) var(--accent)) brightness(1.25); } }
:root[data-theme="light"] .la-f-closer .la-frame { background: linear-gradient(#ececf1, #fff calc(var(--s) * .26)); border-color: rgba(0, 0, 0, .12);
  box-shadow: 0 calc(var(--s) * .2) calc(var(--s) * .4) calc(var(--s) * -.18) rgba(20, 20, 40, .35); }

/* ---------- Эффект «Солнечная корона»: аватарка — чёрная Луна в полном затмении, за ней красная корона, раз в 8 с вспыхивает «бриллиантовое кольцо» ---------- */
.la-e-eclipse .ava { box-shadow: 0 0 0 2px #050505, 0 0 calc(var(--s) * .22) var(--accent); }
.la-e-eclipse .la-back { inset: calc(var(--s) * -.46); border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent-hover) 55%, #fff) 52%, color-mix(in srgb, var(--accent) 70%, transparent) 60%, color-mix(in srgb, var(--accent) 18%, transparent) 78%, transparent);
  animation: la-corona 5s ease-in-out infinite; }
.la-e-eclipse .la-back::before { content: ''; position: absolute; inset: -6%; border-radius: 50%;
  background: repeating-conic-gradient(color-mix(in srgb, var(--accent) 55%, transparent) 0 1.5deg, transparent 1.5deg 7deg, color-mix(in srgb, var(--accent) 30%, transparent) 7deg 8deg, transparent 8deg 13deg);
  -webkit-mask: radial-gradient(closest-side, transparent 45%, #000 55%, transparent 100%); mask: radial-gradient(closest-side, transparent 45%, #000 55%, transparent 100%);
  animation: la-spin 90s linear infinite; }
.la-e-eclipse .la-front i { position: absolute; top: 6%; right: 6%; width: calc(var(--s) * .1); height: calc(var(--s) * .1); border-radius: 50%; background: #fff; opacity: 0;
  box-shadow: 0 0 calc(var(--s) * .1) calc(var(--s) * .04) #fff, 0 0 calc(var(--s) * .4) calc(var(--s) * .08) var(--accent); animation: la-diamond 8s ease-in-out infinite; }
@keyframes la-corona { 0%, 100% { scale: 1; opacity: .85; } 50% { scale: 1.06; opacity: 1; } }
@keyframes la-diamond { 0%, 70%, 100% { opacity: 0; scale: .3; } 80% { opacity: 1; scale: 1.2; } 88% { opacity: .2; scale: .8; } }

/* ---------- Эффект «DVD»: аватарка отскакивает от краёв, как логотип на заставке, и на каждом ударе меняет свечение: красное ↔ белое (в светлой теме — тёмное) ---------- */
.la-e-screensaver .la-move { animation: la-dvd-x 2.6s linear infinite alternate, la-dvd-y 1.9s linear infinite alternate; }
.la-e-screensaver .ava { animation: la-dvd-c 13s steps(1) infinite; }
@keyframes la-dvd-x { from { translate: calc(var(--s) * -.07) 0; } to { translate: calc(var(--s) * .07) 0; } }
@keyframes la-dvd-y { from { transform: translateY(calc(var(--s) * -.06)); } to { transform: translateY(calc(var(--s) * .06)); } }
@keyframes la-dvd-c {
  0%, 40% { box-shadow: 0 0 0 2px var(--accent), 0 0 calc(var(--s) * .32) var(--accent); }
  20%, 60% { box-shadow: 0 0 0 2px var(--text), 0 0 calc(var(--s) * .32) color-mix(in srgb, var(--text) 70%, transparent); }
  80% { box-shadow: 0 0 0 2px var(--accent-hover), 0 0 calc(var(--s) * .4) var(--accent); }
}

/* ---------- Эффект «Невесомость»: аватарка парит, тень под ней дышит, вокруг всплывают пылинки ---------- */
.la-e-gravity .la-move { animation: la-float 5s ease-in-out infinite; }
.la-e-gravity .la-back { inset: auto 14% calc(var(--s) * -.2); height: calc(var(--s) * .1); border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent); animation: la-float-sh 5s ease-in-out infinite; }
.la-e-gravity .la-front i { position: absolute; bottom: 10%; width: max(2px, calc(var(--s) * .035)); aspect-ratio: 1; border-radius: 50%; background: var(--text); box-shadow: 0 0 6px var(--accent); opacity: 0; animation: la-dust 6s linear infinite; }
.la-e-gravity .la-front i:nth-child(1) { left: -8%; }
.la-e-gravity .la-front i:nth-child(2) { right: -10%; animation-delay: -2s; }
.la-e-gravity .la-front i:nth-child(3) { left: 46%; bottom: -12%; animation-delay: -4s; }
@keyframes la-float { 0%, 100% { transform: translateY(0) rotate(-2.5deg); } 50% { transform: translateY(calc(var(--s) * -.12)) rotate(2.5deg); } }
@keyframes la-float-sh { 0%, 100% { scale: 1; opacity: 1; } 50% { scale: .7; opacity: .5; } }
@keyframes la-dust { 0% { translate: 0 0; opacity: 0; } 20% { opacity: .9; } 100% { translate: calc(var(--s) * .06) calc(var(--s) * -1); opacity: 0; } }

/* ---------- Эффект «Сердцебиение»: аватарка бьётся «тук-тук», красное свечение в такт, вверх уплывают сердечки ---------- */
.la-e-heart .la-move { animation: la-beat 1.3s ease-in-out infinite; }
.la-e-heart .la-back { inset: calc(var(--s) * -.18); border-radius: 40%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 65%, transparent), transparent); animation: la-beat-glow 1.3s ease-in-out infinite; }
.la-e-heart .la-front i { position: absolute; bottom: 4%; width: calc(var(--s) * .17); aspect-ratio: 1; background: var(--accent); opacity: 0; filter: drop-shadow(0 0 4px var(--accent));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.4 10.6 20C5.4 15.4 2 12.3 2 8.5 2 5.4 4.4 3 7.5 3c1.7 0 3.4.8 4.5 2.1C13.1 3.8 14.8 3 16.5 3 19.6 3 22 5.4 22 8.5c0 3.8-3.4 6.9-8.6 11.5z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.4 10.6 20C5.4 15.4 2 12.3 2 8.5 2 5.4 4.4 3 7.5 3c1.7 0 3.4.8 4.5 2.1C13.1 3.8 14.8 3 16.5 3 19.6 3 22 5.4 22 8.5c0 3.8-3.4 6.9-8.6 11.5z'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: la-heart-up 3.6s ease-out infinite; }
.la-e-heart .la-front i:nth-child(1) { left: -10%; }
.la-e-heart .la-front i:nth-child(2) { right: -12%; animation-delay: -.9s; scale: .75; }
.la-e-heart .la-front i:nth-child(3) { left: 20%; animation-delay: -1.8s; scale: .6; }
.la-e-heart .la-front i:nth-child(4) { right: 14%; animation-delay: -2.7s; scale: .9; }
@keyframes la-beat { 0%, 100% { scale: 1; } 12% { scale: 1.08; } 24% { scale: 1; } 36% { scale: 1.05; } 55% { scale: 1; } }
@keyframes la-beat-glow { 0%, 100%, 55% { opacity: .35; } 12% { opacity: 1; } 36% { opacity: .8; } }
@keyframes la-heart-up { 0% { translate: 0 0; opacity: 0; } 15% { opacity: 1; } 100% { translate: calc(var(--s) * .08) calc(var(--s) * -.95); opacity: 0; } }

/* ---------- Рамка «Пиксель-арт»: 8-битная рамка со ступенчатыми углами, по углам бегает белый пиксель ---------- */
.la-f-pixels { --pad: calc(var(--s) * .14); }
.la-f-pixels .ava { border-radius: 0 !important; image-rendering: pixelated; }
.la-f-pixels .la-frame { --u: max(3px, calc(var(--s) * .05)); --c: var(--accent); inset: calc(var(--u) * -2.4);
  background:
    linear-gradient(var(--c) 0 0) left calc(var(--u) * 2) top 0 / calc(100% - var(--u) * 4) var(--u),
    linear-gradient(var(--c) 0 0) left calc(var(--u) * 2) bottom 0 / calc(100% - var(--u) * 4) var(--u),
    linear-gradient(var(--c) 0 0) left 0 top calc(var(--u) * 2) / var(--u) calc(100% - var(--u) * 4),
    linear-gradient(var(--c) 0 0) right 0 top calc(var(--u) * 2) / var(--u) calc(100% - var(--u) * 4),
    linear-gradient(var(--c) 0 0) left var(--u) top var(--u) / var(--u) var(--u),
    linear-gradient(var(--c) 0 0) right var(--u) top var(--u) / var(--u) var(--u),
    linear-gradient(var(--c) 0 0) left var(--u) bottom var(--u) / var(--u) var(--u),
    linear-gradient(var(--c) 0 0) right var(--u) bottom var(--u) / var(--u) var(--u);
  background-repeat: no-repeat; filter: drop-shadow(var(--u) var(--u) 0 rgba(0, 0, 0, .45)); }
.la-f-pixels .la-frame::after { content: ''; position: absolute; width: var(--u); height: var(--u); background: var(--text); animation: la-pix 2.4s steps(1) infinite; }
@keyframes la-pix {
  0% { left: var(--u); top: var(--u); } 25% { left: calc(100% - var(--u) * 2); top: var(--u); }
  50% { left: calc(100% - var(--u) * 2); top: calc(100% - var(--u) * 2); } 75% { left: var(--u); top: calc(100% - var(--u) * 2); }
}

/* ---------- Рамка «Трещины»: от краёв аватарки снова и снова расползаются светящиеся красные трещины ---------- */
.la-f-cracks { --pad: calc(var(--s) * .18); }
.la-f-cracks .ava { box-shadow: 0 0 0 max(1.5px, calc(var(--s) * .02)) var(--accent), 0 0 calc(var(--s) * .3) calc(var(--s) * -.04) var(--accent); animation: la-crack-glow 5s ease-in-out infinite; }
.la-f-cracks .la-frame { inset: calc(var(--s) * -.2); }
.la-f-cracks svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 2px var(--accent)); }
.la-f-cracks path { fill: none; stroke: var(--accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; animation: la-crack 5s ease-out infinite; }
.la-f-cracks path:nth-child(2) { animation-delay: .3s; } .la-f-cracks path:nth-child(3) { animation-delay: .55s; }
.la-f-cracks path:nth-child(4) { animation-delay: .8s; } .la-f-cracks path:nth-child(5) { animation-delay: 1s; } .la-f-cracks path:nth-child(6) { animation-delay: 1.2s; }
@keyframes la-crack { 0% { stroke-dashoffset: 60; opacity: 1; } 30%, 75% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes la-crack-glow { 0%, 100% { filter: none; } 35% { filter: brightness(1.15); } }

/* ---------- Эффект «Ночное зрение»: аватарка как в красном приборе ночного видения — развёртка, бегущая полоса, REC ---------- */
.la-e-night .ava { filter: grayscale(1) sepia(1) saturate(4.5) hue-rotate(-38deg) contrast(1.15) brightness(.85); }
.la-e-night .la-front { overflow: hidden; border-radius: calc(var(--s) * .22); }
.la-e-night .la-front::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(rgba(0, 0, 0, .3) 0 1px, transparent 1px 3px); }
.la-e-night .la-front i { position: absolute; left: 0; right: 0; top: -20%; height: 20%; background: linear-gradient(transparent, color-mix(in srgb, var(--accent) 40%, transparent), transparent); animation: la-nv 3.2s linear infinite; }
.la-e-night .la-front b { position: absolute; left: 9%; top: 8%; display: flex; align-items: center; gap: .3em; font: 800 max(6px, calc(var(--s) * .1))/1 ui-monospace, Menlo, Consolas, monospace; color: #fff; letter-spacing: .08em; }
.la-e-night .la-front b::before { content: ''; width: .7em; height: .7em; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px var(--accent); animation: la-blink 1.4s steps(1) infinite; }
@keyframes la-nv { to { top: 100%; } }

/* ---------- Эффект «Марево»: аватарка дрожит, как в горячем воздухе, снизу поднимается красный жар ---------- */
.la-e-haze .la-flip { filter: url(#la-haze); }
.la-e-haze .la-back { inset: calc(var(--s) * -.12) calc(var(--s) * -.1) calc(var(--s) * -.26); border-radius: 40%;
  background: radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--accent) 60%, transparent), transparent 65%); animation: la-heat 2.6s ease-in-out infinite alternate; }
@keyframes la-heat { from { opacity: .5; scale: 1; } to { opacity: 1; scale: 1.05 1.12; } }

/* ---------- Эффект «Помехи»: раз в несколько секунд аватарку рвёт на полосы со сдвигом и красным расслоением ---------- */
.la-e-noise .la-flip { animation: la-noise 4.5s steps(1) infinite; }
.la-e-noise .la-front { overflow: hidden; border-radius: calc(var(--s) * .22); }
.la-e-noise .la-front i { position: absolute; inset: 0; background: var(--img, var(--accent)) center / cover; opacity: 0; animation: la-slice 4.5s steps(1) infinite; }
.la-e-noise .la-front i:nth-child(1) { clip-path: inset(16% 0 64% 0); --dx: -.13; }
.la-e-noise .la-front i:nth-child(2) { clip-path: inset(45% 0 38% 0); --dx: .15; }
.la-e-noise .la-front i:nth-child(3) { clip-path: inset(74% 0 12% 0); --dx: -.08; }
@keyframes la-noise {
  0%, 84%, 94%, 100% { translate: 0 0; filter: none; }
  85% { translate: calc(var(--s) * -.03) 0; filter: drop-shadow(calc(var(--s) * .05) 0 0 var(--accent)); }
  87% { translate: calc(var(--s) * .04) 0; filter: drop-shadow(calc(var(--s) * -.05) 0 0 var(--accent)); }
  89% { translate: 0 0; filter: drop-shadow(calc(var(--s) * .04) 0 0 var(--accent)) drop-shadow(calc(var(--s) * -.03) 0 0 var(--text)); }
  91% { translate: calc(var(--s) * -.02) 0; filter: none; }
}
@keyframes la-slice {
  0%, 84%, 89%, 93%, 100% { opacity: 0; translate: 0 0; }
  85% { opacity: 1; translate: calc(var(--s) * var(--dx)) 0; }
  87% { opacity: 1; translate: calc(var(--s) * var(--dx) * -.6) 0; }
  91% { opacity: .8; translate: calc(var(--s) * var(--dx) * .5) 0; }
}

/* ---------- Эффекты ника (.nm внутри #name; превью — .lk-nm) ---------- */
.nm { display: inline-block; position: relative; }
/* «Командная строка»: ник печатается после «>», мигает курсор, через 10 с — заново */
.nm-boot { display: inline-flex; align-items: center; font-family: ui-monospace, 'Cascadia Mono', Menlo, Consolas, monospace; letter-spacing: 0; }
.nm-boot > i { font-style: normal; color: var(--accent); margin-right: .35em; }
.nm-boot .nm-t { display: inline-block; overflow: hidden; white-space: nowrap; width: calc(var(--n) * 1ch); animation: nm-type 10s steps(var(--n), end) infinite; }
.nm-boot::after { content: ''; width: .55em; height: .85em; margin-left: .06em; background: var(--accent); box-shadow: 0 0 .3em var(--accent); animation: la-blink 1s steps(1) infinite; }
@keyframes nm-type { 0% { width: 0; } 22%, 88% { width: calc(var(--n) * 1ch); } 100% { width: 0; } }
/* «Орёл и решка»: ник время от времени переворачивается, как подброшенная монета */
.nm-flip { animation: nm-flip 7s cubic-bezier(.45, .05, .2, 1) infinite; transform-origin: 50% 55%; }
@keyframes nm-flip { 0%, 80% { transform: perspective(600px) rotateX(0); color: inherit; } 90% { color: var(--accent); } 100% { transform: perspective(600px) rotateX(360deg); color: inherit; } }
/* «Полутень»: по нику проходит тень, как Луна по Солнцу, с красной каймой */
.nm-shade { color: transparent; -webkit-background-clip: text; background-clip: text; animation: nm-shade 6s ease-in-out infinite;
  background-image: linear-gradient(100deg, var(--text) 0 38%, var(--accent) 44%, color-mix(in srgb, var(--text) 8%, var(--bg)) 48% 52%, var(--accent) 56%, var(--text) 62% 100%);
  background-size: 300% 100%; background-position: 100% 0; }
@keyframes nm-shade { 0%, 15% { background-position: 100% 0; } 85%, 100% { background-position: 0 0; } }
/* «Пиксельный ник»: шрифт приставки и жёсткая красная тень, ник подпрыгивает по-восьмибитному */
.nm-pixel { font-family: 'Press Start 2P', ui-monospace, monospace; font-weight: 400; font-size: .52em; line-height: 1.35; letter-spacing: 0; text-shadow: .14em .14em 0 var(--accent); animation: nm-hop 1.6s steps(1) infinite; }
@keyframes nm-hop { 0%, 60% { translate: 0 0; } 70% { translate: 0 -.12em; } 80% { translate: 0 -.18em; } 90% { translate: 0 -.08em; } }
/* «Глитч»: ник рвёт на полосы со сдвигом и красным расслоением */
.nm-glitch { animation: nm-g0 3.4s steps(1) infinite; }
.nm-glitch::before, .nm-glitch::after { content: attr(data-text); position: absolute; inset: 0; pointer-events: none; clip-path: inset(0 0 100% 0); }
.nm-glitch::before { color: var(--accent); animation: nm-g1 3.4s steps(1) infinite; }
.nm-glitch::after { color: transparent; -webkit-text-stroke: max(1px, .02em) var(--accent); animation: nm-g2 3.4s steps(1) infinite; }
@keyframes nm-g0 { 0%, 100% { translate: 0 0; transform: none; } 6% { translate: .03em 0; transform: skewX(-8deg); } 8% { translate: 0 0; transform: none; } 52% { translate: -.04em 0; } 54% { translate: 0 0; } }
@keyframes nm-g1 { 0%, 100% { clip-path: inset(0 0 100% 0); translate: 0 0; } 5% { clip-path: inset(10% 0 60% 0); translate: -.07em 0; } 7% { clip-path: inset(55% 0 18% 0); translate: .05em 0; }
  9% { clip-path: inset(0 0 100% 0); } 51% { clip-path: inset(30% 0 45% 0); translate: .08em 0; } 54% { clip-path: inset(0 0 100% 0); } 81% { clip-path: inset(70% 0 4% 0); translate: -.05em 0; } 83% { clip-path: inset(0 0 100% 0); } }
@keyframes nm-g2 { 0%, 100% { clip-path: inset(0 0 100% 0); translate: 0 0; } 6% { clip-path: inset(62% 0 8% 0); translate: .06em 0; } 8% { clip-path: inset(0 0 100% 0); }
  52% { clip-path: inset(5% 0 72% 0); translate: -.07em 0; } 55% { clip-path: inset(0 0 100% 0); } 82% { clip-path: inset(40% 0 40% 0); translate: .1em 0; } 84% { clip-path: inset(0 0 100% 0); } }
/* «Парящие буквы»: каждая буква ника плавает в невесомости в своём ритме */
.nm-float i { display: inline-block; font-style: normal; animation: nm-float 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * -.27s); }
@keyframes nm-float { 0%, 100% { translate: 0 0; rotate: -4deg; } 50% { translate: 0 -.14em; rotate: 4deg; } }
/* «Шифр» — буквы перебирает js/look.js */
.nm-scramble { white-space: nowrap; }

/* ---------- Фоны профиля (.ls: на странице — слой за содержимым, в превью — внутри .lk-sw) ---------- */
.ls { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; container-type: size; }

/* «Цифровой дождь»: красные столбцы символов стекают по фону */
.ls-rain { opacity: .17; }
.ls-rain i { position: absolute; top: 0; translate: 0 -100%; writing-mode: vertical-rl; text-orientation: upright; white-space: nowrap; font: 700 15px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: 3px;
  color: var(--accent); text-shadow: 0 0 8px var(--accent); -webkit-mask: linear-gradient(transparent, #000 80%); mask: linear-gradient(transparent, #000 80%); animation: ls-rain 9s linear infinite; }
@keyframes ls-rain { from { transform: translateY(0); } to { transform: translateY(calc(100cqh + 100%)); } }

/* «Прыгающий логотип»: логотип FUNBASE летает по фону, как на заставке DVD, и на каждом ударе меняет цвет */
.ls-dvd { opacity: .2; }
.ls-dvd b { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: .25em; width: 6.4em; font: 900 clamp(9px, 3cqw, 34px)/1 var(--font); color: var(--accent);
  animation: ls-dvd-x 11s linear infinite alternate, ls-dvd-y 7.3s linear infinite alternate, ls-dvd-c 14.6s steps(1) infinite; }
.ls-dvd svg { width: 1.3em; height: 1.3em; fill: currentColor; flex: none; }
@keyframes ls-dvd-x { from { translate: 0 0; } to { translate: calc(100cqw - 6.4em) 0; } }
@keyframes ls-dvd-y { from { transform: translateY(0); } to { transform: translateY(calc(100cqh - 1.3em)); } }
@keyframes ls-dvd-c { 0% { color: var(--accent); } 50% { color: var(--text); } }

/* «Кинескоп»: развёртка, виньетка и бегущая светлая полоса поверх профиля, как на старом телевизоре */
.ls-crt { z-index: 40; background: repeating-linear-gradient(rgba(0, 0, 0, .2) 0 1px, transparent 1px 3px), radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(0, 0, 0, .45));
  animation: ls-flicker 5s infinite; }
.ls-crt i { position: absolute; left: 0; right: 0; top: -25%; height: 22%; background: linear-gradient(transparent, rgba(255, 255, 255, .045), transparent); animation: ls-roll 8s linear infinite; }
:root[data-theme="light"] .ls-crt { background: repeating-linear-gradient(rgba(0, 0, 0, .06) 0 1px, transparent 1px 3px), radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(0, 0, 0, .14)); }
:root[data-theme="light"] .ls-crt i { background: linear-gradient(transparent, rgba(0, 0, 0, .035), transparent); }
@keyframes ls-flicker { 0%, 100% { opacity: 1; } 47% { opacity: 1; } 48% { opacity: .85; } 49% { opacity: 1; } }
@keyframes ls-roll { to { top: 100%; } }

/* «HUD»: красный интерфейс машины из будущего — уголки экрана, прицел, шкала и бегущий сканер */
.ls-hud { color: var(--accent); opacity: .5; }
.ls-hud .c { position: absolute; inset: 86px 18px 18px; --l: 46px; --t: 2px;
  background: linear-gradient(currentColor 0 0) top left / var(--l) var(--t), linear-gradient(currentColor 0 0) top left / var(--t) var(--l),
    linear-gradient(currentColor 0 0) top right / var(--l) var(--t), linear-gradient(currentColor 0 0) top right / var(--t) var(--l),
    linear-gradient(currentColor 0 0) bottom left / var(--l) var(--t), linear-gradient(currentColor 0 0) bottom left / var(--t) var(--l),
    linear-gradient(currentColor 0 0) bottom right / var(--l) var(--t), linear-gradient(currentColor 0 0) bottom right / var(--t) var(--l);
  background-repeat: no-repeat; }
.ls-hud .x { position: absolute; left: 50%; top: 50%; width: 70px; height: 70px; translate: -50% -50%; border: 1px solid currentColor; border-radius: 50%; opacity: .5;
  background: linear-gradient(currentColor 0 0) center / 1px 100% no-repeat, linear-gradient(currentColor 0 0) center / 100% 1px no-repeat; animation: la-aim 3s ease-in-out infinite; }
.ls-hud .r { position: absolute; right: 30px; top: 22%; bottom: 22%; width: 10px; opacity: .6; background: repeating-linear-gradient(currentColor 0 1px, transparent 1px 12px); }
.ls-hud .scan { position: absolute; left: 18px; right: 18px; top: 86px; height: 1px; background: currentColor; box-shadow: 0 0 14px 1px currentColor; animation: ls-scan 6s linear infinite; }
.ls-hud b { position: absolute; font: 700 11px/1 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .22em; }
.ls-hud .t1 { left: 30px; bottom: 30px; }
.ls-hud .t2 { right: 30px; bottom: 30px; animation: la-blink 1.4s steps(1) infinite; }
@keyframes ls-scan { 0% { top: 86px; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { top: 100%; opacity: 0; } }

/* «Разлом»: внизу экрана светится красная трещина, вверх поднимаются искры */
.ls-abyss .glow { position: absolute; left: -10%; right: -10%; bottom: -25cqh; height: 55cqh; opacity: .55;
  background: radial-gradient(ellipse at 50% 100%, var(--accent), color-mix(in srgb, var(--accent) 25%, transparent) 40%, transparent 70%); animation: ls-ember 5s ease-in-out infinite; }
.ls-abyss .crack { position: absolute; left: 0; bottom: 0; width: 100%; height: 34px; overflow: visible; filter: drop-shadow(0 0 6px var(--accent)); }
.ls-abyss .crack path { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.ls-abyss em { position: absolute; bottom: 0; width: 3px; height: 3px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 6px 1px var(--accent); opacity: 0; animation: ls-spark 6s linear infinite; }
@keyframes ls-ember { 0%, 100% { opacity: .4; } 50% { opacity: .65; } }
@keyframes ls-spark { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: .9; } 100% { transform: translate(24px, -70cqh); opacity: 0; } }

/* «Глаза во тьме»: то тут, то там в фоне открываются красные глаза, моргают и исчезают */
.ls-eyes i { position: absolute; display: flex; gap: 16px; opacity: 0; animation: ls-eyes 12s ease-in-out infinite; }
.ls-eyes b { width: 13px; height: 7px; border-radius: 50%; background: radial-gradient(circle, #fff 0 12%, var(--accent) 45%, color-mix(in srgb, var(--accent) 60%, #000));
  box-shadow: 0 0 10px 2px var(--accent), 0 0 34px 8px color-mix(in srgb, var(--accent) 30%, transparent); animation: ls-blink 12s ease-in-out infinite; animation-delay: inherit; }
.ls-eyes b:first-child { rotate: 8deg; } .ls-eyes b:last-child { rotate: -8deg; }
@keyframes ls-eyes { 0%, 40%, 100% { opacity: 0; } 8%, 30% { opacity: .85; } }
@keyframes ls-blink { 0%, 15%, 19%, 100% { scale: 1 1; } 17% { scale: 1 .1; } }

/* «Кардиограмма»: по фону бежит красная линия пульса, как на мониторе */
.ls-pulse { opacity: .32; }
.ls-pulse i { position: absolute; left: 0; right: 0; top: 64cqh; height: 90px; background: var(--accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 90'%3E%3Cpath d='M0 45H150l10-6 10 6h15l7 8 8-46 10 74 8-36h22l15-10 15 10h150' fill='none' stroke='%23000' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 0 50% / 420px 90px repeat-x, linear-gradient(90deg, transparent, #000 20% 80%, transparent);
  -webkit-mask-composite: source-in;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 90'%3E%3Cpath d='M0 45H150l10-6 10 6h15l7 8 8-46 10 74 8-36h22l15-10 15 10h150' fill='none' stroke='%23000' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 0 50% / 420px 90px repeat-x, linear-gradient(90deg, transparent, #000 20% 80%, transparent);
          mask-composite: intersect;
  animation: ls-ecg 3.2s linear infinite; }
@keyframes ls-ecg { to { -webkit-mask-position: -420px 50%, 0 0; mask-position: -420px 50%, 0 0; } }

/* «Лава-лампа»: по фону медленно плывут большие мягкие красные пятна */
.ls-lava { opacity: .2; }
.ls-lava i { position: absolute; width: 42cqw; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--accent), transparent 68%); animation: ls-lava 24s ease-in-out infinite alternate; }
.ls-lava i:nth-child(1) { left: -10%; top: 5%; }
.ls-lava i:nth-child(2) { right: -12%; top: 35%; width: 34cqw; animation-delay: -8s; animation-duration: 30s; }
.ls-lava i:nth-child(3) { left: 28%; bottom: -20%; width: 38cqw; animation-delay: -15s; }
.ls-lava i:nth-child(4) { left: 55%; top: -12%; width: 24cqw; animation-delay: -4s; animation-duration: 19s; }
@keyframes ls-lava { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(9cqw, -10cqh) scale(1.18); } 100% { transform: translate(-7cqw, 8cqh) scale(.9); } }

/* «Сбой»: раз в 7 секунд профиль «ловит помехи» — по экрану проскакивают полосы, шапка профиля дёргается */
.ls-storm { z-index: 40; }
.ls-storm i { position: absolute; left: 0; right: 0; opacity: 0; animation: ls-storm 7s steps(1) infinite; }
.ls-storm i:nth-child(1) { top: 12%; height: 3px; background: var(--accent); }
.ls-storm i:nth-child(2) { top: 21%; height: 14px; background: repeating-linear-gradient(90deg, var(--accent) 0 3px, transparent 3px 9px); animation-delay: .05s; }
.ls-storm i:nth-child(3) { top: 38%; height: 2px; background: var(--text); }
.ls-storm i:nth-child(4) { top: 55%; height: 22px; background: color-mix(in srgb, var(--accent) 35%, transparent); animation-delay: .1s; }
.ls-storm i:nth-child(5) { top: 71%; height: 4px; background: var(--accent); animation-delay: .03s; }
.ls-storm i:nth-child(6) { top: 86%; height: 9px; background: repeating-linear-gradient(90deg, var(--text) 0 2px, transparent 2px 11px); }
@keyframes ls-storm { 0%, 88%, 100% { opacity: 0; translate: 0 0; } 89% { opacity: .6; translate: -4% 0; } 90.5% { opacity: 0; } 91.5% { opacity: .45; translate: 5% 0; } 93% { opacity: 0; } }
body.ls-on-storm .profile-head { animation: ls-jolt 7s steps(1) infinite; }
@keyframes ls-jolt { 0%, 88%, 93%, 100% { translate: 0 0; filter: none; } 89% { translate: -5px 0; filter: drop-shadow(4px 0 0 var(--accent)); }
  90.5% { translate: 4px 1px; filter: drop-shadow(-3px 0 0 var(--accent)); } 91.5% { translate: -2px 0; filter: none; } }

/* ---------- Выбор наград в своём профиле ---------- */
.lk { display: grid; gap: 18px; }
.lk-group h3 { margin: 0 0 10px; font: 800 12px/1 var(--font); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.lk-group h3 span { margin-left: 8px; color: var(--soft); letter-spacing: .04em; }
.lk-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.lk-tile { position: relative; display: grid; grid-template-rows: 96px auto auto; justify-items: center; align-content: start; gap: 3px; min-width: 0; padding: 8px 8px 12px; border-radius: 14px;
  border: 1px solid transparent; background: var(--surface-2); color: var(--text); font: inherit; text-align: center; cursor: pointer; transition: transform .15s, background .15s, border-color .15s, box-shadow .15s; }
button.lk-tile:hover { background: var(--surface-3); transform: translateY(-2px); }
button.lk-tile:active { transform: translateY(0) scale(.98); }
.lk-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lk-tile.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, var(--surface-2)); box-shadow: 0 0 26px -12px var(--accent); }
.lk-tile.locked { cursor: default; background: transparent; border: 1px dashed var(--line); color: var(--muted); }
.lk-tile b { font: 800 13.5px/1.2 var(--font); overflow-wrap: anywhere; }
.lk-tile small { font-size: 11.5px; line-height: 1.25; color: var(--muted); overflow-wrap: anywhere; }
.lk-prev { display: grid; place-items: center; width: 100%; height: 96px; min-width: 0; }
.lk-on { position: absolute; top: 7px; right: 7px; z-index: 3; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); }
.lk-on svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.lk-q { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; border: 1px dashed var(--line); font: 900 22px/1 var(--font); color: var(--muted); }
.lk-hint { margin: 0; color: var(--muted); font-size: 13.5px; }
/* Телефон: каждая группа — одна лента, листается пальцем, а не простыня на несколько экранов */
@media (max-width: 600px) {
  .lk { gap: 14px; }
  .eggs, .lk-body, .lk { grid-template-columns: minmax(0, 1fr); }
  .lk-group { min-width: 0; }
  .lk-row { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none;
    margin: 0 -20px; padding: 2px 20px 6px; scroll-padding: 0 20px; }
  .lk-row::-webkit-scrollbar { display: none; }
  .lk-tile { flex: 0 0 104px; scroll-snap-align: start; grid-template-rows: 84px auto auto; }
  .lk-prev { height: 84px; }
  .lk-tile b { font-size: 12.5px; }
  .lk-tile :is(b, small) { overflow-wrap: break-word; hyphens: auto; }
}
.lk-sw .ls-dvd span { white-space: nowrap; }
/* Превью анимируется у надетой награды и под курсором — остальные стоят, чтобы страница не мельтешила */
.lk-tile:not(.on):not(:hover) :is(.la, .lk-sw, .lk-nm) *, .lk-tile:not(.on):not(:hover) :is(.la, .lk-sw, .lk-nm) *::before, .lk-tile:not(.on):not(:hover) :is(.la, .lk-sw, .lk-nm) *::after { animation-play-state: paused; }
/* Превью эффекта ника */
.lk-nm { display: block; max-width: 100%; padding: 4px 2px; overflow: hidden; white-space: nowrap; font: 900 18px/1.2 var(--font); letter-spacing: -.01em; }
/* Превью фона: кусочек страницы — фон сайта, поверх «текст» */
.lk-sw { position: relative; display: grid; align-content: end; gap: 5px; box-sizing: border-box; width: 92px; height: 66px; padding: 9px; border-radius: 10px; overflow: hidden;
  background: var(--bg); border: 1px solid var(--line); box-shadow: 0 8px 20px -12px rgba(0, 0, 0, .6); }
.lk-sw > .ls { position: absolute; z-index: 0; opacity: .8; }
.lk-sw > .ls-crt, .lk-sw > .ls-storm { z-index: 2; opacity: 1; }
.lk-sw-l { position: relative; z-index: 1; display: block; height: 5px; width: 62%; border-radius: 3px; background: var(--text); opacity: .85; }
.lk-sw-l + .lk-sw-l { width: 40%; background: var(--muted); }
.lk-sw .ls-rain i { font-size: 7px; letter-spacing: 1px; }
.lk-sw .ls-hud .c { inset: 5px; --l: 12px; --t: 1.5px; }
.lk-sw .ls-hud .x { width: 18px; height: 18px; }
.lk-sw .ls-hud .r { right: 9px; width: 4px; background-size: auto; background-image: repeating-linear-gradient(currentColor 0 1px, transparent 1px 5px); }
.lk-sw .ls-hud .scan { left: 5px; right: 5px; animation-name: ls-scan-mini; }
@keyframes ls-scan-mini { 0% { top: 0; opacity: 0; } 8%, 92% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
.lk-sw .ls-hud b { display: none; }
.lk-sw .ls-abyss .crack { height: 10px; }
.lk-sw .ls-abyss em { width: 2px; height: 2px; }
.lk-sw .ls-eyes i { gap: 6px; }
.lk-sw .ls-eyes b { width: 7px; height: 4px; box-shadow: 0 0 5px 1px var(--accent); }
.lk-sw .ls-pulse { opacity: .6; }
.lk-sw .ls-pulse i { top: 22%; height: 30px; -webkit-mask-size: 140px 30px, 100% 100%; mask-size: 140px 30px, 100% 100%; animation-name: ls-ecg-mini; }
@keyframes ls-ecg-mini { to { -webkit-mask-position: -140px 50%, 0 0; mask-position: -140px 50%, 0 0; } }
.lk-sw .ls-lava { opacity: .45; }
.lk-sw .ls-storm i:nth-child(2n) { height: 4px; }
.lk-sw .ls-crt { background: repeating-linear-gradient(rgba(0, 0, 0, .3) 0 1px, transparent 1px 3px), radial-gradient(ellipse at 50% 45%, transparent 45%, rgba(0, 0, 0, .5)); }

/* Без лишнего движения: награды остаются, анимации — нет */
@media (prefers-reduced-motion: reduce) {
  .la *, .la *::before, .la *::after, .ls, .ls *, .nm, .nm *, .nm::before, .nm::after, body.ls-on-storm .profile-head { animation: none !important; }
  .la-e-heart .la-front i, .la-e-gravity .la-front i, .ls-storm, .ls-abyss em, .la-e-noise .la-front i { display: none; }
  .ls-eyes i { opacity: .7; }
  .ls-rain i { transform: translateY(60cqh); }
}

/* Fani: independent frame and companions; the player's avatar is never replaced. */
.la-f-fani-ribbon{--pad:calc(var(--s)*.12)}
.la-f-fani-ribbon .ava{box-shadow:0 0 0 1px var(--accent)}
.la-f-fani-ribbon .la-frame{inset:calc(var(--s)*-.07);border:2px solid var(--accent);border-radius:calc(var(--s)*.25);box-shadow:0 0 calc(var(--s)*.12) color-mix(in srgb,var(--accent) 25%,transparent)}
.la-f-fani-ribbon .la-frame i{position:absolute;inset:calc(var(--s)*.04);border:1px solid color-mix(in srgb,var(--text) 30%,transparent);border-radius:inherit}
.la-f-fani-ribbon .la-frame svg{position:absolute;right:calc(var(--s)*-.1);bottom:calc(var(--s)*-.1);width:calc(var(--s)*.26);height:calc(var(--s)*.26);fill:var(--accent);background:var(--surface);padding:2px;border-radius:50%;box-sizing:border-box}
.la-e-fani-company,.la-e-fani-secret{--pad:calc(var(--s)*.4)}
.la .fani-companion{position:absolute;width:calc(var(--s)*.64);height:calc(var(--s)*.83);object-fit:contain;bottom:calc(var(--s)*-.02);filter:drop-shadow(0 2px 2px #0004);mask-image:linear-gradient(#000 87%,transparent);transform-origin:50% 100%}
.la-e-fani-company .fani-companion{right:calc(var(--s)*-.42);animation:fani-greeting 8s ease-in-out infinite}
.la-e-fani-secret .fani-companion{left:calc(var(--s)*-.42)}
@keyframes fani-greeting{0%,55%,100%{rotate:0deg;translate:0 0}65%,85%{rotate:-5deg;translate:0 -2px}75%{rotate:2deg;translate:0 -2px}}
.fani-sparkle{position:absolute;right:calc(var(--s)*-.36);top:calc(var(--s)*.03);width:calc(var(--s)*.1);aspect-ratio:1;background:var(--accent);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:fani-sparkle 8s ease-in-out infinite}
@keyframes fani-sparkle{0%,50%,100%{opacity:.15;scale:.6}65%,85%{opacity:1;scale:1}}
.fani-whisper{position:absolute;left:calc(var(--s)*-.30);top:calc(var(--s)*-.12);display:flex;align-items:center;justify-content:center;gap:calc(var(--s)*.025);width:calc(var(--s)*.32);height:calc(var(--s)*.20);border-radius:calc(var(--s)*.07);background:var(--accent);animation:fani-whisper 9s ease-in-out infinite;box-shadow:0 2px 8px #0002}
.fani-whisper::after{content:'';position:absolute;right:15%;bottom:-20%;border:calc(var(--s)*.04) solid transparent;border-top-color:var(--accent)}
.fani-whisper b{width:calc(var(--s)*.035);height:calc(var(--s)*.035);background:#fff;border-radius:50%}
@keyframes fani-whisper{0%,60%,100%{opacity:.15;translate:0 2px}72%,88%{opacity:1;translate:0 0}}
.nm-fani-signature{display:inline-block;position:relative;padding-bottom:.08em}
.nm-fani-signature::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:.13em;border-bottom:2px solid var(--accent);border-radius:50%;transform:rotate(-2deg)}
.ls-fani-lounge{background:radial-gradient(ellipse at 85% 70%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 60%)}
.ls-fani-lounge .fani-lounge-art{position:absolute;right:2vw;bottom:0;height:min(87vh,860px);width:auto;max-width:55vw;object-fit:contain;object-position:bottom;opacity:.25;mask-image:linear-gradient(90deg,transparent,#000 20%)}
:root[data-theme="light"] .ls-fani-lounge .fani-lounge-art{opacity:.14}
.fani-lounge-line{position:absolute;inset:8% 3%;border:1px solid color-mix(in srgb,var(--accent) 13%,transparent);border-radius:24px;transform:rotate(-3deg)}
body.ls-on-fani-lounge .profile-head{background:linear-gradient(115deg,color-mix(in srgb,var(--accent) 6%,var(--surface)),var(--surface));border:1px solid var(--line);border-radius:18px;padding:18px 24px}
.lk-sw .ls-fani-lounge .fani-lounge-art{height:100%;max-width:75%;right:0;opacity:.85}
.lk-sw .fani-lounge-line{inset:8%;border-radius:8px}
@media(max-width:620px){.ls-fani-lounge .fani-lounge-art{height:60vh;max-width:80vw;right:-10vw;opacity:.1}:root[data-theme="light"] .ls-fani-lounge .fani-lounge-art{opacity:.08}body.ls-on-fani-lounge .profile-head{padding:14px}}
@media(prefers-reduced-motion:reduce){.la .fani-companion,.fani-sparkle,.fani-whisper{animation:none!important}.fani-whisper{opacity:1}}