/* Find A Brainrot — rarity utilities.
   The per-tier variables (--rarity, --rarity-rgb, --rarity-gradient, --rarity-contrast) are NOT
   defined here: RarityTheme (app/models/rarity_theme.rb) emits a `.rarity-<slug>` rule for every
   active RarityTier into a <style id="rarity-theme"> block in the layout, so a new tier is styled
   the moment its row exists. Components add `rarity-<slug>` to their root; everything inside
   reads the variables through these utilities. Never write `.btn-legendary`-style classes. */

.rarity-badge {
  display: inline-block; padding: .3em .8em; border-radius: var(--bs-border-radius-pill);
  background: var(--rarity); color: var(--rarity-contrast, var(--fab-ink)); border: 2px solid var(--fab-outline);
  font-weight: 700; font-size: .8rem; line-height: 1.2;
}

/* Gradient + glow badge (a label, not a button) */
.rarity-badge-fab {
  display: inline-block; padding: .2em .7em; border-radius: var(--bs-border-radius-pill);
  background-image: var(--rarity-gradient); color: var(--rarity-contrast, var(--fab-ink));
  border: 2px solid var(--fab-outline); font-weight: 600; font-size: .75rem; line-height: 1.3;
  box-shadow: 0 0 8px rgba(var(--rarity-rgb), .35);
  text-shadow: 0 1px 0 rgba(0,0,0,.2);
  cursor: default; user-select: none;
}

.rarity-border   { border-color: var(--rarity) !important; }
.rarity-text     { color: var(--rarity); }
.rarity-glow     { box-shadow: 0 0 22px rgba(var(--rarity-rgb), .6); }
.rarity-bg-subtle { background: rgba(var(--rarity-rgb), .14); }
.rarity-bg       { background: var(--rarity); color: var(--rarity-contrast, var(--fab-ink)); }

/* Gradient edge: the tier's gradient drawn as the border. Used for the top tier (RarityTier#top?)
   or anywhere a card should feel special. Combine with .rarity-border. */
.rarity-edge {
  border-color: transparent !important;
  background-image: linear-gradient(var(--bs-card-bg, var(--bs-body-bg)), var(--bs-card-bg, var(--bs-body-bg))), var(--rarity-gradient);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}