/* BRASLOL 2 - botao do Discord da tela inicial (abaixo do Jogar) + menu que expande com o aviso de saida.
   Classes com prefixo hdc-. Sem style="" (CSP): so classes aqui; o JS troca apenas a classe .open e o atributo inert.
   O logo e assets/img/ui/discord.svg (branco, fundo transparente). */
.hdc{position:relative;display:block;width:fit-content;max-width:100%;margin-top:12px}
.hdc-btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;padding:14px 26px}
.hdc-logo{display:block;height:18px;width:auto;pointer-events:none;user-select:none;-webkit-user-select:none}
.hdc-btn::after{content:'';flex:none;width:7px;height:7px;margin-top:-3px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;opacity:.7;transform:rotate(45deg);transition:transform .25s ease}   /* seta: aponta para baixo; vira para cima com o menu aberto */
.hdc.open .hdc-btn::after{margin-top:3px;transform:rotate(225deg)}

/* menu: flutua logo abaixo do botao (nao empurra o titulo nem o boneco 3D) */
.hdc-p{position:absolute;z-index:6;top:calc(100% + 8px);left:0;box-sizing:border-box;width:min(390px,calc(100vw - 2 * clamp(20px,5vw,56px)));padding:20px 22px 22px;
  background:#181818;border-radius:0;box-shadow:0 12px 40px rgba(0,0,0,.6);
  opacity:0;visibility:hidden;transform:translateY(-6px) scaleY(.94);transform-origin:top left;
  transition:opacity .2s ease,transform .25s ease,visibility 0s linear .25s}
.hdc.open .hdc-p{opacity:1;visibility:visible;transform:none;transition:opacity .2s ease,transform .25s ease,visibility 0s}
.hdc-t{font-size:18px;font-weight:800;letter-spacing:-.01em;color:#fff}
.hdc-d{margin-top:8px;font-size:14px;font-weight:400;line-height:1.45;color:#b3b3b3}
.hdc-a{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.hdc-b{padding:13px 22px;font-size:14px}