/**
 * hand-rankings-page.css
 *
 * Editorial styling for /poker/poker-hand-rankings/ — the Hand
 * Rankings masterclass page. Layered on top of texas-holdem.css
 * (which provides the base section / typography / felt design
 * tokens). All selectors are scoped under `body.btf-hr-page` so
 * they don't leak.
 *
 * Mobile-first. Each component owns its own breakpoints.
 */

/* ── Section header spacing ────────────────────────────────────────
   The .btf-th-section-h block ends with a 0-margin .btf-th-lede; the
   widget that follows would butt up against it without an explicit
   gap. Match the 1.5rem the pot-odds page uses inline. */
body.btf-hr-page .btf-th-section-h { margin-bottom: 1.5rem; }

/* ── Closing summary eyebrow ───────────────────────────────────────
   The shared .btf-th-summary heading collapses tight against the
   eyebrow because the summary uses .35em h2 top-margin instead of
   the normal .6em eyebrow bottom-margin. Push them apart on this
   page so the summary header breathes like every other section. */
body.btf-hr-page .btf-th-summary .btf-th-eyebrow {
	display: inline-flex;
	margin-bottom: .9em;
}

/* ── 1. Hero royal-flush card fan ─────────────────────────────────── */
body.btf-hr-page .btf-hr-hero .btf-th-hero-body {
	align-items: center;
}
body.btf-hr-page .btf-hr-hero-cards {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0;
	padding: 1rem 0 0;
	perspective: 1000px;
	min-height: 140px;
}
body.btf-hr-page .btf-hr-hero-cards .btf-hr-card.btf-hr-card--lg {
	width: 64px;
	height: 92px;
	font-size: 1.4em;
	box-shadow: 0 14px 30px rgba( 0, 0, 0, .35 );
	margin: 0 -8px;
}
body.btf-hr-page .btf-hr-hero-cards .btf-hr-card:nth-child(1) { transform: rotate(-12deg) translateX(20px); }
body.btf-hr-page .btf-hr-hero-cards .btf-hr-card:nth-child(2) { transform: rotate(-6deg)  translateX(8px) translateY(-4px); }
body.btf-hr-page .btf-hr-hero-cards .btf-hr-card:nth-child(3) { transform: rotate(0deg)   translateY(-8px); z-index: 2; }
body.btf-hr-page .btf-hr-hero-cards .btf-hr-card:nth-child(4) { transform: rotate(6deg)   translateX(-8px) translateY(-4px); }
body.btf-hr-page .btf-hr-hero-cards .btf-hr-card:nth-child(5) { transform: rotate(12deg)  translateX(-20px); }
@media ( min-width: 700px ) {
	body.btf-hr-page .btf-hr-hero-cards .btf-hr-card.btf-hr-card--lg {
		width: 80px;
		height: 112px;
	}
}

/* ── 2. Card primitive ────────────────────────────────────────────── */
body.btf-hr-page .btf-hr-card {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 50px;
	background: #fafaf5;
	border: 1px solid #222;
	border-radius: 4px;
	font-family: var( --th-serif );
	font-weight: 500;
	box-shadow: 0 1px 0 rgba( 0, 0, 0, .15 ), inset 0 0 0 1px #fff;
	flex-shrink: 0;
	line-height: 1;
}
body.btf-hr-page .btf-hr-card--red   { color: #a33b2a; }
body.btf-hr-page .btf-hr-card--black { color: #141914; }
body.btf-hr-page .btf-hr-card .rank { font-size: 1.1rem; }
body.btf-hr-page .btf-hr-card .rank.is-ten { font-size: .9rem; letter-spacing: -.05em; }
body.btf-hr-page .btf-hr-card .suit { font-size: .8rem; margin-left: 1px; }
body.btf-hr-page .btf-hr-card--lg .rank { font-size: 1.7rem; }
body.btf-hr-page .btf-hr-card--lg .rank.is-ten { font-size: 1.4rem; letter-spacing: -.05em; }
body.btf-hr-page .btf-hr-card--lg .suit { font-size: 1.15rem; }


/* ── 3. BigStats overview tiles ───────────────────────────────────── */
body.btf-hr-page .btf-hr-bigstats {
	background: linear-gradient( 160deg, var( --th-forest ), var( --th-forest-2 ) );
	color: var( --th-cream );
	border-radius: 18px;
	padding: 1.4rem;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.2rem;
	position: relative;
	overflow: hidden;
}
body.btf-hr-page .btf-hr-bigstats::after {
	content: "";
	position: absolute;
	top: -30%;
	right: -10%;
	width: 50%;
	height: 160%;
	background: radial-gradient( ellipse, rgba( 201, 162, 74, .10 ), transparent 60% );
	pointer-events: none;
}
body.btf-hr-page .btf-hr-bigstat { position: relative; z-index: 1; }
body.btf-hr-page .btf-hr-bigstat-l {
	font-family: var( --th-mono );
	font-size: .66rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba( 243, 238, 226, .55 );
}
body.btf-hr-page .btf-hr-bigstat-v {
	font-family: var( --th-serif );
	font-size: clamp( 1.4rem, 2.5vw, 2rem );
	font-weight: 300;
	letter-spacing: -.02em;
	line-height: 1.1;
	margin-top: .3em;
	color: var( --th-cream );
}
body.btf-hr-page .btf-hr-bigstat-v small {
	display: block;
	font-family: var( --th-sans );
	font-size: .7rem;
	color: rgba( 243, 238, 226, .55 );
	font-weight: 400;
	margin-top: .4em;
	letter-spacing: 0;
}
@media ( min-width: 700px ) {
	body.btf-hr-page .btf-hr-bigstats {
		grid-template-columns: repeat( 2, 1fr );
		padding: 2rem;
	}
}
@media ( min-width: 1000px ) {
	body.btf-hr-page .btf-hr-bigstats {
		grid-template-columns: repeat( 5, 1fr );
		gap: 1rem;
	}
}


/* ── 4. Ladder cheatsheet ─────────────────────────────────────────── */
body.btf-hr-page .btf-hr-ladder {
	background: var( --th-cream-2 );
	border: 1px solid var( --th-hair );
	border-radius: 18px;
	padding: 1.4rem 1.2rem;
}
body.btf-hr-page .btf-hr-ladder-rows {
	display: flex;
	flex-direction: column;
	gap: .5rem;
}
body.btf-hr-page .btf-hr-ladder-row {
	display: grid;
	grid-template-columns: 2em 1fr auto;
	gap: .7rem;
	align-items: center;
	padding: .7rem .4rem;
	border-radius: 8px;
	transition: background .15s;
}
body.btf-hr-page .btf-hr-ladder-row:hover { background: var( --th-cream-3 ); }
body.btf-hr-page .btf-hr-ladder-pos {
	font-family: var( --th-mono );
	font-size: .78rem;
	color: var( --th-muted );
	letter-spacing: .05em;
	font-weight: 500;
}
body.btf-hr-page .btf-hr-ladder-name {
	font-family: var( --th-serif );
	font-size: 1.05rem;
	font-weight: 400;
	letter-spacing: -.01em;
	color: var( --th-ink );
}
body.btf-hr-page .btf-hr-ladder-cards { display: none; }
body.btf-hr-page .btf-hr-ladder-cards .btf-hr-card { width: 24px; height: 34px; border-radius: 3px; }
body.btf-hr-page .btf-hr-ladder-cards .btf-hr-card .rank { font-size: .78rem; }
body.btf-hr-page .btf-hr-ladder-cards .btf-hr-card .suit { font-size: .55rem; }
body.btf-hr-page .btf-hr-ladder-bar {
	grid-column: 1 / -1;
	height: 8px;
	background: var( --th-cream-3 );
	border-radius: 4px;
	overflow: hidden;
	border: 1px solid var( --th-hair );
}
body.btf-hr-page .btf-hr-ladder-bar span {
	display: block;
	height: 100%;
	background: linear-gradient( 90deg, var( --th-forest ) 0%, var( --th-gold ) 100% );
	border-radius: 3px;
}
body.btf-hr-page .btf-hr-ladder-odds { display: none; }
body.btf-hr-page .btf-hr-ladder-foot {
	margin-top: 1.4rem;
	padding-top: 1.2rem;
	border-top: 1px solid var( --th-hair );
	display: flex;
	flex-direction: column;
	gap: .4rem;
	font-family: var( --th-mono );
	font-size: .72rem;
	color: var( --th-muted );
	letter-spacing: .06em;
}
body.btf-hr-page .btf-hr-ladder-foot b {
	color: var( --th-ink );
	font-family: var( --th-serif );
	font-weight: 500;
	font-size: .95rem;
	letter-spacing: 0;
	margin-right: .5em;
	text-transform: none;
}
@media ( min-width: 820px ) {
	body.btf-hr-page .btf-hr-ladder { padding: 2rem 2.2rem; }
	body.btf-hr-page .btf-hr-ladder-row {
		grid-template-columns: 2.4em 11em auto 1fr 8em;
		gap: 1.2rem;
	}
	body.btf-hr-page .btf-hr-ladder-cards { display: flex; gap: .18rem; }
	body.btf-hr-page .btf-hr-ladder-bar { grid-column: auto; }
	body.btf-hr-page .btf-hr-ladder-odds {
		display: block;
		font-family: var( --th-mono );
		font-size: .78rem;
		color: var( --th-ink-2 );
		letter-spacing: .04em;
		text-align: right;
	}
	body.btf-hr-page .btf-hr-ladder-foot { flex-direction: row; justify-content: space-between; gap: 1.5rem; }
}


/* ── 5. Expandable rankings list ──────────────────────────────────── */
body.btf-hr-page .btf-hr-rank-list {
	display: flex;
	flex-direction: column;
	gap: .8rem;
}
body.btf-hr-page .btf-hr-rank-row {
	background: var( --th-cream-2 );
	border: 1px solid var( --th-hair );
	border-radius: 14px;
	padding: 1.2rem;
	display: grid;
	/* Mobile: number + info side-by-side; cards drop to a second row
	   spanning the full width so they don't squeeze the rank name. */
	grid-template-columns: auto 1fr;
	gap: 1rem;
	align-items: center;
	cursor: pointer;
	transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease, background .2s ease;
	position: relative;
	overflow: hidden;
}
body.btf-hr-page .btf-hr-rank-row > .btf-hr-rank-cards {
	/* Skip column 1 (the rank number) so the cards line up under
	   .btf-hr-rank-info instead of butting against the left edge. */
	grid-column: 2 / -1;
	justify-content: flex-start;
}
body.btf-hr-page .btf-hr-rank-row:hover {
	border-color: var( --th-forest );
	transform: translateY( -1px );
	box-shadow: 0 8px 20px rgba( 0, 0, 0, .06 );
}
body.btf-hr-page .btf-hr-rank-row.is-expanded {
	background: var( --th-forest );
	color: var( --th-cream );
	border-color: var( --th-forest );
}
body.btf-hr-page .btf-hr-rank-num {
	font-family: var( --th-mono );
	font-size: .7rem;
	letter-spacing: .14em;
	color: var( --th-muted );
	min-width: 2em;
}
body.btf-hr-page .btf-hr-rank-row.is-expanded .btf-hr-rank-num { color: rgba( 243, 238, 226, .65 ); }
body.btf-hr-page .btf-hr-rank-num b {
	display: block;
	font-family: var( --th-serif );
	font-size: 2.2rem;
	line-height: 1;
	font-weight: 300;
	color: var( --th-ink );
	letter-spacing: -.02em;
	margin-top: .15em;
}
body.btf-hr-page .btf-hr-rank-row.is-expanded .btf-hr-rank-num b { color: var( --th-cream ); }

body.btf-hr-page .btf-hr-rank-name {
	font-family: var( --th-serif );
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -.02em;
	color: var( --th-ink );
	margin: 0 0 .15em;
}
body.btf-hr-page .btf-hr-rank-row.is-expanded .btf-hr-rank-name { color: var( --th-cream ); }
body.btf-hr-page .btf-hr-rank-desc {
	font-size: .9rem;
	color: var( --th-ink-2 );
	margin: 0;
	line-height: 1.5;
	max-width: 55ch;
}
body.btf-hr-page .btf-hr-rank-row.is-expanded .btf-hr-rank-desc { color: rgba( 243, 238, 226, .85 ); }

body.btf-hr-page .btf-hr-rank-cards {
	display: flex;
	gap: .25rem;
	align-items: center;
}
body.btf-hr-page .btf-hr-rank-row .btf-hr-card { width: 28px; height: 40px; border-radius: 3px; }
body.btf-hr-page .btf-hr-rank-row .btf-hr-card .rank { font-size: .85rem; }
body.btf-hr-page .btf-hr-rank-row .btf-hr-card .suit { font-size: .65rem; }
@media ( min-width: 700px ) {
	body.btf-hr-page .btf-hr-rank-row {
		padding: 1.4rem 1.6rem;
		gap: 1.5rem;
		/* Desktop: cards return to the right column inline with the
		   number + info row. */
		grid-template-columns: auto 1fr auto;
	}
	body.btf-hr-page .btf-hr-rank-row > .btf-hr-rank-cards {
		grid-column: auto;
		justify-content: flex-end;
	}
	body.btf-hr-page .btf-hr-rank-row .btf-hr-card { width: 34px; height: 48px; }
	body.btf-hr-page .btf-hr-rank-row .btf-hr-card .rank { font-size: 1rem; }
	body.btf-hr-page .btf-hr-rank-row .btf-hr-card .suit { font-size: .75rem; }
	body.btf-hr-page .btf-hr-rank-name { font-size: 1.7rem; }
}

body.btf-hr-page .btf-hr-rarity {
	margin-top: .7rem;
	max-width: 32rem;
}
body.btf-hr-page .btf-hr-rarity-bar {
	height: 6px;
	background: var( --th-cream-3 );
	border-radius: 3px;
	overflow: hidden;
	position: relative;
}
body.btf-hr-page .btf-hr-rank-row.is-expanded .btf-hr-rarity-bar { background: rgba( 243, 238, 226, .12 ); }
body.btf-hr-page .btf-hr-rarity-bar span {
	display: block;
	height: 100%;
	background: linear-gradient( 90deg, var( --th-gold ), var( --th-gold-soft ) );
	border-radius: 3px;
	transition: width .3s ease;
}
body.btf-hr-page .btf-hr-rarity-meta {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-top: .4em;
	font-family: var( --th-mono );
	font-size: .66rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var( --th-muted );
}
body.btf-hr-page .btf-hr-rank-row.is-expanded .btf-hr-rarity-meta { color: rgba( 243, 238, 226, .55 ); }
body.btf-hr-page .btf-hr-rarity-pct { color: var( --th-ink-2 ); }
body.btf-hr-page .btf-hr-rank-row.is-expanded .btf-hr-rarity-pct { color: rgba( 243, 238, 226, .65 ); }

body.btf-hr-page .btf-hr-rank-detail {
	grid-column: 1 / -1;
	padding-top: 1.4rem;
	margin-top: .6rem;
	border-top: 1px solid rgba( 243, 238, 226, .18 );
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.2rem;
}
/* SSR emits the detail panel for every rank row so crawlers and
   JS-disabled users see the full content. When JS is enabled the
   inline <html class="js"> bootstrap script in functions.php sets
   the flag, and only THEN do we collapse the non-expanded rows so
   the visual state matches what the JS hydrator will replace this
   with on load. With JS disabled the .js class never lands, every
   row stays expanded, and every "Why it sits here" + "Beats" line
   is visible to the reader. */
html.js body.btf-hr-page .btf-hr-rank-row:not(.is-expanded) .btf-hr-rank-detail {
	display: none;
}

/* ── SSR fallback styling ────────────────────────────────────────
   The comparator / kicker / quiz blocks render their FULL data set
   server-side (every preset, scenario, question + answer) so that
   crawlers without a JS render see the actual content, not just a
   mount-point. The JS hydrator wipes all of this on load and
   replaces it with the interactive single-active-view widget; these
   styles only matter pre-hydration (the brief flash before JS runs)
   and for non-rendering crawlers. */
body.btf-hr-page .btf-hr-comp-static-list,
body.btf-hr-page .btf-hr-kk-static-list,
body.btf-hr-page .btf-hr-quiz-static-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2rem;
}
body.btf-hr-page .btf-hr-comp-static-title,
body.btf-hr-page .btf-hr-kk-static-title {
	font-family: var( --th-mono );
	font-size: .76rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var( --th-muted );
	margin: 0 0 .8rem;
	font-weight: 600;
}
body.btf-hr-page .btf-hr-quiz-static-item {
	background: var( --th-cream-2 );
	border: 1px solid var( --th-hair );
	border-radius: 12px;
	padding: 1.2rem 1.4rem;
}
body.btf-hr-page .btf-hr-quiz-static-q {
	font-family: var( --th-serif );
	font-size: 1.2rem;
	font-weight: 400;
	letter-spacing: -.01em;
	margin: 0 0 .6rem;
	color: var( --th-ink );
	line-height: 1.3;
}
body.btf-hr-page .btf-hr-quiz-static-answer {
	display: flex;
	gap: .7rem;
	align-items: baseline;
	margin-bottom: .5rem;
}
body.btf-hr-page .btf-hr-quiz-static-tag {
	font-family: var( --th-mono );
	font-size: .68rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var( --th-tip-ink );
	background: var( --th-tip );
	padding: .2em .5em;
	border-radius: 3px;
	font-weight: 700;
}
body.btf-hr-page .btf-hr-quiz-static-name {
	font-family: var( --th-serif );
	font-size: 1.05rem;
	font-weight: 500;
	color: var( --th-ink );
}
body.btf-hr-page .btf-hr-quiz-static-explain {
	font-size: .92rem;
	color: var( --th-ink-2 );
	line-height: 1.55;
}
body.btf-hr-page .prose .btf-hr-quiz-static-explain { margin: 0; }
@media ( min-width: 760px ) {
	body.btf-hr-page .btf-hr-rank-detail { grid-template-columns: repeat( 4, 1fr ); }
}
body.btf-hr-page .btf-hr-rank-stat.is-full { grid-column: 1 / -1; }
body.btf-hr-page .btf-hr-rank-stat-l {
	font-family: var( --th-mono );
	font-size: .66rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var( --th-muted );
}
body.btf-hr-page .btf-hr-rank-row.is-expanded .btf-hr-rank-stat-l { color: rgba( 243, 238, 226, .55 ); }
body.btf-hr-page .btf-hr-rank-stat-v {
	font-family: var( --th-serif );
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 1.1;
	color: var( --th-ink );
	margin-top: .2em;
	letter-spacing: -.01em;
}
body.btf-hr-page .btf-hr-rank-row.is-expanded .btf-hr-rank-stat-v { color: var( --th-cream ); }
body.btf-hr-page .btf-hr-rank-stat.is-full .btf-hr-rank-stat-v {
	font-size: 1.05rem;
	line-height: 1.5;
	font-family: var( --th-serif );
}


/* ── 6. Generic widget shell + callout ────────────────────────────── */
body.btf-hr-page .btf-hr-widget {
	background: var( --th-cream-2 );
	border: 1px solid var( --th-hair );
	border-radius: 16px;
	padding: clamp( 1.1rem, 2vw, 1.8rem );
}
/* Specificity bump — `body.btf-th-page .prose p { margin: 0 }` in
   texas-holdem.css beats a single-class selector here, killing the
   gap between the lede and the widget body. Adding `.prose` lifts
   us above it. */
body.btf-hr-page .prose .btf-hr-widget-lede {
	margin: 0 0 1.4rem;
	color: var( --th-ink-2 );
	font-size: .95rem;
	line-height: 1.5;
	max-width: 62ch;
}
body.btf-hr-page .btf-hr-callout {
	border-radius: 10px;
	padding: 1rem 1.1rem;
	margin: 1.2rem 0 0;
	display: flex;
	gap: .8rem;
	align-items: flex-start;
	font-size: .92rem;
	line-height: 1.5;
}
body.btf-hr-page .btf-hr-callout-tag {
	font-family: var( --th-mono );
	font-size: .68rem;
	letter-spacing: .14em;
	font-weight: 700;
	padding: .25rem .5rem;
	border-radius: 3px;
	flex-shrink: 0;
	margin-top: .15em;
}
body.btf-hr-page .btf-hr-callout--tip {
	background: var( --th-tip );
	color: var( --th-tip-ink );
}
body.btf-hr-page .btf-hr-callout--tip .btf-hr-callout-tag {
	background: var( --th-tip-ink );
	color: var( --th-tip );
}
body.btf-hr-page .btf-hr-callout--pro {
	background: var( --th-pro );
	color: var( --th-pro-ink );
}
body.btf-hr-page .btf-hr-callout--pro .btf-hr-callout-tag {
	background: var( --th-pro-ink );
	color: var( --th-pro );
}


/* ── 7. Comparator ────────────────────────────────────────────────── */
body.btf-hr-page .btf-hr-comp {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	align-items: stretch;
	margin-top: 1rem;
}
body.btf-hr-page .btf-hr-comp-side {
	background: var( --th-cream );
	border: 1px solid var( --th-hair );
	border-radius: 14px;
	padding: 1.4rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	align-items: center;
	text-align: center;
	transition: background .2s, border-color .2s, color .2s;
}
body.btf-hr-page .btf-hr-comp-side.is-winner {
	background: var( --th-forest );
	color: var( --th-cream );
	border-color: var( --th-forest );
}
body.btf-hr-page .btf-hr-comp-side.is-winner .btf-hr-comp-rank,
body.btf-hr-page .btf-hr-comp-side.is-winner .btf-hr-comp-name {
	color: var( --th-gold-soft );
}
body.btf-hr-page .btf-hr-comp-cards { display: flex; gap: .35rem; }
body.btf-hr-page .btf-hr-comp-side .btf-hr-card { width: 44px; height: 62px; }
body.btf-hr-page .btf-hr-comp-side .btf-hr-card .rank { font-size: 1.3rem; }
body.btf-hr-page .btf-hr-comp-side .btf-hr-card .suit { font-size: .9rem; }
body.btf-hr-page .btf-hr-comp-rank {
	font-family: var( --th-mono );
	font-size: .7rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var( --th-muted );
}
body.btf-hr-page .btf-hr-comp-name {
	font-family: var( --th-serif );
	font-size: 1.25rem;
	font-weight: 400;
	letter-spacing: -.01em;
	color: var( --th-ink );
	margin: 0;
}
body.btf-hr-page .btf-hr-comp-vs {
	display: grid;
	place-items: center;
	font-family: var( --th-serif );
	font-style: italic;
	font-size: 1.2rem;
	color: var( --th-muted );
	font-weight: 300;
	padding: .25rem 0;
}
body.btf-hr-page .btf-hr-comp-pickers {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .5rem;
	margin-top: 1rem;
}
body.btf-hr-page .btf-hr-comp-preset {
	background: var( --th-cream );
	border: 1px solid var( --th-hair );
	border-radius: 6px;
	padding: .55rem .7rem;
	font-family: var( --th-serif );
	font-size: .9rem;
	font-weight: 500;
	cursor: pointer;
	color: var( --th-ink-2 );
	transition: border-color .15s, color .15s, background .15s;
	text-align: left;
	line-height: 1.3;
}
body.btf-hr-page .btf-hr-comp-preset:hover { border-color: var( --th-forest ); color: var( --th-ink ); }
body.btf-hr-page .btf-hr-comp-preset.is-active {
	background: var( --th-forest );
	color: var( --th-cream );
	border-color: var( --th-forest );
}
body.btf-hr-page .btf-hr-comp-side .btf-hr-comp-name {
	color: inherit;
}
@media ( min-width: 760px ) {
	body.btf-hr-page .btf-hr-comp { grid-template-columns: 1fr auto 1fr; gap: 1.5rem; }
	body.btf-hr-page .btf-hr-comp-vs { padding: 0; }
	body.btf-hr-page .btf-hr-comp-side .btf-hr-card { width: 54px; height: 76px; }
	body.btf-hr-page .btf-hr-comp-side .btf-hr-card .rank { font-size: 1.55rem; }
	body.btf-hr-page .btf-hr-comp-side .btf-hr-card .suit { font-size: 1.05rem; }
	body.btf-hr-page .btf-hr-comp-name { font-size: 1.4rem; }
	body.btf-hr-page .btf-hr-comp-pickers { grid-template-columns: repeat( 3, 1fr ); }
}


/* ── 8. Kicker explainer ──────────────────────────────────────────── */
body.btf-hr-page .btf-hr-kk-tabs {
	display: flex;
	gap: .4rem;
	flex-wrap: wrap;
	margin: 0 0 1.2rem;
}
body.btf-hr-page .btf-hr-kk-tab {
	padding: .55rem .9rem;
	font-family: var( --th-mono );
	font-size: .72rem;
	letter-spacing: .05em;
	background: transparent;
	color: var( --th-ink-2 );
	border: 1px solid var( --th-hair );
	border-radius: 5px;
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
	text-align: left;
}
body.btf-hr-page .btf-hr-kk-tab:hover { border-color: var( --th-forest ); color: var( --th-ink ); }
body.btf-hr-page .btf-hr-kk-tab.is-active {
	background: var( --th-forest );
	color: var( --th-cream );
	border-color: var( --th-forest );
}
body.btf-hr-page .btf-hr-kk-board {
	padding: 1.2rem 1.4rem;
	background: var( --th-cream-3 );
	border-radius: 10px;
	margin-bottom: 1.2rem;
}
body.btf-hr-page .btf-hr-kk-board-l {
	font-family: var( --th-mono );
	font-size: .68rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var( --th-muted );
	margin-bottom: .6rem;
}
body.btf-hr-page .btf-hr-kk-board-cards { display: flex; gap: .3rem; }
body.btf-hr-page .btf-hr-kk-wrap {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}
@media ( min-width: 760px ) {
	body.btf-hr-page .btf-hr-kk-wrap { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
}
body.btf-hr-page .btf-hr-kk-card {
	background: var( --th-cream );
	border: 1px solid var( --th-hair );
	border-radius: 12px;
	padding: 1.4rem;
}
body.btf-hr-page .btf-hr-kk-card.is-win {
	background: var( --th-forest );
	color: var( --th-cream );
	border-color: var( --th-forest );
}
body.btf-hr-page .btf-hr-kk-who {
	font-family: var( --th-mono );
	font-size: .7rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var( --th-muted );
	margin-bottom: .6rem;
}
body.btf-hr-page .btf-hr-kk-card.is-win .btf-hr-kk-who { color: var( --th-gold-soft ); }
body.btf-hr-page .btf-hr-kk-line {
	display: flex;
	gap: .4rem;
	align-items: center;
	margin-bottom: .5rem;
	flex-wrap: wrap;
}
body.btf-hr-page .btf-hr-kk-l {
	font-family: var( --th-mono );
	font-size: .7rem;
	color: var( --th-muted );
	min-width: 6em;
	letter-spacing: .06em;
	text-transform: uppercase;
}
body.btf-hr-page .btf-hr-kk-card.is-win .btf-hr-kk-l { color: rgba( 243, 238, 226, .55 ); }
body.btf-hr-page .btf-hr-kk-cards { display: flex; gap: .25rem; }
body.btf-hr-page .btf-hr-kk-plays {
	font-family: var( --th-serif );
	font-size: 1.05rem;
}


/* ── 9. Quiz ──────────────────────────────────────────────────────── */
body.btf-hr-page .btf-hr-quiz {
	background: var( --th-cream-2 );
	border: 1px solid var( --th-hair );
	border-radius: 16px;
	padding: clamp( 1.1rem, 2vw, 1.8rem );
}
body.btf-hr-page .btf-hr-quiz-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: .8rem;
	flex-wrap: wrap;
	gap: .5rem;
}
body.btf-hr-page .btf-hr-quiz-no,
body.btf-hr-page .btf-hr-quiz-score {
	font-family: var( --th-mono );
	font-size: .72rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var( --th-muted );
}
body.btf-hr-page .btf-hr-quiz-score b {
	color: var( --th-ink );
	font-family: var( --th-serif );
	font-size: 1.05rem;
	font-weight: 500;
	margin-left: .25em;
}
body.btf-hr-page .btf-hr-quiz-q {
	font-family: var( --th-serif );
	font-size: 1.4rem;
	font-weight: 400;
	letter-spacing: -.01em;
	margin: .5rem 0 1rem;
	color: var( --th-ink );
	line-height: 1.25;
}
body.btf-hr-page .btf-hr-quiz-opts {
	display: grid;
	grid-template-columns: 1fr;
	gap: .7rem;
	margin: 1rem 0;
}
@media ( min-width: 700px ) {
	body.btf-hr-page .btf-hr-quiz-opts { grid-template-columns: 1fr 1fr; }
}
body.btf-hr-page .btf-hr-quiz-opt {
	background: var( --th-cream );
	border: 1px solid var( --th-hair );
	border-radius: 10px;
	padding: 1rem;
	text-align: left;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: .7rem;
	font: inherit;
	color: var( --th-ink );
	transition: background .15s, border-color .15s;
}
body.btf-hr-page .btf-hr-quiz-opt:hover:not(:disabled) {
	border-color: var( --th-forest );
	background: var( --th-cream-3 );
}
body.btf-hr-page .btf-hr-quiz-opt:disabled { cursor: default; opacity: .85; }
body.btf-hr-page .btf-hr-quiz-opt.is-correct {
	background: var( --th-tip );
	color: var( --th-tip-ink );
	border-color: var( --th-tip-ink );
	opacity: 1;
}
body.btf-hr-page .btf-hr-quiz-opt.is-wrong {
	background: var( --th-warn );
	color: var( --th-warn-ink );
	border-color: var( --th-warn-ink );
	opacity: 1;
}
body.btf-hr-page .btf-hr-quiz-opt-top {
	display: flex;
	align-items: center;
	gap: .7rem;
	width: 100%;
}
body.btf-hr-page .btf-hr-quiz-opt-letter {
	font-family: var( --th-mono );
	font-size: .82rem;
	font-weight: 700;
	background: var( --th-cream-3 );
	color: var( --th-ink );
	padding: .25rem .55rem;
	border-radius: 4px;
	letter-spacing: .1em;
	flex-shrink: 0;
}
body.btf-hr-page .btf-hr-quiz-opt.is-correct .btf-hr-quiz-opt-letter { background: var( --th-tip-ink ); color: var( --th-tip ); }
body.btf-hr-page .btf-hr-quiz-opt.is-wrong   .btf-hr-quiz-opt-letter { background: var( --th-warn-ink ); color: var( --th-warn ); }
body.btf-hr-page .btf-hr-quiz-opt-name {
	font-family: var( --th-serif );
	font-size: 1.05rem;
	font-weight: 500;
	line-height: 1.3;
}
body.btf-hr-page .btf-hr-quiz-opt-cards { display: flex; gap: .25rem; flex-wrap: wrap; }
body.btf-hr-page .btf-hr-quiz-explain {
	background: var( --th-cream-3 );
	padding: 1rem 1.1rem;
	border-radius: 10px;
	font-size: .92rem;
	line-height: 1.5;
	color: var( --th-ink-2 );
	margin-bottom: .8rem;
}
body.btf-hr-page .btf-hr-quiz-explain b {
	display: block;
	font-family: var( --th-mono );
	font-size: .72rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var( --th-ink );
	margin-bottom: .25em;
}
body.btf-hr-page .btf-hr-quiz-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: .8rem;
	gap: 1rem;
	flex-wrap: wrap;
}
body.btf-hr-page .btf-hr-quiz-progress {
	display: flex;
	gap: .35rem;
	flex-wrap: wrap;
}
body.btf-hr-page .btf-hr-quiz-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var( --th-cream-3 );
	display: inline-block;
}
body.btf-hr-page .btf-hr-quiz-dot.is-current { background: var( --th-gold ); box-shadow: 0 0 0 3px rgba( 201, 162, 74, .25 ); }
body.btf-hr-page .btf-hr-quiz-dot.is-done    { background: var( --th-forest ); }
body.btf-hr-page .btf-hr-quiz-dot.is-wrong   { background: var( --th-red ); }

body.btf-hr-page .btf-hr-btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .7rem 1.1rem;
	background: var( --th-ink );
	color: var( --th-cream );
	border: 1px solid var( --th-ink );
	border-radius: 6px;
	font: 500 .9rem/1 var( --th-sans );
	cursor: pointer;
	text-decoration: none;
	transition: background .15s;
}
body.btf-hr-page .btf-hr-btn:hover { background: var( --th-forest ); }

body.btf-hr-page .btf-hr-quiz-final {
	text-align: center;
	padding: 1.5rem 1rem;
}
body.btf-hr-page .btf-hr-quiz-final-grade {
	font-family: var( --th-serif );
	font-size: clamp( 1.6rem, 3vw, 2.4rem );
	font-weight: 400;
	letter-spacing: -.02em;
	margin: 0;
	color: var( --th-ink );
}
body.btf-hr-page .btf-hr-quiz-final-num {
	font-family: var( --th-serif );
	font-size: clamp( 4rem, 9vw, 6rem );
	font-weight: 300;
	line-height: 1;
	color: var( --th-forest );
	margin: .5rem 0;
	letter-spacing: -.04em;
}
body.btf-hr-page .btf-hr-quiz-final-of { font-size: .4em; opacity: .4; }
body.btf-hr-page .btf-hr-quiz-final p {
	font-size: .95rem;
	color: var( --th-ink-2 );
	max-width: 42ch;
	margin: 0 auto 1rem;
	line-height: 1.5;
}