/*
 *  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;
}

/* A game with a newer version on the service wears a small mark after its title, and the line
   under its details says which version and which button.  Gold, like the selection, since it is
   the one thing on the page asking for a press. */
#list div .badge {
	margin-left: 6dp;
	padding: 0 4dp;
	font-size: 10dp;
	color: #101828;
	background-color: #ffd35a;
	border-radius: 3dp;
}

#notice {
	color: #ffd35a;
}


/* .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;
}