:root {
  --fondo: #14121f;
  --superficie: #221f33;
  --superficie2: #2d2944;
  --borde: #3d3858;
  /* Cuatro tamaños de letra y dos pesos. Lo que no está acá es una pieza del juego (la palabra secreta, el código, el
     año, la grilla, el teclado) o un dibujo (las caras).
     La letra crece con la del teléfono, hasta el doble (regla de diseño, 5): la base es la que eligió la persona (la del
     navegador, 16 de fábrica; en el iPhone, la de «Tamaño del texto», 17 de fábrica), con tope en 32. De fábrica quedan
     15, 17, 20 y 26, como antes. */
  --base: min(1rem, 32px);
  --chica: calc(var(--base) * 15 / 16); --letra: calc(var(--base) * 17 / 16); --titulo: calc(var(--base) * 20 / 16); --grande: calc(var(--base) * 26 / 16);
  --fuerte: 800;
  --borde-toca: #7a7598; /* el borde de lo que se toca: 3 a 1 o más contra los tres fondos (regla de diseño, 4) */
  --texto: #f5f3ff;
  --suave: #b8b3d1;
  --rosa: #ff4d8d;
  --amarillo: #ffd23f;
  --celeste: #3ee3e3;
  --verde: #5ee38f;
  --radio: 18px;
  color-scheme: dark;
}
/* En el iPhone, la letra de la app sigue a «Tamaño del texto» (Dynamic Type): la raíz toma la letra del sistema. */
@supports (font: -apple-system-body) {
  html { font: -apple-system-body; }
  :root { --base: min(calc(1rem * 16 / 17), 32px); }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fondo); color: var(--texto); }
body {
  font: var(--letra)/1.4 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  min-height: 100dvh;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
/* arriba, el lugar de la hora y la batería (29/10, Verónica, en la app del iPhone: «en la parte superior las burbujas
   están algo cortadas»: la app abre la página a pantalla completa, y en Safari esto da 0) */
main { max-width: 560px; margin: 0 auto; padding: calc(16px + env(safe-area-inset-top)) 16px calc(32px + env(safe-area-inset-bottom)); }
h1, h2, h3 { margin: 0; line-height: 1.15; font-weight: var(--fuerte); }
h1, h2 { font-size: var(--grande); }
h3 { font-size: var(--titulo); }
strong, b { font-weight: var(--fuerte); }
p { margin: 0; }
button, input { font: inherit; color: inherit; }

.logo { display: block; width: min(100%, 360px); height: auto; aspect-ratio: 1200 / 620; margin: 8px auto 0; }
.logoChico { display: block; height: 26px; width: auto; aspect-ratio: 1600 / 403; flex: none; }
/* El título de cada juego, con su carpincho chico al lado: la cara (con su gorro, sus anteojos o su patito) en un
   medallón. Es un dibujo quieto: no se toca ni se mueve (regla de diseño, 3). */
.tituloJuego { display: inline-flex; align-items: center; gap: 10px; }
.carpinchoChico { width: var(--tam, 48px); height: var(--tam, 48px); flex: none; border-radius: 50%; object-fit: cover; object-position: 50% 12%; background: var(--superficie2); border: 2px solid #f2c879; box-sizing: border-box; }
/* El medallón: el carpincho del juego (en Charadas, los dos de sus equipos, encimados) y, en la esquina, la insignia con
   el objeto del juego. No se toca ni se mueve. */
.medallon { position: relative; display: inline-flex; flex: none; padding: 0 6px 4px 0; }
.medallon .carpinchoChico + .carpinchoChico { margin-left: calc(var(--tam) * -0.32); }
.medallon .insignia { position: absolute; right: -2px; bottom: -2px; width: calc(var(--tam) * 0.5); height: calc(var(--tam) * 0.5); }
.tituloEstero.tituloJuego { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: 0; }
.tituloJuego .insignia.sola { width: 1.15em; height: 1.15em; flex: none; align-self: center; margin-right: 10px; }
.tituloJuego small { margin-left: .25em; }
.lema { text-align: center; color: var(--suave); margin-bottom: 24px; }
.pila { display: flex; flex-direction: column; gap: 12px; }
.fila { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.centro { text-align: center; }
.suave { color: var(--suave); }
.chico { font-size: var(--letra); } /* era 16: una frase se lee en 17 o más (regla de diseño, 3); queda el color más suave */
.grande { font-size: var(--titulo); font-weight: var(--fuerte); }

.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px; }
.etiqueta { font-size: var(--chica); font-weight: var(--fuerte); letter-spacing: .5px; text-transform: uppercase; color: var(--suave); margin-bottom: 8px; }

.boton {
  display: block; width: 100%; min-height: 56px; border: 0; border-radius: 999px; padding: 16px 24px;
  font-weight: var(--fuerte); font-size: var(--letra); cursor: pointer; background: var(--superficie2); color: var(--texto);
  transition: transform .08s ease;
}
.boton:active { transform: scale(.97); }
/* Tocado y esperando al servidor: se nota al instante y, si tarda, gira (regla de diseño, 6). No toma otro toque. */
.boton.trabaja, .trabaja { position: relative; pointer-events: none; filter: brightness(.82); }
.trabaja::before {
  content: ''; position: absolute; right: 16px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%;
  border: 3px solid currentColor; border-right-color: transparent; opacity: 0; animation: gira .8s linear .35s infinite, asoma .2s ease .35s both;
}
@keyframes gira { to { transform: rotate(360deg); } }
@keyframes asoma { to { opacity: .9; } }
/* Texto oscuro sobre el rosa: 5,9 a 1 de contraste (el blanco daba 2,6 a 3,1, y el mínimo es 4,5). */
.boton.principal { background: linear-gradient(90deg, var(--rosa), #ff7a59); color: #14121f; box-shadow: 0 6px 24px #ff4d8d55; }
/* El botón principal de la pantalla mide 88 (14 mm, regla de diseño, 4): con 56, a los mayores les fallaba la puntería. */
.boton.principal { min-height: 88px; font-size: var(--titulo); }
/* Y sigue a la vista (regla de diseño, 5): si la pantalla no entra (la letra grande, un celu chico), queda pegado abajo y
   lo demás se baja con el dedo. En una fila de dos o en la hoja de una pregunta, se queda en su lugar. */
.boton.principal { position: sticky; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 3; }
.dos .boton.principal, .hoja .boton.principal { position: static; }
.dos .boton.principal.trabaja, .hoja .boton.principal.trabaja { position: relative; }
/* Con la flecha, también: si no, la flecha («¡Otra!», «Sí, eso dijo») se iba a la esquina de la pantalla (16/10). */
.dos .boton.principal.senal, .hoja .boton.principal.senal { position: relative; bottom: auto; }
.boton.amarillo { background: var(--amarillo); color: #1b1600; }
.boton.borde { background: transparent; border: 2px solid var(--borde-toca); }
.boton.mini { min-height: 56px; min-width: 56px; width: auto; display: inline-block; font-size: var(--letra); padding: 8px 16px; } /* 56, como todo lo que se toca */
/* Apagado se lee igual (6 a 1): gris plano, sin el color de actuar. Con opacidad, la letra bajaba a 2,3 a 1. Va después
   de los colores (principal, amarillo) para ganarles. */
.boton[disabled] { background: #3a3650; color: #c4bfdc; box-shadow: none; cursor: default; }
.boton.borde[disabled] { background: transparent; color: #a9a4c4; border-color: var(--borde); }

input.campo {
  width: 100%; min-height: 56px; border-radius: 14px; border: 2px solid var(--borde-toca); background: var(--superficie2);
  padding: 12px 16px; font-size: var(--titulo); outline: none;
}
input.campo:focus { border-color: var(--rosa); }
input.codigo { text-align: center; letter-spacing: 12px; font-size: 32px; font-weight: var(--fuerte); text-transform: uppercase; }

/* Las caras: una fila que se desliza con el dedo, cada una de 56 y a 8 de la otra (eran 16 botones de 36, a 5). La
   sexta asoma cortada: se ve que hay más. La elegida lleva borde amarillo y una tilde: no depende sólo del color. */
.emojis { display: flex; gap: 8px; overflow-x: auto; padding: 8px 8px 8px 4px; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; } /* el aire de arriba es para la tilde */
.emojis::-webkit-scrollbar { display: none; }
.emojis button { position: relative; flex: 0 0 56px; width: 56px; height: 56px; font-size: 28px; border-radius: 14px; border: 2px solid var(--borde-toca); background: var(--superficie2); cursor: pointer; padding: 0; scroll-snap-align: start; }
.emojis button[aria-pressed='true'] { border-color: var(--amarillo); background: #3a3350; }
.emojis button.tomada { opacity: .25; filter: grayscale(1); cursor: not-allowed; }
/* La tilde de lo elegido (una cara, a quién votás): arriba a la derecha, sobre el borde. */
.emojis button[aria-pressed='true']::after, button.persona[aria-pressed='true']::after {
  content: '✓'; position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--amarillo); color: #1b1600; font-size: var(--chica); font-weight: var(--fuerte); line-height: 1;
}

.barra { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; } /* si no entra (un celu de 320), baja de renglón en vez de cortarse */
.barra .fila { flex-wrap: nowrap; gap: 8px; flex: none; }
.barra .boton.mini { padding: 8px 8px; }
.codigoSala { font-weight: var(--fuerte); letter-spacing: 3px; background: var(--superficie2); border-radius: 10px; padding: 4px 8px; font-size: var(--letra); }
/* «Salir» y «Música» llevan siempre su palabra (regla de diseño, 2: ningún dibujo solo). Si no entran en un renglón, la
   barra baja al segundo. */
.sinPalabra { display: none; }
/* La llave de la música: en las pantallas donde suena, va en el lugar del logo de la barra. Prendida, con borde celeste
   y relleno; apagada, con el parlante tachado: no depende sólo del color. Desde el 20/10 abre la hoja «Sonido» (web/
   musica.js, con su estilo): «prendida» es que algo suena (la música o los toques). */
.boton.llave { flex: none; white-space: nowrap; }
.boton.llave[aria-pressed='true'], .boton.llave.prendida { border-color: var(--celeste); background: #173c44; }
@media (max-width: 389px) { .barra .boton.llave { font-size: var(--chica); } .barra .logoChico { height: 22px; }
  .barra, .barra .fila { gap: 6px; } .barra .boton.mini { padding: 8px 6px; } } /* en un celu de 360, la barra de la juntada queda justa (y con un código de letras anchas, no entraba); con «✕ Salir» (19/10), un poco menos de aire para que siga en un renglón */
/* Un celu angosto, o uno con la pantalla ampliada (un iPhone con «Texto más grande» mide 320 de ancho): las barras y la
   fila de ayudas del crucigrama no entraban, y toda la pantalla se achicaba o se cortaba a la derecha (visto el 07/10
   con el motor de Safari). Más arriba de 351 no cambia nada. */
@media (max-width: 369px) { .codigoSala { letter-spacing: 2px; font-size: var(--chica); } .barra .reloj { font-size: var(--letra); } }
@media (max-width: 351px) { .barra .logoChico { display: none; } } /* un celu de 320: sin el logo chico */

.personas { display: grid; grid-template-columns: repeat(auto-fill, minmax(max(96px, 4.5em), 1fr)); gap: 8px; }
/* Para elegir a alguien, las caras van centradas: la flecha del grupo («Tocá a quién votás») queda sobre todas y no
   parece señalar a una (en la tablet quedaban a la izquierda; la simulación del 15/10). */
.personas.elegir { grid-template-columns: repeat(auto-fit, minmax(max(96px, 4.5em), 132px)); justify-content: center; }
.persona { background: var(--superficie2); border-radius: 14px; padding: 8px 8px; text-align: center; position: relative; border: 2px solid transparent; }
.persona .cara { font-size: 34px; line-height: 1.1; }
.persona .nombre { font-weight: var(--fuerte); font-size: var(--chica); overflow-wrap: anywhere; } /* un nombre largo baja de renglón: no se corta con «…» */
.persona.fuera { opacity: .4; }
.persona .corona { position: absolute; top: 4px; right: 8px; font-size: var(--chica); }
button.persona { cursor: pointer; color: inherit; font: inherit; width: 100%; border-color: var(--borde-toca); }
/* sin agrandarse: al crecer, quedaba a 6 de la de al lado (van a 8). La elegida lleva la tilde de arriba. */
button.persona[aria-pressed='true'] { border-color: var(--amarillo); background: #3a3350; }
.persona .puntos { font-size: var(--chica); color: var(--amarillo); font-weight: var(--fuerte); }

/* «Código:» y el código, nada más (20/10, Verónica: «solo Código: y el código»). */
.codigoJuntada { font-size: var(--titulo); font-weight: var(--fuerte); }
.codigoJuntada .codigoSala { display: inline-block; font-size: inherit; margin-left: 4px; }

/* Cada juego del menú: su medallón (el carpincho y la insignia del juego) al lado del nombre, y las opciones y el
   botón a todo el ancho de la tarjeta (con los botones de 56 de alto, en la columna angosta cada opción ocupaba un
   renglón y el menú se alargaba). */
.juego { display: grid; grid-template-columns: minmax(56px, auto) 1fr; gap: 8px 12px; align-items: start; }
.juego .icono { font-size: 44px; line-height: 1; grid-row: span 2; }
.juego > div:last-child { display: contents; }
.juego > div:last-child > h3, .juego > div:last-child > p { grid-column: 2; }
.juego > div:last-child > :not(h3):not(p) { grid-column: 1 / -1; margin: 0; }
.opciones { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.opciones button { border: 2px solid var(--borde-toca); background: transparent; color: var(--texto); border-radius: 999px; padding: 8px 16px; font-weight: var(--fuerte); min-height: 56px; cursor: pointer; }
.opciones button[aria-pressed='true'] { border-color: var(--celeste); background: #173c44; }
.opciones button[aria-pressed='true']::before { content: '✓ '; } /* la elegida, con tilde: no sólo con color (la música ya cambia de dibujo) */
.opciones button[disabled] { color: #a9a4c4; border-color: var(--borde); cursor: default; }
.opciones button:active, .emojis button:active, button.persona:active, .linea button.hueco:active, .diaIr:active, .diaLetra:active { transform: scale(.97); }

/* El secreto se ve sólo mientras se mantiene apretado, y «TE COLASTE» tiene la misma letra y el mismo color que una
   palabra: desde la silla de al lado no se distingue. */
.secreto {
  position: relative; border-radius: 24px; padding: 20px 16px 28px; text-align: center; cursor: pointer; width: 100%; min-height: 230px;
  display: grid; justify-items: center; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none;
  background: repeating-linear-gradient(45deg, #2d2944, #2d2944 14px, #29253e 14px, #29253e 28px); color: var(--texto);
  border: 2px solid var(--borde-toca); /* se toca: su borde se distingue del fondo */
}
.secreto .tapa, .secreto .contenido { grid-area: 1 / 1; }
.secreto .tapa { align-self: end; }
.secreto .contenido { align-self: start; }
.secreto .contenido { visibility: hidden; }
.secreto.visible { background: linear-gradient(160deg, #3a1f4d, #1f2a4d); box-shadow: 0 0 0 2px var(--amarillo) inset; }
.secreto.visible .tapa { visibility: hidden; }
.secreto.visible .contenido { visibility: visible; }
.secreto .palabra, .charada .palabra { font-size: 40px; font-weight: var(--fuerte); letter-spacing: -1px; margin: 8px 0; min-height: 56px; display: grid; place-items: center; overflow-wrap: normal; word-break: normal; hyphens: none; color: var(--amarillo); text-transform: uppercase; }
/* Nunca se parte una palabra («RECONCILIACIÓ / N»): se achica la letra. Entran 16 letras en un iPhone SE. */
.secreto .palabra.larga, .charada .palabra.larga { font-size: 32px; }
.secreto .palabra.muyLarga, .charada .palabra.muyLarga { font-size: 27px; }
.secreto .palabra.larguisima, .charada .palabra.larguisima { font-size: 23px; letter-spacing: -.5px; }
/* ——— La dirección C, «CarpinGo! ilustrado» (elegida por Verónica el 14/10, con la palabra gigante de la B), para
   Charadas y Juntalas: el estero de noche de la carrera, los carpinchos pintados asomados espiando, la palabra y los
   grupos en carteles de madera y las palabras de Juntalas en camalotes. Títulos y palabra en Bitter (licencia OFL,
   web/fuentes/OFL-Bitter.txt). Contrastes medidos (pruebas/diseno/analizar.mjs): crema sobre la madera, 7,4 a 1 en lo más claro; camalote, 7,4 a 1. */
@font-face { font-family: 'Bitter'; font-weight: 800; font-display: swap; src: url('fuentes/bitter-800.woff2') format('woff2'); }
body.estero { background: linear-gradient(180deg, #1c1940 0%, #241e48 46%, #1a2f45 78%, #133a4a 100%) fixed; }
.tituloEstero { font: 800 var(--grande)/1.1 Bitter, Georgia, serif; text-align: center; margin: 0; }
.tituloEstero small { font: 400 var(--chica) system-ui, sans-serif; color: var(--suave); }
/* El carpincho se asoma por arriba del cartel: sus patas apoyan en el borde. No se toca ni se mueve. */
.asomado { display: block; margin: 0 auto -30px; position: relative; z-index: 2; height: auto; pointer-events: none; user-select: none; }
.madera { background: linear-gradient(180deg, #74462a, #5a361d); color: #fff7e6; border: 4px solid var(--c, #f2c879); box-shadow: 0 6px 0 #3e2412, 0 14px 26px #0009; }
/* la línea del auspicio en un cartel de madera (Juntalas, 21/10; web/auspicio.js): crema, 6,4 a 1 sobre la madera */
.madera { --auspicio: #f2e4c8; }
/* la del inicio (apagada hasta que los números digan, web/auspicios.mjs): al pie, separada de los juegos */
.auspicio.auspicioInicio { margin: 20px 0 24px; }
body.estero .suave { color: #d6d2ec; } /* sobre el agua del estero, el gris de siempre daba 6 a 1: así, 8 */
.nocturno { background: linear-gradient(180deg, #3a2f5c, #2a2346); color: var(--texto); border: 4px solid var(--c, var(--borde-toca)); box-shadow: 0 6px 0 #17132a, 0 14px 26px #0009; }
/* El pie de Juntalas va pegado abajo de la pantalla: lo que contesta y «Probar», juntos (el botón, adentro, ya no se
   pega solo). */
.pieFijo { position: sticky; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 3; display: grid; gap: 6px; }
.pieFijo p { justify-self: center; background: #14121f; border-radius: 999px; padding: 6px 16px; } /* sin transparencia: lo de atrás no se asoma (22/10) */
.pieFijo .boton.borde.fondo { background: #14121fee; } /* pegado abajo, con fondo: no se le ve el texto de atrás */
/* En el tablero, las 16 van de a cuatro por fila, como en el juego original: así se ven todas sin bajar la pantalla
   (14/10: de a dos, en un celu de 390 × 844 «Probar» tapaba 4, y en un iPhone SE, 10). Donde no entran de a cuatro (un
   celu muy angosto, o la letra del teléfono agrandada), de a dos, y se baja con el dedo. La cuenta es en «em», así sigue
   a la letra del teléfono (pruebas/grupos.mjs mide las palabras de todos los días).
   De a cuatro también con la letra del teléfono un punto más grande (20/10, Verónica, desde su iPhone, N.º 20: «Se
   mueve la pantalla y tengo que acomodarla para seguir leyendo las palabras»): en su celu (375 de ancho, la letra a 19)
   el corte de 18 em las ponía de a dos, ocho filas, y la página medía 1011 en una pantalla de 771; las dos últimas
   quedaban detrás de «Probar» y había que bajar y subir para leerlas. Con 16,4 em, y 4 entre columnas y 2 a los
   costados de cada palabra, entran de a cuatro con lugar para «Champú», la más ancha que no se corta (67 en 73). */
.tablero .palabrasGrupo { grid-template-columns: repeat(auto-fill, minmax(7em, 1fr)); }
@container tablero (min-width: 16.4em) {
  .tablero .palabrasGrupo { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 4px; }
  .tablero .palabraGrupo { min-height: 56px; padding: 6px 2px; font-size: var(--chica); }
}
.tablero { container: tablero / inline-size; padding: 34px 8px 10px; background: #221f33; border: 3px solid #f2c879; border-radius: 22px; position: relative; z-index: 1; box-shadow: 0 10px 30px #0008; display: flex; flex-direction: column; gap: 10px; }
/* Charadas: el cartel con la palabra. Mide siempre lo mismo, así al cambiar la palabra los botones no se corren bajo el
   dedo. La palabra, gigante (de la dirección B): se lee desde la otra punta de la mesa. */
.charada { border-radius: 20px; padding: 40px 16px 14px; text-align: center; display: grid; align-content: center; justify-items: center; position: relative; z-index: 1; }
.charada .etiqueta { margin-bottom: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: inherit; opacity: .9; }
.charada .palabra { font: 800 46px/1.08 Bitter, Georgia, serif; height: 132px; min-height: 0; margin: 4px 0; letter-spacing: -.5px; color: #fff7e6; text-transform: none; text-shadow: 0 2px 0 #4a2c16; display: grid; place-items: center; overflow-wrap: normal; word-break: normal; hyphens: none; }
.charada .palabra.larga { font-size: 38px; }
.charada .palabra.muyLarga { font-size: 32px; }
.charada .palabra.larguisima { font-size: 27px; letter-spacing: 0; }
.charada.nocturno .palabra { text-shadow: 0 2px 0 #17132a; }
.charada.cuenta .palabra { font-size: 56px; height: 64px; margin: 0; }
.charadaFila { justify-content: space-between; flex-wrap: nowrap; }
.charadaFila span { color: var(--verde); font-weight: var(--fuerte); flex: none; }
/* La tabla de los dos equipos, como la transmisión de la regata: cada equipo con su carpincho. */
.tablaEquipos { display: flex; gap: 8px; }
.equipoTv { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; background: #14121fd9; border: 2px solid var(--c); border-radius: 14px; padding: 4px 10px 4px 4px; }
.equipoTv img { width: 46px; height: 52px; object-fit: cover; object-position: top; border-radius: 10px; background: var(--c); flex: none; }
.equipoTv .nombre { font: 800 var(--letra)/1.1 Bitter, Georgia, serif; }
.equipoTv .juegan { display: block; font-size: var(--chica); color: var(--suave); font-weight: 400; }
.equipoTv .pts { margin-left: auto; font: 800 30px/1 Bitter, Georgia, serif; }
.equipoTv.juega { box-shadow: 0 0 0 3px var(--amarillo); } /* el que adivina ahora: además lo dice «juegan» */
.reservaNoVale { min-height: 56px; display: grid; align-items: center; }
/* Cuando el equipo saca una, su pantalla destella su color una vez (dirección B): responde al toque, no es un adorno. */
body.destello::before { content: ''; position: fixed; inset: 0; background: var(--destello, var(--amarillo)); pointer-events: none; z-index: 40; animation: destello .6s ease-out both; }
@keyframes destello { from { opacity: .45; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { body.destello::before { animation-duration: .01s; } }
/* Juntalas (boceto, 14/10): las 16 palabras, de a dos por fila en el celu (de a cuatro en la tablet; con la letra al
   doble, de a una). La elegida lleva tilde, no sólo color. Los grupos juntados, con los colores de la app. */
.palabrasGrupo { display: grid; grid-template-columns: repeat(auto-fill, minmax(8em, 1fr)); gap: 8px; }
/* Dirección C: las palabras flotan en camalotes (verde de estero) y cada grupo juntado queda en un cartel de madera con
   el borde de su color, del más fácil al de doble sentido: verde, celeste, naranja y rosa. */
/* Se corta sólo donde app.js puso el guion invisible (cortes()), nunca en cualquier letra. */
.palabraGrupo { position: relative; min-height: 56px; border: 2px solid #6fbf8a; background: #2f5a3f; color: #f4fff7; border-radius: 16px; padding: 8px; font-weight: var(--fuerte); font-size: var(--letra); line-height: 1.15; cursor: pointer; overflow-wrap: normal; word-break: normal; -webkit-hyphens: manual; hyphens: manual; }
.palabraGrupo[aria-pressed='true'] { background: var(--amarillo); color: #1b1600; border-color: var(--amarillo); }
/* La tilde va en la esquina, así no le quita lugar a la palabra. */
.palabraGrupo[aria-pressed='true']::before { content: '✓'; position: absolute; top: 1px; left: 6px; font-size: var(--chica); line-height: 1.2; }
.palabraGrupo:active { transform: scale(.97); }
.grupoJunto { border-radius: 12px; padding: 10px 14px 12px; display: grid; gap: 2px; text-align: center; }
.grupoJunto strong { font: 800 var(--titulo)/1.15 Bitter, Georgia, serif; }
.grupoJunto span { font-size: var(--letra); }
.grupoJunto.n1 { --c: var(--verde); }
.grupoJunto.n2 { --c: var(--celeste); }
.grupoJunto.n3 { --c: #ff9f1c; }
.grupoJunto.n4 { --c: var(--rosa); }
.grupoJunto.pista { background: transparent; border-style: dashed; box-shadow: none; color: var(--texto); } /* la pista: el nombre de un grupo que falta (19/10) */
.grillaCompartir { text-align: center; font-size: 28px; line-height: 1.2; letter-spacing: 2px; }
/* Tus números de Adivinala (03/11, su «si»): cuatro cifras con su palabra y, abajo, en cuántas pruebas salió cada una;
   la de hoy, verde y con «hoy» escrito (regla de diseño, 6: el color no es la única señal). */
.numerosPalabra { gap: 8px; }
.numerosPalabra p { margin: 0; }
.cifrasPalabra { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.cifraPalabra { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.cifraPalabra strong { font: 800 var(--grande)/1.1 Bitter, Georgia, serif; color: var(--amarillo); white-space: nowrap; }
.cifraPalabra span { font-size: var(--chica); color: var(--suave); line-height: 1.15; }
.barrasPalabra { display: grid; gap: 4px; text-align: left; }
.barraPalabra { display: grid; grid-template-columns: 1.4em 1fr; align-items: center; gap: 6px; font-weight: var(--fuerte); font-size: var(--chica); }
.barraPalabra i { font-style: normal; box-sizing: border-box; width: calc(2.2em + (100% - 2.2em) * var(--p, 0)); padding: 2px 8px; border-radius: 6px; background: #3a3652; color: var(--texto); text-align: right; white-space: nowrap; }
.barraPalabra i.hoy { width: max(5em, calc(2.2em + (100% - 2.2em) * var(--p, 0))); background: #1f7a45; color: #fff; }
.barraPalabra i small { font-size: var(--chica); }
/* Adivinala (02/11): seis filas de cinco fichas. La marca va además del color (regla de diseño, 6): ✓ va ahí; la que está
   en otro lugar, amarilla y sin marca desde el 03/11 (su «Sácale esas flechitas»: es la única clara); la que no está,
   apagada. Los colores dan 5 a 1 o más con su letra. */
.grillaPalabra { display: grid; gap: 5px; width: min(100%, calc(var(--ficha, 50px) * 5 + 20px)); margin: 0 auto; }
.filaPalabra { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.fichaPalabra { position: relative; aspect-ratio: 1; display: grid; place-items: center; border: 2px solid #4a4566; border-radius: 10px; background: #1b1830; color: var(--texto); font-weight: var(--fuerte); font-size: max(16px, calc(var(--ficha, 50px) * .56)); line-height: 1; }
.fichaPalabra.llena { border-color: var(--borde-toca); background: #2a2642; }
.filaPalabra.actual .fichaPalabra { border-color: var(--borde-toca); }
/* La fila que se escribe (03/11, «poder escribir en cualquier cuadrado»): cada casilla se toca, y la que espera la letra
   lleva el borde amarillo, más grueso. La zona que responde llega hasta la mitad del espacio entre casillas: unos 56 en
   un celu de 390 (regla de diseño, 4). */
button.fichaPalabra { width: 100%; padding: 0; font-size: max(16px, calc(var(--ficha, 50px) * .56)); font-weight: var(--fuerte); line-height: 1; cursor: pointer; touch-action: manipulation; }
button.fichaPalabra::before { content: ''; position: absolute; inset: -8px -4.5px; } /* desde adentro del borde (2): 2,5 afuera, la mitad del espacio */
.filaPalabra.actual .fichaPalabra.cursor::before { inset: -9px -5.5px; } /* el borde de 3 */
.filaPalabra.actual .fichaPalabra.cursor { border: 3px solid var(--amarillo); box-shadow: 0 0 0 2px #ffd54a55; }
/* la que ya salió verde, escrita otra vez en su lugar: fija, ⌫ no la borra (03/11; app.js, fijasDe) */
.filaPalabra.actual .fichaPalabra.fija { background: #1f7a45; border-color: #5ee38f; color: #fff; }
.filaPalabra.actual .fichaPalabra.fija.cursor { border-color: var(--amarillo); }
.fichaPalabra.bien { background: #1f7a45; border-color: #5ee38f; color: #fff; }
.fichaPalabra.esta { background: #f2c230; border-color: #ffe27a; color: #1b1600; }
.fichaPalabra.no { background: #3a3652; border-color: #3a3652; color: #c9c4e0; }
.fichaPalabra small { position: absolute; right: 3px; bottom: 2px; font-size: 14px; line-height: 1; font-weight: var(--fuerte); }
.filaPalabra.recien .fichaPalabra { animation: revelaFicha .45s ease both; animation-delay: calc(var(--i) * 110ms); }
.filaPalabra.sacude { animation: sacude .4s ease both; }
/* La acertada, el primer festejo (03/11, «Quiero ver la palabra toda en verde como primer festejo»): cada ficha se da
   vuelta verde y, cuando están las cinco, saltan una tras otra, con su brillo. */
.filaPalabra.gano .fichaPalabra { animation: revelaFicha .45s ease both, saltaFicha .6s ease both; animation-delay: calc(var(--i) * 110ms), calc(1050ms + var(--i) * 95ms); }
@keyframes saltaFicha { 0%, 100% { transform: none; box-shadow: none; } 40% { transform: translateY(-18px) scale(1.08); box-shadow: 0 0 22px #5ee38fcc; } 70% { transform: translateY(3px); } }
@keyframes revelaFicha { from { transform: rotateX(90deg); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .filaPalabra.recien .fichaPalabra, .filaPalabra.gano .fichaPalabra, .filaPalabra.sacude { animation: none; } }
/* El teclado, con la ñ y «Probar», va en el pie: con fondo, así no se asoma la grilla entre las teclas. */
.piePalabra { background: #14121fee; border-radius: 18px; padding: 6px 4px; }
/* Jugando, el lugar es para los cuadrados (03/11, Verónica, en su iPhone: «Los cuadrados más grandes... Optimiza el
   espacio»): el nombre va en la barra, el cartel sin el lugar del carpincho que se asomaba, y abajo de la página sólo
   el aire del borde del teléfono. */
main:has(> .juegoPalabra) { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
.juegoPalabra .barra { margin-bottom: 0; }
/* Más grande (03/11, Verónica: «adivinala no usa el total del espacio... el tablero podría ser más grande»): en su iPhone
   sobraban 67 de alto abajo y a las fichas las frenaba el ancho. A los costados, 8 en vez de 16; el tablero, con 4 de
   aire; 5 entre fichas: de 59 a 65. Las teclas crecen con el alto de la pantalla, de 56 a 66, y usan lo que queda. */
main:has(> .juegoPalabra) { padding-left: 8px; padding-right: 8px; }
.juegoPalabra .tablero { padding: 4px; }
.tituloBarra { font: 800 var(--titulo)/1.1 Bitter, Georgia, serif; margin: 0; text-align: center; }
/* Lo que contesta, encima de una fila vacía (app.js, adivinala): en su mismo renglón de la grilla, adelante. Cada fila
   va en la única columna (si no, la que comparte renglón con el aviso se iba a una columna nueva, al costado). */
.grillaPalabra > * { grid-column: 1; }
/* contain: size: el aviso no le cambia el alto a su renglón (largo, en dos líneas, lo agrandaba, y el ajuste de las fichas
   iba y volvía sin parar) */
.avisoPalabra { contain: size; overflow: hidden; align-self: stretch; z-index: 2; display: flex; align-items: center; justify-content: center; margin: 0; padding: 4px 12px; background: #14121f; border: 2px solid var(--amarillo); border-radius: 12px; font-size: var(--letra, 17px); line-height: 1.2; text-align: center; }
/* Cuando no entra en la pantalla (ajustarPalabra, en web/app.js): con menos aire. */
.juegoPalabra.apretada { gap: 8px; }
.tecladoPalabra { display: grid; gap: 6px; }
.filaTeclas { display: flex; gap: 4px; justify-content: center; }
.teclaPalabra { position: relative; flex: 1 1 0; min-width: 0; max-width: 46px; height: clamp(56px, 8.2dvh, 66px); padding: 0; border: 0; border-radius: 8px; background: #6e6890; color: #fff; font: inherit; font-size: 18px; font-weight: var(--fuerte); touch-action: manipulation; }
.teclaPalabra.borrar { flex-grow: 1.3; max-width: 64px; font-size: 22px; }
/* «Probar», la primera de la última fila (03/11): apagada hasta que están las cinco; después, el color de actuar. */
.teclaPalabra.probar { flex-grow: 1.9; max-width: 92px; font-size: 15px; background: #3d3858; color: #d6d2ec; }
.teclaPalabra.probar.listo { background: linear-gradient(90deg, var(--rosa), #ff7a59); color: #14121f; }
.teclaPalabra.probar.senal::after { right: -10px; bottom: -24px; width: 28px; height: 34px; } /* la flecha, en la esquina: no tapa «Probar» */
.teclaPalabra.bien { background: #1f7a45; }
.teclaPalabra.esta { background: #f2c230; color: #1b1600; }
.teclaPalabra.no { background: #2a2740; color: #9b96b4; }
.teclaPalabra.bien::after { content: '✓'; position: absolute; right: 2px; bottom: 1px; font-size: 11px; line-height: 1; } /* el amarillo, sin ↔ (03/11: app.js, Adivinala) */
.teclaPalabra:active { transform: scale(.95); }
.palabraDelDia { text-align: center; font-size: var(--titulo); margin: 0; }
.palabraDelDia strong { letter-spacing: 4px; }

.orden { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.orden span { background: var(--superficie2); border-radius: 999px; padding: 4px 12px; font-size: var(--letra); }
.orden span.ahora { background: var(--amarillo); color: #1b1600; font-weight: var(--fuerte); }
.orden span.ya { opacity: .45; }

.turno { font-size: var(--grande); font-weight: var(--fuerte); text-align: center; }
.pregunta { font-size: var(--grande); font-weight: var(--fuerte); line-height: 1.15; text-align: center; }

.revelacion { text-align: center; padding: 20px 8px; }
.revelacion .gigante { font-size: 84px; line-height: 1; animation: saltar .6s cubic-bezier(.2, 1.6, .4, 1) both; }
.revelacion .titulo { font-size: var(--grande); font-weight: var(--fuerte); margin-top: 8px; }
.suspenso { font-size: var(--grande); font-weight: var(--fuerte); text-align: center; padding: 56px 0; animation: latir 0.6s ease-in-out infinite alternate; }

.puntosRonda { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.puntosRonda span { background: #173c2a; color: var(--verde); border-radius: 999px; padding: 4px 12px; font-weight: var(--fuerte); font-size: var(--letra); }

.premio { display: grid; grid-template-columns: 52px 1fr; gap: 8px; align-items: center; animation: premio .7s cubic-bezier(.2, 1.4, .4, 1) both; }
.premio .icono { font-size: 40px; }
.tabla { width: 100%; border-collapse: collapse; }
.tabla td { padding: 8px 4px; border-bottom: 1px solid var(--borde); }
.tabla td:last-child { text-align: right; font-weight: var(--fuerte); color: var(--amarillo); }

.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dos .boton { padding: 12px 8px; }
.fila.centrada { justify-content: center; }
.alerta { border-color: var(--amarillo); }
.oferta { border: 2px solid var(--amarillo); background: linear-gradient(160deg, #2e2640, #1f2a3d); }
.turnoMio { border: 2px solid var(--amarillo); }
.aparece { animation: aparecer .5s ease both; }
.desaparece { animation: desaparecer .4s ease both; }
/* se apaga sin achicarse: lo de abajo no se corre (24/10, «🔄 Escala nueva» subía la barra bajo el dedo) */
.seApaga { animation: apagarse .4s ease both; }
@keyframes apagarse { to { opacity: 0; } }
.abajo { margin-top: 24px; }
.grilla { display: grid; gap: 2px; justify-content: center; margin: 4px auto; }
.grilla > div { border-radius: 4px; }
.celda { position: relative; background: #3a3558; border: 1px solid #6a6492; display: grid; place-items: center; font-weight: var(--fuerte); line-height: 1; }
.celda .numero { position: absolute; top: 1px; left: 2px; font-size: 11px; font-weight: 800; }
.celda.actual { border: 2px solid #ffffff; box-shadow: 0 0 8px #ffffff88; }
/* En el celu, todo en una columna. En la tablet acostada, para no bajar la pantalla (la prueba en la tablet del 01/10):
   en Cruzados, la grilla a la izquierda y lo que se lee y se toca a la derecha; en el menú, los juegos a la derecha. */
.mesa { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 900px) and (orientation: landscape) {
  main.ancho { max-width: 1040px; }
  .menu { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 24px; }
  .mesa { display: grid; grid-template-columns: auto minmax(360px, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "grilla arriba" "grilla abajo"; align-items: start; gap: 12px 32px; }
  .mesa > .arriba { grid-area: arriba; }
  .mesa > .grilla { grid-area: grilla; margin: 0; }
  .mesa > .abajo { grid-area: abajo; }
}
.celda.pinta { animation: pinta .6s ease both; }
.definicion { font-size: var(--grande); font-weight: var(--fuerte); line-height: 1.2; }
/* Cruzados en la juntada (31/10, Gonza: «que la definición no tape el crucigrama... el crucigrama debería permanecer fijo en
   la pantalla»): el tablero de arriba de la grilla mide siempre lo mismo (la definición más larga tiene 70 letras: tres
   renglones en el celu), así la grilla no se mueve al cambiar la palabra, el turno ni la etapa */
.tableroCruz { min-height: 144px; justify-content: center; gap: 6px; }
.tableroCruz.turnoMio { border-width: 1px; box-shadow: 0 0 0 1px var(--amarillo); } /* el borde del que anota no cambia la medida: la grilla no se corre al cambiar el turno */
.tableroCruz .definicion { font-size: var(--letra); min-height: calc(var(--letra) * 3.6); display: flex; align-items: center; justify-content: center; overflow-wrap: anywhere; } /* 17: la más larga, de 70 letras, entra en tres renglones; el alto no depende de la letra de adentro */
.tableroCruz .definicion.palabra { font-size: var(--grande); letter-spacing: 2px; }
.tableroCruz .nota { margin: 0; font-size: var(--chica); min-height: 2.8em; display: flex; align-items: center; justify-content: center; }
.tableroCruz .nota .fila { gap: 8px; }
.palabraGrande { font-size: 40px; font-weight: var(--fuerte); letter-spacing: 2px; color: var(--amarillo); }
.punto { width: 16px; height: 16px; border-radius: 50%; flex: none; }
/* Sin conexión: dice qué pasa y ofrece un botón (regla de diseño, 7). */
.reconectando { position: sticky; top: env(safe-area-inset-top); z-index: 6; background: var(--amarillo); color: #14121f; font-weight: var(--fuerte); border-radius: 14px; padding: 8px 8px 8px 16px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.reconectando .boton.mini, #aviso .boton.mini { background: #14121f; color: #fff; border: 0; flex: none; }
.reconectando .boton.mini.borde, #aviso .boton.mini.borde { background: transparent; color: #14121f; border: 2px solid #14121f; }
.cargando::after { content: ''; display: inline-block; width: 18px; height: 18px; margin-left: 8px; vertical-align: -3px; border-radius: 50%; border: 3px solid currentColor; border-right-color: transparent; animation: gira .8s linear infinite; }

/* El reloj de cada etapa: un anillo que se vacía. --p va de 1 a 0. */
.anillo {
  --p: 1; width: 48px; height: 48px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: radial-gradient(closest-side, var(--fondo) 74%, transparent 76% 100%), conic-gradient(var(--amarillo) calc(var(--p) * 360deg), var(--superficie2) 0);
}
.anillo .segundos { font-weight: var(--fuerte); font-size: var(--letra); }

/* La revelación: apagón, suspenso (los votos vuelan y se apilan), golpe (el sello) y festejo. Los tiempos los pone
   app.js con animation-delay, calculados con la hora del servidor: así sale igual en todos los celus. */
.escena { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 16px 0 24px; }
.apagon {
  position: fixed; inset: 0; z-index: 5; background: #000; display: grid; place-items: center; font-size: 72px;
  animation-name: apagon; animation-fill-mode: both; animation-timing-function: ease-in; pointer-events: none;
}
.votados { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.votado { position: relative; width: 96px; text-align: center; background: var(--superficie2); border-radius: 16px; padding: 8px 4px; }
.votado .cara { font-size: 44px; line-height: 1.1; }
.votado .nombre { font-weight: var(--fuerte); font-size: var(--chica); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.votado .votos { min-height: 30px; display: flex; flex-wrap: wrap; justify-content: center; gap: 1px; font-size: 20px; }
.votado .votos span { animation: voto .45s cubic-bezier(.2, 1.4, .4, 1) both; }
.sello {
  position: absolute; left: 50%; top: 47%; transform: translate(-50%, -50%) rotate(-14deg); padding: 4px 8px; border-radius: 8px;
  font-weight: var(--fuerte); font-size: var(--titulo); letter-spacing: 1px; border: 3px solid; background: #14121fcc; white-space: nowrap;
  animation: sello .35s cubic-bezier(.2, 1.8, .4, 1) both;
}
.sello.si { color: var(--rosa); border-color: var(--rosa); }
.sello.no { color: var(--celeste); border-color: var(--celeste); }
.final { text-align: center; }
.final .titulo { font-size: var(--grande); font-weight: var(--fuerte); }
.linterna {
  font-size: 84px; line-height: 1.2; margin: 0 auto; width: 170px; height: 170px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle, #fff6c7 0%, #ffd23f55 45%, transparent 70%); animation: linterna 1.2s ease both;
}

/* El cartel: arriba, sobre la barra, y espera el toque (no se va solo: regla de diseño, 12). No corre nada de lugar. */
#aviso {
  position: fixed; left: 50%; top: calc(8px + env(safe-area-inset-top)); transform: translateX(-50%) translateY(-220px); visibility: hidden;
  background: #fff; color: #14121f; padding: 12px 12px 12px 16px; border-radius: 16px; font-weight: var(--fuerte); width: min(528px, calc(100vw - 32px));
  transition: transform .25s ease, visibility 0s .25s; z-index: 60; box-shadow: 0 10px 30px #000a;
  display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
}
#aviso.visible { transform: translateX(-50%) translateY(0); visibility: visible; transition: transform .25s ease; }
#aviso p { flex: 1 1 160px; }
#aviso .fila { flex: none; flex-wrap: nowrap; margin-left: auto; }
/* La pregunta antes de algo que no tiene vuelta: una hoja abajo, con los dos botones que dicen qué pasa. */
.velo { position: fixed; inset: 0; z-index: 70; background: #0b0a12cc; display: flex; align-items: flex-end; justify-content: center; }
.hoja { width: min(560px, 100%); background: var(--superficie); border-radius: 24px 24px 0 0; padding: 24px 16px calc(24px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 16px; animation: aparecer .25s ease both; }
.hoja .grande { text-align: center; }
.hoja p { text-align: center; color: var(--suave); }
/* Instalar la app (18/10): los pasos, cada uno con el dibujo del botón del navegador. Si lo que hay que tocar está abajo
   (el iPhone), la hoja va arriba para no taparlo, y la flecha grande lo señala desde el borde. */
.velo.arriba { align-items: flex-start; }
.velo.arriba .hoja { border-radius: 0 0 24px 24px; padding: calc(20px + env(safe-area-inset-top)) 16px 20px; }
.hoja.instalar .iconoApp { width: 48px; height: 48px; border-radius: 12px; }
.hoja.instalar { max-height: calc(100dvh - 110px); overflow-y: auto; } /* con la letra grande se baja con el dedo, y nunca tapa la flecha */
.pasosInstalar { margin: 0; padding: 0; list-style: none; counter-reset: paso; display: grid; gap: 12px; }
.pasosInstalar li { counter-increment: paso; display: flex; align-items: center; gap: 12px; font-size: var(--letra); line-height: 1.35; }
.pasosInstalar li::before { content: counter(paso); flex: none; width: 2.1em; height: 2.1em; border-radius: 50%; display: grid; place-items: center; background: var(--superficie2); border: 2px solid var(--borde-toca); font-weight: var(--fuerte); }
.pasosInstalar li:first-child::before { background: var(--amarillo); border-color: var(--amarillo); color: #1b1600; } /* el primero, el de ahora */
.pasosInstalar strong { color: #fff; }
.iconoNav { width: 1.65em; height: 1.65em; vertical-align: middle; margin: 0 4px; padding: 3px; box-sizing: content-box; border-radius: 8px; background: #ffffff1f; }
.flechaNav { position: fixed; z-index: 71; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 2px; filter: drop-shadow(0 3px 6px #000c); }
.flechaNav::after { content: ''; width: 48px; height: 58px; order: 2; animation: navAbajo .9s ease-in-out 6; animation-delay: var(--ya, 0s);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 48'%3E%3Cpath d='M20 45 37 24H27V3H13v21H3z' fill='%23ffd23f' stroke='%2314121f' stroke-width='3.5' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.flechaNav .iconoNav { order: 1; width: 34px; height: 34px; font-size: 17px; background: #14121f; border: 2px solid var(--amarillo); border-radius: 12px; }
.flechaNav.abajo { bottom: calc(6px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); }
.flechaNav.abajoDer { bottom: calc(6px + env(safe-area-inset-bottom)); right: 10px; }
.flechaNav.abajoIzq { bottom: calc(6px + env(safe-area-inset-bottom)); left: 10px; }
.flechaNav.arribaDer { top: calc(4px + env(safe-area-inset-top)); right: 6px; flex-direction: column-reverse; }
.flechaNav.arribaDer::after { transform: rotate(180deg); animation-name: navArriba; }
.flechaNav.quieta::after { animation: none; }
@keyframes navAbajo { 0%, 100% { transform: translateY(-4px); } 50% { transform: translateY(6px); } }
@keyframes navArriba { 0%, 100% { transform: rotate(180deg) translateY(-4px); } 50% { transform: rotate(180deg) translateY(6px); } }

@keyframes apagon { 0%, 75% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@keyframes voto { from { opacity: 0; transform: translateY(-60px) scale(1.6); } to { opacity: 1; transform: none; } }
@keyframes sello { from { opacity: 0; transform: translate(-50%, -50%) rotate(-14deg) scale(3); } to { opacity: 1; transform: translate(-50%, -50%) rotate(-14deg) scale(1); } }
@keyframes linterna { 0% { transform: translateX(-120px); opacity: .3; } 60% { transform: translateX(40px); } 100% { transform: none; opacity: 1; } }
@keyframes premio { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes desaparecer { from { opacity: 1; } to { opacity: 0; height: 0; padding: 0; margin: 0; border-width: 0; overflow: hidden; } }
@keyframes pinta { from { transform: scale(.4); filter: brightness(2); } to { transform: none; filter: none; } }
@keyframes aparecer { from { opacity: 0; transform: translateY(12px); visibility: hidden; } to { opacity: 1; transform: none; visibility: visible; } } /* hidden: mientras espera, no se puede tocar */
@keyframes saltar { from { transform: scale(.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes latir { from { opacity: .5; transform: scale(.97); } to { opacity: 1; transform: scale(1.03); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01s !important; animation-iteration-count: 1 !important; transition: none !important; } }

/* En la Onda: el dial de la radio, de 0 a 100 entre las dos puntas. */
.dial { width: 100%; user-select: none; -webkit-user-select: none; }
.dial .franja { position: relative; height: 96px; border-radius: 14px; background: repeating-linear-gradient(90deg, #ffffff10 0 1px, transparent 1px 10%), linear-gradient(180deg, #1b3a46, #10242c); border: 2px solid #4fc3f7; overflow: hidden; touch-action: none; }
.dial.tocable .franja { cursor: pointer; box-shadow: 0 0 0 4px #4fc3f733; }
/* apagada mientras la Antena piensa su pista (24/10): se ve que todavía no se toca */
.dial.apagado .franja { opacity: .4; }
.dial .puntas { display: flex; justify-content: space-between; gap: 16px; margin-top: 8px; font-weight: var(--fuerte); font-size: var(--letra); }
.dial .puntas span:last-child { text-align: right; }
.dial .banda { position: absolute; top: 0; bottom: 0; }
.dial .banda.b0 { background: #4fc3f733; }
.dial .banda.b1 { background: #4fc3f766; }
.dial .banda.b2 { background: #4fc3f7aa; }
.dial .objetivo { position: absolute; top: 0; bottom: 0; width: 4px; margin-left: -2px; background: var(--amarillo); box-shadow: 0 0 12px var(--amarillo); }
/* «Tu punto», arriba de la raya amarilla de la Antena (24/10: no sabía cuál era su punto) */
.dial .tuPunto { position: absolute; top: 6px; transform: translateX(-50%); background: var(--amarillo); color: #14121f; font-weight: var(--fuerte); font-size: var(--chica); padding: 2px 10px; border-radius: 999px; white-space: nowrap; pointer-events: none; }
.dial .aguja { position: absolute; top: 10px; bottom: 0; width: 3px; margin-left: -1.5px; background: var(--rosa); }
.dial .aguja span { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); font-size: 22px; line-height: 1; }
.dial .aguja.mia { background: var(--texto); width: 4px; margin-left: -2px; }

/* Antes o Después: la línea de tiempo, de la más vieja a la más nueva, con los huecos entre las figuritas. */
.carta { border-color: #ffb547; }
.linea { display: flex; flex-direction: column; gap: 8px; }
.linea .figurita { display: flex; align-items: center; gap: 12px; background: var(--superficie2); border: 2px solid #ffb54766; border-radius: 14px; padding: 8px 16px; }
.linea .figurita .texto { flex: 1; }
.linea .figurita .anio { font-size: var(--grande); font-weight: var(--fuerte); color: #ffb547; }
.linea .hueco { min-height: 10px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: var(--fuerte); color: var(--suave); }
.linea button.hueco { min-height: 56px; border: 2px dashed var(--borde-toca); background: transparent; cursor: pointer; }
.linea .hueco.marcado { min-height: 36px; border: 2px solid #ffb547; color: #ffb547; }
.linea .hueco.elegido { border: 2px solid var(--rosa); background: #ff4d8d22; color: var(--texto); }
.tarjeta.dato { border-color: #ffb54766; font-size: var(--letra); }
.otraLinea { gap: 8px; }
.otraLinea.deTurno { font-weight: var(--fuerte); }
.otraLinea .quien { flex: 1; min-width: 0; } /* (sin los años desde el 04/11: N.º 91, «mucho texto») */
/* de quién es el turno, arriba de la tarjeta y grande (04/11, N.º 91: «no llegás a leer... quién está jugando») */
.carta .turnoAntes { font-size: var(--titulo); font-weight: var(--fuerte); color: #ffb547; }
/* la práctica del carpinchito (mostrarAntes): la línea como la de verdad, con los huecos de puntos */
.practicaAntes .linea { text-align: left; }
.practicaAntes .hueco { min-height: 40px; border: 2px dashed var(--borde-toca); }
.practicaAntes .tomada { opacity: .4; }
.otraLinea .apagado { opacity: .25; filter: grayscale(1); }
.selloAnio { font-size: 80px; line-height: 1; font-weight: var(--fuerte); color: #ffb547; letter-spacing: -2px; }

.dial .aguja b { position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); font-size: var(--chica); font-weight: var(--fuerte); color: var(--texto); background: #000a; border-radius: 6px; padding: 0 4px; }
.linea .figurita.nueva { border-color: var(--rosa); box-shadow: 0 0 0 3px #ff4d8d44; }
/* cuando no se la quedó nadie (24/10): la tarjeta en gris donde iba, y el hueco donde la pusieron */
.linea .figurita.fantasma { border-style: dashed; border-color: var(--suave); }
.linea .hueco.errado { min-height: 36px; border: 2px solid var(--rosa); color: var(--rosa); }
.linea button.hueco .anillo { width: 28px; height: 28px; margin-left: 8px; }

/* CarpinGo!, la carrera: su página va encima de la app, a pantalla completa, mientras dure (app.js, puenteCarpinGo). */
.carpingo { position: fixed; inset: 0; width: 100%; height: 100%; border: 0; z-index: 50; background: #0B222C; }
.carpingo.cargando { opacity: 0; pointer-events: none; } /* mientras baja, se ve «Cargando la carrera…» */

/* Cruzados del día, solo. Se escribe sobre las casillas, con un teclado propio pegado abajo (de mirar CodyCross, 07/10):
   casillas claras con la letra oscura; la palabra elegida, en durazno; el cursor, amarillo; lo escrito sin confirmar,
   «en lápiz» (gris); lo confirmado, en tinta; la palabra resuelta, verde agua. La que no es se sacude en rojo, sin cartel. */
.barra .reloj { font-variant-numeric: tabular-nums; font-weight: var(--fuerte); font-size: var(--titulo); color: var(--amarillo, #ffd23f); }
.dia { display: flex; flex-direction: column; gap: 8px; min-height: calc(100vh - 48px); min-height: calc(100dvh - 48px - env(safe-area-inset-bottom)); }
.dia .barra { margin-bottom: 0; }
/* Los corazones del crucigrama (15/10): en la barra, debajo del reloj y chicos. Al lado, la barra no entraba en un
   renglón en 390 («Me rindo» y «Salir» bajaban) y le sacaba lugar a la grilla; debajo, la barra no crece, porque ya
   tiene el alto de sus botones. El que se pierde se rompe. */
.relojYCorazones { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; line-height: 1; }
/* «🏠 Inicio» (21/10) es 16 más ancho que «✕ Salir»: jugando, la barra del crucigrama bajaba de renglón en 360 y en 390
   (medido: le faltaban 2 y 0). Un poco menos de aire entre los botones (siguen sin pisarse) y adentro de ellos: vuelve a
   entrar en un renglón, con 4 de sobra en 360 y 24 en 390. */
.barra.justa, .barra.justa .fila { gap: 4px; }
.barra.justa .boton.mini { padding-left: 6px; padding-right: 6px; }
.corazones { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; line-height: 1; white-space: nowrap; }
.corazones b { font-size: 15px; font-weight: var(--fuerte); color: var(--texto); font-variant-numeric: tabular-nums; }
.relojYCorazones small { font-size: 14px; color: var(--suave); }
.corazon { display: inline-block; }
.corazon.roto { animation: rompeCorazon .8s ease-out both; }
@keyframes rompeCorazon { 0% { transform: scale(1.6); } 25% { transform: scale(1.5) rotate(-14deg); } 50% { transform: scale(1.2) rotate(10deg); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .corazon.roto { animation: none; } }
.grilla.papel { gap: 3px; margin: 0 auto; user-select: none; -webkit-user-select: none; }
.grilla.papel .celda { background: #f3eeff; color: #1f1a3d; border: 0; border-radius: 6px; box-shadow: inset 0 -3px 0 #cfc6ee; }
.grilla.papel .celda.resuelta { background: #a6f0e6; box-shadow: inset 0 -3px 0 #62cfc2; }
.grilla.papel .celda.activa { background: #ffe2a8; box-shadow: inset 0 -3px 0 #f0b95a; }
.grilla.papel .celda.cursor { background: var(--amarillo); box-shadow: 0 0 0 3px var(--celeste); z-index: 1; }
.grilla.papel .celda.lapiz { color: #6d6699; }
.grilla.papel .celda.mal { background: #ffb4b4; box-shadow: inset 0 -3px 0 #e87878; animation: sacude .4s ease both; }
.grilla.papel .celda.entra { animation: pinta .5s ease both; }
/* La ola del final (15/10): un latido que recorre la grilla; antes y después de su turno, la casilla está como siempre. */
.grilla.papel .celda.ola { animation: latido .6s ease-in-out both; }
@keyframes latido { 0%, 100% { transform: none; filter: none; } 45% { transform: scale(1.18); filter: brightness(1.35); } }
@media (prefers-reduced-motion: reduce) { .grilla.papel .celda.ola { animation: none; } }
@keyframes sacude { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
/* La definición y el teclado: al pie de la pantalla aunque la grilla sea más alta (ocupa también el margen de main). */
.diaPanel {
  position: sticky; bottom: 0; z-index: 4; display: grid; gap: 6px;
  margin: auto -16px calc(-32px - env(safe-area-inset-bottom)); padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  background: var(--fondo); border-top: 1px solid var(--borde); box-shadow: 0 -10px 20px #14121fd9;
}
.diaPanel > * { min-width: 0; } /* sin esto, la fila de ayudas (que no parte renglón) ensanchaba toda la pantalla */
.diaFila { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; }
@media (max-width: 351px) { .dia, .diaPanel { gap: 4px; } } /* en 320, la barra y la fila de ayudas van en dos renglones: el mini entra igual */
.diaIr { flex: none; min-width: 72px; min-height: 56px; padding: 4px 6px; display: grid; place-content: center; gap: 0; line-height: 1.1; border: 2px solid var(--borde-toca); border-radius: 14px; background: transparent; color: var(--texto); font-size: var(--chica); cursor: pointer; }
.diaIr small { font-size: var(--chica); color: var(--suave); } /* «Anterior», «Siguiente»: ningún dibujo solo */
.diaLetra { flex: 1 1 0; min-width: min(100%, 4.6em); min-height: 56px; padding: 4px 6px; white-space: nowrap; border: 2px solid var(--borde-toca); border-radius: 999px; background: transparent; color: var(--texto); font-weight: var(--fuerte); font-size: var(--chica); cursor: pointer; }
.diaLetra small { color: var(--suave); font-weight: 400; font-size: var(--chica); }
.diaLetra[disabled] { color: #a9a4c4; border-color: var(--borde); cursor: default; }
.diaLetra { white-space: normal; } /* con la letra grande, la ayuda parte renglón en vez de salirse del botón */
@media (max-width: 399px) { /* en un celu (hasta 399 de ancho), lo que cuesta la ayuda va en un segundo renglón: con ◀ ▶ y su palabra no entra al lado */
  .diaLetra { white-space: normal; line-height: 1.15; padding: 3px 4px; }
  .diaLetra small { display: block; }
}
.diaPanel .definicion { font-size: var(--titulo); line-height: 1.2; min-height: 2.4em; overflow-wrap: anywhere; padding: 0 4px; display: flex; align-items: center; justify-content: center; text-align: center; }
/* La guía de la primera vez: una línea con la flecha de .senal, hacia el teclado o hacia la grilla. */
.diaGuia { text-align: center; color: var(--amarillo); font-weight: var(--fuerte); font-size: var(--letra); }
.diaGuia::after {
  content: ''; display: inline-block; width: 20px; height: 24px; margin-left: 8px; vertical-align: -5px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 48'%3E%3Cpath d='M20 3 37 24H27v21H13V24H3z' fill='%23ffd23f' stroke='%2314121f' stroke-width='3.5' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: guiaArriba .9s ease-in-out 6; animation-delay: var(--ya, 0s);
}
.diaGuia.abajo::after { transform: rotate(180deg); animation-name: guiaAbajo; }
.diaGuia.quieta::after { animation: none; }
@keyframes guiaArriba { 0%, 100% { transform: translateY(3px); } 50% { transform: translateY(-4px); } }
@keyframes guiaAbajo { 0%, 100% { transform: rotate(180deg) translateY(3px); } 50% { transform: rotate(180deg) translateY(-4px); } }
/* Las teclas tienen relieve (pedido de Verónica, 07/10: «más profundidad a cada tecla, visual al tacto»): la cara de
   arriba más clara, un canto oscuro abajo y su sombra. Al tocarla se hunde (baja lo que mide el canto, que desaparece)
   y se aclara, y vuelve a subir. */
.teclado { display: grid; gap: 10px; padding-bottom: 5px; user-select: none; -webkit-user-select: none; }
.teclas { display: flex; gap: 5px; justify-content: center; }
.tecla {
  flex: 0 0 calc((100% - 45px) / 10); height: 44px; padding: 0; border: 0; border-radius: 9px; cursor: pointer;
  background: linear-gradient(#6a5fc0, #4d4391); color: #fff; font-weight: var(--fuerte); font-size: 20px; text-shadow: 0 1px 0 #0005; /* la pieza: no crece con la letra del teléfono */
  box-shadow: 0 5px 0 #2a2356, 0 8px 8px #0007, inset 0 1px 0 #ffffff55, inset 0 -1px 0 #0003;
  touch-action: manipulation; /* dos toques seguidos no agrandan la pantalla */
}
.tecla.borrar { flex-basis: calc((100% - 45px) / 10 * 1.6 + 5px); background: linear-gradient(#ffe27a, #f5bf1f); color: #1b1600; text-shadow: none;
  box-shadow: 0 5px 0 #a87c06, 0 8px 8px #0007, inset 0 1px 0 #ffffffaa, inset 0 -1px 0 #0002; }
.tecla:active, .tecla.apretada { animation: tecla .22s ease-out both; }
@keyframes tecla {
  0%, 45% { transform: translateY(5px); filter: brightness(1.45); box-shadow: 0 0 0 #2a2356, 0 1px 2px #0007, inset 0 2px 5px #0006; }
  100% { transform: none; filter: none; }
}
.revelacion .medalla { font-size: var(--titulo); font-weight: var(--fuerte); color: var(--amarillo); }
.revelacion .corazonesFin { font-size: 26px; line-height: 1.2; letter-spacing: 2px; } /* los corazones que quedaron (15/10) */
/* Sólo para el lector de pantalla (el resultado, en el acto, mientras se ve el festejo). */
.soloLector { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (min-width: 700px) {
  .tecla { height: 52px; font-size: 26px; }
  .diaPanel .definicion { font-size: var(--grande); }
}
/* El podio del día, al final del Cruzados de la juntada. */
.podio .fila { flex-wrap: nowrap; padding: 8px 8px; border-radius: 10px; }
.podio .fila.nuestra { background: var(--superficie2); outline: 2px solid var(--amarillo); }
.podio .medalla { font-size: 26px; }
.podio .caras { flex: 1; font-size: var(--titulo); min-width: 0; overflow-wrap: anywhere; } /* «(ustedes)» baja de renglón si no entra */
.podio .caras strong { font-size: var(--chica); white-space: nowrap; }
.podio .tiempo { font-weight: var(--fuerte); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* La tabla del crucigrama del día (03/11, N.º 85): como el podio, con el lugar, el nombre de pila y el tiempo; la fila
   propia, marcada. Más juntas que las del podio: son diez. */
.ranking .fila { padding: 5px 8px; }
.ranking .lugar { min-width: 2.4em; text-align: center; font-weight: var(--fuerte); font-variant-numeric: tabular-nums; }
.ranking .quien { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ranking .quien strong { font-size: var(--chica); white-space: nowrap; }
/* «▶ Más crucigramas» y «▶ Otro crucigrama»: con el carpinchito que guía (body.carpiGuia), el texto le deja su lugar a
   la derecha (en 375 tapaba la última letra). */
body.carpiGuia .boton.principal.senal.anteriores { padding-right: 76px; }
body.carpiGuia .boton.principal.senal.manera { padding-right: 76px; } /* «😂 Mandá un chiste» (04/11), igual */
/* La espera de la carrera con desconocidos. */
.cola-caras { font-size: 34px; letter-spacing: 6px; min-height: 44px; }

/* El carpinchito que guía (03/11; web/carpi.js): muestra haciendo, una sola vez por juego, en una capa encima de todo
   (un toque la saltea). Va con la pata hasta lo que toca; el cartel tapa la definición con la jugada de práctica. */
.carpiCapa { position: fixed; inset: 0; z-index: 80; }
.carpi { position: fixed; left: 0; top: 0; width: 96px; height: auto; pointer-events: none; opacity: 0; filter: drop-shadow(0 6px 10px #000a); transform-origin: 0 0; transition: opacity .25s; } /* (se mueve con web/carpi.js: saltitos, apretar, y se da vuelta del lado derecho) */
.carpiCapa.visible .carpi { opacity: 1; }
.carpiCartel { position: fixed; display: grid; place-items: center; align-content: center; padding: 8px 12px; background: #2a2642; border: 2px solid var(--amarillo); border-radius: 16px; color: var(--texto); font-size: var(--letra); text-align: center; box-shadow: 0 8px 24px #000a; opacity: 0; transition: opacity .25s; }
.carpiCapa.visible .carpiCartel { opacity: 1; }
.carpiCapa.sale .carpi, .carpiCapa.sale .carpiCartel { opacity: 0; }
.carpiCapa.senala, .carpiCapa.senala * { pointer-events: none; } /* cuando alguien se traba: señala sin tapar; el toque llega al juego */
.carpiCapa.senala .carpiCartel { width: max-content; max-width: calc(100vw - 16px); }
.carpiCartel .pila { gap: 4px; }
.carpiCartel .practica { display: flex; gap: 6px; justify-content: center; }
.carpiCartel .practica span { width: 36px; height: 36px; display: grid; place-items: center; border: 2px solid var(--borde-toca); border-radius: 8px; background: #1b1830; font-weight: var(--fuerte); font-size: 20px; }
.carpiCartel .practica span.llena { border-color: var(--amarillo); background: #3a3360; }
.carpiCartel.fin strong { font-size: var(--titulo); color: var(--amarillo); }
/* la práctica de Juntalas (mostrarJuntalas, 04/11): seis palabras como las de verdad, de a tres, y «Probar» */
.practicaGrupos { width: 100%; }
.carpiCartel:has(.practicaGrupos) { align-content: start; padding-top: 16px; gap: 8px; } /* arriba y quieto: al juntarse, nada se corre */
.practicaGrupos .palabrasPractica { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: 100%; }
.practicaGrupos .palabraGrupo { min-height: 48px; display: grid; place-items: center; padding: 4px 2px; font-size: var(--chica); cursor: default; }
.practicaGrupos .probarPractica { pointer-events: none; min-height: 48px; display: grid; place-items: center; }
.practicaGrupos .grupoJunto { width: 100%; box-sizing: border-box; }
/* Adivinala (app.js, mostrarAdivinala): la práctica se da vuelta con los colores del juego y el final queda abajo */
.carpiCartel .practica span.bien { background: #1f7a45; border-color: #5ee38f; color: #fff; }
.carpiCartel .practica span.esta { background: #f2c230; border-color: #ffe27a; color: #1b1600; }
.carpiCartel .practica span.no { background: #3a3652; border-color: #3a3652; color: #c9c4e0; }
.carpiCartel.fin .pila + strong { font-size: var(--letra); margin-top: 6px; }
/* A quien recién empieza (app.js, recienEmpieza: menos de cinco juegos terminados), en el botón principal el carpinchito
   señala en lugar de la flecha amarilla: sentado adentro, en la esquina de abajo a la derecha, con la uña hacia lo que dice
   el botón; «toca» 5 s y queda quieto, como la flecha. En lo chico (teclas, el dial) sigue la flecha. */
body.carpiGuia .boton.principal.senal::after { width: 62px; height: 59px; right: 8px; bottom: 4px; transform: none; transform-origin: 0 0;
  background: url('carpinchos/senala.webp') center / contain no-repeat; animation: carpiSenala 1.4s ease-in-out 4; animation-delay: var(--ya, 0s); filter: drop-shadow(0 3px 6px #0008); }
@keyframes carpiSenala { 0%, 34%, 100% { transform: translate(0, 0); } 8%, 25% { transform: translate(-5px, -6px) rotate(-2deg); } 16% { transform: translate(0, 0); } } /* toca dos veces y descansa (03/11, «mejorar los movimientos») */
body.carpiGuia .boton.principal.senal.quieta::after { animation: none; }

/* La app guía (regla de Verónica, 07/10: «una flecha que le indique qué tocar»). La flecha va sobre lo único que hay
   que tocar ahora (app.js, senal). Viene de abajo a la derecha, como una mano, y su punta queda adentro de lo que
   señala: no tapa el texto ni corre nada de lugar. Le gana a «nada late ni señala solo» (libro general, capítulo 23). */
.senal { position: relative; }
.senal::after {
  content: ''; position: absolute; right: 10px; bottom: -18px; width: 34px; height: 41px; z-index: 3; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 48'%3E%3Cpath d='M20 3 37 24H27v21H13V24H3z' fill='%23ffd23f' stroke='%2314121f' stroke-width='3.5' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transform-origin: 50% 0; transform: rotate(-40deg); animation: senal .9s ease-in-out 6; animation-delay: var(--ya, 0s); filter: drop-shadow(0 3px 5px #000a);
}
/* app.js (guiaQuieta) le pasa --ya, lo que ya lleva sobre ese blanco: cada dibujo nuevo sigue donde iba, y a los 5 s para. */
.senal.quieta::after { animation: none; }
/* En el dial, quieta en una punta (o en el medio) diría «va acá»: recorre la barra de lado a lado y, a los 5 s, se va:
   queda el marco amarillo, quieto, sobre toda la barra. */
.dial.senal::after { right: auto; bottom: auto; top: 58px; left: 6%; transform: none; animation: recorre 2.2s ease-in-out 2 alternate; animation-delay: var(--ya, 0s); }
.dial.senal.quieta::after { display: none; }
.dial.senal.quieta .franja { box-shadow: 0 0 0 4px var(--amarillo); }
@keyframes recorre { from { left: 6%; } to { left: calc(94% - 34px); } }
.juego p + .boton { margin-top: 8px; } /* la línea del juego ya no es un párrafo largo: que no quede pegada al botón */
.secreto.senal::after { right: 22px; bottom: 6px; width: 42px; height: 50px; }
@keyframes senal { 0%, 100% { transform: rotate(-40deg) translateY(5px); } 50% { transform: rotate(-40deg) translateY(-7px); } }
/* Donde hay que elegir entre varios (los huecos de Antes o Después), la flecha señalaría uno solo: laten todos. */
.linea.laten button.hueco { border-color: var(--amarillo); color: var(--texto); animation: laten 1.1s ease-in-out 5; animation-delay: var(--ya, 0s); } /* después queda el marco amarillo, quieto */
.linea.laten.quieta button.hueco { animation: none; }
@keyframes laten { 50% { background: #ffd23f2e; } }

/* ——— El inicio: la caja de juegos (Verónica, 14/10: «todos los juegos tienen que estar en home. home tiene que ser un
   lugar agradable, con poco texto»). Lo armó el equipo de diseño, simulado (docs/diseno/2026-10-14-inicio/). Cada juego
   es una caja de ludoteca: el borde de su color, la tapa con su carpincho asomado y la insignia de su objeto, y abajo
   el nombre en la letra de los carteles del estero. Toda la caja es el botón; tiene canto y se hunde al tocarla.
   Contrastes medidos: el borde contra el fondo, de 7 a 17 a 1 (pide 3); la letra crema sobre la caja, de 10,9 a 12,6
   (pide 4,5, y 7 lo que se lee de corrido). El color de cada juego es su cara: ninguno es el rosa ni el naranja de
   actuar, ni el amarillo de la flecha. */
.inicio .cabeza { display: grid; justify-items: center; gap: 4px; }
.inicio h1 { margin: 0; line-height: 0; width: 100%; position: relative; container-type: inline-size; }
.inicio .logo { width: clamp(168px, 60%, 232px); margin: 0 auto; } /* era de 360: la marca ya la llevan las diez cajas */
.inicio .lema { margin-bottom: 4px; }
/* Halloween (28/10, app.js, halloween): las calabazas, a los costados del logo y apoyadas en su renglón; los murciélagos,
   en el lugar libre arriba a la derecha del carpincho. Todo se mide con el ancho del logo (--L, el mismo de .logo en
   unidades del h1, cqw: así sirve también para lo alto; el alto del logo es 620/1200 de eso), y queda igual en el celu,
   en la tablet y en la bienvenida. Un navegador sin cqw (de antes de 2022) no la muestra. */
.halloween { position: absolute; inset: 0; pointer-events: none; --L: clamp(168px, 60cqw, 232px); }
.bienvenida .halloween { --L: clamp(200px, 70cqw, 280px); }
@supports not (width: 1cqw) { .halloween { display: none; } }
.halloween img { position: absolute; display: block; height: auto; }
.halloween .calabaza { width: calc(var(--L) * .24); bottom: calc(var(--L) * -.012); }
.halloween .calabaza.izq { right: calc(50% + var(--L) / 2 - var(--L) * .03); }
.halloween .calabaza.der { width: calc(var(--L) * .18); left: calc(50% + var(--L) / 2 - var(--L) * .025); }
.halloween .murcielago { left: calc(50% + var(--L) * var(--x)); top: calc(var(--L) * .517 * var(--y)); width: calc(var(--L) * var(--t)); }
/* Las telarañas, en las esquinas de arriba (pegadas al logo en la tablet); de la izquierda baja la araña colgada y por la
   de la derecha caminan las chiquitas. Todo dura cinco segundos y queda quieto (app.js, halloween; --ya, como la flecha). */
.halloween { --w: calc(var(--L) * .3); --borde: max(0px, 50% - var(--L) * .86); --arana: calc(var(--L) * .075); --largo: calc(var(--L) * .15); }
.halloween .telarana { width: var(--w); top: 0; animation: telarana 5s ease-in-out var(--ya, 0s) both; }
.halloween .telarana.izq { left: var(--borde); transform-origin: 0 0; }
.halloween .telarana.der { right: var(--borde); transform-origin: 100% 0; }
.halloween .colgada { position: absolute; left: calc(var(--borde) + var(--w) * .35 - var(--arana) / 2); top: calc(var(--w) * .35); width: var(--arana); height: calc(var(--largo) + var(--arana));
  transform-origin: 50% 0; animation: columpio 5s ease-in-out var(--ya, 0s) both; }
.halloween .hilo { position: absolute; left: calc(50% - .5px); top: 0; width: 1px; height: var(--largo); background: #e4def7; opacity: .6; transform-origin: 50% 0; animation: hilo 5s ease-in-out var(--ya, 0s) both; }
.halloween .colgada .arana { left: 0; top: 0; width: var(--arana); rotate: 180deg; animation: baja 5s ease-in-out var(--ya, 0s) both; }
.halloween .caminante { position: absolute; --tam: calc(var(--L) * var(--t)); width: var(--tam); height: var(--tam);
  left: calc(100% - var(--borde) + var(--w) * var(--cx) - var(--tam) / 2); top: calc(var(--w) * var(--cy) - var(--tam) / 2); animation: camina 5s ease-in-out var(--ya, 0s) both; }
.halloween .caminante img { position: static; width: 100%; animation: patitas .16s steps(1) calc(var(--ya, 0s) + .4s) 24 both; }
@keyframes telarana { 0%, 100% { transform: none; } 12% { transform: rotate(2.5deg) scale(1.03); } 30% { transform: rotate(-2deg) scale(.98); }
  50% { transform: rotate(1.4deg) scale(1.015); } 70% { transform: rotate(-.8deg); } 85% { transform: rotate(.3deg); } }
@keyframes columpio { 0%, 45%, 100% { transform: none; } 58% { transform: rotate(7deg); } 70% { transform: rotate(-5deg); } 82% { transform: rotate(3deg); } 92% { transform: rotate(-1deg); } }
@keyframes hilo { 0%, 8% { transform: scaleY(0); } 42% { transform: scaleY(1.1); } 50% { transform: scaleY(.94); } 57% { transform: scaleY(1.03); } 64%, 100% { transform: none; } }
@keyframes baja { 0%, 8% { translate: 0 0; } 42% { translate: 0 calc(var(--largo) * 1.1); } 50% { translate: 0 calc(var(--largo) * .94); } 57% { translate: 0 calc(var(--largo) * 1.03); } 64%, 100% { translate: 0 var(--largo); } }
@keyframes camina { 0%, 8% { translate: 0 0; } 85%, 100% { translate: calc(var(--w) * var(--dx)) calc(var(--w) * var(--dy)); } }
@keyframes patitas { 0% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
/* La bienvenida de la app instalada (23/10, app.js, bienvenida): la marca, el saludo y «▶ ¡A jugar!», en el medio de la pantalla */
.bienvenida { min-height: 78vh; justify-content: center; gap: 20px; }
.bienvenida .logo { width: clamp(200px, 70%, 280px); }
.bienvenida .boton.principal { min-height: 88px; font-size: var(--titulo, 22px); }
.bienvenida .hola { margin: 0; text-align: center; font-weight: 800; font-size: var(--titulo); }
/* el sonido apagado, dicho debajo de «▶ ¡A jugar!» (24/10, app.js, avisoSonidoApagado) */
.bienvenida .sonidoApagado { display: grid; justify-items: center; gap: 8px; text-align: center; }
.bienvenida .sonidoApagado p { margin: 0; color: var(--suave); font-weight: 700; }
/* La llave del sonido en el inicio (20/10): en su barra, arriba a la izquierda, como en las otras pantallas; encima del
   logo tapaba el carpincho, y con la letra grande, las letras. */
.inicio > .barra { margin-bottom: 0; }
/* «👤 Perfil» (21/10), a la derecha aunque la barra baje de renglón (en 320 con la letra al doble) */
.inicio > .barra > :last-child { margin-left: auto; }
.estante h2 { font: 800 var(--grande)/1.15 Bitter, Georgia, serif; color: #fff7e6; margin: 12px 0 12px; text-align: center; } /* centrado, como el logo (15/10: «la portada no tiene simetría») */
.estante .diaGuia { margin: -4px 0 12px; }
/* De a dos, nunca de a tres: con tres por fila, «Antes o Después» quedaba sola abajo, en la tablet parada (Verónica,
   15/10: «la portada no tiene simetría»). De a una si cada caja mediría menos de 7,5 letras o de 150 puntos (en 320, o
   con la letra muy grande: la letra decide). Hasta el 21/10 eran 8,5 letras, y con la letra de Verónica (19, su iPhone)
   iban de a una: el inicio medía 2.486 puntos, más de tres pantallas (la regla de diseño en el inicio, «Regla de diseño
   en home»). En la tablet acostada, de a cuatro (abajo). */
.cajas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(7.5em, 150px, calc((100% - 12px) / 2))), 1fr)); gap: 16px 12px; }
.caja.ancha { grid-column: 1 / -1; }
.caja {
  container: caja / inline-size; position: relative; display: block; width: 100%; padding: 0; margin: 0 0 5px; text-align: left; cursor: pointer;
  border: 3px solid var(--c); border-radius: 20px; background: var(--relleno); color: #fff7e6; overflow: hidden;
  box-shadow: 0 5px 0 var(--canto), 0 10px 18px #0007; transition: transform .08s ease, box-shadow .08s ease;
}
.caja:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--canto), 0 4px 8px #0007; }
.caja .cuerpo { display: flex; flex-direction: column; height: 100%; }
.caja .tapa { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 2px solid #0005;
  background: radial-gradient(110% 95% at 50% 100%, var(--tapa) 0%, var(--relleno) 80%); }
.caja .tapa .carpincho { position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%); height: 80%; width: auto; }
.caja .tapa .carpincho.alto { height: 97%; }
.caja .tapa .carpincho.izq { left: 36%; z-index: 1; }
.caja .tapa .carpincho.der { left: 64%; }
.caja .tapa .insignia { position: absolute; top: 8px; right: 8px; width: 40px; height: 40px; z-index: 3; filter: drop-shadow(0 2px 3px #0008); } /* el objeto, casi el doble que en el menú: se reconoce de lejos */
.caja .pie { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 12px 12px; }
.caja .nombre { font: 800 var(--titulo)/1.1 Bitter, Georgia, serif; margin: 0; overflow-wrap: normal; word-break: normal; hyphens: none; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .3em; } /* «la carrera» baja de renglón si no entra */
.caja .nombre small { font: 400 var(--letra)/1.2 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: #ece6f7; white-space: nowrap; }
.caja .bajada { font-size: var(--chica); color: #ece6f7; line-height: 1.25; }
.caja .jugadores { font-size: var(--chica); font-weight: var(--fuerte); color: #ece6f7; line-height: 1.25; } /* cuántos juegan (25/10, N.º 60) */
/* Alguien espera para jugar (27/10; app.js, CON_DESCONOCIDOS): en la caja, una línea que se ve de lejos */
.caja .esperan { align-self: flex-start; margin-top: 4px; padding: 3px 10px; border-radius: 999px; background: #fffaf0; color: #14121f; font-size: var(--chica); font-weight: var(--fuerte); line-height: 1.3; }
.esperaCola .cargando { min-height: 24px; }
.esperaCola p { margin: 0; }
/* De a una columna, con la letra de fábrica (un celu de 320): la caja se acuesta, con la tapa a la izquierda. */
@container caja (min-width: 15em) {
  .caja:not(.ancha) .cuerpo { flex-direction: row; }
  .caja:not(.ancha) .tapa { flex: 0 0 112px; aspect-ratio: auto; min-height: 112px; border-bottom: 0; border-right: 2px solid #0005; }
  .caja:not(.ancha) .pie { justify-content: center; }
  .caja:not(.ancha) .tapa .carpincho:only-of-type { left: 42%; }
  .caja:not(.ancha) .tapa .insignia { width: 34px; height: 34px; top: 6px; right: 6px; }
}
/* Con la letra grande, a todo el ancho y parada (el nombre necesita el renglón entero): la tapa, más baja. */
@container caja (min-width: 300px) and (max-width: 15em) { .caja:not(.ancha) .tapa { aspect-ratio: 5 / 2; } }
/* De a dos con la letra grande (cada caja, de 9 letras o menos): el dibujo más bajo, la letra igual (21/10). */
@container caja (max-width: 9em) { .caja:not(.ancha) .tapa { aspect-ratio: 2 / 1; } }

/* La carrera: los cinco corredores en la largada, sobre la bandera a cuadros. Es la caja de la marca: el nombre en el
   dorado del «Go!» del logo. */
.caja.j-carrera { --c: #fff7e6; --relleno: #0f3340; --tapa: #1d6a7e; --canto: #06161c; }
.caja.j-carrera .nombre { color: #f2c879; font-size: var(--grande); }
.caja.ancha .tapa { aspect-ratio: 3 / 1; }
.caja.ancha .tapa > .carpincho { height: 84%; }
.caja.ancha .tapa > .carpincho.alto { height: 97%; }
.caja .fila5 { position: absolute; left: 0; right: 0; bottom: 12px; height: 100%; display: flex; justify-content: center; align-items: flex-end; }
.caja .fila5 .carpincho { position: static; transform: none; height: 66%; margin: 0 -6px; }
.caja .fila5 .carpincho.alto { height: 80%; }
.caja .fila5 .carpincho.centro { height: 76%; z-index: 2; }
.caja .cuadros { position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: repeating-conic-gradient(#f5f3ff 0 25%, #14121f 0 50%) 0 0 / 12px 12px; z-index: 2; }
/* Los crucigramas: una grilla tenue de fondo en la tapa (son de la misma familia); el del día, con un crucigrama de papel. */
.caja.cuadriculada .tapa { background: linear-gradient(#ffffff12 1px, transparent 1px) 0 0 / 14px 14px, linear-gradient(90deg, #ffffff12 1px, transparent 1px) 0 0 / 14px 14px, radial-gradient(110% 95% at 50% 100%, var(--tapa) 0%, var(--relleno) 80%); }
.caja.j-dia .tapa .carpincho.izq { left: 30%; height: 84%; }
.caja .papel { position: absolute; right: 14%; top: 14%; width: 30%; aspect-ratio: 1; display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; padding: 3px; background: #cfc6ee; border-radius: 6px; transform: rotate(-5deg); box-shadow: 0 6px 12px #0007; }
.caja .papel i { background: #f3eeff; border-radius: 2px; }
.caja .papel i.negra { background: #1f1a3d; }
/* Juntalas: el agua del estero, como en su pantalla. */
.caja.j-grupos .tapa { background: radial-gradient(110% 95% at 50% 100%, #2f6a45 0%, transparent 70%), linear-gradient(180deg, #241e48, #133a4a); }
/* Adivinala (02/11): el mismo estero, el de lentes a la izquierda y una prueba con sus marcas a la derecha. */
.caja.j-palabra .tapa { background: radial-gradient(110% 95% at 50% 100%, #6a2f55 0%, transparent 70%), linear-gradient(180deg, #241e48, #133a4a); }
.caja.j-palabra .tapa .carpincho.izq { left: 24%; height: 84%; }
.caja .fichasPalabra { position: absolute; right: 7%; top: 50%; transform: translateY(-50%); display: flex; gap: 4px; }
.caja .fichasPalabra i { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 6px; font-style: normal; font-weight: 800; font-size: 15px; background: #3a3652; color: #c9c4e0; }
.caja .fichasPalabra i.bien { background: #1f7a45; color: #fff; }
.caja .fichasPalabra i.esta { background: #f2c230; color: #1b1600; }
/* En la tablet acostada, de a cuatro, y la caja ancha ocupa dos: las filas quedan completas (en grupo, las dos anchas
   juntas y las cuatro chicas juntas). De a uno son cuatro desde el 15/10 (con Camalotes): ahí van las cuatro iguales, en
   una fila; con dos anchas, el mini y Juntalas quedaban solos en la segunda. */
@media (min-width: 900px) and (orientation: landscape) {
  main.ancho .cajas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  main.ancho .caja.ancha { grid-column: span 2; }
  main.ancho .estante[aria-labelledby='estanteUno'] .caja.ancha { grid-column: auto; }
  main.ancho .estante[aria-labelledby='estanteUno'] .caja.ancha .tapa { aspect-ratio: 16 / 10; }
  main.ancho .inicio > .boton, main.ancho .inicio > .seguir, main.ancho .inicio > .tarjeta { width: 100%; max-width: 560px; align-self: center; } /* lo de arriba, al ancho de un celu */
}

/* Lo que quedó a medias, arriba de todo, con el color y el carpincho de su juego. */
.seguir { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 14px; border: 3px solid var(--c); border-radius: 20px; background: var(--relleno); }
.seguir .boton { grid-column: 1 / -1; }
/* el «✕» que la saca de arriba por hoy (04/11): 56 de lado, arriba a la derecha y sin pisar «Seguir»; sin el color de
   actuar (regla de diseño, 1); el borde, 5,8 a 1 o más contra el relleno de cada juego, y la cruz, 10,9 a 1 o más (6) */
.seguir .sacarArriba { grid-row: 1; grid-column: 3; align-self: start; width: 56px; height: 56px; margin: -6px -6px 0 0; padding: 0; display: grid; place-items: center; border: 2px solid #b8b3d6; border-radius: 50%; background: transparent; color: #fff7e6; font-size: 22px; font-weight: 700; line-height: 1; cursor: pointer; touch-action: manipulation; }
.seguir .sacarArriba:focus-visible { outline: 3px solid #fff7e6; outline-offset: 2px; }
.seguirTexto { font: 800 var(--titulo)/1.15 Bitter, Georgia, serif; color: #fff7e6; }

/* El paso de un juego en grupo y el de entrar con el código: la misma caja arriba (no es un botón), quién sos y el
   botón de color, pegado abajo si la pantalla no entra (es hijo directo de la pantalla: así `sticky` funciona). */
.cabezaPaso { cursor: default; }
.cabezaPaso:active { transform: none; box-shadow: 0 5px 0 var(--canto), 0 10px 18px #0007; }
.cabezaPaso .nombre { font-size: var(--grande); }
.cabezaPaso .bajada { font-size: var(--letra); color: #f3eefb; } /* es una frase: en 17 y a 7 a 1 o más */
.tituloPaso { font: 800 var(--grande)/1.15 Bitter, Georgia, serif; color: #fff7e6; }
.rotulo { display: block; font-weight: var(--fuerte); font-size: var(--letra); }
.vasComo { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 12px 16px; }
.vasComo strong { white-space: nowrap; }
/* El texto gris de adentro del campo («Cómo te dicen») daba 3 a 1 (el del navegador): así, 5,8. */
input.campo::placeholder { color: #a9a4c4; opacity: 1; }
/* El foco, a la vista para quien maneja la app con teclado: amarillo, 12,8 a 1 contra el fondo. */
:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 3px; }
/* «Me pasaron un código», chico y al centro: es para quien ya tiene las cuatro letras. */
.inicio > .boton.mini { align-self: center; }
/* El perfil (21/10, Verónica: «Botones perfil con El Progreso en los juegos?»): arriba, tu cara grande y tu nombre;
   abajo, un renglón por juego de a uno, con el borde y el relleno de su caja del inicio y su carpincho, el nombre en la
   letra de los carteles y los números. Cada renglón es un botón (abre su juego): 72 de alto o más. */
.yo { display: grid; justify-items: center; gap: 8px; text-align: center; }
.caraGrande { display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; background: var(--superficie2); border: 3px solid #f2c879; font-size: 56px; line-height: 1; }
.yo .tituloPaso { overflow-wrap: anywhere; }
.progresos { display: grid; gap: 12px; margin-top: 8px; }
.progreso { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; width: 100%; min-height: 72px; padding: 12px; margin: 0; border: 3px solid var(--c); border-radius: 20px;
  background: var(--relleno); color: #fff7e6; text-align: left; font: inherit; cursor: pointer; }
.progreso:active { transform: scale(.98); }
.progreso .texto { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.progreso .nombreJuego { font: 800 var(--titulo)/1.15 Bitter, Georgia, serif; }
.progreso .datos { display: flex; flex-wrap: wrap; gap: 2px 14px; font-weight: var(--fuerte); } /* cada número con su palabra; con la letra al doble en 320, baja de renglón (no se corta) */
/* los animales de Camalotes: como la tira de su mapa (prototipos/unir/mapa.css, .animales), en medallones con el borde
   dorado de los carpinchos (21/10, N.º 39: «Que se vean los logros con más entusiasmo») */
.animalesPerfil { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.animalesPerfil img { width: 48px; height: 48px; padding: 4px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, #fffaf0, #f2e4c8); border: 2px solid #f2c879;
  box-shadow: 0 2px 8px #0006, 0 0 0 2px #f2c87933; object-fit: contain; }
.animalesPerfil img.recien { border-color: var(--amarillo); box-shadow: 0 0 0 3px var(--amarillo), 0 0 16px #ffd23f99; } /* el que lleva «¡Nuevo!» */
/* El número de cada dato, destacado: en el amarillo de los logros (11 a 1 o más sobre el relleno de cada renglón). */
.progreso .cifra { font: 800 var(--titulo)/1 Bitter, Georgia, serif; color: var(--amarillo); }
/* «¡Nuevo!»: lo ganado desde la última vez que se abrió el perfil. Una etiqueta quieta, no un botón (no se toca). */
.nuevo { display: inline-block; margin-left: 6px; padding: 2px 10px; border-radius: 999px; background: var(--amarillo); color: #1b1600;
  font: 800 var(--chica)/1.3 system-ui, sans-serif; vertical-align: middle; white-space: nowrap; }
/* La entrada, una vez al abrir el perfil (app.js, perfil: --desde, el reloj en negativo; menos de 2,4 s): el número de
   la racha sube, las medallas aparecen con un destello dorado de uno en uno y los animales entran como medallas. Con
   «reducir movimiento», ya están. */
.perfil.brilla .rachaPerfil .numero { animation: perfilNumero .7s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: var(--desde, 0s); }
.perfil.brilla .medallaPerfil .emoji { animation: perfilMedalla 1s ease-out both; animation-delay: calc(var(--desde, 0s) + .3s + var(--i, 0) * .18s); transform-origin: 50% 80%; } /* crece hacia arriba: no tapa sus días */
.perfil.brilla .animalesPerfil img { animation: perfilAnimal .5s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(var(--desde, 0s) + .6s + var(--i, 0) * .12s); }
.perfil.brilla .nuevo { animation: perfilAnimal .4s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(var(--desde, 0s) + 1.1s); }
@keyframes perfilNumero { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes perfilMedalla {
  0% { opacity: 0; transform: scale(.3) rotate(-14deg); }
  45% { opacity: 1; transform: scale(1.18) rotate(4deg); filter: drop-shadow(0 0 20px #ffd76a) brightness(1.25); }
  100% { opacity: 1; transform: none; }
}
@keyframes perfilAnimal { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .perfil.brilla * { animation: none !important; } }
a.legal { display: inline-block; min-height: 56px; line-height: 56px; padding: 0 14px; color: var(--suave); } /* el enlace de privacidad: se toca con un dedo (regla de diseño, 4) */
/* La letra chica de «Instalar» (20/10, Verónica: «en letra chica al instalar como cualquier otra app»): 14, lo menos que
   se permite (regla de diseño, 5: tampoco los avisos legales bajan de 14); la frase entera se toca (56 de alto). */
a.letraChica { display: flex; align-items: center; min-height: 56px; font-size: max(14px, calc(var(--base) * 14 / 16)); line-height: 1.35; color: var(--suave); text-decoration: underline; text-underline-offset: 3px; }
/* «Elegir otro juego» (17/10, Gonza: «muchos botones»): los seis juegos, de a dos por fila; un toque elige y vuelve */
.juegosLista { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.juegosLista.unaColumna { grid-template-columns: 1fr; } /* si un nombre no entra (la letra grande; app.js, ajustarLista) */
.juegoOpcion { display: flex; align-items: center; gap: 10px; min-height: 72px; padding: 8px 12px; border: 2px solid var(--borde-toca); border-radius: 16px; background: transparent; color: var(--texto); text-align: left; font: inherit; cursor: pointer; }
.juegoOpcion span { display: flex; flex-direction: column; }
.juegoOpcion b { font-size: var(--letra); }
.juegoOpcion small { color: var(--suave); font-size: 15px; }
.juegoOpcion[aria-pressed='true'] { border-color: var(--celeste); background: #173c44; }
.juegoOpcion:active { transform: scale(.97); }
/* Agrandar y mover los tableros (web/zoom.js; 20/10, Verónica: «se debe poder mover y agrandar pero ... siempre tiene
   que haber un botón que diga "centrar"»). La página no se agranda: con dos dedos se agranda el tablero, que sabe
   volver. Sin agrandar, un dedo baja la pantalla (pan-y) y toca la casilla. */
html { touch-action: pan-x pan-y; }
.zoom { position: relative; overflow: hidden; width: fit-content; max-width: 100%; margin: 0 auto; border-radius: 8px; }
.zoom > .zoomCapa { transform-origin: 0 0; will-change: transform; }
.zoom > .zoomCapa > .grilla { margin: 0; }
.zoom.agrandado { touch-action: none; box-shadow: 0 0 0 2px var(--borde-toca); }
.zoomCentrar[hidden] { display: none; }
.zoomCentrar { position: absolute; top: 6px; right: 6px; z-index: 3; background: #14121fe6; color: var(--texto); border: 2px solid var(--amarillo); }
.mesa > .zoom { grid-area: grilla; margin: 0; }

/* La charla de la juntada, cada uno en su casa (web/charla.js; 20/10, Verónica: «alguna forma de chat para cuando hay
   momentos de preguntas y respuestas»). Pegada abajo: los dos últimos mensajes (se tocan para ver todo), qué es lo que se
   escribe ahora y la caja con «Mandar». Lo que hay detrás le deja lugar abajo (--alto-charla, lo mide charla.js); los
   botones principales que quedan pegados abajo se paran encima de ella. Contrastes (fórmula de WCAG, 20/10): la letra
   clara, 14,6 a 1 sobre la barra y 12,7 en la caja; el gris de los nombres y el rótulo, 7,9; el amarillo, el verde y el
   celeste, 11,1, 9,8 y 10,1; el texto de ejemplo de la caja, 5,8; el borde de la caja, 3,7 contra la barra y 3,2 contra
   su fondo; «Mandar» principal, el de la app (5,9 a 1). */
.charla {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; max-width: 560px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 4px 12px calc(10px + env(safe-area-inset-bottom)); /* la columna no se estira con la caja */
  background: var(--superficie); border-top: 2px solid var(--borde-toca); border-radius: 18px 18px 0 0; box-shadow: 0 -6px 20px #0009;
}
.charla[hidden], .charla-velo[hidden], .charla-rotulo[hidden], .charla-no[hidden], .charla-no:empty { display: none; }
.charla.conTeclado { padding-bottom: 8px; }
.charla-ver {
  display: flex; align-items: flex-end; gap: 10px; width: 100%; min-height: 56px; margin: 0; padding: 6px 2px;
  background: transparent; border: 0; color: var(--texto); text-align: left; font: inherit; cursor: pointer;
}
.charla-ultimos { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 0; display: grid; gap: 2px; }
.charla-ultimos .charla-msj { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--chica); }
.charla-vertodo { flex: none; font-size: var(--chica); font-weight: var(--fuerte); color: var(--celeste); text-decoration: underline; text-underline-offset: 3px; padding: 2px 0; }
.charla-msj { line-height: 1.35; overflow-wrap: anywhere; color: var(--texto); }
.charla-msj strong { color: var(--suave); font-weight: var(--fuerte); }
.charla-msj.mio strong { color: var(--celeste); }
.charla-msj.marca-palabra span, .charla-msj.marca-pista span { color: var(--amarillo); font-weight: var(--fuerte); }
.charla-msj.marca-si span { color: var(--verde); font-weight: var(--fuerte); }
.charla-msj.pendiente span, .charla-estado, .charla-msj.vacio { color: var(--suave); }
.charla-rotulo { font-size: var(--chica); font-weight: var(--fuerte); color: var(--suave); padding: 0 2px; }
.charla-rotulo.importante { color: var(--amarillo); font-size: var(--letra); }
.charla-fila { display: flex; gap: 8px; align-items: flex-end; margin: 0; min-width: 0; }
.charla-campo {
  flex: 1; min-width: 0; min-height: 56px; max-height: 96px; margin: 0; padding: 14px; resize: none; overflow-y: auto;
  border-radius: 14px; border: 2px solid var(--borde-toca); background: var(--superficie2); color: var(--texto);
  font: inherit; font-size: var(--letra); line-height: 1.4; outline: none;
}
.charla-campo::placeholder { color: #a9a4c4; opacity: 1; }
.charla-campo:focus { border-color: var(--rosa); }
.charla-campo[disabled] { background: #2a2640; color: #c4bfdc; }
.charla-fila.importante .charla-campo:not(:focus) { border-color: var(--amarillo); }
/* «Mandar»: 56 de alto, y con el color de actuar sólo cuando escribir es lo que hay que hacer ahora. No es el botón
   pegado de la pantalla: se queda en su fila. */
.charla .charla-mandar.boton { width: auto; flex: none; min-width: 96px; min-height: 56px; padding: 8px 18px; font-size: var(--letra); position: relative; bottom: auto; box-shadow: none; }
/* La flecha, desde arriba: abajo de todo no hay lugar (la de siempre viene de abajo, estilos.css, .senal) */
.charla .charla-mandar.senal::after { right: auto; left: 50%; bottom: auto; top: 6px; margin-left: -17px; transform: rotate(-150deg); animation-name: senalArriba; }
.charla .charla-mandar.senal.quieta::after { animation: none; }
@keyframes senalArriba { 0%, 100% { transform: rotate(-150deg) translateY(5px); } 50% { transform: rotate(-150deg) translateY(-7px); } }
.charla-no { color: var(--amarillo); font-weight: var(--fuerte); font-size: var(--chica); padding: 0 2px; }
/* La pantalla de atrás le deja lugar, y lo que se pega abajo se para encima de la charla. */
body.conCharla main { padding-bottom: calc(var(--alto-charla, 140px) + 24px); }
body.conCharla main .boton.principal, body.conCharla main .pieFijo { bottom: calc(var(--alto-charla, 140px) + 12px); } /* los de la pantalla, no «Mandar» */
/* apagado («Elegí a alguien») no hace falta pegado: con la charla abajo, tapaba las caras para votar */
body.conCharla main .boton.principal[disabled] { position: static; }
/* La charla entera: toda la pantalla, del más viejo (arriba) al más nuevo, con «Cerrar» fijo arriba y la caja abajo. */
.charla-velo { position: fixed; inset: 0; z-index: 54; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: var(--fondo); padding-bottom: calc(var(--alto-charla, 140px) + 12px); }
.charla-hoja { max-width: 560px; margin: 0 auto; padding: 0 16px 16px; display: grid; gap: 12px; }
.charla-cabeza { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(12px + env(safe-area-inset-top)) 0 10px; background: var(--fondo); border-bottom: 1px solid var(--borde); }
.charla-titulo { font-size: var(--titulo); }
.charla-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.charla-lista .charla-msj { justify-self: start; max-width: 88%; padding: 8px 12px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px 14px 14px 4px; }
.charla-lista .charla-msj.mio { justify-self: end; background: var(--superficie2); border-radius: 14px 14px 4px 14px; }
/* Lo que se escribió para jugar, a la vista en la pantalla del juego: la palabra de cada uno (El Colado), la pista. */
.dicho { font-weight: var(--fuerte); color: var(--amarillo); overflow-wrap: anywhere; text-align: right; }
.orden .dicho { margin-left: 6px; }
.persona .dicho { text-align: center; font-size: var(--chica); line-height: 1.25; max-width: 100%; }
.pistaEscrita { font-size: var(--grande); font-weight: var(--fuerte); color: var(--amarillo); overflow-wrap: anywhere; }
/* «¿Dónde juegan?», al armar la juntada: dos opciones iguales, una elegida */
.dondeJuegan { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dondeJuegan button { min-height: 72px; padding: 10px 12px; border: 2px solid var(--borde-toca); border-radius: 16px; background: transparent; color: var(--texto); font: inherit; font-weight: var(--fuerte); cursor: pointer; }
.dondeJuegan button[aria-pressed='true'] { border-color: var(--celeste); background: #173c44; }
.dondeJuegan button:active { transform: scale(.97); }
/* En la Onda: de quién es el punto, con su nombre (20/10: «como lo ponemos claro para que no haya duda»). */
.preguntaOnda { font-size: var(--titulo); font-weight: var(--fuerte); }
/* dos renglones reservados, en la espera y al marcar: la barra no baja al encenderse (24/10, bajaba 28 px) */
.preguntaOnda.reserva { min-height: 2.7em; display: flex; align-items: center; justify-content: center; }

/* ——— El Garabato (boceto, 20/10/2026; app.js, garabatoPantalla; web/garabato/lienzo.js) ——— */
/* El lienzo: cuadrado, de papel, del mismo tamaño en todos los celus. Mientras se dibuja, entra entero con la consigna,
   los colores y «¡La dijeron!» en un celu de 375 × 771 (el de Verónica): por eso se achica con el alto. */
.lienzo { position: relative; width: min(100%, max(240px, calc(100dvh - 400px))); aspect-ratio: 1; margin: 0 auto; border-radius: 18px; background: #fffdf6; box-shadow: 0 0 0 2px var(--borde); overflow: hidden; }
.dibujando .lienzo { width: min(100%, max(220px, calc(100dvh - 400px))); }
.lienzo canvas { display: block; width: 100%; height: 100%; touch-action: auto; }
.lienzo.editable { box-shadow: 0 0 0 3px var(--amarillo); }
.lienzo.editable canvas { touch-action: none; cursor: crosshair; }
.lienzoAyuda { position: absolute; left: 0; right: 0; top: 42%; text-align: center; color: #4a4560; font-size: var(--titulo); font-weight: var(--fuerte); pointer-events: none; }
.lienzoAyuda[hidden] { display: none; }
.marcadorGarabato { display: flex; justify-content: space-between; align-items: center; gap: 8px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 999px; padding: 6px 16px; }
.marcadorGarabato b { font-size: var(--titulo); color: var(--amarillo); }
/* el orden de los dibujos (30/10, Gonza: «Debería ir por orden»; app.js, ordenGarabato): las caras en orden, quien dibuja
   ahora con el anillo amarillo, los que ya dibujaron apagados; nada se mueve (regla de diseño, 3) */
.ordenGarabato { display: grid; gap: 6px; justify-items: center; }
.ordenGarabato .pasos { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.ordenGarabato .paso { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--superficie); border: 2px solid var(--borde); font-size: 20px; line-height: 1; }
.ordenGarabato .paso.hecho { opacity: .4; }
.ordenGarabato .paso.ahora { border-color: var(--amarillo); box-shadow: 0 0 0 3px var(--amarillo); }
.consigna { display: grid; line-height: 1.15; min-width: 0; }
.consigna b { font-size: var(--grande); color: var(--amarillo); overflow-wrap: anywhere; }
.cartasGarabato { display: grid; gap: 12px; }
.cartaGarabato { min-height: 104px; display: grid; gap: 4px; place-content: center; padding: 14px 16px; border-radius: var(--radio); border: 3px solid var(--amarillo); background: #fffdf6; color: #14121f; font: inherit; text-align: center; cursor: pointer; }
.cartaGarabato b { font-size: var(--grande); line-height: 1.1; }
.cartaGarabato span { color: #4a4560; }
.cartaGarabato:active { transform: scale(.98); }
.cartasGarabato.senal::after { bottom: -14px; }
.paleta { display: flex; gap: 8px; align-items: center; }
.paleta .color { flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--c); border: 3px solid #f5f3ff; cursor: pointer; }
.paleta .color[aria-pressed='true'] { box-shadow: 0 0 0 4px var(--amarillo); }
.paleta .deshacer { flex: 1; min-height: 56px; min-width: 0; padding: 0 10px; }
.quienGarabato { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.quienGarabato .boton { min-height: 64px; }
.palabraGarabato { font-size: 36px; font-weight: var(--fuerte); color: var(--amarillo); line-height: 1.1; overflow-wrap: anywhere; }
.revelaGarabato p { margin: 0; }
.galeriaGarabato { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.galeriaGarabato figure { margin: 0; display: grid; gap: 6px; }
.galeriaGarabato canvas { width: 100%; height: auto; aspect-ratio: 1; border-radius: 14px; display: block; }
.galeriaGarabato figcaption { display: grid; gap: 2px; }
.fotoGarabato { width: 100%; max-height: 320px; object-fit: cover; border-radius: 14px; }
/* El Cuadro (21/10): votar el garabato que se pinta (el propio también, desde el 30/10; con rayitas sólo quien no juega), la espera y el cuadro con su cartel */
.votoGarabato { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.votoGarabato.senal::after { bottom: -14px; }
.votoDibujo { display: grid; gap: 6px; align-content: start; min-height: 56px; padding: 8px; border-radius: var(--radio); border: 3px solid var(--borde); background: var(--superficie); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.votoDibujo canvas { width: 100%; height: auto; aspect-ratio: 1; border-radius: 12px; display: block; }
.votoDibujo .pie { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.votoDibujo.elegido { border-color: var(--amarillo); box-shadow: 0 0 0 3px var(--amarillo); }
.votoDibujo:disabled { border-style: dashed; cursor: default; }
.votoDibujo:active:not(:disabled) { transform: scale(.98); }
.pintando { margin: 0; display: grid; gap: 10px; justify-items: center; }
.pintando canvas { width: min(100%, 320px); height: auto; aspect-ratio: 1; border-radius: 14px; display: block; }
.cuadroFinal { margin: 0; display: grid; gap: 10px; justify-items: center; }
.cuadroFinal img { width: min(100%, 420px); height: auto; aspect-ratio: 1; border-radius: 10px; display: block; background: #2a2438; box-shadow: 0 10px 30px #000a; }
.cartelMuseo { display: grid; gap: 2px; padding: 8px 16px; background: #f4efe2; color: #1b1726; border-radius: 4px; text-align: center; box-shadow: 0 2px 6px #0006; }
.cartelMuseo span { font-size: var(--chica); color: #3a3450; }
.recuerdo label.boton { display: grid; place-items: center; cursor: pointer; }
/* mientras se dibuja, la pestaña «Comentar» no tapa el lienzo: se va (web/comentarios.js no encuentra lugar libre) */
body.garabatoDibuja .comentar-pestana { visibility: hidden; }
.recuerdoVista { display: block; width: 100%; height: auto; border-radius: 14px; } /* El Garabato: el recuerdo entero, como se va a guardar */
/* «💡 Pista» en los crucigramas del día (21/10): pegada a la definición; pedida, la otra pista va abajo, en amarillo */
.diaDef { display: flex; align-items: center; gap: 8px; }
.diaDef .definicion { flex: 1 1 auto; flex-direction: column; }
.diaDef .diaOtra { flex: none; min-width: 72px; }
.otraPista { display: block; margin-top: 4px; font-size: var(--letra); color: var(--amarillo); line-height: 1.25; }
/* el domingo temático del Cruzados del día (22/10): una línea debajo del título */
.temaDia { margin: 2px 0 0; font-weight: var(--fuerte); }
/* ——— La Conquista del Iberá (boceto, 25/10/2026) ———
   El mapa pintado (web/conquista/escena.js, 25/10): un lienzo con las lagunas, los canales y los carpinchos, y encima
   doce botones transparentes, uno por laguna, que llevan la guía: las que se pueden tocar, con marco amarillo quieto (un
   grupo de opciones no late: regla de diseño, capítulo 29); la elegida, con el marco y un brillo; la que conviene en la
   primera partida (la marcada), con un marco más grueso y, en el turno guiado, la flecha (.senal) encima. */
.cqMarco { border-radius: var(--radio); overflow: hidden; border: 2px solid var(--borde); box-shadow: 0 6px 18px #0008; }
.cqEscena { position: relative; width: 100%; aspect-ratio: 360 / 470; user-select: none; -webkit-user-select: none; }
.cqLienzo { display: block; width: 100%; height: 100%; }
.cqLaguna { position: absolute; border: 0; padding: 0; margin: 0; border-radius: 50%; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cqLaguna[disabled] { cursor: default; }
.cqLaguna.arrastra { touch-action: none; } /* desde la propia se arrastra el tatú: ahí el dedo no corre la página */
.cqLaguna.puede { box-shadow: 0 0 0 4px var(--amarillo); }
.cqLaguna.origen { box-shadow: 0 0 0 5px var(--amarillo), 0 0 22px var(--amarillo); }
.cqLaguna.sugerida { box-shadow: 0 0 0 6px var(--amarillo), 0 0 22px var(--amarillo); }
.cqLaguna:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.cqResultado { font-weight: var(--fuerte); margin: 0; }
.cqObjetivoPrimero { border-color: var(--amarillo); }
.cqObjetivoPrimero p { margin: 0; }
.cqCara { border-radius: 50%; background: var(--superficie2); object-fit: contain; flex: none; }
.cqTitulo { font-size: var(--titulo); }
.cqTurno { gap: 10px; flex-wrap: nowrap; padding: 10px 12px; }
.cqTurnoTexto { flex: 1; min-width: 0; }
.cqQuien { font-size: var(--titulo); font-weight: var(--fuerte); line-height: 1.15; }
/* Lo que hay que hacer ahora, en una línea pegada al mapa (la página baja sola hasta acá: scroll-margin). En tu turno,
   con el reloj al lado cuando lo hay; cuando juega otro, en una tarjeta tranquila, sin nada para tocar. */
.cqLinea { font-weight: var(--fuerte); margin: 0; display: flex; gap: 10px; align-items: center; justify-content: center; text-align: center; font-size: var(--titulo); line-height: 1.25; scroll-margin-top: 10px; min-height: 48px; }
.cqLinea.otroTurno { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 10px 14px; font-size: var(--letra); }
.cqAmenaza { border-color: var(--amarillo); display: flex; gap: 10px; align-items: center; text-align: left; }
.cqAmenaza p { margin: 0; }
.cqObjetivo p, .cqHechos p { margin: 0; }
.cqFam { border-left: 6px solid var(--c); padding-left: 8px; gap: 8px; flex-wrap: nowrap; }
.cqFam .cqFamNombre { flex: 1; min-width: 0; }
.cqFam .cqCuenta { display: block; font-weight: normal; }
.cqFam.deTurno { font-weight: var(--fuerte); }
.cqFam.fuera { opacity: .55; }
/* La Conquista: quién sos, siempre a la vista (25/10, «Cuál es mi laguna?») */
.cqYo { display: flex; justify-content: center; }
.cqYo .cqCara { width: 72px; height: 72px; border: 6px solid var(--c); box-shadow: 0 0 16px var(--c); }
/* El dado de cada turno (25/10): grande para tirarlo; lo que salió, con un carpincho por punto */
.cqDado { display: grid; place-items: center; margin: 4px auto; width: 96px; height: 96px; padding: 0; border: 0; border-radius: 22px; background: #fffaf0; box-shadow: 0 6px 0 #c9bfae, 0 10px 24px rgba(0,0,0,.35); cursor: pointer; }
.cqDado:active { transform: translateY(4px); box-shadow: 0 2px 0 #c9bfae; }
.cqDado.gira { animation: cqGira .45s linear infinite; }
@keyframes cqGira { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cqDado.gira { animation: none; } }
.cqCaraDado { display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); width: 70%; height: 70%; gap: 4px; }
.cqCaraDado i { border-radius: 50%; }
.cqCaraDado i.p { background: #14121f; }
.cqSalio { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.cqSalio .cqCaraDado { width: 56px; height: 56px; padding: 8px; box-sizing: border-box; background: #fffaf0; border-radius: 14px; }
.cqTirados { display: flex; flex-wrap: wrap; gap: 2px; max-width: 200px; }
.cqTirados img { width: 30px; height: 30px; object-fit: contain; }
.cqNumeros { display: grid; grid-template-columns: repeat(3, 72px); gap: 12px; justify-content: center; }
.cqNumero { width: 72px; height: 72px; padding: 10px; border: 0; border-radius: 16px; background: #fffaf0; box-shadow: 0 4px 0 #c9bfae; cursor: pointer; display: grid; place-items: center; }
.cqNumero .cqCaraDado { width: 100%; height: 100%; }
/* La misión secreta (26/10): el botón chico, y la tarjeta grande sólo mientras se aprieta */
.cqMisionCaja { display: flex; justify-content: center; }
.cqMision { min-height: 56px; padding: 10px 18px; border-radius: 999px; border: 2px solid var(--borde); background: var(--superficie); color: inherit; font: inherit; font-weight: var(--fuerte); cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; }
.cqMision.grande { min-height: 88px; width: 100%; font-size: var(--titulo); border-color: #ffd23f; }
/* La letra crece con la del teléfono (28/10, la auditoría de la juntada: iba en px fijos y, con la letra al máximo,
   quedaba igual; las frases van en 17, regla de diseño 5). En el medio de la pantalla y nunca más alta que ella. */
.cqMisionTarjeta { position: fixed; left: 16px; right: 16px; top: 50%; transform: translateY(-50%); max-height: calc(100vh - 32px); overflow: hidden; z-index: 2147482000; padding: 24px 20px; border-radius: 22px; background: #fffaf0; color: #14121f; box-shadow: 0 20px 60px rgba(0,0,0,.6); text-align: center; pointer-events: none; }
.cqMisionTitulo { font-weight: 900; font-size: var(--titulo); color: #c8102e; margin-bottom: 10px; }
.cqMisionTexto { font-weight: 900; font-size: var(--grande); line-height: 1.25; margin: 0 0 10px; }
.cqMisionFalta { font-size: calc(var(--base) * 18 / 16); margin: 0 0 10px; }
.cqMisionComun { font-size: var(--letra); color: #4a4560; margin: 0; }
.cqMisionTarjeta[hidden] { display: none; }
/* Sólo lo indispensable (26/10, Verónica: «Hay demasiado texto y no deja concentrarse»): los equipos y lo que pasó, en
   «👥 Equipos», una tarjeta que se ve mientras se aprieta, como la misión. */
.cqMisionTarjeta { max-width: 560px; margin: 0 auto; }
.cqPantalla { display: flex; flex-direction: column; gap: 12px; }
.cqBotones { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.cqTarjetaEquipos { gap: 8px; text-align: left; margin: 4px 0 10px; }
.cqMisionTarjeta .cqFam .cqCuenta { display: block; color: #4a4560; font-size: var(--chica); }
.cqTarjetaHechos p { margin: 6px 0 0; font-size: var(--letra); color: #4a4560; }
/* La pantalla, aprovechada (26/10, Verónica, en la tablet: «no está bien aprovechada la pantalla»): en la tablet parada, el
   mapa al ancho, sin dejar el dado ni los botones afuera; acostada, el mapa a lo alto, a la izquierda, y lo demás a la
   derecha (como Cruzados). */
@media (min-width: 600px) and (orientation: portrait) {
  main:has(.cqPantalla) { max-width: 860px; }
  .cqPantalla > .cqMarco { width: min(100%, calc((100dvh - 330px) * 360 / 470)); align-self: center; }
}
@media (min-width: 900px) and (orientation: landscape) {
  .cqPantalla { display: grid; grid-template-columns: auto minmax(320px, 1fr); grid-template-rows: auto 1fr; grid-template-areas: 'mapa arriba' 'mapa abajo'; gap: 12px 28px; align-items: start; }
  .cqPantalla > .cqArriba { grid-area: arriba; }
  .cqPantalla > .cqMarco { grid-area: mapa; width: min(62vw, calc((100dvh - 120px) * 360 / 470)); } /* entra sin bajar, con «Cómo se juega» abajo */
  .cqPantalla > .cqAbajo { grid-area: abajo; }
}
/* la bienvenida: el mail mal escrito, debajo de su caja (27/10, web/progreso.js) */
.bienvenida p.mal { margin: -8px 0 0; text-align: center; color: #ffb4a8; font-weight: 800; }
/* la vitrina del perfil (27/10, «y vitrina»): las medallas de Camalotes del día, de a varias por renglón */
.vitrinaPerfil { display: grid; justify-items: center; gap: 10px; padding: 14px 16px 16px; border-radius: 22px; border: 2px solid var(--borde); background: var(--superficie); text-align: center; }
.vitrinaPerfil h3 { margin: 0; font-size: var(--titulo); }
.vitrinaPerfil .medallasPerfil { flex-wrap: wrap; gap: 12px 18px; }
.vitrinaPerfil .bajada { margin: 0; }
/* el álbum de figuritas del Iberá (04/11, web/album.mjs). En el perfil, como la vitrina; al final del crucigrama, la
   figurita que salió, en una tarjeta que se toca (sin el color de actuar: lo que sigue es «▶ Más crucigramas"). Las que
   faltan, en sombra; las doradas, con su marco; la recién salida, con un aro. */
.albumPerfil { display: grid; justify-items: center; gap: 8px; width: 100%; min-height: 56px; padding: 14px 16px 16px; border-radius: 22px; border: 2px solid var(--borde-toca); background: var(--superficie); color: var(--texto); font: inherit; text-align: center; cursor: pointer; }
.albumPerfil h3 { margin: 0; font-size: var(--titulo); }
.albumPerfil .cromosPerfil { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.albumPerfil .cromosPerfil img { width: 44px; height: 44px; object-fit: contain; padding: 2px; border-radius: 10px; background: var(--superficie2); }
.albumPerfil .cromosPerfil img.oro, .figuritaFin.oro img { box-shadow: 0 0 0 2px var(--amarillo); }
.albumPerfil .bajada { margin: 0; font-size: var(--letra); color: var(--suave); }
.figuritaFin { display: flex; align-items: center; gap: 12px; width: min(100%, 360px); min-height: 72px; margin: 8px auto 0; padding: 8px 14px; border-radius: 16px; border: 2px solid var(--borde-toca); background: var(--superficie2); color: var(--texto); font: inherit; text-align: left; cursor: pointer; }
.figuritaFin.oro { border-color: var(--amarillo); }
.figuritaFin img, .figuritaFin .tapa { flex: none; width: 56px; height: 56px; object-fit: contain; border-radius: 10px; }
.figuritaFin .tapa { display: grid; place-items: center; font-size: 34px; }
.figuritaFin .texto { display: grid; gap: 2px; min-width: 0; }
.figuritaFin strong { font-size: var(--letra); }
.figuritaFin small { font-size: var(--chica); color: var(--suave); }
.album .paginaAlbum { display: grid; gap: 10px; padding: 14px 12px 16px; border-radius: 22px; border: 2px solid var(--borde); background: var(--superficie); }
.album .paginaAlbum.llena { border-color: var(--amarillo); }
.album .paginaAlbum h3 { margin: 0; font-size: var(--titulo); text-align: center; }
.album .paginaAlbum h3 small { font-size: var(--chica); color: var(--suave); font-weight: 700; }
.album .paginaAlbum.llena h3 small { color: var(--amarillo); }
.album .cromos { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.album .cromo { display: grid; justify-items: center; gap: 4px; margin: 0; padding: 8px 4px 6px; border-radius: 14px; border: 2px solid var(--borde); background: var(--superficie2); }
.album .cromo img { width: 72px; height: 72px; object-fit: contain; }
.album .cromo figcaption { font-size: var(--chica); line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
.album .cromo.falta { border-style: dashed; border-color: var(--borde-toca); background: transparent; }
.album .cromo.falta img { filter: brightness(0); opacity: .35; }
.album .cromo.falta figcaption { color: var(--suave); }
.album .cromo.oro { border-color: var(--amarillo); background: #3a3360; }
.album .cromo.recien { box-shadow: 0 0 0 3px var(--rosa); }
/* las maneras de ganar otro crucigrama (04/11: «Cuando toquen para jugar otro dale opciones y dirigimos
   automáticamente»): una por renglón, sin color (es un grupo: ninguna marcada), la tarjeta con el borde de lo que sigue */
.comoGanar { border: 2px solid var(--amarillo); }
.comoGanar .grande { margin: 0; }
.comoGanar .manera { padding: 14px 20px; } /* (desde el 04/11 a la tarde, una sola: el chiste) */
/* «👤 Perfil y ajustes» (29/10) entra en un renglón hasta en 320; con «📊 Hoy» al lado (los aparatos de Verónica), sólo
   desde 430: más angosto, «👤 Perfil» */
@media (max-width: 429px) { .inicio > .barra.conHoy .yAjustes { display: none; } }
/* «⚙️ Ajustes», al pie del perfil (29/10): un botón por renglón, sin color, como la vitrina */
.ajustesPerfil { display: grid; gap: 10px; padding: 14px 16px 16px; border-radius: 22px; border: 2px solid var(--borde); background: var(--superficie); text-align: center; }
.ajustesPerfil h3 { margin: 0; font-size: var(--titulo); }
.ajustesPerfil .bajada { margin: 4px 0 -2px; font-size: var(--letra); overflow-wrap: anywhere; }
.ajustesPerfil a.boton { display: flex; align-items: center; justify-content: center; color: var(--texto); text-decoration: none; }