/* =====================================================================
   CARTELES DEL NIVEL 3, EL CUMPLE (js/ui/carteles_cumple.js)
   Mantel claro con encaje de ñandutí, banderines del autor, letras en banderines de tela, globos, papel picado y abanicos.
   Sin desenfoques animados: solo transform y opacidad.
   ===================================================================== */
.tgc3-capa {
    --tgc3-tinta: #3a1f0c; --tgc3-rojo: #e5483b; --tgc3-azul: #2a5aa8;
    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% 42%, rgba(60, 34, 10, .5), rgba(8, 5, 2, .9));
    opacity: 0; transition: opacity .3s ease;
}
.tgc3-capa.visible { opacity: 1; }
.tgc3-buenas { pointer-events: none; }

/* guirnalda de banderines del autor, colgada arriba de todo */
.tgc3-guirnalda { position: absolute; top: -5cqh; left: 50%; width: min(64cqw, 760px); transform: translate(-50%, -110%); transition: transform .7s cubic-bezier(.3, 1.4, .5, 1); pointer-events: none; }
.visible .tgc3-guirnalda { transform: translate(-50%, 0); animation: tgc3Guirnalda 3.2s ease-in-out .8s infinite alternate; transform-origin: 50% 0; }
@keyframes tgc3Guirnalda { from { transform: translate(-50%, 0) rotate(-.6deg); } to { transform: translate(-50%, 4px) rotate(.6deg); } }
.revienta .tgc3-guirnalda, .tgc3-chico.desinfla .tgc3-guirnalda { animation: none; transform: translate(-50%, 2cqh) rotate(-2deg); transition: transform 1.2s ease-in; }

/* ---------- el mantel ---------- */
.tgc3-mantel {
    position: relative; text-align: center; line-height: 1;
    padding: clamp(24px, 4.6cqh, 50px) clamp(28px, 4.2cqw, 72px) clamp(22px, 4cqh, 44px);
    border-radius: 18px;
    background:
        repeating-linear-gradient(90deg, rgba(229, 72, 59, .06) 0 14px, transparent 14px 28px),
        repeating-linear-gradient(0deg, rgba(42, 90, 168, .05) 0 14px, transparent 14px 28px),
        linear-gradient(180deg, #fffaf0 0%, #f6e7c6 100%);
    border: 5px solid #fff;
    box-shadow: 0 0 0 4px var(--tgc3-rojo), 0 0 0 8px #fff, 0 0 0 12px var(--tgc3-azul), 0 18px 40px rgba(0, 0, 0, .7);
    transform: translateY(40px) scale(.92); opacity: 0;
    transition: transform .5s cubic-bezier(.3, 1.5, .5, 1), opacity .3s ease;
}
.visible .tgc3-mantel { transform: none; opacity: 1; }
/* costura punteada por dentro */
.tgc3-mantel::before { content: ''; position: absolute; inset: 10px; border: 2px dashed rgba(229, 72, 59, .55); border-radius: 11px; pointer-events: none; }
.tgc3-mantel.ancho { display: flex; align-items: center; gap: clamp(10px, 2cqw, 36px); }

/* encaje de ñandutí en las cuatro esquinas */
.tgc3-nanduti { position: absolute; width: clamp(70px, 9cqw, 140px); height: auto; pointer-events: none; opacity: .9;
    animation: tgc3Gira 40s linear infinite; }
.tgc3-nanduti line, .tgc3-nanduti path, .tgc3-nanduti circle { fill: none; stroke: #fff; stroke-width: .9; }
.tgc3-nanduti circle { fill: rgba(255, 255, 255, .9); stroke: none; }
.tgc3-nanduti.a { left: -3.2cqw; top: -3.2cqw; } .tgc3-nanduti.b { right: -3.2cqw; top: -3.2cqw; animation-direction: reverse; }
.tgc3-nanduti.c { left: -3.2cqw; bottom: -3.2cqw; animation-direction: reverse; } .tgc3-nanduti.d { right: -3.2cqw; bottom: -3.2cqw; }
.tgc3-nanduti { filter: drop-shadow(0 0 1px rgba(150, 40, 20, .9)) drop-shadow(0 2px 2px rgba(0, 0, 0, .35)); }
@keyframes tgc3Gira { to { transform: rotate(360deg); } }

/* ---------- textos ---------- */
.tgc3-sub, .tgc3-serie {
    font-family: var(--tg-fuente-titulo, 'Arial Black', sans-serif); font-size: clamp(16px, 2.2cqw, 32px); letter-spacing: .22em;
    color: rgba(58, 31, 12, .2); transition: color .25s; margin-bottom: .55em;
}
.tgc3-serie { margin: .65em 0 0; letter-spacing: .16em; }
.tgc3-sub.on, .tgc3-serie.on { color: var(--tgc3-tinta); }
.tgc3-superado .tgc3-serie { font-family: var(--tg-fuente-pizarron, 'Comic Sans MS', cursive); letter-spacing: .04em; text-transform: none; }

/* ---------- letras en banderines colgados de un hilo ---------- */
.tgc3-hilo { position: relative; display: flex; justify-content: center; gap: clamp(2px, .35cqw, 6px); padding-top: 6px; }
.tgc3-hilo::before { content: ''; position: absolute; left: -2%; right: -2%; top: 4px; height: 3px; border-radius: 3px; background: #8a5a2a; box-shadow: 0 1px 0 rgba(0, 0, 0, .25); }
.tgc3-hilo .esp { width: clamp(10px, 1.6cqw, 26px); }
.tgc3-letra {
    position: relative; display: block; width: clamp(38px, 5.4cqw, 88px); height: clamp(52px, 7.4cqw, 120px);
    transform-origin: 50% 0; opacity: 0; transform: translateY(-60cqh);
}
.tgc3-letra::before {   /* la tela del banderín */
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, .25), transparent 45%), var(--c);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .25));
}
.tgc3-letra b {
    position: absolute; left: 0; right: 0; top: 10%; text-align: center;
    font-family: var(--tg-fuente-titulo, 'Arial Black', sans-serif); font-weight: normal; font-size: clamp(22px, 3.3cqw, 54px);
    color: #fff; text-shadow: 2px 2px 0 var(--tgc3-tinta), -1px -1px 0 var(--tgc3-tinta), 1px -1px 0 var(--tgc3-tinta), -1px 1px 0 var(--tgc3-tinta);
}
.tgc3-letra[style*="#f4f1e8"] b, .tgc3-letra[style*="#f6c23e"] b { color: var(--tgc3-rojo); text-shadow: 1px 1px 0 #fff; }
.tgc3-hilo.grandes .tgc3-letra { width: clamp(44px, 6cqw, 104px); height: clamp(60px, 8.2cqw, 142px); }
.tgc3-hilo.grandes .tgc3-letra b { font-size: clamp(26px, 3.8cqw, 66px); }
.tgc3-letra.on { opacity: 1; transform: none; animation: tgc3Baja .55s cubic-bezier(.3, 1.6, .5, 1) both, tgc3Mece 2.4s ease-in-out .6s infinite alternate; animation-delay: 0s, var(--d); }
@keyframes tgc3Baja { 0% { opacity: 1; transform: translateY(-40px) rotate(-18deg); } 100% { opacity: 1; transform: none; } }
@keyframes tgc3Mece { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
.nos.festejo .tgc3-letra.on { animation: tgc3Baja .55s both, tgc3Salta .45s ease-in-out infinite alternate; animation-delay: 0s, var(--d); }
@keyframes tgc3Salta { from { transform: rotate(-6deg); } to { transform: translateY(-5px) rotate(6deg); } }
/* ellos: el banderín de la N se suelta de un lado y se cae */
.tgc3-letra.cuelga { animation: tgc3Cuelga .5s ease-in-out infinite alternate; transform-origin: 0 0; }
@keyframes tgc3Cuelga { from { transform: rotate(30deg); } to { transform: rotate(52deg); } }
.tgc3-letra.cae { transform-origin: 0 0; animation: tgc3Cae 1.1s cubic-bezier(.5, 0, .9, .6) forwards; }
@keyframes tgc3Cae { 0% { opacity: 1; transform: rotate(52deg); } 100% { opacity: 0; transform: translate(-20px, 60cqh) rotate(160deg); } }

/* ---------- globos y papel picado ---------- */
.tgc3-globos, .tgc3-papel { position: absolute; inset: 0; pointer-events: none; }
.tgc3-globos i {
    position: absolute; bottom: -18cqh; width: calc(clamp(34px, 3.6cqw, 60px) * var(--e)); aspect-ratio: .82; border-radius: 50% 50% 48% 48% / 55% 55% 45% 45%;
    background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .7) 0 8%, transparent 9%), var(--c);
    box-shadow: inset -6px -8px 0 rgba(0, 0, 0, .14);
    animation-name: tgc3Sube; animation-timing-function: ease-in; animation-fill-mode: both;
}
.tgc3-globos i::after { content: ''; position: absolute; left: 50%; top: 100%; width: 1px; height: 7cqh; background: rgba(255, 255, 255, .6); }
@keyframes tgc3Sube { from { transform: translate(0, 0); } to { transform: translate(var(--x), -130cqh); } }
.tgc3-papel i { position: absolute; top: -5cqh; width: clamp(7px, .8cqw, 12px); height: clamp(10px, 1.1cqw, 16px); animation-name: tgc3CaePapel; animation-timing-function: linear; animation-fill-mode: both; }
@keyframes tgc3CaePapel { from { transform: translate(0, 0) rotate(0); } to { transform: translate(var(--x), 112cqh) rotate(var(--giro)); } }
/* el globo que revienta (las buenas de ellos) */
.tgc3-globo-solo { position: absolute; right: 14cqw; top: 16cqh; width: clamp(50px, 5cqw, 80px); aspect-ratio: .82; border-radius: 50% 50% 48% 48% / 55% 55% 45% 45%;
    background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .7) 0 8%, transparent 9%), #2a5aa8; animation: tgc3Flota 2s ease-in-out infinite alternate; }
@keyframes tgc3Flota { to { transform: translateY(-10px); } }
.revienta .tgc3-globo-solo { animation: tgc3Revienta .18s ease-out forwards; }
@keyframes tgc3Revienta { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.7); opacity: 0; } }
/* perdimos: globos desinflados que caen */
.tgc3-desinflados { position: absolute; inset: 0; pointer-events: none; }
.tgc3-desinflados i { position: absolute; top: 14cqh; width: clamp(40px, 4cqw, 66px); aspect-ratio: .82; border-radius: 50% 50% 48% 48% / 55% 55% 45% 45%; background: #e5483b; opacity: .95; }
.tgc3-desinflados i:nth-child(1) { left: 10cqw; } .tgc3-desinflados i:nth-child(2) { left: 22cqw; top: 9cqh; background: #f6c23e; } .tgc3-desinflados i:nth-child(3) { right: 12cqw; background: #2f9a5a; }
.desinfla .tgc3-desinflados i { animation: tgc3Desinfla 1.4s ease-in forwards; }
.desinfla .tgc3-desinflados i:nth-child(2) { animation-delay: .2s; } .desinfla .tgc3-desinflados i:nth-child(3) { animation-delay: .4s; }
@keyframes tgc3Desinfla { 0% { transform: none; } 40% { transform: translateY(6cqh) scale(.6, .45) rotate(25deg); } 100% { transform: translateY(80cqh) scale(.4, .3) rotate(80deg); opacity: .7; } }

/* ---------- abanicos (fin del chico) ---------- */
.tgc3-abanico { width: clamp(80px, 11.5cqw, 190px); transform-origin: 50% 92%; transform: scaleX(.06) rotate(0); opacity: 0; }
.tgc3-abanico img { width: 100%; display: block; }
.abanicos-on .tgc3-abanico { opacity: 1; transform: none; transition: transform .7s cubic-bezier(.3, 1.4, .5, 1), opacity .2s; }
.abanicos-on .tgc3-abanico.der { transition-delay: .15s; }
.nos.festejo .tgc3-abanico.izq { animation: tgc3Abanica .5s ease-in-out infinite alternate; }
.nos.festejo .tgc3-abanico.der { animation: tgc3Abanica .5s ease-in-out .25s infinite alternate-reverse; }
@keyframes tgc3Abanica { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }
.cierra .tgc3-abanico { transform: scaleX(.12) rotate(18deg) translateY(10px); transition: transform .8s ease-in; }
.cierra .tgc3-abanico img { filter: grayscale(.85) brightness(.75); transition: filter .8s; }
.tgc3-centro { display: flex; flex-direction: column; align-items: center; }
.nos.festejo .tgc3-mantel { animation: tgc3Late .6s ease-in-out infinite alternate; }
@keyframes tgc3Late { to { transform: scale(1.025); } }

/* ---------- nivel superado: la mesa del cumple ---------- */
.tgc3-mantel.grande { padding-bottom: clamp(26px, 4.8cqh, 52px); }
.tgc3-naranjas { position: absolute; top: -4cqh; height: clamp(160px, 34cqh, 380px); width: auto; opacity: 0; transition: opacity .6s, transform 1s cubic-bezier(.2, .9, .3, 1); pointer-events: none; }
.tgc3-naranjas.izq { left: -1cqw; transform: translateY(-20cqh) rotate(-8deg); }
.tgc3-naranjas.der { right: -1cqw; transform: translateY(-20cqh) scaleX(-1) rotate(-8deg); }
.visible .tgc3-naranjas.izq { opacity: 1; transform: rotate(-8deg); }
.visible .tgc3-naranjas.der { opacity: 1; transform: scaleX(-1) rotate(-8deg); }
.tgc3-mesa { display: flex; align-items: flex-end; justify-content: center; gap: clamp(14px, 3cqw, 50px); opacity: 0; transform: translateY(30px); transition: opacity .5s, transform .6s cubic-bezier(.3, 1.4, .5, 1); }
.mesa-on .tgc3-mesa { opacity: 1; transform: none; }
.tgc3-comida.bori { height: clamp(80px, 15cqh, 170px); }
.tgc3-comida.sopa { height: clamp(80px, 15cqh, 170px); }
/* torta de cumpleaños con velitas */
.tgc3-torta { position: relative; width: clamp(110px, 12cqw, 190px); height: clamp(70px, 10cqh, 120px); border-radius: 12px 12px 8px 8px;
    background: linear-gradient(180deg, #fff 0 18%, #f7a8c0 18% 26%, #fff3e0 26% 58%, #f7a8c0 58% 66%, #fff3e0 66% 100%);
    box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .1), 0 8px 0 #c98a4a, 0 10px 16px rgba(0, 0, 0, .4); display: flex; justify-content: space-evenly; }
.tgc3-torta .vela { position: relative; top: -34%; width: 9px; height: 40%; border-radius: 3px; background: repeating-linear-gradient(45deg, #2a5aa8 0 4px, #fff 4px 8px); }
.tgc3-torta .vela b { position: absolute; left: 50%; bottom: 100%; width: 12px; height: 18px; margin-left: -6px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    background: radial-gradient(circle at 50% 70%, #fff7c0, #ffb300 55%, rgba(255, 90, 0, 0) 75%); opacity: 0; transform: scale(.3); transform-origin: 50% 100%; }
.velas-on .tgc3-torta .vela b { opacity: 1; transform: scale(1); transition: transform .3s, opacity .2s; animation: tgc3Llama .25s ease-in-out .3s infinite alternate; }
.velas-on .tgc3-torta .vela:nth-child(2) b { transition-delay: .15s; } .velas-on .tgc3-torta .vela:nth-child(3) b { transition-delay: .3s; }
@keyframes tgc3Llama { from { transform: scale(1, 1) rotate(-3deg); } to { transform: scale(.9, 1.12) rotate(3deg); } }
@keyframes tgc3Siguiente { to { transform: translateX(18px); } }
.tgc3-boton { opacity: 0; transform: translateY(14px); transition: opacity .4s, transform .4s cubic-bezier(.3, 1.5, .5, 1); }
.tgc3-capa.pie-on .tgc3-boton { opacity: 1; transform: none; }

@media (max-width: 700px) {
    .tgc3-nanduti { width: 60px; }
    .tgc3-naranjas { height: 22cqh; opacity: .7; }
}
/* "¡NIVEL SUPERADO!" tiene 16 banderines: más angostos para que el mantel no ocupe todo el ancho */
.tgc3-superado .tgc3-letra { width: clamp(28px, 3.9cqw, 64px); height: clamp(40px, 5.6cqw, 92px); }
.tgc3-superado .tgc3-letra b { font-size: clamp(18px, 2.5cqw, 42px); }
.tgc3-superado .tgc3-hilo .esp { width: clamp(6px, 1cqw, 16px); }