/* 手机 / 窄屏：整页分成 标签 + 主区 + 日志 + 底栏，互不遮挡 */

html.adr-compact,
html.adr-compact body {
	height: 100%;
	height: 100dvh;
	overflow: hidden;
	touch-action: manipulation;
}

html.adr-compact body {
	display: flex;
	flex-direction: column;
	margin: 0;
}

html.adr-compact #wrapper {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html.adr-compact #content {
	flex: 1 1 auto;
	position: relative;
	width: 100% !important;
	height: auto !important;
	min-height: 0;
	max-width: 100%;
	overflow: hidden;
	box-sizing: border-box;
}

html.adr-compact #outerSlider {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
}

html.adr-compact #outerSlider > div {
	box-sizing: border-box;
}

html.adr-compact #main {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	max-width: 100%;
	box-sizing: border-box;
}

html.adr-compact #header {
	flex: 0 0 auto;
	height: auto;
	min-height: 0;
	padding: 6px 8px;
	display: flex;
	gap: 2px;
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
	-webkit-overflow-scrolling: touch;
	border-bottom: 1px solid #000;
	box-sizing: border-box;
}

html.adr-compact .headerButton {
	float: none;
	flex: 0 0 auto;
	font-size: 15px;
	margin: 0;
	padding: 8px 10px;
	border-left: 0;
	border-right: 1px solid #ccc;
}

html.adr-compact .headerButton:last-child {
	border-right: 0;
}

html.adr-compact #locationSlider {
	position: relative !important;
	flex: 1 1 auto;
	min-height: 0;
	left: 0 !important;
	top: auto;
	width: 100% !important;
	overflow: hidden;
}

html.adr-compact #locationSlider > .location {
	float: none;
	position: relative;
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 10px 12px 18px;
	box-sizing: border-box;
}

html.adr-compact #notifications {
	flex: 0 0 auto;
	position: relative;
	top: auto;
	left: auto;
	width: 100%;
	height: auto;
	max-height: 4.6em;
	padding: 6px 12px 8px;
	box-sizing: border-box;
	border-top: 1px solid #ddd;
	font-size: 13px;
	line-height: 1.35;
	overflow: hidden;
}

html.adr-compact #notifyGradient {
	height: 14px;
	top: auto;
	bottom: 0;
	background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
}

html.adr-compact body.noMask #notifyGradient {
	background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
}

html.adr-compact body.noMask #notifications {
	border-top-color: #333;
}

/* 房间 / 野外：纵向堆叠，不再绝对定位三列 */
html.adr-compact #lightButton,
html.adr-compact #stokeButton,
html.adr-compact #gatherButton,
html.adr-compact #trapsButton,
html.adr-compact #embarkButton {
	width: 100% !important;
	max-width: 100%;
	min-height: 44px;
	box-sizing: border-box;
}

html.adr-compact #buildBtns,
html.adr-compact #craftBtns,
html.adr-compact #buyBtns,
html.adr-compact #fabricateButtons {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 8px;
	width: 100%;
	margin: 14px 0 8px;
}

html.adr-compact #buildBtns:before,
html.adr-compact #craftBtns:before,
html.adr-compact #buyBtns:before,
html.adr-compact #fabricateButtons::before {
	display: block;
	width: 100%;
	flex: 0 0 100%;
	top: 0;
	margin-bottom: 2px;
}

html.adr-compact div.button {
	width: calc(50% - 4px) !important;
	min-width: 0 !important;
	min-height: 44px;
	padding: 10px 8px 8px;
	margin: 0;
	box-sizing: border-box;
	font-size: 14px;
}

html.adr-compact #lightButton,
html.adr-compact #stokeButton,
html.adr-compact #gatherButton,
html.adr-compact #trapsButton,
html.adr-compact #embarkButton,
html.adr-compact #liftoffButton,
html.adr-compact #hullButton,
html.adr-compact #engineButton {
	width: 100% !important;
}

@media (hover: none) {
	html.adr-compact div.button div.tooltip {
		display: block;
		position: static;
		width: auto;
		border: 0;
		box-shadow: none;
		padding: 4px 0 0;
		font-size: 11px;
		line-height: 1.3;
		color: #666;
		background: transparent;
	}
	html.adr-compact body.noMask div.button div.tooltip {
		color: #aaa;
		background: transparent;
	}
	html.adr-compact div.button div.tooltip .row_key,
	html.adr-compact div.button div.tooltip .row_val {
		float: none;
		display: inline;
	}
	html.adr-compact div.button div.tooltip .row_val::before {
		content: " ";
	}
	html.adr-compact div.button div.tooltip .row_key + .row_key::before {
		content: " · ";
	}
}

html.adr-compact #storesContainer,
html.adr-compact #village,
html.adr-compact #perks,
html.adr-compact #blueprints,
html.adr-compact #outfitting {
	position: relative !important;
	top: auto !important;
	right: auto !important;
	left: auto !important;
	width: 100%;
	max-width: 100%;
	margin: 12px 0 8px;
	box-sizing: border-box;
}

html.adr-compact #stores,
html.adr-compact #weapons,
html.adr-compact #village,
html.adr-compact #perks,
html.adr-compact #blueprints,
html.adr-compact #outfitting {
	width: 100% !important;
	max-width: 100%;
	box-sizing: border-box;
}

html.adr-compact #workers {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 14px 0 10px;
	padding: 10px 10px 8px;
	border: 1px solid #000;
	box-sizing: border-box;
}

html.adr-compact .workerRow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
	margin: 0;
	padding: 10px 0;
	border-bottom: 1px solid #eee;
}

html.adr-compact .workerRow:last-child {
	border-bottom: 0;
}

html.adr-compact .workerRow > .row_key {
	float: none;
	flex: 1 1 auto;
	font-size: 16px;
	min-width: 0;
}

html.adr-compact .workerRow > .row_val {
	float: none;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
	width: 100%;
	padding: 0;
	position: relative;
}

html.adr-compact .workerRow > .row_val > span {
	min-width: 36px;
	text-align: center;
	font-size: 18px;
	font-weight: 700;
	order: 3;
}

html.adr-compact .workerRow .tooltip {
	display: block;
	position: static;
	width: 100%;
	flex: 0 0 100%;
	border: 0;
	padding: 0;
	background: transparent;
	color: #666;
	font-size: 12px;
	line-height: 1.35;
}

html.adr-compact .workerRow .tooltip .row_key,
html.adr-compact .workerRow .tooltip .row_val {
	float: none;
	display: inline;
}

html.adr-compact .workerRow .tooltip .row_val::before {
	content: " ";
}

html.adr-compact .workerRow .tooltip .storeRow + .storeRow .row_key::before {
	content: " · ";
}

html.adr-compact .upBtn,
html.adr-compact .dnBtn,
html.adr-compact .upManyBtn,
html.adr-compact .dnManyBtn {
	position: static;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 40px;
	border: 1px solid #000;
	background: #fff;
	box-sizing: border-box;
	flex: 0 0 auto;
}

html.adr-compact .dnManyBtn { order: 1; }
html.adr-compact .dnBtn { order: 2; }
html.adr-compact .upBtn { order: 4; }
html.adr-compact .upManyBtn { order: 5; }

html.adr-compact .upBtn:before,
html.adr-compact .upBtn:after,
html.adr-compact .dnBtn:before,
html.adr-compact .dnBtn:after,
html.adr-compact .upManyBtn:before,
html.adr-compact .upManyBtn:after,
html.adr-compact .dnManyBtn:before,
html.adr-compact .dnManyBtn:after {
	content: none;
	display: none;
	border: 0;
}

html.adr-compact .upBtn .step-tip,
html.adr-compact .dnBtn .step-tip,
html.adr-compact .upManyBtn .step-tip,
html.adr-compact .dnManyBtn .step-tip {
	display: block;
	position: static;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
}

html.adr-compact .upBtn.disabled,
html.adr-compact .dnBtn.disabled,
html.adr-compact .upManyBtn.disabled,
html.adr-compact .dnManyBtn.disabled {
	opacity: 0.35;
}

html.adr-compact .outfitRow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 8px 0;
}

html.adr-compact .outfitRow > .row_key {
	float: none;
	flex: 1 1 auto;
}

html.adr-compact .outfitRow > .row_val {
	float: none;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
	width: 100%;
	padding: 0;
}

html.adr-compact .outfitRow > .row_val > span {
	min-width: 36px;
	text-align: center;
	font-size: 18px;
	font-weight: 700;
	order: 3;
}

html.adr-compact body.noMask #workers {
	border-color: #fff;
}

html.adr-compact body.noMask .workerRow {
	border-bottom-color: #333;
}

html.adr-compact body.noMask .workerRow .tooltip {
	color: #aaa;
}

html.adr-compact body.noMask .upBtn,
html.adr-compact body.noMask .dnBtn,
html.adr-compact body.noMask .upManyBtn,
html.adr-compact body.noMask .dnManyBtn {
	border-color: #fff;
	background: #000;
	color: #fff;
}

/* 底栏：单行横滑，不再折成半屏 */
html.adr-compact .menu {
	position: relative;
	left: auto;
	right: auto;
	bottom: auto;
	flex: 0 0 auto;
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: center;
	gap: 0;
	max-height: none;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
	background: #fff;
	border-top: 1px solid #000;
	-webkit-overflow-scrolling: touch;
	z-index: 30;
}

html.adr-compact body.noMask .menu {
	background: #000;
	color: #ccc;
	border-top-color: #fff;
}

html.adr-compact .menu span {
	float: none;
	flex: 0 0 auto;
	margin: 0;
	padding: 8px 12px;
	font-size: 14px;
	white-space: nowrap;
}

html.adr-compact .customSelect {
	height: auto;
	position: relative;
}

html.adr-compact .customSelectOptions {
	width: auto;
}

html.adr-compact .customSelectOptions > ul {
	bottom: 100%;
	right: 0;
	left: auto;
	width: 160px;
	max-height: 0;
	padding: 0;
	background: #fff;
	border: 1px solid #000;
	overflow: auto;
	z-index: 40;
}

html.adr-compact .customSelect.open .customSelectOptions > ul,
html.adr-compact .customSelectOptions:focus-within > ul {
	max-height: 50vh;
	padding: 8px;
}

html.adr-compact body.noMask .customSelectOptions > ul {
	background: #000;
	border-color: #fff;
}

html.adr-compact .logo {
	display: none;
}

/* 事件弹窗：固定在可视区内滚动 */
html.adr-compact .eventPanel {
	position: fixed;
	left: 10px;
	right: 10px;
	top: 10px;
	bottom: auto;
	width: auto !important;
	max-width: none;
	max-height: calc(100dvh - 24px);
	overflow: auto;
	padding: 22px 14px 16px;
	box-sizing: border-box;
	z-index: 80;
}

html.adr-compact .eventPanel:before {
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	transform: none;
	z-index: -1;
}

html.adr-compact .eventPanel .button,
html.adr-compact #buttons > .button {
	float: none;
	display: inline-block;
	width: auto !important;
	min-width: 96px;
	margin: 6px 8px 6px 0;
}

html.adr-compact #description {
	min-height: 90px;
}

html.adr-compact #wanderer {
	left: 18%;
}

html.adr-compact #enemy {
	right: 18%;
}

/* 荒野 / 飞船 */
html.adr-compact #pathScroller {
	width: 100%;
	max-height: none;
	padding: 0;
	top: 0;
	box-sizing: border-box;
}

html.adr-compact #worldPanel {
	overflow: auto !important;
	box-sizing: border-box;
	padding: 8px 8px 132px;
}

html.adr-compact #map {
	font-size: 8px;
	line-height: 8px;
	letter-spacing: 0;
}

html.adr-compact #bagspace-world {
	max-width: 100%;
	box-sizing: border-box;
	height: auto;
	min-height: 62px;
}

html.adr-compact #spacePanel {
	overflow: hidden;
}

html.adr-compact .outroContainer {
	width: auto;
	max-width: 100%;
	padding: 24px 16px;
	box-sizing: border-box;
}

html.adr-compact .endGame {
	font-size: 24px;
}

html.adr-compact .endGameOption {
	font-size: 18px;
}

html.adr-compact #adr-pad {
	display: none;
	right: 8px;
	bottom: calc(56px + env(safe-area-inset-bottom, 0px));
	grid-template-columns: 46px 46px 46px;
	grid-template-rows: 46px 46px 46px;
	gap: 3px;
}

html.adr-scaled,
html.adr-scaled body {
	overflow: hidden;
	height: 100%;
}

#adr-pad {
	display: none;
	position: fixed;
	right: 10px;
	bottom: calc(56px + env(safe-area-inset-bottom, 0px));
	z-index: 45;
	grid-template-columns: 52px 52px 52px;
	grid-template-rows: 52px 52px 52px;
	gap: 4px;
	touch-action: none;
}

#adr-pad button {
	border: 1px solid #000;
	background: rgba(255, 255, 255, 0.88);
	font-size: 18px;
	padding: 0;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
}

body.noMask #adr-pad button {
	border-color: #fff;
	background: rgba(0, 0, 0, 0.72);
	color: #fff;
}

#adr-pad [data-d="n"] { grid-column: 2; grid-row: 1; }
#adr-pad [data-d="w"] { grid-column: 1; grid-row: 2; }
#adr-pad [data-d="e"] { grid-column: 3; grid-row: 2; }
#adr-pad [data-d="s"] { grid-column: 2; grid-row: 3; }