.level-up-dialog {
  --lu-spring: cubic-bezier(.34, 1.56, .64, 1);
  --lu-expo: cubic-bezier(.16, 1, .3, 1);
  --lu-impact: 740ms;
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  width: min(390px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 26px 28px 29px;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid #c6a0ff59;
  border-radius: 28px;
  background: radial-gradient(ellipse at 50% 23%, #7442a844, transparent 63%), #191125;
  color: #faf6ff;
  text-align: center;
  box-shadow: 0 28px 100px #09041699, inset 0 1px #ffffff12;
}
.level-up-dialog::backdrop { background: radial-gradient(circle at 50% 42%, #6d3bd44d, transparent 58%), #0c071db3; backdrop-filter: blur(6px); }
.level-up-close {
  position: absolute;
  z-index: 3;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #c6b6da;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.level-up-close .icon { width: 18px; height: 18px; transition: transform .35s var(--lu-spring); }
.level-up-close:hover { background: #ffffff0c; color: #fff; }
.level-up-close:hover .icon { transform: rotate(90deg); }
.level-up-close:focus-visible { outline: 2px solid #d7b6ff; outline-offset: -4px; }

/* ---------- Stage around the badge ---------- */
.level-up-art { position: relative; width: min(238px, 100%); margin: 0 auto 7px; aspect-ratio: 1; }
.level-up-art > span, .level-up-spark { position: absolute; pointer-events: none; }
.level-up-rays {
  z-index: -2;
  inset: -42%;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, #ffd27a38 0 5deg, transparent 5deg 15deg, #b98aff30 15deg 19deg, transparent 19deg 30deg);
  -webkit-mask: radial-gradient(closest-side, #000 18%, transparent 100%);
  mask: radial-gradient(closest-side, #000 18%, transparent 100%);
}
.level-up-halo {
  z-index: -1;
  inset: 4%;
  border-radius: 50%;
  background: radial-gradient(circle, #ffd27a4d, #a56aff47 38%, #8e43e51a 58%, transparent 72%);
  filter: blur(8px);
}
.level-up-ring {
  z-index: -1;
  inset: 20%;
  border: 3px solid #ffe2a8;
  border-radius: 50%;
  box-shadow: 0 0 18px #ffd27a99, inset 0 0 14px #ffd27a66;
  opacity: 0;
}
.level-up-ring:nth-child(4) { border-color: #d6b4ff; box-shadow: 0 0 18px #a56aff99, inset 0 0 14px #a56aff66; }
.level-up-ring:nth-child(5) { border-color: #8fe3ff; box-shadow: 0 0 18px #8fe3ff88; }
.level-up-flash {
  z-index: 2;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle, #fff, #fff4d6aa 30%, transparent 68%);
  mix-blend-mode: screen;
  opacity: 0;
}
.level-up-spark {
  z-index: 3;
  left: 50%;
  top: 50%;
  width: var(--s);
  height: var(--s);
  margin: calc(var(--s) / -2);
  background: var(--c);
  box-shadow: 0 0 10px var(--c), 0 0 2px #fff;
  opacity: 0;
}
.level-up-badge { position: relative; z-index: 1; width: 100%; height: 100%; }
.level-up-badge img { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
/* A light band that only touches the badge's own pixels. */
.level-up-shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, #ffffffd9 47%, #fff7 52%, transparent 60%) 130% 0 / 260% 100% no-repeat;
  -webkit-mask: var(--badge) center / contain no-repeat;
  mask: var(--badge) center / contain no-repeat;
  mix-blend-mode: screen;
}
.level-up-orbit { z-index: 2; inset: -6%; border-radius: 50%; }
.level-up-orbit.is-reverse { inset: 6%; }
.level-up-orbit i { position: absolute; top: -3px; left: calc(50% - 3px); width: 6px; height: 6px; background: #fff; box-shadow: 0 0 6px #fff, 0 0 14px #ffd27a; }
.level-up-orbit.is-reverse i { top: auto; bottom: -2px; width: 4px; height: 4px; background: #e2c8ff; box-shadow: 0 0 6px #e2c8ff, 0 0 12px #a56aff; }
.level-up-fx { position: absolute; z-index: -1; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.level-up-ember { position: absolute; left: var(--x); bottom: -8px; width: var(--s); height: var(--s); background: var(--c); box-shadow: 0 0 8px var(--c); opacity: 0; }

/* ---------- Copy ---------- */
.level-up-kicker { margin: 0 0 9px; color: #f1ce8b; font-size: 9px; font-weight: 750; letter-spacing: 2.2px; }
.level-up-dialog h2 {
  margin: 0;
  font-family: var(--font-pixel, 'Outfit', sans-serif);
  font-size: clamp(23px, 6vw, 29px);
  font-weight: 750;
  line-height: 1.15;
  letter-spacing: -.8px;
  background: linear-gradient(100deg, #faf6ff 35%, #ffe2a3 47%, #fff 52%, #faf6ff 64%) 130% 0 / 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.level-up-rank { position: relative; display: inline-flex; align-items: center; gap: 9px; margin: 17px 0 12px; padding: 7px 17px; overflow: hidden; border: 1px solid #c397ff4d; border-radius: 999px; background: #a66bff17; color: #d9bdff; font-family: var(--font-pixel, 'Outfit', sans-serif); font-size: 16px; }
/* Odometer: the previous level rolls out above while the new one rolls in from below. */
.level-up-rank strong { position: relative; display: inline-block; color: #fff; font-size: 27px; font-weight: 750; line-height: 1; }
.level-up-rank strong::before { content: var(--level-up-prev); position: absolute; left: 0; right: 0; bottom: 140%; color: #d9bdff; opacity: .7; }
.level-up-copy { margin: 0; color: #bdb0cd; font-size: 12px; line-height: 1.6; }
.level-up-countdown { display: block; width: 64px; height: 3px; margin: 22px auto 0; border-radius: 99px; background: linear-gradient(90deg, #a671ff, #e8bd74); box-shadow: 0 0 10px #e8bd7466; transform-origin: left; }

/* ---------- Choreography ---------- */
/* modal-border.css owns the dialog animation list and reads the entrance from --gp-modal-entrance. */
.level-up-dialog { --level-up-motion: level-up-card-in 650ms var(--lu-spring) both, level-up-shake 420ms var(--lu-impact) ease-out, level-up-leave 450ms calc(var(--level-up-duration, 6400ms) - 450ms) ease-in forwards; }
.level-up-dialog[open] { animation: var(--level-up-motion); }
dialog.level-up-dialog[open] { --gp-modal-entrance: var(--level-up-motion); }
.level-up-dialog[open]::backdrop { animation: level-up-backdrop-in 500ms ease-out both, level-up-backdrop-out 450ms calc(var(--level-up-duration, 6400ms) - 450ms) ease-in forwards; }

.level-up-dialog[open] .level-up-rays { animation: level-up-rays-in 900ms 350ms var(--lu-expo) backwards, level-up-spin 26s linear infinite; }
.level-up-dialog[open] .level-up-halo { animation: level-up-halo-in 700ms 550ms var(--lu-expo) backwards, level-up-pulse 2.8s 1.3s ease-in-out infinite; }
.level-up-dialog[open] .level-up-ring { animation: level-up-ring 950ms var(--lu-impact) cubic-bezier(.2, .7, .3, 1) forwards; }
.level-up-dialog[open] .level-up-ring:nth-child(4) { animation-delay: calc(var(--lu-impact) + 120ms); }
.level-up-dialog[open] .level-up-ring:nth-child(5) { animation-delay: calc(var(--lu-impact) + 260ms); }
.level-up-dialog[open] .level-up-flash { animation: level-up-flash 520ms calc(var(--lu-impact) - 30ms) ease-out forwards; }
.level-up-dialog[open] .level-up-spark { animation: level-up-spark 1050ms calc(var(--lu-impact) + var(--t)) cubic-bezier(.12, .75, .3, 1) forwards; }
.level-up-dialog[open] .level-up-badge { animation: level-up-drop 900ms 200ms cubic-bezier(.3, .7, .25, 1) both, level-up-float 4.2s 1.3s ease-in-out infinite; }
.level-up-dialog[open] .level-up-badge img { animation: level-up-glow 2.8s 1.1s ease-in-out infinite; }
.level-up-dialog[open] .level-up-shine { animation: level-up-shine 3.4s 1.05s ease-in-out infinite backwards; }
.level-up-dialog[open] .level-up-orbit { animation: level-up-fade-in 600ms 1000ms ease-out backwards, level-up-spin 5.5s linear infinite; }
.level-up-dialog[open] .level-up-orbit.is-reverse { animation: level-up-fade-in 600ms 1150ms ease-out backwards, level-up-spin 8s linear infinite reverse; }
.level-up-dialog[open] .level-up-orbit i { animation: level-up-twinkle 1.2s steps(2, jump-none) infinite; }
.level-up-dialog[open] .level-up-ember { animation: level-up-ember var(--dur) var(--t) linear infinite; }

.level-up-dialog[open] .level-up-close { animation: level-up-fade-in 400ms 1200ms ease-out backwards; }
.level-up-dialog[open] .level-up-kicker { animation: level-up-kicker 750ms 950ms var(--lu-expo) backwards; }
.level-up-dialog[open] h2 { animation: level-up-rise 700ms 1100ms var(--lu-expo) backwards, level-up-text-shine 3.4s 1.8s ease-in-out infinite; }
.level-up-dialog[open] .level-up-rank { animation: level-up-pop 650ms 1350ms var(--lu-spring) backwards, level-up-rank-glow 1s 2000ms ease-out; }
.level-up-dialog[open] .level-up-rank strong { animation: level-up-roll 750ms 1550ms cubic-bezier(.3, 1.35, .5, 1) both; }
.level-up-dialog[open] .level-up-copy { animation: level-up-rise 650ms 1650ms var(--lu-expo) backwards; }
.level-up-dialog[open] .level-up-countdown { animation: level-up-fade-in 400ms 1900ms ease-out backwards, level-up-drain var(--level-up-hold, 4000ms) var(--level-up-intro, 2400ms) linear forwards; }

@keyframes level-up-card-in { from { opacity: 0; transform: translateY(30px) scale(.82); filter: blur(10px); } 60% { filter: blur(0); } }
@keyframes level-up-shake { 0%, 100% { translate: 0 0; } 15% { translate: -6px 4px; } 30% { translate: 5px -3px; } 45% { translate: -4px 2px; } 60% { translate: 3px -1px; } 80% { translate: -1px 1px; } }
@keyframes level-up-leave { to { opacity: 0; transform: translateY(-22px) scale(.92); filter: blur(8px); } }
@keyframes level-up-backdrop-in { from { opacity: 0; } }
@keyframes level-up-backdrop-out { to { opacity: 0; } }
@keyframes level-up-rays-in { from { opacity: 0; scale: .2; } }
@keyframes level-up-spin { to { rotate: 360deg; } }
@keyframes level-up-halo-in { from { opacity: 0; scale: .4; } }
@keyframes level-up-pulse { 0%, 100% { opacity: .75; scale: .95; } 50% { opacity: 1; scale: 1.08; } }
@keyframes level-up-ring { from { opacity: .95; transform: scale(.45); border-width: 6px; } to { opacity: 0; transform: scale(2.5); border-width: 1px; } }
@keyframes level-up-flash { 0% { opacity: 0; transform: scale(.5); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes level-up-spark {
  from { opacity: 1; transform: rotate(var(--a)) translateX(10px) scale(1.2); }
  70% { opacity: 1; }
  to { opacity: 0; transform: rotate(calc(var(--a) + 25deg)) translateX(var(--d)) scale(.3); }
}
@keyframes level-up-drop {
  0% { opacity: 0; transform: translateY(-50px) scale(2.3) rotate(-16deg); filter: blur(12px) brightness(2); }
  60% { opacity: 1; transform: translateY(6px) scale(.88) rotate(3deg); filter: blur(0) brightness(2.6); }
  78% { transform: translateY(-4px) scale(1.07) rotate(-1.5deg); filter: brightness(1.5); }
  100% { transform: none; filter: brightness(1); }
}
@keyframes level-up-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes level-up-glow { 0%, 100% { filter: drop-shadow(0 0 6px #ffd27a33); } 50% { filter: drop-shadow(0 0 18px #ffd27a88) drop-shadow(0 0 4px #fff6); } }
@keyframes level-up-shine { 0% { background-position: 130% 0; } 38%, 100% { background-position: -30% 0; } }
@keyframes level-up-fade-in { from { opacity: 0; } }
@keyframes level-up-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes level-up-ember {
  0% { opacity: 0; transform: translate(0, 0); }
  15% { opacity: .9; }
  50% { transform: translate(12px, -190px); }
  100% { opacity: 0; transform: translate(-6px, -400px); }
}
@keyframes level-up-kicker { from { opacity: 0; letter-spacing: 9px; filter: blur(4px); } }
@keyframes level-up-rise { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } }
@keyframes level-up-text-shine { 0% { background-position: 130% 0; } 40%, 100% { background-position: -30% 0; } }
@keyframes level-up-pop { from { opacity: 0; transform: scale(.5); } }
@keyframes level-up-rank-glow { 0% { box-shadow: 0 0 0 0 #ffd27a99, 0 0 24px #ffd27a66; border-color: #ffd27a; } 100% { box-shadow: 0 0 0 14px #ffd27a00, 0 0 0 #ffd27a00; } }
@keyframes level-up-roll { from { transform: translateY(140%); } }
@keyframes level-up-drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }

@media (max-height: 580px) {
  .level-up-dialog { padding: 16px 22px 20px; overflow-y: auto; }
  .level-up-art { width: min(160px, 100%); margin-bottom: 0; }
  .level-up-kicker { margin-bottom: 6px; }
  .level-up-rank { margin-block: 12px 9px; }
  .level-up-countdown { margin-top: 14px; }
}