/*=== Crypt Tryst ==============================================================
The game's looks. Outside the crypt, SymbolSync's chassis: one monospaced face, hard edges and hard shadows that
press flat under a tap. Inside it (the canvas, see render.js), the opposite: soft and glowing. Five colours and their
shades: midnight, umber, candle, rose and moon. Mobile first: a phone in portrait is the layout everything else
grows from */

:root {
	color-scheme: dark;
	/* The palette is palette.css's, written from palette.js: the night (and midnight, its edge, glow, plates and keys),
	umber, candle, wax, rose, moon and moon-pale, and the lovers' own (romeo, juliet, their -text and -pale) */
	--font: "IBM Plex Mono", "Courier New", Courier, monospace;
	--shadow: 4px 4px 0 var(--umber);
	--shadow-small: 3px 3px 0 var(--umber);
	--snap: 60ms;
	--safe-top: env(safe-area-inset-top, 0px);
	--safe-right: env(safe-area-inset-right, 0px);
	--safe-bottom: env(safe-area-inset-bottom, 0px);
	--safe-left: env(safe-area-inset-left, 0px);
	/* The chassis's tokens (core/style/base.css), from the palette above */
	--bg: var(--night);
	--plate: var(--midnight-2);
	--field: var(--night);
	--key: var(--midnight-3);
	--border: var(--umber);
	--key-border: var(--umber-light);
	--text: var(--wax);
	--muted: var(--moon-pale);
	--accent: var(--candle);
	--accent-text: var(--midnight);
	--shadow-color: var(--umber);
	--disabled: 0.4;
}


/* The page is a crypt too: near black, a little less so in the middle, with mist drifting slowly through it in moon
and midnight (the two layers below), never fast enough to watch */
body {
	margin: 0;
	min-height: 100dvh;
	overflow-x: hidden;
	background: radial-gradient(ellipse 80% 70% at 50% 45%, var(--night-glow) 0%, var(--night) 60%, var(--night-edge) 100%) fixed;
}

body::before,
body::after {
	content: "";
	position: fixed;
	inset: -20%;
	pointer-events: none;
	z-index: 0;
}

body::before {
	background:
		radial-gradient(closest-side at 22% 30%, color-mix(in srgb, var(--moon) 16%, transparent), transparent),
		radial-gradient(closest-side at 78% 62%, color-mix(in srgb, var(--moon) 12%, transparent), transparent),
		radial-gradient(closest-side at 45% 85%, color-mix(in srgb, var(--midnight-2) 50%, transparent), transparent);
	animation: mist 70s ease-in-out infinite alternate;
}

body::after {
	background:
		radial-gradient(closest-side at 70% 20%, color-mix(in srgb, var(--moon) 10%, transparent), transparent),
		radial-gradient(closest-side at 30% 70%, color-mix(in srgb, var(--moon) 9%, transparent), transparent);
	animation: mist 95s ease-in-out -30s infinite alternate-reverse;
}


/*=== The page =================================================================*/

#app {
	position: relative;
	z-index: 1;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	max-width: 560px;
	margin: 0 auto;
	padding: calc(20px + var(--safe-top)) calc(16px + var(--safe-right)) calc(20px + var(--safe-bottom)) calc(16px + var(--safe-left));
}

/* The crypt takes what room there is */
#app.wide {
	max-width: 960px;
	height: 100dvh;
	padding-top: calc(12px + var(--safe-top));
	padding-bottom: calc(12px + var(--safe-bottom));
}

.screen {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	animation: screen_in 90ms steps(3) both;
}


/*=== Keys =====================================================================
A button is a key: a hard border, a hard shadow, and a press that sinks it flat */


.button .sub {
	display: block;
	margin-top: 2px;
	font-size: 11px;
	font-weight: 400;
	color: var(--moon-pale);
}

/* On the candle, the key's own dark text: moon-pale would vanish into it */
.button.primary .sub {
	color: var(--midnight);
}


@media (hover: hover) {
	.button:hover:not(:disabled) {
		border-color: var(--moon-pale);
	}

	.button.primary:hover:not(:disabled) {
		border-color: var(--wax);
	}
}


/*=== Home =====================================================================*/

.hero {
	text-align: center;
	padding: 40px 0 28px;
}


.title_accent {
	color: var(--candle);
	text-shadow: 0 0 18px color-mix(in srgb, var(--candle) 35%, transparent);
}

/* Where SymbolSync's title has a blinking cursor, this one has a candle flame: a drop of candle light round a rose
heart, breathing and leaning a little, never strobing */
.flame {
	position: relative;
	display: inline-block;
	width: 0.3em;
	height: 0.3em;
	margin-left: 0.14em;
	vertical-align: 0.5em;
	transform-origin: 50% 100%;
	animation: flicker 2.8s ease-in-out infinite;
}

.flame::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50% 0 50% 50%;
	transform: rotate(-45deg);
	background: radial-gradient(circle at 60% 40%, var(--rose) 0 22%, var(--candle) 48%, var(--spark) 100%);
	box-shadow: 0 0 10px 2px color-mix(in srgb, var(--candle) 60%, transparent), 0 0 28px 8px color-mix(in srgb, var(--candle) 22%, transparent);
}


/*=== Lobby ====================================================================
The room: the code large enough to read across a table, a field for a friend's, the two seats, Romeo and Juliet.
Lifted from SymbolSync's, in this game's colours */


.code {
	flex: 1;
	font-size: 34px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 6px;
	color: var(--candle);
	text-shadow: 0 0 14px color-mix(in srgb, var(--candle) 35%, transparent);
}


/* Each lover in their own colour, lifted to read on the plate */
.seat_role[data-role="romeo"] {
	color: var(--romeo-text);
}

.seat_role[data-role="juliet"] {
	color: var(--juliet-text);
}


.button.role_romeo.selected {
	border-color: var(--romeo-text);
	background: color-mix(in srgb, var(--moon) 35%, transparent);
	color: var(--romeo-pale);
}

.button.role_juliet.selected {
	border-color: var(--juliet-text);
	background: color-mix(in srgb, var(--rose) 30%, transparent);
	color: var(--juliet-pale);
}


/*=== Play =====================================================================
The crypt on its canvas, as big as fits, with a line of what's under the pointer and the keys below */

.hud {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 8px;
}

.hud_label {
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--candle);
}

.hud_detail {
	font-size: 12px;
	color: var(--moon-pale);
	letter-spacing: 1px;
}

.stage {
	position: relative;
	flex: 1;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.crypt {
	display: block;
	touch-action: none;
	-webkit-tap-highlight-color: transparent;
}

.clock {
	font-weight: 700;
	font-size: 18px;
	font-variant-numeric: tabular-nums;
	color: var(--wax);
}

/* Together: the summary under the crypt once the lovers have met and the trails are drawn, in place of the help line
and the keys, so the crypt stays the picture: the time, what each lover did, and the keys */
.met {
	width: min(560px, 100%);
	margin: 10px auto 0;
	padding: 14px 16px;
	box-shadow: var(--shadow), 0 0 50px 6px color-mix(in srgb, var(--candle) 18%, transparent);
	animation: met_in 400ms ease-out both;
}

.met_head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.met_title {
	margin: 0;
	font-size: 24px;
	color: var(--candle);
	text-shadow: 0 0 18px color-mix(in srgb, var(--candle) 45%, transparent);
}

.met_time {
	margin: 0;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--wax);
}

.tally {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin: 10px 0 12px;
}

.tally_lover {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 6px 10px;
	border-left: 3px solid var(--umber);
	font-size: 12px;
	color: var(--moon-pale);
}

.tally_name {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
}

/* Each lover in their own colour, as their trail is drawn */
.tally_lover[data-role="romeo"] {
	border-left-color: var(--romeo);
}

.tally_lover[data-role="romeo"] .tally_name {
	color: var(--romeo-text);
}

.tally_lover[data-role="juliet"] {
	border-left-color: var(--juliet);
}

.tally_lover[data-role="juliet"] .tally_name {
	color: var(--juliet-text);
}

.met_keys {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 8px;
}

.met .button {
	text-align: center;
}

.met_status {
	min-height: 1.4em;
	margin: 8px 0 0;
	font-size: 12px;
	color: var(--moon-pale);
	text-align: center;
}

.strip {
	min-height: 3em;
	margin: 8px 0;
	font-size: 12px;
	color: var(--moon-pale);
	text-align: center;
}

.keys {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}


/*=== Motion ===================================================================*/


@keyframes met_in {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes mist {
	0% { transform: translate(0, 0) scale(1); opacity: 0.7; }
	50% { transform: translate(4%, -3%) scale(1.08); opacity: 1; }
	100% { transform: translate(-3%, 4%) scale(1.02); opacity: 0.8; }
}

@keyframes flicker {
	0%, 100% { transform: scale(1, 1) rotate(0deg); opacity: 1; }
	18% { transform: scale(0.94, 1.06) rotate(-2deg); opacity: 0.92; }
	31% { transform: scale(1.03, 0.97) rotate(1deg); opacity: 1; }
	47% { transform: scale(0.97, 1.08) rotate(2.5deg); opacity: 0.88; }
	62% { transform: scale(1.02, 0.96) rotate(-1deg); opacity: 0.97; }
	80% { transform: scale(0.96, 1.04) rotate(1.5deg); opacity: 0.9; }
}



/* A primary key selected (Ready, pressed) keeps the selected look rather than going solid */
.button.primary.selected {
	border-color: var(--candle);
	background: var(--select-wash);
	color: var(--candle);
}