/* board-design.css — the in-game end-of-race board, reproduced exactly.
   (2026-08-24)

   WHY: screenshot-basic captures only the client's GAME render target, so the
   results board (a NUI/CEF overlay) can NEVER appear in a screenshot. The
   board therefore has to be RE-RENDERED from race_history rather than
   photographed. This file is a faithful port of raycin_races'
   html_v3/css/screen-race.css:466-619 so the web board is visually identical
   to the one players see in game.

   PORTING NOTES (verified against the running resource, not assumed):
   - The tokens below are the RESOLVED values from html_v3/design-tokens.css.
   - Sizes are pinned to their 1080p values. In game the type scale is
     clamp(min, Nvh, max); at 1080p every one of these clamps lands on its
     MIN, so the fixed px below ARE what players see. Pinning them also stops
     the board resizing with the browser window, which the game never does.
   - "bankgothic" is a misnomer inherited from the game: the file's name table
     says "Angela Love Sans Italic" (Fargun Studio). That IS the gold italic
     script in the title and position numbers — the italic look comes from the
     font itself, so do NOT add font-style:italic here.
   - --cr-font-mono declares JetBrains Mono in game but the font is never
     loaded, so TIME/BEST LAP actually render in Courier New. Reproduced
     as-is, deliberately.
   - No box-shadow and no backdrop-filter: both are absent in game on purpose
     (CEF draws a rectangular halo around the rounded panel).

   Everything is scoped under .rvs-board so it cannot touch the WP theme. */

@font-face {
	font-family: "rvs-bankgothic";
	src: url("fonts/bankgothic.otf") format("opentype");
	font-display: swap;
}

.rvs-board-stage {
	/* The game board floats over the world; on a white page it needs its own
	   dark ground or the panel's translucency reads as a mistake. */
	--rvsb-gold: #f6c90e;
	--rvsb-gold-dim: rgba(246, 201, 14, 0.12);
	--rvsb-gold-border: rgba(246, 201, 14, 0.35);
	--rvsb-surface: #161b22;
	--rvsb-border: #30363d;
	--rvsb-text: #e6edf3;
	--rvsb-muted: #656d76;
	--rvsb-green: #3fb950;
	--rvsb-ai: #7aa2f7;

	--rvsb-font-body: "Exo 2", system-ui, sans-serif;
	--rvsb-font-display: "rvs-bankgothic", "Exo 2", sans-serif;
	--rvsb-font-mono: "Courier New", Courier, monospace;

	display: flex;
	justify-content: center;
	padding: 32px 16px;
	background: radial-gradient(ellipse at 50% 0%, #1c2430 0%, #0b0e13 70%);
	border-radius: 16px;
	overflow-x: auto;   /* narrow screens scroll the board, never the page */
}

/* ── The panel ─────────────────────────────────────────────────────── */
.rvs-board {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 900px;
	padding: 16px;
	background: linear-gradient(155deg, rgba(34, 40, 48, 0.92) 0%, rgba(22, 27, 34, 0.92) 100%);
	border: 1px solid rgba(246, 201, 14, 0.20);
	border-radius: 24px;
	font-family: var(--rvsb-font-body);
	color: var(--rvsb-text);
	line-height: 1.4;
}

.rvs-board-title {
	text-align: center;
	font-family: var(--rvsb-font-display);
	font-size: 24px;
	color: var(--rvsb-gold);
	letter-spacing: 0.04em;
	margin-bottom: 8px;
}

/* ── Grid: header + rows share one column template ─────────────────── */
.rvs-board-header,
.rvs-board-row {
	display: grid;
	grid-template-columns: 50px 1fr 1fr 110px 110px 70px;
	gap: 8px;
	align-items: center;
	padding: 8px 12px;
	font-size: 15.2px;
}
/* Pit-stop races add one column, exactly as in game. */
.rvs-board.has-pit .rvs-board-header,
.rvs-board-row.has-pit {
	grid-template-columns: 50px 1fr 1fr 110px 110px 70px 54px;
}

.rvs-board-header {
	font-size: 13.6px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--rvsb-muted);
	border-bottom: 1px solid var(--rvsb-border);
}

.rvs-board-row {
	background: var(--rvsb-surface);
	border: 1px solid transparent;
	border-radius: 10px;
	color: var(--rvsb-text);
}
.rvs-board-row.is-dnf { opacity: 0.55; }

/* CASCADE GUARD — do not remove. The WP theme (dark.css) carries a direct
   `p, li, td, th, label, span { color: var(--text) }` rule, and a direct
   declaration beats INHERITANCE no matter how specific the ancestor's rule
   is. Every cell in this board is a <span>, so without these the header
   labels, player names, vehicles and times all silently take the theme's
   colour instead of the board's. Set the colour on the cell, never on the
   row alone. */
.rvs-board-header > span { color: var(--rvsb-muted); }
.rvs-board-row > span    { color: var(--rvsb-text); }

/* These carry TWO classes so they outrank the `.rvs-board-row > span` guard
   above — a single class would tie on specificity and lose on source order,
   turning the gold positions and green points back into body text. */
.rvs-board-row > .rvs-board-pos {
	font-family: var(--rvsb-font-display);
	font-size: 20.8px;
	color: var(--rvsb-gold);
	text-align: center;
}
.rvs-board-row > .rvs-board-time {
	font-family: var(--rvsb-font-mono);
	color: var(--rvsb-text);
	text-align: right;
}
.rvs-board-row > .rvs-board-pts {
	font-weight: 700;
	text-align: right;
	color: var(--rvsb-green);
}

/* Cells that must not blow the grid open on long names/vehicles. */
.rvs-board-name,
.rvs-board-veh {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ── Pit-compliance column ─────────────────────────────────────────── */
.rvs-board-pit-hdr { text-align: center; color: #e8a020; }
.rvs-board-pit-ok   { display: block; text-align: center; font-size: 1.05rem; font-weight: 700; color: var(--rvsb-green); }
.rvs-board-pit-miss { display: block; text-align: center; font-size: 0.85rem; font-weight: 700; color: #e74c3c; }
.rvs-board-pit-na   { display: block; text-align: center; color: var(--rvsb-muted); }

/* ── AI quote + footer ─────────────────────────────────────────────── */
.rvs-board-ai-quote {
	font-size: 15.2px;
	font-style: italic;
	color: var(--rvsb-ai);
	text-align: center;
	padding: 4px 10px 6px;
}
.rvs-board-footer {
	font-size: 13.6px;
	color: var(--rvsb-muted);
	text-align: center;
	letter-spacing: 0.03em;
	padding-top: 4px;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.rvs-board-footer a { color: var(--rvsb-gold); text-decoration: none; border-bottom: 1px dotted rgba(246, 201, 14, 0.5); }
.rvs-board-footer a:hover { border-bottom-style: solid; }
/* The route-map link sits on its OWN line. Inline, it ran straight into the
   meta text and "FINAL RESULTS · Elysian ·" read as a single label — as if
   the track name were describing the results rather than being a link. */
.rvs-board-footer-map { display: block; margin-top: 5px; }

/* ── Page furniture around the board (web only — no game equivalent) ── */
.rvs-board-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	justify-content: center;
	margin: 16px 0 0;
}
.rvs-board-meta {
	text-align: center;
	color: #656d76;
	font-size: 0.9em;
	margin-top: 10px;
}
.rvs-print-host { display: block; }
.page-sub { color: #8d96a0; font-size: 13px; margin: 6px 0 0; }

/* Human-vs-AI gap column: who actually holds the faster lap. */
.rvs-gap-ai     { color: #7aa2f7; }   /* AI is faster */
.rvs-gap-human  { color: #3fb950; }   /* the human record still stands */

/* ── Print: the board alone, at full fidelity ──────────────────────── */
/* This is the pixel-exact PDF route — the browser embeds the real fonts,
   which jsPDF cannot do (its font loader takes TTF, and the display face is
   OTF/CFF). */
@media print {
	body > *:not(.rvs-print-host) { display: none !important; }
	.rvs-print-host,
	.rvs-print-host * { visibility: visible; }
	.rvs-print-host {
		position: absolute;
		inset: 0;
		display: block !important;
		margin: 0;
		padding: 0;
	}
	.rvs-board-actions,
	.rvs-secnav,
	.rvs-board-meta { display: none !important; }
	.rvs-board-stage {
		padding: 0;
		border-radius: 0;
		background: #0b0e13;
		/* Colour-critical: without this most browsers drop the dark ground
		   and the gold-on-dark text prints as gold-on-white. */
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
	.rvs-board {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
	@page { size: A4 landscape; margin: 10mm; }
}

/* ── Narrow screens ────────────────────────────────────────────────── */
/* The board keeps its 900px geometry (that IS the design) and the stage
   scrolls it horizontally, so the page body never scrolls sideways. */
@media (max-width: 940px) {
	.rvs-board-stage { padding: 16px 12px; }
}

/* ── Hover preview of a race's result board ────────────────────────────── */
/* Shown from the Race Results list. The card contains a REAL renderBoard()
   render, scaled down — not a mock-up — so what you preview is exactly what
   opening the row gives you. Mirrors the .rvs-track-preview pattern in
   stats.css: one shared floating element, delegated listeners, edge-aware
   positioning. */
.rvs-rp {
	position: absolute;
	z-index: 9999;
	width: 580px;
	max-width: calc(100vw - 16px);
	background: #12141c;
	border: 1px solid #30363d;
	border-radius: 12px;
	padding: 12px;
	box-shadow: 0 10px 34px rgba(0, 0, 0, .55);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity .12s, transform .12s;
	pointer-events: none;   /* never steals the click from the row button */
}
.rvs-rp.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }

.rvs-rp-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 9px;
}
.rvs-rp-title { font-weight: 700; color: #e6edf3; font-size: 13px; }
.rvs-rp-meta  { color: #656d76; font-size: 11px; white-space: nowrap; }

/* The scaled board. Height is set in JS from the real rendered height, since
   it depends on the driver count. */
.rvs-rp-scale { overflow: hidden; border-radius: 10px; }
.rvs-rp-scale > .rvs-board-stage {
	transform-origin: top left;
	padding: 0;
	border-radius: 0;
	display: block;          /* the stage centres with flex at full size */
	overflow: visible;       /* no scrollbar inside a preview */
	width: 900px;            /* the board's own design width, then scaled */
}

.rvs-rp-note {
	margin: 9px 2px 0;
	font-size: 11.5px;
	line-height: 1.5;
	color: #8d96a0;
}
.rvs-rp-note strong { color: #f6c90e; font-weight: 700; }

/* Coarse pointers get no hover preview — the tap opens the page instead.
   Narrow windows too: keep this breakpoint in step with RP_MIN_VW in
   stats-app.js, which is what actually suppresses the card. */
@media (hover: none) { .rvs-rp { display: none; } }
@media (max-width: 759px) { .rvs-rp { display: none; } }