/* Vibein cosmetics: what people wear. This is user content, so it keeps its color.
   The app chrome in app.css stays quiet around it. */

/* ---------- avatar decorations ---------- */
.av .deco { position: absolute; pointer-events: none; z-index: 2; }
.deco-orbit .deco { inset: -4px; border-radius: 50%; background: conic-gradient(from 0deg, #c6f432, #7cc4ff, #ff7ab6, #c6f432); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); animation: spin 3s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.deco-crown .deco, .deco-halo .deco, .deco-fire .deco, .deco-sprout .deco, .deco-headphones .deco, .deco-skull .deco, .deco-sparkle .deco, .deco-hearts .deco, .deco-shades .deco { font-size: calc(var(--s) * .5); line-height: 1; }
.deco-crown .deco { top: calc(var(--s) * -.36); left: 50%; transform: translateX(-50%) rotate(-8deg); }
.deco-halo .deco { top: calc(var(--s) * -.14); left: 12%; right: 12%; height: calc(var(--s) * .2); border-radius: 50%; border: 2px solid #ffe27a; box-shadow: 0 0 8px #ffe27a; animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-2px); } }
.deco-fire .deco { bottom: calc(var(--s) * -.2); left: 50%; transform: translateX(-50%); letter-spacing: -.25em; white-space: nowrap; font-size: calc(var(--s) * .34) !important; animation: flick .5s infinite alternate; }
@keyframes flick { to { transform: translateX(-50%) scale(1.08, .95); } }
.deco-sprout .deco { top: calc(var(--s) * -.34); left: 50%; transform: translateX(-50%); animation: sway 2s ease-in-out infinite; transform-origin: bottom center; }
@keyframes sway { 50% { transform: translateX(-50%) rotate(12deg); } }
.deco-headphones .deco { top: calc(var(--s) * -.18); left: 50%; transform: translateX(-50%); font-size: calc(var(--s) * .62); }
.deco-skull .deco { right: calc(var(--s) * -.18); top: calc(var(--s) * -.18); font-size: calc(var(--s) * .38); animation: wob 1.4s ease-in-out infinite; }
@keyframes wob { 50% { transform: rotate(-14deg) scale(1.1); } }
.deco-sparkle .deco { inset: calc(var(--s) * -.2); font-size: calc(var(--s) * .3); }
.deco-sparkle .deco::before, .deco-sparkle .deco::after { content: "✦"; position: absolute; color: #ffe27a; animation: twinkle 1.6s infinite; }
.deco-sparkle .deco::before { top: 0; right: 4%; }
.deco-sparkle .deco::after { bottom: 6%; left: 0; animation-delay: .8s; color: #7cc4ff; }
@keyframes twinkle { 0%, 100% { opacity: .2; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.15); } }
.deco-hearts .deco { inset: 0; font-size: calc(var(--s) * .26); }
.deco-hearts .deco::before, .deco-hearts .deco::after { content: "♥"; position: absolute; color: #ff5c8a; animation: floatup 2.2s infinite; bottom: 10%; }
.deco-hearts .deco::before { left: -8%; }
.deco-hearts .deco::after { right: -8%; animation-delay: 1.1s; color: #ff9ec0; }
@keyframes floatup { 0% { opacity: 0; transform: translateY(0) scale(.6); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(calc(var(--s) * -.9)) scale(1.1); } }
.deco-shades .deco { top: 30%; left: 50%; transform: translateX(-50%); font-size: calc(var(--s) * .44); }
.deco-cat .deco { inset: 0; }
.deco-cat .deco::before, .deco-cat .deco::after { content: ""; position: absolute; top: calc(var(--s) * -.12); width: 0; height: 0; border-left: calc(var(--s) * .16) solid transparent; border-right: calc(var(--s) * .16) solid transparent; border-bottom: calc(var(--s) * .3) solid #ff9ec0; filter: drop-shadow(0 0 1px #000); }
.deco-cat .deco::before { left: 2%; transform: rotate(-24deg); }
.deco-cat .deco::after { right: 2%; transform: rotate(24deg); }
.deco-glitch > .av-img, .deco-glitch > .av-fb { animation: glitch 2.5s infinite steps(1); }
@keyframes glitch { 0%, 92%, 100% { filter: none; transform: none; } 93% { filter: hue-rotate(90deg) saturate(3); transform: translateX(2px); } 96% { filter: hue-rotate(-90deg); transform: translateX(-2px); } }
.deco-ring .deco { inset: -3px; border-radius: 50%; border: 2px solid var(--text); }
.deco-double .deco { inset: -5px; border-radius: 50%; border: 2px solid #c6f432; box-shadow: inset 0 0 0 2px var(--bg2), inset 0 0 0 4px #c6f432; }
.deco-g .deco { font-size: calc(var(--s) * .4); line-height: 1; }
.deco-g-corner .deco { right: calc(var(--s) * -.14); top: calc(var(--s) * -.14); }
.deco-g-top .deco { top: calc(var(--s) * -.3); left: 50%; transform: translateX(-50%); font-size: calc(var(--s) * .48); }
.deco-custom .deco-img { position: absolute; inset: -18%; width: 136%; height: 136%; object-fit: contain; pointer-events: none; z-index: 2; }

/* ---------- display name styles (Vibein+) ---------- */
.font-classic { font-family: Georgia, "Times New Roman", serif; }
.font-code { font-family: var(--mono); }
.font-bubbly { font-family: "Comic Sans MS", "Chalkboard SE", "Comic Neue", cursive; }
.font-loud { font-family: Impact, "Arial Black", sans-serif; font-weight: 400; letter-spacing: .02em; }
.font-fancy { font-family: "Segoe Script", "Brush Script MT", "Lucida Handwriting", cursive; font-weight: 400; }
.font-wide { text-transform: uppercase; letter-spacing: .14em; font-size: .9em; font-weight: 600; }
.fx-solid { color: var(--c1); }
.fx-gradient { background: linear-gradient(90deg, var(--c1), var(--c2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fx-neon { color: var(--c1); text-shadow: 0 0 6px var(--c1), 0 0 14px color-mix(in srgb, var(--c1) 60%, transparent); }
.fx-rainbow { background: linear-gradient(90deg, #ff5f5f, #ffd166, #c6f432, #7cc4ff, #b388ff, #ff5f5f); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: slide 3s linear infinite; }
@keyframes slide { to { background-position: 200% 0; } }
.fx-shimmer { background: linear-gradient(100deg, var(--c1) 40%, #fff 50%, var(--c1) 60%); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: slide 2.4s linear infinite; }
.fx-toon { color: var(--c1); -webkit-text-stroke: .6px #000; text-shadow: 2px 2px 0 var(--c2, #000); }
.fx-pop { color: var(--c1); text-shadow: 1px 1px 0 var(--c2), 2px 2px 0 var(--c2), 3px 3px 0 color-mix(in srgb, var(--c2) 60%, transparent); }
/* role styles */
.rs-gradient { background: linear-gradient(90deg, var(--c1), var(--c2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rs-holo { background: linear-gradient(90deg, var(--c1), var(--c2), #fff, var(--c1)); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: slide 4s linear infinite; }

/* ---------- nameplates ---------- */
.np::before { content: ""; position: absolute; inset: 0; z-index: 0; opacity: .55; border-radius: inherit; }
.np-lime::before { background: linear-gradient(90deg, transparent 20%, rgba(198, 244, 50, .45)); }
.np-sunset::before { background: linear-gradient(90deg, transparent 15%, #ff7a59, #ff3d7f); }
.np-ocean::before { background: linear-gradient(90deg, transparent 15%, #1fa2ff, #12d8fa); }
.np-grape::before { background: linear-gradient(90deg, transparent 15%, #8e2de2, #e94dff); }
.np-ember::before { background: linear-gradient(90deg, transparent 15%, #f12711, #f5af19); }
.np-mint::before { background: linear-gradient(90deg, transparent 15%, #11998e, #38ef7d); }
.np-grid::before { background: linear-gradient(90deg, transparent, rgba(124, 196, 255, .5)), repeating-linear-gradient(0deg, transparent 0 7px, rgba(255, 255, 255, .12) 7px 8px), repeating-linear-gradient(90deg, transparent 0 7px, rgba(255, 255, 255, .12) 7px 8px); }
.np-stripes::before { background: repeating-linear-gradient(-45deg, rgba(255, 209, 102, .35) 0 8px, transparent 8px 16px); -webkit-mask: linear-gradient(90deg, transparent, #000); mask: linear-gradient(90deg, transparent, #000); }
.np-galaxy::before { background: radial-gradient(circle at 80% 40%, rgba(179, 136, 255, .9), transparent 40%), radial-gradient(circle at 95% 80%, rgba(124, 196, 255, .8), transparent 35%), radial-gradient(1px 1px at 60% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 70%, #fff, transparent), radial-gradient(1px 1px at 88% 20%, #fff, transparent); }
.np-slate::before { background: linear-gradient(90deg, transparent 15%, #3a4150, #59627a); }
.np-rose::before { background: linear-gradient(90deg, transparent 15%, #f472b6, #fb7185); }
.np-sky::before { background: linear-gradient(90deg, transparent 15%, #7dd3fc, #a5b4fc); }
.np-sand::before { background: linear-gradient(90deg, transparent 15%, #d6b98c, #f1d9a7); }
.np-img::before { background: var(--np-img) center / cover no-repeat; opacity: .6; }

/* ---------- profile frames ---------- */
.fr-gold { padding: 4px; background: linear-gradient(135deg, #ffe27a, #b8860b, #ffe27a, #8a6408); }
.fr-lime { padding: 4px; background: #c6f432; box-shadow: 0 0 24px rgba(198, 244, 50, .45); }
.fr-rainbow { padding: 4px; background: linear-gradient(90deg, #ff5f5f, #ffd166, #c6f432, #7cc4ff, #b388ff, #ff5f5f); background-size: 300% 100%; animation: slide 4s linear infinite; }
.fr-ice { padding: 4px; background: linear-gradient(135deg, #e0f7ff, #7cc4ff, #ffffff, #4aa3df); }
.fr-ember { padding: 4px; background: linear-gradient(0deg, #f12711, #f5af19); box-shadow: 0 0 24px rgba(241, 39, 17, .4); }
.fr-dashed { padding: 4px; background: repeating-linear-gradient(45deg, #fff 0 6px, #0b0d10 6px 12px); }
.fr-silver { padding: 4px; background: linear-gradient(135deg, #f5f5f5, #9ca3af, #f5f5f5, #6b7280); }
.fr-mint { padding: 4px; background: #6ee7b7; }

/* ---------- profile effects ---------- */
.fxl { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 5; border-radius: inherit; }
.fxl i { position: absolute; top: -10%; font-style: normal; animation: fall linear infinite; opacity: .9; }
@keyframes fall { to { transform: translateY(560px) rotate(360deg); } }
.fxl.rise i { top: auto; bottom: -10%; animation-name: rise; }
@keyframes rise { to { transform: translateY(-560px); opacity: 0; } }
.fxl.aura { background: radial-gradient(circle at 30% 20%, rgba(198, 244, 50, .35), transparent 45%), radial-gradient(circle at 80% 70%, rgba(124, 196, 255, .3), transparent 45%); animation: aura 4s ease-in-out infinite alternate; mix-blend-mode: screen; }
@keyframes aura { to { filter: hue-rotate(80deg); transform: scale(1.06); } }
.fxl.matrix i { color: #c6f432; font-family: var(--mono); font-size: 12px; opacity: .55; }
.fx-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }

/* ---------- typing indicator styles ---------- */
.tdots { display: inline-flex; gap: 4px; align-items: center; height: 12px; }
.tdots i { width: 4px; height: 4px; border-radius: 50%; background: var(--text); animation: tdot 1.2s infinite ease-in-out; }
.tdots i:nth-child(2) { animation-delay: .15s; }
.tdots i:nth-child(3) { animation-delay: .3s; }
@keyframes tdot { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }
.tdots.bounce i { animation-name: tbounce; background: #c6f432; }
@keyframes tbounce { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-4px); } }
.tdots.wave i { border-radius: 2px; width: 3px; height: 10px; animation-name: twave; background: #7cc4ff; }
@keyframes twave { 0%, 100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
.tdots.pulse i { animation-name: tpulse; background: #ff7ab6; }
@keyframes tpulse { 0%, 100% { transform: scale(.5); opacity: .4; } 50% { transform: scale(1.2); opacity: 1; } }
.tdots.keys i { border-radius: 2px; width: 6px; height: 6px; animation-name: tkeys; background: #ffd166; }
@keyframes tkeys { 0%, 100% { transform: translateY(0); } 25% { transform: translateY(2px); opacity: .5; } }

/* ---------- more name fonts (web fonts loaded in index.html) ---------- */
.font-grotesk { font-family: "Bricolage Grotesque", var(--font); font-weight: 700; letter-spacing: -.01em; }
.font-pixel { font-family: "Silkscreen", var(--mono); font-weight: 400; font-size: .92em; }
.font-script { font-family: "Pacifico", cursive; font-weight: 400; }
.font-marker { font-family: "Permanent Marker", cursive; font-weight: 400; }
.font-retro { font-family: "Bungee", Impact, sans-serif; font-weight: 400; font-size: .9em; }
.font-tech { font-family: "Orbitron", var(--font); font-weight: 600; letter-spacing: .04em; font-size: .92em; }
.font-hand { font-family: "Caveat", cursive; font-weight: 600; font-size: 1.15em; }
.font-editorial { font-family: "Playfair Display", Georgia, serif; font-weight: 600; font-style: italic; }

/* ---------- more name effects ---------- */
.fx-gradient3 { background: linear-gradient(90deg, var(--c1), var(--c2), var(--c3)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fx-flow { background: linear-gradient(90deg, var(--c1), var(--c2), var(--c3), var(--c1)); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: slide 3.5s linear infinite; }
.fx-chrome { background: linear-gradient(180deg, #ffffff 0%, var(--c1) 45%, color-mix(in srgb, var(--c1) 40%, #000) 52%, #ffffff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fx-glow { color: #fff; text-shadow: 0 0 2px var(--c1), 0 0 10px color-mix(in srgb, var(--c1) 70%, transparent), 0 0 22px color-mix(in srgb, var(--c2) 50%, transparent); }
.fx-outline { color: transparent; -webkit-text-stroke: 1px var(--c1); }

/* ---------- drop 2: decorations ---------- */
@keyframes bobx { 0%, 100% { transform: translateX(-50%); } 50% { transform: translateX(-50%) translateY(-3px); } }
@keyframes floaty { 50% { transform: translateY(-3px) rotate(-6deg); } }
.deco-horns .deco, .deco-bunny .deco { inset: 0; }
.deco-horns .deco::before, .deco-horns .deco::after { content: ""; position: absolute; top: calc(var(--s) * -.1); width: 0; height: 0; border-left: calc(var(--s) * .1) solid transparent; border-right: calc(var(--s) * .1) solid transparent; border-bottom: calc(var(--s) * .3) solid #e0243f; filter: drop-shadow(0 0 1px #000); }
.deco-horns .deco::before { left: 12%; transform: rotate(-20deg); }
.deco-horns .deco::after { right: 12%; transform: rotate(20deg); }
.deco-bunny .deco::before, .deco-bunny .deco::after { content: ""; position: absolute; top: calc(var(--s) * -.42); width: calc(var(--s) * .2); height: calc(var(--s) * .5); border-radius: 50%; background: radial-gradient(ellipse at center, #ffb3cf 0 35%, #fff 38%); box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); }
.deco-bunny .deco::before { left: 18%; transform: rotate(-12deg); }
.deco-bunny .deco::after { right: 18%; transform: rotate(12deg); }
.deco-ufo .deco, .deco-storm .deco { animation: bobx 2.2s ease-in-out infinite; }
.deco-ghost .deco { animation: floaty 2.4s ease-in-out infinite; }
.deco-diamond .deco { animation: twinkle 2s ease-in-out infinite; }
.deco-rocket .deco, .deco-bee .deco { inset: calc(var(--s) * -.16); display: flex; justify-content: center; align-items: flex-start; font-size: calc(var(--s) * .3); line-height: 1; animation: spin 4s linear infinite; }
.deco-bee .deco { animation-duration: 2.6s; animation-direction: reverse; }
.deco-radar .deco { inset: -4px; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 70%, rgba(198, 244, 50, .9)); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px)); animation: spin 1.8s linear infinite; }
.deco-pulse .deco { inset: -3px; border-radius: 50%; border: 2px solid #ff5c8a; animation: beat 1.2s ease-out infinite; }
@keyframes beat { 0% { transform: scale(1); opacity: 1; } 70%, 100% { transform: scale(1.22); opacity: 0; } }
.deco-prism .deco { inset: -4px; border-radius: 50%; background: conic-gradient(#ff5f5f, #ffd166, #c6f432, #7cc4ff, #b388ff, #ff5f5f); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); animation: hue 3s linear infinite; }
@keyframes hue { to { filter: hue-rotate(360deg); } }

/* ---------- drop 2: profile effects ---------- */
.fxk-fireflies i { text-shadow: 0 0 6px #ffe27a, 0 0 12px rgba(255, 226, 122, .6); animation-duration: 7s !important; }
.fxk-rain i { animation-duration: 1.1s !important; font-size: 12px !important; opacity: .6; }
.fxk-dust i { animation-duration: 9s !important; opacity: .5; }
.fxk-sparks i { text-shadow: 0 0 6px rgba(255, 209, 102, .8); }
.fxl.lightning { animation: flash 5s infinite; background: linear-gradient(180deg, rgba(200, 220, 255, .55), transparent 70%); opacity: 0; mix-blend-mode: screen; }
@keyframes flash { 0%, 88%, 92%, 100% { opacity: 0; } 89%, 91% { opacity: 1; } 90% { opacity: .2; } }

/* ---------- drop 2: nameplates ---------- */
.np-aurora::before { background: linear-gradient(90deg, transparent 10%, #00c9a7, #845ec2, #4ffbdf); }
.np-holo::before { background: linear-gradient(90deg, transparent, #ff9ec0, #7cc4ff, #c6f432, #ff9ec0); background-size: 300% 100%; animation: slide 6s linear infinite; }
.np-lava::before { background: linear-gradient(90deg, transparent 10%, #870000, #ff512f, #f5af19, #ff512f); background-size: 200% 100%; animation: slide 5s linear infinite; }
.np-vapor::before { background: linear-gradient(90deg, transparent 10%, #ff71ce, #01cdfe); }
.np-carbon::before { background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .07) 0 3px, transparent 3px 6px), linear-gradient(90deg, transparent, #2a2d33); }
.np-goldbar::before { background: linear-gradient(90deg, transparent 10%, #8a6408, #ffe27a, #b8860b); }
.np-code::before { background: repeating-linear-gradient(90deg, transparent 0 10px, rgba(198, 244, 50, .35) 10px 11px), linear-gradient(90deg, transparent, rgba(57, 255, 106, .35)); }
.np-night::before { background: radial-gradient(1px 1px at 55% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 75%, #fff, transparent), radial-gradient(1.5px 1.5px at 85% 40%, #fff, transparent), radial-gradient(1px 1px at 93% 70%, #fff, transparent), linear-gradient(90deg, transparent 10%, #141e30, #243b55); }
.np-candy::before { background: repeating-linear-gradient(-45deg, rgba(255, 158, 192, .55) 0 8px, rgba(255, 255, 255, .35) 8px 16px); -webkit-mask: linear-gradient(90deg, transparent, #000); mask: linear-gradient(90deg, transparent, #000); }
.np-sakura::before { background: radial-gradient(circle at 75% 35%, rgba(255, 183, 213, .9) 0 3px, transparent 4px), radial-gradient(circle at 88% 70%, rgba(255, 183, 213, .8) 0 2px, transparent 3px), linear-gradient(90deg, transparent 15%, #f8b4d9, #fbc2eb); }
.np-forest::before { background: linear-gradient(90deg, transparent 15%, #134e5e, #71b280); }
.np-peach::before { background: linear-gradient(90deg, transparent 15%, #ffb199, #ffd3a5); }
.np-storm::before { background: linear-gradient(90deg, transparent 15%, #373b44, #4286f4); }

/* ---------- drop 2: profile frames ---------- */
.fr-holo { padding: 4px; background: linear-gradient(135deg, #ff9ec0, #7cc4ff, #c6f432, #ffd166, #b388ff, #ff9ec0); background-size: 300% 300%; animation: slide 5s linear infinite; }
.fr-neon { padding: 4px; background: #ff3d9a; box-shadow: 0 0 18px rgba(255, 61, 154, .6), 0 0 40px rgba(255, 61, 154, .25); }
.fr-galaxy { padding: 4px; background: radial-gradient(1px 1px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 80%, #fff, transparent), linear-gradient(135deg, #3a1c71, #7f00ff, #d76d77, #3a1c71); }
.fr-lava { padding: 4px; background: linear-gradient(135deg, #870000, #ff512f, #f5af19, #ff512f, #870000); background-size: 300% 300%; animation: slide 4s linear infinite; box-shadow: 0 0 20px rgba(255, 81, 47, .35); }
.fr-candy { padding: 4px; background: repeating-linear-gradient(45deg, #ff9ec0 0 6px, #fff 6px 12px); }
.fr-aurora { padding: 4px; background: linear-gradient(135deg, #00c9a7, #845ec2, #4ffbdf, #00c9a7); }
.fr-onyx { padding: 4px; background: linear-gradient(135deg, #3b3f46, #0b0d10, #3b3f46); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.fr-pastel { padding: 4px; background: linear-gradient(135deg, #fbc2eb, #a1c4fd, #c2e9fb, #d4fc79); }
.fr-rose { padding: 4px; background: #f472b6; }
.fr-sky { padding: 4px; background: #7dd3fc; }

/* ---------- drop 2: name fonts ---------- */
.font-neonsign { font-family: "Monoton", cursive; font-weight: 400; font-size: 1.05em; letter-spacing: .02em; }
.font-spooky { font-family: "Creepster", cursive; font-weight: 400; font-size: 1.1em; letter-spacing: .03em; }
.font-lobster { font-family: "Lobster", cursive; font-weight: 400; font-size: 1.05em; }
.font-righteous { font-family: "Righteous", var(--font); font-weight: 400; }
.font-poster { font-family: "Bebas Neue", Impact, sans-serif; font-weight: 400; font-size: 1.15em; letter-spacing: .04em; }
.font-rounded { font-family: "Fredoka", var(--font); font-weight: 600; }
.font-arcade { font-family: "Press Start 2P", var(--mono); font-weight: 400; font-size: .7em; }
.font-glitchy { font-family: "Rubik Glitch", var(--font); font-weight: 400; }

/* ---------- drop 2: name effects ---------- */
.fx-fire { background: linear-gradient(90deg, #f12711, #f5af19, #ffe27a, #f12711); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: slide 2.4s linear infinite; }
.fx-ice { background: linear-gradient(90deg, #4facfe, #e0f7ff, #8fd3fe, #4facfe); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: slide 4s linear infinite; }
.fx-holo { background: linear-gradient(90deg, var(--c1), var(--c2), #fff, var(--c3), var(--c1)); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: slide 4s linear infinite; }
.fx-gold { background: linear-gradient(180deg, #fff3b0 0%, #ffd34d 40%, #b8860b 55%, #ffe27a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fx-retro { color: var(--c1); text-shadow: 2px 2px 0 var(--c2), 4px 4px 0 var(--c3); }
.fx-breathe { color: var(--c1); animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 50% { text-shadow: 0 0 6px var(--c1), 0 0 16px color-mix(in srgb, var(--c1) 70%, transparent); } }
.fx-glitch { color: var(--c1); text-shadow: 1.5px 0 #ff2f6e, -1.5px 0 #00e5ff; animation: nglitch 2.2s infinite steps(1); }
@keyframes nglitch { 0%, 90%, 100% { text-shadow: 1.5px 0 #ff2f6e, -1.5px 0 #00e5ff; } 92% { text-shadow: -3px 0 #ff2f6e, 3px 0 #00e5ff; } 95% { text-shadow: 3px 1px #ff2f6e, -2px -1px #00e5ff; } }

/* ---------- drop 2: typing indicators ---------- */
.tdots.rainbow i:nth-child(1) { background: #ff5f5f; }
.tdots.rainbow i:nth-child(2) { background: #c6f432; }
.tdots.rainbow i:nth-child(3) { background: #7cc4ff; }
.tdots.rainbow i { animation-name: tbounce; }
.tdots.hearts i, .tdots.stars i { width: auto; height: auto; background: none; font-style: normal; font-size: 10px; line-height: 1; animation-name: tpulse; }
.tdots.hearts i::before { content: "♥"; color: #ff5c8a; }
.tdots.stars i::before { content: "✦"; color: #ffd166; }
.tdots.blink i { animation-name: tblink; animation-delay: 0s !important; background: #c6f432; }
@keyframes tblink { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }

/* ---------- icon decorations (images in /drip) ---------- */
.av .deco-pic { width: calc(var(--s) * .5); height: calc(var(--s) * .5); object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .45)); }
.deco-g-top .deco-pic { width: calc(var(--s) * .56); height: calc(var(--s) * .56); top: calc(var(--s) * -.36); }
.fxl i img { display: block; }

/* ---------- more free nameplates and frames ---------- */
.np-dusk::before { background: linear-gradient(90deg, transparent 15%, #41295a, #2f0743); }
.np-lilac::before { background: linear-gradient(90deg, transparent 15%, #c3aed6, #e0c3fc); }
.np-mono::before { background: linear-gradient(90deg, transparent 15%, rgba(255, 255, 255, .08), rgba(255, 255, 255, .22)); }
.np-lemon::before { background: linear-gradient(90deg, transparent 15%, #fdfc47, #f9d423); }
.fr-lilac { padding: 4px; background: #c4b5fd; }
.fr-sun { padding: 4px; background: linear-gradient(135deg, #ffd166, #ff9f43); }
.fr-ocean { padding: 4px; background: linear-gradient(135deg, #1fa2ff, #12d8fa); }
.fr-duo { padding: 4px; background: linear-gradient(135deg, #c6f432 50%, #7cc4ff 50%); }

/* weekly leaderboard prize frames */
.fr-champ1 { padding: 4px; background: linear-gradient(135deg, #fff3b0, #ffd34d, #b8860b, #ffe27a, #fff3b0); background-size: 300% 300%; animation: slide 4s linear infinite; box-shadow: 0 0 22px rgba(255, 211, 77, .45); }
.fr-champ2 { padding: 4px; background: linear-gradient(135deg, #ffffff, #cfd6e0, #8e9aab, #e8edf3); background-size: 300% 300%; animation: slide 5s linear infinite; box-shadow: 0 0 16px rgba(207, 214, 224, .35); }
.fr-champ3 { padding: 4px; background: linear-gradient(135deg, #f3c39b, #cd7f32, #8a5222, #e0a370); background-size: 300% 300%; animation: slide 6s linear infinite; }