/* Public vanity profile. Every user-controlled value arrives as a CSS custom
   property set on .np-root, so the stylesheet itself stays static. */

.np-font-Default   { --np-font: 'Inter', system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
.np-font-Rounded   { --np-font: 'Segoe UI Variable Display', 'Trebuchet MS', 'Avenir Next', Verdana, system-ui, sans-serif; }
.np-font-Serif     { --np-font: Georgia, 'Times New Roman', Times, serif; }
.np-font-Elegant   { --np-font: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif; }
.np-font-Mono      { --np-font: 'JetBrains Mono', Consolas, 'SF Mono', ui-monospace, 'Courier New', monospace; }
.np-font-Condensed { --np-font: 'Arial Narrow', 'Roboto Condensed', 'Liberation Sans Narrow', Impact, sans-serif; }
/* Stacks that resolve on real machines — no webfont downloads, so picking one
   always produces a visible change rather than silently falling back. */
.np-font-Display     { --np-font: 'Bahnschrift', 'Franklin Gothic Medium', 'Arial Black', Impact, sans-serif; }
.np-font-Typewriter  { --np-font: 'Courier New', Courier, 'Nimbus Mono PS', monospace; }
.np-font-Handwritten { --np-font: 'Segoe Script', 'Bradley Hand', 'Brush Script MT', 'Comic Sans MS', cursive; }
.np-font-Wide        { --np-font: 'Verdana', 'DejaVu Sans', Tahoma, Geneva, sans-serif; letter-spacing: .01em; }

html, body { height: 100%; }

.np-root {
  --np-radius: 20px;
  --np-glow: 40;
  min-height: 100vh;
  margin: 0;
  font-family: var(--np-font);
  font-size: var(--np-fsize, 16px);
  color: var(--np-text, #f2f2f5);
  background: var(--np-bg, #050506);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 18px 96px;
  position: relative;
  overflow-x: hidden;
}

/* cursor styles */
.np-cur-pointer, .np-cur-pointer * { cursor: pointer; }
.np-cur-crosshair, .np-cur-crosshair * { cursor: crosshair; }
.np-cur-none, .np-cur-none * { cursor: none; }

/* ------------------------------------------------------------- background */

.np-bg-layer {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}

/* Blurring an element reveals its edges, so the layer sits slightly past the
   viewport. Harmless at zero blur, which is why it is not conditional. */
.np-bg-layer {
  filter: blur(var(--np-bg-blur, 0px));
  transform: scale(1.06);
}
.np-bg-layer video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.np-bg-scrim {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: rgba(0, 0, 0, var(--np-bg-dim, .35));
}

/* ----------------------------------------------------------------- card */

.np-card {
  position: relative; z-index: 2;
  width: 100%; max-width: 430px;
  border-radius: var(--np-radius);
  background: color-mix(in srgb, #0d0d12 calc(var(--np-card-op, .72) * 100%), transparent);
  backdrop-filter: blur(var(--np-blur, 18px)) saturate(1.25);
  -webkit-backdrop-filter: blur(var(--np-blur, 18px)) saturate(1.25);
  overflow: visible;
  text-align: var(--np-align, center);
}
.np-layout-wide .np-card { max-width: 640px; }
.np-layout-compact .np-card { max-width: 372px; }

.np-card.has-border { border: 1px solid var(--np-border, #ffffff1a); }
.np-card.has-shadow { box-shadow: 0 24px 70px -24px #000000d9; }
.np-card.has-glow {
  box-shadow:
    0 24px 70px -24px #000000d9,
    0 0 calc(var(--np-glow) * 1.1px) calc(var(--np-glow) * -0.35px)
      color-mix(in srgb, var(--np-accent) calc(var(--np-glow) * 1%), transparent);
}

.np-card-inner { padding: 22px; }
.np-layout-compact .np-card-inner { padding: 18px; }

/* banner + avatar */
.np-banner {
  height: 132px; width: 100%;
  border-radius: var(--np-radius) var(--np-radius) 0 0;
  background-size: cover; background-position: center;
  background-color: color-mix(in srgb, var(--np-accent) 22%, #0a0a0e);
  position: relative;
}
.np-banner::after {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, transparent 35%, #0000004d);
}
.np-has-banner .np-card-inner { padding-top: 0; }

.np-avatar-wrap {
  display: flex; justify-content: var(--np-justify, center);
  margin-top: -42px; margin-bottom: 12px; position: relative; z-index: 3;
}
.np-no-banner .np-avatar-wrap { margin-top: 4px; }
.np-avatar {
  width: 92px; height: 92px; border-radius: 50%; object-fit: cover;
  border: 3px solid color-mix(in srgb, var(--np-accent) 70%, #ffffff2e);
  background: #14141a;
  box-shadow: 0 0 26px -6px color-mix(in srgb, var(--np-accent) 60%, transparent);
}
.np-layout-compact .np-avatar { width: 76px; height: 76px; }
.np-avatar-fb {
  display: grid; place-items: center; font-size: 34px; font-weight: 700; color: #fff;
  background: linear-gradient(140deg, var(--np-accent), #4dd6ff);
}
.np-online-dot {
  position: absolute; width: 17px; height: 17px; border-radius: 50%;
  border: 3px solid #0d0d12; background: #6b6b78;
  transform: translate(-22px, 68px);
}
.np-layout-compact .np-online-dot { transform: translate(-19px, 56px); }
.np-online-dot.on { background: #34d399; box-shadow: 0 0 10px #34d399cc; }

/* identity */
.np-name-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  justify-content: var(--np-justify, center); margin-bottom: 3px;
}
.np-name {
  font-size: 1.4em; font-weight: 700; letter-spacing: -.02em; line-height: 1.2;
  overflow-wrap: anywhere;
}
.np-handle {
  font-size: .85em; color: color-mix(in srgb, var(--np-text) 58%, transparent);
  margin-bottom: 10px;
}
.np-bio {
  font-size: .93em; line-height: 1.6;
  color: color-mix(in srgb, var(--np-text) 84%, transparent);
  margin: 12px 0 16px; overflow-wrap: anywhere;
}

/* social icon row */
.np-socials {
  display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 16px;
  justify-content: var(--np-justify, center);
}
.np-social {
  width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--np-btn) calc(var(--np-btn-op, 1) * 100%), transparent);
  border: 1px solid var(--np-border, #ffffff1a);
  color: var(--np-text);
  transition: transform .18s cubic-bezier(.2,.9,.3,1), border-color .18s, box-shadow .18s, color .18s;
}
.np-social svg { width: 18px; height: 18px; fill: currentColor; }
.np-social:hover {
  transform: translateY(-3px);
  color: var(--np-accent);
  border-color: color-mix(in srgb, var(--np-accent) 55%, transparent);
  box-shadow: 0 8px 20px -10px var(--np-accent);
}

/* link buttons */
.np-links { display: grid; gap: 9px; }
.np-layout-wide .np-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.np-link {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 15px;
  background: color-mix(in srgb, var(--np-btn) calc(var(--np-btn-op, 1) * 100%), transparent);
  border: 1px solid var(--np-border, #ffffff1a);
  border-radius: calc(var(--np-radius) * .55);
  color: var(--np-text); font-size: .93em; font-weight: 550;
  transition: transform .18s cubic-bezier(.2,.9,.3,1), border-color .18s, box-shadow .18s, background .18s;
  text-align: left;
}
.np-btn-pill .np-link { border-radius: 999px; }
.np-btn-square .np-link { border-radius: 4px; }
.np-btn-outline .np-link { background: transparent; border-color: color-mix(in srgb, var(--np-accent) 45%, transparent); }
.np-link:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--np-accent) 60%, transparent);
  box-shadow: 0 10px 24px -14px var(--np-accent);
}
.np-link .li { width: 19px; height: 19px; fill: currentColor; flex: none; opacity: .9; }
.np-link .lt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-link .lg { opacity: .35; width: 14px; height: 14px; fill: currentColor; flex: none; }

/* footer meta */
.np-meta {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  justify-content: var(--np-justify, center);
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--np-text) 10%, transparent);
  font-size: .74em; color: color-mix(in srgb, var(--np-text) 46%, transparent);
}
.np-meta .m { display: inline-flex; align-items: center; gap: 5px; }
.np-meta svg { width: 12px; height: 12px; fill: currentColor; }

/* ----------------------------------------------------- discord presence */

.np-discord {
  display: flex; align-items: center; gap: 10px; text-align: left;
  padding: 9px 12px; margin: 0 0 15px;
  border-radius: calc(var(--np-radius) * .5);
  background: color-mix(in srgb, var(--np-btn) calc(var(--np-btn-op, 1) * 100%), transparent);
  border: 1px solid var(--np-border, #ffffff1a);
}
.np-dc-avatar { position: relative; flex: none; }
.np-dc-avatar img, .np-dc-fallback {
  width: 36px; height: 36px; border-radius: 50%; display: block; object-fit: cover;
  background: #5865f2; color: #fff; font-weight: 700; font-size: 15px;
  display: grid; place-items: center;
}
.np-dc-dot {
  position: absolute; right: -1px; bottom: -1px;
  width: 12px; height: 12px; border-radius: 50%;
  border: 2.5px solid color-mix(in srgb, var(--np-btn) 100%, #0d0d12);
}
.np-dc-info { min-width: 0; flex: 1; }
.np-dc-name {
  font-size: .82em; font-weight: 640; display: flex; align-items: baseline; gap: 7px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.np-dc-status { font-size: .78em; font-weight: 550; }
.np-dc-line {
  font-size: .74em; opacity: .68; margin-top: 1px;
  display: flex; align-items: center; gap: 5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.np-dc-ic { width: 11px; height: 11px; fill: currentColor; flex: none; }

/* --------------------------------------------------------- text effects */

.np-glow-text .np-name {
  text-shadow: 0 0 14px color-mix(in srgb, var(--np-accent) 70%, transparent),
               0 0 34px color-mix(in srgb, var(--np-accent) 40%, transparent);
}

.np-type { min-height: 1.6em; }
.np-caret {
  display: inline-block; margin-left: 1px; font-weight: 300;
  color: var(--np-accent); animation: np-blink 1s steps(2, start) infinite;
}
@keyframes np-blink { to { visibility: hidden; } }

/* ------------------------------------------------------------ particles */

.np-particles {
  position: fixed; inset: 0; z-index: 1;
  pointer-events: none; width: 100%; height: 100%;
}

/* --------------------------------------------------------------- music */

.np-music {
  position: fixed; left: 16px; bottom: 16px; z-index: 20;
  display: flex; align-items: center; gap: 11px;
  padding: 9px 15px 9px 9px; border-radius: 15px;
  background: #0d0d12e0; border: 1px solid var(--np-border, #ffffff1a);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 16px 40px -18px #000000e6;
  max-width: calc(100vw - 32px);
}
.np-music-cover {
  width: 40px; height: 40px; border-radius: 10px; object-fit: cover; flex: none;
  background: linear-gradient(140deg, var(--np-accent), #4dd6ff);
  display: grid; place-items: center;
}
.np-music-cover svg { width: 17px; height: 17px; fill: #ffffffd9; }
.np-music-info { min-width: 0; max-width: 168px; }
.np-music-title { font-size: 12.5px; font-weight: 620; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-music-artist { font-size: 11px; opacity: .58; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-music-btn {
  width: 34px; height: 34px; border-radius: 50%; flex: none; cursor: pointer;
  display: grid; place-items: center; border: 0;
  background: var(--np-accent); color: #fff;
  transition: transform .16s, filter .16s;
}
.np-music-btn:hover { transform: scale(1.07); filter: brightness(1.12); }
.np-music-btn svg { width: 15px; height: 15px; fill: currentColor; }
.np-vol {
  -webkit-appearance: none; appearance: none; width: 62px; height: 3px;
  background: #ffffff26; border-radius: 99px; outline: none; cursor: pointer;
}
.np-vol::-webkit-slider-thumb {
  -webkit-appearance: none; width: 11px; height: 11px; border-radius: 50%;
  background: var(--np-text); cursor: pointer;
}
.np-vol::-moz-range-thumb { width: 11px; height: 11px; border: 0; border-radius: 50%; background: var(--np-text); }

/* click-to-enter overlay (browsers block autoplay until a gesture) */
.np-enter {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  background: #05050699; backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  cursor: pointer; border: 0; width: 100%; font: inherit; color: var(--np-text);
  animation: np-fade .3s ease;
}
.np-enter span {
  padding: 12px 26px; border-radius: 99px;
  border: 1px solid var(--np-border, #ffffff26); background: #0d0d12cc;
  font-size: 14px; letter-spacing: .04em; text-transform: uppercase; font-weight: 600;
  transition: transform .2s, border-color .2s;
}
.np-enter:hover span { transform: scale(1.04); border-color: var(--np-accent); }

/* ---------------------------------------------------------- animations */

@keyframes np-fade { from { opacity: 0; } }
@keyframes np-rise { from { opacity: 0; transform: translateY(22px); } }
@keyframes np-zoom { from { opacity: 0; transform: scale(.94); } }

.np-anim-fade .np-card { animation: np-fade .55s ease both; }
.np-anim-rise .np-card { animation: np-rise .55s cubic-bezier(.2,.9,.3,1) both; }
.np-anim-zoom .np-card { animation: np-zoom .5s cubic-bezier(.2,.9,.3,1) both; }

.np-anim-fade .np-link, .np-anim-rise .np-link, .np-anim-zoom .np-link,
.np-anim-fade .np-social, .np-anim-rise .np-social, .np-anim-zoom .np-social {
  animation: np-rise .45s cubic-bezier(.2,.9,.3,1) both;
  animation-delay: calc(var(--i, 0) * 55ms + 180ms);
}

/* owner ribbon shown only to the profile owner */
.np-owner-bar {
  position: fixed; top: 14px; right: 14px; z-index: 40;
  display: flex; gap: 7px; align-items: center;
  padding: 6px 8px 6px 13px; border-radius: 99px;
  background: #0d0d12d9; border: 1px solid #ffffff1f;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font-size: 12.5px; color: #a1a1ad;
}
.np-owner-bar a {
  padding: 4px 11px; border-radius: 99px; background: #ffffff12; color: #f2f2f5;
  font-size: 12.5px; font-weight: 560; transition: background .15s;
}
.np-owner-bar a:hover { background: #ffffff1f; }

@media (max-width: 560px) {
  .np-root { padding: 20px 14px 92px; }
  .np-layout-wide .np-links { grid-template-columns: minmax(0, 1fr); }
  .np-music { left: 12px; right: 12px; bottom: 12px; }
  .np-music-info { max-width: none; flex: 1; }
  .np-owner-bar { top: 10px; right: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .np-card, .np-link, .np-social { animation: none !important; }
  .np-caret { animation: none !important; }
  .np-particles { display: none !important; }
}

/* =====================================================================
   Second customisation batch — button styles, animations, cursors, grid
   ===================================================================== */

/* ---------------------------------------------------------- button styles */

/* Frosted, picking up whatever is behind the card. */
.np-btn-glass .np-link {
  background: color-mix(in srgb, var(--np-btn) calc(var(--np-btn-op, 1) * 55%), transparent);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border-color: color-mix(in srgb, #ffffff 22%, transparent);
}

.np-btn-gradient .np-link {
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--np-accent) 30%, transparent),
      color-mix(in srgb, var(--np-btn) calc(var(--np-btn-op, 1) * 100%), transparent) 65%);
  border-color: color-mix(in srgb, var(--np-accent) 38%, transparent);
}
.np-btn-gradient .np-link:hover {
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--np-accent) 46%, transparent),
      color-mix(in srgb, var(--np-btn) calc(var(--np-btn-op, 1) * 100%), transparent) 70%);
}

.np-btn-shadow .np-link {
  border-color: transparent;
  box-shadow: 0 4px 0 0 color-mix(in srgb, var(--np-accent) 55%, transparent);
  transform: translateY(-1px);
}
.np-btn-shadow .np-link:hover {
  box-shadow: 0 2px 0 0 color-mix(in srgb, var(--np-accent) 70%, transparent);
  transform: translateY(1px);
}

/* No chrome at all until you hover it. */
.np-btn-minimal .np-link {
  background: transparent;
  border-color: transparent;
  border-bottom-color: color-mix(in srgb, var(--np-text) 14%, transparent);
  border-radius: 0;
}
.np-btn-minimal .np-link:hover {
  background: color-mix(in srgb, var(--np-text) 6%, transparent);
  border-bottom-color: color-mix(in srgb, var(--np-accent) 60%, transparent);
}

/* ------------------------------------------------------------- animations */

@keyframes np-slide { from { opacity: 0; transform: translateX(-26px); } }
@keyframes np-flip  { from { opacity: 0; transform: perspective(700px) rotateX(-32deg); } }
@keyframes np-blur  { from { opacity: 0; filter: blur(14px); } }
@keyframes np-bounce {
  0%   { opacity: 0; transform: translateY(-22px); }
  60%  { opacity: 1; transform: translateY(6px); }
  80%  { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}

.np-anim-slide  .np-card { animation: np-slide .5s cubic-bezier(.2,.9,.3,1) both; }
.np-anim-flip   .np-card { animation: np-flip .6s cubic-bezier(.2,.9,.3,1) both; }
.np-anim-blur   .np-card { animation: np-blur .6s ease both; }
.np-anim-bounce .np-card { animation: np-bounce .7s cubic-bezier(.3,1.3,.5,1) both; }

.np-anim-slide .np-link,  .np-anim-flip .np-link,
.np-anim-blur .np-link,   .np-anim-bounce .np-link,
.np-anim-slide .np-social, .np-anim-flip .np-social,
.np-anim-blur .np-social,  .np-anim-bounce .np-social {
  animation: np-rise .45s cubic-bezier(.2,.9,.3,1) both;
  animation-delay: calc(var(--i, 0) * 55ms + 180ms);
}

/* ---------------------------------------------------------------- cursors */

.np-cur-grab, .np-cur-grab * { cursor: grab; }
.np-cur-grab:active, .np-cur-grab *:active { cursor: grabbing; }
.np-cur-help, .np-cur-help * { cursor: help; }
.np-cur-text, .np-cur-text * { cursor: text; }

/* ----------------------------------------------------------- grid layout */

/* Buttons two-up, socials on one line. Falls back to a single column on a
   phone, where two columns would be unreadable. */
.np-layout-grid .np-card { max-width: 600px; }
.np-layout-grid .np-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.np-layout-grid .np-link { justify-content: center; text-align: center; }
.np-layout-grid .np-link .lg { display: none; }

@media (max-width: 560px) {
  .np-layout-grid .np-links { grid-template-columns: minmax(0, 1fr); }
  .np-layout-grid .np-link { justify-content: flex-start; text-align: left; }
}

/* --------------------------------------------------- member-since + share */

.np-since { opacity: .8; }

.np-share {
  margin-top: 14px; display: flex; justify-content: var(--np-justify, center);
}
.np-share button {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; font: inherit; font-size: 12.5px; cursor: pointer;
  color: color-mix(in srgb, var(--np-text) 72%, transparent);
  background: color-mix(in srgb, var(--np-btn) calc(var(--np-btn-op, 1) * 60%), transparent);
  border: 1px solid color-mix(in srgb, var(--np-text) 12%, transparent);
  border-radius: 99px;
  transition: color .16s, border-color .16s, background .16s;
}
.np-share button:hover {
  color: var(--np-text);
  border-color: color-mix(in srgb, var(--np-accent) 50%, transparent);
}
.np-share button svg { width: 13px; height: 13px; fill: currentColor; }
.np-share button.done { color: var(--np-accent); border-color: var(--np-accent); }

/* =====================================================================
   v2.0.0 — click-to-enter, page templates, richer link rows.
   ===================================================================== */

/* ------------------------------------------------------ click to enter */

/* Nothing scrolls while the splash is up, or the page can be read past it. */
body.np-has-splash { overflow: hidden; }
body.np-has-splash.np-entered { overflow: auto; }

.np-splash {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  cursor: pointer;
  background: color-mix(in srgb, var(--np-bg) 72%, transparent);
  backdrop-filter: blur(var(--np-splash-blur, 14px));
  -webkit-backdrop-filter: blur(var(--np-splash-blur, 14px));
  transition: opacity .5s ease, backdrop-filter .5s ease;
}

/* Fades out, then stops taking clicks. Removed from the DOM by the script
   afterwards so it can never come back. */
.np-splash.np-splash-gone {
  opacity: 0;
  pointer-events: none;
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
}

.np-splash-inner {
  text-align: center;
  padding: 24px;
  animation: np-splash-breathe 3.2s ease-in-out infinite;
}

.np-splash-text {
  font-size: clamp(26px, 6vw, 44px);
  font-weight: 600;
  letter-spacing: -.02em;
  color: var(--np-text);
  text-shadow: 0 0 calc(var(--np-glow, 40) * 0.6px) var(--np-accent);
}

.np-splash-sub {
  margin-top: 10px;
  font-size: clamp(12px, 2.4vw, 15px);
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .62;
  color: var(--np-text);
}

@keyframes np-splash-breathe {
  0%, 100% { transform: scale(1); opacity: .92; }
  50%      { transform: scale(1.035); opacity: 1; }
}

/* Keyboard users get a visible target. */
.np-splash:focus-visible {
  outline: 2px solid var(--np-accent);
  outline-offset: -6px;
}

/* ------------------------------------------------- richer link rows */

.np-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: 14px 0 2px;
  font-size: .78em;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .55;
  color: var(--np-text);
}
.np-section-head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: .25;
}
.np-links > .np-section-head:first-child { margin-top: 0; }

.np-link .lbody {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
  text-align: left;
}
/* .lt carries flex:1 for the old single-line row; inside the column body that
   would stretch it vertically instead of filling the row. */
.np-link .lbody .lt { flex: 0 0 auto; }

.np-link .ld {
  font-size: .78em;
  line-height: 1.35;
  opacity: .6;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.np-link .lthumb {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: calc(var(--np-radius) * .35);
  object-fit: cover;
  background: #ffffff0d;
}

.np-link-rich { padding-top: 10px; padding-bottom: 10px; }

/* Centre alignment still centres the row; only the two-line body stays
   left-aligned, because ragged descriptions under a centred title look broken. */
.np-root[style*="--np-align:center"] .np-link .lbody { text-align: left; }

@media (max-width: 420px) {
  .np-link .ld { font-size: .74em; }
  .np-link .lthumb { width: 30px; height: 30px; }
}

/* ===================================================================== */
/* Page templates.                                                       */
/*                                                                       */
/* LAYOUTS decide how tightly links pack inside the card. These decide    */
/* the shape of the page around it, so they only move structure — never   */
/* colours, fonts or effects, which stay the owner's choices.             */
/* ===================================================================== */

/* -------- spotlight: the avatar is the page, the card recedes ---------- */

.np-tpl-spotlight .np-card {
  background: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0 !important;
  box-shadow: none !important;
  max-width: 520px;
}
.np-tpl-spotlight .np-avatar { width: min(150px, 38vw); height: min(150px, 38vw); }
.np-tpl-spotlight .np-avatar-wrap { margin-bottom: 26px; }
.np-tpl-spotlight .np-name { font-size: 1.7em; }
.np-tpl-spotlight .np-card-inner { padding-top: 34px; }
.np-tpl-spotlight .np-link {
  background: color-mix(in srgb, var(--np-btn) 55%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* -------- hero: full-width banner header, avatar overlapping ---------- */

.np-tpl-hero .np-card { max-width: 640px; overflow: hidden; }
.np-tpl-hero .np-banner { height: 190px; }
.np-tpl-hero.np-has-banner .np-avatar-wrap { margin-top: -58px; }
.np-tpl-hero .np-avatar { width: 104px; height: 104px; border-width: 4px; }
.np-tpl-hero .np-card-inner { padding-top: 0; }
.np-tpl-hero .np-name { font-size: 1.5em; }

/* Two columns of links once there is room for them. */
@media (min-width: 620px) {
  .np-tpl-hero .np-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .np-tpl-hero .np-section-head { grid-column: 1 / -1; }
}

/* -------- sidebar: identity left, links right ------------------------- */

/*
 * The card's children are a flat list — there is no wrapper around "the
 * identity bit" to place as a unit. So column 1 takes them in source order and
 * the links block is pinned to column 1's first row, spanning far enough down
 * to clear whatever is above it.
 *
 * row-gap must be 0 for that to work: a span of N rows also multiplies the row
 * gap N times, which is what left a 600px hole under the links the first time.
 * Spacing comes back as margins on the items instead.
 */
@media (min-width: 860px) {
  .np-tpl-sidebar .np-card { max-width: 880px; }

  .np-tpl-sidebar .np-card-inner {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    column-gap: 36px;
    row-gap: 0;
    align-content: start;
    text-align: left;
  }

  .np-tpl-sidebar .np-card-inner > * { grid-column: 1; margin-bottom: 14px; }

  .np-tpl-sidebar .np-avatar-wrap,
  .np-tpl-sidebar .np-name-row,
  .np-tpl-sidebar .np-socials { justify-content: flex-start; }

  .np-tpl-sidebar .np-handle { margin-top: -8px; }

  /* Links own the right column from the top down. 30 rows is more than the
     card can ever have, and empty rows cost nothing now the gap is zero. */
  .np-tpl-sidebar .np-links {
    grid-column: 2;
    grid-row: 1 / span 30;
    align-self: start;
    margin-bottom: 0;
  }

  /* Meta and share stay under the identity rather than under the links, so
     neither column has to be as tall as the other. */
  .np-tpl-sidebar .np-meta { justify-content: flex-start; }
}

/* -------- terminal: framed like a console ----------------------------- */

.np-tpl-terminal .np-card {
  max-width: 620px;
  border-radius: 10px !important;
  border: 1px solid color-mix(in srgb, var(--np-accent) 40%, transparent) !important;
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
}
/* The title bar is drawn, not an element, so no markup changes per template. */
.np-tpl-terminal .np-card::before {
  content: "● ● ●";
  display: block;
  padding: 9px 14px;
  font-size: 11px;
  letter-spacing: .3em;
  color: color-mix(in srgb, var(--np-text) 45%, transparent);
  background: #00000040;
  border-bottom: 1px solid color-mix(in srgb, var(--np-accent) 25%, transparent);
}
.np-tpl-terminal .np-handle::before { content: "~/ "; opacity: .5; }
.np-tpl-terminal .np-link {
  border-radius: 6px !important;
  font-family: inherit;
}
.np-tpl-terminal .np-link .lt::before { content: "> "; opacity: .5; }
.np-tpl-terminal .np-section-head { letter-spacing: .2em; }
.np-tpl-terminal .np-avatar { border-radius: 8px; }

/* -------- reduced motion ---------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .np-splash-inner { animation: none; }
  .np-splash { transition: opacity .2s ease; }
}

/* --------------------------------------------------- featured link */

/*
 * One link, given the space of two. It sits above the sections rather than
 * inside them — the whole point is that it is not one of the list.
 */
.np-featured {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 18px;
  color: var(--np-text);
  border: 1px solid color-mix(in srgb, var(--np-accent) 45%, transparent);
  border-radius: calc(var(--np-radius) * .6);
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--np-accent) 18%, transparent),
      color-mix(in srgb, var(--np-btn) calc(var(--np-btn-op, 1) * 100%), transparent) 65%);
  transition: transform .18s cubic-bezier(.2, .9, .3, 1), border-color .18s, box-shadow .18s;
  text-align: left;
}
.np-featured:hover {
  transform: translateY(-2px);
  border-color: var(--np-accent);
  box-shadow: 0 8px 26px color-mix(in srgb, var(--np-accent) 22%, transparent);
}

.np-featured .nf-ic {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: calc(var(--np-radius) * .35);
  background: color-mix(in srgb, var(--np-accent) 22%, transparent);
}
.np-featured .nf-ic svg { width: 22px; height: 22px; fill: currentColor; }

.np-featured .nf-thumb {
  flex: none;
  width: 46px;
  height: 46px;
  object-fit: cover;
  border-radius: calc(var(--np-radius) * .35);
}

.np-featured .nf-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.np-featured .nf-title {
  font-size: 1.06em;
  font-weight: 650;
  letter-spacing: -.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.np-featured .nf-desc {
  font-size: .8em;
  line-height: 1.4;
  opacity: .68;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.np-featured .nf-go {
  flex: none;
  width: 16px;
  height: 16px;
  fill: currentColor;
  opacity: .5;
}

/* Grid layout packs links two-up; a featured link still spans the full width. */
.np-layout-grid .np-featured,
.np-layout-wide .np-featured,
.np-tpl-hero .np-featured { grid-column: 1 / -1; }

@media (max-width: 420px) {
  .np-featured { padding: 13px 14px; gap: 11px; }
  .np-featured .nf-ic, .np-featured .nf-thumb { width: 38px; height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .np-featured:hover { transform: none; }
}

/* --------------------------------------------- background sound toggle */

/*
 * Bottom-right, opposite the music widget so the two never collide on a
 * profile that has both.
 */
.np-bgsound {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 20;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  cursor: pointer;
  color: var(--np-text);
  border-radius: 50%;
  border: 1px solid var(--np-border, #ffffff1a);
  background: #0d0d12e0;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 12px 30px -14px #000000e6;
  transition: transform .16s cubic-bezier(.2, .9, .3, 1), border-color .16s, color .16s;
}
.np-bgsound:hover { transform: translateY(-2px); border-color: var(--np-accent); }
.np-bgsound:focus-visible { outline: 2px solid var(--np-accent); outline-offset: 2px; }

.np-bgsound svg { width: 19px; height: 19px; fill: currentColor; }

/* One icon at a time: crossed-out speaker while muted, plain while playing. */
.np-bgsound .np-bgs-on { display: none; }
.np-bgsound.on { color: var(--np-accent); border-color: color-mix(in srgb, var(--np-accent) 55%, transparent); }
.np-bgsound.on .np-bgs-off { display: none; }
.np-bgsound.on .np-bgs-on { display: block; }

/* The splash sits above it — the toggle is for after you are in. */
body.np-has-splash:not(.np-entered) .np-bgsound { opacity: 0; pointer-events: none; }

@media (max-width: 560px) {
  .np-bgsound { width: 38px; height: 38px; right: 12px; bottom: 12px; }
  /* The music bar goes full width on a phone, so lift the toggle above it. */
  body:has(.np-music) .np-bgsound { bottom: 74px; }
}

@media (prefers-reduced-motion: reduce) {
  .np-bgsound:hover { transform: none; }
}

/* =====================================================================
   v2.1.0 visual pack — accent gradients, animated names, link hovers,
   animated borders, custom scrollbar.

   Everything here is opt-in and every animation stops under
   prefers-reduced-motion, which is handled once at the bottom.
   ===================================================================== */

/* ------------------------------------------------------ accent gradient */

/*
 * --np-accent-2 always resolves — it falls back to the single accent — so
 * these rules are safe to write unconditionally. The class only decides
 * whether the gradient is actually shown.
 */
.np-accent-grad .np-avatar {
  border-color: transparent;
  background-image:
    linear-gradient(var(--np-bg), var(--np-bg)),
    linear-gradient(135deg, var(--np-accent), var(--np-accent-2));
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

.np-accent-grad .np-featured {
  border-color: transparent;
  background-image:
    linear-gradient(135deg,
      color-mix(in srgb, var(--np-accent) 18%, transparent),
      color-mix(in srgb, var(--np-accent-2) 18%, transparent)),
    linear-gradient(135deg, var(--np-accent), var(--np-accent-2));
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

.np-accent-grad .np-social:hover,
.np-accent-grad.np-btn-gradient .np-link {
  border-color: color-mix(in srgb, var(--np-accent-2) 55%, transparent);
}

/* ----------------------------------------------------- animated username */

/* Gradient and rainbow paint the glyphs themselves, so the text colour has to
   be transparent for the background to show through it. */
.np-name-gradient .np-name,
.np-name-rainbow .np-name,
.np-name-shine .np-name {
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.np-name-gradient .np-name {
  background-image: linear-gradient(100deg, var(--np-accent), var(--np-accent-2), var(--np-accent));
  background-size: 220% 100%;
  animation: np-name-sweep 5s ease-in-out infinite;
}

.np-name-rainbow .np-name {
  background-image: linear-gradient(100deg,
    #ff5f6d, #ffc371, #47e891, #4dabff, #a78bfa, #ff5f6d);
  background-size: 260% 100%;
  animation: np-name-sweep 6s linear infinite;
}

/* A single highlight passing over otherwise solid text. */
.np-name-shine .np-name {
  background-image: linear-gradient(100deg,
    var(--np-text) 0%, var(--np-text) 40%,
    var(--np-accent) 50%,
    var(--np-text) 60%, var(--np-text) 100%);
  background-size: 300% 100%;
  animation: np-name-sweep 4.5s ease-in-out infinite;
}

@keyframes np-name-sweep {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/*
 * Glitch draws two offset copies of the name from data-name. They are
 * aria-hidden by being pseudo-elements, so a screen reader still reads the name
 * exactly once.
 */
.np-name-glitch .np-name {
  position: relative;
  display: inline-block;
}
.np-name-glitch .np-name::before,
.np-name-glitch .np-name::after {
  content: attr(data-name);
  position: absolute;
  inset: 0;
  pointer-events: none;
  clip-path: inset(0 0 0 0);
}
.np-name-glitch .np-name::before {
  color: var(--np-accent);
  animation: np-glitch-a 2.6s steps(2, end) infinite;
}
.np-name-glitch .np-name::after {
  color: var(--np-accent-2);
  animation: np-glitch-b 2.6s steps(2, end) infinite;
}

/* Still for most of the cycle — a constant glitch is unreadable. */
@keyframes np-glitch-a {
  0%, 88%, 100% { transform: none; clip-path: inset(0 0 0 0); opacity: 0; }
  90% { transform: translate(-2px, -1px); clip-path: inset(0 0 62% 0); opacity: .9; }
  94% { transform: translate(2px, 1px); clip-path: inset(58% 0 0 0); opacity: .9; }
}
@keyframes np-glitch-b {
  0%, 88%, 100% { transform: none; clip-path: inset(0 0 0 0); opacity: 0; }
  92% { transform: translate(2px, 1px); clip-path: inset(0 0 55% 0); opacity: .75; }
  96% { transform: translate(-2px, 0); clip-path: inset(65% 0 0 0); opacity: .75; }
}

/* ------------------------------------------------------- link hovers */

/*
 * The base .np-link:hover lifts unconditionally. Picking a different hover has
 * to cancel that, or "glow" would be glow *and* lift — two effects when one was
 * chosen.
 */
.np-hov-glow .np-link:hover,
.np-hov-slide .np-link:hover,
.np-hov-shine .np-link:hover { transform: none; }

/* lift is the original behaviour and stays the default. */
.np-hov-lift .np-link:hover { transform: translateY(-2px); }

.np-hov-grow .np-link:hover { transform: scale(1.025); }

.np-hov-glow .np-link:hover {
  border-color: var(--np-accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--np-accent) 40%, transparent),
              0 6px 24px -6px color-mix(in srgb, var(--np-accent) 55%, transparent);
}

.np-hov-slide .np-link { position: relative; overflow: hidden; }
.np-hov-slide .np-link::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-101%);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--np-accent) 26%, transparent), transparent);
  transition: transform .32s cubic-bezier(.2, .9, .3, 1);
}
.np-hov-slide .np-link:hover::before { transform: none; }
.np-hov-slide .np-link > * { position: relative; }

.np-hov-shine .np-link { position: relative; overflow: hidden; }
.np-hov-shine .np-link::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, #ffffff26, transparent);
  transition: left .5s ease;
}
.np-hov-shine .np-link:hover::after { left: 115%; }
.np-hov-shine .np-link > * { position: relative; }

/* --------------------------------------------------- animated border */

/*
 * A conic gradient rotating behind the card, masked so only the border ring
 * shows. Painted on ::before rather than the card so it sits under the
 * content and never tints it.
 */
.np-border-anim .np-card { position: relative; }
.np-border-anim .np-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--np-spin, 0turn),
    var(--np-accent), var(--np-accent-2), var(--np-accent));
  -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, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: np-spin 6s linear infinite;
}

/* Animating a registered custom property is what makes the conic gradient
   rotate smoothly instead of snapping. */
@property --np-spin {
  syntax: '<angle>';
  initial-value: 0turn;
  inherits: false;
}

@keyframes np-spin {
  to { --np-spin: 1turn; }
}

/* ------------------------------------------------------- scrollbar */

.np-scroll { scrollbar-color: var(--np-accent) transparent; scrollbar-width: thin; }
.np-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.np-scroll::-webkit-scrollbar-track { background: transparent; }
.np-scroll::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 99px;
  background-clip: content-box;
  background-color: color-mix(in srgb, var(--np-accent) 70%, transparent);
}
.np-scroll::-webkit-scrollbar-thumb:hover {
  background-color: var(--np-accent);
}

/* ------------------------------------------------- reduced motion */

/*
 * Every animation above is decoration. Anyone who has asked their system for
 * less movement gets the static version — the gradients still show, they just
 * stop moving.
 */
@media (prefers-reduced-motion: reduce) {
  .np-name-gradient .np-name,
  .np-name-rainbow .np-name,
  .np-name-shine .np-name { animation: none; background-position: 50% 0; }

  .np-name-glitch .np-name::before,
  .np-name-glitch .np-name::after { animation: none; opacity: 0; }

  .np-border-anim .np-card::after { animation: none; }

  .np-hov-grow .np-link:hover,
  .np-hov-lift .np-link:hover { transform: none; }

  .np-hov-slide .np-link::before,
  .np-hov-shine .np-link::after { transition: none; }
}

/* =====================================================================
   v2.3.0 — location line, anonymous questions.
   ===================================================================== */

/* ------------------------------------------------------------ location */

.np-location {
  display: flex;
  align-items: center;
  gap: 5px;
  justify-content: var(--np-justify, center);
  margin: -4px 0 8px;
  font-size: .8em;
  color: color-mix(in srgb, var(--np-text) 62%, transparent);
  overflow-wrap: anywhere;
}
.np-location svg {
  flex: none;
  width: 12px;
  height: 12px;
  fill: var(--np-accent);
}

/* ------------------------------------------------- anonymous questions */

.np-ask {
  margin: 18px 0 0;
  padding: 14px;
  text-align: left;
  border: 1px solid var(--np-border, #ffffff1a);
  border-radius: calc(var(--np-radius) * .7);
  background: color-mix(in srgb, var(--np-btn) calc(var(--np-btn-op, 1) * 55%), transparent);
}

.np-ask-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  font-size: .88em;
  font-weight: 600;
  color: var(--np-text);
}
.np-ask-head svg {
  flex: none;
  width: 15px;
  height: 15px;
  fill: var(--np-accent);
}

.np-ask textarea {
  display: block;
  width: 100%;
  min-height: 76px;
  padding: 10px 11px;
  font: inherit;
  font-size: .85em;
  line-height: 1.5;
  color: var(--np-text);
  resize: vertical;
  background: color-mix(in srgb, var(--np-bg) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--np-text) 12%, transparent);
  border-radius: calc(var(--np-radius) * .45);
  transition: border-color .16s;
}
.np-ask textarea::placeholder { color: color-mix(in srgb, var(--np-text) 38%, transparent); }
.np-ask textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--np-accent) 65%, transparent);
}

.np-ask-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 9px;
}
.np-ask-count {
  font-size: .7em;
  color: color-mix(in srgb, var(--np-text) 42%, transparent);
}

.np-ask-send {
  padding: 8px 15px;
  font: inherit;
  font-size: .78em;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, var(--np-accent), var(--np-accent-2, var(--np-accent)));
  border: none;
  border-radius: 99px;
  transition: filter .16s, transform .16s;
}
.np-ask-send:hover { filter: brightness(1.12); }
.np-ask-send:active { transform: translateY(1px); }
.np-ask-send:disabled { opacity: .55; cursor: default; }

.np-ask-note {
  margin: 10px 0 0;
  font-size: .72em;
  line-height: 1.5;
  color: color-mix(in srgb, var(--np-text) 45%, transparent);
}
.np-ask-note.ok { color: var(--np-accent); }
.np-ask-note.err { color: #ff8080; }

/* --------------------------------------------------------- answered Q&A */

.np-qa { margin-top: 18px; text-align: left; }

.np-qa-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: .74em;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--np-text) 45%, transparent);
}
.np-qa-head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: color-mix(in srgb, var(--np-text) 12%, transparent);
}

.np-qa-item {
  padding: 12px 13px;
  margin-bottom: 9px;
  border: 1px solid var(--np-border, #ffffff1a);
  border-radius: calc(var(--np-radius) * .55);
  background: color-mix(in srgb, var(--np-btn) calc(var(--np-btn-op, 1) * 45%), transparent);
}
.np-qa-item:last-child { margin-bottom: 0; }

.np-qa-q {
  padding-left: 10px;
  font-size: .84em;
  line-height: 1.5;
  color: color-mix(in srgb, var(--np-text) 72%, transparent);
  border-left: 2px solid color-mix(in srgb, var(--np-accent) 60%, transparent);
  overflow-wrap: anywhere;
}
.np-qa-a {
  margin-top: 8px;
  font-size: .88em;
  line-height: 1.55;
  color: var(--np-text);
  overflow-wrap: anywhere;
}
.np-qa-when {
  margin-top: 7px;
  font-size: .68em;
  color: color-mix(in srgb, var(--np-text) 38%, transparent);
}

/* =====================================================================
   Halloween — profile decoration and the jumpscare
   ===================================================================== */

/* ------------------------------------------------------- profile decor */

/* Opt-in per profile, and deliberately light: two carved lanterns at the
   bottom corners and a web in the top left, none of which touch layout. */
.np-spooky::before,
.np-spooky::after {
  content: "";
  position: fixed;
  bottom: 8px;
  width: 54px;
  height: 54px;
  z-index: 3;
  opacity: .55;
  pointer-events: none;
  background: radial-gradient(circle at 50% 62%, #ff7518 0 42%, transparent 43%),
              radial-gradient(circle at 38% 46%, #1a0d00 0 8%, transparent 9%),
              radial-gradient(circle at 62% 46%, #1a0d00 0 8%, transparent 9%);
  filter: drop-shadow(0 0 14px #ff751880);
  animation: np-lantern 4.5s ease-in-out infinite;
}
.np-spooky::before { left: 14px; }
.np-spooky::after { right: 14px; animation-delay: -2.2s; }

@keyframes np-lantern {
  0%, 100% { opacity: .45; transform: translateY(0); }
  50%      { opacity: .68; transform: translateY(-5px); }
}

/* ---------------------------------------------------------- jumpscare */

/*
 * Deliberately not a strobe.
 *
 * Flashing is the part of a jumpscare that can actually hurt somebody, so
 * this is one scale-in and a short shake against a solid backdrop — startling
 * for a second, and safe for a reader with photosensitive epilepsy. The script
 * never shows it at all when the system asks for reduced motion.
 */
.np-scare {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: #05040a;
  animation: scare-in .16s steps(2, end) both, scare-shake .5s .16s ease-in-out;
}

.np-scare-face {
  position: relative;
  width: min(58vmin, 420px);
  height: min(58vmin, 420px);
  border-radius: 50% 50% 46% 46%;
  background: radial-gradient(circle at 42% 34%, #ff9a3c, #ff7518 44%, #8a3200 100%);
  box-shadow: 0 0 90px 20px #ff751866, inset 0 -20px 60px #00000080;
  animation: scare-lunge .5s .16s ease-out both;
}

/* pumpkin: triangular eyes and a jagged grin */
.sc-eye {
  position: absolute;
  top: 30%;
  width: 0;
  height: 0;
  border-left: 8vmin solid transparent;
  border-right: 8vmin solid transparent;
  border-bottom: 11vmin solid #12060f;
  filter: drop-shadow(0 0 6px #00000080);
}
.sc-eye-l { left: 12%; transform: rotate(8deg); }
.sc-eye-r { right: 12%; transform: rotate(-8deg); }

.sc-mouth {
  position: absolute;
  left: 16%;
  right: 16%;
  bottom: 18%;
  height: 16%;
  background: #12060f;
  clip-path: polygon(0 22%, 12% 0, 24% 30%, 38% 4%, 50% 32%, 62% 4%, 76% 30%,
                     88% 0, 100% 22%, 92% 100%, 8% 100%);
}

/* ghost: soft body, round eyes */
.np-scare[data-face="ghost"] .np-scare-face {
  border-radius: 50% 50% 14% 14% / 60% 60% 22% 22%;
  background: radial-gradient(circle at 42% 32%, #ffffff, #dcd8ff 46%, #8f88c4 100%);
  box-shadow: 0 0 90px 20px #cfc9ff5c, inset 0 -20px 60px #00000040;
}
.np-scare[data-face="ghost"] .sc-eye {
  width: 12vmin; height: 15vmin; border: 0; border-radius: 50%;
  background: #14101f;
}
.np-scare[data-face="ghost"] .sc-mouth {
  left: 38%; right: 38%; bottom: 24%; height: 18%;
  border-radius: 50%;
  background: #14101f;
  clip-path: none;
}

/* eyes: nothing but a pair in the dark */
.np-scare[data-face="eyes"] .np-scare-face {
  background: none;
  box-shadow: none;
}
.np-scare[data-face="eyes"] .sc-eye {
  width: 16vmin; height: 8vmin; border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #fff2c0 0 18%, #ff3b3b 40%, #6b0000 72%, transparent 74%);
  filter: drop-shadow(0 0 22px #ff2b2bcc);
}
.np-scare[data-face="eyes"] .sc-mouth { display: none; }

@keyframes scare-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scare-lunge {
  0%   { transform: scale(.18); }
  60%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}
@keyframes scare-shake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-9px, 6px); }
  40% { transform: translate(8px, -7px); }
  60% { transform: translate(-6px, -4px); }
  80% { transform: translate(5px, 6px); }
}

/*
 * The script already refuses to run under reduced motion, so this is a second
 * belt: even if the element somehow appears, it does not move.
 */
@media (prefers-reduced-motion: reduce) {
  .np-scare, .np-scare-face { animation: none; }
  .np-spooky::before, .np-spooky::after { animation: none; }
}

/* Uploaded scare media fills the screen; the drawn faces are hidden when it
   is present, so the two can never both appear. */
.np-scare.has-media .np-scare-face { display: none; }

.np-scare-media {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  animation: scare-lunge .42s ease-out both;
}


/* =====================================================================
   v5 — identity lines and reporting
   ===================================================================== */

.np-status {
  font-size: .88em;
  color: color-mix(in srgb, var(--np-text) 74%, transparent);
  margin-bottom: 4px;
}
.np-localtime {
  font-size: .74em;
  letter-spacing: .04em;
  color: color-mix(in srgb, var(--np-text) 48%, transparent);
  margin-bottom: 8px;
}

/* The report control sits quietly under everything else. It should be findable
   and never compete with the profile's own content. */
.np-report { margin-top: 10px; display: flex; justify-content: var(--np-justify, center); }
.np-report button {
  padding: 5px 10px;
  font: inherit;
  font-size: 11.5px;
  color: color-mix(in srgb, var(--np-text) 38%, transparent);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color .15s;
}
.np-report button:hover { color: #ff8080; text-decoration: underline; }

.np-report-modal {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  padding: 20px;
  background: #05050799;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.np-rm-card {
  width: min(94vw, 400px);
  padding: 22px;
  color: #f4f5f7;
  background: #131417;
  border: 1px solid #ffffff26;
  border-radius: 6px;
  text-align: left;
}
.np-rm-card h2 { font-size: 18px; margin-bottom: 6px; }
.np-rm-card p { font-size: 13px; color: #9ca0a6; margin-bottom: 14px; }

.np-rm-reasons { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.np-rm-reasons label {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  font-size: 13.5px;
  border-radius: 3px;
  cursor: pointer;
}
.np-rm-reasons label:hover { background: #ffffff0d; }

.np-rm-card textarea {
  width: 100%;
  padding: 9px 10px;
  font: inherit;
  font-size: 13px;
  color: #f4f5f7;
  background: #0d0f11;
  border: 1px solid #ffffff1f;
  border-radius: 3px;
  resize: vertical;
}

.np-rm-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.np-rm-actions button {
  padding: 8px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  border-radius: 3px;
  cursor: pointer;
}
.np-rm-cancel { color: #9ca0a6; background: none; border: 1px solid #ffffff1f; }
.np-rm-send { color: #1a0000; background: #ff6b6b; border: 1px solid #ff6b6b; }
.np-rm-send:disabled { opacity: .5; cursor: default; }
.np-rm-note { margin-top: 10px; font-size: 12px; color: #ff9c9c; min-height: 1em; }