/* =====================================================================
   PLACA DE VERSUS "LOS NAIPES" (2026-11-07, pedido del autor; js/ui/versus.js)
   Cada equipo es una carta española gigante que entra volando y se da vuelta girando en el aire; el VS dorado cae de golpe
   en el centro y al final las cartas chocan. Todo se mide en --u (1/100 del ancho de un escenario 16:9 que entra en la pantalla).
   ===================================================================== */
#overlay-versus.tgv-activo .fondo-bar-shakes,
#overlay-versus.tgv-activo #img-placa-vs,
#overlay-versus.tgv-activo #texto-versus-dinamico,
#overlay-versus.tgv-activo #tg-vs-provisional { display: none !important; }

.tgv {
    position: absolute; inset: 0; overflow: hidden; z-index: 5; cursor: pointer;
    --u: min(1cqw, 1.7778cqh);
    --oro: #ffd23f; --oro-osc: #c98a00; --tinta: #1a0a00; --crema: #f6ecd2;
    --nos: #ffb703; --ellos: #e63946;
    background: #0d0603;
    font-family: var(--tg-fuente-titulo, 'Arial Black', sans-serif);
    user-select: none;
}

/* ---------- fondo: el lugar del nivel, oscuro y desenfocado, partido en diagonal ---------- */
.tgv-lugar {
    position: absolute; inset: -4%; background-size: cover; background-position: center;
    /* [2026-11-11] rendimiento: antes tenia filter blur+brightness (animado) sobre toda la pantalla, muy pesado en PC sin buena placa de video.
       Ahora el oscurecido es una capa encima (solo opacidad) y no hay filtros en vivo. */
    transform: scale(1.08); animation: tgvAcercar 7s ease-out both; will-change: transform;
}
.tgv-lugar::after { content: ""; position: absolute; inset: 0; background: rgba(8, 4, 1, .68); }
.tgv-lugar::before { content: ""; position: absolute; inset: 0; z-index: 1; background: #000; animation: tgvDeNegro 7s ease-out forwards; }   /* viene de negro, como antes */
@keyframes tgvAcercar { from { transform: scale(1.2); } to { transform: scale(1.08); } }
@keyframes tgvDeNegro { from { opacity: 1; } to { opacity: 0; } }
/* [2026-11-11] sin mix-blend-mode (obligaba a recomponer toda la pantalla en cada cuadro): color normal y mas suave */
.tgv-mitad { position: absolute; inset: 0; opacity: 0; animation: tgvMitad .5s .15s ease-out forwards; }
@keyframes tgvMitad { to { opacity: .32; } }
.tgv-mitad.nos   { background: linear-gradient(100deg, var(--nos) 0%, rgba(255, 183, 3, .25) 48%, transparent 50%); }
.tgv-mitad.ellos { background: linear-gradient(100deg, transparent 50%, rgba(230, 57, 70, .3) 52%, var(--ellos) 100%); }
@keyframes tgvAparece { to { opacity: 1; } }
.tgv-rayos {
    position: absolute; left: 50%; top: 46%; width: 170vmax; height: 170vmax; margin: -85vmax 0 0 -85vmax; will-change: transform;
    background: repeating-conic-gradient(from 0deg, rgba(255, 220, 140, .10) 0deg 6deg, transparent 6deg 18deg);
    -webkit-mask-image: radial-gradient(circle closest-side, #000 0%, rgba(0, 0, 0, .6) 40%, transparent 100%);
            mask-image: radial-gradient(circle closest-side, #000 0%, rgba(0, 0, 0, .6) 40%, transparent 100%);
    opacity: 0; animation: tgvAparece .8s .3s ease-out forwards, tgvGirar 40s linear infinite;
}
@keyframes tgvGirar { to { transform: rotate(360deg); } }
.tgv-vineta { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 48%, transparent 40%, rgba(0, 0, 0, .78) 100%); pointer-events: none; }
.tgv-grano {
    position: absolute; inset: 0; pointer-events: none; opacity: .05;
    background-image: repeating-radial-gradient(circle at 17% 32%, #fff 0 1px, transparent 1px 3px), repeating-radial-gradient(circle at 71% 64%, #000 0 1px, transparent 1px 4px);
}
/* corte diagonal que abre la escena */
.tgv-corte {
    position: absolute; left: 50%; top: -20%; width: calc(.6 * var(--u)); height: 140%; margin-left: calc(-.3 * var(--u));
    background: linear-gradient(180deg, transparent, #fff 20%, var(--oro) 50%, #fff 80%, transparent);
    box-shadow: 0 0 calc(2 * var(--u)) var(--oro), 0 0 calc(5 * var(--u)) rgba(255, 140, 0, .6);
    transform: rotate(12deg) scaleY(0); transform-origin: 50% 0;
    animation: tgvCorte .45s .05s cubic-bezier(.7, 0, .3, 1) forwards, tgvCorteSe 1.2s .6s ease-in forwards;
}
@keyframes tgvCorte { to { transform: rotate(12deg) scaleY(1); } }
@keyframes tgvCorteSe { to { opacity: .25; } }

/* ---------- escenario 16:9 centrado ---------- */
.tgv-escenario {
    position: absolute; left: 50%; top: 50%; width: calc(100 * var(--u)); height: calc(56.25 * var(--u));
    transform: translate(-50%, -50%);
}
.tgv.tgv-sacude .tgv-escenario { animation: tgvSacude .45s cubic-bezier(.36, .07, .19, .97); }
@keyframes tgvSacude {
    0%, 100% { transform: translate(-50%, -50%); }
    15% { transform: translate(calc(-50% - 1.4 * var(--u)), calc(-50% + .9 * var(--u))) rotate(-.6deg); }
    35% { transform: translate(calc(-50% + 1.2 * var(--u)), calc(-50% - 1 * var(--u))) rotate(.5deg); }
    55% { transform: translate(calc(-50% - .8 * var(--u)), calc(-50% + .5 * var(--u))); }
    75% { transform: translate(calc(-50% + .4 * var(--u)), calc(-50% - .3 * var(--u))); }
}

/* ---------- cartel del lugar ---------- */
.tgv-titulo {
    position: absolute; left: 50%; top: calc(1.6 * var(--u)); transform: translate(-50%, -160%);
    text-align: center; white-space: nowrap; animation: tgvTitulo .6s .3s cubic-bezier(.34, 1.56, .64, 1) forwards;
}
@keyframes tgvTitulo { to { transform: translate(-50%, 0); } }
.tgv-nivel {
    display: inline-block; padding: calc(.25 * var(--u)) calc(1.4 * var(--u)) calc(.35 * var(--u));
    font-size: calc(1.5 * var(--u)); letter-spacing: .22em; color: var(--tinta); background: var(--oro);
    border: calc(.25 * var(--u)) solid var(--tinta); border-radius: calc(.8 * var(--u)); box-shadow: 0 calc(.35 * var(--u)) 0 var(--tinta);
}
.tgv-nombre {
    display: block; margin-top: calc(.5 * var(--u));
    font-size: calc(4.4 * var(--u)); line-height: 1; letter-spacing: .04em; color: #fff;
    -webkit-text-stroke: calc(.55 * var(--u)) var(--tinta); paint-order: stroke fill;
    text-shadow: 0 calc(.45 * var(--u)) 0 var(--tinta), 0 0 calc(2.4 * var(--u)) rgba(255, 190, 60, .55);
}

/* ---------- las cartas ---------- */
.tgv-lado { position: absolute; top: calc(9.6 * var(--u)); width: calc(23 * var(--u)); }
/* [2026-11-07] sin los pizarrones de abajo (el autor), las cartas y el VS se agrandan con ese espacio; después las pidió
   todavía más grandes: casi todo el alto del escenario, más abiertas hacia los costados para dejarle lugar al VS */
.tgv-lado { --escala: 1.3; transform: scale(var(--escala)); transform-origin: 50% 0; }   /* [2026-11-08] un poco más chicas (pedido del autor) */
.tgv-lado.nos   { left: calc(10 * var(--u)); }
.tgv-lado.ellos { right: calc(10 * var(--u)); }
/* el choque del final: se tiran una contra la otra, se tocan y vuelven */
.tgv.choque .tgv-lado.nos   { animation: tgvChoqueNos .9s cubic-bezier(.5, 0, .3, 1); }
.tgv.choque .tgv-lado.ellos { animation: tgvChoqueEllos .9s cubic-bezier(.5, 0, .3, 1); }
@keyframes tgvChoqueNos {
    0%, 100% { transform: scale(var(--escala)); }
    25% { transform: translateX(calc(-2 * var(--u))) rotate(-5deg) scale(var(--escala)); }
    34% { transform: translateX(calc(12 * var(--u))) rotate(9deg) scale(var(--escala)); }
    50% { transform: translateX(calc(6 * var(--u))) rotate(4deg) scale(var(--escala)); }
}
@keyframes tgvChoqueEllos {
    0%, 100% { transform: scale(var(--escala)); }
    25% { transform: translateX(calc(2 * var(--u))) rotate(5deg) scale(var(--escala)); }
    34% { transform: translateX(calc(-12 * var(--u))) rotate(-9deg) scale(var(--escala)); }
    50% { transform: translateX(calc(-6 * var(--u))) rotate(-4deg) scale(var(--escala)); }
}
.tgv-vuelo { perspective: calc(90 * var(--u)); }
.tgv-lado.nos .tgv-vuelo   { transform: translateX(calc(-70 * var(--u))) rotate(-40deg); }
.tgv-lado.ellos .tgv-vuelo { transform: translateX(calc(70 * var(--u))) rotate(40deg); }
.tgv-lado.entra .tgv-vuelo { animation: tgvVuelo .62s cubic-bezier(.2, .9, .25, 1.12) forwards; }
.tgv-lado.nos.entra .tgv-vuelo   { --gira: -4deg; }
.tgv-lado.ellos.entra .tgv-vuelo { --gira: 4deg; }
@keyframes tgvVuelo { to { transform: translateX(0) rotate(var(--gira)); } }
.tgv-flota { animation: tgvFlota 3.2s ease-in-out infinite; }
.tgv-lado.ellos .tgv-flota { animation-delay: -1.6s; }
@keyframes tgvFlota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(-.7 * var(--u))); } }

.tgv-carta {
    position: relative; width: 100%; aspect-ratio: 23 / 31.5;
    transform-style: preserve-3d; transform: rotateY(180deg);
}
/* el giro: se levanta de la mesa, da tres vueltas y media en el aire (1260° → 0°, frenando) y cae boca arriba con un rebote */
.tgv-lado.vuelta .tgv-carta { animation: tgvGiro 1.3s cubic-bezier(.25, .6, .3, 1) forwards; }
@keyframes tgvGiro {
    0%   { transform: translateY(0) rotateX(0) rotateY(1260deg) scale(1); }
    18%  { transform: translateY(calc(-3.5 * var(--u))) rotateX(14deg) rotateY(900deg) scale(1.16); }
    62%  { transform: translateY(calc(-2.5 * var(--u))) rotateX(8deg) rotateY(90deg) scale(1.12); }
    84%  { transform: translateY(calc(.4 * var(--u))) rotateX(0) rotateY(-14deg) scale(.97); }
    93%  { transform: translateY(0) rotateY(5deg) scale(1.01); }
    100% { transform: translateY(0) rotateX(0) rotateY(0deg) scale(1); }
}
/* sombra de la carta en la mesa: se achica y se aleja mientras está en el aire */
.tgv-flota::after {
    content: ''; position: absolute; left: 10%; right: 10%; bottom: calc(-1.4 * var(--u)); height: calc(2 * var(--u)); z-index: -1;
    border-radius: 50%; background: radial-gradient(ellipse, rgba(0, 0, 0, .6), transparent 70%);
}
.tgv-lado.vuelta .tgv-flota::after { animation: tgvSombra 1.3s cubic-bezier(.25, .6, .3, 1); }
@keyframes tgvSombra { 18%, 62% { transform: scale(.7); opacity: .45; } }
.tgv-flota { position: relative; }
.tgv-cara, .tgv-dorso {
    position: absolute; inset: 0; border-radius: calc(1.5 * var(--u)); backface-visibility: hidden; -webkit-backface-visibility: hidden;
    border: calc(.35 * var(--u)) solid var(--tinta);
    box-shadow: 0 calc(1.2 * var(--u)) calc(2.5 * var(--u)) rgba(0, 0, 0, .7), 0 0 0 calc(.2 * var(--u)) rgba(255, 255, 255, .08);
    overflow: hidden;
}
.tgv-dorso {
    transform: rotateY(180deg);
    background: url('../img/cartas/dorso.png') center / cover, #7a1d12;
    box-shadow: inset 0 0 0 calc(.6 * var(--u)) var(--crema), inset 0 0 0 calc(.85 * var(--u)) var(--tinta), 0 calc(1.2 * var(--u)) calc(2.5 * var(--u)) rgba(0, 0, 0, .7);
}
.tgv-cara {
    background:
        radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, .55), transparent 60%),
        repeating-linear-gradient(45deg, rgba(120, 80, 30, .035) 0 2px, transparent 2px 5px),
        var(--crema);
}
/* marco doble del naipe */
.tgv-cara::before {
    content: ''; position: absolute; inset: calc(.6 * var(--u)); border-radius: calc(1 * var(--u)); pointer-events: none; z-index: 3;
    border: calc(.22 * var(--u)) solid #b3261e; box-shadow: inset 0 0 0 calc(.28 * var(--u)) var(--crema), inset 0 0 0 calc(.45 * var(--u)) var(--oro-osc);
}
/* brillo que barre la carta al darse vuelta */
.tgv-cara::after {
    content: ''; position: absolute; inset: -20%; z-index: 6; pointer-events: none;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .85) 50%, transparent 62%);
    transform: translateX(-120%);
}
.tgv-lado.vuelta .tgv-cara::after { animation: tgvBrillo .7s 1.05s ease-out forwards; }
@keyframes tgvBrillo { to { transform: translateX(120%); } }

.tgv-indice { position: absolute; z-index: 4; display: flex; flex-direction: row; align-items: center; gap: calc(.25 * var(--u)); line-height: 1; }
.tgv-indice.arriba { left: calc(1.5 * var(--u)); top: calc(1.05 * var(--u)); }
.tgv-indice.derecha { right: calc(1.5 * var(--u)); top: calc(1.05 * var(--u)); flex-direction: row-reverse; }
.tgv-indice b { font-weight: normal; font-size: calc(2.3 * var(--u)); color: #b3261e; -webkit-text-stroke: calc(.12 * var(--u)) var(--tinta); }
.tgv-indice svg { width: calc(1.1 * var(--u)); height: calc(2.1 * var(--u)); }
.tgv-carta-nombre {
    position: absolute; left: 0; right: 0; top: calc(1.75 * var(--u)); z-index: 4; text-align: center;
    font-size: calc(.8 * var(--u)); letter-spacing: .32em; color: #7a1d12; opacity: .8;   /* [2026-11-08] nombre del juego, sutil */
}

.tgv-ventana {
    position: absolute; left: calc(1.6 * var(--u)); right: calc(1.6 * var(--u)); top: calc(4.1 * var(--u)); height: calc(17.6 * var(--u));
    border-radius: calc(.7 * var(--u)); overflow: hidden; z-index: 2;
    border: calc(.25 * var(--u)) solid var(--tinta);
    background-size: cover; background-position: center;
}
.tgv-ventana::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 35%, rgba(255, 230, 170, .35), rgba(0, 0, 0, .45) 85%); }
.tgv-lado.nos .tgv-ventana   { box-shadow: inset 0 0 0 calc(.3 * var(--u)) rgba(255, 183, 3, .6); }
.tgv-lado.ellos .tgv-ventana { box-shadow: inset 0 0 0 calc(.3 * var(--u)) rgba(230, 57, 70, .6); }
.tgv-retrato { position: absolute; bottom: 0; width: 236%; height: auto; transform: translateY(24.5%); max-width: none; }
.tgv-misterio {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: calc(12 * var(--u)); color: rgba(0, 0, 0, .55); text-shadow: 0 0 calc(2 * var(--u)) rgba(230, 57, 70, .7);
}

.tgv-equipo {
    position: absolute; left: calc(1.6 * var(--u)); right: calc(1.6 * var(--u)); bottom: calc(2.1 * var(--u)); z-index: 4;
    min-height: calc(5.6 * var(--u)); display: flex; align-items: center; justify-content: center; text-align: center;
    padding: calc(.4 * var(--u)) calc(.8 * var(--u)); box-sizing: border-box; border-radius: calc(.6 * var(--u));
    background: linear-gradient(180deg, #3a1d0b, #1a0a00); border: calc(.2 * var(--u)) solid var(--oro-osc);
    font-size: calc(1.75 * var(--u)); line-height: 1.05; letter-spacing: .03em; color: #fff;
    -webkit-text-stroke: calc(.3 * var(--u)) var(--tinta); paint-order: stroke fill;
}
.tgv-lado.nos .tgv-equipo span   { color: var(--nos); }
.tgv-lado.ellos .tgv-equipo span { color: #ff6b6b; }

/* polvo / aro al caer la carta */
.tgv-aro {
    position: absolute; left: 50%; top: 50%; width: 100%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
    border: calc(.5 * var(--u)) solid rgba(255, 230, 160, .9); transform: translate(-50%, -50%) scale(.3); opacity: 0;
}
.tgv-lado.vuelta .tgv-aro { animation: tgvAro .55s 1.1s ease-out; }
@keyframes tgvAro { 0% { opacity: .9; transform: translate(-50%, -50%) scale(.4); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); } }

/* ---------- el VS (sin fósforo desde el 2026-11-07: cae de golpe, dorado) ---------- */
.tgv-centro { position: absolute; left: 50%; top: calc(31 * var(--u)); width: 0; height: 0; transform: scale(1.28); }
.tgv-vs {
    position: absolute; left: 0; top: 0; transform: translate(-50%, -50%) scale(0); opacity: 0;
    font-size: calc(13 * var(--u)); line-height: 1; letter-spacing: -.02em; white-space: nowrap;
}
.tgv-vs span {
    display: inline-block; color: transparent;
    background: linear-gradient(180deg, #ffffff 0%, #fff3b0 22%, #ffd23f 45%, #c98a00 62%, #ffe36a 78%, #8a5a00 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: calc(.55 * var(--u)) var(--tinta); paint-order: stroke fill;
    filter: drop-shadow(0 calc(.6 * var(--u)) 0 var(--tinta)) drop-shadow(0 0 calc(2 * var(--u)) rgba(255, 225, 120, .75));
}
/* cae desde arriba, enorme, y se clava con un rebote; después late despacio */
.tgv.vs-listo .tgv-vs { animation: tgvVs .45s cubic-bezier(.5, 0, .4, 1.5) forwards, tgvVsLate 1.3s .6s ease-in-out infinite alternate; }
@keyframes tgvVs {
    0% { opacity: 0; transform: translate(-50%, -50%) translateY(calc(-30 * var(--u))) scale(3) rotate(-20deg); }
    55% { opacity: 1; transform: translate(-50%, -50%) scale(.9) rotate(-4deg); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-6deg); }
}
@keyframes tgvVsLate { from { transform: translate(-50%, -50%) scale(1) rotate(-6deg); } to { transform: translate(-50%, -50%) scale(1.06) rotate(-4deg); } }
.tgv-onda {
    position: absolute; left: 0; top: 0; width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-radius: 50%;
    transform: translate(-50%, -50%) scale(0); border: calc(1.2 * var(--u)) solid rgba(255, 230, 150, .9); opacity: 0;
}
.tgv.vs-listo .tgv-onda { animation: tgvOnda .6s ease-out; }
@keyframes tgvOnda { 0% { opacity: 1; transform: translate(-50%, -50%) scale(.15); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); border-width: 1px; } }
.tgv-resplandor {
    position: absolute; left: 0; top: 0; width: calc(40 * var(--u)); height: calc(40 * var(--u)); transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255, 220, 120, .38), transparent 60%); opacity: 0; pointer-events: none;
}
.tgv.vs-listo .tgv-resplandor { animation: tgvAparece .3s forwards, tgvPulso 1.3s .6s ease-in-out infinite alternate; }
@keyframes tgvPulso { from { opacity: .7; } to { opacity: 1; } }
.tgv-flash { position: absolute; inset: 0; background: #fff8e0; opacity: 0; pointer-events: none; }
.tgv.vs-listo .tgv-flash { animation: tgvFlash .38s ease-out; }
@keyframes tgvFlash { 0% { opacity: .85; } 100% { opacity: 0; } }

/* destellos del golpe del VS y del choque de las cartas */
.tgv-chispa { position: absolute; left: 0; top: 0; border-radius: 50%; pointer-events: none; }
.tgv-chispa { width: calc(.45 * var(--u)); height: calc(.45 * var(--u)); background: radial-gradient(circle, #fffbe0 35%, rgba(255, 210, 63, .55) 60%, transparent 72%); transform: scale(1.8); }

/* ---------- aviso para seguir ---------- */
.tgv-seguir {
    position: absolute; left: 50%; bottom: calc(1.2 * var(--u)); transform: translateX(-50%); opacity: 0;
    font-size: calc(1.2 * var(--u)); letter-spacing: .25em; color: rgba(255, 255, 255, .75); white-space: nowrap;
    animation: tgvAparece .4s 1.6s forwards, tgvParpadeo 1.1s 2s ease-in-out infinite;
}
@keyframes tgvParpadeo { 50% { opacity: .3; } }

/* sin animaciones de ambiente: sin temblor */
.tgv.tgv-quieto.tgv-sacude .tgv-escenario { animation: none; }