/* ===== Nameplates (2026.10.23b): ported from the Name Styles canvas. Every rule is scoped under .nsp ===== */
.nsp{position:relative;isolation:isolate}
.nsp>.nsp-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;border-radius:inherit;box-sizing:border-box}
.nsp>:not(.nsp-bg){position:relative;z-index:2}
.nsp .np-layer{position:absolute;inset:0;pointer-events:none}
.nsp .np-art{position:absolute;right:0;top:50%;height:64px;margin-top:-32px;z-index:1;pointer-events:none}
.nsp .ecl-sun,.nsp .ecl-moon{top:50%!important;margin-top:-20px}
.nsp-name:not([class*="nsf-"]){color:var(--nspn,inherit);text-shadow:var(--nspns,0 1px 4px rgba(7,4,26,.85))}
.nsp-name[class*="nsf-"]:not(.nsf-prism):not(.nsf-prismflow):not(.nsf-fireice),.nsp .nm-name[class*="nsf-"]:not(.nsf-prism):not(.nsf-prismflow):not(.nsf-fireice){filter:drop-shadow(0 1px 3px rgba(7,4,26,.9))}
.nsp-sub{color:var(--nsps,inherit)!important}
/* on plated rows, buttons and small text keep a solid night fill so bright plates never wash them out */
.nsp button:not(.send):not(.fav){background:var(--night)!important}
.nsp .lastseen,.nsp .role,.nsp .tagline,.nsp small{background:rgba(7,4,26,.8);padding:0 5px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
/* in member + friend lists the plate is a quiet accent: art fades in from the right, the name side stays plain night, and it holds still */
.member.nsp>.nsp-bg,.contactrow.nsp>.nsp-bg{-webkit-mask:linear-gradient(90deg,transparent 0 30%,rgba(0,0,0,.35) 55%,rgba(0,0,0,.8) 100%);mask:linear-gradient(90deg,transparent 0 30%,rgba(0,0,0,.35) 55%,rgba(0,0,0,.8) 100%)}
.member.nsp>.nsp-bg *,.contactrow.nsp>.nsp-bg *,.member.nsp>.nsp-bg,.contactrow.nsp>.nsp-bg{animation-play-state:paused!important}
.member.nsp .lastseen,.member.nsp .role,.contactrow.nsp .tagline,.contactrow.nsp small{background:none}
.member.nsp .mname,.contactrow.nsp .cname{--nspn:inherit}
/* the profile strip under your name */
.nsp-strip{display:flex;align-items:center;gap:10px;min-height:56px;padding:6px 14px;margin:6px 0 4px;width:100%;align-self:stretch;text-align:left;border:0;overflow:hidden}
.nsp-strip .nsp-name{font-weight:700;font-size:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nsp-strip .nsp-sub{font-size:13px}
.nsp-strip .nsp-txt{display:flex;flex-direction:column;min-width:0}
/* picker previews: wide strips, one per row */
.ns-grid.wide{grid-template-columns:1fr}
.ns-tile .nsp-strip{margin:0 0 2px;min-height:52px;pointer-events:none}
@media (prefers-reduced-motion:reduce){.nsp *,.nsp-bg{animation:none!important}}
@keyframes np_nsHolo{0%{background-position:0% 50%}100%{background-position:300% 50%}}
.nsp-bg.ns-holo{background:linear-gradient(100deg,#2b1055,#7597de,#ff7ad9,#f3ff3a,#39ff9a,#00f0ff,#2b1055);background-size:300% 100%;animation:np_nsHolo 6s linear infinite}
@keyframes np_nsStream{0%{background-position:0 0,0 0}100%{background-position:0 120px,0 0}}
.nsp-bg.ns-stream{background:repeating-linear-gradient(180deg,rgba(57,255,154,.0) 0 6px,rgba(57,255,154,.55) 6px 8px,rgba(57,255,154,0) 8px 20px),linear-gradient(90deg,#03150c,#062a18 60%,#03150c);background-size:14px 120px,100% 100%;animation:np_nsStream 2.4s linear infinite}
.nsp .gb-scan{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px);pointer-events:none;z-index:3}
.nsp .gb-bar{position:absolute;left:38%;right:0;height:6px;pointer-events:none;z-index:1}
.nsp .gb-b1{top:14px;background:linear-gradient(90deg,transparent,#FF2E88 18%,#FF2E88 70%,transparent);animation:np_gbBar1 2.4s steps(1,end) infinite}
.nsp .gb-b2{top:38px;height:4px;background:linear-gradient(90deg,transparent,#00F0FF 25%,#00F0FF 80%,transparent);animation:np_gbBar2 1.9s steps(1,end) infinite}
.nsp .gb-b3{top:26px;height:2px;left:52%;background:#F3FF3A;opacity:.8;animation:np_gbBar3 3.1s steps(1,end) infinite}
@keyframes np_gbBar1{0%{transform:translateX(0);opacity:.85}12%{transform:translateX(-40px)}24%{transform:translateX(18px);top:10px}40%{transform:translateX(-8px);top:20px}55%{opacity:.3}70%{transform:translateX(30px);opacity:.9;top:12px}85%{transform:translateX(-22px)}}
@keyframes np_gbBar2{0%{transform:translateX(0);opacity:.8}18%{transform:translateX(26px);top:44px}33%{transform:translateX(-30px);top:34px}50%{opacity:.2}66%{transform:translateX(12px);opacity:.85;top:40px}82%{transform:translateX(-14px)}}
@keyframes np_gbBar3{0%,60%{opacity:0}62%{opacity:.9;transform:translateX(-50px)}66%{transform:translateX(20px)}70%{opacity:0}}
.nsp .gb-noise{position:absolute;right:0;top:0;bottom:0;width:45%;z-index:1;pointer-events:none;background:linear-gradient(#00F0FF,#00F0FF) 12% 20%/10px 3px no-repeat,linear-gradient(#FF2E88,#FF2E88) 40% 70%/14px 3px no-repeat,linear-gradient(#F3FF3A,#F3FF3A) 72% 34%/6px 3px no-repeat,linear-gradient(#00F0FF,#00F0FF) 88% 80%/12px 2px no-repeat;animation:np_gbNoise .5s steps(1,end) infinite}
@keyframes np_gbNoise{0%{background-position:12% 20%,40% 70%,72% 34%,88% 80%}25%{background-position:60% 55%,20% 30%,90% 75%,30% 12%}50%{background-position:80% 10%,70% 85%,15% 60%,55% 40%;opacity:.6}75%{background-position:35% 80%,92% 22%,48% 15%,8% 66%}}
.nsp .gb-slice{position:absolute;inset:0;z-index:4;pointer-events:none;background:inherit;opacity:0}
.nsp .gb{animation:np_gbShake 3.2s steps(1,end) infinite}
@keyframes np_gbShake{0%,84%,100%{transform:none;filter:none}86%{transform:translateX(-4px) skewX(-6deg);filter:hue-rotate(40deg)}88%{transform:translateX(3px);filter:none}90%{transform:translateX(-2px) skewX(4deg)}92%{transform:none}}
.nsp .gb-name{text-shadow:2px 0 #FF2E88,-2px 0 #00F0FF;animation:np_gbName 3.2s steps(1,end) infinite}
@keyframes np_gbName{0%,84%,100%{text-shadow:2px 0 #FF2E88,-2px 0 #00F0FF;clip-path:none}86%{text-shadow:-5px 0 #FF2E88,5px 0 #00F0FF;clip-path:polygon(0 0,100% 0,100% 45%,0 45%,0 60%,100% 60%,100% 100%,0 100%)}88%{text-shadow:4px 1px #FF2E88,-3px -1px #00F0FF}90%{text-shadow:-2px 0 #FF2E88,2px 0 #00F0FF;transform:translateX(3px)}92%{transform:none}}
.nsp .gb-caret{color:#00F0FF;animation:np_gbCaret 1s steps(1,end) infinite}
@keyframes np_gbCaret{50%{opacity:0}}
@keyframes np_tw{0%,100%{opacity:1}50%{opacity:.25}}
.nsp .tw0{animation:np_tw 2.4s ease-in-out infinite}
.nsp .tw1{animation:np_tw 3.3s ease-in-out infinite .8s}
.nsp .tw2{animation:np_tw 4.1s ease-in-out infinite 1.6s}
@keyframes np_flare{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.72);opacity:.75}}
.nsp .flare{animation:np_flare 3.2s ease-in-out infinite}
.nsp .flare.f1{animation-duration:4.2s;animation-delay:-1.3s}
.nsp .flare.f2{animation-duration:2.7s;animation-delay:-.6s}
@keyframes np_aurA{0%,100%{transform:translateX(-12%) skewX(-18deg) scaleY(1)}50%{transform:translateX(14%) skewX(14deg) scaleY(1.25)}}
@keyframes np_aurB{0%,100%{transform:translateX(16%) skewX(16deg)}50%{transform:translateX(-10%) skewX(-12deg)}}
@keyframes np_rays{0%{background-position:0 0}100%{background-position:60px 0}}
.nsp .aur1{background:linear-gradient(100deg,transparent 15%,rgba(57,255,154,.7) 32%,rgba(0,240,255,.5) 46%,transparent 62%);filter:blur(7px);animation:np_aurA 7s ease-in-out infinite}
.nsp .aur2{background:linear-gradient(80deg,transparent 35%,rgba(122,92,255,.6) 55%,rgba(255,79,216,.35) 68%,transparent 82%);filter:blur(10px);animation:np_aurB 9s ease-in-out infinite}
.nsp .aurrays{background:repeating-linear-gradient(90deg,rgba(150,255,210,.0) 0 5px,rgba(150,255,210,.22) 6px 7px,rgba(150,255,210,0) 8px 13px);-webkit-mask:linear-gradient(180deg,transparent,#000 30%,#000 60%,transparent);mask:linear-gradient(180deg,transparent,#000 30%,#000 60%,transparent);animation:np_rays 6s linear infinite;mix-blend-mode:screen}
@keyframes np_flm{0%,100%{transform:scaleY(1)}30%{transform:scaleY(1.35) skewX(-4deg)}60%{transform:scaleY(.8) skewX(3deg)}}
.nsp .flm{transform-box:fill-box;transform-origin:50% 100%;animation:np_flm .7s ease-in-out infinite}
@keyframes np_wn{0%,100%{opacity:.95}40%{opacity:.35}70%{opacity:.8}}
.nsp .wn0{animation:np_wn 1.1s infinite}
.nsp .wn1{animation:np_wn 1.7s infinite .3s}
.nsp .wn2{animation:np_wn 2.3s infinite .9s}
.nsp .wn3{opacity:.6}
@keyframes np_smk{0%{transform:translate(0,8px) scale(.6);opacity:0}25%{opacity:.85}100%{transform:translate(-14px,-40px) scale(1.5);opacity:0}}
.nsp .smk{transform-box:fill-box;transform-origin:50% 50%;animation:np_smk 4.5s linear infinite}
@keyframes np_emb{0%{transform:translate(0,0);opacity:0}10%{opacity:1}100%{transform:translate(-10px,-70px);opacity:0}}
.nsp .emb{animation:np_emb 3s linear infinite}
@keyframes np_cbglow{0%,100%{opacity:.75}40%{opacity:1}70%{opacity:.6}}
.nsp .cbglow{background:radial-gradient(ellipse 70% 120% at 75% 115%,rgba(255,177,59,.9),rgba(210,70,26,.55) 45%,transparent 75%);animation:np_cbglow 1.4s ease-in-out infinite}
@keyframes np_sfall{0%{transform:translate(0,0)}100%{transform:translate(-30px,64px)}}
@keyframes np_sway{0%,100%{transform:translateX(-5px)}50%{transform:translateX(5px)}}
.nsp .snowL{animation:np_sfall linear infinite}
.nsp .snowF{animation-duration:9s}
.nsp .snowM{animation-duration:5.5s}
.nsp .snowN{animation-duration:3s;filter:blur(.6px)}
.nsp .swayA{animation:np_sway 4s ease-in-out infinite}
.nsp .swayB{animation:np_sway 2.6s ease-in-out infinite}
@keyframes np_gust{0%,80%,100%{opacity:0;transform:translateX(-40%)}88%{opacity:.5}96%{opacity:0;transform:translateX(60%)}}
.nsp .gust{background:linear-gradient(90deg,transparent,rgba(255,255,255,.35) 40%,rgba(255,255,255,.35) 60%,transparent);height:10px;top:36px;filter:blur(4px);animation:np_gust 7s ease-in-out infinite}
@keyframes np_foxlook{0%,70%,100%{transform:rotate(0)}78%,92%{transform:rotate(-8deg)}}
.nsp .foxhead{transform-box:fill-box;transform-origin:30% 90%;animation:np_foxlook 5s ease-in-out infinite}
@keyframes np_tail{0%,100%{transform:rotate(0)}50%{transform:rotate(6deg)}}
.nsp .foxtail{transform-box:fill-box;transform-origin:100% 50%;animation:np_tail 3s ease-in-out infinite}
@keyframes np_moonx{0%{left:-44px}42%{left:calc(64% - 9px)}50%{left:64%}58%{left:calc(64% + 9px)}100%{left:calc(100% + 8px)}}
@keyframes np_moonop{0%,30%{opacity:.18}44%,56%{opacity:1}70%,100%{opacity:.18}}
@keyframes np_night{0%,28%{opacity:0}45%,55%{opacity:1}72%,100%{opacity:0}}
@keyframes np_corona{0%,38%,62%,100%{box-shadow:0 0 18px 8px rgba(255,255,230,.9),0 0 50px 22px rgba(255,250,210,.55)}46%,54%{box-shadow:0 0 6px 2px rgba(255,255,255,.95),0 0 26px 10px rgba(200,225,255,.7),0 0 60px 24px rgba(150,190,255,.35)}}
@keyframes np_namecol{0%,30%{color:#0B1030;text-shadow:0 1px 6px rgba(255,255,255,.7)}44%,56%{color:#FFFFFF;text-shadow:0 1px 6px #000}70%,100%{color:#0B1030;text-shadow:0 1px 6px rgba(255,255,255,.7)}}
@keyframes np_subcol{0%,30%{color:#2A3A6A}44%,56%{color:#C9D6FF}70%,100%{color:#2A3A6A}}
.nsp .ecl-day{background:linear-gradient(180deg,#9FD2FF 0%,#D9EEFF 70%,#F4FAFF 100%)}
.nsp .ecl-night{background:#020108;animation:np_night 12s linear infinite}
.nsp .ecl-sun{position:absolute;left:64%;top:13px;width:38px;height:38px;border-radius:50%;background:radial-gradient(circle at 45% 45%,#FFFFFF,#FFF6D0 55%,#FFE8A0);animation:np_corona 12s linear infinite;z-index:1}
.nsp .ecl-moon{position:absolute;top:12px;width:40px;height:40px;border-radius:50%;background:radial-gradient(circle at 60% 40%,#1A1E2E,#05060C);animation:np_moonx 12s linear infinite,np_moonop 12s linear infinite;z-index:1}
.nsp .ecl-name{animation:np_namecol 12s linear infinite}
.nsp .ecl-sub{animation:np_subcol 12s linear infinite}
@keyframes np_moonglow{0%,100%{filter:drop-shadow(0 0 6px rgba(200,225,255,.55))}50%{filter:drop-shadow(0 0 12px rgba(200,225,255,.85))}}
.nsp .ms-moon{animation:np_moonglow 5s ease-in-out infinite}
@keyframes np_shine{0%{transform:translateX(-120%)}60%,100%{transform:translateX(220%)}}
.nsp .gold-sweep{background:linear-gradient(100deg,transparent 30%,rgba(255,240,190,.75) 50%,transparent 70%);width:40%;animation:np_shine 4.5s ease-in-out infinite}