/* Botões grandes de Discord usando a arte oficial fornecida. */
a.btn[data-social-link="discord"],
a.v4-btn-discord[data-social-link="discord"],
#cp-join-discord {
  position: relative !important;
  display: inline-block !important;
  width: 260px !important;
  max-width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  aspect-ratio: 596 / 155;
  padding: 0 !important;
  margin-inline: auto;
  align-self: center !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  background: url("../images/discord-button.webp") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 1 !important;
  text-shadow: none !important;
  filter: none !important;
  animation: none !important;
  isolation: isolate;
}

a.btn[data-social-link="discord"]::before,
a.v4-btn-discord[data-social-link="discord"]::before,
#cp-join-discord::before {
  display: none !important;
  content: none !important;
}

a.btn[data-social-link="discord"]::after,
a.v4-btn-discord[data-social-link="discord"]::after,
#cp-join-discord::after {
  content: "DISCORD" !important;
  position: absolute !important;
  inset: 50% 5% auto 31% !important;
  width: auto !important;
  height: auto !important;
  transform: translateY(-50%) !important;
  display: block !important;
  background: none !important;
  color: #fff !important;
  opacity: 1 !important;
  font-family: "Cinzel", serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: .12em !important;
  text-align: center !important;
  text-shadow: 0 2px 7px rgba(4, 12, 48, .9) !important;
  pointer-events: none;
}

a.btn[data-social-link="discord"]:hover,
a.v4-btn-discord[data-social-link="discord"]:hover,
#cp-join-discord:hover {
  transform: translateY(-3px) scale(1.02) !important;
  filter: brightness(1.08) drop-shadow(0 9px 18px rgba(47, 82, 205, .35)) !important;
}

#cp-join-discord {
  display: block !important;
  width: min(320px, 100%) !important;
}

@media (max-width: 520px) {
  a.btn[data-social-link="discord"],
  a.v4-btn-discord[data-social-link="discord"],
  #cp-join-discord {
    width: min(260px, 100%) !important;
  }
}

/* A v1 possui uma regra ornamental de especificidade alta; esta sobrescrita
   garante que o Discord use sempre a imagem azul. */
html body a.btn.btn-outline[data-social-link="discord"] {
  width: 260px !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  aspect-ratio: 596 / 155 !important;
  padding: 0 !important;
  align-self: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  background: url("../images/discord-button.webp") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  color: transparent !important;
  font-size: 0 !important;
  filter: none !important;
}

html body a.btn.btn-outline[data-social-link="discord"]::before {
  display: none !important;
  content: none !important;
}

html body a.btn.btn-outline[data-social-link="discord"]::after {
  content: "DISCORD" !important;
  position: absolute !important;
  inset: 50% 5% auto 31% !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  transform: translateY(-50%) !important;
  background: none !important;
  color: #fff !important;
  opacity: 1 !important;
  font-family: "Cinzel", serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: .12em !important;
  text-align: center !important;
}