.server-profile {
	--server-ink: #3d2b1e;
	--server-muted: #705a45;
	--server-paper: #f6ead3;
	--server-paper-deep: #e4cda8;
	--server-border: #9b7a51;
	--server-teal: #214f50;
	--server-teal-dark: #122f34;
	--server-gold: #d5a947;
	color: var(--server-ink);
	font-family: Verdana, Arial, sans-serif;
	font-size: 11px;
	line-height: 1.5;
}

.server-profile *,
.server-profile *::before,
.server-profile *::after {
	box-sizing: border-box;
}

.server-profile-hero {
	position: relative;
	overflow: hidden;
	padding: 25px 23px 22px;
	border: 1px solid #0b282d;
	border-radius: 5px;
	background:
		radial-gradient(circle at 88% 14%, rgba(213, 169, 71, .24), transparent 31%),
		linear-gradient(135deg, #102c33 0%, #1f5654 64%, #173a41 100%);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 3px 9px rgba(45, 27, 13, .25);
	color: #f8eddb;
}

.server-profile-hero::after {
	position: absolute;
	right: -52px;
	bottom: -98px;
	width: 240px;
	height: 240px;
	border: 1px solid rgba(213, 169, 71, .22);
	border-radius: 50%;
	box-shadow: 0 0 0 27px rgba(213, 169, 71, .05), 0 0 0 55px rgba(213, 169, 71, .03);
	content: "";
}

.server-profile-eyebrow,
.server-profile-heading > p {
	margin: 0 0 5px;
	color: var(--server-gold);
	font-size: 9px;
	font-weight: bold;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.server-profile-hero h2,
.server-profile-heading h2 {
	margin: 0;
	font-family: Georgia, "Times New Roman", serif;
	font-weight: bold;
}

.server-profile-hero h2 {
	position: relative;
	z-index: 1;
	color: #fff8eb;
	font-size: 26px;
	line-height: 1.2;
	text-shadow: 1px 2px #07191d;
}

.server-profile-lead {
	position: relative;
	z-index: 1;
	max-width: 680px;
	margin: 10px 0 15px;
	color: #e8dcc9;
	font-size: 11px;
}

.server-profile-badges {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.server-profile-badges span {
	padding: 4px 8px;
	border: 1px solid rgba(234, 204, 143, .35);
	border-radius: 999px;
	background: rgba(4, 20, 23, .3);
	color: #f7ead3;
	font-size: 9px;
	font-weight: bold;
}

.server-profile-nav {
	display: flex;
	gap: 6px;
	margin: 11px 0;
	padding: 9px;
	overflow-x: auto;
	border: 1px solid #b49a73;
	border-radius: 4px;
	background: rgba(255, 250, 237, .58);
}

.server-profile-nav a {
	flex: 0 0 auto;
	padding: 6px 9px;
	border: 1px solid #ad8f66;
	border-radius: 3px;
	background: #ead7b5;
	box-shadow: inset 0 1px rgba(255, 255, 255, .7);
	color: #4f321c;
	font-size: 9px;
	font-weight: bold;
	text-decoration: none;
}

.server-profile-nav a:hover,
.server-profile-nav a:focus-visible,
.server-profile-actions a:hover,
.server-profile-actions a:focus-visible {
	background: var(--server-teal);
	color: #fff8ea;
}

.server-profile-nav a:focus-visible,
.server-profile-actions a:focus-visible,
.server-table-scroll:focus-visible {
	outline: 2px solid #19718d;
	outline-offset: 2px;
}

.server-profile-section {
	margin-top: 11px;
	padding: 14px;
	border: 1px solid var(--server-border);
	border-radius: 4px;
	background: rgba(247, 234, 209, .9);
	box-shadow: 0 2px 6px rgba(60, 38, 18, .12);
	scroll-margin-top: 12px;
}

.server-profile-heading {
	margin-bottom: 11px;
}

.server-profile-heading > p {
	color: #8a5d1e;
}

.server-profile-heading h2 {
	color: #39281b;
	font-size: 19px;
}

.server-profile-heading > span {
	display: block;
	margin-top: 4px;
	color: var(--server-muted);
	font-size: 10px;
}

.server-profile-overview,
.server-training-summary,
.server-loot-grid,
.server-pvp-grid,
.server-systems-grid {
	display: grid;
	gap: 8px;
}

.server-profile-overview {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.server-profile-overview article,
.server-training-summary article,
.server-loot-grid article,
.server-pvp-grid article,
.server-systems-grid article {
	padding: 11px;
	border: 1px solid #bea078;
	border-radius: 3px;
	background: rgba(255, 251, 241, .67);
}

.server-profile-overview span,
.server-profile-overview strong,
.server-profile-overview small,
.server-training-summary strong,
.server-training-summary span,
.server-pvp-grid span,
.server-pvp-grid strong {
	display: block;
}

.server-profile-overview span,
.server-pvp-grid span {
	color: #806348;
	font-size: 9px;
	font-weight: bold;
	text-transform: uppercase;
}

.server-profile-overview strong,
.server-training-summary strong,
.server-loot-grid strong,
.server-pvp-grid strong {
	margin: 3px 0;
	color: #284c49;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 14px;
}

.server-profile-overview small,
.server-training-summary span,
.server-loot-grid p,
.server-systems-grid p {
	color: var(--server-muted);
	font-size: 9px;
	line-height: 1.45;
}

.server-rate-grid {
	display: grid;
	gap: 9px;
}

.server-rate-grid-three {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.server-rate-card {
	overflow: hidden;
	border: 1px solid #9c7b51;
	border-radius: 4px;
	background: #f8ecd7;
}

.server-rate-card > header {
	padding: 9px 10px;
	background: linear-gradient(#315d5a, #1c4444);
	color: #f9edd8;
}

.server-rate-card > header span {
	color: #e4bd68;
	font-size: 8px;
	font-weight: bold;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.server-rate-card h3,
.server-systems-grid h3 {
	margin: 2px 0 0;
	font-family: Georgia, "Times New Roman", serif;
}

.server-rate-card h3 {
	color: #fff6e6;
	font-size: 14px;
}

.server-table-scroll {
	max-width: 100%;
	overflow-x: auto;
}

.server-table-scroll table {
	width: 100%;
	border-collapse: collapse;
	background: #f8ecd7;
}

.server-table-scroll th,
.server-table-scroll td {
	padding: 6px 8px;
	border: 1px solid #c5aa82;
	text-align: left;
}

.server-table-scroll th {
	background: #d6bd96;
	color: #48331f;
	font-size: 9px;
}

.server-table-scroll tbody tr:nth-child(even) {
	background: #ead6b5;
}

.server-table-scroll td:last-child,
.server-table-scroll th:last-child {
	width: 35%;
	text-align: right;
}

.server-table-scroll td strong {
	color: #24534f;
}

.server-profile-note {
	margin: 10px 0 0;
	padding: 9px 11px;
	border-left: 3px solid #9a642b;
	background: #ead5b1;
	color: #5b3c22;
	font-size: 9px;
}

.server-training-summary {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-bottom: 9px;
}

.server-profile-section:target {
	border-color: #315d5a;
	box-shadow: 0 0 0 2px rgba(49, 93, 90, .18), 0 2px 6px rgba(60, 38, 18, .12);
}

.server-loot-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.server-loot-grid p,
.server-systems-grid p {
	margin: 5px 0 0;
}

.server-system-tag {
	display: inline-block;
	padding: 4px 7px;
	border-radius: 999px;
	background: #d9e5df;
	color: #285752;
	font-size: 8px;
	font-weight: bold;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.server-pvp-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.server-profile-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-top: 10px;
}

.server-profile-actions a {
	padding: 7px 10px;
	border: 1px solid #173d3d;
	border-radius: 3px;
	background: linear-gradient(#356360, #214847);
	color: #fff8e8;
	font-size: 9px;
	font-weight: bold;
	text-decoration: none;
}

.server-profile-actions a.secondary {
	border-color: #806139;
	background: linear-gradient(#a17b46, #79552e);
}

.server-systems-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.server-systems-grid article {
	position: relative;
	padding-bottom: 35px;
}

.server-systems-grid h3 {
	color: #3d2c1d;
	font-size: 14px;
}

.server-systems-grid a {
	position: absolute;
	left: 11px;
	bottom: 10px;
	color: #245853;
	font-size: 9px;
	font-weight: bold;
}

.server-profile-footer {
	display: flex;
	gap: 7px;
	margin-top: 11px;
	padding: 11px 13px;
	border: 1px solid #6d5639;
	border-radius: 4px;
	background: #3d3429;
	color: #e9dcc6;
	font-size: 9px;
}

.server-profile-footer strong {
	color: #f3d58a;
}

@media (max-width: 820px) {
	.server-profile-overview,
	.server-rate-grid-three,
	.server-pvp-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

}

/* The Canary theme is desktop-first and keeps three fixed columns. This
 * stylesheet is loaded only on the server-information route, so the compact
 * layout can remove the sidebars without changing unrelated portal pages. */
@media (max-width: 780px) {
	html,
	body {
		min-width: 0;
		overflow-x: hidden;
	}

	#ArtworkHelper,
	#Bodycontainer {
		min-width: 0;
		width: 100%;
	}

	#Bodycontainer {
		display: block;
	}

	#ContentRow {
		top: 8px;
		width: 100%;
	}

	#MenuColumn,
	#ThemeboxesColumn {
		display: none;
	}

	#ContentColumn {
		margin: 0;
		padding: 0 6px;
	}

	.Content .Box {
		margin: 0 0 12px;
	}

	.Content .BoxContent {
		padding: 9px;
	}
}

@media (max-width: 620px) {
	.server-profile-hero {
		padding: 20px 15px;
	}

	.server-profile-hero h2 {
		font-size: 22px;
	}

	.server-profile-overview,
	.server-rate-grid-three,
	.server-training-summary,
	.server-loot-grid,
	.server-pvp-grid,
	.server-systems-grid {
		grid-template-columns: 1fr;
	}

	.server-profile-section {
		padding: 10px;
	}

	.server-profile-footer {
		display: block;
	}

	.server-profile-footer strong {
		display: block;
		margin-bottom: 3px;
	}
}