/* ===== Name Styles (2026.10.22a) ===== */

/* >_ CREATOR tag: terminal line with the glitch flicker */
.nl-creator{display:inline-flex;align-items:center;gap:4px;vertical-align:middle;margin-left:8px;
  font-family:var(--tech);font-weight:700;font-size:10px;letter-spacing:2px;line-height:1.3;white-space:nowrap;
  color:var(--cyan);background:rgba(0,240,255,.08);border-left:3px solid var(--cyan);padding:3px 8px}
.nl-creator .cr-w{color:var(--volt);position:relative}
.nl-creator .cr-w::before,.nl-creator .cr-w::after{content:attr(data-t);position:absolute;inset:0;opacity:0;pointer-events:none}
.nl-creator .cr-w::before{color:var(--mag);animation:crGlitch 3.2s steps(1) infinite}
.nl-creator .cr-w::after{color:var(--cyan);animation:crGlitch 3.2s steps(1) infinite .08s}
.nl-creator .cr-cur{display:inline-block;width:6px;height:10px;background:var(--cyan);animation:crBlink 1s steps(1) infinite}
.nl-creator.s{font-size:7px;letter-spacing:1.5px;padding:1px 5px;margin-left:6px;border-left-width:2px;gap:3px}
.nl-creator.s .cr-cur{width:4px;height:7px}
/* on a chat line the name tag is already a tilted box, so sit flat inside it */
.tag .nl-creator{margin:0 2px 0 6px;transform:none}
/* profile titles are big, so the tag drops onto its own line under the name */
#personName .nl-creator,#profName .nl-creator{display:flex;width:max-content;margin:6px 0 0}
#personName,#profName{overflow:visible}
@keyframes crGlitch{0%,90%,100%{opacity:0;transform:none}91%{opacity:.9;transform:translate(-2px,0)}93%{opacity:.9;transform:translate(2px,-1px)}95%{opacity:0}}
@keyframes crBlink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.nl-creator .cr-w::before,.nl-creator .cr-w::after,.nl-creator .cr-cur{animation:none}}
/* Look tab: Name style picker */
.ns-types{width:100%;min-width:0;max-width:100%;align-self:stretch;display:flex;gap:6px;overflow-x:auto;padding:2px 2px 8px;scrollbar-width:none}
.ns-types::-webkit-scrollbar{display:none}
.ns-tab{flex:none;font-family:var(--tech);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--muted);background:var(--night);border:2px solid var(--plum);padding:7px 12px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%)}
.ns-tab.on{color:var(--night);background:var(--cyan);border-color:var(--cyan)}

.ns-grid{width:100%;align-self:stretch;display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;margin:4px 0 14px}
.ns-tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-height:56px;
  padding:10px;text-align:left;color:var(--white);background:rgba(20,10,58,.75);border:2px solid var(--plum)}
.ns-tile.on{border-color:var(--volt);box-shadow:0 0 0 1px var(--volt),0 0 14px rgba(243,255,58,.25)}
.ns-tile.on::after{content:"✓ ON";position:absolute;top:6px;right:8px;font-family:var(--tech);font-size:8px;letter-spacing:1px;color:var(--volt)}
.ns-name{font-weight:700;font-size:15px;line-height:1.1}
.ns-lock{font-family:var(--tech);font-size:8px;letter-spacing:1.5px;color:var(--cyan);border-left:2px solid var(--cyan);padding:1px 5px;background:rgba(0,240,255,.08)}
.ns-tile.locked{opacity:.55}
.ns-tile.locked .ns-name{color:var(--muted)}

/* Name fonts: one class per font, used in the picker now and on names later */
.ns-pv{font-size:19px;line-height:1.25;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:2px 0}
.nsf-default{font-family:var(--body);font-weight:700;color:var(--nsc,var(--white))}
.nsf-arcade{font-family:"Press Start 2P",monospace;font-size:.62em;color:var(--nsc,#F3FF3A)}
.nsf-terminal{font-family:VT323,monospace;font-size:1.2em;color:var(--nsc,#39FF9A);text-shadow:0 0 6px color-mix(in srgb,var(--nsc,#39FF9A) 50%,transparent)}
.nsf-racer{font-family:Audiowide,sans-serif;font-style:italic;color:var(--nsc,#00F0FF)}
.nsf-comic{font-family:"Comic Neue",cursive;font-weight:700;color:var(--nsc,#FFE66D)}
.nsf-billboard{font-family:Bungee,sans-serif;color:var(--nsc,#FF8A3D)}
.nsf-marker{font-family:"Permanent Marker",cursive;color:var(--nsc,#F4F7FF)}
.nsf-script{font-family:Pacifico,cursive;color:var(--nsc,#FF7AD9)}
.nsf-creep{font-family:Creepster,cursive;letter-spacing:1px;color:var(--nsc,#9DFF4A)}
.nsf-prism,.nsf-prismflow{font-family:Righteous,sans-serif;-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 6px rgba(0,240,255,.35));
  background-image:linear-gradient(100deg,#FF4FD8 0%,#FF8A3D 20%,#F3FF3A 38%,#39FF9A 56%,#00F0FF 74%,#7A5CFF 100%)}
.nsf-prismflow{background-image:linear-gradient(100deg,#FF4FD8,#FF8A3D,#F3FF3A,#39FF9A,#00F0FF,#7A5CFF,#FF4FD8);background-size:200% 100%;animation:nsPrism 3s linear infinite}
.nsf-headbang{display:inline-block;font-family:"Metal Mania",cursive;color:var(--nsc,#E8E8F0);text-shadow:0 0 2px #FF3B3B,2px 2px 0 #5A0000;transform-origin:20% 90%;animation:nsBang 1.1s ease-in-out infinite}
.nsf-fireice{position:relative;display:inline-block;font-family:"Russo One",sans-serif;letter-spacing:1px;line-height:1.1;vertical-align:bottom}
/* Fire & Ice: lava rock on one side, ice crystal on the other, a white-hot seam fighting back and forth */
.nsf-fireice .fi-fire{position:relative;display:block;animation:nsFiFire 3.4s ease-in-out infinite}
.nsf-fireice .fi-ice{position:absolute;inset:0;animation:nsFiIce 3.4s ease-in-out infinite}
/* the glow is its own layer: a glow filter on the textured text would light up a whole box on phones */
.nsf-fireice .fi-g{position:absolute;inset:0;color:transparent;pointer-events:none}
.nsf-fireice .fi-fire .fi-g{text-shadow:0 0 4px rgba(255,90,0,.9),0 0 10px rgba(255,60,0,.45);animation:nsEmber 1.4s ease-in-out infinite}
.nsf-fireice .fi-ice .fi-g{text-shadow:0 0 5px rgba(80,210,255,.85)}
.nsf-fireice .fi-t{position:relative;color:transparent;-webkit-background-clip:text;background-clip:text}
.nsf-fireice .fi-fire .fi-t{-webkit-text-stroke:1px #FF5A00;
  background:repeating-linear-gradient(62deg,transparent 0 6px,#FF4A00 6px 7.5px,transparent 7.5px 15px),repeating-linear-gradient(-38deg,transparent 0 8px,#FFB000 8px 9px,transparent 9px 18px),radial-gradient(circle at 30% 40%,#4A3B36,#1C1513 70%);
  -webkit-background-clip:text;background-clip:text;animation:nsLava 4s linear infinite}
.nsf-fireice .fi-ice .fi-t{-webkit-text-stroke:1px #CFF7FF;
  background:linear-gradient(135deg,#F2FEFF 0 16%,#9BE8FF 16% 31%,#FFFFFF 31% 37%,#45BDFF 37% 55%,#D6F8FF 55% 63%,#1F7BFF 63% 80%,#EAFDFF 80%) 0 0/22px 34px,linear-gradient(45deg,rgba(255,255,255,.55) 0 30%,transparent 30% 70%,rgba(255,255,255,.35) 70%) 0 0/14px 20px;
  -webkit-background-clip:text;background-clip:text}
.nsf-fireice .fi-seam{position:absolute;top:-6%;bottom:-6%;width:2px;margin-left:-1px;background:linear-gradient(180deg,transparent,#FFFFFF 20%,#FFFFFF 80%,transparent);box-shadow:0 0 8px #FFFFFF,-4px 0 10px #FF6A00,4px 0 10px #4FD8FF;animation:nsFiSeam 3.4s ease-in-out infinite}
@keyframes nsFiFire{0%,100%{clip-path:inset(-20% 62% -20% -20%)}22%{clip-path:inset(-20% 38% -20% -20%)}30%{clip-path:inset(-20% 44% -20% -20%)}52%{clip-path:inset(-20% 22% -20% -20%)}60%{clip-path:inset(-20% 30% -20% -20%)}78%{clip-path:inset(-20% 70% -20% -20%)}}
@keyframes nsFiIce{0%,100%{clip-path:inset(-20% -20% -20% 38%)}22%{clip-path:inset(-20% -20% -20% 62%)}30%{clip-path:inset(-20% -20% -20% 56%)}52%{clip-path:inset(-20% -20% -20% 78%)}60%{clip-path:inset(-20% -20% -20% 70%)}78%{clip-path:inset(-20% -20% -20% 30%)}}
@keyframes nsFiSeam{0%,100%{left:38%}22%{left:62%}30%{left:56%}52%{left:78%}60%{left:70%}78%{left:30%}}
@keyframes nsEmber{0%,100%{text-shadow:0 0 4px rgba(255,90,0,.9),0 0 10px rgba(255,60,0,.45)}50%{text-shadow:0 0 7px rgba(255,140,0,1),0 0 16px rgba(255,60,0,.7)}}
@keyframes nsLava{to{background-position:30px 12px,-24px 18px,0 0}}
.nsf-neontube{font-family:Monoton,cursive;font-size:.85em;color:var(--nsc,#FF4FD8);text-shadow:0 0 6px var(--nsc,#FF4FD8),0 0 18px var(--nsc,#FF4FD8);animation:nsFlicker 3.2s infinite}
.nsf-glitch{display:inline-block;font-family:"Rubik Glitch",sans-serif;color:var(--nsc,#F4F7FF);text-shadow:3px 0 #FF2E88,-3px 0 #00F0FF;animation:nsGlitch 2.4s steps(1,end) infinite}
@keyframes nsPrism{to{background-position:200% 50%}}
@keyframes nsBang{0%,40%,80%,100%{transform:none}20%,60%{transform:rotate(-7deg) translateY(4px)}}
@keyframes nsFlicker{0%,46%,50%,74%,100%{opacity:1}48%{opacity:.55}72%{opacity:.8}}
@keyframes nsGlitch{0%,12%,49%,81%,100%{transform:none;clip-path:none;text-shadow:3px 0 #FF2E88,-3px 0 #00F0FF}
  8%{transform:translate(-3px,1px) skewX(-8deg);text-shadow:-5px 0 #FF2E88,5px 0 #00F0FF}
  10%{transform:translate(4px,-1px);clip-path:polygon(0 12%,100% 12%,100% 60%,0 60%)}
  47%{transform:translate(-6px,0);clip-path:polygon(0 55%,100% 55%,100% 85%,0 85%)}
  79%{transform:scaleX(1.08);text-shadow:8px 0 #FF2E88,-8px 0 #00F0FF}}
@media (prefers-reduced-motion:reduce){[class*="nsf-"],[class*="nsf-"] *{animation:none!important}}
/* locked tiles: the label fades, but the preview stays bright enough to show off */
.ns-tile.locked{opacity:1}
.ns-tile.locked .ns-pv{opacity:.6}
.ns-tile.locked .ns-name{color:var(--muted)}
/* fonts on chat names: a touch bigger than the time, and Arcade/Neon Tube sized to fit the tag */
.tag .nm-name[class*="nsf-"]{font-size:1.05em;line-height:1}
.tag .nm-name.nsf-arcade{font-size:.8em}
.tag .nm-name.nsf-neontube{font-size:1em}
/* fonts on big profile names: the white title plate turns dark so every font colour reads */
#personName.ns-hasfont{background:var(--night);box-shadow:6px 6px 0 var(--mag),inset 0 0 0 2px var(--plum);text-transform:none;padding:6px 16px 2px}
#personName .nl-creator{background:var(--night)}
#profName .ns-nm[class*="nsf-"]{font-size:1.5em}
/* the Name style box: closed it's one tidy row, open it shows the picker */
.ns-box{width:100%;max-width:100%;min-width:0;overflow:hidden;align-self:stretch;text-align:left;margin:6px 0 4px;border:2px solid var(--plum);background:rgba(7,4,26,.6);padding:0 8px}
.ns-box[open]{padding-bottom:4px;border-color:var(--cyan)}
.ns-box>summary{list-style:none;display:flex;align-items:center;gap:10px;padding:12px 2px;cursor:pointer}
.ns-box>summary::-webkit-details-marker{display:none}
.ns-box>summary::after{content:"▸";flex:none;color:var(--cyan);font-size:14px;transition:transform .2s}
.ns-box[open]>summary::after{transform:rotate(90deg)}
.ns-sum-t{flex:none;white-space:nowrap;font-family:var(--tech);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--volt)}
.ns-sum-cur{flex:1;min-width:0;text-align:right;font-size:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ns-sum-cur .nsf-arcade{font-size:.6em}
/* on chat lines space is tight: the creator tag shrinks to just >_▮ (the full CREATOR shows on profiles and member lists) */
.tag .nl-creator .cr-w{display:none}
.tag .nl-creator{padding:1px 5px 1px 4px;gap:2px}

/* font colour: swatches + any colour */
.ns-color{width:100%;align-self:stretch;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 12px}
.ns-color .lbl{font-family:var(--tech);font-size:10px;letter-spacing:1.5px;color:var(--muted);text-transform:uppercase;margin-right:2px}
.ns-sw{width:30px;height:30px;padding:0;border:2px solid var(--plum);background:var(--c);clip-path:polygon(0 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%)}
.ns-sw.on{border-color:var(--white);box-shadow:inset 0 0 0 2px var(--night)}
.ns-sw.def{background:conic-gradient(from 45deg,var(--night) 0 25%,var(--plum) 0 50%,var(--night) 0 75%,var(--plum) 0);display:grid;place-items:center;color:var(--white);font-size:11px;font-weight:700}
.ns-sw.any{position:relative;background:conic-gradient(#FF4FD8,#FF8A3D,#F3FF3A,#39FF9A,#00F0FF,#7A5CFF,#FF4FD8);overflow:hidden}
.ns-sw.any input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.ns-cnote{width:100%;font-size:13px;color:var(--muted)}
/* custom colour: preview first, then save */
.ns-cdraft{display:flex;align-items:center;gap:8px;flex-basis:100%}
.ns-cchip{width:22px;height:22px;border:2px solid var(--white)}
.ns-csave,.ns-cundo{font-family:var(--tech);font-size:10px;letter-spacing:1.5px;padding:7px 12px;border:2px solid var(--cyan);clip-path:polygon(0 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%)}
.ns-csave{background:var(--cyan);color:var(--night)}
.ns-cundo{background:var(--night);color:var(--muted);border-color:var(--plum)}
/* tabs that aren't built yet */
.ns-soon{grid-column:1/-1;margin:0;padding:10px 12px;font-size:14px;color:var(--muted);border-left:3px solid var(--volt);background:rgba(243,255,58,.06)}

/* chat name tag: long names shrink with "…" so the time always stays visible */
.msg .tag{display:inline-flex;align-items:center;max-width:100%;min-width:0;box-sizing:border-box;overflow:hidden}
.msg .tag>*{flex:none}
.msg .tag>.nm-name{flex:0 1 auto;min-width:2.5em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg .tag>.nm-name.nsf-fireice{overflow:visible}

/* fonts in member + friend lists */
.mname .nm-name,.cname .nm-name{font-size:1.05em;line-height:1.1}
.mname .nm-name.nsf-arcade,.cname .nm-name.nsf-arcade{font-size:.7em}
.mname .nm-name.nsf-neontube,.cname .nm-name.nsf-neontube{font-size:.9em}
/* "Theme & colors" was styled like a big header; make it a row button that matches the Name style box */
.sheet #openTheme{width:100%;align-self:stretch;justify-self:stretch;display:flex;align-items:center;gap:10px;text-align:left;margin:6px 0 2px;padding:14px 10px!important;
  border:2px solid var(--plum)!important;background:rgba(7,4,26,.6)!important;transform:none!important;box-shadow:none!important;clip-path:none!important;
  font-family:var(--tech)!important;font-size:11px!important;font-weight:700;letter-spacing:1.5px;color:var(--volt)!important;text-transform:uppercase;text-shadow:none}
.sheet #openTheme::before{display:none}
.sheet #openTheme::after{content:"▸";margin-left:auto;color:var(--cyan);font-size:14px;position:static;background:none;transform:none;inset:auto}
.sheet #openTheme:hover,.sheet #openTheme:focus-visible{border-color:var(--cyan)!important}