/* NALAROO Family Badge — approved circular storybook artwork.
   Icon-only trigger; native <summary> remains keyboard/touch accessible.
   Accessible name and hover tooltip come from index.html. */
#family-menu>summary{
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:row;
  gap:0;
  text-align:center;
}
#family-menu>summary .family-badge-icon{
  display:block;
  width:48px;
  height:48px;
  max-width:100%;
  flex-shrink:0;
  object-fit:contain;
  pointer-events:none;
}
body.living-world-view #family-menu>summary,
body.explorer-view #family-menu>summary{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:row;
  width:64px;
  max-width:64px;
  height:64px;
  min-height:64px;
  padding:6px;
  gap:0;
  text-align:center;
}
body.living-world-view #family-menu>summary .family-badge-icon,
body.explorer-view #family-menu>summary .family-badge-icon{
  width:48px;
  height:48px;
}
@media(max-width:900px){
  body.explorer-view #family-menu>summary,
  body.living-world-view #family-menu>summary{
    width:56px;
    max-width:56px;
    height:56px;
    min-height:56px;
    padding:4px;
  }
  body.explorer-view #family-menu>summary .family-badge-icon,
  body.living-world-view #family-menu>summary .family-badge-icon{
    width:44px;
    height:44px;
  }
}
@media(max-height:450px){
  body.explorer-view #family-menu>summary,
  body.living-world-view #family-menu>summary{
    width:50px;
    max-width:50px;
    height:50px;
    min-height:50px;
    padding:3px;
  }
  body.explorer-view #family-menu>summary .family-badge-icon,
  body.living-world-view #family-menu>summary .family-badge-icon{
    width:40px;
    height:40px;
  }
}
@media(prefers-reduced-motion:reduce){
  #family-menu>summary .family-badge-icon{transition:none!important}
}