/* =========================================
   POPUP LOGRO DESBLOQUEADO
========================================= */

#vsd-achievement{

    position:fixed;
    inset:0;

    display:none;

    justify-content:center;
    align-items:center;

    background:rgba(0,0,0,.72);

    z-index:999999;

    opacity:0;

}

#vsd-achievement.show,
#vsd-achievement.hide{

    display:flex;

}

#vsd-achievement.show{

    animation:vsdFadeIn .35s forwards;

}

#vsd-achievement.hide{

    animation:vsdFadeOut .35s forwards;

}

/* ========================================= */

.vsd-achievement-card{

    width:420px;
    max-width:calc(100vw - 30px);

    background:linear-gradient(180deg,#1d2230,#11151d);

    border:1px solid rgba(255,209,102,.45);

    border-radius:18px;

    overflow:hidden;

    display:flex;

    position:relative;

    backdrop-filter:blur(14px);

    box-shadow:
        0 25px 60px rgba(0,0,0,.55),
        0 0 0 1px rgba(255,209,102,.15),
        0 0 35px rgba(255,209,102,.18);

    transform:scale(.82);

    opacity:0;

}

/* ENTRADA */

#vsd-achievement.show .vsd-achievement-card{

    animation:vsdCardIn .35s cubic-bezier(.2,.9,.2,1) forwards;

}

/* SALIDA */

#vsd-achievement.hide .vsd-achievement-card{

    animation:vsdCardOut .30s ease forwards;

}

/* ========================================= */

.vsd-achievement-left{

    width:120px;
    min-width:120px;

    background:#0e1118;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:16px;

    position:relative;

    z-index:2;

}

.vsd-achievement-left img{

    width:92px;
    height:92px;

    object-fit:contain;

    filter:drop-shadow(0 0 12px rgba(255,209,102,.35));

}

.vsd-achievement-right{

    flex:1;

    padding:18px 20px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    position:relative;

    z-index:2;

}

.vsd-achievement-top{

    font-size:12px;

    text-transform:uppercase;

    letter-spacing:2px;

    color:#ffd166;

    font-weight:700;

    margin-bottom:6px;

}

.vsd-achievement-name{

    color:#fff;

    font-size:23px;

    font-weight:700;

    line-height:1.15;

    margin-bottom:8px;

}

.vsd-achievement-desc{

    color:#cfd6e6;

    font-size:14px;

    line-height:1.45;

}

.vsd-achievement-glow{

    position:absolute;
    inset:0;

    pointer-events:none;

    background:
        radial-gradient(
            circle at top left,
            rgba(255,209,102,.18),
            transparent 45%
        );

    opacity:0;

    animation:vsdGlow .8s ease forwards;

    z-index:1;

}

/* =========================================
   ANIMACIONES
========================================= */

@keyframes vsdFadeIn{

    from{

        opacity:0;

    }

    to{

        opacity:1;

    }

}

@keyframes vsdFadeOut{

    from{

        opacity:1;

    }

    to{

        opacity:0;

    }

}

@keyframes vsdCardIn{

    from{

        transform:scale(.82);

        opacity:0;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}

@keyframes vsdCardOut{

    from{

        transform:scale(1);

        opacity:1;

    }

    to{

        transform:scale(.92);

        opacity:0;

    }

}
@keyframes vsdGlow{

    0%{

        opacity:0;

    }

    35%{

        opacity:1;

    }

    100%{

        opacity:.35;

    }

}

/* =========================================
   MÓVIL
========================================= */

@media(max-width:700px){

    .vsd-achievement-card{

        width:calc(100vw - 24px);

    }

    .vsd-achievement-left{

        width:90px;
        min-width:90px;

    }

    .vsd-achievement-left img{

        width:70px;
        height:70px;

    }

    .vsd-achievement-name{

        font-size:19px;

    }

}