/* Discord-like display name fonts + effects (profile + leaderboards) */
@import url("https://fonts.googleapis.com/css2?family=Anton&family=Dancing+Script:wght@600&family=Libre+Baskerville:wght@400;700&family=Nunito:wght@600;700&family=Press+Start+2P&family=UnifrakturCook:wght@700&display=swap");

.wd-name-style,
.ns-preview-sample {
  --ns-a: #f4f4f5;
  --ns-b: #a1a1aa;
  display: inline-block;
  max-width: 100%;
  font-family: var(--ns-font, inherit) !important;
  line-height: 1.15;
  word-break: break-word;
  vertical-align: baseline;
}

/* Beat parent .lb-player strong { color:#fff } and IC h1 { font-family !important } */
.lb-player .wd-name-style,
.lb-player-name .wd-name-style,
.lb-player-link .wd-name-style,
.pp-aside-name .wd-name-style,
.pp-aside-name h1 .wd-name-style,
.ns-live-preview .wd-name-style,
h1 .wd-name-style,
.ns-preview-sample,
body.ic-profile-page .pp-aside-name h1,
body.ic-profile-page .pp-aside-name h1 .wd-name-style,
body.ic-hub-page .pp-aside-name h1 .wd-name-style {
  font-weight: inherit;
  font-family: var(--ns-font, inherit) !important;
}

.wd-name-style.ns-font-default,
.ns-preview-sample.ns-font-default,
.ns-font-btn.ns-font-default { --ns-font: inherit; }
.wd-name-style.ns-font-serif,
.ns-preview-sample.ns-font-serif,
.ns-font-btn.ns-font-serif { --ns-font: "Libre Baskerville", Georgia, serif; }
.wd-name-style.ns-font-rounded,
.ns-preview-sample.ns-font-rounded,
.ns-font-btn.ns-font-rounded { --ns-font: "Nunito", "DM Sans", sans-serif; font-weight: 800; }
.wd-name-style.ns-font-mono,
.ns-preview-sample.ns-font-mono,
.ns-font-btn.ns-font-mono { --ns-font: "JetBrains Mono", ui-monospace, monospace; letter-spacing: -0.02em; }
.wd-name-style.ns-font-pixel,
.ns-preview-sample.ns-font-pixel,
.ns-font-btn.ns-font-pixel { --ns-font: "Press Start 2P", monospace; font-size: 0.78em; line-height: 1.4; }
.wd-name-style.ns-font-block,
.ns-preview-sample.ns-font-block,
.ns-font-btn.ns-font-block { --ns-font: "Anton", Impact, sans-serif; letter-spacing: 0.04em; text-transform: uppercase; }
.wd-name-style.ns-font-gothic,
.ns-preview-sample.ns-font-gothic,
.ns-font-btn.ns-font-gothic { --ns-font: "UnifrakturCook", "Cinzel Decorative", serif; }
.wd-name-style.ns-font-script,
.ns-preview-sample.ns-font-script,
.ns-font-btn.ns-font-script { --ns-font: "Dancing Script", cursive; font-weight: 600; }

.wd-name-style.ns-fx-solid,
.ns-preview-sample.ns-fx-solid,
.ns-fx-btn.ns-fx-solid {
  color: var(--ns-a) !important;
  background: none;
  -webkit-text-fill-color: var(--ns-a);
  text-shadow: none;
  -webkit-text-stroke: 0;
  filter: none;
  animation: none;
}

.wd-name-style.ns-fx-gradient,
.wd-name-style.ns-fx-gummy,
.wd-name-style.ns-fx-prism,
.ns-preview-sample.ns-fx-gradient,
.ns-preview-sample.ns-fx-gummy,
.ns-preview-sample.ns-fx-prism,
.ns-fx-btn.ns-fx-gradient,
.ns-fx-btn.ns-fx-gummy,
.ns-fx-btn.ns-fx-prism {
  color: transparent !important;
  background-image: linear-gradient(90deg, var(--ns-a), var(--ns-b));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  -webkit-text-stroke: 0;
}

.wd-name-style.ns-fx-gummy,
.ns-preview-sample.ns-fx-gummy,
.ns-fx-btn.ns-fx-gummy {
  background-image: linear-gradient(120deg, var(--ns-a), #fff 42%, var(--ns-b));
  filter: saturate(1.2);
}

.wd-name-style.ns-fx-prism,
.ns-preview-sample.ns-fx-prism,
.ns-fx-btn.ns-fx-prism {
  background-image: linear-gradient(
    90deg,
    var(--ns-a),
    var(--ns-b),
    #fff,
    var(--ns-a),
    var(--ns-b)
  );
  background-size: 280% 100%;
  animation: ns-theme 3.2s linear infinite;
}

.wd-name-style.ns-fx-neon,
.ns-preview-sample.ns-fx-neon,
.ns-fx-btn.ns-fx-neon {
  color: var(--ns-a) !important;
  -webkit-text-fill-color: var(--ns-a);
  background: none;
  -webkit-text-stroke: 0;
  text-shadow:
    0 0 2px #fff,
    0 0 6px var(--ns-a),
    0 0 14px var(--ns-a),
    0 0 28px var(--ns-b),
    0 0 42px color-mix(in oklab, var(--ns-b) 80%, transparent);
  animation: ns-neon-flicker 2.4s ease-in-out infinite;
  filter: saturate(1.25);
}

.wd-name-style.ns-fx-pulse,
.ns-preview-sample.ns-fx-pulse,
.ns-fx-btn.ns-fx-pulse {
  color: var(--ns-a) !important;
  -webkit-text-fill-color: var(--ns-a);
  background: none;
  -webkit-text-stroke: 0;
  text-shadow:
    0 0 4px color-mix(in oklab, var(--ns-a) 70%, transparent),
    0 0 16px color-mix(in oklab, var(--ns-b) 55%, transparent);
  animation: ns-pulse 1.8s ease-in-out infinite;
}

.wd-name-style.ns-fx-toon,
.ns-preview-sample.ns-fx-toon,
.ns-fx-btn.ns-fx-toon {
  color: var(--ns-a) !important;
  -webkit-text-fill-color: var(--ns-a);
  background: none;
  -webkit-text-stroke: 2px #0b0b0f;
  paint-order: stroke fill;
  text-shadow: 0 2px 0 #0b0b0f;
  animation: none;
}

.wd-name-style.ns-fx-pop,
.ns-preview-sample.ns-fx-pop,
.ns-fx-btn.ns-fx-pop {
  color: var(--ns-a) !important;
  -webkit-text-fill-color: var(--ns-a);
  background: none;
  -webkit-text-stroke: 0;
  text-shadow:
    2px 2px 0 #0b0b0f,
    -1px 0 0 color-mix(in oklab, var(--ns-b) 75%, transparent),
    1px 0 0 color-mix(in oklab, var(--ns-a) 55%, #fff);
  animation: none;
}

@keyframes ns-theme {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

@keyframes ns-neon-flicker {
  0%, 100% {
    opacity: 1;
    text-shadow:
      0 0 2px #fff,
      0 0 6px var(--ns-a),
      0 0 14px var(--ns-a),
      0 0 28px var(--ns-b),
      0 0 42px color-mix(in oklab, var(--ns-b) 80%, transparent);
  }
  45% {
    opacity: 0.92;
    text-shadow:
      0 0 2px #fff,
      0 0 10px var(--ns-a),
      0 0 22px var(--ns-a),
      0 0 36px var(--ns-b),
      0 0 56px color-mix(in oklab, var(--ns-b) 90%, transparent);
  }
  55% {
    opacity: 1;
  }
}

@keyframes ns-pulse {
  0%, 100% {
    opacity: 0.72;
    filter: brightness(0.92);
    text-shadow:
      0 0 2px color-mix(in oklab, var(--ns-a) 40%, transparent),
      0 0 8px color-mix(in oklab, var(--ns-b) 30%, transparent);
  }
  50% {
    opacity: 1;
    filter: brightness(1.18);
    text-shadow:
      0 0 4px #fff,
      0 0 12px var(--ns-a),
      0 0 28px var(--ns-b),
      0 0 44px color-mix(in oklab, var(--ns-b) 70%, transparent);
  }
}

/* ── Customize panel ── */
.player-fx-picker--edit {
  gap: 12px;
}

.player-customize-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 4px;
}

.player-customize-tabs .lb-tab,
.player-customize-tabs button {
  appearance: none;
  border: 1px solid #2a2a30;
  background: #141418;
  color: #c4c4cc;
  padding: 7px 12px;
  border-radius: 4px;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}

.player-customize-tabs .lb-tab.is-on,
.player-customize-tabs button.is-on {
  background: #f4f4f5;
  color: #0b0b0f;
  border-color: #f4f4f5;
}

.player-customize-pane[hidden] {
  display: none !important;
}

.ns-picker {
  display: grid;
  gap: 16px;
}

.ns-live-preview {
  margin: 0;
  padding: 18px 14px;
  border-radius: 10px;
  border: 1px solid #2a2a30;
  background:
    radial-gradient(ellipse 80% 70% at 50% 20%, rgb(88 101 242 / 0.12), transparent 60%),
    #0a0a0e;
  text-align: center;
  font-size: clamp(1.25rem, 2.4vw, 1.65rem);
  min-height: 64px;
  display: grid;
  place-items: center;
}

.ns-picker__section {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #222228;
  border-radius: 10px;
  background: #101014;
}

.ns-picker__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ns-picker__section-head h5 {
  margin: 0;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9a9aa3;
}

.ns-reset {
  appearance: none;
  border: 0;
  background: transparent;
  color: #7a7a84;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  padding: 2px 4px;
}

.ns-reset:hover { color: #c4c4cc; }

.ns-font-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.ns-fx-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.ns-font-btn,
.ns-fx-btn,
.ns-swatch {
  appearance: none;
  border: 1px solid #2a2a30;
  background: #121218;
  color: #f4f4f5;
  border-radius: 8px;
  cursor: pointer;
  min-height: 52px;
  padding: 8px;
}

.ns-font-btn {
  font-size: 1.35rem;
  display: grid;
  place-items: center;
  gap: 2px;
}

.ns-font-btn small {
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8a8a94;
  font-family: var(--font-sans, system-ui, sans-serif);
}

.ns-fx-btn {
  font-size: 1rem;
  font-weight: 700;
  min-height: 44px;
  display: grid;
  place-items: center;
}

.ns-font-btn.is-on,
.ns-fx-btn.is-on,
.ns-swatch.is-on,
.ns-color-card.is-on {
  border-color: #5865f2;
  box-shadow: 0 0 0 1px #5865f2;
}

/* Proper dual color pickers */
.ns-color-rows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.ns-color-card {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #2a2a30;
  border-radius: 10px;
  background: #121218;
}

.ns-color-card__label {
  font-size: 0.68rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #8f8f99;
}

.ns-color-card__row {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 8px;
  align-items: center;
}

.ns-color-card input[type="color"] {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #2a2a30;
  border-radius: 8px;
  background: #0c0c10;
  cursor: pointer;
  overflow: hidden;
}

.ns-color-card input[type="color"]::-webkit-color-swatch-wrapper { padding: 3px; }
.ns-color-card input[type="color"]::-webkit-color-swatch {
  border: 0;
  border-radius: 5px;
}

.ns-hex {
  width: 100%;
  min-width: 0;
  appearance: none;
  border: 1px solid #2a2a30;
  border-radius: 8px;
  background: #0c0c10;
  color: #f4f4f5;
  font-family: ui-monospace, "JetBrains Mono", monospace;
  font-size: 0.85rem;
  padding: 10px 10px;
  letter-spacing: 0.02em;
}

.ns-hex:focus {
  outline: none;
  border-color: #5865f2;
}

.ns-gradient-preview {
  height: 12px;
  border-radius: 99px;
  border: 1px solid #2a2a30;
  background: linear-gradient(90deg, var(--ns-a), var(--ns-b));
}

.ns-color-presets {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.ns-swatch {
  width: 100%;
  aspect-ratio: 1;
  min-height: 0;
  height: auto;
  padding: 0;
  position: relative;
}

.ns-swatch::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--ns-a), var(--ns-b));
}

.ns-swatch.is-on::before {
  content: "✓";
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 800;
  text-shadow: 0 1px 2px #000;
}

@media (max-width: 640px) {
  .ns-font-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ns-color-rows { grid-template-columns: 1fr; }
  .ns-color-presets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}