/*=== Mortar Team ==============================================================
The game's looks: a WW1 field kit in lines and pencil marks (see docs/prototype-plan.md, The look). Graph paper for
the page, graphite for the lines and the text, olive drab for the keys that act, brick red for hits and fire, ochre
for the latest shell, and three faces: a worn typewriter for what is typed and stencilled, the series' mono for the
rest, a quick hand for the Spotter's notes. The palette (--olive, --brick, --ochre, --paper, --slate and their
shades) is palette.css's, written from palette.js; it is mapped onto the chassis's tokens (core/style/base.css) first,
so its lobby, cards and keys take it; the mission's screens and the Field Report follow */

:root {
	color-scheme: light;

	--font: "IBM Plex Mono", "Courier New", Courier, monospace;
	--type: "Special Elite", "Courier New", Courier, monospace; /* Typed and stencilled */
	--display-font: var(--type); /* The chassis's title, keys and lobby headings are typed... */
	--display-weight: 400; /* ...in a face with no bold */
	--hand: "Caveat", "Comic Sans MS", cursive; /* Pencilled by hand */

	/* The chassis's tokens */
	--bg: var(--paper);
	--plate: var(--paper-2);
	--field: var(--paper-3);
	--key: var(--paper-2);
	--border: var(--slate);
	--text: var(--slate);
	--muted: var(--slate-2);
	--accent: var(--olive);
	--accent-text: var(--paper-2);
	--primary-border: var(--slate);
	--select: var(--olive);
	--select-wash: color-mix(in srgb, var(--olive) 18%, transparent);
	--select-text: var(--olive);
	--focus: var(--brick);
	--shadow-color: color-mix(in srgb, var(--slate) 45%, transparent);
	--radius: 0;

	/* The game's own */
	--ink: var(--slate); /* The pencil: the map's and the gauges' lines */
	--hit: var(--brick); /* Red pencil */
	--note: var(--olive); /* The Spotter's own pencil */
}

/* Graph paper: a fine rule every 12px and a firmer one every 60, under everything */
html {
	background-color: var(--paper);
	background-image:
		linear-gradient(var(--graph) 1px, transparent 1px),
		linear-gradient(90deg, var(--graph) 1px, transparent 1px),
		linear-gradient(color-mix(in srgb, var(--slate) 5%, transparent) 1px, transparent 1px),
		linear-gradient(90deg, color-mix(in srgb, var(--slate) 5%, transparent) 1px, transparent 1px);
	background-size: 60px 60px, 60px 60px, 12px 12px, 12px 12px;
}

/* What else is typed (the chassis's title, keys and headings take --display-font): the titles and the labels */
.mission_title,
.report_title,
.fuse_label,
.lever_end,
.shot_word {
	font-family: var(--type);
	font-weight: 400;
}

.title {
	letter-spacing: 2px;
}

.title_accent {
	color: var(--brick);
}

.button {
	letter-spacing: 2px;
}

.card {
	border-width: 1.5px;
}


/*=== The mission's bar ========================================================*/

#screen_mission {
	gap: 12px;
	user-select: none;
	-webkit-user-select: none;
}

/* The title on a line of its own, typed across the top; the count and the keys under it */
.mission_bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	padding-bottom: 8px;
	border-bottom: 1.5px solid var(--ink);
}

.mission_title {
	flex: 1 1 100%;
	font-size: 17px;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.mission_shells {
	flex: 1;
	color: var(--muted);
	white-space: nowrap;
}

.mission_bar .button.small {
	width: auto;
	flex: none;
}

.mission_notice {
	margin: 0;
	color: var(--brick);
}

/* The server gone quiet: the screen dims until it speaks again */
#screen_mission.stale .gun,
#screen_mission.stale .map_panel {
	opacity: 0.5;
}


/*=== The gun ==================================================================*/

.gun {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.fuse_row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.fuse_label,
.lever_end {
	font-size: 13px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--muted);
}

.fuse {
	flex: 1;
	height: 28px;
}

.fuse_cord {
	stroke: var(--ink);
	stroke-width: 2.5;
	stroke-dasharray: 7 4;
	stroke-linecap: round;
}

.fuse_spark {
	fill: transparent;
}

.fuse_spark.lit {
	fill: var(--brick);
	stroke: var(--ochre);
	stroke-width: 2;
	animation: spark 120ms steps(2) infinite;
}

@keyframes spark {
	50% { r: 7; }
}

.shot_word {
	margin: 0;
	min-height: 1.4em;
	text-align: center;
	font-size: 20px;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: var(--brick);
}

.shot_word.flash {
	animation: shot 900ms ease-out both;
}

@keyframes shot {
	from { transform: scale(1.4) rotate(-3deg); }
	to { transform: scale(1) rotate(-3deg); opacity: 0.2; }
}

.gauge {
	display: block;
	overflow: visible;
}

.gauge_line {
	width: 100%;
	height: auto;
}

.gauge_face,
.gauge_tick,
.gauge_zero {
	fill: none;
	stroke: var(--ink);
	stroke-linecap: round;
}

.gauge_face {
	stroke-width: 2;
}

.gauge_tick {
	stroke-width: 1.6;
	opacity: 0.75;
}

.gauge_zero {
	stroke-width: 3;
}

.gauge_needle {
	stroke: var(--brick);
	stroke-width: 4;
	stroke-linecap: round;
}

.gauge.pegged .gauge_needle {
	stroke-dasharray: 4 5;
}

/* The range gauge beside the keys */
.sight {
	display: flex;
	gap: 16px;
	align-items: stretch;
}

.gauge_range {
	flex: none;
	width: 60px;
	height: 300px;
	max-height: 46dvh;
}

.pad {
	flex: 1;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr;
	grid-template-areas: ". add ." "left . right" ". drop .";
	gap: 8px;
	touch-action: none;
}

.pad_key {
	text-align: center;
	padding: 8px 4px;
	min-height: 64px;
	touch-action: none;
}

.pad_add { grid-area: add; }
.pad_left { grid-area: left; }
.pad_right { grid-area: right; }
.pad_drop { grid-area: drop; }

.pad_key.held {
	transform: translate(3px, 3px);
	box-shadow: none;
	background: var(--field);
	border-color: var(--olive);
	color: var(--olive);
}

.lever_row {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* The lever's quadrant: notches cut along a rule */
.lever {
	flex: 1;
	display: flex;
	gap: 6px;
	padding: 4px 0;
	background: linear-gradient(var(--ink), var(--ink)) center / 100% 2px no-repeat;
}

.lever_notch {
	flex: 1;
	height: 40px;
	border: 1.5px solid var(--ink);
	border-radius: var(--radius);
	background: var(--key);
	cursor: pointer;
	touch-action: manipulation;
	transition: background-color var(--snap);
}

.lever_notch.selected {
	background: var(--olive);
	box-shadow: var(--shadow-small);
}


/*=== The map ==================================================================*/

.map_panel {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.map {
	display: block;
	width: 100%;
	height: auto;
	touch-action: none;
	background: var(--paper-2);
	box-shadow: var(--shadow);
}

.map path {
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.map_rule {
	stroke: var(--ink);
	stroke-width: 0.22;
	opacity: 0.55;
}

.map_edge {
	stroke: var(--ink);
	stroke-width: 0.7;
}

.map_label,
.map_battery {
	fill: var(--ink);
	font-family: var(--type);
	font-size: 4.4px;
	text-anchor: middle;
}

.map_battery {
	font-size: 3.6px;
	letter-spacing: 0.8px;
}

.map .miss {
	stroke: var(--ink);
	stroke-width: 0.55;
}

.map .arrow {
	stroke: var(--ink);
	stroke-width: 0.7;
}

.map .hit_hatch {
	stroke: var(--hit);
	stroke-width: 0.5;
}

.map .hit_link {
	stroke: var(--hit);
	stroke-width: 1.3;
}

.map .wreck {
	stroke: var(--hit);
	stroke-width: 1.1;
}

.latest_cell {
	fill: color-mix(in srgb, var(--ochre) 45%, transparent);
}

.map_latest.flash {
	animation: latest 1500ms ease-out both;
}

@keyframes latest {
	from { opacity: 1; }
	to { opacity: 0.55; }
}

.note {
	fill: var(--note);
	font-family: var(--hand);
	font-size: 7px;
	font-weight: 700;
	text-anchor: end;
}

.map_caption {
	margin: 0;
	font-family: var(--type);
	text-align: center;
}


/*=== The Field Report =========================================================*/

/* A typed form on a sheet, ruled, with a rubber stamp beside the stars */
.report {
	font-family: var(--type);
}

.report_title {
	margin: 0 0 2px;
	font-size: 22px;
	letter-spacing: 4px;
	text-transform: uppercase;
}

.report_level {
	margin: 0 0 14px;
	padding-bottom: 8px;
	border-bottom: 1.5px solid var(--ink);
	color: var(--muted);
}

.report_lines {
	display: grid;
	grid-template-columns: auto 1fr;
	margin: 0 0 14px;
}

.report_lines dt,
.report_lines dd {
	padding: 6px 0 4px;
	border-bottom: 1px dashed color-mix(in srgb, var(--ink) 45%, transparent);
}

.report_lines dt {
	padding-right: 16px;
	color: var(--muted);
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 13px;
}

.report_lines dd {
	margin: 0;
	font-size: 17px;
}

.report_foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 14px;
}

.report_stars {
	margin: 0;
	font-size: 30px;
	letter-spacing: 6px;
	color: var(--ochre);
	text-shadow: 1px 1px 0 var(--slate);
}

.report_stamp {
	margin: 0 6px 0 0;
	padding: 4px 10px;
	border: 3px double var(--brick);
	color: var(--brick);
	font-size: 20px;
	letter-spacing: 3px;
	text-transform: uppercase;
	transform: rotate(-9deg);
	opacity: 0.85;
	mix-blend-mode: multiply;
	pointer-events: none;
}

.report_stamp.unfinished {
	border-color: var(--slate);
	color: var(--slate);
}

.report_stamp:empty {
	display: none;
}