/* Database look: item and monster search, results, detail pages and item lists ------
   Shared by item/*, monster/*, buyingstore/*, character/view and guild/view.
   Added to the page by main/meta/<module>.php (fy_boot.php only loads
   css/pages/<module>.css and <module>-<action>.css on its own). */

/* Search card ----------------------------------------------------------------- */
.fy-db-search { margin-bottom: var(--sp-8); padding: clamp(1.15rem, .8rem + 1.4vw, 1.9rem); }
.fy-db-search__label { display: block; margin-bottom: var(--sp-3); color: var(--text); font: 600 1.05rem/1.3 var(--font-display); }
.fy-db-search__bar { display: flex; gap: var(--sp-3); align-items: stretch; }
.fy-db-search__field { flex: 1 1 auto; min-width: 0; }
.fy-db-search__field > input { min-height: 56px; padding-left: 3.1rem; border-radius: var(--r-lg); font-size: 1.08rem; }
.fy-db-search__field > .fy-i { left: 1.1rem; width: 1.35em; height: 1.35em; color: var(--violet-300); }
.fy-db-search__bar > .fy-btn { --btn-h: 56px; padding-inline: 1.7rem; }
.fy-db-search__hint { margin: var(--sp-3) 0 0; color: var(--text-3); font-size: .86rem; }
@media (max-width: 559.98px) {
	.fy-db-search__bar { flex-direction: column; }
	.fy-db-search__bar > .fy-btn { width: 100%; }
}

/* "More filters" -------------------------------------------------------------- */
.fy-db-filters { margin-top: var(--sp-4); }
.fy-db-filters__hint { color: var(--text-3); font: 600 .84rem/1 var(--font-body); }
.fy-db-filters__hint::before { content: "\00b7"; margin: 0 .45rem 0 .1rem; color: var(--text-4); }
@media (max-width: 479.98px) { .fy-db-filters__hint { display: none; } }
.fy-db-filters > summary {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	min-height: 42px;
	padding: 0 1.05rem;
	border: 1px solid var(--line-2);
	border-radius: var(--r-pill);
	background: rgba(255, 255, 255, .04);
	color: var(--text);
	font: 600 .95rem/1 var(--font-display);
	list-style: none;
	cursor: pointer;
	user-select: none;
	transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.fy-db-filters > summary::-webkit-details-marker { display: none; }
.fy-db-filters > summary:hover { border-color: var(--violet-300); background: rgba(140, 87, 248, .14); }
.fy-db-filters > summary > .fy-i:first-child { color: var(--violet-300); }
.fy-db-filters__chev { transition: transform var(--t-med) var(--ease); opacity: .75; }
.fy-db-filters[open] > summary .fy-db-filters__chev { transform: rotate(180deg); }
.fy-db-filters__count { padding: .12rem .5rem; font-size: .68rem; }
.fy-db-filters__body { margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px dashed var(--line-2); }
.fy-db-filters__group + .fy-db-filters__group { margin-top: var(--sp-6); }
.fy-db-filters__title { margin: 0 0 var(--sp-3); color: var(--text-3); font: 800 .7rem/1.2 var(--font-body); letter-spacing: .14em; text-transform: uppercase; }
.fy-db-filters__grid { display: grid; gap: var(--sp-4) var(--sp-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
@media (min-width: 900px) {
	.fy-db-filters__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.fy-db-filters__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.fy-db-compare { display: flex; gap: .4rem; }
.fy-db-compare > select { flex: 0 0 4.5rem; width: 4.5rem; padding-left: .8rem; padding-right: 1.8rem; background-position: right .55rem center; text-align: center; }
.fy-db-compare > input { flex: 1 1 auto; min-width: 0; width: 100%; }

/* Results summary, sort links for small screens ------------------------------- */
.fy-db-results__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3) var(--sp-5); margin: 0 0 var(--sp-4); }
.fy-db-results__count { margin: 0; color: var(--text-3); font-size: .95rem; }
.fy-db-results__count strong { margin-right: .2rem; color: var(--text); font: 600 1.35rem/1 var(--font-display); }
.fy-db-dot { margin: 0 .4rem; color: var(--text-4); font-weight: 400; }
@media (max-width: 559.98px) {
	.fy-db-results__count > .fy-nowrap:first-child { display: block; margin-bottom: .3rem; }
	.fy-db-results__count > .fy-nowrap:nth-child(2) .fy-db-dot { display: none; }
}
.fy-db-sortbar { display: none; }
.fy-db-sortbar__label { color: var(--text-4); font: 800 .68rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; }
.fy-db-sortbar a {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	padding: 0 .8rem;
	border: 1px solid var(--line-2);
	border-radius: var(--r-pill);
	color: var(--text-2);
	font: 600 .84rem/1 var(--font-display);
	text-decoration: none;
	white-space: nowrap;
}
.fy-db-sortbar a:hover { color: var(--text); border-color: var(--violet-300); }

/* Dense result tables ------------------------------------------------------------ */
.fy-db-wrap { margin-bottom: var(--sp-2); }
.fy-db-table { font-size: .875rem; }
.fy-db-table th, .fy-db-table td { padding: .5rem .6rem; }
.fy-db-table th { padding-top: .75rem; padding-bottom: .75rem; font-size: .66rem; letter-spacing: .08em; vertical-align: middle; }
.fy-db-table th:first-child, .fy-db-table td:first-child { padding-left: 1rem; }
.fy-db-table th:last-child, .fy-db-table td:last-child { padding-right: 1rem; }
.fy-db-table th[aria-sort] { color: var(--gold-200); }
.fy-db-table td { white-space: nowrap; }
.fy-db-table .fy-db-wrapcell { white-space: normal; min-width: 9rem; }
.fy-db-table .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.fy-db-table .is-zero { color: var(--text-4); }
.fy-db-table .is-flag { text-align: center; }
.fy-db-table .fy-db-c-id a, .fy-db-table .fy-db-c-id { color: var(--text-3); font-weight: 700; font-variant-numeric: tabular-nums; }
.fy-db-table .fy-db-c-id a:hover { color: var(--gold-300); }
.fy-db-table .fy-db-c-item { min-width: 12.5rem; white-space: normal; }
.fy-db-muted { color: var(--text-4); }
.fy-db-sub { display: block; margin-top: .1rem; color: var(--text-3); font-size: .78rem; font-weight: 600; line-height: 1.35; }

/* Item or monster name with its icon (tables, lists, drops) */
.fy-db-item { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.fy-db-item__text { display: block; min-width: 0; }
.fy-db-item__name { color: var(--text); font-weight: 800; text-decoration: none; overflow-wrap: anywhere; }
.fy-table a.fy-db-item__name, a.fy-db-item__name { color: var(--text); font-weight: 800; }
a.fy-db-item__name:hover { color: var(--gold-200); text-decoration: underline; text-underline-offset: .18em; }
.fy-db-icon {
	flex: none;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 10px;
	background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .09), rgba(255, 255, 255, .025) 70%);
	box-shadow: inset 0 0 0 1px var(--line);
}
.fy-db-icon img { display: block; width: 24px; height: 24px; image-rendering: pixelated; }
.fy-db-icon > .fy-i { width: 16px; height: 16px; color: var(--text-4); }
.fy-db-icon--mob { width: 40px; height: 40px; border-radius: 12px; }
.fy-db-icon--mob img { width: 34px; height: 34px; object-fit: contain; image-rendering: auto; }
.fy-db-item .fy-badge { margin-left: .35rem; padding: .08rem .45rem; font-size: .64rem; vertical-align: .1em; }

/* Yes / no flags */
.fy-db-flag { font-weight: 800; }
.fy-db-flag.is-yes { color: var(--mint-300); }
.fy-db-flag.is-no { color: var(--text-4); font-weight: 600; }
a.fy-db-flag.is-yes { text-decoration: underline; text-decoration-color: rgba(147, 241, 195, .4); text-underline-offset: .2em; }

.fy-db-chance { font-variant-numeric: tabular-nums; }

/* Empty results */
.fy-db-empty { margin-top: var(--sp-2); }

/* Page navigation ---------------------------------------------------------------- */
.fy-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem; margin: var(--sp-8) 0 var(--sp-2); }
.fy-pager__list { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.fy-pager__list li, .fy-pager__list li + li { margin: 0; }
.fy-pager__num, .fy-pager__step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .3rem;
	min-width: 42px;
	height: 42px;
	padding: 0 .85rem;
	border: 1px solid var(--line-2);
	border-radius: var(--r-pill);
	background: rgba(255, 255, 255, .04);
	color: var(--text-2);
	font: 600 .95rem/1 var(--font-display);
	font-variant-numeric: tabular-nums;
	text-decoration: none;
	transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.fy-pager__step { padding: 0 1rem; }
.fy-pager a:hover { border-color: var(--violet-300); background: rgba(140, 87, 248, .16); color: var(--text); }
.fy-pager__num[aria-current="page"] { border-color: transparent; background: var(--grad-violet); color: #fff; box-shadow: var(--glow-violet); }
.fy-pager__step.is-disabled { opacity: .38; }
.fy-pager__gap { display: inline-grid; place-items: center; min-width: 20px; height: 42px; color: var(--text-4); }
.fy-pager + .jump-to-page { margin-top: var(--sp-3); }
@media (max-width: 559.98px) {
	.fy-pager__step { width: 42px; padding: 0; }
	.fy-pager__step span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}

/* Detail pages: a summary card on the left, content on the right -------------- */
.fy-db-back { display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; margin: -.5rem 0 var(--sp-3); color: var(--text-3); font-weight: 800; font-size: .92rem; text-decoration: none; }
.fy-db-back:hover { color: var(--gold-300); }
.fy-db-detail { display: grid; gap: var(--sp-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 960px) {
	.fy-db-detail { grid-template-columns: 340px minmax(0, 1fr); gap: var(--sp-8); }
}
.fy-db-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); min-width: 0; }
@media (min-width: 960px) {
	.fy-db-summary { position: sticky; top: calc(var(--header-h) + var(--sp-4)); }
}

.fy-db-summary { display: grid; gap: var(--sp-5); --card-pad: var(--sp-5); }
.fy-db-summary__art {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 210px;
	padding: var(--sp-5);
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background:
		radial-gradient(60% 55% at 50% 62%, rgba(140, 87, 248, .26), transparent 72%),
		radial-gradient(40% 30% at 50% 88%, rgba(255, 214, 109, .12), transparent 70%),
		var(--surface-sunken);
}
.fy-db-summary__art img { display: block; max-width: 100%; height: auto; image-rendering: pixelated; filter: drop-shadow(0 10px 14px rgba(4, 2, 16, .55)); }
.fy-db-summary__art--paper { background: linear-gradient(180deg, #fbf4e6, #f1e4cb); border-color: rgba(255, 214, 109, .35); }
.fy-db-summary__art--paper img { mix-blend-mode: multiply; filter: none; border-radius: 4px; image-rendering: auto; }
.fy-db-summary__art--stage { min-height: 240px; }
.fy-db-summary__art--stage::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 14%;
	width: 46%;
	height: 16px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(4, 2, 16, .55), transparent);
	transform: translateX(-50%);
	pointer-events: none;
}
.fy-db-summary__art--stage img { position: relative; z-index: 1; margin-bottom: 4%; }
.fy-db-summary__art--empty .fy-i { width: 54px; height: 54px; color: var(--text-4); }
.fy-db-summary__head { display: grid; gap: .45rem; }
.fy-db-summary__name { margin: 0; font-size: clamp(1.45rem, 1.25rem + .6vw, 1.8rem); line-height: 1.15; overflow-wrap: anywhere; }
.fy-db-summary__icon { display: inline-block; width: 24px; height: 24px; margin-right: .3rem; vertical-align: -.1em; image-rendering: pixelated; }
.fy-db-summary__sub { margin: 0; color: var(--text-3); font-size: .88rem; font-weight: 700; overflow-wrap: anywhere; }
.fy-db-summary__sub code { font-size: .82rem; }
.fy-db-summary .fy-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.fy-db-summary .fy-stat { display: flex; flex-direction: column; justify-content: space-between; padding: .7rem .8rem; }
.fy-db-summary .fy-stat dt { font-size: .64rem; }
.fy-db-summary .fy-stat dd { font-size: 1.12rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.fy-db-summary .fy-stat--wide { grid-column: 1 / -1; }
.fy-db-summary .fy-stats:not(:has(.fy-stat--wide)) .fy-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* Tablets: the summary is full width, so the art and the name sit side by side and the
   numbers form one band instead of a tall two-column stack. */
@media (min-width: 600px) and (max-width: 959.98px) {
	.fy-db-summary { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); align-items: center; column-gap: var(--sp-6); }
	.fy-db-summary__art { min-height: 190px; }
	.fy-db-summary > .fy-stats, .fy-db-summary > .fy-btn, .fy-db-summary > .fy-db-summary__note { grid-column: 1 / -1; }
	.fy-db-summary .fy-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.fy-db-summary .fy-stats:not(:has(> :nth-child(4))) { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
	.fy-db-summary .fy-stats:not(:has(.fy-stat--wide)) .fy-stat:last-child:nth-child(odd) { grid-column: auto; }
}
.fy-db-summary__note { margin: -.6rem 0 0; color: var(--text-4); font-size: .8rem; text-align: center; }
.fy-db-badges { display: flex; flex-wrap: wrap; gap: .4rem; }

/* Content panels */
.fy-db-panel { --card-pad: 0; }
.fy-db-panel__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4); padding: var(--sp-5) var(--sp-6) var(--sp-4); }
.fy-db-panel__head .fy-card__title { font-size: 1.3rem; }
/* a long title wraps next to its count badge instead of pushing the badge onto a line of its own */
.fy-db-panel__head { flex-wrap: nowrap; }
.fy-db-panel__head > .fy-card__title { min-width: 0; }
.fy-db-panel__head > .fy-badge { flex: none; }
.fy-db-panel__body { padding: 0 var(--sp-6) var(--sp-6); }
.fy-db-panel__note { margin: 0; padding: var(--sp-4) var(--sp-6); border-top: 1px solid var(--line); color: var(--text-3); font-size: .9rem; }
.fy-db-panel__empty { margin: 0; padding: 0 var(--sp-6) var(--sp-6); color: var(--text-3); }
.fy-db-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-top: 1px solid var(--line); }
.fy-db-scroll > .fy-table { margin: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
@media (max-width: 559.98px) {
	.fy-db-panel__head { padding: var(--sp-4) var(--sp-4) var(--sp-3); }
	.fy-db-panel__body { padding: 0 var(--sp-4) var(--sp-4); }
	.fy-db-panel__note, .fy-db-panel__empty { padding-inline: var(--sp-4); }
}

/* Key / value rows */
.fy-db-facts { display: grid; margin: 0; }
.fy-db-facts > div { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr); gap: var(--sp-4); padding: .8rem 0; border-bottom: 1px solid var(--line); }
.fy-db-facts > div:first-child { padding-top: 0; }
.fy-db-facts > div:last-child { padding-bottom: 0; border-bottom: 0; }
.fy-db-facts dt { padding-top: .2rem; color: var(--text-3); font: 800 .7rem/1.4 var(--font-body); letter-spacing: .1em; text-transform: uppercase; }
.fy-db-facts dd { margin: 0; color: var(--text); line-height: 1.55; overflow-wrap: anywhere; }
@media (max-width: 559.98px) {
	.fy-db-facts > div { grid-template-columns: minmax(0, 1fr); gap: .15rem; }
}
/* Short values side by side (monster combat values) */
.fy-db-attrs + .fy-db-facts { margin-top: var(--sp-5); }
.fy-db-facts--cols { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); column-gap: var(--sp-5); }
.fy-db-facts--cols > div, .fy-db-facts--cols > div:first-child, .fy-db-facts--cols > div:last-child { grid-template-columns: minmax(0, 1fr); gap: .15rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.fy-db-facts--cols dd { font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 559.98px) {
	/* short values: two per row on phones instead of one long column */
	.fy-db-facts--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Skills */
.fy-db-skills td { color: var(--text-2); }
.fy-db-scroll > .fy-db-skills { overflow: visible; }
.fy-db-skills th:first-child, .fy-db-skills td:first-child { position: sticky; left: 0; z-index: 1; box-shadow: inset -1px 0 0 var(--line); }
.fy-db-skills th:first-child { background: linear-gradient(rgba(140, 87, 248, .1), rgba(140, 87, 248, .1)), var(--surface); }
.fy-db-skills td:first-child { background: var(--surface); }
.fy-db-skills tbody tr:hover td:first-child { background: linear-gradient(rgba(255, 255, 255, .025), rgba(255, 255, 255, .025)), var(--surface); }
.fy-db-scroll--shadow {
	background:
		linear-gradient(to left, var(--surface) 35%, rgba(24, 17, 58, 0)) right center / 44px 100% no-repeat local,
		radial-gradient(farthest-side at 100% 50%, rgba(4, 2, 16, .6), rgba(4, 2, 16, 0)) right center / 18px 100% no-repeat scroll;
}
.fy-db-skill { color: var(--text); font: 600 .84rem/1.3 var(--font-mono); letter-spacing: -.01em; }

/* Item scripts */
.fy-db-script + .fy-db-script { margin-top: var(--sp-5); }
.fy-db-script__label { display: flex; align-items: center; gap: .45rem; margin: 0 0 var(--sp-2); color: var(--text-3); font: 800 .7rem/1.4 var(--font-body); letter-spacing: .1em; text-transform: uppercase; }
.fy-db-code {
	margin: 0;
	padding: var(--sp-4) var(--sp-5);
	overflow-x: auto;
	border: 1px solid var(--line);
	border-left: 3px solid rgba(255, 214, 109, .45);
	border-radius: var(--r-md);
	background: rgba(8, 5, 22, .62);
	color: var(--gold-100);
	font: .86rem/1.65 var(--font-mono);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	tab-size: 4;
	font-variant-ligatures: none;
	font-feature-settings: "calt" 0, "liga" 0;
}
.fy-db-code code { padding: 0; background: none; color: inherit; font-size: inherit; }
.fy-db-none { color: var(--text-4); font-style: italic; }

/* Six base stats (STR to LUK) */
.fy-db-attrs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-2); margin: 0; }
.fy-db-attrs > div { padding: .75rem .4rem .7rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-sunken); text-align: center; }
.fy-db-attrs dt { color: var(--gold-300); font: 800 .7rem/1 var(--font-body); letter-spacing: .14em; }
.fy-db-attrs dd { margin: .4rem 0 0; color: var(--text); font: 600 1.3rem/1 var(--font-display); font-variant-numeric: tabular-nums; }
@media (max-width: 559.98px) {
	.fy-db-attrs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Behaviour chips */
.fy-db-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.fy-db-chips li, .fy-db-chips li + li { margin: 0; }
.fy-db-chips li { padding: .3rem .7rem; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: rgba(255, 255, 255, .04); color: var(--text-2); font-size: .82rem; font-weight: 700; }

/* Below 1100px wide tables become one card per row (two per row on tablets) ----- */
@media (max-width: 1099.98px) {
	.fy-db-wrap--cards { overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; }
	.fy-db-cards { border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
	.fy-db-cards thead { display: none; }
	.fy-db-cards, .fy-db-cards tbody { display: block; }
	.fy-db-cards tr {
		display: flex;
		flex-wrap: wrap;
		align-content: flex-start;
		align-items: center;
		gap: .4rem .45rem;
		margin: 0 0 var(--sp-3);
		padding: .85rem .95rem;
		border: 1px solid var(--line);
		border-radius: var(--r-lg);
		background: var(--grad-card), var(--surface);
	}
	.fy-db-cards tr:last-child { margin-bottom: 0; }
	.fy-db-cards td, .fy-db-cards th { display: block; padding: 0; border: 0; white-space: normal; background: none; }
	.fy-db-cards tbody tr:hover td { background: none; }
	.fy-db-cards td:first-child, .fy-db-cards td:last-child { padding-left: 0; padding-right: 0; }
	.fy-db-cards .fy-db-c-item { order: 1; flex: 1 1 calc(100% - 5.5rem); min-width: 0; }
	.fy-db-cards:not(.fy-db-cards--flat) tr:not(:has(> .fy-db-c-id)) > .fy-db-c-item { flex-basis: 100%; }
	/* the id fills the rest of the first line, so the badge and numbers always start the second */
	.fy-db-cards:not(.fy-db-cards--flat) .fy-db-c-id { flex: 0 0 5rem; text-align: right; }
	.fy-db-cards .fy-db-c-id { order: 2; flex: none; align-self: flex-start; padding-top: .45rem; font-size: .8rem; }
	.fy-db-cards .fy-db-c-id::before { content: "#"; color: var(--text-4); }
	.fy-db-cards .fy-db-c-lead { order: 3; flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; margin: 0 .15rem 0 0; }
	.fy-db-cards .fy-db-c-lead .fy-db-sub { display: inline; margin: 0; }
	.fy-db-cards .fy-db-c-stat {
		order: 4;
		display: inline-flex;
		flex-wrap: wrap;
		align-items: center;
		padding: .22rem .6rem;
		border-radius: var(--r-pill);
		background: rgba(255, 255, 255, .045);
		color: var(--text);
		font-size: .8rem;
		font-weight: 700;
		text-align: left;
	}
	.fy-db-cards .fy-db-c-stat[data-label]::before {
		content: attr(data-label);
		margin-right: .35rem;
		color: var(--text-3);
		font-size: .66rem;
		font-weight: 800;
		letter-spacing: .08em;
		text-transform: uppercase;
	}
	.fy-db-cards .fy-db-c-wide { display: block; flex: 1 1 100%; border-radius: var(--r-md); }
	.fy-db-cards:not(.fy-db-cards--flat) tr { position: relative; transition: border-color var(--t-fast) var(--ease); }
	.fy-db-cards:not(.fy-db-cards--flat) a.fy-db-item__name::after { content: ""; position: absolute; inset: 0; }
	.fy-db-cards:not(.fy-db-cards--flat) td a:not(.fy-db-item__name) { position: relative; z-index: 1; }
	.fy-db-cards:not(.fy-db-cards--flat) tr:has(a.fy-db-item__name):hover { border-color: var(--line-3); }
	.fy-db-cards:not(.fy-db-cards--flat) tr:has(a.fy-db-item__name:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
	.fy-db-cards .is-zero, .fy-db-cards .fy-db-hide-sm { display: none; }
	.fy-db-sortbar {
		display: flex;
		align-items: center;
		gap: .4rem;
		width: 100%;
		padding-bottom: .2rem;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
		mask-image: linear-gradient(90deg, #000 88%, transparent);
	}
	.fy-db-sortbar::-webkit-scrollbar { display: none; }
	.fy-db-sortbar > * { flex: none; }
	.fy-db-sortbar a:last-child { margin-right: 2rem; }
}
@media (min-width: 640px) and (max-width: 1099.98px) {
	.fy-db-cards:not(.fy-db-cards--flat) tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
	.fy-db-cards:not(.fy-db-cards--flat) tr, .fy-db-cards:not(.fy-db-cards--flat) tr:last-child { margin: 0; }
}
/* Inside a panel the rows are separated by lines instead of being cards of their own. */
@media (max-width: 1099.98px) {
	.fy-db-scroll.fy-db-wrap--cards { overflow: visible; }
	.fy-db-cards--flat tr, .fy-db-cards--flat tr:last-child {
		margin: 0;
		padding: .8rem var(--sp-6);
		border: 0;
		border-bottom: 1px solid var(--line);
		border-radius: 0;
		background: none;
	}
	.fy-db-cards--flat tr:last-child { border-bottom: 0; }
	.fy-db-cards--flat .fy-db-c-lead { flex: none; order: 3; margin: 0; }
	.fy-db-cards--flat .fy-db-c-item { flex: 1 1 calc(100% - 4rem); }
	/* lists without an id or amount on the right (party, friends, guild members): the name
	   has the first line to itself, so the class never jumps up next to a short name */
	.fy-db-cards--flat tr:not(:has(> .fy-db-c-id)) > .fy-db-c-item { flex-basis: 100%; }
}
@media (max-width: 559.98px) {
	.fy-db-cards--flat tr, .fy-db-cards--flat tr:last-child { padding-inline: var(--sp-4); }
}

/* Profile header (character and guild pages) --------------------------------- */
.fy-db-hero {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--sp-5) var(--sp-6);
	align-items: center;
	margin-bottom: var(--sp-5);
	--card-pad: clamp(1.25rem, .9rem + 1.6vw, 2.1rem);
	background:
		radial-gradient(520px 260px at 0% 0%, rgba(140, 87, 248, .22), transparent 70%),
		radial-gradient(420px 220px at 100% 100%, rgba(255, 196, 63, .08), transparent 70%),
		var(--grad-card), var(--surface);
}
.fy-db-avatar {
	display: grid;
	place-items: center;
	width: clamp(84px, 60px + 5vw, 120px);
	aspect-ratio: 1;
	border-radius: 30%;
	background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02) 70%), var(--surface-sunken);
	box-shadow: inset 0 0 0 1px var(--line-2), var(--shadow-md);
}
.fy-db-avatar img { max-width: 86%; max-height: 86%; image-rendering: pixelated; }
.fy-db-avatar--letter { background: var(--grad-violet); box-shadow: var(--glow-violet), inset 0 1px 0 rgba(255, 255, 255, .3); }
.fy-db-avatar--letter span { color: #fff; font: 700 clamp(2.4rem, 1.8rem + 2vw, 3.4rem)/1 var(--font-display); text-transform: uppercase; text-shadow: 0 3px 12px rgba(30, 8, 80, .45); }
.fy-db-avatar--emblem img { width: 64%; height: auto; max-width: none; border-radius: 6px; }
.fy-db-hero__main { min-width: 0; }
.fy-db-hero__title { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; }
.fy-db-hero__title h2 { margin: 0; font-size: clamp(1.7rem, 1.3rem + 1.5vw, 2.45rem); line-height: 1.1; overflow-wrap: anywhere; }
.fy-db-hero__line { margin: .45rem 0 0; color: var(--text-3); }
.fy-db-hero__line strong { color: var(--text); font-weight: 800; }
.fy-db-hero__guild { display: flex; align-items: center; gap: .65rem; margin: .8rem 0 0; color: var(--text-2); font-weight: 700; }
.fy-db-hero__guild > .fy-i { color: var(--gold-300); }
.fy-db-hero__guild a { font-weight: 800; }
.fy-db-hero__facts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); margin: 0; }
.fy-db-hero__facts > div { padding: .7rem .9rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-sunken); }
.fy-db-hero__facts dt { color: var(--text-3); font: 800 .66rem/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.fy-db-hero__facts dd { margin: .3rem 0 0; color: var(--text); font: 600 1.2rem/1.15 var(--font-display); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
@media (min-width: 900px) {
	.fy-db-hero { grid-template-columns: auto minmax(0, 1fr) minmax(170px, 210px); }
	.fy-db-hero__facts { grid-column: auto; grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599.98px) {
	.fy-db-hero { grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
	.fy-db-avatar { width: 76px; border-radius: 24px; }
	.fy-db-hero__facts { gap: var(--sp-2); }
	.fy-db-hero__facts > div { padding: .6rem .7rem; }
	.fy-db-hero__facts dd { font-size: 1.05rem; }
	.fy-db-hero__facts--lead { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.fy-db-hero__facts--lead > div:first-child { grid-column: 1 / -1; }
}
.fy-db-emblem { flex: none; width: 24px; height: 24px; border-radius: 4px; background: rgba(255, 255, 255, .05); image-rendering: pixelated; vertical-align: middle; }
.fy-db-emblem--lg { width: 32px; height: 32px; }
.fy-db-guild { display: inline-flex; align-items: center; gap: .5rem; }
.fy-db-live { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(82, 221, 156, .18); }

/* Meters (HP / SP, members, guild EXP) */
.fy-db-bars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-5); max-width: 620px; margin-top: var(--sp-5); }
.fy-db-bar__label { display: flex; justify-content: space-between; gap: var(--sp-3); margin-bottom: .4rem; color: var(--text-3); font: 800 .72rem/1.2 var(--font-body); letter-spacing: .08em; }
.fy-db-bar__label .fy-num { color: var(--text-2); letter-spacing: 0; }
.fy-db-bar__track { height: 10px; overflow: hidden; border-radius: var(--r-pill); background: rgba(255, 255, 255, .07); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .45); }
.fy-db-bar__track > span { display: block; height: 100%; border-radius: inherit; background: var(--grad-violet); }
.fy-db-bar--hp .fy-db-bar__track > span { background: linear-gradient(90deg, #f0517a, #ff8a96); }
.fy-db-bar--sp .fy-db-bar__track > span { background: linear-gradient(90deg, #3f7dff, #74c2ff); }
.fy-db-bar--gold .fy-db-bar__track > span { background: var(--grad-gold); }
.fy-db-bar--mint .fy-db-bar__track > span { background: linear-gradient(90deg, #1fb978, #6ee7b0); }
@media (max-width: 559.98px) {
	.fy-db-bars { grid-template-columns: minmax(0, 1fr); }
}

/* Inventory, cart and storage lists */
.fy-inv .fy-db-c-item { min-width: 15rem; }
.fy-inv__name { color: var(--text-2); font-weight: 700; line-height: 1.45; }
.fy-inv .normalslotted { color: var(--text-2); }
.fy-inv [class*="overslotted"] .item_name { color: var(--gold-200); }
.fy-inv__refine { color: var(--gold-300); font-weight: 800; }
.fy-inv__slots { color: var(--text-3); }
.fy-inv__amount { color: var(--text); font-weight: 800; font-variant-numeric: tabular-nums; }
.fy-inv__cards { white-space: normal; min-width: 10rem; }
.fy-inv__cards a { font-weight: 700; }
.fy-inv__opts { margin: 0; padding-left: 1rem; color: var(--text-2); font-size: .82rem; white-space: normal; }
.fy-inv__opts li + li { margin-top: .1rem; }
.fy-inv__status { white-space: normal; }
.fy-inv__status .fy-badge { margin: .1rem .1rem .1rem 0; }
@media (max-width: 1099.98px) {
	.fy-inv .fy-db-c-item { min-width: 0; }
	.fy-inv .fy-db-c-lead.is-num { flex: none; order: 2; margin: 0; text-align: right; }
	.fy-inv .fy-db-c-id { display: none; }
	.fy-inv__status:empty { display: none; }
	.fy-inv__sep { display: none; }
	.fy-inv__cards a { display: inline-block; margin-right: .6rem; }
}