/* speedruns.css — generated by bin/build-css.php from src/css/. Don't edit; edit the sources and rebuild. */

/* ── src/css/settings/_tokens.css ── */

/* ==========================================================================
   SETTINGS — design tokens
   Every token is prefixed --speedruns- so a site can override it, e.g.
   :root { --speedruns-radius-l: 4px; }

   Colours follow the site's shared names (--fg, --muted, --line, --bg,
   --accent), which blogkit sets for light and dark mode; the fallbacks
   apply without them.
   ========================================================================== */

:root {
	/* Colour */
	--speedruns-color-text: var(--fg, #1a1a1a);
	--speedruns-color-muted: var(--muted, #666);
	--speedruns-color-line: var(--line, #e5e5e5);
	--speedruns-color-surface: var(--bg, #fff);
	--speedruns-color-accent: var(--accent, #0b5fff);   /* hover, focus ring */
	--speedruns-color-placeholder: color-mix(in srgb, var(--speedruns-color-text) 8%, var(--speedruns-color-surface));
	--speedruns-color-button: color-mix(in srgb, var(--speedruns-color-text) 4%, var(--speedruns-color-surface));
	--speedruns-color-player: #000;                      /* behind the video */
	--speedruns-color-play: rgb(0 0 0 / 0.72);           /* play button on the thumbnail */
	--speedruns-color-play-hover: #000;
	--speedruns-color-on-play: #fff;

	/* Space */
	--speedruns-space-xs: 0.25rem;
	--speedruns-space-s: 0.5rem;
	--speedruns-space-m: 1rem;
	--speedruns-space-l: 1.5rem;
	--speedruns-space-xl: 2rem;
	--speedruns-space-xxl: 3rem;

	/* Shape */
	--speedruns-radius-l: 8px;                           /* player, cards */
	--speedruns-radius-s: 4px;                           /* covers */
	--speedruns-radius-button: 999px;

	/* Type */
	--speedruns-font-size-title: 2rem;                   /* page titles */
	--speedruns-font-size-heading: 1.5rem;               /* "Latest runs", "Games" */
	--speedruns-font-size-card-title: 1.125rem;
	--speedruns-font-size-time: 2.5rem;                  /* the time on a run's page */
	--speedruns-font-size-meta: 0.9rem;
	--speedruns-font-size-small: 0.8rem;
	--speedruns-line-height-heading: 1.2;

	/* Measures */
	--speedruns-width-run: 48rem;                        /* a run's page */
	--speedruns-card-min: 16rem;                         /* narrowest card in the grid */
	--speedruns-cover-small: 3rem;                       /* game covers in the list */
	--speedruns-cover-large: 8rem;                       /* the cover on a game's page */
	--speedruns-play-size: 4rem;
	--speedruns-touch-target: 3rem;
}

/* ── src/css/objects/_speedruns-grid.css ── */

/* ==========================================================================
   OBJECT — o-speedruns-grid
   Cards in as many columns as fit, at least --speedruns-card-min wide.
   ========================================================================== */

.o-speedruns-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--speedruns-card-min)), 1fr));
	gap: var(--speedruns-space-l);
	margin: 0;
	padding: 0;
	list-style: none;
}

.o-speedruns-grid__item {
	display: flex;
}

.o-speedruns-grid__item > * {
	flex: 1;
}

/* ── src/css/components/_speedruns-text.css ── */

/* ==========================================================================
   COMPONENT — c-speedruns-text
   Text from the editor (intro, notes). Mixed into the parent's element
   (e.g. c-speedruns-run__notes). Editor output can't carry classes, so its
   children are styled by type here — the only place this plugin does so.
   ========================================================================== */

.c-speedruns-text > :first-child {
	margin-top: 0;
}

.c-speedruns-text > :last-child {
	margin-bottom: 0;
}

.c-speedruns-text p,
.c-speedruns-text ul,
.c-speedruns-text ol {
	margin: 0 0 var(--speedruns-space-m);
}

/* ── src/css/components/_speedruns-empty.css ── */

/* ==========================================================================
   COMPONENT — c-speedruns-empty
   "No runs yet."
   ========================================================================== */

.c-speedruns-empty {
	margin: 0;
	color: var(--speedruns-color-muted);
}

/* ── src/css/components/_speedruns-facts.css ── */

/* ==========================================================================
   COMPONENT — c-speedruns-facts
   A run's facts as a definition list: the time large, then category,
   game and date in a row that wraps.
   ========================================================================== */

.c-speedruns-facts {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--speedruns-space-m) var(--speedruns-space-xl);
	margin: 0;
}

.c-speedruns-facts__item--time {
	flex-basis: 100%;
}

.c-speedruns-facts__term {
	color: var(--speedruns-color-muted);
	font-size: var(--speedruns-font-size-small);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.c-speedruns-facts__value {
	margin: var(--speedruns-space-xs) 0 0;
	font-weight: 600;
}

.c-speedruns-facts__item--time .c-speedruns-facts__value {
	font-size: var(--speedruns-font-size-time);
	line-height: 1.1;
}

.c-speedruns-facts__time {
	font-variant-numeric: tabular-nums;
}

/* ── src/css/components/_speedruns-links.css ── */

/* ==========================================================================
   COMPONENT — c-speedruns-links
   The run's links (speedrun.com, splits.io) as buttons.
   ========================================================================== */

.c-speedruns-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--speedruns-space-s) var(--speedruns-space-m);
	margin: 0;
	padding: 0;
	list-style: none;
}

.c-speedruns-links__link {
	display: inline-flex;
	align-items: center;
	min-height: var(--speedruns-touch-target);
	padding: var(--speedruns-space-s) var(--speedruns-space-l);
	border: 1px solid var(--speedruns-color-line);
	border-radius: var(--speedruns-radius-button);
	background: var(--speedruns-color-button);
	color: var(--speedruns-color-text);
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
}

.c-speedruns-links__link::after {
	content: "↗";
	content: "↗" / "";   /* decorative: not read out by screen readers */
	margin-left: var(--speedruns-space-s);
	font-weight: 400;
}

.c-speedruns-links__link:hover {
	border-color: var(--speedruns-color-accent);
	color: var(--speedruns-color-accent);
	text-decoration: none;
}

.c-speedruns-links__link:focus-visible {
	outline: 3px solid var(--speedruns-color-accent);
	outline-offset: 2px;
}

/* ── src/css/components/_speedruns-player.css ── */

/* ==========================================================================
   COMPONENT — c-speedruns-player
   The video: first the stored thumbnail with a play button (a link to
   YouTube), after a click the YouTube player (assets/js/speedruns-player.js).
   ========================================================================== */

.c-speedruns-player {
	margin: 0;
}

.c-speedruns-player__link,
.c-speedruns-player__frame {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border: 0;
	border-radius: var(--speedruns-radius-l);
	background: var(--speedruns-color-player);
}

.c-speedruns-player__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.c-speedruns-player__button {
	display: grid;
	position: absolute;
	top: 50%;
	left: 50%;
	place-items: center;
	width: var(--speedruns-play-size);
	height: var(--speedruns-play-size);
	border-radius: 50%;
	background: var(--speedruns-color-play);
	color: var(--speedruns-color-on-play);
	transform: translate(-50%, -50%);
}

.c-speedruns-player__link:hover .c-speedruns-player__button {
	background: var(--speedruns-color-play-hover);
}

.c-speedruns-player__link:focus-visible {
	outline: 3px solid var(--speedruns-color-accent);
	outline-offset: 2px;
}

.c-speedruns-player__note {
	margin-top: var(--speedruns-space-s);
	color: var(--speedruns-color-muted);
	font-size: var(--speedruns-font-size-small);
}

@media (prefers-reduced-motion: no-preference) {
	.c-speedruns-player__button {
		transition: transform 150ms ease-out, background-color 150ms ease-out;
	}

	.c-speedruns-player__link:hover .c-speedruns-player__button {
		transform: translate(-50%, -50%) scale(1.08);
	}
}

/* ── src/css/components/_speedruns-card.css ── */

/* ==========================================================================
   COMPONENT — c-speedruns-card
   One run: picture (16:9), title, game and category, time and date.
   The title link covers the whole card.
   ========================================================================== */

.c-speedruns-card {
	display: flex;
	position: relative;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--speedruns-color-line);
	border-radius: var(--speedruns-radius-l);
	background: var(--speedruns-color-surface);
}

.c-speedruns-card:hover {
	border-color: var(--speedruns-color-accent);
}

.c-speedruns-card__media {
	aspect-ratio: 16 / 9;
	background: var(--speedruns-color-placeholder);
}

.c-speedruns-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.c-speedruns-card__body {
	padding: var(--speedruns-space-m);
}

.c-speedruns-card__title {
	margin: 0;
	font-size: var(--speedruns-font-size-card-title);
	line-height: var(--speedruns-line-height-heading);
}

.c-speedruns-card__link {
	color: var(--speedruns-color-text);
}

/* the whole card is clickable */
.c-speedruns-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.c-speedruns-card:hover .c-speedruns-card__link {
	text-decoration: underline;
}

/* keyboard focus: the ring goes around the card instead of the title */
@supports selector(:has(*)) {
	.c-speedruns-card__link:focus-visible {
		outline: none;
	}

	.c-speedruns-card:has(.c-speedruns-card__link:focus-visible) {
		outline: 3px solid var(--speedruns-color-accent);
		outline-offset: 2px;
	}
}

.c-speedruns-card__meta {
	margin: var(--speedruns-space-xs) 0 0;
	color: var(--speedruns-color-muted);
	font-size: var(--speedruns-font-size-meta);
}

.c-speedruns-card__stats {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--speedruns-space-xs) var(--speedruns-space-m);
	margin: var(--speedruns-space-s) 0 0;
}

.c-speedruns-card__time {
	font-size: var(--speedruns-font-size-card-title);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.c-speedruns-card__date {
	color: var(--speedruns-color-muted);
	font-size: var(--speedruns-font-size-meta);
}

/* ── src/css/components/_speedruns-games.css ── */

/* ==========================================================================
   COMPONENT — c-speedruns-games
   The games as a list: small cover, name, platform and number of runs.
   ========================================================================== */

.c-speedruns-games {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--speedruns-color-line);
}

.c-speedruns-games__item {
	border-bottom: 1px solid var(--speedruns-color-line);
}

.c-speedruns-games__link {
	display: flex;
	align-items: center;
	gap: var(--speedruns-space-m);
	padding: var(--speedruns-space-s) 0;
	color: var(--speedruns-color-text);
	text-decoration: none;
}

.c-speedruns-games__link:focus-visible {
	outline: 3px solid var(--speedruns-color-accent);
	outline-offset: 2px;
}

.c-speedruns-games__media {
	flex: none;
	width: var(--speedruns-cover-small);
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: var(--speedruns-radius-s);
	background: var(--speedruns-color-placeholder);
}

.c-speedruns-games__cover {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.c-speedruns-games__text {
	display: flex;
	flex-direction: column;
}

.c-speedruns-games__name {
	font-weight: 600;
}

.c-speedruns-games__link:hover .c-speedruns-games__name {
	color: var(--speedruns-color-accent);
	text-decoration: underline;
}

.c-speedruns-games__meta {
	color: var(--speedruns-color-muted);
	font-size: var(--speedruns-font-size-meta);
}

/* ── src/css/components/_speedruns-overview.css ── */

/* ==========================================================================
   COMPONENT — c-speedruns-overview
   The overview page: title, intro, latest runs, games.
   ========================================================================== */

.c-speedruns-overview__header {
	margin-bottom: var(--speedruns-space-xl);
}

.c-speedruns-overview__title {
	margin: 0;
	font-size: var(--speedruns-font-size-title);
	line-height: var(--speedruns-line-height-heading);
}

.c-speedruns-overview__intro {
	max-width: 40rem;
	margin-top: var(--speedruns-space-s);
	color: var(--speedruns-color-muted);
}

.c-speedruns-overview__section + .c-speedruns-overview__section {
	margin-top: var(--speedruns-space-xxl);
}

.c-speedruns-overview__heading {
	margin: 0 0 var(--speedruns-space-m);
	font-size: var(--speedruns-font-size-heading);
	line-height: var(--speedruns-line-height-heading);
}

/* ── src/css/components/_speedruns-game.css ── */

/* ==========================================================================
   COMPONENT — c-speedruns-game
   A game's page: cover, name, platform and number of runs, its runs.
   ========================================================================== */

.c-speedruns-game__back {
	margin: 0 0 var(--speedruns-space-m);
	font-size: var(--speedruns-font-size-meta);
}

.c-speedruns-game__header {
	display: flex;
	align-items: flex-end;
	gap: var(--speedruns-space-l);
	margin-bottom: var(--speedruns-space-xl);
}

.c-speedruns-game__cover {
	display: block;
	flex: none;
	width: clamp(5rem, 25vw, var(--speedruns-cover-large));
	height: auto;
	border-radius: var(--speedruns-radius-s);
	background: var(--speedruns-color-placeholder);
}

.c-speedruns-game__title {
	margin: 0;
	font-size: var(--speedruns-font-size-title);
	line-height: var(--speedruns-line-height-heading);
}

.c-speedruns-game__meta {
	margin: var(--speedruns-space-xs) 0 0;
	color: var(--speedruns-color-muted);
}

/* ── src/css/components/_speedruns-run.css ── */

/* ==========================================================================
   COMPONENT — c-speedruns-run
   A run's page: back link, title, facts, video, links, notes.
   ========================================================================== */

.c-speedruns-run {
	max-width: var(--speedruns-width-run);
}

.c-speedruns-run__back {
	margin: 0 0 var(--speedruns-space-m);
	font-size: var(--speedruns-font-size-meta);
}

.c-speedruns-run__title {
	margin: 0;
	font-size: var(--speedruns-font-size-title);
	line-height: var(--speedruns-line-height-heading);
}

.c-speedruns-run__facts {
	margin-top: var(--speedruns-space-l);
}

.c-speedruns-run__player,
.c-speedruns-run__links,
.c-speedruns-run__notes {
	margin-top: var(--speedruns-space-xl);
}

/* ── src/css/utilities/_speedruns-visually-hidden.css ── */

/* ==========================================================================
   UTILITY — u-speedruns-visually-hidden
   Text for screen readers only, e.g. "(opens in a new tab)".
   !important is fine here: a utility must always win.
   ========================================================================== */

.u-speedruns-visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}