/* A medalha do VIP no cartão de Poder (28/08/2026). Ver `index.js`.
 *
 * 🚨 O cartão `.power` é do React e NÃO tem `position: relative` garantido —
 * por isso a medalha é posicionada com `margin-left: auto` dentro do fluxo dele,
 * e não com `position: absolute`. Absoluto dependeria de um contexto que o
 * React pode mudar num render, e a medalha sairia voando pela tela.
 */

/* 🚨 A REFERÊNCIA da medalha. Só isto: `position: relative` não desloca nada,
   apenas dá ao `absolute` de baixo um ponto de origem. Sem ele a medalha se
   penduraria num ancestral qualquer e sairia voando pela tela. */
.profile {
  position: relative;
}

#vip-medalha {
  /*
   * 🚨 FORA DO FLUXO, e é isso que atende ao "sem mover nada de lugar". Na
   * primeira versão ela era um item flex do cartão de Poder: quebrava para a
   * linha de baixo e empurrava o cartão inteiro para baixo.
   *
   * O lugar é o canto direito, na altura entre a placa de Lendário Fundador (no
   * alto) e a barra de XP (embaixo) — os 56% descem um pouco do meio para cair
   * nesse vão, que foi onde ele desenhou.
   */
  position: absolute;
  right: clamp(6px, 0.8vw, 14px);
  top: 56%;
  translate: 0 -50%;
  z-index: 2;
  display: grid;
  place-items: center;
  /* Pequena, como ele pediu: ela divide o canto com a placa do Fundador. */
  width: clamp(28px, 2.6vw, 44px);
  height: clamp(28px, 2.6vw, 44px);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: filter 0.14s ease, scale 0.12s ease;
}

#vip-medalha img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgb(0 0 0 / 0.55));
}

/* SEM VIP: apagado, como ele pediu. Cinza e meio transparente, não escondido —
   é o convite, e um ícone invisível não convida ninguém. */
#vip-medalha[data-vip='0'] img {
  filter: grayscale(1) brightness(0.62) drop-shadow(0 2px 4px rgb(0 0 0 / 0.55));
  opacity: 0.62;
}

/* COM VIP: aceso, com um brilho dourado discreto por trás. */
#vip-medalha[data-vip='1'] img {
  filter: drop-shadow(0 0 6px rgb(255 201 74 / 0.45)) drop-shadow(0 2px 4px rgb(0 0 0 / 0.55));
}

#vip-medalha:hover {
  scale: 1.06;
}
#vip-medalha:active {
  scale: 0.96;
}
#vip-medalha:focus-visible {
  outline: 2px solid var(--rpg-ouro, #ffc94a);
  outline-offset: 3px;
  border-radius: 8px;
}

/* ── a caixinha de assinar ─────────────────────────────────────────── */

.vipmed-dlg { border: 0; padding: 0; background: none; color: inherit }
.vipmed-dlg::backdrop { background: rgba(2, 6, 14, .62) }

.vipmed-dlg__caixa {
  display: grid;
  justify-items: center;
  gap: 10px;
  max-width: min(92vw, 430px);
  padding: 18px 20px 16px;
  border-radius: 14px;
  background: linear-gradient(180deg, #1b2130, #141924);
  box-shadow: inset 0 0 0 1px #ffffff24, 0 12px 40px #000a;
  font-family: 'Baloo 2', system-ui, sans-serif;
  text-align: center;
}
.vipmed-dlg__icone { width: 76px; height: 76px; object-fit: contain }
.vipmed-dlg .dialog__title { margin: 0; color: #ffd76a; font-size: 18px; font-weight: 700 }
.vipmed-dlg__fala { margin: 0; color: #e8ecf5; font-size: 14px; line-height: 1.4 }
.vipmed-dlg__fala b { color: #ffd76a }

.vipmed-dlg__opcoes { display: flex; gap: 10px; margin-top: 4px; flex-wrap: wrap; justify-content: center }
.vipmed-dlg__op {
  padding: 9px 16px; border: 0; border-radius: 10px;
  background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 0 0 1px #ffffff2e;
  color: #e8ecf5; font: inherit; font-size: 14px; cursor: pointer;
}
.vipmed-dlg__op:hover { filter: brightness(1.15) }
.vipmed-dlg__op--forte {
  background: linear-gradient(180deg, #ffd979, #e0a52e);
  box-shadow: inset 0 0 0 1px #00000059;
  color: #1b1205; font-weight: 700;
}