/* CSS Sumplete */
/****************/
#game-container {
	display: flex;
	font-family: "Arial", "Helvetica", "Segoe UI", "Tahoma", "Verdana", sans-serif; 
	background-image:url(https://juegos.chentito.com/extras/img_varias1300/Colores1300.jpg);
	background-size:cover;
	background-repeat:no-repeat;
	padding:7px;
	width:100%;
	line-height: 1;
}

#arealeft, #arearight {
	background-color: darkseagreen;
    padding: 14px;	
	text-align:center;
	border-radius:7px;
    border: 7px solid darkseagreen;
	box-shadow:0px 0px 3px 1px inset white, 0px 0px 14px 4px black, 0px 0px 14px 4px black;	
}

#arealeft {
	width:max-content;   
	margin:7px 14px 7px auto;   
}


#arearight {
	width:280px;
  max-width: 40%;
  margin: 7px auto 7px 14px;
	display:flex;
	flex-direction:column;
}

#arearight p { margin: 0px; }

#contentgrids { 
	transition:ease-in-out; 
	position: relative; /* ¡Importante! */
}

#gridContainer, #gridSumaRows, #gridSumaCols {
  display: grid; /* Define el contenedor como una cuadrícula */
  /*gap: 10px; */ 
	background:lightgray;
	width:max-content;
	border-radius: 4px;
	/*padding: 5px; */
}

#gridContainer { float:left; }

#gridSumaRows {
	background:yellow; 
	color:#666;
}

#gridSumaCols { 
	background:#2196f3; /* dodgerblue */
	color:#666;
}

.gridItem {
	background-color: #f0f0f0;
	border: 1px solid #ccc;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 20px;
	padding: 10px;
	width: 30px;
	height: 30px;
	position: relative; /* Necesario para ::after */
	cursor: url('https://juegos.chentito.com/extras/img/pointer48-1.png') 20 10, pointer;
}

.titulo { color:white; font-size:36px; 
text-shadow: 2px 2px black, 0px 0px 10px black, 0px 0px 10px black, 0px 0px 10px black;
}

#infogame { 
	background-color: lightgray;
  padding:10px;
	border-radius:7px;
 }
 
hr { margin:4px; } 

/* **** Selectores y Botones **** */
.selectoresSump { margin: 10px auto 0px auto; }
.botonesSump { display:flex; margin: 10px auto 0px auto; justify-content:center; }

#arearight label, #arearight select { width:max-content; height:1.4em; }

#resetBtn, #checkBtn, #hintBtn, #revealBtn, #undoBtn, #newBtn {
	background:lightgray; 
	width: 100px; height:55px;
	margin:0px 4px; padding: 4px;
	border-radius:7px;
	color:black;

	cursor: url('https://juegos.chentito.com/extras/img/pointer48-1.png') 20 10, pointer;
	
}

#newBtn {
    background: #4CAF50;
    color: white;
}

button:disabled { opacity:0.5; }

#resetBtn:hover, #checkBtn:hover, #hintBtn:hover, #revealBtn:hover, #undoBtn:hover, #newBtn:hover {
	transform:scale(1.08);
}

.emojiBtn { font-size:22px; }

.claseNew { animation: newAni 0.8s 1; }
.claseReset { animation: resetAni 0.5s 1; }

@keyframes newAni {
	50% { 
		transform:scale(0.1);
		rotate:180deg;
	}
	100% {
		transform:scale(1);	
		rotate:360deg;
	}	
}

@keyframes resetAni {
	30% { transform:translate(20px, 0px);
		}
	60% { transform:translate(-20px, 0px); }
	90% { opacity:0.2; }
}


/* **** Evitar selección accidental en móviles **** */
.gridItem {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	touch-action: manipulation; /* mejora respuesta táctil */
}

/* Estilo para confirmado */
.gridItem.confirmado::after {
	content: "●";
	position: absolute;
	bottom: 2px;
	right: 2px;
	font-size: 20px;
	color: green;
}

.gridItem.confirmado {
	font-weight: bold;
	color: #000 !important;
	text-decoration: none !important;
}


/* **** Asegurar que el tachado no afecte al confirmado **** */
.gridItem.tachado {
	background-color: #eee;
	color: #999;
	text-decoration: line-through;
	opacity: 0.7;
}


#recordDisplay {
	color: #d32f2f; 
	font-weight: bold;
}


/* **** Barra para resetear records **** */
#resetRec { background: lightgray; text-align:center; padding:4px; }
#resetRec button { margin: 2px; }


/* **** Modal **** */
.modal-overlay {
	display: none;
	/*position: fixed; */ position:absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: rgba(0,0,0,0.5);
	z-index: 1000;
	justify-content: center;
	align-items: center;
}

.modal {
	background: white;
	border-radius: 10px;
	width: 90%;
	max-width: 400px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.3);
	overflow: hidden;
}

/* Cabecera modal */
.modal-header {
	padding: 12px 16px;
	background: #4CAF50;
	color: white;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* Botón cerrar modal */
.modal-close {
	background: none;
	border: none;
	color: white;
	font-size: 24px;
	cursor: pointer;
}

.modal-body {
	padding: 16px;
	font-family: inherit; 
	line-height: 1.5;
}

.modal-footer {
	padding: 12px 16px;
	text-align: right;
	background: #f9f9f9;
}

.modal-btn {
	padding: 6px 12px;
	margin-left: 8px;
	border: none;
	border-radius: 4px;
	background: #4CAF50;
	color: white;
	cursor: pointer;
}

.modal-btn.cancel {
  background: #9E9E9E;
}

.modal-btn:hover {
  opacity: 0.9;
}


/* Overlay de inicio de juego */
.play-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 82vh;
	background: rgba(0, 0, 0, 0.7);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 50;
	border-radius: 7px;
	pointer-events: none; /* bloqueado hasta que se muestre */
	opacity: 0;
	transition: opacity 0.3s;
}

.play-overlay.visible {
	pointer-events: all;
	opacity: 1;
}

.play-btn {
	padding: 12px 24px;
	font-size: 18px;
	font-weight: bold;
	background: #4CAF50;
	color: white;
	border: none;
	border-radius: 50px;
	cursor: pointer;
	box-shadow: 0 4px 10px rgba(0,0,0,0.3);
	transition: transform 0.1s;
}

.play-btn:hover {
	background: #45a049;
	transform: scale(1.05);
}

#pregResetRec button { width:40px; margin: 0px 7px; border-radius:4px; cursor: pointer; }



/* Modo responsivo   */
@media (max-width:1000px) { 
	#gridContainer, #gridSumaRows, #gridSumaCols {
	padding:0px;
	}	

	#arealeft, #arearight {  
	zoom:0.8;
	}
	#arearight, select {
			font-size: 1.1em;
	}
	.play-overlay {	height:106vh; }	
}           


@media (max-width:760px) {
	#gridContainer, #gridSumaRows, #gridSumaCols {
	padding:0px;
	}	
	#arealeft, #arearight {  
	zoom:0.7;
	}
	#arearight, select {
			font-size: 1.1em;
	}
	
	.play-overlay {	height:108vh; }	

}    

	
@media (max-width:480px) {	
	#game-container { display:grid; padding: 20px 0px; font-size:24px; }	
	
	#arealeft, #arearight { zoom:0.8;  margin:auto; max-width:none; }

	#arearight { width:400px; margin:10px auto; }

	button { font-size:24px; width:150px !important; height:80px !important; }
	.play-overlay {	height:100vh; }	
}

@media (max-width:360px) {
	#game-container { display:grid; padding: 20px 0px; font-size:24px; }	
	
	#arealeft, #arearight { zoom:0.7;  margin:auto; max-width:none; }

	#arearight { width:320px; margin:10px auto; }

	button { font-size:22px; width:150px !important; height:80px !important; }
	.play-overlay {	height:110vh; }	
}