<!DOCTYPE html>
<html lang="pt">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Treino de Combinacoes - Baralho Cigano</title>
    <style>
        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #121212; color: #e0e0e0; margin: 0; padding: 20px; display: flex; justify-content: center; }
        .container { max-width: 800px; width: 100%; background: #1e1e1e; padding: 25px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.5); }
        h1 { text-align: center; color: #d4af37; margin-bottom: 20px; }
        .cards-container { display: flex; justify-content: space-around; margin: 30px 0; gap: 15px; }
        .card { flex: 1; background: #2a2a2a; border: 2px solid #d4af37; border-radius: 8px; padding: 15px; text-align: center; min-height: 140px; display: flex; flex-direction: column; justify-content: center; }
        .card-num { font-size: 0.9em; color: #aaa; }
        .card-title { font-size: 1.2em; font-weight: bold; color: #fff; margin: 8px 0; }
        .card-pos { font-size: 0.8em; color: #d4af37; text-transform: uppercase; }
        button { background-color: #d4af37; color: #121212; border: none; padding: 12px 24px; font-size: 1em; font-weight: bold; border-radius: 6px; cursor: pointer; width: 100%; margin-top: 10px; transition: 0.2s; }
        button:hover { background-color: #f1c40f; }
        textarea { width: 100%; height: 80px; background: #2a2a2a; color: #fff; border: 1px solid #444; border-radius: 6px; padding: 10px; box-sizing: border-box; margin-top: 15px; resize: vertical; }
        .hint-box { background: #252525; border-left: 4px solid #d4af37; padding: 15px; margin-top: 20px; display: none; }
        .hint-title { font-weight: bold; color: #d4af37; margin-bottom: 5px; }
    </style>
</head>
<body>

<div class="container">
    <h1>Treinador de Trincas - Lenormand</h1>
    <p style="text-align:center; color: #aaa;">Tire 3 cartas para praticar a leitura fluida de blocos (Ação, Contexto e Resultado).</p>

    <div class="cards-container">
        <div class="card">
            <span class="card-pos">1. Origem / Ação</span>
            <span class="card-num" id="num1">-</span>
            <span class="card-title" id="card1">?</span>
        </div>
        <div class="card">
            <span class="card-pos">2. Foco Central</span>
            <span class="card-num" id="num2">-</span>
            <span class="card-title" id="card2">?</span>
        </div>
        <div class="card">
            <span class="card-pos">3. Desfecho</span>
            <span class="card-num" id="num3">-</span>
            <span class="card-title" id="card3">?</span>
        </div>
    </div>

    <button onclick="tirarCartas()">Sorteia 3 Cartas</button>

    <div id="exercise" style="display:none; margin-top: 20px;">
        <label for="userNotes"><strong>Escreva a sua sintese da combinacao:</strong></label>
        <textarea id="userNotes" placeholder="Ex: O Navio + A Chave + Os Livros indica que uma viagem ou mudanca de longo prazo trara a solucao para um segredo..."></textarea>
        <button onclick="revelarPistas()" style="background-color: #333; color: #fff; margin-top: 10px;">Ver Palavras-Chave e Guias</button>
    </div>

    <div id="hintBox" class="hint-box">
        <div class="hint-title">Eixo de Análise:</div>
        <p id="hintContent"></p>
    </div>
</div>

<script>
const baralho = [
    { num: 1, nome: "O Cavaleiro", kw: "Movimento, noticias, chegadas rapidas" },
    { num: 2, nome: "O Trevo", kw: "Pequenos problemas, sorte temporaria, oportunidade" },
    { num: 3, nome: "O Navio", kw: "Viagem, mudancas lentas, distancia, horizontes" },
    { num: 4, nome: "A Casa", kw: "Estructura, familia, lar, seguranca" },
    { num: 5, nome: "A Arvore", kw: "Saude, crescimento, raizes, tempo longo" },
    { num: 6, nome: "As Nuvens", kw: "Confusao, duvidas, instabilidade passageira" },
    { num: 7, nome: "A Serpente", kw: "Desvios, armadilhas, atracao, inteligencia" },
    { num: 8, nome: "O Caixao", kw: "Fim de ciclo, transformacao, conclusao" },
    { num: 9, nome: "O Buque", kw: "Presente, felicidade, convite, beleza" },
    { num: 10, nome: "A Foice", kw: "Corte abrupto, colheita, decisao rapida" },
    { num: 11, nome: "O Chicote", kw: "Conflito, repeticao, esforco, discussao" },
    { num: 12, nome: "Os Passaros", kw: "Comunicacao, conversas, parceria, agitacao" },
    { num: 13, name: "A Crianca", kw: "Novo inicio, inocencia, algo pequeno" },
    { num: 14, nome: "O Raposa", kw: "Estrategia, cautela, trabalho, astucia" },
    { num: 15, nome: "O Urso", kw: "Protecao, ciume, chefe, forca bruta" },
    { num: 16, nome: "A Estrela", kw: "Brilho, esperanca, direcao espiritual, sucesso" },
    { num: 17, nome: "A Cegonha", kw: "Novidades, mudanca de ar, renovacao" },
    { num: 18, nome: "O Cao", kw: "Fidelidade, amigo, confianca, apoio" },
    { num: 19, nome: "A Torre", kw: "Isolamento, instituicao, olhar interior" },
    { num: 20, nome: "O Jardim", kw: "Vida social, publico, eventos, rede de contactos" },
    { num: 21, nome: "O Montanha", kw: "Bloqueio, obstaculo, desafio a superar" },
    { num: 22, nome: "O Caminho", kw: "Escolhas, alternativas, livre-arbitrio" },
    { num: 23, nome: "Os Ratos", kw: "Desgaste, perdas, ansiedade, roubo de energia" },
    { num: 24, nome: "O Coracao", kw: "Amor, paixao, emocoes profundas, afeto" },
    { num: 25, nome: "O Anel", kw: "Parceria, contrato, uniao, compromisso" },
    { num: 26, nome: "Os Livros", kw: "Segredos, estudos, documentos, desconhecido" },
    { num: 27, nome: "A Carta", kw: "Mensagem, documento escrito, aviso" },
    { num: 28, nome: "O Cego / Homem", kw: "Figura masculina, o consulente ou parceiro" },
    { num: 29, nome: "A Ciganas / Mulher", kw: "Figura feminina, a consulente ou parceira" },
    { num: 30, nome: "Os Lirios", kw: "Paz, maturidade, sabedoria, tranquilidade" },
    { num: 31, nome: "O Sol", kw: "Sucesso, clareza, vitalidade, vitoria" },
    { num: 32, nome: "A Lua", kw: "Reconhecimento, intuição, ilusao, fama" },
    { num: 33, nome: "A Chave", kw: "Solucao, portas abertas, destino, certeza" },
    { num: 34, nome: "Os Peixes", kw: "Dinheiro, negocios, abundancia, fluxo" },
    { num: 35, nome: "A Ancora", kw: "Estabilidade, seguranca, porto seguro, rotina" },
    { num: 36, nome: "A Cruz", kw: "Provacao, fe, encargo, vitoria final" }
];

let tiragemAtual = [];

function tirarCartas() {
    let baralhoEmbaralhado = [...baralho].sort(() => 0.5 - Math.random());
    tiragemAtual = baralhoEmbaralhado.slice(0, 3);

    document.getElementById('num1').innerText = '#' + tiragemAtual[0].num;
    document.getElementById('card1').innerText = tiragemAtual[0].nome;
    
    document.getElementById('num2').innerText = '#' + tiragemAtual[1].num;
    document.getElementById('card2').innerText = tiragemAtual[1].nome;
    
    document.getElementById('num3').innerText = '#' + tiragemAtual[2].num;
    document.getElementById('card3').innerText = tiragemAtual[2].nome;

    document.getElementById('exercise').style.display = 'block';
    document.getElementById('hintBox').style.display = 'none';
    document.getElementById('userNotes').value = '';
}

function revelarPistas() {
    if(tiragemAtual.length < 3) return;
    
    let html = `<strong>Carta 1 (${tiragemAtual[0].nome}):</strong> ${tiragemAtual[0].kw}<br>`;
    html += `<strong>Carta 2 (${tiragemAtual[1].nome}):</strong> ${tiragemAtual[1].kw}<br>`;
    html += `<strong>Carta 3 (${tiragemAtual[2].nome}):</strong> ${tiragemAtual[2].kw}<br><br>`;
    html += `<em>Dica de Sintese:</em> Veja como a carta 1 influncia a carta 2, e como a carta 2 resulta na carta 3.`;
    
    document.getElementById('hintContent').innerHTML = html;
    document.getElementById('hintBox').style.display = 'block';
}
</script>

</body>
</html>
