/* =========================================================
   UNIQUE PREMIUM NAMEPLATE SYSTEM
========================================================= */

:root {
  --np-text: #ffffff;
  --np-subtext: rgba(255, 255, 255, 0.82);
  --np-shell: linear-gradient(180deg, #20283b, #111827);
  --np-inner: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  --np-border: rgba(255,255,255,0.16);
  --np-glow: rgba(96, 165, 250, 0.22);
  --np-accent: #60a5fa;
  --np-top-line: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.8), rgba(255,255,255,0.04));
  --np-bottom-line: linear-gradient(90deg, rgba(255,255,255,0.18), transparent 72%);
  --np-grid: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.08) 50%, transparent 100%);
  --np-edge: radial-gradient(circle at 100% 50%, rgba(96,165,250,0.35), transparent 62%);
  --np-particle: rgba(255,255,255,0.45);
}

/* =========================
   ANIMATIONS
========================= */

@keyframes npFloat {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -2px, 0); }
}

@keyframes npPulse {
  0%, 100% { opacity: 0.45; filter: blur(0); }
  50% { opacity: 1; filter: blur(1px); }
}

@keyframes npScan {
  0% { transform: translateX(-26%); opacity: 0.10; }
  50% { opacity: 0.35; }
  100% { transform: translateX(28%); opacity: 0.10; }
}

@keyframes npSpark {
  0%, 100% { transform: translate3d(0, 0, 0) scale(0.92); opacity: 0.16; }
  50% { transform: translate3d(4px, -2px, 0) scale(1.08); opacity: 0.75; }
}

@keyframes npGlitch {
  0%, 100% { transform: translateX(0); opacity: 0.55; }
  15% { transform: translateX(2px); opacity: 0.9; }
  30% { transform: translateX(-1px); opacity: 0.45; }
  45% { transform: translateX(3px); opacity: 0.85; }
  60% { transform: translateX(-2px); opacity: 0.4; }
  75% { transform: translateX(1px); opacity: 0.8; }
}

@keyframes npFire {
  0%, 100% {
    transform: translateY(0) scaleX(1) scaleY(1);
    opacity: 0.82;
  }
  25% {
    transform: translateY(-2px) scaleX(1.02) scaleY(1.08);
    opacity: 1;
  }
  50% {
    transform: translateY(-4px) scaleX(0.98) scaleY(1.15);
    opacity: 0.9;
  }
  75% {
    transform: translateY(-1px) scaleX(1.03) scaleY(1.04);
    opacity: 1;
  }
}

@keyframes npSpeed {
  0% { transform: translateX(0); opacity: 0.18; }
  50% { opacity: 0.75; }
  100% { transform: translateX(18px); opacity: 0.18; }
}

@keyframes npBoltPulse {
  0%, 100% { opacity: 0.45; filter: brightness(1) drop-shadow(0 0 8px rgba(120,220,255,0.45)); }
  8% { opacity: 1; filter: brightness(1.35) drop-shadow(0 0 18px rgba(180,240,255,0.85)); }
  14% { opacity: 0.5; }
  18% { opacity: 1; filter: brightness(1.25) drop-shadow(0 0 16px rgba(120,220,255,0.8)); }
  24% { opacity: 0.45; }
  56% { opacity: 0.55; }
  60% { opacity: 1; filter: brightness(1.3) drop-shadow(0 0 18px rgba(120,220,255,0.82)); }
  66% { opacity: 0.45; }
}

@keyframes npTinyShake {
  0%, 100% { transform: translate3d(0, 0, 0); }
  20% { transform: translate3d(1px, -1px, 0); }
  40% { transform: translate3d(-1px, 1px, 0); }
  60% { transform: translate3d(1px, 0, 0); }
  80% { transform: translate3d(-1px, -1px, 0); }
}

@keyframes npPetalDrift {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
    opacity: 0.20;
  }
  30% {
    transform: translate3d(8px, -4px, 0) rotate(14deg);
    opacity: 0.72;
  }
  60% {
    transform: translate3d(-4px, 3px, 0) rotate(24deg);
    opacity: 0.88;
  }
  100% {
    transform: translate3d(10px, 9px, 0) rotate(34deg);
    opacity: 0.22;
  }
}

@keyframes npSway {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  50% { transform: rotate(3deg) translateY(-1px); }
}

@keyframes npCarBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1px); }
}

@keyframes npHalo {
  0%, 100% { transform: scale(1); opacity: 0.72; }
  50% { transform: scale(1.05); opacity: 1; }
}

@keyframes npWingFlapLeft {
  0%, 100% { transform: rotate(-10deg) translateY(0); }
  50% { transform: rotate(-3deg) translateY(-1px); }
}

@keyframes npWingFlapRight {
  0%, 100% { transform: rotate(10deg) translateY(0); }
  50% { transform: rotate(3deg) translateY(-1px); }
}

@keyframes npRipple {
  0% { transform: scale(0.92); opacity: 0.15; }
  50% { transform: scale(1.02); opacity: 0.55; }
  100% { transform: scale(1.12); opacity: 0.12; }
}

@keyframes npSwimA {
  0%, 100% { transform: translateX(0) rotate(-6deg); }
  50% { transform: translateX(4px) rotate(-2deg); }
}

@keyframes npSwimB {
  0%, 100% { transform: translateX(0) rotate(8deg); }
  50% { transform: translateX(-4px) rotate(3deg); }
}

@keyframes npWindows {
  0%, 100% { opacity: 0.78; }
  40% { opacity: 0.55; }
  55% { opacity: 1; }
  75% { opacity: 0.62; }
}

@keyframes npTwinkle {
  0%, 100% { opacity: 0.25; transform: scale(0.95); }
  50% { opacity: 1; transform: scale(1.08); }
}

@keyframes npPawPeek {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(2px) rotate(-4deg); }
}

/* =========================
   BASE
========================= */

.nameplate {
  --avatar-size: 54px;
  --plate-height: 74px;
  --plate-radius: 24px;
  --plate-pad-right: 18px;
  --plate-pad-left: calc(var(--avatar-size) + 20px);

  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: var(--plate-height);
  padding: 8px var(--plate-pad-right) 8px var(--plate-pad-left);
  border-radius: var(--plate-radius);
  isolation: isolate;
  color: var(--np-text);
  background: var(--np-shell);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -10px 22px rgba(0,0,0,0.24),
    0 12px 30px rgba(8,12,26,0.28),
    0 0 0 1px var(--np-border),
    0 0 28px var(--np-glow);
  overflow: hidden;
}

.nameplate::before,
.nameplate::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.nameplate::before {
  inset: 4px;
  z-index: 0;
  border-radius: calc(var(--plate-radius) - 6px);
  background: var(--np-inner);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}

.nameplate::after {
  left: calc(var(--plate-pad-left) + 4px);
  right: 18px;
  bottom: 10px;
  height: 8px;
  z-index: 0;
  border-radius: 999px;
  background: var(--np-bottom-line);
  opacity: 0.62;
}

.nameplate-fx {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.nameplate-fx span {
  position: absolute;
  display: block;
}

.nameplate-fx__grid {
  inset: 10px 18px 10px calc(var(--plate-pad-left) - 6px);
  border-radius: calc(var(--plate-radius) - 10px);
  background:
    linear-gradient(90deg, transparent 0 18%, rgba(255,255,255,0.08) 18% 19%, transparent 19% 100%),
    linear-gradient(180deg, transparent 0 68%, rgba(255,255,255,0.06) 68% 69%, transparent 69% 100%),
    var(--np-grid);
  mix-blend-mode: screen;
  opacity: 0.28;
  animation: npScan 7s linear infinite;
}

.nameplate-fx__top-line,
.nameplate-fx__bottom-line {
  left: calc(var(--plate-pad-left) - 4px);
  right: 24px;
  height: 2px;
  border-radius: 999px;
}

.nameplate-fx__top-line {
  top: 10px;
  background: var(--np-top-line);
  opacity: 0.84;
}

.nameplate-fx__bottom-line {
  bottom: 10px;
  background: var(--np-bottom-line);
  opacity: 0.5;
}

.nameplate-fx__edge {
  top: 6px;
  right: 6px;
  bottom: 6px;
  width: 120px;
  border-radius: 0 calc(var(--plate-radius) - 4px) calc(var(--plate-radius) - 4px) 0;
  background: var(--np-edge);
  opacity: 0.8;
  animation: npPulse 3.2s ease-in-out infinite;
}

.nameplate-fx__particle {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, #ffffff, var(--np-particle) 58%, transparent 72%);
  box-shadow: 0 0 12px var(--np-particle);
  animation: npSpark 3s ease-in-out infinite;
}

.nameplate-fx__particle--1 {
  top: 18px;
  right: 104px;
}

.nameplate-fx__particle--2 {
  top: 26px;
  right: 54px;
  width: 6px;
  height: 6px;
  animation-duration: 2.4s;
}

.nameplate-fx__particle--3 {
  bottom: 18px;
  right: 82px;
  width: 5px;
  height: 5px;
  animation-duration: 3.8s;
}

.nameplate-art {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.nameplate-art__item {
  position: absolute;
  display: block;
  opacity: 0;
}

.nameplate-art__item::before,
.nameplate-art__item::after {
  content: "";
  position: absolute;
  display: block;
}

.nameplate-avatar,
.nameplate-body {
  position: relative;
  z-index: 3;
}

.nameplate-avatar {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.18), transparent 38%),
    linear-gradient(180deg, rgba(8,10,22,0.98), rgba(19,25,41,0.96));
  border: 3px solid rgba(18,23,38,0.92);
  box-shadow:
    0 0 0 4px rgba(255,255,255,0.08),
    0 10px 20px rgba(0,0,0,0.35),
    0 0 18px var(--np-glow);
  overflow: hidden;
}

.nameplate-avatar::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
  pointer-events: none;
}

.nameplate-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.nameplate-avatar__fallback {
  font-weight: 900;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
}

.nameplate-body {
  min-width: 0;
  width: 100%;
  display: grid;
  gap: 3px;
}

.nameplate-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.nameplate-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.15rem;
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0,0,0,0.34);
}

.nameplate-subtitle {
  color: var(--np-subtext);
  font-size: 0.78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nameplate-verified {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: #22a6ff;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 900;
  flex: 0 0 18px;
  box-shadow: 0 0 10px rgba(34,166,255,0.45);
}

.nameplate--lg {
  --avatar-size: 58px;
  --plate-height: 76px;
  --plate-radius: 24px;
  --plate-pad-right: 18px;
  --plate-pad-left: calc(var(--avatar-size) + 18px);
}

.nameplate--lg .nameplate-title {
  font-size: 1.1rem;
}

.nameplate--lg .nameplate-subtitle {
  font-size: 0.74rem;
}

.nameplate--md {
  --avatar-size: 48px;
  --plate-height: 66px;
  --plate-radius: 22px;
  --plate-pad-right: 16px;
  --plate-pad-left: calc(var(--avatar-size) + 18px);
  min-width: min(100%, 560px);
}

.nameplate--sm {
  --avatar-size: 40px;
  --plate-height: 56px;
  --plate-radius: 18px;
  --plate-pad-right: 14px;
  --plate-pad-left: calc(var(--avatar-size) + 14px);
}

.nameplate--sm .nameplate-title {
  font-size: 0.92rem;
}

.nameplate--sm .nameplate-subtitle {
  font-size: 0.68rem;
}

/* =========================
   UNIQUE THEMES
========================= */

/* 1. Neon Horizon */

.nameplate--neon-horizon {
  --np-shell: linear-gradient(135deg, #05091c 0%, #10245a 42%, #0d1232 100%);
  --np-inner: linear-gradient(135deg, rgba(58,226,255,0.22), rgba(255,0,153,0.12));
  --np-border: rgba(102,238,255,0.46);
  --np-glow: rgba(77,198,255,0.32);
  --np-accent: #56e9ff;
  --np-top-line: linear-gradient(90deg, rgba(82,240,255,0.22), rgba(82,240,255,1), rgba(255,59,188,0.45));
  --np-bottom-line: linear-gradient(90deg, rgba(103,220,255,0.7), rgba(255,59,188,0.26), transparent 78%);
  --np-edge: radial-gradient(circle at 100% 50%, rgba(255,59,188,0.48), rgba(82,240,255,0.22), transparent 64%);
  --np-particle: rgba(116,245,255,0.96);
}

.nameplate--neon-horizon .nameplate-art__item--right,
.nameplate--neon-horizon .nameplate-art__item--center {
  opacity: 1;
}

.nameplate--neon-horizon .nameplate-art__item--right {
  right: 12px;
  top: 10px;
  width: 110px;
  height: 36px;
  border: 2px solid rgba(104,238,255,0.6);
  border-left: none;
  border-radius: 0 14px 14px 0;
  box-shadow: 0 0 14px rgba(86,233,255,0.18);
}

.nameplate--neon-horizon .nameplate-art__item--right::before {
  right: 8px;
  top: 8px;
  width: 46px;
  height: 4px;
  background:
    linear-gradient(90deg, rgba(255,59,188,0.9), rgba(86,233,255,0.95));
  border-radius: 999px;
  box-shadow:
    0 10px 0 0 rgba(86,233,255,0.55),
    -26px 18px 0 0 rgba(255,59,188,0.45),
    -12px 4px 0 0 rgba(86,233,255,0.4);
}

.nameplate--neon-horizon .nameplate-art__item--center {
  right: 120px;
  top: 18px;
  width: 36px;
  height: 8px;
  background: linear-gradient(90deg, rgba(86,233,255,0), rgba(86,233,255,0.9), rgba(86,233,255,0));
  border-radius: 999px;
  animation: npPulse 2.2s ease-in-out infinite;
}

/* 2. Blaze Fury */

.nameplate--blaze-fury {
  --np-shell: linear-gradient(135deg, #120603 0%, #3d0c05 38%, #160704 100%);
  --np-inner: linear-gradient(180deg, rgba(255,142,55,0.20), rgba(255,255,255,0.02));
  --np-border: rgba(255,142,70,0.50);
  --np-glow: rgba(255,94,0,0.34);
  --np-accent: #ff8d35;
  --np-top-line: linear-gradient(90deg, rgba(255,163,71,0.36), rgba(255,255,190,0.90), rgba(255,117,24,0.60));
  --np-bottom-line: linear-gradient(90deg, rgba(255,123,34,0.70), rgba(255,196,91,0.24), transparent 78%);
  --np-edge: radial-gradient(circle at 100% 50%, rgba(255,123,34,0.42), rgba(255,200,86,0.18), transparent 62%);
  --np-particle: rgba(255,189,95,0.95);
}

.nameplate--blaze-fury .nameplate-art__item--left,
.nameplate--blaze-fury .nameplate-art__item--right {
  opacity: 1;
}

.nameplate--blaze-fury .nameplate-art__item--right {
  right: 0;
  bottom: -4px;
  width: 112px;
  height: 40px;
  animation: npFire 1.85s ease-in-out infinite;
  filter: drop-shadow(0 0 14px rgba(255, 110, 35, 0.32));
}

.nameplate--blaze-fury .nameplate-art__item--right::before {
  inset: 0;
  background:
    radial-gradient(ellipse at 10% 100%, rgba(255, 215, 120, 0.94) 0 12%, transparent 13%),
    radial-gradient(ellipse at 28% 100%, rgba(255, 125, 29, 0.96) 0 18%, transparent 19%),
    radial-gradient(ellipse at 46% 100%, rgba(255, 88, 0, 0.94) 0 22%, transparent 23%),
    radial-gradient(ellipse at 66% 100%, rgba(255, 188, 86, 0.90) 0 18%, transparent 19%),
    radial-gradient(ellipse at 84% 100%, rgba(255, 108, 37, 0.96) 0 20%, transparent 21%),
    radial-gradient(ellipse at 100% 100%, rgba(255, 166, 71, 0.84) 0 14%, transparent 15%);
}

.nameplate--blaze-fury .nameplate-art__item--right::after {
  left: 6px;
  right: 8px;
  bottom: 2px;
  height: 26px;
  background:
    radial-gradient(ellipse at 14% 100%, rgba(255,255,255,0.85) 0 6%, transparent 7%),
    radial-gradient(ellipse at 36% 100%, rgba(255, 190, 120, 0.88) 0 10%, transparent 11%),
    radial-gradient(ellipse at 55% 100%, rgba(255, 215, 170, 0.78) 0 7%, transparent 8%),
    radial-gradient(ellipse at 74% 100%, rgba(255, 175, 98, 0.88) 0 9%, transparent 10%),
    radial-gradient(ellipse at 94% 100%, rgba(255, 155, 90, 0.82) 0 7%, transparent 8%);
  filter: blur(0.6px);
}

.nameplate--blaze-fury .nameplate-art__item--left {
  left: 80px;
  bottom: -2px;
  width: 44px;
  height: 24px;
  animation: npFire 1.5s ease-in-out infinite reverse;
}

.nameplate--blaze-fury .nameplate-art__item--left::before {
  inset: 0;
  background:
    radial-gradient(ellipse at 18% 100%, rgba(255, 166, 71, 0.92) 0 20%, transparent 21%),
    radial-gradient(ellipse at 50% 100%, rgba(255, 95, 24, 0.96) 0 28%, transparent 29%),
    radial-gradient(ellipse at 82% 100%, rgba(255, 196, 99, 0.90) 0 20%, transparent 21%);
}

/* 3. Glitch Wave */

.nameplate--glitch-wave {
  --np-shell: linear-gradient(135deg, #06091f 0%, #12206d 42%, #0a123c 100%);
  --np-inner: linear-gradient(180deg, rgba(255,82,197,0.16), rgba(42,233,255,0.08));
  --np-border: rgba(129,211,255,0.42);
  --np-glow: rgba(64,211,255,0.28);
  --np-accent: #40d3ff;
  --np-top-line: linear-gradient(90deg, rgba(255,91,183,0.45), rgba(61,239,255,1), rgba(255,91,183,0.45));
  --np-bottom-line: linear-gradient(90deg, rgba(255,91,183,0.55), rgba(61,239,255,0.24), transparent 78%);
  --np-edge: radial-gradient(circle at 100% 50%, rgba(61,239,255,0.42), rgba(255,91,183,0.16), transparent 62%);
  --np-particle: rgba(255,103,191,0.96);
}

.nameplate--glitch-wave .nameplate-fx__grid,
.nameplate--glitch-wave .nameplate-fx__top-line,
.nameplate--glitch-wave .nameplate-fx__bottom-line {
  animation: npGlitch 1.25s steps(2, end) infinite;
}

.nameplate--glitch-wave .nameplate-title {
  text-shadow:
    1px 0 rgba(61,239,255,0.3),
    -1px 0 rgba(255,91,183,0.3),
    0 2px 10px rgba(0,0,0,0.35);
}

.nameplate--glitch-wave .nameplate-art__item--center,
.nameplate--glitch-wave .nameplate-art__item--right {
  opacity: 1;
}

.nameplate--glitch-wave .nameplate-art__item--center {
  right: 94px;
  top: 18px;
  width: 62px;
  height: 10px;
  background:
    linear-gradient(90deg, rgba(255,91,183,0.95) 0 18%, transparent 18% 28%, rgba(61,239,255,0.95) 28% 46%, transparent 46% 58%, rgba(255,91,183,0.75) 58% 76%, transparent 76%);
  animation: npGlitch 0.95s steps(2, end) infinite;
}

.nameplate--glitch-wave .nameplate-art__item--right {
  right: 12px;
  top: 12px;
  width: 84px;
  height: 34px;
  background:
    linear-gradient(90deg, transparent 0 10%, rgba(61,239,255,0.85) 10% 18%, transparent 18% 28%, rgba(255,91,183,0.85) 28% 36%, transparent 36% 52%, rgba(61,239,255,0.55) 52% 60%, transparent 60% 72%, rgba(255,91,183,0.55) 72% 84%, transparent 84%);
  filter: drop-shadow(0 0 8px rgba(61,239,255,0.25));
  animation: npGlitch 1.05s steps(2, end) infinite;
}

/* 4. Tropical Bloom */

.nameplate--tropical-bloom {
  --np-shell: linear-gradient(135deg, #08243f 0%, #0d5e80 50%, #0a3355 100%);
  --np-inner: linear-gradient(180deg, rgba(88,233,255,0.14), rgba(255,255,255,0.03));
  --np-border: rgba(95,234,255,0.36);
  --np-glow: rgba(53,193,255,0.24);
  --np-accent: #4ce6ff;
  --np-top-line: linear-gradient(90deg, rgba(255,198,87,0.2), rgba(95,234,255,0.95), rgba(255,154,203,0.25));
  --np-bottom-line: linear-gradient(90deg, rgba(255,198,87,0.46), rgba(95,234,255,0.18), transparent 76%);
  --np-edge: radial-gradient(circle at 100% 50%, rgba(255,187,72,0.28), rgba(95,234,255,0.18), transparent 66%);
  --np-particle: rgba(255,210,104,0.94);
}

.nameplate--tropical-bloom .nameplate-art__item--left,
.nameplate--tropical-bloom .nameplate-art__item--right,
.nameplate--tropical-bloom .nameplate-art__item--center {
  opacity: 1;
}

.nameplate--tropical-bloom .nameplate-art__item--right {
  right: 14px;
  bottom: 4px;
  width: 52px;
  height: 36px;
  animation: npSway 4.8s ease-in-out infinite;
}

.nameplate--tropical-bloom .nameplate-art__item--right::before {
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #ffe16c 0 10%, transparent 11%),
    radial-gradient(circle at 50% 12%, #ff77b4 0 23%, transparent 24%),
    radial-gradient(circle at 82% 36%, #ff77b4 0 23%, transparent 24%),
    radial-gradient(circle at 70% 80%, #ff77b4 0 23%, transparent 24%),
    radial-gradient(circle at 30% 80%, #ff77b4 0 23%, transparent 24%),
    radial-gradient(circle at 18% 36%, #ff77b4 0 23%, transparent 24%);
  filter: drop-shadow(0 0 8px rgba(255, 122, 184, 0.26));
}

.nameplate--tropical-bloom .nameplate-art__item--right::after {
  right: -20px;
  bottom: -4px;
  width: 22px;
  height: 32px;
  background: linear-gradient(180deg, rgba(66,214,122,0.98), rgba(18,148,72,0.96));
  clip-path: polygon(50% 0%, 100% 32%, 72% 100%, 48% 78%, 24% 100%, 0% 32%);
  filter: drop-shadow(0 0 6px rgba(55,194,120,0.28));
  transform: rotate(12deg);
}

.nameplate--tropical-bloom .nameplate-art__item--left {
  left: 78px;
  bottom: 8px;
  width: 20px;
  height: 28px;
  background: linear-gradient(180deg, rgba(77,215,130,0.98), rgba(25,150,90,0.96));
  clip-path: polygon(50% 0%, 100% 34%, 72% 100%, 48% 78%, 24% 100%, 0% 34%);
  transform: rotate(-14deg);
  filter: drop-shadow(0 0 6px rgba(55,194,120,0.22));
}

.nameplate--tropical-bloom .nameplate-art__item--center {
  right: 92px;
  top: 12px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.9);
  box-shadow:
    18px 5px 0 -1px rgba(255,230,120,0.85),
    36px 12px 0 -2px rgba(255,255,255,0.8),
    52px 2px 0 -2px rgba(255,230,120,0.7);
  animation: npFloat 3.8s ease-in-out infinite;
}

/* 5. Thunderstrike */

.nameplate--thunderstrike {
  --np-shell: linear-gradient(135deg, #050a1e 0%, #112661 48%, #081126 100%);
  --np-inner: linear-gradient(180deg, rgba(120,210,255,0.18), rgba(255,255,255,0.03));
  --np-border: rgba(120,214,255,0.48);
  --np-glow: rgba(80,180,255,0.30);
  --np-accent: #79d9ff;
  --np-top-line: linear-gradient(90deg, rgba(188,236,255,0.2), rgba(132,222,255,1), rgba(71,131,255,0.35));
  --np-bottom-line: linear-gradient(90deg, rgba(116,216,255,0.7), rgba(71,131,255,0.18), transparent 78%);
  --np-edge: radial-gradient(circle at 100% 50%, rgba(100,191,255,0.42), rgba(132,222,255,0.16), transparent 62%);
  --np-particle: rgba(170,232,255,0.96);
}

.nameplate--thunderstrike .nameplate-art__item--left,
.nameplate--thunderstrike .nameplate-art__item--right {
  opacity: 1;
}

.nameplate--thunderstrike .nameplate-art__item--right {
  right: 18px;
  top: 6px;
  width: 26px;
  height: 58px;
  background: linear-gradient(180deg, #eefcff 0%, #86dcff 52%, #4c86ff 100%);
  clip-path: polygon(42% 0%, 100% 0%, 62% 38%, 88% 38%, 18% 100%, 40% 56%, 14% 56%);
  filter: drop-shadow(0 0 12px rgba(120, 220, 255, 0.72));
  animation: npBoltPulse 2.2s infinite, npTinyShake 0.18s linear infinite;
}

.nameplate--thunderstrike .nameplate-art__item--right::before {
  left: -34px;
  top: 10px;
  width: 18px;
  height: 42px;
  background: linear-gradient(180deg, #f4ffff 0%, #9ce6ff 54%, #5a9dff 100%);
  clip-path: polygon(44% 0%, 100% 0%, 60% 40%, 85% 40%, 18% 100%, 40% 58%, 12% 58%);
}

.nameplate--thunderstrike .nameplate-art__item--right::after {
  left: 20px;
  top: 22px;
  width: 12px;
  height: 30px;
  background: linear-gradient(180deg, #ffffff 0%, #b6edff 48%, #67acff 100%);
  clip-path: polygon(42% 0%, 100% 0%, 62% 38%, 88% 38%, 18% 100%, 40% 56%, 14% 56%);
}

.nameplate--thunderstrike .nameplate-art__item--left {
  left: 72px;
  bottom: 8px;
  width: 14px;
  height: 34px;
  background: linear-gradient(180deg, #ffffff 0%, #a8edff 50%, #6698ff 100%);
  clip-path: polygon(42% 0%, 100% 0%, 62% 38%, 88% 38%, 18% 100%, 40% 56%, 14% 56%);
  filter: drop-shadow(0 0 10px rgba(120,220,255,0.6));
  animation: npBoltPulse 1.9s infinite;
}

/* 6. Midnight Racer */

.nameplate--midnight-racer {
  --np-shell: linear-gradient(135deg, #080915 0%, #1b214d 40%, #0c1020 100%);
  --np-inner: linear-gradient(180deg, rgba(132,157,255,0.10), rgba(255,255,255,0.02));
  --np-border: rgba(133,153,255,0.34);
  --np-glow: rgba(107,129,255,0.20);
  --np-accent: #8ea1ff;
  --np-top-line: linear-gradient(90deg, rgba(200,210,255,0.18), rgba(149,162,255,0.95), rgba(132,91,255,0.18));
  --np-bottom-line: linear-gradient(90deg, rgba(149,162,255,0.5), rgba(132,91,255,0.14), transparent 80%);
  --np-edge: radial-gradient(circle at 100% 50%, rgba(149,162,255,0.28), rgba(132,91,255,0.12), transparent 62%);
  --np-particle: rgba(214,220,255,0.88);
}

.nameplate--midnight-racer .nameplate-art__item--center,
.nameplate--midnight-racer .nameplate-art__item--right {
  opacity: 1;
}

.nameplate--midnight-racer .nameplate-art__item--right {
  right: 16px;
  bottom: 10px;
  width: 88px;
  height: 22px;
  border-radius: 10px 16px 7px 7px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0.02)),
    linear-gradient(90deg, #9ba9ff 0%, #596bff 42%, #9c5fff 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    0 0 16px rgba(129, 143, 255, 0.26);
  animation: npCarBob 2.2s ease-in-out infinite;
}

.nameplate--midnight-racer .nameplate-art__item--right::before {
  left: 20px;
  top: -10px;
  width: 42px;
  height: 18px;
  border-radius: 16px 16px 6px 6px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.35), rgba(255,255,255,0.05)),
    linear-gradient(90deg, #7d89e8 0%, #5a63b7 100%);
  clip-path: polygon(6% 100%, 18% 24%, 72% 18%, 100% 100%);
}

.nameplate--midnight-racer .nameplate-art__item--right::after {
  left: 10px;
  right: 8px;
  bottom: -6px;
  height: 14px;
  background:
    radial-gradient(circle at 12px 50%, #131727 0 4px, #8896ff 4px 6px, transparent 7px),
    radial-gradient(circle at calc(100% - 14px) 50%, #131727 0 4px, #8896ff 4px 6px, transparent 7px);
}

.nameplate--midnight-racer .nameplate-art__item--center {
  right: 102px;
  top: 20px;
  width: 92px;
  height: 14px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent 0 6%, rgba(150,165,255,0.5) 6% 38%, transparent 38% 48%, rgba(150,165,255,0.38) 48% 74%, transparent 74% 100%);
  filter: blur(0.4px);
  animation: npSpeed 1.5s linear infinite;
}

/* 7. Violet Inferno */

.nameplate--violet-inferno {
  --np-shell: linear-gradient(135deg, #12061e 0%, #36105f 40%, #160820 100%);
  --np-inner: linear-gradient(180deg, rgba(220,112,255,0.16), rgba(255,255,255,0.02));
  --np-border: rgba(220,112,255,0.46);
  --np-glow: rgba(194,93,255,0.30);
  --np-accent: #d870ff;
  --np-top-line: linear-gradient(90deg, rgba(239,159,255,0.22), rgba(216,112,255,1), rgba(120,86,255,0.4));
  --np-bottom-line: linear-gradient(90deg, rgba(216,112,255,0.62), rgba(120,86,255,0.18), transparent 78%);
  --np-edge: radial-gradient(circle at 100% 50%, rgba(216,112,255,0.44), rgba(120,86,255,0.16), transparent 62%);
  --np-particle: rgba(239,191,255,0.96);
}

.nameplate--violet-inferno .nameplate-art__item--left,
.nameplate--violet-inferno .nameplate-art__item--right {
  opacity: 1;
}

.nameplate--violet-inferno .nameplate-art__item--right {
  right: 0;
  bottom: -4px;
  width: 112px;
  height: 40px;
  animation: npFire 1.85s ease-in-out infinite;
  filter: drop-shadow(0 0 14px rgba(201, 95, 255, 0.32));
}

.nameplate--violet-inferno .nameplate-art__item--right::before {
  inset: 0;
  background:
    radial-gradient(ellipse at 10% 100%, rgba(255, 194, 255, 0.94) 0 12%, transparent 13%),
    radial-gradient(ellipse at 28% 100%, rgba(221, 126, 255, 0.96) 0 18%, transparent 19%),
    radial-gradient(ellipse at 46% 100%, rgba(164, 98, 255, 0.94) 0 22%, transparent 23%),
    radial-gradient(ellipse at 66% 100%, rgba(236, 168, 255, 0.90) 0 18%, transparent 19%),
    radial-gradient(ellipse at 84% 100%, rgba(126, 87, 255, 0.96) 0 20%, transparent 21%),
    radial-gradient(ellipse at 100% 100%, rgba(221, 126, 255, 0.84) 0 14%, transparent 15%);
}

.nameplate--violet-inferno .nameplate-art__item--right::after {
  left: 6px;
  right: 8px;
  bottom: 2px;
  height: 26px;
  background:
    radial-gradient(ellipse at 14% 100%, rgba(255,255,255,0.85) 0 6%, transparent 7%),
    radial-gradient(ellipse at 36% 100%, rgba(255, 190, 255, 0.88) 0 10%, transparent 11%),
    radial-gradient(ellipse at 55% 100%, rgba(255, 220, 255, 0.78) 0 7%, transparent 8%),
    radial-gradient(ellipse at 74% 100%, rgba(255, 175, 255, 0.88) 0 9%, transparent 10%),
    radial-gradient(ellipse at 94% 100%, rgba(240, 160, 255, 0.82) 0 7%, transparent 8%);
  filter: blur(0.6px);
}

.nameplate--violet-inferno .nameplate-art__item--left {
  left: 78px;
  bottom: -2px;
  width: 48px;
  height: 28px;
  animation: npFire 1.4s ease-in-out infinite reverse;
  filter: drop-shadow(0 0 10px rgba(201, 95, 255, 0.24));
}

.nameplate--violet-inferno .nameplate-art__item--left::before {
  inset: 0;
  background:
    radial-gradient(ellipse at 18% 100%, rgba(230, 140, 255, 0.92) 0 20%, transparent 21%),
    radial-gradient(ellipse at 50% 100%, rgba(154, 98, 255, 0.96) 0 28%, transparent 29%),
    radial-gradient(ellipse at 82% 100%, rgba(240, 175, 255, 0.90) 0 20%, transparent 21%);
}

/* 8. Sakura Blossom */

.nameplate--sakura-bLOSSOM,
.nameplate--sakura-blossom {
  --np-shell: linear-gradient(135deg, #611744 0%, #d2649b 48%, #f3a7c5 100%);
  --np-inner: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.08));
  --np-border: rgba(255,232,242,0.50);
  --np-glow: rgba(255,144,196,0.26);
  --np-accent: #ffb2d0;
  --np-text: #fffafd;
  --np-subtext: rgba(255,245,250,0.78);
  --np-top-line: linear-gradient(90deg, rgba(255,226,236,0.24), rgba(255,197,220,1), rgba(255,147,192,0.30));
  --np-bottom-line: linear-gradient(90deg, rgba(255,187,214,0.58), rgba(255,255,255,0.18), transparent 78%);
  --np-edge: radial-gradient(circle at 100% 50%, rgba(255,190,218,0.32), rgba(255,255,255,0.14), transparent 62%);
  --np-particle: rgba(255,231,242,0.96);
}

.nameplate--sakura-blossom .nameplate-art__item--left,
.nameplate--sakura-blossom .nameplate-art__item--right,
.nameplate--sakura-blossom .nameplate-art__item--center {
  opacity: 1;
}

.nameplate--sakura-blossom .nameplate-art__item--left {
  left: 2px;
  bottom: 2px;
  width: 46px;
  height: 46px;
  transform-origin: bottom left;
  animation: npSway 4.2s ease-in-out infinite;
}

.nameplate--sakura-blossom .nameplate-art__item--left::before {
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #ffd96a 0 12%, transparent 13%),
    radial-gradient(circle at 50% 14%, #ffd4e7 0 24%, transparent 25%),
    radial-gradient(circle at 82% 36%, #ffd4e7 0 24%, transparent 25%),
    radial-gradient(circle at 71% 79%, #ffd4e7 0 24%, transparent 25%),
    radial-gradient(circle at 29% 79%, #ffd4e7 0 24%, transparent 25%),
    radial-gradient(circle at 18% 36%, #ffd4e7 0 24%, transparent 25%);
  filter: drop-shadow(0 0 8px rgba(255,191,220,0.28));
}

.nameplate--sakura-blossom .nameplate-art__item--left::after {
  left: 26px;
  top: 18px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #ffe07b 0 11%, transparent 12%),
    radial-gradient(circle at 50% 14%, #ffc8df 0 24%, transparent 25%),
    radial-gradient(circle at 82% 36%, #ffc8df 0 24%, transparent 25%),
    radial-gradient(circle at 71% 79%, #ffc8df 0 24%, transparent 25%),
    radial-gradient(circle at 29% 79%, #ffc8df 0 24%, transparent 25%),
    radial-gradient(circle at 18% 36%, #ffc8df 0 24%, transparent 25%);
  filter: drop-shadow(0 0 6px rgba(255,182,215,0.26));
}

.nameplate--sakura-blossom .nameplate-art__item--right {
  right: 10px;
  bottom: 4px;
  width: 72px;
  height: 40px;
  animation: npSway 5.2s ease-in-out infinite reverse;
}

.nameplate--sakura-blossom .nameplate-art__item--right::before {
  left: 0;
  bottom: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #ffe07b 0 11%, transparent 12%),
    radial-gradient(circle at 50% 14%, #ffd1e4 0 24%, transparent 25%),
    radial-gradient(circle at 82% 36%, #ffd1e4 0 24%, transparent 25%),
    radial-gradient(circle at 71% 79%, #ffd1e4 0 24%, transparent 25%),
    radial-gradient(circle at 29% 79%, #ffd1e4 0 24%, transparent 25%),
    radial-gradient(circle at 18% 36%, #ffd1e4 0 24%, transparent 25%);
}

.nameplate--sakura-blossom .nameplate-art__item--right::after {
  right: 0;
  top: 2px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #ffe58f 0 11%, transparent 12%),
    radial-gradient(circle at 50% 14%, #ffc2dc 0 24%, transparent 25%),
    radial-gradient(circle at 82% 36%, #ffc2dc 0 24%, transparent 25%),
    radial-gradient(circle at 71% 79%, #ffc2dc 0 24%, transparent 25%),
    radial-gradient(circle at 29% 79%, #ffc2dc 0 24%, transparent 25%),
    radial-gradient(circle at 18% 36%, #ffc2dc 0 24%, transparent 25%);
}

.nameplate--sakura-blossom .nameplate-art__item--center {
  right: 78px;
  top: 8px;
  width: 16px;
  height: 16px;
  border-radius: 40% 60% 55% 45%;
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,0.95), rgba(255,216,232,0.96) 42%, rgba(255,171,208,0.94) 72%, transparent 74%);
  box-shadow:
    22px 8px 0 -1px rgba(255,206,225,0.88),
    48px -2px 0 -2px rgba(255,196,220,0.82),
    62px 14px 0 -3px rgba(255,212,231,0.78);
  animation: npPetalDrift 4.8s ease-in-out infinite;
}

/* 9. Angelic Aura */

.nameplate--angelic-aura {
  --np-shell: linear-gradient(135deg, #4b2f89 0%, #6b4bd1 48%, #9f79ff 100%);
  --np-inner: linear-gradient(180deg, rgba(255,255,255,0.20), rgba(255,255,255,0.06));
  --np-border: rgba(255,239,204,0.46);
  --np-glow: rgba(255,224,156,0.22);
  --np-accent: #ffe9a8;
  --np-text: #fffdf6;
  --np-subtext: rgba(255,249,224,0.78);
  --np-top-line: linear-gradient(90deg, rgba(255,237,170,0.18), rgba(255,255,255,0.95), rgba(215,189,255,0.24));
  --np-bottom-line: linear-gradient(90deg, rgba(255,231,166,0.50), rgba(255,255,255,0.18), transparent 78%);
  --np-edge: radial-gradient(circle at 100% 50%, rgba(255,231,166,0.28), rgba(255,255,255,0.12), transparent 62%);
  --np-particle: rgba(255,243,212,0.95);
}

.nameplate--angelic-aura .nameplate-art__item--left,
.nameplate--angelic-aura .nameplate-art__item--center,
.nameplate--angelic-aura .nameplate-art__item--right {
  opacity: 1;
}

.nameplate--angelic-aura .nameplate-art__item--center {
  right: 34px;
  top: 2px;
  width: 44px;
  height: 16px;
  border-radius: 50%;
  border: 3px solid rgba(255,234,165,0.9);
  box-shadow:
    0 0 12px rgba(255,234,165,0.38),
    inset 0 0 8px rgba(255,255,255,0.18);
  animation: npHalo 2.8s ease-in-out infinite;
}

.nameplate--angelic-aura .nameplate-art__item--left,
.nameplate--angelic-aura .nameplate-art__item--right {
  top: 16px;
  width: 42px;
  height: 32px;
}

.nameplate--angelic-aura .nameplate-art__item--left {
  right: 58px;
  animation: npWingFlapLeft 3s ease-in-out infinite;
}

.nameplate--angelic-aura .nameplate-art__item--right {
  right: 12px;
  animation: npWingFlapRight 3s ease-in-out infinite;
}

.nameplate--angelic-aura .nameplate-art__item--left::before,
.nameplate--angelic-aura .nameplate-art__item--right::before {
  inset: 0;
  background:
    radial-gradient(ellipse at 70% 20%, rgba(255,255,255,0.95) 0 26%, transparent 27%),
    radial-gradient(ellipse at 60% 48%, rgba(255,248,220,0.92) 0 28%, transparent 29%),
    radial-gradient(ellipse at 48% 76%, rgba(255,239,204,0.88) 0 26%, transparent 27%);
  filter: drop-shadow(0 0 8px rgba(255,235,170,0.22));
}

.nameplate--angelic-aura .nameplate-art__item--left::before {
  transform: scaleX(-1);
}

.nameplate--angelic-aura .nameplate-art__item--right::after {
  right: -10px;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.95);
  box-shadow:
    -12px 6px 0 0 rgba(255,244,208,0.85),
    -18px -6px 0 0 rgba(255,255,255,0.78),
    6px -8px 0 0 rgba(255,250,227,0.72);
  animation: npTwinkle 2.4s ease-in-out infinite;
}

/* 10. Koi Pond */

.nameplate--koi-pond {
  --np-shell: linear-gradient(135deg, #0b1f3f 0%, #145b82 50%, #0b304d 100%);
  --np-inner: linear-gradient(180deg, rgba(126,229,255,0.14), rgba(255,255,255,0.03));
  --np-border: rgba(126,229,255,0.38);
  --np-glow: rgba(85,198,255,0.24);
  --np-accent: #71e7ff;
  --np-top-line: linear-gradient(90deg, rgba(255,221,137,0.16), rgba(126,229,255,0.96), rgba(255,183,120,0.20));
  --np-bottom-line: linear-gradient(90deg, rgba(126,229,255,0.46), rgba(255,208,136,0.16), transparent 78%);
  --np-edge: radial-gradient(circle at 100% 50%, rgba(126,229,255,0.24), rgba(255,208,136,0.12), transparent 62%);
  --np-particle: rgba(214,250,255,0.90);
}

.nameplate--koi-pond .nameplate-art__item--left,
.nameplate--koi-pond .nameplate-art__item--center,
.nameplate--koi-pond .nameplate-art__item--right {
  opacity: 1;
}

.nameplate--koi-pond .nameplate-art__item--left {
  right: 86px;
  top: 14px;
  width: 40px;
  height: 18px;
  border-radius: 60% 40% 50% 50%;
  background:
    radial-gradient(circle at 65% 42%, rgba(255,255,255,0.95) 0 14%, transparent 15%),
    linear-gradient(90deg, #ffca7a 0%, #ffffff 42%, #ff9e57 100%);
  animation: npSwimA 4.2s ease-in-out infinite;
}

.nameplate--koi-pond .nameplate-art__item--left::before {
  left: -8px;
  top: 4px;
  width: 10px;
  height: 10px;
  background: linear-gradient(90deg, #ffb25e, #ffffff);
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
}

.nameplate--koi-pond .nameplate-art__item--left::after {
  right: 4px;
  top: 6px;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: #24324d;
}

.nameplate--koi-pond .nameplate-art__item--right {
  right: 20px;
  bottom: 10px;
  width: 48px;
  height: 22px;
  border-radius: 60% 40% 50% 50%;
  background:
    radial-gradient(circle at 60% 40%, rgba(255,255,255,0.95) 0 14%, transparent 15%),
    linear-gradient(90deg, #ff8d4a 0%, #fff7df 44%, #ffcc78 100%);
  animation: npSwimB 4.8s ease-in-out infinite;
}

.nameplate--koi-pond .nameplate-art__item--right::before {
  left: -8px;
  top: 6px;
  width: 10px;
  height: 10px;
  background: linear-gradient(90deg, #ff9d58, #ffffff);
  clip-path: polygon(0 50%, 100% 0, 100% 100%);
}

.nameplate--koi-pond .nameplate-art__item--right::after {
  right: 5px;
  top: 8px;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: #24324d;
}

.nameplate--koi-pond .nameplate-art__item--center {
  right: 44px;
  top: 12px;
  width: 84px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(180,244,255,0.45);
  animation: npRipple 3s ease-in-out infinite;
}

.nameplate--koi-pond .nameplate-art__item--center::before {
  inset: 6px 10px;
  border-radius: inherit;
  border: 1px solid rgba(180,244,255,0.22);
}

/* 11. Cityscape */

.nameplate--cityscape {
  --np-shell: linear-gradient(135deg, #15092f 0%, #4a1887 48%, #27104b 100%);
  --np-inner: linear-gradient(180deg, rgba(200,115,255,0.14), rgba(255,255,255,0.03));
  --np-border: rgba(220,142,255,0.38);
  --np-glow: rgba(184,101,255,0.22);
  --np-accent: #d888ff;
  --np-top-line: linear-gradient(90deg, rgba(255,179,246,0.16), rgba(225,150,255,0.96), rgba(115,204,255,0.20));
  --np-bottom-line: linear-gradient(90deg, rgba(225,150,255,0.46), rgba(115,204,255,0.16), transparent 78%);
  --np-edge: radial-gradient(circle at 100% 50%, rgba(225,150,255,0.22), rgba(115,204,255,0.10), transparent 62%);
  --np-particle: rgba(244,199,255,0.92);
}

.nameplate--cityscape .nameplate-art__item--right,
.nameplate--cityscape .nameplate-art__item--center {
  opacity: 1;
}

.nameplate--cityscape .nameplate-art__item--right {
  right: 10px;
  bottom: 6px;
  width: 120px;
  height: 38px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0)),
    linear-gradient(180deg, #7f42ff, #5120ab) right 0 bottom 0 / 18px 28px no-repeat,
    linear-gradient(180deg, #a756ff, #6a26ca) right 22px bottom 0 / 20px 18px no-repeat,
    linear-gradient(180deg, #8c53ff, #6128bf) right 48px bottom 0 / 16px 24px no-repeat,
    linear-gradient(180deg, #c169ff, #7a31cf) right 70px bottom 0 / 18px 30px no-repeat,
    linear-gradient(180deg, #9257ff, #5f2ab8) right 92px bottom 0 / 14px 16px no-repeat;
  filter: drop-shadow(0 0 10px rgba(206, 129, 255, 0.18));
  animation: npWindows 3.4s ease-in-out infinite;
}

.nameplate--cityscape .nameplate-art__item--right::before {
  inset: 8px 4px 2px 8px;
  background:
    linear-gradient(90deg, transparent 0 10%, rgba(255,223,130,0.72) 10% 12%, transparent 12% 22%, rgba(255,223,130,0.55) 22% 24%, transparent 24% 40%, rgba(255,223,130,0.72) 40% 42%, transparent 42% 58%, rgba(255,223,130,0.55) 58% 60%, transparent 60% 76%, rgba(255,223,130,0.72) 76% 78%, transparent 78%);
  opacity: 0.85;
}

.nameplate--cityscape .nameplate-art__item--center {
  right: 98px;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,246,198,0.95);
  box-shadow:
    22px 10px 0 0 rgba(255,246,198,0.75),
    46px 2px 0 -1px rgba(255,246,198,0.82),
    68px 12px 0 -1px rgba(255,246,198,0.65);
  animation: npTwinkle 2.6s ease-in-out infinite;
}

/* 12. Cat Beans */

.nameplate--cat-beans {
  --np-shell: linear-gradient(135deg, #110326 0%, #4f167b 48%, #220942 100%);
  --np-inner: linear-gradient(180deg, rgba(194,116,255,0.12), rgba(255,255,255,0.03));
  --np-border: rgba(210,130,255,0.36);
  --np-glow: rgba(188,112,255,0.22);
  --np-accent: #f2a7c8;
  --np-top-line: linear-gradient(90deg, rgba(255,211,230,0.16), rgba(194,116,255,0.96), rgba(255,174,204,0.20));
  --np-bottom-line: linear-gradient(90deg, rgba(194,116,255,0.42), rgba(255,174,204,0.16), transparent 78%);
  --np-edge: radial-gradient(circle at 100% 50%, rgba(255,174,204,0.18), rgba(194,116,255,0.10), transparent 62%);
  --np-particle: rgba(255,210,228,0.90);
}

.nameplate--cat-beans .nameplate-art__item--right,
.nameplate--cat-beans .nameplate-art__item--center {
  opacity: 1;
}

.nameplate--cat-beans .nameplate-art__item--right {
  right: 18px;
  top: -2px;
  width: 40px;
  height: 50px;
  animation: npPawPeek 3.2s ease-in-out infinite;
}

.nameplate--cat-beans .nameplate-art__item--right::before {
  left: 8px;
  top: 18px;
  width: 24px;
  height: 22px;
  border-radius: 54% 54% 58% 58%;
  background: #ffb8ca;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.08);
}

.nameplate--cat-beans .nameplate-art__item--right::after {
  left: 6px;
  top: 0;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #ff94b5;
  box-shadow:
    10px -2px 0 0 #ff94b5,
    20px 0 0 0 #ff94b5,
    30px 5px 0 0 #ff94b5;
}

.nameplate--cat-beans .nameplate-art__item--center {
  right: 84px;
  bottom: 10px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #ffb8ca;
  box-shadow:
    14px 3px 0 -1px #ff9fbe,
    28px -2px 0 -1px #ffb8ca;
  animation: npFloat 3.2s ease-in-out infinite;
}

/* 13. Twilight Galaxy */

.nameplate--twilight-galaxy {
  --np-shell: linear-gradient(135deg, #11163f 0%, #3245a6 42%, #6c4bd8 100%);
  --np-inner: linear-gradient(180deg, rgba(146,190,255,0.12), rgba(255,255,255,0.04));
  --np-border: rgba(147,188,255,0.36);
  --np-glow: rgba(126,157,255,0.22);
  --np-accent: #c5b9ff;
  --np-top-line: linear-gradient(90deg, rgba(214,223,255,0.16), rgba(197,185,255,0.96), rgba(120,221,255,0.18));
  --np-bottom-line: linear-gradient(90deg, rgba(197,185,255,0.46), rgba(120,221,255,0.14), transparent 78%);
  --np-edge: radial-gradient(circle at 100% 50%, rgba(197,185,255,0.20), rgba(120,221,255,0.10), transparent 62%);
  --np-particle: rgba(232,230,255,0.92);
}

.nameplate--twilight-galaxy .nameplate-art__item--left,
.nameplate--twilight-galaxy .nameplate-art__item--center,
.nameplate--twilight-galaxy .nameplate-art__item--right {
  opacity: 1;
}

.nameplate--twilight-galaxy .nameplate-art__item--left {
  right: 76px;
  top: 14px;
  width: 72px;
  height: 22px;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(110,180,255,0.26), transparent 44%),
    radial-gradient(ellipse at 72% 50%, rgba(213,140,255,0.22), transparent 42%);
  filter: blur(2px);
  animation: npFloat 5s ease-in-out infinite;
}

.nameplate--twilight-galaxy .nameplate-art__item--center {
  right: 18px;
  top: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 36%, rgba(255,255,255,0.88) 0 18%, rgba(255,247,193,0.92) 19% 62%, rgba(255,247,193,0.16) 63%, transparent 64%);
  box-shadow: 0 0 16px rgba(255,247,193,0.20);
}

.nameplate--twilight-galaxy .nameplate-art__item--right {
  right: 54px;
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.96);
  box-shadow:
    18px 8px 0 0 rgba(255,255,255,0.82),
    42px 3px 0 -1px rgba(255,255,255,0.72),
    58px 14px 0 -1px rgba(255,236,170,0.82),
    74px 2px 0 -2px rgba(255,255,255,0.66);
  animation: npTwinkle 2.5s ease-in-out infinite;
}

/* 14. Vengeance */

.nameplate--vengeance {
  --np-shell: linear-gradient(135deg, #08090e 0%, #2a0f24 44%, #120815 100%);
  --np-inner: linear-gradient(180deg, rgba(255,90,175,0.12), rgba(255,255,255,0.02));
  --np-border: rgba(185,96,142,0.34);
  --np-glow: rgba(255,70,145,0.18);
  --np-accent: #ff73bb;
  --np-top-line: linear-gradient(90deg, rgba(255,176,215,0.14), rgba(255,115,187,0.96), rgba(145,104,255,0.18));
  --np-bottom-line: linear-gradient(90deg, rgba(255,115,187,0.44), rgba(145,104,255,0.14), transparent 78%);
  --np-edge: radial-gradient(circle at 100% 50%, rgba(255,115,187,0.24), rgba(145,104,255,0.10), transparent 62%);
  --np-particle: rgba(255,195,225,0.88);
}

.nameplate--vengeance .nameplate-art__item--left,
.nameplate--vengeance .nameplate-art__item--center,
.nameplate--vengeance .nameplate-art__item--right {
  opacity: 1;
}

.nameplate--vengeance .nameplate-art__item--center {
  right: 88px;
  top: 10px;
  width: 80px;
  height: 14px;
  background:
    linear-gradient(90deg, rgba(170,170,190,0.75) 0 12%, transparent 12% 18%, rgba(170,170,190,0.75) 18% 30%, transparent 30% 36%, rgba(170,170,190,0.75) 36% 48%, transparent 48% 54%, rgba(170,170,190,0.75) 54% 66%, transparent 66%);
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.10));
}

.nameplate--vengeance .nameplate-art__item--left {
  left: 76px;
  bottom: 8px;
  width: 24px;
  height: 24px;
  border: 2px solid rgba(190,190,210,0.72);
  border-radius: 50%;
  box-shadow: 18px 0 0 -2px rgba(190,190,210,0.72);
}

.nameplate--vengeance .nameplate-art__item--right {
  right: 0;
  bottom: -4px;
  width: 112px;
  height: 34px;
  animation: npFire 1.8s ease-in-out infinite;
  filter: drop-shadow(0 0 14px rgba(255, 85, 170, 0.26));
}

.nameplate--vengeance .nameplate-art__item--right::before {
  inset: 0;
  background:
    radial-gradient(ellipse at 10% 100%, rgba(255, 184, 220, 0.82) 0 12%, transparent 13%),
    radial-gradient(ellipse at 28% 100%, rgba(255, 90, 175, 0.96) 0 18%, transparent 19%),
    radial-gradient(ellipse at 46% 100%, rgba(115, 84, 255, 0.88) 0 22%, transparent 23%),
    radial-gradient(ellipse at 66% 100%, rgba(255, 126, 198, 0.88) 0 18%, transparent 19%),
    radial-gradient(ellipse at 84% 100%, rgba(255, 82, 152, 0.92) 0 20%, transparent 21%),
    radial-gradient(ellipse at 100% 100%, rgba(175, 96, 255, 0.78) 0 14%, transparent 15%);
}

.nameplate--vengeance .nameplate-art__item--right::after {
  left: 8px;
  right: 10px;
  bottom: 4px;
  height: 20px;
  background:
    radial-gradient(ellipse at 16% 100%, rgba(255,255,255,0.55) 0 5%, transparent 6%),
    radial-gradient(ellipse at 42% 100%, rgba(255, 175, 225, 0.48) 0 8%, transparent 9%),
    radial-gradient(ellipse at 74% 100%, rgba(255, 210, 236, 0.42) 0 7%, transparent 8%);
  filter: blur(0.6px);
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 640px) {
  .nameplate--lg {
    --avatar-size: 48px;
    --plate-height: 66px;
    --plate-pad-right: 16px;
    --plate-pad-left: calc(var(--avatar-size) + 16px);
  }

  .nameplate--lg .nameplate-title {
    font-size: 0.98rem;
  }

  .nameplate--lg .nameplate-subtitle {
    font-size: 0.7rem;
  }

  .nameplate-fx__particle--1 { right: 78px; }
  .nameplate-fx__particle--2 { right: 38px; }
  .nameplate-fx__particle--3 { right: 66px; }

  .nameplate--midnight-racer .nameplate-art__item--right {
    width: 72px;
    height: 18px;
    right: 10px;
  }

  .nameplate--midnight-racer .nameplate-art__item--right::before {
    width: 36px;
    height: 14px;
    left: 16px;
    top: -8px;
  }

  .nameplate--midnight-racer .nameplate-art__item--center {
    width: 62px;
    right: 82px;
  }

  .nameplate--blaze-fury .nameplate-art__item--right,
  .nameplate--violet-inferno .nameplate-art__item--right,
  .nameplate--vengeance .nameplate-art__item--right {
    width: 86px;
  }

  .nameplate--sakura-blossom .nameplate-art__item--right {
    width: 56px;
  }

  .nameplate--cityscape .nameplate-art__item--right {
    width: 90px;
  }
}

/* =========================
   ASSET NAMECARDS
========================= */

.nameplate--asset {
  --np-asset-border: rgba(255,255,255,0.22);
  --np-asset-glow: rgba(255,255,255,0.18);
  --np-asset-title: #ffffff;
  --np-asset-subtitle: rgba(240,245,255,0.84);
  --np-asset-badge-bg: rgba(255,255,255,0.22);
  --np-asset-badge-fg: #ffffff;

  background: linear-gradient(135deg, rgba(15,18,34,0.94), rgba(24,30,56,0.9));
  color: var(--np-asset-title);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    0 18px 36px rgba(8,12,26,0.34),
    0 0 0 1px var(--np-asset-border),
    0 0 26px var(--np-asset-glow);
}

.nameplate--asset::before {
  inset: 3px;
  border-radius: calc(var(--plate-radius) - 5px);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.01)),
    linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.08),
    inset 0 -18px 28px rgba(0,0,0,0.16);
}

.nameplate--asset::after {
  left: calc(var(--plate-pad-left) + 10px);
  right: 16px;
  bottom: 10px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,0.22), rgba(255,255,255,0.04), transparent 90%);
  opacity: 0.82;
}

.nameplate-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.nameplate-media__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  filter: saturate(1.02) contrast(1.03) brightness(0.9);
}

.nameplate-media__fx {
  position: absolute;
  inset: 0;
  display: block;
  background:
    radial-gradient(circle at 84% 24%, var(--np-fx-hotspot, rgba(255,255,255,0.2)) 0%, transparent 26%),
    linear-gradient(115deg, transparent 16%, var(--np-fx-streak, rgba(255,255,255,0.16)) 42%, transparent 70%);
  opacity: 0.62;
  mix-blend-mode: screen;
  pointer-events: none;
  animation: npAssetAuraPulse 5.8s ease-in-out infinite;
}

.nameplate-media__sprite {
  --np-sprite-fill: radial-gradient(circle at 35% 32%, rgba(255,255,255,0.96) 0%, var(--np-fx-primary, rgba(255,255,255,0.84)) 44%, var(--np-fx-secondary, rgba(180,220,255,0.56)) 74%, transparent 80%);
  --np-sprite-radius: 999px;

  position: absolute;
  z-index: 1;
  display: block;
  width: 80px;
  height: 62px;
  background: var(--np-sprite-fill);
  border-radius: var(--np-sprite-radius);
  opacity: 0.86;
  mix-blend-mode: screen;
  pointer-events: none;
  filter:
    saturate(1.18)
    brightness(1.16)
    drop-shadow(0 0 9px rgba(255,255,255,0.34))
    drop-shadow(0 0 18px var(--np-asset-glow));
  will-change: transform, opacity, filter;
}

.nameplate-media__sprite--frame {
  display: none;
}

.nameplate-media__sprite--1 {
  right: 8%;
  top: -8%;
  width: 72px;
  height: 54px;
  animation: npAssetSparkPop 2.6s ease-in-out infinite;
}

.nameplate-media__sprite--2 {
  right: -4%;
  bottom: -20%;
  width: 104px;
  height: 68px;
  opacity: 0.78;
  animation: npAssetSpriteRise 4.6s ease-in-out infinite;
}

.nameplate-media__sprite--3 {
  left: 44%;
  top: -5%;
  width: 124px;
  height: 64px;
  opacity: 0.72;
  animation: npAssetSpriteSweep 5.4s ease-in-out infinite;
}

.nameplate-media__sprite--4 {
  left: -8%;
  bottom: -15%;
  width: 90px;
  height: 66px;
  opacity: 0.64;
  animation: npAssetSpriteFloat 4.2s ease-in-out infinite;
}

.nameplate-media__sprite--5 {
  right: 21%;
  top: 18%;
  width: 58px;
  height: 44px;
  opacity: 0.7;
  animation: npAssetSparkPop 3.3s ease-in-out 0.45s infinite;
}

.nameplate-media__sprite--6 {
  right: -13%;
  top: 8%;
  width: 128px;
  height: 66px;
  opacity: 0.52;
  animation: npAssetSpriteSweep 6.2s ease-in-out 0.7s infinite;
}

.nameplate-media__shade,
.nameplate-media__shine {
  position: absolute;
  inset: 0;
  display: block;
}

.nameplate-media__shade {
  background:
    linear-gradient(90deg, rgba(7,10,20,0.18) 0%, rgba(7,10,20,0.08) 16%, transparent 34%),
    radial-gradient(circle at 48% 52%, rgba(255,255,255,0.02) 0%, rgba(255,255,255,0.02) 18%, rgba(6,10,22,0.28) 82%);
}

.nameplate-media__shine {
  background: linear-gradient(112deg, transparent 20%, rgba(255,255,255,0.16) 46%, rgba(255,255,255,0.04) 54%, transparent 66%);
  transform: translateX(-128%);
  animation: npAssetShine 6.8s ease-in-out infinite;
  opacity: 0.65;
}

.nameplate--asset .nameplate-avatar {
  border-color: rgba(14,18,34,0.92);
  box-shadow:
    0 0 0 4px rgba(255,255,255,0.1),
    0 10px 22px rgba(0,0,0,0.34),
    0 0 18px rgba(255,255,255,0.12);
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.22), transparent 38%),
    linear-gradient(180deg, rgba(10,14,28,0.98), rgba(18,24,46,0.96));
}

.nameplate--asset .nameplate-title {
  color: var(--np-asset-title);
  text-shadow: 0 2px 12px rgba(0,0,0,0.34);
}

.nameplate--asset .nameplate-subtitle {
  color: var(--np-asset-subtitle);
  text-shadow: 0 2px 10px rgba(0,0,0,0.26);
}

.nameplate--asset .nameplate-verified {
  background: var(--np-asset-badge-bg);
  color: var(--np-asset-badge-fg);
  box-shadow: 0 0 14px rgba(255,255,255,0.18);
}

.nameplate--asset-sakura {
  --np-asset-border: rgba(255, 198, 232, 0.48);
  --np-asset-glow: rgba(246, 191, 241, 0.25);
  --np-asset-title: #fff5fd;
  --np-asset-subtitle: rgba(255, 240, 250, 0.88);
  --np-asset-badge-bg: rgba(255, 224, 246, 0.26);
  --np-fx-primary: rgba(255,205,232,0.94);
  --np-fx-secondary: rgba(255,132,185,0.68);
  --np-fx-hotspot: rgba(255,175,216,0.28);
  --np-fx-streak: rgba(255,214,237,0.18);
  --np-sprite-radius: 72% 28% 64% 36%;
}

.nameplate--asset-winter {
  --np-asset-border: rgba(180, 227, 255, 0.46);
  --np-asset-glow: rgba(147, 214, 255, 0.26);
  --np-asset-title: #f4fbff;
  --np-asset-subtitle: rgba(232, 246, 255, 0.88);
  --np-asset-badge-bg: rgba(202, 239, 255, 0.24);
  --np-fx-primary: rgba(255,255,255,0.98);
  --np-fx-secondary: rgba(174,221,255,0.72);
  --np-fx-hotspot: rgba(196,232,255,0.26);
  --np-fx-streak: rgba(218,243,255,0.18);
}

.nameplate--asset-galaxy {
  --np-asset-border: rgba(192, 173, 255, 0.44);
  --np-asset-glow: rgba(162, 136, 255, 0.28);
  --np-asset-title: #fbf7ff;
  --np-asset-subtitle: rgba(230, 222, 255, 0.86);
  --np-asset-badge-bg: rgba(206, 188, 255, 0.24);
  --np-fx-primary: rgba(219,224,255,0.96);
  --np-fx-secondary: rgba(255,151,232,0.68);
  --np-fx-hotspot: rgba(166,184,255,0.28);
  --np-fx-streak: rgba(209,185,255,0.2);
}

.nameplate--asset-glitch {
  --np-asset-border: rgba(113, 239, 255, 0.42);
  --np-asset-glow: rgba(82, 214, 255, 0.24);
  --np-asset-title: #ecffff;
  --np-asset-subtitle: rgba(224, 250, 255, 0.82);
  --np-asset-badge-bg: rgba(92, 242, 255, 0.22);
  --np-fx-primary: rgba(96,244,255,0.94);
  --np-fx-secondary: rgba(255,89,214,0.74);
  --np-fx-hotspot: rgba(74,233,255,0.3);
  --np-fx-streak: rgba(255,92,218,0.2);
  --np-sprite-radius: 3px;
}

.nameplate--asset-lightning {
  --np-asset-border: rgba(255, 218, 119, 0.44);
  --np-asset-glow: rgba(255, 198, 79, 0.24);
  --np-asset-title: #fffbee;
  --np-asset-subtitle: rgba(255, 244, 212, 0.86);
  --np-asset-badge-bg: rgba(255, 231, 153, 0.23);
  --np-fx-primary: rgba(255,237,142,0.96);
  --np-fx-secondary: rgba(255,156,55,0.7);
  --np-fx-hotspot: rgba(255,207,86,0.3);
  --np-fx-streak: rgba(255,225,122,0.22);
  --np-sprite-radius: 45% 55% 44% 56%;
}

.nameplate--asset-neon {
  --np-asset-border: rgba(255, 137, 247, 0.42);
  --np-asset-glow: rgba(255, 113, 232, 0.24);
  --np-asset-title: #fff5fe;
  --np-asset-subtitle: rgba(255, 224, 248, 0.86);
  --np-asset-badge-bg: rgba(255, 171, 245, 0.22);
  --np-fx-primary: rgba(255,121,239,0.94);
  --np-fx-secondary: rgba(92,223,255,0.72);
  --np-fx-hotspot: rgba(255,109,230,0.3);
  --np-fx-streak: rgba(101,224,255,0.22);
}

.nameplate--asset-retro {
  --np-asset-border: rgba(255, 170, 111, 0.44);
  --np-asset-glow: rgba(255, 124, 96, 0.24);
  --np-asset-title: #fff6ef;
  --np-asset-subtitle: rgba(255, 230, 217, 0.86);
  --np-asset-badge-bg: rgba(255, 188, 156, 0.22);
  --np-fx-primary: rgba(255,202,118,0.95);
  --np-fx-secondary: rgba(255,104,122,0.7);
  --np-fx-hotspot: rgba(255,167,95,0.28);
  --np-fx-streak: rgba(255,215,129,0.2);
  --np-sprite-radius: 4px;
}

.nameplate--asset-celestial {
  --np-asset-border: rgba(255, 243, 196, 0.46);
  --np-asset-glow: rgba(255, 229, 140, 0.26);
  --np-asset-title: #fffdf4;
  --np-asset-subtitle: rgba(255, 246, 220, 0.9);
  --np-asset-badge-bg: rgba(255, 239, 170, 0.24);
  --np-fx-primary: rgba(255,245,185,0.96);
  --np-fx-secondary: rgba(176,223,255,0.68);
  --np-fx-hotspot: rgba(255,232,139,0.28);
  --np-fx-streak: rgba(255,245,190,0.2);
  --np-sprite-radius: 44% 56% 44% 56%;
}

.nameplate--asset-cambodia {
  --np-asset-border: rgba(255, 218, 139, 0.48);
  --np-asset-glow: rgba(255, 184, 73, 0.24);
  --np-asset-title: #fffaf0;
  --np-asset-subtitle: rgba(255, 238, 204, 0.88);
  --np-asset-badge-bg: rgba(255, 221, 151, 0.22);
  --np-fx-primary: rgba(255,219,132,0.96);
  --np-fx-secondary: rgba(255,151,55,0.7);
  --np-fx-hotspot: rgba(255,190,78,0.28);
  --np-fx-streak: rgba(255,224,155,0.2);
  --np-sprite-radius: 40% 60% 56% 44%;
}

.nameplate--asset-sakura .nameplate-media__fx,
.nameplate--asset-sakura .nameplate-media__sprite {
  background-image: image-set(url("./namecard/sakura/fx.avif") type("image/avif"), url("./namecard/sakura/fx.webp") type("image/webp"));
}

.nameplate--asset-winter .nameplate-media__fx,
.nameplate--asset-winter .nameplate-media__sprite {
  background-image: image-set(url("./namecard/winter/fx.avif") type("image/avif"), url("./namecard/winter/fx.webp") type("image/webp"));
}

.nameplate--asset-galaxy .nameplate-media__fx,
.nameplate--asset-galaxy .nameplate-media__sprite {
  background-image: image-set(url("./namecard/galaxy/fx.avif") type("image/avif"), url("./namecard/galaxy/fx.webp") type("image/webp"));
}

.nameplate--asset-glitch .nameplate-media__fx,
.nameplate--asset-glitch .nameplate-media__sprite {
  background-image: image-set(url("./namecard/glitch/fx.avif") type("image/avif"), url("./namecard/glitch/fx.webp") type("image/webp"));
}

.nameplate--asset-lightning .nameplate-media__fx,
.nameplate--asset-lightning .nameplate-media__sprite {
  background-image: image-set(url("./namecard/lightning/fx.avif") type("image/avif"), url("./namecard/lightning/fx.webp") type("image/webp"));
}

.nameplate--asset-neon .nameplate-media__fx,
.nameplate--asset-neon .nameplate-media__sprite {
  background-image: image-set(url("./namecard/Neon/fx.avif") type("image/avif"), url("./namecard/Neon/fx.webp") type("image/webp"));
}

.nameplate--asset-retro .nameplate-media__fx,
.nameplate--asset-retro .nameplate-media__sprite {
  background-image: image-set(url("./namecard/retro/fx.avif") type("image/avif"), url("./namecard/retro/fx.webp") type("image/webp"));
}

.nameplate--asset-celestial .nameplate-media__fx,
.nameplate--asset-celestial .nameplate-media__sprite {
  background-image: image-set(url("./namecard/celestial/fx.avif") type("image/avif"), url("./namecard/celestial/fx.webp") type("image/webp"));
}

.nameplate--asset-cambodia .nameplate-media__fx,
.nameplate--asset-cambodia .nameplate-media__sprite {
  background-image: image-set(url("./namecard/cambodia/fx.avif") type("image/avif"), url("./namecard/cambodia/fx.webp") type("image/webp"));
}

.nameplate--asset-sakura .nameplate-media__sprite:not(.nameplate-media__sprite--frame) {
  display: none;
}

.nameplate--asset-sakura .nameplate-media__sprite--frame {
  display: block;
  inset: 2px;
  width: auto;
  height: auto;
  border-radius: inherit;
  background-size: 200% 300%;
  background-position: 0% 50%;
  opacity: 0.5;
  filter:
    saturate(1.2)
    brightness(1.08)
    drop-shadow(0 0 13px rgba(255,186,232,0.5));
  animation: npAssetFrameBloom 4.8s ease-in-out infinite;
}

.nameplate--asset-winter .nameplate-media__sprite {
  --np-atlas-size: 600% 400%;
}

.nameplate--asset-winter .nameplate-media__sprite--1 { --np-sprite-x: 100%; --np-sprite-y: 0%; }
.nameplate--asset-winter .nameplate-media__sprite--2 { --np-sprite-x: 80%; --np-sprite-y: 100%; }
.nameplate--asset-winter .nameplate-media__sprite--3 { --np-sprite-x: 60%; --np-sprite-y: 66.666%; }
.nameplate--asset-winter .nameplate-media__sprite--4 { --np-sprite-x: 0%; --np-sprite-y: 66.666%; }
.nameplate--asset-winter .nameplate-media__sprite--5 { --np-sprite-x: 20%; --np-sprite-y: 0%; }
.nameplate--asset-winter .nameplate-media__sprite--6 { --np-sprite-x: 100%; --np-sprite-y: 33.333%; }

.nameplate--asset-neon .nameplate-media__sprite--1,
.nameplate--asset-glitch .nameplate-media__sprite--1,
.nameplate--asset-lightning .nameplate-media__sprite--1 {
  width: 88px;
  height: 66px;
  opacity: 0.94;
  animation-duration: 2.1s;
}

.nameplate--asset-cambodia .nameplate-media__sprite--2,
.nameplate--asset-celestial .nameplate-media__sprite--2 {
  right: 1%;
  bottom: -13%;
  opacity: 0.88;
}

.nameplate--asset .nameplate-media__fx {
  background:
    radial-gradient(circle at 84% 24%, var(--np-fx-hotspot) 0%, transparent 26%),
    radial-gradient(circle at 20% 92%, rgba(255,255,255,0.12) 0%, transparent 25%),
    linear-gradient(115deg, transparent 16%, var(--np-fx-streak) 42%, transparent 70%);
}

.nameplate--asset .nameplate-media__sprite {
  background: var(--np-sprite-fill);
  background-image: var(--np-sprite-fill);
}

.nameplate--asset-sakura .nameplate-media__sprite:not(.nameplate-media__sprite--frame) {
  display: block;
}

.nameplate--asset-sakura .nameplate-media__sprite--frame {
  display: none;
}

.nameplate--asset-glitch .nameplate-media__sprite,
.nameplate--asset-retro .nameplate-media__sprite {
  --np-sprite-fill: linear-gradient(90deg, transparent 0%, var(--np-fx-primary) 18%, rgba(255,255,255,0.96) 44%, var(--np-fx-secondary) 76%, transparent 100%);
  height: 8px;
}

.nameplate--asset-glitch .nameplate-media__sprite--1,
.nameplate--asset-retro .nameplate-media__sprite--1 {
  height: 6px;
}

.nameplate--asset-lightning .nameplate-media__sprite {
  --np-sprite-fill: linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.92) 18%, var(--np-fx-primary) 46%, var(--np-fx-secondary) 74%, transparent 100%);
  clip-path: polygon(48% 0%, 62% 34%, 100% 34%, 68% 58%, 82% 100%, 45% 68%, 8% 100%, 24% 58%, 0% 34%, 38% 34%);
}

.nameplate--asset-celestial .nameplate-media__sprite,
.nameplate--asset-cambodia .nameplate-media__sprite {
  --np-sprite-fill: radial-gradient(circle at 50% 12%, rgba(255,255,255,0.96) 0 8%, transparent 9% 100%),
    radial-gradient(circle at 50% 88%, rgba(255,255,255,0.9) 0 8%, transparent 9% 100%),
    radial-gradient(circle at 12% 50%, var(--np-fx-primary) 0 8%, transparent 9% 100%),
    radial-gradient(circle at 88% 50%, var(--np-fx-secondary) 0 8%, transparent 9% 100%),
    radial-gradient(circle, rgba(255,255,255,0.84) 0 18%, transparent 20% 100%);
}

.nameplate--asset-neon .nameplate-media__sprite {
  --np-sprite-fill: radial-gradient(circle, transparent 0 42%, var(--np-fx-primary) 45% 54%, var(--np-fx-secondary) 58% 64%, transparent 68% 100%);
}

.nameplate--asset:not(.nameplate--asset-neon):not(.nameplate--asset-retro):not(.nameplate--asset-glitch) .nameplate-media__fx,
.nameplate--asset:not(.nameplate--asset-neon):not(.nameplate--asset-retro):not(.nameplate--asset-glitch) .nameplate-media__sprite,
.nameplate--asset:not(.nameplate--asset-neon):not(.nameplate--asset-retro):not(.nameplate--asset-glitch) .nameplate-media__shine {
  display: none;
  animation: none;
}

@keyframes npAssetAuraPulse {
  0%, 100% {
    opacity: 0.38;
    transform: translate3d(0, 0, 0) scale(1);
    filter: saturate(1.04);
  }
  48% {
    opacity: 0.72;
    transform: translate3d(2px, -1px, 0) scale(1.035);
    filter: saturate(1.2);
  }
}

@keyframes npAssetSparkPop {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(0.8) rotate(0deg);
    opacity: 0.36;
    filter: brightness(0.92) drop-shadow(0 0 6px var(--np-asset-glow));
  }
  38% {
    transform: translate3d(-2px, 1px, 0) scale(1.08) rotate(4deg);
    opacity: 0.96;
    filter: brightness(1.34) drop-shadow(0 0 16px var(--np-asset-glow));
  }
  55% {
    transform: translate3d(1px, -2px, 0) scale(0.94) rotate(-3deg);
    opacity: 0.62;
  }
}

@keyframes npAssetSpriteRise {
  0%, 100% {
    transform: translate3d(0, 7px, 0) scale(0.94);
    opacity: 0.38;
  }
  45% {
    transform: translate3d(-3px, -4px, 0) scale(1.06);
    opacity: 0.9;
  }
}

@keyframes npAssetSpriteSweep {
  0%, 100% {
    transform: translate3d(-9px, 2px, 0) scale(0.96) rotate(-2deg);
    opacity: 0.24;
  }
  48% {
    transform: translate3d(8px, -3px, 0) scale(1.04) rotate(2deg);
    opacity: 0.78;
  }
}

@keyframes npAssetSpriteFloat {
  0%, 100% {
    transform: translate3d(0, 3px, 0) scale(0.96) rotate(-3deg);
    opacity: 0.34;
  }
  50% {
    transform: translate3d(4px, -5px, 0) scale(1.05) rotate(3deg);
    opacity: 0.78;
  }
}

@keyframes npAssetFrameBloom {
  0%, 100% {
    transform: scale(1.015);
    opacity: 0.36;
  }
  45% {
    transform: scale(1.04);
    opacity: 0.72;
  }
}

@keyframes npAssetShine {
  0%, 16% { transform: translateX(-128%); opacity: 0; }
  28% { opacity: 0.82; }
  46% { transform: translateX(128%); opacity: 0.36; }
  100% { transform: translateX(128%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .nameplate-media__fx,
  .nameplate-media__sprite,
  .nameplate-media__shine {
    animation: none;
  }
}