/* ================================================================== PRESTIGE
   Emblème pixel (public/js/prestige-emblem.js) et couleurs de rang. Un rang (.is-<rang> sur
   l'emblème, ou data-prestige-tier="<rang>" sur un bloc qui l'affiche) fixe les variables --pe-* :
   métal clair / base / ombre et encre du texte. Jetons --screen-prestige-* dans arcade-ui.css. */
:is(.prestige-emblem, [data-prestige-tier]) {
  --pe-outline: var(--screen-prestige-outline);
}
:is(.prestige-emblem.is-bronze, [data-prestige-tier='bronze']) {
  --pe-light: var(--screen-prestige-bronze-light); --pe-base: var(--screen-prestige-bronze); --pe-dark: var(--screen-prestige-bronze-dark);
  --pe-ink: var(--screen-prestige-bronze-ink); --pe-scene-ink: var(--screen-scene-prestige-bronze-ink);
}
:is(.prestige-emblem.is-silver, [data-prestige-tier='silver']) {
  --pe-light: var(--screen-prestige-silver-light); --pe-base: var(--screen-prestige-silver); --pe-dark: var(--screen-prestige-silver-dark);
  --pe-ink: var(--screen-prestige-silver-ink); --pe-scene-ink: var(--screen-scene-prestige-silver-ink);
}
:is(.prestige-emblem.is-gold, [data-prestige-tier='gold']) {
  --pe-light: var(--screen-prestige-gold-light); --pe-base: var(--screen-prestige-gold); --pe-dark: var(--screen-prestige-gold-dark);
  --pe-ink: var(--screen-prestige-gold-ink); --pe-scene-ink: var(--screen-scene-prestige-gold-ink);
}
:is(.prestige-emblem.is-diamond, [data-prestige-tier='diamond']) {
  --pe-light: var(--screen-prestige-diamond-light); --pe-base: var(--screen-prestige-diamond); --pe-dark: var(--screen-prestige-diamond-dark);
  --pe-ink: var(--screen-prestige-diamond-ink); --pe-scene-ink: var(--screen-scene-prestige-diamond-ink);
}
:is(.prestige-emblem.is-legend, [data-prestige-tier='legend']) {
  --pe-light: var(--screen-prestige-legend-light); --pe-base: var(--screen-prestige-legend); --pe-dark: var(--screen-prestige-legend-dark);
  --pe-ink: var(--screen-prestige-legend-ink); --pe-scene-ink: var(--screen-scene-prestige-legend-ink);
}

/* Boîte : 32 × --pe-px (32px par défaut, 64px dans le HUD). Les sources 64×64
   conservent les détails à la taille du HUD. Garder des facteurs entiers. */
.prestige-emblem {
  position: relative; display: inline-block; flex: none; line-height: 0; vertical-align: middle;
  width: calc(32 * var(--pe-px, 1px)); height: calc(32 * var(--pe-px, 1px));
}
.prestige-emblem img { display: block; width: 100%; height: 100%; image-rendering: pixelated; }

/* Reflet : une bande claire traverse l'emblème en 8 pas, toutes les 8 s, découpée à sa forme. */
.prestige-emblem .pe-shine {
  position: absolute; inset: 0; pointer-events: none; opacity: .7;
  -webkit-mask: var(--pe-src) center / 100% 100% no-repeat; mask: var(--pe-src) center / 100% 100% no-repeat;
  background: linear-gradient(115deg, transparent 42%, var(--screen-prestige-shine) 42% 54%, transparent 54%) 100% 0 / 300% 100% no-repeat;
  animation: pe-shine 8s infinite; animation-delay: 1.2s;
}
@keyframes pe-shine {
  0%, 88% { background-position: 100% 0; animation-timing-function: steps(8, jump-none); }
  100% { background-position: 0 0; }
}

/* Emblème + numéro (PrestigeEmblem.tag) : le numéro à la couleur du rang, juste après l'emblème. */
.prestige-tag { display: inline-flex; align-items: center; gap: 2px; color: var(--pe-ink); white-space: nowrap; }
.prestige-tag-num { letter-spacing: .06em; }

@media (prefers-reduced-motion: reduce) {
  .prestige-emblem .pe-shine { display: none; }
}