/* Public badge presentation. Kept separate from the builder bundle so profile badges
   can evolve without rebuilding the complete Tailwind stylesheet. */
.profile-achievement-wrap {
    isolation: isolate;
    margin-top: .88rem;
    padding: 4px 0;
}

.profile-achievement-pill {
    position: relative;
    isolation: isolate;
    min-height: 0;
    gap: 9px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 6px 3px;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.profile-achievement-pill::before {
    display: none;
}

.profile-achievement-pill::after {
    display: none;
}

.profile-achievement-badge {
    position: relative;
    z-index: 2;
    display: grid;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    place-items: center;
    overflow: visible;
    border: 1px solid transparent;
    border-radius: 11px;
    outline: 0;
    background:
        radial-gradient(circle at 31% 24%, color-mix(in srgb, var(--badge-a) 52%, white), var(--badge-b) 43%, color-mix(in srgb, var(--badge-c) 78%, #080910) 82%) padding-box,
        conic-gradient(from 218deg, color-mix(in srgb, var(--badge-a) 82%, white), var(--badge-c), color-mix(in srgb, var(--badge-b) 62%, white), var(--badge-a)) border-box;
    color: var(--badge-ink);
    box-shadow:
        0 12px 24px -13px rgba(0, 0, 0, .96),
        0 0 19px -8px var(--badge-glow),
        inset 0 1px 1px rgba(255, 255, 255, .42),
        inset 0 -6px 10px rgba(0, 0, 0, .24);
    cursor: help;
    transform: translateZ(0);
    transition: transform .22s cubic-bezier(.2, .8, .2, 1), filter .22s ease, box-shadow .22s ease;
    animation: profile-badge-arrive .52s cubic-bezier(.2, .85, .25, 1.15) both;
    animation-delay: calc(var(--badge-index, 0) * 70ms);
}

.profile-achievement-badge::before {
    position: absolute;
    z-index: 2;
    inset: 2px;
    border-radius: 9px;
    background:
        radial-gradient(circle at 25% 20%, rgba(255, 255, 255, .58) 0 3%, rgba(255, 255, 255, .13) 4% 18%, transparent 39%),
        linear-gradient(145deg, rgba(255, 255, 255, .22), transparent 42%);
    content: "";
    mix-blend-mode: screen;
    opacity: .76;
    pointer-events: none;
}

.profile-achievement-badge::after {
    position: absolute;
    z-index: -1;
    inset: -3px;
    border: 1px solid color-mix(in srgb, var(--badge-a) 32%, transparent);
    border-radius: 14px;
    background: transparent;
    content: "";
    mix-blend-mode: normal;
    opacity: .55;
    pointer-events: none;
}

.profile-achievement-aura {
    position: absolute;
    z-index: -3;
    inset: -5px;
    border-radius: 15px;
    background: radial-gradient(circle, var(--badge-glow), transparent 67%);
    filter: blur(4px);
    opacity: .2;
    pointer-events: none;
}

.profile-achievement-orbit {
    position: absolute;
    z-index: 1;
    inset: -3px;
    border: 1px solid color-mix(in srgb, var(--badge-a) 54%, transparent);
    border-top-color: color-mix(in srgb, var(--badge-b) 84%, white);
    border-right-color: transparent;
    border-radius: 15px;
    opacity: 0;
    pointer-events: none;
}

.profile-achievement-orbit i {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--badge-a) 75%, white);
    box-shadow: 0 0 7px 1px var(--badge-glow);
}

.profile-achievement-orbit i:first-child { top: 2px; right: 4px; }
.profile-achievement-orbit i:last-child { bottom: 1px; left: 6px; width: 2px; height: 2px; }

.profile-achievement-symbol {
    position: relative;
    z-index: 4;
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .11);
    border-radius: 8px;
    background: rgba(4, 5, 10, .1);
    box-shadow: inset 0 1px rgba(255, 255, 255, .12);
}

.profile-achievement-symbol svg,
.profile-achievement-badge > svg {
    position: relative;
    z-index: 4;
    width: 12px;
    height: 12px;
    fill: currentColor;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .38)) drop-shadow(0 0 5px var(--badge-glow));
}

.profile-achievement-badge:hover,
.profile-achievement-badge:focus,
.profile-achievement-badge:focus-visible {
    z-index: 20;
    filter: saturate(1.16) brightness(1.1);
    transform: translateY(-2px) scale(1.06);
    box-shadow:
        0 17px 27px -15px rgba(0, 0, 0, .98),
        0 0 25px -6px var(--badge-glow),
        inset 0 1px 1px rgba(255, 255, 255, .48),
        inset 0 -6px 10px rgba(0, 0, 0, .18);
}

.profile-achievement-badge:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--badge-a) 78%, white);
    outline-offset: 4px;
}

.badge-rarity-rare.profile-achievement-badge::after { border-color:color-mix(in srgb,var(--badge-a) 52%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--badge-b) 16%,transparent);opacity:.72; }
.badge-rarity-rare .profile-achievement-aura { opacity: .34; }
.badge-rarity-epic.profile-achievement-badge,
.badge-rarity-legendary.profile-achievement-badge,
.badge-rarity-mythic.profile-achievement-badge { isolation:isolate; }
.badge-rarity-epic .profile-achievement-aura { opacity: .42;animation:none; }
.badge-rarity-legendary .profile-achievement-aura { opacity: .64; animation: profile-badge-aura 5s ease-in-out infinite;animation-delay:calc(var(--badge-index,0) * -1.15s); }
.badge-rarity-mythic .profile-achievement-aura { opacity: .78; animation: profile-badge-aura 4.4s ease-in-out infinite;animation-delay:calc(var(--badge-index,0) * -1.2s); }

.badge-rarity-legendary .profile-achievement-orbit,
.badge-rarity-mythic .profile-achievement-orbit {
    opacity: .72;
    animation: profile-badge-orbit 7.8s linear infinite;
    animation-delay: calc(var(--badge-index, 0) * -1.3s);
}

.badge-rarity-legendary.profile-achievement-badge {
    box-shadow: 0 12px 24px -14px #000, 0 0 21px -6px var(--badge-glow), inset 0 1px 1px rgba(255, 255, 255, .52), inset 0 -6px 10px rgba(0, 0, 0, .18);
}

.badge-rarity-epic.profile-achievement-badge::before { animation:profile-badge-glint 8.4s ease-in-out infinite;animation-delay:calc(var(--badge-index,0) * -1.4s); }
.badge-rarity-legendary.profile-achievement-badge::before { animation:profile-badge-glint 7.2s ease-in-out infinite;animation-delay:calc(var(--badge-index,0) * -1.5s); }
.badge-rarity-legendary.profile-achievement-badge::after { inset:-4px;border-color:color-mix(in srgb,var(--badge-a) 62%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--badge-b) 24%,transparent),0 0 14px -7px var(--badge-glow);opacity:.9; }

.badge-rarity-legendary .profile-achievement-orbit { animation-duration: 7.2s; }

.badge-rarity-mythic.profile-achievement-badge {
    background:
        radial-gradient(circle at 31% 24%, rgba(255, 255, 255, .58), transparent 24%) padding-box,
        conic-gradient(from 210deg, var(--badge-a), var(--badge-b), var(--badge-c), #67e8f9, var(--badge-a)) padding-box,
        conic-gradient(from 30deg, #fff, var(--badge-b), var(--badge-a), #fff) border-box;
}

.badge-rarity-mythic.profile-achievement-badge::before { animation:profile-badge-glint 6.4s ease-in-out infinite;animation-delay:calc(var(--badge-index,0) * -1.55s); }
.badge-rarity-mythic.profile-achievement-badge::after { inset:-4px;border-color:color-mix(in srgb,var(--badge-a) 68%,white);box-shadow:0 0 0 1px color-mix(in srgb,var(--badge-c) 32%,transparent),0 0 18px -6px var(--badge-glow);opacity:.96; }

.badge-rarity-mythic .profile-achievement-orbit {
    inset: -4px;
    border-width: 1.5px;
    opacity: .94;
    animation-duration: 5.8s;
}

.profile-achievement-tooltip {
    position: absolute;
    z-index: 80;
    left: 50%;
    bottom: calc(100% + 16px);
    display: grid;
    width: max-content;
    min-width: 194px;
    max-width: min(248px, calc(100vw - 28px));
    gap: 4px;
    overflow: visible;
    transform: translate(-50%, 7px) scale(.97);
    transform-origin: 50% 100%;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 15px;
    background:
        radial-gradient(circle at 15% 0, color-mix(in srgb, var(--badge-a) 16%, transparent), transparent 42%),
        rgba(8, 9, 15, .955);
    padding: 11px 12px 12px;
    color: #fff;
    text-align: left;
    box-shadow: 0 24px 65px -24px rgba(0, 0, 0, 1), inset 0 1px rgba(255, 255, 255, .07);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    transition: opacity .18s ease, transform .22s cubic-bezier(.2, .8, .2, 1), visibility .18s;
}

.profile-achievement-tooltip::after {
    position: absolute;
    top: 100%;
    left: 50%;
    width: 10px;
    height: 10px;
    transform: translate(-50%, -5px) rotate(45deg);
    border-right: 1px solid rgba(255, 255, 255, .14);
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    background: #090a10;
    content: "";
}

.profile-achievement-tooltip-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    color: color-mix(in srgb, var(--badge-a) 76%, white);
    font-size: .56rem;
    font-weight: 900;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.profile-achievement-tooltip-meta i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
}

.profile-achievement-tooltip strong {
    overflow-wrap: anywhere;
    color: #fff;
    font: 780 .82rem/1.35 "Sora", "Manrope", sans-serif;
    letter-spacing: -.015em;
}

.profile-achievement-tooltip small {
    overflow-wrap: anywhere;
    color: rgba(255, 255, 255, .62);
    font-size: .68rem;
    line-height: 1.48;
}

.profile-achievement-tooltip time {
    margin-top: 3px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding-top: 6px;
    color: color-mix(in srgb, var(--badge-a) 68%, white);
    font-size: .58rem;
    font-weight: 760;
    letter-spacing: .015em;
}

.profile-achievement-badge:hover .profile-achievement-tooltip,
.profile-achievement-badge:focus .profile-achievement-tooltip,
.profile-achievement-badge:focus-visible .profile-achievement-tooltip {
    transform: translate(-50%, 0) scale(1);
    opacity: 1;
    visibility: visible;
}

/* The first and last tooltip open towards the pill instead of outside the viewport. */
.profile-achievement-badge:first-child:not(:only-child) .profile-achievement-tooltip {
    right: auto;
    left: -5px;
    transform: translate(0, 7px) scale(.97);
    transform-origin: 18px 100%;
}

.profile-achievement-badge:first-child:not(:only-child) .profile-achievement-tooltip::after { right: auto; left: 22px; }
.profile-achievement-badge:first-child:not(:only-child):is(:hover, :focus, :focus-visible) .profile-achievement-tooltip { transform: translate(0, 0) scale(1); }

.profile-achievement-badge:last-child:not(:only-child) .profile-achievement-tooltip {
    right: -5px;
    left: auto;
    transform: translate(0, 7px) scale(.97);
    transform-origin: calc(100% - 18px) 100%;
}

.profile-achievement-badge:last-child:not(:only-child) .profile-achievement-tooltip::after { right: 17px; left: auto; }
.profile-achievement-badge:last-child:not(:only-child):is(:hover, :focus, :focus-visible) .profile-achievement-tooltip { transform: translate(0, 0) scale(1); }

.avatar-position-left .profile-achievement-badge .profile-achievement-tooltip {
    right: auto;
    left: -5px;
    transform: translate(0, 7px) scale(.97);
    transform-origin: 18px 100%;
}

.avatar-position-left .profile-achievement-badge .profile-achievement-tooltip::after { right: auto; left: 22px; }
.avatar-position-left .profile-achievement-badge:is(:hover, :focus, :focus-visible) .profile-achievement-tooltip { transform: translate(0, 0) scale(1); }

.avatar-position-right .profile-achievement-badge .profile-achievement-tooltip {
    right: -5px;
    left: auto;
    transform: translate(0, 7px) scale(.97);
    transform-origin: calc(100% - 18px) 100%;
}

.avatar-position-right .profile-achievement-badge .profile-achievement-tooltip::after { right: 17px; left: auto; }
.avatar-position-right .profile-achievement-badge:is(:hover, :focus, :focus-visible) .profile-achievement-tooltip { transform: translate(0, 0) scale(1); }

.profile-theme-minimal .profile-achievement-pill,
.builder-preview.profile-theme-minimal .profile-achievement-pill {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

@keyframes profile-badge-pill-sheen {
    0%, 58% { background-position: 160% 0; opacity: .12; }
    74% { opacity: .58; }
    100% { background-position: -120% 0; opacity: .12; }
}

@keyframes profile-badge-orbit { to { transform: rotate(360deg); } }

@keyframes profile-badge-arrive {
    from { opacity:0;transform:translateY(8px) scale(.82); }
    to { opacity:1;transform:translateZ(0) scale(1); }
}

@keyframes profile-badge-aura {
    0%, 100% { opacity: .36; transform: scale(.88); }
    50% { opacity: .86; transform: scale(1.13); }
}

@keyframes profile-badge-glint {
    0%, 42%, 100% { opacity: .38; }
    55% { opacity: .95; }
    68% { opacity: .48; }
}

@media (max-width: 480px) {
    .profile-achievement-wrap { margin-top: .72rem; padding: 3px 0; }
    .profile-achievement-pill { min-height: 0; gap: 7px; padding: 5px 2px; }
    .profile-achievement-badge { width: 28px; height: 28px; flex-basis: 28px; border-radius:9px; }
    .profile-achievement-symbol { width: 19px; height: 19px; border-radius:6px; }
    .profile-achievement-aura { inset:-4px; }
    .profile-achievement-orbit,
    .profile-achievement-badge::after { inset:-2px; }
    .badge-rarity-legendary.profile-achievement-badge::after,
    .badge-rarity-mythic.profile-achievement-badge::after,
    .badge-rarity-mythic .profile-achievement-orbit { inset:-3px; }
    .profile-achievement-symbol svg,
    .profile-achievement-badge > svg { width: 12px; height: 12px; }
    .profile-achievement-tooltip { width: min(194px, calc(100vw - 28px)); min-width: 0; max-width: calc(100vw - 28px); }
}

@media (hover: none) {
    .profile-achievement-badge:hover:not(:focus) { filter: none; transform: none; }
    .profile-achievement-badge:hover:not(:focus) .profile-achievement-tooltip { opacity: 0; visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
    .profile-achievement-pill::after,
    .profile-achievement-aura,
    .profile-achievement-orbit,
    .profile-achievement-badge::before,
    .profile-achievement-badge { animation: none !important; }
    .profile-achievement-badge,
    .profile-achievement-tooltip { transition: none !important; }
}