.clc-touch-controls[hidden] { display: none !important; }
.clc-touch-controls {
	position: fixed;
	z-index: 1050;
	left: 50%;
	bottom: calc(10px + env(safe-area-inset-bottom, 0px));
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	box-sizing: border-box;
	max-width: calc(100vw - 24px);
	padding: 8px 12px;
	border: 1px solid #bed2fa;
	border-radius: 24px;
	background: rgb(246 250 255 / 96%);
	box-shadow: 0 5px 22px #24477c33, inset 0 1px 0 #fff;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}
.clc-touch-controls .clc-touch-control {
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	width: 58px;
	min-width: 48px;
	height: 54px;
	margin: 0;
	padding: 0;
	border: 1px solid #2d5ad8;
	border-radius: 17px;
	font: 700 34px/1 system-ui, sans-serif;
	color: #fff;
	background: linear-gradient(155deg, #447cf3, #234cbf);
	box-shadow: 0 4px 0 #193987, 0 6px 9px #23477c26;
	cursor: pointer;
	touch-action: none;
	-webkit-tap-highlight-color: transparent;
	transition: transform 90ms ease, box-shadow 90ms ease, background 90ms ease;
}
.clc-touch-controls .clc-touch-control[aria-pressed="true"] {
	transform: translateY(3px);
	background: linear-gradient(155deg, #1b9e8b, #137769);
	border-color: #137769;
	box-shadow: 0 1px 0 #104f49, inset 0 2px 4px #104f4933;
}
.clc-touch-controls .clc-touch-control:focus-visible { outline: 3px solid #ffbf3f; outline-offset: 4px; }
.clc-touch-controls--numeric { gap: 14px; }
.clc-touch-directions { display: flex; flex-direction: column; gap: 10px; }
.clc-touch-digits { display: grid; grid-template-columns: repeat(3, 58px); gap: 8px; }
.clc-touch-digits .clc-touch-control {
	font-size: 28px;
	background: linear-gradient(155deg, #187eae, #105d91);
	border-color: #105d91;
	box-shadow: 0 4px 0 #0b4167, 0 6px 9px #23477c26;
}
.clc-touch-digits .clc-touch-control[aria-pressed="true"] {
	background: linear-gradient(155deg, #1b9e8b, #137769);
	box-shadow: 0 1px 0 #104f49, inset 0 2px 4px #104f4933;
}
@media (min-width: 740px) {
	.clc-touch-controls--numeric { gap: 14px; }
	.clc-touch-controls--numeric .clc-touch-control { width: 48px; }
	.clc-touch-directions { flex-direction: row; gap: 8px; }
	.clc-touch-digits { grid-template-columns: repeat(9, 48px); gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
	.clc-touch-controls .clc-touch-control { transition: none; }
}