#mockups {
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

.mockup {
	position: relative;
	border: 3.3em solid black;
	background: black;
	border-radius: 3.3em;
	margin: 1.5rem auto;
	font-size: 15px;
	box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.2);
}

.mockup.landscape {
	max-width: 900px;
	border-top-width: 0.6em;
	border-bottom-width: 0.6em;
}
.mockup.portrait {
	max-width: 469px;
	border-left-width: 0.6em;
	border-right-width: 0.6em;
}

.mockup::before,
.mockup::after {
	content: '';
	display: inline-block;
	background: #333;
	border-radius: 100%;
	position: absolute;
	width: 1em;
	height: 1em;
	margin-top: -0.5em;
	margin-left: -0.5em;
	line-height: 1em;
	text-align: center;
	color: #666;
}
.mockup::after {
	font-size: 2em;
}
.mockup.landscape::before {
	left: -1.5em;
	top: 50%;
}
.mockup.landscape::after {
	right: -1.25em;
	top: 50%;
}
.mockup.portrait::before {
	left: 50%;
	top: -1.5em;
}
.mockup.portrait::after {
	left: 50%;
	bottom: -1.25em;
}

.mockup .screen-border {
	position: relative;
	border-radius: 1vw;
	overflow: hidden;
	background: white;
}
.mockup .screen.game {
	background-color: white;
}
.mockup.game .screen {
	background-color: #b2cce5;
}
@media screen and (max-width: 1000px) {
	.mockup.landscape {
		font-size: 1.5vw;
	}
}
@media screen and (max-width: 540px) {
	.mockup.portrait {
		font-size: 2.778vw;
	}
}
.mockup.landscape .screen-border {
	height: 0;
	padding-bottom: 56.25%;
}
.mockup.portrait .screen-border {
	height: 0;
	padding-bottom: 177.778%;
}

.mockup .screen {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
}
.mockup .game-board-container {
	position: absolute;
}
.mockup.landscape .game-board-container {
	width: 56.25%;
	height: 100%;
}
.mockup.portrait .game-board-container {
	width: 100%;
	height: 56.25%;
	top: 3em;
}
.mockup .game-board {
	margin: 0;
	width: 100%;
	height: 100%;
	position: absolute;
	table-layout: fixed;
}
.mockup .game-board td {
	width: 6%;
	height: 6%;
}


.mockup .game-controls-container {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
}
.mockup.landscape .game-controls-container {
	width: 43.75%;
}
.mockup.portrait .game-controls-container {
	top: auto;
	bottom: 0;
	padding-bottom: 4.25em;
	background-color: white;
	width: 100%;
}
.mockup header {
	position: relative;
	z-index: 1;
}
.mockup header h1 {
	font-size: 2em;
	margin: 0;
	padding: 0 0.375em;
	padding-left: 1.75em;
	position: relative;
}


.mockup header h1 span.hamburger,
.mockup header h1 span.hamburger::before,
.mockup header h1 span.hamburger::after {
	display: inline-block;
	width: 0.8em;
	height: 4px;
	position: absolute;
	background: white;
	display: inline-block;
}
.mockup header h1 span.hamburger {
	left: 0.375em;
	top: 50%;
	margin-top: -2px;
}
.mockup header h1 span.hamburger::before,
.mockup header h1 span.hamburger::after {
	content: ' ';
}
.mockup header h1 span.hamburger::before {
	top: -0.3em;
	margin-top: 1px;
}
.mockup header h1 span.hamburger::after {
	bottom: -0.3em;
	margin-bottom: 1px;
}

.mockup header .header-toolbar {
	position: absolute;
	top: 0;
	right: 0;
}

.mockup header .header-toolbar ol.game-player-list {
	display: block;
}

.mockup .game-controls-container h2 {
	font-size: 1em;
	padding: 0 0.75em;
	margin: 0;
}
.mockup .game-controls-container h2.shaded.light {
	background-color: #9cf
}
.mockup .game-controls-container p {
	margin: 0.5em 0.75em;
}


.mockup .game-players {
	position: absolute;
	right: 0.25em;
	background: white;
	border-radius: 0.5em 0 0.5em 0.5em;
	box-shadow: 0 1em 1em rgba(0, 0, 0, 0.1);
	width: 20em;
	display: none;
}
.mockup .game-players.horizontal-padding {
	padding-left: 1em;
	padding-right: 1em;
}
.mockup .game-players.vertical-padding {
	padding-top: 1em;
	padding-bottom: 1em;
}
.mockup .game-players.shown {
	display: block;
	z-index: 1;
}
.mockup .game-players ol {
	margin: 0 0 -0.5em 0;
	list-style: none;
}
.mockup .header-toolbar .game-player-list {
	margin: 0.25em;
}
.mockup .header-toolbar .game-player-list::before {
	content: '\25BC';
	display: block;
	position: absolute;
	left: -1.333em;
	top: 1.333em;
	width: 1.333em;
	height: 1.333em;
	line-height: 1.333em;
	font-size: 0.75em;
	color: white;
}
.mockup .header-toolbar .game-player-list.shown::before {
	content: '\25B2';
}
.mockup .header-toolbar .game-player-list.shown {
	background: white;
	color: black;
	padding-bottom: 1rem;
}
.mockup .header-toolbar .game-player-list.shown .progress {
	display: none;
}

.mockup .game-players ol li.current .name {
	font-weight: bold;
}
.mockup .game-players ol li .game-board-tile {
	vertical-align: top;
}
.mockup .game-players ol li.winning .player-progress span,
.mockup .game-players ol li.winning .player-score {
	background-color: green;
}


.mockup .game-board-tile {
	border-radius: 100%;
	font-weight: bold;
	font-size: 1.50em;
	width: 1.3em;
	height: 1.3em;
	line-height: 1.23333em;
	margin: 0.06667em;
}
.mockup .game-board-tile.player-1 {
	background-color: black;
	color: white;
}
.mockup .game-board-tile.player-2 {
	background-color: #c12;
	color: white;
}
.mockup .game-board-tile.player-3 {
	background-color: green;
	color: white;
}
.mockup .game-board-tile.player-4 {
	background-color: gold;
	color: black;
}

.mockup .game-button-container {
	position: absolute;
	bottom: 0.75em;
	right: 0.75em;
}
.mockup .screen-rotator {
	background: #69C;
	color: white;
	font-size: 2rem;
	width: 1em;
	height: 1em;
	line-height: 1em;
	padding: 0.25em;
	border-radius: 100%;
	text-align: center;
	cursor: pointer;
	position: absolute;
	right: -0.25em;
	top: -0.25em;
	box-shadow: 0.1em 0.1em 0.01em #369;
	display: none;
}
.mockup:hover .screen-rotator {
	/*display: block; -- temporarily disabled */
}

.mockup .keyboard-overlay {
	position: absolute;
	z-index: 1;
}
.mockup .keyboard {
	width: 100%;
	bottom: 0;
	background: #111;
	font-size: 1rem;
}
.mockup .keyboard .keyboard-row {
	width: 100%;
	display: block;
	text-align: center;
	white-space: nowrap;
}
.mockup .keyboard .keyboard-row .keyboard-key {
	box-sizing: border-box;
	display: inline-block;
	width: 10%;
	background: #333;
	border: 0.2em solid #111;
	border-radius: 0.6em;
	padding: 0.4em;
	line-height: 1;
}
.mockup .keyboard .keyboard-row .keyboard-key.space {
	width: 50%;
}
.mockup .keyboard .keyboard-row .keyboard-key.symbol {
	background: transparent;
}

.mockup .dialog-container {
	position: absolute;
	z-index: 1;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.4);
}
.mockup .dialog-container {
	max-width: none;
	padding: 0;
}
.mockup .dialog-container.limited-width {
	max-width: none !important;
}
.mockup .dialog-container .dialog {
	height: auto;
	width: auto;
	width: calc(100% - 2em);
	position: absolute;
	margin: 1em;
	top: 50%;
	transform: translateY(-50%);
}
.mockup .dialog-container.bottom .dialog {
	top: auto;
	transform: none;
	bottom: 0;
}
.mockup .native-dialog {
	position: absolute;
	background: #111;
	border: none;
	color: white;
	padding: 1em 1.5em;
	border-radius: 1em;
	left: 50%;
	top: 10%;
	transform: translateX(-50%);
	width: 90%;
	height: auto;
	max-width: 30em;
	box-sizing: border-box;
	box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.3);
}
.mockup .native-dialog .caption {
	color: #ccc;
	font-size: 0.8em;
}
.mockup .native-dialog .field {
	margin-top: 0.5em;
}
.mockup .native-dialog .field input {
	outline: none;
	appearance: none;
	background: transparent;
	border: none;
	border-bottom: 1px solid white;
	width: 100%;
	box-sizing: border-box;
	padding: 0.2em 0;
}

.mockup .native-dialog .buttons {
	text-align: right;
}
.mockup .native-dialog .buttons .button {
	text-align: center;
	background: #333;
	display: inline-block;
	padding: 0.1em 0.5em;
	border-radius: 0.4em;
}

.mockup .game-button-toolbar {
	position: absolute;
	bottom: 0;
	width: 100%;
}
.mockup .game-button-toolbar button {
	width: 18%;
	box-sizing: border-box;
	padding: 3em 0 0 0;
	background: transparent;
	font-size: 0.9em;
	border: none;
	position: relative;
}
.mockup .game-button-toolbar button:empty {
	visibility: hidden;
}
.mockup .game-button-toolbar button::before,
.mockup .game-button-toolbar button::after {
	content: '';
	font-size: 2em;
	position: absolute;
	width: 2em;
	height: 1.25em;
	bottom: 0.7em;
	left: 50%;
	margin-left: -1em;
	line-height: 1;
	text-align: center;
}
.mockup .game-button-toolbar button.definitions::after {
	content: '\1F4D8';
}
.mockup .game-button-toolbar button.shuffle::after {
	content: '\1F500';
}
.mockup .game-button-toolbar button.reset::after {
	content: '\21BA';
}
.mockup .game-button-toolbar button.help::after {
	content: '\1F6C8';
}
.mockup .game-button-toolbar button.full-screen::after {
	content: '\26F6';
}	
.mockup .game-button-toolbar button.submit {
	width: 28%;
}
.mockup .game-button-toolbar button.submit::after {
	content: '\2714\FE0F';
}

.mockup .game-tile-tray {
	text-align: center;
	padding: 0.75em;
}
.mockup .game-tile-tray .game-board-tile {
	font-size: 2.55em;
}

.mockup #site_title_board {
	font-size: 1.6em;
}
.mockup #site_title_board.game-board {
	position: relative;
	width: 15em;
	height: auto;
	margin: 2em auto;
}

.mockup #action_buttons a {
	text-align: center;
}
.mockup #action_buttons ul {
	margin: 0;
}
.mockup #action_buttons li {
	display: block;
	margin: 0;
}