body {
	font-size: 10px;
}

#gameViewport {
	width: 75em;
	height: 56em;
	margin: 8em 1em;
	position: relative;
	font-size: 8px;

	-ms-user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
}

.mahjong-tile {
	width: 5em;
	height: 7em;
	box-shadow: 0 0 0.1em 0.3em rgba(0,0,0,0.5);
	border: 1pt solid #666;
	border-radius: 2px;
	position: absolute;
	background-color: #fff;
	cursor: pointer;
}

.mahjong-tile.selected {
	background: #f70;
	color: #fff;
}

@font-face {
	font-family: "Mahjong";
	src: url("../fonts/Mahjong.woff") format('woff');
}

.mahjong-tile-content {
	font: 36pt Mahjong;
	text-align: center;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	/* TODO: vendor prefixes */
}

.foreign-glyph {
	margin-top: -2pt;
}

.suit-bing {
	color: #4c4;
}

.suit-tiao {
	color: #44c;
}

.suit-wan {
	color: #c44;
}

.suit-wind {
	color: #44c;
}

.suit-flower {
	color: #c4c;
}

.suit-season {
	color: #c84;
}

.map-level0 {
	background-color: #fee;
}

.map-level1 {
	background-color: #efe;
}

.map-level2 {
	background-color: #eef;
}

.map-level3 {
	background-color: #fff;
}

.tile-error {
	animation: error-flash 0.5s ease-in-out;
}

@keyframes error-flash {
	0% { background-color: #f44; }
	100% { }
}

.tile-help {
	animation: help-flash 2s ease-in-out;
}

@keyframes help-flash {
	0% { background-color: #ff4; }
	100% { }
}