/* =========================================================
 * mobile.css —— 移动端响应式适配（阶段一：基础骨架）
 *
 * 仅在手机竖屏、手机横屏、粗指针设备生效，桌面端样式保持不变。
 * 后续阶段（软键盘、拖拽/点选、导航折叠）继续在此文件中扩展。
 * ========================================================= */

/* ---------- 文章排序：移动端上移/下移按钮（默认隐藏，仅在移动端显示） ---------- */
.lt-move-controls {
	display: none;
	gap: 8px;
	margin-top: 8px;
	justify-content: flex-end;
}

/* 触屏上可拖动区域允许纵向滚动，避免和页面滚动冲突 */
#sentenceAssemblePool > li,
#sentenceAssembleResult .lt-pick-result,
#articleAssemblePool > .uk-margin {
	touch-action: pan-y !important;
}

/* ---------- 手机竖屏 ---------- */
@media (max-width: 639px) {
	html {
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
	}

	html,
	body {
		height: auto;
		min-height: 100%;
		min-height: 100dvh;
	}

	body {
		padding-left: env(safe-area-inset-left);
		padding-right: env(safe-area-inset-right);
	}

	.uk-container {
		padding-left: 12px;
		padding-right: 12px;
	}

	/* 网格间距收窄，避免小屏上内容过窄 */
	.uk-grid {
		margin-left: -16px;
	}

	.uk-grid > * {
		padding-left: 16px;
	}

	.uk-grid + .uk-grid,
	.uk-grid > .uk-grid-margin,
	* + .uk-grid-margin {
		margin-top: 16px;
	}

	img {
		max-width: 100%;
		height: auto;
	}

	/* 长英文/长链接不撑破卡片 */
	.uk-card-title,
	.book-unit-list h1,
	.book-unit-list h4,
	.lt-article-assemble-item,
	#articleTitle,
	#sentenceTypeText,
	#sentenceSimpleWords {
		overflow-wrap: anywhere;
		word-break: break-word;
	}

	/* iOS 上输入控件小于 16px 聚焦时会自动放大页面 */
	input,
	textarea,
	[contenteditable="true"] {
		font-size: 16px;
	}

	.uk-button {
		min-height: 44px;
		padding-left: 16px;
		padding-right: 16px;
	}

	/* ---------- 顶部导航：先保证不横向溢出 ---------- */
	.uk-navbar-nav > li > a,
	.uk-navbar-item {
		height: 44px;
		min-height: 44px;
	}

	/* 小屏隐藏 logo 文字，只保留图标 */
	.uk-logo {
		font-size: 0;
	}

	.uk-logo img {
		width: 32px !important;
	}

	.uk-navbar-left {
		min-width: 0;
	}

	.uk-navbar-nav {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.uk-navbar-nav::-webkit-scrollbar {
		display: none;
	}

	.uk-navbar-nav > li > a {
		padding-left: 8px;
		padding-right: 8px;
		font-size: 12px;
		line-height: 1.25;
	}

	.uk-navbar-subtitle {
		display: none;
	}

	.nav-circle {
		height: 32px;
		border-radius: 32px;
	}

	.uk-reward {
		width: 42px !important;
		padding-right: 0;
		font-size: 12px;
		line-height: 32px;
	}

	.persional-info li {
		line-height: 1.4rem;
	}

	/* ---------- 主页面课程区 ---------- */
	#registeredCourseList,
	#outdatedCourseList {
		max-height: none;
		overflow: visible;
		padding-top: 8px;
		padding-right: 0;
	}

	#courseUnitList {
		max-height: none !important;
		overflow-y: visible !important;
	}

	.uk-selected-book p {
		line-height: 1.8rem;
	}

	.book-unit-list > ul > li {
		padding: 12px 12px 4px;
	}

	/* 书架、我的数据、统计卡片在手机上改为两列 */
	#bookShelf > div,
	#myStudyDataZone > div,
	#userTotalZone .uk-grid > div {
		width: 50% !important;
	}

	#bookShelf .uk-card-body,
	#myStudyDataZone .uk-card-body,
	#userTotalZone .uk-card-body {
		padding: 12px;
	}

	#bookShelf .uk-card-title {
		font-size: 0.9rem;
	}

	#userTotalZone .uk-card-title {
		font-size: 1.3rem;
	}

	/* ---------- 选课全屏弹窗 ---------- */
	.top-decoration {
		height: 120px;
	}

	.modal-select .uk-section {
		padding: 0 0 12px;
	}

	.search-course > .uk-tab > * > a,
	.search-course > .uk-tab > .uk-active > a {
		font-size: 1rem;
		padding: 6px 8px;
	}

	/* ---------- 退出确认 / 课程卡号 / 结果卡片 ---------- */
	/* 只限制宽度，位置继续交给 uk-position-center / JS 计算，避免偏移 */
	#activeCard4RegisterCard,
	#exitStudyPanelCard {
		width: calc(100% - 24px) !important;
		max-width: calc(100% - 24px);
	}

	#activeCard4RegisterCard .uk-card,
	#exitStudyPanelCard .uk-card,
	#sentenceShowingCard .uk-card {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}

	#sentenceShowingCard {
		width: calc(100% - 24px);
	}

	/* ---------- 学习页（iframe 内） ---------- */
	.study-panel {
		padding: 0;
		min-height: 100vh;
		min-height: 100dvh;
	}

	.study-panel-section {
		display: flex;
		flex-direction: column;
		width: 100%;
		min-width: 0;
		min-height: 100vh;
		min-height: 100dvh;
		padding: 12px;
		border-radius: 16px;
		box-sizing: border-box;
	}

	.study-panel-section > div:first-child {
		flex: none;
	}

	.study-panel-section > div:nth-child(2),
	.study-panel .main,
	#ltSentenceStudy {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
		min-height: 0;
	}

	#ltSentenceStudy > div:first-child {
		flex: 1 1 auto;
		min-height: 0;
	}

	/* 内容不足一屏时，操作按钮贴在屏幕底部 */
	#ltSentenceStudy .section-control {
		margin-top: auto;
	}

	.study-panel .main {
		padding-bottom: 0;
	}

	.study-panel .info-content {
		width: auto;
		min-width: 96px;
		margin: 0 6px;
		vertical-align: top;
	}

	.study-panel .info-content h2 {
		margin-left: 0;
		font-size: 1.1rem;
	}

	.study-panel .info-divider {
		margin: 0 4px -10px 4px;
	}

	.info-content > * {
		font-size: 0.85rem;
	}

	.study-panel-section .uk-countdown-number {
		font-size: 1.6rem;
	}

	.countdown-info {
		white-space: nowrap;
	}

	.section-title h5 {
		font-size: 0.9rem;
		line-height: 1.5;
	}

	.subtitle {
		float: none;
		margin-right: 6px;
		padding: 4px 8px;
		font-size: 0.95rem;
	}

	.section-form .assemble-pool {
		margin-left: 0;
		padding: 8px;
	}

	/* 单词块改为紧凑 chip，长句时拼装区最高 38vh，超出在池内滚动，保证结果区同时可见 */
	#sentenceAssemblePool {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 6px;
		margin: 0;
		padding: 6px;
		max-height: 38vh;
		max-height: 38dvh;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	#sentenceAssemblePool > li {
		width: auto !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	#sentenceAssemblePool > li > .uk-card {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 40px;
		min-width: 40px;
		padding: 6px 12px;
		font-size: 1rem;
		line-height: 1.2;
		border-radius: 8px;
		box-sizing: border-box;
	}

	.section-form .sort-result {
		width: 100%;
		min-height: 56px;
		font-size: 1.15rem;
		box-sizing: border-box;
	}

	#sentenceSimpleWords {
		min-height: 120px;
		padding: 8px;
		font-size: 1.15rem;
		line-height: 1.9;
	}

	/* 覆盖 HTML 上的内联字号 */
	#sentenceTypeText {
		min-height: 120px !important;
		padding: 8px;
		font-size: 1.15rem !important;
	}

	/* 操作按钮固定在底部，避免软键盘弹出后找不到 */
	.section-control {
		position: sticky;
		bottom: 0;
		z-index: 10;
		display: flex;
		gap: 8px;
		padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
		background: #fff;
	}

	.section-control .uk-button {
		flex: 1;
		margin: 0;
	}

	.section-audio,
	.section-audio .green-audio-player {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}

	/* 文章学习页 */
	.section-article .uk-flex-first {
		margin-left: 0;
		margin-right: 0;
	}

	.lt-article-assemble-item {
		padding: 10px 12px;
		line-height: 1.6;
		font-size: 0.95rem;
	}

	.article-review {
		padding: 12px;
	}

	.article-review .review-content {
		height: 100px;
	}

	.lt-move-controls {
		display: flex;
	}

	.lt-move-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		min-width: 76px;
		padding: 0 12px;
		margin: 0;
		border: 1px solid #eb6e00;
		border-radius: 8px;
		background: #fff;
		color: #eb6e00;
		font-size: 0.9rem;
		line-height: 1.2;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}

	.lt-move-btn:active {
		background: #fff2e5;
	}

	/* 文章排序 / 听写底部按钮固定，避免长列表里找不到 */
	#articleAssembleZone > .uk-margin:last-child,
	#articleTypeZone > .uk-margin:last-child {
		position: sticky;
		bottom: 0;
		z-index: 10;
		margin-bottom: 0;
		padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
		background: #fff;
	}

	/* ---------- 登录页 ---------- */
	.uk-navbar-container .uk-section {
		padding: 20px 0 0;
	}

	.login-form {
		width: 100%;
		min-width: 0;
		padding: 40px 16px 0;
		box-sizing: border-box;
		border-top-left-radius: 24px;
		border-top-right-radius: 24px;
		border-bottom-left-radius: 16px;
		border-bottom-right-radius: 16px;
	}

	.login-form .uk-input,
	.login-form .uk-form-width-large {
		width: 100% !important;
		margin-left: 0;
		box-sizing: border-box;
	}

	/* 移动端隐藏用户名/密码前的装饰图标，输入框占满整行 */
	.login-form .uk-margin > svg.icon {
		display: none;
	}

	.site-logo img {
		width: 160px;
		max-width: 70%;
	}

	.site-title .uk-heading {
		margin-top: 4px;
		font-size: 1.8rem;
	}

	.bg-bottom {
		height: 100px;
	}

	.form-control button {
		margin-right: 6px;
	}

	.bg-decoration {
		height: 160px;
	}

	.tm-footer {
		height: auto;
		margin-top: 0;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tm-footer .uk-container {
		margin-top: 8px;
		padding-bottom: 8px;
	}
}

/* ---------- 手机横屏（学习页优先：左右两栏） ---------- */
@media (orientation: landscape) and (max-height: 500px) {
	html,
	body {
		height: auto;
		min-height: 100%;
		min-height: 100dvh;
	}

	.study-panel {
		padding: 0;
		min-height: 100vh;
		min-height: 100dvh;
	}

	.study-panel-section {
		display: flex;
		align-items: flex-start;
		gap: 10px;
		width: 100%;
		min-width: 0;
		min-height: 100vh;
		min-height: 100dvh;
		padding: 6px 10px calc(6px + env(safe-area-inset-bottom));
		border-radius: 0;
		box-sizing: border-box;
		text-align: left;
	}

	/* 左：计时 / 统计，右：学习内容 */
	.study-panel-section > div:first-child {
		flex: 0 0 120px;
		margin: 0;
	}

	.study-panel-section > div:nth-child(2) {
		flex: 1 1 auto;
		min-width: 0;
	}

	.study-panel .uk-margin,
	.study-panel .uk-margin-top,
	.study-panel .uk-margin-bottom {
		margin-top: 4px;
		margin-bottom: 4px;
	}

	.study-panel .main {
		padding-bottom: 0;
	}

	.study-panel .info-content {
		width: auto;
		min-width: 96px;
		margin: 0 4px;
	}

	.study-panel .info-content h2 {
		margin-bottom: 0;
		font-size: 1rem;
	}

	.study-panel .info-divider {
		height: 48px;
		margin: 0 2px;
	}

	.section-title {
		margin-bottom: 2px;
	}

	.section-title h5 {
		font-size: 0.8rem;
	}

	.subtitle {
		float: none;
		margin-right: 4px;
		padding: 0 4px;
		font-size: 0.85rem;
	}

	.section-audio,
	.section-audio .green-audio-player {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}

	.section-form .assemble-pool {
		margin-left: 0;
		padding: 6px;
	}

	#sentenceAssemblePool {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 6px;
		margin: 0;
		padding: 0;
		max-height: 40vh;
		max-height: 40dvh;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	#sentenceAssemblePool > li {
		width: auto !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	#sentenceAssemblePool > li > .uk-card {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 36px;
		min-width: 36px;
		padding: 4px 10px;
		font-size: 0.9rem;
		line-height: 1.2;
		border-radius: 8px;
		box-sizing: border-box;
	}

	.section-form .sort-result {
		width: 100%;
		min-height: 44px;
		font-size: 1rem;
		box-sizing: border-box;
	}

	#sentenceSimpleWords {
		min-height: 96px;
		padding: 6px;
		font-size: 1.05rem;
		line-height: 1.7;
	}

	#sentenceTypeText {
		min-height: 96px !important;
		padding: 6px;
		font-size: 1.05rem !important;
	}

	.section-control {
		position: sticky;
		bottom: 0;
		z-index: 10;
		display: flex;
		gap: 8px;
		padding: 4px 0 calc(4px + env(safe-area-inset-bottom));
		background: #fff;
	}

	.section-control .uk-button {
		flex: 1;
		min-height: 40px;
		margin: 0;
	}

	.lt-article-assemble-item {
		padding: 8px 10px;
		line-height: 1.5;
		font-size: 0.9rem;
	}

	.article-review {
		padding: 8px;
	}

	.lt-move-controls {
		display: flex;
		margin-top: 6px;
	}

	.lt-move-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 40px;
		min-width: 72px;
		padding: 0 10px;
		margin: 0;
		border: 1px solid #eb6e00;
		border-radius: 8px;
		background: #fff;
		color: #eb6e00;
		font-size: 0.85rem;
		cursor: pointer;
	}

	#articleAssembleZone > .uk-margin:last-child,
	#articleTypeZone > .uk-margin:last-child {
		position: sticky;
		bottom: 0;
		z-index: 10;
		margin-bottom: 0;
		padding: 4px 0 calc(4px + env(safe-area-inset-bottom));
		background: #fff;
	}
}

/* ---------- 移动端隐藏滚动条（保留触摸滚动能力） ---------- */
@media (max-width: 639px), (orientation: landscape) and (max-height: 500px) {
	html,
	body,
	.uk-modal-dialog,
	.uk-modal-page,
	#courseUnitList,
	#registeredCourseList,
	#outdatedCourseList,
	#sentenceTypeText,
	#sentenceSimpleWords,
	#sentenceAssemblePool,
	#sentenceAssembleResult,
	#articleTypeText,
	#articleAssemblePool,
	#articleOverview,
	#articleTypeShowingZone,
	.review-content,
	#sentenceShowingCard {
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	html::-webkit-scrollbar,
	body::-webkit-scrollbar,
	.uk-modal-dialog::-webkit-scrollbar,
	.uk-modal-page::-webkit-scrollbar,
	#courseUnitList::-webkit-scrollbar,
	#registeredCourseList::-webkit-scrollbar,
	#outdatedCourseList::-webkit-scrollbar,
	#sentenceTypeText::-webkit-scrollbar,
	#sentenceSimpleWords::-webkit-scrollbar,
	#sentenceAssemblePool::-webkit-scrollbar,
	#sentenceAssembleResult::-webkit-scrollbar,
	#articleTypeText::-webkit-scrollbar,
	#articleAssemblePool::-webkit-scrollbar,
	#articleOverview::-webkit-scrollbar,
	#articleTypeShowingZone::-webkit-scrollbar,
	.review-content::-webkit-scrollbar,
	#sentenceShowingCard::-webkit-scrollbar {
		width: 0;
		height: 0;
		display: none;
	}
}

/* ---------- 学习页顶部信息区：移动端压缩 ---------- */
@media (max-width: 639px), (orientation: landscape) and (max-height: 500px) {
	/* 移动端空间有限，不展示书名切换与“请听录音”文案 */
	#headerinfo,
	#bookNameToggle,
	#audioServer {
		display: none !important;
	}

	/* UIkit 竖向分隔线默认 100px 高，移动端压缩高度 */
	.study-panel .info-divider {
		height: 50px;
		margin: 0 2px;
	}

	/* uk-visible@s 在手机上会隐藏分/秒标签，这里恢复显示 */
	.countdown-info .uk-countdown-label {
		display: inline-block !important;
		margin: 0 2px;
		font-size: 0.7rem;
		line-height: 1.2;
	}

	/* 金币区：图标缩小，数字恢复显示（uk-navbar-subtitle 在手机上被隐藏） */
	.nav-circle {
		display: inline-flex;
		align-items: center;
		gap: 2px;
		height: 32px;
		padding: 2px 6px 2px 2px;
		border-radius: 32px;
		box-sizing: border-box;
	}

	#btnFreshCoin {
		float: none;
		flex: none;
		width: 24px;
		height: 24px;
	}

	#coinNbr {
		display: block;
		width: auto !important;
		min-width: 34px;
		padding: 0 2px !important;
		color: #ee6b01;
		font-size: 12px;
		line-height: 1;
		text-align: center;
	}

	/* 排列结果区与拼装池间距压缩，保证两块同屏可见 */
	#sentenceAssembleZone .uk-margin {
		margin: 8px 0 0;
	}

	#sentenceAssembleZone h4.subtitle {
		margin: 0 0 6px;
	}

	#sentenceAssembleZone hr {
		margin: 8px 0 0;
	}

	/* 学习弹窗关闭按钮：默认 60px（20px padding + 图标），移动端缩小为 40px */
	.modal-study .uk-modal-close-full {
		width: 40px;
		height: 40px;
		padding: 10px;
		box-sizing: border-box;
		top: calc(8px + env(safe-area-inset-top));
		right: calc(8px + env(safe-area-inset-right));
	}
}

/* ---------- 平板 / 粗指针设备：只做触控增强 ---------- */
@media (pointer: coarse) {
	.uk-button,
	.uk-navbar-nav > li > a,
	.sentence-simple-blank {
		min-height: 44px;
	}

	/* 触屏（含平板）也可用上移/下移替代拖拽 */
	.lt-move-controls {
		display: flex;
	}

	.lt-move-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		min-width: 76px;
		padding: 0 12px;
		margin: 0;
		border: 1px solid #eb6e00;
		border-radius: 8px;
		background: #fff;
		color: #eb6e00;
		font-size: 0.9rem;
		cursor: pointer;
	}

	a,
	button,
	.uk-card {
		touch-action: manipulation;
	}

	.uk-card:hover {
		box-shadow: none;
	}

	.uk-card:active {
		box-shadow: 0 5px 15px rgba(236, 105, 0, 0.5);
	}
}