/*
 * Mobile landscape has its own hook and height-aware game geometry.
 * Portrait-only rules live in sorting-mobile.css and cannot leak in here.
 */
@media (orientation: landscape) and (max-width: 1200px) {
	body.sorting-mobile-landscape,
	body.sorting-mobile-landscape #fullScreenContainer,
	body.sorting-mobile-landscape #game,
	body.sorting-mobile-landscape #UIContainer {
		overflow:hidden;
	}

	body.sorting-mobile-landscape #UIContainer {
		background-size: 100% 88% !important;
		background-position: center top !important;
		background-repeat: no-repeat !important;
	}

	body.sorting-mobile-landscape #dragFrame,
	body.sorting-mobile-landscape .boxSubcateg,
	body.sorting-mobile-landscape .menuButton {
		touch-action:none;
	}

	body.sorting-mobile-landscape #boxesContainer,
	body.sorting-mobile-landscape .dropBoxesContainer {
		padding-left:0 !important;
		box-sizing:border-box;
	}

	body.sorting-mobile-landscape .ropeContainer {
		pointer-events:none;
	}

	/* Opening title anchored near the top */
	body.sorting-mobile-landscape #UIContainer > .menuText {
		position:absolute;
		top:2px;
		left:0;
		right:0;
		z-index:60;
		height:26px;
		padding-top:0 !important;
		font-size:clamp(16px, 2.8vw, 24px) !important;
		line-height:26px;
		font-weight:900;
		color:#ffffff !important;
		text-shadow:0 2px 4px rgba(0, 0, 0, 0.25);
		white-space:nowrap;
		text-align:center;
	}

	/* Dock left menu to top-left (3%) and right menu to top-right (3%) with 3px top gap */
	body.sorting-mobile-landscape #topicMenuContainer {
		position:absolute !important;
		left:3% !important;
		right:auto !important;
		top:3px !important;
		width:37% !important;
		max-width:37% !important;
		box-sizing:border-box;
	}

	body.sorting-mobile-landscape #lessonsMenuContainer {
		position:absolute !important;
		left:auto !important;
		right:3% !important;
		top:3px !important;
		width:37% !important;
		max-width:37% !important;
		box-sizing:border-box;
	}

	/* Compact cloud headers with centered title */
	body.sorting-mobile-landscape #menuCloud {
		width:100% !important;
		height:clamp(44px, 6.5vw, 56px) !important;
		font-size:clamp(18px, 2.6vw, 25px) !important;
		line-height:1 !important;
		background-size:100% 100% !important;
		box-sizing:border-box;
		filter:drop-shadow(0 2px 4px rgba(0, 0, 0, 0.12));
	}

	body.sorting-mobile-landscape #menuCloud > div {
		padding-top:clamp(18px, 2.8vw, 26px) !important;
		padding-left:6px !important;
		padding-right:6px !important;
		line-height:1 !important;
		white-space:nowrap;
		font-weight:900 !important;
		color:#20505d !important;
		box-sizing:border-box;
	}

	/* Menu list containers - force 100% width to override JS inline widths (200px/155px) */
	body.sorting-mobile-landscape .scrollMenu,
	body.sorting-mobile-landscape #lessonButtons {
		width:100% !important;
		height:auto !important;
		margin-top:clamp(2px, 0.6dvh, 5px) !important;
		box-sizing:border-box;
	}

	body.sorting-mobile-landscape #topicPanel,
	body.sorting-mobile-landscape #lessonsPanel {
		display:block !important;
		width:100% !important;
		height:auto !important;
		margin-left:0 !important;
		padding-bottom:clamp(8px, 1.5dvh, 12px) !important;
		box-sizing:border-box;
	}

	/* Menu panel cards with rounded bottom and smooth 3D drop-shadow */
	body.sorting-mobile-landscape .menuPanel {
		height:auto !important;
		min-height:auto !important;
		border-bottom-left-radius:18px !important;
		border-bottom-right-radius:18px !important;
		box-shadow:0 8px 24px rgba(0, 0, 0, 0.16) !important;
	}

	/* High-contrast subheadings inside panels */
	body.sorting-mobile-landscape .menuPanel > .menuText {
		padding:clamp(3px, 0.6dvh, 5px) 6px !important;
		font-size:clamp(14px, 2vw, 17px) !important;
		line-height:1.1;
		font-weight:800 !important;
		color:#20505d !important;
		box-sizing:border-box;
	}

	/* Compact, high-contrast menu buttons with subtle shadows and tactile hover */
	body.sorting-mobile-landscape .menuPanel .menuButton {
		width:calc(100% - 10px) !important;
		height:clamp(34px, 8dvh, 40px) !important;
		min-height:34px !important;
		margin-top:0 !important;
		margin-left:auto !important;
		margin-right:auto !important;
		margin-bottom:clamp(3px, 1dvh, 5px) !important;
		border-radius:18px;
		display:flex !important;
		align-items:center !important;
		justify-content:center !important;
		box-shadow:0 3px 6px rgba(0, 0, 0, 0.1) !important;
		transition:transform 0.15s ease, box-shadow 0.15s ease !important;
	}

	body.sorting-mobile-landscape .menuPanel .menuButton:hover,
	body.sorting-mobile-landscape .menuPanel .menuButton:active {
		transform:scale(1.025) !important;
		box-shadow:0 5px 12px rgba(0, 0, 0, 0.18) !important;
	}

	body.sorting-mobile-landscape .menuPanel .menuButton > div {
		width:100% !important;
		padding:0 6px !important;
		font-size:clamp(16px, 2.4vw, 21px) !important;
		line-height:1.1 !important;
		font-weight:400 !important;
		color:#20505d !important;
		white-space:nowrap !important;
		overflow:hidden !important;
		text-overflow:ellipsis !important;
		display:flex !important;
		align-items:center !important;
		justify-content:center !important;
	}

	body.sorting-mobile-landscape .menuPanel .menuButton.yellow > div {
		color:#3d481d !important;
	}

	body.sorting-mobile-landscape .menuPanel > div:last-child,
	body.sorting-mobile-landscape .menuPanel > div:nth-last-child(2) {
		display:none;
	}

	/* Top score bar & HUD in gameplay (mobile-landscape) */
	body.sorting-mobile-landscape #scoreBar {
		height:clamp(34px, 8dvh, 44px) !important;
		min-height:34px !important;
		background:linear-gradient(180deg, #96e0ee 0%, #68cad9 100%) !important;
		border-bottom:2px solid rgba(255, 255, 255, 0.85) !important;
		box-shadow:0 3px 10px rgba(0, 0, 0, 0.12) !important;
		display:flex !important;
		align-items:center !important;
		z-index:50 !important;
		box-sizing:border-box;
	}

	body.sorting-mobile-landscape #scoreBar table {
		height:100% !important;
	}

	body.sorting-mobile-landscape #scoreBar td {
		vertical-align:middle !important;
	}

	body.sorting-mobile-landscape #scoreBar span {
		color:#ffffff !important;
		font-size:clamp(14px, 2.2vw, 19px) !important;
		font-weight:900 !important;
		line-height:1 !important;
		text-shadow:0 2px 4px rgba(0, 0, 0, 0.25) !important;
		white-space:nowrap !important;
		letter-spacing:0.5px;
	}

	body.sorting-mobile-landscape #scoreBox {
		width:clamp(60px, 9vw, 80px) !important;
		height:clamp(22px, 5.5dvh, 28px) !important;
		min-width:60px !important;
		font-size:clamp(15px, 2.3vw, 20px) !important;
		font-weight:900 !important;
		line-height:1 !important;
		color:#20505d !important;
		background:#ffffff !important;
		border:2px solid #ffffff !important;
		border-radius:999px !important;
		box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.16) !important;
		display:inline-flex !important;
		align-items:center !important;
		justify-content:center !important;
		padding:0 !important;
		box-sizing:border-box;
	}

	/* Expanded target category boxes & correctly guessed cards in mobile-landscape */
	body.sorting-mobile-landscape #dragFrame {
		box-sizing:border-box !important;
	}

	body.sorting-mobile-landscape .dragFrameText {
		line-height:1.1 !important;
		font-weight:900 !important;
		color:#ffffff !important;
		text-shadow:0 1px 3px rgba(0, 0, 0, 0.4) !important;
		word-break:break-word !important;
		overflow-wrap:anywhere !important;
		padding:0 6px !important;
		box-sizing:border-box;
	}

	body.sorting-mobile-landscape #boxesContainer,
	body.sorting-mobile-landscape .dropBoxesContainer {
		padding-left:0 !important;
		margin-left:0 !important;
		width:100% !important;
		box-sizing:border-box;
	}

	body.sorting-mobile-landscape [id^="subcateg_"] > div:first-child {
		position:absolute !important;
		left:0 !important;
		right:0 !important;
		bottom:100% !important;
		top:auto !important;
		margin-bottom:4px !important;
		width:100% !important;
		height:auto !important;
	}

	body.sorting-mobile-landscape .whiteBoxTop {
		background:rgba(255, 255, 255, 0.95) !important;
		border:2px solid #42210b !important;
		border-radius:12px !important;
		box-shadow:0 4px 12px rgba(0, 0, 0, 0.18) !important;
		box-sizing:border-box;
		padding:3px !important;
		min-height:clamp(95px, 28vh, 141px) !important;
		height:clamp(95px, 28vh, 141px) !important;
		width:100% !important;
		max-width:100% !important;
		overflow:hidden !important;
	}

	body.sorting-mobile-landscape .whiteBoxTop table {
		margin:0 auto !important;
		width:100% !important;
		height:auto !important;
		border-collapse:separate !important;
		table-layout:fixed !important;
	}

	body.sorting-mobile-landscape .placedThumbnailCell {
		background:transparent !important;
		border:none !important;
		padding:1px 2px !important;
		box-sizing:border-box;
		vertical-align:top !important;
		text-align:center !important;
		width:50% !important;
		height:auto !important;
	}

	body.sorting-mobile-landscape .placedImgWrap {
		display:inline-flex !important;
		align-items:center !important;
		justify-content:center !important;
		width:fit-content !important;
		height:fit-content !important;
		max-width:clamp(36px, 12vh, 52px) !important;
		max-height:clamp(36px, 12vh, 52px) !important;
		margin:0 auto !important;
		background-color:#ffffff !important;
		border-radius:6px !important;
		box-shadow:0 1px 4px rgba(0, 0, 0, 0.12) !important;
		padding:2px !important;
		box-sizing:border-box;
		line-height:0;
		overflow:hidden !important;
	}

	body.sorting-mobile-landscape .placedImgWrap img {
		max-width:clamp(32px, 10vh, 48px) !important;
		max-height:clamp(32px, 10vh, 48px) !important;
		width:auto !important;
		height:auto !important;
		object-fit:contain !important;
		display:block;
		margin:0 auto;
	}

	body.sorting-mobile-landscape [id^="bottomGroup_"] {
		position:relative !important;
		width:100% !important;
		height:100% !important;
		display:flex !important;
		flex-direction:column !important;
		justify-content:space-between !important;
		box-sizing:border-box;
	}

	body.sorting-mobile-landscape .groupImageContainer {
		width:94% !important;
		flex:1 1 auto !important;
		height:84% !important;
		max-height:84% !important;
		margin:4px auto 3px !important;
		background-color:#ffffff !important;
		border-radius:10px !important;
		display:flex !important;
		align-items:center !important;
		justify-content:center !important;
		overflow:hidden !important;
		box-sizing:border-box;
		box-shadow:inset 0 1px 4px rgba(0, 0, 0, 0.12) !important;
	}

	body.sorting-mobile-landscape .groupImageContainer img {
		max-width:94% !important;
		max-height:84% !important;
		width:auto !important;
		height:auto !important;
		transform:none !important;
		object-fit:contain !important;
		display:block;
	}

	body.sorting-mobile-landscape .groupTextBottom {
		width:100% !important;
		flex:0 0 auto !important;
		font-size:clamp(14px, 2vw, 18px) !important;
		font-weight:900 !important;
		line-height:1.2 !important;
		color:#ffffff !important;
		background-color:#42210b !important;
		border-radius:0 0 10px 10px !important;
		padding:4px 6px !important;
		text-align:center !important;
		box-sizing:border-box;
	}

	/* Enlarged top dragged card & label in mobile-landscape */
	body.sorting-mobile-landscape #dragFrame {
		z-index:300 !important;
		filter:drop-shadow(0 6px 14px rgba(0, 0, 0, 0.22)) !important;
		touch-action:none;
	}

	body.sorting-mobile-landscape #dragFrame .dragFrameText {
		font-size:clamp(15px, 2.2vw, 22px) !important;
		font-weight:900 !important;
		color:#ffffff !important;
		text-shadow:0 2px 4px rgba(0, 0, 0, 0.4) !important;
	}

	/* Game Over popup board anchored to ropes in mobile landscape */
	body.sorting-mobile-landscape #gameOverContainer,
	body:not(.sorting-mobile-page) #gameOverContainer {
		position:absolute !important;
		left:50% !important;
		top:4px !important;
		transform:translateX(-50%) !important;
		width:clamp(400px, 64vw, 540px) !important;
		max-width:96% !important;
		height:auto !important;
		margin:0 !important;
		background:none !important;
		background-color:transparent !important;
		z-index:2000 !important;
		box-sizing:border-box !important;
	}

	body.sorting-mobile-landscape #gameOverContainer::before,
	body:not(.sorting-mobile-page) #gameOverContainer::before {
		display:none !important;
	}

	/* Show hanging ropes (strings) cleanly with transparent backgrounds */
	body.sorting-mobile-landscape #gameOverContainer table,
	body:not(.sorting-mobile-page) #gameOverContainer table {
		width:100% !important;
		background:none !important;
		background-color:transparent !important;
		border-collapse:collapse !important;
	}

	body.sorting-mobile-landscape #gameOverContainer table tr,
	body:not(.sorting-mobile-page) #gameOverContainer table tr {
		background:none !important;
		background-color:transparent !important;
	}

	body.sorting-mobile-landscape #gameOverContainer table td,
	body:not(.sorting-mobile-page) #gameOverContainer table td {
		background:none !important;
		background-color:transparent !important;
		border:none !important;
	}

	/* Position hanging ropes to plug directly into the top corners of the popup board */
	body.sorting-mobile-landscape #gameOverContainer table tr:first-child,
	body:not(.sorting-mobile-page) #gameOverContainer table tr:first-child {
		display:table-row !important;
		height:clamp(22px, 5.5vh, 38px) !important;
		background:none !important;
	}

	body.sorting-mobile-landscape #gameOverContainer table tr:first-child td:first-child,
	body:not(.sorting-mobile-page) #gameOverContainer table tr:first-child td:first-child {
		display:table-cell !important;
		text-align:left !important;
		padding-left:9% !important;
		vertical-align:bottom !important;
		height:clamp(22px, 5.5vh, 38px) !important;
		background:none !important;
	}

	body.sorting-mobile-landscape #gameOverContainer table tr:first-child td:last-child,
	body:not(.sorting-mobile-page) #gameOverContainer table tr:first-child td:last-child {
		display:table-cell !important;
		text-align:right !important;
		padding-right:9% !important;
		vertical-align:bottom !important;
		height:clamp(22px, 5.5vh, 38px) !important;
		background:none !important;
	}

	body.sorting-mobile-landscape #gameOverContainer table tr:first-child img,
	body:not(.sorting-mobile-page) #gameOverContainer table tr:first-child img {
		height:clamp(22px, 5.5vh, 38px) !important;
		width:auto !important;
		display:inline-block !important;
		vertical-align:bottom !important;
		background:none !important;
	}

	/* Enlarge popup message card so it connects directly with the ropes */
	body.sorting-mobile-landscape #gameOverContainerDiv,
	body:not(.sorting-mobile-page) #gameOverContainerDiv {
		background-color:#92d7e7 !important;
		border:5px solid #ffffff !important;
		border-radius:22px !important;
		box-shadow:0 10px 30px rgba(0, 0, 0, 0.35) !important;
		height:auto !important;
		min-height:auto !important;
		width:92% !important;
		margin:-4px auto 0 auto !important;
		padding:14px 20px 18px 20px !important;
		box-sizing:border-box !important;
		display:flex !important;
		flex-direction:column !important;
		align-items:center !important;
		justify-content:center !important;
	}

	body.sorting-mobile-landscape #gameOverCloud,
	body:not(.sorting-mobile-page) #gameOverCloud {
		width:clamp(240px, 42vw, 340px) !important;
		height:clamp(62px, 12.5vh, 85px) !important;
		margin:0 auto 4px auto !important;
		background-size:100% 100% !important;
		font-size:clamp(19px, 3vw, 26px) !important;
		font-weight:900 !important;
		color:#20505d !important;
		display:flex !important;
		align-items:center !important;
		justify-content:center !important;
	}

	body.sorting-mobile-landscape #gameOverCloud > div,
	body:not(.sorting-mobile-page) #gameOverCloud > div {
		padding-top:10px !important;
	}

	body.sorting-mobile-landscape #gameOverScore,
	body:not(.sorting-mobile-page) #gameOverScore {
		font-size:clamp(17px, 2.6vw, 22px) !important;
		font-weight:900 !important;
		color:#ffffff !important;
		text-shadow:0 2px 4px rgba(0, 0, 0, 0.3) !important;
		margin-top:2px !important;
		margin-bottom:12px !important;
		text-align:center !important;
	}

	body.sorting-mobile-landscape #gameOverButtonsContainer,
	body:not(.sorting-mobile-page) #gameOverButtonsContainer {
		display:flex !important;
		align-items:center !important;
		justify-content:space-evenly !important;
		width:100% !important;
		gap:10px !important;
		margin-top:2px !important;
	}

	body.sorting-mobile-landscape #gameOverButtonsContainer .menuButton,
	body:not(.sorting-mobile-page) #gameOverButtonsContainer .menuButton {
		float:none !important;
		margin:0 !important;
		width:clamp(155px, 27vw, 205px) !important;
		height:clamp(38px, 8.5vh, 46px) !important;
		border-radius:20px !important;
		box-shadow:0 3px 8px rgba(0,0,0,0.15) !important;
		display:flex !important;
		align-items:center !important;
		justify-content:center !important;
		transition:transform 0.15s ease !important;
	}

	body.sorting-mobile-landscape #gameOverButtonsContainer .menuButton:hover,
	body:not(.sorting-mobile-page) #gameOverButtonsContainer .menuButton:hover {
		transform:scale(1.04) !important;
	}

	body.sorting-mobile-landscape #gameOverButtonsContainer .menuButton > div,
	body:not(.sorting-mobile-page) #gameOverButtonsContainer .menuButton > div {
		font-size:clamp(15px, 2.2vw, 18px) !important;
		font-weight:800 !important;
		color:#20505d !important;
		white-space:nowrap !important;
		text-align:center !important;
		padding:0 6px !important;
	}

	/* Large centered Loading text badge in mobile landscape */
	body.sorting-mobile-landscape #LoadingDiv {
		position:absolute !important;
		top:45% !important;
		left:50% !important;
		transform:translate(-50%, -50%) !important;
		margin:0 !important;
		font-size:clamp(22px, 4.5vw, 36px) !important;
		font-weight:900 !important;
		color:#ffffff !important;
		letter-spacing:2px !important;
		text-shadow:0 3px 8px rgba(0, 0, 0, 0.4) !important;
		background:rgba(32, 80, 93, 0.55) !important;
		padding:12px 32px !important;
		border-radius:999px !important;
		border:2px solid rgba(255, 255, 255, 0.85) !important;
		box-shadow:0 8px 24px rgba(0, 0, 0, 0.25) !important;
		text-align:center !important;
		white-space:nowrap !important;
		z-index:1000 !important;
	}

	/* Lessons Mode Box (Identical structure to Desktop: Brown container, white inner box, brown bottom label) */
	body.sorting-mobile-landscape .lessonBoxSubcateg,
	body:not(.sorting-mobile-page) .lessonBoxSubcateg {
		background-color:#42210b !important;
		border:none !important;
		border-radius:4px !important;
		box-shadow:0 6px 16px rgba(0, 0, 0, 0.25) !important;
		box-sizing:border-box !important;
		position:absolute !important;
		display:block !important;
		overflow:hidden !important;
	}

	body.sorting-mobile-landscape .lessonBoxSubcateg .whiteBox,
	body:not(.sorting-mobile-page) .lessonBoxSubcateg .whiteBox {
		width:86% !important;
		height:78% !important;
		margin:7% auto 0 !important;
		background-color:#fcf9f7 !important;
		border-radius:3px !important;
		position:relative !important;
		overflow:hidden !important;
		box-sizing:border-box !important;
		padding:1px !important;
		display:block !important;
		z-index:2 !important;
	}

	body.sorting-mobile-landscape .lessonBoxSubcateg .whiteBox table,
	body:not(.sorting-mobile-page) .lessonBoxSubcateg .whiteBox table {
		width:100% !important;
		height:100% !important;
		background-color:#fcf9f7 !important;
		border-collapse:collapse !important;
	}

	body.sorting-mobile-landscape .lessonBoxSubcateg .whiteBox td,
	body:not(.sorting-mobile-page) .lessonBoxSubcateg .whiteBox td {
		background-color:#fcf9f7 !important;
		border:none !important;
	}

	body.sorting-mobile-landscape .lessonBoxSubcateg .whiteBox td.emptyLessonTd,
	body:not(.sorting-mobile-page) .lessonBoxSubcateg .whiteBox td.emptyLessonTd {
		background-color:#fcf9f7 !important;
		border:none !important;
	}

	body.sorting-mobile-landscape .lessonBoxSubcateg .whiteBox td.placedLessonTd,
	body:not(.sorting-mobile-page) .lessonBoxSubcateg .whiteBox td.placedLessonTd {
		background-color:#d8c480 !important;
		color:#42210b !important;
		font-weight:800 !important;
		vertical-align:middle !important;
		text-align:center !important;
		border-radius:2px !important;
	}

	body.sorting-mobile-landscape .lessonBoxSubcateg .lessonGroupText,
	body:not(.sorting-mobile-page) .lessonBoxSubcateg .lessonGroupText {
		position:absolute !important;
		bottom:0 !important;
		left:0 !important;
		right:0 !important;
		height:30px !important;
		line-height:30px !important;
		font-size:clamp(13px, 1.8vw, 17px) !important;
		font-weight:900 !important;
		color:#ffffff !important;
		text-shadow:0 1px 2px rgba(0, 0, 0, 0.4) !important;
		padding:0 4px !important;
		box-sizing:border-box !important;
		text-align:center !important;
		word-break:break-word !important;
		overflow-wrap:anywhere !important;
		margin:0 !important;
		width:100% !important;
		background-color:#42210b !important;
		border:none !important;
		display:block !important;
		z-index:5 !important;
	}
}