/* Стили ника («Престиж ника») — портировано из Dev/names.html (44 эффекта).
   Применять хелпером styledNameHtml() из /utils/name-style.js: class="nm sN" + .clip
   для заливочных, для пер-буквенных имя разбито на <span class="L" style="--i:K">.
   --c = текущий цвет текста (цвет ника), эффекты цвето-агностичны.
   ВСЕ размеры эффектов — в em (относительно font-size), чтобы стиль выглядел ОДИНАКОВО
   при любом размере ника: и на крупном превью, и на мелких табличках домов/чата.
   (1em ≈ размер шрифта; калибровка от исходных ~25px в names.html: 1px → 0.04em.) */
.nm{
  --c: currentColor;
  --hi: color-mix(in srgb, var(--c), #fff 50%);
  --lo: color-mix(in srgb, var(--c), #000 58%);
  display:inline-block; position:relative;
}
.nm .L{ display:inline-block; }
.clip{ -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.clip .L{ -webkit-text-fill-color:transparent; }
.svgnm{ overflow:visible; vertical-align:middle; }
.svgnm text{ font-family:'Cinzel',serif; font-weight:800; font-size:96px; }

.s2{ text-shadow:0 0 .4em var(--c),0 .04em .08em rgba(0,0,0,.4); }
.s3{ text-shadow:0 0 .04em #fff,0 0 .24em var(--c),0 0 .52em var(--c); }
.s4{ filter:url(#f-fire); text-shadow:0 0 .24em var(--c),0 -.16em .48em var(--c); animation:firef 1.3s ease-in-out infinite; }
.s5{ filter:url(#f-smoke); animation:smokefade 3s ease-in-out infinite; }
.s7{ -webkit-text-fill-color:transparent; -webkit-text-stroke:.04em var(--c); }
.s7 .L{ -webkit-text-fill-color:transparent; -webkit-text-stroke:.04em var(--c); }
.s9{ -webkit-text-stroke:.2em #fff; paint-order:stroke fill; filter:drop-shadow(0 .12em .16em rgba(0,0,0,.5)); }
.s10{ filter:url(#f-melt); }
.s12{ text-shadow:.04em .04em var(--lo),.08em .08em var(--lo),.12em .12em var(--lo),.16em .16em var(--lo),.2em .2em var(--lo),.24em .24em var(--lo),.28em .28em var(--lo),.36em .36em .4em rgba(0,0,0,.5); }
.s13 .L{ animation:lightrun 2s ease-in-out infinite; animation-delay:calc(var(--i)*.13s); }
.s16{ text-shadow:.16em 0 color-mix(in srgb,var(--c),transparent 45%),.32em 0 color-mix(in srgb,var(--c),transparent 70%),.48em 0 color-mix(in srgb,var(--c),transparent 86%); }
.s17{ text-shadow:-.08em 0 #00e5ff,.08em 0 #ff003c; }
.s18{ animation:sliceglitch 2.2s steps(1,end) infinite; }
.s19{ text-shadow:0 0 .04em var(--c); animation:jitter .2s steps(2,end) infinite; }
.s20{ animation:wobble 1.7s ease-in-out infinite; }
.s21{ transform:skewX(-13deg); text-shadow:-.28em 0 color-mix(in srgb,var(--c),transparent 55%),-.56em 0 color-mix(in srgb,var(--c),transparent 78%); }
.s22{ background-color:var(--lo); background-image:radial-gradient(circle,var(--c) .056em,transparent .068em); background-size:.2em .2em; }
.s23{ background-image:conic-gradient(from 0deg,#ff004c,#ff8a00,#ffe600,#00d26a,#00b3ff,#7a5cff,#ff004c); animation:huerot 6s linear infinite; }
.s24{ animation:pulse 1.6s ease-in-out infinite; }
.s25{ text-shadow:0 0 .4em var(--c); animation:beat 1.4s ease-in-out infinite; }
.s26{ background:color-mix(in srgb,var(--c),transparent 80%); padding:.08em .24em; border-radius:.24em; box-shadow:inset 0 0 0 .04em color-mix(in srgb,var(--c),transparent 55%); }
.s27 .L{ animation:hop 1s ease-in-out infinite; animation-delay:calc(var(--i)*.08s); }
.s29{ animation:shake .4s ease-in-out infinite; }
.s30{ border:.08em solid var(--c); padding:.16em .56em; border-radius:.16em; box-shadow:0 0 .4em -.08em var(--c); }
.s32 .L{ animation:flip 2.6s ease-in-out infinite; animation-delay:calc(var(--i)*.12s); }
.s33{ overflow:hidden; animation:typeclip 3.2s steps(9,end) infinite; }
.s35{ animation:ghostf 2s ease-in-out infinite; }
.s36{ color:var(--c); }
.s36::before{ content:''; position:absolute; left:50%; top:50%; width:.48em; height:.48em; transform:translate(-50%,-50%); border-radius:50%; box-shadow:0 0 0 0 var(--c); animation:radar 2s ease-out infinite; }
.s42{ background-image:linear-gradient(180deg,var(--hi) 0 50%,var(--lo) 50% 100%); }
.s43{ background-image:repeating-linear-gradient(0deg,var(--c) 0 .08em,var(--lo) .08em .16em); text-shadow:0 0 .24em var(--c); }
.s45{ border-bottom:.12em solid var(--c); padding-bottom:.08em; box-shadow:0 .16em .4em -.24em var(--c); }
.s46{ background-image:linear-gradient(135deg,var(--hi) 0 25%,var(--c) 25% 50%,var(--lo) 50% 75%,var(--c) 75%); }
.s47{ background-image:radial-gradient(circle at 0% 50%,var(--hi),var(--c) 24%); background-size:320% 100%; animation:flow 2.6s linear infinite; }
.s50{ background-image:linear-gradient(90deg,#ff004c,#ff8a00,#ffe600,#00d26a,#00b3ff,#7a5cff,#ff004c); background-size:300% 100%; animation:flow 5s linear infinite; }
.s6{ color:var(--c); text-shadow:0 0 .24em var(--c); }
.s11{ animation:tilt3d 4s ease-in-out infinite; }
.s11 .L{ text-shadow:.04em 0 var(--lo),.08em 0 var(--lo),.12em 0 var(--lo),.16em .04em var(--lo),.2em .08em rgba(0,0,0,.4); }
.s15{ animation:focusin 3s ease-in-out infinite; }
.s38{ color:var(--c); }
.s49{ animation:crawl 4s ease-in-out infinite; }
.svgnm{ overflow:visible; vertical-align:middle; }
.svgnm text{ font-family:'Cinzel',serif; font-weight:800; font-size:96px; }
.s28 .L{ text-shadow:.04em 0 var(--lo),.08em 0 var(--lo),.12em 0 var(--lo),.16em 0 var(--lo); animation:cubespin 2.8s linear infinite; animation-delay:calc(var(--i)*.18s); }
.s40{ transform:rotateX(22deg) rotateZ(-22deg); text-shadow:.04em .04em var(--lo),.08em .08em var(--lo),.12em .12em var(--lo),.16em .16em var(--lo),.2em .2em var(--lo),.24em .24em var(--lo),.28em .28em var(--lo),.36em .36em .28em rgba(0,0,0,.5); }
.s41{ background-image:linear-gradient(180deg,#fff,var(--hi) 18%,var(--c) 34%,var(--lo) 50%,var(--c) 66%,var(--hi) 82%,#fff); background-size:100% 320%; animation:chrome 3s linear infinite; }
.s48svg text{ fill:none; stroke:var(--c); stroke-width:2.6; stroke-linejoin:round; stroke-dasharray:11 8; animation:march 1s linear infinite; }
@keyframes firef{ 0%,100%{text-shadow:0 0 .24em var(--c),0 -.12em .32em var(--c)} 50%{text-shadow:0 0 .44em var(--c),0 -.36em .72em var(--c)} }
@keyframes lightrun{ 0%,100%{filter:brightness(1);text-shadow:none} 50%{filter:brightness(1.7);text-shadow:0 0 .48em var(--c)} }
@keyframes sliceglitch{ 0%,100%{clip-path:inset(0 0 0 0);transform:translate(0)} 20%{clip-path:inset(35% 0 30% 0);transform:translate(-.16em,0)} 22%{clip-path:inset(0 0 0 0)} 50%{clip-path:inset(60% 0 8% 0);transform:translate(.16em,0)} 52%{clip-path:inset(0 0 0 0)} 70%{clip-path:inset(10% 0 70% 0);transform:translate(-.12em,0)} 72%{clip-path:inset(0 0 0 0)} }
@keyframes jitter{ 0%{transform:translate(0,0)} 50%{transform:translate(.04em,-.04em)} 100%{transform:translate(-.04em,.04em)} }
@keyframes wobble{ 0%,100%{transform:rotate(-3.5deg)} 50%{transform:rotate(3.5deg)} }
@keyframes pulse{ 0%,100%{text-shadow:0 0 .16em var(--c),0 0 .32em var(--c)} 50%{text-shadow:0 0 .48em var(--c),0 0 1.04em var(--c),0 0 1.84em var(--c)} }
@keyframes beat{ 0%,100%{transform:scale(1)} 14%{transform:scale(1.14)} 28%{transform:scale(1)} 42%{transform:scale(1.07)} 56%{transform:scale(1)} }
@keyframes hop{ 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-.64em)} }
@keyframes shake{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-.12em)} 75%{transform:translateX(.12em)} }
@keyframes flip{ 0%,70%,100%{transform:rotateX(0)} 35%{transform:rotateX(360deg)} }
@keyframes typeclip{ from{clip-path:inset(0 100% 0 0)} 75%,100%{clip-path:inset(0 0 0 0)} }
@keyframes ghostf{ 0%,100%{opacity:.45;filter:blur(.016em)} 50%{opacity:1;filter:blur(0)} }
@keyframes flow{ from{background-position:0 0} to{background-position:300% 0} }
@keyframes smokefade{ 0%,100%{opacity:1} 50%{opacity:.6} }
@keyframes huerot{ to{filter:hue-rotate(360deg)} }
@keyframes radar{ 0%{box-shadow:0 0 0 0 var(--c);opacity:.85} 100%{box-shadow:0 0 0 .96em transparent;opacity:0} }
@keyframes tilt3d{ 0%,100%{transform:perspective(16.8em) rotateY(-20deg)} 50%{transform:perspective(16.8em) rotateY(20deg)} }
@keyframes focusin{ 0%,100%{filter:blur(.32em);opacity:.45} 50%{filter:blur(0);opacity:1} }
@keyframes crawl{ 0%,100%{transform:perspective(12em) rotateX(48deg) scale(.88)} 50%{transform:perspective(12em) rotateX(12deg) scale(1)} }
@keyframes march{ to{stroke-dashoffset:-19} }
@keyframes cubespin{ 0%{transform:perspective(8.8em) rotateY(0)} 100%{transform:perspective(8.8em) rotateY(360deg)} }
@keyframes chrome{ from{background-position:0 0} to{background-position:0 320%} }