/* 3D Cube Animation */
.result {
    perspective: 1000px;
    transform-style: preserve-3d;
    position: relative;
    width: 300px;
    height: 300px;
    margin: 2rem auto;
}

/* Expanded layout when Quick View is open in the cube area */
.result.quick-view-open {
    perspective: none;
    transform-style: flat;
    width: 520px;
    height: auto;
    max-height: 520px;
    overflow: auto;
}

.cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
}

.cube.idle {
    animation: idleSpin 8s infinite linear;
}

.cube.rolling {
    animation: spin3D 2s infinite linear;
}

.cube.selected {
    animation: selectedSpin 12s infinite linear;
}

.face {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(20, 30, 40, 0.95);
    border: 3px solid #2ecc71;
    border-radius: 1rem;
    backface-visibility: hidden;
    box-shadow: 
        0 0 15px #2ecc71,
        inset 0 0 10px rgba(46, 204, 113, 0.5);
    backdrop-filter: blur(5px);
}

/* Position each face */
.front  { transform: rotateY(0deg) translateZ(150px); }
.back   { transform: rotateY(180deg) translateZ(150px); }
.right  { transform: rotateY(90deg) translateZ(150px); }
.left   { transform: rotateY(-90deg) translateZ(150px); }
.top    { transform: rotateX(90deg) translateZ(150px); }
.bottom { transform: rotateX(-90deg) translateZ(150px); }

@keyframes idleSpin {
    0% {
        transform: rotateX(5deg) rotateY(0deg);
    }
    100% {
        transform: rotateX(5deg) rotateY(360deg);
    }
}

@keyframes selectedSpin {
    0% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(360deg);
    }
}

@keyframes spin3D {
    0% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg);
    }
}

/* Content styling */
.face .pack-title {
    color: #2ecc71;
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
    text-shadow: 0 0 10px rgba(46, 204, 113, 0.8);
}

.face .game-title {
    font-size: 1.4rem;
    color: #fff;
    text-align: center;
    padding: 0 1rem;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}