@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap');

@font-face {
  font-family: 'fonteRedonda';
  src: url('../junegull.ttf') format('truetype');
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

:root {
  --borda: 2px solid black;
  --wid-hei: 100px;
  --negrito: 'fonteRedonda', Arial, Helvetica, sans-serif;
  --cursiva: 'Kalam', cursive;
  --corInput: #3232ff;
  --corInput2: #32ff32;
}

::-webkit-scrollbar {
  display: none;
}

html {
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--cursiva);
  font-weight: bold;
  height: 100vh;
  overflow: hidden;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

#conteudo {
  display: none;
}

#carregando, #vireCell {
  position: absolute;
  top: 50vh;
  left: 50vw;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgb(255, 255, 255);
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: 20;
}

#vireCell {
  position: fixed;
  overflow: hidden;
  display: none;
}

#vireCell div span {
  font-size: 100px;
}

#carregar {
  background-color: transparent;
  border-top: 10px solid transparent;
  border-bottom: 10px solid black;
  border-right: 10px solid black;
  border-left: 10px solid black;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: preload 0.5s linear infinite;
}

#pcarregar, #pvireCell {
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bolder;
  color: black;
  margin: 0;
}

@keyframes preload {
  to {
    transform: rotate(360deg);
  }
}

h1 {
  font-family: var(--negrito);
  color: black;
  text-align: center;
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translate(-50%, 0);
  font-size: 5em;
}

abbr {
  text-decoration: none;
}

.jogo {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transition-duration: 2s;
  transform: translate(0, 150vh);
  gap: 20px;
}

.tam {
  transform: scale(1.4);
}

.divPlay {
  transition-duration: 2s;
  opacity: 1;
}

.btnPlay {
  width: 100px;
  height: 100px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
  background-color: white;
  color: black;
  border-radius: 30px;
  border: none;
  outline: none;
  cursor: pointer;
  transition-duration: 0.25s;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btnPlay:hover {
  transform: scale(1.1);
}

p {
  margin: 20px 0;
}

#infoDiv {
  height: 90vh;
  width: 50vw;
  text-align: justify;
  background-color: white;
  padding: 20px;
  border-radius: 30px;
  box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.5);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  overflow-y: scroll;
  display: none;
  opacity: 0;
  transition-duration: 0.5s;
}

#okDiv {
  width: 100%;
  height: 50px;
  background-color: transparent;
  padding: 30px;
  border-radius: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#okDiv div {
  width: 100px;
  border-radius: 1000px;
  position: initial;
  transform: none;
}

#X {
  font-size: 30px;
  width: 50px;
  width: 50px;
  position: sticky;
  top: 0px;
  left: 100%;
  transform: none;
  font-family: var(--negrito);
}

.btn {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  width: 50px;
  height: 50px;
  background-color: white;
  border-radius: 50%;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  cursor: pointer;
  transition-duration: 0.25s;
  pointer-events: all;
  z-index: 10;
}

#okDiv div:hover,
#X:hover {
  transform: translate(0, 0) scale(1.1);
}

.pontosDiv {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  opacity: 0;
  transition-duration: 0.5s;
  border-radius: 0px 5px 5px 0px;

}

#pontosJ1c, #pontosJ2c, #pontosJ1, #pontosJ2 {
  width: 50px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 25px;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bolder;
  background-color: white;
}

#pontosJ1c, #pontosJ1 {
  border: 1px solid black;
  border-right: 2.5px solid black;
  border-radius: 5px 0px 0px 5px;
}

#pontosJ2c, #pontosJ2 {
  border: 1px solid black;
  border-left: 2.5px solid black;
  border-radius: 0px 5px 5px 0px;
}

.btnP {
  padding-left: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  cursor: pointer;
  transition-duration: 0.25s;
  pointer-events: all;
  z-index: 10;
  background-color: transparent;
}

.btnP:hover {
  transform: scale(1.05);
}

.sorte {
  position: relative;
  background-image: linear-gradient(to right, var(--corInput), red);
  padding: 14px 25px;
  border-radius: 10px;
  transition-duration: 0.5s;
  cursor: pointer;
}

#sorteId,
#sorteId::after {
  background-image: linear-gradient(to right, var(--corInput), var(--corInput2));
}

.sorte:hover {
  transform: scale(1.1);
}

.sorte span {
  position: relative;
  z-index: 1;
}

.sorte::before {
  content: '';
  position: absolute;
  inset: 2.5px;
  background-color: white;
  border-radius: 7.5px;
  transition: 0.5s;
}

.sorte:hover::before {
  opacity: 0.7;
}

.sorte::after {
  content: '';
  position: absolute;
  inset: 0px;
  background-image: linear-gradient(to right, var(--corInput), red);
  border-radius: 7.5px;
  transition: 0.5s;
  opacity: 0;
  filter: blur(20px);
}

.sorte:hover::after {
  opacity: 1;
}

.sorteGray {
  filter: grayscale(1);
}

.sorteGray:hover {
  transform: none;
  cursor: default;
}

.sorteGray::after {
  filter: none;
}

.sorteGray:hover::after {
  opacity: 0;
}

#jogoCpu {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  background-color: transparent;
  background-image: linear-gradient(to top, var(--corInput), transparent, transparent, transparent);
  transform: translate(0, 0);
  animation: none;
  font-family: var(--negrito);
  overflow: hidden;
}

@keyframes avançar {
  to {
    transform: translate(-100%, 0);
  }
}

@keyframes avançarm {
  to {
    transform: translate(0, 0);
  }
}

#jogoMult {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  background-color: transparent;
  background-image: linear-gradient(to top, var(--corInput2), transparent, transparent, transparent);
  position: absolute;
  top: 0;
  transform: translate(100%, 0);
  animation: none;
  font-family: var(--negrito);
  overflow: hidden;
}

@keyframes voltar {
  to {
    transform: translate(0, 0);
  }
}

@keyframes voltarm {
  to {
    transform: translate(100%, 0);
  }
}

#nivelDiv {
  font-family: Arial, Helvetica, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

select,
option {
  cursor: pointer;
}

.jogoBtnDiv {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  gap: 20px;
}

.btn:hover {
  transform: scale(1.1) translate(0, -50%);
}

.btnVoltar,
.btnatu {
  position: relative;
  transform: none;
}

.btnatu:hover,
.btnVoltar:hover {
  transform: scale(1.1);
}

#btnprev {
  left: 25px;
}

#btnnext {
  right: 25px;
}

#pbtnprev {
  background-color: transparent;
  position: absolute;
  top: -65px;
  left: 0;
  animation: none;
}

@keyframes movepbtnprev {
  0% {
    left: 0;
  }

  50% {
    left: 25px;
  }

  100% {
    left: 0;
  }
}

#pbtnnext {
  background-color: transparent;
  position: absolute;
  top: -65px;
  right: 0;
}

@keyframes movepbtnnext {
  0% {
    right: 0;
  }

  50% {
    right: 25px;
  }

  100% {
    right: 0;
  }
}

.desativado {
  background-color: gray;
  box-shadow: none;
  pointer-events: none;
}

.jogoDaVelha {
  width: calc(var(--wid-hei) * 3 + 40px);
  height: calc(var(--wid-hei) * 3 + 40px);
  background-color: white;
  border-radius: 25px;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  -webkit-box-reflect: below 0 linear-gradient(transparent, #0005);
}

.cerca {
  background-color: white;
  width: var(--wid-hei);
  height: var(--wid-hei);
  transition-duration: 0.25s;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cerca:hover {
  position: relative;
  z-index: 1;
}

.quadrados,
.quadradosc {
  background-color: #eee;
  width: 85%;
  height: 85%;
  transition-duration: 0.25s;
  border-radius: 20px;
  font-size: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  transform-style: preserve-3d;
}

.face {
  font-size: 40px;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #eee;
  border-radius: 20px;
  transition-duration: 0.25s;
  display: flex;
  justify-content: center;
  align-items: center;
}

.face:nth-child(1),
.face:nth-child(2) {
  border: 2.5px solid black;
}

.front {
  transform: translateZ(10px);
}

.back {
  transform: translateZ(-10px) rotateY(180deg);
}

.right {
  transform: rotateY(90deg) translateZ(25px);
  width: 20px;
  border-radius: 0px;
}

.left {
  transform: rotateY(-90deg) translateZ(25px);
  width: 20px;
  border-radius: 0px;
}

.front:hover {
  transform: translateZ(10px) scale(1.1);
}

.back:hover {
  transform: translateZ(-10px) rotateY(180deg) scale(1.1);
}

.right:hover {
  transform: rotateY(90deg) translateZ(25px) scale(1.1);
}

.left:hover {
  transform: rotateY(-90deg) translateZ(25px) scale(1.1);
}

.livre:hover {
  background-color: #bfb;
}

.cerca:hover .ocupado {
  background-color: #fbb;
  cursor: default;
}

.livre {
  pointer-events: all;
  cursor: pointer;
}

.ocupado {
  pointer-events: none;
  cursor: default;
}

.linhaVencedora {
  background-color: black;
  animation: vencedor 1s linear infinite;
}

@keyframes vencedor {
  0% {
    transform: rotateY(0deg);
  }

  100% {
    transform: rotateY(360deg);
  }
}

#c1,
#cc1 {
  border-right: var(--borda);
  border-bottom: var(--borda);
}

#c2,
#cc2 {
  border-right: var(--borda);
  border-left: var(--borda);
  border-bottom: var(--borda);
}

#c3,
#cc3 {
  border-left: var(--borda);
  border-bottom: var(--borda);
}

#c4,
#cc4 {
  border-top: var(--borda);
  border-right: var(--borda);
  border-bottom: var(--borda);
}

#c5,
#cc5 {
  border: var(--borda);
}

#c6,
#cc6 {
  border-top: var(--borda);
  border-left: var(--borda);
  border-bottom: var(--borda);
}

#c7,
#cc7 {
  border-top: var(--borda);
  border-right: var(--borda);
}

#c8,
#cc8 {
  border-top: var(--borda);
  border-right: var(--borda);
  border-left: var(--borda);
}

#c9,
#cc9 {
  border-top: var(--borda);
  border-left: var(--borda);
}

#logoMWD {
  width: 125px;
  margin: 20px;
  position: absolute;
  bottom: 0;
  right: 0;
  transition-duration: 0.5s;
  padding: 10px;
  border-radius: 20px;
}

#logoMWD:hover {
  transform: scale(1.1);
  background-color: white;
}