/*
 * Game Pulse 2.4: the Flyff Universe section's components (includes/flyff.php): the class tree, the class cards, the
 * skills and equipment-set lists, the stat calculator and My builds. Loaded on the section's pages only. Colours come
 * from the look tokens (assets/css/look-flyff.css) plus the section's own: HP, FP and MP, the four paths (decoration
 * only: borders and bars) and the rarities (text, at 4.5:1 on the panels in both schemes).
 */

:is([data-game="flyff"], .is-game-flyff) {
	--flyff-hp: light-dark(#B42318, #FF8A80);
	--flyff-fp: light-dark(#1E6B2E, #7EDC95);
	--flyff-mp: light-dark(#1D5FB0, #8CC4FF);
	--flyff-link: light-dark(#1D5FB0, #8CC4FF);
	--flyff-common: light-dark(#4A5568, #C9D3E0);
	--flyff-rare: light-dark(#1D5FB0, #8CC4FF);
	--flyff-veryrare: light-dark(#7A2BB5, #D7A6FF);
	--flyff-ultimate: light-dark(#9A4A08, #FFB866);
	--flyff-path-vagrant: light-dark(#8FA3B8, #6F86A0);
	--flyff-path-mercenary: #D2463C;
	--flyff-path-acrobat: #2E9E5B;
	--flyff-path-assist: #E3A019;
	--flyff-path-magician: #6A5BD6;
	--flyff-path: var(--flyff-path-vagrant);
	--flyff-card-radius: 12px;
}

:is([data-game="flyff"], .is-game-flyff) :is(.is-path-mercenary) { --flyff-path: var(--flyff-path-mercenary); }
:is([data-game="flyff"], .is-game-flyff) :is(.is-path-acrobat) { --flyff-path: var(--flyff-path-acrobat); }
:is([data-game="flyff"], .is-game-flyff) :is(.is-path-assist) { --flyff-path: var(--flyff-path-assist); }
:is([data-game="flyff"], .is-game-flyff) :is(.is-path-magician) { --flyff-path: var(--flyff-path-magician); }

/* ---- shared bits ------------------------------------------------------------------------------------------------ */

.gp-flyff :is(ul, ol).gp-flyff-tree__legend,
.gp-flyff :is(.gp-flyff-tree ul, .gp-flyff-classes, .gp-flyff-skills, .gp-flyff-sets, .gp-flyff-builds__list, .gp-flyff-version__seen, .gp-flyff-version__links, .gp-flyff-skill__tags, .gp-flyff-set__tags, .gp-flyff-auto ul, .gp-flyff-examples ul) {
	list-style: none;
	margin: 0;
	padding: 0;
}

.gp-flyff :is(.gp-flyff-class, .gp-flyff-skill, .gp-flyff-set, .gp-flyff-build)[hidden] {
	display: none;
}

.gp-flyff :is(.gp-flyff__stamp, .gp-flyff__note) {
	margin: 0.9rem 0 0;
	color: var(--gp-ink-muted);
	font-size: 0.875rem;
}

.gp-flyff a:not(.gp-btn, .gp-flyff-card, .gp-flyff-example) {
	color: var(--flyff-link);
	text-underline-offset: 0.18em;
}

.gp-flyff :is(a, button, select, input, summary):focus-visible {
	outline: 3px solid var(--gp-accent);
	outline-offset: 2px;
}

.gp-flyff .gp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-height: 44px;
	padding: 0.45rem 1rem;
	border-radius: 999px;
}

.gp-flyff-crest {
	flex: none;
	border-radius: 28%;
	image-rendering: auto;
}

.gp-flyff-crest.is-drawn {
	display: inline-grid;
	place-items: center;
	width: var(--size, 32px);
	height: var(--size, 32px);
	background: linear-gradient(160deg, #2A78C8, #1A4F8C);
	color: #FFFFFF;
	font-family: var(--gp-head-font);
	font-weight: 800;
	font-size: calc(var(--size, 32px) * 0.5);
	line-height: 1;
}

.gp-flyff__more {
	margin: 1rem 0 0;
	text-align: center;
}

/* ---- the class tree ------------------------------------------------------------------------------------------- */

.gp-flyff .gp-flyff-tree__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.1rem;
}

.gp-flyff .gp-flyff-tree__legend li {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4rem;
	padding: 0.3rem 0.75rem;
	border-radius: 999px;
	background: var(--gp-surface-sunk);
	color: var(--gp-ink-muted);
	font-size: 0.85rem;
}

.gp-flyff .gp-flyff-tree__tier {
	color: var(--gp-ink);
	font-weight: 700;
}

.gp-flyff .gp-flyff-tree__level.is-depth-0 > li > .gp-flyff-card {
	max-width: 30rem;
	margin: 0 auto;
	border-width: 2px;
}

/* The four paths: sky islands side by side, joined to Vagrant by a drawn line. */
.gp-flyff .gp-flyff-tree__level.is-depth-1 {
	position: relative;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
	gap: 1rem;
	margin-top: 1.6rem;
	padding-top: 1rem;
}

.gp-flyff .gp-flyff-tree__level.is-depth-1::before {
	content: "";
	position: absolute;
	top: -1.6rem;
	left: 50%;
	height: 1.6rem;
	border-left: 2px dashed var(--gp-grid-line);
}

.gp-flyff .gp-flyff-tree__level.is-depth-1::after {
	content: "";
	position: absolute;
	top: 0;
	left: 12%;
	right: 12%;
	border-top: 2px dashed var(--gp-grid-line);
}

.gp-flyff .gp-flyff-tree__level.is-depth-1 > li {
	position: relative;
	display: grid;
	align-content: start;
	gap: 0.75rem;
	padding: 0.75rem;
	border-radius: calc(var(--flyff-card-radius) + 4px);
	border-top: 4px solid var(--flyff-path);
	background: linear-gradient(180deg, color-mix(in srgb, var(--flyff-path) 10%, var(--gp-surface-2)), var(--gp-surface) 60%);
	box-shadow: 0 10px 22px -18px light-dark(#1D64B0, #000000);
}

.gp-flyff .gp-flyff-tree__level.is-depth-2 {
	display: grid;
	gap: 0.75rem;
}

.gp-flyff .gp-flyff-tree__level.is-depth-2 > li {
	display: grid;
	gap: 0.4rem;
}

.gp-flyff .gp-flyff-tree__level:is(.is-depth-3, .is-depth-4, .is-depth-5) {
	margin-left: 1.1rem;
	padding-left: 0.75rem;
	border-left: 2px solid color-mix(in srgb, var(--flyff-path) 55%, transparent);
	display: grid;
	gap: 0.4rem;
}

.gp-flyff .gp-flyff-card {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 0.7rem;
	min-height: 44px;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--gp-grid-line);
	border-radius: var(--flyff-card-radius);
	background: var(--gp-surface-2);
	color: var(--gp-ink);
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.gp-flyff .gp-flyff-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 18px -14px light-dark(#1D64B0, #000000);
}

.gp-flyff .gp-flyff-card.is-specialist {
	border-left: 3px solid var(--flyff-path);
	padding-block: 0.45rem;
}

.gp-flyff .gp-flyff-card__text {
	display: grid;
	gap: 0.1rem;
	min-width: 0;
}

.gp-flyff .gp-flyff-card__name {
	color: var(--gp-title-ink);
	font-family: var(--gp-head-font);
	font-weight: 800;
	font-size: 1.05rem;
}

.gp-flyff .gp-flyff-card__levels {
	justify-self: start;
	padding: 0.05rem 0.5rem;
	border-radius: 999px;
	background: var(--gp-surface-sunk);
	color: var(--gp-ink-muted);
	font-family: var(--gp-num-font);
	font-size: 0.78rem;
	font-weight: 700;
}

.gp-flyff .gp-flyff-card__role {
	color: var(--gp-ink-muted);
	font-size: 0.85rem;
	line-height: 1.35;
}

.gp-flyff .gp-flyff-card.is-specialist .gp-flyff-card__role {
	font-size: 0.8rem;
}

/* ---- the data version ------------------------------------------------------------------------------------------ */

.gp-flyff .gp-flyff-version {
	margin-top: 1rem;
}

.gp-flyff .gp-flyff-version__seen {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.gp-flyff .gp-flyff-version__seen li {
	padding: 0.25rem 0.7rem;
	border-radius: 999px;
	background: var(--gp-surface-sunk);
	color: var(--gp-ink);
	font-size: 0.85rem;
}

.gp-flyff .gp-flyff-version__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: 0.9rem;
}

/* ---- the classes ------------------------------------------------------------------------------------------------ */

.gp-flyff .gp-flyff-classes {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
	gap: 1rem;
	margin-top: 1rem;
}

.gp-flyff .gp-flyff-class {
	display: grid;
	align-content: start;
	gap: 0.65rem;
	padding: 1rem;
	border: 1px solid var(--gp-grid-line);
	border-top: 4px solid var(--flyff-path);
	border-radius: var(--flyff-card-radius);
	background: var(--gp-surface-2);
	scroll-margin-top: calc(var(--gp-sticky-top, 0px) + 4rem);
}

.gp-flyff .gp-flyff-class:target {
	box-shadow: 0 0 0 3px var(--gp-accent);
}

.gp-flyff .gp-flyff-class__head {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.gp-flyff .gp-flyff-class__name {
	margin: 0;
	color: var(--gp-title-ink);
	font-family: var(--gp-head-font);
	font-weight: 800;
	font-size: 1.25rem;
}

.gp-flyff .gp-flyff-class__meta,
.gp-flyff .gp-flyff-class__line {
	margin: 0;
	color: var(--gp-ink-muted);
	font-size: 0.85rem;
}

.gp-flyff .gp-flyff-class__role {
	margin: 0;
}

.gp-flyff .gp-flyff-formulas {
	display: grid;
	gap: 0.5rem;
	margin: 0;
}

.gp-flyff .gp-flyff-formula {
	display: grid;
	grid-template-columns: 4.5rem 1fr;
	gap: 0.6rem;
	padding: 0.55rem 0.65rem;
	border-radius: var(--gp-radius-inner, 10px);
	background: var(--gp-surface);
}

.gp-flyff .gp-flyff-formula dt {
	font-family: var(--gp-head-font);
	font-weight: 800;
}

.gp-flyff .gp-flyff-formula.is-hp dt { color: var(--flyff-hp); }
.gp-flyff .gp-flyff-formula.is-fp dt { color: var(--flyff-fp); }
.gp-flyff .gp-flyff-formula.is-mp dt { color: var(--flyff-mp); }

.gp-flyff .gp-flyff-formula dd {
	display: grid;
	gap: 0.15rem;
	margin: 0;
	min-width: 0;
}

.gp-flyff :is(.gp-flyff-formula__raw, .gp-flyff-stat__formula) {
	overflow-wrap: anywhere;
	color: var(--gp-ink-muted);
	font-size: 0.8rem;
	background: none;
	padding: 0;
}

.gp-flyff .gp-flyff-formula__example {
	color: var(--gp-ink-muted);
	font-size: 0.82rem;
}

.gp-flyff .gp-flyff-factors {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.4rem;
	margin: 0;
}

.gp-flyff .gp-flyff-factors div {
	padding: 0.4rem 0.5rem;
	border-radius: var(--gp-radius-inner, 10px);
	background: var(--gp-surface-sunk);
}

.gp-flyff .gp-flyff-factors dt {
	color: var(--gp-ink-muted);
	font-size: 0.75rem;
}

.gp-flyff .gp-flyff-factors dd {
	margin: 0;
	color: var(--gp-ink-strong);
	font-family: var(--gp-num-font);
	font-weight: 800;
}

.gp-flyff .gp-flyff-auto__title {
	margin: 0 0 0.35rem;
	color: var(--gp-ink-muted);
	font-size: 0.82rem;
}

.gp-flyff .gp-flyff-auto ul {
	display: grid;
	gap: 0.25rem;
}

.gp-flyff .gp-flyff-auto li {
	display: grid;
	grid-template-columns: 6.5rem 1fr 2.5rem;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.85rem;
}

.gp-flyff .gp-flyff-auto li.is-best {
	font-weight: 800;
}

.gp-flyff .gp-flyff-auto__bar {
	height: 0.55rem;
	border-radius: 999px;
	background: var(--gp-surface-sunk);
	overflow: hidden;
}

.gp-flyff .gp-flyff-auto__bar span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--flyff-path);
}

.gp-flyff .gp-flyff-auto__value {
	font-family: var(--gp-num-font);
	text-align: right;
}

.gp-flyff .gp-flyff-class__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1rem;
	margin: 0;
}

.gp-flyff .gp-flyff-class__links a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-weight: 700;
}

/* ---- skills and equipment sets ------------------------------------------------------------------------------------- */

.gp-flyff :is(.gp-flyff-skills, .gp-flyff-sets) {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
	gap: 0.9rem;
	margin-top: 1rem;
}

.gp-flyff :is(.gp-flyff-skill, .gp-flyff-set) {
	display: grid;
	align-content: start;
	gap: 0.5rem;
	padding: 0.85rem 0.95rem;
	border: 1px solid var(--gp-grid-line);
	border-left: 4px solid var(--flyff-path);
	border-radius: var(--flyff-card-radius);
	background: var(--gp-surface-2);
}

.gp-flyff .gp-flyff-skill__head {
	display: grid;
	gap: 0.15rem;
}

.gp-flyff .gp-flyff-skill__class {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--gp-ink-muted);
	font-size: 0.8rem;
	font-weight: 700;
}

.gp-flyff :is(.gp-flyff-skill__name, .gp-flyff-set__name) {
	margin: 0;
	color: var(--gp-title-ink);
	font-family: var(--gp-head-font);
	font-weight: 800;
	font-size: 1.05rem;
}

.gp-flyff :is(.gp-flyff-skill__levels, .gp-flyff-set__meta, .gp-flyff-set__alt) {
	margin: 0;
	color: var(--gp-ink-muted);
	font-size: 0.82rem;
}

.gp-flyff :is(.gp-flyff-skill__tags, .gp-flyff-set__tags) {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
}

.gp-flyff :is(.gp-flyff-skill__tags, .gp-flyff-set__tags) li {
	padding: 0.1rem 0.55rem;
	border-radius: 999px;
	background: var(--gp-surface-sunk);
	color: var(--gp-ink);
	font-size: 0.78rem;
}

.gp-flyff :is(.gp-flyff-skill__desc, .gp-flyff-skill__facts, .gp-flyff-skill__needs) {
	margin: 0;
	font-size: 0.9rem;
}

.gp-flyff :is(.gp-flyff-skill__facts, .gp-flyff-skill__needs) {
	color: var(--gp-ink-muted);
	font-size: 0.82rem;
}

.gp-flyff .gp-flyff-skill__vars summary {
	display: flex;
	align-items: center;
	min-height: 44px;
	color: var(--flyff-link);
	font-weight: 700;
	cursor: pointer;
}

.gp-flyff .gp-flyff-skill__vars ul {
	display: grid;
	gap: 0.4rem;
	margin: 0;
	padding-left: 1rem;
	font-size: 0.85rem;
}

.gp-flyff .gp-flyff-skill__var-name {
	font-weight: 700;
}

.gp-flyff .gp-flyff-skill__var-desc {
	color: var(--gp-ink-muted);
}

.gp-flyff .gp-flyff-set__head {
	display: flex;
	align-items: center;
	gap: 0.65rem;
}

.gp-flyff .gp-flyff-set.is-common .gp-flyff-rarity { color: var(--flyff-common); }
.gp-flyff .gp-flyff-set.is-rare .gp-flyff-rarity { color: var(--flyff-rare); }
.gp-flyff .gp-flyff-set.is-veryrare .gp-flyff-rarity { color: var(--flyff-veryrare); }
.gp-flyff .gp-flyff-set.is-ultimate .gp-flyff-rarity { color: var(--flyff-ultimate); }

.gp-flyff .gp-flyff-set .gp-flyff-rarity {
	font-weight: 800;
}

.gp-flyff .gp-flyff-set__bonus {
	display: grid;
	gap: 0.3rem;
	margin: 0;
}

.gp-flyff .gp-flyff-set__bonus div {
	display: grid;
	grid-template-columns: 4.2rem 1fr;
	gap: 0.5rem;
	font-size: 0.88rem;
}

.gp-flyff .gp-flyff-set__bonus dt {
	color: var(--gp-ink-muted);
	font-weight: 700;
}

.gp-flyff .gp-flyff-set__bonus dd {
	margin: 0;
}

.gp-flyff .gp-flyff-set__bonus.is-none {
	color: var(--gp-ink-muted);
	font-size: 0.85rem;
}

/* ---- the stat calculator ------------------------------------------------------------------------------------------ */

.gp-flyff .gp-flyff-calc {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	grid-template-areas: "who out" "stats out" "actions actions";
	gap: 1rem 1.5rem;
	align-items: start;
}

.gp-flyff .gp-flyff-calc__who { grid-area: who; display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 0.9rem; align-items: center; }
.gp-flyff .gp-flyff-calc__stats { grid-area: stats; }
.gp-flyff .gp-flyff-calc__out { grid-area: out; display: grid; gap: 0.7rem; }
.gp-flyff .gp-flyff-calc__actions { grid-area: actions; display: grid; gap: 0.6rem; }

.gp-flyff .gp-flyff-calc__crest {
	grid-row: span 2;
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	border-radius: 24px;
	background: radial-gradient(circle at 50% 35%, light-dark(#FFFFFF, #23395A), var(--gp-surface-sunk));
	box-shadow: inset 0 0 0 2px light-dark(#BFD6EE, #2B4466);
}

.gp-flyff :is(.gp-flyff-calc__field, .gp-flyff-calc__stat, .gp-flyff-calc__save) {
	display: grid;
	gap: 0.25rem;
}

.gp-flyff :is(.gp-flyff-calc label, .gp-flyff-calc legend) {
	color: var(--gp-ink-muted);
	font-size: 0.85rem;
	font-weight: 700;
}

.gp-flyff .gp-flyff-calc :is(select, input[type="number"], input[type="text"]) {
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	padding: 0.4rem 0.7rem;
	border: var(--gp-btn-border);
	border-radius: var(--gp-radius-inner, 10px);
	background: var(--gp-surface-sunk);
	color: var(--gp-ink);
	font: inherit;
	font-size: 1rem;
}

.gp-flyff .gp-flyff-calc input[type="number"] {
	font-family: var(--gp-num-font);
	font-weight: 800;
}

.gp-flyff .gp-flyff-calc__slider {
	width: 100%;
	min-height: 44px;
	accent-color: var(--gp-accent);
}

.gp-flyff .gp-flyff-calc__range {
	color: var(--gp-ink-muted);
	font-size: 0.8rem;
}

.gp-flyff .gp-flyff-calc__stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.6rem 0.9rem;
	margin: 0;
	padding: 0.8rem;
	border: 1px solid var(--gp-grid-line);
	border-radius: var(--flyff-card-radius);
}

.gp-flyff .gp-flyff-calc__stats legend {
	padding: 0 0.3rem;
}

.gp-flyff .gp-flyff-step {
	display: grid;
	grid-template-columns: 44px 1fr 44px;
	gap: 0.3rem;
}

.gp-flyff .gp-flyff-step button {
	min-width: 44px;
	min-height: 44px;
	border: var(--gp-btn-border);
	border-radius: var(--gp-radius-inner, 10px);
	background: var(--gp-btn-bg);
	color: var(--gp-btn-ink);
	font-size: 1.2rem;
	font-weight: 800;
	cursor: pointer;
}

.gp-flyff .gp-flyff-step button:hover {
	background: var(--gp-btn-hover-bg);
}

.gp-flyff .gp-flyff-calc__summary {
	margin: 0;
	color: var(--gp-title-ink);
	font-family: var(--gp-head-font);
	font-weight: 800;
	font-size: 1.15rem;
}

.gp-flyff .gp-flyff-stat {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.3rem 0.8rem;
	padding: 0.75rem 0.9rem;
	border-radius: var(--flyff-card-radius);
	background: var(--gp-surface-2);
	border: 1px solid var(--gp-grid-line);
}

.gp-flyff .gp-flyff-stat__label {
	font-family: var(--gp-head-font);
	font-weight: 800;
}

.gp-flyff .gp-flyff-stat.is-hp { --stat: var(--flyff-hp); }
.gp-flyff .gp-flyff-stat.is-fp { --stat: var(--flyff-fp); }
.gp-flyff .gp-flyff-stat.is-mp { --stat: var(--flyff-mp); }

.gp-flyff .gp-flyff-stat__label { color: var(--stat); }

.gp-flyff .gp-flyff-stat__value {
	color: var(--gp-ink-strong);
	font-family: var(--gp-num-font);
	font-size: 1.7rem;
	font-weight: 800;
	line-height: 1.1;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.gp-flyff .gp-flyff-stat__bar {
	grid-column: 1 / -1;
	display: flex;
	height: 0.7rem;
	border-radius: 999px;
	overflow: hidden;
	background: var(--gp-surface-sunk);
}

.gp-flyff .gp-flyff-stat__bar span {
	display: block;
	height: 100%;
	transition: width 0.2s ease;
}

.gp-flyff .gp-flyff-stat__bar .is-level {
	background: color-mix(in srgb, var(--stat) 45%, var(--gp-surface-sunk));
}

.gp-flyff .gp-flyff-stat__bar .is-stats {
	background: var(--stat);
}

.gp-flyff :is(.gp-flyff-stat__split, .gp-flyff-stat__formula) {
	grid-column: 1 / -1;
	color: var(--gp-ink-muted);
	font-size: 0.82rem;
}

.gp-flyff .gp-flyff-calc__save {
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: end;
	gap: 0.5rem;
}

.gp-flyff .gp-flyff-calc__save label {
	grid-column: 1 / -1;
}

.gp-flyff .gp-flyff-calc__save[hidden],
.gp-flyff .gp-flyff-calc__go[hidden] {
	display: none;
}

.gp-flyff .gp-flyff-calc__status {
	margin: 0;
	min-height: 1.2em;
	color: var(--gp-good);
	font-size: 0.85rem;
}

/* ---- My builds -------------------------------------------------------------------------------------------------- */

.gp-flyff .gp-flyff-builds__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
	gap: 0.8rem;
	margin-top: 0.9rem;
}

.gp-flyff .gp-flyff-build {
	display: grid;
	gap: 0.5rem;
	padding: 0.8rem 0.9rem;
	border: 1px solid var(--gp-grid-line);
	border-top: 4px solid var(--gp-accent-2);
	border-radius: var(--flyff-card-radius);
	background: var(--gp-surface-2);
}

.gp-flyff .gp-flyff-build__head {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.gp-flyff .gp-flyff-build__name {
	margin: 0;
	color: var(--gp-title-ink);
	font-family: var(--gp-head-font);
	font-weight: 800;
	font-size: 1.05rem;
	overflow-wrap: anywhere;
}

.gp-flyff .gp-flyff-build__meta {
	margin: 0;
	color: var(--gp-ink-muted);
	font-size: 0.8rem;
}

.gp-flyff .gp-flyff-build__values {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.35rem;
	margin: 0;
}

.gp-flyff .gp-flyff-build__values div {
	padding: 0.35rem 0.45rem;
	border-radius: var(--gp-radius-inner, 10px);
	background: var(--gp-surface-sunk);
}

.gp-flyff .gp-flyff-build__values dt {
	font-size: 0.72rem;
	font-weight: 800;
}

.gp-flyff .gp-flyff-build__values .is-hp dt { color: var(--flyff-hp); }
.gp-flyff .gp-flyff-build__values .is-fp dt { color: var(--flyff-fp); }
.gp-flyff .gp-flyff-build__values .is-mp dt { color: var(--flyff-mp); }

.gp-flyff .gp-flyff-build__values dd {
	margin: 0;
	color: var(--gp-ink-strong);
	font-family: var(--gp-num-font);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.gp-flyff .gp-flyff-build__badge {
	display: inline-block;
	margin-top: 0.15rem;
	padding: 0 0.4rem;
	border-radius: 999px;
	background: var(--gp-accent-2);
	color: #14243B;
	font-size: 0.68rem;
	font-weight: 800;
}

.gp-flyff .gp-flyff-build__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.gp-flyff .gp-flyff-build__actions .gp-btn {
	flex: 1 1 auto;
	padding-inline: 0.8rem;
}

.gp-flyff .gp-flyff-examples {
	margin-top: 1rem;
}

.gp-flyff .gp-flyff-examples__title {
	margin: 0 0 0.4rem;
	color: var(--gp-ink-muted);
	font-size: 0.85rem;
}

.gp-flyff .gp-flyff-examples ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.gp-flyff .gp-flyff-example {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	min-height: 44px;
	padding: 0.3rem 0.9rem 0.3rem 0.4rem;
	border: var(--gp-btn-border);
	border-radius: 999px;
	background: var(--gp-btn-bg);
	color: var(--gp-btn-ink);
	text-decoration: none;
	font-weight: 700;
}

.gp-flyff .gp-flyff-example:hover {
	background: var(--gp-btn-hover-bg);
}

/* ---- the filter bars: class chips with crests ----------------------------------------------------------------------- */

.gp-flyff .gp-flyff-filters .gp-chip img {
	border-radius: 28%;
}

/* ---- phones ---------------------------------------------------------------------------------------------------------- */

@media (max-width: 640px) {
	.gp-flyff .gp-flyff-calc {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "who" "stats" "out" "actions";
	}

	.gp-flyff .gp-flyff-calc__save {
		grid-template-columns: minmax(0, 1fr);
	}

	.gp-flyff .gp-flyff-factors {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.gp-flyff .gp-flyff-tree__level.is-depth-1::after,
	.gp-flyff .gp-flyff-tree__level.is-depth-1::before {
		display: none;
	}

	.gp-flyff .gp-flyff-tree__level.is-depth-1 {
		margin-top: 1rem;
		padding-top: 0;
	}

	.gp-flyff .gp-flyff-filters .gp-chips__options {
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		padding-bottom: 0.3rem;
	}

	.gp-flyff .gp-flyff-filters :is(.gp-chip, .gp-seg label) {
		min-height: 44px;
		scroll-snap-align: start;
		flex: none;
	}

	.gp-flyff .gp-flyff-auto li {
		grid-template-columns: 5.5rem 1fr 2.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gp-flyff :is(.gp-flyff-card, .gp-flyff-stat__bar span) {
		transition: none;
	}

	.gp-flyff .gp-flyff-card:hover {
		transform: none;
	}
}