*,
*::after,
*::before{
    margin: 0;
    box-sizing: border-box;
    font-family: 'Barlow Semi Condensed', sans-serif;
}

:root{
    --dark-txt: hsl(229, 25%, 31%);
    --score-text: hsl(229, 64%, 46%);
    --hdr-bdr: hsl(217, 16%, 45%);

    --diameter: 4.5rem;

    --scissors-clr: hsl(39, 89%, 49%);
    --paper-clr: hsl(230, 89%, 62%);
    --rock-clr:  hsl(349, 71%, 52%);

    --outline-diameter: calc( var(--diameter) + 1.7rem );

}

.container{
    background: rgb(20,21,57);
    background: linear-gradient(0deg, rgba(20,21,57,1) 0%, rgba(31,55,86,1) 100%);
    width: 100vw;
    height: 100vh;
    padding: 20px;

    display: flex;
    flex-direction: column;
}
.header-container{
    display: flex;
    justify-content: center;
}

header{
    border: 3px solid var(--hdr-bdr);
    width: min(50rem, 100%);
    border-radius: .4rem;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    
}


 
.score{
    background-color: rgb(223, 223, 223);
    width: 4.5rem;
    height: 4rem;
    border-radius: 3px;
    box-shadow: 0 0 3px rgba(20,21,57,1);
    display: flex;
    align-items: center;
    justify-content: center;
}
.score-title{
    font-size: .5rem;
    letter-spacing: 1px;
    color: var(--score-text)
}
.score-value{
    line-height: 1.5rem;
    font-size: 2rem;
    color: rgb(81, 81, 81);
}


.game-container{
    flex: 1;
    padding-top: 7rem;

    display: flex;
    justify-content: center;
    padding-inline: 4rem;
}

#choosing-screen{
    position: relative;
    
    width: 100%;
    height: 300px;

    display: flex;
    justify-content: center;
    

}

.triange-section{
    --width: 50vw;
    position: relative;
    /* background-color: red; */
    width: var(--width);
    height: calc(0.866 * var(--width) );
    /* ½(√3a) */
}


/* SYMBOL STYLING */
.symbol-container{
    position:absolute;
}
.selection-details{
    position: absolute;
    text-align: center;
    color: white;
    font-size: .7rem;
    letter-spacing: 1px;

    left: 20%;
    bottom: -30px;

}

.game-symbol-flex{
    border-radius: 50%; 
    display: flex;
    justify-content: center;
    align-items: center;
}
.game-symbol-outline{
    width: var(--outline-diameter);
    height: var(--outline-diameter);
}

.game-symbol-container{
    background-color: white;
    width: var(--diameter);
    height: var(--diameter);
    box-shadow: 0px 3px 0px 0px rgba(146, 146, 146, 0.75) inset;

}


.tp-r{
    right: calc(var(--diameter) / 2 * -1);
    top: calc(var(--diameter) / 2 * -1);
}
.tp-l{
    left: calc(var(--diameter) / 2 * -1);
    top: calc(var(--diameter) / 2 * -1);
}
.bt-m{
    bottom: calc(var(--diameter) / 2 * -1);
    left: calc(50% - var(--diameter)/2 - 10px);
}
.symbol-svg{
    --lenght: 2rem;
    width:  var(--lenght);
    height: var(var(--lenght))
}

/* SYMBOL COLOR CLASSES */

.paper-out{
    box-shadow: 0px -4px 0px 0px rgba(9, 74, 154, 0.75) inset;
    background-color: var(--paper-clr); 
}
.rock-out{
    box-shadow: 0px -4px 0px 0px rgba(146, 33, 8, 0.75) inset;
    background-color: var(--rock-clr);
}
.scissor-out{
    box-shadow: 0px -4px 0px 0px hsla(40, 100%, 27%, 0.678) inset;
    background-color: var(--scissors-clr);
}
/* WINNER SHADOW */
/* .winner_shadow {
    box-shadow: 0px 0px 0px 18px rgba(255, 255, 255, 0.046);
    transition: box-shadow 0.3s ease-in-out;
  }
  
.winner_shadow:hover {
        box-shadow: 0px 0px 0px 70px rgba(255, 255, 255, 0.046)
} */



.winner_shadow{
    animation: shadowAnimation 3s alternate infinite;
}

@keyframes shadowAnimation {
    0%{
       box-shadow: 0px 0px 0px 18px rgba(255, 255, 255, 0.046)
    }
    20%{
       box-shadow: 0px 0px 0px 28px rgba(255, 255, 255, 0.046),
       0px 0px 0px 18px rgba(255, 255, 255, 0.046),

    }
    40%{
        box-shadow: 0px 0px 0px 38px rgba(255, 255, 255, 0.046),
       0px 0px 0px 28px rgba(255, 255, 255, 0.046),
       0px 0px 0px 18px rgba(255, 255, 255, 0.046)

    }
    60%{
        box-shadow: 0px 0px 0px 48px rgba(255, 255, 255, 0.046),
        0px 0px 0px 38px rgba(255, 255, 255, 0.046),
        0px 0px 0px 28px rgba(255, 255, 255, 0.046),
        0px 0px 0px 18px rgba(255, 255, 255, 0.046),
    }
    80%{
        box-shadow: 0px 0px 0px 58px rgba(255, 255, 255, 0.046),
        0px 0px 0px 48px rgba(255, 255, 255, 0.046),
        0px 0px 0px 38px rgba(255, 255, 255, 0.046),
        0px 0px 0px 28px rgba(255, 255, 255, 0.046),
        0px 0px 0px 18px rgba(255, 255, 255, 0.046),
    }
    100%{
        box-shadow: 0px 0px 0px 68px rgba(255, 255, 255, 0.046),
        0px 0px 0px 58px rgba(255, 255, 255, 0.046),
        0px 0px 0px 48px rgba(255, 255, 255, 0.046),
        0px 0px 0px 38px rgba(255, 255, 255, 0.046),
        0px 0px 0px 28px rgba(255, 255, 255, 0.046),
        0px 0px 0px 18px rgba(255, 255, 255, 0.046)
    }
}

/* RESULT */
.result-printer{
    position: absolute;
    bottom: -10vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    /* justify-content: center; */
}

.result-printer span{
    color: white;
    font-size: 2.2rem;
    font-weight: 600;
}
.result-printer button{
    background: whitesmoke;
    color: var(--dark-txt);
    border: none;
    padding: .4rem 1.8rem ;
    border-radius: .5rem;
    font-size: .7rem;
    letter-spacing: 1px;
}

/* RULES BUTTOM */
.rules-button-container{
    display: flex;
    justify-content: center;
}
.rules-button{
    --color: rgba(255, 255, 255, 0.491);
    background-color: transparent;
    color: white;
    border: 2px solid var(--color);
    color: var(--color);
    padding: .5rem 2rem ;

    border-radius: 10px;
    letter-spacing: 2px;
    font-size: .7rem;
}
.rules-tab{
    position: absolute;

    inset: 0;
    background-color: whitesmoke;
    
    background-image: url(images/image-rules.svg);
    background-position: center;
    background-repeat: no-repeat;
}

.rules-title{
    margin-top: 3rem;
}
.rules-title-text{
    color: var(--dark-txt);   
    font-size: 2rem;
    font-weight: 700; 
    padding: 20px;
    text-align: center;
}

@media only screen and (min-width: 1366px){
    :root{
        --diameter: 6.5rem;
    }
    .score-title{
        font-size: .6rem;
    }
    .score-value{
        font-size: 2.2rem;
    }
    .triange-section{
        --width: 18vw;
    }
    .rules-tab{
        top: 15vh;
        bottom: 15vh;
        left: 35vw;
        right: 35vw;
    }
    
}