@charset "UTF-8";


*{
    margin: 0;
    padding: 0;
}

body{
    font-family: Arial, Helvetica, sans-serif;
    background-color: #702d00;
    user-select: none;
}

:root{
    --alturaCartas: 110px;
    --larguraCartas: 75px;
}

.coluna{
    margin: 10px 0px;
    height: min-content;
    position: relative;
    min-height: 6em;
}

#mesa{
    background-color: #702d00;
    padding-top: 10px;
    padding-bottom: 10px;
    box-shadow: 0px 5px 3px rgba(0, 0, 0, .1) inset;
    display: flex;
    justify-content: center;
}

.espada{
    background-image: url('img/espada-pronto.png');
}

.copas{
    background-image: url('img/Copas-pronto.png');
}

.paus{
    background-image: url('img/paus-pronto.png');
}

.ouros{
    background-image: url('img/Ouros-pronto.png');
}


.cartas{
    background-color: lightgray;
    background-size: 120px 110px;
    background-position: center center;
    background-repeat: no-repeat;
    height: var(--alturaCartas);
    width: var(--larguraCartas);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 4.5em;
    -webkit-text-stroke: 2px white;
    border: 1px solid black;
    cursor: pointer;
    position: relative;
}

#container{
    width: 900px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    justify-content: space-between;

}
/* 
#blur{
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    display: flex;
    justify-content: center;
    align-items: center;
    display: none;
}

#blur_buttons {
    background-color: #702d00;
    height: 200px;
    display: grid;
    grid-template-rows: 90px 90px;
    align-content: center;
    border: 10px solid #502000;
    border-radius: 15px;
    box-shadow: 0px 0px 12px rgba(0, 0, 0, .8) inset;
}

div#botoes{
    width: max-content;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    justify-content: center;
    align-items: center;
}



#blur_buttons button{
    cursor: pointer;
}

.botao_escolha, #cancelar button{
    margin: 10px;
    height: 25px;
    width: 100px;
    background-color: cyan;
    border: 1px solid gray;
    width: 100px;
    height: 60px;
    border-radius: 6px;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, .2);
}

#cancelar{
    display: flex;
    justify-content: center;
    align-items: center;
}

#cancelar button{
    background-color: #ca2222;
    color: white;
    font-weight: 400;
}

.botao_escolha:active, #cancelar button:active{
    box-shadow: none;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, .6) inset;
}

.botao_escolha:disabled, #cancelar button:disabled{
    background-color: gray;
} */

#pesca{
    box-sizing: border-box;
    height: 100%;
    min-width: 200px;
    display: grid;
    grid-template-columns: 80px 80px;
    justify-content: space-around;
    padding: 20px;
}

#pesca .areaPesca{
    cursor: auto;
}

#pesca button{
    cursor: pointer;
}

#finalizados{
    height: 100%;
    min-width: 600px;
    position: relative;
}

#ParteCima{
    display: grid;
    grid-template-columns: 1fr 3fr;
    height: min-content;
    background-color: rgb(56, 25, 0);
}

#mesa .cartas{
    position: absolute;
}

#botao{
    display: none;
    font-weight: bold;
    font-size: 1em;
    border: 2px solid black;
    background-color: lightgray;
    background-image: url('img/Return.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    /* text-align: center;
    display: flex;
    align-items: center;
    justify-content: center; */
}

.final{
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(var(--alturaCartas) + 2px);
    width: var(--larguraCartas);
    border: 1px solid lightgray;
}

.final{
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

}



#espada{
    background-image: url("img/espada-pronto-opaco.png");
}
#copas{
    background-image: url("img/Copas-pronto-opaco.png");
}
#ouros{
    background-image: url("img/Ouros-pronto-opaco.png");
}
#paus{
    background-image: url("img/paus-pronto-opaco.png");
}



#AreaFinal{
    position: absolute;
    width: 500px;
    display: grid;
    grid-template-columns: repeat(4, 80px);
    justify-content: space-around;
    right: 40px;
    top: calc(50% - 65px);
}

#btnPescar{
    background-color: rgb(100, 100, 100);
    width: 60px;
    height: 60px;
    border-radius: 8px;
    color: white;
    -webkit-text-stroke: 0;
}

.areaPesca{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: darkgray;
    border: 3px solid white;
}

.escondida{
    background-color: rgb(214, 214, 214);
    background-image: url('img/FundoCarta.png') !important;
    background-size: cover;
    font-size: 0;
    -webkit-text-stroke: none;
    background-image: none;
    pointer-events: none;
}

#texto{
    grid-column-start: 1;
    grid-column-end: 5;
    margin-top: 5px;
    padding: 2px;
}

.sinalizador{
    width: 66px;
    height: 15px;
    padding: 5px;
}

#texto, .sinalizador{
    border: 1px solid black;
    text-align: center;
    border-radius: 5px 5px 0 0;
    background-color: lightgray;
    box-shadow: 2px 0 2px rgba(0, 0, 0, .2);
    font-weight: 600;
}

.cartas:not(.escondida)::before{
    content: attr(data-content);
    font-size: 16px;
    position: absolute;
    top: 5px;
    left: 4px;
    -webkit-text-stroke: 0px;
    color: black;
}