<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jogo: Equilíbrio Terrestre (Antropocentrismo)</title>
    <style>
        :root {
            --bg-color: #eef2f3;
            --card-bg: #ffffff;
            --text-color: #333333;
            --primary: #2980b9;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(to right, #8e9eab, #eef2f3);
            color: var(--text-color);
            margin: 0;
            padding: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        #game-container {
            background-color: var(--card-bg);
            border-radius: 12px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.15);
            width: 100%;
            max-width: 600px;
            padding: 30px;
            box-sizing: border-box;
            text-align: center;
        }

        h1 {
            margin-top: 0;
            color: #2c3e50;
            font-size: 24px;
        }

        .status-container {
            display: flex;
            justify-content: space-around;
            margin-bottom: 25px;
            background-color: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            border: 1px solid #e2e8f0;
        }

        .status-item {
            font-weight: bold;
            font-size: 16px;
        }

        #nature-status { color: #27ae60; }
        #human-status { color: #2980b9; }

        #dilemma-text {
            font-size: 18px;
            line-height: 1.6;
            margin-bottom: 30px;
            min-height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .choice-btn {
            display: block;
            width: 100%;
            background-color: var(--primary);
            color: white;
            border: none;
            padding: 15px;
            margin: 10px 0;
            border-radius: 6px;
            font-size: 16px;
            cursor: pointer;
            transition: background 0.2s, transform 0.1s;
        }

        .choice-btn:hover {
            background-color: #2171a3;
            transform: translateY(-2px);
        }

        .choice-btn:active {
            transform: translateY(0);
        }

        #feedback {
            margin-top: 20px;
            font-style: italic;
            min-height: 40px;
            color: #555;
        }

        .restart-btn {
            background-color: #e74c3c;
        }
        .restart-btn:hover {
            background-color: #c0392b;
        }
    </style>
</head>
<body>

<div id="game-container">
    <h1>Equilíbrio Terrestre: O Antropocentrismo</h1>
    
    <div class="status-container">
        <div class="status-item">Natureza: <span id="nature-status">100</span>%</div>
        <div class="status-item">Progresso Humano: <span id="human-status">100</span>%</div>
    </div>

    <div id="game-content">
        <p id="dilemma-text">Carregando dilema...</p>
        <div id="choices-bnt-container">
            <button class="choice-btn" onclick="makeChoice(0)">Opção A</button>
            <button class="choice-btn" onclick="makeChoice(1)">Opção B</button>
        </div>
        <p id="feedback"></p>
    </div>
</div>

<script>
    // Estado do jogo
    let nature = 100;
    let human = 100;
    let currentStep = 0;

    // Banco de dados de dilemas sobre causa e consequência do antropocentrismo
    const dilemmas = [
        {
            text: "Causa: Uma grande floresta impede a expansão de uma metrópole industrial. O que fazer?",
            choices: [
                {
                    text: "Derrubar a floresta (Visão Antropocêntrica: A natureza serve ao crescimento do homem).",
                    natureImpact: -25,
                    humanImpact: +15,
                    feedback: "Consequência: A economia cresceu, mas a perda de biodiversidade causou o aumento de pragas agrícolas."
                },
                {
                    text: "Preservar a floresta e criar limites urbanos (Visão Ecocêntrica).",
                    natureImpact: +5,
                    humanImpact: -10,
                    feedback: "Consequência: O crescimento econômico desacelerou, mas a qualidade do ar e a água continuam puras."
                }
            ]
        },
        {
            text: "Causa: A demanda por carne e recursos agrícolas aumentou drasticamente na última década.",
            choices: [
                {
                    text: "Investir em pecuária intensiva e agrotóxicos para maximizar o lucro humano.",
                    natureImpact: -30,
                    humanImpact: +20,
                    feedback: "Consequência: Alimento barato a curto prazo. Porém, o solo ficou infértil e os rios locais foram contaminados."
                },
                {
                    text: "Estimular a agroecologia e dietas à base de plantas.",
                    natureImpact: +15,
                    humanImpact: -5,
                    feedback: "Consequência: Adaptação social difícil e transição cara, mas os ecossistemas locais se regeneraram."
                }
            ]
        },
        {
            text: "Causa: Fontes de energia fóssil (carvão/petróleo) continuam sendo as mais baratas para mover as indústrias.",
            choices: [
                {
                    text: "Manter o uso de combustíveis fósseis para garantir o conforto e a riqueza humana imediata.",
                    natureImpact: -35,
                    humanImpact: +15,
                    feedback: "Consequência: Mudanças climáticas extremas causaram secas severas que agora ameaçam as próprias cidades."
                },
                {
                    text: "Migrar totalmente para energias renováveis, mesmo taxando grandes empresas.",
                    natureImpact: +20,
                    humanImpact: -15,
                    feedback: "Consequência: Houve recessão temporária, mas a estabilidade do clima global foi protegida."
                }
            ]
        }
    ];

    const dilemmaText = document.getElementById("dilemma-text");
    const choicesContainer = document.getElementById("choices-bnt-container");
    const feedbackText = document.getElementById("feedback");
    const natureStatus = document.getElementById("nature-status");
    const humanStatus = document.getElementById("human-status");

    function updateStats() {
        natureStatus.textContent = nature;
        humanStatus.textContent = human;

        // Limites de pontuação
        if (nature < 0) nature = 0;
        if (human < 0) human = 0;
    }

    function showDilemma() {
        feedbackText.textContent = "";
        
        if (currentStep < dilemmas.length && nature > 0 && human > 0) {
            let currentDilemma = dilemmas[currentStep];
            dilemmaText.textContent = currentDilemma.text;
            
            choicesContainer.innerHTML = `
                <button class="choice-btn" onclick="makeChoice(0)">${currentDilemma.choices[0].text}</button>
                <button class="choice-btn" onclick="makeChoice(1)">${currentDilemma.choices[1].text}</button>
            `;
        } else {
            endGame();
        }
    }

    function makeChoice(index) {
        let choice = dilemmas[currentStep].choices[index];
        
        nature += choice.natureImpact;
        human += choice.humanImpact;
        updateStats();

        feedbackText.textContent = choice.feedback;
        choicesContainer.innerHTML = ''; // Remove botões temporariamente para leitura

        currentStep++;

        // Avança após 4 segundos para o jogador conseguir ler a consequência
        setTimeout(() => {
            showDilemma();
        }, 4500);
    }

    function endGame() {
        choicesContainer.innerHTML = `<button class="choice-btn restart-btn" onclick="restartGame()">Jogar Novamente</button>`;
        
        if (nature <= 40) {
            dilemmaText.innerHTML = "<strong>Fim de jogo: Colapso Ecológico.</strong><br>O antropocentrismo radical exauriu a Terra. Sem a natureza, o próprio progresso humano desmoronou devido a crises climáticas e falta de recursos.";
        } else if (human <= 70) {
            dilemmaText.innerHTML = "<strong>Fim de jogo: Equilíbrio Conservador.</strong><br>Você priorizou o planeta. O crescimento humano desacelerou, mas a sobrevivência das futuras gerações e a biodiversidade estão garantidas.";
        } else {
            dilemmaText.innerHTML = "<strong>Fim de jogo: Desenvolvimento Sustentável.</strong><br>Você conseguiu equilibrar as necessidades humanas sem destruir completamente os recursos do ecossistema.";
        }
    }

    function restartGame() {
        nature = 100;
        human = 100;
        currentStep = 0;
        updateStats();
        showDilemma();
    }

    // Inicializa o jogo
    updateStats();
    showDilemma();
</script>

</body>
</html>
