/* Stake/Rainbet inspired CSS rework */

body {
    background-color: #0f212e;
    color: #b1bad3;
    font-family: "Inter", "Plus Jakarta Sans", sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* 3D Dice Styles */
.perspective-1000 {
    perspective: 1200px;
}

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

.dice-cube {
    width: 128px;
    height: 128px;
    transition: transform 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    transform-origin: center center;
}

.dice-face {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #1a2c38;
    border: 2px solid #2f4553;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    font-weight: 700;
    font-family: "Inter", "Plus Jakarta Sans", sans-serif;
    font-variant-numeric: tabular-nums;
    color: #00e701; 
    box-shadow: inset 0 0 15px rgba(0,0,0,0.5), 0 10px 15px -3px rgba(0, 0, 0, 0.3);
    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); }

/* Marquee Animation */
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

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

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

/* Subtle Glows (Replaces harsh AI glows) */
.shadow-glow {
    box-shadow: 0 0 25px rgba(0, 231, 1, 0.15);
}

.shadow-glow-blue {
    box-shadow: 0 0 25px rgba(20, 117, 225, 0.15);
}

/* General Button States */
button {
    transition: all 0.2s ease-in-out;
}

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

button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Utility */
.no-select {
    -webkit-user-select: none;
    user-select: none;
}

/* Input Fields */
input, select {
    background-color: #0f212e !important;
    color: #ffffff !important;
    border-color: #2f4553 !important;
    transition: border-color 0.2s;
}

input:focus, select:focus {
    border-color: #557086 !important;
    outline: none;
}

/* Custom selection */
::selection {
    background: #00e701;
    color: #0f212e;
}