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

CharacterMenu {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-color: $fullscreen-bg;
    backdrop-filter: $fullscreen-blur;
    pointer-events: all;

    transition: opacity 0.5s ease;
    
        &:intro {
            opacity: 0;
        }
    
    .top{
        position: absolute;
        
        width: 100%;
        height: 100%;
        background-image: url('/ui/hud/background.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    
        opacity: 1;
      
        
        z-index: -10;
        border-width: 1px;
        border-color: rgba(255, 255, 255, 0.314);
        border-radius: 5px;
        
       
        
        padding: 0 20px;
        color: rgb(255, 255, 255);
        font-size: 20px;
        font-weight: 1000;

        .top2{
            position: absolute;
            top: 5%;
            left: 12.5%;
            width: 20.5%;
            height: 85%;
            background-image: url('/ui/hud/background3.gif');
            opacity: 0.5;
            z-index: -5;
            border-width: 1px;
            border-color: rgb(255, 255, 255);
            border-radius: 5px;
            padding: 0 20px;
            color: white;
            font-size: 20px;
            font-weight: 1000;
        }
        .top3{
            position: absolute;
            top: 5%;
            left: 35%;
            width: 41.5%;
            height: 85%;
            background-image: url('/ui/hud/background2.gif');
            opacity: 0.5;
            z-index: -5;
            border-width: 1px;
            border-color: rgb(255, 255, 255);
            border-radius: 5px;
            padding: 0 20px;
            color: white;
            font-size: 20px;
            font-weight: 1000;
        }
    }
    

    .section 
    {
        position: absolute;
        height: 100%;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.588);
        border-color: rgb(78, 78, 78);
        border-width: 0.2%;
        z-index: 10;
        
        
    }
         .char2 {
             position: absolute;
             bottom: 27%;
             right: 25%;
             width: 25.2%;
             height: 10%;
             background-color: rgba(121, 52, 52, 0);
                border-width: 1px;
                border-color: rgba(255, 255, 255, 0);
                border-radius: 5px;
                .playe2 {
                    z-index: -55;
                    flex-direction: column;
                    width: 100%;
                    gap: 5px;
                    padding: 10px;
                    background: linear-gradient(to right, rgba(44, 40, 4, 0) 0%, rgba(25, 0, 255, 0.781) 50%, rgba(44, 40, 4, 0) 100%);
                    border-radius: 5px;
                    color: rgb(255, 254, 254);
                    border-width: 1px;
                    border-color: rgba(0, 0, 0, 0.2);
                    
            
                    .li {
                        width: 100%;
                        font-size: 20px;
                        color: rgb(255, 196, 3);
                        font-weight: bold;
                        justify-content: center;
                        font-style: italic;
                        text-align: center;
                      
                        text-transform: uppercase;
                        text-shadow: 2px 2px 4px #594900;
                        text-underline-offset: 4px;
                        font-family: Geneva;
                        background-color: rgba(0, 0, 0, 0.425);
                        border-radius: 5px;
                        box-shadow: 0 0 10px 1px rgb(0, 0, 0);

                    }
            
                    .nu {
                        width: 100%;
                        font-size: 16px;
                        color: rgb(255, 187, 0);
                        font-weight: 1000;
                        justify-content: center;
                        
                        
                    }
            
                    .playic {
                        width: 100%;
                        
                        // Pfad zum Icon-Bild
                        background-size: cover;
                        margin-right: 5px;
                        justify-content: center;
                        
                    }
            
                    .Vyndn {
                        width: 100%;
                        font-size: 24px;
                        color: rgb(255, 217, 0);
                        justify-content: center;
                        font-family: Geneva;
                        text-shadow: 2px 2px 4px #2c6100;
                        background-color: rgba(0, 0, 0, 0.26);
                        box-shadow: 0 0 10px 1px rgb(0, 0, 0);
                        border-radius: 5px;
                        padding: 5px;

                        
                       
                    }
                }


         }
        .char {
            position: absolute;
            top: 7%;
            left: 50%;
            width: 25%;
            height: 55%;
            background-color: rgba(0, 0, 0, 0.744);
          
            border-width: 1px;
            border-color: rgba(255, 255, 255, 0);
            border-radius: 5px;
            box-shadow: 0 0 10px 1px rgb(0, 157, 255);

           
    
    
        }
    
    .header2 {
        top: 3.2%;
        left: 35.9%;
        gap: 15px;  
        position: absolute;
        flex-direction: column;
        height: 5%;
        width: 25%;
        z-index: 500;
        color: rgb(255, 255, 255);
        border-bottom-width: 0;
        border-bottom-color: white;
        flex-direction: row;
        
        
        .head, .sidestats, .resist{
                position: relative;
                height: 50%;
                font-size: 16px;
                top: -20%;
                gap: 5px;
                padding: 5px;
                background: linear-gradient(to right, rgba(255, 255, 255, 0.358) 0%, rgba(65, 9, 9, 0) 50%, rgba(255, 255, 255, 0.272) 100%);
                border-radius: 5px;
                color: rgb(255, 255, 255);
                border-width: 1px;
                border-color: rgba(255, 255, 255, 0.2);
                font-family: geneva;
                border-bottom-width: 0;
                border-bottom-color: rgba(255, 255, 255, 0);
            :hover {
                    
                    
                    
                    color:rgb(255, 255, 255);
                    font-weight: bold;
            
            
            
            
            
            
                }
            
        }
    }

    

    .stats {
        position: absolute;
        flex-direction: column;
        
        height: 70%;
        width: 13%;
        z-index: 1;
        left: 35.5%;
        top: 6%;
        gap: 15px;
        
        transition: opacity 0.2s ease;
        
            &:intro {
                opacity: 0;
            }
        
        



        .stats2 {
                position: relative;
                
                align-items: center;
                justify-content: space-between;
                font-size: 16px;
              
                
                padding: 10px;
                background: linear-gradient(to right, rgba(80, 7, 7, 0) 0%, rgba(65, 9, 9, 0) 50%, rgba(8, 0, 0, 0.767) 100%);
                border-radius: 5px;
                color: rgb(255, 254, 254);
                border-width: 1px;
                border-color: rgba(143, 143, 143, 0.2);
                font-family: geneva;
            
            

            

            .n {
                position: relative;
                color: rgb(255, 255, 255);
                font-size: 20px;
                font-weight: 1000;
                gap: 5px;
            }

        }

        .tooltip-text {
            opacity: 0;
            position: absolute;
            justify-content: center;
            align-items: center;
            z-index: 100;
            left: 110%;
            width: 160%;
            gap: 10px;
            color: rgb(255, 255, 255);
            font-size: 12px;
            background-color: #7d7d7d;
            border-radius: 5px;
            padding: 5px 15px 10px 15px;
            



        }

        .header {
            font-size: 20px;
            color: rgb(0, 41, 129);
            font-weight: 1000;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }

        .stats2:hover .tooltip-text {
            opacity: 1;
            z-index: 100;
            flex-direction: column;

        }
    }

    .statsone {

            position: absolute;
                flex-direction: column;
                
                height: 70%;
                width: 13%;
                z-index: 1;
                left: 35.5%;
                top: 6%;
                gap: 15px;

        .tooltip-text {
            opacity: 0;
                position: absolute;
                justify-content: center;
                align-items: center;
                z-index: 100;
                left: 110%;
                width: 160%;
                gap: 10px;
                color: rgb(255, 255, 255);
                font-size: 12px;
                background-color: #7d7d7d;
                border-radius: 5px;
                padding: 5px 15px 10px 15px;



            .header {
                font-size: 20px;
                color: rgb(0, 0, 0);
                font-weight: 1000;


            }


        }

        .stats4:hover .tooltip-text {
            opacity: 1;
            z-index: 100;
            color: rgb(0, 0, 0);
            flex-direction: column;

        }

        .stats4 {

                    position: relative;
                
                    align-items: center;
                    justify-content: space-between;
                    font-size: 16px;
                
                
                    padding: 10px;
                    background: linear-gradient(to right, rgba(80, 7, 7, 0) 0%, rgba(65, 9, 9, 0) 50%, rgba(8, 0, 0, 0.767) 100%);
                    border-radius: 5px;
                    color: rgb(255, 254, 254);
                    border-width: 1px;
                    border-color: rgba(143, 143, 143, 0.2);
                    font-family: geneva;






            .n {
                color: rgb(255, 255, 255);
                    font-size: 20px;
                    font-weight: 1000;


            }

        }

    }

    .statstwo {
        position: absolute;
            flex-direction: column;
        
            height: 70%;
            width: 13%;
            z-index: 1;
            left: 35.5%;
            top: 6%;
            gap: 15px;


        .tooltip-text {
            opacity: 0;
                position: absolute;
                justify-content: center;
                align-items: center;
                z-index: 100;
                left: 110%;
                width: 160%;
                gap: 10px;
                color: rgb(255, 255, 255);
                font-size: 12px;
                background-color: #7d7d7d;
                border-radius: 5px;
                padding: 5px 15px 10px 15px;

            .header {
                font-size: 20px;
                color: rgb(0, 0, 0);
                font-weight: 1000;
            }
        }

        .stats3:hover .tooltip-text {
            opacity: 1;
            z-index: 100;
        }




        .stats3 {
            position: relative;
            
                align-items: center;
                justify-content: space-between;
                font-size: 16px;
            
            
                padding: 10px;
                background: linear-gradient(to right, rgba(80, 7, 7, 0) 0%, rgba(65, 9, 9, 0) 50%, rgba(8, 0, 0, 0.767) 100%);
                border-radius: 5px;
                color: rgb(255, 254, 254);
                border-width: 1px;
                border-color: rgba(143, 143, 143, 0.2);
                font-family: geneva;


            .n {
                color: rgb(255, 255, 255);
                    font-size: 20px;
                    font-weight: 1000;
            }


        }

    }

    

    .character {
        position: absolute;
        right: 70%;
        bottom: 25%;
        width: 20%;
        height: 60%;
        z-index: 99;
        
        .char{
            position: absolute;
            right: 20%;
            width: 100%;
            height: 100%;
            
        }
       


        .box {
                position: relative;
                width: 100%;
                height: 100%;
            


            .EquippedItems {
                position: relative;
                flex-direction: column;
                align-content: center;
                width: 100%;
                height: 100%;
                top: 0%;
                left: 50%;
                justify-content: center;
                justify-content: space-evenly;
                .helmet{
                    position: relative;
                    width: 150%;
                }
                .armor{
                    position: relative;
                    width: 150%;
                }
                .pants{
                    position: relative;
                    width: 150%;
                }
            }
        }
    }

        .section2 {
            position: relative;
                height: 85%;
                left: 13%;
                width: 19%;
                top: 6%;
                z-index: 10;
               
    
            .items {
                
                background-color: rgba(222, 218, 211, 0);
                flex-direction: column;
                
                z-index: -55;
              
    
                
    
                    
                    .playerst 
                    {
                    width:100%;
                    height: 98%;
                    z-index: -50;
                    
                    gap: 10px; // Abstand zwischen den Elementen
                    font-family: Geneva;
                    flex-direction: column;
                    font-size: 15px;
                     justify-content: center;

                    .playe1, .playe4, .playe3, .playe2 {
                        z-index: -55;
                        flex-direction: column;
                        
                        width: 100%;
                        gap: 5px;
                        padding: 10px;
                        background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(15, 21, 75, 0.548) 50%, rgba(0, 0, 0, 0) 100%);
                        border-radius: 5px;
                        color: rgb(255, 254, 254);
                        border-width: 1px;
                        border-color: rgba(255, 255, 255, 0.2);
                        justify-content: center;

                        .li{
                            width: 100%;
                            font-size: 20px;
                            color: rgb(255, 255, 255);
                            font-weight: bold;
                            justify-content: center;
                            font-style: italic;
                            text-align: center;
                            text-decoration: underline;
                            text-transform: uppercase;
                            text-shadow: 2px 2px 4px #594900;
                            text-underline-offset: 4px;
                        }

                        .nu {
                            width: 100%;
                            font-size: 16px;
                            color: rgb(255, 187, 0);
                            font-weight: 1000;
                            justify-content: center;
                        }

                        .playic {
                            width: 100%;
                            
                             // Pfad zum Icon-Bild
                            background-size: cover;
                            margin-right: 5px;
                            justify-content: center;
                        }

                        .Vyndn {
                            width: 100%;
                            font-size: 24px;
                            color: rgb(0, 167, 205);
                            justify-content: center;
                        }
                    }
                
    
                    
                }
            }
        }




}

@keyframes blink {
    0% {
        color: rgb(255, 255, 255);
    }

    50% {
        color: rgb(0, 255, 34);
    }

    100% {
        color: rgb(255, 255, 255);
    }
}