* {
   transition: all 1s;
   box-sizing: border-box;
}

body {
   text-align: center;
   font-family: calibri;
   margin: 0;
   padding: 0;
   user-select: none;
   background: rgb(186, 216, 255);
}

table {
   background: rgb(143, 154, 167);
   margin: auto;
}

td {
   border: rgba(0, 0, 0, 0.25) 1px solid;
   text-align: center;
   font-size: 120%;
   color: white;
   width: 35px;
   height: 35px;
   box-shadow: inset 3px 3px 0 0 rgba(255, 255, 255, 0.5),
      inset -3px -3px 0 0 rgba(0, 0, 0, 0.5);
}

#nota {
   margin: 0px;
}

.para0,
.para1,
.para2,
.para3,
.para4,
.para5,
.para6,
.para7,
.para8 {
   font-family: 'Microsoft Sans Serif', 'Tahoma', sans-serif;
   font-size: 25px;
   font-weight: bold;
   box-shadow: none;
}

.para1 {
   color: rgb(10, 25, 240);
}

.para2 {
   color: rgb(2, 104, 2);
}

.para3 {
   color: rgb(175, 33, 12);
}

.para4 {
   color: rgb(0, 0, 99);
}

.para5 {
   color: rgb(71, 0, 0);
}

.para6 {
   color: rgb(0, 56, 0);
}

.para7 {
   color: rgb(103, 0, 146);
}

.para8 {
   color: rgb(0, 0, 0);
}

.ultimaJugada {
   border: 3px solid white;
}

.bombaAzul {
   color: black;
   background: rgb(61, 131, 223);
}

.bombaRoja {
   color: black;
   background: rgb(125, 22, 26);
}

#contenedor-tablero {
   display: grid;
   grid-template-columns: 20fr 60fr 20fr;
}

.columna {
   text-align: center;
}

#modal {
   position: absolute;
   left: 50%;
   top: 0%;
   transform: translate(-50%, 200px);
   padding: 20px 40px;
   border: 3px solid #ffbc0e;
   background-color: white;
}

#modal h2,
#modal h3 {
   text-align: center;
}

#modal #salir {
   position: absolute;
   text-decoration: none;
   color: #ffbc0e;
   top: 20px;
   right: 12.5%;
   font-size: 1.5em;
   font-weight: bold;
}

#modal .nota {
   width: 350px;
   text-align: center;
   margin: 16px auto 12px;
}

.swal-button--accept,
.swal-button--reject,
#iniciar,
#terminaPartida, #retar {
   font-size: 18px;
   padding: 10px 20px;
   margin: 5px;
   cursor: pointer;
   border: none;
   border-radius: 5px;
}

.swal-button--accept,
#iniciar, #retar {
   background: linear-gradient(150deg, #001F3F, #003366, #0056b3);
   color: #fff;
}

#solicitarEspecial0:disabled,
#solicitarEspecial1:disabled,
#cancelarEspecial0:disabled,
#cancelarEspecial1:disabled,
#iniciar:disabled,
#terminaPartida:disabled,
#retar:disabled {
   background: #ccc;
   cursor: not-allowed;
}

.swal-button--reject,
#terminaPartida {
   background: linear-gradient(150deg, #990000, #990000, #FF3333);
   color: #fff;
}

#contenedorJugador0.activo, #contenedorJugador1.activo {
   animation-duration: 1.5s;
   animation-iteration-count: infinite;
   animation-direction: alternate;
}
#contenedorJugador0.activo {
   animation-name: animacion_outline0;
}
#contenedorJugador1.activo {
   animation-name: animacion_outline1;
}
@keyframes animacion_outline0 {
   from {
      outline: 5px solid rgb(0, 0, 255);
   }
   to {
      outline: 5px solid rgb(160, 160, 255);
   }
}
@keyframes animacion_outline1 {
   from {
      outline: 5px solid rgb(255, 0, 0);
   }
   to {
      outline: 5px solid rgb(255, 160, 160);
   }
}

.contenedorJ1,
.contenedorJ0 {
   display: flex;
   width: 170px;
   height: 300px;
   color: white;
   font-family: "Arial", sans-serif;
   font-size: 18px;
   font-weight: bold;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   border-radius: 20px;
   text-align: center;
}

.contenedorJ0 {
   background: linear-gradient(150deg, #33ADFF, #0099CC, #006699, #003366);
   margin: 100px auto;
}

.contenedorJ1 {
   background: linear-gradient(150deg, #FF6666, #FF3333, #CC0000, #990000);
   margin: 200px auto;
}

.contenedorJ0 p,
.contenedorJ1 p {
   margin-bottom: 10px;
}

.botones button {
   background: black;
   cursor: pointer;
   border: none;
   padding: 10px 26px;
   color: azure;
   font-size: 18px;
   font-weight: bold;
   position: relative;
   border-radius: 10px;
   margin-bottom: 10px;
}

#solicitarEspecial0:enabled,
#solicitarEspecial1:enabled,
#cancelarEspecial0:enabled,
#cancelarEspecial1:enabled {
   animation-name: pulse;
   animation-duration: 1.25s;
   animation-iteration-count: infinite;
}

@keyframes pulse {
   0% {
      transform: scale(1);
   }

   50% {
      transform: scale(1.075);
   }

   100% {
      transform: scale(1);
   }
}

#lista {
   list-style-type: none;
   padding: 0;
   text-align: left;
}