/* Portrait menu based on the Math4Kid opening cards. Scoped away from gameplay. */
body.sorting-mobile-page #UIContainer.sorting-portrait-menu {
	width:100% !important;
	min-height:100vh !important;
	padding-bottom:0;
	--sorting-blue-stop:calc(100% - 24px) !important;
}

body.sorting-mobile-page #sortingPortraitMenu {
	position:relative;
	box-sizing:border-box;
	min-height:100vh;
	display:flex;
	flex-direction:column;
	padding:26px 22px 48px;
	color:#356b7b;
	font-family:Arial, sans-serif;
}

#sortingPortraitMenu #sortingChoiceHeading {
	margin:0;
	padding:2px 28px 0;
	font-size:clamp(21px, 6vw, 28px);
	font-weight:800;
	line-height:1.25;
	text-align:center;
	color:#285a6b;
	outline:none;
}

#sortingPortraitMenu .sorting-choices {
	flex:1;
	display:flex;
	flex-direction:column;
	justify-content:center;
	gap:clamp(14px, 3vh, 24px);
	width:100%;
	max-width:440px;
	margin:0 auto;
	padding:24px 0 12px;
}

#sortingPortraitMenu button,
#sortingPortraitMenu select {
	appearance:none;
	box-sizing:border-box;
	font:inherit;
	font-weight:700;
	color:#356b7b;
	cursor:pointer;
}

#sortingPortraitMenu .sorting-category-choice,
#sortingPortraitMenu .sorting-activity-choice {
	flex:0 0 auto;
	width:100%;
	border:3px solid #fff;
	border-radius:26px;
	background:#fcf9f7;
	box-shadow:0 5px 0 rgba(53, 107, 123, .18);
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:center;
	transition:transform .15s, box-shadow .15s;
}

#sortingPortraitMenu .sorting-category-choice {
	flex-direction:column;
	gap:8px;
	min-height:190px;
	height:clamp(190px, 28vh, 230px);
	padding:16px 12px;
	font-size:clamp(27px, 7vw, 32px);
}

#sortingPortraitMenu .sorting-choice-lessons,
#sortingPortraitMenu .sorting-choice-all { background:#fff8df; }

#sortingPortraitMenu .sorting-choice-icon {
	display:block;
	width:190px;
	height:90px;
	max-width:85%;
	object-fit:contain;
}

#sortingPortraitMenu .sorting-choice-description {
	font-size:clamp(13px, 3.6vw, 16px);
	font-weight:400;
	line-height:1.3;
}

#sortingPortraitMenu .sorting-activity-choice {
	min-height:58px;
	padding:14px 18px;
	font-size:clamp(18px, 5vw, 24px);
	line-height:1.2;
}

#sortingPortraitMenu .sorting-choice-back {
	position:absolute;
	top:18px;
	left:12px;
	width:44px;
	height:44px;
	padding:0;
	border:2px solid #fff;
	border-radius:14px;
	background:rgba(255,255,255,.55);
	font-size:28px;
}

#sortingPortraitMenu .sorting-level-label { font-weight:700; text-align:center; }
#sortingPortraitMenu #sortingLessonLevel {
	appearance:auto;
	width:100%;
	min-height:52px;
	padding:10px 16px;
	border:2px solid #fff;
	border-radius:16px;
	background:#fff8df;
	font-size:20px;
}

#sortingPortraitMenu button:active { transform:translateY(3px); box-shadow:none; }
#sortingPortraitMenu button:focus-visible,
#sortingPortraitMenu select:focus-visible { outline:3px solid #315d82; outline-offset:3px; }
@media (hover:hover) {
	#sortingPortraitMenu button:hover { border-color:#356b7b; }
}
@media (max-height:650px) {
	body.sorting-mobile-page #sortingPortraitMenu { padding:20px 18px 38px; }
	#sortingPortraitMenu .sorting-choices { gap:14px; padding-top:20px; }
	#sortingPortraitMenu .sorting-category-choice { min-height:164px; height:164px; gap:6px; padding:12px; }
	#sortingPortraitMenu .sorting-choice-icon { height:70px; }
}
@media (prefers-reduced-motion:reduce) {
	#sortingPortraitMenu button { transition:none; }
}