/* ===== BOTÃO HAMBURGUER RPG ===== */

#social-hamburger {

  position: fixed;

  top: 18px;

  right: 25px;

  z-index: 9999;

  cursor: pointer;

}



#social-hamburger span {

  display: block;

  width: 30px;

  height: 3px;

  background: linear-gradient(90deg, #ffb84d, #ff7b00);

  margin: 6px 0;

  box-shadow: 0 0 8px rgba(255,140,0,.8);

}



/* ===== OVERLAY ===== */

#social-overlay {

  position: fixed;

  inset: 0;

  background: rgba(0,0,0,.75);

  backdrop-filter: blur(2px);

  display: none;

  z-index: 9998;

}



#social-overlay.active {

  display: block;

}



/* ===== PAINEL RPG ===== */

#social-panel {

  position: fixed;

  top: 0;

  right: -320px;

  width: 320px;

  height: 100%;

  background: radial-gradient(circle at top, #1a0f05, #050301);

  border-left: 2px solid #cfa14a;

  box-shadow: -10px 0 30px rgba(255,170,60,.25);

  padding: 20px;

  transition: 0.4s ease;

  z-index: 9999;

}



#social-panel.active {

  right: 0;

}



/* ===== TOPO ===== */

.social-top {

  display: flex;

  justify-content: space-between;

  align-items: center;

  font-family: 'Cinzel', serif;

  font-size: 14px;

  letter-spacing: 1px;

  color: #f5d38a;

  margin-bottom: 25px;

  text-transform: uppercase;

}



.social-top button {

  background: none;

  border: none;

  color: #ffb84d;

  font-size: 18px;

  cursor: pointer;

  text-shadow: 0 0 8px rgba(255,180,70,.8);

}



/* ===== LINKS RPG ===== */

#social-panel a {

  display: block;

  padding: 14px;

  margin-bottom: 15px;

  font-family: 'Cinzel', serif;

  font-size: 14px;

  letter-spacing: 1px;

  color: #f1e6c8;

  text-decoration: none;

  background: linear-gradient(180deg, #2b1a0b, #120a04);

  border: 1px solid #8a5a1f;

  border-radius: 6px;

  box-shadow:

    inset 0 0 10px rgba(255,180,80,.15),

    0 0 10px rgba(0,0,0,.9);

  transition: 0.3s;

}



/* HOVER RPG */

#social-panel a:hover {

  color: #fff3d6;

  border-color: #ffb84d;

  box-shadow:

    inset 0 0 12px rgba(255,200,120,.35),

    0 0 20px rgba(255,170,60,.6);

  transform: translateX(-4px);

}

/* ===== LOGO NO FUNDO DO PAINEL (AJUSTADA) ===== */

.social-logo {

  position: absolute;

  bottom: 25px;

  left: 50%;

  transform: translateX(-50%);

  width: 200px;

  opacity: 0.65; /* AQUI estava o problema */

  pointer-events: none;

}



.social-logo img {

  width: 100%;

  filter:

    brightness(1.25)

    contrast(1.15)

    drop-shadow(0 0 18px rgba(255,160,60,0.9))

    drop-shadow(0 0 35px rgba(255,90,0,0.6));

}

/* ===== SETA CHAMANDO ATENÇÃO ===== */

/* ===== SETA CENTRALIZADA NAS BARRINHAS ===== */

#social-arrow {

  position: fixed;

  top: 15px;              /* CENTRALIZA NO MEIO DAS 3 BARRAS */

  right: 70px;            /* MAIS AFASTADA DO MENU */

  font-size: 26px;

  color: #ffb84d;

  z-index: 9999;

  pointer-events: none;

  text-shadow:

    0 0 8px rgba(255,180,80,.9),

    0 0 18px rgba(255,120,40,.8);

  animation: arrowPulse 1.2s infinite;

  font-family: serif;

}





/* ===== ANIMAÇÃO RPG ===== */

@keyframes arrowPulse {

  0% {

    opacity: 0;

    transform: translateX(0);

  }

  50% {

    opacity: 1;

    transform: translateX(6px);

  }

  100% {

    opacity: 0;

    transform: translateX(0);

  }

}