html , body , spellcast {
	margin: 0;
	padding: 0;
}

body {
	font-family: sans-serif;
	font-size: 16px;
}

			/* Markup style support */

/* Terminal-kit's gnome color scheme */
.black { color: #000000; }
.grey , .bright.black { color: #555555; }
.red { color: #cc0000; }
.bright.red { color: #ef2929; }
.green { color: #4e9a06; }
.bright.green { color: #8ae234; }
.yellow { color: #c4a000; }
.bright.yellow { color: #fce94f; }
.blue { color: #3465a4; }
.bright.blue { color: #729fcf; }
.magenta { color: #75507b; }
.bright.magenta { color: #ad7fa8; }
.cyan { color: #06989a; }
.bright.cyan { color: #34e2e2; }
.white { color: #d3d7cf; }
.bright.white { color: #eeeeec; }

.dim { opacity: 0.5; }
.bold { font-weight: bold; }
.underline { text-decoration: underline; }
.italic { font-style: italic; }

/* this does not inverse background and foreground, but it is not possible using only CSS */
.inverse { filter: invert(100%); }
/* .inverse { mix-blend-mode: difference; } */



.timer:before {
	content:'Time limit: ';
}
.timer:after {
	content:'s';
}
.next[data-isOrdered=true] {
	counter-increment: next;
}
.next[data-isOrdered=true]:before {
	content: counter( next , lower-alpha ) '. ' ;
}

.replay-button {
	cursor: pointer;
}

.replay-button[disabled] {
	cursor: normal;
}

.unassigned-users {
	display: none !important;
}

.multiplayer .unassigned-users {
	display: block !important;
}
.multiplayer .unassigned-users:before { content: 'Idling: ' ; }



#gfx {
	position: fixed;
	height: 100vh;
	width: 100vw;
	overflow: hidden;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}



.gscene {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	/*overflow: hidden;*/
	pointer-events: none;
}

canvas.gscene {
	pointer-events: all;
}



/* G Entity */

.g-entity-wrapper {
	position: absolute;
	/* This causes glitches with VG when enabled */
	/*transform-style: preserve-3d;*/
}

.g-entity-location {
	display: flex;
	justify-content: space-around;
	position: absolute;
	z-index: 40;
	pointer-events: none;
}

.g-entity-slot {
	position: relative; /* So cards will be positioned relative to this div */
}



/* SVG */
svg.vg-object * {
	transform-box: fill-box;
	transform-origin: center;
}



/* Sprite */

.g-entity-sprite-wrapper[data-select-index]:not(.has-mask) {
	cursor: pointer;
	pointer-events: auto;
}

.g-entity-sprite-wrapper[data-select-index]:not(.has-mask):hover {
	filter: drop-shadow(0px 0px 5px red)
}

.sprite {
	position: relative;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	opacity: 1;
	/*z-index: 2;*/
	/*transition: all 1s ;*/
	/*transform-style: preserve-3d;*/
	pointer-events: none;
}

.sprite-mask {
	position: absolute;
	z-index: -1;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	opacity: 1;
	/*transition: all 1s ;*/
	
	/* "none" should be put on the <svg> tag itself, "painted" on the <path> tag */
	pointer-events: none;
}

.g-entity-sprite-wrapper[data-select-index] .sprite-mask path {
	cursor: pointer;
	pointer-events: painted;
}

.g-entity-sprite-wrapper[data-select-index] .sprite-mask path:hover {
	filter: drop-shadow(0px 0px 50px red)
}



/* VG, board, etc... */

.vg {
	position: relative;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	z-index: 10;
	opacity: 1;
	transition: all 1s ;
	
	/* "none" should be put on the <svg> tag itself, "painted" on the <path> tag */
	pointer-events: none;
}

.vg .button:not(.disabled) {
	cursor: pointer;
	pointer-events: painted;
}

.vg .button , .vg [area] {
	pointer-events: painted;
}

/* .vg [button]:hover {} */



/* VG marker, board piece, etc... */

.marker {
	position: absolute;
	/*height: 90%;*/
	z-index: 20;
	opacity: 1;
	transition: all 1s ;
	
	/* "none" should be put on the <svg> tag itself, "painted" on the <path> tag */
	pointer-events: none;
}

.marker .button:not(.disabled) {
	cursor: pointer;
	pointer-events: painted;
}

.marker .button {
	pointer-events: painted;
}

/* .marker [button]:hover {} */



/* Cards */

/* The wrapper is the placeholder, hover effects happen on it */
.g-entity-card-wrapper {
	position: absolute;
	z-index: 40;
	opacity: 1;
	/*transition: all 1s ;*/
	/*pointer-events: none;*/
	
	perspective: 1000px;
}

.g-entity-card-wrapper[data-select-index] {
	cursor: pointer;
	pointer-events: auto;
}

.g-entity-card-wrapper[data-select-index]:hover {
	filter: drop-shadow(0px 0px 5px red)
}

.card {
	position: relative;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	background-color: #fff;
	transition: all 1s ;
	transform-style: preserve-3d;
}

/* hide back of pane during swap */
.card .front, .card .back {
	position: absolute;
	backface-visibility: hidden;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	top: 0;
	left: 0;
}

/* front face */
.card .front {
	z-index: 2;
	transform: rotateY(0deg);
	display: flex;
	flex-direction: column;
}

/* back face */
.card .back {
	transform: rotateY(180deg);
}

.card-image {
	background-color: #ddd;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.card .front .card-image {
	width: 100%;
	height: 50%;
}

.card .back .card-image {
	width: 100%;
	height: 100%;
}

/* the 3D rotation/flip */
/*.g-entity-wrapper:hover .card ,*/ /* <-- for testing purpose */
.g-entity-card-wrapper[pose="face-down"] .card {
	transform: rotateY(-180deg);
}