/* ════════════════════════════════════════════════════════════════
   Бейджи / достижения
   - Используется на /profile?tab=achievements, публичных профилях,
     лидерборде и в footer-тостах.
   - 5 редкостей: common / rare / epic / legend / mythic.
   - Все цвета через rgba/hex, не используем CSS-переменные сайта,
     чтобы эффекты были одинаковыми во всех темах.
═══════════════════════════════════════════════════════════════════ */

.badge-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
    gap:16px;
}
.badge-grid.compact{
    grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
    gap:12px;
}

.badge{
    position:relative;
    background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.012));
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;
    padding:20px 12px 14px;
    text-align:center;
    transition:transform .25s ease, background-color .25s ease, border-color .25s ease;
    overflow:hidden;
    color:#e7eef8;
}
.badge:hover{transform:translateY(-3px);background:rgba(255,255,255,.05)}

.badge-img-wrap{
    position:relative;
    width:128px; height:128px;
    margin:0 auto 12px;
    display:flex; align-items:center; justify-content:center;
    isolation:isolate;
}
.badge-img-wrap::before{
    content:""; position:absolute; inset:-4px;
    border-radius:50%;
    z-index:0;
    pointer-events:none;
}
.badge-png{
    position:relative; z-index:2;
    width:118px; height:118px; object-fit:contain;
    filter: drop-shadow(0 5px 12px rgba(0,0,0,.55));
}

.badge-grid.compact .badge-img-wrap{width:108px;height:108px}
.badge-grid.compact .badge-png{width:100px;height:100px}

.badge-name{
    font-size:13.5px;font-weight:700;letter-spacing:-.005em;margin-bottom:4px;
    line-height:1.25;
}
.badge-cond{
    font-size:11.5px;color:#8794ab;line-height:1.4;
    min-height:32px;
}
.badge-cond:empty{display:none}
.rarity-tag{
    display:inline-block;font-size:9px;font-weight:700;
    padding:2px 8px;border-radius:5px;text-transform:uppercase;letter-spacing:.1em;
    margin-top:8px;
}

/* Прогресс-бар для незавершённых */
.badge .progress-bar{
    margin-top:8px;height:5px;border-radius:3px;
    background:rgba(255,255,255,.06);overflow:hidden;
}
.badge .progress-bar > i{
    display:block;height:100%;
    background:linear-gradient(90deg,#5b9dff,#9c7fff);
}
.badge .progress-text{
    font-size:9.5px;color:#8794ab;margin-top:4px;
    font-family:ui-monospace,Menlo,monospace;
}

/* ═══ COMMON ═══ */
.badge.common .badge-img-wrap::before{
    background: radial-gradient(circle, rgba(148,163,184,.20) 0%, transparent 65%);
}
.badge.common .rarity-tag{background:rgba(148,163,184,.16);color:#94a3b8}

/* ═══ RARE ═══ */
.badge.rare .badge-img-wrap::before{
    background: radial-gradient(circle, rgba(78,161,255,.38) 0%, transparent 62%);
    animation: badge-rare-pulse 3.6s ease-in-out infinite;
}
@keyframes badge-rare-pulse{
    0%,100%{opacity:.55;transform:scale(1)}
    50%{opacity:1;transform:scale(1.08)}
}
.badge.rare .badge-png{
    filter: drop-shadow(0 5px 12px rgba(0,0,0,.55))
            drop-shadow(0 0 14px rgba(78,161,255,.45));
}
.badge.rare .rarity-tag{background:rgba(78,161,255,.18);color:#4ea1ff}

/* ═══ EPIC ═══ */
.badge.epic .badge-img-wrap::before{
    background:
        conic-gradient(from 0deg,
            rgba(192,133,255,.75), rgba(192,133,255,0) 25%,
            rgba(192,133,255,.75) 50%, rgba(192,133,255,0) 75%,
            rgba(192,133,255,.75) 100%);
    filter: blur(12px);
    opacity:.9;
    animation: badge-epic-rotate 6s linear infinite;
}
@keyframes badge-epic-rotate{to{transform:rotate(360deg)}}
.badge.epic .badge-png{
    filter: drop-shadow(0 5px 12px rgba(0,0,0,.55))
            drop-shadow(0 0 16px rgba(192,133,255,.55));
}
.badge.epic .rarity-tag{background:rgba(192,133,255,.18);color:#c085ff}

/* ═══ LEGENDARY ═══ */
.badge.legend .badge-img-wrap::before{
    background:
        radial-gradient(circle, rgba(255,198,58,.50) 0%, rgba(255,148,0,.22) 38%, transparent 70%);
    animation: badge-legend-glow 3s ease-in-out infinite;
}
@keyframes badge-legend-glow{
    0%,100%{opacity:.7;transform:scale(1)}
    50%{opacity:1;transform:scale(1.1)}
}
.badge.legend .badge-rays{
    position:absolute; inset:-22px;
    border-radius:50%;
    z-index:1;
    background:
        conic-gradient(from 0deg,
            transparent 0deg, rgba(255,221,120,.55) 4deg, transparent 8deg,
            transparent 30deg, rgba(255,221,120,.45) 34deg, transparent 38deg,
            transparent 60deg, rgba(255,221,120,.55) 64deg, transparent 68deg,
            transparent 90deg, rgba(255,221,120,.45) 94deg, transparent 98deg,
            transparent 120deg, rgba(255,221,120,.55) 124deg, transparent 128deg,
            transparent 150deg, rgba(255,221,120,.45) 154deg, transparent 158deg,
            transparent 180deg, rgba(255,221,120,.55) 184deg, transparent 188deg,
            transparent 210deg, rgba(255,221,120,.45) 214deg, transparent 218deg,
            transparent 240deg, rgba(255,221,120,.55) 244deg, transparent 248deg,
            transparent 270deg, rgba(255,221,120,.45) 274deg, transparent 278deg,
            transparent 300deg, rgba(255,221,120,.55) 304deg, transparent 308deg,
            transparent 330deg, rgba(255,221,120,.45) 334deg, transparent 338deg);
    filter: blur(.6px);
    opacity:.55;
    animation: badge-legend-rotate 14s linear infinite;
    pointer-events:none;
}
@keyframes badge-legend-rotate{to{transform:rotate(360deg)}}
.badge.legend .badge-png{
    filter: drop-shadow(0 5px 12px rgba(0,0,0,.55))
            drop-shadow(0 0 18px rgba(255,200,60,.6));
}
.badge.legend .badge-orbit{
    position:absolute; inset:-8px;
    border-radius:50%;
    z-index:3;
    pointer-events:none;
    animation: badge-legend-orbit 5s linear infinite;
}
.badge.legend .badge-orbit::before{
    content:""; position:absolute; top:-3px; left:50%;
    width:9px;height:9px;border-radius:50%;
    background:radial-gradient(circle, #fff8d8 0%, #ffd66e 60%, transparent 100%);
    box-shadow: 0 0 16px 4px rgba(255,220,100,.75);
    transform:translateX(-50%);
}
@keyframes badge-legend-orbit{to{transform:rotate(360deg)}}
.badge.legend .rarity-tag{
    background:linear-gradient(90deg, rgba(255,200,60,.22), rgba(255,160,30,.22));
    color:#ffc63a;
    border:1px solid rgba(255,200,60,.32);
}
.badge.legend .badge-name{
    background:linear-gradient(135deg, #ffe27a 0%, #ffb22a 100%);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* ═══ MYTHIC ═══ */
.badge.mythic .badge-img-wrap::before{
    background:
        radial-gradient(circle, rgba(255,90,120,.62) 0%, rgba(255,60,30,.32) 35%, transparent 72%);
    animation: badge-mythic-glow 2s ease-in-out infinite;
}
@keyframes badge-mythic-glow{
    0%,100%{opacity:.75;transform:scale(1)}
    50%{opacity:1;transform:scale(1.13)}
}
.badge.mythic .badge-rays{
    position:absolute; inset:-26px;
    border-radius:50%;
    z-index:1;
    background:
        conic-gradient(from 0deg,
            #ff3b6e, #ff7a18, #ffd83a, #ff7a18, #ff3b6e,
            #c93bff, #ff3b6e, #ff7a18, #ffd83a, #ff3b6e);
    filter: blur(14px);
    opacity:.55;
    animation: badge-mythic-spin 8s linear infinite;
    pointer-events:none;
}
@keyframes badge-mythic-spin{to{transform:rotate(360deg)}}
.badge.mythic .badge-png{
    filter: drop-shadow(0 5px 12px rgba(0,0,0,.55))
            drop-shadow(0 0 22px rgba(255,90,120,.7))
            drop-shadow(0 0 8px rgba(255,200,60,.45));
}
.badge.mythic .badge-orbit{
    position:absolute; inset:-10px; border-radius:50%; z-index:3; pointer-events:none;
    animation: badge-mythic-orbit-1 4s linear infinite;
}
.badge.mythic .badge-orbit::before{
    content:""; position:absolute; top:-4px; left:50%; width:10px;height:10px;
    border-radius:50%;background:radial-gradient(circle, #fff 0%, #ff5a78 55%, transparent 100%);
    box-shadow: 0 0 18px 5px rgba(255,90,120,.85); transform:translateX(-50%);
}
.badge.mythic .badge-orbit2{
    position:absolute; inset:-10px; border-radius:50%; z-index:3; pointer-events:none;
    animation: badge-mythic-orbit-2 4.5s linear infinite; transform: rotate(120deg);
}
.badge.mythic .badge-orbit2::before{
    content:""; position:absolute; top:-4px; left:50%; width:8px;height:8px;
    border-radius:50%;background:radial-gradient(circle, #fff 0%, #ff7a18 55%, transparent 100%);
    box-shadow: 0 0 14px 4px rgba(255,122,24,.8); transform:translateX(-50%);
}
.badge.mythic .badge-orbit3{
    position:absolute; inset:-10px; border-radius:50%; z-index:3; pointer-events:none;
    animation: badge-mythic-orbit-3 5s linear infinite reverse; transform: rotate(240deg);
}
.badge.mythic .badge-orbit3::before{
    content:""; position:absolute; top:-4px; left:50%; width:8px;height:8px;
    border-radius:50%;background:radial-gradient(circle, #fff 0%, #ffd83a 55%, transparent 100%);
    box-shadow: 0 0 14px 4px rgba(255,216,58,.8); transform:translateX(-50%);
}
@keyframes badge-mythic-orbit-1{from{transform:rotate(0)} to{transform:rotate(360deg)}}
@keyframes badge-mythic-orbit-2{from{transform:rotate(120deg)} to{transform:rotate(480deg)}}
@keyframes badge-mythic-orbit-3{from{transform:rotate(240deg)} to{transform:rotate(600deg)}}
.badge.mythic{
    border-color: rgba(255,90,120,.32);
    box-shadow: 0 0 0 1px rgba(255,90,120,.08), 0 0 30px rgba(255,90,120,.12);
}
.badge.mythic .rarity-tag{
    background:linear-gradient(90deg, rgba(255,90,120,.22), rgba(255,122,24,.22), rgba(255,216,58,.22));
    color:#ff5a78;
    border:1px solid rgba(255,90,120,.42);
}
.badge.mythic .badge-name{
    background:linear-gradient(135deg, #ff5a78 0%, #ff7a18 50%, #ffd83a 100%);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
    animation: badge-mythic-text-shift 4s ease-in-out infinite;
    background-size: 200% 100%;
}
@keyframes badge-mythic-text-shift{
    0%,100%{background-position: 0% 50%}
    50%{background-position: 100% 50%}
}

/* ═══ Заблокированный ═══ */
.badge.locked{opacity:.78}
.badge.locked .badge-png{
    filter: grayscale(1) brightness(.55) !important;
    opacity:.55;
}
.badge.locked .badge-img-wrap::before,
.badge.locked .badge-rays,
.badge.locked .badge-orbit,
.badge.locked .badge-orbit2,
.badge.locked .badge-orbit3{display:none}
.badge.locked .badge-name{
    color:#5e6a82; -webkit-text-fill-color: #5e6a82; background:none;
    -webkit-background-clip: initial; background-clip: initial;
    animation: none;
}
.badge.locked .rarity-tag{opacity:.5}

/* ═══ Сетка тостов ═══ */
.badge-toast-stack{
    position:fixed;
    top:80px; right:24px;
    display:flex;flex-direction:column;gap:10px;
    z-index:9999;
    max-width: 360px;
    pointer-events:none;
}
.badge-toast{
    pointer-events:auto;
    background:linear-gradient(180deg, rgba(20,28,48,.96), rgba(15,22,40,.96));
    border:1px solid rgba(255,255,255,.16);
    border-radius:14px;
    padding:14px 16px 14px 14px;
    display:flex;gap:14px;align-items:center;
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    box-shadow:0 14px 36px rgba(0,0,0,.55);
    min-width:300px;
    color:#e7eef8;
    animation: badge-toast-in .55s cubic-bezier(.34,1.56,.64,1) forwards;
    transform: translateX(110%);
    opacity:0;
}
.badge-toast.fade-out{animation: badge-toast-out .35s ease forwards}
@keyframes badge-toast-in{to{transform: translateX(0); opacity:1}}
@keyframes badge-toast-out{to{transform: translateX(110%); opacity:0}}
.badge-toast .toast-icon{
    position:relative;width:64px;height:64px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    isolation:isolate;
}
.badge-toast .toast-icon::before{content:""; position:absolute; inset:-2px; border-radius:50%; z-index:0; pointer-events:none}
.badge-toast .toast-icon img{
    position:relative;z-index:2;width:58px;height:58px;object-fit:contain;
    filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));
}
.badge-toast.common .toast-icon::before{background:radial-gradient(circle, rgba(148,163,184,.20) 0%, transparent 65%)}
.badge-toast.rare .toast-icon::before{
    background: radial-gradient(circle, rgba(78,161,255,.45) 0%, transparent 60%);
    animation: badge-rare-pulse 3.6s ease-in-out infinite;
}
.badge-toast.rare img{filter:drop-shadow(0 2px 6px rgba(0,0,0,.5)) drop-shadow(0 0 10px rgba(78,161,255,.55))}
.badge-toast.epic .toast-icon::before{
    background: conic-gradient(from 0deg, rgba(192,133,255,.75), rgba(192,133,255,0) 25%,
        rgba(192,133,255,.75) 50%, rgba(192,133,255,0) 75%, rgba(192,133,255,.75) 100%);
    filter:blur(8px);opacity:.9;animation: badge-epic-rotate 6s linear infinite;
}
.badge-toast.epic img{filter:drop-shadow(0 2px 6px rgba(0,0,0,.5)) drop-shadow(0 0 12px rgba(192,133,255,.6))}
.badge-toast.legend .toast-icon::before{
    background: radial-gradient(circle, rgba(255,198,58,.55) 0%, rgba(255,148,0,.25) 38%, transparent 70%);
    animation: badge-legend-glow 3s ease-in-out infinite;
}
.badge-toast.legend img{filter:drop-shadow(0 2px 6px rgba(0,0,0,.5)) drop-shadow(0 0 14px rgba(255,200,60,.65))}
.badge-toast.legend{border-color:rgba(255,200,60,.35); box-shadow:0 14px 36px rgba(255,160,30,.18), 0 0 0 1px rgba(255,200,60,.18)}
.badge-toast.mythic .toast-icon::before{
    background: radial-gradient(circle, rgba(255,90,120,.62) 0%, rgba(255,60,30,.32) 35%, transparent 72%);
    animation: badge-mythic-glow 2s ease-in-out infinite;
}
.badge-toast.mythic img{filter:drop-shadow(0 2px 6px rgba(0,0,0,.5)) drop-shadow(0 0 18px rgba(255,90,120,.75))}
.badge-toast.mythic{border-color:rgba(255,90,120,.42); box-shadow:0 14px 36px rgba(255,90,120,.22), 0 0 0 1px rgba(255,90,120,.22)}
.badge-toast .toast-text{flex:1;min-width:0}
.badge-toast .toast-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#8794ab;margin-bottom:3px}
.badge-toast.legend .toast-title{color:#ffc63a}
.badge-toast.mythic .toast-title{color:#ff5a78}
.badge-toast.epic .toast-title{color:#c085ff}
.badge-toast.rare .toast-title{color:#4ea1ff}
.badge-toast .toast-name{font-size:15px;font-weight:800;letter-spacing:-.01em;margin-bottom:3px}
.badge-toast.legend .toast-name{
    background:linear-gradient(135deg, #ffe27a 0%, #ffb22a 100%);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.badge-toast.mythic .toast-name{
    background:linear-gradient(135deg, #ff5a78 0%, #ff7a18 50%, #ffd83a 100%);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.badge-toast .toast-cond{font-size:11.5px;color:#8794ab;line-height:1.35}

/* ═══ Микро-бейджи (для строк лидерборда / публичного профиля) ═══ */
.badge-mini{
    width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;
    flex-shrink:0;
}
.badge-mini img{
    width:32px;height:32px;object-fit:contain;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,.5));
}
.badge-mini.legend img{filter: drop-shadow(0 2px 5px rgba(0,0,0,.5)) drop-shadow(0 0 8px rgba(255,200,60,.6))}
.badge-mini.mythic img{filter: drop-shadow(0 2px 5px rgba(0,0,0,.5)) drop-shadow(0 0 10px rgba(255,90,120,.7))}
.badge-mini.epic img{filter: drop-shadow(0 2px 5px rgba(0,0,0,.5)) drop-shadow(0 0 7px rgba(192,133,255,.55))}
.badge-mini.rare img{filter: drop-shadow(0 2px 5px rgba(0,0,0,.5)) drop-shadow(0 0 6px rgba(78,161,255,.5))}

/* ═══ Топ-3 редких бейджа в шапке публичного профиля ═══ */
/* Block-level + width:fit-content - так гарантированно прижат к левому краю
   и идёт отдельной строкой под .user-profile-stats. Без этого inline-flex
   ловил visual quirks из-за flex-wrap:wrap у родителя. */
.user-top-achievements{
    display:flex;
    align-items:center;
    gap:6px;
    width:fit-content;
    max-width:100%;
    padding:6px 10px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
    border-radius:10px;
    margin:12px 0 10px;
    text-decoration:none;
    color:inherit;
    flex-wrap:wrap;
}
.user-top-achievements .badge-mini{transition: transform .18s}
.user-top-achievements .badge-mini:hover{transform: scale(1.12)}
.user-top-achievements-more{
    color:#8794ab;font-size:12px;font-weight:700;
    padding:0 8px 0 4px;
    text-decoration:none;
    font-family:ui-monospace,Menlo,monospace;
}
.user-top-achievements-more:hover{color:#bcd9ff}

/* ═══ Reduced motion ═══ */
@media (prefers-reduced-motion: reduce){
    .badge-img-wrap::before,
    .badge .badge-rays,
    .badge .badge-orbit,
    .badge .badge-orbit2,
    .badge .badge-orbit3,
    .badge.mythic .badge-name,
    .badge-toast .toast-icon::before{
        animation: none !important;
    }
}