<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Antropoceno: O Preço da Centralidade</title>
    <style>
        :root {
            --bg: #0f172a;
            --surface: #1e293b;
            --text: #f8fafc;
            --accent: #38bdf8;
            --success: #4ade80;
            --danger: #f87171;
        }

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

        h1 {
            color: var(--accent);
            margin-bottom: 5px;
            text-align: center;
        }

        .subtitle {
            color: #94a3b8;
            text-align: center;
            margin-bottom: 20px;
            max-width: 500px;
        }

        /* Status Bars */
        .status-container {
            display: flex;
            gap: 15px;
            margin-bottom: 30px;
            background: var(--surface);
            padding: 15px;
            border-radius: 12px;
            box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
            width: 100%;
            max-width: 500px;
            justify-content: space-around;
        }

        .status-item {
            text-align: center;
            font-size: 12px;
            font-weight: bold;
            flex: 1;
        }

        .status-icon {
            font-size: 24px;
            margin-bottom: 5px;
        }

        .bar-outer {
            background: #334155;
            height: 8px;
            border-radius: 4px;
            overflow: hidden;
            margin-top: 5px;
        }

        .bar-inner {
            background: var(--success);
            height: 100%;
            width: 50%;
            transition: width 0.4s ease, background-color 0.3s;
        }

        /* Card Mechanics */
        .card-table {
            position: relative;
            width: 100%;
            max-width: 440px;
            height: 420px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .event-card {
            background: var(--surface);
            border: 2px solid #334155;
            border-radius: 16px;
            padding: 25px;
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            box-shadow: 0 10px 15px -3px rgba(0,0,0,0.3);
            text-align: center;
        }

        .card-tag {
            align-self: center;
            background: rgba(56, 189, 248, 0.1);
            color: var(--accent);
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: bold;
        }

        .card-text {
            font-size: 16px;
            line-height: 1.5;
            margin: 15px 0;
            color: #e2e8f0;
        }

        .choice-buttons {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        button {
            background: #334155;
            color: var(--text);
            border: none;
            padding: 12px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 13px;
            font-weight: 600;
            transition: all 0.2s;
            text-align: left;
            line-height: 1.3;
        }

        button:hover {
            background: #475569;
            transform: translateY(-2px);
        }

        /* Overlay Screens */
        .screen {
            display: none;
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(15, 23, 42, 0.95);
            z-index: 10;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 20px;
            box-sizing: border-box;
        }

        .screen h2 { font-size: 32px; margin-bottom: 10px; }
        .screen p { max-width: 500px; color: #94a3b8; margin-bottom: 25px; line-height: 1.6; }
        
        .btn-restart {
            background: var(--accent);
            color: #0f172a;
            padding: 12px 30px;
            font-size: 16px;
            font-weight: bold;
            border-radius: 30px;
            text-align: center;
        }
        .btn-restart:hover { background: #7dd3fc; }

        .score-counter {
            margin-top: 15px;
            font-size: 14px;
            color: #94a3b8;
        }
    </style>
</head>
<body>

    <h1>Antropoceno</h1>
    <div class="subtitle">Equilibre o progresso humano com os limites do planeta. Suas escolhas definem o futuro da Terra.</div>

    <!-- Indicadores de Status -->
    <div class="status-container">
        <div class="status-item" title="Economia / Lucro">
            <div class="status-icon">💰</div>
            <div>Finanças</div>
            <div class="bar-outer"><div id="bar-eco" class="bar-inner"></div></div>
        </div>
        <div class="status-item" title="Satisfação da População">
            <div class="status-icon">👥</div>
            <div>Sociedade</div>
            <div class="bar-outer"><div id="bar-soc" class="bar-inner"></div></div>
        </div>
        <div class="status-item" title="Saúde da Natureza">
            <div class="status-icon">🌱</div>
            <div>Natureza</div>
            <div class="bar-outer"><div id="bar-nat" class="bar-inner"></div></div>
        </div>
        <div class="status-item" title="Disponibilidade de Recursos">
            <div class="status-icon">💧</div>
            <div>Recursos</div>
            <div class="bar-outer"><div id="bar-rec" class="bar-inner"></div></div>
        </div>
    </div>

    <!-- Tabuleiro de Cartas -->
    <div class="card-table">
        <div class="event-card" id="card">
            <div class="card-tag" id="card-origin">Causa do Dilema</div>
            <div class="card-text" id="card-desc">Carregando decisão climática...</div>
            <div class="choice-buttons">
                <button id="btn-a" onclick="fazerEscolha('a')">Opção A</button>
                <button id="btn-b" onclick="fazerEscolha('b')">Opção B</button>
            </div>
        </div>
    </div>

    <div class="score-counter">Turnos Sobrevividos: <span id="turn-count">0</span> / <span id="total-turns">0</span></div>

    <!-- Telas de Fim de Jogo -->
    <div id="game-over-screen" class="screen">
        <h2 style="color: var(--danger)">Fim da Humanidade</h2>
        <p id="game-over-reason">Sua gestão levou a civilização ao colapso total.</p>
        <button class="btn-restart" onclick="reiniciarJogo()">Tentar Novamente</button>
    </div>

    <div id="win-screen" class="screen">
        <h2 style="color: var(--success)">Era da Sustentabilidade</h2>
        <p>Incrível! Você conseguiu passar por todos os dilemas e quebrou o ciclo puramente antropocêntrico, garantindo que o progresso humano ande lado a lado com a proteção ambiental e a preservação ecológica.</p>
        <button class="btn-restart" onclick="reiniciarJogo()">Jogar Novamente</button>
    </div>

    <script>
        // O baralho expandido de dilemas baseados no Antropocentrismo
        const dilemas = [
            {
                origem: "Expansão Econômica",
                texto: "Grandes corporações querem desmatar uma reserva protegida sob o pretexto de gerar milhares de empregos industriais.",
                opcaoA: "Permitir a obra. O progresso econômico e humano é prioritário.",
                impactoA: { eco: 25, soc: 15, nat: -30, rec: -15 },
                opcaoB: "Negar a obra. Devemos preservar a biodiversidade a qualquer custo.",
                impactoB: { eco: -20, soc: -15, nat: 25, rec: 5 }
            },
            {
                origem: "Matriz Energética",
                texto: "A população exige energia barata e imediata, mas a forma mais rápida é subsidiando usinas termoelétricas a carvão.",
                opcaoA: "Ativar as usinas. O conforto imediato das pessoas vem primeiro.",
                impactoA: { eco: 15, soc: 20, nat: -25, rec: -20 },
                opcaoB: "Investir em transição verde lenta. A energia ficará temporariamente cara.",
                impactoB: { eco: -15, soc: -20, nat: 20, rec: 10 }
            },
            {
                origem: "Consumismo Tecnológico",
                texto: "O mercado está inundado de aparelhos descartáveis de baixo custo. Banir plásticos de uso único vai encarecer a vida dos cidadãos.",
                opcaoA: "Manter livre mercado. Restringir o consumo pune os cidadãos.",
                impactoA: { eco: 20, soc: 10, nat: -20, rec: -20 },
                opcaoB: "Banir os plásticos. Forçar indústrias a adotarem bio-materiais.",
                impactoB: { eco: -15, soc: -10, nat: 25, rec: 15 }
            },
            {
                origem: "Expansão Urbana",
                texto: "A população das cidades cresce e precisa de espaço. Áreas de pântanos naturais contêm enchentes, mas servem para novas moradias.",
                opcaoA: "Drenar o solo e construir prédios. Humanos precisam de lar.",
                impactoA: { eco: 15, soc: 15, nat: -25, rec: -10 },
                opcaoB: "Bloquear expansão. Preservar barreiras hídricas contra desastres.",
                impactoB: { eco: -10, soc: -15, nat: 20, rec: 5 }
            },
            {
                origem: "Alimentação Global",
texto: "Para erradicar a fome urbana e baixar custos, propõem liberar pesticidas pesados e fazendas industriais hiper-intensivas.",
opcaoA: "Aprovar liberação. A alimentação humana justifica os meios.",
impactoA: { eco: 20, soc: 20, nat: -25, rec: -15 },
opcaoB: "Regulamentar agroecologia. Menos produção de carne e preços mais altos.",
impactoB: { eco: -15, soc: -15, nat: 25, rec: 10 }
},
{
origem: "Descarte Tecnológico",
texto: "O descarte de lixo eletrônico está sobrecarregando os aterros municipais. Criar um imposto de reciclagem para eletrônicos gerará reclamações industriais.",
opcaoA: "Ignorar. O lixo faz parte do ciclo do progresso tecnológico rápido.",
impactoA: { eco: 15, soc: 5, nat: -20, rec: -20 },
opcaoB: "Taxar as empresas. Forçar a logística reversa de componentes químicos.",
impactoB: { eco: -20, soc: -5, nat: 20, rec: 20 }
},
{
origem: "Mineração Oceânica",
texto: "Minerais raros e valiosos foram achados no fundo do oceano profundo. A extração de alta rentabilidade destruirá recifes inexplorados.",
opcaoA: "Iniciar extração. Materiais tecnológicos são vitais para a modernidade.",
impactoA: { eco: 30, soc: 5, nat: -25, rec: -15 },
opcaoB: "Proibir exploração. Declarar o solo oceânico santuário intocável.",
impactoB: { eco: -20, soc: -5, nat: 25, rec: 5 }
},
{
origem: "Uso da Água Coletiva",
texto: "Uma severa seca atinge a nação. O setor agrícola industrial pede prioridade no desvio de rios para salvar plantações comerciais de exportação.",
opcaoA: "Favorecer a indústria agrícola. O PIB nacional depende disso.",
impactoA: { eco: 25, soc: -15, nat: -20, rec: -20 },
opcaoB: "Racionar a água industrial. Priorizar o abastecimento urbano e os rios.",
impactoB: { eco: -25, soc: 15, nat: 15, rec: 10 }
},
{
origem: "Turismo de Massa",
texto: "Uma ilha biológica paradisíaca atrai milhares de cruzeiros internacionais, gerando fortunas, mas devastando a fauna local.",
opcaoA: "Manter portos abertos. O turismo sustenta comunidades inteiras.",
impactoA: { eco: 20, soc: 15, nat: -25, rec: -10 },
opcaoB: "Limitar visitas rigidamente. Proibir grandes navios na área.",
impactoB: { eco: -20, soc: -10, nat: 25, rec: 5 }
},
{
origem: "Fast Fashion / Vestuário",
texto: "Grandes tecelagens utilizam produtos químicos altamente poluentes para produzir roupas baratas em massa para a população urbana.",
opcaoA: "Manter produção livre. Roupas baratas e acessíveis são necessárias.",
impactoA: { eco: 15, soc: 15, nat: -20, rec: -15 },
opcaoB: "Aplicar multas ecológicas. Exigir tratamento de água dos efluentes industriais.",
impactoB: { eco: -15, soc: -10, nat: 25, rec: 10 }
}
];
// Estado inicial do jogo
let status = { eco: 50, soc: 50, nat: 50, rec: 50 };
let indiceDilema = 0;
let turnos = 0;
let baralhoAtual = [];
function iniciarJogo() {
status = { eco: 50, soc: 50, nat: 50, rec: 50 };
indiceDilema = 0;
turnos = 0;
baralhoAtual = [...dilemas].sort(() => Math.random() - 0.5); // Embaralha os dilemas
document.getElementById('total-turns').innerText = baralhoAtual.length;
document.getElementById('game-over-screen').style.display = 'none';
document.getElementById('win-screen').style.display = 'none';
atualizarInterface();
carregarDilema();
}
function carregarDilema() {
if (indiceDilema >= baralhoAtual.length) {
document.getElementById('win-screen').style.display = 'flex';
return;
}
const d = baralhoAtual[indiceDilema];
document.getElementById('card-origin').innerText = d.origem;
document.getElementById('card-desc').innerText = d.texto;
document.getElementById('btn-a').innerText = d.opcaoA;
document.getElementById('btn-b').innerText = d.opcaoB;
document.getElementById('turn-count').innerText = turnos;
}
function fazerEscolha(opcao) {
const d = baralhoAtual[indiceDilema];
const impacto = (opcao === 'a') ? d.impactoA : d.impactoB;
// Aplica os impactos numéricos no status geral
for (let chave in status) {
status[chave] = Math.max(0, Math.min(100, status[chave] + impacto[chave]));
}
turnos++;
atualizarInterface();
// Valida se alguma barra chegou a zero
if (verificarDerrota()) return;
indiceDilema++;
setTimeout(carregarDilema, 300);
}
function atualizarInterface() {
const barras = {
eco: document.getElementById('bar-eco'),
soc: document.getElementById('bar-soc'),
nat: document.getElementById('bar-nat'),
rec: document.getElementById('bar-rec')
};
for (let chave in status) {
barras[chave].style.width = status[chave] + '%';
// Altera dinamicamente as cores caso fiquem em estado crítico
if (status[chave] < 25) {
barras[chave].style.backgroundColor = 'var(--danger)';
} else {
barras[chave].style.backgroundColor = 'var(--success)';
}
}
}
function verificarDerrota() {
let quebrou = false;
let motivo = "";
if (status.eco <= 0) {
motivo = "A economia global faliu totalmente. Sem infraestrutura financeira, a sociedade moderna colapsou em um caos urbano.";
quebrou = true;
} else if (status.soc <= 0) {
motivo = "Revoltas civis em massa derrubaram as instituições devido à escassez extrema, poluição severa ou perda de bem-estar social.";
quebrou = true;
} else if (status.nat <= 0) {
motivo = "O ecossistema terrestre entrou em colapso completo. Mudanças climáticas extremas e perda de biomas tornaram a atmosfera hostil.";
quebrou = true;
} else if (status.rec <= 0) {
motivo = "Acabaram-se os recursos potáveis, minerais e fertilidade biológica do planeta. A humanidade sucumbiu por falta de matéria-prima essencial.";
quebrou = true;
}
if (quebrou) {
document.getElementById('game-over-reason').innerText = motivo;
document.getElementById('game-over-screen').style.display = 'flex';
return true;
}
return false;
}
function reiniciarJogo() {
iniciarJogo();
}
// Execução automática na inicialização
iniciarJogo();
