/*
	Mobile layout (body.layout-mobile): a fixed header (Statusbar panel plus action buttons)
	and a bottom tab bar (Menu panel). Every rule is scoped under body.layout-mobile so the
	desktop layout is untouched. The panels carry inline sizes from their PHP settings,
	hence the !important on size and position. Game.dolumar.mobile (dolumar.js) builds
	the "More" tab, the More sheet and the header buttons.
*/

body.layout-mobile
{
	--mobile-header-height: 44px;
	--mobile-tabbar-height: 56px;
	--mobile-header-actions-width: 220px;

	/* Read by the engine: #sheets and the map's placement bar sit between header and tab bar. */
	--sheet-top: 44px;
	--sheet-bottom: 56px;
}

body.layout-mobile #sheets
{
	--sheet-top: 44px;
	--sheet-bottom: 56px;
}

/* Header: Statusbar counters in one horizontally scrolling row. */
body.layout-mobile .panel.status
{
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: var(--mobile-header-actions-width) !important;
	bottom: auto !important;
	width: auto !important;
	height: var(--mobile-header-height) !important;
	margin: 0 !important;
	padding: 0 4px;
	box-sizing: border-box;
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
	-webkit-overflow-scrolling: touch;
	background: transparent;
	z-index: 1001 !important;
}

body.layout-mobile .panel.status ul,
body.layout-mobile .panel.status li
{
	display: inline-block;
	float: none;
	margin: 0;
	padding: 0;
	vertical-align: middle;
	white-space: nowrap;
}

body.layout-mobile .panel.status ul.statusbar
{
	line-height: var(--mobile-header-height);
}

body.layout-mobile .panel.status ul.statusbar > li
{
	margin-right: 10px;
	line-height: normal;
	font-size: 12px;
}

/* Header action buttons (generated by Game.dolumar.mobile). */
body.layout-mobile .mobile-header-actions
{
	position: fixed;
	top: 0;
	right: 0;
	width: var(--mobile-header-actions-width);
	height: var(--mobile-header-height);
	display: flex;
	background: transparent;
	box-sizing: border-box;
	z-index: 1001;
}

body.layout-mobile .mobile-header-actions button
{
	position: static;
	flex: 0 0 44px;
	width: 44px;
	height: 43px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: #f0dfb0;
	text-shadow: 0 1px 1px #000;
	font-family: Verdana, Tahoma, Arial, sans-serif;
	font-size: 12px;
	line-height: 43px;
	text-align: center;
	overflow: hidden;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

body.layout-mobile .mobile-header-actions button.zoom-in,
body.layout-mobile .mobile-header-actions button.zoom-out
{
	/* main.css styles .zoom-in/.zoom-out for the minimap's own buttons. */
	background: transparent;
	font-size: 24px;
}

body.layout-mobile .mobile-header-actions button.active
{
	background: rgba(255, 220, 140, 0.18);
	border-radius: 6px;
}

/* Tab bar: the Menu panel fixed at the bottom. */
body.layout-mobile .panel.topmenu
{
	position: fixed !important;
	top: auto !important;
	bottom: 0 !important;
	left: 0 !important;
	right: 0 !important;
	width: auto !important;
	height: var(--mobile-tabbar-height) !important;
	margin: 0 !important;
	/* The desktop top menu's stone, at native scale, with a sliver of the gold status bar on top. */
	background: #1a1612 url('../images/topmenu.png') repeat-x left bottom;
	border-top: 0;
	box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.5);
	box-sizing: border-box;
	z-index: 1001 !important;
}

body.layout-mobile .panel.topmenu::before
{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
	background: url('../images/statusbar.png') repeat-x left top;
}

body.layout-mobile #menu
{
	position: static;
	width: 100%;
	height: 100%;
}

body.layout-mobile #menu > span.left,
body.layout-mobile #menu > span.center,
body.layout-mobile #menu > span.right,
body.layout-mobile #menu ul.right
{
	display: none;
}

body.layout-mobile #menu ul.left
{
	position: static;
	display: flex;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	background: none;
}

body.layout-mobile #menu ul.left > li
{
	flex: 1 1 0;
	min-width: 0;
	float: none;
	margin: 0;
	padding: 0;
}

/* Five tabs plus "More"; the rest is in the More sheet. */
body.layout-mobile #menu ul.left > li:nth-child(n+6):not(.tab-more)
{
	display: none;
}

/* Village sub-menus are in the More sheet (long press a tab). */
body.layout-mobile #menu ul.left > li > div
{
	display: none !important;
}

body.layout-mobile #menu ul.left > li > a
{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 0 2px;
	box-sizing: border-box;
	color: #f0dfb0;
	text-shadow: 0 1px 1px #000;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	user-select: none;
}

body.layout-mobile #menu ul.left > li > a::after
{
	content: attr(title);
	display: block;
	max-width: 100%;
	margin-top: 2px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-family: Verdana, Tahoma, Arial, sans-serif;
	font-size: 10px;
	line-height: 12px;
}

body.layout-mobile #menu li.tab-more span.more-icon
{
	display: block;
	height: 27px;
	font-size: 22px;
	line-height: 27px;
	color: #f0dfb0;
}

/* More sheet: the remaining menu items as a vertical list. */
body.layout-mobile .mobile-more-list,
body.layout-mobile .mobile-more-list ul
{
	list-style: none;
	margin: 0;
	padding: 0;
}

body.layout-mobile .mobile-more-list > li
{
	border-bottom: 1px solid rgba(90, 70, 40, 0.35);
}

body.layout-mobile .mobile-more-list a
{
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0 12px;
	color: #40331f;
	text-decoration: none;
}

body.layout-mobile .mobile-more-list > li > a[title]::after
{
	content: attr(title);
	margin-left: 10px;
}

body.layout-mobile .mobile-more-list > li > a img
{
	margin: 0 !important;
}

body.layout-mobile .mobile-more-list ul a
{
	min-height: 40px;
	padding-left: 47px;
	font-size: 13px;
	color: #5a4a30;
}

body.layout-mobile .mobile-more-list ul li.active a
{
	color: #a0121a;
}

body.layout-mobile .mobile-more-list ul li.title a
{
	font-weight: bold;
	color: #40331f;
}

/* Panels hidden by default; the header buttons show the minimap and the newsbar. */
body.layout-mobile .panel.minimap,
body.layout-mobile .panel.newsbar,
body.layout-mobile .panel.guide,
body.layout-mobile .guiwindow.invisible,
body.layout-mobile .chatwindow:not(.sheet):not(.sheet-content)
{
	display: none !important;
}

body.layout-mobile .panel.minimap.mobile-visible
{
	display: block !important;
	position: fixed !important;
	top: var(--mobile-header-height) !important;
	right: auto !important;
	bottom: auto !important;
	left: 0 !important;
	margin: 0 !important;
	z-index: 1001 !important;
}

body.layout-mobile .panel.newsbar.mobile-visible
{
	display: block !important;
	position: fixed !important;
	top: auto !important;
	left: 0 !important;
	right: 0 !important;
	bottom: var(--mobile-tabbar-height) !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 33px;
	box-sizing: border-box;
	background: #1a1612 url('../images/topmenu.png') repeat-x left bottom;
	z-index: 1001 !important;
}

/* The resource line wraps on a narrow screen: let it grow instead of running under the tab bar. */
body.layout-mobile .panel.newsbar div.newsbar-line
{
	height: auto;
	min-height: 21px;
	background-size: 100% 100%;
}

body.layout-mobile .panel.newsbar div.newsbar-content
{
	position: static;
	width: auto;
}

body.layout-mobile .panel.newsbar div.newsbar-villagename
{
	bottom: 100%;
	width: 280px;
	margin-left: -140px;
	background-size: 100% 100%;
}

/* Guide: shown from the "Guide" entry in the More sheet (a second tap hides it). */
body.layout-mobile .panel.guide.mobile-visible
{
	display: block !important;
	position: fixed !important;
	top: auto !important;
	left: auto !important;
	right: 0 !important;
	bottom: var(--mobile-tabbar-height) !important;
	margin: 0 !important;
	z-index: 1001 !important;
}

body.layout-mobile .mobile-more-list span.guide-icon
{
	display: inline-block;
	width: 25px;
	height: 25px;
	background: url('../images/characters/guide-icon.png') no-repeat center;
	background-size: contain;
}

/*
	Window content in sheets. The desktop window rules are scoped to the Prototype
	window (.dolumar_content_inner2), so a sheet gets these instead: content fits the
	screen width, wide tables scroll inside their own div.table-scroll (added by
	Game.dolumar.mobile.fitContent), and links and form controls are at least 44px tall.
	fitContent may put a div.table-scroll between a table and its parent (in a hidden
	sheet it wraps every table), so per-window rules use descendant selectors, never
	"parent > table".
*/
body.layout-mobile .sheet-content
{
	line-height: 1.35;
	overflow-wrap: break-word;
}

body.layout-mobile .sheet-content img
{
	max-width: 100%;
	height: auto;
}

/* As in a desktop window, a table takes the full width. */
body.layout-mobile .sheet-content table
{
	width: 100%;
	max-width: 100%;
	border-collapse: separate;
}

body.layout-mobile .sheet-content td,
body.layout-mobile .sheet-content th
{
	padding: 2px 4px;
	text-align: left;
	vertical-align: top;
}

body.layout-mobile .sheet-content th.number,
body.layout-mobile .sheet-content td.number
{
	text-align: center;
}

body.layout-mobile .sheet-content td.right
{
	text-align: right;
	padding-right: 0;
}

body.layout-mobile .sheet-content td.left
{
	padding-left: 0;
}

/* Fixed widths from inline styles (input boxes, table cells) never exceed the sheet.
   The battle simulator's unit row scrolls sideways on purpose and keeps its width.
   This also matches inline min-width/max-width; no template uses those today. */
body.layout-mobile .sheet-content [style*="width"]:not(.chooseUnitContainer *)
{
	max-width: 100% !important;
}

body.layout-mobile .sheet-content .table-scroll
{
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

body.layout-mobile .sheet-content .table-scroll > table
{
	max-width: none;
}

/* Links: the desktop window colour on the parchment sheet. */
body.layout-mobile .sheet-content a
{
	color: #000097;
}

/* Tap targets: links in lists, buttons and form controls. */
body.layout-mobile .sheet-content.guiwindow li > a,
body.layout-mobile .sheet-content.guiwindow form a
{
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	vertical-align: middle;
}

body.layout-mobile .sheet-content button,
body.layout-mobile .sheet-content input[type=submit],
body.layout-mobile .sheet-content input[type=button],
body.layout-mobile .sheet-content form select,
body.layout-mobile .sheet-content form input[type=text],
body.layout-mobile .sheet-content form input[type=password],
body.layout-mobile .sheet-content form input[type=number],
body.layout-mobile .sheet-content input:not([type]),
body.layout-mobile .sheet-content input[type=email],
body.layout-mobile .sheet-content input[type=search],
body.layout-mobile .sheet-content textarea
{
	min-height: 44px;
	box-sizing: border-box;
	font-family: inherit;
	font-size: 16px;
}

body.layout-mobile .sheet-content button,
body.layout-mobile .sheet-content input[type=submit],
body.layout-mobile .sheet-content input[type=button]
{
	padding: 0 16px;
	line-height: 42px;
}

body.layout-mobile .sheet-content select
{
	max-width: 100%;
	min-height: 44px;
	line-height: 44px;
	font-family: inherit;
	font-size: 16px;
}

/* Titled elements: a pointer cursor makes iOS Safari deliver the tap as a click. */
body.layout-mobile .sheet-content.guiwindow [title]
{
	cursor: pointer;
}

/* Tooltip shown by a tap on an element with a title (Game.dolumar.mobile.showTooltip). */
body.layout-mobile .tap-tooltip
{
	position: absolute;
	z-index: 10;
	max-width: calc(100% - 8px);
	padding: 6px 10px;
	box-sizing: border-box;
	background: #f5e9c8;
	color: #2c261d;
	border: 1px solid #8a7550;
	border-radius: 4px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
	font-size: 13px;
	line-height: 1.3;
	white-space: pre-line;
	pointer-events: none;
}

/* Page list (logbook and other paged windows): 44px buttons that wrap. */
body.layout-mobile .sheet-content div.pagelist
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px;
	padding: 4px 0;
}

body.layout-mobile .sheet-content div.pagelist span
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	color: #40331f;
}

body.layout-mobile .sheet-content div.pagelist span a
{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 42px;
	color: #000097;
}

body.layout-mobile .sheet-content div.pagelist span.active a
{
	color: red;
}

/* Tabs (squads, battle report): a wrapping row of 44px tabs instead of fixed 20px ones. */
body.layout-mobile .sheet-content ul.tabs
{
	display: flex;
	flex-wrap: wrap;
	height: auto;
	padding: 0;
	margin: 0 0 4px 0;
	list-style: none;
}

body.layout-mobile .sheet-content ul.tabs li
{
	float: none;
	height: auto;
	margin: 0 4px 0 0;
	padding: 0;
	border-color: #8a7550;
}

body.layout-mobile .sheet-content ul.tabs li > a
{
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0 10px;
	color: #40331f;
}

body.layout-mobile .sheet-content ul.tabs li.active > a
{
	color: #000;
	font-weight: bold;
}

/* Action lists (squads, battle and others): a full-width 44px row per link. */
body.layout-mobile .sheet-content ul.actions
{
	margin-left: 0;
	padding-left: 0;
	list-style: none;
}

body.layout-mobile .sheet-content ul.actions li
{
	padding: 0;
	border-bottom: 1px solid rgba(90, 70, 40, 0.35);
}

body.layout-mobile .sheet-content ul.actions li > a
{
	display: flex;
	width: 100%;
	padding: 0 4px;
	box-sizing: border-box;
}

/* Build: "Bonus Buildings" and "Construct Building" are links alone in a paragraph. */
body.layout-mobile .sheet-content:has(img.icon-building) p > a
{
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* Economy: six columns; smaller text and no wrapping inside "stock / max". */
body.layout-mobile .sheet-content table.resources
{
	font-size: 12px;
}

body.layout-mobile .sheet-content table.resources td,
body.layout-mobile .sheet-content table.resources th
{
	padding: 2px 3px;
	white-space: nowrap;
	vertical-align: middle;
}

/* Squads: unit image, equipment and stats one under the other. */
body.layout-mobile .sheet.squads div.equipment
{
	float: none;
}

body.layout-mobile .sheet.squads div.equipment select
{
	width: 100%;
}

/* Logbook: date above the text, the action link on its own line. */
body.layout-mobile .sheet-content table.logbook,
body.layout-mobile .sheet-content table.logbook tbody,
body.layout-mobile .sheet-content table.logbook tr,
body.layout-mobile .sheet-content table.logbook td
{
	display: block;
	width: auto;
}

body.layout-mobile .sheet-content table.logbook tr
{
	padding: 6px 0;
	border-bottom: 1px solid rgba(90, 70, 40, 0.35);
}

body.layout-mobile .sheet-content table.logbook td.date
{
	font-size: 12px;
	color: #6a5a40;
}

body.layout-mobile .sheet-content table.logbook td.actions a
{
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/*
	Illustrated skin: the desktop's own textures on the mobile chrome.
	Header and tab bar use the top menu's stone; a sheet is a desktop window at a third of
	the scale, drawn with border-image from theme/dolumar/frame.png (the theme's nine
	slices in one image: 42 and 37 wide, 68 and 32 high), with the window parchment inside.
*/

/* One continuous stone bar behind the status panel and the header buttons, with the logo. */
body.layout-mobile::before
{
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: var(--mobile-header-height);
	z-index: 1000;
	background:
		url('../images/topmenu_center.png') no-repeat 4px 2px / 78px 40px,
		#1a1612 url('../images/topmenu.png') repeat-x left top / auto var(--mobile-header-height);
	border-bottom: 2px solid #0e0c09;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
	box-sizing: border-box;
	pointer-events: none;
}

body.layout-mobile .panel.status
{
	padding-left: 86px;
}

/* A dark page behind an open sheet; the map stays as it is when nothing is open. */
body.layout-mobile #sheets:has(.sheet:not(.sheet-modal))
{
	background: #15110c;
}

body.layout-mobile #sheets .sheet
{
	/* The top band tucks under the header so only the vine curls show. */
	top: -14px;
	border-style: solid;
	border-width: 23px 12px 11px 14px;
	border-image: url('../theme/dolumar/frame.png') 68 37 32 42 / 23px 12px 11px 14px round;
	background: url('../theme/dolumar/overlay.png') repeat padding-box;
	color: #40331f;
}

body.layout-mobile #sheets .sheet.sheet-modal
{
	top: 50%;
	/* sheets.css gives the modal a 1px border; restate the frame so it keeps the vines. */
	border: solid;
	border-width: 23px 12px 11px 14px;
	border-image: url('../theme/dolumar/frame.png') 68 37 32 42 / 23px 12px 11px 14px round;
	border-radius: 0;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
}

body.layout-mobile #sheets .sheet-bar
{
	min-height: 40px;
	margin: 0 4px;
	background: transparent;
	border-bottom: 1px solid rgba(90, 70, 40, 0.4);
}

body.layout-mobile #sheets .sheet-title
{
	color: #000;
	font-family: Verdana, Tahoma, Arial, sans-serif;
	font-size: 15px;
}

body.layout-mobile #sheets .sheet-back,
body.layout-mobile #sheets .sheet-close
{
	width: 40px;
	height: 40px;
	line-height: 40px;
	color: #2a2010;
	font-size: 22px;
}

body.layout-mobile #sheets .sheet-close
{
	color: transparent;
	background: url('../theme/dolumar/close.png') no-repeat center / 16px 18px;
}

body.layout-mobile #sheets .sheet-content
{
	padding: 8px 10px 12px;
}

body.layout-mobile #sheets .sheet-modal .sheet-content
{
	padding: 12px;
}

/* Form controls on parchment. */
body.layout-mobile .sheet-content select,
body.layout-mobile .sheet-content textarea,
body.layout-mobile .sheet-content input:not([type]),
body.layout-mobile .sheet-content input[type=text],
body.layout-mobile .sheet-content input[type=password],
body.layout-mobile .sheet-content input[type=number],
body.layout-mobile .sheet-content input[type=email],
body.layout-mobile .sheet-content input[type=search]
{
	background: #fff8e4;
	color: #40331f;
	border: 1px solid #a08c5a;
	border-radius: 4px;
}