/*
 *  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.  No border:
   cabinet art and a marquee are pictures in their own right and a frame round them fights with
   whatever frame the artwork already has. */
.art {
	background-color: #0a122080;
}

/* The attract video shows through here;  nothing is drawn over it. */
#video {
}

#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;
	background-color: #101828d0;
	border: 2dp #6a86b8;
	border-radius: 4dp;
	padding: 0 8dp;
}

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


/* .hidden and .tool are one class each, and the pages that let the overlay through wear two, so a
   page taken out of view has to be said again here or its display wins. */
.tool.hidden,
.tool.clear.hidden {
	display: none;
}

/* The service tools:  one page over everything, the backdrop still moving behind it, and on it
   a card in the game page's own dress -- the panel gradient, the blue-grey border, a title bar in
   the selection's gradient with the title in the game list's gold, and the key hints in a footer
   strip like the game page's.  Nothing on it says black. */
.tool {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	padding: 10dp;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	color: #f0f0f0;
	font-size: 15dp;
}

.tool .card {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	background-color: #0a1220d8;
	decorator: linear-gradient(180deg, #182640d8, #0c1424d8);
	border: 2dp #6a86b8;
	border-radius: 6dp;
	box-shadow: 0 6dp 14dp #00000090;
	overflow: hidden;
}

/* The audio delay tool alone turns the whole screen white for the frame of its flash;  the card
   steps out of the way so the flash is the flash and nothing else. */
.tool.flash {
	background-color: #ffffff;
}

.tool.flash .card {
	visibility: hidden;
}

.tool h1 {
	font-size: 20dp;
	color: #ffd35a;
	margin: 0;
	padding: 8dp 14dp;
	background-color: #33507a;
	decorator: linear-gradient(90deg, #4a6ea8, #33507a);
	border-bottom: 2dp #6a86b8;
}

.tool .columns {
	flex: 1 1 0;
	display: flex;
	flex-direction: row;
	overflow: hidden;
}

/* The style sheet can scroll this box, but nothing drives a scroll bar from a joystick:  the
   windowing in Singe/Tools.singe is what keeps the chosen row on screen. */
.tool #toolBody {
	flex: 1 1 0;
	padding: 12dp 14dp;
	overflow-y: auto;
}

/* The list of tools has a second column:  what the chosen tool is for, beside the list. */
.tool #toolNote {
	flex: 0 0 42%;
	padding: 12dp 16dp;
	border-left: 2dp #6a86b8;
	color: #c8d2e6;
	font-size: 14dp;
}

.tool #toolNote.hidden {
	display: none;
}

.tool #toolKeys {
	padding: 6dp 14dp;
	border-top: 2dp #6a86b8;
	background-color: #101828d0;
	color: #8fa2c4;
	font-size: 13dp;
}

.tool p {
	margin: 0;
}

/* The key hints, close together when a tool needs more than one line of them. */
.tool p.keys {
	margin: 0;
}

.tool p.keys + p.keys {
	margin-top: 2dp;
}

/* The rows a tool fills in for itself:  a heading row and an indented detail row under it.  Text
   with nowhere to break -- a long path -- wraps mid-word rather than running off the edge, but an
   ordinary word is left whole. */
.tool .row {
	margin-bottom: 4dp;
	word-break: break-word;
}

.tool .sub {
	margin-left: 20dp;
	margin-bottom: 3dp;
	font-size: 13dp;
	color: #c8d2e6;
	word-break: break-word;
}

/* A label beside its value.  The two are columns rather than one run of text, so a value too long
   for the line wraps under itself instead of under the label. */
.tool .pair {
	display: flex;
	margin-bottom: 4dp;
}

.tool .pair .label {
	flex: 0 0 130dp;
	color: #8fa2c4;
}

.tool .pair .detail {
	flex: 1 1 0;
	word-break: break-word;
}

/* A line a tool offers to choose between, and the chosen one the way the game list shows its
   selection:  gold on the gradient bar.  A detail the row carries -- a size, a state, a value --
   sits against the right edge, so a column of them lines up whatever the text beside it. */
.tool .item {
	display: flex;
	padding: 3dp 8dp;
	margin: 0 0 1dp -8dp;
	border-radius: 3dp;
}

.tool .item .text {
	flex: 1 1 0;
}

.tool .item .detail {
	flex: 0 0 auto;
	margin-left: 16dp;
	text-align: right;
}

.tool .item.selected {
	background-color: #33507a;
	decorator: linear-gradient(90deg, #4a6ea8, #33507a);
	color: #ffd35a;
}

/* A gap a tool asked for. */
.tool .blank {
	height: 12dp;
}

/* Two tools draw their own picture into the overlay, which is underneath the document:  the light
   gun's targets and the display's test pattern.  Those pages let it through, and the card becomes
   a strip along the bottom between the two lower targets, so nothing worth aiming at is covered.
   Its width is fixed:  left to fit its content, the value column of a pair had no room and broke
   its words one letter to a line. */
.tool.clear .card {
	flex: 0 0 auto;
	margin-top: auto;
	align-self: center;
	width: 70%;
}

.tool.clear h1 {
	font-size: 16dp;
	padding: 4dp 12dp;
}

/* The strip is as tall as its rows:  the columns, which fill the page otherwise, take what they
   need here.  The body inside them keeps its flex, which in their row is its width;  without it
   a pair's value column had no room. */
.tool.clear .columns {
	flex: 0 0 auto;
}

.tool.clear #toolBody {
	padding: 6dp 12dp;
}

.tool.clear #toolKeys {
	padding: 4dp 12dp;
}

/* The help under the list of tools, away from the list itself. */
#toolHelp {
	margin-top: 12dp;
}