/* CSS TicTacToe 3x3 */
/*********************/	
#game-container3x3 { 
	font-family: "Arial", "Helvetica", "Segoe UI", "Tahoma", "Verdana", sans-serif;
	line-height:1; 
	width: 100%; text-align:center; background:darkseagreen; border-radius:7px; padding:7px 7px 14px 7px;
}
	
.titulo { font-size:26px; font-weight:bold; margin:7px auto; 
text-shadow:0px 0px 5px white,0px 0px 5px white,0px 0px 5px white;
}		
		
#board {
	display: grid;
	grid-template-columns: repeat(3, 70px);
	grid-gap: 8px;
	/*margin: 50px auto; */ margin:auto; justify-content:center;
width:max-content; 
background:blue;  /* Para contrastar con div contenedor  */
}
.cell {
	width: 70px;
	height: 70px;
	background-color: darkseagreen;  /* Color inicial de celda (Puede referirse de acuerdo al color del entorno para que parezca transparente, caso contrario se vería el color de fondo de board)  */
	display: flex;
	align-items: center;
	justify-content: center;
	font-size:40px;
	cursor: pointer;
}

.cell.taken {
	cursor: not-allowed;
color:black; 
}

#message {
		margin-top: 20px;
		font:size:18px; font-weight:bold; 
	}
	  

#board-container {
  position: relative;
  width: 320px;
  height: 320px;
  margin: 50px auto;
}

.animaBoard { transition:ease-in-out; animation: boardAnim 0.5s infinite; }
@keyframes boardAnim {
	50% { transform: scale(0.5) rotate(360deg) }
}


#win-line {
  position: absolute;
  width: 0;
  height: 5px;
  background-color: yellow;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.5s ease;
	animation: winAni 1s infinite;
}  
@keyframes winAni {
	50% { box-shadow: 0px 0px 10px black; }
}	 
	  
#mode-selector {
  margin: 20px auto;
  text-align: center; 
}

#mode {
  font-size: 1em;
  padding: 5px; color:black;
  margin-left: 10px;  
}

select { width:max-content ;  }
	  
.ganaempate {  font-size:22px; color:blue;  }
	  
#scores { 
font-size:14px; width: max-content; margin: 4px auto; background-color:brown; border: 2px solid black; border-radius:7px; padding:3px; } 
	
#scores p {	margin: 10px 0 10px; }

#scores span {  background:#ddd; padding:3px; border-radius:5px; margin:3px }	  
	
#reinicio, .linkBtn  {  border-radius:7px; border:none; box-shadow:2px 2px 2px inset white, -2px -2px 2px inset black; padding:3px 24px; margin-top:7px;  }

.linkBtn { font-weight:bold; padding: 2px 7px; margin:-5px auto 7px auto; }	  
	  
#reinicio:hover, .linkBtn:hover { transform:scale(1.1); }	  



/* End CSS TicTacToe 3x3 */
/*************************/