/* Unique per-font name fills + particle FX (keyed by font id) */

.fnf-lb-chat__name,
.fnf-chat-name-preview {
  --chat-name-color: #ffe566;
  --chat-name-size: 1.2em;
  position: relative;
  display: inline-block;
  font-weight: 900;
  font-size: var(--chat-name-size);
  line-height: 1.15;
  letter-spacing: 0.02em;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--chat-name-color);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 1px 0 #111)
    drop-shadow(0 0 6px color-mix(in srgb, var(--chat-name-color) 55%, transparent));
  z-index: 1;
}

/* Base solid (overridden per fill) */
.fnf-lb-chat__name,
.fnf-chat-name-preview {
  background-image: linear-gradient(90deg, var(--chat-name-color), var(--chat-name-color));
  background-size: 100% 100%;
}

/* ========== INSIDE-LETTER FILLS (unique per font) ========== */

/* default — classic diagonal shine */
.fnf-chat-fill--default {
  background-image: linear-gradient(
    110deg,
    var(--chat-name-color) 0%,
    var(--chat-name-color) 38%,
    #fff 46%,
    #fff8dc 50%,
    #fff 54%,
    var(--chat-name-color) 62%,
    var(--chat-name-color) 100%
  );
  background-size: 220% 100%;
  animation: fnfFillShine 2.4s linear infinite;
}
@keyframes fnfFillShine {
  0% { background-position: 100% 50%; }
  100% { background-position: -120% 50%; }
}

/* attack-graffiti — neon flicker / spray strobe */
.fnf-chat-fill--attack-graffiti {
  background-image: linear-gradient(
    90deg,
    #ff4d9a,
    #ff9fd0,
    #fff,
    #ff4d9a,
    #c4006a
  );
  background-size: 300% 100%;
  animation: fnfFillNeonFlicker 0.55s steps(3, end) infinite;
}
@keyframes fnfFillNeonFlicker {
  0% { background-position: 0% 50%; filter: drop-shadow(0 1px 0 #111) drop-shadow(0 0 8px #ff4d9a); }
  33% { background-position: 40% 50%; }
  66% { background-position: 70% 50%; filter: drop-shadow(0 1px 0 #111) drop-shadow(0 0 14px #fff); }
  100% { background-position: 100% 50%; }
}

/* lemondrops — vertical drip wash */
.fnf-chat-fill--lemondrops {
  background-image: linear-gradient(
    180deg,
    #fff8c8 0%,
    #ffe566 35%,
    #ffcc00 55%,
    #fff8c8 70%,
    #c9a000 100%
  );
  background-size: 100% 220%;
  animation: fnfFillDrip 2.2s ease-in-out infinite;
}
@keyframes fnfFillDrip {
  0%, 100% { background-position: 50% 0%; }
  50% { background-position: 50% 100%; }
}

/* super-maples — autumn color shift */
.fnf-chat-fill--super-maples {
  background-image: linear-gradient(
    120deg,
    #5dff7a,
    #b8ff4a,
    #ffe566,
    #ff9f43,
    #5dff7a
  );
  background-size: 280% 100%;
  animation: fnfFillMaple 3.5s ease-in-out infinite;
}
@keyframes fnfFillMaple {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* super-shiny — fast chrome metallic */
.fnf-chat-fill--super-shiny {
  background-image: linear-gradient(
    100deg,
    #1a6bb8 0%,
    #49b6ff 25%,
    #fff 45%,
    #e8f6ff 50%,
    #49b6ff 55%,
    #0d4a8a 100%
  );
  background-size: 250% 100%;
  animation: fnfFillChrome 1.4s linear infinite;
}
@keyframes fnfFillChrome {
  0% { background-position: 120% 50%; }
  100% { background-position: -80% 50%; }
}

/* youth-touch — hot strobe flash */
.fnf-chat-fill--youth-touch {
  background-image: linear-gradient(90deg, #ff9f43, #fff, #ff6a00, #ffe566);
  background-size: 200% 100%;
  animation: fnfFillStrobe 0.9s steps(2, end) infinite;
}
@keyframes fnfFillStrobe {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* sugar-flare — candy rainbow scroll */
.fnf-chat-fill--sugar-flare {
  background-image: linear-gradient(
    90deg,
    #ff6bcb,
    #ff9fd0,
    #ffe566,
    #49b6ff,
    #c44cff,
    #ff6bcb
  );
  background-size: 400% 100%;
  animation: fnfFillCandy 2.8s linear infinite;
}
@keyframes fnfFillCandy {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* angel — soft breathe glow */
.fnf-chat-fill--angel {
  background-image: radial-gradient(
    ellipse at 50% 50%,
    #fff 0%,
    #f5f0ff 40%,
    #d4c8ff 70%,
    #fff 100%
  );
  background-size: 160% 160%;
  animation: fnfFillBreathe 2.6s ease-in-out infinite;
}
@keyframes fnfFillBreathe {
  0%, 100% { background-position: 30% 40%; filter: drop-shadow(0 1px 0 #111) drop-shadow(0 0 4px #fff); }
  50% { background-position: 70% 60%; filter: drop-shadow(0 1px 0 #111) drop-shadow(0 0 14px #f5f0ff); }
}

/* super-shake — jitter shimmer */
.fnf-chat-fill--super-shake {
  background-image: linear-gradient(
    90deg,
    #ff5c7a,
    #fff,
    #ff5c7a,
    #ff9f43,
    #ff5c7a
  );
  background-size: 180% 100%;
  animation: fnfFillShake 0.18s linear infinite;
}
@keyframes fnfFillShake {
  0% { background-position: 0% 50%; transform: translateX(0); }
  25% { background-position: 40% 50%; transform: translateX(-0.5px); }
  50% { background-position: 70% 50%; transform: translateX(0.5px); }
  75% { background-position: 100% 50%; transform: translateX(-0.3px); }
  100% { background-position: 0% 50%; transform: translateX(0); }
}

/* super-circus — striped carnival */
.fnf-chat-fill--super-circus {
  background-image: repeating-linear-gradient(
    -35deg,
    #ff9f43 0 8px,
    #ffe566 8px 16px,
    #ff5c7a 16px 24px,
    #49b6ff 24px 32px
  );
  background-size: 200% 100%;
  animation: fnfFillStripes 1.8s linear infinite;
}
@keyframes fnfFillStripes {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* super-peace — calm ocean wave */
.fnf-chat-fill--super-peace {
  background-image: linear-gradient(
    180deg,
    #a8ffe0,
    #7ef9c1,
    #49b6ff,
    #7ef9c1,
    #c8fff0
  );
  background-size: 100% 300%;
  animation: fnfFillWave 4s ease-in-out infinite;
}
@keyframes fnfFillWave {
  0%, 100% { background-position: 50% 0%; }
  50% { background-position: 50% 100%; }
}

/* super-wild — wild hue spin */
.fnf-chat-fill--super-wild {
  background-image: conic-gradient(
    from 0deg,
    #ff4d9a,
    #ffe566,
    #5dff7a,
    #49b6ff,
    #c44cff,
    #ff4d9a
  );
  background-size: 100% 100%;
  animation: fnfFillHueSpin 2.2s linear infinite;
}
@keyframes fnfFillHueSpin {
  0% { filter: drop-shadow(0 1px 0 #111) hue-rotate(0deg) drop-shadow(0 0 8px #ff4d9a); }
  100% { filter: drop-shadow(0 1px 0 #111) hue-rotate(360deg) drop-shadow(0 0 8px #49b6ff); }
}

/* robus — hard blue flash bars */
.fnf-chat-fill--robus {
  background-image: linear-gradient(
    90deg,
    #0a3d6e 0%,
    #49b6ff 30%,
    #fff 48%,
    #49b6ff 55%,
    #0a3d6e 100%
  );
  background-size: 200% 100%;
  animation: fnfFillHardFlash 1.1s ease-in-out infinite;
}
@keyframes fnfFillHardFlash {
  0%, 100% { background-position: 100% 50%; }
  40% { background-position: 0% 50%; }
  60% { background-position: 20% 50%; }
}

/* kiotto — twinkle dots in fill */
.fnf-chat-fill--kiotto {
  background-image:
    radial-gradient(circle at 20% 40%, #fff 0 2px, transparent 3px),
    radial-gradient(circle at 70% 60%, #fff 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 45% 80%, #ffe566 0 1.5px, transparent 2.5px),
    linear-gradient(120deg, #c44cff, #ff6bcb, #9b8cff, #c44cff);
  background-size: 100% 100%, 100% 100%, 100% 100%, 220% 100%;
  animation: fnfFillTwinkle 1.6s ease-in-out infinite;
}
@keyframes fnfFillTwinkle {
  0%, 100% { background-position: 0 0, 0 0, 0 0, 0% 50%; opacity: 1; }
  50% { background-position: 4px -3px, -3px 4px, 2px 2px, 80% 50%; }
}

/* knight-warrior — steel scrape */
.fnf-chat-fill--knight-warrior {
  background-image: linear-gradient(
    105deg,
    #5a6490 0%,
    #b8c0ff 28%,
    #fff 45%,
    #b8c0ff 55%,
    #3a4270 100%
  );
  background-size: 240% 100%;
  animation: fnfFillSteel 2s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes fnfFillSteel {
  0% { background-position: 110% 50%; }
  45% { background-position: -40% 50%; }
  100% { background-position: -40% 50%; }
}

/* texas-crust — heat shimmer */
.fnf-chat-fill--texas-crust {
  background-image: linear-gradient(
    180deg,
    #ffe566,
    #ffb347,
    #ff6a00,
    #ffb347,
    #ffe566
  );
  background-size: 100% 200%;
  animation: fnfFillHeat 1.5s ease-in-out infinite;
}
@keyframes fnfFillHeat {
  0%, 100% { background-position: 50% 0%; transform: skewX(0deg); }
  33% { background-position: 50% 40%; transform: skewX(0.4deg); }
  66% { background-position: 50% 80%; transform: skewX(-0.4deg); }
}

/* super-crawler — pixel crawl */
.fnf-chat-fill--super-crawler {
  background-image: repeating-linear-gradient(
    90deg,
    #3a8a4a 0 4px,
    #5dff7a 4px 8px,
    #1e5a2e 8px 12px,
    #b8ff4a 12px 16px
  );
  background-size: 200% 100%;
  animation: fnfFillCrawl 1.2s steps(8, end) infinite;
}
@keyframes fnfFillCrawl {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* ithaca — soft gold pulse */
.fnf-chat-fill--ithaca {
  background-image: radial-gradient(
    circle at 50% 50%,
    #fff8c8 0%,
    #ffe566 45%,
    #c9a000 100%
  );
  background-size: 140% 140%;
  animation: fnfFillGoldPulse 2s ease-in-out infinite;
}
@keyframes fnfFillGoldPulse {
  0%, 100% { background-position: 40% 50%; filter: drop-shadow(0 1px 0 #111) drop-shadow(0 0 4px #ffe566); }
  50% { background-position: 60% 50%; filter: drop-shadow(0 1px 0 #111) drop-shadow(0 0 12px #ffd700); }
}

/* super-fortune — coin sparkle sweep */
.fnf-chat-fill--super-fortune {
  background-image: linear-gradient(
    115deg,
    #8a6a00 0%,
    #ffd700 25%,
    #fff8c8 48%,
    #ffd700 55%,
    #c9a000 80%,
    #8a6a00 100%
  );
  background-size: 260% 100%;
  animation: fnfFillCoin 1.7s linear infinite;
}
@keyframes fnfFillCoin {
  0% { background-position: 100% 50%; }
  100% { background-position: -100% 50%; }
}

/* super-midnight — starfield shimmer */
.fnf-chat-fill--super-midnight {
  background-image:
    radial-gradient(circle at 15% 30%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 80% 70%, #ffe566 0 1px, transparent 2px),
    radial-gradient(circle at 50% 50%, #9b8cff 0%, #3a2a6e 60%, #1a1035 100%);
  background-size: 100% 100%, 100% 100%, 160% 160%;
  animation: fnfFillMidnight 3.2s ease-in-out infinite;
}
@keyframes fnfFillMidnight {
  0%, 100% { background-position: 0 0, 0 0, 30% 40%; }
  50% { background-position: 3px 2px, -2px -3px, 70% 60%; }
}

/* sporting-outline — dual-tone pulse */
.fnf-chat-fill--sporting-outline {
  background-image: linear-gradient(
    90deg,
    #0d3a5c,
    #49b6ff,
    #fff,
    #49b6ff,
    #0d3a5c
  );
  background-size: 100% 100%;
  animation: fnfFillOutlinePulse 1.3s ease-in-out infinite;
  filter:
    drop-shadow(0 1px 0 #111)
    drop-shadow(0 0 0 2px #49b6ff)
    drop-shadow(0 0 8px #49b6ff);
}
@keyframes fnfFillOutlinePulse {
  0%, 100% { filter: drop-shadow(0 1px 0 #111) drop-shadow(0 0 4px #49b6ff); }
  50% { filter: drop-shadow(0 1px 0 #111) drop-shadow(0 0 14px #fff) drop-shadow(0 0 6px #49b6ff); }
}

/* moonkids — lunar purple/gold glow */
.fnf-chat-fill--moonkids {
  background-image: linear-gradient(
    130deg,
    #c44cff 0%,
    #ffe566 35%,
    #fff 50%,
    #9b8cff 65%,
    #c44cff 100%
  );
  background-size: 240% 100%;
  animation: fnfFillLunar 2.5s ease-in-out infinite;
}
@keyframes fnfFillLunar {
  0%, 100% { background-position: 0% 50%; filter: drop-shadow(0 1px 0 #111) drop-shadow(0 0 10px #c44cff); }
  50% { background-position: 100% 50%; filter: drop-shadow(0 1px 0 #111) drop-shadow(0 0 16px #ffe566); }
}

/* ========== PARTICLE FX LAYER ========== */
.fnf-chat-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.fnf-chat-fx i {
  position: absolute;
  display: block;
  pointer-events: none;
  margin: 0;
  padding: 0;
  font-style: normal;
}

/* default — twinkling stars */
.fnf-chat-fx--default .fnf-chat-fx i {
  width: 10px; height: 10px;
  background: var(--chat-name-color);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  filter: drop-shadow(0 0 4px var(--chat-name-color));
  animation: fnfFxStar 1.4s ease-in-out infinite;
}
.fnf-chat-fx--default .fnf-chat-fx i:nth-child(1) { top: 2px; left: 8%; }
.fnf-chat-fx--default .fnf-chat-fx i:nth-child(2) { top: 40%; right: 4%; animation-delay: .25s; }
.fnf-chat-fx--default .fnf-chat-fx i:nth-child(3) { bottom: 2px; left: 35%; animation-delay: .5s; }
.fnf-chat-fx--default .fnf-chat-fx i:nth-child(4) { top: 8%; right: 22%; width: 7px; height: 7px; animation-delay: .75s; }
.fnf-chat-fx--default .fnf-chat-fx i:nth-child(5) { bottom: 10%; left: 70%; width: 6px; height: 6px; animation-delay: 1s; }
@keyframes fnfFxStar {
  0%, 100% { opacity: 0.15; transform: scale(0.5) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.15) rotate(20deg); }
}

/* attack-graffiti — spray + drips */
.fnf-chat-fx--attack-graffiti .fnf-chat-fx i:nth-child(1),
.fnf-chat-fx--attack-graffiti .fnf-chat-fx i:nth-child(2) {
  width: 18px; height: 3px;
  background: linear-gradient(90deg, transparent, var(--chat-name-color), transparent);
  border-radius: 2px;
  animation: fnfFxSpray 1.1s linear infinite;
}
.fnf-chat-fx--attack-graffiti .fnf-chat-fx i:nth-child(1) { top: 18%; left: -10%; }
.fnf-chat-fx--attack-graffiti .fnf-chat-fx i:nth-child(2) { top: 62%; left: -10%; width: 26px; animation-delay: .35s; }
.fnf-chat-fx--attack-graffiti .fnf-chat-fx i:nth-child(3),
.fnf-chat-fx--attack-graffiti .fnf-chat-fx i:nth-child(4),
.fnf-chat-fx--attack-graffiti .fnf-chat-fx i:nth-child(5) {
  width: 4px; height: 10px;
  background: var(--chat-name-color);
  border-radius: 0 0 40% 40%;
  opacity: 0.85;
  animation: fnfFxDrip 1.6s ease-in infinite;
}
.fnf-chat-fx--attack-graffiti .fnf-chat-fx i:nth-child(3) { top: 0; left: 22%; }
.fnf-chat-fx--attack-graffiti .fnf-chat-fx i:nth-child(4) { top: 0; left: 55%; height: 14px; animation-delay: .4s; }
.fnf-chat-fx--attack-graffiti .fnf-chat-fx i:nth-child(5) { top: 0; left: 78%; height: 8px; animation-delay: .8s; }
@keyframes fnfFxSpray {
  0% { transform: translateX(0) skewX(-18deg); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateX(140%) skewX(-18deg); opacity: 0; }
}
@keyframes fnfFxDrip {
  0% { transform: translateY(-4px) scaleY(0.4); opacity: 0; }
  30% { opacity: 1; }
  100% { transform: translateY(18px) scaleY(1.3); opacity: 0; }
}

/* lemondrops — falling blobs */
.fnf-chat-fx--lemondrops .fnf-chat-fx i {
  width: 8px; height: 10px;
  background: radial-gradient(circle at 35% 30%, #fff8c8, var(--chat-name-color) 55%, #c9a000);
  border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
  box-shadow: 0 1px 0 #111;
  animation: fnfFxDrop 1.5s cubic-bezier(.4,.1,.6,1) infinite;
}
.fnf-chat-fx--lemondrops .fnf-chat-fx i:nth-child(1) { left: 12%; }
.fnf-chat-fx--lemondrops .fnf-chat-fx i:nth-child(2) { left: 32%; width: 6px; height: 8px; animation-delay: .2s; }
.fnf-chat-fx--lemondrops .fnf-chat-fx i:nth-child(3) { left: 52%; animation-delay: .4s; }
.fnf-chat-fx--lemondrops .fnf-chat-fx i:nth-child(4) { left: 70%; width: 7px; height: 9px; animation-delay: .6s; }
.fnf-chat-fx--lemondrops .fnf-chat-fx i:nth-child(5) { left: 88%; width: 5px; height: 7px; animation-delay: .8s; }
@keyframes fnfFxDrop {
  0% { top: -8%; transform: translateY(0) rotate(0deg); opacity: 0; }
  15% { opacity: 1; }
  70% { opacity: 1; }
  100% { top: 95%; transform: translateY(0) rotate(25deg); opacity: 0; }
}

/* super-maples — fluttering leaves */
.fnf-chat-fx--super-maples .fnf-chat-fx i {
  width: 12px; height: 12px;
  background: var(--chat-name-color);
  clip-path: polygon(50% 0%, 80% 25%, 100% 55%, 70% 70%, 50% 100%, 30% 70%, 0% 55%, 20% 25%);
  filter: drop-shadow(0 1px 0 #111);
  animation: fnfFxLeaf 2.6s ease-in-out infinite;
}
.fnf-chat-fx--super-maples .fnf-chat-fx i:nth-child(1) { left: 5%; }
.fnf-chat-fx--super-maples .fnf-chat-fx i:nth-child(2) { left: 28%; width: 9px; height: 9px; animation-delay: .35s; }
.fnf-chat-fx--super-maples .fnf-chat-fx i:nth-child(3) { left: 50%; animation-delay: .7s; }
.fnf-chat-fx--super-maples .fnf-chat-fx i:nth-child(4) { left: 72%; width: 10px; height: 10px; animation-delay: 1.05s; }
.fnf-chat-fx--super-maples .fnf-chat-fx i:nth-child(5) { left: 90%; width: 8px; height: 8px; animation-delay: 1.4s; }
@keyframes fnfFxLeaf {
  0% { top: -12%; transform: translateX(0) rotate(-20deg); opacity: 0; }
  20% { opacity: 1; }
  50% { transform: translateX(8px) rotate(25deg); }
  100% { top: 100%; transform: translateX(-6px) rotate(50deg); opacity: 0; }
}

/* super-shiny — sweep bar + glints */
.fnf-chat-fx--super-shiny .fnf-chat-fx i:nth-child(1) {
  inset: 0;
  width: 35%;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.75) 45%, transparent 70%);
  animation: fnfFxSweep 1.8s ease-in-out infinite;
  mix-blend-mode: screen;
}
.fnf-chat-fx--super-shiny .fnf-chat-fx i:nth-child(n+2) {
  width: 3px; height: 3px;
  background: #fff;
  border-radius: 1px;
  box-shadow: 0 0 6px #fff, 0 0 2px var(--chat-name-color);
  animation: fnfFxGlint 1.2s ease-in-out infinite;
}
.fnf-chat-fx--super-shiny .fnf-chat-fx i:nth-child(2) { top: 15%; left: 20%; }
.fnf-chat-fx--super-shiny .fnf-chat-fx i:nth-child(3) { top: 55%; left: 45%; animation-delay: .2s; }
.fnf-chat-fx--super-shiny .fnf-chat-fx i:nth-child(4) { top: 25%; left: 70%; animation-delay: .4s; }
.fnf-chat-fx--super-shiny .fnf-chat-fx i:nth-child(5) { top: 70%; left: 85%; animation-delay: .6s; }
@keyframes fnfFxSweep {
  0% { transform: translateX(-120%) skewX(-20deg); opacity: 0; }
  30% { opacity: 0.9; }
  100% { transform: translateX(280%) skewX(-20deg); opacity: 0; }
}
@keyframes fnfFxGlint {
  0%, 100% { opacity: 0.2; transform: scale(0.6); }
  50% { opacity: 1; transform: scale(1.4) rotate(45deg); }
}

/* youth-touch — lightning bolts */
.fnf-chat-fx--youth-touch .fnf-chat-fx i {
  width: 14px; height: 16px;
  background: var(--chat-name-color);
  clip-path: polygon(55% 0%, 30% 45%, 55% 45%, 40% 100%, 75% 40%, 50% 40%);
  filter: drop-shadow(0 0 4px var(--chat-name-color));
  animation: fnfFxZap 1.1s steps(2, end) infinite;
  opacity: 0;
}
.fnf-chat-fx--youth-touch .fnf-chat-fx i:nth-child(1) { top: 5%; left: 6%; }
.fnf-chat-fx--youth-touch .fnf-chat-fx i:nth-child(2) { top: 40%; right: 4%; left: auto; animation-delay: .25s; transform: scaleX(-1); }
.fnf-chat-fx--youth-touch .fnf-chat-fx i:nth-child(3) { bottom: 4%; left: 40%; animation-delay: .5s; }
.fnf-chat-fx--youth-touch .fnf-chat-fx i:nth-child(4) { top: 10%; left: 60%; width: 10px; height: 12px; animation-delay: .7s; }
.fnf-chat-fx--youth-touch .fnf-chat-fx i:nth-child(5) { top: 55%; left: 18%; width: 9px; height: 11px; animation-delay: .9s; }
@keyframes fnfFxZap {
  0%, 40%, 100% { opacity: 0; transform: scale(0.7); }
  45%, 55% { opacity: 1; transform: scale(1.1); }
  60% { opacity: 0.3; }
}

/* sugar-flare — heart pops */
.fnf-chat-fx--sugar-flare .fnf-chat-fx i {
  width: 10px; height: 9px;
  background: var(--chat-name-color);
  clip-path: path('M5 9 C5 9 0 5.5 0 2.8 C0 1.2 1.2 0 2.6 0 C3.5 0 4.3 .5 5 1.3 C5.7 .5 6.5 0 7.4 0 C8.8 0 10 1.2 10 2.8 C10 5.5 5 9 5 9 Z');
  filter: drop-shadow(0 0 3px #ff6bcb);
  animation: fnfFxHeart 1.5s ease-out infinite;
  opacity: 0;
}
.fnf-chat-fx--sugar-flare .fnf-chat-fx i:nth-child(1) { left: 10%; bottom: 0; }
.fnf-chat-fx--sugar-flare .fnf-chat-fx i:nth-child(2) { left: 30%; bottom: 0; animation-delay: .25s; width: 8px; height: 7px; }
.fnf-chat-fx--sugar-flare .fnf-chat-fx i:nth-child(3) { left: 50%; bottom: 0; animation-delay: .5s; }
.fnf-chat-fx--sugar-flare .fnf-chat-fx i:nth-child(4) { left: 68%; bottom: 0; animation-delay: .75s; width: 7px; height: 6px; }
.fnf-chat-fx--sugar-flare .fnf-chat-fx i:nth-child(5) { left: 85%; bottom: 0; animation-delay: 1s; }
@keyframes fnfFxHeart {
  0% { transform: translateY(0) scale(0.4); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(-22px) scale(1.1); opacity: 0; }
}

/* angel — soft orbs rising */
.fnf-chat-fx--angel .fnf-chat-fx i {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, rgba(245,240,255,.6) 60%, transparent 70%);
  box-shadow: 0 0 8px #fff;
  animation: fnfFxOrb 2.8s ease-in-out infinite;
}
.fnf-chat-fx--angel .fnf-chat-fx i:nth-child(1) { left: 8%; }
.fnf-chat-fx--angel .fnf-chat-fx i:nth-child(2) { left: 28%; width: 6px; height: 6px; animation-delay: .4s; }
.fnf-chat-fx--angel .fnf-chat-fx i:nth-child(3) { left: 48%; animation-delay: .8s; }
.fnf-chat-fx--angel .fnf-chat-fx i:nth-child(4) { left: 68%; width: 5px; height: 5px; animation-delay: 1.2s; }
.fnf-chat-fx--angel .fnf-chat-fx i:nth-child(5) { left: 88%; animation-delay: 1.6s; }
@keyframes fnfFxOrb {
  0% { bottom: -10%; opacity: 0; transform: scale(0.5); }
  30% { opacity: 0.9; }
  100% { bottom: 110%; opacity: 0; transform: scale(1.2); }
}

/* super-shake — impact rings */
.fnf-chat-fx--super-shake .fnf-chat-fx i {
  width: 14px; height: 14px;
  border: 2px solid var(--chat-name-color);
  border-radius: 50%;
  background: transparent;
  animation: fnfFxRing 0.9s ease-out infinite;
  opacity: 0;
}
.fnf-chat-fx--super-shake .fnf-chat-fx i:nth-child(1) { top: 20%; left: 15%; }
.fnf-chat-fx--super-shake .fnf-chat-fx i:nth-child(2) { top: 50%; left: 40%; animation-delay: .15s; }
.fnf-chat-fx--super-shake .fnf-chat-fx i:nth-child(3) { top: 30%; left: 65%; animation-delay: .3s; }
.fnf-chat-fx--super-shake .fnf-chat-fx i:nth-child(4) { top: 60%; left: 80%; animation-delay: .45s; width: 10px; height: 10px; }
.fnf-chat-fx--super-shake .fnf-chat-fx i:nth-child(5) { top: 10%; left: 50%; animation-delay: .6s; width: 12px; height: 12px; }
@keyframes fnfFxRing {
  0% { transform: scale(0.3); opacity: 0.9; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* super-circus — bouncing balls */
.fnf-chat-fx--super-circus .fnf-chat-fx i {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff, var(--chat-name-color) 55%, #a05000);
  box-shadow: 0 1px 0 #111;
  animation: fnfFxBounceBall 1.1s ease-in-out infinite;
}
.fnf-chat-fx--super-circus .fnf-chat-fx i:nth-child(1) { left: 10%; background: radial-gradient(circle at 30% 30%, #fff, #ff5c7a 55%, #800); }
.fnf-chat-fx--super-circus .fnf-chat-fx i:nth-child(2) { left: 30%; animation-delay: .15s; background: radial-gradient(circle at 30% 30%, #fff, #49b6ff 55%, #036); }
.fnf-chat-fx--super-circus .fnf-chat-fx i:nth-child(3) { left: 50%; animation-delay: .3s; }
.fnf-chat-fx--super-circus .fnf-chat-fx i:nth-child(4) { left: 70%; animation-delay: .45s; background: radial-gradient(circle at 30% 30%, #fff, #5dff7a 55%, #050); }
.fnf-chat-fx--super-circus .fnf-chat-fx i:nth-child(5) { left: 88%; animation-delay: .6s; width: 6px; height: 6px; }
@keyframes fnfFxBounceBall {
  0%, 100% { top: 70%; transform: scaleY(0.8); }
  40% { top: 5%; transform: scaleY(1.1); }
  50% { top: 8%; }
}

/* super-peace — floating petals */
.fnf-chat-fx--super-peace .fnf-chat-fx i {
  width: 10px; height: 6px;
  background: var(--chat-name-color);
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  opacity: 0.75;
  animation: fnfFxPetal 3.2s ease-in-out infinite;
}
.fnf-chat-fx--super-peace .fnf-chat-fx i:nth-child(1) { left: 5%; }
.fnf-chat-fx--super-peace .fnf-chat-fx i:nth-child(2) { left: 25%; animation-delay: .5s; width: 8px; height: 5px; }
.fnf-chat-fx--super-peace .fnf-chat-fx i:nth-child(3) { left: 45%; animation-delay: 1s; }
.fnf-chat-fx--super-peace .fnf-chat-fx i:nth-child(4) { left: 65%; animation-delay: 1.5s; width: 9px; height: 5px; }
.fnf-chat-fx--super-peace .fnf-chat-fx i:nth-child(5) { left: 85%; animation-delay: 2s; }
@keyframes fnfFxPetal {
  0% { top: 100%; transform: translateX(0) rotate(0deg); opacity: 0; }
  15% { opacity: 0.85; }
  100% { top: -15%; transform: translateX(12px) rotate(180deg); opacity: 0; }
}

/* super-wild — spinning shards */
.fnf-chat-fx--super-wild .fnf-chat-fx i {
  width: 8px; height: 8px;
  background: var(--chat-name-color);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  animation: fnfFxShard 1.3s linear infinite;
}
.fnf-chat-fx--super-wild .fnf-chat-fx i:nth-child(1) { top: 10%; left: 10%; }
.fnf-chat-fx--super-wild .fnf-chat-fx i:nth-child(2) { top: 55%; left: 25%; animation-delay: .2s; background: #ffe566; }
.fnf-chat-fx--super-wild .fnf-chat-fx i:nth-child(3) { top: 20%; left: 50%; animation-delay: .4s; background: #49b6ff; }
.fnf-chat-fx--super-wild .fnf-chat-fx i:nth-child(4) { top: 60%; left: 70%; animation-delay: .6s; background: #5dff7a; }
.fnf-chat-fx--super-wild .fnf-chat-fx i:nth-child(5) { top: 15%; left: 85%; animation-delay: .8s; background: #c44cff; }
@keyframes fnfFxShard {
  0% { transform: rotate(0deg) scale(0.5); opacity: 0.3; }
  50% { transform: rotate(180deg) scale(1.2); opacity: 1; }
  100% { transform: rotate(360deg) scale(0.5); opacity: 0.3; }
}

/* robus — scanning lasers */
.fnf-chat-fx--robus .fnf-chat-fx i {
  width: 100%; height: 2px;
  left: 0;
  background: linear-gradient(90deg, transparent, var(--chat-name-color), #fff, var(--chat-name-color), transparent);
  animation: fnfFxScan 1.6s linear infinite;
  opacity: 0.7;
}
.fnf-chat-fx--robus .fnf-chat-fx i:nth-child(1) { top: 15%; }
.fnf-chat-fx--robus .fnf-chat-fx i:nth-child(2) { top: 35%; animation-delay: .2s; height: 1px; }
.fnf-chat-fx--robus .fnf-chat-fx i:nth-child(3) { top: 55%; animation-delay: .4s; }
.fnf-chat-fx--robus .fnf-chat-fx i:nth-child(4) { top: 75%; animation-delay: .6s; height: 1px; }
.fnf-chat-fx--robus .fnf-chat-fx i:nth-child(5) { top: 90%; animation-delay: .8s; }
@keyframes fnfFxScan {
  0% { transform: translateX(-30%); opacity: 0; }
  30% { opacity: 0.85; }
  100% { transform: translateX(30%); opacity: 0; }
}

/* kiotto — orbiting sparkles */
.fnf-chat-fx--kiotto .fnf-chat-fx i {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px #c44cff, 0 0 2px #fff;
  top: 50%; left: 50%;
  animation: fnfFxOrbitDot 2.4s linear infinite;
}
.fnf-chat-fx--kiotto .fnf-chat-fx i:nth-child(1) { animation-delay: 0s; }
.fnf-chat-fx--kiotto .fnf-chat-fx i:nth-child(2) { animation-delay: .45s; width: 3px; height: 3px; }
.fnf-chat-fx--kiotto .fnf-chat-fx i:nth-child(3) { animation-delay: .9s; }
.fnf-chat-fx--kiotto .fnf-chat-fx i:nth-child(4) { animation-delay: 1.35s; width: 5px; height: 5px; background: #ffe566; }
.fnf-chat-fx--kiotto .fnf-chat-fx i:nth-child(5) { animation-delay: 1.8s; }
@keyframes fnfFxOrbitDot {
  0% { transform: rotate(0deg) translateX(18px) rotate(0deg); opacity: 0.4; }
  50% { opacity: 1; }
  100% { transform: rotate(360deg) translateX(18px) rotate(-360deg); opacity: 0.4; }
}

/* knight-warrior — sword glints */
.fnf-chat-fx--knight-warrior .fnf-chat-fx i {
  width: 16px; height: 2px;
  background: linear-gradient(90deg, transparent, #fff, transparent);
  transform: rotate(-35deg);
  animation: fnfFxSword 1.8s ease-in-out infinite;
  opacity: 0;
}
.fnf-chat-fx--knight-warrior .fnf-chat-fx i:nth-child(1) { top: 20%; left: 10%; }
.fnf-chat-fx--knight-warrior .fnf-chat-fx i:nth-child(2) { top: 45%; left: 35%; animation-delay: .3s; width: 20px; }
.fnf-chat-fx--knight-warrior .fnf-chat-fx i:nth-child(3) { top: 65%; left: 55%; animation-delay: .6s; }
.fnf-chat-fx--knight-warrior .fnf-chat-fx i:nth-child(4) { top: 30%; left: 70%; animation-delay: .9s; width: 12px; transform: rotate(35deg); }
.fnf-chat-fx--knight-warrior .fnf-chat-fx i:nth-child(5) { top: 75%; left: 20%; animation-delay: 1.2s; transform: rotate(20deg); }
@keyframes fnfFxSword {
  0%, 60%, 100% { opacity: 0; transform: rotate(-35deg) scaleX(0.3); }
  70%, 80% { opacity: 1; transform: rotate(-35deg) scaleX(1); }
}

/* texas-crust — dust motes */
.fnf-chat-fx--texas-crust .fnf-chat-fx i {
  width: 3px; height: 3px;
  border-radius: 1px;
  background: #ffb347;
  box-shadow: 0 0 3px #ff9f43;
  animation: fnfFxDust 2.4s linear infinite;
}
.fnf-chat-fx--texas-crust .fnf-chat-fx i:nth-child(1) { left: 8%; top: 80%; }
.fnf-chat-fx--texas-crust .fnf-chat-fx i:nth-child(2) { left: 28%; top: 70%; animation-delay: .3s; width: 2px; height: 2px; }
.fnf-chat-fx--texas-crust .fnf-chat-fx i:nth-child(3) { left: 48%; top: 85%; animation-delay: .6s; }
.fnf-chat-fx--texas-crust .fnf-chat-fx i:nth-child(4) { left: 68%; top: 75%; animation-delay: .9s; width: 4px; height: 2px; }
.fnf-chat-fx--texas-crust .fnf-chat-fx i:nth-child(5) { left: 88%; top: 80%; animation-delay: 1.2s; }
@keyframes fnfFxDust {
  0% { transform: translate(0, 0); opacity: 0; }
  20% { opacity: 0.9; }
  100% { transform: translate(10px, -20px); opacity: 0; }
}

/* super-crawler — crawling bugs */
.fnf-chat-fx--super-crawler .fnf-chat-fx i {
  width: 7px; height: 4px;
  background: var(--chat-name-color);
  border-radius: 40% 40% 30% 30%;
  box-shadow: -3px 0 0 -1px #1e5a2e, 3px 0 0 -1px #1e5a2e;
  animation: fnfFxBug 2s linear infinite;
}
.fnf-chat-fx--super-crawler .fnf-chat-fx i:nth-child(1) { top: 20%; }
.fnf-chat-fx--super-crawler .fnf-chat-fx i:nth-child(2) { top: 45%; animation-delay: .35s; width: 6px; height: 3px; }
.fnf-chat-fx--super-crawler .fnf-chat-fx i:nth-child(3) { top: 70%; animation-delay: .7s; }
.fnf-chat-fx--super-crawler .fnf-chat-fx i:nth-child(4) { top: 30%; animation-delay: 1s; animation-direction: reverse; }
.fnf-chat-fx--super-crawler .fnf-chat-fx i:nth-child(5) { top: 60%; animation-delay: 1.4s; animation-direction: reverse; width: 5px; }
@keyframes fnfFxBug {
  0% { left: -10%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: 110%; opacity: 0; }
}

/* ithaca — rising sparks */
.fnf-chat-fx--ithaca .fnf-chat-fx i {
  width: 2px; height: 8px;
  background: linear-gradient(180deg, #fff, var(--chat-name-color), transparent);
  border-radius: 2px;
  animation: fnfFxEmber 1.8s ease-out infinite;
}
.fnf-chat-fx--ithaca .fnf-chat-fx i:nth-child(1) { left: 15%; }
.fnf-chat-fx--ithaca .fnf-chat-fx i:nth-child(2) { left: 35%; animation-delay: .25s; height: 6px; }
.fnf-chat-fx--ithaca .fnf-chat-fx i:nth-child(3) { left: 55%; animation-delay: .5s; }
.fnf-chat-fx--ithaca .fnf-chat-fx i:nth-child(4) { left: 72%; animation-delay: .75s; height: 10px; }
.fnf-chat-fx--ithaca .fnf-chat-fx i:nth-child(5) { left: 88%; animation-delay: 1s; height: 5px; }
@keyframes fnfFxEmber {
  0% { bottom: 0; opacity: 0; transform: translateX(0); }
  20% { opacity: 1; }
  100% { bottom: 100%; opacity: 0; transform: translateX(4px); }
}

/* super-fortune — coin flips */
.fnf-chat-fx--super-fortune .fnf-chat-fx i {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff8c8, #ffd700 50%, #8a6a00);
  border: 1px solid #8a6a00;
  box-shadow: 0 1px 0 #111;
  animation: fnfFxCoin 2s ease-in-out infinite;
}
.fnf-chat-fx--super-fortune .fnf-chat-fx i:nth-child(1) { left: 8%; top: 10%; }
.fnf-chat-fx--super-fortune .fnf-chat-fx i:nth-child(2) { left: 30%; top: 50%; animation-delay: .3s; width: 7px; height: 7px; }
.fnf-chat-fx--super-fortune .fnf-chat-fx i:nth-child(3) { left: 52%; top: 15%; animation-delay: .6s; }
.fnf-chat-fx--super-fortune .fnf-chat-fx i:nth-child(4) { left: 72%; top: 55%; animation-delay: .9s; width: 6px; height: 6px; }
.fnf-chat-fx--super-fortune .fnf-chat-fx i:nth-child(5) { left: 90%; top: 25%; animation-delay: 1.2s; }
@keyframes fnfFxCoin {
  0%, 100% { transform: rotateY(0deg) scale(0.7); opacity: 0.4; }
  50% { transform: rotateY(180deg) scale(1.15); opacity: 1; }
}

/* super-midnight — crescent + orbit */
.fnf-chat-fx--super-midnight .fnf-chat-fx i:nth-child(1),
.fnf-chat-fx--super-midnight .fnf-chat-fx i:nth-child(2) {
  width: 12px; height: 12px;
  border-radius: 50%;
  box-shadow: inset -4px -2px 0 0 var(--chat-name-color);
  background: transparent;
  animation: fnfFxMoon 2.2s ease-in-out infinite;
}
.fnf-chat-fx--super-midnight .fnf-chat-fx i:nth-child(1) { top: 4%; left: 6%; }
.fnf-chat-fx--super-midnight .fnf-chat-fx i:nth-child(2) { bottom: 6%; right: 8%; left: auto; width: 9px; height: 9px; animation-delay: .6s; box-shadow: inset -3px -1px 0 0 #ffe566; }
.fnf-chat-fx--super-midnight .fnf-chat-fx i:nth-child(n+3) {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 5px #fff;
  top: 50%; left: 50%;
  animation: fnfFxOrbitDot 2.8s linear infinite;
}
.fnf-chat-fx--super-midnight .fnf-chat-fx i:nth-child(3) { animation-delay: 0s; }
.fnf-chat-fx--super-midnight .fnf-chat-fx i:nth-child(4) { animation-delay: .9s; }
.fnf-chat-fx--super-midnight .fnf-chat-fx i:nth-child(5) { animation-delay: 1.8s; }
@keyframes fnfFxMoon {
  0%, 100% { opacity: 0.55; transform: rotate(-10deg) scale(0.9); }
  50% { opacity: 1; transform: rotate(12deg) scale(1.1); }
}

/* sporting-outline — corner ticks */
.fnf-chat-fx--sporting-outline .fnf-chat-fx i {
  width: 8px; height: 8px;
  border: 2px solid var(--chat-name-color);
  background: transparent;
  animation: fnfFxCorner 1.4s ease-in-out infinite;
}
.fnf-chat-fx--sporting-outline .fnf-chat-fx i:nth-child(1) { top: 2px; left: 2px; border-right: 0; border-bottom: 0; }
.fnf-chat-fx--sporting-outline .fnf-chat-fx i:nth-child(2) { top: 2px; right: 2px; left: auto; border-left: 0; border-bottom: 0; animation-delay: .2s; }
.fnf-chat-fx--sporting-outline .fnf-chat-fx i:nth-child(3) { bottom: 2px; left: 2px; border-right: 0; border-top: 0; animation-delay: .4s; }
.fnf-chat-fx--sporting-outline .fnf-chat-fx i:nth-child(4) { bottom: 2px; right: 2px; left: auto; border-left: 0; border-top: 0; animation-delay: .6s; }
.fnf-chat-fx--sporting-outline .fnf-chat-fx i:nth-child(5) { display: none; }
@keyframes fnfFxCorner {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.15); }
}

/* moonkids — moons + orbit */
.fnf-chat-fx--moonkids .fnf-chat-fx i:nth-child(1),
.fnf-chat-fx--moonkids .fnf-chat-fx i:nth-child(2) {
  width: 14px; height: 14px;
  border-radius: 50%;
  box-shadow: inset -5px -2px 0 0 #ffe566;
  background: transparent;
  animation: fnfFxMoon 1.8s ease-in-out infinite;
}
.fnf-chat-fx--moonkids .fnf-chat-fx i:nth-child(1) { top: 0; left: 4%; }
.fnf-chat-fx--moonkids .fnf-chat-fx i:nth-child(2) { bottom: 0; right: 4%; left: auto; width: 10px; height: 10px; animation-delay: .5s; box-shadow: inset -3px -1px 0 0 #c44cff; }
.fnf-chat-fx--moonkids .fnf-chat-fx i:nth-child(n+3) {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #ffe566;
  box-shadow: 0 0 6px #c44cff;
  top: 50%; left: 50%;
  animation: fnfFxOrbitDot 2s linear infinite;
}
.fnf-chat-fx--moonkids .fnf-chat-fx i:nth-child(3) { animation-delay: 0s; }
.fnf-chat-fx--moonkids .fnf-chat-fx i:nth-child(4) { animation-delay: .65s; background: #fff; }
.fnf-chat-fx--moonkids .fnf-chat-fx i:nth-child(5) { animation-delay: 1.3s; }

/* Locked font picker */
.fnf-chat-font-pick.is-locked {
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(0.35);
}
.fnf-chat-font-pick.is-locked:hover { filter: grayscale(0.35); }
.fnf-chat-font-pick__lock {
  display: block;
  margin-top: 2px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  color: #ffe566;
  -webkit-text-fill-color: #ffe566;
  font-family: 'Nunito', system-ui, sans-serif;
  opacity: 0.95;
}

@media (prefers-reduced-motion: reduce) {
  .fnf-chat-fx i { animation: none !important; opacity: 0.45 !important; }
  .fnf-lb-chat__name,
  .fnf-chat-name-preview {
    animation: none !important;
    background-position: 40% 50% !important;
  }
}