/* One rarity palette, independent of the cosmetic's own material and hue. */
:root {
  --rarity-starter-text:#c4d0dd; --rarity-starter-border:#455568; --rarity-starter-surface:#1b2533;
  --rarity-common-text:#c4d0dd; --rarity-common-border:#455568; --rarity-common-surface:#1b2533;
  --rarity-rare-text:#8bc8ff; --rarity-rare-border:#406897; --rarity-rare-surface:#10263d;
  --rarity-epic-text:#cbb0ff; --rarity-epic-border:#76589f; --rarity-epic-surface:#2b2140;
  --rarity-legendary-text:#ffe08a; --rarity-legendary-border:#927242; --rarity-legendary-surface:#332b17;
}
.shop-rarity {
  --rarity-text:var(--rarity-common-text); --rarity-border:var(--rarity-common-border); --rarity-surface:var(--rarity-common-surface);
  display:inline-flex; align-items:center; justify-content:center; flex:none; width:max-content;
  color:var(--rarity-text); border:1px solid var(--rarity-border); background:var(--rarity-surface);
  border-radius:999px; padding:3px 8px; font-family:inherit; font-size:10px; font-weight:700;
  line-height:16px; letter-spacing:.02em; white-space:nowrap; opacity:1;
}
.shop-rarity[data-rarity="starter"] { --rarity-text:var(--rarity-starter-text); --rarity-border:var(--rarity-starter-border); --rarity-surface:var(--rarity-starter-surface); }
.shop-rarity[data-rarity="rare"] { --rarity-text:var(--rarity-rare-text); --rarity-border:var(--rarity-rare-border); --rarity-surface:var(--rarity-rare-surface); }
.shop-rarity[data-rarity="epic"] { --rarity-text:var(--rarity-epic-text); --rarity-border:var(--rarity-epic-border); --rarity-surface:var(--rarity-epic-surface); }
.shop-rarity[data-rarity="legendary"] { --rarity-text:var(--rarity-legendary-text); --rarity-border:var(--rarity-legendary-border); --rarity-surface:var(--rarity-legendary-surface); }
.shop-copy-top { flex-wrap:wrap; align-items:center; }
.shop-copy-top h3 { flex:1 1 120px; min-width:0; overflow-wrap:anywhere; }
/* Cumulative XP is separate from the amount within the current level. */
.rewards-level-card { grid-template-columns:auto minmax(0,1fr); align-items:start; }
.rewards-level-card .level-badge { align-self:start; }
.rewards-progress-copy { min-width:0; }
.rewards-level-card h2 { margin:3px 0 12px; }
.xp-total-line { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px; margin-bottom:12px; }
.xp-total-line small { color:var(--muted); font-size:11px; }
.xp-total-line strong { font-size:18px; font-weight:800; line-height:1.3; font-variant-numeric:tabular-nums; }
.rewards-progress-copy .progress-bar { min-width:0; width:100%; }
.rewards-level-card .xp-current { font-size:11px; line-height:1.5; margin-top:8px; font-variant-numeric:tabular-nums; }
.rewards-level-card .xp-remaining { color:var(--green); font-size:11px; line-height:1.5; margin-top:2px; }
.rewards-level-card .xp-next-total { font-size:10px; line-height:1.5; margin-top:2px; }
.rewards-level-card .next-unlock { grid-column:1 / -1; min-width:0; width:100%; border-left:0;
  border-top:1px solid var(--line); padding:14px 0 0; display:grid; gap:6px; }
.next-unlock-title-line { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.next-unlock .next-unlock-name { font-size:14px; line-height:1.4; overflow-wrap:anywhere; }
.next-unlock .next-unlock-meta { color:var(--lime); font-size:11px; }
.next-unlock .next-unlock-note { margin:0; color:var(--muted); font-size:11px; line-height:1.5; }
.next-unlock .shop-rarity { color:var(--rarity-text); font-size:10px; }
.next-unlock [hidden] { display:none; }
.rewards-hub .lobby-total-xp { margin:10px 0 0; color:var(--muted); font-size:11px; }
.rewards-hub .lobby-total-xp strong { color:var(--text); font-variant-numeric:tabular-nums; }
.rewards-hub .next-level-copy { margin-top:5px; }
.profile-xp-summary { margin:16px 0; padding:16px; background:rgba(255,255,255,.025); border:1px solid var(--line); border-radius:16px; }
.profile-xp-summary .xp-current,.profile-xp-summary .xp-remaining { margin:6px 0 0; font-size:12px; line-height:1.5; color:var(--muted); }
.profile-xp-summary .xp-remaining { color:var(--green); }
@media(min-width:1600px) {
  .rewards-level-card { grid-template-columns:auto minmax(0,1fr) minmax(145px,190px); align-items:center; }
  .rewards-level-card .next-unlock { grid-column:auto; border-top:0; border-left:1px solid var(--line); padding:0 0 0 18px; }
}
@media(max-width:420px) {
  .rewards-level-card { padding:18px; gap:16px; }
  .rewards-level-card .level-badge { width:64px; height:64px; border-radius:20px; }
  .rewards-level-card .level-badge span { font-size:30px; }
  .rewards-level-card h2 { font-size:19px; }
  .xp-total-line { gap:3px 8px; }
}