/* A rang saját színe, meglévő hősportré és rangjelvény alkotja az ünneplést. */
.hm-levelup {
    box-sizing: border-box; width: min(660px, calc(100% - 24px)); max-width: 660px;
    max-height: calc(100dvh - 24px); margin: auto; padding: 0;
    border: 1px solid color-mix(in srgb, var(--levelup-color) 65%, transparent);
    border-radius: 18px; color: #f5f1e8; background: #080e1b;
    box-shadow: 0 28px 100px #000b, 0 0 75px color-mix(in srgb, var(--levelup-color) 20%, transparent);
    font-family: "Outfit", system-ui, sans-serif; overflow: hidden;
}
.hm-levelup[open] { display: flex; flex-direction: column; animation: hmLevelupReveal 550ms cubic-bezier(.16,1,.3,1) both; }
.hm-levelup::backdrop { background: #02050cce; backdrop-filter: blur(9px); animation: hmLevelupBackdrop 350ms ease-out both; }
.hm-levelup-content { position: relative; isolation: isolate; overflow: auto; min-height: 0; padding: 32px 36px 24px; text-align: center; }
.hm-levelup-content::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 43%, color-mix(in srgb, var(--levelup-color) 20%, transparent), transparent 58%); }
.hm-levelup-art { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; opacity: .23; mask-image: linear-gradient(#0008, #000 20%, transparent 85%); pointer-events: none; }
.hm-levelup-kicker { margin: 0 28px 9px; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; color: var(--levelup-color); }
.hm-levelup h2 { margin: 0; font-family: "AOW", Georgia, serif; font-size: clamp(1.65rem, 4.5vw, 2.65rem); font-weight: 400; line-height: 1.2; text-shadow: 0 3px 24px #000; }
#hm-levelup-description { margin: 10px 0 0; font-size: .93rem; color: #d2d7e3; line-height: 1.5; }
.hm-levelup-hero { color: #fff4d5; }
.hm-levelup-emblem { position: relative; display: grid; place-items: center; width: clamp(160px, 25vw, 210px); aspect-ratio: 1; margin: 24px auto 16px; }
.hm-levelup-emblem::before { content: ""; position: absolute; inset: 14%; border-radius: 50%; background: color-mix(in srgb, var(--levelup-color) 17%, transparent); box-shadow: 0 0 55px var(--levelup-color); opacity: .55; animation: hmLevelupHalo 2s ease-out both; }
.hm-levelup-orbit { position: absolute; inset: 0; border: 1px solid color-mix(in srgb, var(--levelup-color) 55%, transparent); border-radius: 50%; outline: 1px solid color-mix(in srgb, var(--levelup-color) 16%, transparent); outline-offset: 9px; animation: hmLevelupOrbit 1600ms ease-out both; }
.hm-levelup-orbit::before, .hm-levelup-orbit::after { content: "✦"; position: absolute; top: 50%; left: -7px; transform: translateY(-50%); font-size: 17px; color: var(--levelup-color); }
.hm-levelup-orbit::after { left: auto; right: -7px; }
.hm-levelup-orbit-inner { inset: 14px; border-radius: 16%; transform: rotate(45deg); animation-direction: reverse; }
.hm-levelup-icon { position: relative; width: 80%; height: 80%; object-fit: contain; filter: drop-shadow(0 0 20px color-mix(in srgb, var(--levelup-color) 55%, transparent)); animation: hmLevelupEmblem 850ms 120ms cubic-bezier(.16,1,.3,1) both; }
.hm-levelup-number { position: absolute; bottom: -4px; padding: 4px 15px; border: 1px solid var(--levelup-color); border-radius: 12px; background: #101726; font-size: 1rem; font-weight: 700; color: var(--levelup-color); }
.hm-levelup-rank { margin: 22px 0 10px; color: var(--levelup-color); font-family: "AOW", Georgia, serif; font-size: clamp(1.25rem, 3.5vw, 1.8rem); line-height: 1.3; overflow-wrap: anywhere; }
.hm-levelup-transition { display: flex; align-items: center; justify-content: center; gap: 18px; font-size: .85rem; letter-spacing: .08em; }
.hm-levelup-old { color: #a3adbf; }
.hm-levelup-transition > span:nth-child(2) { color: var(--levelup-color); font-size: 1.6rem; }
.hm-levelup-new { color: #fff2d2; }
.hm-levelup-points { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; margin-top: 16px; padding-top: 16px; border-top: 1px solid #ffffff15; font-size: .8rem; line-height: 1.5; }
.hm-levelup-reward { color: #ffe8a4; font-weight: 600; }
.hm-levelup-total { color: #b9c4d6; }
.hm-levelup-unlocks { margin: 14px 0 0; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--levelup-color) 24%, transparent); border-radius: 8px; background: color-mix(in srgb, var(--levelup-color) 7%, transparent); color: #e3e6f1; font-size: .82rem; line-height: 1.5; }
.hm-levelup-footer { flex: none; padding: 16px 28px; background: #080e1bf2; border-top: 1px solid #ffffff12; }
.hm-levelup-continue { width: 100%; min-height: 48px; padding: 12px 18px; border: 1px solid color-mix(in srgb, var(--levelup-color) 70%, transparent); border-radius: 8px; background: linear-gradient(110deg, color-mix(in srgb, var(--levelup-color) 23%, #101626), #111b2b); color: #fff1d4; font: 600 .9rem "Outfit", system-ui, sans-serif; letter-spacing: .025em; cursor: pointer; transition: filter 160ms; }
.hm-levelup-continue span { margin-left: 12px; color: var(--levelup-color); }
.hm-levelup-continue:hover { filter: brightness(1.25); }
.hm-levelup-close { position: absolute; z-index: 3; top: 9px; right: 9px; width: 40px; height: 40px; padding: 0; border: 1px solid #ffffff28; border-radius: 50%; background: #080e1be6; color: #e2e6f0; font-size: 25px; cursor: pointer; }
.hm-levelup button:focus-visible { outline: 2px solid #fff4d2; outline-offset: 3px; }
.hm-levelup-sparks { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.hm-levelup-sparks i { position: absolute; left: var(--spark-x); top: 64%; width: 3px; height: 7px; border-radius: 50%; background: var(--levelup-color); box-shadow: 0 0 9px var(--levelup-color); opacity: 0; animation: hmLevelupSpark 1800ms var(--spark-delay) ease-out both; }
@keyframes hmLevelupReveal { from { opacity: 0; transform: translateY(28px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes hmLevelupBackdrop { from { opacity: 0; } to { opacity: 1; } }
@keyframes hmLevelupEmblem { from { opacity: 0; transform: scale(.55) rotate(-12deg); } to { opacity: 1; transform: none; } }
@keyframes hmLevelupOrbit { from { opacity: 0; rotate: -80deg; scale: .85; } to { opacity: 1; rotate: 0deg; scale: 1; } }
@keyframes hmLevelupHalo { from { transform: scale(.4); opacity: 0; } 40% { opacity: .8; } to { transform: scale(1); opacity: .55; } }
@keyframes hmLevelupSpark { 0% { opacity: 0; transform: translate(0, 30px); } 20% { opacity: .9; } 100% { opacity: 0; transform: translate(var(--spark-drift), -210px); } }
@media (max-width: 480px) {
    .hm-levelup-content { padding: 28px 18px 18px; }
    .hm-levelup-kicker { font-size: .57rem; letter-spacing: .13em; }
    .hm-levelup-emblem { width: 155px; margin-top: 22px; }
    .hm-levelup-footer { padding: 12px 16px; }
}
@media (max-height: 520px) and (min-width: 600px) {
    .hm-levelup-content { padding-top: 20px; }
    .hm-levelup-emblem { width: 120px; margin: 18px auto 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .hm-levelup, .hm-levelup::backdrop, .hm-levelup * { animation: none !important; transition: none !important; }
    .hm-levelup-sparks { display: none; }
}