/* ==========================================================================
   Deadly Crusaders
   Dark navy + gold, taken from the EverQuest and Black Desert sub-sites -
   that pairing was already the de-facto DC identity, it just had never been
   written down. Everything is namespaced .dc- so it cannot collide with the
   YouPlay parent on pages that still use it.
   ========================================================================== */

.dc-home {
	--dc-ground:      #0d1017;
	--dc-ground-deep: #080a0f;
	--dc-plate:       #151a24;
	--dc-plate-hi:    #1b2230;
	--dc-rule:        #242c3a;
	--dc-rule-soft:   #1c222d;
	--dc-gold:        #c9a227;
	--dc-gold-hi:     #e8c86a;
	--dc-ink:         #e6e3db;
	--dc-ink-soft:    #b3b2ab;
	--dc-muted:       #838b9b;
	--dc-live:        #4ea06b;
	--dc-down:        #5d6472;
	--dc-plan:        #7a86c9;

	--dc-display: "Cinzel", "Trajan Pro", Georgia, "Times New Roman", serif;
	--dc-body: "Segoe UI", -apple-system, system-ui, "Helvetica Neue", Arial, sans-serif;
	--dc-mono: "Cascadia Mono", Consolas, "SF Mono", ui-monospace, monospace;

	--dc-shell: 1180px;

	margin: 0;
	background: var(--dc-ground);
	color: var(--dc-ink);
	font-family: var(--dc-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

.dc-home * { box-sizing: border-box; }
.dc-home a { color: inherit; }
.dc-home :focus-visible { outline: 2px solid var(--dc-gold-hi); outline-offset: 3px; }
.dc-home img { max-width: 100%; height: auto; }

.dc-shell {
	width: 100%;
	max-width: var(--dc-shell);
	margin-inline: auto;
	padding-inline: 24px;
}

/* --- status dots ---------------------------------------------------------
   Colour alone never carries the meaning: every dot sits next to a word.  */
.dc-dot {
	display: inline-block;
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--dc-live);
	flex-shrink: 0;
	margin-right: 7px;
	vertical-align: middle;
	animation: dc-pulse 2.6s ease-out infinite;
}
.dc-dot.off  { background: var(--dc-down); animation: none; }
.dc-dot.plan { background: var(--dc-plan); animation: none; }
.dc-dot.unk  { background: var(--dc-muted); animation: none; }

@keyframes dc-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(78, 160, 107, .55); }
	70%  { box-shadow: 0 0 0 6px rgba(78, 160, 107, 0); }
	100% { box-shadow: 0 0 0 0 rgba(78, 160, 107, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.dc-dot { animation: none; }
}

/* --- the bar ------------------------------------------------------------ */
.dc-bar {
	position: sticky;
	top: 0;
	z-index: 500;
	background: rgba(8, 10, 15, .94);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--dc-rule);
}
.dc-bar-in { display: flex; align-items: center; gap: 26px; height: 56px; }
.dc-crest { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.dc-crest img { width: auto; height: 34px; display: block; }
.dc-crest-word {
	font-family: var(--dc-display);
	font-size: 13px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--dc-gold-hi);
	white-space: nowrap;
}
.dc-bar-nav { display: flex; align-items: center; gap: 20px; margin-left: auto; font-size: 13.5px; }
.dc-bar-nav > a, .dc-drop-btn {
	text-decoration: none;
	color: var(--dc-ink-soft);
	letter-spacing: .03em;
	white-space: nowrap;
	transition: color .18s;
}
.dc-bar-nav > a:hover, .dc-drop-btn:hover { color: var(--dc-gold-hi); }
.dc-drop-btn {
	background: none; border: 0; padding: 0;
	font: inherit; cursor: pointer;
}
.dc-drop { position: relative; }
.dc-drop-menu {
	position: absolute;
	top: calc(100% + 14px);
	left: -14px;
	min-width: 232px;
	max-height: 70vh;
	overflow-y: auto;
	background: var(--dc-ground-deep);
	border: 1px solid var(--dc-rule);
	padding: 6px 0;
	display: grid;
}
.dc-drop-menu[hidden] { display: none; }
.dc-drop-menu a, .dc-drop-soon {
	display: flex;
	align-items: center;
	padding: 7px 16px;
	font-size: 13.5px;
	text-decoration: none;
	color: var(--dc-ink-soft);
}
.dc-drop-menu a:hover { background: var(--dc-plate); color: var(--dc-gold-hi); }
.dc-drop-soon { color: var(--dc-muted); }
.dc-drop-soon em {
	margin-left: auto;
	font-style: normal;
	font-family: var(--dc-mono);
	font-size: 10.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--dc-plan);
}
.dc-tally {
	font-family: var(--dc-mono);
	font-size: 12px;
	color: var(--dc-muted);
	padding-left: 20px;
	border-left: 1px solid var(--dc-rule);
	white-space: nowrap;
}
@media (max-width: 900px) {
	.dc-tally, .dc-bar-nav .dc-opt { display: none; }
	.dc-bar-nav { gap: 16px; }
}

/* --- hero ---------------------------------------------------------------
   The key art stays - it is the strongest brand asset there is. It just
   stops being a slideshow and stops being the navigation.                 */
.dc-hero {
	position: relative;
	border-bottom: 1px solid var(--dc-rule);
	overflow: hidden;
	background: linear-gradient(180deg, var(--dc-ground-deep), var(--dc-ground));
}
.dc-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--hero, none);
	background-size: cover;
	/* Pulled right of centre: the key art has the Deadly Crusaders logotype
	   baked into the middle of it, which would sit directly behind the
	   headline. This puts the creatures on the right where there is no text
	   and slides the painted logo out toward the edge. */
	background-position: 72% 32%;
	opacity: .85;
}
/* Weighted to the left rather than flat across, so the headline and pitch
   keep their contrast while the right-hand side of the key art stays
   visible. A flat scrim dark enough for the text buried the artwork. */
.dc-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(100deg, rgba(8,10,15,.95) 0%, rgba(8,10,15,.91) 38%, rgba(8,10,15,.62) 66%, rgba(8,10,15,.28) 100%),
		linear-gradient(180deg, rgba(8,10,15,.55) 0%, transparent 30%, rgba(13,16,23,.88) 100%);
}
@media (max-width: 780px) {
	/* No room for the art to breathe beside the text on a phone. */
	.dc-hero::after {
		background: linear-gradient(180deg, rgba(8,10,15,.90) 0%, rgba(8,10,15,.82) 55%, rgba(13,16,23,.95) 100%);
	}
}
.dc-hero-in {
	position: relative;
	z-index: 1;
	padding-block: 78px 62px;
	display: grid;
	gap: 26px;
}
.dc-eyebrow {
	margin: 0;
	font-family: var(--dc-mono);
	font-size: 11.5px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--dc-gold);
}
.dc-h1 {
	font-family: var(--dc-display);
	font-weight: 600;
	font-size: clamp(36px, 6.2vw, 72px);
	line-height: 1.02;
	letter-spacing: .03em;
	text-transform: uppercase;
	margin: 0;
	text-wrap: balance;
	color: #fff;
	text-shadow: 0 2px 24px rgba(0,0,0,.6);
}
.dc-h1 span { display: block; color: var(--dc-gold-hi); }
.dc-pitch {
	max-width: 62ch;
	font-size: 17px;
	color: var(--dc-ink-soft);
	margin: 0;
	text-shadow: 0 1px 12px rgba(0,0,0,.7);
}

.dc-rail {
	display: flex;
	flex-wrap: wrap;
	border: 1px solid var(--dc-rule);
	background: rgba(21, 26, 36, .78);
	max-width: 620px;
}
.dc-rail > div {
	flex: 1 1 0;
	min-width: 118px;
	padding: 14px 18px;
	border-right: 1px solid var(--dc-rule);
	display: grid;
	gap: 3px;
}
.dc-rail > div:last-child { border-right: 0; }
.dc-n {
	font-family: var(--dc-mono);
	font-size: 26px;
	font-variant-numeric: tabular-nums;
	color: var(--dc-gold-hi);
	line-height: 1.1;
}
.dc-n-live { color: var(--dc-live); }
.dc-k {
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--dc-muted);
}

.dc-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.dc-btn {
	display: inline-flex;
	align-items: center;
	padding: 11px 22px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .04em;
	text-decoration: none;
	border: 1px solid var(--dc-rule);
	background: rgba(13,16,23,.6);
	color: var(--dc-ink);
	transition: border-color .18s, color .18s, background .18s;
}
.dc-btn:hover { border-color: var(--dc-gold); color: var(--dc-gold-hi); }
.dc-btn-gold { background: var(--dc-gold); border-color: var(--dc-gold); color: #14100a; }
.dc-btn-gold:hover { background: var(--dc-gold-hi); border-color: var(--dc-gold-hi); color: #14100a; }

/* --- sections ----------------------------------------------------------- */
.dc-sec { padding-block: 60px; }
.dc-sec-tight { padding-bottom: 0; }
.dc-sec-alt { background: var(--dc-ground-deep); border-block: 1px solid var(--dc-rule); }
.dc-sec-head {
	display: flex;
	align-items: baseline;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 24px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--dc-rule);
}
.dc-sec-head h2 {
	font-family: var(--dc-display);
	font-size: 20px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	margin: 0;
	color: var(--dc-ink);
}
.dc-count { font-family: var(--dc-mono); font-size: 12px; color: var(--dc-muted); margin-left: auto; }

.dc-group { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 40px 0 6px; }
.dc-group:first-of-type { margin-top: 0; }
.dc-group h3 {
	font-family: var(--dc-display);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	margin: 0;
	color: var(--dc-gold-hi);
}
.dc-gn { font-family: var(--dc-mono); font-size: 11.5px; color: var(--dc-muted); }
.dc-group p { margin: 0; font-size: 13px; color: var(--dc-muted); flex-basis: 100%; max-width: 70ch; }

/* --- realm cards -------------------------------------------------------- */
.dc-realms { display: grid; grid-template-columns: repeat(auto-fill, minmax(262px, 1fr)); gap: 15px; margin-top: 16px; }
.dc-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--dc-rule);
	background: var(--dc-plate);
	text-decoration: none;
	color: inherit;
	transition: border-color .2s, transform .2s, background .2s;
}
a.dc-card:hover { border-color: var(--dc-gold); background: var(--dc-plate-hi); transform: translateY(-2px); }
.dc-card.is-soon { opacity: .62; }
@media (prefers-reduced-motion: reduce) { a.dc-card:hover { transform: none; } }

.dc-banner {
	position: relative;
	aspect-ratio: 16 / 7;
	display: grid;
	/* Sits in the scrim at the bottom rather than floating over the middle
	   of the artwork, so the caption stays readable without darkening the
	   whole image. */
	place-items: end center;
	padding-bottom: 10px;
	overflow: hidden;
	border-bottom: 1px solid var(--dc-rule);
	background-size: cover;
	background-position: center;
}
/* Only as dark as the caption needs. The art is the point of the card. */
.dc-banner::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.55));
}
.dc-banner span {
	position: relative;
	z-index: 1;
	font-family: var(--dc-display);
	font-size: 14px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: rgba(255,255,255,.9);
	text-align: center;
	padding-inline: 12px;
	text-shadow: 0 1px 10px rgba(0,0,0,.8);
}

.dc-card-body { padding: 13px 15px 15px; display: grid; gap: 8px; }
.dc-card-name { font-size: 15px; font-weight: 600; }
.dc-meta {
	font-family: var(--dc-mono);
	font-size: 11.5px;
	color: var(--dc-muted);
	font-variant-numeric: tabular-nums;
}
.dc-sep { color: var(--dc-rule); margin-inline: 5px; }
.dc-desc { font-size: 12.5px; color: var(--dc-ink-soft); line-height: 1.5; }
.dc-card-foot {
	padding-top: 10px;
	border-top: 1px solid var(--dc-rule-soft);
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 12.5px;
}
.dc-play { color: var(--dc-gold-hi); font-weight: 600; letter-spacing: .04em; }
.is-soon .dc-play { color: var(--dc-muted); }
.dc-tier { font-family: var(--dc-mono); font-size: 11px; color: var(--dc-muted); }

/* --- world cards -------------------------------------------------------- */
.dc-worlds { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 14px; margin-top: 16px; }
.dc-wcard {
	display: grid;
	gap: 8px;
	align-content: start;
	padding: 14px 16px 15px 15px;
	border: 1px solid var(--dc-rule);
	border-left-width: 3px;
	background: var(--dc-plate);
	text-decoration: none;
	color: inherit;
	transition: background .2s, border-color .2s;
}
a.dc-wcard:hover {
	background: var(--dc-plate-hi);
	border-top-color: var(--dc-gold);
	border-right-color: var(--dc-gold);
	border-bottom-color: var(--dc-gold);
}
.dc-wcard.is-soon { opacity: .62; }
.dc-addr {
	font-family: var(--dc-mono);
	font-size: 11.5px;
	color: var(--dc-gold);
	overflow-x: auto;
	white-space: nowrap;
}
.dc-slotbar { display: block; height: 3px; background: var(--dc-rule); overflow: hidden; }
.dc-slotbar i { display: block; height: 100%; background: var(--dc-live); }

/* --- co-op rows --------------------------------------------------------- */
.dc-coop { display: grid; gap: 1px; background: var(--dc-rule); border: 1px solid var(--dc-rule); margin-top: 16px; }
.dc-coop > a, .dc-coop > div {
	background: var(--dc-plate);
	padding: 13px 16px;
	display: grid;
	grid-template-columns: 1.1fr 1.4fr auto auto;
	gap: 16px;
	align-items: center;
	text-decoration: none;
	color: inherit;
	transition: background .18s;
}
.dc-coop > a:hover { background: var(--dc-plate-hi); }
.dc-coop > .is-soon { opacity: .62; }
.dc-nm { font-size: 14.5px; font-weight: 600; }
.dc-ds { font-size: 12.5px; color: var(--dc-ink-soft); }
.dc-st { font-family: var(--dc-mono); font-size: 11.5px; color: var(--dc-muted); white-space: nowrap; }
.dc-go { font-size: 12.5px; color: var(--dc-gold-hi); font-weight: 600; white-space: nowrap; }
.dc-coop > .is-soon .dc-go { color: var(--dc-muted); }
@media (max-width: 760px) {
	.dc-coop > a, .dc-coop > div { grid-template-columns: 1fr auto; }
	.dc-ds { grid-column: 1 / -1; }
}

/* --- launcher ----------------------------------------------------------- */
.dc-launcher {
	border: 1px solid var(--dc-gold);
	background: linear-gradient(135deg, rgba(201,162,39,.09), transparent 62%), var(--dc-plate);
	display: grid;
	grid-template-columns: 1.25fr 1fr;
}
.dc-launcher-l { padding: 30px 32px; display: grid; gap: 15px; align-content: start; }
.dc-launcher-l h2 {
	font-family: var(--dc-display);
	font-size: 25px;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	margin: 0;
	color: var(--dc-gold-hi);
}
.dc-launcher-l p { margin: 0; font-size: 14.5px; color: var(--dc-ink-soft); max-width: 46ch; }
.dc-launcher-r { border-left: 1px solid var(--dc-rule); padding: 26px 28px; display: grid; gap: 11px; align-content: center; }
.dc-lfeat { display: grid; grid-template-columns: 74px 1fr; gap: 11px; align-items: baseline; font-size: 13px; color: var(--dc-ink-soft); }
.dc-lfeat b {
	font-family: var(--dc-mono);
	font-size: 10.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--dc-gold);
	font-weight: 400;
}
@media (max-width: 820px) {
	.dc-launcher { grid-template-columns: 1fr; }
	.dc-launcher-r { border-left: 0; border-top: 1px solid var(--dc-rule); }
}

/* --- joining ------------------------------------------------------------ */
.dc-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(236px, 1fr)); gap: 1px; background: var(--dc-rule); border: 1px solid var(--dc-rule); }
.dc-steps > div { background: var(--dc-plate); padding: 21px 20px; display: grid; gap: 8px; align-content: start; }
.dc-sn { font-family: var(--dc-mono); font-size: 11px; letter-spacing: .18em; color: var(--dc-gold); }
.dc-steps h3 { margin: 0; font-size: 15px; font-weight: 600; }
.dc-steps p { margin: 0; font-size: 13.5px; color: var(--dc-ink-soft); line-height: 1.55; }

/* --- news --------------------------------------------------------------- */
.dc-news { display: grid; gap: 1px; background: var(--dc-rule); border: 1px solid var(--dc-rule); }
.dc-news a {
	background: var(--dc-plate);
	padding: 14px 18px;
	display: grid;
	grid-template-columns: 132px 1fr auto;
	gap: 18px;
	align-items: baseline;
	text-decoration: none;
	transition: background .18s;
}
.dc-news a:hover { background: var(--dc-plate-hi); }
.dc-src { font-family: var(--dc-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--dc-gold); }
.dc-ttl { font-size: 14.5px; color: var(--dc-ink); }
.dc-dt { font-family: var(--dc-mono); font-size: 11.5px; color: var(--dc-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 660px) { .dc-news a { grid-template-columns: 1fr; gap: 5px; } }

/* --- footer ------------------------------------------------------------- */
.dc-foot { border-top: 1px solid var(--dc-rule); background: var(--dc-ground-deep); padding-block: 42px 28px; }
.dc-foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 30px; }
.dc-foot-logo { display: block; width: auto; height: 46px; margin-bottom: 12px; }
.dc-foot-grid h4 {
	font-family: var(--dc-mono);
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--dc-muted);
	margin: 0 0 12px;
	font-weight: 400;
}
.dc-foot-links { display: grid; gap: 6px; font-size: 13px; }
.dc-foot-links a { text-decoration: none; color: var(--dc-ink-soft); }
.dc-foot-links a:hover { color: var(--dc-gold-hi); }
.dc-foot-soon { color: var(--dc-muted); }
.dc-foot-blurb { font-size: 13.5px; color: var(--dc-muted); max-width: 38ch; line-height: 1.6; }
.dc-colophon {
	margin-top: 32px;
	padding-top: 18px;
	border-top: 1px solid var(--dc-rule-soft);
	font-family: var(--dc-mono);
	font-size: 11.5px;
	color: var(--dc-muted);
}
@media (max-width: 880px) { .dc-foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .dc-foot-grid { grid-template-columns: 1fr; } }

/* --- the [server-status] table ------------------------------------------
   Rendered on the Servers page, which still uses the parent theme, so this
   block has to stand on its own without the .dc-home variables above.     */
.dc-statustable { overflow-x: auto; }
.dc-statustable table { width: 100%; border-collapse: collapse; font-size: 14px; }
.dc-statustable th, .dc-statustable td { padding: 9px 12px; text-align: left; border-bottom: 1px solid rgba(128,128,128,.25); }
.dc-statustable th {
	font-family: "Cascadia Mono", Consolas, ui-monospace, monospace;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	opacity: .7;
	font-weight: 400;
}
.dc-statustable td { font-variant-numeric: tabular-nums; }
.dc-statustable .dc-dot { background: #4ea06b; }
.dc-statustable .dc-dot.off { background: #5d6472; }
.dc-statustable .dc-dot.plan { background: #7a86c9; }
.dc-status-checked { font-size: 12px; opacity: .6; margin-top: 10px; }