/* =========================================================================
// 1. CORES AJUSTADAS E DESIGN DE PROFUNDIDADE
// ========================================================================= */
/* Definição de Cores Padrão (Tonalidades que combinam com o 3D) */
.W { background-color: white; border-color: #ccc; }
.Y { background-color: #ffd600; border-color: #ccaa00; } /* Amarelo mais vibrante */
.R { background-color: #ff0000; border-color: #cc0000; } /* Vermelho escuro */
.O { background-color: #ff6600; border-color: #cc5200; } /* Laranja */
.G { background-color: #009900; border-color: #007a00; } /* Verde escuro */
.B { background-color: #0000ff; border-color: #0000cc; } /* Azul */


/* Estilo Geral e Centralização do Layout (Mobile First) */
body {
font-family: Arial, sans-serif;
/* Centralização CORRIGIDA para funcionar com a tela */
display: flex;
justify-content: center; /* Centraliza o #game-container na horizontal */
align-items: center; /* Centraliza o #game-container na vertical */
flex-direction: column; /* Faz com que o conteúdo do body fique empilhado e centralizado */

min-height: 90vh;
margin: 0;
padding: 20px 10px;
background-color: #f0f0f0; /* Fundo mais claro */
color: #333;
}

#game-container {
width: 90%;
max-width: 900px; /* Aumenta a largura para o desktop */
display: flex;
flex-direction: column;
align-items: center;
background-color: white; /* Adiciona um fundo para o container principal */
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Sombra do container */
}

h2 {
margin-bottom: 20px;
font-size: 1.5em;
}

/* -------------------- VISUALIZAÇÃO ADJACENTE -------------------- */
#adjacente-view {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 15px; /* Mais espaço entre as mini-faces */
padding: 10px;
margin-bottom: 20px;
width: 100%;
max-width: 900px;
}

.mini-face {
display: grid;
grid-template-columns: repeat(3, 1fr);
width: 80px; /* Tamanho da mini-face */
height: 80px;
border: 1px solid #ddd;
box-sizing: border-box;
position: relative;
text-align: center;
border-radius: 5px; /* Arredondado para combinar */
}

.mini-face p {
position: absolute;
top: -20px;
width: 100%;
font-size: 0.8em;
margin: 0;
color: #555;
font-weight: bold;
}

.mini-piece {
border: 1px solid rgba(0,0,0,0.1); /* Borda suave */
font-size: 0;
border-radius: 10%; /* PEÇAS ARREDONDADAS */
}

/* -------------------- CUBO PRINCIPAL E LAYOUT DE GIRO -------------------- */
#cubo-e-controles {
text-align: center;
margin-bottom: 30px;
width: 100%;
}

#wrapper-giro {
display: flex;
justify-content: center; /* Centraliza a linha de botões e cubo */
align-items: center;
gap: 25px; /* Espaço maior entre os blocos */
margin: 0 auto;
max-width: 700px;
}

#center-column {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}

.face-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
width: 270px; /* Tamanho do cubo principal */
height: 270px;
background-color: #5D5D5D;
border-radius: 10px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); /* SOMBRA DO CUBO */
margin: 5px;
}

.piece {
border: 2px solid #333; /* Borda grossa do grid */
border-radius: 15%; /* PEÇAS ARREDONDADAS COM PROFUNDIDADE */
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.4); /* EFEITO DE PROFUNDIDADE */
display: flex;
justify-content: center;
}

/* Estilos de Botão de Giro */
.giro-btn {
padding: 8px 12px;
font-size: 1em;
cursor: pointer;
border-radius: 6px;
background-color: #4CAF50; /* Verde - para S e S' */
color: white;
border: none;
margin: 2px;
}
.giro-btn:hover { background-color: #45a049; }

.side-control {
display: flex;
flex-direction: column;
gap: 5px;
}

.top-control, .bottom-control {
display: flex;
justify-content: center;
gap: 5px;
}

/* NOVA LINHA DE CONTROLES DE AÇÃO (S, RANDOM, FRENTE, RESET, S') */
#action-controls-row {
display: flex;
justify-content: center;
align-items: center;
gap: 8px; /* Espaço entre os botões */
margin-top: 20px;
}

.action-btn {
padding: 10px 15px;
font-size: 1em;
border-radius: 8px;
border: none;
cursor: pointer;
font-weight: bold;
}

/* Estilo para o botão Embaralhar: RANDOM (Vermelho) */
#scramble-btn {
background-color: #f44336;
color: white;
}

/* NOVO Estilo para o botão FRENTE (Amarelo) */
#front-btn {
background-color: #ffd600; /* Amarelo Vibrante */
color: #333;
}

/* NOVO Estilo para o botão PADRÃO/REFAZER (Azul, Símbolo ↺) */
#reset-btn {
background-color: #007bff; /* Azul */
color: white;
font-size: 1.5em; /* Aumenta o tamanho do símbolo ↺ */
line-height: 1; /* Ajusta o alinhamento vertical do símbolo */
padding: 7px 15px;
}

/* -------------------- CONTROLES DE VISUALIZAÇÃO -------------------- */
#view-controls {
margin-top: 20px;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}

#view-controls button {
padding: 10px 15px;
border-radius: 6px;
background-color: #f44336; /* Vermelho */
color: white;
border: none;
cursor: pointer;
}

/* =========================================================================
// 3. MEDIA QUERIES (RESPONSIVIDADE AJUSTADA)
// ========================================================================= */
@media (max-width: 600px) {
/* Em telas muito pequenas, diminui o cubo e o espaçamento */
.face-grid {
width: 180px;
height: 180px;
}
.mini-face {
width: 50px;
height: 50px;
}
#wrapper-giro {
gap: 15px;
}
/* Ajusta botões de ação para mobile */
.action-btn {
padding: 8px 12px;
font-size: 0.9em;
}
#reset-btn {
font-size: 1.2em;
padding: 6px 10px;
}
}

/* =========================================================================
// 4. ESTILOS DE CONTADOR E AJUSTES FINAIS
// ========================================================================= */
#face-title {
font-size: 1.2em; /* Diminui a fonte do título como solicitado */
margin: 0;
color: #555;
}

/* -------------------- DESTAQUE DA FACE BRANCA (W) -------------------- */
/* Aplicado às peças grandes e pequenas */
.W {
background-color: white;
border-color: #5D5D5D;
position: relative;
}

/* Cria o "círculo" central */
.piece.W::after, .mini-piece.W::after {
content: '';
position: absolute;
width: 60%;
height: 60%;
top: 20%;
left: 20%;
border-radius: 50%;
/* Cria o degradê sutil do vermelho para o laranja */
background: radial-gradient(circle at center, rgba(255, 0, 0, 0.4) 0%, rgba(255, 102, 0, 0.4) 100%);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

/** NOVO ESTILO ADICIONADO AQUI **/
.seta-curva {
font-family: 'Arial', sans-serif;
font-weight: bold;
font-size: 1.1em;
line-height: 1;
display: inline-block;
margin-left: 3px;
vertical-align: middle;
}

/* =========================================================================
// NOVO: OVERLAY DE INICIALIZAÇÃO (BOTÃO PLAY)
// ========================================================================= */
#start-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9); /* Fundo escuro para destacar */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Garante que fique acima de todo o conteúdo */
    flex-direction: column;
}

#start-overlay.hidden {
    display: none;
}

#play-btn {
    padding: 20px 40px;
    font-size: 1.8em;
    font-weight: bold;
    color: white;
    background-color: #4CAF50; /* Verde */
    border: 3px solid white;
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.1s;
}

#play-btn:hover {
    background-color: #45a049;
    transform: scale(1.05);
}