/* Operaciones (math) — keypad round. All visual properties use CSS vars so skins override without !important. Defaults reproduce the original look exactly — no visual change without a skin. ESTÁNDAR RESPONSIVE («primero se reparte el espacio, luego se dibuja»): la ronda SIEMPRE llena la altura de su contenedor y el teclado es el elemento flexible — sus 4 filas se reparten el alto con minmax(0,1fr) y encogen para caber. Pregunta + display + teclado completo (incluido 0 / Borrar / Enviar) son SIEMPRE visibles, sin scroll, en cualquier marco (player no-fullscreen, fullscreen, VS o Equipos). Las medidas usan unidades de CONTENEDOR (cqmin), no de viewport (vmin/vh), para responder al MARCO y no a la ventana. */ .ww-math { display: flex; flex-direction: column; height: 100%; min-height: 0; } /* La ronda toma el alto RESTANTE tras la cabecera (flex:1), nunca height:100% —que se sumaría al alto del HUD y desbordaría el marco—. */ .ww-math-round { flex: 1 1 auto; min-height: 0; } .ww-keypad-round { display: flex; flex-direction: column; align-items: center; /* EL BLOQUE VA JUNTO Y EL AIRE A LOS BORDES. Primero fue `flex-start` (todo el hueco de golpe entre la pregunta y las teclas: una banda vacía en medio) y luego `space-evenly`, que lo repartió en tres huecos y separó el enunciado de su teclado. Un teclado de 3×4 en un panel el doble de alto que ancho NO puede llenar sin deformarse, así que lo que sobra va FUERA del bloque: la pregunta y las teclas quedan juntas —se leen como una sola cosa— y el aire se reparte arriba y abajo. */ justify-content: center; gap: var(--math-gap, clamp(.4rem, 2cqmin, 1.1rem)); padding: var(--math-pad, 0); height: 100%; min-height: 0; box-sizing: border-box; /* LA CALCULADORA ES UNA SOLA PIEZA, y el tope de ancho es del BLOQUE, no del teclado (dueño, 2026-08-22, con captura de Individual a pantalla completa: «la actividad se dispersó»). El tope vivía en `.ww-keypad`, así que en una pantalla ancha el teclado se quedaba en su sitio pero la cabecera —que mide el 100 % de su caja— se estiraba a todo el marco: la operación quedaba a la izquierda y el visor pegado al borde derecho, a un palmo del teclado. Con el tope aquí, cabecera y teclado comparten ancho y se leen como una calculadora. En VS el bloque ya trae su propio tope (más estricto, calculado con la cabecera) y sigue mandando por especificidad. */ width: 100%; margin-inline: auto; /* EL BLOQUE REPARTE SU PROPIO ALTO (§0: un modo no puede conocer una plantilla concreta). Esta cuenta vivía en `styles/vs.css`: era el MODO quien restaba la cabecera, quien sabía que la rejilla es de 3 columnas por 4 filas y quien tenía escrito el hueco en `1.5rem`. Tres datos privados de la calculadora en una hoja que no debería saber que la calculadora existe — y por eso la plantilla tuvo que volverse rígida para que la cuenta ajena siguiera siendo cierta. Ahora el modo solo dice DOS valores (cuánto vale ahí una cabecera y cuál es su tope) y la cuenta la hace quien conoce la anatomía. El tope sale de la geometría: al teclado le queda el alto de la caja menos la cabecera y el hueco, y de ahí —por la proporción de su propia rejilla— su ancho máximo. Así el bloque llena lo que puede sin deformar las teclas. */ --math-ancho: min( 100cqw, var(--math-tope, 75cqh), calc((100cqh - var(--math-head-min, 0px) - var(--math-gap, 1.1rem)) * var(--key-cols, 3) / var(--key-rows, 4)) ); max-width: min(100%, var(--math-ancho)); /* ══ LA MEDIDA MADRE: UNA CIFRA ═════════════════════════════════════════════ El «3 × 4 =» y el «7» de una tecla salían de fórmulas DISTINTAS —y había tres juegos de ellas, uno por modo: nueve en total para tres textos que en una calculadora son del mismo tamaño—. Por eso no cuadraban a la vista y por eso un tema tenía que perseguirlos de uno en uno (dueño, 2026-08-22: «deben tener el mismo origen para que sí sean idénticos y poder controlar los temas más fácilmente»). Ahora hay UNA medida —lo que mide una cifra— y los tres textos SON esa medida: idénticos, como pidió el dueño. · Un MODO (VS, Equipos) redeclara SOLO `--math-cifra`, no tres fórmulas. · Un TEMA cambia toda la tipografía de la calculadora con ese mismo token. · `--key-size` / `--math-q-size` / `--display-size` siguen existiendo como escotilla para un tema que necesite descuadrar una pieza a propósito. Hubo un momento un multiplicador por pieza (`--key-escala` y compañía): no lo consumía nadie, y como la red «un solo origen» exige que las tres midan lo mismo, cualquier valor distinto de 1 rompía CI. Una escotilla que el propio test prohíbe usar no es una escotilla. Y LA LETRA MIRA EL ANCHO EN EL QUE TIENE QUE CABER. Este era el fondo del fallo de «la caja del resultado no tiene un lugar» (dueño, 2026-08-24, con captura a 1280×800): la medida salía del lado corto de la CAJA, sin saber nada del ancho del BLOQUE, así que al crecer la letra el enunciado y el hueco de respuesta dejaban de caber en su fila; `flex-wrap` partía la cabecera en dos y la segunda línea se salía de su banda, con el teclado encima. Se probó dejar encoger al hueco (arregla 7 de 11 tamaños), y también al enunciado (entonces «2 × 6 =» se parte en dos líneas: peor). Ninguna de las dos toca la causa — que la letra no cabe—, solo mueven dónde se ve. El techo por ancho la hace caber POR CONSTRUCCIÓN: la cabecera es una fila con la operación y el hueco. El divisor se CALIBRÓ midiendo 11 formas de ventana a pantalla completa: 8, 9 y 10 dan cero roturas, y se elige el 10 por ser el más conservador de los tres (el 12 llegó a estar escrito en este comentario cuando el código ya ponía 10 — un comentario que no cuadra con su línea es peor que no tenerlo). Al ir en la MEDIDA MADRE, las teclas encogen con ella y los tres textos siguen siendo el mismo tamaño. */ --math-cifra: max(1rem, min(11cqmin, calc(var(--math-ancho) / 10))); } /* «2 × 2 =» Y EL RESULTADO, EN LA MISMA LÍNEA (dueño, 2026-08-17, con captura): apilados, la operación y su hueco de respuesta se leían como dos cosas distintas y el bloque quedaba alto y suelto. Juntos son UNA frase —el enunciado completo— y el conjunto queda compacto. Si no cabe (móvil muy estrecho o número largo), el hueco baja solo: `flex-wrap`, no un breakpoint. */ .ww-keypad-head { flex: 0 0 auto; /* LOS DOS MARCOS, LA MISMA ALTURA. El hueco del «0» salía más bajo que la chapa del «2 × 6» —cada uno con su relleno— y juntos parecían dos piezas de sitios distintos. `stretch` los iguala al más alto sea cual sea el tema, sin que ninguno tenga que saber cuánto mide el otro. */ display: flex; align-items: stretch; justify-content: center; flex-wrap: wrap; gap: var(--math-head-gap, clamp(.35rem, 1.8cqmin, 1.1rem)); /* LA CABECERA OCUPA EL ANCHO DEL TECLADO, como el visor de una calculadora de verdad: si mide solo su texto, queda una pastilla estrecha encima de un teclado ancho. La operación se lleva el sobrante y el hueco de respuesta conserva su ancho mínimo. */ width: 100%; max-width: 100%; /* LA CHAPA ES DEL TAMAÑO DE UNA TECLA, no de su texto (dueño, 2026-08-22: «2×6 y 0 están muy pequeños sus cajas respecto de las de abajo»). La letra ya era la MAYOR de la pantalla —1,3× la cifra de una tecla—, pero su caja medía el texto más un relleno mínimo: 29 px de alto contra teclas de 71. En una calculadora de verdad el visor no es más bajo que una fila de teclas. Se pide por token para que cada modo diga cuánto vale ahí «una tecla»; sin token, el alto lo sigue dando el contenido. LA BANDA ES UN SUELO, NO UN TECHO — y ese es el segundo medio filo del fallo de «la caja del resultado no tiene un lugar» (dueño, 2026-08-24). Llegó a ser un alto EXACTO para que la cuenta del bloque —que resta este valor— siguiera siendo cierta cuando un tema le añade relleno a la chapa. Pero un alto exacto no da sitio: cuando el contenido no cabía en la fila, `flex-wrap` lo mandaba a una segunda línea que caía FUERA de la banda, y el teclado se pintaba encima. El primer medio filo (el techo por ancho de `--math-cifra`) hace que quepa en una fila con la operación que genera la plantilla. Pero la operación la escribe el profe y puede ser «144 ÷ 12» o más larga: no hay medida que valga para todo. Con un suelo, ese caso raro ENSANCHA la banda y el teclado encoge un poco —feo pero legible— en vez de esconder el hueco de la respuesta. Correcto por construcción en lo normal, y que ceda por lo bajo en lo raro. */ min-height: var(--math-head-min, auto); } /* LA TIPOGRAFÍA DE LA CALCULADORA, por token. Arcade la escribía directamente sobre `.ww-keypad-q`, `.ww-keypad-display` y `.ww-key` (tres invasiones para una sola decisión); ahora declara `--math-font` una vez y estas tres la leen. El respaldo es `inherit` A PROPÓSITO: la tecla es un `