/* Estilos de la interfaz. Pensados para funcionar igual en móvil, tablet,
   PC y en el navegador de una consola: nada de anchos fijos, todo flexible,
   y objetivos táctiles grandes. */

* { box-sizing: border-box; }

:root {
  --fondo: #0e1a12;
  --panel: rgba(14, 26, 18, 0.92);
  /* Mismo color del panel pero traslúcido, para los paneles que se ponen
     ENCIMA del mapa (elegir herramientas, inventario del móvil) y no deben
     tapar lo que hay que mirar para decidir. Subir el valor = más opaco. */
  --panel-suave: rgba(14, 26, 18, 0.6);
  --panel-borde: rgba(126, 190, 140, 0.28);
  --texto: #eef3e9;
  --tenue: #9db3a3;
  --verde: #7ce49a;
  --ambar: #ffd45e;
  --rojo: #ff7a68;
  --alto-barra: 52px;
}

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--fondo);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: none;
}

#lienzo {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

/* ------------------------------------------------------------------ HUD -- */

#hud {
  position: fixed;
  inset: 0;
  pointer-events: none;
  display: none;
  flex-direction: column;
  justify-content: space-between;
}
#hud.visible { display: flex; }
#hud > * { pointer-events: auto; }
/* ...menos los dos carteles, que NO atrapan el ratón.
   Están siempre en el DOM y sólo se apagan con `opacity`, así que su caja
   seguía ahí, invisible y en mitad del mapa, comiéndose los clics: pinchabas
   una loseta de la zona de arriba y no pasaba nada. Y ojo con la especificidad
   — `#hud > *` (1,0,0) le gana a `.aviso` (0,1,0), que es justo lo que pasaba
   antes: cada uno declaraba `pointer-events: none` y no servía de nada. */
#hud > .aviso,
#hud > .espera,
#hud > .cartel { pointer-events: none; }

.barra {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--panel);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--panel-borde);
}
/* La barra de arriba manda sobre todo lo que se abre encima del mapa: el
   registro, los carteles de ambiente, la barra de reproducción. Sin esto el
   registro —que es un panel largo y pegado a la derecha, justo debajo— se
   pintaba por encima de sus propios botones, y el de "Registro" caía dentro:
   podías abrirlo pero no cerrarlo. Se queda por debajo del panel de elegir
   herramientas (z-index 15) y de "Cargando" (20) a propósito: ésos hay que
   atenderlos antes de seguir toqueteando la partida. */
.barra.superior {
  justify-content: space-between;
  min-height: var(--alto-barra);
  position: relative;
  z-index: 12;
}
.barra.inferior {
  align-items: flex-end;
  gap: 12px;
  border-bottom: none;
  border-top: 1px solid var(--panel-borde);
  padding-bottom: max(8px, env(safe-area-inset-bottom));
}

/* Ficha de personaje: el inventario sobre el arte original */
.ficha {
  flex: 0 0 auto;
  width: 100%;
  display: block;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.2);
}

/* En horizontal, el panel de juego va en columna a la izquierda: ficha arriba
   (debajo de la barra) y acciones justo debajo. Así el mapa queda despejado. */
@media (min-width: 721px) {
  #hud { justify-content: flex-start; }
  .barra.inferior {
    position: absolute;
    top: calc(var(--alto-barra) + 10px);
    left: 10px;
    width: min(360px, 32vw);
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    border: 1px solid var(--panel-borde);
    border-radius: 13px;
    padding: 10px;
    max-height: calc(100% - var(--alto-barra) - 24px);
    overflow-y: auto;
  }
  .barra.inferior .botones { max-height: none; overflow: visible; }
}

/* EL SELECTOR DE TEMA de la portada: flecha, nombre, flecha.
   Va con flechas y no con una lista porque los temas son pocos y se miran uno a
   uno; y va en la portada porque el tema vale para toda la partida, no para la
   pantalla en la que estés. Con un solo tema las flechas salen apagadas, para que
   se vea que el sitio existe. */
.tema-selector {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--panel-borde);
}
.tema-selector .flecha {
  flex: 0 0 auto;
  min-width: 40px;
  padding: 8px 10px;
  font-size: 16px;
  line-height: 1;
  border-radius: 10px;
  border: 1px solid var(--panel-borde);
  background: rgba(255, 255, 255, 0.06);
  color: var(--texto);
  cursor: pointer;
}
.tema-selector .flecha:hover:not(:disabled) { background: rgba(255, 255, 255, 0.14); }
.tema-selector .flecha:disabled { opacity: 0.3; cursor: default; }
.tema-selector .tema-nombre {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 9rem;
}
.tema-selector .etiqueta { font-size: 11px; color: var(--tenue); text-transform: uppercase; letter-spacing: 0.06em; }
.tema-selector strong { font-size: 16px; }

.grupo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.grupo.derecha { justify-content: flex-end; }
.tenue { color: var(--tenue); font-size: 12px; }

#hud-jugador { font-size: 16px; font-weight: 700; }

/* La cuenta atrás del turno (sólo por internet, y sólo si la sala tiene reloj).
   Va con cifras de ancho fijo y un ancho mínimo para que la barra no dé un
   respingo cada segundo, al pasar de "1:09" a "1:9" de anchura. */
.reloj {
  display: none;
  min-width: 46px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 14px;
  padding: 3px 7px;
  border-radius: 8px;
  border: 1px solid var(--panel-borde);
  color: var(--tenue);
}
.reloj.visible { display: inline-block; }
/* Cuando el que se queda sin tiempo eres tú, se ve. */
.reloj.mio { color: var(--texto); border-color: var(--verde); }
.reloj.apurado { color: var(--rojo); border-color: var(--rojo); }
.reloj.mio.apurado { animation: latir 1s steps(2, end) infinite; }

/* El MISMO reloj, colgado debajo de la barra: es el que se usa en el móvil (ver
   la plantilla del HUD). Va en absoluto y colgando de la barra —como el
   desplegable de las tres rayas— para no darle altura: si la barra creciera, el
   mapa se encogería (`medirHud` la mide para encuadrar la isla).

   En pantalla ancha no existe, y por eso se apaga con el ID: `#hud-reloj-movil`
   (un id) le gana a `.reloj.visible` (dos clases), que es lo que enciende al
   otro. Así los dos nodos llevan las mismas clases y sólo se ve el que toca.

   Lleva fondo y sombra porque cae sobre el mapa, y no atrapa el dedo: debajo se
   sigue tocando el tablero. */
#hud-reloj-movil {
  display: none;
  position: absolute;
  top: 100%;
  left: 8px;
  margin-top: 6px;
  z-index: 5;
  font-size: 15px;
  padding: 4px 9px;
  background: var(--panel);
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

@keyframes latir { 50% { opacity: 0.35; } }

.acciones-puntos { display: inline-flex; gap: 4px; }
.acciones-puntos .punto {
  width: 11px; height: 11px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.24);
}
/* Blancos, los mismos que rodean la ficha del aventurero en el mapa: es el
   mismo contador visto en dos sitios, así que tiene que ser el mismo color. */
.acciones-puntos .punto.lleno { background: #ffffff; border-color: #ffffff; }

.vidas { display: inline-flex; gap: 2px; align-items: center; }
.vidas canvas { display: block; }

button {
  font: inherit;
  color: var(--texto);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--panel-borde);
  border-radius: 9px;
  padding: 9px 12px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, transform 0.06s;
}
button:hover:not(:disabled) { background: rgba(255, 255, 255, 0.15); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: 0.35; cursor: default; }
button.mini { padding: 6px 9px; font-size: 12px; }
button.mini.activa { border-color: var(--ambar); background: rgba(255, 212, 94, 0.2); }

/* El icono del botón de cámara: va con el texto, no encima ni debajo, así que
   se mide en "em" para que crezca y encoja con la letra del botón. El
   desplazamiento de línea base lo centra con las mayúsculas de al lado. */
.icono-camara {
  width: 1.35em;
  height: 1.35em;
  vertical-align: -0.34em;
  margin-right: 5px;
}

button.principal {
  width: 100%;
  background: var(--verde);
  color: #0c1a12;
  font-weight: 700;
  border-color: transparent;
  padding: 13px;
  margin-top: 6px;
}
/* Sin esto el hover genérico lo dejaba blanquecino y parecía deshabilitado. */
button.principal:hover:not(:disabled) {
  background: #a6f2bb;
  box-shadow: 0 0 0 2px rgba(124, 228, 154, 0.35);
}

/* Botones de acción.

   Dos filas y no una: arriba las acciones del momento, que van y vienen según
   lo que se pueda hacer, y ABAJO LAS FIJAS —deshacer y pasar turno—, que están
   en todos los turnos y por eso no se mueven de su sitio nunca. La de arriba es
   la que crece, se parte en varias líneas y hace scroll si hace falta; la de
   abajo se queda pegada al fondo del panel. */
.acciones-panel {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
}
.fijas {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
  border-top: 1px solid var(--panel-borde);
  padding-top: 8px;
  /* Con tres botones (soltar, deshacer, pasar turno) en una pantalla muy
     estrecha el tercio no da para "Pasar turno". Antes que apretarlos hasta
     partirles el texto en dos líneas, que se caiga uno a la línea de abajo. */
  flex-wrap: wrap;
}
/* En la fila de abajo los dos reparten el ancho: son los botones que se buscan
   sin mirar, y un blanco grande y siempre igual es justo lo que hace falta. */
.fijas button.accion { flex: 1 1 0; justify-content: center; white-space: nowrap; }

/* La fila del helicóptero sólo existe dentro de su claro: sin botones no deja
   ni el hueco ni la raya de separación. */
.fijas.helicoptero { display: none; }
.fijas.helicoptero.visible { display: flex; }

/* Eligiendo qué soltar, la ficha es un botón grande: el cursor lo dice. */
.ficha.soltando { cursor: pointer; }

.botones {
  flex: 1 1 auto;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-content: flex-end;
  max-height: 30vh;
  overflow-y: auto;
  scrollbar-width: thin;
}
.botones::-webkit-scrollbar { width: 5px; }
.botones::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.18); border-radius: 3px; }

button.accion {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  flex: 0 0 auto;
}
button.accion .coste {
  font-size: 10px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 5px;
  padding: 1px 5px;
}
button.accion.activa { border-color: var(--ambar); background: rgba(255, 212, 94, 0.18); }
button.accion.destacada { border-color: var(--verde); background: rgba(124, 228, 154, 0.18); }

/* Aviso flotante */
.aviso {
  position: absolute;
  top: calc(var(--alto-barra) + 10px);
  left: 50%;
  transform: translate(-50%, -8px);
  background: var(--panel);
  border: 1px solid var(--panel-borde);
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 13px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s, transform 0.16s;
  max-width: 88vw;
  text-align: center;
}
.aviso.visible { opacity: 1; transform: translate(-50%, 0); }
.aviso.error { border-color: var(--rojo); color: var(--rojo); }

/* "No te toca" — el letrero de por qué el tablero no responde.
   Va debajo del aviso de esquina y NO se va solo: mientras dure el motivo,
   ahí sigue. Sin él, un turno ajeno se confunde con un juego colgado, que es
   justo lo que pasaba en el móvil. */
.espera {
  position: absolute;
  /* Por debajo del aviso de esquina, que ocupa ese mismo hueco cuando salta. */
  top: calc(var(--alto-barra) + 52px);
  left: 50%;
  transform: translateX(-50%);
  max-width: 88vw;
  display: none;
  align-items: center;
  gap: 8px;
  background: rgba(8, 16, 11, 0.78);
  backdrop-filter: blur(3px);
  border: 1px solid var(--panel-borde);
  border-left: 3px solid var(--ambar);
  border-radius: 10px;
  padding: 8px 13px;
  font-size: 13px;
  color: var(--texto);
  text-align: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
.espera.visible { display: flex; }

/* Cartel de ambiente
   Va bastante más arriba que el centro para no caer sobre los paneles que se
   abren en mitad del mapa (elegir herramientas) ni sobre la isla, y nunca
   atrapa el ratón: aparece solo, se va solo y no interrumpe la partida. */
.cartel {
  position: absolute;
  top: 17%;
  left: 50%;
  transform: translate(-50%, 10px) scale(0.98);
  background: rgba(8, 16, 11, 0.62);
  backdrop-filter: blur(2px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  padding: 16px 26px;
  font-size: clamp(15px, 3.4vw, 22px);
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
  max-width: min(30em, 88vw);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s, transform 0.35s;
}
.cartel.visible { opacity: 1; transform: translate(-50%, 0) scale(1); }

/* Registro */
.registro {
  position: absolute;
  top: calc(var(--alto-barra) + 10px);
  right: 10px;
  width: min(330px, 82vw);
  max-height: 46vh;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--panel-borde);
  border-radius: 11px;
  padding: 9px 11px;
  font-size: 12px;
  line-height: 1.5;
  display: none;
}
.registro.abierto { display: block; }

/* El cajón de escribir. Vive donde el registro —colgando de la barra— y también
   por encima del mapa, pero a la izquierda para no taparse con él: se pueden
   querer las dos cosas abiertas a la vez, leyendo lo que pasó mientras se
   contesta. */
.chat {
  position: absolute;
  top: calc(var(--alto-barra) + 10px);
  left: 10px;
  z-index: 11;
  display: none;
  gap: 6px;
  width: min(420px, calc(100vw - 20px));
  padding: 8px;
  background: var(--panel);
  backdrop-filter: blur(8px);
  border: 1px solid var(--panel-borde);
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}
.chat.abierto { display: flex; }
.chat input { flex: 1 1 auto; min-width: 0; }

/* Los bocadillos de lo que se va diciendo. Cuelgan de la barra, debajo del
   cajón de escribir, y NO atrapan el ratón: caen sobre el mapa y hay que poder
   seguir jugando por debajo. Se anclan arriba y no abajo porque la barra
   inferior cambia de alto —en el móvil crece con el inventario desplegado— y
   los bocadillos se le metían detrás. */
.charla {
  position: absolute;
  left: 10px;
  top: calc(var(--alto-barra) + 10px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: min(420px, 78vw);
  pointer-events: none;
  /* Por encima del panel de juego (que no lleva z-index) y por debajo de la
     barra de arriba (12): un bocadillo ancho puede llegar a solaparlo. */
  z-index: 11;
}
.charla .globo {
  background: var(--panel);
  border: 1px solid var(--panel-borde);
  border-radius: 12px;
  padding: 7px 11px;
  font-size: 13px;
  line-height: 1.4;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}
.charla .globo strong { margin-right: 6px; }
/* Con el cajón abierto, los bocadillos se apartan y se ponen debajo de él. */
.chat.abierto ~ .charla { top: calc(var(--alto-barra) + 66px); }

/* En pantalla ancha los bocadillos NO pueden vivir arriba a la izquierda: ahí
   está el panel de juego, que los tapaba entero. Se van al centro de arriba,
   como el resto de mensajes, debajo del hueco del aviso y del letrero de
   espera para no pisarlos. Va DESPUÉS de las reglas de arriba a propósito:
   misma especificidad, así que sólo gana el que llega el último. */
@media (min-width: 721px) {
  .charla,
  .chat.abierto ~ .charla {
    left: 50%;
    transform: translateX(-50%);
    /* El cajón de escribir queda a la izquierda y éstos en el centro: ya no se
       estorban, así que abrirlo no los mueve. */
    top: calc(var(--alto-barra) + 96px);
    align-items: center;
    text-align: center;
  }
}
.registro .linea { padding: 2px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }

/* Barra de reproducción de la partida */
.reproduccion {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: none;
  align-items: center;
  gap: 5px;
  background: var(--panel);
  border: 1px solid var(--panel-borde);
  border-radius: 12px;
  padding: 7px 9px;
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45);
  max-width: 96vw;
  flex-wrap: wrap;
  justify-content: center;
}
.reproduccion.visible { display: flex; }
.reproduccion button { padding: 7px 10px; font-size: 13px; line-height: 1; }
.reproduccion button.activa { border-color: var(--ambar); background: rgba(255, 212, 94, 0.2); }
.reproduccion .pos { font-size: 12px; color: var(--tenue); padding: 0 6px; white-space: nowrap; }
.reproduccion .continuar { border-color: var(--verde); background: rgba(124, 228, 154, 0.16); }

/* Fin de partida */
.fin {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  background: rgba(6, 12, 8, 0.82);
  backdrop-filter: blur(3px);
}
.fin.visible { display: grid; }
.fin .panel {
  background: var(--panel);
  border: 1px solid var(--panel-borde);
  border-radius: 16px;
  padding: 26px;
  text-align: center;
  max-width: 460px;
  margin: 16px;
}
.fin h2 { margin: 0 0 16px; font-size: 20px; line-height: 1.4; }

/* Las cuentas del final: una columna por aventurero.

   La tabla puede crecer, así que el panel se limita en alto y hace scroll por
   dentro — en un móvil tumbado, si no, el botón de "Jugar otra partida" se iba
   por debajo de la pantalla y la partida no tenía salida. */
.fin .panel { max-height: 82vh; overflow-y: auto; }
.fin-datos:not(:empty) { margin: 0 0 18px; }
.tabla-fin {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  text-align: right;
}
.tabla-fin th, .tabla-fin td { padding: 4px 6px; }
/* La primera columna es el rótulo de la fila: a la izquierda y en tenue, que lo
   que hay que comparar de un vistazo son los números. */
.tabla-fin tbody th { text-align: left; font-weight: 400; color: var(--tenue); }
.tabla-fin thead th { border-bottom: 1px solid var(--panel-borde); font-size: 12px; }
.tabla-fin tbody tr:nth-child(odd) { background: rgba(255, 255, 255, 0.03); }
.tabla-fin tr.acabo th, .tabla-fin tr.acabo td {
  border-top: 1px solid var(--panel-borde);
  padding-top: 8px;
  font-size: 12px;
}
.tabla-fin tr.acabo td { color: var(--texto); }
.fin-resumen { margin: 10px 0 0; font-size: 12px; color: var(--tenue); }

/* Los dos de refuerzo, debajo de "Jugar otra partida": salir y guardar.

   Verdes como el principal —son la misma familia de "y ahora qué hago"— pero
   perfilados en vez de macizos, para que el de arriba siga siendo el que más
   pesa. En una pantalla estrecha se apilan solos en vez de encogerse hasta que
   el texto no cabe. */
.fin-botones {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
button.secundaria {
  flex: 1 1 140px;
  padding: 11px;
  font-weight: 600;
  color: var(--verde);
  border-color: var(--verde);
  background: rgba(124, 228, 154, 0.12);
}
button.secundaria:hover:not(:disabled) { background: rgba(124, 228, 154, 0.24); }

/* ----------------------------------------------------------------- Menú -- */

#menu {
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  overflow-y: auto;
  /* El margen entre el recuadro y el borde de la pantalla. Es una variable
     porque las instrucciones NECESITAN saberlo para calcular su alto (ver
     `.instrucciones`): si se cambia aquí y allí no, la hoja se pasa de largo. */
  --menu-margen: 16px;
  /* Lo que se ve mientras la foto carga, y lo que queda si el tema no trae
     ninguna: los dos halos verdes de siempre sobre `--fondo`. */
  background:
    radial-gradient(circle at 30% 20%, rgba(60, 130, 80, 0.22), transparent 55%),
    radial-gradient(circle at 75% 75%, rgba(40, 90, 60, 0.22), transparent 55%),
    var(--fondo);
  padding: var(--menu-margen);
}

/* LA FOTO DEL MENÚ SE VE ENTERA, Y POR ESO VAN DOS CAPAS Y NO UNA.

   Con `contain` la foto cabe entera, pero deja bandas muertas donde la pantalla
   no tiene su misma proporción. Así que se pinta dos veces, como hacen los
   reproductores de vídeo con un vídeo vertical:

     · `::before` es el relleno — la misma foto en `cover`, muy desenfocada y
       apagada. No se mira, sólo tapa las bandas y da el color;
     · `::after` es la foto de verdad, en `contain` y tal cual es: sin velo, sin
       filtros, sin nada encima. La foto es el menú, y se mira. Lo que tiene que
       leerse encima va dentro del recuadro, que tiene su propio fondo oscuro y
       se defiende solo (ver `#menu .panel-menu` más abajo).

   Las dos van en pseudoelementos y no en capas del `background` por dos motivos:
   el desenfoque es un `filter` y un `filter` se aplica al elemento entero —
   puesto en `#menu` habría emborronado también los botones—, y en `fixed` se
   quedan quietas mientras el menú se desplaza por dentro (ver abajo).

   `--fondo-menu` la elige el bloque de orientación de más abajo; las rutas de
   las dos fotos las pone `pintarFondoDelMenu` en app.js. */
#menu::before,
#menu::after {
  content: '';
  /* FIJAS, NO ABSOLUTAS: `#menu` tiene `overflow-y: auto` para que en una
     pantalla baja se pueda bajar hasta el último botón, y con `absolute` el
     fondo se iba hacia arriba con el contenido. En `fixed` se quedan pegadas a
     la pantalla y sólo se mueve el menú, que es lo que se espera de un fondo.
     Vale igual en el móvil, donde esto se nota mucho más. */
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
#menu::before {
  background: var(--fondo-menu, none) center / cover no-repeat;
  /* El `scale` tapa el borde transparente que deja el desenfoque al difuminar
     contra el canto de la caja. */
  filter: blur(34px) brightness(0.55) saturate(0.8);
  transform: scale(1.12);
}
#menu::after {
  background: var(--fondo-menu, none) center / contain no-repeat;
}

/* CUÁL DE LAS DOS FOTOS, POR ORIENTACIÓN.

   Una foto vertical no cabe entera en una pantalla tumbada sin encogerse hasta
   quedar más estrecha que el panel —que es justo lo que la tapaba—, así que el
   tema trae las dos y aquí se elige. Lo decide el CSS y no JavaScript porque
   girar el móvil es un cambio de medio, no un evento que haya que atender: al
   girarlo se cambia sola, sin repintar nada.

   De pie es la vertical, y es también lo que se usa si no se sabe. */
#menu { --fondo-menu: var(--fondo-menu-v, none); }

@media (orientation: landscape) {
  #menu { --fondo-menu: var(--fondo-menu-h, none); }
}

/* El contenido, por encima de las dos capas de fondo. */
#menu > * { position: relative; z-index: 1; }
#menu.visible { display: grid; }

.panel-menu {
  width: min(460px, 100%);
  background: var(--panel);
  border: 1px solid var(--panel-borde);
  border-radius: 18px;
  /* A los lados 15 y no 22: con los ajustes a dos columnas, cada píxel que se
     le quita al margen se lo lleva el contenido, y en el móvil los dos
     desplegables de una fila iban justos. Arriba y abajo se queda el aire de
     siempre, que ahí no falta sitio. */
  padding: 22px 15px;
}
/* En el menú principal y sus submenús el recuadro deja pasar un poco la foto
   del fondo: lo justo para que se vea que hay isla debajo, sin que los botones
   pierdan contraste. Sólo aquí — los paneles que salen ENCIMA del mapa tienen
   su propia transparencia (`--panel-suave`) y otro motivo para tenerla. */
#menu .panel-menu { background: rgba(14, 26, 18, 0.72); }

/* `line-height: 1` por lo mismo que en `.titulo-pantalla`: el aire de arriba
   del recuadro lo pone el padding, no el interlineado del título. */
.panel-menu h1 { margin: 0; font-size: 26px; line-height: 1; letter-spacing: 0.3px; }
.panel-menu .subtitulo { margin: 4px 0 18px; color: var(--tenue); font-size: 13px; }

/* El nombre del juego, centrado y con aire hasta la primera opción. */
.panel-menu h1.titulo-juego { text-align: center; margin-bottom: 20px; }

/* Las pestañas del menú: son dos menús distintos (local y en línea), no un
   ajuste, así que van arriba del todo y por encima del título. */
.pestanas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
.pestanas .pestana { flex: 1 1 auto; padding: 10px 8px; font-size: 13px; white-space: nowrap; }
.pestanas .pestana.activa {
  border-color: var(--verde);
  background: rgba(124, 228, 154, 0.18);
  font-weight: 700;
}

.campo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 14px;
}
.campo > span { color: var(--tenue); }

/* LOS AJUSTES DE PARTIDA, A DOS COLUMNAS.
   Diez controles en una sola columna no cabían en una pantalla de móvil: había
   que ir bajando para ver lo que se estaba configurando, y al llegar abajo ya
   no se veía lo de arriba. Emparejados, la configuración entera se lee de un
   vistazo en el móvil y en el PC.

   Dentro de la rejilla el rótulo va ENCIMA del control y no al lado: al lado no
   hay sitio en media columna, y encima queda además todo alineado entre las dos
   —los nombres arriba, los desplegables debajo—.

   `.ancho` es para lo que se lee mejor de lado a lado (los caminos, la semilla):
   ocupa la fila entera. */
.rejilla-campos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
  margin-bottom: 10px;
}
.rejilla-campos .campo {
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  margin-bottom: 0;
  min-width: 0;
}
.rejilla-campos .campo.ancho { grid-column: 1 / -1; }
/* El control se lleva el ancho de su celda: aquí ya no hay un ancho fijo que
   respetar, lo pone la columna. */
.rejilla-campos .campo select,
.rejilla-campos .campo input,
.rejilla-campos .campo .paso-selector {
  width: 100%;
  min-width: 0;
}
/* Los rótulos de la rejilla pueden ser largos ("Reaparición de enemigos") y la
   media columna es estrecha: se recortan con puntos suspensivos en vez de
   partir la fila en dos y descuadrar las alturas. El título completo sigue
   estando en el `title` del control. */
.rejilla-campos .campo > span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  /* Centrados sobre lo suyo, como las cabeceras de la lista de aventureros:
     el control de debajo ocupa la celda entera, así que un rótulo pegado a la
     izquierda quedaba descolgado de lo que nombra. */
  text-align: center;
}
/* Lo que todavía no funciona se ve que no funciona: hoy, los dos de los bots. */
.rejilla-campos .campo select:disabled { opacity: 0.45; cursor: not-allowed; }
/* Todos los desplegables del menú miden lo mismo y acaban en la misma línea:
   con anchos distintos el menú parecía una lista de campos sueltos. Lo que no
   quepa (el nombre largo de una densidad) se recorta con puntos suspensivos. */
.campo select, .campo input, .campo .paso-selector {
  font: inherit;
  font-size: 14px;
  color: var(--texto);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--panel-borde);
  border-radius: 9px;
  padding: 9px 10px;
  flex: 0 0 auto;
  width: 210px;
  max-width: 100%;
  text-overflow: ellipsis;
}

/* LA FLECHITA DEL DESPLEGABLE, dibujada por nosotros y no por el navegador.
   La nativa se pega al borde derecho —cada navegador la pone donde quiere— y
   con el borde redondeado quedaba apretujada contra la esquina. Aquí se apaga
   el dibujo del sistema y se pinta un triángulo con su aire por la derecha; el
   `padding-right` reserva su hueco para que un nombre largo no se le meta
   debajo. Sólo en los campos del menú: los desplegables de una sola cifra
   (campamento, equipo) son demasiado estrechos para gastar 30px en esto.
   El color del triángulo va escrito a mano y no como `var(--texto)` porque
   dentro de un `data:` no se pueden usar variables; es el mismo valor, y si
   algún día `--texto` cambia hay que cambiarlo aquí también. */
.campo select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 30px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'><path d='M1 1l4 4 4-4' fill='none' stroke='%23eef3e9' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
/* Firefox pinta el texto de la opción con un relleno propio; se le quita para
   que el recorte con puntos suspensivos siga cayendo antes de la flecha. */
.campo select:-moz-focusring { color: transparent; text-shadow: 0 0 0 var(--texto); }

/* EL SELECTOR DE PASOS del menú (hoy, el reloj por turno): flecha, valor,
   flecha. Es el mismo gesto que el selector de tema de la portada, y va así
   —y no con una casilla de escribir— porque los topes son parte de la regla:
   lo que no se puede elegir no se puede teclear. */
.campo .paso-selector {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 6px;
}
.campo .paso-selector .flecha {
  flex: 0 0 auto;
  min-width: 26px;
  padding: 6px 6px;
  font: inherit;
  font-size: 14px;
  line-height: 1;
  color: var(--texto);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--panel-borde);
  border-radius: 7px;
  cursor: pointer;
}
.campo .paso-selector .flecha:hover:not(:disabled) { background: rgba(255, 255, 255, 0.16); }
.campo .paso-selector .flecha:disabled { opacity: 0.3; cursor: default; }
.campo .paso-valor {
  flex: 1 1 auto;
  text-align: center;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* El desplegable desplegado lo pinta el sistema: hay que darle color explícito
   o sale blanco con letra gris (ilegible sobre el tema oscuro). */
select, option, optgroup {
  color-scheme: dark;
  background-color: #16261b;
  color: var(--texto);
}
option:checked, option:hover { background-color: #24422c; }

.titulo-grupo { font-size: 12px; color: var(--tenue); margin-bottom: 8px; line-height: 1.4; }

/* Los dos rótulos de "En línea". Van centrados y con el mismo cuerpo que los
   campos del formulario: no son letra pequeña de un ajuste, sino los títulos de
   las dos mitades del menú. */
.rotulo-online { font-size: 14px; text-align: center; }

/* Y la raya parte esas dos mitades —entrar en la sala de otro y montar la
   tuya—, para que el formulario de abajo no parezca la continuación del código
   de sala de arriba. */
.separador-o {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* Lista de aventureros del menú: foto + nombre + herramientas */
.jugadores-lista { margin: 16px 0; }
.jugador-fila {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 9px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 11px;
}
.jugador-fila .foto {
  position: relative;
  flex: 0 0 auto;
  width: 56px; height: 56px;
  padding: 0;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  /* Sin `border-color`: lo pone la fila con el color del aventurero. En la
     pantalla de entrar por enlace, donde todavía no hay color, va el del panel. */
  border: 2px solid var(--panel-borde);
  overflow: hidden;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.jugador-fila .foto canvas {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
}
/* LA GALERÍA DE CARAS, igual que la paleta de color y por el mismo motivo: se
   pulsa lo que se quiere cambiar —la propia cara— y se despliega debajo lo que
   hay para elegir. Antes esto era un `<input type="file">`, y con él se colaba
   en la mesa de todos cualquier imagen, de cualquier tamaño y de cualquier
   asunto; ahora sólo se puede elegir entre las ocho que trae el tema. */
.selector-retrato { position: relative; flex: 0 0 auto; }
.selector-retrato .galeria {
  position: absolute;
  top: calc(100% + 6px);
  left: -6px;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(4, 56px);
  gap: 6px;
  padding: 8px;
  background: #16261b;
  border: 1px solid var(--panel-borde);
  border-radius: 11px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
}
.selector-retrato .cara {
  width: 56px; height: 56px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  overflow: hidden;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.3);
}
.selector-retrato .cara img { display: block; width: 100%; height: 100%; object-fit: cover; }
.selector-retrato .cara:hover { border-color: var(--verde); }
/* La que ya lleva otro, apagada y sin pulsar, igual que el color ocupado. */
.selector-retrato .cara.ocupado { opacity: 0.3; cursor: not-allowed; }
.selector-retrato .cara.ocupado:hover { border-color: transparent; }
.jugador-datos { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; min-width: 0; }

/* LA FILA DE UN BOT. Es una fila como las demás —un bot sale de un campamento y
   lleva su color en el tablero igual que una persona— y lo único que le falta
   es el nombre que teclear: se llama como su personaje. La chapa está para no
   tener que contar filas para saber quién es quién. */
.jugador-fila.bot { background: rgba(255, 255, 255, 0.03); }
.jugador-fila .nombre-bot {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 7px 9px;
  font-size: 14px;
  font-weight: 600;
  color: var(--tenue);
  background: rgba(0, 0, 0, 0.2);
  border: 1px dashed;
  border-radius: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jugador-fila .nombre-bot b {
  flex: 0 0 auto;
  padding: 1px 5px;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: #0b140e;
  background: var(--tenue);
  border-radius: 5px;
}
.jugador-datos input.nombre {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--texto);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid;
  border-radius: 8px;
  padding: 7px 9px;
  width: 100%;
}
/* Las cuatro columnas de la lista de aventureros —foto, nombre, color y
   campamento— y su cabecera comparten rejilla: es lo que hace que cada leyenda
   caiga centrada justo encima de lo suyo. El nombre se lleva todo el sitio que
   sobra, que es el dato que hay que poder leer. */
.jugadores-lista .cabecera-aventureros,
.jugadores-lista .jugador-fila {
  display: grid;
  /* La última columna es de 38px porque ya no lleva un desplegable sino el
     mismo botón de 30px que el color: la flecha del desplegable pedía 62px
     para enseñar un número de una cifra. Esos 24px se los queda el nombre,
     que en el móvil era lo único que iba justo. */
  grid-template-columns: 56px minmax(0, 1fr) 44px 38px;
  gap: 10px;
  align-items: center;
}
.cabecera-aventureros {
  font-size: 11px;
  color: var(--tenue);
  margin-bottom: 6px;
  padding: 0 8px;
  text-align: center;
}
.cabecera-aventureros span { min-width: 0; }

/* EL CAMPAMENTO (o el equipo) SE ELIGE COMO EL COLOR Y COMO LA CARA: se pulsa
   el número que llevas y debajo se despliega la cuadrícula con los que hay.
   Vale igual para el menú y para la pantalla de sala.

   Era un desplegable, y el problema no era el desplegable sino su flecha: para
   enseñar un número de una cifra pedía 62px de columna, y en el móvil esos
   píxeles le hacían falta al nombre del aventurero, que es lo único de la fila
   que de verdad hay que leer. Un número de 30x30 dice lo mismo en la mitad.

   La cuadrícula es de dos columnas y no hace falta más: los cuatro campamentos
   caen DOS Y DOS —que es como se leen de un vistazo— y los dos equipos llenan
   una sola fila sin dejar hueco debajo. */
.selector-numero { position: relative; display: grid; place-items: center; }
.selector-numero .muestra {
  width: 30px;
  height: 30px;
  padding: 0;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: var(--texto);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--panel-borde);
  border-radius: 8px;
  cursor: pointer;
}
.selector-numero .muestra:hover { background: rgba(255, 255, 255, 0.16); }
.selector-numero .rejilla {
  position: absolute;
  top: calc(100% + 6px);
  right: -6px;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(2, 30px);
  gap: 6px;
  padding: 8px;
  background: #16261b;
  border: 1px solid var(--panel-borde);
  border-radius: 11px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
}
.selector-numero .numero {
  width: 30px;
  height: 30px;
  padding: 0;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: var(--texto);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--panel-borde);
  border-radius: 7px;
  cursor: pointer;
}
.selector-numero .numero:hover { background: rgba(255, 255, 255, 0.2); }

/* CADA CAMPAMENTO VA DEL COLOR DE QUIEN LO LLEVA, y `--dueno` lo trae puesto
   desde el HTML. Si eres el rojo y ves el 2 en rojo, ése es el tuyo: no hay que
   leer nada más, y es el mismo código de colores con el que vas a mirar el
   tablero luego.

   Ninguno se apaga, al revés que en la paleta de color: el campamento es un
   reparto y pedir el de otro os lo intercambia. El borde de color dice con
   quién estás cambiando ANTES de pulsar.

   *(El que llevas puesto salía antes en verde, el verde de "elegido" que usa
   todo el menú. En una mesa con jugador verde eso eran dos verdes distintos
   diciendo cosas distintas en la misma cuadrícula.)* */
.selector-numero .numero.ocupado {
  border-color: var(--dueno);
  border-width: 2px;
}
/* Y EL TUYO, ADEMÁS, RELLENO: entre cuatro bordes de color hay que poder
   señalar el propio de un vistazo. El número va oscuro porque los colores de
   los aventureros son vivos — el mismo apaño que la muestra ocupada de la
   paleta. */
.selector-numero .numero.mio {
  background: var(--dueno);
  color: #0b140e;
}
.selector-numero .numero.mio:hover { background: var(--dueno); filter: brightness(1.15); }

/* El botón cerrado lleva tu color en el borde, que es de quien es el número. */
.selector-numero .muestra { border-width: 2px; }

/* EL EQUIPO SÍ VA EN VERDE, el verde de "esto es lo que está elegido" que usa
   todo el menú. Aquí no choca con nada: un equipo es un 1 o un 2, no es de
   nadie, y no hay ningún color de aventurero con el que confundirlo. */
.selector-numero .numero.puesto {
  border-color: var(--verde);
  background: rgba(124, 228, 154, 0.22);
}

/* El color se elige por el cuadradito y ya está. Un desplegable normal obliga a
   escribir el nombre de cada color, y ese nombre se comía el ancho del nombre
   del aventurero sin decir nada que el propio color no diga mejor. */
.selector-color { position: relative; display: grid; place-items: center; }
.selector-color .muestra {
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.35);
}
/* El color que ya lleva otro sale tachado y no se deja pulsar: dos aventureros
   del mismo color no se distinguen en el tablero, que es donde importa. */
.selector-color .muestra.ocupado {
  position: relative;
  opacity: 0.45;
  cursor: not-allowed;
}
.selector-color .muestra.ocupado::after {
  content: "✕";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 17px;
  font-weight: 700;
  color: #0b140e;
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.65);
}
.selector-color .paleta {
  position: absolute;
  top: calc(100% + 6px);
  right: -6px;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(4, 30px);
  gap: 6px;
  padding: 8px;
  background: #16261b;
  border: 1px solid var(--panel-borde);
  border-radius: 11px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.5);
}

.jugador-datos select {
  font: inherit;
  font-size: 13px;
  color: var(--texto);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--panel-borde);
  border-radius: 8px;
  padding: 6px 8px;
  width: 100%;
}

/* Resumen de una partida guardada: los ajustes con los que se jugó, para poder
   reconocerla antes de entrar. Es de LECTURA — ninguno de estos datos se puede
   cambiar, así que no van en campos de formulario. */
.resumen-partida { margin-bottom: 12px; }
.resumen-partida .dato {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 8px;
  font-size: 13px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.resumen-partida .dato span { color: var(--tenue); }
.resumen-partida .dato strong { text-align: right; font-weight: 600; }

.resumen-jugadores { margin-bottom: 8px; }
.dato-jugador {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  margin-bottom: 6px;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 9px;
}
.punto-color {
  flex: 0 0 auto;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.dato-nombre { flex: 1 1 auto; font-weight: 600; min-width: 0; }
.dato-estado { color: var(--tenue); font-size: 12px; text-align: right; }

/* --- Pantalla de salas (partida por internet) ------------------------------
   Reaprovecha el panel del menú; sólo hace falta la lista de quién ha llegado
   y el código de la sala, que es lo que la gente se dicta por teléfono. */

.codigo-sala {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: 3px;
  color: var(--ambar);
}

.sala-lista { margin-bottom: 12px; }

/* El enlace de la sala se lee entero: la leyenda va encima y el campo ocupa el
   ancho del panel, con el botón de copiar reducido a su icono al lado. Con la
   leyenda a la izquierda (como los campos del menú) la dirección salía cortada,
   que es justo lo que no puede pasar con lo único que hay que repartir. */
.fila-enlace { display: flex; gap: 8px; align-items: stretch; margin-bottom: 10px; }
.fila-enlace input {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: 13px;
  color: var(--texto);
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--panel-borde);
  border-radius: 9px;
  padding: 9px 10px;
}
button.mini.icono { font-size: 17px; line-height: 1; padding: 8px 11px; }
button.mini.icono.hecho { border-color: var(--verde); background: rgba(124, 228, 154, 0.2); }

.sala-fila {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid transparent;
  border-radius: 11px;
}
/* Quien ya ha dicho "listo" se ve de un vistazo: es lo único que hay que mirar
   en esta pantalla mientras se espera. */
.sala-fila.listo { border-color: var(--verde); background: rgba(120, 220, 150, 0.12); }
.sala-fila.vacia { opacity: 0.5; justify-content: center; padding: 14px 8px; }

/* El aro lleva el color del aventurero: es como se le va a ver en el tablero,
   así que un choque de colores se detecta aquí, antes de empezar. */
.sala-foto {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 2px solid var(--panel-borde);
  background: rgba(0, 0, 0, 0.3);
}
/* El campamento de la sala: el mismo botón de 30px del menú (ver
   `.selector-numero`), que aquí también le devuelve sitio al nombre. */
.sala-fila > .selector-numero { flex: 0 0 auto; }
.sala-hueco { font-size: 13px; color: var(--tenue); }
.sala-datos { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.sala-nombre { font-size: 14px; font-weight: 600; }
.sala-estado { font-size: 12px; color: var(--tenue); }

.aviso-error {
  margin: 10px 0;
  padding: 9px 11px;
  font-size: 13px;
  border-radius: 9px;
  color: #ffd9d0;
  background: rgba(255, 110, 80, 0.16);
  border: 1px solid rgba(255, 110, 80, 0.4);
}

.pista { color: var(--tenue); font-size: 12px; line-height: 1.6; margin: 14px 0 0; }

/* Campos que sólo salen cuando hacen falta (el reloj a medida, por ejemplo). */
.oculto { display: none !important; }

.cargar {
  display: block;
  margin-top: 8px;
  padding: 11px;
  text-align: center;
  font-size: 13px;
  color: var(--texto);
  background: rgba(255, 255, 255, 0.07);
  border: 1px dashed var(--panel-borde);
  border-radius: 9px;
  cursor: pointer;
}
.cargar:hover { background: rgba(255, 255, 255, 0.13); }

/* La lista de tutoriales: botones altos, de tres renglones, porque hay que
   elegir leyendo y no adivinando qué hay dentro de cada uno. */
.lista-tutoriales { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
button.tutorial {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  text-align: left;
  padding: 12px 14px;
  white-space: normal;
}
button.tutorial .tutorial-titulo { font-weight: 700; font-size: 14px; }
button.tutorial .tutorial-resumen { font-size: 12px; color: var(--tenue); line-height: 1.4; }
button.tutorial .tutorial-datos { font-size: 11px; color: var(--tenue); opacity: 0.75; }

/* ------------------------------------------------------ Portada del menú -- */

/* El título FUERA del recuadro y las banderas debajo, también fuera: el
   recuadro es la lista de sitios a los que se puede ir, y nada más. Así el
   fondo se puede cambiar por una imagen sin tocar nada de esto. */
.portada {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: min(420px, 100%);
  margin: 0 auto;
}
.portada .titulo-juego { margin: 0; text-align: center; }
.portada .panel-menu { width: 100%; margin: 0; }
/* DOS COLUMNAS, y en el móvil también: son botones cortos y en una sola columna
   la lista se iba fuera de la pantalla, que es lo que obligaba a bajar para ver
   el final del menú. El emparejado lo decide el orden de `OPCIONES` en app.js;
   `.ancho` es para lo que va solo en su fila. */
.opciones-portada {
  display: grid;
  /* `minmax(0, ...)` y no `1fr` a secas: un hijo de rejilla trae `min-width:
     auto`, así que un texto largo —una traducción futura, un tema con nombres
     largos— ensancharía su columna en vez de recortarse. Hoy no sobra ancho ni
     falta: a 390px la portada mide 358 y cada botón 159. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}
.opciones-portada > * { min-width: 0; }
.opcion-menu.ancho { grid-column: 1 / -1; }
/* El código de sala y el tema no son opciones: ocupan la fila entera. */
.opciones-portada .entrar-rapido,
.opciones-portada .tema-selector { grid-column: 1 / -1; }
.portada .idiomas { justify-content: center; margin: 0; }

/* La versión, al pie y sin llamar la atención: se busca cuando hace falta y el
   resto del tiempo no estorba.

   PERO VA SOBRE LA FOTO, no dentro del recuadro, así que no puede ir en
   `--tenue` y apagada como el texto secundario de un panel: sobre una playa o
   un claro de sol desaparecía. Lleva el color de texto normal —bajado sólo un
   poco— y una sombra oscura que la despega de cualquier fondo, que es lo mismo
   que hacen los rótulos que van encima del mapa. */
.pie-version {
  margin: 0;
  text-align: center;
  font-size: 12px;
  color: var(--texto);
  opacity: 0.9;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9), 0 0 12px rgba(0, 0, 0, 0.7);
}

.opcion-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 12px;
  font-size: 16px;
  font-weight: 700;
}
/* Lo que todavía no existe se ve, pero se ve apagado y lo dice. Un menú también
   es el mapa de lo que va a haber. */
.opcion-menu.pendiente { opacity: 0.5; cursor: default; }
.opcion-menu .pronto {
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.8;
}

/* Entrar en la sala de otro sin pasar por "En línea": es lo que más prisa
   corre —te están esperando— así que va aquí, pequeño pero a un toque. */
.entrar-rapido { display: flex; gap: 6px; margin-top: 6px; }
/* El código va centrado, en negrita y con más letra: son cinco caracteres que
   se teclean mirando el móvil de otro o al dictado por teléfono, así que
   conviene leerlos de un vistazo mientras se escriben. (El campo del submenú
   "En línea" se queda como los demás: allí está dentro de un formulario y
   alinearlo distinto lo descolocaría.) */
.entrar-rapido input {
  flex: 1 1 auto;
  min-width: 0;
  text-transform: uppercase;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.12em;
}
/* En verde para que destaque: entrar en la sala de alguien es lo que más prisa
   corre de todo el menú. Y con el ancho suelto — los botones verdes llevan
   `width: 100%` de serie, que dentro de un flex se come la fila entera. */
.entrar-rapido .principal { flex: 0 0 auto; width: auto; margin-top: 0; }

/* El título de la pantalla en la que estás, arriba y centrado: dice dónde
   estás, que es lo único que hacía falta al quitar las pestañas.

   EL `line-height: 1` NO ES UN ADORNO: es lo que iguala el aire de arriba con
   el de abajo. El recuadro tiene el mismo padding por los cuatro lados, pero
   abajo termina en un botón —cuya caja acaba justo donde acaba el fondo verde—
   y arriba empieza en un título, cuya caja de línea le añade la mitad del
   interlineado POR ENCIMA de las letras. Con el interlineado normal eso son
   unos 5px de más que se ven perfectamente al comparar las dos puntas. */
.titulo-pantalla { margin: 0 0 14px; font-size: 20px; line-height: 1; text-align: center; }

/* Volver es un botón como los demás y va ABAJO, al final de la pantalla: es lo
   que se hace cuando se ha terminado de mirar, no lo primero que se ofrece. */
.volver-menu { margin-top: 4px; }

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

/* Una sola columna que hace scroll, como las instrucciones y por lo mismo: esto
   se mira en el móvil. Lo que cambia es que aquí NO hay páginas, así que el
   recuadro crece con lo que haya y no se clava a una altura. */
.estadisticas { width: min(620px, 100%); }

.estadisticas h3 {
  margin: 18px 0 8px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tenue);
}
.estadisticas h3:first-of-type { margin-top: 10px; }

/* LOS CUATRO CORTES SON UNA FILA DE CUATRO, y no un desplegable: son pocos,
   se comparan entre ellos y se cambia de uno a otro sin parar. Un desplegable
   escondería tres de los cuatro detrás de dos toques. */
.cortes { display: flex; gap: 6px; margin-bottom: 6px; }
.cortes .corte {
  flex: 1;
  padding: 8px 4px;
  font-size: 12px;
  border: 1px solid var(--panel-borde);
  border-radius: 8px;
  background: transparent;
  color: var(--tenue);
  cursor: pointer;
}
.cortes .corte.elegido {
  border-color: var(--verde);
  color: var(--texto);
  font-weight: bold;
}

/* Rejilla que se parte sola: tres columnas en el ordenador y dos en el móvil,
   sin una media consulta por cada bloque. `minmax(0, …)` para que un número
   largo no ensanche la columna y desborde. */
.reparto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr));
  gap: 8px;
}
.dato-stat {
  padding: 10px 8px;
  border: 1px solid var(--panel-borde);
  border-radius: 8px;
  text-align: center;
}
/* EL NÚMERO GRANDE Y EL RÓTULO PEQUEÑO, y no al revés: se viene aquí a ver
   cuántas, y la palabra sólo dice de qué. */
.dato-stat strong { display: block; font-size: 20px; line-height: 1.2; }
.dato-stat span { font-size: 11px; color: var(--tenue); }
/* El porcentaje va pegado al número y en tenue: acompaña, no compite. */
.dato-stat em { font-size: 12px; font-style: normal; color: var(--tenue); }

.tabla-stats { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabla-stats th, .tabla-stats td { padding: 6px 8px; text-align: right; }
.tabla-stats th:first-child, .tabla-stats td:first-child { text-align: left; }
.tabla-stats th { font-size: 11px; color: var(--tenue); font-weight: normal; }
.tabla-stats tbody tr + tr { border-top: 1px solid var(--panel-borde); }

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

/* A pantalla completa y en una sola columna: se piensa para leerlas en el
   móvil, que es donde se van a leer de verdad. */
.instrucciones {
  display: flex;
  flex-direction: column;
  width: min(620px, 100%);
  /* LA VENTANA MIDE LO MISMO EN TODAS LAS PÁGINAS Y NO SE MUEVE NUNCA: el texto
     hace scroll DENTRO de la hoja y los botones se quedan clavados abajo. Se
     leen diez páginas seguidas y el pulgar se acostumbra al sitio; una ventana
     que crece con el texto obliga a bajar a buscar "Siguiente" cada vez.
     En el móvil eso es la pantalla entera; en un monitor grande se corta en
     760, que si no queda un recuadro medio vacío enorme.

     EL ALTO SE MIDE CONTRA LA PANTALLA, NO CONTRA `#menu`. Aquí ponía
     `min(100%, 760px)` y en el móvil no hacía nada: `#menu` es un grid con
     `place-items: center`, así que su fila se ajusta al contenido y ese 100 %
     se mide contra un alto indefinido — el navegador lo descarta, la hoja crece
     con el texto y quien acaba haciendo scroll es la página entera, con los
     botones fuera de la pantalla. En el ordenador no se veía porque el texto
     cabía de sobra. Por eso va en unidades de pantalla, restando el margen de
     `#menu` (arriba y abajo) para no salirse por el canto.

     `dvh` y no `vh` porque son móviles: `vh` cuenta la pantalla CON la barra de
     direcciones retraída, así que al abrir con la barra desplegada la ventana
     se pasaba de alto justo lo que mide la barra — y lo que se comía era el pie
     con los botones. `dvh` es el alto que hay de verdad en cada momento. La
     línea de `vh` de encima es la red para un navegador que no entienda `dvh`:
     se queda algo corta, que es el lado bueno del error. */
  height: min(100vh - var(--menu-margen) * 2, 760px);
  height: min(100dvh - var(--menu-margen) * 2, 760px);
  margin: 0 auto;
  gap: 10px;
}
.barra-instrucciones { flex: 0 0 auto; }
.barra-instrucciones .titulo-pantalla { margin: 0; }
/* El número de página vive abajo, entre las flechas: aquí sobraba. */
.barra-instrucciones .paso { display: none; }

/* La hoja crece hasta llenar lo que quede y hace scroll ella sola, para que los
   botones de pasar página no se muevan de sitio nunca. */
.hoja {
  flex: 1 1 auto;
  /* SIN ESTO NO HAY SCROLL. Un hijo de un flex no encoge por debajo de lo que
     mide su contenido, así que una página larga estiraba la hoja y se llevaba
     los botones fuera de la pantalla en vez de aparecer la barra de scroll. */
  min-height: 0;
  overflow-y: auto;
  /* El scroll se queda DENTRO del recuadro: sin esto, al llegar al final del
     texto el gesto sigue hacia la página de detrás (el "scroll chaining" del
     móvil) y la ventana se despega justo cuando vas a darle a Siguiente. */
  overscroll-behavior: contain;
  background: var(--panel);
  border: 1px solid var(--panel-borde);
  border-radius: 16px;
  padding: 18px;
  line-height: 1.55;
}
.hoja h1 { font-size: 21px; margin: 0 0 12px; }
.hoja h2 { font-size: 17px; margin: 18px 0 8px; }
.hoja h3 { font-size: 15px; margin: 14px 0 6px; color: var(--tenue); }
.hoja p { margin: 0 0 10px; }
.hoja ul { margin: 0 0 12px; padding-left: 20px; }
.hoja li { margin: 0 0 5px; }
.hoja code { background: rgba(255, 255, 255, 0.08); padding: 1px 5px; border-radius: 5px; }
.hoja figure { margin: 14px 0; text-align: center; }
.hoja img { max-width: 100%; vertical-align: middle; }
/* Las imágenes sueltas dentro de una frase son iconos: al alto de la línea. */
.hoja p img, .hoja li img { height: 1.6em; width: auto; }
.hoja figure img { max-height: 200px; }

.pies-instrucciones {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
/* Los dos botones se reparten el ancho a partes iguales.

   OJO CON `width: 100%`: los botones verdes lo llevan de serie (`button.principal`),
   y dentro de un flex eso hace que cada uno PIDA el ancho entero del renglón —
   uno se lo comía todo y el otro se salía de la pantalla. Con `flex: 1 1 0` el
   reparto lo decide el flex, y `width: auto` le quita la petición de encima. */
.pies-instrucciones .principal {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  margin-top: 0;
}
/* El número de página, en medio y sin estirarse: es una etiqueta, no un botón. */
.pies-instrucciones .paginas {
  flex: 0 0 auto;
  padding: 0 4px;
  color: var(--tenue);
  font-size: 13px;
  white-space: nowrap;
}

/* Las banderas del idioma.

   Van arriba del todo del panel y en la barra del juego. Se dibujan con SVG en
   línea (ver `IDIOMAS` en src/idioma.js) porque Windows no pinta las banderas
   emoji: las enseña como dos letras sueltas, que es justo lo que no sirve en un
   botón que hay que reconocer sin leer. */
.idiomas {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
  margin: 0 0 8px;
}
/* Dentro del desplegable de la partida van centradas, como en la portada: ahí
   son una fila más de la lista y alineadas a la derecha quedaban descolgadas. */
.idiomas.en-menu { margin: 0; align-items: center; justify-content: center; }
.bandera {
  width: 30px;
  height: 20px;
  padding: 0;
  border-radius: 3px;
  overflow: hidden;
  opacity: 0.45;
  border: 1px solid var(--panel-borde);
  background: none;
  line-height: 0;
}
.bandera svg { display: block; width: 100%; height: 100%; }
.bandera:hover { opacity: 0.8; }
/* El puesto va a plena luz y con borde claro: de un vistazo se ve en cuál
   estás, que es la única pregunta que responde este control. */
.bandera.activa {
  opacity: 1;
  border-color: var(--texto);
  box-shadow: 0 0 0 1px var(--texto);
}

/* El botón de pantalla completa, que va en la misma fila que las banderas (ver
   `src/pantalla-completa.js`).

   VA UN PUNTO MÁS GRANDE Y MÁS CLARO QUE LAS BANDERAS, y no igual que ellas.
   Son cuatro trazos finos sobre una foto oscura, mientras que una bandera es un
   rectángulo de color macizo: con la misma altura y la misma opacidad que ellas
   el icono desaparecía. Lo que iguala a los dos controles no es el número sino
   verse igual de presentes, que es para lo que están los números.

   En el móvil, más grande todavía: ahí se toca con el dedo, y 24px de alto es
   menos de lo que se acierta sin fallar. */
.pantalla-completa {
  width: 26px;
  height: 24px;
  padding: 0;
  border: none;
  background: none;
  color: var(--texto);
  opacity: 0.72;
  line-height: 0;
}
.pantalla-completa svg { display: block; width: 100%; height: 100%; }
.pantalla-completa:hover { opacity: 1; }
@media (pointer: coarse) {
  .pantalla-completa { width: 32px; height: 30px; }
}

/* Los controles de la música, al lado del de pantalla completa (ver
   `src/musica.js`). El altavoz es el mismo botón que él —mismo tamaño, misma
   opacidad— porque son hermanos y se pulsan igual. */
.musica-silencio {
  width: 26px;
  height: 24px;
  padding: 0;
  border: none;
  background: none;
  color: var(--texto);
  opacity: 0.72;
  line-height: 0;
}
.musica-silencio svg { display: block; width: 100%; height: 100%; }
.musica-silencio:hover { opacity: 1; }

/* LA BARRA DE VOLUMEN VA CORTA A PROPÓSITO.
   Comparte fila con las banderas y con dos botones; larga, empujaba el resto y
   en el móvil partía la fila en dos. Con 64 px se gradúa de sobra, y quien sólo
   quiere silencio tiene el altavoz al lado, que es de un toque. */
.musica-volumen {
  width: 64px;
  height: 20px;
  margin: 0;
  padding: 0;
  accent-color: var(--texto);
  opacity: 0.72;
  cursor: pointer;
}
.musica-volumen:hover { opacity: 1; }

@media (pointer: coarse) {
  .musica-silencio { width: 32px; height: 30px; }
  /* Con el dedo, la barra necesita recorrido para acertar. */
  .musica-volumen { width: 80px; height: 28px; }
}

/* Elección de herramientas, con el mapa ya visible detrás */
.equipar {
  position: fixed;
  inset: auto 0 0 0;
  display: grid;
  place-items: center;
  padding: 16px;
  z-index: 15;
  pointer-events: none;
}
.equipar .panel {
  pointer-events: auto;
  width: min(560px, 100%);
  background: var(--panel-suave);
  border: 1px solid var(--panel-borde);
  border-radius: 16px;
  padding: 18px;
  /* Poco desenfoque a propósito: hay que poder ver a través qué materiales
     tienes cerca del campamento antes de elegir las herramientas (§14). */
  backdrop-filter: blur(2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
/* La ranura de la persiana: pliega el panel para poder mirar el mapa (§14).
   Va DENTRO del recuadro, arriba a la derecha, como el botón de recoger de
   cualquier página — no en la fila de las herramientas, que ésa es la elección. */
.equipar .panel { position: relative; }
.equipar .plegar {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 34px;
  height: 34px;
  padding: 0;
  line-height: 1;
  font-size: 15px;
  border-radius: 10px;
  opacity: 0.75;
}
.equipar .plegar:hover { opacity: 1; }
/* Plegado se queda sólo el nombre y el botón, y el recuadro se encoge a una
   tira: por debajo se ve la isla y se puede arrastrar y hacer zoom, porque el
   velo de fondo ya no atrapa el dedo (`pointer-events` arriba).

   MANTIENE EL ANCHO de cuando está abierto. Encogiéndolo al tamaño del nombre
   quedaba una pastilla diminuta que no parecía el mismo panel, y al desplegarlo
   la pantalla daba un salto. Así es una persiana: baja y sube por el mismo
   hueco. */
.equipar .panel.plegado > :not(h2):not(.plegar) { display: none; }
.equipar .panel.plegado { padding: 8px 52px 8px 14px; }
.equipar .panel.plegado h2 { margin: 0; font-size: 15px; }
.equipar .panel.plegado .plegar { top: 50%; transform: translateY(-50%); }

.equipar h2 { margin: 0 0 6px; font-size: 18px; }
.equipar p { margin: 0 0 14px; font-size: 13px; color: var(--tenue); line-height: 1.5; }
.equipar .opciones { display: flex; gap: 8px; }
.equipar .herramienta {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px;
  text-align: center;
}
.equipar .herramienta canvas { display: block; }
.equipar .herramienta .nombre { font-weight: 700; font-size: 14px; }
.equipar .herramienta .ayuda { font-size: 11px; color: var(--tenue); line-height: 1.35; }
.equipar .herramienta.elegida {
  border-color: var(--verde);
  background: rgba(124, 228, 154, 0.18);
}

@media (max-width: 620px) {
  .equipar .opciones { flex-direction: column; }
  .equipar .herramienta { flex-direction: row; text-align: left; gap: 10px; }
  .equipar .herramienta .ayuda { flex: 1 1 auto; }
}

/* Cargando */
#cargando {
  position: fixed;
  inset: 0;
  display: none;
  place-items: center;
  background: rgba(6, 12, 8, 0.9);
  color: var(--texto);
  font-size: 15px;
  z-index: 20;
}
#cargando.visible { display: grid; }

/* El botón de plegar el inventario sólo hace falta en pantallas estrechas:
   en las anchas la ficha va en la columna lateral y no tapa nada. */
.solo-movil { display: none; }

/* Las opciones de la barra de arriba. En pantalla ancha NO son un menú: caben
   todas y `display: contents` las deja donde estaban, como si esta caja no
   existiera. Sólo en el móvil se convierten en el desplegable de las rayas.
   OJO con el nombre: `.opciones` a secas ya era la rejilla de herramientas del
   panel de equipar, y llamar igual a las dos cosas la descolocaba entera. */
.menu-opciones { display: contents; }

/* Móvil en vertical: la ficha pasa arriba y los botones debajo */
@media (max-width: 720px) {
  .oculto-movil { display: none; }
  .solo-movil { display: inline-flex; }
  #hud-jugador { font-size: 14px; }
  .barra.superior { padding: 6px 8px; gap: 6px; }

  /* La cuenta atrás sale de la barra y se va debajo del nombre: ahí destaca y,
     sobre todo, no obliga a la barra a partirse en dos líneas. */
  #hud-reloj.visible { display: none; }
  #hud-reloj-movil.visible { display: inline-block; }
  button.mini { padding: 6px 7px; font-size: 11px; }
  .campo { flex-direction: column; align-items: stretch; gap: 5px; }
  .campo select, .campo input, .campo .paso-selector { min-width: 0; width: 100%; }

  /* El desplegable de las tres rayas. Va en absoluto y COLGANDO de la barra, no
     dentro: si creciera la barra, el mapa se encogería al abrirlo (`medirHud`
     mide la barra para encuadrar la isla) y daría un salto cada vez. */
  .menu-opciones {
    display: none;
    position: absolute;
    top: 100%;
    right: 8px;
    z-index: 5;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 8px;
    background: var(--panel);
    backdrop-filter: blur(8px);
    border: 1px solid var(--panel-borde);
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
  }
  .menu-opciones.abierto { display: flex; }
  /* Dentro del desplegable los botones son de tocar con el dedo, no de barra. */
  .menu-opciones button.mini { padding: 11px 14px; font-size: 13px; text-align: left; }
  #btn-opciones { font-size: 15px; line-height: 1; padding: 6px 9px; }

  /* La barra de abajo se queda con las acciones y deja ver el mapa a través.
     El inventario, que ocupaba media pantalla, va plegado hasta que se pide
     con el botón "Inventario". */
  .barra.inferior {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    background: var(--panel-suave);
    backdrop-filter: blur(2px);
  }
  .ficha { display: none; width: 100%; }
  #hud.ficha-visible .ficha { display: block; }
  .botones { max-height: 26vh; }
  button.accion { padding: 9px 10px; font-size: 13px; }
}

/* Pantallas bajas: la ficha estorba, se encoge */
@media (max-height: 560px) {
  .ficha { width: clamp(200px, 26vw, 300px); }
}