/* NOTW V83 – one dark-blue, lightly squared social-button design throughout.
   Why: V75's high-specificity !important staff rules kept the circles on
   Designer/Dev, while Hazo's individual Twitch rule became square. This file
   loads LAST and targets the same staff hierarchy, including custom groups. */

/* Staff, Founders, Mods, Designer/Dev, Discord-created custom groups,
   Warzone/Multiplayer, player profiles and creator cards. */
html body.notw-universe main.teams-hub-page .person-socials,
html body.notw-universe .person-socials,
html body.notw-universe .creator-socials,
html body.notw-universe .creator-deck-socials{
  column-gap:8px!important;
  row-gap:7px!important;
}

html body.notw-universe main.teams-hub-page .person-socials a.person-social,
html body.notw-universe .person-socials a.person-social,
html body.notw-universe .creator-socials a.creator-social-icon,
html body.notw-universe .creator-deck-socials a.creator-social-icon{
  box-sizing:border-box!important;
  display:inline-grid!important;
  place-items:center!important;
  flex:0 0 33px!important;
  width:33px!important;
  height:33px!important;
  min-width:33px!important;
  min-height:33px!important;
  max-width:33px!important;
  max-height:33px!important;
  padding:0!important;
  border-radius:6px!important;
  border:1px solid rgba(105,162,225,.38)!important;
  border-color:rgba(105,162,225,.38)!important;
  background:#102039!important;
  color:#d2e4fa!important;
  opacity:1!important;
  box-shadow:none!important;
  filter:none!important;
  text-decoration:none!important;
  transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease!important;
}

/* Explicitly include Twitch: older v78 overrides hid its background. */
html body.notw-universe main.teams-hub-page .person-socials a.person-social-twitch,
html body.notw-universe .person-socials a.person-social-twitch{
  background:#102039!important;
  border:1px solid rgba(105,162,225,.38)!important;
  border-color:rgba(105,162,225,.38)!important;
  color:#d2e4fa!important;
  filter:none!important;
  box-shadow:none!important;
  border-radius:6px!important;
}

html body.notw-universe main.teams-hub-page .person-socials a.person-social:hover,
html body.notw-universe main.teams-hub-page .person-socials a.person-social:focus-visible,
html body.notw-universe .person-socials a.person-social:hover,
html body.notw-universe .person-socials a.person-social:focus-visible,
html body.notw-universe .creator-socials a.creator-social-icon:hover,
html body.notw-universe .creator-socials a.creator-social-icon:focus-visible,
html body.notw-universe .creator-deck-socials a.creator-social-icon:hover,
html body.notw-universe .creator-deck-socials a.creator-social-icon:focus-visible,
html body.notw-universe .person-socials a.person-social-twitch:hover,
html body.notw-universe .person-socials a.person-social-twitch:focus-visible{
  background:#193353!important;
  border-color:#8bbef5!important;
  color:#fff!important;
  transform:translateY(-1px)!important;
  box-shadow:none!important;
  filter:none!important;
}

/* Crisp, high-contrast glyphs; Instagram stays outlined. */
html body.notw-universe main.teams-hub-page .person-socials a.person-social > svg,
html body.notw-universe .person-socials a.person-social > svg,
html body.notw-universe .creator-socials a.creator-social-icon > svg,
html body.notw-universe .creator-deck-socials a.creator-social-icon > svg,
html body.notw-universe .person-socials a.person-social-twitch > svg{
  display:block!important;
  width:17px!important;
  height:17px!important;
  min-width:17px!important;
  min-height:17px!important;
  max-width:17px!important;
  max-height:17px!important;
  color:currentColor!important;
  fill:none!important;
  stroke:none!important;
  filter:none!important;
}
html body.notw-universe main.teams-hub-page .person-socials a.person-social > svg path,
html body.notw-universe .person-socials a.person-social > svg path,
html body.notw-universe .creator-social-icon > svg path{
  fill:currentColor!important;
  stroke:none!important;
}
html body.notw-universe main.teams-hub-page .person-socials a.person-social > svg rect,
html body.notw-universe main.teams-hub-page .person-socials a.person-social > svg circle,
html body.notw-universe .person-socials a.person-social > svg rect,
html body.notw-universe .person-socials a.person-social > svg circle,
html body.notw-universe .creator-social-icon > svg rect,
html body.notw-universe .creator-social-icon > svg circle{
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.8!important;
}
/* YouTube glyph: knock a hole for the white triangle instead of a solid block. */
html body.notw-universe .person-socials a[title="YouTube"] svg path:last-child,
html body.notw-universe .creator-social-icon svg .play{
  fill:#102039!important;
}
html body.notw-universe .person-socials a[title="YouTube"]:hover svg path:last-child,
html body.notw-universe .person-socials a[title="YouTube"]:focus-visible svg path:last-child,
html body.notw-universe .creator-social-icon:hover svg .play,
html body.notw-universe .creator-social-icon:focus-visible svg .play{
  fill:#193353!important;
}

/* Larger personal profiles keep their spacious buttons with the same shape. */
html body.notw-universe .profile-person-socials a.person-social{
  flex:0 0 40px!important;
  width:40px!important;height:40px!important;
  min-width:40px!important;min-height:40px!important;
  max-width:40px!important;max-height:40px!important;
  border-radius:7px!important;
}
html body.notw-universe .profile-person-socials a.person-social > svg{
  width:19px!important;height:19px!important;
  min-width:19px!important;min-height:19px!important;
  max-width:19px!important;max-height:19px!important;
}

@media(max-width:720px){
  html body.notw-universe main.teams-hub-page .person-socials a.person-social,
  html body.notw-universe .person-socials a.person-social,
  html body.notw-universe .creator-socials a.creator-social-icon,
  html body.notw-universe .creator-deck-socials a.creator-social-icon{
    flex-basis:32px!important;
    width:32px!important;height:32px!important;
    min-width:32px!important;min-height:32px!important;
    max-width:32px!important;max-height:32px!important;
  }
  html body.notw-universe .profile-person-socials a.person-social{
    flex-basis:40px!important;
    width:40px!important;height:40px!important;
    min-width:40px!important;min-height:40px!important;
    max-width:40px!important;max-height:40px!important;
  }
}