/* Slide Puzzle Speedrun: one stylesheet for every page. Tile colors and board proportions come
   from the app (TileTheme.swift Fringe palette, BoardShape.swift radii) so the web board and
   the app board look like one object. */

:root {
	color-scheme: light dark;
	--bg: #f6f3ee;
	--bg-2: #ece7df;
	--surface: #ffffff;
	--surface-2: #f1ede6;
	--text: #1c1a19;
	--muted: #6b6560;
	--line: rgba(28, 26, 25, 0.1);
	--accent: #e8603c;
	--accent-ink: #ffffff;
	--tray: rgba(0, 0, 0, 0.06);
	--tile-shadow: rgba(0, 0, 0, 0.22);
	--label: rgba(33, 26, 23, 0.92);
	--band-0: rgb(255, 122, 84);
	--band-1: rgb(255, 199, 77);
	--band-2: rgb(84, 194, 153);
	--font: ui-rounded, 'SF Pro Rounded', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--radius: 22px;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #0f0f10;
		--bg-2: #1b1b1d;
		--surface: #1c1c1e;
		--surface-2: #242427;
		--text: #f4f3f2;
		--muted: #a19c97;
		--line: rgba(255, 255, 255, 0.1);
		--accent: #fa7352;
		--accent-ink: #1a0f0b;
		--tray: rgba(255, 255, 255, 0.06);
		--tile-shadow: rgba(0, 0, 0, 0.45);
		--band-0: rgb(250, 115, 82);
		--band-1: rgb(250, 194, 71);
		--band-2: rgb(89, 199, 158);
	}
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font);
	font-size: 17px;
	line-height: 1.5;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

a {
	color: inherit;
}

img {
	max-width: 100%;
	display: block;
}

.wrap {
	width: 100%;
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 20px;
}

.narrow {
	max-width: 720px;
}

/* Header and footer */

.site-header {
	position: sticky;
	top: 0;
	z-index: 10;
	background: color-mix(in srgb, var(--bg) 82%, transparent);
	backdrop-filter: saturate(1.4) blur(14px);
	-webkit-backdrop-filter: saturate(1.4) blur(14px);
	border-bottom: 1px solid var(--line);
}

.site-header .wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	height: 58px;
}

.brand {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 800;
	letter-spacing: -0.01em;
	text-decoration: none;
	white-space: nowrap;
	min-width: 0;
}

.brand img {
	width: 30px;
	height: 30px;
	border-radius: 8px;
}

.nav {
	display: flex;
	gap: 4px;
}

.nav a {
	text-decoration: none;
	font-weight: 600;
	font-size: 15px;
	color: var(--muted);
	padding: 6px 10px;
	border-radius: 999px;
}

.nav a:hover,
.nav a[aria-current='page'] {
	color: var(--text);
	background: var(--surface-2);
}

.site-footer {
	margin-top: 72px;
	padding: 32px 0 48px;
	border-top: 1px solid var(--line);
	color: var(--muted);
	font-size: 15px;
}

.site-footer .wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 16px;
}

.site-footer nav {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
}

.site-footer a {
	text-decoration: none;
	font-weight: 600;
}

.site-footer a:hover {
	color: var(--text);
}

/* Buttons and badges */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 50px;
	padding: 0 22px;
	border-radius: 999px;
	border: 0;
	font: inherit;
	font-weight: 700;
	font-size: 17px;
	text-decoration: none;
	cursor: pointer;
	background: var(--accent);
	color: var(--accent-ink);
	transition: transform 0.12s ease, filter 0.12s ease;
}

.btn:hover {
	filter: brightness(1.05);
}

.btn:active {
	transform: scale(0.97);
}

.btn.secondary {
	background: var(--surface-2);
	color: var(--text);
}

.btn svg {
	width: 18px;
	height: 18px;
}

.store-badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 18px 8px 14px;
	border-radius: 14px;
	background: var(--text);
	color: var(--bg);
	line-height: 1.15;
	text-align: left;
}

.store-badge svg {
	width: 26px;
	height: 26px;
	flex: none;
}

.store-badge small {
	display: block;
	font-size: 11px;
	font-weight: 600;
	opacity: 0.8;
}

.store-badge strong {
	display: block;
	font-size: 18px;
	letter-spacing: -0.01em;
}

.eyebrow {
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent);
}

/* The board. Sizes are fractions of the board side (cqw), from BoardShape: padding 3.5% of the
   side, a gap of 5.5% of a cell, tile corners 30% of the tile side, and a tray radius that
   keeps the tray concentric with the tiles. */

.board {
	--pad: 3.5;
	--cell: 23.25;
	--gap: 1.27875;
	--tile: 21.97125;
	--tile-r: 6.591375;
	--tray-r: 10.73075;
	container-type: inline-size;
	position: relative;
	width: 100%;
	aspect-ratio: 1;
	border-radius: calc(var(--tray-r) * 1cqw);
	background: var(--tray);
	touch-action: manipulation;
	user-select: none;
	-webkit-user-select: none;
}

.board .tile {
	position: absolute;
	left: 0;
	top: 0;
	width: calc(var(--tile) * 1cqw);
	height: calc(var(--tile) * 1cqw);
	border-radius: calc(var(--tile-r) * 1cqw);
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--c) 94%, white),
		color-mix(in srgb, var(--c) 94%, black)
	);
	box-shadow:
		inset 0 calc(0.6cqw) 0 -0.2cqw rgba(255, 255, 255, 0.34),
		inset 0 calc(-0.5cqw) 0 -0.2cqw rgba(0, 0, 0, 0.1),
		0 0.8cqw 1.2cqw var(--tile-shadow);
	color: var(--label);
	display: grid;
	place-items: center;
	font-weight: 700;
	font-size: calc(var(--tile) * 0.42cqw);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
	will-change: transform;
	transition-property: transform;
	transition-timing-function: cubic-bezier(0.2, 0.8, 0.25, 1);
}

.board .tile[data-band='0'] {
	--c: var(--band-0);
}
.board .tile[data-band='1'] {
	--c: var(--band-1);
}
.board .tile[data-band='2'] {
	--c: var(--band-2);
}

.board .tile.hl {
	outline: 0.8cqw solid color-mix(in srgb, var(--text) 70%, transparent);
	outline-offset: 0.4cqw;
}

.board.no-numbers .tile {
	font-size: 0;
}

/* Cards and prose */

.card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 22px;
}

.prose h1 {
	font-size: clamp(32px, 7vw, 44px);
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin: 40px 0 8px;
}

.prose h2 {
	font-size: 22px;
	letter-spacing: -0.01em;
	margin: 36px 0 8px;
}

.prose p,
.prose li {
	color: var(--text);
}

.prose .lede {
	color: var(--muted);
	font-size: 19px;
	margin-top: 0;
}

.prose ul {
	padding-left: 22px;
}

.prose li + li {
	margin-top: 6px;
}

.prose a {
	color: var(--accent);
	font-weight: 600;
}

.prose a.btn {
	color: var(--accent-ink);
	text-decoration: none;
	max-width: 100%;
	overflow-wrap: anywhere;
}

.prose h3 {
	font-size: 18px;
	margin: 24px 0 4px;
}

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

.stat-row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}

.stat {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 10px 12px;
	min-width: 0;
}

.stat small {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
}

.stat strong {
	display: block;
	font-size: 22px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (prefers-reduced-motion: reduce) {
	.board .tile {
		transition: none !important;
	}
	.btn {
		transition: none;
	}
}