/* Starsplit — the game's own palette (scripts/view/pal.gd), so the site and the app
   read as one place. Nothing here is invented: SPACE, PANEL, PANEL_EDGE, TEXT, MUTED, GOLD. */
:root {
	--space:  #0b0d1e;
	--panel:  #151936;
	--edge:   #232853;
	--text:   #e9ecff;
	--muted:  #8a93cf;
	--gold:   #f7c948;

	--display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
	--body:    "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
	--mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;

	--measure: 34rem;
	--gutter:  clamp(1.25rem, 5vw, 2.5rem);
}

* { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--space);
	color: var(--text);
	font-family: var(--body);
	font-size: 1.0625rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

/* The sky, the same way the game builds it: a lifted top settling to space. Not a
   decorative gradient — it is Pal.SKY, chapter one, the colour the game was designed against. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	background:
		radial-gradient(120% 80% at 50% -20%, #232a5e 0%, transparent 60%),
		radial-gradient(80% 50% at 80% 10%, #1a2050 0%, transparent 70%);
	pointer-events: none;
	z-index: 0;
}

.page {
	position: relative;
	z-index: 1;
	max-width: 62rem;
	margin: 0 auto;
	padding: 0 var(--gutter) 6rem;
}

/* --- masthead ------------------------------------------------------------- */

.masthead {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	padding: 2rem 0 0;
}

.wordmark {
	font-family: var(--display);
	font-weight: 700;
	font-size: 1.25rem;
	letter-spacing: -0.02em;
	color: var(--text);
	text-decoration: none;
}

.wordmark span { color: var(--gold); }

.nav {
	display: flex;
	gap: 1.5rem;
	font-family: var(--mono);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.nav a {
	color: var(--muted);
	text-decoration: none;
	padding-bottom: 2px;
	border-bottom: 1px solid transparent;
}

.nav a:hover,
.nav a[aria-current="page"] {
	color: var(--text);
	border-bottom-color: var(--gold);
}

/* --- hero ----------------------------------------------------------------- */

.hero { padding: clamp(3rem, 12vw, 7rem) 0 0; }

.eyebrow {
	font-family: var(--mono);
	font-size: 0.75rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gold);
	margin: 0 0 1.25rem;
}

h1 {
	font-family: var(--display);
	font-weight: 800;
	font-size: clamp(2.75rem, 9vw, 5.25rem);
	line-height: 0.95;
	letter-spacing: -0.035em;
	margin: 0 0 1.5rem;
	/* `ch` on a 44px display face is wider than a phone, and a max-width that exceeds the
	   viewport pushes the whole column sideways — the headline is not the only thing that
	   ends up clipped. Cap it against the container as well as the measure. */
	max-width: min(16ch, 100%);
	overflow-wrap: break-word;
}

.lede {
	font-size: clamp(1.125rem, 2.2vw, 1.375rem);
	line-height: 1.5;
	color: var(--muted);
	max-width: var(--measure);
	margin: 0;
}

/* --- the four splits: the signature ---------------------------------------
   Drawn the way SplitPopup draws them in the game — as the FOOTPRINT each one
   clears on a little grid, not as a picture of its two ingredients. A player
   should not have to read a combo table to know what a move does. */

.splits {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
	gap: clamp(1rem, 3vw, 2rem);
	margin: clamp(3rem, 9vw, 5.5rem) 0 0;
	padding: 0;
	list-style: none;
}

.split { margin: 0; }

.grid {
	display: grid;
	grid-template-columns: repeat(9, 1fr);
	gap: 2px;
	aspect-ratio: 1;
	padding: 6px;
	background: var(--panel);
	border: 1px solid var(--edge);
	border-radius: 10px;
}

.cell {
	border-radius: 1.5px;
	background: #1d2247;
}

.cell.lit {
	background: var(--gold);
	box-shadow: 0 0 6px rgba(247, 201, 72, 0.55);
}

/* The one orchestrated moment: each footprint lights in a short sweep, staggered
   per cell from the centre out, so you read the SHAPE arriving rather than a state. */
@media (prefers-reduced-motion: no-preference) {
	.cell.lit {
		animation: ignite 0.5s cubic-bezier(0.2, 0.8, 0.3, 1) backwards;
		animation-delay: var(--d, 0s);
	}
}

@keyframes ignite {
	from { background: #1d2247; box-shadow: none; transform: scale(0.7); }
	to   { transform: scale(1); }
}

.split h2 {
	font-family: var(--display);
	font-weight: 700;
	font-size: 1.0625rem;
	letter-spacing: -0.01em;
	margin: 0.9rem 0 0.15rem;
}

.split p {
	font-family: var(--mono);
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0;
}

.splits-note {
	max-width: var(--measure);
	color: var(--muted);
	margin: 2.25rem 0 0;
}

.splits-note strong { color: var(--text); font-weight: 600; }

/* --- plain sections ------------------------------------------------------- */

.section { padding: clamp(3.5rem, 10vw, 6rem) 0 0; }

/* Display type sets its own leading. Inheriting the body's 1.65 leaves a two-line heading
   reading as two unrelated lines rather than one phrase. */
.section h2 {
	font-family: var(--display);
	font-weight: 700;
	font-size: clamp(1.5rem, 4vw, 2.125rem);
	line-height: 1.08;
	letter-spacing: -0.025em;
	margin: 0 0 1.25rem;
	max-width: min(20ch, 100%);
}

/* A section carrying more than one heading needs air above the later ones. Done here rather
   than with an inline margin at each call site, which is how a stylesheet stops being the
   place the spacing lives. */
.section h2:not(:first-child) { margin-top: 2.5rem; }

.section h3 {
	font-family: var(--display);
	font-weight: 700;
	font-size: 1.125rem;
	line-height: 1.3;
	letter-spacing: -0.01em;
	margin: 2.25rem 0 0.5rem;
}

.section p,
.section li { max-width: var(--measure); }

.section p { margin: 0 0 1rem; }

.section ul { padding-left: 1.1rem; margin: 0 0 1rem; }

.section li { margin-bottom: 0.4rem; }

.muted { color: var(--muted); }

a { color: var(--gold); }

a:focus-visible,
.nav a:focus-visible,
.wordmark:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 3px;
	border-radius: 2px;
}

/* --- facts strip ---------------------------------------------------------- */

.facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	gap: 1px;
	background: var(--edge);
	border: 1px solid var(--edge);
	border-radius: 12px;
	overflow: hidden;
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
}

.facts li {
	background: var(--panel);
	padding: 1.25rem 1.25rem 1.4rem;
	margin: 0;
	max-width: none;
}

.facts dt,
.fact-key {
	font-family: var(--mono);
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
	display: block;
	margin-bottom: 0.35rem;
}

.fact-val {
	font-family: var(--display);
	font-weight: 700;
	font-size: 1.25rem;
	letter-spacing: -0.015em;
	display: block;
}

/* --- the collection table (privacy) --------------------------------------- */

.collect {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5rem 0 0;
	font-size: 0.9375rem;
}

.collect caption {
	text-align: left;
	font-family: var(--mono);
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
	padding-bottom: 0.75rem;
}

.collect th,
.collect td {
	text-align: left;
	padding: 0.6rem 0.75rem 0.6rem 0;
	border-bottom: 1px solid var(--edge);
}

.collect th {
	font-weight: 500;
	color: var(--text);
}

.collect td {
	font-family: var(--mono);
	font-size: 0.75rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
	white-space: nowrap;
	text-align: right;
	padding-right: 0;
}

/* --- footer --------------------------------------------------------------- */

.foot {
	margin-top: clamp(4rem, 12vw, 7rem);
	padding-top: 2rem;
	border-top: 1px solid var(--edge);
	display: flex;
	justify-content: space-between;
	gap: 1.5rem;
	flex-wrap: wrap;
	font-family: var(--mono);
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
}

.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--text); }