/* ==========================================================================
   TRUCACHO GD - MENÚ PRINCIPAL Y PANTALLAS DEL MENÚ
   Estética: cartel de bar del conurbano, chapa enlozada, fileteado porteño,
   naipes españoles y luz de lámpara sobre la mesa.
   Cargar DESPUÉS de css/estilos.css.
   ========================================================================== */

:root {
    --tgm-tinta: #1a0a00;
    --tgm-crema: #f7ecd0;
    --tgm-crema-osc: #e3cf9f;
    --tgm-oro: #ffd23f;
    --tgm-oro-osc: #c98a00;
    --tgm-rojo: #c8261b;
    --tgm-rojo-osc: #7a0f08;
    --tgm-verde: #2f8f4e;
    --tgm-verde-osc: #14532a;
    --tgm-noche: #0d0806;
    --tgm-fuente-titulo: Impact, 'Haettenschweiler', 'Arial Narrow Bold', 'Arial Black', sans-serif;
    --tgm-fuente-texto: 'Trebuchet MS', 'Segoe UI', Verdana, sans-serif;
    --tgm-ease-rebote: cubic-bezier(.34, 1.56, .64, 1);
}

/* ---------- Contenedor ---------- */
#menu-screen.tgm-activo {
    justify-content: center;
    padding: 0;
    background: var(--tgm-noche);
    transition: opacity .6s ease;
}
#menu-screen.tgm-activo::before { display: none; }
#menu-screen.tgm-saliendo .tgm-raiz { animation: tgmSalidaMenu .42s ease-in forwards; }
#menu-screen.tgm-oculto-por-cine { opacity: 0 !important; pointer-events: none !important; }

@keyframes tgmSalidaMenu {
    to { opacity: 0; transform: scale(1.06); filter: blur(4px) brightness(1.6); }
}

.tgm-raiz {
    position: absolute;
    inset: 0;
    overflow: hidden;
    overflow: clip; /* hidden igual se deja desplazar al enfocar un botón que todavía está entrando de costado */
    font-family: var(--tgm-fuente-texto);
    color: var(--tgm-crema);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* ---------- Fondo animado ---------- */
.tgm-fondo {
    position: absolute;
    inset: -4%;
    /* desenfoque y oscurecido ya "horneados" en la imagen (960 px, 13 KB): antes era un filter blur sobre el fondo
       en movimiento, que se recalculaba en cada cuadro */
    background: url('../img/escenarios/fondo_portada.webp') center 30% / cover no-repeat;
    animation: tgmKenBurns 38s ease-in-out infinite alternate;
}
@keyframes tgmKenBurns {
    from { transform: scale(1.04) translate(0, 0); }
    to   { transform: scale(1.14) translate(-1.5%, 1%); }
}
.tgm-rayos {
    position: absolute;
    left: 50%; top: -30%;
    width: 160vmax; height: 160vmax;
    transform: translateX(-50%);
    background: conic-gradient(from 180deg at 50% 0%,
        transparent 0deg, rgba(255, 210, 63, .09) 8deg, transparent 16deg,
        transparent 26deg, rgba(255, 210, 63, .07) 32deg, transparent 40deg,
        transparent 320deg, rgba(255, 210, 63, .07) 328deg, transparent 336deg,
        transparent 344deg, rgba(255, 210, 63, .09) 352deg, transparent 360deg);
    animation: tgmRayos 14s ease-in-out infinite alternate;
    pointer-events: none;
    mix-blend-mode: screen;
}
@keyframes tgmRayos { from { transform: translateX(-50%) rotate(-6deg); } to { transform: translateX(-50%) rotate(6deg); } }

.tgm-humo {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 40% 25% at 20% 80%, rgba(255, 240, 220, .07), transparent 70%),
        radial-gradient(ellipse 35% 22% at 80% 70%, rgba(255, 240, 220, .06), transparent 70%),
        radial-gradient(ellipse 50% 30% at 50% 10%, rgba(255, 200, 120, .12), transparent 70%);
    animation: tgmHumo 18s ease-in-out infinite alternate;
    pointer-events: none;
}
@keyframes tgmHumo { from { transform: translateX(-3%); opacity: .8; } to { transform: translateX(3%); opacity: 1; } }

.tgm-vineta {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at 50% 42%, transparent 35%, rgba(0, 0, 0, .55) 75%, rgba(0, 0, 0, .9) 100%);
    pointer-events: none;
}

/* ---------- Lluvia de naipes (armarLluvia en menu_principal.js) ----------
   .tgm-gota cae y deriva; .tgm-gota-naipe gira en 3D mostrando cara y dorso. */
.tgm-lluvia, .tgm-lluvia-frente { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.tgm-lluvia-frente { z-index: 5; transition: opacity .4s ease; }
#menu-screen:not([data-pantalla="principal"]) .tgm-lluvia-frente { opacity: 0; }
.tgm-gota {
    position: absolute;
    top: 0;
    width: var(--ancho);
    perspective: 600px;
    animation: tgmCaer var(--dur) linear var(--retraso) infinite;
    will-change: transform;
}
.tgm-gota-naipe {
    position: relative;
    transform-style: preserve-3d;
    animation: tgmGirarNaipe var(--giro) linear var(--retraso) infinite;
}
.tgm-gota-naipe img {
    display: block;
    width: 100%;
    border-radius: 6%;
    backface-visibility: hidden;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .55);
}
.tgm-gota-naipe .tgm-gota-dorso { position: absolute; inset: 0; height: 100%; transform: rotateY(180deg); }
/* Profundidad solo con transparencia: un filtro (blur) sobre un naipe que gira en 3D se recalcula en cada cuadro y hacía
   tironear la portada en PC con video integrado (2026-11-02). Los dos de foco conservan el desenfoque pero no giran:
   así se rasterizan una vez y solo se desplazan. */
.tgm-gota-lejos { opacity: .22; }
.tgm-gota-medio { opacity: .45; }
.tgm-gota-cerca { opacity: .85; }
.tgm-gota-foco  { opacity: .5; filter: blur(7px) brightness(.9); }
.tgm-gota-foco .tgm-gota-naipe { animation: none; transform: rotateX(18deg) rotateY(25deg); }
@keyframes tgmCaer {
    from { transform: translate(0, -30cqh) rotate(var(--inclina)); }
    to   { transform: translate(var(--deriva), 120cqh) rotate(calc(var(--inclina) * -1)); }
}
@keyframes tgmGirarNaipe {
    from { transform: rotateY(0) rotateX(18deg); }
    to   { transform: rotateY(360deg) rotateX(18deg); }
}

/* ---------- Pantallas ---------- */
.tgm-pantalla {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(10px, 2.2cqh, 26px) clamp(14px, 3cqw, 48px);
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    transform: scale(.96) translateY(14px);
    transition: opacity .32s ease, transform .38s var(--tgm-ease-rebote), visibility 0s linear .38s;
    z-index: 2;
}
.tgm-pantalla.activa {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .32s ease, transform .38s var(--tgm-ease-rebote), visibility 0s;
    z-index: 3;
}
.tgm-pantalla.saliendo { opacity: 0; transform: scale(1.03) translateY(-10px); }

/* ---------- Portada / título ---------- */
.tgm-principal { justify-content: space-between; }
.tgm-portada { text-align: center; margin-top: clamp(0px, 1cqh, 14px); }
.tgm-titulo-marco {
    width: min(78cqw, 820px, 95cqh * 1.6);
    margin: 0 auto;
    animation: tgmLatirTitulo 5s ease-in-out infinite;
    transform-origin: 50% 70%;
}
.tgm-titulo-svg { width: 100%; height: auto; display: block; overflow: visible; }
.tgm-titulo-capa {
    font-family: var(--tgm-fuente-titulo);
    font-size: calc(168px * var(--tgm-letra, 1));
    letter-spacing: 4px;
}
.tgm-capa-profunda { fill: var(--tgm-rojo-osc); stroke: var(--tgm-tinta); stroke-width: 26px; stroke-linejoin: round; transform: translate(0, 12px); }
.tgm-capa-contorno { fill: none; stroke: var(--tgm-tinta); stroke-width: 18px; stroke-linejoin: round; }
.tgm-capa-relleno { stroke: #fff3b0; stroke-width: 2px; paint-order: stroke; }
.tgm-gd-texto {
    font-family: var(--tgm-fuente-titulo);
    font-size: calc(54px * var(--tgm-letra, 1));
    fill: var(--tgm-crema);
    stroke: var(--tgm-tinta);
    stroke-width: 6px;
    paint-order: stroke;
    letter-spacing: 6px;
}
.tgm-chapa-gd { animation: tgmChapa 3.2s ease-in-out infinite; transform-box: fill-box; }
@keyframes tgmChapa { 0%, 100% { rotate: -2deg; } 50% { rotate: 2deg; } }
@keyframes tgmLatirTitulo { 0%, 100% { transform: scale(1) rotate(-.6deg); } 50% { transform: scale(1.025) rotate(.6deg); } }

.tgm-bajada {
    display: inline-block;
    margin-top: clamp(-6px, -1cqh, 0px);
    padding: 4px 16px;
    font-family: var(--tgm-fuente-titulo);
    font-size: calc(clamp(.7rem, 1.6cqh + .3cqw, 1.15rem) * var(--tgm-letra, 1));
    letter-spacing: .18em;
    color: var(--tgm-oro);
    background: rgba(0, 0, 0, .55);
    border-top: 2px solid var(--tgm-oro-osc);
    border-bottom: 2px solid var(--tgm-oro-osc);
    text-shadow: 2px 2px 0 #000;
}

/* ---------- Botonera principal ---------- */
.tgm-botonera {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(8px, 1.6cqh, 18px) clamp(14px, 2cqw, 30px);
    width: min(640px, 86cqw);
    margin: clamp(4px, 1cqh, 12px) auto auto;
}
.tgm-btn-principal { grid-column: 1 / -1; }
.tgm-btn-salir.tgm-btn:not(.tgm-btn-chico) { grid-column: 1 / -1; justify-self: center; width: 52%; }

/* ---------- El botón chapa ---------- */
.tgm-btn {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font: inherit;
    color: inherit;
    outline: none;
    transition: transform .18s var(--tgm-ease-rebote);
    -webkit-tap-highlight-color: transparent;
}
.tgm-btn-sombra {
    position: absolute;
    left: 6%; right: 6%; bottom: -8px;
    height: 16px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    filter: blur(6px);
    transition: transform .2s ease, opacity .2s ease;
}
.tgm-btn-chapa {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: clamp(34px, 6.4cqh, 58px);
    padding: 0 clamp(12px, 2cqw, 26px);
    border-radius: 14px;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, .55), transparent 55%),
        repeating-linear-gradient(115deg, rgba(120, 80, 20, .05) 0 2px, transparent 2px 6px),
        linear-gradient(180deg, #fffaf0 0%, var(--tgm-crema) 45%, var(--tgm-crema-osc) 100%);
    border: 4px solid var(--tgm-tinta);
    box-shadow:
        inset 0 0 0 3px var(--tgm-rojo),
        inset 0 0 0 6px var(--tgm-crema),
        inset 0 0 0 7px rgba(201, 138, 0, .8),
        0 6px 0 var(--tgm-tinta),
        0 8px 0 rgba(0, 0, 0, .35);
    transition: transform .18s var(--tgm-ease-rebote), box-shadow .18s ease, background .2s ease;
}
/* remaches de chapa */
.tgm-btn-chapa::before, .tgm-btn-chapa::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 7px; height: 7px;
    margin-top: -3.5px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fff, #9b8a6a 60%, #4a3b22);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .6);
}
.tgm-btn-chapa::before { left: 11px; }
.tgm-btn-chapa::after  { right: 11px; }

.tgm-btn-texto {
    position: relative;
    font-family: var(--tgm-fuente-titulo);
    font-size: calc(clamp(.95rem, 2.3cqh + .5cqw, 1.75rem) * var(--tgm-letra, 1));
    letter-spacing: .06em;
    color: var(--tgm-rojo);
    -webkit-text-stroke: 1px var(--tgm-rojo-osc);
    text-shadow: 2px 2px 0 rgba(255, 210, 63, .9), 3px 3px 0 var(--tgm-tinta);
    white-space: nowrap;
}

/* filetes (rulos) a los costados del texto */
.tgm-btn-filete {
    width: clamp(14px, 2cqw, 26px);
    height: clamp(10px, 1.6cqh, 16px);
    border: 3px solid var(--tgm-verde);
    border-color: var(--tgm-verde) transparent transparent var(--tgm-verde);
    border-radius: 60% 0 0 0;
    opacity: .85;
    transition: transform .25s var(--tgm-ease-rebote), border-color .2s;
}
.tgm-f-izq { transform: rotate(-20deg); }
.tgm-f-der { transform: scaleX(-1) rotate(-20deg); }

.tgm-btn-principal .tgm-btn-chapa {
    min-height: clamp(42px, 8.6cqh, 78px);
    background:
        radial-gradient(ellipse at 30% 15%, rgba(255, 255, 255, .45), transparent 55%),
        repeating-linear-gradient(115deg, rgba(0, 0, 0, .06) 0 2px, transparent 2px 6px),
        linear-gradient(180deg, #ff5a48 0%, var(--tgm-rojo) 50%, #8f150c 100%);
    box-shadow:
        inset 0 0 0 3px var(--tgm-oro),
        inset 0 0 0 6px var(--tgm-rojo),
        inset 0 0 0 7px rgba(255, 210, 63, .6),
        0 7px 0 var(--tgm-tinta),
        0 10px 0 rgba(0, 0, 0, .35),
        0 0 30px rgba(255, 90, 40, .35);
    animation: tgmLatidoBoton 2.4s ease-in-out infinite;
}
.tgm-btn-principal .tgm-btn-texto {
    font-size: calc(clamp(1.15rem, 3.4cqh + .6cqw, 2.5rem) * var(--tgm-letra, 1));
    color: var(--tgm-oro);
    -webkit-text-stroke: 1.5px var(--tgm-tinta);
    text-shadow: 3px 3px 0 var(--tgm-tinta), 0 0 18px rgba(255, 210, 63, .5);
}
.tgm-btn-principal .tgm-btn-filete { border-color: var(--tgm-oro) transparent transparent var(--tgm-oro); }
@keyframes tgmLatidoBoton { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }

.tgm-btn-salir .tgm-btn-chapa {
    background: linear-gradient(180deg, #4a3a2a, #2b2016);
    box-shadow: inset 0 0 0 3px #8a6b3a, 0 5px 0 var(--tgm-tinta), 0 7px 0 rgba(0, 0, 0, .35);
}
.tgm-btn-salir .tgm-btn-texto { color: var(--tgm-crema-osc); text-shadow: 2px 2px 0 var(--tgm-tinta); -webkit-text-stroke: 0; }
.tgm-btn-salir .tgm-btn-filete { border-color: #8a6b3a transparent transparent #8a6b3a; }

/* ayuda contextual: cinta que asoma debajo */
.tgm-btn-ayuda {
    position: absolute;
    left: 50%; top: calc(100% + 6px);
    transform: translate(-50%, -6px);
    padding: 3px 10px;
    font-size: calc(clamp(.62rem, 1.3cqh + .1cqw, .85rem) * var(--tgm-letra, 1));
    font-weight: bold;
    color: var(--tgm-tinta);
    background: var(--tgm-oro);
    border: 2px solid var(--tgm-tinta);
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease, transform .2s var(--tgm-ease-rebote);
    z-index: 6;
}
.tgm-btn-ayuda:empty { display: none; }

/* estados */
.tgm-btn:hover .tgm-btn-chapa, .tgm-btn.tgm-foco .tgm-btn-chapa, .tgm-btn:focus-visible .tgm-btn-chapa {
    transform: translateY(-4px) rotate(-1.2deg) scale(1.03);
    box-shadow:
        inset 0 0 0 3px var(--tgm-rojo),
        inset 0 0 0 6px var(--tgm-crema),
        inset 0 0 0 7px rgba(201, 138, 0, .8),
        0 10px 0 var(--tgm-tinta),
        0 12px 0 rgba(0, 0, 0, .35),
        0 0 0 4px var(--tgm-oro),
        0 0 26px 6px rgba(255, 210, 63, .55);
}
.tgm-btn-principal:hover .tgm-btn-chapa, .tgm-btn-principal.tgm-foco .tgm-btn-chapa {
    animation: none;
    box-shadow:
        inset 0 0 0 3px var(--tgm-oro), inset 0 0 0 6px var(--tgm-rojo), inset 0 0 0 7px rgba(255, 210, 63, .6),
        0 11px 0 var(--tgm-tinta), 0 13px 0 rgba(0, 0, 0, .35), 0 0 0 4px var(--tgm-oro), 0 0 40px 10px rgba(255, 140, 40, .6);
}
.tgm-btn:nth-child(even):hover .tgm-btn-chapa, .tgm-btn:nth-child(even).tgm-foco .tgm-btn-chapa { transform: translateY(-4px) rotate(1.2deg) scale(1.03); }
.tgm-btn:hover .tgm-btn-sombra, .tgm-btn.tgm-foco .tgm-btn-sombra { transform: scale(.9); opacity: .7; }
.tgm-btn:hover .tgm-btn-ayuda, .tgm-btn.tgm-foco .tgm-btn-ayuda { opacity: 1; transform: translate(-50%, 0); }
.tgm-btn:hover .tgm-f-izq, .tgm-btn.tgm-foco .tgm-f-izq { transform: rotate(-38deg) translateX(-3px); }
.tgm-btn:hover .tgm-f-der, .tgm-btn.tgm-foco .tgm-f-der { transform: scaleX(-1) rotate(-38deg) translateX(-3px); }

.tgm-btn.tgm-presionado .tgm-btn-chapa, .tgm-btn:active .tgm-btn-chapa {
    transform: translateY(4px) scale(.98) !important;
    box-shadow: inset 0 0 0 3px var(--tgm-rojo), inset 0 0 0 6px var(--tgm-crema), 0 2px 0 var(--tgm-tinta) !important;
    transition-duration: .05s;
}

.tgm-btn:disabled, .tgm-btn.tgm-deshabilitado { cursor: not-allowed; }
.tgm-btn:disabled .tgm-btn-chapa, .tgm-btn.tgm-deshabilitado .tgm-btn-chapa {
    filter: grayscale(.85) brightness(.6);
    transform: none !important;
}
.tgm-btn:disabled .tgm-btn-ayuda, .tgm-btn.tgm-deshabilitado .tgm-btn-ayuda { background: #999; }

/* foco genérico para los demás controles */
.tgm-raiz [data-nav]:focus { outline: none; }
.tgm-raiz [data-nav].tgm-foco:not(.tgm-btn), .tgm-raiz [data-nav]:focus-visible:not(.tgm-btn) {
    box-shadow: 0 0 0 3px var(--tgm-tinta), 0 0 0 6px var(--tgm-oro), 0 0 22px rgba(255, 210, 63, .6);
}

/* ---------- Pie ---------- */
.tgm-pie {
    position: absolute;
    right: clamp(10px, 2cqw, 26px);
    bottom: clamp(6px, 1.4cqh, 14px);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: calc(clamp(.55rem, 1.2cqh, .75rem) * var(--tgm-letra, 1));
    color: rgba(247, 236, 208, .55);
    letter-spacing: .08em;
    text-shadow: 1px 1px 0 #000;
}

/* ---------- Cabecera de subpantallas ---------- */
.tgm-cabecera {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1300px;
    min-height: clamp(44px, 9cqh, 84px);
    margin-bottom: clamp(6px, 1.6cqh, 18px);
    flex-shrink: 0;
}
.tgm-cabecera-textos { text-align: center; }
.tgm-titulo-pantalla {
    margin: 0;
    display: inline-block;
    padding: 2px clamp(18px, 3cqw, 40px);
    font-family: var(--tgm-fuente-titulo);
    font-weight: normal;
    font-size: calc(clamp(1.3rem, 4.6cqh + .5cqw, 3.1rem) * var(--tgm-letra, 1));
    letter-spacing: .06em;
    color: var(--tgm-oro);
    -webkit-text-stroke: 2px var(--tgm-tinta);
    text-shadow: 4px 4px 0 var(--tgm-tinta), 0 0 24px rgba(255, 210, 63, .35);
    background: linear-gradient(180deg, rgba(122, 15, 8, .9), rgba(60, 6, 2, .9));
    border: 3px solid var(--tgm-tinta);
    border-radius: 10px;
    box-shadow: inset 0 0 0 3px var(--tgm-oro-osc), 0 6px 0 var(--tgm-tinta);
    transform: rotate(-1deg);
}
.tgm-subtitulo-pantalla {
    margin-top: 8px;
    font-size: calc(clamp(.65rem, 1.6cqh + .2cqw, 1rem) * var(--tgm-letra, 1));
    color: var(--tgm-crema-osc);
    font-style: italic;
    text-shadow: 1px 1px 0 #000;
}
.tgm-btn-volver {
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    display: flex; align-items: center; gap: 6px;
    padding: clamp(5px, 1cqh, 10px) clamp(10px, 1.4cqw, 18px);
    font-family: var(--tgm-fuente-titulo);
    font-size: calc(clamp(.75rem, 1.8cqh + .2cqw, 1.15rem) * var(--tgm-letra, 1));
    letter-spacing: .08em;
    color: var(--tgm-crema);
    background: linear-gradient(180deg, #3c2c1c, #22170d);
    border: 3px solid var(--tgm-tinta);
    border-radius: 999px;
    box-shadow: inset 0 0 0 2px #8a6b3a, 0 4px 0 var(--tgm-tinta);
    cursor: pointer;
    transition: transform .15s var(--tgm-ease-rebote), background .15s;
}
.tgm-btn-volver:hover, .tgm-btn-volver.tgm-foco { transform: translateY(-50%) translateX(-3px) scale(1.06); background: linear-gradient(180deg, #5a4128, #33230f); }
.tgm-btn-volver:active { transform: translateY(-46%) scale(.97); }

/* ---------- Selector de niveles ---------- */
.tgm-grilla-niveles {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(8px, 1.8cqh, 22px);
    width: min(1280px, 100%);
    margin: auto;
    perspective: 900px;
}
.tgm-nivel {
    position: relative;
    aspect-ratio: 16 / 11;
    max-height: calc((100cqh - 170px) / 2);
    width: 100%;
    justify-self: center;
    padding: 0;
    border: 4px solid var(--tgm-tinta);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    background: linear-gradient(135deg, var(--tgm-a), var(--tgm-b));
    box-shadow: inset 0 0 0 3px var(--tgm-oro), 0 6px 0 var(--tgm-tinta), 0 10px 20px rgba(0, 0, 0, .6);
    transition: transform .22s var(--tgm-ease-rebote), box-shadow .2s ease, filter .2s ease;
    animation: tgmRepartir .5s var(--tgm-ease-rebote) both;
    font: inherit;
    color: inherit;
    text-align: left;
}
.tgm-nivel:nth-child(1) { animation-delay: .00s; } .tgm-nivel:nth-child(2) { animation-delay: .04s; }
.tgm-nivel:nth-child(3) { animation-delay: .08s; } .tgm-nivel:nth-child(4) { animation-delay: .12s; }
.tgm-nivel:nth-child(5) { animation-delay: .16s; } .tgm-nivel:nth-child(6) { animation-delay: .20s; }
.tgm-nivel:nth-child(7) { animation-delay: .24s; } .tgm-nivel:nth-child(8) { animation-delay: .28s; }
.tgm-nivel:nth-child(9) { animation-delay: .32s; } .tgm-nivel:nth-child(10) { animation-delay: .36s; }
@keyframes tgmRepartir { from { opacity: 0; transform: translateY(-40px) rotateX(40deg) rotate(-6deg) scale(.8); } }

.tgm-nivel-arte { position: absolute; inset: 0; }
.tgm-nivel-arte img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.tgm-nivel-provisional {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    background:
        repeating-linear-gradient(45deg, rgba(0, 0, 0, .18) 0 12px, transparent 12px 24px),
        radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .18), transparent 60%);
}
.tgm-nivel-provisional span {
    padding: 3px 8px;
    font-family: var(--tgm-fuente-titulo);
    font-size: calc(clamp(.5rem, 1.2cqh + .2cqw, .8rem) * var(--tgm-letra, 1));
    letter-spacing: .14em;
    text-align: center;
    color: rgba(255, 255, 255, .8);
    border: 2px dashed rgba(255, 255, 255, .6);
    transform: rotate(-8deg);
}
.tgm-nivel-numero {
    position: absolute;
    left: 6px; top: 4px;
    min-width: 1.6em;
    font-family: var(--tgm-fuente-titulo);
    font-size: calc(clamp(1.2rem, 3.6cqh + .4cqw, 2.6rem) * var(--tgm-letra, 1));
    line-height: 1;
    text-align: center;
    color: var(--tgm-oro);
    -webkit-text-stroke: 1.5px var(--tgm-tinta);
    text-shadow: 3px 3px 0 var(--tgm-tinta);
}
.tgm-nivel-info {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 5px 8px 6px;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .85) 35%);
    display: flex; flex-direction: column;
}
.tgm-nivel-nombre {
    font-family: var(--tgm-fuente-titulo);
    font-size: calc(clamp(.7rem, 1.9cqh + .3cqw, 1.25rem) * var(--tgm-letra, 1));
    letter-spacing: .05em;
    color: var(--tgm-crema);
    text-shadow: 2px 2px 0 #000;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tgm-nivel-lugar {
    font-size: calc(clamp(.5rem, 1.15cqh + .1cqw, .78rem) * var(--tgm-letra, 1));
    color: var(--tgm-oro);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tgm-nivel-candado {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    background: rgba(10, 6, 3, .62);
    font-family: var(--tgm-fuente-titulo);
    font-size: calc(clamp(.55rem, 1.3cqh + .2cqw, .9rem) * var(--tgm-letra, 1));
    letter-spacing: .14em;
    color: #c9b892;
    backdrop-filter: grayscale(1);
}
.tgm-candado-icono { font-size: 1.9em; filter: drop-shadow(0 3px 4px #000); }
.tgm-nivel-cinta {
    position: absolute;
    right: -30px; top: 14px;
    width: 130px;
    padding: 2px 0;
    text-align: center;
    font-family: var(--tgm-fuente-titulo);
    font-size: calc(clamp(.45rem, 1cqh + .15cqw, .72rem) * var(--tgm-letra, 1));
    letter-spacing: .1em;
    color: var(--tgm-tinta);
    background: var(--tgm-oro);
    border-top: 2px solid var(--tgm-tinta); border-bottom: 2px solid var(--tgm-tinta);
    transform: rotate(35deg);
}
.tgm-nivel-final { box-shadow: inset 0 0 0 3px var(--tgm-oro), 0 6px 0 var(--tgm-tinta), 0 0 22px rgba(255, 210, 63, .45); }

.tgm-nivel:not(.tgm-nivel-bloqueado):hover, .tgm-nivel:not(.tgm-nivel-bloqueado).tgm-foco {
    transform: translateY(-8px) rotate(-1.5deg) scale(1.05);
    box-shadow: inset 0 0 0 3px var(--tgm-oro), 0 12px 0 var(--tgm-tinta), 0 0 0 4px var(--tgm-oro), 0 0 30px rgba(255, 210, 63, .6);
    z-index: 2;
}
.tgm-nivel:not(.tgm-nivel-bloqueado):hover .tgm-nivel-arte img, .tgm-nivel.tgm-foco .tgm-nivel-arte img { transform: scale(1.08); }
.tgm-nivel-bloqueado { cursor: not-allowed; }
.tgm-nivel-bloqueado .tgm-nivel-arte { filter: grayscale(1) brightness(.5); }
.tgm-nivel-bloqueado.tgm-foco { transform: scale(1.02); }
.tgm-nivel.tgm-presionado:not(.tgm-nivel-bloqueado) { transform: scale(.97); transition-duration: .05s; }

/* ---------- Galería de cinemáticas ---------- */
.tgm-galeria { width: min(1200px, 100%); flex: 1; min-height: 0; display: flex; flex-direction: column; }
.tgm-galeria-contador {
    align-self: center;
    margin-bottom: 10px;
    padding: 3px 14px;
    font-family: var(--tgm-fuente-titulo);
    letter-spacing: .14em;
    color: var(--tgm-tinta);
    background: var(--tgm-oro);
    border: 2px solid var(--tgm-tinta);
    border-radius: 4px;
    font-size: calc(clamp(.6rem, 1.4cqh + .2cqw, .95rem) * var(--tgm-letra, 1));
}
.tgm-galeria-grilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(130px, 17cqw, 220px), 1fr));
    gap: clamp(8px, 1.6cqh, 18px);
    overflow-y: auto;
    padding: 8px 6px 16px;
    scrollbar-width: thin;
    scrollbar-color: var(--tgm-oro-osc) transparent;
}
.tgm-cine {
    position: relative;
    padding: 0 0 6px;
    background: var(--tgm-crema);
    border: 3px solid var(--tgm-tinta);
    border-radius: 6px;
    box-shadow: 0 5px 0 var(--tgm-tinta), 0 8px 14px rgba(0, 0, 0, .5);
    cursor: pointer;
    transform: rotate(var(--rot, -1deg));
    transition: transform .2s var(--tgm-ease-rebote), box-shadow .2s ease;
    font: inherit;
    color: var(--tgm-tinta);
}
.tgm-cine:nth-child(odd) { --rot: 1.2deg; }
.tgm-cine-arte {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    margin: 6px 6px 4px;
    background: #2b1d10;
    border: 2px solid var(--tgm-tinta);
    overflow: hidden;
}
.tgm-cine-arte img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tgm-cine-provisional, .tgm-cine-signo {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--tgm-fuente-titulo);
    color: rgba(255, 255, 255, .75);
}
.tgm-cine-provisional { font-size: calc(.75rem * var(--tgm-letra, 1)); letter-spacing: .12em; background: repeating-linear-gradient(45deg, #3a2a18 0 10px, #2b1d10 10px 20px); }
.tgm-cine-signo { font-size: calc(3rem * var(--tgm-letra, 1)); color: rgba(255, 210, 63, .35); }
.tgm-cine-numero { position: absolute; top: 10px; left: 12px; font-family: var(--tgm-fuente-titulo); color: var(--tgm-oro); text-shadow: 2px 2px 0 #000; }
.tgm-cine-titulo { display: block; padding: 0 8px; font-family: var(--tgm-fuente-titulo); font-size: calc(clamp(.62rem, 1.4cqh + .2cqw, .95rem) * var(--tgm-letra, 1)); letter-spacing: .04em; text-align: center; }
.tgm-cine-bloqueada { filter: grayscale(.9) brightness(.75); cursor: not-allowed; }
.tgm-cine:not(.tgm-cine-bloqueada):hover, .tgm-cine.tgm-foco { transform: rotate(0) translateY(-6px) scale(1.05); z-index: 2; }

.tgm-vacio {
    margin: auto;
    padding: 24px 30px;
    text-align: center;
    font-size: calc(clamp(.8rem, 2cqh, 1.2rem) * var(--tgm-letra, 1));
    color: var(--tgm-crema-osc);
    background: rgba(0, 0, 0, .55);
    border: 2px dashed var(--tgm-oro-osc);
    border-radius: 12px;
}

/* ---------- Tutorial (elección) ---------- */
.tgm-tutorial-opciones {
    display: flex;
    gap: clamp(14px, 3cqw, 40px);
    margin: auto;
    flex-wrap: wrap;
    justify-content: center;
}
.tgm-tarjeta-tuto {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    width: clamp(200px, 30cqw, 360px);
    padding: clamp(14px, 3cqh, 30px) 18px;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, .5), transparent 60%),
        linear-gradient(180deg, #fffaf0, var(--tgm-crema-osc));
    color: var(--tgm-tinta);
    border: 4px solid var(--tgm-tinta);
    border-radius: 16px;
    box-shadow: inset 0 0 0 4px var(--tgm-rojo), inset 0 0 0 7px var(--tgm-crema), 0 8px 0 var(--tgm-tinta), 0 14px 26px rgba(0, 0, 0, .55);
    cursor: pointer;
    font: inherit;
    transition: transform .22s var(--tgm-ease-rebote), box-shadow .2s;
}
.tgm-tarjeta-tuto:nth-child(2) { transform: rotate(1.5deg); }
.tgm-tarjeta-tuto:first-child { transform: rotate(-1.5deg); }
.tgm-tarjeta-tuto:hover, .tgm-tarjeta-tuto.tgm-foco { transform: translateY(-8px) rotate(0) scale(1.04); }
.tgm-tuto-icono { font-size: calc(clamp(1.8rem, 6cqh, 3.4rem) * var(--tgm-letra, 1)); filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .4)); }
.tgm-tuto-titulo { font-family: var(--tgm-fuente-titulo); font-size: calc(clamp(1rem, 2.8cqh + .3cqw, 1.7rem) * var(--tgm-letra, 1)); color: var(--tgm-rojo); letter-spacing: .05em; text-shadow: 2px 2px 0 var(--tgm-oro); }
.tgm-tuto-desc { font-size: calc(clamp(.7rem, 1.6cqh + .1cqw, .98rem) * var(--tgm-letra, 1)); text-align: center; line-height: 1.35; }

/* ---------- Reglas rápidas ---------- */
.tgm-reglas {
    display: flex; flex-direction: column;
    width: min(1100px, 100%);
    flex: 1; min-height: 0;
}
.tgm-pestanias { display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; padding: 0 10px; position: relative; z-index: 2; }
.tgm-pestania {
    padding: clamp(5px, 1cqh, 9px) clamp(8px, 1.4cqw, 18px);
    font-family: var(--tgm-fuente-titulo);
    font-size: calc(clamp(.62rem, 1.5cqh + .25cqw, 1rem) * var(--tgm-letra, 1));
    letter-spacing: .08em;
    color: var(--tgm-crema);
    background: linear-gradient(180deg, #5a1a10, #3a0d06);
    border: 3px solid var(--tgm-tinta);
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
    cursor: pointer;
    transform: translateY(4px);
    transition: transform .15s ease, background .15s;
}
.tgm-pestania:hover, .tgm-pestania.tgm-foco { transform: translateY(0); }
.tgm-pestania.activa { color: var(--tgm-rojo); background: var(--tgm-crema); transform: translateY(3px); }
.tgm-regla-contenido {
    flex: 1; min-height: 0;
    overflow-y: auto;
    padding: clamp(10px, 2.2cqh, 24px) clamp(14px, 3cqw, 40px);
    color: var(--tgm-tinta);
    background:
        repeating-linear-gradient(0deg, transparent 0 27px, rgba(120, 80, 20, .08) 27px 28px),
        linear-gradient(180deg, #fbf3dc, var(--tgm-crema-osc));
    border: 4px solid var(--tgm-tinta);
    border-radius: 6px 6px 14px 14px;
    box-shadow: inset 0 0 40px rgba(120, 70, 10, .25), 0 8px 0 var(--tgm-tinta);
    font-size: calc(clamp(.72rem, 1.7cqh + .15cqw, 1.02rem) * var(--tgm-letra, 1));
    line-height: 1.45;
    scrollbar-width: thin;
    scrollbar-color: var(--tgm-rojo) transparent;
    outline: none;
}
.tgm-regla-contenido h3 {
    margin: .8em 0 .35em;
    font-family: var(--tgm-fuente-titulo);
    font-weight: normal;
    font-size: 1.35em;
    letter-spacing: .04em;
    color: var(--tgm-rojo);
}
.tgm-regla-contenido h3:first-child { margin-top: 0; }
.tgm-regla-contenido p, .tgm-regla-contenido ul, .tgm-regla-contenido ol { margin: .3em 0 .6em; }
.tgm-regla-contenido b { color: #6b0d05; }
.tgm-recuadro {
    margin: .7em 0;
    padding: 10px 14px;
    background: rgba(255, 210, 63, .28);
    border-left: 6px solid var(--tgm-verde);
    border-radius: 4px;
}
.tgm-nota { font-style: italic; opacity: .85; }
.tgm-jerarquia { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 18px; }
.tgm-fila-cartas { display: flex; align-items: flex-end; gap: 6px; padding: 4px 0; border-bottom: 1px dashed rgba(26, 10, 0, .2); }
.tgm-puesto {
    flex-shrink: 0;
    width: 1.9em; height: 1.9em;
    display: flex; align-items: center; justify-content: center;
    align-self: center;
    font-family: var(--tgm-fuente-titulo);
    color: var(--tgm-oro);
    background: var(--tgm-rojo);
    border: 2px solid var(--tgm-tinta);
    border-radius: 50%;
}
.tgm-carta-mini { margin: 0; display: flex; flex-direction: column; align-items: center; }
.tgm-carta-mini img { width: clamp(30px, 4.2cqh + .8cqw, 54px); border-radius: 4px; box-shadow: 1px 2px 3px rgba(0, 0, 0, .45); background: #fff; }
.tgm-carta-mini figcaption { font-size: .68em; font-weight: bold; white-space: nowrap; min-height: 1em; }
.tgm-y { align-self: center; font-weight: bold; opacity: .5; }
.tgm-ejemplos { display: flex; flex-wrap: wrap; gap: 12px; margin: .4em 0 .8em; }
.tgm-ejemplo {
    display: flex; align-items: center; gap: 4px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, .5);
    border: 2px solid rgba(26, 10, 0, .3);
    border-radius: 8px;
}
.tgm-resultado { margin-left: 6px; font-size: .95em; }
.tgm-resultado b { font-size: 1.3em; color: var(--tgm-verde-osc); }
.tgm-tabla { border-collapse: collapse; margin: .4em 0 .8em; width: 100%; max-width: 720px; background: rgba(255, 255, 255, .45); }
.tgm-tabla th, .tgm-tabla td { padding: 5px 10px; border: 2px solid rgba(26, 10, 0, .35); text-align: left; }
.tgm-tabla th { font-family: var(--tgm-fuente-titulo); font-weight: normal; letter-spacing: .05em; color: var(--tgm-crema); background: var(--tgm-rojo); }
.tgm-fosforos-demo { display: flex; gap: 14px; margin: .5em 0; }
.tgm-fosforo-paso { display: flex; flex-direction: column; align-items: center; font-weight: bold; }
.tgm-fosforo-svg { width: 44px; height: 44px; background: rgba(26, 10, 0, .85); border-radius: 6px; padding: 3px; }
.tgm-ordenes { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 6px 16px; margin: .4em 0 .8em; }
.tgm-orden {
    display: inline-block;
    min-width: 8.5em;
    margin-right: 6px;
    padding: 2px 8px;
    font-family: var(--tgm-fuente-titulo);
    letter-spacing: .05em;
    text-align: center;
    color: var(--tgm-crema);
    background: var(--tgm-verde);
    border: 2px solid var(--tgm-tinta);
    border-radius: 6px;
}

/* ---------- Opciones ---------- */
.tgm-opciones { width: min(1050px, 100%); flex: 1; min-height: 0; overflow-y: auto; }
.tgm-opciones-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 2.4cqw, 30px); }
.tgm-opciones-bloque {
    padding: clamp(10px, 2cqh, 20px) clamp(12px, 2cqw, 24px);
    background: rgba(15, 9, 5, .82);
    border: 3px solid var(--tgm-tinta);
    border-radius: 14px;
    box-shadow: inset 0 0 0 2px var(--tgm-oro-osc), 0 6px 0 var(--tgm-tinta);
}
.tgm-opciones-bloque h3 {
    margin: 0 0 clamp(6px, 1.2cqh, 12px);
    font-family: var(--tgm-fuente-titulo);
    font-weight: normal;
    letter-spacing: .14em;
    color: var(--tgm-oro);
    font-size: calc(clamp(.9rem, 2.2cqh + .2cqw, 1.4rem) * var(--tgm-letra, 1));
    border-bottom: 2px dashed rgba(255, 210, 63, .35);
    padding-bottom: 4px;
}
.tgm-opcion {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: clamp(4px, 1cqh, 9px) 0;
    border-bottom: 1px solid rgba(247, 236, 208, .08);
}
.tgm-opcion-nombre { font-weight: bold; font-size: calc(clamp(.72rem, 1.7cqh + .15cqw, 1.02rem) * var(--tgm-letra, 1)); display: flex; flex-direction: column; }
.tgm-opcion-nombre small { font-weight: normal; font-size: .78em; color: var(--tgm-crema-osc); opacity: .8; }
.tgm-slider-caja { display: flex; align-items: center; gap: 10px; }
.tgm-slider-valor { width: 3.2em; text-align: right; font-family: var(--tgm-fuente-titulo); color: var(--tgm-oro); letter-spacing: .04em; }
.tgm-slider {
    -webkit-appearance: none;
    appearance: none;
    width: clamp(110px, 16cqw, 220px);
    height: 12px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--tgm-oro) 0 var(--tgm-v, 50%), #3a2b1a var(--tgm-v, 50%) 100%);
    border: 2px solid var(--tgm-tinta);
    cursor: pointer;
    outline: none;
}
.tgm-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff, var(--tgm-rojo) 45%, var(--tgm-rojo-osc));
    border: 3px solid var(--tgm-tinta);
    box-shadow: 0 2px 0 var(--tgm-tinta);
    transition: transform .12s;
}
.tgm-slider::-moz-range-thumb {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff, var(--tgm-rojo) 45%, var(--tgm-rojo-osc));
    border: 3px solid var(--tgm-tinta);
}
.tgm-slider:hover::-webkit-slider-thumb, .tgm-slider.tgm-foco::-webkit-slider-thumb { transform: scale(1.2); }

.tgm-interruptor {
    position: relative;
    width: 78px; height: 32px;
    flex-shrink: 0;
    border-radius: 999px;
    border: 3px solid var(--tgm-tinta);
    background: #4a1a12;
    cursor: pointer;
    font-family: var(--tgm-fuente-titulo);
    font-size: calc(.8rem * var(--tgm-letra, 1));
    letter-spacing: .1em;
    transition: background .2s ease;
}
.tgm-interruptor.encendido { background: var(--tgm-verde); }
.tgm-interruptor-perilla {
    position: absolute;
    top: 2px; left: 3px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff, var(--tgm-crema-osc));
    border: 2px solid var(--tgm-tinta);
    transition: left .22s var(--tgm-ease-rebote);
    z-index: 2;
}
.tgm-interruptor.encendido .tgm-interruptor-perilla { left: 46px; }
.tgm-interruptor-si, .tgm-interruptor-no { position: absolute; top: 50%; transform: translateY(-50%); color: var(--tgm-crema); }
.tgm-interruptor-si { left: 10px; opacity: 0; }
.tgm-interruptor-no { right: 9px; }
.tgm-interruptor.encendido .tgm-interruptor-si { opacity: 1; }
.tgm-interruptor.encendido .tgm-interruptor-no { opacity: 0; }

.tgm-segmentos { display: flex; border: 3px solid var(--tgm-tinta); border-radius: 10px; overflow: hidden; flex-shrink: 0; }
.tgm-segmento {
    padding: clamp(4px, .8cqh, 7px) clamp(8px, 1cqw, 14px);
    font-family: var(--tgm-fuente-titulo);
    font-size: calc(clamp(.62rem, 1.4cqh + .15cqw, .92rem) * var(--tgm-letra, 1));
    letter-spacing: .06em;
    color: var(--tgm-crema-osc);
    background: #2b1d10;
    border: 0;
    border-right: 2px solid var(--tgm-tinta);
    cursor: pointer;
    transition: background .15s, color .15s;
}
.tgm-segmento:last-child { border-right: 0; }
.tgm-segmento:hover { background: #4a3218; }
.tgm-segmento.activo { color: var(--tgm-tinta); background: var(--tgm-oro); }
.tgm-raiz .tgm-segmento.tgm-foco { box-shadow: inset 0 0 0 3px var(--tgm-rojo); }

.tgm-opcion-nota { margin: 2px 0 8px; font-size: calc(clamp(11px, 1.5cqh, 14px) * var(--tgm-letra, 1)); line-height: 1.35; opacity: .8; }
.tgm-opciones-acciones { display: flex; gap: 12px; flex-wrap: wrap; margin-top: clamp(8px, 1.6cqh, 16px); }
.tgm-btn-texto-chico {
    padding: 6px 12px;
    font-family: var(--tgm-fuente-titulo);
    font-size: calc(clamp(.62rem, 1.4cqh + .15cqw, .9rem) * var(--tgm-letra, 1));
    letter-spacing: .06em;
    color: var(--tgm-crema);
    background: #3a2b1a;
    border: 2px solid var(--tgm-tinta);
    border-radius: 8px;
    box-shadow: 0 3px 0 var(--tgm-tinta);
    cursor: pointer;
    transition: transform .12s, background .15s;
}
.tgm-btn-texto-chico:hover, .tgm-btn-texto-chico.tgm-foco { transform: translateY(-2px); background: #5a4128; }
.tgm-btn-texto-chico.tgm-peligro { background: var(--tgm-rojo-osc); }
.tgm-btn-texto-chico.tgm-peligro:hover, .tgm-btn-texto-chico.tgm-peligro.tgm-foco { background: var(--tgm-rojo); }

/* ---------- Créditos ---------- */
.tgm-creditos-marco {
    position: relative;
    flex: 1; min-height: 0;
    width: min(800px, 100%);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
            mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
}
.tgm-creditos-rollo {
    position: absolute;
    left: 0; right: 0; top: 100%;
    text-align: center;
    animation: tgmRollo 30s linear infinite;
}
@keyframes tgmRollo { from { transform: translateY(-42cqh); } to { transform: translateY(-100%) translateY(-72cqh); } }
.tgm-creditos-logo .tgm-titulo-marco { width: min(520px, 80%); animation: none; }
.tgm-credito { margin: clamp(18px, 5cqh, 46px) 0; }
.tgm-credito-rol { font-family: var(--tgm-fuente-titulo); letter-spacing: .2em; color: var(--tgm-oro); font-size: calc(clamp(.7rem, 1.8cqh + .2cqw, 1.1rem) * var(--tgm-letra, 1)); }
.tgm-credito-nombre { font-size: calc(clamp(1rem, 3cqh + .3cqw, 1.9rem) * var(--tgm-letra, 1)); font-weight: bold; color: var(--tgm-crema); text-shadow: 2px 2px 0 #000; }
.tgm-credito-fin { font-family: var(--tgm-fuente-titulo); font-size: calc(clamp(1rem, 3cqh, 1.8rem) * var(--tgm-letra, 1)); color: var(--tgm-oro); }
.tgm-credito-fin small { font-family: var(--tgm-fuente-texto); font-size: .55em; color: var(--tgm-crema-osc); font-style: italic; }

/* ---------- Despedida ---------- */
.tgm-despedida {
    margin: auto;
    max-width: 720px;
    text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: clamp(8px, 2cqh, 18px);
}
.tgm-despedida-cartel {
    font-family: var(--tgm-fuente-titulo);
    font-size: calc(clamp(2rem, 9cqh + 1cqw, 5.5rem) * var(--tgm-letra, 1));
    color: var(--tgm-oro);
    -webkit-text-stroke: 3px var(--tgm-tinta);
    text-shadow: 6px 6px 0 var(--tgm-tinta);
    transform: rotate(-3deg);
    animation: tgmTambalear 2.6s ease-in-out infinite;
}
@keyframes tgmTambalear { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(2deg) scale(1.04); } }
.tgm-despedida-texto {
    margin: 0;
    padding: 12px 18px;
    background: var(--tgm-crema);
    color: var(--tgm-tinta);
    border: 3px solid var(--tgm-tinta);
    border-radius: 18px;
    font-size: calc(clamp(.8rem, 2.4cqh + .2cqw, 1.35rem) * var(--tgm-letra, 1));
    font-style: italic;
    font-weight: bold;
    box-shadow: 5px 6px 0 rgba(0, 0, 0, .6);
}
.tgm-despedida-nota { margin: 0; font-size: calc(clamp(.65rem, 1.6cqh, .95rem) * var(--tgm-letra, 1)); color: var(--tgm-crema-osc); }
.tgm-fila-botones { display: flex; gap: clamp(10px, 2cqw, 24px); justify-content: center; flex-wrap: wrap; }
.tgm-btn-chico { width: auto; min-width: clamp(150px, 20cqw, 240px); }
.tgm-btn-chico .tgm-btn-texto { font-size: calc(clamp(.85rem, 2cqh + .3cqw, 1.35rem) * var(--tgm-letra, 1)); }

/* ---------- Confirmación ---------- */
.tgm-confirmacion {
    position: absolute; inset: 0;
    z-index: 20;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, .7);
    opacity: 0; visibility: hidden;
    transition: opacity .2s ease, visibility 0s linear .2s;
}
.tgm-confirmacion.activa { opacity: 1; visibility: visible; transition: opacity .2s ease; }
.tgm-confirmacion-caja {
    width: min(560px, 90cqw);
    padding: clamp(14px, 3cqh, 28px);
    text-align: center;
    color: var(--tgm-tinta);
    background: linear-gradient(180deg, #fffaf0, var(--tgm-crema-osc));
    border: 4px solid var(--tgm-tinta);
    border-radius: 16px;
    box-shadow: inset 0 0 0 4px var(--tgm-rojo), inset 0 0 0 7px var(--tgm-crema), 0 10px 0 var(--tgm-tinta);
    transform: scale(.85) rotate(-2deg);
    transition: transform .3s var(--tgm-ease-rebote);
}
.tgm-confirmacion.activa .tgm-confirmacion-caja { transform: none; }
.tgm-confirmacion-titulo { font-family: var(--tgm-fuente-titulo); font-size: calc(clamp(1.1rem, 3.6cqh + .3cqw, 2rem) * var(--tgm-letra, 1)); color: var(--tgm-rojo); letter-spacing: .04em; }
.tgm-confirmacion-texto { font-size: calc(clamp(.75rem, 1.9cqh + .1cqw, 1.05rem) * var(--tgm-letra, 1)); margin: 10px 0 18px; line-height: 1.4; }

/* ---------- Toast ---------- */
.tgm-toast {
    position: absolute;
    left: 50%; bottom: clamp(14px, 4cqh, 40px);
    z-index: 30;
    max-width: 86cqw;
    padding: 9px 18px;
    font-weight: bold;
    font-size: calc(clamp(.7rem, 1.8cqh + .1cqw, 1rem) * var(--tgm-letra, 1));
    color: var(--tgm-tinta);
    background: var(--tgm-oro);
    border: 3px solid var(--tgm-tinta);
    border-radius: 10px;
    box-shadow: 0 5px 0 var(--tgm-tinta);
    transform: translate(-50%, 30px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .3s var(--tgm-ease-rebote);
    text-align: center;
}
.tgm-toast.visible { opacity: 1; transform: translate(-50%, 0); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
    .tgm-grilla-niveles { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
    .tgm-opciones-columnas { grid-template-columns: 1fr; }
}
/* Celular apaisado / pantallas bajas */
@media (max-height: 520px) {
    .tgm-principal { flex-direction: row; align-items: center; justify-content: center; gap: 3cqw; padding-top: 6px; padding-bottom: 6px; }
    .tgm-portada { flex: 0 0 44%; margin: 0; }
    .tgm-titulo-marco { width: 100%; }
    .tgm-botonera { width: min(470px, 50cqw); margin: 0; gap: 7px 10px; }
    .tgm-btn-chapa { min-height: 30px; border-width: 3px; border-radius: 10px; }
    .tgm-btn-principal .tgm-btn-chapa { min-height: 38px; }
    .tgm-btn-texto { font-size: calc(.9rem * var(--tgm-letra, 1)); }
    .tgm-btn-principal .tgm-btn-texto { font-size: calc(1.15rem * var(--tgm-letra, 1)); }
    .tgm-btn-ayuda { display: none; }
    .tgm-btn-chapa::before, .tgm-btn-chapa::after { display: none; }
    .tgm-pie { display: none; }
    .tgm-cabecera { min-height: 36px; margin-bottom: 4px; }
    .tgm-titulo-pantalla { font-size: calc(1.25rem * var(--tgm-letra, 1)); -webkit-text-stroke: 1px var(--tgm-tinta); text-shadow: 2px 2px 0 var(--tgm-tinta); }
    .tgm-subtitulo-pantalla { display: none; }
    .tgm-nivel { max-height: calc((100cqh - 70px) / 2); border-width: 3px; }
    .tgm-pantalla { padding: 6px 12px; }
    .tgm-ordenes, .tgm-jerarquia { grid-template-columns: 1fr 1fr; }
    .tgm-opciones-columnas { grid-template-columns: 1fr 1fr; gap: 8px; }
    .tgm-opciones-bloque { padding: 6px 10px; }
    .tgm-opciones-bloque h3 { font-size: calc(.8rem * var(--tgm-letra, 1)); margin-bottom: 2px; }
    .tgm-opcion { padding: 2px 0; gap: 6px; }
    .tgm-opcion-nombre { font-size: calc(.66rem * var(--tgm-letra, 1)); }
    .tgm-opcion-nombre small { display: none; }
    .tgm-slider { width: 70px; height: 9px; }
    .tgm-slider::-webkit-slider-thumb { width: 15px; height: 15px; border-width: 2px; }
    .tgm-slider-valor { font-size: calc(.7rem * var(--tgm-letra, 1)); width: 2.6em; }
    .tgm-interruptor { width: 58px; height: 24px; font-size: calc(.62rem * var(--tgm-letra, 1)); }
    .tgm-interruptor-perilla { width: 15px; height: 15px; top: 2px; }
    .tgm-interruptor.encendido .tgm-interruptor-perilla { left: 34px; }
    .tgm-segmento { padding: 3px 5px; font-size: calc(.56rem * var(--tgm-letra, 1)); }
    .tgm-opciones-acciones { margin-top: 4px; gap: 6px; }
    .tgm-btn-texto-chico { padding: 3px 7px; font-size: calc(.58rem * var(--tgm-letra, 1)); }
    .tgm-tarjeta-tuto { padding: 10px 12px; gap: 4px; }
    .tgm-tuto-desc { font-size: calc(.66rem * var(--tgm-letra, 1)); }
}
@media (min-width: 1700px) and (min-height: 950px) {
    .tgm-botonera { width: 760px; }
    .tgm-grilla-niveles { width: 1560px; }
}
/* Portada quieta solo si el jugador apaga Opciones → "Animaciones del ambiente"
   (clase que pone menu_principal.js). No se sigue el "movimiento reducido" de Windows:
   muchas PC lo traen apagado de fábrica y la portada quedaba congelada. */
#menu-screen.tgm-sin-movimiento :is(.tgm-fondo, .tgm-rayos, .tgm-humo, .tgm-titulo-marco, .tgm-chapa-gd,
    .tgm-btn-principal .tgm-btn-chapa, .tgm-despedida-cartel, .tgm-ciruja-portada,
    .tgm-ciruja-marco, .tgm-ciruja-cuerpo, .tgm-escenario .tgm-btn) { animation: none !important; }
#menu-screen.tgm-sin-movimiento :is(.tgm-lluvia, .tgm-lluvia-frente, .tgm-capa-brillo) { display: none; }

/* ==========================================================================
   PORTADA EN ESCENARIO FIJO 1280x720 (2026-10-31)
   Todo lo de adentro se mide en píxeles de diseño y el escenario entero se
   escala con --tgm-escala (lo calcula escalarEscenario() en menu_principal.js).
   Resultado: botones grandes y proporciones idénticas en PC y en celular.
   Estas reglas pisan las de arriba (y las de @media) solo dentro de la portada.
   ========================================================================== */
/* Chrome en celulares "agranda" solo el texto que considera chico (font boosting):
   en un juego escalado deforma títulos y botones. Se desactiva. */
html, body { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

.tgm-principal { padding: 0; }
.tgm-escenario {
    position: absolute; left: 50%; top: 50%;
    width: 1280px; height: 720px;
    transform: translate(-50%, -50%) scale(var(--tgm-escala, 1));
    transform-origin: 50% 50%;
}

/* Título arriba a la izquierda */
.tgm-escenario .tgm-portada {
    position: absolute; left: 40px; top: 18px; width: 620px; margin: 0; flex: none;
}
.tgm-escenario .tgm-titulo-marco { width: 620px; }
.tgm-escenario .tgm-bajada {
    margin-top: 4px; padding: 6px 18px; font-size: calc(16px * var(--tgm-letra, 1)); letter-spacing: .16em; border-width: 3px;
}

/* El Ciruja de cuerpo entero, protagonista de la portada.
   marco: entrada desde la izquierda · cuerpo: balanceo + gestos · img: respiración */
.tgm-escenario .tgm-ciruja-marco {
    position: absolute; left: 60px; bottom: -36px; width: 500px; height: 500px;
    pointer-events: none;
    transform-origin: 50% 90%; /* el cabeceo al compás (translate/scale desde menu_principal.js) apoya en los pies */
}
.tgm-escenario .tgm-ciruja-marco::before { /* sombra en el piso */
    content: ''; position: absolute; left: 24%; right: 24%; bottom: 28px; height: 36px;
    border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 0, 0, .7), transparent 70%);
}
.tgm-escenario .tgm-ciruja-cuerpo {
    position: absolute; inset: 0;
    transform-origin: 55% 100%;
    animation: tgmCirujaBalanceo 5.5s ease-in-out infinite;
}
/* Hoja de 9 cuadros en fila; --cuadro (0-8) elige cuál se ve (menu_principal.js) */
.tgm-escenario .tgm-ciruja-portada {
    position: absolute; left: 50%; bottom: 44px; height: 470px; aspect-ratio: 347 / 464;
    translate: -50% 0;
    background: url('../img/personajes/portada/ciruja_portada.webp') no-repeat;
    background-size: 900% 100%;
    background-position: calc(var(--cuadro, 0) * 100% / 8) 0;
    filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .75)) drop-shadow(0 0 22px rgba(255, 190, 60, .25));
    transform-origin: 55% 100%;
    animation: tgmCirujaRespira 3.4s ease-in-out infinite;
}
@keyframes tgmCirujaBalanceo {
    0%, 100% { transform: rotate(-1.5deg); }
    50%      { transform: rotate(1.5deg); }
}
@keyframes tgmCirujaRespira {
    0%, 100% { scale: 1 1; }
    45%      { scale: 1.008 1.022; }
}
/* gestos: usan `translate`/`rotate` sueltos para sumarse al balanceo sin pisarlo */
.tgm-ciruja-cuerpo.tgm-gesto-salto   { animation: tgmCirujaBalanceo 5.5s ease-in-out infinite, tgmGestoSalto .75s ease-out; }
.tgm-ciruja-cuerpo.tgm-gesto-cabeceo { animation: tgmCirujaBalanceo 5.5s ease-in-out infinite, tgmGestoCabeceo .6s ease-in-out; }
@keyframes tgmGestoSalto {
    0%   { translate: 0 0;     scale: 1 1; }
    18%  { translate: 0 6px;   scale: 1.04 .95; }
    45%  { translate: 0 -26px; scale: .98 1.04; rotate: -2deg; }
    75%  { translate: 0 0;     scale: 1.03 .97; }
    100% { translate: 0 0;     scale: 1 1; }
}
@keyframes tgmGestoCabeceo {
    0%, 100% { rotate: 0deg; translate: 0 0; }
    35%      { rotate: 3.5deg; translate: 6px -6px; }
    70%      { rotate: -1.5deg; translate: -2px 0; }
}

/* Línea de descripción del botón señalado, debajo de la botonera */
.tgm-escenario .tgm-descripcion {
    position: absolute; right: 90px; bottom: 26px; width: 440px;
    text-align: center; font-size: calc(19px * var(--tgm-letra, 1)); font-weight: bold; letter-spacing: .04em;
    color: var(--tgm-crema); text-shadow: 0 2px 4px #000, 0 0 12px #000;
    opacity: 0; transform: translateY(6px);
    transition: opacity .25s ease, transform .3s var(--tgm-ease-rebote);
}
.tgm-escenario .tgm-descripcion::before, .tgm-escenario .tgm-descripcion::after { content: ' ◆ '; color: var(--tgm-oro); font-size: calc(12px * var(--tgm-letra, 1)); vertical-align: middle; }
.tgm-escenario .tgm-descripcion.visible { opacity: 1; transform: none; }
.tgm-escenario.tgm-compacto .tgm-descripcion { display: none; }

/* Columna de botones a la derecha: todos con la chapa roja y letras doradas
   de NUEVA PARTIDA, más angostos; el principal más grande y el de salir más sobrio */
.tgm-escenario .tgm-botonera {
    position: absolute; right: 90px; top: 50%; transform: translateY(-50%);
    width: 440px; margin: 0;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.tgm-escenario .tgm-btn { width: 370px; }
.tgm-escenario .tgm-btn-principal { width: 440px; margin-bottom: 6px; }
.tgm-escenario .tgm-btn-salir.tgm-btn { width: 250px; justify-self: auto; margin-top: 4px; }
.tgm-escenario .tgm-btn-chapa {
    min-height: 56px; padding: 0 30px; gap: 14px; border-width: 4px; border-radius: 14px;
    background:
        radial-gradient(ellipse at 30% 10%, rgba(255, 255, 255, .28), transparent 55%),
        repeating-linear-gradient(115deg, rgba(0, 0, 0, .06) 0 2px, transparent 2px 6px),
        linear-gradient(180deg, #c8382b 0%, #9c1a10 55%, #64100a 100%);
    box-shadow:
        inset 0 0 0 2px var(--tgm-oro-osc),
        inset 0 0 0 5px #8f150c,
        inset 0 0 0 6px rgba(255, 210, 63, .45),
        0 5px 0 var(--tgm-tinta),
        0 8px 10px rgba(0, 0, 0, .45);
}
.tgm-escenario .tgm-btn-chapa::before, .tgm-escenario .tgm-btn-chapa::after {
    display: block; width: 9px; height: 9px; margin-top: -4.5px;
    background: radial-gradient(circle at 35% 35%, #fff6c2, #c98a00 60%, #5a3a00);
}
.tgm-escenario .tgm-btn-chapa::before { left: 14px; }
.tgm-escenario .tgm-btn-chapa::after { right: 14px; }
.tgm-escenario .tgm-btn-texto {
    font-size: calc(29px * var(--tgm-letra, 1)); letter-spacing: .08em;
    color: var(--tgm-oro);
    -webkit-text-stroke: 1.2px var(--tgm-tinta);
    text-shadow: 3px 3px 0 var(--tgm-tinta);
}
.tgm-escenario .tgm-btn-filete { display: none; }
.tgm-escenario .tgm-btn-sombra { bottom: -10px; height: 20px; }
.tgm-escenario .tgm-btn-principal .tgm-btn-filete { display: block; width: 30px; height: 18px; border-width: 4px; }
.tgm-escenario .tgm-btn-principal .tgm-btn-chapa {
    min-height: 88px; border-width: 5px; border-radius: 20px;
    background:
        radial-gradient(ellipse at 30% 15%, rgba(255, 255, 255, .45), transparent 55%),
        repeating-linear-gradient(115deg, rgba(0, 0, 0, .06) 0 2px, transparent 2px 6px),
        linear-gradient(180deg, #ff5a48 0%, var(--tgm-rojo) 50%, #8f150c 100%);
    box-shadow:
        inset 0 0 0 3px var(--tgm-oro), inset 0 0 0 6px var(--tgm-rojo), inset 0 0 0 7px rgba(255, 210, 63, .6),
        0 7px 0 var(--tgm-tinta), 0 10px 0 rgba(0, 0, 0, .35), 0 0 30px rgba(255, 90, 40, .35);
}
.tgm-escenario .tgm-btn-principal .tgm-btn-texto { font-size: calc(44px * var(--tgm-letra, 1)); -webkit-text-stroke: 2px var(--tgm-tinta); text-shadow: 4px 4px 0 var(--tgm-tinta), 0 0 22px rgba(255, 210, 63, .55); }
.tgm-escenario .tgm-btn-salir .tgm-btn-chapa {
    min-height: 46px;
    background: linear-gradient(180deg, #4a3a2a, #22170d);
    box-shadow: inset 0 0 0 2px #8a6b3a, 0 4px 0 var(--tgm-tinta), 0 7px 8px rgba(0, 0, 0, .4);
}
.tgm-escenario .tgm-btn-salir .tgm-btn-texto { font-size: calc(22px * var(--tgm-letra, 1)); color: var(--tgm-crema-osc); -webkit-text-stroke: 0; text-shadow: 2px 2px 0 var(--tgm-tinta); }
/* Al pasar el mouse: se adelanta, se aclara y se enciende el borde dorado */
.tgm-escenario .tgm-btn:hover .tgm-btn-chapa, .tgm-escenario .tgm-btn.tgm-foco .tgm-btn-chapa {
    transform: translateX(-10px) scale(1.04);
    filter: brightness(1.18);
    box-shadow:
        inset 0 0 0 2px var(--tgm-oro), inset 0 0 0 5px #8f150c, inset 0 0 0 6px rgba(255, 210, 63, .7),
        0 8px 0 var(--tgm-tinta), 0 0 0 3px var(--tgm-oro), 0 0 26px 6px rgba(255, 190, 60, .5);
}
.tgm-escenario .tgm-btn-principal:hover .tgm-btn-chapa, .tgm-escenario .tgm-btn-principal.tgm-foco .tgm-btn-chapa {
    box-shadow:
        inset 0 0 0 3px var(--tgm-oro), inset 0 0 0 6px var(--tgm-rojo), inset 0 0 0 7px rgba(255, 210, 63, .6),
        0 11px 0 var(--tgm-tinta), 0 0 0 4px var(--tgm-oro), 0 0 40px 10px rgba(255, 140, 40, .6);
}
.tgm-escenario .tgm-btn-salir:hover .tgm-btn-chapa, .tgm-escenario .tgm-btn-salir.tgm-foco .tgm-btn-chapa {
    box-shadow: inset 0 0 0 2px var(--tgm-oro), 0 6px 0 var(--tgm-tinta), 0 0 0 3px var(--tgm-oro), 0 0 20px 4px rgba(255, 190, 60, .4);
}
.tgm-escenario .tgm-btn.tgm-presionado .tgm-btn-chapa, .tgm-escenario .tgm-btn:active .tgm-btn-chapa {
    box-shadow: inset 0 0 0 2px var(--tgm-oro), inset 0 0 0 5px #8f150c, 0 1px 0 var(--tgm-tinta) !important;
}

/* ---- Entrada de la portada (clase .tgm-entrada; reproducirEntrada la repite al volver al menú) ---- */
.tgm-entrada .tgm-titulo-marco {
    animation: tgmLatirTitulo 5s ease-in-out 1.1s infinite, tgmTituloEntra 1s var(--tgm-ease-rebote) .15s backwards;
}
@keyframes tgmTituloEntra {
    0%   { transform: translateY(-160px) scale(1.5) rotate(-6deg); opacity: 0; filter: blur(8px); }
    60%  { opacity: 1; filter: blur(0); }
    100% { transform: none; }
}
.tgm-entrada .tgm-bajada { animation: tgmAparecer .5s ease-out .9s backwards; }
.tgm-entrada .tgm-ciruja-marco { animation: tgmCirujaEntra .9s var(--tgm-ease-rebote) .35s backwards; }
@keyframes tgmCirujaEntra { from { transform: translateX(-420px) rotate(-8deg); opacity: 0; } }
.tgm-entrada .tgm-botonera .tgm-btn { animation: tgmBotonEntra .5s var(--tgm-ease-rebote) backwards; animation-delay: calc(.55s + var(--i) * .07s); }
@keyframes tgmBotonEntra { from { transform: translateX(160px); opacity: 0; } }
.tgm-entrada .tgm-pie { animation: tgmAparecer .6s ease-out 1.4s backwards; }
@keyframes tgmAparecer { from { opacity: 0; transform: translateY(10px); } }
/* ---- Modo táctil (celulares: escala < 0.75) ----
   El escenario se ve a la mitad de tamaño, así que los botones se diseñan
   el doble de altos: en pantalla quedan de ~50px, cómodos para el dedo. */
.tgm-escenario.tgm-compacto .tgm-portada { left: 24px; top: 10px; width: 520px; }
.tgm-escenario.tgm-compacto .tgm-titulo-marco { width: 520px; }
.tgm-escenario.tgm-compacto .tgm-bajada { font-size: calc(15px * var(--tgm-letra, 1)); letter-spacing: .08em; white-space: nowrap; }
.tgm-escenario.tgm-compacto .tgm-ciruja-marco { left: 20px; width: 430px; height: 430px; bottom: -30px; }
.tgm-escenario.tgm-compacto .tgm-botonera {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px;
    width: 700px; right: 30px;
}
.tgm-escenario.tgm-compacto .tgm-btn, .tgm-escenario.tgm-compacto .tgm-btn-salir.tgm-btn { width: 100%; margin: 0; }
.tgm-escenario.tgm-compacto .tgm-btn-principal,
.tgm-escenario.tgm-compacto .tgm-btn-salir { grid-column: 1 / -1; }
.tgm-escenario.tgm-compacto .tgm-btn-chapa { min-height: 98px; padding: 0 18px; border-width: 6px; border-radius: 20px; }
.tgm-escenario.tgm-compacto .tgm-btn-texto { font-size: calc(34px * var(--tgm-letra, 1)); }
.tgm-escenario.tgm-compacto .tgm-btn-filete { display: none; }
.tgm-escenario.tgm-compacto .tgm-btn-principal .tgm-btn-chapa { min-height: 124px; }
.tgm-escenario.tgm-compacto .tgm-btn-principal .tgm-btn-texto { font-size: calc(58px * var(--tgm-letra, 1)); }
.tgm-escenario.tgm-compacto .tgm-btn-salir .tgm-btn-chapa { min-height: 82px; }
.tgm-escenario.tgm-compacto .tgm-btn-salir .tgm-btn-texto { font-size: calc(30px * var(--tgm-letra, 1)); }
.tgm-escenario.tgm-compacto .tgm-pie { display: none; }

/* La ayuda de cada botón se muestra en .tgm-descripcion (menu_principal.js) */
.tgm-escenario .tgm-btn-ayuda { display: none !important; }

.tgm-escenario .tgm-pie {
    position: absolute; left: 40px; right: auto; bottom: 8px; display: flex; gap: 18px;
    font-size: calc(13px * var(--tgm-letra, 1));
}
/* Con el menú a la vista, la barra de versión vieja sobra (el pie ya lo dice) */
body:has(#menu-screen.tgm-activo[style*="display: flex"]) .barra-inferior .version { display: none; }

/* [2026-11-04] Confirmación (p. ej. "¿ARRANCAR DE NUEVO?"): QUIERO verde y NO QUIERO rojo, igual que la botonera del juego
   (css/interfaz.css, #panel-acciones-truco: degradé, filete dorado por dentro, borde de tinta y letras blancas con contorno). */
.tgm-btn-quiero .tgm-btn-chapa, .tgm-btn-noquiero .tgm-btn-chapa {
    border: 3px solid var(--tgm-tinta);
    box-shadow:
        inset 0 0 0 2px rgba(255, 210, 63, .75),
        inset 0 10px 14px -8px rgba(255, 255, 255, .55),
        0 5px 0 var(--tgm-tinta),
        0 8px 12px rgba(0, 0, 0, .45);
}
.tgm-btn-quiero .tgm-btn-chapa   { background: linear-gradient(180deg, #7fe0a4 0%, #2f8f4e 55%, #14532a 100%); }
.tgm-btn-noquiero .tgm-btn-chapa { background: linear-gradient(180deg, #e0574a 0%, #9c2318 55%, #5c0d06 100%); }
.tgm-btn-quiero .tgm-btn-chapa::before, .tgm-btn-quiero .tgm-btn-chapa::after,
.tgm-btn-noquiero .tgm-btn-chapa::before, .tgm-btn-noquiero .tgm-btn-chapa::after { opacity: .55; }
.tgm-btn-quiero .tgm-btn-texto, .tgm-btn-noquiero .tgm-btn-texto {
    color: #fff;
    -webkit-text-stroke: 0;
    text-shadow: 2px 2px 0 var(--tgm-tinta), -1px -1px 0 var(--tgm-tinta);
}
.tgm-btn-quiero:hover .tgm-btn-chapa, .tgm-btn-quiero.tgm-foco .tgm-btn-chapa, .tgm-btn-quiero:focus-visible .tgm-btn-chapa,
.tgm-btn-noquiero:hover .tgm-btn-chapa, .tgm-btn-noquiero.tgm-foco .tgm-btn-chapa, .tgm-btn-noquiero:focus-visible .tgm-btn-chapa {
    filter: brightness(1.12);
    box-shadow:
        inset 0 0 0 2px rgba(255, 210, 63, .95),
        inset 0 10px 14px -8px rgba(255, 255, 255, .6),
        0 8px 0 var(--tgm-tinta),
        0 0 0 3px var(--tgm-oro),
        0 0 22px rgba(255, 210, 63, .7);
}