.catch-reward-modal { --rarity-color: #8a9aa2; --rarity-soft: #dfe8e6; }
.catch-reward-modal[data-rarity="common"] { --rarity-color: #8a9aa2; --rarity-soft: #dfe8e6; }
.catch-reward-modal[data-rarity="uncommon"] { --rarity-color: #3eaa77; --rarity-soft: #d5f0df; }
.catch-reward-modal[data-rarity="rare"] { --rarity-color: #448fdb; --rarity-soft: #d8e9fb; }
.catch-reward-modal[data-rarity="epic"] { --rarity-color: #9a62d4; --rarity-soft: #eadcf8; }
.catch-reward-modal[data-rarity="legendary"] { --rarity-color: #d18b2d; --rarity-soft: #ffedbf; }
.catch-reward-modal[data-rarity="mystic"] { --rarity-color: #d653aa; --rarity-soft: #f8d8ee; }

.catch-reward-rarity {
  position: relative;
  display: inline-block;
  margin: 4px 0 2px;
  padding: 4px 9px 3px;
  border: 2px solid var(--rarity-color);
  border-radius: 999px;
  background: var(--rarity-soft);
  color: var(--rarity-color);
  font: 800 9px 'DM Mono', monospace;
  letter-spacing: .1em;
}

.catch-reward-modal[data-rarity="legendary"] .catch-reward-rarity,
.catch-reward-modal[data-rarity="mystic"] .catch-reward-rarity { box-shadow: 0 0 0 2px rgba(255, 255, 255, .35), 0 3px 0 rgba(23, 51, 69, .18); }

.catch-item { border: 2px solid transparent; }
.catch-item[data-rarity="common"] { border-color: #aab8b8; }
.catch-item[data-rarity="uncommon"] { border-color: #5db98a; }
.catch-item[data-rarity="rare"] { border-color: #6ba8e8; }
.catch-item[data-rarity="epic"] { border-color: #ae81dc; }
.catch-item[data-rarity="legendary"] { border-color: #d9a94e; }
.catch-item[data-rarity="mystic"] { border-color: #e37bc0; }
.catch-item small em { display: block; margin-top: 2px; color: var(--rarity-color, #69818c); font: 800 8px 'DM Mono', monospace; font-style: normal; }

body.dark-mode .catch-reward-rarity { color: var(--rarity-color); background: color-mix(in srgb, var(--rarity-soft) 28%, #1d2636); }
body.dark-mode .catch-item[data-rarity="common"] { border-color: #849599; }
body.dark-mode .catch-item[data-rarity="uncommon"] { border-color: #5fbd91; }
body.dark-mode .catch-item[data-rarity="rare"] { border-color: #72b5f0; }
body.dark-mode .catch-item[data-rarity="epic"] { border-color: #b48be2; }
body.dark-mode .catch-item[data-rarity="legendary"] { border-color: #e0b45c; }
body.dark-mode .catch-item[data-rarity="mystic"] { border-color: #ed86c6; }

@supports not (color: color-mix(in srgb, white, black)) {
  body.dark-mode .catch-reward-rarity { background: #30394b; }
}