:root {
    --dice-size: var(--dice-container-height);
}

.dice-container {
    display: flex;
    gap: calc(var(--dice-size) * 0.15);
    justify-content: center;
    z-index: 1000;
}

.player-dice-container {
   display: flex;
   height: var(--dice-size); 
   width:calc(100vw/2 - var(--card-gap));
   border:0px;
   border-radius: calc(var(--card-radius) / 2);
   justify-content: center;
   padding: calc(var(--dice-size) * 0.15);
}

.dice {
    width: var(--dice-size);
    height: var(--dice-size);
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(0deg) rotateY(0deg);
    transition: transform 0.2s ease-in-out;
    cursor: arrow; 
}

.dice.active {
    cursor: arrow;
}

.player-dice-container[data-engage="local"] .dice.active {
    border-radius: calc(var(--card-radius) / 2);
    cursor: pointer;
}

.player-dice-container[data-engage="local"] .dice.active .face{
    box-shadow: calc(var(--dice-size) / 148) calc(var(--dice-size) / 24) calc(var(--dice-size) / 8)  rgba(0, 0, 0, 0.1);
}

.face {
    position: absolute;
    width: var(--dice-size);
    height: var(--dice-size);
    background-color: white;
    border: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: calc(var(--dice-size) * 0.15); 
    background-size: cover;
    background-position: center; 
    background-size: 80%; 
    background-repeat: no-repeat;
}

.face.front  { transform: rotateY(  0deg) translateZ(calc(var(--dice-size)/2)); }
.face.back  { transform: rotateY(180deg) translateZ(calc(var(--dice-size)/2)) rotateX(180deg); }
.face.right  { transform: rotateY( 90deg) translateZ(calc(var(--dice-size)/2)); }
.face.left    { transform: rotateY(-90deg) translateZ(calc(var(--dice-size)/2)); }
.face.top    { transform: rotateX( 90deg) translateZ(calc(var(--dice-size)/2)); }
.face.bottom { transform: rotateX(-90deg) translateZ(calc(var(--dice-size)/2)); }

.dice.rolling {
    animation: roll 0.5s ease-in-out;
}

@keyframes roll {
    0% { transform: rotateX(0deg) rotateY(0deg); }
    25% { transform: rotateX(180deg) rotateY(90deg); }
    50% { transform: rotateX(360deg) rotateY(180deg); }
    75% { transform: rotateX(540deg) rotateY(270deg); }
    100% { transform: rotateX(720deg) rotateY(360deg); }
}


.face.front {background-image: url('../assets/dice/300-02.svg');}
.face.back {background-image: url('../assets/dice/300-04.svg');}
.face.right {background-image: url('../assets/dice/300-03.svg');}
.face.left {background-image: url('../assets/dice/300-06.svg');}
.face.top {background-image: url('../assets/dice/300-05.svg');}
.face.bottom {background-image: url('../assets/dice/300-01.svg');}

.dice.active .face::before {
   content: "";
   border-radius: calc(var(--card-radius) / 2);
   position: absolute;
   inset: 0;
   background-color: rgba(255, 255, 255, 0.9); 
   z-index: 1000;
   pointer-events: none; 
}