/* ---------- Lucha: combates entre amigos (js/lucha/index.js) ----------
   La lista de luchas (por bloques: te retan, en marcha, esperando, terminadas) y el combate: el campo
   con los dos Pokémon y sus fichas, la frase de lo que pasa, los botones para elegir y, a la derecha,
   el registro. Los ataques con el color de su tipo, como en la Calculadora. Nada de cajas de texto
   ni cursores de los juegos de GBA: es la web, no una copia de la pantalla del juego. */

:where(#vista-lucha, #dialogo-lucha-retar) .icono {
  flex: none;
  width: 1.1em;
  height: 1.1em;
}

/* El botón de la sección (Retar, Aceptar, Luchar) */
.lucha-boton {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.95rem;
  border: none;
  border-radius: 0.45rem;
  background: rgb(var(--color-vista));
  color: var(--t-tinta);
  font-weight: bold;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

.lucha-boton:hover:not(:disabled) {
  background: color-mix(in srgb, rgb(var(--color-vista)) 85%, white);
}

#vista-lucha .boton-gris {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.8rem;
  border: none;
  border-radius: 0.45rem;
  background: var(--t-control);
  color: var(--t-texto);
  font-weight: bold;
  cursor: pointer;
}

#vista-lucha .boton-gris:hover:not(:disabled) {
  background: var(--t-control-2);
}

.lucha-aviso {
  margin: 1.5rem 0;
  opacity: 0.8;
}

/* Mientras está en pruebas: un aviso arriba de la lista */
.lucha-en-pruebas {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.85rem 0 0;
  padding: 0.55rem 0.8rem;
  border-radius: 0.6rem;
  background: rgba(var(--color-vista), 0.12);
  font-size: 0.88rem;
}

.lucha-en-pruebas .icono {
  color: rgb(var(--color-vista));
}

.lucha-aviso.error,
.lucha-espera.error {
  color: var(--t-rojo);
  opacity: 1;
}

/* ---------- La lista ---------- */

.lucha-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  margin: 0.85rem 0 1.1rem;
}

.lucha-explica {
  flex: 1 1 20rem;
  margin: 0;
  font-size: 0.88rem;
  opacity: 0.7;
}

/* Cada bloque a todo el ancho, con una sola cosa por fila */
.lucha-bloque {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: 1.2rem;
}

.lucha-bloque.en-marcha {
  gap: 0.7rem;
}

.lucha-bloque h3 {
  grid-column: 1 / -1;
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.75;
}

.lucha-fila {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "foto texto botones"
    "foto equipos estado";
  align-items: center;
  gap: 0.35rem 0.75rem;
  margin-bottom: 0.55rem;
  padding: 0.65rem 0.8rem;
  border-radius: 14px;
  background: var(--t-panel);
}

/* La capa de color, solo en las que piden algo de ti */
.lucha-fila.destacada {
  box-shadow: inset 3px 0 0 rgb(var(--color-vista));
  background: linear-gradient(90deg, rgba(var(--color-vista), 0.12), var(--t-panel) 45%);
}

/* Las terminadas: verde claro si ganaste, rojo claro si perdiste (claros para no confundirse con la chapita de «Ganaste» o «Perdiste») (con el modo daltónico, azul y naranja). El
   color, a la derecha (junto a «Ganaste» o «Perdiste»), y se difumina hacia la izquierda hasta el 90 % del ancho. */
.lucha-fila.gana {
  background: linear-gradient(to left, color-mix(in srgb, color-mix(in srgb, var(--t-bien) 55%, #fff) 20%, var(--t-panel)), var(--t-panel) 90%);
}

.lucha-fila.pierde {
  background: linear-gradient(to left, color-mix(in srgb, color-mix(in srgb, var(--t-mal) 55%, #fff) 20%, var(--t-panel)), var(--t-panel) 90%);
}

.lucha-fila > .lucha-foto {
  grid-area: foto;
}

.lucha-fila-texto {
  grid-area: texto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.lucha-fila-nombre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.45rem;
  font-weight: bold;
}

.lucha-fila-texto small {
  overflow: hidden;
  font-size: 0.78rem;
  opacity: 0.7;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lucha-fila-equipos {
  grid-area: equipos;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.lucha-fila-equipos .cara-equipo img {
  width: 1.6rem;
  height: 1.6rem;
}

.lucha-fila .lucha-estado {
  grid-area: estado;
  justify-self: end;
}

.lucha-fila-botones {
  grid-area: botones;
  display: flex;
  justify-content: flex-end;
  gap: 0.4rem;
}

.lucha-vs {
  font-family: var(--letra-titulos);
  font-size: 0.8rem;
  font-weight: bold;
  opacity: 0.6;
  text-transform: uppercase;
}

.lucha-sin-equipo,
.lucha-vacio {
  font-size: 0.85rem;
  opacity: 0.6;
}

.lucha-estado {
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: rgba(var(--t-tinte), 0.08);
  font-size: 0.75rem;
  font-weight: bold;
  white-space: nowrap;
}

.lucha-estado.toca,
.lucha-estado.reto {
  background: rgb(var(--color-vista));
  color: var(--t-tinta);
}

.lucha-estado.gana {
  background: rgba(var(--t-bien-rgb), 0.2);
  color: var(--t-bien);
}

.lucha-estado.pierde {
  background: rgba(var(--t-mal-rgb, 231, 76, 60), 0.18);
  color: var(--t-mal, #e74c3c);
}

/* Fotos de los jugadores: en su círculo, con el marco que lleven (css/juegos.css: .con-marco pinta el
   borde y los aros por fuera; --g es el grosor de los aros) */
.lucha-foto {
  position: relative;
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  box-sizing: border-box;
  border: 0.14rem solid rgba(var(--t-tinte), 0.25);
  border-radius: 50%;
  background: var(--t-control);
  overflow: hidden;
  font-weight: bold;
  cursor: pointer;
}

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

.lucha-foto.con-marco {
  --g: 0.6px;
}

.lucha-foto.grande {
  width: 4.2rem;
  height: 4.2rem;
  border-width: 0.18rem;
  font-size: 1.4rem;
}

.lucha-foto.grande.con-marco {
  --g: 1px;
}

.lucha-nombre {
  font-weight: bold;
}

/* ---------- Los combates en marcha, en grande (como «Seguir jugando» en «Jugar») ---------- */

.lucha-grande {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.4rem 1.2rem;
  padding: 1rem 1.2rem;
  border-left: 0.35rem solid rgba(var(--color-vista), 0.55);
  border-radius: 0.9rem;
  background: var(--t-panel);
  background-image: linear-gradient(90deg, rgba(var(--color-vista), 0.1), transparent 65%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* La que te toca, con el color entero */
.lucha-grande.toca {
  border-left-color: rgb(var(--color-vista));
  background-image: linear-gradient(90deg, rgba(var(--color-vista), 0.2), transparent 70%);
}

.lucha-ceja {
  grid-column: 1 / -1;
  color: color-mix(in srgb, rgb(var(--color-vista)) var(--t-vivo), var(--t-texto));
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lucha-grande-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
}

/* Cada jugador en su recuadro, con su fondo (si lo lleva) y una sombra: así se separa de la tarjeta */
.lucha-grande-jugador {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-width: 0;
  padding: 0.6rem 0.75rem;
  border-radius: 0.7rem;
  background-color: var(--t-panel-3);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(var(--t-tinte), 0.1);
}

/* El rival, al revés: su foto a la derecha */
.lucha-grande-jugador.suyo {
  flex-direction: row-reverse;
  text-align: right;
}

.lucha-grande-quien {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.lucha-grande-jugador.suyo .lucha-grande-quien {
  align-items: flex-end;
}

.lucha-grande-nombre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.5rem;
  font-family: var(--letra-titulos);
  font-size: 1.25rem;
}

.lucha-grande-jugador.suyo .lucha-grande-nombre {
  flex-direction: row-reverse;
}

.lucha-grande .cara-equipo img {
  width: 2.1rem;
  height: 2.1rem;
}

.lucha-grande-centro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  max-width: 14rem;
  text-align: center;
}

.lucha-grande-centro .lucha-vs {
  font-size: 1.3rem;
}

.lucha-grande-centro small {
  font-size: 0.78rem;
  opacity: 0.7;
}

.lucha-grande > .lucha-abrir {
  padding: 0.75rem 1.3rem;
  font-size: 1.05rem;
}

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

  .lucha-grande-cuerpo {
    grid-template-columns: minmax(0, 1fr);
  }

  .lucha-grande-jugador.suyo {
    flex-direction: row;
    text-align: left;
  }

  .lucha-grande-jugador.suyo .lucha-grande-quien {
    align-items: flex-start;
  }

  .lucha-grande-jugador.suyo .lucha-grande-nombre {
    flex-direction: row;
  }
}

/* Sin luchas: el guante grande y una frase */
.lucha-nada {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  max-width: 30rem;
  margin: 3rem auto;
  text-align: center;
  opacity: 0.85;
}

.lucha-nada-icono .icono {
  width: 3.2rem;
  height: 3.2rem;
  color: rgb(var(--color-vista));
}

/* ---------- Retar / aceptar ---------- */

.dialogo-lucha {
  width: min(32rem, 94vw);
}

.dialogo-lucha h2 {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: color-mix(in srgb, rgb(var(--color-vista, 222, 112, 52)) var(--t-vivo), black);
}

.dialogo-lucha h2 .icono {
  width: 1.1em;
  height: 1.1em;
}

.dialogo-lucha select {
  padding: 0.5rem 0.6rem;
  border: none;
  border-radius: 0.45rem;
  background: var(--t-control);
  color: var(--t-texto);
  font-size: 0.95rem;
  text-transform: none;
  letter-spacing: normal;
}

.dialogo-lucha > .lucha-retar-cuerpo > select {
  width: 100%;
}

.dialogo-lucha .etiqueta-campo {
  display: block;
  margin: 0.85rem 0 0.35rem;
  font-size: 0.8rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.lucha-retar-rival {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.lucha-retar-dato {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.75rem 0 0;
}

/* Nivel: dos botones pegados en una tarjetita */
.lucha-retar-nivel {
  display: inline-flex;
  padding: 0.2rem;
  border-radius: 0.55rem;
  background: var(--t-control);
}

.lucha-retar-nivel button {
  padding: 0.4rem 0.85rem;
  border: none;
  border-radius: 0.4rem;
  background: transparent;
  color: var(--t-texto);
  font-weight: bold;
  cursor: pointer;
}

.lucha-retar-nivel button.elegido {
  background: var(--t-panel);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.lucha-retar-equipo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.7rem;
  padding: 0.6rem 0.7rem;
  border-radius: 0.6rem;
  background: var(--t-panel-3);
}

.lucha-retar-equipo .boton-gris {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
  padding: 0.4rem 0.75rem;
}

.lucha-retar-problemas {
  margin: 0.5rem 0 0;
  padding-left: 1.2rem;
  font-size: 0.82rem;
  color: var(--t-casi);
}

/* ---------- El combate ---------- */

.lucha-cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  margin: 0.85rem 0;
}

.lucha-cabeza-jugadores {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.lucha-cabeza-jugadores .lucha-foto {
  width: 2.2rem;
  height: 2.2rem;
}

.lucha-cabeza-datos {
  opacity: 0.7;
}

.lucha-cabeza .lucha-rendirse {
  margin-left: auto;
}

.lucha-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 20rem);
  gap: 1rem;
  align-items: start;
}

/* El campo: el escenario dibujado (js/lucha/escenario.js) y, encima, por capas: el campo (Espacio Raro,
   campos de tipo), el tiempo (lluvia, sol...), los dos lados con su Pokémon, y los efectos de los ataques */
.lucha-arena {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  /* Lo que deja libre la ventana tras la cabecera, los equipos y el panel de elegir: así se ve todo sin bajar */
  max-height: max(16rem, min(42rem, calc(100vh - 22rem)));
  overflow: hidden;
  border-radius: 14px;
  background: linear-gradient(180deg, #6fb7e8, #8cc46a 46%, #5f9a48);
  isolation: isolate;
}

.lucha-arena.tiembla {
  animation: lucha-tiembla 0.35s linear;
}

@keyframes lucha-tiembla {
  20% { transform: translate(-6px, 3px); }
  40% { transform: translate(5px, -3px); }
  60% { transform: translate(-4px, 2px); }
  80% { transform: translate(3px, -1px); }
}

.lucha-escena,
.lucha-nubes {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  image-rendering: pixelated;
  pointer-events: none;
}

.lucha-escena {
  width: 100%;
  height: 100%;
}

/* Las nubes: una tira el doble de ancha (dos veces lo mismo) que se desplaza sin que se note el corte */
.lucha-nubes {
  width: 200%;
  height: calc(100% / 3);
  animation: lucha-nubes 180s linear infinite;
}

@keyframes lucha-nubes {
  to { transform: translateX(-50%); }
}

.lucha-turno,
.lucha-clima {
  position: absolute;
  top: 0.6rem;
  z-index: 7;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 0.75rem;
  font-weight: bold;
}

.lucha-turno {
  right: 0.7rem;
}

.lucha-clima {
  right: 50%;
  transform: translateX(50%);
}

/* ---------- Los dos lados ---------- */

/* Sin z-index: los lados no hacen capa propia, y así el tiempo (lluvia, arena...) pasa por encima del
   Pokémon pero por debajo de su ficha. Capas: escenario 0, campo 1, trampas 2, Pokémon 3, tiempo 4,
   efectos 5, fichas 6, turno y clima 7 */
.lucha-lado {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.lucha-ficha-columna {
  position: absolute;
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  width: min(17rem, 46%);
  pointer-events: auto;
}

.lucha-lado.suyo .lucha-ficha-columna {
  top: 0.6rem;
  left: 0.6rem;
}

.lucha-lado.mio .lucha-ficha-columna {
  right: 0.6rem;
  bottom: 0.6rem;
  flex-direction: column-reverse;
}

.lucha-lado.mio .lucha-ficha-hueco {
  display: flex;
  flex-direction: column;
}

/* Cada sprite, colgado de sus pies: left/top (los pone js/lucha/index.js con PUESTOS) es el punto donde
   pisa, en su plataforma. «translate» y no «transform», para que las animaciones (que usan transform)
   no lo muevan de sitio. */
.lucha-sprite {
  position: absolute;
  z-index: 3;
  translate: -50% -100%;
  line-height: 0;
  pointer-events: auto;
}

/* El margen transparente de alrededor (padding con margen negativo: no lo mueve de sitio) deja sitio al
   brillo de la tera o el dinamax, que si no se cortaba en el borde de la imagen */
.lucha-sprite img {
  position: relative;
  z-index: 1;
  display: block;
  box-sizing: content-box;
  max-width: none;
  height: auto;
  padding: 14px;
  margin: -14px;
  image-rendering: pixelated;
  transition: transform 0.4s, filter 0.4s;
}

/* Animaciones: atacar (se lanza hacia el otro), recibir (tiembla y parpadea), salir y caer */
.lucha-lado.mio .lucha-sprite.ataca { animation: lucha-ataca-mio 0.45s ease-out; }
.lucha-lado.suyo .lucha-sprite.ataca { animation: lucha-ataca-suyo 0.45s ease-out; }
.lucha-sprite.golpeado img { animation: lucha-golpe 0.45s linear; }
.lucha-sprite.sale img { animation: lucha-sale 0.5s ease-out; }

.lucha-sprite.caido img {
  opacity: 0;
  transform: translateY(35%);
  transition: opacity 0.6s, transform 0.6s ease-in;
}

@keyframes lucha-ataca-mio {
  40% { transform: translate(14%, -12%); }
}

@keyframes lucha-ataca-suyo {
  40% { transform: translate(-14%, 12%); }
}

@keyframes lucha-golpe {
  0%, 100% { translate: 0; opacity: 1; filter: none; }
  20% { translate: -6%; opacity: 0.3; filter: brightness(2.5); }
  40% { translate: 6%; opacity: 1; }
  60% { translate: -3%; opacity: 0.3; filter: brightness(2.5); }
  80% { translate: 2%; opacity: 1; }
}

@keyframes lucha-sale {
  from { transform: scale(0.2); opacity: 0; filter: brightness(3); }
  60% { filter: brightness(1.6); }
}

/* Teracristalizado: brillo del color de su teratipo y una joya encima */
.lucha-sprite.tera img {
  filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 8px var(--tera)) saturate(1.3);
}

.lucha-sprite.tera::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: calc(-12px * var(--px, 3));
  left: 50%;
  width: calc(9px * var(--px, 3));
  height: calc(11px * var(--px, 3));
  transform: translateX(-50%);
  background: var(--joya) 0 0 / 100% 100% no-repeat;
  image-rendering: pixelated;
  animation: lucha-joya 2.4s steps(4) infinite alternate;
}

@keyframes lucha-joya {
  to { translate: 0 calc(-3px * var(--px, 3)); filter: brightness(1.25); }
}

/* Dinamax: más grande y con un brillo rojo */
.lucha-sprite.dinamax img {
  transform: scale(1.45);
  transform-origin: bottom center;
  filter: drop-shadow(0 0 10px #ff3355) drop-shadow(0 0 3px #ff99aa);
}

@media (prefers-reduced-motion: reduce) {
  .lucha-sprite.ataca,
  .lucha-sprite.golpeado img,
  .lucha-sprite.sale img,
  .lucha-arena.tiembla,
  .lucha-nubes { animation: none; }
}

/* ---------- Lo que hay en el lado de cada uno: púas, rocas, telaraña, pantallas, viento ---------- */

.lucha-trampas {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

/* Su sitio (sobre la plataforma) lo pone js/lucha/index.js con PUESTOS */

/* Púas: triangulitos repartidos por la plataforma, en dos filas */
/* Los dibujitos en pixel art (js/lucha/pixeles.js), con píxeles del tamaño de los del escenario (--px) */
.lucha-pua,
.lucha-roca,
.lucha-telarana {
  image-rendering: pixelated;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.lucha-pua {
  position: absolute;
  left: calc((var(--i) + 0.5) / var(--n) * 80% + 10%);
  bottom: calc(20% + var(--fila) * 22%);
  width: calc(9px * var(--px, 3));
  height: calc(8px * var(--px, 3));
  translate: -50% 0;
  background-image: var(--px-pua);
  animation: lucha-aparece 0.4s ease-out both;
  animation-delay: calc(var(--i) * 40ms);
}

.lucha-pua.toxicas {
  background-image: var(--px-pua-toxica);
}

@keyframes lucha-aparece {
  from { opacity: 0; transform: translateY(-60%) scale(0.4); }
}

/* Trampa Rocas: piedras que flotan sobre la plataforma */
.lucha-roca {
  position: absolute;
  left: calc(14% + var(--i) * 22%);
  bottom: calc(110% + var(--fila) * 30%);
  width: calc(10px * var(--px, 3));
  height: calc(9px * var(--px, 3));
  background-image: var(--px-roca);
  animation: lucha-flota 2.6s steps(4) infinite alternate;
  animation-delay: calc(var(--i) * -0.6s);
}

.lucha-roca.acero {
  background-image: var(--px-roca-acero);
}

@keyframes lucha-flota {
  from { translate: 0 0; }
  to { translate: 0 calc(-3px * var(--px, 3)); }
}

/* Red Viscosa: una telaraña en el suelo */
.lucha-telarana {
  position: absolute;
  inset: 0 4%;
  background-image: var(--px-telarana);
  opacity: 0.85;
  animation: lucha-aparece 0.5s ease-out both;
}

/* Pantallas: un panel de luz delante del Pokémon (Reflejo, Pantalla de Luz, Velo Aurora...) */
.lucha-pantalla {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 20%;
  height: 330%;
  border: calc(1px * var(--px, 3)) solid var(--c);
  background: var(--trama) 0 0 / calc(4px * var(--px, 3)) repeat;
  image-rendering: pixelated;
  /* Esquinas en escalón, como en pixel art */
  clip-path: polygon(
    0 calc(3px * var(--px, 3)), calc(1px * var(--px, 3)) calc(3px * var(--px, 3)), calc(1px * var(--px, 3)) calc(1px * var(--px, 3)),
    calc(3px * var(--px, 3)) calc(1px * var(--px, 3)), calc(3px * var(--px, 3)) 0,
    calc(100% - 3px * var(--px, 3)) 0, calc(100% - 3px * var(--px, 3)) calc(1px * var(--px, 3)),
    calc(100% - 1px * var(--px, 3)) calc(1px * var(--px, 3)), calc(100% - 1px * var(--px, 3)) calc(3px * var(--px, 3)),
    100% calc(3px * var(--px, 3)), 100% 100%, 0 100%
  );
  opacity: 0.6;
  animation: lucha-pantalla 3s steps(3) infinite alternate;
}

.pantalla-lightscreen { inset-inline: 12%; }
.pantalla-luckychant { inset-inline: 18%; }

@keyframes lucha-pantalla {
  to { opacity: 0.35; }
}

/* Viento Afín: rayas que pasan por detrás */
.lucha-viento {
  position: absolute;
  left: -10%;
  bottom: 80%;
  width: 40%;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
  animation: lucha-viento 1.4s linear infinite;
}

.lucha-viento.otra {
  bottom: 160%;
  animation-delay: -0.7s;
}

@keyframes lucha-viento {
  to { translate: 300% 0; }
}

/* Sus nombres, en chapitas bajo la ficha */
.lucha-condiciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.lucha-condiciones:empty {
  display: none;
}

.lucha-chip-lado {
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: #26262c;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  color: #fff;
  font-size: 0.68rem;
  font-weight: bold;
}

.lucha-chip-lado.trampa {
  background: #6b4423;
}

/* ---------- El tiempo y el campo (el tiempo, encima de los Pokémon y debajo de las fichas) ---------- */

.lucha-campo-capa,
.lucha-tiempo {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.lucha-campo-capa { z-index: 1; }
.lucha-tiempo { z-index: 4; }

.lucha-arena:is([data-clima="RainDance"], [data-clima="PrimordialSea"]) .lucha-tiempo {
  background:
    repeating-linear-gradient(105deg, transparent 0 14px, rgba(190, 215, 255, 0.5) 14px 15px),
    linear-gradient(rgba(40, 60, 110, 0.25), rgba(40, 60, 110, 0.15));
  background-size: 140px 140px, auto;
  animation: lucha-lluvia 0.45s linear infinite;
}

@keyframes lucha-lluvia {
  to { background-position: -40px 140px, 0 0; }
}

.lucha-arena:is([data-clima="SunnyDay"], [data-clima="DesolateLand"]) .lucha-tiempo {
  background:
    radial-gradient(circle at 85% 5%, rgba(255, 240, 160, 0.75), transparent 45%),
    linear-gradient(rgba(255, 190, 90, 0.15), rgba(255, 160, 60, 0.12));
  animation: lucha-sol 3s ease-in-out infinite alternate;
}

@keyframes lucha-sol {
  to { opacity: 0.7; }
}

.lucha-arena[data-clima="Sandstorm"] .lucha-tiempo {
  background:
    radial-gradient(circle, rgba(230, 200, 140, 0.9) 0 1.5px, transparent 2px),
    linear-gradient(rgba(200, 160, 90, 0.35), rgba(170, 130, 70, 0.3));
  background-size: 23px 17px, auto;
  animation: lucha-arena-viento 0.6s linear infinite;
}

@keyframes lucha-arena-viento {
  to { background-position: 46px 8px, 0 0; }
}

.lucha-arena:is([data-clima="Hail"], [data-clima="Snowscape"]) .lucha-tiempo {
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.95) 0 2px, transparent 2.5px),
    radial-gradient(circle, rgba(255, 255, 255, 0.7) 0 1.5px, transparent 2px),
    linear-gradient(rgba(200, 225, 255, 0.2), rgba(200, 225, 255, 0.1));
  background-size: 60px 60px, 37px 41px, auto;
  animation: lucha-nieve 2.4s linear infinite;
}

@keyframes lucha-nieve {
  to { background-position: 20px 60px, -10px 82px, 0 0; }
}

.lucha-arena[data-clima="DeltaStream"] .lucha-tiempo {
  background: repeating-linear-gradient(170deg, transparent 0 40px, rgba(255, 255, 255, 0.25) 40px 42px);
  background-size: 200px 200px;
  animation: lucha-lluvia 1.2s linear infinite;
}

/* Campos de tipo: el suelo se tiñe y brilla un poco */
.lucha-arena[data-campo] .lucha-campo-capa {
  --suelo: transparent;
  background: linear-gradient(180deg, transparent 44%, var(--suelo) 60%, var(--suelo));
}

.lucha-arena[data-campo~="electricterrain"] .lucha-campo-capa { --suelo: rgba(255, 225, 60, 0.35); animation: lucha-sol 0.8s steps(2) infinite alternate; }
.lucha-arena[data-campo~="grassyterrain"] .lucha-campo-capa { --suelo: rgba(90, 210, 90, 0.35); }
.lucha-arena[data-campo~="mistyterrain"] .lucha-campo-capa { --suelo: rgba(255, 170, 225, 0.4); }
.lucha-arena[data-campo~="psychicterrain"] .lucha-campo-capa { --suelo: rgba(190, 110, 255, 0.35); }

/* Espacio Raro: una rejilla morada por todo el campo */
.lucha-arena[data-campo~="trickroom"] .lucha-campo-capa {
  background:
    repeating-linear-gradient(0deg, transparent 0 38px, rgba(210, 120, 255, 0.35) 38px 40px),
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(210, 120, 255, 0.35) 38px 40px),
    rgba(120, 40, 170, 0.15);
}

.lucha-arena:is([data-campo~="gravity"], [data-campo~="wonderroom"], [data-campo~="magicroom"]) .lucha-campo-capa {
  box-shadow: inset 0 0 60px rgba(60, 20, 120, 0.55);
}

/* ---------- Los efectos de los ataques (js/lucha/efectos.js) ---------- */

.lucha-efectos {
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
}

.lucha-particula {
  position: absolute;
  width: var(--s, 10px);
  height: var(--s, 10px);
  margin: calc(var(--s, 10px) / -2) 0 0 calc(var(--s, 10px) / -2);
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 6px var(--c);
}

.lucha-particula.estalla {
  animation: lucha-estalla 0.65s ease-out both;
}

.lucha-particula.estela {
  opacity: 0;
  animation: lucha-estela 0.7s ease-out both;
}

@keyframes lucha-estalla {
  from { transform: translate(0, 0) rotate(0) scale(0.4); opacity: 1; }
  to { transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(1); opacity: 0; }
}

@keyframes lucha-estela {
  0% { opacity: 0; transform: scale(0.3); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(1.1); }
}

/* La forma de cada tipo */
.forma-llama { border-radius: 50% 50% 50% 0 / 60% 60% 40% 40%; background: radial-gradient(circle at 50% 65%, #fff8, var(--c) 60%); }
.forma-burbuja { background: radial-gradient(circle at 35% 35%, #fff 0 15%, transparent 25%), color-mix(in srgb, var(--c) 35%, transparent); border: 2px solid var(--c); }
.forma-chispa { border-radius: 0; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.forma-hoja { border-radius: 0 100% 0 100%; }
.forma-cristal { border-radius: 0; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); box-shadow: none; }
.forma-estrella { border-radius: 0; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.forma-roca { border-radius: 0; clip-path: polygon(20% 0, 75% 8%, 100% 45%, 80% 100%, 25% 92%, 0 50%); box-shadow: none; }
.forma-viento { width: calc(var(--s, 10px) * 3); height: 3px; border-radius: 3px; }
.forma-anillo { background: transparent; border: 3px solid var(--c); }
.forma-punto { width: calc(var(--s, 10px) * 0.6); height: calc(var(--s, 10px) * 0.6); }
.forma-humo { filter: blur(3px); opacity: 0.85; }

/* El fogonazo del golpe */
.lucha-fogonazo {
  position: absolute;
  width: 96px;
  height: 96px;
  margin: -48px 0 0 -48px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 18%, var(--c) 42%, transparent 70%);
  animation: lucha-fogonazo 0.45s ease-out both;
}

@keyframes lucha-fogonazo {
  from { transform: scale(0.2); opacity: 1; }
  to { transform: scale(1.4); opacity: 0; }
}

/* Lo que vuela hacia el rival en un ataque especial */
.lucha-proyectil {
  position: absolute;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #fff, var(--c) 45%, var(--c2) 70%, transparent 72%);
  box-shadow: 0 0 18px var(--c);
  animation: lucha-vuela 0.42s ease-in both;
}

@keyframes lucha-vuela {
  from { transform: translate(0, 0) scale(0.5); }
  to { transform: translate(var(--dx), var(--dy)) scale(1.3); }
}

/* El rayo de los ataques eléctricos */
.lucha-rayo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 6px #ffe14d);
  animation: lucha-rayo 0.5s steps(5) both;
}

.lucha-rayo polyline {
  fill: none;
  stroke-width: 7;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.lucha-rayo polyline.nucleo {
  stroke-width: 2.5;
}

@keyframes lucha-rayo {
  0%, 40%, 80% { opacity: 1; }
  20%, 60% { opacity: 0.3; }
  100% { opacity: 0; }
}

/* Anillos de un aura (estado, subidas y bajadas, curas) */
.lucha-anillo {
  position: absolute;
  width: var(--tam);
  height: calc(var(--tam) * 0.42);
  margin: calc(var(--tam) * -0.21) 0 0 calc(var(--tam) / -2);
  border: 3px solid var(--c);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--c);
  animation: lucha-anillo 0.9s ease-out both;
}

@keyframes lucha-anillo {
  from { transform: translateY(40%) scale(0.5); opacity: 0.9; }
  to { transform: translateY(-80%) scale(1.15); opacity: 0; }
}

.lucha-chispita {
  position: absolute;
  width: 6px;
  height: 6px;
  margin: -3px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 8px var(--c);
  opacity: 0;
}

.lucha-chispita.sube { animation: lucha-chispa-sube 0.9s ease-out both; }
.lucha-chispita.baja { animation: lucha-chispa-baja 0.9s ease-in both; }

@keyframes lucha-chispa-sube {
  15% { opacity: 1; }
  to { transform: translateY(-70px); opacity: 0; }
}

@keyframes lucha-chispa-baja {
  from { transform: translateY(-60px); }
  15% { opacity: 1; }
  to { transform: translateY(10px); opacity: 0; }
}

/* El daño o la cura que flota sobre el Pokémon */
.lucha-numero {
  position: absolute;
  z-index: 8;
  translate: -50% -50%;
  font-family: var(--letra-titulos);
  font-size: 1.35rem;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  text-shadow: 0 0 3px #000, 0 2px 4px rgba(0, 0, 0, 0.6);
  animation: lucha-numero 1.3s ease-out both;
}

.lucha-numero.danio { color: #ffd2cc; -webkit-text-stroke: 1px #c0392b; }
.lucha-numero.cura { color: #c9ffd7; -webkit-text-stroke: 1px #1e8449; }
.lucha-numero.critico { color: #ffe066; font-size: 1.15rem; -webkit-text-stroke: 1px #9a6b00; }
.lucha-numero.nada { color: #e0e0e0; font-size: 1rem; }

@keyframes lucha-numero {
  from { transform: translateY(10px) scale(0.6); opacity: 0; }
  15% { transform: translateY(0) scale(1.15); opacity: 1; }
  30% { transform: scale(1); }
  to { transform: translateY(-46px); opacity: 0; }
}

/* El destello grande (megaevolución, tera, transformación) */
.lucha-destello {
  position: absolute;
  width: var(--tam);
  height: var(--tam);
  margin: calc(var(--tam) / -2) 0 0 calc(var(--tam) / -2);
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 15%, var(--c) 35%, transparent 68%);
  animation: lucha-destello 1s ease-out both;
}

@keyframes lucha-destello {
  from { transform: scale(0.1) rotate(0); opacity: 1; }
  50% { opacity: 0.9; }
  to { transform: scale(1.3) rotate(90deg); opacity: 0; }
}

/* Las flechas de las subidas (suben) y bajadas (bajan) de estadísticas, en pixel art */
.lucha-flecha {
  position: absolute;
  width: calc(7px * var(--px, 3));
  height: calc(9px * var(--px, 3));
  translate: -50% -50%;
  background-size: 100% 100%;
  image-rendering: pixelated;
  opacity: 0;
}

.lucha-flecha.sube { animation: lucha-flecha-sube 0.9s steps(6) both; }
.lucha-flecha.baja { animation: lucha-flecha-baja 0.9s steps(6) both; }

@keyframes lucha-flecha-sube {
  0% { opacity: 0; transform: translateY(0); }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateY(calc(-26px * var(--px, 3))); }
}

@keyframes lucha-flecha-baja {
  0% { opacity: 0; transform: translateY(0); }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateY(calc(26px * var(--px, 3))); }
}

/* El escudo de Protección (y su familia), en pixel art: aparece, aguanta y se va */
.lucha-escudo {
  position: absolute;
  width: var(--tam);
  height: var(--tam);
  margin: calc(var(--tam) / -2) 0 0 calc(var(--tam) / -2);
  background-size: 100% 100%;
  image-rendering: pixelated;
  animation: lucha-escudo 1.2s steps(6) both;
}

@keyframes lucha-escudo {
  0% { transform: scale(0.3); opacity: 0; }
  20% { transform: scale(1.05); opacity: 1; }
  30%, 75% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.1); opacity: 0; }
}

/* El nombre del ataque, en una franja de su color */
.lucha-rotulo {
  position: absolute;
  top: 14%;
  left: 50%;
  z-index: 8;
  padding: 0.3rem 1.1rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(20, 20, 24, 0.85);
  color: #fff;
  font-family: var(--letra-titulos);
  font-size: 1.05rem;
  font-weight: 800;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  translate: -50% 0;
  animation: lucha-rotulo 1.4s ease-out both;
}

@keyframes lucha-rotulo {
  from { opacity: 0; transform: translateX(-30px); }
  15% { opacity: 1; transform: none; }
  80% { opacity: 1; }
  to { opacity: 0; transform: translateX(20px); }
}

@media (prefers-reduced-motion: reduce) {
  .lucha-efectos > * { animation-duration: 0.01s !important; }
}

/* ---------- Las fichas: retrato de Mundo Misterioso, nombre, nivel, PS y lo que tenga encima ---------- */

.lucha-ficha {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.6rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--t-panel) 92%, transparent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  cursor: help;
}

.lucha-ficha.debilitado {
  opacity: 0.55;
}

.lucha-retrato {
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: rgba(var(--t-tinte), 0.06);
  image-rendering: pixelated;
}

.lucha-ficha-datos {
  flex: 1;
  min-width: 0;
}

.lucha-ficha-nombre {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
}

.lucha-ficha-nombre strong {
  overflow: hidden;
  font-family: var(--letra-titulos);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lucha-ficha-nombre small {
  margin-left: auto;
  font-size: 0.75rem;
  opacity: 0.75;
  white-space: nowrap;
}

.lucha-ficha-estado {
  display: inline-flex;
  gap: 0.2rem;
}

.lucha-genero .icono {
  width: 0.85em;
  height: 0.85em;
}

.lucha-genero.macho { color: #5b9bf0; }
.lucha-genero.hembra { color: #f07fb0; }

.lucha-ficha-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.2rem;
}

.lucha-ficha-cambios {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.2rem;
}

.lucha-ps-texto {
  margin-right: auto;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  opacity: 0.8;
}

/* La barra de PS: verde, amarilla o roja (con los colores del modo daltónico). Baja poco a poco: la
   anima js/lucha/index.js (ponerPS) */
.lucha-ps {
  display: block;
  height: 0.45rem;
  margin-top: 0.25rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(var(--t-tinte), 0.12);
}

.lucha-ps > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--t-bien);
  transition: background 0.3s;
}

.lucha-ps.medio > span { background: var(--t-casi); }
.lucha-ps.bajo > span { background: var(--t-mal, #e74c3c); }

.lucha-chip-estado,
.lucha-chip-cambio,
.lucha-chip-tera {
  padding: 0 0.35rem;
  border-radius: 0.3rem;
  font-size: 0.68rem;
  font-weight: bold;
  line-height: 1.5;
  white-space: nowrap;
}

.lucha-chip-estado { color: #fff; }
.lucha-chip-estado.estado-brn { background: #e4703a; }
.lucha-chip-estado.estado-par { background: #c9a91a; }
.lucha-chip-estado.estado-slp { background: #8a8fa8; }
.lucha-chip-estado.estado-frz { background: #5fb8d6; }
.lucha-chip-estado.estado-psn,
.lucha-chip-estado.estado-tox { background: #a04aa6; }

.lucha-chip-tera {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  background: var(--c);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 6px var(--c);
}

.lucha-chip-tera .icono-tipo {
  width: 0.7rem;
  height: 0.7rem;
}

.lucha-chip-cambio.sube { background: rgba(var(--t-bien-rgb), 0.2); color: var(--t-bien); }
.lucha-chip-cambio.baja { background: rgba(var(--t-mal-rgb, 231, 76, 60), 0.18); color: var(--t-mal, #e74c3c); }

/* La frase de lo que pasa, bajo el campo */
.lucha-mensaje {
  min-height: 1.5em;
  margin: 0.6rem 0.2rem;
  font-size: 1.05rem;
  font-weight: bold;
}

/* ---------- Elegir ---------- */

.lucha-acciones {
  margin-top: 0.9rem;
  padding: 0.75rem;
  border-radius: 14px;
  background: var(--t-panel);
}

.lucha-acciones:empty {
  display: none;
}

.lucha-pregunta {
  margin: 0 0 0.55rem;
  font-weight: bold;
}

.lucha-espera {
  margin: 0;
  opacity: 0.8;
}

.lucha-acciones .etiqueta-campo {
  display: block;
  margin: 0.8rem 0 0.4rem;
  font-size: 0.75rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.75;
}

.lucha-ataques {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem;
}

.lucha-ataque {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "icono nombre pp"
    "icono datos pp";
  align-items: center;
  gap: 0.05rem 0.5rem;
  padding: 0.5rem 0.7rem;
  border: 2px solid transparent;
  border-radius: 0.6rem;
  background: var(--tipo);
  color: #fff;
  text-align: left;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s;
}

.lucha-ataque:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.7);
  transform: translateY(-1px);
}

.lucha-ataque:disabled {
  filter: grayscale(0.8);
  opacity: 0.45;
  cursor: default;
}

.lucha-ataque .icono-tipo {
  grid-area: icono;
  width: 1.1rem;
  height: 1.1rem;
}

.lucha-ataque strong {
  grid-area: nombre;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lucha-ataque small {
  grid-area: datos;
  font-size: 0.72rem;
  opacity: 0.9;
}

.lucha-pp {
  grid-area: pp;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.lucha-especiales {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.35rem;
  width: 9.5rem;
}

/* Encendido (se puede), apagado (no) y elegido (irá con el ataque que pulses) */
.lucha-especial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.45rem 0.4rem;
  border: 1px solid rgba(var(--color-vista), 0.7);
  border-radius: 0.55rem;
  background: rgba(var(--color-vista), 0.14);
  color: var(--t-texto);
  font-weight: bold;
  cursor: pointer;
}

.lucha-especial:hover:not(:disabled) {
  background: rgba(var(--color-vista), 0.28);
}

.lucha-especial.elegido {
  background: rgb(var(--color-vista));
  color: var(--t-tinta);
  box-shadow: 0 0 10px rgba(var(--color-vista), 0.6);
}

.lucha-especial.apagado {
  border-color: rgba(var(--t-tinte), 0.12);
  background: transparent;
  color: rgba(var(--t-texto-rgb), 0.35);
  cursor: default;
}

.lucha-especial .icono-tipo {
  width: 0.9rem;
  height: 0.9rem;
  background: currentColor;
}

.lucha-equipo {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: 0.4rem;
}

.lucha-cambio {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.5rem;
  border: none;
  border-radius: 0.6rem;
  background: var(--t-control);
  color: var(--t-texto);
  text-align: left;
  cursor: pointer;
}

.lucha-cambio:hover:not(:disabled) {
  background: var(--t-control-2);
}

.lucha-cambio:disabled {
  cursor: default;
  opacity: 0.5;
}

.lucha-cambio.en-campo {
  box-shadow: inset 0 0 0 2px rgba(var(--color-vista), 0.7);
  opacity: 0.8;
}

.lucha-cambio.caido .lucha-retrato {
  filter: grayscale(1);
}

.lucha-cambio .lucha-retrato {
  width: 2rem;
  height: 2rem;
}

/* Elegir: los ataques y, a su derecha, Mega / Z / Dinamax / Tera */
.lucha-elegir {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.6rem 0.8rem;
  align-items: stretch;
}

/* La columna de la derecha: el registro y, debajo (a la altura del panel de ataques), cambiar */
.lucha-lateral {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-width: 0;
}

.lucha-cambios {
  padding: 0.75rem;
  border-radius: 14px;
  background: var(--t-panel);
}

.lucha-cambios.destacado {
  box-shadow: inset 0 0 0 2px rgb(var(--color-vista));
}

.lucha-cambios h3 {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
}

.lucha-cambios-mini {
  display: grid;
  grid-template-columns: repeat(auto-fill, 3.3rem);
  gap: 0.35rem;
}

.lucha-cambio-mini {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  width: 3.3rem;
  padding: 0.25rem;
  border: none;
  border-radius: 0.6rem;
  background: var(--t-control);
  cursor: pointer;
}

.lucha-cambio-mini:hover:not([aria-disabled="true"]) {
  background: var(--t-control-2);
}

.lucha-cambio-mini .lucha-retrato {
  width: 2.6rem;
  height: 2.6rem;
}

.lucha-cambio-mini .lucha-ps {
  width: 100%;
  height: 0.3rem;
  margin: 0;
}

.lucha-cambio-mini[aria-disabled="true"] {
  opacity: 0.5;
  cursor: default;
}

.lucha-cambio-mini.en-campo {
  box-shadow: inset 0 0 0 2px rgb(var(--color-vista));
  opacity: 0.85;
}

.lucha-cambio-mini.caido .lucha-retrato {
  filter: grayscale(1);
}

.lucha-cambio-mini .lucha-hueco-estado {
  bottom: 0.6rem;
}

/* Elección sellada y el rival aún sin elegir: qué elegiste y el botón para cancelarla, bien a la vista */
.lucha-elegida {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1rem;
}

.lucha-elegida p {
  margin: 0;
}

.lucha-elegida .lucha-cancelar-eleccion {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 1.1rem;
  font-size: 1rem;
  font-weight: bold;
}

@media (max-width: 700px) {
  .lucha-elegir {
    grid-template-columns: minmax(0, 1fr);
  }
}

.lucha-cambio-datos {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.lucha-cambio-datos strong {
  overflow: hidden;
  font-size: 0.88rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lucha-cambio-datos small {
  font-size: 0.72rem;
  opacity: 0.75;
}

/* El final */
.lucha-final {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
}

.lucha-final strong {
  font-family: var(--letra-titulos);
  font-size: 1.3rem;
}

.lucha-final.gana strong { color: var(--t-bien); }

.lucha-final small {
  flex-basis: 100%;
  opacity: 0.75;
}

.lucha-final .lucha-volver {
  margin-left: auto;
}

/* ---------- El registro ---------- */

.lucha-registro {
  display: flex;
  flex-direction: column;
  height: calc(max(16rem, min(42rem, calc(100vh - 22rem))) + 3.4rem);
  box-sizing: border-box;
  padding: 0.75rem;
  border-radius: 14px;
  background: var(--t-panel);
}

.lucha-registro h3 {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
}

.lucha-registro-lista {
  flex: 1;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  font-size: 0.84rem;
}

.lucha-registro-lista li {
  padding: 0.12rem 0;
}

.lucha-registro-lista li.turno {
  margin-top: 0.55rem;
  padding-top: 0.4rem;
  border-top: 1px solid rgba(var(--t-tinte), 0.12);
  font-weight: bold;
  color: color-mix(in srgb, rgb(var(--color-vista)) var(--t-vivo), var(--t-texto));
}

/* Las habilidades que saltan («[Intimidación del Gyarados rival]»). No «.aviso»: esa clase es la de
   las tarjetas de la campana (layout.css) y les pondría su raya encima de la primera letra */
.lucha-registro-lista li.lucha-linea-habilidad {
  font-style: italic;
  opacity: 0.75;
}

/* ---------- Bocadillos (al pasar el ratón por un Pokémon o un ataque) ----------
   Las fichas de «Crear equipo» (css/equipos.css: .ficha-stats, .stat, .ataque, .ficha-ataque) con lo
   que hace falta en un combate: el nivel, los PS, los PP de cada ataque y la eficacia. */

.lucha-bocadillo p {
  margin: 0.3rem 0 0;
  font-size: 0.82rem;
}

.lucha-bocadillo-nivel {
  margin-left: auto;
  padding-left: 0.5rem;
  opacity: 0.7;
}

.lucha-bocadillo .ficha-titulo {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
}

.lucha-bocadillo-tipos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.2rem 0 0.45rem;
}

.lucha-bocadillo-tipo {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: var(--c);
  color: #fff;
  font-size: 0.75rem;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.lucha-bocadillo-ps {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.lucha-bocadillo .stat-nombre em {
  font-style: normal;
  font-weight: bold;
}

.lucha-bocadillo .stat-nombre em.sube { color: var(--t-bien); }
.lucha-bocadillo .stat-nombre em.baja { color: var(--t-mal, #e74c3c); }

.lucha-bocadillo-etiqueta {
  display: block;
  margin: 0.55rem 0 0.25rem;
  font-size: 0.7rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.7;
}

/* Los ataques, como en «Crear equipo» pero más apretados */
.lucha-bocadillo-ataques {
  gap: 0.3rem;
  margin-top: 0.45rem;
}

.lucha-bocadillo .ataque {
  padding: 0.3rem 0.5rem;
  font-size: 0.82rem;
}

.lucha-bocadillo .ataque .icono-tipo {
  width: 0.9rem;
  height: 0.9rem;
}

.lucha-bocadillo-pp {
  margin-left: auto;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.lucha-bocadillo .ficha-tipos {
  margin-top: 0.5rem;
}

.lucha-bocadillo-ataque {
  width: 18rem;
}

.lucha-bocadillo-contra {
  margin: 0.5rem 0 0;
  padding-top: 0.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  font-size: 0.8rem;
}

/* ---------- Los dos equipos, siempre a la vista (encima del campo) ---------- */

.lucha-equipos-barra {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin: 0 0 0.5rem;
}

.lucha-equipo-fila {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.lucha-equipo-nombre {
  font-family: var(--letra-titulos);
  font-weight: bold;
  white-space: nowrap;
}

.lucha-equipo-fila.mio .lucha-equipo-nombre { color: color-mix(in srgb, #5fa8ff 70%, var(--t-texto)); }
.lucha-equipo-fila.suyo .lucha-equipo-nombre { color: color-mix(in srgb, #ff7a6b 70%, var(--t-texto)); }

.lucha-huecos {
  display: flex;
  gap: 0.3rem;
}

.lucha-hueco {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  width: 2.4rem;
  padding: 0.2rem;
  border-radius: 0.55rem;
  background: var(--t-panel);
  cursor: help;
}

.lucha-hueco .lucha-retrato {
  width: 2rem;
  height: 2rem;
}

.lucha-hueco .lucha-ps {
  width: 100%;
  height: 0.25rem;
  margin: 0;
}

.lucha-hueco.en-campo {
  box-shadow: inset 0 0 0 2px rgb(var(--color-vista));
}

.lucha-hueco.caido .lucha-retrato {
  filter: grayscale(1);
  opacity: 0.45;
}

.lucha-hueco.caido::after {
  content: "✕";
  position: absolute;
  top: 0.15rem;
  right: 0.3rem;
  color: var(--t-mal, #e74c3c);
  font-weight: 800;
  font-size: 0.8rem;
}

.lucha-hueco.desconocido {
  justify-content: center;
  height: 2.65rem;
  box-sizing: border-box;
  border: 1.5px dashed rgba(var(--t-tinte), 0.3);
  background: transparent;
  font-weight: 800;
  opacity: 0.6;
  cursor: default;
}

.lucha-hueco-estado {
  position: absolute;
  bottom: 0.45rem;
  left: 50%;
  translate: -50% 0;
  padding: 0 0.2rem;
  border-radius: 0.2rem;
  color: #fff;
  font-size: 0.55rem;
  font-weight: 800;
  line-height: 1.3;
}

.lucha-hueco-estado.estado-brn { background: #e4703a; }
.lucha-hueco-estado.estado-par { background: #c9a91a; }
.lucha-hueco-estado.estado-slp { background: #8a8fa8; }
.lucha-hueco-estado.estado-frz { background: #5fb8d6; }
.lucha-hueco-estado.estado-psn,
.lucha-hueco-estado.estado-tox { background: #a04aa6; }

/* ---------- La vista previa: los 6 contra los 6 ---------- */

/* Los seis de cada uno en el campo antes de empezar (js/lucha/index.js, pintarPrevia): colgados de sus
   pies como los del combate, más pequeños y en zigzag */
.lucha-previa-campo {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.lucha-previa-sprite {
  position: absolute;
  translate: -50% -100%;
  line-height: 0;
  pointer-events: auto;
  cursor: help;
  animation: lucha-previa-entra 0.45s ease-out both;
}

.lucha-previa-sprite img {
  display: block;
  max-width: none;
  height: auto;
  image-rendering: pixelated;
}

@keyframes lucha-previa-entra {
  from { opacity: 0; transform: translateY(12%); }
}

.lucha-previa-tipos {
  display: inline-flex;
  gap: 0.2rem;
}

.lucha-previa-tipos .icono-tipo {
  width: 0.85rem;
  height: 0.85rem;
  background: var(--t-texto);
}


/* ---------- Lo resaltado en el registro y en la frase de abajo ----------
   Cada ataque del color de su tipo (en una pastilla suave), las habilidades en violeta y en cursiva,
   los objetos en ámbar, y los Pokémon de cada uno en su color: los tuyos azulados y los del rival rojizos. */

.lucha-r-ataque {
  color: color-mix(in srgb, var(--c) 72%, var(--t-texto));
  font-weight: 800;
}

.lucha-r-habilidad {
  color: color-mix(in srgb, #b48cff 75%, var(--t-texto));
  font-style: italic;
  font-weight: 700;
}

.lucha-r-objeto {
  color: color-mix(in srgb, #f0b429 75%, var(--t-texto));
  font-weight: 700;
}

.lucha-r-objeto::before {
  content: "◆ ";
  font-size: 0.7em;
  vertical-align: 0.1em;
}

.lucha-r-mio {
  color: color-mix(in srgb, #5fa8ff 70%, var(--t-texto));
  font-weight: 700;
}

.lucha-r-suyo {
  color: color-mix(in srgb, #ff7a6b 70%, var(--t-texto));
  font-weight: 700;
}

/* En el registro, la cabecera de cada turno se puede pulsar en la repetición */
.lucha-ir-turno {
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.lucha-ir-turno:hover {
  text-decoration: underline;
}

/* ---------- Repetición ---------- */

.lucha-repeticion {
  margin-top: 0.8rem;
  padding-top: 0.7rem;
  border-top: 1px solid rgba(var(--t-tinte), 0.12);
}

.lucha-repeticion .etiqueta-campo {
  margin-top: 0;
}

.lucha-rep-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

#vista-lucha .lucha-rep-boton {
  padding: 0.45rem 0.6rem;
}

#vista-lucha .lucha-rep-boton[data-rep="auto"] {
  background: rgb(var(--color-vista));
  color: var(--t-tinta);
}

#vista-lucha .lucha-rep-boton:disabled {
  opacity: 0.4;
  cursor: default;
}

.lucha-rep-barra {
  flex: 1 1 10rem;
  min-width: 8rem;
  accent-color: rgb(var(--color-vista));
}

.lucha-rep-turno {
  min-width: 7.5rem;
  font-size: 0.85rem;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* ---------- Móvil: uno debajo de otro ---------- */

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

  .lucha-registro {
    height: 18rem;
  }
}

@media (max-width: 560px) {
  .lucha-fila {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "foto texto"
      "equipos equipos"
      "estado botones";
  }

  .lucha-fila .lucha-estado {
    justify-self: start;
  }

  .lucha-ataques {
    grid-template-columns: minmax(0, 1fr);
  }

  .lucha-ficha-columna {
    width: 58%;
  }

  .lucha-ficha .lucha-retrato {
    display: none;
  }
}

/* ---------- Retar: el escenario (una miniatura de cada uno y «Aleatorio») ---------- */

.lucha-retar-escenas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.4rem;
}

.lucha-retar-escena {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.25rem;
  padding: 0.25rem;
  border: none;
  border-radius: 0.55rem;
  background: var(--t-control);
  color: var(--t-texto);
  font-size: 0.75rem;
  font-weight: bold;
  cursor: pointer;
}

.lucha-retar-escena:hover {
  background: var(--t-control-2);
}

.lucha-retar-escena.elegido {
  box-shadow: inset 0 0 0 2px rgb(var(--color-vista, 222, 112, 52));
}

.lucha-retar-escena-muestra {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 0.35rem;
  image-rendering: pixelated;
  object-fit: cover;
}

/* «Aleatorio»: el icono de mezclar en vez de una miniatura */
.lucha-retar-escena.aleatorio .lucha-retar-escena-muestra {
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(135deg, rgba(var(--t-tinte), 0.06) 0 6px, transparent 6px 12px);
}

.lucha-retar-escena.aleatorio .icono {
  width: 1.4rem;
  height: 1.4rem;
}