/* Andamio de PLAYER con REGIONES semánticas — el reflujo responsive compartido
   por todas las actividades que tienen "un centro + piezas alrededor" (Etiqueta
   el diagrama, Emparejar, Quiz, Sopa…). El player marca sus partes por ROL y el
   andamio las acomoda según el ASPECT-RATIO del área, SIN breakpoints de píxeles
   (como Wordwall): las piezas viajan al eje LARGO y el centro se queda el eje
   corto entero.  Contrato de regiones en docs/estilos-de-actividad.md.

     .ww-scaffold  columna raíz que LLENA el marco (y es el contenedor de consulta)
     .ww-bar       chrome fijo (cabecera / acciones) — no refluye, tamaño mínimo
     .ww-field     la ZONA que refluye (rieles + escenario)
     .ww-rail      grupo de piezas móviles — data-rail="start|end"
     .ww-stage     el contenido central — centrado, máximo tamaño

   Nota técnica: el `@container` se resuelve contra un ANCESTRO, así que el
   CONTENEDOR es `.ww-scaffold` y quien REFLUYE es `.ww-field` (su descendiente).
   El aspecto del scaffold ≈ el del field (las barras son finas). */

.ww-scaffold {
  display: flex; flex-direction: column;
  height: 100%; min-height: 0; min-width: 0;
  gap: 1.2cqmin;
  container-type: size;
  container-name: player;
}
.ww-bar { flex: 0 0 auto; min-height: 0; }
.ww-bar-actions { display: flex; justify-content: center; align-items: center; }
/* `edu-send` = el ROL del espacio del botón de enviar (decisión del dueño,
   2026-08-17: topbar · game · send, y los indicadores al HUD). Hoy es un
   MARCADOR sobre las barras existentes (ww-bar-actions, tc-done-wrap) para que
   el rol se pueda escanear y estilar en un solo sitio; solo lo llevan las
   plantillas cuyo envío se CONSTRUYE y confirma (`meta.play.submit:'boton'` o
   el Enviar del player libre). */
.edu-send { flex: 0 0 auto; }

.ww-field {
  position: relative;                 /* capas absolutas (cuerdas SVG) inset:0 */
  flex: 1 1 auto; min-height: 0; min-width: 0;
  display: flex;
  gap: 2cqmin;
}
.ww-stage {
  flex: 1 1 auto; min-width: 0; min-height: 0;
  display: grid; place-items: center;
  order: 2;
}
.ww-rail {
  flex: 0 1 auto; min-width: 0; min-height: 0;
  display: flex;
  gap: 1.6cqmin;
  align-items: center; justify-content: center;
}
.ww-rail[data-rail="start"] { order: 1; }
.ww-rail[data-rail="end"]   { order: 3; }

/* ── ANCHO (landscape): rieles = COLUMNAS laterales, escenario en medio ───────
   Las piezas se REPARTEN en el alto (space-evenly) en vez de amontonarse en el
   centro → usan el espacio disponible sin quedar pegadas (como Wordwall). Con
   pocas piezas quedan separadas; con muchas, huecos parejos y ceñidas. */
@container player (aspect-ratio >= 1/1) {
  .ww-field { flex-direction: row; align-items: stretch; }
  .ww-rail  { flex-direction: column; justify-content: space-evenly; }
}
/* ── ALTO (portrait): rieles = FILAS arriba/abajo (con wrap), escenario en medio
   Aquí sí CENTRADO: las filas envueltas se leen mejor agrupadas que estiradas. */
@container player (aspect-ratio < 1/1) {
  .ww-field { flex-direction: column; align-items: stretch; }
  .ww-rail  { flex-direction: row; flex-wrap: wrap; justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════════════════
   ANDAMIO DEL TECLADO EN PANTALLA COMPARTIDA (§3 · una sola copia)
   ══════════════════════════════════════════════════════════════════════════
   El reparto de "que el teclado de Operaciones quepa en su hueco" estaba copiado
   TRES veces —`styles/vs.css`, `styles/teams.css` y el skin tv-show— con los
   mismos flex/grid y solo distintos tamaños. Ahora vive aquí; cada contenedor se
   queda con sus TAMAÑOS (el panel VS mide en `cqw`, la tarjeta de Equipos en
   `cqmin`) y el skin ya no repite estructura, solo su relleno y su tipografía.

   Reparto: pregunta y display a su tamaño natural (flex 0 0 auto), la rejilla se
   come el resto (flex 1 1 auto) y sus filas se reparten (grid-auto-rows: 1fr) →
   pregunta + display + borrar/enviar SIEMPRE caben, en cualquier altura.

   POR QUÉ DOS BLOQUES y no uno: la CONDICIÓN es distinta y eso no se puede
   compartir en CSS. La tarjeta de Equipos siempre reparte. El panel de VS solo
   cuando es bajo o vertical: en escritorio alto, el skin tv-show pinta una
   tarjeta-esquina compacta (teclas a su altura natural) y estirar ahí le dejaba
   un hueco muerto debajo — verificado con `node tools/shots.mjs`, que fue justo
   la captura que cambió al intentar unificarlo en un solo bloque.
   Especificidad deliberada (sin `:where()`): conserva el peso que tenían las
   copias, y `.ww-keypad .ww-key` lleva su ancestro para superar a la regla base
   de `math.css`. Este archivo se carga ANTES de vs.css/teams.css, así que sus
   ajustes (p.ej. el tope de filas del modo bloque) siguen mandando. */
.teams-card .ww-keypad-round { height: 100%; justify-content: flex-start; }
.teams-card .ww-keypad-q       { flex: 1 1 auto; }
.teams-card .ww-keypad-display { flex: 0 0 30%; min-width: 0; }
.teams-card .ww-keypad {
  flex: 1 1 auto; min-height: 0; grid-auto-rows: 1fr;
  grid-template-columns: repeat(var(--key-cols, 3), minmax(0, 1fr));
}
.teams-card .ww-keypad .ww-key {
  padding: 0; min-height: 0; min-width: 0;
  display: flex; align-items: center; justify-content: center;
}

/* MISMA condición que el resto del ajuste de panel en vs.css y en el skin. */
@container vs (max-aspect-ratio: 5/4) or (max-height: 700px) {
  .vs-body .ww-keypad-round { height: 100%; justify-content: flex-start; }
  /* LA CABECERA SE REPARTE EL ANCHO, como el visor de una calculadora: la
     operación se lleva el sobrante y el hueco de respuesta un tercio fijo.
     Aquí ponía `flex: 0 0 auto` a los dos —para que no desbordaran cuando el
     panel era estrecho— y con eso medían su TEXTO: chapa y visor sumaban 144 px
     de un teclado de 258, así que salían como pastillas verticales encima de un
     teclado ancho (dueño, 2026-08-22, con captura). Ya no hace falta: la
     cabecera tiene ancho definido y el teclado su proporción declarada. */
  .vs-body .ww-keypad-q       { flex: 1 1 auto; }
  .vs-body .ww-keypad-display { flex: 0 0 30%; min-width: 0; }
  .vs-body .ww-keypad {
    flex: 1 1 auto; min-height: 0; grid-auto-rows: 1fr;
    grid-template-columns: repeat(var(--key-cols, 3), minmax(0, 1fr));
  }
  .vs-body .ww-keypad .ww-key {
    /* AQUÍ EL `0` MANDA A PROPÓSITO, y no es un descuido de la migración: en
       panel compacto las teclas no llevan relleno propio —el alto lo reparte
       la rejilla— y esta regla (0,3,0) ya ganaba ANTES al `padding-block` que
       tv-show ponía a (0,3,0), por orden de carga. Consumir aquí el token
       parecía coherente, pero hacía las teclas más altas que en la versión
       anterior: sería reformar el diseño escondido en un refactor. Medido con
       `tools/shots.mjs` (una línea de 1 px se movía en todo el ancho). */
    padding: 0; min-height: 0; min-width: 0;
    display: flex; align-items: center; justify-content: center;
  }
}