/* Pescatesoros. Fondos estáticos; barcas, ganchos y tesoros solo cambian de transform
   (la cuerda se alarga con scaleY). 1rem = 32 px a 1080p. */
.gancho { background: linear-gradient(180deg, #2BA8D8 0%, #1576A8 55%, #0D4F7A 100%); color: var(--tg-ink); }
.gancho-cielo { position: absolute; left: 0; right: 0; top: 0; height: 15%; background: #BFE9FF; }
.gancho-ola { position: absolute; left: 0; right: 0; top: 14%; height: 2%; background: repeating-linear-gradient(90deg, #E8F7FF 0 3rem, #2BA8D8 3rem 4rem); opacity: .8; }
.gancho-arena { position: absolute; left: 0; right: 0; bottom: 0; height: 8%; background: #E9CF8C; border-top: .3125rem solid #D4B56A; }
.gancho-alga { position: absolute; bottom: 6%; width: 1.25rem; border-radius: 1rem 1rem 0 0; background: #2F9E63; opacity: .7; }
.gancho-alga--1 { left: 12%; height: 14%; }
.gancho-alga--2 { left: 47%; height: 10%; }
.gancho-alga--3 { left: 83%; height: 16%; }

/* Barca de cada jugador (el punto de translate es el centro de la cubierta) */
.gancho-barca { width: 10rem; height: 0; margin-left: -5rem; z-index: 3; }
.gancho-casco { position: absolute; left: 0; top: -1.25rem; width: 10rem; height: auto; display: block; }
.gancho-avatar { position: absolute; left: 50%; top: -4.25rem; width: 3.5rem; height: 3.5rem; margin-left: -1.75rem; }
.gancho-avatar.tg-cara--foto { border-radius: var(--tg-r-pill); object-fit: cover; border: .125rem solid #fff; box-sizing: border-box; }
.gancho-puntos {
  position: absolute; left: .5rem; top: -3.25rem; min-width: 2.5rem; height: 2.5rem; padding: 0 .4rem; box-sizing: border-box;
  border-radius: var(--tg-r-pill); background: #fff; border: .1875rem solid var(--color); display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; font-weight: var(--tg-w-strong);
}
.gancho-nombre {
  position: absolute; right: .25rem; top: -3rem; max-width: 4.5rem; 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;
}
.gancho-nombre .tg-personaje--linea { width: .875rem; height: .875rem; }
.gancho-mas { position: absolute; left: 0; right: 0; top: -7rem; width: max-content; margin: 0 auto; }

/* Cuerda: palo del largo máximo, que gira y encoge desde arriba */
.gancho-cuerda { width: .25rem; margin-left: -.125rem; background: #3B2A1A; transform-origin: 50% 0; z-index: 1; }
.gancho-garfio { width: 2rem; height: 2rem; margin-left: -1rem; margin-top: -.25rem; transform-origin: 50% .25rem; z-index: 2; }
.gancho-garfio svg, .gancho-cosa svg { display: block; width: 100%; height: 100%; }

.gancho-cosa { z-index: 1; }