/* Picao Jump — Accesorios: colocación sobre el avatar y animaciones.
   Cargar DESPUÉS de tienda.css. */

/* Cualquier contenedor de avatar que lleve accesorios debe poder dibujar fuera de su círculo */
.pj-av { position:relative; }
.pj-accw { position:relative; overflow:visible !important; }
.pj-acc-capa { position:absolute; inset:0; pointer-events:none; z-index:6; }
.pj-acc { position:absolute; display:block; pointer-events:none; }
.pj-acc svg { display:block; width:100%; height:100%; overflow:visible; }

/* Cajas por zona (el avatar es cuadrado: los % de alto/ancho son equivalentes) */
.pj-acc.z-cabeza { left:3%;  width:94%;  top:-37%; height:65.8%; }
.pj-acc.z-cara   { left:10%; width:80%;  top:26%;  height:32%; }
.pj-acc.z-cuello { left:11%; width:78%;  top:78%;  height:39%; }
.pj-acc.z-aura   { left:-22%; width:144%; top:-22%; height:144%; }

/* ─────────── Animaciones ─────────── */
.pj-acc [class^="a-"], .pj-acc [class*=" a-"] { transform-box:fill-box; transform-origin:center; }
.pj-acc .o-top { transform-origin:50% 0% !important; }
.pj-acc .o-bot { transform-origin:50% 100% !important; }
.a-tw { animation:a-tw 1.9s ease-in-out infinite; animation-delay:var(--d,0s); }
@keyframes a-tw { 0%,100% { opacity:.15; transform:scale(.35) rotate(0); } 50% { opacity:1; transform:scale(1.15) rotate(45deg); } }
.a-bob { animation:a-bob 2.2s ease-in-out infinite; }
@keyframes a-bob { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-3px); } }
.a-sway { animation:a-sway 2.6s ease-in-out infinite; }
@keyframes a-sway { 0%,100% { transform:rotate(-3.5deg); } 50% { transform:rotate(3.5deg); } }
.a-swing { animation:a-swing 2.4s ease-in-out infinite; }
@keyframes a-swing { 0%,100% { transform:rotate(-7deg); } 50% { transform:rotate(7deg); } }
.a-wave { animation:a-wave 2.2s ease-in-out infinite; }
@keyframes a-wave { 0%,100% { transform:skewX(-4deg) scaleY(1); } 50% { transform:skewX(4deg) scaleY(1.05); } }
.a-twitch { transform-origin:50% 100% !important; animation:a-twitch 3.6s ease-in-out infinite; }
@keyframes a-twitch { 0%,78%,100% { transform:rotate(0); } 82% { transform:rotate(-12deg); } 88% { transform:rotate(5deg); } 94% { transform:rotate(-6deg); } }
.a-flame { transform-origin:50% 100% !important; animation:a-flame .55s ease-in-out infinite alternate; animation-delay:var(--d,0s); }
@keyframes a-flame { 0% { transform:scale(.88,.82) skewX(-4deg); } 100% { transform:scale(1.08,1.14) skewX(4deg); } }
.a-glow { animation:a-glow 2.2s ease-in-out infinite; }
@keyframes a-glow { 0%,100% { filter:drop-shadow(0 0 1.5px var(--g,#fff)); } 50% { filter:drop-shadow(0 0 5px var(--g,#fff)) brightness(1.12); } }
.a-pulse { animation:a-pulse 1.7s ease-in-out infinite; }
@keyframes a-pulse { 0%,100% { opacity:.75; transform:scale(1); } 50% { opacity:1; transform:scale(1.07); } }
.a-beat { animation:a-beat 1.2s ease-in-out infinite; }
@keyframes a-beat { 0%,40%,100% { transform:scale(1); } 15% { transform:scale(1.1); } 28% { transform:scale(.97); } }
.a-blink { transform-origin:50% 50% !important; animation:a-blink 4.2s infinite; }
@keyframes a-blink { 0%,90%,100% { transform:scaleY(1); } 94% { transform:scaleY(.08); } }
.a-look { animation:a-look 4s ease-in-out infinite; }
@keyframes a-look { 0%,100% { transform:translate(0,0); } 20% { transform:translate(-4px,2px); } 45% { transform:translate(4px,-2px); } 70% { transform:translate(3px,3px); } }
.a-drop { animation:a-drop 6s ease-in infinite; }
@keyframes a-drop { 0% { transform:translateY(-34px); opacity:0; } 7% { opacity:1; } 12%,100% { transform:translateY(0); opacity:1; } 14% { transform:translateY(-2px); } 16% { transform:translateY(0); } }
.a-scan { animation:a-scan 1.8s ease-in-out infinite alternate; }
@keyframes a-scan { from { transform:translateX(0); } to { transform:translateX(78px); } }
.a-neon { animation:a-neon 5s linear infinite; }
@keyframes a-neon { 0% { filter:hue-rotate(0deg) drop-shadow(0 0 3px #f0abfc); } 100% { filter:hue-rotate(360deg) drop-shadow(0 0 3px #f0abfc); } }
.a-hue { animation:a-hue 4s linear infinite; }
@keyframes a-hue { to { filter:hue-rotate(360deg); } }
.a-rise { animation:a-rise 2.6s ease-out infinite; animation-delay:var(--d,0s); }
@keyframes a-rise { 0% { opacity:0; transform:translateY(0); } 20% { opacity:1; } 100% { opacity:0; transform:translateY(-16px); } }
.a-rise2 { animation:a-rise2 3.4s ease-in-out infinite; animation-delay:var(--d,0s); }
@keyframes a-rise2 { 0% { opacity:0; transform:translateY(6px) scale(.6); } 25% { opacity:1; } 100% { opacity:0; transform:translateY(-14px) scale(1.15); } }
.a-fly { animation:a-fly 4.6s ease-in-out infinite; animation-delay:calc(var(--d,0s) * -1); }
@keyframes a-fly { 0%,100% { transform:translate(0,0); opacity:.3; } 25% { transform:translate(5px,-4px); opacity:1; } 50% { transform:translate(-3px,-7px); opacity:.5; } 75% { transform:translate(-5px,3px); opacity:1; } }
.a-flick { animation:a-flick 2.4s steps(1) infinite, a-glow 1.2s ease-in-out infinite; animation-delay:var(--d,0s); }
@keyframes a-flick { 0%,100% { opacity:0; } 4% { opacity:1; } 8% { opacity:.2; } 12% { opacity:1; } 30% { opacity:1; } 36% { opacity:0; } }
.a-orbit { transform-box:view-box !important; transform-origin:50% 50% !important; animation:a-giro var(--v,8s) linear infinite; }
.a-orbit.rev { animation-direction:reverse; }
@keyframes a-giro { to { transform:rotate(360deg); } }
.a-flapL { transform-origin:100% 60% !important; animation:a-flapL .9s ease-in-out infinite alternate; }
.a-flapR { transform-origin:0% 60% !important; animation:a-flapR .9s ease-in-out infinite alternate; }
@keyframes a-flapL { from { transform:rotate(8deg); } to { transform:rotate(-14deg); } }
@keyframes a-flapR { from { transform:rotate(-8deg); } to { transform:rotate(14deg); } }

/* En listas (ranking…) y para quien prefiere menos movimiento, los accesorios se quedan quietos */
.pj-acc-capa.quieto *, .pj-acc-capa.quieto { animation:none !important; }
.pj-acc-capa.quieto .a-tw { opacity:.9; transform:scale(.9); }
.pj-acc-capa.quieto .a-rise, .pj-acc-capa.quieto .a-rise2, .pj-acc-capa.quieto .a-flick { opacity:1; }
@media (prefers-reduced-motion:reduce) {
  .pj-acc *, .pj-acc { animation:none !important; }
  .pj-acc .a-tw, .pj-acc .a-rise, .pj-acc .a-rise2, .pj-acc .a-flick { opacity:.9; }
}

/* ─────────── Dentro de la tienda ─────────── */
.pj-av.acc-prev { width:38px; height:38px; border-radius:50%; flex:0 0 auto; }
.pj-av.acc-prev > img { width:100%; height:100%; object-fit:cover; border-radius:50%; border:2px solid rgba(255,255,255,.55); box-sizing:border-box; background:#fff; }
.tienda-prev.cat-cabeza, .tienda-prev.cat-cara, .tienda-prev.cat-cuello, .tienda-prev.cat-aura { overflow:hidden; }
.tienda-prev.cat-cabeza .pj-av.acc-prev { margin-top:10px; }
.tienda-prev.cat-cuello .pj-av.acc-prev { margin-top:-8px; }
.look-mini .pj-av.acc-prev { width:22px; height:22px; margin:0; }
.look-mini.cat-cabeza .pj-av.acc-prev { margin-top:6px; }
.look-mini.cat-cuello .pj-av.acc-prev { margin-top:-5px; }
.look-slots.acc { grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:8px; }
.look-slots.acc .look-slot { grid-template-columns:1fr; justify-items:center; text-align:center; padding:8px 4px; gap:5px; }
.look-slots.acc .look-slot b { font-size:10.5px; width:100%; }
.look-slots.acc .look-slot small { font-size:9px; }
.look-foto .pj-acc-capa { z-index:7; }
.look-foto { overflow:visible !important; }

/* Marco circular del perfil: se deja asomar el accesorio */
.profile-avatar-frame.pj-accw .pj-acc-capa { z-index:8; }
.podio-av.pj-accw, .podio-av .pj-acc-capa { overflow:visible; }
.pj-lobbyav .pj-acc-capa { z-index:8; }

/* "Tu look": deja espacio para que corona, alas y aura no tapen el nombre */
.look-top { padding-top:20px; padding-left:16px; }
.look-foto { margin:0 12px 4px 10px; }