/* New styling only. Never edit anything under assets/. */

/* Home page title. Keeps the recreation's Beckett face and colour, scaled up
   from the stock 4.5rem, with a headline underneath so the landing page says
   what the name does. */
.site-logo {
	font-size: clamp(64px, 8vw, 118px);
	line-height: 1.05;
}

/* .menu-subtitle indents 6rem to clear a stock-size title's first letter.
   At this size the title starts further left, so the headline follows it. */
.site-logo-sub {
	padding-left: 3.4rem;
	margin-top: 6px;
	/* Same gold BankGothic as .site-band, so the subtitle reads as part of the
	   same family as the section headings on the list screens. */
	font-family: BankGothic, sans-serif;
	font-size: 18px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: rgb(194, 162, 43);
}

.site-prose {
	font-family: Futura, Arial, Helvetica, sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: #d9dcd9;
	text-transform: none;
	letter-spacing: 0.2px;
}

.site-scroll {
	overflow-y: auto;
	max-height: 100%;
	padding: 0 40px;
}

/* BankGothic for headings matches .menu-option, the face the recreation
   already uses for labels. Beckett is reserved for .menu-title. */
.site-prose h2 {
	font-family: BankGothic, sans-serif;
	font-size: 20px;
	color: rgb(194, 162, 43);
	text-transform: uppercase;
	margin: 24px 0 4px;
	letter-spacing: 1px;
}

.site-prose p { margin: 0 0 8px; }

.site-prose ul { margin: 0 0 16px; padding-left: 20px; }

.site-prose li { margin-bottom: 6px; }

.site-prose a { color: rgb(194, 162, 43); }

/* Blog posts. .site-prose already covers h2 / p / ul / a; these are the
   elements only a written post reaches for. Capped at a readable measure,
   because full-width body text on a 1920px screen is unreadable. */
.site-post { max-width: min(68ch, var(--measure)); }

.site-prose h3 {
	font-family: BankGothic, sans-serif;
	font-size: 15px;
	color: #d9dcd9;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 18px 0 4px;
}

.site-prose ol { margin: 0 0 16px; padding-left: 22px; }

.site-prose strong { color: #fff; }

.site-prose code {
	font-family: Menlo, Consolas, monospace;
	font-size: 13px;
	color: rgb(214, 192, 110);
	background: rgba(0, 0, 0, .45);
	padding: 0 3px;
}

.site-prose pre {
	background: rgba(0, 0, 0, .55);
	border-left: 3px solid rgba(194, 162, 43, .6);
	padding: 10px 14px;
	overflow-x: auto;
	margin: 0 0 16px;
}

.site-prose pre code { background: none; padding: 0; color: #cfd3cf; }

.site-prose blockquote {
	margin: 0 0 16px;
	padding-left: 14px;
	border-left: 3px solid rgba(194, 162, 43, .45);
	color: rgba(217, 220, 217, .8);
	font-style: italic;
}

.site-prose hr {
	border: 0;
	border-top: 1px solid rgba(194, 162, 43, .3);
	margin: 24px 0;
}

/* Section headings shared by the weapons grid and the project bands, so the
   two list screens read as one family rather than two designs. */
.site-wgroup,
.site-band {
	font-family: BankGothic, sans-serif;
	font-size: 22px;
	color: rgb(194, 162, 43);
	text-transform: uppercase;
	letter-spacing: 2px;
	margin: 18px 0 10px;
}

.site-band:first-child { margin-top: 0; }

/* Save-slot rows used as a document list, on projects.html and the blog
   index. The recreation centres its list in the content area and sizes a row
   at 80% of the page split 40/60, which is right for a menu of six options
   and wrong for a list: one blog post landed dead centre of an empty screen.
   These rows start at the top, stretch to their column, and give the name
   side enough room that a real title does not wrap. */
.site-rows .menu-container {
	justify-content: flex-start;
	height: auto;
}

.site-rows .menu-option--datagame {
	width: 100%;
	align-self: stretch;
	margin-left: 0;
	margin-right: 0;
}

/* The right column carries a one-line description, not a right-aligned date,
   so it starts at a fixed left edge and reads as prose. Right-aligning a
   sentence leaves every row's first word at a different x, which is the one
   thing a scannable list cannot afford. */
.site-rows .menu-option--datagame-left { width: 38%; }

.site-rows .menu-option--datagame-right {
	width: 62%;
	justify-content: flex-start;
	align-items: center;
	font-family: Futura, Arial, Helvetica, sans-serif;
	font-size: 14px;
	letter-spacing: .3px;
	text-transform: none;
	color: rgba(217, 220, 217, .58);
	text-shadow: none;
}

/* Rows with no repo behind them are plain text, so they carry the colour the
   anchor would have given them and skip the pointer cursor. */
.site-row-static { color: rgb(74, 90, 107); }

/* Content-heavy pages. The recreation's 0.8 / 1.6 / 0.6 row split spends 27%
   of the viewport on a two-line header and leaves the content area shorter
   than the content, which is right for a six-item menu and wrong for a list
   of ten. .container sets overflow: hidden, so the excess is not scrolled
   past, it is invisible. */
.site-tall { grid-template-rows: 0.6fr 2.2fr 0.2fr; }

/* Experience roles. Title and org/date sit on one justified line so the page
   can be scanned down the left edge for what, and down the right edge for
   where and when, instead of read as prose. */
.site-role { margin: 0 0 22px; }

.site-role-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 4px 16px;
	border-bottom: 1px solid rgba(194, 162, 43, .28);
	padding-bottom: 4px;
	margin-bottom: 8px;
}

.site-prose .site-role-head h2 { margin: 0; }

.site-role-meta {
	font-family: Futura, Arial, sans-serif;
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: rgba(217, 220, 217, .62);
	white-space: nowrap;
}

.site-prose .site-role ul { margin-bottom: 0; }

.site-wlist {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 12px;
}

.site-wcard {
	background: rgba(0, 0, 0, 0.55);
	border: 1px solid rgba(194, 162, 43, 0.35);
	padding: 10px 12px 12px;
}

.site-wimg {
	display: block;
	height: 46px;
	width: auto;
	max-width: 100%;
	margin: 0 auto 6px;
	image-rendering: pixelated;
}

.site-wname {
	font-family: BankGothic, sans-serif;
	font-size: 14px;
	color: #d9dcd9;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 0 0 8px;
	text-align: center;
}

.site-wbar {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-bottom: 4px;
	font-family: Futura, Arial, sans-serif;
	font-size: 11px;
	color: rgba(217, 220, 217, 0.8);
}

.site-wbar-label { width: 34px; text-transform: uppercase; }
.site-wbar-val { width: 38px; text-align: right; }

.site-wbar-track {
	flex: 1;
	height: 8px;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(0, 0, 0, 0.6);
}

.site-wbar-fill { display: block; height: 100%; background: rgb(194, 162, 43); }

.site-wmeta {
	font-family: Futura, Arial, sans-serif;
	font-size: 11px;
	color: rgba(217, 220, 217, 0.6);
	margin: 6px 0 0;
	text-align: center;
}

/* Death screen for 404. Pricedown is the game's logo face and is already
   vendored in assets/menu/fonts/. */
.site-wasted {
	margin: 0;
	min-height: 100vh;
	background: #000;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: url("../vendor/menu/images/mouse.png"), auto;
}

.site-wasted-inner { text-align: center; padding: 20px; }

.site-wasted-word {
	font-family: "Pricedown Bl", Impact, sans-serif;
	font-size: clamp(64px, 18vw, 190px);
	line-height: 1;
	margin: 0;
	color: #8b0000;
	text-transform: uppercase;
	letter-spacing: 4px;
	text-shadow: 0 0 40px rgba(191, 36, 42, 0.55);
}

.site-wasted-sub {
	font-family: Futura, Arial, sans-serif;
	font-size: 16px;
	letter-spacing: 2px;
	color: rgba(217, 220, 217, 0.7);
	margin: 12px 0 28px;
}

.site-wasted-nav a {
	font-family: BankGothic, sans-serif;
	font-size: 22px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: rgb(194, 162, 43);
	text-decoration: none;
}

.site-wasted-nav a:hover { color: #fff; }

/* Map pins. .menu-content--map is a vendored class, so it is given position
   context here rather than by editing assets/. */
.menu-content--map { position: relative; }

.site-pin {
	position: absolute;
	transform: translate(-50%, -50%);
	z-index: 5;
}

.site-pin-icon {
	display: block;
	width: 22px;
	height: 22px;
	image-rendering: pixelated;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.9));
}

.site-pin-label {
	position: absolute;
	left: 28px;
	top: 50%;
	transform: translateY(-50%);
	white-space: nowrap;
	background: rgba(0, 0, 0, 0.82);
	border: 1px solid rgba(194, 162, 43, 0.5);
	padding: 5px 8px;
	font-family: Futura, Arial, sans-serif;
	font-size: 11px;
	line-height: 1.4;
	color: #d9dcd9;
	text-transform: none;
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s ease;
}

.site-pin:hover .site-pin-label { opacity: 1; }
.site-pin:hover { z-index: 6; }

/* Sitewide horizon line. sky.js sets --sky-top / --sky-bottom on :root from
   the game's timecyc.dat, so this strip warms at sunset and goes near-black at
   midnight. Falls back to the midday blue if the JSON never loads. */
:root { --sky-top: rgb(68, 117, 210); --sky-bottom: rgb(36, 117, 199); }

body::before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 9999;
	pointer-events: none;
	background: linear-gradient(90deg, var(--sky-top), var(--sky-bottom));
}


/* Champaign-Urbana map page. The frame locks the SVG's 1000x720 aspect ratio,
   because the personal pins are positioned as percentages of that viewBox. Let
   it letterbox and the pins drift off their real coordinates. */
.site-map {
	display: flex;
	align-items: stretch;
	justify-content: center;
	padding: 0 24px 10px;
	min-height: 0;
}

.site-map-frame {
	position: relative;
	width: 100%;
	max-width: 1100px;
	height: 100%;
	min-height: 320px;
	border: 4px solid rgb(124, 123, 123);
}

#map { position: absolute; inset: 0; }

/* Radar sprites as map markers. */
.site-marker {
	width: 26px;
	height: 26px;
	image-rendering: pixelated;
	border-radius: 50%;
	background: rgba(0, 0, 0, .6);
	box-shadow: 0 0 0 2px rgb(194, 162, 43);
	cursor: pointer;
}

.site-map-status {
	position: absolute;
	left: 10px;
	top: 10px;
	z-index: 2;
	margin: 0;
	padding: 5px 10px;
	background: rgba(0, 0, 0, .72);
	border: 1px solid rgba(194, 162, 43, .5);
	font-family: BankGothic, sans-serif;
	font-size: 12px;
	letter-spacing: 1px;
	color: rgb(194, 162, 43);
	text-transform: uppercase;
}

.maplibregl-popup-content {
	background: #0d1b1e;
	color: #d9dcd9;
	border: 1px solid rgba(194, 162, 43, .6);
	font-family: Futura, Arial, sans-serif;
	font-size: 12px;
	border-radius: 0;
}

.maplibregl-popup-tip { display: none; }

/* MapLibre's own controls ship white: white zoom buttons, a translucent white
   scale bar, a white attribution strip. Contrast inside each chip is fine
   (12:1 on the scale, 21:1 on the attribution), so this is not a contrast fix
   - the problem is small dark text in a bright box floating over a light map
   on an otherwise black page. Recoloured into the site's palette so they read
   as part of the frame instead of browser furniture. */
.maplibregl-ctrl-group {
	background: rgba(0, 0, 0, .78);
	border: 1px solid rgba(194, 162, 43, .5);
	border-radius: 0;
	box-shadow: none;
}

.maplibregl-ctrl-group button + button { border-top: 1px solid rgba(194, 162, 43, .3); }

.maplibregl-ctrl-group button {
	background: transparent;
	color: rgb(194, 162, 43);
}

.maplibregl-ctrl-group button:hover { background: rgba(194, 162, 43, .22); }

/* The +, - and compass glyphs are dark SVGs baked into maplibre-gl.css as
   data URIs, so they cannot be recoloured directly. Inverting the icon is
   what turns them light without touching the vendored stylesheet. */
.maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1); }

.maplibregl-ctrl-scale {
	background: rgba(0, 0, 0, .78);
	border: 1px solid rgba(194, 162, 43, .5);
	border-top: none;
	color: rgb(194, 162, 43);
	font-family: Futura, Arial, sans-serif;
	font-size: 11px;
	letter-spacing: .5px;
}

/* The compact attribution carries .maplibregl-compact as well, and the
   vendored rule for that pair is more specific than a single class, so a
   plain .maplibregl-ctrl-attrib override lost the background while still
   winning the colour: light text on the white box it failed to repaint.
   Both selectors are matched here so the pair cannot come apart. */
.maplibregl-ctrl-attrib,
.maplibregl-ctrl-attrib.maplibregl-compact {
	background: rgba(0, 0, 0, .72);
	border: 1px solid rgba(194, 162, 43, .35);
	border-radius: 0;
	font-family: Futura, Arial, sans-serif;
}

.maplibregl-ctrl-attrib,
.maplibregl-ctrl-attrib.maplibregl-compact,
.maplibregl-ctrl-attrib-inner,
.maplibregl-ctrl-attrib-inner a { color: rgba(217, 220, 217, .78); }

.maplibregl-ctrl-attrib-inner a:hover { color: rgb(194, 162, 43); }

/* The compact attribution toggle is the same baked-in dark SVG problem. */
.maplibregl-ctrl-attrib-button { filter: invert(1); }

/* Main-menu music player. Art only: no track name, no duration.
   radio_TPLAYER is SA's own Track Player sprite. Nothing autoplays.
   Single authoritative block: earlier edits left duplicate rules later in the
   file that silently won the cascade and shrank this to 44px. */
/* The player lives in #shell now, which survives every navigation so the
   track is never torn down. Controls still belong to the main menu only, so
   everywhere else it is hidden rather than absent: the audio keeps playing
   behind whatever page you are on. */
.site-player {
	position: fixed;
	left: 28px;
	bottom: 28px;
	z-index: 20;
	width: 112px;
	display: none;
}

body[data-section="main"] .site-player { display: block; }

.site-player-play {
	display: block;
	position: relative;
	width: 112px;
	height: 112px;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	line-height: 0;
	background: transparent;
	border: 0;
	cursor: inherit;
	overflow: hidden;
}

.site-player-art {
	display: block;
	width: 110px;
	height: 110px;
	image-rendering: pixelated;
	opacity: .85;
	transition: opacity .15s ease;
}

.site-player-play:hover .site-player-art { opacity: 1; }

.site-player-glyph {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	line-height: 1;
	color: #fff;
	background: rgba(0, 0, 0, .45);
	text-shadow: 0 2px 6px #000;
	opacity: 0;
	transition: opacity .15s ease;
}

.site-player-play:hover .site-player-glyph { opacity: 1; }

.site-player-bar {
	display: block;
	width: 112px;
	box-sizing: border-box;
	margin-top: 7px;
	height: 5px;
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(0, 0, 0, .8);
	cursor: inherit;
}

.site-player-fill {
	display: block;
	height: 100%;
	width: 0;
	background: rgb(194, 162, 43);
}

/* --- Corner art collision guard -------------------------------------------
   .menu-image is a 512x512 panel pinned to the viewport's top-right corner and
   painted above page content. Any text that reaches that corner is hidden
   underneath it: missions.html was silently losing the end of several lines.

   This reserves the column once, for the header and for every scrolling prose
   block, so the collision cannot happen on any page, including pages added
   later. Fixing it here rather than in missions.html is the whole point. */
/* --corner-run is how far the art reaches past the top of the prose block:
   the art is 512px tall and the header above the prose is roughly 210px. */
:root { --corner-art: 512px; --corner-gap: 40px; --corner-run: 300px; }

/* The header sits alongside the art for its whole height, so it reserves the
   column outright. */
.menu-header {
	padding-right: calc(var(--corner-art) + var(--corner-gap));
	box-sizing: border-box;
}

/* Prose only needs to clear the art where the art actually is. A float spacer
   makes text wrap around the top-right corner and then reclaim the full width
   underneath, instead of surrendering the column for the entire page. */
.site-prose::before {
	content: "";
	float: right;
	width: calc(var(--corner-art) + var(--corner-gap));
	height: var(--corner-run);
	shape-outside: inset(0);
}

.site-prose > * { min-width: 0; }

/* --measure is the widest a block can be and still clear the art at every
   height, so anything capped to it never needs the float spacer. Two ways to
   clear the same art: the float, for blocks that should reclaim the full
   width lower down, and this, for blocks whose right edge must stay put.
   Prose wants the second. A block that establishes its own formatting
   context (the flex role heads) shrinks beside the float and then jumps back
   to full width once past it, which left the role metadata ragged. */
:root { --measure: calc(100% - var(--corner-art) - var(--corner-gap)); }

.site-measure { max-width: var(--measure); }

.site-measure::before,
.site-post::before { content: none; }

/* The recreation never styled this class, so it fell through to the browser
   default and rendered as unstyled serif flush to the left edge. */
.menu-footer-message {
	font-family: Futura, Arial, Helvetica, sans-serif;
	font-size: 12px;
	letter-spacing: 1px;
	color: rgba(217, 220, 217, .55);
	text-transform: none;
	margin: 0;
	padding: 0 40px 6px;
}

/* Narrow viewports: a fixed 512px panel would swallow the page, so it scales
   down and the reservation follows it rather than being hard-coded. */
@media (max-width: 1180px) {
	:root { --corner-art: 300px; --corner-run: 180px; }
	.menu-image { width: 300px; height: 300px; background-size: contain; }
}

@media (max-width: 820px) {
	:root { --corner-art: 0px; --corner-gap: 24px; --corner-run: 0px; }
	.menu-image { display: none; }
}

/* Layer 2 of the corner-art guard.
   The float above only helps flowing text; floats do not affect grid items, so
   a card grid like the weapons page could still slide under the art. Content
   is given a stacking context above the art so it can never be hidden by it,
   and cards carry an opaque background so they stay readable where they do
   overlap. Decorative art should lose to content, always. */
.menu-image { z-index: 0; }

.menu-header,
.menu-content { position: relative; z-index: 1; }

/* The footer has to sit above .menu-content, not just above the art.
   .menu-option--back is absolutely positioned 40px off the bottom, and the
   content row's box reaches far enough down that its top half was covered by
   .menu-content's invisible box the moment that box got a stacking context
   above it. The link looked fine and ignored roughly half the hovers.
   Positioning the footer also gives that absolute link a containing block,
   which lands in the same place: the footer row already ends at the viewport
   bottom, so bottom: 40px / right: 80px resolve identically. */
.menu-footer { position: relative; z-index: 2; }

/* A one-line-tall hit area on a 24px link is a small target that the pointer
   leaves on any vertical drift. The padding is inside the link, so it grows
   what is clickable without moving the text. */
.menu-option--back > a,
.menu-option--back-left > a {
	display: inline-block;
	padding: 8px 12px;
	margin: -8px -12px;
}

.site-wcard { background: rgba(0, 0, 0, .88); }