/* 
 * 3D True Tumbling Dice Cube for Ludo King
 * Fast Linear 3D Tumble + 18deg Lock-Settle (Zero Wrong-Face Flash / Zero Flip-Back)
 */

.dice-container {
    width: 48px;
    height: 48px;
    perspective: 650px;
    -webkit-perspective: 650px;
    cursor: pointer;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transform: translateZ(0);
}

/* 3D Cube Container */
.dice-cube {
    width: 44px;
    height: 44px;
    position: relative;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transition: transform 0.09s ease-out;
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    will-change: transform;
}

/* Fast High-Speed 3D Tumble during active roll (Linear so it never pauses on an intermediate face) */
.dice-container.rolling .dice-cube,
.dice-container.rolling-wait .dice-cube {
    animation: diceFastTumble 0.18s linear infinite !important;
    transition: none !important;
}

@keyframes diceFastTumble {
    0%   { transform: scale(1.08) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
    25%  { transform: scale(1.14) rotateX(90deg) rotateY(90deg) rotateZ(45deg); }
    50%  { transform: scale(1.16) rotateX(180deg) rotateY(180deg) rotateZ(90deg); }
    75%  { transform: scale(1.14) rotateX(270deg) rotateY(270deg) rotateZ(135deg); }
    100% { transform: scale(1.08) rotateX(360deg) rotateY(360deg) rotateZ(180deg); }
}

/* Turn Glow / Pulse when player must roll (Pure scale transform — zero GPU repaint flicker) */
.dice-container.can-roll {
    animation: diceCallout 0.95s infinite ease-in-out;
}

@keyframes diceCallout {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.10);
    }
}

/* 6 Faces of the 3D Cube */
.dice-face {
    position: absolute;
    top: 0;
    left: 0;
    width: 44px;
    height: 44px;
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 65%, #e2e8f0 100%);
    border-radius: 9px;
    border: 1.8px solid #cbd5e1;
    box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.95), inset 0 -2px 4px rgba(15, 23, 42, 0.15);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    padding: 4px;
    box-sizing: border-box;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

/* Face 3D Transformations (Cube depth: half of 44px = 22px) */
.face-1 { transform: rotateY(0deg) translateZ(22px); }
.face-6 { transform: rotateY(180deg) translateZ(22px); }
.face-2 { transform: rotateY(90deg) translateZ(22px); }
.face-5 { transform: rotateY(-90deg) translateZ(22px); }
.face-3 { transform: rotateX(90deg) translateZ(22px); }
.face-4 { transform: rotateX(-90deg) translateZ(22px); }

/* Pips (Points / Dots) — Elevated +1px in Z so they NEVER Z-fight or vanish on 3D rotation */
.dice-face .pip {
    width: 8.5px;
    height: 8.5px;
    background: radial-gradient(circle at 35% 35%, #334155 0%, #0f172a 75%);
    border-radius: 50%;
    box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.25);
    justify-self: center;
    align-self: center;
    opacity: 0;
    transform: translateZ(1px);
    pointer-events: none;
}

/* Bold Ruby-Red Center Pip for Face 1 (Ludo King Classic) */
.face-1 .pip {
    background: radial-gradient(circle at 35% 35%, #ff5252 0%, #d50000 75%);
    width: 13px;
    height: 13px;
    box-shadow: 0 1px 3px rgba(213, 0, 0, 0.55), inset 0 1px 1.5px rgba(255, 255, 255, 0.4);
}

/* Bold Ruby-Red Pips for Face 6 (Ludo King Classic) */
.face-6 .pip {
    background: radial-gradient(circle at 35% 35%, #ff5252 0%, #d50000 75%);
    box-shadow: 0 1px 2px rgba(213, 0, 0, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.35);
}

/* Face 1: Center */
.face-1 .pip:nth-child(5) { opacity: 1; }

/* Face 2: Top-Left, Bottom-Right */
.face-2 .pip:nth-child(1),
.face-2 .pip:nth-child(9) { opacity: 1; }

/* Face 3: Top-Left, Center, Bottom-Right */
.face-3 .pip:nth-child(1),
.face-3 .pip:nth-child(5),
.face-3 .pip:nth-child(9) { opacity: 1; }

/* Face 4: Four Corners */
.face-4 .pip:nth-child(1),
.face-4 .pip:nth-child(3),
.face-4 .pip:nth-child(7),
.face-4 .pip:nth-child(9) { opacity: 1; }

/* Face 5: Four Corners + Center */
.face-5 .pip:nth-child(1),
.face-5 .pip:nth-child(3),
.face-5 .pip:nth-child(5),
.face-5 .pip:nth-child(7),
.face-5 .pip:nth-child(9) { opacity: 1; }

/* Face 6: Two Columns of 3 */
.face-6 .pip:nth-child(1),
.face-6 .pip:nth-child(3),
.face-6 .pip:nth-child(4),
.face-6 .pip:nth-child(6),
.face-6 .pip:nth-child(7),
.face-6 .pip:nth-child(9) { opacity: 1; }

/* Cube Orientations */
.dice-cube[data-show="1"] { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
.dice-cube[data-show="2"] { transform: rotateX(0deg) rotateY(-90deg) rotateZ(0deg); }
.dice-cube[data-show="3"] { transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg); }
.dice-cube[data-show="4"] { transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg); }
.dice-cube[data-show="5"] { transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg); }
.dice-cube[data-show="6"] { transform: rotateX(0deg) rotateY(180deg) rotateZ(0deg); }