/* Marcador de navegação: todas as peças usam o mesmo centro geométrico. */
.routeTarget{
  width:46px;
  height:46px;
  border:2px solid #ffe45e;
  border-radius:50%;
  box-sizing:border-box;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle at 50% 50%,#fff8bf 0 2px,transparent 3px);
  box-shadow:0 0 0 4px #fff5a82e,0 0 18px 3px #fff3a56b;
}
.routeTarget::before,
.routeTarget::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  margin:0;
  border:0;
  border-radius:2px;
  background:#fff06a;
  box-shadow:0 0 5px #fff7bd;
  transform:translate(-50%,-50%);
  transform-origin:center;
}
.routeTarget::before{
  width:64px;
  height:2px;
}
.routeTarget::after{
  width:2px;
  height:64px;
}

@media (hover:none) and (pointer:coarse){
  .routeTarget{
    width:42px;
    height:42px;
    box-shadow:0 0 0 3px #fff5a82e,0 0 15px 2px #fff3a566;
  }
  .routeTarget::before{width:58px}
  .routeTarget::after{height:58px}
}