#experience-ribbon {
  position: fixed;
  z-index: 18;
  top: 198px;
  left: 50%;
  width: min(250px, 72vw);
  padding: 8px 12px 9px;
  transform: translate(-50%, -8px) scale(.94);
  opacity: 0;
  pointer-events: none;
  border: 1px solid rgba(126,231,255,.28);
  border-radius: 15px;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.10),
      rgba(4,8,15,.82)
    );
  backdrop-filter: blur(16px) saturate(150%);
  box-shadow:
    0 14px 34px rgba(0,0,0,.34),
    0 0 26px rgba(126,231,255,.08);
  transition:
    opacity .2s ease,
    transform .2s cubic-bezier(.2,.8,.2,1),
    border-color .2s ease;
  text-align: center;
}

#experience-ribbon.show {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

#experience-ribbon .exp-kicker {
  display: block;
  margin-bottom: 2px;
  font: 800 8px/1 Outfit, sans-serif;
  letter-spacing: .24em;
  color: #88b9d8;
  text-transform: uppercase;
}

#experience-ribbon .exp-title {
  display: block;
  font: 900 22px/1.05 Fredoka, sans-serif;
  letter-spacing: .03em;
  color: #fff;
  text-shadow:
    0 2px 0 #000,
    0 0 16px rgba(255,255,255,.18);
}

#experience-ribbon .exp-note {
  display: block;
  margin-top: 3px;
  min-height: 12px;
  font: 700 9px/1 Outfit, sans-serif;
  letter-spacing: .13em;
  color: #b8cadc;
  text-transform: uppercase;
}

#experience-ribbon .exp-meter {
  display: block;
  height: 4px;
  margin-top: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
}

#experience-ribbon .exp-meter i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(
      90deg,
      #7ee7ff,
      #c39cff,
      #ffe66a
    );
  box-shadow:
    0 0 10px rgba(126,231,255,.45);
  transition: width .18s ease;
}

body[data-experience="FLOW"] #experience-ribbon,
body[data-experience="DOMINIO"] #experience-ribbon,
body[data-experience="RÁFAGA"] #experience-ribbon {
  border-color: rgba(255,230,106,.42);
  box-shadow:
    0 14px 34px rgba(0,0,0,.38),
    0 0 28px rgba(255,210,90,.12);
}

body[data-experience="RÁFAGA"] #experience-ribbon .exp-title {
  color: #ffe66a;
  text-shadow:
    0 2px 0 #000,
    0 0 18px rgba(255,230,106,.36);
}

body.boss-fight #experience-ribbon {
  top: 218px;
  border-color: rgba(255,90,110,.38);
}

body.boss-fight #experience-ribbon .exp-title {
  color: #ffadb7;
  text-shadow:
    0 2px 0 #000,
    0 0 18px rgba(255,80,105,.30);
}

body.experience-intense #experience-ribbon.show {
  animation: experienceBreath 1.8s ease-in-out infinite;
}

@keyframes experienceBreath {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.07);
  }
}

@media (max-width: 820px) {
  #experience-ribbon {
    top: 176px;
    width: min(210px, 76vw);
  }

  body.boss-fight #experience-ribbon {
    top: 196px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.experience-intense #experience-ribbon.show {
    animation: none;
  }

  #experience-ribbon,
  #experience-ribbon.show {
    transition: opacity .12s linear;
    transform: translate(-50%, 0);
  }
}