.trail-cluster {
  background: transparent;
  border: 0;
  border-radius: 50%;
}
.cluster-bubble {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 2px solid #664365;
  border-radius: 44% 46% 44% 42%;
  background: #ffd6a0;
  color: #50354f;
  font: 850 15px/1 ui-sans-serif, system-ui, sans-serif;
  box-shadow: 0 2px 0 #fff8e8, 0 4px 9px #44283d40;
}
.cluster-bubble::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  width: 7px;
  height: 8px;
  border: 1px solid #4b5d3d;
  border-radius: 5px 2px 0 0;
  background: #7b9059;
  transform: translateX(-50%) rotate(15deg);
}
.trail-cluster:hover .cluster-bubble { background: #ffe6c0; }
.trail-cluster:focus-visible { outline: 3px solid #fff8e8; outline-offset: 3px; }
.trail-cluster:focus-visible .cluster-bubble { box-shadow: 0 0 0 3px #664365; }
.tiny-badge.nine { background: #e3efcf; color: #3e5a27; }
[data-theme="dark"] .cluster-bubble { background: #68445f; color: #fff5e7; border-color: #f5bc8a; box-shadow: 0 2px 0 #2c2029, 0 4px 10px #0008; }
[data-theme="dark"] .trail-cluster:hover .cluster-bubble { background: #80516f; }
[data-theme="dark"] .tiny-badge.nine { background: #304321; color: #d3e9ad; }