/*
    ================================================
    NOVAS REGRAS PARA BACKGROUND DINÂMICO (SLIDESHOW)
    ================================================
*/

/* 1. Contêiner principal para as imagens e overlay */
body {
    font-family: 'Nunito', sans-serif;
    /* Remover cor de fundo anterior e centralização absoluta */
    background: none;
    
    /* Regras para centralizar o conteúdo do formulário (join-container) */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    
    /* Para posicionar o slideshow cover */
    position: relative;
    /* Garantir que o conteúdo (formulário) fique acima do overlay */
    z-index: 1;
    overflow: hidden; /* Evitar barras de rolagem desnecessárias */
}

/* 2. Camada de Overlay (Cores que mudam) */
.background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Começa com uma cor suave (70% de opacidade) */
    background-color: rgba(50, 100, 150, 0.7); 
    z-index: 0; /* Fica acima da imagem, mas atrás do formulário */
    /* Animação de cor */
    animation: colorChange 15s infinite alternate; /* Mude a cor a cada 15 segundos */
}

/* Definição da animação de mudança de cor */
@keyframes colorChange {
    0% { background-color: rgba(50, 100, 150, 0.7); } /* Azul */
    33% { background-color: rgba(150, 50, 50, 0.7); } /* Vermelho */
    66% { background-color: rgba(50, 150, 50, 0.7); } /* Verde */
    100% { background-color: rgba(150, 50, 150, 0.7); } /* Roxo */
}

/* 3. Slideshow das Imagens de Fundo */
.slideshow {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Fica atrás de tudo (overlay e formulário) */
}

.slideshow img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Garante que a imagem cubra toda a área */
    opacity: 0; /* Começa invisível */
    transition: opacity 2s ease-in-out; /* Transição suave entre as imagens */
    /* Aplica o esmaecimento na imagem, deixando-a mais escura */
    filter: brightness(0.7); 
}

.slideshow img.active {
    opacity: 1; /* Imagem ativa se torna visível */
}

/*
    ================================================
    FIM DAS NOVAS REGRAS
    ================================================
*/


/* --- Estilos da Tela de Entrada (jogar.php) --- */
.join-container {
    /* Ajuste para se destacar no novo fundo */
    position: relative;
    z-index: 2; /* Acima do overlay (z-index: 0) */
    background-color: rgba(255, 255, 255, 0.95); /* Quase branco, suavemente transparente */
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); /* Sombra mais forte */
    width: 100%;
    max-width: 400px;
    text-align: center;
}
.join-logo { max-width: 150px; margin-bottom: 20px; }
.join-container h2 { font-size: 2em; font-weight: 900; color: #333; margin: 0 0 30px 0; }
#join-form { display: flex; flex-direction: column; gap: 20px; }
.input-group { text-align: left; }
.input-group label { display: block; margin-bottom: 8px; font-weight: 700; color: #555; }
.input-group input { width: 100%; padding: 12px 15px; border: 1px solid #ccc; border-radius: 8px; font-size: 1.1em; box-sizing: border-box; text-align: center; }
.input-group input#pin { font-weight: 700; letter-spacing: 5px; }
.input-group input:focus { outline: none; border-color: #24416D; box-shadow: 0 0 0 3px rgba(36, 65, 109, 0.2); }
.btn { width: 100%; padding: 15px; background-color: #4CAF50; color: white; border: none; border-radius: 8px; font-size: 1.2em; font-weight: 700; cursor: pointer; transition: background-color 0.3s; margin-top: 10px; }
.btn:hover:not(:disabled) { background-color: #45a049; }
.btn:disabled { background-color: #aaa; cursor: wait; }
.alert { padding: 15px; margin-top: 20px; border-radius: 8px; border: 1px solid #f5c6cb; color: #721c24; background-color: #f8d7da; font-weight: 700; }

/* --- Estilos da Tela do Jogo (quiz_game.html) --- */
.game-container {
    width: 90%; max-width: 800px; background: #fff; padding: 25px;
    border-radius: 15px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    position: relative; overflow: hidden; display: flex; flex-direction: column;
}
.game-header-info { display: flex; justify-content: space-between; align-items: center; }
#question-counter, #scoreboard { font-weight: 700; font-size: 1.2em; }
#scoreboard { background-color: #ffd700; color: #333; padding: 8px 15px; border-radius: 20px; }
#quiz-title { margin: 0; color: #4CAF50; font-size: 1.5em; text-align: center; }

/* --- Barra de Tempo com Gradiente --- */
#timer { width: 100%; background-color: #e9ecef; border-radius: 5px; margin: 20px 0; overflow: hidden; }
#timer-bar { 
    height: 10px; 
    background: linear-gradient(to left, #28a745, #f39c12, #dc3545);
    background-size: 100% 100%;
    width: 100%;
    transition: width 20s linear; /* A duração é controlada pelo JS */
}

.quiz-area { min-height: 300px; position: relative; display: flex; flex-direction: column; flex-grow: 1; }
/* --- Destaque da Pergunta --- */
#question-text { font-size: 1.8em; font-weight: 900; color: #333; margin-bottom: 35px; min-height: 60px; text-align: center; }

#answer-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: auto; }
.answer-btn { background-color: #eef1f4; border: none; border-radius: 12px; padding: 20px; font-size: 1.3em; min-height: 80px; font-weight: 700; cursor: pointer; text-align: center; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease-in-out; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.answer-btn:hover:not(:disabled) { transform: translateY(-3px); box-shadow: 0 6px 15px rgba(0,0,0,0.1); }

/* --- Ícones de Acerto/Erro --- */
.answer-btn.correct { background-color: #d4edda; color: #155724; }
.answer-btn.wrong { background-color: #f8d7da; color: #721c24; }
.answer-btn.correct::before { content: '✔'; margin-right: 10px; color: #28a745; }
.answer-btn.wrong::before { content: '✖'; margin-right: 10px; color: #dc3545; }
/* Esconde ícones em botões que não foram selecionados mas são a resposta correta */
.answer-btn.correct:not(.selected-wrong) { }
.answer-btn.correct.selected-wrong::before { content: '✔'; } /* Garante que o certo apareça quando erra */


.action-panel { text-align: center; margin-top: 20px; }
#feedback { font-size: 1.3em; font-weight: bold; min-height: 30px; }
#end-screen { text-align: center; padding: 30px 20px; flex-grow: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; }
#final-score { font-size: 7em; font-weight: 900; color: #4CAF50; line-height: 1; }
#final-stats { font-size: 1.3em; color: #6c757d; width: 100%; }
#final-stats #player-name-final { font-weight: 700; color: #333; }
/* --- Estilos do Resumo Detalhado --- */
#final-stats-details {
    margin: 20px 0;
    display: inline-block;
}
#final-stats-details .stat-item {
    font-size: 1.2em;
    margin: 5px 0;
}
#leaderboard { margin-top: 20px; width: 80%; max-width: 500px; }
#leaderboard h3 { color: #333; }
#leaderboard-table { width: 100%; border-collapse: collapse; }
#leaderboard-table th, #leaderboard-table td { padding: 8px; text-align: left; border-bottom: 1px solid #eee;}
#leaderboard-table th { font-weight: 700; }
#leaderboard-table tr:nth-child(odd) { background-color: #f8f9fa; }

.hidden { display: none !important; }
@media (max-width: 575px) { #answer-options { grid-template-columns: 1fr; } }

/* --- Novas Animações --- */
.countdown { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 10em; font-weight: 900; z-index: 10; opacity: 0; }
.pulse-score { animation: pulse 0.5s ease-in-out; }
.shake-error { animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both; }

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.25); }
}
@keyframes shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}
@keyframes zoomAndFade { 0% { opacity: 1; transform: translate(-50%, -50%) scale(0.5); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.2); } }
.animate-zoom-and-fade { animation: zoomAndFade 1s ease-in-out forwards; }
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-in-down { animation: fadeInDown 0.5s ease-out forwards; }
.animate-fade-in-up { opacity: 0; animation: fadeInUp 0.5s ease-out forwards; }