/* ============================================================
   Avatar vestido del niño: el mismo en todos los juegos (core/taller.php → avatar_vestido()).
   Capas: brillo (aura) detrás · cara · accesorio de cabeza encima · marco · chispitas de su etapa.
   Todo con código: brillos, marcos y estelas no necesitan arte nuevo.
   ============================================================ */
.avv{--s:64px;position:relative;display:inline-grid;place-items:center;width:var(--s);height:var(--s);flex:none;vertical-align:middle;isolation:isolate}
.avv-chico{--s:40px}.avv-medio{--s:64px}.avv-grande{--s:150px}.avv-enorme{--s:220px}
.avv-cara{position:relative;width:100%;height:100%;border-radius:50%;background:#fff;box-shadow:0 3px 10px rgba(0,0,0,.25)}
.avv-base{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
.avv-emoji{display:grid;place-items:center;font-size:calc(var(--s) * .58);line-height:1}
.avv-cabeza{position:absolute;left:-15%;top:-15%;width:130%;height:130%;max-width:none;object-fit:contain;pointer-events:none;z-index:5}

/* Brillo (aura): detrás de la cara */
.avv::before{content:'';position:absolute;inset:-14%;border-radius:50%;z-index:-1;opacity:0;transition:opacity .4s}
.aura-dorada::before{opacity:1;background:radial-gradient(circle,rgba(255,226,120,.95) 40%,rgba(255,196,60,.45) 58%,transparent 72%);animation:avv-late 2.6s ease-in-out infinite}
.aura-celeste::before{opacity:1;background:radial-gradient(circle,rgba(170,225,255,.95) 40%,rgba(90,180,255,.45) 58%,transparent 72%);animation:avv-late 2.6s ease-in-out infinite}
.aura-hojas::before{opacity:1;background:radial-gradient(circle,rgba(170,240,160,.95) 40%,rgba(80,190,100,.45) 58%,transparent 72%);animation:avv-late 2.8s ease-in-out infinite}
.aura-arcoiris::before{opacity:1;inset:-12%;background:conic-gradient(#ff8a8a,#ffd34d,#8be38b,#7cc8ff,#b9a8ff,#ff8ad8,#ff8a8a);-webkit-mask:radial-gradient(circle,transparent 52%,#000 54%,#000 66%,transparent 70%);mask:radial-gradient(circle,transparent 52%,#000 54%,#000 66%,transparent 70%);animation:avv-gira 6s linear infinite;filter:blur(1px)}
@keyframes avv-late{50%{transform:scale(1.07);opacity:.85}}
@keyframes avv-gira{to{transform:rotate(360deg)}}

/* Marco: un aro alrededor de la cara */
.avv-cara::after{content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:3}
.marco-madera .avv-cara::after{box-shadow:0 0 0 calc(var(--s) * .055) #9a6a3a,0 0 0 calc(var(--s) * .085) #5e3d1f,inset 0 0 0 2px rgba(255,255,255,.4)}
.marco-oro .avv-cara::after{inset:calc(var(--s) * -.07);background:conic-gradient(#fff3b0,#e8b23a,#fff3b0,#c98f12,#fff3b0,#e8b23a,#fff3b0);-webkit-mask:radial-gradient(circle,transparent 63%,#000 64.5%);mask:radial-gradient(circle,transparent 63%,#000 64.5%);filter:drop-shadow(0 0 4px rgba(255,210,80,.7))}
.marco-hojas .avv-cara::after{inset:calc(var(--s) * -.08);background:radial-gradient(circle at 50% 4%,#5cbf62 6%,transparent 7%),radial-gradient(circle at 96% 50%,#4fae55 6%,transparent 7%),radial-gradient(circle at 50% 96%,#5cbf62 6%,transparent 7%),radial-gradient(circle at 4% 50%,#4fae55 6%,transparent 7%),radial-gradient(circle at 85% 15%,#7ad37f 5%,transparent 6%),radial-gradient(circle at 15% 85%,#7ad37f 5%,transparent 6%),radial-gradient(circle at 15% 15%,#3f9b47 5%,transparent 6%),radial-gradient(circle at 85% 85%,#3f9b47 5%,transparent 6%);box-shadow:inset 0 0 0 calc(var(--s) * .05) #3f8f45}
.marco-luna .avv-cara::after{inset:calc(var(--s) * -.07);background:conic-gradient(#d9d0ff,#8c7bf0,#f1edff,#8c7bf0,#d9d0ff);-webkit-mask:radial-gradient(circle,transparent 63%,#000 64.5%);mask:radial-gradient(circle,transparent 63%,#000 64.5%);filter:drop-shadow(0 0 5px rgba(156,140,255,.8))}

/* Etapa de brillo (chispas ganadas en total: nunca baja). Chispitas que giran alrededor. */
.avv::after{content:'';position:absolute;inset:-18%;border-radius:50%;pointer-events:none;z-index:4;opacity:0}
.avv-e1::after,.avv-e2::after,.avv-e3::after,.avv-e4::after{opacity:1;animation:avv-gira 9s linear infinite}
.avv-e1::after{background:radial-gradient(circle at 50% 3%,#fff3b0 2.5%,transparent 3.5%)}
.avv-e2::after{background:radial-gradient(circle at 50% 3%,#fff3b0 2.5%,transparent 3.5%),radial-gradient(circle at 50% 97%,#ffe27a 2.5%,transparent 3.5%)}
.avv-e3::after{background:radial-gradient(circle at 50% 3%,#fff3b0 3%,transparent 4%),radial-gradient(circle at 92% 72%,#ffe27a 2.5%,transparent 3.5%),radial-gradient(circle at 8% 72%,#bfe8ff 2.5%,transparent 3.5%)}
.avv-e4::after{background:radial-gradient(circle at 50% 3%,#fff 3%,transparent 4%),radial-gradient(circle at 97% 50%,#ffe27a 3%,transparent 4%),radial-gradient(circle at 50% 97%,#bfe8ff 3%,transparent 4%),radial-gradient(circle at 3% 50%,#ffd0f0 3%,transparent 4%);filter:drop-shadow(0 0 3px #fff)}
.avv-chico.avv-e1::after,.avv-chico.avv-e2::after,.avv-chico.avv-e3::after,.avv-chico.avv-e4::after{display:none}

@media (prefers-reduced-motion:reduce){.avv::before,.avv::after{animation:none!important}}
body.calma .avv::before,body.calma .avv::after{animation:none!important}

/* v1.27 · Capa (asoma detrás de la cara) y marco con dibujo (arriba de todo) */
.avv-capa{position:absolute;left:-25%;top:-5%;width:150%;height:150%;max-width:none;object-fit:contain;pointer-events:none;z-index:-1}
.avv-marco-img{position:absolute;inset:-14%;width:128%;height:128%;max-width:none;object-fit:contain;pointer-events:none;z-index:6}