/* 
   We are using Tailwind CSS + DaisyUI for the main layout and components.
   This file now only contains the custom 3D Dice styles and necessary overrides.
*/

:root {
    --dice-size: 100px;
    --dice-color: #ffffff;
    --dice-dot: #000000;
    /* DaisyUI uses HSL variables, but we can use our own for the dice specific parts if needed */
}

/* 3D Dice Styles */
.scene {
    width: var(--dice-size);
    height: var(--dice-size);
    perspective: 600px;
}

.cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transform: translateZ(-50px);
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.cube__face {
    position: absolute;
    width: var(--dice-size);
    height: var(--dice-size);
    border: 2px solid oklch(var(--p));
    /* Use primary color from DaisyUI theme */
    background: rgba(255, 255, 255, 0.95);
    color: var(--dice-dot);
    font-size: 40px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 15px oklch(var(--p) / 0.5);
    border-radius: 12px;
}

.cube__face--1 {
    transform: rotateY(0deg) translateZ(50px);
}

.cube__face--2 {
    transform: rotateY(90deg) translateZ(50px);
}

.cube__face--3 {
    transform: rotateY(180deg) translateZ(50px);
}

.cube__face--4 {
    transform: rotateY(-90deg) translateZ(50px);
}

.cube__face--5 {
    transform: rotateX(90deg) translateZ(50px);
}

.cube__face--6 {
    transform: rotateX(-90deg) translateZ(50px);
}

/* Animation Classes */
.show-1 {
    transform: translateZ(-50px) rotateY(0deg);
}

.show-2 {
    transform: translateZ(-50px) rotateY(-90deg);
}

.show-3 {
    transform: translateZ(-50px) rotateY(-180deg);
}

.show-4 {
    transform: translateZ(-50px) rotateY(90deg);
}

.show-5 {
    transform: translateZ(-50px) rotateX(-90deg);
}

.show-6 {
    transform: translateZ(-50px) rotateX(90deg);
}