<!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: 400px;
            height: 380px;
            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: 18px;
            line-height: 1.5;
            margin: 20px 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: 14px;
            font-weight: 600;
            transition: all 0.2s;
            text-align: left;
        }

        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></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 quebrar o ciclo puramente antropocêntrico, garantindo que o progresso humano ande lado a lado com a proteção ambiental.</p>
        <button class="btn-restart" onclick="reiniciarJogo()">Jogar Novamente</button>
    </div>

    <script>
        // O baralho 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 os produtos.",
                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 grandes cidades cresce e precisa de espaço. Áreas de pântanos naturais contêm as enchentes, mas servem para 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 de carne, propõem liberar pesticidas pesados e fazendas industriais hiper-intensivas.",
                opcaoA: "Aprovar liberação. A alimentação humana justifica os meios.",
