.dice-area{display:flex; gap:16px; flex-wrap:wrap; perspective:800px; margin:20px 0}
.cube{
  width:80px; height:80px; position:relative; transform-style:preserve-3d;
  transition:transform 1s cubic-bezier(.17,.67,.32,1.3);
}
.face{
  position:absolute; width:80px; height:80px; background:#e7ecff; color:#0b1020; display:flex; align-items:center; justify-content:center; font-weight:900; font-size:26px; border:2px solid #2a335a;
}
.face:nth-child(1){transform:rotateY(0deg) translateZ(40px)}    /* 1 front */
.face:nth-child(2){transform:rotateY(90deg) translateZ(40px)}   /* 2 right */
.face:nth-child(3){transform:rotateY(180deg) translateZ(40px)}  /* 3 back */
.face:nth-child(4){transform:rotateY(-90deg) translateZ(40px)}  /* 4 left */
.face:nth-child(5){transform:rotateX(90deg) translateZ(40px)}   /* 5 top */
.face:nth-child(6){transform:rotateX(-90deg) translateZ(40px)}  /* 6 bottom */