/*
prompt deste arquivo:

- sempre me diga que entendeu este prompt.
- trataremos este arquivo por cartas.css.
- se houver outro arquivo com este nome em seu contexto você deve substitui-lo por este.
- este é codigo que estou trabalhando.
- ele é de um jogo de cartas chamado buraco (canastra) do brasil.
- preciso que me ajude a completa-lo.
- não faça nenhuma alteração sem que eu peça.
- se quiser fazer sugestoes me pergunte antes de mudar algo.
- antes de fazer sugestões atente-se a regra do jogo disposta no arquivo .md para não sugerir coisas erradas.
- nao é necessário comentar.
- se eu quiser comentario eu irei pedir.
- você deve fazer comentarios para melhorias sobre o que pedi.
- sempre que fazer uma alteração 'neste arquivo', liste o conteudo completo 'deste arquivo'.
- cada parte do codigo deve ser documentada: proposito da variavel, proprosito da função, proposito dos parametros, e proposito das partes em html e css.
- Você sempre deve priorizar as classes e funções do bootstrap.
- nunca remova este comentario do inicio do arquivo.

explicação:

aqui são definidas as cartas do jogo.
a classe carta desenha a parte da folha da carta.
a classe carta tem um before e um after para controlar a disposição dos numeros.
cada carta tem uma clase de controle que aqui são representadas por numero e letras sendo:

- numero:
1 = ÁS
2..9 = Proprio numero
10 = A
11 (J) = B
12 (Q) = C
13 (K) = D

- nipes

copas = C
ouro = O
paus = P
espada = E

o nome da classe é formada por um X + numero de acordo com a tabela acima + letra do nipe de acordo com a tabela acima.

temos ainda a carta especial JOKER, representada para classe XJK

Função deste arquivo: O arquivo é o núcleo do design visual das cartas, estruturado para suportar todas as combinações de números e naipes do baralho de "Buraco", além de elementos adicionais do jogo.
*/

@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&display=swap');

:root {
    --cor-copas: #c21111;
    /* Vermelho escuro */
    --cor-ouro: #FF9800;
    /* Laranja */
    --cor-paus: #292929;
    /* Preto */
    --cor-espada: #3f1584;
    /* Roxo */
    --font-number-size: 25px;
    --font-symbol-size: 30px;
    --card-width: 53px;
    --card-height: 73px;
    --symbol-font-size: 28px;
    --symbol-margin-top: -1px;
    --symbol-margin-left: -29px;
    --tags-left: 29px;
    --meld-len: 1.3;
}

@media (max-height: 500px) {
    :root {
        --card-width: 30px;
        --card-height: 35px;
        --font-number-size: 10px;
        --font-symbol-size: 15px;
        --symbol-font-size: 16px;
        --symbol-margin-top: -1px;
        --symbol-margin-left: -9px;
        --tags-left: 15px;
        --meld-len: 1;
    }
}

@media (max-height: 400px) {
    :root {
        --card-width: 28px;
        --card-height: 26px;
        --font-number-size: 10px;
        --font-symbol-size: 15px;
        --number-font-size: 18px;
        --number-margin-left: 1.5px;
        --symbol-font-size: 11px;
        --symbol-margin-top: -2px;
        --symbol-margin-left: -6px;
        --tags-left: 10px;
        --meld-len: 1;
    }
}

.carta {
    height: var(--card-height) !important;
    width: var(--card-width) !important;
    border-radius: 5px;
    background-color: #f9e8c7;
    position: absolute;
    padding: 2px;
    box-shadow: 2px 2px 2px 3px rgb(0 0 0 / 30%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    color: inherit;
    font-family: "Roboto Slab", serif;
    font-weight: bolder;
    overflow: hidden;
}

.carta.selecionada {
    top: -10px;
}

.carta::before {
    align-self: flex-start;
    margin-left: 2px;
    font-size: var(--font-number-size);
    color: inherit;
    font-family: "Roboto Slab", serif;
    line-height: 0.9;
}

.carta::after {
    font-size: var(--font-symbol-size);
    color: inherit;
    font-family: "Roboto Slab", serif;
    line-height: 0.8;
    margin-top: var(--symbol-margin-top);
    margin-left: var(--symbol-margin-left);
}

/* Cada carta agora ocupa seu        /* Calcula o left com base na posição e no tamanho do símbolo */
.carta {
    /* Usamos --len vindo do HTML; se não existir, o padrão é 1.5 */
    --divisor: var(--meld-len, 1.5);
    --fatia: calc(var(--font-symbol-size) / var(--divisor));

    position: relative !important;
    flex-shrink: 0;
}

/* Sobreposição dinâmica baseada nas variáveis do cartas.css */
.carta:not(:first-child) {
    margin-left: calc(-1 * (var(--card-width) - var(--fatia)));
}

.meld {
    display: flex;
    flex-direction: row;

    /* Apenas para visualizar o box do meld */
    border-radius: 5px;

    position: relative;
    /* Necessário para o meld-info absoluto */

}

.meld-info {
    position: absolute;
    top: 0;
    right: 0px;
    bottom: 0;
    width: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #00000033;
    color: #ffffff;
    font-weight: bold;
    z-index: 10;
    font-size: 9px;
    pointer-events: none;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    border-radius: 5px 0px 0px 5px;
}


.meld.mortos .carta::after,
.meld.monte .carta::after {
    content: var(--morto-name, var(--monte-size));
    position: absolute;
    top: 6px;
    left: var(--tags-left);
    background: black;
    color: white;
    padding: 1px 3px;
    font-size: 10px;
    font-weight: bold;
    border-radius: 2px;
    z-index: 5;
    line-height: 1;
}



/* Não interfere no clique das cartas */


.meld-value::after {
    content: var(--meld-info, "0");
}


@media (max-width: 600px),
(max-height: 500px) {


    .meld-info {
        font-size: 7px;
        padding: 4px 1px;
    }

    .linha {
        gap: 5px;
    }

    .carta {
        /* Usamos --len vindo do HTML; se não existir, o padrão é 1.5 */
        --divisor: var(--meld-len, 1.5);
        --fatia: calc(var(--font-symbol-size) / var(--divisor));

        position: relative !important;
        flex-shrink: 0;
    }
}

.X1C {
    content: "♥";
    color: var(--cor-copas);
}

.X1C::before {
    content: "A";
}

.X1C::after {
    content: "♥";
}

.X1O {
    content: "♦";
    color: var(--cor-ouro);
}

.X1O::before {
    content: "A";
}

.X1O::after {
    content: "♦";
}

.X1P {
    content: "♣";
    color: var(--cor-paus);
}

.X1P::before {
    content: "A";
}

.X1P::after {
    content: "♣";
}

.X1E {
    content: "♠";
    color: var(--cor-espada);
}

.X1E::before {
    content: "A";
}

.X1E::after {
    content: "♠";
}

.X2C {
    content: "♥";
    color: var(--cor-copas);
}

.X2C::before {
    content: "2";
}

.X2C::after {
    content: "♥";
}

.X2O {
    content: "♦";
    color: var(--cor-ouro);
}

.X2O::before {
    content: "2";
}

.X2O::after {
    content: "♦";
}

.X2P {
    content: "♣";
    color: var(--cor-paus);
}

.X2P::before {
    content: "2";
}

.X2P::after {
    content: "♣";
}

.X2E {
    content: "♠";
    color: var(--cor-espada);
}

.X2E::before {
    content: "2";
}

.X2E::after {
    content: "♠";
}

.X3C {
    content: "♥";
    color: var(--cor-copas);
}

.X3C::before {
    content: "3";
}

.X3C::after {
    content: "♥";
}

.X3O {
    content: "♦";
    color: var(--cor-ouro);
}

.X3O::before {
    content: "3";
}

.X3O::after {
    content: "♦";
}

.X3P {
    content: "♣";
    color: var(--cor-paus);
}

.X3P::before {
    content: "3";
}

.X3P::after {
    content: "♣";
}

.X3E {
    content: "♠";
    color: var(--cor-espada);
}

.X3E::before {
    content: "3";
}

.X3E::after {
    content: "♠";
}

.X4C {
    content: "♥";
    color: var(--cor-copas);
}

.X4C::before {
    content: "4";
}

.X4C::after {
    content: "♥";
}

.X4O {
    content: "♦";
    color: var(--cor-ouro);
}

.X4O::before {
    content: "4";
}

.X4O::after {
    content: "♦";
}

.X4P {
    content: "♣";
    color: var(--cor-paus);
}

.X4P::before {
    content: "4";
}

.X4P::after {
    content: "♣";
}

.X4E {
    content: "♠";
    color: var(--cor-espada);
}

.X4E::before {
    content: "4";
}

.X4E::after {
    content: "♠";
}

.X5C {
    content: "♥";
    color: var(--cor-copas);
}

.X5C::before {
    content: "5";
}

.X5C::after {
    content: "♥";
}

.X5O {
    content: "♦";
    color: var(--cor-ouro);
}

.X5O::before {
    content: "5";
}

.X5O::after {
    content: "♦";
}

.X5P {
    content: "♣";
    color: var(--cor-paus);
}

.X5P::before {
    content: "5";
}

.X5P::after {
    content: "♣";
}

.X5E {
    content: "♠";
    color: var(--cor-espada);
}

.X5E::before {
    content: "5";
}

.X5E::after {
    content: "♠";
}

.X6C {
    content: "♥";
    color: var(--cor-copas);
}

.X6C::before {
    content: "6";
}

.X6C::after {
    content: "♥";
}

.X6O {
    content: "♦";
    color: var(--cor-ouro);
}

.X6O::before {
    content: "6";
}

.X6O::after {
    content: "♦";
}

.X6P {
    content: "♣";
    color: var(--cor-paus);
}

.X6P::before {
    content: "6";
}

.X6P::after {
    content: "♣";
}

.X6E {
    content: "♠";
    color: var(--cor-espada);
}

.X6E::before {
    content: "6";
}

.X6E::after {
    content: "♠";
}

.X7C {
    content: "♥";
    color: var(--cor-copas);
}

.X7C::before {
    content: "7";
}

.X7C::after {
    content: "♥";
}

.X7O {
    content: "♦";
    color: var(--cor-ouro);
}

.X7O::before {
    content: "7";
}

.X7O::after {
    content: "♦";
}

.X7P {
    content: "♣";
    color: var(--cor-paus);
}

.X7P::before {
    content: "7";
}

.X7P::after {
    content: "♣";
}

.X7E {
    content: "♠";
    color: var(--cor-espada);
}

.X7E::before {
    content: "7";
}

.X7E::after {
    content: "♠";
}

.X8C {
    content: "♥";
    color: var(--cor-copas);
}

.X8C::before {
    content: "8";
}

.X8C::after {
    content: "♥";
}

.X8O {
    content: "♦";
    color: var(--cor-ouro);
}

.X8O::before {
    content: "8";
}

.X8O::after {
    content: "♦";
}

.X8P {
    content: "♣";
    color: var(--cor-paus);
}

.X8P::before {
    content: "8";
}

.X8P::after {
    content: "♣";
}

.X8E {
    content: "♠";
    color: var(--cor-espada);
}

.X8E::before {
    content: "8";
}

.X8E::after {
    content: "♠";
}

.X9C {
    content: "♥";
    color: var(--cor-copas);
}

.X9C::before {
    content: "9";
}

.X9C::after {
    content: "♥";
}

.X9O {
    content: "♦";
    color: var(--cor-ouro);
}

.X9O::before {
    content: "9";
}

.X9O::after {
    content: "♦";
}

.X9P {
    content: "♣";
    color: var(--cor-paus);
}

.X9P::before {
    content: "9";
}

.X9P::after {
    content: "♣";
}

.X9E {
    content: "♠";
    color: var(--cor-espada);
}

.X9E::before {
    content: "9";
}

.X9E::after {
    content: "♠";
}

.XAC {
    content: "♥";
    color: var(--cor-copas);
}

.XAC::before {
    content: "10";
    letter-spacing: -3px;
}

.XAC::after {
    content: "♥";
}

.XAO {
    content: "♦";
    color: var(--cor-ouro);
}

.XAO::before {
    content: "10";
    letter-spacing: -3px;
}

.XAO::after {
    content: "♦";
}

.XAP {
    content: "♣";
    color: var(--cor-paus);
}

.XAP::before {
    content: "10";
    letter-spacing: -3px;
}

.XAP::after {
    content: "♣";
}

.XAE {
    content: "♠";
    color: var(--cor-espada);
}

.XAE::before {
    content: "10";
    letter-spacing: -3px;
}

.XAE::after {
    content: "♠";
}

.XBC::before {
    content: "J";
}

.XBC::after {
    content: "♥";
}

.XBC {
    color: var(--cor-copas);
}

.XBO::before {
    content: "J";
}

.XBO::after {
    content: "♦";
}

.XBO {
    color: var(--cor-ouro);
}

.XBP::before {
    content: "J";
}

.XBP::after {
    content: "♣";
}

.XBP {
    color: var(--cor-paus);
}

.XBE::before {
    content: "J";
}

.XBE::after {
    content: "♠";
}

.XBE {
    color: var(--cor-espada);
}

.XCC::before {
    content: "Q";
}

.XCC::after {
    content: "♥";
}

.XCC {
    color: var(--cor-copas);
}

.XCO::before {
    content: "Q";
}

.XCO::after {
    content: "♦";
}

.XCO {
    color: var(--cor-ouro);
}

.XCP::before {
    content: "Q";
}

.XCP::after {
    content: "♣";
}

.XCP {
    color: var(--cor-paus);
}

.XCE::before {
    content: "Q";
}

.XCE::after {
    content: "♠";
}

.XCE {
    color: var(--cor-espada);
}

.XDC::before {
    content: "K";
}

.XDC::after {
    content: "♥";
}

.XDC {
    color: var(--cor-copas);
}

.XDO::before {
    content: "K";
}

.XDO::after {
    content: "♦";
}

.XDO {
    color: var(--cor-ouro);
}

.XDP::before {
    content: "K";
}

.XDP::after {
    content: "♣";
}

.XDP {
    color: var(--cor-paus);
}

.XDE::before {
    content: "K";
}

.XDE::after {
    content: "♠";
}

.XDE {
    color: var(--cor-espada);
}

.XJK {
    color: var(--cor-paus);
}

.XJK::before {
    content: "JOKER";
    writing-mode: vertical-lr;
    font-size: 12px;
    font-weight: bold;
    position: absolute;
    top: 5px;
    left: 3px;
}

.XNG {
    background-color: transparent;
    border: 2px dashed white;
    color: white;
    font-size: 12px;
    font-weight: bolder;
    text-align: center;
    padding: 0;
}

.XNG::before {
    content: "NOVO JOGO";
    font-size: 9px;
    font-weight: bolder;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

.cartamao {
    height: 100px !important;
    width: 70px !important;
    border-radius: 5px;
    background-color: #f9e8c7;
    position: absolute;
    padding: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    font-family: "Roboto Slab", serif;
    font-weight: bolder;
    overflow: hidden;
}

.cartamao::before {
    align-self: flex-start;
    margin-left: 5px;
    font-size: 25px;
    color: inherit;
    font-family: "Roboto Slab", serif;
    line-height: .9;
}

.cartamao::after {
    align-self: center;
    font-size: 40px;
    color: inherit;
    font-family: "Roboto Slab", serif;
    line-height: .8;
    margin-top: -5px;
}

.XDS {
    background-color: transparent;
    border: 2px dashed white;
    color: white;
    font-size: 12px;
    font-weight: bolder;
    text-align: center;
    padding: 0;
}



@media screen and (max-height: 450px) {
    .carta {
        height: var(--card-height) !important;
        width: var(--card-width) !important;
        font-size: 20px;
        padding: 2.5px;
        padding-right: 5px;
    }

    .carta::before {
        font-size: 18px;
        margin-left: 1.5px;
        align-self: flex-start;
    }

    .carta::after {
        font-size: 16px;
        margin-top: -1px;
        margin-left: -11px;
    }

    .cartamao {
        height: 50px !important;
        width: 35px !important;
        font-size: 20px;
        padding: 2.5px;
        padding-right: 5px;
    }

    .cartamao::before {
        font-size: 15px;
        top: 0px;
        left: 2.5px;
    }

    .cartamao::after {
        font-size: 20px;
        top: 10px;
        left: 2.5px;
    }

    .XJK::before {
        font-size: 6px;
        top: 2.5px;
        left: 1.5px;
    }

    .XNG {
        font-size: 6px;
    }

    .XNG::before {
        font-size: 4.5px;
    }

    .XDS {
        font-size: 6px;
    }
}

@media screen and (max-height: 393px) {
    .carta {
        height: var(--card-height) !important;
        width: var(--card-width) !important;
        font-size: 20px;
        padding: 2.5px;
        padding-right: 5px;
    }


    .carta::before {
        font-size: var(--number-font-size);
        margin-left: var(--number-margin-left);
        align-self: flex-start;
    }

    .carta::after {
        font-size: var(--symbol-font-size);
        margin-top: var(--symbol-margin-top);
        margin-left: var(--symbol-margin-left);
    }
}

/*
- este comentario é a ultima linha deste programa.
- qualquer conteudo deve ser adicionado antes deste comentário.
*/