/*
ON-SCREEN KEYBOARD — CORRECTED & RESPONSIVE VERSION
*/

/*
MAIN KEYBOARD CONTAINER
*/

#keyboard {
	font-family: 'Akhil HE', 'Noto Sans', 'Arial Unicode MS', Arial, sans-serif;
	font-weight: 400;
	font-size: 1.3rem; /* Base size */
	line-height: 1;
	color: #302010;
	text-align: left;
	width: 482px;
	padding: 0;
	position: relative; /* Start in page-flow */
	display: inline-block;
	z-index: 10; /* stays above content */
	background: rgba(250,250,250,0.96); /* slightly translucent */
	backdrop-filter: blur(4px); /* glass-like */
}

/* When floating */
#keyboard.floating {
	position: absolute;
	z-index: 9999;
}

/*
KEY ROWS
*/
.key-row {
	font-size: 0.5rem; /* to reduce whitespace between buttons. */
	white-space: nowrap;
}

/*
UNIFIED KEY FONT-SIZE (BUTTON ONLY)
*/
.key-row button {
	font-size: 1.3rem;
	line-height: 1;
	vertical-align: middle;
	font-weight: 400;
	font-family: 'Akhil HE', 'Noto Sans', 'Arial Unicode MS', Arial, sans-serif;
}

/*
GENERAL KEY SIZES
*/
.baTan-draggable,
.baTan,
.baTan-halant,
.baTan-joDdaakShar,
.baTan-gulaabee,
.baTan-svar,
.baTan-svar-a,
.baTan-varn,
.baTan-varn-a,
.baTan-varn-asaamaanya,
.baTan-haree,
.baTan-small-font-size {
	width: 28px;
	height: 26px;
}

/*
SPECIAL WIDTH KEYS
*/
.deDda-baTan {
	width: 44px;
	height: 26px;
	background-color: #ded;
}

.dogunaa-baTan {
	width: 59px;
	height: 26px;
	background-color: #ded;
}

.DhaaEE-baTan {
	width: 72px;
	height: 26px;
	background-color: #ded;
}

/*
COLOR GROUPS
*/
.baTan { background-color: #ded; }
.baTan-halant { background-color: #f77; }
.baTan-joDdaakShar { background-color: #bee; }
.baTan-gulaabee { background-color: #ebd; }
.baTan-svar { background-color: #cdf; }
.baTan-svar-a { background-color: #bbf; }
.baTan-varn { background-color: #ddd; }
.baTan-varn-a { background-color: #eee; }
.baTan-varn-asaamaanya { background-color: #bff; }
.baTan-haree { background-color: #bfb; }
.baTan-draggable { background-color: rgba(239,239,239,0.96); }
.baTan-small-font-size { background-color: #ded; }

/*
RESPONSIVE MEDIA QUERIES
*/
@media (min-width: 768px) {

	#keyboard {
		font-size: 1.4rem;
		width: 580px;
	}

	.key-row { font-size: 0.55rem; }

	.key-row button {
		font-size: 1.4rem;
	}

	.deDda-baTan { width: 50px; height: 30px; }
	.dogunaa-baTan { width: 67px; height: 30px; }
	.DhaaEE-baTan { width: 83px; height: 30px; }

	.baTan,
	.baTan-halant,
	.baTan-joDdaakShar,
	.baTan-gulaabee,
	.baTan-svar,
	.baTan-svar-a,
	.baTan-varn,
	.baTan-varn-a,
	.baTan-varn-asaamaanya,
	.baTan-haree,
	.baTan-small-font-size {
		width: 32px;
		height: 30px;
	}
}

@media (min-width: 1200px) {

	#keyboard {
		font-size: 1.5rem;
		width: 730px;
	}

	.key-row { font-size: 0.6rem; }

	.key-row button {
		font-size: 1.5rem;
	}

	.deDda-baTan { width: 66px; height: 34px; }
	.dogunaa-baTan { width: 89px; height: 34px; }
	.DhaaEE-baTan { width: 112px; height: 34px; }

	.baTan,
	.baTan-halant,
	.baTan-joDdaakShar,
	.baTan-gulaabee,
	.baTan-svar,
	.baTan-svar-a,
	.baTan-varn,
	.baTan-varn-a,
	.baTan-varn-asaamaanya,
	.baTan-haree,
	.baTan-small-font-size {
		width: 43px;
		height: 34px;
	}
}

/* Small-font override: button only */
.key-row button.baTan-small-font-size {
	font-family: 'Noto Sans', 'Arial Unicode MS', Arial, sans-serif;
	font-size: 2em !important;
}

/* Hidden accessibility text */
.visually-hidden {
	position: absolute;
	left: -9999px;
}

/* Interaction */
.key-btn {
	transition: opacity 120ms ease, filter 120ms ease, transform 90ms ease;
}

.key-btn:hover {
	filter: brightness(1.08);
}

.key-btn:active {
	transform: scale(0.97);
	opacity: 0.9;
}

/*
NORMALIZE BUTTON (INPUT REMOVED)
*/
button.baTan-draggable,
button.baTan,
button.baTan-varn,
button.baTan-svar,
button.baTan-halant,
button.baTan-joDdaakShar,
button.baTan-gulaabee,
button.baTan-svar-a,
button.baTan-varn-a,
button.baTan-varn-asaamaanya,
button.baTan-haree,
button.baTan-small-font-size,
button.deDda-baTan,
button.dogunaa-baTan,
button.DhaaEE-baTan,
button.key-btn {
	-webkit-appearance: none;
	appearance: none;
	border: none;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	text-align: center;
	display: inline-block;
	cursor: pointer;
}

/*
DRAGGABLE BUTTON
*/

.baTan-draggable {
	cursor: grab;
	touch-action: none; /* required for smooth touch dragging */
	user-select: none;
	-webkit-user-drag: none;
}

.baTan-draggable:active {
	cursor: grabbing;
}

/*
MISC
*/

.v-sep {
	background: #ccc;
	color: #f4ecec;
	margin: 1px 0;
	padding: 0;
}