.lvl-badge {
    --lvl-size: 18px;
    --lvl-light: color-mix(in srgb, var(--lvl-color, #8A8A99) 45%, #ffffff);
    --lvl-dark: color-mix(in srgb, var(--lvl-color, #8A8A99) 55%, #12121a);
    position: absolute;
    right: -3px;
    bottom: -3px;
    z-index: 3;
    width: calc(var(--lvl-size) * 0.92);
    height: var(--lvl-size);
    display: flex;
    align-items: center;
    justify-content: center;
    
    clip-path: polygon(50% 0%, 96% 26%, 96% 74%, 50% 100%, 4% 74%, 4% 26%);
    background:
        linear-gradient(150deg, rgba(255, 255, 255, .55) 0%, rgba(255, 255, 255, 0) 42%),
        linear-gradient(160deg, var(--lvl-light) 0%, var(--lvl-color, #8A8A99) 48%, var(--lvl-dark) 100%);
    font-family: 'Manrope', 'Inter', sans-serif;
    font-weight: 800;
    font-size: calc(var(--lvl-size) * 0.54);
    line-height: 1;
    letter-spacing: -.01em;
    color: #14141c;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .38);
    
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, .95)) drop-shadow(0 1px 2px rgba(0, 0, 0, .55));
    pointer-events: none;
    user-select: none;
}

.lvl-badge--xs { --lvl-size: 16px; }
.lvl-badge--sm { --lvl-size: 18px; }
.lvl-badge--md { --lvl-size: 22px; }
.lvl-badge--lg { --lvl-size: 28px; }
.lvl-badge--xl { --lvl-size: 36px; }


.lvl-badge[data-level="10"],
.lvl-badge[data-level="11"] {
    font-size: calc(var(--lvl-size) * 0.4);
    letter-spacing: -.04em;
}


.lvl-badge[data-level="11"] {
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}


.lvl-badge[data-level="8"],
.lvl-badge[data-level="9"],
.lvl-badge[data-level="10"],
.lvl-badge[data-level="11"] {
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, .95))
            drop-shadow(0 0 5px color-mix(in srgb, var(--lvl-color, #FFD75E) 75%, transparent));
}


.lvl-badge--inline {
    position: static;
    right: auto;
    bottom: auto;
    flex: 0 0 auto;
}


.lvl-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 6px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--lvl-color, #8A8A99);
    background: color-mix(in srgb, var(--lvl-color, #8A8A99) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--lvl-color, #8A8A99) 35%, transparent);
}

.lvl-chip__num {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    color: #0B0B10;
    background: var(--lvl-color, #8A8A99);
}



.lvl-medal {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--medal-size, 56px);
    height: var(--medal-size, 56px);
}

.lvl-medal img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5));
}

.lvl-medal--sm { --medal-size: 40px; }
.lvl-medal--md { --medal-size: 56px; }
.lvl-medal--lg { --medal-size: 76px; }
.lvl-medal--xl { --medal-size: 104px; }


.lvl-medal--done img { opacity: .72; }
.lvl-medal--future img { filter: grayscale(.7) brightness(.8); opacity: .38; }


.lvl-medal--current::before {
    content: '';
    position: absolute;
    inset: -14%;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--lvl-color, #A98EEF) 42%, transparent), transparent 68%);
    filter: blur(9px);
    z-index: -1;
}


.lvl-medal__fallback {
    position: absolute;
    inset: 12%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-family: 'Manrope', 'Inter', sans-serif;
    font-weight: 800;
    font-size: calc(var(--medal-size, 56px) * 0.34);
    color: #14141c;
    background: linear-gradient(160deg,
        color-mix(in srgb, var(--lvl-color, #8A8A99) 45%, #ffffff),
        var(--lvl-color, #8A8A99));
    box-shadow: 0 4px 12px rgba(0, 0, 0, .45);
}



.ach-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
}

.ach-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: filter .25s ease, transform .25s ease, opacity .25s ease;
}


.ach-icon--locked img {
    filter: grayscale(1) brightness(.75);
    opacity: .38;
}

.ach-card:hover .ach-icon--locked img { opacity: .5; }
.ach-card:hover .ach-icon img { transform: translateY(-2px); }


.ach-icon__fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(169, 142, 239, .18), rgba(109, 91, 255, .12));
    border: 1px solid rgba(255, 255, 255, .08);
}

.ach-icon--locked .ach-icon__fallback {
    background: rgba(255, 255, 255, .04);
    filter: grayscale(1);
    opacity: .45;
}



.award-overlay {
    position: fixed;
    inset: 0;
    z-index: 4000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(6, 6, 10, .86);
    backdrop-filter: blur(18px) saturate(115%);
    -webkit-backdrop-filter: blur(18px) saturate(115%);
}

.award-overlay.open { display: flex; animation: awardFade .28s ease; }

@keyframes awardFade {
    from { opacity: 0; }
    to { opacity: 1; }
}






.award-modal {
    position: relative;
    width: min(440px, 100%);
    padding: 44px 34px 32px;
    text-align: center;
    border-radius: 28px;
    
    background:
        linear-gradient(180deg, #16161F 0%, #0E0E14 55%, #0B0B10 100%) padding-box,
        linear-gradient(160deg,
            color-mix(in srgb, var(--award-color, #A98EEF) 85%, transparent) 0%,
            rgba(255, 255, 255, .14) 34%,
            color-mix(in srgb, var(--award-color, #A98EEF) 30%, transparent) 100%) border-box;
    border: 1px solid transparent;
    box-shadow: 0 32px 70px rgba(0, 0, 0, .72);
    overflow: hidden;
    animation: awardPop .5s cubic-bezier(.2, .9, .3, 1.25);
}


.award-modal::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 180px;
    background: radial-gradient(120% 100% at 50% 0%,
        color-mix(in srgb, var(--award-color, #A98EEF) 26%, transparent), transparent 72%);
    pointer-events: none;
}


.award-modal::after {
    content: '';
    position: absolute;
    top: 0;
    left: 18%;
    right: 18%;
    height: 1px;
    background: linear-gradient(90deg, transparent,
        color-mix(in srgb, var(--award-color, #A98EEF) 70%, #ffffff), transparent);
    pointer-events: none;
}

@keyframes awardPop {
    0% { opacity: 0; transform: scale(.82) translateY(18px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

.award-modal__close {
    position: absolute;
    top: 16px;
    right: 18px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: rgba(255, 255, 255, .5);
    font-size: 18px;
    line-height: 1;
    transition: background .2s ease, color .2s ease;
}

.award-modal__close:hover { background: rgba(255, 255, 255, .08); color: #fff; }

.award-modal__kicker {
    position: relative;
    display: inline-block;
    padding: 5px 14px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--award-color, #A98EEF) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--award-color, #A98EEF) 30%, transparent);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--award-color, #A98EEF);
    margin-bottom: 22px;
}

.award-modal__art {
    position: relative;
    width: 148px;
    height: 148px;
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}


.award-modal__art::before {
    content: '';
    position: absolute;
    inset: -10%;
    border-radius: 50%;
    background: radial-gradient(circle,
        color-mix(in srgb, var(--award-color, #A98EEF) 45%, transparent) 0%,
        transparent 62%);
    filter: blur(14px);
    animation: awardGlow 2.8s ease-in-out infinite alternate;
}


.award-modal__art::after {
    content: '';
    position: absolute;
    inset: 2%;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--award-color, #A98EEF) 32%, transparent);
    pointer-events: none;
}

@keyframes awardGlow {
    from { opacity: .55; transform: scale(.94); }
    to { opacity: 1; transform: scale(1.06); }
}

.award-modal__art img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 12px 26px rgba(0, 0, 0, .55));
}


.award-modal__art-fallback {
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Manrope', 'Inter', sans-serif;
    font-size: 42px;
    font-weight: 800;
    color: #0B0B10;
    background: linear-gradient(135deg, var(--award-color, #A98EEF), color-mix(in srgb, var(--award-color, #A98EEF) 55%, #fff));
    box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
}

.award-modal__title {
    position: relative;
    font-family: 'Manrope', 'Inter', sans-serif;
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.2;
    margin-bottom: 12px;
    color: #fff;
}

.award-modal__text {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text-secondary, #B8B8C7);
    margin-bottom: 22px;
}

.award-modal__xp {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 16px;
    margin-bottom: 26px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    color: var(--award-color, #A98EEF);
    background: color-mix(in srgb, var(--award-color, #A98EEF) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--award-color, #A98EEF) 34%, transparent);
}

.award-modal__btn {
    position: relative;
    width: 100%;
    padding: 15px 22px;
    border-radius: 14px;
    font-size: 14.5px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--accent, #A98EEF), var(--accent-deep, #6D5BFF));
    box-shadow: 0 12px 30px rgba(109, 91, 255, .34);
    transition: transform .18s ease, box-shadow .18s ease;
}

.award-modal__btn:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(109, 91, 255, .45); }

.award-modal__counter {
    margin-top: 14px;
    font-size: 12px;
    color: var(--text-muted, #7C7C8A);
}

@media (max-width: 520px) {
    .award-modal { padding: 32px 22px 24px; border-radius: 26px; }
    .award-modal__art { width: 120px; height: 120px; }
    .award-modal__title { font-size: 22px; }
}





.invite-overlay {
    position: fixed;
    inset: 0;
    z-index: 4200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(5, 5, 10, .8);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.invite-overlay.open { display: flex; animation: awardFade .26s ease; }

.invite-modal {
    position: relative;
    width: min(420px, 100%);
    padding: 32px 28px 26px;
    text-align: center;
    border-radius: 28px;
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(169, 142, 239, .2), transparent 70%),
        linear-gradient(180deg, #14141C, #0C0C12);
    border: 1px solid rgba(169, 142, 239, .34);
    box-shadow: 0 36px 80px rgba(0, 0, 0, .6), 0 0 50px rgba(109, 91, 255, .18);
    animation: awardPop .4s cubic-bezier(.2, .9, .3, 1.3);
}

.invite-modal__close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    color: rgba(255, 255, 255, .5);
    font-size: 17px;
    line-height: 1;
    transition: background .2s ease, color .2s ease;
}
.invite-modal__close:hover { background: rgba(255, 255, 255, .08); color: #fff; }

.invite-modal__kicker {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--accent, #A98EEF);
    margin-bottom: 18px;
}

.invite-modal__poster {
    width: 132px;
    height: 190px;
    margin: 0 auto 18px;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
    box-shadow: 0 16px 36px rgba(0, 0, 0, .5);
}
.invite-modal__poster img { width: 100%; height: 100%; object-fit: cover; }

.invite-modal__who {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-size: 13px;
    color: var(--text-secondary, #B8B8C7);
    margin-bottom: 10px;
}
.invite-modal__who strong { color: #fff; font-weight: 700; }

.invite-modal__ava {
    position: relative;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--accent, #A98EEF), var(--accent-deep, #6D5BFF));
    overflow: visible;
    flex: 0 0 30px;
}
.invite-modal__ava img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

.invite-modal__title {
    font-family: 'Manrope', 'Inter', sans-serif;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.25;
    color: #fff;
    margin-bottom: 6px;
}

.invite-modal__room {
    font-size: 12px;
    color: var(--text-muted, #7C7C8A);
    margin-bottom: 22px;
}

.invite-modal__actions { display: flex; gap: 10px; }

.invite-modal__btn {
    flex: 1;
    padding: 13px 18px;
    border-radius: 14px;
    font-size: 13.5px;
    font-weight: 700;
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.invite-modal__btn.primary {
    color: #fff;
    background: linear-gradient(135deg, var(--accent, #A98EEF), var(--accent-deep, #6D5BFF));
    box-shadow: 0 10px 26px rgba(109, 91, 255, .32);
}
.invite-modal__btn.primary:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(109, 91, 255, .45); }
.invite-modal__btn.ghost {
    color: var(--text-secondary, #B8B8C7);
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .1);
}
.invite-modal__btn.ghost:hover { background: rgba(255, 255, 255, .09); color: #fff; }

@media (max-width: 480px) {
    .invite-modal { padding: 26px 20px 22px; border-radius: 22px; }
    .invite-modal__poster { width: 108px; height: 156px; }
    .invite-modal__title { font-size: 18px; }
}