/* =====================================================================
   LA PUERTA DE LA LONJA (2026-11-07; js/ui/puerta_nombre.js): el patovica, su globo, la lista de la puerta, el sello y la entrada.
   Todo va dentro de .tgp, que copia el rectángulo del dibujo del patovica; las medidas salen de --k (1 % del ancho del dibujo).
   ===================================================================== */
#bienvenida-screen.tgp-activo .box-dialogo-rival-flotante { display: none !important; }
/* la pantalla ocupa el escenario 16:9 del juego (#pantalla-juego), no el alto de la ventana: antes, en ventanas más altas que 16:9,
   el patovica y lo de abajo quedaban cortados */
#bienvenida-screen.tgp-activo { width: 100%; height: 100%; padding: 0; box-sizing: border-box; overflow: hidden; }
#bienvenida-screen.tgp-activo .img-escenario-marcado { width: 96%; height: 96%; }

.tgp {
    position: absolute; z-index: 4; pointer-events: none; --k: 10px;
    --tinta: #1a0a00; --birome: #1d3289; --oro: #ffd23f;
    font-family: var(--tg-fuente-titulo, 'Arial Black', sans-serif);
}

/* ---------- escena viva ---------- */
.tgp-luz {
    position: absolute; left: 30%; top: -10%; width: 70%; height: 120%; pointer-events: none; mix-blend-mode: screen;
    background: radial-gradient(ellipse at 55% 45%, rgba(255, 180, 90, .32), rgba(255, 140, 40, .1) 35%, transparent 62%);
    animation: tgpLate 3.4s ease-in-out infinite;
}
@keyframes tgpLate { 0%, 100% { opacity: .75; } 45% { opacity: 1; } 55% { opacity: .85; } }
.tgp-humo i {
    position: absolute; bottom: 0; width: calc(18 * var(--k)); height: calc(10 * var(--k)); border-radius: 50%;
    background: radial-gradient(ellipse, rgba(210, 200, 190, .16), transparent 70%); filter: blur(calc(.8 * var(--k)));
    animation: tgpHumo 14s linear infinite; opacity: 0;
}
.tgp-humo i:nth-child(1) { left: 5%; animation-delay: 0s; }
.tgp-humo i:nth-child(2) { left: 30%; animation-delay: -3.5s; }
.tgp-humo i:nth-child(3) { left: 55%; animation-delay: -7s; }
.tgp-humo i:nth-child(4) { left: 78%; animation-delay: -10.5s; }
@keyframes tgpHumo {
    0% { transform: translate(0, 0) scale(.7); opacity: 0; } 15% { opacity: 1; }
    100% { transform: translate(calc(8 * var(--k)), calc(-38 * var(--k))) scale(1.8); opacity: 0; }
}
.tgp-neon {
    position: absolute; right: 2%; top: 2.5%; display: flex; flex-direction: column; align-items: center; transform: rotate(-4deg);
    padding: calc(.5 * var(--k)) calc(1.4 * var(--k)); border-radius: calc(1 * var(--k));
    border: calc(.25 * var(--k)) solid rgba(255, 90, 170, .55); box-shadow: 0 0 calc(1.5 * var(--k)) rgba(255, 60, 150, .45), inset 0 0 calc(1.2 * var(--k)) rgba(255, 60, 150, .3);
    background: rgba(20, 5, 15, .55);
}
.tgp-neon-chico { font-size: calc(1.3 * var(--k)); letter-spacing: .4em; color: #b8fbff; text-shadow: 0 0 calc(.4 * var(--k)) #fff, 0 0 calc(1 * var(--k)) #3ce0ff, 0 0 calc(2 * var(--k)) #3ce0ff; }
.tgp-neon-grande {
    font-size: calc(3 * var(--k)); letter-spacing: .06em; color: #ffd6ec;
    text-shadow: 0 0 calc(.4 * var(--k)) #fff, 0 0 calc(1.1 * var(--k)) #ff4fa3, 0 0 calc(2.4 * var(--k)) #ff2a8a, 0 0 calc(4 * var(--k)) #ff2a8a;
    animation: tgpNeon 6s steps(1) infinite;
}
@keyframes tgpNeon { 0%, 18%, 22%, 61%, 63%, 100% { opacity: 1; } 19%, 21%, 62% { opacity: .25; } 20% { opacity: .9; } }

/* el patovica se balancea apenas (mismo movimiento para el dibujo y sus bocas, así no se despegan) */
#bienvenida-screen.tgp-activo .img-escenario-marcado,
#bienvenida-screen.tgp-activo .tg-patovica-boca { animation: tgpBalanceo 4.2s ease-in-out infinite; }
@keyframes tgpBalanceo { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(0, -0.45cqh); } }
/* te deja pasar: se corre a un costado */
#bienvenida-screen.tgp-pasa .img-escenario-marcado,
#bienvenida-screen.tgp-pasa .tg-patovica-boca { animation: none; transform: translateX(-16cqw); transition: transform .8s cubic-bezier(.5, 0, .2, 1); }
/* y la cámara entra por la puerta */
#bienvenida-screen.tgp-entra::before { animation: none !important; transform: scale(1.45); filter: brightness(1.9) saturate(1.2); transition: transform 1.4s cubic-bezier(.6, 0, .3, 1), filter 1.2s ease-in; }

/* ---------- globo del patovica ---------- */
.tgp-globo {
    position: absolute; left: 41%; top: 4.5%; width: 35%; box-sizing: border-box; pointer-events: none;
    padding: calc(1.2 * var(--k)) calc(1.7 * var(--k)) calc(1.3 * var(--k));
    background: radial-gradient(ellipse at 30% 20%, #fffdf3, #f6ecd2); border: calc(.35 * var(--k)) solid var(--tinta); border-radius: calc(2.2 * var(--k));
    box-shadow: 0 calc(.6 * var(--k)) 0 var(--tinta), 0 calc(1 * var(--k)) calc(2 * var(--k)) rgba(0, 0, 0, .55);
    font-size: calc(1.6 * var(--k)); line-height: 1.22; letter-spacing: .02em; color: var(--tinta); min-height: calc(5.5 * var(--k));
}
.tgp-globo::before, .tgp-globo::after {
    content: ''; position: absolute; left: calc(2.6 * var(--k)); bottom: calc(-2.4 * var(--k)); width: 0; height: 0;
    border-style: solid; border-width: calc(2.4 * var(--k)) calc(2.6 * var(--k)) 0 0; border-color: var(--tinta) transparent transparent transparent;
    transform: skewX(18deg);
}
.tgp-globo::after { left: calc(2.95 * var(--k)); bottom: calc(-1.75 * var(--k)); border-width: calc(1.9 * var(--k)) calc(2 * var(--k)) 0 0; border-color: #f6ecd2 transparent transparent transparent; }
.tgp-globo.tgp-pop { animation: tgpPop .32s cubic-bezier(.34, 1.7, .64, 1); }
@keyframes tgpPop { 0% { transform: scale(.85) rotate(-2deg); } 100% { transform: none; } }

/* ---------- la lista de la puerta ---------- */
.tgp-lista {
    position: absolute; left: 56.5%; top: 20%; width: 31%; box-sizing: border-box; pointer-events: auto;
    padding: calc(3.2 * var(--k)) calc(1.3 * var(--k)) calc(1.4 * var(--k));
    background: repeating-linear-gradient(95deg, rgba(0, 0, 0, .06) 0 3px, transparent 3px 9px), linear-gradient(160deg, #a06a35, #6e4420);
    border: calc(.3 * var(--k)) solid #3a220e; border-radius: calc(1.3 * var(--k));
    box-shadow: 0 calc(1 * var(--k)) calc(2.4 * var(--k)) rgba(0, 0, 0, .7), inset 0 0 0 calc(.2 * var(--k)) rgba(255, 220, 160, .18);
    transform: rotate(2.2deg); transition: transform .3s, opacity .5s;
    animation: tgpListaEntra .6s .2s cubic-bezier(.34, 1.4, .64, 1) both;
}
@keyframes tgpListaEntra { from { transform: translateY(calc(30 * var(--k))) rotate(12deg); opacity: 0; } to { transform: rotate(2.2deg); opacity: 1; } }
.tgp-clip {
    position: absolute; left: 50%; top: calc(-1.4 * var(--k)); width: calc(11 * var(--k)); height: calc(4.2 * var(--k)); transform: translateX(-50%);
    border-radius: calc(1 * var(--k)) calc(1 * var(--k)) calc(.6 * var(--k)) calc(.6 * var(--k));
    background: linear-gradient(180deg, #f2f2f2, #9a9a9a 55%, #5d5d5d); border: calc(.2 * var(--k)) solid #2b2b2b;
    box-shadow: 0 calc(.4 * var(--k)) calc(.6 * var(--k)) rgba(0, 0, 0, .5);
}
.tgp-clip::after { content: ''; position: absolute; left: 50%; top: calc(.8 * var(--k)); width: calc(3 * var(--k)); height: calc(1.2 * var(--k)); transform: translateX(-50%); border-radius: 50%; background: #3a3a3a; }
.tgp-papel {
    position: relative; padding: calc(1.2 * var(--k)) calc(1.4 * var(--k)) calc(.8 * var(--k)) calc(2.2 * var(--k));
    background:
        linear-gradient(90deg, transparent calc(1.5 * var(--k)), rgba(220, 70, 70, .45) calc(1.5 * var(--k)), rgba(220, 70, 70, .45) calc(1.65 * var(--k)), transparent calc(1.65 * var(--k))),
        repeating-linear-gradient(180deg, transparent 0 calc(2.85 * var(--k)), rgba(70, 120, 200, .28) calc(2.85 * var(--k)) calc(2.95 * var(--k))),
        #fbf7ea;
    background-position: 0 0, 0 calc(4.3 * var(--k)), 0 0;
    border-radius: calc(.4 * var(--k)); box-shadow: 0 calc(.2 * var(--k)) calc(.5 * var(--k)) rgba(0, 0, 0, .35);
    font-family: var(--tg-fuente-pizarron, 'Comic Sans MS', cursive); color: var(--birome);
}
.tgp-titulo { font-family: var(--tg-fuente-titulo, sans-serif); font-size: calc(1.75 * var(--k)); letter-spacing: .05em; color: #8f1d14; line-height: 1.1; }
.tgp-sub { font-size: calc(1.15 * var(--k)); color: #6a5a4a; margin-bottom: calc(.5 * var(--k)); line-height: 1.2; }
.tgp-renglones { margin: 0; padding-left: calc(2.2 * var(--k)); font-size: calc(1.5 * var(--k)); line-height: calc(2.9 * var(--k)); }
.tgp-renglones li { white-space: nowrap; }
.tgp-renglones s { text-decoration-color: rgba(200, 30, 30, .8); text-decoration-thickness: calc(.22 * var(--k)); }
.tgp-renglones b { color: #1e8a3c; font-weight: normal; }
.tgp-no { color: #b3261e; }
.tgp-no em { font-style: normal; font-size: .72em; opacity: .85; }
.tgp-tuyo { position: relative; }
.tgp-tuyo::before {   /* resaltador amarillo en tu renglón */
    content: ''; position: absolute; left: calc(-.6 * var(--k)); right: calc(-.4 * var(--k)); top: 18%; bottom: 14%;
    background: rgba(255, 233, 70, .55); border-radius: calc(.4 * var(--k)); z-index: 0; animation: tgpResalta 1.6s ease-in-out infinite;
}
@keyframes tgpResalta { 50% { background: rgba(255, 233, 70, .3); } }
.tgp-anotado .tgp-tuyo::before { animation: none; background: rgba(255, 233, 70, .35); }
.tgp-hueco { position: relative; z-index: 1; display: inline-block; width: 82%; vertical-align: middle; }
#bienvenida-screen .tgp .input-nombre-arcade {
    display: block; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box;
    background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; outline: none !important;
    font-family: var(--tg-fuente-pizarron, 'Comic Sans MS', cursive) !important; font-size: calc(1.95 * var(--k)) !important; font-style: normal !important;
    letter-spacing: .04em !important; text-transform: uppercase; text-align: left !important; color: var(--birome) !important; text-shadow: none !important;
    caret-color: var(--birome) !important; line-height: calc(2.9 * var(--k)); height: calc(2.9 * var(--k));
}
#bienvenida-screen .tgp .input-nombre-arcade::placeholder { font-size: calc(1.45 * var(--k)) !important; color: rgba(29, 50, 137, .38) !important; text-transform: none; }
.tgp-tilde { position: relative; z-index: 1; display: inline-block; margin-left: calc(.4 * var(--k)); transform: scale(0) rotate(-20deg); font-size: 1.3em; }
.tgp-anotado .tgp-tilde { animation: tgpTilde .35s cubic-bezier(.34, 1.8, .64, 1) forwards; }
@keyframes tgpTilde { to { transform: scale(1) rotate(-6deg); } }
.tgp-contador { position: absolute; right: calc(1 * var(--k)); bottom: calc(.3 * var(--k)); font-size: calc(1 * var(--k)); color: rgba(60, 60, 60, .55); }

.tgp-botones { display: flex; gap: calc(.9 * var(--k)); margin-top: calc(1.2 * var(--k)); min-height: calc(4.6 * var(--k)); }
.tgp-btn {
    flex: 1; cursor: pointer; white-space: nowrap; font-family: var(--tg-fuente-titulo, sans-serif); font-size: calc(1.35 * var(--k)); letter-spacing: .03em; color: #fff;
    padding: calc(.75 * var(--k)) calc(.8 * var(--k)); border: calc(.28 * var(--k)) solid var(--tinta); border-radius: calc(1 * var(--k));
    -webkit-text-stroke: calc(.22 * var(--k)) var(--tinta); paint-order: stroke fill;
    box-shadow: inset 0 calc(.6 * var(--k)) calc(.8 * var(--k)) calc(-.4 * var(--k)) rgba(255, 255, 255, .55), 0 calc(.45 * var(--k)) 0 var(--tinta);
    transition: transform .12s cubic-bezier(.34, 1.56, .64, 1), filter .12s;
}
.tgp-btn:hover { transform: translateY(calc(-.25 * var(--k))) scale(1.04); filter: brightness(1.1); }
.tgp-btn:active { transform: translateY(calc(.3 * var(--k))); box-shadow: 0 calc(.1 * var(--k)) 0 var(--tinta); }
.tgp-btn-si { background: linear-gradient(180deg, #3fcf7a, #17803f 55%, #0a4a22); flex: 1.15; }
.tgp-btn-otro { background: linear-gradient(180deg, #8a7458, #5a4128 55%, #33230f); }

/* no te deja: la lista y el globo se sacuden */
.tgp-niega .tgp-lista { animation: tgpNiega .42s ease-in-out; }
.tgp-niega .tgp-globo { animation: tgpNiega .42s ease-in-out; }
@keyframes tgpNiega { 0%, 100% { translate: 0; } 20% { translate: calc(-1.2 * var(--k)); } 40% { translate: calc(1 * var(--k)); } 60% { translate: calc(-.7 * var(--k)); } 80% { translate: calc(.4 * var(--k)); } }

/* ---------- el sello de goma ---------- */
.tgp-sello {
    position: absolute; left: 70%; top: 47%; width: calc(20 * var(--k)); height: calc(20 * var(--k)); margin: calc(-10 * var(--k)) 0 0 calc(-10 * var(--k));
    opacity: 0; transform: scale(2.6) rotate(-30deg); pointer-events: none; filter: drop-shadow(0 0 calc(.2 * var(--k)) rgba(120, 10, 5, .35));
}
.tgp-sellado .tgp-sello { animation: tgpSello .42s cubic-bezier(.5, 0, .3, 1.4) forwards; }
@keyframes tgpSello { 0% { opacity: 0; transform: scale(2.6) rotate(-30deg); } 55% { opacity: 1; transform: scale(.92) rotate(-13deg); } 100% { opacity: .92; transform: scale(1) rotate(-14deg); } }
.tgp-sello-aro {
    position: absolute; inset: 0; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    border: calc(1 * var(--k)) solid #c8261b; box-shadow: inset 0 0 0 calc(.45 * var(--k)) rgba(251, 247, 234, .85), inset 0 0 0 calc(.95 * var(--k)) #c8261b;
    color: #c8261b; background: rgba(255, 240, 230, .78);
    -webkit-mask-image: repeating-radial-gradient(circle at 30% 40%, #000 0 3px, rgba(0, 0, 0, .55) 3px 4px), radial-gradient(circle, #000 60%, rgba(0, 0, 0, .8));
            mask-image: repeating-radial-gradient(circle at 30% 40%, #000 0 3px, rgba(0, 0, 0, .55) 3px 4px), radial-gradient(circle, #000 60%, rgba(0, 0, 0, .8));
}
.tgp-sello-arriba, .tgp-sello-abajo { font-size: calc(1.7 * var(--k)); letter-spacing: .12em; line-height: 1.2; }
.tgp-sello-nombre {
    font-size: calc(3.1 * var(--k)); line-height: 1.05; max-width: 84%; margin: calc(.5 * var(--k)) 0; padding: calc(.3 * var(--k)) 0;
    border-top: calc(.25 * var(--k)) solid #c8261b; border-bottom: calc(.25 * var(--k)) solid #c8261b; word-break: break-word;
}

/* ---------- la entrada: se va todo y entra la luz del bar ---------- */
.tgp-flash { position: fixed; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle at 55% 45%, rgba(255, 236, 200, .95), rgba(255, 170, 80, .55) 45%, rgba(255, 140, 40, 0) 80%); }
.tgp-entra .tgp-flash { animation: tgpFlash 1.2s ease-in forwards; }
@keyframes tgpFlash { 0% { opacity: 0; } 100% { opacity: .9; } }
.tgp-pasa .tgp-globo, .tgp-pasa .tgp-neon { opacity: 0; transition: opacity .5s; }
.tgp-entra .tgp-lista, .tgp-entra .tgp-sello { opacity: 0 !important; transform: translateY(calc(6 * var(--k))) rotate(8deg) !important; transition: opacity .5s, transform .6s; animation: none !important; }

/* ---------- celular en vertical: globo arriba del patovica y la lista debajo ---------- */
@media (orientation: portrait) {
    .tgp-globo { left: 4%; top: -46%; width: 92%; }
    .tgp-globo::before, .tgp-globo::after { left: 30%; }
    .tgp-lista { left: 6%; top: 104%; width: 88%; transform: none; animation: none; }
    .tgp-neon { top: -14%; }
    .tgp-sello { left: 50%; top: 125%; }
}