/* ===================================== */
/* ===== GANHE - TOOLTIP EXCLUSIVO ===== */
/* ===================================== */

.ganhe-wrapper{
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* ===== EFEITO GANGORRA ===== */

.ganhe-trigger{
  color: var(--gold);
  font-weight: bold;
  font-size:14px;
  padding:4px 10px;
  border:1px solid var(--gold);
  border-radius:6px;
  display:inline-block;
  background: rgba(192,24,24,0.15); /* vermelho interno sutil */

  /* sombra dourada externa + vermelho interno */
  box-shadow:
    0 0 8px rgba(201,162,63,.6),      /* glow dourado externo */
    inset 0 0 12px rgba(192,24,24,.35); /* brilho vermelho interno */

  transition: all .3s ease;
  animation: ganheRock 3s infinite ease-in-out;
}
.ganhe-trigger:hover{
  box-shadow:
    0 0 15px rgba(201,162,63,.9),
    inset 0 0 18px rgba(192,24,24,.5);
  transform: scale(1.05);
}


/* animação suave */
@keyframes ganheRock{
  0%   { transform: rotate(0deg); }
  10%  { transform: rotate(-2deg); }
  20%  { transform: rotate(2deg); }
  30%  { transform: rotate(-1deg); }
  40%  { transform: rotate(1deg); }
  50%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

/* ===== TOOLTIP ===== */

.ganhe-tooltip{
  position:absolute;
  top:120%;
  left:50%;
  transform:translateX(-50%) translateY(10px);
  width:420px;
  max-width:90vw;
  padding:28px;

  background:#0c0c0c;
  border:1px solid rgba(201,162,63,.4);

  box-shadow:
    0 0 0 1px rgba(192,24,24,.35),
    0 0 25px rgba(192,24,24,.6),
    0 0 50px rgba(192,24,24,.35);

  opacity:0;
  pointer-events:none;
  transition:all .4s ease;
  z-index:999;
}

.ganhe-tooltip h3{
  font-family:'Cinzel', serif;
  color:var(--gold);
  font-size:18px;
  letter-spacing:2px;
  margin-bottom:15px;
  text-align:center;
}

.ganhe-tooltip p{
  font-family:'CG-Light', serif;
  font-size:16px;
  color:#d0d0d0;
  line-height:1.6;
  text-align:justify;
}

/* ===== DESKTOP ===== */
@media (hover:hover){
  .ganhe-wrapper:hover .ganhe-tooltip{
    opacity:1;
    transform:translateX(-50%) translateY(0);
    pointer-events:auto;
  }
}

/* ===== MOBILE CENTRALIZADO NA TELA ===== */
@media (max-width:768px){

  .ganhe-tooltip{
    position: fixed;          /* sai da referência do botão */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -40%);
    width: 92vw;
    max-width: 92vw;
    z-index: 3000;
  }

  .ganhe-wrapper.active .ganhe-tooltip{
    opacity:1;
    transform: translate(-50%, -50%);
    pointer-events:auto;
  }

}