/* Konto-Level sichtbar machen (side-level.js, end-screen-xp.js).
   Rosé ist die EXP-Farbe (--mp-aura-*), neben Gold = ELO und Amethyst = Souls.
   Die EXP-Linie laedt beim Anzeigen einmal von links und bekommt alle paar
   Sekunden einen ruhigen Lichtschimmer; sonst bewegt sich nur echter EXP-Zuwachs. */

/* ── Seitenleiste: "LEVEL 7" rechts im Konto-Knopf + EXP-Linie unten ───────── */
.sideUser.hasLevel {
  padding-right: 52px;
}
.sideUser .sideLevel {
  position: absolute;
  top: 50%;
  right: 14px;
  display: grid;
  justify-items: end;
  gap: 1px;
  font-style: normal;
  line-height: 1;
  transform: translateY(-50%);
  pointer-events: auto;
}
.sideUser .sideLevelLabel {
  color: var(--mp-aura-2);
  font-size: 7.5px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  opacity: .85;
}
.sideUser .sideLevelNum {
  color: var(--mp-aura-1);
  font-family: var(--mp-serif);
  font-size: 19px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .3px;
}
.sideUser .sideXp {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  overflow: hidden;
  background: rgba(240, 166, 198, .10);
  pointer-events: none;
}
.sideUser .sideXpFill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(var(--xp, 0) * 100%);
  overflow: hidden;
  background: linear-gradient(90deg, var(--mp-aura-3), var(--mp-aura-1));
  transition: width 900ms cubic-bezier(.2, .7, .25, 1);
}
.sideUser .sideXpFill.is-loading {
  transition-duration: 1400ms;   /* LOAD_MS in side-level.js */
  transition-timing-function: cubic-bezier(.3, .7, .2, 1);
}
.sideUser .sideXpFill.is-instant {
  transition: none;
}
/* Lichtschimmer: laeuft nach dem Aufladen von links nach rechts ueber den
   gefuellten Teil, dann alle 7 s wieder. */
.sideUser .sideXpGlint {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 240, 247, .95), transparent) no-repeat;
  background-size: 46px 100%;
  background-position: -46px 0;
  animation: mpXpGlint 7s cubic-bezier(.45, .05, .35, 1) 1.7s infinite;
}
@media (prefers-reduced-motion: reduce) {
  .sideUser .sideXpFill.is-loading { transition: none; }
  .sideUser .sideXpGlint { display: none; }
}
/* Level-Aufstieg: Zahl springt einmal, die Linie leuchtet kurz auf. */
.sideUser .sideLevel.is-up .sideLevelNum {
  animation: mpLevelPop 760ms cubic-bezier(.2, .9, .3, 1.2);
}
.sideUser .sideLevel.is-up ~ .sideXp {
  animation: mpLevelLine 760ms ease-out;
}

/* Bis 820 px legte main-05.css Name und Rang nebeneinander in eine Zeile (der
   Name schrumpfte auf "Einbr…"); mit der Level-Spalte bliebe nichts mehr davon.
   Wie am Desktop: Name ueber Rang neben dem Avatar. Grid-Kinder werden trotz
   des dortigen "display: inline !important" zu Bloecken. */
@media (max-width: 820px) {
  body:not(.side-nav-collapsed):not(.mode-demo) header.sideNav .sideUser,
  body.mp-phone header.sideNav .sideUser {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 3px 12px;
  }
}

/* Icon-Leiste: nur die Linie unter dem Avatar bleibt. */
body.side-nav-collapsed .sideUser.hasLevel {
  padding-right: 0;
}
body.side-nav-collapsed .sideUser .sideLevel {
  display: none;
}

/* Ein-/Ausklappen per Pfeil (side-nav-motion.css): Level und Linie verschwinden
   und kommen zusammen mit Name und Rang. */
body.side-nav-fade-out header.sideNav .sideUser :is(.sideLevel, .sideXp) {
  opacity: 0;
  transition: opacity 110ms ease-out;
}
body.side-nav-fade-in header.sideNav .sideUser .sideLevel {
  animation: sideNavTextIn 240ms ease-out 190ms both;
}
body.side-nav-fade-in header.sideNav .sideUser .sideXp {
  animation: sideNavSoftIn 220ms ease-out 290ms both;
}

/* ── Endbildschirm: Strecke "7 ▬▬▬▬──── 8" ─────────────────────────────────── */
.eg-xp .eg-stat-label .eg-xp-glyph {
  color: var(--mp-aura-1);
}
.eg-xp .eg-xp-val .plus {
  color: var(--mp-aura-1);
}
.eg-xp-track {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}
.eg-xp-lv {
  min-width: 2ch;
  color: var(--mp-aura-1);
  font-family: var(--mp-serif);
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: center;
}
.eg-xp-lv.is-next {
  color: var(--mp-ink-faint);
  font-size: 14px;
}
.eg-xp.is-flat .eg-xp-lv {
  display: none;
}
/* Gleiche Spezifitaet wie die Tonwelt-Regeln (main-12.css), steht spaeter:
   EXP bleibt in jeder Farbwelt Rosé. Die Fuellung treibt end-screen-xp.js per
   Frame (Zaehler und Leiste laufen synchron), daher ohne CSS-Transition. */
.eg-stage .eg-xp .eg-bar .fill {
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--mp-aura-3), var(--mp-aura-1));
  transition: none;
}
.eg-xp .eg-xp-bonus {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--mp-soul-1);
  font-family: var(--mp-mono);
  letter-spacing: .5px;
  opacity: 0;
}
.eg-xp .eg-xp-soul {
  display: inline-flex;
  filter: drop-shadow(0 0 5px var(--mp-soul-glow));
}

/* Level-Aufstieg: Zahl springt, Leiste leuchtet einmal hell auf, Titel in Rosé. */
.eg-xp.is-levelup .eg-xp-lv:not(.is-next) {
  animation: mpLevelPop 820ms cubic-bezier(.2, .9, .3, 1.2);
}
.eg-xp.is-levelup .eg-bar {
  animation: mpLevelBar 820ms ease-out;
}
.eg-xp.is-levelup .eg-xp-title {
  color: var(--mp-aura-1);
  animation: mpLevelTitle 520ms ease-out;
}
.eg-xp.is-levelup .eg-xp-bonus {
  animation: mpLevelBonus 520ms ease-out 180ms forwards;
}

@keyframes mpLevelPop {
  0%   { transform: scale(1); color: var(--mp-aura-1); }
  35%  { transform: scale(1.38); color: #fff2f7; text-shadow: 0 0 10px var(--mp-aura-glow); }
  100% { transform: scale(1); color: var(--mp-aura-1); text-shadow: none; }
}
@keyframes mpXpGlint {
  0%        { background-position: -46px 0; }
  24%, 100% { background-position: calc(100% + 46px) 0; }
}
@keyframes mpLevelLine {
  0%   { background: rgba(240, 166, 198, .10); }
  30%  { background: rgba(255, 230, 240, .55); }
  100% { background: rgba(240, 166, 198, .10); }
}
@keyframes mpLevelBar {
  0%   { border-color: rgba(216, 177, 90, .12); box-shadow: none; }
  25%  { border-color: rgba(255, 220, 235, .8); box-shadow: 0 0 12px var(--mp-aura-glow); }
  100% { border-color: rgba(216, 177, 90, .12); box-shadow: none; }
}
@keyframes mpLevelTitle {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: none; }
}
@keyframes mpLevelBonus {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sideUser .sideXpFill { transition: none; }
  .sideUser .sideLevel.is-up .sideLevelNum,
  .sideUser .sideLevel.is-up ~ .sideXp,
  .eg-xp.is-levelup .eg-xp-lv,
  .eg-xp.is-levelup .eg-bar,
  .eg-xp.is-levelup .eg-xp-title {
    animation: none;
  }
  .eg-xp.is-levelup .eg-xp-bonus {
    animation: none;
    opacity: 1;
  }
}