Quiz Interativo com Pontuação

Nível: Avançado
Conceitos: Arrays multidimensionais, sessões, randomização, lógica condicional complexa

Estrutura de Arquivos

/quiz/
├── index.php         ← Tela inicial (embaralha opções)
├── quiz.php          ← Exibe perguntas
├── resultado.php     ← Mostra resultado detalhado
├── perguntas.php     ← Banco de perguntas
└── style.css         ← Este arquivo completos

3.1 Arquivo perguntas.php (Banco de Perguntas)

<?php
// perguntas.php - Banco de perguntas do quiz

return [
    [
        'pergunta' => 'Qual é a capital do Brasil?',
        'opcoes' => ['São Paulo', 'Rio de Janeiro', 'Brasília', 'Salvador'],
        'correta' => 2,
        'categoria' => 'Geografia'
    ],
    [
        'pergunta' => 'Quanto é 7 x 8?',
        'opcoes' => ['54', '56', '48', '64'],
        'correta' => 1,
        'categoria' => 'Matemática'
    ],
    [
        'pergunta' => 'Quem escreveu "Dom Casmurro"?',
        'opcoes' => ['José de Alencar', 'Machado de Assis', 'Carlos Drummond', 'Graciliano Ramos'],
        'correta' => 1,
        'categoria' => 'Literatura'
    ],
    [
        'pergunta' => 'Qual é o maior planeta do Sistema Solar?',
        'opcoes' => ['Terra', 'Saturno', 'Júpiter', 'Netuno'],
        'correta' => 2,
        'categoria' => 'Astronomia'
    ],
    [
        'pergunta' => 'Em que ano o Brasil foi descoberto?',
        'opcoes' => ['1492', '1500', '1510', '1498'],
        'correta' => 1,
        'categoria' => 'História'
    ],
    [
        'pergunta' => 'Qual é o símbolo químico do ouro?',
        'opcoes' => ['Ag', 'Au', 'Fe', 'Cu'],
        'correta' => 1,
        'categoria' => 'Química'
    ],
    [
        'pergunta' => 'Qual linguagem é conhecida como a "linguagem da web"?',
        'opcoes' => ['Python', 'JavaScript', 'Java', 'C++'],
        'correta' => 1,
        'categoria' => 'Programação'
    ],
    [
        'pergunta' => 'Quantos estados tem o Brasil?',
        'opcoes' => ['25', '26', '27', '28'],
        'correta' => 1,
        'categoria' => 'Geografia'
    ],
    [
        'pergunta' => 'Quem pintou a Mona Lisa?',
        'opcoes' => ['Van Gogh', 'Pablo Picasso', 'Leonardo da Vinci', 'Michelangelo'],
        'correta' => 2,
        'categoria' => 'Arte'
    ],
    [
        'pergunta' => 'Qual é o menor número primo?',
        'opcoes' => ['0', '1', '2', '3'],
        'correta' => 2,
        'categoria' => 'Matemática'
    ],
];

Arquivo index.php

<?php
// index.php - Página inicial do Quiz (CORRIGIDO)

session_start();
session_destroy();
session_start();

// Carrega as perguntas
$perguntas = require 'perguntas.php';

// Embaralha a ordem das perguntas
shuffle($perguntas);
$perguntas_selecionadas = array_slice($perguntas, 0, 5);

// ✅ CORREÇÃO: Embaralha as opções de cada pergunta AGORA,
// e salva o índice correto JÁ EMBARALHADO
foreach ($perguntas_selecionadas as &$p) {
    // Guarda o texto da resposta correta antes de embaralhar
    $texto_correto = $p['opcoes'][$p['correta']];

    // Embaralha as opções
    shuffle($p['opcoes']);

    // Descobre o novo índice da resposta correta após o shuffle
    $p['correta'] = array_search($texto_correto, $p['opcoes']);
}
unset($p); // Boa prática: remove a referência

// Salva na sessão
$_SESSION['quiz'] = [
    'perguntas' => $perguntas_selecionadas,
    'respostas' => [],
    'indice' => 0,
    'inicio' => time(),
];

$tempo_total = count($perguntas_selecionadas) * 30;
?>
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Quiz Interativo</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="start-screen">
            <div class="start-icon">🎯</div>
            <h1>Quiz Interativo</h1>
            <p class="subtitle">Teste seus conhecimentos em diversas áreas!</p>

            <div class="info-grid">
                <div class="info-card">
                    <span class="info-icon">❓</span>
                    <div class="info-value"><?php echo count($perguntas_selecionadas); ?></div>
                    <div class="info-label">Perguntas</div>
                </div>
                <div class="info-card">
                    <span class="info-icon">⏱️</span>
                    <div class="info-value"><?php echo $tempo_total; ?>s</div>
                    <div class="info-label">Tempo Estimado</div>
                </div>
                <div class="info-card">
                    <span class="info-icon">🎓</span>
                    <div class="info-value">6</div>
                    <div class="info-label">Categorias</div>
                </div>
            </div>

            <div class="regras">
                <h3>📋 Como Funciona</h3>
                <ul>
                    <li>✅ Você responderá <strong>5 perguntas</strong> de múltipla escolha</li>
                    <li>✅ Cada pergunta tem <strong>apenas 1 resposta correta</strong></li>
                    <li>✅ Você verá o resultado final com sua pontuação</li>
                    <li>✅ As perguntas são sorteadas aleatoriamente</li>
                </ul>
            </div>

            <a href="quiz.php" class="btn-start">🚀 Começar Quiz</a>
        </div>
    </div>
</body>
</html>

Arquivo quiz.php

<?php
// quiz.php - Exibe as perguntas (CORRIGIDO)

session_start();

if (!isset($_SESSION['quiz'])) {
    header('Location: index.php');
    exit;
}

$quiz = &$_SESSION['quiz'];
$indice = $quiz['indice'];
$total = count($quiz['perguntas']);

if ($indice >= $total) {
    header('Location: resultado.php');
    exit;
}

$pergunta_atual = $quiz['perguntas'][$indice];

// Processa a resposta
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $resposta = isset($_POST['resposta']) ? intval($_POST['resposta']) : -1;

    // ✅ CORREÇÃO: Compara com o índice JÁ CORRIGIDO da pergunta
    $acertou = ($resposta === $pergunta_atual['correta']);

    // Salva a resposta com todos os dados necessários
    $quiz['respostas'][] = [
        'pergunta'         => $pergunta_atual['pergunta'],
        'opcoes'           => $pergunta_atual['opcoes'], // salva as opções embaralhadas
        'resposta_usuario' => $resposta,
        'resposta_correta' => $pergunta_atual['correta'],
        'acertou'          => $acertou,
    ];

    $quiz['indice']++;
    header('Location: quiz.php');
    exit;
}

$progresso = ($indice / $total) * 100;
$numero_pergunta = $indice + 1;
?>
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Quiz - Pergunta <?php echo $numero_pergunta; ?></title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="progress-container">
            <div class="progress-info">
                <span>Pergunta <?php echo $numero_pergunta; ?> de <?php echo $total; ?></span>
                <span><?php echo round($progresso); ?>%</span>
            </div>
            <div class="progress-bar">
                <div class="progress-fill" style="width: <?php echo $progresso; ?>%"></div>
            </div>
        </div>

        <div class="categoria-badge">
            📚 <?php echo $pergunta_atual['categoria']; ?>
        </div>

        <div class="pergunta-card">
            <h2><?php echo htmlspecialchars($pergunta_atual['pergunta']); ?></h2>

            <form method="POST" action="" id="form-quiz">
                <div class="opcoes">
                    <?php foreach ($pergunta_atual['opcoes'] as $i => $opcao): ?>
                        <label class="opcao">
                            <input type="radio" name="resposta" value="<?php echo $i; ?>" required>
                            <span class="opcao-letra"><?php echo chr(65 + $i); ?></span>
                            <span class="opcao-texto"><?php echo htmlspecialchars($opcao); ?></span>
                        </label>
                    <?php endforeach; ?>
                </div>

                <button type="submit" class="btn-proxima">Próxima ➡️</button>
            </form>
        </div>
    </div>

    <script>
        document.querySelectorAll('.opcao').forEach(function(label) {
            label.addEventListener('click', function() {
                document.querySelectorAll('.opcao').forEach(function(l) {
                    l.classList.remove('selecionada');
                });
                this.classList.add('selecionada');
            });
        });
    </script>
</body>
</html>

Arquivo resultado.php

<?php
// resultado.php - Resultado final do quiz com detalhes precisos

session_start();

if (!isset($_SESSION['quiz'])) {
    header('Location: index.php');
    exit;
}

$quiz = $_SESSION['quiz'];
$respostas = $quiz['respostas'];

// Calcula pontuação
$acertos = 0;
foreach ($respostas as $r) {
    if ($r['acertou']) $acertos++;
}

$total = count($respostas);
$percentual = $total > 0 ? ($acertos / $total) * 100 : 0;

// Classificação final
if ($percentual >= 80) {
    $nivel = 'Excelente! 🏆';
    $cor = '#10b981';
    $mensagem = 'Você é um expert no assunto! Continue assim!';
} elseif ($percentual >= 60) {
    $nivel = 'Muito Bom! 🎉';
    $cor = '#3b82f6';
    $mensagem = 'Bom desempenho! Estude mais um pouco para ser perfeito!';
} elseif ($percentual >= 40) {
    $nivel = 'Bom! 👍';
    $cor = '#f59e0b';
    $mensagem = 'Você está no caminho certo. Continue praticando!';
} else {
    $nivel = 'Precisa Melhorar 📚';
    $cor = '#ef4444';
    $mensagem = 'Não desanime! Estude mais e tente novamente.';
}

// Tempo gasto
$tempo_gasto = time() - $quiz['inicio'];
$minutos = floor($tempo_gasto / 60);
$segundos = $tempo_gasto % 60;
?>
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <title>Resultado do Quiz</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <!-- Cabeçalho com resultado -->
        <div class="resultado-header" style="background: <?php echo $cor; ?>">
            <div class="trofeu">
                <?php echo $percentual >= 60 ? '🏆' : '📚'; ?>
            </div>
            <h1><?php echo $nivel; ?></h1>
            <p><?php echo $mensagem; ?></p>
        </div>

        <!-- Placar -->
        <div class="placar">
            <div class="placar-item">
                <div class="placar-numero"><?php echo $acertos; ?>/<?php echo $total; ?></div>
                <div class="placar-label">Acertos</div>
            </div>
            <div class="placar-item">
                <div class="placar-numero"><?php echo round($percentual); ?>%</div>
                <div class="placar-label">Aproveitamento</div>
            </div>
            <div class="placar-item">
                <div class="placar-numero"><?php echo $minutos; ?>m <?php echo $segundos; ?>s</div>
                <div class="placar-label">Tempo</div>
            </div>
        </div>

        <!-- Detalhes das respostas -->
        <h2 class="titulo-detalhes">📋 Detalhes das Respostas</h2>

        <div class="detalhes-lista">
            <?php foreach ($respostas as $i => $r): 
                // Dados da resposta atual
                $opcoes          = $r['opcoes'];
                $idx_usuario     = $r['resposta_usuario'];
                $idx_correta     = $r['resposta_correta'];
                $acertou         = $r['acertou'];
                $nao_respondida  = ($idx_usuario === -1 || $idx_usuario === null);
            ?>
                <div class="detalhe-item <?php echo $acertou ? 'correta' : 'errada'; ?>">
                    <!-- Número da questão -->
                    <div class="detalhe-numero"><?php echo $i + 1; ?></div>

                    <div class="detalhe-conteudo">
                        <!-- Pergunta -->
                        <div class="detalhe-pergunta">
                            <?php echo htmlspecialchars($r['pergunta']); ?>
                        </div>

                        <!-- Status geral -->
                        <div class="detalhe-status">
                            <?php if ($acertou): ?>
                                <span class="status-badge status-correto">✅ Você acertou!</span>
                            <?php elseif ($nao_respondida): ?>
                                <span class="status-badge status-branco">⚪ Não respondida</span>
                            <?php else: ?>
                                <span class="status-badge status-errado">❌ Você errou</span>
                            <?php endif; ?>
                        </div>

                        <!-- Lista de todas as opções com destaque -->
                        <div class="detalhe-opcoes">
                            <?php foreach ($opcoes as $j => $opcao): 
                                // Define a classe CSS de cada opção
                                $classe_opcao = 'opcao-resultado';
                                $icone        = '○';
                                $observacao   = '';

                                if ($j === $idx_correta && $j === $idx_usuario) {
                                    // Usuário escolheu a correta
                                    $classe_opcao .= ' opcao-correta-escolhida';
                                    $icone        = '✅';
                                    $observacao   = 'Resposta correta — sua escolha';
                                } elseif ($j === $idx_correta) {
                                    // É a correta, mas não foi escolhida
                                    $classe_opcao .= ' opcao-correta';
                                    $icone        = '✅';
                                    $observacao   = 'Resposta correta';
                                } elseif ($j === $idx_usuario) {
                                    // Usuário escolheu a errada
                                    $classe_opcao .= ' opcao-errada-escolhida';
                                    $icone        = '❌';
                                    $observacao   = 'Sua escolha (incorreta)';
                                } else {
                                    // Opção não escolhida
                                    $classe_opcao .= ' opcao-neutra';
                                    $icone        = '○';
                                }
                            ?>
                                <div class="<?php echo $classe_opcao; ?>">
                                    <span class="opcao-icone"><?php echo $icone; ?></span>
                                    <span class="opcao-letra"><?php echo chr(65 + $j); ?>)</span>
                                    <span class="opcao-texto-resultado">
                                        <?php echo htmlspecialchars($opcao); ?>
                                    </span>
                                    <?php if ($observacao): ?>
                                        <span class="opcao-observacao"><?php echo $observacao; ?></span>
                                    <?php endif; ?>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>

        <!-- Ações finais -->
        <div class="acoes-finais">
            <a href="index.php" class="btn-novo-quiz">🔄 Jogar Novamente</a>
        </div>
    </div>
</body>
</html>

Arquivo style.css

/* ==========================================================
   style.css - Quiz Interativo
   Arquivo completo: início, quiz, resultado e detalhes
   ========================================================== */

/* ==========================================================
   1. VARIÁVEIS E RESET
   ========================================================== */
:root {
    --primary: #8b5cf6;
    --primary-dark: #7c3aed;
    --gradient: linear-gradient(135deg, #8b5cf6, #6366f1);
    --success: #10b981;
    --danger: #ef4444;
    --warning: #f59e0b;
    --dark: #1f2937;
    --gray: #6b7280;
    --light-gray: #e5e7eb;
    --bg: #f9fafb;
    --white: #ffffff;
    --radius: 16px;
    --transition: all 0.3s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', system-ui, sans-serif;
    background: var(--bg);
    min-height: 100vh;
    padding: 20px;
    background-image: radial-gradient(
        circle at 30% 30%,
        rgba(139, 92, 246, 0.08),
        transparent 50%
    );
}

.container {
    max-width: 800px;
    margin: 0 auto;
    background: var(--white);
    border-radius: var(--radius);
    padding: 40px;
    box-shadow: 0 15px 40px rgba(139, 92, 246, 0.15);
}

/* ==========================================================
   2. TELA INICIAL (index.php)
   ========================================================== */
.start-screen {
    text-align: center;
}

.start-icon {
    font-size: 5rem;
    margin-bottom: 20px;
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

h1 {
    font-size: 2rem;
    color: var(--dark);
    margin-bottom: 10px;
}

.subtitle {
    color: var(--gray);
    margin-bottom: 30px;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 30px;
}

.info-card {
    background: var(--bg);
    padding: 20px;
    border-radius: 12px;
    text-align: center;
}

.info-icon {
    font-size: 1.8rem;
    display: block;
    margin-bottom: 8px;
}

.info-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary);
}

.info-label {
    font-size: 0.8rem;
    color: var(--gray);
}

.regras {
    background: var(--bg);
    padding: 25px;
    border-radius: 12px;
    text-align: left;
    margin-bottom: 25px;
}

.regras h3 {
    color: var(--dark);
    margin-bottom: 15px;
}

.regras ul {
    list-style: none;
}

.regras li {
    padding: 8px 0;
    color: var(--gray);
}

.btn-start {
    display: inline-block;
    padding: 16px 50px;
    background: var(--gradient);
    color: white;
    text-decoration: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    transition: var(--transition);
}

.btn-start:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(139, 92, 246, 0.4);
}

/* ==========================================================
   3. TELA DO QUIZ (quiz.php)
   ========================================================== */
.progress-container {
    margin-bottom: 25px;
}

.progress-info {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: var(--gray);
    margin-bottom: 8px;
    font-weight: 500;
}

.progress-bar {
    height: 10px;
    background: var(--light-gray);
    border-radius: 10px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--gradient);
    border-radius: 10px;
    transition: width 0.5s ease;
}

.categoria-badge {
    display: inline-block;
    background: rgba(139, 92, 246, 0.1);
    color: var(--primary);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 20px;
}

.pergunta-card h2 {
    font-size: 1.4rem;
    color: var(--dark);
    margin-bottom: 25px;
    line-height: 1.4;
}

.opcoes {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 25px;
}

.opcao {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 16px 20px;
    background: var(--bg);
    border: 2px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: var(--transition);
}

.opcao:hover {
    background: rgba(139, 92, 246, 0.08);
    transform: translateX(5px);
}

.opcao input {
    display: none;
}

.opcao.selecionada,
.opcao:has(input:checked) {
    background: rgba(139, 92, 246, 0.1);
    border-color: var(--primary);
    transform: translateX(5px);
}

.opcao-letra {
    width: 36px;
    height: 36px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--primary);
    flex-shrink: 0;
}

.opcao.selecionada .opcao-letra,
.opcao:has(input:checked) .opcao-letra {
    background: var(--primary);
    color: white;
}

.opcao-texto {
    font-size: 1rem;
    color: var(--dark);
    font-weight: 500;
}

.btn-proxima {
    width: 100%;
    padding: 16px;
    background: var(--gradient);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.btn-proxima:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(139, 92, 246, 0.4);
}

/* ==========================================================
   4. TELA DE RESULTADO (resultado.php)
   ========================================================== */
.resultado-header {
    text-align: center;
    padding: 35px 20px;
    border-radius: var(--radius);
    color: white;
    margin-bottom: 25px;
}

.trofeu {
    font-size: 4rem;
    margin-bottom: 15px;
}

.resultado-header h1 {
    color: white;
    margin-bottom: 10px;
}

.resultado-header p {
    opacity: 0.95;
}

.placar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 30px;
}

.placar-item {
    text-align: center;
    padding: 20px;
    background: var(--bg);
    border-radius: 12px;
}

.placar-numero {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 5px;
}

.placar-label {
    color: var(--gray);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.titulo-detalhes {
    color: var(--dark);
    margin-bottom: 15px;
    font-size: 1.2rem;
}

/* Lista de detalhes das respostas */
.detalhes-lista {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 25px;
}

.detalhe-item {
    display: flex;
    gap: 15px;
    padding: 18px;
    border-radius: 12px;
    border-left: 4px solid;
}

.detalhe-item.correta {
    background: #ecfdf5;
    border-color: var(--success);
}

.detalhe-item.errada {
    background: #fef2f2;
    border-color: var(--danger);
}

.detalhe-numero {
    width: 32px;
    height: 32px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
}

.detalhe-pergunta {
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 8px;
}

.detalhe-resposta {
    font-size: 0.9rem;
    color: var(--gray);
    line-height: 1.6;
}

/* Ações finais */
.acoes-finais {
    text-align: center;
}

.btn-novo-quiz {
    display: inline-block;
    padding: 14px 40px;
    background: var(--gradient);
    color: white;
    text-decoration: none;
    border-radius: 12px;
    font-weight: 600;
    transition: var(--transition);
}

.btn-novo-quiz:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(139, 92, 246, 0.4);
}

/* ==========================================================
   5. DETALHES DA RESPOSTA (resultado.php melhorado)
   ========================================================== */

.detalhe-conteudo {
    flex: 1;
    min-width: 0;
}

.detalhe-status {
    margin: 8px 0 12px;
}

.status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.status-correto {
    background: #d1fae5;
    color: #065f46;
}

.status-errado {
    background: #fee2e2;
    color: #991b1b;
}

.status-branco {
    background: #e5e7eb;
    color: #374151;
}

/* Lista de opções do resultado */
.detalhe-opcoes {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}

.opcao-resultado {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.9rem;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    background: rgba(255, 255, 255, 0.6);
}

.opcao-icone {
    font-size: 0.95rem;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.opcao-letra {
    font-weight: 700;
    color: var(--gray);
    flex-shrink: 0;
}

.opcao-texto-resultado {
    flex: 1;
    color: var(--dark);
}

.opcao-observacao {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.05);
    white-space: nowrap;
}

/* ✅ Correta e escolhida pelo usuário */
.opcao-correta-escolhida {
    background: #d1fae5;
    border-color: #10b981;
}

.opcao-correta-escolhida .opcao-letra,
.opcao-correta-escolhida .opcao-texto-resultado {
    color: #065f46;
    font-weight: 600;
}

.opcao-correta-escolhida .opcao-observacao {
    background: #10b981;
    color: white;
}

/* ✅ Correta, mas NÃO escolhida */
.opcao-correta {
    background: #ecfdf5;
    border-color: #6ee7b7;
    border-style: dashed;
}

.opcao-correta .opcao-letra,
.opcao-correta .opcao-texto-resultado {
    color: #065f46;
    font-weight: 600;
}

.opcao-correta .opcao-observacao {
    background: #6ee7b7;
    color: #065f46;
}

/* ❌ Escolhida errada */
.opcao-errada-escolhida {
    background: #fee2e2;
    border-color: #ef4444;
}

.opcao-errada-escolhida .opcao-letra,
.opcao-errada-escolhida .opcao-texto-resultado {
    color: #991b1b;
    font-weight: 600;
    text-decoration: line-through;
    text-decoration-color: rgba(153, 27, 27, 0.4);
}

.opcao-errada-escolhida .opcao-observacao {
    background: #ef4444;
    color: white;
}

/* ○ Neutra (não escolhida e não correta) */
.opcao-neutra {
    opacity: 0.6;
}

/* ==========================================================
   6. RESUMO POR CATEGORIA (BÔNUS OPCIONAL)
   ========================================================== */
.resumo-categorias {
    margin: 25px 0;
}

.resumo-categorias h3 {
    color: var(--dark);
    margin-bottom: 15px;
}

.categorias-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.categoria-item {
    display: grid;
    grid-template-columns: 120px 1fr 60px;
    align-items: center;
    gap: 12px;
    padding: 10px 15px;
    background: var(--bg);
    border-radius: 10px;
}

.categoria-nome {
    font-weight: 600;
    color: var(--dark);
    font-size: 0.9rem;
}

.categoria-barra {
    height: 8px;
    background: var(--light-gray);
    border-radius: 10px;
    overflow: hidden;
}

.categoria-preenchimento {
    height: 100%;
    border-radius: 10px;
    transition: width 0.5s ease;
}

.categoria-numeros {
    text-align: right;
    font-weight: 700;
    color: var(--gray);
    font-size: 0.9rem;
}

/* ==========================================================
   7. RESPONSIVIDADE
   ========================================================== */
@media (max-width: 600px) {
    .container {
        padding: 20px;
    }

    h1 {
        font-size: 1.5rem;
    }

    .info-grid {
        grid-template-columns: 1fr;
    }

    .placar {
        grid-template-columns: 1fr;
    }

    .pergunta-card h2 {
        font-size: 1.1rem;
    }

    .opcao {
        padding: 12px 15px;
    }

    .opcao-observacao {
        display: none;
    }

    .opcao-resultado {
        font-size: 0.85rem;
        padding: 6px 10px;
    }

    .categoria-item {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .categoria-numeros {
        text-align: left;
    }
}

@media (max-width: 400px) {
    .container {
        padding: 15px;
    }

    .start-icon {
        font-size: 3.5rem;
    }

    .trofeu {
        font-size: 3rem;
    }

    .btn-start,
    .btn-novo-quiz {
        width: 100%;
        padding: 14px 20px;
    }
}