/* Los tutoriales (Gus, 29/10; public/tut.js, modulos/tutoriales-de-la-mesa.md, docs/diseno.md → Los tutoriales).
   Prefijo `tut-`. Va en lo común (index.html lo trae siempre) porque el armazón lo usan dos pantallas: la mesa
   ("Cómo se juega" y "Lo que el motor todavía no sabe") y el inicio ("Agregala a tu teléfono").

   Dos formas de la misma caja:
   - **En la mesa** (`.tut-capa` + `.tut-flota.glass`): de vidrio, en el medio de la mesa y **sin velo**. La regla del
     12/10 (lo que es para un jugador va en su campo) es para lo que pasa en la partida; esto habla de la mesa entera
     —la bandeja, el marco azul de la prioridad, el menú— y no entra en un casillero. Sin velo a propósito: el tutorial
     señala cosas de la mesa, taparla sería contarle al jugador algo que no puede mirar, y en este proyecto ningún
     cartel traba (el resto de la mesa sigue recibiendo el mouse y el dedo).
   - **En el inicio** (`.tut-modal`): el cartel de siempre de la app. Ahí no hay nada que señalar en la página —lo que
     se explica está en el navegador, el botón Compartir o los tres puntos— y el cartel ya es el vidrio, así que la caja
     va sin `.glass`: nada de vidrio sobre vidrio.

   Los radios, con la regla del proyecto (docs/diseno.md → Componentes base): la caja va con --r-4 (14) y el aire de
   adentro no pasa de --s4 (16); los botones de adentro, con el --r-2 de siempre. Ningún color, radio, sombra ni
   duración propios: todo con tokens. */
.tut-caja { display: flex; flex-direction: column; gap: var(--s3); }
.tut-flota { padding: var(--s4); border-radius: var(--r-4); max-height: calc(100% - 2 * var(--s4)); overflow: auto; }

/* La cabeza: el ícono suelto en --text-2 (sin cuadrado teñido de dorado: pg-010), el título del paso en la serif de los
   títulos y, debajo, de qué tutorial es, como un dato (texto plano apagado, nada de pastillas). */
.tut-cab { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--s1) var(--s3); }
.tut-cab > .icon { grid-row: span 2; color: var(--text-2); }
.tut-tit { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-7); line-height: 1.15; }
.tut-de { font-size: var(--fs-1); font-weight: 600; color: var(--muted); }

.tut-txt { margin: 0; font-size: var(--fs-3); line-height: 1.5; color: var(--text); }
.tut-txt kbd { margin: 0 var(--s0); }
.tut-como + .tut-como { margin-top: var(--s3); }
.tut-como > .caps { margin-bottom: var(--s1); }

/* El clip (webm + mp4, con su cartel .webp; nunca GIF). A sangre con el borde de adentro de la caja: lo que va pegado a
   un borde no lleva cápsula. */
.tut-clip { margin: 0; border-radius: var(--r-2); overflow: hidden; background: var(--bg-2); border: 1px solid var(--border); }
.tut-video { display: block; width: 100%; height: auto; object-fit: cover; }

.tut-extra-btn { align-self: flex-start; }

/* El pie: la cuenta de los pasos como un dato ("Paso 1 de 5", .meta, sin pastilla) y los dos botones. A 320 px la
   cuenta se va a su propio renglón. */
.tut-pie { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.tut-cuenta { font-size: var(--fs-1); font-variant-numeric: tabular-nums; }
.tut-btns { display: flex; align-items: center; gap: var(--s2); margin-left: auto; }

/* "No mostrar más" va en su propio renglón, abajo del todo y adentro de la caja (suelto sobre la mesa, un botón sin
   fondo no se lee): es lo que menos se toca y no compite con "Siguiente", el único destacado del cartel. */
.tut-pie2 { display: flex; margin-top: calc(-1 * var(--s1)); }
.tut-nunca { color: var(--text-2); padding-left: 0; padding-right: var(--s2); }

/* ---- en la mesa: la capa del medio, sin velo ---- */
.tut-capa { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: calc(var(--z-menu) + 1);
  display: flex; flex-direction: column; align-items: stretch;
  width: max-content; max-width: min(420px, calc(100% - 2 * var(--s4))); pointer-events: none; }
.tut-capa.hidden { display: none; }
.tut-capa > .tut-caja { pointer-events: auto; }

/* ---- en el inicio: el cartel de la app ---- */
/* El cartel ya trae su aire; la caja no suma otro, y el cuerpo no se pasa de ancho de lectura en una tablet. */
.tut-modal { max-width: min(460px, calc(100vw - 2 * var(--s4))); }

/* Con el dedo (o en una pantalla chica): los botones miden lo que pide Apple y "Siguiente" queda del lado del pulgar.
   Lo que se toca no se achica nunca (--toque, 44). */
@media (pointer: coarse) {
  .tut-btns > .btn, .tut-nunca { min-height: var(--toque); }
}
@media (max-width: 420px) {
  .tut-capa { max-width: calc(100% - 2 * var(--s3)); }
  .tut-caja { gap: var(--s2); }
  .tut-flota { padding: var(--s3); }
  .tut-tit { font-size: var(--fs-5); }
  .tut-pie { justify-content: stretch; }
  .tut-btns { width: 100%; }
  .tut-btns > .btn { flex: 1; }
}
/* El teléfono acostado tiene poco alto: la caja se desliza por dentro y el clip se achica (se ve su parte del medio,
   que es la que importa). */
@media (max-height: 460px) {
  .tut-capa { max-width: min(520px, calc(100% - 2 * var(--s3))); }
  .tut-video { max-height: 28vh; }
  .tut-tit { font-size: var(--fs-5); }
}
/* Movimiento reducido (o las animaciones apagadas en Preferencias, HS.menosMovimiento): el clip no arranca solo, queda
   en su cartel y con los controles del navegador para quien lo quiera ver (lo pone tut.js). Nada se repite solo sin
   poder pararse. */