body{
  margin:0;
  padding:0;
  width:100vw;
  height:100vh;
  background-image:linear-gradient(45deg, #90f7ec, #32ccbc);
}

section#game{ display:none; }

/* ###### ###### ###### ###### ###### */

img.logoTexto{
   display:block;
   width: 90%;
   max-width: 400px;
   margin: 0 auto;
}

#nick{
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 1000;
}

div.monsters, div.tradicional {
    position:relative;
    width: 90%;
    max-width: 400px;
    margin: 0 auto;
    text-align:center;
    opacity:0;
    transition:2s;
    z-index: 1;
}

div.monsters img, div.tradicional img {
    display: inline-block;
    width: calc(25% - 3px);
}

div.monsters{ margin-top: -100px; }

div.tradicional.ativo{ opacity:1; z-index: 5; }
div.monsters.ativo{ opacity:1; z-index: 5; }

div.playersSel{
    width: 90%;
    max-width: 400px;
    margin: 60px auto 0 auto;
}
div.player1Sel, div.player2Sel {
    display: inline-block;
    width: calc(50% - 2px);
    line-height: 50px;
    text-align: center;
    margin: 0;
    border-radius: 15px;
    background-color: #ffffff99;
    box-shadow: 0 0 15px 0 #00000066;
}
div.player1Sel span, div.player2Sel span {
    display: block;
    float: left;
    width: 20px;
    height: 50px;
    border-radius: 10px 0 0 10px;
    background-color: #b2309d;
    transition:1s;
}
div.player1Sel span{background-color: #ffbb23; }
div.player1Sel input, div.player2Sel input {
    display: inline-block;
    width: 90px;
    border: 0;
    font-size: 16px;
    text-align: center;
    background: transparent;
}
div.player1Sel img, div.player2Sel img{
    float: right;
    width: 50px;
    height: 50px;
    border-radius: 0 10px 10px 0;
    transition:0.5s;
}

div.player1Sel button, div.player2Sel button{
    position: absolute;
    width: 120px;
    line-height: 30px;
    margin: -50px 0 0 -100px;
    border: 0;
    border-radius: 10px;
    color: #fff;
    background-image: linear-gradient(45deg, #7aacbd, #9E9E9E);
    box-shadow: 0 0 5px 0 #00000066, inset 0 0 10px 0 #00000066;
}

button#iniciar{
    display: block;
    width: 210px;
    line-height: 40px;
    margin: 30px auto 0 auto;
    border: 0;
    border-radius: 40px;
    font-size: 20px;
    color: #fff;
    background-image: linear-gradient(45deg, #019a88, #8BC34A);
    box-shadow: 0 0 5px 0 #00000066, inset 0 0 10px 0 #00000066;
}

button#reiniciar, button#criarSala, input#entrar{
    display: block;
    width: 210px;
    line-height: 40px;
    margin: 30px auto 0 auto;
    border: 0;
    border-radius: 40px;
    font-size: 20px;
    color: #fff;
    background-image: linear-gradient(45deg, #9E9E9E, #607D8B);
    box-shadow: 0 0 5px 0 #00000066, inset 0 0 10px 0 #00000066;
}

button#criarSala, input#entrar{
    margin: 20px auto 0 auto;
}

input#idSala {
    display: block;
    width: 300px;
    margin: 30px auto -30px auto;
    padding: 5px 5px 10px 5px;
    font-size: 20px;
    text-align:center;
    border: 0.5px solid #000;
    border-radius: 20px;
}

div.linkSala{
    margin: 20px 0 0 0;
    text-align: center;
}
div.linkSala a, div.linkSala a:hover, div.linkSala a:visited{
    display:block;
    text-decoration:none;
    color:#000;
}

/* ###### ###### ###### ###### ###### */

div.match {
    width: 90%;
    max-width: 400px;
    line-height: 50px;
    text-align: center;
    margin: 50px auto 0 auto;
    border-radius: 15px;
    background-color: #ffffff99;
    box-shadow: 0 0 15px 0 #00000066;
}

div.match span {
    display: block;
    float: left;
    width: 20px;
    height: 50px;
    border-radius: 10px 0 0 10px;
    background-color: #ffbb23;
    transition:1s;
}

div.match div {
    float: right;
    width: 50px;
    height: 50px;
    border-radius: 0 10px 10px 0;
    transition:0.5s;
}
div.match div img{
    width: 50px;
    height: 50px;
    border-radius: 0 10px 10px 0;
    transition:0.5s;
}

/* ###### ###### ###### ###### ###### */

ul.table{
  width: 90%;
  max-width: 400px;
  height:400px;
  margin:30px auto 0 auto;
  padding:0;
  border-radius:15px;
  box-shadow:0 0 15px 0 #00000066;
  background-size: 100% 100%;
  transition:0.5s;
}

ul.table li{
  display:inline-block;
  width:33.3%;
  height:33.3%;
  margin:0 -4.9px -1px 0;
  padding:0;
  border: 0.5px solid #00000066;
  text-align:center;
  text-indent:-10000px;
  background-color:#ffffff66;
  background-size: contain;
  transition:0.5s;
}

ul.table li:hover{
  background-color:#ffffff99;
}

ul.table li:nth-child(1){ border-radius:15px 0 0 0; }
ul.table li:nth-child(3){ border-radius:0 15px 0 0; }
ul.table li:nth-child(7){ border-radius:0 0 0 15px; }
ul.table li:nth-child(9){ border-radius:0 0 15px 0; }

ul.table li.pulse{
  animation: pulsar 2s alternate infinite;
}

@keyframes pulsar {
  from {opacity:1;}
  to {opacity:0.5;}
}

ul.table.win{
  animation: win 1.5s alternate infinite;
}

@keyframes win {
  from {transform:scale(1);}
  to {transform:scale(1.1);}
}

/* ###### ###### ###### ###### ###### */

div.players{
    width: 90%;
    max-width: 400px;
    margin: 30px auto 0 auto;
}
div.player1, div.player2 {
    display: inline-block;
    width: calc(50% - 2px);
    line-height: 50px;
    text-align: center;
    margin: 0;
    border-radius: 15px;
    background-color: #ffffff99;
    box-shadow: 0 0 15px 0 #00000066;
}
div.player1 span, div.player2 span {
    display: block;
    float: left;
    width: 20px;
    height: 50px;
    border-radius: 10px 0 0 10px;
    background-color: #ffbb23;
    transition:1s;
}
div.player1 div, div.player2 div {
    float: right;
    width: 50px;
    height: 50px;
    border-radius: 0 10px 10px 0;
    transition:0.5s;
}
div.player1 div img, div.player2 div img{
    width: 50px;
    height: 50px;
    border-radius: 0 10px 10px 0;
    transition:0.5s;
}

/* ###### ###### ###### ###### ###### */

.checkbox {
  position: relative;
    width: 80px;
    height: 36px;
    line-height: 36px;
    margin: 0 auto 40px auto;
    background-color: transparent;
}

.checkbox input, .checkbox-inner:before, .checkbox-inner span, .checkbox-inner label {
  position: absolute;
  top: 0;
  left: 0;
}

.checkbox input {
  opacity: 0;
  z-index: 3;
      width: 80px;
    height: 36px;
  cursor: pointer;
}

.checkbox-inner {
  position: relative;
  z-index: 1;
  width: 80px;
    height: 32px;
  border: 2px solid #FFFFFF;
  border-radius: 18px;
  overflow: hidden;
  transform: rotate(-12deg);
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.15);
  transition-property: transform;
  transition-timing-function: linear;
  transition-delay: 0;
  transition-duration: 0.32s;
  background-color: #ff7800;
}

.checkbox-inner:before {
  content: "";
  width: 100%;
  height: 100%;
  z-index: 2;
  box-shadow: inset 0 10px 16px 0 rgba(0, 0, 0, 0.28);
}

.checkbox-inner span {
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: #019a88;
  transform-origin: right;
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.2, 0.585, 2, 0.875);
  transition-delay: 0.32s;
  transition-duration: 1.6s;
}

.checkbox-inner label {
  position: absolute;
  z-index: 2;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-image: radial-gradient(50% 88%, #FFFFFF 3%, #F5F5F5 97%);
  transition-property: left;
  transition-timing-function: cubic-bezier(1, 0.885, 2, 0.875);
  transition-delay: 0.32s;
  transition-duration: 1.32s;
}

.checkbox__p1, .checkbox__p2 {
  position: absolute;
  top: 0;
  height: 100%;
  transition: opacity 0.32s linear 0s;
}

.checkbox__p1 {
  right: 100%;
  margin-right: 16px;
  opaciy: 1;
}

.checkbox__p2 {
  left: 100%;
  margin-left: 16px;
  opacity: 0.24;
}

.checkbox input:checked + .checkbox-inner {
  transform: rotate(12deg);
}

.checkbox input:checked + .checkbox-inner label {
  left: calc(100% - 32px);
}

.checkbox input:checked + .checkbox-inner span {
  transform: scaleX(0);
}

.checkbox input:checked ~ .checkbox__p1 {
  opacity: 0.24;
}

.checkbox input:checked ~ .checkbox__p2 {
  opacity: 1;
}