@import url('https://fonts.googleapis.com/css2?family=MedievalSharp&family=Cinzel:wght@600;700&family=Metamorphous&family=Alegreya:ital,wght@0,400;0,700;1,400&display=swap');

:root {
	--wood-dark: #1c1006;
	--wood: #2c1a0c;
	--wood-light: #4a2f18;
	--nav-dark: #0e0a06;
	--nav-darker: #050403;
	--parchment: #ecdcb2;
	--parchment-dark: #ddc794;
	--row-alt: #e3d0a1;
	--border-brown: #6b4423;
	--border-brown-dark: #3d2811;
	--header-red: #8a3d15;
	--header-red-dark: #5c2a0e;
	--gold: #e8c468;
	--gold-bright: #f6dfa0;
	--ink: #3a2410;
	--ink-link: #7a2c10;
	--title-maroon: #6b1420;
	--title-maroon-dark: #4a0d16;
	--good: #2e7d32;
	--bad: #a11;
}

* {
	box-sizing: border-box;
}

/* Rules like `.box textarea { display: block }` would otherwise override the
   `hidden` attribute (used by the news editor to swap views). */
[hidden] {
	display: none !important;
}

html {
	background: #0a0603;
	/* NOTE: Phones show the page like a PC (1000px wide, see the viewport in
	   _header.tmpl); this keeps them from enlarging the text on their own. */
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}
body {
	margin: 0;
	padding: 0;
	color: var(--parchment);
	font-family: 'Alegreya', Georgia, "Times New Roman", serif;
	font-size: 16px;
	line-height: 1.3;
}

/* The background stays still behind the page. It is a fixed layer instead of
   `background-attachment: fixed`, which iOS Safari ignores (there the picture
   was stretched over the whole height of the page). */
body::before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	background: linear-gradient(rgba(10, 6, 3, 0.72), rgba(10, 6, 3, 0.82)), url("/res/img/background.webp");
	background-size: cover;
	background-position: center top;
}

form {
	margin: 0;
}

a {
	color: var(--gold-bright);
	text-decoration: none;
}
a:hover {
	color: #fff;
	text-decoration: underline;
}

.page {
	max-width: 960px;
	margin: 0 auto;
	padding: 0 12px 40px 12px;
}

/* Header / logo */
.site-header {
	position: relative;
	padding: 28px 10px 18px 10px;
	margin-bottom: 24px;
	text-align: center;
}
.site-header::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: linear-gradient(to right, transparent, var(--gold) 12%, var(--gold-bright) 50%, var(--gold) 88%, transparent);
}
.site-header::after {
	content: "\2694";
	position: absolute;
	left: 50%;
	bottom: -12px;
	transform: translateX(-50%);
	color: var(--gold-bright);
	font-size: 1.1em;
	line-height: 1;
	text-shadow: 0 0 5px rgba(0, 0, 0, 0.9), 0 0 3px rgba(0, 0, 0, 0.9);
}

.site-logo {
	font-family: 'MedievalSharp', serif;
	font-size: 3em;
	letter-spacing: 2px;
	text-shadow: 2px 2px 0 #000, 0 0 18px rgba(232, 196, 104, 0.5);
	margin: 0;
}
.site-logo a {
	display: inline-block;
	color: var(--gold-bright);
}
.site-logo a:hover {
	text-decoration: none;
}

.site-tagline {
	color: var(--parchment-dark);
	font-style: italic;
	margin-top: 4px;
}

/* Top nav - dark banner with animated gold trim */
.top-nav {
	position: relative;
	margin-bottom: 28px;
	padding-top: 3px;
	padding-bottom: 3px;
	background:
		repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 9px),
		linear-gradient(var(--nav-dark), var(--nav-darker));
	box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6), inset 0 -2px 6px rgba(0, 0, 0, 0.6), 0 4px 10px rgba(0, 0, 0, 0.4);
	text-align: center;
}
.top-nav::before,
.top-nav::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 3px;
	background-color: var(--gold);
}
.top-nav::before {
	top: 0;
	background-color: var(--gold-bright);
}
.top-nav::after {
	bottom: 0;
}
.top-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}
.top-nav li {
	position: relative;
}
.top-nav a,
.top-nav span.nav-label {
	display: block;
	padding: 12px 20px;
	color: var(--gold);
	font-family: 'Metamorphous', Georgia, serif;
	font-weight: 400;
	font-size: 14px;
	letter-spacing: 0.5px;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.6);
	cursor: pointer;
	transition: color 0.2s ease, text-shadow 0.2s ease;
}
.top-nav li:hover > a,
.top-nav li:hover > span.nav-label,
.top-nav li:focus-within > span.nav-label {
	color: var(--gold-bright);
	text-shadow: 0 0 6px var(--gold-bright), 0 0 16px var(--gold), 1px 1px 0 rgba(0, 0, 0, 0.6);
	text-decoration: none;
}
/* NOTE: Touch screens have no hover, so tapping a menu name (focusable with
   tabindex) opens its list too; tapping anywhere else closes it. */
.top-nav span.nav-label:focus {
	outline: none;
}
.top-nav .dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 190px;
	background: var(--nav-dark);
	border: 2px solid var(--gold);
	border-top: none;
	z-index: 10;
	opacity: 0;
	visibility: hidden;
	transform-origin: top center;
	transform: scaleY(0.85) translateY(-6px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.top-nav li:hover .dropdown,
.top-nav li:focus-within .dropdown {
	opacity: 1;
	visibility: visible;
	transform: scaleY(1) translateY(0);
}
.top-nav .dropdown a {
	padding: 10px 16px;
	text-align: left;
	white-space: nowrap;
	border-bottom: 1px solid rgba(232, 196, 104, 0.2);
	transition: color 0.2s ease, text-shadow 0.2s ease;
}
.top-nav .dropdown a:hover {
	color: var(--gold-bright);
	text-shadow: 0 0 6px var(--gold-bright), 0 0 14px var(--gold);
}

/* Content boxes */
.box {
	background: var(--parchment);
	color: var(--ink);
	border: 3px solid var(--border-brown);
	border-radius: 4px;
	margin: 22px 0;
	padding: 0 16px 16px 16px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
	overflow: hidden;
}
.box h1 {
	margin: 0 -16px 14px -16px;
	padding: 10px 16px;
	background: linear-gradient(var(--header-red), var(--header-red-dark));
	color: var(--gold-bright);
	font-family: 'Metamorphous', Georgia, serif;
	font-size: 1.05em;
	letter-spacing: 0.02em;
	font-weight: 400;
	text-shadow: 1px 1px 0 #000;
}
.box h1 a {
	color: var(--gold-bright);
}
.box h2 {
	font-family: 'Metamorphous', Georgia, serif;
	font-size: 1em;
	letter-spacing: 0.02em;
	font-weight: 400;
	margin: 0 0 4px 0;
	color: var(--title-maroon);
}
.box h2 a {
	color: var(--title-maroon);
	text-decoration: none;
}
/* Parts of a page inside its single box (About, Downloads, ...) */
.box h2.section-title {
	margin: 22px 0 8px 0;
	padding-bottom: 4px;
	border-bottom: 1px solid var(--parchment-dark);
	font-size: 1.05em;
}
.box h2 a:hover {
	color: var(--title-maroon-dark);
}

.section-divider {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 2px solid var(--gold);
}

.character-comment {
	font-style: italic;
	color: var(--wood-light);
}

/* Sortable table headers */
th a {
	color: inherit;
	text-decoration: none;
}
th a:hover {
	text-decoration: underline;
}

/* Links inside parchment boxes need a dark color; the bright gold used
   elsewhere is nearly invisible on the light parchment background. */
.box a {
	color: var(--ink-link);
	text-decoration: underline;
}
.box a:hover {
	color: var(--header-red);
}
.box h1 a:hover {
	color: #fff;
}

.box label {
	margin: 16px 0px 4px 0px;
	display: block;
	font-weight: bold;
	font-family: 'Metamorphous', Georgia, serif;
	font-size: 0.85em;
	color: var(--wood-light);
}

.box input[type=text],
.box input[type=password],
.box input[type=number],
.box textarea,
.box select {
	width: 100%;
	max-width: 380px;
	padding: 6px 8px;
	display: block;
	border-radius: 4px;
	border: 1px solid var(--border-brown);
	background: #fff8e8;
	color: var(--ink);
	font-size: 1em;
	font-family: inherit;
}
.box textarea {
	max-width: 100%;
	resize: vertical;
}

.box input[type=submit],
a.button {
	box-sizing: border-box;
	width: 180px;
	height: 30px;
	padding: 0 10px;
	margin: 14px 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	line-height: 1;
	border-radius: 4px;
	border: 1px solid var(--border-brown-dark);
	background: linear-gradient(var(--header-red), var(--header-red-dark));
	color: var(--gold-bright);
	font-family: 'Metamorphous', Georgia, serif;
	font-weight: 600;
	font-size: 0.85em;
	cursor: pointer;
	text-decoration: none;
}
.box input[type=submit]:hover,
a.button:hover {
	filter: brightness(1.15);
	text-decoration: none;
}
.box a.button,
.box a.button:hover {
	color: var(--gold-bright);
}

table {
	width: 100%;
	border-collapse: collapse;
	margin: 10px 0;
}
table caption {
	caption-side: top;
	text-align: left;
	background: linear-gradient(var(--wood-light), var(--wood));
	color: var(--gold-bright);
	font-family: 'Metamorphous', Georgia, serif;
	font-weight: 400;
	font-size: 0.9em;
	letter-spacing: 0.3px;
	padding: 7px 12px;
}

/* Fixed column widths so switching filters (different label/number lengths)
   doesn't reflow the whole table. */
.highscores-table {
	table-layout: fixed;
}
.highscores-table th:nth-child(1) {
	width: 10%;
}
.highscores-table th:nth-child(2) {
	width: 32%;
}
.highscores-table th:nth-child(3) {
	width: 20%;
}
.highscores-table th:nth-child(4) {
	width: 13%;
}
.highscores-table th:nth-child(5) {
	width: 25%;
}
.highscores-table td {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.houses-table {
	table-layout: fixed;
}
.houses-table th:nth-child(1) {
	width: 38%;
}
.houses-table th:nth-child(2) {
	width: 16%;
}
.houses-table th:nth-child(3) {
	width: 10%;
}
.houses-table th:nth-child(4) {
	width: 36%;
}
th,
td {
	text-align: left;
	padding: 6px 8px;
	border-bottom: 1px solid var(--parchment-dark);
	border-right: 1px solid var(--parchment-dark);
	word-break: break-word;
}
th:last-child,
td:last-child {
	border-right: none;
}
th {
	color: var(--wood-light);
	font-size: 0.82em;
}
table.info th {
	width: 35%;
}
/* Header row of listing tables (not the .info key/value tables) is always
   dark brown, so it stands out consistently above the alternating rows. */
table:not(.info) th {
	background: var(--row-alt);
	color: var(--wood-light);
}
/* Alternate row shading. The header row (position 1) is already shaded via
   the `th` rule above, so data rows start light right after it, then
   alternate: row 1 light, row 2 shaded, row 3 light, ... */
tbody tr:nth-child(odd) td,
tbody tr:nth-child(odd) th {
	background: var(--row-alt);
}

td.row-actions {
	display: flex;
	gap: 12px;
	align-items: center;
}
td.row-actions form {
	margin: 0;
}
td.row-actions input[type=submit],
td.row-actions a.button {
	margin: 0;
}

/* Filter forms (e.g. Highscores) */
.filter-form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 14px;
	margin-bottom: 20px;
	padding-bottom: 18px;
	border-bottom: 2px solid var(--gold);
}
.filter-field {
	display: flex;
	flex-direction: column;
}
.filter-field label {
	margin: 0 0 4px 0;
}
.filter-form select {
	width: auto;
	min-width: 140px;
}
.filter-form input[type=submit] {
	margin: 0;
}
.bid-form select,
.bid-form input[type=number] {
	width: 180px;
	min-width: 0;
	height: 38px;
	box-sizing: border-box;
	margin: 0;
	padding: 6px 8px;
	font-size: 1em;
	font-family: inherit;
}

.good {
	color: var(--good);
	font-weight: bold;
}
.bad {
	color: var(--bad);
	font-weight: bold;
}
.bidding {
	color: #a86a00;
	font-weight: bold;
}

.alert {
	margin: 12px 0;
	padding: 10px 14px;
	border: 2px solid;
	font-weight: bold;
}
.alert.alert-error {
	color: #7a1c1c;
	background: #f6d9d3;
	border-color: #a83a2c;
}
.alert.alert-success {
	color: #1f5a1f;
	background: #dcecd0;
	border-color: #4a8a3a;
}

/* News */
.news-entry {
	padding: 16px 0 30px 0;
}
.news-entry:first-child {
	padding-top: 4px;
}
.news-entry:last-child {
	padding-bottom: 0;
}

/* Ornamental manuscript-style divider between entries, instead of a plain line. */
.news-entry:not(:last-child) {
	position: relative;
}
.news-entry:not(:last-child)::before {
	content: "";
	position: absolute;
	left: 6%;
	right: 6%;
	bottom: 9px;
	height: 2px;
	background: linear-gradient(to right, transparent, var(--gold) 15%, var(--title-maroon) 50%, var(--gold) 85%, transparent);
}
.news-entry:not(:last-child)::after {
	content: "\2694";
	position: absolute;
	left: 50%;
	bottom: -2px;
	transform: translateX(-50%);
	background: var(--parchment);
	padding: 0 16px;
	color: var(--title-maroon);
	font-size: 1.2em;
	line-height: 1;
}

.news-title-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
	padding-bottom: 10px;
	margin-bottom: 14px;
	border-bottom: 2px solid var(--gold);
}
.news-title-row h2 {
	margin: 0;
}
.news-date {
	flex-shrink: 0;
	font-size: 0.78em;
	color: var(--wood-light);
	font-style: italic;
	white-space: nowrap;
}
.news-body p {
	margin: 0 0 10px 0;
}
.news-body .news-heading {
	font-family: 'Metamorphous', Georgia, serif;
	font-size: 1.05em;
	color: var(--title-maroon);
	margin: 16px 0 8px 0;
}
.news-body .news-center {
	text-align: center;
}
.news-body .news-quote {
	margin: 0 0 10px 0;
	padding: 8px 14px;
	border-left: 4px solid var(--border-brown);
	background: var(--row-alt);
	font-style: italic;
}
.news-body .news-quote p:last-child,
.news-body .news-list li p {
	margin: 0;
}
.news-body .news-list {
	margin: 0 0 10px 0;
	padding-left: 24px;
}
.news-body .news-image {
	max-width: 100%;
	height: auto;
	border: 2px solid var(--border-brown);
	border-radius: 3px;
	vertical-align: middle;
}

/* Admin news editor (res/js/news-editor.js) */
.editor-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	padding: 6px;
	border: 1px solid var(--border-brown);
	border-bottom: none;
	border-radius: 4px 4px 0 0;
	background: var(--parchment-dark);
}
.editor-toolbar button {
	min-width: 32px;
	padding: 4px 9px;
	border: 1px solid var(--border-brown);
	border-radius: 3px;
	background: #fff8e8;
	color: var(--ink);
	font-family: inherit;
	font-size: 0.9em;
	cursor: pointer;
}
.editor-toolbar button:hover {
	background: var(--gold-bright);
}
.editor-toolbar button.active {
	background: var(--header-red);
	border-color: var(--header-red-dark);
	color: var(--gold-bright);
}
.editor-sep {
	width: 1px;
	align-self: stretch;
	margin: 0 4px;
	background: var(--border-brown);
	opacity: 0.5;
}
.editor-status {
	margin-left: auto;
	font-size: 0.85em;
	font-style: italic;
	color: var(--wood-light);
}
.editor-status.error {
	color: var(--bad);
}
.box .editor-toolbar + textarea {
	border-radius: 0 0 4px 4px;
}
.editor-surface {
	min-height: 260px;
	max-height: 70vh;
	overflow-y: auto;
	padding: 10px 12px;
	border: 1px solid var(--border-brown);
	border-radius: 0 0 4px 4px;
	background: #fff8e8;
	color: var(--ink);
	outline: none;
}
.editor-surface:focus {
	box-shadow: 0 0 0 2px var(--gold);
}
.editor-surface img {
	max-width: 100%;
	height: auto;
}
.editor-surface img.importing {
	opacity: 0.4;
}
.editor-color {
	width: 34px;
	height: 28px;
	padding: 1px 2px;
	border: 1px solid var(--border-brown);
	border-radius: 3px;
	background: #fff8e8;
	cursor: pointer;
}
.editor-toolbar button:disabled,
.editor-color:disabled {
	opacity: 0.4;
	cursor: default;
}
.box textarea.editor-code {
	min-height: 260px;
	font-family: Consolas, "Courier New", monospace;
	font-size: 0.9em;
}
.editor-help {
	margin: 6px 0 0 0;
	font-size: 0.85em;
	font-style: italic;
	color: var(--wood-light);
}

/* Pagination */
.pagination {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 2px solid var(--gold);
}
.pagination a.button {
	margin: 0;
}
.pagination-status {
	color: var(--wood-light);
	font-style: italic;
	font-size: 0.9em;
}

/* Archive list: compact date + title rows */
.archive-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.archive-list li {
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding: 10px 8px;
	border-bottom: 1px dashed var(--parchment-dark);
}
.archive-list li:nth-child(even) {
	background: var(--row-alt);
}
.archive-list li:last-child {
	border-bottom: none;
}
.archive-list .news-date {
	flex-shrink: 0;
	min-width: 110px;
	font-size: 1em;
	font-style: normal;
	color: var(--ink);
}
.archive-list a {
	color: var(--ink-link);
	text-decoration: underline;
}
.archive-list a:hover {
	color: var(--header-red);
}

/* Footer */
.site-footer {
	text-align: center;
	padding: 20px 0 10px 0;
	color: var(--parchment-dark);
	font-size: 0.8em;
}
.site-footer a {
	color: var(--parchment-dark);
	text-decoration: underline;
}
.site-footer a:hover {
	color: var(--gold-bright);
}


/* Guilds */
.guild-table td.guild-logo {
	width: 70px;
	text-align: center;
}
.guild-table td.guild-action {
	width: 190px;
	text-align: center;
	white-space: nowrap;
}
.guild-table td.guild-action a.button {
	margin: 0;
}
.guild-emblem {
	display: block;
	margin: 0 auto;
}
.box form label {
	display: block;
	margin: 10px 0 4px 0;
}
.filter-form label {
	margin: 0 0 4px 0;
}

.guild-emblem-img {
	display: block;
	margin: 0 auto;
	max-width: 64px;
	max-height: 64px;
}
.guild-logo-big {
	float: right;
	max-width: 128px;
	max-height: 128px;
	margin: 0 0 10px 16px;
}
.inline-form {
	display: inline;
	margin: 0;
}
.inline-form input[type=text] {
	display: inline-block;
	width: 130px;
	padding: 3px 6px;
}
td.row-actions {
	white-space: nowrap;
}
.small-button {
	margin: 0 !important;
}
.guild-admin {
	margin-top: 22px;
	padding-top: 14px;
	border-top: 2px solid var(--gold);
}

.button-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin-top: 8px;
}
.button-row .button,
.button-row input[type=submit] {
	margin: 0;
}
.button-row form {
	margin: 0;
}
.info-form textarea {
	max-width: 100%;
}
.info-form input[type=file] {
	max-width: 100%;
}
.section-note {
	color: var(--wood-light);
	font-size: 0.9em;
	margin: 4px 0 10px 0;
}

.guild-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 8px;
}
.guild-header-text {
	flex: 1;
	text-align: center;
}
.guild-header-logo {
	flex: 0 0 auto;
	max-width: 96px;
	max-height: 96px;
	display: block;
}

/* Buttons in a row are all the same size. */
.button-row .button,
.button-row input[type=submit] {
	box-sizing: border-box;
	width: 180px;
	height: 30px;
	padding: 0 12px;
	margin: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	line-height: 1;
}

/* Guild configuration page */
.manage-table {
	margin-bottom: 18px;
}
.manage-table textarea {
	width: 100%;
	max-width: 100%;
}
.manage-table tr.form-actions td {
	text-align: right;
}
.manage-table input[type=submit] {
	margin: 0;
}
.manage-table td.form-actions-inline {
	width: 190px;
	text-align: right;
	white-space: nowrap;
}
.manage-table td.logo-preview {
	width: 130px;
	text-align: center;
}
.manage-table td.logo-preview img,
.manage-table td.logo-preview svg {
	display: block;
	margin: 0 auto;
	max-width: 96px;
	max-height: 96px;
}
.manage-table .section-note {
	margin: 6px 0 0 0;
}
.manage-members {
	margin-bottom: 18px;
}
.manage-table.danger caption {
	background: linear-gradient(#a83a2c, #7a1c1c);
}

.deaths-table td.death-date {
	width: 240px;
	white-space: nowrap;
}

/* Space between consecutive tables. */
.box table + table,
.box .table-scroll + .table-scroll {
	margin-top: 24px;
}

/* Every table sits in a `.table-scroll` box: on narrow screens a wide table
   scrolls sideways inside it instead of squeezing its columns. */
.table-scroll {
	overflow-x: auto;
	/* NOTE: Without this, `overflow-x: auto` turns the vertical axis to `auto`
	   too, and a pixel of overflow shows a vertical scrollbar. */
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
}

/* Buttons inside tables (View, Edit, Delete...) take the width of their text
   instead of the fixed 180px of the other buttons, so they fit their column.
   The phone layout below refines it with the same selectors. */
.box td a.button,
.box td.row-actions input[type=submit] {
	width: auto;
	min-width: 80px;
	padding: 0 14px;
}

/* Characters table on the character profile: columns fill the whole width. */
.characters-table {
	table-layout: fixed;
}
.characters-table th:nth-child(1) { width: 7%; }
.characters-table th:nth-child(2) { width: 34%; }
.characters-table th:nth-child(3) { width: 16%; }
.characters-table th:nth-child(4) { width: 15%; }
.characters-table th:nth-child(5) { width: 28%; }
.characters-table td.guild-action {
	text-align: center;
	white-space: nowrap;
}
.characters-table td.guild-action a.button {
	margin: 0;
}

.search-row {
	display: flex;
	gap: 10px;
	align-items: center;
	margin: 0;
}
.box .search-row input[type=text] {
	flex: 1;
	width: auto;
	max-width: none;
	margin: 0;
	height: 30px;
	box-sizing: border-box;
}
.search-row input[type=submit] {
	flex: 0 0 auto;
	margin: 0;
}
.search-table td {
	border-right: none;
}

/* Account summary */
.summary-characters {
	table-layout: fixed;
}
.summary-characters th:nth-child(1) { width: 5%; }
.summary-characters th:nth-child(2) { width: 24%; }
.summary-characters th:nth-child(3) { width: 8%; }
.summary-characters th:nth-child(4) { width: 13%; }
.summary-characters th:nth-child(5) { width: 10%; }
.summary-characters th:nth-child(6) { width: 10%; }
.summary-characters th:nth-child(7) { width: 30%; }
.summary-characters td.guild-action {
	text-align: center;
	white-space: nowrap;
}
.summary-characters td.guild-action a.button {
	margin: 0;
}

.summary-actions {
	white-space: nowrap;
}
.summary-actions a.button {
	margin: 0 6px 0 0;
}
.checkbox-label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}
.checkbox-label input[type=checkbox] {
	width: auto;
	margin: 0;
}
.record-table {
	table-layout: fixed;
}
.record-table th:first-child,
.record-table td:first-child {
	width: 6%;
}

/* Buttons: brown-orange with centered text. Kept at the end so it wins over the
   earlier size/padding rules. */
a.button,
.box a.button,
.box input[type=submit],
.button-row .button,
.button-row input[type=submit],
.filter-form input[type=submit],
.manage-table input[type=submit],
.search-row input[type=submit],
td.row-actions a.button,
td.row-actions input[type=submit] {
	padding: 0 10px 3px;
	line-height: 1;
	background: linear-gradient(var(--header-red), var(--header-red-dark));
	border: 1px solid var(--border-brown-dark);
	box-shadow: none;
	color: var(--gold-bright);
	text-shadow: none;
}
a.button:hover,
.box a.button:hover,
.box input[type=submit]:hover,
.button-row .button:hover,
.button-row input[type=submit]:hover,
.box a.button.small-button:hover {
	color: var(--gold-bright);
	filter: brightness(1.15);
}

/* Button labels always stay on one line. */
a.button,
.box a.button,
.box input[type=submit],
.button-row .button,
.button-row input[type=submit] {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 0.82em;
}

/* Same typography as tibiantis.online: Chaparral Pro (approximated with
   Crimson Pro) for content and titles, Merriweather Bold for the menu and
   buttons. */
th,
caption,
h1,
h2,
h3 {
	font-weight: 400;
}
label {
	font-weight: 400;
}
.top-nav a,
.nav-label,
.box input[type=submit],
a.button {
	font-family: 'Metamorphous', Georgia, serif;
	font-weight: 400;
}
.box input[type=submit],
a.button,
.box a.button,
.button-row .button,
.button-row input[type=submit] {
	font-size: 0.8em;
	letter-spacing: 0;
}

/* tibiantis.online never uses bold inside the content (b, h4 are "normal"),
   and its menu is Merriweather Bold at 14px. */
b,
strong {
	font-weight: normal;
}
.top-nav a,
.nav-label {
	font-size: 14px;
}

/* Menu items share one size. */
.top-nav a,
.top-nav span.nav-label {
	font-size: 14px;
	font-weight: 400;
}

/* News ticker */
.ticker {
	display: flex;
	flex-direction: column;
}
.ticker-item {
	border-bottom: 1px solid var(--parchment-dark);
}
.ticker-item:last-child {
	border-bottom: none;
}
.ticker-item summary {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 8px 0;
	cursor: pointer;
	list-style: none;
}
.ticker-item summary::-webkit-details-marker {
	display: none;
}
.ticker-date {
	flex: 0 0 92px;
	color: var(--wood-light);
	font-size: 0.9em;
	white-space: nowrap;
	padding-top: 1px;
}
.ticker-text {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ticker-item[open] .ticker-text {
	white-space: normal;
	overflow: visible;
}
.ticker-toggle {
	flex: 0 0 26px;
	width: 26px;
	height: 26px;
	border-radius: 4px;
	border: 1px solid var(--border-brown-dark);
	background: linear-gradient(var(--header-red), var(--header-red-dark));
	color: var(--gold-bright);
	font-family: 'Metamorphous', Georgia, serif;
	font-size: 18px;
	line-height: 24px;
	text-align: center;
}
.ticker-toggle::before {
	content: "+";
}
.ticker-item[open] .ticker-toggle::before {
	content: "\2212";
}
.ticker-item summary:hover .ticker-toggle {
	filter: brightness(1.2);
}
.ticker-admin-table td:nth-child(2) {
	word-break: break-word;
}

/* Ticker rows alternate in color, like the other tables. */
.ticker-item summary {
	padding: 8px 12px;
}
.ticker-item:nth-child(even) {
	background: var(--row-alt);
}

/* Text blocks of the Downloads page */
.lead {
	font-size: 1.08em;
}
.lib-list {
	margin: 6px 0 10px 0;
	padding-left: 24px;
}
.lib-list li {
	margin-bottom: 5px;
}
.lib-note {
	margin: 12px 0 0 0;
	padding: 8px 12px;
	border-left: 4px solid var(--gold);
	background: var(--row-alt);
	font-style: italic;
}

/* Downloads */
.download-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 12px 0 4px 0;
	padding: 14px 16px;
	border: 1px solid var(--parchment-dark);
	border-left: 4px solid var(--header-red);
	border-radius: 4px;
	background: var(--row-alt);
}
.download-info h2 {
	margin: 0 0 4px 0;
}
.download-info p {
	margin: 0;
	color: var(--wood-light);
	font-size: 0.9em;
}
.box a.button.download-button {
	flex: 0 0 auto;
	width: 180px;
	height: 38px;
	margin: 0;
	font-size: 0.95em;
}