/*
 * Base styles: typography, tables, forms, helpers.
 * Values follow the original stamm.css of the game.
 */
:root {
	--bg: #d2c09e;
	--paper: #f1ebdd;
	--paper2: #f7eed3;
	/* Quick bar and village bar: the parchment tone of the content */
	--bar: #f4e5c3;
	--paper3: #fbf4dd;
	--row-a: #f6ebca;
	--row-b: #fbf4dd;
	--th: #dfcca6;
	--sel: #f0d49a;
	--border: #ded3b9;
	--brown: #804000;
	--dark: #552a00;
	--link: #804000;
	--hover: #0082be;
	--red: rgb(180, 0, 0);
	--warn: rgb(220, 0, 0);
	--green: #0a7a2a;
	--inactive: #c5a76b;
	--touch: 40px;
	--edge-light: #ffeecc;
	--edge-light2: #ffdd99;
	--edge-dark: #997733;
	--edge-dark2: #bb9955;
}
* { box-sizing: border-box; }
html { font-size: 9pt; }
/*
 * Modern pack: the live game's parchment picture behind the page, no
 * dark strip at the top.
 */
body.modern {
	background: #d5c4a1 var(--bg-main, none) no-repeat center top;
}
body.modern .top_background { display: none; }

body {
	margin: 0;
	font: 9pt/1.35 Verdana, Arial, Helvetica, sans-serif;
	color: #000;
	background: var(--bg) var(--bg-tile, none);
}
a:link, a:visited { color: var(--link); font-weight: bold; text-decoration: none; }
a:hover, a:active { color: var(--hover); }
img { border: 0; }
img.middle { vertical-align: middle; }
h1 { font-size: 16pt; margin: 0 0 8px; }
h2 { font-size: 14pt; margin: 0 0 8px; }
h3 { font-size: 12pt; font-weight: bold; margin: 10px 0 6px; }
h4 { font-size: 10pt; font-weight: bold; font-style: italic; margin: 8px 0 4px; }
h5 { font-size: 10pt; font-weight: bold; margin: 6px 0 2px; }
p { margin: 6px 0; }
hr {
	border-color: var(--edge-dark) transparent var(--edge-light) transparent;
	border-width: 1px 0;
	border-style: solid;
}
small, .small { font-size: 8pt; }
.grey, .dim { color: gray; }
.hidden { color: var(--border); }
.warn { color: var(--warn); font-weight: bold; }
.inactive { color: var(--inactive); }
.c { text-align: center; }
.r { text-align: right; }
.nowrap { white-space: nowrap; }
.sr-only {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap;
}

/* Tables */
table { border-collapse: separate; border-spacing: 1px; font-size: 9pt; }
th { font-size: 9pt; text-align: left; font-weight: bold; background: var(--th); padding: 2px 4px; }
td { font-size: 9pt; padding: 2px 4px; }
table.vis td { background: var(--paper2); }
table.vis td.selected { background: var(--sel); }
table.vis td.no_bg { background: transparent; }
table.vis tr.lit td { font-weight: bold; background: var(--sel); }
table.vis tr.lit2 td { background: #f4e3b6; }
table.vis tr.row_a td { background: var(--row-a); }
table.vis tr.row_b td { background: var(--row-b); }
table.vis tr.center td { text-align: center; }
table.vis.full { width: 100%; }
table.blind { border-spacing: 0; }
table.blind td { padding: 0; }
table.box {
	background: var(--paper2);
	border: 1px solid;
	border-color: var(--edge-dark) var(--edge-light2) var(--edge-light) var(--edge-dark2);
	vertical-align: middle;
}
table.box td { white-space: nowrap; }
.scroll-x { overflow-x: auto; max-width: 100%; }

/* Forms */
input, select, textarea, button {
	font: 8pt Verdana, Arial, sans-serif;
}
input[type=text], input[type=password], input[type=number], select, textarea {
	border: 1px solid var(--edge-dark);
	background: #fff;
	padding: 2px 3px;
}
input[type=submit], button {
	background: linear-gradient(var(--paper2), var(--th));
	border: 1px solid var(--edge-dark);
	padding: 2px 8px;
	cursor: pointer;
	color: var(--dark);
	font-weight: bold;
}
input[type=submit]:hover, button:hover { background: var(--sel); }
/* Attack and support, on the rally point and its confirmation */
input.attack, input.support {
	font-size: 11pt; font-weight: bold; padding: 5px 16px;
	color: #fff; border: 1px solid #000; border-radius: 3px;
}
input.attack { background: #c8201a; }
input.attack:hover { background: #e0342c; }
input.support { background: #1f8f2e; }
input.support:hover { background: #2aa93b; }
input.small { width: 55px; }
input.check { margin: 0 5px 0 0; }
textarea { width: 100%; }
form { margin: 0; }

/* Messages */
.error {
	color: var(--red); font-weight: bold;
}
div.error {
	background: #f8d7da; border: 1px solid var(--red); padding: 4px 8px; margin: 6px 0;
}
div.ok {
	background: #d7f0dc; border: 1px solid var(--green); color: #063;
	padding: 4px 8px; margin: 6px 0; font-weight: bold;
}
/* The farm assistant's note next to a clicked template button */
.farm-pop {
	position: absolute; z-index: 50; white-space: nowrap;
	padding: 3px 8px; font-weight: bold; font-size: 11px;
	border: 1px solid; border-radius: 3px;
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
	transition: opacity 0.6s; pointer-events: none;
}
.farm-pop.ok { background: #d7f0dc; border-color: var(--green); color: #063; }
.farm-pop.error { background: #f8d7da; border-color: var(--red); color: var(--red); }
.farm-pop.fade { opacity: 0; }
button.farm-off { opacity: 0.45; }
/* The groups box of the overview: the remove cross, the add row */
.ov-group-x { color: var(--red); font-weight: bold; padding: 0 3px; }
.ov-group-add { margin-top: 4px; white-space: nowrap; }
.ov-group-add select { max-width: 60%; }
/* Troop manager: count at home over the target, per unit column */
.am-troops td.am-unit { white-space: nowrap; line-height: 1.15; }
.am-troops td.am-unit small { color: var(--green); }
.am-troops .am-full b { color: var(--green); }
.am-troops td.am-vil, .am-troops td.am-act { white-space: nowrap; }
.am-troops td.am-buf div { white-space: nowrap; line-height: 1.3; }
/* The group symbols to pick from (groups screen) */
label.gico { display: inline-block; margin: 2px 8px 2px 0; white-space: nowrap; }
.rule-row { margin: 3px 0; }
label.gico img { vertical-align: middle; }

/*
 * Icons: every picture at its native size. The original packs mix
 * 16 px building icons, 18 px unit and resource icons, 14 px command
 * icons and 10 px dots; forcing 18x18 blurred the small ones.
 */
img.icon { vertical-align: middle; }
img.icon.big { width: 48px; height: 48px; }
img.icon.huge { width: 96px; height: 96px; }
/* Report dots and status icons (10x10 in the pack) */
img.dot { vertical-align: middle; }
/* Big building picture (big_buildings/, 42 to 143 px wide) at its
 * native size; no max-width, a percentage would collapse it inside
 * the auto-width table cell of the building pages */
img.bld-big { vertical-align: top; }
/* Mid-size building picture (buildings/mid/, 35 px wide) in front of a
 * two-line list entry as in the main building of the current game */
img.bld-mid { float: left; margin: 0 8px 0 0; }
/* Unit portrait (unit_big/, 60x60) */
img.unit-big { width: 60px; height: 60px; vertical-align: middle; }

/* Layout helpers used by screens */
.cols { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; }
.cols > * { flex: 1 1 300px; min-width: 0; }
.tabs { margin: 0 0 8px; }
.tabs a, .tabs span {
	display: inline-block; padding: 2px 10px; margin-right: 1px;
	background: var(--paper2); border: 1px solid var(--border);
}
.tabs span.active { background: var(--sel); font-weight: bold; }
.pager { margin: 6px 0; }
.pager a, .pager b { margin-right: 4px; }
.badge {
	background: var(--red); color: #fff; border-radius: 8px;
	padding: 0 5px; font-size: 8pt; vertical-align: middle;
}
blockquote.quote {
	border-left: 3px solid var(--edge-dark); margin: 4px 0; padding: 2px 8px;
	background: var(--paper3);
}
table.quote td.quote_author { font-weight: bold; font-size: 8pt; }
table.quote td.quote_message { background: #fff; font-size: 8pt; }
pre { background: var(--paper3); padding: 6px; border: 1px solid var(--border); overflow-x: auto; }
.bar { display: inline-block; height: 10px; background: #fff; border: 1px solid #000; }
.bar > span { display: block; height: 100%; background: var(--green); }
/* Share of the world towards the victory, per tribe in the ranking */
.win-cell { white-space: nowrap; }
.win-bar { display: inline-block; vertical-align: middle; width: 120px; height: 10px; background: #fff; border: 1px solid #603000; }
.win-bar > span { display: block; height: 100%; background: #c0392b; }
.win-bar.win-done > span { background: #d4a017; }
.server_info { font-size: 7pt; margin: 8px 0 0; text-align: right; color: #666; }

/* Mass command: narrow unit fields, the icon only on phones */
.place-multi input.small { width: 44px; }
.place-multi .pm-ico { display: none; }
.place-multi td.pm-unit small { display: block; }

/* Village manager list: the queue narrow, one order per line */
.am-queue { font-size: 11px; line-height: 1.3; white-space: nowrap; }
.am-next { white-space: nowrap; }

/* Tribe log: a village won or lost stands out */
.log-won { color: #2a7a1e; font-weight: bold; }
.log-lost { color: #b31c1c; font-weight: bold; }