/* =====================================================================
   CARTELES DEL NIVEL 2, temática china (js/ui/carteles_chinos.js)
   Placa de laca roja con borde dorado y greca, faroles, fichas de mahjong, medallas del chancho y pergamino.
   Sin desenfoques animados: solo transform y opacidad (memoria del autor: nada de blur en vivo).
   ===================================================================== */
.tgc-capa {
    --tgc-oro: #f6c945; --tgc-oro-osc: #a86b00; --tgc-rojo: #b3120c; --tgc-rojo-osc: #5e0603; --tgc-tinta: #2a0703;
    position: fixed; inset: 0; z-index: 9001; overflow: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(14px, 3cqh, 30px);
    background: radial-gradient(ellipse at 50% 45%, rgba(70, 8, 4, .62), rgba(10, 2, 1, .93));
    opacity: 0; transition: opacity .3s ease;
}
.tgc-capa.visible { opacity: 1; }
.tgc-buenas { pointer-events: none; }

/* nubes rojas del autor, asomando en dos esquinas */
.tgc-nube { position: absolute; width: clamp(180px, 26cqw, 420px); opacity: 0; transition: opacity .6s ease, transform 1s cubic-bezier(.2, .9, .3, 1); pointer-events: none; }
.tgc-nube.a { left: -2cqw; top: 6cqh; transform: translateX(-30%); }
.tgc-nube.b { right: -2cqw; bottom: 8cqh; transform: translateX(30%) scaleX(-1); }
.visible .tgc-nube { opacity: .9; }
.visible .tgc-nube.a { transform: none; animation: tgcNubeVa 7s ease-in-out 1s infinite alternate; }
.visible .tgc-nube.b { transform: scaleX(-1); animation: tgcNubeVb 8s ease-in-out 1s infinite alternate; }
@keyframes tgcNubeVa { to { transform: translateX(3cqw); } }
@keyframes tgcNubeVb { to { transform: scaleX(-1) translateX(3cqw); } }

/* ---------- la placa de laca ---------- */
.tgc-placa {
    position: relative; text-align: center; line-height: 1;
    padding: clamp(26px, 5cqh, 54px) clamp(30px, 5cqw, 80px) clamp(24px, 4.4cqh, 48px);
    border-radius: 14px;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(255, 120, 80, .35), transparent 60%),
        linear-gradient(180deg, #d0231a 0%, var(--tgc-rojo) 45%, #7d0905 100%);
    border: 5px solid var(--tgc-oro);
    box-shadow:
        inset 0 0 0 3px var(--tgc-rojo-osc), inset 0 0 0 7px var(--tgc-oro-osc), inset 0 0 40px rgba(0, 0, 0, .45),
        0 0 0 3px var(--tgc-tinta), 0 18px 40px rgba(0, 0, 0, .75);
    transform: translateY(-40px) scale(.92); opacity: 0;
    transition: transform .5s cubic-bezier(.3, 1.5, .5, 1), opacity .3s ease;
}
.visible .tgc-placa { transform: none; opacity: 1; }
/* greca dorada (patrón de llave) arriba y abajo */
.tgc-placa::before, .tgc-placa::after {
    content: ''; position: absolute; left: 14px; right: 14px; height: 14px; opacity: .95;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='14' viewBox='0 0 20 14'%3E%3Cpath d='M0 12.5H17V1.5H6V9H12V5.5' fill='none' stroke='%23f6c945' stroke-width='2'/%3E%3C/svg%3E") repeat-x;
    background-size: 20px 14px;
}
.tgc-placa::before { top: 12px; }
.tgc-placa::after { bottom: 12px; transform: scaleY(-1); }
.tgc-placa.ancha { display: flex; align-items: center; gap: clamp(12px, 2.6cqw, 44px); }

/* ---------- faroles de papel (cuelgan de la placa y se mecen) ---------- */
.tgc-farol { position: absolute; top: -8px; width: clamp(46px, 5cqw, 80px); transform-origin: 50% 0; animation: tgcMece 2.8s ease-in-out infinite alternate; }
.tgc-farol.izq { left: clamp(-40px, -3cqw, -20px); } .tgc-farol.der { right: clamp(-40px, -3cqw, -20px); animation-delay: -1.3s; }
.tgc-farol i { display: block; margin: 0 auto; }
.tgc-farol .hilo { width: 2px; height: clamp(18px, 3cqh, 34px); background: var(--tgc-oro); }
.tgc-farol .cuerpo {
    position: relative; width: 100%; aspect-ratio: 1 / 1.05; border-radius: 46% / 50%;
    background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .18) 0 2px, transparent 2px 22%), radial-gradient(circle at 50% 45%, #ffd36e 0%, #ff5a2a 38%, #c4140c 70%, #7a0805 100%);
    border-top: 6px solid var(--tgc-oro); border-bottom: 6px solid var(--tgc-oro); box-sizing: border-box;
    box-shadow: 0 0 18px rgba(255, 120, 40, .75), 0 0 46px rgba(255, 70, 20, .4);
    transition: filter .6s ease, box-shadow .6s ease;
}
.tgc-farol .cuerpo b { position: absolute; inset: 22% 30%; border-radius: 50%; background: rgba(255, 240, 180, .55); }
.tgc-farol .borla { width: 6px; height: clamp(20px, 3.2cqh, 34px); background: linear-gradient(180deg, var(--tgc-oro), #c4140c); border-radius: 0 0 3px 3px; }
@keyframes tgcMece { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
.farol-apagado .tgc-farol.der .cuerpo { filter: brightness(.35) saturate(.5); box-shadow: none; }
.farol-apagado .tgc-farol.der { animation-duration: 5s; }
.tgc-chico.farol-apagado .tgc-farol .cuerpo { filter: brightness(.35) saturate(.5); box-shadow: none; }

/* ---------- textos ---------- */
.tgc-sub, .tgc-serie {
    font-family: var(--tg-fuente-titulo, 'Arial Black', sans-serif); font-size: clamp(16px, 2.2cqw, 32px); letter-spacing: .22em;
    color: rgba(255, 220, 160, .25); transition: color .25s, text-shadow .25s; margin-bottom: .5em;
}
.tgc-serie { margin: .55em 0 0; letter-spacing: .16em; }
.tgc-sub.on, .tgc-serie.on { color: #ffe9a8; text-shadow: 2px 2px 0 var(--tgc-tinta), 0 0 14px rgba(255, 200, 80, .55); }

/* ---------- fichas de mahjong ---------- */
.tgc-fichas { display: flex; justify-content: center; gap: clamp(3px, .5cqw, 8px); perspective: 600px; }
.tgc-fichas .esp { width: clamp(10px, 1.6cqw, 26px); }
.tgc-ficha {
    position: relative; display: flex; align-items: center; justify-content: center;
    width: clamp(36px, 5.2cqw, 84px); height: clamp(50px, 7.2cqw, 116px); border-radius: 8px;
    background: linear-gradient(180deg, #fffaf0 0%, #f2e6c8 70%, #d9c79e 100%);
    box-shadow: inset 0 -5px 0 #2e8a52, inset 0 0 0 2px rgba(0, 0, 0, .12), 0 5px 0 #1d5e36, 0 9px 14px rgba(0, 0, 0, .55);
    opacity: 0; transform: translateY(-70cqh) rotate(-14deg);
}
.tgc-ficha b { font-family: var(--tg-fuente-titulo, 'Arial Black', sans-serif); font-weight: normal; font-size: clamp(26px, 4cqw, 66px); color: #c4140c; text-shadow: 1px 1px 0 rgba(255, 255, 255, .7); }
.tgc-fichas.grandes .tgc-ficha { width: clamp(48px, 7cqw, 116px); height: clamp(66px, 9.6cqw, 158px); }
.tgc-fichas.grandes .tgc-ficha b { font-size: clamp(36px, 5.6cqw, 92px); }
.tgc-ficha.on { opacity: 1; transform: none; animation: tgcFichaCae .32s cubic-bezier(.4, 0, .6, 1.4) both; }
@keyframes tgcFichaCae { 0% { opacity: 1; transform: translateY(-46px) rotate(-10deg); } 70% { transform: translateY(4px) rotate(2deg); } 100% { opacity: 1; transform: none; } }
/* nosotros: las fichas laten en dorado */
.nos.festejo .tgc-ficha { animation: tgcFichaLate .5s ease-in-out infinite alternate; }
.nos.festejo .tgc-ficha:nth-child(2n) { animation-delay: .25s; }
@keyframes tgcFichaLate { from { transform: translateY(0); } to { transform: translateY(-6px); box-shadow: inset 0 -5px 0 #c99a10, inset 0 0 0 2px rgba(0, 0, 0, .12), 0 5px 0 #8a6200, 0 0 22px rgba(255, 210, 63, .8); } }
/* ellos: la N se tambalea y se cae */
.tgc-ficha.tambalea { animation: tgcTambalea .22s ease-in-out 4 alternate; transform-origin: 50% 100%; }
@keyframes tgcTambalea { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
.tgc-ficha.cae { transform-origin: 100% 100%; animation: tgcCae 1s cubic-bezier(.5, 0, .9, .6) forwards; }
@keyframes tgcCae { 0% { opacity: 1; transform: none; } 30% { opacity: 1; transform: rotate(90deg); } 100% { opacity: 0; transform: translate(20px, 60cqh) rotate(200deg); } }
.ellos .tgc-ficha { box-shadow: inset 0 -5px 0 #7a1a12, inset 0 0 0 2px rgba(0, 0, 0, .12), 0 5px 0 #4a0c07, 0 9px 14px rgba(0, 0, 0, .55); }
.tgc-chico.ellos.raja .tgc-ficha { filter: grayscale(.5) brightness(.8); transition: filter .8s; }

/* ---------- sobres rojos de la suerte (las buenas, nosotros) ---------- */
.tgc-sobres { position: absolute; bottom: -6cqh; width: clamp(140px, 17cqw, 280px); opacity: 0; transition: transform .7s cubic-bezier(.3, 1.5, .5, 1), opacity .3s; }
.tgc-sobres.izq { left: 12cqw; transform: translateY(40cqh) rotate(-12deg); }
.tgc-sobres.der { right: 12cqw; transform: translateY(40cqh) rotate(12deg) scaleX(-1); }
.festejo .tgc-sobres { opacity: 1; }
.festejo .tgc-sobres.izq { transform: translateY(0) rotate(-12deg); }
.festejo .tgc-sobres.der { transform: translateY(0) rotate(12deg) scaleX(-1); }

/* ---------- medallas del chancho (fin del chico) ---------- */
.tgc-medalla { position: relative; width: clamp(80px, 11cqw, 180px); aspect-ratio: 1; opacity: 0; transform: rotateY(90deg) scale(.6); }
.tgc-medalla img { width: 100%; height: 100%; display: block; border-radius: 50%; }
.medallas-on .tgc-medalla { opacity: 1; transform: none; transition: transform .8s cubic-bezier(.3, 1.4, .5, 1), opacity .2s; }
.medallas-on .tgc-medalla.der { transition-delay: .15s; }
.nos.festejo .tgc-medalla { animation: tgcMoneda 2.4s ease-in-out infinite; }
.nos.festejo .tgc-medalla.der { animation-delay: 1.2s; }
@keyframes tgcMoneda { 0%, 70% { transform: rotateY(0); } 85% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } }
.tgc-medalla .brillo { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; pointer-events: none; }
.tgc-medalla .brillo::after { content: ''; position: absolute; top: -10%; bottom: -10%; width: 30%; left: -40%; transform: skewX(-20deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 240, .75), transparent); }
.nos.festejo .tgc-medalla .brillo::after { animation: tgcBrillo 2s ease-in-out infinite; }
@keyframes tgcBrillo { 0% { left: -40%; } 60%, 100% { left: 120%; } }
.tgc-medalla .grieta { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tgc-medalla .grieta path { fill: none; stroke: #1a0503; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.raja .tgc-medalla .grieta path { stroke-dashoffset: 0; transition: stroke-dashoffset .45s ease-in; }
.raja .tgc-medalla .grieta path:nth-child(2) { transition-delay: .3s; } .raja .tgc-medalla .grieta path:nth-child(3) { transition-delay: .45s; }
.raja .tgc-medalla img { filter: grayscale(.85) brightness(.6); transition: filter 1s .4s; }
.raja .tgc-medalla { animation: tgcSacude .35s ease-in-out 2; }
@keyframes tgcSacude { 25% { transform: translateX(-4px) rotate(-3deg); } 75% { transform: translateX(4px) rotate(3deg); } }
.tgc-centro { display: flex; flex-direction: column; align-items: center; }
.nos.festejo .tgc-placa { animation: tgcPlacaLate .6s ease-in-out infinite alternate; }
@keyframes tgcPlacaLate { to { transform: scale(1.025); } }

/* ---------- lluvia de monedas y papelitos ---------- */
.tgc-lluvia { position: absolute; inset: 0; pointer-events: none; }
.tgc-lluvia i { position: absolute; top: -6cqh; animation-name: tgcCaeLluvia; animation-timing-function: linear; animation-fill-mode: both; }
.tgc-lluvia .moneda { width: clamp(14px, 1.6cqw, 26px); aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle, transparent 0 20%, #fff2a0 21% 32%, #e5b020 33% 70%, #8a5a00 71% 100%);
    }
.tgc-lluvia .moneda::after { content: ''; position: absolute; inset: 38%; background: #3a0603; }
.tgc-lluvia .papel { width: clamp(6px, .7cqw, 11px); height: clamp(10px, 1.2cqw, 18px); background: #e8241a; box-shadow: inset 0 0 0 1px #ffd23f; }
@keyframes tgcCaeLluvia { from { transform: translate(0, 0) rotate(0); } to { transform: translate(var(--x), 112cqh) rotate(var(--giro)); } }

/* ---------- nivel superado: pergamino ---------- */
.tgc-pergamino { position: relative; display: flex; align-items: stretch; filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .7)); }
.tgc-pergamino .rodillo {
    width: clamp(18px, 1.8cqw, 30px); border-radius: 10px; z-index: 2;
    background: linear-gradient(90deg, #3a1406, #8a4a1c 40%, #c98a4a 55%, #5a2408); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .35);
    margin: -14px 0;
}
.tgc-pergamino .papel {
    position: relative; display: flex; align-items: center; gap: clamp(10px, 2cqw, 34px);
    padding: clamp(22px, 4cqh, 46px) clamp(16px, 2.6cqw, 40px);
    background: radial-gradient(ellipse at 50% 50%, #fbf0d4, #ead3a0 75%, #d8b878 100%);
    box-shadow: inset 0 0 0 3px rgba(150, 30, 10, .35), inset 0 0 0 9px rgba(250, 240, 210, .9), inset 0 0 0 11px rgba(150, 30, 10, .5);
    clip-path: inset(0 50% 0 50%);
}
.abre .tgc-pergamino .papel { clip-path: inset(0 0 0 0); transition: clip-path 1.1s cubic-bezier(.6, 0, .3, 1); }
.tgc-caligrafia { height: clamp(120px, 22cqh, 230px); width: auto; opacity: 0; transition: opacity .6s .2s; }
.texto-on .tgc-caligrafia { opacity: .85; }
.tgc-perg-texto { text-align: center; line-height: 1.05; opacity: 0; transform: scale(.92); transition: opacity .5s, transform .5s cubic-bezier(.3, 1.5, .5, 1); }
.texto-on .tgc-perg-texto { opacity: 1; transform: none; }
.tgc-perg-sub { font-family: var(--tg-fuente-titulo, 'Arial Black', sans-serif); font-size: clamp(14px, 2cqw, 28px); letter-spacing: .26em; color: #7a1a0c; }
.tgc-perg-titulo { font-family: var(--tg-fuente-titulo, 'Arial Black', sans-serif); font-size: clamp(40px, 7.2cqw, 118px); color: #c4140c; margin: .12em 0;
    text-shadow: 3px 3px 0 #f6c945, 5px 5px 0 rgba(60, 10, 5, .55); white-space: nowrap; }
.tgc-perg-serie { font-family: var(--tg-fuente-pizarron, 'Comic Sans MS', cursive); font-size: clamp(16px, 2.1cqw, 30px); color: #3a1206; }
/* sello rojo (como el de un artista chino) que se estampa */
.tgc-sello {
    position: absolute; right: 24%; bottom: clamp(8px, 1.6cqh, 18px);   /* entre el texto y la caligrafía de la derecha */
    font-family: var(--tg-fuente-titulo, 'Arial Black', sans-serif); font-size: clamp(16px, 2cqw, 30px); color: #fff3e0;
    padding: .25em .4em; border-radius: 6px; background: #c4140c; box-shadow: inset 0 0 0 3px #fff3e0, inset 0 0 0 5px #c4140c;
    transform: rotate(-12deg) scale(3); opacity: 0;
}
.sello-on .tgc-sello { opacity: .92; transform: rotate(-12deg) scale(1); transition: transform .25s cubic-bezier(.5, 0, .7, 1.6), opacity .1s; }
/* las dos damas, a los costados */
.tgc-dama { position: absolute; bottom: 4cqh; height: clamp(220px, 52cqh, 560px); width: auto; opacity: 0; transition: opacity .8s, transform 1s cubic-bezier(.2, .9, .3, 1); pointer-events: none; }
.tgc-dama.izq { left: 1.5cqw; transform: translateX(-12cqw); }
.tgc-dama.der { right: 1.5cqw; transform: translateX(12cqw); }
.damas-on .tgc-dama { opacity: 1; transform: none; }
@keyframes tgcSiguiente { to { transform: translateX(18px); } }
.tgc-capa .tg-chico-boton, .tgc-boton { opacity: 0; transform: translateY(14px); transition: opacity .4s, transform .4s cubic-bezier(.3, 1.5, .5, 1); }
.tgc-capa.pie-on .tgc-boton { opacity: 1; transform: none; }
.tgc-chico .tg-chico-boton { opacity: 1; transform: none; }   /* el del chico ya lo maneja .tg-chico-pie */

@media (max-width: 700px) {
    .tgc-farol { display: none; }
    .tgc-caligrafia { display: none; }
    .tgc-dama { height: 30cqh; opacity: .6; }
}