/* Sección «Versus»: el marcador compartido de cada locke */

.barra-versus {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.85rem;
}

#nuevo-locke {
  padding: 0.5rem 1.1rem;
  border: none;
  border-radius: 0.45rem;
  background: rgb(var(--color-vista));
  color: #fff;
  font-family: inherit;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

#nuevo-locke:hover {
  background: color-mix(in srgb, rgb(var(--color-vista)) 85%, white);
}

.versus-aviso {
  font-size: 0.9rem;
  opacity: 0.7;
}

.versus-lista {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

/* Sin sesión: qué son los lockes y el botón para entrar */
.versus-sin-sesion {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  width: min(34rem, 100%);
  box-sizing: border-box;
  margin: 3rem auto 0;
  padding: 2rem 1.75rem;
  border-radius: 0.9rem;
  background: var(--t-panel);
  text-align: center;
}

.versus-sin-sesion > .icono {
  width: 2.6rem;
  height: 2.6rem;
  color: color-mix(in srgb, rgb(var(--color-vista)) var(--t-vivo), black);
}

.versus-sin-sesion h2 {
  margin: 0;
  font-size: 1.6rem;
}

.versus-sin-sesion p {
  margin: 0;
  color: var(--t-gris-2);
  line-height: 1.45;
}

.versus-entrar {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.5rem;
  padding: 0.7rem 1.3rem;
  border: none;
  border-radius: 0.5rem;
  background: rgb(var(--color-vista));
  color: #fff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

.versus-entrar:hover {
  background: color-mix(in srgb, rgb(var(--color-vista)) 85%, white);
}

.versus-entrar .icono {
  width: 1.1rem;
  height: 1.1rem;
}

.versus-sin-nube {
  margin: 1.5rem 0;
  font-size: 0.95rem;
  opacity: 0.7;
  text-align: center;
}

/* Detrás de los últimos 5: despliega (o vuelve a plegar) todos los demás */
.versus-ver-mas,
.versus-ver-quitados {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.75rem;
  border: 1px dashed rgba(var(--t-tinte), 0.25);
  border-radius: 0.7rem;
  background: transparent;
  color: var(--t-texto);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: bold;
  cursor: pointer;
}

.versus-ver-mas:hover,
.versus-ver-quitados:hover {
  border-color: rgba(var(--color-vista), 0.7);
  background: rgba(var(--color-vista), 0.08);
}

.versus-ver-mas .icono,
.versus-ver-quitados .icono {
  width: 1rem;
  height: 1rem;
}

/* ---------- Tarjeta de un locke ---------- */

/* El color del tipo asoma por la izquierda y se difumina en la cabecera: el título es lo primero
   que se lee; debajo, el camino (combates), las fichas de los jugadores y, al pie, los atajos. */

.locke {
  border-left: 0.35rem solid var(--color-locke, #3498db);
  border-radius: 0.9rem;
  background: var(--t-panel);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.locke.cerrado {
  opacity: 0.75;
}

.locke-cabecera {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.9rem 1.1rem 0.75rem;
  border-bottom: 1px dashed rgba(var(--t-tinte), 0.14);
  background: linear-gradient(100deg, color-mix(in srgb, var(--color-locke, #3498db) 17%, transparent), transparent 100%);
}

.locke-titular {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1;
  min-width: 0;
}

/* El tipo, como la etiqueta de una pestaña de cuaderno: una rayita y el nombre en su color */
.locke-tipo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: color-mix(in srgb, var(--color-locke, #3498db) var(--t-vivo), black);
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.locke-tipo::before {
  content: "";
  width: 1.3rem;
  height: 3px;
  border-radius: 2px;
  background: currentColor;
}

/* En la tarjeta, esa rayita es el «−» que resume el locke; resumido, le sale el palo y es un «+» */
.locke-tipo:has(.locke-plegar)::before {
  content: none;
}

.locke-plegar {
  position: relative;
  flex: none;
  width: 0.8rem;
  height: 2.5px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 2px;
  background: currentColor;
  color: inherit;
  cursor: pointer;
}

/* Lo que se puede pulsar es más grande que la raya */
.locke-plegar::before {
  content: "";
  position: absolute;
  inset: -0.5rem;
  border-radius: 0.4rem;
  transition: background 0.15s;
}

.locke-plegar:hover::before,
.locke-plegar:focus-visible::before {
  background: color-mix(in srgb, currentColor 16%, transparent);
}

.locke-plegar::after {
  content: "";
  position: absolute;
  left: calc(50% - 1.25px);
  top: calc(50% - 0.4rem);
  width: 2.5px;
  height: 0.8rem;
  border-radius: 2px;
  background: currentColor;
  transform: scaleY(0);
  transition: transform 0.26s ease-in-out;
}

:is(.locke.plegado, .locke.cerrando) .locke-plegar::after {
  transform: scaleY(1);
}

/* Resumido: la franja de color se queda sola, más baja, y a su derecha lo básico de cada jugador */
.locke .locke-titulo {
  transition: font-size 0.26s ease-in-out;
}

:is(.locke.plegado, .locke.cerrando) .locke-titulo {
  font-size: 1.35rem;
}

:is(.locke.plegado, .locke.cerrando) .locke-cabecera {
  align-items: center;
  border-bottom-color: transparent;
}

.locke-resumen {
  display: none;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

:is(.locke.plegado, .locke.cerrando) .locke-resumen {
  display: flex;
  animation: locke-resumen-entra 0.26s ease-out;
}

@keyframes locke-resumen-entra {
  from { opacity: 0; transform: translateX(0.5rem); }
}

.locke-resumen-uno {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.25rem 0.65rem 0.25rem 0.25rem;
  border-radius: 2rem;
  background: rgba(var(--t-oscurecer), 0.18);
  font-size: 0.85rem;
  font-weight: bold;
}

.locke-resumen-uno.eliminado {
  opacity: 0.55;
}

/* Con el marco que lleve, como las fotos de «Combates» */
.locke-resumen-cara {
  position: relative;
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  box-sizing: border-box;
  border: 0.12rem solid rgba(var(--t-tinte), 0.25);
  border-radius: 50%;
  background: var(--t-control);
  overflow: hidden;
}

.locke-resumen-cara.con-marco {
  --g: 0.6px;
}

.locke-resumen-cara img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.locke-resumen-corona .icono {
  width: 1rem;
  height: 1rem;
  color: color-mix(in srgb, #f1c40f var(--t-vivo), black);
}

.locke-resumen-dato {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  white-space: nowrap;
}

.locke-resumen-dato .icono {
  width: 0.9rem;
  height: 0.9rem;
  opacity: 0.7;
}

.locke.plegado > .locke-cuerpo {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .locke-plegar::after,
  .locke .locke-titulo {
    transition: none;
  }

  :is(.locke.plegado, .locke.cerrando) .locke-resumen {
    animation: none;
  }
}

@media (max-width: 700px) {
  :is(.locke.plegado, .locke.cerrando) .locke-cabecera {
    flex-wrap: wrap;
  }

  .locke-resumen {
    order: 3;
    flex-basis: 100%;
    justify-content: flex-start;
  }
}

.locke-titulo {
  margin: 0;
  font-size: 1.85rem;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.locke-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 1rem;
  margin-top: 0.2rem;
}

.locke-juego-nombre {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  font-weight: bold;
  opacity: 0.75;
}

.locke-juego-nombre .icono,
.locke-resultado .icono {
  width: 1rem;
  height: 1rem;
}

.locke-resultado {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.88rem;
  font-weight: bold;
  color: color-mix(in srgb, #f1c40f var(--t-vivo), black);
}

/* Terminar, editar, quitar y borrar: juntos en una tira con borde de puntos (como el botón de la
   ROM), pegada al extremo derecho, para que no floten sueltos */
.locke-acciones {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  margin-left: auto;
  padding: 0.15rem;
  border: 1px dashed rgba(var(--t-tinte), 0.3);
  border-radius: 0.7rem;
  background: rgba(var(--t-oscurecer), 0.15);
}

.locke-acciones button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  border-radius: 0.5rem;
  background: transparent;
  color: rgba(var(--t-texto-rgb), 0.65);
  cursor: pointer;
}

.locke-acciones .icono {
  width: 1.05rem;
  height: 1.05rem;
}

.locke-acciones button:hover {
  background: var(--t-control);
  color: var(--t-texto-fuerte);
}

.locke-acciones .locke-borrar:hover {
  background: var(--t-rojo-oscuro);
  color: #fff;
}

/* ---------- Ventana de editar ---------- */

/* Borrar, a la izquierda y en rojo: lejos de Guardar para no darle sin querer */
#locke-borrar {
  margin-right: auto;
  background: var(--t-rojo-oscuro);
  color: #fff;
}

#locke-borrar:hover {
  background: var(--t-rojo);
}

/* Los que ya están dentro, como etiquetas. Solo se puede echar a quien no ha contestado */
.locke-dentro {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.45rem;
}

.locke-dentro-uno {
  padding: 0.35rem 0.65rem;
  border-radius: 0.45rem;
  background: rgba(var(--color-vista), 0.12);
  box-shadow: inset 0 0 0 1px rgba(var(--color-vista), 0.4);
  font-size: 0.85rem;
  font-weight: bold;
}

.locke-dentro-uno.pendiente {
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(var(--t-tinte), 0.2);
  font-weight: normal;
}

.locke-dentro-uno small {
  opacity: 0.6;
}

/* La X para echar a alguien (o no añadir a quien acabas de elegir) */
.locke-dentro-uno {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* El «+» del final: una etiqueta más, con el estilo de los que están por añadir */
button.locke-anadir {
  justify-content: center;
  min-width: 2.2rem;
  border: none;
  color: var(--t-texto);
  font-family: inherit;
  cursor: pointer;
}

button.locke-anadir:hover {
  background: rgba(var(--t-tinte), 0.08);
  box-shadow: inset 0 0 0 1px rgba(var(--t-tinte), 0.45);
}

button.locke-anadir .icono {
  width: 0.9rem;
  height: 0.9rem;
}

/* Lista de amigos en la ventana del «+»: uno por fila */
#dialogo-elegir-amigos {
  width: min(24rem, 92vw);
}

#dialogo-elegir-amigos .locke-amigos {
  flex-direction: column;
  flex-wrap: nowrap;
  max-height: 55vh;
  overflow-y: auto;
}

#dialogo-elegir-amigos .elegir-ok {
  background: var(--t-bien-oscuro);
  color: #fff;
}

#dialogo-elegir-amigos .elegir-ok:disabled {
  opacity: 0.4;
  cursor: default;
}

#dialogo-elegir-amigos .elegir-cancelar {
  background: var(--t-control);
  color: var(--t-texto);
}

.locke-quitar,
.locke-desmarcar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2rem;
  height: 1.2rem;
  padding: 0;
  border: none;
  border-radius: 0.25rem;
  background: transparent;
  color: rgba(var(--t-texto-rgb), 0.6);
  cursor: pointer;
}

.locke-quitar:hover:not(:disabled),
.locke-desmarcar:hover {
  background: var(--t-rojo-oscuro);
  color: #fff;
}

.locke-quitar .icono,
.locke-desmarcar .icono {
  width: 0.8rem;
  height: 0.8rem;
}

/* Lo que no se puede cambiar (no eres quien lo creó, o ya ha empezado). Sin relleno y con el borde
   discontinuo: el fondo de los bloques es el mismo --t-fondo-2, así que con relleno no se veían. Se
   leen bien, pero se nota que no se pueden tocar */
#dialogo-nuevo-locke input:disabled,
#dialogo-nuevo-locke select:disabled,
#dialogo-nuevo-locke textarea:disabled {
  background: transparent;
  outline: 1px dashed rgba(var(--t-tinte), 0.45);
  outline-offset: -1px;
  color: rgba(var(--t-texto-rgb), 0.75);
  opacity: 1;
  cursor: not-allowed;
}

/* ---------- Descripción y atajos del pie ---------- */

.locke-descripcion {
  margin: 0;
  padding: 0.2rem 1.1rem 0.3rem;
  font-size: 0.9rem;
  line-height: 1.45;
  white-space: pre-wrap; /* se respetan los saltos de línea que escriba la persona */
  opacity: 0.75;
}

/* Rutas, Level caps, Normas, Cementerio...: botones de texto, sin caja hasta que se les apunta */
.locke-juego {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.3rem;
  padding: 0.5rem 0.8rem;
  border-top: 1px dashed rgba(var(--t-tinte), 0.14);
}

.locke-ir {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.7rem;
  border: none;
  border-radius: 0.5rem;
  background: transparent;
  color: rgba(var(--t-texto-rgb), 0.8);
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: bold;
  cursor: pointer;
}

.locke-ir:hover {
  background: color-mix(in srgb, var(--color-locke, #3498db) 20%, transparent);
  color: var(--t-texto-fuerte);
}

.locke-ir .icono {
  width: 0.95rem;
  height: 0.95rem;
  color: color-mix(in srgb, var(--color-locke, #3498db) var(--t-vivo), black);
}

/* ---------- Jugadores ---------- */

/* Una ficha por jugador, todas del mismo ancho y pegadas a la izquierda: si hay uno solo, el
   resto de la fila se queda vacío en vez de estirarse. auto-fill con un ancho máximo hace
   justo eso; las que no quepan bajan a la siguiente fila. */
.locke-jugadores {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 19rem));
  gap: 0.85rem;
  padding: 0.8rem 1.1rem 0.9rem;
}

/* La ficha: arriba, quién es; en medio, sus números en grande; abajo, medallas y partida.
   La tuya lleva la tira de arriba en el color del locke; las demás, apagada. */
.locke-jugador {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.85rem 0.95rem 0.55rem;
  border-radius: 0.8rem;
  background: var(--t-fondo-2);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 3px 0 rgba(var(--t-tinte), 0.1);
}

.locke-jugador.mio {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 3px 0 var(--color-locke, rgb(var(--color-vista)));
}

.locke-jugador.ganador {
  background-color: var(--t-panel-2); /* solo el color: el dibujo de su fondo, si tiene, se queda */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 3px 0 #f1c40f;
}

/* Invitado que todavía no ha entrado */
.locke-jugador.pendiente {
  opacity: 0.6;
}

.locke-persona {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.locke-pendiente {
  margin-left: auto;
  font-size: 0.68rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(var(--t-texto-rgb), 0.6);
}

.locke-cara {
  position: relative;
  flex: none;
  width: 3.3rem;
  height: 3.3rem;
  border-radius: 50%;
  border: 0.16rem solid var(--color-locke, #c0392b);
  background: var(--t-fondo);
  overflow: hidden;
  cursor: pointer;
}

.locke-cara img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* El nombre y, debajo, su título (si lleva). El título va fuera del nombre para que no se
   tache con él si está eliminado */
.locke-nombre-caja {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}

.locke-quien {
  max-width: 100%;
  min-width: 0;
  font-family: var(--letra-titulos);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.locke-quien small {
  font-family: var(--letra);
  font-size: 0.78rem;
  font-weight: normal;
  opacity: 0.6;
}

.locke-corona {
  color: color-mix(in srgb, #f1c40f var(--t-vivo), black);
}

.locke-corona .icono {
  width: 1.4rem;
  height: 1.4rem;
}

/* ---------- Quién va ganando (1.º, 2.º, 3.º) ----------
   Un galardón colgado del borde de arriba de la ficha, a la derecha: la cinta (dos tiras en V, con
   la punta en cola de golondrina) asoma por encima, por DETRÁS de la ficha, y la medalla queda
   DELANTE, montada en el borde. Oro con cinta roja, plata con cinta azul y bronce con cinta verde.
   Para que la cinta quede detrás de la ficha pero se vea sobre el locke, las fichas van en su
   propia capa (.locke-jugadores, isolation). Al entrar (.entra: la primera vez, o al cambiar de
   puesto), la medalla sube desde detrás de la ficha, asoma por encima y baja a ponerse delante.
   Se ve igual con cualquier tema. */
.locke-jugadores {
  isolation: isolate;
}

/* Con galardones, más aire encima de cada fila de fichas: la cinta no toca lo de arriba (los
   combates o la fila anterior) */
.locke-jugadores.con-galardones {
  padding-top: 1.4rem;
  row-gap: 1.4rem;
}

.puesto-1 { --metal-brillo: #fff6c4; --metal: #f1c40f; --metal-sombra: #c48a0c; --metal-canto: #8e6006; --metal-tinta: #5a3a00; --cinta: #d43a3a; --cinta-raya: #ffe2a8; }
.puesto-2 { --metal-brillo: #ffffff; --metal: #d3d9e3; --metal-sombra: #949daf; --metal-canto: #646e80; --metal-tinta: #2a303c; --cinta: #3566c4; --cinta-raya: #e2ebff; }
.puesto-3 { --metal-brillo: #ffe0bc; --metal: #d9924e; --metal-sombra: #a8642a; --metal-canto: #6e3c18; --metal-tinta: #3a1c06; --cinta: #2e8a4c; --cinta-raya: #dff4cf; }

/* La cinta: detrás de la ficha. Las dos tiras salen del centro de la medalla en V hacia arriba */
.locke-galardon-cinta {
  position: absolute;
  z-index: -1;
  top: -0.8rem;
  right: 0.7rem;
  width: 2.6rem;
  height: 1.85rem;
  pointer-events: none;
}

.locke-galardon-cinta::before,
.locke-galardon-cinta::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: calc(50% - 0.4rem);
  width: 0.8rem;
  height: 1.95rem;
  background: linear-gradient(90deg, var(--cinta) 0 30%, var(--cinta-raya) 30% 70%, var(--cinta) 70%);
  box-shadow: inset -0.12rem 0 0 rgba(0, 0, 0, 0.18);
  clip-path: polygon(0 0, 50% 0.32rem, 100% 0, 100% 100%, 0 100%);
  transform-origin: 50% 100%;
}

.locke-galardon-cinta::before {
  transform: rotate(-26deg);
}

.locke-galardon-cinta::after {
  transform: rotate(26deg);
}

/* La medalla: delante, montada en el borde de arriba. El canto oscuro, un aro en relieve, el número
   y un brillo que la cruza de vez en cuando; arriba, la anilla de donde cuelga */
.locke-galardon {
  position: absolute;
  z-index: 2;
  top: -0.55rem;
  right: 1.05rem;
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background:
    linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.75) 50%, transparent 60%) 120% 0 / 300% 100% no-repeat,
    radial-gradient(circle at 35% 30%, var(--metal-brillo) 0 14%, var(--metal) 50%, var(--metal-sombra));
  box-shadow:
    0 0 0 0.12rem var(--metal-canto),
    inset 0 0 0 0.16rem var(--metal-sombra),
    inset 0 0 0 0.24rem var(--metal-brillo),
    0 3px 6px rgba(0, 0, 0, 0.45);
  color: var(--metal-tinta);
  font-family: var(--letra-titulos);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 1px 0 var(--metal-brillo);
  cursor: help;
  animation: galardon-brilla 5s ease-in-out infinite;
}

.locke-galardon::before {
  content: "";
  position: absolute;
  top: -0.3rem;
  left: calc(50% - 0.32rem);
  width: 0.64rem;
  height: 0.3rem;
  border-radius: 0.15rem 0.15rem 0 0;
  background: linear-gradient(var(--metal-brillo), var(--metal-sombra));
  box-shadow: 0 0 0 0.08rem var(--metal-canto);
}

@keyframes galardon-brilla {
  0%, 70% { background-position: 120% 0, 0 0; }
  90%, 100% { background-position: -20% 0, 0 0; }
}

/* Al entrar: detrás de la ficha (escondida), sube hasta asomar por encima, pasa delante y baja a su
   sitio con un pequeño rebote. La cinta sube a la vez, siempre por detrás */
.locke-galardon.entra {
  animation: galardon-sale 0.9s cubic-bezier(0.3, 0.7, 0.4, 1) both, galardon-brilla 5s ease-in-out 0.9s infinite;
}

.locke-galardon-cinta.entra {
  animation: galardon-cinta-sale 0.9s cubic-bezier(0.3, 0.7, 0.4, 1) both;
}

@keyframes galardon-sale {
  0% { transform: translateY(1.6rem) scale(0.85); z-index: -1; }
  45% { transform: translateY(-0.55rem) scale(0.95); z-index: -1; }
  47% { z-index: 2; }
  72% { transform: translateY(0.12rem) scale(1.1); z-index: 2; }
  100% { transform: none; z-index: 2; }
}

@keyframes galardon-cinta-sale {
  0% { transform: translateY(1.2rem); }
  45% { transform: translateY(-0.2rem); }
  100% { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .locke-galardon,
  .locke-galardon.entra,
  .locke-galardon-cinta.entra {
    animation: none;
  }
}

/* En el resumen: una medallita colgada en la esquina de la foto (la cinta, ::before; la medalla con
   su número, ::after, que va encima) */
.locke-resumen-uno {
  position: relative;
}

.locke-resumen-galardon {
  position: absolute;
  top: -0.3rem;
  left: 1.2rem;
  width: 1.05rem;
  height: 1.4rem;
  cursor: help;
}

.locke-resumen-galardon::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0.2rem;
  width: 0.65rem;
  height: 0.55rem;
  background: linear-gradient(90deg, var(--cinta) 0 30%, var(--cinta-raya) 30% 70%, var(--cinta) 70%);
  clip-path: polygon(0 0, 100% 0, 75% 100%, 25% 100%);
}

.locke-resumen-galardon::after {
  content: attr(data-puesto);
  position: absolute;
  bottom: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--metal-brillo) 0 14%, var(--metal) 50%, var(--metal-sombra));
  box-shadow: 0 0 0 0.08rem var(--metal-canto), 0 1px 3px rgba(0, 0, 0, 0.45);
  color: var(--metal-tinta);
  font-family: var(--letra-titulos);
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1;
}

/* ---------- Eliminado: perdió la vida cero ---------- */

/* La ficha apagada y en gris, con la tira roja, la foto tachada por una calavera y una
   etiqueta «Eliminado» */
.locke-jugador.eliminado,
.locke-jugador.mio.eliminado {
  background:
    repeating-linear-gradient(-45deg, rgba(var(--t-rojo-rgb), 0.07) 0 0.6rem, transparent 0.6rem 1.2rem),
    #1f2029;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), inset 0 3px 0 var(--t-rojo-oscuro);
}

.locke-jugador.eliminado .locke-cara {
  border-color: #555a70;
}

.locke-jugador.eliminado .locke-cara img {
  filter: grayscale(1) brightness(0.55);
}

.locke-cara-fuera {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--t-rojo);
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.9));
}

.locke-cara-fuera .icono {
  width: 1.9rem;
  height: 1.9rem;
}

.locke-jugador.eliminado .locke-quien {
  color: rgba(var(--t-texto-rgb), 0.55);
  text-decoration: line-through;
  text-decoration-color: rgba(var(--t-rojo-rgb), 0.8);
  text-decoration-thickness: 2px;
}

.locke-eliminado {
  margin-left: auto;
  padding: 0.15rem 0.55rem;
  border-radius: 0.3rem;
  background: var(--t-rojo-oscuro);
  color: #fff;
  font-size: 0.68rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.locke-jugador.eliminado .locke-cifra.victorias {
  opacity: 0.5;
}

.locke-numero .locke-sin-vidas .icono {
  width: 2rem;
  height: 2rem;
}

/* Con 0 vidas aún se juega, pero ya es la vida cero: el número late */
.locke-cifra.vida-cero {
  border-radius: 0.5rem;
  animation: vida-cero 1.6s ease-in-out infinite;
}

@keyframes vida-cero {
  50% {
    background: rgba(var(--t-rojo-rgb), 0.16);
  }
}

@media (prefers-reduced-motion: reduce) {
  .locke-cifra.vida-cero {
    animation: none;
  }
}

/* ---------- Victorias y vidas ---------- */

/* Lo importante, en grande: dos números separados por una raya fina, cada uno con su etiqueta.
   Las cifras de los demás se ven igual de grandes, solo que sin botones. */

/* Las rayas llegan de borde a borde de la ficha (el margen negativo es su relleno lateral) */
.locke-cifras {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: calc(100% + 1.9rem);
  margin-inline: -0.95rem;
  border-block: 1px solid rgba(var(--t-tinte), 0.1);
}

.locke-cifra {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.45rem 0.2rem 0.35rem;
}

.locke-cifra + .locke-cifra {
  border-left: 1px solid rgba(var(--t-tinte), 0.1);
}

.locke-etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.68rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.75;
}

.locke-etiqueta .icono {
  width: 0.85rem;
  height: 0.85rem;
}

.locke-cifra.victorias .locke-etiqueta {
  color: color-mix(in srgb, #f1c40f var(--t-vivo), black);
}

.locke-cifra.vidas .locke-etiqueta {
  color: #e74c3c;
}

.locke-numero {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  min-height: 2.5rem;
}

.locke-numero button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--t-control);
  color: var(--t-texto);
  cursor: pointer;
}

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

.locke-numero button:disabled {
  opacity: 0.3;
  cursor: default;
}

.locke-numero .icono {
  width: 0.9rem;
  height: 0.9rem;
}

.locke-valor {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.4rem;
  font-family: var(--letra-titulos);
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
}

.locke-numero.marcador .locke-valor {
  color: color-mix(in srgb, #f1c40f var(--t-vivo), black);
}

.locke-numero.vidas .locke-valor {
  color: #e74c3c;
}

/* ---------- Medallas ---------- */

/* Las del juego, en fila (HGSS: Johto arriba y Kanto abajo), apagadas hasta conseguirlas */

.locke-medallas {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
}

.locke-medallas .locke-etiqueta {
  color: color-mix(in srgb, #e67e22 var(--t-vivo), black);
}

/* Una raya como la de las cifras entre las medallas y lo de debajo (la partida, o los caídos
   en la ficha de los demás) */
.locke-medallas:has(+ .locke-partida)::after {
  content: "";
  align-self: stretch;
  margin: 0.25rem -0.95rem 0;
  border-top: 1px solid rgba(var(--t-tinte), 0.1);
}

.locke-medallas-lista {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 0.2rem;
  width: 100%;
}

.locke-medalla {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  padding: 0;
  border: none;
  background: none;
}

button.locke-medalla {
  cursor: pointer;
  border-radius: 0.3rem;
}

button.locke-medalla:hover {
  background: var(--t-control);
}

.locke-medalla img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: grayscale(1) brightness(0.55);
  opacity: 0.45;
  transition: filter 0.2s, opacity 0.2s, transform 0.2s;
}

.locke-medalla.conseguida img {
  filter: drop-shadow(0 0 0.2rem rgba(255, 220, 120, 0.45));
  opacity: 1;
}

button.locke-medalla:hover img {
  transform: scale(1.12);
}

/* ---------- ROM (js/versus/combates.js) ---------- */

/* Un icono al final de la fila del nombre: gris si no se ha pasado, en verde si sí */
.locke-rom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: none;
  color: rgba(var(--t-texto-rgb), 0.45);
}

.locke-persona > .locke-rom {
  margin-left: auto;
}

.locke-persona > :is(.locke-pendiente, .locke-eliminado) + .locke-rom {
  margin-left: 0;
}

.locke-rom .icono {
  width: 1.15rem;
  height: 1.15rem;
}

button.locke-rom {
  border: 1px dashed rgba(var(--t-tinte), 0.3);
  cursor: pointer;
}

button.locke-rom.pasada {
  border-color: rgba(var(--t-bien-rgb), 0.6);
}

button.locke-rom:hover {
  background: var(--t-control);
  color: var(--t-texto);
}

.locke-rom.pasada,
button.locke-rom.pasada:hover {
  color: color-mix(in srgb, var(--t-bien) var(--t-vivo), black);
}

.locke-rom.pasada {
  background: rgba(var(--t-bien-rgb), 0.15);
}

/* ---------- Combates del locke ---------- */

.locke-combates {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: 0.5rem 1.1rem 0.2rem;
}

.locke-combate {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  min-width: 9.5rem;
  padding: 0.45rem 0.65rem;
  border: 1px dashed rgba(var(--t-tinte), 0.18);
  border-radius: 0.5rem;
  background: var(--t-fondo-2);
  color: var(--t-texto);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s;
}

.locke-combate:hover:not(:disabled) {
  transform: scale(1.03);
  border-color: var(--color-locke, rgb(var(--color-vista)));
}

.locke-combate:disabled {
  cursor: default;
}

.locke-combate.jugado {
  border-style: solid;
  border-color: transparent;
  background: var(--t-fondo);
  box-shadow: inset 3px 0 0 var(--color-locke, rgb(var(--color-vista)));
}

.combate-nombre {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.68rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-locke, rgb(var(--color-vista)));
}

.combate-nombre .icono {
  width: 0.8rem;
  height: 0.8rem;
}

.combate-resultado {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 1.5rem;
  font-size: 0.88rem;
  font-weight: bold;
}

.combate-pendiente {
  font-weight: normal;
  opacity: 0.5;
}

.combate-foto,
.combate-opcion-foto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--t-fondo);
  object-fit: cover;
  font-size: 0.75rem;
  font-weight: bold;
}

.combate-marcador {
  padding: 0.05rem 0.4rem;
  border-radius: 0.3rem;
  background: var(--t-control);
  font-size: 0.78rem;
}

.combate-titulo {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.combate-titulo .icono {
  width: 1.2rem;
  height: 1.2rem;
  color: var(--color-locke, rgb(var(--color-vista)));
}

/* Ventana de un combate: quién ganó y el marcador */
.combate-ganadores,
.combate-marcadores,
.terminar-lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.9rem;
}

.combate-opcion,
.combate-marcador-opcion,
.terminar-opcion {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.7rem;
  border: 2px solid transparent;
  border-radius: 0.5rem;
  background: var(--t-fondo-2);
  color: var(--t-texto);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: bold;
  cursor: pointer;
}

.combate-opcion:hover,
.combate-marcador-opcion:hover,
.terminar-opcion:hover {
  background: var(--t-panel-3);
}

.combate-opcion.elegido,
.combate-marcador-opcion.elegido,
.terminar-opcion.elegido {
  border-color: #f1c40f;
  background: var(--t-panel-4);
}

.combate-opcion .combate-opcion-foto,
.terminar-opcion .combate-opcion-foto {
  width: 1.9rem;
  height: 1.9rem;
}

/* Terminar: cada uno en una fila, con su ROM y sus victorias */
.terminar-propuesta {
  margin: 0 0 0.8rem;
  padding: 0.6rem 0.8rem;
  border-radius: 0.5rem;
  background: var(--t-fondo-2);
  box-shadow: inset 0 0 0 1px rgba(241, 196, 15, 0.45);
  color: color-mix(in srgb, #f1c40f var(--t-vivo), black);
  font-weight: bold;
}

.terminar-lista {
  flex-direction: column;
}

.terminar-opcion {
  width: 100%;
}

.terminar-nombre {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex: 1;
  text-align: left;
}

.terminar-dato {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 4.2rem;
  font-size: 0.8rem;
  opacity: 0.6;
}

.terminar-dato.bien {
  color: color-mix(in srgb, var(--t-bien) var(--t-vivo), black);
  opacity: 1;
}

.terminar-opcion .icono {
  width: 0.9rem;
  height: 0.9rem;
}

.locke-acciones .locke-terminar {
  width: auto;
  gap: 0.3rem;
  padding: 0 0.6rem;
  color: color-mix(in srgb, #f1c40f var(--t-vivo), black);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: bold;
}

.locke-acciones .locke-terminar:hover {
  background: #f1c40f;
  color: var(--t-tinta-2);
}

.locke-resultado.sin-ganador {
  color: rgba(var(--t-texto-rgb), 0.6);
}

/* ---------- Salón de la fama: equipo final y MVP ---------- */

.locke-salon,
.locke-salon-poner {
  min-height: 2.3rem;
}

.locke-salon {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  width: 100%;
}

.locke-salon-caras,
.salon-mvp-caras {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.2rem;
  flex: 1;
}

.salon-cara {
  position: relative;
  display: block;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 0.4rem;
  background: var(--t-panel);
  font: inherit;
  color: inherit;
}

.salon-cara img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 0.3rem;
  image-rendering: pixelated;
}

.salon-cara.mvp {
  border-color: #f1c40f;
}

.salon-mvp {
  position: absolute;
  left: 50%;
  bottom: -0.45rem;
  transform: translateX(-50%);
  padding: 0 0.2rem;
  border-radius: 0.2rem;
  background: #f1c40f;
  color: var(--t-tinta);
  font-size: 0.5rem;
  font-weight: bold;
  line-height: 1.3;
}

button.salon-cara {
  cursor: pointer;
}

button.salon-cara:hover {
  border-color: rgba(241, 196, 15, 0.6);
}

.salon-mvp-elegir,
.salon-pasan-elegir {
  margin-top: 0.8rem;
}

.salon-mvp-caras,
.salon-pasan-caras {
  margin-bottom: 0.6rem;
}

.salon-pasan-caras {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.2rem;
}

/* Los que pasan a la siguiente etapa de una cadena: el borde de color y una flecha */
.salon-cara.pasa {
  border-color: rgb(var(--color-vista));
}

.salon-pasa {
  position: absolute;
  top: -0.35rem;
  right: -0.25rem;
  padding: 0 0.25rem;
  border-radius: 0.5rem;
  background: rgb(var(--color-vista));
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1.3;
}

.locke-salon-poner,
.locke-salon-cambiar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.3rem 0.5rem;
  border: none;
  border-radius: 0.4rem;
  background: var(--t-control);
  color: var(--t-texto);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: bold;
  cursor: pointer;
}

.locke-salon-poner {
  width: 100%;
  color: color-mix(in srgb, #f1c40f var(--t-vivo), black);
}

.locke-salon-poner:hover,
.locke-salon-cambiar:hover {
  background: var(--t-control-2);
}

.locke-salon-poner .icono,
.locke-salon-cambiar .icono {
  width: 0.85rem;
  height: 0.85rem;
}

#dialogo-salon {
  width: min(30rem, 92vw);
}

/* Nombres de los combates en la ventana de crear o editar */
.campos-locke .campo-combates input {
  width: 5rem;
}

.locke-combates-nombres {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: -0.35rem 0 0.85rem;
}

.locke-combates-nombres:empty {
  display: none;
}

.locke-combate-nombre {
  flex: 1 1 9rem;
  min-width: 0;
  padding: 0.4rem 0.55rem;
  border: none;
  border-radius: 0.45rem;
  font-family: inherit;
  font-size: 0.88rem;
}

/* ---------- Diálogo de nuevo locke ---------- */

.campos-locke {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.7rem;
  margin-bottom: 0.85rem;
}

.campos-locke label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.8rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.85;
}

.campos-locke input,
.campos-locke select {
  padding: 0.45rem 0.55rem;
  border: none;
  border-radius: 0.45rem;
  font-family: inherit;
  font-size: 0.95rem;
  text-transform: none;
  letter-spacing: normal;
}

/* Juego: va en un <div> y no en un <label> porque lleva dos campos (desplegable y,
   con «Otro», la casilla de texto) */
.campos-locke .campo-juego-locke {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.8rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.campo-juego-locke > span:first-child {
  opacity: 0.85;
}

/* Desplegable de juego y casilla de «otro» (js/comun/campo-juego.js), también en el
   diálogo de lockes ganados */
.campo-juego {
  display: inline-flex;
  gap: 0.35rem;
  text-transform: none;
  letter-spacing: normal;
  font-weight: normal;
}

.campo-juego select,
.campo-juego input {
  min-width: 0;
  padding: 0.45rem 0.55rem;
  border: none;
  border-radius: 0.45rem;
  font-family: inherit;
  font-size: 0.95rem;
}

.campo-juego input {
  width: 9rem;
}

/* El nombre se queda con todo el ancho que sobre */
.campo-ancho {
  flex: 1;
  min-width: 12rem;
}

.campos-locke .campo-vidas input {
  width: 5rem;
}

/* La casilla de ilimitadas va en fila, no en columna como los demás campos */
.campos-locke .campo-casilla {
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.7rem;
  border-radius: 0.45rem;
  background: var(--t-fondo-2);
  font-size: 0.78rem;
  cursor: pointer;
}

.campos-locke .campo-casilla:hover {
  background: var(--t-panel-3);
}

.campos-locke .campo-casilla input {
  width: auto;
  padding: 0;
  accent-color: rgb(var(--color-vista));
  cursor: pointer;
}

/* La casilla que no se puede tocar (vidas ilimitadas con el locke ya empezado), como los campos de arriba */
#dialogo-nuevo-locke .campos-locke .campo-casilla:has(input:disabled) {
  background: transparent;
  outline: 1px dashed rgba(var(--t-tinte), 0.45);
  outline-offset: -1px;
  color: rgba(var(--t-texto-rgb), 0.75);
  cursor: not-allowed;
}

#dialogo-nuevo-locke .campos-locke .campo-casilla:has(input:disabled) input {
  outline: none;
  cursor: not-allowed;
}

/* ---------- Descripción ---------- */

.campo-descripcion {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 0.85rem;
  font-size: 0.8rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.85;
}

.campo-descripcion textarea {
  font-family: inherit;
  font-size: 0.95rem;
  text-transform: none;
  letter-spacing: normal;
  font-weight: normal;
}

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

.locke-amigos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.locke-amigo {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.7rem;
  border-radius: 0.45rem;
  background: var(--t-fondo-2);
  font-size: 0.9rem;
  cursor: pointer;
}

.locke-amigo:hover {
  background: var(--t-panel-3);
}

.locke-amigo input {
  accent-color: rgb(var(--color-vista));
  cursor: pointer;
}

.locke-sin-amigos {
  margin: 0;
  font-size: 0.9rem;
  opacity: 0.7;
}

/* ---------- Normas del locke (en la ventana) ---------- */

.locke-dentro + .etiqueta-campo {
  margin-top: 0.85rem;
}

/* Normas, rutas y level caps del locke: tres desplegables en fila */
.locke-elecciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 0.85rem;
}

.locke-eleccion {
  flex: 1 1 11rem;
  min-width: 0;
}

.locke-eleccion-ancha {
  flex-basis: 100%;
}

/* Árbitro: una casilla por norma que se vigila, y una ayuda debajo */
.locke-arbitro {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.locke-arbitro label {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.9rem;
  cursor: pointer;
}

.locke-arbitro-reglas {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding-left: 1.6rem;
}

.locke-arbitro-reglas[hidden] {
  display: none;
}

.locke-arbitro label input {
  margin-top: 0.2rem;
}

.locke-arbitro label small {
  display: block;
  opacity: 0.7;
}

/* Seguidores: el enlace, con su botón de copiar */
.locke-enlace {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.locke-enlace input {
  flex: 1;
  min-width: 0;
  font-size: 0.85rem;
}

.locke-enlace-copiar {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex: none;
  white-space: nowrap;
}

/* «Público» junto al juego en la cabecera del locke */
.locke-publico {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  opacity: 0.8;
}

.locke-publico .icono {
  width: 0.9rem;
  height: 0.9rem;
}

.locke-arbitro-ayuda {
  margin: 0.3rem 0 0;
  font-size: 0.8rem;
  opacity: 0.7;
}

.locke-randomizer-fila {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.locke-randomizer-fila .locke-normas-elegir {
  flex: 1;
  align-self: auto;
}

.locke-randomizer-editar {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.7rem;
  border: none;
  border-radius: 0.45rem;
  background: var(--t-panel-5);
  color: var(--t-texto);
  font-size: 0.9rem;
  white-space: nowrap;
  cursor: pointer;
}

.locke-randomizer-editar svg {
  width: 1em;
  height: 1em;
  flex: none;
}

.locke-randomizer-editar:hover {
  background: #424559;
}
.locke-randomizer-resumen {
  margin: 0;
  font-size: 0.85rem;
  opacity: 0.8;
}

.locke-normas,
.locke-randomizer,
.locke-rutas,
.locke-caps {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.locke-normas-elegir {
  align-self: stretch;
  min-width: 0;
  max-width: 100%;
  padding: 0.45rem 0.55rem;
  border: none;
  border-radius: 0.45rem;
  font-family: inherit;
  font-size: 0.95rem;
}

.locke-error {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.85rem;
  font-weight: bold;
  color: var(--t-rojo);
}

#locke-crear {
  background: var(--t-bien-oscuro);
  color: #fff;
}

#locke-cancelar {
  background: var(--t-control);
  color: var(--t-texto);
}

/* ---------- Cementerio ---------- */

#dialogo-cementerio {
  width: min(60rem, 94vw);
}

#dialogo-cementerio h2,
#dialogo-actividad h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

#dialogo-cementerio h2 .icono,
#dialogo-actividad h2 .icono {
  width: 1.2rem;
  height: 1.2rem;
}

.cementerio-cerrar,
.actividad-cerrar,
.cronica-cerrar {
  background: var(--t-control);
  color: var(--t-texto);
}

/* Una columna por jugador, una al lado de otra; si no caben, bajan */
.cementerio-columnas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.85rem;
  max-height: 65vh;
  overflow-y: auto;
}

.cementerio-jugador {
  padding: 0.75rem;
  border-radius: 0.7rem;
  background: var(--t-fondo-2);
}

/* La tuya, con el borde dorado de lo tuyo en Versus */
.cementerio-jugador.mio {
  box-shadow: inset 0 0 0 1px rgba(var(--color-vista), 0.4);
}

.cementerio-jugador header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.7rem;
}

.cementerio-cara {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.8rem;
  height: 1.8rem;
  overflow: hidden;
  border-radius: 50%;
  background: var(--t-control);
  font-weight: bold;
}

.cementerio-cara img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cementerio-nombre {
  min-width: 0;
  overflow: hidden;
  font-weight: bold;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.cementerio-cuenta {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: auto;
  font-weight: bold;
  color: var(--t-rojo);
}

.cementerio-cuenta .icono {
  width: 1rem;
  height: 1rem;
}

.tumbas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr));
  gap: 0.5rem;
}

/* Lápida: arriba redondeada, con el retrato apagado */
.tumba {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  min-height: 7rem;
  padding: 0.65rem 0.35rem 0.5rem;
  border: none;
  border-radius: 2.7rem 2.7rem 0.45rem 0.45rem;
  background: linear-gradient(#3d4054, var(--t-panel-2));
  color: var(--t-texto);
  font-family: inherit;
  text-align: center;
}

.tumba-cara {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  filter: grayscale(0.85) brightness(0.9);
  image-rendering: pixelated;
}

.tumba:hover .tumba-cara {
  filter: none;
}

/* Las tuyas se cambian de sitio arrastrándolas (js/versus/cementerio.js) */
.tumba.movible {
  cursor: grab;
}

.tumba.movible img {
  -webkit-user-drag: none; /* que se arrastre la lápida, no la foto */
}

.tumba.arrastrando {
  opacity: 0.4;
  outline: 2px dashed rgb(var(--color-vista));
}

.tumba-mote {
  max-width: 100%;
  overflow: hidden;
  font-size: 0.82rem;
  font-weight: bold;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.tumba-especie {
  max-width: 100%;
  overflow: hidden;
  font-size: 0.7rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  opacity: 0.6;
}

/* La «+» para apuntar uno: una lápida vacía con borde de puntos */
.tumba-nueva {
  justify-content: center;
  border: 1px dashed rgba(var(--t-tinte), 0.3);
  background: transparent;
  cursor: pointer;
}

.tumba-nueva:hover {
  border-color: var(--t-rojo);
  background: rgba(var(--t-rojo-rgb), 0.08);
}

.tumba-nueva .icono {
  width: 1.4rem;
  height: 1.4rem;
}

.tumba-quitar {
  position: absolute;
  top: 0.15rem;
  right: 0.15rem;
  display: none;
  padding: 0.2rem;
  border: none;
  border-radius: 0.3rem;
  background: var(--t-control);
  color: var(--t-texto);
  cursor: pointer;
}

.tumba:hover .tumba-quitar {
  display: flex;
}

/* Reacciones a un muerto: las que hay con su cuenta y una «+» que despliega las demás */
.tumba-reacciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.15rem;
  margin-top: auto;
  padding-top: 0.25rem;
}

.reaccion,
.reaccion-abrir,
.reaccion-opcion {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  padding: 0.05rem 0.25rem;
  border: 1px solid transparent;
  border-radius: 1rem;
  background: rgba(var(--t-oscurecer), 0.3);
  color: var(--t-texto);
  font-family: inherit;
  font-size: 0.75rem;
  line-height: 1.3;
  cursor: pointer;
}

.reaccion small {
  font-size: 0.65rem;
  font-weight: bold;
}

.reaccion.mia {
  border-color: rgb(var(--color-vista));
  background: rgba(var(--color-vista), 0.18);
}

.reaccion:hover,
.reaccion-abrir:hover,
.reaccion-opcion:hover {
  background: var(--t-control-2);
}

.reaccion-abrir .icono {
  width: 0.65rem;
  height: 0.65rem;
}

.reaccion-mas {
  position: relative;
}

.reaccion-opciones {
  position: absolute;
  bottom: calc(100% + 0.25rem);
  left: 50%;
  z-index: 3;
  display: none;
  gap: 0.15rem;
  padding: 0.25rem;
  border-radius: 1rem;
  background: var(--t-fondo);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  transform: translateX(-50%);
}

.reaccion-mas.abierto .reaccion-opciones {
  display: flex;
}

.reaccion-opcion {
  padding: 0.15rem 0.3rem;
  background: transparent;
  font-size: 1rem;
}

.reaccion-opcion:hover {
  transform: scale(1.2);
}

.tumba-quitar:hover {
  background: var(--t-rojo-oscuro);
}

.tumba-quitar .icono {
  width: 0.75rem;
  height: 0.75rem;
}

.cementerio-vacio {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.85rem;
  opacity: 0.5;
}

/* Las sugerencias del buscador de Pokémon salen debajo de su campo, por encima de la
   ventana si hace falta (si no, la ventana las cortaría y saldría una barra de scroll) */
#dialogo-muerte {
  overflow: visible;
}

.muerte-campo-pokemon {
  position: relative;
}

.muerte-campo-pokemon .sugerencias {
  text-transform: none;
  letter-spacing: normal;
  font-weight: normal;
}

/* ---------- Actividad ---------- */

#dialogo-actividad {
  width: min(36rem, 94vw);
}

.actividad-lista {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 65vh;
  overflow-y: auto;
}

/* Cada suceso, con un borde a la izquierda y el icono del color de su tipo (--color-suceso,
   abajo). Las clases van con «suceso-» delante: «cap», «ruta»... ya las usan otras secciones. */
.suceso {
  --color-suceso: #7f8bb0;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0.7rem;
  border-left: 3px solid var(--color-suceso);
  border-radius: 0.5rem;
  background: var(--t-fondo-2);
  font-size: 0.9rem;
}

.suceso-creado,
.suceso-entra      { --color-suceso: #9b59b6; }
.suceso-vida       { --color-suceso: #e84393; } /* vida recuperada */
.suceso-vida.resta,
.suceso-muerte     { --color-suceso: var(--t-rojo); }
.suceso-eliminado  { --color-suceso: #8b1e14; }
.suceso-victoria,
.suceso-combate    { --color-suceso: #e67e22; }
.suceso-rom        { --color-suceso: #1abc9c; }
.suceso-ganador    { --color-suceso: #f1c40f; }
.suceso-ruta       { --color-suceso: var(--t-bien); }
.suceso-cap        { --color-suceso: #3498db; }
.suceso-infraccion { --color-suceso: #f39c12; }

/* «Retirar» en un aviso del árbitro propio, detrás del texto */
.suceso-retirar {
  margin-left: 0.4rem;
  padding: 0.05rem 0.5rem;
  border: 1px solid currentColor;
  border-radius: 1rem;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: 0.75rem;
  opacity: 0.7;
  cursor: pointer;
  vertical-align: middle;
}

.suceso-retirar:hover {
  opacity: 1;
}

/* El icono, del mismo color (los de un Pokémon muerto son su retrato) */
.suceso .suceso-icono {
  color: var(--color-suceso);
}

.suceso-eliminado .suceso-icono {
  color: var(--t-rojo);
}

.suceso-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--t-control);
  color: var(--t-texto);
}

.suceso-icono .icono {
  width: 1rem;
  height: 1rem;
}

.suceso-cara {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
}

.suceso-cuerpo {
  flex: 1;
  min-width: 0;
  line-height: 1.35;
}

/* Las reacciones van detrás del texto, en la misma línea si caben; la «+» despliega las
   opciones al lado (no flotando, porque la lista recorta lo que sobresale). */
.suceso-reacciones {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem;
  margin-left: 0.3rem;
  vertical-align: middle;
}

.suceso-reacciones .reaccion-mas {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
}

.suceso-reacciones .reaccion-abrir {
  opacity: 0.5;
}

.suceso:hover .reaccion-abrir,
.suceso-reacciones .reaccion-abrir:focus-visible,
.suceso-reacciones .reaccion-mas.abierto .reaccion-abrir {
  opacity: 1;
}

.suceso-reacciones .reaccion-opciones {
  position: static;
  padding: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

.suceso-cuando {
  flex: none;
  font-size: 0.75rem;
  opacity: 0.5;
}

.actividad-vacia {
  margin: 0;
  font-size: 0.9rem;
  opacity: 0.6;
}

/* ---------- Cadenas de lockes (js/versus/index.js) ---------- */

.cadena {
  margin-bottom: 1.1rem;
  padding: 1rem 1.1rem 1.1rem;
  border-left: 4px solid var(--color-locke);
  border-radius: 1rem;
  background: var(--t-fondo-2);
}

.cadena-cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.cadena-titulo {
  margin: 0.1rem 0 0;
  font-size: 1.6rem;
  line-height: 1.05;
}

.cadena-etapa-n {
  font-family: var(--letra-titulos);
  font-size: 1rem;
  white-space: nowrap;
  opacity: 0.8;
}

/* Una barrita por etapa: llena las hechas, a medias la de ahora, vacías las que faltan */
.cadena-pasos {
  display: flex;
  gap: 0.3rem;
  margin: 0.9rem 0 0.6rem;
  padding: 0;
  overflow-x: auto;
  list-style: none;
}

.cadena-paso {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 4.4rem;
  font-size: 0.72rem;
}

.cadena-paso i {
  height: 0.5rem;
  border-radius: 0.3rem;
  background: var(--t-control);
}

.cadena-paso.hecha i {
  background: var(--color-locke);
}

.cadena-paso.actual i {
  background: linear-gradient(90deg, var(--color-locke) 50%, var(--t-control) 50%);
}

.cadena-paso span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.75;
}

.cadena-paso.futura span {
  opacity: 0.45;
}

.cadena-jugadores {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  margin: 0.5rem 0;
  padding: 0;
  list-style: none;
}

.cadena-jugador {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cadena-jugador.eliminado {
  opacity: 0.55;
}

.cadena-vidas {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--letra-titulos);
}

.cadena-vidas .icono {
  width: 0.9rem;
  height: 0.9rem;
  color: #e84393;
}

.cadena-llevan {
  display: inline-flex;
  gap: 0.1rem;
}

.cadena-llevan img {
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 0.4rem;
  background: var(--t-fondo);
}

.cadena-accion {
  margin: 0.8rem 0 0.2rem;
}

.cadena-siguiente {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  border: none;
  border-radius: 0.5rem;
  background: rgb(var(--color-vista));
  color: #fff;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: bold;
  cursor: pointer;
}

.cadena-siguiente .icono {
  width: 1rem;
  height: 1rem;
}

.cadena-nota {
  font-size: 0.9rem;
  opacity: 0.75;
}

.cadena-etapas {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-top: 0.9rem;
}

.cadena-etapa > summary {
  padding: 0.5rem 0.8rem;
  border-radius: 0.6rem;
  background: var(--t-fondo);
  font-size: 0.9rem;
  cursor: pointer;
}

.cadena-etapa[open] > summary {
  margin-bottom: 0.6rem;
}

/* El formulario del locke: los números de la cadena en dos columnas */
.locke-cadena-campos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem 0.9rem;
  margin: 0.6rem 0 0;
}

.locke-cadena-campos[hidden] {
  display: none;
}

.locke-cadena-campo {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.9rem;
}

.locke-cadena-campo small {
  opacity: 0.65;
}

.locke-cadena-nombre {
  grid-column: 1 / -1;
}

@media (max-width: 34rem) {
  .locke-cadena-campos {
    grid-template-columns: 1fr;
  }
}

/* La ventana de la siguiente etapa */
#dialogo-etapa {
  width: min(34rem, 94vw);
}

.etapa-cuerpo {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.etapa-jugadores {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.etapa-jugadores li {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.45rem 0.7rem;
  border-radius: 0.5rem;
  background: var(--t-fondo-2);
}

.etapa-jugadores li > strong {
  flex: 1;
  min-width: 0;
}

.etapa-jugadores .icono {
  width: 0.9rem;
  height: 0.9rem;
  color: #e84393;
  vertical-align: -0.1em;
}

/* ---------- Crónica de un locke terminado (js/versus/cronica.js) ---------- */

#dialogo-cronica {
  width: min(46rem, 94vw);
}

#dialogo-cronica h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

#dialogo-cronica h2 .icono {
  width: 1.2rem;
  height: 1.2rem;
}

/* Con margen por dentro (y negativo por fuera) para que el scroll no recorte los bordes que sobresalen */
.cronica-cuerpo {
  max-height: 65vh;
  margin: -0.4rem -0.5rem 0;
  padding: 0.4rem 0.5rem 0.2rem;
  overflow-y: auto;
}

.cronica-cuerpo h3 {
  margin: 1.2rem 0 0.5rem;
  font-family: var(--letra-titulos);
  font-size: 1.1rem;
}

.cronica-resumen {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0 0 0.9rem;
  font-size: 0.9rem;
}

.cronica-resultado {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--letra-titulos);
  font-size: 1.2rem;
}

.cronica-resultado .icono {
  width: 1.1rem;
  height: 1.1rem;
}

.cronica-resultado.sin-ganador {
  opacity: 0.7;
}

.cronica-jugadores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.7rem;
}

.cronica-jugador {
  padding: 0.7rem 0.85rem;
  border-left: 3px solid rgb(var(--color-vista));
  border-radius: 0.7rem;
  background: var(--t-fondo-2);
}

.cronica-jugador.ganador {
  border-left-color: #e6c27a;
}

.cronica-jugador.eliminado {
  opacity: 0.8;
}

.cronica-jugador header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
}

.cronica-foto {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  object-fit: cover;
}

.cronica-corona .icono {
  width: 1rem;
  height: 1rem;
  color: #e6c27a;
}

.cronica-fuera {
  font-size: 0.75rem;
  opacity: 0.7;
}

.cronica-cifras {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr));
  gap: 0.4rem 0.6rem;
  margin: 0;
}

.cronica-cifras dt {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  opacity: 0.6;
}

.cronica-cifras dd {
  margin: 0;
  font-family: var(--letra-titulos);
  font-size: 1.05rem;
}

.cronica-equipo {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.65rem;
}

.cronica-cara {
  position: relative;
}

.cronica-cara img {
  display: block;
  width: 2.7rem;
  height: 2.7rem;
  border-radius: 0.5rem;
  background: var(--t-fondo);
}

.cronica-cara.mvp img {
  outline: 2px solid #e6c27a;
}

.cronica-cara small {
  position: absolute;
  right: -0.15rem;
  bottom: -0.15rem;
  padding: 0 0.25rem;
  border-radius: 0.5rem;
  background: #e6c27a;
  color: #1d2826;
  font-size: 0.55rem;
  font-weight: 800;
}

.cronica-destacados {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.92rem;
  line-height: 1.55;
}

.cronica-hitos {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* ---------- Equipos de cada combate ---------- */

/* En la casilla del combate de la tarjeta: los de cada uno en pequeño */
.combate-equipos-mini {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
}

.combate-equipos-mini .cara-equipo img {
  width: 1.15rem;
  height: 1.15rem;
}

.combate-equipos-mini .caras-equipo {
  gap: 0.05rem;
}

.combate-vs {
  font-size: 0.6rem;
  font-weight: bold;
  text-transform: uppercase;
  opacity: 0.5;
}

/* Cerrado: se abre para verlo, sin cambiar nada */
.locke-combate.solo-ver {
  cursor: zoom-in;
}

/* En la ventana del combate: una fila por jugador */
.combate-equipos {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0.9rem;
}

/* Todo en una línea: foto, nombre, el equipo y los botones */
.combate-equipo {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.6rem;
  border-radius: 0.5rem;
  background: var(--t-fondo-2);
}

.combate-equipo.mio {
  box-shadow: inset 0 0 0 1px rgba(var(--color-vista), 0.35);
}

.combate-equipo .combate-opcion-foto {
  width: 1.9rem;
  height: 1.9rem;
}

.combate-equipo-nombre {
  flex: 0 1 auto;
  min-width: 2.5rem;
  overflow: hidden;
  font-weight: bold;
  font-size: 0.9rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Los seis retratos en fila, algo más pequeños que en otras partes */
.combate-equipo .caras-equipo {
  flex: none;
  flex-wrap: nowrap;
  gap: 0.1rem;
}

.combate-equipo .cara-equipo img {
  width: 1.6rem;
  height: 1.6rem;
}

.combate-sin-equipo {
  font-size: 0.85rem;
  opacity: 0.5;
}

/* «Showdown» y «Cambiar», juntos a la derecha */
.combate-equipo-botones {
  display: inline-flex;
  flex: none;
  gap: 0.35rem;
  margin-left: auto;
}

.combate-equipo-botones:not(:has(button)) {
  display: none;
}

.combate-elegir-equipo,
.combate-showdown,
.combate-lucha {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.6rem;
  font-size: 0.82rem;
  line-height: 1.2;
  white-space: nowrap;
}

/* Es un enlace (abre Showdown): con la misma pinta que «Cambiar» */
.combate-showdown {
  text-decoration: none;
}

/* Recién copiado: en verde un momento */
.combate-showdown.copiado {
  background: rgba(var(--t-verde-rgb, 82, 183, 136), 0.25);
  color: var(--t-texto-fuerte);
}

.combate-showdown-ayuda {
  margin: -0.4rem 0 0.9rem;
  font-size: 0.82rem;
  line-height: 1.45;
  opacity: 0.8;
}

.combate-showdown-ayuda.error {
  color: var(--t-rojo, #e0574a);
  opacity: 1;
}

.combate-showdown .icono,
.combate-lucha .icono,
.combate-elegir-equipo .icono {
  width: 1rem;
  height: 1rem;
}

#dialogo-combate.solo-ver .combate-opcion:disabled,
#dialogo-combate.solo-ver .combate-marcador-opcion:disabled {
  cursor: default;
  opacity: 0.55;
}

#dialogo-combate.solo-ver .combate-opcion.elegido:disabled,
#dialogo-combate.solo-ver .combate-marcador-opcion.elegido:disabled {
  opacity: 1;
}
/* ---------- Partida vinculada (js/versus/partida.js) ---------- */

.locke-partida {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  min-height: 2.1rem;
}

.locke-partida-abrir {
  flex: 1;
  display: flex;
  justify-content: center;
  padding: 0.25rem;
  border: none;
  border-radius: 0.45rem;
  background: rgba(var(--t-oscurecer), 0.2);
  cursor: pointer;
}

.locke-partida-abrir:hover {
  background: var(--t-control);
}

.locke-partida-abrir .cara-equipo img {
  width: 1.75rem;
  height: 1.75rem;
}

.locke-partida-vincular,
.locke-partida-reanudar,
.locke-partida-muertos,
.locke-partida-jugar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.35rem 0.5rem;
  border: none;
  border-radius: 0.45rem;
  background: var(--t-control);
  color: var(--t-texto);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: bold;
  white-space: nowrap;
  cursor: pointer;
}

.locke-partida-vincular:first-child {
  flex: 1;
}

.locke-partida-vincular:hover,
.locke-partida-reanudar:hover,
.locke-partida-muertos:hover,
.locke-partida-jugar:hover {
  background: var(--t-control-2);
}

.locke-partida-reanudar {
  color: var(--color-locke, rgb(var(--color-vista)));
}

/* «Jugar» (el emulador de la web), en el color de esa sección */
.locke-partida-jugar {
  color: color-mix(in srgb, rgb(186, 62, 102) 75%, var(--t-texto));
}

.locke-partida-muertos {
  background: rgba(var(--t-rojo-rgb), 0.2);
  color: var(--t-rojo);
}

.locke-partida .icono,
.locke-actividad-de .icono {
  width: 0.85rem;
  height: 0.85rem;
}

#dialogo-partida {
  width: min(60rem, 94vw);
}

#dialogo-partida h2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

#dialogo-partida h2 .icono {
  width: 1.3rem;
  height: 1.3rem;
}

.partida-cuerpo:focus {
  outline: none;
}

#dialogo-partida h2 small {
  font-size: 0.75rem;
  font-weight: normal;
  opacity: 0.6;
}

.partida-cuerpo {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  /* Alto fijo: la ventana no cambia de tamaño con lo que haya (ni al pasar de cajas a bolsa) */
  height: min(76vh, 54rem);
  overflow-y: auto;
  /* La barra de scroll, separada de los Pokémon (y, con el editor al lado, en medio del hueco) */
  padding-right: 0.6rem;
}

.partida-caja h3 {
  margin: 0 0 0.4rem;
  font-size: 0.85rem;
  min-height: 1.6rem;
}

.partida-caja h3 small {
  opacity: 0.5;
}

/* Bloqueada en el juego (Sol / Luna): se ve, pero apagada */
.partida-caja.bloqueada .partida-pokemon {
  opacity: 0.45;
}

.partida-candado {
  display: inline-flex;
  color: var(--t-gris-2);
}

.partida-pokemon {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr));
  gap: 0.35rem;
}

.partida-ficha {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.35rem 0.2rem;
  border-radius: 0.45rem;
  background: rgba(var(--t-oscurecer), 0.2);
  font-size: 0.72rem;
  text-align: center;
}

.partida-ficha small {
  opacity: 0.55;
}

/* Los huevos: su especie, con un huevo en la esquina del retrato */
.partida-ficha {
  position: relative;
}

.partida-huevo {
  position: absolute;
  top: 0.25rem;
  left: calc(50% + 0.55rem);
  display: flex;
  padding: 0.12rem;
  border-radius: 0.3rem;
  background: #f1c40f;
  color: var(--t-tinta);
}

.partida-huevo .icono {
  width: 0.75rem;
  height: 0.75rem;
}

.partida-ficha-nombre {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.partida-cara {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: rgba(var(--t-tinte), 0.06);
  image-rendering: pixelated;
}

.partida-caja h3 {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* Meter equipo, copiar a Mis equipos, exportar la caja e interruptor de caja de muertos, en la
   cabecera de cada bloque */
.partida-meter,
.partida-copiar,
.partida-exportar,
.partida-marcar-muertos {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: auto;
  padding: 0.3rem 0.6rem;
  border: none;
  border-radius: 0.4rem;
  background: var(--t-control);
  color: var(--t-texto);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: bold;
  cursor: pointer;
}

.partida-meter + .partida-copiar,
.partida-exportar + .partida-marcar-muertos {
  margin-left: 0;
}

.partida-meter:hover,
.partida-copiar:hover,
.partida-exportar:hover,
.partida-marcar-muertos:hover {
  background: var(--t-control-2);
}

.partida-copiar:disabled,
.partida-exportar:disabled {
  opacity: 0.6;
  cursor: progress;
}

.partida-meter .icono,
.partida-copiar .icono,
.partida-exportar .icono,
.partida-marcar-muertos .icono {
  width: 0.85rem;
  height: 0.85rem;
}

.partida-marcar-muertos {
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(var(--t-tinte), 0.15);
  color: rgba(var(--t-texto-rgb), 0.5);
}

.partida-marcar-muertos.activa {
  background: rgba(var(--t-rojo-rgb), 0.2);
  box-shadow: inset 0 0 0 1px rgba(var(--t-rojo-rgb), 0.6);
  color: var(--t-rojo);
}

.partida-marcar-muertos.activa:hover {
  background: rgba(var(--t-rojo-rgb), 0.3);
}

/* Las cajas de muertos, en rojo apagado */
.partida-caja.de-muertos .partida-ficha {
  background: rgba(var(--t-rojo-rgb), 0.1);
}

.partida-caja.de-muertos .partida-cara {
  filter: grayscale(0.6);
}

/* Arriba del todo: a la izquierda las pestañas (o el título); a la derecha, los cambios sin
   guardar, Copias, volver a vincular, desvincular (en rojo) y la ✕ de cerrar */
.partida-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  margin-bottom: 0.8rem;
}

.partida-cabecera > h2 {
  margin: 0;
}

.partida-acciones {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: auto;
}

.partida-acciones button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  height: 2.1rem;
  padding: 0 0.75rem;
  border: none;
  border-radius: 0.45rem;
  background: var(--t-control);
  color: var(--t-texto);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: bold;
  cursor: pointer;
}

.partida-acciones button.partida-icono {
  width: 2.1rem;
  padding: 0;
}

.partida-acciones .icono {
  width: 1rem;
  height: 1rem;
}

.partida-acciones button:hover {
  background: var(--t-control-2);
}

.partida-desvincular {
  background: rgba(var(--t-rojo-rgb), 0.15) !important;
  box-shadow: inset 0 0 0 1px rgba(var(--t-rojo-rgb), 0.5);
  color: var(--t-rojo) !important;
}

.partida-desvincular:hover {
  background: var(--t-rojo-oscuro) !important;
  box-shadow: none;
  color: #fff !important;
}

/* Cambios sin guardar: se guardan al cerrar (la ✕, en verde) o se descartan */
.partida-pendientes {
  font-size: 0.78rem;
  color: color-mix(in srgb, rgb(var(--color-vista)) var(--t-vivo), black);
}

.partida-descartar {
  display: none !important;
}

#dialogo-partida.con-cambios .partida-descartar {
  display: inline-flex !important;
}

#dialogo-partida.con-cambios .partida-cerrar {
  background: var(--t-bien-oscuro);
  color: #fff;
}

#dialogo-partida.con-cambios .partida-cerrar:hover {
  background: var(--t-bien);
}

.partida-cerrar.guardando {
  opacity: 0.6;
  cursor: progress;
}

/* «?»: cómo funciona lo de la partida (en el título de la ventana y en tu bloque) */
.partida-ayuda,
.locke-partida-ayuda,
.locke-actividad-de {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--t-control);
  color: var(--t-texto);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: bold;
  cursor: pointer;
}

.partida-ayuda:hover,
.locke-partida-ayuda:hover,
.locke-actividad-de:hover {
  background: var(--color-locke, rgb(var(--color-vista)));
  color: var(--t-tinta);
}

.ayuda-partida {
  max-height: 60vh;
  overflow-y: auto;
  font-size: 0.9rem;
  line-height: 1.45;
}

.ayuda-partida h3 {
  margin: 0.9rem 0 0.25rem;
  font-size: 0.85rem;
  color: color-mix(in srgb, rgb(var(--color-vista)) var(--t-vivo), black);
}

.ayuda-partida h3:first-child {
  margin-top: 0;
}

.ayuda-partida p {
  margin: 0 0 0.4rem;
}

.ayuda-partida ol {
  margin: 0 0 0.5rem;
  padding-left: 1.3rem;
}

.ayuda-partida li {
  margin-bottom: 0.25rem;
}

.ayuda-partida code {
  font-size: 0.85em;
  word-break: break-all;
}

/* Editor a la derecha de las cajas (pantallas anchas, js/versus/editor.js) */
.partida-lado {
  display: none;
}

#dialogo-partida.con-editor {
  width: min(104rem, 97vw);
}

#dialogo-partida.con-editor .partida-contenido {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36rem;
  gap: 0.6rem;
}

#dialogo-partida.con-editor .partida-lado {
  display: block;
  /* Alto fijo, como las cajas: el hueco no cambia con el Pokémon que haya dentro */
  height: min(76vh, 54rem);
  overflow: hidden;
  padding: 0.9rem;
  border-radius: 0.6rem;
  background: rgba(var(--t-oscurecer), 0.18);
}

/* El panel ocupa todo el alto y sus botones van pegados abajo del todo (al bajar, se quedan) */
#dialogo-partida.con-editor .partida-lado {
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
}

.partida-lado .editor-panel {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Solo se desplaza el contenido: los botones se quedan abajo */
.partida-lado .editor-panel .editor-cuerpo {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 0.5rem;
}

.partida-lado .editor-panel .dialogo-botones {
  flex: none;
  margin: 0.6rem -0.9rem 0;
  padding: 0.7rem 0.9rem;
  border-top: 1px solid rgba(var(--t-tinte), 0.06);
  background: #252736;
}

/* Cambiando de Pokémon: se ve el anterior, atenuado, hasta que llega el nuevo; luego, un fundido */
.editor-panel.cambiando .editor-cuerpo {
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 0.15s;
}

.editor-cuerpo.entra {
  animation: editor-entra 0.18s ease-out;
}

@keyframes editor-entra {
  from { opacity: 0.4; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .editor-cuerpo.entra {
    animation: none;
  }
}

/* El hueco de la derecha sin ningún Pokémon elegido */
.editor-reposo {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 1.5rem;
  border: 1px dashed rgba(var(--t-tinte), 0.22);
  border-radius: 0.7rem;
  text-align: center;
  opacity: 0.75;
}

.editor-reposo .icono {
  width: 2rem;
  height: 2rem;
}

.editor-reposo p {
  max-width: 20rem;
  margin: 0;
  line-height: 1.45;
}

.editor-panel .editor-error:empty {
  display: none;
}

#dialogo-partida button.partida-ficha.editando {
  background: rgba(var(--color-pestana), 0.25);
  box-shadow: inset 0 0 0 2px rgb(var(--color-pestana));
}

/* Las fichas que se pueden editar, pulsables */
button.partida-ficha {
  border: none;
  color: inherit;
  font-family: inherit;
  cursor: pointer;
}

button.partida-ficha:hover {
  background: rgba(var(--color-pestana), 0.15);
  box-shadow: inset 0 0 0 1px rgba(var(--color-pestana), 0.5);
}

/* Hueco libre: crear uno nuevo (o soltar ahí uno arrastrado) */
button.partida-hueco {
  justify-content: center;
  min-height: 4.6rem;
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(var(--t-tinte), 0.15);
  color: rgba(var(--t-texto-rgb), 0.45);
}

button.partida-hueco .icono {
  width: 1.3rem;
  height: 1.3rem;
}

/* Pestañas «Cajas» y «Bolsa», en el título */
.partida-pestanas {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.2rem;
  border-radius: 0.55rem;
  background: rgba(var(--t-oscurecer), 0.25);
}

.partida-pestana {
  padding: 0.3rem 0.8rem;
  border: none;
  border-radius: 0.4rem;
  background: transparent;
  color: rgba(var(--t-texto-rgb), 0.6);
  font-family: inherit;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
}

.partida-pestana {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.partida-pestana .icono {
  width: 1.05rem;
  height: 1.05rem;
}

.partida-pestana:hover {
  color: var(--t-texto);
}

/* Cada pestaña con su color, suave: azul las cajas, verde la bolsa (un tinte arriba de la
   ventana y la pestaña elegida) */
#dialogo-partida {
  --color-pestana: 91, 141, 239;
  background-image: linear-gradient(180deg, rgba(var(--color-pestana), 0.1), rgba(var(--color-pestana), 0) 9rem);
  box-shadow: inset 0 3px 0 rgba(var(--color-pestana), 0.6);
}

#dialogo-partida.en-bolsa {
  --color-pestana: 82, 183, 136;
}

.partida-pestana.activa {
  background: rgba(var(--color-pestana), 0.28);
  color: var(--t-texto);
}

#dialogo-partida > h2 > .icono {
  color: rgb(var(--color-pestana));
}

/* ---------- Bolsa (js/versus/bolsa.js) ---------- */

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

.bolsa-bolsillos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.bolsa-bolsillo {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  border: none;
  border-radius: 1rem;
  background: var(--t-control);
  color: var(--t-texto);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: bold;
  cursor: pointer;
}

.bolsa-bolsillo small {
  opacity: 0.6;
}

.bolsa-bolsillo .icono {
  width: 0.95rem;
  height: 0.95rem;
}

.bolsa-bolsillo:hover {
  background: var(--t-control-2);
}

.bolsa-bolsillo.activo {
  background: rgb(var(--color-pestana));
  color: var(--t-tinta);
}

.bolsa-anadir {
  max-width: 22rem;
}

/* Atajo de los Caramelos Raros, al final de la fila de los bolsillos */
.bolsa-caramelos {
  order: 99;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
  padding: 0.4rem 0.75rem;
  border: none;
  border-radius: 0.4rem;
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(var(--color-pestana), 0.5);
  color: var(--t-texto);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: bold;
  cursor: pointer;
}

.bolsa-caramelos:hover {
  background: rgba(var(--color-pestana), 0.2);
}

.bolsa-caramelos .icono {
  width: 0.9rem;
  height: 0.9rem;
}

.bolsa-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 0.35rem;
}

.bolsa-fila {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.4rem;
  padding: 0.2rem 0.4rem 0.2rem 0.5rem;
  border-radius: 0.45rem;
  background: rgba(var(--t-oscurecer), 0.2);
}

.bolsa-icono {
  flex: none;
  display: flex;
  width: 1.6rem;
  height: 1.6rem;
}

.bolsa-icono img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bolsa-nombre {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.88rem;
}

.bolsa-fila .numero {
  flex: none;
  width: 5rem;
}

.bolsa-cantidad {
  width: 100%;
  box-sizing: border-box;
  padding: 0.3rem 0.45rem;
  border: 1px solid rgba(var(--t-tinte), 0.12);
  border-radius: 0.35rem;
  background: var(--t-fondo);
  color: var(--t-texto);
  font-family: inherit;
  font-size: 0.85rem;
}

.bolsa-cantidad:focus {
  outline: none;
  border-color: rgb(var(--color-pestana));
}

.bolsa-quitar {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: none;
  border-radius: 0.3rem;
  background: rgba(var(--t-oscurecer), 0.25);
  color: var(--t-texto);
  cursor: pointer;
}

.bolsa-quitar:hover {
  background: var(--t-rojo-oscuro);
}

.bolsa-quitar .icono {
  width: 0.8rem;
  height: 0.8rem;
}

.bolsa-vacio,
.bolsa-lleno {
  margin: 0;
  opacity: 0.6;
}

/* Arrastrando uno a otro hueco: el arrastrado, en tenue; donde caería, enmarcado */
button.partida-ficha.arrastrando {
  opacity: 0.35;
}

#dialogo-partida button.partida-ficha.destino {
  background: rgba(var(--color-pestana), 0.25);
  box-shadow: inset 0 0 0 2px rgb(var(--color-pestana));
}

/* ---------- Editar un Pokémon de la partida (js/versus/editor.js) ---------- */

#dialogo-editor {
  width: min(40rem, 94vw);
}

.editor-cargando {
  opacity: 0.7;
}

.editor-cabecera {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.editor-retrato {
  position: relative;
  flex: none;
}

.editor-cara {
  width: 5.5rem;
  height: 5.5rem;
  border-radius: 0.7rem;
  background: var(--t-fondo);
  image-rendering: pixelated;
}

.editor-shiny,
.editor-genero {
  position: absolute;
  right: -0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--t-control);
  color: var(--t-texto);
  font-size: 0.95rem;
  cursor: pointer;
}

.editor-shiny {
  top: -0.4rem;
}

.editor-genero {
  bottom: -0.4rem;
}

.editor-shiny.activo {
  background: #f1c40f;
  color: var(--t-tinta);
}

.editor-genero .icono {
  width: 0.95rem;
  height: 0.95rem;
}

.editor-genero.genero-M {
  color: #6bb7ff;
}

.editor-genero.genero-F {
  color: #ff7ab8;
}

.editor-genero:disabled {
  cursor: default;
  opacity: 0.8;
}

/* A la derecha del retrato, en dos líneas de su misma altura: especie (forma) y mote; nivel,
   amistad y ball */
.editor-datos {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 5.5rem;
}

.editor-linea {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.editor-linea > * {
  flex: 1 1 0;
  min-width: 0;
}

/* Los nombres largos (de ball, de naturaleza) se cortan con «…» en vez de cambiar el alto de la fila */
.editor-linea > select,
.editor-ball select {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-linea {
  flex-wrap: nowrap;
}

.editor-titulo {
  opacity: 0.75;
}

.editor-linea > input,
.editor-linea > select,
.editor-ball select,
.editor-amistad input,
.editor-nivel input,
.editor-buscar input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.45rem 0.55rem;
  border: 1px solid rgba(var(--t-tinte), 0.12);
  border-radius: 0.4rem;
  background: var(--t-fondo);
  color: var(--t-texto);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: normal;
  text-transform: none;
  letter-spacing: normal;
}

.editor-linea > input:focus,
.editor-linea > select:focus,
.editor-ball select:focus,
.editor-amistad input:focus,
.editor-nivel input:focus,
.editor-buscar input:focus {
  outline: none;
  border-color: rgb(var(--color-vista));
}

.editor-buscar {
  position: relative;
  display: block;
  flex: 1;
  min-width: 0;
}

/* Huevo: un botón al final del todo, para que no moleste arriba; encendido, dice que es un huevo */
.editor-extra {
  display: flex;
  justify-content: flex-start;
  margin-top: 0.9rem;
}

.editor-huevo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.45rem 0.8rem;
  border: none;
  border-radius: 0.4rem;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: bold;
  background: var(--t-control);
  color: rgba(var(--t-texto-rgb), 0.6);
  cursor: pointer;
}

.editor-huevo .icono {
  width: 1.1rem;
  height: 1.1rem;
}

.editor-huevo:hover {
  color: var(--t-texto);
}

.editor-huevo.activo {
  background: #f1c40f;
  color: var(--t-tinta);
}

/* Nivel: «Nv.» y el número; la naturaleza, al lado */
.editor-linea > .editor-nivel {
  flex: 0 0 5.6rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: bold;
  opacity: 0.95;
}

.editor-nivel > .numero {
  flex: 1;
  min-width: 0;
}

.editor-nivel input {
  width: 100%;
}
/* Objeto y habilidad: desplegable en el que se escribe (con el icono del objeto delante y, si
   la habilidad es la oculta, la marca detrás) */
.editor-combo {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.editor-oculta {
  flex: none;
  padding: 0.15rem 0.45rem;
  border-radius: 0.35rem;
  background: rgba(var(--color-vista), 0.18);
  color: color-mix(in srgb, rgb(var(--color-vista)) var(--t-vivo), black);
  font-size: 0.72rem;
  font-weight: bold;
}

/* Objeto y habilidad, uno al lado del otro */
.editor-par {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 0 1rem;
}

.editor-solo-especie {
  max-width: 20rem;
}

/* Debajo de las estadísticas: amistad, entrenador, dónde se conoció y juego de origen, cada uno
   con su icono delante */
.editor-origen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.45rem 0.8rem;
  margin-top: 0.9rem;
  padding: 0.7rem 0 0.9rem;
  border-top: 1px dashed rgba(var(--t-tinte), 0.12);
}

.editor-dato {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.editor-dato > .icono {
  flex: none;
  width: 1rem;
  height: 1rem;
  opacity: 0.7;
}

.editor-dato > :not(.icono) {
  flex: 1;
  min-width: 0;
}

.editor-dato input,
.editor-dato select {
  width: 100%;
  box-sizing: border-box;
  padding: 0.4rem 0.55rem;
  border: 1px solid rgba(var(--t-tinte), 0.12);
  border-radius: 0.4rem;
  background: var(--t-fondo);
  color: var(--t-texto);
  font-family: inherit;
  font-size: 0.88rem;
}

.editor-dato input:focus,
.editor-dato select:focus {
  outline: none;
  border-color: rgb(var(--color-vista));
}

.editor-dato input:disabled {
  opacity: 0.5;
}

.editor-amistad,
.editor-ball {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.editor-amistad > .icono {
  flex: none;
  width: 1rem;
  height: 1rem;
  opacity: 0.7;
}

.editor-ball .editor-icono-objeto {
  flex: none;
}

.editor-amistad > :not(.icono),
.editor-ball select {
  flex: 1;
  min-width: 0;
}

.editor-apartado {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.9rem;
}

/* Las estadísticas (js/equipos/entreno.js, incrustado): más justas que en su ventana */
.editor-estadisticas .entreno-fila {
  grid-template-columns: 5.2rem 2.8rem minmax(3rem, 1fr) 3.9rem 3.6rem minmax(2.4rem, 0.7fr) 2.4rem;
  gap: 0.4rem;
  font-size: 0.85rem;
}

.editor-estadisticas .entreno-filas {
  gap: 0.25rem;
}

.editor-estadisticas .entreno-fila input[type="number"] {
  padding: 0.25rem 0.35rem;
  font-size: 0.85rem;
}

.editor-estadisticas .entreno-quedan {
  grid-column: span 2;
  text-align: right;
  white-space: nowrap;
}

.editor-estadisticas .entreno-restantes {
  margin: 0;
  font-size: 0.8rem;
}

/* Los discos de las MT y MO (PokeAPI) traen mucho margen: algo más grandes y pixelados */
.bolsa-icono img[src*="/items/tm-"],
.bolsa-icono img[src*="/items/hm-"],
.editor-icono-objeto[src*="/items/tm-"],
.sugerencias img[src*="/items/tm-"],
.sugerencias img[src*="/items/hm-"] {
  transform: scale(1.5);
  image-rendering: pixelated;
}

.editor-titulo {
  font-size: 0.72rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.editor-elegido {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  padding: 0.35rem 0.4rem 0.35rem 0.6rem;
  border-radius: 0.45rem;
  background: var(--t-control);
  font-weight: bold;
}

.editor-icono-objeto {
  width: 1.5rem;
  height: 1.5rem;
  object-fit: contain;
}

.editor-objeto-quitar,
.editor-habilidad-quitar,
.editor-ataque-quitar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: none;
  border-radius: 0.3rem;
  background: rgba(var(--t-oscurecer), 0.25);
  color: var(--t-texto);
  cursor: pointer;
}

.editor-objeto-quitar:hover,
.editor-habilidad-quitar:hover,
.editor-ataque-quitar:hover {
  background: rgba(var(--t-oscurecer), 0.45);
}

.editor-objeto-quitar .icono,
.editor-habilidad-quitar .icono,
.editor-ataque-quitar .icono {
  width: 0.8rem;
  height: 0.8rem;
}


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

.editor-ataque {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.3rem;
  padding: 0 0.4rem 0 0.6rem;
  border-radius: 0.45rem;
  background: var(--color);
  color: #fff;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.editor-ataque.vacio {
  padding: 0;
  background: none;
}

.editor-ataque-nombre {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-ataque-pp {
  font-size: 0.75rem;
  opacity: 0.85;
}

.editor-panel .dialogo-botones {
  align-items: center;
}

.editor-panel .dialogo-botones button {
  font-family: inherit;
}

/* Borrar y clonar, a la izquierda (no en uno nuevo) */
.editor-borrar,
.editor-clonar {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--t-control);
  color: var(--t-texto);
}

.editor-borrar .icono,
.editor-clonar .icono {
  width: 0.95rem;
  height: 0.95rem;
}

.editor-clonar:hover {
  background: var(--t-control-2);
}

.editor-borrar {
  background: rgba(var(--t-rojo-rgb), 0.15);
  box-shadow: inset 0 0 0 1px rgba(var(--t-rojo-rgb), 0.5);
  color: var(--t-rojo);
}

.editor-borrar:hover {
  background: var(--t-rojo-oscuro);
  box-shadow: none;
  color: #fff;
}

.editor-clonar {
  margin-right: auto;
}

.editor-panel.nuevo .editor-borrar,
.editor-panel.nuevo .editor-clonar {
  display: none;
}

.editor-panel.nuevo .editor-cancelar {
  margin-left: auto;
}

.editor-cancelar {
  background: var(--t-control);
  color: var(--t-texto);
}

.editor-cancelar:hover {
  background: var(--t-control-2);
}

.editor-guardar {
  background: var(--t-bien-oscuro);
  color: #fff;
}

.editor-guardar:hover:not(:disabled) {
  background: var(--t-bien);
}

.editor-guardar:disabled {
  opacity: 0.5;
  cursor: progress;
}

@media (max-width: 560px) {
  .editor-par {
    grid-template-columns: 1fr;
  }

  .editor-ataques {
    grid-template-columns: 1fr;
  }

  /* Borrar, clonar y mover, solo con el icono */
  .editor-borrar span,
  .editor-clonar span {
    display: none;
  }
}

/* ---------- Meter equipo (js/versus/meter-equipo.js) ---------- */

#dialogo-meter {
  width: min(34rem, 94vw);
}

.meter-equipo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  border-radius: 0.45rem;
  background: rgba(var(--t-oscurecer), 0.2);
}

.meter-equipo strong {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.meter-quitar {
  display: inline-flex;
  padding: 0.3rem;
  border: none;
  border-radius: 0.3rem;
  background: rgba(var(--t-oscurecer), 0.25);
  color: var(--t-texto);
  cursor: pointer;
}

.meter-quitar .icono {
  width: 0.8rem;
  height: 0.8rem;
}

.meter-destino {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.2rem;
}

/* ---------- Copias de la partida ---------- */

.copias-lista {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 50vh;
  overflow-y: auto;
}

.copias-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.45rem 0.6rem;
  border-radius: 0.45rem;
  background: rgba(var(--t-oscurecer), 0.2);
}

.copias-restaurar {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.7rem;
}

.copias-restaurar .icono {
  width: 0.9rem;
  height: 0.9rem;
}

.copias-vacio {
  opacity: 0.7;
}

.partida-muertos-lista {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  max-height: 50vh;
  overflow-y: auto;
  margin-bottom: 0.6rem;
}

#dialogo-partida-muertos label.partida-muerto {
  margin-top: 0;
}

.partida-muerto .partida-cara {
  width: 2rem;
  height: 2rem;
}

/* ---------- Las partes de la ficha de cada jugador ----------
   Macizas (no transparentes, que según el fondo no se leían), con una sombrita y un reborde
   fino que las separa */

.locke-jugador :is(.locke-partida-abrir, .locke-salon-poner) {
  background: var(--t-fondo);
}

.locke-jugador :is(.locke-partida-abrir, .locke-salon-poner, .locke-partida-vincular, .locke-partida-reanudar, .locke-partida-ayuda, .locke-actividad-de) {
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(var(--t-tinte), 0.08);
}

.locke-jugador .locke-partida-muertos {
  background: color-mix(in srgb, var(--t-rojo) 20%, var(--t-fondo));
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(var(--t-rojo-rgb), 0.45);
}

.locke-jugador :is(.locke-partida-abrir, .locke-salon-poner):hover {
  background: var(--t-control);
}

/* Los caídos de los demás, donde en tu ficha va la partida: el mismo recuadro que el del equipo
   (dentro de .locke-partida), con el botón de su actividad a la derecha. */
.locke-caidos {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.7rem;
  padding: 0.25rem 0.65rem;
  border: none;
  border-radius: 0.45rem;
  background: var(--t-fondo);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(var(--t-tinte), 0.08);
  color: var(--t-texto);
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: bold;
}

button.locke-caidos {
  cursor: pointer;
}

button.locke-caidos:hover {
  background: var(--t-control);
}

.locke-caidos .icono {
  width: 0.85rem;
  height: 0.85rem;
}

/* La cuenta, a la izquierda y más grande; las caras, justo a su lado */
.locke-caidos-cuenta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--letra-titulos);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1;
  color: var(--t-rojo);
}

.locke-caidos-cuenta .icono {
  width: 1.1rem;
  height: 1.1rem;
}

.locke-caidos-caras {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding-right: 0.1rem; /* que el aro de la última no se corte */
}

/* Redondas como las caras del equipo (.cara-equipo, en base.css), pero apagadas, como en el
   cementerio, y con un aro rojo y el fondo rojizo: que se vea que son bajas, no su equipo */
.locke-caidos-caras img {
  width: 1.75rem;
  height: 1.75rem;
  display: block;
  border-radius: 50%;
  background: rgba(var(--t-rojo-rgb), 0.18);
  box-shadow: 0 0 0 1.5px rgba(var(--t-rojo-rgb), 0.7);
  filter: grayscale(0.85) brightness(0.9);
  image-rendering: pixelated;
}

button.locke-caidos:hover .locke-caidos-caras img {
  filter: none;
}

.locke-caidos-caras small {
  margin-left: 0.2rem;
  opacity: 0.7;
}

.locke-caidos.vacio {
  gap: 0.35rem;
  align-self: stretch;
  font-weight: normal;
  color: rgba(var(--t-texto-rgb), 0.6);
}

/* ---------- Ventana de nuevo locke (más grande y por bloques) ----------
   Lo básico, vidas y combates, integrantes, y las reglas opcionales plegadas. El pie con los
   botones se queda fijo abajo mientras se desplaza el resto. */

#dialogo-nuevo-locke {
  width: min(56rem, 94vw);
  max-height: 92vh;
  padding: 0;
  overflow: auto;
  border-radius: 1rem;
  box-shadow: inset 0 4px 0 rgb(var(--color-vista));
}

.locke-dialogo-cuerpo {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.6rem 1.7rem 1.2rem;
}

.locke-dialogo-cabeza h2 {
  margin: 0;
  font-size: 2.1rem;
  line-height: 1.05;
}

.locke-dialogo-cabeza p {
  margin: 0.4rem 0 0;
  font-size: 1rem;
  opacity: 0.7;
}

.locke-bloque {
  padding: 1rem 1.1rem 1.1rem;
  border: 1px dashed rgba(var(--t-tinte), 0.24);
  border-radius: 0.9rem;
  background: var(--t-fondo-2);
}

/* Título de bloque: rayita de color y nombre, como las etiquetas de las tarjetas */
.locke-bloque-titulo {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.85rem;
  font-family: var(--letra-titulos);
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.1;
}

.locke-bloque-titulo::before {
  content: "";
  flex: none;
  width: 1.3rem;
  height: 3px;
  border-radius: 2px;
  background: rgb(var(--color-vista));
}

.locke-bloque-titulo small {
  font-family: var(--letra);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.55;
}

/* Reglas y extras: se despliega con el título */
.locke-extras > summary {
  margin-bottom: 0;
  list-style: none;
  cursor: pointer;
}

.locke-extras > summary::-webkit-details-marker {
  display: none;
}

.locke-extras > summary::after {
  content: "▸";
  margin-left: auto;
  opacity: 0.6;
  transition: transform 0.15s;
}

.locke-extras[open] > summary {
  margin-bottom: 0.85rem;
}

.locke-extras[open] > summary::after {
  transform: rotate(90deg);
}

#dialogo-nuevo-locke .campos-locke {
  gap: 0.9rem 1rem;
  margin-bottom: 0;
}

#dialogo-nuevo-locke .campos-locke label,
#dialogo-nuevo-locke .campo-juego-locke,
#dialogo-nuevo-locke .campo-descripcion {
  font-size: 0.88rem;
  letter-spacing: 0;
  text-transform: none;
  opacity: 1;
  color: var(--t-gris-2);
}

#dialogo-nuevo-locke .campo-juego-locke > span:first-child {
  opacity: 1;
}

#dialogo-nuevo-locke .campos-locke input,
#dialogo-nuevo-locke .campos-locke select,
#dialogo-nuevo-locke .campo-juego select,
#dialogo-nuevo-locke .campo-juego input,
#dialogo-nuevo-locke .locke-normas-elegir {
  padding: 0.6rem 0.75rem;
  font-size: 1rem;
}

#dialogo-nuevo-locke .campo-descripcion {
  margin-top: 1rem;
}

#dialogo-nuevo-locke .campo-descripcion textarea {
  padding: 0.6rem 0.75rem;
  font-size: 1rem;
}

.locke-bloque .locke-combates-nombres {
  margin: 0.8rem 0 0;
}

.locke-bloque .locke-dentro {
  margin-bottom: 0;
}

.locke-ayuda {
  margin: 0.85rem 0 0;
  font-size: 0.86rem;
  line-height: 1.45;
  opacity: 0.7;
}

/* Normas, rutas, level caps y randomizer: dos por fila */
#dialogo-nuevo-locke .locke-elecciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem 1.2rem;
  margin-top: 0;
}

#dialogo-nuevo-locke .locke-eleccion .etiqueta-campo {
  margin-bottom: 0.4rem;
  font-size: 0.88rem;
  letter-spacing: 0;
  text-transform: none;
  opacity: 1;
  color: var(--t-gris-2);
}

/* El pie, fijo abajo, con los botones más grandes */
#dialogo-nuevo-locke .dialogo-botones {
  position: sticky;
  bottom: 0;
  margin: 0;
  padding: 0.9rem 1.7rem;
  border-top: 1px dashed rgba(var(--t-tinte), 0.24);
  background: var(--t-panel);
}

#dialogo-nuevo-locke .dialogo-botones button {
  padding: 0.65rem 1.5rem;
  font-family: inherit;
  font-size: 1rem;
}

@media (max-width: 600px) {
  .locke-dialogo-cuerpo {
    padding: 1.2rem 1rem 1rem;
  }

  #dialogo-nuevo-locke .dialogo-botones {
    padding: 0.8rem 1rem;
  }
}

#dialogo-nuevo-locke .campos-locke .campo-casilla input {
  padding: 0;
}

#dialogo-nuevo-locke .campos-locke .campo-casilla {
  color: var(--t-texto);
}

/* Sin la rayita junto a los títulos (parecía un desplegable): solo «Reglas y extras» lleva flecha */
.locke-bloque-titulo::before {
  content: none;
}

/* La descripción, más oscura que el fondo del bloque para que se vea que se escribe ahí */
#dialogo-nuevo-locke .campo-descripcion textarea:not(:disabled) {
  background-color: var(--t-fondo);
}

/* ---------- Integrantes: una tarjetita por persona ---------- */

#dialogo-nuevo-locke .locke-dentro {
  gap: 0.6rem;
}

#dialogo-nuevo-locke .locke-dentro-uno {
  gap: 0.7rem;
  padding: 0.5rem 0.9rem 0.5rem 0.55rem;
  border-radius: 0.8rem;
  background: var(--t-fondo);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), inset 4px 0 0 rgb(var(--color-vista));
  font-weight: normal;
}

/* Sin contestar o por añadir: más apagadas, con borde de puntos */
#dialogo-nuevo-locke .locke-dentro-uno.pendiente {
  background: transparent;
  box-shadow: none;
  border: 1px dashed rgba(var(--t-tinte), 0.3);
}

.locke-dentro-cara {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  overflow: hidden;
  border: 2px solid rgb(var(--color-vista));
  border-radius: 50%;
  background: var(--t-panel);
}

.pendiente .locke-dentro-cara {
  border-color: rgba(var(--t-tinte), 0.3);
}

/* Si no hay foto (o no carga), la inicial */
.locke-dentro-cara::before {
  content: attr(data-inicial);
  position: absolute;
  font-family: var(--letra-titulos);
  font-size: 1.2rem;
  font-weight: 800;
  opacity: 0.5;
}

.locke-dentro-cara img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.locke-dentro-datos {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.locke-dentro-datos b {
  font-family: var(--letra-titulos);
  font-size: 1.05rem;
  line-height: 1.1;
}

.locke-dentro-datos small {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
}

/* El «+»: una tarjeta de puntos con su texto */
#dialogo-nuevo-locke button.locke-anadir {
  gap: 0.45rem;
  padding: 0.5rem 1rem;
  font-size: 0.92rem;
  font-weight: bold;
}

/* Lo que se desplaza es solo el cuerpo: la línea de color de arriba y el pie quedan quietos, y la
   barra de scroll no pasa por encima de la línea */
#dialogo-nuevo-locke {
  overflow: hidden;
  border-top: 4px solid rgb(var(--color-vista));
  box-shadow: none;
}

#dialogo-nuevo-locke[open] {
  display: flex;
  flex-direction: column;
}

#dialogo-nuevo-locke .locke-dialogo-cuerpo {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

#dialogo-nuevo-locke .dialogo-botones {
  position: static;
  flex: none;
}

.partida-lado .editor-reposo {
  margin-bottom: 0.9rem;
}

/* ---------- Bolsa: mismo tamaño que las cajas, y los Caramelos Raros junto al buscador ---------- */

/* La ventana mide lo mismo en las dos pestañas (antes la bolsa quedaba más estrecha) */
#dialogo-partida.en-bolsa {
  width: min(104rem, 97vw);
}

.bolsa-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
}

.bolsa-barra .bolsa-anadir {
  flex: 1 1 16rem;
  max-width: 22rem;
}

.bolsa-barra .bolsa-caramelos {
  order: 0;
  margin-left: auto;
}

/* Con cambios, «Guardar» con su icono (ya no es solo una ✕) */
.partida-acciones button.partida-cerrar.guardar {
  width: auto;
  gap: 0.4rem;
  padding: 0 0.8rem;
  font-weight: bold;
}

/* ---------- Ventanas de un locke: combate, terminar, equipo final, muerte, cementerio y actividad ----------
   Con el estilo de la ventana de crear: línea de color arriba, título grande, etiquetas legibles y
   el pie de botones separado por una línea de puntos. */

:is(#dialogo-combate, #dialogo-terminar, #dialogo-salon, #dialogo-muerte, #dialogo-cementerio, #dialogo-actividad, #dialogo-cronica, #dialogo-estadisticas) {
  padding: 1.5rem 1.6rem 1.3rem;
  border-top: 4px solid rgb(var(--color-vista));
  border-radius: 1rem;
}

:is(#dialogo-combate, #dialogo-terminar, #dialogo-salon) {
  width: min(34rem, 94vw);
}

/* Algo más ancho: cada equipo va en una sola línea con sus dos botones */
#dialogo-combate {
  width: min(38rem, 94vw);
}

#dialogo-muerte {
  width: min(30rem, 94vw);
}

:is(#dialogo-combate, #dialogo-terminar, #dialogo-salon, #dialogo-muerte, #dialogo-cementerio, #dialogo-actividad, #dialogo-cronica, #dialogo-estadisticas) h2 {
  margin: 0 0 1rem;
  font-size: 1.7rem;
  line-height: 1.05;
}

:is(#dialogo-combate, #dialogo-salon) .etiqueta-campo {
  margin-bottom: 0.45rem;
  font-size: 0.9rem;
  letter-spacing: 0;
  text-transform: none;
  opacity: 1;
  color: var(--t-gris-2);
}

:is(#dialogo-combate, #dialogo-terminar, #dialogo-salon, #dialogo-muerte, #dialogo-cementerio, #dialogo-actividad, #dialogo-cronica, #dialogo-estadisticas) .dialogo-botones {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px dashed rgba(var(--t-tinte), 0.24);
}

:is(#dialogo-combate, #dialogo-terminar, #dialogo-salon, #dialogo-muerte, #dialogo-cementerio, #dialogo-actividad, #dialogo-cronica, #dialogo-estadisticas) .dialogo-botones button {
  padding: 0.6rem 1.3rem;
  font-family: inherit;
  font-size: 1rem;
}

/* Quién ganó: opciones más grandes */
#dialogo-combate .combate-opcion,
#dialogo-terminar .terminar-opcion {
  padding: 0.55rem 0.9rem;
}

#dialogo-combate .combate-opcion .combate-opcion-foto,
#dialogo-terminar .terminar-opcion .combate-opcion-foto {
  width: 2.3rem;
  height: 2.3rem;
}

/* El campo del Pokémon que murió, con el mismo trato que los de la ventana de crear */
#dialogo-muerte label {
  margin-top: 0.8rem;
  font-size: 0.88rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--t-gris-2);
}

#dialogo-muerte label.casilla-sesion {
  color: var(--t-texto);
}

#dialogo-muerte input:not([type="checkbox"]) {
  padding: 0.6rem 0.75rem;
  font-size: 1rem;
}

/* Cementerio: una ficha por jugador, con la capa de color a la izquierda como las demás */
.cementerio-jugador {
  padding: 0.85rem 0.85rem 0.9rem 0.95rem;
  border-left: 0.3rem solid var(--t-azulado);
  border-radius: 0.8rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.cementerio-jugador.mio {
  border-left-color: rgb(var(--color-vista));
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.cementerio-cara {
  width: 2.4rem;
  height: 2.4rem;
}

.cementerio-nombre {
  font-family: var(--letra-titulos);
  font-size: 1.15rem;
}

.cementerio-cuenta {
  font-family: var(--letra-titulos);
  font-size: 1.4rem;
  font-weight: 800;
}

/* Actividad: cada suceso con la capa de color un poco más marcada */
.suceso {
  border-left-width: 0.25rem;
  border-radius: 0.6rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* ---------- Ventana de un combate: los combates ganados de cada jugador ---------- */

.combate-jugadores {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.combate-jugador {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.8rem 0.5rem 0.6rem;
  border-radius: 0.7rem;
  background: var(--t-fondo-2);
  box-shadow: inset 4px 0 0 rgba(var(--t-tinte), 0.15);
}

.combate-jugador.gana {
  box-shadow: inset 4px 0 0 #f1c40f;
  background: color-mix(in srgb, #f1c40f 10%, var(--t-fondo-2));
}

.combate-jugador .combate-opcion-foto {
  width: 2.4rem;
  height: 2.4rem;
}

.combate-jugador-nombre {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-family: var(--letra-titulos);
  font-size: 1.15rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.combate-corona {
  color: color-mix(in srgb, #f1c40f var(--t-vivo), black);
}

.combate-corona .icono {
  width: 1.2rem;
  height: 1.2rem;
}

.combate-jugador .numero {
  flex: none;
  width: 5.2rem;
}

.combate-puntos {
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 0.6rem;
  border: none;
  border-radius: 0.45rem;
  background: var(--t-fondo);
  color: var(--t-texto);
  font-family: var(--letra-titulos);
  font-size: 1.3rem;
  font-weight: 800;
  text-align: center;
}

.combate-estado {
  min-height: 1.3rem;
  margin: 0.5rem 0 0.2rem;
  font-size: 0.85rem;
  opacity: 0.75;
}