/* ============================================================
   Border-runner personal site — custom layer on top of Pico
   ============================================================ */

/* Spectral — refined serif for the intro (self-hosted, no CDN) */
@font-face {
	font-family: 'Spectral';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/spectral-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	/* Thickness reserved around the viewport for the game track (dog + jump).
	   Read by border-game.js via getComputedStyle. */
	--track-inset: 80px;
	--ink: var(--pico-color);
}

html, body {
	height: 100%;
	margin: 0;
	overflow: hidden;              /* no scrolling — single screen */
	overscroll-behavior: none;
}

body {
	min-height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Soft warm backdrop so the white card and the border game pop. */
	background: linear-gradient(165deg, #f2efe9 0%, #e2ddd2 100%);
	background-attachment: fixed;
	touch-action: manipulation;     /* kill double-tap zoom, keep taps snappy */
	-webkit-user-select: none;
	user-select: none;
}

/* --- Game canvas: full viewport, behind everything --- */
#game {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	display: block;
	image-rendering: pixelated;
	image-rendering: crisp-edges;
	touch-action: none;
}

/* --- Center card --- */
#card {
	position: relative;
	z-index: 1;
	/* Sized off the viewport so there's always >= track-inset clearance on
	   every side, no matter the containing block. */
	width: min(30rem, calc(100vw - 2 * var(--track-inset)));
	max-width: calc(100vw - 2 * var(--track-inset));
	min-width: 0;   /* flex item: let the width cap hold, don't grow to image size */
	max-height: calc(100dvh - 2 * var(--track-inset));
	padding: clamp(1rem, 3vw, 2rem);
	text-align: center;
	background: #ffffff;
	border: 1px solid var(--pico-muted-border-color);
	border-radius: var(--pico-border-radius);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
	/* Let taps fall through to the game, but re-enable on interactive bits. */
	pointer-events: none;
	overflow: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}

#card a,
#card button {
	pointer-events: auto;
}

#card h1 {
	font-family: 'Spectral', Georgia, 'Times New Roman', serif;
	font-size: clamp(1.2rem, 3.1vw, 1.65rem);
	line-height: 1.35;
	margin: 0.4rem 0 1rem;
	font-weight: 400;
	overflow-wrap: break-word;
	max-width: 100%;
}

/* Avatar */
.avatar-link {
	display: inline-block;
	pointer-events: auto;
}
.avatar {
	width: 108px;
	height: 108px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--pico-muted-border-color);
	margin: 0 auto 0.25rem;
	display: block;
}

/* Hero picture */
.hero-pic {
	margin: 0 0 1.25rem;
	min-height: 0;   /* allow the image to shrink inside the flex column */
	min-width: 0;
	max-width: 100%;
}
.hero-pic img {
	max-width: 100%;
	/* Cap height so the links + footer always stay above the fold. */
	max-height: 34vh;
	width: auto;
	height: auto;
	border-radius: var(--pico-border-radius);
	display: block;
	margin: 0 auto;
}

/* Links */
.links {
	display: flex;
	gap: 1.5rem;
	justify-content: center;
	flex-wrap: wrap;
	margin: 0.25rem 0 0.75rem;
}
.links a {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--pico-muted-color);
	text-decoration: none;
	font-size: 0.85rem;
	letter-spacing: 0.02em;
	transition: color 0.15s ease;
}
.links a:hover {
	color: var(--ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.links svg { display: block; width: 15px; height: 15px; }

.copyright {
	font-size: 0.85rem;
	color: var(--pico-muted-color);
}

/* Jump hint — small, unobtrusive, fades away */
.hint {
	position: fixed;
	left: 50%;
	bottom: calc(var(--track-inset) * 0.28);
	transform: translateX(-50%);
	z-index: 1;
	margin: 0;
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pico-muted-color);
	pointer-events: none;
	animation: hint-fade 6s ease forwards;
}
@keyframes hint-fade {
	0%, 70% { opacity: 0.75; }
	100%    { opacity: 0; }
}

/* Tighter track on small screens so the card has room */
@media (max-width: 640px) {
	:root { --track-inset: 56px; }
	.avatar { width: 88px; height: 88px; }
}

@media (prefers-color-scheme: dark) {
	#card { box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4); }
}