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

/* reset css */
* {
  margin: 0px;
  padding: 0px;
}

body {
  display: flex;
  flex-direction: column;
  background-color: rgba(0, 0, 0, 0.868);
  color: white;
}

div {
  display: flex;
  justify-content: center;
}

#menu-redondo > p {
  color: white;
  transform: rotate(-45deg);
}
/*ESTILIZAÇÃO PADRÃO*/

/*CABEÇALHO E PLACAR*/
#cabecalho {
  font-weight: 100;
  margin: 15px;
  padding: 4px;
  font-family: 'Raleway', sans-serif;
  display: flex;
  min-width: 280px;
  flex-direction: column;
}
#tittle-container {
  padding: 10px;
  display: flex;
  flex-direction: column;
}
#game-tittle {
  font-weight: bolder;
  color: gray;
  font-size: clamp(
    10px,
    7vw,
    70px
  ); /*clamp recebe valor minimo, ideal, maximo para trabalhar com mobile */
  font-weight: 600;
}
.game-sub-tittle {
  font-weight: bolder;
  color: gray;
  font-size: clamp(2px, 2vw, 20px);
  font-weight: 600;
}

#placar-container {
  width: 100%;
  display: flex;
}

#placar-component {
  border-radius: 5px;
  background: linear-gradient(145deg, #3b3b3b, #222222);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  height: 100%;
  padding: 10px 0px;
  min-width: 100%;
}

.placar-tittle-container {
  background: linear-gradient(145deg, #3b3b3b, #222222);
  text-align: center;
  font-family: 'Roboto', sans-serif;
  color: white;
  border-radius: 5px;
  width: 80%;
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.5);
}

.placar-tittle {
  font-size: clamp(2px, 4vw, 25px);
}

#pontuacoes {
  width: 80%;
  text-align: center;
}
#pontuacao-atual {
  margin: 10px 0px;
  font-size: clamp(5px, 3.8vw, 20px);
}

.pontuacao-item {
  font-size: clamp(5px, 3.9vw, 20px);
  justify-content: center;
  align-items: center;
}
#pontos-atuais {
  margin-left: 10px;
  margin-right: 3px;
  font-size: clamp(5px, 4vw, 20px);
}
#ultimos-pontos {
  margin-left: 10px;
  margin-right: 3px;
  font-size: clamp(5px, 4vw, 20px);
}

.placar-tittle-container.gold-tittle {
  background: linear-gradient(145deg, #d4af37, #f5c731, #c8a300);
}

#historico-pontuacoes {
  text-align: center;
  margin-top: 10px;
  width: 100%;
}

#lista-historico-pontuacao {
  list-style: none;
  width: 75%;
}

.item-historico-pontuacao {
  gap: 6px;
  margin: 5px 0;
  display: flex;
  justify-content: space-between;
  font-weight: bolder;
  font-size: large;
  font-size: 0.8rem;
}
.historico-nome-pontuador {
}
.historico-quantidade-pontos {
}

/* GAME */
#game-container {
  position: relative;
  height: auto;
  margin-top: -50px;
  height: 580px;
  min-width: 1000px;
  display: flex;
  flex-direction: column;
  text-align: start;
  align-items: center;
}
.triangulo {
  width: 0px;
  height: 0px;
  cursor: pointer;
  background-color: transparent;
}
.triangulo-cima {
  border-left: 62.5px solid transparent;
  border-top: none;
  border-right: 62.5px solid transparent;
}
.triangulo-cima-aceso {
  transition: all 0.6s;
  border-bottom: 300px solid rgb(0, 177, 0);
}

.triangulo-cima-apagado {
  border-bottom: 300px solid rgb(0, 85, 0);
}
#botao-cima {
}

button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.triangulo-baixo {
  border-left: 62.5px solid transparent;

  border-right: 62.5px solid transparent;
  border-bottom: none;
}
.triangulo-baixo-aceso {
  transition: all 0.6s;
  border-top: 300px solid rgb(49, 49, 255);
}

.triangulo-baixo-apagado {
  border-top: 300px solid rgb(14, 14, 136);
}
#botao-baixo {
}

.triangulo-esquerda {
  border-top: 62.5px solid transparent;
  border-bottom: 62.5px solid transparent;
  border-left: none;
}

.triangulo-esquerda-aceso {
  transition: all 0.6s;
  border-right: 300px solid rgb(155, 55, 255);
}

.triangulo-esquerda-apagado {
  border-right: 400px solid rgb(82, 0, 163);
}

#botao-esquerda {
}

.triangulo-direita {
  border-top: 62.5px solid transparent;
  border-bottom: 62.5px solid transparent;
  border-right: none;
}
.triangulo-direita-aceso {
  border-left: 400px solid rgb(230, 68, 10);
  transition: all 0.6s;
}

.triangulo-direita-apagado {
  border-left: 400px solid rgb(126, 34, 0);
}
#botao-direita {
}

#menu-quadrado {
  background-color: rgba(0, 0, 0, 0.898);
  text-align: center;
  align-items: center;
  z-index: 9999;
  transform: rotate(45deg);
}
#menu-redondo {
  width: 200.5px;
  height: 200.5px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.898);
  color: black;
  text-align: center;
  position: absolute;
  align-items: center;
}

.botao-menu {
  background: none;
  cursor: pointer;
  border-bottom: 4px solid gray;
  color: white;
  transform: rotate(-45deg);
  font-family: 'Raleway', sans-serif;
  font-weight: bold;
  size: clamp(2px, 3vw, 25px);
}

#container-reset-jogo {
  /* background-color: rebeccapurple; */
  width: 80%;
  height: 90%;
}
#container-reset-jogo p {
  transform: rotate(-45deg);
  color: white;
  width: 100%;
}
.botao-menu-pos-derrota {
  height: 28%;
  display: flex;
  justify-content: center;
  width: 100%;
  text-align: center;
  margin: auto;
  background: none;
  cursor: pointer;
  border-bottom: 4px solid gray;
  color: white;
  transform: rotate(-45deg);
  font-family: 'Raleway', sans-serif;
  font-weight: bold;
  size: clamp(2px, 2vw, 25px);
}

#botao-tentar-novamente {
  /* display: none; */
}
#botao-novo-jogador {
  /* display: none; */
}

/*FOOTER*/
#footer {
  flex-direction: row-reverse;
  list-style: none;
}
#regras-container {
  height: 35%;
  width: 25%;
  /* background-color: rgba(0, 0, 0, 0.651); */
  position: absolute;
  list-style: none;
  left: 5%;
  bottom: 5%;
  text-align: left;
  flex-direction: column;
  color: white;
  border-radius: 4px;
  padding-left: 24px;
  padding-right: 24px;
  justify-content: start;
  text-decoration: none;
  /* overflow: scroll; */
}

#titulo-regra-cotainer {
  padding-top: 10px;
  list-style: none;
  font-size: clamp(15px, 1vw, 30px);
}

#regra-lista {
  text-decoration: none;
  list-style: none;
}
.regra-item {
  list-style: none;
}

#dev-container {
  font-family: 'Raleway', sans-serif;
  font-weight: bold;
  user-select: none;
  display: flex;
  flex-direction: column;
  width: 25%;
  height: 20%;
  float: right;
  min-width: 350px;
  position: absolute;
  right: 0.5%;
  bottom: 10%;
}
#titulo-desenvolvedor {
  font-size: clamp(30px, 2vw, 70px);
}
#nome-desenvolvedor {
  margin-left: 30px;
  font-size: clamp(50px, 2vw, 70px);
}
.display {
  display: none;
}
/*ESTILIZACAO MODAL INICIO DE JOGO*/
.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 15, 15, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.modal.hidden {
  display: none;
}

.modal-content {
  background: linear-gradient(145deg, #3b3b3b, #222222);
  border-radius: 12px;
  padding: 20px;
  width: 90%;
  /* height: 100%; */
  max-width: 400px;
  font-family: 'Roboto', sans-serif;
  color: white;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  gap: 15px;
  animation: fadeIn 0.3s ease-in-out;
}

.modal-content h2 {
  font-size: clamp(18px, 4vw, 28px);
  margin-bottom: 10px;
  text-align: center;
  font-weight: bold;
  color: gray;
}

.modal-content label {
  font-size: clamp(12px, 2.5vw, 16px);
  margin-bottom: 5px;
}
#form-inicio-jogo {
  /* background-color: #07b39b; */
  max-width: 90%;
}
#nome {
  width: 93%;
  padding: 10px;
  border: none;
  border-radius: 8px;
  font-size: clamp(12px, 2.5vw, 16px);
  outline: none;
  background: #1e1e1e;
  color: white;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6);
}
#dificuldade {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 8px;
  font-size: clamp(12px, 2.5vw, 16px);
  outline: none;
  background: #1e1e1e;
  color: white;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.6);
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23fff' stroke-width='2' fill='none' fill-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 8px;
}

.modal-content input:focus,
.modal-content select:focus {
  border: 1px solid #f79533;
}

.botoes {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
  gap: 10px;
}

.botoes button {
  flex: 1;
  padding: 10px;
  font-size: clamp(12px, 2.5vw, 16px);
  font-weight: bold;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.2s ease-in-out;
}

#fechar-modal {
  background: #444;
  color: white;
}

#fechar-modal:hover {
  background: #666;
}

#iniciar-partida {
  background: linear-gradient(145deg, #d4af37, #f5c731, #c8a300);
  color: black;
}

#iniciar-partida:hover {
  background: linear-gradient(145deg, #f5c731, #d4af37);
}

/*FIM ESTILIZACAO PADRÃO*/

@media (max-width: 598px) {
  /*CABEÇALHO E PLACAR*/
  #cabecalho {
  }
  #tittle-container {
    text-align: center;
    gap: 3px;
    padding: 5px;
  }
  #placar-container {
    width: 100%;
    min-width: 20%;
  }
  #placar-component {
    padding: 5px 0px;
  }

  .placar-tittle-container {
  }

  #placar-tittle {
  }

  #pontuacoes {
    margin: 2px 0px;
  }
  .pontuacao-item {
    margin: 2px 0;
  }
  #pontos-atuais {
  }
  .placar-tittle-container.gold-tittle {
  }

  #historico-pontuacoes {
  }

  #lista-historico-pontuacao {
  }

  .item-historico-pontuacao {
  }

  .historico-nome-pontuador {
  }
  .historico-quantidade-pontos {
  }

  /* GAME */
  #game-container {
    margin-top: 60px;
    margin-bottom: 20px;
    height: 300px;
    min-width: 100%;
  }
  .triangulo {
  }
  .triangulo-cima {
    border-left: 40.5px solid transparent;
    border-right: 35.5px solid transparent;
  }
  .triangulo-cima-aceso {
    border-bottom: 150px solid rgb(0, 177, 0);
  }

  .triangulo-cima-apagado {
    border-bottom: 150px solid rgb(0, 85, 0);
  }
  #botao-cima {
  }

  .triangulo-baixo {
    border-left: 40.5px solid transparent;
    border-right: 35.5px solid transparent;
  }
  .triangulo-baixo-aceso {
    border-top: 150px solid rgb(49, 49, 255);
  }

  .triangulo-baixo-apagado {
    border-top: 150px solid rgb(14, 14, 136);
  }
  #botao-baixo {
  }

  .triangulo-esquerda {
    border-top: 60.5px solid transparent;
    border-bottom: 45.5px solid transparent;
    border-left: none;
  }

  .triangulo-esquerda-aceso {
    border-right: 185px solid rgb(155, 55, 255);
  }

  .triangulo-esquerda-apagado {
    border-right: 185px solid rgb(82, 0, 163);
  }

  #botao-esquerda {
  }

  .triangulo-direita {
    border-top: 60.5px solid transparent;
    border-bottom: 45.5px solid transparent;
  }
  .triangulo-direita-aceso {
    border-left: 185px solid rgb(230, 68, 10);
  }

  .triangulo-direita-apagado {
    border-left: 185px solid rgb(126, 34, 0);
  }
  #botao-direita {
  }

  #menu-quadrado {
  }
  #menu-redondo {
    width: 135.5px;
    height: 135.5px;
  }

  .botao-menu {
  }
  #footer {
    display: flex;
    width: 90%;
    max-width: 300px;
    justify-content: center;
    align-items: center;
    margin: auto;
    flex-direction: column-reverse;
    margin-top: 40px;
  }
  #dev-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 50px;
    max-width: 20px;
    margin-top: 25px;
    position: initial;
  }
  #titulo-desenvolvedor {
    font-size: clamp(12px, 1vw, 15px);
  }
  #nome-desenvolvedor {
    font-size: clamp(20px, 0.8vw, 70px);
  }
  .regra-text {
    font-size: clamp(13px, 0.8vw, 10px);
  }

  #titulo-regra-cotainer {
    padding-top: 5px;
    font-size: clamp(15px, 1vw, 10px);
  }
  #regras-container {
    flex-direction: column;
    max-width: 400px;
    border-radius: 4px;
    padding-left: 0px;
    padding-right: 0px;
    height: 25%;
    display: flex;
    position: relative;
    flex-direction: column;
    width: 100%;

    scrollbar-width: none;
  }
  .regra-text {
    font-size: clamp(15px, 1vw, 10px);
  }

  .modal-content {
    height: 100%;
  }
}

/*FIM MOBILE*/

/*TABLET*/

@media (min-width: 599px) and (max-width: 900px) {
  #cabecalho {
    flex-direction: row;
  }
  #tittle-container {
    text-align: start;
    flex-direction: column;
    gap: 5px;
    width: 70%;
  }

  #game-tittle {
    font-size: clamp(28px, 6vw, 100px);
  }
  #game-sub-tittle {
    font-size: clamp(14px, 0.3vw, 20px);
    padding-left: 50px;
  }
  #placar-container {
    display: flex;

    flex-direction: row;
    justify-content: flex-end;
  }

  #placar-component {
    min-width: 250px;
    height: 250px;
    width: 65%;
  }

  .placar-tittle-container {
  }

  .placar-tittle {
    font-size: clamp(0px, 2vw, 70px);
  }

  #pontuacoes {
    margin: 2px 0px;
  }
  #pontuacao-atual {
    font-size: clamp(13px, 1.3vw, 70px);
  }
  .pontuacao-item {
    margin: 4px 0;
    font-size: clamp(13px, 1.5vw, 70px);
  }
  #pontos {
    font-size: clamp(13px, 1.5vw, 70px);
  }
  .placar-tittle-container.gold-tittle {
  }

  #historico-pontuacoes {
  }

  #lista-historico-pontuacao {
  }

  .item-historico-pontuacao {
  }

  .historico-nome-pontuador {
  }
  .historico-quantidade-pontos {
  }

  /* GAME */
  #game-container {
    margin-top: 32px;
    height: 300px;
    min-width: 100%;
  }
  .triangulo {
  }
  .triangulo-cima {
    border-left: 58.5px solid transparent;
    border-right: 58.5px solid transparent;
  }
  .triangulo-cima-aceso {
    border-bottom: 280px solid rgb(0, 177, 0);
  }

  .triangulo-cima-apagado {
    border-bottom: 280px solid rgb(0, 85, 0);
  }
  #botao-cima {
  }

  .triangulo-baixo {
    border-left: 58.5px solid transparent;
    border-right: 58.5px solid transparent;
  }
  .triangulo-baixo-aceso {
    border-top: 280px solid rgb(49, 49, 255);
  }

  .triangulo-baixo-apagado {
    border-top: 280px solid rgb(14, 14, 136);
  }
  #botao-baixo {
  }

  .triangulo-esquerda {
    border-top: 65.5px solid transparent;
    border-bottom: 55.5px solid transparent;
    border-left: none;
  }

  .triangulo-esquerda-aceso {
    border-right: 375px solid rgb(155, 55, 255);
  }

  .triangulo-esquerda-apagado {
    border-right: 375px solid rgb(82, 0, 163);
  }

  #botao-esquerda {
  }

  .triangulo-direita {
    border-top: 65.5px solid transparent;
    border-bottom: 55.5px solid transparent;
    border-right: none;
  }
  .triangulo-direita-aceso {
    border-left: 375px solid rgb(230, 68, 10);
  }

  .triangulo-direita-apagado {
    border-left: 375px solid rgb(126, 34, 0);
  }
  #botao-direita {
  }

  #menu-quadrado {
  }
  #menu-redondo {
    width: 165.5px;
    height: 165.5px;
  }

  .botao-menu {
  }

  #dev-container {
    width: 15%;
    height: 10%;
    bottom: 2%;
  }
  .regra-text {
    font-size: clamp(13px, 0.8vw, 10px);
  }

  #titulo-regra-cotainer {
    padding-top: 5px;
    font-size: clamp(15px, 1vw, 10px);
  }
  #regras-container {
    height: 35%;
    min-width: 150px;
    max-width: 300px;
    overflow: auto;
    width: 30%;

    scrollbar-width: none;
    /* font-size: clamp(20px, 0.2vw, 10px);} */
  }
  .regra-text {
    font-size: clamp(15px, 1vw, 10px);
  }
}

/*FIM TABLET*/

/*DESKTOP*/
@media (min-width: 901px) {
  #cabecalho {
    flex-direction: row;
    /* margin-top: -32px;? */
  }
  #tittle-container {
    text-align: center;
    justify-content: center;
    width: 100%;
    display: fle;
    gap: 5px;
  }
  #game-tittle {
    font-size: clamp(28px, 8vw, 70px);
  }
  #placar-container {
    width: 60%;
    /* margin-top: 40px; */
    flex-direction: row;
    justify-content: center;
  }
  #placar-component {
    width: 400px;
    min-width: 400px;
  }

  .placar-tittle-container {
  }

  #placar-tittle {
    /* font-size: clamp(15px, 1.2vw, 70px); */
  }

  #pontuacoes {
    margin: 5px 0px;
  }
  .pontuacao-item {
    margin: 4px 0;
  }
  #pontos {
  }
  .placar-tittle-container.gold-tittle {
  }

  #historico-pontuacoes {
  }

  #lista-historico-pontuacao {
  }

  .item-historico-pontuacao {
    font-size: clamp(15px, 1.4vw, 24px);
  }

  .historico-nome-pontuador {
  }
  .historico-quantidade-pontos {
  }

  /*GAME*/

  #game-container {
    margin-top: -60px;
  }

  .triangulo {
  }
  .triangulo-cima {
    border-left: 60.5px solid transparent;
    border-right: 60.5px solid transparent;
  }
  .triangulo-cima-aceso {
    border-bottom: 300px solid rgb(0, 177, 0);
  }

  .triangulo-cima-apagado {
    border-bottom: 300px solid rgb(0, 85, 0);
  }
  #botao-cima {
  }

  .triangulo-baixo {
    border-left: 60.5px solid transparent;
    border-right: 60.5px solid transparent;
  }
  .triangulo-baixo-aceso {
    border-top: 300px solid rgb(49, 49, 255);
  }

  .triangulo-baixo-apagado {
    border-top: 300px solid rgb(14, 14, 136);
  }
  #botao-baixo {
  }

  .triangulo-esquerda {
    border-top: 60.5px solid transparent;
    border-bottom: 60.5px solid transparent;
  }

  .triangulo-esquerda-aceso {
    border-right: 355px solid rgb(155, 55, 255);
  }

  .triangulo-esquerda-apagado {
    border-right: 355px solid rgb(82, 0, 163);
  }

  #botao-esquerda {
  }

  .triangulo-direita {
    border-top: 60.5px solid transparent;
    border-bottom: 60.5px solid transparent;
  }
  .triangulo-direita-aceso {
    border-left: 355px solid rgb(230, 68, 10);
  }

  .triangulo-direita-apagado {
    border-left: 355px solid rgb(126, 34, 0);
  }
  #botao-direita {
  }

  #menu-quadrado {
  }
  #menu-redondo {
  }

  .botao-menu {
    font-size: clamp(28px, 2vw, 27px);
  }

  #titulo-regra-cotainer {
    padding-top: 5px;
    font-size: clamp(15px, 1vw, 10px);
  }
  #regras-container {
    height: 30%;

    min-width: 300px;
    max-width: 500px;
    overflow: auto;
    width: 30%;

    scrollbar-width: none;
    /* font-size: clamp(20px, 0.2vw, 10px);} */
  }
  .regra-text {
    font-size: clamp(15px, 1vw, 10px);
  }
  #regras-lista {
    padding: 10px;
  }
}

/*FIM DESKTOP*/

.gradient-border {
  --borderWidth: 3px;
  background: #1d1f20;
  position: relative;
  border-radius: var(--borderWidth);
}

.gradient-border:after {
  content: '';
  position: absolute;
  top: calc(-1 * var(--borderWidth));
  left: calc(-1 * var(--borderWidth));
  height: calc(100% + var(--borderWidth) * 2);
  width: calc(100% + var(--borderWidth) * 2);
  background: linear-gradient(
    60deg,
    #f79533,
    #f37055,
    #ef4e7b,
    #a166ab,
    #5073b8,
    #1098ad,
    #07b39b,
    #6fba82
  );
  border-radius: calc(2 * var(--borderWidth));
  z-index: -1;
  animation: animatedgradient 3s ease alternate infinite;
  background-size: 300% 300%;
}

@keyframes animatedgradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.rainbow-text {
  background-image: repeating-linear-gradient(
    45deg,
    violet,
    indigo,
    blue,
    green,
    yellow,
    orange,
    red
  );
  background-size: 800% 800%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rainbow 8s ease infinite;
}

@keyframes rainbow {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 25%;
  }

  100% {
    background-position: 0% 50%;
  }
}