/* Battleground statistics (bgstats addon): overview, 14 leaderboards, BG and WoE profiles.
   Podium, board, phone cards and "More leaderboards" come from leaderboard.css (loaded first
   through the page meta); this file only adds what these pages need on top.

   1. Leaderboard pages: back link, mode navigation, filters, podium label
   2. Leaderboard table: columns per width, phone labels, pager
   3. Overview (index)
   4. Player profiles (player_bg, player_woe) */

/* 1. Leaderboard pages --------------------------------------------------------- */
.fy-bgstats-back {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	min-height: 40px; /* a full-size tap target; the negative margin keeps the old spacing */
	margin: -.5rem 0 calc(var(--sp-4) - .5rem);
	color: var(--text-3);
	font-size: .9rem;
	font-weight: 800;
	text-decoration: none;
}
.fy-bgstats-back .fy-i { width: 1.05em; height: 1.05em; transition: transform var(--t-med) var(--ease); }
.fy-bgstats-back:hover { color: var(--gold-300); }
.fy-bgstats-back:hover .fy-i { transform: translateX(-3px); }

/* Mode navigation: one panel, a label column and a row of pills per group (the pills are
   the shared .fy-subnav links without the pill bar around them). */
.fy-bgstats-nav {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: .35rem;
	margin: 0 0 var(--sp-5);
	padding: .45rem;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--surface-sunken);
}
.fy-bgstats-nav__label {
	padding: .55rem .6rem 0;
	color: var(--text-4);
	font: 800 .66rem/1 var(--font-body);
	letter-spacing: .16em;
	text-transform: uppercase;
}
.fy-bgstats-nav .fy-subnav {
	position: relative;
	width: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--r-pill);
	background: none;
}
@media (min-width: 720px) {
	/* each label sits level with the first row of its pills, also when the pills wrap onto a second row */
	.fy-bgstats-nav { grid-template-columns: max-content minmax(0, 1fr); align-items: start; column-gap: .5rem; }
	.fy-bgstats-nav__label { padding: calc(19px - .33rem) .4rem 0 .7rem; }
	/* wide enough: the pills wrap instead of scrolling sideways */
	.fy-bgstats-nav .fy-subnav { flex-wrap: wrap; overflow: visible; }
}

.fy-bgstats-filters .fy-bgstats-filters__job { flex: 1 1 200px; max-width: 300px; }
.fy-bgstats-filters .fy-bgstats-filters__name { flex: 2 1 240px; }
.fy-bgstats-filters input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }
.fy-bgstats-scope {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .3rem .6rem;
	flex-basis: 100%;
	margin: 0;
	color: var(--text-3);
	font-size: .86rem;
	font-weight: 700;
}
@media (max-width: 719.98px) {
	.fy-bgstats-filters .fy-bgstats-filters__job { max-width: none; }
}

/* the old "Champion / Runner-up / Third place" titles above the names */
.fy-bgstats-tier {
	margin: var(--sp-1) 0 0;
	color: var(--gold-300);
	font: 800 .66rem/1.2 var(--font-body);
	letter-spacing: .16em;
	text-transform: uppercase;
}
.fy-bgstats-tier--2 { color: var(--text-2); }
.fy-bgstats-tier--3 { color: var(--amber-300); }
.fy-bgstats-tier + .fy-lb-card__title { margin-top: .15rem; }
@media (max-width: 719.98px) {
	/* the winner card is full width: its three numbers fit side by side
	   (tablets get label and value lines from leaderboard.css) */
	.fy-bgstats-top .fy-lb-spot--1 .fy-lb-card__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.fy-bgstats-top .fy-lb-spot--1 .fy-lb-card__stats > div { display: flex; flex-direction: column; justify-content: space-between; }
}

/* 2. Leaderboard table ----------------------------------------------------------
   --bg-n (set on the table) is the number of stat columns of the mode (3 to 7).
   The text columns get the room; the number columns stay just wide enough for their values. */
.fy-bgstats-t {
	--lb-cols: 52px minmax(0, 1.7fr) minmax(0, 1.3fr) minmax(0, 1.4fr) repeat(var(--bg-n, 6), minmax(64px, .62fr));
}
.fy-bgstats-t tr { column-gap: var(--sp-3); }
.fy-bgstats-t th.fy-bgstats-key { color: var(--gold-300); }
.fy-bgstats-t abbr[title] { text-decoration: none; cursor: help; }
.fy-bgstats-t td.is-num { white-space: nowrap; }
.fy-bgstats-who { display: grid; min-width: 0; }
.fy-bgstats-t .fy-lb-sub { display: none; }

@media (min-width: 720px) and (max-width: 1099.98px) {
	/* tablets: job and guild move under the name so the numbers keep their room */
	.fy-bgstats-t {
		--lb-cols: 46px minmax(0, 2.6fr) repeat(var(--bg-n, 6), minmax(50px, .8fr));
		font-size: .9rem;
	}
	.fy-bgstats-t tr { padding-inline: var(--sp-4); }
	.fy-bgstats-t .fy-bgstats-c-job, .fy-bgstats-t .fy-bgstats-c-guild { display: none; }
	.fy-bgstats-t .fy-lb-sub { display: block; }
	.fy-bgstats-t .fy-lb-chunk:not([hidden]) { contain-intrinsic-size: auto calc(var(--rows, 50) * 63px); }
}

@media (max-width: 719.98px) {
	/* phones: the shared row cards on three lines (leaderboard.css .fy-lb-table--split):
	   name and the ranked-by number; job and guild; then the other numbers as label and value
	   pairs. The pairs are spaced, not joined by dots, so a wrapped line never starts with a dot. */
	.fy-bgstats-t td[data-label]::before { content: attr(data-label) "\00A0"; color: var(--text-4); }
	.fy-bgstats-t td[data-label]:not(.fy-lb-metric) { margin-right: .35rem; color: var(--text-2); }
	.fy-bgstats-t td.fy-lb-none[data-label] { color: var(--text-4); }
	.fy-bgstats-t td.fy-lb-t-mint[data-label] { color: var(--mint-300); }
	.fy-bgstats-t td.fy-lb-t-rose[data-label] { color: var(--rose-300); }
	.fy-bgstats-t td.fy-lb-t-amber[data-label] { color: var(--amber-300); }
	.fy-bgstats-t td.fy-lb-t-muted[data-label] { color: var(--text-3); }
	.fy-bgstats-t 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-bgstats-t td.fy-lb-t-mint, .fy-bgstats-t td.fy-lb-t-rose, .fy-bgstats-t td.fy-lb-t-amber { font-weight: 800; }
	/* three-line cards are taller than the shared estimate for rows that are not rendered yet */
	.fy-bgstats-t .fy-lb-chunk:not([hidden]) { contain-intrinsic-size: auto calc(var(--rows, 50) * 92px); }
}

/* short pager in the board head (boards with more than one page) */
.fy-bgstats-minipager { display: inline-flex; align-items: center; gap: .5rem; margin-left: auto; color: var(--text-3); font-size: .86rem; font-weight: 800; }
.fy-bgstats-minipager .fy-btn { --btn-h: 34px; }
.fy-bgstats-pages .fy-i { width: 1em; height: 1em; }
@media (max-width: 479.98px) {
	/* small phones: chevrons only, so the five page numbers and both arrows fit on one line */
	.fy-bgstats-pages a[rel] { padding: 0; width: 40px; }
	.fy-bgstats-pages__txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}
.fy-bgstats-pages a { gap: .3rem; display: inline-flex; align-items: center; justify-content: center; }

/* 3. Overview (index) ------------------------------------------------------------ */
.fy-bgstats-index { display: grid; gap: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.fy-bgstats-index__head { max-width: 760px; margin: 0 0 var(--sp-6); }
.fy-bgstats-index__head h2 { margin: 0 0 var(--sp-3); font-size: clamp(1.45rem, 1.2rem + 1vw, 1.95rem); }
.fy-bgstats-index__head .fy-eyebrow { margin-bottom: var(--sp-2); }
.fy-bgstats-index .fy-lb-related { margin-top: 0; }

.fy-bgstats-cards { display: grid; gap: var(--sp-4); margin: 0; padding: 0; list-style: none; }
.fy-bgstats-cards > li { min-width: 0; margin: 0; }
@media (min-width: 720px) {
	.fy-bgstats-cards--modes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.fy-bgstats-cards--views { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fy-bgstats-cards__feature { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
	.fy-bgstats-cards--views { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.fy-bgstats-mode {
	--tone: var(--violet-300);
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: var(--sp-4);
	height: 100%;
	padding: var(--sp-5) var(--sp-10) var(--sp-5) var(--sp-5);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background: var(--grad-card), var(--surface);
	box-shadow: var(--shadow-md), var(--inner-hi);
	color: var(--text-2);
	text-decoration: none;
	transition: transform var(--t-med) var(--ease), border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.fy-bgstats-mode:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--tone) 45%, transparent); box-shadow: var(--shadow-lg), var(--inner-hi); color: var(--text-2); }
.fy-bgstats-mode:focus-visible { border-radius: var(--r-lg); }
.fy-bgstats-mode--gold { --tone: var(--gold-300); }
.fy-bgstats-mode--pink { --tone: var(--petal-300); }
.fy-bgstats-mode--sky { --tone: var(--sky-300); }
.fy-bgstats-mode--mint { --tone: var(--mint-300); }
.fy-bgstats-mode--rose { --tone: var(--rose-300); }
.fy-bgstats-mode__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-bgstats-mode__icon .fy-i { width: 24px; height: 24px; }
.fy-bgstats-mode__body { min-width: 0; }
.fy-bgstats-mode__title { margin: .15rem 0 .3rem; font-size: 1.15rem; }
.fy-bgstats-mode__desc { margin: 0; color: var(--text-3); font-size: .92rem; line-height: 1.5; }
.fy-bgstats-mode__go {
	position: absolute;
	top: calc(var(--sp-5) + .2rem);
	right: var(--sp-4);
	color: var(--text-4);
	transition: transform var(--t-med) var(--ease), color var(--t-fast) var(--ease);
}
.fy-bgstats-mode:hover .fy-bgstats-mode__go, .fy-bgstats-mode:focus-visible .fy-bgstats-mode__go { color: var(--tone); transform: translateX(3px); }

/* the featured card (General): the one gold frame of the page */
.fy-bgstats-mode--feature {
	align-items: center;
	gap: var(--sp-6);
	padding: clamp(1.4rem, 1rem + 1.6vw, 2.25rem);
	overflow: hidden;
	border-color: rgba(255, 214, 109, .3);
	background:
		radial-gradient(60% 150% at 100% 0%, color-mix(in srgb, var(--gold-400) 15%, transparent), transparent 62%),
		var(--grad-card), var(--surface);
}
.fy-bgstats-mode--feature::before {
	content: "";
	position: absolute;
	inset: 6px;
	border: 1px solid rgba(255, 214, 109, .14);
	border-radius: calc(var(--r-lg) - 5px);
	pointer-events: none;
}
.fy-bgstats-mode--feature:hover { border-color: rgba(255, 214, 109, .5); }
.fy-bgstats-mode--feature .fy-bgstats-mode__icon { width: 76px; height: 76px; border-radius: 22px; box-shadow: var(--glow-gold); }
.fy-bgstats-mode--feature .fy-bgstats-mode__icon .fy-i { width: 36px; height: 36px; }
.fy-bgstats-mode--feature .fy-eyebrow { margin: 0 0 .4rem; }
.fy-bgstats-mode--feature .fy-bgstats-mode__title { margin: 0 0 .35rem; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.05rem); }
.fy-bgstats-mode--feature .fy-bgstats-mode__desc { color: var(--text-2); font-size: 1.02rem; }
.fy-bgstats-mode__cta { margin-top: var(--sp-4); }
.fy-bgstats-mode--feature:hover .fy-bgstats-mode__cta { filter: brightness(1.05) saturate(1.05); }
.fy-bgstats-mode__mark {
	position: absolute;
	right: clamp(-1.5rem, 2vw, 2.5rem);
	bottom: -2.5rem;
	color: var(--gold-300);
	opacity: .08;
	pointer-events: none;
}
.fy-bgstats-mode__mark .fy-i { width: 220px; height: 220px; stroke-width: 1.4; }
@media (min-width: 720px) and (max-width: 999.98px) {
	/* tablets: three narrow columns, so the icon sits above the text */
	.fy-bgstats-mode:not(.fy-bgstats-mode--feature) { flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); }
	.fy-bgstats-mode:not(.fy-bgstats-mode--feature) .fy-bgstats-mode__title { margin-top: 0; }
	.fy-bgstats-mode:not(.fy-bgstats-mode--feature) .fy-bgstats-mode__go { top: calc(var(--sp-5) + .75rem); }
}
@media (max-width: 719.98px) {
	.fy-bgstats-cards { gap: var(--sp-3); }
	.fy-bgstats-mode { padding: var(--sp-4) var(--sp-8) var(--sp-4) var(--sp-4); }
	.fy-bgstats-mode--feature { flex-direction: column; align-items: flex-start; gap: var(--sp-4); padding: var(--sp-6) var(--sp-5); }
	.fy-bgstats-mode--feature .fy-bgstats-mode__icon { width: 60px; height: 60px; border-radius: 18px; }
	.fy-bgstats-mode--feature .fy-bgstats-mode__icon .fy-i { width: 30px; height: 30px; }
	.fy-bgstats-mode__mark .fy-i { width: 160px; height: 160px; }
}

/* 4. Player profiles ---------------------------------------------------------------- */
.fy-bgstats-player__bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-3); margin: 0 0 var(--sp-6); }
@media (max-width: 719.98px) {
	.fy-bgstats-player__bar .fy-btn { --btn-h: 40px; } /* touch-size buttons */
}
.fy-bgstats-player__layout { display: grid; gap: var(--sp-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1000px) {
	.fy-bgstats-player__layout { grid-template-columns: 330px minmax(0, 1fr); }
	.fy-bgstats-profile { position: sticky; top: calc(var(--header-h) + var(--sp-4)); }
}

.fy-bgstats-profile { display: grid; gap: var(--sp-5); }
.fy-bgstats-profile__id { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; }
.fy-bgstats-profile__emblem {
	flex: none;
	width: 56px;
	height: 56px;
	padding: 6px;
	border: 1px solid var(--line-2);
	border-radius: 14px;
	background: var(--surface-sunken);
	image-rendering: pixelated;
	object-fit: contain;
}
.fy-bgstats-profile__who { min-width: 0; }
.fy-bgstats-profile__who h2 { margin: 0; font-size: clamp(1.45rem, 1.25rem + .8vw, 1.85rem); overflow-wrap: anywhere; }
.fy-bgstats-profile__job { margin: .2rem 0 0; color: var(--violet-200); font-weight: 800; }
.fy-bgstats-profile__facts { display: grid; gap: 0; margin: 0; }
.fy-bgstats-profile__facts > div { display: flex; justify-content: space-between; gap: var(--sp-4); padding: .55rem 0; border-top: 1px solid var(--line); }
.fy-bgstats-profile__facts dt { color: var(--text-3); font: 800 .7rem/1.6 var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.fy-bgstats-profile__facts dd { margin: 0; min-width: 0; color: var(--text); font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.fy-bgstats-profile__headline { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin: 0; }
.fy-bgstats-profile__headline > div { padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-sunken); text-align: center; }
.fy-bgstats-profile__headline dt { margin: 0 0 .35rem; color: var(--text-3); font: 800 .68rem/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.fy-bgstats-profile__headline dd { margin: 0; color: var(--text); font: 600 1.45rem/1.15 var(--font-display); }
.fy-bgstats-profile__headline dd.fy-lb-t-gold { color: var(--gold-300); }
.fy-bgstats-profile__headline dd.fy-lb-t-violet { color: var(--violet-200); }
.fy-bgstats-profile__headline dd.fy-lb-t-muted { color: var(--text-3); font-size: 1.1rem; }
@media (min-width: 640px) and (max-width: 999.98px) {
	/* tablets: name on the left, the two big numbers on the right */
	.fy-bgstats-profile { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: var(--sp-8); }
	.fy-bgstats-profile__headline { grid-column: 2; grid-row: 1 / span 2; }
}

.fy-bgstats-player__sections { display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
	.fy-bgstats-player__sections { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.fy-bgstats-section { --card-pad: var(--sp-5); }
.fy-bgstats-section .fy-card__title { margin: 0 0 var(--sp-3); font-size: 1.12rem; }
.fy-bgstats-section__rows { margin: 0; }
.fy-bgstats-section__rows > div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4); padding: .5rem 0; border-top: 1px solid var(--line); }
.fy-bgstats-section__rows dt { color: var(--text-2); }
.fy-bgstats-section__rows dd { margin: 0; color: var(--text); font: 600 1rem/1.3 var(--font-display); text-align: right; white-space: nowrap; }
.fy-bgstats-section__rows dd.fy-lb-none { color: var(--text-4); }
.fy-bgstats-section__rows dd.fy-lb-t-mint { color: var(--mint-300); }
.fy-bgstats-section__rows dd.fy-lb-t-rose { color: var(--rose-300); }
.fy-bgstats-section__rows dd.fy-lb-t-amber { color: var(--amber-300); }
.fy-bgstats-section__rows dd.fy-lb-t-muted { color: var(--text-3); }