/* Juegos: los retos del día, la Tienda, los Pokédólares (también en «Logros») y lo que se compra
   (marcos de la foto y fondos de la tarjeta). Ver js/juegos/ y js/comun/fichas.js. */

/* ---------- La ficha (la moneda) ---------- */

.ficha-moneda {
  display: inline-block;
  flex: none;
  width: 0.95em;
  height: 0.95em;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 38%, rgba(20, 70, 30, 0.55) 40% 46%, transparent 48%),
    radial-gradient(circle at 35% 30%, #a6e3a1, #4fb35c 55%, #2a7a3a);
  box-shadow: 0 0 0 1px rgba(15, 55, 25, 0.6);
  vertical-align: -0.12em;
}

.ficha-moneda.grande {
  width: 2.4rem;
  height: 2.4rem;
}

/* ---------- Ventana de un regalo (js/comun/regalos.js) ---------- */

.regalo-ventana {
  --color-vista: 76, 182, 92;
  width: min(28rem, 92vw);
}

.regalo-ventana .regalo-titulo {
  font-size: 1.25rem;
}

.regalo-cantidad {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin: 0.9rem 0 0.5rem;
  padding: 0.7rem;
  border-radius: 0.6rem;
  background: rgba(76, 182, 92, 0.12);
}

.regalo-cantidad strong {
  font-size: 2rem;
  color: rgb(76, 182, 92);
}

.regalo-despues {
  margin-bottom: 0.9rem;
}

/* Solo el título va en negrita (.ventana-texto pone en negrita el primer párrafo) */
.regalo-despues p:first-child {
  font-weight: normal;
}

.regalo-despues .regalo-firma {
  text-align: right;
  font-style: italic;
  opacity: 0.8;
}

/* Los iconos de dentro de los botones y textos de «Juegos», del tamaño de la letra (si no,
   el SVG sale a su tamaño y se come el botón) */
#vista-juegos .icono {
  flex: none;
  width: 1.1em;
  height: 1.1em;
}

#vista-juegos input {
  box-sizing: border-box;
}

.ficha-cifra {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: bold;
}

/* En cada logro de «Logros», los Pokédólares que da */
.logro-fichas {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8rem;
  font-weight: bold;
  color: var(--t-gris-2);
}

/* ---------- Cabecera: saldo y racha ---------- */

.juegos-cabecera {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.8rem 1.5rem;
  align-items: center;
  margin: 0.9rem 0 1rem;
  padding: 1rem 1.2rem;
  border-radius: 0.7rem;
  background: var(--t-panel);
  box-shadow: inset 3px 0 0 rgb(var(--color-vista));
}

.juegos-saldo,
.juegos-racha {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

/* La «i» al lado de «Pokédólares»: abre cómo se ganan */
.juegos-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  box-sizing: border-box;
  margin-left: 0.4rem;
  /* la «i» tiene el punto arriba y parece subida: se baja un poco para que quede en el centro */
  padding: 0.07rem 0 0;
  border: 1px solid rgba(var(--t-tinte), 0.35);
  border-radius: 50%;
  background: transparent;
  color: rgba(var(--t-tinte), 0.75);
  font-family: Georgia, serif;
  font-size: 0.75rem;
  font-style: italic;
  font-weight: bold;
  line-height: 1;
  vertical-align: middle;
  cursor: pointer;
}

.juegos-info:hover,
.juegos-info:focus-visible {
  border-color: rgb(var(--color-vista));
  background: rgb(var(--color-vista));
  color: var(--t-tinta);
}

.juegos-saldo p {
  margin: 0;
  color: var(--t-gris-2);
}

.juegos-saldo strong {
  font-family: var(--letra-titulos);
  font-size: 2rem;
  line-height: 1;
}

.juegos-saldo small,
.juegos-racha small {
  display: block;
  color: var(--t-gris);
  font-size: 0.82rem;
}

#vista-juegos .juegos-racha > .icono {
  width: 1.8rem;
  height: 1.8rem;
  color: var(--t-gris-4);
}

.juegos-racha.activa > .icono {
  color: #f0a53c;
}

/* ---------- Retos ---------- */

/* Las tarjetas de los cinco retos: el icono suelto, del color de la sección; la elegida con la
   capa de color a la izquierda; las ya jugadas, apagadas y con lo que dieron */
.retos-fila {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.reto-tarjeta {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
  padding: 0.65rem 0.85rem;
  border: none;
  border-radius: 14px;
  background: var(--t-panel);
  color: var(--t-texto);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.reto-tarjeta:hover {
  background: var(--t-panel-3);
}

.reto-tarjeta.activa {
  background: rgba(var(--color-vista), 0.14);
  box-shadow: inset 3px 0 0 rgb(var(--color-vista));
}

#vista-juegos .reto-tarjeta > .icono {
  width: 1.4rem;
  height: 1.4rem;
  color: color-mix(in srgb, rgb(var(--color-vista)) var(--t-vivo), black);
}

.reto-tarjeta span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.reto-tarjeta strong {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.15;
  font-size: 0.9rem;
}

.reto-tarjeta small {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--t-gris);
  font-size: 0.8rem;
}

.reto-tarjeta small.hecho {
  color: color-mix(in srgb, rgb(var(--color-vista)) var(--t-vivo), black);
  font-weight: bold;
}

.reto-tarjeta.terminado:not(.activa) > .icono {
  opacity: 0.45;
}

.juego {
  padding: 1rem 1.1rem 1.1rem;
  border-radius: 14px;
  background: var(--t-panel);
  box-shadow: inset 3px 0 0 rgb(var(--color-vista));
}

.juego-cargando,
.juegos-nota {
  margin: 0.4rem 0;
  color: var(--t-gris);
  font-size: 0.88rem;
}

.juego-cabeza {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.7rem;
}

.juego-cabeza h2 {
  margin: 0;
  font-size: 1.3rem;
}

.juego-intentos {
  display: flex;
  gap: 0.3rem;
}

.juego-intento {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--t-control);
}

.juego-intento.fallo { background: var(--t-mal); }
.juego-intento.acierto { background: var(--t-bien); }

.juego-explicacion {
  margin: -0.2rem 0 0.8rem;
  color: var(--t-gris-2);
  font-size: 0.9rem;
}

/* La casilla de escribir, con sus sugerencias debajo */
.juego-form {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.8rem;
}

.juego-campo {
  position: relative;
  flex: 1;
  min-width: 0;
}

.juego-campo input {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--t-control-2);
  border-radius: 0.5rem;
  background: var(--t-fondo);
  color: var(--t-texto);
  font-size: 1rem;
}

.juego-campo input:focus {
  outline: none;
  border-color: rgb(var(--color-vista));
}

.juego-form button,
.tienda-articulo button {
  flex: none;
  padding: 0.5rem 0.9rem;
  border: none;
  border-radius: 0.5rem;
  background: rgb(var(--color-vista));
  color: var(--t-tinta);
  font-weight: bold;
  white-space: nowrap;
  cursor: pointer;
}

.juego-form button small {
  font-weight: normal;
  opacity: 0.75;
}

.juego-pista {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.5rem 0 0;
  color: var(--t-gris-3);
  font-size: 0.92rem;
}

.juego-pista .icono {
  color: rgb(var(--color-vista));
}

/* El final del reto */
.juego-fin {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.8rem;
  padding: 0.7rem 0.9rem;
  border-radius: 0.6rem;
  background: var(--t-panel-3);
}

.juego-fin strong {
  font-size: 1.05rem;
}

.juego-fin-fichas {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: bold;
}

.juego-fin small {
  color: var(--t-gris);
}

/* ---------- ¿Quién es ese Pokémon? ---------- */

/* Un foco de luz detrás: la silueta (negra) se lee en los dos temas */
.silueta-pantalla {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 23rem;
  border-radius: 0.6rem;
  background:
    radial-gradient(circle at 50% 50%, #fff6d8 0 30%, #f2cf6b 55%, #d98f3c 100%);
  overflow: hidden;
}

.silueta-imagen {
  max-width: 85%;
  max-height: 90%;
  filter: brightness(0);
  user-select: none;
  -webkit-user-drag: none;
  transition: filter 0.6s ease;
}

.silueta-imagen.revelada {
  filter: none;
}

.silueta-fallos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.8rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--t-gris);
  font-size: 0.88rem;
  text-decoration: line-through;
}

.silueta-fallos li {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.silueta-fallos .icono {
  width: 0.8rem;
  height: 0.8rem;
  color: var(--t-mal);
}

/* ---------- Adivínalo ---------- */

.pistas-tabla {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.9rem;
  overflow-x: auto;
}

.pistas-fila {
  display: grid;
  grid-template-columns: minmax(7.5rem, 1.6fr) repeat(6, minmax(3.9rem, 1fr));
  gap: 0.3rem;
  min-width: 34rem;
}

.pistas-titulos span {
  color: var(--t-gris);
  font-size: 0.75rem;
  text-align: center;
}

.pistas-titulos span:first-child {
  text-align: left;
}

.pistas-quien {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  font-weight: bold;
  font-size: 0.88rem;
}

.pistas-quien img {
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 0.4rem;
}

.pistas-quien span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pistas-casilla {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  min-height: 3rem;
  padding: 0.25rem;
  border-radius: 0.4rem;
  background: var(--t-panel-3);
  color: #fff;
  font-size: 0.8rem;
  font-weight: bold;
  text-align: center;
  line-height: 1.1;
}

/* Verde: acierto. Amarillo: cerca. Rojo: fallo. Los números van por una escala del amarillo
   verdoso (muy cerca) al rojo (lejos): --tono lo pone js/juegos/pistas.js */
.pistas-casilla.si,
.pistas-muestra.si {
  background: #2e9e5b;
}

.pistas-casilla.casi,
.pistas-muestra.casi {
  background: #d9a52b;
  color: var(--t-tinta);
}

.pistas-casilla.no,
.pistas-muestra.no {
  background: #c8473b;
}

.pistas-casilla.escala {
  background: hsl(var(--tono) 68% 40%);
}

/* Colores para daltónicos (css/base.css, --t-bien): acierto en azul, fallo en naranja y la
   escala del amarillo (muy cerca) al naranja (lejos), sin pasar por el verde ni el rojo */
:root[data-colores="daltonicos"] :is(.pistas-casilla, .pistas-muestra).si {
  background: #2f7fc4;
}

:root[data-colores="daltonicos"] :is(.pistas-casilla, .pistas-muestra).no {
  background: #cf6418;
}

:root[data-colores="daltonicos"] .pistas-casilla.escala {
  background: hsl(calc(24 + var(--tono) * 0.4) 80% 42%);
}

/* Hacia dónde está el bueno: una flecha a la derecha del valor */
.pistas-flecha {
  display: inline-flex;
}

#vista-juegos .pistas-flecha .icono {
  width: 1.05rem;
  height: 1.05rem;
}

#vista-juegos .pistas-casilla .icono-tipo {
  width: 0.9rem;
  height: 0.9rem;
}

.pistas-leyenda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.5rem;
  margin: -0.3rem 0 0.8rem;
  color: var(--t-gris);
  font-size: 0.8rem;
}

.pistas-muestra {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 0.2rem;
}

.pistas-leyenda-flecha {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin-left: 0.4rem;
}

.pistas-casilla .icono-tipo {
  background: currentColor;
}

/* ---------- Tienda ---------- */

.tienda-apartado {
  margin-bottom: 1.5rem;
}

.tienda-apartado h2 {
  margin: 0;
  font-size: 1.25rem;
}

.tienda-explicacion {
  margin: 0.1rem 0 0.7rem;
  color: var(--t-gris);
  font-size: 0.88rem;
}

.tienda-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: 0.8rem;
}

.tienda-articulo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem;
  border-radius: 14px;
  background: var(--t-panel);
  text-align: center;
}

.tienda-articulo.puesto {
  box-shadow: inset 0 -3px 0 rgb(var(--color-vista));
}

.tienda-articulo button:disabled {
  opacity: 0.45;
  cursor: default;
}

.tienda-articulo .tienda-poner,
.tienda-articulo .tienda-quitar {
  background: var(--t-control);
  color: var(--t-texto);
}

.tienda-articulo .tienda-quitar {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.tienda-quitar .icono {
  width: 0.9rem;
  height: 0.9rem;
  color: var(--t-bien);
}

.tienda-muestra {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 5rem;
  border-radius: 0.6rem;
  background-color: var(--t-panel-3);
}

/* Los marcos con dibujo salen bastante de la foto (hasta casi el doble): que quepan en la muestra */
.tienda-muestra-marco {
  height: 6rem;
}

.tienda-muestra-titulo .perfil-titulo {
  margin: 0;
}

.tienda-foto {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.4rem;
  height: 3.4rem;
  border: 3px solid var(--t-azulado);
  border-radius: 50%;
  background: var(--t-fondo);
  overflow: hidden;
  font-size: 1.4rem;
  font-weight: bold;
}

.tienda-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Marcos de la foto ----------
   Van en el círculo de la foto, en toda la web (perfil, «Amigos», foro, lockes, cementerio,
   chat, Inicio, la barra lateral, la Tienda): el borde cambia de color y,
   por fuera, uno o varios aros con box-shadow (el overflow: hidden de la foto no los corta). */

/* --g: el grosor de los aros. Normal en las fotos grandes; más fino en las pequeñas */
.con-marco {
  --g: 1px;
}

:is(.foro-foto, .cementerio-cara, .locke-cara, .chat-foto, .inicio-cara, .sesion-foto, .clasificacion-foto, .perfil-marco-foto).con-marco {
  --g: 0.6px;
}

/* Los 18 de tipo (js/comun/fichas.js, MARCOS): el mismo diseño para todos, del color de su
   tipo (los de js/comun/tipos.js): el borde, un aro más oscuro y un brillo suave */
.con-marco.marco-de-tipo {
  border-color: var(--marco) !important;
  box-shadow:
    0 0 0 calc(var(--g) * 2.5) color-mix(in srgb, var(--marco) 50%, #000),
    0 0 calc(var(--g) * 12) color-mix(in srgb, var(--marco) 55%, transparent);
}

.marco-normal { --marco: #a8a77a; }
.marco-brasa { --marco: #ee8130; }
.marco-burbuja { --marco: #6390f0; }
.marco-rayo { --marco: #f7d02c; }
.marco-hoja { --marco: #7ac74c; }
.marco-hielo { --marco: #96d9d6; }
.marco-lucha { --marco: #c22e28; }
.marco-veneno { --marco: #a33ea1; }
.marco-tierra { --marco: #e2bf65; }
.marco-volador { --marco: #a98ff3; }
.marco-psiquico { --marco: #f95587; }
.marco-bicho { --marco: #a6b91a; }
.marco-roca { --marco: #b6a136; }
.marco-sombra { --marco: #735797; }
.marco-dragon { --marco: #6f35fc; }
.marco-noche { --marco: #705746; }
.marco-acero { --marco: #b7b7ce; }
.marco-hada { --marco: #d685ad; }

/* Estelar: dos aros claros y unos destellos que giran alrededor */
.con-marco.marco-estelar {
  border-color: #fff6d5 !important;
  box-shadow:
    0 0 0 calc(var(--g) * 2) #3b3f7a,
    0 0 0 calc(var(--g) * 4) #fff6d5,
    calc(var(--g) * 9) calc(var(--g) * -5) 0 calc(var(--g) * -1) #fff,
    calc(var(--g) * -8) calc(var(--g) * 7) 0 calc(var(--g) * -1.5) #ffe58a,
    0 0 calc(var(--g) * 16) rgba(255, 240, 180, 0.6);
  animation: estelar 4s linear infinite;
}

@keyframes estelar {
  0%   { box-shadow: 0 0 0 calc(var(--g) * 2) #3b3f7a, 0 0 0 calc(var(--g) * 4) #fff6d5, calc(var(--g) * 9) calc(var(--g) * -5) 0 calc(var(--g) * -1) #fff, calc(var(--g) * -8) calc(var(--g) * 7) 0 calc(var(--g) * -1.5) #ffe58a, 0 0 calc(var(--g) * 16) rgba(255, 240, 180, 0.6); }
  50%  { box-shadow: 0 0 0 calc(var(--g) * 2) #3b3f7a, 0 0 0 calc(var(--g) * 4) #fff6d5, calc(var(--g) * -9) calc(var(--g) * 5) 0 calc(var(--g) * -1) #fff, calc(var(--g) * 8) calc(var(--g) * -7) 0 calc(var(--g) * -1.5) #ffe58a, 0 0 calc(var(--g) * 22) rgba(255, 240, 180, 0.8); }
  100% { box-shadow: 0 0 0 calc(var(--g) * 2) #3b3f7a, 0 0 0 calc(var(--g) * 4) #fff6d5, calc(var(--g) * 9) calc(var(--g) * -5) 0 calc(var(--g) * -1) #fff, calc(var(--g) * -8) calc(var(--g) * 7) 0 calc(var(--g) * -1.5) #ffe58a, 0 0 calc(var(--g) * 16) rgba(255, 240, 180, 0.6); }
}

@media (prefers-reduced-motion: reduce) {
  .con-marco.marco-estelar {
    animation: none;
  }
}

.con-marco.marco-arcoiris {
  border-color: #e0574a !important;
  box-shadow: 0 0 0 calc(var(--g) * 0.9) #f0a53c, 0 0 0 calc(var(--g) * 1.8) #f1d54a, 0 0 0 calc(var(--g) * 2.7) #6fbf4a, 0 0 0 calc(var(--g) * 3.6) #5aa8e0, 0 0 0 calc(var(--g) * 4.5) #9a6fd8;
}

.con-marco.marco-dorado {
  border-color: #f1c40f !important;
  box-shadow: 0 0 0 calc(var(--g) * 2) #8a6a08, 0 0 0 calc(var(--g) * 4) #f6e08a, 0 0 calc(var(--g) * 16) rgba(241, 196, 15, 0.55);
}

/* ---------- Supereficaz ---------- */

.juego-empezar,
.masomenos-botones button,
.juegos-compartir {
  padding: 0.55rem 1.1rem;
  border: none;
  border-radius: 0.5rem;
  background: rgb(var(--color-vista));
  color: var(--t-tinta);
  font-weight: bold;
  cursor: pointer;
}

.eficaz-reloj {
  height: 0.4rem;
  margin-bottom: 0.8rem;
  border-radius: 1rem;
  background: var(--t-control);
  overflow: hidden;
}

.eficaz-reloj span {
  display: block;
  height: 100%;
  background: rgb(var(--color-vista));
  transition: width 0.2s linear;
}

.eficaz-rival {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.6rem 0.8rem;
  border-radius: 0.6rem;
  background: var(--t-panel-3);
}

.eficaz-rival img {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.5rem;
}

.eficaz-rival strong {
  display: block;
  font-size: 1.1rem;
}

.eficaz-tipos {
  display: flex;
  gap: 0.35rem;
  margin-top: 0.2rem;
}

.eficaz-tipo {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1rem 0.5rem;
  border-radius: 1rem;
  background: var(--color-tipo);
  color: #fff;
  font-size: 0.78rem;
  font-weight: bold;
}

.eficaz-ronda {
  margin-left: auto;
  color: var(--t-gris);
  font-weight: bold;
}

.eficaz-opciones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-top: 0.8rem;
}

/* Cada opción, con la capa de color de su tipo a la izquierda */
.eficaz-opciones button {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.65rem 0.8rem;
  border: none;
  border-radius: 0.5rem;
  background: var(--t-control);
  box-shadow: inset 4px 0 0 var(--color-tipo);
  color: var(--t-texto);
  font-weight: bold;
  cursor: pointer;
}

.eficaz-opciones button:hover {
  background: var(--t-control-2);
}

.eficaz-opciones .icono-tipo,
.eficaz-tipo .icono-tipo {
  background: currentColor;
}

.eficaz-opciones .icono-tipo {
  width: 1rem;
  height: 1rem;
  background: var(--color-tipo);
}

/* ---------- ¿Más o menos? ----------
   La pregunta arriba, sobre el de la derecha; a la izquierda el que ya se sabe y a la derecha
   el que hay que adivinar (con la capa de color y los botones dentro) */

.masomenos-pregunta {
  margin: 0 0 0.8rem;
  font-size: 1.05rem;
  text-align: center;
}

.masomenos-duelo {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 0.8rem;
  margin-bottom: 0.6rem;
}

.masomenos-lado {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.8rem 0.6rem;
  border-radius: 0.8rem;
  background: var(--t-panel-3);
  text-align: center;
}

.masomenos-lado.adivinar {
  background: rgba(var(--color-vista), 0.1);
  box-shadow: inset 0 0 0 2px rgba(var(--color-vista), 0.55);
}

.masomenos-etiqueta {
  color: var(--t-gris);
  font-size: 0.72rem;
  font-weight: bold;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.masomenos-lado img {
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 0.6rem;
}

.masomenos-lado strong {
  font-size: 1.05rem;
}

.masomenos-lado small {
  color: var(--t-gris-2);
  font-weight: bold;
}

.masomenos-valor {
  font-family: var(--letra-titulos);
  font-size: 2.2rem;
  font-weight: bold;
  line-height: 1;
}

.masomenos-valor.oculto {
  color: color-mix(in srgb, rgb(var(--color-vista)) var(--t-vivo), black);
}

/* Recién respondida: lo que tenía, en verde si has acertado y en rojo si no */
.masomenos-lado.bien {
  background: rgba(var(--t-bien-rgb), 0.1);
  box-shadow: inset 0 0 0 2px rgba(var(--t-bien-rgb), 0.55);
}

.masomenos-lado.mal {
  background: rgba(var(--t-mal-rgb), 0.1);
  box-shadow: inset 0 0 0 2px rgba(var(--t-mal-rgb), 0.55);
}

.masomenos-lado:is(.bien, .mal) .masomenos-valor {
  animation: masomenos-sale 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.3);
}

@keyframes masomenos-sale {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .masomenos-lado:is(.bien, .mal) .masomenos-valor {
    animation: none;
  }
}

.masomenos-veredicto {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 2.6rem; /* lo que ocupan los botones: que la tarjeta no cambie de alto */
  margin: 0.4rem 0 0;
  font-weight: bold;
}

.masomenos-lado.bien .masomenos-veredicto { color: var(--t-bien); }
.masomenos-lado.mal .masomenos-veredicto { color: var(--t-mal); }

.masomenos-veredicto .icono {
  width: 1.1rem;
  height: 1.1rem;
}

.masomenos-vs {
  align-self: center;
  color: var(--t-gris);
  font-size: 0.85rem;
  font-weight: bold;
}

.masomenos-botones {
  display: flex;
  gap: 0.4rem;
  width: 100%;
  margin-top: 0.4rem;
}

.masomenos-botones button {
  display: inline-flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.6rem 0.4rem;
  font-size: 1rem;
}

/* ---------- Compartir ---------- */

/* El reto a la izquierda y, a su lado, la columna de compartir (debajo, si no cabe) */
.retos-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 21rem);
  gap: 1rem;
  align-items: start;
}

.retos-cuerpo:has(.juego-locke) {
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 21rem);
}

@media (max-width: 1100px) {
  .retos-cuerpo,
  .retos-cuerpo:has(.juego-locke) {
    grid-template-columns: minmax(0, 1fr);
  }
}

.juegos-pie {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 1rem 1.1rem;
  border-radius: 14px;
  background: var(--t-panel);
}

.juegos-pie h3 {
  margin: 0;
  font-size: 1.1rem;
}

.juegos-pie .juegos-nota {
  margin: 0;
}

.juegos-compartir {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.juegos-copiado {
  color: color-mix(in srgb, rgb(var(--color-vista)) var(--t-vivo), black);
  font-weight: bold;
  font-size: 0.9rem;
}

/* ---------- Clasificación ---------- */

.clasificacion h2 {
  margin: 0;
  font-size: 1.25rem;
}

.clasificacion-lista {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.clasificacion-fila {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.55rem 0.9rem;
  border-radius: 14px;
  background: var(--t-panel);
}

.clasificacion-fila.mia {
  box-shadow: inset 3px 0 0 rgb(var(--color-vista));
}

.clasificacion-puesto {
  width: 1.6rem;
  font-family: var(--letra-titulos);
  font-size: 1.3rem;
  font-weight: bold;
  text-align: center;
  color: var(--t-gris);
}

.podio-1 .clasificacion-puesto { color: #f1c40f; }
.podio-2 .clasificacion-puesto { color: #c3cad6; }
.podio-3 .clasificacion-puesto { color: #cd7f32; }

.clasificacion-foto {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border: 2px solid var(--t-azulado);
  border-radius: 50%;
  background: var(--t-fondo);
  overflow: hidden;
  font-weight: bold;
  cursor: pointer;
}

.clasificacion-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.clasificacion-quien {
  flex: 1;
  min-width: 0;
}

.clasificacion-quien strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.clasificacion-quien small {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  color: var(--t-gris);
}

.clasificacion-quien .icono {
  width: 0.8rem;
  height: 0.8rem;
}

.clasificacion-hoy {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  color: var(--t-bien);
}

.clasificacion-fila .ficha-cifra {
  font-size: 1.15rem;
}

/* ---------- Locke del día ----------
   Ocupa todo el ancho: el líder arriba, tus seis debajo y el combate línea a línea */

.juego-locke {
}

.lockedia-lider {
  padding: 0.7rem 0.9rem;
  border-radius: 0.6rem;
  background: color-mix(in srgb, var(--color-tipo) 14%, var(--t-panel-3));
  box-shadow: inset 3px 0 0 var(--color-tipo);
}

.lockedia-lider-titulo {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
  font-weight: bold;
}

.lockedia-lider-titulo .icono-tipo {
  width: 1rem;
  height: 1rem;
  background: var(--color-tipo);
}

/* Seis columnas iguales: los tres del líder, los tuyos y los seis para elegir, alineados */
.lockedia-equipo,
.lockedia-tu-equipo,
.lockedia-opciones {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.5rem;
}

@media (max-width: 700px) {
  .lockedia-equipo,
  .lockedia-tu-equipo,
  .lockedia-opciones {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.juego-locke .juego-explicacion {
  margin: 0.8rem 0;
}

.lockedia-tu-equipo {
  margin-top: 0.8rem;
}

.lockedia-opciones {
  margin-bottom: 0.8rem;
}

.lockedia-poke {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.5rem;
  border: 2px solid transparent;
  border-radius: 0.6rem;
  background: var(--t-panel-2);
  color: var(--t-texto);
  font: inherit;
  text-align: center;
}

button.lockedia-poke {
  cursor: pointer;
}

button.lockedia-poke:hover {
  background: var(--t-panel-4);
}

.lockedia-poke.elegido {
  border-color: rgb(var(--color-vista));
}

.lockedia-poke img {
  width: 3rem;
  height: 3rem;
  border-radius: 0.5rem;
}

.lockedia-poke strong {
  font-size: 0.9rem;
}

.lockedia-poke small {
  color: var(--t-gris);
  font-size: 0.75rem;
}

.lockedia-tipos {
  display: flex;
  gap: 0.25rem;
}

.lockedia-tipos .icono-tipo {
  width: 0.95rem;
  height: 0.95rem;
  background: var(--color-tipo);
}

.lockedia-orden {
  position: absolute;
  top: 0.3rem;
  left: 0.3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: rgb(var(--color-vista));
  color: var(--t-tinta);
  font-weight: bold;
  font-size: 0.8rem;
}

.lockedia-combatir {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.lockedia-combatir:disabled {
  opacity: 0.45;
  cursor: default;
}

/* Los tuyos que cayeron en el combate: en gris, como en el cementerio */
.lockedia-poke.caido {
  border-color: transparent;
  opacity: 0.5;
  filter: grayscale(1);
}

/* ---------- La arena del Locke del día ----------
   Tu Pokémon a la izquierda y el del líder a la derecha, con los tres de cada lado encima */

.lockedia-arena {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-radius: 0.8rem;
  background:
    radial-gradient(ellipse at 25% 85%, rgba(var(--color-vista), 0.16), transparent 45%),
    radial-gradient(ellipse at 75% 85%, rgba(var(--t-tinte), 0.06), transparent 45%),
    var(--t-panel-3);
}

.lockedia-lado {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.lockedia-lado strong {
  font-size: 1.05rem;
}

.lockedia-lado small {
  color: var(--t-gris);
  font-size: 0.78rem;
}

.lockedia-banca {
  display: flex;
  gap: 0.3rem;
  margin-bottom: 0.3rem;
}

.lockedia-banca-poke {
  display: flex;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--t-panel-2);
  box-shadow: 0 0 0 2px var(--t-control);
  overflow: hidden;
}

.lockedia-banca-poke.activo {
  box-shadow: 0 0 0 2px rgb(var(--color-vista));
}

.lockedia-banca-poke.caido {
  opacity: 0.4;
  filter: grayscale(1);
}

.lockedia-banca-poke img {
  width: 100%;
  height: 100%;
}

.lockedia-luchador img {
  display: block;
  width: 6rem;
  height: 6rem;
  border-radius: 0.8rem;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}

/* El que pega va hacia el rival; el que recibe se agita; el que cae se encoge y se apaga (sin
   moverse de su sitio: así no tapa su nombre) */
.lockedia-lado.yo .lockedia-luchador.embiste { animation: embiste-derecha 0.45s ease-out; }
.lockedia-lado.el .lockedia-luchador.embiste { animation: embiste-izquierda 0.45s ease-out; }
.lockedia-luchador.sacude { animation: sacude 0.5s ease-in-out 0.2s; }
.lockedia-luchador.debilitado {
  animation: cae 0.6s ease-in forwards;
}

@keyframes embiste-derecha {
  40% { transform: translateX(1.6rem) scale(1.05); }
}

@keyframes embiste-izquierda {
  40% { transform: translateX(-1.6rem) scale(1.05); }
}

@keyframes sacude {
  0%, 100% { transform: none; filter: none; }
  20% { transform: translateX(-0.4rem) rotate(-4deg); filter: brightness(1.8); }
  40% { transform: translateX(0.4rem) rotate(4deg); }
  60% { transform: translateX(-0.3rem) rotate(-2deg); filter: brightness(1.5); }
  80% { transform: translateX(0.2rem); }
}

@keyframes cae {
  to { transform: scale(0.88); opacity: 0.4; filter: grayscale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .lockedia-luchador.embiste,
  .lockedia-luchador.sacude {
    animation: none;
  }
}

.lockedia-ps {
  width: min(100%, 11rem);
  height: 0.55rem;
  border-radius: 1rem;
  background: var(--t-control);
  overflow: hidden;
}

.lockedia-ps span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--t-bien);
  transition: width 0.6s ease 0.2s;
}

.lockedia-ps span.amarillo { background: var(--t-casi); }
.lockedia-ps span.rojo { background: var(--t-mal); }

#vista-juegos .lockedia-contra .icono {
  width: 1.8rem;
  height: 1.8rem;
  color: var(--t-gris-4);
}

.lockedia-mensaje {
  min-height: 1.4rem;
  margin: 0.7rem 0 0;
  padding: 0.55rem 0.8rem;
  border-radius: 0.6rem;
  background: var(--t-panel-2);
  box-shadow: inset 3px 0 0 var(--t-gris-4);
  font-weight: bold;
}

.lockedia-mensaje.mio { box-shadow: inset 3px 0 0 rgb(var(--color-vista)); }
.lockedia-mensaje.cae-suyo { box-shadow: inset 3px 0 0 var(--t-bien); color: color-mix(in srgb, var(--t-bien) var(--t-vivo), black); }
.lockedia-mensaje.cae-mio { box-shadow: inset 3px 0 0 var(--t-mal); color: var(--t-mal); }

/* El combate entero, plegado */
.lockedia-registro {
  margin-top: 0.8rem;
  color: var(--t-gris-3);
  font-size: 0.88rem;
}

.lockedia-registro summary {
  cursor: pointer;
  color: var(--t-gris-2);
  font-weight: bold;
}

.lockedia-registro ol {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0.5rem 0 0;
  padding-left: 1.4rem;
}

.lockedia-registro .cae-suyo { color: color-mix(in srgb, var(--t-bien) var(--t-vivo), black); font-weight: bold; }
.lockedia-registro .cae-mio { color: var(--t-mal); font-weight: bold; }

/* ---------- En ancho (ordenador): cada reto aprovecha el espacio a lo horizontal ---------- */

.silueta-cuerpo,
.eficaz-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 1.2rem;
  align-items: start;
}

.silueta-lado .juego-explicacion {
  margin-top: 0;
}

.silueta-lado .juego-form {
  margin-top: 0;
}

.eficaz-cuerpo .eficaz-rival {
  flex-direction: column;
  justify-content: center;
  min-height: 11rem;
  text-align: center;
}

.eficaz-cuerpo .eficaz-rival img {
  width: 5.5rem;
  height: 5.5rem;
}

.eficaz-cuerpo .eficaz-tipos {
  justify-content: center;
}

.eficaz-cuerpo .eficaz-ronda {
  margin-left: 0;
}

.eficaz-cuerpo .eficaz-opciones {
  margin-top: 0;
  grid-template-columns: 1fr;
}

.eficaz-cuerpo .eficaz-opciones button {
  padding: 0.85rem 1rem;
  font-size: 1rem;
}

@media (max-width: 760px) {
  .silueta-cuerpo,
  .eficaz-cuerpo {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Clasificación: la lista y, al lado, tu semana */
.clasificacion-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 21rem);
  gap: 1rem;
  align-items: start;
}

@media (max-width: 1100px) {
  .clasificacion-cuerpo {
    grid-template-columns: minmax(0, 1fr);
  }
}

.clasificacion-dato {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  width: 100%;
}

.clasificacion-dato > span:first-child {
  flex: 1;
  color: var(--t-gris-2);
}

.clasificacion-dato strong {
  font-family: var(--letra-titulos);
  font-size: 1.2rem;
}

.clasificacion-dato small {
  color: var(--t-gris);
}

/* La versión corta, en la columna de los retos */
.clasificacion-lista.corta {
  width: 100%;
  gap: 0.3rem;
}

.clasificacion-lista.corta .clasificacion-fila {
  gap: 0.55rem;
  padding: 0.35rem 0.6rem;
  background: var(--t-panel-3);
}

.clasificacion-lista.corta .clasificacion-foto {
  width: 2rem;
  height: 2rem;
}

.clasificacion-lista.corta .clasificacion-puesto {
  width: 1.1rem;
  font-size: 1rem;
}

.juegos-ver-clasificacion {
  padding: 0.45rem 0.9rem;
  border: none;
  border-radius: 0.5rem;
  background: var(--t-control);
  color: var(--t-texto);
  font-weight: bold;
  cursor: pointer;
}

.juegos-ver-clasificacion:hover {
  background: var(--t-control-2);
}

/* Copiar los resultados: discreto, como un enlace */
.juegos-compartir-enlace {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0;
  border: none;
  background: none;
  color: var(--t-gris-2);
  font-size: 0.85rem;
  cursor: pointer;
}

.juegos-compartir-enlace:hover {
  color: var(--t-texto);
  text-decoration: underline;
}

/* ---------- Más marcos y fondos de la Tienda ---------- */

.con-marco.marco-plata {
  border-color: #dfe4ec !important;
  box-shadow: 0 0 0 calc(var(--g) * 2) #7d8597, 0 0 0 calc(var(--g) * 4) #c3cad6;
}

.con-marco.marco-platino {
  border-color: #7fe0f0 !important;
  box-shadow: 0 0 0 calc(var(--g) * 2) #2d8a99, 0 0 0 calc(var(--g) * 4) #c8f5fc, 0 0 0 calc(var(--g) * 6) #7fe0f0, 0 0 calc(var(--g) * 18) rgba(127, 224, 240, 0.6);
}

/* ---------- ¿Quién es ese Pokémon?: tres rondas ---------- */

.silueta-numero,
.silueta-nombre {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.15rem 0.7rem;
  border-radius: 1rem;
  background: rgba(30, 31, 43, 0.75);
  color: #fff;
  font-size: 0.8rem;
  font-weight: bold;
  white-space: nowrap;
}

.silueta-numero {
  top: 0.6rem;
}

.silueta-nombre {
  bottom: 0.6rem;
  font-size: 1rem;
}

.silueta-rondas {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0 0 0.9rem;
  padding: 0;
  list-style: none;
}

.silueta-ronda {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  min-height: 2.6rem;
  padding: 0.35rem 0.8rem;
  border-radius: 0.6rem;
  background: var(--t-panel-3);
}

.silueta-ronda.actual {
  background: rgba(var(--color-vista), 0.12);
  box-shadow: inset 3px 0 0 rgb(var(--color-vista));
}

.silueta-ronda strong {
  display: flex;
  flex-direction: column;
  font-size: 0.95rem;
  line-height: 1.15;
}

.silueta-ronda strong small {
  color: var(--t-gris);
  font-size: 0.72rem;
  font-weight: normal;
}

.silueta-ronda-detalle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: bold;
  font-size: 0.9rem;
}

.silueta-ronda-detalle img {
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 0.4rem;
}

.silueta-ronda-detalle small {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  color: var(--t-gris);
}

.silueta-ronda-detalle small.bien { color: color-mix(in srgb, rgb(var(--color-vista)) var(--t-vivo), black); }
.silueta-ronda-detalle small.mal { color: var(--t-mal); }
.silueta-ronda-detalle .apagado { color: var(--t-gris); font-weight: normal; }

.silueta-pistas {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0.8rem 0 0;
  padding: 0;
  list-style: none;
}

.silueta-pistas li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.7rem;
  border-radius: 0.5rem;
  background: var(--t-panel-3);
  color: var(--t-gris-3);
  font-size: 0.9rem;
}

.silueta-pistas li .icono {
  color: color-mix(in srgb, rgb(var(--color-vista)) var(--t-vivo), black);
}

.silueta-pistas li.cerrada {
  color: var(--t-gris);
  font-style: italic;
}

.silueta-pistas li.cerrada .icono {
  color: var(--t-gris-4);
}

/* ---------- Retos tipo test (grito, evolución) ----------
   La pregunta a la izquierda y las cuatro opciones a la derecha (en ordenador) */

.test-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 1.2rem;
  align-items: stretch;
}

@media (max-width: 760px) {
  .test-cuerpo {
    grid-template-columns: minmax(0, 1fr);
  }
}

.test-pregunta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  min-height: 14rem;
  padding: 1rem;
  border-radius: 0.8rem;
  background: var(--t-panel-3);
}

.test-ronda {
  color: var(--t-gris);
  font-size: 0.78rem;
  font-weight: bold;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.test-opciones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

.test-opcion {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.8rem 0.5rem;
  border: 2px solid transparent;
  border-radius: 0.8rem;
  background: var(--t-panel-2);
  color: var(--t-texto);
  font: inherit;
  font-weight: bold;
  cursor: pointer;
}

.test-opcion:hover:not(:disabled) {
  background: var(--t-panel-4);
  border-color: rgba(var(--color-vista), 0.5);
}

.test-opcion:disabled {
  cursor: default;
}

.test-opcion img {
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 0.6rem;
}

.test-opcion.buena {
  border-color: var(--t-bien);
  background: rgba(var(--t-bien-rgb), 0.18);
}

.test-opcion.mala {
  border-color: var(--t-mal);
  background: rgba(var(--t-mal-rgb), 0.18);
}

.test-resumen {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.test-resumen li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.7rem;
  border-radius: 0.6rem;
  background: var(--t-panel-3);
  box-shadow: inset 3px 0 0 var(--t-bien);
  font-weight: bold;
  font-size: 0.9rem;
}

.test-resumen li.mal {
  box-shadow: inset 3px 0 0 var(--t-mal);
}

.test-resumen img {
  width: 2rem;
  height: 2rem;
  border-radius: 0.4rem;
}

.test-resumen li span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.test-resumen li.bien .icono { color: var(--t-bien); }
.test-resumen li.mal .icono { color: var(--t-mal); }

/* El botón de escuchar el grito: grande y redondo; mientras suena, late */
.grito-escuchar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  width: 7.5rem;
  height: 7.5rem;
  border: none;
  border-radius: 50%;
  background: rgb(var(--color-vista));
  color: var(--t-tinta);
  font: inherit;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}

#vista-juegos .grito-escuchar .icono {
  width: 2.4rem;
  height: 2.4rem;
}

.grito-escuchar.sonando {
  animation: late 0.6s ease-in-out infinite alternate;
}

@keyframes late {
  to { transform: scale(1.07); box-shadow: 0 0 0 10px rgba(var(--color-vista), 0.2); }
}

@media (prefers-reduced-motion: reduce) {
  .grito-escuchar.sonando {
    animation: none;
  }
}

.evolucion-padre {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

.evolucion-padre img {
  width: 6rem;
  height: 6rem;
  border-radius: 0.8rem;
}

.evolucion-padre strong {
  font-size: 1.2rem;
}

.evolucion-padre span {
  color: var(--t-gris-2);
}

/* El porqué de la buena (El intruso): debajo de la pregunta al responder, y en la lista del final */
.test-explicacion {
  margin: 0;
  color: var(--t-gris-2);
  font-weight: bold;
  text-align: center;
}

.test-resumen li span small {
  display: block;
  white-space: normal; /* el porqué entero, aunque ocupe dos líneas */
  color: var(--t-gris);
  font-size: 0.75rem;
  font-weight: normal;
}

/* ---------- El intruso ---------- */

.intruso-pregunta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}

#vista-juegos .intruso-pregunta .icono {
  width: 3rem;
  height: 3rem;
  color: color-mix(in srgb, rgb(var(--color-vista)) var(--t-vivo), black);
}

.intruso-pregunta strong {
  font-size: 1.2rem;
}

/* ---------- ¿De qué tipo es? ----------
   Los 18 tipos en tres columnas, con la capa de color de cada uno a la izquierda (como en
   Supereficaz); el marcado, relleno de su color. Al comprobar: borde verde los buenos que
   marcaste, rojo los que sobraban y discontinuo los que te faltaron. */

.tipos-lado {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.tipos-opciones {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.4rem;
}

.tipos-opciones button {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  padding: 0.5rem 0.6rem;
  border: 2px solid transparent;
  border-radius: 0.5rem;
  background: var(--t-control);
  box-shadow: inset 4px 0 0 var(--color-tipo);
  color: var(--t-texto);
  font: inherit;
  font-size: 0.88rem;
  font-weight: bold;
  cursor: pointer;
}

.tipos-opciones button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tipos-opciones button:hover:not(:disabled) {
  background: var(--t-control-2);
}

.tipos-opciones button:disabled {
  cursor: default;
}

.tipos-opciones .icono-tipo {
  flex: none;
  width: 1rem;
  height: 1rem;
  background: var(--color-tipo);
}

.tipos-opciones button.elegido {
  background: var(--color-tipo);
  color: #fff;
}

.tipos-opciones button.elegido .icono-tipo {
  background: #fff;
}

.tipos-opciones button.buena {
  border-color: var(--t-bien);
  background: rgba(var(--t-bien-rgb), 0.18);
}

.tipos-opciones button.mala {
  border-color: var(--t-mal);
  background: rgba(var(--t-mal-rgb), 0.18);
}

.tipos-opciones button.faltaba {
  border-style: dashed;
  border-color: var(--t-bien);
}

.tipos-comprobar {
  align-self: flex-end;
}

.tipos-comprobar:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Más preciso que «.test-resumen li span», que la estiraría */
.test-resumen .tipos-resumen {
  display: flex;
  flex: none;
  gap: 0.2rem;
}

.tipos-resumen .icono-tipo {
  display: block;
  width: 0.95rem;
  height: 0.95rem;
  background: var(--color-tipo);
}

@media (max-width: 420px) {
  .tipos-opciones {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* «Volver a intentarlo», en el aviso de que no se han podido apuntar los Pokédólares */
.juego-reintentar {
  margin-left: 0.4rem;
  padding: 0.25rem 0.7rem;
  border: none;
  border-radius: 0.4rem;
  background: rgb(var(--color-vista));
  color: var(--t-tinta);
  font: inherit;
  font-size: 0.85rem;
  font-weight: bold;
  cursor: pointer;
}

.juego-reintentar:disabled {
  opacity: 0.5;
}

/* ---------- Colección (js/juegos/coleccion.js) ---------- */

/* El huevo, dibujado con CSS: crema con manchas verdes y una sombra en un lado */
.huevo-dibujo {
  display: inline-block;
  flex: none;
  width: 2.4rem;
  height: 3rem;
  border-radius: 50% 50% 50% 50% / 60% 60% 42% 42%;
  background:
    radial-gradient(circle at 32% 30%, #6fbf4a 0 13%, transparent 14%),
    radial-gradient(circle at 68% 48%, #6fbf4a 0 11%, transparent 12%),
    radial-gradient(circle at 40% 72%, #6fbf4a 0 9%, transparent 10%),
    radial-gradient(ellipse at 30% 25%, #fffdf3, #f3e8c8 60%, #d8c79c);
  box-shadow: inset -0.35rem -0.25rem 0 rgba(0, 0, 0, 0.12), 0 4px 10px rgba(0, 0, 0, 0.35);
}

.huevo-dibujo.grande {
  width: 3.6rem;
  height: 4.5rem;
}

.coleccion-cabeza {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 1rem;
  margin-bottom: 1rem;
}

@media (max-width: 900px) {
  .coleccion-cabeza {
    grid-template-columns: minmax(0, 1fr);
  }
}

.coleccion-progreso,
.coleccion-huevos {
  padding: 1rem 1.2rem;
  border-radius: 14px;
  background: var(--t-panel);
}

.coleccion-progreso {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
  box-shadow: inset 3px 0 0 rgb(var(--color-vista));
}

.coleccion-cuenta {
  color: var(--t-gris-2);
}

.coleccion-cuenta strong {
  font-family: var(--letra-titulos);
  font-size: 2rem;
  color: var(--t-texto);
}

.coleccion-progreso small {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: #e6b422;
  font-weight: bold;
}

.coleccion-huevos {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.6rem 1.1rem;
}

.coleccion-comprar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.coleccion-comprar button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border: none;
  border-radius: 0.5rem;
  background: rgb(var(--color-vista));
  color: var(--t-tinta);
  font: inherit;
  font-weight: bold;
  cursor: pointer;
}

.coleccion-comprar button:disabled {
  opacity: 0.45;
  cursor: default;
}

.coleccion-reglas {
  grid-column: 1 / -1;
  color: var(--t-gris);
  font-size: 0.82rem;
}

/* Lo que sale: primero los huevos agitándose; luego cada uno se abre y enseña su Pokémon */
.coleccion-salidos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  gap: 0.6rem;
  margin-bottom: 1rem;
  padding: 0.9rem;
  border-radius: 14px;
  background: var(--t-panel);
}

.coleccion-sale {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 8rem;
  padding: 0.5rem;
  border-radius: 0.8rem;
  background: var(--t-panel-3);
  text-align: center;
}

.coleccion-sale .huevo-dibujo {
  position: absolute;
  width: 3rem;
  height: 3.8rem;
}

.coleccion-sale-dentro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  opacity: 0;
}

.coleccion-salidos.agitando .huevo-dibujo {
  animation: agita 0.3s ease-in-out infinite alternate;
}

.coleccion-salidos.abriendo .huevo-dibujo {
  animation: abre 0.35s ease-in forwards;
  animation-delay: var(--retraso);
}

.coleccion-salidos.abriendo .coleccion-sale-dentro {
  animation: aparece 0.4s ease-out forwards;
  animation-delay: calc(var(--retraso) + 0.25s);
}

.coleccion-salidos.quietos .huevo-dibujo {
  display: none;
}

.coleccion-salidos.quietos .coleccion-sale-dentro {
  opacity: 1;
}

@keyframes agita {
  from { transform: rotate(-9deg); }
  to { transform: rotate(9deg); }
}

@keyframes abre {
  to { transform: scale(1.4); opacity: 0; }
}

@keyframes aparece {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .coleccion-salidos.agitando .huevo-dibujo {
    animation: none;
  }
}

.coleccion-sale-foto {
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 0.6rem;
}

.coleccion-sale strong {
  font-size: 0.9rem;
}

.coleccion-sale small {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  color: var(--t-gris);
  font-size: 0.75rem;
  font-weight: bold;
}

.coleccion-sale.nuevo {
  box-shadow: inset 0 0 0 2px rgb(var(--color-vista));
}

.coleccion-sale.nuevo small {
  color: color-mix(in srgb, rgb(var(--color-vista)) var(--t-vivo), black);
}

.coleccion-sale.shiny {
  box-shadow: inset 0 0 0 2px #e6b422, 0 0 14px rgba(230, 180, 34, 0.45);
}

.coleccion-sale.shiny small {
  color: #e6b422;
}

/* La rejilla de una generación */
.coleccion-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
}

.coleccion-gens {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.coleccion-gens button {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  padding: 0.4rem 0.7rem;
  border: none;
  border-radius: 0.5rem;
  background: var(--t-panel);
  color: var(--t-texto);
  font: inherit;
  font-weight: bold;
  font-size: 0.88rem;
  cursor: pointer;
}

.coleccion-gens button small {
  color: var(--t-gris);
  font-weight: normal;
}

.coleccion-gens button.activa {
  background: rgba(var(--color-vista), 0.18);
  box-shadow: inset 3px 0 0 rgb(var(--color-vista));
}

.coleccion-gens button.completa small {
  color: color-mix(in srgb, rgb(var(--color-vista)) var(--t-vivo), black);
  font-weight: bold;
}

.coleccion-shiny {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--t-gris-2);
  font-weight: bold;
  cursor: pointer;
}

.coleccion-nota {
  margin: 0 0 0.6rem;
  color: var(--t-gris);
  font-size: 0.85rem;
}

.coleccion-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.6rem, 1fr));
  gap: 0.45rem;
}

.coleccion-casilla {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0.25rem 0.35rem;
  border-radius: 0.7rem;
  background: var(--t-panel);
}

.coleccion-foto {
  display: block;
  width: 3rem;
  height: 3rem;
  border-radius: 0.5rem;
  image-rendering: pixelated;
}

/* Los de la hoja de retratos de la Pokédex (como en css/pokedex.css) */
.coleccion-foto.en-hoja,
.coleccion-sale-foto.en-hoja {
  --hoja-columnas: 40;
  --hoja-filas: 5;
  background-size: calc(var(--hoja-columnas) * 100%) calc(var(--hoja-filas) * 100%);
  background-position:
    calc(var(--columna) / (var(--hoja-columnas) - 1) * 100%)
    calc(var(--fila) / max(var(--hoja-filas) - 1, 1) * 100%);
}

/* Los que faltan: un hueco con «?» (los retratos tienen fondo: en silueta saldría un cuadrado) */
.coleccion-foto.vacia {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px dashed rgba(var(--t-tinte), 0.18);
  box-sizing: border-box;
  color: rgba(var(--t-texto-rgb), 0.3);
  font-family: var(--letra-titulos);
  font-size: 1.3rem;
  font-weight: bold;
}

.coleccion-numero {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.72rem;
  font-weight: bold;
}

.coleccion-casilla.falta .coleccion-numero {
  color: var(--t-gris);
  font-weight: normal;
}

.coleccion-veces {
  position: absolute;
  top: 0.25rem;
  right: 0.35rem;
  color: var(--t-gris-2);
  font-size: 0.7rem;
  font-weight: bold;
}

.coleccion-casilla.shiny {
  box-shadow: inset 0 0 0 1.5px #e6b422;
}

/* ---------- Colección: el aspecto de cada uno ---------- */

/* Las tuyas son botones: al pulsarlas se elige su cara (y si en shiny) */
button.coleccion-casilla {
  border: none;
  color: var(--t-texto);
  font: inherit;
  cursor: pointer;
}

button.coleccion-casilla:hover {
  background: var(--t-panel-3);
}

/* La estrellita de las que tienes shiny */
.coleccion-estrella {
  position: absolute;
  top: 0.25rem;
  left: 0.35rem;
  display: inline-flex;
  color: #e6b422;
}

#vista-juegos .coleccion-estrella .icono {
  width: 0.85rem;
  height: 0.85rem;
}

.coleccion-todas-shiny {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.9rem;
  border: none;
  border-radius: 0.5rem;
  background: var(--t-panel);
  box-shadow: inset 0 0 0 1.5px rgba(230, 180, 34, 0.6);
  color: var(--t-texto);
  font: inherit;
  font-weight: bold;
  font-size: 0.88rem;
  cursor: pointer;
}

.coleccion-todas-shiny .icono {
  width: 1rem;
  height: 1rem;
  color: #e6b422;
}

.coleccion-todas-shiny:disabled {
  opacity: 0.5;
}

/* La ventana para elegir la cara */
.dialogo-aspecto {
  width: min(34rem, 94vw);
}

.aspecto-versiones {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}

.aspecto-versiones button {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.45rem 1rem;
  border: none;
  border-radius: 0.5rem;
  background: var(--t-control);
  color: var(--t-texto);
  font: inherit;
  font-weight: bold;
  cursor: pointer;
}

.aspecto-versiones button.activa {
  background: rgb(76, 182, 92);
  color: var(--t-tinta);
}

.aspecto-versiones button:disabled {
  opacity: 0.4;
  cursor: default;
}

.aspecto-versiones .icono {
  width: 1rem;
  height: 1rem;
}

.aspecto-caras {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.2rem, 1fr));
  gap: 0.45rem;
}

.aspecto-cara {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem;
  border: 2px solid transparent;
  border-radius: 0.6rem;
  background: var(--t-panel-3);
  cursor: pointer;
}

.aspecto-cara:hover {
  border-color: rgba(76, 182, 92, 0.6);
}

.aspecto-cara.elegida {
  border-color: rgb(76, 182, 92);
}

/* Las caras que Mundo Misterioso no tiene: se queda el botón sin imagen y no se enseña */
.aspecto-cara:not(:has(img)) {
  display: none;
}

.aspecto-cara img {
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 0.4rem;
  image-rendering: pixelated;
}

/* Clasificación: las pestañas Esta semana / General (las de «Logros», css/logros.css) */
.clasificacion-filtro {
  margin-bottom: 0.6rem;
}

/* ---------- Títulos: plaquitas ----------
   Todos los títulos son una plaquita (css/logros.css, .perfil-titulo). Los de la Tienda llevan
   además su propio diseño (.placa-tienda.titulo-<id>, ver TITULOS en js/comun/fichas.js):
   sencillos (un color), detallados (degradados o dibujo) y animados. */

.perfil-titulo.placa-tienda {
  --placa-fondo: var(--t-panel-3);
  --placa-texto: var(--t-texto);
  --placa-borde: rgba(var(--t-tinte), 0.2);
  background: var(--placa-fondo);
  box-shadow: inset 0 0 0 1px var(--placa-borde), 0 2px 5px rgba(0, 0, 0, 0.25);
  color: var(--placa-texto);
}

/* Sencillos: un color cada uno, todos distintos (naranja, morado, amarillo, azul, granate y verde).
   Con «.perfil-titulo» delante: si no, el gris de .perfil-titulo.placa-tienda (más específico) les
   pisaba el color y salían todos grises. */
.perfil-titulo.titulo-ojo { --placa-fondo: #a3561a; --placa-texto: #fff0d6; --placa-borde: #e0904a; }
.perfil-titulo.titulo-detective { --placa-fondo: #4a2f6b; --placa-texto: #eadcff; --placa-borde: #8a66b8; }
.perfil-titulo.titulo-madrugador { --placa-fondo: #f5c66b; --placa-texto: #4a2a00; --placa-borde: #c9952e; }
.perfil-titulo.titulo-estratega { --placa-fondo: #24365e; --placa-texto: #cfe0ff; --placa-borde: #4a6aa8; }
.perfil-titulo.titulo-alma { --placa-fondo: #7a1f2b; --placa-texto: #ffd6d6; --placa-borde: #b5404f; }
.perfil-titulo.titulo-trotamundos { --placa-fondo: #2f5e3a; --placa-texto: #d8f5c8; --placa-borde: #5c9a66; }

/* Detallados */
.perfil-titulo.titulo-casino {
  --placa-borde: #d4af37;
  background: radial-gradient(ellipse at 50% 0%, #2f8a4e, #145c30 70%);
  color: #f6d65a;
}

.perfil-titulo.titulo-profesor {
  --placa-borde: #9fb3cc;
  background: repeating-linear-gradient(0deg, #f7f9fc 0 5px, #e3ebf5 5px 6px);
  color: #2a3550;
}

.perfil-titulo.titulo-racha {
  --placa-borde: #ffb347;
  background: linear-gradient(90deg, #e2401c, #ff7a18 45%, #ffb347);
  color: #3a1200;
}

.perfil-titulo.titulo-siluetas {
  --placa-borde: #4a4a4a;
  background: radial-gradient(circle at 50% 50%, #5a4a10, #111 70%);
  color: #ffe36e;
}

.perfil-titulo.titulo-tipos {
  --placa-borde: rgba(255, 255, 255, 0.4);
  background: linear-gradient(90deg, #ee8130, #f7d02c, #7ac74c, #6390f0, #a98ff3, #f95587);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

.perfil-titulo.titulo-calle {
  --placa-borde: #c9a646;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.08) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 70%, rgba(0, 0, 0, 0.3) 0 3px, transparent 4px),
    linear-gradient(#55524d, #3a3834);
  background-size: 14px 12px, 18px 14px, auto;
  color: #e9d18a;
}

/* Animados: un brillo que los cruza, o que late */
.perfil-titulo.titulo-coleccionista,
.perfil-titulo.titulo-leyenda,
.perfil-titulo.titulo-campeon {
  background-size: 250% 100%;
  animation: placa-brillo 3.5s linear infinite;
}

.perfil-titulo.titulo-coleccionista {
  --placa-borde: #7fe0f0;
  background-image: linear-gradient(110deg, #7fbcc6 20%, #e8fbff 40%, #7fbcc6 60%);
  color: #0f3940;
}

.perfil-titulo.titulo-leyenda {
  --placa-borde: #f1c40f;
  background-image: linear-gradient(110deg, #c9961a 20%, #fff3b0 40%, #c9961a 60%);
  color: #3a2a00;
}

.perfil-titulo.titulo-campeon {
  --placa-borde: #f1c40f;
  background-image: linear-gradient(110deg, #1d3c8f 20%, #6f8fe8 40%, #1d3c8f 60%);
  color: #ffe58a;
}

.perfil-titulo.titulo-nuzlocke {
  --placa-borde: #e0574a;
  background: linear-gradient(#5a1414, #2e0a0a);
  color: #ffd0c8;
  animation: placa-latido 2s ease-in-out infinite;
}

.perfil-titulo.titulo-leyendas {
  --placa-borde: rgba(255, 255, 255, 0.35);
  background: linear-gradient(90deg, #5b2a9e, #2a5bd6, #5b2a9e);
  background-size: 200% 100%;
  color: #fff;
  animation: placa-brillo 5s linear infinite;
}

.perfil-titulo.titulo-guardian {
  --placa-borde: #ff8a7a;
  background:
    linear-gradient(180deg, transparent 45%, rgba(255, 255, 255, 0.35) 50%, transparent 55%),
    linear-gradient(#d23a2e, #a3241c);
  background-size: 100% 300%, auto;
  color: #fff;
  animation: placa-escaner 2.5s linear infinite;
}

@keyframes placa-brillo {
  from { background-position: 100% 0; }
  to { background-position: -150% 0; }
}

@keyframes placa-latido {
  0%, 100% { box-shadow: inset 0 0 0 1px var(--placa-borde), 0 0 0 rgba(224, 87, 74, 0); }
  50% { box-shadow: inset 0 0 0 1px var(--placa-borde), 0 0 12px rgba(224, 87, 74, 0.8); }
}

@keyframes placa-escaner {
  from { background-position: 0 100%, 0 0; }
  to { background-position: 0 -100%, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .perfil-titulo.placa-tienda {
    animation: none;
  }
}

/* En la Tienda, los títulos en filas: la plaquita y, a la derecha, el precio o el botón. Las
   columnas, de 22rem como poco: los títulos con adornos no se parten y tienen que caber con el
   botón en la misma línea (en un móvil estrecho, la columna ocupa todo el ancho) */
.tienda-titulos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr));
  gap: 0.5rem 0.8rem;
}

/* Si la plaquita no cabe en una línea junto al botón (los títulos con adornos no se parten), el
   botón baja a la línea de abajo, a la derecha */
.tienda-titulo-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.55rem 0.7rem 0.55rem 0.9rem;
  border-radius: 12px;
  background: var(--t-panel);
}

.tienda-titulo-fila.puesto {
  box-shadow: inset 0 -3px 0 rgb(var(--color-vista));
}

.tienda-titulo-fila .perfil-titulo {
  margin: 0;
}

.tienda-titulo-fila button {
  flex: none;
  margin-left: auto;
  padding: 0.4rem 0.8rem;
  border: none;
  border-radius: 0.5rem;
  background: rgb(var(--color-vista));
  color: var(--t-tinta);
  font-weight: bold;
  white-space: nowrap;
  cursor: pointer;
}

.tienda-titulo-fila button:disabled {
  opacity: 0.45;
  cursor: default;
}

.tienda-titulo-fila .tienda-poner,
.tienda-titulo-fila .tienda-quitar {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--t-control);
  color: var(--t-texto);
}

/* ---------- Marcos con movimiento ---------- */

/* Arcoíris: los aros van cambiando de color, uno detrás de otro */
.con-marco.marco-arcoiris {
  animation: marco-arcoiris 3s linear infinite;
}

@keyframes marco-arcoiris {
  0%, 100% { box-shadow: 0 0 0 calc(var(--g) * 0.9) #f0a53c, 0 0 0 calc(var(--g) * 1.8) #f1d54a, 0 0 0 calc(var(--g) * 2.7) #6fbf4a, 0 0 0 calc(var(--g) * 3.6) #5aa8e0, 0 0 0 calc(var(--g) * 4.5) #9a6fd8; }
  20% { box-shadow: 0 0 0 calc(var(--g) * 0.9) #f1d54a, 0 0 0 calc(var(--g) * 1.8) #6fbf4a, 0 0 0 calc(var(--g) * 2.7) #5aa8e0, 0 0 0 calc(var(--g) * 3.6) #9a6fd8, 0 0 0 calc(var(--g) * 4.5) #e0574a; }
  40% { box-shadow: 0 0 0 calc(var(--g) * 0.9) #6fbf4a, 0 0 0 calc(var(--g) * 1.8) #5aa8e0, 0 0 0 calc(var(--g) * 2.7) #9a6fd8, 0 0 0 calc(var(--g) * 3.6) #e0574a, 0 0 0 calc(var(--g) * 4.5) #f0a53c; }
  60% { box-shadow: 0 0 0 calc(var(--g) * 0.9) #5aa8e0, 0 0 0 calc(var(--g) * 1.8) #9a6fd8, 0 0 0 calc(var(--g) * 2.7) #e0574a, 0 0 0 calc(var(--g) * 3.6) #f0a53c, 0 0 0 calc(var(--g) * 4.5) #f1d54a; }
  80% { box-shadow: 0 0 0 calc(var(--g) * 0.9) #9a6fd8, 0 0 0 calc(var(--g) * 1.8) #e0574a, 0 0 0 calc(var(--g) * 2.7) #f0a53c, 0 0 0 calc(var(--g) * 3.6) #f1d54a, 0 0 0 calc(var(--g) * 4.5) #6fbf4a; }
}

/* Aura: un halo violeta que respira */
.con-marco.marco-aura {
  border-color: #b48cff !important;
  animation: marco-aura 2.6s ease-in-out infinite;
}

@keyframes marco-aura {
  0%, 100% { box-shadow: 0 0 0 calc(var(--g) * 2) #4a2a8a, 0 0 calc(var(--g) * 8) rgba(180, 140, 255, 0.45); }
  50% { box-shadow: 0 0 0 calc(var(--g) * 2) #4a2a8a, 0 0 calc(var(--g) * 22) calc(var(--g) * 4) rgba(180, 140, 255, 0.75); }
}

/* Latido: un aro rosa que sale hacia fuera y se desvanece */
.con-marco.marco-latido {
  border-color: #ff7eb6 !important;
  animation: marco-latido 1.6s ease-out infinite;
}

@keyframes marco-latido {
  0% { box-shadow: 0 0 0 calc(var(--g) * 2) #a8326f, 0 0 0 0 rgba(255, 126, 182, 0.8); }
  100% { box-shadow: 0 0 0 calc(var(--g) * 2) #a8326f, 0 0 0 calc(var(--g) * 14) rgba(255, 126, 182, 0); }
}

/* Chispazo: un aro amarillo con destellos */
.con-marco.marco-chispazo {
  border-color: #f7d02c !important;
  animation: marco-chispazo 1.8s steps(1) infinite;
}

@keyframes marco-chispazo {
  0%, 100% { box-shadow: 0 0 0 calc(var(--g) * 2) #3a3000, 0 0 calc(var(--g) * 8) rgba(247, 208, 44, 0.5); }
  10% { box-shadow: 0 0 0 calc(var(--g) * 2) #fff, 0 0 calc(var(--g) * 18) calc(var(--g) * 3) rgba(255, 250, 200, 0.95); }
  20% { box-shadow: 0 0 0 calc(var(--g) * 2) #3a3000, 0 0 calc(var(--g) * 8) rgba(247, 208, 44, 0.5); }
  55% { box-shadow: 0 0 0 calc(var(--g) * 2) #fff, 0 0 calc(var(--g) * 14) calc(var(--g) * 2) rgba(255, 250, 200, 0.85); }
  62% { box-shadow: 0 0 0 calc(var(--g) * 2) #3a3000, 0 0 calc(var(--g) * 8) rgba(247, 208, 44, 0.5); }
}

@media (prefers-reduced-motion: reduce) {
  .con-marco.marco-arcoiris,
  .con-marco.marco-aura,
  .con-marco.marco-latido,
  .con-marco.marco-chispazo {
    animation: none;
  }
}

/* ---------- El fondo de cada uno, en trozos de otras cosas (fondoVisual, js/comun/fichas.js) ----------
   La cabecera de su ficha en un locke, la ficha del foro, el cara a cara de «Amigos»... El dibujo
   lo ponen las reglas de cada fondo (css/amigos.css y aquí arriba); esto, el sitio. */

.lleva-fondo {
  position: relative;
  isolation: isolate;
}

/* En un locke: toda la franja de arriba de su ficha (foto, nombre y lo de la ROM) */
.locke-persona.lleva-fondo {
  /* Hasta la línea de las vidas y victorias (.locke-cifras): se come el hueco que las separa */
  margin: -0.85rem -0.95rem -0.6rem;
  padding: 0.85rem 0.95rem 1.2rem;
  border-radius: 0.8rem 0.8rem 0 0;
}

.foro-usuario-cabecera.lleva-fondo,
.luchador.lleva-fondo {
  border-radius: 0.8rem;
}

/* «Destacar en mi perfil», en la ventana de cada Pokémon de la colección */
.aspecto-destacar {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.aspecto-destacar.activo {
  box-shadow: inset 0 0 0 1.5px rgb(76, 182, 92);
}

.aspecto-destacar .icono {
  width: 1rem;
  height: 1rem;
}

/* ---------- Títulos: que nunca se salgan ----------
   Si no caben en una línea, pasan a dos dentro de la plaquita (en vez de salirse de la tarjeta
   o cortarse), y en una fila pueden encoger. */
.perfil-titulo {
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
  text-overflow: clip;
  line-height: 1.25;
  text-align: center;
}

.tienda-titulo-fila .perfil-titulo {
  flex: 0 1 auto;
  text-align: left;
}

/* La versión pequeña, junto al nombre (Amigos, la ficha del foro, la clasificación...) */
.perfil-titulo.pequeno {
  margin: 0;
  padding: 0.08rem 0.45rem;
  border-radius: 0.3rem;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
}

.ficha-quien .perfil-titulo {
  margin-top: 0.25rem;
  text-align: left;
}

.luchador .perfil-titulo {
  margin-inline: auto;
}

.foro-usuario-nombre,
.clasificacion-nombre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
  min-width: 0;
}

.foro-usuario-nombre h2 {
  margin: 0;
}


/* Chispazo: líneas de corriente en zigzag que chisporrotean a través de la foto, cada vez
   por un sitio (tres dibujos que se van turnando), con el aro destellando */
.con-marco.marco-chispazo,
.con-marco.marco-latido {
  position: relative;
}

.con-marco.marco-chispazo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, #ffffff, #fff3a0);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M0 38 L14 30 L22 44 L34 33 L44 47 L56 36 L66 50 L78 40 L88 52 L100 44' fill='none' stroke='black' stroke-width='3' stroke-linejoin='round' stroke-linecap='round'/><path d='M18 82 L30 70 L38 84 L50 72 L60 86 L72 76' fill='none' stroke='black' stroke-width='3' stroke-linejoin='round' stroke-linecap='round'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M0 38 L14 30 L22 44 L34 33 L44 47 L56 36 L66 50 L78 40 L88 52 L100 44' fill='none' stroke='black' stroke-width='3' stroke-linejoin='round' stroke-linecap='round'/><path d='M18 82 L30 70 L38 84 L50 72 L60 86 L72 76' fill='none' stroke='black' stroke-width='3' stroke-linejoin='round' stroke-linecap='round'/></svg>");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  /* Contorno oscuro y brillo amarillo: así se ve sobre cualquier foto, también las amarillas */
  filter: drop-shadow(0 0 1px #2b2400) drop-shadow(0 0 4px rgba(255, 220, 60, 0.95));
  pointer-events: none;
  animation: chispazo-corriente 1.5s linear infinite;
}

@keyframes chispazo-corriente {
  0% { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M0 38 L14 30 L22 44 L34 33 L44 47 L56 36 L66 50 L78 40 L88 52 L100 44' fill='none' stroke='black' stroke-width='3' stroke-linejoin='round' stroke-linecap='round'/><path d='M18 82 L30 70 L38 84 L50 72 L60 86 L72 76' fill='none' stroke='black' stroke-width='3' stroke-linejoin='round' stroke-linecap='round'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M0 38 L14 30 L22 44 L34 33 L44 47 L56 36 L66 50 L78 40 L88 52 L100 44' fill='none' stroke='black' stroke-width='3' stroke-linejoin='round' stroke-linecap='round'/><path d='M18 82 L30 70 L38 84 L50 72 L60 86 L72 76' fill='none' stroke='black' stroke-width='3' stroke-linejoin='round' stroke-linecap='round'/></svg>"); opacity: 1; }
  4% { opacity: 0.25; }
  8% { opacity: 1; }
  14% { opacity: 0; }
  33% { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M0 62 L12 54 L20 68 L32 56 L42 70 L54 58 L64 72 L76 60 L86 72 L100 64' fill='none' stroke='black' stroke-width='3' stroke-linejoin='round' stroke-linecap='round'/><path d='M30 12 L40 26 L50 14 L58 28 L70 18' fill='none' stroke='black' stroke-width='3' stroke-linejoin='round' stroke-linecap='round'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M0 62 L12 54 L20 68 L32 56 L42 70 L54 58 L64 72 L76 60 L86 72 L100 64' fill='none' stroke='black' stroke-width='3' stroke-linejoin='round' stroke-linecap='round'/><path d='M30 12 L40 26 L50 14 L58 28 L70 18' fill='none' stroke='black' stroke-width='3' stroke-linejoin='round' stroke-linecap='round'/></svg>"); opacity: 1; }
  37% { opacity: 0.3; }
  41% { opacity: 1; }
  47% { opacity: 0; }
  66% { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M8 0 L20 16 L12 26 L28 40 L18 52 L34 66 L24 80 L38 100' fill='none' stroke='black' stroke-width='3' stroke-linejoin='round' stroke-linecap='round'/><path d='M70 4 L80 20 L72 30 L88 48 L78 58 L94 74' fill='none' stroke='black' stroke-width='3' stroke-linejoin='round' stroke-linecap='round'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M8 0 L20 16 L12 26 L28 40 L18 52 L34 66 L24 80 L38 100' fill='none' stroke='black' stroke-width='3' stroke-linejoin='round' stroke-linecap='round'/><path d='M70 4 L80 20 L72 30 L88 48 L78 58 L94 74' fill='none' stroke='black' stroke-width='3' stroke-linejoin='round' stroke-linecap='round'/></svg>"); opacity: 1; }
  70% { opacity: 0.25; }
  74% { opacity: 1; }
  80%, 100% { -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M8 0 L20 16 L12 26 L28 40 L18 52 L34 66 L24 80 L38 100' fill='none' stroke='black' stroke-width='3' stroke-linejoin='round' stroke-linecap='round'/><path d='M70 4 L80 20 L72 30 L88 48 L78 58 L94 74' fill='none' stroke='black' stroke-width='3' stroke-linejoin='round' stroke-linecap='round'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M8 0 L20 16 L12 26 L28 40 L18 52 L34 66 L24 80 L38 100' fill='none' stroke='black' stroke-width='3' stroke-linejoin='round' stroke-linecap='round'/><path d='M70 4 L80 20 L72 30 L88 48 L78 58 L94 74' fill='none' stroke='black' stroke-width='3' stroke-linejoin='round' stroke-linecap='round'/></svg>"); opacity: 0; }
}

/* Latido: una onda con forma de corazón que sale de detrás de la foto y se desvanece, con un
   «pum-pum». Para que se vea por fuera, la foto deja de recortar lo de dentro (se redondea la
   imagen misma) y la onda va detrás (z-index -1 dentro de su propio apilamiento). */
.con-marco.marco-latido {
  overflow: visible !important;
  isolation: isolate;
  animation: none;
  box-shadow: 0 0 0 calc(var(--g) * 2) #a8326f, 0 0 calc(var(--g) * 8) rgba(255, 126, 182, 0.5);
}

.con-marco.marco-latido > * {
  border-radius: 50%;
}

.con-marco.marco-latido::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 54%;
  z-index: -1;
  width: 100%;
  aspect-ratio: 1;
  background: radial-gradient(circle, #ff3d8b 40%, #ff8fc0);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21s-7.5-4.6-9.6-9.2C.9 8.4 2.7 4.5 6.4 4.1c2.3-.2 4 .9 5.6 2.9 1.6-2 3.3-3.1 5.6-2.9 3.7.4 5.5 4.3 4 7.7C19.5 16.4 12 21 12 21z'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 21s-7.5-4.6-9.6-9.2C.9 8.4 2.7 4.5 6.4 4.1c2.3-.2 4 .9 5.6 2.9 1.6-2 3.3-3.1 5.6-2.9 3.7.4 5.5 4.3 4 7.7C19.5 16.4 12 21 12 21z'/></svg>");
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  pointer-events: none;
  animation: latido-onda 2.4s ease-out infinite;
}

/* Una onda que crece despacio y se apaga; al volver a empezar ya es invisible, así no da tirones */
@keyframes latido-onda {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 0.95; }
  100% { transform: translate(-50%, -50%) scale(1.9); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .con-marco.marco-chispazo::after,
  .con-marco.marco-latido::after {
    animation: none;
  }
}

/* ---------- Jungla, Celestial, Llamarada y Escarcha ----------
   Como Latido: el dibujo va en un ::after DETRÁS de la foto (la foto deja de recortar y se redondea
   la imagen), y se ve por fuera. Son SVG de herramientas/generar-marcos.mjs, que también dice qué
   tamaño y sitio les toca. En las fotos que son un <img> suelto (chat, barra lateral) no hay
   ::after: ahí queda el aro del box-shadow. */
.con-marco:is(.marco-jungla, .marco-celestial, .marco-llamarada, .marco-escarcha) {
  position: relative;
  overflow: visible !important;
  isolation: isolate;
}

.con-marco:is(.marco-jungla, .marco-celestial, .marco-llamarada, .marco-escarcha) > * {
  border-radius: 50%;
}

.con-marco:is(.marco-jungla, .marco-celestial, .marco-llamarada, .marco-escarcha)::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

/* Jungla: una corona de hojas y lianas que cuelgan por los lados y se balancean */
.con-marco.marco-jungla {
  border-color: #3f8f3a !important;
  box-shadow: 0 0 0 calc(var(--g) * 2) #24581f, 0 0 calc(var(--g) * 8) rgba(95, 176, 74, 0.4);
}

.con-marco.marco-jungla::after {
  left: -25%;
  top: -15%;
  width: 150%;
  height: 150%;
  background: url("../img/marcos/jungla.svg") center / 100% 100% no-repeat;
  transform-origin: 50% 12%;
  animation: jungla-lianas 3.2s ease-in-out infinite alternate;
}

@keyframes jungla-lianas {
  from { transform: rotate(-2.5deg); }
  to { transform: rotate(2.5deg); }
}

/* Celestial: dos alas blancas a los lados que aletean, y un aro dorado con un brillo suave */
.con-marco.marco-celestial {
  border-color: #fff3c4 !important;
  box-shadow: 0 0 0 calc(var(--g) * 2) #d8b04a, 0 0 calc(var(--g) * 14) rgba(255, 240, 190, 0.7);
}

.con-marco.marco-celestial::after {
  left: -35%;
  top: -16%;
  width: 170%;
  height: 120%;
  background: url("../img/marcos/celestial.svg") center / 100% 100% no-repeat;
  animation: celestial-alas 2.4s ease-in-out infinite;
}

/* Al bajar las alas se cierran un poco hacia la foto; al subir, se abren */
@keyframes celestial-alas {
  0%, 100% { transform: translateY(0) scaleX(1); }
  50% { transform: translateY(-3%) scaleX(0.9); }
}

/* Llamarada: un anillo de fuego con lenguas grandes. El dibujo son cuatro fotogramas en una tira
   (uno al lado del otro) que se van turnando: el fuego baila y las chispas suben */
.con-marco.marco-llamarada {
  border-color: #ffb347 !important;
  box-shadow: 0 0 0 calc(var(--g) * 2) #c2321b, 0 0 calc(var(--g) * 6) rgba(255, 100, 30, 0.45);
}

.con-marco.marco-llamarada::after {
  left: -35%;
  top: -38%;
  width: 170%;
  height: 170%;
  background: url("../img/marcos/llamarada.svg") 0 0 / 400% 100% no-repeat;
  animation: llamarada-fuego 0.56s steps(1) infinite;
}

@keyframes llamarada-fuego {
  0% { background-position: 0 0; }
  25% { background-position: 33.333% 0; }
  50% { background-position: 66.667% 0; }
  75%, 100% { background-position: 100% 0; }
}

/* Escarcha: una corona de cristales de hielo con copos; por encima, nieve que cae (una tira que se
   repite hacia abajo; detrás de la foto, y por fuera se desvanece) y un brillo frío que va y viene */
.con-marco.marco-escarcha {
  border-color: #bfefff !important;
  animation: marco-escarcha 2.6s ease-in-out infinite;
}

.con-marco.marco-escarcha::after {
  left: -35%;
  top: -35%;
  width: 170%;
  height: 170%;
  background-image: url("../img/marcos/escarcha-nieve.svg"), url("../img/marcos/escarcha.svg");
  background-size: 100% 50%, 100% 100%;
  background-repeat: repeat-y, no-repeat;
  background-position: 0 0, center;
  -webkit-mask-image: radial-gradient(circle closest-side, #000 86%, transparent 100%);
  mask-image: radial-gradient(circle closest-side, #000 86%, transparent 100%);
  animation: escarcha-nieve 5s linear infinite;
}

@keyframes marco-escarcha {
  0%, 100% { box-shadow: 0 0 0 calc(var(--g) * 2) #3a8ab8, 0 0 calc(var(--g) * 8) rgba(160, 230, 255, 0.45); }
  50% { box-shadow: 0 0 0 calc(var(--g) * 2) #6ac0e8, 0 0 calc(var(--g) * 16) calc(var(--g) * 2) rgba(200, 245, 255, 0.75); }
}

@keyframes escarcha-nieve {
  to { background-position: 0 100%, center; }
}

@media (prefers-reduced-motion: reduce) {
  .con-marco:is(.marco-jungla, .marco-celestial, .marco-llamarada, .marco-escarcha),
  .con-marco:is(.marco-jungla, .marco-celestial, .marco-llamarada, .marco-escarcha)::after {
    animation: none;
  }
}

/* Las fotos que son un <img> suelto (chat, barra lateral...) no tienen ::after donde poner el
   dibujo, y Latido, Celestial, Jungla, Llamarada, Escarcha y los de tipo con dibujo les quitan el
   recorte (overflow: visible): la imagen se salía del círculo y se veía cuadrada o estirada. Se
   recorta otra vez (más específico que esos, que también llevan !important) y se queda el aro. */
img.con-marco.con-marco {
  overflow: hidden !important;
}