/* =========================================================================
   GLOBAL STYLES
   ========================================================================= */
* { 
	box-sizing: border-box; /* Ensures padding and borders don't expand elements */ 
}  

body { 
	margin: 0; 
	color: #555555; 
	font-family: "Times New Roman", Times, serif;  
	min-width: 267px; 
	height: 100vh; 
	overflow: hidden; /* Complete scroll removal */ 
}  

.end { 
	text-align: center; 
	font-family: "Times New Roman", Times, serif;  
	font-size: .75em;  
	padding-bottom: 1vh;  
	text-shadow: 1px 1px 1px #000; 	margin-top: 2%; 
	width: 100%; 
}  

.button { 
	color: #fff !important; 
	font-family: "Times New Roman", Times, serif; 
	font-size: 1.5em; 
	font-weight: bold; 
	background: #0091FF; 
	padding: 12px 24px; 
	border-radius: 5px; 
	display: inline-block; 
	border: none; 
	margin-bottom: 2%; 
	cursor: pointer; 
}  

.button:hover { 
	background: #434343; 
	letter-spacing: 1px; 
	box-shadow: 0px 5px 15px rgba(0,0,0,0.3); 
	transition: all 0.4s ease 0s; 
}  

/* =========================================================================
   DESKTOP STYLES (991px and up)
   ========================================================================= */ 
@media only screen and (min-width: 991px) { 	
	#container { 		
		margin: 0 auto; 		
		width: 80%; 		
		height: 100%; 		
		display: flex; 		
		flex-direction: column; 		
		justify-content: space-between; 		
		padding: 2vh 0; 	
	}  	

	#emptyspacew { 		
		height: 1vh; 	
	}  	

	img { 		
		width: 100%; 		
		height: auto; 		
		aspect-ratio: 3 / 2;    /* UPDATED: Matches your 600x400 image dimensions */
		max-height: 43vh;       /* Strict bound to prevent spilling */ 		
		object-fit: contain; 		
		filter: invert(75%); 		
		display: block; 	
	}	 		 	

	#key {  		
		border: 1vh solid #fff;  		
		line-height: normal;   		
		padding: 1.5vh 0;        		
		text-align: center;  		
		font-size: 2.4em;  		
		font-family: "Times New Roman", Times, serif;   		
		width: 56%;           		
		margin: 0 auto;       		
		letter-spacing: -0.06rem; /* Narrowed underscore spaces by half */ 		
		word-spacing: 0.5rem;     /* Separates words clearly if the phrase has spaces */ 	
	}  	

	#row { 		
		display: flex; 		
		align-items: stretch; 		
		flex: 1; 		
		min-height: 0;          /* Important for inner flex scrolling prevention */ 		
		margin-top: 2vh; 	
	}  	

	h3 { 		
		font-family: "Times New Roman", Times, serif;  		
		text-align: center; 		
		font-size: 1.7em; 		
		margin: 3vh 0 3vh 0;  	
	}  	

	#progress { 		
		flex: 0 0 25%;        		
		max-height: 45vh; 		
		aspect-ratio: 3 / 2;    /* UPDATED: Anchors container to match 600x400 ratio */
		border: 0.5vh solid #fff; 		
		display: flex; 		
		align-items: center; 		
		justify-content: center; 		
		width: fit-content;     /* Shrink-wraps border tightly around the image layout */ 		
		margin: 0 auto; 	
	}  	

	#letters { 		
		flex: 0 0 50%;        		
		padding: 1%; 		
		border: 1vh solid #fff; 		
		display: flex; 		
		flex-wrap: wrap; 		
		align-content: center; 		
		justify-content: center; 	
	}  	

	#middle { 		
		flex: 0 0 25%;        		
		font-family: "Times New Roman", Times, serif;  		
		color: #555555; 		
		text-align: center; 		
		display: flex; 		
		flex-direction: column; 		
		justify-content: center; 	
	}  	

	#middle h2 { 		
		font-size: 1em; 		
		margin: 1vh 0; 	
	}  	

	.letter { 		
		width: 2.2em; 		
		height: 2.2em; 		
		line-height: 2.2em; 		
		margin: 0.25em;  		
		text-align: center; 		
		border-radius: 10px; 		
		border: 2px solid #dfdfdf; 		
		cursor: pointer; 	
	}  	

	.letter:hover { 		
		border: 2px solid #F9E748; 		
		box-shadow: 0px 0px 10px gray; 	
	}  	

	.letter:active { 		
		border: 2px solid #00ABFF; 	
	}  	

	#clouds { 		
		background: #c9dbe9; 		
		background: linear-gradient(to bottom, #c9dbe9 0%, #fff 100%); 		
		height: 100vh; 		
		box-sizing: border-box; 	
	} 
}  

/* =========================================================================
   MOBILE STYLES (Under 991px)
   ========================================================================= */ 
@media only screen and (max-width: 991px) { 	
	#container { 		
		margin: 0 auto; 		
		width: 90%; 		
		height: 100%; 		
		display: flex; 		
		flex-direction: column; 		
		justify-content: flex-start; /* Aligns contents uniformly from the top */ 		
		padding: 1.5vh 0; 	
	}  	

	h3 { 		
		font-family: "Times New Roman", Times, serif;  		
		text-align: center; 		
		font-size: 1.4em; 		
		margin: 2vh 0 2vh 0;  	
	}  	

	#emptyspacew { 		
		height: 0; 	
	}  	

	img { 		
		width: 100%; 		
		height: auto; 		
		aspect-ratio: 3 / 2;    /* UPDATED: Matches mobile image proportions */
		max-height: 24vh; 		
		object-fit: contain; 		
		display: block; 	
	} 		 	

	#key { 		
		border: 0.5vh solid #fff; 		
		text-align: center; 		
		font-size: 1.3em; 		
		font-family: "Times New Roman", Times, serif;  		
		padding: 8px 0; 		
		margin-bottom: 2vh;  		
		width: 100%;         		
		letter-spacing: -0.03rem; /* Narrowed mobile underscore spaces by half */ 		
		word-spacing: 0.4rem;     /* Distinct gaps for multi-word phrases on mobile */ 	
	} 	 	

	/* NEW: Targets screens between 768px and 990px */ 	
	@media only screen and (min-width: 768px) { 		
		#key { 			
			width: 56%; 			
			margin-left: auto; 			
			margin-right: auto; /* Centers the 56% box */ 		
		} 	
	}  	

	#row { 		
		display: flex; 		
		flex-direction: column; 		
		flex: 1; 		
		min-height: 0; 		
		justify-content: flex-start; /* Packs elements closer together */ 		
		gap: 2vh;                    /* Creates a clean, exact gap between image and buttons */ 	
	} 	 	

	#progress { 		
		margin: 0 auto; 		
		padding: 5px; 		
		width: fit-content;  		
		max-height: 25vh;  		
		aspect-ratio: 3 / 2;    /* UPDATED: Matches mobile container shape during image swaps */
		border: 2px solid #fff; 		
		display: flex; 		
		align-items: center; 		
		justify-content: center; 	
	}  	

	#letters { 		
		margin: 0 auto; 		
		width: 100%; 		
		display: flex; 		
		flex-wrap: wrap; 		
		justify-content: center; 		
		align-content: center; 		
		padding: 0; 	
	}  	

	.letter { 		
		width: 2em; 		
		height: 2em; 		
		line-height: 2em; 		
		margin: 0.2em; 		
		text-align: center; 		
		border-radius: 6px; 		
		border: 2px solid #dfdfdf; 		
		cursor: pointer; 	
	}  	

	.letter:hover { 		
		border: 2px solid #F9E748; 		
		box-shadow: 0px 0px 10px gray; 	
	}  	

	.letter:active { 		
		border: 2px solid #00ABFF; 	
	}  	

	#middle, #footer { 		
		display: none; 	
	}  	

	#clouds { 		
		background: #c9dbe9; 		
		background: linear-gradient(to bottom, #c9dbe9 0%, #fff 100%); 		
		height: 100vh; 		
		overflow: hidden; 	
	} 
}