card
{
	position: absolute;
	display: block;
	width: 150px;
	height: 230px;
	background-color: var(--card-bg);
	color: var(--card-color);
	border: 2px solid var(--card-border);
	border-radius: 10px;
	transition-duration: 0.2s;
	cursor: pointer;
	flex-direction: column;
	overflow: hidden;
	user-select: none;
	box-sizing: border-box;

	z-index: 3;
}

card:hover
{
	box-shadow: 0 0 10px var(--card-hover);
}

card > * {
	pointer-events: none;
}

carea
{
	padding-left: 2px;
	padding-right: 2px;
	position: absolute;
	display: flex;
	vertical-align: middle;
	width: 100%;
	box-sizing: border-box;
}

carea.top, carea.topl, carea.topr
{
	top: 0;
	height: 8%;
	text-align: center;
}

carea.topl
{
	width: 50%;
	text-align: left;
}

carea.topr
{
	right: 0;
	width: 50%;
	text-align: right;
}

carea.mid
{
	top: 8%;
	height: 84%;
}

carea.midt
{
	top: 8%;
	height: 42%;
}

carea.midb
{
    
	top: 50%;
	height: 42%;
}

carea.bot, carea.botl, carea.botr
{
	bottom: 0;
	height: 8%;
	text-align: center;
}

carea.botl
{
	width: 50%;
	text-align: left;
}

carea.botr
{
	right: 0;
	width: 50%;
	text-align: right;
}

carea.all
{
	top: 0;
	height: 100%;
}

ctext
{
	display: inline-block;
	flex: 1;
	font-size: small;
	height: auto;
}

cimage
{
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	flex: 1;
}

card[drag=true]
{
	z-index: 3;
}

/*  Deck  */

deck {
	--ccount: 0;

	position: absolute;
	width: 166px;
	height: 250px;

	top: calc(var(--y) * (100vh - 250px));
	left: calc(var(--x) * (100vw - 166px));

	transform: scale(var(--size)) rotate(var(--rot));

	overflow: visible;

	border-radius: 10px;

	transition-duration: 0.2s;

	border: 3px solid var(--deck-shadow);
	box-sizing: border-box;
}

deck:hover {
	border: 3px solid var(--deck-hover);
}

deck:hover > card {
	opacity: 0.5;
}

deck:hover > card:hover {
	opacity: 1;
}

/* Deck modes */

deck[mode="stack"] > card {
	transform: translate(5px, calc(var(--cpos) * 3px + 7px));
}

deck[mode="stack"] {
	height: calc(var(--ccount) * 3px + 250px);
	top: calc(var(--y) * (100vh - (var(--ccount) * 3px + 250px)));
}


deck[mode="strip-hl"] > card {
	transform: translate(calc(var(--ccount) * 75px + var(--cpos) * -75px + 5px), 7px);
}

deck[mode="strip-hr"] > card {
	transform: translate(calc(var(--cpos) * 75px + 5px), 7px);
}

deck[mode="strip-hl"], deck[mode="strip-hr"] {
	width: calc(var(--ccount) * 75px + 166px);
	left: calc(var(--x) * (100vw - (var(--ccount) * 75px + 166px)));
}


deck[mode="strip-vu"] > card {
	transform: translate(5px, calc(var(--ccount) * 115px + var(--cpos) * -115px + 7px));
}

deck[mode="strip-vd"] > card {
	transform: translate(5px, calc(var(--cpos) * 115px + 7px));
}

deck[mode="strip-vu"], deck[mode="strip-vd"] {
	height: calc(var(--ccount) * 115px + 250px);
	top: calc(var(--y) * (100vh - (var(--ccount) * 115px + 250px)));
}