:root {
    --dice-size: 80px;
    --dice-bg-size: calc(var(--dice-size) * 1.28);
    --trans-z-face: calc(var(--dice-size) / 2);
    --trans-z-show: calc(var(--trans-z-face) * -1);
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    flex-direction: column;
    margin: 0;
    overflow: hidden;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

#dice-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.dice-cube {
    width: var(--dice-size);
    height: var(--dice-size);
    position: absolute;
    transition: transform 1s ease, top 1s ease, left 1s ease;
    perspective: calc(var(--dice-size) * 4);
}

.dice-cube * {
  box-sizing: border-box;
}

.cube {
  width: var(--dice-size);
  height: var(--dice-size);
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.3s;
}

/* 內層處理面朝向，外層 cube 可做整體旋轉動畫 */
.cube-inner {
  width: var(--dice-size);
  height: var(--dice-size);
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(var(--trans-z-show));
  transition: transform 0.3s;
}

.cube-inner.show-front {
    transform: translateZ(var(--trans-z-show)) rotateY(0deg);
}

.cube-inner.show-right {
    transform: translateZ(var(--trans-z-show)) rotateY(-90deg);
}

.cube-inner.show-back {
    transform: translateZ(var(--trans-z-show)) rotateY(-180deg);
}

.cube-inner.show-left {
    transform: translateZ(var(--trans-z-show)) rotateY(90deg);
}

.cube-inner.show-top {
    transform: translateZ(var(--trans-z-show)) rotateX(-90deg);
}

.cube-inner.show-bottom {
    transform: translateZ(var(--trans-z-show)) rotateX(90deg);
}

.cube__face {
  position: absolute;
  width: var(--dice-size);
  height: var(--dice-size);
  background-color: white;
  background-position: center;
  background-size: var(--dice-bg-size);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Soft shadow for a 3D effect */
  border-radius: 8px; /* Rounded corners */
}

.cube__face--front { transform: rotateY(0deg) translateZ(var(--trans-z-face)); background-image: url('imgs/dice1.svg'); }
.cube__face--right { transform: rotateY(90deg) translateZ(var(--trans-z-face)); background-image: url('imgs/dice5.svg'); }
.cube__face--back { transform: rotateY(180deg) translateZ(var(--trans-z-face)); background-image: url('imgs/dice6.svg'); }
.cube__face--left { transform: rotateY(-90deg) translateZ(var(--trans-z-face)); background-image: url('imgs/dice2.svg'); }
.cube__face--top { transform: rotateX(90deg) translateZ(var(--trans-z-face)); background-image: url('imgs/dice4.svg'); }
.cube__face--bottom { transform: rotateX(-90deg) translateZ(var(--trans-z-face)); background-image: url('imgs/dice3.svg'); }

/* 骰子投擲時的旋轉動畫 */
@keyframes diceSpinX {
    0% { transform: rotateX(0deg); }
    100% { transform: rotateX(720deg); }
}

@keyframes diceSpinY {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(720deg); }
}

@keyframes diceSpinZ {
    0% { transform: rotateZ(0deg); }
    100% { transform: rotateZ(360deg); }
}

/* 骰子彈跳動畫 */
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-30px); }
}

@keyframes bounceX {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(20px); }
    75% { transform: translateX(-20px); }
}

.dice-cube.throwing {
    animation: bounce 0.6s ease-in-out, bounceX 0.8s ease-in-out;
}

.dice-cube.throwing .cube {
    animation: diceSpinX 0.3s linear, diceSpinY 0.4s linear, diceSpinZ 0.35s linear;
}