/* drifted fx: estilos de los efectos (ver fx.js). Usan --ac (acento) y --tx (texto) si existen. */

.fx-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.fx-t{display:inline-block;position:relative}

/* ---- nombre ---- */
.nm-glow{text-shadow:0 0 6px var(--ac,#fff),0 0 18px var(--ac,#fff),0 0 38px var(--ac,#fff);animation:fx-glow 2.2s ease-in-out infinite alternate}
@keyframes fx-glow{from{text-shadow:0 0 4px var(--ac,#fff),0 0 12px var(--ac,#fff),0 0 24px var(--ac,#fff)}to{text-shadow:0 0 9px var(--ac,#fff),0 0 26px var(--ac,#fff),0 0 56px var(--ac,#fff)}}

.nm-rainbow{background:linear-gradient(90deg,#ff3b6b,#ffb02e,#4dff88,#3ec6ff,#a66bff,#ff3b6b) 0 0/300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:fx-rbw 4s linear infinite}
@keyframes fx-rbw{to{background-position:-300% 0}}

.nm-shimmer{background:linear-gradient(100deg,var(--tx,#fff) 35%,var(--ac,#fff) 50%,var(--tx,#fff) 65%) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:fx-shim 2.6s linear infinite}
@keyframes fx-shim{to{background-position:-250% 0}}

.nm-gradient{background:linear-gradient(90deg,var(--ac,#fff),var(--tx,#fff));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

/* glitch tipo interferencia de TV: separacion RGB + cortes que saltan */
.nm-glitch{text-shadow:2px 0 rgba(255,45,85,.55),-2px 0 rgba(0,229,255,.55);animation:fx-jit 3.4s steps(1) infinite}
.nm-glitch::before,.nm-glitch::after{content:attr(data-text);position:absolute;left:0;top:0;white-space:nowrap;pointer-events:none;mix-blend-mode:screen}
.nm-glitch::before{color:#ff2d55;text-shadow:none;clip-path:inset(0 0 100% 0);animation:fx-g1 2.6s steps(1) infinite}
.nm-glitch::after{color:#00e5ff;text-shadow:none;clip-path:inset(100% 0 0 0);animation:fx-g2 3.1s steps(1) infinite}
@keyframes fx-jit{0%,100%{transform:none}86%{transform:translate(2px,0) skewX(-6deg)}88%{transform:translate(-2px,1px) skewX(5deg)}90%{transform:none}}
@keyframes fx-g1{0%,100%{clip-path:inset(0 0 100% 0);transform:none}
  6%{clip-path:inset(10% 0 58% 0);transform:translate(-4px,0)}8%{clip-path:inset(56% 0 20% 0);transform:translate(4px,-1px)}10%{clip-path:inset(0 0 100% 0);transform:none}
  52%{clip-path:inset(30% 0 40% 0);transform:translate(3px,0)}54%{clip-path:inset(0 0 100% 0);transform:none}
  86%{clip-path:inset(5% 0 70% 0);transform:translate(-5px,0)}88%{clip-path:inset(60% 0 12% 0);transform:translate(5px,0)}90%{clip-path:inset(0 0 100% 0);transform:none}}
@keyframes fx-g2{0%,100%{clip-path:inset(100% 0 0 0);transform:none}
  14%{clip-path:inset(62% 0 8% 0);transform:translate(4px,0)}16%{clip-path:inset(18% 0 55% 0);transform:translate(-4px,1px)}18%{clip-path:inset(100% 0 0 0);transform:none}
  60%{clip-path:inset(40% 0 30% 0);transform:translate(-3px,0)}62%{clip-path:inset(100% 0 0 0);transform:none}
  87%{clip-path:inset(48% 0 24% 0);transform:translate(5px,0)}89%{clip-path:inset(100% 0 0 0);transform:none}}

.fx-spark{position:absolute;pointer-events:none;font-style:normal;line-height:1;color:#fff;text-shadow:0 0 6px var(--ac,#fff),0 0 12px var(--ac,#fff);animation:fx-spark .95s ease-out forwards}
@keyframes fx-spark{0%{transform:scale(0) rotate(0);opacity:0}30%{opacity:1}100%{transform:scale(1.25) rotate(90deg);opacity:0}}

/* neon de cartel: blanco con halo del acento y parpadeos de tubo */
.nm-neon{color:#fff;-webkit-text-fill-color:#fff;text-shadow:0 0 3px #fff,0 0 9px var(--ac,#fff),0 0 20px var(--ac,#fff),0 0 42px var(--ac,#fff);animation:fx-neon 4.2s linear infinite}
@keyframes fx-neon{0%,17%,22%,25%,53%,57%,100%{opacity:1}19%,24%,55%{opacity:.5}}
/* letras que suben y bajan en onda */
.nm-wave{white-space:pre}
.nm-wave .fx-ch{display:inline-block;animation:fx-wave 1.7s ease-in-out infinite}
@keyframes fx-wave{0%,55%,100%{transform:translateY(0)}27%{transform:translateY(-.22em)}}
/* metal cromado */
.nm-chrome{background:linear-gradient(180deg,#fff 0%,#cfd6ff 34%,#6b78b8 50%,#f0f2ff 54%,#9aa6e0 80%,#fff 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;filter:drop-shadow(0 2px 0 rgba(0,0,0,.35))}
/* solo el contorno */
.nm-outline{color:transparent;-webkit-text-fill-color:transparent;-webkit-text-stroke:1.6px var(--ac,#fff);text-shadow:0 0 22px color-mix(in srgb,var(--ac,#fff) 45%,transparent)}

/* tipo "fuzzy": el texto vibra apenas y se ve levemente borroso */
.nm-fuzzy{text-shadow:0 0 3px currentColor,1.5px 0 3px color-mix(in srgb,var(--ac,#fff) 70%,transparent),-1.5px 0 3px rgba(255,255,255,.45);animation:fx-fuzzy .42s steps(2) infinite}
@keyframes fx-fuzzy{0%{transform:translate(.5px,0);filter:blur(.5px)}50%{transform:translate(-.5px,.4px);filter:blur(.9px)}100%{transform:translate(.3px,-.4px);filter:blur(.6px)}}

/* calle: aerosol con bordes irregulares, sticker de papel con borde blanco y oro con brillo que pasa */
.nm-spray{filter:url(#fx-rough);text-shadow:0 0 .05em currentColor,0 0 .3em color-mix(in srgb,currentColor 60%,transparent)}
.nm-sticker{-webkit-text-stroke:.17em var(--stk,#fff);paint-order:stroke fill;text-shadow:.04em .09em 0 rgba(0,0,0,.5),.07em .14em .14em rgba(0,0,0,.35)}
.nm-gold{background:linear-gradient(100deg,transparent 42%,rgba(255,255,255,.95) 50%,transparent 58%) 130% 0/260% 100% no-repeat,linear-gradient(180deg,#fff7c9 0%,#ffd84a 28%,#c98a00 50%,#ffe58a 58%,#b57500 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;filter:drop-shadow(0 .05em 0 rgba(60,30,0,.55));animation:fx-gold 3.6s ease-in-out infinite}
@keyframes fx-gold{0%,40%{background-position:130% 0,0 0}100%{background-position:-30% 0,0 0}}

/* ---- avatar ---- */
.av-ring{position:relative}
.av-ring::before{content:"";position:absolute;inset:-7px;border-radius:50%;background:conic-gradient(var(--ac,#fff),transparent 30%,var(--ac,#fff) 60%,transparent 90%,var(--ac,#fff));-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:fx-spin 3s linear infinite;pointer-events:none}
@keyframes fx-spin{to{transform:rotate(360deg)}}
.av-pulse{animation:fx-pulse 2s ease-out infinite}
@keyframes fx-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ac,#fff) 65%,transparent)}100%{box-shadow:0 0 0 24px transparent}}
.av-float{animation:fx-float 3.2s ease-in-out infinite}
@keyframes fx-float{50%{transform:translateY(-8px)}}
.av-halo{animation:fx-halo 2.6s ease-in-out infinite}
@keyframes fx-halo{0%,100%{box-shadow:0 0 14px color-mix(in srgb,var(--ac,#fff) 55%,transparent),0 0 34px color-mix(in srgb,var(--ac,#fff) 25%,transparent)}50%{box-shadow:0 0 26px color-mix(in srgb,var(--ac,#fff) 90%,transparent),0 0 72px color-mix(in srgb,var(--ac,#fff) 48%,transparent)}}
.av-spin>img{animation:fx-spin 9s linear infinite}
.av-bounce{animation:fx-bounce 1.5s cubic-bezier(.3,0,.4,1) infinite}
@keyframes fx-bounce{0%,100%{transform:translateY(0)}45%{transform:translateY(-13px) scale(1.04)}}
.av-chain{position:relative}
.av-chain::before{content:"";position:absolute;inset:-9px;border-radius:50%;background:repeating-conic-gradient(from 0deg,#ffe27a 0 9deg,#a8710a 9deg 14deg,#fff2b0 14deg 19deg,#7a4e00 19deg 24deg);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 9px),#000 calc(100% - 8px));mask:radial-gradient(farthest-side,transparent calc(100% - 9px),#000 calc(100% - 8px));filter:drop-shadow(0 2px 3px rgba(0,0,0,.5));animation:fx-spin 28s linear infinite;pointer-events:none}
.av-sticker{box-shadow:0 0 0 5px #fff,5px 7px 0 5px rgba(0,0,0,.42);transform:rotate(-3deg)}
.av-neon{animation:fx-aneon 3.8s linear infinite}
@keyframes fx-aneon{0%,100%{box-shadow:0 0 0 2px #fff,0 0 10px 2px var(--ac,#fff),0 0 28px 6px var(--ac,#fff)}20%,24%,60%{box-shadow:0 0 0 2px rgba(255,255,255,.4),0 0 4px 1px var(--ac,#fff)}22%,62%{box-shadow:0 0 0 2px #fff,0 0 10px 2px var(--ac,#fff),0 0 28px 6px var(--ac,#fff)}}

/* ---- filtros por encima de todo (capa .fx-ov) ---- */
.fx-ov{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.ov-vignette{background:radial-gradient(ellipse at center,transparent 38%,rgba(0,0,0,.78) 100%)}
.ov-scanlines{background:repeating-linear-gradient(0deg,rgba(0,0,0,.32) 0 1px,transparent 1px 3px)}
.ov-grain::before{content:"";position:absolute;inset:-25%;opacity:.16;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .8 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");animation:ov-grain .9s steps(6) infinite}
@keyframes ov-grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-6%,-2%)}80%{transform:translate(5%,4%)}100%{transform:translate(0,0)}}
.ov-vhs{background:repeating-linear-gradient(0deg,rgba(0,0,0,.26) 0 1px,transparent 1px 3px);box-shadow:inset 0 0 160px rgba(0,0,0,.45)}
.ov-vhs::before{content:"";position:absolute;left:0;right:0;top:-25%;height:24%;background:linear-gradient(transparent,rgba(255,255,255,.09),transparent);animation:ov-track 7s linear infinite}
.ov-vhs::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,0,60,.05),transparent 18%,transparent 82%,rgba(0,200,255,.06));mix-blend-mode:screen;animation:ov-flick 3s steps(1) infinite}
@keyframes ov-track{to{top:110%}}
@keyframes ov-flick{0%,100%{opacity:1}92%{opacity:.7}94%{opacity:1}97%{opacity:.82}}
.ov-crt{background:radial-gradient(ellipse at center,transparent 48%,rgba(0,0,0,.6) 100%),repeating-linear-gradient(0deg,rgba(0,0,0,.24) 0 2px,transparent 2px 4px);animation:ov-flick 5s steps(1) infinite}
/* calle: reja de alambre, pelicula vieja, luces de patrulla (lentas: menos de 3 destellos por segundo) y puntos de impresion */
.ov-chainlink{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='46' height='46' viewBox='0 0 46 46'><path d='M0 23 23 0 46 23 23 46Z' fill='none' stroke='%23d5dae3' stroke-width='2.4' stroke-linejoin='round'/><path d='M0 23 23 0 46 23 23 46Z' fill='none' stroke='%23000' stroke-opacity='.35' stroke-width='1' transform='translate(1.2 1.6)'/></svg>");background-size:46px 46px;opacity:.42}
.ov-chainlink::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.16),transparent 38%,rgba(0,0,0,.4))}
.ov-film{background:radial-gradient(ellipse at center,transparent 52%,rgba(0,0,0,.55) 100%)}
.ov-film::before{content:"";position:absolute;inset:-25%;opacity:.2;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");animation:ov-grain .6s steps(5) infinite}
.ov-film::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 18%,rgba(255,255,255,.22) 18.1%,transparent 18.35%,transparent 63%,rgba(255,255,255,.16) 63.1%,transparent 63.25%,transparent 86%,rgba(255,255,255,.2) 86.05%,transparent 86.2%);animation:ov-scratch 1.9s steps(1) infinite}
@keyframes ov-scratch{0%{opacity:.9;transform:translateX(0)}30%{opacity:0}34%{opacity:.8;transform:translateX(-31vw)}60%{opacity:0}66%{opacity:.7;transform:translateX(17vw)}100%{opacity:.9;transform:translateX(0)}}
.ov-sirens::before,.ov-sirens::after{content:"";position:absolute;top:-25%;width:75%;height:150%;filter:blur(36px);opacity:0}
.ov-sirens::before{left:-30%;background:radial-gradient(closest-side,rgba(255,28,60,.6),transparent)}
.ov-sirens::after{right:-30%;background:radial-gradient(closest-side,rgba(40,92,255,.6),transparent)}
.ov-sirens::before{animation:ov-siren 2.4s steps(1) infinite}
.ov-sirens::after{animation:ov-siren 2.4s steps(1) infinite 1.2s}
@keyframes ov-siren{0%,4%{opacity:.95}7%,13%{opacity:0}16%,21%{opacity:.95}24%,100%{opacity:0}}
.ov-halftone{background-image:radial-gradient(circle at center,rgba(0,0,0,.5) 0 1.2px,transparent 1.8px);background-size:6px 6px;mix-blend-mode:multiply;opacity:.7}

/* ---- borde de la tarjeta con degradado que gira ---- */
@property --fx-a{syntax:'<angle>';inherits:false;initial-value:0deg}
.fx-gborder{position:relative}
.fx-gborder::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;background:conic-gradient(from var(--fx-a),var(--ac,#fff),transparent 25%,var(--ac,#fff) 50%,transparent 75%,var(--ac,#fff));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;animation:fx-border 4s linear infinite;pointer-events:none}
@keyframes fx-border{to{--fx-a:360deg}}

/* ---- cursor propio: oculta el del sistema ---- */
.fx-nocursor,.fx-nocursor *{cursor:none!important}

/* ---- insignias (ver badges.js) ---- */
.bdg{--glow:rgba(156,152,203,.45);position:relative;display:inline-flex;flex:none;width:var(--bs,36px);height:var(--bs,36px);vertical-align:middle;outline:0;transition:transform .28s cubic-bezier(.2,.9,.25,1.3)}
.bdg svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 3px 7px var(--glow))}
.bdg.t-rare{--glow:rgba(70,140,255,.5)}.bdg.t-epic{--glow:rgba(160,100,255,.55)}.bdg.t-legendary{--glow:rgba(255,185,50,.6)}.bdg.t-special{--glow:rgba(255,70,115,.55)}
.bdg:hover,.bdg:focus-visible{transform:translateY(-4px) scale(1.14) rotate(-4deg);z-index:5}
.bdg::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 9px);left:50%;transform:translate(-50%,5px);white-space:nowrap;padding:5px 10px;border-radius:9px;background:rgba(8,10,28,.97);border:1px solid rgba(255,255,255,.16);color:#fff;font:700 .72rem/1.2 system-ui,sans-serif;letter-spacing:.01em;opacity:0;pointer-events:none;transition:opacity .16s,transform .16s}
.bdg:hover::after,.bdg:focus-visible::after{opacity:1;transform:translate(-50%,0)}
.bdg .sh{transform:translateX(0)}
.bdg:hover .sh,.bdg:focus-visible .sh{animation:bd-shine .8s ease}
.bdg.t-legendary .sh{animation:bd-idle 5s ease-in-out infinite}
.bdg.t-special .sh{animation:bd-idle 7s ease-in-out 1.5s infinite}
@keyframes bd-shine{from{transform:translateX(0)}to{transform:translateX(90px)}}
@keyframes bd-idle{0%,72%{transform:translateX(0)}100%{transform:translateX(90px)}}

@media(prefers-reduced-motion:reduce){.bdg .sh{animation:none!important}.nm-glow,.nm-rainbow,.nm-shimmer,.nm-glitch,.nm-glitch::before,.nm-glitch::after,.nm-neon,.nm-fuzzy,.nm-gold,.nm-wave .fx-ch,.av-ring::before,.av-chain::before,.av-pulse,.av-float,.av-halo,.av-bounce,.av-neon,.av-spin>img,.ov-grain::before,.ov-film::before,.ov-film::after,.ov-vhs::before,.ov-vhs::after,.ov-crt,.fx-gborder::before{animation:none}.nm-glitch::before,.nm-glitch::after{display:none}.ov-sirens::before,.ov-sirens::after{animation:none;opacity:.3}}