/* ============================================================================ LA FICHA DE CADA CATEGORÍA: SU PAISAJE Y SU PALETA ---------------------------------------------------------------------------- Dos mitades en el mismo bloque, porque son la misma decisión: cómo se ve esta categoría. El PAISAJE es lo que había aquí y su porqué es lo que sigue; la PALETA llegó el 28 de agosto de 2026 y su porqué está en el segundo comentario, más abajo. Cada categoría es UN bloque con las dos. Lo carga TODA página de juego, junto a la hoja del motor: Y quién es cada juego lo dice su propio ``. ── PARA QUÉ, MEDIDO ── `juego-comun.js` no puede poner `--fondo` hasta que le han llegado las dos fichas (`game.json` y `games.json`): dos viajes de red. El primer pintado ocurre mucho antes, así que sin esta tabla la pantalla arranca con el paisaje de respaldo —que es OTRO dibujo— y lo cambia por el bueno ~360 ms después. Ése era el parpadeo que se veía al entrar en un juego, y de paso se bajaban 184 KB de una imagen que no se iba a usar. No se arregla adelantando el JS: el primer pintado ocurre antes de que ningún `fetch` pueda haber vuelto. Tiene que ser CSS bloqueante, y ésta lo es. Esto no sustituye a `juego-comun.js`, lo ADELANTA. El JS sigue escribiendo las mismas variables en el `style` del ``, que es inline y gana sobre esta regla: un juego con `fondo` propio en su `game.json` sigue mandando, y si esta tabla se quedara vieja el JS la corregiría —se vería el paisaje viejo un instante, que es exactamente lo que pasaba antes de tenerla—. ── POR QUÉ LAS RUTAS VAN ABSOLUTAS, QUE ES LO CONTRARIO DE LA REGLA ── La regla del sitio es que lo de la vertical se enlaza en relativo. Aquí no se puede, y el motivo es una trampa del CSS que ya está avisada en `juego-layout.css`: dentro de una variable, el navegador resuelve las rutas relativas contra la hoja donde se USA la variable, no contra la que la declara. Quien usa `--fondo` es `body::before`/`body::after`, que están en `/game_engine/juego-layout.css`. Así que un `url('art/fondos/…')` escrito aquí se pediría a `/game_engine/art/fondos/…`, que no existe. Con ruta absoluta no hay nada que resolver. Y de ahí sale lo ÚNICO que esta hoja no cubre: por la puerta de servicio (`kanon.botize.es/verticals/quijotin/`) estas rutas caen en la raíz de kanon y no existen, así que allí no hay adelanto y el paisaje lo pone el JS 360 ms después. Se acepta a sabiendas: esa puerta es para mirar el sitio cuando el vhost del dominio esté roto, no es por donde entra la niña, y el resultado allí es exactamente el que había antes de que esta tabla existiera. ── POR QUÉ ESTÁ AQUÍ Y NO EN EL MOTOR, QUE ES DE DONDE VIENE ── Hasta el 27 de agosto de 2026 esta tabla vivía DOS VECES dentro del motor: en `juego-layout.css` y otra vez en `voz-comun/style.css`, porque los tres juegos de voz no cargan la primera. Dos copias de lo mismo, y un comentario en cada una avisando de que si se tocaba una había que tocar la otra. Estaba mal por dos razones: 1. ES CONTENIDO DE LA VERTICAL. Los nombres de las categorías, sus paisajes y sus colores de cielo son de Quijotín; el motor no tiene por qué saber que existe una categoría llamada «caligrafía». La siguiente vertical tendrá otras, y con la tabla dentro del motor habría que ir a añadírselas allí —o peor, heredaría las de Quijotín—. 2. Y ADEMÁS LLEVABA UN DÍA SIN PINTAR NADA. Las rutas eran relativas, la hoja se mudó a `/game_engine/` el 26 de agosto de 2026 y el arte se quedó en la vertical. Nadie lo notó porque el JS llega detrás y lo tapa: o sea que el parpadeo que esta tabla existe para quitar había vuelto, en silencio, y sólo se veía apagando el JavaScript. Se descubrió montando una segunda vertical, que es para lo que servía montarla. ── ES UNA COPIA DE `games.json`, Y LA ÚNICA ── Si allí se cambia el paisaje o el cielo de una categoría, hay que cambiarlo aquí. La alternativa era no tener copia y quedarse con el parpadeo: no hay forma de que el CSS componga una ruta a partir de un atributo. Al menos ahora la copia es UNA y está al lado del catálogo que copia, y no dos escondidas en el motor. `--cielo` es lo que se ve mientras el jpg llega, así que tiene que ser el color de la PRIMERA FILA DE PÍXELES del dibujo o se ve la costura. ── CÓMO SE COMPRUEBA QUE SIGUE VIVA ── Con el JavaScript apagado, que es lo único que la enseña: una página suelta que enlace `juego-layout.css` y esta hoja, con `` y nada más. Si sale el paisaje, pinta. Si sale el color liso, está rota otra vez. Mirar un juego de verdad NO sirve: el JS lo arregla antes de que se vea. ESO VALE PARA EL PAISAJE Y YA NO PARA EL COLOR, y conviene no confundirlos: desde que la paleta vive aquí, un juego sin `color` en su ficha NO tiene quien le arregle el tono por detrás. Si esta hoja no carga, se queda con el `:root` de su propia hoja —que es el respaldo— y eso sí se ve a simple vista. ========================================================================= */ /* ============================================================================ LA PALETA DE CADA CATEGORÍA, SACADA DE SU PAISAJE ---------------------------------------------------------------------------- Un juego ya no elige su color: lo hereda de su categoría, igual que hereda el paisaje. Es la misma simetría, y estaba a medias — `decorar()` ya sacaba `fondo` y `cielo` de la categoría mientras el color venía de la ficha. ── POR QUÉ ── La pantalla de un juego es un dibujo a pantalla completa con cuatro cosas encima: el título, la letra gigante, dos barras y los botones. Todo eso iba teñido con el `color` de su `game.json`, elegido cuando ese campo todavía pintaba la tarjeta del menú — y el menú hace tiempo que no lo usa (tiene su propia PALETA de tonos tierra en `index.html`, repartida por el sitio que ocupa cada tarjeta en el anillo). O sea que ese color quedó decidiendo sólo la pantalla del juego, sin que nadie lo hubiera elegido PARA ella. Se notaba: `letras` se juega sobre un campo de La Mancha que es 92,5% dorado y salía en MORADO, un tono que no está en un solo píxel del cuadro. Y era estructural, no un descuido de ese juego: el color venía de otra pantalla. ── CÓMO SE ELIGE UN COLOR, QUE NO ES A OJO ── Se mide la imagen. Para cada paisaje: se cuantiza, se agrupa por sector de tono y salen dos cosas — el dominante (el cuerpo del cuadro) y el contrapunto (lo que el ilustrador usó para separar lo que está delante). El acento sale del CONTRAPUNTO, porque es el color con el que ese dibujo ya distingue las cosas. Después se comprueba el contraste WCAG en los dos sitios donde se lee: el recuadro central (la letra gigante) y la primera franja (el título). El listón es 4,5:1. Las seis pasan con 5,4 o más, y `letras` sustituyó un morado de 5,5:1 por un teal de 5,6:1 — se cambia de familia de color sin tocar la legibilidad, que era lo que había que comprobar antes de mover nada. OJO AL MEDIR EL CENTRO: hay que recortar el recuadro donde CAE la letra (~20% de ancho, del 25% al 62% de alto), no la franja entera de lado a lado. Con la franja ancha, `conversacion` daba 3,0:1 y parecía inservible; el recuadro real da 4,8:1, porque lo que baja la media son los edificios de los lados, donde no hay nada escrito. ── DOS PAISAJES SE COMPORTAN AL REVÉS, Y POR ESO HAY TRES SITIOS ── `caligrafia` y `verbos` no son paisajes claros: uno empieza con las vigas del techo y el otro es de noche. Ahí no vale un acento oscuro para todo, porque el título y la letra caen sobre fondos de luz CONTRARIA: · `caligrafia` — la letra cae sobre la pared de yeso (clara) y el título sobre la viga (oscura). Letra en tinta, título en el crema del yeso. · `verbos` — las dos caen sobre la noche, así que las dos van claras, y además el `--halo` tiene que dejar de ser un resplandor BLANCO: una letra clara rodeada de blanco se emborrona. Ahí es una sombra. Por eso una categoría puede declarar `--titulo`, `--halo-titulo` y `--halo` por separado. Antes eso lo adivinaba `titular()` en el motor mirando si el `--cielo` era oscuro; sigue ahí para quien traiga `color` propio, pero elegirlo a mano mirando el dibujo acierta más que un umbral sobre una fila de píxeles. ── UN JUEGO PUEDE SEGUIR SALIÉNDOSE, Y NO HACE FALTA TOCAR EL MOTOR ── `juego-comun.js` ya tenía la guarda: `if (cfg.color && …) tenir(…)`. Un `game.json` CON `color` se tiñe como siempre —y gana, porque `tenir()` escribe en el `style` del , que es inline— y uno SIN `color` cae aquí. Quitar el campo de una ficha es, literalmente, el interruptor. Queda un caso vivo a propósito: `finish-lab/` conserva su `color`. Es el banco de pruebas, y así hay un sitio donde la vía de la excepción se sigue ejerciendo — si algún día se rompiera, se rompería ahí, que es donde toca. La otra vertical, Sansuuland, no tiene esta tabla y sus cuatro juegos conservan su `color`: sigue funcionando igual, sin enterarse. ── LOS DERIVADOS VAN CON color-mix() Y ESO ES SEGURO AQUÍ ── De las nueve variables de color que lee un juego, sólo dos son una decisión (`--acento` y `--acento-medio`); el resto son aclarados y oscurecidos de la primera. Escribirlos a mano serían 54 hex que hay que recalcular a mano cada vez que se toque un acento, y ése es justo el tipo de sitio donde este proyecto se equivoca en silencio. Se derivan una vez, aquí. `color-mix()` pide Safari 16.2, y el listón de este sitio ya está más alto: `juego-layout.css` usa `container-type` (Safari 16) y `finish.js` `@property` (Safari 16.4), sin los cuales la pantalla de fin ni se anima. Y si un día cayera en un navegador que no lo entienda, la declaración se descarta y el juego se queda con el `:root` de su propia hoja: se ve raro, no se rompe. ── AL AÑADIR UNA CATEGORÍA ── Van las dos mitades en el mismo bloque: paisaje y paleta. Una categoría sin paleta no falla — hereda el `:root` de aquí abajo, que está calculado sobre el acento que no tiene— así que sale gris y nadie avisa. Se mide el dibujo nuevo y se escriben sus dos colores. ========================================================================= */ /* Lo que es igual en las seis, y lo que se deriva del acento de cada una. Va en `:root` (0,1,0) y cada categoría es `html[data-categoria]` (0,1,1), así que la categoría gana cuando quiere pisar algo de aquí. */ :root { /* El título es el acento mientras el paisaje empiece claro, que son cuatro de las seis. Las dos que empiezan en sombra lo redefinen. */ --titulo: var(--acento); /* Los cinco derivados. Las proporciones salen de lo que hacía `tenir()`: un aclarado fuerte para el filo de los botones, uno casi blanco para los canales, y un oscurecido para el estado pulsado. */ --acento-claro: color-mix(in srgb, var(--acento) 22%, #fff); --acento-suave: color-mix(in srgb, var(--acento) 10%, #fff); --acento-fuerte: color-mix(in srgb, var(--acento) 80%, #000); --bg: color-mix(in srgb, var(--acento) 6%, #fff); --shadow: 0 6px 24px color-mix(in srgb, var(--acento) 22%, transparent); /* Estos dos NO se derivan del acento a propósito: se leen siempre sobre una superficie clara (el crema de los botones, el cristal esmerilado de las pantallas de premio), así que dependen de esa superficie y no del tono del juego. Derivarlos daba un texto ámbar en `verbos`. */ --card: #fdf4dc; /* el crema de papel del menú (`--crema`) */ --text: #3b2f16; /* su marrón tierra */ /* El relleno de los cuatro botones. El respaldo del motor es BLANCO y tiene que serlo —no sabe sobre qué va a caer—, pero aquí sí se sabe: sobre estos seis dibujos, cuatro rectángulos blancos se leen como un formulario pegado encima del cuadro. El alfa importa: el botón lleva `backdrop-filter`, y con alfa 1 se pierde el paisaje de debajo y vuelve a ser una pegatina. */ --plato: rgba(253, 244, 220, .86); /* Acierto y fallo. Verde y rojo no se negocian —es lo único de esta pantalla que una niña que no lee tiene que entender sin que se lo expliquen— pero llevados a la temperatura de estos cuadros. Antes eran los pastel de Material (#e8f5e9 / #ffebee), dos blancos fríos, y estaban COPIADOS en el :root de los diecinueve juegos. */ --correct-bg: #e7f0cf; --correct-bd: #6d9c3a; --wrong-bg: #f8ded1; --wrong-bd: #c0522e; } /* ── LETRAS · el campo de La Mancha ────────────────────────────────────── 92,5% dorado. El contrapunto es el teal de las montañas y los cardos del primer plano (4,7% del área con color), que además ya era la `turquesa` de la paleta del menú. Letra 5,6:1 · título 5,4:1. */ html[data-categoria="letras"] { --fondo: url('/art/fondos/letras-fondo.jpg'); --difuso: url('/art/fondos/letras-fondo-difuso.jpg'); --cielo: #f7dc75; --acento: #1a5f5c; --acento-medio: #3f8f8b; } /* ── LECTURA · la laguna ───────────────────────────────────────────────── Se llamó `palabras` hasta el 14/09/2026, cuando entró el cuento de los monstruos; el dibujo es el mismo y por eso sus ficheros conservan el nombre. Mismo campo dorado, pero con agua. El acento sale del verde de los juncos y del reflejo de la laguna (hsl 160), y NO del teal de sus cipreses (hsl 178), que es el de `letras`: dos categorías vecinas en el menú no deberían salir del mismo color. Letra 6,3:1 · título 6,1:1. */ html[data-categoria="lectura"] { --fondo: url('/art/fondos/palabras-fondo.jpg'); --difuso: url('/art/fondos/palabras-fondo-difuso.jpg'); --cielo: #f2db83; --acento: #1d5744; --acento-medio: #4f9b7f; } /* ── CALIGRAFÍA · el estudio ───────────────────────────────────────────── Interior: pared de yeso, vigas oscuras arriba, suelo de terracota. El acento es la TINTA —que en un juego de caligrafía es el color que toca— y el medio la terracota del suelo, así que la barra va de suelo a tinta. El título va sobre la viga, o sea en sombra: se pinta con el crema del yeso y su halo deja de ser resplandor para ser sombra. Y ESA SOMBRA ES MÁS CERRADA QUE LA DEL MOTOR, por una razón que sólo se ve midiendo: quién hay detrás del título NO lo decide el `--cielo`, lo decide la FORMA de la ventana. El paisaje va `background-size: 100% auto` anclado abajo, así que en un iPad (apaisado o no) y en un iPhone sobra hueco arriba y el título cae sobre el `--cielo` —la viga—, pero en un monitor ancho o un móvil TUMBADO la imagen se recorta por arriba y el título cae sobre la PARED, que es clara. Ahí un crema con la sombra difusa del motor no se lee. Una sombra pegada al glifo (3px, casi opaca, dos veces) le dibuja la silueta y sirve para los dos casos. Comprobado en las cinco tallas. Letra 8,7:1 sobre la pared · título 7,9:1 sobre la viga. */ html[data-categoria="caligrafia"] { --fondo: url('/art/fondos/caligrafia-fondo.jpg'); --difuso: url('/art/fondos/caligrafia-fondo-difuso.jpg'); --cielo: #563313; --acento: #4a2b10; --acento-medio: #a8551f; --titulo: #e9d7b3; --halo-titulo: 0 0 3px rgba(0,0,0,.95), 0 0 3px rgba(0,0,0,.95), 0 2px 5px rgba(0,0,0,.8); /* Los botones caen sobre el suelo de terracota, que es lo más oscuro del cuadro: el plato sube de opacidad para no volverse marrón. */ --plato: rgba(253, 244, 220, .92); } /* ── VERBOS · la noche ─────────────────────────────────────────────────── El único paisaje nocturno, y el único donde el acento es CLARO: la luz ámbar de los faroles contra el azul del cielo, que es lo que el propio dibujo hace. Letra 7,2:1 · título 10,3:1. `--halo` es lo que hay que recordar aquí: de serie es un resplandor BLANCO pensado para letra oscura sobre fondo claro, y alrededor de una letra clara sólo consigue emborronarla. Va sombra, y por lo mismo el del título. Y `--acento-claro` se declara a mano en vez de derivarse: aclarar un ámbar que ya es claro da casi blanco, y el filo de los botones desaparecería contra el crema. */ html[data-categoria="verbos"] { --fondo: url('/art/fondos/verbos-fondo.jpg'); --difuso: url('/art/fondos/verbos-fondo-difuso.jpg'); --cielo: #091b31; --acento: #f0c07a; --acento-medio: #c98f4e; --acento-claro: #c9a06a; --halo: 0 2px 6px rgba(0,0,0,.6), 0 0 20px rgba(0,0,0,.55); --halo-titulo: 0 0 3px rgba(0,0,0,.95), 0 0 3px rgba(0,0,0,.95), 0 2px 5px rgba(0,0,0,.8); --plato: rgba(253, 244, 220, .92); } /* ── CONVERSACIÓN · la plaza del pueblo ────────────────────────────────── Cálida entera: no tiene contrapunto de tono, así que el acento sale de la LUZ y no del matiz — la teja de los tejados, bajada hasta que se lee. Con el primer candidato (#8a3f18) la letra daba 4,1:1 contra la franja ancha; éste da 6,4:1, y el medio se queda con el naranja vivo para que la barra no salga apagada. Letra 6,4:1 · título 5,9:1. */ html[data-categoria="conversacion"] { --fondo: url('/art/fondos/conversacion-fondo.jpg'); --difuso: url('/art/fondos/conversacion-fondo-difuso.jpg'); --cielo: #f5ce65; --acento: #6d3113; --acento-medio: #c07434; } /* ── GRAN TRAVESÍA ANDANTE · el atardecer ────────────────────────────────── El guiño a GTA (el usuario, 27/10/2026), y su paisaje es suyo: La Mancha al atardecer, cielo morado y sol naranja. Medido con docs/mide-paleta.py. Es de tono MEDIO, no claro como los demás: ningún contrapunto llega a 4,5:1 contra el recuadro de la letra (L 0,23) ni contra el cielo (L 0,085). Así que va como `verbos`, el otro paisaje oscuro, pero partido en dos: · `--acento` OSCURO, el magenta del contrapunto (#9f447c, 10% del área) bajado: es lo que pinta la pantalla del trofeo —el «¡Lo has conseguido!» sobre crema y el botón con letra blanca—, 8,6:1. Estos juegos no tienen letra gigante, así que el recuadro no manda. · `--titulo` CLARO con halo de SOMBRA: el rótulo cae sobre el cielo morado en iPad e iPhone (7,0:1) y sobre el dibujo en un escritorio ancho. `--acento-medio` es el naranja del sol. */ html[data-categoria="aventuras"] { --fondo: url('/art/fondos/aventuras-fondo.jpg'); --difuso: url('/art/fondos/aventuras-fondo-difuso.jpg'); --cielo: #4b3fae; --acento: #7a2e6e; --acento-medio: #e0703f; --titulo: #fff3d6; --halo-titulo: 0 0 3px rgba(40,10,30,.95), 0 0 3px rgba(40,10,30,.95), 0 2px 6px rgba(40,10,30,.8); --halo: 0 2px 6px rgba(40,10,30,.6), 0 0 20px rgba(40,10,30,.5); } /* ── RETOS · la cueva ──────────────────────────────────────────────────── Campo dorado con una cueva de cristales a un lado, que es el contrapunto más marcado de los seis (14% del área). El acento es el azul de su boca y el medio el turquesa de los cristales. Letra 6,9:1 · título 7,0:1. */ html[data-categoria="retos"] { --fondo: url('/art/fondos/retos-fondo.jpg'); --difuso: url('/art/fondos/retos-fondo-difuso.jpg'); --cielo: #f4da86; --acento: #194a5c; --acento-medio: #2f8fa0; } /* ── EL ORO DE ESTA VERTICAL ────────────────────────────────────────────── Lo usa el MEDALLÓN de la pantalla de fin (`game_engine/finish.js`): la cifra del peldaño y el aro de progreso. Se declara aquí porque hasta el 28 de agosto de 2026 no lo declaraba NADIE en una página de juego —sólo el menú, en su propio `index.html`— así que el medallón caía al valor de reserva que `finish.js` lleva dentro, que es el oro de Quijotín. En Quijotín eso no se notaba, porque coincide; en Sansuuland su pantalla de fin lucía un dorado que no es el suyo, y eso rompe justo lo que hace valer esa pantalla: que la niña reconozca en ella lo que va a ver en la tarjeta del menú tres segundos después. Va en esta hoja y no en la de cada juego por lo mismo que el paisaje: la cargan las 22 páginas de juego de esta vertical —los de test, los de caligrafía y los tres de voz—, y es de la VERTICAL, no del motor. SI SE CAMBIA, SE CAMBIA TAMBIÉN EN EL MENÚ (`index.html`, `:root`), que es la otra mitad del mismo dibujo. Son dos sitios porque sacar el CSS del menú a una hoja aparte metería una petición bloqueante antes de pintar el carrusel. */ :root { --oro: #fbd973; }