:root { --fi-path: "/assets/flag_icons/flags"; }

/* force true circle and pixel sizing, override library's em rules */
.flag-circle,
.flag-circle.fi,
.flag-circle.fis{
  width:22px !important;
  height:22px !important;
  line-height:22px !important;
  border-radius:50% !important;
  display:inline-block !important;
  overflow:hidden !important;
  background-size:100% 100% !important;  /* edge-to-edge */
  background-position:center center !important;
  background-repeat:no-repeat !important;
  box-shadow:0 0 0 2px rgba(0,0,0,.6);
}
/* Force flag to fully fill its circle (remove thin border) */
.flag-circle,
.flag-circle.fi,
.flag-circle.fis {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.6);
}
/* --- Final fix: bleed flag background slightly past edges --- */
.flag-circle,
.flag-circle.fi,
.flag-circle.fis {
  background-size: 115% !important;   /* slightly zoom in to hide gray edge */
  background-position: center !important;
  background-repeat: no-repeat !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6);
}
/* Positioning context for the badge */
.roster-card .roster-visual {
  position: relative;
}

/* Put the small flag on the card’s bottom-right corner */
.roster-card .flag-on-card {
  position: absolute;
  right: 10px;
  bottom: 10px;
}