/* game-chrome.css — la cáscara común de los minijuegos: la MARQUESINA.
 *
 * Antes de jugar y al terminar, el juego se presenta como la pantalla de
 * entrada de una recreativa: su logo en 3D, su nombre y la tabla de
 * marcas. Durante la partida no queda nada de eso salvo el logo y el
 * nombre en la cabecera del overlay: la tabla se mira ANTES (es el
 * récord que vas a intentar batir) y DESPUÉS (que es cuando sabes si lo
 * has hecho), nunca en medio.
 *
 * La pinta js1q_marquesina.js; el logo es la tira de fotogramas de
 * assets/img/juegos/<code>.webp (ver scripts/gen_iconos_tiras.mjs).
 */

/* ---------------------------------------------------------------
   El logo: la tira de 12 fotogramas del vaivén.
   El recorrido va en PORCENTAJE, así que la misma regla vale a 38 px
   y a 200: `steps(12, jump-none)` reparte los 12 fotogramas exactos
   entre el 0 % y el 100 %, y `alternate` hace la vuelta sin repetir
   el extremo. Es el vaivén de ±32° de los iconos, que no dan la
   vuelta entera porque los retro son sprites planos.
   --------------------------------------------------------------- */
.game-logo {
    flex: 0 0 auto;
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55));
}

.game-logo--tira {
    background-size: 1200% 100%;
    background-position: 0% 50%;
}

.game-logo--vaiven {
    animation: game-logo-vaiven 1.8s steps(12, jump-none) infinite alternate;
}

@keyframes game-logo-vaiven {
    from { background-position: 0% 50%; }
    to   { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .game-logo--vaiven { animation: none; background-position: 50% 50%; }
}

/* Sin tira (un juego sin icono 3D todavía): el emoji del catálogo. */
.game-logo--emoji {
    display: grid;
    place-items: center;
    line-height: 1;
    filter: none;
}

/* ---------------------------------------------------------------
   La marquesina: capa a pantalla completa, por encima de todo, que
   se pone antes de arrancar el juego y al terminar la partida.
   --------------------------------------------------------------- */
.marquesina {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: max(16px, 3vmin);
    padding-top: max(16px, env(safe-area-inset-top, 0px));
    text-align: center;
    overflow-y: auto;
    background:
        radial-gradient(90% 65% at 50% 22%, var(--marq-halo, rgba(77, 219, 255, 0.18)), transparent 70%),
        linear-gradient(180deg, #0c1120, var(--bg));
    animation: marquesina-entra 0.22s ease;
}

@keyframes marquesina-entra {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .marquesina { animation: none; }
}

/* Los hijos de la marquesina no se salen aunque el nombre del juego o
   el titular de la marca sean largos. */
.marquesina > * { max-width: 100%; }

.marquesina__logo {
    width: clamp(140px, 30vmin, 250px);
    aspect-ratio: 1;
    margin-bottom: -10px;
    filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.7));
}

.marquesina__nombre {
    margin: 0;
    font-size: clamp(1.7rem, 6.4vmin, 3rem);
    font-weight: 800;
    line-height: 1;
    color: var(--text-strong);
    text-wrap: balance;
}

.marquesina__linea {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    font-size: 0.88rem;
    color: var(--text-muted);
}

.marquesina__nivel { color: var(--marq-acento, var(--accent)); font-weight: 700; }

.marquesina__punto {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.55;
}

/* El titular del final de partida: la marca de ESTA partida. */
.marquesina__marca {
    max-width: min(100%, 36ch);
    margin: 0;
    padding: 8px 22px;
    line-height: 1.35;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-strong);
    background: rgba(255, 255, 255, 0.07);
    border-radius: var(--radius-pill);
}

.marquesina__marca--record {
    color: #2a1d00;
    background: linear-gradient(180deg, #ffe49a, #ffd166);
}

/* ---------------------------------------------------------------
   El nivel, que se elige AQUÍ y no encima del tablero. Manda sobre
   lo que se mira: cada nivel tiene su tabla de marcas.
   --------------------------------------------------------------- */
.marquesina__niveles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.marquesina__nivel-btn {
    padding: 8px 18px;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text);
    background: rgba(255, 255, 255, 0.07);
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.marquesina__nivel-btn:hover { background: rgba(255, 255, 255, 0.16); }

.marquesina__nivel-btn[aria-pressed="true"] {
    color: #08101c;
    background: var(--marq-acento, var(--accent));
}

.marquesina__nivel-btn:focus-visible { outline: 2px solid var(--text-strong); outline-offset: 2px; }

/* Otra elección del juego que no es el nivel (la baraja de Parejas,
   export OPCIONES): cada valor es un abanico de tres cartas con sus caras,
   para verlo sin leerlo. Las cartas imitan las del juego: marfil con
   ribete dorado. */
.marquesina__opcion { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.marquesina__opcion-titulo {
    margin: 0;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.marquesina__muestras {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    width: min(420px, 100%);
}
@media (min-width: 640px) {
    .marquesina__muestras { grid-template-columns: repeat(6, minmax(0, 1fr)); width: min(780px, 100%); gap: 8px; }
}
.marquesina__muestra {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 4px 7px;
    font: inherit;
    color: var(--text);
    background: rgba(255, 255, 255, 0.06);
    border: 2px solid transparent;
    border-radius: 14px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.marquesina__muestra:hover { background: rgba(255, 255, 255, 0.13); }
.marquesina__muestra:focus-visible { outline: 2px solid var(--text-strong); outline-offset: 2px; }
.marquesina__muestra[aria-pressed="true"] {
    border-color: var(--marq-acento, var(--accent));
    background: rgba(255, 255, 255, 0.12);
}
.marquesina__abanico {
    position: relative;
    display: block;
    width: 92px;
    height: 58px;
    margin-bottom: 2px;
}
.marquesina__carta {
    position: absolute;
    left: 50%;
    bottom: 0;
    display: grid;
    place-items: center;
    width: 34px;
    height: 44px;
    margin-left: -17px;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif;
    font-size: 1.3rem;
    line-height: 1;
    background: #fffdf6;
    border: 2px solid #e9d6a6;
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
    transform-origin: 50% 110%;
    transition: transform 0.2s ease;
}
.marquesina__carta:nth-child(1) { transform: translateX(-22px) rotate(-14deg); }
.marquesina__carta:nth-child(2) { transform: translateY(-6px); z-index: 1; }
.marquesina__carta:nth-child(3) { transform: translateX(22px) rotate(14deg); }
.marquesina__muestra:hover .marquesina__carta:nth-child(1),
.marquesina__muestra[aria-pressed="true"] .marquesina__carta:nth-child(1) { transform: translateX(-26px) rotate(-20deg); }
.marquesina__muestra:hover .marquesina__carta:nth-child(2),
.marquesina__muestra[aria-pressed="true"] .marquesina__carta:nth-child(2) { transform: translateY(-9px); }
.marquesina__muestra:hover .marquesina__carta:nth-child(3),
.marquesina__muestra[aria-pressed="true"] .marquesina__carta:nth-child(3) { transform: translateX(26px) rotate(20deg); }
.marquesina__muestra-nombre {
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.15;
    text-align: center;
}
/* Sin abanico (el tablero del Go): el nombre es la muestra, y la fila
   va centrada en vez de en la rejilla de seis de las barajas */
.marquesina__muestras--texto { display: flex; flex-wrap: wrap; justify-content: center; }
.marquesina__muestra--texto { justify-content: center; min-width: 88px; padding: 10px 14px; }
.marquesina__muestra--texto .marquesina__muestra-nombre { font-size: 1rem; }

/* La pista del nivel elegido («4 oleadas · 2 naves»): la del juego, que
   ya la escribía en su selector. */
.marquesina__nivel-pista {
    margin: -4px 0 0;
    min-height: 1.2em;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.marquesina__hueco {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* ---------------------------------------------------------------
   La tira de marcas: filas unidas por una guía de puntos, como el
   programa de mano de una feria — no una tabla de hoja de cálculo.
   --------------------------------------------------------------- */
.marcas-tira {
    width: min(420px, 100%);
    padding: 14px 18px;
    background: rgba(9, 13, 24, 0.55);
    border-radius: 22px;
}

.marcas-tira__titulo {
    margin: 0 0 6px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--neon-yellow);
}

.marcas-tira__lista {
    margin: 0;
    padding: 0;
    list-style: none;
}

.marcas-tira__fila {
    display: grid;
    grid-template-columns: 1.7em auto 1fr auto;
    align-items: baseline;
    gap: 8px;
    padding: 4px 0;
    font-size: 0.92rem;
    text-align: left;
}

.marcas-tira__pos {
    text-align: right;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.marcas-tira__quien { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.marcas-tira__guia {
    height: 0.62em;
    border-bottom: 2px dotted rgba(255, 255, 255, 0.22);
}

.marcas-tira__marca {
    font-weight: 700;
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
}

.marcas-tira__fila--lider .marcas-tira__pos,
.marcas-tira__fila--lider .marcas-tira__marca { color: var(--neon-yellow); }
.marcas-tira__fila--lider .marcas-tira__quien { color: var(--neon-yellow); font-weight: 700; }

.marcas-tira__fila--yo .marcas-tira__quien,
.marcas-tira__fila--yo .marcas-tira__marca { color: var(--accent); font-weight: 700; }

.marcas-tira__pie {
    margin: 8px 0 0;
    padding-top: 8px;
    border-top: 1px dashed rgba(255, 255, 255, 0.16);
    font-size: 0.78rem;
    color: var(--text-muted);
}

.marcas-tira__pie b { color: var(--text-strong); font-variant-numeric: tabular-nums; }

.marcas-tira__vacio { margin: 0; font-size: 0.86rem; color: var(--text-muted); }

/* ---------------------------------------------------------------
   Los botones de la marquesina.
   --------------------------------------------------------------- */
.marquesina__botones {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: center;
}

.marquesina__jugar {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 32px;
    font: inherit;
    font-size: 1.15rem;
    font-weight: 700;
    color: #08101c;
    background: var(--marq-acento, var(--accent));
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    box-shadow: 0 14px 34px -14px var(--marq-acento, var(--accent-glow));
    transition: transform 0.12s ease;
}

.marquesina__jugar:hover { transform: translateY(-1px); }
.marquesina__jugar:active { transform: translateY(1px); }

.marquesina__jugar:focus-visible {
    outline: 3px solid var(--text-strong);
    outline-offset: 3px;
}

.marquesina__volver {
    padding: 11px 22px;
    font: inherit;
    font-weight: 600;
    color: var(--text);
    background: rgba(255, 255, 255, 0.08);
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
}

.marquesina__volver:hover { background: rgba(255, 255, 255, 0.16); }
.marquesina__volver:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------------------------------------------------------------
   La chapa de la partida: de qué juego es, a la IZQUIERDA del
   marcador donde el juego lleva sus puntos — lo primero que se lee.
   La pone mount() en js0e; sustituye al «¡Bonus desbloqueado!» que
   llevaban los 102 overlays en la cabecera.
   --------------------------------------------------------------- */
.game-chapa {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 14px 6px 8px;
    min-width: 0;
    background: var(--surface-soft);
    border: 1px solid var(--border-strong);
    border-radius: 12px;
}

.game-chapa .game-logo { width: 34px; height: 34px; }
.game-chapa .game-logo--emoji { font-size: 1.5rem; }

.game-chapa__texto { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }

/* El <h2> del diálogo, que ahora dice el nombre del juego. */
.game-chapa__nombre {
    margin: 0;
    font-size: clamp(0.9rem, 2.4vmin, 1.1rem);
    font-weight: 700;
    color: var(--text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.game-chapa__nivel {
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
}

.game-chapa__nivel:empty { display: none; }

/* El marcador ya no reparte el ancho a partes iguales: la chapa manda a
   la izquierda y los datos del juego se aprietan a su derecha. */
.juego3d-marcador .game-chapa + .juego3d-dato { flex: 0 1 auto; }

@media (max-width: 480px) {
    .game-chapa { padding: 4px 10px 4px 6px; gap: 7px; }
    .game-chapa .game-logo { width: 28px; height: 28px; }
    .game-chapa__nivel { display: none; }
    .marquesina { gap: 10px; }
    .marquesina__logo { width: clamp(120px, 34vmin, 180px); }
    .marcas-tira { padding: 12px 14px; }
}