/** 3D elements design: board and cubes */

.cube, #board {
    box-sizing: border-box;
    position: absolute;
    transform: translateX(-50%) translateY(-50%) rotateX(0deg) rotateY(0deg);
    transform-style: preserve-3d;
}

.cube {
    --size: 50px;
    background-color: #555;
    width: var(--size); 
    height: var(--size); 
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), 
                left 0.8s cubic-bezier(0.25, 1, 0.5, 1), 
                top 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    cursor: pointer;
}

.cube.selected .cubeface {
    filter: opacity(0.8);
}


.cubeface {
    box-sizing: border-box;
    position: absolute;
    width: var(--size);
    height: var(--size);
    background-color: inherit;
    border: 1px solid #222;
    --color: #555;
}

.cubeface.top { 
    transform: translateZ(var(--size)); 
}
.cubeface.left { 
    transform: rotateY(-90deg) translateZ(calc(var(--size) / 2)) translateX(calc(var(--size) / 2));
}
.cubeface.right { 
    transform: rotateY(90deg) translateZ(calc(var(--size) / 2)) translateX(calc(var(--size) / -2)); 
}
.cubeface.front { 
    transform: rotateX(90deg) translateZ(calc(var(--size) / -2)) translateY(calc(var(--size) / 2)); 
}
.cubeface.back { 
    transform: rotateX(90deg) translateZ(calc(var(--size) / 2)) translateY(calc(var(--size) / 2)); 
}

/** Board faces **/
#board {
    left: 0%;
    top: 0%;
    border: 0;
    margin: 0;
    padding: 0;
}

.gridface {
    box-sizing: border-box;
    border: solid 1px #000;
    position: absolute;
    --size: 300px;
    --thickness: 10px;
    width: var(--size);
    height: var(--size);
    background-color: rgb(131, 65, 24);
  }
  
#grid {
    display: grid;
    gap: 1px;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    filter: drop-shadow(0 0 0 transparent);   
}

/* Épaisseur = 10px, donc Z = ±5px */
.gridface.top  { transform: translateZ(0px); }
.gridface.bottom   { transform: rotateY(180deg) translateZ(var(--thickness)); }

.gridface.front { height: var(--thickness); transform: rotateX(90deg) translateZ(-295px) translateY(calc(var(--thickness) / -2)); }
.gridface.back { height: var(--thickness); transform: rotateX(180deg) translateZ(calc(var(--thickness) / 2)) translateY(calc(var(--thickness)/ -2)); }

.gridface.left   { width: var(--thickness); transform: rotateY(-90deg) translateZ(calc(var(--thickness) / 2)) translateX(calc(var(--thickness) / -2)); }
.gridface.right  { width: var(--thickness); transform: rotateY(90deg) translateZ(295px) translateX(calc(var(--thickness) / 2)); }