/* // <weight>: Use a value from 100 to 700
// <uniquifier>: Use a unique and descriptive class name

.josefin-sans-<uniquifier> {
  font-family: "Josefin Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal; 
  
.agbalumo-regular {
  font-family: "Agbalumo", system-ui;
  font-weight: 400;
  font-style: normal;
}

.bebas-neue-regular {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
  font-style: normal;
}

  */

:root{
    --roxo_header: rgb(55, 34, 85);
    --roxo_de_fundo: rgb(77, 0, 107);
    --roxo_menu_jogos: rgb(60, 15, 78, 0.3);
    --roxo_itens_carrocel: rgb(42, 14, 80);
    --campo_botoes: rgb(29, 11, 131);
    --botao: rgb(93, 68, 240);
    --parar: rgb(158, 15, 15);
    --mais_carta: rgb(36, 113, 133);
    --dividir: rgb(45, 151, 31);
    --dobrar: rgb(187, 184, 21);
    --branco_cartas: rgb(226, 206, 206);
    --branco_texto_botao: rgb(255, 255, 255);
    --fonte_titulo: "Agbalumo", system-ui;
    --fonte_texto: "Josefin Sans", sans-serif;
    --fonte_super_titulo: "Bebas Neue", sans-serif;
    --contraste_fundo: rgb(23, 150, 189);
}

header{
    grid-area: header;
    background-color: var(--roxo_header);
    padding: 15px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

}

.estilo_banca{
  font-family: var(--fonte_texto);
  text-align: right;
  font-size: 2rem;
  margin-right: 15%;
  border: 6px solid;
  display: inline-block;
  padding: 8px 8px;
  color: var(--contraste_fundo);
}

body{
    display: grid;
    grid-template-areas: 
    "header header"
    "menu main";
    grid-template-rows: auto 1fr;
    grid-template-columns: 10% 1fr;
    height: 100vh;
    background-color: var(--roxo_de_fundo);
    margin: 0;
}

.titulo_Cacino{
    font-family: var(--fonte_titulo);
    font-weight: 400;
    font-style: italic;
    font-size: 60px;
    margin: 0;
}

.menu_lateral_jogos{
  grid-area: menu;
  background-color: var(--roxo_menu_jogos);
  margin: 0;
}

main{
  grid-area: main;
}

.escolhe__Jogo{
  grid-area: main;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 2rem;
  display: none;
}

.caixa{
  background-color: var(--roxo_menu_jogos);
  width: 90%;
  height: 40%;
  margin: 2rem;
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  scrollbar-width: none;
  border-radius: 3rem;
}

.caixa:hover{
  cursor: grab;
}

.caixa:active{
  cursor: grabbing;
}

.caixa::-webkit-scrollbar {
  display: none; /* Chrome, Edge, Safari */
}

.itens_carrocel{
  background-color: var(--roxo_itens_carrocel);
  flex: 0 0 30%;
  border-radius: 2rem;
  margin: 2rem;
}

.itens_carrocel.arrastando {
  margin: 0.5rem;
  border-radius: 3rem;
}

.itens_carrocel:hover{
  margin: 0.5rem;
  border-radius: 3rem;
}

/* inicia black Jack */

.inicio_jogo_container{
  display: flex;
  flex-direction: column;
  justify-content: center; /* centraliza horizontal */
  align-items: center;     /* centraliza vertical */
  width: 100vw;
  height: 100vh;
  position: absolute; /* garante que fique sobre o resto da página */
  top: 0;
  left: 0;
  z-index: 1000; /* acima de tudo */
}

.super_titulo{
  font-family: var(--fonte_super_titulo);
  font-size: 10vw;

}
.inicio_jogo{
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--fonte_titulo);
  font-size: 20px;
  background-color: var(--contraste_fundo);
  border: none;
  padding: 10px 20px;
  border-radius: 10px;
  cursor: pointer;
  transition: 0.5rem;
  width: 10rem;

}

/* JOGO DE BLACK JACK */

.bJ{
  grid-area: main;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: auto;
  gap: 5%;
  display: none;
}

.informativos{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
}

.titulo{
  font-family: var(--fonte_titulo);
  font-size: 40px;
  margin: 0 30px;
  white-space: nowrap;

}

.irmaos{
  display: flex;
  flex-direction: row;
  align-items: center;
}
.soma, .pontuacao{
  font-family: var(--fonte_texto);
  font-size: 4rem;
  margin: 0;
}

.parte{
  width: 90%;
  max-height: 450px;
  border-radius: 3rem;
  display: flex;
  flex-direction: row;
  gap: 5%;
  justify-content: center;
}

.campo_cartas{
  background-color: var(--roxo_menu_jogos);
  width: 90%;
  max-height: 450px;
  border-radius: 3rem;
  display: flex;
  flex-direction: row;
  gap: 5%;
  justify-content: center;
  margin: 10px;
}

.carta{
  flex: 1 1 100px;
  max-width: 150px; 
  max-height: 250px;
  aspect-ratio: 5.2 / 7.5;
  border-radius: clamp(1px, 2vw, 6px);
  overflow: hidden;
  background-color: var(--branco_cartas);
  background-size: 100% 100%;
  background-position: center;
  margin: 10px;
}

.cartas{
  flex: 1; 
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.campo_botoes{
  background-color: var(--campo_botoes);
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 0 auto; 
  width: fit-content;
  border-radius: 1rem;
  gap: 10%;
  transform: translatex( -150px); 

}

.botao{
  background-color: var(--botao);
  color: var(--branco_texto_botao);
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  transition: 0.3s;
  margin: 0.5rem;
  align-items: center;
  width: 8rem;
  height: 5rem;
}

.parar{
  background-color: var(--parar);
}



.mais_uma_carta{
  background-color: var(--mais_carta);
}

.dividir_cartas{
  background-color: var(--dividir);
  display: none;
}

.dobrar_o_valor{
  background-color: var(--dobrar);
  display: none;
}

.parar:hover,
 .mais_uma_carta:hover,
  .dividir_cartas:hover,
   .dobrar_o_valor:hover{
  width: 8.5rem;
  height: 5.5rem;
}