/* Canasta. Fondos estáticos; bolas y aro solo cambian de transform. --medio = medio ancho
   del aro en px (lo pone el JS al empezar). 1rem = 32 px a 1080p. */
.canasta { background: #F4B76A; color: var(--tg-ink); }
.canasta-pared { position: absolute; left: 0; right: 0; top: 0; height: 62%; background: linear-gradient(180deg, #5B4FB8 0%, #7A6FD6 100%); }
.canasta-suelo { position: absolute; left: 0; right: 0; bottom: 0; height: 38%; background: repeating-linear-gradient(90deg, #E8A458 0 4rem, #F0B56E 4rem 8rem); }
.canasta-linea { position: absolute; left: 10%; right: 10%; top: 72%; height: .25rem; background: #fff; opacity: .8; border-radius: .125rem; }

/* El aro: el punto de translate es el centro del aro */
.canasta-aro { width: 0; height: 0; z-index: 1; }
.canasta-tablero {
  position: absolute; left: calc(var(--medio) * -1.7); top: calc(var(--medio) * -2.3); width: calc(var(--medio) * 3.4); height: calc(var(--medio) * 2.3);
  background: #fff; border: .25rem solid #1F1F1F; border-radius: .5rem; box-sizing: border-box;
}
.canasta-cuadro { position: absolute; left: 30%; right: 30%; bottom: 12%; height: 45%; border: .25rem solid #FF6B5A; }
.canasta-red {
  position: absolute; left: calc(var(--medio) * -0.9); top: 0; width: calc(var(--medio) * 1.8); height: calc(var(--medio) * 1.1);
  background: repeating-linear-gradient(60deg, transparent 0 .6rem, rgba(255,255,255,.9) .6rem .75rem), repeating-linear-gradient(-60deg, transparent 0 .6rem, rgba(255,255,255,.9) .6rem .75rem);
  clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
}
.canasta-borde { position: absolute; left: calc(var(--medio) * -1); top: -.25rem; width: calc(var(--medio) * 2); height: .5rem; border-radius: .25rem; background: #FF5A1F; }
/* Mitad delantera del aro: va por encima de las bolas, para que parezca que entran */
.canasta-delante { width: 0; height: 0; z-index: 3; }
.canasta-borde--delante { top: -.125rem; height: .375rem; }

.canasta-bola {
  z-index: 2; box-sizing: border-box; border-radius: var(--tg-r-pill);
  background: radial-gradient(circle at 35% 35%, #FFB066 0 30%, #F07A1A 31%); border: .1875rem solid #1F1F1F;
}
.canasta-bola::after { content: ''; position: absolute; inset: 15%; border-radius: var(--tg-r-pill); border: .1875rem solid var(--color); }

/* Tirador: el punto de translate es el centro de su sitio en la pista */
.canasta-tirador { width: 0; height: 0; z-index: 4; }
.canasta-avatar { position: absolute; left: -2rem; top: -2rem; width: 4rem; height: 4rem; }
.canasta-avatar.tg-cara--foto { border-radius: var(--tg-r-pill); object-fit: cover; border: .125rem solid #fff; box-sizing: border-box; }
.canasta-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;
}
.canasta-nombre .tg-personaje--linea { width: .875rem; height: .875rem; }
.canasta-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);
}
.canasta-mas { position: absolute; left: -4rem; top: -6rem; width: 8rem; justify-content: center; }