.achievement-toast-host{
    position:fixed;
    z-index:1200;
    top:max(20px, env(safe-area-inset-top));
    right:max(20px, env(safe-area-inset-right));
    width:min(390px, calc(100vw - 32px));
    pointer-events:none;
}

.achievement-toast{
    position:relative;
    display:grid;
    grid-template-columns:auto minmax(0, 1fr);
    gap:14px;
    overflow:hidden;
    padding:18px 18px 20px;
    color:var(--text);
    border:1px solid rgba(139,233,255,.26);
    border-radius:var(--radius-medium);
    background:
        linear-gradient(135deg, rgba(16,50,83,.92), rgba(2,11,22,.94));
    box-shadow:
        0 16px 45px rgba(0,8,20,.52),
        0 0 28px rgba(75,163,255,.2),
        inset 0 1px 0 rgba(255,255,255,.08);
    backdrop-filter:blur(18px) saturate(135%);
    opacity:0;
    transform:translate3d(20px,-8px,0) scale(.98);
    transition:
        opacity var(--transition-normal) ease,
        transform var(--transition-normal) cubic-bezier(.2,.8,.2,1);
    pointer-events:auto;
}

.achievement-toast--visible{
    opacity:1;
    transform:none;
}

.achievement-toast--leaving{
    opacity:0;
    transform:translate3d(14px,0,0) scale(.98);
}

.achievement-toast__glow{
    position:absolute;
    width:120px;
    height:120px;
    top:-72px;
    right:-38px;
    border-radius:50%;
    background:rgba(75,163,255,.28);
    filter:blur(30px);
    pointer-events:none;
}

.achievement-toast__icon{
    display:grid;
    place-items:center;
    width:48px;
    height:48px;
    margin-top:2px;
    border:1px solid rgba(139,233,255,.28);
    border-radius:14px;
    background:rgba(75,163,255,.1);
    box-shadow:inset 0 0 18px rgba(75,163,255,.1);
    font-size:25px;
}

.achievement-toast__copy{
    min-width:0;
}

.achievement-toast__eyebrow{
    margin:0 0 5px;
    color:var(--secondary);
    font-size:.7rem;
    font-weight:700;
    letter-spacing:.16em;
    text-transform:uppercase;
}

.achievement-toast__name{
    display:block;
    overflow-wrap:anywhere;
    font-size:1.05rem;
    line-height:1.3;
}

.achievement-toast__description{
    margin:5px 0 9px;
    color:var(--text-muted);
    font-size:.86rem;
    line-height:1.45;
}

.achievement-toast__action{
    color:var(--primary-light);
    font-size:.78rem;
    font-weight:600;
    text-decoration:none;
}

.achievement-toast__action:hover,
.achievement-toast__action:focus-visible{
    color:var(--secondary);
    text-decoration:underline;
    text-underline-offset:3px;
}

.achievement-toast__progress{
    position:absolute;
    right:0;
    bottom:0;
    left:0;
    height:3px;
    background:linear-gradient(90deg, var(--primary), var(--secondary));
    box-shadow:0 0 9px rgba(139,233,255,.72);
    transform-origin:left center;
    animation:achievement-toast-lifetime 5s linear forwards;
}

@keyframes achievement-toast-lifetime{
    to{ transform:scaleX(0); }
}

@media (max-width:600px){
    .achievement-toast-host{
        top:max(12px, env(safe-area-inset-top));
        right:16px;
        left:16px;
        width:auto;
    }

    .achievement-toast{
        padding:15px 15px 18px;
    }
}

@media (prefers-reduced-motion:reduce){
    .achievement-toast{
        transform:none;
        transition:opacity .1s linear;
    }
}