/* Motoluz. Fondo y cuadrícula estáticos; tramos y cabezas solo cambian de transform.
   1rem = 32 px a 1080p. */
.estelas { background: #12143A; }
.estelas-tablero {
  position: absolute; overflow: hidden;
  background-color: #181B4D;
  background-image: linear-gradient(rgba(255,255,255,.07) 2px, transparent 2px), linear-gradient(90deg, rgba(255,255,255,.07) 2px, transparent 2px);
  outline: .1875rem solid rgba(255,255,255,.55);
}
.estelas-rastro { position: absolute; inset: 0; }
.estelas-rastro--fuera { opacity: .3; }
.estelas-tramo { position: absolute; left: 0; top: 0; transform-origin: 0 0; }

.estelas-cabeza {
  border-radius: var(--tg-r-pill); border: .25rem solid #fff; background: #fff;
  box-sizing: border-box; overflow: hidden; z-index: 2;
}
.estelas-cara { display: block; width: 100%; height: 100%; }
.estelas-cara.tg-cara--foto { object-fit: cover; }
.estelas-cabeza--fuera { opacity: .45; }

.estelas-aviso {
  position: absolute; left: 0; right: 0; top: 42%; z-index: 3;
  margin: 0 auto; width: fit-content; max-width: 80%; padding: .5rem 1.4rem; border-radius: var(--tg-r-pill);
  border: .15625rem solid #fff; background: var(--tg-primary); color: #fff; text-align: center;
  font-size: 2rem; font-weight: var(--tg-w-strong);
}
/* Mismo lenguaje que .juego-aviso: punto = morado, logro = amarillo (--tg-host) */
.estelas-aviso--logro { background: var(--tg-host); color: var(--tg-ink); }
.estelas-aviso .tg-personaje--linea { width: 1.75rem; height: 1.75rem; vertical-align: middle; }