/* GEV — El misterio del dia · 1.1
   Los colores NO se escriben aqui: se llaman por el nombre que ya tiene la casa
   (--gev-verde, --gev-caja...), que es lo que hace que el modo oscuro funcione
   solo. El valor que va detras de la coma es el respaldo, por si este juego se
   pega alguna vez en una pagina donde el bloque «gev-tema» no llegue.
   🎨 No estrena NI UN color nuevo: usa los ocho que ya usaba la sopa de letras. */

.gev-misterio{
  --gev-misterio-lado:5;
  margin:1.5rem 0;
}

.gev-misterio__tema{
  font-weight:700;
  margin:0 0 .25rem;
  color:var(--gev-titulo,#0F2545);
}

.gev-misterio__fecha{ font-weight:400; color:var(--gev-gris,#647385); }
.gev-misterio__fecha:not(:empty)::before{ content:" · "; }

/* EL CASO: la frase en esperanto va grande, y debajo, en gris y mas pequena,
   lo que quiere decir. En la pagina en esperanto la de debajo no sale. */
.gev-misterio__caso{
  margin:0 0 .25rem;
  font-size:1.1em;
  font-weight:600;
  color:var(--gev-verde-oscuro,#046A38);
}

.gev-misterio__caso-trad{
  margin:0 0 1rem;
  font-size:.9em;
  color:var(--gev-gris,#647385);
}
.gev-misterio__caso-trad:empty{ display:none; }

.gev-misterio__ayuda{
  margin:0 0 1rem;
  font-size:.9em;
  color:var(--gev-gris,#647385);
}

.gev-misterio__caja{
  display:flex;
  flex-wrap:wrap;
  gap:1.25rem;
  align-items:flex-start;
}

.gev-misterio__columna-mapa{ flex:1 1 300px; max-width:min(100%,26rem); }
.gev-misterio__lado{ flex:1 1 280px; min-width:min(100%,17rem); }

/* EL MAPA */
.gev-misterio__mapa{
  display:grid;
  grid-template-columns:repeat(var(--gev-misterio-lado),1fr);
  gap:2px;
  user-select:none;
  -webkit-user-select:none;
}

.gev-misterio__celda{
  position:relative;
  aspect-ratio:1;
  display:flex;
  align-items:center;
  justify-content:center;
  /* En un movil de 375 px la casilla queda en unos 64 px y el dibujo en 26:
     de sobra para tocarlo con el dedo, que la norma pide 24. */
  font-size:clamp(1.3rem,6vw,2rem);
  line-height:1;
  background:var(--gev-caja,#F7F9FA);
  border:1px solid var(--gev-linea,#E1E8ED);
  border-radius:4px;
  cursor:pointer;
}

/* LAS RAYAS QUE SEPARAN HABITACIONES
   Van en la ultima fila y en la ultima columna de cada trozo. Se dibujan con el
   color del titulo, que es el mas oscuro que hay en claro y el mas claro en
   oscuro: se ve en los dos modos sin estrenar ningun color. */
.gev-misterio__celda[data-gev-raya-abajo="1"]{ border-bottom:3px solid var(--gev-titulo,#0F2545); }
.gev-misterio__celda[data-gev-raya-derecha="1"]{ border-right:3px solid var(--gev-titulo,#0F2545); }

/* La casilla en la que esta el teclado.
   Va con «:focus-visible» y no a pelo: asi el recuadro verde sale SOLO cuando
   alguien esta usando el teclado. Puesto siempre, la primera casilla parecia
   elegida nada mas abrir la pagina y despistaba. */
.gev-misterio__celda:focus-visible{
  outline:3px solid var(--gev-verde,#00842B);
  outline-offset:-3px;
}

/* Donde estaba el objeto: ahi no se puede poner a nadie */
.gev-misterio__celda[data-gev-objeto="1"]{
  border-style:dashed;
  border-color:var(--gev-verde,#00842B);
  cursor:default;
}

/* Tachada a mano: una equis floja. De una pista: raya discontinua, para que se
   distinga de las que ha puesto quien juega. */
.gev-misterio__celda[data-gev-tachada="1"]{ color:var(--gev-gris,#647385); }
.gev-misterio__celda[data-gev-tachada="2"]{
  color:var(--gev-verde-oscuro,#046A38);
  border:2px dashed var(--gev-verde,#00842B);
}
.gev-misterio__equis{ font-size:.55em; opacity:.55; }

/* Un personaje colocado por una pista se marca, para que se vea que ese no lo
   pusiste tu: es lo que luego sale en amarillo al compartir. */
.gev-misterio__celda[data-gev-regalo="1"]{
  background:var(--gev-verde-oscuro,#046A38);
}
.gev-misterio__celda[data-gev-regalo="1"] .gev-misterio__quien{
  filter:grayscale(.15);
}

.gev-misterio__quien,.gev-misterio__objeto{ pointer-events:none; }

/* LA LEYENDA DE LAS HABITACIONES
   Es un cuadro de 2x2 con las MISMAS proporciones que el mapa: el ancho y el
   alto de cada trozo se ponen desde el JavaScript, asi que se ve de un vistazo
   que habitacion es cada parte sin pintar el mapa de colores. */
.gev-misterio__titulo-zonas{
  margin:1rem 0 .35rem;
  font-size:1em;
  color:var(--gev-titulo,#0F2545);
}

.gev-misterio__leyenda{
  display:grid;
  gap:2px;
}

.gev-misterio__zona{
  display:block;
  padding:.4rem .5rem;
  background:var(--gev-caja,#F7F9FA);
  border:1px solid var(--gev-linea,#E1E8ED);
  border-radius:4px;
  font-size:.85em;
  line-height:1.3;
}
.gev-misterio__zona b{ display:block; color:var(--gev-titulo,#0F2545); }
.gev-misterio__zona i{ display:block; font-style:normal; color:var(--gev-gris,#647385); }

/* La habitacion de la que desaparecio el objeto va marcada: es donde hay que
   mirar al final. */
.gev-misterio__zona--objeto{
  border:2px dashed var(--gev-verde,#00842B);
}
.gev-misterio__marca-objeto{ font-size:.9em; }

/* El «como se juega» va plegado: las reglas si se leen la primera vez, pero
   «toca un personaje y luego una casilla» estorba delante del mapa a partir de
   la segunda partida. */
.gev-misterio__comojuega{
  margin:0 0 1rem;
  font-size:.9em;
  color:var(--gev-gris,#647385);
}
.gev-misterio__comojuega summary{
  cursor:pointer;
  color:var(--gev-verde-oscuro,#046A38);
}
.gev-misterio__comojuega p{ margin:.4rem 0 0; }

/* LOS PERSONAJES */
.gev-misterio__titulo-lista,.gev-misterio__titulo-pistas{
  margin:0 0 .35rem;
  font-size:1em;
  color:var(--gev-titulo,#0F2545);
}
.gev-misterio__titulo-pistas{ margin-top:1rem; }

.gev-misterio__fichas{
  list-style:none;
  margin:0 0 .5rem;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:.35rem;
}

.gev-misterio__ficha{
  display:flex;
  align-items:center;
  gap:.3rem;
  padding:.35rem .55rem;
  /* 44 px de alto es lo que pide la norma para tocar con el dedo. */
  min-height:44px;
  background:var(--gev-caja,#F7F9FA);
  border:1px solid var(--gev-linea,#E1E8ED);
  border-radius:999px;
  color:var(--gev-titulo,#0F2545);
  font:inherit;
  font-size:.85em;
  cursor:pointer;
}

.gev-misterio__ficha-dibujo{ font-size:1.3em; line-height:1; }

.gev-misterio__ficha[data-gev-elegida="1"]{
  background:var(--gev-verde,#00842B);
  border-color:var(--gev-verde,#00842B);
  color:var(--gev-sobre-verde,#FFFFFF);
}

/* Ya colocado en el mapa: se queda apagado, pero se puede volver a tocar para
   levantarlo. */
.gev-misterio__ficha[data-gev-puesta="1"]{ opacity:.45; }

/* LAS PISTAS — van siempre en esperanto, tambien en valencia y en castellano */
.gev-misterio__pistas{
  margin:0 0 .75rem;
  padding-left:1.4rem;
  line-height:1.5;
}
.gev-misterio__pistas li{ margin-bottom:.2rem; }

/* EL GLOSARIO */
.gev-misterio__glosario{
  margin:0 0 .75rem;
  font-size:.9em;
}
.gev-misterio__glosario summary{
  cursor:pointer;
  color:var(--gev-verde-oscuro,#046A38);
  font-weight:600;
}
.gev-misterio__glosario-pie{
  margin:.4rem 0;
  color:var(--gev-gris,#647385);
}
.gev-misterio__palabras{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:.1rem .6rem;
  margin:0;
}
.gev-misterio__palabras dt{ font-weight:700; color:var(--gev-titulo,#0F2545); }
.gev-misterio__palabras dd{ margin:0; color:var(--gev-gris,#647385); }

/* MARCADOR, RACHA Y AVISOS */
.gev-misterio__marcador{
  margin:0 0 .2rem;
  font-weight:700;
  color:var(--gev-verde-oscuro,#046A38);
}
.gev-misterio__rachas{
  margin:0 0 .75rem;
  font-size:.85em;
  color:var(--gev-gris,#647385);
}
.gev-misterio__aviso{
  margin:.5rem 0;
  min-height:1.2em;
  color:var(--gev-verde-oscuro,#046A38);
}

/* LOS BOTONES */
.gev-misterio__botones{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
  margin:.5rem 0;
}

.gev-misterio__boton{
  min-height:44px;
  padding:.5rem .9rem;
  background:transparent;
  border:1px solid var(--gev-verde,#00842B);
  border-radius:6px;
  color:var(--gev-verde-oscuro,#046A38);
  font:inherit;
  cursor:pointer;
}

.gev-misterio__boton--fuerte{
  background:var(--gev-verde,#00842B);
  border-color:var(--gev-verde,#00842B);
  color:var(--gev-sobre-verde,#FFFFFF);
  font-weight:700;
}

.gev-misterio__boton--flojo{
  border-color:var(--gev-borde,#5B6B82);
  color:var(--gev-gris,#647385);
}

.gev-misterio__boton[aria-pressed="true"]{
  background:var(--gev-verde,#00842B);
  border-color:var(--gev-verde,#00842B);
  color:var(--gev-sobre-verde,#FFFFFF);
}

/* Mientras se esta tachando, el mapa avisa de que no coloca a nadie. */
.gev-misterio[data-gev-tachando="1"] .gev-misterio__celda{ cursor:crosshair; }

.gev-misterio__archivo{
  margin:.75rem 0 0;
  font-size:.9em;
  color:var(--gev-gris,#647385);
}
.gev-misterio__archivo label{ display:block; margin-bottom:.2rem; }
.gev-misterio__dias{
  min-height:44px;
  padding:.35rem .5rem;
  border:1px solid var(--gev-borde,#5B6B82);
  border-radius:6px;
  background:var(--gev-caja,#F7F9FA);
  color:var(--gev-titulo,#0F2545);
  font:inherit;
}

.gev-misterio__parapegar{
  margin:.5rem 0;
  padding:.5rem;
  border:1px solid var(--gev-linea,#E1E8ED);
  border-radius:4px;
  background:var(--gev-caja,#F7F9FA);
  white-space:pre-wrap;
  font-size:.9em;
  color:var(--gev-titulo,#0F2545);
}