/* ============================================================
   COMPONENTES REUTILIZABLES
   Tarjeta de jugador, bocadillos e iconos: se usan en varias
   vistas, por eso están aquí y no en el CSS de una página.
   ============================================================ */

/* --- Tarjeta de jugador ---
   Carta cuadrada: imagen a sangre, iconos superpuestos en
   columna arriba a la izquierda y nombre debajo. */

.tarjeta-jugador {
  width: 130px;
  background-color: rgba(18, 18, 18, 0.8);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.15s;
}

.tarjeta-jugador:hover {
  transform: translateY(-2px);
}

/* Marco cuadrado donde va la imagen con los iconos encima.
   El borde grueso es del color de la rareza. */
.tarjeta-jugador__marco {
  position: relative;
  aspect-ratio: 1 / 1; /* siempre cuadrado, mida lo que mida */
  border: 5px solid;
  border-radius: 12px;
  /* La imagen se ajusta a la ALTURA del marco y se centra; si el
     personaje es muy ancho, los lados se recortan en vez de quedar
     una imagen diminuta perdida en el centro. */
  display: flex;
  align-items: flex-end; /* apoyada en la base */
  justify-content: center; /* centrada, aunque desborde por los lados */
  overflow: hidden; /* recorta lo que sobresalga (respeta el redondeo) */
}

/* Fondos y bordes del marco según la rareza del jugador */
.tarjeta-jugador__marco--1 {
  background: linear-gradient(160deg, #c0c0c0 0%, #909090 100%);
  border-color: #848484;
}

.tarjeta-jugador__marco--2 {
  background: linear-gradient(160deg, #ffe98a 0%, #f6b73c 55%, #ffd75e 100%);
  border-color: #e39c1f;
}

/* Las de 3★ llevan el borde en arcoíris, como en el juego */
.tarjeta-jugador__marco--3 {
  background: linear-gradient(
    160deg,
    #ffd9e8 0%,
    #ffeccb 20%,
    #fdffc4 40%,
    #cfffdd 60%,
    #c9e9ff 80%,
    #e6d4ff 100%
  );
  border-image: linear-gradient(
      160deg,
      #f9a8c8 0%,
      #ffd08a 20%,
      #f2f07a 40%,
      #8fe3a8 60%,
      #8ec9f0 80%,
      #c3a3f0 100%
    )
    1;
  border-radius: 0; /* border-image no admite esquinas redondeadas */
}

.tarjeta-jugador__imagen {
  height: 100%; /* manda la altura: la imagen la llena siempre */
  width: auto; /* el ancho sale solo (puede desbordar y recortarse) */
  max-width: none;
  display: block;
  padding-top: 10px; /* un poco de aire arriba */
  box-sizing: border-box;
}

/* Columna de iconos superpuesta: elemento, posición, estrellas */
.tarjeta-jugador__iconos {
  position: absolute;
  top: 6px;
  left: 6px;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* todo alineado a la izquierda */
  gap: 3px;
}

.tarjeta-jugador__icono {
  width: 26px;
  height: 26px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}

.tarjeta-jugador__posicion {
  width: 20px;
  height: 12px;
  object-fit: contain;
  object-position: left;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}

.tarjeta-jugador__estrella {
  width: 18px;
  height: 18px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}

.tarjeta-jugador__nombre {
  padding: 6px 4px;
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* nombres largos: "Riccardo Di R..." */
}

/* --- Iconos de elemento y posición ---
   Tamaños por defecto. Cada vista los ajusta en su propio CSS
   con un selector más específico, que es el que manda. */

.icono-elemento {
  width: 26px;
  height: 26px;
  display: inline-block;
  vertical-align: middle;
  object-fit: contain;
}

.icono-posicion {
  width: 38px; /* el ancho manda: los iconos son apaisados */
  height: 24px;
  display: inline-block;
  vertical-align: middle;
  object-fit: contain;
}

/* --- Bocadillo (tooltip) ---
   Cualquier elemento con data-tooltip lo muestra al pasar el
   ratón. Aquí se cambia el aspecto de todos de una vez. */

[data-tooltip] {
  position: relative;
}

/* Cuerpo del bocadillo */
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 10px;
  background-color: #292929;
  color: #ffffff;
  font-size: 12px;
  white-space: nowrap;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  /* Oculto hasta el hover */
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.15s,
    visibility 0.15s;
  pointer-events: none;
  z-index: 10;
}

/* Piquito inferior del bocadillo */
[data-tooltip]::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #292929;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.15s,
    visibility 0.15s;
  pointer-events: none;
  z-index: 10;
}

[data-tooltip]:hover::after,
[data-tooltip]:hover::before {
  opacity: 1;
  visibility: visible;
}

/* ------------------------- MÓVIL ------------------------- */

@media (max-width: 900px) {
  /* Tarjetas más pequeñas: los iconos se ajustan */
  .tarjeta-jugador {
    width: 104px;
  }

  .tarjeta-jugador__iconos {
    top: 4px;
    left: 4px;
    gap: 2px;
  }

  .tarjeta-jugador__icono {
    width: 20px;
    height: 20px;
  }

  .tarjeta-jugador__posicion {
    width: 16px;
    height: 10px;
  }

  .tarjeta-jugador__estrella {
    width: 13px;
    height: 13px;
  }

  .tarjeta-jugador__nombre {
    font-size: 11px;
  }
}

/* ============================================================
   CHAPA DE RAREZA (despertar por dupes)
   Los fondos imitan los del juego (ver RAREZAS_DUPE en
   PaginaJugador.js). Vive aquí, y no en comparar.css, para que la
   pueda usar cualquier pantalla: quien la pinta solo añade
   "rareza-chip rareza-chip--<id>" (helper clasesRareza(id)) y pone
   por su cuenta el tamaño y el padding.
   OJO: quien la use NO debe fijar background ni color en su propio
   CSS, o pisará estas reglas (comparar.css carga después).
   ============================================================ */
.rareza-chip {
  border: 1px solid rgba(0, 0, 0, 0.45);
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  color: #1a1206; /* por defecto texto oscuro: casi todas son claras */
  background: #2b2b30;
}

/* Básico: sin despertar, así que sin color; gris apagado */
.rareza-chip--basico {
  background: #35353b;
  border-color: rgba(255, 255, 255, 0.25);
  color: #c9c9d1;
}

.rareza-chip--advanced {
  background: #4e00ae;
  border-color: rgba(255, 255, 255, 0.28);
  color: #ffffff;
}

.rareza-chip--advanced_plus {
  background: #a761f5;
  border-color: rgba(255, 255, 255, 0.35);
  color: #ffffff;
}

.rareza-chip--top {
  background: #f8e63b;
  border-color: rgba(0, 0, 0, 0.4);
}

/* Top+ : dorado. El brillo intermedio es lo que le da el aspecto
   metálico; sin él se ve como un degradado plano cualquiera. */
.rareza-chip--top_plus {
  background: linear-gradient(
    160deg,
    #fdef0a 0%,
    #ffe25c 28%,
    #bf7d00 62%,
    #f3d371 85%,
    #bf7d00 100%
  );
  border-color: rgba(0, 0, 0, 0.45);
}

.rareza-chip--legendary {
  background: linear-gradient(160deg, #fb6e00 0%, #fcdc19 100%);
  border-color: rgba(0, 0, 0, 0.45);
}

/* Legendary+ : el MISMO arcoíris que el marco de las 3★ de la lista
   de jugadores (.tarjeta-jugador__marco--3). Si se retoca allí,
   retocar aquí. */
.rareza-chip--legendary_plus {
  background: linear-gradient(
    160deg,
    #ffd9e8 0%,
    #ffeccb 20%,
    #fdffc4 40%,
    #cfffdd 60%,
    #c9e9ff 80%,
    #e6d4ff 100%
  );
  border-color: rgba(0, 0, 0, 0.4);
}


/* ============================================================
   PÁGINA "EN DESARROLLO" (PaginaEnDesarrollo.js)
   Sale cuando el hash no corresponde a ninguna vista montada.
   Misma estampa que el "no se encuentran jugadores" de la lista.
   ============================================================ */

.en-desarrollo__caja {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 40px 0;
  text-align: center;
}

.en-desarrollo__texto {
  font-size: 20px;
  color: #e8e8e8;
}

.en-desarrollo__imagen {
  width: 260px;
  max-width: 60%;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));
}