/**
 * Basics.
 **/
:root {
	--main-text-color: #000;
	--main-background-color: #fff;
	--bar-text-color: #999;
	--bar-text-highlight-color: black;
	--bar-background-color: #eee;
	--bar-shadow-color: black;
	--cell-animation-speed: .1s;
}

html, body {
	margin: 0;
	padding: 0;
	
	height: 100%;

	color: var(--main-text-color);
	background-color: var(--main-background-color);

	transition: all 250ms ease-in-out;
}

html, body, button {
	font-size: 3vmin;
}

.hidden {
	display: none;
}

/**
 * Debug bar styling.
 **/
#debug {
	position: fixed;
	
	padding: 0.5em 1em;
	
	top: 0;
	left: 0;
	
	color: #aaa;
	background-color: black;
	
	font-family: courier;
	
	z-index: 100;
}

/**
 * Header & footer bar styling.
 **/
.bar {
	position: absolute;
	
	padding: 0.25em 0.5em;
	
	width: 100%;
	
	background-color: var(--bar-background-color);
	
	text-align: center;
	
	box-sizing: border-box;
	box-shadow: 0 0 0.4em var(--bar-shadow-color);
	
	z-index: 20;
}

.bar a {
	color: var(--bar-text-color);
	
	cursor: pointer;
	
	text-decoration: none;
}

.bar a:hover {
	color: var(--bar-text-highlight-color);
}

/**
 * Header styling.
 **/
.header {
	top: 0;
	left: 0;
}

.header .about {
	position: absolute;
	
	left: 0.5em;
}

.header .install {
	position: absolute;
	
	left: 25%;
}

.header .menu-icon {
	position: relative;
	
	display: inline-block;
	
	width: 1.2em;
	height: 1em;
	
	vertical-align: text-top;
	
	cursor: pointer;
}

.header .menu-icon div {
	display: block;
	
	margin-top: 0.2em;
	
	width: 1.2em;
	height: 0.25em;
	
	background-color: var(--bar-text-color);
	
	border-radius: 0.25em;
	
	transition: all var(--cell-animation-speed) ease-in-out;
}

.header .menu-icon div:first-child {
	margin-top: 0;
}

.header .menu-icon.opened div:nth-child(1) {
	transform: translateY(0.5em) rotate(135deg);
}

.header .menu-icon.opened div:nth-child(2) {
	transform: translateY(0.05em) rotate(-135deg);
}

.header .menu-icon.opened div:nth-child(3) {
	transform: scale(0);
}

.header .menu-icon:hover div {
	background-color: var(--bar-text-highlight-color);
}

.header .theme-switcher {
	position: absolute;
	display: inline-block;

	right: 6em;
	
	width: 1em;
	height: 1em;
	line-height: 1em;

	background-color: black;
	border: 1px solid var(--bar-text-color);
	border-radius: 50%;

	overflow: hidden;

	transition: all 250ms ease-in-out;
}
.header .theme-switcher:before {
	position: absolute;

	left: 0;
	width: 50%;
	height: 100%;

	content: '';

	background-color: white;
}
.header .theme-switcher:hover {
	background-color: white;
	border: 1px solid var(--bar-text-highlight-color);
}
.header .theme-switcher:hover:before {
	background-color: black;
}

.header .version {
	position: absolute;
	
	right: 0.5em;
}

/**
 * Menu styling.
 **/
#menu {
	position: fixed;
	
	left: 10%;
	right: 10%;
	top: -20em;
	height: 20em;
	
	background-color: var(--main-background-color);
	opacity: 0.0;
	
	border: 1px solid var(--bar-text-color);
	border-radius: 0 0 1em 1em;
	
	box-sizing: border-box;
	box-shadow: 0 0 0.4em var(--bar-shadow-color);
	
	z-index: 10;
	
	transition: all var(--cell-animation-speed) ease-in-out;
}

#menu.opened {
	top: 0;
	
	opacity: 0.9;
}

/**
 * Menu tab styling.
 **/
#menu .tabs {
	position: absolute;
	
	margin: 0;
	padding: 0;
	
	top: 3em;
	left: 0;
	right: 0;
	bottom: 0;
	
	list-style: none;
}

#menu .tabs .tab {
	display: inline-block;
	
	margin-left: 1em;
	
	box-sizing: border-box;
}

#menu .tabs .tab .title {
	display: inline-block;
	
	position: relative;
	
	padding: 0.2em 0.5em;
	
	height: 1em;
	line-height: 1em;
	
	background-color: var(--bar-background-color);
	
	border: 1px solid var(--bar-text-color);
	border-radius: 0.25em 0.25em 2px 2px;
	
	z-index: 10;
	
	cursor: pointer;
}

#menu .tabs .tab .content {
	position: absolute;
	
	display: none;
	
	padding: 1em;
	
	border-top: 1px solid var(--bar-text-color);
	
	box-sizing: border-box;
}

#menu .tabs .tab .content .controls {
	display: inline-block;
	
	width: 100%;
}

#menu .tabs .tab .content .controls .button {
	min-width: 1.5em;
	
	background-color: var(--main-background-color);
	border: 1px solid var(--bar-text-color);
	
	text-align: center;
	font-family: Courier;
	font-size: 75%;
	font-weight: bold;
	
	cursor: default;
}

#menu .tabs .tab.opened {
    
}

#menu .tabs .tab.opened .title {
	color: var(--bar-text-color);
	background-color: var(--main-background-color);
	border-bottom: 1px solid var(--main-background-color);
}

#menu .tabs .tab .title:hover {
	color: var(--main-text-color);
	background-color: var(--main-background-color);
}

#menu .tabs .tab.opened .content {
	position: absolute;
	
	display: block;
	
	top: 1.4em;
	left: 0;
	right: 0;
	bottom: 0;
}

/**
 * View styling.
 **/
.views {
	display: flex;
	
	height: 100%;
	
	align-items: center;
	justify-content: space-around;
}

.views .view:before {
	position: absolute;
	
	top: -1.25em;
	width: 100%;
	
	content: attr(data-player-name);
	
	opacity: 0.5;
	
	text-align: center;
}

.views .view {
	position: relative;
	
	display: inline-block;
	
	min-width: 10vmin;
	min-height: 10vmin;
	
	border: 1px solid var(--main-text-color);
	border-radius: 0.5em;
	
	box-sizing: border-box;
}

.views .view .pause-icon {
	display: none;
	position: absolute;
	
	top: 0;
	right: -1.25em;
	
	color: red;
	font-size: 150%;
	
	animation: blink-animation 1s steps(5, start) infinite;
}

@keyframes blink-animation {
	to {
		visibility: hidden;
	}
}

.views .view[data-player-state='3'] .pause-icon {
	display: inline-block;
}

/**
 * View container styling.
 **/
.views .view .container {
	position: absolute;
	
	width: 100%;
	height: 100%;
	
	border-radius: 0.5em;
	
	overflow: hidden;
	
	overscroll-behavior-y: contain;	/* Prevent refresh on mobile devices when dragging down */
	touch-action: none; /* Prevent selection on mobile devices when dragging */
}

.views .view .container .rows {
	position: absolute;
	
	width: 100%;
	height: 100%;
	
	overflow: hidden;
}

.views .view .container .rows .row {
	position: absolute;
	
	width: 100%;
	
	box-sizing: border-box;
	
	overflow: hidden;
}

.views .view .container .rows .row:first-child {
	border-top-left-radius: 0.5em;
	border-top-right-radius: 0.5em;
}

.views .view .container .rows .row:last-child {
	border-bottom-left-radius: 0.5em;
	border-bottom-right-radius: 0.5em;
}

.views .view .container .rows .row:hover {
	background-color: var(--bar-background-color);
}

.views .view .container .rows .row .cell {
	position: absolute;
	
	display: inline-block;
	
	height: 100%;
	
	border: 1px dashed var(--bar-background-color);
	
	box-sizing: border-box;
}

.views .view .container .rows .row .cell:hover {
	background-color: var(--main-background-color);
	border: 1px dashed rgba(0,0,0,0.2);
}

.views .view .container .rows .row .cell.solid {
	border: 2px outset rgba(0,0,0,0.2);
}

.views .view .container .block {
	position: absolute;
	
	/*border: 1px dashed red;*/
	
	box-sizing: border-box;
	
	transition: all var(--cell-animation-speed) ease-in-out;
}

.views .view .container .block .cell {
	position: absolute;
	
	box-sizing: border-box;
}

.views .view .container .block .cell.solid {
	border: 2px solid rgba(0,0,0,0.2);
}

.views .view .preview {
	position: absolute;
	
	top: 10%;
	right: -5em;
	width: 4em;
	height: 4em;
	
	border: 0px solid var(--main-text-color);
	
	font-size: 50%;
	
	box-sizing: border-box;
}

.views .view .preview .cell {
	position: absolute;
	
	background-color: var(--main-background-color);
	border: 1px dashed var(--bar-background-color);
	
	box-sizing: border-box;
}

.views .view .preview .cell.solid {
	border: 1px solid rgba(0, 0, 0, 0.2);
}

.views .view .controls {
	position: absolute;
	
	top: calc(10% + 4em + 1em);
	right: -5em;
	width: 4em;
	
	border: 0px solid var(--main-text-color);
	
	font-size: 50%;
	font-family: courier;
	font-weight: bold;
	text-transform: uppercase;
	
	box-sizing: border-box;

	cursor: default;
}

.views .view .controls .input {

}

.views .view .info {
	display: grid;
	align-items: start;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-gap: 0.5em;
	
	position: absolute;
	
	padding: 0.25em;
	
	top: 100%;
	width: 100%;
	
	/*font-size: 60%;*/
	
	box-sizing: border-box;
}

.views .view .info .stat{
	text-align: center;
}

.views .view .info .stat label {
	display: block;
	
	/*margin-right: 0.5em;
	
	width: 3em;*/
	
	font-weight: bold;
	
	/*text-align: right;*/
}

.views .view .info .stat .value {
	
}

/**
 * Animating filled rows.
 **/
.views .view > .row.animate {
	position: absolute;

	width: 100%;

	opacity: 0.9;
	transform: translate(0, 0) scale(1.0);

	transition-delay: 1000ms;
	transition: all 1000ms ease-in-out;
}

.views .view > .row.animate .cell {
	position: absolute;
	display: inline-block;

	height: 100%;

	border: 1px dashed #eee;
	box-sizing: border-box;
}

.views .view > .row.animate.fade-out {
	opacity: 0.0;
	transform: translate(0, 0) scale(4.0);
}

/**
 * Footer styling.
 **/
.footer {
	bottom: 0;
	left: 0;
}

.footer .highscores {
	float: left;
}

.footer .solengi {
	float: right;
}

/**
 * Dark mode.
 **/
.theme-dark {
	--main-text-color: #eee;
	--main-background-color: #000;
	--bar-text-color: #ddd;
	--bar-text-highlight-color: white;
	--bar-background-color: #333;
	--bar-shadow-color: #666;
}