/* =====================================================================
   CARTELES DEL NIVEL 5, LA TERMINAL (js/ui/carteles_terminal.js)
   Tablero de partidas de la terminal de omnibus: panel azul noche con borde ambar y franja de peligro, fichas negras con letras ambar que
   giran al caer, luces de techo y la ruta abajo. Objetos del autor en img/carteles/nivel5/: valija, fotos, isla, castillo, sombrilla,
   cartel BEACH y cuatro micros. Misma estructura que los del nivel 4 (carteles_potrero.css). Sin desenfoques animados: solo transform y opacidad.
   ===================================================================== */
.tgc5-capa {
    --tgc5-ambar: #ffc83d; --tgc5-tinta: #0b1424; --tgc5-azul: #12294a;
    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% 38%, rgba(26, 52, 92, .6), rgba(3, 7, 16, .94));
    opacity: 0; transition: opacity .3s ease;
}
.tgc5-capa.visible { opacity: 1; }

/* luces de techo de la terminal y ruta abajo */
.tgc5-luces {
    position: absolute; top: 0; left: 0; right: 0; height: 11cqh; pointer-events: none;
    background:
        radial-gradient(circle at 50% 3.2cqh, #fff6c9 0 .55cqh, rgba(255, 230, 150, .4) .55cqh 1.6cqh, transparent 1.9cqh) 0 0 / 14cqw 11cqh repeat-x,
        linear-gradient(180deg, rgba(0, 0, 0, .75), transparent);
    animation: tgc5Luz 3.4s ease-in-out infinite alternate;
}
@keyframes tgc5Luz { from { opacity: .7; } to { opacity: 1; } }
.tgc5-ruta { position: absolute; left: 0; right: 0; bottom: 0; height: 11cqh; pointer-events: none; background: linear-gradient(180deg, #232733, #12151d); border-top: 4px solid #3a3f4d; overflow: hidden; }
.tgc5-ruta i { position: absolute; left: 0; right: 0; top: 48%; height: 5px; background: repeating-linear-gradient(90deg, #ffc83d 0 60px, transparent 60px 120px); animation: tgc5Raya 1.4s linear infinite; }
@keyframes tgc5Raya { to { transform: translateX(-120px); } }

/* ---------- el tablero (el cartel) ---------- */
.tgc5-cancha {
    position: relative; text-align: center; line-height: 1;
    padding: clamp(30px, 5.2cqh, 56px) clamp(28px, 4.2cqw, 72px) clamp(22px, 4cqh, 44px);
    border-radius: 14px;
    background: linear-gradient(180deg, #17345c 0%, #0d1d36 100%);
    border: 5px solid var(--tgc5-ambar);
    box-shadow: 0 0 0 4px var(--tgc5-tinta), 0 0 0 8px #e9edf5, 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 .tgc5-cancha { transform: none; opacity: 1; }
/* franja de peligro arriba */
.tgc5-cancha::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 13px; border-radius: 8px 8px 0 0;
    background: repeating-linear-gradient(45deg, var(--tgc5-ambar) 0 14px, #111 14px 28px); }
.tgc5-cancha.ancho { display: flex; align-items: center; gap: clamp(10px, 2cqw, 36px); }
.tgc5-remache { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #8a93a6 60%, #3b4356); box-shadow: 0 1px 2px #000; }
.tgc5-remache.a { left: 12px; top: 22px; } .tgc5-remache.b { right: 12px; top: 22px; } .tgc5-remache.c { left: 12px; bottom: 12px; } .tgc5-remache.d { right: 12px; bottom: 12px; }

/* ---------- textos ---------- */
.tgc5-sub, .tgc5-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;
}
.tgc5-serie { margin: .65em 0 0; letter-spacing: .16em; }
.tgc5-sub.on, .tgc5-serie.on { color: #fff; text-shadow: 2px 2px 0 var(--tgc5-tinta); }
.tgc5-superado .tgc5-serie { font-family: var(--tg-fuente-pizarron, 'Comic Sans MS', cursive); letter-spacing: .04em; text-transform: none; }

/* ---------- fichas del tablero ---------- */
.tgc5-hilo { position: relative; display: flex; justify-content: center; gap: clamp(2px, .3cqw, 5px); perspective: 700px; }
.tgc5-hilo .esp { width: clamp(10px, 1.6cqw, 26px); }
.tgc5-letra {
    position: relative; display: block; width: clamp(34px, 4.6cqw, 78px); height: clamp(46px, 6.2cqw, 104px);
    transform-origin: 50% 0; opacity: 0; transform: rotateX(-95deg) translateY(-30cqh);
    border-radius: 6px; border: 2px solid #000;
    background: linear-gradient(180deg, #2a2a2e 0 49%, #000 49% 51%, #1b1b1e 51%);
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .12), 0 3px 0 #000;
}
.tgc5-letra b {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--tg-fuente-titulo, 'Arial Black', sans-serif);
    font-weight: normal; font-size: clamp(22px, 3.3cqw, 56px); color: var(--tgc5-ambar); text-shadow: 0 0 8px rgba(255, 200, 61, .55);
}
.tgc5-hilo.grandes .tgc5-letra { width: clamp(38px, 5cqw, 88px); height: clamp(52px, 6.8cqw, 116px); }
.tgc5-hilo.grandes .tgc5-letra b { font-size: clamp(26px, 3.6cqw, 62px); }
.tgc5-letra.on { opacity: 1; transform: none; animation: tgc5Gira .6s cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: 0s; }
@keyframes tgc5Gira {
    0% { opacity: 1; transform: rotateX(-95deg) translateY(-30cqh); }
    55% { opacity: 1; transform: rotateX(18deg); }
    78% { transform: rotateX(-8deg); }
    100% { opacity: 1; transform: none; }
}
/* festejo: las fichas saltan */
.nos.festejo .tgc5-letra.on { animation: tgc5Gira .6s both, tgc5Salta .45s ease-in-out infinite alternate; animation-delay: 0s, var(--d); }
@keyframes tgc5Salta { from { transform: rotate(-3deg); } to { transform: translateY(-9px) rotate(3deg); } }
/* perdimos: las fichas se apagan */
.ellos.cierra .tgc5-letra.on { filter: grayscale(.8) brightness(.7); }
.ellos.cierra .tgc5-letra b { text-shadow: none; }

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

/* ---------- objetos del autor ---------- */
.tgc5-objeto { display: block; width: auto; pointer-events: none; }
.tgc5-lado { flex: 0 0 auto; display: flex; align-items: flex-end; justify-content: center; opacity: 0; position: relative; }
.tgc5-lado.izq { transform: translateX(-9cqw); } .tgc5-lado.der { transform: translateX(9cqw); }
.tgc5-lado.izq .tgc5-objeto { height: clamp(90px, 19cqh, 200px); transform-origin: 50% 100%; }
.tgc5-lado.der .tgc5-objeto.bus { height: clamp(70px, 15cqh, 160px); }
.tgc5-lado.der .tgc5-objeto.cart { height: clamp(100px, 22cqh, 230px); transform-origin: 50% 100%; }
.jugadores-on .tgc5-lado { opacity: 1; transform: none; transition: transform .7s cubic-bezier(.3, 1.4, .5, 1), opacity .25s; }
.jugadores-on .tgc5-lado.der { transition-delay: .15s; }
.nos.festejo .tgc5-lado.izq .tgc5-objeto { animation: tgc5Brinca .5s ease-in-out infinite alternate; }
.nos.festejo .tgc5-lado.der .tgc5-objeto.cart { animation: tgc5Menea 1s ease-in-out infinite alternate; }
@keyframes tgc5Brinca { from { transform: rotate(-4deg) translateY(0); } to { transform: rotate(4deg) translateY(-14px); } }
@keyframes tgc5Menea { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
/* perdimos: la valija queda gris y caida */
.ellos.cierra .tgc5-lado.izq .tgc5-objeto { filter: grayscale(.9) brightness(.7); transform: translateY(8px) rotate(-9deg); transition: transform .9s ease-in, filter .8s; }

/* ---------- los micros ---------- */
.tgc5-micro { position: relative; display: inline-block; line-height: 0; }
.tgc5-micro .flip { transform: scaleX(-1); }
/* nosotros (chico): el micro llega desde la izquierda y frena */
.tgc5-chico.nos .tgc5-micro { transform: translateX(-92cqw); }
.tgc5-chico.nos.gol .tgc5-micro { transform: none; transition: transform 1.2s cubic-bezier(.1, .75, .3, 1); }
.tgc5-chico.nos.gol .tgc5-micro .bus { animation: tgc5Frena .5s ease-out 1.05s both; transform-origin: 50% 100%; }
@keyframes tgc5Frena { 0% { transform: scaleX(-1) rotate(0); } 40% { transform: scaleX(-1) rotate(-2.2deg); } 100% { transform: scaleX(-1) rotate(0); } }
/* ellos: el micro arranca (tiembla, humo) y se va por la ruta */
.arranca .tgc5-micro { animation: tgc5Tiembla .14s linear infinite alternate; }
@keyframes tgc5Tiembla { from { transform: translate(0, 0); } to { transform: translate(2px, -2px); } }
.se-va .tgc5-micro { animation: none; transform: translateX(110cqw); transition: transform 1.7s cubic-bezier(.6, 0, 1, .75); }
.tgc5-humo { position: absolute; left: 2%; bottom: 6%; width: 0; height: 0; pointer-events: none; }
.tgc5-humo i { position: absolute; left: -14px; bottom: 0; width: clamp(18px, 3cqh, 34px); aspect-ratio: 1; border-radius: 50%; background: rgba(210, 214, 224, .8); opacity: 0; }
.arranca .tgc5-humo i, .se-va .tgc5-humo i { animation: tgc5Humo 1s ease-out infinite; }
.tgc5-humo i:nth-child(2) { animation-delay: .25s !important; } .tgc5-humo i:nth-child(3) { animation-delay: .5s !important; } .tgc5-humo i:nth-child(4) { animation-delay: .75s !important; }
@keyframes tgc5Humo { 0% { opacity: .85; transform: translate(0, 0) scale(.5); } 100% { opacity: 0; transform: translate(-60px, -26px) scale(2.2); } }

/* buenas: el micro azul cruza la ruta (nosotros) */
.tgc5-pase { position: absolute; left: 0; bottom: 4cqh; height: clamp(90px, 20cqh, 210px); width: auto; pointer-events: none; transform: translateX(-45cqw); opacity: 0; will-change: transform; }
.gol .tgc5-pase { animation: tgc5Cruza 1.7s cubic-bezier(.4, .1, .6, 1) forwards; }
@keyframes tgc5Cruza { 0% { opacity: 1; transform: translateX(-45cqw); } 100% { opacity: 1; transform: translateX(125cqw); } }
.tgc5-buenas { pointer-events: none; }

/* ---------- boton / pie ---------- */
.tgc5-boton { opacity: 0; transform: translateY(14px); transition: opacity .4s, transform .4s cubic-bezier(.3, 1.5, .5, 1); }
.tgc5-capa.pie-on .tgc5-boton { opacity: 1; transform: none; }
.nos.festejo .tgc5-cancha { animation: tgc5Pulso .6s ease-in-out infinite alternate; }
@keyframes tgc5Pulso { to { transform: scale(1.02); } }

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

/* ---------- nivel superado: se gana el nivel pero se pierde el micro ---------- */
.tgc5-cancha.grande { padding-bottom: clamp(26px, 4.8cqh, 52px); }
.tgc5-superado .tgc5-letra { width: clamp(28px, 3.5cqw, 58px); height: clamp(38px, 4.8cqw, 78px); }
.tgc5-superado .tgc5-letra b { font-size: clamp(16px, 2.4cqw, 40px); }
.tgc5-superado .tgc5-hilo .esp { width: clamp(6px, 1cqw, 16px); }
.tgc5-anden { position: relative; width: min(92cqw, 1100px); height: clamp(150px, 30cqh, 320px); opacity: 0; transform: translateY(30px); transition: opacity .5s, transform .6s cubic-bezier(.3, 1.4, .5, 1); }
.mesa-on .tgc5-anden { opacity: 1; transform: none; }
.tgc5-anden > * { position: absolute; }
.tgc5-anden .cart { right: 3%; bottom: 0; height: 88%; transform-origin: 50% 100%; animation: tgc5Menea 2.2s ease-in-out infinite alternate; }
.tgc5-anden .val { left: 4%; bottom: 0; height: 42%; transform-origin: 50% 100%; }
.tgc5-anden .tgc5-micro { left: 26%; bottom: 2%; height: 64%; transform: translateX(-100cqw); }
.tgc5-anden .tgc5-micro .bus { height: 100%; width: auto; }
.tgc5-superado.llega .tgc5-micro { transform: none; transition: transform 1.2s cubic-bezier(.1, .75, .3, 1); }
.tgc5-superado.llega .tgc5-micro .bus { animation: tgc5Frena .5s ease-out 1.05s both; transform-origin: 50% 100%; }
.tgc5-superado.se-va .tgc5-micro { transform: translateX(120cqw); }
/* la valija se queda: hace unos saltos hacia el micro y se planta gris y caida */
.tgc5-superado.llega .val { animation: tgc5Espera .7s ease-in-out infinite alternate; }
@keyframes tgc5Espera { from { transform: translateY(0); } to { transform: translateY(-6px); } }
.tgc5-superado.se-va .val { animation: tgc5Corre 1.5s ease-out forwards; }
@keyframes tgc5Corre {
    0% { transform: translate(0, 0); } 15% { transform: translate(4cqw, -26px); } 30% { transform: translate(5cqw, 0); }
    45% { transform: translate(9cqw, -22px); } 60% { transform: translate(10cqw, 0); } 100% { transform: translate(11cqw, 0) rotate(0); }
}
.tgc5-superado.plantado .val { animation: tgc5Plantada .8s ease-in forwards; filter: grayscale(.85) brightness(.75); }
@keyframes tgc5Plantada { 0% { transform: translate(11cqw, 0); } 100% { transform: translate(11cqw, 6px) rotate(-12deg); } }
.tgc5-grito { left: 10%; bottom: 52%; padding: .5em .9em; border-radius: 14px; background: #fff; color: #111; white-space: nowrap; font-family: var(--tg-fuente-titulo, 'Arial Black', sans-serif);
    font-size: clamp(14px, 1.7cqw, 28px); opacity: 0; transform: scale(.4); transform-origin: 20% 100%; transition: opacity .3s, transform .5s cubic-bezier(.3, 1.8, .5, 1); }
.tgc5-grito::after { content: ''; position: absolute; left: 22%; bottom: -10px; border: 10px solid transparent; border-top-color: #fff; border-bottom: 0; }
.plantado .tgc5-grito { opacity: 1; transform: none; }
/* el sueño: la isla en una nube de pensamiento */
.tgc5-sueno { left: 42%; bottom: 40%; width: clamp(120px, 20cqh, 220px); aspect-ratio: 1; border-radius: 50%; background: #eaf3ff; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 4px #bcd2ee; opacity: 0; transform: scale(.3); transition: opacity .4s .5s, transform .7s .5s cubic-bezier(.3, 1.6, .5, 1); }
.tgc5-sueno .tgc5-objeto { height: 78%; }
.tgc5-sueno .b1, .tgc5-sueno .b2 { position: absolute; border-radius: 50%; background: #eaf3ff; box-shadow: 0 0 0 3px #bcd2ee; }
.tgc5-sueno .b1 { left: -14%; bottom: -8%; width: 16%; aspect-ratio: 1; } .tgc5-sueno .b2 { left: -26%; bottom: -26%; width: 9%; aspect-ratio: 1; }
.plantado .tgc5-sueno { opacity: 1; transform: none; animation: tgc5Late 2.4s ease-in-out 1.2s infinite alternate; }
@keyframes tgc5Late { from { transform: translateY(0); } to { transform: translateY(-6px); } }

@media (max-width: 700px) {
    .tgc5-lado.izq .tgc5-objeto { height: 14cqh; }
}

/* "¡LAS BUENAS!" lleva 11 fichas: un poco mas angostas para que el tablero no toque los bordes de la pantalla */
.tgc5-buenas .tgc5-hilo.grandes .tgc5-letra { width: clamp(32px, 4.3cqw, 78px); }