/* --- MASSIVE 3D PHYSICS ARENA --- */
.dice-area {
width: 100%;
min-height: 250px;
display: flex;
justify-content: center;
align-items: flex-end;
gap: 1.5rem;
perspective: 1000px;
padding-bottom: 2rem;
margin-top: 10px;
}

.die-column {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}

.die-wrapper {
position: relative;
width: 50px;
height: 50px;
z-index: 10;
}

.cube {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
transform: rotateX(-20deg) rotateY(30deg) rotateZ(0deg);
}

.face {
position: absolute;
width: 50px;
height: 50px;
border-radius: 8px;
border: 3px solid rgba(0,0,0,0.3);
box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
display: flex;
align-items: center;
justify-content: center;
}

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

.shadow {
position: absolute;
bottom: -12px;
width: 40px;
height: 12px;
background: rgba(0,0,0,0.7);
border-radius: 50%;
filter: blur(4px);
z-index: 1;
opacity: 0.7;
}

.falling { animation: dropBounce 2.5s forwards; }
.shadow-animate { animation: shadowBounce 2.5s forwards; }

@keyframes dropBounce {
0%   { transform: translateY(-500px); animation-timing-function: ease-in; }
18%  { transform: translateY(0px) scaleY(0.7) scaleX(1.2); animation-timing-function: ease-out; }
20%  { transform: translateY(0px) scaleY(1) scaleX(1); animation-timing-function: ease-out; }
40%  { transform: translateY(-250px); animation-timing-function: ease-in; }
58%  { transform: translateY(0px) scaleY(0.85) scaleX(1.1); animation-timing-function: ease-out; }
60%  { transform: translateY(0px) scaleY(1) scaleX(1); animation-timing-function: ease-out; }
75%  { transform: translateY(-100px); animation-timing-function: ease-in; }
88%  { transform: translateY(0px) scaleY(0.95) scaleX(1.05); animation-timing-function: ease-out; }
90%  { transform: translateY(0px) scaleY(1) scaleX(1); animation-timing-function: ease-out; }
95%  { transform: translateY(-30px); animation-timing-function: ease-in; }
100% { transform: translateY(0px); }
}

@keyframes shadowBounce {
0%   { transform: scale(0.2); opacity: 0; animation-timing-function: ease-in; }
18%  { transform: scale(1.3); opacity: 0.9; animation-timing-function: ease-out; }
40%  { transform: scale(0.5); opacity: 0.3; animation-timing-function: ease-in; }
58%  { transform: scale(1.1); opacity: 0.8; animation-timing-function: ease-out; }
75%  { transform: scale(0.7); opacity: 0.5; animation-timing-function: ease-in; }
88%  { transform: scale(1.05); opacity: 0.7; animation-timing-function: ease-out; }
95%  { transform: scale(0.9); opacity: 0.6; animation-timing-function: ease-in; }
100% { transform: scale(1); opacity: 0.7; }
}

/* --- BETTING BOARD & CHIPS --- */
.color-board {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-bottom: 20px;
width: 100%;
}

.color-block {
aspect-ratio: 1;
border-radius: 8px;
cursor: pointer;
box-shadow: 0 4px 0 rgba(0,0,0,0.6), inset 0 2px 10px rgba(255,255,255,0.2);
transition: all 0.15s ease;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-weight: 900;
font-size: 0.9rem;
text-transform: uppercase;
color: white;
position: relative;
}

.color-block:active {
transform: translateY(4px);
box-shadow: 0 0 0 rgba(0,0,0,0.6), inset 0 2px 10px rgba(255,255,255,0.2);
}

.color-block.has-bet {
border: 2px solid #f1c40f;
box-shadow: 0 4px 0 rgba(0,0,0,0.4), 0 0 15px rgba(241, 196, 15, 0.3), inset 0 2px 10px rgba(255,255,255,0.3);
}

.color-bet-badge {
position: absolute;
top: -8px;
right: -8px;
background: linear-gradient(135deg, #f1c40f, #d35400);
color: #000;
font-size: 0.75rem;
font-weight: 900;
padding: 3px 8px;
border-radius: 12px;
box-shadow: 0 4px 6px rgba(0,0,0,0.6), inset 0 2px 2px rgba(255,255,255,0.5);
display: none;
z-index: 10;
border: 1px solid #fff;
}

.color-block.has-bet .color-bet-badge {
display: block;
}

/* Casino Chip Selector */
.chip-container {
display: flex;
justify-content: space-between;
gap: 8px;
margin-bottom: 20px;
background: #0f172a;
padding: 10px;
border-radius: 12px;
border: 1px solid #334155;
}

.chip-btn {
flex: 1;
background: #1e293b;
border: 2px solid #334155;
border-radius: 50%;
aspect-ratio: 1;
max-width: 60px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 900;
font-size: 0.9rem;
color: #cbd5e1;
cursor: pointer;
transition: all 0.2s;
box-shadow: inset 0 2px 4px rgba(255,255,255,0.1), 0 4px 6px rgba(0,0,0,0.4);
}

.chip-btn:hover { background: #334155; }

.chip-btn.active {
border-color: #f1c40f;
background: #f1c40f;
color: #000;
transform: scale(1.1) translateY(-4px);
box-shadow: 0 10px 15px rgba(241, 196, 15, 0.4), inset 0 2px 4px rgba(255,255,255,0.5);
}

.bg-c-red { background-color: #ef4444; }
.bg-c-blue { background-color: #3b82f6; }
.bg-c-yellow { background-color: #eab308; color: #422006 !important; }
.bg-c-green { background-color: #22c55e; }
.bg-c-pink { background-color: #ec4899; }
.bg-c-white { background-color: #f8fafc; color: #1e293b !important; border: 1px solid #cbd5e1; }
.face.bg-c-white { border: 3px solid #cbd5e1; }

/* --- BIGGER 3D DICE OVERRIDE --- */
.die-wrapper, 
.cube, 
.face {
    width: 100px;
    height: 100px;
}

/* 3D Structure Math: translateZ must be exactly half the size (100px / 2 = 50px) */
.face-front  { transform: rotateY(0deg) translateZ(50px); }
.face-back   { transform: rotateY(180deg) translateZ(50px); }
.face-right  { transform: rotateY(90deg) translateZ(50px); }
.face-left   { transform: rotateY(-90deg) translateZ(50px); }
.face-top    { transform: rotateX(90deg) translateZ(50px); }
.face-bottom { transform: rotateX(-90deg) translateZ(50px); }

/* Widen the shadow to match the new 100px dice width */
.shadow {
    width: 100px;
    height: 20px;
    bottom: -30px; 
}

/* --- WINNING COLOR HIGHLIGHT EFFECT --- */
/* --- UPGRADED FLASHIER WINNING COLOR HIGHLIGHT --- */
.color-block.winner-highlight {
    border: 5px solid #ffffff !important;
    transform: scale(1.08) !important; /* Pops out slightly more */
    z-index: 10;
    animation: hyperNeonPulse 0.35s infinite alternate !important; /* Faster, aggressive strobe */
}

@keyframes hyperNeonPulse {
    0% { 
        box-shadow: 0 0 15px rgba(255, 255, 255, 0.7), inset 0 0 10px rgba(255, 255, 255, 0.4); 
        border-color: rgba(255, 255, 255, 0.8);
    }
    100% { 
        box-shadow: 0 0 40px #ffffff, 0 0 60px #ffffff, inset 0 0 30px #ffffff; 
        border-color: #ffffff;
    }
}