html,body {
	margin:0;
	border:0;
	padding:0;
}
body {
	overflow-y:hidden;
}

#playfield {
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	background-image:
		radial-gradient(transparent, rgba(0,0,0,0.5)),
		url(orn4.svg);
	background-size:
		100% 100%,
		150px 180px;
	overflow:hidden;
}

.card {
	position:absolute;
	cursor:pointer;
	top:-100px;
	left:-150px;
	width:140px;
	height:34px;
	background-color:white;
	margin:5px;
	display:inline-block;
	border-radius:10px;
	text-align:center;
	padding:28px 0;
	box-shadow:2px 2px 5px 0px rgba(0,0,0,0.75);
	transform-origin:0 0;
	transition:left 600ms, top 600ms, transform 600ms;
}
.card:hover {
	
}
.card::before {
	content:" ";
	position:absolute;
	top:-5px;
	left:-5px;
	width:150px;
	height:100px;
}
.card::after {
	content:" ";
	position:absolute;
	top:0;
	z-index:1;
	display:block;
	width:140px;
	height:90px;
	border-radius:10px;
	background-color:rgba(0,0,0,0);
	transition:background-color 200ms;
}
.card.selected::after {
	background-color:rgba(0,0,0,0.5);
}
.card.correct::after {
	background-color:rgba(0,127,0,0.5);
}
.card.false::after {
	background-color:rgba(255,0,0,0.5);
}

.symbol {
	display:inline-block;
	background-color:gray;
	height:30px;
	width:30px;
	margin:0 2px;
	border-style:solid;
	border-width:2px;
	position:relative;
}

.card[shape="0"] .symbol {
}
.card[shape="1"] .symbol {
	border-radius:50% 50%;
}
.card[shape="2"] .symbol .leftblind {
	position:absolute;
	top:-2px;
	left:0px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 34px 17px 0 0;
	border-color: gray transparent transparent transparent;
}
.card[shape="2"] .symbol .leftblind::before {
	position:absolute;
	content:" ";
	top:-34px;
	left:-2px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 34px 17px 0 0;
	border-color: white transparent transparent transparent;
	z-index:1;
	transform:scale(1.2);
}
.card[shape="2"] .symbol .rightblind {
	position:absolute;
	content:" ";
	top:-2px;
	left:13px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 17px 34px 0;
	border-color: transparent gray transparent transparent;
}
.card[shape="2"] .symbol .rightblind::before {
	position:absolute;
	content:" ";
	top:0px;
	left:2px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 17px 34px 0;
	border-color: transparent white transparent transparent;
	transform:scale(1.2);
}

.card[fill="0"] .symbol {
	background-color:transparent !important;
}
.card[fill="1"] .symbol {
}
.card[fill="2"] .symbol {
	background-color:transparent !important;
}

/*
.card[color="0"] .symbol {
	background-color:red;
	border-color:red;
}
.card[color="0"] .symbol .leftblind {
	border-top-color:red;
}
.card[color="0"] .symbol .rightblind {
	border-right-color:red;
}
.card[color="1"] .symbol {
	background-color:blue;
	border-color:blue;
}
.card[color="1"] .symbol .leftblind {
	border-top-color:blue;
}
.card[color="1"] .symbol .rightblind {
	border-right-color:blue;
}
.card[color="2"] .symbol {
	background-color:green;
	border-color:green;
}
.card[color="2"] .symbol .leftblind {
	border-top-color:green;
}
.card[color="2"] .symbol .rightblind {
	border-right-color:green;
}

.card[color="0"][fill="2"] .symbol {
	background-image:linear-gradient(90deg,transparent 50%, red 50%);
	background-size:4px 100%;
}
.card[color="1"][fill="2"] .symbol {
	background-image:linear-gradient(90deg,transparent 50%, blue 50%);
	background-size:4px 100%;
}
.card[color="2"][fill="2"] .symbol {
	background-image:linear-gradient(90deg,transparent 50%, green 50%);
	background-size:4px 100%;
}
*/


#menu {
	position:absolute;
	display:table;
	width:100%;	
	height:100%;
	top:-100%;
	left:0;
	right:0;
	background-color:black;
	overflow:hidden;
	opacity:0;
	transition:opacity 400ms, top 400ms;
	color:white;
}
#menu.seen,
#menu.start {
	top:0%;
	opacity:1;
}
#menu.swipe {
	transition:none;
}

#title {
	text-align:center;
}

#startbuttons {
	display:none;
	text-align:center;
}
#menu.start #startbuttons {
	display:block;
}

#startbuttons button {
	width:25%;
	line-height:3;
}

#setup {
	display:table;
	margin:0 auto;
}
#menu.start #setup {
	display:none;
}

.middler {
	display:table-cell;
	vertical-align:middle;
}