/*
 * The menus: home, join, lobby, results.
 *
 * Everything before the lights go out. The in-race HUD lives in race-ui.css and
 * is deliberately untouched by this file.
 *
 * The old menus were a centred document card floating on a blur, which is a web
 * form and read like one. These are built as a pit wall instead: a dark command
 * rail top and bottom, instrument panels between them, and the circuit itself
 * left visible rather than blurred away. The layout fills the viewport and
 * never scrolls the page, because a race lobby that makes you scroll to see the
 * lap count is a settings page wearing a helmet.
 *
 * The typeface is the same Archivo used everywhere else, taken to its condensed
 * width for headings and labels. Timing towers and pit boards are condensed for
 * the same reason: it is how you fit a name and a number in one line and still
 * read it from a distance. One family, two voices, no second font to load.
 */

/* ─── Stage ─────────────────────────────────────────────── */

/*
 * These override `.screen` from race-ui.css, which centres a card on a blurred
 * scrim. Both are wrong here: the layout runs to the edges, and the circuit
 * behind it is the best thing on screen, so it is left sharp.
 */
.stage {
	padding: 0;
	overflow: hidden;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

.stage {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto;
	/* Without this the single implicit column takes the max-content width of
	   its widest child, and the rail's buttons dragged the whole stage 117px
	   past the right edge of a phone. */
	grid-template-columns: minmax(0, 1fr);
	/* The world stays visible. Only enough veil to hold the panels' contrast. */
	background:
		linear-gradient(180deg, rgba(12, 15, 20, 0.55) 0%, rgba(12, 15, 20, 0.18) 22%, rgba(12, 15, 20, 0.18) 72%, rgba(12, 15, 20, 0.6) 100%);
	overflow: hidden;
}

/* ─── Command rails ─────────────────────────────────────── */

.rail {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 0 clamp(16px, 2.2vw, 30px);
	min-height: 58px;
	background: var(--steel);
	color: #fff;
	border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.rail--foot {
	border-bottom: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.09);
	min-height: 74px;
	justify-content: space-between;
}

.rail-mark {
	display: flex;
	align-items: baseline;
	gap: 10px;
	white-space: nowrap;
}

.rail-mark b {
	font-stretch: var(--wd-display);
	font-weight: 800;
	font-size: 19px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* The one place the accent appears in the rail: a marker, like a pit board tab. */
.rail-mark::before {
	content: '';
	width: 4px;
	height: 22px;
	background: var(--accent);
	transform: skewX(-12deg);
}

.rail-title {
	font-stretch: var(--wd-display);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.52);
}

.rail-spacer { flex: 1; }

.rail-code {
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	padding: 7px 14px;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.12);
}

.rail-code .label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.45);
}

.rail-code .value {
	font-stretch: var(--wd-display);
	font-size: 20px;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/* Buttons sitting on the dark rail. */
.button--rail {
	min-height: 38px;
	padding: 0 16px;
	font-size: 13px;
	color: rgba(255, 255, 255, 0.9);
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 0;
}

.button--rail:hover { background: rgba(255, 255, 255, 0.16); }

.button--rail-danger:hover {
	background: rgba(217, 58, 34, 0.9);
	border-color: transparent;
	color: #fff;
}

/* ─── Panels ────────────────────────────────────────────── */

.stage-grid {
	display: grid;
	gap: clamp(10px, 1.1vw, 16px);
	padding: clamp(10px, 1.4vh, 18px) clamp(16px, 2.2vw, 30px);
	min-height: 0;
	/* Last resort only. Every size that matters fits, but a very short window
	   must scroll this one region rather than clip a button off the bottom. */
	overflow-y: auto;
}

/* Drivers, car, race. The car is the showcase, so it takes the space. */
/*
 * A column holding the drivers and the world, the car, and the race.
 *
 * A fourth column would squeeze all four. The roster is a short list with room
 * to spare underneath it and the race column is already full, so the world goes
 * with the drivers.
 */
.stage-grid--lobby {
	grid-template-columns: minmax(210px, 0.85fr) minmax(0, 1.55fr) minmax(300px, 1.05fr);
}

.panel-stack {
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto;
	gap: clamp(10px, 1.1vw, 16px);
	min-height: 0;
}

/* The world panel is as tall as its two settings, never taller. */
.panel-stack .panel[data-pane="world"] .panel-scroll { flex: 0 1 auto; }

.panel {
	display: flex;
	flex-direction: column;
	min-height: 0;
	padding: 16px 18px 18px;
	background: rgba(255, 255, 255, 0.97);
	border: 1px solid rgba(255, 255, 255, 0.6);
	box-shadow: 0 18px 44px rgba(10, 13, 19, 0.28);
	/* Cut corners: the cheapest honest way to say "instrument", and it echoes
	   the chamfers on the track barriers. */
	clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}

.panel-head {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 12px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--line);
}

.panel-head h2 {
	font-stretch: var(--wd-display);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0;
}

.panel-head .button--mini { margin-left: 10px; }

.panel-count {
	font-stretch: var(--wd-display);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--faint);
	margin-left: auto;
}

.panel-hint {
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--muted);
	margin: -4px 0 12px;
}

/* The only thing allowed to scroll, and only when the grid is full. */
.panel-scroll {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}

/* ─── Drivers ───────────────────────────────────────────── */

.roster {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.roster li {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 8px 10px;
	background: #f6f7f9;
	border-left: 3px solid transparent;
}

.roster li.is-you {
	background: #fff;
	border-left-color: var(--accent);
	box-shadow: inset 0 0 0 1px var(--line);
}

.roster .swatch {
	width: 11px;
	height: 11px;
	flex: none;
	border-radius: 2px;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}

/* The name is the point of the row: it takes the space, and the car label
   gives way before it does. */
.roster .who {
	flex: 1;
	min-width: 0;
	font-size: 13.5px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.roster .badge { flex: none; }

.roster .badge {
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
	border: 1px solid var(--line);
	padding: 1px 4px;
}

.roster .tag {
	flex: none;
	margin-left: auto;
	font-stretch: var(--wd-display);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--faint);
	white-space: nowrap;
}

.roster-empty {
	margin: 10px 2px 0;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--muted);
}

/* ─── Car showcase ──────────────────────────────────────── */

.car-stage {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* The class control sits above the strip it filters, and never grows. */
.car-stage .setting { flex: none; border-top: 0; padding-top: 0; }

/*
 * The car column: chrome at the ends, nothing in the middle.
 *
 * The opening has to have no surface behind it, and a parent's background
 * cannot be punched through, so the panel itself carries none and its two ends
 * carry their own.
 */
.panel--viewport {
	background: transparent;
	border: 0;
	box-shadow: none;
	clip-path: none;
	padding: 0;
	gap: clamp(8px, 0.9vw, 12px);
}

.viewport-top,
.viewport-foot {
	flex: none;
	padding: 14px 16px;
	background: rgba(255, 255, 255, 0.97);
	box-shadow: 0 18px 44px rgba(10, 13, 19, 0.28);
}

.viewport-top {
	clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}

.viewport-foot {
	padding-bottom: 10px;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}

.viewport-top .panel-head { margin-bottom: 10px; }
.viewport-top .setting { padding-bottom: 0; }
.viewport-foot .car-picker { padding-bottom: 0; }

/*
 * An opening in the panel, not a picture in it.
 *
 * The live world is already being drawn behind the lobby, with the chosen car
 * on the chosen circuit under the chosen sky, so the honest preview is to stop
 * covering it up. `Game.setPreview` aims the camera through this box.
 */
.car-hero {
	flex: 1;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	background: transparent;
	overflow: hidden;
	box-shadow: inset 0 0 0 1px rgba(23, 27, 34, 0.12);
}

/* Corner ticks, so the opening reads as a viewfinder rather than a hole. */
.car-hero::before,
.car-hero::after {
	content: '';
	position: absolute;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255, 255, 255, 0.75);
}

.car-hero::before { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.car-hero::after { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }

.car-hero img {
	position: relative;
	max-width: min(100%, 340px);
	max-height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 14px 18px rgba(16, 20, 28, 0.24));
}

.car-hero-name {
	position: absolute;
	left: 14px;
	bottom: 10px;
	color: #fff;
	text-shadow: 0 2px 10px rgba(8, 11, 17, 0.75);
	font-stretch: var(--wd-display);
	font-size: 26px;
	font-weight: 800;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	line-height: 1;
}

.car-hero-livery {
	position: absolute;
	right: 14px;
	bottom: 12px;
	color: #fff;
	text-shadow: 0 1px 8px rgba(8, 11, 17, 0.8);
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.car-hero-livery i {
	width: 14px;
	height: 14px;
	border-radius: 2px;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}

/* The strip runs past the edge; the fade says so without a scrollbar. */
.car-picker {
	display: flex;
	gap: 8px;
	flex: none;
	min-width: 0;
	max-width: 100%;
	overflow-x: auto;
	padding-bottom: 6px;
	mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%);
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%);
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.car-card {
	display: block;
	flex: none;
	width: 86px;
	padding: 0;
	font: inherit;
	background: #eef1f4;
	border: 1px solid transparent;
	cursor: pointer;
	scroll-snap-align: center;
	transition: border-color 0.14s, background 0.14s, transform 0.1s;
}

.car-card img {
	display: block;
	width: 100%;
	height: auto;
}

.car-card-name {
	display: block;
	padding: 3px 4px 5px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.car-card:hover { background: #e5e9ee; }
.car-card:active { transform: translateY(1px); }

.car-card[aria-pressed='true'] {
	background: #fff;
	border-color: var(--accent);
	box-shadow: inset 0 -3px 0 var(--accent);
}

.car-card[aria-pressed='true'] .car-card-name { color: var(--ink); }

/* ─── Race settings ─────────────────────────────────────── */

/*
 * Stacked, not side by side. The row version in race-ui.css put the label left
 * and the control right, which squeezed three track maps into a column narrow
 * enough to overlap them.
 */
.setting {
	display: block;
	padding: 9px 0;
	border-top: 1px solid var(--line);
}

.setting:first-child { border-top: 0; padding-top: 0; }

.setting .name {
	font-stretch: var(--wd-display);
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ink);
	margin-bottom: 3px;
}

.setting .detail {
	font-size: 12px;
	line-height: 1.4;
	color: var(--muted);
	margin-bottom: 8px;
}

.segmented {
	display: flex;
	gap: 3px;
	padding: 3px;
	background: #eef1f4;
	border: 0;
	border-radius: 0;
}

.segmented button {
	flex: 1;
	min-width: 36px;
	height: 32px;
	padding: 0 8px;
	font: inherit;
	font-stretch: var(--wd-display);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
	background: transparent;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	transition: background 0.14s, color 0.14s;
}

.segmented button:hover { color: var(--ink); background: rgba(255, 255, 255, 0.7); }

/*
 * Set, not urgent.
 *
 * Filling these with the accent put eight red elements on one panel and the
 * START button stopped being the loudest thing on screen. The accent is kept
 * for the two things you are choosing (car, circuit) and the one thing you do;
 * a setting that is merely current reads as ink.
 */
.segmented button[aria-pressed='true'] {
	color: #fff;
	background: var(--ink);
}

.setting > div:first-child { min-width: 0; }

/*
 * Label and control on one line, explanation full width beneath.
 *
 * Stacking every setting cost a row each and pushed "ends when" off the bottom
 * at 1280x720. Putting the sentence beside the control instead squeezed it into
 * a five-line ribbon, which was worse. This does both: the row is compact, and
 * the sentence still gets the width it needs.
 */
.setting--row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 14px;
}

/* Lets .name and .detail become grid items in their own right. */
.setting--row > div:first-child { display: contents; }

.setting--row .name { grid-column: 1; grid-row: 1; margin-bottom: 0; }
.setting--row .segmented { grid-column: 2; grid-row: 1; }

.setting--row .detail {
	grid-column: 1 / -1;
	grid-row: 2;
	margin: 5px 0 0;
}

/* Label above, control full width beneath, for controls whose options are
   words rather than numbers. */
.setting--wide .segmented { margin-top: 6px; }
.setting--wide .segmented button { min-width: 0; }

/* The compact action that lives in a panel head. */
.button--mini {
	min-height: 28px;
	padding: 0 11px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-stretch: var(--wd-display);
	background: #eef1f4;
	border: 0;
	border-radius: 0;
	color: var(--muted);
}

.button--mini:hover { background: #e2e6eb; color: var(--ink); }

.track-picker {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 6px;
}

.track-card {
	display: block;
	padding: 5px 5px 7px;
	font: inherit;
	text-align: left;
	background: #eef1f4;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background 0.14s, border-color 0.14s, transform 0.1s;
}

.track-card canvas {
	display: block;
	width: 100%;
	height: auto;
	background: #fff;
}

.track-card-name {
	display: block;
	margin-top: 4px;
	font-stretch: var(--wd-display);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.track-card-note {
	display: block;
	font-size: 10.5px;
	line-height: 1.25;
	color: var(--faint);
}

.track-card:hover { background: #e5e9ee; }
.track-card:active { transform: translateY(1px); }

.track-card[aria-pressed='true'] {
	background: #fff;
	border-color: var(--accent);
	box-shadow: inset 0 -3px 0 var(--accent);
}

.track-card[aria-pressed='true'] .track-card-name { color: var(--ink); }
.track-card:disabled { cursor: default; }

/* What a joiner sees where the host has controls: the card, not the panel. */
.race-summary {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.race-summary div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-top: 1px solid var(--line);
}

.race-summary div:first-child { border-top: 0; }

.race-summary dt {
	font-stretch: var(--wd-display);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--faint);
	margin: 0;
}

.race-summary dd {
	margin: 0;
	font-size: 13.5px;
	font-weight: 600;
	text-align: right;
}

/* ─── Primary action ────────────────────────────────────── */

.foot-note {
	font-size: 12.5px;
	color: rgba(255, 255, 255, 0.62);
	min-width: 0;
}

.foot-note b {
	display: block;
	font-stretch: var(--wd-display);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 2px;
}

.button--go {
	position: relative;
	min-height: 50px;
	padding: 0 40px;
	font-stretch: var(--wd-display);
	font-size: 17px;
	font-weight: 800;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--accent-ink);
	background: var(--accent);
	border: 0;
	border-radius: 0;
	overflow: hidden;
	/* Chamfered leading edge: it points the way the cars go. */
	clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px);
}

/* Hazard stripes, only on the button that starts a race. */
.button--go::after {
	content: '';
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(
		-58deg,
		rgba(255, 255, 255, 0.15) 0 8px,
		transparent 8px 20px
	);
	opacity: 0;
	transition: opacity 0.18s;
}

.button--go:hover { background: #c33420; }
.button--go:hover::after { opacity: 1; }
.button--go:disabled { opacity: 0.4; }

/* ─── Home and join ─────────────────────────────────────── */

.stage-grid--entry {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(340px, 400px);
	align-items: center;
	gap: clamp(20px, 4vw, 60px);
	padding-inline: clamp(20px, 5vw, 72px);
}

.entry-brand { color: #fff; max-width: 30ch; }

.entry-brand .eyebrow {
	font-stretch: var(--wd-display);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
	margin: 0 0 14px;
}

.entry-brand h1 {
	font-stretch: var(--wd-display);
	font-size: clamp(56px, 8.5vw, 116px);
	font-weight: 800;
	line-height: 0.86;
	letter-spacing: -0.005em;
	text-transform: uppercase;
	margin: 0;
	color: #fff;
	text-shadow: 0 10px 34px rgba(8, 10, 15, 0.45);
}

/* A pit-lane rule under the wordmark. */
.entry-rule {
	height: 5px;
	width: 128px;
	margin: 18px 0 16px;
	background: var(--accent);
	transform: skewX(-24deg);
}

.entry-brand .lede {
	font-size: 15px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.74);
	margin: 0;
	text-shadow: 0 2px 12px rgba(8, 10, 15, 0.5);
}

.entry-panel {
	padding: 26px 26px 24px;
	background: rgba(255, 255, 255, 0.97);
	box-shadow: 0 24px 60px rgba(8, 11, 17, 0.4);
	clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}

.entry-panel h2 {
	font-stretch: var(--wd-display);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin: 0 0 16px;
	color: var(--ink);
}

.entry-panel .room-code {
	margin-bottom: 18px;
	border-radius: 0;
	background: #eef1f4;
	border-color: transparent;
}

.entry-panel .room-code .value { font-stretch: var(--wd-display); }

.button--primary {
	border-radius: 0;
	font-stretch: var(--wd-display);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 800;
	clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%, 0 12px);
}

.stage .button { border-radius: 0; }

.stage .field > span {
	font-stretch: var(--wd-display);
	letter-spacing: 0.16em;
}

.stage input[type='text'] { border-radius: 0; }

/* ─── Panes on narrow screens ───────────────────────────── */

/*
 * Under 1000px the three panels become three tabs.
 *
 * A stacked column would scroll, and the whole point of this layout is that
 * nothing scrolls to reach a setting. One panel at a time is also how a console
 * lobby does it, so it reads as intended rather than as a broken desktop page.
 */
.pane-tabs { display: none; }

@media (max-width: 1000px) {

	.pane-tabs {
		display: flex;
		gap: 2px;
		padding: 8px clamp(16px, 2.2vw, 30px) 0;
	}

	.pane-tabs button {
		flex: 1;
		height: 40px;
		font: inherit;
		font-stretch: var(--wd-display);
		font-size: 12px;
		font-weight: 800;
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: rgba(255, 255, 255, 0.6);
		background: rgba(255, 255, 255, 0.08);
		border: 0;
		cursor: pointer;
	}

	.pane-tabs button[aria-pressed='true'] {
		color: #fff;
		background: var(--accent);
	}

	.stage-grid--lobby { grid-template-columns: minmax(0, 1fr); }

	/* One panel at a time, so the pair in the third column stop being a pair. */
	.panel-stack { display: contents; }

	.stage-grid--lobby .panel[data-pane]:not([data-active]) { display: none; }

	.stage-grid--entry {
		grid-template-columns: minmax(0, 1fr);
		align-content: center;
		gap: 22px;
	}

	.entry-brand { max-width: none; }
	.entry-brand .lede { display: none; }

}

@media (max-width: 620px) {

	/* Two short rows beat one row that does not fit. */
	.rail {
		min-height: 52px;
		gap: 8px;
		flex-wrap: wrap;
		padding-block: 8px;
	}

	.rail-spacer { display: none; }
	.rail-title { display: none; }
	.rail .button--rail { flex: 1; }
	.entry-brand h1 { font-size: clamp(44px, 14vw, 70px); }
	.rail--foot { flex-wrap: wrap; padding-block: 10px; }
	.button--go { width: 100%; }

}

/*
 * Anything short of a big desktop: the flavour lines go first.
 *
 *
 * Everything here is a sentence that makes a setting nicer to read rather than
 * possible to use, so losing it costs nothing and buys the room that keeps
 * "ends when" on screen. The consequence line, which people genuinely get
 * wrong, always stays.
 */
@media (max-height: 900px), (max-width: 1200px) {

	.detail--flavour { display: none; }

	/* The car each driver picked is already the whole middle panel. */
	.roster .tag { display: none; }

	/* Two more settings arrived with the computer opponents; the panel gives
	   up padding, and then thumbnail height, before it gives up showing one
	   of them. */
	.setting { padding: 5px 0; }
	.panel { padding: 11px 13px 13px; }
	.panel-head { margin-bottom: 7px; padding-bottom: 6px; }
	.track-card canvas { max-height: 56px; }
	.track-card-name { font-size: 10px; }
	.segmented { padding: 2px; }
	.segmented button { height: 26px; font-size: 11.5px; }
	.setting--wide .segmented { margin-top: 3px; }
	.setting .name { font-size: 11px; }

	.track-card canvas { max-height: 76px; object-fit: contain; }

}

/*
 * Very short windows: the wordmark goes so the form survives.
 *
 * At 400px tall the join panel's button was clipped by the stage, which is
 * worse than any amount of missing decoration.
 */
@media (max-height: 560px) {

	.entry-brand { display: none; }

	.stage-grid--entry { grid-template-columns: minmax(0, min(400px, 100%)); justify-content: center; }

	.entry-panel { padding: 18px; }

}

/* Short windows: give the rails less and the panels more. */
@media (max-height: 680px) {

	.rail { min-height: 50px; }
	.rail--foot { min-height: 62px; }
	.entry-brand h1 { font-size: clamp(48px, 7vw, 78px); }
	.panel { padding: 12px 14px 14px; }
	.panel-head { margin-bottom: 9px; padding-bottom: 8px; }

}

/* ─── Pause and disconnect ──────────────────────────────── */

/*
 * These stay centred modals, because that is what they are: the race is
 * suspended and one decision is in the way. They only borrow the language.
 */
.card {
	border-radius: 0;
	border: 0;
	clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}

.card h1 {
	font-stretch: var(--wd-display);
	font-size: 30px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.card .eyebrow { font-stretch: var(--wd-display); letter-spacing: 0.24em; }

/* ─── Results ───────────────────────────────────────────── */

.stage-grid--results {
	grid-template-columns: minmax(0, min(760px, 100%));
	justify-content: center;
}

/* Pushed right even when the note beside it is hidden, so the primary action
   keeps the same corner it has in the lobby. */
.foot-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}

/* The board is as tall as the result, not as tall as the window. */
.stage-grid--results { align-content: center; }
.stage-grid--results .panel { max-height: 100%; }
.stage-grid--results .panel-scroll { flex: 0 1 auto; }

.podium {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin-bottom: 12px;
}

.podium-slot {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 4px;
	padding: 16px 16px 14px;
	background: #f6f7f9;
	border-bottom: 4px solid var(--line);
	min-height: 120px;
}

.podium-slot[data-place='1'] {
	background: #fff;
	border-bottom-color: var(--accent);
	box-shadow: inset 0 0 0 1px var(--line);
}

.podium-place {
	font-stretch: var(--wd-display);
	font-size: 44px;
	font-weight: 800;
	line-height: 0.8;
	color: var(--faint);
}

.podium-slot[data-place='1'] .podium-place { color: var(--accent); }

.podium-name {
	font-size: 16px;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.podium-time {
	font-stretch: var(--wd-display);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--muted);
}

.classification {
	list-style: none;
	margin: 0;
	padding: 0;
}

.classification li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 10px;
	border-top: 1px solid var(--line);
	font-size: 13.5px;
}

.classification .pos {
	font-stretch: var(--wd-display);
	font-weight: 800;
	color: var(--faint);
	min-width: 22px;
}

.classification .who {
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.classification .time {
	margin-left: auto;
	font-stretch: var(--wd-display);
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--muted);
}

.classification li.is-you { background: #fff7f5; }

@media (prefers-reduced-motion: reduce) {

	.stage * { animation: none !important; }

}