.toast-container {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1000;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    gap: 12px;
    pointer-events: none;
}

.app-toast {
    width: min(360px, calc(100vw - 40px));
    min-height: 64px;
    box-sizing: border-box;
    border: 1px solid orange;
    border-radius: 8px;
    background: rgba(10, 10, 10, 0.8);
    color: #f5f5f5;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    opacity: 0;
    transform: translateX(120%);
    transition: opacity 250ms ease, transform 600ms ease;
    pointer-events: auto;
}

.app-toast.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.app-toast.is-leaving {
    opacity: 0;
}

.toast-container .app-toast p {
    margin: 0;
    text-align: left;

    .toast-generic {
        color: white;
    }
}

.app-toast-success {
    border-color: #63c46f;
}

.app-toast-error {
    border-color: #e45c5c;
}

.app-toast-info {
    border-color: #6aa6df;
}

.app-toast-note,
.app-toast-inventory,
.app-toast-achievement {
    color: orange;
}

.app-toast-inventory img {
    flex: 0 0 auto;
    display: block;
    width: 52px;
    max-height: 70px;
    object-fit: contain;
}

.app-toast-achievement .succesapercu {
    flex: 0 0 auto;
    margin: 0;
}

.toast-achievement-text {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.toast-achievement-text strong,
.toast-achievement-text span,
.toast-achievement-text small {
    display: block;
}

.toast-achievement-text span {
    color: #fff;
    font-weight: bold;
}

.toast-achievement-text small {
    color: #ddd;
    line-height: 1.3;
}

.succesapercu {
    color: orange;
    border-radius: 50%;
    width: 50px;
    height: 65px;
    margin: 10px;
    display: flex;
    align-items: center;
    justify-content: center;

    span {
        position: absolute;
        top: 40px;
        right: 0;
        background: black;
        color: orange;
        border-radius: 10px;
        opacity: 0;
        font-weight: normal;
        font-size: 12px;
        width: 200px;
        padding: 20px;
        text-align: justify;
        pointer-events: none;
        z-index: 3;
    }

    .succesplatine:before {
        width: 80px;
        height: 80px;
    }

    div {
        width: 50px;
        height: 65px;
        border-radius: 50%;

        &:after {
            left: 4px;
            top: 4px;
            width: calc(100% - 8px);
            height: calc(100% - 8px);
        }
    }

    img {
        width: 80%;
        height: 84.6%;
        border-radius: 50%;
        z-index: 2;
    }
}

.app-toast-achievement .succesapercu {
    position: relative;
    display: block;
    width: 58px;
    height: 74px;
    overflow: visible;
}

.app-toast-achievement .succesapercu > div {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.app-toast-achievement .succesapercu > div::after {
    left: 5px;
    top: 5px;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
}

.app-toast-achievement .succesapercu > a {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-toast-achievement .succesapercu img {
    display: block;
    width: 78%;
    height: 84%;
    object-fit: cover;
    border-radius: 50%;
}

.app-toast-achievement .succesplatine {
    z-index: 0;
    overflow: visible;
}

.app-toast-achievement .succesplatine::before {
    width: 96px;
    height: 96px;
    filter: blur(8px);
}

.bannieresucces {
    width: 15%;
    display: flex;
    justify-content: center;
    flex-direction: column;

    img {
        width: 100%;
        outline: 1px solid orange;
        border-radius: 10px;
        overflow: hidden;
        position: relative;
    }
}

.containersucces {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-items: center;
}

.succesbox {
    position: relative;
    width: 70px;
    height: 91px;
    border-radius: 50%;
    margin: 10px;
}

.succesobtenu {
    color: #606060;
    text-align: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    font-weight: bold;
    font-size: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: auto;

    span {
        position: absolute;
        margin-top: 150px;
        background: black;
        color: orange;
        border-radius: 10px;
        opacity: 0;
        font-weight: normal;
        font-size: 12px;
        width: 200px;
        padding: 20px;
        text-align: justify;
        pointer-events: none;
        z-index: 2;
    }

    img {
        width: 80%;
        height: 84.6%;
        border-radius: 50%;
    }
}

.succesobtenu:hover span,
.succesapercu:hover span {
    opacity: 2;
}

.succesbloque {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    z-index: auto;
    border-radius: 50%;
    background: linear-gradient(315deg, black, 10%, #101010, 90%, #303030);
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);

    &::after {
        content: "";
        position: absolute;
        z-index: auto;
        left: 8px;
        top: 8px;
        width: calc(100% - 16px);
        height: calc(100% - 16px);
        border-radius: 50%;
        background: linear-gradient(135deg, black, 10%, #101010, 90%, #303030);
    }
}

.succesnormal {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    overflow: hidden;
    z-index: auto;
    background: linear-gradient(315deg, #151515, 10%, #404040, 90%, #606060);
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);

    &::after {
        content: "";
        position: absolute;
        z-index: auto;
        left: 8px;
        top: 8px;
        width: calc(100% - 16px);
        height: calc(100% - 16px);
        border-radius: 50%;
        background: linear-gradient(135deg, #151515, 10%, #404040, 90%, #606060);
    }
}

.succesbronze {
    --couleurshine: #dd8546;
    background: linear-gradient(315deg, #1e110c, 10%, #974c20, 90%, #dd8546);

    &::after {
        background: linear-gradient(135deg, #1e110c, 10%, #974c20, 90%, #dd8546);
    }
}

.succesargent {
    --couleurshine: white;
    background: linear-gradient(315deg, grey, 10%, #bebebe, 90%, #dcdcdc);

    &::after {
        background: linear-gradient(135deg, grey, 10%, #bebebe, 90%, #dcdcdc);
    }
}

.succesgold {
    --couleurshine: white;
    background: linear-gradient(315deg, #671908, 10%, orange, 90%, #fdf4c2);

    &::after {
        background: linear-gradient(135deg, #671908, 10%, orange, 90%, #fdf4c2);
    }
}

.succesdiamant {
    --couleurshine: white;
    background: linear-gradient(315deg, #0089ab, 10%, #71cee6, 90%, #dcf1f7);
    box-shadow: 0 0 20px #71cee6;
    animation: glow 1s alternate infinite;
    --couleur: #71cee6;

    &::after {
        background: linear-gradient(135deg, #0089ab, 10%, #71cee6, 90%, #dcf1f7);
    }
}

.succesplatine {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    z-index: -1;
    background: #ffffe6;
    box-shadow: 0 0 10px #ffffe6;
    --couleur: white;
    animation: glow 1s alternate infinite;

    &::before {
        content: "";
        z-index: auto;
        text-align: center;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(0deg);
        position: absolute;
        width: 130px;
        height: 130px;
        background-repeat: no-repeat;
        background-position: 0 0;
        background-image: conic-gradient(rgba(255, 255, 230, 0.5) 0deg 30deg,
                transparent 30deg 60deg,
                rgba(255, 255, 230, 0.5) 60deg 90deg,
                transparent 90deg 120deg,
                rgba(255, 255, 230, 0.5) 120deg 150deg,
                transparent 150deg 180deg,
                rgba(255, 255, 230, 0.5) 180deg 210deg,
                transparent 210deg 240deg,
                rgba(255, 255, 230, 0.5) 240deg 270deg,
                transparent 270deg 300deg,
                rgba(255, 255, 230, 0.5) 300deg 330deg,
                transparent 330deg 360deg);
        animation: succesrotate 6s linear infinite;
        border-radius: 100%;
        filter: blur(10px);
    }
}

@keyframes glow {
    0% {
        box-shadow: 0 0 10px var(--couleur);
    }

    100% {
        box-shadow: 0 0 20px var(--couleur);
    }
}

.succesbronze,
.succesargent,
.succesgold,
.succesdiamant {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: absolute;
    overflow: hidden;
    z-index: auto;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);

    &::before {
        content: "";
        z-index: auto;
        text-align: center;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(0deg);
        position: absolute;
        width: 150px;
        height: 150px;
        background-repeat: no-repeat;
        background-position: 0 0;
        background-image: conic-gradient(rgba(0, 0, 0, 0),
                var(--couleurshine),
                rgba(0, 0, 0, 0) 10%);
        animation: succesrotate 5s linear infinite;
        filter: blur(5px);
    }

    &::after {
        content: "";
        position: absolute;
        z-index: auto;
        left: 8px;
        top: 8px;
        width: calc(100% - 16px);
        height: calc(100% - 16px);
        border-radius: 50%;
    }
}

@keyframes succesrotate {
    100% {
        transform: translate(-50%, -50%) rotate(1turn);
    }
}