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

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

html, body {
	overflow: hidden;
}

html, body, body > main {
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
	background: var(--eco) url('/assets/bg.png') no-repeat;
	/* background-blend-mode: multiply; */
	background-size: cover;
	color: #333;
	font-family: -apple-system, BlinkMacSystemFont, 'Titillium Web', "Segoe UI", "Helvetica Neue", sans-serif;
}

/* :root {
	--war :red;
	--sci: #1fc041;
	--civ: #2361ff;
	--eco: #ffde00;
	--res: rgb(122, 89, 45);
	--man: #666;
	--guild: #6f0cd3;
} */

/* TnT version */
:root {
	--war :#1fc041;
	--sci: #ffde00;
	--civ: #6d0505;
	--eco: #2361ff;
	--res: rgb(122, 89, 45);
	--man: #666;
	--guild: #6f0cd3;
	--tnt: #e4501a;
	/* Sizing */
	--token: 90px;
	--pog: 40px;
	--pog-icon: 30px;
}

.pog { 
	background: url('/assets/pog.png') no-repeat;
	background-size: 100% auto;
	display: inline-grid;
	height: var(--pog);
	position: relative;
	width: var(--pog);
}
	.pog:before {
		background: url('/assets/res.png') no-repeat;
		background-size: calc(var(--pog-icon) * 4) calc(var(--pog-icon) * 2);
		content: '';
		height: var(--pog-icon);
		margin: auto;
		width: var(--pog-icon);
		z-index: 1;
	}
		.pog[data-res="stone"]:before { background-position: calc(var(--pog-icon) * -1) 0; }
		.pog[data-res="wood"]:before { background-position: calc(var(--pog-icon) * -2) 0; }
		.pog[data-res="coin"]:before { background-position: calc((var(--pog-icon) * -3) + 1) 0; }
		.pog[data-res="paper"]:before { background-position: 0 calc(var(--pog-icon) * -1); }
		.pog[data-res="glass"]:before { background-position: calc(var(--pog-icon) * -1) calc(var(--pog-icon) * -1); }

.card-sm {
	border: 1px solid black;
	border-radius: 3px;
	display: grid;
	line-height: calc(59px / 2);
	position: relative;
	text-align: center;
	width: 40px;
}
	.card-sm:after { font-weight: bold; }
	.card-sm[data-type="wonder"] { background: var(--tnt); }
	.card-sm[data-type="war"] { background: var(--war); color: black; }
	.card-sm[data-type="sci"] { background: #ddc310; }
	.card-sm[data-type="civ"] { background: var(--civ); }
	.card-sm[data-type="eco"] { background: var(--eco); }
	.card-sm[data-type="res"] { background: var(--res); }
	.card-sm[data-type="man"] { background: var(--man); }
		.card-sm[data-res]:before,
		.card-sm[data-res]:after,
		.card-sm[data-trade]:before,
		.card-sm[data-trade]:after,
		.card-sm[data-provides]:after { 
			background: url('/assets/pog.png');
			background-size: 100% auto;
			content: '';
			display: inline-block;
			height: var(--pog-icon);
			margin: auto;
			width: var(--pog-icon);
		}

		.card-sm[data-res]:before,
		.card-sm[data-trade]:before {
			background: url('/assets/res.png') no-repeat;
			background-size: calc(var(--pog-icon) * 4) calc(var(--pog-icon) * 2);
			height: var(--pog-icon);
			position: absolute;
			top: 2px; left: 5px;
			width: var(--pog-icon);
		}
			.card-sm[data-res="stone"]:before,
			.card-sm[data-trade="stone"]:before { background-position: calc(var(--pog-icon) * -1) 0; }
			.card-sm[data-res="wood"]:before,
			.card-sm[data-trade="wood"]:before { background-position: calc(var(--pog-icon) * -2) 0; }
			.card-sm[data-res="paper"]:before,
			.card-sm[data-trade="paper"]:before { background-position: 0 calc(var(--pog-icon) * -1); }
			.card-sm[data-res="glass"]:before,
			.card-sm[data-trade="glass"]:before { background-position: calc(var(--pog-icon) * -1) calc(var(--pog-icon) * -1); }

	.card-sm[data-type="man"] { background: var(--man); }
	.card-sm[data-type="guild"] { background: var(--guild); }

	.card-sm[data-type="civ"]:after,
	.card-sm[data-type="sci"]:after { 
		content: attr(data-vp);
	}

	.card-sm[data-war]:after { content: attr(data-war); }
	.card-sm[data-provides="res"]:after { filter: sepia(1); }

	.card-sm .emblem-sci {
		color: #333;
		font-size: 2em;
		position: absolute;
		top: 6px;
		left: 2px;
		mix-blend-mode: overlay;
	}

.token {
	background: url('/assets/tokens.png') no-repeat;
	background-size: cover;
	border: 0 none;
	border-radius: 100%;
	color: white;
	display: inline-grid;
	font-size: 0.8em;
	height: 90px;
	place-items: center;
	position: relative;
	width: 90px;
}
	.token[disabled],
	.token[data-taken] {
		opacity: 0.5;
		transform: scale(0.9);
	}

	.token:before { 
		background: url('/assets/token_icons.png') no-repeat;
		background-size: calc(var(--token) * 10) var(--token);
		content: '';
		filter: grayscale(100%);
		height: 100%;
		mix-blend-mode: luminosity;
		opacity: 0.75;
		position: absolute;
		width: 100%;
	}
		.token[data-id="badger"]:before { background-position: calc(var(--token) * -1) 0; }
		.token[data-id="boar"]:before { background-position: calc(var(--token) * -2) 0; }
		.token[data-id="fox"]:before { background-position: calc(var(--token) * -3) 0; }
		.token[data-id="wolf"]:before { background-position: calc(var(--token) * -4) 0; }
		.token[data-id="hopper"]:before { background-position: calc(var(--token) * -5) 0; }
		.token[data-id="bellafide"]:before { background-position: calc(var(--token) * -6) 2px; }
		.token[data-id="archimedes"]:before { background-position: calc(var(--token) * -7) 0; }
		.token[data-id="quartermaster"]:before { background-position: calc(var(--token) * -8) 2px; }
		.token[data-id="mill"]:before { background-position: calc(var(--token) * -9) 0; }

	.token:hover:after {
		background: rgba(0, 0, 0, 0.8);
		border-radius: 4px;
		content: attr(data-desc);
		padding: 10px;
		position: absolute;
		top: 100%; left: -50%;
		width: 200%;
	}

.btn-board {
	background: url('assets/board2.png') no-repeat;
	background-size: 100% 100%;
	border: 0 none;
	color: white;
	cursor: pointer;
	font-weight: bold;
	height: 50px;
	padding: 0 20px;
	text-align: center;
}
	.btn-board:not([disabled]):hover {
		transform: scale(1.1) rotate(3deg);
	}

	.btn-board[disabled] {
		color: #999;
		cursor: not-allowed;
		filter: grayscale(1);
	}

.alerts {
	padding: 5px;
	position: fixed;
	width: 100%;
	z-index: 999;
}

.alert {
	background: var(--tnt);
	border: 1px solid black;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
	color: white;
	margin: 0 auto 5px;
	padding: 10px;
	max-width: 480px;
}
	.alert img { 
		float: left;
		margin-top: 5px;
		width: 32px;
	}
	.alert p { 
		margin: 0;
		padding: 10px 0 10px 45px;
	}
	.alert footer { 
		border-top: 1px solid rgba(255, 255, 255, 0.25);
		padding-top: 10px;
		text-align: right; 
	}
	.alert button {
		background: transparent;
		border: 1px solid white;
		border-radius: 4px;
		color: white;
		height: 30px;
		width: 80px;
	}

@font-face {
	font-family: 'icomoon';
	src:  url('/assets/fonts/icomoon.eot?rqxrk7');
	src:  url('/assets/fonts/icomoon.eot?rqxrk7#iefix') format('embedded-opentype'),
	  url('/assets/fonts/icomoon.ttf?rqxrk7') format('truetype'),
	  url('/assets/fonts/icomoon.woff?rqxrk7') format('woff'),
	  url('/assets/fonts/icomoon.svg?rqxrk7#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

[class^="icon-"], [class*=" icon-"] {
	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: 'icomoon' !important;
	speak: never;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Science (Civilized) Symbols */
.icon-star:before,
.icon-armillary:before {
	content: "\e907";
}
.icon-bolt:before,
.icon-bowl:before {
	content: "\e908";
}
.icon-rain:before {
	content: "\e909";
}
.icon-cloud:before,
.icon-level:before {
	content: "\e90a";
}
.icon-sun:before,
.icon-sundial:before {
	content: "\e90b";
}
.icon-moon:before,
.icon-wheel:before {
	content: "\e90c";
}
.icon-leaf:before,
.icon-quill:before {
	content: "\e90d";
}

/* Economy Cards (Longcoat) Link Icons */
.icon-drink:before {
	content: "\e903";
}
.icon-cup:before {
	content: "\e904";
}
/* Science Cards (Civilized) Link Icons */
.icon-mountain:before {
	content: "\e900";
}
.icon-flower:before {
	content: "\e901";
}
.icon-tree:before {
	content: "\e902";
}
.icon-snow:before {
	content: "\e905";
}
/* War Cards (KSR) Link Icons */
.icon-flag:before {
	content: "\e906";
}
.icon-target:before {
	content: "\e90e";
}
.icon-fire:before {
	content: "\e90f";
}
.icon-shield:before {
	content: "\e910";
}
.icon-hammer:before {
	content: "\e911";
}
/* Civilian Cards (Commonfolk) Link Icons */
.icon-happy:before {
	content: "\e916";
}
.icon-wine:before {
	content: "\e917";
}
.icon-can:before {
	content: "\e913";
}
.icon-feather:before {
	content: "\e912";
}
.icon-shop:before {
	content: "\e914";
}
.icon-clock:before {
	content: "\e915";
}