/*
 *  Singe 3
 *  Copyright (C) 2006-2026 Scott Duensing <scott@kangaroopunch.com>
 *
 *  The bundled menu's look on top of the shipped theme.  Nothing here has a position or a size:
 *  Singe/Menu.singe places every region from the overlay size, so the attract video it draws
 *  underneath fills the #video hole exactly.
 *  Licensed under the GNU General Public License, version 3 or later.
 */

body {
	width: 100%;
	height: 100%;
	font-size: 14dp;
}

/* Every region the script places; the border sits inside the rectangle it is given. */
.placed {
	position: absolute;
	box-sizing: border-box;
}

.hidden {
	display: none;
}

/* The game list:  the panel look (the theme's gradient and shadow), one row per game, the
   selected one gold on a gradient. */
#list {
	background-color: #0a1220d0;
	decorator: linear-gradient(180deg, #182640d0, #0c1424d0);
	box-shadow: 0 6dp 14dp #00000090;
	padding: 4dp 0;
	font-size: 13dp;
}

#list div {
	padding: 3dp 8dp;
	white-space: nowrap;
	overflow: hidden;
	cursor: pointer;
}

#list div:hover {
	background-color: #24344e;
	color: #f0f0f0;
}

#list div:focus {
	background-color: transparent;
	color: #f0f0f0;
}

#list div.selected,
#list div.selected:hover,
#list div.selected:focus {
	background-color: #33507a;
	decorator: linear-gradient(90deg, #4a6ea8, #33507a);
	color: #ffd35a;
}

/* Poster and marquee:  the script sets an image decorator that fits the picture inside. */
.art {
	background-color: #0a122080;
	border: 2dp #6a86b8;
	border-radius: 4dp;
}

/* The attract video shows through here; only the frame is drawn. */
#video {
	border: 2dp #6a86b8;
	border-radius: 4dp;
}

#info {
	display: flex;
	flex-direction: column;
	padding: 6dp 10dp;
	background-color: #101828d0;
	border-color: #6a86b8;
}

#title {
	font-size: 18dp;
	color: #ffd35a;
	margin-bottom: 2dp;
}

.line {
	font-size: 11dp;
	color: #c8d2e6;
}

.line .label {
	color: #8fa2c4;
}

#description {
	flex: 1;
	margin-top: 4dp;
	font-size: 13dp;
	overflow-y: auto;
}

#footer {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	background-color: #101828d0;
	border: 2dp #6a86b8;
	border-radius: 4dp;
	padding: 0 8dp;
}

#hints {
	font-size: 12dp;
	color: #8fa2c4;
}

#start {
	font-size: 13dp;
	padding: 1dp 12dp;
	margin: 0;
}

/* Audio delay calibration:  an opaque page over everything, white for the frame of the flash. */
#calibration {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	padding: 25dp;
	box-sizing: border-box;
	background-color: #000000;
	color: #ffffff;
}

#calibration.flash {
	background-color: #ffffff;
	color: #000000;
}

#calibration h1 {
	font-size: 24dp;
	color: #ffffff;
	margin-bottom: 20dp;
}

#calibration.flash h1 {
	color: #000000;
}

#calibration p {
	margin-bottom: 20dp;
}

#calibration p.value {
	margin-bottom: 4dp;
}

#calibration p.value + p.keys {
	margin-top: 20dp;
}

#calibration p.keys {
	margin-bottom: 4dp;
}