/* ══ La escala ═════════════════════════════════════════════════════════════ BG3 escala su interfaz por el ALTO, no por el ancho. Su diseno es de 3840x2160 —16:9 exacto—, y en pantalla completa el juego lo ajusta para que esos 2160 sean el alto de la ventana; lo que sobra de ancho se queda como aire a los lados, y los paneles no se estiran. Aqui estaba todo en `vw`, que es lo mismo SOLO en una ventana de 16:9. En una mas apaisada —1891x895, o sea 2,11:1— cada `vw` vale mas de la cuenta y el panel pide mas alto del que hay: por eso desbordaba, por eso hubo que recortar el marco de la cadena, y por eso entraban tres cajones donde el juego enseña cuatro. `min(1vw, 1.7778vh)` es un `vw` del diseno atado al alto: en 16:9 las dos valen igual; mas apaisado gana el alto —como el juego—; mas estrecho gana el ancho, y asi tampoco se sale por los lados. */ :root{--esc: min(1vw, 1.7778vh)} /* ══ El raíl de pasos ══════════════════════════════════════════════════════ El mismo en la creación y en la subida de nivel, porque en el juego es literalmente el mismo: `CCLib.xaml` es una librería compartida donde conviven las claves de creación —`CCTabDone`, `CCIconSelected`— y las de subida —`LevelUpBanner`, `LevelUpShowFeaturesTemplate`—, y los assets de la subida viven en `Assets/CC/`, la carpeta de creación de personaje. Lo que hacen ellos, en una línea: Un solo componente, una sola fuente de datos, y al subir de nivel solo cambia el envoltorio. Aquí igual: este archivo lo cargan las dos pantallas y la diferencia se marca con una clase en el raíl, no con otro CSS. Antes había dos: el raíl bueno de la creación —bolitas del juego, el valor elegido debajo, el enganche de los pasos que cuelgan— y en la subida una fila de «1. Vida 2. Elecciones» en letra de once. La misma pregunta —«¿por dónde voy?»— contestada de dos maneras distintas en la misma aplicación. ═══════════════════════════════════════════════════════════════════════ */ .railpasos{list-style:none;margin:0;padding:0} /* Alegreya Sans es más pequeña de ojo que la tipografía anterior, así que el raíl se sube de tamaño para que se lea igual de bien. */ .railpasos li{display:flex;gap:13px;align-items:center;padding:11px 13px; border-radius:10px;cursor:pointer;transition:background .14s} /* Sin realce al pasar por encima: no se puede pulsar. */ /* Lo que aún no toca no se puede pulsar, y se nota: al raíl solo se vuelve hacia atrás. */ .railpasos li.lejos{cursor:default;opacity:.55} .railpasos li.lejos:hover{background:none} /* La sublínea de subespecie: sangrada y con un filete que la ata al paso de arriba, para que se lea como algo que cuelga de Especie y no como un paso más de la lista. El enganche va de la MITAD DE LA BOLITA DEL PADRE POR ABAJO a la MITAD DE LA BOLITA DEL HIJO POR LA IZQUIERDA. Las cuentas salen de la propia fila y no a ojo: la bolita mide 41 y arranca a 13 del borde, así que su eje cae a 33,5 del borde de SU fila; el hijo va sangrado 30, luego ese eje queda a 3,5 del borde del hijo, y la línea de 2 px se centra ahí poniéndola en 2,5. Por la derecha para en 11 —dos píxeles antes del borde izquierdo de la bolita del hijo, que está en 13—, que tocarla sería pisar el aro. Y arranca en -12, que es donde acaba la bolita del padre. Estaba en `left:-17px`, que no es el eje de la bolita sino su BORDE IZQUIERDO: el tronco bajaba por fuera del aro en vez de por su centro. Y son DOS piezas, no una: · `::before` es el codo, de arriba al centro del renglón. · `::after` es la continuación del tronco cuando detrás viene otro hermano. Sin ella, el segundo hijo empezaba su línea en el aire —a la altura de su propia fila— y entre los dos quedaba un tramo sin tronco: con Deidad y Competencias juntas parecía una sola línea larga que ignoraba a la primera y solo enganchaba a la segunda. Todo esto se dibuja FUERA de la fila, en el margen: si va dentro, el fondo del paso activo se lo come y la dependencia deja de leerse. */ .railpasos li.sub{margin-left:30px;position:relative;overflow:visible} .railpasos li.sub::before{content:"";position:absolute;left:2.5px;top:0;bottom:50%; width:8.5px;border-left:2px solid var(--gold-dim);border-bottom:2px solid var(--gold-dim); border-bottom-left-radius:6px;pointer-events:none} /* El primero de los hermanos cuelga del padre, que está en la fila de arriba. */ .railpasos li:not(.sub) + li.sub::before{top:-12px} .railpasos li.sub:has(+ li.sub)::after{content:"";position:absolute; left:2.5px;top:50%;bottom:0;width:2px;background:var(--gold-dim); pointer-events:none} .railpasos li.sub.on::before,.railpasos li.sub.hecho::before{border-color:var(--gold)} .railpasos li.sub.on::after,.railpasos li.sub.hecho::after{background:var(--gold)} .railpasos li.sub .k{font-size:14.5px} .railpasos li.sub.pide .v{color:var(--ac)} /* Cada cuenta de armas en su renglón: «0 de 1 sencillas» arriba y «0 de 3 marciales» debajo, no las dos seguidas partiéndose por donde caiga. */ .railpasos .v .cuenta{display:block} .railpasos li.on{background:rgba(230,192,120,.11); box-shadow:inset 0 0 0 1px rgba(230,192,120,.4)} /* Las bolitas son las del juego: el aro apagado para lo que queda por hacer, el botón redondo para el paso en el que estás, y el tic de confirmación encima cuando ya está resuelto. Dentro va el icono de la pestaña —raza, clase u origen— igual que en BG3. */ /* El boton redondo del juego, `btn_roundSmall_d.png` (y `_h` al pasar por encima), con el icono del paso dentro y el tick DETRAS asomando por la esquina cuando esta resuelto. */ /* Vuelve a navegar, asi que vuelve a tener realce: un mando sin respuesta al pasar por encima no parece un mando. Se realza solo lo PULSABLE —ni el paso en el que ya estas ni lo que todavia no toca—, que si no la lista entera parpadea al cruzarla con el raton y deja de decir donde puedes ir. El boton redondo tambien cambia a su version encendida, que es el mismo `_h` del juego que ya usan el paso activo y el que reclama algo. */ .railpasos li{cursor:default} .railpasos li:not(.lejos):not(.on){cursor:pointer} .railpasos li:not(.lejos):not(.on):hover{background:rgba(230,192,120,.07); box-shadow:inset 0 0 0 1px rgba(230,192,120,.22)} .railpasos li:not(.lejos):not(.on):hover .marca{ background-image:url("iconos/ui/btn_roundSmall_h.png")} .railpasos li:not(.lejos):not(.on):hover .k{color:var(--ink)} .railpasos li:not(.lejos):not(.on):active{background:rgba(230,192,120,.13)} .railpasos .marca{flex:none;width:calc(2.34 * var(--esc));height:calc(2.34 * var(--esc));position:relative; display:grid;place-items:center; background:url("iconos/ui/btn_roundSmall_d.png") center/contain no-repeat} .railpasos li.on .marca, .railpasos li.pide .marca{background-image:url("iconos/ui/btn_roundSmall_h.png")} .railpasos .marca img{width:calc(1.3 * var(--esc));height:calc(1.3 * var(--esc));object-fit:contain;opacity:.62; filter:saturate(.7)} .railpasos li.on .marca img{opacity:1;filter:none} /* RESUELTO: el icono del paso se APAGA y el tic se pone encima. Es lo que hace el juego —en su raíl, un paso hecho enseña la marca de confirmación y lo que había debajo se retira—, y además dice lo que tiene que decir: ese paso ya no te pide nada, así que su dibujo deja de reclamar atención. Estaba al revés: `.hecho` ponía el icono a opacidad 1, más encendido que un paso pendiente, y sin ningún tic. Un paso terminado cantaba más que uno por hacer. El tic es una MÁSCARA, como las heráldicas: medido, `ico_tick_active_d` es 44x44 neutro —rgb(161,144,159)—, así que el color lo pone el fondo. Va en accent100, #E6DBC2, que es el claro cálido del tema. */ /* Apagado SALVO donde estás: un paso resuelto en el que estás parado lleva su tic, pero sigue siendo el paso activo y no se atenúa como los de detrás. */ .railpasos li.hecho:not(.on) .marca img{opacity:.4;filter:saturate(.55)} .railpasos li.hecho .marca::after{content:"";position:absolute;inset:0; background-color:#e6dbc2; -webkit-mask:url("iconos/ui/ico_tick_active_d.png") center/58% no-repeat; mask:url("iconos/ui/ico_tick_active_d.png") center/58% no-repeat; pointer-events:none} /* El tick: detras del icono, arriba a la derecha y fuera del circulo, que es donde lo pone el juego (`HorizontalAlignment="Right" VerticalAlignment="Top"`). */ /* La admiracion no es cuadrada (44x76), asi que se deja respirar a lo alto y se centra; el tick si lo es. */ .railpasos .marca img{width:auto;max-width:calc(1.3 * var(--esc));max-height:calc(1.3 * var(--esc))} .railpasos .txt{min-width:0} /* Medido en la partida: el nombre del paso mide 0,72vw de cuerpo y va en Quadraat como el resto del panel. Estaba a 15,5px de Alegreya Sans, o sea mas grande y en la fuente del tema de mando. */ .railpasos .k{font:400 calc(.72 * var(--esc)) var(--libro);color:var(--dim)} .railpasos li.on .k{color:var(--gold-hi)} /* Lo elegido PARTE en varias líneas en vez de cortarse con puntos suspensivos. Es lo que hace el juego —en su raíl, «Subclase / Dominio de la Muerte» ocupa dos renglones—, y aquí hacía falta: con el corte, «0 de 2 instrumentos musicales» se quedaba en «0 de 2 instrumentos musi…», que es justo la palabra que dice de qué van esas dos competencias. Ensanchar el raíl hasta que cupiera de una pieza pedía catorce unidades y se comía el centro. */ .railpasos .v{font:400 calc(.62 * var(--esc)) var(--libro);color:var(--faint); margin-top:calc(.12 * var(--esc)); white-space:normal;overflow-wrap:anywhere;line-height:1.25} /* ── En la subida, el mismo raíl tumbado ────────────────────────────────── La creación tiene una columna entera para él; el pop-up de subida no, así que ahí va en fila. Lo que NO cambia es la pieza: las mismas bolitas, los mismos estados y el mismo valor debajo. Es lo que hace que las dos pantallas se reconozcan como la misma. */ .railpasos.tumbado{display:flex;gap:6px;margin-bottom:20px} .railpasos.tumbado li{flex:1;min-width:0;flex-direction:column;gap:7px; text-align:center;padding:10px 8px} .railpasos.tumbado li.sub{margin-left:0} .railpasos.tumbado li.sub::before{display:none} .railpasos.tumbado .txt{width:100%} .railpasos.tumbado .k{font-size:12.5px} .railpasos.tumbado .v{font-size:11.5px} @media(max-width:640px){ .railpasos.tumbado .k{font-size:11px} .railpasos.tumbado .v{display:none} } /* ── La maqueta del panel ───────────────────────────────────────────────── Tres columnas: el raíl, lo que estás decidiendo y la hoja del personaje. Es la de la creación, y ahora también la de la subida de nivel — que es lo que hace el juego: una pantalla con dos estados, no dos pantallas. Vive aquí y no en cada archivo para que no puedan separarse. Mientras estuvo duplicada, la subida era un pop-up de 640 px con una fila de pasos en letra de once y la creación tenía esto. La misma decisión —elegir cosas que cambian tu personaje— con dos caras distintas. */ /* Tres paneles ESTRECHOS y separados, no tres columnas que se reparten la pantalla: en el juego el de en medio ocupa poco más de un cuarto del ancho y entre ellos se ve el mundo. Estirarlos hasta tocarse convierte una pantalla de juego en un formulario de tres columnas. El hueco va entre el centro y la hoja —ahí es donde en BG3 está el personaje—, así que la hoja queda pegada a la derecha. */ /* MEDIDO EN LA PARTIDA, no deducido del tamano de los PNG. Abriendo la subida de nivel del juego y midiendo sobre la captura (pixel / ancho de pantalla = fraccion), con su escala de interfaz normalizada a la del XAML: panel del centro 28,1vw <- EL MISMO ancho que el cartel rail izquierdo 9,7vw hoja derecha 16,8vw cajon 20,3vw (concuerda con el Width=800 del control) separador 22,0vw emblema 5,15vw chapa del nivel 2,94vw Los PNG mienten: `contentPane.png` mide 1284 de las 3840 del diseno, que darian 33,4vw, y el juego lo dibuja a 28,1. De ahi que el panel saliera siempre ancho por mucho que la cuenta pareciera correcta. /* (antes) El centro mide 796 y no se negocia: es el ancho de `holder_newItem.png`, la caja de lo que ganas, y esa caja NO cambia de tamaño al terminar la fanfarria y correrse a la izquierda. Con la columna en 420 la misma caja salía de un ancho durante el estreno y de otro después, y el marco de nueve trozos se aplastaba. Cada columna sale del ancho de SU dibujo sobre las 3840 del diseno: `contentPane` mide 1284 -> 33,44vw y `summaryPane` 692 -> 18,02vw. El rail no tiene dibujo propio, asi que va a 16vw, que es lo que pide su texto sin partir palabras. El hueco que se reparte lo que sobra es el 3, que es donde en BG3 está el personaje. */ /* Y las MISMAS medidas que la creacion, no parecidas: son la misma pantalla del juego con otro contenido dentro, y el ojo lo nota enseguida cuando el rail cambia de ancho o los paneles se despegan del canto al pasar de una a otra. Aqui el rail iba a 9,7 unidades contra 11,4, y faltaban el ancho completo y el sangrado de los cantos: los tres paneles caian en sitios distintos que en creacion. */ .panelPasos{display:grid; grid-template-columns:calc(11.4 * var(--esc)) calc(28.125 * var(--esc)) minmax(0,1fr) calc(16.8 * var(--esc)); gap:calc(.83 * var(--esc)); align-items:start; /* Sin el «escápate del contenedor» de la creación: allí la rejilla vive dentro de una página normal y necesita salirse para llegar a los cantos; aquí su envoltorio YA ocupa la ventana entera, así que el mismo truco la empujaba de más y la hoja se quedaba corta por la derecha. */ padding-inline:max(10px, calc(.78 * var(--esc)))} .panelPasos > .rail{grid-column:1} .panelPasos > main{grid-column:2} .panelPasos > .hoja{grid-column:4} .panelPasos > .rail,.panelPasos > main{grid-row:1 / span 2} /* El panel del centro es `contentPane` del juego, igual que en la creacion: el mismo recorte de nueve trozos a escala 1:1 y nada mas encima. El nivel usaba una tarjeta cualquiera y por eso no se parecia. */ /* La tarjeta de la ficha se dibuja un filete de 1px por dentro con un `::after`. Aqui sobra: el marco lo pone `contentPane`, y durante la fanfarria ese filete era el rectangulo a medio ver que se adivinaba alrededor de las cajas —no habia ningun panel, era una raya. */ .panelPasos > main > .card::after, .pantallaPasos.estrenando .panelPasos > main > .card::after{display:none;content:none} /* Y un solo velo: `worldFader`. Este otro era un degradado radial mio encima del negro del juego, dos capas oscureciendo lo mismo. */ .subeIntro::before,.subeIntro.dentro::before{display:none;content:none} /* `BigBtn_sideDecor.png`: el abanico de rayas finas, centrado en el borde de arriba del panel. En el archivo esta de lado —mide 160x212 con el arco en el canto derecho y las rayas abriendose hacia la izquierda, que es como se usa a los lados de un boton grande—, asi que aqui va girado un cuarto de vuelta: el arco queda abajo, apoyado en el borde, y las rayas suben. Girado, su huella son 212 de ancho por 160 de alto: 5,52vw x 4,17vw sobre las 3840 del diseno. Va detras de todo y sin capturar el raton. */ .panelPasos > main > .card{position:relative} .panelPasos > main > .card::before{content:"";position:absolute;z-index:0; /* Medido sobre tu captura a resolucion entera: el adorno ocupa 45 px de los 1920 de ancho —o sea 2,34vw— y esta centrado justo EN el borde de arriba del panel, partido por el a la mitad. Girado un cuarto de vuelta la huella son 2,34 de ancho por 1,77 de alto, asi que la caja sin girar es al reves: 1,77 de ancho por 2,34 de alto. */ /* A su tamano de dibujo: 160x212 sobre las 3840 del diseno son 4,167 x 5,521vw, y girado la huella queda en 5,52 de ancho por 4,17 de alto. Lo tenia a 2,34 x 1,77 —menos de la mitad— porque medi una marca pequena en la captura que no era esta pieza; a ese tamano y con las rayas tan finas no se veia. */ /* Girado al REVES —`-90deg`— para que el abanico se abra hacia ABAJO, hacia dentro del panel, y no hacia arriba. Y a vez y media de su tamano de dibujo: 6,25 x 8,28vw, o sea 8,28 de ancho por 6,25 de alto una vez girado. A tres veces su tamano de dibujo: 12,5 x 16,56vw, o sea una huella de 16,56 de ancho por 12,5 de alto. El margen de arriba lo coloca colgando del borde: girando sobre su centro, para que el canto de arriba del dibujo caiga justo en el filo del panel hay que subir la caja la mitad de la diferencia entre sus dos lados. */ left:50%;top:0;width:calc(12.5 * var(--esc));height:calc(16.56 * var(--esc)); margin-left:calc(-6.25 * var(--esc));margin-top:calc(-2.03 * var(--esc)); transform:rotate(-90deg);transform-origin:center; background:url("iconos/ui/BigBtn_sideDecor.png") center/contain no-repeat; pointer-events:none;opacity:1} .panelPasos > main > .card > *{position:relative;z-index:1} /* Durante la fanfarria no sale: entonces no hay panel, solo la cadena colgando del cartel, y el adorno es del marco. */ .pantallaPasos.estrenando .panelPasos > main > .card::before{display:none;content:none} .panelPasos > main > .card{margin-top:calc(-0.34 * var(--esc)); background:none;border:0;border-radius:0;box-shadow:none; /* El relleno tiene que dejar sitio al separador, que mide 22,5vw a su tamano de dibujo. Con 6,35 a cada lado el hueco se quedaba en 20,74 y el filete no cabia: se salia y quedaba descentrado respecto a la flecha. Con 4 el hueco es de 25,44 y entran los dos holgados. */ /* Medido contra la partida: del borde de arriba del panel al titulo hay 1,10vw y no los 2,34 que salian, y por abajo el marco del scroll llega casi al filo. El panel entero mide 41,2vw de alto en el juego. */ /* Y con techo por la ventana. Los 41,2vw salen de una pantalla de 3840x2160; en un monitor apaisado normal esa cuenta se pasa, el panel sobresale por abajo y quien se pone a hacer scroll es la pagina entera. Los 230px que se restan son lo que hay fuera de la tarjeta, medido y no supuesto: 68 desde el borde de la ventana hasta el panel, 132 de cola —separacion mas el boton mas los margenes— y los 30 del relleno de abajo de la pantalla. Y va como suelo Y techo a la vez, no solo suelo: dejandola crecer, el alto de la tarjeta lo decidia su contenido, el JS medía ese alto para calcular cuanto le cabe a la cadena, y la cuenta se mordia la cola. Fijandola, el hueco de dentro es un numero y la cadena lo llena. */ padding:calc(.42 * var(--esc)) calc(2.81 * var(--esc)) calc(.6 * var(--esc)); /* 45 y no los 41,2 que tenia medidos. Con 41,2 la tarjeta ocupaba el 73 % del alto de la ventana, y midiendo la captura de la partida el panel del juego ocupa el 85,5 %: por eso entraban tres cajones donde el juego enseña cuatro. Con 45 la cuenta cierra —lo de encima del marco mas la cadena caben dentro de la tarjeta, que con 41,2 no cabian— y sigue quedando aire por debajo. 44 es lo ultimo que cabe entero una vez el relleno de la pantalla tambien escala: con 45 se salia 27 px, y con 43,3 se quedaba a un pelo de perder el cuarto cajon por el redondeo a cajon entero. */ min-height:calc(44 * var(--esc));max-height:calc(44 * var(--esc)); border-image:url("iconos/ui/contentPane_marco.png") 272 fill / calc(6.51 * var(--esc)) / 0 stretch} /* La hoja de la derecha es `summaryPane` entero: trae su marco y sus volutas, así que no se le añade ni borde ni esquinas. */ .panelPasos > .hoja{container-type:inline-size; background:url("iconos/ui/summaryPane.png") center/100% 100% no-repeat; border:0;border-radius:0;padding:34px 30px 30px; filter:drop-shadow(0 16px 40px rgba(0,0,0,.9))} @media(max-width:1180px){ .panelPasos{grid-template-columns:1fr} .panelPasos > .rail,.panelPasos > main,.panelPasos > .hoja{grid-row:auto;grid-column:1} } /* ── Y a pantalla completa, para la subida ──────────────────────────────── La subida NO es un diálogo: es una pantalla, como en el juego. Ocupa todo, se entra con fundido y se sale con fundido. Un pop-up de 640 px con scroll propio encima de la ficha decía «esto es un formulario»; esto dice «has subido de nivel». */ /* El MISMO fondo que la creación: la ilustración de carga del juego con su velo, no un degradado. Es la mitad de por qué las dos pantallas se reconocían como distintas aun teniendo la misma rejilla. */ .pantallaPasos{position:fixed;inset:0;z-index:120;display:none; /* El relleno de arriba y abajo tambien en unidades de diseno: iba en px fijos, y esos 56 px que no encogian eran justo lo que le faltaba a la cadena para enseñar el cuarto cajon en una ventana apaisada. */ overflow:auto; /* El hueco de la barra se reserva SIEMPRE y a los dos lados. Sin esto, en cuanto la pantalla sacaba barra su caja se estrechaba 15 px y todo lo de dentro se centraba en esa caja mas estrecha: el panel se iba 7,5 px a la izquierda —media barra— mientras el cartel, que va fijo a la ventana, se quedaba donde estaba. Se veia justo en el estreno, con el cartel y la cadena descuadrados entre si. */ /* Y NINGÚN hueco reservado, ni en un borde ni en los dos. Reservarlo era protegerse de un salto que aquí no puede pasar: esta pantalla se mide en unidades de diseño —`--esc`, que es `min(1vw, 1.7778vh)`—, o sea que encoge con el alto de la ventana y entra siempre entera. Medido a 1600x900 y a 1600x700, el contenido mide exactamente lo que la caja: no rueda, y la barra que el hueco estaba esperando no llega nunca. Lo que sí hacía era estrechar la caja útil 23 px, y con ella el centro de todo: el panel se quedaba en 788,5 mientras la creación —que no reserva nada— cae en 800. Once píxeles y medio de desfase entre las dos pantallas, que es lo que se veía como «los paneles no están en el mismo sitio», y de paso lo que descuadraba el cartel del estreno, que va fijo a la ventana. Sin hueco, las dos pantallas caen en el mismo eje y el raíl y la hoja arrancan y acaban donde los de la creación: 12,5 y 1587,5. */ /* Y A LO ANCHO NO RUEDA NUNCA. Aquí no hay nada que leer a la derecha, pero la entrada de los paneles sí se sale: el raíl y la hoja empiezan fuera de la ventana y se meten deslizándose. Medido en el estreno, a los 4,4 segundos el contenido llegaba a 1625 de ancho, o sea que aparecía la barra de abajo, y con ella la caja perdía 15 px de alto y 23 de ancho —de golpe, en mitad de la animación—. Ese es el salto que dejaba el panel torcido al volver a entrar: no era el centrado, era una barra que iba y venía sola. Recortando, la animación entra igual y la caja mide lo mismo de principio a fin. Comprobado tomando medidas cada 220 ms durante toda la fanfarria: ni un solo cambio de tamaño. */ overflow-x:hidden; /* Arriba y abajo sí; a los lados NO. Esas cuatro unidades de relleno —64 px en una pantalla de 1600— metían el panel hacia dentro, y la creación no las tiene: su envoltorio no rellena nada y es la rejilla la que se pega a los cantos. Con ellas, el raíl de la subida arrancaba ochenta píxeles más a la derecha que el de la creación aunque las dos rejillas midieran igual. El sangrado de los cantos lo pone ahora `.panelPasos`, como allí. */ padding:calc(1.35 * var(--esc)) 0 calc(1.38 * var(--esc)); background: linear-gradient(rgba(6,7,10,.70),rgba(6,7,10,.82)), url("iconos/ui/fondo_creacion.png") center/cover no-repeat fixed, #0a0908} /* El fondo es LA ESCENA del juego, no una foto que se le parezca: el nivel `SYS_CC_I` grabado desde el propio motor, sin personaje y sin interfaz. Antes habia aqui la cupula celeste `ATM_HDRiSkydome_Astral_A` desplazandose en bucle, que era el cielo pero no el sitio. Va como video porque la escena se mueve sola —la lavanda, la cascada, las motas de luz— y eso ya le da la respiracion que antes habia que fingir desplazando la imagen. Tres capas, y el orden es lo que las hace funcionar: .camaraCC recorta y NO se mueve nunca; su `::after` es el velo .lente lo unico que se transforma: hace de camara video la placa, encajada a 16:9 El velo va FUERA de la lente a proposito. Dentro se escalaria con ella y la pantalla se iria aclarando segun se acerca, que es justo al reves de lo que pasa en el juego. */ .pantallaPasos{background:#0a0908} .camaraCC{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none} .camaraCC::after{content:"";position:absolute;inset:0; background:linear-gradient(rgba(6,7,10,.62),rgba(6,7,10,.78)); transition:background .6s ease} .lente{position:absolute;inset:0;transform-origin:50% 50%; will-change:transform,filter; transition:transform 1200ms cubic-bezier(.33,0,.2,1), filter 1200ms cubic-bezier(.33,0,.2,1)} /* La placa se encaja a 16:9 CUBRIENDO la ventana, en vez de estirarse a la forma que tenga. Asi los porcentajes del empujon son los mismos en cualquier pantalla, que si no habria que recalcularlos por monitor. EN vw, NO EN UNIDADES DE DISENO. Iba a `100 * var(--esc)`, y ahi esta el fallo: `--esc` vale `min(1vw, 1,7778vh)`, o sea que en cuanto manda el ALTO —cualquier ventana mas ancha que 16:9, que son casi todas— cien unidades ya no son el ancho de la ventana sino menos. A 1893x993 daban 1765 px de video para 1893 de hueco: 128 px de negro repartidos por los lados. Cubrir la ventana es cosa de la VENTANA, no de la escala de la interfaz. Con `100vw` y `56,25vw` el mayor de los dos pares gana siempre y la placa tapa, manteniendo el 16:9 exacto en las dos direcciones. */ .lente video{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:max(100vw,177.78vh);height:max(56.25vw,100vh);object-fit:cover} /* El empujon. En el juego la camara pasa de `Overview_A` a `Closeup_A`: 1,115 metros de avance, 4,02 grados de giro, 7,31 de cabeceo y el FOV cerrandose de 40 a 18. Sobre el PERSONAJE eso son 2,96 aumentos, pero nuestra placa es solo fondo, y al fondo —decenas de metros— el metro de avance no le hace nada: lo suyo es solo el FOV, 2,5. Poner 2,96 seria pasarse de zoom respecto al juego. El eje del primer plano cae al 55,4 % del ancho y al 32,4 % del alto del encuadre general; llevar ese punto al centro despues de escalar es el `translate`. Y el desenfoque sube porque en el juego tambien: el foco pasa de 4 m a 5 y la apertura de 10 a 22. */ .pantallaPasos.acerca .lente{ transform:translate(-13.5%, 44%) scale(2.5); filter:blur(3px)} /* Durante la fanfarria la escena se ve, pero muy apagada: el cartel es lo que se mira. El velo se levanta solo cuando entra el panel. */ .pantallaPasos.estrenando .camaraCC::after{ background:linear-gradient(rgba(0,0,0,.86),rgba(0,0,0,.90))} @media(prefers-reduced-motion:reduce){ .lente{transition:none} .pantallaPasos.acerca .lente{transform:none;filter:none}} .pantallaPasos.ver{display:block} /* `levelChangeIndicator`: `HorizontalAlignment="Left" VerticalAlignment="Top" Margin="50,50,0,0"` —esquina de arriba a la izquierda— y dentro un `StackPanel Orientation="Horizontal"` con icono, nivel de ahora, flecha y nivel al que vas. Ni titulo ni nada mas: lo quite porque en el juego no esta. */ .pantallaPasos .cabecera{display:flex;align-items:center; padding:0;margin:0 0 calc(.9 * var(--esc));min-height:calc(1.6 * var(--esc))} /* En su esquina y no en el flujo: `Margin="50,50,0,0"` sobre las 3840 del diseno son 1,302vw desde arriba y desde la izquierda, y no los 4vw de relleno que la pantalla le pone a todo lo demas. */ /* La X de cerrar es un boton REDONDO con su aspa dentro, como el del juego: `btn_roundSmall_d/_h` de fondo y `ico_close_d.png` —24 de las 3840, o sea 0,625vw— encima. Antes era un caracter «✕» suelto. */ /* EL BOTON MAS PEQUENO Y EL ASPA MAS GRANDE. Lo tenia al reves: el circulo en 2,6 unidades —100 del diseno, contra los 90 que declara el XAML— y el aspa en ,78, con lo que el aspa ocupaba solo el 30 % del boton. Midiendo la captura de la partida, el circulo mide unos 44 del diseno y el aspa 18: el aspa es el 41 % del boton, no el 30. Se toma esa proporcion pero no ese tamano al pie de la letra: 44 del diseno son 22 px en un monitor de 1920, y esto es la UNICA salida de la pantalla. Queda en 1,95 —34 px— con el aspa al 41 %, que es un boton bastante mas pequeno que el de antes y con el aspa mas visible, que es lo pedido. Y el suelo baja de 38 a 30: con 38 el boton no llegaba a encoger nunca, porque 1,95 unidades ya son 34. */ .cerrarRedondo{position:fixed;top:calc(1.302 * var(--esc));right:calc(1.302 * var(--esc));z-index:3; width:calc(1.95 * var(--esc));height:calc(1.95 * var(--esc));min-width:30px;min-height:30px; padding:0;border:0;cursor:pointer; background:url("iconos/ui/ico_close_d.png") center/calc(.8 * var(--esc)) no-repeat, url("iconos/ui/btn_roundSmall_d.png") center/contain no-repeat} .cerrarRedondo:hover{background-image:url("iconos/ui/ico_close_d.png"), url("iconos/ui/btn_roundSmall_h.png")} .nivCambio{position:fixed;left:calc(1.302 * var(--esc));top:calc(1.302 * var(--esc));z-index:2; display:flex;align-items:center;gap:calc(.42 * var(--esc)); font:400 calc(.9375 * var(--esc)) var(--libro);color:var(--dim)} /* Los tres dibujos van a su tamano —`Stretch="None"` en los tres—: el icono mide 60 de las 3840 del diseno y la flecha 48x44. */ .nivCambio .ico{width:calc(1.562 * var(--esc));height:calc(1.562 * var(--esc));object-fit:contain} /* La flecha parpadea SIEMPRE: `RepeatBehavior="Forever" Duration="0:0:0.5"` con dos fotogramas sueltos, `levelUp_sideArrow_h1` en el 0 y `_h2` en el 0,25. Es un cambio seco de imagen, no un fundido, asi que van las dos apiladas y la de arriba se enciende y se apaga con `steps(1)`. */ /* Las dos capas en la MISMA celda de una rejilla, no una encima de la otra con `position:absolute`: sacandolas del flujo el hueco se quedaba sin alto propio y la flecha caia siete pixeles por debajo del texto por mucho `align-items:center` que llevara la fila. */ /* Se llama `flechaNiv` y no `flecha` a secas porque el desglose del dado ya tiene una `.flecha` con `margin-top:14px`, y esos 14 la bajaban siete pixeles por debajo del texto. */ .nivCambio .flechaNiv{display:grid;flex:none;align-self:center; width:calc(1.25 * var(--esc));height:calc(1.146 * var(--esc));line-height:0} .nivCambio .flechaNiv img{grid-area:1 / 1; width:100%;height:100%;object-fit:contain} .nivCambio .flechaNiv .dos{opacity:0;animation:flechaNivel .5s steps(1) infinite} @keyframes flechaNivel{0%{opacity:0} 50%{opacity:1} 100%{opacity:0}} @media(prefers-reduced-motion:reduce){ .nivCambio .flechaNiv .dos{animation:none}} /* El de ahora en gris y al que vas en dorado: `nextLevelTemplate` lleva `Foreground="{StaticResource LS_specialTxtColor}"` y el otro no. */ /* Los colores del tema, no los mios: `currentLevelTemplate` no declara `Foreground`, asi que hereda `LS_baseTxtColor` -> `baseColor` = #af8768, un marron calido. Y `nextLevelTemplate` lleva `LS_specialTxtColor` -> `specialColor` = #fff2b3, crema palido. */ .nivCambio .de{color:#af8768} .nivCambio .a{color:#fff2b3} /* Sin tope de ancho: el rail se va al borde izquierdo y la hoja al derecho, como en el juego. Con `max-width:1480` los dos quedaban flotando hacia el centro y entre la hoja y el borde de la pantalla sobraba medio palmo. Lo que crece al ensanchar la ventana es la columna 3, la del hueco. */ .pantallaPasos .panelPasos{margin:0} /* Salvo durante el estreno: ahi solo esta la cadena y va centrada en la pantalla, colgando del cartel, que tambien esta centrado. */ /* Y empieza justo debajo de donde ACABA el cartel, que no es un numero a ojo: el cartel esta centrado, sube 30,09vh y mide 28,125vw de ancho por 1080:297 de proporcion, o sea 3,87vw de medio alto. Su borde de abajo cae en 50 - 30,09 + 3,87vw. Todo sale de la geometria del propio cartel, asi que se mueven juntos al cambiar de resolucion. */ .pantallaPasos.estrenando .panelPasos{margin:0 auto; /* Medido sobre la captura del juego: entre el borde de abajo de «Druid Lv 2» y la flecha hay un 1,76 % del ancho de pantalla. Aqui habia 91 px donde tocan 28, o sea un palmo de mas. La cuenta arranca del centro del cartel ya subido (19,91vh) y lo demas va en vw, como el resto del panel. */ /* El hueco entre la linea de clase y la flecha, medido contra el ALTO del cartel para no depender de recortes: en el juego es un 16 % de ese alto y el cartel mide 7,74vw, o sea 1,24vw de hueco. */ padding-top:calc(19.91vh + (0.8 * var(--esc)))} /* ── La cabecera del paso ───────────────────────────────────────────────── Su dibujo y su nombre, asomando por encima de la tarjeta. La misma que la creación pone sobre el cuerpo de cada paso. */ .cabPaso{flex:none;text-align:center;margin:-56px 0 6px;pointer-events:none} /* En la subida no hay cabecera de paso: el tick y el «Subida de nivel» en letra grande caian justo entre el medallon y las cajas, donde el juego solo pone el corchete con la flecha. */ .pantallaPasos .cabPaso{display:none} .cabPaso img{width:34px;height:34px;object-fit:contain;display:block;margin:0 auto 2px; filter:drop-shadow(0 2px 6px rgba(0,0,0,.8))} .cabPaso .n{font:400 27px/1.1 var(--disp);color:var(--ink); text-shadow:0 2px 10px rgba(0,0,0,.8)} /* ── La barra de abajo ──────────────────────────────────────────────────── El marco del juego con los dos botones dentro, centrado. El hueco de los lados tiene que ser mayor que lo que ocupa el remate del marco (40 px), o el adorno se dibuja encima del botón —y al iluminarse se nota muchísimo—. */ /* Abarca las cuatro columnas del panel, no la del medio: asi el boton cae en el centro de la PANTALLA y no colgando de la columna central, que esta corrida a la izquierda porque el rail mide menos que la hoja. */ /* Y en unidades de diseno, no en pixeles crudos. Estaba todo el marco del boton en px —relleno, borde, tamano y cuerpo de letra—, asi que era la unica pieza de la pantalla que no encogia con la ventana: en una apaisada se comia 90 px de alto que le hacian falta a la cadena. Los numeros son los mismos de antes divididos por 19,2, que es lo que valia una unidad a 1920 de ancho, o sea que a 16:9 se ve exactamente igual que hasta ahora. */ .barraPasos{grid-column:1/-1;display:flex;justify-content:center; margin-top:calc(1.77 * var(--esc))} /* En la subida solo hay un boton —cerrar es la X de arriba a la derecha—, asi que el marco no tiene que reservar sitio para dos. */ .barraPasos:has(.atras[hidden]) .marcoBtn{padding-left:0;padding-right:0} .barraPasos .marcoBtn{display:flex;align-items:center; gap:calc(.83 * var(--esc)); padding:calc(1.15 * var(--esc)) calc(2.71 * var(--esc)); border-image:url("iconos/ui/btnAppearance_bg.png") 72 fill / calc(2.08 * var(--esc)) / 0 stretch} .barraPasos button{width:calc(12.29 * var(--esc));height:calc(2.4 * var(--esc)); padding:0;border:0;border-radius:0; background:center/100% 100% no-repeat;box-shadow:none; font:500 calc(.86 * var(--esc))/1 var(--disp);letter-spacing:.01em;color:#f2e7d2; text-shadow:0 1px 3px rgba(0,0,0,.85);cursor:pointer;transition:none} .barraPasos button:hover{transform:none;color:#fff6e2} /* El fondo se fija con las propiedades sueltas y no con el atajo: una regla genérica de `:hover` que use el atajo `background` devolvería el tamaño automático y el dibujo saldría a su tamaño real, desplazado. */ .barraPasos .atras,.barraPasos .atras:hover,.barraPasos .atras[disabled], .barraPasos .sig,.barraPasos .sig:hover,.barraPasos .sig[disabled]{ background-color:transparent;background-size:100% 100%; background-position:center;background-repeat:no-repeat} .barraPasos .atras{background-image:url("iconos/ui/btnAppearance_d.png")} .barraPasos .atras:hover{background-image:url("iconos/ui/btnAppearance_h.png")} .barraPasos .atras[disabled]{background-image:url("iconos/ui/btnAppearance_disabled.png"); color:#8d8577;cursor:not-allowed} .barraPasos .sig{background-image:url("iconos/ui/btnNext_d.png")} .barraPasos .sig:hover{background-image:url("iconos/ui/btnNext_h.png")} .barraPasos .sig[disabled]{background-image:url("iconos/ui/btnNext_disabled.png"); color:#8d8577;cursor:not-allowed} /* ── El estreno, dentro de la propia pantalla ───────────────────────────── En el juego `LevelUpIntroPanel` es un hijo de `CharacterLevelUp` centrado en ella: el cartel sale en medio de la pantalla de subida —no antes— y lo que hace al terminar es SUBIRSE y desvanecerse mientras los paneles entran por los lados. Es una sola pantalla que se reorganiza, no dos pantallas. Los tiempos son los de `LevelUpAfterItemsStoryboard`: el panel de intro se desvanece 0,2 s el de la izquierda entra a los 0,2 s, medio segundo el de la derecha a los 0,25 s, medio segundo con aceleración 0,75 y frenada 0,25, que en CSS es esta bezier. */ /* FIJO, no absoluto: la pantalla de subida tiene scroll propio, así que un `absolute` se coloca contra el alto del CONTENIDO y el cartel acababa por debajo de lo que debería estar tapando. Fijo se queda pegado a la ventana y cubre lo que haya. */ /* ARRIBA, no en el centro de la pantalla: la cadena cuelga de él, así que si se centra le pasa por encima —que es justo lo que se veía—. En el juego el cartel está en lo alto y las cajas van cayendo debajo. */ /* El cartel sale CENTRADO —``— y de ahí sube él solo. No se le empuja el panel para hacerle sitio: los cajones no empiezan a caer hasta los 2 s, cuando el cartel ya lleva 0,7 s subiendo y ha dejado el centro libre. Apartarlo con un margen en `vw` era además lo primero que se rompe al cambiar de resolución. */ /* Pegado a la ventana, sin compensar nada. Llegó a llevar aquí un hueco de barra reservado para caer en el mismo eje que la pantalla de detrás, que sí lo reservaba; quitado allí, esto sobra — y puesto, descuadraría al revés. El cartel y el panel se centran los dos en la ventana y ya está. */ .subeIntro.dentro{position:fixed;inset:0;z-index:20; place-items:center;pointer-events:none;background:none} .subeIntro.dentro::before{display:none} /* Mientras dura el estreno solo está el centro, y CENTRADO: la cadena de lo que ganas se monta ahí, sobre el mundo a oscuras. Los lados no existen todavía —ni ocupan sitio—, y por eso la rejilla se queda en una columna. Esto es lo que estaba mal: el cartel no se va y deja paso a otra cosa. La cadena SE QUEDA; lo que pasa es que el panel se dibuja a su alrededor, el velo se levanta y el centro se corre a su columna mientras los lados entran. Una sola pieza que se recoloca, no un relevo. */ /* La columna la manda la CAJA, que mide lo que mide su arte: 796. Con 460 —un numero que me habia inventado— el marco de nueve trozos entraba a la fuerza en 370 y salia aplastado. */ .pantallaPasos.estrenando .panelPasos{grid-template-columns:minmax(0,1fr); max-width:calc(28.125 * var(--esc))} /* Y todo a esa unica columna: sin esto el `grid-column:2` del centro seguia en pie, se inventaba una segunda columna a lo ancho de su contenido y la caja salia de 246 durante el estreno y de 796 despues. */ .pantallaPasos.estrenando .panelPasos > *{grid-column:1} /* Durante el estreno NO se ve nada del paso: ni la cabecera, ni los lados, ni los botones, ni el aviso de lo que falta. Sale el cartel y debajo la cadena de lo que ganas, y ya. Ver la tirada de vida y un «Faltan decisiones» en rojo mientras suena la fanfarria es exactamente lo contrario de lo que la fanfarria intenta decir. */ /* Se ESCONDEN, no se quitan de la rejilla: la cabecera de arriba ocupa alto, y sacarla y volverla a meter movia toda la columna del centro de golpe justo al terminar la fanfarria. Con `visibility` no se ven pero siguen ocupando su sitio, asi que lo unico que se mueve al final es lo que tiene que moverse: la columna, hacia la izquierda. */ .pantallaPasos.estrenando .cabecera, .pantallaPasos.estrenando .cabPaso, .pantallaPasos.estrenando .faltaAviso, .pantallaPasos.estrenando .barraPasos{visibility:hidden} /* Estos dos si salen de la rejilla, que para eso entran deslizandose desde fuera: no estan, y luego llegan. */ .pantallaPasos.estrenando .rail, .pantallaPasos.estrenando .hoja{display:none} /* Y la tarjeta se queda SIN MARCO durante el estreno: lo que hay es la cadena colgando del cartel, no una tarjeta con cosas dentro. El marco aparece DESPUÉS, dibujándose alrededor de lo que ya estaba —eso es lo que hace que se lea como que la pantalla se monta sola y no como que un menú reemplaza a otro—. Por eso se desvanece en vez de aparecer de golpe. */ /* Durante la fanfarria NO hay marco: `LeftPanelsBackground` tiene `` dentro de `LevelUpAfterItemsStoryboard`, o sea que el panel del centro no existe hasta que han caido todas las cajas. Hace falta apagar el `border-image` a mano: poniendo solo el color del borde en transparente el recorte de `contentPane` se seguia dibujando. */ /* Y con mas peso que `.panelPasos > main > .card`, que si no gana el otro y se quedaba el fondo y la sombra de la tarjeta: ese era el panel a medio ver que se adivinaba detras de las cajas durante toda la fanfarria. */ .pantallaPasos.estrenando .panelPasos > main > .card{ background:none;background-color:transparent;border:0;border-image:none; box-shadow:none;outline:0;min-height:0} /* Y del cuerpo del paso, durante el estreno, SOLO la cadena. Forzar el paso no basta: hay niveles en los que no se gana nada solo y entonces no hay cadena que enseñar, y ahí salía la tirada del dado por debajo del cartel. Diciendo qué SÍ se ve en vez de qué no, da igual en qué paso estuviera. */ /* Durante la fanfarria solo estan la cadena y su separador —el filete con la flecha, que es lo que da el golpe cada vez que cae un cajon—. Dejandolo fuera, la flecha no aparecia hasta que la animacion habia TERMINADO, que es justo cuando ya no pega ni un golpe. */ .pantallaPasos.estrenando #pasoCuerpo > *:not(.cadenaScroll):not(.separaCadena){display:none} /* Y la cabecera del panel tampoco: es `upperClassPanel`, que en el juego entra con su propio fundido cuando la fanfarria ya ha terminado. Durante el estreno el único medallón en pantalla es el del cartel. */ .pantallaPasos.estrenando .cabPanel{display:none} .pantallaPasos.entrando main .card{animation:marcoAparece .2s linear both} /* Solo se ENCIENDE, como `LeftPanelsBackground`, que en el XAML no hace mas que `Opacity From="0" To="1"`. Antes esto animaba tambien el relleno de 0 a 24/26 y, como el relleno de verdad es el de `contentPane`, al terminar la animacion la tarjeta cambiaba de medidas de golpe y la cadena entera —con el corchete y la flecha— pegaba el salto. El relleno ahora no se toca: es el mismo antes, durante y despues. */ @keyframes marcoAparece{from{opacity:0} to{opacity:1}} /* `worldFader` y nada mas: con `Opacity="0.75"` al empezar y `To="0"` en 0,2 s al acabar. El velo ya no vive aqui: se ha subido a `.camaraCC::after`. Desde que el fondo es un video, un velo puesto en el fondo de la PANTALLA quedaria por debajo de la placa y no taparia nada. Aqui solo queda el negro de base, que es lo que se ve el instante en que el video aun no ha dado su primer fotograma. */ /* Y a lo alto tampoco rueda MIENTRAS DURA LA FANFARRIA. Ahí los cajones salen todos apilados, sin el marco que luego los recorta, y el montón se pasa del alto de la ventana: aparecía la barra de la derecha y la caja perdía 23 px de ancho justo mientras el cartel —que va fijo a la ventana— seguía centrado en los 1600. Ese es el desfase que se veía en el estreno entre el cartel y la cadena de debajo. Recortar aquí es seguro precisamente ahora: la salida del estreno se anima midiendo el panel antes y después, y hasta hoy esto lo rompía porque la barra estaba en un lado del salto y no en el otro. Ya no aparece en ninguno de los dos, así que las dos medidas se toman con la misma caja. Comprobado a base de medirla cada 200 ms durante toda la fanfarria: 1600x900 de principio a fin. */ .pantallaPasos.estrenando{background:#0a0908;overflow-y:hidden} /* El centro llega a su sitio desde donde estaba: lo mide el JS y lo pone en `--corre`, porque la distancia depende del ancho de la pantalla. */ .pantallaPasos.entrando main{animation:correAlSitio .55s cubic-bezier(.75,0,.25,1) both} /* Los dos ejes, no solo el horizontal: al quitar `estrenando` la columna tambien cambia de sitio hacia arriba, y sin esto ese trozo del movimiento no se animaba —se veia como un salto seco justo al final. */ @keyframes correAlSitio{ from{transform:translate(var(--corre,0px), var(--baja,0px))} to {transform:none}} .pantallaPasos.entrando .cabecera{animation:entraSuave .2s ease both} .pantallaPasos.entrando .rail{animation:entraIzq .5s cubic-bezier(.75,0,.25,1) .2s both} .pantallaPasos.entrando .hoja{animation:entraDer .5s cubic-bezier(.75,0,.25,1) .25s both} @keyframes entraSuave{from{opacity:0} to{opacity:1}} @keyframes entraIzq{from{opacity:0;transform:translateX(-60px)} to{opacity:1;transform:none}} @keyframes entraDer{from{opacity:0;transform:translateX(60px)} to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){ .pantallaPasos.estrenando .cabecera, .pantallaPasos.estrenando .panelPasos{opacity:1} .pantallaPasos.entrando .cabecera, .pantallaPasos.entrando .rail, .pantallaPasos.entrando main, .pantallaPasos.entrando .hoja{animation:none} } /* ── La cabecera del panel ──────────────────────────────────────────────── Lo que queda del cartel cuando la pantalla se asienta: el medallón de la clase con su nivel debajo, en el marco del juego. En BG3 ocupa exactamente el sitio donde estaba el «Level Up!», y por eso se hace el relevo con un fundido cruzado: uno se apaga mientras la otra se enciende, para que se lea como que se convierte y no como que se va. */ /* Sin margen negativo: con el, el icono de clase se salia por encima del borde del panel (-0,68vw). El bloque entero —icono y titulo— empieza dentro, a los 0,42vw que deja el relleno de la tarjeta. */ .cabPanel{display:none;text-align:center;margin:0 0 calc(.3 * var(--esc)); animation:cabEntra .45s ease .1s both} .cabPanel.ver{display:block} /* Encima del titulo, `ico_class.png` a su tamano de dibujo: 64 de las 3840 del diseno, o sea 1,667vw. */ .cabPanel .icoTit{display:block;margin:0 auto calc(.25 * var(--esc)); width:calc(1.667 * var(--esc));height:calc(1.667 * var(--esc));object-fit:contain;opacity:.9} @keyframes cabEntra{from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:none}} /* La cabecera a escala tambien: en pixeles sueltos el medallon salia igual de grande en una ventana pequena que en el monitor entero. */ /* «Subes de nivel», medido con la lupa sobre la partida: altura de mayuscula 12,1 px de los 1456 de ancho de pantalla, o sea 1,27vw de cuerpo, y su linea de arriba cae a 1,06vw del borde de arriba del panel. Antes iba en versalitas de .65vw pegadas al borde con un margen negativo. */ .cabPanel .titulo{font:400 calc(1.27 * var(--esc)) var(--libro);letter-spacing:0; text-transform:none;color:var(--ink);margin-bottom:calc(.5 * var(--esc))} /* Medido CON LUPA sobre la partida, no a ojo sobre la captura entera: el emblema mide 92 px de los 1456 de ancho de pantalla, o sea 6,34vw. Lo tuve en 4,6, luego en 5,15, y las dos veces se quedaba corto porque estaba midiendo el dibujo en una captura recomprimida en vez de ampliarlo. */ .cabPanel .medallon{width:calc(7.5 * var(--esc));height:calc(7.5 * var(--esc));margin:0 auto;display:grid; place-items:center;filter:drop-shadow(0 3px 14px rgba(0,0,0,.75))} .cabPanel .medallon img{width:100%;height:100%;object-fit:contain} /* «Niv. N» en la placa del juego, colgando del medallón. */ /* `holder_classLevel_bg.png` TAL CUAL, no troceado: mide 100x140 —es una chapa alta que se mete por detras del medallon y solo asoma por abajo—, y partirla en nueve le comia justo eso. Ancho a su tamano de dibujo (2,604vw) y alto por su proporcion; el margen negativo la sube a su sitio. */ .cabPanel .niv{display:block;width:calc(2.604 * var(--esc));aspect-ratio:100 / 140; margin:calc(-2.05 * var(--esc)) auto 0;padding:calc(2.15 * var(--esc)) 0 0; font:400 calc(.81 * var(--esc)) var(--libro);color:var(--ink);text-align:center; background:url("iconos/ui/holder_classLevel_bg.png") center/100% 100% no-repeat}.cabPanel .filete{display:block;width:100%;height:auto;margin:12px 0 2px; opacity:.75;pointer-events:none} /* El cartel se apaga a la vez que la cabecera se enciende, encogiendo un poco: se va hacia dentro, como si lo absorbiera el panel. */ .subeIntro.seVa{animation:none;opacity:0;transition:opacity .2s linear} @keyframes cartelSeVa{from{opacity:1;transform:scale(1)} to{opacity:0;transform:scale(.86)}} @media(prefers-reduced-motion:reduce){ .cabPanel{animation:none} .subeIntro.seVa{animation:none;opacity:0} } /* ── Lo que falta, en ámbar ─────────────────────────────────────────────── El raíl de la subida no dice solo por dónde vas: dice qué te falta para poder aceptar. Lo pendiente en el ámbar de «ojo a esto» —el mismo de los avisos—, que es lo que en el juego va en rojo pero aquí se reserva para lo que de verdad te lo impide. */ .railpasos li.pide .v{color:#f2a224} /* Y la cabecera del raíl: de qué nivel a qué nivel. */ .railCab{display:flex;align-items:center;gap:9px;padding:0 13px 12px; font:600 12.5px var(--sans);color:var(--gold-hi)} .railCab .de{color:var(--faint);font-weight:400} /* ── Lo que falta para poder aceptar ────────────────────────────────────── Encima de los botones y en el rojo del juego: es lo que te impide terminar, así que va donde vas a pulsar y no escondido en el raíl. Y dice CUÁL falta, porque «Faltan decisiones» a secas te deja mirando la pantalla a ver dónde. */ .faltaAviso{display:none;margin:22px auto 0;max-width:520px;text-align:center; padding:10px 16px;border-radius:var(--r3); background:rgba(254,38,93,.10);border:1px solid rgba(254,38,93,.42)} .faltaAviso.ver{display:block} .faltaAviso b{display:block;font:600 13px var(--sans);color:#fe265d; letter-spacing:.02em} .faltaAviso span{display:block;margin-top:3px;font:400 12px var(--sans); color:var(--faint)} /* ── La hoja de la derecha ──────────────────────────────────────────────── Lo mismo que enseña el juego: quién eres, las seis, los números que cambian y lo que te llevas. Contesta la pregunta de «¿en qué se está convirtiendo esto?», que es la misma que la hoja de la creación, y por eso se ve igual. */ .hojaCab{text-align:center;margin-bottom:16px} /* El medallon y los iconos de rasgos, a escala de la hoja y mas grandes: en el juego se leen de un vistazo y aqui salian de sello de correos. */ /* El MISMO tamano que el del centro —6,34vw—, no un porcentaje de la hoja: en el juego los dos emblemas miden igual. */ .hojaCab .medallon{width:calc(7.5 * var(--esc));height:calc(7.5 * var(--esc));margin:0 auto calc(.5 * var(--esc)); filter:drop-shadow(0 3px 12px rgba(0,0,0,.7))} .hojaCab .medallon img{width:100%;height:100%;object-fit:contain} .hojaCab .especie{font:400 13px var(--sans);color:var(--faint)} .hojaCab .quees{font:600 15px var(--sans);color:var(--ink);margin-top:1px} /* Las seis en fila, con su abreviatura encima. */ .hojaSeis{display:grid;grid-template-columns:repeat(6,1fr);gap:2px; margin-bottom:14px;text-align:center} .hojaSeis .unaC{position:relative;padding-top:9px} .hojaSeis .ab{display:block;font:600 8.5px var(--sans);letter-spacing:.06em; color:var(--faint)} .hojaSeis b{font:600 15px var(--disp);color:var(--ink); font-variant-numeric:tabular-nums} /* La estrella de la aptitud mágica, encima y sin ocupar sitio, para que las seis sigan alineadas. Va como ELEMENTO y no como `::before`: un pseudoelemento no se puede señalar por su cuenta, así que al pasarle el ratón contestaba la característica en vez de contestar la estrella, que es otra pregunta —no «qué es la sabiduría» sino «por qué lleva estrella». */ .hojaSeis .unaC{cursor:help} .hojaSeis .estrella{position:absolute;top:0;left:50%; width:11px;height:11px;margin-left:-5.5px;line-height:0} .hojaSeis .estrella img{width:100%;height:100%;object-fit:contain} /* Los números que cambian, con los dibujos del juego. */ .hojaCifras{display:flex;justify-content:center;gap:16px;margin-bottom:16px} .hojaCifras .ico{display:flex;align-items:center;gap:6px; font:600 14px var(--disp);color:var(--ink);font-variant-numeric:tabular-nums} .hojaCifras .ico::before{content:"";width:17px;height:17px;flex:none; background:center/contain no-repeat} .hojaCifras .comp::before{background-image:url("iconos/ui/ico_prof_simple.png")} .hojaCifras .hp::before{background-image:url("iconos/ui/levelUp_hp_h1.png")} .hojaCifras .mp::before{background-image:url("iconos/ui/ico_d6.png")} .hojaSec{margin-top:14px} .hojaSec .rot{font:600 9.5px var(--sans);letter-spacing:.14em; text-transform:uppercase;color:var(--gold-dim);margin-bottom:6px} .hojaSec .rasgoIcos{justify-content:flex-start} .hojaSec .rasgoIcos{gap:2.4cqw} .hojaSec .rasgoIco{width:20cqw;height:20cqw;flex:none} .hojaSec .rasgoIco img{width:100%;height:100%;object-fit:contain} /* ── La flecha que se clava ─────────────────────────────────────────────── `separatorArrow` en el XAML, con su comentario: «arrow stabbing downwards». Da un golpe cada vez que cae un cajón, no una sola vez al principio: es lo que hila la cadena, como si cada cosa nueva la fuera clavando más abajo. */ /* El filete con la flecha DENTRO de su hueco: por eso `divider_levelUp` está dibujado partido por la mitad —no le falta un trozo, es que ahí va ella—. A su tamaño natural, como el `Stretch="None"` del juego. */ /* Un pelin mas de aire por encima del corchete. Midiendo sobre la captura del juego: entre el borde de abajo del «Nv. 2» y el corchete hay un 3,5 % del ancho del panel, y aqui habia la mitad —la flecha rozaba la chapa del nivel—. En `vw` para que el hueco crezca con el panel. */ /* El panel tiene ALTO FIJO y lo que hay del corchete para abajo va en su propio marco con scroll: `` — 1106 de las 3840 del diseno son 28,8vw. Segun caen los cajones el marco se arrastra solo hacia abajo y los de arriba se van saliendo, que es lo que hace `AutoScrollBehavior`. La barra se esconde mientras dura la fanfarria y aparece al terminar, igual que en el juego (`VerticalScrollBarVisibility` pasa de `Hidden` a `Auto` cuando `SequenceCompleted`). */ /* El marco llega hasta el borde del panel para que la barra quede pegada a el, como en el juego, y los cajones se quedan en su sitio con un relleno del mismo tamano. Antes la barra caia a dos dedos del borde, dentro del relleno de `contentPane`. Y no llega hasta el borde de la CAJA sino hasta la linea del marco: midiendo la captura del juego, el canto derecho de la barra queda 13 px de los 1920 por dentro —0,68vw—, asi que se recogen 2,81 - 0,68 = 2,13. Pegada al borde de la caja se cruzaba con la voluta. */ /* El relleno de la izquierda devuelve el eje al centro del PANEL: a la derecha se van 1,458 de relleno mas 1,458 de barra y solo se ganan 2,13 de estirar, o sea 0,786 de descuadre. Sin esto el corchete y los cajones quedaban centrados entre ellos pero medio dedo a la izquierda del panel. */ /* Corregido: con los -2,13 la barra se salia 15 px POR FUERA del panel —el arte quedaba flotando a la derecha del marco dorado—. Medido en pantalla, esos 15 px de 1920 son 0,78vw, asi que se recogen: 2,13 - 0,78 = 1,35. */ /* El relleno de la izquierda no es un numero suelto: es lo que hace falta para que el EJE de los cajones caiga en el centro del panel. Por la derecha se va el hueco de la barra (1,458) y se recupera el estirado del margen (1,35), asi que por la izquierda va esa diferencia: 1,458 - 1,35 = 0,108. La cuenta de antes sumaba el relleno derecho DOS veces —1,458 + 1,458 - 1,35— y daba 1,566: doce pixeles de mas por la izquierda en una pantalla de 1600, que es lo que descentraba los cajones y su flecha dentro del panel. El centro del contenido queda en W/2 + (izq + margen - der)/2, asi que para que caiga en W/2 la izquierda tiene que valer der - margen y nada mas. Estaba en 0,786, que era la cuenta buena para el margen VIEJO de -2,13. Al recoger el margen para meter la barra dentro del panel se me olvido rehacer esta, y los cajones se quedaron 7 px a la izquierda del corchete. Y el hueco de la barra se RESERVA, en vez de ponerlo de relleno. Es la misma anchura —los 1,458 del dibujo— pero puesta donde la barra la va a usar: de relleno se sumaba a lo que la barra ya se llevaba por su cuenta, asi que la cadena media una cosa mientras cabia entera y otra distinta en cuanto asomaba la barra, y los cajones se iban 11 px a la izquierda de su flecha. Que es justo lo que se veia al volver a entrar en la subida: la primera vez entrabas con el estreno, que esconde la barra, y al volver ya no. Reservado sale igual con barra y sin ella, que es lo unico que importa aqui: los cajones no se mueven porque la lista crezca. */ .cadenaScroll{margin-right:calc(-1.35 * var(--esc));scrollbar-gutter:stable;padding-left:calc(.108 * var(--esc)); height:calc(28.8 * var(--esc));overflow-y:auto;overflow-x:hidden; /* El aire entre el corchete y el primer cajon va en MARGEN, no en relleno: con relleno se lo lleva el scroll y los cajones acababan pegandose a la raya al bajar. Medido en el juego, del centro del filete al borde de arriba del cajon hay 68 px de los 1920 — 3,54vw—, y de esos 0,52 los pone ya el propio cajon. */ /* A ojo y no por la cuenta: con 2,65vw se veia un hueco y a cero se comian el corchete. 1,3 es el termino medio. */ margin-top:calc(1.3 * var(--esc)); /* Y va de cajon en cajon: nunca se ve medio: uno se sale entero para dejar sitio al siguiente. `mandatory` obliga a parar en un punto de anclaje y `scroll-snap-stop:always` impide saltarse uno de un manotazo de rueda. */ scroll-behavior:auto} /* Sin `scroll-snap`: el salto lo da la rueda, entero y de golpe. El anclaje corregia DESPUES de deslizar, que es justo lo que se veia como resbalon. */ /* Sin colchon detras del ultimo: el scroll se acaba cuando el ultimo cajon esta entero a la vista, no una pantalla mas abajo sobre el vacio. */ /* Durante la fanfarria no hay barra, asi que tampoco hay que compensarla: sin quitar el hueco reservado, los cajones se iban once pixeles a la derecha del corchete. Se le quitan los tres ajustes de golpe. */ /* En el ESTRENO manda el centro de la VENTANA, no el del panel. Durante la fanfarria no hay panel: hay un cartel centrado en la pantalla, un filete y la cadena de cajones cayendo debajo, y los tres tienen que compartir eje. Lo que lo rompía era el hueco que se reserva para la barra de desplazamiento —a la derecha, siempre— y la propia barra de la cadena: entre las dos empujaban los cajones veintitrés píxeles a la izquierda mientras el cartel, que va fijo a la ventana, se quedaba en su sitio. Aquí no hay nada que desplazar todavía, así que no se reserva nada. */ /* OJO con tocar la barra de desplazamiento solo durante el estreno. Al salir de él se MIDE la cadena antes y después de quitar la clase para animar la diferencia, y si la barra aparece justo en medio, esos veintitrés píxeles se cuelan en la cuenta: el panel se quedaba trasladado y con el marco cortado por la derecha al volver a entrar. Lo probé y lo rompía, así que aquí no se toca. El desvío del cartel hay que arreglarlo por el lado del cartel. */ /* NO cambiar aquí la geometría del panel. Al salir del estreno se mide la cadena antes y después de quitar la clase, y la diferencia se anima: todo lo que cambie de ancho o de relleno justo en ese salto se cuela en la cuenta y deja el panel trasladado al volver a entrar. Probé a quitarle el sangrado aquí y eso es lo que pasó. */ .pantallaPasos.estrenando .cadenaScroll{margin-right:0;padding-left:0;padding-right:0; scrollbar-gutter:auto;overflow-y:hidden} .pantallaPasos.estrenando .cadenaScroll::-webkit-scrollbar{width:0} /* ── La barra, con el arte del juego, EN TODAS PARTES ───────────────────── Los tres dibujos son los del dialogo: `dialogue_scroll_up` para la flecha de arriba, `..._down` para la de abajo y `dialogue_scroller` para el tirador. Nada de la barra del navegador. Cada uno tiene sus dos versiones y se usan las dos, pero OJO CON EL NOMBRE, que enganya: la `_h` es la DORADA y la `_d` la BLANCA. Medido sobre los propios PNG —saturacion media de lo opaco— la `_d` sale al 0 %, gris puro, y la `_h` al 52 %, con su punta de crema en rgb(255,205,121). Asi que va la dorada en reposo y la blanca al pasar el raton, que es como se ve en la partida. Puestas por el nombre salia al reves. Y va en selectores SUELTOS, sin clase delante: esto lo tenia solo la cadena de la subida, asi que la descripcion de la creacion, el rail, la hoja y todo lo demas se quedaban con la barra gris del navegador. Ahora la lleva cualquier cosa que ruede en las dos pantallas. Tamanos de dibujo sobre las 3840 del diseno: las flechas 56x60 (1,458 x 1,562 unidades) y el tirador 40x88 (1,042 x 2,292). El canal se queda en el ancho de la flecha, que es la pieza mas ancha. DOS TRAMPAS, las dos comprobadas a base de no ver el arte: 1. NO se pone `scrollbar-width`. Es la propiedad estandar y en cuanto aparece gana ella: las piezas de `::-webkit-scrollbar` dejan de pintarse y queda la barra de siempre. 2. `scrollbar-color` tiene que valer `auto`. Con cualquier otro valor pasa lo mismo. La ficha lo ponia en `*`, asi que apagaba el arte en toda la pagina; por eso se devuelve aqui explicitamente. */ *{scrollbar-color:auto} ::-webkit-scrollbar{width:calc(1.458 * var(--esc,1vw))} ::-webkit-scrollbar-track{background:none} /* El tirador se estira SOLO POR EL MEDIO. Antes iba de fondo al 100 % x 100 %, asi que al crecer la barra se estiraba el dibujo ENTERO: las dos puntas salian largas y romas, y cuanto mas contenido tenia el panel mas se notaba. Aqui va de marco recortado (`border-image`), que es lo unico que sabe dejar los bordes quietos y estirar nada mas el centro. El dibujo son 40x88 y de esas 88 filas, las 32 de arriba y las 32 de abajo son las puntas; las 24 de en medio son IDENTICAS entre si —comprobado fila a fila sobre el propio PNG—, o sea que estirar esa banda no se ve. De ahi el corte `32 0`: 32 arriba y abajo, y 0 a los lados, que a lo ancho no hay nada que repartir. `fill` no es opcional: sin el, el centro del dibujo no se pinta y el tirador queda hueco, con las dos puntas y aire en medio. Los bordes hacen dos trabajos a la vez, y por eso las medidas son esas: · arriba y abajo `.833`, que son las 32 filas del corte a tamanyo natural (1 unidad son 38,4 px del disenyo de 3840, y 32 / 38,4 = 0,833). Que el corte y el borde midan LO MISMO es justo lo que deja las puntas sin deformar; si no coinciden, vuelven a estirarse. · a los lados `.208`, que es el hueco de siempre para centrar el tirador de 40 en el canal de 56. Con el corte lateral a 0 ahi no se pinta nada, y el centro del dibujo cae en los 1,042 de en medio: los 40 px justos. Dos cosas mas que hay que dejar puestas: · `border-style`, aunque el color sea transparente. Con `none` el borde mide 0 y el `border-image` no se pinta. · `box-sizing:border-box`, para que el alto MINIMO cuente los bordes. Sin el, el minimo serian los 2,292 del dibujo MAS las dos puntas. */ ::-webkit-scrollbar-thumb{ box-sizing:border-box; min-height:calc(2.292 * var(--esc,1vw)); border-style:solid; border-color:transparent; border-width:calc(.833 * var(--esc,1vw)) calc(.208 * var(--esc,1vw)); border-image:url("iconos/ui/dialogue_scroller_h.png") 32 0 fill stretch} ::-webkit-scrollbar-thumb:hover{ border-image-source:url("iconos/ui/dialogue_scroller_d.png")} ::-webkit-scrollbar-button:vertical:decrement{ height:calc(1.562 * var(--esc,1vw)); background:url("iconos/ui/dialogue_scroll_up_h.png") center/contain no-repeat} ::-webkit-scrollbar-button:vertical:decrement:hover{ background-image:url("iconos/ui/dialogue_scroll_up_d.png")} /* La de abajo es la MISMA volteada. `transform` no funciona en las piezas de la barra del navegador, asi que el volteado esta hecho en el propio PNG. */ ::-webkit-scrollbar-button:vertical:increment{ height:calc(1.562 * var(--esc,1vw)); background:url("iconos/ui/dialogue_scroll_down_h.png") center/contain no-repeat} ::-webkit-scrollbar-button:vertical:increment:hover{ background-image:url("iconos/ui/dialogue_scroll_down_d.png")} ::-webkit-scrollbar-button:horizontal{display:none} /* El corchete se lleva el MISMO desplazamiento que el marco del scroll: este se estira 2,81vw hacia la derecha para pegar la barra al borde del panel y se reserva otro tanto de relleno, asi que su centro no es el del panel. Sin copiarle la cuenta, el corchete quedaba centrado en el panel y los cajones medio dedo a un lado —y el arte del cajon tiene que estar SIEMPRE en el eje de la flecha—. */ .separaCadena{position:relative;display:grid;place-items:center; /* La columna NO puede crecer con el dibujo. Sin esto la rejilla le da a su unica columna el ancho que pida el filete —352 px, sus 22 unidades— aunque la caja mida menos, y entonces el filete llena la columna entera: no queda nada que centrar, la columna arranca pegada al canto izquierdo y el dibujo asoma solo por la derecha. En el panel no se notaba porque ahi la caja da de si; en el estreno la cadena mide 335 y el corchete se salia 16,8 px, que es lo que se veia torcido respecto a la flecha y a los cajones. Con la columna atada al ancho de la caja, un dibujo mas ancho se sale por los DOS lados por igual y su eje vuelve al del panel — que es justo lo que ya hacen los cajones, que miden 650 en esa misma caja de 335. */ grid-template-columns:minmax(0,1fr); /* El corchete NO copia el desplazamiento del marco: como los cajones ya vuelven al eje del panel por su cuenta —con el relleno de la izquierda del marco—, copiarselo lo sacaba diez pixeles a la derecha. Va centrado en el panel, igual que el medallon. */ margin:calc(.85 * var(--esc)) 0 0; pointer-events:none} /* `Stretch="None"` en los dos: se dibujan a su tamano y no se estiran. `divider_levelUp.png` mide 864x64 y `upArrow_h1.png` 196x196; sobre las 3840 del diseno son 22,5vw y 5,104vw. Yo tenia el filete estirado al ancho de la caja y la flecha a 1,72vw, o sea tres veces mas pequena de lo que es. */ .separaCadena .filete{width:calc(22 * var(--esc));height:calc(1.63 * var(--esc));opacity:1} /* Volteada: en el XAML lleva `ScaleTransform ScaleY="-1"`, así que la flecha apunta hacia ABAJO. De ahí que su comentario diga «stabbing downwards». */ /* Centrada A MANO: dentro de una rejilla, un absoluto sin `left`/`top` no se queda en la celda centrada —se va al origen del contenedor—, y la flecha acababa clavada en la esquina de arriba a la izquierda de la pantalla. */ /* En la misma celda de la rejilla que el filete, no en absoluto: con `left:50%` se centraba respecto a la caja de RELLENO del corchete —que ya no es simetrica, porque lleva sitio para la barra— y quedaba once pixeles a la derecha del eje de los cajones. */ /* La flecha vuelve a ir SUELTA, no en la rejilla: su dibujo mide 196x196 casi todo transparente, y compartiendo celda estiraba el corchete a 5,1vw de alto —tres y medio de aire— que se sumaban al hueco antes del primer cajon. Asi el corchete solo mide lo que el filete. Centrada con `left:0;right:0` y margenes automaticos, que ahora la caja ya es simetrica. */ .flechaClava{position:absolute;left:0;right:0;margin:0 auto;top:50%; width:calc(5.104 * var(--esc));height:calc(5.104 * var(--esc));object-fit:contain; /* Nace VISIBLE. Su `opacity:0` era el punto de partida de la fanfarria —la animación la encendía a los dos segundos—, y al acotar esa animación al estreno se quedó apagada para siempre en las demás entradas: los corchetes salían y la flecha no. Quien la apaga ahora es el estreno, que es quien la va a encender. */ opacity:1;transform:translateY(-50%) scaleY(-1)} .pantallaPasos.estrenando .flechaClava{opacity:0} /* Y no existen hasta que empiezan las cajas: 1 BeginTime="{LevelUpShowItemsStartTime}" Duration="0:0:0.2"/> 1 (igual) y `LevelUpShowItemsStartTime` son 0:0:2, los mismos 2 s a los que cae el primer cajon. Estaban puestos desde el principio de la fanfarria. */ /* Los dos segundos de espera son de la FANFARRIA, no del corchete. Estaban puestos siempre, así que al volver a entrar —cuando no hay fanfarria y los cajones ya están caídos— el filete y la flecha seguían tardando dos segundos en aparecer sobre un panel que ya estaba entero. Fuera del estreno se ven desde el primer fotograma, que es lo que se espera de algo que solo decora. */ @keyframes sepEntra{from{opacity:0}to{opacity:1}} .pantallaPasos.estrenando .separaCadena .filete{opacity:0; animation:sepEntra .2s linear 2s both} .pantallaPasos.estrenando .flechaClava{animation:sepEntra .2s linear 2s both} .pantallaPasos.estrenando .flechaClava.clava{animation:sepEntra .2s linear 2s both, clavaFlecha .3s linear} .flechaClava.clava{animation:clavaFlecha .3s linear} /* «arrow "stabbing" downwards»: O sea: espera una decima, sube 50 en otra decima y baja en otra. Nada de escalas ni de desvanecidos, que era lo que me habia inventado. Los 50 son de las 3840 del diseno: 1,302vw. */ @keyframes clavaFlecha{ 0%,33.3%{transform:translateY(-50%) scaleY(-1)} 66.6% {transform:translateY(calc(-50% - (1.302 * var(--esc)))) scaleY(-1)} 100% {transform:translateY(-50%) scaleY(-1)}} @media(prefers-reduced-motion:reduce){.flechaClava.clava{animation:none}}