/* App – Overlay „Level-Aufstieg“ (template-parts/app/parts/levelup.php). Präfix .lu */
html.lu-open, html.lu-open body { overflow: hidden; }

.lu { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); background: rgba(4, 8, 15, .78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: luIn .28s ease-out both; overflow-y: auto; }
html.ap-html[data-ap-design="hell"] .lu { background: rgba(11, 22, 38, .55); }
.lu[hidden] { display: none; }
.lu.is-out { animation: luOut .25s ease-in both; }
.lu__fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }

.lu__card { position: relative; z-index: 1; width: 100%; max-width: 420px; margin: auto; background: var(--ap-card-grad); border: 1px solid var(--ap-gold); border-radius: 26px; padding: 14px 18px 18px; box-shadow: var(--ap-shadow-lg), 0 0 0 6px rgba(227, 179, 65, .08); display: flex; flex-direction: column; align-items: center; text-align: center; outline: none; animation: luCard .45s cubic-bezier(.2, .9, .3, 1.2) both; }
.lu__top { align-self: stretch; display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 44px; }
.lu__kick { font-size: 11px; letter-spacing: .06em; color: var(--ap-gold-t); }
.lu__skip { min-height: 44px; padding: 0 4px 0 12px; border: 0; background: none; color: var(--ap-muted); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.lu__skip:hover { color: var(--ap-text); }
.lu[data-state="end"] .lu__skip { visibility: hidden; }

.lu__h { font-family: var(--ap-head); font-stretch: 125%; font-weight: 900; font-size: 28px; line-height: 1.05; margin: 0; color: var(--ap-text); }
.lu__jump { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 8px; font-family: var(--ap-head); font-stretch: 125%; font-weight: 900; font-size: 22px; color: var(--ap-muted); }
.lu__jump svg { color: var(--ap-gold-t); flex: none; }
.lu__jump b { color: var(--ap-gold-t); font-size: 26px; }
.lu__title { margin-top: 4px; font-size: 16px; font-weight: 700; color: var(--ap-text); }
.lu__rank { margin-top: 8px; }

.lu__ring { position: relative; width: 168px; height: 168px; margin: 14px auto 0; border-radius: 50%; }
.lu__ring svg { display: block; overflow: visible; }
.lu__track { stroke: var(--ap-line); }
.lu__arc { filter: drop-shadow(0 0 6px rgba(227, 179, 65, .45)); }
.lu__num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.lu__num b { font-family: var(--ap-head); font-stretch: 125%; font-weight: 900; font-size: 54px; color: var(--ap-text); }
.lu__num i { font-style: normal; font-family: var(--ap-mono); font-size: 11px; letter-spacing: .08em; color: var(--ap-muted); margin-top: 4px; }
.lu__ring.is-pop { animation: luGlow .7s ease-out; }
.lu__ring.is-pop .lu__num b { animation: luPop .55s cubic-bezier(.2, 1.4, .4, 1); color: var(--ap-gold-t); }
.lu[data-state="end"] .lu__num b { color: var(--ap-gold-t); }
.lu__step { margin-top: 6px; min-height: 20px; font-size: 14px; color: var(--ap-soft); }

.lu__hero { align-self: stretch; margin-top: 12px; background: var(--ap-card); border: 1px solid var(--ap-line); border-radius: 18px; padding: 12px 14px; text-align: left; }
.lu__hero-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.lu__xp { font-weight: 600; font-size: 22px; font-variant-numeric: tabular-nums; }
.lu__xp small { font-size: 12px; color: var(--ap-muted); }
.lu__in { font-size: 12px; font-variant-numeric: tabular-nums; }
.lu__bar { height: 12px; border-radius: 999px; background: var(--ap-line); overflow: hidden; margin-top: 8px; }
.lu__bar span { display: block; height: 100%; max-width: 100%; background: linear-gradient(90deg, #B7791F, #E3B341); border-radius: 999px; }
.lu__next { font-size: 13px; margin-top: 8px; color: var(--ap-soft); }
.lu__next strong { color: var(--ap-gold-t); }

.lu__rewards { align-self: stretch; display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.lu-rw { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 18px; background: var(--ap-card); border: 1px solid rgba(227, 179, 65, .55); text-align: left; transition: opacity .35s, transform .35s; }
.lu-rw__cup { flex: none; display: flex; }
.lu-rw__cup svg { width: 52px; height: 65px; }
.lu-rw__t { display: flex; flex-direction: column; min-width: 0; }
.lu-rw__t .ap-mono { font-size: 10px; color: var(--ap-gold-t); letter-spacing: .04em; }
.lu-rw__t strong { font-size: 16px; color: var(--ap-text); }
.lu-rw:not(.is-on), .lu-beer:not(.is-on) { opacity: 0; transform: scale(.92); }
.lu-rw.is-pop, .lu-beer.is-pop { animation: luPop .55s cubic-bezier(.2, 1.4, .4, 1); }
.lu-beer { align-self: center; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border-radius: 999px; background: var(--ap-gold); color: var(--ap-on-gold); font-weight: 700; font-size: 14px; transition: opacity .35s, transform .35s; }
.lu[data-state="run"] .lu__more { visibility: hidden; }

.lu__live { margin: 10px 0 0; }
.lu__btns { align-self: stretch; display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.lu__btns .ap-btn { min-height: 48px; }

@keyframes luIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes luOut { to { opacity: 0; } }
@keyframes luCard { from { opacity: 0; transform: translateY(18px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes luPop { 0% { transform: scale(1); } 40% { transform: scale(1.32); } 100% { transform: scale(1); } }
@keyframes luGlow { 0% { box-shadow: 0 0 0 0 rgba(227, 179, 65, .55); } 100% { box-shadow: 0 0 0 26px rgba(227, 179, 65, 0); } }

/* Kleine Höhen: kompakter */
@media (max-height: 700px) {
	.lu__ring { width: 136px; height: 136px; margin-top: 8px; }
	.lu__ring svg { width: 136px; height: 136px; }
	.lu__num b { font-size: 44px; }
	.lu__h { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
	.lu, .lu__card, .lu.is-out { animation-duration: .2s; }
	.lu__card { animation-name: luIn; }
	.lu__ring.is-pop, .lu__ring.is-pop .lu__num b, .lu-rw.is-pop, .lu-beer.is-pop { animation: none; }
	.lu-rw, .lu-beer { transition: none; }
}