.xp-wrapper{
  display:flex;
  align-items:center;
  justify-content:center;

  gap:10px;
  margin-top:10px;

  width:100%;

  min-height: 60px;
}

.xp-wrapper-popup{

    display:flex;
    align-items:center;

    gap:12px;

    margin-top:18px;
}

#popupLevel{

    min-width:72px;
    height:36px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:14px;

    background:#1c1c1e;

    border:1px solid rgba(255,255,255,.08);

    font-weight:700;
}

#levelCard{
  
  display:flex;
  align-items:center;
  justify-content: center;

  min-width:72px;
  height:36px;

  padding:0 14px;

  border-radius:14px;

  background:#1c1c1e;

  border:1px solid rgba(255,255,255,.08);

  color:white;

  font-size:17px;
  font-weight:700;
  letter-spacing:.5px;
}

.xp-bar{

  flex:1;

  height:12px;

  background:#111;

  border-radius:999px;

  overflow:hidden;
}

.xp-fill{

  height:100%;

  width:0%;

  background:#ff453a;

  transition:none;
}

.level-up{

  animation:
    levelUpFlash
    .8s ease;
}

.spark{

  position:fixed;

  width:8px;
  height:8px;

  border-radius:50%;

  background:white;

  pointer-events:none;

  z-index:9999;

  box-shadow:
    0 0 10px #fff,
    0 0 20px #ff453a;

  animation:
    sparkFly .8s ease-out forwards;
}

.level-flash{
  animation:levelFlash .5s ease-out;
}

.xp-popup{

    position:fixed;
    inset:0;

    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;

    z-index:9999;

    /* nouveau */

    background:
      rgba(0,0,0,.4);

    backdrop-filter:
      blur(16px);

    opacity:0;

    pointer-events:auto;

    transition:
      opacity .25s ease;
}

.xp-popup.visible{
    opacity:1;
}

.xp-popup.hidden{
    display:none;
}

.xp-popup-card{

  position: relative;

    width:320px;

    padding:24px;

    border-radius:28px;

    background:
      rgba(30,30,30,.75);

    backdrop-filter:blur(24px);

    border:
      1px solid rgba(255,255,255,.08);

    box-shadow:
      0 10px 40px rgba(0,0,0,.45);

    color:white;

    text-align:center;
}

.xp-flash{

  position:absolute;

  inset:0;

  background:
    rgba(255, 69, 58, 0.2);

  opacity:0;

  pointer-events:none;

  border-radius:inherit;
}

.xp-flash.active{
  animation:
    xpCardFlash .55s ease-out;

  animation-fill-mode:none;
}

.popup-score{

    margin-top:24px;

    display:flex;
    flex-direction:column;
    align-items:center;
}

.score-numbers{

    display:flex;
    flex-direction:column;
    align-items:flex-end;
    width: 100%;
}

#popupScoreValue{

    width: 220px;

    font-size:48px;

    font-weight:800;

    letter-spacing:.5px;

    width: 100%;

    color:white;

    text-align:right;

    text-shadow:

    0 0 12px
    rgba(255, 237, 193, 0.4),

    0 0 28px
    rgba(255, 41, 30, 0.25);
}

#popupScoreGain{

    width: 220px;

    margin-top:4px;

    color:#ff443a;

    text-align:right;

    font-size:48px;

    font-weight:800;

    letter-spacing:.5px;

    opacity:0;

    text-shadow:

    0 0 12px
    rgba(255, 237, 193, 0.1),

    0 0 28px
    rgba(255, 41, 30, 0.5);
}

.score-pop{

    animation:
      scorePop .45s ease;
}