/* =========================================================================
   RETRATOS DE PERFIL Y MARCOS

   Los marcos se animan SOLO con transform y opacity, que el navegador resuelve
   en el compositor. Animar box-shadow, filter o el degradado del borde obliga a
   repintar cada fotograma y, con varios marcos en pantalla a la vez (vitrina,
   chat de clan, ranking de arena), hunde el hilo principal.

   Todo escala con --av-size, asi que el mismo marco sirve para el retrato de
   36 px de la barra superior y para el de 120 px del perfil.
   ========================================================================= */

.av{
  position:relative;
  width:var(--av-size,36px); height:var(--av-size,36px);
  flex:0 0 var(--av-size,36px);
  border-radius:26%;
  isolation:isolate;
}

/* Brillo estatico del marco: pulso de energia limpio y concentrico sin balanceo ni desplazamientos */
.av::before{
  content:''; position:absolute; inset:-3%; z-index:3; pointer-events:none;
  border:1px solid var(--av-c1, #55E6FF);
  border-radius:28%; opacity:.35;
  will-change:opacity;
  animation:av-frame-sheen 3.2s ease-in-out infinite;
}
@keyframes av-frame-sheen{
  0%,100%{ opacity:.20; }
  50%{ opacity:.65; }
}

/* Ilustraciones de marcos épicos en alta definición */
.av.has-img-frame::before{ display:none !important; }
.av.has-img-frame .av-ring,
.av.has-img-frame .av-ring2{ display:none !important; }
.av-frame-img{
  position:absolute;
  top:50%; left:50%;
  width:160%; height:160%;
  transform:translate(-50%, -50%);
  pointer-events:none;
  z-index:6;
  object-fit:contain;
  user-select:none;
  -webkit-user-drag:none;
  filter:drop-shadow(0 0 calc(var(--av-size, 36px) * 0.12) var(--av-glow));
}

/* Ilustración 2D de retratos de héroes y jefes */
.av-2d-img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  border-radius:inherit;
  user-select:none;
  -webkit-user-drag:none;
}

/* Hueco del retrato en la barra superior. El boton no pinta nada por su
   cuenta: solo aloja el nodo que monta ui.js. */
.avatar-btn{
  position:relative; width:36px; height:36px; flex:0 0 36px;
  background:none; border:0; padding:0;
  transition:transform var(--t-fast) var(--ease-back);
}
.avatar-btn:active{ transform:scale(.9); }

/* ---------- Lienzo del retrato ---------- */
.av-art{
  position:absolute; inset:8%;
  border-radius:22%;
  overflow:hidden;                 /* recorta el encuadre de busto */
  background:radial-gradient(120% 100% at 50% 0%, #1B2440 0%, #0A0E1C 100%);
  z-index:1;
}

/*
 * LA TIRA DE SPRITES. Un canvas TAN ANCHO como fotogramas tenga el retrato,
 * pintado una sola vez (ver `ui/avatar.js`), del que `.av-art` solo deja ver
 * una ventana porque recorta.
 *
 * Animar `transform` con `steps(n)` exacto de 0 a -100% cambia de fotograma
 * en el mismo sitio sin desplazamiento horizontal continuo ni cortes raros.
 */
.av-art canvas{ display:block; height:100%; }
.av-tira{
  position:absolute; left:0; top:0;
  height:100%;
  will-change:transform;
  backface-visibility:hidden;
  transform:translate3d(0,0,0);
}
.av-tira.anima{
  will-change:transform;
}
@keyframes avTira{
  0%{ transform:translate3d(0,0,0); }
  100%{ transform:translate3d(-100%,0,0); }
}

/* ---------- Aro base: es el marco propiamente dicho ---------- */
.av-ring{
  position:absolute; inset:0;
  border-radius:26%;
  border:2px solid var(--av-c1, #55E6FF);
  box-shadow:inset 0 0 4px var(--av-c2, #2E6BFF);
  z-index:2;
  pointer-events:none;
}

/* Segundo aro: solo lo usan los efectos que lo necesitan. */
.av-ring2{
  position:absolute; inset:-6%;
  border-radius:26%;
  opacity:0;
  z-index:0;
}

/* Halo exterior. Se anima con opacity/transform sobre un pseudo-elemento,
   nunca cambiando box-shadow. */
.av::after{
  content:''; position:absolute; inset:-14%;
  border-radius:30%;
  background:radial-gradient(closest-side, var(--av-glow), transparent 72%);
  opacity:.30; z-index:0; pointer-events:none;
}

/* Particulas en orbita. Ocultas salvo en los efectos que las piden. */
.av-orbit{ position:absolute; inset:-10%; z-index:3; pointer-events:none; display:none; }
.av-orbit i{
  position:absolute; top:50%; left:50%;
  width:calc(var(--av-size,36px) * .14); height:calc(var(--av-size,36px) * .14);
  margin:calc(var(--av-size,36px) * -.07) 0 0 calc(var(--av-size,36px) * -.07);
  border-radius:50%;
  background:var(--av-c1);
  box-shadow:0 0 calc(var(--av-size,36px) * .18) var(--av-glow);
}

/* Insignia de nivel */
.av b{
  position:absolute; bottom:-11%; left:50%;
  transform:translateX(-50%);
  font-size:min(13px, calc(var(--av-size,36px) * .30));
  line-height:1;
  padding:2px min(9px, calc(var(--av-size,36px) * .18));
  border-radius:99px;
  background:var(--bg-1); border:1px solid var(--av-c1); color:var(--av-c1);
  z-index:10; white-space:nowrap; font-weight:900;
}

/* =========================================================================
   EFECTOS POR RAREZA
   ========================================================================= */

/* --- steel (comun): estatico --------------------------------------------- */
.av-fx-steel::after{ opacity:.16; }

/* --- pulse (raro): respiracion del halo ---------------------------------- */
.av-fx-pulse::after{ animation:av-breathe 2.6s ease-in-out infinite; }
@keyframes av-breathe{
  0%,100%{ opacity:.24; transform:scale(1); }
  50%    { opacity:.55; transform:scale(1.09); }
}

/* --- dash (raro): guiones de escaner girando ----------------------------- */
.av-fx-dash .av-ring2{
  opacity:1;
  border-radius:50%;
  background:conic-gradient(var(--av-c1) 0 8%, transparent 8% 25%,
                            var(--av-c1) 25% 33%, transparent 33% 50%,
                            var(--av-c1) 50% 58%, transparent 58% 75%,
                            var(--av-c1) 75% 83%, transparent 83% 100%);
  -webkit-mask:radial-gradient(closest-side, transparent 78%, #000 80%);
  mask:radial-gradient(closest-side, transparent 78%, #000 80%);
  animation:av-spin 4.5s linear infinite;
}
@keyframes av-spin{ to{ transform:rotate(360deg); } }

/* --- conic (epico): barrido conico de energia ---------------------------- */
.av-fx-conic .av-ring{
  background:conic-gradient(from 0deg,
    var(--av-c2), var(--av-c1), #fff, var(--av-c1), var(--av-c2));
  z-index:0;
}
.av-fx-conic .av-ring2{
  opacity:1; border-radius:50%;
  background:conic-gradient(transparent 0 62%, var(--av-c1) 78%, transparent 88%);
  -webkit-mask:radial-gradient(closest-side, transparent 76%, #000 79%);
  mask:radial-gradient(closest-side, transparent 76%, #000 79%);
  animation:av-spin 2.4s linear infinite;
}
.av-fx-conic::after{ animation:av-breathe 2.2s ease-in-out infinite; }

/* --- orbit (epico/legendario): satelites + barrido ----------------------- */
.av-fx-orbit .av-ring{
  background:conic-gradient(from 0deg, var(--av-c2), var(--av-c1), var(--av-c2));
  z-index:0;
}
.av-fx-orbit .av-ring2{
  opacity:1; border-radius:50%;
  background:conic-gradient(transparent 0 55%, var(--av-glow) 75%, transparent 92%);
  -webkit-mask:radial-gradient(closest-side, transparent 74%, #000 78%);
  mask:radial-gradient(closest-side, transparent 74%, #000 78%);
  animation:av-spin 3s linear infinite;
}
.av-fx-orbit .av-orbit{ display:block; animation:av-spin 5s linear infinite; }
.av-fx-orbit .av-orbit i:nth-child(1){ transform:rotate(0deg)   translateY(calc(var(--av-size) * -.60)); }
.av-fx-orbit .av-orbit i:nth-child(2){ transform:rotate(120deg) translateY(calc(var(--av-size) * -.60)); }
.av-fx-orbit .av-orbit i:nth-child(3){ transform:rotate(240deg) translateY(calc(var(--av-size) * -.60)); }
.av-fx-orbit::after{ animation:av-breathe 3s ease-in-out infinite; }

/* --- inferno (legendario): llama ascendente ------------------------------ */
.av-fx-inferno .av-ring{
  background:linear-gradient(0deg, var(--av-c2) 0%, var(--av-c1) 45%, #FFE9A8 60%,
                             var(--av-c1) 75%, var(--av-c2) 100%);
  background-size:100% 300%;
  animation:av-rise 1.5s linear infinite;
  z-index:0;
}
@keyframes av-rise{ from{ background-position:50% 0%; } to{ background-position:50% -200%; } }
.av-fx-inferno .av-ring2{
  opacity:1; border-radius:50%;
  background:conic-gradient(transparent 0 60%, #FFD34E 80%, transparent 92%);
  -webkit-mask:radial-gradient(closest-side, transparent 75%, #000 79%);
  mask:radial-gradient(closest-side, transparent 75%, #000 79%);
  animation:av-spin 1.8s linear infinite;
}
.av-fx-inferno::after{ animation:av-breathe 1.4s ease-in-out infinite; }

/* --- singularity (mitico): dos anillos contrarrotados -------------------- */
.av-fx-singularity .av-ring{
  border-radius:50%;
  background:conic-gradient(from 0deg,
    var(--av-c1), var(--av-c2), #fff, var(--av-c2), var(--av-c1));
  animation:av-spin 2.6s linear infinite;
  z-index:0;
}
.av-fx-singularity .av-art{ border-radius:50%; }
.av-fx-singularity{ border-radius:50%; }
.av-fx-singularity .av-ring2{
  opacity:1; border-radius:50%;
  background:conic-gradient(transparent 0 44%, #FFFFFF 58%, var(--av-c1) 66%, transparent 80%);
  -webkit-mask:radial-gradient(closest-side, transparent 72%, #000 76%);
  mask:radial-gradient(closest-side, transparent 72%, #000 76%);
  animation:av-spin-rev 1.9s linear infinite;
}
@keyframes av-spin-rev{ to{ transform:rotate(-360deg); } }
.av-fx-singularity .av-orbit{ display:block; animation:av-spin-rev 3.4s linear infinite; }
.av-fx-singularity .av-orbit i{ background:#fff; }
.av-fx-singularity .av-orbit i:nth-child(1){ transform:rotate(30deg)  translateY(calc(var(--av-size) * -.62)); }
.av-fx-singularity .av-orbit i:nth-child(2){ transform:rotate(150deg) translateY(calc(var(--av-size) * -.55)); }
.av-fx-singularity .av-orbit i:nth-child(3){ transform:rotate(270deg) translateY(calc(var(--av-size) * -.62)); }
.av-fx-singularity::after{ animation:av-breathe 1.8s ease-in-out infinite; opacity:.5; }

/* =========================================================================
   VITRINA (perfil -> Personalizar)
   ========================================================================= */
.av-hero{ display:grid; place-items:center; gap:8px; padding-bottom:10px; margin-bottom:8px; }
.av-hero .av{ margin-bottom:calc(var(--av-size,36px) * .13); }
.av-name{ font-size:19px; font-weight:900; }
.av-sub{ font-size:12px; color:var(--tx-lo); }

.av-grid{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:12px 10px;
}
.av-cell{
  position:relative;
  display:grid; place-items:center; gap:6px;
  padding:14px 6px 8px;
  border-radius:var(--r-md,14px);
  background:var(--glass); border:1px solid var(--stroke);
  transition:border-color var(--t-fast);
  overflow:visible;
}
.av-cell:active{ transform:scale(.94); }
.av-cell.sel{ border-color:var(--c-neon); box-shadow:var(--glow-neon); }

.av-cell.locked .av{ opacity:.62; }
.av-cell-name{ font-size:11px; font-weight:800; line-height:1.15; text-align:center; }
.av-cell-tag{
  font-size:9.5px; font-weight:800; letter-spacing:.03em;
  padding:1px 6px; border-radius:99px;
}
.av-cell-cost{ font-size:10.5px; color:var(--tx-lo); }

/* =========================================================================
   VEINTE MARCOS ANIMADOS A LA VEZ, SIN PARPADEO
   ========================================================================= */
.av-grid .av-cell{
  contain:layout;
  content-visibility:auto;
  contain-intrinsic-size:auto 128px;
}
.av-grid .av-cell .av-ring,
.av-grid .av-cell .av-ring2,
.av-grid .av-cell .av-orbit,
.av-grid .av-cell .av-tira{
  will-change:transform, filter;
}

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

/* =========================================================================
   CAPAS PROPIAS PARA TODO LO QUE SE MUEVE EN LOS MARCOS.
   ========================================================================= */
.av-fx-pulse::after, .av-fx-conic::after, .av-fx-orbit::after,
.av-fx-inferno::after, .av-fx-singularity::after,
.av-fx-dash .av-ring2, .av-fx-conic .av-ring, .av-fx-conic .av-ring2,
.av-fx-orbit .av-ring, .av-fx-orbit .av-ring2, .av-fx-orbit .av-orbit,
.av-fx-inferno .av-ring, .av-fx-inferno .av-ring2,
.av-fx-singularity .av-ring, .av-fx-singularity .av-ring2{
  will-change:transform, opacity;
  transform:translateZ(0);
}