/* Duelo «¡YA!» (maquetas docs/diseno/maquetas/juegos/Duelo-Espera, -Ya y -Ronda).
   Fondos estáticos; solo se animan transform y opacity. 1rem = 32 px a 1080p. */
.duelo { background: linear-gradient(115deg, #FF8F5A 0%, #FF8F5A 44%, #FF6B5A 44%, #FF6B5A 100%); color: var(--tg-ink); }
.duelo-suelo { position: absolute; left: 0; right: 0; bottom: 0; height: 7.8125rem; background: #E5564A; border-top: .375rem solid #CF4A3F; }
.duelo-abanico {
  position: absolute; left: 50%; top: 8.4375rem; width: 43.75rem; height: 43.75rem; margin: -21.875rem 0 0 -21.875rem;
  border-radius: var(--tg-r-pill); background: repeating-conic-gradient(from 0deg at 50% 50%, #FFD83A 0deg 12deg, #FFE45C 12deg 24deg);
  opacity: 0;
}
/* ¡YA!: el único cambio brusco de color (coincide con el pitido) */
.duelo.duelo--ya { background: #FFE45C; }
.duelo--ya .duelo-abanico { opacity: 1; }
.duelo--ya .duelo-suelo { background: #F2C21E; border-top-color: #DDAE10; }

/* Cartel */
.duelo-senal {
  position: absolute; left: 50%; top: 2.8125rem; width: 23.75rem; margin-left: -11.875rem; box-sizing: border-box;
  border-radius: 1.375rem; background: #fff; padding: 1.25rem 0 1.375rem; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
}
.duelo-senal p { margin: 0; }
.duelo-senal__grande { font-size: 4.125rem; font-weight: var(--tg-w-medium); letter-spacing: -.04em; line-height: 1; }
.duelo-senal__sub { font-size: 1.125rem; color: var(--tg-muted); }
.duelo-senal--fin { top: 1.75rem; width: 38.75rem; margin-left: -19.375rem; padding: .875rem 0 1rem; gap: .1875rem; }
.duelo-senal__titulo { font-size: 3rem; font-weight: var(--tg-w-medium); letter-spacing: -.04em; line-height: 1; }
.duelo-senal--ya { top: 1.25rem; left: 0; right: 0; width: auto; margin: 0; padding: 0; background: none; flex-direction: row; justify-content: center; gap: .75rem; }
.duelo-senal__ya { font-size: 9.375rem; font-weight: var(--tg-w-strong); letter-spacing: -.05em; line-height: 1; color: var(--tg-ink); }
.duelo-rayo { width: 3.75rem; height: 6.25rem; }
.duelo-rayo--der { transform: scaleX(-1); }
@keyframes tg-aparece { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.duelo-senal.tg-aparece { animation: tg-aparece 250ms var(--tg-ease) both; }
.duelo-rayo--der { animation: none; }

/* Personajes */
.duelo-jugadores { position: absolute; left: 0; right: 0; bottom: 1.25rem; display: flex; justify-content: center; align-items: flex-end; gap: 4.375rem; }
.duelo--ya .duelo-jugadores { bottom: 2.1875rem; }
.duelo-jugador { position: relative; display: flex; flex-direction: column; align-items: center; gap: .5rem; transition: transform var(--tg-base) var(--tg-ease), opacity var(--tg-base); }
.duelo-avatar { width: 7.1875rem; height: 7.1875rem; display: block; }
.duelo-avatar.tg-cara--foto { border-radius: var(--tg-r-pill); object-fit: cover; border: .1875rem solid #fff; box-sizing: border-box; }
.duelo-nombre {
  height: 1.875rem; padding: 0 .875rem; border-radius: var(--tg-r-pill); background: #fff; color: var(--tg-ink);
  display: flex; align-items: center; font-size: 1.125rem; font-weight: var(--tg-w-medium); white-space: nowrap;
}
.duelo-nombre .tg-personaje--linea { width: 1.125rem; height: 1.125rem; }
.duelo-tiempo {
  height: 2rem; padding: 0 .8125rem; border-radius: var(--tg-r-pill); background: #fff; color: var(--tg-ink);
  display: flex; align-items: center; font-size: 1.125rem; font-weight: var(--tg-w-strong); white-space: nowrap;
}
.duelo-tiempo--gana { background: var(--tg-primary); color: #fff; }
.duelo-tiempo--falso { background: var(--tg-error-bg); color: var(--tg-error); }
.duelo-gana { transform: translateY(-1.75rem); }
.duelo-falso { opacity: .7; }
.duelo-insignia {
  position: absolute; top: -.9375rem; left: 50%; margin-left: -2.1875rem; width: 4.375rem; height: 2.25rem; box-sizing: border-box; z-index: 1;
  border-radius: var(--tg-r-pill); background: var(--tg-host); border: .15625rem solid #fff;
  display: flex; align-items: center; justify-content: center; gap: .1875rem; font-size: 1.125rem; font-weight: var(--tg-w-strong); color: var(--tg-ink);
  animation: tg-aparece 250ms var(--tg-ease) both;
}
.duelo-insignia svg { width: .9375rem; height: .9375rem; }

/* 5 a 8 jugadores: más pequeños para que quepan */
.duelo--muchos .duelo-jugadores { gap: 1.25rem; }
.duelo--muchos .duelo-avatar { width: 4.5rem; height: 4.5rem; }