/*
 * 移动端适配底座
 *
 * 现状：global.css 里只有针对 .tutorial-wrap 的两处 800px / 500px 断点，
 * 全站没有移动端布局。落地页与大厅卡片各自带了一段自己的断点，但
 * 导航、表单、弹窗这些跨页面元素没有。
 *
 * 本文件只做「不破坏桌面版」的三件事，全部限定在 max-width 断点内：
 *   1. 触控目标不小于 44px（iOS HIG / WCAG 2.5.5）
 *   2. 表单字号不小于 16px（iOS Safari 聚焦输入框时会按字号自动缩放
 *      页面，字号小于 16px 会让用户被"放大后找不到输入框"）
 *   3. 窄屏下导航换行而不挤压、加入区选项竖排、兜底横向溢出
 *
 * 不改配色、不改布局结构、不引入新框架。
 *
 * 设计稿里另外两项在当前实现下没有对应物，因此未做：
 *   - 「弹窗改底部抽屉」：webDiplomacy 没有浮层弹窗，加入对局是页面
 *     内嵌表单（gamepanel/game.php:376 links() → enterBar → joinBar）。
 *   - 「底部 tab bar」：.nav-wrap 是顶部导航条，站内没有移动端 App 壳。
 *     等真要做底部导航时，需要先决定移动端的信息架构。
 *
 * 全部规则在 max-width 断点内，桌面端完全不受影响。
 */

/* ---------- 触控目标 ---------- */
@media only screen and (max-width: 800px) {
	input[type="submit"],
	button[type="submit"],
	button:not([type]),
	.form-submit{
		min-height: 44px;
	}

	/* 表格里的表单控件容易被压得极窄，给一个下限 */
	td input[type="submit"],
	td button{
		min-height: 40px;
		white-space: normal;
		line-height: 1.3;
	}
}

/* ---------- 字号 ---------- */
@media only screen and (max-width: 620px) {
	body{
		/* 不改 body 字号（会放大所有继承文字，影响面太大），
		   改为对表单与正文容器分别设定 */
		-webkit-text-size-adjust: 100%;
	}

	input[type="text"],
	input[type="password"],
	input[type="email"],
	input[type="number"],
	textarea,
	select{
		font-size: 16px !important;
		min-height: 44px;
		box-sizing: border-box;
	}
}

/* ---------- 导航 ---------- */
@media only screen and (max-width: 800px) {
	/*
	 * .nav-wrap 是 flex + space-around + wrap。原本在窄屏下会因
	 * space-around 压缩间距而挤成两行、字被压断。这里改为固定
	 * 间距并允许换行，同时禁止单个 tab 被压窄。
	 */
	.nav-wrap{
		justify-content: flex-start;
		gap: 4px;
		padding: 4px 6px;
	}
	.nav-tab{
		flex: 0 0 auto;
		white-space: nowrap;
	}
	.nav-tab a{
		white-space: nowrap;
		display: inline-block;
		line-height: 44px;
	}
}

/* ---------- 版心 ---------- */
@media only screen and (max-width: 620px) {
	div.content{
		padding: 12px 12px;
		margin-left: 6px;
		margin-right: 6px;
		width: auto;
	}
	.footerMax{
		padding: 0 10px;
	}
}

/* ---------- 表格（大厅席位表、对照表） ---------- */
@media only screen and (max-width: 620px) {
	/*
	 * 不加 overflow-x:auto —— 页面已经存在 .gamesList 的负边距脱框，
	 * 再套横向滚动会出现双层滚动条。改为允许单元格换行。
	 */
	table{
		max-width: 100%;
	}
	td, th{
		word-break: break-word;
	}
}

/* ---------- 加入区（替代原「弹窗改抽屉」一节） ---------- */
@media only screen and (max-width: 620px) {
	/*
	 * webDiplomacy 没有浮层弹窗：加入对局是页面内嵌的表单
	 * （gamepanel/game.php 的 links() → enterBar → joinBar/openBar），
	 * 所以窄屏下不存在需要改成抽屉的东西，原设计稿里「弹窗改底部
	 * 抽屉」这一项在当前实现下无对应物，留待真正引入浮层时再做。
	 *
	 * 这里只保证表单本身在窄屏可读：选项不再横向挤成一行。
	 */
	.enterBarJoin,
	.enterBarOpen{
		display: block;
		margin: 0 0 8px;
	}
	.enterBar{
		text-align: left;
	}
	.enterBar select,
	.enterBar input{
		width: 100%;
		box-sizing: border-box;
	}
}

/* ---------- 横向溢出兜底 ---------- */
@media only screen and (max-width: 620px) {
	/*
	 * 兜底而非修复：任何元素撑破视口都会让整页横向滚动，而横向
	 * 滚动在手机上极易误触。这里只拦最常见的元凶，图片另作约束。
	 */
	pre, code{
		white-space: pre-wrap;
		word-break: break-word;
	}
	img, svg, canvas{
		max-width: 100%;
		height: auto;
	}
}