/**
 * RECLAMATION — page layout for /reclamation.
 *
 * Every colour comes from a --g-* token or from --g-el (the element in scope on a keyed
 * container), per docs/DESIGN_SYSTEM.md rule 1: no raw hex. Panels are matte; only
 * .g-screen glows. Depth is bevel and shadow, never a colour halo.
 *
 * The whole table is one screen: status strip, three sites, the roster strip, and a rail
 * carrying orders and the log. It must not scroll at 1440x900 and must stay usable at
 * 1024 wide, so the shell is a fixed-height grid and only the rail's inner panels ever
 * scroll internally.
 */

/* only the match is locked to one screen; the intro is an ordinary page that scrolls
   to its button on any screen */
.rec-console--match {
	overflow: hidden;
	/* the navbar is a fixed-height band above the shell; the table takes the rest of the
	   viewport exactly, so the page itself never scrolls */
	height: 100vh;
	display: flex;
	flex-direction: column;
}

.rec-console--intro {
	height: auto;
	min-height: 100vh;
	overflow: visible;
}

.rec-shell {
	/* matches the shared .g-shell width (round3-coherence.md "one frame"); only
	   .rec-shell--match widens further, below. */
	max-width: 1440px;
}

.rec-shell--match {
	/* the shell's width is fixed, not fit to content: a judged board without the
	   roster strip must not narrow the whole table */
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--g-3);
	flex: 1 1 auto;
	min-height: 0;
	padding: var(--g-3) var(--g-4) var(--g-4);
	overflow: hidden;
}

.rec-masthead {
	display: flex;
	align-items: baseline;
	gap: var(--g-4);
	flex: 0 0 auto;
}

.rec-masthead .g-kicker { margin: 0; }

.rec-masthead-title {
	font-family: var(--g-font-stencil);
	font-size: var(--g-size-lead);
	letter-spacing: var(--g-track-label);
	text-transform: uppercase;
	color: var(--g-ink);
	margin: 0;
}

.rec-masthead-seed {
	margin-left: auto;
	font-size: var(--g-size-micro);
	color: var(--g-ink-low);
}

/* -------------------------------------------------------------------------
   START SCREEN. One screen on a desktop: a compact masthead, then a panel split
   between the briefing on the CRT and a charter card of the numbers, the small
   rules and the button. Nothing here needs to scroll on a laptop.
   ------------------------------------------------------------------------- */

.rec-shell--intro {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--g-3);
	padding: var(--g-3) var(--g-4) var(--g-4);
}

.rec-intro-panel {
	padding: var(--g-4);
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(300px, 2fr);
	gap: var(--g-4);
	align-items: stretch;
}

.rec-rules-screen {
	display: flex;
	flex-direction: column;
	gap: var(--g-3);
	min-width: 0;
}

.rec-rules-screen .g-screen-line { max-width: none; }

.rec-rules-phases {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	column-gap: var(--g-3);
	row-gap: var(--g-2);
	margin: var(--g-1) 0 0;
	padding-top: var(--g-3);
	border-top: 1px solid var(--g-phosphor-dim);
}

.rec-rules-phases dt {
	text-transform: uppercase;
	letter-spacing: var(--g-track-wide);
}

.rec-rules-phases dd { margin: 0; }

.rec-intro-charter {
	display: flex;
	flex-direction: column;
	gap: var(--g-4);
	min-width: 0;
}

.rec-charter-figures {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--g-2);
}

.rec-charter-figure {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--g-1);
	padding: var(--g-3) var(--g-2);
	border: 1px solid var(--g-rule);
	background: var(--g-hull-lo);
}

.rec-charter-figure--key { border-color: var(--g-brass); }

.rec-charter-number {
	font-size: var(--g-size-h3);
	font-weight: 600;
	line-height: 1;
	color: var(--g-ink);
}

.rec-charter-figure--key .rec-charter-number { color: var(--g-brass); }

.rec-charter-sub {
	font-size: var(--g-size-small);
	color: var(--g-ink-low);
}

.rec-charter-label {
	font-family: var(--g-font-stencil);
	font-size: var(--g-size-micro);
	text-transform: uppercase;
	letter-spacing: var(--g-track-wide);
	color: var(--g-ink-low);
	white-space: nowrap;
}

.rec-charter-rules {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--g-2);
	font-size: var(--g-size-small);
	line-height: 1.5;
	color: var(--g-ink-mid);
}

.rec-charter-rules strong {
	font-family: var(--g-font-stencil);
	font-weight: 600;
	font-size: var(--g-size-micro);
	text-transform: uppercase;
	letter-spacing: var(--g-track-wide);
	color: var(--g-ink);
	margin-right: var(--g-1);
}

.rec-intro-actions {
	margin-top: auto;
	display: flex;
	flex-direction: column;
	gap: var(--g-2);
}

.rec-intro-actions .g-btn,
.rec-intro-actions .g-key { align-self: stretch; justify-content: center; }

.rec-intro-seed {
	font-size: var(--g-size-micro);
	color: var(--g-ink-low);
}

@media (max-width: 900px) {
	.rec-intro-panel { grid-template-columns: minmax(0, 1fr); }
	.rec-charter-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* -------------------------------------------------------------------------
   MATCH SHELL
   ------------------------------------------------------------------------- */

.rec-match {
	display: flex;
	flex-direction: column;
	gap: var(--g-3);
	flex: 1 1 auto;
	min-height: 0;
}

.rec-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
	gap: var(--g-3);
	flex: 1 1 auto;
	min-height: 0;
}

.rec-table {
	display: flex;
	flex-direction: column;
	gap: var(--g-3);
	min-height: 0;
	min-width: 0;
}

.rec-rail {
	display: flex;
	flex-direction: column;
	gap: var(--g-3);
	min-height: 0;
	overflow: hidden;
}

/* -------------------------------------------------------------------------
   STATUS STRIP
   ------------------------------------------------------------------------- */

.rec-status {
	flex: 0 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr) minmax(0, 1.1fr);
	grid-template-rows: auto auto;
	align-items: center;
	gap: var(--g-2) var(--g-4);
	padding: var(--g-3) var(--g-4);
}

.rec-status-world {
	display: flex;
	align-items: baseline;
	gap: var(--g-3);
	flex-wrap: wrap;
}

.rec-status-world .g-kicker { margin: 0; }

.rec-status-planet {
	font-family: var(--g-font-stencil);
	font-size: var(--g-size-h3);
	font-weight: 600;
	letter-spacing: var(--g-track-label);
	text-transform: uppercase;
	color: var(--g-el);
	margin: 0;
}

.rec-status-element { font-size: var(--g-size-micro); }

.rec-status-score {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--g-4);
}

.rec-score {
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1.1;
}

.rec-score-label {
	font-family: var(--g-font-stencil);
	font-size: var(--g-size-micro);
	text-transform: uppercase;
	letter-spacing: var(--g-track-label);
	color: var(--g-ink-low);
}

.rec-score-value {
	font-family: var(--g-font-mono);
	font-variant-numeric: tabular-nums;
	font-size: var(--g-size-h3);
	font-weight: 600;
	color: var(--g-ink);
}

.rec-score--mine .rec-score-value { color: var(--g-accent); }
.rec-score--theirs .rec-score-value { color: var(--g-ink-mid); }

.rec-score-of {
	font-family: var(--g-font-mono);
	font-size: var(--g-size-micro);
	color: var(--g-ink-low);
	text-transform: uppercase;
	letter-spacing: var(--g-track-label);
}

.rec-status-turn {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--g-3);
	flex-wrap: wrap;
}

.rec-status-phase {
	font-family: var(--g-font-stencil);
	font-size: var(--g-size-tiny);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--g-track-wide);
	color: var(--g-brass-light);
	padding: 2px var(--g-2);
	border: var(--g-hairline) solid var(--g-brass-dark);
	border-radius: 2px;
}

.rec-turn {
	display: inline-flex;
	align-items: center;
	gap: var(--g-2);
}

.rec-turn-text {
	font-family: var(--g-font-stencil);
	font-size: var(--g-size-small);
	text-transform: uppercase;
	letter-spacing: var(--g-track-label);
	color: var(--g-ink-mid);
}

.rec-turn--yours .rec-turn-text { color: var(--g-ink); }

.rec-status-next {
	font-size: var(--g-size-micro);
	color: var(--g-ink-low);
}

.rec-status-hint {
	grid-column: 1 / -1;
	margin: 0;
	font-size: var(--g-size-small);
	color: var(--g-ink-mid);
	border-top: var(--g-hairline) solid var(--g-rule-faint);
	padding-top: var(--g-2);
}

.rec-notice {
	flex: 0 0 auto;
}

/* -------------------------------------------------------------------------
   THE WORLD: THREE SITES
   ------------------------------------------------------------------------- */

.rec-world {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--g-3);
	flex: 1 1 auto;
	min-height: 0;
}

.rec-site {
	display: flex;
	flex-direction: column;
	gap: var(--g-2);
	padding: var(--g-3);
	min-height: 0;
	min-width: 0;
	transition: border-color var(--g-move);
}

.rec-site--clickable { cursor: pointer; }

.rec-site--targeted:hover,
.rec-site--targeted {
	border-color: color-mix(in srgb, var(--g-el) 60%, var(--g-seam));
}

.rec-site-head { flex: 0 0 auto; }

.rec-site-name {
	font-family: var(--g-font-stencil);
	font-size: var(--g-size-small);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--g-track-label);
	color: var(--g-ink);
	margin: 0;
}

.rec-site-env {
	font-size: var(--g-size-micro);
	color: var(--g-ink-low);
	margin: 0;
	text-transform: lowercase;
}

.rec-site-tally {
	flex: 0 0 auto;
	display: flex;
	justify-content: space-between;
	gap: var(--g-2);
	padding: var(--g-1) var(--g-2);
	background: var(--g-hull-lo);
	border-radius: var(--g-radius);
	box-shadow: var(--g-recess);
}

.rec-tally {
	display: inline-flex;
	align-items: baseline;
	gap: var(--g-2);
	opacity: 0.6;
}

.rec-tally--leading { opacity: 1; }

.rec-tally-label {
	font-family: var(--g-font-stencil);
	font-size: var(--g-size-micro);
	text-transform: uppercase;
	letter-spacing: var(--g-track-label);
	color: var(--g-ink-low);
}

.rec-tally-value {
	font-family: var(--g-font-mono);
	font-variant-numeric: tabular-nums;
	font-size: var(--g-size-small);
	font-weight: 600;
	color: var(--g-ink-mid);
}

.rec-tally--leading .rec-tally-value { color: var(--g-accent); }

.rec-site-field {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.rec-rank {
	flex: 1 1 50%;
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	gap: var(--g-2);
	min-height: 0;
	overflow: hidden;
}

.rec-rank--theirs { align-content: flex-start; }
.rec-rank--mine { align-content: flex-end; }

.rec-rank-empty {
	font-family: var(--g-font-mono);
	font-size: var(--g-size-micro);
	color: var(--g-ink-low);
	font-style: italic;
	align-self: center;
}

.rec-site-midline {
	flex: 0 0 auto;
	min-height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-top: var(--g-hairline) dashed var(--g-rule);
	border-bottom: var(--g-hairline) dashed var(--g-rule);
	margin: var(--g-1) 0;
}

.rec-ghost {
	display: inline-flex;
	align-items: center;
	gap: var(--g-2);
}

.rec-ghost-value {
	font-family: var(--g-font-mono);
	font-variant-numeric: tabular-nums;
	font-size: var(--g-size-small);
	font-weight: 600;
	color: color-mix(in srgb, var(--g-el) 78%, transparent);
}

.rec-ghost--relocate {
	font-family: var(--g-font-stencil);
	font-size: var(--g-size-micro);
	text-transform: uppercase;
	letter-spacing: var(--g-track-label);
	color: var(--g-accent);
}

/* the Judge's stamped verdict */
.rec-stamp {
	font-family: var(--g-font-stencil);
	font-size: var(--g-size-tiny);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--g-track-wide);
	padding: 1px var(--g-2);
	border: 2px solid currentColor;
	border-radius: 2px;
	transform: rotate(-3deg);
	color: var(--g-ink-mid);
}

.rec-stamp--yours { color: var(--g-accent); }
.rec-stamp--theirs { color: var(--g-lamp-red); }
.rec-stamp--court { color: var(--g-ink-low); }

.rec-site--verdict-yours { border-color: color-mix(in srgb, var(--g-accent) 55%, var(--g-seam)); }
.rec-site--verdict-theirs { border-color: color-mix(in srgb, var(--g-lamp-red) 45%, var(--g-seam)); }

/* -------------------------------------------------------------------------
   THE FIGURE — a stencilled plate on a painted disc plinth
   ------------------------------------------------------------------------- */

.rec-figure {
	--paint: var(--g-hull-hi);
	--paint-edge: var(--g-bone, var(--g-ink-mid));
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;
	padding: 2px;
	/* wide enough for a plate, but the plate grows to fit the longest species name
	   rather than breaking a name across two lines, which read as two creatures */
	min-width: 96px;
	width: auto;
	background: none;
	border: none;
	cursor: pointer;
	font: inherit;
	text-align: center;
	transition: transform var(--g-move), opacity var(--g-move);
}

.rec-figure--down { flex-direction: column-reverse; }

.rec-figure--mine { --paint: color-mix(in srgb, var(--g-ink) 22%, var(--g-hull-hi)); }
.rec-figure--theirs { --paint: color-mix(in srgb, var(--g-ink-low) 40%, var(--g-hull-lo)); }

.rec-figure-plate {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 26px;
	padding: 2px var(--g-1);
	background: var(--paint);
	border: var(--g-hairline) solid var(--g-seam);
	border-radius: 2px;
	box-shadow: var(--g-relief);
	transition: transform var(--g-move);
}

.rec-figure-name {
	font-family: var(--g-font-stencil);
	font-size: var(--g-size-micro);
	font-weight: 600;
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--g-ink);
	white-space: nowrap;
}

.rec-figure--theirs .rec-figure-name { color: var(--g-ink-mid); }

.rec-figure-badge {
	font-family: var(--g-font-mono);
	font-size: var(--g-size-micro);
	color: var(--g-ink-low);
}

/* the disc, seen at a shallow angle */
.rec-figure-plinth {
	position: relative;
	width: 44px;
	height: 13px;
	background: radial-gradient(ellipse at 50% 30%, var(--paint), color-mix(in srgb, var(--paint) 60%, var(--g-void)));
	border: var(--g-hairline) solid var(--g-seam);
	border-radius: 50%;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.55), var(--g-relief);
}

.rec-figure-medallion {
	position: absolute;
	left: 50%;
	bottom: -3px;
	transform: translateX(-50%);
	width: 12px;
	height: 6px;
	background: var(--g-el);
	border: var(--g-hairline) solid var(--g-seam);
	border-radius: 2px;
	box-shadow: var(--g-relief);
}

.rec-figure-foot {
	display: flex;
	align-items: baseline;
	gap: var(--g-1);
	min-height: 14px;
}

.rec-figure-hold {
	font-family: var(--g-font-mono);
	font-variant-numeric: tabular-nums;
	font-size: var(--g-size-micro);
	font-weight: 600;
	color: var(--g-ink);
}

.rec-figure--theirs .rec-figure-hold { color: var(--g-ink-mid); }

.rec-figure-hold--struck {
	text-decoration: line-through;
	color: var(--g-ink-low);
	font-weight: 400;
}

.rec-figure-hold--ghost { color: color-mix(in srgb, var(--g-el) 70%, transparent); }

.rec-figure-tags {
	display: flex;
	gap: 2px;
	flex-wrap: wrap;
	justify-content: center;
}

.rec-tag {
	font-family: var(--g-font-stencil);
	font-size: 0.5625rem;
	text-transform: uppercase;
	letter-spacing: var(--g-track-label);
	padding: 0 3px;
	border-radius: 2px;
	border: var(--g-hairline) solid currentColor;
}

.rec-tag--home { color: var(--g-brass-light); }
.rec-tag--strain { color: var(--g-accent); }
.rec-tag--severe { color: var(--g-lamp-red); }

/* states */
.rec-figure--staggered .rec-figure-plate { transform: rotate(-7deg) translateY(2px); }

.rec-figure--routed {
	animation: rec-fall 420ms ease-in forwards;
	pointer-events: none;
}

@keyframes rec-fall {
	to { transform: translateY(16px) rotate(-18deg); opacity: 0; }
}

.rec-figure--hidden .rec-figure-plate {
	border-style: dashed;
	border-color: var(--g-brass);
	background: transparent;
}

.rec-figure--selected .rec-figure-plate,
.rec-figure--armed .rec-figure-plate {
	border-color: var(--g-accent);
	box-shadow: var(--g-relief), 0 0 0 1px var(--g-accent);
}

.rec-figure--dimmed { opacity: 0.45; }

.rec-figure--small { min-width: 88px; }
.rec-figure--small .rec-figure-plinth { width: 38px; height: 11px; }

.rec-figure:hover:not(.rec-figure--routed) { transform: translateY(-2px); }

.rec-figure--silhouette {
	cursor: default;
	opacity: 0.7;
}

.rec-figure--silhouette .rec-figure-plate {
	border-style: dashed;
	background: transparent;
}

.rec-figure--silhouette .rec-figure-name {
	font-style: italic;
	color: var(--g-ink-low);
	text-transform: none;
	letter-spacing: 0;
}

.rec-silhouettes { display: flex; gap: var(--g-2); }

/* -------------------------------------------------------------------------
   ROSTER STRIP AND DEPLOY CONTROLS
   ------------------------------------------------------------------------- */

.rec-deploy-bar {
	flex: 0 0 auto;
	display: flex;
	align-items: flex-start;
	gap: var(--g-4);
	padding: var(--g-2) var(--g-3);
	background: var(--g-hull);
	border: var(--g-hairline) solid var(--g-seam);
	border-radius: var(--g-radius-panel);
	box-shadow: var(--g-relief);
}







.rec-deploy-controls {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--g-2);
	min-width: 170px;
}

.rec-pass-warning {
	font-size: 0.5625rem;
	color: var(--g-ink-low);
	text-align: center;
	text-transform: uppercase;
	letter-spacing: var(--g-track-label);
}

.rec-fallback-btn--active { --btn-face: var(--g-brass-dark); }

.rec-hidden-toggle { font-size: var(--g-size-tiny); }

/* -------------------------------------------------------------------------
   RESOLUTION AND JUDGE BARS
   ------------------------------------------------------------------------- */

.rec-resolving,
.rec-judge-bar {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--g-3);
	padding: var(--g-2) var(--g-4);
	background: var(--g-hull-lo);
	border-radius: var(--g-radius);
	box-shadow: var(--g-recess);
}

.rec-resolving .g-label,
.rec-judge-bar .g-label { margin: 0; }

/* -------------------------------------------------------------------------
   ORDERS PANEL AND PREVIEW
   ------------------------------------------------------------------------- */

.rec-orders {
	display: flex;
	flex-direction: column;
	gap: var(--g-2);
	min-height: 0;
	/* the orders panel is the working surface during Orders: it takes three quarters of
	   the rail and the log takes what is left, both scrolling internally rather than
	   pushing the page taller */
	flex: 3 1 0;
	overflow: hidden;
}

.rec-orders-list {
	display: flex;
	flex-direction: column;
	gap: var(--g-2);
	padding: var(--g-3);
	background: var(--g-hull);
	border: var(--g-hairline) solid var(--g-seam);
	border-radius: var(--g-radius-panel);
	box-shadow: var(--g-relief);
	overflow-y: auto;
	/* the selectors are the thing being operated; give them the larger share and let the
	   preview beneath take the rest */
	flex: 3 1 0;
	min-height: 120px;
}

.rec-orders-head {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.rec-orders-head .g-label { margin: 0; }

.rec-orders-hint {
	font-size: var(--g-size-micro);
	color: var(--g-ink-low);
}

.rec-order-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2px;
	padding-bottom: var(--g-2);
	border-bottom: var(--g-hairline) solid var(--g-rule-faint);
}

.rec-order-who {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--g-2);
}

.rec-order-name {
	font-family: var(--g-font-stencil);
	font-size: var(--g-size-tiny);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--g-track-label);
	color: var(--g-el);
}

.rec-order-site {
	font-size: var(--g-size-micro);
	color: var(--g-ink-low);
}

.rec-order-select {
	width: 100%;
	font-size: var(--g-size-micro);
	padding: 2px var(--g-2);
}

.rec-commit-btn { margin-top: var(--g-1); }

.rec-preview {
	flex: 2 1 0;
	min-height: 96px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/* -------------------------------------------------------------------------
   THE DOSSIER
   ------------------------------------------------------------------------- */

.rec-inspect {
	flex: 2 1 0;
	min-height: 0;
	overflow-y: auto;
	padding: var(--g-3);
	display: flex;
	flex-direction: column;
	gap: var(--g-2);
}

.rec-inspect-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--g-2);
}

.rec-inspect-name {
	font-family: var(--g-font-stencil);
	font-size: var(--g-size-small);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--g-track-label);
	color: var(--g-el);
	margin: 0;
}

.rec-inspect-sub {
	font-size: var(--g-size-micro);
	color: var(--g-ink-low);
	margin: 0;
	text-transform: capitalize;
}

.rec-inspect-close { padding: 0 var(--g-2); }

.rec-inspect-context {
	margin: 0;
	font-size: var(--g-size-micro);
}

.rec-inspect-spec {
	grid-template-columns: minmax(6rem, auto) 1fr;
	gap: 2px var(--g-3);
}

.rec-inspect-spec .g-spec-key,
.rec-inspect-spec .g-spec-val { font-size: var(--g-size-micro); }

.rec-inspect-section {
	display: flex;
	flex-direction: column;
	gap: 2px;
	border-top: var(--g-hairline) solid var(--g-rule-faint);
	padding-top: var(--g-2);
}

.rec-inspect-section .g-label { margin: 0; }

.rec-inspect-section .g-body { font-size: var(--g-size-tiny); margin: 0; }

.rec-inspect-acts td,
.rec-inspect-acts th { padding: 1px var(--g-2) 1px 0; font-size: 0.625rem; }

.rec-act-favored td { color: var(--g-brass-light); }

.rec-inspect-note {
	font-size: var(--g-size-micro) !important;
	color: var(--g-ink-low);
}

/* -------------------------------------------------------------------------
   THE LOG
   ------------------------------------------------------------------------- */

.rec-log {
	flex: 1 1 0;
	min-height: 96px;
	/* .g-screen's scanline overlay is an absolutely-positioned ::after pinned to the
	   element box, so the scrolling has to happen on an inner track rather than on the
	   screen itself, or the lines run past the glass */
	display: flex;
	flex-direction: column;
	gap: 1px;
	padding: var(--g-2) var(--g-3);
	overflow-y: auto;
	overscroll-behavior: contain;
}

.rec-log > *,
.rec-preview > * {
	flex: 0 0 auto;
}

/* -------------------------------------------------------------------------
   MATCH END
   ------------------------------------------------------------------------- */

.rec-verdict {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--g-2);
	padding: var(--g-4);
	border-left: 4px solid var(--g-ink-low);
}

.rec-verdict--won { border-left-color: var(--g-accent); }
.rec-verdict--lost { border-left-color: var(--g-lamp-red); }

.rec-verdict .g-kicker { margin: 0; }

.rec-verdict-title {
	font-family: var(--g-font-stencil);
	font-size: var(--g-size-h3);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--g-track-label);
	color: var(--g-ink);
	margin: 0;
}

.rec-verdict-body { margin: 0; font-size: var(--g-size-small); }

/* -------------------------------------------------------------------------
   NARROWER VIEWPORTS — 1024 wide must still work
   ------------------------------------------------------------------------- */

@media (max-width: 1200px) {
	.rec-body {
		grid-template-columns: minmax(0, 1fr) minmax(230px, 270px);
		gap: var(--g-2);
	}

	.rec-world { gap: var(--g-2); }

	.rec-site { padding: var(--g-2); }

	/* the site heading has to stay one line each, or three sites eat the whole panel */
	.rec-site-name {
		font-size: var(--g-size-micro);
		letter-spacing: 0.04em;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.rec-site-env {
		font-size: 0.5625rem;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.rec-tally-label { font-size: 0.5625rem; }
	.rec-tally-value { font-size: var(--g-size-micro); }

	.rec-figure { min-width: 66px; }
	.rec-figure--small { min-width: 62px; }
	.rec-figure-plinth { width: 32px; height: 10px; }
	.rec-figure-name { font-size: 0.5625rem; }
	.rec-tag { font-size: 0.5rem; }

	.rec-status {
		grid-template-columns: minmax(0, 1fr) minmax(0, auto);
		gap: var(--g-1) var(--g-3);
		padding: var(--g-2) var(--g-3);
	}

	.rec-status-planet { font-size: var(--g-size-lead); }
	.rec-status-score { grid-column: 1; justify-content: flex-start; gap: var(--g-3); }
	.rec-status-turn { grid-column: 2; grid-row: 1 / 3; align-items: flex-end; flex-direction: column; gap: var(--g-1); }
	.rec-status-hint { font-size: var(--g-size-tiny); }

	.rec-deploy-bar { gap: var(--g-2); padding: var(--g-2); }
	.rec-deploy-controls { min-width: 130px; }
	.rec-pass-btn { padding: var(--g-2) var(--g-3); }

	.rec-orders-list { padding: var(--g-2); }
	.rec-log { padding: var(--g-1) var(--g-2); }
}

/* =========================================================================
   UX PASS — emphasis, affordances, and what-is-happening
   ========================================================================= */

/* --- status strip: score as pip tracks, the turn as the loudest thing --- */

.rec-world-dots {
	display: inline-flex;
	gap: 4px;
	align-items: center;
}

.rec-world-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: var(--g-hairline) solid var(--g-ink-low);
	background: transparent;
}

.rec-world-dot--done { background: var(--g-ink-low); }
.rec-world-dot--now { background: var(--g-el); border-color: var(--g-el); }

.rec-score {
	flex-direction: row;
	align-items: center;
	gap: var(--g-2);
}

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

.rec-pip {
	width: 14px;
	height: 14px;
	border-radius: 2px;
	border: var(--g-hairline) solid var(--g-seam);
	background: var(--g-hull-lo);
	box-shadow: var(--g-recess);
}

.rec-score--mine .rec-pip--lit { background: var(--g-accent); border-color: var(--g-accent); box-shadow: none; }
.rec-score--theirs .rec-pip--lit { background: var(--g-lamp-red); border-color: var(--g-lamp-red); box-shadow: none; }

.rec-score-value { font-size: var(--g-size-lead); }

.rec-turn--yours .rec-turn-text {
	color: var(--g-accent);
	font-weight: 600;
}

.rec-turn--waiting .rec-turn-text { color: var(--g-ink-mid); }

.rec-status-hint {
	font-size: var(--g-size-body);
	color: var(--g-ink);
}

.rec-status-hint--yours {
	color: var(--g-ink);
	padding-left: var(--g-3);
	border-left: 3px solid var(--g-accent);
}

/* --- sites: the margin band is the biggest number on the site --- */

.rec-site-margin {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1px;
	padding: var(--g-2);
	background: var(--g-hull-lo);
	border-radius: var(--g-radius);
	box-shadow: var(--g-recess);
	border-left: 3px solid var(--g-seam);
}

.rec-site-margin-text {
	font-family: var(--g-font-stencil);
	font-size: var(--g-size-small);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--g-track-label);
	color: var(--g-ink-low);
}

.rec-site-margin--mine { border-left-color: var(--g-accent); }
.rec-site-margin--mine .rec-site-margin-text { color: var(--g-accent); }
.rec-site-margin--theirs { border-left-color: var(--g-lamp-red); }
.rec-site-margin--theirs .rec-site-margin-text { color: var(--g-lamp-red); }

.rec-site-margin-totals {
	display: inline-flex;
	gap: var(--g-2);
	font-size: var(--g-size-micro);
	font-variant-numeric: tabular-nums;
	color: var(--g-ink-mid);
}

.rec-site-margin-vs {
	color: var(--g-ink-low);
	text-transform: uppercase;
	letter-spacing: var(--g-track-label);
	font-size: 0.5625rem;
}

/* a site you are winning, losing, or that is level: a quiet tint on the panel edge */
.rec-site--mine { border-top: 3px solid color-mix(in srgb, var(--g-accent) 60%, var(--g-seam)); }
.rec-site--theirs { border-top: 3px solid color-mix(in srgb, var(--g-lamp-red) 50%, var(--g-seam)); }

/* a site waiting for the armed creature: an obvious target, not a hairline */
.rec-site--targeted {
	border-color: var(--g-accent);
	box-shadow: var(--g-relief), 0 0 0 1px color-mix(in srgb, var(--g-accent) 45%, transparent);
	cursor: pointer;
}

.rec-site--targeted:hover { background: color-mix(in srgb, var(--g-accent) 6%, var(--g-hull)); }

.rec-site-midline { min-height: 30px; }

.rec-ghost {
	flex-wrap: wrap;
	justify-content: center;
	row-gap: 2px;
}

.rec-ghost-cta {
	font-family: var(--g-font-stencil);
	font-size: var(--g-size-micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--g-track-wide);
	color: var(--g-accent);
	padding: 1px var(--g-2);
	border: var(--g-hairline) solid var(--g-accent);
	border-radius: 2px;
}

.rec-ghost-value { font-size: var(--g-size-body); color: var(--g-ink); }

.rec-ghost-outcome {
	flex-basis: 100%;
	text-align: center;
	font-family: var(--g-font-mono);
	font-size: var(--g-size-micro);
	color: var(--g-ink-mid);
}

/* --- the hidden rival creature: a banner over the world, not a roster orphan --- */

.rec-world {
	display: flex;
	flex-direction: column;
	gap: var(--g-2);
}

.rec-sites {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--g-3);
	flex: 1 1 auto;
	min-height: 0;
}

.rec-hidden-banner {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: var(--g-3);
	padding: var(--g-1) var(--g-3);
	background: var(--g-hull-lo);
	border-radius: var(--g-radius);
	box-shadow: var(--g-recess);
	border-left: 3px solid var(--g-lamp-red);
}

.rec-hidden-banner .rec-figure { zoom: 0.7; }

.rec-hidden-banner-text {
	font-family: var(--g-font-mono);
	font-size: var(--g-size-tiny);
	color: var(--g-ink);
}

/* --- figures: hold is big, the element is named, states are labelled --- */

.rec-figure-hold { font-size: var(--g-size-small); }

.rec-figure-element {
	font-family: var(--g-font-stencil);
	font-size: 0.5625rem;
	text-transform: uppercase;
	letter-spacing: var(--g-track-label);
	color: var(--g-el);
	margin-left: var(--g-1);
}

.rec-figure-foot {
	display: inline-flex;
	align-items: baseline;
	gap: 2px;
}

.rec-figure-badge {
	display: block;
	font-family: var(--g-font-mono);
	font-size: 0.5625rem;
	color: var(--g-brass-light);
	text-transform: lowercase;
	letter-spacing: 0;
}

.rec-tag--staggered { color: var(--g-lamp-red); }
.rec-tag--hidden { color: var(--g-ink-mid); }

.rec-figure--armed .rec-figure-plate,
.rec-figure--selected .rec-figure-plate {
	outline: 2px solid var(--g-accent);
	outline-offset: 1px;
}

.rec-figure--armed { transform: translateY(-4px); }

/* the creature acting, and the creature it lands on */
.rec-figure { position: relative; }

.rec-figure--acting .rec-figure-plate {
	outline: 2px solid var(--g-brass-light);
	outline-offset: 1px;
}

.rec-figure--hover .rec-figure-plate,
.rec-figure--hit .rec-figure-plate {
	outline: 2px dashed var(--g-lamp-red);
	outline-offset: 1px;
}

.rec-figure-flash {
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--g-font-stencil);
	font-size: var(--g-size-tiny);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--g-track-wide);
	padding: 0 var(--g-2);
	border-radius: 2px;
	background: var(--g-hull-lo);
	color: var(--g-ink);
	white-space: nowrap;
	animation: rec-flash 600ms ease-out both;
	z-index: 2;
}

.rec-figure-flash--rout { color: var(--g-lamp-red); }
.rec-figure-flash--stagger { color: var(--g-accent); }
.rec-figure-flash--shrug { color: var(--g-ink-mid); }
.rec-figure-flash--ward { color: var(--g-brass-light); }

@keyframes rec-flash {
	from { opacity: 0; transform: translateX(-50%) translateY(6px); }
	to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* --- deploy controls: send is the action, pass is a choice, not a siren --- */



.rec-deploy-controls { flex: 0 0 250px; min-width: 0; }
.rec-deploy-controls .g-btn { text-align: left; }

.rec-btn-sub {
	display: block;
	font-family: var(--g-font-mono);
	font-size: 0.5625rem;
	text-transform: none;
	letter-spacing: 0;
	opacity: 0.75;
	margin-top: 1px;
}

.rec-pass-btn { --btn-face: var(--g-hull-lo); }

.rec-deploy-note {
	font-family: var(--g-font-mono);
	font-size: var(--g-size-micro);
	color: var(--g-ink-mid);
	padding: var(--g-1) var(--g-2);
	border-left: 3px solid var(--g-seam);
}

.rec-deploy-note--open { border-left-color: var(--g-accent); color: var(--g-ink); }

/* --- orders: chips, the button that cannot scroll away, the bar on the table --- */

.rec-orders-head {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: var(--g-2);
	position: sticky;
	top: 0;
	background: var(--g-hull);
	z-index: 1;
	padding-bottom: var(--g-2);
	border-bottom: var(--g-hairline) solid var(--g-rule-faint);
}

.rec-orders-head > div {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.rec-commit-btn { margin-top: 0; }

.rec-order-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--g-1);
}

.rec-act-chip {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	padding: 2px var(--g-2);
	min-width: 64px;
	background: var(--g-hull-lo);
	border: var(--g-hairline) solid var(--g-seam);
	border-radius: 2px;
	color: var(--g-ink-mid);
	cursor: pointer;
	font: inherit;
	text-align: left;
	transition: border-color var(--g-move), color var(--g-move);
}

.rec-act-chip:hover:not(:disabled) { border-color: var(--g-ink-low); color: var(--g-ink); }

.rec-act-chip--chosen {
	border-color: var(--g-accent);
	color: var(--g-ink);
	box-shadow: inset 0 0 0 1px var(--g-accent);
}

.rec-act-chip:disabled { cursor: default; opacity: 0.6; }

.rec-act-chip-act {
	font-family: var(--g-font-stencil);
	font-size: var(--g-size-tiny);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--g-track-label);
}

.rec-act-chip-mag {
	font-family: var(--g-font-mono);
	font-size: var(--g-size-small);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--g-el);
}

.rec-act-chip-sub {
	font-family: var(--g-font-mono);
	font-size: 0.5625rem;
	color: var(--g-ink-low);
}

.rec-act-chip--chosen .rec-act-chip-sub { color: var(--g-brass-light); }

.rec-preview-line { cursor: default; }
.rec-preview-line:hover { color: var(--g-screen-ink-hi, inherit); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }

.rec-orders-bar {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--g-3);
	padding: var(--g-2) var(--g-4);
	background: var(--g-hull-lo);
	border-radius: var(--g-radius);
	box-shadow: var(--g-recess);
	border-left: 3px solid var(--g-accent);
}

.rec-orders-bar-text {
	font-family: var(--g-font-mono);
	font-size: var(--g-size-tiny);
	color: var(--g-ink);
}

@media (max-width: 1200px) {
	.rec-sites { gap: var(--g-2); }
	.rec-site-margin-text { font-size: var(--g-size-micro); }
	.rec-deploy-controls { min-width: 170px; }
	.rec-status-hint { font-size: var(--g-size-small); }
	.rec-act-chip { min-width: 52px; }
}

/* style.css (the old template) forces `section h3` and `section p` to 1.5em / 1.25em
   with !important below 1024px, which is exactly the width the site headings must stay
   small at; matched on specificity and importance rather than restyled */
@media (max-width: 1200px) {
	.rec-site h3.rec-site-name { font-size: var(--g-size-micro) !important; }
	.rec-site p.rec-site-env { font-size: 0.5625rem !important; }
}

/* at 1024 the roster must not eat the sites: one scrolling row, terse controls */
@media (max-width: 1200px) {
	.rec-btn-sub { display: none; }
	.rec-deploy-controls { flex: 0 0 150px; }
	.rec-deploy-controls .g-btn { padding: var(--g-2); font-size: var(--g-size-tiny); }
	.rec-figure-element { display: none; }
	.rec-hidden-banner-text { font-size: var(--g-size-micro); }
}

/* =========================================================================
   PHONES — the table becomes a column. The page may scroll here (the one-screen
   rule is for desks); what must not scroll away is the thing you act with, so the
   deploy bar, the orders bar and the judge bar stick to the bottom of the screen.
   ========================================================================= */

@media (max-width: 760px) {
	.rec-console--match { height: auto; min-height: 100vh; }
	.rec-shell--match { gap: var(--g-2); }
	.rec-masthead-seed { display: none; }
	.rec-masthead-title { font-size: var(--g-size-lead); }
	.rec-match { min-height: auto; gap: var(--g-2); }

	.rec-status {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto;
		gap: var(--g-1);
		padding: var(--g-2);
	}
	.rec-status-world { gap: var(--g-2); }
	.rec-status-planet { font-size: var(--g-size-lead); }
	.rec-status-next { display: none; }
	.rec-status-score { grid-column: 1; justify-content: flex-start; gap: var(--g-3); }
	.rec-score-of { display: none; }
	.rec-status-turn { grid-column: 1; grid-row: auto; justify-content: space-between; flex-direction: row; }
	.rec-status-hint { font-size: var(--g-size-tiny); padding-top: var(--g-1); }

	.rec-body {
		display: flex;
		flex-direction: column;
		gap: var(--g-2);
	}
	.rec-table { gap: var(--g-2); }
	.rec-rail { overflow: visible; }

	.rec-sites {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--g-2);
	}
	.rec-site { padding: var(--g-2); gap: var(--g-1); }
	.rec-site-name { white-space: normal; overflow: visible; }
	.rec-site-field { flex: 0 0 auto; }
	.rec-rank { flex: 0 0 auto; min-height: 0; overflow: visible; padding: var(--g-1) 0; }
	.rec-rank-empty { align-self: flex-start; }
	.rec-site-midline { min-height: 0; margin: 2px 0; }
	.rec-site-margin { padding: var(--g-1) var(--g-2); }
	.rec-site-margin-text { font-size: var(--g-size-micro); }

	.rec-figure { min-width: 60px; }
	.rec-figure--small { min-width: 56px; }
	.rec-figure-plinth { width: 30px; height: 9px; }
	.rec-figure-hold { font-size: var(--g-size-tiny); }
	.rec-figure-name { font-size: 0.5625rem; letter-spacing: 0.02em; }

	/* the acting surfaces stick to the bottom of the screen */
	.rec-deploy-bar,
	.rec-orders-bar,
	.rec-judge-bar,
	.rec-resolving {
		position: sticky;
		bottom: 0;
		z-index: 5;
		box-shadow: 0 -6px 12px rgba(0, 0, 0, 0.45);
	}
	.rec-deploy-bar {
		flex-direction: column;
		gap: var(--g-1);
		padding: var(--g-1) var(--g-2);
		background: var(--g-hull);
	}
	.rec-deploy-controls {
		flex: 0 0 auto;
		flex-direction: row;
		flex-wrap: wrap;
		gap: var(--g-1);
	}
	.rec-deploy-controls .g-btn { flex: 1 1 auto; padding: var(--g-1) var(--g-2); font-size: var(--g-size-micro); }
	.rec-deploy-note { flex-basis: 100%; }
	.rec-orders-bar { flex-wrap: wrap; padding: var(--g-2); }
	.rec-orders-bar-text { font-size: var(--g-size-micro); }
	.rec-orders-bar .g-btn { flex: 1 1 auto; }
	.rec-judge-bar, .rec-resolving { padding: var(--g-2); }

	.rec-orders { flex: 0 0 auto; overflow: visible; }
	.rec-orders-list { flex: 0 0 auto; max-height: none; overflow: visible; min-height: 0; }
	.rec-orders-head { position: static; }
	.rec-preview { flex: 0 0 auto; max-height: 220px; }
	.rec-log { flex: 0 0 auto; max-height: 220px; min-height: 120px; }

	/* the dossier rides up as a sheet so it can be read from anywhere on the column */
	.rec-inspect {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		max-height: 72vh;
		z-index: 20;
		border-radius: var(--g-radius-panel) var(--g-radius-panel) 0 0;
		box-shadow: 0 -10px 24px rgba(0, 0, 0, 0.6);
	}

	.rec-verdict { padding: var(--g-3); }
	.rec-verdict-title { font-size: var(--g-size-lead); }
	.rec-hidden-banner .rec-figure { display: none; }
}

/* the roster's read affordance: shift-click has no touch equivalent, so every roster
   figure carries a small "read" tab that opens the dossier on any device */
.rec-figure-read {
	font-family: var(--g-font-mono);
	font-size: 0.5625rem;
	text-transform: uppercase;
	letter-spacing: var(--g-track-label);
	color: var(--g-ink-low);
	background: none;
	border: var(--g-hairline) solid var(--g-seam);
	border-radius: 2px;
	padding: 0 var(--g-1);
	cursor: pointer;
	margin-top: 2px;
}
.rec-figure-read:hover { color: var(--g-ink); border-color: var(--g-ink-low); }

@media (max-width: 760px) {
	/* sticky bars need no clipping ancestor between them and the scroller */
	.rec-console--match, .rec-shell--match, .rec-body, .rec-table { overflow: visible; }
	.rec-world, .rec-sites { flex: 0 0 auto; }
	.rec-orders-head .rec-commit-btn { display: none; }
}

@media (max-width: 760px) {
	/* the roster must be as wide as the bar, not as wide as twelve figures */
	.rec-deploy-bar { align-items: stretch; }
}

/* -------------------------------------------------------------------------
   QUIET WHEN EMPTY. A site with nothing on it prints nothing but its name and
   its weather; the field is open ground with one faint word on it. The totals
   under a margin band show only when both sides are present, since a lone
   number is already in the sentence above them.
   ------------------------------------------------------------------------- */

.rec-site--empty .rec-site-field {
	justify-content: center;
}

.rec-site-midline--empty {
	border: 0;
	margin: 0;
	flex: 1 1 auto;
}

.rec-site-unclaimed {
	font-family: var(--g-font-stencil);
	font-size: var(--g-size-micro);
	text-transform: uppercase;
	letter-spacing: var(--g-track-wide);
	color: color-mix(in srgb, var(--g-ink-low) 55%, transparent);
}

.rec-site--empty .rec-ghost-value { font-size: var(--g-size-lead); }

/* kept in the DOM for the verification harness, out of sight for the reader */
.rec-site-margin { position: relative; }
.rec-site-margin-totals--quiet {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* a one-sided site keeps its ground line but no "nobody here" text */
.rec-rank:empty { min-height: var(--g-4); }

@media (max-width: 760px) {
	.rec-site--empty .rec-site-field { min-height: 28px; }
	.rec-site-midline--empty { min-height: 0; }
}

/* the deploy buttons stack their legend over their small print */
.rec-deploy-controls .g-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.15; }
@media (max-width: 760px) { .rec-deploy-controls .g-btn { align-items: center; } }


/* -------------------------------------------------------------------------
   SHORT DESKTOP VIEWPORTS. A laptop with the browser chrome showing leaves 650 to 800
   pixels. Locking the table to that height crushes the sites and hides the roster, so
   below 820px tall the one-screen rule yields: the page scrolls, the sites keep a
   working height, and the action bars stick to the bottom as they do on a phone.
   ------------------------------------------------------------------------- */
@media (min-width: 761px) and (max-height: 820px) {
	.rec-console--match { height: auto; min-height: 100vh; overflow: visible; }
	.rec-shell--match, .rec-body, .rec-table, .rec-rail { overflow: visible; min-height: 0; }
	.rec-match { min-height: 0; }
	.rec-sites { min-height: 380px; }
	/* the rail has no bounded height here, so its panels size to their content instead
	   of sharing a height: the orders panel first, then the preview, then the log */
	.rec-rail { max-height: none; }
	.rec-orders { flex: 0 0 auto; overflow: visible; }
	.rec-orders-list { flex: 0 0 auto; max-height: 420px; overflow-y: auto; }
	.rec-preview { flex: 0 0 auto; max-height: 240px; }
	.rec-log { flex: 1 1 auto; min-height: 240px; max-height: 420px; }
	.rec-inspect { flex: 0 0 auto; max-height: 480px; }
	.rec-deploy-bar, .rec-orders-bar, .rec-judge-bar, .rec-resolving {
		position: sticky;
		bottom: 0;
		z-index: 5;
		box-shadow: 0 -6px 12px rgba(0, 0, 0, 0.45);
		background: var(--g-hull);
	}
}

/* -------------------------------------------------------------------------
   REAL CREATURES. The figure carries the species silhouette from the Encyclopedia's
   art; the dossier opens on a portrait and quotes the record.
   ------------------------------------------------------------------------- */

.rec-figure-plate {
	flex-direction: row;
	gap: var(--g-1);
}

.rec-figure-portrait {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: color-mix(in srgb, var(--g-el) 22%, var(--g-hull-lo));
	border: var(--g-hairline) solid color-mix(in srgb, var(--g-el) 55%, var(--g-seam));
	overflow: hidden;
}

.rec-figure-portrait-svg {
	width: 14px;
	height: 14px;
	display: block;
}

/* a stencil: every path in the element's colour */
.rec-figure-portrait-svg,
.rec-figure-portrait-svg * {
	fill: var(--g-el) !important;
	stroke: none !important;
}

.rec-figure--theirs .rec-figure-portrait-svg,
.rec-figure--theirs .rec-figure-portrait-svg * {
	fill: color-mix(in srgb, var(--g-el) 70%, var(--g-ink-low)) !important;
}

.rec-figure--small .rec-figure-portrait { width: 16px; height: 16px; }
.rec-figure--small .rec-figure-portrait-svg { width: 12px; height: 12px; }

.rec-figure-badge { margin-left: var(--g-1); }

.rec-inspect-head { align-items: center; }

.rec-inspect-portrait {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: var(--g-radius);
	overflow: hidden;
	box-shadow: var(--g-recess);
	border: var(--g-hairline) solid var(--g-seam);
}

.rec-inspect-portrait .xalian-image-wrapper {
	width: 100%;
	height: 100%;
	margin: 0;
}

.rec-inspect-title { flex: 1 1 auto; min-width: 0; }

.rec-inspect-sub { text-transform: none; }

.rec-inspect-niche {
	font-size: var(--g-size-tiny) !important;
	color: var(--g-ink-mid);
	margin: 0 !important;
	font-style: italic;
}

.rec-inspect-traits {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.rec-inspect-trait {
	display: grid;
	grid-template-columns: minmax(6rem, auto) 1fr;
	gap: var(--g-2);
	font-size: var(--g-size-micro);
	line-height: 1.35;
}

.rec-inspect-trait-name {
	font-family: var(--g-font-stencil);
	text-transform: uppercase;
	letter-spacing: var(--g-track-label);
	color: var(--g-ink-low);
}

.rec-inspect-trait--read .rec-inspect-trait-name { color: var(--g-brass-light); }

.rec-inspect-trait-nature { color: var(--g-ink-mid); }

.rec-inspect-signature {
	font-size: var(--g-size-micro) !important;
	color: var(--g-ink-mid);
}

.rec-inspect-signature-name {
	font-family: var(--g-font-stencil);
	text-transform: uppercase;
	letter-spacing: var(--g-track-label);
	color: var(--g-el);
}

.rec-inspect-record summary {
	cursor: pointer;
	list-style: none;
}

.rec-inspect-record summary::-webkit-details-marker { display: none; }

.rec-inspect-record summary::after {
	content: ' +';
	color: var(--g-ink-low);
}

.rec-inspect-record[open] summary::after { content: ' -'; }

.rec-inspect-record .g-body { margin-top: var(--g-2) !important; }

.rec-status-terrain {
	font-size: var(--g-size-micro);
	color: var(--g-ink-low);
}

@media (max-width: 760px) {
	.rec-status-terrain { display: none; }
}

/* -------------------------------------------------------------------------
   SIMPLE MODE. One recommended move, orders by nature, no rail. The same table,
   with fewer things asking for attention.
   ------------------------------------------------------------------------- */

.rec-mode { flex: 0 0 auto; }

.rec-mode .g-segment {
	padding: 2px var(--g-3);
	font-size: var(--g-size-micro);
}

.rec-mode--compact { margin-left: var(--g-3); }

.rec-intro-mode {
	display: flex;
	align-items: center;
	gap: var(--g-3);
	flex-wrap: wrap;
}

.rec-intro-mode-text {
	flex: 1 1 200px;
	font-size: var(--g-size-micro);
	color: var(--g-ink-mid);
	line-height: 1.4;
}

/* the whole table when the rail is away */
.rec-body--wide { grid-template-columns: minmax(0, 1fr); }

/* what just happened, in the machine's own voice, two lines under the strip */
.rec-ticker {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--g-2) var(--g-3);
}

.rec-ticker .g-screen-line {
	font-size: var(--g-size-micro);
	line-height: 1.4;
}

/* the recommended move */
.rec-deploy-bar--simple {
	display: grid;
	grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
	align-items: stretch;
}

.rec-advice {
	display: flex;
	flex-direction: column;
	gap: var(--g-2);
	padding: var(--g-3);
	border-right: var(--g-hairline) solid var(--g-rule);
}

.rec-advice .g-kicker { margin: 0; }

.rec-advice-label {
	font-family: var(--g-font-stencil);
	font-size: var(--g-size-small);
	text-transform: uppercase;
	letter-spacing: var(--g-track-label);
	color: var(--g-ink-low);
}

.rec-advice-btn {
	justify-content: center;
	text-align: center;
	white-space: normal;
	line-height: 1.25;
}

.rec-advice-why {
	font-size: var(--g-size-tiny) !important;
	color: var(--g-ink-mid);
	margin: 0 !important;
	line-height: 1.45;
}

.rec-advice-pass {
	align-self: flex-start;
	font-size: var(--g-size-micro);
	padding: 2px var(--g-3);
}

.rec-advice--waiting { justify-content: center; }

/* the recommended creature and site */
.rec-figure--recommended .rec-figure-plate {
	outline: 2px solid var(--g-brass-light);
	outline-offset: 1px;
}

.rec-figure--recommended { transform: translateY(-3px); }

.rec-site--recommended {
	border-color: var(--g-brass-light);
	box-shadow: var(--g-relief), 0 0 0 1px color-mix(in srgb, var(--g-brass-light) 40%, transparent);
}

.rec-site-recommend {
	position: absolute;
	top: var(--g-2);
	right: var(--g-2);
	font-family: var(--g-font-stencil);
	font-size: 0.5625rem;
	text-transform: uppercase;
	letter-spacing: var(--g-track-wide);
	color: var(--g-brass-light);
	border: var(--g-hairline) solid currentColor;
	border-radius: 2px;
	padding: 0 4px;
}

.rec-site { position: relative; }

/* orders by nature */
.rec-orders-bar--simple {
	align-items: flex-start;
	gap: var(--g-4);
}

.rec-orders-plan {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--g-1);
}

.rec-orders-plan .g-kicker { margin: 0; }

.rec-orders-plan-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.rec-orders-plan-item {
	font-size: var(--g-size-tiny);
	line-height: 1.4;
	color: var(--g-ink);
	padding-left: var(--g-3);
	position: relative;
	cursor: default;
}

.rec-orders-plan-item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 6px;
	height: 2px;
	background: var(--g-el);
}

.rec-orders-plan-item--ordered { color: var(--g-brass-light); }

.rec-orders-plan-actions {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--g-2);
	align-items: stretch;
}

.rec-go-btn {
	min-width: 140px;
	justify-content: center;
	font-size: var(--g-size-body);
}

.rec-change-orders {
	font-size: var(--g-size-micro);
	justify-content: center;
}

/* the full orders panel opens in the rail, as in advanced mode; the bar stays */
.rec-match--simple .rec-orders { flex: 1 1 0; min-height: 0; }


@media (max-width: 760px) {
	.rec-deploy-bar--simple { display: flex; flex-direction: column; }
	.rec-advice {
		border-right: 0;
		border-bottom: var(--g-hairline) solid var(--g-rule);
		padding: var(--g-2);
		gap: var(--g-1);
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
	}
	.rec-advice .g-kicker { grid-column: 1 / -1; }
	.rec-advice-btn { grid-column: 1 / -1; font-size: var(--g-size-small); padding: var(--g-2) var(--g-3); }
	.rec-advice-why { font-size: var(--g-size-micro) !important; }
	.rec-advice-pass { align-self: center; }
	.rec-orders-bar--simple { flex-direction: column; align-items: stretch; }
	.rec-orders-plan-actions { flex-direction: row; }
	.rec-go-btn { flex: 1 1 auto; }
	.rec-mode--compact { margin-left: auto; }
	.rec-ticker { display: none; }
}

/* -------------------------------------------------------------------------
   MOTION — every change on the table is told twice (Nick, 2026-09-03)

   A figure that simply appears reads as nothing having happened. So a figure that
   lands drops onto its site, the site takes a brief tint in the sender's colour, a
   callout over the sites says what happened in a sentence, and the numbers that
   changed tick. None of it glows: motion is position, tint and opacity only, and
   all of it is off under prefers-reduced-motion.
   ------------------------------------------------------------------------- */

.rec-table { position: relative; }

/* the callout: the sentence, on its own row above the sites so it covers nothing,
   in the colour of who did it. The row keeps its height while empty so the table
   does not jump. */
.rec-callout-row {
	flex: 0 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 38px;
	margin-bottom: calc(-1 * var(--g-2));
}

.rec-callout {
	--rec-beat-ms: 1400ms;
	display: inline-flex;
	align-items: baseline;
	gap: var(--g-3);
	max-width: min(92%, 640px);
	padding: var(--g-2) var(--g-4);
	background: var(--g-hull-hi);
	border: var(--g-hairline) solid var(--g-seam);
	border-left: 4px solid var(--g-ink-low);
	border-radius: var(--g-radius);
	box-shadow: var(--g-relief);
	pointer-events: none;
	animation: rec-callout var(--rec-beat-ms) cubic-bezier(0.3, 0, 0.2, 1) both;
}

.rec-callout--you { border-left-color: var(--g-accent); }
.rec-callout--rival { border-left-color: var(--g-lamp-red); }
.rec-callout--judge { border-left-color: var(--g-brass-light); }
.rec-callout--world { border-left-color: var(--g-el); }

.rec-callout-kicker {
	flex: 0 0 auto;
	font-family: var(--g-font-stencil);
	font-size: var(--g-size-micro);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--g-track-wide);
	color: var(--g-ink-low);
}

.rec-callout--you .rec-callout-kicker { color: var(--g-accent); }
.rec-callout--rival .rec-callout-kicker { color: var(--g-lamp-red); }
.rec-callout--judge .rec-callout-kicker { color: var(--g-brass-light); }

.rec-callout-text {
	font-family: var(--g-font-body);
	font-size: var(--g-size-small);
	line-height: 1.35;
	color: var(--g-ink);
}

@keyframes rec-callout {
	0% { opacity: 0; transform: translateY(-8px) scale(0.97); }
	10% { opacity: 1; transform: translateY(0) scale(1); }
	84% { opacity: 1; transform: translateY(0) scale(1); }
	100% { opacity: 0; transform: translateY(-4px) scale(0.99); }
}

@media (max-width: 640px) {
	.rec-callout-row { min-height: 30px; }
	.rec-callout { flex-direction: column; gap: 0; align-items: flex-start; max-width: 100%; }
}

/* a figure landing: the rival's drops in from above, yours rises from below */
.rec-figure--arrive { animation: rec-land-up 520ms cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
.rec-figure--arrive.rec-figure--down { animation-name: rec-land-down; }

@keyframes rec-land-up {
	0% { opacity: 0; transform: translateY(18px) scale(0.92); }
	60% { opacity: 1; transform: translateY(-3px) scale(1.03); }
	100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes rec-land-down {
	0% { opacity: 0; transform: translateY(-18px) scale(0.92); }
	60% { opacity: 1; transform: translateY(3px) scale(1.03); }
	100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* the site it landed on takes the sender's tint for a beat, then lets it go */
.rec-site--landed-mine { animation: rec-landed-mine 1300ms ease-out both; }
.rec-site--landed-theirs { animation: rec-landed-theirs 1300ms ease-out both; }

@keyframes rec-landed-mine {
	0% { background: color-mix(in srgb, var(--g-accent) 22%, var(--g-hull)); box-shadow: var(--g-relief), 0 0 0 2px var(--g-accent); }
	100% { background: var(--g-hull); box-shadow: var(--g-relief), 0 0 0 0 transparent; }
}

@keyframes rec-landed-theirs {
	0% { background: color-mix(in srgb, var(--g-lamp-red) 20%, var(--g-hull)); box-shadow: var(--g-relief), 0 0 0 2px var(--g-lamp-red); }
	100% { background: var(--g-hull); box-shadow: var(--g-relief), 0 0 0 0 transparent; }
}

/* a number that changed: brightens, then settles */
.rec-tick { animation: rec-tick 900ms ease-out both; }

@keyframes rec-tick {
	0% { opacity: 0.2; transform: translateY(4px); }
	35% { opacity: 1; transform: translateY(0); color: var(--g-ink); }
	100% { opacity: 1; }
}

/* the turn readout: the new text slides in; while the rival thinks, its dots walk */
.rec-turn-text--in { display: inline-block; animation: rec-turn-in 420ms cubic-bezier(0.3, 0, 0.2, 1) both; }

@keyframes rec-turn-in {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: translateY(0); }
}

.rec-turn--yours .rec-turn-text--in { animation: rec-turn-yours 700ms cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }

@keyframes rec-turn-yours {
	0% { opacity: 0; transform: translateY(-6px) scale(0.96); }
	55% { opacity: 1; transform: translateY(0) scale(1.08); }
	100% { opacity: 1; transform: translateY(0) scale(1); }
}

.rec-turn--deciding .rec-turn-text::after {
	content: '\2026';
	display: inline-block;
	width: 1.2em;
	text-align: left;
	animation: rec-dots 1200ms steps(3, end) infinite;
}

@keyframes rec-dots {
	0% { clip-path: inset(0 100% 0 0); }
	100% { clip-path: inset(0 -0.2em 0 0); }
}

/* a pip that lights pops; the ticker's newest line slides up into place */
.rec-pip--lit { animation: rec-pip-pop 520ms cubic-bezier(0.2, 0.9, 0.3, 1.3) both; }

@keyframes rec-pip-pop {
	0% { transform: scale(0.4); }
	60% { transform: scale(1.3); }
	100% { transform: scale(1); }
}

.rec-ticker-line--in { animation: rec-rise 380ms ease-out both; }

/* panels that change with the phase rise in rather than snapping */
.rec-rise { animation: rec-rise 380ms cubic-bezier(0.3, 0, 0.2, 1) both; }

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

/* a new world: its three sites deal out left to right */
.rec-site--enter { animation: rec-site-enter 460ms cubic-bezier(0.3, 0, 0.2, 1) both; animation-delay: calc(var(--rec-i, 0) * 110ms); }

/* a landing tint replaces the entrance once the site is on the table */
.rec-site--enter.rec-site--landed-mine { animation: rec-landed-mine 1300ms ease-out both; animation-delay: 0ms; }
.rec-site--enter.rec-site--landed-theirs { animation: rec-landed-theirs 1300ms ease-out both; animation-delay: 0ms; }

@keyframes rec-site-enter {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: translateY(0); }
}

/* the Court's stamp comes down, one site after another */
.rec-stamp--down {
	animation: rec-stamp-down 480ms cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
	animation-delay: calc(var(--rec-i, 0) * 180ms);
}

@keyframes rec-stamp-down {
	0% { opacity: 0; transform: rotate(-3deg) scale(2.2); }
	70% { opacity: 1; transform: rotate(-3deg) scale(0.94); }
	100% { opacity: 1; transform: rotate(-3deg) scale(1); }
}

/* resolution: the acting figure lunges toward the far rank; the one it lands on jolts */
.rec-figure--acting { animation: rec-lunge-up 460ms cubic-bezier(0.3, 0, 0.2, 1) both; }
.rec-figure--acting.rec-figure--down { animation-name: rec-lunge-down; }

@keyframes rec-lunge-up {
	0% { transform: translateY(0); }
	40% { transform: translateY(-10px); }
	100% { transform: translateY(0); }
}

@keyframes rec-lunge-down {
	0% { transform: translateY(0); }
	40% { transform: translateY(10px); }
	100% { transform: translateY(0); }
}

.rec-figure--hit { animation: rec-jolt 420ms ease-out both; animation-delay: 160ms; }

@keyframes rec-jolt {
	0% { transform: translateX(0); }
	25% { transform: translateX(-4px) rotate(-2deg); }
	50% { transform: translateX(4px) rotate(2deg); }
	75% { transform: translateX(-2px); }
	100% { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
	.rec-callout,
	.rec-figure--arrive,
	.rec-site--landed-mine,
	.rec-site--landed-theirs,
	.rec-site--enter.rec-site--landed-mine,
	.rec-site--enter.rec-site--landed-theirs,
	.rec-tick,
	.rec-turn-text--in,
	.rec-turn--deciding .rec-turn-text::after,
	.rec-pip--lit,
	.rec-ticker-line--in,
	.rec-rise,
	.rec-site--enter,
	.rec-stamp--down,
	.rec-figure--acting,
	.rec-figure--hit,
	.rec-figure--routed {
		animation: none;
	}
	.rec-figure--routed { opacity: 0; }
}

/* -------------------------------------------------------------------------
   THE TABLE, REDRAWN WITH THE DUEL'S PARTS (Nick, 2026-09-04)

   Three complaints: the roster was a fresh design of its own, the recommended
   move held the player's hand, and a site was circles in a square with no way to
   tell whose creature stood where. So the figure is now the Duel's piece (the
   species silhouette rimmed in its side's colour, the element disc at its foot),
   the roster is the Duel's rail (fixed slots, portrait, name, a bulb-strip
   meter), the deploy turn is a two-step choice in the rail, and every site is a
   floor with the rival's rank on the far edge and yours on the near one, each edge
   painted and labelled in its side's colour.

   Sides: you are cyan and the rival is brass, the two paints the Duel uses, so a
   side reads the same way in every game on the site.
   ------------------------------------------------------------------------- */

.rec-match {
	--rec-you: var(--g-team-one);
	--rec-rival: var(--g-team-two);
}

/* --- the two sides, everywhere they are named ------------------------------ */

.rec-score--mine .rec-pip--lit { background: var(--rec-you); border-color: var(--rec-you); }
.rec-score--theirs .rec-pip--lit { background: var(--rec-rival); border-color: var(--rec-rival); }
.rec-score--mine .rec-score-value { color: var(--rec-you); }
.rec-score--theirs .rec-score-value { color: var(--rec-rival); }

.rec-turn--yours .rec-turn-text { color: var(--rec-you); }
.rec-status-hint--yours { border-left-color: var(--rec-you); }

.rec-site-margin--mine { border-left-color: var(--rec-you); }
.rec-site-margin--mine .rec-site-margin-text { color: var(--rec-you); }
.rec-site-margin--theirs { border-left-color: var(--rec-rival); }
.rec-site-margin--theirs .rec-site-margin-text { color: var(--rec-rival); }

.rec-site--mine { border-top-color: color-mix(in srgb, var(--rec-you) 60%, var(--g-seam)); }
.rec-site--theirs { border-top-color: color-mix(in srgb, var(--rec-rival) 60%, var(--g-seam)); }

.rec-stamp--yours { color: var(--rec-you); }
.rec-stamp--theirs { color: var(--rec-rival); }
.rec-site--verdict-yours { border-color: color-mix(in srgb, var(--rec-you) 55%, var(--g-seam)); }
.rec-site--verdict-theirs { border-color: color-mix(in srgb, var(--rec-rival) 55%, var(--g-seam)); }

.rec-callout--you { border-left-color: var(--rec-you); }
.rec-callout--rival { border-left-color: var(--rec-rival); }
.rec-callout--you .rec-callout-kicker { color: var(--rec-you); }
.rec-callout--rival .rec-callout-kicker { color: var(--rec-rival); }

@keyframes rec-landed-mine {
	0% { background: color-mix(in srgb, var(--rec-you) 22%, var(--g-hull)); box-shadow: var(--g-relief), 0 0 0 2px var(--rec-you); }
	100% { background: var(--g-hull); box-shadow: var(--g-relief), 0 0 0 0 transparent; }
}

@keyframes rec-landed-theirs {
	0% { background: color-mix(in srgb, var(--rec-rival) 22%, var(--g-hull)); box-shadow: var(--g-relief), 0 0 0 2px var(--rec-rival); }
	100% { background: var(--g-hull); box-shadow: var(--g-relief), 0 0 0 0 transparent; }
}

.rec-verdict--won { border-color: var(--rec-you); }
.rec-verdict--lost { border-color: var(--rec-rival); }

/* --- the piece ------------------------------------------------------------- */

.rec-figure.rec-piece {
	min-width: 0;
	width: auto;
	gap: 1px;
	padding: 2px;
}

.rec-piece-stage {
	position: relative;
	display: block;
	width: var(--rec-piece, 56px);
	height: var(--rec-piece, 56px);
}

/* the contact shadow the creature casts on the floor */
.rec-piece-base {
	position: absolute;
	inset: 0;
	border-radius: 3px;
	background: radial-gradient(ellipse at 50% 92%, rgba(0, 0, 0, 0.6) 0%, transparent 62%);
	pointer-events: none;
}

.rec-piece-art {
	position: absolute;
	left: 5%;
	bottom: 2%;
	width: 90%;
	height: 90%;
	padding: 0 !important;
	aspect-ratio: 1;
}

.rec-piece-art .xalian-image { padding: 0; }

/* the rival's creatures face down the table toward yours */
.rec-figure--down .rec-piece-art { transform: scaleX(-1); }

.rec-piece-disc {
	position: absolute;
	left: -6%;
	bottom: 0;
	border-radius: 50%;
	border: 1px solid var(--g-seam);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), inset 0 1px 0 var(--g-bevel-light);
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

.rec-piece-unknown {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--g-font-mono);
	font-size: var(--g-size-lead);
	color: var(--g-ink-low);
	border: var(--g-hairline) dashed color-mix(in srgb, var(--rec-team, var(--g-ink-low)) 60%, transparent);
	border-radius: 3px;
}

.rec-piece .rec-figure-plate {
	min-height: 18px;
	padding: 1px var(--g-2);
	border-bottom: 2px solid var(--rec-team);
}

.rec-piece .rec-figure-foot { min-height: 0; }

.rec-piece .rec-figure-hold {
	font-size: var(--g-size-small);
	color: var(--rec-team);
}

.rec-figure--theirs.rec-piece .rec-figure-hold { color: var(--rec-team); }

/* chosen: the Duel's four corner brackets, in the side's colour */
.rec-figure--selected .rec-piece-stage::before,
.rec-figure--armed .rec-piece-stage::before {
	content: '';
	position: absolute;
	inset: -3px;
	pointer-events: none;
	background:
		linear-gradient(var(--rec-team), var(--rec-team)) 0 0 / 30% 2px no-repeat,
		linear-gradient(var(--rec-team), var(--rec-team)) 0 0 / 2px 30% no-repeat,
		linear-gradient(var(--rec-team), var(--rec-team)) 100% 0 / 30% 2px no-repeat,
		linear-gradient(var(--rec-team), var(--rec-team)) 100% 0 / 2px 30% no-repeat,
		linear-gradient(var(--rec-team), var(--rec-team)) 0 100% / 30% 2px no-repeat,
		linear-gradient(var(--rec-team), var(--rec-team)) 0 100% / 2px 30% no-repeat,
		linear-gradient(var(--rec-team), var(--rec-team)) 100% 100% / 30% 2px no-repeat,
		linear-gradient(var(--rec-team), var(--rec-team)) 100% 100% / 2px 30% no-repeat;
}

.rec-figure--selected .rec-figure-plate,
.rec-figure--armed .rec-figure-plate {
	border-color: var(--rec-team);
	box-shadow: var(--g-relief);
}

.rec-figure--hidden .rec-piece-art { opacity: 0.55; }

.rec-figure--acting .rec-piece-stage::before {
	content: '';
	position: absolute;
	inset: -3px;
	border: 2px solid var(--g-brass-light);
	border-radius: 4px;
	pointer-events: none;
}

.rec-figure--acting .rec-figure-plate,
.rec-figure--hover .rec-figure-plate,
.rec-figure--hit .rec-figure-plate { outline: none; }

.rec-figure--hit .rec-piece-stage::before,
.rec-figure--hover .rec-piece-stage::before {
	content: '';
	position: absolute;
	inset: -3px;
	border: 2px dashed var(--g-lamp-red);
	border-radius: 4px;
	pointer-events: none;
}

.rec-figure--recommended .rec-figure-plate { outline: none; border-color: var(--g-brass-light); }
.rec-figure--recommended { transform: none; }

.rec-figure--silhouette .rec-piece-stage { opacity: 0.7; }

/* --- the site floor -------------------------------------------------------- */

.rec-site-head {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: var(--g-2);
	align-items: baseline;
}

.rec-site-index {
	grid-row: 1 / 3;
	align-self: start;
	width: 18px;
	height: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--g-font-mono);
	font-size: var(--g-size-micro);
	font-weight: 600;
	color: var(--g-brass-light);
	border: var(--g-hairline) solid var(--g-brass-dark);
	border-radius: 2px;
	background: var(--g-hull-lo);
}

.rec-site-floor {
	position: relative;
	border-radius: var(--g-radius);
	background-color: var(--g-void);
	background-image:
		repeating-linear-gradient(58deg, rgba(255, 244, 214, 0.014) 0 1px, transparent 1px 23px),
		repeating-linear-gradient(-31deg, rgba(0, 0, 0, 0.16) 0 1px, transparent 1px 31px),
		radial-gradient(ellipse at 28% 22%, rgba(176, 141, 63, 0.06) 0%, transparent 55%),
		radial-gradient(ellipse at 74% 76%, rgba(176, 141, 63, 0.04) 0%, transparent 50%);
	box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.85), inset 0 -1px 0 var(--g-bevel-light);
	overflow: hidden;
}

/* a rank is as tall as the creatures standing in it (never less than a strip of open
   ground), so a crowded rank never spills over the midline; a site fuller than its
   panel scrolls inside the floor */
.rec-site-floor { overflow-y: auto; overflow-x: hidden; }

.rec-site-floor .rec-rank {
	position: relative;
	flex: 1 0 auto;
	min-height: 44px;
	justify-content: center;
	align-items: flex-end;
	align-content: flex-end;
	gap: var(--g-3);
	padding: var(--g-3) var(--g-3);
	overflow: visible;
}

.rec-site-floor .rec-rank--theirs { align-content: flex-start; }

.rec-site-floor .rec-rank--theirs {
	align-items: flex-start;
	padding-top: calc(var(--g-3) + 8px);
	border-top: 3px solid var(--rec-rival);
	background: linear-gradient(180deg, color-mix(in srgb, var(--rec-rival) 16%, transparent), transparent 75%);
}

.rec-site-floor .rec-rank--mine {
	padding-bottom: calc(var(--g-3) + 8px);
	border-bottom: 3px solid var(--rec-you);
	background: linear-gradient(0deg, color-mix(in srgb, var(--rec-you) 16%, transparent), transparent 75%);
}

.rec-rank-edge {
	position: absolute;
	left: var(--g-2);
	font-family: var(--g-font-stencil);
	font-size: 0.5625rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: var(--g-track-wide);
	pointer-events: none;
}

.rec-rank-edge--theirs { top: 2px; color: var(--rec-rival); }
.rec-rank-edge--mine { bottom: 2px; color: var(--rec-you); }

.rec-rank-open {
	align-self: center;
	font-family: var(--g-font-mono);
	font-size: var(--g-size-micro);
	font-style: italic;
	color: color-mix(in srgb, var(--g-ink-low) 60%, transparent);
}

.rec-site-floor .rec-site-midline {
	margin: 0;
	min-height: 26px;
	border-top: var(--g-hairline) dashed color-mix(in srgb, var(--g-ink-low) 55%, transparent);
	border-bottom: var(--g-hairline) dashed color-mix(in srgb, var(--g-ink-low) 55%, transparent);
	background: rgba(0, 0, 0, 0.28);
}

.rec-site-field--empty .rec-rank { flex: 0 0 auto; min-height: 40px; }
.rec-site-field--empty .rec-site-midline { flex: 1 1 auto; border: 0; }
.rec-site-field--empty .rec-site-midline--empty { margin: 0; }
.rec-site--empty .rec-site-field { justify-content: stretch; }

.rec-site-floor .rec-ghost {
	flex-wrap: wrap;
	justify-content: center;
	padding: var(--g-1) var(--g-2);
}

.rec-site--hover {
	border-color: var(--rec-you);
	box-shadow: var(--g-relief), 0 0 0 1px color-mix(in srgb, var(--rec-you) 55%, transparent);
}

.rec-site--targeted {
	border-color: color-mix(in srgb, var(--rec-you) 70%, var(--g-seam));
	box-shadow: var(--g-relief), 0 0 0 1px color-mix(in srgb, var(--rec-you) 35%, transparent);
}

.rec-site--targeted:hover { background: color-mix(in srgb, var(--rec-you) 6%, var(--g-hull)); }
.rec-ghost-cta { color: var(--rec-you); }

/* -------------------------------------------------------------------------
   NUMBERS AS PICTURES (Nick, 2026-09-04, third pass)

   Hold is a bulb strip in the side's colour on every figure, slot chip and front
   line: what the environment took is a hatched hazard segment past the filled
   part, a stagger is a struck red segment, home ground a brass cap. Each site's
   environment is a temperature scale shared by all sites with the site's band on
   it and a glyph for the medium; a previewed creature lays its own band over the
   site's, so strain is seen as two bands missing each other. Sends left are pips.
   ------------------------------------------------------------------------- */









.rec-piece .rec-figure-hold { font-size: var(--g-size-micro); }

/* on the front line */

/* in a slot: meter row uses the same strip */



/* --- the environment scale --------------------------------------------- */

.rec-env {
	grid-column: 2;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--g-2);
	min-width: 0;
}

.rec-env-medium {
	width: 16px;
	height: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: var(--g-hairline) solid var(--g-seam);
	border-radius: 50%;
	background: var(--g-hull-lo);
	color: var(--g-ink-mid);
}

.rec-medium-glyph { width: 11px; height: 11px; fill: currentColor; stroke: currentColor; }
.rec-env-medium--strained { color: var(--g-accent); border-color: var(--g-accent); }
.rec-env-medium--cannot { color: var(--g-lamp-red); border-color: var(--g-lamp-red); }
.rec-env-medium--ok { color: var(--rec-you); }

.rec-env-scale {
	position: relative;
	display: block;
	height: 8px;
	border-radius: 1px;
	background: linear-gradient(90deg, color-mix(in srgb, var(--g-el-ice) 35%, var(--g-seam)), var(--g-seam) 45%, color-mix(in srgb, var(--g-el-fire) 35%, var(--g-seam)));
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.9);
	overflow: hidden;
}

.rec-env-zero {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 1px;
	background: color-mix(in srgb, var(--g-ink-low) 70%, transparent);
}

.rec-env-band {
	position: absolute;
	top: 0;
	bottom: 0;
	border-radius: 1px;
}

.rec-env-band--site { background: color-mix(in srgb, var(--g-ink) 70%, transparent); }

.rec-env-band--creature {
	top: 1px;
	bottom: 1px;
	background: repeating-linear-gradient(90deg, var(--rec-you) 0 2px, transparent 2px 3px);
	box-shadow: 0 0 0 1px var(--rec-you);
	transition: left var(--g-move), width var(--g-move);
}

.rec-env--strained .rec-env-band--creature { background: repeating-linear-gradient(90deg, var(--g-accent) 0 2px, transparent 2px 3px); box-shadow: 0 0 0 1px var(--g-accent); }
.rec-env--severe .rec-env-band--creature { background: repeating-linear-gradient(90deg, var(--g-lamp-red) 0 2px, transparent 2px 3px); box-shadow: 0 0 0 1px var(--g-lamp-red); }

.rec-env-readout {
	font-size: 0.5625rem;
	color: var(--g-ink-low);
	white-space: nowrap;
}

/* --- sends as pips, and the hold legend in the deploy head ------------------- */

.rec-deploy-count { display: inline-flex; align-items: center; gap: var(--g-2); }

.rec-sends { display: inline-flex; gap: 2px; }

.rec-send-pip {
	width: 9px;
	height: 9px;
	border-radius: 1px;
	border: var(--g-hairline) solid var(--g-seam);
	background: var(--rec-you);
}

.rec-send-pip--spent { background: var(--g-hull-lo); box-shadow: var(--g-recess); }
.rec-sends-text { font-size: var(--g-size-micro); color: var(--g-ink-low); }


/* -------------------------------------------------------------------------
   THE FRAME (Nick, 2026-09-04): a round is three worlds side by side, each at one of
   its sites. Every site card is tinted by its own world's element, headed by the
   planet with the site beneath it; the status strip names the round and lists the
   worlds as element chips; the hold strip is notched at 10 and 20 so the scale reads.
   ------------------------------------------------------------------------- */

.rec-status-worlds {
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--g-1);
}

.rec-status-worlds .rec-status-element {
	color: var(--g-el);
	background: color-mix(in srgb, var(--g-el) 14%, var(--g-hull-lo));
	border: var(--g-hairline) solid color-mix(in srgb, var(--g-el) 60%, var(--g-seam));
	box-shadow: none;
}

.rec-status .rec-status-planet { color: var(--g-brass-light); }
.rec-status .rec-world-dot--now { background: var(--g-brass-light); border-color: var(--g-brass-light); }

.rec-site-head { grid-template-rows: auto auto auto; }
.rec-site-head .rec-site-index { grid-row: 1 / 4; color: var(--g-el); border-color: color-mix(in srgb, var(--g-el) 60%, var(--g-brass-dark)); }
.rec-site .rec-site-name { color: var(--g-el); }

.rec-site-place {
	grid-column: 2;
	font-family: var(--g-font-mono);
	font-size: 0.5625rem;
	letter-spacing: 0.02em;
	color: var(--g-ink-low);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.rec-site-head .rec-site-recommend { grid-column: 2; }

/* the chips read their world's element too */

/* a chip: the world's name on top (numbered to match the table), the dial and the
   reading beneath */


@media (max-width: 760px) {
	.rec-status-next { display: none; }
	.rec-site-place { display: none; }
}

/* -------------------------------------------------------------------------
   ONE LANGUAGE (Nick, 2026-09-04, seventh pass)

   The table is the Court's frame: a console in the Generator's own fittings, the
   same ones the Duel and the encyclopedia use. Panels are matte steel; only the
   CRT and the lamps emit; the fourteen element hues are the only saturated paint;
   legends are stencilled and output is monospaced. Everything below replaces the
   passes it superseded (the strips, the balance bar, the hatched grounds, the brass
   dial): three trays for the three worlds, the squad on a rail lying down, and hold
   read off the system's bulb meter, lit in the world's element.
   ------------------------------------------------------------------------- */

/* --- the meter: one bulb per point, banks of five, brass past twenty ---------- */

.rec-meter {
	display: inline-flex;
	flex-direction: column;
	gap: 2px;
	vertical-align: middle;
	flex: 0 0 auto;
	--bulb-w: 4px;
	--bulb-h: 10px;
	--bulb-gap: 2px;
	--bank-gap: 4px;
}

.rec-meter--chip { --bulb-w: 2px; --bulb-h: 6px; --bulb-gap: 1px; --bank-gap: 2px; }
.rec-meter--large { --bulb-w: 5px; --bulb-h: 13px; --bulb-gap: 1px; --bank-gap: 4px; }

.rec-meter-bulbs {
	display: inline-flex;
	align-items: stretch;
	gap: var(--bulb-gap);
	padding: 2px 3px;
	background: var(--g-seam);
	border-radius: 2px;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.9), inset 0 -1px 0 rgba(255, 244, 214, 0.04);
}

.rec-bulb {
	display: block;
	width: var(--bulb-w);
	height: var(--bulb-h);
	border-radius: 1px;
	background: var(--g-lamp-off);
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.6);
}

/* a seam between banks of five */
.rec-bulb:nth-child(5n):not(:last-child) { margin-right: var(--bank-gap); }

.rec-bulb--lit {
	background: var(--g-el);
	box-shadow: 0 0 3px color-mix(in srgb, var(--g-el) 55%, transparent), inset 0 -1px 1px rgba(0, 0, 0, 0.35);
}

/* what the site takes: bulbs that would be lit unstrained, shown dim */
.rec-bulb--dim { background: color-mix(in srgb, var(--g-accent) 45%, var(--g-lamp-off)); }
.rec-bulb--dim-severe { background: color-mix(in srgb, var(--g-lamp-red) 45%, var(--g-lamp-off)); }

/* what a stagger took: struck red */
.rec-bulb--struck { background: var(--g-lamp-red); opacity: 0.75; }

/* home ground: the brass bank past twenty */
.rec-bulb--over { border: 1px solid var(--g-brass-dark); background: var(--g-lamp-off); }
.rec-bulb--over.rec-bulb--lit { background: var(--g-brass-light); border-color: var(--g-brass); box-shadow: 0 0 3px color-mix(in srgb, var(--g-brass-light) 55%, transparent); }

/* the printed scale under the large strip */
.rec-meter-scale {
	display: flex;
	justify-content: space-between;
	padding: 0 3px;
	font-family: var(--g-font-mono);
	font-size: 0.5625rem;
	line-height: 1;
	color: var(--g-ink-low);
	width: calc(20 * var(--bulb-w) + 19 * var(--bulb-gap) + 3 * var(--bank-gap) + 6px);
}
.rec-meter-scale i { font-style: normal; }

/* where it sits */
.rec-piece .rec-figure-foot {
	display: grid;
	grid-template-columns: auto auto;
	justify-content: center;
	align-items: center;
	gap: var(--g-1);
	width: 100%;
	padding: 0 2px;
}
.rec-piece .rec-figure-hold { color: var(--g-ink); font-size: var(--g-size-micro); }
.rec-figure--theirs.rec-piece .rec-figure-hold { color: var(--g-ink-mid); }

.rec-ghost { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--g-2) var(--g-3); max-width: 100%; }
.rec-ghost .rec-ghost-value {
	font-family: var(--g-font-mono);
	font-variant-numeric: tabular-nums;
	font-size: var(--g-size-h3);
	color: var(--g-ink);
}

.rec-slot-meter-row { grid-template-columns: 26px auto minmax(0, 1fr); align-items: center; }

.rec-hold-legend { grid-template-columns: auto minmax(0, 1fr); }

/* --- the tray: one world, machined into the console ------------------------- */

.rec-site.g-panel {
	padding: var(--g-3);
	background: linear-gradient(160deg, var(--g-hull-hi), var(--g-hull));
	border: 2px solid var(--g-brass-dark);
	border-radius: var(--g-radius-housing, 6px);
	box-shadow: var(--g-relief), var(--g-drop);
	background-image:
		radial-gradient(circle at 10px 10px, rgba(0, 0, 0, 0.6) 1.5px, var(--g-brass-dark) 2.4px, var(--g-bevel-light) 3px, transparent 3.6px),
		radial-gradient(circle at calc(100% - 10px) 10px, rgba(0, 0, 0, 0.6) 1.5px, var(--g-brass-dark) 2.4px, var(--g-bevel-light) 3px, transparent 3.6px),
		radial-gradient(circle at 10px calc(100% - 10px), rgba(0, 0, 0, 0.6) 1.5px, var(--g-brass-dark) 2.4px, var(--g-bevel-light) 3px, transparent 3.6px),
		radial-gradient(circle at calc(100% - 10px) calc(100% - 10px), rgba(0, 0, 0, 0.6) 1.5px, var(--g-brass-dark) 2.4px, var(--g-bevel-light) 3px, transparent 3.6px),
		linear-gradient(160deg, var(--g-hull-hi), var(--g-hull));
}

/* the side to move, the target, the verdict: the tray's rim, never its floor */
.rec-site--targeted { border-color: color-mix(in srgb, var(--rec-you) 55%, var(--g-brass-dark)); }
.rec-site--targeted:hover { background-color: var(--g-hull); }
.rec-site--hover { border-color: var(--rec-you); }
.rec-site--verdict-yours { border-color: var(--rec-you); }
.rec-site--verdict-theirs { border-color: var(--rec-rival); }
.rec-site--mine, .rec-site--theirs, .rec-site--level, .rec-site--empty { border-top-color: var(--g-brass-dark); }

.rec-site-head { padding: 0 var(--g-1); }

/* the floor: dark stone, dust and scouring, deep toward the walls */
.rec-site-floor {
	background-color: var(--g-void);
	background-image:
		repeating-linear-gradient(58deg, rgba(255, 244, 214, 0.014) 0 1px, transparent 1px 23px),
		repeating-linear-gradient(-31deg, rgba(0, 0, 0, 0.16) 0 1px, transparent 1px 31px),
		radial-gradient(ellipse at 28% 22%, rgba(176, 141, 63, 0.05) 0%, transparent 55%),
		radial-gradient(ellipse at 74% 76%, rgba(176, 141, 63, 0.035) 0%, transparent 50%),
		radial-gradient(circle at 50% 45%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.6) 100%);
	box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.9), inset 0 -1px 0 var(--g-bevel-light);
	border-radius: var(--g-radius);
	min-height: 170px;
}

/* the two ranks: plain floor with a painted edge line and a tab, nothing hatched */
.rec-site-floor .rec-rank--theirs {
	border-top: 2px solid color-mix(in srgb, var(--rec-rival) 80%, var(--g-seam));
	background: linear-gradient(180deg, color-mix(in srgb, var(--rec-rival) 9%, transparent), transparent 45%);
	padding-top: calc(var(--g-3) + 14px);
}

.rec-site-floor .rec-rank--mine {
	border-bottom: 2px solid color-mix(in srgb, var(--rec-you) 80%, var(--g-seam));
	background: linear-gradient(0deg, color-mix(in srgb, var(--rec-you) 9%, transparent), transparent 45%);
	padding-bottom: calc(var(--g-3) + 14px);
}

.rec-rank-edge {
	left: 0;
	padding: 1px var(--g-2);
	font-family: var(--g-font-stencil);
	font-size: var(--g-size-micro);
	letter-spacing: var(--g-track-label);
	text-transform: uppercase;
	color: var(--g-void);
	border-radius: 0 0 3px 0;
}
.rec-rank-edge--theirs { top: 0; background: var(--rec-rival); }
.rec-rank-edge--mine { bottom: 0; background: var(--rec-you); border-radius: 0 3px 0 0; }

/* the front line: one machined seam */
.rec-site-floor .rec-site-midline {
	min-height: 72px;
	border-top: 1px solid var(--g-brass-dark);
	border-bottom: 1px solid var(--g-brass-dark);
	background: rgba(0, 0, 0, 0.3);
}
.rec-site-field--empty .rec-site-midline { border: 0; }

.rec-ghost-cta {
	font-family: var(--g-font-stencil);
	font-size: var(--g-size-micro);
	text-transform: uppercase;
	letter-spacing: var(--g-track-wide);
	padding: 2px var(--g-3);
	border: 1px solid var(--rec-you);
	border-radius: 2px;
	color: var(--g-void);
	background: var(--rec-you);
}
.rec-site--targeted .rec-ghost-cta { animation: rec-turn-in 300ms ease-out both; }

/* --- the tally: two readouts and a sentence, under the world's name ---------- */

.rec-tally {
	flex: 0 0 auto;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: baseline;
	gap: var(--g-3);
	padding: var(--g-1) var(--g-2);
	border-top: var(--g-hairline) solid var(--g-seam);
	border-bottom: var(--g-hairline) solid var(--g-seam);
}

.rec-tally--hidden { visibility: hidden; }

.rec-tally-side {
	display: inline-flex;
	align-items: baseline;
	gap: var(--g-1);
	font-family: var(--g-font-mono);
	font-variant-numeric: tabular-nums;
	color: var(--g-ink-mid);
}

.rec-tally-label {
	font-family: var(--g-font-stencil);
	font-size: 0.5625rem;
	letter-spacing: var(--g-track-label);
	text-transform: uppercase;
	color: var(--g-ink-low);
}

.rec-tally-value { font-size: var(--g-size-small); font-weight: 600; }
.rec-tally--theirs .rec-tally-side--theirs .rec-tally-value { color: var(--rec-rival); }
.rec-tally--mine .rec-tally-side--mine .rec-tally-value { color: var(--rec-you); }
.rec-tally--preview .rec-tally-side--mine .rec-tally-value { color: var(--rec-you); }
.rec-tally-plus { font-size: var(--g-size-micro); color: var(--rec-you); }

.rec-tally-text {
	text-align: center;
	font-family: var(--g-font-stencil);
	font-size: var(--g-size-micro);
	letter-spacing: var(--g-track-label);
	text-transform: uppercase;
	color: var(--g-ink-low);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.rec-tally--mine .rec-tally-text { color: var(--rec-you); }
.rec-tally--theirs .rec-tally-text { color: var(--rec-rival); }
.rec-tally--level .rec-tally-text { color: var(--g-ink-mid); }
.rec-tally--preview .rec-tally-text { color: var(--rec-you); }

/* --- the status strip: outline chips for the worlds, a lamp for the turn --------- */

.rec-status-worlds { display: inline-flex; flex-wrap: wrap; gap: var(--g-1); }
.rec-status-worlds .rec-status-element { font-size: var(--g-size-micro); padding: 1px var(--g-2); }
.rec-status .rec-status-planet { color: var(--g-ink); }
.rec-status .rec-world-dot--now { background: var(--g-lamp-amber); border-color: var(--g-lamp-amber); box-shadow: 0 0 6px var(--g-lamp-amber); }

.rec-site-head { grid-template-rows: auto auto auto; }
.rec-site-head .rec-site-index { grid-row: 1 / 4; color: var(--g-el); border-color: color-mix(in srgb, var(--g-el) 60%, var(--g-brass-dark)); }
.rec-site .rec-site-name { color: var(--g-el); }

.rec-site-place {
	grid-column: 2;
	font-family: var(--g-font-mono);
	font-size: 0.5625rem;
	letter-spacing: 0.02em;
	color: var(--g-ink-low);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.rec-site-head .rec-site-recommend { grid-column: 2; }

/* quiet parts keep their room so a preview never shifts the card under the pointer */
.rec-env-slot { display: contents; }
.rec-env-slot--quiet .rec-env { visibility: hidden; }

/* --- the bench: the Duel's roster rail, lying down --------------------------------- */

.rec-bench {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	background: var(--g-hull);
	border: var(--g-hairline) solid var(--g-seam);
	border-radius: var(--g-radius-panel, var(--g-radius));
	box-shadow: var(--g-relief), var(--g-drop);
	overflow: hidden;
}

/* the side to move carries an edge light along the rail, in its own colour */
.rec-bench--active {
	border-color: color-mix(in srgb, var(--rec-you) 45%, var(--g-seam));
	box-shadow: var(--g-relief), var(--g-drop), inset 0 0 18px color-mix(in srgb, var(--rec-you) 14%, transparent);
}

.rec-bench-head {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto auto;
	align-items: center;
	gap: var(--g-2) var(--g-5);
	padding: var(--g-2) var(--g-4);
	border-bottom: var(--g-hairline) solid var(--g-seam);
	background: var(--g-hull-lo);
}

.rec-bench-title { display: inline-flex; align-items: baseline; gap: var(--g-2); }

.rec-bench-kicker {
	font-family: var(--g-font-stencil);
	font-size: var(--g-size-micro);
	font-weight: 600;
	letter-spacing: var(--g-track-label);
	text-transform: uppercase;
	color: var(--g-ink-mid);
}

.rec-bench-count { font-size: var(--g-size-small); font-variant-numeric: tabular-nums; color: var(--g-ink); }
.rec-bench-count-of { color: var(--g-ink-low); }

.rec-bench-say { min-width: 0; }

.rec-bench-heading {
	font-family: var(--g-font-stencil);
	font-size: var(--g-size-small);
	font-weight: 600;
	letter-spacing: var(--g-track-label);
	text-transform: uppercase;
	margin: 0;
	color: var(--g-ink);
	animation: rec-turn-in 300ms ease-out both;
}
.rec-bench--active .rec-bench-heading { color: var(--rec-you); }

.rec-bench-lead { margin: 0; font-size: var(--g-size-micro); color: var(--g-ink-mid); }

.rec-bench-actions { display: inline-flex; gap: var(--g-2); align-items: center; }
.rec-bench-actions .g-btn { font-size: var(--g-size-micro); }

.rec-plinths {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(84px, 1fr);
	gap: var(--g-2);
	padding: var(--g-2);
	overflow-x: auto;
	scrollbar-width: thin;
}

/* one slot, held for the whole match so nothing reshuffles under the cursor */
.rec-plinth {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--g-hull-lo);
	border: var(--g-hairline) solid var(--g-seam);
	border-radius: var(--g-radius);
	box-shadow: var(--g-recess);
	transition: background var(--g-move), border-color var(--g-move), opacity var(--g-move);
}

.rec-plinth:hover,
.rec-plinth:focus-within { background: var(--g-hull); }

.rec-plinth-main {
	appearance: none;
	background: none;
	border: 0;
	padding: var(--g-2) var(--g-1) var(--g-1);
	color: inherit;
	font: inherit;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	min-width: 0;
	width: 100%;
}
.rec-plinth-main:disabled { cursor: default; }
.rec-plinth-main:focus-visible { outline: 1px solid var(--rec-you); outline-offset: -1px; }

.rec-plinth-stage {
	position: relative;
	width: 48px;
	height: 44px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.rec-plinth-base {
	position: absolute;
	left: 4px;
	right: 4px;
	bottom: 0;
	height: 8px;
	border-radius: 50%;
	background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.7), transparent 70%);
}

.rec-plinth-art { position: relative; width: 44px; height: 44px; transition: transform var(--g-move); }

.rec-plinth-name {
	font-family: var(--g-font-stencil);
	font-size: var(--g-size-micro);
	letter-spacing: var(--g-track-label);
	text-transform: uppercase;
	color: var(--g-ink);
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* the three lamps: bulbs behind coloured plastic, one per world in the frame */
.rec-lamps { display: inline-flex; gap: 6px; padding: 3px 0; }

.rec-lamp {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--g-lamp-off);
	box-shadow: inset 0 -2px 2px rgba(0, 0, 0, 0.45), inset 0 1px 1px rgba(0, 0, 0, 0.6);
	border: 1px solid var(--g-seam);
	transition: background var(--g-move), box-shadow var(--g-move);
}
.rec-lamp--1 { background: color-mix(in srgb, var(--g-el) 40%, var(--g-lamp-off)); }
.rec-lamp--2 { background: var(--g-el); box-shadow: 0 0 8px var(--g-el), inset 0 -2px 2px rgba(0, 0, 0, 0.45); }
.rec-lamp--home { outline: 1px solid var(--g-brass-light); outline-offset: 1px; }

.rec-plinth-tag,
.rec-plinth-mark {
	font-family: var(--g-font-mono);
	font-size: 0.5625rem;
	text-transform: uppercase;
	letter-spacing: var(--g-track-label);
	color: var(--g-ink-low);
}
.rec-plinth-marks { display: inline-flex; gap: 4px; }
.rec-plinth-mark--suggested { color: var(--g-lamp-amber); }
.rec-plinth-tag--sent { color: var(--g-ink-mid); }
.rec-plinth-tag--routed { color: var(--g-lamp-red); }

.rec-plinth-read {
	appearance: none;
	background: none;
	border: 0;
	border-top: var(--g-hairline) solid var(--g-seam);
	padding: 2px;
	font-family: var(--g-font-mono);
	font-size: 0.5625rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--g-ink-low);
	cursor: pointer;
}
.rec-plinth-read:hover { color: var(--g-ink); }

.rec-plinth--sent .rec-plinth-art,
.rec-plinth--holding .rec-plinth-art,
.rec-plinth--routed .rec-plinth-art,
.rec-plinth--downed .rec-plinth-art,
.rec-plinth--away .rec-plinth-art { filter: grayscale(1); opacity: 0.5; }
.rec-plinth--disabled { opacity: 0.7; }
.rec-plinth--suggested { border-color: color-mix(in srgb, var(--g-lamp-amber) 60%, var(--g-seam)); }

/* lifted: the figure rises and the slot takes the Duel's corner brackets */
.rec-plinth--armed { background: var(--g-hull); border-color: var(--rec-you); }
.rec-plinth--armed .rec-plinth-art { transform: translateY(-6px); }
.rec-plinth--armed .rec-plinth-base { opacity: 0.4; }
.rec-plinth--armed::before,
.rec-plinth--armed::after {
	content: '';
	position: absolute;
	width: 8px;
	height: 8px;
	border: 2px solid var(--rec-you);
	pointer-events: none;
}
.rec-plinth--armed::before { top: -2px; left: -2px; border-right: 0; border-bottom: 0; }
.rec-plinth--armed::after { bottom: -2px; right: -2px; border-left: 0; border-top: 0; }

/* the page scrolls when the bench needs the room; the worlds keep a floor */
.rec-console--match { height: auto; min-height: 100vh; overflow: visible; }
.rec-shell--match, .rec-match, .rec-body, .rec-table { overflow: visible; }
.rec-sites { min-height: 340px; }
.rec-world, .rec-sites { flex: 0 0 auto; }

@media (max-width: 1100px) {
	.rec-plinths { grid-auto-columns: minmax(76px, 1fr); }
}

@media (max-width: 760px) {
	.rec-bench-head { grid-template-columns: minmax(0, 1fr); }
	.rec-bench-actions { flex-wrap: wrap; }
	.rec-plinths { grid-auto-columns: 84px; }
	.rec-status-next { display: none; }
	.rec-site-place { display: none; }
	.rec-meter--large { --bulb-w: 5px; --bulb-h: 12px; }
	.rec-site-floor .rec-site-midline { min-height: 64px; }
}

@media (prefers-reduced-motion: reduce) {
	.rec-plinth, .rec-plinth-art, .rec-lamp, .rec-bulb { transition: none; }
	.rec-bench-heading { animation: none; }
}

/* the preview on the front line is laid over the seam, out of the flow, so pointing
   at a creature never changes the tray's height by a pixel */
.rec-site-floor .rec-site-midline { position: relative; }
.rec-site-floor .rec-ghost { position: absolute; inset: 0; padding: var(--g-1) var(--g-2); }

/* -------------------------------------------------------------------------
   THE RIVALS (pass 1 of the play enhancements, 2026-09-05)
   Five handlers over the same bot, chosen on the intro as a row of plates: a rank,
   a lamp lit on the chosen one, the name stencilled, the faction and home in small
   caps, one sentence of style, and the record from this browser in mono.
   ------------------------------------------------------------------------- */

.rec-rivals-panel {
	display: flex;
	flex-direction: column;
	gap: var(--g-3);
	margin-top: var(--g-4);
}

.rec-rivals-head { display: flex; flex-direction: column; gap: var(--g-1); }
.rec-rivals-head .g-kicker { margin: 0; }

.rec-rivals-title {
	margin: 0;
	font-family: var(--g-font-stencil);
	font-size: var(--g-size-h3);
	text-transform: uppercase;
	letter-spacing: var(--g-track-label);
	color: var(--g-ink);
}

.rec-rivals-lead { margin: 0; max-width: 68ch; color: var(--g-ink-mid); font-size: var(--g-size-small); }

.rec-rivals {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--g-3);
}

.rec-rival {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--g-1);
	padding: var(--g-3);
	text-align: left;
	cursor: pointer;
	color: var(--g-ink-mid);
	border: 1px solid var(--g-rule);
	transition: border-color 160ms ease, transform 160ms ease;
}

.rec-rival:hover { border-color: var(--g-brass-dark); }
.rec-rival:focus-visible { outline: 2px solid var(--g-accent); outline-offset: 2px; }
.rec-rival--chosen { border-color: var(--g-brass); }
.rec-rival--chosen .rec-rival-name { color: var(--g-brass-light); }

.rec-rival-head { display: flex; align-items: center; justify-content: space-between; align-self: stretch; }
.rec-rival-rank { font-size: var(--g-size-micro); color: var(--g-ink-low); }

.rec-rival-name {
	font-family: var(--g-font-stencil);
	font-size: var(--g-size-lead);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--g-track-label);
	color: var(--g-ink);
	line-height: 1.15;
}

.rec-rival-faction {
	font-family: var(--g-font-stencil);
	font-size: var(--g-size-micro);
	text-transform: uppercase;
	letter-spacing: var(--g-track-wide);
	color: var(--g-ink-low);
}

.rec-rival-style { margin: var(--g-1) 0 0; font-size: var(--g-size-small); line-height: 1.45; color: var(--g-ink-mid); }

.rec-rival-measure {
	margin-top: auto;
	padding-top: var(--g-2);
	font-size: var(--g-size-micro);
	text-transform: uppercase;
	letter-spacing: var(--g-track-label);
	color: var(--g-brass-light);
	border-top: var(--g-hairline) solid var(--g-rule-faint);
	align-self: stretch;
}

.rec-rival-record {
	margin-top: 0;
	padding-top: var(--g-1);
	font-size: var(--g-size-micro);
	text-transform: uppercase;
	letter-spacing: var(--g-track-label);
	color: var(--g-ink-low);
	align-self: stretch;
}

.rec-masthead-rival {
	font-family: var(--g-font-stencil);
	font-size: var(--g-size-tiny);
	text-transform: uppercase;
	letter-spacing: var(--g-track-wide);
	color: var(--g-ink-low);
}

/* a Proving left on the frame, offered above the rules */
.rec-resume {
	display: flex;
	align-items: center;
	gap: var(--g-3);
	padding: var(--g-2) var(--g-4);
	margin-bottom: var(--g-3);
	border-left: 3px solid var(--g-accent);
}

.rec-resume-text { flex: 1 1 auto; font-size: var(--g-size-small); color: var(--g-ink); }
.rec-resume-actions { display: flex; gap: var(--g-2); flex: 0 0 auto; }

/* the pace of watching is the player's: skip the resolution to the ruling */
.rec-skip { padding: 2px var(--g-2); font-size: var(--g-size-micro); }

.rec-judge-bar-text { font-size: var(--g-size-small); color: var(--g-ink); }
.rec-judge-bar { margin-top: var(--g-3); border-left: 3px solid var(--g-brass); }

/* the match report at the Charter */
.rec-report {
	display: flex;
	flex-direction: column;
	gap: var(--g-3);
	margin-top: var(--g-3);
	padding: var(--g-4);
	border-left: 3px solid var(--g-brass);
}

.rec-report--won { border-left-color: var(--rec-you); }
.rec-report--lost { border-left-color: var(--rec-rival); }
.rec-report .g-kicker { margin: 0; }

.rec-report-title {
	margin: 0;
	font-family: var(--g-font-stencil);
	font-size: var(--g-size-h2);
	text-transform: uppercase;
	letter-spacing: var(--g-track-label);
	color: var(--g-ink);
	line-height: 1.1;
}

.rec-report-lede { margin: 0; color: var(--g-ink-mid); }

.rec-report-worlds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g-3); }

.rec-report-round { display: flex; flex-direction: column; gap: var(--g-2); }

.rec-report-round-title {
	margin: 0;
	font-family: var(--g-font-stencil);
	font-size: var(--g-size-tiny);
	text-transform: uppercase;
	letter-spacing: var(--g-track-wide);
	color: var(--g-ink-low);
	padding-bottom: var(--g-1);
	border-bottom: var(--g-hairline) solid var(--g-rule-faint);
}


.rec-report-world {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--g-1) var(--g-2);
	padding: var(--g-2);
	background: var(--g-hull-lo);
	box-shadow: var(--g-recess);
	border-left: 2px solid var(--g-rule);
}

.rec-report-world--you { border-left-color: var(--rec-you); }
.rec-report-world--rival { border-left-color: var(--rec-rival); }

.rec-report-world-head { display: flex; align-items: baseline; gap: var(--g-2); min-width: 0; flex-wrap: wrap; }
.rec-report-world-site { font-size: var(--g-size-micro); color: var(--g-ink-low); }

.rec-report-world-holds { display: inline-flex; align-items: baseline; gap: var(--g-1); font-family: var(--g-font-mono); font-variant-numeric: tabular-nums; font-size: var(--g-size-small); color: var(--g-ink-low); white-space: nowrap; }
.rec-report-figure .rec-report-hold--you { color: var(--rec-you); }
.rec-report-figure .rec-report-hold--rival { color: var(--rec-rival); }

.rec-report-world-who {
	font-family: var(--g-font-stencil);
	font-size: var(--g-size-micro);
	text-transform: uppercase;
	letter-spacing: var(--g-track-wide);
	color: var(--g-ink-mid);
}

.rec-report-world-creatures { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 2px; font-size: var(--g-size-micro); color: var(--g-ink-low); line-height: 1.5; }
.rec-report-world-side strong { font-family: var(--g-font-stencil); font-weight: 600; text-transform: uppercase; letter-spacing: var(--g-track-wide); margin-right: var(--g-1); }
.rec-report-world-side--you strong { color: var(--rec-you); }
.rec-report-world-side--rival strong { color: var(--rec-rival); }
.rec-report-hold-sep { font-family: var(--g-font-stencil); font-size: var(--g-size-micro); text-transform: uppercase; letter-spacing: var(--g-track-wide); color: var(--g-ink-low); padding: 0 2px; }
.rec-report-hold { color: var(--g-ink-low); font-weight: 400; }
.rec-report-hold--winner.rec-report-hold--you { color: var(--rec-you); font-weight: 600; }
.rec-report-hold--winner.rec-report-hold--rival { color: var(--rec-rival); font-weight: 600; }
.rec-report-world-creatures strong { font-weight: 600; color: var(--g-ink-mid); }

.rec-report-foot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g-2); }

.rec-report-figure {
	display: flex;
	flex-direction: column;
	gap: var(--g-1);
	padding: var(--g-2) var(--g-3);
	border: 1px solid var(--g-rule);
	background: var(--g-hull-lo);
}

.rec-report-figure-value { font-family: var(--g-font-mono); font-variant-numeric: tabular-nums; font-size: var(--g-size-lead); color: var(--g-ink); }
.rec-report-figure-label { font-family: var(--g-font-stencil); font-size: var(--g-size-micro); text-transform: uppercase; letter-spacing: var(--g-track-wide); color: var(--g-ink-low); }

.rec-report-decisive { margin: 0; color: var(--g-ink); }
.rec-report-actions { display: flex; gap: var(--g-2); }

@media (max-width: 1100px) {
	.rec-rivals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.rec-report-worlds { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
	.rec-rivals { grid-template-columns: minmax(0, 1fr); }
	.rec-resume { flex-wrap: wrap; }
	.rec-report-foot { grid-template-columns: minmax(0, 1fr); }
	.rec-masthead-rival { display: none; }
}

/* -------------------------------------------------------------------------
   THE WIDE CONSOLE (Nick, 2026-09-05: "too condensed")
   The site shell stops at 1320px, so on a 2500px monitor the table sat in the middle
   third of the screen at the type sizes tuned for a laptop. The match console now
   takes the width it is given, up to 1880px, and everything on it scales with the
   viewport: one factor, --rec-scale, drives the figures, the plinths, the bulbs, the
   lamps and the tray heights, and the type tokens are retuned in scope on wide
   screens the way --g-el retunes colour. Below 1440px nothing changes.
   ------------------------------------------------------------------------- */

.rec-console--match { --rec-scale: 1; }
.g-shell.rec-shell--match { max-width: 1880px; }

@media (min-width: 1440px) {
	/* width and height both have to afford the scale: a 1920 by 1080 screen is wide but
	   not tall, and the whole console (status, trays, bench) should still fit one screen */
	.rec-console--match { --rec-scale: clamp(1, min(calc(100vw / 1440px), calc(100vh / 900px)), 1.45); }
}

/* type, in scope: the small readouts are what read as condensed */
@media (min-width: 1700px) {
	.rec-console--match {
		--g-size-micro: 0.8125rem;
		--g-size-tiny: 0.875rem;
		--g-size-small: 1rem;
		--g-size-body: 1.125rem;
		--g-size-lead: 1.3125rem;
	}
	.rec-shell--match { gap: var(--g-4); padding: var(--g-4) var(--g-5) var(--g-5); }
	.rec-status { padding: var(--g-4) var(--g-5); gap: var(--g-3) var(--g-5); }
	.rec-sites { gap: var(--g-4); }
	.rec-site { padding: var(--g-4); gap: var(--g-3); }
	.rec-rank { gap: var(--g-3); }
	.rec-plinths { gap: var(--g-3); padding: var(--g-3); }
	.rec-body { gap: var(--g-4); }
	.rec-body:not(.rec-body--wide) { grid-template-columns: minmax(0, 1fr) minmax(340px, 440px); }
}

@media (min-width: 2200px) {
	.rec-console--match {
		--g-size-micro: 0.875rem;
		--g-size-tiny: 0.9375rem;
		--g-size-small: 1.0625rem;
		--g-size-body: 1.1875rem;
		--g-size-lead: 1.375rem;
	}
}

/* the figures on the trays and the plinths on the bench grow with the factor */
.rec-console--match .rec-piece-stage { --rec-piece: calc(56px * var(--rec-scale)); }
.rec-console--match .rec-figure { min-width: calc(96px * var(--rec-scale)); }
.rec-console--match .rec-plinth-art { width: calc(44px * var(--rec-scale)); height: calc(44px * var(--rec-scale)); }
.rec-console--match .rec-plinths { grid-auto-columns: minmax(calc(84px * var(--rec-scale)), 1fr); }
.rec-console--match .rec-lamp { width: calc(10px * var(--rec-scale)); height: calc(10px * var(--rec-scale)); }

/* the trays keep their proportion: the ranks and the seam grow with the width */
.rec-console--match .rec-sites { min-height: calc(340px * var(--rec-scale)); }
.rec-console--match .rec-site-floor .rec-site-midline { min-height: calc(72px * var(--rec-scale)); }
.rec-console--match .rec-rank { min-height: calc(96px * var(--rec-scale)); }

/* the bulbs: one step up per size on a wide screen so the meters stay legible */
.rec-console--match .rec-meter { --bulb-w: calc(4px * var(--rec-scale)); --bulb-h: calc(10px * var(--rec-scale)); }
.rec-console--match .rec-meter--chip { --bulb-w: calc(2px * var(--rec-scale)); --bulb-h: calc(6px * var(--rec-scale)); }
.rec-console--match .rec-meter--large { --bulb-w: calc(5px * var(--rec-scale)); --bulb-h: calc(13px * var(--rec-scale)); }

@media (max-width: 760px) {
	.rec-console--match .rec-meter--large { --bulb-w: 5px; --bulb-h: 12px; }
}

/* -------------------------------------------------------------------------
   LESS TEXT (Nick, 2026-09-05: "a lot of text, and a lot of it very small")
   The intro says the game in one sentence, then shows it: four phase glyphs with a
   word each, hold as three of the system's own meters, the fiction folded away. Rival
   plates carry a glyph, a name, a habit and a ladder of lamps. On the bench the read
   and stealthy marks are glyphs and the lead sentence is gone.
   ------------------------------------------------------------------------- */

.rec-glyph { width: 1em; height: 1em; display: inline-block; vertical-align: middle; }

.rec-intro-brief {
	display: flex;
	flex-direction: column;
	gap: var(--g-4);
	min-width: 0;
}

.rec-thesis {
	margin: 0;
	font-family: var(--g-font-stencil);
	font-size: var(--g-size-h3);
	line-height: 1.3;
	letter-spacing: 0.01em;
	color: var(--g-ink);
	max-width: 34ch;
	text-wrap: balance;
}

.rec-phases {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--g-2);
}

.rec-phase {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--g-1);
	padding: var(--g-3);
	background: var(--g-hull-lo);
	border: 1px solid var(--g-rule);
	box-shadow: var(--g-recess);
	min-width: 0;
}

.rec-phase-glyph { font-size: 28px; color: var(--g-brass-light); line-height: 1; }

.rec-phase-word {
	font-family: var(--g-font-stencil);
	font-size: var(--g-size-small);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--g-track-label);
	color: var(--g-ink);
}

.rec-phase-note { font-size: var(--g-size-small); color: var(--g-ink-mid); line-height: 1.35; }

.rec-hold-lesson {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	gap: var(--g-3);
	align-items: start;
	padding: var(--g-3);
	border: 1px solid var(--g-rule);
	background: var(--g-hull-lo);
	box-shadow: var(--g-recess);
}

.rec-hold-lesson-title {
	font-family: var(--g-font-stencil);
	font-size: var(--g-size-small);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--g-track-wide);
	color: var(--g-brass-light);
	padding-top: 2px;
}

.rec-hold-cases {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--g-2);
}

.rec-hold-case { display: flex; align-items: center; gap: var(--g-3); flex-wrap: wrap; }
.rec-hold-case-note { font-size: var(--g-size-small); color: var(--g-ink-mid); }

.rec-fiction { border-top: var(--g-hairline) solid var(--g-rule-faint); padding-top: var(--g-2); }

.rec-fiction-summary {
	cursor: pointer;
	font-family: var(--g-font-stencil);
	font-size: var(--g-size-tiny);
	text-transform: uppercase;
	letter-spacing: var(--g-track-wide);
	color: var(--g-ink-low);
	list-style: none;
}

.rec-fiction-summary::-webkit-details-marker { display: none; }
.rec-fiction-summary::before { content: '+'; display: inline-block; width: 1.2em; color: var(--g-brass-light); }
.rec-fiction[open] .rec-fiction-summary::before { content: '−'; }
.rec-fiction .rec-rules-screen { margin-top: var(--g-3); }

.rec-intro-against {
	font-family: var(--g-font-stencil);
	font-size: var(--g-size-tiny);
	text-transform: uppercase;
	letter-spacing: var(--g-track-wide);
	color: var(--g-ink-low);
	text-align: center;
}

.rec-rivals-ladder-note {
	font-family: var(--g-font-stencil);
	font-size: var(--g-size-tiny);
	text-transform: uppercase;
	letter-spacing: var(--g-track-wide);
	color: var(--g-ink-low);
}

.rec-rival { gap: var(--g-2); }
.rec-rival-glyph { font-size: 32px; color: var(--g-brass-light); line-height: 1; }
.rec-rival--chosen .rec-rival-glyph { color: var(--g-accent); }
.rec-rival-tag { font-size: var(--g-size-small); color: var(--g-ink-mid); }
.rec-rival-ladder { display: inline-flex; gap: 5px; margin-top: auto; padding-top: var(--g-2); }
.rec-rival-ladder .g-lamp { width: 9px; height: 9px; }
.rec-rival .rec-rival-record { margin-top: 0; padding-top: var(--g-1); border-top: none; font-size: var(--g-size-tiny); color: var(--g-ink-mid); }

.rec-plinth-mark--glyph { font-size: 14px; color: var(--g-ink-low); display: inline-flex; }
.rec-plinth-read { font-size: 14px; }

@media (max-width: 760px) {
	.rec-phases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rec-hold-lesson { grid-template-columns: minmax(0, 1fr); }
}

/* the intro takes the wide console's width and type as well */
.g-shell.rec-shell--intro { max-width: 1880px; }
@media (min-width: 1700px) {
	.rec-console--intro {
		--g-size-micro: 0.8125rem;
		--g-size-tiny: 0.875rem;
		--g-size-small: 1rem;
		--g-size-body: 1.125rem;
		--g-size-lead: 1.3125rem;
	}
	.rec-console--intro .rec-meter { --bulb-w: 5px; --bulb-h: 13px; }
	.rec-phase-glyph { font-size: 36px; }
	.rec-rival-glyph { font-size: 40px; }
	.rec-thesis { max-width: 40ch; }
}

/* -------------------------------------------------------------------------
   THE FRONT PANEL (Nick, 2026-09-05: "white space with small text")
   The intro is one panel across the full width: the thesis on top, three modules of
   equal weight (a round, hold, the Charter) side by side, the fiction folded under.
   Type steps up: notes are body size, labels tiny not micro, the thesis a heading.
   ------------------------------------------------------------------------- */

.rec-intro-panel {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-template-areas: 'thesis thesis thesis' 'round hold charter' 'fiction fiction fiction';
	gap: var(--g-5);
	padding: var(--g-5);
	align-items: stretch;
}

.rec-intro-panel .rec-thesis {
	grid-area: thesis;
	max-width: 60ch;
	font-size: var(--g-size-h2);
	line-height: 1.2;
}

.rec-module {
	display: flex;
	flex-direction: column;
	gap: var(--g-4);
	padding: var(--g-4);
	background: var(--g-hull-lo);
	border: 1px solid var(--g-rule);
	box-shadow: var(--g-recess);
	min-width: 0;
}

.rec-module--round { grid-area: round; }
.rec-module--hold { grid-area: hold; }
.rec-module--charter { grid-area: charter; }
.rec-intro-panel .rec-fiction { grid-area: fiction; }

.rec-module-title {
	margin: 0;
	font-family: var(--g-font-stencil);
	font-size: var(--g-size-tiny);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: var(--g-track-wide);
	color: var(--g-brass-light);
	padding-bottom: var(--g-2);
	border-bottom: var(--g-hairline) solid var(--g-rule-faint);
}

.rec-module-lead { margin: 0; font-size: var(--g-size-body); line-height: 1.45; color: var(--g-ink-mid); }

/* the round: four rows, glyph beside the words */
.rec-intro-panel .rec-phases {
	grid-template-columns: minmax(0, 1fr);
	gap: var(--g-3);
	flex: 1 1 auto;
}

.rec-intro-panel .rec-phase {
	flex-direction: row;
	align-items: center;
	gap: var(--g-4);
	padding: var(--g-3) var(--g-4);
	background: var(--g-hull);
}

.rec-intro-panel .rec-phase-glyph { font-size: 40px; flex: 0 0 auto; }
.rec-phase-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rec-intro-panel .rec-phase-word { font-size: var(--g-size-lead); }
.rec-phase-index { color: var(--g-ink-low); font-weight: 400; margin-right: var(--g-1); }
.rec-intro-panel .rec-phase-note { font-size: var(--g-size-body); }

/* hold: the three meters stacked with room */
.rec-intro-panel .rec-hold-cases { gap: var(--g-4); flex: 1 1 auto; justify-content: space-around; }
.rec-intro-panel .rec-hold-case { flex-direction: column; align-items: flex-start; gap: var(--g-2); }
.rec-intro-panel .rec-hold-case .rec-meter--large { --bulb-w: 7px; --bulb-h: 18px; --bulb-gap: 2px; --bank-gap: 6px; }
.rec-intro-panel .rec-hold-case-note { font-size: var(--g-size-body); color: var(--g-ink); }

/* the Charter: the figures large, the way in underneath */
.rec-module--charter .rec-charter-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--g-3); }
.rec-module--charter .rec-charter-figure { padding: var(--g-4) var(--g-3); background: var(--g-hull); }
.rec-module--charter .rec-charter-number { font-size: var(--g-size-readout); }
.rec-module--charter .rec-charter-label { font-size: var(--g-size-tiny); }
.rec-module--charter .rec-intro-actions { margin-top: auto; gap: var(--g-3); }
.rec-module--charter .rec-intro-mode { display: flex; justify-content: center; }
.rec-enter { font-size: var(--g-size-lead); padding: var(--g-4) var(--g-5); }
.rec-module--charter .rec-intro-against { font-size: var(--g-size-small); }

/* the rivals: plates with room and larger type */
.rec-rivals-panel { margin-top: var(--g-5); gap: var(--g-4); }
.rec-rival { padding: var(--g-4); gap: var(--g-3); min-height: 200px; }
.rec-rival-glyph { font-size: 44px; }
.rec-rival-name { font-size: var(--g-size-h3); }
.rec-rival-tag { font-size: var(--g-size-body); }
.rec-rival-ladder .g-lamp { width: 12px; height: 12px; }
.rec-rivals-title { font-size: var(--g-size-h2); }

@media (max-width: 1100px) {
	.rec-intro-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: 'thesis thesis' 'round hold' 'charter charter' 'fiction fiction'; }
}

@media (max-width: 760px) {
	.rec-intro-panel { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'thesis' 'charter' 'round' 'hold' 'fiction'; padding: var(--g-4); gap: var(--g-4); }
	.rec-intro-panel .rec-thesis { font-size: var(--g-size-h3); }
	.rec-intro-panel .rec-phase-glyph { font-size: 32px; }
	.rec-intro-panel .rec-hold-case .rec-meter--large { --bulb-w: 5px; --bulb-h: 13px; }
	.rec-rival { min-height: 0; }
}

/* -------------------------------------------------------------------------
   INSTRUMENTS, NOT PROSE (Nick, 2026-09-06: "build it all")
   The balance bar on every world's front line, the threat mark on a figure during
   Orders, initiative on the plinth, crowded ranks that shrink in steps, the next
   round on its own plate under the trays, and the first Proving's coach strip.
   ------------------------------------------------------------------------- */

/* the balance: rival from the left, you from the right, a preview hatched */
.rec-balance {
	position: relative;
	display: block;
	height: 10px;
	min-width: 0;
	align-self: center;
	background: var(--g-seam);
	border-radius: 2px;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8);
	overflow: hidden;
}

.rec-balance-fill { position: absolute; top: 0; bottom: 0; transition: width var(--g-move); }
.rec-balance-fill--theirs { left: 0; background: var(--rec-rival); }
.rec-balance-fill--mine { right: 0; background: var(--rec-you); }
.rec-balance-fill--ghost {
	background: repeating-linear-gradient(135deg, var(--rec-you) 0 3px, transparent 3px 6px);
	opacity: 0.8;
}

.rec-balance-word {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--g-font-stencil);
	font-size: var(--g-size-micro);
	text-transform: uppercase;
	letter-spacing: var(--g-track-wide);
	color: var(--g-ink-low);
	line-height: 1;
}

.rec-tally { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }

/* the threat mark on a figure during Orders */
.rec-figure-threat {
	font-family: var(--g-font-stencil);
	font-size: var(--g-size-micro);
	text-transform: uppercase;
	letter-spacing: var(--g-track-wide);
	padding: 0 4px;
	border-radius: 2px;
	color: var(--g-ink);
	background: var(--g-accent);
}
.rec-figure-threat--rout { background: var(--g-lamp-red); }
.rec-figure--threat-rout .rec-figure-plate { outline: 1px solid var(--g-lamp-red); }
.rec-figure--threat-stagger .rec-figure-plate { outline: 1px solid var(--g-accent); }

.rec-plan-threat { color: var(--g-accent); }
.rec-plan-threat--rout { color: var(--g-lamp-red); }

/* initiative on the plinth */
.rec-plinth-init { font-size: var(--g-size-micro); color: var(--g-ink-low); }
.rec-plinth-init::before { content: '\21E7'; margin-right: 2px; }

/* crowded ranks: five or more figures shrink in a step */
.rec-rank--crowded { gap: var(--g-1); }
.rec-rank--crowded .rec-figure { min-width: 68px; }
.rec-rank--crowded .rec-piece-stage { --rec-piece: 40px; }
.rec-rank--crowded .rec-figure-name { font-size: 0.5625rem; }
.rec-console--match .rec-rank--crowded .rec-piece-stage { --rec-piece: calc(40px * var(--rec-scale)); }
.rec-console--match .rec-rank--crowded .rec-figure { min-width: calc(68px * var(--rec-scale)); }

/* the next round on its own plate under the trays */
.rec-next-plate {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--g-2);
	padding: var(--g-1) var(--g-3);
	margin-top: calc(-1 * var(--g-1));
}

.rec-next-plate-label {
	font-family: var(--g-font-stencil);
	font-size: var(--g-size-micro);
	text-transform: uppercase;
	letter-spacing: var(--g-track-wide);
	color: var(--g-ink-low);
	margin-right: var(--g-1);
}

/* the status strip: score in the middle, round on the left, the turn on the right */
.rec-status { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }

/* the coach strip: three steps, the current one lit */
.rec-coach {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--g-3);
	padding: var(--g-2) var(--g-4);
	background: var(--g-hull-lo);
	border-left: 3px solid var(--g-accent);
	box-shadow: var(--g-recess);
}

.rec-coach-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--g-5); flex-wrap: wrap; }
.rec-coach-step { display: inline-flex; align-items: center; gap: var(--g-2); font-size: var(--g-size-small); color: var(--g-ink-low); }
.rec-coach-step--now { color: var(--g-ink); }
.rec-coach-step--done { text-decoration: line-through; }
.rec-coach-index {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 1px solid var(--g-rule);
	font-size: var(--g-size-micro);
}
.rec-coach-step--now .rec-coach-index { border-color: var(--g-accent); color: var(--g-accent); }
.rec-coach-dismiss { flex: 0 0 auto; }

@media (max-width: 760px) {
	.rec-coach { flex-direction: column; align-items: flex-start; }
	.rec-coach-steps { flex-direction: column; gap: var(--g-2); }
}

/* -------------------------------------------------------------------------
   THE DRAFT (2026-09-06): eighteen dealt, twelve kept, before the frame is entered.
   Cards are the bench's plinths with nine lamps, one per world of the Proving.
   ------------------------------------------------------------------------- */

.g-shell.rec-shell--draft { max-width: 1880px; display: flex; flex-direction: column; gap: var(--g-3); padding-bottom: var(--g-5); }
.rec-console--draft { height: auto; min-height: 100vh; overflow: visible; }

.rec-draft { display: flex; flex-direction: column; gap: var(--g-4); }

.rec-draft-head { display: flex; align-items: baseline; gap: var(--g-3); flex-wrap: wrap; }
.rec-draft-kicker {
	font-family: var(--g-font-stencil);
	font-size: var(--g-size-tiny);
	text-transform: uppercase;
	letter-spacing: var(--g-track-wide);
	color: var(--g-brass-light);
}
.rec-draft-heading {
	margin: 0;
	font-family: var(--g-font-stencil);
	font-size: var(--g-size-h2);
	text-transform: uppercase;
	letter-spacing: var(--g-track-label);
	color: var(--g-ink);
}
.rec-draft-count { font-size: var(--g-size-lead); color: var(--g-ink-mid); margin-left: auto; }

.rec-draft-worlds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--g-3); }
.rec-draft-round {
	display: flex;
	align-items: center;
	gap: var(--g-3);
	padding: var(--g-2) var(--g-3);
	background: var(--g-hull-lo);
	border: 1px solid var(--g-rule);
	box-shadow: var(--g-recess);
}
.rec-draft-round:first-child { border-color: var(--g-brass); }
.rec-draft-round-label {
	font-family: var(--g-font-stencil);
	font-size: var(--g-size-tiny);
	text-transform: uppercase;
	letter-spacing: var(--g-track-wide);
	color: var(--g-ink-low);
	flex: 0 0 auto;
}
.rec-draft-round-chips { display: flex; gap: var(--g-2); flex-wrap: wrap; }

.rec-draft-grid {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--g-3);
}

.rec-draft-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--g-2);
	padding: var(--g-3);
	background: var(--g-hull-lo);
	border: 2px solid var(--g-seam);
	border-radius: var(--g-radius);
	box-shadow: var(--g-recess);
	cursor: pointer;
	color: var(--g-ink);
	font: inherit;
	text-align: center;
	min-width: 0;
	transition: border-color var(--g-move), opacity var(--g-move);
}
.rec-draft-card:hover { border-color: var(--g-brass-dark); }
.rec-draft-card:focus-visible { outline: 2px solid var(--g-accent); outline-offset: 2px; }
.rec-draft-card--kept { border-color: var(--rec-you); }
.rec-draft-card:not(.rec-draft-card--kept) .rec-plinth-art { opacity: 0.6; }
.rec-draft-card .rec-plinth-art { width: 64px; height: 64px; }
.rec-draft-card .rec-plinth-name { font-size: var(--g-size-small); }

.rec-draft-lamps { display: flex; flex-direction: column; gap: 4px; }
.rec-draft-lamp-row { display: flex; gap: 4px; justify-content: center; }
.rec-draft-lamp-row .rec-lamp { width: 10px; height: 10px; }

.rec-draft-best { font-size: var(--g-size-small); color: var(--g-ink-mid); display: inline-flex; gap: var(--g-1); align-items: baseline; }
.rec-draft-best-planet { font-family: var(--g-font-stencil); font-size: var(--g-size-micro); text-transform: uppercase; letter-spacing: var(--g-track-wide); color: var(--g-ink-low); }
.rec-draft-stealthy { position: absolute; top: var(--g-2); right: var(--g-2); font-size: 14px; color: var(--g-ink-low); }

.rec-draft-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--g-3);
	padding: var(--g-3) var(--g-4);
	background: var(--g-hull-lo);
	border-left: 3px solid var(--g-accent);
	box-shadow: var(--g-recess);
	position: sticky;
	bottom: var(--g-2);
}
.rec-draft-lead { margin: 0; font-size: var(--g-size-body); color: var(--g-ink); }
.rec-draft-actions { display: flex; gap: var(--g-2); }

@media (max-width: 1100px) {
	.rec-draft-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.rec-draft-worlds { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
	.rec-draft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rec-draft-foot { flex-direction: column; align-items: stretch; }
}

/* the sound toggle in the masthead: a lamp and a word */
.rec-sound { display: inline-flex; align-items: center; gap: var(--g-2); padding: 2px var(--g-2); font-size: var(--g-size-micro); }
.rec-sound .g-lamp { width: 8px; height: 8px; }

/* the Loki line on the bench: a returned creature and the trailing seat's bonus pip */
.rec-plinth-tag--returned { color: var(--g-accent); }
.rec-send-pip--bonus { border-color: var(--g-accent); }

/* ===========================================================================
   THE NOTES — the Proving notes panel on the report (docs/design/
   game-validation-principles.md section 3, "the designer's own play, as
   data"). Three short-answer rows, a save action with a lamp confirmation,
   and a quiet export row. Sits inside .rec-report so it inherits its width
   and its won/lost accent; the panel itself only ever adds vertical rhythm.
   =========================================================================== */

.rec-notes {
	display: flex;
	flex-direction: column;
	gap: var(--g-3);
	padding: var(--g-4);
	background: var(--g-hull-lo);
	border-left: 3px solid var(--g-seam);
	box-shadow: var(--g-recess);
}
.rec-notes .g-kicker { margin: 0; }

.rec-notes-row {
	display: flex;
	flex-direction: column;
	gap: var(--g-2);
	min-width: 0;
}

.rec-notes-label {
	font-size: var(--g-size-small);
	color: var(--g-ink-mid);
}

.rec-notes-input { width: 100%; }

.rec-notes-earned { align-self: flex-start; }

.rec-notes-actions {
	display: flex;
	align-items: center;
	gap: var(--g-3);
}

.rec-notes-saved {
	display: inline-flex;
	align-items: center;
	gap: var(--g-2);
	font-size: var(--g-size-small);
	color: var(--g-ink-mid);
}
.rec-notes-saved .g-lamp { width: 8px; height: 8px; }

.rec-notes-export-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--g-3);
	flex-wrap: wrap;
}

.rec-notes-count {
	font-size: var(--g-size-micro);
	color: var(--g-ink-low);
}

.rec-notes-export {
	width: 100%;
	min-height: 120px;
	resize: vertical;
	font-size: var(--g-size-micro) !important;
	white-space: pre;
	overflow: auto;
}

@media (max-width: 390px) {
	.rec-notes { padding: var(--g-3); }
	.rec-notes-actions { flex-wrap: wrap; }
	.rec-notes-export-row { flex-direction: column; align-items: stretch; }
}

@media (max-width: 760px) {
	.rec-masthead { flex-wrap: wrap; row-gap: var(--g-1); }
	.rec-console--match .rec-masthead-rival { display: inline; font-size: var(--g-size-micro); }
}

/* ===========================================================================
   THE BASE (docs/design/reclamation-base-redesign.md, "Interface consequences")

   The adaptation pass, not the v4 immersive brief (assumption 16): the Orders
   panel is gone, every creature wears one role glyph beside its hold bulb, the
   ghost preview prints the arithmetic of a send, and a threat is a number. These
   are the only rules the adaptation needed that the table did not already have.
   Tokens only, no raw hex.
   =========================================================================== */

/* the role glyph: one stroke picture beside the bulb, in the element in scope,
   sized to sit under a figure's plate without changing its height */
.rec-role-glyph {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--g-el, var(--g-ink-mid));
}
.rec-role-glyph svg { width: 12px; height: 12px; }
.rec-figure--theirs .rec-role-glyph { color: var(--g-ink-mid); }
.rec-plinth-role svg { width: 13px; height: 13px; }
.rec-plinth-role { margin-left: var(--g-1); }

/* the threat read is a number now: how much this creature would lose, with the
   rout mark kept as it was */
.rec-figure-threat--amount {
	background: transparent;
	border: 1px solid var(--g-accent);
	color: var(--g-accent);
	font-family: var(--g-font-mono);
	font-variant-numeric: tabular-nums;
}
.rec-figure--threat-amount .rec-figure-plate { outline: 1px solid var(--g-accent); }

/* the ghost preview: the role in a sentence under the bulb, then the arithmetic
   of the send, one line each (advanced only) */
.rec-ghost-plan {
	flex: 1 0 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	text-align: center;
	max-width: 100%;
}
.rec-ghost-role {
	display: inline-flex;
	align-items: center;
	gap: var(--g-1);
	font-size: var(--g-size-micro);
	color: var(--g-ink);
}
.rec-ghost-role svg { width: 12px; height: 12px; color: var(--g-el, var(--g-ink)); }
.rec-ghost-line {
	font-family: var(--g-font-mono);
	font-variant-numeric: tabular-nums;
	font-size: var(--g-size-micro);
	color: var(--g-ink-mid);
}

/* the dossier: the role sentence where the act table used to be */
.rec-inspect-role {
	display: flex;
	align-items: center;
	gap: var(--g-2);
}
.rec-inspect-role-glyph { width: 18px; height: 18px; flex: 0 0 auto; color: var(--g-el, var(--g-ink)); }

/* the report's world rows: a role glyph before each creature's name */
.rec-report-creature {
	display: inline-flex;
	align-items: baseline;
	gap: 4px;
	margin-right: var(--g-2);
	white-space: nowrap;
}
.rec-report-creature .rec-role-glyph { align-self: center; color: var(--g-ink-mid); }
.rec-report-creature-hold {
	font-variant-numeric: tabular-nums;
	color: var(--g-ink-mid);
}
.rec-report-creature-fate {
	font-family: var(--g-font-stencil);
	font-size: var(--g-size-micro);
	text-transform: uppercase;
	letter-spacing: var(--g-track-wide);
	color: var(--g-lamp-red);
}
.rec-report-creature--none { color: var(--g-ink-low); }

@media (max-width: 390px) {
	.rec-ghost-line { display: none; }
	.rec-report-creature { white-space: normal; }
}

/* The bench's lead is now printed whenever a creature is lifted (the role sentence), not
   only when the sends run out, so it rides on its own line under the head rather than in
   a grid column that the actions squeeze to nothing. */
.rec-bench > .rec-bench-lead {
	margin: 0;
	padding: var(--g-2) var(--g-4) 0;
	color: var(--g-ink-mid);
}

/* the ghost's arithmetic sits over the open ground of a world, so it carries the hull
   behind it rather than reading through the figures */
.rec-ghost-plan {
	padding: 2px var(--g-2);
	border-radius: 2px;
	background: color-mix(in srgb, var(--g-hull-lo) 88%, transparent);
}

/* with the arithmetic under it the ghost outgrows the seam. It stays out of the flow (a
   tray whose height follows the pointer never settles), so instead the seam is given
   room whenever a plan is on the table: every tray carries a ghost at once while a
   creature is lifted, so the height changes with the lift, never with the hover */
.rec-site-floor .rec-site-midline:has(.rec-ghost-plan) { min-height: 136px; }
.rec-ghost-plan { background: transparent; }

/* -------------------------------------------------------------------------
   PASS 2: EVERY ATTRIBUTE A JOB
   (docs/design/reclamation-base-redesign.md, "Pass 2"). The vocabulary moved
   from rout/stagger to downed/hurt, the vanguard fall-back became the swift
   move, and the plinth and the dossier print the attribute lanes. The older
   class names (.rec-figure--threat-rout, .rec-figure-flash--stagger) are the
   console's own and are left where they are; what changed is the words.
   ------------------------------------------------------------------------- */

/* a threat that would down the creature: the same red the rout mark carried */
.rec-figure-threat--downed { background: var(--g-lamp-red); }
.rec-figure--threat-downed .rec-figure-plate { outline: 1px solid var(--g-lamp-red); }

/* the Ruling's recovery, flashed over the figure whose bulb just came back up */
.rec-figure-flash--recover { color: var(--g-brass-light); }

/* the swift move: one button per creature that may still move this round */
.rec-move-btn { display: inline-flex; align-items: center; gap: 4px; }
.rec-move-btn .rec-glyph { width: 14px; height: 14px; }

/* the attribute marks beside the speed number on a plinth */
.rec-plinth-lanes {
	display: inline-flex;
	gap: 3px;
	align-items: center;
	margin-left: 4px;
	color: var(--g-ink-low);
}
.rec-plinth-lane { display: inline-flex; }
.rec-plinth-lane .rec-glyph { width: 12px; height: 12px; }
.rec-plinth-lane--swift { color: var(--g-el); }
.rec-plinth-lane--willful { color: var(--g-brass-light); }

/* the dossier's Lanes block, and the same list on the intro */
.rec-lane-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.rec-lane {
	display: flex;
	align-items: baseline;
	gap: 5px;
	font-size: var(--g-size-tiny);
	color: var(--g-ink-mid);
}
.rec-lane-glyph { width: 12px; height: 12px; flex: 0 0 auto; align-self: center; color: var(--g-el); }
.rec-lane-text { flex: 1 1 auto; }
.rec-lane-word {
	font-family: var(--g-font-stencil);
	font-size: var(--g-size-micro);
	text-transform: uppercase;
	letter-spacing: var(--g-track-label);
	color: var(--g-ink);
	flex: 0 0 auto;
}
.rec-intro-lanes { gap: 5px; }
.rec-intro-lanes .rec-lane { flex-wrap: wrap; }

/* a downed creature in the roster and on the bench: the old routed paint */
.rec-slot-tag--downed { color: var(--g-lamp-red); }
.rec-plinth-tag--downed { color: var(--g-lamp-red); }

/* what a bolster gave back, beside the hold the Court counted */
.rec-report-creature-recovered {
	font-variant-numeric: tabular-nums;
	color: var(--g-brass-light);
}