/* Carrera de canicas (maqueta docs/diseno/maquetas/juegos/Canicas). Fondos estáticos;
   las piezas solo cambian de transform y opacity. 1rem = 32 px a 1080p. */
.canicas {
  background: radial-gradient(circle at 30% 20%, #47A065 0%, rgba(62,142,90,0) 45%),
              radial-gradient(circle at 80% 85%, #367E50 0%, rgba(62,142,90,0) 40%), #3E8E5A;
  color: #fff;
}
.canicas-salida {
  position: absolute; left: 1rem; top: 1rem; bottom: 1rem; width: 6.875rem;
  border: .125rem dashed rgba(255,255,255,.35); border-radius: .875rem;
}
.canicas-salida span { position: absolute; left: .75rem; top: .5rem; font-size: 1rem; font-weight: var(--tg-w-medium); opacity: .85; }
.canicas-muro { position: absolute; background: #2C6B42; border-top: .25rem solid #57AE76; border-radius: var(--tg-r-pill); box-sizing: border-box; }
.canicas-meta { position: absolute; border-radius: 50%; background: #2C6B42; border: .1875rem dashed #FFE45C; box-sizing: border-box; }
.canicas-banderin { position: absolute; left: 50%; bottom: 55%; width: 3rem; height: 4.125rem; margin-left: -.375rem; }
.canicas-meta__texto { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: .5rem; font-size: 1rem; font-weight: var(--tg-w-medium); }
.canicas-bola { border-radius: 50%; border: .1875rem solid #fff; box-sizing: border-box; overflow: visible; }
.canicas-canica, .canicas-bola img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.canicas-nombre {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: .1875rem;
  height: 1.375rem; padding: 0 .5rem; border-radius: var(--tg-r-pill); background: rgba(20,16,36,.55); color: #fff;
  display: flex; align-items: center; font-size: 1rem; font-weight: var(--tg-w-medium); white-space: nowrap;
}
.canicas-nombre .tg-personaje--linea { width: 1rem; height: 1rem; }
.canicas-estela { position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform; }
.canicas-estela--0 { width: .875rem; height: .875rem; margin: -.4375rem 0 0 -.4375rem; opacity: .5; }
.canicas-estela--1 { width: .625rem; height: .625rem; margin: -.3125rem 0 0 -.3125rem; opacity: .35; }
.canicas-estela--2 { width: .4375rem; height: .4375rem; margin: -.21875rem 0 0 -.21875rem; opacity: .2; }
/* Momento clave (logro) */
#canicas-aviso { position: absolute; right: 7.5rem; top: 1.75rem; z-index: 3; }
/* Cartel «Circuito N de 3» antes de cada circuito (blanco, como el de Duelo) */
.canicas-cartel {
  position: absolute; left: 50%; top: 50%; z-index: 4; width: 22rem; margin: -3.25rem 0 0 -11rem;
  box-sizing: border-box; padding: 1rem 1.5rem 1.125rem; border-radius: 1.5rem;
  background: #fff; color: var(--tg-ink); text-align: center;
  display: flex; flex-direction: column; gap: .25rem;
}
.canicas-cartel[hidden] { display: none; }
.canicas-cartel p { margin: 0; }
.canicas-cartel__sub { font-size: 1.125rem; color: var(--tg-muted); }
.canicas-cartel__titulo { font-size: 2.5rem; font-weight: var(--tg-w-medium); letter-spacing: -.03em; line-height: 1.05; }