/* Configuração Geral da Página */
body {
    background-color: #f0f2f5;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    justify-content: center;
    padding: 20px;
}

/* Container do Resultado */
.box {
    background: #ffffff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    width: 100%;
    max-width: 450px;
}

h2 {
    text-align: center;
    color: #1a1a1a;
    margin-bottom: 20px;
    text-transform: uppercase;
    font-size: 1.4rem;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

tr {
    border-bottom: 1px solid #f0f0f0;
}

tr:last-child {
    border-bottom: none;
}

td {
    padding: 10px 5px;
    vertical-align: middle;
}

/* Posição (1º, 2º...) */
.pos {
    font-weight: bold;
    color: #999;
    width: 45px;
    font-size: 0.9rem;
}

/* Container dos Dígitos */
.dezena {
    display: flex;
    gap: 3px;
    justify-content: center;
}

/* Cada quadradinho de número */
.dezena span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 38px;
    font-size: 1.3rem;
    font-weight: 900;
    color: #ffffff;
    border-radius: 4px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

/* DEFINIÇÃO DAS CORES ABCD */
.c-a { background-color: #2c3e50; } /* Cor do Milhar */
.c-b { background-color: #e67e22; } /* Cor da Centena */
.c-c { background-color: #27ae60; } /* Cor da Dezena */
.c-d { background-color: #2980b9; } /* Cor da Unidade */

/* Nome do Bicho com Ícone */
.bicho {
    padding-left: 15px;
    font-weight: 700;
    color: #444;
    font-size: 1rem;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 8px;
}

.bicho::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Ícones dos Bichos */
.bicho[data-bicho="Avestruz"]::before { content: "🦤"; font-size: 1.3rem; }
.bicho[data-bicho="Águia"]::before { content: "🦅"; font-size: 1.3rem; }
.bicho[data-bicho="Burro"]::before { content: "🫏"; font-size: 1.3rem; }
.bicho[data-bicho="Borboleta"]::before { content: "🦋"; font-size: 1.3rem; }
.bicho[data-bicho="Cachorro"]::before { content: "🐕"; font-size: 1.3rem; }
.bicho[data-bicho="Cabra"]::before { content: "🐐"; font-size: 1.3rem; }
.bicho[data-bicho="Carneiro"]::before { content: "🐑"; font-size: 1.3rem; }
.bicho[data-bicho="Camelo"]::before { content: "🐪"; font-size: 1.3rem; }
.bicho[data-bicho="Cobra"]::before { content: "🐍"; font-size: 1.3rem; }
.bicho[data-bicho="Coelho"]::before { content: "🐰"; font-size: 1.3rem; }
.bicho[data-bicho="Cavalo"]::before { content: "🐴"; font-size: 1.3rem; }
.bicho[data-bicho="Elefante"]::before { content: "🐘"; font-size: 1.3rem; }
.bicho[data-bicho="Galo"]::before { content: "🐓"; font-size: 1.3rem; }
.bicho[data-bicho="Gato"]::before { content: "🐱"; font-size: 1.3rem; }
.bicho[data-bicho="Jacaré"]::before { content: "🐊"; font-size: 1.3rem; }
.bicho[data-bicho="Leão"]::before { content: "🦁"; font-size: 1.3rem; }
.bicho[data-bicho="Macaco"]::before { content: "🐵"; font-size: 1.3rem; }
.bicho[data-bicho="Porco"]::before { content: "🐷"; font-size: 1.3rem; }
.bicho[data-bicho="Pavão"]::before { content: "🦚"; font-size: 1.3rem; }
.bicho[data-bicho="Peru"]::before { content: "🦃"; font-size: 1.3rem; }
.bicho[data-bicho="Touro"]::before { content: "🐂"; font-size: 1.3rem; }
.bicho[data-bicho="Tigre"]::before { content: "🐯"; font-size: 1.3rem; }
.bicho[data-bicho="Urso"]::before { content: "🐻"; font-size: 1.3rem; }
.bicho[data-bicho="Veado"]::before { content: "🦌"; font-size: 1.3rem; }
.bicho[data-bicho="Vaca"]::before { content: "🐄"; font-size: 1.3rem; }