/*=== Guide Page ==============================================================
The learn-to-play page's looks: the economy report's (see tools/economy/page.js), light or dark as the system is set,
the system font, cards with a fine border, with a touch of gold art deco: serif titles in capitals, gold double rules
and corner brackets, a chevron between the chapters. The site's bar along the top (see topbar.css), always in view, over
the index: a sidebar on a wide screen, and a strip under the bar with a Contents button on a narrow one. The Nomad's
Guide over it all keeps the game's own look (see the end) */

@font-face {
	font-family: "GuideText";
	src: url("/fonts/GARA.TTF");
}

@font-face {
	font-family: "GuideText";
	src: url("/fonts/GARABD.TTF");
	font-weight: bold;
}

@font-face {
	font-family: "GuideText";
	src: url("/fonts/GARAIT.TTF");
	font-style: italic;
}

:root {
	--bar_height: 52px; /* The bar along the top's (see #top_bar), which the page sits under */
	color-scheme: light;
	--page: #f9f9f7;
	--surface-1: #fcfcfb;
	--surface-2: #f1f0ea;
	--text-primary: #0b0b0b;
	--text-secondary: #52514e;
	--muted: #898781;
	--border: rgba(11, 11, 11, 0.10);
	--shadow: rgba(0, 0, 0, 0.12);
	--gold: #b8922a;
	--gold-strong: #8f6f1c;
	--gold-line: rgba(184, 146, 42, 0.55);
	--gold-soft: rgba(184, 146, 42, 0.10);
	--keyword-text: #9a8247; /* A keyword's text, and its box and its box lit under the mouse (tinted slides use their tint) */
	--keyword: rgba(184, 146, 42, 0.08);
	--keyword-lit: rgba(184, 146, 42, 0.20);
	--error: #c0392b;
	--changes: #43A2EF; /* Recent Updates under a slide, and the dot on its row in the index: the Arcforge's blue (see common/library/factions.js) */
	--changes-strong: #1d6aa8;
	--changes-line: rgba(67, 162, 239, 0.55);
	--changes-soft: rgba(67, 162, 239, 0.08);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;
		--page: #0d0d0d;
		--surface-1: #1a1a19;
		--surface-2: #232321;
		--text-primary: #ffffff;
		--text-secondary: #c3c2b7;
		--muted: #898781;
		--border: rgba(255, 255, 255, 0.10);
		--shadow: rgba(0, 0, 0, 0.5);
		--gold: #e4cc6c;
		--gold-strong: #f0dc8a;
		--gold-line: rgba(228, 204, 108, 0.55);
		--gold-soft: rgba(228, 204, 108, 0.10);
		--keyword-text: #e6dcb4;
		--keyword: rgba(228, 204, 108, 0.08);
		--keyword-lit: rgba(228, 204, 108, 0.22);
		--error: #ff6b6b;
		--changes: #43A2EF;
		--changes-strong: #8ec9f7;
		--changes-line: rgba(67, 162, 239, 0.55);
		--changes-soft: rgba(67, 162, 239, 0.10);
	}
}

:root[data-theme="dark"] {
	color-scheme: dark;
	--page: #0d0d0d;
	--surface-1: #1a1a19;
	--surface-2: #232321;
	--text-primary: #ffffff;
	--text-secondary: #c3c2b7;
	--muted: #898781;
	--border: rgba(255, 255, 255, 0.10);
	--shadow: rgba(0, 0, 0, 0.5);
	--gold: #e4cc6c;
	--gold-strong: #f0dc8a;
	--gold-line: rgba(228, 204, 108, 0.55);
	--gold-soft: rgba(228, 204, 108, 0.10);
	--keyword-text: #e6dcb4;
	--keyword: rgba(228, 204, 108, 0.08);
	--keyword-lit: rgba(228, 204, 108, 0.22);
	--error: #ff6b6b;
	--changes: #43A2EF;
	--changes-strong: #8ec9f7;
	--changes-line: rgba(67, 162, 239, 0.55);
	--changes-soft: rgba(67, 162, 239, 0.10);
}

* {
	box-sizing: border-box;
}

html {
	background-color: var(--page);
	color: var(--text-primary);
	font: 18px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}

body {
	margin: 0;
	padding-top: var(--bar_height);
	display: grid;
	grid-template-columns: 230px minmax(0, 1fr);
	min-height: calc(100vh - var(--bar_height));
}

.hidden {
	display: none !important;
}


/*=== Top Bar ================================================================*/

/* Always the same height, so the page knows where it ends. Over the sidebar, under the Nomad's Guide */
#top_bar {
	height: var(--bar_height);
	z-index: 8;
}


/*=== Sidebar ================================================================*/

#sidebar {
	position: sticky;
	top: var(--bar_height);
	z-index: 5;
	height: calc(100vh - var(--bar_height));
	overflow-y: auto;
	padding: 22px 18px;
	background-color: var(--surface-1);
	border-right: 1px solid var(--border);
}

#contents_button {
	display: none;
	font: inherit;
	font-size: 14px;
	color: var(--gold-strong);
	background-color: transparent;
	border: 1px solid var(--gold-line);
	border-radius: 6px;
	padding: 4px 12px;
	cursor: pointer;
}

#contents_button:hover {
	background-color: var(--gold-soft);
}

#index ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

#index a {
	display: block;
	padding: 5px 10px;
	color: var(--text-secondary);
	font-size: 14px;
	text-decoration: none;
	border-left: 2px solid transparent;
	border-radius: 0 6px 6px 0;
}

#index a:hover {
	background-color: var(--gold-soft);
	color: var(--text-primary);
}

/* A chapter: in capitals, as over the chapter on the page, with its rows under it */
#index li.index_chapter_item + li.index_chapter_item {
	margin-top: 10px;
}

#index a.index_chapter {
	padding-top: 4px;
	padding-bottom: 3px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 12.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-secondary);
}

#index li.active > a.index_chapter {
	color: var(--gold-strong);
}

#index a.index_row {
	padding-left: 20px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 15px;
	letter-spacing: 0.02em;
	color: var(--text-primary);
}

#index li.active > a.index_row {
	color: var(--gold-strong);
	border-left-color: var(--gold);
}

/* A row with Recent Updates on its slides: a blue dot after its name */
#index a.index_row.has_changes::after {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-left: 7px;
	vertical-align: 0.15em;
	border-radius: 50%;
	background-color: var(--changes);
}

/* The Nomad's Guide, for a screen with no right click (as the game's guide link, see render/border.js) */
.sidebar_guide {
	margin-top: 20px;
	padding-top: 14px;
	border-top: 1px solid var(--border);
}

#nomad_button {
	width: 100%;
	font: inherit;
	font-family: Georgia, "Times New Roman", serif;
	color: var(--gold-strong);
	background-color: transparent;
	border: 1px solid var(--gold-line);
	border-radius: 6px;
	padding: 6px 12px;
	cursor: pointer;
}

#nomad_button:hover {
	background-color: var(--gold-soft);
}

.sidebar_hint {
	margin: 6px 0 0;
	font-size: 12px;
	color: var(--muted);
	text-align: center;
}


/*=== Chapters ===============================================================*/

/* As wide as its column, up to 1040, in the middle of it (a grid item with auto margins would take its content's
width instead and run off a narrow window) */
main {
	width: 100%;
	max-width: 1040px;
	min-width: 0;
	justify-self: center;
	padding: 28px 32px 120px;
}

.chapter {
	margin-bottom: 44px;
	scroll-margin-top: calc(var(--bar_height) + 20px);
}

/* A chevron between the chapters */
.chapter + .chapter::before {
	content: "";
	display: block;
	width: 120px;
	height: 12px;
	margin: 0 auto 36px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'><path d='M0 11 L12 1 L24 11 M24 11 L36 1 L48 11 M48 11 L60 1 L72 11 M72 11 L84 1 L96 11 M96 11 L108 1 L120 11' fill='none' stroke='%23b8922a' stroke-opacity='0.55' stroke-width='1.2'/></svg>") center / contain no-repeat;
}

.chapter_header {
	margin-bottom: 24px;
}

.chapter_title {
	margin: 0;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 28px;
	font-weight: normal;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-primary);
}

.chapter_subtitle {
	margin: 2px 0 0;
	font-family: Georgia, "Times New Roman", serif;
	font-style: italic;
	color: var(--text-secondary);
}

/* A gold double rule with a diamond in the middle */
.chapter_rule {
	position: relative;
	height: 7px;
	margin-top: 10px;
	border-top: 1px solid var(--gold-line);
	border-bottom: 1px solid var(--gold-line);
}

.chapter_rule::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 9px;
	height: 9px;
	transform: translate(-50%, -50%) rotate(45deg);
	background-color: var(--page);
	border: 1px solid var(--gold);
}


/*=== Rows ===================================================================*/

.row {
	margin-bottom: 32px;
	scroll-margin-top: calc(var(--bar_height) + 20px);
}

.row:last-child {
	margin-bottom: 0;
}

/* The title, a gold line to the buttons, and the buttons (under it all when there's no room) */
.row_header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	margin-bottom: 10px;
}

.row_title {
	margin: 0;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 18px;
	font-weight: normal;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gold-strong);
}

.row_subtitle {
	margin: 0;
	font-family: Georgia, "Times New Roman", serif;
	font-style: italic;
	font-size: 14px;
	color: var(--text-secondary);
}

.row_line {
	flex: 1 1 40px;
	border-top: 1px solid var(--gold-line);
}

.row_controls {
	display: flex;
	align-items: center;
	gap: 10px;
}

.slide_button {
	font: inherit;
	font-size: 13px;
	color: var(--gold-strong);
	background-color: var(--surface-1);
	border: 1px solid var(--gold-line);
	border-radius: 6px;
	padding: 4px 12px;
	cursor: pointer;
}

.slide_button:hover:not(:disabled) {
	background-color: var(--gold-soft);
}

.slide_button:disabled {
	opacity: 0.4;
	cursor: default;
}

/* Toward a slide with Recent Updates: blue, whatever the row's tint (see main.js) */
.slide_button.has_changes:not(:disabled) {
	color: var(--changes-strong);
	border-color: var(--changes-line);
}

.slide_button.has_changes:hover:not(:disabled) {
	background-color: var(--changes-soft);
}

.slide_button.previous::before {
	content: "‹ ";
}

.slide_button.next::after {
	content: " ›";
}

.slide_counter {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.08em;
	color: var(--muted);
}


/*=== Slides =================================================================*/

.slide_track {
	position: relative;
	display: flex;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding: 2px 2px 10px;
	border-radius: 8px;
	outline: none;
	scrollbar-width: none; /* The buttons and the counter show where the track is; a wheel or a swipe still moves it */
}

.slide_track::-webkit-scrollbar {
	display: none;
}

.slide_track:focus-visible {
	box-shadow: 0 0 0 2px var(--gold-line);
}

@media (prefers-reduced-motion: reduce) {
	.slide_track {
		scroll-behavior: auto;
	}
}

/* A step of the track: the slide, and its Recent Updates under it when it has them. The slides of a row are as tall as
the tallest, so their Recent Updates line up along the bottom */
.slide_frame {
	flex: 0 0 100%;
	min-width: 0;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.slide {
	position: relative;
	flex: 1 1 auto;
	padding: 22px 26px 24px;
	background-color: var(--surface-1);
	border: 1px solid var(--border);
	border-radius: 8px;
	box-shadow: 0 1px 2px var(--shadow);
}

/* Gold corner brackets */
.slide::before, .slide::after {
	content: "";
	position: absolute;
	width: 14px;
	height: 14px;
	border: 1px solid var(--gold-line);
	pointer-events: none;
}

.slide::before {
	top: 7px;
	left: 7px;
	border-right: none;
	border-bottom: none;
}

.slide::after {
	right: 7px;
	bottom: 7px;
	border-left: none;
	border-top: none;
}

.slide_title {
	margin: 0 0 4px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 22px;
	font-weight: normal;
	letter-spacing: 0.02em;
	color: var(--text-primary);
}

.slide_subtitle {
	margin: 0 0 12px;
	font-family: Georgia, "Times New Roman", serif;
	font-style: italic;
	color: var(--text-secondary);
}

.slide_title + :not(.slide_subtitle) {
	margin-top: 12px;
}

.slide_heading {
	margin: 24px 0 6px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gold-strong);
}

.slide p {
	margin: 0 0 12px;
}

.paragraph_detail {
	display: block;
	margin: 2px 0 0 16px;
	font-size: 0.9em;
	color: var(--text-secondary);
}

.slide ul, .slide ol {
	margin: 0 0 12px;
	padding-left: 24px;
}

.slide li {
	margin-bottom: 5px;
}

.slide li ul, .slide li ol {
	margin: 4px 0 0;
}

/* Recent Updates: a small card under its slide, blue whatever the slide's tint (its keywords too), with a blue rule
down its left */
.slide_changes {
	--keyword-text: var(--changes-strong);
	--keyword: color-mix(in srgb, var(--changes) 14%, transparent);
	--keyword-lit: color-mix(in srgb, var(--changes) 28%, transparent);
	padding: 10px 18px 6px;
	font-size: 15px;
	background-color: color-mix(in srgb, var(--changes) 5%, var(--surface-1));
	border: 1px solid var(--changes-line);
	border-left: 3px solid var(--changes);
	border-radius: 8px;
	box-shadow: 0 1px 2px var(--shadow);
}

/* Under a slide with no Recent Updates, in a row where others have them: a thin strip pointing to them, a smaller
relative of the card */
.changes_pointer {
	width: 100%;
	padding: 5px 14px;
	font: inherit;
	font-size: 13px;
	text-align: left;
	color: var(--changes-strong);
	background-color: var(--changes-soft);
	border: 1px solid var(--changes-line);
	border-radius: 8px;
	cursor: pointer;
}

.changes_pointer:hover {
	background-color: color-mix(in srgb, var(--changes) 16%, transparent);
}

/* The card's top line: its label, and the arrows to the row's other Recent Updates on the right */
.changes_header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 4px;
}

.changes_steps {
	display: flex;
	gap: 4px;
}

.changes_step {
	width: 22px;
	height: 22px;
	padding: 0;
	font: inherit;
	font-size: 15px;
	line-height: 1;
	color: var(--changes-strong);
	background-color: var(--changes-soft);
	border: 1px solid var(--changes-line);
	border-radius: 5px;
	cursor: pointer;
}

.changes_step:hover:not(:disabled) {
	background-color: color-mix(in srgb, var(--changes) 16%, transparent);
}

.changes_step:disabled {
	opacity: 0.4;
	cursor: default;
}

.changes_label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--changes-strong);
}

.slide_changes ul {
	margin: 0 0 4px;
	padding-left: 20px;
}

.slide_changes li {
	margin-bottom: 4px;
}

.slide_changes li::marker {
	color: var(--changes);
}

.item_detail {
	display: block;
	margin: 2px 0 0;
	font-size: 0.9em;
	color: var(--text-secondary);
}

/* A term of the Nomad's Guide: a click opens its page */
.keyword {
	font: inherit;
	font-weight: 600;
	color: var(--keyword-text);
	background-color: var(--keyword);
	border: none;
	border-radius: 4px;
	padding: 0 4px;
	cursor: pointer;
}

.keyword:hover {
	background-color: var(--keyword-lit);
}

/* A keyword and the text touching it ([City]. or ([Cooldown]:), on one line (see renderInline in render.js) */
.keyword_run {
	white-space: nowrap;
}

a.external {
	color: var(--gold-strong);
}

figure {
	margin: 14px 0;
}

figure img {
	display: block;
	max-width: 100%;
	height: auto;
	border: 1px solid var(--border);
	border-radius: 6px;
}

figcaption {
	margin-top: 6px;
	font-size: 13px;
	color: var(--muted);
}

.note {
	margin: 12px 0;
	padding: 8px 14px;
	border-left: 3px solid var(--gold);
	background-color: var(--gold-soft);
	color: var(--text-secondary);
	font-style: italic;
}

.link_card {
	display: block;
	margin: 12px 0;
	padding: 10px 14px;
	border: 1px solid var(--border);
	border-radius: 8px;
	color: inherit;
	text-decoration: none;
}

.link_card:hover {
	border-color: var(--gold-line);
	background-color: var(--gold-soft);
}

.link_card strong {
	display: block;
	color: var(--gold-strong);
}

.link_card .link_url {
	display: block;
	font-size: 12px;
	color: var(--muted);
}

.table {
	width: 100%;
	margin: 0 0 14px;
	border-collapse: collapse;
	font-size: 14px;
}

.table caption {
	padding: 0 0 6px;
	text-align: left;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gold-strong);
}

.table th {
	padding: 6px 8px;
	text-align: left;
	font-weight: 500;
	color: var(--muted);
	border-bottom: 1px solid var(--gold-line);
}

.table td {
	padding: 6px 8px;
	vertical-align: top;
	border-bottom: 1px solid var(--border);
}

.terms {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: 6px 14px;
	margin: 0 0 12px;
}

.terms dt {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
}

.terms dd {
	margin: 0;
}

.term_icon {
	width: 24px;
	height: 24px;
}

.term_cost {
	font-size: 12px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--gold-strong);
	border: 1px solid var(--gold-line);
	border-radius: 4px;
	padding: 0 6px;
}

/* A row of its own under its term's text (the gap between rows taken back, right under the text), so the term is centered
on the text alone. Set in, with a little room under it before the next term (none after the last) */
.terms .term_detail {
	grid-column: 2;
	margin: -6px 0 6px 8px;
	font-size: 0.9em;
	color: var(--text-secondary);
}

.terms .term_detail:last-child {
	margin-bottom: 0;
}

.facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 10px 20px;
	margin-top: 16px;
	padding-top: 12px;
	border-top: 1px double var(--gold-line);
}

.fact_label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gold-strong);
}

/* A block the page can't show (see render.js) */
.error {
	padding: 8px 12px;
	border: 1px dashed var(--error);
	color: var(--error);
}


/*=== Tints ==================================================================
A chapter, a row or a slide with a tint (a color named in the content, see content/index.js) takes it for its accents
instead of gold: the rules and diamond, the buttons, the brackets, the keywords, the costs and labels. The strong
shade leans toward the text color, so a dark tint reads on a dark page and a light one on a light page */

.chapter.tinted, .row.tinted, .slide.tinted, #index a.index_row.tinted {
	--gold: var(--tint);
	--gold-strong: color-mix(in srgb, var(--tint) 75%, var(--text-primary));
	--gold-line: color-mix(in srgb, var(--tint) 60%, transparent);
	--gold-soft: color-mix(in srgb, var(--tint) 10%, transparent);
	--keyword-text: var(--gold-strong);
	--keyword: color-mix(in srgb, var(--tint) 16%, transparent);
	--keyword-lit: color-mix(in srgb, var(--tint) 32%, transparent);
}

.slide.tinted {
	border-color: color-mix(in srgb, var(--tint) 35%, var(--border));
	background-color: color-mix(in srgb, var(--tint) 5%, var(--surface-1));
}

.slide.tinted .slide_title {
	color: var(--gold-strong);
}

/* A tinted row in the index: its name in its color, lit and marked in it too */
#index a.index_row.tinted {
	color: var(--gold-strong);
}


/*=== Narrow Screens =========================================================*/

@media screen and (max-width: 800px) {
	body {
		display: block;
	}

	#sidebar {
		height: auto;
		max-height: calc(100vh - var(--bar_height)); /* An open index scrolls in the strip, under the bar */
		padding: 10px 16px;
		border-right: none;
		border-bottom: 1px solid var(--border);
	}

	#contents_button {
		display: inline-block;
	}

	#index, .sidebar_guide {
		display: none;
		margin-top: 12px;
	}

	body.contents_open #index, body.contents_open .sidebar_guide {
		display: block;
	}

	main {
		margin: 0 auto;
		padding: 20px 16px 80px;
	}

	.chapter_title {
		font-size: 22px;
	}

	.row_title {
		font-size: 16px;
	}

	.slide {
		padding: 16px 18px 20px;
	}

	.slide_changes {
		padding: 8px 14px 4px;
	}

	.terms {
		grid-template-columns: 1fr;
		gap: 2px 0;
	}

	.terms dd {
		margin-bottom: 8px;
	}

	/* The detail right under its text */
	.terms dd:has(+ .term_detail) {
		margin-bottom: 0;
	}

	.terms .term_detail {
		grid-column: 1;
		margin: -2px 0 14px 8px;
	}

	.terms .term_detail:last-child {
		margin-bottom: 8px;
	}

	/* Under the bar along the top and the Contents strip */
	.chapter, .row {
		scroll-margin-top: calc(var(--bar_height) + 64px);
	}
}


/*=== The Nomad's Guide ======================================================
The guide over the page (see nomad.js), drawn as the game draws it (see render/guide.js and render/assets.js): the
page on its parchment, 834 by 1251 of the game's units, in a black trim 20 wide with a shadow; the title in Georgia at
88, the text in the game's font at 42 on lines 44 apart, its keywords boxed; the button back a page in the corner; and
the search box along the bottom (as index.css has it). The units are scaled by the panel's width: --unit is one */

body.nomad_open {
	overflow: hidden;
}

#nomad {
	position: fixed;
	inset: 0;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-bottom: 70px;
	background-color: #00000066;
}

.nomad_panel {
	position: relative;
	container-type: inline-size;
	width: min(874px, 96vw, calc((100vh - 150px) * 874 / 1291));
	aspect-ratio: 874 / 1291;
	background-color: #000000;
	box-shadow: 10px 10px 0 #444444BF;
	--unit: calc(100cqw / 874);
}

.nomad_page {
	position: absolute;
	inset: calc(20 * var(--unit));
	background: url("/assets/page_back.png") center / 100% 100% no-repeat;
	color: #444444;
	font-family: "GuideText", Garamond, Georgia, serif;
	font-size: calc(42 * var(--unit));
	line-height: calc(44 * var(--unit));
}

.nomad_title {
	position: absolute;
	top: calc(19 * var(--unit));
	left: calc(20 * var(--unit));
	right: calc(20 * var(--unit));
	margin: 0;
	font-family: Georgia, serif;
	font-size: calc(88 * var(--unit));
	font-weight: normal;
	line-height: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.nomad_body {
	position: absolute;
	top: calc(121 * var(--unit));
	left: calc(20 * var(--unit));
	right: calc(20 * var(--unit));
	bottom: calc(30 * var(--unit));
	overflow-y: auto;
	overscroll-behavior: contain;
	cursor: default;
	scrollbar-width: none; /* A long page scrolls, but shows no bar (the game's page has none) */
}

.nomad_body::-webkit-scrollbar {
	display: none;
}

/* A line of the entry, then a blank one */
.nomad_p {
	margin: 0 0 calc(44 * var(--unit));
}

.nomad_line {
	display: block;
}

.nomad_note {
	font-style: italic;
}

.nomad_bullet {
	padding-left: calc(24 * var(--unit));
}

.nomad_body b {
	font-weight: bold;
}

/* A keyword that opens its topic: boxed, lit under the mouse */
.nomad_keyword {
	font: inherit;
	font-weight: bold;
	line-height: inherit;
	color: inherit;
	background-color: #FFFFFF44;
	border: none;
	border-radius: 0;
	margin: 0;
	padding: 0 calc(4 * var(--unit));
	cursor: pointer;
}

.nomad_keyword:hover {
	background-color: #FFFFFFAA;
}

.nomad_link {
	color: inherit;
}

.nomad_back {
	position: absolute;
	top: calc(15 * var(--unit));
	right: calc(15 * var(--unit));
	width: calc(80 * var(--unit));
	height: calc(80 * var(--unit));
	font-size: calc(56 * var(--unit));
	line-height: 1;
	color: #444444;
	background-color: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
	cursor: pointer;
}

.nomad_back:hover {
	background-color: #FFFFFF22;
}

.nomad_search {
	position: fixed;
	top: 95%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	padding: 10px 10px;
	background-color: #000000DD;
	border: 2px solid #E2CCB4;
	border-radius: 5px;
	text-align: center;
}

.nomad_search input {
	font-family: "Book Antiqua", Times, serif;
	font-size: 18px;
	outline: none;
	border: none;
	padding: 3px;
	text-align: center;
	background-color: #CCCCCCAA;
}