/* Ratz-GG nameplate paints.
 *
 * SELF-CONTAINED ON PURPOSE: this file is hub-hosted and pulled in by sister
 * sites with a plain <link>, so it must never depend on anything else.
 * No CSS custom properties from globals.css, no Tailwind, literal values only.
 *
 * THREE INDEPENDENT AXES, one class each, they compose:
 *   .rz-c-<id>  colour  - colour and nothing else
 *   .rz-f-<id>  font    - family / style / weight / tracking and nothing else
 *   .rz-e-<id>  effect  - bloom, motion, texture, written to work over ANY colour
 *   .rz-brand   modifier - whites out the trailing <span class="rz-tail">
 * Ids match lib/paints.ts 1:1 (tools/check-paints.mjs proves it).
 *
 * Colours clear ~4.5:1 against the near-black (#0a0a0a) chat background at 13px.
 * Animated effects are all switched off under prefers-reduced-motion (bottom).
 *
 * WHY NO text-shadow ANYWHERE BELOW: a gradient colour paints the glyph with a
 * clipped background and a transparent text fill. text-shadow paints a flat
 * opaque colour into that same glyph box and buries the gradient. Every bloom
 * here is filter: drop-shadow(), which filters the already-composited glyph and
 * leaves the colour underneath alone. Do not "simplify" one back to text-shadow.
 */

/* Bundled so sister sites get the intended silhouettes on every OS. */
@font-face { font-family: 'Ratz Bangers'; src: url('./fonts/bangers.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Ratz Caveat'; src: url('./fonts/caveat-600.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Ratz Cinzel Decorative'; src: url('./fonts/cinzel-decorative-700.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Ratz Luckiest Guy'; src: url('./fonts/luckiest-guy.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Ratz Pirata One'; src: url('./fonts/pirata-one.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Ratz Uncial Antiqua'; src: url('./fonts/uncial-antiqua.ttf') format('truetype'); font-display: swap; }

/* The base sits in @layer so it loses every tie to an unlayered rule - which is what
 * Tailwind emits. Without this, `.rz-np` (0,1,0) beats `.block` / `.font-medium` /
 * `.font-extrabold` at the call site purely because this file is linked later, and a
 * nameplate silently overrides whatever layout its host gave it. Layered still applies
 * when nothing else sets the property, so gradients keep the box they need.
 * Colour is deliberately absent: unpainted nameplates must inherit from the call site,
 * or `hover:text-accent` on a parent link stops working. The axis rules below are
 * UNLAYERED on purpose, so a chosen paint does win. */
@layer base {
  .rz-np {
    display: inline-block;
    font-weight: 600;
    line-height: 1.2;
    /* NO PADDING, and that is load-bearing three times over. Chrome casts
     * `filter: drop-shadow()` from the PADDING box and applies the
     * background-clip:text mask afterwards, so padding here makes every gradient paint
     * bloom its whole rectangle as a glowing box instead of glowing letters. A
     * transparent border instead of padding dodges that but dies twice more: Tailwind's
     * preflight zeroes border-width on everything and this rule is layered, and call
     * sites put `truncate` straight on the nameplate, whose overflow:hidden clips to
     * the padding box and would eat anything living in a border.
     * So every decoration below lives INSIDE the glyph box, on non-negative offsets,
     * with its travel budgeted against that box (tools/check-paints.mjs proves it).
     * Decorations overlap the outer glyphs; that is the price of having no room. */
    padding: 0;
    white-space: nowrap;
  }
}

/* =========================================================== COLOUR ======= */
/* Colour classes set colour ONLY - no font, no filter, no background-size.
 * `background-size` belongs to .rz-e-sweep, which is why none of these set it. */

.rz-c-snow { color: #f5f7fa; }
.rz-c-silver { color: #c3c9d4; }
.rz-c-crimson { color: #ff5f57; }
.rz-c-ember { color: #ff8f4d; }
.rz-c-amber { color: #ffc24d; }
.rz-c-lime { color: #bde04a; }
.rz-c-jade { color: #34d399; }
.rz-c-mint { color: #7ef0c8; }
.rz-c-cyan { color: #4fd6f5; }
.rz-c-azure { color: #60a5fa; }
.rz-c-violet { color: #a78bfa; }
.rz-c-magenta { color: #f472b6; }
.rz-c-sakura { color: #ffa8c5; }

/* Gradients keep a real `color` (a mid stop of their own ramp) instead of
 * `color: transparent`. -webkit-text-fill-color is what actually empties the
 * glyph, so the gradient still shows - but currentColor now carries the paint's
 * hue, which is the whole reason .rz-e-glow / bloom / pulse / corona can bloom
 * in the right colour over ANY colour class. It doubles as the fallback fill. */
.rz-c-inferno,
.rz-c-wuxia,
.rz-c-gold-rush,
.rz-c-jade-flow,
.rz-c-venom,
.rz-c-gothic,
.rz-c-aurora,
.rz-c-ocean,
.rz-c-frost,
.rz-c-chrome,
.rz-c-nebula,
.rz-c-bubblegum,
.rz-c-cyberpunk,
.rz-c-rainbow,
.rz-c-prism,
.rz-c-vaporwave,
.rz-c-koi,
.rz-c-neon-sign,
.rz-c-jade-tiger,
.rz-c-spectrum-drift,
.rz-c-tidal,
.rz-c-moonlit,
.rz-c-candleflame,
.rz-c-quicksilver,
.rz-c-cascade,
.rz-c-comet,
.rz-c-lantern,
.rz-c-cotton-candy,
.rz-c-strawberry-milk,
.rz-c-fairy-floss,
.rz-c-peach-sorbet,
.rz-c-bunny,
.rz-c-creamsicle,
.rz-c-pixie-dust,
.rz-c-mermaid,
.rz-c-unicorn,
.rz-c-cupcake,
.rz-c-starlight,
.rz-c-berry-burst,
.rz-c-candy-apple,
.rz-c-frosted-mint,
.rz-c-honey-dew,
.rz-c-plum-blossom,
.rz-c-sea-glass,
.rz-c-moonbeam,
.rz-c-rose-quartz,
.rz-c-opal,
.rz-c-dragonfire,
.rz-c-phoenix,
.rz-c-elvenwood,
.rz-c-arcane,
.rz-c-knight-steel,
.rz-c-cathedral-gold,
.rz-c-heraldry,
.rz-c-joust,
.rz-c-parchment,
.rz-c-shonen-flare,
.rz-c-magical-girl,
.rz-c-mecha-zeon,
.rz-c-love-letter,
.rz-c-glacier,
.rz-c-galaxy,
.rz-c-rose-gold,
.rz-c-ecchi-pink,
.rz-c-hentai-night,
.rz-c-ahegao-pop,
.rz-c-doujin-ink,
.rz-c-senpai-blush,
.rz-c-after-hours,
.rz-c-manga-heat,
.rz-c-forbidden-panel {
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Smooth ramps are palindromic (first stop == last stop): tiled by .rz-e-sweep
 * they loop without a hard seam sliding through the middle of a name. */
.rz-c-inferno { color: #ff8f4d; background-image: linear-gradient(90deg, #ffd166, #ff5f57, #ffd166); }
.rz-c-wuxia { color: #ff9a5c; background-image: linear-gradient(90deg, #ff7a5c, #f2c14e, #ff7a5c); }
.rz-c-gold-rush { color: #f2c14e; background-image: linear-gradient(90deg, #fff6cf, #f2c14e, #fff6cf); }
.rz-c-jade-flow { color: #6ee7b7; background-image: linear-gradient(90deg, #b8f5d8, #34d399, #b8f5d8); }
.rz-c-venom { color: #8ae06a; background-image: linear-gradient(90deg, #ccff5a, #34d399, #ccff5a); }
.rz-c-aurora { color: #86c8ea; background-image: linear-gradient(90deg, #7ef0c8, #60a5fa, #a78bfa, #7ef0c8); }
.rz-c-ocean { color: #6fc7fa; background-image: linear-gradient(90deg, #7fe9ff, #60a5fa, #7fe9ff); }
.rz-c-frost { color: #c8e6ff; background-image: linear-gradient(90deg, #eaf6ff, #9fd0ff, #eaf6ff); }
.rz-c-chrome { color: #d8dde5; background-image: linear-gradient(90deg, #ffffff, #aab3c2, #ffffff); }
.rz-c-nebula { color: #cd7fd8; background-image: linear-gradient(90deg, #a78bfa, #f472b6, #a78bfa); }
.rz-c-bubblegum { color: #bfb3e6; background-image: linear-gradient(90deg, #ff9ecd, #7ec8ff, #ff9ecd); }
.rz-c-cyberpunk { color: #8fb8f0; background-image: linear-gradient(90deg, #22e0ff, #ff6fdd, #22e0ff); }
.rz-c-rainbow { color: #ffc24d; background-image: linear-gradient(90deg, #ff6b6b, #ffc24d, #bde04a, #4fd6f5, #a78bfa, #ff6b6b); }

/* Banded on purpose. A two-stop fade at 13px reads as one muddy off-colour, so
 * every stop below is a hard edge and each band survives at nameplate size.
 * Hard edges everywhere also means the sweep tiling seam is just another band. */
.rz-c-prism {
  color: #ffc24d;
  background-image: linear-gradient(90deg, #ff6b6b 20%, #ffc24d 20%, #ffc24d 40%, #7ef0c8 40%, #7ef0c8 60%, #4fd6f5 60%, #4fd6f5 80%, #a78bfa 80%);
}

.rz-c-vaporwave {
  color: #ff6fdd;
  background-image: linear-gradient(90deg, #22e0ff 34%, #ff6fdd 34%, #ff6fdd 67%, #b07bff 67%);
}

.rz-c-koi {
  color: #ff8f4d;
  background-image: linear-gradient(90deg, #fff2e0 30%, #ff8f4d 30%, #ff8f4d 65%, #ff5f57 65%);
}

.rz-c-neon-sign {
  color: #33e1ff;
  background-image: linear-gradient(90deg, #ff5fae 34%, #33e1ff 34%, #33e1ff 67%, #ccff5a 67%);
}

.rz-c-jade-tiger {
  color: #7fdba8;
  background-image: linear-gradient(90deg, #34d399 28%, #ffd166 28%, #ffd166 55%, #34d399 55%, #34d399 80%, #ffd166 80%);
}

/* ------------------------------------------------- animated colours ------ */
/* The ramp itself moves, so motion no longer costs the effect slot - these are
 * the only colour classes that own background-size, background-position and an
 * animation.
 *
 * MOTION IS background-* ONLY. The obvious way to write a travelling hue is
 * `filter: hue-rotate()`, and it is a trap: filter is exactly the property every
 * bloom effect uses, so the colour would silently delete the effect axis. Nothing
 * below touches filter, which is what keeps .rz-e-glow / bloom / etch / emboss
 * composing over all eight. (A colour and an animated EFFECT still contend for the
 * one `animation` property; the effect is declared later and wins. That pairing is
 * redundant anyway - these exist so motion can be had WITH a bloom.)
 *
 * SEAMS: a looping travel must move exactly one tile, or the restart snaps a
 * visible jump through the middle of a name. At background-size S%, one tile is a
 * position delta of -100*S/(S-100) percent - which is why 200% pairs with -200%
 * and 300% with -150%. The two that never wrap (tidal alternates, candleflame
 * returns to its own first frame) are free of it. */

/* Travelling hue cycle: the whole spectrum walks through the name, one way, forever. */
.rz-c-spectrum-drift {
  color: #ffc24d;
  background-image: linear-gradient(90deg, #ff6b6b, #ffc24d, #bde04a, #34d399, #4fd6f5, #a78bfa, #ff6b6b);
  background-size: 300% 100%;
  animation: rz-c-spectrum-drift 9s linear infinite;
}

/* Slow ramp drift: eases out to one edge and back, never loops, so no seam to hide. */
.rz-c-tidal {
  color: #6fc7fa;
  background-image: linear-gradient(90deg, #7fe9ff, #60a5fa, #7ef0c8, #60a5fa, #7fe9ff);
  background-size: 220% 100%;
  animation: rz-c-tidal 9s ease-in-out infinite alternate;
}

/* Two-tone shimmer: steel and lilac sit still, then a narrow specular band glints
 * across. The hold is in the keyframes, not the easing - a slow constant crawl
 * reads as a sweep, a still name that catches the light reads as silk. */
.rz-c-moonlit {
  color: #b0c4f7;
  background-image: linear-gradient(100deg, #8fb8f0 0 30%, #ffffff 42% 46%, #cdb8ff 58% 70%, #8fb8f0 82% 100%);
  background-size: 200% 100%;
  animation: rz-c-moonlit 5s linear infinite;
}

/* Candle flicker: steps(1) so every frame is a jump, never a slide, and the
 * offsets are deliberately uneven - evenly spaced jumps read as a machine. */
.rz-c-candleflame {
  color: #ffb454;
  background-image: linear-gradient(90deg, #ffd166, #ff8f4d, #ffe6a3, #ff8f4d, #ffd166);
  background-size: 180% 100%;
  animation: rz-c-candleflame 1.7s steps(1, end) infinite;
}

/* Liquid metal: highlights roll, accelerate through the middle and stall at both
 * ends, which is the weight a linear sweep across chrome never has. */
.rz-c-quicksilver {
  color: #d8dde5;
  background-image: linear-gradient(90deg, #ffffff, #9aa4b4, #ffffff, #aab3c2, #ffffff);
  background-size: 200% 100%;
  animation: rz-c-quicksilver 5.5s cubic-bezier(0.7, 0, 0.3, 1) infinite;
}

/* The only vertical one: a 180deg ramp falling down through the glyph. */
.rz-c-cascade {
  color: #7ef0c8;
  background-image: linear-gradient(180deg, #b8f5d8, #34d399, #7fe9ff, #34d399, #b8f5d8);
  background-size: 100% 300%;
  animation: rz-c-cascade 4.5s linear infinite;
}

/* Diagonal streak, corner to corner - both axes travel a tile per cycle. */
.rz-c-comet {
  color: #cd7fd8;
  background-image: linear-gradient(135deg, #a78bfa 0 34%, #ffffff 42% 48%, #f472b6 56% 78%, #a78bfa 90% 100%);
  background-size: 200% 200%;
  animation: rz-c-comet 6s linear infinite;
}

/* Breathing, not travelling: background-SIZE animates around a pinned centre, so
 * the hot core swells over the whole name and shrinks back without moving. */
.rz-c-lantern {
  color: #ff8f4d;
  background-image: radial-gradient(ellipse at 50% 50%, #ffd7a8 0%, #ff8f4d 55%, #ff5f57 100%);
  background-position: 50% 50%;
  background-size: 220% 100%;
  animation: rz-c-lantern 3.8s ease-in-out infinite alternate;
}

/* ------------------------------------------------- premium cutesy colours -- */
/* Full-access-only (monthly / Twitch sub) gradients. Pastel, sweet, playful.
 * Every one sets a mid-stop `color` for effect bloom matching. */

.rz-c-cotton-candy { color: #f7a8d4; background-image: linear-gradient(90deg, #ffb3d9, #a8d8ff, #ffb3d9); }
.rz-c-strawberry-milk { color: #ffafcc; background-image: linear-gradient(90deg, #ffd6e0, #ffafcc, #fff0f5, #ffafcc); }
.rz-c-fairy-floss { color: #d4b8f0; background-image: linear-gradient(90deg, #e8d5f5, #ffb3d9, #d4b8f0, #e8d5f5); }
.rz-c-peach-sorbet { color: #ffcba4; background-image: linear-gradient(90deg, #ffe5cc, #ffcba4, #fff5eb, #ffcba4); }
.rz-c-bunny { color: #fbc4d0; background-image: linear-gradient(90deg, #fff0f3, #fbc4d0, #ffffff, #fbc4d0); }
.rz-c-creamsicle { color: #ffb88c; background-image: linear-gradient(90deg, #ffe0c0, #ffb88c, #fff8f0, #ffb88c); }
.rz-c-pixie-dust { color: #f0d890; background-image: linear-gradient(90deg, #fff8e0, #f0d890, #ffffff, #f0d890); }
.rz-c-mermaid { color: #70d6c7; background-image: linear-gradient(90deg, #a8f0e4, #70d6c7, #c4b5f0, #70d6c7); }
.rz-c-unicorn { color: #e8b4f0; background-image: linear-gradient(90deg, #ffd6e8, #d6e8ff, #e8d6ff, #ffd6e8); }
.rz-c-cupcake { color: #ffb3c6; background-image: linear-gradient(90deg, #ffd6e0, #b8f0d8, #ffb3c6, #ffd6e0); }
.rz-c-starlight { color: #d4d8f0; background-image: linear-gradient(90deg, #e8eaf8, #d4d8f0, #f0e8ff, #d4d8f0); }
.rz-c-berry-burst { color: #e07090; background-image: linear-gradient(90deg, #ff8faa, #c070e0, #ff8faa); }
.rz-c-candy-apple { color: #ff6070; background-image: linear-gradient(90deg, #ff98a8, #ff6070, #ffb8c0, #ff6070); }
.rz-c-frosted-mint { color: #b8f0d8; background-image: linear-gradient(90deg, #d8f8e8, #b8f0d8, #ffffff, #b8f0d8); }
.rz-c-honey-dew { color: #d0e878; background-image: linear-gradient(90deg, #e8f8b8, #d0e878, #f0d890, #d0e878); }
.rz-c-plum-blossom { color: #b890d8; background-image: linear-gradient(90deg, #d8c0f0, #b890d8, #ffb8d0, #b890d8); }
.rz-c-sea-glass { color: #a8e0d0; background-image: linear-gradient(90deg, #d0f0e8, #a8e0d0, #c8f0e0, #a8e0d0); }
.rz-c-moonbeam { color: #c8d8f0; background-image: linear-gradient(90deg, #e8eff8, #c8d8f0, #f0f4ff, #c8d8f0); }
.rz-c-rose-quartz { color: #e8c0c8; background-image: linear-gradient(90deg, #f0d8e0, #e8c0c8, #f8e8e8, #e8c0c8); }
.rz-c-opal { color: #c8e0e8; background-image: linear-gradient(90deg, #e0f0f4, #d0c8f0, #f0d8e0, #e0f0f0, #c8e0e8, #e0f0f4); }

/* ------------------------------------------------------ themed gradients -- */
/* Full-access gradients with a story. Banded stops read as several colours at
 * nameplate size; smooth ramps are palindromic (first == last) so `sweep` tiles
 * them without a seam. Every one keeps a mid-stop `color` for bloom matching. */

/* --- Fantasy --- */

/* Molten ore: hot red and gold in hard bands, like a forge pour. */
.rz-c-dragonfire { color: #ffb454; background-image: linear-gradient(90deg, #ff5f57 0 22%, #ffd166 30% 70%, #ff5f57 78% 100%); }

/* Rising from ashes: crimson through flame-magenta to a gold crest and back. */
.rz-c-phoenix { color: #ff8faa; background-image: linear-gradient(90deg, #ff5f57, #f472b6, #ffd166, #f472b6, #ff5f57); }

/* Old-growth forest: emerald canopy over a band of elf-gold. */
.rz-c-elvenwood { color: #a8e878; background-image: linear-gradient(90deg, #b8f5d8 0 36%, #f2c14e 48% 62%, #b8f5d8 100%); }

/* Raw magic: lavender electric core between violet and magenta. */
.rz-c-arcane { color: #d8a8f8; background-image: linear-gradient(90deg, #a78bfa, #d8a8f8, #f472b6, #a78bfa); }

/* --- Medieval --- */

/* Polished plate: cold blue-grey steel with a silver gleam. */
.rz-c-knight-steel { color: #a8c4e8; background-image: linear-gradient(90deg, #9aa4b4, #8fb8f0, #d8dde5, #8fb8f0, #9aa4b4); }

/* Stained glass catching the light: cathedral gold with a white glint. */
.rz-c-cathedral-gold { color: #f2c14e; background-image: linear-gradient(100deg, #ffd166 0 38%, #fff6cf 46% 52%, #f2c14e 60% 100%, #ffd166); }

/* A quartered banner: heraldic red and azure. */
.rz-c-heraldry { color: #ff8f8f; background-image: linear-gradient(90deg, #ff5f57 0 33%, #60a5fa 33% 66%, #ff5f57 66% 100%); }

/* Lance and banner: azure field with a gold pale. */
.rz-c-joust { color: #8fb8f0; background-image: linear-gradient(90deg, #60a5fa 0 44%, #f2c14e 56% 100%, #60a5fa); }

/* Aged vellum: warm cream darkening to sun-tanned leather and back. */
.rz-c-parchment { color: #e8c8a8; background-image: linear-gradient(90deg, #ffe8c8, #d8a86a, #fff6cf, #d8a86a, #ffe8c8); }

/* --- Anime --- */

/* Speed lines: screaming yellow charging into red. */
.rz-c-shonen-flare { color: #ffd166; background-image: linear-gradient(90deg, #fff6cf, #ffd166, #ff5f57, #ffd166, #fff6cf); }

/* Transformation flash: hot pink, a white gleam, then sky blue. */
.rz-c-magical-girl { color: #ff9ecd; background-image: linear-gradient(100deg, #ff9ecd 0 30%, #ffffff 40% 50%, #7ec8ff 60% 100%, #ff9ecd); }

/* Mobile-suit livery: red armour, silver frame. */
.rz-c-mecha-zeon { color: #ff8f8f; background-image: linear-gradient(90deg, #ff5f57 0 40%, #d8dde5 50% 60%, #ff5f57 100%); }

/* A tucked note: rose ink on white paper. PG-13 romance. */
.rz-c-love-letter { color: #ffb3c6; background-image: linear-gradient(90deg, #ff8faa, #fff0f5, #ffb3c6, #fff0f5, #ff8faa); }

/* --- Nature / space --- */

/* A crevassed ice wall: deep blue with a white core. */
.rz-c-glacier { color: #c8e6ff; background-image: linear-gradient(90deg, #9fd0ff 0 30%, #ffffff 45% 55%, #9fd0ff 100%); }

/* Nebula lanes: cyan, violet, magenta - the whole sky in one name. */
.rz-c-galaxy { color: #c8a8f8; background-image: linear-gradient(90deg, #4fd6f5 0 25%, #a78bfa 45% 60%, #f472b6 75% 100%, #4fd6f5); }

/* Polished jewellery: soft gold melting into blush pink. */
.rz-c-rose-gold { color: #f7b8a8; background-image: linear-gradient(90deg, #ffd9b3, #f472b6, #ffd9b3); }
.rz-c-ecchi-pink { color: #ff9ac4; background-image: linear-gradient(90deg, #ffb4d2, #ff73ad, #ffd1e2); }
.rz-c-hentai-night { color: #c5a4ff; background-image: linear-gradient(90deg, #aa91e8, #e2b5ff, #b887dc); }
.rz-c-ahegao-pop { color: #ff9ed2; background-image: linear-gradient(90deg, #ff88c4, #ffe1f1, #8fdcff, #ff88c4); }
.rz-c-doujin-ink { color: #d8d4e0; background-image: linear-gradient(90deg, #f0edf3, #aaa1b2, #f0edf3); }
.rz-c-senpai-blush { color: #ffacb9; background-image: linear-gradient(90deg, #ffc3cb, #ff879d, #ffc3cb); }
.rz-c-after-hours { color: #caa2ff; background-image: linear-gradient(90deg, #ad93e8, #ff83bb, #ad93e8); }
.rz-c-manga-heat { color: #ff9a78; background-image: linear-gradient(90deg, #ffd08d, #ff786d, #ffd08d); }
.rz-c-forbidden-panel { color: #e3cfef; background-image: linear-gradient(90deg, #eee8f2, #bd87d0, #eee8f2); }

/* ============================================================= FONT ======= */
/* Family / style / weight / tracking ONLY. A font class that touched colour
 * would silently beat the colour axis, which is the bug this split exists to kill. */

.rz-f-serif {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.rz-f-mono {
  font-family: 'JetBrains Mono', Consolas, 'SF Mono', ui-monospace, monospace;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.rz-f-italic {
  font-family: 'Palatino Linotype', Palatino, Georgia, serif;
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.rz-f-wide {
  font-weight: 600;
  letter-spacing: 0.14em;
}

.rz-f-heavy {
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* No webfont is loaded anywhere, here or on the sister sites, so every stack below
 * is a bet on faces that ship with Windows / macOS and MUST still look deliberate
 * on a machine with none of them. That is what the weight and tracking on each rule
 * are for: they carry the intent (tight and dark, airy and engraved) after the
 * family list has fallen all the way through to a generic. */

.rz-f-condensed {
  font-family: 'Arial Narrow', 'Roboto Condensed', 'Liberation Sans Narrow', 'Helvetica Neue', sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.rz-f-rounded {
  font-family: ui-rounded, 'SF Pro Rounded', 'Hiragino Maru Gothic ProN', Quicksand, 'Trebuchet MS', sans-serif;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.rz-f-blackletter {
  font-family: 'Old English Text MT', 'Blackadder ITC', Luminari, Trattatello, 'Palatino Linotype', serif;
  font-weight: 700;
  letter-spacing: 0.03em;
}

/* Engraved small caps by FAMILY, not by font-variant-caps: this axis is allowed to
 * set family/style/weight/tracking and nothing else, and Copperplate is the face
 * that carries the look on its own. Wide tracking is what keeps the fallback serif
 * reading as an inscription rather than as a plain serif. */
.rz-f-smallcaps {
  font-family: Copperplate, 'Copperplate Gothic Light', Optima, 'Palatino Linotype', serif;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.rz-f-slab {
  font-family: Rockwell, 'Roboto Slab', 'Bookman Old Style', 'Courier New', ui-monospace, monospace;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.rz-f-hand {
  font-family: 'Segoe Script', 'Bradley Hand', 'Ink Free', 'Comic Sans MS', cursive;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* --- cutesy fonts --- */

.rz-f-bubble {
  font-family: 'Baloo 2', 'Comic Neue', 'Nunito', 'Segoe UI Rounded', ui-rounded, sans-serif;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.rz-f-doodle {
  font-family: 'Patrick Hand', 'Ink Free', 'Bradley Hand', 'Comic Sans MS', cursive;
  font-weight: 400;
  letter-spacing: 0.04em;
}

.rz-f-sparkle {
  font-family: 'Quicksand', 'Nunito', 'Segoe UI Rounded', ui-rounded, sans-serif;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.rz-f-girly {
  font-family: 'Pacifico', 'Brush Script MT', 'Segoe Script', 'Great Vibes', cursive;
  font-weight: 400;
  letter-spacing: 0.03em;
}

.rz-f-pixel {
  font-family: 'Press Start 2P', 'Courier New', ui-monospace, monospace;
  font-weight: 400;
  letter-spacing: 0.02em;
  font-size: 0.75em;
}

.rz-f-fairy {
  font-family: 'Ratz Uncial Antiqua', 'Palatino Linotype', Georgia, serif;
  font-weight: 400;
  letter-spacing: 0.045em;
}

.rz-f-dream {
  font-family: 'Snell Roundhand', 'Brush Script MT', 'Great Vibes', 'Segoe Script', cursive;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.05em;
}

.rz-f-soft {
  font-family: 'Nunito', 'Baloo 2', 'Quicksand', ui-rounded, sans-serif;
  font-weight: 500;
  letter-spacing: 0.03em;
}

.rz-f-candy {
  font-family: 'Fredoka One', 'Baloo 2', 'Nunito', ui-rounded, sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.rz-f-pop {
  font-family: 'Luckiest Guy', 'Fredoka One', Impact, 'Arial Black', sans-serif;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.rz-f-swirl {
  font-family: 'Cedarville Cursive', 'Segoe Print', 'Bradley Hand', 'Ink Free', cursive;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.rz-f-ribbon {
  font-family: 'Satisfy', 'Brush Script MT', 'Great Vibes', 'Segoe Script', cursive;
  font-weight: 400;
  letter-spacing: 0.06em;
}

.rz-f-cherry {
  font-family: 'Lobster Two', 'Pacifico', 'Brush Script MT', cursive;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.rz-f-marshmallow {
  font-family: 'Comfortaa', 'Nunito', 'Quicksand', ui-rounded, sans-serif;
  font-weight: 400;
  letter-spacing: 0.06em;
}

/* --- themed fonts --- */
/* Same rule as every font above: family / style / weight / tracking ONLY, with
 * stacks that must still look deliberate after falling through to a generic. */

/* Elvish: light italic serif, widely tracked - airy and engraved. */
.rz-f-elvish {
  font-family: 'Palatino Linotype', Palatino, Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.09em;
}

/* Rune: heavy block caps carved wide, the letters of a standing stone. */
.rz-f-rune {
  font-family: 'Ratz Cinzel Decorative', Cinzel, Georgia, serif;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* Calligraphy: an inked formal script, Victorian copperplate. */
.rz-f-calligraphy {
  font-family: 'Edwardian Script ITC', 'Segoe Script', 'Lucida Handwriting', cursive;
  font-weight: 400;
  letter-spacing: 0.05em;
}

/* Scribe: a monk's hand - heavy italic serif, ink pressed into vellum. */
.rz-f-scribe {
  font-family: 'Times New Roman', Georgia, serif;
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* Herald: engraved small caps, wide - a wax seal's legend. */
.rz-f-herald {
  font-family: Castellar, 'Copperplate Gothic Light', 'Arial Narrow', sans-serif;
  font-weight: 600;
  letter-spacing: 0.16em;
}

/* Dragon: heavy slab with room to roar - a carved keep-sign. */
.rz-f-dragon {
  font-family: Rockwell, 'Bookman Old Style', 'Courier New', serif;
  font-weight: 800;
  letter-spacing: 0.08em;
}

/* Manga: bold comic lettering, an onomatopoeia mid-punch. */
.rz-f-manga {
  font-family: 'Ratz Luckiest Guy', Impact, 'Arial Black', sans-serif;
  font-weight: 400;
  letter-spacing: 0.035em;
}

/* Shonen: compressed impact, a title-card slam. */
.rz-f-shonen {
  font-family: Impact, 'Arial Black', 'Franklin Gothic Heavy', sans-serif;
  font-weight: 400;
  letter-spacing: 0.02em;
}

/* Kawaii: soft rounded caps, a sticker on a lunchbox. */
.rz-f-kawaii {
  font-family: 'Segoe UI Rounded', 'Varela Round', 'Hiragino Maru Gothic ProN', ui-rounded, sans-serif;
  font-weight: 600;
  letter-spacing: 0.05em;
  font-size: 0.95em;
}

/* Arcade: chunky monospace, an 80s cabinet. */
.rz-f-arcade {
  font-family: 'Courier New', 'Lucida Console', ui-monospace, monospace;
  font-weight: 700;
  letter-spacing: 0.03em;
}

/* Retro: wide typewriter - a 70s poster. */
.rz-f-retro {
  font-family: 'Courier New', 'Andale Mono', monospace;
  font-weight: 400;
  letter-spacing: 0.12em;
}

/* Ice: whisper-thin and far apart - frost on a window. */
.rz-f-ice {
  font-family: Arial, 'Helvetica Neue', 'Segoe UI', sans-serif;
  font-weight: 200;
  letter-spacing: 0.16em;
}

/* Fire: heavy italic serif - a flame leaning into the wind. */
.rz-f-fire {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 800;
  letter-spacing: 0.04em;
}

/* Spirit: floating sans, softly spaced - breath on cold air. */
.rz-f-spirit {
  font-family: Verdana, 'Segoe UI', 'Trebuchet MS', sans-serif;
  font-weight: 400;
  letter-spacing: 0.12em;
}
.rz-f-ecchi { font-family: 'Ratz Bangers', Impact, 'Arial Black', sans-serif; font-weight: 400; letter-spacing: .055em; }
.rz-f-hentai { font-family: 'Ratz Pirata One', 'Old English Text MT', Georgia, serif; font-weight: 400; letter-spacing: .065em; }
.rz-f-ahegao { font-family: 'Ratz Luckiest Guy', Impact, 'Arial Black', sans-serif; font-weight: 400; letter-spacing: -.01em; }
.rz-f-doujin { font-family: 'Ratz Caveat', 'Segoe Print', 'Bradley Hand', cursive; font-weight: 600; letter-spacing: .025em; }

/* =========================================================== EFFECT ======= */
/* Bloom: drop-shadow(currentColor). Because every colour class sets a real
 * `color` - gradients included - the bloom always matches the paint under it. */

.rz-e-glow {
  filter: drop-shadow(0 0 1px currentColor) drop-shadow(0 0 3px color-mix(in srgb, currentColor 65%, transparent));
}

.rz-e-bloom {
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.65)) drop-shadow(0 0 4px color-mix(in srgb, currentColor 68%, transparent));
}

.rz-e-pulse {
  filter: drop-shadow(0 0 1px currentColor) drop-shadow(0 0 4px color-mix(in srgb, currentColor 65%, transparent));
  animation: rz-e-pulse 3.2s ease-in-out infinite;
}

.rz-e-corona {
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.7)) drop-shadow(0 0 5px color-mix(in srgb, currentColor 62%, transparent));
  animation: rz-e-corona 4.2s ease-in-out infinite;
}

/* Drifts the colour's own ramp. Owns background-size so no colour class has to:
 * on a solid colour there is no background image to move and this is inert. */
.rz-e-sweep {
  background-size: 260% 100%;
  animation: rz-e-sweep 6s linear infinite;
}

/* A travelling highlight, done as a mask rather than an extra background layer -
 * a background layer would have to replace the colour's own gradient. The base
 * sits at 0.82 alpha so the band reads as brighter than the rest; the darkest
 * colour here still clears 4.5:1 at that alpha. */
.rz-e-shimmer {
  -webkit-mask-image: linear-gradient(100deg, rgba(0, 0, 0, 0.82) 40%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0.82) 60%);
  mask-image: linear-gradient(100deg, rgba(0, 0, 0, 0.82) 40%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0.82) 60%);
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
  animation: rz-e-shimmer 4.5s linear infinite;
}

/* Textures are masks for the same reason: they carve the glyph the colour axis
 * already painted, instead of fighting it for background-image. Single layer
 * each - stacked mask layers composite as a union and cancel the pattern out. */
.rz-e-etch {
  -webkit-mask-image: repeating-linear-gradient(115deg, rgba(0, 0, 0, 1) 0 3px, rgba(0, 0, 0, 0.55) 3px 4px);
  mask-image: repeating-linear-gradient(115deg, rgba(0, 0, 0, 1) 0 3px, rgba(0, 0, 0, 0.55) 3px 4px);
}

.rz-e-scale {
  -webkit-mask-image: repeating-radial-gradient(circle at 50% 0, rgba(0, 0, 0, 1) 0 3px, rgba(0, 0, 0, 0.5) 3px 4px);
  mask-image: repeating-radial-gradient(circle at 50% 0, rgba(0, 0, 0, 1) 0 3px, rgba(0, 0, 0, 0.5) 3px 4px);
}

.rz-e-dust {
  -webkit-mask-image: repeating-radial-gradient(circle at 0 0, rgba(0, 0, 0, 0.55) 0 1px, rgba(0, 0, 0, 1) 1px 5px);
  mask-image: repeating-radial-gradient(circle at 0 0, rgba(0, 0, 0, 0.55) 0 1px, rgba(0, 0, 0, 1) 1px 5px);
}

.rz-e-emboss {
  filter: drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.45)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.95));
}

/* --- effect set: every effect owns a distinct look --- */
/* The three static blooms read differently (soft halo / hot core / glass tube),
 * the textures carve differently, and no two animations do the same move. */

/* --- floating-particle effects --- */
/* These four move their glyphs OUT of the text flow: each pseudo-element is
 * absolutely positioned against the nameplate and animated (rise, twinkle,
 * glint, blink), so the name itself never grows or shifts. pointer-events:none
 * keeps the nameplate's links (leaderboard rows above all) fully clickable.
 * The transparent text-fill from a gradient colour class still inherits into
 * the particles, so each one restores its own -webkit-text-fill-color. */

/* Sparkle: a glinting particle at the corner of the name - it spins and flashes
 * in place, never touching the text it decorates. */
.rz-e-sparkle {
  position: relative;
  isolation: isolate;
  filter: drop-shadow(0 0 1px currentColor) drop-shadow(0 0 4px currentColor);
}
.rz-e-sparkle::after {
  content: "";
  position: absolute;
  top: 0.17em;
  right: 0.17em;
  width: 0.5em;
  height: 0.5em;
  z-index: -1;
  background: linear-gradient(currentColor 0 0) 50%/18% 100% no-repeat,
    linear-gradient(90deg, currentColor 0 0) 50%/100% 18% no-repeat;
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  animation: rz-e-sparkle-glint 2.8s ease-in-out infinite;
  pointer-events: none;
}

/* Twinkle: a lone star that blinks on and off above the name. */
.rz-e-twinkle {
  position: relative;
  isolation: isolate;
}
.rz-e-twinkle::after {
  content: "";
  position: absolute;
  top: 0.1em;
  right: 0.1em;
  width: 0.34em;
  height: 0.34em;
  z-index: -1;
  border: 0.08em solid currentColor;
  transform: rotate(45deg);
  animation: rz-e-twinkle 1.8s ease-in-out infinite;
  pointer-events: none;
}

/* Hearts: two hearts rise out of the name, drift up and fade - animated, not
 * glued to the text. The name keeps a soft pink glow underneath. */
.rz-e-hearts {
  position: relative;
  isolation: isolate;
  filter:
    drop-shadow(0 0 2px rgba(255, 150, 180, 0.7))
    drop-shadow(0 0 5px rgba(255, 120, 160, 0.45))
    drop-shadow(0 0 10px currentColor);
}
.rz-e-hearts::before,
.rz-e-hearts::after {
  content: "";
  position: absolute;
  bottom: 0.04em;
  width: 0.5em;
  height: 0.46em;
  z-index: -1;
  background: radial-gradient(circle at 30% 30%, currentColor 0 34%, transparent 36%),
    radial-gradient(circle at 70% 30%, currentColor 0 34%, transparent 36%),
    conic-gradient(from 45deg at 50% 58%, currentColor 0 25%, transparent 0);
  animation: rz-e-hearts-float 2.4s ease-out infinite;
  pointer-events: none;
}
.rz-e-hearts::before {
  left: 0.04em;
}
.rz-e-hearts::after {
  right: 0.04em;
  animation-delay: 1.2s;
}

/* Stars: two stars twinkle in place above the name, on alternate beats. */
.rz-e-stars {
  position: relative;
  isolation: isolate;
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 200, 0.85))
    drop-shadow(0 0 3px currentColor)
    drop-shadow(0 0 8px currentColor);
}
.rz-e-stars::before,
.rz-e-stars::after {
  content: "";
  position: absolute;
  top: 0.16em;
  width: 0.46em;
  height: 0.46em;
  z-index: -1;
  background: currentColor;
  clip-path: polygon(50% 0, 61% 36%, 100% 38%, 68% 59%, 79% 100%, 50% 75%, 21% 100%, 32% 59%, 0 38%, 39% 36%);
  animation: rz-e-stars-pulse 2.4s ease-in-out infinite;
  pointer-events: none;
}
.rz-e-stars::before {
  left: 0.08em;
}
.rz-e-stars::after {
  right: 0.08em;
  animation-delay: 1.2s;
}

/* --- particle systems --- */
/* CSS-drawn vector shapes, not text glyphs: each particle is a bordered box
 * carved into a shape (teardrop / diamond / petal) and painted in a FIXED hue,
 * because an ember should read as an ember over any colour. All out of the text
 * flow, pointer-events:none, parked (not hidden) under prefers-reduced-motion. */

/* Ember: two teardrop sparks rise off the bottom of the name, sway, and gutter
 * out like a fleck from a forge. */
.rz-e-ember {
  position: relative;
  isolation: isolate;
}
.rz-e-ember::before,
.rz-e-ember::after {
  content: "";
  position: absolute;
  bottom: 0.32em;
  width: 0.32em;
  height: 0.32em;
  z-index: -1;
  background: #ff8f4d;
  /* teardrop: one corner rounded, then tipped to point up-left */
  border-radius: 50% 50% 50% 0;
  box-shadow: 0 0 0.3em 0.02em rgba(255, 143, 77, 0.7);
  animation: rz-e-ember 2.6s ease-out infinite;
  pointer-events: none;
}
.rz-e-ember::before {
  left: 0.3em;
}
.rz-e-ember::after {
  right: 0.3em;
  animation-delay: 1.3s;
}

/* Motes: stardust - pale-gold diamonds drift down past the name on a slow
 * bob, the opposite direction to embers. */
.rz-e-motes {
  position: relative;
  isolation: isolate;
}
.rz-e-motes::before,
.rz-e-motes::after {
  content: "";
  position: absolute;
  top: 0.24em;
  width: 0.26em;
  height: 0.26em;
  z-index: -1;
  background: #ffe9b0;
  /* diamond: a square tipped on its corner */
  transform: rotate(45deg);
  box-shadow: 0 0 0.3em 0.02em rgba(255, 233, 176, 0.6);
  animation: rz-e-motes 3.6s ease-in-out infinite;
  pointer-events: none;
}
.rz-e-motes::before {
  left: 0.34em;
}
.rz-e-motes::after {
  right: 0.34em;
  animation-delay: 1.8s;
}

/* Petals: sakura-pink petals spin down past the name, like a blossom falling. */
.rz-e-petals {
  position: relative;
  isolation: isolate;
}
.rz-e-petals::before,
.rz-e-petals::after {
  content: "";
  position: absolute;
  top: 0.18em;
  width: 0.38em;
  height: 0.26em;
  z-index: -1;
  background: #ffa8c5;
  /* petal: a rounded blob that tumbles as it falls */
  border-radius: 0.3em 0.05em 0.3em 0.05em;
  box-shadow: 0 0 0.3em 0.02em rgba(255, 168, 197, 0.55);
  animation: rz-e-petals 3.2s ease-in-out infinite;
  pointer-events: none;
}
.rz-e-petals::before {
  left: 0.32em;
}
.rz-e-petals::after {
  right: 0.32em;
  animation-delay: 1.6s;
}

/* Neon: a glass tube. Four hard offset shadows carve a bright outline, then a
 * currentColor halo - the glow that reads as a lit sign rather than a bloom. */
.rz-e-neon {
  filter:
    drop-shadow(1px 0 0 rgba(255, 255, 255, 0.75))
    drop-shadow(-1px 0 0 rgba(255, 255, 255, 0.75))
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.75))
    drop-shadow(0 -1px 0 rgba(255, 255, 255, 0.75))
    drop-shadow(0 0 3px currentColor)
    drop-shadow(0 0 10px currentColor);
}

/* Holographic: iridescent foil - hue shadows ring the glyph like light off a
 * card hologram. Prism fringes the EDGES; this blooms OUT. */
.rz-e-holographic {
  filter:
    drop-shadow(0 0 2px rgba(255, 107, 107, 0.5))
    drop-shadow(0 0 4px rgba(255, 194, 77, 0.45))
    drop-shadow(0 0 6px rgba(77, 214, 245, 0.45))
    drop-shadow(0 0 10px rgba(167, 139, 250, 0.45))
    drop-shadow(0 0 16px rgba(244, 114, 182, 0.35));
}

/* Shade: a hard cast shadow and nothing else - the one effect that goes DARK. */
.rz-e-shade {
  filter: drop-shadow(2px 2px 0 rgba(0, 0, 0, 0.85));
}

/* Prism: subtle rainbow banding on the glyph's edges via staggered drop-shadows. */
.rz-e-prism {
  filter:
    drop-shadow(1px 0 0 rgba(255, 107, 107, 0.45))
    drop-shadow(-1px 0 0 rgba(77, 214, 245, 0.45))
    drop-shadow(0 1px 0 rgba(189, 224, 74, 0.45))
    drop-shadow(0 -1px 0 rgba(167, 139, 250, 0.45));
}

/* Rainbow Halo: soft rainbow glow ring. */
.rz-e-rainbow-halo {
  filter:
    drop-shadow(0 0 3px rgba(255, 107, 107, 0.6))
    drop-shadow(0 0 6px rgba(255, 194, 77, 0.5))
    drop-shadow(0 0 9px rgba(189, 224, 74, 0.5))
    drop-shadow(0 0 12px rgba(77, 214, 245, 0.5))
    drop-shadow(0 0 15px rgba(167, 139, 250, 0.5));
}

/* Forbidden Runes: stationary, hand-drawn Elder-Futhark-like marks framing the
 * glyphs. The artwork is vector paths (not font characters), so it remains an
 * actual rune ornament even when the selected font has no runic codepoints. */
.rz-e-rune-halo { position: relative; isolation: isolate; }
.rz-e-rune-halo::before,
.rz-e-rune-halo::after {
  content: "";
  position: absolute;
  top: 50%;
  /* Sized to the band, not to taste: a rune wider than the band lands on the first and
   * last glyph instead of framing them. */
  width: 0.5em;
  height: 0.5em;
  transform: translateY(-50%);
  opacity: .85;
  z-index: -1;
  pointer-events: none;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23d9c4ff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 51V13m0 18 16-15M12 31l16 16M37 50V14l15 9-15 9 15 9-15 9Z'/%3E%3Cpath d='M7 57h50' opacity='.45'/%3E%3C/g%3E%3C/svg%3E");
  filter: drop-shadow(0 0 2px rgba(184, 135, 255, .55));
}
.rz-e-rune-halo::before { left: 0; }
.rz-e-rune-halo::after { right: 0; transform: translateY(-50%) scaleX(-1); }

/* ============================================================ BRAND ======= */
/* The wordmark cut: last two glyphs white, the way RATZ·GG sets GG apart. The
 * tail is a nested <span class="rz-tail"> the Nameplate always emits - a child
 * element is the only thing that can opt out of the parent's inherited fill.
 * NOTE: .rz-tail deliberately has no rule of its own outside this selector, so
 * without .rz-brand it inherits everything and renders as the surrounding text. */

.rz-brand .rz-tail {
  color: #ffffff;
  /* Opaque fill on the child paints over the parent's clipped gradient, which is
   * what gives a gradient colour a white tail without a second element. */
  -webkit-text-fill-color: #ffffff;
}

@keyframes rz-c-spectrum-drift {
  from { background-position: 0% 50%; }
  to { background-position: -150% 50%; }
}

@keyframes rz-c-tidal {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}

@keyframes rz-c-moonlit {
  0%, 55% { background-position: 0% 50%; }
  100% { background-position: -200% 50%; }
}

/* Premium particle collections. Decorations are CSS geometry, remain outside text
 * flow, and inherit no glyph content from fonts or Unicode. */
.rz-e-bubbles, .rz-e-bows, .rz-e-paw-trail, .rz-e-aura-flare,
.rz-e-blush-haze, .rz-e-modesty-steam, .rz-e-censor-sweep, .rz-e-teasing-heartbeat,
.rz-e-fae-wisps {
  position: relative;
  isolation: isolate;
}
.rz-e-bubbles::before, .rz-e-bubbles::after, .rz-e-bows::before, .rz-e-bows::after,
.rz-e-paw-trail::before, .rz-e-paw-trail::after,
.rz-e-aura-flare::before, .rz-e-aura-flare::after,
.rz-e-blush-haze::before, .rz-e-blush-haze::after, .rz-e-modesty-steam::before, .rz-e-modesty-steam::after,
.rz-e-censor-sweep::before, .rz-e-censor-sweep::after, .rz-e-teasing-heartbeat::before, .rz-e-teasing-heartbeat::after,
.rz-e-fae-wisps::before, .rz-e-fae-wisps::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
}

.rz-e-bubbles { filter: drop-shadow(0 0 2px rgba(158,239,255,.35)); }
.rz-e-bubbles::before, .rz-e-bubbles::after { width: .4em; height: .4em; border: .07em solid #9eefff; border-radius: 50%; box-shadow: .52em -.2em 0 -.08em #d7f8ff, .95em .1em 0 -.14em #8ce6ff; animation: rz-e-particle-rise 3s ease-out infinite; }
.rz-e-bubbles::before { left: .06em; bottom: .2em; } .rz-e-bubbles::after { right: .95em; bottom: .24em; animation-delay: 1.5s; }

.rz-e-bows { filter: drop-shadow(0 0 2px rgba(255,145,200,.3)); }
.rz-e-bows::before, .rz-e-bows::after { top: .05em; width: .58em; height: .36em; background: conic-gradient(from 60deg at 50% 50%, #ff91c8 0 16%, transparent 0 34%, #ff91c8 0 50%, transparent 0 67%, #ff91c8 0 84%, transparent 0); filter: drop-shadow(0 0 .2em #ff91c8); animation: rz-e-pop 2.8s ease-in-out infinite; }
.rz-e-bows::before { left: .05em; } .rz-e-bows::after { right: .05em; animation-delay: 1.4s; }

.rz-e-paw-trail { filter: none; }
.rz-e-paw-trail::before, .rz-e-paw-trail::after { width: .5em; height: .42em; bottom: .06em; background: radial-gradient(ellipse at 50% 70%, #ff9bc9 0 35%, transparent 37%), radial-gradient(circle at 15% 22%, #ff9bc9 0 12%, transparent 14%), radial-gradient(circle at 50% 8%, #ff9bc9 0 12%, transparent 14%), radial-gradient(circle at 85% 22%, #ff9bc9 0 12%, transparent 14%); animation: rz-e-paw-step 2.4s ease-in-out infinite; }
.rz-e-paw-trail::before { left: 12%; } .rz-e-paw-trail::after { right: 12%; animation-delay: 1.2s; }

.rz-e-aura-flare { filter: none; }
.rz-e-aura-flare::before, .rz-e-aura-flare::after { inset: .26em max(.26em, 5%); border-radius: 50%; background: radial-gradient(ellipse, transparent 42%, rgba(127,126,255,.5) 58%, transparent 72%); filter: blur(.12em); animation: rz-e-aura 2.5s ease-in-out infinite; }
.rz-e-aura-flare::after { inset: .34em max(.34em, 12%); animation-delay: 1.25s; }

.rz-e-blush-haze { filter: none; }
.rz-e-blush-haze::before, .rz-e-blush-haze::after { width: min(1em, 40%); height: .6em; top: 25%; border-radius: 50%; background: radial-gradient(ellipse, rgba(255,128,173,.7), transparent 70%); filter: blur(.12em); animation: rz-e-haze 3s ease-in-out infinite; }
.rz-e-blush-haze::before { left: .26em; } .rz-e-blush-haze::after { right: .26em; animation-delay: 1.5s; }

.rz-e-modesty-steam { filter: none; }
.rz-e-modesty-steam::before, .rz-e-modesty-steam::after { width: .5em; height: .6em; bottom: .04em; border-radius: 50%; background: radial-gradient(ellipse, rgba(235,245,255,.8) 0 30%, transparent 68%); filter: blur(.08em); animation: rz-e-steam 3.2s ease-out infinite; }
.rz-e-modesty-steam::before { left: 10%; } .rz-e-modesty-steam::after { right: 10%; animation-delay: 1.6s; }

.rz-e-censor-sweep { filter: none; }
.rz-e-censor-sweep::before, .rz-e-censor-sweep::after { top: 42%; left: .08em; width: 34%; height: .28em; border-radius: .08em; background: #17131f; box-shadow: 0 0 .12em #ff5aa5; animation: rz-e-censor 2.8s ease-in-out infinite; }
.rz-e-censor-sweep::after { animation-delay: 1.4s; }

.rz-e-teasing-heartbeat { filter: none; }
.rz-e-teasing-heartbeat::before, .rz-e-teasing-heartbeat::after { width: .34em; height: .3em; top: .18em; border: .08em solid #ff719f; border-top: 0; border-left: 0; transform: rotate(45deg); border-radius: 45% 45% 8%; animation: rz-e-heartbeat 1.5s ease-in-out infinite; }
.rz-e-teasing-heartbeat::before { left: .18em; } .rz-e-teasing-heartbeat::after { right: .18em; animation-delay: .75s; }

.rz-e-fae-wisps { filter: drop-shadow(0 0 2px rgba(133,255,212,.25)); }
.rz-e-fae-wisps::before, .rz-e-fae-wisps::after { width: .28em; height: .28em; border-radius: 50%; background: #baffe7; box-shadow: 0 0 .3em .06em #85ffd4, .62em .12em 0 -.06em #e4c4ff; animation: rz-e-wisp 3.5s ease-in-out infinite; }
.rz-e-fae-wisps::before { left: .38em; top: .38em; } .rz-e-fae-wisps::after { right: .95em; bottom: .38em; animation-delay: 1.75s; }


/* Mature-anime capsule: deliberately small, centered accents. */
.rz-e-ecchi-blush, .rz-e-hentai-censor, .rz-e-ahegao-pulse,
.rz-e-doujin-scratch, .rz-e-manga-steam, .rz-e-after-hours-glint { position: relative; isolation: isolate; }
.rz-e-ecchi-blush::before, .rz-e-ecchi-blush::after,
.rz-e-hentai-censor::before, .rz-e-hentai-censor::after,
.rz-e-ahegao-pulse::before, .rz-e-ahegao-pulse::after,
.rz-e-doujin-scratch::before, .rz-e-doujin-scratch::after,
.rz-e-manga-steam::before, .rz-e-manga-steam::after,
.rz-e-after-hours-glint::before, .rz-e-after-hours-glint::after {
  content: ""; position: absolute; pointer-events: none; z-index: -1;
}
.rz-e-ecchi-blush { filter: none; }
.rz-e-ecchi-blush::before, .rz-e-ecchi-blush::after { top: 35%; width: .7em; height: .38em; border-radius: 50%; background: radial-gradient(ellipse, rgba(255,116,162,.62), transparent 72%); animation: rz-e-soft-breathe 3.6s ease-in-out infinite; }
.rz-e-ecchi-blush::before { left: .1em; } .rz-e-ecchi-blush::after { right: .1em; animation-delay: 1.8s; }
.rz-e-hentai-censor { filter: none; }
.rz-e-hentai-censor::before, .rz-e-hentai-censor::after { top: 45%; left: 5%; width: 24%; height: .18em; border-radius: .06em; background: rgba(26,20,32,.88); animation: rz-e-short-sweep 3.8s ease-in-out infinite; }
.rz-e-hentai-censor::after { animation-delay: 1.9s; }
.rz-e-ahegao-pulse { filter: drop-shadow(0 0 2px rgba(255,125,184,.35)); }
.rz-e-ahegao-pulse::before, .rz-e-ahegao-pulse::after { width: .22em; height: .22em; top: .1em; border-radius: 50%; background: #ff9dce; opacity: .7; animation: rz-e-soft-breathe 2.8s ease-in-out infinite; }
.rz-e-ahegao-pulse::before { left: 12%; } .rz-e-ahegao-pulse::after { right: 12%; animation-delay: 1.4s; }
.rz-e-doujin-scratch { filter: none; }
.rz-e-doujin-scratch::before, .rz-e-doujin-scratch::after { left: 12%; right: 12%; height: 1px; background: currentColor; opacity: .35; animation: rz-e-ink-shift 4s ease-in-out infinite; }
.rz-e-doujin-scratch::before { top: .12em; } .rz-e-doujin-scratch::after { bottom: .12em; animation-delay: 2s; }
.rz-e-manga-steam { filter: none; }
.rz-e-manga-steam::before, .rz-e-manga-steam::after { bottom: .06em; width: .38em; height: .55em; border-radius: 50%; background: radial-gradient(ellipse, rgba(235,240,250,.58), transparent 72%); animation: rz-e-small-steam 4s ease-out infinite; }
.rz-e-manga-steam::before { left: 8%; } .rz-e-manga-steam::after { right: 8%; animation-delay: 2s; }
.rz-e-after-hours-glint { filter: none; }
.rz-e-after-hours-glint::before, .rz-e-after-hours-glint::after { width: .42em; height: .42em; background: currentColor; clip-path: polygon(50% 0, 58% 42%, 100% 50%, 58% 58%, 50% 100%, 42% 58%, 0 50%, 42% 42%); opacity: .55; animation: rz-e-gentle-glint 4.4s ease-in-out infinite; }
.rz-e-after-hours-glint::before { left: .1em; top: .1em; } .rz-e-after-hours-glint::after { right: .1em; bottom: .1em; animation-delay: 2.2s; }

@keyframes rz-e-soft-breathe { 0%,100% { transform: scale(.96); opacity: .5; } 50% { transform: scale(1.03); opacity: .85; } }
/* Sweeps travel in % of the BAR, which is itself a % of the name - so a short name
 * gets a short sweep instead of a bar flying off the end of it. */
@keyframes rz-e-short-sweep { 0%,100% { transform: translateX(0); opacity: 0; } 25% { opacity: .65; } 60% { transform: translateX(280%); opacity: .65; } 75% { opacity: 0; } }
@keyframes rz-e-ink-shift { 0%,100% { transform: translateX(-.12em); opacity: .2; } 50% { transform: translateX(.12em); opacity: .45; } }
@keyframes rz-e-small-steam { from { transform: translateY(0) scale(.8); opacity: 0; } 25% { opacity: .55; } to { transform: translateY(-.4em) scale(1.05); opacity: 0; } }
@keyframes rz-e-gentle-glint { 0%,100% { transform: scale(.65) rotate(0); opacity: .2; } 50% { transform: scale(1) rotate(25deg); opacity: .7; } }

@keyframes rz-e-gentle-lift { 50% { transform: translateY(-.12em); } }
@keyframes rz-e-particle-rise { 0% { transform: translateY(.18em) scale(.65); opacity: 0; } 20% { opacity: .9; } 100% { transform: translateY(-0.3em) scale(1.1); opacity: 0; } }
@keyframes rz-e-pop { 0%,100% { transform: scale(.75); opacity: .45; } 45% { transform: scale(1.08); opacity: 1; } }
@keyframes rz-e-confetti { from { background-position: 10% -20%, 70% -30%; } to { background-position: 35% 130%, 45% 140%; } }
@keyframes rz-e-paw-step { 0%,100% { opacity: .15; transform: translateX(-.16em) rotate(-8deg); } 50% { opacity: 1; transform: translateX(.16em) rotate(8deg); } }
@keyframes rz-e-speed { from { transform: translateX(-.8em); opacity: 0; } 35% { opacity: .9; } to { transform: translateX(.8em); opacity: 0; } }
@keyframes rz-e-burst { 0%,100% { transform: scale(.65) rotate(0); opacity: 0; } 35% { opacity: .85; } 70% { transform: scale(1.1) rotate(4deg); opacity: 0; } }
@keyframes rz-e-aura { 0%,100% { transform: scale(.9); opacity: .45; } 50% { transform: scale(1.04) translateY(-.04em); opacity: .9; } }
@keyframes rz-e-impact { 0%,100% { transform: translate(-50%,-50%) scale(.15) rotate(0); opacity: 0; } 45% { opacity: 1; } 75% { transform: translate(-50%,-50%) scale(1.2) rotate(20deg); opacity: 0; } }
@keyframes rz-e-haze { 0%,100% { transform: scale(.8); opacity: .25; } 50% { transform: scale(1.08); opacity: .8; } }
@keyframes rz-e-steam { from { transform: translateY(0) scale(.7); opacity: 0; } 25% { opacity: .75; } to { transform: translateY(-.42em) scale(1.1); opacity: 0; } }
@keyframes rz-e-censor { 0%,100% { transform: translateX(0); opacity: 0; } 25%,65% { opacity: .85; } 80% { transform: translateX(168%); opacity: 0; } }
@keyframes rz-e-heartbeat { 0%,100% { transform: scale(.75) rotate(45deg); opacity: .45; } 20% { transform: scale(1.1) rotate(45deg); opacity: 1; } 35% { transform: scale(.9) rotate(45deg); } 50% { transform: scale(1.02) rotate(45deg); } }
@keyframes rz-e-wisp { 0%,100% { transform: translate(0,.12em); opacity: .2; } 50% { transform: translate(.12em,-.12em); opacity: 1; } }
@keyframes rz-e-orbit { to { transform: rotate(360deg); } }
@keyframes rz-e-sparks { from { transform: translateY(.4em) skewX(-25deg) scaleY(.4); opacity: 0; } 25% { opacity: 1; } to { transform: translate(.35em,-1.2em) skewX(-25deg) scaleY(1); opacity: 0; } }
@keyframes rz-e-portal { to { transform: rotate(360deg); } }

@keyframes rz-c-candleflame {
  0% { background-position: 12% 50%; }
  17% { background-position: 63% 50%; }
  29% { background-position: 31% 50%; }
  46% { background-position: 78% 50%; }
  58% { background-position: 44% 50%; }
  71% { background-position: 91% 50%; }
  83% { background-position: 24% 50%; }
  100% { background-position: 12% 50%; }
}

@keyframes rz-c-quicksilver {
  from { background-position: 0% 50%; }
  to { background-position: -200% 50%; }
}

@keyframes rz-c-cascade {
  from { background-position: 50% 0%; }
  to { background-position: 50% -150%; }
}

@keyframes rz-c-comet {
  from { background-position: 0% 0%; }
  to { background-position: -200% -200%; }
}

@keyframes rz-c-lantern {
  from { background-size: 110% 100%; }
  to { background-size: 340% 100%; }
}

@keyframes rz-e-sweep {
  from { background-position: 0% 50%; }
  to { background-position: -200% 50%; }
}

@keyframes rz-e-shimmer {
  from { -webkit-mask-position: 150% 50%; mask-position: 150% 50%; }
  to { -webkit-mask-position: -50% 50%; mask-position: -50% 50%; }
}

@keyframes rz-e-pulse {
  0%, 100% { filter: drop-shadow(0 0 1px currentColor) drop-shadow(0 0 4px color-mix(in srgb, currentColor 65%, transparent)); }
  50% { filter: drop-shadow(0 0 1px color-mix(in srgb, currentColor 55%, transparent)); }
}

@keyframes rz-e-corona {
  0%, 100% {
    filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.7)) drop-shadow(0 0 5px color-mix(in srgb, currentColor 62%, transparent));
  }
  50% {
    filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.5)) drop-shadow(0 0 2px color-mix(in srgb, currentColor 55%, transparent));
  }
}

@keyframes rz-e-sparkle-glint {
  0%, 100% { transform: scale(0.55) rotate(0deg); opacity: 0.15; }
  50% { transform: scale(1.15) rotate(40deg); opacity: 1; }
}

@keyframes rz-e-bounce {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-3px); }
  50% { transform: translateY(0); }
  70% { transform: translateY(-1.5px); }
}

@keyframes rz-e-wiggle {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  15% { transform: translateX(-2px) rotate(-1deg); }
  35% { transform: translateX(2px) rotate(1deg); }
  55% { transform: translateX(-1px) rotate(-0.5deg); }
  75% { transform: translateX(1px) rotate(0.5deg); }
}

@keyframes rz-e-twinkle {
  0%, 100% { opacity: 1; }
  40% { opacity: 0.55; }
  60% { opacity: 1; }
  80% { opacity: 0.75; }
}

@keyframes rz-e-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes rz-e-peekaboo {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

@keyframes rz-e-flicker {
  0% { filter: brightness(1); }
  18% { filter: brightness(0.8); }
  34% { filter: brightness(1.08); }
  52% { filter: brightness(0.85); }
  68% { filter: brightness(1.03); }
  84% { filter: brightness(0.92); }
  100% { filter: brightness(1); }
}

@keyframes rz-e-hearts-float {
  0% { transform: translateY(0) scale(0.6); opacity: 0; }
  12% { opacity: 0.9; }
  100% { transform: translateY(-0.72em) scale(1.05); opacity: 0; }
}

@keyframes rz-e-squish {
  0%, 100% { transform: scaleX(1) scaleY(1); }
  25% { transform: scaleX(1.06) scaleY(0.94); }
  75% { transform: scaleX(0.94) scaleY(1.06); }
}

@keyframes rz-e-stars-pulse {
  0%, 100% { transform: scale(1) translateY(0); opacity: 0.9; }
  50% { transform: scale(1.3) translateY(-0.06em); opacity: 0.35; }
}

@keyframes rz-e-ember {
  0% { transform: translate(0, 0.15em) rotate(-45deg) scale(0.9); opacity: 0; }
  10% { opacity: 1; }
  50% { transform: translate(-0.1em, -0.26em) rotate(-32deg) scale(0.75); opacity: 0.95; }
  100% { transform: translate(0.12em, -0.46em) rotate(-18deg) scale(0.35); opacity: 0; }
}

@keyframes rz-e-motes {
  0% { transform: translate(0, 0) rotate(45deg); opacity: 0; }
  12% { opacity: 0.9; }
  50% { transform: translate(0.1em, 0.26em) rotate(45deg); opacity: 0.9; }
  100% { transform: translate(-0.08em, 0.5em) rotate(45deg); opacity: 0; }
}

@keyframes rz-e-petals {
  0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
  10% { opacity: 0.95; }
  45% { transform: translate(-0.12em, 0.28em) rotate(170deg); opacity: 0.95; }
  100% { transform: translate(0.12em, 0.5em) rotate(340deg); opacity: 0; }
}

/* --- Black -----------------------------------------------------------------------------
   The chat background is #0a0a0a, so an unstroked black glyph is simply not there. The rim is
   what makes it readable, so it is a real part of the paint and not decoration. text-stroke and
   NOT text-shadow: see the header - a shadow paints flat colour into the glyph box. paint-order
   draws the stroke first, so it rims each letter instead of eating into it. */
.rz-c-black {
  color: #0b0b0b;
  -webkit-text-stroke: 0.045em #f2f2f2;
  paint-order: stroke fill;
}

.rz-c-gothic { color: #c98bb0; background-image: linear-gradient(90deg, #e08aa0, #a78bfa, #e08aa0); }

/* --- Candle Vigil ----------------------------------------------------------------------
   Gothic light: a bloom that gutters rather than breathes. The stops are deliberately uneven -
   an evenly spaced curve reads as a pulse, and a candle does not pulse. drop-shadow, not
   text-shadow, so a gradient colour underneath survives. */
.rz-e-vigil {
  filter: drop-shadow(0 0 0.16em rgba(209, 106, 134, 0.75));
  animation: rz-e-vigil 4.7s ease-in-out infinite;
}
@keyframes rz-e-vigil {
  0%, 100% { filter: drop-shadow(0 0 0.14em rgba(209, 106, 134, 0.60)); }
  17%      { filter: drop-shadow(0 0 0.26em rgba(209, 106, 134, 0.90)); }
  23%      { filter: drop-shadow(0 0 0.11em rgba(209, 106, 134, 0.50)); }
  41%      { filter: drop-shadow(0 0 0.30em rgba(232, 140, 120, 0.95)); }
  47%      { filter: drop-shadow(0 0 0.13em rgba(209, 106, 134, 0.55)); }
  68%      { filter: drop-shadow(0 0 0.22em rgba(209, 106, 134, 0.80)); }
  74%      { filter: drop-shadow(0 0 0.12em rgba(209, 106, 134, 0.50)); }
}

/* --- Bats ------------------------------------------------------------------------------
   Silhouettes crossing behind the name. Drawn from gradients because pseudo-element content
   must stay empty, and kept a lifted violet-grey rather than true black so they read as shapes
   against the near-black chat background instead of vanishing into it. */
.rz-e-bats {
  position: relative;
  isolation: isolate;
}
.rz-e-bats::before,
.rz-e-bats::after {
  content: "";
  position: absolute;
  top: 0.08em;
  left: 0.2em;
  width: 0.36em;
  height: 0.17em;
  z-index: -1;
  background:
    radial-gradient(circle at 22% 62%, #5b4a70 0 44%, transparent 45%),
    radial-gradient(circle at 78% 62%, #5b4a70 0 44%, transparent 45%),
    linear-gradient(#4a3d5c, #4a3d5c) 50% 34% / 14% 62% no-repeat;
  animation: rz-e-bats 5.4s linear infinite;
  pointer-events: none;
}
.rz-e-bats::after {
  top: 0.42em;
  left: 0.34em;
  animation-duration: 6.8s;
  animation-delay: 2.4s;
}
@keyframes rz-e-bats {
  0%   { transform: translate(0, 0) scaleX(1);      opacity: 0; }
  12%  {                                            opacity: 0.9; }
  50%  { transform: translate(0.5em, -0.13em) scaleX(0.82); }
  88%  {                                            opacity: 0.9; }
  100% { transform: translate(1em, 0.02em) scaleX(1); opacity: 0; }
}

/* --- Maid ------------------------------------------------------------------------------
   A lace hem under the name and a ribbon at its end. Both are gradient-drawn for the same
   reason as the bats, and both sit inside the glyph box - a nameplate is inline, so anything
   reaching past its own box lands on whoever is rendered next to it. */
.rz-e-maid {
  position: relative;
  isolation: isolate;
}
.rz-e-maid::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0.13em;
  z-index: -1;
  background: radial-gradient(circle at 0.065em 0, #fdfdff 0 0.052em, transparent 0.053em) 0 0 / 0.13em 0.13em repeat-x;
  opacity: 0.8;
  animation: rz-e-maid 3.6s ease-in-out infinite;
  pointer-events: none;
}
.rz-e-maid::after {
  content: "";
  position: absolute;
  top: 0.02em;
  right: 0;
  width: 0.3em;
  height: 0.2em;
  z-index: -1;
  background:
    radial-gradient(ellipse at 18% 50%, #ff9ecd 0 46%, transparent 47%),
    radial-gradient(ellipse at 82% 50%, #ff9ecd 0 46%, transparent 47%),
    linear-gradient(#ffd9ea, #ffd9ea) 50% 50% / 20% 44% no-repeat;
  animation: rz-e-maid-bow 3.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes rz-e-maid {
  0%, 100% { opacity: 0.66; transform: translateY(0); }
  50%      { opacity: 0.92; transform: translateY(-0.02em); }
}
@keyframes rz-e-maid-bow {
  0%, 100% { transform: rotate(-6deg) scale(1); }
  50%      { transform: rotate(6deg) scale(1.07); }
}

@media (prefers-reduced-motion: reduce) {
  .rz-e-pulse,
  .rz-e-corona,
  .rz-e-sweep,
  .rz-e-shimmer {
    animation: none;
    background-position: 0% 50%;
    -webkit-mask-position: 50% 50%;
    mask-position: 50% 50%;
  }

  .rz-e-vigil,
  .rz-e-bats::before,
  .rz-e-bats::after,
  .rz-e-maid::before,
  .rz-e-maid::after {
    animation: none;
  }

  /* Animated effects (every one marked animated in lib/paints.ts) */
  .rz-e-sparkle,
  .rz-e-twinkle,
  .rz-e-hearts,
  .rz-e-stars,
  .rz-e-ember,
  .rz-e-motes,
  .rz-e-petals {
    animation: none;
  }

  .rz-e-bubbles, .rz-e-bows, .rz-e-paw-trail, .rz-e-aura-flare,
  .rz-e-blush-haze, .rz-e-modesty-steam, .rz-e-censor-sweep, .rz-e-teasing-heartbeat,
  .rz-e-fae-wisps,
  .rz-e-bubbles::before, .rz-e-bubbles::after, .rz-e-bows::before, .rz-e-bows::after,
  .rz-e-paw-trail::before, .rz-e-paw-trail::after,
  .rz-e-aura-flare::before, .rz-e-aura-flare::after,
  .rz-e-blush-haze::before, .rz-e-blush-haze::after, .rz-e-modesty-steam::before, .rz-e-modesty-steam::after,
  .rz-e-censor-sweep::before, .rz-e-censor-sweep::after, .rz-e-teasing-heartbeat::before, .rz-e-teasing-heartbeat::after,
  .rz-e-fae-wisps::before, .rz-e-fae-wisps::after {
    animation: none;
  }
  .rz-e-ecchi-blush, .rz-e-hentai-censor, .rz-e-ahegao-pulse,
  .rz-e-doujin-scratch, .rz-e-manga-steam, .rz-e-after-hours-glint,
  .rz-e-ecchi-blush::before, .rz-e-ecchi-blush::after,
  .rz-e-hentai-censor::before, .rz-e-hentai-censor::after,
  .rz-e-ahegao-pulse::before, .rz-e-ahegao-pulse::after,
  .rz-e-doujin-scratch::before, .rz-e-doujin-scratch::after,
  .rz-e-manga-steam::before, .rz-e-manga-steam::after,
  .rz-e-after-hours-glint::before, .rz-e-after-hours-glint::after { animation: none; }

  .rz-e-sparkle {
    filter: drop-shadow(0 0 1px currentColor) drop-shadow(0 0 4px currentColor);
  }
  .rz-e-sparkle::after { animation: none; transform: scale(0.9) rotate(0deg); opacity: 0.9; }

  .rz-e-twinkle::after { animation: none; opacity: 0.9; }
  .rz-e-hearts {
    filter: drop-shadow(0 0 2px rgba(255, 150, 180, 0.5));
  }
  .rz-e-hearts::before,
  .rz-e-hearts::after { animation: none; transform: translateY(0) scale(1); opacity: 0.9; }
  .rz-e-stars {
    filter: drop-shadow(0 0 2px rgba(255, 255, 200, 0.55));
  }
  .rz-e-stars::before,
  .rz-e-stars::after { animation: none; transform: scale(1) translateY(0); opacity: 0.9; }
  .rz-e-ember::before,
  .rz-e-ember::after { animation: none; transform: rotate(-45deg) translate(0, 0) scale(1); opacity: 0.85; }
  .rz-e-motes::before,
  .rz-e-motes::after { animation: none; transform: rotate(45deg) translate(0, 0); opacity: 0.85; }
  .rz-e-petals::before,
  .rz-e-petals::after { animation: none; transform: translate(0, 0) rotate(0deg); opacity: 0.85; }

  /* Every animated colour, parked centred rather than at 0% - each of these ramps
   * has its interesting stops in the middle, and the edge frame of a two-tone or a
   * radial is the one that reads as a flat colour. */
  .rz-c-spectrum-drift,
  .rz-c-tidal,
  .rz-c-moonlit,
  .rz-c-candleflame,
  .rz-c-quicksilver,
  .rz-c-cascade,
  .rz-c-comet,
  .rz-c-lantern {
    animation: none;
    background-position: 50% 50%;
  }
}