/* Acabado «fiel» del tema (html.wl-fiel, junto a html.wl-kx): acerca la landing a la UI de Wilderings. Contornos tonales en
vez de tinta común, labio tonal y sombra suave, sin grano, tiritas con extremos de cinta y solo piezas del juego en los
remates; con brillo de rareza, cantos gruesos, arte que rompe el marco y hover de carta elegida. Va después de
kuxaan.css y lo sobrescribe; nació como los mockups ?wkx=fiel y ?wkx=fiel2. Los parámetros &wkxhover y &wkxchar de
fiel.js siguen sirviendo para capturas. */
/* Mockup «fiel» (?wkx=fiel): misma página, mismo ritmo y la misma gracia que el tema «El Kuxaan de Abi», pero con el
ACABADO de la UI de Wilderings en vez del recortable cartoon con tinta negra:
- contornos tonales (cada pieza se perfila con un tono más oscuro de su propio color), nunca la tinta común;
- volumen con labio inferior del mismo color más oscuro y sombra suave (fuera el canto de cartón duro);
- superficies lisas o con degradado suave, sin grano ni ruido; línea interior paralela al borde;
- los remates de oficina (cinta washi, esquineras, clip, chinchetas, sello, matasellos, entrada con matriz) pasan a
piezas del juego (pergamino de los popups, marco de vídeo, cinta de carta, banners con hojas, hexágonos, insignia
redonda, brillo de rareza, cantoneras del libro) o desaparecen.
Se queda lo que da el «wow»: arte a sangre, papel rasgado entre secciones, titulares grandes, notas a mano, Hântu
asomando, abanico de luz. Todo bajo html.wl-fiel (lo pone landing.js con ?wkx=fiel2), encima de kuxaan.css.
fiel2 = fiel + más «punch» con piezas del propio juego (sin tinta negra ni sombra dura desplazada):
1. brillo de rareza (T_Card_Rarity_Glow, en 9 tramos) y rayos de VFX detrás de 4 piezas clave: ficha de la familia,
póster del cierre, botón FREE DEMO de la cabecera y carta de Combate de Puntos clave;
2. cantos más gruesos y tonales: contorno de 4-5 px, aro interior claro y labio de 9-10 px en cartas y fichas;
3. arte que rompe el marco: el personaje elegido asoma por encima de su ficha, Lumie sale del marco del vídeo de
Combate y un Hântu se sienta en el canto del pergamino de El juego;
4. titulares con más cuerpo: trazo más grueso, extrusión más honda en su tono oscuro y halo suave como el logo;
5. turquesa de carta más vivo (degradado con brillo arriba, como el teal de Memory Fragments);
6. al pasar el ratón las cartas suben con rebote, cruza un destello y se enciende el aro (T_Reward_On).
&wkxhover=family|battle|hantu|poster congela ese estado para capturas. */
html.wl-kx.wl-fiel {
/* Tinta: ya no es un casi negro común. Texto sobre papel en marrón cálido; lo que quede sin pieza propia hereda esto */
--k-ink: #5e4026; --k-ink2: #6b4a2e; --k-ink3: #9a7650;
/* Papel (pergamino del juego, algo más claro que el de los popups para leer bien): contorno, labio y línea interior */
--f-paper-o: #c9a66b; --f-paper-lip: #b08550; --f-paper-in: rgba(255, 250, 228, .85);
/* Turquesa de carta: aro claro, contorno y labio oscuros, cuerpo profundo para que el texto claro se lea */
--f-teal-rim: #5bd5c7; --f-teal-o: #0f5c55; --f-teal-lip: #0b4843; --f-teal-a: #1d8077; --f-teal-b: #135f59;
/* Miel de botón: relleno, contorno naranja y labio */
--f-honey: #ffc83d; --f-honey-o: #d9861a; --f-honey-lip: #b8650f;
/* Marco de vídeo del juego (T_Frame_video): cobre */
--f-frame: #c47a3c; --f-frame-o: #9a5524;
--f-soft: 0 18px 30px -14px rgba(16, 30, 70, .42);
--k-pop: 0 6px 0 var(--f-paper-lip), 0 24px 38px -16px rgba(16, 30, 70, .42);
--k-pop-s: 0 3px 0 var(--f-paper-lip), 0 8px 16px -6px rgba(16, 30, 70, .3);
/* Sin grano ni ruido */
--k-grain: none; --k-hide: none;
--k-paperbg: radial-gradient(130% 100% at 50% 30%, #fbf3d6 0%, #f3e6bd 62%, #ead8a5 100%) #f1e3b8;
--k-leather: radial-gradient(120% 140% at 30% 0%, #8a6442 0%, #6c4b2f 48%, #553923 100%) #6c4b2f;
/* Destello del primer titular: miel con contorno naranja (el del botón FREE DEMO), no tinta */
--k-sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cg fill='%23ffd04a' stroke='%23d9861a' stroke-width='2.6' stroke-linejoin='round'%3E%3Cpath d='M24 6C26 19 30 23 43 26C30 29 26 33 24 46C22 33 18 29 5 26C18 23 22 19 24 6Z'/%3E%3Cpath d='M48 4C49 9 50 10 55 11C50 12 49 13 48 18C47 13 46 12 41 11C46 10 47 9 48 4Z'/%3E%3C/g%3E%3C/svg%3E");
/* Pergamino de los popups del juego (T_Popup_01, nueve piezas del kit de la enciclopedia, a media escala): esquinas en
espiral, línea interior, labio y sombra ya vienen en la textura */
--f-paper9:
url(../../../wilderings-encyclopedia/assets/web/kit/paper-tl.webp) left top / 57px 38px no-repeat,
url(../../../wilderings-encyclopedia/assets/web/kit/paper-tr.webp) right top / 58px 38px no-repeat,
url(../../../wilderings-encyclopedia/assets/web/kit/paper-bl.webp) left bottom / 57px 41px no-repeat,
url(../../../wilderings-encyclopedia/assets/web/kit/paper-br.webp) right bottom / 58px 41px no-repeat,
url(../../../wilderings-encyclopedia/assets/web/kit/paper-tm.webp) 55px top / calc(100% - 111px) 38px no-repeat,
url(../../../wilderings-encyclopedia/assets/web/kit/paper-bm.webp) 55px bottom / calc(100% - 111px) 41px no-repeat,
url(../../../wilderings-encyclopedia/assets/web/kit/paper-cl.webp) left 36px / 57px calc(100% - 75px) no-repeat,
url(../../../wilderings-encyclopedia/assets/web/kit/paper-cr.webp) right 36px / 58px calc(100% - 75px) no-repeat,
url(../../../wilderings-encyclopedia/assets/web/kit/paper-cm.webp) 55px 36px / calc(100% - 111px) calc(100% - 75px) no-repeat;
/* Banner turquesa con hojas (T_Banner_Greenhouse / kit ribbon-teal-56), para los antetítulos */
--f-leafbanner:
url(../../../wilderings-encyclopedia/assets/web/kit/ribbon-teal-56-l.webp) left center / auto 100% no-repeat,
url(../../../wilderings-encyclopedia/assets/web/kit/ribbon-teal-56-r.webp) right center / auto 100% no-repeat,
url(../../../wilderings-encyclopedia/assets/web/kit/ribbon-teal-56-m.webp) center / calc(100% - 50px) 100% no-repeat;
--f-leafbanner-y:
url(../../../wilderings-encyclopedia/assets/web/kit/ribbon-yellow-56-l.webp) left center / auto 100% no-repeat,
url(../../../wilderings-encyclopedia/assets/web/kit/ribbon-yellow-56-r.webp) right center / auto 100% no-repeat,
url(../../../wilderings-encyclopedia/assets/web/kit/ribbon-yellow-56-m.webp) center / calc(100% - 50px) 100% no-repeat;
}
/* ── Piezas comunes ─────────────────────────────────────────────────────────────────────────────────────────── */
/* Fuera la cinta washi (en El juego, la galería y el póster): nada la sustituye, las piezas ya no necesitan «pegarse» */
html.wl-kx.wl-fiel .k-tape { display: none; }
/* Hântu sin el troquelado blanco de pegatina: las mismas criaturas, con el arte del Kuxaan (HantuPics *_known) */
html.wl-kx.wl-fiel .k-stk { filter: drop-shadow(0 8px 10px rgba(16, 24, 50, .35)); }
html.wl-kx.wl-fiel .k-stk--wetlands04 { background-image: url(kuxaan/fiel/hantu-wetlands04.webp); }
html.wl-kx.wl-fiel .k-stk--volcanic03 { background-image: url(kuxaan/fiel/hantu-volcanic03.webp); }
html.wl-kx.wl-fiel .k-stk--emoji2 { background-image: url(kuxaan/fiel/hantu-volcanic08.webp); }
/* Hexágono del Kuxaan como el seleccionado en la pestaña de Hântu: aro blanco, aro dorado y el color del bioma */
html.wl-kx.wl-fiel .k-hex { filter: drop-shadow(0 4px 0 rgba(150, 105, 20, .55)) drop-shadow(0 14px 16px rgba(16, 30, 70, .35)); }
html.wl-kx.wl-fiel .k-hex::before { background: #fffaf0; }
html.wl-kx.wl-fiel .k-hex::after { inset: 6px; background: #f6b800; }
html.wl-kx.wl-fiel .k-hex > i { inset: 11px 11px; background: radial-gradient(70% 60% at 50% 35%, #d4f29a, #82cc52 70%, #5aa63a) #82cc52; }
html.wl-kx.wl-fiel .k-hex > i::after { display: none; }
html.wl-kx.wl-fiel .k-hex > b { filter: drop-shadow(0 3px 3px rgba(20, 50, 20, .35)); }
/* Notas a mano: se quedan (tienen gracia), en marrón cálido */
html.wl-kx.wl-fiel .k-note { color: var(--k-ink2); }
html.wl-kx.wl-fiel .wl .k-note--moves { color: #fff3d6; }
/* Titulares de cartel: misma presencia, trazo tonal cálido (más fino) y extrusión sutil del mismo tono. Cada color de
palabra con su contorno: hoja → verde oscuro, miel → naranja, como los títulos del juego */
/* fiel2 (4): más cuerpo. Trazo tonal más grueso, extrusión maciza en tres capas del tono oscuro (recta hacia abajo, como
los títulos del juego, nunca desplazada) y un halo claro y suave detrás, como el del logo de Wilderings */
html.wl-kx.wl-fiel body.wl-landing .wl .k-poster { --kt: #87552a; --ke: #5f3a18; color: #fff8e4; -webkit-text-stroke: .15em var(--kt); rotate: -1deg;
text-shadow: 0 .035em 0 var(--ke), 0 .07em 0 var(--ke), 0 .11em 0 var(--ke), 0 .2em .34em rgba(16, 30, 70, .38);
filter: drop-shadow(0 0 .2em rgba(255, 251, 228, .6)); }
html.wl-kx.wl-fiel .wl .k-poster .w-leaf { --kt: #3f7d1c; --ke: #2f5e12; color: #c2f070; -webkit-text-stroke-color: var(--kt);
text-shadow: 0 .035em 0 var(--ke), 0 .07em 0 var(--ke), 0 .11em 0 var(--ke), 0 .2em .34em rgba(16, 30, 70, .38); }
html.wl-kx.wl-fiel .wl .k-poster .w-honey { --kt: #c25f14; --ke: #93460c; color: #ffd24a; -webkit-text-stroke-color: var(--kt);
text-shadow: 0 .035em 0 var(--ke), 0 .07em 0 var(--ke), 0 .11em 0 var(--ke), 0 .2em .34em rgba(16, 30, 70, .38); }
/* Antetítulos: dejan de ser sellos de goma y pasan a ser el banner turquesa con hojas del juego (letra miel) */
html.wl-kx.wl-fiel body.wl-landing .wl .wl-head .eyebrow { display: inline-flex; align-items: center; height: 48px; margin: 0 0 20px; padding: 1px 50px 0; border: 0; border-radius: 0; rotate: 0deg;
background: var(--f-leafbanner); box-shadow: none; filter: drop-shadow(0 6px 8px rgba(16, 30, 70, .25));
color: #ffe066; font-size: 15px; letter-spacing: .18em; text-shadow: 0 1px 1px rgba(10, 60, 56, .8); }
/* ── Pestañas de navegación: el mismo cuero del libro, con contorno marrón tonal y sombra suave ───────────────── */
html.wl-kx.wl-fiel .k-tab { border: 2px solid #3f2817; border-right: 0; box-shadow: inset 0 2px 0 rgba(255, 225, 170, .22), 0 6px 12px -4px rgba(16, 20, 40, .45); }
html.wl-kx.wl-fiel .k-tab::before { border-style: solid; border-width: 1px; border-right: 0; border-color: rgba(248, 234, 196, .28); }
html.wl-kx.wl-fiel .k-tab.on { border-color: var(--f-paper-o); box-shadow: inset 0 2px 0 #fff, 0 6px 14px -4px rgba(16, 20, 40, .45); }
html.wl-kx.wl-fiel .k-tab:hover .k-tab-name, html.wl-kx.wl-fiel .k-tab:focus-visible .k-tab-name { border: 2px solid var(--f-paper-o); box-shadow: var(--k-pop-s); }
@media (min-width: 1660px) and (min-height: 760px) {
html.wl-kx.wl-fiel .k-tab:hover .k-tab-name, html.wl-kx.wl-fiel .k-tab:focus-visible .k-tab-name { border: 0; box-shadow: none; }
}
/* ── 1. Cabecera: los enlaces secundarios como botones crema del juego (labio y sombra suave) ─────────────────── */
html.wl-kx.wl-fiel body.wl-landing .wl-hero .hero-links a.k-tag { border: 2px solid var(--f-paper-o); border-radius: 14px; background: linear-gradient(180deg, #fffaea, #f3e4b9) #f6eacb;
color: var(--k-ink); box-shadow: inset 0 0 0 2px var(--f-paper-in), 0 4px 0 var(--f-paper-lip), 0 10px 18px -6px rgba(16, 30, 70, .4); }
html.wl-kx.wl-fiel body.wl-landing .wl-hero .hero-links a.k-tag:hover { background: linear-gradient(180deg, #ffe07a, var(--f-honey)) var(--f-honey); border-color: var(--f-honey-o); box-shadow: inset 0 0 0 2px rgba(255, 245, 200, .6), 0 4px 0 var(--f-honey-lip), 0 10px 18px -6px rgba(16, 30, 70, .4); }
/* ── 2. Cinta de miel: contorno naranja tonal y labio, bocadillos con su propio contorno, sin tinta ─────────────── */
html.wl-kx.wl-fiel body.wl-landing .wl-proof.k-band { border-top: 3px solid #e09a22; border-bottom: 3px solid #d68616;
box-shadow: inset 0 3px 0 rgba(255, 240, 180, .6), 0 7px 0 #b8700f, 0 22px 34px -14px rgba(16, 30, 70, .45); }
html.wl-kx.wl-fiel body.wl-landing .wl-proof .k-patch { border: 2px solid #3f2817; box-shadow: inset 0 2px 0 rgba(255, 225, 170, .2), 0 4px 0 #3a2414, 0 10px 16px -6px rgba(60, 30, 0, .45); }
html.wl-kx.wl-fiel body.wl-landing .wl-proof .k-patch::before { border: 1.5px solid rgba(255, 232, 186, .3); }
html.wl-kx.wl-fiel body.wl-landing .wl-proof .steam-reviews,
html.wl-kx.wl-fiel body.wl-landing .wl-proof blockquote { border: 2px solid #e2cd9c !important; background: #fffcf2 !important;
box-shadow: inset 0 -3px 0 #f3e8cc, 0 4px 0 #d9b25c, 0 10px 16px -6px rgba(110, 60, 0, .4); }
html.wl-kx.wl-fiel body.wl-landing .wl-proof blockquote { color: var(--k-ink2); }
html.wl-kx.wl-fiel body.wl-landing .wl-proof blockquote::after { border-right: 2px solid #e2cd9c; border-bottom: 2px solid #e2cd9c; background: #fffcf2; bottom: -10px; }
html.wl-kx.wl-fiel body.wl-landing .wl-proof .store { border: 2px solid #2a3442; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25), 0 4px 0 #0b0f16, 0 10px 16px -6px rgba(60, 30, 0, .45); }
html.wl-kx.wl-fiel .wl-proof .k-ribbon { filter: drop-shadow(0 6px 6px rgba(16, 30, 70, .3)); }
/* ── 3. El juego: la ficha es el pergamino de los popups (sin cinta), el tráiler va en el marco de vídeo del juego ─ */
html.wl-kx.wl-fiel .wl-pitch .copy { padding: 46px 52px 50px; border: 0; border-radius: 30px; box-shadow: none; rotate: -1deg; background: var(--f-paper9);
filter: drop-shadow(0 22px 22px rgba(16, 30, 70, .3)); }
html.wl-kx.wl-fiel body.wl-landing .wl-pitch .copy p.lead { color: var(--k-ink2); }
html.wl-kx.wl-fiel .wl-pitch .copy p.lead:first-of-type::first-letter { color: #ffc83d; -webkit-text-stroke: .08em #c8661a; text-shadow: 0 .05em 0 #a3500f; }
html.wl-kx.wl-fiel .wl-pitch .k-pitch-hex { right: -54px; bottom: -78px; rotate: 6deg; }
/* Marco de vídeo de los popups (T_Frame_video): filete cobre redondeado y sombra suave; el pie escrito a mano debajo */
html.wl-kx.wl-fiel .wl .trailer { rotate: 1.6deg; border: 7px solid var(--f-frame); border-bottom-width: 7px; border-radius: 22px; background: #2a1c12;
box-shadow: 0 0 0 2px var(--f-frame-o), inset 0 0 0 2px rgba(255, 214, 160, .35), 0 7px 0 1px #7e451b, 0 34px 50px -18px rgba(16, 30, 70, .55); }
html.wl-kx.wl-fiel .wl .trailer img { border-radius: 15px; box-shadow: none; }
html.wl-kx.wl-fiel .wl .trailer .k-corner { display: none; }
html.wl-kx.wl-fiel .wl .trailer .k-cap { bottom: -66px; color: var(--k-ink2); }
html.wl-kx.wl-fiel .wl .trailer .k-cap span, html.wl-kx.wl-fiel .wl .trailer .k-cap { text-shadow: 0 0 2px #fffaf0, 0 0 8px rgba(255, 252, 240, .95), 0 0 16px rgba(255, 252, 240, .8); }
/* Botón de reproducir como los botones amarillos del juego (REFRESH): miel, contorno naranja, línea interior y labio */
html.wl-kx.wl-fiel .wl .trailer .play-big b { border: 3px solid var(--f-honey-o); background: radial-gradient(80% 80% at 50% 30%, #ffe27a, var(--f-honey) 70%) var(--f-honey); color: #d9650d;
box-shadow: inset 0 0 0 3px rgba(255, 247, 210, .55), 0 6px 0 var(--f-honey-lip), 0 16px 24px -8px rgba(20, 10, 0, .55); }
/* ── 5. Puntos clave: cartas de papel del juego (contorno tonal, línea interior, labio) y la de combate con el brillo
amarillo de rareza (T_Card_Rarity_Glow) ─────────────────────────────────────────────────────────────────────── */
/* fiel2 (2): canto de carta del juego. Contorno de 4,5 px en el tono oscuro del papel, aro interior claro de 4 px con
su filete, y labio de 9 px del mismo tono */
html.wl-kx.wl-fiel { --f-card-o: #b4844a; --f-card-lip: #9a6c36;
--f-card-sh: inset 0 0 0 4px rgba(255, 251, 232, .95), inset 0 0 0 6px rgba(180, 132, 74, .35), 0 9px 0 var(--f-card-lip), 0 28px 42px -16px rgba(16, 30, 70, .5); }
html.wl-kx.wl-fiel body.wl-landing .wl .card { padding: 12px; border: 4.5px solid var(--f-card-o); background: var(--k-paperbg); box-shadow: var(--f-card-sh); }
html.wl-kx.wl-fiel body.wl-landing .wl .card:hover { box-shadow: var(--f-card-sh); }
html.wl-kx.wl-fiel body.wl-landing .wl .card .media { border: 3px solid var(--f-card-lip); }
html.wl-kx.wl-fiel body.wl-landing .wl .card h3 { color: var(--k-ink); }
html.wl-kx.wl-fiel body.wl-landing .wl .card p { color: var(--k-ink2); }
html.wl-kx.wl-fiel .wl .k-build { filter: drop-shadow(0 2px 2px rgba(90, 60, 20, .35)); }
html.wl-kx.wl-fiel .wl .k-build::before { display: none; }
/* La de combate: aro dorado de carta legendaria con su contorno tonal; el brillo lo pone la textura (.kf-glow) */
html.wl-kx.wl-fiel body.wl-landing .wl .c-battle { border-color: #d99a1c;
--f-card-sh: inset 0 0 0 5px #ffd84a, inset 0 0 0 7px rgba(255, 250, 220, .9), inset 0 0 0 8.5px rgba(200, 140, 30, .45), 0 10px 0 #b8800f, 0 30px 46px -12px rgba(16, 30, 70, .45); }
html.wl-kx.wl-fiel .wl .k-stars { filter: drop-shadow(0 0 6px rgba(255, 230, 120, .9)) drop-shadow(0 4px 4px rgba(120, 70, 0, .35)); }
/* ── 6. Galería: capturas en el marco de vídeo del juego; botones redondos turquesa como el de FEED ───────────── */
html.wl-kx.wl-fiel body.wl-landing .wl .carousel img { border: 5px solid var(--f-frame); border-radius: 14px; rotate: -1.6deg;
box-shadow: 0 0 0 2px var(--f-frame-o), 0 5px 0 1px #7e451b, 0 22px 30px -12px rgba(16, 30, 70, .5); }
html.wl-kx.wl-fiel body.wl-landing .wl .carousel img:nth-child(even) { rotate: 1.4deg; }
html.wl-kx.wl-fiel body.wl-landing .wl .carousel img[style*="z-index: 10"] { rotate: 0deg; }
html.wl-kx.wl-fiel body.wl-landing .wl .carousel .k-pad { border: 2px solid #128578; background: radial-gradient(90% 90% at 50% 30%, #8af0e2, #4fd2c2 70%) #4fd2c2;
box-shadow: inset 0 0 0 3px rgba(225, 255, 250, .5), 0 5px 0 #0f6e64, 0 14px 20px -8px rgba(16, 30, 70, .5); rotate: 0deg; }
html.wl-kx.wl-fiel body.wl-landing .wl .carousel .k-pad::before { border-color: #fffdf4; filter: drop-shadow(0 1px 0 #0f6e64); }
html.wl-kx.wl-fiel body.wl-landing .wl .carousel .k-pad:hover { background: radial-gradient(90% 90% at 50% 30%, #ffe27a, var(--f-honey) 70%) var(--f-honey); border-color: var(--f-honey-o); box-shadow: inset 0 0 0 3px rgba(255, 247, 210, .55), 0 5px 0 var(--f-honey-lip), 0 14px 20px -8px rgba(16, 30, 70, .5); }
html.wl-kx.wl-fiel body.wl-landing .wl .carousel .k-pad:hover::before { filter: drop-shadow(0 1px 0 var(--f-honey-lip)); }
html.wl-kx.wl-fiel body.wl-landing .wl .cnav button { background: rgba(40, 70, 130, .32); }
html.wl-kx.wl-fiel body.wl-landing .wl .cnav button.on { background: var(--f-honey); filter: drop-shadow(0 2px 0 var(--f-honey-o)); }
/* ── 7. La familia: personaje con sombra suave; la ficha es una carta turquesa del juego con su cinta para el nombre ─ */
/* Extremos de las tiritas: muesca suave y esquinas redondeadas, como las cintas del juego (nada de zigzag anguloso). Las
tapas miden --f-cap de ancho y todo el alto de la tira; el centro las solapa 1 px para que no quede costura */
html.wl-kx.wl-fiel {
--f-cap-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='40' viewBox='0 0 20 40'%3E%3Cpath d='M20 0H5.5Q1 0 2.6 3.8L7.6 15.6Q9.4 20 7.6 24.4L2.6 36.2Q1 40 5.5 40H20Z'/%3E%3C/svg%3E");
--f-cap-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='40' viewBox='0 0 20 40'%3E%3Cpath d='M0 0H14.5Q19 0 17.4 3.8L12.4 15.6Q10.6 20 12.4 24.4L17.4 36.2Q19 40 14.5 40H0Z'/%3E%3C/svg%3E");
--f-strip: var(--f-cap-l) left center / var(--f-cap, .9em) 100% no-repeat, var(--f-cap-r) right center / var(--f-cap, .9em) 100% no-repeat,
linear-gradient(#000, #000) center / calc(100% - 2 * var(--f-cap, .9em) + 2px) 100% no-repeat;
/* Tiritas de varias líneas: la muesca no se estira; se queda del tamaño de la de una cinta (18×36) en el centro del
canto, que arriba y abajo sigue recto. Las esquinas las redondea border-radius */
--f-strip-tall: var(--f-cap-l) left center / 18px 36px no-repeat, var(--f-cap-r) right center / 18px 36px no-repeat,
linear-gradient(#000, #000) left top / 18px calc(50% - 17px) no-repeat, linear-gradient(#000, #000) left bottom / 18px calc(50% - 17px) no-repeat,
linear-gradient(#000, #000) right top / 18px calc(50% - 17px) no-repeat, linear-gradient(#000, #000) right bottom / 18px calc(50% - 17px) no-repeat,
linear-gradient(#000, #000) center / calc(100% - 34px) 100% no-repeat; }
/* Tiritas: tiras de papel con los extremos cortados en zigzag (las del tema), sin contorno de tinta; el volumen lo da
un degradado tonal muy suave y el texto va en un tono oscuro de su propio color */
html.wl-kx.wl-fiel .wl-family .family-text { padding: 12px 34px 11px; border: 0; border-radius: 12px; clip-path: none; -webkit-mask: var(--f-strip-tall); mask: var(--f-strip-tall); box-shadow: none; rotate: -1deg;
background: linear-gradient(180deg, #fffaea, #f3e2b4) #f6eacb; color: #6b4a2e; }
html.wl-kx.wl-fiel body.wl-landing .wl .hero-char img { filter: drop-shadow(0 16px 18px rgba(8, 12, 40, .45)); }
html.wl-kx.wl-fiel .k-clip { display: none; }
html.wl-kx.wl-fiel .wl .k-lore { rotate: .8deg; }
/* Carta turquesa (como Memory Fragments): contorno teal oscuro, aro turquesa claro, cuerpo liso con una mancha tonal
arriba y los arcos suaves de las cartas; labio teal y sombra suave */
/* fiel2 (2 y 5): canto grueso (contorno de 5 px, aro claro de 9 px con su filete, labio de 10 px) y turquesa vivo: el
cuerpo baja de un teal luminoso a uno hondo y lleva un brillo arriba, como Memory Fragments; el texto cae ya en la
zona honda, así que se sigue leyendo en crema */
html.wl-kx.wl-fiel { --f-teal-rim: #62ecdb; --f-teal-o: #0a4f49; --f-teal-lip: #083f3a;
--f-teal-body: radial-gradient(120% 52% at 50% 0%, rgba(170, 255, 242, .5), rgba(170, 255, 242, 0) 62%),
linear-gradient(180deg, #1fb6a5 0%, #14968b 34%, #0e756e 72%, #0b625c 100%) #0e756e;
--f-teal-sh: inset 0 0 0 9px var(--f-teal-rim), inset 0 2px 0 9px #a8fff3, inset 0 0 0 11px rgba(6, 62, 57, .6), 0 10px 0 var(--f-teal-lip), 0 32px 46px -16px rgba(5, 10, 40, .65); }
html.wl-kx.wl-fiel body.wl-landing .wl .lore-card { z-index: 1; padding: 52px 34px 30px; border: 5px solid var(--f-teal-o); border-radius: 28px; color: #effdfa;
background: radial-gradient(circle at 0 100%, transparent 96px, rgba(160, 255, 240, .12) 97px 103px, transparent 104px),
radial-gradient(circle at 100% 100%, transparent 96px, rgba(160, 255, 240, .12) 97px 103px, transparent 104px), var(--f-teal-body);
box-shadow: var(--f-teal-sh); }
html.wl-kx.wl-fiel .wl .lore-card::before { display: none; }
/* Nombre en la cinta turquesa de las cartas (extremos doblados), cruzando el canto de arriba; letra blanca con contorno tonal */
html.wl-kx.wl-fiel body.wl-landing .wl .lore-card h3 { position: relative; display: block; width: fit-content; min-width: 190px; max-width: 100%; box-sizing: border-box;
margin: -92px auto 0; padding: 5px 26px 0; height: 74px; line-height: 66px; text-align: center; font-size: 40px; color: #fffdf4;
border-style: solid; border-width: 0 46px; border-image: url(kuxaan/fiel/ribbon-teal.webp) 0 44 fill / 0 46px stretch;
-webkit-text-stroke: .11em #16786f; paint-order: stroke fill; text-shadow: 0 .06em 0 #0f5f58; filter: drop-shadow(0 6px 6px rgba(5, 30, 40, .35)); }
html.wl-kx.wl-fiel .wl .lore-card .dlc { position: absolute; top: -8px; right: -30px; padding: 3px 9px 2px; border: 2px solid #c25e10; border-radius: 999px; background: #ff9a3c; color: #fff;
font-size: 13px; line-height: 1.2; letter-spacing: .06em; -webkit-text-stroke: 0; text-shadow: 0 1px 0 #a84a08; rotate: 8deg; box-shadow: 0 3px 0 #a84a08; }
/* Dato en la pastilla oscura de las cartas («+150»): miel sobre teal profundo */
html.wl-kx.wl-fiel body.wl-landing .wl .lore-card .meta { display: table; margin: 18px auto 14px; padding: 6px 18px 5px; clip-path: none; -webkit-mask: var(--f-strip); mask: var(--f-strip); border-radius: 0; rotate: -2deg;
background: linear-gradient(180deg, #ffdb6e, #ffc93d) #ffcf4a; color: #6b3d0c; box-shadow: none; letter-spacing: .12em; }
html.wl-kx.wl-fiel body.wl-landing .wl .lore-card p { color: #e6f8f4; }
html.wl-kx.wl-fiel body.wl-landing .wl .lore-card dt { color: #9debdf; }
html.wl-kx.wl-fiel body.wl-landing .wl .lore-card dd { color: #fffdf4; border-bottom: 2px dotted rgba(170, 245, 232, .3); }
/* Retratos: el hexágono del Kuxaan se queda (es del juego); sombra suave y nombres en pastillas crema tonales */
html.wl-kx.wl-fiel body.wl-landing .wl .face img { filter: drop-shadow(0 8px 8px rgba(8, 12, 40, .45)); }
html.wl-kx.wl-fiel body.wl-landing .wl .face span { border: 0; border-radius: 0; clip-path: none; -webkit-mask: var(--f-strip); mask: var(--f-strip); padding-left: 10px; padding-right: 10px; background: linear-gradient(180deg, #fffaea, #f1dfae) #f6eacb; color: #6b4a2e; box-shadow: none; }
html.wl-kx.wl-fiel body.wl-landing .wl .face.active span { background: linear-gradient(180deg, #ffdb6e, #ffc93d) #ffcf4a; color: #6b3d0c; }
/* ── 8. Comunidad: la misma carta turquesa; el sello y el matasellos se van y entra la insignia redonda de Discord del
menú principal (ic_round_discord); el Hântu de la esquina, sin troquelar ─────────────────────────────────────── */
html.wl-kx.wl-fiel body.wl-landing .wl-volcano .vbox { border: 5px solid var(--f-teal-o); border-radius: 28px; rotate: -.8deg;
background: radial-gradient(circle at 100% 100%, transparent 110px, rgba(160, 255, 240, .12) 111px 117px, transparent 118px), var(--f-teal-body);
box-shadow: var(--f-teal-sh); }
html.wl-kx.wl-fiel .k-stamp, html.wl-kx.wl-fiel .k-postmark, html.wl-kx.wl-fiel .k-cancel { display: none; }
html.wl-kx.wl-fiel .wl-volcano .vtag { padding: 7px 18px 6px; clip-path: none; -webkit-mask: var(--f-strip); mask: var(--f-strip); background: linear-gradient(180deg, #ffdb6e, #ffc93d) #ffcf4a; rotate: -3deg;
color: #6b3d0c; font-size: 12px; letter-spacing: .16em; filter: none; }
/* Titular sobre color: crema con contorno teal oscuro (y la miel con el suyo naranja) */
html.wl-kx.wl-fiel body.wl-landing .wl-volcano .vbox h2.k-poster { --kt: #0d534d; --ke: #0a3f3b; }
html.wl-kx.wl-fiel .wl-volcano .vbox p { color: #e6f8f4; }
html.wl-kx.wl-fiel .kf-badge { z-index: 3; top: -26px; right: 22px; width: 76px; height: 76px; border-radius: 50%; border: 3px solid var(--f-teal-o);
background: radial-gradient(80% 80% at 50% 28%, #8cf0e3, #45c8b8 70%) #45c8b8; box-shadow: inset 0 0 0 4px rgba(225, 255, 250, .45), 0 5px 0 var(--f-teal-lip), 0 14px 20px -6px rgba(5, 5, 20, .6);
display: grid; place-items: center; rotate: 8deg; }
html.wl-kx.wl-fiel .kf-badge i { font-size: 36px; color: #fffdf4; filter: drop-shadow(0 2px 0 #138073); }
html.wl-kx.wl-fiel .wl-volcano .k-vol-b { left: -84px; bottom: -62px; width: 124px; height: 124px; rotate: -8deg; }
html.wl-kx.wl-fiel .wl-volcano .discord-cta { border: 2px solid #3a44b8; box-shadow: inset 0 0 0 2px rgba(220, 225, 255, .3), 0 5px 0 #2a318f, 0 14px 20px -8px rgba(5, 5, 20, .6); }
html.wl-kx.wl-fiel .wl-volcano .discord-cta:hover { box-shadow: inset 0 0 0 2px rgba(220, 225, 255, .3), 0 7px 0 #2a318f, 0 18px 24px -8px rgba(5, 5, 20, .6); }
/* Redes como los iconos redondos del menú principal: turquesa, glifo crema, aro claro y labio */
html.wl-kx.wl-fiel .wl-volcano .socials a { border: 2px solid var(--f-teal-o); background: radial-gradient(80% 80% at 50% 28%, #7fe9da, #3fbcad 75%) #3fbcad; color: #fffdf4;
box-shadow: inset 0 0 0 2px rgba(225, 255, 250, .4), 0 3px 0 var(--f-teal-lip); }
html.wl-kx.wl-fiel .wl-volcano .socials a:hover { background: var(--f-honey); border-color: var(--f-honey-o); color: #5a3410; box-shadow: inset 0 0 0 2px rgba(255, 247, 210, .55), 0 3px 0 var(--f-honey-lip); }
html.wl-kx.wl-fiel .wl-volcano .steam-news { border-top: 2px solid rgba(170, 245, 232, .25); }
html.wl-kx.wl-fiel .wl-volcano .news-item img { border: 2px solid var(--f-teal-rim); border-radius: 8px; box-shadow: 0 3px 0 var(--f-teal-lip); }
/* ── 9. Combate: la pantalla es una carta de papel con el vídeo en el marco del juego (sin chinchetas); el árbol de
habilidades con contorno tonal y sin el aro de troquelado ─────────────────────────────────────────────────── */
html.wl-kx.wl-fiel .wl .arena .screen { border: 4.5px solid var(--f-card-o); border-radius: 24px;
box-shadow: inset 0 0 0 4px rgba(255, 251, 232, .95), inset 0 0 0 6px rgba(180, 132, 74, .35), 0 10px 0 var(--f-card-lip), 0 34px 50px -18px rgba(0, 0, 10, .7); rotate: -.6deg; }
html.wl-kx.wl-fiel .wl .arena .screen video { border: 5px solid var(--f-frame); border-radius: 14px; box-shadow: 0 0 0 2px var(--f-frame-o); }
html.wl-kx.wl-fiel .wl .k-pin { display: none; }
html.wl-kx.wl-fiel .wl .arena .now b { color: var(--f-honey); -webkit-text-stroke: .12em #c8661a; text-shadow: 0 .07em 0 #a3500f; }
html.wl-kx.wl-fiel .wl .arena .now span { color: var(--k-ink2); }
html.wl-kx.wl-fiel body.wl-landing .wl .arena .k-moves .moves { border: 3px solid #0b0a33;
box-shadow: inset 0 0 0 2px rgba(150, 160, 255, .3), 0 7px 0 #07061f, 0 34px 50px -18px rgba(0, 0, 10, .75); }
html.wl-kx.wl-fiel .wl .move-group h3 { clip-path: none; -webkit-mask: var(--f-strip); mask: var(--f-strip); border-radius: 0; padding: 4px 14px 3px; background: linear-gradient(180deg, #86e3d7, #5fd0c1) #6ad7c9; color: #0d4f48; box-shadow: none; }
html.wl-kx.wl-fiel .wl .move-group:nth-child(2) h3 { background: linear-gradient(180deg, #b8e877, #9cd94e) #a6e05a; color: #2a4f10; }
html.wl-kx.wl-fiel .wl .move-group:nth-child(3) h3 { background: linear-gradient(180deg, #ffb46a, #ff983c) #ffa04a; color: #5a2a06; }
html.wl-kx.wl-fiel .wl .move.on { border: 2px solid var(--f-honey-o); background: linear-gradient(180deg, #ffd96a, var(--f-honey)) var(--f-honey); color: #5a3410;
box-shadow: inset 0 2px 0 rgba(255, 250, 220, .6), 0 3px 0 var(--f-honey-lip); }
html.wl-kx.wl-fiel .wl .move.on::before { box-shadow: 0 0 0 2px #7a4a12, 0 0 12px 3px rgba(255, 236, 150, .9); }
html.wl-kx.wl-fiel .wl .move.on i { background: rgba(160, 90, 20, .3); }
html.wl-kx.wl-fiel .wl .k-moves-stk { top: -104px; width: 120px; height: 120px; rotate: -3deg; }
/* ── 10. Cierre: el póster brilla como una carta legendaria (sin cinta); la caja es el pergamino de los popups y los
premios van en el cuero del libro con sus cantoneras doradas (T_Book_base), sin matriz ni troquel ──────────── */
html.wl-kx.wl-fiel .wl .k-poster-wrap { rotate: -2deg; }
html.wl-kx.wl-fiel body.wl-landing .wl .buy .poster { border: 5px solid #ffe08a; border-radius: 16px;
position: relative; z-index: 1; box-shadow: 0 0 0 2.5px #c98a14, 0 9px 0 2.5px #a8700f, 0 40px 56px -16px rgba(0, 0, 10, .7); }
html.wl-kx.wl-fiel body.wl-landing .wl-final .box { padding: 40px 44px 46px; border: 0; border-radius: 30px; background: var(--f-paper9); box-shadow: none;
filter: drop-shadow(0 26px 26px rgba(0, 0, 10, .45)); }
html.wl-kx.wl-fiel body.wl-landing .wl-final .box h2.k-poster { --kt: #c8661a; --ke: #a3500f; color: #ffd04a; }
/* Los premios, en una tapa de cuero del libro dentro del pergamino (no una matriz troquelada pegada al canto) */
html.wl-kx.wl-fiel body.wl-landing .wl-final .final-laurels { margin: 24px 0 0; padding: 18px 20px 20px; border: 2px solid #3f2817; border-radius: 18px;
background: radial-gradient(120% 140% at 30% 0%, #86603f 0%, #6c4b2f 50%, #573a24 100%) #6c4b2f;
box-shadow: inset 0 2px 0 rgba(255, 225, 170, .2), 0 4px 0 #3f2817, 0 12px 18px -8px rgba(60, 30, 0, .45); }
html.wl-kx.wl-fiel body.wl-landing .wl-final .final-laurels::before, html.wl-kx.wl-fiel body.wl-landing .wl-final .final-laurels::after { display: none; }
/* Cantoneras del libro del Kuxaan (T_Book_base): redondeadas, miel y naranja, con su contorno tonal */
html.wl-kx.wl-fiel .wl-final .k-gold { left: -4px; bottom: -4px; width: 34px; height: 34px; clip-path: none; border-radius: 0 90% 0 18px;
background: radial-gradient(90% 90% at 30% 70%, #ffc94a, #f09a1c 62%, #d9780f) #f09a1c;
box-shadow: inset 0 0 0 2px #b8650f, inset 2px -2px 0 2px rgba(255, 230, 160, .35), 0 3px 4px rgba(0, 0, 0, .3); }
html.wl-kx.wl-fiel .wl-final .k-gold--br { left: auto; right: -4px; scale: -1 1; }
html.wl-kx.wl-fiel body.wl-landing .wl-req summary { border: 2px solid var(--f-paper-o); box-shadow: inset 0 0 0 2px var(--f-paper-in), 0 4px 0 var(--f-paper-lip), 0 14px 20px -8px rgba(0, 0, 10, .6); rotate: 0deg; }
html.wl-kx.wl-fiel body.wl-landing .wl-req[open] table { border: 3px solid var(--f-paper-o); }
/* ══ fiel2 ═════════════════════════════════════════════════════════════════════════════════════════════════ */
/* (1) Brillo de rareza del juego (UI\Rewards Screen\T_Card_Rarity_Glow.png, teñido de amarillo legendario) en 9 tramos:
las esquinas no se deforman y vale para cualquier proporción. En la textura el canto de la carta queda a 48 px del
borde exterior; a 0,8 de escala son 38 px. Y rayos de recompensa (VFX del juego, T_Tundra_02_Rays) girando muy
despacio detrás. Solo en cuatro piezas: ficha de la familia, póster, FREE DEMO de la cabecera y carta de Combate */
html.wl-kx.wl-fiel .kf-glow { z-index: 0; inset: -38px; border: 72px solid transparent; border-image: url(kuxaan/fiel/glow-rarity.webp) 90 / 72px stretch; }
html.wl-kx.wl-fiel .kf-rays { z-index: -1; left: 50%; top: 50%; width: var(--rs, 760px); height: var(--rs, 760px); translate: -50% -50%; opacity: var(--ro, .6);
background: url(kuxaan/fiel/rays.webp) center / contain no-repeat; animation: kf-spin 90s linear infinite; }
@keyframes kf-spin { to { rotate: 360deg; } }
html.wl-kx.wl-fiel.wl-static .kf-rays, html.wl-kx.wl-fiel.wl-static .wl .k-rays { animation: none; }
@media (prefers-reduced-motion: reduce) { html.wl-kx.wl-fiel .kf-rays, html.wl-kx.wl-fiel .wl .k-rays { animation: none; } }
/* Combate (Puntos clave): el abanico de CSS pasa a ser los rayos del juego; el brillo, dentro de la carta (su canto
exterior está 4,5 px fuera de la caja de relleno) */
html.wl-kx.wl-fiel .wl .k-rays { width: 980px; height: 980px; margin: -490px 0 0 -490px; opacity: .7; -webkit-mask: none; mask: none;
background: url(kuxaan/fiel/rays.webp) center / contain no-repeat; animation: kf-spin 120s linear infinite; }
html.wl-kx.wl-fiel .wl .c-battle > .kf-glow { z-index: -1; inset: -42.5px; }
/* Familia: rayos y brillo detrás de la ficha (dentro de .k-lore, que ya es su propio contexto de apilado) */
html.wl-kx.wl-fiel .wl .k-lore { --rs: 860px; --ro: .8; }
/* Póster del cierre */
html.wl-kx.wl-fiel .wl .k-poster-wrap { --rs: 980px; --ro: .85; }
html.wl-kx.wl-fiel .wl .k-poster-wrap > .kf-glow { inset: -36px; }
/* FREE DEMO de la cabecera: la caja se ajusta al botón para centrar los rayos; el brillo, solo alrededor del cuerpo
de la cinta (sin las hojas) y a menor escala */
html.wl-kx.wl-fiel body.wl-landing .wl-hero .cta-main { position: relative; z-index: 0; display: flex; width: fit-content; --rs: 600px; --ro: .95; }
html.wl-kx.wl-fiel .wl-hero .cta-main > .kf-glow { inset: -24px 26px -38px; border-width: 54px; border-image-width: 54px; }
html.wl-kx.wl-fiel .wl-hero .cta-main > a { position: relative; z-index: 1; }
/* (3) El arte rompe el marco, con recortes del juego sin troquelar */
/* Familia: el personaje elegido asoma por detrás del canto de arriba de su ficha (kx-fiel2.js pone --kf-char y lo
cambia con el selector). Queda a la derecha de la cinta del nombre y el cuerpo lo tapa la propia ficha */
/* Visibles ~125 px por encima del canto; lo que sobresale por la derecha por debajo del canto se recorta */
html.wl-kx.wl-fiel .kf-peek { z-index: 0; right: -22px; top: -118px; width: 250px; height: 172px; rotate: 6deg;
background: var(--kf-char) center top / 100% auto no-repeat; filter: drop-shadow(0 6px 8px rgba(5, 10, 40, .45));
clip-path: polygon(-20% -20%, 120% -20%, 120% 110px, calc(100% - 40px) 124px, calc(100% - 40px) 100%, -20% 100%); }
/* La cinta del nombre, el dato y el texto quedan por encima del aro encendido y del destello */
html.wl-kx.wl-fiel body.wl-landing .wl .lore-card > h3 { z-index: 7; }
html.wl-kx.wl-fiel .kf-peek.is-in { animation: kf-peek .6s var(--k-bounce) both; }
@keyframes kf-peek { from { translate: 0 60px; } }
html.wl-kx.wl-fiel.wl-static .kf-peek.is-in { animation: none; }
/* Combate: Lumie sale del marco del vídeo por la esquina de arriba (solo pisa vídeo, nunca el texto) */
html.wl-kx.wl-fiel .kf-pop { z-index: 5; left: -66px; top: -84px; width: 176px; height: 176px; rotate: -12deg;
background: url(kuxaan/fiel/hantu-lumie.webp) center / contain no-repeat; filter: drop-shadow(0 10px 10px rgba(0, 0, 20, .5)); }
/* El juego: un Hântu de las praderas encaramado a la esquina de arriba del pergamino, saliéndose por el lado (a la
izquierda del titular y por encima de la capitular) */
html.wl-kx.wl-fiel .kf-sit { z-index: 3; left: -40px; top: -92px; width: 132px; height: 132px; rotate: -8deg;
background: url(kuxaan/fiel/hantu-grassland02.webp) center / contain no-repeat; filter: drop-shadow(0 8px 8px rgba(60, 40, 10, .35)); }
/* (6) Al pasar el ratón, como al elegir recompensa: la carta sube con un rebote suave y crece un poco, cruza un destello
de luz y se enciende el aro (UI\Rewards Screen\T_Reward_On.png, en 9 tramos). Solo con :hover / :focus-within;
&wkxhover=… pone .kf-hover para capturarlo congelado */
html.wl-kx.wl-fiel { --kf-up: cubic-bezier(.3, 1.75, .5, 1); }
html.wl-kx.wl-fiel body.wl-landing .wl .card, html.wl-kx.wl-fiel .wl .k-lore {
transition: opacity .9s ease, transform .9s ease, translate .6s var(--kf-up), scale .6s var(--kf-up), rotate .45s var(--k-bounce), box-shadow .3s; }
html.wl-kx.wl-fiel body.wl-landing .wl .card:is(:hover, :focus-within, .kf-hover), html.wl-kx.wl-fiel .wl .k-lore:is(:hover, :focus-within, .kf-hover) {
transform: none; translate: 0 -12px; scale: 1.035; rotate: 0deg; }
html.wl-kx.wl-fiel body.wl-landing .wl .card:is(:hover, :focus-within, .kf-hover) { z-index: 3; box-shadow: var(--f-card-sh), 0 46px 60px -20px rgba(16, 30, 70, .55); }
/* Aro encendido: el canto exterior del aro, 2-3 px fuera del de la carta (textura a 0,8: aro a 21,6 px del borde) */
html.wl-kx.wl-fiel body.wl-landing .wl .card::before, html.wl-kx.wl-fiel body.wl-landing .wl .lore-card::before {
content: ""; display: block; position: absolute; z-index: 6; inset: -28.5px; height: auto; border: 56px solid transparent; border-radius: 0; background: none;
border-image: url(kuxaan/fiel/ring-on.webp) 70 / 56px stretch; opacity: 0; transition: opacity .25s ease; pointer-events: none; }
html.wl-kx.wl-fiel body.wl-landing .wl .lore-card::before { inset: -29px; }
/* Destello: una franja de luz que cruza la carta en diagonal, recortada a su canto */
html.wl-kx.wl-fiel body.wl-landing .wl .card::after, html.wl-kx.wl-fiel body.wl-landing .wl .lore-card::after {
content: ""; position: absolute; z-index: 5; inset: -4.5px; border-radius: 22px; pointer-events: none;
background: linear-gradient(105deg, rgba(255, 255, 255, 0) 40%, rgba(255, 253, 236, .38) 48%, rgba(255, 255, 255, .6) 50%, rgba(255, 253, 236, .38) 52%, rgba(255, 255, 255, 0) 60%) 150% 0 / 300% 100% no-repeat; }
/* Las estrellas de rareza de la carta de combate, por encima del aro y del destello */
html.wl-kx.wl-fiel .wl .k-stars { z-index: 7; }
html.wl-kx.wl-fiel body.wl-landing .wl .lore-card::after { inset: -5px; border-radius: 28px; }
html.wl-kx.wl-fiel body.wl-landing .wl .card:is(:hover, :focus-within, .kf-hover)::before,
html.wl-kx.wl-fiel .wl .k-lore:is(:hover, :focus-within, .kf-hover) .lore-card::before { opacity: 1; }
html.wl-kx.wl-fiel body.wl-landing .wl .card:is(:hover, :focus-within)::after,
html.wl-kx.wl-fiel .wl .k-lore:is(:hover, :focus-within) .lore-card::after { animation: kf-shine .85s ease-out .06s both; }
@keyframes kf-shine { from { background-position: 150% 0; } to { background-position: -50% 0; } }
/* Congelado para capturas: el destello a medio cruzar */
html.wl-kx.wl-fiel body.wl-landing .wl .card.kf-hover::after, html.wl-kx.wl-fiel .wl .k-lore.kf-hover .lore-card::after { animation: none; background-position: 36% 0; }
html.wl-kx.wl-fiel.wl-static body.wl-landing .wl .card, html.wl-kx.wl-fiel.wl-static .wl .k-lore { transition: none; }
@media (prefers-reduced-motion: reduce) {
html.wl-kx.wl-fiel body.wl-landing .wl .card:is(:hover, :focus-within, .kf-hover), html.wl-kx.wl-fiel .wl .k-lore:is(:hover, :focus-within, .kf-hover) { translate: none; scale: none; }
html.wl-kx.wl-fiel body.wl-landing .wl .card::after, html.wl-kx.wl-fiel body.wl-landing .wl .lore-card::after { display: none; }
}
/* ── Móvil ───────────────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
html.wl-kx.wl-fiel body.wl-landing .wl .wl-head .eyebrow { height: 34px; padding: 1px 32px 0; font-size: 11px; }
html.wl-kx.wl-fiel .wl-pitch .copy { padding: 36px 30px 40px; }
html.wl-kx.wl-fiel .wl-pitch .k-pitch-hex { right: -10px; bottom: -60px; }
html.wl-kx.wl-fiel .wl .trailer { border-width: 5px; border-radius: 16px; }
html.wl-kx.wl-fiel .wl .trailer img { border-radius: 11px; }
html.wl-kx.wl-fiel .wl .trailer .k-cap { bottom: -54px; }
html.wl-kx.wl-fiel body.wl-landing .wl .carousel img { border-width: 4px; border-radius: 10px; }
html.wl-kx.wl-fiel body.wl-landing .wl .k-lore .lore-card { padding: 46px 20px 24px; }
html.wl-kx.wl-fiel body.wl-landing .wl .lore-card h3 { margin-top: -78px; height: 58px; line-height: 52px; font-size: 30px; border-width: 0 34px; border-image-width: 0 34px; min-width: 160px; }
html.wl-kx.wl-fiel .kf-badge { width: 62px; height: 62px; top: -22px; right: 14px; }
html.wl-kx.wl-fiel .kf-badge i { font-size: 30px; }
html.wl-kx.wl-fiel .wl-volcano .k-vol-b { left: -18px; bottom: -50px; width: 96px; height: 96px; }
html.wl-kx.wl-fiel body.wl-landing .wl-final .box { padding: 32px 26px 44px; }
html.wl-kx.wl-fiel body.wl-landing .wl-final .final-laurels { margin: 22px 0 0; gap: 14px; }
/* fiel2: en móvil el personaje grande ya está justo encima de su ficha (asoma él mismo); el pequeño sobraría */
html.wl-kx.wl-fiel .kf-peek { display: none; }
html.wl-kx.wl-fiel body.wl-landing .wl-hero .cta-main { margin-left: auto; margin-right: auto; --rs: 440px; }
html.wl-kx.wl-fiel .wl .k-lore { --rs: 600px; }
html.wl-kx.wl-fiel .wl .k-poster-wrap { --rs: 620px; }
html.wl-kx.wl-fiel .wl .k-rays { width: 640px; height: 640px; margin: -320px 0 0 -320px; }
html.wl-kx.wl-fiel .kf-pop { left: -26px; top: -40px; width: 112px; height: 112px; }
html.wl-kx.wl-fiel .kf-sit { left: -12px; top: -42px; width: 80px; height: 80px; }
}
/* ══ Ajustes tras la revisión del usuario ══════════════════════════════════════════════════════════════════════ */
/* El brillo sigue la forma real de cada pieza (sus esquinas redondeadas, las hojas del botón): fuera la textura en 9
tramos, que es rectangular. En las cartas va en su propia sombra, así que también aparece y se desvanece con ellas
(si la pieza tiene fade-in, el brillo no se adelanta) */
html.wl-kx.wl-fiel .kf-glow { display: none; }
html.wl-kx.wl-fiel { --kf-glow-sh: 0 0 0 2px rgba(255, 234, 150, .8), 0 0 22px 5px rgba(255, 200, 60, .6), 0 0 56px 10px rgba(255, 180, 40, .28);
--kf-glow-hi: 0 0 0 2px rgba(255, 240, 170, .95), 0 0 28px 8px rgba(255, 205, 70, .75), 0 0 70px 14px rgba(255, 185, 45, .35); }
/* FREE DEMO: drop-shadow dibuja el halo alrededor de la silueta de la cinta, hojas incluidas */
html.wl-kx.wl-fiel .wl-hero .cta-main > a { filter: drop-shadow(0 0 4px rgba(255, 228, 120, .95)) drop-shadow(0 0 14px rgba(255, 190, 45, .65)); }
/* Carta de combate (Key points), ficha de la familia y póster */
html.wl-kx.wl-fiel body.wl-landing .wl .c-battle { box-shadow: var(--f-card-sh), var(--kf-glow-sh); }
html.wl-kx.wl-fiel body.wl-landing .wl .lore-card { box-shadow: var(--f-teal-sh), var(--kf-glow-sh); }
html.wl-kx.wl-fiel body.wl-landing .wl .buy .poster { box-shadow: 0 0 0 2.5px #c98a14, 0 9px 0 2.5px #a8700f, var(--kf-glow-sh), 0 40px 56px -16px rgba(0, 0, 10, .7); }
/* Los rayos esperan a que su pieza haya aparecido */
html.wl-kx.wl-fiel .kf-rays, html.wl-kx.wl-fiel .wl .k-rays { transition: opacity .9s ease; }
html.wl-kx.wl-fiel :has(> .reveal:not(.in)) > .kf-rays, html.wl-kx.wl-fiel .wl :has(> .c-battle.reveal:not(.in)) > .k-rays { opacity: 0; }
/* Al pasar el ratón: el aro encendido es la propia sombra de la carta (sigue su canto), no otra textura encima. Las
que ya brillan (combate y ficha) no ganan un segundo aro: solo brillan más */
html.wl-kx.wl-fiel body.wl-landing .wl .card::before, html.wl-kx.wl-fiel body.wl-landing .wl .lore-card::before { display: none; }
html.wl-kx.wl-fiel body.wl-landing .wl .card:is(:hover, :focus-within, .kf-hover) {
box-shadow: var(--f-card-sh), 0 0 0 3px #ffd84a, 0 0 18px 4px rgba(255, 205, 70, .55), 0 46px 60px -20px rgba(16, 30, 70, .55); }
html.wl-kx.wl-fiel body.wl-landing .wl .c-battle:is(:hover, :focus-within, .kf-hover) { box-shadow: var(--f-card-sh), var(--kf-glow-hi), 0 46px 60px -20px rgba(16, 30, 70, .55); }
html.wl-kx.wl-fiel .wl .k-lore:is(:hover, :focus-within, .kf-hover) .lore-card { box-shadow: var(--f-teal-sh), var(--kf-glow-hi); }
/* Galería: la captura bajo el ratón sube un poco, recupera su color y se le enciende el aro, como una carta elegida */
html.wl-kx.wl-fiel body.wl-landing .wl .carousel img { transition: transform .6s cubic-bezier(.2, 1, .3, 1), opacity .6s, filter .4s, translate .45s var(--kf-up), box-shadow .3s; }
html.wl-kx.wl-fiel body.wl-landing .wl .carousel img:is(:hover, .kf-hover) { translate: 0 -10px; filter: none !important;
box-shadow: 0 0 0 2px var(--f-frame-o), 0 0 0 5px #ffd84a, 0 0 22px 6px rgba(255, 205, 70, .55), 0 30px 40px -14px rgba(16, 30, 70, .55); }
html.wl-kx.wl-fiel.wl-static body.wl-landing .wl .carousel img { transition: none; }
@media (prefers-reduced-motion: reduce) { html.wl-kx.wl-fiel body.wl-landing .wl .carousel img:is(:hover, .kf-hover) { translate: none; } }
/* ── Libro cerrado («Coming soon»): pergamino de los popups con el candado del Kuxaan en su hexágono, la tirita de miel
y el botón de wishlist; mientras tanto, fuera la nota «¡es interactivo!» ───────────────────────────────────────── */
html.wl-kx.wl-fiel.wl-book-locked .k-note--book { display: none; }
html.wl-kx.wl-fiel .wl-soon { display: flex; justify-content: center; padding: 10px 16px 30px; }
html.wl-kx.wl-fiel .wl-soon-card { position: relative; width: min(640px, 100%); box-sizing: border-box; padding: 64px 52px 46px; text-align: center; background: var(--f-paper9); filter: drop-shadow(0 18px 26px rgba(16, 30, 70, .3)); }
html.wl-kx.wl-fiel .wl-soon-lock { position: absolute; left: 50%; top: -46px; width: 92px; height: 104px; translate: -50% 0;
background: url(../../../wilderings-encyclopedia/assets/kuxaan/lock.webp) center 54% / 46% auto no-repeat, url(../../../wilderings-encyclopedia/assets/kuxaan/hex.webp) center / contain no-repeat;
filter: drop-shadow(0 6px 6px rgba(90, 60, 20, .35)); }
html.wl-kx.wl-fiel .wl-soon-tag { display: inline-block; padding: 6px 20px 5px; -webkit-mask: var(--f-strip); mask: var(--f-strip); rotate: -2deg;
background: linear-gradient(180deg, #ffdb6e, #ffc93d) #ffcf4a; color: #6b3d0c; font: 700 12px/1.2 "Averia Libre", Georgia, serif; letter-spacing: .14em; text-transform: uppercase; }
html.wl-kx.wl-fiel .wl-soon-card h3 { margin: 14px 0 10px; color: var(--k-ink); font: 700 30px/1.15 "Averia Libre", Georgia, serif; }
html.wl-kx.wl-fiel .wl-soon-card p { margin: 0 auto 24px; max-width: 470px; color: var(--k-ink2); font-size: 16px; line-height: 1.55; text-wrap: pretty; }
@media (max-width: 600px) {
html.wl-kx.wl-fiel .wl-soon-card { padding: 58px 26px 36px; }
html.wl-kx.wl-fiel .wl-soon-card h3 { font-size: 24px; }
}/* Abi, de pie sobre la esquina de arriba a la derecha de la tarjeta (sin tapar el titular) */
html.wl-kx.wl-fiel .wl-soon-card .k-abi { right: -58px; bottom: auto; top: -196px; }
@media (max-width: 600px) { html.wl-kx.wl-fiel .wl-soon-card .k-abi { right: 14px; top: -132px; } }
/* ── Cabecera: logo, FREE DEMO, enlace de Steam y etiquetas sobre un mismo eje central, y los rayos del botón recogidos
(más pequeños y desvanecidos en círculo, para que giren sin cambiar de forma) y por debajo del logo ─────────────── */
html.wl-kx.wl-fiel body.wl-landing .wl-hero .hero-content { display: flex; flex-direction: column; align-items: center; text-align: center; }
html.wl-kx.wl-fiel body.wl-landing .wl-hero .hero-title { position: relative; z-index: 1; }
html.wl-kx.wl-fiel body.wl-landing .wl-hero .cta-main { --rs: 460px; --ro: .8; }
html.wl-kx.wl-fiel .wl-hero .cta-main > .kf-rays { -webkit-mask: radial-gradient(closest-side, #000 35%, transparent 100%); mask: radial-gradient(closest-side, #000 35%, transparent 100%); }
html.wl-kx.wl-fiel body.wl-landing .wl-hero .steam-install { margin-top: 16px; }
html.wl-kx.wl-fiel body.wl-landing .wl-hero .hero-links { justify-content: center; }
html.wl-kx.wl-fiel body.wl-landing .wl-hero .hero-content > * { max-width: 100%; }
/* Idiomas sin glifos en Averia Libre (la fuente del juego solo trae el latín básico): en polaco, turco y ruso, Marmelad,
como el libro (la define el kit de la enciclopedia en --wenc-kit-font, con las cifras en Averia), para que ninguna
palabra mezcle dos letras. Las notas a mano siguen en Amatic SC, que sí tiene esos glifos */
html:is(:lang(pl), :lang(tr), :lang(ru)) body.wl-landing .wl :not(i):not(.k-note):not(.k-note *):not(.k-cap):not(.k-cap *),
html:is(:lang(pl), :lang(tr), :lang(ru)) .wl-soon-card * { font-family: var(--wenc-kit-font, "Marmelad", Georgia, serif) !important; }
html:lang(zh) body.wl-landing .wl :not(i), html:lang(zh) .wl-soon-card * { font-family: "Averia Libre", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", sans-serif !important; }
html:lang(zh-TW) body.wl-landing .wl :not(i), html:lang(zh-TW) .wl-soon-card * { font-family: "Averia Libre", "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", "Noto Sans CJK TC", sans-serif !important; }
html:lang(ja) body.wl-landing .wl :not(i), html:lang(ja) .wl-soon-card * { font-family: "Averia Libre", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", "Noto Sans JP", sans-serif !important; }
html:lang(ko) body.wl-landing .wl :not(i), html:lang(ko) .wl-soon-card * { font-family: "Averia Libre", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif !important; }
/* Sin capitular en chino, japonés y coreano: la primera «letra» suele ser un signo como 《 */
html:is(:lang(zh), :lang(ja), :lang(ko)).wl-kx .wl-pitch .copy p.lead:first-of-type::first-letter { float: none; margin: 0; font-size: inherit; line-height: inherit; font-weight: inherit; color: inherit; -webkit-text-stroke: 0; text-shadow: none; }
/* Citas de prensa de la cinta: en móvil, una cada vez en el mismo hueco, con fundido y puntos (landing.js las mete en
.wl-quotes); en escritorio el contenedor no existe para la maqueta */
.wl-proof .wl-quotes { display: contents; }
.wl-proof .wl-quotes-dots { display: none; }
@media (max-width: 767px) {
html.wl-kx body.wl-landing .wl-proof .wl-quotes { display: grid; width: min(340px, 100%); }
html.wl-kx body.wl-landing .wl-proof .wl-quotes blockquote { grid-area: 1 / 1; width: auto; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s linear .6s; }
html.wl-kx body.wl-landing .wl-proof .wl-quotes blockquote.is-on { opacity: 1; visibility: visible; transition: opacity .6s ease; }
html.wl-kx body.wl-landing .wl-proof .wl-quotes-dots { display: flex; grid-area: 2 / 1; justify-content: center; gap: 10px; margin-top: 18px; }
html.wl-kx body.wl-landing .wl-proof .wl-quotes-dots button { width: 9px; height: 9px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: rgba(90, 55, 15, .35); cursor: pointer; }
html.wl-kx body.wl-landing .wl-proof .wl-quotes-dots button[aria-current="true"] { background: #b8650f; }
}
/* Redes: la fuente de Font Awesome de PlayerX no trae los glifos de X ni de TikTok (salían botones vacíos); van sus
logos en SVG como máscara, del color del icono */
.wl .socials .fa-x-twitter::before, .wl .socials .fa-tiktok::before { content: ""; display: inline-block; width: 1em; height: 1em; vertical-align: -.125em; background: currentColor;
-webkit-mask: var(--wl-ico) center / contain no-repeat; mask: var(--wl-ico) center / contain no-repeat; }
.wl .socials .fa-x-twitter { --wl-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z'/%3E%3C/svg%3E"); }
.wl .socials .fa-tiktok { --wl-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z'/%3E%3C/svg%3E"); }
@media (max-width: 767px) {
html.wl-kx.wl-fiel body.wl-landing .wl-hero .hero-content { width: 100%; box-sizing: border-box; }
html.wl-kx.wl-fiel body.wl-landing .wl-hero .cta-main { --rs: 380px; }
}