/* ============================================================ SEPARACION PC / CELULAR · LEER ANTES DE EDITAR Las reglas BASE (sin media query) son el diseño de PC: ahi vive el 3D completo con preserve-3d, que en PC funciona bien. TODO lo especifico de celular va dentro de bloques @media (max-width:1024px), (pointer:coarse) y NO debe modificar el comportamiento de PC. Mezclarlos fue la causa de que cada arreglo para una plataforma rompiera la otra: un !important puesto para celular terminaba aplicandose en PC, o una regla base pensada para PC dejaba al celular con 3D anidado (que es el bug del navegador que hace parpadear todo). Si un cambio tiene que afectar a los dos, ponerlo en la base y verificar en AMBOS antes de desplegar. ============================================================ */ /* NOTA DE RUTAS: los url() van con / inicial (absolutos desde la raiz del sitio). En CSS las rutas relativas se resuelven contra la UBICACION DEL CSS, no del HTML: con esta hoja en /css/, una ruta relativa pedia /css/black jack/... y daba 404 en todos los sprites. */ /* ============================================================ BLACKJACK · La mesa del croupier Extraido de bocetos-croupier.html para no inflar index.html. Se carga desde junto al resto de las hojas. ============================================================ */ :root{ --ink:#0b0907; --paper:#efe2c2; --gold:#e9a417; --yellow:#f6c64a; --blood:#7a1212; --cream:#f6ecd2; --type:'Special Elite','Courier New',monospace; --slab:'Anton','Oswald',sans-serif; /* ---- medidas del croupier, en UNA sola fuente ---- El torso, el cuello y la mascara se posicionan con estas y no con numeros sueltos: asi la cabeza no puede volver a quedar flotando lejos del cuello. */ --cara-w: 176px; --cara-h: 236px; /* 389x523 -> 1.344 */ /* la barbilla PINTADA del PNG no llega al borde de la imagen: la silueta medida termina al 95% del alto. Por eso el cuello arranca antes del final nominal de la cara. */ --cuello-y: 196px; --torso-y: 226px; } *{box-sizing:border-box} body{margin:0;background:#0b0907;color:var(--paper);font-family:var(--type)} .cab{padding:20px 24px 4px;text-align:center} .cab h1{font-family:var(--slab);letter-spacing:.06em;font-size:25px;margin:0 0 6px;color:var(--gold)} .cab p{margin:0;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#8a7a55} /* ============================================================ LA MESA Se ve desde el lado del jugador. El croupier esta al fondo, de frente. La perspectiva va aca y el paño se inclina con rotateX. ============================================================ */ /* ---- LA CAMARA ---- Este era el fallo de fondo: la mesa se veia DE FRENTE Y LEJOS, asi que el paño quedaba aplastado contra el fondo y todo parecia plano por mas volumen que tuvieran las piezas. La referencia esta tomada DESDE ARRIBA y de cerca, con la mesa llenando el encuadre: se consigue acercando la perspectiva (mas fuga) y SUBIENDO el punto de vista (origin chico). */ .bj{ position:relative; padding:8px 16px 34px; /* ---- POR QUE NO ES overflow:hidden ---- Era 'hidden' en los dos ejes, para que la escena 3D no desbordara la pagina a los costados. Pero la capa de globos es hija de .bj: con hidden vertical, todo globo que asomara por arriba se RECORTABA, y el del pit boss (que esta al fondo, bien alto) quedaba cortado o invisible. Se conserva el clip horizontal, que es el que hace falta, y se libera el vertical para que los globos se lean completos. */ overflow-x:hidden; overflow-y:visible; perspective:900px; perspective-origin:50% 6%; } .bj-escena{ position:relative; width:min(100%,1120px); margin:0 auto; height:760px; transform-style:preserve-3d; } /* ---------- fondo: la sala, para que el negro no se coma la silueta ---------- El croupier era invisible porque saco, fondo y sombra eran todos casi negros. Un halo detras lo separa del fondo. */ .bj-sala{ position:absolute;left:50%;top:-10px; width:700px;height:520px; transform:translateX(-50%) translateZ(-460px); /* el halo detras del croupier, mas fuerte: es lo que lo despega del fondo negro y le dibuja la silueta */ background: radial-gradient(ellipse at 50% 34%, rgba(233,164,23,.24), transparent 60%), radial-gradient(ellipse at 50% 66%, rgba(122,18,18,.24), transparent 72%); filter:blur(8px); } /* ---------- el croupier ---------- VA DETRAS DE LA MESA. Dentro de un contexto preserve-3d el orden de dibujo lo decide la POSICION EN Z, no el z-index: por eso el croupier se pintaba encima del paño y no se podian dejar cartas en su zona. Se lo manda bien atras (-420px) y se lo sube, para que el borde lejano del paño le pase por delante a la altura de la cintura, como en una mesa de verdad. */ .cro{ position:absolute;left:50%;top:14px; width:320px;height:470px; /* Mas atras Y mas chico: a -420px sin escalar, el torso seguia llegando al borde lejano del paño y las cartas del croupier aterrizaban sobre su pecho en vez de sobre la mesa. OJO con el origen: con 'origin:50% 0' y top negativo la cabeza se iba fuera del encuadre y el cuello quedaba separado de la mascara otra vez. El origen va ABAJO, asi el croupier se encoge hacia la mesa y la cabeza no se despega. */ transform:translateX(-50%) translateZ(-350px) scale(.84); transform-origin:50% 100%; transform-style:preserve-3d; /* 0, no 1: la bandeja de fichas tambien estaba en z-index 1 y el croupier le quedaba ENCIMA. El croupier va mas atras. */ z-index:0; } /* la sombra del croupier: un ovalo debajo, sin filter */ .cro::after{ content:""; position:absolute; left:22%;right:22%;bottom:6px; height:18px; background:radial-gradient(ellipse at 50% 50%, rgba(0,0,0,.6), transparent 74%); pointer-events:none; z-index:-1; } .cro-sprite{ position:absolute;left:0;top:0;width:320px;height:268px; background-image:url("/bj/sin-fondo-frames.png"); background-image:-webkit-image-set(url("/bj/sin-fondo-frames.webp") type("image/webp"), url("/bj/sin-fondo-frames.png") type("image/png")); background-image:image-set(url("/bj/sin-fondo-frames.webp") type("image/webp"), url("/bj/sin-fondo-frames.png") type("image/png")); background-repeat:no-repeat; background-size:600% 400%; background-position:0 0; pointer-events:none; animation:none; /* SIN drop-shadow: sobre un PNG con alfa, el navegador tiene que RECALCULAR la silueta de la sombra cada vez que cambia lo que se pinta — y en un sprite eso es en CADA cambio de pose. Mas la capa de composicion que crea cada filter. En celular eso agota la GPU y el navegador tira capas enteras: por eso desaparecian personajes, cartas y botones. La sombra la da el pseudo-elemento de abajo, que se pinta una vez y no se recalcula. */ } /* ============================================================ LOS JUGADORES SECUNDARIOS Mismo mecanismo que el croupier: una hoja de sprites 6x4 y data-pose elige la celda. La diferencia es la UBICACION: el croupier esta al fondo (translateZ -350px) y mirando a camara; estos estan del MISMO lado que la camara, sentados en el arco, de espaldas-3/4 con la cara girada hacia el croupier. ============================================================ */ /* ---- POR QUE SE VEIAN PARTES MAL CORTADAS ---- El contenedor media EXACTAMENTE la celda (229x192) y los sprites tocan el filo de su celda (a la coqueta el brazo y el pelo le llegan al borde). Al pintar la celda N, el pixel del borde ya pertenece a la celda N+1: asomaba un pedazo del sprite vecino (se veia como un recorte sucio en el hombro). Fix: el contenedor se agranda un 6% y el background se posiciona con un inset, asi la ventana de recorte cae DENTRO de la celda y nunca toca el filo. Es el mismo criterio de un atlas con padding, resuelto del lado del CSS porque las hojas ya vienen sin padding. */ /* ---- EL RECORTE DE CELDA, BIEN HECHO ---- Medido con un script sobre las 4 hojas: los sprites NO estan contenidos en su celda, se derraman por arriba y abajo hasta 210 px (el cuerpo sigue en la celda de al lado). Por eso se veian "partes mal cortadas": asomaba la gorra o el hombro del vecino. Un inset de 6px no alcanzaba ni de cerca. Solucion: el div mide EXACTAMENTE la celda y se recorta con overflow:hidden. El sprite de dentro se dimensiona en px reales (toda la hoja) y se corre con background-position en px exactos, no en porcentajes. Asi la ventana cae milimetricamente en la celda y el derrame del vecino queda afuera. Celda = 1376/6 x 768/4 = 229.33 x 192. */ /* ---- EL RECORTE DE VINETA, CON LA ARITMETICA CORRECTA ---- Sintoma: sobre la cabeza asomaba un pedazo de la vineta de arriba (se veia como una franja o una linea de color). Causa medida con script: el derrame real de una vineta a la vecina es de 2-3 px, pero 1376/6 = 229.333 no es entero. Con background-size en px y celdas fraccionarias, cada background-position se redondea y el error se ACUMULA fila a fila: en la ultima fila el corrimiento ya deja ver el filo del vecino. Fix: la hoja se escala a 1380x768 (1380/6 = 230 exacto), asi cada celda es entera y no hay redondeo. Ademas la ventana visible se mete 4px por arriba y 3px por los lados, que cubre con margen el derrame de 3px medido. La ventana es el DIV (224x185) y el sprite de dentro se corre en enteros. */ .jug{ position:absolute; width:224px;height:185px; overflow:hidden; pointer-events:none; z-index:5; /* idem: sin drop-shadow (ver nota en .cro-sprite) */ } .jug-sprite{ position:absolute; /* el offset negativo mete la ventana dentro de la celda */ left:-3px;top:-4px; width:230px;height:192px; background-repeat:no-repeat; /* 1380 = 6 x 230 exacto: sin fracciones, sin redondeo */ background-size:1380px 768px; background-position:0 0; } /* las 24 vinetas, en px ENTEROS (celda 230x192) */ /* ============================================================ LOS PUESTOS, SOBRE LA CURVA DEL SEMICIRCULO ANTES estaban los cuatro alineados al frente, a la misma altura: una FILA enfrentada a la camara. Pero la mesa es un ARCO, y en un arco cada jugador se sienta en un ANGULO distinto: los de los extremos quedan mas hacia el costado Y MAS ARRIBA (suben por la curva hacia el croupier), no abajo al mismo nivel. Posiciones tomadas sobre la elipse del arco, de izquierda a derecha, con el angulo que le toca a cada uno: chumcho x=6% y=34% (extremo izq, bien subido por la curva) veterano x=24% y=17% (sigue la curva, algo mas bajo) [TU PUESTO: centro, x=62% -- es donde mira la camara] coqueta x=93% y=32% (extremo der, espejada) El pit boss no esta en el arco: esta DETRAS de la mesa. ============================================================ */ /* --- extremo IZQUIERDO del arco: el chumcho. Su sprite mira a la DERECHA = hacia el centro de la mesa. Va SIN espejar. Sube por la curva, por eso bottom alto. */ .jug--chumcho{ left:6%; margin-left:-52px; bottom:30%; transform:rotateX(-64deg) translateZ(70px) scale(.96); transform-origin:50% 100%; z-index:6; } .jug--chumcho .jug-sprite{background-image:url("/bj/chumcho.png"); background-image:-webkit-image-set(url("/bj/chumcho.webp") type("image/webp"), url("/bj/chumcho.png") type("image/png")); background-image:image-set(url("/bj/chumcho.webp") type("image/webp"), url("/bj/chumcho.png") type("image/png"))} /* --- siguiente en la curva: el veterano. Mas cerca del centro y mas abajo que el chumcho, siguiendo el arco. Tambien mira a la derecha: sin espejar. BAJA DE Z para no tapar las fichas del jugador. */ .jug--veterano{ /* ANTES: left:22% / bottom:13% -> se descolgaba por debajo del arco, fuera de la mesa. Ahora sigue la CURVA: entre el chumcho (6%, 30%) y el centro, a una altura intermedia, como el tercer asiento de un semicirculo. */ left:26%; margin-left:-84px; bottom:20%; transform:rotateX(-64deg) translateZ(78px) scale(.98); transform-origin:50% 100%; z-index:6; } .jug--veterano .jug-sprite{background-image:url("/bj/veterano.png"); background-image:-webkit-image-set(url("/bj/veterano.webp") type("image/webp"), url("/bj/veterano.png") type("image/png")); background-image:image-set(url("/bj/veterano.webp") type("image/webp"), url("/bj/veterano.png") type("image/png"))} /* --- extremo DERECHO del arco: la coqueta. Su sprite mira a la derecha; en el lado derecho eso apuntaria hacia AFUERA, asi que va espejada con scaleX(-1) y su cara queda mirando al croupier. OJO con el orden: scaleX va DESPUES del rotateX en el mismo transform; al reves, el rotateX opera sobre el eje ya espejado y la figura se va para atras. */ .jug--coqueta{ left:93%; margin-left:-176px; bottom:28%; transform:rotateX(-64deg) translateZ(70px) scale(.96) scaleX(-1); transform-origin:50% 100%; z-index:6; } .jug--coqueta .jug-sprite{background-image:url("/bj/coqueta.png"); background-image:-webkit-image-set(url("/bj/coqueta.webp") type("image/webp"), url("/bj/coqueta.png") type("image/png")); background-image:image-set(url("/bj/coqueta.webp") type("image/webp"), url("/bj/coqueta.png") type("image/png"))} /* --- EL PIT BOSS: AL LADO DEL CROUPIER, MISMO PORTE --- Vive en .bj-escena, NO dentro del pano: por eso NO lleva contra-rotacion. Dentro del pano heredaba el rotateX(64deg) de la mesa, se acostaba sobre el fieltro y quedaba hundido bajo el borde, del tamano de una moneda (el "bajo tierra"). PARA QUE SE VEA DEL MISMO PORTE QUE EL CROUPIER: - mismo translateZ(-350px): si estan a distinta profundidad, la perspectiva hace ver mas chico al de atras aunque la escala numerica coincida. Igualar la Z es lo que iguala el porte. - la escala compensa el tamano de vineta: el croupier usa un sprite de 320px con scale(.84); la vineta del pit boss mide 224px de ancho, o sea 320/224 = 1.43 veces menos, asi que 1.43 x 0.84 = 1.2 lo deja del mismo alto en pantalla. - corrido a la derecha, en la esquina del borde recto de la mesa, sin superponerse al croupier (que ocupa 320px centrado). Es el unico personaje que mira a camara, porque es el unico que esta del otro lado de la mesa: desde ahi vigila el juego. */ .jug--pitboss{ left:50%; top:6%; margin-left:126px; transform:translateZ(-350px) scale(1.2); transform-origin:50% 100%; z-index:0; /* mismo plano que el croupier, detras del pano */ } .jug--pitboss .jug-sprite{background-image:url("/bj/pitboss.png"); background-image:-webkit-image-set(url("/bj/pitboss.webp") type("image/webp"), url("/bj/pitboss.png") type("image/png")); background-image:image-set(url("/bj/pitboss.webp") type("image/webp"), url("/bj/pitboss.png") type("image/png"))} /* ============================================================ LOS GLOBOS DE DIALOGO Van en una capa APARTE, hermana del paño, NO como hijos de cada personaje. Razon: los personajes viven dentro del paño, que esta en rotateX(64deg) y en z-index 2; un globo ahi dentro sale inclinado y las cartas (z-index 40..300) lo tapan. Esta capa esta fuera de la perspectiva y en z-index 600: los globos SIEMPRE se leen por encima de todo, que es justo lo que faltaba. ============================================================ */ .bj-globos{ /* cubre toda la escena, pero NO es hija de ella: asi queda fuera del contexto 3D y el z-index vuelve a decidir el apilado (dentro del preserve-3d manda la posicion en Z y las cartas tapaban los globos). */ /* top negativo: aire por arriba para globos de 2-3 lineas de los personajes que estan al fondo (el pit boss). 120px cubre un globo de 3 lineas con su separacion. */ position:absolute;left:0;right:0;top:-120px;bottom:0; pointer-events:none; /* z-index alto Y contexto propio: la escena de al lado tiene preserve-3d, que crea su propio contexto de apilado; sin isolation el navegador podia comparar los globos contra las capas 3D de dentro y las cartas ganaban. */ z-index:2000; isolation:isolate; transform-style:flat; /* el z-index alto + isolation ya garantizan que nada de la mesa quede por encima: no hace falta will-change, que solo suma presion de memoria de composicion en celular. */ } .globo{ position:absolute; /* se ancla por su punta, abajo-centro */ transform:translate(-50%,-100%) scale(.82); transform-origin:50% 100%; max-width:250px; padding:11px 14px 12px; border-radius:14px; background:linear-gradient(180deg,#fffdf6,#f2e8d2); color:#1a120b; font-family:var(--type); font-size:14px;line-height:1.32; letter-spacing:.01em; text-align:center; border:2.5px solid #16100a; box-shadow: 0 4px 0 rgba(22,16,10,.9), 0 14px 26px rgba(0,0,0,.6); opacity:0; transition:opacity .16s ease, transform .22s cubic-bezier(.34,1.56,.64,1); } .globo.activo{ opacity:1; transform:translate(-50%,-100%) scale(1); } /* la colita del globo, apuntando al personaje */ .globo::after{ content:""; /* --punta la calcula el JS: el globo puede haberse corrido para entrar en pantalla, y la colita tiene que seguir apuntando a la cabeza de quien habla */ position:absolute;left:var(--punta,50%);bottom:-13px; width:0;height:0; margin-left:-9px; border:9px solid transparent; border-top-color:#16100a; } .globo::before{ content:""; position:absolute;left:var(--punta,50%);bottom:-8px; width:0;height:0; margin-left:-6px; border:6px solid transparent; border-top-color:#f2e8d2; z-index:1; } /* el desvio de la colita lo calcula el JS en --punta; estas clases solo marcan de que lado se corrio, por si hace falta estilarlo */ /* ---- GLOBO VOLTEADO ---- Para personajes que estan tan arriba que el globo no entra sobre su cabeza (el pit boss, al fondo de la mesa): el globo baja y la colita se da vuelta para seguir apuntandolo. */ .globo--abajo{ transform:translate(-50%,0) scale(.82); transform-origin:50% 0; } .globo--abajo.activo{transform:translate(-50%,0) scale(1)} .globo--abajo::after{ bottom:auto;top:-13px; border-top-color:transparent; border-bottom-color:#16100a; } .globo--abajo::before{ bottom:auto;top:-8px; border-top-color:transparent; border-bottom-color:#f2e8d2; } .globo--abajo.globo--jefe::after{border-bottom-color:#c8a24a} .globo--abajo.globo--jefe::before{border-bottom-color:#131922} /* el globo del pit boss: mas seco, con borde de autoridad */ .globo--jefe{ /* fondo mas oscuro y texto mas blanco: en la captura el gris claro sobre azul grisado costaba leerse */ background:linear-gradient(180deg,#141a24,#0b0f16); color:#fbfdff; border-color:#c8a24a; box-shadow:0 4px 0 rgba(120,92,28,.85),0 14px 26px rgba(0,0,0,.65); } .globo--jefe::after{border-top-color:#c8a24a} .globo--jefe::before{border-top-color:#131922} /* el del croupier: profesional, neutro */ .globo--croupier{ background:linear-gradient(180deg,#f6f2e8,#e6dcc6); } @media (max-width:820px){ /* en celular el texto tiene que seguir siendo legible: el globo se angosta pero la letra NO baja de 13px */ .globo{max-width:190px;font-size:13px;padding:9px 11px 10px} } @media (max-width:820px){ /* en celular la escena se comprime: se corren a los margenes y bajan de escala para no tapar las casillas de cartas. Ademas el paño rota 58deg, no 64: la contra-rotacion cambia. */ /* en celular el paño rota 58deg, no 64: cambia la contra-rotacion. Y el veterano se OCULTA: con 4 personajes en un ancho de celular se pisan entre ellos y tapan las cartas. Quedan los dos de los extremos, que son los que hablan mas. */ .jug--chumcho{left:5%;margin-left:-42px;bottom:31%;transform:rotateX(-58deg) translateZ(56px) scale(.78)} .jug--coqueta{left:95%;margin-left:-146px;bottom:29%;transform:rotateX(-58deg) translateZ(56px) scale(.78) scaleX(-1)} /* El veterano YA NO se oculta: esta regla venia de cuando la mesa no escalaba y los 4 personajes se pisaban a tamaño completo. Ahora la mesa se reduce entera y caben los cuatro. */ .jug--pitboss{margin-left:104px;top:7%;transform:translateZ(-350px) scale(1.02)} } .cro-emocion{ position:absolute;left:-18%;top:-20%;width:136%;height:126%; background-image:url("/bj/emociones.png"); background-image:-webkit-image-set(url("/bj/emociones.webp") type("image/webp"), url("/bj/emociones.png") type("image/png")); background-image:image-set(url("/bj/emociones.webp") type("image/webp"), url("/bj/emociones.png") type("image/png")); background-repeat:no-repeat;background-size:600% 400%; pointer-events:none;opacity:0;display:block;transition:opacity .18s ease; /* sin filter: la emocion cambia de celda como el sprite */ } .cro-emocion[data-emocion]{opacity:1} .cro-emocion::after{position:absolute;right:4%;top:5%;font-family:var(--slab);font-size:54px;line-height:1;color:var(--yellow);text-shadow:3px 3px 0 #7a1212;transform:rotate(-10deg)} .cro-emocion[data-emocion="2"]::after{content:"✦";color:#f6c64a} .cro-emocion[data-emocion="4"]{background-position:80% 66.66%;animation:fuegoActivo .3s ease-in-out infinite alternate} .cro-emocion[data-emocion="5"]::after{content:"?"} .cro-emocion[data-emocion="6"]::after{content:"✦";font-size:34px} .cro-emocion[data-emocion="7"]::after{content:"…"} .cro-emocion[data-emocion="8"]::after{content:"♥";color:#ef7890} .cro-emocion[data-emocion="9"]::after{content:"★";color:#f6c64a} .cro-emocion[data-emocion="10"]::after{content:"$"} .cro-emocion[data-emocion="11"]::after{content:"✦";color:#f6c64a} .cro-emocion[data-emocion="12"]::after{content:"⌁";font-size:42px} @keyframes fuegoActivo{from{filter:drop-shadow(0 3px 5px rgba(226,69,58,.35));opacity:.88}to{filter:drop-shadow(0 3px 10px rgba(246,198,74,.8));opacity:1}} .cro-aviso{position:absolute;left:50%;top:-28px;transform:translateX(-50%) scale(.8);padding:8px 12px;border:2px solid #e2453a;border-radius:4px;background:#160d09;color:#f6c64a;font-family:var(--slab);font-size:12px;letter-spacing:.1em;white-space:nowrap;opacity:0;pointer-events:none;z-index:20} .cro-aviso.activo{opacity:1;animation:aviso .2s ease-out} @keyframes aviso{from{transform:translateX(-50%) scale(.5) rotate(-4deg)}to{transform:translateX(-50%) scale(1) rotate(0)}} /* El sprite aporta el traje, la mascara y las poses; estas capas conservan sus medidas para que la cinemática inversa siga operando. */ .cro-torso,.cro-cuello,.cro-cara,.cro-brazo{visibility:hidden} /* --- el torso: de verdad tiene hombros --- Se dibuja con un degradado que ACLARA los hombros y oscurece los costados, para que la forma se lea sobre el fondo negro. */ .cro-torso{ position:absolute;left:50%;top:var(--torso-y); width:300px;height:250px; transform:translateX(-50%); } /* ---- EL SACO: un cuerpo con volumen, no una silueta plana ---- Antes era un solo degradado vertical: se leia como carton. Un torso real tiene el PECHO iluminado, los COSTADOS en sombra y un pliegue donde el brazo se junta al cuerpo. Eso se consigue apilando degradados radiales: dos luces en los hombros, una luz central en el pecho y dos sombras laterales que redondean. */ .cro-saco{ position:absolute;inset:0; background: /* luz alta en cada hombro (la lampara de la mesa) */ radial-gradient(ellipse 34% 26% at 20% 9%, rgba(245,236,212,.34), transparent 70%), radial-gradient(ellipse 34% 26% at 80% 9%, rgba(245,236,212,.28), transparent 70%), /* el pecho, que sobresale */ radial-gradient(ellipse 40% 44% at 50% 34%, rgba(226,214,190,.16), transparent 72%), /* los costados se van a la sombra: es lo que redondea el torso */ radial-gradient(ellipse 24% 70% at 2% 52%, rgba(0,0,0,.62), transparent 72%), radial-gradient(ellipse 24% 70% at 98% 52%, rgba(0,0,0,.62), transparent 72%), /* pliegue de la sisa: donde el brazo nace del cuerpo */ radial-gradient(ellipse 9% 34% at 23% 40%, rgba(0,0,0,.44), transparent 76%), radial-gradient(ellipse 9% 34% at 77% 40%, rgba(0,0,0,.44), transparent 76%), /* paño del saco: negro calido, no gris plano */ linear-gradient(177deg,#514c46 0%,#3a352f 26%,#272320 58%,#15120f 100%); clip-path:polygon( 50% 0%, 66% 1%, 80% 6%, 91% 17%, 97% 36%, 100% 64%, 100% 100%, 0% 100%, 0% 64%, 3% 36%, 9% 17%, 20% 6%, 34% 1%); border-radius:16px 16px 0 0; } /* tejido del paño: una trama finisima, para que no sea color liso */ .cro-saco::after{ content:"";position:absolute;inset:0;border-radius:inherit; opacity:.5;pointer-events:none; background-image: repeating-linear-gradient(42deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px), repeating-linear-gradient(-42deg, rgba(0,0,0,.06) 0 1px, transparent 1px 3px); } /* filo de luz en el hombro: lo que de verdad dibuja la forma */ .cro-hombro{ position:absolute;top:1px;width:46%;height:62%; border-top:2px solid rgba(245,236,212,.28); pointer-events:none; } .cro-hombro--i{left:2%; border-radius:76% 10% 0 0; border-left:1px solid rgba(245,236,212,.14)} .cro-hombro--d{right:2%; border-radius:10% 76% 0 0; border-right:1px solid rgba(245,236,212,.14)} /* ---- LA CAMISA: con cuello armado y botonadura ---- */ .cro-camisa{ position:absolute;left:50%;top:0; width:108px;height:156px; transform:translateX(-50%); background: /* la sombra que proyecta la solapa sobre la camisa */ linear-gradient(100deg, rgba(0,0,0,.34) 0 14%, transparent 32%), linear-gradient(260deg, rgba(0,0,0,.34) 0 14%, transparent 32%), linear-gradient(180deg,#fbf4e2 0%,#ece0c4 42%,#c9bb98 78%,#a2957a 100%); clip-path:polygon(50% 0%, 82% 5%, 66% 100%, 34% 100%, 18% 5%); } /* la tira de botones, hundida en el centro */ .cro-camisa::after{ content:"";position:absolute;left:50%;top:22%; width:11px;height:74%;margin-left:-5.5px; background: radial-gradient(circle at 50% 12%, rgba(0,0,0,.5) 1.6px, transparent 2px), radial-gradient(circle at 50% 46%, rgba(0,0,0,.5) 1.6px, transparent 2px), radial-gradient(circle at 50% 80%, rgba(0,0,0,.5) 1.6px, transparent 2px), linear-gradient(90deg, transparent 36%, rgba(0,0,0,.14) 50%, transparent 64%); } /* EL CUELLO de la camisa: dos puntas que se cruzan bajo el corbatin */ .cro-cuellocamisa{ position:absolute;left:50%;top:-2px; width:86px;height:42px;margin-left:-43px; z-index:3;pointer-events:none; } .cro-cuellocamisa i{ position:absolute;top:0;width:46px;height:40px; background:linear-gradient(180deg,#fdf7e8,#d6c9a6 70%,#b0a382); } .cro-cuellocamisa i:first-child{ left:-2px; clip-path:polygon(0% 0%, 74% 6%, 100% 92%, 44% 62%, 0% 30%); box-shadow:2px 2px 3px rgba(0,0,0,.4); } .cro-cuellocamisa i:last-child{ right:-2px; clip-path:polygon(100% 0%, 26% 6%, 0% 92%, 56% 62%, 100% 30%); box-shadow:-2px 2px 3px rgba(0,0,0,.4); } /* ---- LAS SOLAPAS: seda de smoking, con brillo ---- */ .cro-solapa{ position:absolute;top:0;width:92px;height:164px; } .cro-solapa--i{ left:50%;margin-left:-90px; /* el brillo corre en diagonal: asi se lee como seda y no como tela */ background: linear-gradient(112deg,#5d564e 0%,#3b3630 22%,#221f1b 56%,#14110e 100%); clip-path:polygon(100% 0%, 72% 3%, 2% 72%, 42% 100%, 100% 30%); } .cro-solapa--d{ left:50%;margin-left:-2px; background: linear-gradient(248deg,#5d564e 0%,#3b3630 22%,#221f1b 56%,#14110e 100%); clip-path:polygon(0% 0%, 28% 3%, 98% 72%, 58% 100%, 0% 30%); } /* el canto de la solapa, un filo claro que la separa del saco */ .cro-solapa::after{ content:"";position:absolute;inset:0; clip-path:inherit; background:linear-gradient(112deg, rgba(255,255,255,.16) 0 3%, transparent 9%); } /* ---- EL CORBATIN: con nudo y volumen ---- */ .cro-mono{ position:absolute;left:50%;top:12px; width:58px;height:25px; transform:translateX(-50%); z-index:4; background: radial-gradient(ellipse 30% 60% at 16% 50%, rgba(255,255,255,.2), transparent 70%), radial-gradient(ellipse 30% 60% at 84% 50%, rgba(255,255,255,.2), transparent 70%), linear-gradient(180deg,#9d1a1a,#6d1011 62%,#4a0b0c); clip-path:polygon(0% 2%, 42% 34%, 58% 34%, 100% 2%, 100% 98%, 58% 66%, 42% 66%, 0% 98%); filter:drop-shadow(0 2px 3px rgba(0,0,0,.6)); } /* el nudo del centro */ .cro-mono::after{ content:"";position:absolute;left:50%;top:50%; width:15px;height:17px;transform:translate(-50%,-50%); background: radial-gradient(ellipse at 40% 30%, #7d1213, #3f0809 80%); border-radius:3px; box-shadow:inset 0 1px 0 rgba(255,255,255,.18); } /* --- el cuello: PEGA la mascara al torso, sin hueco --- */ .cro-cuello{ position:absolute;left:50%;top:var(--cuello-y); width:66px;height:56px; transform:translateX(-50%); background:linear-gradient(180deg,#33302c,#1b1917); border-radius:8px 8px 4px 4px; box-shadow:inset 0 -6px 10px rgba(0,0,0,.6); } /* --- LA MASCARA: el PNG real (img/mascara2.png), sin inventar --- */ .cro-cara{ position:absolute;left:50%;top:0; width:var(--cara-w);height:var(--cara-h); transform:translateX(-50%); background: radial-gradient(ellipse at 34% 34%, rgba(246,214,138,.3) 0 4%, transparent 5%), radial-gradient(ellipse at 66% 34%, rgba(246,214,138,.3) 0 4%, transparent 5%), linear-gradient(116deg, transparent 0 42%, rgba(246,214,138,.78) 43% 46%, transparent 47%), radial-gradient(ellipse at 50% 42%, #302d27 0 48%, #0b0a09 70%, transparent 71%); clip-path:ellipse(45% 49% at 50% 45%); border:2px solid #171512; filter:drop-shadow(0 14px 12px rgba(0,0,0,.8)); transform-origin:50% 92%; /* gira desde el cuello, no desde el aire */ animation:cro-respira 5s ease-in-out infinite; } .cro-cara::before{ content:"";position:absolute;left:16%;top:20%;width:68%;height:58%; border:3px solid rgba(246,214,138,.82); border-top-color:transparent;border-bottom-color:rgba(246,214,138,.35); border-radius:48% 48% 42% 42%; clip-path:polygon(0 0,100% 0,100% 72%,72% 100%,28% 100%,0 72%); opacity:.9; } .cro-cara::after{ content:"";position:absolute;left:34%;top:31%;width:32%;height:12%; border:2px solid #090807;border-radius:50%; box-shadow:0 42px 0 -2px rgba(9,8,7,.95), 0 0 0 4px rgba(246,214,138,.18); } @keyframes cro-respira{ 0%,100%{transform:translateX(-50%) rotate(0deg)} 50% {transform:translateX(-50%) rotate(-1.1deg)} } /* ============================================================ LOS BRAZOS Hombro y codo con origen real. El brazo DERECHO del croupier queda a la izquierda de quien mira: es el que va al sabot. ============================================================ */ /* El brazo MIDE lo que tiene que alcanzar. Medido: hombro a (695,342), boca del sabot a 471 px, brazo de 197 px -> faltaban 274 px y ninguna rotacion lo cubria. Se alarga el brazo y ademas el sabot se acerca a esta mano. */ .cro-brazo{ position:absolute;top:252px; width:40px;height:136px; transform-origin:50% 10px; z-index:4; } .cro-brazo--d{left:50%;margin-left:104px} .cro-brazo--i{left:50%;margin-left:-144px} .cro-manga{ position:absolute;inset:0; background:linear-gradient(90deg,#151413,#2c2a27 42%,#141312); border-radius:18px 18px 11px 11px; } .cro-ante{ position:absolute;left:50%;top:126px; width:34px;height:128px; margin-left:-17px; transform-origin:50% 7px; } .cro-ante .cro-manga{border-radius:11px 11px 15px 15px} .cro-puno{ position:absolute;left:-4px;bottom:14px; width:42px;height:15px; background:linear-gradient(180deg,#f0e6c9,#bdb08e); border-radius:3px; box-shadow:0 1px 0 rgba(0,0,0,.6); } /* --- LA MANO: guante negro. Los dedos cierran con UNA variable --- */ .cro-mano{ position:absolute;left:50%;bottom:-20px; width:48px;height:46px; margin-left:-24px; transform-origin:50% 5px; } .cro-palma{ position:absolute;left:5px;top:2px; width:38px;height:34px; background:linear-gradient(150deg,#35312d,#151413); border-radius:13px 13px 10px 10px; box-shadow:inset 0 1px 0 rgba(239,226,194,.12); } .cro-dedo{ position:absolute;top:30px; width:8px;height:22px; background:linear-gradient(180deg,#2e2a27,#141312); border-radius:4px; transform-origin:50% 2px; transform:rotate(calc(var(--garra,0) * 1deg)); } .cro-dedo:nth-of-type(1){left:7px} .cro-dedo:nth-of-type(2){left:16px;height:24px} .cro-dedo:nth-of-type(3){left:25px;height:23px} .cro-dedo:nth-of-type(4){left:34px;height:20px} .cro-pulgar{ position:absolute;left:-2px;top:16px; width:9px;height:19px; background:linear-gradient(180deg,#2f2b28,#151413); border-radius:4px; transform-origin:50% 2px; transform:rotate(calc(var(--garra,0) * -1.1deg - 26deg)); } /* ============================================================ EL PAÑO ============================================================ */ /* El paño se adelanta en Z para quedar DELANTE del croupier. Con el rotateX sobre el borde de abajo, su borde lejano sube y tapa la cintura del croupier: asi la zona de sus cartas queda sobre la mesa y no flotando sobre su cuerpo. */ /* ---- EL HUECO NEGRO ---- Con la camara desde arriba, el border-radius de elipse (50% 50% / 26% 26%) dejaba de cubrir la escena: se veia el fondo negro entre el croupier y el fieltro, y una esquina verde suelta. El paño se agranda y la curva se suaviza. */ .bj-pano{ position:absolute;left:-4%;right:-4%;bottom:-2%; height:720px; transform:translateZ(30px) rotateX(64deg); transform-origin:50% 100%; transform-style:preserve-3d; z-index:2; /* ---- ESTE RADIO ABRIA EL HUECO ---- Con '38% / 14%' y la mesa inclinada 70 grados, la curva de arriba se proyecta comprimida y RECORTA una franja entera del fieltro (medido: la cobertura de verde caia de 69% a 0% entre y=500 y y=556, y por el hueco se veia el fondo del body). La forma de mesa la da la perspectiva; el radio en porcentaje solo hacia daño. */ /* ---- LA SILUETA: SEMICIRCULO, NO RECTANGULO ---- Con '18px 18px 30px 30px' las cuatro esquinas quedaban casi en angulo recto: la mesa tenia forma de MESA DE POOL. Una mesa de blackjack (referencia 'black jack/mesa.png' y la foto de fantasiaenlasvegas.cl) es un SEMICIRCULO: el borde LEJANO es RECTO — ahi se para el croupier, con el sabot y el descarte a los costados — y el frente del jugador es un ARCO amplio. Por eso el radio va solo en las esquinas de ABAJO, y elíptico: 70% de ancho por 100% de alto, que baja en curva continua desde el canto recto hasta el centro del frente. Las esquinas de arriba se dejan en 0: el corte recto del fondo es justamente lo que le da la lectura de mesa de casino. (El radio porcentual grande en las esquinas de ARRIBA era lo que recortaba franjas del fieltro bajo el rotateX; abajo no pasa, porque ahi la perspectiva expande en vez de comprimir.) */ border-radius:0 0 70% 70% / 0 0 100% 100%; border:0; /* ---- FIELTRO DE VERDAD ---- Era un degradado verde liso. Un paño de casino tiene un verde PROFUNDO con el foco de luz cayendo en el centro, las esquinas apagadas, y sobre todo PELUSA: un grano fino en dos diagonales que atrapa la luz. */ /* ---- POR QUE SE VEIAN FRANJAS ---- Al alargar el paño, los radial-gradient de sombra (ellipse 90% 30%) se estiraron y sus bordes se volvieron LINEAS RECTAS: el fieltro parecia cortado en bandas de verde distinto. La solucion es que cada sombra muera con transicion larga y que el verde de base sea UNO. */ /* ---- POR QUE SE FUE EL JPG ---- El JPG traia los circulos de apuesta y los rotulos PINTADOS ENCIMA. Eso hacia imposible alinear nada: las casillas de cartas (CSS, translateX -84..+140px) y los circulos de la foto (repartidos por todo el arco) son dos sistemas distintos, y quedaban cruzados — cartas en el centro, circulos a los lados. Ahora el fieltro es verde de verdad (degradado + pelusa) y TODO el trazado — arcos, rotulos y los 3 circulos de apuesta — lo dibuja el SVG de .bj-trazado, en coordenadas que comparte con las posiciones de los jugadores. Una sola fuente de verdad. */ background: /* el foco de la lampara sobre el centro del paño */ radial-gradient(ellipse 72% 52% at 50% 32%, rgba(96,196,142,.22), transparent 70%), /* la base: verde casino profundo, mas oscuro en las orillas */ linear-gradient(180deg, #1f5f42 0%, #24694a 34%, #1d5a3e 72%, #143f2c 100%); /* La sombra inset de 70px, sobre un paño inclinado 70 grados, se comprimia en una FRANJA NEGRA que cruzaba la mesa (medido: aparecia en y=510, dentro del paño, sin que en ese pixel hubiera ningun elemento con fondo). Se quita: la viñeta del background ya oscurece las orillas. */ /* ---- LA BANDA NEGRA ERA ESTE BORDE ---- Habia un 'inset 0 0 0 2px #0b0907'. Visto a traves del rotateX(70deg) de la camara nueva, ese borde de 2px se proyecta en pantalla como una FRANJA de 47px que cruza toda la mesa (medido: y=505..551, color rgb(11,9,7), que es exactamente #0b0907). Con la camara vieja de 58 grados apenas se notaba; al abrir el paño se volvio una banda. Sin inset: el contorno lo da la sombra exterior. */ /* Los dos inset (3px dorado + 10px oscuro) dibujaban el reborde cuando el paño era un rectangulo. Con la silueta semicircular el reborde lo pone la MOLDURA (.bj-canto, que ahora envuelve el arco con su filo de bronce): mantenerlos daba doble contorno, uno por dentro del otro. Queda solo la sombra proyectada, que es la que apoya la mesa sobre el fondo. */ box-shadow: 0 -8px 40px rgba(0,0,0,.5), 0 26px 60px rgba(0,0,0,.72); } /* la PELUSA del fieltro: dos tramas cruzadas muy finas */ .bj-pano::before{ content:"";position:absolute;inset:0;border-radius:inherit; opacity:.5;pointer-events:none; background-image: repeating-linear-gradient(37deg, rgba(255,255,255,.030) 0 1px, transparent 1px 3px), repeating-linear-gradient(-51deg, rgba(0,0,0,.075) 0 1px, transparent 1px 4px), repeating-linear-gradient(88deg, rgba(255,255,255,.016) 0 1px, transparent 1px 6px); } .bj-pano::after{ display:none; pointer-events:none;z-index:0; } /* ---- EL CANTO: cuero acolchado con costura ---- Era una tira lisa con rayitas. Ahora son almohadillas: cada una con su brillo arriba y su sombra abajo, separadas por la costura. */ /* ---- EL BORDE: MADERA LUSTRADA, como la mesa de la foto ---- Antes era cuero acolchado con costuras. En la referencia el borde es una moldura de madera barnizada: vetas finas, brillo largo de laca y un filo claro donde pega la luz. */ /* ---- EL CANTO SIGUE EL ARCO ---- Era una barra RECTA de 40px al pie del paño: sobre una mesa semicircular eso lee como el testero de una mesa de pool. La moldura tiene que ENVOLVER el arco del frente. Como se hace: el canto se estira a todo el alto de la zona curva y se le da el MISMO radio elíptico que al paño; una mascara deja visible solo el ANILLO exterior de 40px, asi la madera aparece como una franja curva que acompaña el arco por el frente y los dos costados, como la moldura de la mesa real. */ .bj-canto{ position:absolute;left:-6px;right:-6px;bottom:0; /* alto = la zona del arco, no una tira al pie */ height:62%; border-radius:0 0 70% 70% / 0 0 100% 100%; /* La franja curva se saca con una mascara: se pinta la madera en todo el bloque y la mascara deja visible SOLO el anillo de ~40px pegado al arco. Es lo unico que recorta bien una curva eliptica; un border-width con color transparente no pinta el fondo del reborde de forma consistente. (mask-composite: exclude = bloque completo MENOS el bloque encogido 40px, o sea el contorno.) */ -webkit-mask: linear-gradient(#000,#000) border-box, linear-gradient(#000,#000) padding-box; -webkit-mask-composite:xor; mask: linear-gradient(#000,#000) border-box, linear-gradient(#000,#000) padding-box; mask-composite:exclude; /* el hueco interior: 40px de moldura por el frente y los costados. Arriba 0, porque ahi el borde es recto y lo cubre el fondo de la mesa (sabot/descarte). */ padding:0 40px 40px 40px; box-sizing:border-box; background: /* reflejo largo del barniz */ linear-gradient(180deg, rgba(255,240,210,.34) 0 3px, rgba(255,225,170,.14) 3px 9px, transparent 9px 100%), /* vetas de la madera, finas e irregulares */ repeating-linear-gradient(88deg, rgba(70,34,12,.5) 0 1px, transparent 1px 5px), repeating-linear-gradient(92deg, rgba(28,12,4,.35) 0 1px, transparent 1px 13px), repeating-linear-gradient(90deg, rgba(120,64,24,.22) 0 2px, transparent 2px 27px), /* la madera: caoba lustrada */ linear-gradient(180deg,#8a4a22 0%,#6b3518 26%,#4a2210 62%,#2a1208 100%); /* Con mascara, las sombras inset y la exterior quedan RECORTADAS (la mascara se aplica despues de pintarlas). El volumen de la moldura lo dan ahora dos anillos concentricos: el filo claro de bronce por dentro (::before) y el cierre oscuro por fuera (::after). */ box-shadow:none; } /* el filo de bronce donde la madera se encuentra con el fieltro: va CURVADO, sobre el arco interior de la moldura */ .bj-canto::before{ content:"";position:absolute;inset:0; border-radius:inherit; /* corre por dentro de la madera: el anillo de 3px pegado al paño */ padding:0 37px 37px 37px; box-sizing:border-box; -webkit-mask: linear-gradient(#000,#000) border-box, linear-gradient(#000,#000) padding-box; -webkit-mask-composite:xor; mask: linear-gradient(#000,#000) border-box, linear-gradient(#000,#000) padding-box; mask-composite:exclude; background:linear-gradient(180deg, rgba(233,196,138,.75), rgba(140,96,40,.4)); pointer-events:none; } /* el canto exterior de la moldura: cierra la madera contra el fondo y le devuelve la sombra que la mascara recorto */ .bj-canto::after{ content:"";position:absolute;inset:0; border-radius:inherit; padding:0 4px 4px 4px; box-sizing:border-box; -webkit-mask: linear-gradient(#000,#000) border-box, linear-gradient(#000,#000) padding-box; -webkit-mask-composite:xor; mask: linear-gradient(#000,#000) border-box, linear-gradient(#000,#000) padding-box; mask-composite:exclude; background:linear-gradient(180deg,rgba(20,9,4,.5),rgba(10,4,2,.92)); pointer-events:none; } /* ---- EL TRAZADO DE LA MESA, EN SVG ---- Los arcos eran bordes de CSS: una elipse y nada mas. Una mesa de casino de verdad (la foto de referencia) tiene el semicirculo DIVIDIDO EN SECTORES, con los textos CURVADOS siguiendo el arco y los pagos debajo. Eso no se puede hacer con border-radius: va en un SVG con textPath. */ /* El trazado va DENTRO del fieltro visible. Con top:6% y todo el ancho, el arco grande se montaba sobre el borde lejano del paño (donde esta la zona oscura y el sabot) y los arcos se salian por los costados. Se lo mete y se lo centra. */ /* ACTIVADO. Estaba en display:none y los circulos/rotulos venian pintados en el JPG del paño, lo que hacia imposible alinear las cartas con ellos. Ahora este SVG es la UNICA fuente del trazado y comparte coordenadas con los puestos de los jugadores. */ .bj-trazado{ position:absolute;left:6%;right:6%;top:16%; height:74%; display:block; pointer-events:none; z-index:1; /* sobre el fieltro, debajo de cartas y fichas */ } .bj-trazado svg{display:block;width:100%;height:100%} .bj-arco{ position:absolute;left:50%;top:34%; width:64%;height:40%; transform:translateX(-50%); border:2px solid rgba(246,198,74,.3); border-radius:50% 50% 46% 46% / 70% 70% 30% 30%; border-bottom-color:transparent; display:none; /* lo reemplaza el trazado SVG */ } /* El texto del paño va ARRIBA de la fila del croupier, no detras. Medido: la fila del croupier ocupa y=574..637 y la leyenda caia en y=561..588, o sea las cartas le pasaban por encima. Con 2% queda sobre el borde lejano, despejada. */ /* la leyenda va al borde lejano del paño, por detras de la fila del croupier pero sin que las cartas la pisen */ /* DENTRO del fieltro, en la banda libre entre las dos filas. Con top:-4% caia FUERA del paño, sobre la zona negra de arriba: por eso "el croupier se planta en 17" no se leia. */ /* Los rotulos ahora los dibuja el trazado SVG, CURVADOS sobre los arcos. Estos de aca eran los rectos de antes: si se dejan visibles, la mesa muestra cada leyenda DOS VECES, una curva y otra recta encima. */ .bj-leyenda{ display:none; position:absolute;left:50%;top:40%; transform:translateX(-50%); text-align:center;color:rgba(246,198,74,.78); letter-spacing:.3em;text-transform:uppercase; font-size:12px;line-height:1.9;white-space:nowrap; text-shadow:0 2px 4px rgba(0,0,0,.9); } .bj-leyenda b{display:block;font-size:15px;color:rgba(246,198,74,.82)} /* la BANDA DE SEGURO: en una mesa real es un arco propio, con su linea, justo delante de las casillas del jugador */ /* idem: su texto ya va curvado en el trazado SVG */ .bj-seguro{ display:none; position:absolute;left:50%;top:52%; transform:translateX(-50%); font-size:10px;letter-spacing:.3em;text-transform:uppercase; color:rgba(239,226,194,.5);white-space:nowrap; text-shadow:0 2px 3px rgba(0,0,0,.9); } /* el arco de la banda de seguro, concentrico al de apuestas */ .bj-arco-seguro{ position:absolute;left:50%;top:47%; width:50%;height:30%; transform:translateX(-50%); border:1px solid rgba(239,226,194,.16); border-radius:50% 50% 46% 46% / 74% 74% 26% 26%; border-bottom-color:transparent; pointer-events:none; display:none; /* lo reemplaza el trazado SVG */ } /* ---- LA BANDEJA DE FICHAS (el float) ---- Ninguna mesa de casino esta sin esto: la bandeja metalica de fichas delante del croupier. Va en el borde lejano, centrada. */ /* ---- LAS FICHAS SON PILAS, NO UNA TIRA PLANA ---- Eran un degradado de colores en una barra: se veia como una cinta pintada. Una pila de fichas tiene CANTOS apilados (varias rayas horizontales por pila) y la bandeja tiene profundidad. Se dibuja cada pila aparte con sus cantos. */ /* ============================================================ EL DESCARTE (discard rack) En la referencia esta a la izquierda del croupier: la caja donde se guardan las cartas ya jugadas. Cada mano que termina manda sus cartas aca. Es lo que le faltaba a la mesa para sentirse una mesa de verdad. ============================================================ */ .bj-descarte{ position:absolute;left:13%;top:-1%; width:104px;height:74px; perspective:480px; perspective-origin:50% 100%; pointer-events:none; z-index:2; } .descarte-caja{ position:absolute;inset:0; transform-style:preserve-3d; transform:rotateX(52deg) rotateZ(3deg); background:linear-gradient(170deg,#2b2b33,#15151a 60%,#0b0b0e); border:1px solid #46464f; border-radius:4px; box-shadow:inset 0 2px 0 rgba(255,255,255,.2), 0 8px 18px rgba(0,0,0,.8); } /* las cartas descartadas, apiladas de canto */ .descarte-pila{ position:absolute;left:8px;right:8px;bottom:7px; height:0; /* crece con el JS */ transform-origin:50% 100%; transform:rotateX(-52deg); background:repeating-linear-gradient(180deg, #8d1a20 0 2px, #5c0f14 2px 3px, #7d1219 3px 5px, #4d0b10 5px 6px); border:1px solid #2a0709; border-radius:2px; transition:height .45s ease; } .descarte-rotulo{ position:absolute;left:50%;bottom:-16px; transform:translateX(-50%); font-size:8px;letter-spacing:.22em;text-transform:uppercase; color:rgba(239,226,194,.45);white-space:nowrap; } /* ---- EL ROTULO "APUESTA" EN CADA CASILLA ---- En la referencia cada circulo de apuesta lo dice. Sin eso, las casillas son rectangulos punteados sin significado. */ .bj-casilla::after{ content:"APUESTA"; position:absolute;left:50%;bottom:6px; transform:translateX(-50%); font-family:var(--type); font-size:7px;letter-spacing:.2em; color:rgba(246,214,138,.4); white-space:nowrap; } .bj-casilla--c1::after,.bj-casilla--c2::after,.bj-casilla--c3::after, .bj-casilla--c4::after,.bj-casilla--c5::after{content:""} /* ---- LA BANDEJA, EN 3D Y MAS ATRAS ---- Quedaba por debajo de las cartas del croupier. Se la manda al borde lejano del paño (top negativo) y se levanta con su propia perspectiva, para que se vea el canal y las pilas de canto. */ .bj-bandeja{ position:absolute;left:50%;top:-5%; width:370px;height:78px; transform:translateX(-50%); perspective:600px; perspective-origin:50% 100%; pointer-events:none; /* el croupier esta en z-index 0 y el paño en 2: con 2 la bandeja se mezclaba con el paño y parecia estar DETRAS del croupier. Va por delante de los dos. */ z-index:6; } /* el cuerpo metalico, inclinado hacia atras */ .bj-bandeja-cuerpo{ position:absolute;inset:0; transform-style:preserve-3d; transform:rotateX(46deg); border-radius:8px; background: repeating-linear-gradient(90deg, transparent 0 42px, rgba(5,5,8,.72) 42px 47px), linear-gradient(180deg, #77747a 0 5px, #3d3a42 5px 11px, #17171c 11px 49px, #4b4750 49px 63px, #111116 63px 100%); box-shadow: inset 0 2px 0 rgba(255,255,255,.3), inset 0 -4px 8px rgba(0,0,0,.8), 0 8px 20px rgba(0,0,0,.8); overflow:hidden; } /* el borde frontal de la bandeja, levantado: le da el espesor */ .bj-bandeja-canto{ position:absolute;left:0;right:0;bottom:0;height:16px; transform-origin:50% 100%; transform:rotateX(-44deg); background:linear-gradient(180deg,#7a7a86,#2b2b33); border-radius:0 0 5px 5px; box-shadow:inset 0 2px 0 rgba(255,255,255,.34); } /* las PILAS: cada una con sus cantos horizontales apilados */ .bj-bandeja-cuerpo::before{ display:none; /* OJO: aca habia un background-blend-mode:overlay que apagaba los colores — el rojo y el azul quedaban oscuros y el blanco gris. Los cantos se dibujan con rayas SEMITRANSPARENTES encima del color, que da el mismo relieve sin ensuciar el tono. */ background-image: /* los cantos de cada ficha: luz arriba, sombra abajo */ repeating-linear-gradient(180deg, rgba(255,255,255,.38) 0 1px, rgba(255,255,255,.10) 1px 2px, rgba(0,0,0,.34) 2px 5px), /* el color de cada pila, en columnas */ repeating-linear-gradient(90deg, #c73d34 0 37px, #16161c 37px 42px, #e7ded0 42px 79px, #16161c 79px 84px, #d4862e 84px 121px, #16161c 121px 126px, #292a31 126px 163px, #16161c 163px 168px, #bd302b 168px 205px, #16161c 205px 210px, #e7ded0 210px 247px, #16161c 247px 252px, #d4862e 252px 289px); border-radius:4px; box-shadow:inset 0 0 0 2px rgba(7,7,9,.8), inset 0 4px 8px rgba(255,255,255,.1); } /* la sombra que las pilas proyectan en el fondo de la bandeja */ .bj-bandeja-cuerpo::after{ content:"";position:absolute;left:13px;right:13px;top:49px;height:10px; background:linear-gradient(180deg, rgba(0,0,0,.7), transparent); } .bj-banca-ficha{ position:absolute;bottom:12px;width:34px;height:30px;border-radius:4px 4px 6px 6px; border:2px solid #17151a;background-size:auto 100%;background-position:center; box-shadow:0 3px 0 #111116,0 6px 0 #28252a,0 9px 0 #0b0b0f, 0 13px 9px rgba(0,0,0,.65),inset 0 2px 0 rgba(255,255,255,.3); transform:skewX(-4deg); } .bj-banca-ficha::before{content:"";position:absolute;left:2px;right:2px;top:-8px;height:9px;border-radius:50%;border:1px solid rgba(255,255,255,.42);background:inherit;box-shadow:0 -3px 0 rgba(8,8,11,.9)} .bj-banca-ficha--1{left:48px;background:repeating-linear-gradient(90deg,#8d1a16 0 5px,#e2453a 5px 8px)} .bj-banca-ficha--5{left:98px;background:repeating-linear-gradient(90deg,#a95716 0 5px,#f0a33c 5px 8px)} .bj-banca-ficha--25{left:148px;background:repeating-linear-gradient(90deg,#b9aa8f 0 5px,#f5f0df 5px 8px)} .bj-banca-ficha--100{left:198px;background:repeating-linear-gradient(90deg,#0d0e13 0 5px,#32343e 5px 8px)} /* casillas: aca TIENE que aterrizar la carta */ /* Las casillas se dibujan sobre el paño, que esta rotado: por eso su alto en pantalla es menor que el de la carta. Se agrandan para que la carta entre de verdad y no parezca apoyada en el canto. */ .bj-casilla{ position:absolute;bottom:11%; width:92px;height:150px; border:1px dashed rgba(246,198,74,.22); border-radius:7px; } /* Cada mano es un grupo compacto. Antes las casillas 1 y 2 estaban separadas un 17% de la mesa y las cartas del jugador parecian de dos partidas distintas. */ /* ---- LAS MANOS SE ABANICAN, NO SE REPARTEN POR EL PAÑO ---- Antes cada hueco iba 10% mas a la derecha: con un paño de 1000px son 100px entre cartas de 84px, o sea nunca se tocaban y parecian manos de partidas distintas. En un casino online las cartas se MONTAN unas sobre otras, corridas ~30px y giradas un poco. Se posicionan en px desde el centro para que el grupo quede centrado y compacto. */ /* ---- LAS DOS MANOS, BIEN SEPARADAS EN PROFUNDIDAD ---- La del jugador pegada al canto (frente) y la del croupier arriba del paño (fondo). Antes estaban a 6% y 56% de un paño de 420px: en pantalla quedaban casi una sobre la otra. Y el abanico se AFLOJA: 31px de corrimiento sobre cartas de 84px tapaba mas de la mitad de cada foto. Ahora se corren ~56px, o sea se montan un tercio, que es lo que hace una mesa de verdad y deja ver la imagen de cada carta. */ /* La fila del jugador NO puede pegarse al borde: a 4% la mitad de abajo de la carta caia fuera del paño y el canto de cuero se la comia (se veian cortadas). Se sube para que la carta entera quede sobre el fieltro. */ /* ---- LAS ZONAS NO SE PUEDEN CRUZAR ---- Estaba en bottom:18% con 150px de alto, y el circulo de apuesta en bottom:19%: el circulo caia DENTRO de las cartas. Ahora las cartas ocupan la franja media y dejan libre la de abajo para la apuesta. */ /* ---- LAS CASILLAS, UNA POR PUESTO ---- 4 puestos contando el del jugador humano. Cada X coincide con su circulo del SVG y con su personaje: 16 / 38 / 62 / 84 %. Los de los extremos van mas abajo (bottom menor) porque el arco de la mesa baja hacia los costados. */ .bj-casilla{margin-left:-46px;height:132px} /* --- TU puesto (62%): hasta 5 cartas por dobleces --- */ /* TU mano: el centro del arco. Es el puesto principal, asi que sus cartas son las mas grandes y con mas aire entre ellas. */ .bj-casilla--1{left:58%;bottom:38%;transform:translateX(-46px) rotate(-4deg)} .bj-casilla--2{left:58%;bottom:38%;transform:translateX(-12px) rotate(0deg)} .bj-casilla--3{left:58%;bottom:38%;transform:translateX(22px) rotate(4deg)} /* --- CADA MANO DELANTE DE SU DUENO, A LO ANCHO DE LA MESA --- La mesa es un semicirculo grande: hay que USARLA. Cada jugador recibe sus cartas en el fieltro que tiene enfrente, no en el centro (amontonar las 4 manos en el medio deja media mesa vacia y no se entiende de quien es cada carta). La unica correccion respecto del personaje es una separacion chica hacia el centro y hacia arriba: lo justo para que la carta caiga en el pano y no sobre su cara. El abanico usa 26px de paso, que deja ver la esquina superior izquierda de cada carta, donde va el VALOR. */ /* --- chumcho (personaje en 6%): su mano en 14% --- */ .bj-casilla--i1{left:14%;bottom:52%;transform:translateX(-36px) rotate(-14deg)} .bj-casilla--i2{left:14%;bottom:52%;transform:translateX(-12px) rotate(-11deg)} .bj-casilla--i3{left:14%;bottom:52%;transform:translateX(12px) rotate(-8deg)} .bj-casilla--i4{left:14%;bottom:52%;transform:translateX(36px) rotate(-5deg)} /* --- veterano (personaje en 26%): su mano en 33% --- */ .bj-casilla--v1{left:33%;bottom:44%;transform:translateX(-36px) rotate(-9deg)} .bj-casilla--v2{left:33%;bottom:44%;transform:translateX(-12px) rotate(-6deg)} .bj-casilla--v3{left:33%;bottom:44%;transform:translateX(12px) rotate(-3deg)} .bj-casilla--v4{left:33%;bottom:44%;transform:translateX(36px) rotate(0deg)} /* --- coqueta (personaje en 93%): su mano en 84%. No mas a la derecha: ahi esta el sabot. --- */ .bj-casilla--d1{left:84%;bottom:52%;transform:translateX(-36px) rotate(5deg)} .bj-casilla--d2{left:84%;bottom:52%;transform:translateX(-12px) rotate(8deg)} .bj-casilla--d3{left:84%;bottom:52%;transform:translateX(12px) rotate(11deg)} .bj-casilla--d4{left:84%;bottom:52%;transform:translateX(36px) rotate(14deg)} /* las cartas de los secundarios, un poco mas chicas: estan mas lejos en la mesa que las tuyas */ .bj-casilla--i1,.bj-casilla--i2,.bj-casilla--i3,.bj-casilla--i4, .bj-casilla--v1,.bj-casilla--v2,.bj-casilla--v3,.bj-casilla--v4, .bj-casilla--d1,.bj-casilla--d2,.bj-casilla--d3,.bj-casilla--d4{ width:72px;height:98px;margin-left:-36px; } /* la mano del croupier, al fondo, con el mismo criterio */ .bj-casilla--c1,.bj-casilla--c2,.bj-casilla--c3, .bj-casilla--c4,.bj-casilla--c5{ bottom:68%;width:78px;height:106px;margin-left:-39px; } .bj-casilla--c1{left:50%;transform:translateX(-78px) rotate(-5deg)} .bj-casilla--c2{left:50%;transform:translateX(-26px) rotate(-2deg)} .bj-casilla--c3{left:50%;transform:translateX(26px) rotate(2deg)} .bj-casilla--c4{left:50%;transform:translateX(78px) rotate(5deg)} .bj-casilla--c5{left:50%;transform:translateX(130px) rotate(8deg)} .bj-zona-croupier{ position:absolute;left:50%;top:7%;transform:translateX(-50%); color:rgba(246,198,74,.55);font-size:9px;letter-spacing:.25em; text-transform:uppercase;white-space:nowrap; } /* ============================================================ EL SABOT Va sobre el paño, a la izquierda de quien mira, al alcance de la mano derecha del croupier. Antes estaba al otro lado y a media altura: la carta salia de la nada. ============================================================ */ /* El sabot va del lado de la mano que reparte (la derecha del croupier, a la derecha de quien mira). Antes estaba en el extremo opuesto del paño: la carta nacia a 471 px de la mano y no habia brazo que llegara. */ /* ---- EL SABOT, CON CUERPO DE VERDAD ---- Estaba plano: seis divs superpuestos y un rotateZ, que solo gira dentro del plano. Aunque el padre fuera preserve-3d, ninguna cara tenia translateZ ni rotateX, asi que era una calcomania. Ahora es una caja real: la rampa es la cara de arriba (tumbada con el paño), y el frente, el costado y la tapa se levantan con rotateX/rotateY desde sus propios bordes. */ /* ============================================================ EL SABOT, COMO EL DE VERDAD Referencia: la foto que mando el usuario. NO es una cuña de madera clara. Es una CAJA NEGRA de plastico brillante: - alargada y PROFUNDA, mas larga que ancha - ABIERTA ARRIBA (se ve el hueco y la pared interior) - se ANGOSTA hacia adelante, en rampa descendente - una LENGÜETA plana asomando al frente, donde se apoya el pulgar - una MUESCA REDONDA en el frente: por ahi sale la carta - brillos duros de plastico negro, nada de vetas de madera Se arma con caras reales en 3D dentro de un preserve-3d propio. ============================================================ */ /* ---- POR QUE UN DIBUJO Y NO CARAS DE CSS ---- Tres intentos con caras planas de CSS terminaron igual: la caja se desarmaba como un biombo roto. El motivo es estructural: las caras cuelgan del paño, que ya esta rotado 58 grados, y cada giro nuevo las desalinea entre si; encima los clip-path empiezan a recortar por el lado equivocado. Un SVG es UN SOLO trazado en perspectiva: no se puede desarmar, porque no hay piezas que se muevan una respecto de la otra. */ /* AL COSTADO DEL CROUPIER, no en la punta de la mesa. Estaba en right:3% (el extremo del paño) y el brazo que reparte nace en left:50%+104px, o sea al lado del torso: el sabot quedaba a media mesa de distancia y el brazo tenia que cruzar todo el fieltro. Aca va donde lo tendria un croupier: pegado a su mano derecha. */ /* ---- VERTICAL Y ALTO, NO TUMBADO ---- La foto de referencia lo muestra como una caja DE PIE, vista casi de frente: alta, con las cartas asomando por arriba y la tapa abierta hacia atras. Yo lo venia dibujando acostado, como una rampa chata, y por eso parecia una cuchilla o un pisapapeles. Encuadre vertical: mas alto que ancho. */ /* a la derecha del croupier y algo mas abajo, para no taparle el rotulo curvado del arco grande. Sigue al alcance de la mano. */ /* mas alto y algo mas angosto: se veia como un cubo chico. Un sabot es una caja ALARGADA, y la esbeltez es lo que lo identifica. */ /* ============================================================ EL SABOT: LA FOTO REAL, APOYADA EN EL PAÑO Historia corta: diez intentos de dibujarlo. Los de CSS abrian las caras como un biombo (el translate se aplicaba sobre el eje ya rotado); los de SVG eran laminas sin volumen. La foto del sabot de verdad, recortada con alfa, se ve como lo que es. ============================================================ */ .bj-sabot{ position:absolute;right:11%;top:2%; width:214px;height:176px; transform:scaleX(-1); z-index:7; pointer-events:none; } .sabot-foto{ display:block;width:100%;height:100%;object-fit:contain; filter:drop-shadow(0 14px 16px rgba(0,0,0,.8)) drop-shadow(0 2px 3px rgba(0,0,0,.6)); } .sabot-cuerpo{ position:absolute;inset:8% 4% 12% 6%; transform:skewY(-8deg) rotate(-3deg); clip-path:polygon(8% 8%,100% 0,91% 82%,0 100%); background: linear-gradient(130deg,rgba(255,255,255,.2),transparent 15%), linear-gradient(180deg,#34343a 0%,#111116 42%,#050507 100%); border:2px solid #474750; border-radius:8px 4px 12px 9px; box-shadow:12px 17px 18px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.18); } .sabot-cuerpo::before{ content:"";position:absolute;left:13%;top:12%;width:74%;height:45%; transform:skewY(5deg); background:linear-gradient(180deg,#08080b,#202027 45%,#09090b); border:2px solid #555560;border-radius:4px 4px 12px 12px; box-shadow:inset 0 5px 10px rgba(255,255,255,.08); } .sabot-carta{ position:absolute;left:35%;top:1%;width:25%;height:38%; transform:rotate(3deg); background:linear-gradient(135deg,#c83d3d,#641116 70%); border:1px solid #e4aa78;border-radius:2px; box-shadow:0 0 0 2px rgba(0,0,0,.55),0 4px 8px rgba(0,0,0,.7); } .sabot-lengua{ position:absolute;right:3%;bottom:3%;width:28%;height:18%; transform:rotate(-5deg); background:linear-gradient(180deg,#4a4a54,#15151a); border:1px solid #666671;border-radius:3px 3px 8px 4px; box-shadow:0 7px 10px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.24); } /* LA BOCA: la muesca de la foto, de donde sale la carta. El JS la usa con centroEn(boca), asi que es un punto, no un dibujo. Medido sobre la imagen: la muesca cae al 72% del ancho y al 78% del alto. */ .sabot-boca{ position:absolute;left:36%;top:70%; width:44px;height:12px; background:transparent; } /* ============================================================ LA CARTA ============================================================ */ .bj-carta{ position:absolute;left:0;top:0; width:84px;height:114px; transform-style:preserve-3d; opacity:0;pointer-events:none; /* ---- DE DONDE VENIA EL SALTO ---- Esto estaba en 30, y las cartas ya apoyadas se fijan con zIndex 40, 41, 42... O sea la carta nueva viajaba POR DEBAJO de las anteriores y, al aterrizar, se convertia en carta fija con z-index 43 y SALTABA hacia arriba. En vuelo va por encima de todo: llega por arriba y al apoyarse no cambia de plano. */ z-index:300; } /* Una carta ya repartida se convierte en una pieza fija de la mesa. La siguiente animacion usa solamente #carta como carta en transito, asi nunca borra ni reemplaza una carta que ya llego a su destino. */ /* ---- LAS CARTAS TIENEN CUERPO ---- Se montaban como calcomanias planas. Un canto claro arriba y a la izquierda, mas una sombra propia, hacen que cada carta se lea COMO UNA PIEZA encima de la anterior y no como una mancha. */ .bj-carta--mesa{ pointer-events:none;z-index:32; } .bj-carta--mesa .carta-cara{ box-shadow: 0 2px 0 rgba(255,255,255,.10), /* filo de arriba */ -2px 0 0 rgba(255,255,255,.05), /* filo izquierdo */ 3px 5px 0 rgba(0,0,0,.35), /* grosor del naipe */ 0 14px 26px rgba(0,0,0,.7); /* sombra en el paño */ border:1px solid #15100a; } .carta-cara{ position:absolute;inset:0; /* ---- SIN ESTO SE VE EL DORSO EN PC ---- Las dos caras de la carta se voltean con rotateY(180deg). Sin backface-visibility:hidden, la cara que esta de espaldas SE SIGUE VIENDO, y al hacer hover o abrir el zoom asomaba el dorso rojo sobre la foto. Va en la regla BASE (PC y celular): antes estaba solo dentro del @media de celular. */ backface-visibility:hidden; -webkit-backface-visibility:hidden; transform:translateZ(0.1px); border-radius:7px;border:1px solid #0b0907; overflow:hidden; box-shadow:0 12px 22px rgba(0,0,0,.65); } .carta-dorso{ background: repeating-linear-gradient(45deg, rgba(0,0,0,.22) 0 3px, transparent 3px 6px), repeating-linear-gradient(-45deg, rgba(0,0,0,.18) 0 3px, transparent 3px 6px), linear-gradient(160deg,#7a1212,#4a0b0b); transform:rotateY(180deg) translateZ(0.1px); } .carta-dorso::after{ content:"";position:absolute;inset:7px; border:1px solid rgba(246,198,74,.45);border-radius:4px; } .carta-foto{ background:#0b0907 50% 50%/cover no-repeat; filter:grayscale(.25) contrast(1.08); } .carta-foto::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg,transparent 52%,rgba(0,0,0,.74)); } /* EL NUMERO, arriba de la carta */ .carta-num{ position:absolute;left:0;right:0;top:-32px; text-align:center;font-family:var(--slab); font-size:28px;line-height:1;color:var(--yellow); text-shadow:0 2px 0 #7a1212, 0 0 16px rgba(246,198,74,.5); } /* El valor de la carta de pozo no puede asomarse mientras sigue boca abajo, ni siquiera durante los cuadros intermedios de GSAP. */ .carta--oculta .carta-num{visibility:hidden!important} .carta-esq{ position:absolute;left:7px;top:5px;z-index:3; font-family:var(--slab);font-size:20px;color:var(--cream); text-shadow:0 2px 4px #000; } .carta-pinta{ position:absolute;right:7px;bottom:6px;z-index:3; font-size:16px;color:var(--yellow);text-shadow:0 2px 4px #000; } /* ============================================================ LAS FICHAS FISICAS El sistema de apuesta era un numero en el panel. Ahora hay fichas de verdad: pilas con canto, valores reales, y viajan del cajon a la casilla cuando apuestas. ============================================================ */ .bj-cajon{ position:absolute;left:50%;bottom:1%; width:430px;height:92px;margin-left:-215px; display:flex;justify-content:center;align-items:flex-end;gap:14px; z-index:34; } /* una pila de fichas: el canto apilado le da el volumen */ .ficha{ position:relative;width:82px;height:82px; border-radius:50%; cursor:pointer; border:none;padding:0; background:transparent; transition:transform .16s ease; } .ficha:hover{transform:translateY(-7px)} .ficha:disabled{opacity:.35;cursor:not-allowed} /* la cara de arriba */ .ficha i{ position:absolute;inset:0;border-radius:50%; display:grid;place-items:center; font-family:var(--slab);font-size:18px;color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.7); border:3px solid #17151a; box-shadow:inset 0 0 0 4px rgba(255,255,255,.34), inset 0 0 0 7px rgba(0,0,0,.24), inset 0 0 0 10px rgba(255,255,255,.12); } /* el CANTO: varias capas apiladas = la ficha tiene espesor */ .ficha::before{ content:"";position:absolute;left:0;right:0;top:5px;bottom:-5px; border-radius:50%; background:repeating-linear-gradient(180deg, rgba(0,0,0,.5) 0 2px, rgba(255,255,255,.18) 2px 4px); filter:brightness(.62); } .ficha::after{ content:"";position:absolute;left:0;right:0;top:0;bottom:0; border-radius:50%; box-shadow:0 8px 12px rgba(0,0,0,.7); } .ficha--1 i{background-color:#c83d34;background-image:url("/bj/ficha-10.png");background-size:cover;background-position:center} .ficha--1 i{color:#2a2620} .ficha--5 i{background-color:#d4862e;background-image:url("/bj/ficha-25.png");background-size:cover;background-position:center} .ficha--25 i{background-color:#eee6d5;background-image:url("/bj/ficha-100.png");background-size:cover;background-position:center;color:#17151a} .ficha--100 i{background-color:#171820;background-image:url("/bj/ficha-mask.png");background-size:cover;background-position:center;color:#fff} /* ---- EL CIRCULO DE APUESTA ---- Aca van las fichas. Antes las mandaba a #casilla1, que es donde caen las CARTAS del jugador: ficha y carta se peleaban el mismo sitio y la ficha quedaba sepultada. En una mesa real el circulo esta DELANTE de las cartas, entre la mano y el borde. */ /* El aro y el rotulo los dibuja ahora el SVG (puesto central), asi comparten coordenadas con las cartas y los personajes. Este div se conserva SIN pintura: sigue siendo el blanco al que vuelan las fichas (volarFicha lo busca por id), pero ya no dibuja un segundo circulo encima del del SVG. Su posicion se alinea con el puesto central del SVG: el trazado va de top:16% a top:90% del paño (74% de alto) y el circulo central esta en y=372 de un viewBox de 420 => 16% + (372/420)*74% = ~81.5% del paño desde arriba, o sea bottom ~18.5%. */ .bj-circulo{ position:absolute;left:62%;bottom:18.5%; width:112px;height:56px;margin-left:-56px; pointer-events:none; z-index:3; } /* El rotulo "TU APUESTA" lo pone el SVG, curvado y en su sitio. Este ::after escribia un segundo "APUESTA" encima. */ .bj-circulo::after{content:none} .bj-puestos{ position:absolute;left:10%;right:10%;bottom:18%;height:118px; display:none; justify-content:space-between;align-items:flex-end; pointer-events:none;z-index:2; } .bj-puesto{ width:108px;height:108px;border:3px solid rgba(246,214,138,.48); border-radius:50%;display:grid;place-items:center; color:rgba(246,214,138,.6);font-size:10px;letter-spacing:.18em; text-transform:uppercase;text-shadow:0 2px 3px rgba(0,0,0,.8); box-shadow:inset 0 0 0 4px rgba(246,214,138,.12),0 4px 12px rgba(0,0,0,.18); } .bj-puesto--central{visibility:hidden} /* las fichas apostadas, sobre el circulo */ .ficha-apostada{ position:absolute;width:66px;height:66px; border-radius:50%; pointer-events:none; /* 400: por encima de las cartas apoyadas (40+) y de la carta en vuelo (300). La apuesta nunca se tapa. */ z-index:400;pointer-events:none;cursor:pointer; border:3px solid #17151a; box-shadow:inset 0 0 0 4px rgba(255,255,255,.3),inset 0 0 0 8px rgba(0,0,0,.22),0 8px 12px rgba(0,0,0,.7); display:grid;place-items:center; font-family:var(--slab);font-size:13px;font-weight:bold;color:#17151a; text-shadow:0 1px rgba(255,255,255,.5); } .ficha-apostada::before{content:"";position:absolute;inset:9px;border:1px dashed rgba(20,16,12,.65);border-radius:50%} .ficha-apostada span{position:relative;z-index:1} .ficha-apostada--1{background-color:#c83d34;background-image:url("/bj/ficha-10.png");background-size:cover;background-position:center} .ficha-apostada--5{background-color:#d4862e;background-image:url("/bj/ficha-25.png");background-size:cover;background-position:center;color:#fff} .ficha-apostada--25{background-color:#eee6d5;background-image:url("/bj/ficha-100.png");background-size:cover;background-position:center} .ficha-apostada--100{background-color:#171820;background-image:url("/bj/ficha-mask.png");background-size:cover;background-position:center;color:#fff} .bj.juego-activo .ficha-apostada{pointer-events:auto} /* ---------- mando del boceto ---------- */ .mando{text-align:center;padding:2px 16px 28px} .mando button{ font-family:var(--slab);letter-spacing:.12em;text-transform:uppercase; background:var(--gold);color:#0b0907; border:2px solid #0b0907;padding:11px 22px;margin:5px; font-size:14px;cursor:pointer;box-shadow:4px 4px 0 var(--blood); transition:transform .12s ease, box-shadow .12s ease; } .mando button:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--blood)} .mando button:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--blood)} .paso{ display:inline-block;margin-top:10px;padding:5px 12px; border:1px solid #3a3228;color:var(--gold); font-size:11px;letter-spacing:.22em;text-transform:uppercase; } .nota{ margin:12px auto 0;max-width:640px; font-size:11px;line-height:1.8;color:#8a7a55;letter-spacing:.08em; } .casino-panel{max-width:740px;margin:0 auto 18px;padding:14px;border:1px solid #5b431b;background:linear-gradient(135deg,#17110a,#0b0907);text-align:center} .casino-info{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;color:var(--cream);font-size:12px;letter-spacing:.12em;text-transform:uppercase} .casino-info strong{color:var(--yellow);font-size:17px} .casino-estado{margin:10px 0;color:var(--gold);font-size:12px;letter-spacing:.11em;text-transform:uppercase;min-height:18px} .casino-acciones button{font-family:var(--slab);letter-spacing:.08em;text-transform:uppercase;background:#efe2c2;color:#0b0907;border:1px solid #7a1212;padding:9px 12px;margin:3px;cursor:pointer} .casino-acciones button.principal{background:var(--gold)} .casino-acciones button:disabled{opacity:.36;cursor:not-allowed} @media (max-width:700px){ .bj{padding-left:0;padding-right:0} .bj-escena{height:680px;transform:scale(.94);transform-origin:50% 0} .cro{top:-18px;transform:translateX(-50%) translateZ(-470px) scale(.7)} .bj-pano{height:660px;transform:translateZ(30px) rotateX(58deg)} .bj-trazado{top:24%;height:48%} .bj-bandeja{top:1%;transform:translateX(-50%) scale(.76);transform-origin:50% 0} .bj-sabot{transform:scaleX(-1) scale(.78);transform-origin:100% 0} .bj-cajon{width:370px;margin-left:-185px;transform:scale(.9);transform-origin:50% 100%} .ficha{width:68px;height:68px} } /* ============================================================ GIRA EL TELEFONO La mesa es un semicirculo con 4 puestos: en vertical los personajes de los extremos se salen y las cartas se pisan. El aviso tapa SOLO la seccion del juego, no la pagina: el resto del sitio se navega normal en vertical. (La version suelta del juego escondia todo el body, que aca seria un desastre.) Se hace por CSS y no con screen.orientation.lock() porque ese API solo corre en fullscreen/PWA y en Safari iOS falla en silencio. ============================================================ */ /* cualquier seccion que pida horizontal lleva data-girar y su propio .girar adentro. Hoy: la mesa y el comic del Origen. */ [data-girar]{position:relative} .girar{ display:none; position:absolute;inset:0; z-index:60; background:radial-gradient(ellipse at 50% 40%, #16281d, #070b09 72%); color:#f6e3bd; text-align:center; padding:40px 26px; } /* solo en pantallas chicas EN VERTICAL */ @media (orientation:portrait) and (max-width:900px){ .girar{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; /* alto minimo para que el aviso no quede aplastado */ min-height:74vh; } /* el contenido se oculta detras del aviso: no tiene sentido animar y repartir cartas que nadie ve, y ahorra bateria */ /* quitada: escondia la mesa y el comic en vertical. Venia del aviso de girar el telefono, que ya no existe. */ } .girar-telefono{ width:72px;height:122px; border:3px solid #f6c64a; border-radius:12px; position:relative; animation:giraTel 2.4s ease-in-out infinite; } .girar-telefono::before{ content:"";position:absolute;left:50%;top:7px; width:24px;height:3px;margin-left:-12px; background:rgba(246,198,74,.6);border-radius:2px; } .girar-telefono::after{ content:"";position:absolute;left:50%;bottom:7px; width:18px;height:18px;margin-left:-9px; border:2px solid rgba(246,198,74,.5);border-radius:50%; } @keyframes giraTel{ 0%,28% {transform:rotate(0deg)} 62%,100% {transform:rotate(-90deg)} } /* respeta a quien pidio menos animacion */ @media (prefers-reduced-motion:reduce){ .girar-telefono{animation:none;transform:rotate(-90deg)} } .girar h2{ font-family:var(--slab,inherit); font-size:21px;letter-spacing:.06em; margin:0;color:#f6c64a; } .girar p{ margin:0;max-width:290px; font-size:14px;line-height:1.55; color:rgba(246,227,189,.82); } /* ============================================================ CARTA AMPLIABLE Las caras son fotos del archivo: tocar una la abre en grande en el visor, como hacia la galeria. Se le da un afford minimo (sube y se ilumina) para que se entienda que es tocable, sin romper la lectura de la mesa. ============================================================ */ .bj-carta--zoom{ /* sin transform en la transicion: el hover ya no lo toca, y animarlo competia con el posicionamiento de la carta */ transition:box-shadow .16s ease, filter .16s ease; } /* ---- EL HOVER SOLO DONDE HAY PUNTERO DE VERDAD ---- En tactil el :hover es intermitente (el dedo lo activa, lo pierde al moverse un pixel, lo reactiva) y cada vez aplicaba/quitaba un translateY+scale. Ese transform PISA el posicionamiento de la carta apoyada, que ya usa transform para su rotacion: la carta saltaba. Eso era el parpadeo al intentar tocarla. */ /* ---- EL HOVER NO PUEDE USAR transform ---- BUG en PC: el translateY(-7px) scale(1.05) del hover PISABA el transform de posicionamiento de la carta apoyada, que lleva su propia rotacion (rotate(-5deg), etc). Al pasar el mouse la carta perdia su rotacion y saltaba de sitio; al salir volvia. Eso era el parpadeo de las cartas en PC. Ahora el hover usa SOLO box-shadow y filter, que no tocan la posicion. El efecto de \levantarse\ lo da la sombra mas grande. */ @media (hover:hover) and (pointer:fine){ .bj-carta--zoom:hover{ box-shadow:0 14px 26px rgba(0,0,0,.75); filter:brightness(1.12); } } /* una sola regla de foco (habia DOS peleando) */ .bj-carta--zoom:focus-visible{ box-shadow:0 0 0 3px #f6c64a, 0 14px 26px rgba(0,0,0,.72); filter:brightness(1.12); outline:none; } /* la lupita, para que se lea la intencion */ .bj-carta--zoom::after{ content:"\2315"; position:absolute;right:5px;bottom:4px; font-size:13px;line-height:1; color:rgba(255,248,230,.9); text-shadow:0 1px 3px rgba(0,0,0,.9); opacity:0; transition:opacity .16s ease; pointer-events:none; z-index:5; } .bj-carta--zoom:hover::after, .bj-carta--zoom:focus-visible::after{opacity:1} @media (hover:none){ /* en tactil no hay hover: la lupita va siempre visible y mas chica, para no tapar el valor de la carta */ .bj-carta--zoom::after{opacity:.75;font-size:11px} } /* ============================================================ PANTALLA COMPLETA · el mismo patron que el doom de este sitio Encajada en el panel, la mesa hereda padding, ancho maximo y el dock flotante encima: en celular queda aplastada y recortada. A pantalla completa se ve como en PC, que es el objetivo. ============================================================ */ /* el boton que la activa: discreto, arriba a la derecha del panel */ .bj-full-btn{ position:absolute;right:16px;top:16px;z-index:40; display:inline-flex;align-items:center;gap:7px; padding:9px 13px; font-family:var(--type,inherit); font-size:11px;letter-spacing:.18em;text-transform:uppercase; color:#f6c64a; background:rgba(12,9,7,.82); border:2px solid rgba(246,198,74,.55); border-radius:3px; cursor:pointer; transition:background .15s ease, transform .15s ease; } .bj-full-btn:hover, .bj-full-btn:focus-visible{ background:rgba(30,20,10,.95); transform:translateY(-1px); outline:none; } .bj-full-btn::before{content:"\2922";font-size:15px;line-height:1} /* ---- EL MODO PANTALLA COMPLETA ---- */ /* en pantalla completa sobran los rotulos del panel: el espacio es para la mesa */ /* la mesa se ESCALA para entrar entera, sin recortes. La escena mide 1120x760: se calcula el factor que la hace caber en el viewport y se aplica con transform, que no reflowea nada. */ /* el dock del sitio no puede taparla (igual que con el doom) */ body.bj-full .dock{opacity:0 !important;visibility:hidden !important} body.bj-full{overflow:hidden} /* el mando de apuestas flota abajo, translucido */ .bj-zona.is-full .mando{ position:fixed;left:0;right:0;bottom:0; margin:0; padding:10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background:linear-gradient(180deg, transparent, rgba(6,8,10,.88) 40%); z-index:9520; text-align:center; } /* el boton de salir, dentro del modo full */ .bj-zona.is-full .bj-full-btn{ position:fixed;right:12px;top:12px;z-index:9530; } .bj-zona.is-full .bj-full-btn::before{content:"\2715"} /* ---- EL AVISO DE GIRAR, EN PANTALLA COMPLETA ---- Si el telefono esta vertical, el aviso tambien tapa todo: asi se ve completo y no aplastado dentro del panel. */ @media (orientation:portrait) and (max-width:900px){ .girar{ position:fixed;inset:0; z-index:9600; min-height:100vh;min-height:100dvh; } } /* ============================================================ EL COMIC, TAMBIEN A PANTALLA COMPLETA Se despliega en dos paginas lado a lado: dentro del panel, en un celular, quedan diminutas y aplastadas. ============================================================ */ /* ============================================================ EL MANDO FLOTANTE · como el gamepad del doom Problema: los controles vivian en un bloque debajo de la mesa, asi que en celular habia que SCROLLEAR para apostar o dar propina — imposible jugar. Ahora flotan SOBRE el juego, translucidos, a los lados: fichas a la izquierda, acciones a la derecha, como un gamepad. El centro queda libre para ver la mesa. ============================================================ */ .bj-pad{display:none} .bj-zona.is-full .bj-pad{ display:flex; position:fixed;inset:auto 0 0 0; justify-content:space-between;align-items:flex-end; padding:0 12px calc(12px + env(safe-area-inset-bottom, 0px)); z-index:9540; pointer-events:none; /* solo los botones reciben el toque */ } /* el bloque viejo de controles se esconde en modo full: lo reemplaza el mando flotante */ .bj-zona.is-full .mando{display:none} .bj-pad-grupo{ display:flex;flex-direction:column;gap:6px; pointer-events:auto; } .bj-pad-fila{display:flex;gap:6px;align-items:center} /* los botones: translucidos, grandes para el pulgar (44px minimo, que es el objetivo tactil recomendado) */ .bj-pad-b{ min-width:52px;min-height:44px; padding:9px 11px; font-family:var(--type,inherit); font-size:10px;letter-spacing:.1em;text-transform:uppercase; color:#f6e3bd; background:rgba(14,10,8,.62); border:1.5px solid rgba(246,198,74,.4); border-radius:6px; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:background .1s ease, transform .1s ease; } .bj-pad-b:active, .bj-pad-b.is-down{ background:rgba(246,198,74,.82); color:#140d06; transform:scale(.94); } .bj-pad-b:disabled{opacity:.34;cursor:default} /* el principal (repartir) resalta */ .bj-pad-b--main{ background:rgba(120,32,12,.58); border-color:rgba(226,69,58,.6); color:#ffe7c4; font-size:11px; min-width:78px; } .bj-pad-b--main:active, .bj-pad-b--main.is-down{background:rgba(226,69,58,.9);color:#fff} /* las fichas del mando: redondas, como fichas de verdad */ .bj-pad-ficha{ width:46px;height:46px; border-radius:50%; border:2px dashed rgba(255,255,255,.5); font-family:var(--slab,inherit); font-size:12px;font-weight:700; color:#fff; cursor:pointer; -webkit-tap-highlight-color:transparent; box-shadow:0 3px 8px rgba(0,0,0,.6); transition:transform .1s ease; } .bj-pad-ficha:active{transform:scale(.9)} .bj-pad-ficha--1{background:#c83d34} .bj-pad-ficha--5{background:#d4862e} .bj-pad-ficha--25{background:#2f7a54} .bj-pad-ficha--100{background:#1b1c24} /* el marcador: arriba, translucido, para no perder de vista saldo y puntaje sin scrollear */ .bj-zona.is-full .bj-hud{ display:flex; position:fixed;left:0;right:0;top:0; justify-content:center;gap:16px; padding:calc(8px + env(safe-area-inset-top, 0px)) 14px 8px; background:linear-gradient(180deg, rgba(6,8,10,.86), transparent); font-family:var(--type,inherit); font-size:11px;letter-spacing:.12em;text-transform:uppercase; color:#f6e3bd; z-index:9540; pointer-events:none; } .bj-hud{display:none} .bj-hud b{color:#f6c64a;font-size:13px} /* en pantallas muy bajas (celular horizontal) el mando se compacta */ @media (max-height:460px){ .bj-pad-b{min-height:38px;padding:7px 9px;font-size:9px} .bj-pad-ficha{width:40px;height:40px;font-size:11px} .bj-zona.is-full .bj-hud{font-size:10px;padding-top:4px} } /* ============================================================ EL MANDO Y EL MARCADOR SOLO EXISTEN EN PANTALLA COMPLETA Sintoma: aparecian como texto y botones crudos al final de la pagina, fuera de la mesa. Son controles del modo full y no tienen que verse en el flujo normal del sitio. Se ocultan con !important porque el CSS del sitio define estilos de boton genericos que los volvian visibles. ============================================================ */ .bj-hud, .bj-pad{display:none } .bj-zona.is-full .bj-hud, .bj-zona.is-full .bj-pad{display:flex } /* ============================================================ EL JUEGO NO FUNCIONABA DENTRO DE index.html Causa raiz: la
del sitio declara .panel{ perspective:1200px; perspective-origin:50% 45% } Esa perspectiva del PADRE pisa la de .bj (900px / 50% 6%) y desarma el 3D entero: el croupier y los personajes (que viven en translateZ negativo) se van fuera del encuadre o se colapsan, el pano pierde su inclinacion y las cartas aterrizan en cualquier parte. En el archivo suelto no pasaba porque ahi .bj era la unica perspectiva de la pagina. Ademas .panel-scan (rayas + mix-blend-mode:multiply, z-index 3) se dibujaba ENCIMA de la mesa: de ahi las rayas horizontales sobre el pano. ============================================================ */ /* la seccion del juego NO impone perspectiva: la pone .bj */ /* ni su viñeta de rayas sobre la mesa */ .panel--bj > .panel-scan, .panel--bj > .panel-grain{display:none !important} /* el fondo del panel tampoco puede quedar sobre el juego */ /* .bj recupera el mando de la escena 3D */ /* ============================================================ EL COMIC A PANTALLA COMPLETA, SIN APLASTARSE El comic vive en .panel--origin, que tambien impone perspective:1200px del sitio. En modo full se anula para que el escalado del JS mande, y se le da todo el viewport. ============================================================ */ /* OJO: aca habia un scale sobre .comic (el comic INDIVIDUAL). Esa regla pisaba la de .comic-mesa y sobreescribia los transform propios del apilado — cada comic tiene su rotacion y su offset para verse como dos revistas sobre la mesa. Resultado: se perdia el apilado y se veia UN comic gigante y recortado. El escalado va SOLO en .comic-mesa (el contenedor), que lleva los dos comics adentro y conserva sus transforms. */ /* ============================================================ ENTRAR / SALIR: dos botones distintos, no uno que alterna El boton unico que cambiaba de icono no comunicaba nada: no se sabia si entrabas o salias. Ahora hay una PORTADA con un boton grande de ENTRAR (que abre el juego en pantalla completa de una), y dentro del modo full un boton de SALIR siempre visible para volver a navegar el sitio. ============================================================ */ /* ---- LA PORTADA (fuera del modo full) ---- */ .bj-portada{ display:flex;flex-direction:column;align-items:center;gap:18px; padding:26px 20px 34px; text-align:center; } .bj-zona.is-full .bj-portada{display:none} .bj-entrar{ display:inline-flex;align-items:center;gap:11px; padding:16px 30px; font-family:var(--slab,var(--type,inherit)); font-size:16px;letter-spacing:.14em;text-transform:uppercase; color:#160d09; background:linear-gradient(180deg,#f6c64a,#d99a1e); border:3px solid #160d09; border-radius:4px; box-shadow:6px 6px 0 #7a1212; cursor:pointer; transition:transform .14s ease, box-shadow .14s ease; } .bj-entrar:hover,.bj-entrar:focus-visible{ transform:translate(-3px,-3px); box-shadow:9px 9px 0 #7a1212; outline:none; } .bj-entrar:active{transform:translate(2px,2px);box-shadow:3px 3px 0 #7a1212} .bj-entrar::before{content:2660;font-size:20px;line-height:1} .bj-portada-nota{ font-family:var(--type,inherit); font-size:11px;letter-spacing:.2em;text-transform:uppercase; color:rgba(239,226,194,.6); max-width:340px;line-height:1.7; } /* la mesa no se muestra hasta entrar: asi no se ve aplastada dentro del panel, que era la queja */ /* la mesa se ve tambien fuera del modo full (mas chica, dentro del panel): antes se escondia, pero como ahora se entra SOLO al llegar a la seccion, esconderla dejaba un hueco negro si el usuario salia a mano. */ /* NADA de scale aca: medido con Chrome headless, un scale(.82) en .bj dejaba la escena en 794x623 en vez de 1120x760 y descuadraba todo (cartas, fichas y textos corridos). Fuera del modo full la mesa se ve a su tamaño natural, como en el archivo original. */ /* ---- EL BOTON DE SALIR (solo en modo full) ---- */ .bj-salir{display:none} .bj-zona.is-full .bj-salir{ display:inline-flex;align-items:center;gap:8px; position:fixed;right:10px; top:calc(8px + env(safe-area-inset-top, 0px)); z-index:9560; padding:10px 15px; font-family:var(--type,inherit); font-size:11px;letter-spacing:.16em;text-transform:uppercase; color:#ffe7c4; background:rgba(120,20,12,.86); border:2px solid rgba(246,198,74,.65); border-radius:4px; cursor:pointer; } .bj-zona.is-full .bj-salir:hover{background:rgba(180,34,20,.95)} .bj-zona.is-full .bj-salir::before{content:2715;font-size:13px} /* el boton viejo que alternaba ya no se usa */ .bj-full-btn{display:none } /* ---- lo mismo para el COMIC ---- */ /* ============================================================ ESCALADO EN PANTALLA COMPLETA .bj-escena usa width:min(100%,1120px): en un celular de 800px medía 800 y no 1120, asi que el calculo de escala daba un factor mucho menor al necesario y la mesa quedaba diminuta. En modo full se le fija el ancho de diseño (1120) y el JS la escala con transform: la medida pasa a ser predecible y la mesa ocupa toda la pantalla, que es el objetivo. ============================================================ */ /* ============================================================ FUERA EL AVISO DE GIRAR: SE ENTRA DIRECTO Pediste que no haya que girar el telefono a mano: al entrar a la seccion se abre en pantalla completa y se aprovecha la pantalla como venga. El aviso de 'gira el telefono' era un paso de mas que solo tapaba el contenido. El escalado del JS ya adapta la mesa y el comic a cualquier proporcion, asi que en vertical tambien entran completos. ============================================================ */ .girar{display:none !important} /* en vertical la mesa se rota 90 grados para aprovechar el alto: asi se ve GRANDE sin pedirle al usuario que gire el aparato */ @media (orientation:portrait){ /* el mando y el marcador acompañan la rotacion */ .bj-zona.is-full .bj-hud{ top:50%; transform:translate(-50%,-50%); } .bj-zona.is-full .bj-pad{ top:50%; transform:translate(-50%,-50%); } /* el comic, lo mismo */ } /* ============================================================ EL BOTON DE ENTRAR: VISIBLE, FIJO Y SOLO EN CELULAR Problema: la portada con el boton quedaba DENTRO de .panel-inner, y en la seccion del comic la tapa la portada del comic: no se veia nada y no habia forma de entrar. Ademas en PC no hace falta: ahi el contenido ya se ve completo, el modo pantalla completa es una necesidad del celular. Solucion: el boton se fija abajo-centro de la seccion, por encima de todo (z-index alto), y solo aparece en pantallas chicas. ============================================================ */ /* por defecto (PC): no se muestra. El contenido ya se ve bien. */ .bj-portada{display:none } @media (max-width:1024px){ /* en celular y tablet: boton FIJO, siempre alcanzable */ .bj-portada{ display:block ; position:absolute; left:50%;bottom:22px; transform:translateX(-50%); z-index:50; /* sobre la portada del comic y la mesa */ padding:0;margin:0; width:max-content; text-align:center; } .bj-portada-nota{display:none} /* el texto sobra: el boton se explica */ .bj-entrar{ font-size:14px; padding:15px 26px; box-shadow:5px 5px 0 #7a1212; white-space:nowrap; } /* en modo full el boton de entrar desaparece (ya entraste) */ .bj-zona.is-full .bj-portada, } /* la seccion necesita ser el ancla del boton fijo */ .panel--bj, /* ============================================================ EL COMIC EN PANTALLA COMPLETA: LA MESA CON LOS DOS Al entrar se ve la MESA con las dos revistas apiladas, para elegir cual abrir — no un comic solo a pantalla partida. El escalado se aplica a .comic-mesa (el contenedor) para que los dos conserven su rotacion y su posicion relativa. ============================================================ */ /* el fondo de madera de la mesa se mantiene: es parte de la escena */ /* ============================================================ ZOOM DE IMAGEN DENTRO DEL COMIC Las viñetas del comic son fotos del archivo: tocar una la abre en grande, como en la galeria original. Reusa el visor del muro via window.BJ_VISOR (no duplica modal). ============================================================ */ /* la lupita, para que se entienda que es tocable */ @media (hover:none){ /* en tactil no hay hover: siempre visible, mas chica */ } /* ============================================================ ESCALADO EN PANTALLA COMPLETA — EL SCALE VA FUERA DE LA ESCENA Bug que corrige: el scale se aplicaba a .bj-escena, que es el contenedor con transform-style:preserve-3d de toda la mesa. Un transform ahi crea un contexto 3D NUEVO y descuadra las posiciones en Z: cartas corridas, fichas fuera de su circulo, textos del paño desplazados. Comparado regla por regla con el original, el CSS de posiciones es identico: lo unico que rompia era este scale mal ubicado. Ahora el scale va en .bj (el wrapper de afuera) y .bj-escena queda EXACTAMENTE como en el original: la escena 3D se renderiza sin tocar y despues se agranda el conjunto entero. ============================================================ */ /* .bj-escena NO se toca: conserva su perspectiva y su preserve-3d tal como en el archivo original */ /* en vertical el conjunto rota 90 grados para aprovechar el alto, pero el rotate se compone en el MISMO transform del wrapper: asi sigue sin tocar la escena 3D de adentro */ /* ============================================================ EL COMIC EN PANTALLA COMPLETA · BLOQUE UNICO Antes esto estaba definido en 3 lugares distintos (herencia de parches sucesivos): /* fuera los adornos del panel: tapaban el comic */ /* el wrapper: centra y ROTA a horizontal. El rotate va aca, nunca en .comic-mesa, para no pisar los transform del apilado. */ /* la MESA con los dos comics: solo se escala. Sus hijos conservan la rotacion y el offset que los apila como dos revistas. */ /* ---- EN VERTICAL: SE ROTA A HORIZONTAL ---- Asi las dos paginas se leen lado a lado sin pedirle al usuario que gire el aparato. El rotate se compone con el centrado en el MISMO transform del wrapper. */ /* ============================================================ LA SECCION NO PUEDE SER MAS ALTA QUE LA PANTALLA Medido con Chrome headless: .bj-zona daba 1000x1331 px. Al entrar por #muro-sec el navegador ancla el tope de la seccion y lo que se ve es la franja vacia de arriba: PANTALLA NEGRA, aunque la mesa este renderizada mas abajo. Se acota el alto y se centra el contenido. ============================================================ */ /* la mesa se reduce lo justo para entrar en el alto disponible sin recortarse (no hay scroll dentro de la seccion) */ /* ============================================================ UN SOLO ESCALADO POR MODO (esto causaba el desorden) Habia dos variables aplicandose sobre .bj: --bj-encaje (modo normal) y --bj-escala (modo full). Cuando las dos tenian valor, los transform se componian y el layout quedaba descuadrado: cartas y fichas fuera de sus circulos. Ninguna posicion interna del juego se toca: las casillas, las fichas y los personajes conservan EXACTAMENTE las coordenadas del archivo original. Aca solo se reduce el conjunto. ============================================================ */ /* modo normal (dentro de la pagina): solo --bj-encaje */ /* modo full: solo --bj-escala, y el encaje se ignora */ /* ============================================================ LOS BOTONES NO SE DUPLICAN En PC se usa el bloque original de controles (.mando), que es ancho y cabe de sobra. En celular se usa SOLO el mando flotante (.bj-pad), que es el que permite jugar sin scrollear. Nunca los dos a la vez. ============================================================ */ /* --- PC (pantalla ancha): el bloque original, nada de mando --- */ /* --- CELULAR/TABLET: solo el mando flotante --- */ @media (max-width:1024px){ .bj-zona.is-full .mando{display:none !important} .bj-zona.is-full .bj-pad, .bj-zona.is-full .bj-hud{display:flex } } /* ============================================================ LA SECCION DEL COMIC, IGUAL QUE LA DE LA MESA No abria a pantalla completa porque su seccion no tenia el alto acotado ni el contenido centrado. Sin eso, el modo full se aplicaba pero quedaba fuera del viewport. ============================================================ */ /* ============================================================ MODO PANTALLA COMPLETA · VERSION LIMPIA Medido con Chrome headless en 900x420: la mesa se dibujaba a 1152x800 sin escalar (la variable de escala quedaba sin setear), asi que en un celular se veia gigante y descuadrada. Ahora el escalado lo hace el CSS con min(), que no puede quedar sin valor, y NINGUNA posicion interna del juego se toca: las casillas, las fichas y los personajes conservan las coordenadas del archivo original. Solo se reduce el conjunto. ============================================================ */ /* ---------- PC: TODO NORMAL, sin pedir entrar ---------- */ @media (min-width:1025px){ /* el juego se ve y se juega como en el archivo original */ .bj-portada{display:none } /* no se pide entrar */ .bj-pad,.bj-hud,.bj-salir{display:none } .panel--bj{ min-height:100vh;min-height:100dvh; display:flex;flex-direction:column;justify-content:center; padding:80px 0 40px; overflow:hidden; } /* la mesa entra completa reduciendose lo justo, sin mover nada */ .panel--bj .bj{ /* scale() necesita un NUMERO sin unidad. Dividir dos longitudes con calc() da un numero puro: (100dvh - 200px) / 800px. Antes decia /800 (sin px) y el resultado quedaba con unidad, asi que el navegador descartaba la regla y salia transform:none. */ --k:calc((100dvh - 200px) / 800px); transform:scale(min(1, var(--k))); transform-origin:50% 50%; } /* el bloque de botones original, siempre visible */ .panel--bj .mando{display:block;margin-top:8px} } /* ---------- CELULAR / TABLET ---------- */ @media (max-width:1024px){ .panel--bj{ min-height:100vh;min-height:100dvh;max-height:100vh;max-height:100dvh; overflow:hidden; display:flex;flex-direction:column;justify-content:center; padding:0; } /* fuera del modo full: vista previa reducida + boton de entrar */ .bj-zona:not(.is-full) .bj{ --kh:calc((100dvh - 150px) / 800px); --kw:calc((100vw - 20px) / 1152px); transform:scale(min(0.9, var(--kh), var(--kw))); transform-origin:50% 50%; } .bj-zona:not(.is-full) .mando{display:none} .bj-zona:not(.is-full) .bj-pad, .bj-zona:not(.is-full) .bj-hud{display:none } /* ---- MODO FULL: la mesa entera, escalada por CSS ---- */ /* NOTA: el bloque del modo pantalla completa que estaba aca se movio al final del archivo, en UN solo lugar bien anidado. Tener dos definiciones con valores de escalado distintos las hacia pelear entre si. Lo unico que queda aca es ocultar los adornos del panel, que no tiene conflicto. */ .bj-zona.is-full .panel-pre, .bj-zona.is-full .panel-title, .bj-zona.is-full .panel-tag, .bj-zona.is-full .panel-scan, .bj-zona.is-full .panel-grain, .bj-zona.is-full .bj-portada{display:none } .bj-zona.is-full .bj-pad, .bj-zona.is-full .bj-hud{display:flex } } /* ============================================================ EN PC NUNCA HAY BOTONES DUPLICADOS Medido en 1600x900: en modo full aparecian .bj-pad y .bj-hud ADEMAS de .mando (el bloque original) => botones por todos lados, que es justo lo reportado. En PC el mando flotante y el marcador superior NO existen, ni dentro ni fuera del modo full: la pantalla es ancha y el bloque original alcanza. La regla va al final para ganar por orden. ============================================================ */ @media (min-width:1025px){ .bj-pad, .bj-hud, .bj-zona.is-full .bj-pad, .bj-zona.is-full .bj-hud, .bj-portada, .bj-salir, .bj-zona.is-full .bj-salir{display:none } /* y el bloque original SIEMPRE visible */ .mando, .bj-zona.is-full .mando{display:block !important} } /* ============================================================ EL COMIC: MISMO CRITERIO QUE LA MESA PC: se ve y se usa normal, sin pedir entrar. Celular: boton para entrar, y al entrar se escala para caber entero con la X de salir accesible (no se veia porque el modo full no estaba escalando y la X quedaba fuera del viewport). ============================================================ */ @media (min-width:1025px){ /* en PC el comic no pide entrar */ } @media (max-width:1024px){ @media (orientation:portrait){ /* rotado a horizontal: se cruzan los ejes */ } /* la X de salir, siempre alcanzable por encima de todo */ } /* ============================================================ LA SECCION ORIGEN (EL COMIC) NO LLEVA PANTALLA COMPLETA Se quito a pedido: funciona como antes de que la tocara. Si alguna regla mia quedo colgada, aca se neutraliza. Lo unico que se conserva es el zoom de las fotos del comic. ============================================================ */ .comic-zona .bj-portada, .comic-zona .comic-salir, #grupos .bj-portada, #grupos .comic-salir{display:none } /* la seccion recupera su comportamiento original */ .panel--origin{ min-height:100vh;min-height:100dvh; max-height:none; overflow:hidden; } /* ============================================================ PC: LOS CONTROLES A LOS COSTADOS, NO ABAJO Problema: el bloque .mando va despues de la mesa en el flujo del documento. Con la seccion acotada a 100vh y la mesa ocupando casi todo el alto, los botones caian FUERA del area visible: habia que alejar el zoom para encontrarlos. Solucion: en pantalla de escritorio sobra ANCHO, no alto. Los controles se reparten en dos columnas laterales, la mesa queda centrada y completa, y todo se ve sin scrollear. Ninguna posicion interna del juego se toca. ============================================================ */ @media (min-width:1025px){ .panel--bj{ display:grid; /* columna izquierda (fichas) · mesa · columna derecha (acciones) */ /* mesa al centro y controles a la derecha: en PC sobra ancho */ grid-template-columns:1fr minmax(160px,210px); grid-template-areas:"mesa der"; align-items:center; justify-items:center; gap:12px; padding:70px 22px 30px; min-height:100vh;min-height:100dvh;max-height:100vh;max-height:100dvh; overflow:hidden; } /* los rotulos del panel arriba, ocupando el ancho */ .panel--bj .panel-inner{ grid-area:1 / 1 / 2 / 3; align-self:start; position:absolute;top:18px;left:0;right:0; } .panel--bj .bj{ grid-area:mesa; /* ancho de diseño explicito: dentro del grid, .bj no tiene ancho intrinseco (sus hijos son absolute) y la columna 1fr lo colapsaba a 31px */ width:1152px; justify-self:center; } /* el cajon de fichas NO se mueve: es parte de la mesa (position:absolute al pie del paño, como en el original). Sacarlo a una columna seria mover posiciones del juego. */ /* el bloque de controles pasa a la columna DERECHA, en vertical */ .panel--bj .casino-panel{ grid-area:der; display:flex ; flex-direction:column; gap:8px; margin:0;padding:0; width:100%; text-align:center; } .panel--bj .casino-panel .casino-acciones{ display:flex; flex-direction:column; gap:7px; width:100%; } .panel--bj .casino-panel .casino-acciones button{ width:100%; padding:11px 8px; font-size:11px; letter-spacing:.12em; } /* el marcador arriba de los botones */ .panel--bj .casino-panel .casino-info{ display:flex; flex-direction:column; gap:3px; font-size:11px; margin-bottom:4px; } /* el texto largo de reglas sobra en la columna: se oculta */ .panel--bj .mando{display:none} /* solo texto de reglas: sobra en la columna */ .panel--bj .casino-panel .casino-estado{ font-size:10px;line-height:1.45; margin:2px 0 6px; } /* la mesa se reduce lo justo para el alto disponible */ .panel--bj .bj{ --k:calc((100dvh - 130px) / 800px); transform:scale(min(1, var(--k))); transform-origin:50% 50%; } /* nada de mando flotante ni de pedir entrar en PC */ .bj-pad,.bj-hud,.bj-salir,.bj-portada{display:none } } /* ============================================================ SIN ROTACION · el escalado solo ya adapta la mesa Se quito la rotacion de 90 grados que yo habia puesto para "aprovechar el alto" en vertical. Rompia tres cosas: - desalineaba los hijos absolute de la mesa (cartas y fichas), - las cartas se posicionan midiendo con getBoundingClientRect y median contra coordenadas ROTADAS: salian diminutas y fuera de sitio, - y mezclaba los media de orientacion con los de ancho, asi que en un celular podia aplicarse el layout de PC. ============================================================ */ /* el marcador y el mando, en horizontal como corresponde */ .bj-zona.is-full .bj-hud{ position:fixed;left:0;right:0;top:0; width:auto; transform:none; flex-direction:row; } .bj-zona.is-full .bj-pad{ position:fixed;left:0;right:0;bottom:0;top:auto; width:auto; transform:none; } /* ============================================================ EL LAYOUT DE PC NO PUEDE APLICARSE EN CELULAR La grilla lateral (mesa + columna de botones) es SOLO para pantallas anchas de escritorio. En celular manda el mando flotante. Se refuerza con el ancho Y el tipo de puntero: un celular tiene puntero grueso (coarse), un PC fino (fine). ============================================================ */ @media (max-width:1024px), (pointer:coarse){ .panel--bj{ display:flex ; flex-direction:column !important; justify-content:center; align-items:center; padding:0 !important; grid-template-columns:none !important; grid-template-areas:none !important; } .panel--bj .bj{ width:auto !important; grid-area:auto !important; } /* los controles de PC NO se muestran en celular */ .panel--bj .casino-panel{ display:none ; } .bj-zona.is-full .casino-panel{display:none } } /* ============================================================ EL TITULO TAPABA AL CROUPIER Y AL PIT BOSS .panel-inner (los rotulos de la seccion) tiene z-index:6 del sitio. El croupier vive en z-index:0 y el pit boss en 1, y los dos sobresalen por ARRIBA de la mesa (top:14px y top:6%): el bloque del titulo les caia encima y solo se les veia el borde. Fix: el titulo se manda al fondo y deja de recibir clics; la mesa y sus personajes quedan por encima. ============================================================ */ .panel--bj .panel-inner{ z-index:1 !important; pointer-events:none; /* que no robe clics a la mesa */ } /* el contenedor de la mesa por encima del titulo */ .panel--bj .bj{ position:relative; z-index:5; } /* y el titulo se sube un poco para no solaparse con el croupier, que asoma por el borde lejano del paño */ @media (min-width:1025px){ .panel--bj{padding-top:26px} .panel--bj .panel-inner{top:8px} } /* ============================================================ QUE OCUPE MAS ALTURA Y SE ADAPTE A CUALQUIER PROPORCION Antes el escalado reservaba 110px fijos de aire y la mesa quedaba chica, sobre todo en vertical donde sobra alto. Ahora: - HORIZONTAL (celular de lado): manda el ALTO, que es lo escaso. El mando y el marcador se compactan para dejarle mas sitio. - VERTICAL: manda el ANCHO. Sobra alto, asi que la mesa se agranda hasta donde el ancho lo permita y queda centrada. Sin rotar nada y sin mover ninguna posicion del juego. ============================================================ */ @media (max-width:1024px), (pointer:coarse){ /* --- pantalla apoyada de lado: el alto es lo escaso --- */ /* --- pantalla vertical: sobra alto, manda el ancho --- */ } /* ============================================================ FUERA LAS FICHAS DEL MANDO EN CELULAR Se apuesta tocando las fichas que estan EN LA MESA (el cajon del paño), asi que las del mando flotante duplicaban la funcion y ademas robaban alto a la mesa. Quedan solo las ACCIONES (pedir, plantarse, doblar, repartir, propina y +/- apuesta), que no existen en la mesa. ============================================================ */ @media (max-width:1024px), (pointer:coarse){ .bj-pad-ficha{display:none } /* la fila que las contenia ya no ocupa lugar */ .bj-pad-grupo .bj-pad-fila:first-child:has(.bj-pad-ficha){display:none} /* el cajon de fichas de la mesa, bien visible y tocable */ .bj-zona.is-full .bj-cajon{ pointer-events:auto; z-index:40; } .bj-zona.is-full .ficha{pointer-events:auto} } /* ============================================================ EL PARPADEO Causa: los sprites y las cartas se repintan en cada cambio de pose/posicion, y el navegador re-compone la capa entera. Con la mesa escalada eso se nota como un flash y elementos que "desaparecen" un instante. Fix: se promueven a su propia capa de composicion (will-change + backface-visibility) y se desactiva el suavizado que fuerza repintados. Es la receta estandar para sprites en CSS. ============================================================ */ .cro-sprite, .jug-sprite, .cro-emocion{ image-rendering:auto; } .bj-carta, .bj-carta--mesa, .ficha-apostada{ } /* la escena se compone una vez y no en cada frame */ .bj-escena{ } /* ============================================================ ANTI-PARPADEO (parte CSS) Cada sprite en su propia capa de composicion, para que cambiar background-position no obligue al navegador a recomponer la escena entera. ============================================================ */ .cro-sprite, .jug-sprite{ /* NOTA: aca habia contain:paint, translateZ(0) y will-change. Los tres piden capa GPU y con SEIS hojas de sprites de 1376x768 el celular agota la memoria de composicion: el navegador tira capas enteras y desaparecen personajes, cartas y botones a la vez. Quitados a proposito — no volver a ponerlos. La causa real (peso de texturas) se ataca con WebP y con la retencion de los objetos Image en JS. */ } /* mientras las texturas no esten decodificadas, los sprites se mantienen con su primera pose (evita el salto inicial) */ body:not(.bj-sprites-listos) .jug-sprite, body:not(.bj-sprites-listos) .cro-sprite{ transition:none !important; } /* ============================================================ CARTAS TOCABLES EN CELULAR Problema medido: con la mesa escalada a ~0.39, una carta de 84px mide 33px en pantalla, por debajo del minimo tactil recomendado (44px). Por eso costaba acertarle. Fix: un pseudo-elemento invisible AGRANDA el area de toque sin cambiar el tamaño visual de la carta ni su posicion. ============================================================ */ @media (hover:none), (pointer:coarse){ .bj-carta--zoom{ /* nada de transiciones de transform en tactil: no hay hover que las dispare de forma estable y solo producen saltos */ transition:filter .12s ease; } /* el area de toque se extiende 14px alrededor, invisible */ .bj-carta--zoom::before{ content:""; position:absolute; inset:-14px; /* DETRAS de las caras de la carta (que no declaran z-index y quedan en 0): con z-index positivo este pseudo-elemento las tapaba y no se veia la foto. En -1 sigue recibiendo el toque porque el contenedor tiene pointer-events:auto. */ z-index:-1; background:transparent; } /* feedback al toque: en tactil :active SI es fiable */ .bj-carta--zoom:active{ filter:brightness(1.25); } /* la lupita mas grande y siempre visible */ .bj-carta--zoom::after{ opacity:.85; font-size:15px; right:3px;bottom:2px; /* por encima del area de toque */ z-index:2; } } /* ============================================================ EL VISOR DE FOTOS, POR ENCIMA DEL JUEGO #muroViewer tiene z-index:140 y vive FUERA de la seccion del juego. En modo pantalla completa la seccion usa z-index:9500, asi que la imagen de la carta se abria DETRAS del juego y recien se veia al salir. Se sube por encima. ============================================================ */ body.bj-full .muro-viewer{ z-index:99000 !important; } /* y en modo full ocupa toda la pantalla, con la imagen centrada */ body.bj-full .muro-viewer.show{ position:fixed;inset:0; display:flex;align-items:center;justify-content:center; } body.bj-full .muro-viewer .muro-viewer-in{ max-width:96vw;max-height:92vh; } body.bj-full .muro-viewer img{ max-width:96vw;max-height:80vh; width:auto;height:auto; } /* los controles del visor tambien, por encima de la imagen */ body.bj-full .muro-close, body.bj-full .muro-nav{z-index:99010 !important} /* ============================================================ EL PARPADEO: SE QUITA will-change El will-change:background-position que habia puesto para evitar el parpadeo lo EMPEORABA: pide una capa de composicion GPU por cada sprite y, con seis hojas de 1376x768, un celular agota la memoria de composicion y el navegador tira capas completas. Eso explica que desaparecieran jugadores, cartas y botones AL MISMO TIEMPO, no solo un sprite. will-change sirve para animaciones cortas, no como estado permanente. La causa real (el peso de las texturas) ya se ataco con WebP (-82%) y con la retencion de los objetos Image. ============================================================ */ .cro-sprite, .jug-sprite, .cro-emocion{ will-change:auto !important; contain:none !important; } .bj-escena, .bj-carta, .bj-carta--mesa, .ficha-apostada{ /* backface-visibility tambien fuerza capa: se libera */ backface-visibility:visible ; -webkit-backface-visibility:visible ; } /* ============================================================ EL RECORTE DEL SPRITE, POR VARIABLE CSS (anti-parpadeo) Antes el recorte venia de 24 reglas .jug-sprite[data-pose="N"]. Cambiar el atributo data-pose invalida el match de selectores: el navegador re-evalua esas 24 reglas POR CADA sprite y recalcula estilo, lo que dispara repintado. Con la mesa escalada por transform, el repintado abarca la escena compuesta entera: eso era el flash y los elementos que desaparecian un instante. Ahora el JS setea --px/--py directamente en el style. Cambiar una custom property que solo alimenta background-position es un cambio de PINTADO: repinta ese sprite y nada mas. Las reglas por atributo quedan como respaldo si el JS no corriera. ============================================================ */ /* SIN condicion de atributo: el selector [style*="--px"] dependia del atributo style, y cada setProperty lo modifica => el navegador invalidaba el match y recalculaba estilo en CADA cambio de pose. Era peor que data-pose. Ahora la regla aplica siempre y las variables llevan su valor por defecto (la celda 1). */ .jug-sprite{ background-position:var(--px, 0px) var(--py, 0px); } .cro-sprite{ background-position:var(--px, 0%) var(--py, 0%); } /* ============================================================ MODO PANTALLA COMPLETA · BLOQUE UNICO Y BIEN ANIDADO Causa de los tres bugs anteriores: habia reglas .bj-zona.is-full .bj dentro de @media (orientation:...) que quedaron FUERA del @media de ancho. Aplicaban tambien en PC y pisaban la regla correcta, con lo cual: - el modo pantalla completa perdia su position/transform, - el marcador y los globos quedaban posicionados contra un contenedor que no era el esperado (los textos en una esquina), - y con el escalado pisado, el z-index por puesto perdia referencia y una carta vieja se dibujaba sobre la nueva (las cartas del croupier "duplicadas"). TODO el modo full vive aca, y las variantes de orientacion van ANIDADAS dentro del media de ancho. No agregar reglas .bj-zona.is-full fuera de este bloque. ============================================================ */ @media (max-width:1024px), (pointer:coarse){ .bj-zona.is-full{ position:fixed;inset:0; z-index:9500; background:radial-gradient(ellipse at 50% 32%, #1a120c, #06080a 76%); display:block; overflow:hidden; padding:0;margin:0; min-height:0;max-height:none; perspective:none; } /* el wrapper: centrado y escalado. Un solo transform. */ .bj-zona.is-full .bj{ position:fixed; left:50%;top:50%; width:1152px;height:800px; margin:0; padding:8px 16px 34px; transform-origin:50% 50%; overflow:visible; /* de lado (lo habitual al jugar): manda el alto, que es lo escaso */ --kw:calc((100vw - 6px) / 1152px); --kh:calc((100dvh - 80px) / 800px); transform:translate(-50%,-50%) scale(min(var(--kw), var(--kh))); } /* vertical: sobra alto, manda el ancho */ @media (orientation:portrait){ .bj-zona.is-full .bj{ --kh:calc((100dvh - 150px) / 800px); } } /* la escena 3D no se toca: igual que en el original */ .bj-zona.is-full .bj-escena{ width:1120px;height:760px;margin:0 auto; } /* el marcador arriba y el mando abajo, fijos a la pantalla */ .bj-zona.is-full .bj-hud{ position:fixed;left:0;right:0;top:0;bottom:auto; width:auto; transform:none; flex-direction:row; justify-content:center; z-index:9540; } .bj-zona.is-full .bj-pad{ position:fixed;left:0;right:0;bottom:0;top:auto; width:auto; transform:none; z-index:9540; } /* los controles de PC no aparecen */ .bj-zona.is-full .casino-panel, .bj-zona.is-full .mando{display:none } } /* ============================================================ LOS DIALOGOS EN UNA ESQUINA · la capa estaba en absolute La capa de globos usa position:absolute, o sea que se ancla al contenedor de la PAGINA. En modo pantalla completa el contenedor pasa a fixed y la capa queda fuera de la pantalla visible: los globos se acumulaban en una esquina. Fix: en modo full la capa pasa a fixed, cubriendo la pantalla, y el JS mide las coordenadas contra ella (ya lo hace: usa el rect de capaGlobos como referencia, asi que con esto queda correcto). ============================================================ */ body.bj-full .bj-globos{ position:fixed; left:0;right:0;top:0;bottom:0; z-index:9700; /* sobre la mesa (9500) y el mando (9540) */ } /* ============================================================ APROVECHAR LA PANTALLA DE LADO Se reduce el aire reservado para el marcador y el mando, asi la mesa (y con ella el croupier y los personajes) se agranda y ocupa lo que realmente hay disponible. dvh es clave aca: con vh el calculo usaba el alto CON barra de navegacion y sobraba espacio muerto. ============================================================ */ @media (max-width:1024px), (pointer:coarse){ @media (orientation:landscape){ .bj-zona.is-full .bj{ /* de lado el alto es lo escaso: se reserva lo minimo (58px para el marcador fino arriba y el mando compacto abajo) */ --kw:calc((100dvw - 4px) / 1152px); --kh:calc((100dvh - 58px) / 800px); } /* marcador y mando al minimo, para darle alto a la mesa */ .bj-zona.is-full .bj-hud{ padding:2px 8px 1px; font-size:9px; letter-spacing:.06em; gap:10px; } .bj-zona.is-full .bj-hud b{font-size:11px} .bj-zona.is-full .bj-pad{ padding:0 6px calc(4px + env(safe-area-inset-bottom, 0px)); } .bj-zona.is-full .bj-pad-b{ min-height:30px;min-width:44px; padding:5px 7px;font-size:8.5px; } } @media (orientation:portrait){ .bj-zona.is-full .bj{ --kw:calc((100dvw - 4px) / 1152px); --kh:calc((100dvh - 120px) / 800px); } } } /* ============================================================ QUE NO SE VEA LA WEB DETRAS El fondo del modo full tiene un degradado con transparencia en los bordes. Cuando el alto cambia (barra de navegacion), por un instante se veia la pagina por detras. Se pone un color opaco de base debajo del degradado. ============================================================ */ body.bj-full{ background:#06080a !important; } .bj-zona.is-full{ /* color opaco primero, degradado encima */ background-color:#06080a; } /* ============================================================ AVISO DE GIRAR · solo en vertical, sin bloquear Calculado: en un celular de 412x915 la mesa (1152x800 de diseño) se ve a 408x283 px en vertical y a 509x354 de lado — un 25% mas grande. En vertical la limita el ANCHO y no hay forma de agrandarla (rotar el contenido da solo un 3% mas y rompe el posicionamiento de cartas y fichas: ya se probo y se revirtio). Asi que se avisa, no se bloquea: el juego funciona igual en vertical y el aviso se va al girar o al tocarlo. ============================================================ */ .bj-gira{ display:none; position:fixed; left:50%;bottom:calc(86px + env(safe-area-inset-bottom, 0px)); transform:translateX(-50%); z-index:9800; padding:9px 16px; background:rgba(12,9,7,.92); border:2px solid rgba(246,198,74,.6); border-radius:20px; color:#f6c64a; font-family:var(--type,inherit); font-size:11px;letter-spacing:.1em; white-space:nowrap; cursor:pointer; animation:bjGiraLatir 2.6s ease-in-out infinite; } @keyframes bjGiraLatir{ 0%,100%{opacity:.82} 50%{opacity:1} } @media (prefers-reduced-motion:reduce){ .bj-gira{animation:none} } /* solo en modo full, en vertical y en pantalla chica */ @media (orientation:portrait) and (max-width:1024px){ .bj-zona.is-full .bj-gira{display:block} } .bj-gira.oculto{display:none } /* ============================================================ EL CHAT DE DIALOGOS · solo en celular Los globos sobre cada personaje no sirven en pantalla chica: el personaje mide ~60px y el globo no cabe. De lado sobra espacio a los costados de la mesa, asi que los dialogos van a un chat con texto grande y legible. En PC siguen los globos. ============================================================ */ .bj-chat{display:none} @media (max-width:1024px), (pointer:coarse){ /* en celular: chat SI, globos NO */ .bj-zona.is-full .bj-globos{display:none !important} .bj-zona.is-full .bj-chat{ display:flex; flex-direction:column; justify-content:flex-end; gap:5px; position:fixed; left:6px; bottom:calc(52px + env(safe-area-inset-bottom, 0px)); width:min(46vw, 320px); max-height:52dvh; z-index:9720; pointer-events:none; overflow:hidden; } /* de lado hay mas sitio: el chat va mas ancho y mas alto */ @media (orientation:landscape){ .bj-zona.is-full .bj-chat{ left:8px; bottom:calc(40px + env(safe-area-inset-bottom, 0px)); width:min(34vw, 380px); max-height:62dvh; } } .bj-chat-msg{ display:flex; flex-direction:column; gap:1px; padding:7px 11px 8px; background:linear-gradient(180deg, rgba(255,253,246,.96), rgba(242,232,210,.94)); color:#16100a; border:2px solid #16100a; border-radius:11px; border-bottom-left-radius:3px; box-shadow:0 3px 0 rgba(22,16,10,.55), 0 8px 16px rgba(0,0,0,.5); /* TEXTO GRANDE Y CLARO: es el punto del chat */ font-family:var(--type, inherit); font-size:14px; line-height:1.32; opacity:0; transform:translateX(-14px); transition:opacity .22s ease, transform .22s cubic-bezier(.34,1.5,.64,1); } .bj-chat-msg.visible{ opacity:1; transform:translateX(0); } .bj-chat-msg b{ font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:#7a1212; font-weight:400; } /* un color de nombre por personaje, para saber quien habla */ .bj-chat-msg--chumcho b{color:#1b4f8a} .bj-chat-msg--veterano b{color:#5c4318} .bj-chat-msg--coqueta b{color:#a3184a} .bj-chat-msg--jefe{ background:linear-gradient(180deg,#1b2330,#10161f); border-color:#c8a24a; color:#f0f4fa; box-shadow:0 3px 0 rgba(120,92,28,.7), 0 8px 16px rgba(0,0,0,.55); } .bj-chat-msg--jefe b{color:#f6c64a} /* en pantallas muy bajas el texto no baja de 13px: es el minimo para leerse de un vistazo mientras se juega */ @media (max-height:400px){ .bj-chat-msg{font-size:13px;padding:5px 9px 6px} .bj-chat-msg b{font-size:9px} } } /* ============================================================ LA PORTADA · el croupier recibe antes de entrar a la mesa En celular, antes de abrir la sala se ve al croupier dando la bienvenida y abajo el boton de entrar. El retrato reusa la misma hoja de sprites del croupier (celda 1, la pose neutra): no hace falta una imagen nueva. ============================================================ */ @media (max-width:1024px), (pointer:coarse){ .bj-zona:not(.is-full) .bj-portada{ /* deja de ser un boton suelto: es una portada completa */ position:static; left:auto;bottom:auto; transform:none; display:flex ; flex-direction:column; align-items:center; gap:14px; width:100%; padding:10px 16px 26px; } /* la mesa no se muestra detras de la portada: se entra y ahi se ve */ .bj-zona:not(.is-full) .bj, .bj-zona:not(.is-full) .mando, .bj-zona:not(.is-full) .casino-panel{display:none } /* el retrato del croupier: la primera celda de su hoja */ .bj-bienvenida{ width:190px;height:236px; background-image:-webkit-image-set(url("/bj/sin-fondo-frames.webp") type("image/webp"), url("/bj/sin-fondo-frames.png") type("image/png")); background-image:image-set(url("/bj/sin-fondo-frames.webp") type("image/webp"), url("/bj/sin-fondo-frames.png") type("image/png")); background-repeat:no-repeat; /* la hoja es 6x4; se muestra la celda 1 (pose neutra) a un tamaño que entre en el retrato */ background-size:1140px 944px; background-position:-8px -6px; filter:drop-shadow(0 14px 22px rgba(0,0,0,.75)); /* el foco de luz de la mesa, detras */ position:relative; } .bj-bienvenida::before{ content:""; position:absolute; left:50%;top:34%; width:300px;height:230px; margin-left:-150px; background:radial-gradient(ellipse at 50% 50%, rgba(233,164,23,.30), transparent 68%); z-index:-1; pointer-events:none; } .bj-bienvenida-txt{ font-family:var(--slab, var(--type, inherit)); font-size:21px; letter-spacing:.2em; text-transform:uppercase; color:#f6c64a; text-shadow:0 2px 0 #7a1212, 0 0 18px rgba(246,198,74,.35); margin:0; text-align:center; } /* de lado hay menos alto: el retrato se compacta */ @media (orientation:landscape) and (max-height:520px){ .bj-bienvenida{width:130px;height:162px;background-size:780px 646px;background-position:-6px -4px} .bj-bienvenida-txt{font-size:16px} .bj-zona:not(.is-full) .bj-portada{gap:9px;padding:6px 16px 14px} } } /* en PC no hay portada: se juega directo */ @media (min-width:1025px){ .bj-bienvenida,.bj-bienvenida-txt, } /* ============================================================ EL ORDEN DE LA MESA SE TIENE QUE LEER Medido: las manos estan bien repartidas (14%, 33%, 58% la tuya, 84% la de la rubia) y el reparto sigue ese orden. Pero los personajes estaban asi: chumcho en 6% con su mano en 14% (el a la IZQUIERDA) veterano en 22% con su mano en 33% (el a la IZQUIERDA) coqueta en 93% con su mano en 84% (ella a la DERECHA) Los dos primeros se sientan a la izquierda de sus cartas y ella a la derecha: por eso parecia que el reparto la salteaba a ella o que estaba antes que tu puesto. Fix: cada personaje queda DETRAS de su propia mano, hacia el exterior del arco pero en el mismo orden de izquierda a derecha. No se mueve ninguna mano ni ninguna casilla: solo los personajes. ============================================================ */ .jug--chumcho{left:8%;margin-left:-58px} .jug--veterano{left:26%;margin-left:-78px} .jug--coqueta{left:89%;margin-left:-150px} @media (max-width:1024px), (pointer:coarse){ /* en celular el mismo criterio, con el paño a 58 grados */ .jug--chumcho{left:7%;margin-left:-48px} .jug--veterano{left:25%;margin-left:-66px} .jug--coqueta{left:90%;margin-left:-132px} } /* ============================================================ LA PORTADA · de lado se juega, en vertical se pide girar Antes se entraba en cualquier orientacion y al rotar habia que salir y volver a entrar para que el layout se acomodara. Ahora el juego solo se abre de lado: en vertical se muestra el aviso y nada mas, asi que no puede quedar en un estado a medio acomodar. ============================================================ */ .bj-pide-lado{display:none} .bj-welcome{display:none} @media (max-width:1024px), (pointer:coarse){ /* ---- EN VERTICAL: solo el aviso ---- */ @media (orientation:portrait){ .bj-zona:not(.is-full) .bj-pide-lado{ display:flex; flex-direction:column; align-items:center; gap:16px; padding:30px 22px 40px; text-align:center; } /* ni croupier ni boton hasta que gire el telefono */ .bj-zona:not(.is-full) .bj-welcome{display:none } } /* el telefono dibujado, girando */ .bj-pide-icono{ width:62px;height:104px; border:3px solid #f6c64a; border-radius:11px; position:relative; animation:bjGirarTel 2.6s ease-in-out infinite; } .bj-pide-icono::before{ content:"";position:absolute;left:50%;top:6px; width:22px;height:3px;margin-left:-11px; background:rgba(246,198,74,.6);border-radius:2px; } .bj-pide-icono::after{ content:"";position:absolute;left:50%;bottom:6px; width:16px;height:16px;margin-left:-8px; border:2px solid rgba(246,198,74,.5);border-radius:50%; } @keyframes bjGirarTel{ 0%,26% {transform:rotate(0deg)} 60%,100% {transform:rotate(-90deg)} } @media (prefers-reduced-motion:reduce){ .bj-pide-icono{animation:none;transform:rotate(-90deg)} } .bj-pide-txt{ margin:0; font-family:var(--slab, var(--type, inherit)); font-size:19px;letter-spacing:.16em;text-transform:uppercase; color:#f6c64a; text-shadow:0 2px 0 #7a1212; } .bj-pide-sub{ margin:0;max-width:260px; font-family:var(--type, inherit); font-size:11px;letter-spacing:.12em; color:rgba(239,226,194,.7); line-height:1.6; } /* ---- DE LADO: el croupier con WELCOME y el boton arriba ---- */ @media (orientation:landscape){ .bj-zona:not(.is-full) .bj-pide-lado{display:none } .bj-zona:not(.is-full) .bj-welcome{ display:flex; flex-direction:column; /* boton, WELCOME, croupier */ align-items:center; gap:6px; padding:6px 16px 0; } /* el boton flota arriba del croupier */ .bj-welcome .bj-entrar{ order:1; font-size:13px; padding:12px 24px; margin-bottom:2px; } .bj-welcome .bj-bienvenida-txt{order:2} .bj-welcome .bj-bienvenida{order:3} } } /* ---- EL TEXTO: solo WELCOME ---- */ .bj-bienvenida-txt{ margin:0; font-family:var(--slab, var(--type, inherit)); font-size:26px; letter-spacing:.3em; text-transform:uppercase; color:#f6c64a; text-shadow:0 3px 0 #7a1212, 0 0 22px rgba(246,198,74,.4); text-align:center; } @media (orientation:landscape) and (max-height:520px){ .bj-bienvenida-txt{font-size:20px;letter-spacing:.26em} } @media (min-width:1025px){ .bj-pide-lado,.bj-welcome{display:none } } /* ============================================================ ESTILOS PARA EL ELEMENTO EN FULLSCREEN NATIVO Al entrar en fullscreen el navegador aplica SUS propios estilos al elemento (position:fixed, inset:0, width/height:100%, un background negro y un ::backdrop). Esos estilos pelean con los mios (fixed + transform + mi propio fondo) y el navegador queda recalculando el layout: ESO era el parpadeo que volvio al reponer el fullscreen, y por eso desaparecian personajes y botones un frame (sus capas se recomponen en cada recalculo). El ::backdrop, ademas, se pinta ENTRE mi fondo y el contenido: de ahi que las cartas se vieran cortadas o a medio cargar. Se declara todo explicitamente, con prefijos, para que no haya conflicto. ============================================================ */ .bj-zona:fullscreen, .bj-zona:-webkit-full-screen, .bj-zona:-moz-full-screen, .bj-zona:-ms-fullscreen{ /* las medidas las manda el navegador: no se pelea con el */ width:100%; height:100%; max-width:none; max-height:none; min-height:0; margin:0; padding:0; /* el fondo, opaco y propio: sin esto queda el negro del navegador y se ve el corte entre capas */ background:radial-gradient(ellipse at 50% 32%, #1a120c, #06080a 76%) #06080a; /* nada de transform en el contenedor que esta en fullscreen: el navegador ya lo posiciona, y un transform aca crea un contexto que descuadra a los hijos fixed */ transform:none; overflow:hidden; } /* el ::backdrop: transparente, para que no se pinte entre mi fondo y el contenido (era lo que cortaba las cartas) */ .bj-zona:fullscreen::backdrop, .bj-zona:-webkit-full-screen::backdrop{ background:#06080a; } /* los hijos fixed dentro del fullscreen: el contenedor en fullscreen es su nuevo viewport, asi que siguen funcionando, pero se les fija el apilado para que no se recompongan de mas */ .bj-zona:fullscreen .bj, .bj-zona:-webkit-full-screen .bj{ /* el escalado sigue igual: dvh/dvw ahora miden la pantalla completa, que es justo lo que queremos */ position:fixed; left:50%;top:50%; } /* ============================================================ LAS CARTAS SE VEIAN CORTADAS O A MEDIO CARGAR Al tocarlas, el visor se abre y el navegador tiene que decodificar la foto grande (img/dl/*.jpg). Dentro del fullscreen ese trabajo competia con la recomposicion del layout y la imagen aparecia por partes. Fix: el visor tiene su propia capa estable y la imagen se declara con dimensiones acotadas, asi no hay reflow mientras carga. ============================================================ */ .bj-zona:fullscreen .muro-viewer, .bj-zona:-webkit-full-screen .muro-viewer{ position:fixed;inset:0; z-index:99000; background:rgba(6,8,10,.94); /* capa propia y estable: la imagen carga sin recomponer la mesa */ contain:layout style; } .bj-zona:fullscreen .muro-viewer img, .bj-zona:-webkit-full-screen .muro-viewer img{ max-width:94vw; max-height:82dvh; width:auto;height:auto; /* reserva el espacio antes de cargar: sin esto la imagen aparecia por partes y movia el layout al terminar */ min-height:120px; background:rgba(255,255,255,.04); } /* ============================================================ LA PAGINA CONGELADA MIENTRAS SE JUEGA Aca esta la causa real del parpadeo: el sitio tiene once IntersectionObserver y dos handlers de scroll que animan las secciones al entrar/salir del viewport. Con el juego en position:fixed esos observers veian la seccion cruzar el umbral sin parar y le aplicaban/quitaban clases de animacion continuamente — la mesa, los personajes, las cartas y los botones parpadeaban por eso, no por el renderizado. Con el scroll bloqueado no hay nada que los dispare. ============================================================ */ html.bj-congelado{ overflow:hidden !important; /* en celular hace falta fijar la altura para que el navegador no siga con el scroll por inercia */ height:100%; /* iOS necesita esto o sigue rebotando */ position:fixed; width:100%; } html.bj-congelado body{ overflow:hidden !important; height:100%; } /* y por si algun observer igual alcanza a poner su clase: las transiciones de las secciones quedan desactivadas mientras se juega, asi no puede haber animacion que parpadee */ html.bj-congelado .panel, html.bj-congelado .panel-inner, html.bj-congelado .panel-bg, html.bj-congelado .panel-veil{ transition:none !important; animation:none !important; } /* ============================================================ YA NO SE USA LA API NATIVA Los estilos de :fullscreen quedan por si el usuario entra en fullscreen con el gesto del sistema operativo, pero el modo del juego es el propio (.is-full). ============================================================ */ /* ============================================================ BLINDAJE CONTRA LOS OBSERVERS DEL SITIO Esta es la parte que faltaba. Los once IntersectionObserver del sitio animan las secciones al verlas cruzar el viewport, y en fullscreen la seccion del juego las cruza sin parar: le ponian y le quitaban clases de animacion continuamente y TODO parpadeaba. Bloquear el scroll no alcanza, porque esos observers tambien se disparan cuando cambia el tamaño del viewport — y entrar en fullscreen lo cambia. Asi que se desactiva por CSS, con !important, cualquier transicion o animacion dentro de la seccion del juego mientras esta abierta. Las animaciones propias del juego (el sprite del croupier, los globos) NO usan transition/animation de CSS: las mueve el JS por variable, asi que no se pierden. ============================================================ */ html.bj-congelado .bj-zona, html.bj-congelado .bj-zona *{ transition:none !important; animation-play-state:paused !important; } /* excepciones: lo que SI tiene que animarse del juego */ html.bj-congelado .bj-chat-msg, html.bj-congelado .globo, html.bj-congelado .bj-carta, html.bj-congelado .ficha-apostada, html.bj-congelado .bj-pad-b, html.bj-congelado .bj-entrar, html.bj-congelado .bj-gira, html.bj-congelado .bj-pide-icono{ transition:revert !important; animation-play-state:running !important; } /* y la seccion no puede llevar clases de entrada del sitio */ html.bj-congelado .bj-zona{ opacity:1 !important; visibility:visible ; transform:none !important; filter:none !important; } /* ============================================================ EL VISOR MIENTRAS CARGA LA FOTO El visor ahora espera a que la imagen este cargada y decodificada antes de mostrarse (antes pintaba la parte descargada y el resto negro). Este estado da una señal de que algo esta pasando. ============================================================ */ .muro-viewer.cargando::after{ content:""; position:fixed; left:50%;top:50%; width:34px;height:34px; margin:-17px 0 0 -17px; border:3px solid rgba(246,198,74,.28); border-top-color:#f6c64a; border-radius:50%; animation:bjCargando .7s linear infinite; z-index:99100; pointer-events:none; } @keyframes bjCargando{to{transform:rotate(360deg)}} @media (prefers-reduced-motion:reduce){ .muro-viewer.cargando::after{animation-duration:2s} } /* ============================================================ CELULAR: SE CORTA TODO LO QUE CONSUME GPU Medido en el codigo: 14 declaraciones de filter y 6 animaciones infinitas. En PC sobra memoria de GPU y no se nota; en un celular se agota la memoria de composicion, el navegador tira capas completas y desaparecen personajes, cartas y botones. Aca se corta lo que no es imprescindible. El juego se ve igual: las sombras ahora son pseudo-elementos (se pintan una vez) y las animaciones que se cortan son de adorno. ============================================================ */ @media (max-width:1024px), (pointer:coarse){ /* NINGUN filter en la mesa: cada uno es una capa de composicion y un recalculo por repintado */ .bj-zona .cro-sprite, .bj-zona .jug-sprite, .bj-zona .cro-emocion, .bj-zona .bj-carta, .bj-zona .bj-carta--mesa, .bj-zona .carta-cara, .bj-zona .ficha, .bj-zona .ficha-apostada, .bj-zona .bj-bandeja, .bj-zona .bj-sabot, .bj-zona .bj-descarte{ filter:none !important; } /* la animacion de fuego corria cada 0.3s: es la mas costosa */ .cro-emocion[data-emocion="4"]{ animation:none !important; } /* la respiracion del croupier tampoco: 5s de repintado continuo */ .cro, .cro-sprite{ animation:none !important; } /* backface-visibility y contain crean capas sin aportar: ya se probo que no arreglan el parpadeo y si suman presion de memoria */ .bj-zona *{ backface-visibility:visible ; -webkit-backface-visibility:visible ; contain:none !important; } } /* ============================================================ OPTIMIZACION · lo que midio el analisis del codigo Antes: 14 filter, 8 backface-visibility, 6 animaciones infinitas. Cada filter y cada backface-visibility crea una capa de composicion GPU; cada animacion infinita repinta para siempre. En PC sobra memoria de GPU y no se nota. En celular se agota la memoria de composicion, el navegador tira capas completas y desaparecen personajes, cartas y botones. Aca se corta todo lo que no aporta. El juego se ve igual. ============================================================ */ /* ---- NINGUNA ANIMACION INFINITA EN CELULAR ---- Salvo dos que duran poco y comunican algo: el spinner de carga y el icono de girar el telefono (que solo se ve en la portada). */ @media (max-width:1024px), (pointer:coarse){ .bj-zona [class]:not(.muro-viewer):not(.bj-pide-icono):not(.bj-gira){ animation-name:none !important; } /* las dos que si se conservan */ .muro-viewer.cargando::after{animation-name:bjCargando !important} .bj-pide-icono{animation-name:bjGirarTel !important} .bj-gira{animation-name:bjGiraLatir !important} } /* ---- LOS FILTER QUE QUEDAN, SOLO EN PC ---- En celular ninguna pieza de la mesa lleva filter: se reemplazaron por sombras de pseudo-elemento, que se pintan una vez. */ @media (max-width:1024px), (pointer:coarse){ .bj-zona [class]{filter:none !important} /* excepto el resaltado al tocar una carta, que es momentaneo */ .bj-zona .bj-carta--zoom:active{filter:brightness(1.25) !important} } /* ---- LA CAPA DE LA MESA, UNA SOLA ---- En vez de que cada pieza pida su capa, se promueve UNA sola: la escena. Asi el navegador compone la mesa como una unidad y no tiene que gestionar veinte capas chicas. (transform:translate ya crea la capa; no hace falta will-change, que reserva memoria de forma permanente.) */ @media (max-width:1024px), (pointer:coarse){ .bj-zona.is-full .bj{ /* el scale ya promueve la capa: no se agrega nada mas */ isolation:auto; } } /* ============================================================ EN CELULAR SE APLANA EL 3D · la causa del parpadeo Investigado y confirmado: es un bug documentado del navegador, no del codigo del juego. - Chromium #138415 "Flickering image on CSS3 animation with preserve-3d" (abierto desde 2015). - Keith Clark, "The state of CSS 3D transforms": Chrome pierde GRUPOS DE ELEMENTOS intermitentemente al redibujar dentro de un contexto preserve-3d, "causando un flicker terrible". - El W3C reconoce que preserve-3d no esta bien definido y que las implementaciones difieren. Aca habia OCHO contextos preserve-3d anidados. En PC el compositor los sostiene; en un celular se cae y tira grupos de elementos: personajes, cartas y botones desapareciendo a la vez. (Por eso el DOOM funciona perfecto: es UN canvas — un elemento, una capa, el navegador solo copia pixeles.) Solucion recomendada por la investigacion: aplanar el 3D en celular. La perspectiva de la mesa se conserva porque el pano ya viene inclinado por su propia geometria y las posiciones son porcentuales; lo que se pierde es el volumen calculado en vivo, que es exactamente lo que el celular no puede sostener. ============================================================ */ @media (max-width:1024px), (pointer:coarse){ /* 1. NINGUN contexto 3D: aca esta el bug */ .bj-zona .bj, .bj-zona .bj-escena, .bj-zona .bj-pano, .bj-zona .cro, .bj-zona .jug, .bj-zona .bj-carta, .bj-zona .bj-sabot, .bj-zona .bj-bandeja, .bj-zona .bj-descarte, .bj-zona .ficha, .bj-zona [style*="preserve"]{ transform-style:flat !important; } /* y sin perspectiva: sin ella los translateZ no hacen nada y los elementos quedan en su plano, que es lo que queremos */ .bj-zona .bj, .bj-zona .bj-escena{ perspective:none !important; } /* 2. el paño conserva su inclinacion con un transform 2D: scaleY comprime el alto igual que lo hacia el rotateX, pero sin crear contexto 3D */ .bj-zona .bj-pano{ transform:scaleY(.62) !important; transform-origin:50% 100% !important; } /* 3. los personajes y el croupier, planos y en su sitio. El rotateX(-64deg) que los levantaba ya no hace falta: sin contexto 3D el paño no los acuesta. */ .bj-zona .cro{ transform:translateX(-50%) scale(.84); } .bj-zona .jug--chumcho{transform:scale(1.04)} .bj-zona .jug--veterano{transform:scale(.98)} .bj-zona .jug--coqueta{transform:scale(1.04) scaleX(-1)} .bj-zona .jug--pitboss{transform:scale(.9)} /* 4. las cartas: planas, conservando su rotacion en el plano */ /* las cartas conservan su 3D: es un solo contexto por carta (dos caras) y es lo que hace el volteo. Aplanarlas rompia el dorso. El problema del parpadeo era el preserve-3d ANIDADO de la mesa, no el de cada carta suelta. */ .bj-zona .bj-carta{ transform-style:preserve-3d; } .bj-zona .carta-cara{ backface-visibility:hidden; -webkit-backface-visibility:hidden; } /* OJO: aca habia un intento de resolver el volteo por opacidad con una clase .volteada. Esa clase NO EXISTE: el volteo real lo hace el JS poniendo rotateY(180deg)/rotateY(0deg) en el style de .carta-dorso. Con :not(.volteada) matcheando siempre, el dorso rojo quedaba opaco sobre la foto y TODAS las cartas se veian rojas. Se quita: el volteo del JS funciona solo, incluso con el 3D aplanado, porque rotateY(180deg) en un contexto flat simplemente esconde la cara (es lo que queremos). */ /* 5. el sabot y la bandeja, planos */ .bj-zona .bj-sabot, .bj-zona .bj-bandeja, .bj-zona .bj-descarte, .bj-zona .bj-bandeja-cuerpo, .bj-zona .bj-bandeja-canto, .bj-zona .descarte-pila{ transform:none !important; transform-style:flat !important; } } /* ============================================================ LAS FLECHAS NO APLICAN CUANDO LO ABRIO UNA CARTA El visor lo comparten tres modulos. Cuando lo abre una carta del juego no hay lista que navegar, asi que las flechas se esconden (si se dejaran, tocarlas mostraria la foto de otro modulo). ============================================================ */ .muro-viewer[data-dueno="carta"] .muro-nav{display:none !important} /* ============================================================ EL VISOR DE FOTOS ES COMPARTIDO: NO LO TOCA NINGUN MEDIA #muroViewer lo usan el comic (en PC y celular) y las cartas del juego. Sus reglas van en la base, sin media query, para que se comporte igual en las dos plataformas. Lo unico que cambia por plataforma es el tamaño maximo de la imagen. ============================================================ */ .muro-viewer img{ max-width:94vw; max-height:84vh; width:auto;height:auto; } @media (max-width:1024px), (pointer:coarse){ .muro-viewer img{ max-height:78dvh; } } /* ============================================================ CELULAR · LOS PERSONAJES NO PUEDEN QUEDAR TAPADOS POR LAS CARTAS Medido: los personajes estan en z-index 6 y las cartas apoyadas en 40+ (el JS les asigna 40 + su posicion en el puesto). Las cartas se dibujan encima y les tapan la cara. En PC no se nota porque la mesa es grande y las cartas caen lejos del cuerpo. En celular, con la mesa reducida a ~0.45, todo se junta y el solapamiento es evidente. Fix: en celular los personajes suben por encima de las cartas. Tiene sentido fisico: quien esta sentado a la mesa esta MAS CERCA de la camara que las cartas que tiene delante. Solo afecta a celular: las reglas base de PC no se tocan. ============================================================ */ @media (max-width:1024px), (pointer:coarse){ /* los jugadores, por encima de las cartas (que van en 40+) */ .bj-zona .jug{z-index:60 !important} .bj-zona .jug--chumcho, .bj-zona .jug--veterano, .bj-zona .jug--coqueta{z-index:62} /* el croupier y el pit boss quedan DETRAS: estan del otro lado de la mesa, asi que sus cartas si van delante de ellos */ .bj-zona .cro{z-index:2} .bj-zona .jug--pitboss{z-index:1} /* y las cartas de cada secundario se corren hacia el CENTRO de la mesa, para que no caigan sobre su dueño: es la solucion real, el z-index solo evita que se tapen las caras */ .bj-zona .bj-casilla--i1, .bj-zona .bj-casilla--i2, .bj-zona .bj-casilla--i3, .bj-zona .bj-casilla--i4{margin-left:-6px} .bj-zona .bj-casilla--d1, .bj-zona .bj-casilla--d2, .bj-zona .bj-casilla--d3, .bj-zona .bj-casilla--d4{margin-left:-66px} } /* ============================================================ CELULAR · EL VOLTEO DE LA CARTA SIN 3D Las cartas se entregaban con el dorso rojo. Causa: el volteo usa rotateY(180deg) sobre .carta-cara/.carta-dorso, y eso NECESITA contexto 3D. Al aplanar el 3D en celular (para matar el parpadeo), rotateY(180deg) solo espeja la cara en 2D y el dorso queda encima. Solucion: en celular el volteo se resuelve por OPACIDAD, leyendo el estado real que deja el JS en el style de cada cara: - dorso con rotateY(0deg) => carta TAPADA: se ve el dorso - dorso con rotateY(180deg) => carta REVELADA: se oculta Aca el selector de atributo SI es correcto: el JS escribe ese style UNA VEZ al apoyar o al revelar la carta, no en cada frame (que era el problema con los sprites). ============================================================ */ @media (max-width:1024px), (pointer:coarse){ /* las cartas conservan su contexto 3D propio: es UNO por carta (dos caras) y es lo que hace el volteo. El bug del parpadeo era el preserve-3d ANIDADO de la mesa, no el de una carta suelta. */ .bj-zona .bj-carta, .bj-zona .bj-carta--mesa{ transform-style:preserve-3d !important; } .bj-zona .carta-cara{ backface-visibility:hidden ; -webkit-backface-visibility:hidden ; } /* respaldo por opacidad, para el caso de que el navegador no respete backface-visibility sin perspectiva en el ancestro: el dorso se oculta cuando el JS lo dejo en rotateY(180deg) */ .bj-zona .carta-dorso[style*="rotateY(180deg)"]{ opacity:0; } .bj-zona .carta-dorso[style*="rotateY(0deg)"]{ opacity:1; } /* y la foto se oculta cuando esta de espaldas */ .bj-zona .carta-cara.carta-foto[style*="rotateY(180deg)"]{ opacity:0; } } /* ============================================================ ============ QUE SE VE EN CADA PLATAFORMA ================ ============================================================ BLOQUE UNICO Y FINAL. Auditado: habia 92 !important, 71 de ellos FUERA del @media de celular, casi todos `display`, decidiendo que se ve en cada plataforma desde quince lugares distintos. Eso era la causa de que un arreglo para celular rompiera PC y al revés. Este bloque va AL FINAL, asi que gana por orden de cascada, y es el UNICO sitio donde se decide la visibilidad por plataforma. Si algo aparece donde no debe, se corrige ACA y en ningun otro lado. ============================================================ */ /* ---------- PC: pantalla ancha con puntero fino ---------- */ @media (min-width:1025px) and (pointer:fine){ /* SE VE: la mesa, los controles laterales originales */ .panel--bj .casino-panel{display:flex} .panel--bj .bj{display:block} /* NO SE VE: todo lo que es de celular */ .bj-portada, .bj-welcome, .bj-pide-lado, .bj-pad, .bj-hud, .bj-salir, .bj-gira, .bj-chat, .bj-full-btn, .comic-salir{display:none} /* en PC no hay modo pantalla completa: se juega en la pagina */ .bj-zona.is-full .casino-panel{display:flex} .bj-zona.is-full .bj-pad, .bj-zona.is-full .bj-hud{display:none} } /* ---------- CELULAR Y TABLET ---------- */ @media (max-width:1024px), (pointer:coarse){ /* --- antes de entrar: portada --- */ .bj-zona:not(.is-full) .bj-portada{display:flex} .bj-zona:not(.is-full) .bj{display:none} .bj-zona:not(.is-full) .casino-panel, .bj-zona:not(.is-full) .mando, .bj-zona:not(.is-full) .bj-pad, .bj-zona:not(.is-full) .bj-hud, .bj-zona:not(.is-full) .bj-salir, .bj-zona:not(.is-full) .bj-chat{display:none} /* en vertical: solo el aviso de girar */ @media (orientation:portrait){ .bj-zona:not(.is-full) .bj-pide-lado{display:flex} .bj-zona:not(.is-full) .bj-welcome{display:none} } /* de lado: el croupier con WELCOME y el boton */ @media (orientation:landscape){ .bj-zona:not(.is-full) .bj-pide-lado{display:none} .bj-zona:not(.is-full) .bj-welcome{display:flex} } /* --- jugando (modo pantalla completa) --- */ .bj-zona.is-full .bj{display:flex} .bj-zona.is-full .bj-pad{display:flex} .bj-zona.is-full .bj-hud{display:flex} .bj-zona.is-full .bj-salir{display:inline-flex} .bj-zona.is-full .bj-chat{display:flex} /* los controles de PC no aparecen nunca en celular */ .bj-zona.is-full .casino-panel, .bj-zona.is-full .mando, .bj-zona.is-full .bj-portada, .bj-zona.is-full .bj-welcome, .bj-zona.is-full .bj-pide-lado, .bj-zona.is-full .bj-full-btn{display:none} } /* ============================================================ ========== LOS PERSONAJES EN CELULAR · BLOQUE FINAL ====== ============================================================ Auditado: cada personaje tenia entre 4 y 6 definiciones de su regla repartidas por el archivo, de las vueltas sucesivas de arreglos. La ULTIMA gana y anula el resto, asi que el chumcho terminaba con solo `transform:scale(1.04)` (perdiendo su left, su margin-left y su z-index) y la coqueta con solo `z-index:62` (perdiendo su posicion y su espejado). De ahi que se vieran mal colocados y tapados por las cartas. Este bloque define cada uno COMPLETO y es el ultimo del archivo: gana sin ambiguedad. Si hay que mover un personaje en celular, se hace ACA. ============================================================ */ @media (max-width:1024px), (pointer:coarse){ /* la base comun: sin 3D (el preserve-3d anidado es el bug del navegador que hacia parpadear todo) y por encima de las cartas, que van en z-index 40+ */ .bj-zona .jug{ transform-style:flat; z-index:60; } /* --- el chumcho: extremo izquierdo, mira al centro --- */ .bj-zona .jug--chumcho{ left:7%; margin-left:-48px; bottom:26%; transform:scale(.92); transform-origin:50% 100%; z-index:62; } /* --- el veterano: centro-izquierda, un poco mas atras --- */ .bj-zona .jug--veterano{ left:25%; margin-left:-66px; bottom:16%; transform:scale(.86); transform-origin:50% 100%; z-index:61; } /* --- la coqueta: extremo derecho, espejada para mirar al centro (su sprite mira a la derecha; sin espejar miraria afuera) --- */ .bj-zona .jug--coqueta{ left:90%; margin-left:-132px; bottom:26%; transform:scale(.92) scaleX(-1); transform-origin:50% 100%; z-index:62; } /* --- el pit boss: de pie al fondo, junto al croupier. Va DETRAS de todo: esta del otro lado de la mesa. --- */ .bj-zona .jug--pitboss{ left:50%; margin-left:78px; top:4%; bottom:auto; transform:scale(.8); transform-origin:50% 100%; z-index:1; } /* --- el croupier: al fondo, centrado, detras de sus cartas --- */ .bj-zona .cro{ transform:translateX(-50%) scale(.8); transform-origin:50% 100%; z-index:2; } } /* ============================================================ CELULAR · LAS FICHAS NO TAPAN LA CARA DE LOS PERSONAJES Medido: .ficha-apostada esta en z-index 400 y los personajes en 60-62, asi que las fichas se dibujan muy por encima y les tapan la cara. El cajon (.bj-cajon) esta en 34 y tampoco molestaba, pero las fichas que VUELAN al circulo si. Fix en celular: los personajes suben por encima de las fichas. Tiene el mismo sentido fisico que con las cartas: quien esta sentado a la mesa esta mas cerca de la camara que las fichas que tiene delante en el paño. ============================================================ */ @media (max-width:1024px), (pointer:coarse){ /* los jugadores por encima de las fichas (400) y de las cartas */ .bj-zona .jug{z-index:460} .bj-zona .jug--chumcho, .bj-zona .jug--coqueta{z-index:462} .bj-zona .jug--veterano{z-index:461} /* el croupier y el pit boss siguen al fondo: estan del otro lado */ .bj-zona .cro{z-index:2} .bj-zona .jug--pitboss{z-index:1} /* y las fichas de los secundarios se corren al centro, para no caer sobre su dueño (la solucion de fondo, no solo el apilado) */ .bj-zona .ficha-apostada{z-index:400} } /* ============================================================ CELULAR · LOS PERSONAJES MAS ATRAS, FUERA DEL PASO DE LAS FICHAS Sus fichas les caian encima de la cara. El z-index no alcanza porque el problema es de POSICION: estaban sentados justo donde se apoyan sus fichas (el chumcho en left 7% / bottom 26%, y su casilla en 14% / 52% con las fichas 14px por debajo). Solucion real: se los corre hacia ATRAS (bottom mas alto, hacia el borde lejano del paño) y hacia los costados, donde hay espacio libre. Ahi no los cruza nada: las fichas y las cartas quedan en la franja de adelante y ellos detras, que es como se sienta la gente en una mesa de verdad. ============================================================ */ @media (max-width:1024px), (pointer:coarse){ /* --- el chumcho: al extremo izquierdo y mas atras --- */ .bj-zona .jug--chumcho{ left:3%; margin-left:-30px; bottom:40%; /* estaba en 26%: sube fuera del paso */ transform:scale(.8); } /* --- el veterano: entre el chumcho y el centro, mas atras --- */ .bj-zona .jug--veterano{ left:21%; margin-left:-48px; bottom:34%; transform:scale(.76); } /* --- la coqueta: al extremo derecho y mas atras --- */ .bj-zona .jug--coqueta{ left:97%; margin-left:-118px; bottom:40%; transform:scale(.8) scaleX(-1); } /* las fichas de los secundarios se corren hacia el CENTRO, para alejarlas todavia mas de sus dueños */ .bj-zona .bj-casilla--i1, .bj-zona .bj-casilla--i2, .bj-zona .bj-casilla--i3, .bj-zona .bj-casilla--i4{left:20%} .bj-zona .bj-casilla--d1, .bj-zona .bj-casilla--d2, .bj-zona .bj-casilla--d3, .bj-zona .bj-casilla--d4{left:78%} } /* ============================================================ CELULAR · CADA PERSONAJE EN SU PUESTO REAL DE LA MESA Error anterior: movi los tres cuando solo dos estaban mal, y los deje flotando fuera del arco (la coqueta termino en left:97%, colgada del borde). Ahora las posiciones salen MEDIDAS del trazado del paño, no a ojo. Los circulos de apuesta del SVG estan en x=140, 330, 580 y 840 de un viewBox de 1000, y el trazado ocupa del 6% al 94% de la escena: puesto 1 (chumcho) x=140 -> 18% de la escena puesto 2 (veterano) x=330 -> 35% puesto 3 (TU) x=580 -> 57% puesto 4 (coqueta) x=840 -> 80% Cada personaje se sienta DETRAS de su propio circulo, corrido hacia el exterior del arco. La coqueta vuelve a donde estaba (era la que estaba bien). ============================================================ */ @media (max-width:1024px), (pointer:coarse){ /* --- puesto 1: el chumcho, detras de su circulo (18%) --- */ .bj-zona .jug--chumcho{ left:18%; margin-left:-112px; /* hacia el exterior del arco */ bottom:30%; transform:scale(.82); transform-origin:50% 100%; } /* --- puesto 2: el veterano, detras de su circulo (35%) --- */ .bj-zona .jug--veterano{ left:35%; margin-left:-118px; bottom:22%; transform:scale(.8); transform-origin:50% 100%; } /* --- puesto 4: la coqueta. VUELVE a donde estaba (era la que estaba bien): detras de su circulo (80%), espejada para mirar al centro de la mesa. --- */ .bj-zona .jug--coqueta{ left:90%; margin-left:-132px; bottom:26%; transform:scale(.92) scaleX(-1); transform-origin:50% 100%; } /* las casillas vuelven a su sitio: sus puestos del trazado */ .bj-zona .bj-casilla--i1, .bj-zona .bj-casilla--i2, .bj-zona .bj-casilla--i3, .bj-zona .bj-casilla--i4{left:18%} .bj-zona .bj-casilla--v1, .bj-zona .bj-casilla--v2, .bj-zona .bj-casilla--v3, .bj-zona .bj-casilla--v4{left:35%} .bj-zona .bj-casilla--d1, .bj-zona .bj-casilla--d2, .bj-zona .bj-casilla--d3, .bj-zona .bj-casilla--d4{left:80%} } /* ============================================================ CELULAR · EL CAJON DE FICHAS MAS ABAJO Y LOS DOS A LA ORILLA 1) Las 4 fichas con las que se apuesta (el cajon) estaban en bottom:1%, o sea sobre el paño, y tapaban las fichas ya apostadas en el circulo. Se bajan por fuera del paño. 2) El chumcho y el veterano seguian dentro del paño y sus fichas les caian encima. Se los manda a la ORILLA: fuera del borde del paño, apoyados en el canto, como quien esta sentado al borde de la mesa. La coqueta no se toca (esta bien). ============================================================ */ @media (max-width:1024px), (pointer:coarse){ /* --- las 4 fichas de apostar, por debajo del paño --- */ .bj-zona.is-full .bj-cajon{ bottom:-11%; z-index:500; /* por encima de todo: son botones */ } /* --- el chumcho: A LA ORILLA, fuera del borde izquierdo --- */ .bj-zona .jug--chumcho{ left:0; margin-left:-34px; /* asoma por fuera del paño */ bottom:14%; transform:scale(.8); transform-origin:50% 100%; } /* --- el veterano: tambien a la orilla, mas abajo en el arco --- */ .bj-zona .jug--veterano{ left:11%; margin-left:-72px; bottom:2%; transform:scale(.78); transform-origin:50% 100%; } /* la coqueta NO se toca: su posicion estaba bien */ } /* ============================================================ CELULAR · EL CHUMCHO ARRIBA A LA IZQUIERDA Y LAS FICHAS EN COLUMNA A LA DERECHA Ubicaciones pedidas sobre la captura: - el chumcho va al borde IZQUIERDO, a la altura del borde lejano del paño (donde estaba el punto blanco). Ahi no lo cruzan ni sus fichas ni sus cartas. - las 4 fichas de apostar pasan a una COLUMNA VERTICAL en el costado derecho: horizontales abajo tapaban el paño y las apuestas, y en columna aprovechan el alto que sobra. Solo en celular: en PC el cajon sigue horizontal al pie de la mesa, que ahi funciona bien. ============================================================ */ @media (max-width:1024px), (pointer:coarse){ /* --- el chumcho: borde izquierdo, arriba --- */ .bj-zona .jug--chumcho{ left:0; margin-left:-52px; bottom:56%; /* a la altura del borde lejano */ transform:scale(.76); transform-origin:50% 100%; } /* su puesto acompaña: las cartas y el circulo se corren con el */ .bj-zona .bj-casilla--i1, .bj-zona .bj-casilla--i2, .bj-zona .bj-casilla--i3, .bj-zona .bj-casilla--i4{ left:13%; bottom:58%; } /* --- las 4 fichas en COLUMNA, costado derecho --- */ .bj-zona.is-full .bj-cajon{ /* deja de ser una fila al pie: columna vertical a la derecha */ left:auto; right:6px; bottom:auto; top:50%; width:auto; height:auto; margin-left:0; transform:translateY(-50%); transform-origin:50% 50%; flex-direction:column; justify-content:center; align-items:center; gap:7px; z-index:9560; /* sobre el mando flotante */ pointer-events:auto; } .bj-zona.is-full .bj-cajon .ficha{ width:52px;height:52px; } /* de lado hay menos alto: las fichas se compactan */ @media (orientation:landscape) and (max-height:480px){ .bj-zona.is-full .bj-cajon .ficha{width:44px;height:44px} .bj-zona.is-full .bj-cajon{gap:5px} } /* el mando flotante deja libre ese costado */ .bj-zona.is-full .bj-pad{ padding-right:72px; } } /* ============================================================ CELULAR · TRES CORRECCIONES 1) LA BANDEJA DESCENTRADA: una regla de aplanado (transform:none !important sobre .bj-bandeja) borraba el translateX(-50%) que la centra. Se le devuelve el centrado SIN volver al 3D. 2) LAS FICHAS LATERALES: eran de 52px, difíciles de tocar y no se leia su valor. Se agrandan y se sacan del paño, al borde. 3) EL CHUMCHO: mas a la orilla y mas grande. ============================================================ */ @media (max-width:1024px), (pointer:coarse){ /* 1. la bandeja y el descarte, centrados de nuevo. El aplanado les quito el transform completo, incluido el translateX(-50%) que los centra. Se repone solo el 2D. */ .bj-zona .bj-bandeja{ transform:translateX(-50%) scale(.76) !important; transform-origin:50% 0 !important; } .bj-zona .bj-bandeja-cuerpo, .bj-zona .bj-bandeja-canto{ transform:none !important; } /* 2. las fichas: mas grandes y fuera del paño */ .bj-zona.is-full .bj-cajon{ right:-4px; /* pegadas al borde, fuera del fieltro */ gap:10px; } .bj-zona.is-full .bj-cajon .ficha{ width:68px;height:68px; /* eran 52: ahora se leen y se tocan */ } .bj-zona.is-full .bj-cajon .ficha i, .bj-zona.is-full .bj-cajon .ficha b, .bj-zona.is-full .bj-cajon .ficha span{ font-size:15px; /* el valor, legible */ } @media (orientation:landscape) and (max-height:460px){ .bj-zona.is-full .bj-cajon .ficha{width:56px;height:56px} .bj-zona.is-full .bj-cajon{gap:6px} } /* el mando flotante deja mas sitio de ese lado */ .bj-zona.is-full .bj-pad{padding-right:88px} /* 3. el chumcho: mas a la orilla y mas grande */ .bj-zona .jug--chumcho{ left:0; margin-left:-74px; /* asoma mas por el borde */ bottom:52%; transform:scale(.92); /* era .76 */ transform-origin:50% 100%; } } /* ============================================================ CELULAR · FICHAS FUERA DEL PAÑO Y EL VETERANO ABAJO-CENTRO 1) LAS FICHAS seguian sobre el fieltro porque el paño va de left:-4% a right:-4%, o sea que es MAS ANCHO que la escena: right:-4px caia igual encima. Se las manda por FUERA del paño con un valor negativo real, y se agrandan de nuevo. 2) EL VETERANO tapaba los comentarios del chat. Se lo corre a la zona marcada: abajo-centro, cerca del puesto del jugador, donde no cruza ni el chat (que va a la izquierda) ni las cartas. ============================================================ */ @media (max-width:1024px), (pointer:coarse){ /* 1. las fichas, FUERA del paño y mas grandes */ .bj-zona.is-full .bj-cajon{ right:-46px; /* el paño llega a -4% del ancho: hay que salirse mas para no quedar encima */ gap:12px; z-index:9570; } .bj-zona.is-full .bj-cajon .ficha{ width:82px;height:82px; /* eran 68: ahora se ven bien */ } .bj-zona.is-full .bj-cajon .ficha i, .bj-zona.is-full .bj-cajon .ficha b, .bj-zona.is-full .bj-cajon .ficha span{ font-size:18px; } /* en pantallas muy bajas de lado no caben 4 de 82px: se compactan lo justo para que sigan siendo tocables (58px > 44px minimo) */ @media (orientation:landscape) and (max-height:440px){ .bj-zona.is-full .bj-cajon .ficha{width:58px;height:58px} .bj-zona.is-full .bj-cajon{gap:6px;right:-34px} } /* el mando flotante deja libre ese costado */ .bj-zona.is-full .bj-pad{padding-right:104px} /* 2. el veterano: abajo-centro, cerca de tu puesto. Ahi no tapa el chat (que va abajo a la izquierda) ni las cartas de nadie. */ .bj-zona .jug--veterano{ left:34%; margin-left:-76px; bottom:-14%; /* por debajo del borde del paño */ transform:scale(.88); transform-origin:50% 100%; z-index:461; } /* sus cartas se quedan en su puesto del trazado: no se mueven con el, porque el que se corrio fue el personaje para no tapar */ } /* ============================================================ CELULAR · POSICIONES MARCADAS SOBRE LA CAPTURA BLANCO -> el veterano sube: queda al borde inferior del paño, sin taparle nada a nadie. AMARILLO -> las fichas, al extremo derecho de la pantalla, completamente fuera del paño. AZUL -> los botones de accion, abajo a la derecha, por fuera del paño. ============================================================ */ @media (max-width:1024px), (pointer:coarse){ /* --- BLANCO: el veterano, mas arriba --- */ .bj-zona .jug--veterano{ left:34%; margin-left:-76px; bottom:-2%; /* estaba en -14%: sube al borde del paño */ transform:scale(.88); transform-origin:50% 100%; } /* --- AMARILLO: las fichas al extremo derecho --- */ .bj-zona.is-full .bj-cajon{ right:-108px; /* fuera del paño y del ancho de la escena */ top:46%; gap:12px; } @media (orientation:landscape) and (max-height:440px){ .bj-zona.is-full .bj-cajon{right:-86px;gap:7px} } /* --- AZUL: los botones de accion, abajo a la derecha --- */ .bj-zona.is-full .bj-pad{ /* deja de ocupar todo el ancho: se agrupa en la esquina */ left:auto; right:8px; bottom:calc(8px + env(safe-area-inset-bottom, 0px)); width:auto; padding:0; justify-content:flex-end; } /* el grupo de fichas del mando no existe en celular (se usan las de la mesa), asi que solo queda el de acciones */ .bj-zona.is-full .bj-pad .bj-pad-grupo:first-child{display:none} .bj-zona.is-full .bj-pad .bj-pad-grupo:last-child{ align-items:flex-end; } /* el chat no puede quedar debajo de los botones */ .bj-zona.is-full .bj-chat{ right:auto; left:6px; width:min(42vw, 300px); } }