/* Selo VIP ao lado do nome (js/vip-selo.js). As cores são as dos planos em
   js/premium-data.js / VIP_PLANO_INFO (shared.js): Genin verde, Chunin azul,
   Jounin laranja. Fundo cheio e texto escuro/claro, para se ler tanto no
   pergaminho claro do ranking como nos painéis escuros. */
.vip-selo {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 6px;
  padding: 1px 7px 1px 6px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, .35);
  font: 800 10px/1.5 Nunito, sans-serif;
  letter-spacing: .6px;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 1px 2px rgba(0, 0, 0, .25);
  cursor: default;
}
.vip-selo::before { content: "\2605"; font-size: 9px; }   /* ★ */
.vip-selo--genin  { background: linear-gradient(#5be08f, #27ae60); color: #0b2e18; }
.vip-selo--chunin { background: linear-gradient(#5dade2, #2471a3); color: #fff; }
.vip-selo--jounin { background: linear-gradient(#ffc95c, #e67e22); color: #3a2000; }
.vip-selo--longo  { font-size: 11px; padding: 2px 10px 2px 8px; text-transform: none; letter-spacing: .3px; }

/* Painel do próprio jogador (game.html → #st2VipSelo). O contentor já tinha
   estilo em status.css; aqui ele só centra o selo e a linha do tempo. */
.st2-vip-selo.vip-ativo {
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border: 0;
  padding: 0;
  background: none;
}
.st2-vip-selo .vip-selo { margin-left: 0; }
.st2-vip-restante { font: 700 10px/1.3 Nunito, sans-serif; color: var(--text-dim, #8a7a5a); }