/* games-fullscreen.css — maximiza los overlays de minijuegos.

   Los CSS por-juego (pacman, breakout, snake, tetris, …) siguen un patrón
   uniforme: overlay con padding 4vmin, .X-overlay__content con un cap
   (`width: min(NNNpx, 100%)`) y .X-canvas con su propio `max-width:
   NNNpx` + `aspect-ratio: W/H`. Aquí sobrescribimos esos topes para que
   el tablero/canvas ocupe casi toda la ventana respetando el aspect
   ratio definido en cada juego.

   Se carga al final en main.css: por orden de cascada gana sobre los
   ficheros por-juego sin necesidad de !important salvo para la padding
   reducida (que va en media queries más específicas en algunos casos).

   Patrón resultante:
       .X-overlay              padding mínimo, full-screen
       .X-overlay__content     flex column 100%×100% sin tope de anchura
       header / result / etc.  flex: 0 0 auto  (no crecen)
       canvas / board          flex: 1 1 0, aspect-ratio del juego
                                manda → se ajusta al menor lado.
*/

/* El modo pantalla (más abajo) va sin padding: ahí el overlay es el
   marco de la ventana y esos milímetros son una rendija de fondo
   alrededor del juego. Se excluye aquí y no se pelea luego por la
   especificidad, que el `:not(#image-overlay)` cuenta como un id. */
[role="dialog"][id$="-overlay"]:not(#image-overlay):not(.juego--pantalla) {
    padding: 1.2vmin;
}

[class*="-overlay__content"] {
    width: 100%;
    height: 100%;
    max-width: none;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

/* Header, panel de resultado y estado / contadores no crecen.
   Se restringe a hijos directos/descendientes de __content para no
   afectar a otros .X-status fuera de los overlays (p.ej. profile). */
[class*="-overlay__content"] [class*="-overlay__header"],
[class*="-overlay__content"] [class$="-result"],
[class*="-overlay__content"] [class$="-victory"],
[class*="-overlay__content"] [class$="-status"],
[class*="-overlay__content"] [class$="-attempts"],
[class*="-overlay__content"] [class*="overlay__stats"] {
    flex: 0 0 auto;
    width: 100%;
    max-width: 720px;
    text-align: center;
}

/* Boards DOM (damas, reversi…): ocupan todo el alto restante del
   overlay. Con aspect-ratio definido en cada CSS de juego, la anchura se deriva del alto disponible y
   max-width/height:100% limita al hueco real. */
[class*="-overlay__content"] [class$="-board"]:not(button):not(input) {
    flex: 1 1 0;
    min-height: 0;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    box-sizing: border-box;
}

/* Canvas: el tamaño lo fija en píxeles _fitCanvas() de
   js0e_gameOverlays.js. El truco de arriba NO sirve para ellos: con
   `flex: 1 1 0` el alto lo manda flex-grow y `max-width: 100%` recorta
   el ancho sin recalcular el alto, así que en móvil vertical (hueco
   mucho más alto que ancho) el dibujo salía estirado — la bola de Pong,
   ovalada. Aquí solo se quitan los topes por-juego (`max-width: 660px`,
   `width: 100%`) y se deja el canvas centrado sin crecer. */
[class*="-overlay__content"] canvas {
    flex: 0 0 auto;
    min-height: 0;
    width: auto;                /* sin JS: tamaño del bitmap acotado por  */
    height: auto;               /* max-*, que en un reemplazado SÍ respeta */
    max-width: 100%;            /* la proporción (sale más pequeño, nunca  */
    max-height: 100%;           /* deformado)                              */
    box-sizing: border-box;
    /* Si sobra alto (tablero apaisado en pantalla vertical), el canvas se
       centra en el hueco en vez de quedar pegado a la cabecera. */
    margin-block: auto;
}

/* Botón "Salir" común a todos los overlays de minijuego. Lo inyecta el
   helper overlay() de js0e_gameOverlays y lo cablea mount(code, _close):
   sale del juego con el mismo teardown que terminarlo. Posicionado en la
   esquina superior derecha del overlay (que es position:fixed, así que es
   su bloque contenedor). Diseño sobrio: pastilla translúcida. */
.game-exit-btn {
    position: absolute;
    top: max(8px, 1.4vmin);
    right: max(8px, 1.4vmin);
    z-index: 50;
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.4em 0.8em;
    font: inherit;
    font-size: 0.85rem;
    line-height: 1;
    color: #e8ecf5;
    background: rgba(20, 26, 44, 0.65);
    border: 1px solid rgba(232, 236, 245, 0.25);
    border-radius: 999px;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background 0.15s ease, border-color 0.15s ease;
}

.game-exit-btn:hover,
.game-exit-btn:focus-visible {
    background: rgba(40, 50, 80, 0.85);
    border-color: rgba(232, 236, 245, 0.5);
    outline: none;
}

@media (max-width: 480px) {
    .game-exit-btn {
        font-size: 0.78rem;
        padding: 0.35em 0.7em;
    }
}

/* ---------------------------------------------------------------
   Selector de nivel de dificultad. Lo inyecta askLevel() de
   js0e_gameOverlays como hijo del overlay (no de __content), así que
   se superpone al tablero sin entrar en la columna flex ni en el
   reparto de alto de _fitCanvas(). z-index por debajo del botón
   "Salir" (50) para no taparlo.
   --------------------------------------------------------------- */
.game-levels {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4vmin;
    background: rgba(8, 11, 22, 0.86);
    backdrop-filter: blur(3px);
    animation: game-levels-in 0.2s ease;
}

@keyframes game-levels-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.game-levels__card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(340px, 100%);
    max-height: 100%;
    overflow-y: auto;
}

.game-levels__title {
    margin: 0 0 2px;
    text-align: center;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-strong);
}

.game-level {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    text-align: left;
    font: inherit;
    color: var(--text);
    background: var(--surface-soft);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}

.game-level:hover,
.game-level:focus-visible {
    background: rgba(77, 219, 255, 0.10);
    border-color: var(--neon-cyan);
    outline: none;
}

.game-level:active { transform: scale(0.99); }

/* El nivel de la última partida queda señalado y con el foco puesto. */
.game-level--last {
    border-color: var(--neon-cyan);
    box-shadow: 0 0 18px -8px var(--accent-glow);
}

.game-level__name {
    font-weight: 700;
    color: var(--text-strong);
}

.game-level__hint {
    font-size: 0.82rem;
    color: var(--text-muted);
}

/* Etiqueta "Nivel: X" que queda en la cabecera durante la partida. */
.game-level-tag {
    margin: 6px 0 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--neon-cyan);
}

/* Tableros <div> CUADRADOS ( damas, reversi,
   buscaminas, puzzle). El desbordamiento solo ocurre cuando el
   alto disponible es MAYOR que el ancho:
   · Apaisado: el alto restante es menor que el ancho → la regla
     genérica (flex:1 1 0) acota el cuadrado por alto y entra bien. NO
     se toca.
   · Vertical: el alto restante es mayor que el ancho y, al ser un <div>
     grid (sin tamaño intrínseco como un <canvas>), el cuadrado crece a
     ese alto y se sale por los lados (en pantallas muy altas el tablero
     se sale tanto que el juego parece "roto"). Solo aquí lo acotamos por
     el ancho disponible.
   Selector con especificidad (0,3,0) para ganar a la genérica
   […content] […-board]:not()… (0,2,2). Cada juego ya trae su propio
   aspect-ratio. (El memory ya no es un tablero <div>: va en 3D.) */
@media (orientation: portrait) {
    [class*="-overlay__content"] [class$="-board"].damas-board,
    [class*="-overlay__content"] [class$="-board"].reversi-board,
    [class*="-overlay__content"] [class$="-board"].puzzle-board {
        flex: 0 0 auto;
        width: min(100%, calc(100vh - 185px));
        width: min(100%, calc(100svh - 185px));
        height: auto;
        margin-inline: auto;
    }
}

/* ---- Buscaminas: tablero que crece con el nivel (9×9, 16×16, 30×16) ----
   Es el único tablero <div> que NO es cuadrado (el experto de Windows es
   30 columnas × 16 filas), así que se sale del bloque de arriba:
   · El ancho se deriva del alto libre corregido por la proporción del
     nivel (--bm-cols/--bm-rows de buscaminas-game.css) en las DOS
     orientaciones. Con la regla genérica (flex: 1 1 0 + max-height) el
     alto mandaría sobre el ancho y un tablero apaisado quedaría
     diminuto en cuanto la pantalla fuera alta.
   · `min-width` no deja bajar la casilla de ~22 px: 30 columnas en los
     400 px de un móvil dan casillas de 13 px, imposibles de tocar con
     el dedo. Al desbordar, el overlay (overflow: auto) desplaza el
     tablero; `margin-inline: auto` lo centra mientras quepa y se anula
     al desbordar, así que no queda ninguna columna inalcanzable.
   · Sin `max-height`: el alto lo manda el aspect-ratio, o las casillas
     dejarían de ser cuadradas justo cuando entra el min-width.
   Especificidad (0,3,0), por encima de la genérica […content] […-board]
   (0,2,2). */
[class*="-overlay__content"] [class$="-board"].buscaminas-board {
    flex: 0 0 auto;
    height: auto;
    max-height: none;
    width: min(100%, calc((100vh - 185px) * var(--bm-cols) / var(--bm-rows)));
    width: min(100%, calc((100svh - 185px) * var(--bm-cols) / var(--bm-rows)));
    min-width: calc(var(--bm-cols) * var(--bm-cell-min));
    margin-inline: auto;
}

/* Padding aún menor en móvil para no malgastar pixel. */
@media (max-width: 480px) {
    [role="dialog"][id$="-overlay"]:not(#image-overlay):not(.juego--pantalla) {
        padding: 0.6vmin;
    }
}

/* La marca de la partida en la tabla de récords (migración 1840). El
   hueco lo pone resultPanel() en TODOS los overlays y lo rellena
   js07_games cuando el servidor contesta; el juego que no puntúa lo deja
   oculto. Va entre el texto del resultado y el botón de seguir, en
   pastilla, para que se lea como una chapa y no como más resultado.
   El puesto en negrita lo mete js07_games con <strong>. */
.game-marca {
    margin: 0.6em auto 0;
    padding: 0.45em 0.9em;
    max-width: 34ch;
    font-size: 0.9rem;
    line-height: 1.45;
    color: #e8ecf5;
    background: rgba(20, 26, 44, 0.55);
    border: 1px solid rgba(232, 236, 245, 0.2);
    border-radius: 12px;
}

.game-marca strong {
    color: #ffd166;
}

/* Récord del mundo recién batido: la misma pastilla, encendida. */
.game-marca--record {
    color: #0d1120;
    background: #ffd166;
    border-color: #ffd166;
}

.game-marca--record strong {
    color: #0d1120;
}

@media (max-width: 480px) {
    .game-marca {
        font-size: 0.82rem;
        max-width: none;
    }
}

/* =====================================================================
   LA PANTALLA DEL JUEGO ES LA PANTALLA (22-sep-2026)

   Hasta aquí, un minijuego en 3D se jugaba dentro de un recuadro: arriba
   la cabecera y la fila de tarjetas del marcador, en medio el escenario
   con su marco redondeado y su `aspect-ratio`, y debajo los mandos. En
   un móvil alto (el Samsung S25 Ultra del que salió esto) el reparto
   dejaba el juego en un cuarto de la pantalla y media pantalla de negro
   sin usar.

   Ahora el escenario ocupa la ventana entera y TODO lo demás —la chapa
   del juego, los puntos, el récord, los botones y los mandos— va
   superpuesto encima, como el HUD de una recreativa. El juego no cambia
   ni una línea: el motor 3D (js1g_juego3d) encuadra la escena midiendo
   su caja, así que al crecer la caja la cámara se recoloca sola.

   Solo se aplica a los overlays que tienen `.juego3d-escenario`, que son
   los 98 minijuegos del catálogo; las cuatro actividades por subtema
   (sopa, crucigrama, mapa, parejas) siguen como estaban.

   El gancho es la clase `juego--pantalla`, que pone mount() al insertar
   el overlay (js0e_gameOverlays). No es un adorno: mount() necesita leer
   ANTES la proporción que el CSS del juego le da al escenario —de ahí
   sale si el juego es apaisado y hay que pedir el móvil de lado—, y aquí
   esa proporción se anula. Primero se mide, luego se pone la clase.

   Especificidad: las 58 hojas por-juego fijan la geometría del escenario
   con `.X-overlay .juego3d-escenario` (0,2,0); con el id y la clase del
   overlay delante esto sube a (0,2,1) y les gana sin un solo !important.
   ===================================================================== */

/* El overlay deja de ser una caja centrada con padding: es el marco de
   la ventana. `100dvh` porque en el móvil la barra del navegador se
   retrae: con `inset: 0` los mandos de abajo quedaban bajo ella. */
[id$="-overlay"].juego--pantalla {
    /* Punto de partida: lo que de verdad ocupe el HUD lo mide y lo
       reescribe _medirHud() (js0e_gameOverlays) en cuanto está montado.
       Estos valores son los de antes de la primera medida y los de un
       navegador sin ResizeObserver. */
    --j3-hud: calc(58px + env(safe-area-inset-top, 0px));
    padding: 0;
    height: 100dvh;
    align-items: stretch;
    justify-content: stretch;
    overflow: hidden;
    /* El mismo fondo que el escenario: la franja que este le cede al HUD
       no se ve como un hueco, sino como más juego. */
    background: var(--j3-fondo, rgba(4, 10, 26, 0.97));
}

/* Con el HUD en dos renglones (ver más abajo) hay que cederle más. */
@media (max-width: 760px) {
    [id$="-overlay"].juego--pantalla { --j3-hud: calc(78px + env(safe-area-inset-top, 0px)); }
    [id$="-overlay"].juego--pantalla .juego3d-marcador { padding-bottom: 8px; gap: 2px 12px; }
}

/* Móvil de lado: la pantalla es baja y cada píxel de alto es juego. */
@media (max-height: 520px) {
    [id$="-overlay"].juego--pantalla { --j3-hud: calc(46px + env(safe-area-inset-top, 0px)); }
    [id$="-overlay"].juego--pantalla .juego3d-marcador { padding-bottom: 8px; }
    [id$="-overlay"].juego--pantalla .juego3d-dato b { font-size: 1rem; }
}

[id$="-overlay"].juego--pantalla [class$="-overlay__content"] {
    position: relative;         /* bloque contenedor del HUD y los mandos */
    width: 100%;
    height: 100%;
    max-width: none;
    padding: 0;
    gap: 0;
}

/* El escenario: toda la ventana, sin marco, sin proporción impuesta. La
   proporción la pone la escena, que el motor encuadra a la caja.

   El escenario llega hasta el borde: NO le cede sitio al HUD. Que la
   escena no se encuadre debajo del marcador lo resuelve el motor, que
   lee `--j3-hud` y desplaza el encuadre (`reservaHud` en js1g_juego3d):
   la escena se ve igual de grande que si el HUD no estuviera y, donde
   está el HUD, se sigue pintando el juego. Los mandos de abajo tampoco
   se descuentan: flotan sobre la escena, como en cualquier juego de
   móvil. */
[id$="-overlay"].juego--pantalla .juego3d-escenario {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
    height: auto;
    max-height: none;
    min-height: 0;
    aspect-ratio: auto;
    align-self: stretch;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* ---- El HUD de arriba: chapa del juego + marcador + botones ----
   Superpuesto sobre la escena, sin cajas: lo que se lee es el dato, no
   la tarjeta. El degradado lo despega del fondo (hay juegos con cielo
   claro) y se desvanece para no cortar la escena en dos.
   El hueco de la derecha es el del botón «✕ Salir», que va aparte. */
[id$="-overlay"].juego--pantalla .juego3d-marcador {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    width: auto;
    max-width: none;
    padding: max(6px, env(safe-area-inset-top, 0px)) 10px 14px 10px;
    gap: 4px 14px;
    align-items: center;
    pointer-events: none;       /* la escena se toca a través del HUD */
    background: linear-gradient(180deg, rgba(3, 7, 18, 0.78), rgba(3, 7, 18, 0.42) 55%, transparent);
}

/* Los botones del marcador (Pausa, Cartas… y el «✕ Salir», que mount()
   muda aquí) sí se pulsan, y se van a la derecha del HUD. */
[id$="-overlay"].juego--pantalla .juego3d-botones {
    margin-left: auto;
    justify-content: flex-end;
    pointer-events: auto;
}

/* El «✕ Salir» ya no cuelga de la esquina: es un botón más de la fila. */
[id$="-overlay"].juego--pantalla .juego3d-botones .game-exit-btn {
    position: static;
    font-size: 0.75rem;
    padding: 0.5em 0.9em;
}

/* En pantalla estrecha el HUD se parte en dos renglones: arriba de qué
   juego es y sus botones, debajo los números, que así usan el ancho
   entero. El salto lo fuerza un ::after con `order` entre unos y otros,
   sin tocar el DOM de los 98 overlays. */
@media (max-width: 760px) {
    [id$="-overlay"].juego--pantalla .game-chapa { order: 0; }
    [id$="-overlay"].juego--pantalla .juego3d-botones { order: 1; }
    [id$="-overlay"].juego--pantalla .juego3d-marcador::after {
        content: "";
        order: 1;
        flex-basis: 100%;
        height: 0;
    }
    [id$="-overlay"].juego--pantalla .juego3d-dato { order: 2; }
}

[id$="-overlay"].juego--pantalla .juego3d-dato {
    flex: 0 1 auto;
    padding: 0;
    gap: 1px;
    background: none;
    border: 0;
    border-radius: 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}

[id$="-overlay"].juego--pantalla .juego3d-etq {
    font-size: 0.56rem;
    letter-spacing: 0.1em;
    color: rgba(240, 244, 250, 0.9);
}

[id$="-overlay"].juego--pantalla .juego3d-dato b {
    font-size: clamp(0.95rem, 2.4vmin, 1.25rem);
    color: #fff;
}

[id$="-overlay"].juego--pantalla .juego3d-boton {
    min-height: 34px;
    padding: 6px 10px;
    font-size: 0.75rem;
    color: #e8ecf5;
    background: rgba(20, 26, 44, 0.6);
    border-color: rgba(232, 236, 245, 0.25);
    backdrop-filter: blur(4px);
}

/* La chapa (logo + nombre + nivel) se funde en el HUD: sin tarjeta. En
   pantalla estrecha se lleva la fila entera y los datos caen debajo, que
   es como se lee mejor: «de qué juego es» y, debajo, «cómo voy». */
[id$="-overlay"].juego--pantalla .game-chapa {
    padding: 0;
    gap: 8px;
    background: none;
    border: 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}

[id$="-overlay"].juego--pantalla .game-chapa__nombre { color: #fff; }

/* La cabecera con las reglas ya no se ve: iba fija sobre el escenario,
   se leía una vez y luego solo tapaba juego (y en el móvil ni salía).
   Su texto lo enseña el botón «?» del HUD (_botonReglas, js0e), que lo
   copia a un panel encima de la partida y la deja en pausa mientras. */
[id$="-overlay"].juego--pantalla [class$="-overlay__header"] { display: none; }

[id$="-overlay"].juego--pantalla .game-reglas-btn {
    min-width: 34px;
    font-weight: 800;
}

.game-reglas {
    position: absolute;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(4, 8, 16, 0.55);
    backdrop-filter: blur(3px);
    animation: game-reglas-in 0.2s ease-out;
}

.game-reglas__caja {
    width: min(520px, 100%);
    max-height: 100%;
    overflow: auto;
    padding: 20px 22px;
    text-align: center;
    color: #eef2f8;
    background: rgba(14, 20, 34, 0.96);
    border: 1px solid rgba(232, 236, 245, 0.2);
    border-radius: 14px;
    box-shadow: 0 18px 50px -12px rgba(0, 0, 0, 0.7);
}

.game-reglas__titulo {
    margin: 0 0 10px;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--j3-acento, #fff);
}

.game-reglas__texto {
    margin: 0 0 18px;
    font-size: 0.95rem;
    line-height: 1.55;
}

.game-reglas__texto kbd {
    display: inline-block;
    padding: 1px 6px;
    margin: 0 1px;
    border: 1px solid rgba(232, 236, 245, 0.35);
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
    font-family: inherit;
    font-size: 0.85em;
}

@keyframes game-reglas-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ---- La ayuda por pestañas (js1x_ayuda) ----
   Misma capa que el panel de siempre (.game-reglas), con una caja de
   altura fija: al cambiar de pestaña no salta de tamaño. Sin pestañas
   (juego sencillo) la caja mide lo que su contenido. */
.game-ayuda {
    width: min(520px, 100%);
    height: min(720px, 100%);
    display: flex;
    flex-direction: column;
    color: #eef2f8;
    background: rgba(14, 20, 34, 0.97);
    border: 1px solid rgba(232, 236, 245, 0.2);
    border-radius: 14px;
    box-shadow: 0 18px 50px -12px rgba(0, 0, 0, 0.7);
    overflow: hidden;
    text-align: left;
}
.game-ayuda--una { height: auto; max-height: 100%; }
.game-ayuda__cabecera { padding: 14px 16px 0; }
.game-ayuda--una .game-ayuda__cabecera { padding-bottom: 4px; }
.game-ayuda__fila { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.game-ayuda .game-reglas__titulo { margin: 0; }

.game-ayuda__estilos {
    display: inline-flex;
    padding: 2px;
    border: 1px solid rgba(232, 236, 245, 0.2);
    border-radius: 999px;
}
.game-ayuda__estilos button {
    padding: 3px 10px;
    border: 0;
    border-radius: 999px;
    background: none;
    color: #9aa6bb;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
}
.game-ayuda__estilos button[aria-pressed="true"] { background: rgba(255, 255, 255, 0.12); color: #eef2f8; }

.game-ayuda__tabs {
    display: flex;
    gap: 4px;
    margin-top: 10px;
    border-bottom: 1px solid rgba(232, 236, 245, 0.16);
}
.game-ayuda__tab {
    flex: 1;
    margin-bottom: -1px;
    padding: 9px 2px 10px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: #9aa6bb;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
}
.game-ayuda__tab[aria-selected="true"] { color: #eef2f8; border-bottom-color: var(--j3-acento, #19b98c); }

.game-ayuda__cuerpo {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 16px;
    font-size: 0.93rem;
    line-height: 1.5;
}
.game-ayuda__cuerpo:focus { outline: none; }
/* Los h3 de la app van en versalitas grises: aquí son títulos de verdad */
.game-ayuda__cuerpo h3 { margin: 0; color: inherit; font-family: inherit; text-transform: none; letter-spacing: normal; }
.game-ayuda__cuerpo kbd,
.game-ayuda__todo kbd {
    display: inline-block;
    min-width: 1.6em;
    padding: 1px 6px;
    border: 1px solid rgba(232, 236, 245, 0.35);
    border-bottom-width: 2px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.08);
    font-family: inherit;
    font-size: 0.85em;
    text-align: center;
}

.game-ayuda__frase { margin: 0 0 10px; font-size: 1.2rem; font-weight: 800; line-height: 1.25; text-wrap: balance; }
.game-ayuda__basico { margin: 0; padding-left: 1.1em; display: grid; gap: 7px; }
.game-ayuda__seccion { margin: 18px 0 8px; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: #9aa6bb; }

.game-ayuda__todo { margin-top: 18px; padding-top: 10px; border-top: 1px solid rgba(232, 236, 245, 0.16); font-size: 0.85rem; color: #cfd6e3; }
.game-ayuda__todo summary { cursor: pointer; font-weight: 700; color: var(--j3-acento, #19b98c); }
.game-ayuda__todo p { margin: 8px 0 0; }

/* Piezas: la tira para elegir y el diagrama */
/* Una sola fila: js1x pone tantas columnas como piezas */
.game-ayuda__tira {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 2px;
    margin-bottom: 10px;
}
.game-ayuda__ficha {
    display: grid;
    justify-items: center;
    gap: 3px;
    padding: 4px 0;
    border: 0;
    border-radius: 8px;
    background: none;
    color: #9aa6bb;
    font: inherit;
    font-size: 0.6rem;
    font-weight: 700;
    cursor: pointer;
    min-width: 0;
}
.game-ayuda__ajedrez--abajo { margin: 14px 0 0; }
.game-ayuda__ficha[aria-pressed="true"] { color: #eef2f8; background: rgba(255, 255, 255, 0.08); }
.game-ayuda__ficha[aria-pressed="true"] .game-ayuda__cara { box-shadow: 0 0 0 3px var(--j3-acento, #19b98c); }
.game-ayuda__cara {
    width: 34px;
    height: 34px;
    flex: none;
    display: inline-grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    background: #fbf3df;
    color: #b8241c;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1;
}
.game-ayuda__cara--rival { color: #fbf3df; background: #3a2c22; }
.game-ayuda__cara img { width: 100%; height: 100%; display: block; }
.game-ayuda__pieza-nombre { display: flex; align-items: center; gap: 8px; font-size: 1.1rem; }
.game-ayuda__caras { display: flex; align-items: center; gap: 6px; margin-left: auto; font-size: 0.7rem; font-weight: 700; color: #9aa6bb; }
.game-ayuda__pieza-texto { margin: 2px 0 8px; }
.game-ayuda__tira .game-ayuda__cara { width: 32px; height: 32px; }
.game-ayuda__diagrama { display: block; width: 100%; max-width: min(236px, 34vh); height: auto; margin: 0 auto; }

.game-ayuda__ajedrez {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 9px;
    align-items: center;
    margin: 0 0 12px;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    font-size: 0.85rem;
    color: #cfd6e3;
}
.game-ayuda__ajedrez p { margin: 0; }
.game-ayuda__ajedrez b { color: #eef2f8; }
.game-ayuda__ajedrez-pieza {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #f2efe6;
    color: #1d1a18;
    font-family: "DejaVu Sans", "Segoe UI Symbol", "Noto Sans Symbols 2", serif;
    font-size: 1.45rem;
    line-height: 1;
}
.game-ayuda__ajedrez-pieza--no { background: none; border: 1px dashed rgba(232, 236, 245, 0.3); color: #9aa6bb; font-size: 1rem; }

.game-ayuda__leyenda { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; margin-top: 6px; font-size: 0.72rem; color: #9aa6bb; }
.game-ayuda__ley::before {
    content: "";
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 4px;
    vertical-align: -1px;
    border-radius: 50%;
}
.game-ayuda__ley--va::before   { background: #19b98c; }
.game-ayuda__ley--come::before { box-shadow: inset 0 0 0 2px #ff7a5c; }
.game-ayuda__ley--no::before   { content: "✕"; width: auto; height: auto; color: #ff7a5c; font-weight: 800; }
.game-ayuda__ley--marca::before    { border-radius: 2px; box-shadow: inset 0 0 0 2px #2f7bff; }
.game-ayuda__ley--especial::before { border-radius: 2px; background: #7a5530; }

.game-ayuda__casos { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; }
.game-ayuda__caso {
    padding: 5px 12px;
    border: 1px solid rgba(232, 236, 245, 0.2);
    border-radius: 999px;
    background: none;
    color: #eef2f8;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}
.game-ayuda__caso[aria-pressed="true"] { background: var(--j3-acento, #19b98c); border-color: transparent; color: #04231a; }
.game-ayuda__nota { margin: 10px 0 0; text-align: center; font-size: 0.85rem; color: #9aa6bb; }

/* Lista (sin diagramas), «Ojo con» */
.game-ayuda__item,
.game-ayuda__ojo article {
    padding: 11px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
}
.game-ayuda__item + .game-ayuda__item { margin-top: 10px; }
.game-ayuda__item-nombre { display: flex; align-items: center; gap: 8px; font-size: 1rem; }
.game-ayuda__item-nombre .game-ayuda__cara { width: 28px; height: 28px; font-size: 0.95rem; }
.game-ayuda__item p,
.game-ayuda__ojo p { margin: 4px 0 0; font-size: 0.88rem; color: #cfd6e3; }
.game-ayuda__item .game-ayuda__ajedrez { margin: 8px 0 0; }
.game-ayuda__ojo { display: grid; gap: 10px; }
.game-ayuda__ojo h3 { font-size: 0.98rem; }
.game-ayuda__ver {
    margin-top: 4px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--j3-acento, #19b98c);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
}

/* Mandos */
.game-ayuda__mandos { display: grid; gap: 16px; }
.game-ayuda__mandos h3 { margin-bottom: 6px; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: #9aa6bb; }
.game-ayuda__gestos { margin: 0; padding-left: 1.1em; display: grid; gap: 6px; }
.game-ayuda__teclas { display: grid; grid-template-columns: auto 1fr; gap: 7px 12px; align-items: center; }
.game-ayuda__tecla { white-space: nowrap; }
.game-ayuda__boton {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
    font-size: 0.85em;
    font-weight: 700;
}

.game-ayuda__pie {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 18px;
    padding: 12px 16px 14px;
    border-top: 1px solid rgba(232, 236, 245, 0.16);
}
.game-ayuda__callar { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; color: #cfd6e3; cursor: pointer; }

.game-ayuda button:focus-visible,
.game-ayuda summary:focus-visible { outline: 2px solid var(--j3-acento, #19b98c); outline-offset: 2px; }

@media (prefers-reduced-motion: no-preference) {
    .game-ayuda__cuerpo > * { animation: game-ayuda-entra 0.18s ease-out; }
}
@keyframes game-ayuda-entra {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

/* ---- Los mandos: flotando sobre la escena, pegados abajo ----
   Crucetas y botones de acción no necesitan suelo propio: el juego se ve
   detrás de ellos. Los que SON la interfaz de la partida (el teclado del
   Wordle, la lista del buscaobjetos) se quedan en el flujo, al fondo:
   superpuestos taparían justo lo que hay que mirar. */
/* Solo lo que cuelga del contenido: una cruceta METIDA en unos mandos
   (el bombardero, el tanque…) no se posiciona aparte, que entonces se
   sale de la fila, ocupa el ancho entero y aparece en mitad del tablero
   mientras su botón de acción se va al borde. */
[id$="-overlay"].juego--pantalla [class$="-overlay__content"] > .juego3d-cruceta,
[id$="-overlay"].juego--pantalla [class$="-mandos"] {
    position: absolute;
    bottom: max(10px, env(safe-area-inset-bottom, 0px));
    left: 0;
    right: 0;
    z-index: 30;
    margin: 0;
    padding-inline: 10px;
    /* Siete botones (el Tetris) no caben en los 412 px de un móvil de
       pie: antes se salían por la derecha, cortados. */
    flex-wrap: wrap;
    row-gap: 8px;
}

/* Con más de un grupo de mandos, cada uno a su borde: es donde caen los
   pulgares y, de paso, el centro de la pantalla —donde está el muñeco—
   queda despejado. Con uno solo se deja como lo puso su juego. */
[id$="-overlay"].juego--pantalla [class$="-mandos"]:has(> :nth-child(2)) {
    justify-content: space-between;
}

/* Los mandos van ENCIMA del juego, así que dejan verlo por debajo… */
[id$="-overlay"].juego--pantalla [class$="-mandos"] button,
[id$="-overlay"].juego--pantalla .juego3d-cruceta__btn {
    opacity: 0.85;
}

/* …y son más pequeños que cuando vivían en su propia banda bajo el
   tablero: ahí el sitio era suyo y ahora es del juego. El tamaño sale
   del lado corto de la pantalla (`vmin`), con un suelo de 46-52 px, que
   es lo que pide un dedo. El arpón de «Paco Pompas» pasa de 88 px a 52
   en un móvil, y las flechas de 76×64 a 46×40. */
[id$="-overlay"].juego--pantalla .juego3d-b-fuego {
    width: clamp(56px, 12vmin, 76px);
    height: clamp(56px, 12vmin, 76px);
    /* La letra encoge con el botón o el rótulo se sale del círculo, que
       recorta lo que sobra: «ARPÓN» se quedaba en «ARPÓ». */
    font-size: clamp(0.55rem, 1.5vmin, 0.75rem);
}

[id$="-overlay"].juego--pantalla .juego3d-b-salto {
    width: clamp(44px, 9vmin, 60px);
    height: clamp(44px, 9vmin, 60px);
}

[id$="-overlay"].juego--pantalla [class$="-mandos"] .juego3d-cruceta__btn,
[id$="-overlay"].juego--pantalla .juego3d-cruceta__btn {
    width: clamp(46px, 10vmin, 68px);
    height: clamp(40px, 8.5vmin, 58px);
    font-size: 1.15rem;
}

[id$="-overlay"].juego--pantalla .wordle-keyboard,
[id$="-overlay"].juego--pantalla .buscaobjetos-buscar {
    position: relative;
    z-index: 30;
    flex: 0 0 auto;
    margin-bottom: max(6px, env(safe-area-inset-bottom, 0px));
}

/* El resultado de la partida: en el centro de la pantalla, no al pie de
   una columna que ya no existe. */
[id$="-overlay"].juego--pantalla [class$="-result"] {
    position: absolute;
    /* Centrado con `inset` + `margin: auto`, NO con translate(-50%, -50%):
       medio centenar de juegos animan la entrada de su panel con un
       `transform`, y esa animación se lleva por delante cualquier
       transform que pusiéramos aquí — el panel salía descolgado por la
       derecha. */
    inset: 0;
    z-index: 55;
    width: min(420px, calc(100% - 28px));
    max-width: none;
    height: max-content;
    max-height: calc(100% - 28px);
    overflow-y: auto;
    margin: auto;
    /* Y opaco: el panel ya no se apoya en el fondo del overlay, sino
       sobre la escena, y los `--surface-soft` de los juegos son
       translúcidos —el resultado se leía con el paisaje por detrás—. */
    background-color: rgba(10, 14, 28, 0.94);
    backdrop-filter: blur(6px);
    box-shadow: 0 24px 60px -24px #000;
}

/* El selector de nivel tapa el juego y sus mandos —mientras se elige no
   se juega—, pero no el HUD: ahí está «✕ Salir», que tiene que seguir a
   mano para quien abrió el juego por error. Capas del modo pantalla:
   escenario 0 · teclas 20 · mandos 30 · «Gira el móvil» 40 ·
   niveles 45 · HUD 50 · resultado 55 · reglas «?» 60. */
[id$="-overlay"].juego--pantalla .game-levels { z-index: 45; }

/* ---------------------------------------------------------------
   «Gira el móvil»: el cartel de los juegos de campo apaisado.

   Lo pone mount() en los overlays cuyo escenario venía con una
   proporción a lo ancho (`juego--apaisado`), y solo se ve donde hace
   falta: móvil o tablet (dedo) y pantalla de pie. Donde el navegador
   deja bloquear la orientación (Android en pantalla completa) el
   teléfono ya se ha puesto de lado y el cartel no llega a verse; donde
   no (iOS), es lo único que hay.

   «Jugar así» (`juego--asi`) lo quita para esa partida: hay quien juega
   tumbado, y una pantalla que no se puede cerrar es peor que un juego
   pequeño. Y no es modal: por debajo del HUD, para que «✕ Salir» siga a
   mano, y fuera cuando el juego enseña su resultado, que es lo que hay
   que leer.
   --------------------------------------------------------------- */
.juego-gira { display: none; }

@media (orientation: portrait) and (pointer: coarse) {
    .juego--apaisado:has([class$="-result"]:not(.hidden)) .juego-gira { display: none; }
}

@media (orientation: portrait) and (pointer: coarse) {
    .juego--apaisado:not(.juego--asi) .juego-gira {
        position: absolute;
        inset: 0;
        z-index: 40;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 6vmin;
        background: rgba(6, 10, 22, 0.88);
        backdrop-filter: blur(3px);
    }
}

.juego-gira__caja {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 22ch;
    text-align: center;
}

.juego-gira__icono {
    font-size: 3.4rem;
    line-height: 1;
    animation: juego-gira-tumba 2.4s ease-in-out infinite;
}

@keyframes juego-gira-tumba {
    0%, 35%   { transform: rotate(0deg); }
    55%, 90%  { transform: rotate(90deg); }
    100%      { transform: rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
    .juego-gira__icono { animation: none; transform: rotate(90deg); }
}

.juego-gira__texto {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-strong);
}

/* ---------------------------------------------------------------
   «✨ Novedades» (js1y_novedades): interruptores para encender y apagar
   cada mejora de un juego en plena partida. Va dentro del escenario,
   debajo del HUD (--j3-hud) y arriba a la derecha, sin tapar el centro.
   --------------------------------------------------------------- */
.juego-novedades {
    position: absolute;
    top: calc(var(--j3-hud, 56px) + 8px);
    right: 12px;
    z-index: 45;
    width: min(340px, calc(100% - 24px));
    max-height: calc(100% - var(--j3-hud, 56px) - 20px);
    overflow: auto;
    padding: 12px 12px 10px;
    color: #eef2f8;
    background: rgba(14, 20, 34, 0.94);
    border: 1px solid rgba(232, 236, 245, 0.2);
    border-radius: 14px;
    box-shadow: 0 18px 50px -12px rgba(0, 0, 0, 0.7);
    text-align: left;
}
.juego-novedades[hidden] { display: none; }
.juego-novedades__titulo { margin: 0; font-size: 1rem; font-weight: 700; }
.juego-novedades__sub { margin: 2px 0 8px; font-size: .78rem; opacity: .75; }
.juego-novedades__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.juego-novedades__interruptor {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "nombre mando" "desc mando";
    align-items: center;
    column-gap: 10px;
    width: 100%;
    padding: 8px 10px;
    color: inherit;
    text-align: left;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(232, 236, 245, 0.12);
    border-radius: 10px;
    cursor: pointer;
}
.juego-novedades__interruptor:hover { background: rgba(255, 255, 255, 0.09); }
.juego-novedades__nombre { grid-area: nombre; font-weight: 600; font-size: .9rem; }
.juego-novedades__desc { grid-area: desc; font-size: .74rem; opacity: .72; }
.juego-novedades__mando {
    grid-area: mando;
    position: relative;
    width: 38px;
    height: 22px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    transition: background .15s ease;
}
.juego-novedades__mando::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: transform .15s ease;
}
.juego-novedades__interruptor[aria-checked="true"] .juego-novedades__mando { background: #3ccf7a; }
.juego-novedades__interruptor[aria-checked="true"] .juego-novedades__mando::after { transform: translateX(16px); }
.juego-novedades__pie { display: flex; gap: 6px; margin-top: 10px; }
.juego-novedades__todo {
    flex: 1;
    padding: 6px 8px;
    color: inherit;
    font-size: .8rem;
    background: transparent;
    border: 1px solid rgba(232, 236, 245, 0.25);
    border-radius: 8px;
    cursor: pointer;
}
.juego-novedades__todo:hover { background: rgba(255, 255, 255, 0.08); }
@media (prefers-reduced-motion: reduce) {
    .juego-novedades__mando, .juego-novedades__mando::after { transition: none; }
}
/* Una elección entre varios (el Coco moderno o el de cubos) */
.juego-novedades__eleccion {
    display: grid;
    gap: 6px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(232, 236, 245, 0.12);
    border-radius: 10px;
}
.juego-novedades__valores { display: flex; gap: 4px; padding: 2px; border: 1px solid rgba(232, 236, 245, 0.2); border-radius: 999px; width: fit-content; }
.juego-novedades__valor {
    padding: 4px 12px;
    color: inherit;
    font-size: .82rem;
    background: transparent;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
}
.juego-novedades__valor[aria-checked="true"] { color: #10131c; background: #ffcc1a; font-weight: 700; }