/* ==========================================================================
   PCF Hub — front-end
   Design tokens taken from simonemissaglia.com so the app reads as part of
   the same family: near-monochrome surfaces, one hairline, generous type,
   and colour used only where the game needs it (banlist and card frames).
   Everything is scoped under .pcf so no theme or Elementor rule leaks in.
   ========================================================================== */

.pcf {
	--pcf-bg: #f6f6f3;
	--pcf-surface: #ffffff;
	--pcf-surface-2: #f0f0ec;
	--pcf-text: #111111;
	--pcf-muted: #575757;
	--pcf-line: #d8d8d4;
	--pcf-accent: #111111;

	--pcf-radius: 12px;
	--pcf-radius-md: 14px;
	--pcf-radius-lg: 20px;
	--pcf-max: 1080px;

	--pcf-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--pcf-fast: 200ms;
	--pcf-mid: 260ms;
	--pcf-shadow: 0 20px 45px -34px rgba(0, 0, 0, 0.45);
	--pcf-shadow-hover: 0 28px 58px -34px rgba(0, 0, 0, 0.52);

	--pcf-forbidden: #b3261e;
	--pcf-limited: #b4690e;
	--pcf-semi: #2f6f3e;
	--pcf-monster: #a9762f;
	--pcf-spell: #1c7a6b;
	--pcf-trap: #9b2f6f;

	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: var(--pcf-text);
	line-height: 1.5;
	width: 100%;
	max-width: var(--pcf-max);
	margin-inline: auto;
}

html[data-theme="dark"] .pcf {
	--pcf-bg: #141618;
	--pcf-surface: #1d2023;
	--pcf-surface-2: #24282c;
	--pcf-text: #f3f3f2;
	--pcf-muted: #d0d0cc;
	--pcf-line: #3a3e42;
	--pcf-accent: #f3f3f2;

	--pcf-forbidden: #e2695f;
	--pcf-limited: #dc9a3e;
	--pcf-semi: #6fbf85;
	--pcf-monster: #d8ab68;
	--pcf-spell: #56bfad;
	--pcf-trap: #dd7ab0;
}

/* the dark override above is also applied when the theme has no toggle */
@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) .pcf {
		--pcf-bg: #141618;
		--pcf-surface: #1d2023;
		--pcf-surface-2: #24282c;
		--pcf-text: #f3f3f2;
		--pcf-muted: #d0d0cc;
		--pcf-line: #3a3e42;
		--pcf-accent: #f3f3f2;

		--pcf-forbidden: #e2695f;
		--pcf-limited: #dc9a3e;
		--pcf-semi: #6fbf85;
		--pcf-monster: #d8ab68;
		--pcf-spell: #56bfad;
		--pcf-trap: #dd7ab0;
	}
}

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

/* --------------------------------------------------------------------------
   Wide mode — `wide="yes"` on the shortcode.
   Most themes wrap page content in a column around 800 px, which is right for
   an article and wrong for a deckbuilder. This breaks the block out of that
   column without touching the theme. It relies on no ancestor having
   `overflow: hidden`; if the page ends up cut off, set wide="no" and widen the
   template instead.
   -------------------------------------------------------------------------- */

.pcf--wide {
	width: min(1440px, calc(100vw - 2rem));
	max-width: none;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}

@media (max-width: 820px) {
	.pcf--wide {
		width: 100%;
		left: auto;
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */

.pcf h2,
.pcf h3,
.pcf h4 {
	margin: 0 0 0.6rem;
	color: var(--pcf-text);
	line-height: 1.15;
}

.pcf h2 {
	font-size: clamp(1.45rem, 3.5vw, 2.2rem);
}

.pcf h3 {
	font-size: clamp(1.1rem, 2.2vw, 1.35rem);
}

.pcf p {
	margin: 0 0 0.8rem;
}

.pcf__eyebrow {
	margin: 0 0 0.35rem;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--pcf-muted);
}

.pcf__lead {
	color: var(--pcf-muted);
	max-width: 62ch;
}

.pcf__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	padding-bottom: 1.2rem;
	margin-bottom: 1.4rem;
	border-bottom: 1px solid var(--pcf-line);
}

/* --------------------------------------------------------------------------
   Controls
   -------------------------------------------------------------------------- */

.pcf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	border: 1px solid var(--pcf-line);
	border-radius: 9px;
	padding: 0.58rem 0.9rem;
	background: var(--pcf-surface);
	color: var(--pcf-text);
	font: inherit;
	font-size: 0.92rem;
	text-decoration: none;
	cursor: pointer;
	transition: transform var(--pcf-fast) var(--pcf-ease), box-shadow var(--pcf-fast) var(--pcf-ease), background var(--pcf-fast) var(--pcf-ease);
}

.pcf-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 30px -20px rgba(0, 0, 0, 0.55);
	color: var(--pcf-text);
}

.pcf-btn:active {
	transform: translateY(0);
}

.pcf-btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--pcf-text) 12%, transparent);
}

.pcf-btn--solid {
	background: var(--pcf-text);
	color: var(--pcf-bg);
	border-color: var(--pcf-text);
}

.pcf-btn--solid:hover {
	color: var(--pcf-bg);
}

.pcf-btn--ghost {
	background: transparent;
}

.pcf-btn[disabled] {
	opacity: 0.5;
	pointer-events: none;
}

.pcf-input,
.pcf-select {
	width: 100%;
	border: 1px solid var(--pcf-line);
	border-radius: 9px;
	padding: 0.55rem 0.7rem;
	background: var(--pcf-surface);
	color: var(--pcf-text);
	font: inherit;
	font-size: 0.92rem;
	transition: border-color var(--pcf-fast) var(--pcf-ease), box-shadow var(--pcf-fast) var(--pcf-ease);
}

.pcf-input:focus,
.pcf-select:focus {
	outline: none;
	border-color: color-mix(in srgb, var(--pcf-text) 45%, var(--pcf-line));
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--pcf-text) 8%, transparent);
}

.pcf-field {
	display: grid;
	gap: 0.3rem;
}

.pcf-field > label {
	font-size: 0.74rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--pcf-muted);
}

.pcf-toolbar {
	display: grid;
	grid-template-columns: minmax(200px, 2fr) repeat(auto-fit, minmax(130px, 1fr));
	gap: 0.6rem;
	align-items: end;
	margin-bottom: 1.2rem;
}

/* language switch ---------------------------------------------------------- */

.pcf-lang {
	display: inline-flex;
	border: 1px solid var(--pcf-line);
	border-radius: 999px;
	overflow: hidden;
	background: var(--pcf-surface);
}

.pcf-lang__btn {
	padding: 0.28rem 0.7rem;
	font-size: 0.74rem;
	letter-spacing: 0.08em;
	text-decoration: none;
	color: var(--pcf-muted);
	transition: background var(--pcf-fast) var(--pcf-ease), color var(--pcf-fast) var(--pcf-ease);
}

.pcf-lang__btn:hover {
	color: var(--pcf-text);
}

.pcf-lang__btn.is-active {
	background: var(--pcf-text);
	color: var(--pcf-bg);
}

/* pills and tags ----------------------------------------------------------- */

.pcf-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	border: 1px solid var(--pcf-line);
	border-radius: 999px;
	padding: 0.22rem 0.6rem;
	font-size: 0.76rem;
	color: var(--pcf-muted);
	background: var(--pcf-surface);
	white-space: nowrap;
}

.pcf-tag--forbidden { color: var(--pcf-forbidden); border-color: color-mix(in srgb, var(--pcf-forbidden) 40%, var(--pcf-line)); }
.pcf-tag--limited   { color: var(--pcf-limited);   border-color: color-mix(in srgb, var(--pcf-limited) 40%, var(--pcf-line)); }
.pcf-tag--semi      { color: var(--pcf-semi);      border-color: color-mix(in srgb, var(--pcf-semi) 40%, var(--pcf-line)); }

.pcf-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
	flex: none;
}

/* --------------------------------------------------------------------------
   Card grid
   -------------------------------------------------------------------------- */

.pcf-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
	gap: 0.75rem;
}

.pcf-card {
	position: relative;
	display: block;
	border: 0;
	padding: 0;
	background: none;
	text-align: left;
	cursor: pointer;
	font: inherit;
	color: inherit;
}

.pcf-card__art {
	position: relative;
	display: block;
	aspect-ratio: 421 / 614;
	border-radius: 8px;
	overflow: hidden;
	background: var(--pcf-surface-2);
	border: 1px solid var(--pcf-line);
	box-shadow: var(--pcf-shadow);
	transition: transform var(--pcf-mid) var(--pcf-ease), box-shadow var(--pcf-mid) var(--pcf-ease);
}

.pcf-card__art img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 500ms var(--pcf-ease);
}

.pcf-card:hover .pcf-card__art {
	transform: translateY(-4px);
	box-shadow: var(--pcf-shadow-hover);
}

.pcf-card:hover .pcf-card__art img {
	transform: scale(1.04);
}

.pcf-card__name {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.78rem;
	line-height: 1.25;
	color: var(--pcf-text);
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.pcf-card__badge {
	position: absolute;
	top: 5px;
	left: 5px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 0.68rem;
	font-weight: 700;
	color: #fff;
	background: var(--pcf-forbidden);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.pcf-card__badge--limited { background: var(--pcf-limited); }
.pcf-card__badge--semi    { background: var(--pcf-semi); }

.pcf-card__qty {
	position: absolute;
	right: 5px;
	bottom: 5px;
	min-width: 22px;
	height: 22px;
	padding: 0 5px;
	border-radius: 6px;
	display: grid;
	place-items: center;
	font-size: 0.76rem;
	font-weight: 700;
	color: var(--pcf-bg);
	background: color-mix(in srgb, var(--pcf-text) 88%, transparent);
}

.pcf-card__ruling {
	position: absolute;
	top: 5px;
	right: 5px;
	width: 18px;
	height: 18px;
	border-radius: 4px;
	display: grid;
	place-items: center;
	font-size: 0.62rem;
	font-weight: 700;
	color: var(--pcf-bg);
	background: color-mix(in srgb, var(--pcf-text) 70%, transparent);
}

/* --------------------------------------------------------------------------
   List rows (deck view, banlist)
   -------------------------------------------------------------------------- */

.pcf-rows {
	display: grid;
	gap: 2px;
}

.pcf-row {
	display: grid;
	grid-template-columns: 34px 1fr auto;
	align-items: center;
	gap: 0.7rem;
	padding: 0.4rem 0.55rem;
	border-radius: 8px;
	background: var(--pcf-surface);
	border: 1px solid transparent;
	text-decoration: none;
	color: inherit;
	transition: background var(--pcf-fast) var(--pcf-ease), border-color var(--pcf-fast) var(--pcf-ease), transform var(--pcf-fast) var(--pcf-ease);
}

.pcf-row:hover {
	background: var(--pcf-surface-2);
	border-color: var(--pcf-line);
	transform: translateX(2px);
	color: inherit;
}

.pcf-row__thumb {
	width: 34px;
	aspect-ratio: 421 / 614;
	border-radius: 4px;
	object-fit: cover;
	background: var(--pcf-surface-2);
}

.pcf-row__name {
	font-size: 0.92rem;
	display: flex;
	align-items: center;
	gap: 0.45rem;
	min-width: 0;
}

.pcf-row__name span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.pcf-row__meta {
	font-size: 0.78rem;
	color: var(--pcf-muted);
	white-space: nowrap;
}

.pcf-row__bar {
	width: 3px;
	height: 100%;
	min-height: 26px;
	border-radius: 999px;
	background: var(--pcf-line);
}

.pcf-row--monster .pcf-row__bar { background: var(--pcf-monster); }
.pcf-row--spell   .pcf-row__bar { background: var(--pcf-spell); }
.pcf-row--trap    .pcf-row__bar { background: var(--pcf-trap); }

/* --------------------------------------------------------------------------
   Panels, sections
   -------------------------------------------------------------------------- */

.pcf-panel {
	background: var(--pcf-surface);
	border: 1px solid var(--pcf-line);
	border-radius: var(--pcf-radius-md);
	padding: 1rem;
}

.pcf-panel + .pcf-panel {
	margin-top: 0.9rem;
}

.pcf-panel__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.6rem;
	margin-bottom: 0.7rem;
	padding-bottom: 0.55rem;
	border-bottom: 1px solid var(--pcf-line);
}

.pcf-panel__title {
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--pcf-muted);
	margin: 0;
}

.pcf-panel__count {
	font-size: 0.92rem;
	font-variant-numeric: tabular-nums;
	color: var(--pcf-text);
}

.pcf-empty {
	padding: 2.2rem 1rem;
	text-align: center;
	color: var(--pcf-muted);
	border: 1px dashed var(--pcf-line);
	border-radius: var(--pcf-radius-md);
}

.pcf-note {
	font-size: 0.82rem;
	color: var(--pcf-muted);
}

/* --------------------------------------------------------------------------
   Stats
   -------------------------------------------------------------------------- */

.pcf-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 0.8rem;
}

.pcf-stat {
	background: var(--pcf-surface);
	border: 1px solid var(--pcf-line);
	border-radius: var(--pcf-radius);
	padding: 1.1rem 1rem;
	transition: transform var(--pcf-mid) var(--pcf-ease), box-shadow var(--pcf-mid) var(--pcf-ease);
}

.pcf-stat:hover {
	transform: translateY(-3px);
	box-shadow: var(--pcf-shadow-hover);
}

.pcf-stat__n {
	display: block;
	font-size: clamp(1.6rem, 3.4vw, 2.3rem);
	line-height: 1;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
}

.pcf-stat__l {
	display: block;
	margin-top: 0.35rem;
	font-size: 0.74rem;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--pcf-muted);
}

/* --------------------------------------------------------------------------
   Deckbuilder — three columns, the way a duel client lays it out:
   card preview on the left, searchable pool in the middle, the deck itself
   on the right as a spread of card images rather than a list of names.
   -------------------------------------------------------------------------- */

.pcf-builder {
	display: grid;
	grid-template-columns: 224px minmax(0, 1fr) minmax(0, 1.06fr);
	gap: 1rem;
	align-items: start;
}

.pcf-builder__preview,
.pcf-builder__pool,
.pcf-builder__deck {
	min-width: 0;
}

.pcf-builder__preview {
	position: sticky;
	top: 1rem;
}

/* ---- card preview panel -------------------------------------------------- */

.pcf-preview {
	background: var(--pcf-surface);
	border: 1px solid var(--pcf-line);
	border-radius: var(--pcf-radius-md);
	padding: 0.8rem;
	display: grid;
	gap: 0.6rem;
}

.pcf-preview__art {
	width: 100%;
	aspect-ratio: 421 / 614;
	object-fit: cover;
	display: block;
	border-radius: 8px;
	border: 1px solid var(--pcf-line);
	background: var(--pcf-surface-2);
}

.pcf-preview__name {
	margin: 0;
	font-size: 0.98rem;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.pcf-preview__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
}

.pcf-preview__text {
	margin: 0;
	font-size: 0.78rem;
	line-height: 1.45;
	color: var(--pcf-muted);
	white-space: pre-line;
	max-height: 11.5em;
	overflow: auto;
	border-left: 2px solid var(--pcf-line);
	padding-left: 0.6rem;
}

.pcf-preview__foot {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	align-items: center;
	font-size: 0.76rem;
	color: var(--pcf-muted);
}

.pcf-preview--empty {
	color: var(--pcf-muted);
	font-size: 0.82rem;
	text-align: center;
	padding: 2rem 0.8rem;
	border-style: dashed;
}

/* ---- filters ------------------------------------------------------------- */

.pcf-filters {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.45rem;
	margin-bottom: 0.7rem;
}

.pcf-filters > .pcf-field--wide {
	grid-column: 1 / -1;
}

.pcf-filters .pcf-input,
.pcf-filters .pcf-select {
	padding: 0.42rem 0.55rem;
	font-size: 0.84rem;
}

.pcf-filters .pcf-field > label {
	font-size: 0.66rem;
}

/* ---- dense grids --------------------------------------------------------- */

.pcf-grid--pool {
	grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
	gap: 0.4rem;
}

.pcf-grid--deck {
	grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
	gap: 0.28rem;
}

.pcf-grid--pool .pcf-card__name {
	margin-top: 0.25rem;
	font-size: 0.66rem;
	line-height: 1.2;
}

/* In the deck the artwork is the label — names would only add noise. */
.pcf-grid--deck .pcf-card__name {
	display: none;
}

.pcf-grid--deck .pcf-card__art {
	border-radius: 5px;
	box-shadow: 0 6px 14px -12px rgba(0, 0, 0, 0.5);
}

.pcf-grid--deck .pcf-card:hover .pcf-card__art {
	transform: translateY(-3px);
}

.pcf-grid--deck .pcf-card__badge {
	width: 15px;
	height: 15px;
	font-size: 0.55rem;
	top: 3px;
	left: 3px;
}

/* ---- deck zones ---------------------------------------------------------- */

.pcf-zone {
	background: var(--pcf-surface-2);
	border: 1px solid var(--pcf-line);
	border-radius: var(--pcf-radius-md);
	padding: 0.7rem;
	margin-bottom: 0.6rem;
}

.pcf-zone__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.6rem;
	margin-bottom: 0.55rem;
}

.pcf-zone__title {
	margin: 0;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--pcf-muted);
	font-weight: 400;
}

.pcf-zone__count {
	font-size: 0.86rem;
	font-variant-numeric: tabular-nums;
}

.pcf-zone__count.is-over {
	color: var(--pcf-forbidden);
}

.pcf-zone__drop {
	min-height: 46px;
	border-radius: 8px;
	transition: background var(--pcf-fast) var(--pcf-ease);
}

.pcf-zone__drop:empty::after {
	content: attr(data-empty);
	display: grid;
	place-items: center;
	min-height: 46px;
	font-size: 0.76rem;
	color: color-mix(in srgb, var(--pcf-muted) 70%, transparent);
}

.pcf-zone__drop.is-over {
	background: color-mix(in srgb, var(--pcf-text) 5%, transparent);
}

/* ---- validity + actions -------------------------------------------------- */

.pcf-validity {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 0.55rem 0.75rem;
	border-radius: 10px;
	font-size: 0.86rem;
	margin-bottom: 0.6rem;
	border: 1px solid var(--pcf-line);
	background: var(--pcf-surface);
}

.pcf-validity.is-valid {
	border-color: color-mix(in srgb, var(--pcf-semi) 45%, var(--pcf-line));
	color: var(--pcf-semi);
}

.pcf-validity.is-invalid {
	border-color: color-mix(in srgb, var(--pcf-forbidden) 45%, var(--pcf-line));
	color: var(--pcf-forbidden);
}

.pcf-validity__list {
	flex-basis: 100%;
	margin: 0.15rem 0 0;
	padding-left: 1.1rem;
	font-size: 0.8rem;
	color: var(--pcf-muted);
}

.pcf-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	margin-top: 0.7rem;
}

.pcf-hint {
	margin: 0.5rem 0 0;
	font-size: 0.76rem;
	color: var(--pcf-muted);
}

/* --------------------------------------------------------------------------
   Card detail drawer
   -------------------------------------------------------------------------- */

.pcf-drawer {
	position: fixed;
	inset: 0;
	z-index: 9998;
	display: grid;
	place-items: end center;
	pointer-events: none;
}

.pcf-drawer__scrim {
	position: absolute;
	inset: 0;
	background: rgba(10, 12, 14, 0.55);
	backdrop-filter: blur(3px);
	opacity: 0;
	transition: opacity var(--pcf-mid) var(--pcf-ease);
}

.pcf-drawer__panel {
	position: relative;
	width: min(100%, 760px);
	max-height: 88vh;
	overflow: auto;
	background: var(--pcf-surface);
	border: 1px solid var(--pcf-line);
	border-bottom: 0;
	border-radius: var(--pcf-radius-lg) var(--pcf-radius-lg) 0 0;
	padding: 1.4rem;
	transform: translateY(24px);
	opacity: 0;
	transition: transform 340ms var(--pcf-ease), opacity 260ms var(--pcf-ease);
}

.pcf-drawer.is-open {
	pointer-events: auto;
}

.pcf-drawer.is-open .pcf-drawer__scrim {
	opacity: 1;
}

.pcf-drawer.is-open .pcf-drawer__panel {
	transform: translateY(0);
	opacity: 1;
}

.pcf-drawer__close {
	position: absolute;
	top: 0.9rem;
	right: 0.9rem;
}

.pcf-detail {
	display: grid;
	grid-template-columns: 180px minmax(0, 1fr);
	gap: 1.2rem;
}

.pcf-detail__art {
	width: 100%;
	border-radius: 10px;
	border: 1px solid var(--pcf-line);
	background: var(--pcf-surface-2);
}

.pcf-detail__title {
	margin: 0 0 0.2rem;
	font-size: 1.35rem;
	line-height: 1.15;
}

.pcf-detail__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0.6rem 0 0.9rem;
}

.pcf-detail__text {
	font-size: 0.9rem;
	color: var(--pcf-muted);
	white-space: pre-line;
	border-left: 2px solid var(--pcf-line);
	padding-left: 0.8rem;
}

.pcf-detail__rulings {
	margin-top: 1.2rem;
	padding-top: 1rem;
	border-top: 1px solid var(--pcf-line);
}

.pcf-detail__rulings p {
	font-size: 0.9rem;
	padding-left: 1.1rem;
	position: relative;
}

.pcf-detail__rulings p::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--pcf-line);
}

.pcf-ruling__sub {
	margin: 1rem 0 0.5rem;
	font-size: 0.74rem;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--pcf-muted);
}

/* --------------------------------------------------------------------------
   Decklist archive
   -------------------------------------------------------------------------- */

.pcf-decks {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 0.9rem;
}

.pcf-deckcard {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	background: var(--pcf-surface);
	border: 1px solid var(--pcf-line);
	border-radius: var(--pcf-radius-md);
	padding: 0.9rem;
	text-decoration: none;
	color: inherit;
	transition: transform var(--pcf-mid) var(--pcf-ease), box-shadow var(--pcf-mid) var(--pcf-ease);
}

.pcf-deckcard:hover {
	transform: translateY(-3px);
	box-shadow: var(--pcf-shadow-hover);
	color: inherit;
}

.pcf-deckcard__sig {
	display: flex;
	gap: 0.35rem;
}

.pcf-deckcard__sig img {
	width: 33%;
	aspect-ratio: 421 / 614;
	object-fit: cover;
	border-radius: 6px;
	border: 1px solid var(--pcf-line);
	background: var(--pcf-surface-2);
}

.pcf-deckcard__title {
	font-size: 1rem;
	line-height: 1.25;
	margin: 0;
}

.pcf-deckcard__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	margin-top: auto;
}

/* --------------------------------------------------------------------------
   Tournaments
   -------------------------------------------------------------------------- */

.pcf-events {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 0.9rem;
}

.pcf-event {
	display: grid;
	gap: 0.55rem;
	background: var(--pcf-surface);
	border: 1px solid var(--pcf-line);
	border-radius: var(--pcf-radius-md);
	padding: 1rem;
	text-decoration: none;
	color: inherit;
	transition: transform var(--pcf-mid) var(--pcf-ease), box-shadow var(--pcf-mid) var(--pcf-ease);
}

.pcf-event:hover {
	transform: translateY(-3px);
	box-shadow: var(--pcf-shadow-hover);
	color: inherit;
}

.pcf-event__date {
	font-size: 0.74rem;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--pcf-muted);
	font-variant-numeric: tabular-nums;
}

.pcf-event__title {
	font-size: 1.08rem;
	line-height: 1.2;
	margin: 0;
}

.pcf-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.92rem;
}

.pcf-table th {
	text-align: left;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--pcf-muted);
	font-weight: 400;
	padding: 0.5rem 0.6rem;
	border-bottom: 1px solid var(--pcf-line);
}

.pcf-table td {
	padding: 0.55rem 0.6rem;
	border-bottom: 1px solid color-mix(in srgb, var(--pcf-line) 60%, transparent);
}

.pcf-table tbody tr {
	transition: background var(--pcf-fast) var(--pcf-ease);
}

.pcf-table tbody tr:hover {
	background: var(--pcf-surface-2);
}

.pcf-table__rank {
	font-variant-numeric: tabular-nums;
	color: var(--pcf-muted);
	width: 4rem;
}

.pcf-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* --------------------------------------------------------------------------
   Banlist
   -------------------------------------------------------------------------- */

.pcf-banlist {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1rem;
}

.pcf-banlist__col h3 {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--pcf-line);
	font-size: 0.86rem;
	text-transform: uppercase;
	letter-spacing: 0.09em;
}

.pcf-banlist__col--forbidden h3 { color: var(--pcf-forbidden); }
.pcf-banlist__col--limited h3   { color: var(--pcf-limited); }
.pcf-banlist__col--semi h3      { color: var(--pcf-semi); }

/* --------------------------------------------------------------------------
   Pagination + loading
   -------------------------------------------------------------------------- */

.pcf-pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	margin-top: 1.4rem;
}

.pcf-pager__info {
	font-size: 0.84rem;
	color: var(--pcf-muted);
	font-variant-numeric: tabular-nums;
}

.pcf-loading {
	position: relative;
	min-height: 120px;
}

.pcf-loading::after {
	content: "";
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--pcf-bg) 55%, transparent);
	border-radius: var(--pcf-radius);
}

.pcf-skeleton {
	border-radius: 8px;
	background: linear-gradient(90deg, var(--pcf-surface-2) 25%, color-mix(in srgb, var(--pcf-surface-2) 60%, var(--pcf-surface)) 37%, var(--pcf-surface-2) 63%);
	background-size: 400% 100%;
	animation: pcfShimmer 1.4s ease infinite;
	aspect-ratio: 421 / 614;
}

@keyframes pcfShimmer {
	0%   { background-position: 100% 50%; }
	100% { background-position: 0 50%; }
}

/* reveal on scroll --------------------------------------------------------- */

.pcf-reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 460ms var(--pcf-ease), transform 460ms var(--pcf-ease);
	transition-delay: var(--pcf-delay, 0ms);
}

.pcf-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
	.pcf-builder {
		grid-template-columns: 200px minmax(0, 1fr);
	}

	.pcf-builder__deck {
		grid-column: 1 / -1;
	}
}

@media (max-width: 820px) {
	.pcf-builder {
		grid-template-columns: minmax(0, 1fr);
	}

	/* The preview panel costs too much room on a phone: tapping a card opens
	   the full drawer instead, which shows the same thing plus its rulings. */
	.pcf-builder__preview {
		display: none;
	}

	.pcf-grid--pool {
		grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
	}

	.pcf-grid--deck {
		grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
	}
}

@media (max-width: 640px) {
	.pcf-toolbar {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.pcf-toolbar > *:first-child {
		grid-column: 1 / -1;
	}

	.pcf-grid {
		grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
	}

	.pcf-detail {
		grid-template-columns: minmax(0, 1fr);
	}

	.pcf-detail__art {
		max-width: 200px;
	}

	.pcf-drawer__panel {
		padding: 1.1rem;
		max-height: 92vh;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pcf *,
	.pcf *::before,
	.pcf *::after {
		animation: none !important;
		transition: none !important;
	}

	.pcf-reveal {
		opacity: 1;
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
   Rulings A–Z

   The crawlable index under the rulings search box (templates/rulings.php).
   Deliberately plain and deliberately visible: these anchors are the only
   path to the ~1,300 ruling pages, and links hidden behind display:none are
   both useless to a reader and discounted by search engines.
   --------------------------------------------------------------------------- */

.pcf-az {
	margin-top: 2.4rem;
	padding-top: 1.6rem;
	border-top: 1px solid var(--pcf-line);
}

.pcf-az__title {
	margin: 0 0 0.9rem;
	font-size: 1.05rem;
	letter-spacing: -0.01em;
}

.pcf-az__letters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0 0 1.3rem;
	padding: 0;
	list-style: none;
}

.pcf-az__letter {
	display: block;
	min-width: 2.1rem;
	padding: 0.35rem 0.5rem;
	border: 1px solid var(--pcf-line);
	border-radius: var(--pcf-radius);
	background: var(--pcf-surface);
	color: var(--pcf-text);
	font-variant-numeric: tabular-nums;
	text-align: center;
	text-decoration: none;
}

.pcf-az__letter:hover,
.pcf-az__letter:focus-visible {
	background: var(--pcf-surface-2);
}

.pcf-az__letter.is-on {
	background: var(--pcf-accent);
	border-color: var(--pcf-accent);
	color: #ffffff;
}

/* Columns rather than one tall list: fifty card names in a single stack is a
   lot of scrolling on a phone, and the names are short enough to pair up. */
.pcf-az__list {
	columns: 2;
	column-gap: 1.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pcf-az__list li {
	break-inside: avoid;
	margin-bottom: 0.4rem;
}

.pcf-az__list a {
	color: var(--pcf-text);
	text-decoration: none;
	border-bottom: 1px solid var(--pcf-line);
}

.pcf-az__list a:hover,
.pcf-az__list a:focus-visible {
	border-bottom-color: var(--pcf-accent);
}

@media (max-width: 600px) {
	.pcf-az__list {
		columns: 1;
	}

	/* Comfortably past the 24px minimum tap target on a phone. */
	.pcf-az__letter {
		min-width: 2.6rem;
		padding: 0.5rem 0.6rem;
	}
}

/* ==========================================================================
   Home — [pcf_home]

   The one screen of the site that is prose, and the one rendered by PHP rather
   than by JavaScript: it has to say what this place is before a single script
   has run. Everything here is built on the tokens above, so it follows the
   light and dark themes without a second palette.

   The red is the one from the logo's triangle and it is used like the logo
   uses it: once per area, never as a surface.
   ========================================================================== */

/* The block paints its own ground, and has to.

   .pcf follows the reader's OS through prefers-color-scheme; the WordPress
   theme around it does not. On a machine set to dark that put near-white
   headings and dark panels onto the theme's white page — the section titles
   disappeared completely and the rest read as a mistake. A block that sets its
   own colours must carry the surface those colours were chosen against, rather
   than borrow whatever the page behind it happens to be. */
.pcf-home {
	--pcf-red: #e4231b;
	--pcf-home-gap: clamp(48px, 7vw, 96px);
	display: flex;
	flex-direction: column;
	gap: var(--pcf-home-gap);
	background: var(--pcf-bg);
	color: var(--pcf-text);
	border-radius: var(--pcf-radius-lg);
	padding: clamp(28px, 4vw, 56px) clamp(18px, 3vw, 44px);
}

html[data-theme="dark"] .pcf-home { --pcf-red: #ff3b30; }

@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]) .pcf-home { --pcf-red: #ff3b30; }
}

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

.pcf-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	align-items: center;
	gap: clamp(24px, 5vw, 64px);
}

.pcf-hero__eyebrow {
	margin: 0 0 14px;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--pcf-muted);
}

/* the rule under the eyebrow is the logo's red, and the only place it appears
   at full strength */
.pcf-hero__eyebrow::after {
	content: "";
	display: block;
	width: 34px;
	height: 2px;
	margin-top: 10px;
	background: var(--pcf-red);
	border-radius: 2px;
}

.pcf-hero__title {
	margin: 0;
	/* fluid rather than stepped: the title is the one element that should fill
	   the width it is given at any screen size */
	font-size: clamp(32px, 5.4vw, 60px);
	line-height: 1.04;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.pcf-hero__lead {
	margin: 18px 0 0;
	max-width: 48ch;
	font-size: clamp(15px, 1.5vw, 18px);
	color: var(--pcf-muted);
}

.pcf-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 28px;
}

.pcf-btn--lg {
	padding: 14px 26px;
	font-size: 15px;
}

/* ---------- the card fan ---------- */

.pcf-fan {
	position: relative;
	display: grid;
	place-items: center;
	min-height: clamp(220px, 26vw, 320px);
}

/* One card back, drawn rather than loaded: a bordered face carrying the logo's
   own composition — a large inverted triangle with the red one beneath it. */
.pcf-fan__card {
	position: absolute;
	width: clamp(112px, 13vw, 164px);
	aspect-ratio: 421 / 614;
	border-radius: 10px;
	/* A fixed dark face in both themes, because that is what the back of a card
	   is — and because built from the theme tokens it came out near-white on
	   the light ground and the whole fan disappeared. The one element here that
	   deliberately does not follow the theme. */
	background: linear-gradient(160deg, #24282c, #141618);
	border: 1px solid #3a3e42;
	/* the inner hairline every card frame has */
	box-shadow: var(--pcf-shadow), inset 0 0 0 4px #1d2023, inset 0 0 0 5px #3a3e42;
	transition: transform 520ms var(--pcf-ease);
	will-change: transform;
}

.pcf-fan__card::before,
.pcf-fan__card::after {
	content: "";
	position: absolute;
	left: 50%;
	translate: -50% 0;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* the big triangle, in the same near-monochrome as everything else */
.pcf-fan__card::before {
	top: 30%;
	width: 46%;
	aspect-ratio: 1 / 0.86;
	background: rgba(243, 243, 242, .22);
}

/* and the red one under it, the single note of colour on the card */
.pcf-fan__card::after {
	top: 58%;
	width: 15%;
	aspect-ratio: 1 / 1.25;
	background: var(--pcf-red);
}

/* Fanned from the start — a stack that only opens on hover shows a phone
   nothing at all, and most of the traffic here is a phone. */
/* nth-of-type, not nth-child: the glow is a span too and sits first in the
   markup, so counting children would shift every card by one. */
.pcf-fan__card:nth-of-type(2) { transform: rotate(-14deg) translate(-46%, 4%); }
.pcf-fan__card:nth-of-type(3) { transform: rotate(0deg) translateY(-5%); z-index: 2; }
.pcf-fan__card:nth-of-type(4) { transform: rotate(14deg) translate(46%, 4%); }

/* a pointer gets the extra flourish; a thumb gets the same picture, still */
@media (hover: hover) {
	.pcf-fan:hover .pcf-fan__card:nth-of-type(2) { transform: rotate(-21deg) translate(-66%, 2%); }
	.pcf-fan:hover .pcf-fan__card:nth-of-type(3) { transform: rotate(0deg) translateY(-12%) scale(1.04); }
	.pcf-fan:hover .pcf-fan__card:nth-of-type(4) { transform: rotate(21deg) translate(66%, 2%); }
}

/* the eye of the logo, suggested rather than drawn */
.pcf-fan__glow {
	position: absolute;
	width: 58%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--pcf-red) 26%, transparent), transparent 68%);
	filter: blur(18px);
	pointer-events: none;
	z-index: 0;
}

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

.pcf-home-h {
	margin: 0 0 22px;
	font-size: clamp(20px, 2.4vw, 26px);
	letter-spacing: -0.02em;
}

/* ---------- the two formats ---------- */

.pcf-formats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 16px;
}

.pcf-format {
	display: flex;
	flex-direction: column;
	padding: clamp(20px, 2.4vw, 30px);
	border: 1px solid var(--pcf-line);
	border-radius: var(--pcf-radius-lg);
	background: var(--pcf-surface);
	transition: transform var(--pcf-mid) var(--pcf-ease), box-shadow var(--pcf-mid) var(--pcf-ease);
}

.pcf-format:hover {
	transform: translateY(-3px);
	box-shadow: var(--pcf-shadow-hover);
}

/* the top edge names the format without a word: red for the house format,
   hairline for the one inherited from 2005 */
.pcf-format--perfect-circle { border-top: 3px solid var(--pcf-red); }
.pcf-format--goat { border-top: 3px solid var(--pcf-text); }

.pcf-format__name {
	margin: 0;
	font-size: clamp(19px, 2vw, 23px);
	letter-spacing: -0.02em;
}

.pcf-format__date {
	margin: 6px 0 0;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pcf-muted);
}

.pcf-format__txt {
	margin: 14px 0 0;
	color: var(--pcf-muted);
}

.pcf-format__acts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	/* pinned to the bottom so two panels of unequal text still line their
	   buttons up */
	margin-top: auto;
	padding-top: 22px;
}

/* ---------- figures ---------- */

.pcf-figures {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 12px;
}

.pcf-figure {
	padding: clamp(16px, 2vw, 24px);
	border: 1px solid var(--pcf-line);
	border-radius: var(--pcf-radius-md);
	background: var(--pcf-surface);
	text-align: center;
}

.pcf-figure__n {
	display: block;
	font-size: clamp(26px, 3.4vw, 38px);
	font-weight: 600;
	letter-spacing: -0.03em;
	/* tabular, or the number jitters sideways while it counts up */
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}

.pcf-figure__l {
	display: block;
	margin-top: 6px;
	font-size: 12.5px;
	color: var(--pcf-muted);
}

/* ---------- feature tiles ---------- */

.pcf-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 14px;
}

.pcf-tile {
	position: relative;
	display: block;
	padding: clamp(20px, 2.2vw, 26px);
	border: 1px solid var(--pcf-line);
	border-radius: var(--pcf-radius-lg);
	background: var(--pcf-surface);
	color: inherit;
	text-decoration: none;
	overflow: hidden;
	transition: transform var(--pcf-mid) var(--pcf-ease), box-shadow var(--pcf-mid) var(--pcf-ease), border-color var(--pcf-mid) var(--pcf-ease);
}

.pcf-tile:hover,
.pcf-tile:focus-visible {
	transform: translateY(-4px);
	border-color: color-mix(in srgb, var(--pcf-text) 28%, transparent);
	box-shadow: var(--pcf-shadow-hover);
}

.pcf-tile:focus-visible { outline: none; }

.pcf-tile__ico {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	margin-bottom: 16px;
	border-radius: 12px;
	background: var(--pcf-surface-2);
	color: var(--pcf-text);
	transition: background var(--pcf-mid) var(--pcf-ease), color var(--pcf-mid) var(--pcf-ease);
}

.pcf-tile:hover .pcf-tile__ico {
	background: var(--pcf-red);
	color: #fff;
}

.pcf-home-ico { width: 21px; height: 21px; display: block; }

.pcf-tile__t {
	margin: 0;
	font-size: 17px;
	letter-spacing: -0.01em;
}

.pcf-tile__p {
	margin: 8px 0 0;
	font-size: 14px;
	color: var(--pcf-muted);
}

/* the arrow lives off the right edge and slides in — it is a hint, not a
   control, so it never takes space the text could use */
.pcf-tile__go {
	position: absolute;
	right: 18px;
	bottom: 16px;
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity var(--pcf-mid) var(--pcf-ease), transform var(--pcf-mid) var(--pcf-ease);
	color: var(--pcf-red);
	font-size: 18px;
	line-height: 1;
}

.pcf-tile:hover .pcf-tile__go,
.pcf-tile:focus-visible .pcf-tile__go {
	opacity: 1;
	transform: translateX(0);
}

/* ---------- the two notes ---------- */

.pcf-notes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 16px;
}

.pcf-note-card {
	padding: clamp(20px, 2.4vw, 30px);
	border-radius: var(--pcf-radius-lg);
	background: var(--pcf-surface-2);
}

.pcf-note-card__t {
	margin: 0;
	font-size: 18px;
	letter-spacing: -0.01em;
}

.pcf-note-card__p {
	margin: 10px 0 0;
	color: var(--pcf-muted);
}

/* ---------- closing ---------- */

.pcf-home-end {
	padding: clamp(32px, 5vw, 60px) clamp(20px, 4vw, 48px);
	border: 1px solid var(--pcf-line);
	border-radius: var(--pcf-radius-lg);
	background: var(--pcf-surface);
	text-align: center;
}

.pcf-home-end__t {
	margin: 0;
	font-size: clamp(22px, 3vw, 32px);
	letter-spacing: -0.02em;
}

.pcf-home-end__p {
	margin: 12px auto 24px;
	max-width: 46ch;
	color: var(--pcf-muted);
}

/* ---------- narrow ---------- */

@media (max-width: 860px) {
	.pcf-hero {
		grid-template-columns: 1fr;
		text-align: left;
	}

	/* the fan goes above the words on a phone: it is the thing that says what
	   site this is before a line has been read */
	.pcf-hero__text { order: 2; }
	.pcf-fan { order: 1; }
}

@media (max-width: 420px) {
	.pcf-hero__cta .pcf-btn { flex: 1 1 100%; }
	.pcf-format__acts .pcf-btn { flex: 1 1 100%; }
}

/* The "just launched" note under the figures.

   Not a card: it explains the tiles above it rather than standing beside them,
   and giving it the same border and radius as a figure would read as one more
   thing to look at. A dot, a line of weight, and the rest quiet. */
.pcf-launch {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 10px;
	margin: 14px 0 0;
	padding: 14px 16px;
	border-radius: var(--pcf-radius-md);
	background: var(--pcf-surface-2);
	font-size: 14px;
	color: var(--pcf-muted);
}

.pcf-launch__dot {
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--pcf-red);
	/* nudged onto the text's baseline, which a flex baseline will not do for
	   an empty box */
	transform: translateY(-1px);
}

.pcf-launch__t { color: var(--pcf-text); font-weight: 600; }

.pcf-launch__p { flex: 1 1 32ch; min-width: 0; }

/* The language switch sits above the eyebrow on the home page: it is a setting,
   not part of the pitch, so it reads small and stays out of the title's way. */
.pcf-home .pcf-lang {
	margin-bottom: 18px;
}

/* ==========================================================================
   The home page inside the app shell

   The landing page is built from .pcf (this stylesheet) but is mounted inside
   .pcf-app so it can carry the same header as every other screen. Two things
   have to be reconciled for that to work, and both are here rather than in
   pcf-app.css because this is the file that owns .pcf.
   ========================================================================== */

/* 1. One palette, not two.

   .pcf and .pcf-app each define a full set of tokens, with the same values but
   different names — and .pcf-app is where the theme toggle writes, since the
   attribute it flips lives there. Left alone, the header would follow the
   toggle and the page under it would follow the operating system, and clicking
   the sun would light half the screen.

   So inside the app, .pcf stops defining its own and takes the app's. Every
   rule written against --pcf-* keeps working untouched. */
/* Three selectors, not one, and the reason is specificity.

   `html[data-theme="dark"] .pcf` and `html:not([data-theme="light"]) .pcf`
   above are (0,2,1). A plain `.pcf-app .pcf` is (0,2,0) and loses to both — so
   the bridge was silently doing nothing whenever the reader's machine was in
   dark mode: the app chrome stayed light, .pcf went dark, and the page came
   out with near-white headings on a near-white ground.

   The `html` prefix ties on specificity and wins on order; the two stamped
   variants win outright. Measured, not assumed: the headings were rendering
   #f3f3f2 on #f6f6f3. */
html .pcf-app .pcf,
html[data-theme="dark"] .pcf-app .pcf,
html[data-theme="light"] .pcf-app .pcf {
	--pcf-bg: var(--bg);
	--pcf-surface: var(--surface);
	--pcf-surface-2: var(--surface-2);
	--pcf-text: var(--text);
	--pcf-muted: var(--muted);
	--pcf-line: var(--line);
	--pcf-accent: var(--accent);

	--pcf-forbidden: var(--forbidden);
	--pcf-limited: var(--limited);
	--pcf-semi: var(--semi);
	--pcf-monster: var(--monster);
	--pcf-spell: var(--spell);
	--pcf-trap: var(--trap);
}

/* 2. This one page scrolls.

   .pcf-app is sized to exactly one viewport and clips what does not fit —
   right for a deckbuilder whose panes scroll inside themselves, wrong for a
   page you read top to bottom, where it would cut the landing page off at the
   fold. Two classes deep so it beats the single-class rule it overrides
   whichever order the two stylesheets happen to load in. */
.pcf-app.pcf-app--home {
	height: auto;
	min-height: 0;
	overflow: visible;
	border: 0;
	border-radius: 0;
}

/* The bar stays in reach on a long page, which is the whole reason the header
   is here: the way on to the deckbuilder should not be a scroll away. */
.pcf-app--home .site-head {
	position: sticky;
	top: 0;
	z-index: 30;
}

/* The shell already runs edge to edge, so the page does not need to break out
   of a container that is no longer there. */
.pcf-app--home .pcf--wide {
	width: auto;
	max-width: var(--pcf-max-wide, 1440px);
	left: auto;
	transform: none;
	margin-inline: auto;
}

/* Sitting on the app's own ground, the block no longer has to paint one: that
   was there for the themed page, whose background it could not control. */
.pcf-app--home .pcf-home {
	background: transparent;
	border-radius: 0;
	padding-inline: clamp(16px, 3vw, 40px);
}


/* The app makes every link inherit its colour — `.pcf-app a { color: inherit }`,
   which is right for the app's own chrome, where links are text. It is (0,1,1),
   and .pcf-btn--solid is (0,1,0), so once the landing page moved inside the
   shell that rule took over the buttons: the solid ones kept their near-white
   background and lost their dark label, and came out as blank white pills.

   Scoped through both wrappers these are (0,3,0) and the button owns its own
   colours again. */
.pcf-app .pcf .pcf-btn {
	color: var(--pcf-text);
}

.pcf-app .pcf .pcf-btn--solid,
.pcf-app .pcf .pcf-btn--solid:hover {
	background: var(--pcf-text);
	color: var(--pcf-bg);
	border-color: var(--pcf-text);
}

/* A tile whose value is a word, not a number: it sits in the same row as the
   counts, so it has to hold the same shape without pretending to be a figure.
   Smaller, and not tabular — a word set in tabular numerals reads as a glitch. */
.pcf-figure--word .pcf-figure__n {
	font-size: clamp(17px, 2vw, 21px);
	font-variant-numeric: normal;
	letter-spacing: -.01em;
	/* two short lines rather than one long one on a narrow tile */
	text-wrap: balance;
}