/* ══════════════════════════════════════════════════════════════════
   pimpstar-rank-titles.css — playful rank titles on the leaderboard
   Styles the "TOP PIMP" / "Heartbreaker" flavor titles added in
   pimpstarai.js. Pairs with the rankings view. Uses the theme vars.
   ══════════════════════════════════════════════════════════════════ */

/* ── podium rank title (under the name on the top-3 cards) ── */
.rk-podium-rank {
  display: inline-block;
  margin-top: 5px;
  padding: 3px 11px;
  font-family: var(--fm, 'JetBrains Mono', monospace);
  font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  color: var(--pink, #ff2d78);
  background: var(--pink-soft, rgba(255,45,120,.1));
  border: 1px solid var(--pink-dim, rgba(255,45,120,.28));
  border-radius: 999px;
  white-space: nowrap;
}
/* #1 gets the gold/crown treatment — the "Top Pimp" throne */
.rk-podium-rank.top {
  color: #1a1206;
  background: linear-gradient(135deg, #ffd76a, #ff9d2b);
  border: 1px solid rgba(255,220,120,.7);
  font-size: 11px; letter-spacing: 1.2px;
  box-shadow: 0 2px 10px rgba(255,170,40,.4), 0 0 18px rgba(255,190,60,.3);
  animation: rkTopGlow 2.8s ease-in-out infinite;
}
@keyframes rkTopGlow {
  0%, 100% { box-shadow: 0 2px 10px rgba(255,170,40,.4), 0 0 14px rgba(255,190,60,.25); }
  50%      { box-shadow: 0 2px 10px rgba(255,170,40,.5), 0 0 26px rgba(255,200,80,.55); }
}
.place-1 .rk-podium-rank { font-size: 11px; }

/* ── list-row rank title (little tag beside the name for #4+) ── */
.rk-row-rank {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  font-family: var(--fm, 'JetBrains Mono', monospace);
  font-size: 8.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
  color: var(--mid, #9fb0c8);
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border2, rgba(255,45,120,.2));
  border-radius: 999px;
  vertical-align: middle;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  .rk-podium-rank.top { animation: none; }
}
@media (max-width: 600px) {
  .rk-podium-rank { font-size: 9px; padding: 2px 8px; letter-spacing: .6px; }
  .rk-row-rank { display: none; }   /* keep rows compact on phones */
}