:root {
  --bolla-fondo: #1b1e2b;       
  --bolla-bordo: #ff6fa5;       
  --bolla-testo: #eceef5;       
}





.bolla {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bolla-fondo);
  color: var(--bolla-testo);
  border: 2px solid var(--bolla-bordo);
  


  box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 3px 9px rgba(0, 0, 0, .55);
  font: 800 14px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
   
  -webkit-user-select: none;
  user-select: none;
}




.bolla-m {
  font-size: 15px;
  border-width: 3px;
  background: #232739;
}
.bolla-l {
  font-size: 17px;
  border-width: 3px;
  background: #232739;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .9),
              0 0 12px rgba(255, 111, 165, .45),
              0 3px 10px rgba(0, 0, 0, .6);
}



.leaflet-marker-icon:hover > .bolla,
.leaflet-marker-icon:active > .bolla {
  border-color: #fff;
  background: #2c3044;
}



@media (max-width: 720px) {
  .bolla { font-size: 16px; }
  .bolla-m { font-size: 17px; }
  .bolla-l { font-size: 19px; }
}






.leaflet-cluster-anim .leaflet-marker-icon,
.leaflet-cluster-anim .leaflet-marker-shadow {
  transition: transform .3s ease-out, opacity .3s ease-in;
}
.leaflet-cluster-spider-leg {
  transition: stroke-dashoffset .3s ease-out, stroke-opacity .3s ease-in;
}



@media (prefers-reduced-motion: reduce) {
  .leaflet-cluster-anim .leaflet-marker-icon,
  .leaflet-cluster-anim .leaflet-marker-shadow,
  .leaflet-cluster-spider-leg {
    transition: none;
  }
}