/* ===========================================================================
   EL ACTA DE LA NOCHE, dibujada sobre su tablero.

   TODO VA EN PORCENTAJES Y EN `cqw`. La lámina de fondo trae los marcos
   dibujados —el panel de la izquierda, el retrato de la casa, la repisa con los
   cachivaches— y el texto tiene que caer DENTRO de esos marcos en cualquier
   pantalla. En píxeles cuadraría en una y en ninguna más.

   `cqw` es «uno por ciento del ancho del tablero», así que la letra encoge y
   crece con la lámina igual que los marcos. Sin eso, en un portátil el texto
   se sale de las cajas y en un monitor grande queda perdido en un rincón.
   =========================================================================== */

.acta {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  background: #05040a;
  padding: 1.4vmin;
}
.acta[hidden] { display: none; }

/* EL TABLERO. Se estira todo lo que pueda sin deformarse: la lámina tiene sus
   proporciones y estirarla partiría los marcos. */
.acta-tablero {
  position: relative;
  aspect-ratio: 1492 / 1054;
  /* Lo más ancho que quepa sin que se salga por arriba: el alto disponible por
     su proporción. `aspect-ratio` sola no basta —con el ancho al cien por cien
     no hay manera de que respete un máximo de alto. */
  width: min(100%, calc((100vh - 3vmin) * 1492 / 1054));
  container-type: inline-size;
  background: url('../assets/art/acta.jpg') center / 100% 100% no-repeat;
  image-rendering: pixelated;
  font-family: var(--face-pixel);
  color: #cdd6ef;
  animation: acta-entra 420ms ease-out both;
}
@keyframes acta-entra {
  from { opacity: 0; transform: scale(.97); }
  to { opacity: 1; transform: none; }
}

/* Un hueco: una caja colocada encima de su marco de la lámina. El relleno de
   dentro va en `cqw` por lo mismo que la letra. */
.acta-hueco {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: .5cqw;
  padding: 1.1cqw 1.3cqw;
  overflow: hidden;
}

/* --- Los rótulos de cada marco ------------------------------------------- */
.acta-rotulo {
  display: flex;
  align-items: center;
  gap: .6cqw;
  margin: 0 0 .3cqw;
  font-size: 1.35cqw;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #7fa8ff;
}
.acta-rotulo-i { font-size: 1.5cqw; color: #b98cff; }

/* --- La barra de arriba ---------------------------------------------------- */
.acta-volver, .acta-titulo, .acta-dinero, .acta-boton {
  align-items: center;
  justify-content: center;
  padding: 0;
}
.acta-volver-b, .acta-boton-b {
  width: 100%;
  height: 100%;
  border: 0;
  background: none;
  color: #c9b6ff;
  font-family: inherit;
  font-size: 1.3cqw;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 140ms ease, text-shadow 140ms ease;
}
.acta-volver-b:hover, .acta-boton-b:hover {
  color: #fff;
  text-shadow: 0 0 1.2cqw rgba(185, 140, 255, .9);
}
/* La flecha ya está dibujada en la lámina, así que el texto se aparta de ella —
   y va en dos renglones, que el marco es estrecho y de una línea se sube encima
   de la casita del dibujo. */
.acta-volver-b {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .1cqw;
  padding: 0 .6cqw 0 2.2cqw;
  text-align: left;
  font-size: .98cqw;
  line-height: 1.15;
}

.acta-titulo h2 {
  margin: 0;
  font-size: 2.5cqw;
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #f0eaff;
  text-shadow: 0 .2cqw .8cqw rgba(0, 0, 0, .8);
}
.acta-dinero span {
  font-size: 1.9cqw;
  color: #6ef08a;
  text-shadow: 0 0 1.2cqw rgba(110, 240, 138, .5);
}
.acta-boton-b { font-size: 1.75cqw; color: #d9c8ff; }

/* --- El fantasma ------------------------------------------------------------ */
.acta-ficha { display: flex; gap: 1.1cqw; min-height: 0; }
.acta-cara {
  flex: none;
  width: 7.4cqw;
  height: 7.4cqw;
  display: grid;
  place-items: center;
  border-radius: .6cqw;
  background: rgba(120, 90, 200, .12);
  box-shadow: inset 0 0 0 1px rgba(150, 130, 220, .3);
}
.acta-cara canvas, .acta-cara img { width: 82%; height: auto; image-rendering: pixelated; }
.acta-ficha-texto { min-width: 0; }
.acta-quien {
  margin: 0 0 .4cqw;
  font-size: 1.7cqw;
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
}
.acta-caracter {
  margin: 0 0 .6cqw;
  font-size: 1.12cqw;
  line-height: 1.45;
  color: rgba(190, 200, 230, .78);
}
/* EL VEREDICTO, de color. Es la única línea de la pantalla que cambia de color
   según cómo haya ido, y por eso se lee sin buscarla. */
.acta-veredicto { margin: 0; font-size: 1.15cqw; line-height: 1.4; }
.acta-veredicto.bien { color: #6ef08a; }
.acta-veredicto.mal { color: #b98cff; }

/* --- Listas: objetivos, números y equipo ------------------------------------ */
.acta-lista {
  display: flex;
  flex-direction: column;
  gap: .35cqw;
  min-height: 0;
  overflow: hidden;
}
.acta-obj, .acta-num, .acta-tio {
  display: flex;
  align-items: center;
  gap: .8cqw;
  padding: .42cqw .6cqw;
  border-radius: .45cqw;
  background: rgba(255, 255, 255, .03);
  font-size: 1.2cqw;
}
/* Los objetivos son los tres de siempre MÁS los de propina de la noche, así que
   pueden ser seis: van más apretados que las otras listas para que quepan sin
   que el marco los corte por la mitad. */
.acta-obj { padding: .2cqw .55cqw; font-size: .94cqw; }
.acta-objetivos .acta-lista { gap: .16cqw; }
.acta-objetivos .acta-check { width: 1.5cqw; height: 1.5cqw; font-size: 1cqw; }
.acta-obj-t, .acta-num-t { flex: 1; min-width: 0; }
.acta-obj-p, .acta-num-v { flex: none; font-variant-numeric: tabular-nums; }

.acta-check {
  flex: none;
  width: 1.7cqw;
  height: 1.7cqw;
  display: grid;
  place-items: center;
  border-radius: .3cqw;
  background: rgba(255, 90, 110, .16);
  color: #ff8b9c;
  font-size: 1.15cqw;
}
.acta-obj.hecho .acta-check { background: rgba(110, 240, 138, .16); color: #6ef08a; }
.acta-obj { color: rgba(190, 200, 230, .55); }
.acta-obj.hecho { color: #dfe6ff; }
.acta-obj.hecho .acta-obj-p { color: #6ef08a; }

.acta-num-i { flex: none; width: 1.7cqw; color: #7fa8ff; text-align: center; }
.acta-num-v { color: #fff; }

/* --- El sobre de la paga ----------------------------------------------------- */
.acta-paga { justify-content: center; gap: .1cqw; padding: .7cqw 1.3cqw; }
.acta-paga-lab {
  font-size: 1.1cqw;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #7fa8ff;
}
.acta-paga-cifra {
  font-size: 2.7cqw;
  line-height: 1;
  color: #6ef08a;
  text-shadow: 0 0 1.6cqw rgba(110, 240, 138, .45);
}
.acta-paga-nota { font-size: .95cqw; color: rgba(190, 200, 230, .6); }

/* --- Las pruebas ------------------------------------------------------------- */
.acta-rejilla {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5cqw;
  min-height: 0;
}
.acta-prueba {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3cqw;
  padding: .5cqw .3cqw;
  border-radius: .5cqw;
  text-align: center;
  font-size: .98cqw;
  line-height: 1.25;
  /* LAS QUE SE OS ESCAPARON, apagadas. Salen igual —esa es la gracia— pero en
     gris y a media luz: se ve de un vistazo lo que había y lo que se cogió. */
  color: rgba(170, 180, 210, .4);
  filter: grayscale(1);
  opacity: .5;
}
.acta-prueba.hecha {
  color: #dfe6ff;
  filter: none;
  opacity: 1;
  background: rgba(110, 240, 138, .07);
  box-shadow: inset 0 0 0 1px rgba(110, 240, 138, .22);
}
.acta-prueba-i {
  width: 3.3cqw;
  height: 3.3cqw;
  display: grid;
  place-items: center;
}
.acta-prueba-i .icono-obj--fluido {
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  image-rendering: pixelated;
}
.acta-vacio { margin: 0; font-size: 1.15cqw; color: rgba(190, 200, 230, .55); }

/* --- El equipo ---------------------------------------------------------------- */
.acta-tio-quien { display: flex; flex-direction: column; gap: .1cqw; flex: 1; min-width: 0; }
.acta-tio-quien strong { font-weight: 400; color: #ffd76a; letter-spacing: .05em; }
.acta-tio-cordura { font-size: .95cqw; color: rgba(190, 200, 230, .55); }
.acta-tio-paga { color: #6ef08a; font-variant-numeric: tabular-nums; }
.acta-tio.muerto { opacity: .55; }
.acta-tio.muerto strong { color: #ff8b9c; }
.acta-tio.muerto .acta-tio-paga { color: rgba(190, 200, 230, .5); }

/* --- Pantallas estrechas -------------------------------------------------------
   El tablero es un cuadro apaisado con once huecos: en un móvil de pie no cabe
   de ninguna manera. Se deja que se pueda mirar entero de lado a lado en vez de
   apretar el texto hasta que no se lea. */
@media (max-aspect-ratio: 1/1) {
  .acta { padding: 0; align-items: center; }
  .acta-tablero { width: 100%; }
}