:root{
    /* --colorVictory: #009e15; */
    /* --colorVictory: #27b863; */
    --colorVictory: #00990c;
    --bgContanier: #848484a5;
}

container{
    display: flex;
    align-items: center;
    justify-content: center;
}

tris{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 5px;
    position: relative;
    padding: 10px;
    background-color: #fff;
    border-radius: 15px;
}

.icon:is(.x, .o){
    --iconColor: var(--colorPrimary);
}

.icon.victory{
    --iconColor: var(--colorVictory) !important;
}

/**  **/

giocatori{
    display: flex;
    position: relative;
    border: 2px solid #333;
    border-radius: 10px;
}

.player{
    display: block;
    position: relative;
    --s: 45px;
    width: var(--s);
    height: var(--s);
    --sIcon: var(--s);
    z-index: 2;
}

.player.x{
    --iPadding: 3px;
    --sSymbol: 6px;
}

.player.o{
    --iPadding: 2px;
    --sSymbol: 6px;
}

bg{
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    height: 100%;
    width: 50%;
    background-color: #bab9b9;
    box-sizing: border-box;
    z-index: 1;
    visibility: hidden;
}

bg:is(.X, .O){
    visibility: visible;
}

bg.X{
    transform: translateX(0%);
    border-radius: 8px 0 0 8px;
}

bg.O{
    transform: translateX(100%);
    border-radius: 0 8px 8px 0;
}

/** cells **/

cells{
    --sizeCell: 100px;
    --sizeBorder: 2px;
    --sizeBorderDouble: calc(var(--sizeBorder) * 2);
    /* --size: calc(var(--sizeCell) - var(--sizeBorder)*2 - var(--padding)*2); */

    display: grid;
    position: relative;
    grid-template-columns: repeat(3, var(--sizeCell));
}

cell{
    display: block;
    width: var(--sizeCell);
    height: var(--sizeCell);
    border: var(--sizeBorder) solid #333;
    background-color: #fff;
    /* --sIcon: var(--sizeCell); */
    cursor: pointer;
}

cell .icon{
    --sIcon: 100%;
}

cell .icon.x{
    --iPadding: 5px;
    --sSymbol: 13px;
}

cell .icon.o{
    --iPadding: 3px;
    --sSymbol: 13px;
}

cell:not(.disabled):hover, cell.disabled:not(:has(.icon)) {
    background-color: #a5a5a5;
}

cell.disabled{
    cursor: not-allowed !important;
    background-color: #dadada;
}

cell.disabled *{
    cursor: not-allowed !important;
}

cell:nth-child(1){
    border-top-width: var(--sizeBorderDouble);
    border-left-width: var(--sizeBorderDouble);
    border-top-left-radius: 15px;
}

cell:nth-child(2){
    border-top-width: var(--sizeBorderDouble);
}

cell:nth-child(3){
    border-top-width: var(--sizeBorderDouble);
    border-right-width: var(--sizeBorderDouble);
    border-top-right-radius: 15px;
}

cell:nth-child(4){
    border-left-width: var(--sizeBorderDouble);
}

cell:nth-child(6){
    border-right-width: var(--sizeBorderDouble);
}

cell:nth-child(7){
    border-bottom-width: var(--sizeBorderDouble);
    border-left-width: var(--sizeBorderDouble);
    border-bottom-left-radius: 15px;
}

cell:nth-child(8){
    border-bottom-width: var(--sizeBorderDouble);
}

cell:nth-child(9){
    border-bottom-width: var(--sizeBorderDouble);
    border-right-width: var(--sizeBorderDouble);
    border-bottom-right-radius: 15px;
}

/** **/

message{
    display: flex;
    align-items: center;
    gap: 5px;
}

winner{
    --sIcon: 30px;
    --iconColor: var(--colorVictory);
}

message p{
    display: block;
    color: var(--colorVictory);
    font-weight: bold;
    font-size: 1.5em;
    margin: 0;
    text-transform: uppercase;
}

/** **/

.btn{
    --backgroundColor: #333;
    --textColor: #fff;
}


/**  **/

#prova{
    display: flex;
    align-items: center;
    justify-content: space-around;

    flex-direction: var(--direction);

    position: absolute;
    width: 100%;
    height: 100%;
}

#prova.ver{
    --direction: row;
}

#prova.orr{
    --direction: column;
}

#prova .li{
    display: block;
    background-color: #2c7a7b;
    visibility: hidden;
    border-radius: 5px;
    opacity: 90%;
    --width: calc(100% - var(--sizeBorderDouble)*2 - var(--padding)*2);
    --height:  7px;
}

#prova .li.show{
    visibility: visible;
}

#prova.ver .li{
    width: var(--height);
    height: var(--width);
}

#prova.orr .li{
    width: var(--width);
    height: var(--height);
}