<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Defensores do Bioma - Quiz RPG</title>
    <style>
        :root {
            --bg-dark: #0f172a;
            --panel-bg: #1e293b;
            --accent-green: #10b981;
            --accent-blue: #3b82f6;
            --accent-red: #ef4444;
            --text-main: #f8fafc;
        }

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

        body {
            font-family: 'Segoe UI', system-ui, sans-serif;
            background-color: var(--bg-dark);
            color: var(--text-main);
            padding: 15px;
            display: flex;
            flex-direction: column;
            align-items: center;
            min-height: 100vh;
        }

        .container {
            width: 100%;
            max-width: 600px;
            background: var(--panel-bg);
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.4);
            margin-top: 10px;
        }

        .screen {
            display: none;
        }

        .screen.active {
            display: block;
        }

        h1, h2, h3 {
            text-align: center;
            margin-bottom: 15px;
            color: #f59e0b;
        }

        p {
            margin-bottom: 15px;
            line-height: 1.5;
            font-size: 1rem;
        }

        /* Seleção de Personagens e Temas */
        .grid-select {
            display: grid;
            grid-template-columns: 1fr;
            gap: 15px;
            margin-top: 15px;
        }

        .card-option {
            background: #334155;
            border: 2px solid transparent;
            border-radius: 8px;
            padding: 15px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .card-option:hover {
            border-color: #f59e0b;
            background: #475569;
        }

        .card-option h3 {
            text-align: left;
            color: #fff;
            margin-bottom: 5px;
        }

        .skill-badge {
            font-size: 0.8rem;
            background: var(--accent-blue);
            padding: 2px 6px;
            border-radius: 4px;
            display: inline-block;
            margin-top: 5px;
        }

        /* Interface do Jogo */
        .hud {
            display: flex;
            justify-content: space-between;
            background: #0f172a;
            padding: 10px;
            border-radius: 8px;
            margin-bottom: 20px;
            font-size: 0.9rem;
        }

        .status-bar {
            font-weight: bold;
        }

        .question-text {
            font-size: 1.1rem;
            font-weight: bold;
            background: #334155;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
        }

        .options-list {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .btn-opt {
            background: #475569;
            color: white;
            border: none;
            padding: 12px 15px;
            border-radius: 6px;
            cursor: pointer;
            text-align: left;
            font-size: 0.95rem;
            transition: background 0.2s;
        }

        .btn-opt:hover {
            background: #64748b;
        }

        /* Botões Gerais */
        .btn-prime {
            display: block;
            width: 100%;
            background: var(--accent-green);
            color: white;
            border: none;
            padding: 12px;
            border-radius: 6px;
            font-size: 1rem;
            font-weight: bold;
            cursor: pointer;
            margin-top: 15px;
            text-align: center;
        }

        .feedback {
            padding: 10px;
            border-radius: 6px;
            margin-top: 15px;
            text-align: center;
            font-weight: bold;
            display: none;
        }
    </style>
</head>
<body>

    <div class="container">
        <!-- TELA 1: INTRODUÇÃO E PERSONAGEM -->
        <div id="screen-char" class="screen active">
            <h1>Defensores do Bioma</h1>
            <p>O avanço do antropocentrismo ameaça o equilíbrio do planeta. Escolha o seu herói para enfrentar a crise climática com o poder do conhecimento!</p>
            <h3>Escolha seu Personagem:</h3>
            <div class="grid-select">
                <div class="card-option" onclick="selectCharacter('Gaia', 'Proteção (Sobrevive a 1 erro sem perder energia)')">
                    <h3>🌱 Gaia (A Bióloga)</h3>
                    <p>Especialista em ecossistemas e fauna nativa.</p>
                    <span class="skill-badge">Habilidade: Escudo de Biodiversidade</span>
                </div>
                <div class="card-option" onclick="selectCharacter('Zephyr', 'Investigação (Pontuação extra ao acertar perguntas difíceis)')">
                    <h3>⚡ Zephyr (O Engenheiro Climático)</h3>
                    <p>Mestre em energias renováveis e transição limpa.</p>
                    <span class="skill-badge">Habilidade: Sobrecarga Limpa</span>
                </div>
            </div>
        </div>

        <!-- TELA 2: SELEÇÃO DE TEMA -->
        <div id="screen-theme" class="screen">
            <h2>Linhas Temporais Críticas</h2>
            <p>Selecione a crise antrópica que seu personagem irá investigar e mitigar:</p>
            <div class="grid-select">
                <div class="card-option" onclick="startQuiz('clima')">
                    <h3>🔥 Tema 1: Aquecimento e Combustíveis</h3>
                    <p>O colapso atmosférico gerado pelas matrizes energéticas humanas.</p>
                </div>
                <div class="card-option" onclick="startQuiz('oceano')">
                    <h3>🌊 Tema 2: Plastificação dos Oceanos</h3>
                    <p>O impacto do consumo massivo de materiais descartáveis na vida marinha.</p>
                </div>
                <div class="card-option" onclick="startQuiz('consumo')">
                    <h3>🚜 Tema 3: Agropecuária e Solo</h3>
                    <p>O desmatamento e o uso de agrotóxicos para suprir a demanda humana.</p>
                </div>
            </div>
        </div>

        <!-- TELA 3: O QUIZ -->
        <div id="screen-quiz" class="screen">
            <div class="hud">
                <div class="status-bar">Herói: <span id="hud-name"></span></div>
                <div class="status-bar">⚡ Energia: <span id="hud-energy">3</span>/3</div>
                <div class="status-bar">⭐ Pontos: <span id="hud-score">0</span></div>
            </div>
            <div id="question-box" class="question-text">Pergunta aqui?</div>
            <div id="options-box" class="options-list"></div>
            <div id="feedback-box" class="feedback"></div>
            <button id="btn-next" class="btn-prime" style="display:none;" onclick="nextQuestion()">Avançar</button>
        </div>

        <!-- TELA 4: FIM DE JOGO -->
        <div id="screen-end" class="screen">
            <h2>Missão Concluída!</h2>
            <p id="end-summary"></p>
            <h3 style="color: #fff;">Pontuação Final: <span id="end-score">0</span></h3>
            <button class="btn-prime" onclick="restartGame()">Jogar Novamente</button>
        </div>
    </div>

    <script>
        // Banco de Questões por Tema
        const bancoQuestoes = {
            clima: [
                { q: "Qual atividade antropocêntrica é a maior responsável pela emissão de CO2 na atmosfera?", o: ["Uso de combustíveis fósseis", "Reflorestamento comercial", "Criação de reservas indígenas", "Uso de usinas maré-motrizes"], a: 0 },
                { q: "O aumento rápido da temperatura global causa qual destas consequências imediatas?", o: ["Aumento da camada de ozônio", "Derretimento das calotas polares", "Resfriamento profundo dos oceanos", "Estabilização das estações do ano"], a: 1 },
                { q: "Para conter a crise climática provocada pela ação humana, qual transição é prioritária?", o: ["Substituir matrizes limpas por carvão", "Expandir termoelétricas", "Migrar para fontes renováveis (solar/eólica)", "Aumentar subsídios ao petróleo"], a: 2 }
            ],
            oceano: [
                { q: "Qual o principal destino e impacto do descarte incorreto de plásticos de uso único?", o: ["Criação de novas ilhas habitáveis", "Acúmulo nos oceanos e ingestão por animais", "Dissolução completa e benéfica na água", "Fortalecimento dos corais"], a: 1 },
                { q: "O que são os microplásticos e por que são perigosos?", o: ["Plásticos biodegradáveis rápidos", "Pequenas partículas que contaminam a cadeia alimentar", "Filtros criados para limpar as águas", "Nutrientes artificiais para peixes"], a: 1 },
                { q: "Qual a causa do fenômeno de branqueamento de corais nos oceanos modernos?", o: ["Excesso de pesca de linha", "Diminuição do turismo costeiro", "Aquecimento e acidificação das águas pela ação antrópica", "Falta de oxigênio trazida por algas artificiais"], a: 2 }
            ],
            consumo: [
                { q: "Qual é a principal justificativa antropocêntrica para o desmatamento de florestas tropicais?", o: ["Expansão da agropecuária e monoculturas", "Proteção de terras indígenas", "Preservação de nascentes de rios", "Criação de santuários ecológicos"], a: 0 },
                { q: "O uso indiscriminado de agrotóxicos causa qual impacto na fauna local?", o: ["Aumento do número de polinizadores", "Colapso de populações de abelhas e insetos úteis", "Mutação que torna plantas imunes a pragas", "Purificação dos rios subterrâneos"], a: 1 },
{ q: "A perda de biodiversidade causada pelo manejo agressivo do solo resulta em:", o: ["Solos mais férteis a longo prazo", "Surgimento espontâneo de novas florestas", "Fragilização de ecossistemas e risco de desertificação", "Equilíbrio climático regional"], a: 2 }
]
};
// Estado do Jogo
let jogo = {
personagem: '',
habilidade: '',
temaAtual: '',
perguntaIndex: 0,
energia: 3,
pontos: 0,
escudoUsado: false
};
// Navegação de Telas
function showScreen(screenId) {
document.querySelectorAll('.screen').forEach(s => s.classList.remove('active'));
document.getElementById(screenId).classList.add('active');
}
// Fluxo de Configuração
function selectCharacter(nome, habilidade) {
jogo.personagem = nome;
jogo.habilidade = habilidade;
showScreen('screen-theme');
}
function startQuiz(tema) {
jogo.temaAtual = tema;
jogo.perguntaIndex = 0;
jogo.energia = 3;
jogo.pontos = 0;
jogo.escudoUsado = false;
updateHUD();
showScreen('screen-quiz');
loadQuestion();
}
// Lógica do Quiz
function updateHUD() {
document.getElementById('hud-name').innerText = jogo.personagem;
document.getElementById('hud-energy').innerText = jogo.energia;
document.getElementById('hud-score').innerText = jogo.pontos;
}
function loadQuestion() {
const questoes = bancoQuestoes[jogo.temaAtual];
if (jogo.perguntaIndex >= questoes.length || jogo.energia <= 0) {
endGame();
return;
}
const qData = questoes[jogo.perguntaIndex];
document.getElementById('question-box').innerText = qData.q;
const optBox = document.getElementById('options-box');
optBox.innerHTML = '';
document.getElementById('feedback-box').style.display = 'none';
document.getElementById('btn-next').style.display = 'none';
qData.o.forEach((opcao, index) => {
const btn = document.createElement('button');
btn.classList.add('btn-opt');
btn.innerText = opcao;
btn.onclick = () => checkAnswer(index);
optBox.appendChild(btn);
});
}
function checkAnswer(selectedIndex) {
const qData = bancoQuestoes[jogo.temaAtual][jogo.perguntaIndex];
const feedback = document.getElementById('feedback-box');
// Trava as opções após clicar
document.querySelectorAll('.btn-opt').forEach(btn => btn.disabled = true);
if (selectedIndex === qData.a) {
let ganho = (jogo.personagem === 'Zephyr') ? 15 : 10;
jogo.pontos += ganho;
feedback.innerText = Correto! +${ganho} Pontos ambientais gerados.;
feedback.style.backgroundColor = 'var(--accent-green)';
} else {
if (jogo.personagem === 'Gaia' && !jogo.escudoUsado) {
jogo.escudoUsado = true;
feedback.innerText = "Errado! Mas a habilidade 'Escudo de Biodiversidade' da Gaia mitigou o dano.";
feedback.style.backgroundColor = 'var(--accent-blue)';
} else {
jogo.energia--;
feedback.innerText = "Resposta Incorreta. O ecossistema sofreu danos crônicos.";
feedback.style.backgroundColor = 'var(--accent-red)';
}
}
feedback.style.display = 'block';
document.getElementById('btn-next').style.display = 'block';
updateHUD();
}
function nextQuestion() {
jogo.perguntaIndex++;
loadQuestion();
}
function endGame() {
showScreen('screen-end');
const resumo = document.getElementById('end-summary');
document.getElementById('end-score').innerText = jogo.pontos;
if (jogo.energia <= 0) {
resumo.innerText = O colapso ambiental venceu. A energia de ${jogo.personagem} chegou a zero antes de estabilizar a linha temporal.;
resumo.style.color = 'var(--accent-red)';
} else {
resumo.innerText = Vitória! ${jogo.personagem} conseguiu responder as crises de forma sustentável e evitou o pior cenário antrópico nesta linha temporal.;
resumo.style.color = 'var(--accent-green)';
}
}
function restartGame() {
showScreen('screen-char');
}
