.perspective-1000 {
    perspective: 1200px;
}

.transform-style-3d {
    transform-style: preserve-3d;
}


.dice-cube {
    width: 128px;
    height: 128px;
    transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.1, 1);
    transform-origin: center center;
}


.dice-face {
    position: absolute;
    width: 100%;
    height: 100%;
    
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border: 2px solid #fbbf24;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    font-weight: 800;
    font-family: "Space Grotesk", monospace;
    color: #18181b; 
    text-shadow: 0 2px 4px rgba(255, 255, 255, 0.3);
    box-shadow:
        inset 0 0 20px rgba(0, 0, 0, 0.3),
        inset 0 0 5px rgba(255, 255, 255, 0.5),
        0 0 15px rgba(245, 158, 11, 0.2);
    backface-visibility: hidden; 
}


.dice-face.front {
    transform: rotateY(0deg) translateZ(64px);
}
.dice-face.back {
    transform: rotateY(180deg) translateZ(64px);
}
.dice-face.right {
    transform: rotateY(90deg) translateZ(64px);
}
.dice-face.left {
    transform: rotateY(-90deg) translateZ(64px);
}
.dice-face.top {
    transform: rotateX(90deg) translateZ(64px);
}
.dice-face.bottom {
    transform: rotateX(-90deg) translateZ(64px);
}




@keyframes marquee {
    0% {
        transform: translateX(100vw);
    }
    100% {
        transform: translateX(-100%);
    }
}

.animate-marquee {
    display: inline-flex;
    white-space: nowrap;
    animation: marquee 30s linear infinite;
    will-change: transform;
}


.animate-marquee:hover {
    animation-play-state: paused;
}


.shadow-glow {
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.4);
}

.shadow-glow-blue {
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.4);
}


button:active:not(:disabled) {
    transform: scale(0.97);
}


.no-select {
    -webkit-user-select: none;
    user-select: none;
}