/* =====================================================================
   CARTELES DEL NIVEL 4, EL POTRERO (js/ui/carteles_potrero.js)
   Cartel de cancha de barrio: pasto con rayas de corte, línea de cal con arcos de córner en las esquinas y letras en parches de pelota
   (pentágonos blancos / negros / celestes / dorados) que bajan rebotando. Objetos del autor en img/carteles/nivel4/:
   jugador, pelota con estela, copa, arquero, pelota con botín y fernet. Misma estructura que los del nivel 3 (carteles_cumple.css).
   Sin desenfoques animados: solo transform y opacidad.
   ===================================================================== */
.tgc4-capa {
    --tgc4-cal: #fff; --tgc4-celeste: #75aadb; --tgc4-oro: #ffc83d; --tgc4-tinta: #0d1a10;
    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(14, 58, 26, .55), rgba(2, 10, 5, .93));
    opacity: 0; transition: opacity .3s ease;
}
.tgc4-capa.visible { opacity: 1; }

/* reflectores de la canchita: dos conos de luz que caen desde arriba */
.tgc4-capa::before, .tgc4-capa::after {
    content: ''; position: absolute; top: -6cqh; width: 46cqw; height: 118cqh; pointer-events: none; opacity: 0; transition: opacity .9s ease .2s;
    background: linear-gradient(180deg, rgba(255, 244, 200, .22), rgba(255, 244, 200, 0) 78%);
}
.tgc4-capa::before { left: -4cqw; clip-path: polygon(14% 0, 30% 0, 86% 100%, 0 100%); }
.tgc4-capa::after { right: -4cqw; clip-path: polygon(70% 0, 86% 0, 100% 100%, 14% 100%); }
.tgc4-capa.visible::before, .tgc4-capa.visible::after { opacity: 1; }

/* red de arco colgada arriba de todo (reemplaza a la guirnalda del cumple) */
.tgc4-red {
    position: absolute; top: -4cqh; left: 50%; width: min(64cqw, 760px); height: 15cqh; transform: translate(-50%, -110%); transform-origin: 50% 0;
    transition: transform .7s cubic-bezier(.3, 1.4, .5, 1); pointer-events: none;
    background:
        repeating-linear-gradient(45deg, rgba(255, 255, 255, .55) 0 2px, transparent 2px 15px),
        repeating-linear-gradient(-45deg, rgba(255, 255, 255, .55) 0 2px, transparent 2px 15px);
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent);
}
.visible .tgc4-red { transform: translate(-50%, 0); animation: tgc4Red 3.2s ease-in-out .8s infinite alternate; }
@keyframes tgc4Red { from { transform: translate(-50%, 0) skewX(-1deg); } to { transform: translate(-50%, 4px) skewX(1deg); } }
/* gol: la red se infla y se sacude; perdimos: queda colgando */
.gol .tgc4-red { animation: tgc4Gol .5s ease-out 2; }
@keyframes tgc4Gol { 0% { transform: translate(-50%, 0) scaleY(1); } 35% { transform: translate(-50%, 0) scaleY(1.45) skewX(3deg); } 100% { transform: translate(-50%, 0) scaleY(1); } }
.tgc4-chico.desinfla .tgc4-red { animation: none; transform: translate(-50%, 2cqh) rotate(-2deg); transition: transform 1.2s ease-in; }

/* ---------- la cancha (el cartel) ---------- */
.tgc4-cancha {
    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(255, 255, 255, .07) 0 clamp(36px, 5cqw, 80px), transparent clamp(36px, 5cqw, 80px) clamp(72px, 10cqw, 160px)),
        linear-gradient(180deg, #3a9d45 0%, #2a7d36 100%);
    border: 5px solid #fff;
    box-shadow: 0 0 0 4px var(--tgc4-celeste), 0 0 0 8px #fff, 0 0 0 12px var(--tgc4-celeste), 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 .tgc4-cancha { transform: none; opacity: 1; }
/* línea de cal punteada por dentro */
.tgc4-cancha::before { content: ''; position: absolute; inset: 10px; border: 2px dashed rgba(255, 255, 255, .6); border-radius: 11px; pointer-events: none; }
/* círculo central, apenas insinuado detrás de las letras */
.tgc4-cancha::after { content: ''; position: absolute; left: 50%; top: 50%; width: min(34cqh, 24cqw); aspect-ratio: 1; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .22);
    transform: translate(-50%, -50%); pointer-events: none; }
.tgc4-cancha.ancho { display: flex; align-items: center; gap: clamp(10px, 2cqw, 36px); }

/* arcos de córner en las cuatro esquinas */
.tgc4-corner { position: absolute; width: clamp(34px, 4.2cqw, 64px); aspect-ratio: 1; pointer-events: none; border: 3px solid rgba(255, 255, 255, .85); border-top: 0; border-left: 0;
    border-radius: 0 0 100% 0; animation: tgc4Late 2.6s ease-in-out infinite alternate; }
.tgc4-corner.a { left: 8px; top: 8px; transform: rotate(180deg); } .tgc4-corner.b { right: 8px; top: 8px; transform: rotate(270deg); }
.tgc4-corner.c { left: 8px; bottom: 8px; transform: rotate(90deg); } .tgc4-corner.d { right: 8px; bottom: 8px; }
@keyframes tgc4Late { from { opacity: .55; } to { opacity: 1; } }

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

/* ---------- letras en parches de pelota ---------- */
.tgc4-hilo { position: relative; display: flex; justify-content: center; gap: clamp(2px, .35cqw, 6px); }
.tgc4-hilo .esp { width: clamp(10px, 1.6cqw, 26px); }
.tgc4-letra {
    position: relative; display: block; width: clamp(40px, 5.2cqw, 86px); height: clamp(46px, 5.9cqw, 98px);
    transform-origin: 50% 100%; opacity: 0; transform: translateY(-70cqh);
    background: var(--tgc4-tinta); clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%);   /* el borde: pentágono oscuro */
}
.tgc4-letra::before {   /* el parche */
    content: ''; position: absolute; inset: 4px; background: var(--c); clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%);
}
.tgc4-letra b {
    position: absolute; left: 0; right: 0; top: 24%; text-align: center; font-family: var(--tg-fuente-titulo, 'Arial Black', sans-serif); font-weight: normal;
    font-size: clamp(20px, 3cqw, 50px); color: var(--t);
}
.tgc4-hilo.grandes .tgc4-letra { width: clamp(46px, 5.8cqw, 100px); height: clamp(52px, 6.7cqw, 114px); }
.tgc4-hilo.grandes .tgc4-letra b { font-size: clamp(24px, 3.5cqw, 60px); }
.tgc4-letra.on { opacity: 1; transform: none; animation: tgc4Baja .75s cubic-bezier(.3, 1, .5, 1) both, tgc4Mece 2.4s ease-in-out .8s infinite alternate; animation-delay: 0s, var(--d); }
/* baja y rebota como una pelota: dos botes que se achican */
@keyframes tgc4Baja {
    0% { opacity: 1; transform: translateY(-70cqh) rotate(-30deg); animation-timing-function: cubic-bezier(.5, 0, 1, .6); }
    45% { transform: translateY(0) rotate(0) scale(1.1, .86); animation-timing-function: cubic-bezier(0, .5, .5, 1); }
    62% { transform: translateY(-9cqh) rotate(4deg) scale(.96, 1.05); animation-timing-function: cubic-bezier(.5, 0, 1, .6); }
    78% { transform: translateY(0) scale(1.05, .93); animation-timing-function: cubic-bezier(0, .5, .5, 1); }
    90% { transform: translateY(-2cqh); }
    100% { opacity: 1; transform: none; }
}
@keyframes tgc4Mece { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }
.nos.festejo .tgc4-letra.on { animation: tgc4Baja .75s both, tgc4Salta .4s ease-in-out infinite alternate; animation-delay: 0s, var(--d); }
@keyframes tgc4Salta { from { transform: rotate(-5deg); } to { transform: translateY(-9px) rotate(5deg); } }
/* perdimos: los parches se apagan y se escurren hacia abajo */
.ellos.cierra .tgc4-letra.on { animation: tgc4Baja .75s both, tgc4Cabizbajo 1.6s ease-in-out infinite alternate; animation-delay: 0s, var(--d); filter: grayscale(.7) brightness(.8); }
@keyframes tgc4Cabizbajo { from { transform: rotate(-2deg); } to { transform: translateY(4px) rotate(2deg); } }

/* ---------- confeti ---------- */
.tgc4-papel { position: absolute; inset: 0; pointer-events: none; }
.tgc4-papel i { position: absolute; top: -5cqh; width: clamp(7px, .8cqw, 12px); height: clamp(10px, 1.1cqw, 16px); animation-name: tgc4CaePapel; animation-timing-function: linear; animation-fill-mode: both; }
@keyframes tgc4CaePapel { from { transform: translate(0, 0) rotate(0); } to { transform: translate(var(--x), 112cqh) rotate(var(--giro)); } }

/* ---------- objetos del autor ---------- */
.tgc4-objeto { display: block; width: auto; pointer-events: none; }
/* fin del chico: el jugador a la izquierda y, a la derecha, la pelota con botín (ganamos) o el arquero (perdimos) */
.tgc4-lado { flex: 0 0 auto; display: flex; align-items: flex-end; justify-content: center; opacity: 0; }
.tgc4-lado.izq { transform: translateX(-9cqw); } .tgc4-lado.der { transform: translateX(9cqw); }
.tgc4-lado .tgc4-objeto { height: clamp(110px, 25cqh, 270px); }
.tgc4-lado.der .tgc4-objeto.arq { height: clamp(100px, 22cqh, 240px); }
.jugadores-on .tgc4-lado { opacity: 1; transform: none; transition: transform .7s cubic-bezier(.3, 1.4, .5, 1), opacity .25s; }
.jugadores-on .tgc4-lado.der { transition-delay: .15s; }
.nos.festejo .tgc4-lado.izq .tgc4-objeto { animation: tgc4Patea .55s ease-in-out infinite alternate; transform-origin: 50% 100%; }
.nos.festejo .tgc4-lado.der .tgc4-objeto { animation: tgc4Patea .55s ease-in-out .27s infinite alternate-reverse; transform-origin: 50% 100%; }
@keyframes tgc4Patea { from { transform: rotate(-4deg) translateY(0); } to { transform: rotate(4deg) translateY(-6px); } }
.ellos.cierra .tgc4-lado.izq .tgc4-objeto { filter: grayscale(.9) brightness(.7); transform: translateY(10px) rotate(7deg); transition: transform .9s ease-in, filter .8s; transform-origin: 50% 100%; }
.ellos.cierra .tgc4-lado.der { transition: transform .9s ease-in; }
/* arquero: aparece con un salto (pedido: "nos la atajaron") */
.tgc4-lado.der .arq { transform: scale(.3) rotate(-15deg); transition: transform .5s cubic-bezier(.3, 1.8, .5, 1); transform-origin: 50% 100%; }
.cierra .tgc4-lado.der .arq { transform: none; }

/* la pelota con estela cruza la pantalla: gol (de abajo-izquierda hacia el arco) o atajada (llega, rebota y cae) */
.tgc4-pase { position: absolute; left: 50%; top: 50%; height: clamp(110px, 24cqh, 260px); width: auto; pointer-events: none; opacity: 0; will-change: transform, opacity; }
.gol .tgc4-pase { animation: tgc4Pase 1.1s cubic-bezier(.3, .1, .4, 1) forwards; }
@keyframes tgc4Pase {
    0% { opacity: 1; transform: translate(-90cqw, 38cqh) scale(.5) rotate(0); }
    100% { opacity: 1; transform: translate(40cqw, -42cqh) scale(1.05) rotate(0); }
}
.atajada .tgc4-pase { animation: tgc4Ataja 1.6s cubic-bezier(.3, .1, .4, 1) forwards; }
@keyframes tgc4Ataja {
    0% { opacity: 1; transform: translate(-90cqw, 30cqh) scale(.5); }
    45% { opacity: 1; transform: translate(-6cqw, 8cqh) scale(.8); }
    55% { opacity: 1; transform: translate(-10cqw, 10cqh) scale(.78) rotate(-8deg); }
    100% { opacity: 0; transform: translate(-24cqw, 52cqh) scale(.6) rotate(-40deg); }
}

/* ---------- nivel superado: la mesa del potrero ---------- */
.tgc4-cancha.grande { padding-bottom: clamp(26px, 4.8cqh, 52px); }
.tgc4-superado .tgc4-letra { width: clamp(30px, 3.8cqw, 62px); height: clamp(34px, 4.4cqw, 72px); }
.tgc4-superado .tgc4-letra b { font-size: clamp(15px, 2.2cqw, 36px); top: 26%; }
.tgc4-superado .tgc4-hilo .esp { width: clamp(6px, 1cqw, 16px); }
.tgc4-mesa { display: flex; align-items: flex-end; justify-content: center; gap: clamp(14px, 3.6cqw, 60px); opacity: 0; transform: translateY(30px); transition: opacity .5s, transform .6s cubic-bezier(.3, 1.4, .5, 1); }
.mesa-on .tgc4-mesa { opacity: 1; transform: none; }
.tgc4-mesa .tgc4-objeto.fer { height: clamp(90px, 20cqh, 200px); }
.tgc4-mesa .tgc4-objeto.bot { height: clamp(80px, 17cqh, 170px); }
.tgc4-mesa .tgc4-objeto.cop { height: clamp(150px, 33cqh, 340px); transform: translateY(40px) scale(.6); transform-origin: 50% 100%; opacity: 0; }
.copa-on .tgc4-mesa .tgc4-objeto.cop { opacity: 1; transform: none; transition: transform .8s cubic-bezier(.3, 1.6, .5, 1), opacity .3s; }
.nos.festejo .tgc4-mesa .tgc4-objeto.cop { animation: tgc4Late2 .7s ease-in-out infinite alternate; transform-origin: 50% 100%; }
@keyframes tgc4Late2 { from { transform: rotate(-2deg); } to { transform: scale(1.04) rotate(2deg); } }
.nos.festejo .tgc4-cancha { animation: tgc4Pulso .6s ease-in-out infinite alternate; }
@keyframes tgc4Pulso { to { transform: scale(1.025); } }
.tgc4-boton { opacity: 0; transform: translateY(14px); transition: opacity .4s, transform .4s cubic-bezier(.3, 1.5, .5, 1); }
.tgc4-capa.pie-on .tgc4-boton { opacity: 1; transform: none; }

@media (max-width: 700px) {
    .tgc4-lado .tgc4-objeto { height: 15cqh; }
    .tgc4-corner { width: 28px; }
}

/* ---------- las buenas: la N se suelta del parche y cae (ellos) ---------- */
.tgc4-buenas { pointer-events: none; }
.tgc4-capa .tgc4-letra.on.cuelga { animation: tgc4Cuelga .5s ease-in-out infinite alternate; transform-origin: 0 0; }
@keyframes tgc4Cuelga { from { transform: rotate(-14deg); } to { transform: rotate(10deg); } }
.tgc4-capa.ellos .tgc4-letra.on.cae { transform-origin: 0 0; animation: tgc4CaeN 1.1s cubic-bezier(.5, 0, .9, .6) forwards; animation-delay: 0s; }
@keyframes tgc4CaeN { 0% { transform: rotate(-14deg); } 100% { transform: translateY(46cqh) rotate(70deg); opacity: 0; } }