/*=== StarSignals Crossed ======================================================
The game's looks: a starry night in a cozy inventor's workshop. The series' bones from SymbolSync (keys with a hard
offset shadow that press flat, uppercase labels in one monospaced face, cards, safe areas), dressed in pine, mint,
pewter, brass and firefly green, and springy where SymbolSync was stepped: things wobble, overshoot and settle.
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: pine, mint, pewter, brass (and brass-light for words,
	brass-dark for rims), firefly, the night and its plates and keys, the shade, ink and paper */
	--font: "IBM Plex Mono", "Courier New", Courier, monospace;
	--serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
	--shadow: 4px 4px 0 var(--shade);
	--shadow-small: 3px 3px 0 var(--shade);
	--radius: 6px;
	--snap: 70ms;
	--spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Overshoots a little, then settles */
	--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(--night-2);
	--field: var(--night);
	--key: var(--night-3);
	--border: var(--pine);
	--text: var(--mint);
	--muted: var(--pewter);
	--accent: var(--firefly);
	--accent-text: var(--ink);
	--shadow-color: var(--shade);
	--screen-in: screen_in 260ms var(--spring) both;
}


body {
	margin: 0;
	min-height: 100dvh;
	overflow-x: hidden;
	background: radial-gradient(ellipse at 50% -10%, var(--glow) 0%, var(--night) 60%) fixed;
}


/*=== The night sky ============================================================
Stars placed by fx.js createSky, each twinkling on its own slow clock, and now and then a shooting star */

.sky {
	position: fixed;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 0;
}

.star {
	position: absolute;
	width: var(--size, 2px);
	height: var(--size, 2px);
	border-radius: 50%;
	background: var(--mint);
	opacity: 0.3;
	animation: twinkle var(--period, 4s) ease-in-out var(--delay, 0s) infinite alternate;
}

.star.warm {
	background: var(--pewter);
}

.star.bright {
	background: var(--firefly);
	box-shadow: 0 0 6px color-mix(in srgb, var(--firefly) 70%, transparent);
}

@keyframes twinkle {
	from { opacity: 0.15; }
	to { opacity: 0.9; }
}

.shooting_star {
	position: absolute;
	top: 12%;
	left: 70%;
	width: 90px;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, color-mix(in srgb, var(--mint) 0%, transparent), var(--mint));
	opacity: 0;
	transform: rotate(-24deg);
	animation: shooting 14s linear 3s infinite;
}

@keyframes shooting {
	0%, 93% { opacity: 0; transform: rotate(-24deg) translateX(0); }
	95% { opacity: 1; }
	100% { opacity: 0; transform: rotate(-24deg) translateX(-260px); }
}


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

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


@keyframes screen_in {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}


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


.button.small {
	width: auto;
	padding: 6px 10px;
	font-size: 12px;
}


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

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


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

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

.title {
	margin: 0;
	font-size: 34px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -1px;
}


/* The slash, a shooting star across the name */
.title_slash {
	display: inline-block;
	margin: 0 2px;
	color: var(--brass);
	font-size: 1.25em;
	line-height: 0.8;
	transform: rotate(12deg) translateY(2px);
	text-shadow: 0 0 10px color-mix(in srgb, var(--brass) 60%, transparent);
}


/*=== The match bar ============================================================
The clues given (the clock is hidden while playing), the five round pips, Leave */

.match_bar {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 12px;
}

.clues {
	display: flex;
	align-items: baseline;
	gap: 6px;
	flex-shrink: 0;
	position: relative;
}

.clues_count {
	display: inline-block;
	min-width: 1.2ch;
	font-size: 26px;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--mint);
	position: relative;
}

.clues_word {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--pewter);
}

/* Past the free clue, each one costs points: the count warms to brass */
.clues.costly .clues_count {
	color: var(--brass-light);
}

.clues_count.jump {
	animation: count_jump 420ms var(--spring);
}

@keyframes count_jump {
	0% { transform: scale(1); }
	30% { transform: scale(1.3); color: var(--brass-light); }
	100% { transform: scale(1); }
}

.round_pips {
	flex: 1;
	display: flex;
	justify-content: center;
	gap: 7px;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.round_pips li {
	flex-shrink: 0;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 2px solid var(--pine);
	transition: background 200ms, border-color 200ms, transform 300ms var(--spring);
}

.round_pips li.current {
	border-color: var(--mint);
	transform: scale(1.25);
}

.round_pips li.done {
	background: var(--firefly);
	border-color: var(--firefly);
}


/*=== Lobby ====================================================================
The room: the code large enough to read across a table, a field for a friend's, the two seats, the role keys */


/* A line under each role's name, saying what it does */
.role_hint {
	display: block;
	margin-top: 4px;
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	opacity: 0.75;
}


.menu_label {
	margin: 20px 0 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--pewter);
	opacity: 0.7;
}


/*=== The match note ===========================================================
A line above the panes for what's happening to the connection: a partner's dropped, this one's reconnecting */

.match_note {
	margin: 0 0 10px;
	padding: 6px 12px;
	border-left: 3px solid var(--brass);
	background: color-mix(in srgb, var(--brass) 12%, transparent);
	font-size: 13px;
	color: var(--mint);
}


/*=== The match: panes and modes ===============================================
A pane for each role. The screen's mode says which are shown; in pair practice both, side by side when there's room
and one above the other when there isn't */

#app.wide {
	max-width: 1160px;
}

.match_panes {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.pane {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.mode_inventor .pane_poet,
.mode_poet .pane_inventor {
	display: none;
}

/* The role's name in the bar, only wanted when both panes are on one screen */
.pane_role {
	display: none;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--brass-light);
}

.mode_pair .pane_role {
	display: inline;
}

/* On a phone the bar can't hold the role's name too: it goes on a line of its own above */
@media (max-width: 600px) {
	.mode_pair .match_bar {
		flex-wrap: wrap;
		row-gap: 6px;
	}

	.mode_pair .pane_role {
		order: -1;
		flex-basis: 100%;
	}
}

.mode_pair .pane_inventor {
	padding-top: 22px;
	border-top: 2px dashed var(--pine);
}

@media (min-width: 900px) {
	.mode_pair .match_panes {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 36px;
		align-items: start;
	}

	.mode_pair .pane_inventor {
		padding-top: 0;
		border-top: none;
	}
}


/*=== Notes ====================================================================
The Poet's sentences, as the Inventor sees them: the newest large, dropping in like a note pinned up, the two before
it smaller and fading */

.notes {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
	min-height: 70px;
	margin: 0 0 12px;
	padding: 10px 14px;
	border: 2px dashed var(--pine);
	border-radius: var(--radius);
	font-family: var(--serif);
	list-style: none;
}

.notes:empty::before {
	content: "The Poet's notes will land here.";
	color: var(--pewter);
	font-style: italic;
	font-size: 14px;
	opacity: 0.6;
}

.notes li {
	color: var(--pewter);
	font-size: 14px;
	line-height: 1.3;
	opacity: 0.7;
}

.notes li:first-child {
	color: var(--mint);
	font-size: 21px;
	opacity: 1;
	transform-origin: left center;
	animation: note_in 560ms var(--spring);
}

.notes li:nth-child(3) {
	opacity: 0.4;
}

@keyframes note_in {
	0% { opacity: 0; transform: translateY(-22px) rotate(-4deg); }
	55% { opacity: 1; transform: translateY(3px) rotate(1.5deg); }
	80% { transform: translateY(-1px) rotate(-0.5deg); }
	100% { transform: none; }
}

/* In practice, what the Poet would be reading */
.practice_strip {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-bottom: 12px;
	padding: 8px 14px;
	border-left: 3px solid var(--brass);
	background: color-mix(in srgb, var(--brass) 10%, transparent);
	border-radius: 0 var(--radius) var(--radius) 0;
}

.practice_label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--brass-light);
}

.practice_text {
	font-family: var(--serif);
	font-size: 17px;
	color: var(--mint);
}


/*=== The Poet: the instruction and the Inventor's moves =======================*/

.instruction_card {
	margin-bottom: 12px;
	padding: 10px 14px 12px;
	background: var(--night-2);
	border: 2px solid var(--pine);
	border-radius: var(--radius);
	box-shadow: var(--shadow-small);
}

.instruction_label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--brass-light);
}

.instruction_text {
	margin: 2px 0 8px;
	font-family: var(--serif);
	font-size: 19px;
	line-height: 1.3;
	color: var(--mint);
}

.echo_row {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 18px;
}

.echo_row .step_pips li {
	width: 11px;
	height: 11px;
}

/* The Inventor's last moves, newest first */
.echo {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 12px;
	color: var(--pewter);
}

.echo.idle {
	opacity: 0.5;
	font-style: italic;
}

.echo_move + .echo_move::before {
	content: " · ";
	color: var(--pine);
}

.echo_move {
	opacity: 0.6;
}

.echo_move.newest {
	opacity: 1;
	color: var(--mint);
}

.echo_move.failed {
	color: var(--brass-light);
}


/*=== The fridge ===============================================================
A mint enamel door with a pewter handle, and magnets on it: pale tiles with dark serif words, each at its own small
tilt, sliding on as they arrive. A bonus magnet has a firefly rim, a star sticker and a slow shimmer. The door grows
with its words (seventy and more in a long round), so on a phone it's a little tighter */

.fridge_wrap {
	position: relative;
}

.fridge {
	position: relative;
	min-height: 250px;
	padding: 16px 36px 16px 14px;
	background: linear-gradient(170deg, var(--fridge-light) 0%, var(--mint) 55%, var(--fridge-dark) 100%);
	border-radius: 14px;
	box-shadow: var(--shadow), inset 0 2px 0 color-mix(in srgb, var(--paper) 50%, transparent), inset 0 -5px 0 color-mix(in srgb, var(--pine) 20%, transparent);
}

.fridge_handle {
	position: absolute;
	top: 28px;
	right: 12px;
	bottom: 28px;
	width: 9px;
	border-radius: 5px;
	background: linear-gradient(90deg, var(--bar-light), var(--pewter) 60%, var(--bar-dark));
	box-shadow: 2px 2px 0 color-mix(in srgb, var(--ink) 25%, transparent);
}

.door {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: flex-start;
	gap: 8px 6px;
}

.slot {
	display: inline-flex;
}

.magnet {
	--tilt: 0deg;
	position: relative;
	padding: 3px 8px 4px;
	border: none;
	border-radius: 2px;
	background: var(--paper);
	color: var(--ink);
	font: 16px/1.2 var(--serif);
	box-shadow: 1px 2px 0 color-mix(in srgb, var(--ink) 35%, transparent);
	transform: rotate(var(--tilt));
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	transition: box-shadow 120ms;
}

.magnet:focus-visible {
	outline: 2px solid var(--firefly);
	outline-offset: 2px;
}

@media (hover: hover) {
	.magnet:hover {
		box-shadow: 2px 4px 0 color-mix(in srgb, var(--ink) 30%, transparent);
	}
}

.magnet.arriving {
	animation: magnet_in 460ms var(--spring) both;
}

@keyframes magnet_in {
	from { opacity: 0; transform: translateX(70px) rotate(calc(var(--tilt) + 16deg)) scale(0.85); }
	60% { opacity: 1; }
	to { opacity: 1; transform: rotate(var(--tilt)); }
}

.magnet.bonus {
	box-shadow: 0 0 0 2px var(--firefly), 1px 2px 0 color-mix(in srgb, var(--ink) 35%, transparent);
	animation: shimmer 2.6s ease-in-out infinite;
}

.magnet.bonus.arriving {
	animation: magnet_in 460ms var(--spring) both, shimmer 2.6s ease-in-out 460ms infinite;
}

.magnet.bonus::after {
	content: "";
	position: absolute;
	top: -7px;
	right: -7px;
	width: 14px;
	height: 14px;
	background: var(--firefly);
	clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

@keyframes shimmer {
	50% { box-shadow: 0 0 0 2px var(--firefly), 0 0 12px color-mix(in srgb, var(--firefly) 75%, transparent), 1px 2px 0 color-mix(in srgb, var(--ink) 35%, transparent); }
}

@media (max-width: 480px) {
	.fridge {
		padding: 12px 28px 12px 10px;
	}

	.fridge_handle {
		right: 9px;
		width: 7px;
	}

	.door {
		gap: 6px 5px;
	}

	.magnet {
		padding: 2px 6px 3px;
		font-size: 15px;
	}
}

/* A comma: a thin sliver of a tile, the mark bold enough to find */
.magnet.punctuation {
	padding-left: 3px;
	padding-right: 3px;
	font-weight: 600;
}

/* A magnet's place on the door, held while it's away in the sentence */
.slot.empty {
	border-radius: 2px;
	background: color-mix(in srgb, var(--pine) 10%, transparent);
}


/*=== The sentence =============================================================
Just above the fridge door, and kept in reach at the top of the screen when a full door has the page scrolled */

.composer {
	position: sticky;
	top: 0;
	z-index: 5;
	display: flex;
	gap: 8px;
	margin-bottom: 4px;
	padding: calc(8px + var(--safe-top)) 0 8px;
	background: linear-gradient(0deg, color-mix(in srgb, var(--night) 0%, transparent) 0%, var(--night) 22%);
}

.strip {
	flex: 1;
	min-width: 0;
	min-height: 48px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	padding: 7px 8px;
	border: 2px dashed var(--pine);
	border-radius: var(--radius);
	background: color-mix(in srgb, var(--mint) 5%, transparent);
}

.strip .magnet {
	transform: none;
}

.strip.full {
	animation: shudder 360ms ease-out;
}

.strip_empty {
	padding-left: 4px;
	color: var(--pewter);
	font: italic 14px var(--serif);
	opacity: 0.6;
}

.button.send_button {
	width: auto;
	text-align: center;
	align-self: stretch;
}

.sent {
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
	font-family: var(--serif);
	font-size: 14px;
	color: var(--pewter);
}

.sent li::before {
	content: "↑ ";
	color: var(--pine);
}

.sent li:nth-child(2) {
	opacity: 0.65;
}

.sent li:nth-child(3) {
	opacity: 0.4;
}

/* A sent sentence, thrown up off the strip */
.note_thrown {
	position: fixed;
	z-index: 25;
	padding: 8px 12px;
	border-radius: 3px;
	background: var(--paper);
	color: var(--ink);
	font: 17px var(--serif);
	box-shadow: 3px 4px 0 color-mix(in srgb, var(--shade) 50%, transparent);
	pointer-events: none;
}


/*=== The bench ================================================================
Four gadgets on a brass-edged workbench, two by two. Each gadget's tile holds its SVG (see gadgets/) and a plaque */

.bench_wrap {
	position: relative;
}

.bench {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	padding: 12px;
	background: var(--night-2);
	border: 2px solid var(--brass-dark);
	border-radius: 10px;
	box-shadow: var(--shadow), inset 0 0 0 4px color-mix(in srgb, var(--brass) 8%, transparent);
}

.bench.locked {
	pointer-events: none;
}

.bench.shudder {
	animation: shudder 420ms ease-out;
}

@keyframes shudder {
	0% { transform: translateX(0); }
	15% { transform: translateX(-7px) rotate(-0.6deg); }
	30% { transform: translateX(6px) rotate(0.5deg); }
	45% { transform: translateX(-4px) rotate(-0.3deg); }
	60% { transform: translateX(3px); }
	80% { transform: translateX(-1px); }
	100% { transform: translateX(0); }
}

/* A failed move: a brass flash over the bench */
.bench_flash {
	position: absolute;
	inset: 0;
	border-radius: 10px;
	background: var(--brass);
	opacity: 0;
	pointer-events: none;
}

.bench_flash.flash {
	animation: flash 380ms ease-out;
}

@keyframes flash {
	0% { opacity: 0.45; }
	100% { opacity: 0; }
}

.gadget {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	aspect-ratio: 1 / 1.08;
	padding: 6px 6px 8px;
	background: var(--night-3);
	border: 2px solid var(--pine);
	border-radius: 8px;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

.gadget.poke {
	animation: poke 220ms var(--spring);
}

@keyframes poke {
	0% { transform: scale(1); }
	35% { transform: scale(0.95); }
	100% { transform: scale(1); }
}

.gadget_art {
	flex: 1;
	width: 100%;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.gadget_art svg {
	width: 100%;
	height: 100%;
	overflow: visible;
}

/* The dial and the pinwheel are dragged: a drag on them is never a scroll */
#gadget_dial, #gadget_pinwheel {
	touch-action: none;
}

.gadget_label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--brass-light);
}

/* SVG parts that turn: each about its own pivot, given in the viewBox's units */
.gadget svg .pivot {
	transform-box: view-box;
}


/*=== Switch ===================================================================*/

.switch_lever {
	transform-origin: 60px 80px;
	transform: rotate(-28deg);
	transition: transform 260ms var(--spring);
}

.gadget.on .switch_lever {
	transform: rotate(28deg);
}

.switch_glass {
	fill: var(--night);
	transition: fill 160ms;
}

.gadget.on .switch_glass {
	fill: var(--firefly);
}

.switch_glow {
	fill: var(--firefly);
	opacity: 0;
	transition: opacity 200ms;
}

.gadget.on .switch_glow {
	opacity: 0.35;
}


/*=== Bell =====================================================================*/

.bell_body {
	transform-origin: 60px 18px;
}

.bell_clapper {
	transform-origin: 60px 30px;
}

.gadget.ringing .bell_body {
	animation: bell_swing 900ms ease-out;
}

.gadget.ringing .bell_clapper {
	animation: clapper_swing 900ms ease-out 40ms;
}

@keyframes bell_swing {
	0% { transform: rotate(0); }
	12% { transform: rotate(22deg); }
	30% { transform: rotate(-17deg); }
	48% { transform: rotate(11deg); }
	64% { transform: rotate(-6deg); }
	80% { transform: rotate(3deg); }
	100% { transform: rotate(0); }
}

@keyframes clapper_swing {
	0% { transform: rotate(0); }
	14% { transform: rotate(-26deg); }
	32% { transform: rotate(20deg); }
	50% { transform: rotate(-12deg); }
	68% { transform: rotate(6deg); }
	100% { transform: rotate(0); }
}

.bell_ripple {
	fill: none;
	stroke: var(--firefly);
	stroke-width: 2;
	transform-box: fill-box;
	transform-origin: center;
	animation: ripple 750ms ease-out forwards;
	pointer-events: none;
}

@keyframes ripple {
	from { transform: scale(0.55); opacity: 0.9; }
	to { transform: scale(1.5); opacity: 0; }
}


/*=== Dial =====================================================================*/

.dial_needle {
	transform-origin: 60px 60px;
	transition: transform 110ms var(--spring);
}

.dial_needle_body {
	fill: var(--pewter);
	transition: fill 160ms;
}

.gadget.settled .dial_needle_body {
	fill: var(--brass-dark);
}

/* Each season's picture: a little faded until the needle points at it */
.dial_icon {
	opacity: 0.8;
	transition: opacity 120ms;
}

.dial_wedge {
	transition: fill-opacity 160ms;
}

/* The season the needle points at: its quarter brighter, its picture full */
.dial_option.current .dial_wedge {
	fill-opacity: 0.55;
}

.dial_option.current .dial_icon {
	opacity: 1;
}

.dial_lock {
	fill: none;
	stroke: var(--firefly);
	stroke-width: 3;
	opacity: 0;
	transform-box: fill-box;
	transform-origin: center;
}

.gadget.locking .dial_lock {
	animation: lock_in 520ms ease-out;
}

@keyframes lock_in {
	0% { opacity: 1; transform: scale(0.94); }
	100% { opacity: 0; transform: scale(1.14); }
}


/*=== Pinwheel =================================================================*/

.tally {
	display: inline-flex;
	gap: 3px;
}

.tally i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--firefly);
	animation: pop 260ms var(--spring);
}

@keyframes pop {
	from { transform: scale(0); }
	to { transform: scale(1); }
}

.gadget.jolted .pinwheel_art {
	animation: poke 260ms var(--spring);
}


/*=== Steps and the interlude ==================================================*/

.steps_row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin-top: 14px;
}

.steps_label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--pewter);
}

.step_pips {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.step_pips li {
	width: 14px;
	height: 14px;
	border: 2px solid var(--pewter);
	transform: rotate(45deg);
	transition: background 160ms, border-color 160ms;
}

.step_pips li.done {
	background: var(--firefly);
	border-color: var(--firefly);
	animation: pip_pop 360ms var(--spring);
}

@keyframes pip_pop {
	0% { transform: rotate(45deg) scale(1); }
	40% { transform: rotate(45deg) scale(1.5); }
	100% { transform: rotate(45deg) scale(1); }
}

/* Between rounds: the round's time, over the bench */
.interlude {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	border-radius: 10px;
	background: color-mix(in srgb, var(--night) 82%, transparent);
	animation: interlude_in 360ms var(--spring) both;
}

@keyframes interlude_in {
	from { opacity: 0; transform: scale(0.92); }
	to { opacity: 1; transform: none; }
}

.interlude_round {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--firefly);
}

.interlude_clues {
	font-size: 44px;
	font-weight: 700;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
}

.interlude_note {
	font-size: 13px;
	color: var(--pewter);
}

/* The round's bonus words used, revealed and starred */
.interlude_bonus {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 8px;
}

.bonus_word {
	position: relative;
	padding: 2px 8px 3px;
	border-radius: 2px;
	background: var(--paper);
	color: var(--ink);
	font: 15px var(--serif);
	box-shadow: 0 0 0 2px var(--firefly);
	animation: pop 420ms var(--spring) 200ms both;
}

.bonus_word::after {
	content: "";
	position: absolute;
	top: -7px;
	right: -7px;
	width: 13px;
	height: 13px;
	background: var(--firefly);
	clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}


/*=== Effects ==================================================================*/

/* Text that floats up off something and fades, like "+1" off the clue counter */
.float_text {
	position: fixed;
	z-index: 20;
	font-weight: 700;
	font-size: 18px;
	pointer-events: none;
	color: var(--brass-light);
	animation: float_up 900ms ease-out forwards;
}

.float_text.bonus {
	color: var(--firefly);
}

@keyframes float_up {
	from { opacity: 1; transform: translateY(4px) scale(0.8); }
	25% { opacity: 1; transform: translateY(0) scale(1.15); }
	to { opacity: 0; transform: translateY(-22px) scale(1); }
}

/* The burst of stars when a round is done (fx.js starBurst) */
.burst {
	position: fixed;
	inset: 0;
	z-index: 30;
	pointer-events: none;
	overflow: hidden;
}

.burst_star {
	position: absolute;
	width: var(--size, 12px);
	height: var(--size, 12px);
	margin: calc(var(--size, 12px) / -2) 0 0 calc(var(--size, 12px) / -2);
	background: var(--firefly);
	clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}


/*=== Results ==================================================================*/

.card.results {
	margin: auto 0;
}

.results_title {
	margin: 0 0 14px;
	font-family: var(--serif);
	font-weight: 400;
	font-style: italic;
	font-size: 24px;
	color: var(--mint);
}

.result_rounds {
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
}

.result_round {
	display: grid;
	grid-template-columns: 2.5ch 1fr auto;
	gap: 4px 12px;
	align-items: baseline;
	padding: 8px 0;
	border-bottom: 1px solid var(--pine);
	animation: screen_in 300ms var(--spring) both;
}

.result_round_number {
	color: var(--firefly);
	font-weight: 700;
}

.result_round_text {
	font-family: var(--serif);
	font-size: 14px;
	color: var(--pewter);
}

.result_round_points {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.result_round_detail {
	grid-column: 2 / 4;
	font-size: 12px;
	color: var(--pewter);
	font-variant-numeric: tabular-nums;
}

.result_total {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	margin-bottom: 18px;
}

.result_total_label {
	flex: 1;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--pewter);
}

/* The clues and time, on a line of their own under the total */
.result_total_detail {
	order: 3;
	flex-basis: 100%;
	font-size: 13px;
	color: var(--pewter);
	font-variant-numeric: tabular-nums;
}

.result_total_points {
	font-size: 34px;
	font-weight: 700;
	color: var(--firefly);
	font-variant-numeric: tabular-nums;
}

/* Play again, in a room: two keys on one line, roles kept or swapped. Yours stays down once pressed */
.rematch_row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

/* What the partner has asked for, or that they've gone */
.rematch_status {
	min-height: 1.5em;
	margin: -2px 0 0;
	font-size: 13px;
	color: var(--pewter);
}


/*=== Reduced motion ===========================================================
No twinkling, no shooting stars, no wobbles or shudders: the gadgets still change state, plainly */

@media (prefers-reduced-motion: reduce) {
	.star, .shooting_star {
		animation: none;
	}

	.shooting_star {
		display: none;
	}

	.screen, .gadget.poke, .bench.shudder, .gadget.ringing .bell_body, .gadget.ringing .bell_clapper,
	.step_pips li.done, .interlude, .result_round, .tally i, .gadget.jolted .pinwheel_art, .notes li:first-child, .clues_count.jump,
	.magnet.arriving, .magnet.bonus, .magnet.bonus.arriving, .strip.full, .bonus_word {
		animation: none;
	}

	.switch_lever, .dial_needle {
		transition: none;
	}
}

/* An error under the code, in brass */
.lobby_status.error {
	color: var(--brass-light);
}