/*
 * HOW OFTEN THE GAME DRAWS A THING, ONE LOOK ON EVERY SURFACE.
 *
 * The game authors seven loot tiers (`EItemRarity` and a preset's per-item weight): Extremely rare,
 * Very rare, Rare, Uncommon, Common, Abundant, Always. This file is the ONE place their colours live.
 * The field console and the admin panel load it beside catalogue.css; scumsa.com loads the copy
 * `ops/sync_database_assets.php` writes into `database/assets/`, on the database pages AND the map.
 * The words are `found.rarity.<Tier>` in the frontend locales, which scumsa reads from the same copy.
 *
 * A tier is a NUMBER, the same on every surface: 1 Extremely rare … 5 Common, 6 Abundant, 7 Always
 * (`RARITY` in itemRecord.js, `WL_RANK_WORD` index + 1 in scumsa's inc/world_links.php).
 *
 * The colours follow the convention players already read in games: grey for common, green, blue,
 * violet, and gold for the rarest. Each is light enough for dark ink on it (6:1 or better), and the
 * pips beside every word say the same thing without colour.
 */
:root {
  --rar-1: #ffb02e;   /* Extremely rare */
  --rar-2: #b583ff;   /* Very rare */
  --rar-3: #52a8ff;   /* Rare */
  --rar-4: #5fd16d;   /* Uncommon */
  --rar-5: #a3aeb9;   /* Common */
  --rar-6: #ccd3da;   /* Abundant */
  --rar-7: #f3efe6;   /* Always */
  --rar-ink: #0b0d10;
}
.rar-1 { --rar: var(--rar-1); --badge-bg: var(--rar-1); }
.rar-2 { --rar: var(--rar-2); --badge-bg: var(--rar-2); }
.rar-3 { --rar: var(--rar-3); --badge-bg: var(--rar-3); }
.rar-4 { --rar: var(--rar-4); --badge-bg: var(--rar-4); }
.rar-5 { --rar: var(--rar-5); --badge-bg: var(--rar-5); }
.rar-6 { --rar: var(--rar-6); --badge-bg: var(--rar-6); }
.rar-7 { --rar: var(--rar-7); --badge-bg: var(--rar-7); }

/* The word: pips (how often, one to six; "Always" fills all six), then the tier in its colour. */
.rar-odds { display: inline-flex; align-items: center; gap: 2px; flex: none; white-space: nowrap; }
.rar-odds > i { display: inline-block; width: 0.42rem; height: 0.7rem; border-radius: 1px; background: rgba(255, 255, 255, 0.14); }
.rar-odds > i.on { background: var(--rar, #a3aeb9); }
.rar-odds > b { margin-left: 0.4rem; color: var(--rar, #a3aeb9); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.01em; }

/* A filled dot in the tier's colour, for a legend or a list line. */
.rar-dot { display: inline-block; flex: none; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--rar, #a3aeb9);
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.6); vertical-align: -1px; }

/* The key: every tier on screen, in order, with how many places carry it. */
.rar-key { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.8rem; margin: 0; padding: 0; list-style: none; font-size: 0.76rem; }
.rar-key > li, .rar-key > span { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; color: var(--rar, #a3aeb9); font-weight: 600; }
.rar-key b { color: inherit; font-weight: 700; opacity: 0.75; font-variant-numeric: tabular-nums; }
.rar-key .rar-key-h { color: inherit; opacity: 0.7; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.66rem; }

/* The two rarest tiers glow on a map, so the eye finds the prize first. */
.rar-mk.rar-1, .rar-mk.rar-2 { filter: drop-shadow(0 0 4px var(--rar)) drop-shadow(0 0 1px rgba(0, 0, 0, 0.8)); }