/* Murdoku Duelo — la mesa (sesión 53).
   Estilo «B», el que eligió Remi: color saturado, contorno claro grueso, relieve
   y brillo. Las piezas de interfaz NO están inventadas aquí: los botones, el
   dorso del mazo y la ficha son de Kenney, dominio público (ver dibujos/ui/).
   Los dibujos de dentro sí son nuestros: los suelos, los objetos y los retratos
   del libro.

   La colocación se decide UNA vez y no deja huecos: tres columnas de alto
   completo —tú, el juego y el oponente— y dentro de la del medio, el turno, el
   plano y la fila de abajo (mano · montones · cerrar mi turno). Lo que sobra de
   sitio se lo reparten las columnas de los lados, que se estiran.
   Al encoger hay una escalera de cuatro peldaños, no dos (sesión 55): tres
   columnas, dos columnas con el oponente en tira encima de la mano, todo en
   columna, y pantallas bajas donde manda el plano.
   El movimiento va en assets/duelo.js, con GSAP. */

:root{
  /* el fondo */
  --noche:#0b1128; --noche-2:#1b2559;
  /* los paneles */
  --panel:#3a4a9e; --panel-2:#1a2150; --panel-luz:rgba(255,255,255,.18);
  /* los acentos */
  --oro:#ffd166; --oro-2:#d8a63c; --oro-tinta:#3a2a00;
  --agua:#34d6db; --agua-2:#0e8f93;
  --hoja:#fffdf5;
  --si:#3fd47a; --no:#e0413c;
  /* las familias de carta */
  --salas-1:#3fd07a; --salas-2:#0f5c35;
  --objetos-1:#ffab4f; --objetos-2:#b8400f;
  --lineas-1:#6fb6ff; --lineas-2:#22307f;
  --display:var(--tipo-display); --rotulo:var(--tipo-rotulo); --texto:var(--tipo-texto);
  /* la rejilla, con nombre: las columnas de los lados y el hueco entre ellas.
     La fila de arriba y la de abajo se estiran justo eso, ni un pixel más, que
     es lo que las sacaba de la pantalla (Remi, sesión 57). */
  --lado:15.5rem; --claro:.55rem; --ala:calc(var(--lado) + var(--claro));
  /* Lo que se deja entre una tarjeta de sospechoso y el plano, en px porque lo
     lee duelo.js con parseFloat: el plano saca 8 px de marco fuera de su caja y
     la tarjeta elegida, 6 px de resalte (Remi, sesión 58). */
  --claro-plano:42px;
}

*{ box-sizing:border-box; }
/* LA PULSACIÓN LARGA ES DEL JUEGO, NO DEL NAVEGADOR (sesión 121). En el iPad, mantener el dedo
   sobre una imagen abre el menú de «guardar imagen», y el suelo y las fichas del plano son
   imágenes: Remi no podía colocar a nadie. La partida lo tenía en estilo.css, que el duelo no
   carga; aquí va para todo lo que se toca. */
.tablero .cell, .tablero .cell *, .tarjeta, .suyo-ficha, .cromo, .carta, .monton, #descarte{
  -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }
.duelo img{ -webkit-user-drag:none; }
html, body{ height:100%; }
body{
  margin:0; overflow:hidden;
  font-family:var(--texto); color:#eaf0ff;
  background-color:var(--noche);
  background-image:
    radial-gradient(120% 80% at 50% -10%, rgba(90,169,255,.26), transparent 60%),
    radial-gradient(100% 70% at 50% 115%, rgba(0,0,0,.6), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.022) 0 3px, transparent 3px 6px),
    linear-gradient(180deg, var(--noche-2), var(--noche));
}

/* ===== la página: cabecera arriba y la mesa llena el resto ===== */
/* Desde la sesión 99 el duelo lleva la cabecera de la web (assets/cabecera.css; en el móvil,
   plegada tras el botón ☰). La página sigue sin hacer scroll: el cuerpo mide la pantalla, la
   cabecera se queda con lo suyo y la mesa se reparte lo que queda. */
/* El alto es el que `duelo.js` MIDE con `visualViewport` (sesión 120), no el que dice el
   navegador: en el iPad de Remi `100dvh` daba más alto del que se ve y la mesa se salía por
   abajo —y como aquí no hay scroll, las filas de abajo acababan pintadas unas encima de
   otras—. El `min()` es el cinturón: si el JS no llegara a medir, manda `100dvh`. */
.pagina-duelo{ display:flex; flex-direction:column; overflow:hidden;
               height:min(var(--alto-duelo, 100dvh), 100dvh); min-height:0; }
.pagina-duelo .cabecera{ flex:none; z-index:100; }   /* por encima de todo lo de la mesa: avisos, hojas y menú desplegado */
/* LA MESA MIDE EN PÍXELES (sesión 121): `--alto-mesa`, lo que se ve menos la cabecera, puesto
   por duelo.js. Antes sacaba el alto de ser un trozo de flex («lo que sobre»), y Safari no lo
   toma como medida: repartía las filas de la rejilla por contenido —la del plano con todo,
   las de gente a cero, unas encima de otras— y era lo que Remi veía en su iPad de pie con el
   arreglo de la sesión 120 ya puesto. Sin JS, `auto` y el flex de siempre. */
.pagina-duelo > main.duelo{ flex:1 1 auto; min-height:0; height:var(--alto-mesa, auto); max-height:100%;
  /* La mesa es un CONTENEDOR: los peldaños que dependen del ALTO (pantalla baja: mano más
     corta, tarjetas más bajas…) miran lo que mide la mesa, no la ventana, porque la cabecera
     se queda con 45-60 px. Son las reglas `@container mesa` de más abajo. */
  container:mesa / size; }

/* ===== la rejilla ===== */
.duelo{
  display:grid; height:100%; gap:var(--claro);
  grid-template-columns:var(--lado) minmax(0,1fr) var(--lado);
  grid-template-rows:auto minmax(0,1fr);
  grid-template-areas:"barra barra barra" "gente centro rival";
  padding:.7rem .8rem .8rem; position:relative;
}

/* ===== la barra ===== */
/* La barra, el renglón del turno y la fila de abajo miden lo mismo que el
   bloque y van centradas: el juego es UNA pieza, no cuatro cosas sueltas
   pegadas a los bordes de la pantalla (Remi, sesión 58). En ancho de sobra
   `min-width:min-content` manda: antes se rompe el bloque que se parte una
   fila. `nowrap` mantiene la altura fija, que si no la cuenta del plano se
   muerde la cola. */
/* El tope es la pantalla, no la columna en la que viven: el bloque es a
   propósito más ancho que la columna del medio, que es lo que lo pega a las
   tarjetas. Y se centra a mano —`auto` no sabe centrar lo que se sale—, así que
   sigue cayendo justo encima del plano. */
.barra, .marcadores, .pie{
  --w:min(var(--bloque,100%), calc(100vw - 1.6rem));
  width:var(--w); margin-inline:calc((100% - var(--w)) / 2);
}
/* la fila de abajo nunca por debajo de lo que necesitan tres cartas, los dos
   montones y el botón: si el plano se queda pequeño, ella no */
/* La fila de abajo mide lo que el bloque en cuanto duelo.js lo ha medido; los 65rem son solo
   para antes de medir. Con un suelo de 65rem se salía 11 px del bloque en una mesa baja
   (sesión 99). */
.pie{ --w:min(var(--bloque, 65rem), calc(100vw - 1.6rem)); }
.barra{ grid-area:barra; display:flex; align-items:center; justify-content:space-between;
        gap:.5rem .9rem; flex-wrap:nowrap; }
.datos{ display:flex; flex-wrap:wrap; gap:.2rem .55rem; align-items:baseline; margin:0;
        font-family:var(--rotulo); font-size:.95rem; color:#b9c8f5; }
.datos b{ font-family:var(--display); color:#fff; }
/* Lo que se oye pero no se ve: está en la página y lo lee un lector de pantalla,
   pero no ocupa ni un píxel. Nada de `display:none`, que eso sí lo borra para
   todo el mundo. */
.solo-voz{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
/* sin el renglón de datos, la barra es solo los botones: a la derecha, como estaban */
.barra{ justify-content:flex-end; }
.mandos-barra{ display:flex; gap:.35rem; align-items:center; flex-wrap:wrap; }

/* los botones son imágenes de Kenney estiradas por los bordes (nueve trozos):
   así el relieve no se deforma por mucho que crezca el botón */
.chapa{
  font-family:var(--display); font-size:.92rem; letter-spacing:.02em; cursor:pointer;
  color:var(--oro-tinta); background:none; border:14px solid transparent; border-radius:0;
  border-image:url("/dibujos/ui/boton-yellow.png") 20 fill / 14px / 0 stretch;
  padding:0 .3rem; min-height:2.5rem; line-height:1;
}
.chapa{ transition:transform .1s ease, filter .1s ease; }
.chapa:active{ transform:translateY(2px); }

/* ===== las cartas de jugador (cromos) =====
   Cada jugador es un cromo: retrato enmarcado, nombre, título y estrellas. El
   marco lo pone el número de estrellas, así que al oponente se le ve de lejos
   lo que aprieta (sesión 55). Los marcos son de Kenney, como los botones. */
.cromo{
  flex:none; display:flex; flex-direction:column; align-items:center; gap:.1rem;
  padding:.5rem .5rem .45rem; margin:0 0 .5rem; border-radius:.9rem; text-align:center;
  background:linear-gradient(160deg,var(--panel),var(--panel-2));
  box-shadow:0 0 0 3px rgba(0,0,0,.55), inset 0 0 0 2px var(--panel-luz), 0 8px 16px -10px #000;
}
/* La tarjeta del jugador. Ya no es un marco cuadrado de nueve trozos: es un
   dibujo entero, vertical, con un hueco transparente por el que se ve el
   personaje (sesión 70). Se pinta en tres capas:
     1. el personaje recortado al hueco, DEBAJO de la tarjeta;
     2. la tarjeta;
     3. el personaje otra vez, ENCIMA, recortado a todo lo que no es el hueco.
   Así lo que se sale del hueco —el sombrero, la lupa, los tentáculos— pisa la
   tarjeta y la carta se ve viva. El recorte de la tercera capa deja salir
   ARRIBA de lado a lado y por la IZQUIERDA hasta el suelo del hueco, y corta
   por la derecha y por abajo: solo hacia un lado, que probándolo es lo que
   quedaba bien (Remi, sesión 70).
   Las medidas del hueco (--hl, --ht, --hw, --hh) y la proporción (--prop) las
   pone el JS desde TARJETAS, porque cada una de las tres tiene la suya. Las del
   personaje (--w, --l, --b), desde AVATARES.
   El tamaño lo manda --alto-cromo, y de ahí sale el ancho. */
.cromo{ overflow:visible; }
.cromo .marco{
  --alto-cromo:8.2rem;
  position:relative; display:block; flex:none;
  height:var(--alto-cromo); width:calc(var(--alto-cromo) * var(--prop, .78));
  margin:0 0 .25rem;
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.35));
}
.cromo .marco .carton{ position:absolute; inset:0; width:100%; height:100%; }
.cromo .marco .hueco{ position:absolute; left:var(--hl); top:var(--ht);
                      width:var(--hw); height:var(--hh); }
.cromo .marco > .hueco{ overflow:hidden; }
.cromo .marco .hueco img{ position:absolute; left:var(--l,0%); bottom:var(--b,0%);
                          width:var(--w,100%); height:auto; }
/* El recorte se sale de la caja de la tarjeta a propósito: por ahí es por donde
   asoma el sombrero y lo que lleva en la mano. Por la derecha corta en el borde
   del hueco y por abajo en su suelo. */
/* La chapa de abajo de la tarjeta lleva escrito el nombre del personaje (Remi,
   sesión 70), en TODAS las cartas y no solo en la de «Tu personaje» (Remi,
   sesión 84: «¿por qué sigo sin ver el nombre en la chapa?»). Cae en el centro
   de la banda de abajo, que en las tres tarjetas está en el mismo sitio.
   Donde la carta se encoge —pantalla estrecha o baja— se quita más abajo: la
   chapa mide entonces cuatro píxeles de alto y el nombre sería una mancha. El
   nombre de verdad, el que se lee, está debajo de la carta en todas. */
.cromo .marco .nombre-chapa{
  display:flex; align-items:center; justify-content:center;
  position:absolute; left:0; right:0; top:var(--hb); bottom:0; pointer-events:none;
  font-family:var(--display); font-size:calc(var(--alto-cromo) * .046); line-height:1;
  letter-spacing:.02em; color:var(--tinta,#3a2f1c); max-width:100%; padding:0 31%;
  white-space:nowrap; overflow:hidden;
}
.cromo .marco .nombre-chapa > *{ min-width:0; }
.cromo .marco .fuera{ position:absolute; inset:0; pointer-events:none;
  clip-path:polygon(-60% -45%, 160% -45%, 160% var(--ht), var(--hr) var(--ht),
                    var(--hr) var(--hb), -60% var(--hb));
}
.cromo .datos-cromo{ display:flex; flex-direction:column; align-items:center; gap:.02rem;
                     min-width:0; }
.cromo .nombre{ font-family:var(--display); font-size:1.05rem; line-height:1.1; color:#fff;
                text-shadow:0 2px 0 rgba(0,0,0,.45); }
.cromo .titulo-jug{ font-family:var(--rotulo); font-size:.86rem; letter-spacing:.04em;
                    line-height:1.2; color:var(--oro); }
.estrellas{ display:flex; gap:.14rem; margin-top:.2rem; }
.estrellas i{ width:1rem; height:1rem; background:rgba(255,255,255,.2);
  box-shadow:none; flex:none;
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
.estrellas i.on{ background:linear-gradient(180deg,#fff3c4,var(--oro-2)); }
.estrellas.chica{ margin:.1rem 0 .15rem; }
.estrellas.chica i{ width:.72rem; height:.72rem; }

/* ===== los sospechosos (columna izquierda, de alto completo) ===== */
.gente{ grid-area:gente; display:flex; flex-direction:column; min-height:0;
        position:relative; z-index:2;        /* se arriman al plano: mandan sobre el hueco */
        align-items:flex-end;                /* pegados al plano */
        margin:var(--sobre-plano, 0px) calc(var(--hueco-plano, 0px) * -1) var(--bajo-plano, 0px) 0; }
/* Tu carta y, a su izquierda, tu hoja de servicios (sesión 92). La hoja ocupa
   el hueco que quedaba —y solo ese—: se encoge con la pantalla y cuando ya no
   le caben dos chapitas en fila, desaparece. La carta no se mueve ni un píxel
   por ella. */
.cabeza-jug{ display:flex; align-items:flex-start; justify-content:flex-end;
             gap:.5rem; width:100%; min-width:0; }
.hoja-jug{
  /* una sola columna de cuatro chapitas: así la hoja mide lo mismo de alto que
     la carta que tiene al lado y las dos hacen una pieza */
  flex:1 1 auto; min-width:0; max-width:9rem;
  display:grid; grid-template-columns:minmax(0,1fr);
  align-content:stretch; gap:.3rem; padding:.4rem; margin:0 0 .5rem; border-radius:.9rem;
  background:linear-gradient(160deg,var(--panel),var(--panel-2));
  box-shadow:0 0 0 3px rgba(0,0,0,.55), inset 0 0 0 2px var(--panel-luz), 0 8px 16px -10px #000;
}
.hoja-jug .dato{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.02rem; padding:.2rem .35rem .25rem; border-radius:.55rem; min-width:0;
  background:rgba(0,0,0,.22); box-shadow:inset 0 0 0 2px rgba(255,255,255,.12);
}
.hoja-jug .dato b{
  font-family:var(--display); font-size:1.15rem; line-height:1.05; color:#fff;
  text-shadow:0 2px 0 rgba(0,0,0,.45);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
.hoja-jug .dato span{ font-family:var(--rotulo); font-size:.66rem; letter-spacing:.04em;
                      line-height:1.05; color:#bfd0ff; text-align:center; }
.hoja-jug .dato.oro b{ color:var(--oro); }
.hoja-jug .dato.si b{ color:var(--si); }
.hoja-jug .dato.no b{ color:var(--no); }
/* Por debajo de este ancho el hueco ya no existe: la columna se pega al plano y
   la hoja se comería la carta. Y la caja que las junta **desaparece de la
   colocación** (`display:contents`): si se queda, su `width:100%` y su
   `justify-content:flex-end` empujan tu carta a la derecha y aplastan las
   caras de los sospechosos unas contra otras, que es lo que pasaba en el móvil
   (Remi, sesión 95). Sin ella, las reglas de `.gente .cromo` de siempre vuelven
   a mandar. */
@media (max-width:82rem){
  .hoja-jug{ display:none; }
  .cabeza-jug{ display:contents; }
}

/* Cuando hay cinco sospechosos ya no se desliza la columna: las tarjetas se
   encogen hasta caber, que es lo que uno espera de una mesa de juego (Remi,
   sesión 60). El retrato se encoge con ellas y nunca pasa de 3,6 rem. */
/* El hueco de los lados es por el ANILLO de la tarjeta elegida: son 6 px de
   resalte por fuera de la caja y, como la columna se desliza (y deslizarse
   recorta también a lo ancho), la tarjeta iba pegada al borde y el anillo salía
   cortado por la derecha, «como si chocara con algo» (Remi, sesión 92). Se le
   da el hueco y se recupera con el margen, para que las tarjetas sigan
   arrimadas al plano exactamente igual que antes. */
#tarjetas{ display:flex; flex-direction:column; align-items:flex-end; gap:.45rem;
           flex:1 1 auto; min-height:0;
           padding:7px; width:calc(100% + 14px); margin-inline:-7px;
           justify-content:flex-start; justify-content:safe center; overflow-y:auto; }
.tarjeta{
  flex:0 1 auto; width:15rem; max-width:100%; min-height:2.6rem; max-height:6.4rem;
  overflow:hidden; display:flex; gap:.7rem; align-items:center; cursor:pointer;
  padding:.5rem .7rem; border:0; border-radius:.8rem; color:#fff;
  background:linear-gradient(160deg, var(--panel), var(--panel-2));
  box-shadow:0 0 0 3px rgba(0,0,0,.55), inset 0 0 0 2px var(--panel-luz), 0 6px 12px -8px #000;
  transition:transform .16s ease, box-shadow .16s ease, filter .1s ease;
}
.tarjeta:hover{ transform:translateY(-2px); }
.tarjeta.elegida{ box-shadow:0 0 0 3px #fff, 0 0 0 6px var(--oro), 0 0 16px 0 rgba(255,209,102,.5); }
.tarjeta.fijada{ background:linear-gradient(160deg,#2c8f52,#14522f); cursor:default; }
/* En qué va cada sospechoso, dicho en el ANILLO del retrato: blanco si no lo
   has colocado, verde si está puesto en el plano y verde con tic si ya está
   clavado. Va en el anillo y no en una esquina porque la tarjeta recorta por
   las esquinas redondeadas y allí la marca desaparecía (sesión 79). En el móvil
   no hay texto que lo diga y los cinco se veían iguales. */
.tarjeta{ position:relative; }
.tarjeta.puesto .token{ box-shadow:0 0 0 3px var(--si), 0 0 0 5px rgba(0,0,0,.5); }
.tarjeta.fijada .token{ box-shadow:0 0 0 3px var(--oro), 0 0 0 5px rgba(0,0,0,.5); }
/* (nada de tics ni puntos encima del retrato: `.token` recorta lo que se salga
   de su círculo, así que la marca tiene que ser el anillo) */
.tarjeta .token, .suyo-ficha .token{
  height:100%; width:auto; aspect-ratio:1/1; max-height:3.6rem; max-width:none;
  flex:none; font-size:1.4rem; align-self:center;
  box-shadow:0 0 0 3px #fff, 0 0 0 5px rgba(0,0,0,.5);
}
.tarjeta .cuerpo, .suyo-ficha > div{ min-width:0; }
/* La chapita de la letra encima del retrato ya no existe (sesión 82): no se leía
   y tapaba la cara. Quien dice quién es cada uno es su cara y, donde hay nombre,
   su INICIAL marcada con el color del personaje —el mismo del anillo de su
   retrato—. */
.inicial{ display:inline; color:hsl(var(--hue,220) 90% 72%); }
/* La inicial suelta, debajo de la cara (sesión 102): SOLO en el móvil, que es donde no hay
   forma de casar las caras con los nombres de las cartas. En escritorio y en la banda de
   portátil, como estaba (Remi). */
.tarjeta .letra, .suyo-ficha .letra{ display:none; font-family:var(--display); font-size:.9rem; line-height:1;
                                     color:hsl(var(--hue,220) 90% 72%); text-shadow:0 1px 0 rgba(0,0,0,.55);
                                     margin-top:.18rem; }
.tarjeta .quien{ display:block; font-family:var(--display); font-size:1.1rem; line-height:1.15;
                 color:#fff; text-shadow:0 2px 0 rgba(0,0,0,.45); }
.tarjeta .donde{ display:block; font-size:.84rem; line-height:1.2; color:#bfd0ff; }
.tarjeta.fijada .donde{ color:#d6f5df; }

/* ===== el medio: turno, plano y mano ===== */
.centro{ grid-area:centro; display:flex; flex-direction:column; gap:var(--claro); min-height:0;
         min-width:0; align-items:center; }
/* La fila de arriba llega hasta los dos bordes —como la de abajo—, así cada
   contador queda encima de quien es: tus fichas de tu lado y el bote del suyo
   (Remi, sesión 57). El turno va en medio, en una chapa de su tamaño: estirado
   de lado a lado era una barra que se comía la pestaña del plano. */
.marcadores{ display:grid; grid-template-columns:1fr auto 1fr; gap:.5rem;
  align-items:center; margin-bottom:.8rem;   /* aire para la pestaña del plano */ }
#fichas-tengo{ justify-self:start; }
#bolsa{ justify-self:end; }
#turno-fijo{
  position:relative; z-index:66;             /* manda sobre los botones pegados */
  width:min(26rem,100%); min-width:min(18rem,100%); margin:0; text-align:center;
  white-space:nowrap; font-family:var(--display); font-size:1.15rem;
  color:#fff; text-shadow:0 2px 0 rgba(0,0,0,.45); padding:.35em .9em; border-radius:2rem;
  background:linear-gradient(180deg,#4a5cc4,#20276b);
  box-shadow:0 0 0 3px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.35);
}
#turno-fijo.suyo{ background:linear-gradient(180deg,#ff9a3c,#c5451a); }
#turno-fijo.doble{ background:linear-gradient(180deg,var(--oro),#c98f1a); color:var(--oro-tinta);
                   text-shadow:0 1px 0 rgba(255,255,255,.4); }
#turno-fijo.acabado{ background:linear-gradient(180deg,#7b86a8,#3b4360); }

/* LA CAJA DEL PLANO (sesión 120). Mide lo que le dan la fila y la columna en las que cae y
   NO DEPENDE NUNCA DE LO QUE LLEVE DENTRO: `flex:1 1 0`, `min-height:0` y —lo que de verdad
   lo garantiza— LA CARPETA VA FUERA DEL FLUJO (`position:absolute`), así que el plano no
   puede empujarla.
   Sin eso era una pescadilla que se muerde la cola, y Safari no la deshacía: la caja medía
   645 px porque el plano medía 630, y el plano medía 630 porque la caja medía 645. Nadie lo
   bajaba nunca, el centro se quedaba con todo el alto de la mesa y las dos filas de gente se
   aplastaban a CERO —sus caras se pintaban unas encima de otras, fuera de la pantalla— y en
   cada toque el bucle se volvía a disparar: el parpadeo que veía Remi (medido en su iPad,
   sesión 120). Chromium sí la deshacía, por eso aquí no se veía.
   La carpeta, con `inset:0` y `margin:auto`, queda centrada en la caja a lo ancho y a lo alto
   (el plano es cuadrado y la caja casi nunca). */
.caja-plano{ position:relative; flex:1 1 0; width:100%; min-width:0; min-height:0; }
.caja-plano > .expediente{ position:absolute; inset:0; margin:auto;
  /* en su propia capa de pintado: en el iPad de Remi, al elegir una carta parpadeaban las
     líneas de las salas y de las alfombras del plano, que no cambian (sesión 121) */
  will-change:transform; }
/* el plano, montado como una pieza de tablero. Se CIÑE al plano —que lleva su tamaño en
   píxeles— en vez de estirarse: así la carpeta nunca sale más alta que el plano. */
.expediente{
  position:relative; flex:none; width:fit-content; height:fit-content; max-width:100%;
  border-radius:1rem;          /* el relleno va más abajo, con los números del borde */
  background:linear-gradient(165deg,#3a4a9e,#1a2150);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.25), 0 0 0 4px #fff, 0 0 0 8px rgba(0,0,0,.65),
             0 22px 34px -14px #000, 0 0 60px -12px rgba(90,169,255,.4);
}
/* LOS NÚMEROS DEL BORDE (sesión 181): el de cada fila a la izquierda y el de cada columna
   abajo, en el propio marco (arriba los tapaba la pestaña con el nombre del caso). El marco se ensancha por esos dos lados lo que ocupan
   (`--num`) y `cuadrarPlano` lo descuenta al medir, así que el plano encoge lo justo y sigue
   cuadrado. Las dos tiras son una rejilla de `--n` huecos iguales, del mismo ancho que el
   plano: cada número cae enfrente de su línea sin medir nada. */
.expediente{ --marco:.7rem; --num:1.15rem;
  padding:var(--marco) var(--marco) calc(var(--marco) + var(--num)) calc(var(--marco) + var(--num)); }
.expediente .numeros{ position:absolute; display:grid; z-index:2; }
.expediente .numeros.cols{ bottom:.15rem; height:var(--num); left:calc(var(--marco) + var(--num)); right:var(--marco);
  grid-template-columns:repeat(var(--n,7),minmax(0,1fr)); }
.expediente .numeros.filas{ left:.15rem; width:var(--num); top:var(--marco); bottom:calc(var(--marco) + var(--num));
  grid-template-rows:repeat(var(--n,7),minmax(0,1fr)); }
.numeros .num{
  display:flex; align-items:center; justify-content:center; min-width:0; min-height:0;
  margin:0; padding:0; border:0; background:none; cursor:pointer; border-radius:.4rem;
  font-family:var(--rotulo); font-size:.86rem; line-height:1; color:#c9d3ff;
  -webkit-touch-callout:none; -webkit-user-select:none; user-select:none;
}
.numeros .num:hover{ color:#fff; background:rgba(255,255,255,.12); }
.numeros .num:focus-visible{ outline:2px solid var(--oro); outline-offset:-2px; }
/* el número de una línea ya marcada dice cómo está: aspa roja u O verde */
.numeros .num[data-paso="x"]{ color:#fff; background:var(--no); }
.numeros .num[data-paso="o"]{ color:#0b2a17; background:var(--si); }
/* la pestaña con el nombre del caso, por encima del plano: desde que el marco
   del plano va por fuera (sesión 62) le pisaba el nombre (Remi, sesión 64) */
.expediente::before{
  content:attr(data-pestana); position:absolute; top:-.85rem; left:50%; z-index:20;
  translate:calc(-50% + (var(--num) - 0px) / 2) 0;   /* centrada sobre el plano, no sobre el marco */
  font-family:var(--display); font-size:.88rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--oro-tinta); padding:.16rem 1rem .2rem; border-radius:2rem; white-space:nowrap;
  background:linear-gradient(180deg,var(--oro),var(--oro-2));
  box-shadow:0 0 0 3px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.7);
}
/* EL TAMAÑO DEL PLANO LO PONE `duelo.js` EN PÍXELES (sesión 120), midiendo `.caja-plano`.
   Antes salía de una cadena de porcentajes —el tablero el 100 % de la carpeta, la carpeta lo
   que le sobrara a la columna— y eso cada motor lo resuelve a su manera: en el Safari del iPad
   de Remi el plano salió de 7 px, una raya vertical. `aspect-ratio` se queda de red de
   seguridad por si el JS no llegara a medir. */
#tablero{ aspect-ratio:1/1; width:auto; height:auto; margin:auto; }
/* El marco del plano va POR FUERA, no encima de las casillas: es un anillo del
   color del muro pegado al borde del tablero, con las esquinas redondeadas. Antes
   lo dibujaba el contorno de las salas, un trazo centrado en el borde: la mitad
   se comía la casilla y los muebles chocaban con la línea (Remi, sesión 62).
   Ahora el plano es siempre el cuadrado entero, así que ese contorno es justo el
   borde del tablero y lo puede poner el propio tablero. */
.tablero{ border-radius:.55rem; overflow:hidden;
          box-shadow:0 0 0 max(5px, calc(var(--celda,40px) * .17)) #0b1128; }
.tablero .muro-sala path.exterior{ display:none; }

/* ===== la fila de abajo: mano · montones · cerrar mi turno =====
   Los mandos y los montones viven donde se usan, al lado de la mano, y no en la
   columna del oponente, que es donde menos pintaban (Remi, sesión 55).
   La fila mide LO MISMO QUE EL BLOQUE (--bloque, medido en duelo.js): de la
   tarjeta más a la izquierda a la más a la derecha. Tres huecos como los de
   arriba —sospechosos · plano · oponente—, así que la mano cae justo debajo
   del plano y los montones y el botón, debajo del oponente. Nada se va a los
   bordes de la pantalla (Remi, sesión 58). */
.pie{ display:grid; gap:.5rem .6rem; height:15.5rem; flex:none;
      grid-template-columns:minmax(0,calc(var(--lado) + var(--claro-plano)))
                            minmax(0,1fr)
                            minmax(0,calc(var(--lado) + var(--claro-plano)));
      grid-template-rows:minmax(0,1fr) auto; }
#mano{ grid-area:1/2/3/3; display:flex; gap:.6rem; align-items:stretch; justify-content:center;
       min-width:0; height:100%; }
.carta{
  position:relative; flex:0 1 11.6rem; min-width:8.8rem; cursor:pointer;
  display:flex; flex-direction:column; gap:.35rem; padding:.5rem;
  border:0; border-radius:.85rem; color:#fff;
  background:linear-gradient(160deg, var(--c1), var(--c2));
  box-shadow:0 0 0 4px #fff, 0 0 0 7px rgba(0,0,0,.6), 0 14px 20px -10px #000;
  transition:transform .18s cubic-bezier(.2,.9,.3,1.25), box-shadow .18s ease, opacity .28s ease,
             filter .1s ease;
}
.carta.fam-salas{ --c1:var(--salas-1); --c2:var(--salas-2); }
.carta.fam-objetos{ --c1:var(--objetos-1); --c2:var(--objetos-2); }
.carta.fam-lineas{ --c1:var(--lineas-1); --c2:var(--lineas-2); }
.carta .banda{
  flex:none; display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-size:.8rem; letter-spacing:.12em; text-transform:uppercase;
  padding:.22rem 0 .28rem; border-radius:.45rem; background:rgba(0,0,0,.28);
  text-shadow:0 2px 0 rgba(0,0,0,.5);
}
/* la ventana del dibujo: una carta de juego enseña de qué habla antes de leerse */
.carta .ventana{
  flex:1 1 auto; min-height:0; position:relative; overflow:hidden; border-radius:.5rem;
  display:grid; place-items:center; background:rgba(255,255,255,.22);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.45), inset 0 6px 14px rgba(0,0,0,.22);
}
/* El dibujo se mide contra LA VENTANA (`cqw`/`cqh`, sesión 121), no con un porcentaje: la
   ventana saca su alto de una cadena de flex y un `height:72%` ahí unas veces se resolvía y
   otras no (el dibujo salía con su alto de fábrica y se recortaba). Y la rejilla de la carta de
   filas y columnas medía el 74 % del ANCHO: en una ventana más ancha que alta —la mano baja
   del escritorio, la columna de la tablet tumbada— se salía por abajo y la fila marcada no se
   veía. Ahora es el cuadrado más grande que cabe. Los porcentajes se quedan de red por si el
   navegador no supiera de contenedores. */
.carta .ventana{ container-type:size; }
.carta .ventana img{ width:72%; height:72%; width:72cqw; height:72cqh; object-fit:contain;
                     filter:drop-shadow(0 3px 0 rgba(0,0,0,.32)); }
.carta .ventana.suelo{ background-size:cover; background-position:center; }
.carta .ventana .rejilla{ display:grid; gap:1px; width:74%; width:min(74cqw, 82cqh); aspect-ratio:1;
                          background:rgba(0,0,0,.35); border-radius:.2rem; overflow:hidden; }
.carta .ventana .rejilla i{ background:rgba(255,255,255,.8); }
.carta .ventana .rejilla i.marca{ background:var(--oro); }
.carta .ventana .rejilla i.fuera{ background:transparent; }
.carta p{
  flex:none; margin:0; padding:.45rem .5rem .5rem; border-radius:.5rem;
  background:var(--hoja); color:#241d13; font-weight:500; font-size:.88rem; line-height:1.26;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.12);
}
.carta:hover{ transform:translateY(-5px); }
.carta.elegida{
  transform:translateY(-11px) scale(1.03); z-index:5;
  box-shadow:0 0 0 4px #fff, 0 0 0 8px var(--oro), 0 0 28px 4px rgba(255,209,102,.7),
             0 18px 24px -10px #000;
}
.carta.fuera{ opacity:0; transform:translateY(-2.5rem) rotate(-8deg) scale(.9); }
/* mientras la mueve GSAP, sin transiciones: ver `alDescarte` en duelo.js (sesión 121) */
.carta.volando{ transition:none !important; }

/* ===== la pila (columna derecha, de alto completo) ===== */
#bolsa, #fichas-tengo{
  flex:none; white-space:nowrap;
  margin:0; display:flex; align-items:center; justify-content:center; gap:.45em;
  font-family:var(--display); font-size:1.05rem; padding:.32em .8em; border-radius:2rem;
  box-shadow:0 0 0 3px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.28);
}
#bolsa{ color:var(--oro); background:linear-gradient(180deg,#3d3564,#221c40); }
#bolsa::before{ content:""; width:1.5rem; height:1.5rem; flex:none;
                background:url("/dibujos/ui/ficha-hueso.svg") center/contain no-repeat; }
/* Tus fichas: sin la palabra «Tienes» y en la chapa de oro, que es la que canta
   (Remi, sesión 93). Era azul sobre azul y se perdía contra el fondo; ahora es
   el mismo oro de la pestaña del caso y de los botones, así que se lee de un
   vistazo cuánto llevas. */
#fichas-tengo{ color:var(--oro-tinta); font-size:1.05rem;
               background:linear-gradient(180deg,var(--oro),var(--oro-2));
               text-shadow:0 1px 0 rgba(255,255,255,.45); }
#fichas-tengo b{ font-size:1.1em; }
/* El descarte, a la derecha de la mano: adonde van las que sueltas. El mazo se
   quitó en la sesión 71 —era una carta boca abajo con un número y no decidía
   nada—, así que aquí ya solo hay un montón. */
.montones{ grid-area:1/3/2/4; display:flex; gap:.5rem; width:auto; height:100%;
           min-height:0; align-items:flex-end; align-self:end; justify-self:start; }
.monton{
  position:relative; flex:none; width:5.9rem; aspect-ratio:5/7; border:0; border-radius:.6rem; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:.15rem;
  padding-bottom:.45rem; color:#fff; text-align:center; cursor:default;
  box-shadow:0 0 0 3px #fff, 0 0 0 6px rgba(0,0,0,.6), 0 8px 14px -8px #000;
}
/* El descarte va BOCA ARRIBA (Remi, sesión 70): ocupa lo que una carta de la
   mano, porque hay que poder LEERLA —de eso va el cambio— y a 5,9 rem no se
   leía. Solo se ve la de arriba; las de debajo no se guardan a la vista. */
/* La del descarte es una CARTA, con su forma (Remi, sesión 72: «no la pongas
   chata»). Se le da el alto del hueco y el ancho sale de la proporción de las
   de la mano, así que sale la carta más grande que cabe ahí: alrededor del
   80 % de una de la mano. */
#descarte{ width:auto; aspect-ratio:auto; height:100%; min-width:0; min-height:0;
           background:none; box-shadow:none; padding:0; gap:.5rem;
           align-items:flex-start; justify-content:flex-start; overflow:visible; }
/* «Descarte» se lee bien y respira: pegado y en pequeño, la carta parecía una
   más de la mano (Remi, sesión 74) */
#descarte .rotulo{ flex:none; opacity:1; font-size:1rem; letter-spacing:.14em; color:var(--oro); }
/* La carta del descarte lleva MEDIDA FIJA, no una que salga del hueco: así el
   sitio vacío y el sitio con carta miden exactamente lo mismo y están
   exactamente donde mismo (Remi, sesión 73). Cada banda de ancho tiene la suya,
   la más grande que le cabe; la proporción es siempre la de una carta. */
#descarte .carta.boca-arriba{ flex:none; min-width:0; min-height:0; cursor:default;
                              width:8.4rem; height:11.2rem; }
/* El hueco vacío es la MISMA carta con las mismas piezas dentro, en blanco:
   misma forma, mismo sitio, y al soltar la primera nada se mueve. */
#descarte .carta.boca-arriba.hueco{ background:rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.22); }
#descarte .carta.boca-arriba.hueco .banda,
#descarte .carta.boca-arriba.hueco .ventana,
#descarte .carta.boca-arriba.hueco p{ background:none; box-shadow:none; color:transparent; }
#descarte .carta.boca-arriba:hover{ transform:none; filter:none; }
#descarte.vacio{ color:rgba(255,255,255,.55); }
.monton .cuenta{ font-family:var(--display); font-size:1.7rem; line-height:1.2;
                 background:rgba(0,0,0,.5); border-radius:1rem; padding:0 .5rem; }
.monton .rotulo{ font-family:var(--rotulo); font-size:.78rem; letter-spacing:.1em;
                 text-transform:uppercase; text-shadow:0 1px 0 rgba(0,0,0,.7); }
/* Cuántas cartas te quedan por cambiar, dicho con una flecha y un «×N» al lado
   del rótulo del descarte (Remi, sesión 93). Antes era una frase debajo de la
   mano —«Puedes cambiar 1 carta»— y las frases de instrucciones sobran en la
   pantalla de juego. La flecha apunta al montón: ahí es donde va la que sueltas.
   Cuando no queda ninguna, la insignia no sale. */
/* Va SUELTA sobre la esquina del montón, no en el renglón del rótulo: metida en
   el renglón ensanchaba el descarte y la fila de abajo se salía del bloque (lo
   pilló `prueba-anchos`). Así no ocupa sitio: se posa encima. */
.cambios-quedan{
  position:absolute; top:0; right:0; z-index:3;
  display:inline-flex; align-items:center; gap:.15rem;
  padding:.05rem .3rem .1rem .25rem; border-radius:.5rem;
  color:var(--oro-tinta); background:linear-gradient(180deg,var(--oro),var(--oro-2));
  box-shadow:0 0 0 2px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.6);
}
.cambios-quedan b{ font-family:var(--display); font-size:.95rem; line-height:1;
                   letter-spacing:0; text-shadow:0 1px 0 rgba(255,255,255,.45); }
/* `flecha-cambio` y no `flecha` a secas: ya hay una `.flecha` en las láminas de
   «Cómo se juega» que pinta de oro, y le ganaba el color a ésta */
.cambios-quedan .flecha-cambio{ width:1.7em; height:1.35em; flex:none; display:block; }

/* ===== los botones grandes, también de Kenney ===== */
/* la columna del oponente: su cromo y sus sospechosos, y nada más. Las fichas van
   juntas y centradas, que sueltas por toda la altura quedaban a la deriva
   (Remi, sesión 55). */
.rival{ grid-area:rival; display:flex; flex-direction:column; min-height:0;
        position:relative; z-index:2;
        align-items:flex-start;              /* pegados al plano, por el otro lado */
        margin:var(--sobre-plano, 0px) 0 var(--bajo-plano, 0px) calc(var(--hueco-plano, 0px) * -1); }
/* el mismo hueco que en `#tarjetas`, y por lo mismo: que el resalte de la
   ficha no salga cortado contra el borde de la columna que se desliza */
#rivales{ display:flex; flex-direction:column; align-items:flex-start; gap:.45rem;
          flex:1 1 auto; min-height:0;
          padding:7px; width:calc(100% + 14px); margin-inline:-7px;
          justify-content:flex-start; justify-content:safe center; overflow-y:auto; }
/* mismas medidas que las tuyas: un sospechoso del oponente es tan sospechoso
   como uno tuyo, y en pantalla se ve igual de grande (Remi, sesión 58). Lo
   único que cambia es el color. */
.suyo-ficha{
  flex:0 1 auto; width:15rem; max-width:100%; min-height:2.6rem; max-height:6.4rem;
  overflow:hidden; display:flex; gap:.7rem; align-items:center;
  padding:.5rem .7rem; border-radius:.8rem; color:#fff;
  background:linear-gradient(160deg,#5a4a86,#2a2148);
  box-shadow:0 0 0 3px rgba(0,0,0,.55), inset 0 0 0 2px rgba(255,255,255,.14);
}
.suyo-ficha.cerrado{ background:linear-gradient(160deg,#c5731a,#7a3f0c); }
.suyo-ficha b{ display:block; font-family:var(--display); font-size:1.1rem; line-height:1.15;
               text-shadow:0 2px 0 rgba(0,0,0,.45); }
/* el sitio, debajo del nombre. Va apuntado al span de dentro del cuerpo y no a
   todos: dentro del nombre hay otro span, el de la inicial, que es inline. */
.suyo-ficha .cuerpo > span{ display:block; font-size:.84rem; color:#d8cdf5; line-height:1.2; }
.suyo-ficha.cerrado .cuerpo > span{ color:#ffe6c9; }
.mandos{ grid-area:2/3/3/4; display:flex; flex-direction:column; justify-content:flex-end;
         gap:.4rem; width:auto; }

/* La carta del descarte y «Cerrar mi turno» comparten celda: la carta a la
   izquierda y el botón a la derecha, en vez de uno debajo del otro. Así la
   carta se lleva las dos filas de alto y sale con su forma y a buen tamaño
   (Remi, sesión 72), sin encoger el botón. Solo donde la columna da de sí. */
/* «Cerrar mi turno» se va A LA IZQUIERDA del renglón de abajo, al hueco que
   quedaba libre bajo los sospechosos, y la columna de la derecha se queda
   ENTERA para la carta del descarte (Remi, sesión 73). Así la carta coge todo
   el alto y sale grande, sin apretujarse contra el botón.
   En tres columnas es rejilla; en la banda de dos, la fila de abajo es un flex
   y basta con mandar el botón el primero. */
@media (min-width:82.001rem){
  .mandos{ grid-area:1/1/3/2; justify-self:start; align-self:end; width:auto; }
  /* apartada del todo: a la derecha de su columna y levantada del suelo, para
     que no se lea como una cuarta carta de la mano (Remi, sesión 74) */
  .montones{ grid-area:1/3/3/4; justify-self:end; align-self:end;
             align-items:flex-start; height:auto; width:auto;
             margin:0 1.2rem 1.1rem 0; }   /* levantada, pero sin salirse de la fila */
  #descarte .carta.boca-arriba{ width:9.4rem; height:12.6rem; }
}
@media (max-width:82rem) and (min-width:62.001rem){
  .mandos{ order:-1; align-self:flex-end; }
  .montones{ align-self:stretch; }
}
/* «Fijar» y «Cambiar esta carta» van pegados a lo que tocan, colocados a mano
   desde duelo.js: sueltos, para que no los recorte ninguna tira que se desliza */
button.principal.flotante{ position:fixed; z-index:65; margin:0; min-height:2.9rem;
                           font-size:.98rem; max-width:calc(100vw - .5rem); }
button.principal.flotante[hidden]{ display:none; }
/* En el móvil, «Cambiar esta carta» más pequeño (Remi, sesión 102): tapaba media carta. El de
   «Fijar» se queda como está, que va sobre el plano y hay sitio. */
@media (max-width:46rem){
  #btn-cambiar.flotante{ min-height:2.2rem; font-size:.84rem; letter-spacing:0; padding:0 .45rem;
                         border-width:13px; border-image-width:13px; }
}
button.principal{
  font-family:var(--display); font-size:1.05rem; letter-spacing:.02em; cursor:pointer;
  color:#fff; text-shadow:0 2px 0 rgba(0,0,0,.45); background:none;
  border:20px solid transparent; border-radius:0; padding:0 .5rem; min-height:3.3rem; line-height:1;
  border-image:url("/dibujos/ui/boton-blue.png") 20 fill / 20px / 0 stretch;
  transition:transform .08s ease;
}
button.principal.fijar{ border-image-source:url("/dibujos/ui/boton-green.png"); }
button.principal.peligro{ border-image-source:url("/dibujos/ui/boton-red.png"); }
button.principal.cambiar{ border-image-source:url("/dibujos/ui/boton-yellow.png");
                          color:var(--oro-tinta); text-shadow:0 1px 0 rgba(255,255,255,.45); }
button.principal:active{ transform:translateY(3px); }
button.principal:disabled{ border-image-source:url("/dibujos/ui/boton-grey.png");
                           color:#e9edf2; cursor:default; transform:none; }

/* ===== el cursor por encima =====
   Solo con ratón: en el móvil el «hover» se queda pegado después de tocar y el
   botón se queda encendido. El botón se levanta un poco y se aclara; al
   pulsarlo se hunde, que es el gesto que ya había. Nada de rebotes: esto es un
   resalte, no una caída (ver CLAUDE.md), así que va en CSS y no en GSAP. */
@media (hover:hover) and (pointer:fine){
  button.principal:hover:not(:disabled){ transform:translateY(-2px); filter:brightness(1.12); }
  button.principal:hover:not(:disabled):active{ transform:translateY(3px); filter:brightness(1.06); }
  .chapa:hover{ transform:translateY(-2px); filter:brightness(1.1); }
  .chapa:hover:active{ transform:translateY(2px); filter:brightness(1.04); }
  /* los casos del mapa y los personajes son botones grandes: el mismo gesto */
  .nodo[data-nivel]:hover{ transform:translateY(-3px); filter:brightness(1.1); }
  .nodo[data-nivel]:active{ transform:translateY(1px); filter:brightness(1.04); }
  .carta-col:not(.cerrada):not(.cara-cara):hover{ transform:translateY(-3px); filter:brightness(1.1); }
  .carta-col:not(.cerrada):not(.cara-cara):active{ transform:translateY(1px); filter:brightness(1.04); }
  .medalla[data-logro]:hover{ transform:translateY(-2px); filter:brightness(1.1); }
  /* las cartas de la mano y las tarjetas de sospechoso ya se levantaban solas
     (arriba); aquí solo se les añade el mismo brillo que a todo lo demás */
  .carta:hover, .tarjeta:hover{ filter:brightness(1.12); }
  .tipo-tarjeta{ transition:none; }
}
.nodo, .carta-col, .medalla{ transition:transform .1s ease, filter .1s ease; }

/* ===== las piezas del plano ===== */
.tablero .cell{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.10); }
/* Dónde se puede estar, de un vistazo: el mismo velo claro que el juego de la web
   (`estilo.css`, sesión 175), que el duelo no carga. Aclara el suelo de las
   casillas libres por debajo del mueble y de la alfombra, así que el dibujo no se
   ensucia. Aquí ninguna casilla usa su `::after` para otra cosa. */
.tablero{ --velo-libre:.22; }
.tablero .cell:not(.blocked):not(.fuera)::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:rgba(255,253,247,var(--velo-libre));
}
/* Los muros: el de fuera manda y el de dentro acompaña. El contorno del plano va
   más grueso y con las esquinas redondeadas (los tramos son sueltos, así que la
   esquina la redondea el remate del trazo) y las paredes de dentro, más finas
   que antes: así se lee de un vistazo qué es el borde del plano y qué separa dos
   salas (Remi, sesión 60). */
.tablero .muro-sala path{ stroke:#0b1128; stroke-width:.085; }
/* Las de dentro, con los extremos redondos, como en la web y los PDF (sesión 185, copia de
   tablero.css, que el duelo no carga): sin remate, cada esquina en L quedaba mellada. */
.tablero .muro-sala path.interior{ stroke-linecap:round; stroke-linejoin:round; }
.tablero .muro-sala path.exterior{ stroke-width:.26; stroke-linecap:round; stroke-linejoin:round; }
/* Lo que dice una carta (sesión 181): con el ratón encima o elegida, el plano apaga lo que
   la carta no nombra. Sin color encima de lo nombrado: el naranja y el turquesa ya son de las
   fichas. La capa `.marca` va sobre el mueble y bajo las fichas, que siguen a la vista. */
.tablero .cell .marca{ transition:background-color .15s ease; }
.tablero.citando .cell:not(.citada) .marca{ background:rgba(9,13,36,.6); }
/* La línea de un número del borde, mientras el ratón está encima (sesión 181): un velo de
   latón sobre sus casillas, por debajo del mueble como el velo de las libres. */
.tablero .cell.en-linea::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:rgba(255,209,102,.38); }
.tablero .room-tag{
  color:#fff; text-shadow:0 2px 0 rgba(0,0,0,.55); border:0; border-radius:2em;
  background:linear-gradient(180deg,#4a5cc4,#20276b); padding:.1em .55em; z-index:12;
  box-shadow:0 0 0 2px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.4);
}
.token.mio{ box-shadow:0 0 0 3px #fff, 0 0 0 6px var(--agua), 0 0 14px 2px rgba(52,214,219,.75); }
.token.suyo{ box-shadow:0 0 0 3px #fff, 0 0 0 6px #ff8a3c, 0 0 14px 2px rgba(255,138,60,.7); }
.token.fijado{ box-shadow:0 0 0 3px #fff, 0 0 0 6px var(--si), 0 0 16px 3px rgba(63,212,122,.8); }
/* La víctima llevaba de fondo `--ink` (el negro de la tinta) y su cara —un señor
   de esmoquin negro— se perdía dentro: se veía la cabeza flotando y nada más
   (Remi, sesión 88). Los demás llevan cada uno el color de su personaje; la
   víctima no tiene color propio, así que se le pone un gris azulado fijo, igual
   en claro y en oscuro: frío, no es el de nadie, y hace de fondo al esmoquin sin
   pelearse con el aro rojo que la señala. */
.token.victima{ background:#9aa3b8;
                box-shadow:0 0 0 3px #fff, 0 0 0 6px var(--no), 0 0 18px 3px rgba(224,65,60,.7); }
.token.apilado{ width:52%; height:52%; max-width:52%; max-height:52%;
                font-size:calc(var(--celda,40px)*.26); }
.tablero .cell.verdadera{ outline:4px solid var(--si); outline-offset:-4px; }

/* lo que anotas: la letra, el aspa y el círculo */
/* Lo que anotas no es una letra suelta: es una chapita puesta a mano, del color
   del personaje, con su contorno y su relieve, como todo lo demás de la mesa
   («sosas», dijo Remi en la sesión 57). */
.tablero .cell .notas{
  position:absolute; inset:0; display:flex; flex-wrap:wrap; align-content:center;
  align-items:center; justify-content:center; gap:4% 5%; padding:6% 5%;
  font-family:var(--display); font-size:calc(var(--celda,40px) * .38); line-height:1;
  pointer-events:none; z-index:8;
}
.tablero .cell .notas span{
  display:grid; place-items:center; min-width:1.15em; padding:.1em .18em .16em;
  border-radius:.28em; color:#fff; text-shadow:0 .06em 0 rgba(0,0,0,.55);
  background:linear-gradient(180deg, hsl(var(--hue,200) 88% 64%), hsl(var(--hue,200) 78% 42%));
  box-shadow:0 0 0 max(1.5px, calc(var(--celda,40px) * .035)) #0b1128,
             inset 0 .1em 0 rgba(255,255,255,.45), 0 .12em 0 rgba(0,0,0,.4);
  rotate:-3.5deg;
  animation:nota-entra .26s cubic-bezier(.2,.9,.3,1.5) both;
}
.tablero .cell .notas span:nth-child(even){ rotate:3deg; }
.tablero .cell .notas.varias{ font-size:calc(var(--celda,40px) * .27); }
.tablero .cell.tachada .notas{ display:none; }
.tablero .cell.tachada::before{
  content:""; position:absolute; inset:16%; z-index:8; pointer-events:none; opacity:.85; --gr:8%;
  background:
    linear-gradient(to bottom right, transparent calc(50% - var(--gr)), var(--no) calc(50% - var(--gr)), var(--no) calc(50% + var(--gr)), transparent calc(50% + var(--gr))),
    linear-gradient(to bottom left,  transparent calc(50% - var(--gr)), var(--no) calc(50% - var(--gr)), var(--no) calc(50% + var(--gr)), transparent calc(50% + var(--gr)));
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.6));
  animation:aspa-entra .3s cubic-bezier(.2,.9,.3,1.5) both;
}
.tablero .cell.tachada.blocked::before{ display:none; }
.tablero .cell.circulo::before{
  content:""; position:absolute; inset:17%; z-index:8; pointer-events:none;
  border:max(3px, calc(var(--celda,40px) * .11)) solid var(--si); border-radius:50%;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.6));
  animation:aspa-entra .3s cubic-bezier(.2,.9,.3,1.5) both;
}
/* el anillo de la pulsación larga, el mismo que en los tableros de la web */
.tablero .cell .anillo{ position:absolute; inset:-14%; width:128%; height:128%; z-index:9;
                        pointer-events:none; transform:rotate(-90deg); overflow:visible; }
.tablero .cell .anillo circle{ fill:none; stroke-linecap:round; stroke-dasharray:264;
                               stroke-dashoffset:264; animation:anillo var(--larga,.9s) linear both; }
.tablero .cell .anillo .fondo{ stroke:rgba(11,17,40,.75); stroke-width:16; }
.tablero .cell .anillo .traza{ stroke:var(--si); stroke-width:10; }
@keyframes anillo{ to{ stroke-dashoffset:0; } }

.tablero.montaje .room-tag{ opacity:0; }
/* Mientras cae el plano, GSAP le pone `transform` a cada casilla, y una casilla
   transformada pasa a ser su propia capa: la ficha de dentro deja de poder
   ponerse por encima del mueble de OTRA casilla y la víctima aparecía media
   escondida detrás de una silla (Remi, sesión 70). Durante el montaje, la
   casilla que lleva ficha sube de capa; al acabar, `clearProps` quita los
   transform y todo vuelve al orden de siempre. */
.tablero.montaje .cell:has(.token){ z-index:10; }
.tablero.rotulos-entran .room-tag{ animation:rotulo-entra .4s cubic-bezier(.2,.9,.3,1.5) both; }
@keyframes rotulo-entra{ from{ opacity:0; scale:.4; } to{ opacity:1; scale:1; } }
@keyframes nota-entra{ from{ opacity:0; scale:.4; } 70%{ opacity:1; scale:1.14; } to{ opacity:1; scale:1; } }
@keyframes aspa-entra{ from{ opacity:0; scale:2.1; rotate:-35deg; } 65%{ opacity:.9; scale:.9; rotate:0deg; } to{ opacity:.85; scale:1; rotate:0deg; } }

/* ===== el aviso grande ===== */
.aviso-estado{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
               pointer-events:none; z-index:55; padding:1rem; }
#estado{
  font-family:var(--display); font-size:clamp(1.6rem,3.4vw,2.7rem); color:#fff; text-align:center;
  padding:.3em .8em; border-radius:2rem; text-shadow:0 3px 0 rgba(0,0,0,.5);
  background:linear-gradient(180deg,#4a5cc4,#20276b);
  box-shadow:0 0 0 4px #fff, 0 0 0 8px rgba(0,0,0,.6), 0 18px 30px -12px #000;
  opacity:0; transform:scale(.9); transition:opacity .3s ease, transform .3s ease;
}
#estado.visible{ opacity:1; transform:none; }

/* ===== los números que vuelan ===== */
#volando{ position:fixed; inset:0; pointer-events:none; z-index:60; }
/* la carta que suelta el oponente, mientras vuela hasta el descarte */
#volando .carta.suelta-rival{ position:fixed; flex:none; min-width:0; cursor:default;
                              will-change:transform,opacity; }
/* La ficha del oponente en la casilla que prueba (sesión 181): su cara dentro de un aro
   naranja, el color de sus fichas, un par de segundos. Si falla, el aro se vuelve rojo. Vive
   en esta capa y no en la casilla, así que lleva su propio `--celda` para que la ficha mida
   lo mismo que en el plano. */
#volando .intento-rival{ position:fixed; display:flex; align-items:center; justify-content:center;
  border-radius:max(4px, calc(var(--celda) * .12));
  box-shadow:inset 0 0 0 max(2px, calc(var(--celda) * .06)) #ff8a3c, 0 0 0 2px rgba(0,0,0,.55),
             0 0 16px 4px rgba(255,138,60,.75);
  background:rgba(255,138,60,.18); }
#volando .intento-rival.fallo{ box-shadow:inset 0 0 0 max(2px, calc(var(--celda) * .06)) var(--no),
             0 0 0 2px rgba(0,0,0,.55), 0 0 16px 4px rgba(224,65,60,.75); background:rgba(224,65,60,.2); }
#volando .intento-rival.sit .token{ width:62%; height:62%; max-width:62%; max-height:62%; translate:24% -24%; }
#volando .punto{
  position:absolute; transform:translate(-50%,-50%); will-change:transform,opacity;
  /* Más pequeño desde la sesión 90: con 3,2 rem y 5 px de contorno el número
     ocupaba media pantalla en el móvil («me ha parecido ver los números muy
     grandes», Remi). Sigue siendo lo más gordo que sale por encima del juego,
     pero ya no tapa la mesa. */
  font-family:var(--display); font-size:clamp(1.45rem,3.4vw,2.2rem); line-height:1; color:var(--si);
  -webkit-text-stroke:4px #0b1128; paint-order:stroke fill;
  text-shadow:0 3px 0 rgba(0,0,0,.5); white-space:nowrap;
}
#volando .punto.resta{ color:var(--no); }
#volando .recorte{ position:absolute; width:.9rem; height:1.2rem;
                   box-shadow:0 0 0 2px rgba(0,0,0,.5); border-radius:.15rem; }

/* ===== la portada (sesión 106) ===== */
/* Lo primero al abrir /duelo/. No es una hoja de las de abajo: llena la mesa, como la pantalla
   de título de un juego, y repite el cuadro de la imagen de compartir (dibujos/og-duelo-*.jpg):
   el plano con los sospechosos clavados, tu detective y el rival asomando por las esquinas, y
   el VS torcido entre los dos. Está hecha con las piezas de la casa —el mismo `.mini` de las
   láminas de la ayuda y los dibujos de los avatares—, así que se ve nítida a cualquier tamaño y
   se traduce sola. Todo mide con `vmin` para que quepa entera también en el móvil tumbado. */
#portada[hidden]{ display:none; }
#portada{
  position:absolute; inset:0; z-index:78; display:flex; align-items:center; justify-content:center;
  padding:1rem; overflow:auto;
  background:radial-gradient(120% 100% at 18% 12%, #3a4a9e, #1b2559 55%, #0b1128);
}
#portada.yendose{ overflow:hidden; }   /* al irse, lo que sale del cuadro no asoma barras */
#portada .cartel{ display:flex; flex-direction:column; align-items:center; text-align:center;
                  gap:.35rem; width:min(32rem,100%); }
#portada .arte{ position:relative; margin-bottom:.3rem;
                /* los dos retratos asoman por las esquinas, medio dentro y medio fuera del
                   plano: el hueco de alrededor es justo medio retrato */
                --r:clamp(3.6rem,13vmin,6rem); padding:0 calc(var(--r) / 2) calc(var(--r) / 2); }
#portada .mini{ grid-template-columns:repeat(4,var(--c)); grid-auto-rows:var(--c);
                --c:clamp(2.2rem,8.5vmin,4.2rem);
                box-shadow:0 0 0 3px #12183a, 0 18px 30px -16px #000; }
#portada .retrato{
  position:absolute; bottom:0; width:var(--r); aspect-ratio:1; overflow:hidden;
  border-radius:50%; background:#4c5c9c; box-shadow:0 0 0 3px var(--oro), 0 12px 20px -12px #000;
}
#portada .retrato img{ width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }
#portada .retrato.tu{ left:0; }
#portada .retrato.rival{ right:0; transform:scaleX(-1); }   /* el rival mira al detective */
/* el VS manda en el cuadro: es lo que dice que esto es uno contra otro (Remi, sesión 106) */
#portada .vs{ position:absolute; left:50%; bottom:calc(var(--r) / 6);
              transform:translateX(-50%) rotate(-6deg); font-family:var(--display);
              font-size:clamp(2.2rem,9vmin,4.4rem); line-height:1; color:var(--oro);
              text-shadow:0 4px 0 rgba(0,0,0,.6), 0 0 0 rgba(0,0,0,0); }
#portada .titulo{ font-family:var(--display); font-size:clamp(1.5rem,6vmin,3.2rem); line-height:1.02;
                  margin:0; color:#fff; text-shadow:0 3px 0 rgba(0,0,0,.45); }
#portada .gancho{ font-family:var(--rotulo); font-size:clamp(.95rem,3.2vmin,1.5rem); line-height:1.25;
                  letter-spacing:.04em; margin:0; color:var(--oro); }
#portada .botones{ margin-top:.7rem; }

/* ===== las hojas que se abren encima ===== */
#recuento[hidden], #mapa[hidden], #carpeta[hidden], #logros[hidden],
#ayuda[hidden], #pregunta[hidden], #personaje[hidden], #logro[hidden], #compra[hidden]{ display:none; }
/* Las hojas tapan el JUEGO, no la página: van absolutas dentro de `main.duelo` y la
   cabecera de la web queda siempre a la vista y a mano (sesión 99). */
#recuento, #mapa, #carpeta, #logros, #ayuda, #pregunta, #personaje, #logro, #compra{
  position:absolute; inset:0; z-index:70; display:flex; align-items:center; justify-content:center;
  padding:1rem; background:rgba(6,10,26,.72);
}
#recuento{ background:none; pointer-events:none; }
.hoja{
  pointer-events:auto; width:min(38rem,100%); overflow:auto;
  /* el 100 % es lo que queda bajo la cabecera de la web, menos el margen de la capa (antes era
     88vh, que con la cabecera encima se salía por abajo; sesión 99) */
  max-height:min(100%,50rem);
  padding:1.1rem 1.2rem 1.2rem; border-radius:1.1rem; color:#eaf0ff;
  background:linear-gradient(165deg,#3a4a9e,#161c46);
  box-shadow:0 0 0 4px #fff, 0 0 0 8px rgba(0,0,0,.65), 0 24px 40px -16px #000;
}
#recuento .hoja, #pregunta .hoja{ width:min(24rem,100%); }
#pregunta{ z-index:75; }                 /* por encima del mapa, que es quien pregunta */
#logro{ z-index:80; }                    /* el cartel del logro va lo primero de todo */
#logro .hoja{ width:min(26rem,100%); }
#logro .botones .principal{ flex:1; }

/* comprar personaje: se pregunta antes, que gasta fichas (sesión 70) */
#compra{ z-index:85; }
#compra .hoja{ width:min(24rem,100%); }
#compra .botones .principal{ flex:1; }
.compra-cara{ display:flex; align-items:center; gap:.9rem; margin:.6rem 0 .2rem; }
.compra-cara .foto{ flex:none; position:relative; overflow:hidden; width:6rem; aspect-ratio:.78;
                    border-radius:.6rem; background:rgba(255,255,255,.16);
                    box-shadow:inset 0 0 0 2px rgba(255,255,255,.3); }
.compra-cara .foto img{ position:absolute; left:var(--l,0%); bottom:var(--b,0%);
                        width:var(--w,100%); max-width:none; height:auto; display:block; }
.compra-nombre{ display:block; font-family:var(--display); font-size:1.4rem; line-height:1.1;
                color:#fff; text-shadow:0 2px 0 rgba(0,0,0,.45); }
.compra-precio{ display:flex; align-items:center; gap:.25rem; font-family:var(--display);
                font-size:1.5rem; color:var(--oro); margin:.15rem 0 .1rem; }
.compra-quedan{ display:flex; align-items:center; gap:.25rem; font-family:var(--rotulo);
                font-size:.95rem; color:#bfd0ff; }
#ayuda .hoja{ width:min(30rem,100%); }
.hoja .titulo{ font-family:var(--display); font-size:1.7rem; line-height:1.05; margin:0 0 .1rem;
               color:#fff; text-shadow:0 2px 0 rgba(0,0,0,.45); }
.hoja .pie-mano{ font-family:var(--rotulo); font-size:1.05rem; letter-spacing:.06em;
                 color:var(--oro); margin:.1rem 0 .9rem; }
.hoja .botones{ display:flex; gap:.5rem; flex-wrap:wrap; margin:.9rem 0 0; }
.nota-hoja{ margin:-.5rem 0 .9rem; font-size:.9rem; line-height:1.35; color:#bfd0ff; }

/* la cuenta del final */
#recuento ul{ list-style:none; margin:0 0 .5rem; padding:0; }
#recuento li{ display:flex; justify-content:space-between; gap:1rem; align-items:baseline;
              font-family:var(--rotulo); font-size:1.05rem; padding:.28em 0;
              border-bottom:1px solid rgba(255,255,255,.18); }
#recuento li b{ font-family:var(--display); font-size:1.15em; color:var(--si); }
#recuento li.resta b{ color:var(--no); }
#recuento .total{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
                  border-top:3px solid rgba(255,255,255,.35); margin:.3rem 0 .1rem;
                  padding-top:.45rem; font-family:var(--rotulo); font-size:1.15rem; }
#recuento .total b{ font-family:var(--display); font-size:2rem; line-height:1; color:var(--oro); }
#recuento .acumulado{ font-family:var(--rotulo); font-size:1rem; margin:.1rem 0 0; color:#bfd0ff; }
/* La salida al resto de la web al ganar (sesión 101): una línea, escrita, debajo de los botones. */
#recuento .salida-web{ font-family:var(--rotulo); font-size:.95rem; letter-spacing:.03em; margin:.8rem 0 0; color:#bfd0ff; }
#recuento .salida-web a{ color:var(--oro); text-decoration:underline; text-underline-offset:3px; }
#recuento .salida-web[hidden]{ display:none; }

/* El aspa de cerrar la cuenta (sesión 92). Es un botón del juego —el mismo
   recorte rojo de Kenney que «peligro»— y el aspa va DIBUJADA con dos palos y
   no escrita con una letra: una equis de teclado al lado de las chapas de
   arriba se ve de otro sitio. Se hunde al tocarla, como todos los demás. */
#recuento .hoja{ position:relative; }
#recuento .hoja .titulo{ padding-right:2.6rem; }   /* que el título no pase por debajo */
.aspa-cerrar{
  position:absolute; top:.55rem; right:.55rem; z-index:4; cursor:pointer;
  width:2.4rem; height:2.4rem; padding:0; background:none; border:12px solid transparent;
  border-radius:0; border-image:url("/dibujos/ui/boton-red.png") 20 fill / 12px / 0 stretch;
  transition:transform .08s ease, filter .1s ease;
}
.aspa-cerrar::before, .aspa-cerrar::after{
  content:""; position:absolute; left:50%; top:50%; width:1.05rem; height:.2rem;
  margin:-.1rem 0 0 -.525rem; border-radius:.1rem; background:#fff;
  box-shadow:0 1px 0 rgba(0,0,0,.45);
}
.aspa-cerrar::before{ transform:rotate(45deg); }
.aspa-cerrar::after{ transform:rotate(-45deg); }
.aspa-cerrar:active{ transform:translateY(2px); }
@media (hover:hover) and (pointer:fine){ .aspa-cerrar:hover{ filter:brightness(1.12); } }

/* el mapa de casos.
   Las dos hojas de entrar —«Tu personaje» y el mapa— caben enteras: más anchas,
   más altas y con las piezas más pequeñas, para no tener que deslizar (Remi,
   sesión 66). */
#personaje, #mapa{ padding:.6rem; }
#personaje .hoja, #mapa .hoja{ width:min(58rem,100%); max-height:100%; }   /* lo que queda bajo la cabecera (sesión 99) */
/* La de «Tu personaje» OCUPA el alto que hay, con un tope: es lo que deja que
   la rejilla reparta tres filas sin deslizar. Si solo llevara `max-height`, la
   hoja se quedaría del alto de su contenido y las filas saldrían diminutas. */
#personaje .hoja{ height:min(calc(100dvh - 1.2rem), 56rem); }
/* tres filas de seis: los personajes se ven, que en dos filas de ocho salían
   diminutos (Remi, sesión 67). La hoja crece hacia abajo lo que haga falta. */
/* Tres filas de seis, SIN deslizar, sea cual sea el alto de la pantalla
   (Remi, sesión 70). La hoja es una columna: el título, tu carta, la cuenta y
   el botón ocupan lo suyo, y la rejilla se queda con TODO lo que sobra y lo
   reparte en tres filas iguales. La casilla saca su tamaño de la altura de la
   fila, no del ancho: así en una pantalla baja los personajes se ven más
   pequeños, pero se ven los dieciséis y no hay que deslizar. */
#personaje .hoja{ display:flex; flex-direction:column; overflow:hidden; }
#personaje .hoja > *{ flex:none; }
#personaje .cartas-col{
  flex:1 1 auto; min-height:0; display:grid; gap:.5rem;
  grid-template-columns:repeat(6,minmax(0,1fr));
  grid-template-rows:repeat(3,minmax(0,1fr));
}
#personaje .carta-col{ width:100%; height:100%; min-width:0; min-height:0;
                       justify-content:flex-end; overflow:hidden; }
/* La última fila lleva cuatro (los que se compran con fichas) y se quedaba
   arrinconada a la izquierda: empieza una columna más adentro para que quede
   centrada. Va atado a dieciséis personajes en seis columnas; si cambia el
   número, cambia esto. */
#personaje .carta-col:nth-child(13){ grid-column-start:2; }
#personaje .carta-col .foto{ flex:1 1 0; min-height:0; width:auto; max-width:100%;
                             align-self:center; }
#personaje .hoja{ padding-bottom:.9rem; }
#personaje .hoja .titulo{ margin-bottom:0; }
#personaje .elegido{ margin:.2rem 0 .7rem; }
#personaje .elegido .cromo{ padding:.5rem .8rem; }
/* la tuya es la más grande de la pantalla: es tu personaje. Atada al alto de
   la ventana para que en pantalla baja encoja ella antes que la rejilla. */
#personaje .elegido .cromo .marco{ --alto-cromo:clamp(5.4rem,16vh,11.5rem); }
#personaje .familia{ margin:0 0 .3rem; }
#personaje .carta-col{ padding:.35rem .35rem .4rem; gap:.12rem; }
#personaje .botones{ padding:.4rem 0 .2rem; margin-top:.5rem; }
#mapa .nodos{ grid-template-columns:repeat(4,minmax(0,1fr)); }
/* El jefe va solo en su grupo: una ficha centrada y del ancho de una columna,
   no una fila de cuatro con una sola cosa dentro. */
#mapa .mundo-jefe .nodos{ grid-template-columns:minmax(0,11rem); justify-content:center; }
.fichas-hoja{ margin:0 0 .7rem; font-family:var(--rotulo); font-size:1.05rem;
              letter-spacing:.06em; color:var(--oro); }
.fichas-hoja b{ font-family:var(--display); font-size:1.35rem; color:#fff;
                text-shadow:0 2px 0 rgba(0,0,0,.45); }
#btn-cerrar-mapa[hidden]{ display:none; }
#mapa .botones{ margin-top:.7rem; }
/* El «Ir» chico sobre el caso señalado (sesión 102). Solo en el móvil: ahí el botón grande
   queda al pie de la hoja y hay que deslizar para verlo. Es el mismo botón azul, pequeño, y
   ocupa el sitio del plano de la ficha señalada (el plano es adorno: el tamaño va escrito
   debajo), así no tapa nada de las fichas vecinas. Lo coloca duelo.js (colocarIrChico). */
#mapa .nodos{ position:relative; }
#mapa .ir-chico{ display:none; position:absolute; z-index:6; margin:0; transform:translate(-50%,-50%);
                 min-height:2.1rem; padding:0 .6rem; font-size:.98rem; border-width:12px;
                 border-image-slice:20 fill; border-image-width:12px; filter:drop-shadow(0 2px 0 rgba(0,0,0,.4)); }
#mapa .ir-chico:active{ transform:translate(-50%,-50%) translateY(2px); }
@media (max-width:46rem){
  #mapa .ir-chico{ display:inline-flex; align-items:center; }
  #mapa .nodo.aqui .plano{ visibility:hidden; }
  /* y el «Ir» grande del pie sobra: ya está en la ficha (Remi, sesión 102). Sigue en el DOM,
     que es el que hace el trabajo cuando se pulsa el chico. */
  #mapa #btn-ir{ display:none; }
}
#mapa .botones .principal{ flex:1 1 8rem; }
/* «TU PERSONAJE» SE DESLIZA CUANDO NO CABE (sesión 181). Repartir las filas de personajes en
   el alto que sobra solo funciona con pantalla alta: tu carta, las cifras, el último logro y
   las tarjetas se llevan de 300 a 470 px, y en cualquier móvil (de pie o tumbado), en la
   tablet barata y en un portátil de 700 px de alto las caras salían de 0 a 35 px. Con la mesa
   por debajo de 52 rem de alto, y siempre en el móvil de pie, cada personaje lleva su foto a
   tamaño fijo, la rejilla mide lo que mida y la hoja se desliza; «Jugar» sigue clavado abajo
   (`sticky`). Son las mismas reglas en los dos bloques: una `@media` y un `@container` no se
   pueden juntar en uno. */
@container mesa (max-height:52rem){
  #personaje .hoja{ overflow-y:auto; overscroll-behavior:contain; }
  #personaje .cartas-col{ flex:none; grid-template-rows:none; grid-auto-rows:auto; }
  #personaje .carta-col{ height:auto; }
  #personaje .carta-col .foto{ flex:none; width:100%; max-width:6rem; aspect-ratio:.78; }
}
@media (max-width:46rem){
  #personaje .hoja{ overflow-y:auto; overscroll-behavior:contain; }
  #personaje .cartas-col{ flex:none; grid-template-rows:none; grid-auto-rows:auto; }
  #personaje .carta-col{ height:auto; }
  #personaje .carta-col .foto{ flex:none; width:100%; max-width:6rem; aspect-ratio:.78; }
}
/* en pantallas bajas se encoge todo un peldaño más antes que aparecer una barra */
@container mesa (max-height:46rem){
  #personaje .cartas-col{ gap:.35rem; }
  #mapa .nodo .plano{ width:2.6rem; }
}
/* en el móvil también caben enteras: las piezas se encogen hasta que entran */
@media (max-width:46rem){
  #personaje, #mapa{ padding:.4rem; }
  #personaje .hoja, #mapa .hoja{ padding:.7rem .7rem .8rem; max-height:100%; }
  #personaje .hoja .titulo{ font-size:1.35rem; }
  #personaje .elegido{ gap:.4rem; margin:.1rem 0 .5rem; }
  #personaje .elegido .cromo{ padding:.4rem .6rem; }
  #personaje .elegido .cromo .marco{ --alto-cromo:5.8rem; }
  #personaje .elegido .cromo .nombre{ font-size:1.1rem; }
  #personaje .tipo-tarjeta{ font-size:.82rem; padding:.18rem .5rem; }
  #personaje .familia{ margin:0 0 .35rem; }
  #personaje .cartas-col{ gap:.35rem; grid-template-columns:repeat(4,minmax(0,1fr));
                          grid-template-rows:repeat(4,minmax(0,1fr)); }
  #personaje .carta-col:nth-child(13){ grid-column-start:auto; }
  #personaje .carta-col{ padding:.3rem .25rem .35rem; gap:.1rem; }
  #personaje .carta-col b{ font-size:.8rem; }
  #personaje .carta-col small{ font-size:.68rem; }
  #personaje .botones{ padding:.5rem 0 .2rem; }

  #mapa .nodos{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:.4rem; }
  #mapa .nodo{ padding:.3rem .35rem .3rem; gap:.05rem; }
  /* el plano encoge un peldaño (era 2,4 rem): es lo que faltaba para que las
     cinco filas del mapa entren sin barra de desplazamiento */
  #mapa .nodo .plano{ width:2.1rem; margin-bottom:.2rem; }
  #mapa .nodo b{ font-size:.92rem; }
  #mapa .nodo span{ font-size:.72rem; }
  #mapa .nodo em{ font-size:.74rem; margin-top:.12rem; }
  #mapa .estrellas.chica i{ width:.6rem; height:.6rem; }
  #mapa .fichas-hoja{ margin-bottom:.4rem; }
  #mapa .mundo-nombre{ margin-bottom:.35rem; }
  /* El jefe, TUMBADO: de pie se comía una fila entera y el mapa dejaba de caber
     a 360 px. Tumbado dice lo mismo en menos de la mitad de alto, y de paso
     ocupa el ancho entero, que es lo que hace que se lea como el final. */
  #mapa .mundo-jefe{ margin-top:.45rem; }
  #mapa .mundo-jefe .mundo-nombre{ margin-bottom:.25rem; }
  #mapa .mundo-jefe .nodos{ grid-template-columns:minmax(0,1fr); }
  #mapa .nodo.jefe{ flex-direction:row; align-items:center; justify-content:center;
                    gap:.5rem; padding:.4rem .55rem; }
  #mapa .nodo.jefe .plano{ margin:0; width:2.6rem; }
  #mapa .nodo.jefe .texto{ display:flex; flex-direction:column; align-items:flex-start;
                           text-align:left; }
  #mapa .nodo.jefe .cuesta{ display:flex; flex-direction:column; align-items:center; gap:.1rem; }
  #mapa .nodo.jefe .cuesta em{ margin-top:0; }
}

.mundo-nombre{ font-family:var(--display); font-size:.82rem; letter-spacing:.12em;
               text-transform:uppercase; color:#9fb6f0; margin:0 0 .5rem; }
.mundo.cerrado{ margin-top:1.1rem; opacity:.8; }
.mundo-nota{ margin:0; font-size:.92rem; color:#bfd0ff; }
.nodos{ display:grid; grid-template-columns:repeat(auto-fill,minmax(9rem,1fr)); gap:.6rem; }
.nodo{
  display:flex; flex-direction:column; align-items:center; gap:.15rem; cursor:pointer;
  font:inherit; text-align:center; padding:.6rem .5rem .55rem; color:#fff; border:0;
  border-radius:.8rem; background:linear-gradient(165deg,#2f7bd6,#10306d);
  box-shadow:0 0 0 3px rgba(0,0,0,.5), inset 0 0 0 2px rgba(255,255,255,.2), 0 8px 14px -8px #000;
}
.nodo b{ font-family:var(--display); font-size:1rem; line-height:1.1; }
.nodo span{ font-size:.78rem; color:#bfd8ff; }
.nodo em{ display:inline-block; margin-top:.2rem; font-style:normal; font-family:var(--display);
          font-size:.8rem; color:var(--oro-tinta); border-radius:1rem; padding:.08em .6em;
          background:linear-gradient(180deg,var(--oro),var(--oro-2));
          box-shadow:0 0 0 2px rgba(0,0,0,.45); }
.nodo em.bote{ color:#fff; background:linear-gradient(180deg,#3fd47a,#17703d);
               text-shadow:0 1px 0 rgba(0,0,0,.35); }
.nodo em.falta{ background:linear-gradient(180deg,#b9c1d8,#767f9c); color:#1a1f33; }
.nodo.aqui{ box-shadow:0 0 0 3px #fff, 0 0 0 6px var(--oro), 0 0 22px 2px rgba(255,209,102,.6); }
.nodo.cerrado{ background:linear-gradient(165deg,#4b5478,#242a45); cursor:default; filter:grayscale(.5); }
/* El jefe (sesión 97): la misma ficha, en arena en vez de azul, y con el nombre
   de su mundo debajo del tamaño. Lo que lo separa de los otros ocho no es que
   sea más grande —no cabe más gente en 11x11— sino a dónde te lleva. */
.mundo-jefe{ margin-top:1rem; }
.nodo.jefe{ background:linear-gradient(165deg,#e0a93c,#7a4310); color:#2b1b00; }
/* sobre el oro manda la tinta: el azul claro de las otras fichas no se leía */
.nodo.jefe b{ color:#2b1b00; text-shadow:0 1px 0 rgba(255,255,255,.3); }
.nodo.jefe span{ color:#5c3c04; }
.nodo.jefe.cerrado{ background:linear-gradient(165deg,#6d6048,#2e2920); color:#fff; }
.nodo.jefe.cerrado b{ color:#fff; text-shadow:none; }
.nodo.jefe.cerrado span{ color:#ddd6c4; }
.nodo .suyo{ font-family:var(--rotulo); font-size:.72rem; letter-spacing:.06em;
             text-transform:uppercase; color:#3a2a00; }
.nodo.cerrado .suyo{ color:#e8e2d2; }
/* Los dos envoltorios de la ficha no pintan nada mientras la ficha esté de pie:
   mandan las reglas de siempre. Solo se hacen cajas en el móvil, y solo en la
   del jefe, para tumbarla. */
.nodo .texto, .nodo .cuesta{ display:contents; }
.nodo .plano{ display:grid; grid-template-columns:repeat(var(--n,7),1fr); gap:1px; width:3.6rem;
              aspect-ratio:1; background:rgba(0,0,0,.5); border-radius:.2rem; overflow:hidden;
              margin:0 0 .3rem; }
.nodo .plano i{ background:rgba(255,255,255,.75); }
.nodo.cerrado .plano i{ background:rgba(255,255,255,.35); }

/* ===== la ficha =====
   El dibujo va donde antes ponía la palabra: crece con el texto que lo rodea,
   así que sirve igual en la chapa del marcador y en el precio de un personaje.
   Cambiarla es dejar otro SVG con el mismo nombre. */
.ficha{ display:inline-block; width:1.15em; height:1.15em; margin-left:.22em;
        vertical-align:-.22em; flex:none;
        background:url("/dibujos/ui/ficha-hueso.svg") center/contain no-repeat; }
#fichas-tengo .ficha, .fichas-hoja .ficha{ width:1.3em; height:1.3em; vertical-align:-.28em; }

/* ===== el cartel del logro ===== */
.logro-cara{ display:flex; align-items:center; gap:.8rem; margin:.6rem 0 .2rem; }
.logro-cara .disco{
  content:""; width:4.4rem; height:4.4rem; flex:none; border-radius:50%;
  background:#17113a center/72% no-repeat;
  background-image:var(--dibujo, none);
  box-shadow:inset 0 0 0 3px var(--oro-2), 0 0 0 3px rgba(0,0,0,.5), 0 0 26px 2px rgba(255,209,102,.45);
}
.logro-nombre{ display:block; font-family:var(--display); font-size:1.45rem; line-height:1.1;
               color:#fff; text-shadow:0 2px 0 rgba(0,0,0,.45); }
.logro-pide{ display:block; font-size:.95rem; line-height:1.3; color:#bfd0ff; margin-top:.15rem; }

/* ===== el aviso de logro nuevo =====
   Un regalo rojo en la esquina de la chapa mientras quede alguno sin ver, y el
   sello «Nuevo» en cada medalla que no se haya tocado todavía (Remi, sesión 69). */
#btn-logros{ position:relative; overflow:visible; }
/* El regalo es el dibujo que trajo Remi (sesión 83), no el cuadrito rojo con
   lazo que se pintaba con CSS. Va en la esquina de ARRIBA A LA IZQUIERDA de la
   chapa, como él lo puso; los otros tres colores que dibujó están en
   dibujos/ui/candidatas/regalos/, por si algún día se cambia. */
.regalo{
  position:absolute; top:-1.35rem; left:-1.4rem; width:1.5rem; height:1.5rem;
  background:url("/dibujos/ui/regalo.webp") center/contain no-repeat;
  filter:drop-shadow(0 2px 1px rgba(0,0,0,.6)) drop-shadow(0 0 7px rgba(255,209,102,.45));
  pointer-events:none;
}
.regalo[hidden]{ display:none; }
/* En el móvil las chapas van más apretadas y el regalo se comía la L de
   «Logros»: ahí es un poco más pequeño y se sube un pelo más. */
@media (max-width:46rem){
  .regalo{ top:-.9rem; left:-1.35rem; width:1.25rem; height:1.25rem; }
}
/* Lo mismo en «Tu personaje» (sesión 181): el sello «Nuevo» en su chapa mientras haya un
   personaje o una tarjeta que el rango te haya abierto y aún no hayas ido a ver, y en la
   carta de cada uno de ellos la vez que lo ves. */
#btn-personaje{ position:relative; overflow:visible; }
#btn-personaje .sello-nuevo{ top:-1.25rem; right:-1.1rem; font-size:.62rem; pointer-events:none; }
#btn-personaje .sello-nuevo[hidden]{ display:none; }
@media (max-width:46rem){
  #btn-personaje .sello-nuevo{ top:-.95rem; right:-.9rem; font-size:.55rem; padding:0 .25rem; }
}
.carta-col, .tipo-tarjeta{ position:relative; }
.carta-col .sello-nuevo, .tipo-tarjeta .sello-nuevo{ z-index:1; }
.medalla{ position:relative; }
.medalla.nuevo{ box-shadow:0 0 0 2px var(--no), inset 0 0 0 2px rgba(255,255,255,.18); }
.medalla.nuevo.puesta{ box-shadow:0 0 0 3px var(--oro), inset 0 0 0 2px rgba(255,255,255,.2); }
.sello-nuevo{
  position:absolute; top:-.35rem; right:-.25rem; font-style:normal;
  font-family:var(--rotulo); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:#fff; background:linear-gradient(180deg,#ff6a5e,#c81f14);
  padding:.05rem .35rem; border-radius:.35rem; box-shadow:0 0 0 2px #2a0603;
}

/* los logros (hoja propia) y las cartas (hoja propia) */
.familia{ font-family:var(--rotulo); font-size:1rem; letter-spacing:.05em; color:var(--oro);
          margin:1rem 0 .45rem; }
.familia:first-child{ margin-top:0; }
.medallas{ display:grid; grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr)); gap:.5rem; }
.medalla{ display:flex; gap:.55rem; align-items:center; padding:.45rem .55rem; border-radius:.7rem;
          font:inherit; text-align:left; border:0; color:#fff;
          background:linear-gradient(160deg,#3a2f6b,#221a44);
          box-shadow:0 0 0 2px rgba(0,0,0,.5), inset 0 0 0 2px rgba(255,255,255,.14); }
.medalla.tiene{ cursor:pointer; }
/* la que llevas de título va con su marco de oro: cualquiera de los logros vale */
.medalla.puesta{ box-shadow:0 0 0 3px var(--oro), inset 0 0 0 2px rgba(255,255,255,.2); }
.medalla.rango::before{ background:radial-gradient(circle at 34% 28%,#dff0ff,#6f8fd0 55%,#26386e); }
/* La medalla: el dibujo de la familia dentro de un disco oscuro con aro de oro
   (sesión 86). El disco va oscuro y no dorado porque la mitad de los dibujos son
   dorados o claros y encima del oro se perdían; probado a 35 px, que es el
   tamaño de verdad. El dibujo lo pone el juego en `--dibujo`. */
.medalla::before{
  content:""; width:2.2rem; height:2.2rem; flex:none; border-radius:50%;
  background:#17113a center/72% no-repeat;
  background-image:var(--dibujo, none);
  box-shadow:inset 0 0 0 2px var(--oro-2), 0 0 0 3px rgba(0,0,0,.5), 0 3px 6px rgba(0,0,0,.45);
}
.medalla > div{ min-width:0; }
/* el nombre del logro, en la de leer y sin tanta negrita: en la de rótulos no
   se leía (Remi, sesión 56) */
.medalla b{ display:block; font-family:var(--texto); font-weight:600; font-size:.95rem;
            line-height:1.2; letter-spacing:.01em; }
.medalla span{ display:block; font-size:.8rem; color:#d5cdf0; line-height:1.3; }
.medalla:not(.tiene){ filter:grayscale(1); opacity:.55; }


/* ===== Tu personaje =====
   El cromo que llevas puesto arriba, las tres tarjetas al lado y debajo los
   dieciséis, con las mismas cartas que la colección de sospechosos. */
.elegido{ display:flex; align-items:stretch; gap:.7rem; margin:.2rem 0 1rem; }
.elegido .cromo{ flex:0 0 auto; min-width:0; margin:0; flex-direction:row; align-items:center;
                 gap:1rem; text-align:left; padding:.6rem .9rem; }
/* el título y las estrellas van en una sola línea cada uno: apretados entre la
   carta y la ficha se partían en tres renglones y las estrellas se cortaban */
.elegido .cromo .titulo-jug{ white-space:nowrap; }
.elegido .cromo .estrellas{ flex:none; }
.elegido .cromo .marco{ --alto-cromo:9.6rem; margin:0; }
.elegido .cromo .datos-cromo{ align-items:flex-start; }
/* El nombre va al lado de la carta aquí también, como en todas las demás
   apariciones: es el sitio fijo donde mirarlo (Remi, sesión 82). En la chapa de
   la tarjeta se queda además escrito, que aquí la carta es grande y se lee; en
   las pequeñas la chapa va en blanco porque el nombre saldría a 6 px. */
.tarjetas-tipo{ display:flex; flex:none; flex-direction:column; justify-content:center; gap:.35rem; }

/* ===== la ficha del jugador =====
   Lo que llevas hecho, al lado de tu carta. Cada dato es una chapita hundida
   en el panel, con el número en la tipografía de los títulos y el rótulo
   debajo; el último logro va entero abajo, con la medalla de siempre. */
.fichaje{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column;
          justify-content:center; gap:.45rem; }
.fichaje .datos{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.4rem; }
.fichaje .dato{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.02rem; padding:.3rem .35rem .35rem; border-radius:.6rem; min-width:0;
  background:rgba(0,0,0,.22); box-shadow:inset 0 0 0 2px rgba(255,255,255,.12);
}
.fichaje .dato b{
  display:flex; align-items:center; gap:.2rem; min-width:0;
  font-family:var(--display); font-size:1.45rem; line-height:1.05; color:#fff;
  text-shadow:0 2px 0 rgba(0,0,0,.45);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
.fichaje .dato span{ font-family:var(--rotulo); font-size:.74rem; letter-spacing:.04em;
                     line-height:1.05; color:#bfd0ff; text-align:center; }
.fichaje .dato.oro b{ color:var(--oro); }
.fichaje .dato.si b{ color:var(--si); }
.fichaje .dato.no b{ color:var(--no); }
.fichaje .dato.texto b{ font-size:1.1rem; }
.fichaje .dato .ficha{ width:1rem; height:1rem; flex:none; }
.fichaje .ultimo-logro{
  display:flex; align-items:center; gap:.45rem; min-width:0;
  padding:.25rem .45rem; border-radius:.6rem;
  background:rgba(0,0,0,.22); box-shadow:inset 0 0 0 2px rgba(255,255,255,.12);
}
.fichaje .ultimo-logro .disco{ width:1.7rem; height:1.7rem; flex:none; border-radius:50%;
  background:#17113a center/74% no-repeat;
  background-image:var(--dibujo, none);
  box-shadow:inset 0 0 0 2px var(--oro-2), 0 0 0 2px rgba(0,0,0,.5); }
.fichaje .ultimo-logro div{ min-width:0; }
.fichaje .ultimo-logro small{ display:block; font-family:var(--rotulo); font-size:.64rem;
                              letter-spacing:.06em; line-height:1.1; color:var(--oro); }
.fichaje .ultimo-logro b{ display:block; font-family:var(--display); font-size:.92rem;
                          line-height:1.15; color:#fff; text-shadow:0 2px 0 rgba(0,0,0,.45);
                          white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fichaje .ultimo-logro > div > span{ display:block; font-size:.72rem; line-height:1.2;
                                     color:#bfd0ff; white-space:nowrap; overflow:hidden;
                                     text-overflow:ellipsis; }
.fichaje .ultimo-logro.vacio .disco{ background:rgba(255,255,255,.14); box-shadow:none; }
.tipo-tarjeta{
  display:flex; flex-direction:column; align-items:center; gap:.05rem;
  font-family:var(--rotulo); font-size:.95rem; letter-spacing:.06em; color:#8f9cd4;
  padding:.28rem .8rem; border:0; border-radius:.5rem; background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.1); cursor:pointer; font-weight:inherit;
}
.tipo-tarjeta small{ font-size:.74rem; letter-spacing:.04em; color:#7b87bd; }
.tipo-tarjeta.cerrada{ opacity:.5; cursor:default; }
.tipo-tarjeta.puesta{ color:var(--oro-tinta); background:linear-gradient(180deg,#ffe6a3,var(--oro-2));
                      box-shadow:0 3px 0 #8a6a15, inset 0 1px 0 rgba(255,255,255,.6); }
/* los botones se quedan a la vista aunque la lista sea larga. El fondo es
   macizo: en 360 se parten en dos filas y, con degradado, se veían las cartas
   colándose entre ellas. */
#personaje .botones{ position:sticky; bottom:-1.2rem; margin-top:.9rem;
  padding:.7rem 0 1.2rem; background:#171d47;
  box-shadow:0 -10px 12px -6px rgba(23,29,71,.95); }
#personaje .botones .principal{ flex:1 1 8rem; }

/* la colección: cartas de verdad, grandes y sin líneas que las separen. Los
   sellos de 2,6 rem no se veían (Remi, sesión 55). */
.cartas-col{ display:grid; grid-template-columns:repeat(auto-fill,minmax(7.2rem,1fr)); gap:.6rem; }
/* La colección va en TRES columnas siempre, porque cada personaje ocupa una fila
   entera: su cara de salida, la mutada y la bestia (sesión 82). Con las columnas
   automáticas, en el escritorio salían cuatro y la fila de cada uno se partía
   por la mitad: Alicia empezaba en una fila y su bestia acababa en la siguiente. */
#ver-caras .cartas-col{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.carta-col{
  display:flex; flex-direction:column; align-items:center; gap:.2rem; cursor:pointer;
  font:inherit; text-align:center; padding:.45rem .4rem .5rem; border:0; border-radius:.8rem;
  color:#eaf0ff; background:linear-gradient(160deg,var(--panel),var(--panel-2));
  box-shadow:0 0 0 3px rgba(0,0,0,.5), inset 0 0 0 2px var(--panel-luz), 0 6px 12px -8px #000;
}
/* La casilla de la rejilla es el mismo hueco que el de la tarjeta, con la misma
   forma, y el personaje se coloca dentro con sus mismos tres números. Así los
   dieciséis salen con la cabeza al mismo tamaño y lo que se sale se recorta,
   igual que en la carta (sesión 70). Sin esto, con dibujos que van del 0,65 al
   1,20 de proporción, unos salían enormes y otros diminutos. */
.carta-col .foto{ display:block; position:relative; overflow:hidden;
                  width:100%; aspect-ratio:.78; border-radius:.6rem;
                  background:rgba(255,255,255,.16); box-shadow:inset 0 0 0 2px rgba(255,255,255,.3); }
.carta-col .foto img{ position:absolute; left:var(--l,0%); bottom:var(--b,0%);
                      width:var(--w,100%); max-width:none; height:auto; display:block; }
.carta-col .hueco{ width:60%; height:60%; border-radius:50%;
                   box-shadow:inset 0 0 0 3px rgba(255,255,255,.3); }
.carta-col b{ font-family:var(--display); font-size:.95rem; line-height:1.1; color:#fff; }
.carta-col small{ display:block; text-align:center; line-height:1.1;
                  font-family:var(--rotulo); font-size:.78rem; color:#bfd0ff; }
/* el cerrado por rango dice los puntos y, debajo y más flojo, cómo se llama.
   El precio en fichas, en cambio, va en una línea con su hueso al lado. */
.carta-col small small{ display:block; font-size:.86em; color:#8f9cd4; }
.carta-col.puesta{ box-shadow:0 0 0 3px #fff, 0 0 0 6px var(--si), 0 0 18px 2px rgba(63,212,122,.5); }
.carta-col.comprar{ background:linear-gradient(160deg,#7a6320,#3a2d08); }
.carta-col.comprar small{ color:var(--oro); }
.carta-col.cerrada, .carta-col.cara-cara{ filter:grayscale(1); opacity:.55; cursor:default; }

/* lo que paga el logro: en el cartel, debajo de lo que pedía; y en la lista,
   pegado a la frase, para que se vea lo que queda por cobrar (sesión 87) */
.logro-premio{ display:block; margin-top:.25rem; font-family:var(--display);
               font-size:1.05rem; color:var(--oro); }
.logro-premio[hidden]{ display:none; }
.medalla .premio{ display:inline; font-family:var(--display); font-weight:400;
                  font-size:.9em; color:var(--oro); white-space:nowrap; }

/* los logros que se han ganado y no llevan cartel propio */
.logro-mas{ margin:.6rem 0 0; text-align:center; font-family:var(--rotulo);
            font-size:.92rem; letter-spacing:.03em; color:var(--oro); }

/* cómo se juega */
.ayuda-cab{ display:flex; align-items:center; gap:.7rem; margin:0 0 .8rem; }
.ayuda-cab .perro{ width:4.6rem; height:4.6rem; flex:none; }
/* Todas las láminas ocupan la misma casilla y se apilan: la que no toca se
   esconde sin salirse del sitio, así la hoja mide siempre lo mismo y al pasar
   de una a otra no se mueve nada (Remi, sesión 56). */
.lamina{ display:flex; flex-direction:column; visibility:hidden; margin:0; position:relative;
         padding:.9rem .8rem .8rem; border-radius:.8rem;
         background:rgba(0,0,0,.28); box-shadow:inset 0 0 0 2px rgba(255,255,255,.16); }
.lamina.puesta{ visibility:visible; }
.lamina::before{ content:attr(data-paso); position:absolute; top:.15rem; right:.6rem;
                 font-family:var(--display); font-size:2.2rem; line-height:1; color:var(--oro);
                 opacity:.55; }
/* todas las láminas miden lo mismo: al pasar de una a otra no se mueve nada
   (Remi, sesión 56) */
.laminas{ display:grid; }
.lamina{ grid-area:1/1; }
.lamina .dibujo{ display:flex; flex-direction:column; align-items:center; gap:.6rem;
                 flex:1 1 auto; min-height:11rem; justify-content:center; margin:0 0 .7rem; }
.lamina figcaption{ font-family:var(--rotulo); font-size:1.15rem; line-height:1.35;
                    text-align:center; min-height:3.2em; }
.fila-retratos{ display:flex; gap:.5rem; }
/* Las caras del duelo vienen recortadas y con contorno blanco, así que detrás va
   un disco de color como el de la ficha del plano, no blanco (sesión 82). */
.fila-retratos img{ width:4rem; height:4rem; border-radius:50%; background:#4c5c9c;
                    object-fit:cover;
                    box-shadow:0 0 0 3px var(--agua), 0 0 0 5px rgba(0,0,0,.5); }
.fila-retratos.ganada img{ box-shadow:0 0 0 3px var(--si), 0 0 0 5px rgba(0,0,0,.5); }
.mini{ display:grid; grid-template-columns:repeat(4,2.2rem); grid-auto-rows:2.2rem; gap:2px;
       padding:2px; border-radius:.3rem; background:rgba(0,0,0,.5); }
.mini i{ background:#dfe7f5; position:relative; border-radius:.1rem; }
.mini i.x::before, .mini i.x::after{ content:""; position:absolute; inset:22% 8%; top:48%;
                                     border-top:3px solid var(--no); transform:rotate(45deg); }
.mini i.x::after{ transform:rotate(-45deg); }
.mini i.o::before{ content:""; position:absolute; inset:18%; border:3px solid var(--si);
                   border-radius:50%; }
.mini i.clavo{ display:flex; align-items:center; justify-content:center;
               box-shadow:inset 0 0 0 3px var(--si); }
.mini i.clavo.elegida{ box-shadow:inset 0 0 0 3px var(--agua); }
.mini i.clavo.mal{ box-shadow:inset 0 0 0 3px var(--no); }
.mini i.clavo img{ width:90%; height:90%; border-radius:50%; background:#4c5c9c;
                   object-fit:cover; }
.tres-cartas{ display:flex; gap:.5rem; }
.minicarta{ display:block; width:2.9rem; height:4.1rem; border-radius:.35rem;
            background:linear-gradient(160deg,var(--m1),var(--m2));
            box-shadow:0 0 0 3px #fff, 0 0 0 5px rgba(0,0,0,.55); }
.minicarta.salas{ --m1:var(--salas-1); --m2:var(--salas-2); }
.minicarta.objetos{ --m1:var(--objetos-1); --m2:var(--objetos-2); }
.minicarta.lineas{ --m1:var(--lineas-1); --m2:var(--lineas-2); }
.minicarta.grande{ width:3.6rem; height:5rem; }
.dos-montones{ flex-direction:row !important; align-items:center; gap:.7rem !important;
               flex-wrap:wrap; }
.flecha{ font-family:var(--display); font-size:1.6rem; color:var(--oro); }
.flecha.abajo{ line-height:.6; }
#descarte-demo{ position:relative; display:flex; flex-direction:column;
                align-items:center; justify-content:flex-end; gap:.15rem; padding-bottom:.2rem; width:3.4rem; height:4.8rem; flex:none;
  border-radius:.5rem; display:flex; flex-direction:column; align-items:center;
  justify-content:flex-end; padding-bottom:.3rem; color:#fff;
  box-shadow:0 0 0 3px #fff, 0 0 0 5px rgba(0,0,0,.55); }
#descarte-demo{ background:linear-gradient(160deg,#6a5f8c,#332c4a); }
#descarte-demo .cuenta{ font-family:var(--display); font-size:1rem;
  background:rgba(0,0,0,.5); border-radius:1rem; padding:0 .4rem; }
#descarte-demo .rotulo{ font-family:var(--rotulo); font-size:.6rem;
  letter-spacing:.1em; text-transform:uppercase; }
.pie-dibujo{ font-family:var(--rotulo); font-size:1.05rem; margin:.15rem 0 0; color:#bfd0ff;
             text-align:center; }
.pie-dibujo b{ font-family:var(--display); color:#fff; }
.pie-dibujo.perder{ color:var(--no); }
.sello-ok{ font-family:var(--display); font-size:.8rem; letter-spacing:.14em; color:var(--si);
           border-radius:.3rem; padding:.1em .5em; display:inline-block;
           box-shadow:inset 0 0 0 3px var(--si); }
.cuenta-demo{ font-family:var(--rotulo); font-size:1.1rem; line-height:1.7; margin:0;
              text-align:center; }
.cuenta-demo b{ font-family:var(--display); font-size:1.6rem; }
.cuenta-demo .mas{ color:var(--si); }
.cuenta-demo .menos{ color:var(--no); }
.cuenta-demo small{ display:block; font-family:var(--texto); font-size:.85rem; color:#bfd0ff; }
.perro-grande{ width:9rem; height:9rem; }
.ayuda-pie{ display:flex; align-items:center; justify-content:space-between; gap:.6rem;
            margin:.9rem 0 0; }
.cuenta-pasos{ font-family:var(--rotulo); font-size:1rem; color:#bfd0ff; }

/* la barra de deslizar, con estilo: la del sistema desentona en una mesa de juego */
.hoja, #tarjetas, #rivales, #mano{ scrollbar-width:thin; scrollbar-color:var(--oro-2) rgba(0,0,0,.35); }
.hoja::-webkit-scrollbar, #tarjetas::-webkit-scrollbar,
#rivales::-webkit-scrollbar, #mano::-webkit-scrollbar{ width:.55rem; height:.55rem; }
.hoja::-webkit-scrollbar-track, #tarjetas::-webkit-scrollbar-track,
#rivales::-webkit-scrollbar-track, #mano::-webkit-scrollbar-track{
  background:rgba(0,0,0,.35); border-radius:1rem; }
.hoja::-webkit-scrollbar-thumb, #tarjetas::-webkit-scrollbar-thumb,
#rivales::-webkit-scrollbar-thumb, #mano::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--oro),var(--oro-2)); border-radius:1rem;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.4); }

/* ===== la escalera de anchos (sesión 55) =====
   Antes había dos mundos, el de escritorio y el de menos de 62rem, y entre medias
   se deshacía. Ahora son cuatro peldaños, probados a 1400, 1200, 1024, 900, 768,
   600, 480, 390 y 360. */

/* dos columnas: tú y el juego. El oponente pasa a una tira encima de la mano. */
@media (max-width:82rem) and (min-width:62.001rem){
  /* El OPONENTE se va a la columna de la izquierda, debajo de los tuyos, y el
     plano se queda con las dos filas del medio. Antes el oponente cruzaba la
     columna del plano en horizontal y le robaba su altura: el plano salía a
     286 px con un hueco vacío mayor que él justo al lado (sesión 80). Encima
     ahora los dos bandos se enseñan igual, en columna, y se comparan. */
  .duelo{
    grid-template-columns:13.5rem minmax(0,1fr);
    grid-template-rows:auto auto minmax(0,1fr) minmax(0,1fr) auto;
    grid-template-areas:
      "barra  barra"
      "gente  marcadores"
      "gente  tablero"
      "rival  tablero"
      "pie    pie";
  }
  /* la columna del medio deja de ser una caja y sus tres piezas se colocan solas
     en la rejilla: así el oponente puede meterse entre el plano y la mano */
  .centro{ display:contents; }
  .marcadores{ grid-area:marcadores; }
  .caja-plano{ grid-area:tablero; }
  /* aquí la columna de la izquierda llega hasta abajo, así que la fila de la
     mano no puede meterse debajo: se queda en su sitio */
  /* aquí no hay bloque que valga: cada fila ocupa su columna */
  .barra, .marcadores, .pie{ --w:100%; }
  .pie{ grid-area:pie; height:13.5rem; display:flex; gap:.6rem; align-items:stretch; }
  .barra{ flex-wrap:wrap; }
  #mano{ flex:1 1 auto; }
  /* el descarte, apartado de la mano: a 1024 quedaban 27 px y parecía una carta
     más de la mano (sesión 79) */
  .montones{ flex:none; align-self:flex-end; margin-left:2.6rem; }
  .mandos{ flex:none; width:11.4rem; align-self:stretch; justify-content:flex-end; }
  /* aquí la columna de la izquierda llega hasta abajo del todo: no hay por qué
     encajarla en la banda del plano, y así los cinco sospechosos caben sin
     encogerse ni deslizarse (Remi, sesión 60) */
  .gente{ margin-block:0; }
  .rival{ grid-area:rival; flex-direction:column; align-items:flex-start;
          gap:.4rem; margin:0; padding:0; min-height:0; }
  .rival #rivales{ align-items:stretch; }
  .rival .suyo-ficha{ width:100%; }
  .rival .cromo{ flex-direction:row; align-items:center; gap:.5rem; margin:0; flex:none;
                 padding:.35rem .6rem; text-align:left; }
  .rival .cromo .marco{ --alto-cromo:3.6rem; margin:0; }
  .rival .cromo .marco .nombre-chapa{ display:none; }   /* la chapa ya no da para el nombre */
  .rival .cromo .datos-cromo{ align-items:flex-start; }
  .rival .cromo .estrellas{ margin:.1rem 0 0; }
  .rival .cromo .estrellas i{ width:.8rem; height:.8rem; }
  /* En esta banda los dos bandos van en la MISMA columna, uno debajo del otro, y
     ahí no caben diez tarjetas con nombre y además un plano grande: a 1280x720
     se quedaban tres cortadas. Así que aquí también son SOLO LA CARA, como en
     el móvil, repartidas en rejilla (sesión 80). El nombre y el sitio siguen
     saliendo al dejar el ratón encima. */
  #tarjetas, #rivales{ display:flex; flex-direction:row; flex-wrap:wrap;
                       align-items:flex-start; align-content:flex-start;
                       justify-content:flex-start; gap:.35rem;
                       overflow:hidden; flex:0 1 auto; min-height:0; padding:0; margin:0;
                       /* El ancho de la tira lleva `calc(100% + 14px)` de base —el hueco del
                          anillo de la elegida— y aquí el margen negativo que lo recogía está
                          puesto a cero: la tira se salía 14 px de su columna y, pegada al
                          borde, la primera cara asomaba fuera (Remi, sesión 120). */
                       width:100%; }
  .tarjeta, .suyo-ficha{ flex:0 1 3.7rem; width:auto; min-width:0; max-height:none;
                         padding:.25rem; gap:0; border-radius:.7rem; }
  .tarjeta .cuerpo, .suyo-ficha .cuerpo{ display:none; }
  .tarjeta .token, .suyo-ficha .token{ width:100%; height:auto; max-height:none;
                                       max-width:none; aspect-ratio:1; font-size:1.2rem; }
  .gente .cromo{ flex-direction:row; align-items:center; gap:.5rem; margin:0 0 .4rem;
                 padding:.35rem .6rem; text-align:left; }
  .gente .cromo .marco{ --alto-cromo:3.6rem; margin:0; }
  .gente .cromo .marco .nombre-chapa{ display:none; }
  .gente .cromo .datos-cromo{ align-items:flex-start; }
  .carta{ flex:0 1 11rem; }
  .mandos{ width:10rem; }
  .montones{ width:auto; }
}

/* ===== TUMBADA: la tablet apaisada (sesión 121) =====
   Remi juega el duelo en el iPad tumbado, y ahí la banda de dos columnas dejaba el plano con
   las sobras: la fila de abajo —mano, descarte y «Cerrar mi turno»— se comía 185 px de alto y
   el plano se quedaba en 315 px en un iPad Mini apaisado, 147 en una tablet de 1024×600
   (casillas de 21 px), con media pantalla vacía a los lados.
   En una pantalla tumbada el alto es lo que falta y el ancho lo que sobra, así que LA FILA DE
   ABAJO SE PONE DE PIE: pasa a ser una TERCERA COLUMNA a la derecha —las tres cartas una
   encima de otra, el descarte en tira y el botón al final— y el plano se queda con todo el
   alto de la mesa. La izquierda sigue como en la banda: tú arriba, el oponente debajo.
   Lo marca la clase `tumbada`, que pone `assets/duelo.js` MIDIENDO (lo que se ve de alto menos
   la cabecera, que se lleva de 59 a 101 px según el ancho), no una `@media`: el navegador del
   iPad dice más alto del que se ve (sesión 120). Y va DENTRO de la banda de dos columnas: fuera
   de ella la clase no pinta nada, ni en el escritorio ancho ni en el móvil.
   El plano sigue midiéndose en píxeles sobre `.caja-plano`, que aquí es un hueco de la rejilla
   —dos filas de `minmax(0,1fr)`— y no depende de lo que lleve dentro: la regla de la sesión 120. */
@media (max-width:82rem) and (min-width:62.001rem){
  .duelo.tumbada{
    grid-template-columns:13.5rem minmax(0,1fr) 15rem;
    /* la fila del oponente un poco mayor: la tuya se lleva además la de los marcadores, y con
       cinco por lado (el jefe) al oponente le faltaban cuatro píxeles en un iPad Mini */
    grid-template-rows:auto auto minmax(0,1fr) minmax(0,1.25fr);
    grid-template-areas:
      "barra  barra       barra"
      "gente  marcadores  pie"
      "gente  tablero     pie"
      "rival  tablero     pie";
    gap:.5rem; padding:.5rem .6rem .6rem;
  }
  .tumbada .marcadores{ margin-bottom:.35rem; }
  /* el cartel del turno, de su tamaño: con el mínimo de 18 rem, las fichas y el bote no
     cabían en la columna del medio a 1024 px */
  .tumbada #turno-fijo{ width:auto; min-width:0; max-width:100%; }
  .tumbada .caja-plano{ margin-top:.3rem; }   /* aire para la pestaña del caso */
  /* aquí manda el alto: el marco, con los números del borde (sesión 181), va más ceñido */
  .tumbada .expediente{ --marco:.5rem; --num:.95rem; }

  /* ---- la columna de la derecha: mano, descarte y botón, uno debajo de otro ---- */
  .tumbada .pie{ grid-area:pie; display:flex; flex-direction:column; align-items:stretch;
                 height:auto; min-height:0; gap:.45rem; margin:0; }
  .tumbada #mano{ flex:1 1 auto; display:flex; flex-direction:column; align-items:stretch;
                  justify-content:stretch; gap:.5rem; height:auto; min-height:0;
                  padding:0; margin:0; overflow:visible; }
  /* De pie y en 15 rem una carta es más ancha que alta: el dibujo se quita —como en el móvil
     (sesión 81)— y la carta se queda en LO QUE DICE, la banda de la familia y el texto. Las
     tres miden lo mismo y se reparten el alto; si una pista no cupiera, se desliza dentro de
     su carta en vez de pisar el botón. */
  .tumbada .carta{ flex:1 1 0; min-width:0; min-height:0; padding:.3rem; gap:.2rem;
                   box-shadow:0 0 0 3px #fff, 0 0 0 5px rgba(0,0,0,.6), 0 10px 16px -10px #000; }
  /* solo desplazada, SIN escala: escalar una carta con dibujo dentro obliga a Safari a
     volver a rasterizar la imagen y se ve como un parpadeo al elegirla (Remi, sesión 121) */
  .tumbada .carta.elegida{ transform:translateX(-6px);
                           box-shadow:0 0 0 3px #fff, 0 0 0 6px var(--oro),
                                      0 0 22px 3px rgba(255,209,102,.7), 0 14px 20px -10px #000; }
  .tumbada .carta:hover{ transform:translateX(-3px); }
  .tumbada .carta.fuera{ transform:translateX(2.5rem) rotate(6deg) scale(.9); }
  .tumbada .carta .ventana{ display:none; }
  .tumbada .carta .banda{ font-size:.66rem; padding:.15rem .2rem; }
  .tumbada .carta p{ flex:1 1 auto; min-height:0; overflow:auto; display:grid; align-content:center;
                     font-size:.8rem; padding:.3rem .4rem .35rem; }
  /* el descarte, la misma tira boca arriba del móvil: de pie no cabe una carta entera, y lo
     que hay que hacer con ella es LEERLA (sesión 70) */
  .tumbada .montones{ flex:none; width:auto; height:3.4rem; max-height:none; margin:0;
                      align-self:auto; justify-self:auto; align-items:stretch; }
  .tumbada #descarte{ position:relative; flex:1 1 auto; width:auto; min-width:0; height:100%;
                      gap:0; align-items:stretch; justify-content:center; }
  .tumbada #descarte .rotulo{ position:absolute; top:-.62rem; left:.5rem; z-index:2; display:block;
                              font-size:.62rem; letter-spacing:.14em; padding:0 .25rem;
                              border-radius:.3rem; background:var(--noche-2); color:#b9c8f5; }
  .tumbada #descarte.vacio .rotulo{ top:50%; left:50%; transform:translate(-50%,-50%);
                                    background:none; font-size:.72rem; letter-spacing:.18em;
                                    color:var(--oro); opacity:.75; }
  .tumbada #descarte .carta.boca-arriba{ flex:1 1 auto; width:auto; height:auto; min-width:0;
                                         max-width:none; max-height:none; aspect-ratio:auto;
                                         padding:.25rem; gap:.2rem; flex-direction:row;
                                         align-items:stretch; transform:none; }
  .tumbada #descarte .carta.boca-arriba.hueco{ background:none; box-shadow:none;
                                               border:2px dashed rgba(255,209,102,.45); }
  .tumbada #descarte .carta.boca-arriba .banda{ flex:none; font-size:0; width:.45rem; padding:0; }
  .tumbada #descarte .carta.boca-arriba p{ flex:1 1 auto; margin:0; text-align:left;
                                           font-size:.78rem; overflow:hidden; }
  .tumbada .cambios-quedan{ padding:.02rem .22rem .06rem .18rem; }
  .tumbada .cambios-quedan b{ font-size:.72rem; }
  /* «Cerrar mi turno» al final de la columna, que es donde acaba el turno. En la banda de dos
     columnas iba el primero (`order:-1`) porque la fila era horizontal. */
  .tumbada .mandos{ order:0; flex:none; width:auto; align-self:stretch; flex-direction:row;
                    align-items:stretch; justify-content:stretch; }
  .tumbada .mandos .principal{ flex:1 1 auto; font-size:.9rem; min-height:2.5rem; min-width:0;
                               padding:0 .3rem; border-width:14px; border-image-slice:20 fill;
                               border-image-width:14px; }
  /* «Cambiar esta carta» se posa DENTRO de la carta elegida, sobre su banda (lo coloca
     `pegar` en duelo.js): con las cartas una encima de otra, «encima de la carta» era encima
     del texto de la de arriba. Va pequeño, como en el móvil, para no llegar al texto. */
  .tumbada #btn-cambiar.flotante{ min-height:2.2rem; font-size:.84rem; letter-spacing:0;
                                  padding:0 .45rem; border-width:13px; border-image-width:13px; }
}
/* La columna de la izquierda, con alto de sobra (sesión 121, Remi: «los sospechosos no tienen
   nombre ni letra, el espacio de la izquierda está casi vacío y el jugador y los sospechosos
   son muy pequeños»): los sospechosos con su nombre y su sitio, uno debajo de otro como en el
   escritorio, y el cromo del jugador mayor. Con la mesa por debajo de 36 rem (una tablet de
   1024×600) se quedan en solo la cara, que es lo que cabe. Con cinco por lado en un iPad Mini
   las tarjetas encogen hasta 2,2 rem y, si aun así no caben, la tira se desliza. */
@media (max-width:82rem) and (min-width:62.001rem){ @container mesa (min-height:36rem){
  .tumbada #tarjetas, .tumbada #rivales{ flex-direction:column; flex-wrap:nowrap; align-items:stretch;
                                         gap:.25rem; flex:1 1 auto; min-height:0; overflow-y:auto;
                                         padding:0 4px 0 0; }
  .tumbada .tarjeta, .tumbada .suyo-ficha{ flex:0 1 auto; flex-direction:row; align-items:center;
                                           width:100%; min-height:2.2rem; max-height:3rem;
                                           padding:.25rem .5rem; gap:.5rem; border-radius:.7rem; }
  .tumbada .tarjeta .cuerpo, .tumbada .suyo-ficha .cuerpo{ display:block; min-width:0; }
  .tumbada .tarjeta .letra, .tumbada .suyo-ficha .letra{ display:none; }
  .tumbada .tarjeta .token, .tumbada .suyo-ficha .token{ width:auto; height:100%; max-height:2.4rem;
                                                         max-width:none; aspect-ratio:1; font-size:1rem; }
  .tumbada .tarjeta .quien, .tumbada .suyo-ficha b{ font-size:.92rem; line-height:1.1;
                                                    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .tumbada .tarjeta .donde, .tumbada .suyo-ficha .cuerpo > span{ font-size:.7rem; line-height:1.15;
                                                                 white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .tumbada .gente .cromo .marco, .tumbada .rival .cromo .marco{ --alto-cromo:4rem; }
  .tumbada .gente .cromo, .tumbada .rival .cromo{ padding:.3rem .5rem; margin:0 0 .35rem; }
  .tumbada .gente .cromo .nombre, .tumbada .rival .cromo .nombre{ font-size:.95rem; }
  .tumbada .gente .cromo .titulo-jug, .tumbada .rival .cromo .titulo-jug{ font-size:.76rem; }
}}
/* Con alto de sobra (un iPad de 10 pulgadas tumbado), las cartas recuperan su dibujo: el
   objeto o el plano de la sala dicen de qué habla la pista antes de leerla. Con menos alto
   (una tablet de 1024×600, un portátil de 720) se queda en la banda y el texto. */
@media (max-width:82rem) and (min-width:62.001rem){ @container mesa (min-height:40rem){
  .tumbada .carta .ventana{ display:grid; flex:1 1 auto; min-height:2.5rem; }
  .tumbada .carta p{ flex:none; }
}}

/* ===== el móvil: todo en columna ===== */
@media (max-width:62rem){
  .duelo{
    grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr) auto auto;
    grid-template-areas:"barra" "centro" "gente" "rival";
    gap:.4rem; padding:.55rem .5rem .6rem;
  }
  .datos{ font-size:.72rem; gap:.15rem .35rem; }
  /* la barra de arriba, en una sola fila: en el móvil cada renglón es plano */
  .barra, .marcadores, .pie{ --w:100%; }
  .barra{ gap:.3rem .4rem; flex-wrap:wrap; }
  .mandos-barra{ gap:.25rem; flex:1 1 100%; justify-content:space-between; }
  .chapa{ font-size:.66rem; letter-spacing:0; min-height:1.7rem; padding:0; border-width:8px;
          border-image-slice:20 fill; border-image-width:8px; flex:1 1 auto; min-width:0; }
  .mandos-barra{ flex-wrap:nowrap; }
  #turno-fijo{ font-size:.86rem; padding:.28em .5em; }
  .expediente{ --marco:.45rem; --num:.8rem; }
  .numeros .num{ font-size:.66rem; border-radius:.3rem; }
  /* el rótulo del caso asoma por encima del plano: si no se le deja hueco,
     choca con la fila de «Tienes / Tu turno / En juego» (Remi, sesión 70) */
  /* el aire para la pestaña del caso va en LA CAJA: la carpeta está fuera del flujo y un
     margen suyo rompería el centrado */
  .caja-plano{ margin-top:.55rem; }
  /* con el nivel delante (sesión 181) la pestaña es más larga: menos aire entre letras */
  .expediente::before{ top:-.75rem; font-size:.76rem; letter-spacing:.07em; padding:.14rem .75rem .18rem; }
  /* Los dos cromos, reducidos a lo que se mira de un vistazo: el retrato y las
     estrellas. El nombre y el título se cortaban («Golde», «El oponen») y
     robaban el ancho que necesitan las caras de los sospechosos. */
  .gente, .rival{ flex-direction:row; align-items:center; gap:.4rem; margin:0; padding:0; }
  /* Las dos filas de gente, con un suelo de alto desde el ancho de una tablet de pie (sesión
     121): es lo que miden de por sí con las caras a 3,7 rem, así que en Chromium no cambia
     nada; a un navegador que las deje a cero le dice que no. En el móvil no se pone: con cinco
     sospechosos a 360 px las caras encogen y el suelo le robaría al plano. */
  @media (min-width:46.001rem){ .gente, .rival{ min-height:5.2rem; } }
  .gente .cromo, .rival .cromo{ flex:none; flex-direction:column; align-items:center;
                                gap:.1rem; padding:.2rem .3rem; text-align:center; }
  .gente .cromo .nombre, .rival .cromo .nombre,
  .gente .cromo .titulo-jug, .rival .cromo .titulo-jug{ display:none; }
  .pie::before{ display:none; }
  #tarjetas, #rivales{ align-items:stretch; }
  .tarjeta, .suyo-ficha{ width:auto; }
  .cromo{ flex-direction:row; align-items:center; gap:.45rem; margin:0; flex:none;
          padding:.3rem .5rem; text-align:left; }
  .cromo .marco{ --alto-cromo:3.9rem; margin:0; }
  .cromo .marco .nombre-chapa{ display:none; }   /* ni en la de «Tu personaje»: 5 px */
  .cromo .nombre{ font-size:.9rem; }
  .cromo .titulo-jug{ font-size:.76rem; }
  .cromo .datos-cromo{ align-items:flex-start; }
  .cromo .estrellas{ margin:.1rem 0 0; }
  .cromo .estrellas i{ width:.72rem; height:.72rem; }
  /* EN EL MÓVIL, LOS SOSPECHOSOS SON SOLO LA CARA (Remi, sesión 76).
     El nombre y el sitio no hacían falta ahí —el nombre lo dicen las cartas y
     el sitio se ve en el plano— y con ellos las tiras se deslizaban: había que
     buscar a los tuyos. Sin texto caben los cinco de una vez, y el alto que
     sobra se lo queda el plano, que era lo pequeño. */
  #tarjetas, #rivales{ flex-direction:row; flex-wrap:nowrap; justify-content:center;
                       align-items:center; gap:.35rem; overflow:visible;
                       padding:.2rem 0; margin:0; }
  /* las caras se encogen hasta caber: con cinco y el cromo al lado, en 360 px
     no dan de sí a tamaño fijo */
  .tarjeta, .suyo-ficha{ flex:0 1 3.7rem; width:auto; min-width:0; max-height:none;
                         padding:.25rem; gap:0; border-radius:.7rem; }
  .tarjeta .cuerpo, .suyo-ficha .cuerpo{ display:none; }
  .tarjeta, .suyo-ficha{ flex-direction:column; }
  .tarjeta .letra, .suyo-ficha .letra{ display:block; }
  .tarjeta .token, .suyo-ficha .token{ width:100%; height:auto; max-height:none;
                                       max-width:none; aspect-ratio:1; font-size:1.2rem; }
  /* y el cromo se aparta un poco: en el móvil es un adorno al lado de los que
     hay que tocar */
  .gente .cromo .marco, .rival .cromo .marco{ --alto-cromo:3.4rem; margin:0; }
  /* las cinco estrellas se salían de la caja del cromo a 360 px */
  .gente .cromo .datos-cromo, .rival .cromo .datos-cromo{ min-width:0; overflow:hidden; }
  .gente .cromo .estrellas, .rival .cromo .estrellas{ flex-wrap:nowrap; gap:.08rem; }
  .gente .cromo .estrellas i, .rival .cromo .estrellas i{ width:.58rem; height:.58rem; }
  /* la fila de abajo se parte en dos renglones: la mano, y debajo los montones
     con «cerrar mi turno» al lado */
  .pie{ display:flex; flex-wrap:wrap; height:auto; gap:.4rem; }
  /* Las TRES cartas a la vez y más bajas: deslizar para leer una pista que hace
     falta para resolver era el peor sitio para esconder algo, y el alto que
     sobra se lo lleva el plano (Remi, sesión 78). */
  /* En el móvil la carta se queda en LO QUE DICE: la banda de la familia y el
     texto. El dibujo del objeto o el plano de la sala son un adorno bonito que
     aquí costaba 50 px de alto, y esos 50 px valen más en el plano (Remi,
     sesión 81). En escritorio el dibujo se queda. */
  /* La mano tenía el alto clavado y una pista de cuatro renglones —«Junto a un
     estante: Bruno, Carmen, Eduardo»— se salía de su recuadro. Ahora el alto es
     un MÍNIMO: si la pista es larga, la fila crece lo justo y el plano cede esos
     píxeles. Una pista que no se lee entera no vale de nada (Remi, sesión 70). */
  #mano{ flex:1 1 100%; min-height:5.8rem; height:auto; overflow:visible;
         justify-content:center; gap:.9rem; padding:0; margin:0; }
  /* Los marcos de las cartas (blanco y negro por fuera) son parte de la sombra y no
     cuentan para el hueco: con 6 px entre cartas se montaban unos sobre otros (Remi,
     sesión 102). Aquí van más finos, 3 + 2 px, y el hueco abre a 14 px. */
  .carta{ flex:1 1 0; min-width:0; padding:.3rem; gap:.2rem;
          box-shadow:0 0 0 3px #fff, 0 0 0 5px rgba(0,0,0,.6), 0 10px 16px -10px #000; }
  .carta.elegida{ box-shadow:0 0 0 3px #fff, 0 0 0 6px var(--oro), 0 0 22px 3px rgba(255,209,102,.7),
                              0 14px 20px -10px #000; }
  .carta .ventana{ display:none; }
  .carta .banda{ font-size:.62rem; padding:.15rem .2rem; }
  .carta p{ flex:1 1 auto; display:grid; align-content:center;
            font-size:.76rem; padding:.3rem .3rem .35rem; }
  .marcadores{ display:flex; flex-wrap:wrap; gap:.35rem; margin-bottom:.35rem; }
  /* el cartel del turno llevaba `width:min(26rem,100%)`, o sea todo el ancho:
     por eso se llevaba un renglón para él solo */
  #turno-fijo{ flex:1 1 auto; width:auto; min-width:0; order:0; }
  #bolsa, #fichas-tengo{ flex:1 1 auto; min-width:0; font-size:.78rem; padding:.28em .45em; }
  #bolsa::before{ width:1.05rem; height:1.05rem; }
  .montones{ flex:1 1 9rem; min-width:0; width:auto; height:3.2rem; max-height:none;
             align-self:auto; justify-self:auto; align-items:stretch; }
  /* el descarte boca arriba, en tira: en el móvil no cabe el dibujo, así que se
     queda la banda de la familia y el texto, que es lo que hay que leer */
  #descarte{ position:relative; flex:1 1 auto; width:auto; min-width:0; height:100%;
             gap:0; align-items:stretch; justify-content:center; }
  /* el rótulo va DENTRO, arriba a la izquierda: fuera y en diminuto dejaba una
     barra oscura que parecía un bache (Remi, sesión 78) */
  #descarte .rotulo{ position:absolute; top:-.62rem; left:.5rem; z-index:2;
                     font-size:.62rem; padding:0 .25rem; border-radius:.3rem;
                     background:var(--noche-2); color:#b9c8f5; }
  /* mientras no se ha soltado nada, el rótulo va en medio del hueco y la caja
     es un contorno de trazos: así se lee como un sitio que espera una carta y
     no como un botón apagado al lado del de verdad (sesión 79) */
  #descarte.vacio .rotulo{ top:50%; left:50%; transform:translate(-50%,-50%);
                           background:none; font-size:.72rem; letter-spacing:.18em;
                           color:var(--oro); opacity:.75; }
  #descarte .carta.boca-arriba.hueco{ background:none; box-shadow:none;
                                      border:2px dashed rgba(255,209,102,.45); }
  /* y los cromos se apartan de las caras: son otra cosa, no un sospechoso más */
  .gente .cromo, .rival .cromo{ margin-right:.35rem; }
  .gente .cromo .marco, .rival .cromo .marco{ --alto-cromo:2.9rem; }
  #descarte .carta.boca-arriba{ flex:1 1 auto; width:auto; height:auto; min-width:0;
                                max-width:none; max-height:none; aspect-ratio:auto;
                                padding:.25rem; gap:.2rem; flex-direction:row;
                                align-items:stretch; }
  #descarte .carta.boca-arriba .ventana{ display:none; }
  /* la banda no cabe de pie en la tira: se queda en franja de color, que ya
     dice la familia de un vistazo */
  #descarte .carta.boca-arriba .banda{ flex:none; font-size:0; width:.45rem; padding:0; }
  #descarte .carta.boca-arriba p{ flex:1 1 auto; margin:0; text-align:left; }
  .monton .cuenta{ font-size:1.1rem; padding:0 .35rem; }
  .monton .rotulo{ font-size:.55rem; }
  /* en la tira estrecha el rótulo es diminuto: la insignia se queda con su
     propio tamaño para poder leerse */
  .cambios-quedan{ padding:.02rem .22rem .06rem .18rem; }
  .cambios-quedan b{ font-size:.72rem; }
  .mandos{ flex:1 1 auto; width:auto; flex-direction:row; align-items:stretch; }
  #turno-fijo{ white-space:normal; }
  .mandos .principal{ flex:1 1 auto; }
  #rivales{ flex:1 1 auto; }
  /* la tira del oponente, con las mismas medidas que la tuya (Remi, sesión 58) */
  .suyo-ficha{ min-height:0; }
  /* OJO: el `fill` hay que repetirlo. Sin él, el centro del botón no se pinta y
     se ve el fondo de la página como un rectángulo azul (Remi, sesión 75). */
  button.principal{ font-size:.86rem; min-height:2.7rem; min-width:0; padding:0 .2rem;
                    border-width:14px; border-image-slice:20 fill; border-image-width:14px; }
  .cartas-col{ grid-template-columns:repeat(auto-fill,minmax(5.6rem,1fr)); gap:.45rem; }
  .elegido{ flex-direction:column; gap:.5rem; }
  .fichaje .datos{ gap:.3rem; }
  .fichaje .dato{ padding:.25rem .15rem .3rem; }
  .fichaje .dato b{ font-size:1.1rem; }
  .fichaje .dato.texto b{ font-size:.95rem; }
  .fichaje .dato span{ font-size:.68rem; }
  .fichaje .dato .ficha{ width:.8rem; height:.8rem; }
  .elegido .cromo{ gap:.8rem; }
  .elegido .cromo .marco{ --alto-cromo:7.2rem; }
  .tarjetas-tipo{ flex-direction:row; }
  .tipo-tarjeta{ flex:1; text-align:center; }
  /* En la tablet de pie sobra ancho (sesión 121, Remi; va al final del bloque del móvil porque las reglas de los cromos de arriba le ganarían): los cromos más grandes y con su nombre
     al lado, el tuyo a la izquierda de tu fila y el del oponente a la derecha de la suya. Caben
     en el alto de la fila (las caras miden 5,2 rem), así que el plano no pierde nada. */
  @media (min-width:46.001rem){
    .gente .cromo, .rival .cromo{ flex-direction:row; align-items:center; gap:.45rem;
                                  padding:.2rem .5rem; text-align:left; }
    .gente .cromo .marco, .rival .cromo .marco{ --alto-cromo:4.4rem; }
    .gente .cromo .nombre, .rival .cromo .nombre{ display:block; font-size:.95rem; }
    .gente .cromo .titulo-jug, .rival .cromo .titulo-jug{ display:block; font-size:.74rem; }
    .gente .cromo .estrellas i, .rival .cromo .estrellas i{ width:.66rem; height:.66rem; }
    /* y las caras CENTRADAS EN LA PÁGINA, no en lo que sobra al lado del cromo (Remi: «los
       suyos están en mi lado izquierdo y los míos en su lado derecho»): tres columnas con
       las de los lados iguales, el cromo en la suya y las caras en la del medio */
    .gente, .rival{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
                    align-items:center; gap:.4rem; }
    /* (todo en la fila 1 a mano: el cromo del oponente va antes que sus caras en la página,
       y colocado en la tercera columna, la rejilla mandaba las caras a una segunda fila) */
    .gente .cromo{ grid-area:1/1; justify-self:start; margin:0; }
    .rival .cromo{ grid-area:1/3; justify-self:end; margin:0; }
    .gente #tarjetas, .rival #rivales{ grid-area:1/2; width:auto; margin:0; flex:none; }
  }
}

/* ===== pantallas bajas: manda el plano y las tiras se encogen =====
   Desde 52rem de alto (antes 46): con cinco sospechosos, lo primero que tiene
   que encoger es el cromo del jugador, no las tarjetas (Remi, sesión 60). */
/* ---- Pantalla baja. Desde la sesión 99 los peldaños por alto son `@container mesa`: miden la
   MESA (lo que queda bajo la cabecera, sin el margen de la rejilla), no la ventana. Los 52rem
   se quedan como estaban sobre esa medida, así que entran unos 24 px antes que antes: justo la
   banda en la que cinco sospechosos no cabían por trece píxeles. ---- */
@container mesa (max-height:52rem){
  .cromo .marco{ --alto-cromo:3.4rem; }
  .cromo .marco .nombre-chapa{ display:none; }
  /* la mano se encoge, pero la carta tiene que seguir siendo una carta: más
     alta que ancha */
  #mano{ height:10.6rem; }
  .carta{ flex:0 1 8.8rem; min-width:0; }
  .carta .banda{ font-size:.72rem; }
  .carta p{ font-size:.8rem; padding:.3rem .35rem .35rem; }
  .pie{ height:auto; }
  .montones{ height:3.6rem; }
  .monton .rotulo{ display:none; }
  /* el del descarte sí se queda: desde que va boca arriba parece una carta más
     de la mano, y el rótulo es lo que dice que no lo es (sesión 70) */
  #descarte .rotulo{ display:block; }
  #tarjetas, #rivales{ gap:.3rem; }        /* con cinco, el hueco es lo que sobraba (sesión 99) */
  .tarjeta .token, .suyo-ficha .token{ width:2.2rem; height:2.2rem; }
  .estrellas i{ width:.7rem; height:.7rem; }
  button.principal{ min-height:2.4rem; }
}

/* Pantalla ancha pero baja (1024x800 y parecidas): ahí sigue mandando la
   colocación de escritorio, así que el descarte sigue siendo una CARTA y no la
   tira del móvil. Solo se encoge. */
/* Ancha-y-baja en la banda de dos columnas (1280x720): los dos bandos van en la misma
   columna y con cinco por lado a la del oponente le faltaban 3 px. La carta de jugador, un
   poco más baja, se los da (sesión 99). */
@media (max-width:82rem) and (min-width:62.001rem){ @container mesa (max-height:52rem){
  .rival .cromo .marco, .gente .cromo .marco{ --alto-cromo:3.2rem; }
  .rival{ gap:.3rem; }
}}
/* el tope de alto de la tarjeta, fuera del móvil: en el móvil la letra va debajo de la cara
   y el tope la recortaría */
@media (min-width:62.001rem){ @container mesa (max-height:52rem){
  #tarjetas .tarjeta, .suyo-ficha{ max-height:3.4rem; }
}}
@media (min-width:62.001rem){ @container mesa (max-height:52rem){
  /* aquí la fila de abajo no tiene alto fijo, así que la carta se lo daría ella
     sola y crecería sin freno: se le pone medida */
  .montones{ height:auto; }
  #descarte .carta.boca-arriba{ width:7.4rem; height:9.9rem; }
}}

/* Estrecha Y baja (un móvil de 640 px de alto): la mano se encoge un peldaño
   más, pero solo aquí. En una pantalla ancha y baja las tres cartas tienen
   sitio de sobra y estirarlas las dejaba más anchas que altas. */
@media (max-width:62rem){ @container mesa (max-height:52rem){
  #mano{ height:5.4rem; }
  .carta{ flex:1 1 0; min-width:0; }
  /* un peldaño más de apretar donde el plano está peor */
  .tarjeta, .suyo-ficha{ flex:0 1 3rem; }
  .gente .cromo .marco, .rival .cromo .marco{ --alto-cromo:2.5rem; }
  .montones{ height:2.8rem; }
}}

@media (prefers-reduced-motion:reduce){
  .carta, .tarjeta, button.principal, .chapa, .nodo, .carta-col, .medalla{ transition:none; }
  /* sin movimiento: el resalte del cursor se queda en el brillo, sin levantar nada */
  button.principal:hover:not(:disabled), .chapa:hover, .nodo[data-nivel]:hover,
  .carta-col:hover, .medalla[data-logro]:hover{ transform:none; }
  .tablero .cell.circulo::before, .tablero .cell.tachada::before{ animation:none; }
  .tablero.rotulos-entran .room-tag{ animation:none; }
}