/* El hueco del juego, cuando ya está abierto. Antes del clic la caja la pinta el propio nodo (`.portada-demo`): dentro está la carátula del juego, que es nuestra y ya está en la página. Aquí solo se define lo que aparece después de pulsar. */ .bba-demo-abierta { display: block; background: #000; } .bba-demo-marco { display: block; width: 100%; aspect-ratio: 16 / 10; border: 0; } .bba-demo-estado { padding: 0 1rem 1rem; margin: 0; } /* En pantalla estrecha el juego ocupa casi un cuadrado: los slots de Pragmatic se sirven en vertical en el móvil, y con 16/10 quedaba una banda negra ocupando media pantalla. */ @media (max-width: 46rem) { .bba-demo-marco { aspect-ratio: 3 / 4; } } /* ── la franja de control, encima del juego ───────────────────────────────── ⛔ ENCIMA, NO SOBRE. El iframe es de otro dominio: no sabemos qué hay debajo de cada esquina ni podemos apartarlo. En esta serie las esquinas de arriba las ocupan el aspa de cerrar y el rótulo del proveedor, y abajo va la barra de apuesta. Una franja propia no tapa nada de eso. Los colores salen de la paleta del nodo, que cada juego tiene la suya; los valores de reserva son los de `_base` para que la franja no dependa de que la paleta haya cargado. */ /* ⛔ LA CAJA SIGUE SIENDO `.demo-bloque` DESPUÉS DE ABRIR, y esa clase trae `justify-items: center` para centrar el botón de la carátula. Chrome aplica esa alineación TAMBIÉN a los hijos de bloque, así que la barra se encogía a su contenido —508 px de 1152 medidos el 14.08— y quedaba flotando en medio con el negro de la caja a los lados. De ahí venían tres quejas seguidas del operador: «la franja negra de arriba», «el bono al centro» y «el botón a la derecha, en la esquina». No eran tres fallos: era este. Se anula donde nace, en la propia caja abierta, para que la barra vuelva a ocupar el ancho entero y haya esquina a la que mandar el botón. */ .bba-demo-abierta { justify-items: stretch; } /* Tres posiciones, no dos bloques seguidos: hueco · oferta centrada · botón en la esquina derecha. `space-between` no vale — con un solo hijo lo pega a la izquierda, y con dos deja la oferta descentrada. Las columnas laterales son iguales, así que el bono cae en el centro de la barra haya botón o no. */ .bba-demo-barra { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .5rem; width: 100%; padding: .25rem .5rem; background: var(--deep-2, #0d302f); border-bottom: 1px solid rgba(255, 255, 255, .14); } .bba-demo-barra .esc-capa { grid-column: 2; justify-self: center; min-width: 0; } .bba-demo-barra .bba-demo-pantalla-btn { grid-column: 3; justify-self: end; } /* En el móvil no hay sitio para tres columnas: la oferta se queda con el ancho que sobre a la izquierda y el botón sigue en su esquina. */ @media (max-width: 46rem) { .bba-demo-barra { grid-template-columns: 1fr auto; } .bba-demo-barra .esc-capa { grid-column: 1; justify-self: start; } .bba-demo-barra .bba-demo-pantalla-btn { grid-column: 2; } } /* ⛔ SOLO EL ICONO, SIN RÓTULO (corrección del operador, 14.08). El texto «Pantalla completa» ocupaba 157 px de una barra que tiene que dejar el centro al bono, y el icono de cuatro esquinas ya se entiende solo. El rótulo no se borra: se queda para el lector de pantalla —y en `aria-label`— porque un botón sin nombre accesible es un botón mudo. */ .bba-demo-pantalla-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .bba-demo-pantalla-btn { display: inline-flex; align-items: center; justify-content: center; /* 44 px por lado: el mínimo para el dedo que exige la revisión de geometría; sin rótulo el botón se queda cuadrado, no en una pastilla vacía. */ min-width: 44px; min-height: 44px; padding: .35rem; border: 1px solid rgba(255, 255, 255, .3); border-radius: .4rem; background: transparent; color: var(--papel, #f6f4ee); font: inherit; font-size: .85rem; line-height: 1.2; cursor: pointer; } /* El icono se dibuja aquí y no es una imagen: son cuatro esquinas, y cargar un fichero para eso cuesta más que el propio dibujo. Cambia con el estado, así que el botón se entiende sin leer el rótulo. */ .bba-demo-pantalla-btn::before { content: ''; /* Sin rótulo al lado, el dibujo ES el botón: a 1em del texto se quedaba en 13 px dentro de una caja de 44. */ width: 1.25rem; height: 1.25rem; flex: 0 0 auto; background: currentColor; -webkit-mask: var(--bba-icono) center / contain no-repeat; mask: var(--bba-icono) center / contain no-repeat; --bba-icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3 9V3h6v2H5v4H3zm12-6h6v6h-2V5h-4V3zM3 15h2v4h4v2H3v-6zm16 0h2v6h-6v-2h4v-4z'/%3E%3C/svg%3E"); } .bba-demo-pantalla-btn[aria-pressed='true']::before { --bba-icono: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 3v4a2 2 0 0 1-2 2H3V7h4V3h2zm6 0h2v4h4v2h-4a2 2 0 0 1-2-2V3zM3 15h4a2 2 0 0 1 2 2v4H7v-4H3v-2zm14 0h4v2h-4v4h-2v-4a2 2 0 0 1 2-2z'/%3E%3C/svg%3E"); } .bba-demo-pantalla-btn:hover, .bba-demo-pantalla-btn:focus-visible { background: rgba(255, 255, 255, .12); } /* El aro de foco va del color claro y no del `--oro`: sobre esta franja oscura el dorado no llega al 3:1 — es el mismo fallo que la revisión visual encontró en las 39 páginas el 09.08. */ .bba-demo-pantalla-btn:focus-visible { outline: 2px solid var(--papel, #f6f4ee); outline-offset: 2px; } /* ── pantalla completa ────────────────────────────────────────────────────── Dos caminos, y el segundo no es de adorno: en el iPhone la API de pantalla completa no existe para un contenedor —Safari solo se la da a un `