@font-face {
	font-family:"Timeless";
	src:url("/fonts/Timeless.ttf");
	font-display:auto;
}
@font-face {
	font-family:"Typographer";
	src:url("/fonts/TypographerTextur-Regular.ttf");
	font-display:auto;
}
@font-face {
	font-family:"Cinzel";
	src:url("/fonts/cinzel.regular.otf");
	font-display:auto;
}
html {
	margin:0;
	padding:0;
	min-height:100%;
	font-family:"Timeless", serif;
	font-size:100%;
}
body {
	margin:0;
	padding:0;
}

#back_all {
	position:absolute;
	top:0; left:0;
	width:100%;
	height:100%;
	z-index:-1;
	/*box-shadow:0 0 50px 50px #000 inset;
	opacity:0.35;*/
	background: url("/img/site_back.jpg") no-repeat;
	background-size: 100%;
	opacity:.3;
}

a {
	outline:0;
	color:#606;
	text-decoration: none;
}

:root {
    --big-font: "Cinzel", serif;
    --standard-font: "Timeless";
}

/* HEADINGS */
h1 {
	margin:0;
	padding:0;
	display: inline-block;
}
h2 {
	font-family:"Typographer", sans-serif;
	font-size:30pt;
	margin:0;
	padding-top:5px;
	& input { font-family: "Typographer"; font-size: 30pt; text-align: center; }
}
h3 {
	font-family:var(--big-font);
	margin-top:0;
	margin-bottom:5px;
	padding-top:5px;
}
h4 {
	font-family:var(--big-font);
	margin:0;
	padding-top:5px;
}
h5 {
	font-family:var(--big-font);
	margin:2px;
	font-size:14pt;
	color:#300;
}

main {
	position:relative;
	background:rgba(235,235,235,0.9);
}

.big_font { font-family:var(--big-font); font-size:20pt; }
.nice_font { font-family:var(--big-font); }

header { z-index:50; position: relative; width:100%; text-align: center; }
header .logo { vertical-align: middle; filter:drop-shadow(2px 2px 4px rgba(0,0,0,0.4)); }
header .gamename { font-family:var(--big-font); font-size:50pt; font-weight:bold; vertical-align: middle; font-family:"Typographer", sans-serif;
	filter:drop-shadow(1px 1px 3px rgba(0,0,0,.6));
	background:linear-gradient(#466988, #0d2845);
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

header .gamename:hover { background:linear-gradient(#2ee6e7, #0d2845); background-clip: text;
	-webkit-text-fill-color: transparent; }

.button_back_img { width:100%; position:absolute; left:0; z-index:-2; height:100%; top:0; }
.button_move_back { width:100%; position:absolute; left:0; z-index:-1; height:60px; top:0; background:url(/img/UI/popup_back.webp); background-size:100%; }
nav { font-family:var(--big-font); height:67px; padding-top:20px; position:relative; z-index: 10; text-align: center;
	& a { font-size:18pt; color:#fff; margin:0 -2px; padding:20px 10px 0 10px; background:url(/img/UI/playmode_border_outer.webp); background-size:100%; 
		display:inline-block; height:calc(100% - 20px); min-width:130px; position:relative; overflow:hidden; top:0; vertical-align:top;
		text-shadow:1px 1px 1px #000, -1px 1px 1px #000,1px -1px 1px #000, -1px -1px 1px #000, 0 0 3px #000;
		&:hover:not(.current) { text-shadow:0 0 2px #fff; animation-duration:.5s; animation-name:slidein; top:-20px; height:100%; } 
		&.current { top:-20px; height:100%; 
			& .button_move_back { height: 20px; }
		}
	} 
	
}
@keyframes slidein {
  from {
    top: 0;
	height:calc(100% - 20px);
  }

  to {
    top: -20px;
	height:100%;
  }
}

.red_button { border-style:solid; border-width:5px; border-image:url(/img/UI/button_border.webp) 5 fill; padding:5px; text-decoration:none; font-family:var(--big-font); 
	background:url(/img/UI/button_back_hover.webp); background-size:100%; color:white; text-shadow:0 0 3px black; margin:0; font-size:14pt;
	&:hover { text-shadow:0 0 3px white; filter:brightness(1.2); }
}

#content { padding:5px; }

footer { text-align: center; background:rgba(255,255,255,0.6); padding:3px 0; }

.left {
	float:left;
}
.right {
	float:right;
}
.clear_both {
	clear:both;
}

.center { text-align:center; margin:0 auto; min-width:20px; min-height:10px; }

.show_next_div, .show_next_block {
	cursor:pointer;
}

.error { font-weight: bold; color:#c00; }

/* POPUP */
#black_back, #black_back2 {
	width:100%;
	height:100%;
	position:fixed;
	top:-0;
	left:0;
	text-align:center;
	overflow:auto;
	background:rgba(5,5,5,0.9);
	z-index:1000;
	& .top_div, & .top_div2 {
		display:inline-block;
		margin:10px auto 10px auto;
		min-height:100px;
		max-width:calc(100% - 20px);
		background-size:100% auto;
		position:relative;
		color:#fff;
		/*text-align:left;*/
		padding:10px;
		background:#ddd;
		border-radius:10px;
		& .card_small { margin:7px; box-shadow:0 0 7px #fff; border:1px solid #fff; }
		& .rarity_2 { box-shadow:0 0 8px #ff0; border:1px solid #ff0; }
		& .rarity_3 { box-shadow:0 0 8px #f00; border:1px solid #f00; }
		& h3 { background-color: #f00; }
	}
}

#black_back2 {
	background:rgba(0,0,0,0.8);
	z-index:1500;
}

.hide_black_back, .hide_black_back2 {
	width:100%;
	height:100%;
	position:fixed;
	z-index:0;
	top:0;
	left:0;
	cursor:pointer;
	/*backdrop-filter: blur(4px);*/
}

.yes, .no {
	border:1px solid #777;
	color:#fff;
	padding:7px;
	margin:15px;
	font-weight:bold;
	text-decoration:none;
	font-family:var(--big-font);
	display:inline-block;
	cursor:pointer;
}
.yes {
	background:linear-gradient(#00d400, #007c00);
}
.yes:hover {
	background:linear-gradient(#00e700, #009e00);
}
.yes::before {
	content:"\2713";
	font-size:30px;
	vertical-align:-4px;
}

.no {
	background:linear-gradient(#d40000, #7c0000);
}
.no:hover {
	background:linear-gradient(#f80000, #af0000);
}
.no::before {
	content:"\2716";
	font-size:30px;
	vertical-align:-4px;
}

/* CARDS */
.card_parent { display:inline-block; position:relative; border-radius:10px; background: linear-gradient(rgba(0,230,220,0.5),rgba(0,0,0,0) 20%); margin:5px; }
.card { width:600px; height:840px; position:relative; border-radius:10px; color:#fff; background:#333; overflow: hidden; display:inline-block; 
	box-shadow:2px 2px 4px #aaa;}
.card_img { width:100%; }
.card_cost { background:url("/img/design/ribbon_cost.webp") no-repeat; background-size:100%; position:absolute; 
	filter:drop-shadow(1px 1px 3px rgba(0,0,0,.5));
    padding-top:5px; height:101px; width:66px; top:0; left:20px; z-index:20;
}
.Gold_cost, .Blood_cost, .Units_cost { text-align:center; position:absolute; font-size:40pt; font-weight:bold; z-index:25; width:60px; height:60px; left:23px; top:5px;
	text-shadow:-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; 
}

.title_wrapper { position:relative; margin-top:-115px; height:120px; }

.card_title { position:absolute; background:url("/img/design/RibbonNew.webp") no-repeat; text-align:center; font-size:25pt; margin:0 auto; left:0; right:0; background-size:100%;
	filter:drop-shadow(2px 2px 4px #111); /*font-family:var(--big-font);*/
    padding-top:30px; height:120px; z-index:20; text-shadow:-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.card_type { position:absolute; margin:0 auto; left:0; right:0; text-align:center; z-index:20; bottom:0; font-size:17pt; /*font-family:var(--big-font);*/ font-style: italic; }
.card_effect { position:absolute; z-index:20; padding:15px; font-size:13pt; text-align:left; }
.card_army{ position: absolute; z-index:15; margin:0 auto; left:0; right:0; bottom: 20px; opacity:.1; }
.card_attack, .card_defense { position:absolute; z-index:20; bottom:30px; text-align:center; font-size:40pt; font-weight:bold; }
.card_attack { left:20px; color:#fff; background-size:100%; text-shadow:-1px -2px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }
.card_defense { right:20px; color:#fff; background-size:100%; text-shadow:0 0 5px #000; }
.card_design { background:url("/img/design/bottom_back.webp") no-repeat; z-index:10; position: absolute; height:320px; width:100%; bottom:0; background-size:100%; }
.card_credit { position: absolute; bottom:5px; margin: 0 auto; left:0; right:0; text-align:center; color:#ccc; font-size:10pt; z-index:20; font-style:italic; }
.card_edition { position:absolute; bottom:5px; right:5px; z-index:20; }

.attack_text { background:url("/img/design/attack.webp") no-repeat; color:#c33; }
.action_symbol { width:30px; vertical-align:middle; }

.Gold_cost { background: url("/img/design/gold.webp") no-repeat; background-size:100%; }
.Blood_cost { background: url("/img/design/blood.webp") no-repeat; background-size:100%; }
.Units_cost { background: url("/img/design/unit.webp") no-repeat;background-size:100%; }

.not_collected { opacity: .6; }
/* 2,5 times smaller */
/*.card_small { scale:0.5; }*/
.card_small { width:200px; height:280px;
	& .title_wrapper { margin-top:-69px; height:42px; }
	& .card_design { height:140px; width:100%; }
	& .card_cost { height:40px; width:26px; left:8px; }
	& .Gold_cost, .Blood_cost, .Units_cost { font-size:16pt; width:26px; height:26px; background-size:100%; left:8px; top:2px; }
	& .card_title { font-size:10pt; width:100%; height:42px; padding-top:11px; }
	& .card_type { font-size:8pt; bottom:-4px; }
	& .card_effect { font-size:7pt; padding:5px 5px 5px 5px; }
	& .card_army { scale:.4; bottom:-50px; }
	& .card_attack { left:7px; font-size:16pt; bottom:10px; }
	& .card_defense { right:7px; font-size:16pt; bottom:10px; }
	& .card_credit { font-size:5pt; bottom:2px; }
	& .card_edition { scale:.4; bottom:-15px; right:-15px; }
	& .action_symbol { width:15px; }
	&:hover { scale:1.1; box-shadow:0 0 8px #fff; z-index:100; transition-duration: 250ms; opacity: 1;
		/*&::after {
			display: block;
			content: '';
			position: absolute;
			z-index: 100;
			top: 0;
			left: 0;
			width: 100%;
			height: 120%;
			background: linear-gradient(226deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.4) 35%, rgba(255,255,255,0.2) 42%, rgba(255,255,255,0) 60%);
		}*/
	}
}

.mini_card { background:linear-gradient(90deg,#fff,rgba(0,0,0,.2)); border-radius:5px; border:1px solid #fff; color:#fff; padding:3px 30px 3px 3px; 
	font-family: var(--big-font); display:inline-block; text-shadow:0 0 2px #000; position:relative; min-width:100px; overflow: hidden;
	& a{ color:#fff; }
	& .card_edition { width:25px; right:0; top:3px; }
	& .card_army { width:50px; bottom:0; opacity:.2; }
}
.Event_type { background:linear-gradient(90deg,#cf3030,rgba(207,48,48,.2)); }
.Ritual_type { background:linear-gradient(90deg,#c4cf30,rgba(0,0,0,.2)); }
.Spell_type { background:linear-gradient(90deg,#cf30cf,rgba(0,0,0,.2)); }
.Building_type { background:linear-gradient(90deg,#30cf60,rgba(0,0,0,.2)); }
.Unit_type { background:linear-gradient(90deg,#5230cf,rgba(0,0,0,.2)); }
.Modification_type { background:linear-gradient(90deg,#775160,rgba(0,0,0,.2)); }

.Building .card_cost, .Building .card_title  { filter:hue-rotate(-100deg) drop-shadow(2px 2px 4px #111); }

.Ritual .card_cost, .Ritual .card_title { filter:hue-rotate(160deg) saturate(1.5) brightness(1.4) drop-shadow(2px 2px 4px #111); }

.Spell .card_cost, .Spell .card_title { filter:hue-rotate(50deg) saturate(2) drop-shadow(2px 2px 4px #111); }

.Event .card_cost,.Event .card_title  { filter:hue-rotate(130deg) saturate(4) drop-shadow(2px 2px 4px #111); }

.Modification .card_cost, .Modification .card_title { filter:hue-rotate(80deg) saturate(.5) drop-shadow(2px 2px 4px #111); }

.add_card { display:block; text-align:center; margin:3px auto; position: relative; z-index:20; }

.deck_box { display:inline-block; width:300px; height:200px; background-size:100%; text-align:center; padding:10px; text-shadow:0 0 2px #fff, 0 0 3px #fff, 1px 1px 2px #000;
	box-shadow:1px 1px 3px #222;
	&:hover { filter: brightness(1.2);  transition-duration: 450ms; }
}

.set0Card { background:url("/img/checkbox_checked.webp");
	background-size:100%;
	width:30px;
	height:30px;
	border-radius:30px;
	display:inline-block;
	box-shadow:0 0 2px #333;
	filter: hue-rotate(150deg);
	vertical-align:middle;
	&:hover { filter:hue-rotate(210deg); }
}

.oldSpot { display: none;}

.collected_icon, .not_collected_icon { background:url('/img/collected.webp'); background-size:100%; width:30px; height:30px; vertical-align:middle; display:inline-block; 
	margin:0 2px 10px 2px; }
.not_collected_icon { filter:grayscale(1); }

/* PLAY -------- */
.hand_card, .field_card { display:inline-block; margin-left:-140px; text-align:left; height:170px; cursor: default;
	overflow:hidden; position:relative; z-index:90; 
	box-shadow:0 -2px 3px #000; border-radius:10px 10px 0 0;
	&:hover { height:100%; overflow: visible; z-index:150; margin-top:0; margin-right:90px; }
	& .card_small:not(:hover) { width:200px; height:280px; 
		& .card_title{ margin-top:-140px; width:100%; }
		& .card_type { margin-top:-113px; }
		& .card_attack { top:80px; }
		& .card_defense { top:80px; }
		& .card_design { height:235px; }
	}
	& .card_small:hover { margin-bottom:18px; }
}
.field_card, .graveyard .card_small { margin:0; width:220px; }

.offense_zone, .defense_zone { width:calc(50% - 2px); max-height:60%; display:inline-block; vertical-align:top; text-align:center; }
.offense_zone {  background:rgba(250,0,0,.1); }
.defense_zone { background:rgba(0,0,250,.1); }

.card_slot { width:220px; height:170px; background:#fff; display:inline-block; vertical-align:top; margin:5px; border-radius:10px; }

.card_actions { display:inline-block; position:absolute; top:0; right:0; z-index:80; background:rgba(250,250,250,.4); }

/* FORMS ---------- */
label { cursor:pointer; }
input[type='checkbox'] {
	opacity:0;
	width:0;
	position:absolute;
	left:-100px;
	visibility:hidden;
}
input[type='checkbox'] + label, .checkbox {
	margin:0;
	clear:none;
	display:inline-block;
	vertical-align:middle;
	margin-right:5px;
	position: relative;
	&:hover { filter:hue-rotate(80deg); }
}
input[type='checkbox'] + label::before, .checkbox::before {
	content:"";
	background:url("/img/checkbox_checked.webp");
	background-size:100%;
	width:30px;
	height:30px;
	border-radius:30px;
	display:inline-block;
	box-shadow:0 0 2px #333; 
	padding-top:0;
	vertical-align:middle;
	cursor:pointer;
	&:hover { filter:hue-rotate(80deg); }
}

input[type='checkbox']:not(:checked) + label::after, .checkbox::after {
	content:'';
	background: radial-gradient(circle, #fff, rgba(0,0,0,0) 250%);
	position: absolute; width:20px; height:20px; border-radius:20px;
	left:5px; top:5px;
	box-shadow: inset 0 0 5px #000;
}
input[type='checkbox']:not(:checked) + label:hover::after { opacity:.3; }

button, .button {
	border-radius:8px;
	font-family:var(--big-font);
	color:#41dbd5;
	font-size:18px;
	text-shadow:0 1px 3px #000;
	text-align:center;
	padding:2px 5px;
	background:linear-gradient(90deg, #36335d, #706bb3, #36335d);
	border:2px solid #aaa;
	box-shadow:1px 1px 3px rgba(1,1,1,0.3);
	cursor: pointer;
	margin:4px;
	display: inline-block;
	&:hover { filter:brightness(1.2); box-shadow:0 0 3px #fff;}
	&:active { box-shadow:inset 0 0 3px #000; }
}

.green_button { background:linear-gradient(90deg, #335d3e, #6bb36f, #335d3e); color:#fff; 
}

.delete_button { width:180px; height:20px; font-family:var(--big-font); background:#aaa; border:2px solid #444; overflow:clip; margin:5px 0; position:relative; 
	text-align:right; padding:5px 0; }
.delete_handle { cursor:col-resize; display:inline-block; width:30px; height:30px; background:#800; box-shadow:rgb(170, 0, 0) -115px 0px 30px 100px,inset 0 0 1px 3px #400; 
	position:absolute; left:0; top:0; }
.mini_delete_button { width:50px; height:14px; padding:0; margin:0; font-size: 10px; }
.mini_delete_button .delete_handle { width:14px; height:14px; }

a.disabled { opacity:.7; filter: grayscale(1); cursor:not-allowed; }

.not_search_result { display:none; }

.grey_box { background:rgba(50,50,50,.3); padding:3px; margin-bottom:5px; border:1px solid #666; box-shadow:inset 0 0 3px rgba(0,0,0,.3); }

.barely_visible { opacity:.7; }

.hide { display:none; }

.credits { width:18px; filter:drop-shadow(0 0 3px #fff); vertical-align: middle; }