body.sorting-mobile-page .mobileMenuList {
	padding:0 12px;
	box-sizing:border-box;
}

body.sorting-mobile-page .mobileMenuList .menuButton {
	width:calc(100% - 2px) !important;
	margin:0 auto 12px !important;
	min-height:46px;
	border-radius:24px;
	box-shadow:0 2px 0 rgba(66, 33, 11, 0.14);
}

body.sorting-mobile-page .mobileMenuList .menuButton div {
	padding:0 10px !important;
	line-height:1.02;
	font-size:14px !important;
	font-weight:700;
}

@media (max-width: 1200px) {
	html,
	body.sorting-mobile-page,
	body.sorting-mobile-page #fullScreenContainer,
	body.sorting-mobile-page #game {
		overflow-x:hidden !important;
		overflow-y:auto !important;
	}

	body.sorting-mobile-page #UIContainer {
		overflow-x:hidden !important;
		overflow-y:auto !important;
	}
}

body.sorting-mobile-page #gameOverContainer {
	display:flex;
	justify-content:center;
	align-items:flex-start;
	padding-top:6%;
	box-sizing:border-box;
}

body.sorting-mobile-page #gameOverContainer table {
	width:100%;
	/* Keep the sign directly below the string row instead of distributing
	   the two table rows across the full overlay height. */
	height:auto !important;
	border-collapse:collapse;
}

body.sorting-mobile-page #gameOverContainer tr:first-child {
	height:64px;
}

body.sorting-mobile-page #gameOverContainer tr:nth-child(2) > td {
	vertical-align:top;
}

/* The original string assets are only 64px high.  Preserve their table row
   for the sign layout, but draw full-length strings from the top of the game
   area down to the sign. */
body.sorting-mobile-page #gameOverContainer tr:first-child img {
	opacity:0;
}

body.sorting-mobile-page #gameOverContainerDiv::before,
body.sorting-mobile-page #gameOverContainerDiv::after {
	content:"";
	position:absolute;
	bottom:100%;
	width:2px;
	/* Match the distance from the sign to the top edge of the game area. */
	height:25vw;
	background:#fcf9f7;
	transform-origin:bottom center;
	pointer-events:none;
}

body.sorting-mobile-page #gameOverContainerDiv::before {
	left:12%;
	transform:rotate(-2deg);
}

body.sorting-mobile-page #gameOverContainerDiv::after {
	right:12%;
	transform:rotate(2deg);
}

body.sorting-mobile-page #gameOverContainerDiv {
	position:relative;
	margin:0 auto !important;
	width:76% !important;
	height:auto !important;
	min-height:230px;
	padding:16px 16px 18px;
	border-width:10px !important;
	box-sizing:border-box;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:flex-start;
}

body.sorting-mobile-page #gameOverCloud {
	margin-top:2%;
	margin-left:0;
	width:min(100%, 250px) !important;
	height:auto !important;
	aspect-ratio:353 / 115;
	background-position:center;
	display:flex;
	align-items:center;
	justify-content:center;
}

body.sorting-mobile-page #gameOverCloud div {
	padding-top:8px;
	position:static;
	width:100%;
	text-align:center;
	font-size:1.15em;
	line-height:1.05;
}

body.sorting-mobile-page #gameOverScore {
	position:static;
	top:auto;
	height:auto;
	margin-top:12px;
	font-size:1.05em !important;
	font-weight:700;
	text-align:center;
}

body.sorting-mobile-page #gameOverButtonsContainer {
	position:static;
	top:auto;
	height:auto;
	width:100%;
	margin-top:auto;
	padding-top:18px;
	display:flex;
	justify-content:space-between;
	align-items:flex-end;
	gap:12px;
}

body.sorting-mobile-page #gameOverButtonsContainer .menuButton {
	float:none !important;
	margin:0 !important;
	width:47% !important;
	height:68px !important;
	border-radius:999px;
	display:flex;
	align-items:center;
	justify-content:center;
	box-shadow:0 3px 0 rgba(66, 33, 11, 0.14);
}

body.sorting-mobile-page #gameOverButtonsContainer .menuButton div {
	padding:0 6px !important;
	font-size:1.25em;
	line-height:0.9;
	font-weight:700;
	white-space:normal;
	text-align:center;
	color:#486f81;
}

	body.sorting-mobile-page #gameTopButtons {
		top:8px;
		right:18px;
	}

	body.sorting-mobile-page .ropeContainer {
		z-index:250;
		pointer-events:none;
	}

	body.sorting-mobile-page #dragFrame {
		z-index:300;
	}

	body.sorting-mobile-page .boxSubcateg {
		overflow:visible;
	}

	body.sorting-mobile-page .bigMedal {
		z-index:450;
		pointer-events:none;
	}

@media (max-width: 1200px) {
	body.sorting-mobile-page #UIContainer {
		overflow:hidden;
		background-image:
			radial-gradient(circle at 20px calc(var(--sorting-blue-stop, 30%) - 2px), #fcf9f7 0 20px, transparent 21px),
			linear-gradient(to bottom, #92d7e7 0 var(--sorting-blue-stop, 30%), #fcf9f7 var(--sorting-blue-stop, 30%) 100%) !important;
		background-repeat:repeat-x, no-repeat !important;
		background-size:42px 100%, 100% 100% !important;
		background-position:0 0, 0 0 !important;
	}

	body.sorting-mobile-page #UIContainer > .menuText {
		position:relative;
		z-index:30;
		padding-top:7%;
		font-size:clamp(18px, 5.3vw, 24px) !important;
		line-height:1.15;
		white-space:normal;
		text-align:center;
	}

	body.sorting-mobile-page #topicMenuContainer {
		left:6% !important;
		top:9% !important;
		width:39% !important;
		max-width:39% !important;
		box-sizing:border-box;
	}

	body.sorting-mobile-page #lessonsMenuContainer {
		left:55% !important;
		top:9% !important;
		width:39% !important;
		max-width:39% !important;
		box-sizing:border-box;
	}

	body.sorting-mobile-page #menuCloud {
		width:100% !important;
		height:70px !important;
		font-size:clamp(22px, 6.6vw, 30px) !important;
		line-height:1 !important;
		background-size:100% 100%;
		box-sizing:border-box;
	}

	body.sorting-mobile-page #menuCloud > div {
		padding-top:42px !important;
		padding-left:8px !important;
		padding-right:8px !important;
		line-height:1 !important;
		white-space:normal;
		overflow-wrap:anywhere;
		word-break:normal;
		box-sizing:border-box;
	}

	body.sorting-mobile-page #topicMenuContainer #menuCloud > div {
		padding-right:12px !important;
	}

	body.sorting-mobile-page #lessonsMenuContainer #menuCloud > div {
		padding-left:12px !important;
		white-space:nowrap;
	}

	body.sorting-mobile-page #lessonsMenuContainer #menuCloud {
		font-size:clamp(18px, 5.4vw, 22px) !important;
	}

	body.sorting-mobile-page #topicPanel,
	body.sorting-mobile-page #lessonsPanel {
		width:100% !important;
		z-index:40;
	}

	body.sorting-mobile-page .menuPanel {
		padding:6px 0 2px;
		position:relative;
		z-index:40;
	}

	body.sorting-mobile-page .menuPanel > .menuText {
		color:#3e7381 !important;
		font-size:clamp(18px, 4.2vw, 22px) !important;
		line-height:1.1;
		font-weight:800;
		padding:12px 8px 8px;
		text-align:center;
	}

	body.sorting-mobile-page .mobileMenuList {
		max-height:none;
	}

	body.sorting-mobile-page .menuButton {
		min-height:46px;
		border-radius:24px;
		box-shadow:0 2px 0 rgba(66, 33, 11, 0.14);
	}

	body.sorting-mobile-page .menuButton div {
		font-size:18px !important;
		line-height:1.02;
		padding:0 10px !important;
		color:#3e7381;
		font-weight:700;
		word-break:break-word;
		overflow-wrap:anywhere;
		text-align:center;
	}

	body.sorting-mobile-page .groupTextBottom {
		font-size:15px !important;
		line-height:1;
		padding:4px 6px 5px;
		min-height:38px;
		top:auto;
		bottom:0;
		transform:none;
		display:flex;
		align-items:center;
		justify-content:center;
		word-break:normal;
		overflow-wrap:break-word;
		background-color:#42210b;
		color:#fcf9f7;
		box-sizing:border-box;
		max-width:100%;
	}

	body.sorting-mobile-page .basicGroupText {
		position:absolute;
		left:0;
		right:0;
		bottom:0;
		top:auto;
		transform:none;
		min-height:38px;
		margin-top:0;
	}

	body.sorting-mobile-page .groupImageContainer {
		width:84%;
		height:calc(100% - 46px);
		margin:8px auto 0;
		background-color:#fcf9f7;
		display:flex;
		align-items:center;
		justify-content:center;
		overflow:hidden;
		box-sizing:border-box;
	}

	body.sorting-mobile-page .groupImageContainer img {
		max-width:94%;
		max-height:94%;
		object-fit:contain;
	}

	body.sorting-mobile-page .boxSubcateg .whiteBox {
		height:calc(100% - 54px);
		margin-top:8px;
		position:relative;
		z-index:2;
		overflow:hidden;
		display:flex;
		align-items:flex-end;
		justify-content:center;
		box-sizing:border-box;
		padding-bottom:7px;
	}

	body.sorting-mobile-page .lessonGroupText {
		position:absolute;
		left:0;
		right:0;
		bottom:0;
		height:46px;
		margin-top:0 !important;
		padding:4px 6px 5px !important;
		background-color:#42210b;
		z-index:1;
		font-family:Arial, sans-serif;
		font-size:15px !important;
		line-height:1.08 !important;
		font-weight:600;
		color:#fcf9f7;
		display:flex;
		align-items:center;
		justify-content:center;
		text-align:center;
		box-sizing:border-box;
		overflow-wrap:break-word;
	}

	body.sorting-mobile-page .whiteBoxTop {
		background:transparent;
		border:0 !important;
		display:flex !important;
		justify-content:center;
		align-items:flex-end;
		overflow:visible;
	}

	body.sorting-mobile-page .whiteBoxTop table {
		margin:0 auto;
	}

	body.sorting-mobile-page .whiteBoxTop img {
		max-width:100%;
		max-height:100%;
		object-fit:contain;
		display:block;
	}

	body.sorting-mobile-page .geometryLabelBar {
		height:38%;
		display:flex;
		align-items:flex-end;
		justify-content:center;
		padding:2px 0 4px;
		box-sizing:border-box;
	}

	body.sorting-mobile-page .geometryGroupImage {
		height:52%;
		top:6%;
	}

	body.sorting-mobile-page #scoreBar {
		min-height:40px;
		height:48px !important;
		background:linear-gradient(180deg, #8ddae6 0%, #65c8d7 100%);
		border-bottom:4px solid rgba(252, 249, 247, 0.95);
		box-shadow:0 4px 0 rgba(66, 33, 11, 0.12);
		box-sizing:border-box;
	}

	body.sorting-mobile-page #scoreBar table {
		height:44px !important;
	}

	body.sorting-mobile-page #scoreBar span {
		color:#fcf9f7;
		font-size:18px !important;
		line-height:1;
		text-shadow:0 2px 0 rgba(66, 33, 11, 0.16);
		white-space:nowrap;
	}

	body.sorting-mobile-page #scoreBox {
		width:74px !important;
		min-width:74px;
		min-height:28px;
		display:flex;
		align-items:center;
		justify-content:center;
		font-size:24px !important;
		color:#42210b;
		background:#fcf9f7;
		border:3px solid #fcf9f7;
		border-radius:999px;
		box-shadow:0 3px 0 rgba(66, 33, 11, 0.16);
		font-weight:900;
		box-sizing:border-box;
	}

	body.sorting-mobile-page #LoadingDiv {
		margin-top:28% !important;
		margin-left:0 !important;
		width:100%;
		color:#fcf9f7;
		font-size:clamp(30px, 9vw, 44px) !important;
		line-height:1;
		font-weight:900;
		text-align:center;
		text-shadow:0 3px 0 rgba(66, 33, 11, 0.18);
	}

	body.sorting-mobile-page #infoFrame {
		top:15% !important;
		left:50%;
		transform:translate(-50%, -50%);
		margin-top:0;
		width:min(420px, 90%);
		height:auto;
		min-height:200px;
		aspect-ratio:7 / 4;
	}

	body.sorting-mobile-page #infoClose {
		top:14%;
		right:11%;
	}

	body.sorting-mobile-page #infoText {
		top:30%;
		left:12%;
		right:12%;
		font-size:18px;
		line-height:1.35;
	}

	html,
	body.sorting-mobile-page,
	body.sorting-mobile-page #fullScreenContainer,
	body.sorting-mobile-page #game,
	body.sorting-mobile-page #UIContainer {
		overflow-x:hidden !important;
		overflow-y:auto !important;
	}
}