body {
    font-family: 'Poppins', sans-serif;
    background-color: #2C3E50; /* Azul escuro ardósia */
    color: #ECF0F1; /* Quase branco */
    margin: 0;
    padding: 0; /* Removido padding do body */
    display: flex;
    flex-direction: column; /* Para as linhas de acento no topo */
    align-items: center;
    min-height: 100vh;
}

#top-accent-lines {
    width: 100%;
    display: flex;
    height: 6px; /* Altura das linhas de acento */
}

.accent-line {
    flex-grow: 1;
}

.accent-green { background-color: #2ECC71; } /* Verde Brasil */
.accent-yellow { background-color: #F1C40F; } /* Amarelo Brasil */
.accent-blue-usa { background-color: #3498DB; } /* Azul EUA (aproximado) */
/* Adicione mais linhas para as cores da bandeira dos EUA se desejar mais detalhes */


#app-container {
    background-color: #2C3E50; /* Mantém o fundo principal aqui */
    padding: 20px 30px; /* Aumentado padding lateral */
    border-radius: 0; /* Sem borda arredondada para o container principal */
    box-shadow: none; /* Sem sombra para o container principal */
    width: 100%;
    max-width: 900px; /* Aumentado para melhor acomodar o grid */
    box-sizing: border-box;
    text-align: center;
}

header {
    margin-bottom: 40px;
}

.flags {
    font-size: 2.5em; /* Tamanho das bandeiras */
    margin-bottom: 10px;
}

.flag-icon {
    margin: 0 10px;
}

header h1 {
    color: #FFFFFF; /* Branco */
    font-size: 2.2em; /* Aumentado */
    font-weight: 700;
    margin-bottom: 5px;
}

.subtitle {
    color: #BDC3C7; /* Cinza claro */
    font-size: 1em;
    margin-bottom: 30px;
}

section {
    margin-bottom: 30px;
    text-align: left;
}

section h2 {
    color: #FFFFFF; /* Branco */
    font-size: 1.3em;
    font-weight: 600;
    margin-bottom: 15px;
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Grid responsivo */
    gap: 20px;
}

.category-card {
    background-color: #FFFFFF;
    color: #2C3E50; /* Cor do texto interno dos cards */
    border-radius: 12px; /* Aumentado arredondamento */
    padding: 20px;
    text-align: left;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    cursor: pointer;
    border: 2px solid transparent; /* Borda para estado selecionado */
    transition: all 0.3s ease;
    display: flex; /* Para alinhar ícone e conteúdo */
    align-items: center; /* Alinha verticalmente ícone e conteúdo */
}

.category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.category-card.selected {
    border-color: #3498DB; /* Azul para selecionado */
    background-color: #EBF5FB; /* Fundo levemente azulado */
}

.card-icon {
    font-size: 2.5em; /* Tamanho do ícone unicode */
    margin-right: 15px;
    color: #3498DB; /* Cor do ícone */
}

.card-content h3 {
    font-size: 1.1em;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 5px;
    color: #34495E; /* Azul escuro para título */
}

.card-content p {
    font-size: 0.85em;
    color: #7F8C8D; /* Cinza para descrição */
    margin-bottom: 0;
    line-height: 1.4;
}


.selection-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap; /* Para quebrar em telas menores */
}

.selection-buttons button {
    flex-grow: 1; /* Para ocupar espaço disponível */
    padding: 12px 15px; /* Aumentado padding */
    border-radius: 25px; /* Botões tipo pílula */
    border: 1px solid #7F8C8D; /* Borda cinza */
    background-color: #FFFFFF;
    color: #34495E; /* Texto escuro */
    cursor: pointer;
    font-size: 0.95em;
    font-weight: 600;
    transition: all 0.3s ease;
}

.selection-buttons button:hover {
    background-color: #f0f0f0;
}

.selection-buttons button.selected {
    color: #FFFFFF; /* Texto branco para selecionado */
    border-color: transparent; /* Remove borda para cor de fundo se destacar */
}

.difficulty-button[data-difficulty="Fácil"].selected { background-color: #2ECC71; } /* Verde */
.difficulty-button[data-difficulty="Médio"].selected { background-color: #F1C40F; } /* Amarelo */
.difficulty-button[data-difficulty="Difícil"].selected { background-color: #E74C3C; } /* Vermelho */

.mode-button[data-mode="Normal"].selected { background-color: #5DADE2; } /* Azul claro */
.mode-button[data-mode="Contra o Tempo"].selected { background-color: #AF7AC5; } /* Roxo claro */


#start-quiz-button {
    background-color: #3498DB; /* Azul principal */
    color: white;
    padding: 15px 30px; /* Botão maior */
    font-size: 1.1em;
    font-weight: 600;
    border: none;
    border-radius: 8px; /* Menos arredondado que pílulas */
    cursor: pointer;
    display: block; /* Para ocupar largura e centralizar (com margin auto) */
    width: auto; /* Ajusta à largura do conteúdo */
    min-width: 200px;
    margin: 40px auto 0 auto; /* Centraliza e adiciona margem no topo */
    transition: background-color 0.3s ease;
}

#start-quiz-button:hover {
    background-color: #2980B9; /* Azul mais escuro */
}

.hidden {
    display: none !important;
}

/* Estilos para quiz-screen e results-screen (manter básicos por enquanto) */
#quiz-screen, #results-screen {
    background-color: #FFFFFF; /* Fundo branco para contraste */
    color: #2C3E50; /* Texto escuro */
    padding: 20px;
    border-radius: 8px;
    margin-top: 20px;
    text-align: left;
}

#quiz-header {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #BDC3C7; /* Cinza claro para divisor */
}
#quiz-header p { margin: 5px 10px 5px 0; font-size: 0.9em;}
#score { font-weight: bold; color: #27AE60; /* Verde para pontuação */}
#timer-display { font-weight: bold; color: #E74C3C; /* Vermelho para timer */}


#question-container { margin-bottom: 20px; }
#question-number { font-size: 0.9em; color: #7F8C8D; margin-bottom: 5px;}
#question-text { font-size: 1.2em; font-weight: 600; margin-bottom: 20px; }

#options-container button {
    display: block;
    width: 100%;
    background-color: #ECF0F1; /* Fundo cinza claro */
    color: #34495E; /* Texto azul escuro */
    text-align: left;
    margin-bottom: 10px;
    padding: 15px; /* Padding maior */
    border: 1px solid #BDC3C7; /* Borda cinza */
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}
#options-container button:hover { background-color: #D5DBDB; }
#options-container button.correct { background-color: #2ECC71 !important; color: white !important; border-color: #2ECC71 !important;}
#options-container button.incorrect { background-color: #E74C3C !important; color: white !important; border-color: #E74C3C !important;}

#feedback-text { font-weight: bold; margin-top: 15px; font-size: 1em;}
#feedback-text.correct { color: #27AE60; }
#feedback-text.incorrect { color: #E74C3C; }

#next-question-button, #restart-quiz-button {
    background-color: #3498DB;
    color: white;
    padding: 12px 25px;
    font-size: 1em;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 20px;
}
#next-question-button:hover, #restart-quiz-button:hover { background-color: #2980B9; }

#results-screen h2 { color: #2C3E50; text-align: center; margin-bottom: 15px;}
#results-screen p { font-size: 1.1em; text-align: center; margin-bottom: 10px; }
#final-score { color: #27AE60; font-size: 1.5em;}

#explanation-container {
    margin-top: 20px; /* Espaçamento acima da explicação */
    padding: 15px;
    background-color: #e9f5ff; /* Um azul bem clarinho */
    border-left: 5px solid #5DADE2; /* Uma borda azul à esquerda para destaque */
    border-radius: 0 5px 5px 0; /* Arredondamento suave */
}

#explanation-container h4 {
    margin-top: 0;
    margin-bottom: 8px;
    color: #2C3E50; /* Cor do título da explicação */
    font-size: 1em;
    font-weight: 600;
}

#explanation-text {
    font-size: 0.95em;
    line-height: 1.6;
    color: #34495E; /* Cor do texto da explicação */
}