.tiles {
	line-height: 62px;
	box-sizing: border-box;
	border: 2px solid rgb(211, 214, 218);
	width: 62px;
	height: 62px;
	font-size: 32px;
	font-weight: 700;
	justify-content: center; /* This aligns items horizontally */
	align-items: center; /* This aligns items vertically */
	display: inline-flex;
	transition: background-color 0.5s ease-in-out; /* Adjust timing and easing to your preference */
	vertical-align: middle; /* Helps align inline-flex items in line with surrounding text or inline elements */
	margin: 3px; 
}


.correct {
	background-color: green;
	color: white;
}

.misplaced {
	background-color: orange;
	color: white;
}

.unused {
	background-color: #666; 
	color:white;
}

#score-bubble {
	position: absolute;
	top: -20px; /* Adjust based on your needs */
	left: 50%;
	transform: translateX(-50%);
	background-color: rgba(0, 0, 0, 0.5); /* Translucent bubble */
	color: white;
	padding: 5px 10px;
	border-radius: 10px;
	opacity: 0; /* Start hidden */
	visibility: hidden;
	transition: opacity 1s, visibility 1s ease-in-out;
	pointer-events: none; /* Allows clicks to pass through */
}

#custom-keyboard {
	max-width: 99vw;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 20px;
	user-select: none;
}

#custom-keyboard .key.unused {
	background-color: #666; 
	color: white;
}

#custom-keyboard .key.correct {
	background-color: green;
	color: white;
}

#custom-keyboard .key.misplaced {
	background-color: orange;
	color: white;
}

.keyboard-row {
	display: flex;
	justify-content: center;
	margin: 5px 0;
	width: 100vw;
	gap: 1px;
}

.keyboard-row-2 {
	max-width: 90vw;
}

.key {
	background-color: #D3D3D3;
	border: none;
	border-radius: 5px;
	margin: 0 1px;
	padding: 10px 15px; 
	font-size: 16px;
	color: #000;
	outline: none;
	flex: 1;
}

.key-special {
	flex: 2;
}

.key:active {
	background-color: #A9A9A9;
}

.enter, .backspace {
	flex-grow: 4;
}

.enter { font-size: 80%; }
.backspace { font-size: 150%; }

@media (max-width: 768px) {
	.tiles { 
	line-height: 40px;
	box-sizing: border-box;
	border: 2px solid rgb(211, 214, 218);
	width: 40px;
	height: 40px;
	font-size: 20px;
	font-weight: 700;
	justify-content: center; /* This aligns items horizontally */
	align-items: center; /* This aligns items vertically */
	display: inline-flex;
	transition: background-color 0.5s ease-in-out; /* Adjust timing and easing to your preference */
	vertical-align: middle; /* Helps align inline-flex items in line with surrounding text or inline elements */
	margin: 3px; 		 }
}

@media (max-width: 420px) {
	.enter { font-size: 60%; }
}