/* ============================================================================
   rez.css — shared Rezarus UI helpers that need to work across multiple pages.
   Loaded globally from html/structure/head.php (after the theme CSS). Keep
   selectors generic, but specific enough not to collide with page styles.
============================================================================ */

/* ----------------------------------------------------------------------------
   Rank emblems
   ----------------------------------------------------------------------------
   Markup is produced by Helpers::GetRankEmblem() / GetRankEmblemForScore()
   (php-scripts/helpers.php). Every emblem carries the base `.rank-emblem` class
   plus a tier-colour class `.rank-emblem--{green|blue|purple|red|gold}`. The
   source emblem images are grayscale; the tier class tints them via filter.
   Used on the Ranks ladder (/ranks) and the player stat sheet (/stats).

   NOTE: the sizing rules are qualified with `img` on purpose. The theme reset
   in style-extn-min.css has `img:not([draggable]){max-width:100%;height:auto}`
   (specificity 0,1,1), which outranks a bare `.rank-emblem--line` (0,1,0) and
   would otherwise pin height to auto (so editing the height appeared to do
   nothing). `img.rank-emblem` ties that specificity and wins on source order,
   since rez.css is loaded after style-extn-min.css.
---------------------------------------------------------------------------- */
img.rank-emblem {
    width: 30px;
    height: auto;
    vertical-align: middle;
}

/* Tier colours — the tier advances every 5 ranks (see Helpers::EMBLEM_TIERS). */
.rank-emblem--green  { filter: sepia(1) saturate(3)   hue-rotate(65deg); }
.rank-emblem--blue   { filter: sepia(1) saturate(3)   hue-rotate(155deg) brightness(1.15); }
.rank-emblem--purple { filter: sepia(1) saturate(3)   hue-rotate(215deg) brightness(1.05); }
.rank-emblem--red    { filter: sepia(1) saturate(5)   hue-rotate(-40deg); }
.rank-emblem--gold   { filter: sepia(1) saturate(2.5) brightness(1.1); }

/* Inline variant — sizes the emblem to the current line so it can sit beside
   text (e.g. next to the score / rank class in a dense table row) without
   growing the row height. Height is the control knob; width stays auto so the
   emblem keeps its aspect ratio. Must come after `img.rank-emblem`. */
img.rank-emblem--line {
    width: 20px;
    height: auto;
    margin-left: 5px;
}