@import "/ui/Hud/Style.scss";

Inventory {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: $fullscreen-bg;
    backdrop-filter: $fullscreen-blur;
    pointer-events: all;
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.945);
    transition: opacity 0.5s ease;

    &:intro {
            opacity: 0;
            transition: opacity 2s ease;
    }
    &:outro {
        opacity: 1;
        transition: opacity 2s ease;
    }

    

    .list {
        position: absolute;
        
        width: 100%;
        height: 100%;
        

        .food {
                position: absolute;
                width: 100%;
                height: 100%;
                 transition: opacity 0.5s ease;
        
                &:intro {
                    opacity: 0;
                }
            }
           
        .inventory 
        {
            
            position: relative;
            width: 100%;
            height: 100%;
            flex-direction: column;
            transition: opacity 0.5s ease;
            
            &:intro {
                opacity: 0;
            }
            
           

            
            
            

                .section2 {
        
                flex-direction: column;
                overflow-x: hidden;
                overflow-y: scroll;
                position: absolute;
                
                width: 100%;
                height: 100%;
                background-color: rgba(131, 131, 131, 0);
               
                z-index: -100;

                .box {
                
                        gap: 10px;
                        position: absolute;
                        left: 3%;
                        top: 14%;
                        width: 2%;
                        
                        height: 20%;
                        z-index: 100;
                        flex-direction: column;
                      
                        align-items: center;
                
                        .sort {
                            
                            position: relative;
                            font-size: 20%;
                            

                            font-weight: bold;
                        
                            color: rgb(255, 255, 255);
                            width: 100%;
                            height: 100%;
                            background-color: rgb(0, 0, 0);
                            border-color: rgba(85, 85, 85, 0.918);
                            
                            border-width: 1px;
                            justify-content: center;
                            align-items: center;
                            background-size: 100%;
                        
                        
                            background-position: center;
                            border-radius: 5px;
                
                
                            background-position: center;
                            border-radius: 5px;

                            .tooltip {
                                    opacity: 0;
                                    transition: opacity 0.3s;
                                    background-color: rgb(121, 14, 14);
                                    box-shadow: 5px 5px 0px rgb(0, 0, 0);
                                    width: 100%;
                                    justify-content: center;
                                    text-shadow: 3px 1px 0px black;
                                    color: #fff;
                                    text-align: center;
                                    padding: 5px;
                                    border-radius: 5px;
                                    position: absolute;
                                    top: 0%;
                                    /* Position über dem Button */
                                    left: 0%;
                                    transform: translateX(-100%);
                                    white-space: nowrap;
                                    width: 150%;
                                    z-index: 1000;
                                    font-size: 15px;
                                    font-weight: bold;
                                    font-family: 'Geneva';
                                    border-width: 1px;
                                    border-color: rgb(0, 0, 0);
                            
                                }
                            
                                &:hover .tooltip {
                                    opacity: 1;
                                }
                
                            :hover:not(.disabled) {
                
                
                                cursor: pointer;
                                sound-in: 'hover';
                
                                border-radius: 5%;
                                transform: scale(1.1);
                            }
                
                            &:active:not(.disabled) {
                                sound-in: 'sound4';
                                background-color: rgb(250, 134, 39);
                                padding: 0 1%;
                                border-radius: 5%;
                                align-items: center;
                            }
                
                        }
                
                
                    }
        
                .box2 {
                    
                    gap: 10px;
                    position: absolute;
                    left: 5%;
                    top: 44.5%;
                    width: 90%;
                   
                    height: 3%;
                    z-index: 100;
                    
                    align-items: center;
                    
                    .sort {
                        
                        flex-direction: row;
                        position: relative;
                        font-size: 20%;
                       
                        font-weight: bold;
                        
                        color: rgb(255, 255, 255);
                        width: 5%;
                        height: 70%;
                        background-color: rgb(0, 0, 0);
                        border-width: 1px;
                        justify-content: center;
                        align-items: center;
                        background-size: 100%;
                        border-color: rgba(255, 255, 255, 0.034);
        
                        background-position: center;
                        border-radius: 5px;

                        .tooltip {
                                opacity: 0;
                                transition: opacity 0.3s;
                                background-color: rgb(121, 14, 14);
                                box-shadow: 2px 2px 2px rgba(160, 154, 154, 0.932);
                                width: 100%;
                                justify-content: center;
                                text-shadow: 3px 1px 0px black;
                                color: #fff;
                                text-align: center;
                                padding: 5px;
                                border-radius: 5px;
                                position: absolute;
                                top: -50px;
                                /* Position über dem Button */
                                left: 50%;
                                transform: translateX(-50%);
                                white-space: nowrap;
                                z-index: 1000;
                                font-size: 18px;
                                font-weight: bold;
                                font-family: 'Geneva';
                                border-width: 1px;
                                border-color: rgba(255, 0, 0, 0.685);
                                
                            }
                        
                            &:hover .tooltip {
                                opacity: 1;
                            }
        
                        :hover:not(.disabled) {
        
        
                            cursor: pointer;
                            sound-in: 'hover';
                            
                           
                            border-radius: 5%;
                            
                        }
        
                        &:active:not(.disabled) {
                            sound-in: 'sound4';
                            background-color: rgb(250, 134, 39);
                            transform: scale(1.1);
                            align-items: center;
                        }
        
                    }
                    
        
                }
        
                                
                                .Hello2 {
                                    position: absolute;
                                    width: 9%;
                                    height: 4%;
                                    top:3%;
                                    left: 5%;
                                    font-size: 26px;
                                    font-family: 'Geneva', sans-serif;
                                    color: white;
                                    z-index: 100;
                                    box-shadow: 5px 5px 0px rgb(0, 0, 0);
                                  
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    background-position: center;
                                    background-size: 100%;
                                    opacity: 1;
                                    text-align: center;
                                    text-shadow: 2px 2px 0px rgb(0, 0, 0);
                                    border-radius: 5px;
                                    border-width: 1px;
                                    border-color: rgba(255, 255, 255, 0.034);
                                    background: linear-gradient(90deg, rgb(0, 0, 0) 0%, rgba(3, 110, 35, 0.432) 50%, rgb(23, 116, 0) 100%);

                                    &:hover {
                                            background: linear-gradient(90deg, rgb(0, 0, 0) 0%, rgba(110, 108, 3, 0.432) 50%, rgb(116, 104, 0) 100%);
                                        }
                                   
                                }
                                .Hello3 {
                                    position: absolute;
                                    width: 9%;
                                    height: 4%;
                                    top:3%;
                                    left: 15%;
                                    font-size: 26px;
                                    font-family: 'Geneva', sans-serif;
                                    color: white;
                                    z-index: 100;
                                    box-shadow: 5px 5px 0px rgb(0, 0, 0);
                                  
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    background-position: center;
                                    background-size: 100%;
                                    opacity: 1;
                                    text-align: center;
                                    text-shadow: 2px 2px 0px rgb(0, 0, 0);
                                    border-radius: 5px;
                                    border-width: 1px;
                                    border-color: rgba(255, 255, 255, 0.034);

                                    &:hover{
                                        background: linear-gradient(90deg, rgb(0, 0, 0) 0%, rgba(110, 108, 3, 0.432) 50%, rgb(116, 104, 0) 100%);
                                    }
                                    
                                }
                                .char2 {
                                    position: absolute;
                                    bottom: 12%;
                                    left: 50%;
                                    width: 25.2%;
                                    height: 80%;

                                    .playic {
                                            position: absolute;
                                            bottom: 3.2%;
                                            left: 28%;
                                            width: 32px;
                                            height: 32px;
                                            z-index: 100;
                                           
                                            background-image: url("/ui/hud/vynd.png");
                                            background-size: contain;
                                            background-repeat: no-repeat;
                                            
                                            filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.8));
                                            transform-origin: center;
                                            animation: coinRotate 4s infinite ease-in-out;
                                        }

                                    .playe4{
                                        position: absolute;
                                     
                                        
                                       z-index: 1000;
                                        
                                        width: 100%;
                                        height:5%;
                                        font-size: 32px;
                                        font-family: 'Geneva', sans-serif;
                                        color: white;
                                        flex-direction: column;
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;
                                        background-image: url("/ui/textures/b.png");
                                        background: linear-gradient(to right,
                                                rgba(0, 0, 0, 0.6) 0%,
                                                rgba(25, 0, 255, 0.726) 50%,
                                                rgba(0, 0, 0, 0.6) 100%);
                                        border-radius: 12px;
                                        color: rgb(255, 254, 254);
                                        border: 1px solid rgba(46, 46, 252, 0.534);
                                        
                                      
                                        
                                        
                                       
                                        
                                    }
                                    
                                    .playe2 {
                                        z-index: 10; 
                                        flex-direction: column-reverse;
                                        width: 100%;
                                        gap: 8px;
                                        padding: 16px;
                                        background-image: url("/ui/textures/b.png");
                                        background: linear-gradient(to right,
                                                rgba(0, 0, 0, 0.6) 0%,
                                                rgba(25, 0, 255, 0.726) 50%,
                                                rgba(0, 0, 0, 0.6) 100%);
                                        border-radius: 12px;
                                        color: rgb(255, 254, 254);
                                        border: 1px solid rgba(46, 46, 252, 0.534);
                                        backdrop-filter: blur(5px);
                                        

                                        
                                        .Vyndn {
                                            width: 100%;
                                            font-size: 28px;
                                            color: rgba(204, 184, 0, 0.74);
                                            justify-content: center;
                                            font-family: Geneva;
                                            text-align: center;
                                            text-shadow: 1px 1px 0px rgb(0, 0, 0);
                                            font-weight: bold;
                                            
                                            background: linear-gradient(to right,
                                                    rgba(0, 0, 0, 0.8) 0%,
                                                    rgba(50, 50, 0, 0.6) 50%,
                                                    rgba(0, 0, 0, 0.8) 100%);
                                          
                                            border-radius: 8px;
                                            padding: 10px;
                                            transition: all 0.3s ease;
                        
                                            &:hover {
                                                transform: scale(1.03);
                                                
                                            }
                                        }
                                    }
                                }
        
                .items {
                    position: relative;
                    flex-wrap: wrap;
                    width: 700px;   
                    left: 5%;
                    top:150px;
                    gap: 4px;
                    height: auto;
                    box-shadow: 5px 5px 0px rgb(0, 0, 0);
                    background-color: rgba(0, 0, 0, 0.5);
                    border-radius: 5px;
                    border-width: 1px;
                    border-color: rgba(255, 255, 255, 0.034);
                    justify-content: center;
                    align-items: center;
                    
                }
              

        
        
            }



            .section 
            {
               
                position: absolute;
                    right: 24%;
                    bottom: 20%;
                    width: 25%;
                    height: 60%;
                    top: 10%;
                    z-index: -10;
                
              
              
               

                .character
                {
                   
                    justify-content: space-between;
                    
                   

                        .char
                        {
                            position: relative;
                               top: 13%;
                                z-index: -100;
                                width: 100%;
                                height: 100%;
                                    
                                
                                   
                                    
                            
                        }
                    
                    
                        .box {
                            position: absolute;
                            width: 80%;
                            height: 83%;
                            top: 5%;
                            left: 100%;
                            z-index: -100;
                            background: linear-gradient(to right,
                                    rgba(36, 45, 179, 0.8) 0%,
                                    rgba(41, 78, 146, 0.8) 50%,
                                    rgba(0, 0, 0, 0.8) 100%);
                            border-radius: 8px;
                            border: 1px solid rgba(255, 255, 255, 0.1);
                            justify-content: center;
                            align-items: center;
                            box-shadow: 5 5 0px rgb(0, 0, 0);

                            
                            .equipment-wrapper {
                               
                                right: -100%;
                                top: 15%;
                                width: 100%;
                                z-index: 1000;
                                display: flex;
                                flex-direction: column;
                                gap: 10px;
                               
                                border-radius: 8px;
                                justify-content: center;
                                align-items: center;
                               
                               
                                
                                .equipment-title {
                                    position: absolute;
                                    top: 1%;
                                    font-family: 'Geneva', sans-serif;
                                    font-size: 24px;
                                    color: white;
                                    text-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
                                    text-align: center;
                                    
                                    font-weight: bold;
                                    background: linear-gradient(to right,
                                            rgba(0, 0, 0, 0.8) 0%,
                                            rgba(50, 50, 50, 0.8) 50%,
                                            rgba(0, 0, 0, 0.8) 100%);
                                    border-radius: 8px;
                                    padding: 0 10px;
                                    transition: all 0.3s ease;
                                    box-shadow: 5 5 0px rgb(0, 0, 0);
                                    
                                }
                                
                                .equipment-slots {
                                    display: flex;
                                    flex-direction: column;
                                    gap: 15px;
                                    width: 100%;
                                    
                                    .equipment-row {
                                        display: flex;
                                        justify-content: center;
                                        gap: 10px;
                                        
                                        
                                        .slot {
                                            border-radius: 6px;
                                           
                                            box-shadow: 5 5 10 3 rgb(0, 0, 0);
                                            transition: all 0.2s ease;
                                            
                                            &:hover {
                                                transform: scale(1.05);
                                                border-color: rgba(255, 100, 100, 0.8);
                                            }
                                            
                                            &.head-slot {
                                                background: linear-gradient(to right, rgba(0, 0, 0, 0.8) 0%, rgba(40, 40, 40, 0.8) 50%, rgba(60, 0, 0, 0.8) 100%);
                                                
                                            }
                                            
                                            &.face-slot {
                                                background: linear-gradient(to right, rgba(80, 7, 7, 0.8) 0%, rgba(65, 9, 9, 0.8) 50%, rgba(30, 0, 0, 0.8) 100%);
                                            }
                                            
                                            &.body-slot {
                                                background: linear-gradient(to right, rgba(80, 7, 7, 0.8) 0%, rgba(65, 9, 9, 0.8) 50%, rgba(30, 0, 0, 0.8) 100%);
                                            }
                                            
                                            &.hand-slot {
                                                background: linear-gradient(to right, rgba(60, 7, 7, 0.8) 0%, rgba(45, 9, 9, 0.8) 50%, rgba(20, 0, 0, 0.8) 100%);
                                            }
                                            
                                            &.back-slot {
                                                background: linear-gradient(to right, rgba(90, 10, 10, 0.8) 0%, rgba(70, 12, 12, 0.8) 50%, rgba(40, 0, 0, 0.8) 100%);
                                            }
                                            
                                            &.bracer-slot {
                                                background: linear-gradient(to right, rgba(70, 7, 7, 0.8) 0%, rgba(55, 9, 9, 0.8) 50%, rgba(25, 0, 0, 0.8) 100%);
                                            }
                                            
                                            &.legs-slot {
                                                background: linear-gradient(to right, rgba(80, 7, 7, 0.8) 0%, rgba(65, 9, 9, 0.8) 50%, rgba(30, 0, 0, 0.8) 100%);
                                            }
                                            
                                            &.belt-slot {
                                                background: linear-gradient(to right, rgba(60, 7, 7, 0.8) 0%, rgba(45, 9, 9, 0.8) 50%, rgba(20, 0, 0, 0.8) 100%);
                                            }
                                            
                                            &.feet-slot {
                                                background: linear-gradient(to right, rgba(80, 7, 7, 0.8) 0%, rgba(65, 9, 9, 0.8) 50%, rgba(30, 0, 0, 0.8) 100%);
                                            }
                                        }
                                    }
                                    
                                    .helmet-row {
                                        width: 100%;
                                        filter: drop-shadow(0 0 5px rgba(255, 255, 0, 0.5));
                                        
                                    }
                                    
                                    .armor-row {
                                        width: 100%;
                                        filter: drop-shadow(0 0 5px rgba(255, 255, 0, 0.5));
                                    }
                                    
                                    .legs-row {
                                        width: 100%;
                                        filter: drop-shadow(0 0 5px rgba(255, 255, 0, 0.5));
                                    }
                                    
                                    .feet-row {
                                        width: 100%;
                                        justify-content: center;
                                        filter: drop-shadow(0 0 5px rgba(255, 255, 0, 0.5));
                                    }
                                }
                            }
                        }
                
                    
                }
                
            }

        }

    }

    
    
    
    
        



}

@keyframes blink {
    0% {
        color: white;
    }

    100% {
        color: red;
    }
}
@keyframes coinRotate {
    0% {
        transform: rotate(-5deg) scale(1);
    }

    50% {
        transform: rotate(5deg) scale(1.15);
    }

    100% {
        transform: rotate(-5deg) scale(1);
    }
}