/* --- Dice Roller Styles --- */

#dice-container {
    width: 100px;
    height: 100px;
    margin: 40px auto;
    perspective: 1400px;
    transition: transform 0.3s ease; /* เพิ่ม transition ตอนย่อ */
}

#dice-cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.5s ease-out;
}

/* 1. เปลี่ยนสีลูกเต๋า (ใช้สีหลัก) */
.dice-face {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: #ffffff;
    /* ใช้สีฟ้า (Primary) จาก style.css */
    border: 3px solid #0099ff;
    border-radius: 10px;
    box-shadow: inset 0 0 10px rgba(0, 153, 255, 0.15);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 3rem;
    font-weight: bold;
    color: #0099ff;
}

/* --- Positioning (เหมือนเดิม) --- */
.face-1 { transform: rotateY(0deg) translateZ(50px); }
.face-1::before { content: '1'; }
.face-2 { transform: rotateY(90deg) translateZ(50px); }
.face-2::before { content: '2'; }
.face-3 { transform: rotateX(90deg) translateZ(50px); }
.face-3::before { content: '3'; }
.face-4 { transform: rotateX(-90deg) translateZ(50px); }
.face-4::before { content: '4'; }
.face-5 { transform: rotateY(-90deg) translateZ(50px); }
.face-5::before { content: '5'; }
.face-6 { transform: rotateY(180deg) translateZ(50px); }
.face-6::before { content: '6'; }

/* --- Animations (เหมือนเดิม) --- */
@keyframes roll-dice {
    0% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
    100% { transform: rotateX(1080deg) rotateY(720deg) rotateZ(1440deg); }
}
#dice-cube.rolling {
    animation: roll-dice 1.5s linear;
}

/* --- Results (เหมือนเดิม) --- */
#dice-cube.show-1 { transform: translateZ(-50px) rotateY(0deg); }
#dice-cube.show-2 { transform: translateZ(-50px) rotateY(-90deg); }
#dice-cube.show-3 { transform: translateZ(-50px) rotateX(-90deg); }
#dice-cube.show-4 { transform: translateZ(-50px) rotateX(90deg); }
#dice-cube.show-5 { transform: translateZ(-50px) rotateY(90deg); }
#dice-cube.show-6 { transform: translateZ(-50px) rotateY(-180deg); }

/* 2. Responsive */
@media (max-width: 700px) {
    #dice-container {
        /* ย่อส่วนลูกเต๋าลง 80% */
        transform: scale(0.8);
        margin: 25px auto;
    }
}