@font-face {
	/* public domain (Earl Allen / Doug Miles), see black-chancery-license.txt */
	font-family: 'Black Chancery';
	src: url('../fonts/black-chancery.ttf') format('truetype');
	font-display: swap;
}

/* Site navigation in the style of the game UI: dark stone bar with gold frame lines,
   the Alter Dimension crest in the middle, calligraphic labels and a red "Play now"
   button like the in-game buttons. Drawn with CSS, sharp on any screen. */
.site-nav {
	--gold: #d8b45e;
	--gold-light: #f3dc9a;
	--gold-dark: #6d5222;
	--stone: #17120e;
	--bar-h: 66px;
	position: sticky;
	top: 0;
	z-index: 1000;
	font-family: 'Black Chancery', 'Candara', Georgia, serif;
}
.site-nav__bar {
	position: relative;
	z-index: 2; /* the crest stays above the opened mobile menu */
	height: var(--bar-h);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 20px;
	/* brown woody texture, matched 1:1 to the sidebar boxes (.sidebar-box
	   use the same sidebar-box-top-background.png; cover keeps it seamless
	   and undistorted across the full-width bar) */
	background: var(--stone) url("../images/sidebar-box-top-background.png") no-repeat scroll center top;
	background-size: cover;
	/* double gold frame line top and bottom, like the in-game panels */
	box-shadow:
		inset 0 1px 0 rgba(243, 220, 154, 0.55),
		inset 0 3px 0 rgba(0, 0, 0, 0.7),
		inset 0 4px 0 rgba(216, 180, 94, 0.25),
		inset 0 -1px 0 rgba(243, 220, 154, 0.55),
		inset 0 -3px 0 rgba(0, 0, 0, 0.7),
		inset 0 -4px 0 rgba(216, 180, 94, 0.25),
		0 6px 18px rgba(0, 0, 0, 0.55);
}

/* menu groups left and right of the crest */
.site-nav__side {
	flex: 1;
	display: flex;
	align-items: center;
	min-width: 0;
}
.site-nav__side--left { justify-content: flex-end; padding-right: 130px; }
.site-nav__side--right { justify-content: flex-start; padding-left: 130px; }
.site-nav__side ul {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}
.site-nav__side li {
	position: relative;
	margin: 0;
	padding: 0;
	background: none;
}
/* small gold diamond between items */
.site-nav__side li + li::before {
	content: "";
	position: absolute;
	left: -3px;
	top: 50%;
	width: 6px;
	height: 6px;
	margin-top: -3px;
	background: linear-gradient(135deg, var(--gold-light), var(--gold-dark));
	transform: rotate(45deg);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
}
.site-nav__side li a {
	position: relative;
	display: block;
	padding: 8px 22px 10px;
	font-size: 20px;
	line-height: 1;
	color: #e9d8ac;
	text-decoration: none;
	text-shadow: 0 1px 0 #000, 0 0 12px rgba(0, 0, 0, 0.9);
	transition: color .15s ease, text-shadow .15s ease;
}
.site-nav__side li a:hover,
.site-nav__side li a:focus-visible {
	color: #fff3cf;
	text-decoration: none;
	outline: none;
	text-shadow: 0 1px 0 #000, 0 0 14px rgba(255, 190, 90, 0.55);
}
.site-nav__side li a.is-active {
	color: var(--gold-light);
	text-shadow: 0 1px 0 #000, 0 0 16px rgba(255, 178, 49, 0.6);
}

/* the crest hangs over the bar */
.site-nav__crest {
	position: absolute;
	left: 50%;
	top: 2px;
	width: 200px;
	margin-left: -100px;
	text-align: center;
	transition: opacity .25s ease, transform .25s ease;
}
.site-nav__crest img {
	display: inline-block;
	width: 168px;
	height: auto;
	filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 18px rgba(232, 97, 28, 0.25));
	transition: transform .2s ease;
}
.site-nav__crest:hover img { transform: translateY(-1px) scale(1.03); }

/* red lacquer button with gold rim, like "Claim" in the game */
.site-nav__play {
	display: inline-block;
	margin-left: 26px;
	padding: 9px 22px 11px;
	font-size: 19px;
	line-height: 1;
	color: #fff4dc !important;
	text-decoration: none !important;
	text-shadow: 0 1px 0 #3a0000, 0 0 6px rgba(0, 0, 0, 0.6);
	background: linear-gradient(180deg, #d4242a 0%, #a3141a 48%, #7c0b10 52%, #8f1015 100%);
	border: 1px solid #2a0204;
	border-radius: 5px;
	box-shadow:
		inset 0 0 0 1px rgba(243, 220, 154, 0.85),
		inset 0 0 0 2px rgba(110, 10, 14, 0.9),
		inset 0 2px 0 rgba(255, 170, 160, 0.45),
		0 2px 0 rgba(0, 0, 0, 0.6),
		0 4px 12px rgba(0, 0, 0, 0.5);
	transition: filter .15s ease, transform .15s ease;
}
.site-nav__play:hover,
.site-nav__play:focus-visible {
	filter: brightness(1.12);
	transform: translateY(-1px);
	outline: none;
}
.site-nav__play:active { transform: translateY(1px); filter: brightness(.95); }

/* the crest in the bar replaces the big logo on every page */
.site-nav ~ .content .logo { display: none; }
.site-nav ~ .content { padding-top: 110px; }

/* mobile menu */
.site-nav__toggle,
.site-nav__mobile { display: none; }

@media screen and (max-width: 1100px) {
	.site-nav__side--left { padding-right: 110px; }
	.site-nav__side--right { padding-left: 110px; }
	.site-nav__side li a { padding: 8px 15px 10px; font-size: 18px; }
	.site-nav__play { margin-left: 16px; font-size: 17px; padding: 9px 16px 11px; }
	.site-nav__crest img { width: 150px; }
}

@media screen and (max-width: 860px) {
	.site-nav { --bar-h: 60px; }
	.site-nav__bar { justify-content: space-between; padding: 0 14px; }
	.site-nav__side { display: none; }
	.site-nav__crest {
		position: static;
		width: auto;
		margin: 0;
		align-self: flex-start;
		padding-top: 3px;
	}
	.site-nav__crest img { width: 112px; }
	.site-nav__toggle {
		display: block;
		width: 44px;
		height: 40px;
		padding: 10px 11px;
		background: linear-gradient(180deg, #2a2019, #120d0a);
		border: 1px solid var(--gold-dark);
		border-radius: 5px;
		box-shadow: inset 0 0 0 1px rgba(243, 220, 154, 0.25);
		cursor: pointer;
	}
	.site-nav__toggle span {
		display: block;
		height: 2px;
		margin-bottom: 6px;
		background: var(--gold);
		transition: transform .2s ease, opacity .2s ease;
	}
	.site-nav__toggle span:last-child { margin-bottom: 0; }
	.site-nav.is-open .site-nav__toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
	.site-nav.is-open .site-nav__toggle span:nth-child(2) { opacity: 0; }
	.site-nav.is-open .site-nav__toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

	.site-nav.is-open .site-nav__mobile {
		display: block;
		position: absolute;
		left: 0;
		right: 0;
		z-index: 1;
		top: var(--bar-h);
		padding: 30px 18px 20px;
		background: rgba(16, 11, 8, 0.98);
		border-bottom: 1px solid var(--gold-dark);
		box-shadow: 0 16px 30px rgba(0, 0, 0, 0.6);
	}
	.site-nav__mobile ul { margin: 0 0 16px; padding: 0; list-style: none; }
	.site-nav__mobile li { margin: 0; padding: 0; border-bottom: 1px solid rgba(216, 180, 94, 0.15); }
	.site-nav__mobile li a {
		display: block;
		padding: 13px 4px;
		font-size: 20px;
		color: #e9d8ac;
		text-decoration: none;
	}
	.site-nav__mobile li a.is-active { color: var(--gold-light); }
	.site-nav__mobile .site-nav__play { display: block; margin: 0; text-align: center; padding: 13px 16px 14px; }
	.site-nav ~ .content { padding-top: 70px; }
}

/* text for search engines and screen readers only */
.visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}