/*
	Mobile layout (body.layout-mobile): a fixed header (village switcher, Map, Chat and Inbox
	buttons, the resource strip underneath) 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 header, the "More" tab and the More sheet.
*/

body.layout-mobile
{
	--mobile-header-height: 48px;
	--mobile-resources-height: 24px;
	/* Header plus resource strip: where the sheets and the minimap start. */
	--mobile-chrome-top: 72px;
	/* The tab bar grows by the iPhone home-indicator inset (viewport-fit=cover, set by the engine). */
	--mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
	--mobile-tabbar-height: calc(56px + var(--mobile-safe-bottom));
	/* The notch and rounded corners of a phone in landscape. */
	--mobile-safe-left: env(safe-area-inset-left, 0px);
	--mobile-safe-right: env(safe-area-inset-right, 0px);

	/* Read by the engine: #sheets and the map's placement bar sit between header and tab bar. */
	--sheet-top: var(--mobile-chrome-top);
	--sheet-bottom: var(--mobile-tabbar-height);
}

/* While something is being built, trained or scouted, the ticker row adds 22px under the resources. */
body.layout-mobile.has-ticker
{
	--mobile-ticker-height: 22px;
	--mobile-chrome-top: 94px;
}

/* The Statusbar panel is not shown on a phone: the ticker row (Game.dolumar.mobile.syncTicker) carries its counters and links. */
body.layout-mobile .panel.status
{
	display: none !important;
}

/* Header (generated by Game.dolumar.mobile): right of the logo, village switcher then Map, Chat and Inbox. */
body.layout-mobile .mobile-header
{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: var(--mobile-header-height);
	display: flex;
	align-items: stretch;
	padding-left: calc(120px + var(--mobile-safe-left));
	padding-right: var(--mobile-safe-right);
	box-sizing: border-box;
	z-index: 1001;
}

body.layout-mobile .mobile-header button
{
	position: static;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: #f0dfb0;
	text-shadow: 0 1px 1px #000;
	font-family: Verdana, Tahoma, Arial, sans-serif;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

body.layout-mobile .mobile-village
{
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: stretch;
}

body.layout-mobile .mobile-village button.prev,
body.layout-mobile .mobile-village button.next
{
	display: none;
	flex: 0 0 26px;
	width: 26px;
	padding-bottom: 4px;
	font-size: 28px;
	line-height: 1;
}

body.layout-mobile .mobile-village.switchable button.prev,
body.layout-mobile .mobile-village.switchable button.next
{
	display: block;
}

/* The current village; a tap jumps the map to it. */
body.layout-mobile .mobile-village button.name
{
	flex: 1 1 auto;
	min-width: 0;
	padding: 0 2px 2px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
}

body.layout-mobile .mobile-header-actions
{
	flex: 0 0 auto;
	display: flex;
}

body.layout-mobile .mobile-header-actions button
{
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 42px;
	padding-bottom: 2px;
	overflow: hidden;
}

body.layout-mobile .mobile-header-actions button svg
{
	display: block;
	filter: drop-shadow(0 1px 1px #000);
}

body.layout-mobile .mobile-header-actions button .label
{
	display: block;
	margin-top: 1px;
	font-size: 9px;
	line-height: 10px;
}

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

/* Unread messages: a red dot on the Inbox icon. */
body.layout-mobile .mobile-header-actions button.has-messages::after
{
	content: '';
	position: absolute;
	top: 5px;
	right: 7px;
	width: 8px;
	height: 8px;
	border: 1px solid #f0dfb0;
	border-radius: 50%;
	background: #c81e26;
}

/* Resource strip: the Newsbar's stock line (copied by Game.dolumar.mobile.syncHeader). */
body.layout-mobile .mobile-resources
{
	position: fixed;
	top: var(--mobile-header-height);
	left: 0;
	right: 0;
	height: var(--mobile-resources-height);
	display: flex;
	align-items: center;
	padding: 0 8px;
	box-sizing: border-box;
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
	scrollbar-width: none;
	background: #15110c;
	border-bottom: 1px solid #0e0c09;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
	color: #f0dfb0;
	text-shadow: 0 1px 1px #000;
	font-family: Verdana, Tahoma, Arial, sans-serif;
	font-size: 12px;
	z-index: 1000;
}

body.layout-mobile .mobile-resources::-webkit-scrollbar
{
	display: none;
}

body.layout-mobile .mobile-resources span.cost-resources
{
	display: inline-flex;
	gap: 10px;
}

body.layout-mobile .mobile-resources span.resource
{
	display: inline-flex;
	align-items: center;
	padding: 0 0 0 30px;
	background-position: left center;
}

body.layout-mobile .mobile-resources span.resource a
{
	color: inherit;
	text-decoration: none;
}

/* Ticker row: the Statusbar's countdowns (copied by Game.dolumar.mobile.syncTicker); hidden when empty. */
body.layout-mobile .mobile-ticker
{
	display: none;
	position: fixed;
	top: calc(var(--mobile-header-height) + var(--mobile-resources-height));
	left: 0;
	right: 0;
	height: 22px;
	align-items: center;
	padding: 0 8px;
	box-sizing: border-box;
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
	scrollbar-width: none;
	background: #211b14;
	border-bottom: 1px solid #0e0c09;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
	color: #f0dfb0;
	font-family: Verdana, Tahoma, Arial, sans-serif;
	font-size: 11px;
	line-height: 22px;
	cursor: pointer;
	z-index: 1000;
}

body.layout-mobile.has-ticker .mobile-ticker
{
	display: flex;
}

body.layout-mobile .mobile-ticker::-webkit-scrollbar
{
	display: none;
}

body.layout-mobile .mobile-ticker ul.statusbar
{
	display: inline-flex;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.layout-mobile .mobile-ticker ul.statusbar li
{
	float: none;
	margin: 0;
	padding: 0;
	white-space: nowrap;
	color: #f0dfb0;
	font-size: 11px;
	line-height: 22px;
}

body.layout-mobile .mobile-ticker ul.statusbar span.counter
{
	color: #ffd766;
	font-weight: bold;
}

body.layout-mobile .mobile-ticker ul.statusbar a
{
	color: #ffd766;
}

/* The ticker sheet: one row per countdown. */
body.layout-mobile .sheet-content ul.statusbar
{
	margin: 0;
	padding: 0;
	list-style: none;
}

body.layout-mobile .sheet-content ul.statusbar li
{
	float: none;
	margin: 0;
	padding: 10px 0;
	border-bottom: 1px solid rgba(90, 70, 40, 0.35);
	color: #40331f;
	line-height: 1.4;
}

body.layout-mobile .sheet-content ul.statusbar span.counter
{
	font-weight: bold;
	color: #2c261d;
}

body.layout-mobile .sheet-content ul.statusbar li a
{
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-left: 6px;
	color: #a0121a;
}

/* Zoom: a small round pair at the bottom right of the map (pinch zooms too), faded out after a few seconds without a touch. */
body.layout-mobile .mobile-map-zoom
{
	position: fixed;
	right: 12px;
	bottom: calc(var(--mobile-tabbar-height) + 12px);
	display: flex;
	flex-direction: column;
	gap: 8px;
	z-index: 999;
	transition: opacity 0.4s;
}

body.layout-mobile .mobile-map-zoom.idle
{
	opacity: 0;
	pointer-events: none;
}

body.layout-mobile .mobile-map-zoom button
{
	/* main.css styles .zoom-in/.zoom-out for the minimap's own buttons. */
	position: static;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0 0 2px;
	border: 1px solid rgba(240, 223, 176, 0.5);
	border-radius: 50%;
	background: rgba(26, 22, 18, 0.7);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
	color: #f0dfb0;
	text-shadow: 0 1px 1px #000;
	font-family: Verdana, Tahoma, Arial, sans-serif;
	font-size: 22px;
	line-height: 1;
	text-align: center;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

/* 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;
	padding-bottom: var(--mobile-safe-bottom);
	/* The desktop top menu's stone as a seamless tile (images/mobile/stone.png, the middle band of
	   topmenu.png mirrored both ways), a sliver of the gold status bar on top, a bevel from shadows. */
	background: #6b5a3e url('../images/mobile/stone.png') repeat left top;
	border-top: 0;
	box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.5), inset 0 -8px 10px -6px rgba(0, 0, 0, 0.7), inset 0 8px 10px -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/mobile/goldstrip.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;
}

/* Every icon (25px bitmaps, a 22px and a 30px one among them) in the same 28px box. */
body.layout-mobile #menu ul.left > li > a span.navigation
{
	width: 28px;
	height: 28px;
	background-color: transparent;
	background-size: 25px 25px;
	background-position: center;
}

/* The tab whose window is open (Game.dolumar.mobile.syncActiveTab). */
body.layout-mobile #menu ul.left > li.active-tab > a
{
	background: rgba(255, 220, 140, 0.1);
	box-shadow: inset 0 -3px 0 #d9a93a;
}

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: 28px;
	color: #f0dfb0;
}

body.layout-mobile #menu li.tab-more span.more-icon svg
{
	display: block;
	filter: drop-shadow(0 1px 1px #000);
}

/* 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,
body.layout-mobile .sheet-content .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 Map button shows the minimap, the Newsbar feeds the header. */
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-chrome-top) !important;
	right: auto !important;
	bottom: auto !important;
	left: 0 !important;
	margin: 0 !important;
	z-index: 999 !important;
}

/* Guide: shown when it has new advice (Game.dolumar.mobile.syncGuide) or from the "Guide" entry in the More sheet. */
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: 999 !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
{
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.4;
	overflow-wrap: break-word;
}

/* Three sizes: serif titles, 15px body, 13px meta. */
body.layout-mobile .sheet-content h1,
body.layout-mobile .sheet-content h2,
body.layout-mobile .sheet-content h3
{
	margin: 0 0 4px;
	font-family: Georgia, 'Times New Roman', serif;
	color: #2c261d;
}

body.layout-mobile .sheet-content h1,
body.layout-mobile .sheet-content h2
{
	font-size: 19px;
}

body.layout-mobile .sheet-content h3
{
	font-size: 17px;
}

body.layout-mobile .sheet-content p.sidenote,
body.layout-mobile .sheet-content p.hint-mobile,
body.layout-mobile .sheet-content p.hint-desktop
{
	font-size: 13px;
	color: #6a5a40;
}

/* Touch instructions replace the desktop's "click, right-click" copy. */
body.layout-mobile .sheet-content p.hint-desktop
{
	display: none;
}

body:not(.layout-mobile) p.hint-mobile
{
	display: none;
}

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's dark brown on the parchment sheet; actions are buttons (below). */
body.layout-mobile .sheet-content a
{
	color: #40331f;
	text-decoration: underline;
}

/* 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;
}

/* Button component: every action in a sheet (a.action-button in templates, every button and submit). */
body.layout-mobile .sheet-content a.action-button,
body.layout-mobile .sheet-content button,
body.layout-mobile .sheet-content input[type=submit],
body.layout-mobile .sheet-content input[type=button]
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	margin: 2px 0;
	padding: 0 18px;
	box-sizing: border-box;
	border: 1px solid #8a7550;
	border-radius: 6px;
	background: linear-gradient(#f9efd6, #e2d0a2);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 2px rgba(0, 0, 0, 0.25);
	color: #2c261d;
	font-family: inherit;
	font-size: 15px;
	font-weight: bold;
	line-height: 1.2;
	text-decoration: none;
	text-shadow: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

body.layout-mobile .sheet-content a.action-button.primary
{
	border-color: #5a0a0e;
	background: linear-gradient(#b8262e, #8c0f16);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 1px 2px rgba(0, 0, 0, 0.35);
	color: #fff2d6;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
}

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: #40331f;
}

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

/* 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: one card per building. The template's table (name row, then thumbnail and
	description) is laid out with flex: name and build time on one line, the costs as
	pills, the thumbnail left of the description with the Construct button bottom right.
*/
body.layout-mobile .sheet-content .building-card
{
	margin: 0 0 10px;
	padding: 10px;
	border: 1px solid rgba(90, 70, 40, 0.35);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.22);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

body.layout-mobile .sheet-content .building-card.shaded
{
	opacity: 0.6;
}

body.layout-mobile .sheet-content .building-card table,
body.layout-mobile .sheet-content .building-card tbody
{
	display: block;
	width: auto;
}

body.layout-mobile .sheet-content .building-card tr
{
	display: flex;
	align-items: flex-start;
}

body.layout-mobile .sheet-content .building-card td
{
	display: block;
	padding: 0;
}

body.layout-mobile .sheet-content .building-card tr:first-child td
{
	flex: 1 1 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
}

body.layout-mobile .sheet-content .building-card h3
{
	order: 1;
	flex: 1 1 auto;
	margin: 0;
	padding: 0;
	border: 0;
}

body.layout-mobile .sheet-content .building-card p.sidenote
{
	order: 2;
	display: inline-flex;
	align-items: center;
	float: none;
	margin: 0;
	padding: 0;
}

/* Build time: a clock before it. */
body.layout-mobile .sheet-content .building-card p.sidenote::before
{
	content: '';
	width: 13px;
	height: 13px;
	margin-right: 4px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a5a40' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") no-repeat center / contain;
}

body.layout-mobile .sheet-content .building-card p.resources-cost
{
	order: 3;
	flex: 1 1 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 6px 0 0;
	font-size: 13px;
}

body.layout-mobile .sheet-content .building-card p.resources-cost span.cost-resources
{
	display: contents;
}

body.layout-mobile .sheet-content .building-card p.resources-cost select
{
	flex: 1 1 100%;
}

/* Cost pills: the resource icon (28 by 14) and the amount. */
body.layout-mobile .sheet-content .building-card span.resource
{
	display: inline-flex;
	align-items: center;
	min-height: 24px;
	padding: 0 9px 0 30px;
	border-radius: 12px;
	background-color: rgba(90, 70, 40, 0.12);
	background-position: 2px center;
	font-size: 13px;
	color: #2c261d;
}

body.layout-mobile .sheet-content .building-card tr + tr
{
	gap: 10px;
	margin-top: 8px;
}

body.layout-mobile .sheet-content .building-card tr + tr td:first-child
{
	flex: 0 0 80px;
	width: 80px !important;
}

body.layout-mobile .sheet-content .building-card img.icon-building
{
	display: block;
	width: 80px;
	height: auto;
	box-sizing: border-box;
	border: 1px solid #5a4a30;
	border-radius: 4px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

body.layout-mobile .sheet-content .building-card tr + tr td + td
{
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-self: stretch;
}

body.layout-mobile .sheet-content .building-card tr + tr td + td p
{
	margin: 0 0 8px;
	font-size: 14px;
	color: #40331f;
}

body.layout-mobile .sheet-content .building-card tr + tr td + td p:last-child
{
	margin: auto 0 0;
	text-align: right;
}

/* 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: 13px;
	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 header, with the logo (186 by 60, drawn at 112 by 36) and the same 5px gold strip as the tab bar (the top rows of statusbar.png, flipped so the dark edge meets the resource strip). */
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 calc(4px + var(--mobile-safe-left)) 5px / 112px 36px,
		url('../images/mobile/goldstrip-bottom.png') repeat-x left bottom,
		#6b5a3e url('../images/mobile/stone.png') repeat left top;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6), inset 0 8px 10px -6px rgba(0, 0, 0, 0.7), inset 0 -8px 10px -6px rgba(0, 0, 0, 0.5);
	box-sizing: border-box;
	pointer-events: none;
}

/* 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 resource strip so 14px of vine curls show. */
	top: -9px;
	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: 44px;
	margin: 0 4px;
	background: transparent;
	border-bottom: 1px solid rgba(90, 70, 40, 0.4);
}

body.layout-mobile #sheets .sheet-title
{
	color: #2c261d;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 17px;
	line-height: 1.2;
}

body.layout-mobile #sheets .sheet-subtitle
{
	font-family: Verdana, Tahoma, Arial, sans-serif;
	font-size: 12px;
	color: #6a5a40;
	opacity: 1;
}

/* Back and close: 2px dark strokes of the same weight. */
body.layout-mobile #sheets .sheet-back,
body.layout-mobile #sheets .sheet-close
{
	width: 44px;
	height: 44px;
	color: transparent;
	background-repeat: no-repeat;
	background-position: center;
}

body.layout-mobile #sheets .sheet-back
{
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a2010' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E");
	background-size: 22px 22px;
}

body.layout-mobile #sheets .sheet-back[style*="display: none"] + .sheet-title
{
	margin-left: 44px;
}

body.layout-mobile #sheets .sheet-close
{
	background-image: url('../theme/dolumar/close.png');
	background-size: 16px 18px;
}

body.layout-mobile #sheets .sheet-content
{
	padding: 12px 12px 24px;
	scrollbar-width: none;
}

body.layout-mobile #sheets .sheet-content::-webkit-scrollbar
{
	display: none;
}

/* Scrolled text fades into the parchment before the bottom vines. */
body.layout-mobile #sheets .sheet::after
{
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 16px;
	background: linear-gradient(rgba(247, 236, 197, 0), rgba(247, 236, 197, 0.95));
	pointer-events: none;
}

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;
}

/* Newsflash (Game.gui.newsflashHost): scrolls over the resource strip, as it did over the Newsbar. */
body.layout-mobile .mobile-newsflash
{
	position: fixed;
	top: var(--mobile-header-height);
	left: 0;
	right: 0;
	height: var(--mobile-resources-height);
	overflow: hidden;
	pointer-events: none;
	z-index: 1002;
}

body.layout-mobile .mobile-newsflash div.newsflash
{
	pointer-events: auto;
	color: #2c261d;
	font-size: 12px;
	line-height: var(--mobile-resources-height);
}

/* While a confirm (modal sheet) is up, the header and tab bar are dimmed and do not react (Game.dolumar.mobile.guardChrome). */
body.layout-mobile.has-modal-sheet .mobile-header,
body.layout-mobile.has-modal-sheet .mobile-resources,
body.layout-mobile.has-modal-sheet .mobile-ticker,
body.layout-mobile.has-modal-sheet .panel.topmenu,
body.layout-mobile.has-modal-sheet::before
{
	filter: brightness(0.4);
}

/* Landscape on a phone with a notch: keep the bars' content and the sheets clear of it. */
body.layout-mobile .mobile-resources,
body.layout-mobile .mobile-ticker
{
	padding-left: calc(8px + var(--mobile-safe-left));
	padding-right: calc(8px + var(--mobile-safe-right));
}

body.layout-mobile .panel.topmenu
{
	padding-left: var(--mobile-safe-left);
	padding-right: var(--mobile-safe-right);
}

body.layout-mobile #sheets
{
	left: var(--mobile-safe-left);
	right: var(--mobile-safe-right);
}