/* The EXP bar, once, for everywhere that draws one.
 *
 * Black casing, blue outer ring, striped green fill — the same bar the pre-roll
 * ad uses. It lived only in profile.css, which is loaded on /profile/ and
 * nowhere else, so the video's own bar could not have the look without a third
 * copy of it. profile.css keeps the rules that are about where the bar SITS on
 * that page (widths, margins); everything about how it LOOKS is here.
 *
 * Loaded by /profile/ and by the watch page. The class prefix stays `pf-`
 * rather than being renamed: renaming it would mean touching every markup site
 * on the profile page for no gain, and the names are already in the wild.
 */

.pf-exp__label {
  font-size: 13.5px;
  font-weight: 700;
  margin-bottom: 7px;
}

.pf-exp__track {
  height: 16px;
  border: 3px solid #000;
  border-radius: 999px;
  background: #000;
  box-shadow: 0 0 0 2px #1b6fd4;
  overflow: hidden;
}

.pf-exp__fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background:
    repeating-linear-gradient(100deg, rgba(0, 0, 0, .28) 0 2px, transparent 2px 13px),
    linear-gradient(180deg, #8cf58c 0%, #3ad63a 46%, #17a017 100%);
  transition: width .3s ease;
}

/* Doubled class on purpose. The base .pf-exp__fill rule above is a background
   shorthand, and a single-class override would lose to it on specificity. */
.pf-exp__fill.pf-exp__fill--hp {
  background:
    repeating-linear-gradient(100deg, rgba(0, 0, 0, .28) 0 2px, transparent 2px 13px),
    linear-gradient(180deg, #ff9a9a 0%, #f24a4a 46%, #b81414 100%);
}
.pf-exp__fill.pf-exp__fill--mp {
  background:
    repeating-linear-gradient(100deg, rgba(0, 0, 0, .28) 0 2px, transparent 2px 13px),
    linear-gradient(180deg, #9ad4ff 0%, #3a9df2 46%, #1256a8 100%);
}

/* The headline version: the one bar on a page that is about the level itself. */
.pf-level__label {
  font-size: 20px;
  font-weight: 1000;
  letter-spacing: -.01em;
  margin-bottom: 8px;
}
.pf-level .pf-exp__track { height: 22px; border-width: 4px; }

@media (prefers-reduced-motion: reduce) {
  .pf-exp__fill { transition: none; }
}