/* Chicken Fight (chickenfight addon): leaderboard tab, guide tab and the Syphon promo dialog.
   Podium, boards and phone cards come from leaderboard.css (loaded first through the page meta).
   Team colours as before: Meron red (rose), Wala blue (sky).

   1. Shell: tabs, join strip, periods, totals, biggest win, section heads
   2. Boards: top winners and recent activity
   3. Guide: steps, callouts, quick overview, closing strip
   4. Promo dialog */

/* 1. Shell ------------------------------------------------------------------------ */
.fy-cf { display: grid; gap: 0; }
.fy-cf-tabs { margin: 0 0 var(--sp-6); }
.fy-cf-tabs .fy-i { width: 1.1em; height: 1.1em; }
/* without JavaScript both panels show and the tab buttons, which would do nothing, are hidden */
.no-js .fy-cf-tabs { display: none; }
.no-js .fy-cf-panel[hidden] { display: grid !important; }
.fy-cf-panel { display: grid; gap: var(--sp-6); }
.no-js #page-guide { margin-top: var(--sp-12); }

.fy-cf-join {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-3) var(--sp-4);
	padding: var(--sp-4) var(--sp-5);
	border: 1px solid rgba(255, 214, 109, .22);
	border-radius: var(--r-lg);
	background: linear-gradient(100deg, rgba(255, 196, 63, .1), rgba(255, 196, 63, .02) 60%), var(--surface-sunken);
}
.fy-cf-join__icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 14px;
	background: var(--grad-gold);
	color: #3a2200;
	box-shadow: var(--glow-gold);
}
.fy-cf-join__icon .fy-i { width: 24px; height: 24px; }
.fy-cf-join__text { flex: 1 1 260px; margin: 0; color: var(--text); font-weight: 700; }
.fy-cf code, .fy-cf-join code { padding: .1em .45em; border-radius: var(--r-xs); background: rgba(255, 196, 63, .12); color: var(--gold-200); font-weight: 700; }

.fy-cf-periods { margin: 0; }
@media (max-width: 559.98px) {
	.fy-cf-join { display: grid; grid-template-columns: auto minmax(0, 1fr); padding: var(--sp-4); }
	.fy-cf-join .fy-btn { --btn-h: 40px; grid-column: 1 / -1; justify-self: start; } /* touch-size button */
	.fy-cf-periods { width: 100%; }
	.fy-cf-periods a { flex: 1 0 auto; justify-content: center; padding: 0 .7rem; }
}

/* totals: two by two until four tiles fit with their labels on one line */
.fy-cf-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin: 0; }
@media (min-width: 720px) {
	.fy-cf-stats { gap: var(--sp-4); }
}
@media (min-width: 1000px) {
	.fy-cf-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.fy-cf-stat {
	position: relative;
	display: flex;
	flex-direction: column-reverse;
	justify-content: center;
	gap: .15rem;
	min-height: 76px;
	padding: var(--sp-4) var(--sp-4) var(--sp-4) calc(var(--sp-4) + 44px + var(--sp-3));
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--grad-card), var(--surface);
	box-shadow: var(--shadow-md), var(--inner-hi);
}
/* the icon sits in the label (dt) for valid markup, and is placed at the start of the tile */
.fy-cf-stat__icon {
	position: absolute;
	left: var(--sp-4);
	top: 50%;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid color-mix(in srgb, var(--tone) 36%, transparent);
	border-radius: 14px;
	background: color-mix(in srgb, var(--tone) 12%, transparent);
	color: var(--tone);
	transform: translateY(-50%);
}
.fy-cf-stat__icon .fy-i { width: 22px; height: 22px; }
.fy-cf-stat__icon--violet { --tone: var(--violet-300); }
.fy-cf-stat__icon--gold { --tone: var(--gold-300); }
.fy-cf-stat__icon--pink { --tone: var(--petal-300); }
.fy-cf-stat__icon--sky { --tone: var(--sky-300); }
.fy-cf-stat dt { color: var(--text-3); font: 800 .68rem/1.25 var(--font-body); letter-spacing: .1em; text-transform: uppercase; }
.fy-cf-stat dd { margin: 0; color: var(--gold-200); font: 600 clamp(1.3rem, 1.1rem + .8vw, 1.75rem)/1.15 var(--font-display); overflow-wrap: anywhere; }
@media (max-width: 419.98px) {
	.fy-cf-stat { justify-content: flex-start; padding: calc(var(--sp-4) + 44px + var(--sp-3)) var(--sp-4) var(--sp-4); }
	.fy-cf-stat__icon { top: var(--sp-4); transform: none; }
}

/* Biggest single win: the one gold-framed card of the page */
.fy-cf-bigwin {
	display: flex;
	align-items: center;
	gap: var(--sp-5);
	overflow: hidden;
	--card-pad: clamp(1.25rem, 1rem + 1.2vw, 2rem);
	background:
		radial-gradient(70% 160% at 0% 50%, rgba(255, 196, 63, .14), transparent 60%),
		var(--grad-card), var(--surface);
}
/* a faint trophy on the open right side of the band (the same device as the BG overview's featured card) */
.fy-cf-bigwin__mark {
	position: absolute;
	right: clamp(-1.5rem, 3vw, 3rem);
	bottom: -2.75rem;
	color: var(--gold-300);
	opacity: .08;
	pointer-events: none;
}
.fy-cf-bigwin__mark .fy-i { width: 200px; height: 200px; stroke-width: 1.4; }
.fy-cf-bigwin__body { position: relative; z-index: 1; }
.fy-cf-bigwin__icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	border-radius: 22px;
	background: var(--grad-gold);
	color: #3a2200;
	box-shadow: var(--glow-gold);
}
.fy-cf-bigwin__icon .fy-i { width: 36px; height: 36px; }
.fy-cf-bigwin__body { min-width: 0; }
.fy-cf-bigwin .fy-eyebrow { margin: 0 0 .3rem; font-size: .74rem; }
.fy-cf-bigwin__name { margin: 0 0 .25rem; color: var(--text); font: 600 clamp(1.35rem, 1.1rem + 1vw, 1.8rem)/1.2 var(--font-display); overflow-wrap: anywhere; }
.fy-cf-bigwin__text { margin: 0; color: var(--text-2); }
.fy-cf-bigwin__when { display: flex; align-items: center; gap: .4rem; margin: .4rem 0 0; color: var(--text-3); font-size: .88rem; font-weight: 700; }
.fy-cf-coins { color: var(--gold-200); }
.fy-cf-eggs { color: var(--violet-200); }
@media (max-width: 559.98px) {
	.fy-cf-bigwin { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
	.fy-cf-bigwin__icon { width: 56px; height: 56px; border-radius: 18px; }
	.fy-cf-bigwin__icon .fy-i { width: 28px; height: 28px; }
	.fy-cf-bigwin__mark { display: none; } /* no open space to balance on a phone, and the trophy tile is right there */
}

.fy-cf-section { display: grid; gap: 0; margin-top: var(--sp-6); }
.fy-cf-section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem var(--sp-4); margin: 0 0 var(--sp-2); }
.fy-cf-section__head h2 { display: flex; align-items: center; gap: .55rem; margin: 0; font-size: clamp(1.4rem, 1.2rem + .9vw, 1.85rem); }
.fy-cf-section__head h2 .fy-i { color: var(--gold-300); }
.fy-cf-section__head p { margin: 0; color: var(--text-3); font-size: .88rem; font-weight: 700; }
.fy-cf-podium { margin-top: var(--sp-10); }
.fy-cf-podium .fy-lb-card__sub { color: var(--text-3); font-size: .86rem; }
.fy-cf-podium .fy-lb-card__sub .fy-lb-t-mint, .fy-cf-podium .fy-lb-card__sub .fy-lb-t-rose { font-weight: 800; }
.fy-cf-podium .fy-lb-card__stats .fy-cf-rate { font-size: .8rem; }
@media (max-width: 719.98px) {
	/* the winner card is full width: its three numbers fit side by side */
	.fy-cf-podium .fy-lb-spot--1 .fy-lb-card__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.fy-cf-podium .fy-lb-spot--1 .fy-lb-card__stats > div { display: flex; flex-direction: column; justify-content: space-between; }
}
@media (min-width: 720px) and (max-width: 1099.98px) {
	/* tablets: leaderboard.css turns the numbers into label and value lines; the win rate badge centres */
	.fy-cf-podium .fy-lb-card__stats > div { align-items: center; }
}

/* Badges: win rate, team side, result */
.fy-cf-rate, .fy-cf-side, .fy-cf-result {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 3.4em;
	padding: .2rem .55rem;
	border: 1px solid var(--line-2);
	border-radius: var(--r-pill);
	font: 800 .76rem/1.3 var(--font-body);
	letter-spacing: .04em;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.fy-cf-rate--hi, .fy-cf-result--win { border-color: rgba(82, 221, 156, .42); background: rgba(82, 221, 156, .13); color: var(--mint-300); }
.fy-cf-rate--mid { border-color: rgba(255, 182, 86, .42); background: rgba(255, 182, 86, .12); color: var(--amber-300); }
.fy-cf-rate--lo, .fy-cf-result--loss { border-color: rgba(255, 128, 152, .45); background: rgba(240, 74, 105, .13); color: var(--rose-300); }
.fy-cf-side { min-width: 0; text-transform: uppercase; }
.fy-cf-side--meron { border-color: rgba(255, 128, 152, .45); background: rgba(240, 74, 105, .14); color: var(--rose-300); }
.fy-cf-side--wala { border-color: rgba(109, 176, 255, .45); background: rgba(63, 140, 255, .14); color: var(--sky-300); }
.fy-cf-side-text--meron { color: var(--rose-300); }
.fy-cf-side-text--wala { color: var(--sky-300); }

/* 2. Boards -------------------------------------------------------------------------- */
.fy-cf-board { margin: 0; }
.fy-cf-t tr { column-gap: var(--sp-3); }
.fy-cf-t abbr[title] { text-decoration: none; cursor: help; }
.fy-cf-when { color: var(--text-3); font-size: .86rem; white-space: nowrap; }
.fy-cf-t--top { --lb-cols: 52px minmax(0, 1.5fr) minmax(96px, .9fr) minmax(96px, .9fr) 52px 52px 76px 64px minmax(96px, .8fr); }
.fy-cf-t--recent { --lb-cols: 104px minmax(0, 1.3fr) 82px 76px 70px 76px 40px minmax(110px, 1fr) 64px; }
.fy-cf-t--recent .fy-lb-metric { color: inherit; font: inherit; }
.fy-cf-pools { white-space: nowrap; }
.fy-cf-pools__sep { color: var(--text-4); }

@media (min-width: 720px) and (max-width: 1099.98px) {
	.fy-cf-t { font-size: .88rem; }
	.fy-cf-t tr { padding-inline: var(--sp-4); column-gap: var(--sp-2); }
	.fy-cf-t--top { --lb-cols: 40px minmax(0, 1.4fr) minmax(70px, .9fr) minmax(70px, .9fr) 34px 34px 62px 50px minmax(84px, .8fr); }
	.fy-cf-t--recent { --lb-cols: 84px minmax(0, 1.2fr) 66px 60px 52px 58px 30px minmax(90px, 1fr) 52px; }
	.fy-cf-t th { letter-spacing: .06em; }
	.fy-cf-when { font-size: .8rem; }
}

@media (max-width: 719.98px) {
	/* phones: the shared row cards on three lines (leaderboard.css .fy-lb-table--split).
	   Top winners: name and coins; eggshells, wins, losses and win rate; rounds and last seen.
	   Recent activity: name and result; time and side; bet, reward, round, pools and bettors.
	   Numbers are label and value pairs spaced apart, not joined by dots, so a wrapped line
	   never starts with a dot. */
	.fy-cf-t td[data-label]::before { content: attr(data-label) "\00A0"; color: var(--text-4); }
	.fy-cf-t td.fy-cf-lead:not([data-label])::before { content: none; }
	.fy-cf-t td:not(.fy-lb-r, .fy-lb-main, .fy-lb-metric) { margin-right: .35rem; }
	.fy-cf-t--top td.is-center::before { content: none; }
	.fy-cf-t--top td.fy-lb-metric[data-label]::before {
		content: attr(data-label) "\00A0";
		color: var(--text-3);
		font: 800 .66rem/1 var(--font-body);
		letter-spacing: .08em;
		text-transform: uppercase;
	}
	.fy-cf-t td.is-center:not(.fy-lb-metric) { text-align: left; }
	.fy-cf-t .fy-cf-rate, .fy-cf-t .fy-cf-side { min-width: 0; padding: .05rem .45rem; font-size: .7rem; }
	.fy-cf-t--recent tr { padding-left: var(--sp-4); }
	.fy-cf-t--recent td.fy-cf-sidecell::before { content: "\00B7\00A0\00A0"; }
	.fy-cf-t--recent td.fy-cf-when { margin-right: 0; font-size: .82rem; }
	.fy-cf-t--recent td.fy-lb-metric .fy-cf-result { font-size: .7rem; }
	.fy-cf-t--recent td.fy-cf-pools .fy-cf-pools__sep { color: inherit; }
}

/* 3. Guide ------------------------------------------------------------------------------ */
.fy-cf-guide-head { margin: 0; }
.fy-cf-guide-head h2 { margin: 0; font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); }
.fy-cf-guide-head .fy-eyebrow { margin-bottom: var(--sp-2); }

/* steps in one readable column, the quick overview beside them on wide screens */
.fy-cf-guide__main { display: grid; gap: var(--sp-5); min-width: 0; }
@media (min-width: 1000px) {
	/* the heading spans both columns, so the first step and the overview start on one line */
	.fy-cf-guide { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; column-gap: var(--sp-8); }
	.fy-cf-guide-head { grid-column: 1 / -1; }
}
@media (min-width: 1000px) and (min-height: 1080px) {
	/* the overview follows the steps only on screens tall enough to show all of it; on shorter
	   screens it scrolls with the page, so its last rows are never hidden below the fold */
	.fy-cf-guide__aside { position: sticky; top: calc(var(--header-h) + var(--sp-4)); }
}
.fy-cf-steps { display: grid; gap: var(--sp-5); margin: 0; padding: 0; list-style: none; }
.fy-cf-steps > li { margin: 0; }
.fy-cf-step {
	--tone: var(--violet-300);
	position: relative;
	display: flex;
	gap: var(--sp-4);
	padding: var(--sp-6) var(--sp-6) var(--sp-6) var(--sp-5);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background:
		linear-gradient(90deg, color-mix(in srgb, var(--tone) 70%, transparent) 0 3px, transparent 3px),
		var(--grad-card), var(--surface);
	box-shadow: var(--shadow-md), var(--inner-hi);
}
.fy-cf-step--sky { --tone: var(--sky-300); }
.fy-cf-step--gold { --tone: var(--gold-300); }
.fy-cf-step--rose { --tone: var(--rose-300); }
.fy-cf-step--mint { --tone: var(--mint-300); }
.fy-cf-step--amber { --tone: var(--amber-300); }
.fy-cf-step__icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border: 1px solid color-mix(in srgb, var(--tone) 36%, transparent);
	border-radius: 14px;
	background: color-mix(in srgb, var(--tone) 12%, transparent);
	color: var(--tone);
}
.fy-cf-step__icon .fy-i { width: 24px; height: 24px; }
.fy-cf-step__body { flex: 1 1 auto; min-width: 0; display: grid; gap: var(--sp-3); color: var(--text-2); line-height: 1.7; }
.fy-cf-step__body > * { margin: 0; }
.fy-cf-step h3 { margin: .3rem 0 0; font-size: 1.3rem; }
.fy-cf-step__num { color: var(--tone); }
.fy-cf-hl { color: var(--gold-200); font-weight: 800; }
.fy-cf-big { font-size: 1.08em; }
.fy-cf-list { margin: 0; padding-left: 1.2em; }
.fy-cf-list li::marker { color: var(--tone); }
.fy-cf-list li + li { margin-top: .25em; }
.fy-cf-list .fy-cf-side { margin-right: .2rem; }
.fy-cf-outcome { display: flex; align-items: center; gap: .4rem; font-weight: 800; }
.fy-cf-callout {
	--callout: var(--violet-300);
	padding: var(--sp-4) var(--sp-5);
	border: 1px solid color-mix(in srgb, var(--callout) 34%, transparent);
	border-radius: var(--r-md);
	background: color-mix(in srgb, var(--callout) 7%, var(--surface-sunken));
}
.fy-cf-callout p { margin: 0; }
.fy-cf-callout p + p { margin-top: .4rem; }
.fy-cf-callout--mint { --callout: var(--mint-300); }
.fy-cf-callout--sky { --callout: var(--sky-300); }
.fy-cf-callout--gold { --callout: var(--gold-300); }
.fy-cf-callout--plain { --callout: var(--text-4); }
.fy-cf-callout__title { display: flex; align-items: center; gap: .45rem; color: var(--callout); font: 600 1.02rem/1.3 var(--font-display); }
.fy-cf-callout .fy-cf-callout__title { margin-bottom: .45rem; }
@media (max-width: 559.98px) {
	/* phones: the step icon sits beside the step title instead of on a row of its own */
	.fy-cf-step { display: block; padding: var(--sp-5) var(--sp-4) var(--sp-5) var(--sp-5); }
	.fy-cf-step__icon { position: absolute; top: var(--sp-5); left: var(--sp-5); width: 40px; height: 40px; border-radius: 12px; }
	.fy-cf-step__icon .fy-i { width: 21px; height: 21px; }
	.fy-cf-step h3 { min-height: 40px; margin: 0; padding: .4rem 0 0 calc(40px + var(--sp-3)); font-size: 1.14rem; line-height: 1.3; }
	.fy-cf-callout { padding: var(--sp-3) var(--sp-4); }
}
/* the Meron and Wala badges are their own markers */
.fy-cf-list--sides { padding-left: 0; list-style: none; }

.fy-cf-overview { --card-pad: clamp(1.25rem, 1rem + 1vw, 1.75rem); }
.fy-cf-overview .fy-card__title { margin-bottom: var(--sp-4); font-size: 1.3rem; }
.fy-cf-overview__list { display: grid; margin: 0; }
.fy-cf-overview__list > div { display: grid; gap: .15rem var(--sp-5); padding: .7rem 0; border-top: 1px solid var(--line); }
.fy-cf-overview__list dt { color: var(--text-3); font: 800 .74rem/1.4 var(--font-body); letter-spacing: .08em; text-transform: uppercase; }
.fy-cf-overview__list dd { margin: 0; color: var(--text); }
@media (min-width: 640px) and (max-width: 999.98px) {
	.fy-cf-overview__list > div { grid-template-columns: 200px minmax(0, 1fr); align-items: baseline; }
}
@media (min-width: 1000px) {
	.fy-cf-overview { --card-pad: var(--sp-5); }
	.fy-cf-overview__list > div { padding: .6rem 0; }
	.fy-cf-overview__list dd { font-size: .94rem; line-height: 1.5; }
}

.fy-cf-foot {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-4);
	margin: var(--sp-10) 0 0;
	padding: var(--sp-5);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	/* both rules span the whole column: they fade out at the ends instead of stopping on a hard edge over the site
	   background art (wide screens) */
	border-image: linear-gradient(90deg, transparent, var(--line) 15%, var(--line) 85%, transparent) 1;
	color: var(--text-2);
	text-align: center;
}
.fy-cf-foot p { margin: 0; text-wrap: balance; }
.fy-cf-foot__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 196, 63, .12); color: var(--gold-300); }
.fy-cf .fy-lb-related { margin-top: var(--sp-8); }
/* the strip's bottom rule already separates the related links: no second rule right under it */
.fy-cf .fy-cf-foot + .fy-lb-related { margin-top: var(--sp-6); padding-top: 0; border-top: 0; }
@media (max-width: 559.98px) {
	/* phones: the egg above the two centred lines instead of beside them */
	.fy-cf-foot { flex-direction: column; gap: var(--sp-3); }
}

/* 4. Promo dialog ------------------------------------------------------------------------ */
.fy-cf-promo { width: min(500px, calc(100vw - 2rem)); }
.fy-cf-promo__close {
	position: absolute;
	top: .6rem;
	right: .6rem;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 12px;
	background: transparent;
	color: var(--text-3);
}
.fy-cf-promo__close:hover { background: rgba(255, 255, 255, .08); color: var(--text); }
.fy-cf-promo__body { padding: var(--sp-8) var(--sp-6) var(--sp-4); text-align: center; }
.fy-cf-promo__body img { width: 64px; height: 64px; margin: 0 auto var(--sp-3); border-radius: 50%; }
.fy-cf-promo__body h2 { margin: 0; color: var(--violet-200); font-size: 1.5rem; letter-spacing: .04em; }
.fy-cf-promo__sub { margin: .2rem 0 var(--sp-4); color: var(--text-3); font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.fy-cf-promo__body > p:not(.fy-cf-promo__sub) { margin: 0 0 var(--sp-4); color: var(--text-2); }
.fy-cf-promo__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.fy-cf-promo__tags li { margin: 0; padding: .25rem .65rem; border: 1px solid rgba(167, 126, 255, .45); border-radius: var(--r-pill); background: rgba(140, 87, 248, .12); color: var(--violet-200); font: 800 .68rem/1.3 var(--font-body); letter-spacing: .08em; text-transform: uppercase; }
/* two equal buttons, as on the old popup */
.fy-cf-promo .fy-dialog__actions .fy-btn { flex: 1 1 0; min-width: 0; padding-inline: .9rem; }