/* Pantallas fuera de partida: inicio, submenús, lobby, perfil, finales y
   pausa. Va después de style.css, que se queda con la base, el HUD y los
   controles táctiles. Todo se dibuja con CSS o SVG inline: nada de assets. */

/* ---------------- Tokens ----------------
   Contraste medido sobre negro: --m-tinta-3 ronda 5,9:1 y --m-tinta-4 4,6:1,
   lo mínimo para texto de 12-14 px. Antes los secundarios iban a ~3:1 y los
   botones fantasma casi no se leían. Lo de verdad tenue (bloqueado, vacío)
   usa --m-tenue a propósito. */
:root {
  --m-tinta: #cfc6b8;
  --m-tinta-2: #a39a8c;
  --m-tinta-3: #8f8576;
  --m-tinta-4: #7d7468;
  --m-tenue: #4e4941;
  --m-borde: #2f2b25;
  --m-borde-2: #4a453d;
  --m-fondo-input: #0a0908;
  --m-panel: rgba(255, 255, 255, 0.022);
  --m-sangre: #8a1f1f;
  --m-sangre-viva: #b33a2a;
  --m-sangre-fondo: #1a0505;
  --m-rojo-texto: #c25a4a;
  --m-oro: #d9a441;
  --m-ambar: #c9a26b;
  --m-musgo: #7f9f6f;
  --m-pro: #7f9f6f;
  --m-contra: #b56a6a;
}

/* ---------------- Pantalla ----------------
   Cualquier pantalla puede ser más alta que la ventana (móvil, portátil de
   768 px, sala con bots), así que todas hacen scroll. Con
   `justify-content: center` lo que sobraba se cortaba por arriba y por abajo
   sin forma de llegar a VOLVER. El centrado lo dan dos pseudo-elementos con
   margen auto: cuando no cabe se anulan solos y la pantalla empieza arriba.
   Su margen negativo descuenta el `gap` que el flex les pone al lado. */
.screen {
  --gap: 22px;
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap);
  padding: 20px;
  text-align: center;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #3a352e transparent;
  /* Negro liso: el grano y el halo del centro se veían como franjas */
  background: #000;
  animation: m-entrada 0.22s steps(5, end);
}
.screen::before, .screen::after { content: ''; flex: none; }
.screen::before { margin: auto 0 calc(-1 * var(--gap)); }
.screen::after { margin: calc(-1 * var(--gap)) 0 auto; }
.screen::-webkit-scrollbar, .screen ::-webkit-scrollbar { width: 8px; height: 8px; }
.screen::-webkit-scrollbar-thumb, .screen ::-webkit-scrollbar-thumb { background: #2f2b25; }
.screen::-webkit-scrollbar-track, .screen ::-webkit-scrollbar-track { background: transparent; }

/* Entrada: parpadeo de tubo al mostrarse (la animación arranca sola cuando
   la pantalla deja de ser `display: none`). */
@keyframes m-entrada {
  0% { filter: brightness(0); }
  35% { filter: brightness(0.75); }
  55% { filter: brightness(0.2); }
  100% { filter: brightness(1); }
}
@media (prefers-reduced-motion: reduce) {
  .screen { animation: none; }
}

/* `text-indent` = el espaciado: compensa el hueco que el letter-spacing deja
   tras la última letra, que corría los títulos medio espacio a la izquierda.
   Se hereda a los pseudo-elementos del glitch, así que siguen alineados. */
.screen h1 {
  font-size: clamp(38px, 9vw, 96px);
  letter-spacing: 14px;
  text-indent: 14px;
  color: var(--m-tinta);
  font-weight: normal;
  text-shadow: 0 0 30px rgba(160, 20, 20, 0.5);
}
.screen h1.small {
  font-size: clamp(22px, 4vw, 40px);
  letter-spacing: 10px;
  text-indent: 10px;
}

/* ---------------- Texto ----------------
   .tag: subtítulo decorativo (itálica espaciada). .info: datos que hay que
   leer. .msg: estado o error de la última acción. Vacíos no ocupan hueco. */
.tag {
  font-size: 14px;
  letter-spacing: 4px;
  color: var(--m-tinta-4);
  font-style: italic;
}
.info {
  font-size: 13px;
  letter-spacing: 1.5px;
  line-height: 1.7;
  color: var(--m-tinta-2);
  white-space: pre-line;
  max-width: 560px;
}
.msg {
  font-size: 12px;
  letter-spacing: 1.5px;
  line-height: 1.6;
  color: var(--m-ambar);
  max-width: 560px;
}
.screen .tag:empty, .screen .info:empty, .screen .msg:empty { display: none; }

.warn {
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 1px;
  color: var(--m-rojo-texto);
  max-width: 520px;
  text-wrap: balance;
}

/* ---------------- Botones ----------------
   La base es global (también la heredan los botones táctiles, que la pisan
   con .tc-btn). El hover ya no toca el letter-spacing: cambiaba el ancho
   del botón y la fila entera saltaba. Solo con puntero que de verdad pasa
   por encima: en táctil el hover se queda pegado tras el toque. */
button {
  background: transparent;
  border: 1px solid var(--m-borde-2);
  color: var(--m-tinta);
  font-family: inherit;
  font-size: 16px;
  letter-spacing: 6px;
  padding: 14px 46px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease,
    box-shadow 0.2s ease, opacity 0.2s ease;
}
@media (hover: hover) {
  .screen button:hover:not(:disabled),
  #pause-hint button:hover:not(:disabled) {
    background-color: var(--m-sangre-fondo);
    border-color: var(--m-sangre);
    color: #fff;
    box-shadow: 0 0 14px rgba(138, 31, 31, 0.35), inset 0 0 10px rgba(138, 31, 31, 0.15);
  }
  .screen button.peligro:hover:not(:disabled) {
    border-color: var(--m-sangre-viva);
    color: #ff8f7f;
  }
}
.screen button:active:not(:disabled),
#pause-hint button:active:not(:disabled) {
  background-color: #2a0808;
  box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.7);
}
.screen button:focus-visible,
#pause-hint button:focus-visible {
  outline: 1px solid var(--m-oro);
  outline-offset: 3px;
}
.screen button:disabled { opacity: 0.35; cursor: not-allowed; }

.btn-row {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

button.ghost {
  border-color: var(--m-borde);
  color: var(--m-tinta-3);
  font-size: 12px;
  letter-spacing: 4px;
  padding: 9px 26px;
}
button.ghost.sel {
  border-color: var(--m-sangre);
  color: #e8dfd0;
  box-shadow: inset 0 0 0 1px rgba(138, 31, 31, 0.35);
}
button.ghost.taken:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Fila de VOLVER: en pantallas largas se queda pegada abajo y lo que pasa
   por debajo se funde en negro. Cuando todo cabe es una fila más, sin fondo:
   el negro sobre el halo del centro se veía como una franja. game.js marca
   `.pegada` cuando de verdad está pegada (el `bottom: -1px` deja 1px fuera
   del visor solo en ese caso, y eso es lo que mira el observador). */
.screen .pie {
  position: sticky;
  bottom: -1px;
  z-index: 2;
  align-self: stretch;
  /* Los márgenes negativos la llevan de borde a borde (sin cantos visibles) y
     devuelven arriba el hueco que ocupa el degradado. */
  margin: -18px -20px 0;
  padding: 18px 20px 3px;
}
/* El fondo baja 20px más: el sticky se para en el relleno de la pantalla y
   por esa franja de abajo asomaba lo que pasaba por debajo. */
.screen .pie::before {
  content: '';
  position: absolute;
  inset: 0 0 -20px;
  z-index: -1;
  pointer-events: none;
  /* Funde en el relleno de arriba (18px) y los botones quedan sobre negro */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000 18px);
  opacity: 0;
  transition: opacity 0.15s;
}
.screen .pie.pegada::before { opacity: 1; }

/* ---------------- Campos ----------------
   Un solo estilo para todo campo de texto de cualquier pantalla. Antes solo
   lo tenían lobby, tienda y criatura, y en estadísticas, cuenta y mejoras
   salía el campo blanco del navegador. */
.screen :is(input:not([type]), input[type="text"], input[type="password"]) {
  background: var(--m-fondo-input);
  border: 1px solid #3a352e;
  border-radius: 0;
  color: var(--m-tinta);
  font-family: inherit;
  font-size: 15px;
  letter-spacing: 5px;
  text-align: center;
  text-transform: uppercase;
  padding: 12px 16px;
  width: 210px;
  max-width: 100%;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.screen :is(input:not([type]), input[type="text"], input[type="password"]):focus {
  border-color: var(--m-sangre-viva);
  box-shadow: 0 0 10px rgba(138, 31, 31, 0.3);
}
.screen :is(input:not([type]), input[type="text"], input[type="password"])::placeholder {
  color: #6a6358;
  letter-spacing: 2px;
  opacity: 1;
}
.screen :is(input:not([type]), input[type="text"], input[type="password"]):disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.screen input.password { text-transform: none; letter-spacing: 3px; }

/* Deslizador: pista fina y un "fader" cuadrado en vez de la pista blanca del
   navegador. El tramo recorrido sale de --pct, que pone js/game.js
   (`pintarRango`); Firefox lo pinta solo con ::-moz-range-progress. */
.screen input[type="range"] {
  --pct: 0%;
  -webkit-appearance: none;
  appearance: none;
  height: 22px;
  background: transparent;
  cursor: pointer;
}
.screen input[type="range"]::-webkit-slider-runnable-track {
  height: 2px;
  background: linear-gradient(to right, var(--m-sangre) 0 var(--pct), #3a352e var(--pct) 100%);
}
.screen input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 18px;
  margin-top: -8px;
  background: var(--m-tinta);
  border: 1px solid #000;
  box-shadow: 0 0 0 1px var(--m-borde-2);
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
.screen input[type="range"]::-moz-range-track { height: 2px; background: #3a352e; border: 0; }
.screen input[type="range"]::-moz-range-progress { height: 2px; background: var(--m-sangre); }
.screen input[type="range"]::-moz-range-thumb {
  width: 10px;
  height: 18px;
  border-radius: 0;
  background: var(--m-tinta);
  border: 1px solid #000;
  box-shadow: 0 0 0 1px var(--m-borde-2);
}
@media (hover: hover) {
  .screen input[type="range"]:hover:not(:disabled)::-webkit-slider-thumb {
    background: #fff;
    box-shadow: 0 0 0 1px var(--m-sangre-viva), 0 0 8px rgba(179, 58, 42, 0.6);
  }
  .screen input[type="range"]:hover:not(:disabled)::-moz-range-thumb {
    background: #fff;
    box-shadow: 0 0 0 1px var(--m-sangre-viva), 0 0 8px rgba(179, 58, 42, 0.6);
  }
}
.screen input[type="range"]:focus-visible { outline: 1px solid var(--m-oro); outline-offset: 2px; }
.screen input[type="range"]:disabled { opacity: 0.45; cursor: default; }

/* Casillas como interruptor: el cuadro blanco del navegador desentonaba. */
.screen input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  flex: none;
  width: 34px;
  height: 18px;
  margin: 0;
  border: 1px solid var(--m-borde-2);
  background: var(--m-fondo-input);
  cursor: pointer;
  vertical-align: middle;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.screen input[type="checkbox"]::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  background: var(--m-tinta-4);
  transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.screen input[type="checkbox"]:checked { border-color: var(--m-sangre); background: var(--m-sangre-fondo); }
.screen input[type="checkbox"]:checked::before {
  transform: translateX(16px);
  background: #e8dfd0;
  box-shadow: 0 0 6px rgba(200, 40, 40, 0.6);
}
.screen input[type="checkbox"]:focus-visible { outline: 1px solid var(--m-oro); outline-offset: 2px; }

/* ---------------- Expediente ----------------
   Tarjetas y bloques con borde fino y dos esquinas marcadas, como una ficha
   archivada. */
.panel, .lobby-bloque, .enemy-card, .perk-card, .tienda-card, .hist-fila {
  position: relative;
  border: 1px solid var(--m-borde);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.008));
}
.panel::before, .lobby-bloque::before, .enemy-card::before, .perk-card::before,
.tienda-card::before, .hist-fila::before,
.panel::after, .lobby-bloque::after, .enemy-card::after, .perk-card::after,
.tienda-card::after, .hist-fila::after {
  content: '';
  position: absolute;
  width: 7px;
  height: 7px;
  border: 0 solid var(--m-tinta-4);
  pointer-events: none;
}
.panel::before, .lobby-bloque::before, .enemy-card::before, .perk-card::before,
.tienda-card::before, .hist-fila::before {
  top: -1px;
  left: -1px;
  border-width: 1px 0 0 1px;
}
.panel::after, .lobby-bloque::after, .enemy-card::after, .perk-card::after,
.tienda-card::after, .hist-fila::after {
  right: -1px;
  bottom: -1px;
  border-width: 0 1px 1px 0;
}

/* ---------------- Inicio ----------------
   VER PARTIDAS a lo ancho y debajo dos grupos con rótulo: TU EXPEDIENTE
   (2×2) y ARCHIVO (3 en fila). La cuenta es un chip arriba a la derecha, el
   récord un marcador y la advertencia una franja al pie. */
#screen-title { --gap: 14px; }
#screen-title #cuenta-estado { font-size: 12px; color: var(--m-ambar); }

.chip-cuenta {
  position: absolute;
  top: 16px;
  right: 18px;
  z-index: 3;
  max-width: 46vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  letter-spacing: 3px;
  padding: 7px 14px 7px 12px;
  color: var(--m-ambar);
  border-color: var(--m-borde-2);
  background: rgba(0, 0, 0, 0.55);
}
/* Piloto: ámbar sin cuenta (no se guarda nada), verde con cuenta */
.chip-cuenta::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 9px;
  vertical-align: 1px;
  border-radius: 50%;
  background: var(--m-ambar);
}
.chip-cuenta.con-cuenta { color: var(--m-tinta); }
.chip-cuenta.con-cuenta::before { background: var(--m-musgo); box-shadow: 0 0 6px var(--m-musgo); }
/* En pantallas estrechas pisaría el título: pasa a la fila de arriba */
@media (max-width: 640px) {
  .chip-cuenta { position: static; align-self: flex-end; max-width: 100%; }
}

/* Récord de este navegador: cuatro casillas de marcador */
.marcador {
  display: flex;
  width: min(480px, 92vw);
  border: 1px solid var(--m-borde);
  background: rgba(255, 255, 255, 0.018);
}
.marcador:empty { display: none; }
.marcador-casilla {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 7px 6px 6px;
}
.marcador-casilla + .marcador-casilla { border-left: 1px solid var(--m-borde); }
.marcador-casilla b {
  font-size: 20px;
  font-weight: normal;
  letter-spacing: 2px;
  color: var(--m-tinta);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 12px rgba(160, 20, 20, 0.35);
}
.marcador-casilla span {
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--m-tinta-4);
  white-space: nowrap;
}

#screen-title .menu-principal {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(620px, 92vw);
  margin-top: 4px;
}
.menu-grupo { display: flex; flex-direction: column; gap: 7px; }
/* Rótulo entre dos rayas: «—— TU EXPEDIENTE ——» */
.menu-rotulo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 10px;
  letter-spacing: 4px;
  color: var(--m-tinta-4);
}
.menu-rotulo::before, .menu-rotulo::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--m-borde);
}
#screen-title .menu-grupo .btn-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
#screen-title .menu-grupo.archivo .btn-row { grid-template-columns: repeat(3, 1fr); }
#screen-title .menu-grupo button {
  width: 100%;
  min-width: 0;
  font-size: clamp(13px, 1.1vw, 16px);
  letter-spacing: 4px;
  padding: 12px 8px;
}
#screen-title #btn-coop {
  padding: 18px;
  font-size: clamp(18px, 1.7vw, 24px);
  letter-spacing: 8px;
  text-indent: 8px;
  border-color: var(--m-sangre);
  box-shadow: 0 0 24px rgba(138, 31, 31, 0.25);
}
/* Móvil: tres en fila no caben; OPCIONES baja a lo ancho */
@media (max-width: 560px) {
  #screen-title .menu-grupo.archivo .btn-row { grid-template-columns: 1fr 1fr; }
  #screen-title .menu-grupo.archivo button:last-child { grid-column: 1 / -1; }
  #screen-title .menu-grupo button { font-size: 13px; letter-spacing: 3px; padding: 12px 4px; }
}

/* Advertencia: franja discreta al pie, no un párrafo rojo en medio */
#screen-title .warn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(620px, 92vw);
  max-width: none;
  margin-top: 8px;
  padding: 8px 14px;
  text-align: left;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--m-tinta-3);
  border-top: 1px solid rgba(138, 31, 31, 0.35);
  border-bottom: 1px solid rgba(138, 31, 31, 0.35);
  background: linear-gradient(90deg, transparent, rgba(138, 31, 31, 0.08), transparent);
}
.warn-icono { flex: none; font-size: 16px; color: var(--m-rojo-texto); }

/* Título con glitch cromático */
.glitch { position: relative; }
.glitch::before, .glitch::after {
  content: attr(data-text);
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  overflow: hidden;
}
.glitch::before {
  color: #6d0f0f;
  animation: gl1 2.7s infinite steps(2, end);
}
.glitch::after {
  color: #123b3b;
  animation: gl2 3.9s infinite steps(2, end);
}
@keyframes gl1 {
  0%, 92%, 100% { transform: translate(0, 0); opacity: 0; }
  93% { transform: translate(-4px, 2px); opacity: 0.9; }
  96% { transform: translate(3px, -2px); opacity: 0.7; }
}
@keyframes gl2 {
  0%, 88%, 100% { transform: translate(0, 0); opacity: 0; }
  89% { transform: translate(5px, 1px); opacity: 0.8; }
  94% { transform: translate(-3px, -3px); opacity: 0.6; }
}

/* ---------------- Instrucciones ---------------- */

/* Dos bloques lado a lado en PC (reglas | controles; en OPCIONES, imagen |
   teclas) y uno debajo del otro en pantallas estrechas. */
#screen-instrucciones, #screen-options { --gap: 16px; }
.instr-cols, .opt-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  width: min(1040px, 100%);
  align-items: start;
}
@media (max-width: 860px) {
  .instr-cols, .opt-cols { grid-template-columns: minmax(0, 1fr); width: min(560px, 100%); }
}
.instr-bloque, .opt-bloque {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px 18px;
  text-align: left;
}
.bloque-titulo {
  font-size: 11px;
  letter-spacing: 4px;
  color: var(--m-tinta-3);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--m-borde);
}

.reglas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 13px; }
.reglas li { display: grid; grid-template-columns: 24px 1fr; gap: 14px; align-items: start; }
.reglas svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--m-rojo-texto);
  stroke-width: 1.4;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.reglas p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--m-tinta-2); }
.reglas b { color: #e3d8c4; }

/* Una frase para teclado y otra para táctil: se ve la que toca */
.solo-tactil { display: none; }
body.touch-device .solo-pc { display: none; }
body.touch-device .solo-tactil { display: inline; }

/* Tabla de controles: teclas a la izquierda, qué hacen a la derecha. En PC
   ancho, el bloque de controles es el más largo: va más ancho y a dos
   columnas para que quepa sin scroll. */
.controles { display: flex; flex-direction: column; gap: 7px; }
.control-fila {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
  align-items: center;
  font-size: 12px;
  letter-spacing: 1px;
  line-height: 1.4;
  color: var(--m-tinta-2);
}
.control-teclas { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
@media (min-width: 1100px) {
  .instr-cols { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); width: min(1240px, 100%); }
  .controles { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 20px; }
}

/* Tecla física: cara algo más clara arriba y un canto oscuro debajo que se
   hunde al pulsarla. El canto es sombra, no borde: así no mueve la fila. */
.keycap {
  display: inline-block;
  min-width: 22px;
  padding: 4px 8px;
  font-family: inherit;
  font-size: 11px;
  font-style: normal;
  font-weight: normal;
  letter-spacing: 1px;
  line-height: 1.25;
  text-align: center;
  white-space: nowrap;
  color: #e8dfd0;
  background: linear-gradient(180deg, #2a2621 0%, #171513 100%);
  border: 1px solid #4f4940;
  border-radius: 4px;
  box-shadow: 0 3px 0 #0d0c0a, 0 3px 0 1px #2f2b25, inset 0 1px 0 rgba(255, 255, 255, 0.09);
  margin-bottom: 3px;
}

/* ---------------- Muerte / victoria ---------------- */

#death-sub, #win-sub {
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--m-tinta-3);
  max-width: 520px;
  line-height: 1.8;
  white-space: pre-line;
}

#screen-death h1 { color: #9e1616; text-shadow: 0 0 40px #500; }
#screen-win  h1 { color: #8ba98b; text-shadow: 0 0 40px #030; }

/* Glitch lento del título de muerte: casi siempre quieto y, cada siete
   segundos, dos tirones de color separado. Sin pseudo-elementos, para no
   depender de un data-text que habría que poner en cada sitio que lo cambia. */
#screen-death #death-title { animation: muerte-glitch 7s infinite; }
@keyframes muerte-glitch {
  0%, 85%, 88.5%, 92%, 100% {
    transform: none;
    opacity: 1;
    text-shadow: 0 0 40px #500;
    animation-timing-function: steps(1, end);
  }
  86% {
    transform: translateX(-4px) skewX(-7deg);
    text-shadow: -5px 0 rgba(255, 30, 30, 0.75), 5px 0 rgba(30, 150, 150, 0.45), 0 0 40px #500;
    animation-timing-function: steps(1, end);
  }
  87.2% {
    transform: translateX(5px);
    opacity: 0.7;
    text-shadow: 4px 0 rgba(255, 30, 30, 0.75), -4px 0 rgba(30, 150, 150, 0.45), 0 0 40px #500;
    animation-timing-function: steps(1, end);
  }
  90.5% {
    transform: translateY(2px) skewX(5deg);
    opacity: 0.85;
    text-shadow: -2px 2px rgba(255, 30, 30, 0.6), 2px -1px rgba(30, 150, 150, 0.4), 0 0 40px #500;
    animation-timing-function: steps(1, end);
  }
}

/* Cifras de la partida en fichas; las numéricas cuentan hacia arriba
   (pintarFichas en js/game.js). */
.fichas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 720px;
}
.fichas:empty { display: none; }
.ficha {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 104px;
  padding: 10px 14px 9px;
  border: 1px solid var(--m-borde);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.008));
}
.ficha::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  width: 7px;
  height: 7px;
  border: solid var(--m-tinta-4);
  border-width: 1px 0 0 1px;
}
.ficha b {
  font-size: 24px;
  font-weight: normal;
  letter-spacing: 2px;
  white-space: nowrap;
  color: var(--m-tinta);
  font-variant-numeric: tabular-nums;
}
.ficha span { font-size: 9px; letter-spacing: 3px; color: var(--m-tinta-4); }
.ficha small { font-size: 9px; letter-spacing: 1px; color: var(--m-tinta-3); }
.ficha.xp b { color: #a9c79a; }
.ficha.oro b { color: var(--m-oro); text-shadow: 0 0 12px rgba(217, 164, 65, 0.3); }
.ficha.sangre b { color: var(--m-rojo-texto); }
@media (max-width: 460px) {
  .ficha { min-width: 86px; padding: 8px 10px 7px; }
  .ficha b { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  #screen-death #death-title { animation: none; }
}

/* La cara de Lady Carrey. Solo sale cuando te mata ella: entra de golpe y
   se queda ahí mientras suena su canción. */
#death-img {
  max-width: min(52vw, 420px);
  max-height: 38vh;
  flex-shrink: 0;
  object-fit: contain;
  border: 1px solid #3a1010;
  box-shadow: 0 0 60px rgba(158, 22, 22, 0.45);
  animation: carrey-in 0.35s steps(3) both;
}

@keyframes carrey-in {
  from { opacity: 0; transform: scale(1.35); filter: contrast(3) brightness(2); }
  to   { opacity: 1; transform: scale(1); filter: none; }
}

/* ---------------- Raros de la partida (victoria / historial) ---------------- */

#win-raros, #death-raros {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 720px;
}
/* Derrota: quien te mató va primero y marcado en rojo */
.raro-mini.culpable canvas { outline: 1px solid #9e1616; box-shadow: 0 0 14px #500; }
.raro-mini.culpable .name { color: #d0453f; }
.raro-mini .marca { font-size: 8px; letter-spacing: 2px; color: #c43a3a; }

.raros-titulo {
  font-size: 13px;
  letter-spacing: 4px;
  color: var(--m-tinta-4);
}

.raros-bloque {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.raros-fila {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.raro-mini {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 76px;
}
.raro-mini canvas {
  width: 56px;
  height: 84px;
  image-rendering: pixelated;
}
.raro-mini .name {
  font-size: 10px;
  letter-spacing: 1px;
  line-height: 1.3;
  color: var(--m-tinta);
  overflow-wrap: anywhere;
}
.raro-mini.chica { width: 54px; gap: 2px; }
.raro-mini.chica canvas { width: 30px; height: 44px; }
.raro-mini.chica .name { font-size: 8px; color: var(--m-tinta-3); }
/* Raro que estuvo pero no llegaste a ver */
.raro-mini.no-visto canvas { filter: brightness(0); opacity: 0.55; }
.raro-mini.no-visto .name { color: var(--m-tenue); }

/* ---------------- Opciones ---------------- */

.opt-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.opt-row label {
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--m-tinta-3);
}
.opt-row input[type="range"] { width: 260px; }
.opt-row .tag { font-style: normal; color: var(--m-tinta-2); }

/* En el bloque IMAGEN Y CONTROL cada fila es etiqueta | deslizador | valor,
   con los valores alineados a la derecha. En móvil la etiqueta sube. */
.opt-bloque .opt-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 170px) 48px;
  align-items: center;
  gap: 12px;
}
.opt-bloque .opt-row label { text-align: left; font-size: 11px; letter-spacing: 2px; }
.opt-bloque .opt-row input[type="range"] { width: 100%; }
.opt-bloque .opt-row .tag {
  text-align: right;
  font-size: 13px;
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
}
.opt-bloque .opt-row.opt-switch { grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 480px) {
  .opt-bloque .opt-row { grid-template-columns: minmax(0, 1fr) 48px; row-gap: 4px; }
  .opt-bloque .opt-row label { grid-column: 1 / -1; }
}
.opt-nota { font-size: 11px; line-height: 1.6; letter-spacing: 0.5px; color: var(--m-tinta-4); }
.opt-teclas .btn-row { justify-content: flex-start; }

/* Cada puntero ve su propio deslizador de sensibilidad: la fila táctil no
   existe con ratón y al revés. */
#opt-row-touch { display: none; }
body.touch-device #opt-row-sens { display: none; }
body.touch-device #opt-row-touch { display: grid; }

#keybinds-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 9px 22px;
}
@media (max-width: 480px) {
  #keybinds-list { grid-template-columns: minmax(0, 1fr); }
}
.keybind-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--m-tinta-3);
}
.keybind-row span { min-width: 0; }
.screen .keybind-row button.keycap {
  flex: none;
  min-width: 76px;
  padding: 5px 10px;
  font-size: 12px;
  letter-spacing: 1px;
  transition: transform 0.06s ease, box-shadow 0.06s ease, color 0.2s ease, border-color 0.2s ease;
}
@media (hover: hover) {
  .screen button.keycap:hover:not(:disabled) {
    background: linear-gradient(180deg, #3a1714 0%, #1c0907 100%);
    box-shadow: 0 3px 0 #0d0c0a, 0 3px 0 1px #4a1a14, 0 0 12px rgba(138, 31, 31, 0.35);
  }
}
.screen button.keycap:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #0d0c0a, 0 1px 0 1px #2f2b25;
}
/* Esperando tecla: hundida y parpadeando */
.screen .keybind-row button.keycap.listening {
  min-width: 0;
  font-size: 10px;
  color: var(--m-oro);
  border-color: var(--m-oro);
  transform: translateY(2px);
  box-shadow: 0 1px 0 #0d0c0a, 0 0 10px rgba(217, 164, 65, 0.3);
  animation: tecla-escucha 1s steps(2, jump-none) infinite;
}
@keyframes tecla-escucha {
  from { opacity: 1; }
  to { opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
  .screen .keybind-row button.keycap.listening { animation: none; }
}

/* ---------------- Bestiario ---------------- */

#screen-enemies { --gap: 14px; }
/* VOLVER fijo en la esquina superior derecha, sin el negro del pie pegado */
#screen-enemies .pie::before { display: none; }
#screen-enemies .pie {
  position: fixed;
  top: 14px;
  right: 16px;
  bottom: auto;
  margin: 0;
  padding: 0;
}
/* En pantallas estrechas el título bajaría debajo del botón: se le deja hueco */
@media (max-width: 599px) { #screen-enemies { padding-top: 66px; } }
/* Las fichas del bestiario van sin las esquinas marcadas del expediente */
.enemy-card::before, .enemy-card::after { display: none; }

/* Cabecera: «12 / 58 DESCUBIERTOS» sobre una barra fina (todo un 25% más grande que el resto de menús) */
#screen-enemies h1.small { font-size: clamp(27.5px, 5vw, 50px); letter-spacing: 12.5px; text-indent: 12.5px; }
.best-cab { display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(525px, 100%); }
.best-cuenta { font-size: 15px; letter-spacing: 5px; color: var(--m-tinta-3); }
.best-cuenta b {
  font-size: 27.5px;
  font-weight: normal;
  color: var(--m-tinta);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 12px rgba(160, 20, 20, 0.4);
}
.best-barra { width: 100%; height: 4px; background: #1d1a17; }
.best-barra i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--m-sangre), var(--m-sangre-viva));
  box-shadow: 0 0 8px rgba(179, 58, 42, 0.5);
  transition: width 0.4s ease;
}
.best-cab .tag { font-size: 13.75px; letter-spacing: 2.5px; }

.best-filtros { display: flex; flex-wrap: wrap; justify-content: center; gap: 7.5px; }
.best-filtros button { padding: 9px 17.5px; font-size: 13.75px; letter-spacing: 2.5px; }

/* Galería a lo ancho; la ficha sale como modal centrado (ver #best-detalle) */
.best-cuerpo {
  width: min(1100px, 100%);
}
#enemy-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  align-content: start;
}

/* Ficha de la galería: es un botón, así que se le quita lo de botón */
.screen button.enemy-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 8px 8px 10px;
  font-size: inherit;
  letter-spacing: normal;
  color: inherit;
  text-align: center;
  border-color: var(--m-borde);
}
@media (hover: hover) {
  .screen button.enemy-card:hover:not(:disabled) {
    background: linear-gradient(180deg, rgba(138, 31, 31, 0.12), rgba(255, 255, 255, 0.01));
    border-color: var(--m-sangre);
    box-shadow: none;
    color: inherit;
  }
}
.screen button.enemy-card.sel {
  border-color: var(--m-sangre-viva);
  box-shadow: 0 0 14px rgba(138, 31, 31, 0.3), inset 0 0 0 1px rgba(179, 58, 42, 0.35);
}
.best-sprite {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
  height: 105px;
  background: radial-gradient(ellipse at 50% 85%, #1a1714 0%, transparent 70%);
}
.best-sprite canvas {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: 100%;
  object-fit: contain;
  image-rendering: auto;
}
.best-num {
  position: absolute;
  top: 0;
  left: 2px;
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--m-tinta-4);
  font-variant-numeric: tabular-nums;
}
.enemy-card .name {
  font-size: 18px;
  letter-spacing: 1px;
  line-height: 1.3;
  color: var(--m-tinta);
  overflow-wrap: anywhere;
}
.enemy-card.locked .name { color: var(--m-tenue); letter-spacing: 4px; }
.enemy-card.locked .best-sprite canvas { opacity: 0.8; }

/* Marca de lo desbloqueado desde la última visita */
.best-nuevo {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 2px 5px;
  font-size: 8px;
  letter-spacing: 2px;
  color: #fff;
  background: var(--m-sangre);
  box-shadow: 0 0 10px rgba(179, 58, 42, 0.6);
  animation: best-nuevo 1.6s ease-in-out infinite;
}
@keyframes best-nuevo { 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .best-nuevo { animation: none; } }
.best-vacio { grid-column: 1 / -1; padding: 30px 0; font-size: 12px; letter-spacing: 2px; color: var(--m-tinta-4); }

/* Insignias: rareza, peligro y lugar */
.insignias { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.insignia {
  padding: 2px 5px;
  font-size: 8px;
  letter-spacing: 1.5px;
  line-height: 1.3;
  white-space: nowrap;
  border: 1px solid currentColor;
  color: var(--m-tinta-3);
}
.enemy-card .insignia { font-size: 13px; padding: 4px 9px; }
.insignia.rareza.comun { color: var(--m-tinta-4); }
.insignia.rareza.poco { color: #8fae7a; }
.insignia.rareza.raro { color: #6fa3d0; }
.insignia.rareza.muy { color: #b08ad8; }
.insignia.rareza.leyenda {
  color: var(--m-oro);
  background: rgba(217, 164, 65, 0.08);
  box-shadow: 0 0 8px rgba(217, 164, 65, 0.3);
}
.insignia.peligro.aliado { color: var(--m-musgo); }
.insignia.peligro.molesto { color: var(--m-ambar); }
.insignia.peligro.peligroso { color: var(--m-rojo-texto); }
.insignia.peligro.letal { color: #fff; background: var(--m-sangre); border-color: var(--m-sangre-viva); }
.insignia.lugar { color: var(--m-tinta-2); border-style: dashed; white-space: normal; }

/* Ficha de detalle: modal centrado sobre un telón. Sin ficha elegida no se ve. */
#best-fondo {
  position: fixed;
  inset: 0;
  z-index: 29;
  background: rgba(0, 0, 0, 0.78);
}
#best-detalle { display: none; }
#best-detalle.abierta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 30;
  width: min(560px, 92vw);
  max-height: 88vh;
  overflow-y: auto;
  padding: 18px 20px 20px;
  text-align: left;
  scrollbar-width: thin;
  background: #050404;
  box-shadow: 0 0 0 1px var(--m-borde-2), 0 18px 60px rgba(0, 0, 0, 0.9), 0 0 40px rgba(138, 31, 31, 0.18);
  animation: best-ficha-in 0.16s ease-out;
}
#best-detalle.abierta::before, #best-detalle.abierta::after { display: none; }
@keyframes best-ficha-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
}
@media (prefers-reduced-motion: reduce) { #best-detalle.abierta { animation: none; } }
#best-detalle .insignias { justify-content: flex-start; }
#best-detalle .insignia { font-size: 9px; padding: 3px 7px; }
.best-ayuda { font-size: 12px; line-height: 1.6; letter-spacing: 1px; color: var(--m-tinta-3); }

/* Placa de espécimen: cuadrícula de medir y el sprite apoyado abajo */
.best-placa {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 240px;
  padding: 14px 10px 22px;
  border: 1px solid var(--m-borde);
  background:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 100% 20px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 20px 100%,
    radial-gradient(ellipse at 50% 90%, #221d19 0%, #070606 70%);
}
.best-placa canvas {
  max-width: 100%;
  max-height: 100%;
  height: 100%;
  width: auto;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.9));
}
.best-placa-rotulo {
  position: absolute;
  left: 8px;
  bottom: 5px;
  font-size: 9px;
  letter-spacing: 3px;
  color: var(--m-tinta-4);
}
.best-det-nombre { font-size: 20px; letter-spacing: 4px; line-height: 1.25; color: var(--m-tinta); }
.best-cita {
  padding-left: 12px;
  border-left: 2px solid var(--m-borde-2);
  font-size: 13px;
  font-style: italic;
  line-height: 1.55;
  letter-spacing: 0.5px;
  color: var(--m-tinta-2);
}
.best-lista-titulo { font-size: 10px; letter-spacing: 4px; margin-bottom: 6px; }
.best-lista ul { margin: 0; padding: 0 0 0 14px; display: flex; flex-direction: column; gap: 5px; }
.best-lista li { font-size: 12.5px; line-height: 1.55; letter-spacing: 0.3px; color: var(--m-tinta-2); }
.best-lista.pro .best-lista-titulo, .best-lista.pro li::marker { color: #9cc08a; }
.best-lista.contra .best-lista-titulo, .best-lista.contra li::marker { color: #d0705f; }
.best-lista.pro { padding: 10px 12px; border-left: 2px solid rgba(127, 159, 111, 0.6); background: rgba(127, 159, 111, 0.05); }
.best-lista.contra { padding: 10px 12px; border-left: 2px solid rgba(181, 74, 60, 0.7); background: rgba(181, 74, 60, 0.05); }
.best-cerrar { align-self: center; margin-top: 4px; }
.best-placa { flex: none; }

/* Móvil y tablet estrecha: galería más compacta */
@media (max-width: 899px) {
  #enemy-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; }
  .best-sprite { height: 84px; }
  .best-num { font-size: 9px; }
  .enemy-card .name { font-size: 12px; }
  .enemy-card .insignia { font-size: 8px; padding: 2px 5px; }
  .best-placa { height: 200px; }
}

/* ---------------- Perfil: piezas comunes ---------------- */

/* Nombre del jugador en cabeceras */
.perfil-nombre {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  letter-spacing: 5px;
  color: var(--m-tinta);
  overflow-wrap: anywhere;
}
.perfil-nombre.grande { font-size: 26px; letter-spacing: 6px; text-shadow: 0 0 18px rgba(160, 20, 20, 0.4); }
.perfil-nombre .insignia { font-size: 9px; }

/* NIVEL 7 ━━━━━━──── 340 / 800 XP */
.nivel-barra { display: flex; align-items: center; gap: 12px; width: 100%; }
.nivel-num { flex: none; font-size: 12px; letter-spacing: 3px; color: var(--m-tinta); }
.nivel-pista { flex: 1; min-width: 60px; height: 4px; background: #1d1a17; box-shadow: inset 0 0 0 1px #26221d; }
.nivel-pista i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #5d7a4f, #a9c79a);
  box-shadow: 0 0 8px rgba(169, 199, 154, 0.4);
}
.nivel-xp { flex: none; font-size: 11px; letter-spacing: 1px; color: var(--m-tinta-3); font-variant-numeric: tabular-nums; }

/* ●●○: niveles de mejora, de atributo y puntos libres */
.pips { display: inline-flex; gap: 4px; align-items: center; }
.pips i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid var(--m-borde-2);
  background: transparent;
}
.pips i.on { border-color: var(--m-sangre-viva); background: #c8432f; box-shadow: 0 0 6px rgba(200, 67, 47, 0.6); }
.pips.grandes { flex-wrap: wrap; gap: 5px; }
.pips.grandes i { width: 12px; height: 12px; }
.pips.grandes i.on { border-color: var(--m-oro); background: var(--m-oro); box-shadow: 0 0 6px rgba(217, 164, 65, 0.5); }

/* «2 PUNTOS LIBRES»: encendida si hay algo que gastar */
.puntos-libres {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  padding: 5px 12px;
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--m-tinta-4);
  border: 1px solid var(--m-borde);
}
.puntos-libres b { font-size: 16px; font-weight: normal; letter-spacing: 1px; margin-right: 6px; }
.puntos-libres.hay { color: var(--m-oro); border-color: rgba(217, 164, 65, 0.5); background: rgba(217, 164, 65, 0.06); }

/* ◆ cenizas */
.chip-cenizas {
  flex: none;
  padding: 5px 12px;
  font-size: 15px;
  letter-spacing: 2px;
  color: var(--m-oro);
  border: 1px solid rgba(217, 164, 65, 0.45);
  background: rgba(217, 164, 65, 0.07);
  text-shadow: 0 0 10px rgba(217, 164, 65, 0.35);
  font-variant-numeric: tabular-nums;
}

/* ---------------- Estadísticas ---------------- */

#screen-stats { --gap: 16px; }
.perfil-detalle { display: flex; flex-direction: column; align-items: center; gap: 14px; width: min(720px, 100%); }
.perfil-detalle:empty { display: none; }
.perfil-cab { display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(460px, 100%); }
.perfil-detalle .fichas { max-width: none; }

/* Buscar a otro: una fila pequeña al final */
.stats-buscar { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; }
.stats-buscar label { font-size: 10px; letter-spacing: 3px; color: var(--m-tinta-4); }
.screen .stats-buscar input { width: 170px; padding: 7px 10px; font-size: 12px; letter-spacing: 3px; }
.stats-buscar button { padding: 7px 16px; }

#stats-historial {
  width: 100%;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hist-fila {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 12px 8px 14px;
  text-align: left;
}
/* Borde izquierdo verde o rojo según saliste o no */
.hist-fila.gano { border-left: 3px solid rgba(127, 159, 111, 0.75); }
.hist-fila.perdio { border-left: 3px solid rgba(181, 74, 60, 0.75); }
.hist-fila::before { display: none; }
.hist-fila .raros-bloque { flex-direction: row; align-items: center; }
.hist-fila .raros-titulo { font-size: 10px; letter-spacing: 2px; min-width: 88px; }
.hist-fila .raros-fila { justify-content: flex-start; gap: 6px; }

.hist-cab {
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--m-tinta-3);
}
.hist-res { letter-spacing: 3px; }
.hist-fila.gano .hist-res { color: #8fae6f; }
.hist-fila.perdio .hist-res { color: #c25a5a; }

/* ---------------- Mejoras ---------------- */

#perk-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  max-width: 760px;
}

.mejoras-cab { display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(460px, 100%); }
.mejoras-cab:empty { display: none; }

.perk-card {
  width: 340px;
  max-width: 100%;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}
.perk-card.con-nivel { border-color: var(--m-borde-2); }
.perk-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.perk-card .name {
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--m-tinta);
}

.perk-card .plus, .perk-card .minus {
  font-size: 11px;
  letter-spacing: 0.5px;
  line-height: 1.5;
}
.perk-card .plus { color: var(--m-pro); }
.perk-card .minus { color: var(--m-contra); }

.perk-card button {
  align-self: flex-end;
  padding: 7px 16px;
  font-size: 11px;
  letter-spacing: 3px;
  margin-top: 4px;
}
.screen .perk-card button.perk-subir { min-width: 64px; font-size: 13px; letter-spacing: 2px; }

/* ---------------- Mi criatura ----------------
   En PC el retrato a la izquierda y los atributos a la derecha. */

#screen-criatura { --gap: 16px; }
.criatura-cols {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  width: min(1000px, 100%);
}
@media (max-width: 820px) {
  .criatura-cols { grid-template-columns: minmax(0, 1fr); width: min(560px, 100%); }
}
#criatura-media {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 14px;
}
/* Marco del retrato: la foto o, sin ella, una silueta dibujada */
.criatura-marco {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  max-height: 272px;
  border: 1px solid var(--m-borde-2);
  background: radial-gradient(ellipse at 50% 70%, #1d1916 0%, #060505 72%);
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.9);
  overflow: hidden;
}
#criatura-foto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.4) contrast(1.15);
}
#criatura-foto:not([src]) { display: none; }
.criatura-sin-foto { width: 62%; height: 84%; fill: #2a2520; filter: drop-shadow(0 0 10px rgba(120, 20, 20, 0.35)); }
.criatura-sin-foto .trazo { fill: none; stroke: #2a2520; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.criatura-sin-foto .ojo { fill: #b0321f; }
@media (max-width: 820px) {
  .criatura-marco { width: min(100%, 230px); align-self: center; }
}
#criatura-foto[src] ~ .criatura-sin-foto, #criatura-foto[src] ~ .criatura-marco-rotulo { display: none; }
.criatura-marco-rotulo {
  position: absolute;
  left: 8px;
  bottom: 6px;
  font-size: 9px;
  letter-spacing: 3px;
  color: var(--m-tinta-4);
}
.screen #in-criatura-nombre { width: 100%; letter-spacing: 4px; font-size: 16px; }
.criatura-media-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.criatura-media-tit { width: 100%; font-size: 9px; letter-spacing: 3px; color: var(--m-tinta-4); }
.criatura-media-btns button { padding: 6px 10px; font-size: 10px; letter-spacing: 1px; }
#screen-criatura input[type="file"] { display: none; }

.criatura-attrs { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; text-align: left; }
#criatura-puntos { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
#criatura-puntos:empty { display: none; }
#criatura-grid { display: flex; flex-direction: column; }
/* Cada atributo: texto a la izquierda y [−] ●●○ [+] a la derecha */
.atributo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 9px 0;
  border-top: 1px solid var(--m-borde);
}
.atributo:first-child { border-top: 0; }
.atributo .name { font-size: 12px; letter-spacing: 2px; color: var(--m-tinta-2); }
.atributo.con-nivel .name { color: var(--m-tinta); }
.atributo-coste { margin-left: 8px; font-size: 9px; letter-spacing: 1px; color: var(--m-tinta-4); }
.atributo-desc { margin-top: 3px; font-size: 11px; line-height: 1.45; color: var(--m-tinta-3); }
.criatura-ctrl { display: flex; align-items: center; gap: 8px; }
.screen .criatura-ctrl button { width: 30px; height: 30px; padding: 0; font-size: 15px; letter-spacing: 0; }
@media (max-width: 420px) {
  .atributo { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .criatura-ctrl { justify-content: flex-end; }
}

/* ---------------- Cuenta ---------------- */

.cuenta-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(460px, 100%);
  padding: 20px 22px;
}
#cuenta-form { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.screen #cuenta-form input { width: 100%; }
.cuenta-nota { margin: 0; font-size: 11px; line-height: 1.6; letter-spacing: 0.5px; color: var(--m-tinta-4); text-align: center; }
.cuenta-ficha { display: flex; flex-direction: column; gap: 14px; }
.cuenta-ficha:empty { display: none; }
.cuenta-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cuenta-pin-estado { font-size: 11px; line-height: 1.55; letter-spacing: 1px; padding: 8px 10px; text-align: left; }
.cuenta-pin-estado.ok { color: var(--m-musgo); border: 1px solid rgba(127, 159, 111, 0.35); }
.cuenta-pin-estado.ok::before { content: '✓ '; }
.cuenta-pin-estado.falta { color: var(--m-ambar); border: 1px solid rgba(201, 162, 107, 0.45); background: rgba(201, 162, 107, 0.06); }
.cuenta-pin-estado.falta::before { content: '⚠ '; }
.cuenta-pin { display: flex; gap: 8px; }
.screen .cuenta-pin input { flex: 1; min-width: 0; width: auto; padding: 9px 10px; font-size: 13px; }
.cuenta-pin button { flex: none; padding: 9px 14px; letter-spacing: 2px; }
.cuenta-panel .msg { text-align: center; max-width: none; }
#cuenta-estado { color: var(--m-tinta-3); }

/* ---------------- Tienda de cosméticos ---------------- */

#screen-tienda { --gap: 16px; }
#tienda-cab { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tienda-saldo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; }
.tienda-nota { font-size: 11px; letter-spacing: 0.5px; color: var(--m-tinta-3); }
.tienda-nota.aviso { color: var(--m-ambar); }
.tienda-nota.aviso::before { content: '⚠ '; }
#tienda-cuerpo {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  justify-content: center;
  max-width: 980px;
  width: 100%;
}
#tienda-vista {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 150px;
}
#tienda-preview {
  width: 144px;
  height: 300px;
  image-rendering: pixelated;
  border: 1px solid var(--m-borde);
  background: radial-gradient(ellipse at 50% 40%, #1c1a17 0%, #050505 75%);
}
#tienda-nombre { font-size: 13px; letter-spacing: 3px; color: var(--m-tinta); }
#tienda-nombre small { display: block; font-size: 9px; letter-spacing: 1px; color: var(--m-tinta-4); margin-top: 3px; }
#tienda-vista-desc { font-size: 10px; color: var(--m-tinta-3); max-width: 150px; line-height: 1.5; }
#tienda-listas { flex: 1; display: flex; flex-direction: column; gap: 12px; }
#tienda-listas h2 {
  font-size: 11px;
  letter-spacing: 4px;
  color: var(--m-tinta-3);
  font-weight: normal;
  text-align: left;
  margin: 6px 0 0;
}
.tienda-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.tienda-card {
  width: 180px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  text-align: left;
  cursor: default;
}
.tienda-card:hover, .tienda-card.vista { border-color: #5a4a36; }
.tienda-card .cat { font-size: 9px; letter-spacing: 2px; color: var(--m-tinta-4); }
.tienda-card .name { font-size: 12px; letter-spacing: 1px; color: var(--m-tinta); }
.tienda-card .precio { font-size: 11px; color: var(--m-oro); letter-spacing: 1px; }
.tienda-card .precio.tuyo { color: var(--m-musgo); }
.tienda-card button { align-self: flex-start; padding: 6px 14px; font-size: 10px; letter-spacing: 2px; }
.tienda-card.fijo { border-style: dashed; }
/* Contratos: texto y premio arriba; debajo HOY/SEMANA, mini barra y cuenta */
#tienda-contratos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; text-align: left; }
.contrato {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 10px;
  align-items: baseline;
  padding: 8px 10px;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.5px;
  color: var(--m-tinta);
  border: 1px solid var(--m-borde);
  background: rgba(255, 255, 255, 0.015);
}
.contrato .premio { color: var(--m-oro); white-space: nowrap; }
.contrato-prog { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; }
.contrato-cuando { font-size: 9px; letter-spacing: 2px; color: var(--m-tinta-4); }
.contrato-barra { flex: 1; height: 3px; background: #1d1a17; }
.contrato-barra i { display: block; height: 100%; background: var(--m-oro); box-shadow: 0 0 6px rgba(217, 164, 65, 0.4); }
.contrato .prog { font-size: 10px; color: var(--m-tinta-3); font-variant-numeric: tabular-nums; }
.contrato.hecho { border-color: rgba(127, 159, 111, 0.4); }
.contrato.hecho .contrato-texto { color: var(--m-musgo); text-decoration: line-through; }
.contrato.hecho .premio { color: var(--m-musgo); }
.contrato.hecho .contrato-barra i { background: var(--m-musgo); box-shadow: none; }
.contrato.semanal { border-style: dashed; }
/* Logros: misma ficha que un contrato; el premio es un cosmético, no cenizas */
#tienda-logros { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; text-align: left; }
.contrato.logro { grid-template-columns: minmax(0, 1fr); }
.contrato.logro .premio { white-space: normal; }
.contrato.logro .contrato-texto b { display: block; font-weight: normal; font-size: 10px; letter-spacing: 2px; color: var(--m-tinta-3); }
.contrato.logro.hecho .contrato-texto { text-decoration: none; }
.tienda-slot button.logro { border-style: dashed; }
.tienda-slot { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.tienda-slot .lbl { font-size: 9px; letter-spacing: 2px; color: var(--m-tinta-4); width: 120px; text-align: left; }
.tienda-slot button { padding: 5px 10px; font-size: 10px; letter-spacing: 1px; }
.tienda-slot button.sel { border-color: var(--m-oro); color: var(--m-oro); }
.nombre-titulo { font-size: 0.75em; color: var(--m-tinta-4); letter-spacing: 1px; }
/* Estrellas de prestigio delante del nombre */
.nombre-prestigio { color: var(--m-oro); letter-spacing: 1px; text-shadow: 0 0 8px rgba(216, 176, 74, 0.45); }
#btn-mejoras-prestigio { color: var(--m-oro); border-color: rgba(217, 164, 65, 0.5); }
.prestigio-nota { margin-top: 8px; font-size: 12px; line-height: 1.5; color: var(--m-oro); letter-spacing: 1px; }

@media (max-width: 700px) {
  #tienda-cuerpo { flex-direction: column; align-items: center; }
  #tienda-vista { position: static; }
  .tienda-card { width: calc(50vw - 30px); }
  .tienda-slot .lbl { width: 100%; }
}

/* ---------------- Lobby ---------------- */

#lobby-entrada, #lobby-sala {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}

/* ---- Sala: dos columnas en PC, una en móvil ---- */
#lobby-sala { width: 100%; align-items: center; }
.sala-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 18px;
  align-items: start;
  width: min(1180px, 100%);
}
@media (max-width: 999px) {
  .sala-cols { grid-template-columns: minmax(0, 1fr); width: min(600px, 100%); }
}
.sala-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 18px 18px;
  text-align: left;
}
.sala-col .bloque-titulo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
#dif-quien { font-size: 10px; letter-spacing: 1px; color: var(--m-tinta-4); font-style: italic; }

/* Código: grande y copiable */
.screen button.sala-codigo {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  letter-spacing: normal;
  border: 1px dashed var(--m-borde-2);
  background: var(--m-fondo-input);
  text-align: left;
}
.sala-codigo-rot { font-size: 10px; letter-spacing: 3px; color: var(--m-tinta-4); }
.sala-codigo b {
  font-size: 28px;
  font-weight: normal;
  letter-spacing: 10px;
  color: #efe6d6;
  text-shadow: 0 0 16px rgba(160, 20, 20, 0.45);
}
.sala-codigo-ayuda { margin-left: auto; font-size: 10px; letter-spacing: 1px; color: var(--m-tinta-4); }
.sala-codigo.copiado { border-color: var(--m-musgo); }
.sala-codigo.copiado .sala-codigo-ayuda { color: var(--m-musgo); letter-spacing: 3px; }

/* Jugadores: una casilla cada uno; las libres, punteadas */
#lobby-players {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}
@media (max-width: 330px) { #lobby-players { grid-template-columns: minmax(0, 1fr); } }
.casilla {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 58px;
  padding: 9px 34px 9px 11px;
  border: 1px solid var(--m-borde-2);
  background: rgba(255, 255, 255, 0.025);
}
.casilla.yo { border-color: rgba(179, 58, 42, 0.6); }
.casilla-nombre {
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--m-tinta);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.casilla .insignias { justify-content: flex-start; }
.insignia.tu { color: var(--m-rojo-texto); }
.insignia.anfitrion { color: var(--m-oro); }
.insignia.bot { color: #7fa3c0; }
.insignia.rol { color: var(--m-tinta-2); }
.casilla.vacia {
  align-items: center;
  justify-content: center;
  padding: 9px 11px;
  border-style: dashed;
  border-color: var(--m-borde);
  background: transparent;
  font-size: 11px;
  font-style: italic;
  letter-spacing: 2px;
  color: var(--m-tenue);
}
.screen #lobby-players .kick, .screen #lobby-players .vote-kick {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 3px 7px;
  font-size: 13px;
  letter-spacing: 0;
  line-height: 1;
  color: #c45a5a;
  border-color: #4a2020;
}
.screen #lobby-players .vote-kick { font-size: 9px; letter-spacing: 1px; padding: 4px 6px; color: #b3924e; border-color: #4a3a20; }
@media (hover: hover) {
  .screen #lobby-players .kick:hover:not(:disabled) { color: #ff6f5f; }
  .screen #lobby-players .vote-kick:hover:not(:disabled) { color: #efb949; border-color: #8a641f; background: transparent; box-shadow: none; }
}
.screen button.sala-bot { align-self: flex-start; padding: 6px 14px; font-size: 10px; letter-spacing: 2px; border-style: dashed; }

.sala-sub { font-size: 11px; letter-spacing: 4px; color: var(--m-tinta-3); margin-top: 4px; }
.sala-sub span { font-size: 10px; letter-spacing: 1px; color: var(--m-tinta-4); font-style: italic; margin-left: 6px; }

/* Roles como tarjetas: nombre, efecto y quién lo tiene */
#lobby-roles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}
.screen button.rol-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  padding: 9px 10px;
  letter-spacing: normal;
  text-align: left;
}
.rol-nombre { font-size: 11px; letter-spacing: 2px; color: var(--m-tinta); }
.rol-efecto { font-size: 10.5px; line-height: 1.45; letter-spacing: 0.3px; color: var(--m-tinta-3); }
.rol-quien { margin-top: auto; font-size: 9px; letter-spacing: 1.5px; color: var(--m-tinta-4); font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.screen button.rol-card.sel { background: var(--m-sangre-fondo); }
.screen button.rol-card.sel .rol-quien { color: var(--m-rojo-texto); font-style: normal; }
.screen button.rol-card.taken:disabled { opacity: 0.45; }

#lobby-msg {
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--m-rojo-texto);
  min-height: 16px;
}

#lobby-quien { color: #b3a893; letter-spacing: 3px; }
.lobby-bloque {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: min(92vw, 460px);
  padding: 12px 14px;
}
.lobby-titulo {
  font-size: 13px;
  letter-spacing: 4px;
  color: #d8cdb8;
}
#salas-wrap {
  margin-top: 6px;
  align-items: stretch;
  width: min(92vw, 460px);
}
#salas-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 12px;
}

/* Código corto: una fila discreta bajo la lista */
#salas-codigo { display: flex; gap: 8px; }
#screen-lobby #salas-codigo input {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  font-size: 13px;
  letter-spacing: 4px;
}
#salas-codigo button { padding: 8px 16px; }

/* Crear: botón grande + candado opcional para ponerle contraseña */
#crear-row { display: flex; gap: 8px; align-items: stretch; }
#btn-create-lock { padding: 0 14px; letter-spacing: 0; font-size: 15px; }
@media (max-width: 420px) {
  #btn-create { padding: 14px 18px; letter-spacing: 4px; white-space: nowrap; }
}
#screen-lobby #in-create-password { width: min(78vw, 300px); }

#salas-filtro {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--m-tinta-4);
  cursor: pointer;
}

#salas {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--m-tinta-4);
  max-height: 170px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #3a352e transparent;
}

#salas .sala {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 12px;
  background: #0c0b0a;
  border: 1px solid #2c2822;
  color: #a99e8c;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 3px;
  cursor: pointer;
  text-align: left;
}
#salas .sala:hover { border-color: #7a2020; color: var(--m-tinta); background: #0c0b0a; box-shadow: none; }
#salas .sala:disabled { cursor: not-allowed; opacity: 0.45; border-color: #25221e; }
#salas .sala.abierta { border-color: #7a2020; }
#salas .sala .quien { color: var(--m-tinta); letter-spacing: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#salas .sala .candado { color: var(--m-oro); margin-right: 8px; letter-spacing: 0; }
#salas .sala-clave { display: flex; gap: 8px; padding-left: 14px; }
#screen-lobby #salas .sala-clave input {
  flex: 1;
  min-width: 0;
  padding: 7px 10px;
  font-size: 13px;
}
#salas .sala-clave button { padding: 7px 16px; }
#salas .sala .estado { flex-shrink: 0; font-size: 10px; letter-spacing: 2px; color: var(--m-tinta-4); }
#salas .sala .estado.viva { color: #b07a3a; }
#salas .vacio { color: var(--m-tinta-4); font-style: italic; letter-spacing: 2px; }

/* ---- La expedición: grupos LUGAR, AMENAZA, RECORRIDO y EXTRAS ----
   Cada fila es etiqueta | control | valor. */
#lobby-dificultad { display: flex; flex-direction: column; gap: 14px; }
.dif-grupo { display: flex; flex-direction: column; gap: 8px; }
.dif-rotulo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  letter-spacing: 4px;
  color: var(--m-tinta-4);
}
.dif-rotulo::after { content: ''; flex: 1; height: 1px; background: var(--m-borde); }
#lobby-dificultad .opt-row {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(100px, 1fr) minmax(0, 0.95fr);
  align-items: center;
  gap: 4px 12px;
}
#lobby-dificultad .opt-row label { text-align: left; font-size: 11px; letter-spacing: 1.5px; color: var(--m-tinta-3); }
#lobby-dificultad .opt-row input[type="range"] { width: 100%; }
#lobby-dificultad .opt-row .tag {
  font-size: 12px;
  font-style: normal;
  letter-spacing: 1px;
  line-height: 1.35;
  color: var(--m-tinta-2);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 480px) {
  #lobby-dificultad .opt-row { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); }
  #lobby-dificultad .opt-row label { grid-column: 1 / -1; }
}
/* El rango sigue ahí (DIF_SLIDERS lo lee), pero se maneja con otra cosa */
#lobby-dificultad .rango-oculto { display: none; }

/* LUGAR: ◀ NOMBRE ▶ */
#lobby-dificultad .opt-row.dif-lugar { display: flex; flex-direction: row; align-items: stretch; gap: 8px; }
.screen button.dif-flecha { flex: none; padding: 8px 14px; font-size: 12px; letter-spacing: 0; }
#lobby-dificultad .dif-lugar .tag {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--m-borde);
  background: var(--m-fondo-input);
  font-size: 14px;
  letter-spacing: 4px;
  color: var(--m-tinta);
  text-align: center;
}

/* MI CRIATURA y MUTACIÓN: interruptor (mismo dibujo que las casillas) */
#lobby-dificultad .opt-row.dif-switch { grid-template-columns: minmax(0, 1.15fr) auto minmax(0, 1.4fr); }
.screen button.switch {
  position: relative;
  width: 38px;
  height: 20px;
  padding: 0;
  border: 1px solid var(--m-borde-2);
  background: var(--m-fondo-input);
}
.screen button.switch::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  background: var(--m-tinta-4);
  transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.screen button.switch[aria-checked="true"] { border-color: var(--m-sangre); background: var(--m-sangre-fondo); }
.screen button.switch[aria-checked="true"]::before {
  transform: translateX(18px);
  background: #e8dfd0;
  box-shadow: 0 0 6px rgba(200, 40, 40, 0.6);
}
@media (max-width: 480px) {
  #lobby-dificultad .opt-row.dif-switch { grid-template-columns: auto minmax(0, 1fr); }
  #lobby-dificultad .dif-switch .tag { text-align: left; }
}

/* Calaveras: chips con una calavera dibujada */
.dif-calav-cab { font-size: 11px; letter-spacing: 1.5px; color: var(--m-tinta-3); margin-top: 2px; }
.dif-calav-cab span { font-size: 10px; letter-spacing: 0.5px; color: var(--m-tinta-4); font-style: italic; margin-left: 6px; }
.calaveras { display: flex; flex-wrap: wrap; gap: 6px; }
.screen .calaveras button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 7px;
  font-size: 10px;
  letter-spacing: 1px;
  border-radius: 12px;
}
.calaveras svg { width: 13px; height: 13px; fill: var(--m-tinta-4); flex: none; }
.screen .calaveras button.sel { border-color: var(--m-sangre-viva); color: #f0b0a0; background: var(--m-sangre-fondo); }
.calaveras button.sel svg { fill: #ff6a55; filter: drop-shadow(0 0 3px rgba(255, 70, 50, 0.7)); }

/* Recompensa en oro */
#dif-recompensa {
  align-self: flex-end;
  padding: 7px 12px;
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--m-tinta-3);
  border: 1px solid rgba(217, 164, 65, 0.35);
  background: rgba(217, 164, 65, 0.05);
}
#dif-recompensa b { font-size: 18px; font-weight: normal; letter-spacing: 1px; color: var(--m-oro); text-shadow: 0 0 12px rgba(217, 164, 65, 0.35); }
#dif-recompensa span { font-size: 11px; letter-spacing: 1px; color: var(--m-ambar); }

/* Sin ser anfitrión: resumen de solo lectura. Fuera controles; queda
   etiqueta | valor y, de las calaveras, solo las puestas. */
#lobby-dificultad.solo-lectura .opt-row,
#lobby-dificultad.solo-lectura .opt-row.dif-switch { grid-template-columns: minmax(0, 1fr) auto; }
#lobby-dificultad.solo-lectura .opt-row label { grid-column: auto; }
#lobby-dificultad.solo-lectura input[type="range"],
#lobby-dificultad.solo-lectura .switch,
#lobby-dificultad.solo-lectura .dif-flecha,
#lobby-dificultad.solo-lectura .calaveras button:not(.sel) { display: none; }
#lobby-dificultad.solo-lectura .dif-switch .tag { text-align: right; }
#lobby-dificultad.solo-lectura .calaveras button { opacity: 1; cursor: default; }
#lobby-dificultad.solo-lectura .calaveras:not(:has(.sel))::after {
  content: 'NINGUNA';
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--m-tinta-4);
}

/* Gana al estilo general de los campos: aquí se escribe prosa */
#screen-lobby #lobby-chat {
  width: 100%;
  text-transform: none;
  text-align: left;
  letter-spacing: 1px;
  font-size: 13px;
}
#screen-lobby #lobby-chat::placeholder { letter-spacing: 1px; }

/* ---- Pie de la sala: VOLVER | semilla · EMPEZAR ----
   Solo con la sala abierta (hermano anterior sin .hidden). */
#sala-lanzar { display: none; }
#lobby-sala:not(.hidden) ~ .pie { justify-content: space-between; }
#lobby-sala:not(.hidden) ~ .pie #sala-lanzar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
/* Alineado con las columnas (1180 px): el pie va de borde a borde, así que
   el hueco sale del relleno. 1140 = 1180 menos los 40 px de relleno de la
   pantalla que el % no cuenta. */
#lobby-sala:not(.hidden) ~ .pie {
  padding-left: max(20px, calc((100% - 1140px) / 2));
  padding-right: max(20px, calc((100% - 1140px) / 2));
}
.sala-semilla { display: flex; gap: 6px; }
/* La semilla es un número largo: no cabe con el espaciado de los códigos */
#screen-lobby #in-seed {
  width: 190px;
  padding: 9px 10px;
  letter-spacing: 2px;
  font-size: 12px;
}
#screen-lobby #in-seed::placeholder { letter-spacing: 1px; }
.sala-semilla button { padding: 8px 14px; }
#screen-lobby #btn-launch {
  padding: 14px 54px;
  font-size: 18px;
  letter-spacing: 8px;
  text-indent: 8px;
  border-color: var(--m-sangre);
  box-shadow: 0 0 24px rgba(138, 31, 31, 0.3);
}
#lobby-wait { font-size: 12px; letter-spacing: 2px; }
/* Móvil: la semilla en una línea y debajo VOLVER | EMPEZAR, siempre abajo.
   `display: contents` saca las piezas de #sala-lanzar a la rejilla del pie. */
@media (max-width: 640px) {
  #lobby-sala:not(.hidden) ~ .pie {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
  }
  #lobby-sala:not(.hidden) ~ .pie #sala-lanzar { display: contents; }
  .sala-semilla { grid-column: 1 / -1; grid-row: 1; }
  .sala-semilla #in-seed { flex: 1; width: auto; }
  #lobby-sala:not(.hidden) ~ .pie #btn-lobby-back { grid-column: 1; grid-row: 2; padding: 13px 14px; }
  #screen-lobby #btn-launch, #lobby-wait { grid-column: 2; grid-row: 2; }
  #screen-lobby #btn-launch { width: 100%; padding: 13px 10px; font-size: 16px; }
  #lobby-wait { font-size: 11px; letter-spacing: 1px; text-align: right; }
}

/* ---------------- Pausa ----------------
   El cartel no come clics: si no, tapa el canvas y la pausa no se quita. */
#pause-hint {
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  text-align: center;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.82);
  font-size: clamp(17px, 1.2vw, 24px);
  letter-spacing: 8px;
  color: var(--m-tinta-3);
}
/* Caja de expediente (.panel) sobre la escena oscurecida */
#pause-hint .pause-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: min(560px, 100%);
  padding: 28px 30px 26px;
  background: linear-gradient(180deg, rgba(20, 17, 15, 0.94), rgba(6, 5, 5, 0.94));
  border-color: var(--m-borde-2);
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.9), inset 0 0 40px rgba(138, 31, 31, 0.06);
}
#pause-msg { color: var(--m-tinta); text-shadow: 0 0 18px rgba(160, 20, 20, 0.45); }
@media (max-width: 460px) {
  #pause-hint .pause-box { padding: 22px 16px 20px; }
  #pause-hint { letter-spacing: 4px; }
}
#pause-sub { font-size: 13px; letter-spacing: 2px; color: var(--m-tinta-3); max-width: 460px; }
/* Solo los botones reciben el clic; el resto del cartel lo deja pasar */
#pause-hint .btn-row {
  pointer-events: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
}
/* Mismo tamaño para los dos: el ghost solo cambia el color */
#pause-hint button { font-size: 15px; letter-spacing: 3px; padding: 14px 12px; }
@media (max-width: 460px) {
  #pause-hint .btn-row { grid-template-columns: 1fr; }
}