<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lookism: Gang Wars</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        body { background-color: #0f1117; color: #f3f4f6; font-family: system-ui, sans-serif; }
        .ui-active { border: 2px solid #22c55e; box-shadow: 0 0 15px #22c55e; }
        .danger-glow { border: 2px solid #ef4444; box-shadow: 0 0 15px #ef4444; }
    </style>
</head>
<body class="p-4 max-w-md mx-auto">

    <!-- HEADER / AVATAR DINÂMICO -->
    <div class="flex items-center bg-gray-800 p-3 rounded-xl mb-4 border border-gray-700 shadow-lg">
        <div id="avatar-box" class="w-16 h-16 rounded-lg bg-gray-900 flex items-center justify-center text-2xl border-2 border-purple-500 overflow-hidden relative">
            <span id="avatar-emoji">👤</span>
        </div>
        <div class="ml-3 flex-1">
            <h2 id="char-name" class="font-bold text-lg text-purple-400">Daniel Park</h2>
            <p id="char-body" class="text-xs text-yellow-400 font-semibold">Corpo: Perfeito (UI)</p>
            <p class="text-xs text-gray-400">Estilo: <span id="char-style" class="text-white">Nenhum</span></p>
        </div>
        <button onclick="switchBody()" class="bg-purple-600 hover:bg-purple-500 text-xs px-3 py-2 rounded-lg font-bold shadow transition">Trocar Corpo</button>
    </div>

    <!-- PAINEL DE STATUS -->
    <div class="bg-gray-800 p-3 rounded-xl mb-4 border border-gray-700 text-sm space-y-2">
        <div class="flex justify-between"><span>Dia: <strong id="stat-day">1</strong></span><span>₩ <strong id="stat-money">1000</strong></span><span>Rep: <strong id="stat-rep">10</strong></span></div>
        <div>
            <div class="flex justify-between text-xs text-gray-400"><span>HP</span><span id="hp-text">100/100</span></div>
            <div class="w-full bg-gray-700 h-2 rounded-full overflow-hidden"><div id="hp-bar" class="bg-green-500 h-full w-full transition-all"></div></div>
        </div>
        <div>
            <div class="flex justify-between text-xs text-gray-400"><span>Energia</span><span id="en-text">100/100</span></div>
            <div class="bar bg-gray-700 h-2 rounded-full overflow-hidden"><div id="en-bar" class="bg-blue-500 h-full w-full transition-all"></div></div>
        </div>
        <div id="injury-warning" class="text-xs text-red-400 font-bold hidden">⚠️ Lesão Ativa: <span id="injury-name">Nenhuma</span></div>
    </div>

    <!-- MENU DE AÇÕES PRINCIPAIS -->
    <div class="grid grid-cols-2 gap-2 mb-4">
        <button onclick="advanceDay()" class="bg-indigo-600 hover:bg-indigo-500 p-3 rounded-xl font-bold text-sm shadow">🌅 Avançar Dia</button>
        <button onclick="startRogueFight()" class="bg-red-600 hover:bg-red-500 p-3 rounded-xl font-bold text-sm shadow">⚔️ Rondas de Rua</button>
        <button onclick="openCustomization()" class="bg-gray-700 hover:bg-gray-600 p-2 rounded-xl text-xs font-semibold">🎨 Aparência</button>
        <button onclick="openGenetics()" class="bg-amber-600 hover:bg-amber-500 p-2 rounded-xl text-xs font-semibold">🧬 Roleta Genética</button>
        <button onclick="openMentors()" class="bg-teal-600 hover:bg-teal-500 p-2 rounded-xl text-xs font-semibold">🥋 Mentores</button>
        <button onclick="openHospital()" class="bg-rose-700 hover:bg-rose-600 p-2 rounded-xl text-xs font-semibold">🏥 Hospital</button>
    </div>

    <!-- LOG DE EVENTOS -->
    <div class="bg-gray-900 border border-gray-800 p-3 rounded-xl h-40 overflow-y-auto text-xs space-y-1 font-mono" id="game-log">
        <p class="text-gray-500">> Bem-vindo ao submundo de Seul. Prepare sua gangue...</p>
    </div>

    <!-- MODAL DE TELA DE LUTA / INTERAÇÃO -->
    <div id="modal" class="fixed inset-0 bg-black bg-opacity-80 hidden flex items-center justify-center p-4 z-50">
        <div id="modal-content" class="bg-gray-800 border border-gray-700 w-full max-w-sm p-4 rounded-xl space-y-3">
            <h3 id="modal-title" class="font-bold text-lg text-purple-400">Título</h3>
            <p id="modal-desc" class="text-xs text-gray-300">Descrição...</p>
            <div id="modal-actions" class="flex flex-col gap-2"></div>
        </div>
    </div>

    <script>
        let player = {
            name: "Daniel Park",
            body: "Perfeito", // Perfeito ou Gordo
            hairStyle: "Taper Fade",
            hairColor: "Preto",
            money: 1500,
            rep: 10,
            hp: 100,
            maxHp: 100,
            energy: 100,
            maxEnergy: 100,
            day: 1,
            style: "Nenhum",
            injury: null,
            uiMode: false
        };

        function log(msg) {
            const box = document.getElementById('game-log');
            box.innerHTML += `<p>> ${msg}</p>`;
            box.scrollTop = box.scrollHeight;
        }

        function updateUI() {
            document.getElementById('char-name').innerText = player.name;
            document.getElementById('char-body').innerText = `Corpo: ${player.body}`;
            document.getElementById('char-style').innerText = player.style;
            document.getElementById('stat-day').innerText = player.day;
            document.getElementById('stat-money').innerText = player.money;
            document.getElementById('stat-rep').innerText = player.rep;
            
            document.getElementById('hp-text').innerText = `${player.hp}/${player.maxHp}`;
            document.getElementById('hp-bar').style.width = `${(player.hp / player.maxHp) * 100}%`;
            
            document.getElementById('en-text').innerText = `${player.energy}/${player.maxEnergy}`;
            document.getElementById('en-bar').style.width = `${(player.energy / player.maxEnergy) * 100}%`;

            const avatarEmoji = document.getElementById('avatar-emoji');
            avatarEmoji.innerText = player.body === "Perfeito" ? "😎" : "🧔";

            const injuryBox = document.getElementById('injury-warning');
            if(player.injury) {
                injuryBox.classList.remove('hidden');
                document.getElementById('injury-name').innerText = player.injury;
            } else {
                injuryBox.classList.add('hidden');
            }
        }

        function switchBody() {
            player.body = player.body === "Perfeito" ? "Gordo" : "Perfeito";
            if(player.body === "Gordo") {
                player.maxHp = 70;
                player.hp = Math.min(player.hp, player.maxHp);
                log("Você alternou para o Corpo Gordo. Mais discreto, mas menos resistente.");
            } else {
                player.maxHp = 100;
                log("Você alternou para o Corpo Perfeito. Pronta para combate total!");
            }
            updateUI();
        }

        function advanceDay() {
            player.day++;
            player.energy = player.maxEnergy;
            player.hp = Math.min(player.maxHp, player.hp + 20);
            log(`Amanheceu o dia ${player.day}. Energia restaurada.`);
            updateUI();
        }

        function startRogueFight() {
            if(player.energy < 20) { log("Muito cansado para sair nas ruas!"); return; }
            player.energy -= 20;

            const enemies = [
                {name: "Delinquente Comum", hp: 50, dmg: 10, weapon: null},
                {name: "Marginal Armado com Faca", hp: 60, dmg: 18, weapon: "Faca (Corte Profundo)"},
                {name: "Capanga com Cano de Ferro", hp: 70, dmg: 15, weapon: "Cano de Ferro"}
            ];
            const enemy = enemies[Math.floor(Math.random() * enemies.length)];

            openModal(`Confronto de Rua: ${enemy.name}`, 
                `Você encontrou um ${enemy.name} ${enemy.weapon ? 'armado com ' + enemy.weapon : 'tentando extorquir estudantes'}. O que vai fazer?`,
                [
                    {text: "Lutar com Tudo", action: () => resolveFight(enemy)},
                    {text: "Tentar Intimidar (Reputação)", action: () => resolveIntimidate(enemy)},
                    {text: "Fugir", action: closeModal}
                ]
            );
        }

        function resolveFight(enemy) {
            closeModal();
            let playerDmg = player.body === "Perfeito" ? 25 : 12;
            if(player.uiMode) playerDmg *= 2.5;

            log(`Você enfrentou ${enemy.name}!`);
            
            // Inimigo ataca primeiro se tiver arma pesada
            if(enemy.weapon && Math.random() > 0.4) {
                player.hp -= enemy.dmg;
                player.injury = enemy.weapon;
                log(`⚠️ Você foi atingido por ${enemy.weapon} e sofreu uma lesão!`);
            }

            if(Math.random() > 0.3) {
                player.money += 300;
                player.rep += 2;
                log(`🎉 Você venceu a briga! Ganhou ₩300 e Reputação.`);
            } else {
                player.hp -= 25;
                log(`❌ Você apanhou feio na rua e perdeu HP.`);
            }
            updateUI();
        }

        function resolveIntimidate(enemy) {
            closeModal();
            if(player.rep >= 15) {
                player.rep += 1;
                player.money += 150;
                log(`Sua reputação intimidou ${enemy.name}. Ele fugiu e deixou ₩150.`);
            } else {
                player.hp -= 20;
                log(`Sua reputação era baixa! ${enemy.name} partiu para cima e te machucou.`);
            }
            updateUI();
        }

        function openCustomization() {
            openModal("Personalizar Aparência", "Escolha seu estilo visual:", [
                {text: "Corte: Taper Fade", action: () => { player.hairStyle = "Taper Fade"; log("Cabelo alterado para Taper Fade."); closeModal(); }},
                {text: "Corte: Man-Bun", action: () => { player.hairStyle = "Man-Bun"; log("Cabelo alterado para Man-Bun."); closeModal(); }},
                {text: "Voltar", action: closeModal}
            ]);
        }

        function openGenetics() {
            if(player.money < 500) { log("Você precisa de ₩500 para roletar a genética!"); closeModal(); return; }
            player.money -= 500;
            const traits = ["Genética de Corpo Perfeito", "Olhos do Copycat", "Resistência Extrema a Dor", "Reflexos de Luta"];
            const r = traits[Math.floor(Math.random() * traits.length)];
            log(`🧬 Roleta Genética ativada! Traço adquirido: ${r}`);
            closeModal();
            updateUI();
        }

        function openMentors() {
            openModal("Mentores Lendários", "Treine com os melhores de Seul (Custo: ₩800):", [
                {text: "Treinar com Gun (Kyokushin)", action: () => {
                    if(player.money < 800) { log("Dinheiro insuficiente!"); return; }
                    player.money -= 800; player.style = "Kyokushin Karate";
                    log("Você aprendeu Kyokushin com Gun Park!"); closeModal(); updateUI();
                }},
                {text: "Voltar", action: closeModal}
            ]);
        }

        function openHospital() {
            if(!player.injury) { log("Você não tem nenhuma lesão para tratar."); return; }
            if(player.money < 400) { log("Tratamento médico custa ₩400!"); return; }
            player.money -= 400;
            player.injury = null;
            player.hp = player.maxHp;
            log("🏥 Você foi ao hospital, tratou suas lesões e recuperou o HP total.");
            closeModal();
            updateUI();
        }

        function openModal(title, desc, buttons) {
            document.getElementById('modal-title').innerText = title;
            document.getElementById('modal-desc').innerText = desc;
            const actBox = document.getElementById('modal-actions');
            actBox.innerHTML = '';
            buttons.forEach(b => {
                const btn = document.createElement('button');
                btn.className = "bg-gray-700 hover:bg-gray-600 p-2 rounded-lg text-xs font-bold text-left px-3";
                btn.innerText = b.text;
                btn.onclick = b.action;
                actBox.appendChild(btn);
            });
            document.getElementById('modal').classList.remove('hidden');
        }

        function closeModal() {
            document.getElementById('modal').classList.add('hidden');
        }

        updateUI();
    </script>
</body>
</html>
