/* The Emperium — page theme. Loaded only by [[The Emperium]] via TemplateStyles. */

.emp {
	position: relative;
	background-color: #0b0a0d;
	background-image:
		radial-gradient(ellipse at 15% 0%, rgba(150, 20, 30, 0.35), transparent 55%),
		radial-gradient(ellipse at 90% 10%, rgba(212, 175, 55, 0.12), transparent 50%),
		linear-gradient(180deg, #120d10 0%, #0b0a0d 40%);
	color: #e8e3d8;
	border: 1px solid #2a2226;
	border-radius: 14px;
	padding: 32px 40px 48px;
	margin: 8px 0 24px;
	line-height: 1.65;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
	overflow: hidden;
}

/* ---------- Wiki dark mode ----------
   The wiki's dark mode inverts the whole page. The panel is already dark, so it carries the
   "mw-no-invert" class (inverted back to normal), and its images opt out of the extra image inversion. */
.emp img {
	filter: none !important;
}

/* ---------- Links ---------- */
.emp a,
.emp a:visited {
	color: #e0bd5a;
	text-decoration: none;
	transition: color 0.2s ease;
}
.emp a:hover {
	color: #fff1c4;
	text-decoration: underline;
}
.emp a.new,
.emp a.new:visited {
	color: #d77a6f;
}
.emp b {
	color: #fff;
}

/* ---------- Hero ---------- */
.emp-hero {
	position: relative;
	text-align: center;
	padding: 16px 24px 40px;
	margin: -32px -40px 32px;
	background-image:
		linear-gradient(120deg, rgba(120, 10, 20, 0.55), rgba(10, 8, 12, 0) 45%, rgba(120, 10, 20, 0.55)),
		linear-gradient(180deg, #1a0f13, #0b0a0d);
	background-size: 250% 100%, 100% 100%;
	animation: emp-drift 14s ease-in-out infinite alternate;
	border-bottom: 1px solid #3a2a20;
}
.emp-sigil {
	position: relative;
	display: inline-block;
	width: 190px;
	height: 190px;
	margin-bottom: 6px;
	line-height: 0;
}
.emp-sigil:before {
	content: '';
	position: absolute;
	top: 10%;
	left: 10%;
	width: 80%;
	height: 80%;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(200, 30, 40, 0.45), rgba(200, 30, 40, 0) 70%);
	animation: emp-halo 4.8s ease-in-out infinite;
}
.emp-sigil img {
	position: relative;
	width: 190px;
	height: auto;
	image-rendering: pixelated;
}
.emp-title {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 40px;
	font-weight: bold;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #f4ecd8;
	text-shadow: 0 0 18px rgba(190, 30, 40, 0.55);
	line-height: 1.2;
}
.emp-tagline {
	margin-top: 8px;
	font-size: 13px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: #b9a98a;
}

/* ---------- Stat strip ---------- */
.emp-stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	margin-top: 24px;
}
.emp-stat {
	min-width: 138px;
	padding: 12px 20px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(212, 175, 55, 0.25);
	border-radius: 10px;
	transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.emp-stat:hover {
	transform: translateY(-3px);
	border-color: rgba(212, 175, 55, 0.7);
	box-shadow: 0 8px 22px rgba(190, 30, 40, 0.25);
}
.emp-stat-value {
	display: block;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 22px;
	font-weight: bold;
	color: #f0cf6a;
}
.emp-stat-label {
	display: block;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #9d927f;
}
.emp-live {
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 9px;
	border-radius: 50%;
	background: #4cd17a;
	vertical-align: middle;
	animation: emp-pulse 1.8s ease-out infinite;
}

/* ---------- Side-by-side photos ---------- */
.emp-shot img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 0.4s ease;
}
.emp-shot a {
	display: block;
	overflow: hidden;
	border-radius: 10px;
}
.emp-shot a:hover img {
	transform: scale(1.04);
}
/* Pairs that share one frame shape (edges trimmed to fit) */
.emp-crop-2x1 .emp-shot img {
	aspect-ratio: 2 / 1;
	object-fit: cover;
}
.emp-crop-16x9 .emp-shot img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
}
/* Square + 2.5:1 pairs: widths in proportion to shape, so tops and bottoms line up exactly */
.emp .emp-duo {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin: 16px 0 32px;
}
.emp-duo-square {
	flex: 1 1 0;
	min-width: 0;
}
.emp-duo-wide {
	flex: 2.5 1 0;
	min-width: 0;
}
.emp-feature-caption {
	margin-top: 8px;
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #a89e8c;
	text-align: center;
}
.emp .emp-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	align-items: start;
	gap: 16px;
	margin: 16px 0 32px;
}
.emp-pixel {
	image-rendering: pixelated;
}

/* ---------- Top bar (identical on the wiki and on TheEmperium.com) ---------- */
.emp-topbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 24px;
	margin-bottom: 40px;
	text-align: left;
}
.emp-topbar-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	line-height: 0;
}
.emp-topbar-brand img {
	width: 36px;
	height: 36px;
	image-rendering: pixelated;
}
.emp-topbar-name {
	line-height: 1.2;
}
.emp .emp-topbar-name a,
.emp .emp-topbar-name a:visited {
	color: #f4ecd8;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 15px;
	font-weight: bold;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-decoration: none;
}
.emp-topbar-links {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 20px;
	line-height: 1.6;
}
.emp .emp-topbar-links a,
.emp .emp-topbar-links a:visited {
	color: #b9a98a;
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
}
.emp .emp-topbar-links a:hover,
.emp .emp-topbar-name a:hover {
	color: #f0cf6a;
	text-decoration: none;
}
.emp .emp-topbar a.external {
	padding-right: 0 !important;
	background-image: none !important;
}

/* website card: a live snapshot of the other site inside the mock browser */
.emp-browser-shot {
	flex: 1;
	min-height: 0;
	overflow: hidden;
	line-height: 0;
	background: #0b0a0d;
}
.emp-browser-shot a,
.emp-browser-shot span {
	display: block;
	height: 100%;
}
.emp-browser-shot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	transition: transform 0.4s ease;
}
.emp-site:hover .emp-browser-shot img {
	transform: scale(1.03);
}

/* ---------- Discord invite (Discord's chat invite card with the splash as a banner) + website card ----------
   Both cards share one column width so they match when stacked. */
.emp .emp-links {
	display: grid;
	grid-template-columns: minmax(0, 550px);
	justify-content: center;
	gap: 16px;
	margin-top: 32px;
	text-align: left;
}
.emp-invite,
.emp-site {
	overflow: hidden;
	background: #2b2d31;
	border: 1px solid #3a3d44;
	border-radius: 10px;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.emp-invite:hover,
.emp-site:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5), 0 0 24px rgba(88, 101, 242, 0.25);
}
.emp-invite-banner {
	line-height: 0;
}
.emp-invite-banner a {
	display: block;
}
.emp-invite-banner img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2.4 / 1;
	object-fit: cover;
	object-position: 50% 45%;
}
.emp-invite-inner {
	padding: 12px 16px 14px;
}
.emp-invite-label {
	margin-bottom: 10px;
	font-size: 11px;
	font-weight: bold;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #b5bac1;
}
.emp-invite-body {
	display: flex;
	align-items: center;
	gap: 12px;
}
.emp-invite-icon {
	flex: none;
	width: 52px;
	height: 52px;
	line-height: 0;
}
.emp-invite-icon img {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	transition: border-radius 0.25s ease;
}
.emp-invite:hover .emp-invite-icon img {
	border-radius: 50%;
}
.emp-invite-info {
	flex: 1;
	min-width: 0;
}
.emp-invite-name {
	display: block;
	font-size: 16px;
	font-weight: bold;
	color: #f2f3f5;
}
.emp-invite-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 12px;
	font-size: 13px;
	color: #b5bac1;
}
.emp-invite-count {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
}
.emp-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
}
.emp-dot-online { background: #23a55a; }
.emp-dot-members { background: #80848e; }
.emp .emp-invite-btn a,
.emp .emp-invite-btn a:visited {
	display: inline-block;
	padding: 8px 18px !important;
	background: #248046 !important;
	color: #fff;
	font-weight: bold;
	font-size: 14px;
	border-radius: 4px;
	text-decoration: none;
	transition: background-color 0.17s ease;
}
.emp .emp-invite-btn a:hover {
	background: #1a6334 !important;
	color: #fff;
	text-decoration: none;
}
.emp-site {
	display: flex;
	flex-direction: column;
	background: #1b1418;
	border-color: rgba(212, 175, 55, 0.3);
}
.emp-site:hover {
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5), 0 0 24px rgba(190, 30, 40, 0.2);
}
/* mock browser chrome */
.emp-browser-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	background: #26202a;
	border-bottom: 1px solid #3a2f33;
}
.emp-browser-dots {
	display: flex;
	gap: 6px;
	flex: none;
}
.emp-browser-dots span {
	display: block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #4a3f44;
}
.emp-browser-dots span:first-child { background: #c8323f; }
.emp-browser-dots span:nth-child(2) { background: #c9a43f; }
.emp-browser-url {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 1;
	min-width: 0;
	padding: 4px 8px;
	background: #120e11;
	border-radius: 6px;
	font-size: 12px;
	color: #b5aea3;
	white-space: nowrap;
	overflow: hidden;
}
.emp-favicon {
	flex: none;
	width: 16px;
	height: 16px;
	line-height: 0;
}
.emp-favicon img {
	width: 16px;
	height: 16px;
	border-radius: 4px;
}
.emp-browser-page {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 24px 16px;
	text-align: center;
	background: radial-gradient(ellipse at 50% 0%, rgba(142, 27, 37, 0.3), rgba(0, 0, 0, 0) 70%);
}
.emp-browser-page .emp-invite-label {
	margin-bottom: 0;
}
.emp-site-name {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 20px;
	font-weight: bold;
	color: #f0cf6a;
}
/* placeholder "page content" lines with a slow shimmer */
.emp-skeleton {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	width: 100%;
	margin: 4px 0;
}
.emp-skeleton span {
	display: block;
	height: 6px;
	border-radius: 3px;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(212, 175, 55, 0.22), rgba(255, 255, 255, 0.05));
	background-size: 200% 100%;
	animation: emp-shimmer 2.4s linear infinite;
}
.emp-skeleton span:nth-child(1) { width: 80%; }
.emp-skeleton span:nth-child(2) { width: 64%; }
.emp-skeleton span:nth-child(3) { width: 72%; }
.emp-soon {
	padding: 2px 9px;
	border: 1px solid rgba(212, 175, 55, 0.5);
	border-radius: 999px;
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #e6c35c;
	white-space: nowrap;
	animation: emp-blink 2s ease-in-out infinite;
}

/* ---------- Wide screens: invite + website side by side ---------- */
@media (min-width: 1181px) {
	.emp-hero {
		padding: 20px 32px 48px;
	}
	.emp .emp-links {
		grid-template-columns: minmax(0, 550px) 350px;
		gap: 24px;
		margin-top: 48px;
	}
	/* 4 x 219px + 3 x 16px gaps = 924px, the same width as the invite + website cards */
	.emp-stat {
		min-width: 177px;
	}
}

/* ---------- Entrance animation for each block ---------- */
.emp > * {
	animation: emp-rise 0.8s ease-out both;
}
.emp > *:nth-child(2) { animation-delay: 0.1s; }
.emp > *:nth-child(3) { animation-delay: 0.2s; }
.emp > *:nth-child(4) { animation-delay: 0.3s; }
.emp > *:nth-child(5) { animation-delay: 0.4s; }
.emp > *:nth-child(n+6) { animation-delay: 0.5s; }
.emp > .emp-hero {
	animation: emp-drift 14s ease-in-out infinite alternate;
}

/* ---------- Headings ---------- */
.emp .mw-heading,
.emp h2,
.emp h3 {
	border: 0;
}
.emp h2 {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 26px;
	font-weight: bold;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #f4ecd8;
	margin: 48px 0 8px;
	padding: 0;
}
.emp .mw-heading2 {
	margin-top: 48px;
	margin-bottom: 16px;
	padding-bottom: 8px;
	background-image: linear-gradient(90deg, #c9a43f, #8e1b25 40%, rgba(142, 27, 37, 0));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 100% 2px;
	animation: emp-underline 1.2s ease-out both;
}
.emp .mw-heading2 h2 {
	margin-top: 0;
}
.emp h3 {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 19px;
	color: #e6c35c;
	margin: 32px 0 8px;
	padding-left: 12px;
	border-left: 3px solid #8e1b25;
}
.emp .mw-editsection,
.emp .mw-editsection a {
	color: #6f6658;
	font-size: 12px;
}

/* ---------- Table of contents ---------- */
.emp .toc {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid #2f2629;
	border-radius: 10px;
	padding: 10px 18px;
	color: #e8e3d8;
}
.emp .toc .toctitle h2 {
	font-size: 14px;
	letter-spacing: 0.2em;
	color: #b9a98a;
	margin: 0;
}
.emp .toc .tocnumber {
	color: #8e1b25;
}

/* ---------- Infobox (overrides the shared template's inline colours) ---------- */
.emp .infobox {
	background: #141015 !important;
	color: #e8e3d8;
	border: 1px solid #3a2a20;
	border-radius: 12px;
	border-collapse: separate;
	overflow: hidden;
	box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(212, 175, 55, 0.08);
	margin: 0 0 18px 22px;
	transition: box-shadow 0.3s ease;
}
.emp .infobox:hover {
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55), 0 0 22px rgba(190, 30, 40, 0.25);
}
.emp .infobox th,
.emp .infobox td {
	border-top: 1px solid #241c1f;
	padding: 6px 10px;
	vertical-align: top;
}
.emp .infobox th[colspan] {
	background: rgba(142, 27, 37, 0.35) !important;
	color: #e6c35c;
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.emp .infobox tr:first-child th {
	background: linear-gradient(90deg, #5e0f17, #8e1b25, #5e0f17) !important;
	color: #f6e7bb;
	font-family: Georgia, 'Times New Roman', serif;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 12px;
	border-top: 0;
}
.emp .infobox th[scope="row"] {
	color: #b9a98a;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: left;
	white-space: nowrap;
}
.emp .infobox img {
	border-radius: 8px;
}

/* ---------- Contents | leader | info panel: one row, equal height; Ranking follows full width ---------- */
.emp .emp-trio {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr) 290px;
	gap: 32px;
	margin: 32px 0 16px;
}
.emp-trio-toc .toc {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 16px;
}
.emp-trio .infobox {
	float: none !important;
	width: 100% !important;
	height: 100%;
	margin: 0 !important;
}
.emp-trio-leader {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 16px;
	padding: 16px 0;
	background: radial-gradient(ellipse at 50% 40%, rgba(142, 27, 37, 0.3), rgba(0, 0, 0, 0) 65%);
}
.emp-council-title {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 13px;
	font-weight: bold;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	text-align: center;
	color: #b9a98a;
}
/* 3 x 2: leader top-centre, Omegas around */
.emp .emp-council {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: end;
	gap: 24px 16px;
}
.emp-member {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	min-width: 0;
	text-align: center;
}
.emp-member img {
	display: block;
	width: auto;
	height: 160px;
	margin-bottom: 4px;
	filter: drop-shadow(0 12px 12px rgba(0, 0, 0, 0.55)) !important;
}
/* the wrapper floats (not the image), on its own compositor layer, so the shadow is drawn once
   and the movement is sub-pixel smooth instead of snapping 1px at a time */
.emp-member > span:first-child {
	display: block;
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	animation: emp-bob 5s ease-in-out infinite;
}
.emp-member:nth-child(2) > span:first-child { animation-delay: -1s; }
.emp-member:nth-child(3) > span:first-child { animation-delay: -2s; }
.emp-member:nth-child(4) > span:first-child { animation-delay: -3s; }
.emp-member:nth-child(5) > span:first-child { animation-delay: -4s; }
.emp-member:nth-child(6) > span:first-child { animation-delay: -2.5s; }
.emp-member-leader img {
	height: 200px;
	filter: drop-shadow(0 12px 12px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 14px rgba(212, 175, 55, 0.25)) !important;
}
.emp-member-name {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 14px;
	font-weight: bold;
	color: #f4ecd8;
}
.emp-member-name small {
	font-weight: normal;
	color: #9d927f;
}
.emp-member-leader .emp-member-name {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 17px;
}
.emp-member-role {
	padding: 1px 10px;
	border: 1px solid rgba(190, 40, 50, 0.55);
	border-radius: 999px;
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #e08a8f;
}
.emp-member-leader .emp-member-role {
	border-color: rgba(212, 175, 55, 0.6);
	color: #e6c35c;
}
@media (max-width: 1180px) {
	.emp .emp-trio {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}
	.emp-trio-toc .toc,
	.emp-trio .infobox {
		height: auto;
	}
}

/* ---------- "Show more bases" toggle ---------- */
.emp .emp-more {
	display: flex;
	flex-direction: column-reverse;
	margin-top: 2px;
}
.emp .emp-more .mw-collapsible-toggle {
	float: none;
	align-self: flex-start;
	margin-top: 6px;
	padding: 2px 10px;
	background: rgba(212, 175, 55, 0.1);
	border: 1px solid rgba(212, 175, 55, 0.45);
	border-radius: 999px;
	color: #e6c35c;
	font-size: 11px;
	letter-spacing: 0.06em;
	cursor: pointer;
	transition: background 0.2s ease;
}
.emp .emp-more .mw-collapsible-toggle:hover {
	background: rgba(212, 175, 55, 0.22);
}
.emp .emp-more .mw-collapsible-toggle:before,
.emp .emp-more .mw-collapsible-toggle:after {
	content: none;
}
.emp .emp-more .mw-collapsible-text {
	color: #e6c35c;
}

/* ---------- Keep styled blocks beside floated boxes (infobox, images) instead of underneath ---------- */
.emp-ranks,
.emp-relations,
.emp-roster ul,
.emp-trivia ul,
.emp .mw-heading2,
.emp .mw-heading3 {
	display: flow-root;
	clear: left;
}

/* ---------- Ranking ladder ---------- */
.emp-ranks {
	list-style: none;
	margin: 16px 0 24px;
	padding: 0;
	counter-reset: emp-rank;
}
.emp-ranks li {
	position: relative;
	counter-increment: emp-rank;
	margin: 0 0 8px;
	padding: 10px 14px 10px 54px;
	background: linear-gradient(90deg, rgba(142, 27, 37, 0.28), rgba(255, 255, 255, 0.02));
	border: 1px solid #2f2629;
	border-radius: 8px;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 16px;
	transition: transform 0.25s ease, border-color 0.25s ease;
}
.emp-ranks li:hover {
	transform: translateX(6px);
	border-color: rgba(212, 175, 55, 0.6);
}
.emp-ranks li:before {
	content: counter(emp-rank);
	position: absolute;
	left: 12px;
	top: 50%;
	width: 28px;
	height: 28px;
	margin-top: -14px;
	line-height: 28px;
	text-align: center;
	border-radius: 50%;
	background: #8e1b25;
	color: #f6e7bb;
	font-size: 14px;
	font-weight: bold;
}
.emp-ranks li:first-child {
	border-color: rgba(212, 175, 55, 0.55);
	background: linear-gradient(90deg, rgba(212, 175, 55, 0.25), rgba(255, 255, 255, 0.02));
}
.emp-ranks li:first-child:before {
	background: #c9a43f;
	color: #1a1208;
}
.emp-rank-note {
	color: #9d927f;
	font-family: sans-serif;
	font-size: 13px;
}

/* ---------- Foreign relations ---------- */
.emp .emp-relations {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 10px;
	margin: 14px 0;
}
.emp-rel {
	padding: 10px 14px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid #2f2629;
	border-left-width: 4px;
	border-radius: 8px;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.emp-rel:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}
.emp-rel-name {
	display: block;
	font-weight: bold;
	color: #e0bd5a;   /* same gold as the linked names, for groups without a wiki page */
}
.emp-rel-status {
	display: inline-block;
	margin-top: 4px;
	padding: 1px 8px;
	border-radius: 999px;
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.emp-ally { border-left-color: #3fa66b; }
.emp-ally .emp-rel-status { background: rgba(63, 166, 107, 0.18); color: #7fd9a3; }
.emp-war { border-left-color: #c8323f; }
.emp-war .emp-rel-status { background: rgba(200, 50, 63, 0.2); color: #f08a92; }
.emp-neutral { border-left-color: #7d7f8a; }
.emp .emp-neutral .emp-rel-name,
.emp .emp-neutral .emp-rel-name a,
.emp .emp-neutral .emp-rel-name a:visited { color: #7d7f8a; }
.emp .emp-neutral .emp-rel-name a:hover { color: #b0b2bc; }
.emp-neutral .emp-rel-status { background: rgba(125, 127, 138, 0.2); color: #c3c5cf; }
/* close allies in Minecraft "&b" aqua (#55FFFF): name, deeper stripe, pale tag on dark teal */
.emp-close { border-left-color: #2ec4c4; }
.emp .emp-close .emp-rel-name,
.emp .emp-close .emp-rel-name a,
.emp .emp-close .emp-rel-name a:visited { color: #55ffff; }
.emp .emp-close .emp-rel-name a:hover { color: #c8ffff; }
.emp-close .emp-rel-status { background: rgba(46, 196, 196, 0.16); color: #a8ffff; }
.emp-rel-note {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	color: #9d927f;
}

/* ---------- Fallen & outlived relations: dimmed cards with a stamp; defeated ones get a red X ---------- */
.emp-rel {
	position: relative;
	overflow: hidden;
}
.emp-relations-note {
	margin: 24px 0 8px;
	font-size: 13px;
	font-style: italic;
	color: #9d927f;
}
.emp-relations-label {
	display: block;
	margin-bottom: 4px;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 12px;
	font-style: normal;
	font-weight: bold;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #b9a98a;
}
/* fallen groups: 2 columns of wide cards; the right side is reserved for the stamp */
.emp .emp-relations-fallen {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 720px) {
	.emp .emp-relations-fallen {
		grid-template-columns: minmax(0, 1fr);
	}
}
.emp-fallen {
	padding-right: 120px;
}
.emp-fallen .emp-rel-name,
.emp-fallen .emp-rel-status {
	white-space: nowrap;
}
.emp-fallen .emp-rel-name,
.emp-fallen .emp-rel-status {
	opacity: 0.5;
}
.emp-defeated:before,
.emp-defeated:after {
	content: '';
	position: absolute;
	top: 50%;
	left: -8%;
	right: -8%;
	height: 2px;
	background: rgba(214, 52, 66, 0.85);
	box-shadow: 0 0 6px rgba(214, 52, 66, 0.6);
}
.emp-defeated:before {
	transform: rotate(14deg);
}
.emp-defeated:after {
	transform: rotate(-14deg);
}
.emp-stamp {
	position: absolute;
	top: 50%;
	right: 10px;
	padding: 1px 6px;
	border: 2px solid;
	border-radius: 4px;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 11px;
	font-weight: bold;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	transform: translateY(-50%) rotate(-12deg);
}
.emp-defeated .emp-stamp {
	color: #ef4b59;
	border-color: rgba(239, 75, 89, 0.85);
	background: rgba(24, 8, 10, 0.7);
	box-shadow: 0 0 0 2px rgba(24, 8, 10, 0.7), inset 0 0 0 1px rgba(239, 75, 89, 0.4);
}
.emp-outlived .emp-stamp {
	color: #d4b354;
	border-color: rgba(212, 179, 84, 0.7);
	background: rgba(24, 18, 8, 0.6);
	box-shadow: inset 0 0 0 1px rgba(212, 179, 84, 0.3);
}

/* ---------- Member rosters ---------- */
.emp .emp-roster ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 10px 0 6px;
	padding: 0;
	list-style: none;
}
.emp-roster li {
	display: flex;
	align-items: center;
	gap: 5px;
	margin: 0;
	padding: 4px 12px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid #2f2629;
	border-radius: 999px;
	font-size: 14px;
	transition: border-color 0.2s ease, background 0.2s ease;
}
.emp-roster li:hover {
	border-color: rgba(212, 175, 55, 0.6);
	background: rgba(142, 27, 37, 0.25);
}
.emp-roster-lead li {
	border-color: rgba(212, 175, 55, 0.45);
	background: rgba(212, 175, 55, 0.08);
}

/* tiny front-face heads; sized to sit inside the existing line height so tags don't grow */
.emp-head {
	display: block;
	flex: none;
	width: 16px;
	height: 16px;
	margin-right: 1px;
	line-height: 0;
}
.emp-head img {
	width: 16px;
	height: 16px;
	border-radius: 3px;
	image-rendering: pixelated;
}
.emp .emp-roster a.external {
	padding-right: 0 !important;
	background-image: none !important;
}

/* ---------- Trivia ---------- */
.emp-trivia ul {
	list-style: none;
	margin: 10px 0;
	padding: 0;
}
.emp-trivia li {
	margin: 0 0 8px;
	padding: 10px 14px 10px 40px;
	position: relative;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid #2f2629;
	border-radius: 8px;
}
.emp-trivia li:before {
	content: 'Ω';
	position: absolute;
	left: 14px;
	top: 9px;
	color: #c9a43f;
	font-family: Georgia, 'Times New Roman', serif;
}

/* ---------- Animations ---------- */
@keyframes emp-halo {
	0%, 100% { opacity: 0.55; transform: scale(0.92); }
	50% { opacity: 1; transform: scale(1.08); }
}
@keyframes emp-drift {
	from { background-position: 0% 0, 0 0; }
	to { background-position: 100% 0, 0 0; }
}
@keyframes emp-rise {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: translateY(0); }
}
@keyframes emp-underline {
	from { background-size: 0% 2px; }
	to { background-size: 100% 2px; }
}
@keyframes emp-bob {
	0%, 100% { transform: translate3d(0, 0, 0); }
	50% { transform: translate3d(0, -6px, 0); }
}
@keyframes emp-shimmer {
	from { background-position: 100% 0; }
	to { background-position: -100% 0; }
}
@keyframes emp-blink {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.45; }
}
@keyframes emp-pulse {
	0% { box-shadow: 0 0 0 0 rgba(76, 209, 122, 0.7); }
	100% { box-shadow: 0 0 0 10px rgba(76, 209, 122, 0); }
}

/* ---------- Small screens ---------- */
@media (max-width: 720px) {
	.emp {
		padding: 24px 16px 32px;
	}
	.emp-hero {
		margin: -24px -16px 24px;
		padding: 12px 16px 32px;
	}
	.emp-topbar {
		justify-content: center;
		margin-bottom: 24px;
	}
	.emp-topbar-links {
		justify-content: center;
	}
	.emp-title {
		font-size: 28px;
		letter-spacing: 0.14em;
	}
	.emp .emp-duo {
		flex-direction: column;
	}
	.emp-duo-square,
	.emp-duo-wide {
		flex: none;
		width: 100%;
	}
	.emp .infobox {
		float: none;
		width: 100% !important;
		margin: 0 0 18px;
	}
}

/* ---------- Respect reduced-motion settings ---------- */
@media (prefers-reduced-motion: reduce) {
	.emp *,
	.emp > *,
	.emp-sigil:before {
		animation: none !important;
		transition: none !important;
	}
}