@import url("https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap");

* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
  font-family: "Luckiest Guy", cursive;
  font-weight: 400;
}

body {
  height: 100vh;
  width: 100%;
}

.conteudo-principal {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background: linear-gradient(130deg, rgb(237, 174, 57), rgb(235, 192, 113));
}

.bolinhas {
  position: absolute;
  height: 100%;
  width: 100%;
  background-image: radial-gradient(
    rgba(212, 112, 19, 0.144) 15%,
    transparent 10%
  );
  background-size: 70px 70px;
}

.menu {
  display: flex;
  flex-direction: column;
  justify-content: space-around;

  gap: 15px;
  padding: 10px;

  max-width: 1024px;
  width: 100%;

  z-index: 1;
}

.titulo {
  width: 200px;
  text-align: center;
  font-size: 36px;
  margin: 0px auto;

  letter-spacing: 1px;
  color: rgb(255, 204, 0);

  text-shadow: -2px -2px 0 #6b1a00, 2px -2px 0 #6b1a00, -2px 2px 0 #6b1a00,
    2px 2px 0 #6b1a00;
}

.titulo-grande {
  font-size: 60px;
  text-align: center;

  color: #ff0055;

  text-shadow: -3px -3px 0 #930434, 3px -3px 0 #930434, -3px 3px 0 #930434,
    3px 3px 0 #930434;
}

.secao-jogar {
  display: flex;
  justify-content: center;
  align-items: center;
}

.secao-cartas {
  display: flex;
  flex-direction: column;

  gap: 10px;
}

.carta {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 5px solid white;
  border-radius: 5px;

  width: 65px;
  height: 75px;
  margin: 10px;
}

.carta.direita {
  transform: rotate(10deg);
  box-shadow: 4px 7px 1px 1px rgba(0, 0, 0, 0.2);
}

.carta.esquerda {
  transform: rotate(-10deg);
  box-shadow: -4px 7px 1px 1px rgba(0, 0, 0, 0.2);
}

.fundo-carta {
  display: flex;
  justify-content: center;
  align-items: center;

  height: 100%;
  width: 100%;
  border-radius: 5px;
}

.fundo-carta.vermelho {
  background-color: rgba(245, 33, 33, 0.779);
}

.fundo-carta.azul {
  background-color: rgba(38, 134, 245, 0.837);
}

.fundo-carta.verde {
  background-color: rgba(148, 228, 26, 0.753);
}

.fundo-carta.roxo {
  background-color: rgba(110, 56, 236, 0.626);
}

.btn-jogar {
  background: linear-gradient(to bottom, #f3ae37, #ffb302);

  width: 110px;
  height: 60px;
  box-shadow: 0px 3px 1px 1px rgba(253, 167, 6, 0.5);

  border: solid 2px rgb(188, 123, 3);
  border-radius: 30px;

  color: #fff;
  font-size: 20px;
  text-transform: uppercase;

  cursor: pointer;
}

.btn-jogar:hover {
  background-color: rgb(232, 156, 15);
}

.btn-jogar:active {
  background-color: rgb(255, 180, 42);
}

#modal-modos {
  border: none;
  border-radius: 15px;

  top: 50%;
  left: 50%;

  transform: translate(-50%, -30%);
}

.btn {
  letter-spacing: 1px;

  padding: 12px 25px;

  font-weight: bold;
  color: white;

  box-shadow: 0 4px 0 #e68900, 0 6px 12px rgba(0, 0, 0, 0.2); /* sombra de relevo */

  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;

  border-radius: 20px;
  font-size: 26px;

  border: none;
}

.btn.facil {
  background: rgba(19, 198, 19, 0.7);
  box-shadow: 0px 0px 0px 2px rgb(1, 97, 1);

  text-shadow: 2px 2px 0 rgb(5, 177, 5), -2px 2px 0 rgb(5, 177, 5),
    2px -2px 0 rgb(5, 177, 5), -2px -2px 0 rgb(5, 177, 5);
}

.btn.medio {
  background: rgb(248, 171, 29);
  box-shadow: 0px 0px 0px 2px rgb(186, 122, 2);

  text-shadow: 2px 2px 0 rgb(226, 163, 44), -2px 2px 0 rgb(226, 163, 44),
    2px -2px 0 rgb(226, 163, 44), -2px -2px 0 rgb(226, 163, 44);
}

.btn.dificil {
  background: rgba(255, 0, 0, 0.7);
  box-shadow: 0px 0px 0px 2px rgb(167, 3, 3);

  text-shadow: 2px 2px 0 rgb(249, 32, 32), -2px 2px 0 rgb(249, 32, 32),
    2px -2px 0 rgb(249, 32, 32), -2px -2px 0 rgb(249, 32, 32);
}

.modos {
  display: flex;
  flex-direction: column;

  gap: 10px;

  width: 100%;
  max-width: 300px;
  padding: 20px;

  border-radius: inherit;

  background-color: rgb(255, 210, 127);
}

.modos h3 {
  font-size: 28px;
  color: #f59301;

  text-align: center;
  max-width: 200px;
  margin: 0px auto;
}

.modos h3 span {
  color: rgba(245, 64, 64, 0.94);
  letter-spacing: 1px;

  text-shadow: 1.5px 1.5px 0 rgb(149, 28, 28), -1.5px 1.5px 0 rgb(149, 28, 28),
    1.5px -1.5px 0 rgb(149, 28, 28), -1.5px -1.5px 0 rgb(149, 28, 28);
}