/* ============================================================
   Vampires vs. Werewolves — Badge Component (BEM reference)
   ------------------------------------------------------------
   Canonical, token-driven, BEM-named badge/chip component for
   rarity / level / event labels.

   Relationship to existing badge-ish CSS in this codebase (so nobody
   re-implements the same thing a fourth time):
     - `badges.css`      → legacy `.badge-vampire/-common/-rare/...`
                            (single-hyphen, still used sitewide — kept
                            as-is, not touched here).
     - `chips-rarity.css` → `.chip` / `.chip--<rarity>` (BEM, pill-shaped,
                            used for inline rarity chips).
     - `badge.css` (this file) → `.vvw-badge` block, the *reference*
                            BEM implementation for the redesign-v2 task
                            ("Badge / chip component for rarity/level/
                            event labels"). New pages should reach for
                            this one; it is deliberately namespaced
                            `.vvw-badge` (not `.badge`) so it cannot
                            collide with the legacy `.badge*` selectors
                            above while both exist side by side.

   Usage:
     <span class="vvw-badge vvw-badge--rare">Rare</span>
     <span class="vvw-badge vvw-badge--legendary">Legendary</span>
     <span class="vvw-badge vvw-badge--level">Lv 42</span>
     <span class="vvw-badge vvw-badge--event-blood-moon">Blood Moon</span>
     <span class="vvw-badge vvw-badge--tier-1">Bronze</span>

     With an icon:
       <span class="vvw-badge vvw-badge--epic">
         <span class="vvw-badge__icon" aria-hidden="true">&#9733;</span>
         Epic
       </span>

   Applied on: achievement.html (`.ach-rarity` tiers now extend
   `.vvw-badge`) — see that file's inline <style> block.
   ============================================================ */

.vvw-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1, 4px);
  padding: 2px 10px;
  border-radius: var(--radius-full, 9999px);
  border: 1px solid transparent;
  background: var(--color-surface-2);
  color: var(--color-text);
  font-family: var(--font-gothic);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.6;
  white-space: nowrap;
  vertical-align: middle;
}

.vvw-badge__icon {
  font-size: 0.9em;
  line-height: 1;
}

/* ── Rarity modifiers (shared tokens with item rarity everywhere else) ── */
.vvw-badge--common    { background: rgba(154,154,154,0.18); color: var(--color-common);    border-color: rgba(154,154,154,0.4); }
.vvw-badge--uncommon  { background: rgba(76,175,125,0.18);  color: var(--color-uncommon);  border-color: rgba(76,175,125,0.4); }
.vvw-badge--rare      { background: rgba(74,128,192,0.18);  color: var(--color-rare);      border-color: rgba(74,128,192,0.4); }
.vvw-badge--epic      { background: rgba(168,85,247,0.18);  color: var(--color-epic);      border-color: rgba(168,85,247,0.4); }
.vvw-badge--legendary {
  background: rgba(249,115,22,0.18);
  color: var(--color-legendary);
  border-color: rgba(249,115,22,0.45);
  box-shadow: 0 0 10px rgba(249,115,22,0.25);
}

/* ── Level modifier ── */
.vvw-badge--level {
  background: var(--color-surface-2);
  color: var(--color-gold);
  border-color: var(--color-gold);
}

/* ── Event modifiers ── */
.vvw-badge--event-blood-moon {
  background: rgba(204,0,0,0.18);
  color: #ff6666;
  border-color: var(--color-blood-moon, #cc0000);
}
.vvw-badge--event-full-moon {
  background: rgba(64,64,160,0.22);
  color: #9aa0ff;
  border-color: var(--color-full-moon, #4040a0);
}

/* ── Achievement-tier modifiers (bronze/silver/gold/purple —
   the 4-tier system used by achievement.html, distinct from item
   rarity but sharing the same badge shape/spacing). ── */
.vvw-badge--tier-1 { background: linear-gradient(135deg,#a06030,#cd7f32); color:#fff; border-color:#cd7f32; }
.vvw-badge--tier-2 { background: linear-gradient(135deg,#7d8b8d,#aab2b3); color:#fff; border-color:#aab2b3; }
.vvw-badge--tier-3 { background: linear-gradient(135deg,var(--color-gold),#f1c40f); color:#1a0a0a; border-color:#f1c40f; }
.vvw-badge--tier-4 { background: linear-gradient(135deg,#7e3eb8,#9b59b6); color:#fff; border-color:#9b59b6; }

/* ── State modifiers (reuses semantic tokens, matches toast/alert colors) ── */
.vvw-badge--success { background: rgba(76,175,125,0.18); color: var(--color-success); border-color: var(--color-success); }
.vvw-badge--danger   { background: rgba(207,68,68,0.18);  color: var(--color-danger);  border-color: var(--color-danger); }
.vvw-badge--warning  { background: rgba(224,160,48,0.18); color: var(--color-warning); border-color: var(--color-warning); }
.vvw-badge--info     { background: rgba(74,128,192,0.18); color: var(--color-info);    border-color: var(--color-info); }