/* ============================================================
   收拾混音助手 - 移动端 / 平板响应式适配（v3）
   中英文两个页面共用。仅用媒体查询覆盖，不影响桌面端。
   关键修复：① 让页面可纵向滚动（根治"下半段显示不出来"）
            ② App 化卡片 UI、加大触摸目标、隐藏桌面专属控件
   ============================================================ */

/* 全局（非媒体查询）：装饰性 LOGO 图不参与布局。
   中文版原用绝对定位把它移出屏外（offscreen），英文版精简样式时漏了该规则，
   导致 LOGO 以原始尺寸留在文档流顶部、把内容整体下推。统一隐藏，两页一致。 */
.slideshow>img.icon {
	display: none !important;
}

/* 全局（非媒体查询）：让页面可纵向滚动——桌面端测速后结果卡片变高时，
   底部四个导航不会被 100vh+overflow:hidden 裁掉/消失，可滚动到达。
   雨滴 canvas 固定为视口背景层（fixed + 100dvh），内容滚动其上，避免分层。 */
html,
body {
	height: auto !important;
	min-height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	background-color: #5e6f7b;
}

.slideshow {
	height: auto !important;
	min-height: 100vh;
	overflow: visible !important;
	background-color: #5e6f7b;
}

.slide {
	position: relative !important;
	height: auto !important;
	min-height: 100vh;
	pointer-events: auto !important;
}

#container {
	pointer-events: none !important;
	position: fixed !important;
	top: 0;
	left: 0;
	width: 100vw !important;
	height: 100vh !important;
	height: 100dvh !important;
}

.codrops-header {
	display: none !important;
}

/* ---------- 平板及以下 (<=768px) ---------- */
@media (max-width: 768px) {

	/* ===== ① 滚动修复：解除 100vh + overflow:hidden 的内容裁剪 ===== */
	html,
	body {
		height: auto !important;
		min-height: 100%;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	.slideshow {
		height: auto !important;
		min-height: 100vh;
		overflow: visible !important;
	}

	/* slide 由绝对定位改为正常文档流，内容自然撑开并可滚动 */
	.slide {
		position: relative !important;
		height: auto !important;
		min-height: 100vh;
		padding: 64px 8px 36px !important;
		box-sizing: border-box;
		pointer-events: auto !important;
	}

	/* 雨滴 canvas 固定为视口背景层：内容滚动时它不动，避免"画面分裂/错位"；且不拦截触摸。
	   关键：CSS 高度用 100dvh（动态视口高度），保证地址栏收起、视口变高时仍铺满，
	   不会在底部露出"城市背景在滚动"的分层带。 */
	#container {
		pointer-events: none !important;
		position: fixed !important;
		top: 0;
		left: 0;
		width: 100vw !important;
		height: 100vh !important;
		height: 100dvh !important;
	}

	/* 兜底背景色：即使极端情况下有缝隙也不会露出灰色 body 背景 */
	html,
	body,
	.slideshow {
		background-color: #5e6f7b !important;
	}

	/* 空的演示头部在移动端不占位 */
	.codrops-header {
		display: none !important;
	}

	/* ===== ② App 化 UI ===== */

	/* 大圆形点击测速按钮（emoji），触摸目标够大、有按压反馈 */
	#icon {
		font-size: 54px !important;
		width: 132px;
		height: 132px;
		margin: 6px auto 4px !important;
		display: flex !important;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: radial-gradient(circle at 50% 38%, rgba(255, 255, 255, .28), rgba(12, 35, 66, .32));
		border: 2px solid rgba(255, 255, 255, .4);
		box-shadow: 0 8px 24px rgba(0, 0, 0, .25), inset 0 1px 6px rgba(255, 255, 255, .35);
		transition: transform .12s ease, box-shadow .2s ease;
	}

	#icon:active {
		transform: scale(.93);
		box-shadow: 0 4px 14px rgba(0, 0, 0, .3), inset 0 1px 6px rgba(255, 255, 255, .35);
	}

	/* BPM 显示做成一张清晰的卡片 */
	#bpmDisplay {
		font-size: 30px !important;
		margin: 6px auto 2px !important;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		gap: 2px;
		padding: 8px 18px;
		background: linear-gradient(120deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .06) 45%, rgba(255, 255, 255, .14));
		border: 1px solid rgba(255, 255, 255, .5);
		border-radius: 18px;
		backdrop-filter: blur(8px) saturate(125%);
		-webkit-backdrop-filter: blur(8px) saturate(125%);
		box-shadow: 0 8px 22px rgba(13, 20, 79, .16), inset 0 1px 1px rgba(255, 255, 255, .7);
	}

	#inputNumber {
		max-width: 88px !important;
		font-size: 30px !important;
	}

	#audioBtn {
		font-size: 26px !important;
		margin-right: 6px !important;
	}

	/* 移动端操作行：引导文案 + 清空按钮 */
	#mobileControls.mobile-only {
		display: flex !important;
		flex-direction: column;
		align-items: center;
		gap: 12px;
		margin: 10px auto 18px;
	}

	#mobileControls .mtip {
		margin: 0;
		font-size: 14.5px;
		color: #fff;
		letter-spacing: .5px;
		text-shadow: 0 0 8px rgba(0, 0, 0, .35);
		opacity: .92;
	}

	/* 桌面专属控件在移动端隐藏：ESC 提示行、BPM 下跟练提示、摇杆（移动端用 App 卡片 + 引导文案）*/
	#hint.hintTip,
	#tapTip,
	.switch-container {
		display: none !important;
	}

	/* 语言切换钮移动端稍微收一点 */
	#langSwitch {
		top: 12px !important;
		right: 12px !important;
	}

	/* ===== 四个结果面板：竖向全宽卡片 ===== */
	.calculateContainer {
		width: 100%;
	}

	.calculateDetailList {
		flex-direction: column;
		align-items: center;
	}

	.calculateDetailList>div {
		width: 92vw;
		max-width: 420px;
	}

	/* 标题层：item 本身透明（标题就落在白框上方），白框交给内容区 */
	.calculateDetailItem {
		width: 92vw;
		max-width: 440px;
		margin: 0 auto 18px !important;
		padding: 0 2px 2px !important;
		font-size: 18px !important;
		box-sizing: border-box;
		background: transparent !important;
		box-shadow: none !important;
		overflow: visible !important;
	}

	.calculateDetailItem::after {
		display: none !important;
		/* 透明卡片下取消斜向扫光 */
	}

	/* 结果内容自带白色磨砂框（标题在它上方）；空时配合 :empty 折叠隐藏 */
	.calculateDetailContent {
		font-size: 15px;
		line-height: 30px;
		letter-spacing: -0.9px;
		/* 收紧虚线，让放大后的字尽量单行 */
		width: 100%;
		/* 窗户玻璃质感（与桌面统一）：低透明度斜向高光 + 适度模糊 + 明亮玻璃边 */
		background: linear-gradient(120deg, rgba(255, 255, 255, .24), rgba(255, 255, 255, .06) 42%, rgba(255, 255, 255, .14));
		border: 1px solid rgba(255, 255, 255, .5);
		border-radius: 16px;
		padding: 13px 16px;
		margin-top: 8px;
		backdrop-filter: blur(8px) saturate(125%);
		-webkit-backdrop-filter: blur(8px) saturate(125%);
		box-shadow: 0 8px 24px rgba(13, 20, 79, .14), inset 0 1px 1px rgba(255, 255, 255, .7);
	}

	/* 透明卡片上的标题改白字+阴影，保证在雨景上清晰 */
	.calculateDetailItem>div>div:first-child {
		color: #fff;
		text-shadow: 0 1px 6px rgba(0, 0, 0, .45);
		margin-bottom: 4px !important;
		padding-left: 2px;
	}

	/* 压缩面板里那块 50px 大留白收紧 */
	.calculateDetailItem div[style*="margin-top: 50px"] {
		margin-top: 16px !important;
	}

	/* ===== 底部导航：做成 App 风格的圆角条 ===== */
	.buttonExpressIconContainer {
		margin-top: 6px;
	}

	.buttonExpressIconContainer ul {
		height: 84px !important;
		gap: 8px;
	}

	.buttonExpressIconContainer li {
		width: 54px !important;
		height: 54px !important;
	}
}

/* ---------- 手机 (<=480px) ---------- */
@media (max-width: 480px) {
	#icon {
		font-size: 48px !important;
		width: 116px;
		height: 116px;
	}

	#bpmDisplay {
		font-size: 27px !important;
	}

	#inputNumber {
		max-width: 78px !important;
		font-size: 27px !important;
	}

	.calculateDetailItem {
		width: 92vw;
		font-size: 16.5px !important;
		padding: 14px 16px !important;
	}

	.calculateDetailList>div {
		width: 92vw;
	}

	.calculateDetailContent {
		font-size: 14px;
		line-height: 28px;
	}

	.buttonExpressIconContainer li {
		width: 50px !important;
		height: 50px !important;
	}
}

/* ---------- 超窄屏 (<=360px) ---------- */
@media (max-width: 360px) {
	#bpmDisplay {
		font-size: 24px !important;
	}

	#icon {
		font-size: 44px !important;
		width: 104px;
		height: 104px;
	}

	.calculateDetailItem {
		font-size: 15.5px !important;
	}
}

/* 荧光导航图标：加投影增强对比（默认状态在亮背景上也看得清；hover 时 demo.css 的发光更明显）*/
.buttonExpressIconContainer li a i {
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .55));
}

/* ---------- 桌面 (>=769px)：导航固定为顶部右侧的横向一排，加深色磨砂底栏让图标凸显 ---------- */
@media (min-width: 769px) {
	.buttonExpressIconContainer {
		position: fixed !important;
		top: 40px;
		right: 48px;
		left: auto !important;
		bottom: auto !important;
		min-height: 0 !important;
		margin: 0 !important;
		z-index: 60;
		/* 磨砂玻璃底栏：彩色图标在上面更清晰 */
		padding: 8px 20px;
		background: rgba(10, 24, 46, 0.46);
		border: 1px solid rgba(255, 255, 255, 0.28);
		border-radius: 44px;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
		backdrop-filter: blur(9px) saturate(135%);
		-webkit-backdrop-filter: blur(9px) saturate(135%);
	}

	.buttonExpressIconContainer ul {
		position: static !important;
		display: flex !important;
		flex-direction: row !important;
		align-items: center;
		gap: 30px !important;
		width: auto !important;
		height: auto !important;
	}

	.buttonExpressIconContainer li {
		position: relative !important;
		margin: 0 !important;
	}

	/* 底栏内图标稍微提亮，确保清晰 */
	.buttonExpressIconContainer li a i {
		filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .5)) brightness(1.08);
	}
}