/* 窄屏重排
 * ---------
 * 原版是写死的 920px 版式（左 200px 通知栏 + 700px 面板），各模块用绝对定位分栏。
 * 这里做两件事：
 *   1. 面板尺寸交给 CSS 变量 --panel-w / --panel-h（由 engine.js 写入），CSS 与 JS 同一个真源；
 *   2. <=900px 时把各模块的分栏绝对定位改成纵向单列。
 * 900px 以上的表现与原版逐像素一致。
 */

/* 面板宽高不再写死，宽屏下变量就是 700px */
div#outerSlider > div {
	width: var(--panel-w, 700px);
	height: var(--panel-h, 700px);
}

div.location {
	width: var(--panel-w, 700px);
}

div#content {
	height: var(--panel-h, 700px);
}

#spacePanel {
	top: calc(-1 * var(--panel-h, 700px));
}

/* 宽屏下 storesDock 不参与布局 */
#storesDock {
	display: none;
}

@media (max-width: 900px) {

	html {
		-webkit-text-size-adjust: 100%;
	}

	body {
		height: auto;
		min-height: 100%;
		background-color: #fff;   /* 给固定菜单一个可继承的底色；dark.css 后加载会覆盖成暗色 */
	}

	/* ---- 外框：去掉左侧 220px 通知栏留白，改成纵向三段 ---- */
	div#wrapper {
		width: auto;
		max-width: 700px;
		padding: 12px 12px 24px 12px;
		display: flex;
		flex-direction: column;
	}

	div#content   { order: 1; flex: none; }
	div#notifications { order: 2; flex: none; }
	#storesDock   { order: 3; flex: none; }

	/* 游戏区高度由 engine.js 按当前面板内容算出（--panel-h），
	 * 内容长了整页滚动即可，不做面板内嵌滚动——嵌套滚动在手机上很难用。 */
	div#outerSlider > div {
		overflow: hidden;
	}

	/* 让位置滑块参与文档流，面板高度才能被正确计算出来供滚动 */
	div#locationSlider {
		position: relative;
		overflow: hidden;
	}

	/* 太空关是全屏小游戏，不要让它自己滚 */
	#spacePanel {
		overflow: hidden;
	}

	/* ---- 通知栏：从左栏改到游戏区下方 ---- */
	div#notifications {
		position: relative;
		top: auto;
		left: auto;
		width: auto;
		height: 140px;
		margin-top: 12px;
	}

	/* ---- 资源面板：engine.js 把它搬进 #storesDock，这里让它铺满 ---- */
	#storesDock {
		display: block;
		margin-top: 12px;
	}

	#storesDock #storesContainer {
		position: static;
		width: auto;
	}

	#storesDock #stores,
	#storesDock #weapons {
		width: auto;
		opacity: 1 !important;
	}

	/* ---- 房间：三列建造/打造/购买改为纵向三组，组内按钮自适应换行 ----
	 * 原版每组是一列 100px 定宽按钮；窄屏下若还一个一行，一屏放不下几个。
	 * 用 auto-fill 网格：366px 宽正好三列，320px 也是三列，屏幕再宽就自动多放。 */
	div#buildBtns,
	div#craftBtns,
	div#buyBtns,
	div#fabricateButtons {
		position: relative;
		top: auto;
		left: auto;
		margin-top: 24px;
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
		gap: 8px;
		align-items: start;
	}

	div#buildBtns {
		margin-top: 12px;
	}

	/* 组标题（data-legend 生成的 ::before）要独占一行，否则会占掉一个按钮格 */
	div#buildBtns:before,
	div#craftBtns:before,
	div#buyBtns:before,
	div#fabricateButtons::before {
		grid-column: 1 / -1;
		top: 0;
	}

	div#buildBtns > .button,
	div#craftBtns > .button,
	div#buyBtns > .button,
	div#fabricateButtons > .button {
		/* !important 是必要的：Button.js 用 el.css('width','80px') 写了内联样式，
		 * 普通规则盖不住。窄屏要让按钮填满网格列，宽度必须交回给布局。 */
		width: auto !important;
		margin: 0;
		/* 必须 border-box：默认 content-box 下 padding+border 会把边框盒撑出网格列，
		 * 表现为 smokehouse / steelworks 这类长词冲出边框 */
		box-sizing: border-box;
		padding: 8px 6px;
	}

	/* 松散摆放的按钮（外面、飞船等）：行内块，自然换行 */
	div.button {
		display: inline-block;
		vertical-align: top;
		margin-right: 8px;
	}

	/* ---- 花费常驻显示在按钮内 ----
	 * 原版把花费做成 hover 浮层。手机上这条路是断的：
	 *   ① 触屏没有 hover，点一下就直接执行了，根本看不到花费；
	 *   ② 浮层是绝对定位，而 #content / #main / #locationSlider 都是 overflow:hidden，
	 *      探出容器的部分会被裁掉。
	 * 所以窄屏不用浮层，把花费摊在按钮里常驻显示：不需要交互，也没有裁切问题。
	 * 只作用于按钮内的花费；库存/工人/特长那些说明性 tooltip 不动，否则满屏都是字。 */
	div.button > div.tooltip {
		display: block !important;
		position: static;
		width: auto !important;
		margin-top: 6px;
		padding: 5px 0 0 0;
		border: none;
		border-top: 1px solid #ddd;
		box-shadow: none;
		background: transparent;
		overflow: hidden;          /* 包住内部的左右浮动 */
		font-size: 13px;
		color: #666;
		text-align: left;
	}

	div.button.disabled > div.tooltip {
		border-top-color: #ddd;
		color: #b2b2b2;
	}

	/* 同一行的按钮等高，花费行数不同也不会参差 */
	div#buildBtns,
	div#craftBtns,
	div#buyBtns,
	div#fabricateButtons {
		align-items: stretch;
	}

	/* ---- 村庄：人口栏与工人栏改上下 ---- */
	div#village {
		position: relative;
		top: auto;
		right: auto;
		width: auto;
		margin-top: 12px;
	}

	div#workers {
		position: relative;
		top: auto;
		left: auto;
		width: auto;
		margin-top: 24px;
	}

	/* ---- 漫途：装备/特长/滚动区 ---- */
	#outfitting,
	div#perks {
		position: relative;
		top: auto;
		right: auto;
		width: auto;
	}

	div#perks {
		margin-top: 20px;
	}

	#pathScroller {
		width: auto;
		max-height: none;
		overflow-y: visible;
	}

	/* 加减号原本一对在框内、一对故意伸到框外 15px（桌面靠 outfitRow 的负 margin 让位）。
	 * 窄屏框已铺满，伸出去的那对会被裁掉，全部收回框内。 */
	div.outfitRow {
		margin-right: 0;
	}

	div.outfitRow > .row_val {
		padding-right: 46px;
	}

	.outfitRow .upBtn, .outfitRow .dnBtn {
		right: 22px;
	}

	.outfitRow .upManyBtn, .outfitRow .dnManyBtn {
		right: 0;
	}

	/* ---- 制造机：蓝图栏 ---- */
	div#blueprints {
		position: relative;
		top: auto;
		right: auto;
		width: auto;
		margin-top: 20px;
	}

	/* ---- 世界地图：61 列等宽字符，缩字号让它塞进屏幕 ---- */
	#worldOuter {
		display: block;
		overflow-x: auto;
	}

	#map {
		font-size: 10px;
		line-height: 8px;
		letter-spacing: 0;
	}

	/* 背包/血量三个角标原本按 700px 宽排，窄屏会挤到一起；
	 * 而且世界地图这一屏没有地点标签行，右上角是空的，会和 settings. 撞上，
	 * 所以整体往左让出 76px（settings. 实测 70px 宽）。 */
	#backpackTitle, #backpackSpace, #healthCounter {
		font-size: 13px;
	}

	#backpackSpace {
		right: 76px;
	}

	#healthCounter {
		left: auto;
		right: 152px;
	}

	/* ---- 底部菜单：横排会溢出，改成靠右换行 ---- */
	/* ---- 触屏友好：按钮加大、去掉 hover 依赖 ---- */
	div.button {
		padding: 8px 10px;
		margin-bottom: 8px;
	}

	div.headerButton {
		font-size: 16px;
		padding-bottom: 4px;
	}

	/* ---- 事件弹窗：原版是 left:250px/width:335px 的桌面绝对定位，遮罩写死 920x700 ---- */
	.eventPanel {
		left: 8px;
		right: 8px;
		top: 40px;
		width: auto;
		padding: 16px;
	}

	/* 遮罩改成 fixed 铺满视口：用 vw/vh 放大会把文档撑出横向滚动条 */
	.eventPanel:before {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		width: auto;
		height: auto;
	}

	.eventPanel .button {
		float: none;
		margin-right: 0;
	}

	#description textarea {
		height: 160px;
	}

	/* ---- 设置入口：与顶部标签行同一条基线，标签在左侧自然换行绕过它 ---- */
	#settingsBtn {
		top: 12px;
	}

	/* 给 settings. 留出位置，地点标签多的时候不会钻到它下面 */
	div#header {
		padding-right: 76px;
		height: auto;
		min-height: 20px;
	}

	/* ---- 结局页 ---- */
	.outroContainer {
		width: auto;
		padding: 10% 16px 0;
	}

	#theEnd {
		margin-left: 0;
		font-size: 20px;
	}

	.endGame {
		font-size: 32px;
	}

	.endGameOption {
		font-size: 24px;
	}
}