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

/* Centred when the resources fit; auto margins collapse to 0 on overflow, so a narrow strip stays left-aligned and scrolls. */
body.layout-mobile .mobile-resources > :first-child
{
	margin-left: auto;
}

body.layout-mobile .mobile-resources > :last-child
{
	margin-right: auto;
}

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

/* The minimap keeps its fixed size on mobile: the drag-to-resize corner is a mouse control. */
body.layout-mobile .panel.minimap .resize-corner
{
	display: none !important;
}

/*
	Guide: a card along the bottom of the map, above the tab bar. Shown when it has advice
	(Game.dolumar.mobile.syncGuide) or from the "Guide" entry in the More sheet; when the
	advice is folded away it shrinks to the current task (div.objective, mobile-chip).
	It never covers the middle of the map, where the village and a building being placed are.
*/
body.layout-mobile .panel.guide.mobile-visible
{
	display: block !important;
	position: fixed !important;
	top: auto !important;
	left: 8px !important;
	right: 8px !important;
	bottom: calc(var(--mobile-tabbar-height) + 8px) !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	z-index: 999 !important;
}

/* While a building is being placed the map needs every pixel. */
body.layout-mobile:has(#map_select_actions) .panel.guide
{
	display: none !important;
}

body.layout-mobile .panel.guide div.avatar
{
	position: absolute;
	left: 0;
	right: auto;
	bottom: 0;
	width: 64px;
	height: 80px;
	background-size: 192px 160px;
	background-position: -128px -80px;
	pointer-events: none;
}

body.layout-mobile .panel.guide div.avatar.happy { background-position: 0 0; }
body.layout-mobile .panel.guide div.avatar.sad { background-position: -64px 0; }
body.layout-mobile .panel.guide div.avatar.proud { background-position: -128px 0; }
body.layout-mobile .panel.guide div.avatar.angry { background-position: 0 -80px; }
body.layout-mobile .panel.guide div.avatar.surprised { background-position: -64px -80px; }
body.layout-mobile .panel.guide div.avatar.neutral { background-position: -128px -80px; }

/*
	The guide's card and task line follow .ai/style-guide.md: Verdana, a flat parchment box with a
	1px border and 3px corners, blue links, and "Show me" as the one main button (.ui-btn.primary).
*/
body.layout-mobile .panel.guide blockquote.bubble,
body.layout-mobile .panel.guide.mobile-chip div.objective
{
	border: 1px solid #8a7550;
	border-radius: 3px;
	background: #fbf3dc;
	box-shadow: 0 1px 0 rgba(64, 51, 31, 0.2);
	font-family: Verdana, sans-serif;
	font-size: 15px;
	color: #40331f;
}

body.layout-mobile .panel.guide blockquote.bubble
{
	position: relative;
	right: auto;
	bottom: auto;
	width: auto;
	max-height: 38vh;
	overflow-y: auto;
	margin: 0 0 0 56px;
	padding: 10px 12px;
	line-height: 1.4;
	-webkit-overflow-scrolling: touch;
}

body.layout-mobile .panel.guide blockquote.bubble p:first-child
{
	margin-top: 0;
}

body.layout-mobile .panel.guide blockquote.bubble p:last-of-type
{
	margin-bottom: 0;
}

/* The tail points left, at the small portrait. */
body.layout-mobile .panel.guide blockquote.bubble:after
{
	display: none;
}

body.layout-mobile .panel.guide .bubble ul.navigation
{
	float: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 4px 16px;
	margin: 8px 0 0 0;
	padding: 0;
}

body.layout-mobile .panel.guide .bubble ul.navigation li
{
	display: block;
	padding: 0;
}

/* Previous, Next and Hide are plain links, with a 44px tap height. */
body.layout-mobile .panel.guide .bubble ul.navigation a
{
	display: inline-block;
	line-height: 44px;
	color: #000097;
	text-decoration: underline;
}

body.layout-mobile .panel.guide .bubble ul.navigation a:hover
{
	color: #b3261e;
}

/* "Show me": the .ui-btn.primary look (ui.css), never red. */
body.layout-mobile .panel.guide .bubble ul.navigation li:has(a.guide-showme)
{
	order: 1;
}

body.layout-mobile .panel.guide .bubble ul.navigation a.guide-showme,
body.layout-mobile .panel.guide div.objective a.guide-showme
{
	display: inline-flex;
	align-items: center;
	flex: none;
	min-height: 36px;
	line-height: 1.2;
	padding: 6px 14px;
	box-sizing: border-box;
	border: 1px solid #40331f;
	border-radius: 3px;
	background: #f3e7c4;
	box-shadow: 0 1px 0 rgba(64, 51, 31, 0.2);
	color: #000;
	font-weight: bold;
	text-decoration: none;
	white-space: nowrap;
}

body.layout-mobile .panel.guide .bubble ul.navigation a.guide-showme:hover,
body.layout-mobile .panel.guide div.objective a.guide-showme:hover
{
	background: #fbf3dc;
	color: #000;
}

/*
	Folded away: one bar with the current task. The guide's portrait sits at its left edge and
	opens the guide again; it replaces the old yellow "Guide" picture.
*/
body.layout-mobile .panel.guide div.objective
{
	display: none;
}

body.layout-mobile .panel.guide.mobile-chip div.objective
{
	display: flex;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
	height: 50px;
	margin: 0;
	padding: 0 6px 0 56px;
}

body.layout-mobile .panel.guide.mobile-chip div.objective span.objective-label
{
	flex: none;
	color: #7a6a4c;
}

body.layout-mobile .panel.guide.mobile-chip div.objective > a:first-of-type
{
	flex: 1;
	min-width: 0;
	line-height: 48px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: #000097;
	text-decoration: underline;
}

body.layout-mobile .panel.guide.mobile-chip div.icon a
{
	left: 6px;
	right: auto;
	bottom: 6px;
	width: 38px;
	height: 38px;
	box-sizing: border-box;
	border: 1px solid #8a7550;
	border-radius: 3px;
	background: #f3e7c4 url('../images/characters/guide-grid.png') no-repeat;
	background-size: 144px 120px;
	background-position: -102px -72px;
}

body.layout-mobile .mobile-more-list span.guide-icon
{
	display: inline-block;
	width: 25px;
	height: 25px;
	box-sizing: border-box;
	border: 1px solid #8a7550;
	border-radius: 3px;
	background: #f3e7c4 url('../images/characters/guide-grid.png') no-repeat;
	background-size: 96px 80px;
	background-position: -68px -48px;
}

/*
	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: Verdana, Tahoma, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.4;
	overflow-wrap: break-word;
}

/* Three sizes: 19px titles, 15px body, 13px meta. One typeface (Verdana, see .ai/style-guide.md). */
body.layout-mobile .sheet-content h1,
body.layout-mobile .sheet-content h2,
body.layout-mobile .sheet-content h3
{
	margin: 0 0 4px;
	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 classic blue of the desktop windows; main actions are buttons (below). */
body.layout-mobile .sheet-content a
{
	color: #000097;
	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: 3px;
	background: #f3e7c4;
	box-shadow: 0 1px 0 rgba(64, 51, 31, 0.2);
	color: #000;
	font-family: inherit;
	font-size: 15px;
	font-weight: normal;
	line-height: 1.2;
	text-decoration: none;
	text-shadow: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

/* Same look as .ui-btn in ui.css: flat parchment, the main action bold with a dark border (never red). */
body.layout-mobile .sheet-content a.action-button.primary,
body.layout-mobile .sheet-content button.primary
{
	border-color: #40331f;
	font-weight: bold;
}

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): one row of 36px buttons, never wrapping. The template ranks the page
   numbers by distance to the current page; the container queries below drop the farthest ones until the row fits
   (the 4 arrows take 156px, each number 40px, or more for 4 and 5 digit numbers). */
body.layout-mobile .sheet-content div.pagelist
{
	flex-wrap: nowrap;
	gap: 4px;
	padding: 4px 0;
}

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

body.layout-mobile .sheet-content div.pagelist span.placeholder
{
	display: none;
}

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

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

/* 1 digit(s): 40px per number */
@container pagelist (max-width: 235px) { body.layout-mobile div.pagelist.digits-1 span.rank-1 { display: none; } }
@container pagelist (max-width: 275px) { body.layout-mobile div.pagelist.digits-1 span.rank-2 { display: none; } }
@container pagelist (max-width: 315px) { body.layout-mobile div.pagelist.digits-1 span.rank-3 { display: none; } }
@container pagelist (max-width: 355px) { body.layout-mobile div.pagelist.digits-1 span.rank-4 { display: none; } }
@container pagelist (max-width: 395px) { body.layout-mobile div.pagelist.digits-1 span.rank-5 { display: none; } }
@container pagelist (max-width: 435px) { body.layout-mobile div.pagelist.digits-1 span.rank-6 { display: none; } }
@container pagelist (max-width: 475px) { body.layout-mobile div.pagelist.digits-1 span.rank-7 { display: none; } }
@container pagelist (max-width: 515px) { body.layout-mobile div.pagelist.digits-1 span.rank-8 { display: none; } }
@container pagelist (max-width: 555px) { body.layout-mobile div.pagelist.digits-1 span.rank-9 { display: none; } }
@container pagelist (max-width: 595px) { body.layout-mobile div.pagelist.digits-1 span.rank-10 { display: none; } }
@container pagelist (max-width: 635px) { body.layout-mobile div.pagelist.digits-1 span.rank-11 { display: none; } }
@container pagelist (max-width: 675px) { body.layout-mobile div.pagelist.digits-1 span.rank-12 { display: none; } }
@container pagelist (max-width: 715px) { body.layout-mobile div.pagelist.digits-1 span.rank-13 { display: none; } }
@container pagelist (max-width: 755px) { body.layout-mobile div.pagelist.digits-1 span.rank-14 { display: none; } }
/* 2 digit(s): 40px per number */
@container pagelist (max-width: 235px) { body.layout-mobile div.pagelist.digits-2 span.rank-1 { display: none; } }
@container pagelist (max-width: 275px) { body.layout-mobile div.pagelist.digits-2 span.rank-2 { display: none; } }
@container pagelist (max-width: 315px) { body.layout-mobile div.pagelist.digits-2 span.rank-3 { display: none; } }
@container pagelist (max-width: 355px) { body.layout-mobile div.pagelist.digits-2 span.rank-4 { display: none; } }
@container pagelist (max-width: 395px) { body.layout-mobile div.pagelist.digits-2 span.rank-5 { display: none; } }
@container pagelist (max-width: 435px) { body.layout-mobile div.pagelist.digits-2 span.rank-6 { display: none; } }
@container pagelist (max-width: 475px) { body.layout-mobile div.pagelist.digits-2 span.rank-7 { display: none; } }
@container pagelist (max-width: 515px) { body.layout-mobile div.pagelist.digits-2 span.rank-8 { display: none; } }
@container pagelist (max-width: 555px) { body.layout-mobile div.pagelist.digits-2 span.rank-9 { display: none; } }
@container pagelist (max-width: 595px) { body.layout-mobile div.pagelist.digits-2 span.rank-10 { display: none; } }
@container pagelist (max-width: 635px) { body.layout-mobile div.pagelist.digits-2 span.rank-11 { display: none; } }
@container pagelist (max-width: 675px) { body.layout-mobile div.pagelist.digits-2 span.rank-12 { display: none; } }
@container pagelist (max-width: 715px) { body.layout-mobile div.pagelist.digits-2 span.rank-13 { display: none; } }
@container pagelist (max-width: 755px) { body.layout-mobile div.pagelist.digits-2 span.rank-14 { display: none; } }
/* 3 digit(s): 40px per number */
@container pagelist (max-width: 235px) { body.layout-mobile div.pagelist.digits-3 span.rank-1 { display: none; } }
@container pagelist (max-width: 275px) { body.layout-mobile div.pagelist.digits-3 span.rank-2 { display: none; } }
@container pagelist (max-width: 315px) { body.layout-mobile div.pagelist.digits-3 span.rank-3 { display: none; } }
@container pagelist (max-width: 355px) { body.layout-mobile div.pagelist.digits-3 span.rank-4 { display: none; } }
@container pagelist (max-width: 395px) { body.layout-mobile div.pagelist.digits-3 span.rank-5 { display: none; } }
@container pagelist (max-width: 435px) { body.layout-mobile div.pagelist.digits-3 span.rank-6 { display: none; } }
@container pagelist (max-width: 475px) { body.layout-mobile div.pagelist.digits-3 span.rank-7 { display: none; } }
@container pagelist (max-width: 515px) { body.layout-mobile div.pagelist.digits-3 span.rank-8 { display: none; } }
@container pagelist (max-width: 555px) { body.layout-mobile div.pagelist.digits-3 span.rank-9 { display: none; } }
@container pagelist (max-width: 595px) { body.layout-mobile div.pagelist.digits-3 span.rank-10 { display: none; } }
@container pagelist (max-width: 635px) { body.layout-mobile div.pagelist.digits-3 span.rank-11 { display: none; } }
@container pagelist (max-width: 675px) { body.layout-mobile div.pagelist.digits-3 span.rank-12 { display: none; } }
@container pagelist (max-width: 715px) { body.layout-mobile div.pagelist.digits-3 span.rank-13 { display: none; } }
@container pagelist (max-width: 755px) { body.layout-mobile div.pagelist.digits-3 span.rank-14 { display: none; } }
/* 4 digit(s): 48px per number */
@container pagelist (max-width: 251px) { body.layout-mobile div.pagelist.digits-4 span.rank-1 { display: none; } }
@container pagelist (max-width: 299px) { body.layout-mobile div.pagelist.digits-4 span.rank-2 { display: none; } }
@container pagelist (max-width: 347px) { body.layout-mobile div.pagelist.digits-4 span.rank-3 { display: none; } }
@container pagelist (max-width: 395px) { body.layout-mobile div.pagelist.digits-4 span.rank-4 { display: none; } }
@container pagelist (max-width: 443px) { body.layout-mobile div.pagelist.digits-4 span.rank-5 { display: none; } }
@container pagelist (max-width: 491px) { body.layout-mobile div.pagelist.digits-4 span.rank-6 { display: none; } }
@container pagelist (max-width: 539px) { body.layout-mobile div.pagelist.digits-4 span.rank-7 { display: none; } }
@container pagelist (max-width: 587px) { body.layout-mobile div.pagelist.digits-4 span.rank-8 { display: none; } }
@container pagelist (max-width: 635px) { body.layout-mobile div.pagelist.digits-4 span.rank-9 { display: none; } }
@container pagelist (max-width: 683px) { body.layout-mobile div.pagelist.digits-4 span.rank-10 { display: none; } }
@container pagelist (max-width: 731px) { body.layout-mobile div.pagelist.digits-4 span.rank-11 { display: none; } }
@container pagelist (max-width: 779px) { body.layout-mobile div.pagelist.digits-4 span.rank-12 { display: none; } }
@container pagelist (max-width: 827px) { body.layout-mobile div.pagelist.digits-4 span.rank-13 { display: none; } }
@container pagelist (max-width: 875px) { body.layout-mobile div.pagelist.digits-4 span.rank-14 { display: none; } }
/* 5 digit(s): 57px per number */
@container pagelist (max-width: 269px) { body.layout-mobile div.pagelist.digits-5 span.rank-1 { display: none; } }
@container pagelist (max-width: 326px) { body.layout-mobile div.pagelist.digits-5 span.rank-2 { display: none; } }
@container pagelist (max-width: 383px) { body.layout-mobile div.pagelist.digits-5 span.rank-3 { display: none; } }
@container pagelist (max-width: 440px) { body.layout-mobile div.pagelist.digits-5 span.rank-4 { display: none; } }
@container pagelist (max-width: 497px) { body.layout-mobile div.pagelist.digits-5 span.rank-5 { display: none; } }
@container pagelist (max-width: 554px) { body.layout-mobile div.pagelist.digits-5 span.rank-6 { display: none; } }
@container pagelist (max-width: 611px) { body.layout-mobile div.pagelist.digits-5 span.rank-7 { display: none; } }
@container pagelist (max-width: 668px) { body.layout-mobile div.pagelist.digits-5 span.rank-8 { display: none; } }
@container pagelist (max-width: 725px) { body.layout-mobile div.pagelist.digits-5 span.rank-9 { display: none; } }
@container pagelist (max-width: 782px) { body.layout-mobile div.pagelist.digits-5 span.rank-10 { display: none; } }
@container pagelist (max-width: 839px) { body.layout-mobile div.pagelist.digits-5 span.rank-11 { display: none; } }
@container pagelist (max-width: 896px) { body.layout-mobile div.pagelist.digits-5 span.rank-12 { display: none; } }
@container pagelist (max-width: 953px) { body.layout-mobile div.pagelist.digits-5 span.rank-13 { display: none; } }
@container pagelist (max-width: 1010px) { body.layout-mobile div.pagelist.digits-5 span.rank-14 { display: none; } }

/* 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 #c9b58a;
	border-radius: 3px;
	background: rgba(255, 250, 232, 0.5);
}

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: 8px;
	margin: 8px 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: 3px;
	background-color: rgba(90, 70, 40, 0.08);
	background-position: 2px center;
	font-size: 13px;
	color: #2c261d;
}

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

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 #8a7550;
	border-radius: 0;
}

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

/* Regiments: one unit tile per row and full-width inputs (the kit sets the 44px tap height).
   The style guide's Verdana and blue links, until the general sheet rules are aligned. */
body.layout-mobile .sheet.squads .sheet-content,
body.layout-mobile .sheet.squads .sheet-content h2,
body.layout-mobile .sheet.squads .sheet-content strong,
body.layout-mobile .sheet.squads .sheet-content label
{
	font-family: Verdana, sans-serif;
}

body.layout-mobile .sheet.squads .sheet-content p a,
body.layout-mobile .sheet.squads .sheet-content .ui-muted a
{
	color: #000097;
}

body.layout-mobile .sheet.squads .squad-unit-tiles,
body.layout-mobile .sheet.squads .ui-columns
{
	display: block;
}

body.layout-mobile .sheet.squads .ui-field input.squad-name-input
{
	width: 100%;
	font-size: 16px;
}

body.layout-mobile .sheet.squads .ui-field .squad-size input
{
	font-size: 16px;
}

body.layout-mobile .sheet.squads .squad-step
{
	min-width: 44px;
}

body.layout-mobile .sheet.squads .squad-quick a,
body.layout-mobile .sheet.squads .squad-back a
{
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* 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: Verdana, Tahoma, Arial, sans-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 #8a7550;
	border-radius: 3px;
}

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

/* Race selection: the start position and clan are folded into a <details>. */
body.layout-mobile details.select-location summary
{
	min-height: 44px;
	line-height: 44px;
	font-weight: bold;
	cursor: pointer;
}

/* The zoom pair sits above the guide card instead of on top of it. */
body.layout-mobile:has(.panel.guide.mobile-chip) .mobile-map-zoom
{
	bottom: calc(var(--mobile-tabbar-height) + 68px);
}

body.layout-mobile:has(.panel.guide.mobile-visible:not(.mobile-chip)) .mobile-map-zoom
{
	display: none;
}

/* Tracker iframes (registration, login) the guide may carry. */
body.layout-mobile .panel.guide iframe
{
	position: absolute;
	width: 0;
	height: 0;
	border: 0;
	visibility: hidden;
}