/* ==========================================================================
   Social Empires — fotos de perfil (personajes del juego)
   Selector tipo radio del registro y de «Mi cuenta», y la foto en la cabecera. Prefijo av-.
   Solo usa las variables de shell.css (con valores de reserva). Sin dependencias externas.
   ========================================================================== */

[data-av-picker] { display: block; min-height: 290px; }         /* hueco mientras carga (y para que el selector se monte al verse). [Ux1] Altura final de la rejilla + nombre + estado: así al montarse el selector NO empuja hacia abajo el botón «Crear cuenta» (un clic justo en ese instante caía en un personaje) */
.av-picker { display: block; }
.av-picker[aria-busy="true"] .av-grid { opacity: 0.55; }

/* Rejilla de opciones: desplazable para que 37 personajes no alarguen el formulario */
.av-grid {
  position: relative;                                  /* offsetParent: el selector centra la opción elegida con scrollTop */
  display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 8px;
  max-height: 232px; overflow-y: auto; overscroll-behavior: contain;
  padding: 6px; border-radius: 14px;
  background: rgba(0, 0, 0, 0.18); border: 1px solid var(--linea, rgba(157, 179, 201, 0.22));
}

/* Cada opción es un botón role="radio": mínimo 44 x 44 px de objetivo táctil */
.av-opt {
  position: relative; display: block; min-width: 44px; min-height: 44px; width: 100%; aspect-ratio: 1 / 1;
  margin: 0; padding: 0; overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: transparent;
  border: 2px solid rgba(255, 255, 255, 0.16); border-radius: 12px; background: rgba(255, 255, 255, 0.08);
  color: var(--claro, #eef5fb); font: inherit;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
}
.av-opt:hover { border-color: var(--oro-claro, #ffe27a); transform: translateY(-1px); }
.av-opt:focus-visible { outline: 3px solid var(--oro, #ffc21a); outline-offset: 2px; z-index: 1; }
.av-opt[aria-checked="true"] {
  border-color: var(--oro, #ffc21a); box-shadow: 0 0 0 3px rgba(255, 194, 26, 0.45);
}
.av-opt[aria-checked="true"]::after {                  /* marca de elegida (no depende solo del color) */
  content: "\2713"; position: absolute; right: 2px; bottom: 2px; width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; font: 700 12px/1 var(--f-body, system-ui, sans-serif);
  background: var(--oro, #ffc21a); color: var(--oro-borde, #7d4f00); box-shadow: 0 0 0 1px var(--oro-borde, #7d4f00);
}
.av-opt img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 35%; pointer-events: none; user-select: none; }

/* Nombre del personaje elegido y estado (carga / error / guardado) */
.av-selected { margin: 8px 0 0; min-height: 1.3em; font-size: 0.86rem; font-weight: 700; color: var(--oro-claro, #ffe27a); }
.av-status { margin: 6px 0 0; min-height: 1.2em; font-size: 0.8rem; color: var(--apagado, #9db3c9); }
.av-status[data-kind="error"] { color: #ffb4ac; }
.av-status[data-kind="ok"] { color: #9be07f; }

/* Foto en la cabecera (círculo de la cuenta) y en el menú de cuenta */
/* [Ux1] La miniatura del juego es un CUADRADO de 90 px con el personaje a sangre (a veces con la cabeza pegada al borde): recortada a círculo con
   object-fit: cover perdía el casco, la corona o las orejas. Ahora el círculo es un disco blanco (el fondo de la miniatura) y la imagen se
   deja al 90 % centrada con object-fit: contain: nunca se estira, nunca se aplasta y la cabeza queda dentro del círculo. El círculo es
   siempre cuadrado (aspect-ratio y flex: none en shell.css): en una fila apretada no se queda en óvalo. */
.se-avatar.av-has-img { position: relative; display: block; overflow: hidden; padding: 0; background: #fff; }
.se-avatar .av-img {
  position: absolute; left: 5%; top: 5%; display: block; width: 90%; height: 90%; max-width: none;
  object-fit: contain; object-position: 50% 45%; border-radius: 0;
}
.se-menu__who.av-who { display: flex; align-items: center; gap: 12px; }
.se-menu__who .av-menu-avatar { display: grid; flex: none; width: 40px; height: 40px; aspect-ratio: 1 / 1; margin: 0; color: #fff; font-size: 1.1rem; overflow: hidden; text-overflow: clip; white-space: normal; }
.se-menu__who .av-menu-avatar.av-has-img { display: block; }
.se-menu__who .av-menu-avatar.av-has-img { font-size: 0; }
.av-who__txt { min-width: 0; }

/* Tarjeta de «Foto de perfil» en Mi cuenta */
.av-account__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 12px; }

@media (max-width: 480px) {
  .av-grid { grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); max-height: 208px; }
  [data-av-picker] { min-height: 266px; }
}
@media (prefers-reduced-motion: reduce) {
  .av-opt { transition: none; }
  .av-opt:hover { transform: none; }
}
@media (forced-colors: active) {
  .av-opt { border-color: ButtonText; }
  .av-opt[aria-checked="true"] { outline: 3px solid Highlight; outline-offset: 1px; border-color: Highlight; }
  .av-opt:focus-visible { outline-color: Highlight; }
}