/* ══════════════════════════════════════════════════════════════════════════ EL ASPECTO DE UNA HABILIDAD ══════════════════════════════════════════════════════════════════════════ La caja con marco, el cuadrito de 44 px que se pulsa y la ficha que asoma al señalarlo. Es el arte del juego tal cual —`detailsBox_small`, `tooltip`— y es lo que hace que Anareth se parezca a Baldur's Gate y no a una tabla. Estaba SOLO en la pantalla de creación, y por eso la hoja de personaje enseñaba los mismos rasgos como una lista de párrafos: el mismo dato con dos caras. Ahora vive aquí y lo cargan las dos. Se movió, no se copió: dos copias de cuatrocientas líneas de CSS se separan en dos semanas y entonces vuelven a ser dos caras distintas. Los colores salen de las variables `--tt-*`, que define cada página: así una ficha en la hoja y la misma ficha en la creación se ven iguales aunque el fondo de cada pantalla sea distinto. ══════════════════════════════════════════════════════════════════════════ */ /* ── Cómo se mueven las cosas ───────────────────────────────────────────── Sacado de los XAML del juego —`PanelAnimations.xaml`, `SharedAnimations.xaml` y compañía—, que definen esto de verdad y no a ojo. Baldur's Gate usa PRÁCTICAMENTE UNA SOLA CURVA: `0.333,0 0.667,1` sale en 39 de las 60 que hay escritas. Es una ese simétrica, sin rebote. Y tres tiempos redondos: 0,2 s para lo que responde a un dedo —un botón, un resaltado—, 0,3 s para lo que se abre y se cierra —un panel, una ficha— y 0,5 s para lo que entra en escena. Aquí había seis curvas distintas y ocho duraciones, todas inventadas sobre la marcha, así que cada trozo de la pantalla se movía a su aire. Con esto hay un solo compás y se nota aunque no se sepa por qué. */ :root{ --curva:cubic-bezier(.333,0,.667,1); --t-toque:.2s; /* responde a un dedo */ --t-panel:.3s; /* se abre o se cierra */ --t-entra:.5s; /* aparece en escena */ } /* NYI = «not yet implemented». Todo lo que esté sin rellenar —una descripción que falta, algo que aún no se lee de la hoja— se marca así, a propósito llamativo, para dar con ello de un vistazo. */ .nyi{display:inline-block;font:700 10.5px var(--sans);letter-spacing:.12em; color:#ffb4b4;background:rgba(220,60,60,.16);border:1px solid rgba(220,60,60,.5); border-radius:5px;padding:2px 7px;vertical-align:middle} /* Las cajas de rasgos son el arte del juego: `detailsBox_small` para las normales y `detailsBox_big` cuando llevan mucho dentro. El hueco de arriba del dibujo es donde va el rótulo. A NUEVE TROZOS, que es como lo dibuja el juego, y no estirado. El XAML lo deja escrito —CCLib_k.xaml, SpellSelectorPreviewTemplate—: y las tajadas encajan justo con el PNG, que mide 360x192: 100+100 de ancho dejan 160 de centro y 80+80 de alto dejan 32. Estirándolo al 100 % —que era lo que había— las esquinas, el filete de arriba y el pico de abajo se deforman con el tamaño de la caja, y por eso el marco no coincidía con el del juego. Con los nueve trozos las cuatro esquinas van a su tamaño y solo se estiran los lados, que es para lo que están dibujados. Las medidas son las del XAML, en unidades de diseño: 100 y 80 de tajada son 2,604 y 2,083; el relleno 50/0/50/32 son 1,302 a los lados y ,833 abajo. El de ARRIBA es el único que no se copia tal cual. El juego lo pone a 0 porque su rótulo va en flujo, el primero de la pila, y los iconos vienen detrás con un Margin="0,8,..." —ocho de diseño—. Aquí el rótulo va absoluto, así que el relleno tiene que reservarle el sitio a mano: su propio alto —,9375— más esos 8 dan 1,146, pero MEDIDO sobre la captura de la partida los iconos arrancan a 22,5 y no a 20,2, así que van 1,275. La diferencia es el interlineado del rótulo: el juego no declara LineHeight y su caja de texto es algo más alta que el cuerpo, y la nuestra va a line-height 1 clavado. DÓNDE VA EL RÓTULO, que es de lo que iba todo esto. Barriendo el PNG por columnas: en las de los lados hay tinta en las filas 5 a 17, que es el filete de arriba, y en las del centro NO HAY NINGUNA. El dibujo tiene el canto superior abierto por el medio, y ese hueco es el sitio del rótulo. Esas filas 5-17, dibujadas, caen a 2,3 y 7,8 px del canto de la caja, y el rótulo va apoyado EN el canto: el filete le cruza por el tercio de arriba y el texto cuelga hacia dentro. Comprobado contra una captura de la partida a 1920 —que es justo la mitad del diseño de 3840, o sea dos píxeles de diseño por píxel de imagen, y por tanto una regla limpia—: allí el filete cae en la fila 620 de la imagen y el rótulo va de la 618 a la 636, o sea de 1 a 37 de diseño contando desde el canto de la caja. La cuenta del XAML dice 0 a 36. */ .cajaRasgos{position:relative;margin:calc(1.36 * var(--esc,1vw)) auto 0; width:fit-content; min-width:calc(10.104 * var(--esc,1vw)); max-width:min(100%, calc(26.04 * var(--esc,1vw))); min-height:calc(5.208 * var(--esc,1vw)); padding:calc(1.275 * var(--esc,1vw)) calc(1.302 * var(--esc,1vw)) calc(.833 * var(--esc,1vw)); user-select:none;background:none;border:0; border-image:url("iconos/ui/detailsBox_small.png") 80 100 fill / calc(2.083 * var(--esc,1vw)) calc(2.604 * var(--esc,1vw)) / 0 stretch} .cajaRasgos.ancha{min-width:calc(18.44 * var(--esc,1vw)); border-image-source:url("iconos/ui/detailsBox_big.png")} .cajaRasgos+.cajaRasgos{margin-top:calc(1.19 * var(--esc,1vw))} /* El rótulo, en el hueco del filete de arriba. Del juego también: selectorPreviewText es CCTextPrimary —blanco— a ScaledDefaultFontSize, 36 del diseño, o sea ,9375. */ .cajaRasgos>.tit{position:absolute;left:50%;top:0; transform:translateX(-50%);white-space:nowrap; font:400 calc(.9375 * var(--esc,1vw))/1 var(--disp);color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.7),0 0 16px rgba(230,200,150,.24)} /* SIN RECUADRO. Cada icono traía el suyo: borde de un píxel, esquinas redondeadas y un tinte de fondo. Pero el arte del juego YA viene con su fondo —la tablilla clara sobre la que va el dibujo—, así que se veían dos cuadros, uno dentro del otro, y el de fuera no es de nadie: me lo había inventado yo. Fuera el borde, fuera el tinte y fuera el recorte, y el dibujo pasa a ocupar la casilla entera en vez del 86 %. */ .rasgoIcos{display:flex;flex-wrap:wrap;gap:calc(.57 * var(--esc,1vw)); justify-content:center} /* Y al tamaño del juego: SpellIconTemplate en CCLib_k.xaml los mete en un Grid de 80x80 sobre el diseño de 3840, o sea 2,083 unidades. Estaban en 2,5 —un 20 % grandes— de cuando esto iba en 44 px fijos. */ .rasgoIco{width:calc(2.083 * var(--esc,1vw));height:calc(2.083 * var(--esc,1vw)); cursor:pointer;flex:none;background:none;border:0;border-radius:0; display:grid;place-items:center;transition:.14s} .rasgoIco:hover{transform:translateY(-2px)} .rasgoIco img{width:100%;height:100%;object-fit:contain} /* Lo que todavía no tienes se ve IGUAL que lo demás. Apagarlo y ponerle un candado parecía un fallo de carga, y además obligaba a adivinar cuándo llega. Lo dice su ficha, con todas las letras: «Nivel necesario: 3». */ .rasgoIco{position:relative} /* ── Los usos que quedan ─────────────────────────────────────────── La cifra en la esquina, como el juego pone las cargas de un objeto: encima del dibujo, abajo a la derecha, y con sombra para que se lea igual sobre una tablilla clara que sobre un fondo oscuro. Sin recuadro ni pastilla —son dos caracteres y el marco pesaba más que el número—. A CERO cambia de color y el dibujo se apaga, que es lo que se mira de lejos: en mitad de un combate no se lee un número pequeño, se ve si el cuadrito está vivo o gastado. */ .rasgoIco .usosIco{position:absolute;right:0;bottom:-1px;pointer-events:none; font:700 calc(.86 * var(--esc,1vw))/1 var(--sans);color:#f0dcae; text-shadow:0 0 3px #000,0 1px 2px #000,0 0 6px #000} .rasgoIco[data-usos="0"] img{opacity:.34;filter:grayscale(.75)} .rasgoIco[data-usos="0"] .usosIco{color:#c9605e} /* Y la fila del libro entera, que hereda el mismo atributo de su cuadrito. */ .filaLibro[data-usos="0"]{opacity:.5} /* Mantener pulsado, sobre un cuadrito suelto. En la barra el relleno lo pinta el hueco (`.bhueco.cargando`); en el libro no hay hueco, así que lo pinta el propio cuadrito —y la fila, cuando es la fila la que se aguanta—. Es la misma señal: si sueltas antes de que se llene, no ha pasado nada. */ .rasgoIco.cargando,.filaLibro.cargando{position:relative;overflow:hidden} .rasgoIco.cargando::before,.filaLibro.cargando::before{content:""; position:absolute;left:0;right:0;bottom:0;pointer-events:none; background:rgba(224,161,78,.22);animation:subeUso 1s linear forwards} @keyframes subeUso{from{height:0}to{height:100%}} /* ── la ficha flotante de un rasgo ──────────────────────────────────────── */ #capaRasgo,#capaTermino,#capaTermino2{position:fixed;z-index:300;display:none; pointer-events:none} #capaTermino {z-index:320} #capaTermino2{z-index:340} /* Clavada, la ficha deja pasar el ratón: es lo que permite señalar los términos de dentro. */ #capaRasgo.clavada,#capaTermino.clavada,#capaTermino2.clavada{pointer-events:auto} /* Los términos NO van subrayados: en el juego solo cambian de color. Tenían un subrayado de puntos que era invención mía, y como la regla del tooltip solo cambiaba el color, el subrayado seguía saliendo también ahí. */ .term{color:var(--gold);cursor:pointer;border-bottom:0} .term:hover{color:var(--gold-hi)} #capaRasgo.ver,#capaTermino.ver,#capaTermino2.ver{display:block; animation:asomaR var(--t-panel) var(--curva)} @keyframes asomaR{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} /* El ancho lo manda EL PIE, que es el renglón más largo y el que peor se parte. A 320 no cabía: «Acción gratuita» y «Descanso corto o largo» se rompían cada una en dos líneas y el pie ocupaba el doble diciendo lo mismo. Con 340 caben las ochenta y siete que hay —la peor es «Acción adicional · 2 v. por descanso largo · 2 de 2»—, así que 348 deja ocho píxeles de respiro para la siguiente. Medido una por una a varias anchuras, no a ojo: subirla «por si acaso» ensancha la ficha entera para nada. */ .ttR{width:min(348px,calc(100vw - 24px));position:relative; background:linear-gradient(180deg,rgba(24,22,30,.985),rgba(15,14,19,.99)); border:1px solid var(--gold-dim);border-radius:13px;padding:14px 16px 12px; box-shadow:0 24px 60px -16px #000,inset 0 1px 0 rgba(var(--luz),.05); font:400 12.5px/1.6 var(--sans);color:var(--tt-base)} /* El arte se asoma por la esquina, bien salido: a 96 px, si se queda dentro se come el título y la línea de debajo. */ .ttR .arte{position:absolute;top:-38px;right:-34px;width:96px;height:96px; object-fit:contain;pointer-events:none; -webkit-mask-image:linear-gradient(215deg,#000 56%,rgba(0,0,0,.6) 80%,transparent 97%); mask-image:linear-gradient(215deg,#000 56%,rgba(0,0,0,.6) 80%,transparent 97%); filter:drop-shadow(0 5px 14px rgba(0,0,0,.9))} .ttR .nom{font:600 16px/1.25 var(--disp);color:var(--tt-extra); position:relative;z-index:2} .ttR .tipo{font:400 11px var(--sans);color:var(--tt-apagado);margin-top:1px; position:relative;z-index:2} /* Solo se reserva sitio para el dibujo cuando lo hay —el hueco solo se pinta si hay arte—, y lo respeta todo el contenido, no solo el nombre: el texto lo rodea y sigue por debajo cuando el dibujo se acaba. Mide lo que el dibujo se mete en la caja: 96 de ancho menos los 34 que se sale. */ .ttR .huecoArte{float:right;width:50px;height:48px;pointer-events:none} /* Entre el subtítulo y el texto no hay raya: el juego separa con aire. */ .ttR .cuerpo{margin-top:10px} /* ── Lo que el juego destaca dentro del texto ─────────────────────────────── En BG3 la descripción no es un bloque gris: las tiradas, los dados, las distancias y los tiempos van en color, que es lo que la vista busca primero. Aquí igual, y sin tocar una palabra del texto: solo se marca. */ .ttR .cuerpo b{font-weight:600} .ttR .cuerpo .r-dad{color:var(--tt-especial)} /* dados y sumas */ .ttR .cuerpo .r-med{color:var(--tt-acento)} /* distancias y tiempos */ /* Los términos consultables NO van subrayados: en el juego solo cambian de color, y ese color es su `HighlightColor`. Al pasar por encima aclaran un poco, y ya. */ .ttR .term{color:var(--tt-destaca);cursor:help} .ttR .term:hover{color:var(--tt-extra)} /* ── Lo medible, en sus propias líneas ───────────────────────────────────── Alcance, recarga y dado salen de sus columnas y se pintan debajo del texto, cada uno con su icono, como hace el juego. Lo que no tenga columna sigue en el texto y no se pierde. */ .ttR .metas{margin-top:10px;display:grid;gap:5px} /* Los dados van arriba, pegados al subtítulo. */ .ttR .metas.dados{margin-top:12px} /* Lo que pasa al superar la salvación, debajo del texto y en otro tono. */ .ttR .consec{margin-top:8px;color:var(--tt-acento)} /* Las descripciones que son una lista se pintan como tal: cada cosa en su línea, con su punto delante. De corrido no había quien las leyera. */ /* Las viñetas valen en los dos cuadros: el de un rasgo y el de un objeto que lo concede. Estaban solo en `.ttR` y por eso la misma lista se veía con puntos en su ficha y de corrido en el objeto. */ .ttR .opsR, .tt .opsR{margin-top:7px;display:grid;gap:4px} .ttR .opR, .tt .opR{padding-left:12px;position:relative} .ttR .opR::before, .tt .opR::before{content:"•";position:absolute;left:0; color:var(--tt-apagado)} .ttR .metaL{display:flex;align-items:center;gap:8px; font:400 12px var(--sans);color:var(--tt-acento)} .ttR .metaL img{width:20px;height:20px;object-fit:contain;flex:none;opacity:.9} /* La línea del daño va la primera y algo más marcada: es lo que se mira. */ .ttR .metaL.danio{gap:6px;margin-bottom:2px} /* El número va suelto: solo el cubo delante. Y NO se llama `tirada`: esa clase es la de las casillas de características, que llevan de fondo el panel del juego con su marco. Al compartir nombre, el 2d6 heredaba ese marco y salía un recuadro raro debajo. */ .ttR .metaL.danio .nDado{font:600 14px var(--sans);color:var(--tt-extra); font-variant-numeric:tabular-nums;margin-right:8px} /* Cuantos salen de un mismo lanzamiento. Mismo tamano que el dado para que la linea no baile, pero apagado: es una cuenta sobre el dado, no otro dado. */ .ttR .metaL.danio .nVeces{font:600 14px var(--sans);color:var(--dim); font-variant-numeric:tabular-nums;margin-right:4px} /* Lo que sube o baja: el numero en el tono de los datos, para que se lea como cifra y no como parte de la frase. */ .ttR .mod .nMod{font:700 13px var(--sans);color:var(--tt-especial)} .ttR .metaL.danio .cubo{width:24px;height:24px} /* EL CUBO GENÉRICO, cuando el daño no lleva dado. Los dados de BG3 son arte a color —`D6_Radiant` es dorado, `D6_Cold` azul— pero el genérico, `ico_dice.png`, es una MÁSCARA: 48x48 en gris plano, medido `rgb(151,151,151)`. Puesto tal cual en un salía apagado y sin relación con el daño, al lado de unos cubos que sí llevan color. Aquí se usa de máscara, que es lo que es, y el color lo pone el tipo de daño —el mismo que ya lleva el número—; sin tipo, se queda en el gris del texto secundario. Mismo tamaño y misma caja que un , así que las dos formas se alinean igual en la misma lista. */ .cubo.generico{display:inline-block;flex:none; background-color:var(--faint,#7e8798); -webkit-mask:var(--ico) center/contain no-repeat; mask:var(--ico) center/contain no-repeat} .ttR .metaL.danio .cubo.generico{width:24px;height:24px} /* Un marcador dentro del dado —el «{comp}» de «{comp}d4»— es parte de la cifra que se tira, asi que se pinta del color del dano y no del de los terminos. Sigue abriendo su explicacion al pasar por encima; solo cambia el color. */ .ttR .metaL.danio .nDado .term{color:inherit;font:inherit} /* Alcance y radio comparten línea, así que cada medida es su propia caja y se separa de la siguiente. Sin esto, los 8px del hueco entre icono y texto eran los mismos que entre «20 m» y «4 m», y se leían como una sola medida. */ .ttR .metaL .medida{display:inline-flex;align-items:center;gap:8px} .ttR .metaL .medida + .medida{margin-left:14px} /* La tirada de salvación, a la derecha de los metros y en su propio tono. */ .ttR .metaL .salva{margin-left:14px;color:var(--tt-apagado); display:inline-flex;align-items:center;gap:6px} .ttR .metaL .salva img{width:17px;height:17px;opacity:.85} /* La línea de tirada y concentración va debajo de la de medidas, así que la primera chapa NO lleva la sangría de 14px que la separaba de los metros: arranca a la izquierda como cualquier otro renglón, y el hueco entre chapas lo pone el `gap`. */ .ttR .metaL.colas{gap:14px} .ttR .metaL.colas .salva{margin-left:0} /* La recarga, en el pie junto al tipo de acción. */ .ttR .pieR .carga{display:inline-flex;align-items:center;gap:6px; color:var(--tt-apagado)} /* Lo que te queda va detrás de la frase y ENCENDIDO: la recarga es una regla —gris, como el resto del pie— y esto es un número tuyo que cambia. */ .ttR .pieR .carga .quedan{color:var(--tt-extra);font-weight:600} .ttR .pieR .carga .sepCarga{opacity:.5} /* Cuando la cuenta va sola —sin frase de recarga delante, porque los usos son de OTRA habilidad— el punto de separar no separa nada: no hay nada a su izquierda. Se esconde ahí y no se quita del código, que es el mismo trozo. */ .ttR .pieR .carga.sinRecarga .sepCarga{display:none} .ttR .pieR .carga .quedan.nada{color:#c9605e} .ttR .metaL.danio img{opacity:1} /* La barra del pie: el tipo de acción, como la franja morada del juego. */ .ttR .pieR{margin:11px -16px -12px;padding:9px 16px; border-top:1px solid var(--line); background:linear-gradient(180deg,rgba(120,80,150,.16),rgba(120,80,150,.07)); border-radius:0 0 12px 12px; display:flex;align-items:center;gap:14px; font:500 11.5px var(--sans);letter-spacing:.04em} /* Y si aun así no cabe —en un móvil, o el día que alguien escriba una recarga más larga— baja la chapa ENTERA, no se parte por dentro. Es la diferencia entre «Descanso corto o largo» en el renglón de abajo y «Descanso corto o» arriba con «largo» debajo, que es lo que se veía. */ .ttR .pieR{flex-wrap:wrap;row-gap:6px} .ttR .pieR > *{white-space:nowrap} /* Las chapas del pie llevan su icono delante y se pueden consultar. Los iconos de recurso son dibujos con silueta —la nota, el triángulo, la estrella— y a 14 px no se distinguían: van al mismo cuerpo que la letra de al lado. */ .ttR .pieR .acc, .ttR .pieR .rec{display:inline-flex;align-items:center;gap:7px} .ttR .pieR img{width:20px;height:20px;object-fit:contain} .ttR .pieR .acc{color:#e8a05a} .ttR .pieR .rec{color:var(--tt-especial)} .ttR .pieR .term:hover{filter:brightness(1.2)} /* El icono del recurso, junto al nombre de su ficha. */ .ttR .nom .sello{width:24px;height:24px;object-fit:contain; vertical-align:-5px;margin-right:8px} /* La coletilla de «Especificaciones», separada de la explicación. */ .ttR .detalleR{margin-top:9px;font-size:11.5px;color:var(--tt-apagado)} /* De qué nivel viene cada mejora de esta habilidad. En dorado apagado: no es un aviso ni una pega, es de dónde sale lo que estás leyendo. */ .ttR .mejoras{margin-top:9px;display:grid;gap:3px} .ttR .mejora{display:flex;align-items:baseline;gap:8px; font:400 11.5px var(--sans);color:var(--tt-apagado)} .ttR .mejora i{font-style:normal;font-weight:600;color:var(--tt-especial); min-width:44px;text-align:right;font-variant-numeric:tabular-nums} /* Cada aviso con su triángulo, alineado con el texto y no debajo. */ /* Sin la barra dorada ni el hueco de debajo. Esos son de `.aviso` de la PÁGINA —el cartel de «ojo con esto» que sale suelto en una pantalla— y se colaban aquí por llamarse igual. En una ficha, cada coletilla es una línea más de lo que hace la habilidad: con cuatro, como el eco de inspiración, salían cuatro barras y cuatro huecos de veintiséis píxeles. */ .ttR .aviso{display:flex;gap:8px;align-items:flex-start;margin-top:6px; border:0;border-left:0;padding:0;margin-bottom:0;background:none; border-radius:0;font:inherit;color:inherit} .ttR .aviso img{width:16px;height:16px;flex:none;margin-top:2px;opacity:.9} /* El color lo pone el JS desde `AVISOS`, que son los del juego y con su triángulo de cada gravedad. Aquí no se tiñe nada a mano. */ /* Hay habilidades con un parrafo largo —el juramento del paladin son diez lineas— y la ficha crecia hasta llenar la pantalla. Con tope y scroll propio se lee igual y no tapa lo de detras. */ .ttR .cuerpo{position:relative;z-index:2;max-height:44vh;overflow-y:auto; padding-right:4px} .ttR .cuerpo::-webkit-scrollbar{width:6px} .ttR .cuerpo::-webkit-scrollbar-thumb{background:var(--gold-dim);border-radius:99px} /* ══════════════════════════════════════════════════════════════════════════ EL CAMBIO DE LADO — de estudio a personajes y al revés ────────────────────────────────────────────────────────────────────────── Solo lo ve quien lleva la mesa, y tiene que estar EN EL MISMO SITIO en las dos pantallas: si salta de una esquina a otra al cambiar, deja de ser un interruptor y pasa a ser dos botones que hay que buscar. Por eso va colocado contra la ventana —arriba a la derecha— y no dentro de la cabecera de cada pantalla: las cabeceras son distintas y el botón acabaría a distinta altura en cada una. Y por eso vive AQUÍ y no en cada página. Esta hoja la cargan las tres pantallas —creación, ficha y estudio—, que es lo mismo que pasó con la ficha emergente: dos copias de algo que debe verse igual se separan en dos semanas y entonces ya no se ve igual. ══════════════════════════════════════════════════════════════════════════ */ /* Va COLOCADO EN LA PÁGINA, no clavado a la ventana. Con `fixed` seguía al ratón por toda la pantalla y quedaba flotando encima de lo que estuvieras leyendo; con `absolute` se queda en su sitio y se va con el resto al bajar, que es lo que hace todo lo demás de la cabecera. Sigue cayendo en el mismo punto en las dos pantallas porque se cuelga del origen del documento, que es el mismo en las dos. Y los 7 px de arriba no son un número redondo: son los que dejan su centro a la altura del centro de la cabecera del estudio —45 px de alto, centro en 23; el botón mide 32, así que 23 − 16—. A 14 px quedaba siete más abajo, y eso es justo lo que se ve mal sin saber por qué. */ .cambiaLado{position:absolute;top:7px;right:18px;z-index:400; display:none;align-items:center;gap:8px; padding:7px 14px;border-radius:999px;text-decoration:none; font:600 12.5px var(--sans);letter-spacing:.02em; color:var(--dm);background:rgba(20,14,26,.92); border:1px solid var(--dm-dim); box-shadow:0 6px 20px -8px #000; transition:background .14s,color .14s,border-color .14s} /* Se enciende poniéndole la clase, que es lo que hace cada pantalla cuando sabe que quien mira lleva la mesa. Sin ella no ocupa ni sitio. */ .cambiaLado.ver{display:inline-flex} .cambiaLado:hover{color:#f0dcff;border-color:var(--dm); background:rgba(201,156,226,.18)} .cambiaLado::before{content:"";width:7px;height:7px;border-radius:50%; background:currentColor;opacity:.75;flex:none} /* ════════════════════════════════════════════════════════════════════════════ LA FICHA DEL OBJETO — el cuadro grande al estilo BG3 Vivía en la hoja de personaje, y por eso el estudio enseñaba una imitación suya al editar un objeto. Una imitación se parece a la de verdad hasta el día que deja de parecerse, y entonces engaña: se edita mirando una cosa y en la mesa sale otra. Ahora es LA MISMA, aquí y allí. El color lo pone la rareza (`--rc` el borde y el nombre, `--rg` el halo), así que la clase `r-loquesea` es lo único que hace falta para vestirla entera. ════════════════════════════════════════════════════════════════════════ */ /* Los colores de rareza son LOS DEL JUEGO, sacados de `DefaultTheme.Colours.xaml` —`ItemRarityColour.*`—, no elegidos a ojo como estaban. Baldur's Gate da dos por rareza y cada uno hace una cosa: ...GradientBottom el color vivo, para el lavado de arriba de la ficha ...Stroke uno oscuro y apagado, para el borde Aquí `--rc` pinta el borde y el nombre, así que lleva el vivo aclarado lo justo para que un nombre en verde puro no deslumbre; `--rg` es el lavado, que el juego pinta al 25 % y por eso va con esa transparencia. Lo de antes eran verdes y morados de andar por casa: parecidos, pero un objeto muy raro salía lila cuando en el juego es magenta. */ .r-comun {--rc:#cfd6e2; --rg:rgba(207,214,226,.20); --rb:#3a3a3a} .r-pococomun {--rc:#4dff8d; --rg:rgba(0,255,78,.25); --rb:#143a2b} .r-raro {--rc:#4dd2ff; --rg:rgba(0,192,255,.25); --rb:#154454} .r-muyraro {--rc:#ff4db0; --rg:rgba(209,0,124,.25); --rb:#4b1033} .r-legendario{--rc:#ffc23d; --rg:rgba(209,143,0,.25); --rb:#52431a} /* Lo de HISTORIA no es «mejor que legendario»: es otra cosa. No se compra, no se vende y no se mejora —una llave que abre un sitio, un mapa que lleva a uno—, y por eso no entra en la escala de rarezas y tiene color propio. El juego usa el recuadro de legendario y se confunden; este es un oro apagado y opaco, el de las piezas únicas del World of Warcraft, que se distingue del ámbar vivo de legendario sin gritar más que él. */ .r-historia {--rc:#e6cc80; --rg:rgba(230,204,128,.16); --rb:#3d3625} .tt{width:min(396px,calc(100vw - 24px));position:relative; background:linear-gradient(180deg,rgba(24,20,30,.985),rgba(15,13,19,.99)); border:1px solid var(--rc);border-radius:14px; box-shadow:0 26px 70px -18px #000,0 0 40px -14px var(--rg), inset 0 1px 0 rgba(255,255,255,.05); padding:15px 17px 12px;font:400 13px/1.55 var(--sans);color:var(--dim)} .tt::before{content:"";position:absolute;inset:0;border-radius:inherit; /* El lavado de rareza como lo pinta el juego: una franja que baja DESDE EL BORDE DE ARRIBA a todo lo ancho y se desvanece, no un halo en una esquina. Es lo que le da a la ficha su color de un vistazo. */ background:linear-gradient(180deg,var(--rg),transparent 58%); pointer-events:none} /* Más metido en la esquina: a -30/-16 el dibujo se sentaba sobre el nombre y le robaba sitio al título en vez de asomar por detrás de la ficha. */ /* Más metido en la esquina que el de los rasgos: en un objeto, debajo del dibujo va la descripción entera, y cuanto más se meta el dibujo en la caja más abajo empieza a leerse. Asomado, ocupa lo mismo y estorba menos. */ .tt .arte{position:absolute;top:-54px;right:-44px;width:132px;height:132px; object-fit:contain;pointer-events:none;z-index:1; -webkit-mask-image:linear-gradient(215deg,#000 58%,rgba(0,0,0,.6) 80%,transparent 97%); mask-image:linear-gradient(215deg,#000 58%,rgba(0,0,0,.6) 80%,transparent 97%); filter:drop-shadow(0 6px 16px rgba(0,0,0,.9)) drop-shadow(0 0 16px var(--rg))} /* ── El sitio del dibujo ────────────────────────────────────────────────── El arte se asoma por la esquina y va SUELTO —posición absoluta—, así que no empuja nada: el texto le pasaba por debajo. Reservarle el hueco a mano en el nombre y el subtítulo tapaba solo esas dos líneas, y lo que viene después —un efecto, una nota— seguía metiéndosele dentro. Con un flotador el hueco lo respeta TODO lo que venga detrás, sea lo que sea y ocupe lo que ocupe: el texto lo rodea y sigue por debajo cuando el dibujo se acaba, que es lo que hace el juego. Mide lo que el dibujo se mete en la caja: 132 de ancho menos los 30 que se sale, y de alto desde el borde hasta donde llega. */ .tt .huecoArte{float:right;width:74px;height:66px;pointer-events:none} /* Y NADA de `clear`. Lo llevó un tiempo —todo lo de debajo del subtítulo empezaba por debajo del dibujo— y eso metía un hueco en blanco delante de textos que no llegaban ni a rozarlo: «Daño: 4~16» cabe de sobra al lado del icono y bajaba igual. Un flotador ya hace lo que hay que hacer: la línea que quepa se queda arriba, y la que no, baja. El hueco aparece SOLO cuando el texto iba a cruzar el dibujo, que es cuando hace falta. */ .tt .nom{font:600 17.5px/1.25 var(--disp);color:var(--rc); position:relative;z-index:2} .tt .tipo{font:400 11.5px var(--sans);color:var(--faint);margin-top:1px; position:relative;z-index:2} .tt .sep{height:1px;background:var(--line);margin:11px 0} .tt .ca{display:flex;align-items:center;gap:11px;margin:12px 0 2px; position:relative;z-index:2} /* La CA que da un OBJETO lleva su propio escudo —`ico_AC_primary`—, distinto del de la hoja y del muñeco. No es lo mismo: el del resumen es la armadura DEL PERSONAJE, la suma de todo; este es lo que aporta esta pieza suelta. Con el mismo dibujo en los tres sitios parecía que decían lo mismo. Y es cuadrado, no con la punta abajo, así que el número va centrado. */ .tt .ca .escudo{position:relative;width:38px;height:38px;flex:none; background:url("iconos/ui/ico_AC_primary.png") center/contain no-repeat; display:grid;place-items:center; filter:drop-shadow(0 2px 5px rgba(0,0,0,.5))} .tt .ca .escudo img{width:100%;height:100%;object-fit:contain;opacity:.9} .tt .ca .escudo b{position:absolute;inset:0;display:grid;place-items:center; font:600 13px var(--sans);color:#fff;text-shadow:0 1px 3px #000} .tt .ca .txt{font:500 15px var(--sans);color:var(--ink)} .tt .dano{font:500 14.5px var(--sans);color:var(--ink);margin:10px 0 6px; position:relative;z-index:2} .tt .linea{display:flex;align-items:center;gap:9px;margin:5px 0; position:relative;z-index:2} .tt .linea .ico{width:22px;height:22px;flex:none;display:grid;place-items:center; background:var(--panel3);border-radius:6px;font-size:12px} .tt .linea .ico img{width:100%;height:100%;object-fit:contain;border-radius:6px} .tt .linea b{font-weight:500;color:var(--ink)} .tt .linea em{font-style:normal;color:var(--faint);font-size:11.5px} .tt .efecto{margin:9px 0;position:relative;z-index:2} .tt .efecto b{color:var(--ink);font-weight:600} /* El color lo pone cada aviso según su gravedad —van cuatro—, así que aquí no se fija ninguno: el que hubiera ganaba al del nivel y salían todos iguales. */ .tt .avisoObj{display:flex;gap:8px;align-items:flex-start;margin:7px 0; font-size:12.5px;position:relative;z-index:2} .tt .avisoObj .triangulo{width:14px;height:14px;flex:0 0 14px;margin-top:1px; object-fit:contain} /* Qué es, al pie y en pequeño: «Armadura pesada», «Instrumento musical». Va con los avisos, en la letra chica, después del sabor. */ /* De un solo uso: en la línea del pie, con el peso y el oro. Es la ficha técnica del objeto y va toda junta, como en el juego: lo que cuesta usarlo a la izquierda y lo que pesa y vale a la derecha. `margin-right:auto` es lo que los separa a los dos extremos sin tocar el resto de la línea. */ .tt .pieObj .unUso{display:inline-flex;gap:7px;align-items:center; margin-right:auto;color:var(--ac)} .tt .pieObj .unUso img{width:15px;height:15px;flex:0 0 15px;object-fit:contain; margin-left:0;opacity:1} /* Las especificaciones del arma, en fila y con aire entre ellas. Se envuelven si no caben: son hasta cuatro y algunas traen su dado entre paréntesis. */ .tt .propsArma{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center; margin:8px 0 0;font-size:12.5px;color:var(--faint);position:relative;z-index:2} .tt .unaProp{display:inline-flex;gap:7px;align-items:center} .tt .unaProp img{width:14px;height:14px;flex:0 0 14px;object-fit:contain;opacity:.8} /* ── Comparar con lo que llevas ─────────────────────────────────────────── Las dos fichas en fila y del mismo ancho, como en el juego: la que miras a la izquierda y la que llevas puesta a la derecha. Del mismo ancho a propósito — si una es más estrecha, las líneas no caen a la misma altura y hay que ir buscando cada dato en vez de leerlos de un vistazo. */ .comparando{display:flex;gap:12px;align-items:flex-start} .comparando .tt{flex:1 1 0;min-width:0} /* La de la derecha, más apagada: es la referencia, no lo que estás mirando. */ .comparando .tt.puesta{opacity:.92} .tt .loLlevas{display:flex;gap:7px;align-items:center;margin:0 0 8px; font-size:11.5px;letter-spacing:.04em;text-transform:uppercase; color:var(--gold-dim);position:relative;z-index:2} .tt .loLlevas img{width:15px;height:15px;object-fit:contain;opacity:.75} .tt .queEsObj{display:flex;gap:8px;align-items:center;margin:7px 0 0; font-size:12.5px;color:var(--faint);position:relative;z-index:2} .tt .queEsObj img{width:14px;height:14px;flex:0 0 14px;object-fit:contain;opacity:.75} .tt .notaObj{color:var(--faint);font-size:12.5px;margin:6px 0; position:relative;z-index:2} .tt .sabor{display:flex;gap:9px;align-items:flex-start;margin:12px 0 4px; color:var(--faint);font:italic 400 12.5px/1.6 var(--sans); position:relative;z-index:2} /* El pergamino: pequeño y apagado, que acompaña al texto de sabor sin competir con él. Va un pelín más abajo para caer a la altura de la primera línea y no del hueco entre líneas. */ .tt .sabor .pluma{flex:none;width:19px;height:19px;margin-top:1px;opacity:.65; object-fit:contain} .tt .pieObj{display:flex;justify-content:flex-end;gap:16px;align-items:center; margin-top:12px;padding-top:10px;border-top:1px solid var(--line); color:var(--dim);font-size:12.5px;position:relative;z-index:2} .tt .pieObj i{font-style:normal;color:var(--faint);margin-left:3px} /* La pesa y la moneda, del tamaño de la cifra y un pelín apagadas: acompañan al número, no compiten con él. */ .tt .pieObj img{width:15px;height:15px;object-fit:contain;margin-left:5px; vertical-align:-3px;opacity:.9} /* la botonera del objeto: solo sale con el tooltip clavado */ .tt .manos{display:none;gap:8px;flex-wrap:wrap;margin-top:12px; padding-top:11px;border-top:1px solid var(--line);position:relative;z-index:2} .tt.clavada .manos{display:flex} /* El muelle que empuja «Pasar a…» hasta la derecha y deja «Tirar» pegado a la izquierda. Si no hay «Tirar» —un jugador no tira nada— sigue valiendo: el hueco se queda a la izquierda y lo demás no se mueve de su sitio. Y se llama `muelle` y no `hueco`: `hueco` ya es la casilla de la rejilla del inventario, de 62 px y con su fondo, así que el separador salía pintado como un ladrillo negro en medio de la botonera. */ .tt .manos .muelle{flex:1 1 auto;min-width:0} .pinza{position:absolute;top:-13px;left:14px;z-index:3; background:var(--panel3);border:1px solid var(--line2);border-radius:6px; padding:2px 8px;font:500 10.5px var(--sans);color:var(--dim);white-space:nowrap} .pinza kbd{background:var(--bg);border:1px solid var(--line2);border-radius:3px; padding:0 4px;font:600 10px var(--sans);color:var(--gold);margin-right:5px} .tt.medio{width:min(336px,calc(100vw - 24px))} .tt.medio .arte{width:112px;height:112px;top:-24px;right:-14px} /* El hueco va con su dibujo: si el arte encoge y el hueco no, queda una franja en blanco a la derecha del texto sin nada que la justifique. */ .tt.medio .huecoArte{width:84px;height:76px} /* el dado a la izquierda y el tipo de daño incrustado en la frase */ .tt .linea.dan .ico{background:none} .tt .linea.dan .ico img{width:26px;height:26px;margin:-2px} /* Las dos tiradas del mismo golpe, una debajo de otra, y el extra en dorado para que se distinga de la base de un vistazo. */ .tt .danTextos{display:flex;flex-direction:column;gap:2px} .tt .unDano.ex b{color:var(--gold)} /* Con daño extra, los dos dados COMPARTEN hueco: el extra detrás y asomando por arriba a la izquierda, el principal delante y abajo. Es como lo pinta el juego, y hace falta más sitio a lo alto porque ahora hay dos líneas de texto al lado. Un dado solo no entra por aquí y se queda como estaba. */ .tt .linea.dan.doble{align-items:center} .tt .linea.dan.doble .ico{position:relative;width:34px;height:34px} .tt .linea.dan.doble .ico img{position:absolute;width:24px;height:24px;margin:0} .tt .linea.dan.doble .dEx{top:0;left:0;filter:drop-shadow(0 1px 3px rgba(0,0,0,.7))} .tt .linea.dan.doble .dPral{bottom:0;right:0; filter:drop-shadow(-1px -1px 2px rgba(0,0,0,.85))} .tt .micro{width:16px;height:16px;object-fit:contain;vertical-align:-3px; margin:0 1px} .tt.chico .arte{width:76px;height:76px;top:-16px;right:-10px} .tt.chico .huecoArte{width:52px;height:48px} .h2ico{width:17px;height:17px;object-fit:contain;vertical-align:-3px; margin-right:7px;opacity:.85} .tt .chips{display:flex;flex-wrap:wrap;gap:8px 16px;margin:11px 0 2px; position:relative;z-index:2} .tt .chip{display:inline-flex;align-items:center;gap:6px; font:400 12.5px var(--sans);color:var(--dim)} .tt .chip i{font-style:normal;color:var(--mp)} .tt .coste{margin-top:11px;padding-top:10px;border-top:1px solid var(--line); position:relative;z-index:2} .tt .coste .term{color:var(--ac)} .tt .coste .term:hover{color:#ffc79a} /* una acción se puede señalar, así que se comporta como algo pinchable */ .tt .linea.accion{cursor:pointer;border-radius:7px;margin-left:-5px;padding:3px 5px} .tt .linea.accion:hover{background:rgba(255,255,255,.06)} /* La fila lleva la clase `term` para que señalarla abra la ficha de la acción, pero NO su color: `.term` pinta en oro, y aplicado a la fila entera teñía el icono, el nombre y el subtítulo de golpe. El oro se queda donde estaba, en el nombre, que es la palabra que se señala. */ .tt .linea.accion.term{color:inherit} .tt .linea.accion.term:hover{color:inherit} /* ── Las tres capas de las fichas emergentes ────────────────────────────── Son la maquinaria de `habilidades.js`: una por nivel —lo que señalas, lo que señalas dentro de eso, y uno más—. Estaban solo en la hoja de personaje, así que en el estudio las fichas se abrían y nadie las veía: sin estas reglas la capa es un div suelto sin sitio ni `display`. */ #capaRasgo,#capaTermino,#capaTermino2{position:fixed;z-index:300;display:none; pointer-events:none} #capaRasgo.ver,#capaTermino.ver,#capaTermino2.ver{display:block; animation:asomaObj .13s ease} #capaTermino {z-index:320} #capaTermino2{z-index:340} #capaRasgo.clavado, #capaRasgo.clavado ~ #capaTermino, #capaRasgo.clavado ~ #capaTermino2{pointer-events:auto} @keyframes asomaObj{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}} /* ══════════════════════════════════════════════════════════════════════════ LA BARRA DE DESPLAZAR ══════════════════════════════════════════════════════════════════════════ La del juego, la del panel de diálogo: un tirador dorado de puntas picudas sobre un canal vacío. La de serie del navegador —gris, cuadrada, con sus dos flechas— es lo único que quedaba de aspecto de formulario dentro de una pantalla que por lo demás es BG3 entero, y se veía en el glosario, en las descripciones y en cualquier caja que se pasara de largo. Va aquí y no en cada página porque estas tres hojas la comparten: repartida por sitios habría acabado con tres barras distintas, que es justo lo que había —cada caja se pintaba la suya con el dorado plano—. El tirador se estira con `border-image` y NO con un fondo: el dibujo tiene las puntas en pico, y estirándolo a lo bruto se deforman y dejan de ser puntas. Recortando por arriba y por abajo, las puntas se quedan como están y solo crece el centro, por largo que sea lo que estés leyendo. */ /* LA BARRA DE DESPLAZAR VIVE AHORA EN `pasos.css`, en un solo sitio y para todas las pantallas. Aquí había una segunda definición y tenía tres cosas mal: · `*{scrollbar-color: ...}` — con esa propiedad puesta, Chrome pinta SU barra y se salta todas las reglas `::-webkit-scrollbar` de debajo. O sea que esta misma regla apagaba el arte que las otras treinta líneas intentaban poner. Sin ella no se veía el dibujo del juego en ninguna parte salvo en la cadena de la subida, que era la única que devolvía `scrollbar-color:auto`. · Las piezas iban al revés: `_h` —la de ratón encima— puesta de fijo y `_d` al pasar por encima. · Y a 12 px fijos, en vez de a las 1,458 unidades del dibujo, así que era lo único de la pantalla que no escalaba. Las tres páginas que cargan este archivo cargan también `pasos.css`, y lo hacen después, así que no hace falta nada aquí. */ /* Las dobles —las que el navegador añade en el extremo que no toca— fuera. Sin decirlo pinta CUATRO flechas por barra: las dos de siempre y otras dos pegadas al lado contrario, que en el juego no están. */ ::-webkit-scrollbar-corner{background:transparent} ::-webkit-scrollbar-button:vertical:start:increment, ::-webkit-scrollbar-button:vertical:end:decrement{display:none;width:0;height:0}