<div class="ccm-compass">
  <input type="radio" name="ccm-compass" id="ccm-compass-n" hidden checked />
  <input type="radio" name="ccm-compass" id="ccm-compass-e" hidden />
  <input type="radio" name="ccm-compass" id="ccm-compass-s" hidden />
  <input type="radio" name="ccm-compass" id="ccm-compass-w" hidden />
  <div class="ccm-compass-face"></div>
  <div class="ccm-compass-needle" aria-hidden="true"></div>
  <label for="ccm-compass-n" class="ccm-compass-i" style="--a: 0deg">N</label>
  <label for="ccm-compass-e" class="ccm-compass-i" style="--a: 90deg">E</label>
  <label for="ccm-compass-s" class="ccm-compass-i" style="--a: 180deg">S</label>
  <label for="ccm-compass-w" class="ccm-compass-i" style="--a: 270deg">W</label>
</div>

.ccm-compass {
  position: relative;
  width: 190px;
  height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ccm-compass-face {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center, #2a2a3e, #15151d);
  border: 2px solid rgba(212, 175, 55, 0.5);
  box-shadow:
    inset 0 0 24px rgba(212, 175, 55, 0.2),
    0 4px 16px rgba(0, 0, 0, 0.4);
}

.ccm-compass-needle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 70px;
  margin: -35px -2px;
  background: linear-gradient(180deg, #ff3d6e 0 50%, #d4af37 50% 100%);
  transform-origin: center;
  transform: rotate(0deg);
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  border-radius: 2px;
}

.ccm-compass:has(#ccm-compass-n:checked) .ccm-compass-needle {
  transform: rotate(0deg);
}

.ccm-compass:has(#ccm-compass-e:checked) .ccm-compass-needle {
  transform: rotate(90deg);
}

.ccm-compass:has(#ccm-compass-s:checked) .ccm-compass-needle {
  transform: rotate(180deg);
}

.ccm-compass:has(#ccm-compass-w:checked) .ccm-compass-needle {
  transform: rotate(270deg);
}

.ccm-compass-i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 28px;
  margin: -14px;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.18);
  color: #ffd479;
  font:
    700 12px/28px ui-monospace,
    monospace;
  text-align: center;
  cursor: pointer;
  border: 1px solid rgba(212, 175, 55, 0.4);
  transform: rotate(var(--a)) translate(80px) rotate(calc(var(--a) * -1));
  transition:
    background 0.2s,
    color 0.2s,
    transform 0.2s;
}

.ccm-compass-i:hover {
  background: rgba(212, 175, 55, 0.4);
  color: #fff;
}