/* Penaltis. Fondos estáticos; portero y bolas solo cambian de transform. 1rem = 32 px a 1080p. */
.penaltis { background: #3E9E4F; color: var(--tg-ink); }
.penaltis-grada { position: absolute; left: 0; right: 0; top: 0; height: 40%; background: repeating-linear-gradient(180deg, #2F3A7A 0 1.25rem, #39468E 1.25rem 2.5rem); }
.penaltis-cesped { position: absolute; left: 0; right: 0; top: 40%; bottom: 0; background: repeating-linear-gradient(180deg, #3E9E4F 0 3rem, #47AE58 3rem 6rem); }
.penaltis-area { position: absolute; left: 14%; right: 14%; top: 50%; height: 28%; border: .25rem solid rgba(255,255,255,.85); border-top: 0; }

/* Portería: postes blancos y red a cuadros (fija) */
.penaltis-porteria { position: absolute; box-sizing: border-box; border: .5rem solid #fff; border-bottom: 0; }
.penaltis-red {
  position: absolute; inset: 0; opacity: .5;
  background: repeating-linear-gradient(90deg, transparent 0 1rem, #fff 1rem 1.125rem), repeating-linear-gradient(0deg, transparent 0 1rem, #fff 1rem 1.125rem);
}
.penaltis-diana {
  box-sizing: border-box; border-radius: var(--tg-r-pill); border: .375rem solid #FFE45C; background: rgba(255,228,92,.25);
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: var(--tg-w-strong); color: #FFE45C;
}
.penaltis-diana span { display: flex; align-items: center; justify-content: center; }
.penaltis-portero { z-index: 2; }
.penaltis-portero svg { display: block; width: 100%; height: 100%; }

.penaltis-bola {
  z-index: 3; box-sizing: border-box; border-radius: var(--tg-r-pill); border: .1875rem solid #1F1F1F;
  background: radial-gradient(circle at 50% 50%, #1F1F1F 0 18%, #fff 19%);
}
.penaltis-bola::after { content: ''; position: absolute; inset: -.375rem; border-radius: var(--tg-r-pill); border: .25rem solid var(--color); }
.penaltis-bola--falla { opacity: .45; }

/* Tirador: el punto de translate es el centro de su sitio */
.penaltis-tirador { width: 0; height: 0; z-index: 4; }
.penaltis-avatar { position: absolute; left: -2rem; top: -2rem; width: 4rem; height: 4rem; }
.penaltis-avatar.tg-cara--foto { border-radius: var(--tg-r-pill); object-fit: cover; border: .125rem solid #fff; box-sizing: border-box; }
.penaltis-nombre {
  position: absolute; left: 0; top: 2.25rem; width: max-content; max-width: 8rem; transform: translateX(-50%);
  height: 1.5rem; padding: 0 .5rem; border-radius: var(--tg-r-pill); background: #fff; display: flex; align-items: center;
  font-size: .875rem; font-weight: var(--tg-w-medium); white-space: nowrap; overflow: hidden;
}
.penaltis-nombre .tg-personaje--linea { width: .875rem; height: .875rem; }
.penaltis-puntos {
  position: absolute; left: 1.5rem; top: -2.75rem; min-width: 2.25rem; height: 2.25rem; padding: 0 .375rem; box-sizing: border-box;
  border-radius: var(--tg-r-pill); background: var(--color); color: #fff; border: .1875rem solid #fff;
  display: flex; align-items: center; justify-content: center; font-size: 1.125rem; font-weight: var(--tg-w-strong);
}
.penaltis-hecho { position: absolute; left: -3.75rem; top: -2.75rem; width: 2rem; height: 2rem; border-radius: var(--tg-r-pill); background: var(--tg-online); display: flex; align-items: center; justify-content: center; }
.penaltis-hecho svg { width: 1.25rem; height: 1.25rem; }
.penaltis-hecho[hidden] { display: none; }
.penaltis-mas { position: absolute; left: -5rem; top: -6rem; width: 10rem; justify-content: center; }