/* Identidad del spec, no negociable: fondo negro puro y texto blanco, para
   poder jugar con la luz apagada sin molestar a nadie. Sin gradientes, sin
   sombras, sin bordes redondeados grandes. Todo en minúscula de oración; las
   mayúsculas sostenidas solo en las etiquetas chicas con espaciado. */

/* Las dos familias se cargan desde index.html con preconnect + display=swap.
   Ver CAMBIOS-juego.js.md. */

:root {
  color-scheme: dark;
  --negro: #000;
  --blanco: #fff;
  --etiqueta: #666;
  /* Sube de #999 a #a8a8a8: sobre negro puro en OLED, #999 en 17px estaba al
     límite de lo cómodo. Sigue siendo el mismo gris de apoyo, no un color nuevo. */
  --secundario: #a8a8a8;
  --separador: #2a2a2a;
  --bien: #97c459;
  --mal: #f09595;
  /* Una humanista de verdad en vez de la del sistema: el juego se veía distinto
     en cada teléfono y en ninguno se veía suyo. */
  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* El sueldo tiene que leerse como un dato y no como prosa: el contraste
     entre las dos tipografías es parte de la identidad. Plex Sans y Plex Mono
     están dibujadas como pareja, así que el contraste es intencional y no
     accidente del sistema operativo. */
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--negro);
  color: var(--blanco);
  font-family: var(--sans);
  line-height: 1.5;
  font-size: 15px;
  /* Diseñado primero para 380px: la mayoría del tráfico va a ser móvil. */
  padding: 20px 20px 40px;
  -webkit-text-size-adjust: 100%;
}

main { max-width: 460px; margin: 0 auto; }

/* Cifras de ancho fijo en todo lo que se anima o se compara. Sin esto el sueldo
   cambia de ancho mientras el contador corre y la línea entera tiembla. */
.barra .edad, .barra .sueldo, .stat .valor, .titular .anio, .titular .plata,
.numeros .valor, .nota .puntaje, .recorrido .anios, .recorrido .edad,
.carrera .anios, ol.posiciones li::before, ol.posiciones .cuanto,
.tramo .desde, .tramo .cuanto {
  font-variant-numeric: tabular-nums;
}

.etiqueta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--etiqueta);
  margin: 0 0 8px;
}

h1 { font-size: 30px; line-height: 1.12; margin: 0 0 14px; font-weight: 600; letter-spacing: -0.02em; }
/* La carta es lo único que hay que leer en esa pantalla: sube de 21 a 24 y se
   separa con aire de las opciones, no con una línea. */
h2 { font-size: 24px; line-height: 1.26; margin: 0 0 28px; font-weight: 500; letter-spacing: -0.015em; text-wrap: pretty; }
p  { margin: 0 0 16px; }
.secundario { color: var(--secundario); }

/* ------------------------------------------------------------- cabecera */

/* Antes eran cinco datos al mismo volumen y no se leía ninguno. Ahora la barra
   lleva los dos que mirás en cada vuelta —la edad y el sueldo—, el burnout va
   solo en su propia fila porque es el que termina la partida, y las otras tres
   stats quedan como contexto en una línea. */
.barra {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 0;
  margin-bottom: 10px;
  gap: 12px;
}
.barra .edad { font-family: var(--mono); font-size: 15px; }
.barra .edad small { font-family: var(--sans); color: var(--etiqueta); font-size: 12px; }
.barra .sueldo { font-family: var(--mono); font-size: 15px; }
.barra .sueldo small { font-family: var(--sans); color: var(--etiqueta); font-size: 11px; }

.donde-fila {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  border-bottom: 1px solid var(--separador);
  padding-bottom: 10px;
  margin-bottom: 14px;
}
.barra .donde, .donde-fila .donde { color: var(--secundario); font-size: 13px; }
.donde-fila .donde b { color: var(--blanco); font-weight: 400; }

/* La carrera va de los 18 a los 64: la línea muestra cuánto queda, y al lado
   dice cuánto en años, que es lo que la barra sola no cuenta. */
.progreso { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; }
.progreso .riel { flex: 1; height: 2px; background: var(--separador); }
.progreso .riel div { height: 2px; background: var(--blanco); transition: width 0.4s ease-out; }
.progreso .resto { font-family: var(--mono); font-size: 11px; color: var(--etiqueta); }

/* Las tres sin límite: valor y nombre en una línea. Son contexto, no titular. */
.stats {
  display: flex; gap: 16px; flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--separador);
  margin: 0 0 14px;
}
.stat { display: flex; align-items: baseline; gap: 6px; }
.stat .etiqueta {
  font-family: var(--sans);
  font-size: 12px; letter-spacing: 0; text-transform: none;
  color: var(--etiqueta); margin: 0;
}
.stat .valor { font-family: var(--mono); font-size: 14px; line-height: 1.2; }
.stat.bien .valor { color: var(--bien); }
.stat.mal  .valor { color: var(--mal); }

/* El burnout es el único con límite, y acercarse es lo que decide la partida:
   sale de la fila y se lleva el ancho entero. El medidor completo hace visible
   el margen que te queda, no solo el número. */
.stat.limitada {
  display: block;
  margin: 0 0 16px;
}
.stat.limitada .fila { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.stat.limitada .etiqueta {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
}
.stat.limitada .valor { font-size: 17px; }
.stat.limitada .valor .de { color: var(--etiqueta); font-size: 13px; }
.stat.limitada.mal .etiqueta { color: var(--mal); }
.stat .medidor { height: 3px; background: var(--separador); margin-top: 0; width: 100%; }
.stat .medidor div { height: 3px; background: var(--bien); transition: width 0.4s ease-out; }
.stat.mal .medidor div { background: var(--mal); }

/* Rectángulos blancos de 5 × 12 con las esquinas superiores redondeadas.
   Solo crecen con los roles de gestión: esta multitud son tus reportes.
   Van al lado del lugar, que es a lo que pertenecen. */
.equipo { display: flex; gap: 3px; flex-wrap: wrap; min-height: 12px; align-items: flex-end; }
.figurita {
  width: 5px; height: 12px;
  background: var(--blanco);
  border-radius: 2px 2px 0 0;
}

/* --------------------------------------------------------------- bloques */

.titulares { min-height: 104px; margin-bottom: 24px; }
.titular {
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  border-bottom: 1px solid var(--separador);
  padding: 10px 0;
  animation: aparecer 0.3s ease-out;
}
.titular .que { flex: 1; }
.titular .anio { font-family: var(--mono); color: var(--etiqueta); font-size: 13px; }
.titular .plata { font-family: var(--mono); font-size: 13px; }
.titular.ascenso .que { color: var(--bien); }

@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .titular { animation: none; } }

/* --------------------------------------------------------------- botones */

.opciones { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }

/* Tres cajas iguales no se escanean; tres ítems numerados sí. El índice va en
   mono, en el margen, y el hover pinta la barra izquierda en vez de encender
   todo el borde. */
button.opcion {
  width: 100%;
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: baseline;
  text-align: left;
  background: var(--negro);
  color: var(--blanco);
  border: 1px solid var(--separador);
  border-left: 2px solid var(--separador);
  padding: 15px 16px;
  font: inherit;
  font-size: 17px;
  line-height: 1.3;
  cursor: pointer;
  /* Sin bordes redondeados grandes. */
  border-radius: 2px;
  transition: border-color 0.12s, background 0.12s;
}
button.opcion .indice { font-family: var(--mono); font-size: 11px; color: var(--etiqueta); }
button.opcion > :not(.indice) { grid-column: 2; }
button.opcion:hover, button.opcion:focus-visible {
  border-left-color: var(--blanco);
  background: #0b0b0b;
  outline: none;
}
button.opcion:active { background: #141414; }

/* Cuánto suma y cuánto resta cada opción. En dos minutos de partida, sin los
   números la decisión es a ciegas, que no es lo mismo que difícil. */
.efectos {
  display: flex; flex-wrap: wrap; gap: 4px 12px;
  margin-top: 9px;
  font-family: var(--mono); font-size: 12px;
}
.efectos .sube { color: var(--bien); }
.efectos .baja { color: var(--mal); }
.efectos .neutro { color: var(--secundario); }
button.opcion .marca {
  display: block;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--etiqueta);
  margin-bottom: 5px;
}
button.opcion .plata { font-family: var(--mono); color: var(--secundario); font-size: 13px; }
button.opcion .plata .menos { color: var(--mal); }

/* Quedarse donde estás no es la ausencia de una decisión: es una opción, y se
   ve distinta de las tres que te sacan de ahí. */
button.opcion.quedada { border-style: dashed; color: var(--secundario); }
button.opcion.quedada:hover, button.opcion.quedada:focus-visible { color: var(--blanco); }

/* Irse casi nunca te lo propone una carta. Está siempre, discreto — pero como
   botón con borde parecía una cuarta opción y competía con las tres. Ahora es
   una línea de texto abajo de una regla. */
button.buscar {
  display: inline-flex; align-items: baseline; gap: 8px;
  width: auto;
  background: none; color: var(--secundario);
  border: none; padding: 0;
  font: inherit; font-size: 14px; cursor: pointer;
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: var(--separador);
  transition: color 0.12s;
}
button.buscar:hover, button.buscar:focus-visible { color: var(--blanco); outline: none; }
button.buscar:disabled { opacity: 0.35; cursor: default; }
button.buscar .nota { font-family: var(--mono); font-size: 11px; color: var(--etiqueta); text-decoration: none; }
.salida {
  border-top: 1px solid var(--separador);
  padding-top: 14px;
  margin-bottom: 20px;
}

button.principal {
  width: 100%;
  background: var(--blanco); color: var(--negro);
  border: 1px solid var(--blanco); border-radius: 2px;
  padding: 17px; font: inherit; font-size: 17px; font-weight: 600;
  letter-spacing: -0.01em; cursor: pointer;
  transition: opacity 0.12s;
}
button.principal:hover { opacity: 0.88; }
button.principal:disabled { opacity: 0.45; }
button.secundaria {
  width: 100%;
  background: var(--negro); color: var(--secundario);
  border: 1px dashed var(--separador); border-radius: 2px;
  padding: 13px; font: inherit; font-size: 14px; cursor: pointer; margin-top: 10px;
}
button.secundaria:hover { color: var(--blanco); }

/* Al pie del final no van más botones: van dos enlaces. Cuatro botones
   apilados le sacan peso justo al que importa. */
.pie-acciones {
  display: flex; justify-content: center; gap: 20px;
  margin-top: 26px; padding-top: 18px;
  border-top: 1px solid var(--separador);
}
.pie-acciones button {
  background: none; border: none; padding: 0;
  font: inherit; font-size: 14px; color: var(--secundario); cursor: pointer;
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: var(--separador);
}
.pie-acciones button:hover { color: var(--blanco); }

/* ---------------------------------------------------------------- final */

/* La partida terminó y la pantalla tiene que sonar distinto a todas las
   anteriores. El veredicto es lo que la persona repite en voz alta. */
h1.veredicto {
  font-size: 40px; line-height: 1.02; letter-spacing: -0.035em;
  margin: 0 0 20px; font-weight: 600; text-wrap: pretty;
}
.remate { color: var(--secundario); font-size: 16px; line-height: 1.5; margin: 0 0 28px; text-wrap: pretty; }

/* La nota de la carrera, con el puntaje al tamaño de un veredicto. */
.nota {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  border-top: 1px solid var(--separador);
  padding-top: 16px; margin: 0;
}
.nota .etiqueta { margin: 0 0 4px; }
.nota .puntaje { font-family: var(--mono); font-size: 38px; line-height: 1; color: var(--blanco); }
.nota .puntaje .de { font-size: 15px; color: var(--etiqueta); }
.nota .contra { margin: 0; color: var(--secundario); font-size: 13px; }
.nota-barra { height: 3px; background: var(--separador); margin: 12px 0 30px; }
.nota-barra div { height: 3px; background: var(--blanco); }

/* Los cuatro números se leen como una ficha y no como cuatro tarjetitas
   sueltas: etiqueta a la izquierda, dato mono a la derecha, hairline entre uno
   y otro. El total va último y en grande — es la mitad de la nota. */
.numeros { display: block; border-top: 1px solid var(--separador); margin: 0 0 30px; }
.numeros > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--separador);
}
.numeros .etiqueta {
  font-family: var(--sans);
  font-size: 14px; letter-spacing: 0; text-transform: none;
  color: var(--secundario); margin: 0;
}
.numeros .valor { font-family: var(--mono); font-size: 16px; }
.numeros > div:last-child .etiqueta { color: var(--blanco); }
.numeros > div:last-child .valor { font-size: 19px; }

/* El recorrido es una línea de tiempo, no una tabla: la edad en la que
   empezaste cada tramo va en una canaleta a la izquierda. */
.recorrido {
  display: grid; grid-template-columns: 42px 1fr; column-gap: 12px;
  border-top: 0; margin: 0 0 30px; padding: 0; list-style: none;
}
.recorrido .desde {
  font-family: var(--mono); font-size: 12px; color: var(--etiqueta);
  padding: 12px 0; border-top: 1px solid var(--separador);
}
.recorrido .tramo {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 12px 0; border-top: 1px solid var(--separador);
}
.recorrido .desde:last-of-type, .recorrido .tramo:last-of-type { border-bottom: 1px solid var(--separador); }
.recorrido .detalle { color: var(--etiqueta); font-size: 12px; margin-top: 2px; }
.recorrido .cuanto { font-family: var(--mono); font-size: 13px; color: var(--secundario); white-space: nowrap; }
.recorrido .echado { color: var(--mal); font-size: 12px; }
.recorrido .graduado { color: var(--bien); font-size: 12px; }
.recorrido .vacio { color: var(--secundario); }

.enlace-partida {
  text-align: center; color: var(--etiqueta); font-size: 12px;
  font-family: var(--mono); margin: 12px 0 0;
}
.enlace-partida a { color: var(--etiqueta); }

footer { margin-top: 32px; text-align: center; color: var(--etiqueta); font-size: 12px; }
footer .cuantos { font-family: var(--mono); color: var(--secundario); }

[hidden] { display: none !important; }

/* ------------------------------------------------------- registro de carrera */

.carrera { margin-top: 28px; }
.carrera ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--separador); }
.carrera li { border-bottom: 1px solid var(--separador); padding: 9px 0; }
.carrera .linea { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.carrera .anios {
  font-family: var(--mono); font-size: 12px; color: var(--etiqueta); white-space: nowrap;
}
.carrera .gano { font-size: 12px; color: var(--secundario); margin-top: 2px; }
.carrera .gano span { margin-right: 10px; }
.carrera .gano .sube { color: var(--bien); }
.carrera .gano .baja { color: var(--mal); }
.carrera li.desempleo .donde { color: var(--secundario); }
.carrera li.echado .donde::after {
  content: " · te echaron";
  color: var(--mal);
  font-size: 12px;
}
.carrera li.sin-clientes .donde::after {
  content: " · sin clientes";
  color: var(--secundario);
  font-size: 12px;
}

/* --------------------------------------------------- sugerir una situación */

.formulario { display: grid; gap: 16px; margin-bottom: 20px; }
.formulario label { display: block; }
.formulario label span {
  display: block;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--etiqueta); margin-bottom: 6px;
}
.formulario input, .formulario textarea {
  width: 100%;
  background: var(--negro); color: var(--blanco);
  border: 1px solid var(--separador); border-radius: 2px;
  padding: 11px; font: inherit; font-size: 15px;
}
.formulario textarea { resize: vertical; }
.formulario input:focus, .formulario textarea:focus { outline: none; border-color: var(--blanco); }
.formulario .contador { font-family: var(--mono); font-size: 12px; color: var(--etiqueta); margin-top: 5px; }
.formulario .contador.mal { color: var(--mal); }

.reglas { border-top: 1px solid var(--separador); padding-top: 14px; margin-bottom: 20px; }
.reglas li { color: var(--secundario); font-size: 13px; margin-bottom: 5px; }
.reglas ul { margin: 0; padding-left: 18px; }

.resultado { border: 1px solid var(--separador); border-left: 2px solid var(--bien); padding: 12px 14px; margin-bottom: 18px; }
.resultado.error { border-left-color: var(--mal); color: var(--mal); }

/* ------------------------------------------------------------- portada */

.titulo-juego {
  font-size: 44px; line-height: 1.02; letter-spacing: -0.035em;
  margin: 6px 0 16px; font-weight: 600;
}
.bajada-juego { color: var(--secundario); font-size: 18px; line-height: 1.45; margin: 0 0 26px; text-wrap: pretty; }
.bajada-juego b { color: var(--blanco); font-weight: 400; }
.separador-fino { height: 1px; background: var(--separador); margin: 0 0 22px; }

@media (min-width: 420px) {
  .titulo-juego { font-size: 52px; }
}

/* ------------------------------------------------- animación de contadores */

/* Los números no se muestran en los botones: se ven después, moviéndose, que
   es cuando enseñan algo. */
.stat .valor { position: relative; }
.delta {
  margin-left: 6px; font-size: 12px;
  animation: subir-delta 1s ease-out forwards;
}
.delta.sube { color: var(--bien); }
.delta.baja { color: var(--mal); }

@keyframes subir-delta {
  0%   { opacity: 0; transform: translateY(4px); }
  25%  { opacity: 1; transform: translateY(0); }
  75%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-6px); }
}

.stat.cambia-bien .valor, .stat .valor.cambia-bien { color: var(--bien); }
.stat.cambia-mal  .valor, .stat .valor.cambia-mal  { color: var(--mal); }
.valor.cambia-bien, .valor.cambia-mal { transition: color 0.9s ease-out; }

button.opcion.elegida { border-left-color: var(--blanco); background: #161616; }
button.opcion:disabled { cursor: default; }
button.opcion:disabled:not(.elegida) { opacity: 0.35; }

@media (prefers-reduced-motion: reduce) {
  .delta { animation: none; opacity: 1; }
}

/* --------------------------------------------------------- desenlace al azar */

/* Hay decisiones que no son buenas ni malas: son apuestas. El jugador eligió la
   apuesta, no el resultado, así que hay que contarle cuál le tocó antes de que
   los números se muevan. */
/* El desenlace tiene pantalla propia: abajo de las opciones la ruleta giraba
   fuera de la vista, que es lo mismo que no girar. */
.mini { font-size: 13px; line-height: 1.4; margin: 0 0 16px; }
.lo-que-elegiste {
  border-left: 2px solid var(--separador);
  padding-left: 12px; margin-bottom: 26px;
}
.lo-que-elegiste p:last-child { margin: 0; font-size: 16px; }

.que-paso {
  font-size: 24px; line-height: 1.3; font-weight: 500;
  margin: 0 0 28px; min-height: 3.9em;
}

/* La ruleta: el sorteo ya está hecho, pero verla dudar entre las dos cosas que
   te pueden pasar es lo que hace que se sienta una apuesta. */
.que-paso.girando { color: var(--secundario); }
.que-paso.cayo { animation: cae 0.45s ease-out; }

@keyframes cae {
  0%   { opacity: 0.35; transform: translateY(-3px); }
  100% { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .que-paso.cayo { animation: none; }
}

/* ------------------------------------------------------------ el burnout se ve */

/* Cerca del límite la pantalla se desenfoca. El burnout deja de ser un número y
   pasa a sentirse: es la única stat con límite y la que decide la partida.

   Se desenfoca más lo de alrededor que la decisión misma. Al revés sería
   injugable, y además así se lee mejor: lo que se te desdibuja cuando estás
   quemado es todo lo que no es el problema que tenés adelante. */
body { --difuso: 0px; --pulso: 2.4s; }

/* Se desenfoca la pantalla entera y de forma pareja. Uniforme el techo tiene que
   ser más bajo —0,7px— porque no hay nada que quede nítido de referencia. */
main {
  filter: blur(var(--difuso));
  transition: filter 1.2s ease-out;
}

/* Y late. No es un pulso suave sino un latido de verdad: dos golpes seguidos y
   una pausa. El ritmo lo pone --pulso desde el motor, y se acelera a medida que
   el burnout se acerca al límite — de 2,4s en 15 a 0,8s en 20. */
body.latiendo main {
  animation: latido var(--pulso) ease-in-out infinite;
  transition: none;
}

@keyframes latido {
  0%   { filter: blur(var(--difuso));                    transform: scale(1); }
  9%   { filter: blur(calc(var(--difuso) * 3.4)); transform: scale(1.007); }
  19%  { filter: blur(var(--difuso));                    transform: scale(1); }
  30%  { filter: blur(calc(var(--difuso) * 2.3)); transform: scale(1.004); }
  42%  { filter: blur(var(--difuso));                    transform: scale(1); }
  100% { filter: blur(var(--difuso));                    transform: scale(1); }
}

/* El cartelito, arriba al centro. Le pone nombre a lo que está pasando: sin él
   alguien puede creer que se le rompió la pantalla. Va fuera de main para no
   desenfocarse con el resto — es lo único que tiene que quedar nítido. */
#modo {
  position: fixed; top: 10px; left: 50%; transform: translateX(-50%); z-index: 10;
  color: var(--mal);
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  pointer-events: none; white-space: nowrap;
  animation: latir var(--pulso) ease-in-out infinite;
}

/* El mismo ritmo que el desenfoque: son la misma cosa contada de dos maneras. */
@keyframes latir {
  0%   { opacity: 0.3; transform: translateX(-50%) scale(1); }
  9%   { opacity: 1;   transform: translateX(-50%) scale(1.14); }
  19%  { opacity: 0.3; transform: translateX(-50%) scale(1); }
  30%  { opacity: 0.85; transform: translateX(-50%) scale(1.07); }
  42%  { opacity: 0.3; transform: translateX(-50%) scale(1); }
  100% { opacity: 0.3; transform: translateX(-50%) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  main, body.latiendo main { filter: none; animation: none; }
  #modo { animation: none; opacity: 0.9; }
}

.carrera li.graduado .donde::after {
  content: " · te recibiste";
  color: var(--bien);
  font-size: 12px;
}

/* ------------------------------------------------------------- el temblor */

/* De 18 a 20 los botones dejan de quedarse quietos. Cada uno con su propio
   retardo: sincronizados parecerían una animación, y desfasados parecen una
   mano que no termina de apoyarse. */
body.tambaleando button.opcion {
  animation: tambalear 3.1s ease-in-out infinite;
}
body.tambaleando .opciones button.opcion:nth-child(2) { animation-delay: -1.1s; animation-duration: 3.7s; }
body.tambaleando .opciones button.opcion:nth-child(3) { animation-delay: -2.3s; animation-duration: 2.8s; }

@keyframes tambalear {
  0%, 100% { transform: translate(0, 0); }
  25%  { transform: translate(calc(var(--tambaleo, 0) * 1.6px), calc(var(--tambaleo, 0) * -1.2px)); }
  50%  { transform: translate(calc(var(--tambaleo, 0) * -1.3px), calc(var(--tambaleo, 0) * 1.1px)); }
  75%  { transform: translate(calc(var(--tambaleo, 0) * 1.1px), calc(var(--tambaleo, 0) * 0.9px)); }
}

@media (prefers-reduced-motion: reduce) {
  body.tambaleando button.opcion { animation: none; }
}

/* ---------------------------------------------------- tabla de posiciones */

.tabla-caja { margin: 0 0 20px; }

.firmar {
  border: 1px solid var(--separador);
  border-left: 2px solid var(--bien);
  border-radius: 2px;
  padding: 14px 16px;
}
.firmar .etiqueta { margin-top: 0; }
.firmar-fila { display: flex; gap: 8px; margin-top: 10px; }
.firmar-fila input {
  flex: 1; min-width: 0;
  background: var(--negro); color: var(--blanco);
  border: 1px solid var(--separador); border-radius: 2px;
  padding: 13px 12px; font: inherit; font-size: 16px;
}
.firmar-fila input:focus { border-color: var(--blanco); outline: none; }
.firmar-fila button { width: auto; padding: 13px 22px; }
.error-firma { margin: 8px 0 0; font-size: 13px; color: var(--mal); }

.tabla .etiqueta { margin-top: 0; }
ol.posiciones { list-style: none; margin: 0; padding: 0; counter-reset: puesto; }
/* El nombre arriba y el puesto al lado, con el puntaje a la derecha ocupando
   las dos filas: en un teléfono, tres columnas en una sola línea no entran y el
   puntaje se caía abajo. */
ol.posiciones li {
  counter-increment: puesto;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  column-gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--separador);
  font-size: 14px;
}
/* El puesto centrado contra las dos filas, con cero adelante: una columna de
   números que empiezan todos igual se lee de un tirón. */
ol.posiciones li::before {
  content: "0" counter(puesto);
  grid-column: 1; grid-row: 1 / 3; align-self: center;
  font-family: var(--mono); font-size: 12px; color: var(--etiqueta);
}
ol.posiciones li:nth-child(n+10)::before { content: counter(puesto); }
ol.posiciones .quien {
  grid-column: 2; grid-row: 1; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
ol.posiciones .que {
  grid-column: 2; grid-row: 2;
  color: var(--secundario); font-size: 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
ol.posiciones .que .plata { font-family: var(--mono); }
ol.posiciones .cuanto {
  grid-column: 3; grid-row: 1 / 3;
  align-self: center;
  font-family: var(--mono); font-size: 18px;
}

/* Los otros juegos de la casa, en la portada. Van entre los botones y la tabla:
   se ven sin buscarlos, pero no compiten con jugar. */
.otros-juegos { margin-top: 30px; }
.otros-juegos:empty { display: none; }
.otros-juegos .etiqueta { margin-bottom: 10px; }
a.otro-juego {
  display: block; text-decoration: none; color: var(--blanco);
  border: 1px solid var(--separador); border-radius: 2px;
  padding: 13px 14px; margin-top: 8px;
}
a.otro-juego:hover { border-color: var(--secundario); }
a.otro-juego .nombre { display: block; font-size: 16px; font-weight: 600; }
a.otro-juego .bajada { display: block; color: var(--secundario); font-size: 13px; margin-top: 3px; }

/* En la portada la tabla acompaña, no compite con el botón de jugar: va bien
   abajo de los botones, separada por una línea y con aire de los dos lados. */
.tabla-caja { margin: 8px 0 20px; }
.tabla-caja.en-portada {
  margin-top: 38px;
  padding-top: 26px;
  border-top: 1px solid var(--separador);
}
.tabla .encabezado {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 12px;
}
.tabla .encabezado .etiqueta { margin: 0; }
.tabla .tenue { font-family: var(--mono); color: var(--etiqueta); font-size: 11px; margin: 0; }

/* El acuse de la firma, al terminar. La lista entera no va acá. */
.firmado {
  border: 1px solid var(--separador);
  border-left: 2px solid var(--bien);
  border-radius: 2px;
  padding: 14px 16px;
}
.firmado .etiqueta { margin-top: 0; }
.firmado .secundario { margin: 6px 0 0; }