/*=== Phase Formation ==========================================================
The game's looks: an iridescent void (see docs/prototype-plan.md, The look). Aubergine sunk toward black for the page,
wheat for the text, and the two phases, cerulean and persimmon, as the accents. The palette is palette.css's, written
from palette.js, mapped onto the chassis's tokens (core/style/base.css) first so its lobby, cards and keys take it.
The stage itself is a canvas, drawn by render.js and void.js from the same palette, filling the screen */

:root {
	color-scheme: dark;

	/* The chassis's tokens */
	--bg: var(--void);
	--plate: var(--void-2);
	--field: var(--void);
	--key: var(--void-3);
	--border: var(--rim);
	--text: var(--wheat);
	--muted: var(--wheat-2);
	--accent: var(--blue);
	--accent-text: var(--void);
	--select: var(--orange);
	--select-wash: color-mix(in srgb, var(--orange) 14%, transparent);
	--select-text: var(--orange-light);
	--focus: var(--orange-light);
	--radius: 4px;
}

/* The two phases in the title */
.title_accent {
	color: var(--orange);
}

.how.keys {
	color: var(--muted);
	font-size: 13px;
}


/*=== The stage ================================================================*/

#screen_play {
	position: fixed;
	inset: 0;
	z-index: 1;
	background: var(--void);
	animation: none;
}

#play_canvas {
	display: block;
	width: 100%;
	height: 100%;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
	cursor: none; /*The stage draws its own, where the ship is flying to (render.js)*/
}

.play_leave {
	position: absolute;
	width: auto;
	right: calc(10px + var(--safe-right));
	bottom: calc(10px + var(--safe-bottom));
	min-height: 0;
	padding: 6px 12px;
	opacity: 0.7;
}


/*=== The results ==============================================================*/

.tally {
	width: 100%;
	margin: 0 0 18px;
	border-collapse: collapse;
	font-size: 14px;
}

.tally th, .tally td {
	padding: 6px 4px;
	text-align: right;
	border-bottom: 1px solid color-mix(in srgb, var(--rim) 60%, transparent);
}

.tally th:first-child, .tally td:first-child {
	text-align: left;
	color: var(--muted);
}

/* Each column in its phase's color */
.tally .blue {
	color: var(--blue-light);
}

.tally .orange {
	color: var(--orange-light);
}