:root
{
	--dark: #060606;
	--lightgreen: #729a65;
	--green: #465e3e;
	--darkgreen: #22311d;
	--red: tomato;
	--darkred: #801300;
	--decksize: 8;
	--card_ratio: 2/3;
	--common_color: dodgerblue;
	--uncommon_color: yellowgreen;
	--special_color: slateblue;
	--ancient_color: gold;
	--coins_image: url("../gfx/ui/coins.png");
	--crystals_image: url("../gfx/ui/crystals.png");
}

@font-face
{
    font-family: "MedievalSharp";
    src: url("../fonts/medieval_sharp.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

body
{
	overflow: hidden;
	margin: 0;
	font-family: "MedievalSharp", cursive;
	background-color: var(--dark);
	color: white;
}

.main_div
{
	background: linear-gradient(transparent 60%, var(--dark) 150%);
	position: absolute;
	top: 10%;
	left: 0;
	width: 100%;
	height: 90%;
}

.connectionlostscreenblock
{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 1000000000000000;
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--red);
	background-color: rgba(0, 0, 0, 0.3);
	box-shadow: inset 0 0 100px var(--dark);
	box-sizing: border-box;
	border: 1px solid var(--darkred);
	pointer-events: auto;
	font-family: 'Courier New', Courier, monospace;
	text-align: center;
	user-select: none;
}

.version_display
{
	position: absolute;
	bottom: 0;
	left: 0;
	margin: 10px;
	font-size: 12px;
	color: white;
	pointer-events: none;
	text-shadow: 0 0 1px black, 0 0 3px black, 0 0 5px black;
}

.documentalert
{
	position: absolute;
	color: var(--red);
	text-shadow: 0 0 3px black, 0 0 5px black, 0 0 10px black;
	transform: translate(-50%, -50%);
	animation: alertfadeout 2.5s;
	pointer-events: none;
	text-align: center;
	z-index: 10000000;
}

@keyframes alertfadeout
{
	20%
	{
		opacity: 1;
	}
	50%
	{
		opacity: 1;
	}
	to
	{
		opacity: 0;
		transform: translate(-50%, calc(-50% - 50px));
	}
}

div.popupalertbox
{
	height: 200px;
	aspect-ratio: 2/3;
}

resource-power::before
{
	content: "power";
	text-transform: uppercase;
	color: var(--red) !important;
	font-style: normal !important;
}

resource-magic::before
{
	content: "magic";
	text-transform: uppercase;
	color: slateblue !important;
	font-style: normal !important;
}

resource-wisdom::before
{
	content: "wisdom";
	text-transform: uppercase;
	color: dodgerblue !important;
	font-style: normal !important;
}

resource-honor::before
{
	content: "honor";
	text-transform: uppercase;
	color: gold !important;
	font-style: normal !important;
}

resource-armament::before
{
	content: "armament";
	text-transform: uppercase;
	color: darkgrey !important;
	font-style: normal !important;
}

resource-any::before
{
	content: "any";
	text-transform: uppercase;
	color: lightgrey !important;
	text-shadow: 0 0 10px white;
	font-style: normal !important;
}

panel
{
	border: 1px solid gray;
	box-sizing: border-box;
	box-shadow: 0 0 3px -1px lightgray, 0 0 10px black;
	background: rgb(20, 20, 20);
	color: white;
	padding: 10px;
	z-index: 1;
}

panel::before
{
	z-index: -1 !important;
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background-image: url("../gfx/backgrounds/uibackground.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	opacity: 0.1;
}

#loadingscreen
{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	background: var(--dark);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999999999999;
}

#loadingscreen::before
{
	content: "";
    border: 8px solid transparent;
    border-top: 8px solid #b09d00;
    border-radius: 50%;
    height: 50px;
	aspect-ratio: 1/1;
    animation: spin 2s linear infinite;
	filter: drop-shadow(0 0 15px #c3b800);
}

body:has(.connectionlostscreenblock) #loadingscreen::before
{
	content: none !important;
}

#loadingscreen::after
{
	content: "";
	background-image: url("../gfx/logotype.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	filter: drop-shadow(0 0 15px rgb(80, 80, 80));
	width: 150px;
	aspect-ratio: 2/1;
	z-index: 2;
	position: absolute;
	left: 50%;
	top: calc(50% - 100px);
	transform: translate(-50%, -50%);
}

@keyframes spin
{
    from
	{
		transform: rotate(0deg);
	}
    to
	{
		transform: rotate(360deg);
	}
}

@keyframes loadingfadeout
{
	to
	{
		opacity: 0;
	}
}

#loadingscreen > .loadingbar
{
	position: absolute;
	left: 50%;
	bottom: 7.5%;
	transform: translateX(-50%);
	width: 150px;
	height: 10px;
	border: 1px solid #c3b800;
	box-shadow: 0 0 10px -2px #b09d00;
	opacity: 0;
	animation: loadingbarfadein 0.5s ease-in-out forwards;
}

#loadingscreen > .loadingbar > div
{
	height: 100%;
	background-color: #b09d00;
	position: absolute;
	left: 0;
	top: 0;
}

@keyframes loadingbarfadein
{
	to
	{
		opacity: 1;
	}
}

boosterpack[type="0"]
{
	background-image: url("../gfx/boosters/onlycommon.png");
}

boosterpack[type="1"]
{
	background-image: url("../gfx/boosters/standard.png");
}

boosterpack[type="2"]
{
	background-image: url("../gfx/boosters/rare.png");
}

boosterpack[type="3"]
{
	background-image: url("../gfx/boosters/onlytroops.png");
}

boosterpack[type="4"]
{
	background-image: url("../gfx/boosters/magical.png");
}

boosterpack[type="5"]
{
	background-image: url("../gfx/boosters/mythic.png");
}