.compass {
    width: 35%; /* Use vmin for consistent scaling across screen sizes */
    aspect-ratio: 1 / 1;
    position: relative;
    margin: auto;
  }

  .round {
     width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    position: relative;
    box-shadow: 0 0 0.5vw rgba(0, 0, 0, 0.4);
    border: 0.01vw solid #1f203b;
  }

  .compass::before {
    content: "";
    position: absolute;
    width: 0.5%;
    height: 75%;
    background: linear-gradient(
      to bottom,
      #7d7e80 0%,
      #7d7e80 30%,
      white 30%,
      white 70%,
      #7d7e80 70%,
      #7d7e80 100%
    );
    top: 12.5%;
    left: 50%;
    transform: rotate(175deg);
    z-index: 0;
  }

  .compass-arrow {
    width: 100%;
    aspect-ratio: 2 / 1;
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 1;
    transition: transform 1s ease;
    animation: sway 3s ease-in-out infinite;
    transform-origin: bottom center;
  }

  @keyframes sway {
    0%   { transform: translateX(-50%) rotate(calc(var(--deg, 0deg) - 2deg)); }
    50%  { transform: translateX(-50%) rotate(calc(var(--deg, 0deg) + 2deg)); }
    100% { transform: translateX(-50%) rotate(calc(var(--deg, 0deg) - 2deg)); }
  }

  .compass-arrow::before {
    content: "▾";
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -100%);
    font-size: 250%;
    color: #1f203b;
  }

  .overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /*font-size: 25%;*/
    font-weight: bold;
    color: #1f203b;
  }

  .north-label,
  .east-label,
  .south-label,
  .west-label {
    position: absolute;
    
    color: #1f203b;
  }

  .north-label { top: 1%; left: 50%; transform: translateX(-50%); }
  .south-label { bottom: -4%; left: 50%; transform: translateX(-50%); }
  .east-label  { right: 2%; top: 52%; transform: translateY(-50%); }
  .west-label  { left: 2%; top: 52%; transform: translateY(-50%); }

  .spot {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    justify-content: center;
    align-items: center;
    /*font-size: 1vw;*/
  }