/* Atrapa la fruta (maqueta docs/diseno/maquetas/juegos/Fruta). Fondos estáticos; las piezas
   solo cambian de transform y opacity. 1rem = 32 px a 1080p. */
.fruta { background: linear-gradient(180deg, #C9F0FC 0%, #8FD3F4 100%); color: var(--tg-ink); }
.fruta-nube { position: absolute; border-radius: var(--tg-r-pill); background: #fff; opacity: .7; }
.fruta-nube--1 { left: 7.6%; top: 10%; width: 7.5rem; height: 2.1875rem; }
.fruta-nube--2 { left: 10.9%; top: 6.6%; width: 3.75rem; height: 2.5rem; }
.fruta-nube--3 { left: 75%; top: 16.6%; width: 8.75rem; height: 2.375rem; }
.fruta-hierba { position: absolute; left: 0; right: 0; bottom: 0; height: 12.2%; background: #6CC46F; border-top: .3125rem solid #58AE5C; }

/* Piezas que caen */
.fruta-pieza { width: 3rem; height: 3rem; }
.fruta-pieza svg { display: block; width: 100%; height: 100%; }
.fruta-pieza__raya { position: absolute; left: 50%; top: -1.875rem; width: .125rem; height: 1.375rem; margin-left: -.0625rem; border-radius: .0625rem; background: #fff; opacity: .7; }
.fruta-pieza--estrella { width: 3.75rem; height: 3.75rem; }
.fruta-pieza__valor {
  position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: .125rem;
  height: 1.375rem; padding: 0 .5rem; border-radius: var(--tg-r-pill); background: #fff; color: #A15300;
  display: flex; align-items: center; font-size: 1rem; font-weight: var(--tg-w-strong);
}

/* Cesta de cada jugador: el personaje asoma, borde del color, puntos y nombre */
.fruta-cesta { width: 12%; height: 0; }
.fruta-cesta__cesta { position: absolute; left: 0; top: -.25rem; width: 100%; height: auto; display: block; }
.fruta-avatar { position: absolute; left: 50%; top: -3.5625rem; width: 4.0625rem; height: 4.0625rem; margin-left: -2.03125rem; }
.fruta-avatar.tg-cara--foto { border-radius: var(--tg-r-pill); object-fit: cover; border: .125rem solid #fff; box-sizing: border-box; }
.fruta-cesta__puntos {
  position: absolute; left: 50%; top: .9375rem; width: 2.125rem; height: 2.125rem; margin-left: -1.0625rem;
  border-radius: var(--tg-r-pill); background: #fff; color: var(--tg-ink);
  display: flex; align-items: center; justify-content: center; font-size: 1.25rem; font-weight: var(--tg-w-strong);
}
/* La cesta va casi al borde de abajo (lo marca la física): el nombre, encima del personaje */
.fruta-cesta__nombre {
  position: absolute; left: 50%; top: -5.0625rem; transform: translateX(-50%);
  height: 1.375rem; padding: 0 .5rem; border-radius: var(--tg-r-pill); background: #fff;
  display: flex; align-items: center; font-size: 1rem; font-weight: var(--tg-w-medium); color: var(--tg-ink); white-space: nowrap;
}
.fruta-cesta__nombre .tg-personaje--linea { width: 1rem; height: 1rem; }
.fruta-cesta__mas { position: absolute; left: 50%; top: -7.75rem; transform-origin: center; margin-left: -1.5rem; }