/* Cubo 3D */
.cube-wrapper {
    perspective: 1000px;
    perspective-origin: center center;
    width: 300px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cube {
    position: relative;
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    transform: rotateX(-15deg) rotateY(25deg);
    transition: transform 0.6s ease;
}

/* Faces do Cubo */
.face {
    position: absolute;
    width: 200px;
    height: 200px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 2px;
    padding: 5px;
    border: 2px solid #333;
    box-sizing: border-box;
}

/* Posicionamento das Faces */
.face.front {
    transform: translateZ(100px);
}

.face.back {
    transform: rotateY(180deg) translateZ(100px);
}

.face.top {
    transform: rotateX(90deg) translateZ(100px);
}

.face.bottom {
    transform: rotateX(-90deg) translateZ(100px);
}

.face.right {
    transform: rotateY(90deg) translateZ(100px);
}

.face.left {
    transform: rotateY(-90deg) translateZ(100px);
}

/* Stickers (Adesivos) */
.sticker {
    border-radius: 4px;
    border: 1px solid #222;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.sticker::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 50%, rgba(0,0,0,0.1) 100%);
    pointer-events: none;
}

.sticker:hover {
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* Cores dos Stickers */
/* Branco */
.sticker[data-color="W"] {
    background: #FFFFFF;
}

/* Amarelo */
.sticker[data-color="Y"] {
    background: #FFD700;
}

/* Vermelho */
.sticker[data-color="R"] {
    background: #FF0000;
}

/* Laranja */
.sticker[data-color="O"] {
    background: #FF8C00;
}

/* Verde */
.sticker[data-color="G"] {
    background: #00FF00;
}

/* Azul */
.sticker[data-color="B"] {
    background: #0000FF;
}

/* Estado Inicial (Resolvido) */
/* Face Frontal - Vermelha */
.face.front .sticker {
    background: #FF0000;
}

/* Face Traseira - Laranja */
.face.back .sticker {
    background: #FF8C00;
}

/* Face Superior - Branca */
.face.top .sticker {
    background: #FFFFFF;
}

/* Face Inferior - Amarela */
.face.bottom .sticker {
    background: #FFD700;
}

/* Face Direita - Verde */
.face.right .sticker {
    background: #00FF00;
}

/* Face Esquerda - Azul */
.face.left .sticker {
    background: #0000FF;
}

/* Animações de Rotação das Faces */
.face.rotating {
    animation: faceRotate 0.5s ease-in-out;
}

@keyframes faceRotate {
    0% { transform: rotateZ(0deg); }
    50% { transform: rotateZ(45deg) scale(1.1); }
    100% { transform: rotateZ(90deg); }
}

/* Efeitos de Highlight */
.face.highlight {
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
}

.sticker.highlight {
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.8);
    transform: scale(1.1);
}

/* Estados de Animação */
.cube.scrambling {
    animation: scrambleRotation 2s ease-in-out infinite;
}

@keyframes scrambleRotation {
    0% { transform: rotateX(-15deg) rotateY(25deg); }
    25% { transform: rotateX(15deg) rotateY(115deg); }
    50% { transform: rotateX(-45deg) rotateY(205deg); }
    75% { transform: rotateX(30deg) rotateY(295deg); }
    100% { transform: rotateX(-15deg) rotateY(385deg); }
}

.cube.solving {
    animation: solveRotation 1s ease-in-out;
}

@keyframes solveRotation {
    0% { transform: rotateX(-15deg) rotateY(25deg) scale(1); }
    50% { transform: rotateX(0deg) rotateY(180deg) scale(1.1); }
    100% { transform: rotateX(-15deg) rotateY(360deg) scale(1); }
}

/* Efeito de Cubo Resolvido */
.cube.solved {
    animation: solvedCelebration 2s ease-in-out;
}

@keyframes solvedCelebration {
    0%, 100% { 
        transform: rotateX(-15deg) rotateY(25deg) scale(1);
        filter: brightness(1);
    }
    25% { 
        transform: rotateX(-15deg) rotateY(25deg) scale(1.1);
        filter: brightness(1.2) saturate(1.3);
    }
    50% { 
        transform: rotateX(-15deg) rotateY(25deg) scale(1.05);
        filter: brightness(1.1) saturate(1.2);
    }
    75% { 
        transform: rotateX(-15deg) rotateY(25deg) scale(1.1);
        filter: brightness(1.2) saturate(1.3);
    }
}

/* Responsividade do Cubo */
@media (max-width: 768px) {
    .cube-wrapper {
        width: 250px;
        height: 250px;
    }
    
    .cube {
        width: 150px;
        height: 150px;
    }
    
    .face {
        width: 150px;
        height: 150px;
    }
    
    .face.front,
    .face.back {
        transform: translateZ(75px);
    }
    
    .face.back {
        transform: rotateY(180deg) translateZ(75px);
    }
    
    .face.top {
        transform: rotateX(90deg) translateZ(75px);
    }
    
    .face.bottom {
        transform: rotateX(-90deg) translateZ(75px);
    }
    
    .face.right {
        transform: rotateY(90deg) translateZ(75px);
    }
    
    .face.left {
        transform: rotateY(-90deg) translateZ(75px);
    }
}

@media (max-width: 480px) {
    .cube-wrapper {
        width: 200px;
        height: 200px;
    }
    
    .cube {
        width: 120px;
        height: 120px;
    }
    
    .face {
        width: 120px;
        height: 120px;
        gap: 1px;
        padding: 3px;
    }
    
    .face.front,
    .face.back {
        transform: translateZ(60px);
    }
    
    .face.back {
        transform: rotateY(180deg) translateZ(60px);
    }
    
    .face.top {
        transform: rotateX(90deg) translateZ(60px);
    }
    
    .face.bottom {
        transform: rotateX(-90deg) translateZ(60px);
    }
    
    .face.right {
        transform: rotateY(90deg) translateZ(60px);
    }
    
    .face.left {
        transform: rotateY(-90deg) translateZ(60px);
    }
}