body{
	font-family: gothicabook, Arial, Helvetica, sans-serif;
}

div{
	position:relative;
}
*.hidden{
	display:none !important;
}

#gui{
	position: fixed;
	top: 0; left:0;
	bottom: 0; right: 0;
}

#renderer{
	background: #666;
}

#renderer, #uiRenderer{
	position: fixed;
	top: 0; left:0;
	bottom: 0; right: 0;
}

#room,
#armor,
#shop,
#drawPile{
	display:flex;
	align-items: center;
	justify-content: center;
	width:100%;
}
#drawPile{
	top:0;
	color:#AAF;
}
#armor{
	margin-top: 2vmin;
}

#inventory{
	position:absolute;
	bottom:2vmin;
	display:flex;
	justify-content: center;
	width:100%;
}

#roomWrapper{
	position: absolute;
	top:50%;
	transform: translateY(-50%);
	width:100%;
}

#run, #exitShop, #itemUse{
	position:absolute;
	top:0;
	left:50%;
	background: rgba(255,255,150,0.75);
	border:0.2vmin solid #FFF;
	font-size:2vmin;
	padding:2vmin;
	border-radius:1vmin;
	transform:translate(-50%, -100%);
	cursor:pointer;
	box-shadow: 1vmin 1vmin 2vmin rgba(0,0,0,0.5);
	color: #663;
	font-weight:bold;
	text-align: center;
}
#run:hover, #exitShop:hover{
	background: rgba(255,255,150,1);
}



div.card, div.item{
	width:20vmin;
	height:20vmin;
	border-radius:1vmin;
	border: 0.2vmin solid #FFF;
	margin:1vmin;
	box-shadow: 1vmin 1vmin 2vmin rgba(0,0,0,0.5);
}
div.card.itemUse{
	cursor: pointer;
}
div.card.itemUse:hover{
	box-shadow: 0 0 2vmin 1vmin #FFF;
}
div.card.disabled{
	opacity:0.2;
}

#inventory div.item{
	width: 10vmin;
	height: 10vmin;
	background-color: rgba(100,100,100,0.5);
}
#inventory div.item.active{
	background-color: #AFA;
	cursor:pointer;
}
#inventory div.item div.button{
	display:none;
}


#inventory div.item div.value{
	font-size:1.5vmin;
}

#armor div.card{
	width: 14vmin;
	height:14vmin;
	margin:0;
}
#armor div.card > div.buttons,
#spyglass div.card > div.buttons{
	display:none;
}

/* Hide use button */
#gui[data-state=Shop] #inventory div.item div.button.use{
	display:none;
}
#room div.card div.button{
	display:none;
}
#gui[data-state=Room] #room div.card div.button,
#gui[data-state=Room] #inventory div.item div.button{
	display:block;
}


div.card.attack{
	background-color: rgba(100,50,50,0.5);
	color: #FAA;
	border-color: #FAA;
}
div.card.armor{
	background-color: rgba(50,50,100,0.5);
	color: #AAF;
	border-color: #AAF;
}
div.card.heal{
	background-color: rgba(50,100,50,0.5);
	color: #AFA;
	border-color: #AFA;
}


div.card div.value, div.item div.value{
	font-size:10vmin;
	position: absolute;
	left:50%; top:50%;
	transform: translate(-50%, -50%);
}
div.item div.value{
	font-size:2vmin;
	position:relative;
	object-position: center;
	text-align: center;
}
#spyglass div.card{
	width:5vmin; height:5vmin;
}
#spyglass div.card div.value{
	font-size: 3vmin;
}

div.card div.buttons, div.item div.buttons{
	display:flex;
	position: absolute;
	bottom:0;
	justify-content: center;
	width:100%;
	left:0; right:0;
	transform: translateY(50%);
}

div.card div.buttons div.button,
div.item div.buttons div.button,
#pile{

	font-weight:bold;
	border-radius: 0.5vmin;
	background-color: rgba(0,0,0,0.75);
	padding:0.5vmin;
	margin: 0.2vmin;
	cursor:pointer;
	border:0.2vmin solid rgba(0,0,0,.25);
	font-size:2vmin;

}
div.item div.buttons div.button{
	font-size:1.5vmin;
	margin:0;
}
div.card div.buttons div.button:hover,
div.item div.buttons div.button:hover{
	border-color:#FFF;
}
div.card div.buttons div.button.block{
	background-color: rgba(50,50,100,0.75);
	color: #AAF;
}
div.card div.buttons div.button.allow{
	background-color: rgba(100,50,50,0.75);
	color: #FAA;
}
div.card div.buttons div.button.discard,
div.item div.buttons div.button.discard
{
	background-color: rgba(100,50,50,0.75);
	color: #FAA;
}
div.card div.buttons div.button.equip,
div.item div.buttons div.button.buy,
div.item div.buttons div.button.use{
	background-color: rgba(50,100,50,0.75);
	color: #AFA;
}


#tooltip{
	position:fixed;
	padding:2vmin;
	font-size: 2vmin;
	color:#FFF;
	background:rgba(0,0,0,.75);
	backdrop-filter: blur(5px);
	transform:translate(-50%, -100%);
	border:2px solid #DDD;
	border-radius:1vmin;
	max-width: 20vw;
}


#resources{
	position: absolute;
	bottom:4vmin;
	left: 4vmin;
	display:flex;
}
#enemyResources{
	position: absolute;
	bottom:4vmin;
	right: 4vmin;
	display:flex;
}


#hp, #gold, #enemyHP{
	font-size:3vmin;
	font-weight:bold;
	text-shadow: 0.5vmin 0.5vmin 1vmin rgba(0,0,0,0.5);
	color:#FAA;
	background:rgba(100,50,50,0.75);
	border-radius: 1vmin;
	margin:1vmin;
	padding:1vmin;
	min-width: 4vmin;
	text-align: center;
}

#gold{
	background-color:rgba(100,100,25,0.75);
	color:#FFA;
}