.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; }