/* CSS Document */

@charset "utf-8";

/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700&family=Nova+Round&display=swap');

/* GENERAL */

body {
	color: #FDE1C8;
	margin: 0;
	font-size: 15px;
	background: #000 url("/images/backgrounds/content-background.jpg") no-repeat fixed 0 0 / 200%;
}
body,
th,
td,
p,
input,
select,
textarea,
button {
	font-family: "Nanum Gothic", "Trebuchet MS", Tahoma, Arial, sans-serif;
	font-weight: 400;
}
input,
select,
textarea,
button {
	accent-color: #844600;
}
#main,
header,
footer {
	width: min(980px, 100% - 4rem);
	margin: 0 auto;
	padding: 2rem 2rem;
}
header,
footer {
	background-color: rgba(0, 0, 0, 0.75);
}
#main {
	background-color: rgba(0, 0, 0, 0.6);
}
p,
li {
	line-height: 180%;
	margin: 0.8em 0;
}
h1,
h2,
h3,
h4,
.h1,
.h2,
.h3,
.h4,
#logo,
nav a,
button,
.button {
	font-family: "Nova Round", "Trebuchet MS", Tahoma, Arial, sans-serif;
	font-weight: 400;
}
a {
	color: #FBC182;
	text-decoration: none;
	transition: 0.4s color linear, 0.4s box-shadow linear, 0.4s background-color linear, 0.4s text-shadow linear;
}
button {
	transition: 0.4s color linear, 0.4s box-shadow linear, 0.4s background-color linear, 0.4s text-shadow linear;
}
a:hover {
	color: #FFFAEA;
	text-decoration: none;
}
h1,
.h1 {
	color: #E49D42;
	font-size: 2rem;
	padding: 2px 0;
}
h2,
.h2 {
	color: #FDE1C8;
	font-size: 1.6rem;
	padding: 2px 0;
}
h3,
.h3 {
	color: #EBC296;
	font-size: 1.27rem;
}
h4,
.h4 {
	color: #EBC296;
	font-size: 1.18rem;
}
#main > h1:first-child,
section > h2:first-child {
	margin-top: 0;
}
table {
	border-collapse: collapse;
	border: 1px solid rgba(205, 185, 155, 0.4);
}
th,
td {
	vertical-align: top;
	text-align: left;
	padding: 6px 7px;
	border: 1px solid rgba(245, 205, 155, 0.3);
}
th {
	background-color: rgba(205, 185, 155, 0.24);
}
thead th {
	border-bottom: 2px solid rgba(205, 185, 155, 0.4);
}
tbody th {
	border-right: 2px solid rgba(205, 185, 155, 0.4);
}
th:first-child,
td:first-child {
	padding-left: 4px;
}
th:last-child,
td:last-child {
	padding-right: 4px;
}
ul {
	padding-left: 1.25em;
}
ul li {
	margin-left: 0.15em;
	padding-left: 0.3em;
}
button,
.button {
	color: #fdf8f5;
	text-transform: uppercase;
	padding: 0.3rem 1.5rem;
	box-shadow: 0 0 0 2px #783700 inset, 0 -11px 12px 2px #B88B30 inset, 0 8px 6px 2px #884D30 inset;
	background-color: #C88B50;
	border-radius: 3px;
	text-shadow: 0 -3px 2px rgba(70, 70, 0, 0.7);
	border: 0 none;
	font-weight: 800;
	letter-spacing: 0.02em;
}
button {
	font-size: 1em;
	height: 2.6em;
	min-width: 10em;
	font-weight: 700;
}
button:hover,
.button:hover {
	color: #FFFFFF;
	box-shadow: 0 0 0 2px #983600 inset, 0 -11px 12px 2px #D89B30 inset, 0 8px 6px 2px #A86D30 inset;
	text-shadow: 0 -1px 2px rgba(245, 244, 205, 0.6);
}
.read-more a {
	box-shadow: 0 0 2px 1px #AB7132;
	border-radius: 3px;
	padding: 0.2em 0.8em;
	text-transform: uppercase;
	font-size: 0.9em;
}
.read-more a:hover {
	box-shadow: 0 0 2px 1px #D1904A;
}

/* HEADER */

#logo {
	text-align: center;
	font-weight: 700;
	min-height: 164px;
}
#logo img {
	width: 80%;
	max-width: 280px;
	height: auto;
}
#logo h1,
#logo a {
	display: block;
	margin: 0;
	padding: 2rem 0;
}
#logo h1,
#logo a,
#logo a:hover {
	color: #840000;
}
#logo .extended-name {
	display: block;
	padding: 0.7rem 0 0;
	box-shadow: 0 3px 0 0 #840000 inset;
	margin: 0.7rem 0 0;
	font-size: 1.3rem;
	font-weight: 700;
}

@media (height >= 800px) {
	header {
		position: sticky;
		inset-block-start: -10.6rem;
		z-index: 100;
	}
}

/* MENU */

nav ul {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	text-align: center;
}
nav li {
	margin: 0 0 0.3rem;
	padding: 0;
	display: inline-block;
	font-size: 0.88rem;
	line-height: 120%;
}
nav li + li {
	margin: 0 0 0.3rem 0.1rem;
}
nav a {
	text-transform: uppercase;
	color: #cedabf;
	display: block;
	padding: 0.3rem 0.5rem;
	box-shadow: 0 0 0 2px #783700 inset, 0 -11px 12px 2px #966320 inset, 0 8px 6px 2px #653509 inset;
	background-color: #785600;
	border-radius: 3px;
	text-shadow: 0 -2px 1px rgba(90, 0, 0, 0.7);
}
nav a:hover,
nav .current a {
	color: #ffffef;
	box-shadow: 0 -7px 5px 6px rgba(255, 255, 225, 0.2) inset, 0 0 0 2px #785500 inset, 0 -11px 12px 2px #A68330 inset, 0 8px 6px 2px #7C5C00 inset;
	text-shadow: 0 -3px 1px rgba(90, 0, 0, 0.9);
}

/* CONTENT */

section,
.houses #main,
.list,
.form p,
#buildings-units,
#screen-gallery ul {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0 2rem;
}
section > *,
.houses #main > *,
.list > *,
.form p > *,
#buildings-units > *,
#screen-gallery li {
	flex: 1 0 100%;
}
section + section {
	margin-top: 3rem;
}
.house-motif,
.house-motif img {
	width: 69px;
	height: 69px;
}
.house-motif {
	float: right;
	shape-outside: circle(50%);
	margin: 0 0 0.4rem 1rem;
}
.houses section + h2 {
	margin: 4rem 0 0;
}
table.downloads th:last-child,
table.downloads td:last-child {
	text-align: right;
}
.buildings section,
.units section,
.special section,
.strategies section {
	box-shadow: 0 2px 0 0 #6C1010 inset, 0 -7px 20px 0 #29170E inset, 0 -14px 22px -8px #3D0202;
	margin: 1.5rem auto;
	padding: 0.5rem 1.4rem;
	background-color: #130606;
}
.buildings section h3,
.units section h3,
.special section h3 {
	color: #B9735E;
}
.versions {
	width: 100%;
	max-width: 182px;
	margin: 0 0 1.1rem;
}
.versions td {
	padding: 3px 7px;
}
.versions tr:first-child td {
	padding-top: 7px;
}
.versions tr:last-child td {
	padding-bottom: 7px;
}
.list .buildings ul,
.list .units ul,
.list .special ul {
	margin: 0;
	padding: 0;
	list-style: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0.3rem 1.1rem;
}
.list .units ul {
	gap: 0.3rem 1.05rem;
}
.list .buildings li,
.list .units li,
.list .special li {
	position: relative;
	display: inline-block;
	font-size: 0.9em;
	line-height: 120%;
	flex: 0 1 91px;
	padding: 0;
}
.list .units li {
	flex: 0 1 123px;
}
.list .buildings .image,
.list .units .image,
.list .special .image {
	width: 91px;
	height: 55px;
	display: block;
	overflow: hidden;
}
.list .units .image {
	width: 123px;
	height: 77px;
}
.list .buildings img,
.list .units img,
.list .special img {
	max-width: 91px;
	width: 100%;
	height: auto;
	transition: 0.4s filter linear;
	filter: grayscale(80%) sepia(100%) brightness(70%) contrast(200%) hue-rotate(-20deg);
}
.list .saboteur img,
.list .devastator img {
	filter: grayscale(0%) sepia(100%) brightness(130%) contrast(130%) hue-rotate(-20deg);
}
.list .units img {
	max-width: 123px;
}
.list .buildings li:hover img,
.list .units li:hover img,
.list .special li:hover img {
	filter: grayscale(0%) sepia(0%) brightness(100%) contrast(100%) hue-rotate(0deg);
}
.list .buildings .name,
.list .units .name,
.list .special .name {
	display: block;
	position: absolute;
	width: 85px;
	transform: translate(0, -100%);
	background-color: rgba(90, 10, 10, 0.8);
	color: #FFF;
	padding: 3px 3px 0;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.9);
	transition: 0.7s background-color linear;
}
.list .units .name {
	width: 117px;
}
.list .buildings li:hover .name,
.list .units li:hover .name,
.list .special li:hover .name {
	background-color: rgba(130, 30, 30, 0.2);
}
.buildings .versions {
	background: transparent url(/images/backgrounds/stone-buildings.gif) no-repeat 0 0;
	box-shadow: 0 0 10px 4px rgba(215, 205, 140, 0.3);
	border-radius: 3px;
}
.units .versions,
.special .versions {
	background: transparent url(/images/backgrounds/desert-units.gif) no-repeat 0 0;
	box-shadow: 0 0 10px 4px rgba(215, 205, 140, 0.3);
	border-radius: 3px;
}
.versions td {
	border: 0 none;
	color: #FFF6D4;
	vertical-align: middle;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
}
.versions td:nth-child(1) {
	width: 40%;
	text-align: center;
}
.versions td:nth-child(2) {
	width: 60%;
}
.stats th:nth-child(1) {
	width: 30%;
}
.stats td:nth-child(2) {
	width: 70%;
}
.strategies section p {
	line-height: 150%;
}
#links .name {
	display: inline-block;
	min-width: 12em;
	margin-right: 0.5em;
}
#screen-gallery ul {
 	list-style: none;
	margin: 0 auto;
	padding: 0;
	text-align: center;
}
#screen-gallery li {
	margin: 0 0 1.2rem;
	padding: 0;
	display: inline-block;
}
#screen-gallery .image {
	margin: 0 0 0.5rem;
	overflow: auto;
	box-shadow: 0 0 2px 1px #5A1F1F;
}
#screen-gallery a {
	display: block;
	overflow: auto;
}
#screen-gallery img {
	width: 100%;
	max-width: 320px;
	height: auto;
}
#screen-gallery .caption {
	color: #FFA0A1;
	font-size: 0.9em;
	margin: 0.1em auto 0.5em;
	box-shadow: 0 -2px 0 #700001 inset;
	line-height: 120%;
	padding: 0 0 0.8em;
}
.buttons {
	margin-top: 2rem;
}
.form {
	disply: block;
	margin: 2rem 0;
}
.form textarea {
	height: 3.5em;
}
.form p > label:first-child {
	display: block;
}
.form input[type=text],
.form input[type=email],
.form select,
.form textarea {
	color: #1E150E;
	background-color: #FDE1C8;
	display: block;
	width: 100%;
	padding: 0.3em 0.5em;
	border: 0 none;
	border-radius: 3px;
}
.form .buttons {
	text-align: right;
}

@media (width < 450px) {
	p > img:only-child,
	p > a:only-child > img {
		width: 100%;
	}
	.list .buildings li,
	.list .units li,
	.list .special li {
		flex: 0 0 calc(50% - 0.75rem);
	}
	.list .buildings .image,
	.list .units .image,
	.list .special .image,
	.list .buildings img,
	.list .units img,
	.list .special img {
		width: 100%;
		height: auto;
		max-width: none;
	}
	.list .buildings .name,
	.list .units .name,
	.list .special .name {
		position: relative;
		margin-block: -0.2rem -1.4rem;
		width: auto;
	}
}

@media (width >= 900px) {
	.houses > .house,
	.houses #main > .house,
	#buildings-units > #buildings,
	#buildings-units > #units,
	#buildings-units > #special {
		flex: 1 1 30%;
	}
	#screen-gallery li {
		flex: 1 1 20%;
	}
	.houses #main > .house {
		align-self: baseline;
	}
	.image-text .image,
	.large-image-text .image,
	.image-text .description,
	.image-text .download,
	.image-text .strategy,
	.large-image-text .description,
	.large-image-text .download,
	.large-image-text .strategy,
	.download > p:first-child {
		margin-top: 0;
	}
	.image-text .strategy + .strategy,
	.large-image-text .strategy + .strategy {
		margin-top: 1.5rem;
	}
	.image-text .strategy + ul.strategy,
	.large-image-text .strategy + ul.strategy {
		margin: 0;
	}
	.image-text .image,
	.buildings section .image,
	.units section .image,
	.special section .image {
		flex: 0 1 182px;
		margin: 3px 0 0 0;
		height: 110px;
		align-self: baseline;
	}
	.large-image-text .image {
		flex: 0 1 320px;
		height: 200px;
	}
	.image-text .image,
	.large-image-text .image {
		margin-bottom: 1.8rem;
	}
	.list .buildings .image,
	.list .units .image,
	.list .special .image,
	.buildings section .image,
	.units section .image,
	.special section .image {
		box-shadow: 0 0 3px 4px #5A1F1F;
		overflow: hidden;
	}
	.image-text .description,
	.image-text .download,
	.image-text .strategy {
		flex: 2 0 60%;
		margin-top: 0;
	}
	.large-image-text .description,
	.large-image-text .download,
	.large-image-text .strategy {
		flex: 3 0 50%;
	}
	.versions {
		margin: 0;
		max-width: 213px;
	}
	.buildings section .versions,
	.units section .versions,
	.special section .versions {
		flex: 1 0 182px;
	}
	.buildings section .stats,
	.units section .stats,
	.special section .stats {
		flex: 0 1 50%;
		align-self: flex-start;
	}
	.buildings section .versions th,
	.buildings section .versions td,
	.buildings section .stats th,
	.buildings section .stats td,
	.units section .versions th,
	.units section .versions td,
	.units section .stats th,
	.units section .stats td,
	.special section .versions th,
	.special section .versions td ,
	.special section .stats th,
	.special section .stats td {
		vertical-align: middle;
	}
	.buildings section .versions th,
	.buildings section .versions td {
		background-color: transparent;
		border: 0 none;
	}
	.buildings .versions td:nth-child(1) {
		text-align: left;
	}
	.buildings section .versions td {
		padding: 0.8em 1em;
	}
	.buildings section:nth-child(19) .versions td,
	.buildings section:nth-child(20) .versions td {
		padding: 0.4em 1em;
	}
	.buildings section .versions td,
	.units section .versions td,
	.special section .versions td {
		padding: 1em;
	}
	.buildings section .versions tr + tr td,
	.buildings section:nth-child(19) .versions tr + tr td,
	.buildings section:nth-child(20) .versions tr + tr td,
	.units section .versions tr + tr td,
	.special section .versions tr + tr td {
		padding-top: 2px;
	}
	.buildings section .stats th,
	.units section .stats th,
	.special section .stats th {
		background-color: rgba(205, 185, 155, 0.14);
	}
	.buildings section .stats tr:first-child td,
	.units section .stats tr:first-child td,
	.special section .stats tr:first-child td {
		padding-top: 2px;
	}
	.buildings section .versions tr:last-child td,
	.units section .versions tr:last-child td,
	.special section .versions tr:last-child td {
		padding-bottom: 0.4em;
	}
	.image-text .download tr th:first-child {
		padding-left: 3px;
	}
	.form p > label {
		flex: 0 1 9em;
	}
	.form p > label:first-child {
		flex: 0 1 22%;
	}
	.form input[type=text],
	.form input[type=email],
	.form select,
	.form textarea {
		flex: 5 0 60%;
	}
	.form .buttons {
		margin-left: 25%;
	}
	.form .buttons button {
		flex: 0 1 20em;
	}
	.downloads th:nth-child(1),
	.downloads td:nth-child(1) {
		width: 15em;
	}
	.downloads th:nth-child(2),
	.downloads td:nth-child(2) {
		width: calc(100% - 22em);
	}
	.downloads th:nth-child(3),
	.downloads td:nth-child(3) {
		width: 5em;
	}
	#download-game {
		width: 100%;
	}
	#download-game th:nth-child(1) {
		width: 7em;
		padding-right: 1.5em;
	}
}

/* IMAGE POPUP */

#popup-image-overlay {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 200;
}
#popup-image,
#popup-previous,
#popup-next {
	position: absolute;
}
#popup-image {
	top: 50%;
	left: 50%;
	box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(142, 152, 180, 0.5);
	max-width: 95%;
	transform: translate(-50%, -50%);
	overflow: hidden;
	z-index: 1000;
}
#popup-image.svg {
	width: calc(100% - 15rem);
	box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.8), 0 0 0 3px rgba(202, 202, 240, 0.7) inset;
}
#popup-image a {
	min-width: 80px;
	min-height: 60px;
	display: block;
	background-color: rgba(10, 12, 28, 0.8);
	overflow: hidden;
}
#popup-image.svg a {
	background-color: rgba(10, 12, 28, 0.9);
	padding: 1rem;
	margin: 4px;
}
#popup-image img {
	display: block;
	max-width: 100vw;
	max-height: 100vh;
}
#popup-image.svg img {
	width: 100%;
	height: auto;
}
#popup-image .no-image {
	display: block;
	color: rgba(157, 157, 157, 0.7);
	background-color: rgba(57, 57, 57, 0.8);
	text-align: center;
	padding: 4em 0 0;
	width: 18vh;
	height: 10vh;
	max-width: 400px;
	max-height: 300px;
}
#popup-previous,
#popup-next {
	height: 100vh;
	transition: 0.3s left ease-in-out, 0.3s right ease-in-out;
	top: 0;
}
#popup-previous {
	left: 40%;
	z-index: 980;
}
#popup-next {
	right: 40%;
	z-index: 981;
}
#popup-previous a,
#popup-next a {
	width: 10rem;
	color: rgba(255, 255, 255, 0);
	filter: invert(60%);
	display: block;
	transform: translateY(-50%);
	top: 50%;
	position: relative;
	z-index: 500;
	height: 10rem;
	transition: 0.3s transform ease-in-out, 0.2s opacity linear;
	transform-origin: 50% 0;
	opacity: 0.4;
	cursor: default;
}
#popup-previous .active,
#popup-next .active {
	filter: invert(100%);
	opacity: 0.9;
	cursor: pointer;
}
#popup-previous .active:hover,
#popup-next .active:hover {
	transform: scale(1.05, 1.05) translateY(-50%);
	opacity: 1;
}
#popup-previous .start,
#popup-previous .start,
#popup-next .start.active,
#popup-next .start.active {
	transform: scale(0.5, 0.5) translateY(-80%);
	opacity: 0.4;
}
#popup-previous a {
	background: url("data:image/svg+xml;charset=UTF-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTI1NiAxNzkyIDE3OTIiPgogIDxwYXRoIGQ9Ik0xMTI5LjI1NCAxMzc1LjU3NmwtNjUyLTY1MXEtMzctMzctMzctOTAuNXQzNy05MC41bDY1Mi02NTFxMzctMzcgOTAuNS0zN3Q5MC41IDM3bDc1IDc1cTM3IDM3IDM3IDkwLjV0LTM3IDkwLjVsLTQ4NiA0ODYgNDg2IDQ4NXEzNyAzOCAzNyA5MXQtMzcgOTBsLTc1IDc1cS0zNyAzNy05MC41IDM3dC05MC41LTM3eiIgZmlsbD0iY3VycmVudENvbG9yIi8+Cjwvc3ZnPg==") no-repeat 0 0 / 100%;
}
#popup-next a {
	background: url("data:image/svg+xml;charset=UTF-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTI1NiAxNzkyIDE3OTIiPgogIDxwYXRoIGQ9Ik0xNDQ4LjI4OCA2MjYuOTgzcTAgNTItMzcgOTFsLTY1MiA2NTFxLTM3IDM3LTkwIDM3dC05MC0zN2wtNzYtNzVxLTM3LTM5LTM3LTkxIDAtNTMgMzctOTBsNDg2LTQ4Ni00ODYtNDg1cS0zNy0zOS0zNy05MSAwLTUzIDM3LTkwbDc2LTc1cTM2LTM4IDkwLTM4dDkwIDM4bDY1MiA2NTFxMzcgMzcgMzcgOTB6IiBmaWxsPSJjdXJyZW50Q29sb3IiLz4KPC9zdmc+") no-repeat 0 0 / 100%;
}

/* FOOTER */