/* ============================================================ CAPAS DE LAS PANTALLAS DEL JUEGO · hoja COMPARTIDA ============================================================ La usan DOS sitios y por eso vive aparte: · juego/index.php — la portada de verdad · admin/piezas.php — la vista previa del editor Antes cada uno tenía sus reglas y acababan diciendo cosas distintas: el dueño acomodaba mirando una cosa y en el juego salía otra. Con un solo archivo eso no puede volver a pasar. OJO: los selectores cuelgan de `#inicioCard .gc--capas`, así que el editor envuelve su lienzo con ese id y esa clase aunque no sea la portada. Lo que NO está aquí: las proporciones de cada dispositivo, que salen de la configuración del dueño y se emiten en línea desde juego/index.php. ============================================================ */ #inicioCard .gc--capas .cap{position:absolute;margin:0;} #inicioCard .gc:not(.gc--capas) .cap{display:none;} /* Capa de VIDEO (fondo animado: el escenario del celular). Llena su hueco; los datos vivos van encima por su z-index. */ #inicioCard .gc--capas .cap--vid{overflow:hidden;pointer-events:none;} #inicioCard .gc--capas .cap--vid video{width:100%;height:100%;object-fit:cover;display:block;} /* Cada bloque vivo llena su hueco y suelta lo que traiga de la maquetación anterior: bordes, fondos y márgenes ya los pone el arte. */ #inicioCard .gc--capas .cap > *{position:static !important; margin:0 !important;width:100% !important;height:100% !important; max-width:none !important;min-height:0 !important;padding:0 !important; border:0 !important;background:none !important;box-shadow:none !important; font-size:1em !important;} #inicioCard .gc--capas .cap > *::before, #inicioCard .gc--capas .cap > *::after{content:none !important;} /* ── Con su aspecto de siempre ── Por norma un bloque entra en su hueco desnudo: sin fondo ni borde, porque esa caja la pone el arte del dueño. Pero el botón dorado y las fichas ya vienen dibujados en código, y mientras no haya arte para ellos vale más conservarlo que dejar una palabra suelta. Esta clase les devuelve lo suyo. */ #inicioCard .gc--capas .cap--nativo > *{background:revert !important; border:revert !important;box-shadow:revert !important;padding:revert !important;} /* ═════ EL BOTÓN DE JUGAR ═════ Igualado a la referencia del dueño: el dorado tira a NARANJA, no a amarillo limón. Tres capas hacen el volumen — aro claro por fuera, degradado cálido dentro y un filo blanco arriba — y la palabra lleva contorno ámbar, como el resto de la rótulación del juego. Es el único botón de la pantalla: tiene que ganarle a las cinco fichas. */ /* EL ORO DE LA CASA. Lo llevan el boton de jugar y la cifra de alitas, y por eso vive en una variable: son la misma marca, no dos amarillos parecidos que hay que acordarse de retocar a la vez. */ #inicioCard .gc--capas{--oro:#FFC02B;--oro-claro:#FFD64A;--oro-hondo:#F0850A;} #inicioCard .gc--capas .cap--nativo.cap--boton > *{ /* ¡position con !important! La regla que desnuda los bloques fija `position:static`, y con el boton estatico el destello se colgaba del HUECO en vez del boton: `overflow:hidden` no recorta a un hijo absoluto cuyo bloque contenedor esta mas arriba, y el brillo se sale por toda la tarjeta. */ position:relative !important;overflow:hidden !important; background:linear-gradient(180deg, var(--oro-claro) 0%, var(--oro) 38%, #FBA015 72%, var(--oro-hondo) 100%) !important; border:.16em solid #FBB024 !important; /* aro claro, como en la referencia */ border-radius:99px !important; box-shadow: 0 0 0 .06em #C86A06, /* filo fino que lo recorta del morado */ inset 0 .09em 0 rgba(255,255,255,.72), /* luz de arriba */ inset 0 -.11em .16em rgba(196,96,4,.42),/* sombra interior de abajo */ 0 .12em 0 #B85E05, /* canto */ 0 .22em .3em rgba(59,30,8,.32) !important; /* La palabra va en la MISMA tinta marron que el resto de la tarjeta. En crema daba 1.5:1 de contraste sobre el dorado — practicamente ilegible — y ademas no pertenecia a ninguna familia: el panel entero esta escrito en tinta. Asi da 9.3:1 y se lee como parte del mismo juego de letras. El filo claro de abajo la deja hundida en el metal, como los numeros de las metas sobre la crema. Nada de negro puro: en esta portada no existe. */ color:#3B1E08 !important; -webkit-text-stroke:0; text-shadow:0 .055em 0 rgba(255,240,190,.8) !important;} #inicioCard .gc--capas .cap--nativo.cap--boton > * *{color:inherit !important;} /* El destello. Antes era un barrido estrecho y rápido que apenas se veía; ahora es más ancho, entra en diágonal y descansa entre pasada y pasada — un botón que brilla sin parar cansa y deja de leerse como llamada. */ #inicioCard .gc--capas .cap--nativo.cap--boton > *::after{ content:'' !important;position:absolute;top:-30%;bottom:-30%;left:0;width:38%; pointer-events:none; background:linear-gradient(100deg,transparent,rgba(255,255,255,.9),transparent); transform:translateX(-220%) skewX(-18deg); animation:cpBrillo 5s cubic-bezier(.35,0,.25,1) infinite;} @keyframes cpBrillo{ 0%,62% {transform:translateX(-220%) skewX(-18deg)} 86%,100%{transform:translateX(420%) skewX(-18deg)}} @media(prefers-reduced-motion:reduce){ #inicioCard .gc--capas .cap--nativo.cap--boton > *::after{animation:none;opacity:0;}} #inicioCard .gc--capas .cap--nativo.cap--boton > *:active{transform:translateY(.06em);} #inicioCard .gc--capas .cap--nativo.cap--fichas .tile{ background:rgba(255,255,255,.10) !important; border:.06em solid rgba(255,255,255,.28) !important;} /* Los bloques vienen del diseño anterior con su propia píldora: fondo, borde y sombra. Dentro de un hueco todo eso sobra — la caja la pone el arte. */ #inicioCard .gc--capas .cap .ms-point, #inicioCard .gc--capas .cap .ms-dot, #inicioCard .gc--capas .cap .pl-hoy, #inicioCard .gc--capas .cap .pl-cta{background:none !important;border:0 !important; box-shadow:none !important;backdrop-filter:none !important;} /* La cifra grande: oro con CONTORNO NEGRO (pedido del dueño) y una gota de sombra debajo. paint-order:stroke pinta el trazo POR FUERA del relleno — sin eso el contorno se come el glifo. El trazo hereda al numero movido. */ #inicioCard .gc--capas .cap--total b, #inicioCard .gc--capas .cap--num_alitas{background:none !important; color:var(--oro) !important;-webkit-text-fill-color:var(--oro) !important; font-family:var(--disp);font-weight:400; -webkit-text-stroke:.045em #000;paint-order:stroke fill; text-shadow:0 .07em 0 rgba(0,0,0,.4);} /* La etiqueta suelta (hueco «etq_alitas») viste igual que la de dentro del total: versalitas condensadas y espaciadas. Sin esto salía en minúsculas y sin estilo, distinta a la de PC. */ #inicioCard .gc--capas .cap--etq_alitas > *, #inicioCard .gc--capas .cap--etq_alitas{font-family:var(--cond);font-weight:900; letter-spacing:.07em;text-transform:uppercase;line-height:1.1; color:var(--etq) !important;} /* El diseño anterior fija tamaños con selectores por id (#msPoints, #msPlays…) que pesan más que estos. Dentro de un hueco el tamaño lo decide el dueño desde el editor, y de ahí el !important: sin esto la letra salía al doble y los bloques se desbordaban unos sobre otros. */ #inicioCard .gc--capas .cap *{font-size:inherit !important;line-height:1.15;} #inicioCard .gc--capas .cap--metas .ms-point{height:100% !important;} /* Dentro del hueco, el bloque de metas son SOLO los numeros: el arte del dueno ya dibuja los iconos, y el punto vivo los duplicaba. Un numero por ficha, centrado en su tercio (space-around cae justo en el centro de cada una). */ #inicioCard .gc--capas .cap--metas .ms-dot{display:none !important;} #inicioCard .gc--capas .cap--metas .ms-point{opacity:1 !important;transform:none !important;} #inicioCard .gc--capas .cap--metas > #msPoints{justify-content:space-around !important; align-items:center;height:100%;margin:0 !important;gap:0 !important;} /* Con DOS ids para ganarle a `#inicioCard .gc #msPoints .ms-num` (tamano 3.4cqw y cafe clavados): dentro del hueco mandan el tamano y el color que el dueno elija en el editor. La voz es Anton, como toda cifra del marcador. */ #inicioCard .gc--capas .cap--metas #msPoints .ms-num{ font-size:inherit !important;color:inherit !important; font-family:var(--disp) !important;font-weight:400 !important; letter-spacing:.01em;line-height:1;} /* --etq: el color de las etiquetas de APOYO (PARTIDAS DE HOY, BIENVENIDO, NIVEL/RACHA). Antes iban en la tinta cafe con opacidad al ~50% y se leian grises; el dueno las quiere en negro pleno. En la variante clara siguen en crema: negro sobre arte oscuro no se veria. */ #inicioCard .gc--capas .cap--osc{color:#3B1E08;--cap-ac:#C95E08;--cap-su:#8A5A2E; --etq:#000; /* --cta: el rojo de la invitacion, MUESTREADO del liston WIN REWARDS (win-r.webp). Combina porque ya vive en la tarjeta como color de premio, y llama mas: 4.91:1 sobre la crema real contra 3.13:1 del naranja. */ --cta:#C00000;} #inicioCard .gc--capas .cap--clr{--etq:#FFF6E2; color:#FFF6E2;--cap-ac:#F6A400;--cap-su:#D8C39A; text-shadow:0 .06em 0 rgba(8,12,24,.55);} #inicioCard .gc--capas .cap *{color:inherit !important;} #inicioCard .gc--capas .cap .ico, #inicioCard .gc--capas .cap svg{color:var(--cap-ac) !important;} /* Una ficha colocada sobre el icono del dueño: el botón ocupa todo el hueco y no pinta nada, para que se vea el dibujo de abajo y el clic siga funcionando. El texto se oculta — la palabra ya está dibujada en el icono. */ #inicioCard .gc--capas .cap[data-que^="ficha_"] > *{background:none !important; border:0 !important;box-shadow:none !important;font-size:0 !important; padding:0 !important;min-height:0 !important;} /* Con el nombre debajo: para iconos dibujados SIN la palabra dentro. Al ser texto vivo se traduce solo, y por eso basta un acomodo para los dos idiomas. */ #inicioCard .gc--capas .cap--conrotulo > *{display:flex !important; flex-direction:column;align-items:center;justify-content:flex-end; font-size:.34em !important;font-weight:900;letter-spacing:.08em; text-transform:uppercase;line-height:1;padding-bottom:.25em !important; color:var(--cap-ac) !important;} #inicioCard .gc--capas .cap[data-que^="ficha_"] > * i, #inicioCard .gc--capas .cap[data-que^="ficha_"] > * svg{display:none !important;} #inicioCard .gc--capas .cap[data-que^="ficha_"] > * b{position:absolute;right:0;top:0; font-size:.5rem;} #inicioCard .gc--capas .cap[data-que^="ficha_"] > *:active{transform:scale(.96);} /* ═════ EL ICONO RESPONDE AL RATÓN ═════ La ficha que recibe el clic es transparente y va ENCIMA del icono; son dos capas distintas. Para que al señalar se mueva el dibujo —y no un rectángulo invisible— el JS empareja cada ficha con el icono que tiene debajo y le pone esta clase. Se usan `translate` y `scale` sueltos, no `transform`: así se suman al giro que el dueño le haya puesto a la capa en vez de borrarlo. */ #inicioCard .gc--capas .cap--img{transition:translate .16s ease-out, scale .16s ease-out, filter .16s ease-out;} #inicioCard .gc--capas .cap--img.resalta{translate:0 -6%;scale:1.07; filter:drop-shadow(0 .12em .16em rgba(59,30,8,.38)) brightness(1.06);} #inicioCard .gc--capas .cap--img.hunde{translate:0 -1%;scale:1.01;} @media(prefers-reduced-motion:reduce){ #inicioCard .gc--capas .cap--img{transition:none;} #inicioCard .gc--capas .cap--img.resalta{translate:0;scale:1;}} /* ═════ MOVIMIENTO POR CAPA ═════ Poco y con criterio. Lo que delata una portada barata no es el movimiento sino que TODO se mueva a la vez y con el mismo ritmo: por eso cada capa lleva su propio retardo y los ciclos no son múltiplos entre sí — nunca vuelven a coincidir y el conjunto parece vivo en vez de mecánico. */ :root{--cp-flota:3.2s; --cp-late:2.4s; --cp-mece:4.7s; --cp-cabecea:5.3s; --cp-respira:6.1s; --cp-asoma:.9s;} /* BRILLA — destello que recorre una PIEZA de arte. La banda de luz vive en un ::after cuyo MASK es la propia imagen (--pz): brilla el dibujo — la alita, el diamante, la copa — y nunca los huecos transparentes entre fichas. Mismo compás que cpBrillo: barre y descansa. Sirve igual en el juego (.cap--brilla) y en el editor (.ed-capa-v.mv-brilla). */ #inicioCard .gc--capas .cap--brilla::after, .ed-capa-v.mv-brilla::after{content:'';position:absolute;inset:0;pointer-events:none; background:linear-gradient(100deg, transparent 40%, rgba(255,255,255,.55) 47%, rgba(255,255,255,.95) 50%, rgba(255,255,255,.55) 53%, transparent 60%); background-size:300% 100%;background-position:150% 0; -webkit-mask:var(--pz) center/100% 100% no-repeat; mask:var(--pz) center/100% 100% no-repeat; /* overlay: la luz apenas roza lo claro (la caja crema) y ENCIENDE los tonos medios saturados — el oro del ala, el morado de la gema, la plata de la copa. Brilla el dibujo, no el rectangulo. */ mix-blend-mode:overlay; animation:cpBrilloArte 5s cubic-bezier(.35,0,.25,1) var(--espera,1.6s) infinite;} @keyframes cpBrilloArte{ 0%,62% {background-position:150% 0} 86%,100%{background-position:-150% 0}} @media(prefers-reduced-motion:reduce){ #inicioCard .gc--capas .cap--brilla::after, .ed-capa-v.mv-brilla::after{animation:none;opacity:0;}} @keyframes cpFlota{0%,100%{transform:translateY(-3%)}50%{transform:translateY(3%)}} @keyframes cpLate {0%,100%{transform:scale(1)}50%{transform:scale(1.05)}} @keyframes cpMece {0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}} /* Cabecea: flota Y se inclina un poco. Para el logo y las piezas colgadas. */ @keyframes cpCabecea{0%,100%{transform:translateY(-2%) rotate(-1.4deg)} 50% {transform:translateY(2%) rotate(1.4deg)}} /* Respira: apenas se nota. Para fondos y adornos grandes que no deben distraer. */ @keyframes cpRespira{0%,100%{transform:scale(1)}50%{transform:scale(1.022)}} /* Asoma: UNA vez al cargar, con rebote. Es entrada, no bucle. */ @keyframes cpAsoma{0%{transform:scale(.82);opacity:0} 62%{transform:scale(1.04);opacity:1} 100%{transform:scale(1);opacity:1}} #inicioCard .gc--capas .cap[style*="cpAsoma"]{animation-iteration-count:1 !important; animation-fill-mode:both !important;} @media(prefers-reduced-motion:reduce){ #inicioCard .gc--capas .cap{animation:none !important;} } /* Un valor suelto es UNA cosa: se centra en su hueco, no se parte en dos líneas y llena el alto que le tocó. */ #inicioCard .gc--capas .cap--atomo > *{display:flex !important;align-items:center; justify-content:center;line-height:1;white-space:nowrap;font-size:1em !important;} #inicioCard .gc--capas .cap--atomo.cap--al-izq > *{justify-content:flex-start;} #inicioCard .gc--capas .cap--atomo.cap--al-der > *{justify-content:flex-end;} /* La cifra grande arrastraba un recorte de degradado del diseño anterior que la dejaba como una píldora: aquí manda el color liso que eligió el dueño. */ #inicioCard .gc--capas .cap--atomo b, #inicioCard .gc--capas .cap--atomo span{background:none !important; -webkit-text-fill-color:currentColor !important; -webkit-background-clip:border-box !important;background-clip:border-box !important; filter:none !important;padding:0 !important;} /* Un texto escrito por el dueño no envuelve a nada: lleva su frase dentro, así que la alineación va en la propia caja y no en un hijo. */ #inicioCard .gc--capas .cap--libre{display:flex;align-items:center;justify-content:center; text-align:center;line-height:1.15;overflow:hidden;} #inicioCard .gc--capas .cap--libre.cap--al-izq{justify-content:flex-start;text-align:left;} #inicioCard .gc--capas .cap--libre.cap--al-der{justify-content:flex-end;text-align:right;} #inicioCard .gc--capas .cap--libre.cap--al-extremos{justify-content:space-between;} /* La letra elegida manda sobre TODO el bloque, incluido lo que traiga su propia fuente: si no, elegir Anton para las alitas cambiaba la etiqueta pero no la cifra, y no se entendía por qué. */ #inicioCard .gc--capas .cap--f-disp{font-family:var(--disp);font-weight:400;} #inicioCard .gc--capas .cap--f-cond{font-family:var(--cond);font-weight:900;} #inicioCard .gc--capas .cap--f-body{font-family:var(--body);font-weight:700;} /* El grosor tambien se hereda. Si no, un o un se pone en 700 por su cuenta — y como Anton solo tiene un grosor, el navegador lo ENGORDA a la fuerza y sale una letra distinta de la que se acomodo en el editor. */ #inicioCard .gc--capas .cap--f-disp *, #inicioCard .gc--capas .cap--f-cond *, #inicioCard .gc--capas .cap--f-body *{font-family:inherit !important;} /* Anton tiene UN solo grosor: cualquier de dentro le pediría 700 y el navegador lo engordaría a la fuerza, con una letra que no existe. */ #inicioCard .gc--capas .cap--f-disp *{font-weight:400 !important;} #inicioCard .gc--capas .cap--al-izq > *{justify-content:flex-start !important;text-align:left !important;} #inicioCard .gc--capas .cap--al-centro > *{justify-content:center !important;text-align:center !important;} #inicioCard .gc--capas .cap--al-der > *{justify-content:flex-end !important;text-align:right !important;} #inicioCard .gc--capas .cap--al-extremos > *{justify-content:space-between !important;} /* Adornos elegidos por bloque. Van con !important porque el diseño anterior fija peso y decoración con selectores por id, que pesan más. */ #inicioCard .gc--capas .cap--negrita, #inicioCard .gc--capas .cap--negrita *{font-weight:900 !important;} #inicioCard .gc--capas .cap--sub, #inicioCard .gc--capas .cap--sub *{text-decoration:underline !important;} #inicioCard .gc--capas .cap--tach, #inicioCard .gc--capas .cap--tach *{text-decoration:line-through !important;} #inicioCard .gc--capas .cap--mayus, #inicioCard .gc--capas .cap--mayus *{text-transform:uppercase !important;} /* El contorno de tinta es lo que hace que un texto claro se lea encima de cualquier arte. `paint-order` lo manda detrás de la letra, si no se come los trazos finos. */ #inicioCard .gc--capas .cap--trazo1, #inicioCard .gc--capas .cap--trazo1 *{-webkit-text-stroke:.035em #2B0508;paint-order:stroke fill;} #inicioCard .gc--capas .cap--trazo2, #inicioCard .gc--capas .cap--trazo2 *{-webkit-text-stroke:.07em #2B0508;paint-order:stroke fill;} /* Un color propio manda sobre el par claro/oscuro y sobre lo que traiga dentro. */ #inicioCard .gc--capas .cap[style*="color:#"] *{color:inherit !important;} /* ── cómo se acomoda por dentro cada bloque ── */ #inicioCard .gc--capas .cap--cabecera > *{display:flex;align-items:center; justify-content:space-between;font-family:var(--cond);font-weight:900; letter-spacing:.06em;text-transform:uppercase;} #inicioCard .gc--capas .cap--cabecera .sp-title, #inicioCard .gc--capas .cap--cabecera .sp-best{display:flex;align-items:center;gap:.3em; white-space:nowrap;} #inicioCard .gc--capas .cap--total > *{display:flex;align-items:baseline;gap:.4em;} /* La cifra en el oro del boton: son las dos piezas que mandan en la tarjeta y tienen que hablar el mismo idioma. Sigue ganando el color que el dueno elija en el editor — esto es solo el punto de partida. */ #inicioCard .gc--capas .cap--total b{font-family:var(--disp);font-weight:400; font-size:2.5em !important;line-height:.9;color:var(--oro) !important; -webkit-text-fill-color:currentColor !important; -webkit-background-clip:border-box !important;background-clip:border-box !important; filter:none !important;width:auto !important;height:auto !important;} #inicioCard .gc--capas .cap--total span{font-family:var(--cond);font-weight:900; letter-spacing:.07em;text-transform:uppercase;font-size:.85em !important; width:auto !important;height:auto !important;line-height:1.1;} #inicioCard .gc--capas .cap--barra > *{border-radius:99px;overflow:hidden; background:rgba(59,30,8,.18) !important;} #inicioCard .gc--capas .cap--clr.cap--barra > *{background:rgba(255,255,255,.22) !important;} #inicioCard .gc--capas .cap--barra #msFill{width:auto;height:100% !important;border-radius:99px; background:linear-gradient(90deg,#57C452,#2E9E44) !important;} #inicioCard .gc--capas .cap--meta > *{display:flex;align-items:center;gap:.35em; font-family:var(--cond);font-weight:900;white-space:nowrap;} #inicioCard .gc--capas .cap--meta em{font-style:normal;color:var(--cap-su) !important;} #inicioCard .gc--capas .cap--metas > *{display:flex;align-items:center; justify-content:space-between;} #inicioCard .gc--capas .cap--metas .ms-point{flex:1 1 0;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:.1em;opacity:1;} #inicioCard .gc--capas .cap--metas .ms-dot{font-size:0;line-height:0;filter:none;transform:none;} #inicioCard .gc--capas .cap--metas .ms-dot svg{width:1.5em;height:1.5em;display:block;} #inicioCard .gc--capas .cap--metas .ms-point:not(.reached):not(.next) .ms-dot svg{opacity:.45;} #inicioCard .gc--capas .cap--metas .ms-num{font-family:var(--cond);font-weight:900;font-size:1em;} #inicioCard .gc--capas .cap--metas .ms-point.done .ms-num{color:#1F7A33 !important;} /* ═════ EL MARCADOR ═════ Tres piezas que antes competian entre si. Ahora cada una tiene un papel y se distingue por FORMA, no solo por tamaño: · la cifra manda, y va en la voz de los títulos (Anton) · la etiqueta se aparta: versalitas finas, muy espaciadas y a media tinta · la invitación se vuelve una ficha con contorno — se lee como algo que se pulsa, no como un dato más Anton tiene un solo grosor: cualquier pediría 700 y el navegador lo engordaría a la fuerza, así que donde entra Anton se fija el peso en 400. */ #inicioCard .gc--capas .cap--partidas{--mk-tinta:#3B1E08;} #inicioCard .gc--capas .cap--partidas.cap--clr{--mk-tinta:#FFF6E2;} #inicioCard .gc--capas .cap--partidas > *{display:flex;align-items:center; justify-content:center;text-align:center;gap:0 1.1em;line-height:1;} /* ─ El eje ─ Las dos mitades se apoyan en la MISMA primera línea base: la etiqueta de la izquierda y la primera línea de la invitación descansan sobre el mismo renglón. `align-items:baseline` lo garantiza aunque los cuerpos cambien. */ #inicioCard .gc--capas .cap--partidas > *{display:flex;align-items:baseline; justify-content:center;gap:0;line-height:1;text-align:center;} /* ─ Izquierda: el dato, pegado al eje por la derecha ─ */ #inicioCard .gc--capas .cap--partidas .pl-hoy{display:flex;flex-direction:column; align-items:flex-end;gap:.16em;flex:0 1 auto; padding-right:.95em;text-align:right;} #inicioCard .gc--capas .cap .pl-hoy i{font-style:normal; font-family:var(--cond) !important;font-size:.54em !important;font-weight:700; letter-spacing:.13em;text-transform:uppercase;color:var(--etq) !important; padding-left:.13em;} /* el tracking sobra por la derecha */ #inicioCard .gc--capas .cap .pl-hoy b{font-family:var(--disp) !important; font-weight:400 !important;font-size:1.6em !important;letter-spacing:.005em; color:var(--mk-tinta) !important;line-height:.86;} /* ─ Derecha: la acción, pegada al eje por la izquierda ─ Sin caja. Lo que la separa del dato es el color, el peso y el eje — no un recuadro más. La regla fina es lo único que queda, y ni siquiera cierra. */ #inicioCard .gc--capas .cap--partidas .pl-sep{display:none;} /* La regla del eje solo aparece cuando el dato y la invitación van JUNTOS en el mismo bloque: es lo que los ata. Colocados por separado cada uno tiene su sitio y una raya suelta ahí no separaría nada — solo estorbaría. */ #inicioCard .gc--capas .cap--partidas .pl-cta{display:block;flex:0 1 auto; padding:.1em 0 .1em .95em;border:0 !important; border-left:.075em solid currentColor !important; box-shadow:none !important;} #inicioCard .gc--capas .cap--partidas .pl-cta a{text-align:left;} #inicioCard .gc--capas .cap--partidas_cta .pl-cta, #inicioCard .gc--capas .cap--partidas_cta > *{border:0 !important;padding-left:0 !important;} /* ─ Sueltos: cada uno manda en su hueco ─ */ /* Suelto, el dato se compone igual que dentro del grupo: etiqueta encima, cifra debajo. Lo unico que cambia es que ahora manda la alineacion que el dueno elija, no la posicion respecto a un eje. */ #inicioCard .gc--capas .cap--partidas_hoy > *{display:flex !important; flex-direction:column !important;align-items:center;justify-content:center; gap:.16em;height:100%;padding:0 !important;text-align:center;line-height:1;} #inicioCard .gc--capas .cap--partidas_hoy.cap--al-izq > *{align-items:flex-start;text-align:left;} #inicioCard .gc--capas .cap--partidas_hoy.cap--al-der > *{align-items:flex-end;text-align:right;} #inicioCard .gc--capas .cap--partidas_cta > *{display:flex;align-items:center; justify-content:center;height:100%;padding:0 !important;} #inicioCard .gc--capas .cap--partidas_cta.cap--al-izq > *{justify-content:flex-start;} #inicioCard .gc--capas .cap--partidas_cta.cap--al-der > *{justify-content:flex-end;} #inicioCard .gc--capas .cap--partidas_cta a{text-align:inherit;} #inicioCard .gc--capas .cap .pl-cta a{display:block; font-family:var(--cond) !important; /* Cuerpo arriba y tracking abajo: es justo al revés de como estaba, y es lo que quita el desenfoque. */ font-size:.8em !important;font-weight:800;letter-spacing:.035em; /* Sin text-align aqui: la alineacion NO es tipografia. En el grupo la pone la regla del eje (izquierda); suelta, manda lo que el dueno elija en el editor — este left clavado le ganaba por peso al centrado y por eso «centro» no obedecia. */ line-height:1.18;text-transform:uppercase; text-decoration:none !important;color:var(--cta,var(--cap-ac)) !important; /* cursor: el enlace vivia dentro de #msPlays y heredaba la manita de `.prizes a`; al mudarse al hueco la perdio y parecia letrero muerto. */ cursor:pointer; border:0 !important;padding:0 !important;box-shadow:none !important; white-space:pre-line;} /* el \n del idioma parte la línea */ /* El brillo. Recortado a las letras porque no hay caja: el punto claro pasa por DENTRO de los glifos. Cadencia calcada de cpBrillo (barre y descansa) con media vuelta de desfase respecto a JUGAR. El color base sigue siendo --cta: si el rojo cambia, el brillo lo sigue. */ @supports ((-webkit-background-clip:text) or (background-clip:text)){ #inicioCard .gc--capas .cap .pl-cta a{ background-image:linear-gradient(100deg, var(--cta,var(--cap-ac)) 42%, #FF9E3D 50%, #FFE9B0 54%, #FF9E3D 58%, var(--cta,var(--cap-ac)) 66%); background-size:300% 100%;background-position:150% 0; -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent; animation:cpBrilloTexto 5s cubic-bezier(.35,0,.25,1) 2.5s infinite;} } @keyframes cpBrilloTexto{ 0%,62% {background-position:150% 0} 86%,100%{background-position:-150% 0}} @media(prefers-reduced-motion:reduce){ #inicioCard .gc--capas .cap .pl-cta a{animation:none;background-image:none; -webkit-text-fill-color:currentColor;}} #inicioCard .gc--capas .cap .pl-cta a:hover{text-decoration:none !important; filter:brightness(1.12);} #inicioCard .gc--capas .cap .pl-cta a:active{translate:0 .06em;} #inicioCard .gc--capas .cap .pl-cta.ok{opacity:.55;} /* ═════ QUIÉN JUEGA ═════ Va debajo del marcador y no debe pelearle: la frase se apaga y solo el nombre y los puntos se sostienen. La línea punteada de arriba es el corte de un boleto — separa sin meter otra caja más. */ #inicioCard .gc--capas .cap--jugador{--mk-tinta:#3B1E08;} #inicioCard .gc--capas .cap--jugador.cap--clr{--mk-tinta:#FFF6E2;} /* La linea punteada de boleto que iba aqui se quito a peticion del dueno: el saludo se sostiene solo con el espacio. */ #inicioCard .gc--capas .cap--jugador > *{display:flex;align-items:baseline; justify-content:center;text-align:center;flex-wrap:wrap;gap:0 .3em; line-height:1.34;font-weight:500;} /* «Bienvenido» y la línea de nivel: en negro pleno por decisión del dueño. La jerarquía la siguen marcando el cuerpo chico y las mayúsculas. El segundo selector no es adorno: el juego trae `#inicioCard .gc #scPlayer span[style]` (DOS ids) forzando el cafe, y a un selector de un id le gana siempre. Repetir la clase suma el peso justo para quedar por encima. */ #inicioCard .gc--capas .cap--jugador > * > span, #inicioCard .gc--capas .cap.cap--jugador #scPlayer > span{font-size:.66em !important; font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:var(--etq) !important;} #inicioCard .gc--capas .cap--jugador > * > span:last-of-type{width:100%; letter-spacing:.1em;} /* «Bienvenido» (primer span) viste IGUAL que el nombre —misma fuente, tamaño y tinta— y solo se distingue por el PESO: la palabra en normal, el nombre en negrita. Antes iban en dos estilos muy distintos (versalita gris chica vs. negrita grande) y chocaban. La línea de nivel (último span) no se toca. */ #inicioCard .gc--capas .cap--jugador > * > span:first-of-type, #inicioCard .gc--capas .cap.cap--jugador #scPlayer > span:first-of-type{ font-family:var(--cond) !important;font-weight:500 !important;font-size:1em !important; letter-spacing:.005em !important;text-transform:none !important; color:var(--mk-tinta) !important;} /* El nombre sí se sostiene: mismo estilo, en negrita. */ #inicioCard .gc--capas .cap--jugador b{font-family:var(--cond) !important; font-weight:900;font-size:1em !important;letter-spacing:.005em; color:var(--mk-tinta) !important;} /* Los puntos son cifra: misma voz que el marcador de arriba. */ #inicioCard .gc--capas .cap--jugador #scPts{font-family:var(--disp) !important; font-weight:400 !important;font-size:1.16em !important; color:var(--cap-ac) !important;letter-spacing:.01em;} #inicioCard .gc--capas .cap--jugador svg, #inicioCard .gc--capas .cap--jugador .ico{width:.8em;height:.8em;} #inicioCard .gc--capas .cap--jugador a{text-decoration:none !important; color:var(--cap-ac) !important;font-weight:700;} /* El botón queda como PALABRA sobre el botón dibujado: sin píldora propia. */ #inicioCard .gc--capas .cap--boton > *{display:flex;align-items:center;justify-content:center; font-family:var(--disp);font-weight:400;letter-spacing:.04em; animation:none !important;border-radius:99px; /* El botón dorado de antes llevaba un resalte claro debajo de la letra. Aquí la palabra va sobre el arte del dueño, y ese resalte solo la emborrona: si hace falta separarla del fondo, se usa el contorno de los ajustes. */ text-shadow:none !important;} #inicioCard .gc--capas .cap--boton > *:active{transform:translateY(.06em);} #inicioCard .gc--capas .cap--fichas > *{display:flex;align-items:stretch;gap:.35em; background:none !important;} #inicioCard .gc--capas .cap--fichas .tile{flex:1 1 0;min-height:0 !important; height:100% !important;width:auto !important;padding:.3em .1em !important;gap:.15em; font-size:.5em !important;background:rgba(255,255,255,.10) !important; border:.06em solid rgba(255,255,255,.28) !important;border-radius:.7em;} #inicioCard .gc--capas .cap--osc.cap--fichas .tile{background:rgba(59,30,8,.10) !important; border-color:rgba(59,30,8,.28) !important;} #inicioCard .gc--capas .cap--fichas .tile i svg{width:1.5em;height:1.5em;} /* El botón que el dueño no colocó no se pierde: baja debajo de la tarjeta, porque sin él no se puede jugar. */ #inicioCard .gc-suelto{display:block !important;margin:10px auto 0 !important; width:min(90%,340px) !important;} /* ENTRADA de la portada de CELULAR. El video de fondo es una animación que corre una sola vez; mientras corre, los datos vivos (número de alitas, metas, barra, partidas, bienvenido, botón, fichas) NO deben verse. Nacen ocultos y aparecen todos juntos, con un fundido, cuando el video está por terminar: el JS pone .port-viva en el contenedor (arrancarEntradaPortada). En PC los .cap--mv están en display:none, así que esta regla no toca la portada de escritorio. */ /* Se oculta TODO lo que va ENCIMA del video (datos vivos + arte suelto como el chile, las papas, la hamburguesa, la pizza y las fichas) — todo menos el propio video (.cap--vid) —, para que aparezca junto, con el mismo fundido, cuando el video ya lleva 1 s. */ #inicioCard .gc--capas .cap--mv:not(.cap--vid){opacity:0;transition:opacity .55s ease;} #inicioCard .gc--capas.port-viva .cap--mv:not(.cap--vid){opacity:1;} @media(prefers-reduced-motion:reduce){ #inicioCard .gc--capas .cap--mv:not(.cap--vid){transition:none;}}