.leaflet-compass {
  position: absolute;
  width: 48px;
  height: 48px;
  pointer-events: none;

  /* pretty SVG arrow → red tip, black ring */
  background: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>\
    <polygon points='50,8 38,42 50,32 62,42' fill='%23e00'/>\
    <circle cx='50' cy='50' r='45' fill='none' stroke='%23000' stroke-width='4'/>\
  </svg>") center/contain no-repeat;

  transform-origin: 50% 50%;
  transition: transform .1s linear;
}


/* in compass.css oder global */
.leaflet-center {
  left: 50%;
  transform: translateX(-50%);
}