/* blocks.css - Corrected based on working version */

.mc-block-container {
    width: var(--render-size, 64px);
    height: var(--render-size, 64px);
    perspective: 400px;
    perspective-origin: 50% 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}


.cube {
    width: var(--render-size);
    height: var(--render-size);
    position: relative;
    transform-style: preserve-3d;
    transform: rotateX(-35deg) rotateY(-20deg);
    transition: transform 0.3s ease;
    image-rendering: pixelated;
}

.block-container:hover .cube {
    transform: rotateX(-35deg) rotateY(20deg);
}

.cube>div {
    width: var(--render-size);
    height: var(--render-size);
    position: absolute;
    background-size: cover;
    background-position: center;
    image-rendering: pixelated;
    box-sizing: border-box;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.cube.wall-model .front,
.cube.wall-model .back,
.cube.wall-model .right,
.cube.wall-model .left,
.cube.wall-model .top,
.cube.wall-model .bottom {
    transform: none !important;
}

/* But keep base transforms for regular cubes */
.cube:not(.wall-model) .front {
    transform: translateZ(calc(var(--render-size) / 2));
}

.cube:not(.wall-model) .back {
    transform: rotateY(180deg) translateZ(calc(var(--render-size) / 2));
}

.cube:not(.wall-model) .right {
    transform: rotateY(90deg) translateZ(calc(var(--render-size) / 2));
}

.cube:not(.wall-model) .left {
    transform: rotateY(-90deg) translateZ(calc(var(--render-size) / 2));
}

.cube:not(.wall-model) .top {
    transform: rotateY(90deg) rotateX(90deg) translateZ(calc(var(--render-size) / 2));
    transform-origin: center bottom;
}

.cube:not(.wall-model) .bottom {
    transform: rotateX(-90deg) translateZ(calc(var(--render-size) / 2));
}

.cube.cross>div {
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
}

/* Face positions - EXACTLY like working version */
.cube .front {
    transform: translateZ(calc(var(--render-size) / 2));
}

.cube .back {
    transform: rotateY(180deg) translateZ(calc(var(--render-size) / 2));
}

.cube .right {
    transform: rotateY(90deg) translateZ(calc(var(--render-size) / 2));

}

.cube .left {
    transform: rotateY(-90deg) translateZ(calc(var(--render-size) / 2));

}

.cube .top {
    transform: rotateY(90deg) rotateX(90deg) translateZ(calc(var(--render-size) / 2));
    transform-origin: center bottom;

}

.cube .bottom {
    transform: rotateX(-90deg) translateZ(calc(var(--render-size) / 2));
}

/* Brightness adjustments */
.cube .front,
.cube .back,
.cube .right,
.cube .left {
    filter: brightness(0.75);
}


/* Animation for rotating cube (optional) */
@keyframes rotatecube {
    0% {
        transform: rotateX(-35deg) rotateY(0deg);
    }

    100% {
        transform: rotateX(-35deg) rotateY(360deg);
    }
}

.cube {
    animation: rotatecube 10s infinite linear;
}