/* Cartelera: sala de cine oscura, lienzos SVG y carteles de papel crema.
   Sin box-shadow; solo se animan transform y opacity. 1rem = 32 px a 1080p. */
.cartelera { background: #2A1E3F; color: #fff; }
.ca-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.ca-titulo { font-size: 2rem; font-weight: var(--tg-w-strong); letter-spacing: -.02em; text-align: center; }
.ca-sub { font-size: 1.2rem; color: #E6DCF5; text-align: center; }
.ca-quien { display: flex; align-items: center; gap: .4rem; font-size: 1.2rem; font-weight: var(--tg-w-medium); max-width: 100%; overflow: hidden; white-space: nowrap; }
.ca-quien .tg-personaje--linea { width: 1.4rem; height: 1.4rem; vertical-align: -.3rem; }
.ca-papel { background: #fff; border-radius: .8rem; border: .15rem solid #CDB8F5; box-sizing: border-box; overflow: hidden; }
.ca-papel svg, .ca-cartel__dibujo svg { width: 100%; height: 100%; display: block; }

/* 1. Dibujos en directo: una fila hasta 4; dos filas de 5 a 8 */
.ca-lienzos { flex: 1; min-height: 0; display: grid; grid-auto-flow: row; gap: .8rem 1.2rem; align-content: center; justify-content: center; }
.ca-lienzos--1 { grid-template-columns: auto; } .ca-lienzos--2 { grid-template-columns: repeat(2, auto); }
.ca-lienzos--3 { grid-template-columns: repeat(3, auto); } .ca-lienzos--4 { grid-template-columns: repeat(4, auto); }
.ca-lienzos--5, .ca-lienzos--6 { grid-template-columns: repeat(3, auto); }
.ca-lienzos--7, .ca-lienzos--8 { grid-template-columns: repeat(4, auto); }
.ca-lienzo { position: relative; display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.ca-lienzo .ca-papel { width: 18rem; height: 18rem; }
.ca-lienzos--3 .ca-papel { width: 16rem; height: 16rem; }
.ca-lienzos--4 .ca-papel { width: 12.4rem; height: 12.4rem; }
.ca-lienzos--5 .ca-papel, .ca-lienzos--6 .ca-papel, .ca-lienzos--7 .ca-papel, .ca-lienzos--8 .ca-papel { width: 7.8rem; height: 7.8rem; }
.ca-listo { position: absolute; right: -.6rem; top: -.6rem; font-size: 2.2rem; line-height: 1; opacity: 0; transform: scale(.5); transition: opacity .25s, transform .25s; }
.ca-lienzo--listo .ca-listo { opacity: 1; transform: scale(1); }
.ca-lienzo--listo .ca-papel { border-color: var(--tg-online); }

/* 2. Títulos: claquetas que se encienden */
.ca-cuentas { flex: 1; display: flex; flex-wrap: wrap; gap: 1rem; align-content: center; justify-content: center; max-width: 56rem; }
.ca-cuenta { background: #3B2C55; border-radius: 1rem; padding: .7rem 1rem; display: flex; flex-direction: column; align-items: center; gap: .4rem; width: 12rem; }
.ca-claquetas { display: flex; gap: .4rem; }
.ca-claqueta { font-size: 2rem; line-height: 1; opacity: .25; transform: scale(.8); transition: opacity .25s, transform .25s; }
.ca-claqueta--si { opacity: 1; transform: scale(1); }

/* 3. Montaje: un recuadro por jugador con sus 2 dibujos numerados */
.ca-paneles { flex: 1; min-height: 0; display: grid; gap: .8rem; align-content: center; justify-content: center; }
.ca-paneles--a { grid-template-columns: repeat(2, auto); }
.ca-paneles--b { grid-template-columns: repeat(4, auto); gap: 1rem; }
.ca-paneles--c { grid-template-columns: repeat(4, auto); gap: .6rem; }
.ca-paneles--b .ca-panel__dibs { flex-direction: column; align-items: center; }
.ca-panel { background: #3B2C55; border-radius: 1rem; padding: .5rem .7rem .7rem; border: .15rem solid transparent; display: flex; flex-direction: column; gap: .4rem; }
.ca-panel--listo { border-color: var(--tg-online); }
.ca-panel__ok { margin-left: auto; padding-left: .4rem; opacity: 0; transform: scale(.5); transition: opacity .25s, transform .25s; }
.ca-panel--listo .ca-panel__ok { opacity: 1; transform: scale(1); }
.ca-panel__dibs { display: flex; gap: .6rem; }
.ca-mini { position: relative; }
.ca-mini b { position: absolute; left: -.3rem; top: -.3rem; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: #FFC93C; color: #1F1F1F;
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem; z-index: 1; }
.ca-paneles--a .ca-papel { width: 13rem; height: 13rem; }
.ca-paneles--b .ca-papel { width: 8rem; height: 8rem; }
.ca-paneles--b .ca-quien { max-width: 10rem; }
.ca-paneles--c .ca-papel { width: 5.6rem; height: 5.6rem; }
.ca-paneles--c .ca-quien { font-size: 1rem; max-width: 11.8rem; }

/* 4. Estreno: dos carteles frente a frente (alto útil ≈ 24rem: sin título arriba) */
.ca-duelo { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 1.4rem; }
.ca-centro { width: 10rem; display: flex; flex-direction: column; align-items: center; gap: .6rem; text-align: center; }
.ca-pregunta { font-size: 1.4rem; font-weight: var(--tg-w-strong); line-height: 1.15; }
.ca-vs { font-size: 3rem; font-weight: var(--tg-w-strong); color: #FFC93C; line-height: 1; }
.ca-cartel { width: 17rem; background: #FFF8E7; color: #1F1F1F; border: .35rem solid #FFC93C; border-radius: .6rem; padding: .5rem .8rem .6rem; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; gap: .35rem; transition: transform .4s var(--tg-ease), opacity .4s; }
.ca-cartel__sello { font-size: 1rem; font-weight: var(--tg-w-strong); letter-spacing: .2em; text-transform: uppercase; color: #8A2D4F; line-height: 1.2; }
.ca-cartel__dibujo { position: relative; width: 11.5rem; height: 11.5rem; background: #fff; border: .12rem solid #E3D6B8; }
.ca-cartel__titulo { font-size: 1.35rem; font-weight: var(--tg-w-strong); line-height: 1.1; text-align: center; letter-spacing: -.01em; min-height: 3rem;
  display: flex; align-items: center; justify-content: center; overflow-wrap: anywhere; }
.ca-cartel__creditos { font-size: 1rem; line-height: 1.25; text-align: center; color: #4A3F5C; transition: opacity .3s; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.ca-oculto { opacity: 0; }
.ca-cartel--gana { transform: scale(1.05); border-color: #4CD07D; }
.ca-cartel--pierde { opacity: .45; transform: scale(.94); }
/* Votos encima del dibujo, abajo: no ocupan alto */
.ca-votos { position: absolute; left: .3rem; right: .3rem; bottom: .3rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem; font-size: 1rem; color: #4A3F5C; }