.bg-midpurple {
    background: linear-gradient(-135deg, rgba(7, 0, 33, 0.7) 25%, rgba(78, 0, 196, 0.7) 100%) !important;
}
.header-i {
    background: linear-gradient(45deg, rgba(29, 0, 91, 0.7), rgba(29, 14, 47, 0.7));
}

#playerslist {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.5) rgba(255, 255, 255, 0.1);
}
#playerslist::-webkit-scrollbar {
    width: 8px;
}
#playerslist::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.5);
    
}
#playerslist::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
}

#chrono {
    font-family: "Source Code Pro", Monaco, Consolas, "Lucida Console", monospace;
}


input#nom, input#changer-nom {
    color: white;
    background-color: rgba(255, 255, 255, 0.05);
    outline: none;
    padding: .6em 1em;
    border: 1px solid transparent;
    border-radius: 10px;
    transition: 0.2s;
}

input#nom {
    margin-left: 1em;
    &:focus,&:-webkit-autofill{
        outline: none;
        border: none;
        border: 1px solid lavender;
        box-shadow: 0 0 5px lavender !important;
        transition: 0.2s;
    }
    &:hover{
        box-shadow: 0 0 2px lavender;
    }
}
input#changer-nom {
    cursor: pointer;
    &:hover{
        background-color: rgba(255, 255, 255, 0.1);
    }
}


#worktable,#solution,.empty>.glass {
    background: rgba(0,0,0,0.2);
}
.item,.empty {
    border: 6px inset transparent;
}
.empty{
    .glass {
        border: 3px inset transparent;
        box-shadow: none;
    }
    .glass:before,.glass:after{
        display: none;
    }
}

.glass {
    position: relative;
    padding: 1em;
    border: 3px inset rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.15); /* Transparence */
    backdrop-filter: blur(2px); /* Effet de flou léger */
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.2);
}

.glass::before,
.glass::after {
    content: "";
    position: absolute;
    width: 40%;
    height: 2px; /* Épaisseur des traits */
    background: rgba(255, 255, 255, 0.05);
    transform: rotate(-45deg);
}

.glass::before {
    top: 25%;
    left: 5%;
}

.glass::after {
    top: 75%;
    right: 5%;
}



.\31,.\31 6 {
    border-color: red;
    background: rgba(255, 0, 0, 0.1);
    box-shadow: inset 0 0 10px rgba(255, 0, 0, 0.3);
    &:before,
    &:after{
        background: rgba(255, 0, 0, 0.1);
    }
}
.\32,.\31 7 {
    border-color: limegreen;
    background: rgba(50, 205, 50, 0.1);
    box-shadow: inset 0 0 10px rgba(50, 205, 50, 0.3);
    &:before,
    &:after{
        background: rgba(50, 205, 50, 0.1);
    }
}
.\33,.\31 8 {
    border-color: #2c2cff;
    background: rgba(44, 44, 255, 0.1);
    box-shadow: inset 0 0 10px rgba(44, 44, 255, 0.3);
    &:before,
    &:after{
        background: rgba(44, 44, 255, 0.1);
    }
}
.\34,.\31 9 {
    border-color: orange;
    background: rgba(255, 165, 0, 0.1);
    box-shadow: inset 0 0 10px rgba(255, 165, 0, 0.3);
    &:before,
    &:after{
        background: rgba(255, 165, 0, 0.1);
    }
}
.\35,.\32 0 {
    border-color: yellow;
    background: rgba(255, 255, 0, 0.1);
    box-shadow: inset 0 0 10px rgba(255, 255, 0, 0.3);
    &:before,
    &:after{
        background: rgba(255, 255, 0, 0.1);
    }
}
.\36,.\32 1 {
    border-color: greenyellow;
    background: rgba(173, 255, 47, 0.1);
    box-shadow: inset 0 0 10px rgba(173, 255, 47, 0.3);
    &:before,
    &:after{
        background: rgba(173, 255, 47, 0.1);
    }
}
.\37,.\32 2 {
    border-color: deepskyblue;
    background: rgba(0, 191, 255, 0.1);
    box-shadow: inset 0 0 10px rgba(0, 191, 255, 0.3);
    &:before,
    &:after{
        background: rgba(0, 191, 255, 0.1);
    }
}
.\38,.\32 3 {
    border-color: darkcyan;
    background: rgba(0, 139, 139, 0.1);
    box-shadow: inset 0 0 10px rgba(0, 139, 139, 0.3);
    &:before,
    &:after{
        background: rgba(0, 139, 139, 0.1);
    }
}
.\39,.\32 4 {
    border-color: violet;
    background: rgba(238, 130, 238, 0.1);
    box-shadow: inset 0 0 10px rgba(238, 130, 238, 0.3);
    &:before,
    &:after{
        background: rgba(238, 130, 238, 0.1);
    }
}
.\31 0,.\32 5 {
    border-color: mediumpurple;
    background: rgba(147, 112, 219, 0.1);
    box-shadow: inset 0 0 10px rgba(147, 112, 219, 0.3);
    &:before,
    &:after{
        background: rgba(147, 112, 219, 0.1);
    }
}
.\31 1,.\32 6 {
    border-color: pink;
    background: rgba(255, 192, 203, 0.1);
    box-shadow: inset 0 0 10px rgba(255, 192, 203, 0.3);
    &:before,
    &:after{
        background: rgba(255, 192, 203, 0.1);
    }
}
.\31 2,.\32 7 {
    border-color: sienna;
    background: rgba(160, 82, 45, 0.1);
    box-shadow: inset 0 0 10px rgba(160, 82, 45, 0.3);
    &:before,
    &:after{
        background: rgba(160, 82, 45, 0.1);
    }
}
.\31 3,.\32 8 {
    border-color: salmon;
    background: rgba(250, 128, 114, 0.1);
    box-shadow: inset 0 0 10px rgba(250, 128, 114, 0.3);
    &:before,
    &:after{
        background: rgba(250, 128, 114, 0.1);
    }
}
.\31 4,.\32 9 {
    border-color: grey;
    background: rgba(128, 128, 128, 0.1);
    box-shadow: inset 0 0 10px rgba(128, 128, 128, 0.3);
    &:before,
    &:after{
        background: rgba(128, 128, 128, 0.1);
    }
}
.\31 5,.\33 0 {
    border-color: white;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.3);
    &:before,
    &:after{
        background: rgba(255, 255, 255, 0.1);
    }
}
.bgblack10 {
    background: rgba(0, 0, 0, 0.1);
}
.bgblack20 {
    background: rgba(0, 0, 0, 0.2);
}
.ice_tm {
    border: 3px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(2px);
}

.limebtn {
    border-color: rgba(155, 255, 0, 0.2);
    background-color: rgba(206, 255, 128, 0.1);
    &:hover {
        background: rgba(155, 255, 0, 0.25);
        border-color: rgba(157, 255, 0, 0.4);
        box-shadow: 1px 1px 10px rgba(157, 255, 0, 0.4);
    }
}

#object-particles{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url("");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    z-index: 0;
    pointer-events: none;
    opacity: .3;
}

@media (max-width: 1450px) {
    .item {
        padding: 2em !important;
    }
}