/**
 * 3D Dice Animation Styles
 * RollQuest - Immersive 3D Dice Experience
 * Optimized for 60fps smooth animations
 */

/* ============================================
   DICE CONTAINER & SCENE
   ============================================ */

.dice-scene {
    width: 150px;
    height: 150px;
    perspective: 600px;
    perspective-origin: 50% 50%;
    margin: 0 auto;
    transform: translateZ(0);
    backface-visibility: hidden;
}

.dice-3d-cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: rotateX(-20deg) rotateY(20deg);
    will-change: transform;
    backface-visibility: hidden;
}

/* ============================================
   DICE FACES - 3D CUBE
   ============================================ */

.dice-face {
    position: absolute;
    width: 150px;
    height: 150px;
    background: linear-gradient(145deg, #ffffff 0%, #e8e8e8 50%, #d0d0d0 100%);
    border: 3px solid #333;
    border-radius: 15px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.1);
    backface-visibility: visible;
    transform: translateZ(0);
}

/* Face positions for 3D cube */
.dice-face-1 { transform: rotateY(0deg) translateZ(75px); }      /* Front */
.dice-face-6 { transform: rotateY(180deg) translateZ(75px); }    /* Back */
.dice-face-3 { transform: rotateY(90deg) translateZ(75px); }     /* Right */
.dice-face-4 { transform: rotateY(-90deg) translateZ(75px); }    /* Left */
.dice-face-2 { transform: rotateX(90deg) translateZ(75px); }     /* Top */
.dice-face-5 { transform: rotateX(-90deg) translateZ(75px); }    /* Bottom */

/* ============================================
   DICE DOTS
   ============================================ */

.dice-dot {
    width: 22px;
    height: 22px;
    background: radial-gradient(circle at 30% 30%, #4a4a4a, #1a1a1a);
    border-radius: 50%;
    box-shadow: 
        inset 2px 2px 4px rgba(255, 255, 255, 0.2),
        2px 2px 4px rgba(0, 0, 0, 0.3);
    margin: 5px;
}

/* Dot layouts for each face */
.dice-face-1 .dice-dots { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    width: 100%; 
    height: 100%; 
}

.dice-face-2 .dice-dots { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    width: 100%; 
    height: 100%; 
    padding: 30px; 
    flex-direction: column;
}

.dice-face-2 .dice-dots .dice-dot:first-child { align-self: flex-start; }
.dice-face-2 .dice-dots .dice-dot:last-child { align-self: flex-end; }

.dice-face-3 .dice-dots { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    width: 100%; 
    height: 100%; 
    padding: 25px; 
    flex-direction: column;
}

.dice-face-3 .dice-dots .dice-dot:first-child { align-self: flex-start; }
.dice-face-3 .dice-dots .dice-dot:nth-child(2) { align-self: center; }
.dice-face-3 .dice-dots .dice-dot:last-child { align-self: flex-end; }

.dice-face-4 .dice-dots { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 30px; 
    padding: 30px; 
}

.dice-face-5 .dice-dots { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 20px; 
    padding: 25px; 
    position: relative;
}

.dice-face-5 .dice-dots .dice-dot:nth-child(5) {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.dice-face-6 .dice-dots { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    grid-template-rows: 1fr 1fr 1fr;
    gap: 10px; 
    padding: 20px;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    align-items: center;
    justify-items: center;
}

/* ============================================
   ROLLING ANIMATION - 60FPS SMOOTH
   ============================================ */

@keyframes diceRoll3D {
    0% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    2% {
        transform: rotateX(30deg) rotateY(15deg) rotateZ(8deg);
    }
    4% {
        transform: rotateX(65deg) rotateY(32deg) rotateZ(16deg);
    }
    6% {
        transform: rotateX(105deg) rotateY(52deg) rotateZ(26deg);
    }
    8% {
        transform: rotateX(150deg) rotateY(75deg) rotateZ(38deg);
    }
    10% {
        transform: rotateX(200deg) rotateY(100deg) rotateZ(50deg);
    }
    12% {
        transform: rotateX(255deg) rotateY(128deg) rotateZ(64deg);
    }
    14% {
        transform: rotateX(315deg) rotateY(158deg) rotateZ(79deg);
    }
    16% {
        transform: rotateX(380deg) rotateY(190deg) rotateZ(95deg);
    }
    18% {
        transform: rotateX(450deg) rotateY(225deg) rotateZ(113deg);
    }
    20% {
        transform: rotateX(525deg) rotateY(263deg) rotateZ(131deg);
    }
    22% {
        transform: rotateX(605deg) rotateY(303deg) rotateZ(151deg);
    }
    24% {
        transform: rotateX(690deg) rotateY(345deg) rotateZ(173deg);
    }
    26% {
        transform: rotateX(780deg) rotateY(390deg) rotateZ(195deg);
    }
    28% {
        transform: rotateX(875deg) rotateY(438deg) rotateZ(219deg);
    }
    30% {
        transform: rotateX(975deg) rotateY(488deg) rotateZ(244deg);
    }
    32% {
        transform: rotateX(1080deg) rotateY(540deg) rotateZ(270deg);
    }
    34% {
        transform: rotateX(1188deg) rotateY(594deg) rotateZ(297deg);
    }
    36% {
        transform: rotateX(1300deg) rotateY(650deg) rotateZ(325deg);
    }
    38% {
        transform: rotateX(1415deg) rotateY(708deg) rotateZ(354deg);
    }
    40% {
        transform: rotateX(1533deg) rotateY(767deg) rotateZ(383deg);
    }
    42% {
        transform: rotateX(1654deg) rotateY(827deg) rotateZ(414deg);
    }
    44% {
        transform: rotateX(1778deg) rotateY(889deg) rotateZ(445deg);
    }
    46% {
        transform: rotateX(1905deg) rotateY(953deg) rotateZ(476deg);
    }
    48% {
        transform: rotateX(2035deg) rotateY(1018deg) rotateZ(509deg);
    }
    50% {
        transform: rotateX(2168deg) rotateY(1084deg) rotateZ(542deg);
    }
    52% {
        transform: rotateX(2304deg) rotateY(1152deg) rotateZ(576deg);
    }
    54% {
        transform: rotateX(2440deg) rotateY(1220deg) rotateZ(610deg);
    }
    56% {
        transform: rotateX(2578deg) rotateY(1289deg) rotateZ(645deg);
    }
    58% {
        transform: rotateX(2718deg) rotateY(1359deg) rotateZ(680deg);
    }
    60% {
        transform: rotateX(2860deg) rotateY(1430deg) rotateZ(715deg);
    }
    62% {
        transform: rotateX(3003deg) rotateY(1502deg) rotateZ(751deg);
    }
    64% {
        transform: rotateX(3148deg) rotateY(1574deg) rotateZ(787deg);
    }
    66% {
        transform: rotateX(3295deg) rotateY(1648deg) rotateZ(824deg);
    }
    68% {
        transform: rotateX(3443deg) rotateY(1722deg) rotateZ(861deg);
    }
    70% {
        transform: rotateX(3592deg) rotateY(1796deg) rotateZ(898deg);
    }
    72% {
        transform: rotateX(3742deg) rotateY(1871deg) rotateZ(936deg);
    }
    74% {
        transform: rotateX(3893deg) rotateY(1947deg) rotateZ(973deg);
    }
    76% {
        transform: rotateX(4045deg) rotateY(2023deg) rotateZ(1011deg);
    }
    78% {
        transform: rotateX(4198deg) rotateY(2099deg) rotateZ(1050deg);
    }
    80% {
        transform: rotateX(4350deg) rotateY(2175deg) rotateZ(1088deg);
    }
    82% {
        transform: rotateX(4500deg) rotateY(2250deg) rotateZ(1125deg);
    }
    84% {
        transform: rotateX(4645deg) rotateY(2323deg) rotateZ(1161deg);
    }
    86% {
        transform: rotateX(4782deg) rotateY(2391deg) rotateZ(1196deg);
    }
    88% {
        transform: rotateX(4910deg) rotateY(2455deg) rotateZ(1228deg);
    }
    90% {
        transform: rotateX(5025deg) rotateY(2513deg) rotateZ(1256deg);
    }
    92% {
        transform: rotateX(5125deg) rotateY(2563deg) rotateZ(1281deg);
    }
    94% {
        transform: rotateX(5210deg) rotateY(2605deg) rotateZ(1303deg);
    }
    96% {
        transform: rotateX(5275deg) rotateY(2638deg) rotateZ(1319deg);
    }
    98% {
        transform: rotateX(5320deg) rotateY(2660deg) rotateZ(1330deg);
    }
    100% {
        transform: rotateX(5340deg) rotateY(2670deg) rotateZ(1335deg);
    }
}

@keyframes diceBounce {
    0% { transform: translateY(0); }
    5% { transform: translateY(-8px); }
    10% { transform: translateY(-18px); }
    15% { transform: translateY(-25px); }
    20% { transform: translateY(-28px); }
    25% { transform: translateY(-25px); }
    30% { transform: translateY(-18px); }
    35% { transform: translateY(-8px); }
    40% { transform: translateY(0); }
    45% { transform: translateY(-4px); }
    50% { transform: translateY(-10px); }
    55% { transform: translateY(-14px); }
    60% { transform: translateY(-10px); }
    65% { transform: translateY(-4px); }
    70% { transform: translateY(0); }
    75% { transform: translateY(-2px); }
    80% { transform: translateY(-5px); }
    85% { transform: translateY(-2px); }
    90% { transform: translateY(0); }
    95% { transform: translateY(-1px); }
    100% { transform: translateY(0); }
}

@keyframes diceShake {
    0% { transform: translateX(0) translateY(0); }
    2% { transform: translateX(-2px) translateY(-1px); }
    4% { transform: translateX(3px) translateY(2px); }
    6% { transform: translateX(-4px) translateY(-2px); }
    8% { transform: translateX(5px) translateY(3px); }
    10% { transform: translateX(-5px) translateY(-3px); }
    12% { transform: translateX(4px) translateY(2px); }
    14% { transform: translateX(-3px) translateY(-2px); }
    16% { transform: translateX(5px) translateY(3px); }
    18% { transform: translateX(-4px) translateY(-2px); }
    20% { transform: translateX(3px) translateY(2px); }
    22% { transform: translateX(-5px) translateY(-3px); }
    24% { transform: translateX(4px) translateY(2px); }
    26% { transform: translateX(-3px) translateY(-1px); }
    28% { transform: translateX(5px) translateY(3px); }
    30% { transform: translateX(-4px) translateY(-2px); }
    32% { transform: translateX(3px) translateY(1px); }
    34% { transform: translateX(-5px) translateY(-3px); }
    36% { transform: translateX(4px) translateY(2px); }
    38% { transform: translateX(-3px) translateY(-1px); }
    40% { transform: translateX(4px) translateY(2px); }
    42% { transform: translateX(-4px) translateY(-2px); }
    44% { transform: translateX(3px) translateY(1px); }
    46% { transform: translateX(-3px) translateY(-2px); }
    48% { transform: translateX(4px) translateY(2px); }
    50% { transform: translateX(-3px) translateY(-1px); }
    52% { transform: translateX(3px) translateY(1px); }
    54% { transform: translateX(-4px) translateY(-2px); }
    56% { transform: translateX(3px) translateY(1px); }
    58% { transform: translateX(-3px) translateY(-1px); }
    60% { transform: translateX(3px) translateY(2px); }
    62% { transform: translateX(-3px) translateY(-1px); }
    64% { transform: translateX(2px) translateY(1px); }
    66% { transform: translateX(-3px) translateY(-1px); }
    68% { transform: translateX(2px) translateY(1px); }
    70% { transform: translateX(-2px) translateY(-1px); }
    72% { transform: translateX(2px) translateY(1px); }
    74% { transform: translateX(-2px) translateY(-1px); }
    76% { transform: translateX(2px) translateY(1px); }
    78% { transform: translateX(-2px) translateY(0); }
    80% { transform: translateX(1px) translateY(1px); }
    82% { transform: translateX(-1px) translateY(0); }
    84% { transform: translateX(1px) translateY(0); }
    86% { transform: translateX(-1px) translateY(0); }
    88% { transform: translateX(1px) translateY(0); }
    90% { transform: translateX(-1px) translateY(0); }
    92% { transform: translateX(1px) translateY(0); }
    94% { transform: translateX(0) translateY(0); }
    96% { transform: translateX(0) translateY(0); }
    98% { transform: translateX(0) translateY(0); }
    100% { transform: translateX(0) translateY(0); }
}

.dice-3d-cube.rolling {
    animation: diceRoll3D 1.4s cubic-bezier(0.2, 0.8, 0.3, 1);
    will-change: transform;
}

.dice-scene.rolling {
    animation: diceShake 1.4s ease-out, diceBounce 1.4s ease-out;
    will-change: transform;
}

/* ============================================
   FINAL POSITION TRANSFORMS
   ============================================ */

/* Show face 1 (front) */
.dice-3d-cube.show-1 {
    transform: rotateX(0deg) rotateY(0deg);
}

/* Show face 2 (top) */
.dice-3d-cube.show-2 {
    transform: rotateX(-90deg) rotateY(0deg);
}

/* Show face 3 (right) */
.dice-3d-cube.show-3 {
    transform: rotateX(0deg) rotateY(-90deg);
}

/* Show face 4 (left) */
.dice-3d-cube.show-4 {
    transform: rotateX(0deg) rotateY(90deg);
}

/* Show face 5 (bottom) */
.dice-3d-cube.show-5 {
    transform: rotateX(90deg) rotateY(0deg);
}

/* Show face 6 (back) */
.dice-3d-cube.show-6 {
    transform: rotateX(0deg) rotateY(180deg);
}

/* ============================================
   WIN/LOSS EFFECTS
   ============================================ */

@keyframes winGlow {
    0%, 100% { 
        filter: drop-shadow(0 0 10px rgba(34, 197, 94, 0.5));
    }
    50% { 
        filter: drop-shadow(0 0 30px rgba(34, 197, 94, 0.9));
    }
}

@keyframes lossShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-5px); }
    80% { transform: translateX(5px); }
}

@keyframes winPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.dice-scene.win-effect {
    animation: winGlow 0.5s ease-in-out 3, winPulse 0.3s ease-in-out 2;
}

.dice-scene.win-effect .dice-face {
    background: linear-gradient(145deg, #d4fce4 0%, #a7f3d0 50%, #6ee7b7 100%);
    border-color: #22c55e;
}

.dice-scene.loss-effect {
    animation: lossShake 0.5s ease-in-out;
}

.dice-scene.loss-effect .dice-face {
    background: linear-gradient(145deg, #fee2e2 0%, #fecaca 50%, #fca5a5 100%);
    border-color: #ef4444;
}

/* ============================================
   IDLE HOVER ANIMATION
   ============================================ */

@keyframes idleFloat {
    0%, 100% { 
        transform: rotateX(-20deg) rotateY(20deg) translateY(0); 
    }
    50% { 
        transform: rotateX(-15deg) rotateY(25deg) translateY(-5px); 
    }
}

.dice-3d-cube.idle {
    animation: idleFloat 3s ease-in-out infinite;
}

.dice-scene:hover .dice-3d-cube.idle {
    animation-play-state: paused;
    transform: rotateX(-25deg) rotateY(30deg) scale(1.05);
    transition: transform 0.3s ease;
}

/* ============================================
   RESULT PANEL STYLING
   ============================================ */

.dice-result-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    min-height: 250px;
}

.result-indicator {
    margin-top: 20px;
    padding: 10px 30px;
    border-radius: 50px;
    font-size: 1.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    animation: resultPop 0.3s ease-out;
}

@keyframes resultPop {
    0% { 
        transform: scale(0); 
        opacity: 0; 
    }
    50% { 
        transform: scale(1.2); 
    }
    100% { 
        transform: scale(1); 
        opacity: 1; 
    }
}

.result-indicator.win {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: white;
    box-shadow: 0 4px 20px rgba(34, 197, 94, 0.4);
}

.result-indicator.loss {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    box-shadow: 0 4px 20px rgba(239, 68, 68, 0.4);
}

/* ============================================
   SOUND TOGGLE BUTTON
   ============================================ */

.sound-toggle {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--text-light, #fff);
    font-size: 1.2rem;
}

.sound-toggle:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

.sound-toggle.muted {
    color: #ef4444;
}

.sound-toggle.muted::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 25px;
    background: #ef4444;
    transform: rotate(45deg);
}

/* ============================================
   DICE PANEL CONTAINER
   ============================================ */

.dice-panel {
    position: relative;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.1) 0%, rgba(6, 182, 212, 0.1) 100%);
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 20px;
}

/* ============================================
   BET INPUT ROW - ALIGNED LAYOUT
   ============================================ */

.bet-input-row {
    display: flex;
    align-items: flex-end;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.bet-input-row .bet-amount-group {
    flex: 1;
    min-width: 150px;
    max-width: 200px;
}

.bet-input-row .btn-roll {
    height: 46px;
    padding: 0 30px;
    margin-bottom: 0;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
    .dice-scene {
        width: 120px;
        height: 120px;
    }
    
    .dice-face {
        width: 120px;
        height: 120px;
    }
    
    .dice-face-1 { transform: rotateY(0deg) translateZ(60px); }
    .dice-face-6 { transform: rotateY(180deg) translateZ(60px); }
    .dice-face-3 { transform: rotateY(90deg) translateZ(60px); }
    .dice-face-4 { transform: rotateY(-90deg) translateZ(60px); }
    .dice-face-2 { transform: rotateX(90deg) translateZ(60px); }
    .dice-face-5 { transform: rotateX(-90deg) translateZ(60px); }
    
    .dice-dot {
        width: 16px;
        height: 16px;
    }
}