/* ==========================================================================
   Cosmetics: name effects, avatar frames, animated profile backgrounds.
   Canvas-driven backgrounds are painted by assets/js/fx.js.
   ========================================================================== */

/* ---------- name effects (shown everywhere a username appears) ---------- */
.nfx { background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent !important; -webkit-text-fill-color: transparent; }
.nfx--gold { background-image: linear-gradient(100deg, #8a5a14 0%, #f7d774 22%, #b8862b 40%, #ffe9a8 58%, #9a6a1c 80%, #f7d774 100%); animation: nfx-pan 6s linear infinite; filter: drop-shadow(0 0 6px rgba(247, 200, 90, .25)); }
.nfx--blood { background-image: linear-gradient(180deg, #ff6b6b, #c1121f 55%, #5c0000); filter: drop-shadow(0 1px 0 #2a0000) drop-shadow(0 0 6px rgba(255, 30, 30, .35)); }
.nfx--neon { color: #fff !important; -webkit-text-fill-color: #fff; background: none; text-shadow: 0 0 2px #fff, 0 0 8px #ff2bd6, 0 0 16px #ff2bd6, 0 0 28px #b300ff; animation: nfx-flicker 4s infinite; }
.nfx--glitch { color: var(--text) !important; -webkit-text-fill-color: currentColor; background: none; text-shadow: 1.5px 0 rgba(0, 255, 255, .8), -1.5px 0 rgba(255, 0, 200, .8); animation: nfx-glitch 2.6s steps(1) infinite; display: inline-block; }
.nfx--prism { background-image: linear-gradient(90deg, #ff6b9e, #ffb86b, #f9f871, #6bffb8, #6bc8ff, #b36bff, #ff6b9e); animation: nfx-pan 3s linear infinite; }
.nfx--chrome { background-image: linear-gradient(180deg, #ffffff 0%, #b8c0cc 45%, #5b6573 50%, #dfe5ee 75%, #ffffff 100%); background-size: auto; position: relative; filter: drop-shadow(0 1px 0 rgba(0,0,0,.6)); }
.nfx--fire { background-image: linear-gradient(0deg, #ff3d00, #ff9100 40%, #ffea00 70%, #fff3a0); background-size: auto 200%; animation: nfx-rise 1.4s ease-in-out infinite alternate; filter: drop-shadow(0 0 6px rgba(255, 120, 0, .55)); }
.nfx--shimmer { background-image: linear-gradient(110deg, #c89b3c 0%, #f5d27a 35%, #ffffff 45%, #f5d27a 55%, #c89b3c 100%); background-size: 250% auto; animation: nfx-pan 3.2s linear infinite; filter: drop-shadow(0 0 8px rgba(255, 215, 120, .35)); }
@keyframes nfx-pan { to { background-position: 200% center; } }
@keyframes nfx-rise { to { background-position: center 100%; } }
@keyframes nfx-flicker { 0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; } 20%, 24%, 55% { opacity: .55; } }
@keyframes nfx-glitch { 0%, 100% { transform: none; } 92% { transform: translate(1px, -1px) skewX(8deg); } 94% { transform: translate(-2px, 1px); } 96% { transform: none; } }

/* ---------- avatar frames ---------- */
.avatar::before, .avatar::after { content: ""; position: absolute; pointer-events: none; }
.frame--ring::before { inset: -4px; border-radius: 50%; border: 2px solid var(--line-2); }
.frame--brass::before, .frame--steel::before, .frame--gold::before, .frame--diamond::before, .frame--family::before, .frame--blood::before, .frame--neon::before {
  inset: calc(var(--s) * -.07); border-radius: 50%; padding: calc(var(--s) * .055);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.frame--brass::before { background: conic-gradient(from 30deg, #6b4a1f, #d9a95b, #7a5424, #f2cf8a, #6b4a1f, #c9954a, #6b4a1f); }
.frame--steel::before { background: conic-gradient(#3b4048, #aeb6c2, #4a5059, #d7dde6, #3b4048, #8c95a1, #3b4048); }
.frame--steel::after { inset: calc(var(--s) * -.07); border-radius: 50%; background: radial-gradient(circle at 50% 3%, #e8edf3 1.5%, transparent 2.5%), radial-gradient(circle at 97% 50%, #e8edf3 1.5%, transparent 2.5%), radial-gradient(circle at 50% 97%, #e8edf3 1.5%, transparent 2.5%), radial-gradient(circle at 3% 50%, #e8edf3 1.5%, transparent 2.5%); }
.frame--family::before { background: linear-gradient(#7a0d12, #7a0d12) padding-box, conic-gradient(#caa24a, #7a0d12, #caa24a, #7a0d12, #caa24a); box-shadow: 0 0 0 2px #caa24a inset; }
.frame--neon::before { background: linear-gradient(135deg, #ff2bd6, #7a5cff, #00e5ff); animation: frame-pulse 2.2s ease-in-out infinite; }
.frame--neon { filter: drop-shadow(0 0 10px rgba(255, 43, 214, .45)); }
.frame--blood::before { background: conic-gradient(#5c0000, #e5484d, #8b0000, #ff6b6b, #5c0000); }
.frame--blood::after { left: 22%; bottom: calc(var(--s) * -.16); width: calc(var(--s) * .08); height: calc(var(--s) * .14); border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%; background: #b3121a; box-shadow: calc(var(--s) * .38) calc(var(--s) * -.03) 0 -1px #b3121a, calc(var(--s) * .5) calc(var(--s) * -.07) 0 -2px #8b0000; animation: frame-drip 3.5s ease-in infinite; }
.frame--gold::before { background: conic-gradient(from var(--a, 0deg), #8a5a14, #ffe39a, #b8862b, #fff4cf, #9a6a1c, #f7d774, #8a5a14); animation: frame-spin 4s linear infinite; }
.frame--gold { filter: drop-shadow(0 0 12px rgba(247, 200, 90, .35)); }
.frame--diamond::before { background: conic-gradient(from var(--a, 0deg), #b9f3ff, #ffffff, #c7a6ff, #ffffff, #9ee7ff, #ffe0f7, #b9f3ff); animation: frame-spin 3s linear infinite; }
.frame--diamond { filter: drop-shadow(0 0 14px rgba(190, 230, 255, .5)); }
.frame--diamond::after { top: calc(var(--s) * -.3); left: 50%; width: calc(var(--s) * .42); height: calc(var(--s) * .26); transform: translateX(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 24'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff6d1'/%3E%3Cstop offset='1' stop-color='%23d8a54a'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M2 22 L5 6 L13 14 L20 2 L27 14 L35 6 L38 22 Z' fill='url(%23g)' stroke='%237a5424' stroke-width='1.2'/%3E%3Ccircle cx='20' cy='15' r='2.4' fill='%23b9f3ff'/%3E%3C/svg%3E") center/contain no-repeat; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); }
@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes frame-spin { to { --a: 360deg; } }
@keyframes frame-pulse { 50% { opacity: .55; } }
@keyframes frame-drip { 0%, 60% { transform: translateY(0) scaleY(1); opacity: 1; } 100% { transform: translateY(6px) scaleY(1.3); opacity: 0; } }

/* ==========================================================================
   Profile backdrops: looping, seamless tiled GIFs (assets/img/bg/{key}.gif),
   ========================================================================== */
.pbg { position: absolute; inset: 0; overflow: hidden; z-index: 0; background-color: #07080c; background-repeat: repeat; background-position: 0 0; }
.pbg--x { background-repeat: repeat-x; background-size: auto 100%; background-position: 0 100%; }
.pbg__vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 40%, transparent 50%, rgba(0,0,0,.6)), linear-gradient(180deg, transparent 50%, rgba(0,0,0,.78)); }

@media (prefers-reduced-motion: reduce) {
  .nfx, .avatar::before, .avatar::after { animation: none !important; }
}

/* ---------- more name effects (earned) ---------- */
.nfx--siren { background-image: linear-gradient(90deg, #ff3b4a 0 50%, #3b7bff 50% 100%); background-size: 200% auto; animation: nfx-siren 1s steps(2) infinite; filter: drop-shadow(0 0 6px rgba(120, 120, 255, .45)); }
.nfx--cash { background-image: linear-gradient(100deg, #1e5e2a 0%, #6fdc7f 25%, #d6ffd9 40%, #3ea653 60%, #1e5e2a 80%, #6fdc7f 100%); animation: nfx-pan 5s linear infinite; filter: drop-shadow(0 0 5px rgba(80, 220, 110, .35)); }
.nfx--ink { color: #efe6d2 !important; -webkit-text-fill-color: #efe6d2; background: none; font-family: "Courier New", Courier, monospace !important; letter-spacing: .02em; text-shadow: .6px .6px 0 rgba(0, 0, 0, .7), 0 0 1px rgba(239, 230, 210, .6); }
.nfx--brass { background-image: linear-gradient(180deg, #fff1c4 0%, #e0b65a 35%, #8c5f1e 55%, #d9a84c 75%, #fff1c4 100%); background-size: auto 100%; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .6)) drop-shadow(0 0 5px rgba(224, 182, 90, .3)); }
.nfx--holo { background-image: linear-gradient(115deg, #c6c6c6 0%, #ff9de2 15%, #9de7ff 30%, #e8ff9d 45%, #c6c6c6 55%, #b59dff 70%, #9dffd0 85%, #c6c6c6 100%); background-size: 300% auto; animation: nfx-pan 4s linear infinite; filter: drop-shadow(0 0 6px rgba(200, 180, 255, .35)); }
@keyframes nfx-siren { to { background-position: 200% center; } }

/* ---------- more frames (earned) ---------- */
.frame--badge::before, .frame--chips::before, .frame--laurel::before, .frame--barbed::before, .frame--tracer::before, .frame--holo::before {
  inset: calc(var(--s) * -.07); border-radius: 50%; padding: calc(var(--s) * .055);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.frame--badge::before { background: conic-gradient(#1b2f5c, #5fa8ff, #1b2f5c, #c9d6ea, #1b2f5c, #5fa8ff, #1b2f5c); }
.frame--badge::after { top: calc(var(--s) * -.16); left: 50%; width: calc(var(--s) * .26); height: calc(var(--s) * .26); transform: translateX(-50%);
  background: radial-gradient(circle at 50% 45%, #1b2f5c 22%, transparent 23%), conic-gradient(from 0deg, #e8c76a, #fff1c4, #b8862b, #fff1c4, #e8c76a);
  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 3px rgba(0, 0, 0, .6)); }
.frame--chips::before { background: repeating-conic-gradient(from var(--a, 0deg), #c81e2a 0 15deg, #f4efe6 15deg 22deg, #1a1a1d 22deg 37deg, #f4efe6 37deg 45deg); animation: frame-spin 12s linear infinite; }
.frame--chips { filter: drop-shadow(0 0 8px rgba(200, 30, 42, .35)); }
.frame--laurel::before { background: conic-gradient(#6a4a12, #ffe39a, #b8862b, #fff4cf, #6a4a12, #e8c76a, #6a4a12); }
.frame--laurel::after { inset: calc(var(--s) * -.17); border-radius: 50%;
  background: repeating-conic-gradient(from 200deg, transparent 0 9deg, #d9b25a 9deg 13deg, transparent 13deg 18deg);
  -webkit-mask: radial-gradient(circle, transparent 62%, #000 63% 72%, transparent 73%), linear-gradient(90deg, #000 0 42%, transparent 42% 58%, #000 58%); -webkit-mask-composite: source-in; mask-composite: intersect; }
.frame--laurel { filter: drop-shadow(0 0 10px rgba(255, 215, 120, .3)); }
.frame--barbed::before { background: repeating-conic-gradient(#5d5f63 0 4deg, #c9ccd1 4deg 6deg, #3a3c40 6deg 12deg); }
.frame--barbed::after { inset: calc(var(--s) * -.12); border-radius: 50%; background: repeating-conic-gradient(transparent 0 26deg, #b9bcc2 26deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 64%, #000 65% 70%, transparent 71%); mask: radial-gradient(circle, transparent 64%, #000 65% 70%, transparent 71%); }
.frame--tracer::before { background: conic-gradient(from var(--a, 0deg), transparent 0 70%, rgba(255, 120, 20, .2) 78%, #ffb347 92%, #fff4c2 96%, transparent 96.5%), #1a120c; animation: frame-spin 1.6s linear infinite; }
.frame--tracer { filter: drop-shadow(0 0 8px rgba(255, 150, 50, .45)); }
.frame--holo::before { background: conic-gradient(from var(--a, 0deg), #c6c6c6, #ff9de2, #9de7ff, #e8ff9d, #c6c6c6, #b59dff, #9dffd0, #c6c6c6); animation: frame-spin 5s linear infinite; }
.frame--holo { filter: drop-shadow(0 0 10px rgba(200, 180, 255, .4)); }
@media (prefers-reduced-motion: reduce) { .frame--chips::before, .frame--tracer::before, .frame--holo::before { animation: none !important; } }

/* Linked banners: one clip stretched to fill, no tiling. */
.pbg--vid > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.pbg--link { background-size: cover; background-position: center; background-repeat: no-repeat; }