/*
 *  Singe 3
 *  Copyright (C) 2006-2026 Scott Duensing <scott@kangaroopunch.com>
 *
 *  The score panel's look:  an arcade scoreboard's seven segment readouts, each a row of dim
 *  "all segments lit" digits with the live value glowing over them, so an unused digit still
 *  shows its ghost the way a real display does.  A game or a theme may replace this file.
 *  Licensed under the GNU General Public License, version 3 or later.
 */

body {
	width: 100%;
	height: 100%;
	font-family: FreeSans;
	font-weight: bold;
	color: #ff3018;
}

/* The cabinet the readouts are set into. */
#board {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 12dp 24dp;
	background-color: #060606;
	decorator: linear-gradient(180deg, #1a1a1c, #050505);
	border: 3dp #3a3a40;
	border-radius: 10dp;
}

.cell {
	display: block;
	text-align: center;
	padding: 0 10dp;
}

/* An empty second player cell leaves the row to the other two. */
.cell:empty {
	padding: 0;
}

.label {
	display: block;
	font-size: 20dp;
	letter-spacing: 3dp;
	color: #c8b070;
	margin: 0 0 4dp 0;
}

/* A readout stacks the live digits exactly over the dim ones, so both are the same size and
   the same shape whatever the value is.  The slant is the LED look. */
.readout {
	display: block;
	position: relative;
	font-size: 54dp;
	letter-spacing: 6dp;
	transform: skewX(-7deg);
}

.readout.small {
	font-size: 34dp;
	letter-spacing: 3dp;
}

.ghost {
	display: block;
	color: #4d1108;
}

.value {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	color: #ff3018;
	font-effect: glow(2dp 5dp #ff6a3cc0);
}

/* The life count sits under the score, smaller, with its own label beside it. */
.lives {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	margin: 6dp 0 0 0;
}

.lives .label {
	font-size: 16dp;
	margin: 0 8dp 0 0;
}