/* ==========================================================================
   Canary Design System — Page compositions
   Everything the real MyAAC pages need on top of components/layout:
   page hero + sub-navigation, home news feed, widgets, editorial article,
   featured band, auth, account, highscores and the "legacy box" wrapper.
   Only tokens are used — no arbitrary values.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page hero (inner pages) — short cinematic band + category sub-navigation
   -------------------------------------------------------------------------- */
.page-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: clamp(300px, 42svh, 440px);
	padding-top: var(--header-height);
	color: var(--text-primary);
}

.page-hero .cine-bg--page .cine-bg__media {
	filter: saturate(0.75) contrast(1.05) brightness(0.8);
	transform: scale(1.02);
}

/* the 2D world keeps its colours on inner pages too (the flicker lives on the home hero) */
.page-hero .cine-bg--page.cine-bg--map .cine-bg__media {
	filter: saturate(0.95) contrast(1.04) brightness(0.72);
	animation: none;
}

.page-hero .cine-bg--page .cine-bg__gradient {
	background:
		linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 0) 60%),
		linear-gradient(0deg, var(--bg-primary) 0%, rgba(9, 9, 9, 0.9) 22%, rgba(9, 9, 9, 0) 70%);
}

.page-hero > .container {
	position: relative;
	z-index: 1;
	padding-block: var(--spacing-2xl) var(--spacing-xl);
}

.page-hero__title {
	margin: 0 auto;
}

.page-hero__title .section-title__heading {
	font-size: var(--text-h1);
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.6);
}

.page-hero__title .section-title__lede {
	display: none;
}

/* Sub-navigation: the current category's pages, on the hero/page seam */
.subnav {
	position: relative;
	z-index: 1;
	border-top: 1px solid var(--border-subtle);
	background: linear-gradient(180deg, rgba(9, 9, 9, 0.4), rgba(9, 9, 9, 0.85));
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.subnav__list {
	display: flex;
	gap: var(--spacing-xs);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
	mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
}

.subnav__list::-webkit-scrollbar {
	display: none;
}

.subnav__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-sm);
	padding: 18px var(--spacing-md);
	font-family: var(--font-ui);
	font-size: var(--text-nav);
	font-weight: var(--weight-ui);
	letter-spacing: var(--tracking-nav);
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--text-secondary);
	transition: color var(--duration-fast) var(--ease-cine);
}

.subnav__link .dlist__diamond {
	width: 6px;
	height: 6px;
	opacity: 0.5;
}

.subnav__link:hover {
	color: var(--gold-primary);
}

.subnav__link.is-active {
	color: var(--gold-primary);
}

.subnav__link.is-active .dlist__diamond {
	opacity: 1;
	background: var(--gold-primary);
}

.subnav__link::after {
	content: "";
	position: absolute;
	left: var(--spacing-md);
	right: var(--spacing-md);
	bottom: -1px;
	height: 1px;
	background: var(--gold-primary);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--duration-base) var(--ease-cine);
}

.subnav__link.is-active::after,
.subnav__link:hover::after {
	transform: scaleX(1);
}

/* Inner page body */
.page-body {
	padding-block: var(--section-gap-sm) var(--section-gap);
}

/* --------------------------------------------------------------------------
   Home — news feed + sidebar widgets
   -------------------------------------------------------------------------- */
.home-news {
	padding-top: var(--section-gap-sm);
	padding-bottom: var(--section-gap-sm);
}

/* The feed is a centred editorial column; a vertical rule runs down the date
   column from each row's diamond marker to the next row, fading out after the
   last one (news.html.twig renders the rows). */
.home-news__feed {
	--news-col: 96px;
	position: relative;
	max-width: 1040px;
	margin: var(--spacing-2xl) auto 0;
}

.home-news__feed > .news-article::before {
	content: "";
	position: absolute;
	top: calc(var(--spacing-xl) + 12px);
	bottom: 0;
	left: calc(var(--news-col) / 2);
	width: 1px;
	background: var(--border-default);
	pointer-events: none;
}

.home-news__feed > .news-article:last-child::before {
	bottom: var(--spacing-md);
	background: linear-gradient(180deg, var(--border-default), transparent);
}

/* "Latest" tag on the newest row (theme.js staggers the rows as reveal-group children) */
.home-news__feed > .news-article:first-child .news-article__head::before {
	content: var(--news-latest, "Latest");
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-xs);
	margin-bottom: var(--spacing-xs);
	font-family: var(--font-ui);
	font-size: var(--text-caption);
	font-weight: var(--weight-ui);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--gold-primary);
}

.home-news__feed > .news-article:first-child .news-article__title {
	font-size: var(--text-h2);
}

.home-news__empty {
	max-width: 720px;
	margin: var(--spacing-2xl) auto 0;
	text-align: center;
}

.home-news__empty-note {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-md);
	margin: 0;
	padding: var(--spacing-2xl) var(--spacing-lg);
	border: 1px solid var(--border-subtle);
	color: var(--text-secondary);
}

.home-news__empty-note .icon {
	width: 32px;
	height: 32px;
	color: var(--gold-primary);
}

.home-news__more {
	display: flex;
	justify-content: center;
	margin-top: var(--spacing-xl);
}

/* --------------------------------------------------------------------------
   Home — world pulse strip (tickers + theme boxes)
   One continuous surface split by hairlines instead of stacked cards.
   -------------------------------------------------------------------------- */
.home-pulse {
	padding-bottom: var(--section-gap-sm);
}

.home-pulse__title {
	margin-bottom: var(--spacing-xl);
}

.home-pulse__grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border-block: 1px solid var(--border-subtle);
	background: linear-gradient(180deg, var(--surface-dark), var(--bg-secondary));
}

.home-pulse__grid::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: var(--texture-noise);
	background-size: 160px 160px;
	opacity: 0.025;
}

/* a diamond on the top rule at every junction */
.home-pulse__grid::after {
	content: "";
	position: absolute;
	top: -3px;
	left: 50%;
	width: 5px;
	height: 5px;
	transform: translateX(-50%) rotate(45deg);
	background: var(--border-ornament);
}

.home-pulse__cell {
	position: relative;
	display: flex;
	min-width: 0;
	padding: var(--spacing-xl) var(--spacing-lg);
	border-left: 1px solid var(--border-subtle);
}

.home-pulse__cell:first-child {
	border-left: 0;
}

/* A lone cell left after full rows (e.g. 5 boxes → 4 + 1) stretches across
   the strip and lays its widget out horizontally: title | content | link.
   page.html.twig marks the last cell with --lone-4 (count % 4 == 1) and
   --lone-2 (odd count); each breakpoint reads the class for its column count. */
@media (min-width: 1200px) {
	.home-pulse__cell--lone-4 {
		grid-column: 1 / -1;
		border-left: 0;
		border-top: 1px solid var(--border-subtle);
		padding-block: var(--spacing-lg);
	}

	.home-pulse__cell--lone-4 .widget {
		flex-direction: row;
		align-items: center;
		gap: var(--spacing-xl);
	}

	.home-pulse__cell--lone-4 .widget__title {
		flex: none;
		margin: 0;
		padding: 0 var(--spacing-xl) 0 0;
		border-bottom: 0;
		border-right: 1px solid var(--border-subtle);
	}

	.home-pulse__cell--lone-4 .widget__links {
		display: flex;
		flex-wrap: wrap;
		gap: var(--spacing-sm) var(--spacing-xl);
	}

	.home-pulse__cell--lone-4 .widget__more {
		margin: 0 0 0 auto;
		padding-top: 0;
	}
}

@media (min-width: 768px) and (max-width: 1199.98px) {
	.home-pulse__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.home-pulse__cell:nth-child(odd) {
		border-left: 0;
	}

	.home-pulse__cell:nth-child(n + 3) {
		border-top: 1px solid var(--border-subtle);
	}

	.home-pulse__cell--lone-2 {
		grid-column: 1 / -1;
		padding-block: var(--spacing-lg);
	}

	.home-pulse__cell--lone-2 .widget {
		flex-direction: row;
		align-items: center;
		gap: var(--spacing-xl);
	}

	.home-pulse__cell--lone-2 .widget__title {
		flex: none;
		margin: 0;
		padding: 0 var(--spacing-xl) 0 0;
		border-bottom: 0;
		border-right: 1px solid var(--border-subtle);
	}

	.home-pulse__cell--lone-2 .widget__links {
		display: flex;
		flex-wrap: wrap;
		gap: var(--spacing-sm) var(--spacing-xl);
	}

	.home-pulse__cell--lone-2 .widget__more {
		margin: 0 0 0 auto;
		padding-top: 0;
	}
}

@media (max-width: 767.98px) {
	.home-pulse__grid {
		grid-template-columns: 1fr;
	}

	.home-pulse__cell {
		border-left: 0;
		padding: var(--spacing-lg) var(--spacing-md);
	}

	.home-pulse__cell + .home-pulse__cell {
		border-top: 1px solid var(--border-subtle);
	}
}

/* --------------------------------------------------------------------------
   Widget (a cell of the pulse strip)
   -------------------------------------------------------------------------- */
.widget {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}

.widget__title {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	margin: 0 0 var(--spacing-md);
	padding-bottom: var(--spacing-sm);
	font-family: var(--font-ui);
	font-size: var(--text-eyebrow);
	font-weight: var(--weight-ui);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--gold-primary);
	border-bottom: 1px solid var(--border-subtle);
}

.widget__title .icon {
	color: var(--gold-muted);
}

.widget__headline {
	margin: var(--spacing-xs) 0 var(--spacing-sm);
}

.widget--cta .t-small {
	margin-bottom: var(--spacing-md);
	color: var(--text-secondary);
}

.widget--cta .fbtn {
	margin-top: auto;
}

.widget__more {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-xs);
	margin-top: auto;
	padding-top: var(--spacing-md);
	font-family: var(--font-ui);
	font-size: var(--text-caption);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--text-secondary);
	transition: color var(--duration-fast) var(--ease-cine);
}

.widget__more:hover {
	color: var(--gold-primary);
}

.widget__question {
	margin: 0 0 var(--spacing-md);
	font-family: var(--font-display);
	font-size: var(--text-h4);
	line-height: var(--leading-heading);
	color: var(--text-primary);
}

.widget__links {
	display: grid;
	gap: var(--spacing-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.widget__links a {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-sm);
	color: var(--text-secondary);
	font-size: var(--text-small);
}

.widget__links a:hover {
	color: var(--gold-primary);
}

.widget__links .dlist__diamond {
	width: 6px;
	height: 6px;
}

/* Screenshot figure */
.widget__figure {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border: 1px solid var(--border-subtle);
}

.widget__figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	image-rendering: pixelated;
	transition: transform var(--duration-slow) var(--ease-cine);
}

.widget__figure:hover img {
	transform: scale(1.03);
}

.widget__figure-shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.8));
}

.widget__figure-cta {
	position: absolute;
	left: var(--spacing-md);
	bottom: var(--spacing-md);
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-xs);
	font-family: var(--font-ui);
	font-size: var(--text-caption);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--gold-primary);
}

/* Top players list */
.toplist {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.toplist__item + .toplist__item {
	border-top: 1px solid var(--border-subtle);
}

.toplist__link {
	display: grid;
	grid-template-columns: 28px 44px minmax(0, 1fr);
	align-items: center;
	gap: var(--spacing-sm);
	padding: 8px 0;
	color: var(--text-primary);
	transition: color var(--duration-fast) var(--ease-cine);
}

.toplist__link:hover {
	color: var(--gold-primary);
}

.toplist__rank {
	font-family: var(--font-display);
	font-size: var(--text-small);
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--gold-muted);
}

.toplist__item:first-child .toplist__rank {
	color: var(--gold-primary);
}

/* outfit sprites are 64×64 with the figure in the bottom-right 32×32 —
   shift the sheet so that quadrant is centred in the frame, at 1:1 */
.toplist__outfit {
	position: relative;
	width: 44px;
	height: 44px;
	overflow: hidden;
	border: 1px solid var(--border-subtle);
	background: radial-gradient(circle at 50% 60%, rgb(var(--gold-rgb) / 0.08), transparent 70%);
}

.toplist__outfit img {
	position: absolute;
	top: -20px;
	left: -20px;
	width: 64px;
	max-width: none;
	height: 64px;
	image-rendering: pixelated;
}

.toplist__name {
	display: block;
	font-size: var(--text-small);
	font-weight: 600;
	line-height: 1.3;
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.toplist__name small {
	display: block;
	margin-top: 2px;
	font-weight: 400;
	font-size: var(--text-caption);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--text-muted);
}

.toplist__name .status-dot {
	display: inline-block;
	margin-right: 6px;
	vertical-align: middle;
	box-shadow: none;
}

/* News ticker list */
.ticker-list {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ticker + .ticker {
	border-top: 1px solid var(--border-subtle);
}

.ticker__summary {
	display: grid;
	grid-template-columns: 52px 1fr 16px;
	gap: var(--spacing-sm);
	align-items: start;
	padding: 10px 0;
	cursor: pointer;
	list-style: none;
	color: var(--text-secondary);
	font-size: var(--text-small);
	line-height: 1.45;
	transition: color var(--duration-fast) var(--ease-cine);
}

.ticker__summary::-webkit-details-marker {
	display: none;
}

.ticker__summary:hover {
	color: var(--text-primary);
}

.ticker__date {
	font-family: var(--font-ui);
	font-size: var(--text-caption);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--gold-muted);
	padding-top: 2px;
}

.ticker__chevron {
	color: var(--text-muted);
	margin-top: 3px;
	transition: transform var(--duration-base) var(--ease-cine);
}

.ticker__details[open] .ticker__chevron {
	transform: rotate(180deg);
}

.ticker__details[open] .ticker__short {
	display: none;
}

.ticker__full {
	padding: 0 var(--spacing-md) var(--spacing-sm) 52px;
	margin-left: var(--spacing-sm);
	font-size: var(--text-small);
	color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   Editorial news article (home feed and archive item)
   -------------------------------------------------------------------------- */
.news-article {
	--news-col: 96px;
	position: relative;
	display: grid;
	grid-template-columns: var(--news-col) minmax(0, 1fr);
	gap: 0 var(--spacing-xl);
	padding-block: var(--spacing-xl);
}

/* single-news page: the row is the whole page body */
.page-body .news-article {
	padding-top: 0;
}

/* date column ------------------------------------------------------------- */
.news-article__when {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--spacing-xs);
	padding-top: 22px;
	text-align: center;
}

/* diamond marker on the timeline rule */
.news-article__when::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 9px;
	height: 9px;
	transform: translateX(-50%) rotate(45deg);
	background: var(--bg-primary);
	border: 1px solid var(--border-ornament);
	box-shadow: 0 0 0 4px var(--bg-primary);
	transition:
		background var(--duration-base) var(--ease-cine),
		box-shadow var(--duration-base) var(--ease-cine);
}

.news-article:hover .news-article__when::before {
	background: var(--gold-primary);
	box-shadow:
		0 0 0 4px var(--bg-primary),
		0 0 14px rgb(var(--gold-rgb) / 0.45);
}

.news-article__date {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 2px 6px;
	line-height: 1;
	color: var(--bone);
	background: var(--bg-primary); /* interrupts the timeline rule cleanly */
}

.news-article__day {
	font-family: var(--font-display);
	font-size: 2rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.news-article__month,
.news-article__year {
	font-family: var(--font-ui);
	font-size: var(--text-caption);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
}

.news-article__month {
	margin-top: 6px;
	color: var(--gold-primary);
}

.news-article__year {
	margin-top: 3px;
	color: var(--text-muted);
}

.news-article__icon {
	width: 16px;
	height: 16px;
	margin-top: var(--spacing-xs);
	padding: 0 4px;
	box-sizing: content-box;
	image-rendering: pixelated;
	opacity: 0.8;
	background: var(--bg-primary);
}

/* main column ------------------------------------------------------------ */
.news-article__main {
	min-width: 0;
	padding-top: 14px;
}

.news-article__head {
	display: grid;
	gap: var(--spacing-xs);
	margin-bottom: var(--spacing-md);
}

.news-article__title {
	margin: 0;
}

.news-article__title a {
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient(var(--gold-primary), var(--gold-primary));
	background-repeat: no-repeat;
	background-size: 0 1px;
	background-position: 0 100%;
	transition:
		color var(--duration-base) var(--ease-cine),
		background-size var(--duration-slow) var(--ease-cine);
}

.news-article__title a:hover {
	color: var(--gold-primary);
	background-size: 100% 1px;
}

.news-article__meta {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-sm);
	color: var(--gold-muted);
}

.news-article__author {
	color: var(--text-muted);
	letter-spacing: var(--tracking-label);
}

.news-article__body {
	max-width: 68ch;
	color: var(--text-secondary);
}

/* Drop cap in place of the legacy GIF letters — only on bodies long enough
   to wrap around it (news.html.twig adds the modifier) */
.news-article--dropcap .news-article__body::first-letter {
	float: left;
	margin: 0.1em 0.14em 0 0;
	font-family: var(--font-display);
	font-size: 2.9em;
	line-height: 0.8;
	font-weight: 600;
	color: var(--gold-primary);
}

.news-article__foot {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-sm) var(--spacing-xl);
	margin-top: var(--spacing-md);
}

.news-article__action {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-xs);
	font-family: var(--font-ui);
	font-size: var(--text-caption);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--text-secondary);
	transition: color var(--duration-fast) var(--ease-cine);
}

.news-article__action .icon {
	transition: transform var(--duration-base) var(--ease-cine);
}

.news-article__action:hover {
	color: var(--gold-primary);
}

.news-article__action:hover .icon {
	transform: translateX(3px);
}

@media (max-width: 767.98px) {
	.home-news__feed > .news-article::before {
		display: none;
	}

	.news-article {
		grid-template-columns: 1fr;
		gap: var(--spacing-sm);
		padding-block: var(--spacing-lg);
	}

	.news-article + .news-article {
		border-top: 1px solid var(--border-subtle);
	}

	.news-article__when {
		flex-direction: row;
		align-items: baseline;
		gap: var(--spacing-sm);
		padding-top: 0;
		text-align: left;
	}

	.news-article__when::before {
		position: static;
		transform: rotate(45deg);
		width: 7px;
		height: 7px;
		margin-right: var(--spacing-xs);
		box-shadow: none;
		align-self: center;
	}

	.news-article__date {
		flex-direction: row;
		align-items: baseline;
		gap: var(--spacing-xs);
	}

	.news-article__day {
		font-size: 1.25rem;
	}

	.news-article__month,
	.news-article__year {
		margin-top: 0;
	}

	.news-article__icon {
		margin-top: 0;
		align-self: center;
	}

	.news-article__main {
		padding-top: 0;
	}
}

/* --------------------------------------------------------------------------
   Featured article — editorial band
   -------------------------------------------------------------------------- */
.featured {
	position: relative;
	display: grid;
	grid-template-columns: minmax(220px, 340px) 1fr;
	gap: var(--spacing-2xl);
	align-items: center;
	margin-top: var(--spacing-2xl);
	padding: var(--spacing-xl);
	background:
		linear-gradient(100deg, rgba(20, 16, 8, 0.55), rgba(9, 9, 9, 0) 70%),
		var(--surface-dark);
	border-top: 1px solid var(--border-subtle);
	border-bottom: 1px solid var(--border-subtle);
}

.featured__media {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--bg-deep);
}

.featured__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.9);
	-webkit-mask-image: linear-gradient(90deg, #000 70%, rgba(0, 0, 0, 0.2));
	mask-image: linear-gradient(90deg, #000 70%, rgba(0, 0, 0, 0.2));
}

.featured .featured__corners {
	position: absolute;
	inset: 8px;
	--corner-color: var(--border-ornament);
	--corner-len: 18px;
}

.featured__body {
	display: grid;
	gap: var(--spacing-md);
	min-width: 0;
}

.featured__title {
	margin: 0;
}

.featured__text {
	color: var(--text-secondary);
}

@media (max-width: 767.98px) {
	.featured {
		grid-template-columns: 1fr;
		padding: var(--spacing-lg);
	}
}

/* --------------------------------------------------------------------------
   Legacy box (tables.headline.html.twig) — titled section for core content
   -------------------------------------------------------------------------- */
.lbox {
	position: relative;
	margin-block: var(--spacing-xl);
	border: 1px solid var(--border-subtle);
	background: linear-gradient(180deg, var(--surface-dark), var(--bg-secondary));
}

.lbox:first-child {
	margin-top: 0;
}

.lbox__head {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	padding: var(--spacing-md) var(--spacing-lg);
	background: rgba(0, 0, 0, 0.45);
}

.lbox__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--text-h4);
	font-weight: var(--weight-heading);
	letter-spacing: var(--tracking-heading);
	text-transform: uppercase;
	color: var(--gold-primary);
}

.lbox__glyph {
	color: var(--gold-muted);
}

.lbox__rule {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: linear-gradient(90deg, var(--border-ornament) 0%, var(--border-default) 40%, transparent 100%);
}

.lbox__body {
	padding: var(--spacing-lg);
}

.lbox__body--prose {
	color: var(--text-secondary);
	line-height: var(--leading-body);
}

.lbox--success .lbox__glyph {
	color: var(--success);
}

/* Definition grid (account information) */
.dlgrid {
	display: grid;
	grid-template-columns: minmax(140px, 200px) 1fr;
	gap: 0 var(--spacing-lg);
	margin: 0;
}

.dlgrid dt {
	padding: 10px 0;
	font-family: var(--font-ui);
	font-size: var(--text-caption);
	font-weight: var(--weight-ui);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--text-muted);
	border-bottom: 1px solid var(--border-subtle);
}

.dlgrid dd {
	margin: 0;
	padding: 10px 0;
	font-size: var(--text-small);
	color: var(--text-primary);
	border-bottom: 1px solid var(--border-subtle);
	word-break: break-word;
}

.dlgrid dt:nth-last-of-type(1),
.dlgrid dd:last-of-type {
	border-bottom: 0;
}

@media (max-width: 599.98px) {
	.dlgrid {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.dlgrid dt {
		padding-bottom: 2px;
		border-bottom: 0;
	}

	.dlgrid dd {
		padding-top: 0;
	}
}

/* Action rows (button groups from core forms) */
.legacy-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-sm);
	margin-top: var(--spacing-lg);
}

.legacy-actions form {
	margin: 0;
	display: contents;
}

.legacy-actions__end {
	margin-left: auto;
}

.legacy-actions--center {
	justify-content: center;
}

.legacy-actions .fbtn {
	min-width: 0;
}

/* Notes with a following action */
.fnote__stack {
	display: grid;
	gap: var(--spacing-md);
	justify-items: start;
}

.fnote__stack p {
	margin: 0;
}

.fnote--hint {
	border-color: var(--border-default);
}

.fnote--hint .icon {
	color: var(--gold-primary);
}

.fnote + .fnote,
.fnote + .lbox,
.legacy-errors + * {
	margin-top: var(--spacing-lg);
}

.legacy-errors__list {
	margin: var(--spacing-xs) 0 0;
	padding-left: 1.1em;
}

/* Tables flush inside boxes */
.ftable-wrap--flush {
	border: 0;
	margin: calc(-1 * var(--spacing-lg));
	margin-bottom: 0;
	width: auto;
}

.ftable-wrap--flush + .legacy-actions {
	margin-top: var(--spacing-lg);
}

.ftable .is-icon {
	width: 32px;
	padding-right: 0;
}

.ftable .is-icon img {
	display: block;
	image-rendering: pixelated;
}

.ftable .is-outfit {
	width: 72px;
	padding-block: 4px;
}

.ftable .is-outfit img {
	display: block;
	image-rendering: pixelated;
	margin: -12px auto -8px;
}

.ftable__sub {
	display: block;
	margin-top: 2px;
	font-family: var(--font-ui);
	font-size: var(--text-caption);
	font-weight: 400;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--text-muted);
}

.ftable .is-name .status-dot {
	margin-right: 8px;
	vertical-align: middle;
}

.ftable .is-name .is-rank {
	display: inline-block;
	width: 32px;
}

/* --------------------------------------------------------------------------
   Auth (login) — "the gate" (account.login.html.twig)
   .auth__gate    unclipped wrapper: corner brackets + brass plate hang outside
   .auth__panel   the form: chamfered hairline edge, bevelled 2D fill, embers,
                  one-time sheen, mat line, sunken inputs with glyphs
   .auth__aside   recruitment poster: class key art through a veil, embers, the
                  five outfit sprites idling on a lit floor line, molten CTA
   -------------------------------------------------------------------------- */
.auth {
	--voc-cut: 14px;
	--auth-clip: polygon(
		var(--voc-cut) 0, calc(100% - var(--voc-cut)) 0, 100% var(--voc-cut),
		100% calc(100% - var(--voc-cut)), calc(100% - var(--voc-cut)) 100%, var(--voc-cut) 100%,
		0 calc(100% - var(--voc-cut)), 0 var(--voc-cut));
	--auth-clip-inner: polygon(
		calc(var(--voc-cut) - 1px) 0, calc(100% - var(--voc-cut) + 1px) 0, 100% calc(var(--voc-cut) - 1px),
		100% calc(100% - var(--voc-cut) + 1px), calc(100% - var(--voc-cut) + 1px) 100%, calc(var(--voc-cut) - 1px) 100%,
		0 calc(100% - var(--voc-cut) + 1px), 0 calc(var(--voc-cut) - 1px));
	display: grid;
	grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
	gap: var(--spacing-2xl);
	align-items: stretch;
	padding-top: 16px; /* room for the plate above the gate */
}

/* --- the gate ------------------------------------------------------------- */
.auth__gate {
	position: relative;
	align-self: center; /* floats mid-height beside the taller poster */
}

/* pedestal shadow */
.auth__gate::before {
	content: "";
	position: absolute;
	left: 6%;
	right: 6%;
	bottom: -4%;
	height: 14%;
	background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0) 70%);
	filter: blur(12px);
}

.auth__panel {
	position: relative;
	isolation: isolate;
	display: grid;
	gap: var(--spacing-md);
	align-content: start;
	padding: calc(var(--spacing-2xl) + 14px) var(--spacing-2xl) var(--spacing-2xl);
	overflow: hidden;
	clip-path: var(--auth-clip);
	/* the 1px edge showing through the inset fill */
	background: linear-gradient(160deg, rgb(var(--gold-rgb) / 0.8) 0%, rgb(var(--gold-rgb) / 0.25) 45%, rgb(var(--gold-rgb) / 0.6) 100%);
}

/* fill: deep ground, stone grain, a warm glow under the plate, 2D bevel */
.auth__panel::before {
	content: "";
	position: absolute;
	inset: 1px;
	z-index: -2;
	clip-path: var(--auth-clip-inner);
	background:
		var(--texture-noise) 0 0 / 180px 180px repeat,
		radial-gradient(ellipse at 50% 0%, rgb(var(--gold-rgb) / 0.16), rgba(9, 9, 9, 0) 55%),
		linear-gradient(180deg, #14110c 0%, #0b0a08 100%);
	background-blend-mode: soft-light, normal, normal;
	box-shadow:
		inset 1px 1px 0 rgba(255, 236, 200, 0.12),
		inset -1px -1px 0 rgba(0, 0, 0, 0.95),
		inset 0 0 90px rgba(0, 0, 0, 0.6);
}

/* top highlight */
.auth__panel::after {
	content: "";
	position: absolute;
	inset: 1px;
	z-index: -1;
	pointer-events: none;
	clip-path: var(--auth-clip-inner);
	background: linear-gradient(180deg, rgba(255, 244, 214, 0.07), rgba(255, 244, 214, 0) 22%);
}

/* fine mat line 10px inside the edge */
.auth__mat {
	position: absolute;
	inset: 10px;
	z-index: 0;
	pointer-events: none;
	border: 1px solid rgb(var(--gold-rgb) / 0.16);
}

.auth__embers {
	z-index: 0;
	--ember-rgb: var(--gold-rgb);
}

/* light sweeps once across the plate as it reveals */
.auth__sheen {
	position: absolute;
	inset: 1px;
	z-index: 0;
	clip-path: var(--auth-clip-inner);
	background: linear-gradient(112deg, rgba(255, 255, 255, 0) 32%, rgba(255, 244, 214, 0.08) 44%, rgba(255, 244, 214, 0.22) 50%, rgba(255, 244, 214, 0.08) 56%, rgba(255, 255, 255, 0) 68%);
	transform: translateX(-120%);
	opacity: 0;
	pointer-events: none;
}

.js .reveal-group.is-visible .auth__sheen {
	animation: voc-sheen 1.8s var(--ease-cine) 500ms both;
}

/* everything readable sits above the decor */
.auth__panel > .ffield,
.auth__head,
.auth__row,
.auth__submit {
	position: relative;
	z-index: 1;
}

.auth__corners {
	position: absolute;
	inset: -10px;
	--corner-inset: 0;
	--corner-len: 26px;
	--corner-color: rgb(var(--gold-rgb) / 0.6);
	pointer-events: none;
}

.auth__plate {
	position: absolute;
	top: -15px;
	left: 50%;
	transform: translateX(-50%);
	min-width: 170px;
}

.auth__head {
	display: grid;
	gap: 6px;
	margin-bottom: var(--spacing-xs);
	text-align: center;
}

.auth__title {
	margin: 0;
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.8);
}

.auth__sub {
	margin: 0;
	color: var(--text-muted);
	font-style: italic;
}

/* sunken 2D inputs */
.auth .finput {
	background: linear-gradient(180deg, #080706, #0f0d0a);
	border-color: rgb(var(--gold-rgb) / 0.28);
	box-shadow:
		inset 1px 1px 0 rgba(0, 0, 0, 0.95),
		inset -1px -1px 0 rgba(255, 236, 200, 0.06),
		0 0 0 1px rgba(0, 0, 0, 0.6);
}

.auth .finput:focus {
	border-color: var(--gold-primary);
	box-shadow:
		inset 1px 1px 0 rgba(0, 0, 0, 0.95),
		inset -1px -1px 0 rgba(255, 236, 200, 0.06),
		0 0 0 3px rgb(var(--gold-rgb) / 0.14),
		0 0 22px rgb(var(--gold-rgb) / 0.22);
}

.auth__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--spacing-md);
	flex-wrap: wrap;
}

.auth__lost {
	color: var(--text-muted);
	transition: color var(--duration-fast) var(--ease-cine);
}

.auth__lost:hover {
	color: var(--gold-primary);
}

.auth__submit {
	margin-top: var(--spacing-xs);
}

/* --- the poster ----------------------------------------------------------- */
.auth__aside {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: flex-start;
	min-height: 560px;
	overflow: hidden;
	clip-path: var(--auth-clip);
	background: linear-gradient(160deg, rgb(var(--gold-rgb) / 0.45) 0%, rgb(var(--gold-rgb) / 0.14) 45%, rgb(var(--gold-rgb) / 0.35) 100%);
}

.auth__scene {
	position: absolute;
	inset: 1px;
	z-index: -3;
	width: calc(100% - 2px);
	height: calc(100% - 2px);
	object-fit: cover;
	object-position: 72% 22%;
	clip-path: var(--auth-clip-inner);
	filter: saturate(0.9);
	animation: auth-scene-drift 28s ease-in-out infinite alternate;
	will-change: transform;
}

@keyframes auth-scene-drift {
	from {
		transform: scale(1) translate3d(0, 0, 0);
	}
	to {
		transform: scale(1.05) translate3d(-1.2%, -1%, 0);
	}
}

/* veil: readable left column, a dark floor band for the party, vignette */
.auth__veil {
	position: absolute;
	inset: 1px;
	z-index: -2;
	clip-path: var(--auth-clip-inner);
	background:
		linear-gradient(90deg, rgba(9, 9, 9, 0.97) 0%, rgba(9, 9, 9, 0.9) 38%, rgba(9, 9, 9, 0.45) 68%, rgba(9, 9, 9, 0.2) 100%),
		linear-gradient(0deg, rgba(9, 9, 9, 0.98) 0%, rgba(9, 9, 9, 0.85) 20%, rgba(9, 9, 9, 0) 46%),
		radial-gradient(ellipse at 50% 40%, rgba(9, 9, 9, 0) 40%, rgba(9, 9, 9, 0.7) 100%);
	box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.6);
}

.auth__aside .auth__embers {
	z-index: -1;
}

.auth__aside-inner {
	position: relative;
	z-index: 1;
	display: grid;
	gap: var(--spacing-md);
	justify-items: start;
	width: 100%;
	max-width: 560px;
	padding: var(--spacing-2xl) var(--spacing-2xl) 190px;
}

.auth__aside-title {
	margin: 0;
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.9);
}

.auth__aside-inner .t-body-lg {
	color: var(--text-secondary);
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9);
}

.auth__perks {
	display: grid;
	gap: var(--spacing-sm);
	margin: 0 0 var(--spacing-sm);
	padding: 0;
	list-style: none;
	color: var(--text-secondary);
	font-size: var(--text-small);
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
}

.auth__perks li {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
}

.auth__perks .dlist__diamond {
	width: 6px;
	height: 6px;
	background: var(--gold-primary);
	box-shadow: 0 0 8px rgb(var(--gold-rgb) / 0.6);
}

/* the lit floor line the party stands on */
.auth__floor {
	position: absolute;
	left: 1px;
	right: 1px;
	bottom: 26px;
	z-index: 0;
	height: 1px;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgb(var(--gold-rgb) / 0.2) 35%, rgb(var(--gold-rgb) / 0.55) 70%, rgb(var(--gold-rgb) / 0.2) 100%);
	box-shadow: 0 0 18px rgb(var(--gold-rgb) / 0.25);
	pointer-events: none;
}

.auth__party {
	position: absolute;
	right: 5%;
	bottom: 27px;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.auth__hero {
	position: relative;
	height: 124px;
	animation: auth-idle 3.4s ease-in-out infinite;
	animation-delay: calc(var(--i, 0) * -0.7s);
	will-change: transform;
}

/* contact shadow + a faint class-coloured glow at the feet */
.auth__hero::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -4px;
	width: 70%;
	height: 12px;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.9), rgb(var(--voc-rgb, var(--gold-rgb)) / 0.25) 45%, rgba(0, 0, 0, 0) 75%);
}

.auth__hero img {
	position: relative;
	display: block;
	width: auto;
	height: 100%;
	filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.8));
	transition: filter var(--duration-base) var(--ease-cine), transform var(--duration-base) var(--ease-cine);
}

.auth__hero:hover img {
	transform: translateY(-4px);
	filter: drop-shadow(0 14px 10px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 10px rgb(var(--voc-rgb, var(--gold-rgb)) / 0.5));
}

@keyframes auth-idle {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-4px);
	}
}

/* the create CTA breathes like the home hero's */
.auth__create {
	margin-top: var(--spacing-xs);
	animation: hero-cta-breathe 3.6s ease-in-out infinite;
}

@media (max-width: 1199.98px) {
	.auth {
		grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
		gap: var(--spacing-xl);
	}

	.auth__hero {
		height: 104px;
	}

	.auth__aside-inner {
		padding-bottom: 170px;
	}
}

@media (max-width: 899.98px) {
	.auth {
		grid-template-columns: 1fr;
		gap: var(--spacing-2xl);
	}

	.auth__panel,
	.auth__aside-inner {
		padding-inline: var(--spacing-xl);
	}

	.auth__aside {
		min-height: 0;
	}

	.auth__aside-inner {
		max-width: none;
		padding-bottom: 150px;
	}

	.auth__party {
		right: 50%;
		transform: translateX(50%);
		gap: 6px;
	}

	.auth__hero {
		height: 92px;
	}
}

@media (max-width: 479.98px) {
	.auth__hero {
		height: 72px;
	}

	.auth__aside-inner {
		padding-bottom: 120px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.auth__scene,
	.auth__hero,
	.auth__create,
	.js .reveal-group.is-visible .auth__sheen {
		animation: none;
	}
}

/* --------------------------------------------------------------------------
   Hall of Heroes — logged-in account/manage (account.management.html.twig)
   .hall          full-bleed stage; --voc-rgb is written by theme.js from the
                  active card's data-switch-accent (embers, glows, brackets)
   .hall__bg      xfade layers: the active class' city blurred + glow, mists
   .hall__roster  character-select cards (role=tab)
   .hall__sheet   the active hero's sheet (role=tabpanel)
   -------------------------------------------------------------------------- */
.hall {
	--voc-rgb: var(--gold-rgb);
	--ember-rgb: var(--voc-rgb);
	--voc-cut: 12px;
	--hall-clip: polygon(
		var(--voc-cut) 0, calc(100% - var(--voc-cut)) 0, 100% var(--voc-cut),
		100% calc(100% - var(--voc-cut)), calc(100% - var(--voc-cut)) 100%, var(--voc-cut) 100%,
		0 calc(100% - var(--voc-cut)), 0 var(--voc-cut));
	--hall-clip-inner: polygon(
		calc(var(--voc-cut) - 1px) 0, calc(100% - var(--voc-cut) + 1px) 0, 100% calc(var(--voc-cut) - 1px),
		100% calc(100% - var(--voc-cut) + 1px), calc(100% - var(--voc-cut) + 1px) 100%, calc(var(--voc-cut) - 1px) 100%,
		0 calc(100% - var(--voc-cut) + 1px), 0 calc(var(--voc-cut) - 1px));
	position: relative;
	isolation: isolate;
	width: 100vw;
	margin: calc(-1 * var(--spacing-2xl)) calc(50% - 50vw) var(--spacing-lg);
	padding-block: var(--spacing-2xl);
	overflow: hidden;
}

.hall__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--bg-primary);
}

.hall__bg .xfade__layer {
	overflow: hidden;
	background: radial-gradient(ellipse at 50% 30%, var(--voc-glow, rgb(var(--gold-rgb) / 0.16)) 0%, rgba(9, 9, 9, 0) 60%);
}

.hall__bg .xfade__layer::before {
	content: "";
	position: absolute;
	inset: -8%;
	background: var(--voc-scene, none) center 35% / cover no-repeat;
	filter: blur(18px) saturate(0.85);
	opacity: 0.55;
	transform: scale(1.02);
	transition: transform 12s linear;
}

.hall__bg .xfade__layer.is-active::before {
	transform: scale(1.1);
}

.hall__bg .cine-bg__mist {
	z-index: 1;
}

/* veil: dissolve into the page hero above and the codex below, keep the middle readable */
.hall__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background:
		linear-gradient(180deg, var(--bg-primary) 0%, rgba(9, 9, 9, 0.3) 18%, rgba(9, 9, 9, 0.42) 70%, var(--bg-primary) 100%),
		radial-gradient(ellipse at 50% 45%, rgba(9, 9, 9, 0) 35%, rgba(9, 9, 9, 0.85) 100%);
}

.hall__embers {
	z-index: 1;
}

.hall__inner {
	position: relative;
	z-index: 2;
	display: grid;
	gap: var(--spacing-xl);
}

/* --- head ------------------------------------------------------------------ */
.hall__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: var(--spacing-lg);
	flex-wrap: wrap;
}

.hall__greeting {
	display: grid;
	gap: 6px;
}

.hall__welcome {
	margin: 0;
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.9);
}

.hall__lede {
	margin: 0;
	color: var(--text-secondary);
	font-style: italic;
}

.hall__badges {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	flex-wrap: wrap;
}

.hall__logout {
	margin: 0 0 0 var(--spacing-sm);
}

/* --- roster ---------------------------------------------------------------- */
.hall__roster {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--spacing-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

.hall__slot {
	min-width: 0;
}

.hall__card {
	position: relative;
	display: grid;
	gap: var(--spacing-sm);
	width: 100%;
	padding: 0;
	background: transparent;
	border: 0;
	color: inherit;
	font: inherit;
	text-align: center;
	cursor: pointer;
	transition: transform var(--duration-base) var(--ease-cine);
}

.hall__card:hover {
	transform: translateY(-4px);
}

.hall__card.is-active {
	transform: translateY(-8px);
}

.hall__card:focus-visible {
	outline: none;
}

.hall__card:focus-visible .hall__card-frame {
	box-shadow: 0 0 0 3px rgb(var(--voc-rgb) / 0.5);
}

/* frame: chamfered edge that lights up in the class colour when active */
.hall__card-frame {
	position: relative;
	display: grid;
	place-items: end center;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	clip-path: var(--hall-clip);
	background: linear-gradient(160deg, rgb(var(--voc-rgb) / 0.35) 0%, rgb(var(--voc-rgb) / 0.1) 50%, rgb(var(--voc-rgb) / 0.3) 100%);
	transition: background var(--duration-base) var(--ease-cine), filter var(--duration-base) var(--ease-cine);
}

.hall__card.is-active .hall__card-frame {
	background: linear-gradient(160deg, rgb(var(--voc-rgb) / 0.95) 0%, rgb(var(--voc-rgb) / 0.35) 50%, rgb(var(--voc-rgb) / 0.8) 100%);
	filter: drop-shadow(0 0 18px rgb(var(--voc-rgb) / 0.35));
}

.hall__card-art {
	position: absolute;
	inset: 1px;
	width: calc(100% - 2px);
	height: calc(100% - 2px);
	object-fit: cover;
	object-position: 50% 20%;
	clip-path: var(--hall-clip-inner);
	filter: saturate(0.7) brightness(0.55);
	transform: scale(1.04);
	transition: filter var(--duration-slow) var(--ease-cine), transform var(--duration-slow) var(--ease-cine);
}

.hall__card:hover .hall__card-art,
.hall__card.is-active .hall__card-art {
	filter: saturate(0.95) brightness(0.85);
	transform: scale(1);
}

.hall__card-veil {
	position: absolute;
	inset: 1px;
	clip-path: var(--hall-clip-inner);
	background:
		linear-gradient(180deg, rgba(9, 9, 9, 0.1) 0%, rgba(9, 9, 9, 0) 35%, rgba(9, 9, 9, 0.85) 100%),
		linear-gradient(180deg, #14110c, #0b0a08);
	background-blend-mode: normal, normal;
	opacity: 1;
}

/* no key art → the veil is the fill; with art it only darkens the floor */
.hall__card-art + .hall__card-veil {
	background: linear-gradient(180deg, rgba(9, 9, 9, 0.15) 0%, rgba(9, 9, 9, 0) 30%, rgba(9, 9, 9, 0.9) 100%);
}

/* the in-game outfit, crisp pixels, standing on a lit pool */
.hall__pedestal {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 100%;
	padding-bottom: 14%;
}

.hall__pedestal::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 12%;
	width: 70%;
	height: 22px;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at center, rgb(var(--voc-rgb) / 0.45), rgb(var(--voc-rgb) / 0.12) 45%, rgba(0, 0, 0, 0) 75%);
	filter: blur(2px);
}

.hall__outfit {
	position: relative;
	display: block;
	width: 96px;
	height: 96px;
	image-rendering: pixelated;
	/* the outfit server draws the sprite in the lower-right of its 64px canvas */
	translate: -12% 0;
	filter: drop-shadow(0 8px 6px rgba(0, 0, 0, 0.85));
	animation: hall-idle 3.4s ease-in-out infinite;
	animation-delay: calc(var(--i, 0) * -0.7s);
	will-change: transform;
}

.hall__card.is-deleted .hall__outfit {
	filter: grayscale(1) brightness(0.6) drop-shadow(0 8px 6px rgba(0, 0, 0, 0.85));
}

@keyframes hall-idle {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-3px);
	}
}

.hall__card-ordinal {
	position: absolute;
	top: 10px;
	left: 12px;
	z-index: 1;
	color: rgb(var(--voc-rgb) / 0.9);
	font-family: var(--font-display);
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
}

.hall__card-dot {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 1;
}

.hall__card-stage {
	position: relative;
	display: block;
}

.hall__card-corners {
	position: absolute;
	inset: -5px;
	z-index: 2;
	--corner-inset: 0;
	--corner-len: 16px;
	--corner-color: rgb(var(--voc-rgb) / 0.3);
	pointer-events: none;
	transition: opacity var(--duration-base) var(--ease-cine);
}

.hall__card.is-active .hall__card-corners {
	--corner-color: rgb(var(--voc-rgb) / 0.9);
}

.hall__card-body {
	display: grid;
	gap: 3px;
	justify-items: center;
}

.hall__card-name {
	color: var(--text-primary);
	font-family: var(--font-display);
	font-size: 0.95rem;
	font-weight: var(--weight-heading);
	letter-spacing: 0.04em;
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9);
	transition: color var(--duration-base) var(--ease-cine);
}

.hall__card.is-active .hall__card-name {
	color: var(--gold-primary);
}

.hall__card-meta {
	color: var(--text-muted);
	font-size: var(--text-small);
}

/* --- sheet ----------------------------------------------------------------- */
.hall__sheets {
	position: relative;
	display: grid;
}

.hall__sheet {
	grid-area: 1 / 1;
	position: relative;
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	gap: var(--spacing-2xl);
	padding: var(--spacing-xl);
	clip-path: var(--hall-clip);
	background: linear-gradient(160deg, rgb(var(--voc-rgb) / 0.6) 0%, rgb(var(--voc-rgb) / 0.18) 45%, rgb(var(--voc-rgb) / 0.45) 100%);
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition:
		opacity var(--duration-slow) var(--ease-cine),
		transform var(--duration-slow) var(--ease-cine),
		visibility 0s linear var(--duration-slow);
}

.hall__sheet.is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}

.hall__sheet {
	isolation: isolate;
}

.hall__sheet::before {
	content: "";
	position: absolute;
	inset: 1px;
	z-index: -1;
	clip-path: var(--hall-clip-inner);
	background:
		var(--texture-noise) 0 0 / 180px 180px repeat,
		radial-gradient(ellipse at 18% 50%, rgb(var(--voc-rgb) / 0.14), rgba(9, 9, 9, 0) 55%),
		linear-gradient(180deg, rgba(20, 17, 12, 0.94), rgba(11, 10, 8, 0.96));
	background-blend-mode: soft-light, normal, normal;
	box-shadow:
		inset 1px 1px 0 rgba(255, 236, 200, 0.1),
		inset -1px -1px 0 rgba(0, 0, 0, 0.95),
		inset 0 0 90px rgba(0, 0, 0, 0.55);
}

/* portrait: the outfit at 3x on a ring of light */
.hall__portrait {
	position: relative;
	display: grid;
	place-items: center;
	align-content: center;
	min-height: 320px;
}

.hall__portrait-glow {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 50% 60%, rgb(var(--voc-rgb) / 0.3), rgba(0, 0, 0, 0) 60%);
	animation: hall-glow 4s ease-in-out infinite alternate;
}

@keyframes hall-glow {
	from {
		opacity: 0.7;
	}
	to {
		opacity: 1;
	}
}

.hall__portrait-ring {
	position: absolute;
	width: 220px;
	height: 220px;
	border: 1px solid rgb(var(--voc-rgb) / 0.35);
	border-radius: 50%;
	box-shadow: inset 0 0 40px rgb(var(--voc-rgb) / 0.12), 0 0 30px rgb(var(--voc-rgb) / 0.12);
	transform: rotateX(70deg) translateY(90px);
}

.hall__portrait-ring::before {
	content: "";
	position: absolute;
	inset: 14px;
	border: 1px dashed rgb(var(--voc-rgb) / 0.35);
	border-radius: 50%;
	animation: hall-spin 40s linear infinite;
}

@keyframes hall-spin {
	to {
		transform: rotate(360deg);
	}
}

.hall__outfit--lg {
	width: 192px;
	height: 192px;
	margin-bottom: 26px;
	filter: drop-shadow(0 16px 12px rgba(0, 0, 0, 0.9));
}

.hall__portrait-floor {
	position: absolute;
	left: 50%;
	bottom: 62px;
	width: 46%;
	height: 22px;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.9), rgb(var(--voc-rgb) / 0.25) 45%, rgba(0, 0, 0, 0) 75%);
}

.hall__portrait-plate {
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
	min-width: 150px;
}

.hall__portrait-plate i {
	margin-right: var(--spacing-xs);
	color: rgba(255, 244, 214, 0.55);
	font-style: normal;
	font-size: 0.7rem;
}

.hall__sheet-body {
	display: grid;
	gap: var(--spacing-lg);
	align-content: start;
	min-width: 0;
}

.hall__sheet-head {
	display: grid;
	gap: 6px;
}

.hall__sheet-name {
	margin: 0;
	font-size: clamp(1.8rem, 3vw, 2.6rem);
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.9);
}

.hall__sheet-sub {
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
	flex-wrap: wrap;
	margin: 0;
	color: var(--text-secondary);
	font-size: var(--text-small);
}

.hall__dot {
	color: var(--text-muted);
	padding-inline: 2px;
}

.hall__bars {
	display: grid;
	gap: var(--spacing-sm);
}

.hall__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: var(--spacing-xl);
	padding-top: var(--spacing-md);
	border-top: 1px solid rgb(var(--gold-rgb) / 0.14);
}

.hall__block-title {
	margin: 0 0 var(--spacing-sm);
	color: var(--gold-muted);
	font-family: var(--font-display);
	font-size: 0.72rem;
	font-weight: var(--weight-heading);
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.hall__facts {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--spacing-sm) var(--spacing-md);
	align-content: start;
	margin: 0;
	font-size: var(--text-small);
}

.hall__facts dt {
	color: var(--text-muted);
	font-family: var(--font-display);
	font-size: 0.7rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding-top: 2px;
}

.hall__facts dd {
	margin: 0;
	color: var(--text-primary);
}

.hall__sheet-actions {
	margin-top: var(--spacing-xs);
}

.hall__empty {
	margin: 0;
	color: var(--text-secondary);
	text-align: center;
}

@media (max-width: 1023.98px) {
	.hall__sheet {
		grid-template-columns: 240px minmax(0, 1fr);
		gap: var(--spacing-xl);
	}

	.hall__outfit--lg {
		width: 160px;
		height: 160px;
	}

	.hall__portrait-ring {
		width: 190px;
		height: 190px;
	}
}

@media (max-width: 899.98px) {
	.hall {
		margin-top: calc(-1 * var(--spacing-xl));
		padding-block: var(--spacing-xl) var(--spacing-2xl);
	}

	.hall__roster {
		grid-template-columns: repeat(5, minmax(120px, 1fr));
		gap: var(--spacing-sm);
		margin-inline: calc(-1 * var(--gutter));
		padding-inline: var(--gutter);
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
	}

	.hall__roster::-webkit-scrollbar {
		display: none;
	}

	.hall__slot {
		scroll-snap-align: center;
	}

	.hall__outfit {
		width: 80px;
		height: 80px;
	}

	.hall__sheet {
		grid-template-columns: 1fr;
		gap: var(--spacing-lg);
		padding: var(--spacing-lg);
	}

	.hall__portrait {
		min-height: 260px;
	}

	.hall__grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 599.98px) {
	.hall__head {
		align-items: flex-start;
		flex-direction: column;
	}

	.hall__card-name {
		font-size: 0.85rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hall__outfit,
	.hall__portrait-glow,
	.hall__portrait-ring::before {
		animation: none;
	}

	.hall__bg .xfade__layer::before {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Account management — the codex under the hall
   -------------------------------------------------------------------------- */
.account {
	display: grid;
	gap: var(--spacing-lg);
}

.account .lbox {
	margin-block: 0;
}

.account__codex {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: var(--spacing-lg);
	align-items: start;
}

.account__forge .lbox__glyph {
	color: var(--gold-muted);
}

.account__forge-body {
	display: grid;
	gap: var(--spacing-md);
}

.account__forge-text {
	margin: 0;
	color: var(--text-secondary);
}

/* chronicle: <details> with the lbox head as its summary */
.account__chronicle-summary {
	cursor: pointer;
	list-style: none;
	user-select: none;
}

.account__chronicle-summary::-webkit-details-marker {
	display: none;
}

.account__chronicle-summary:focus-visible {
	outline: 2px solid var(--gold-primary);
	outline-offset: -2px;
}

.account__chronicle-count {
	color: var(--text-muted);
	white-space: nowrap;
}

.account__chronicle-chevron {
	color: var(--gold-muted);
	transition: transform var(--duration-base) var(--ease-cine);
}

.account__chronicle[open] .account__chronicle-chevron {
	transform: rotate(180deg);
}

@media (max-width: 899.98px) {
	.account__codex {
		grid-template-columns: 1fr;
	}
}

/* --------------------------------------------------------------------------
   Who is online (online.html.twig)
   .world   full-bleed status banner (artwork + mist + embers, lamp, count-up)
   .forces  vocation statistics — sprites on lit floors with share bars
   .roster  the list; .csearch is the character search under it
   -------------------------------------------------------------------------- */
.online {
	display: grid;
	grid-template-columns: minmax(0, 1fr); /* the full-bleed .world must not widen the track */
	gap: var(--spacing-3xl);
}

/* --- world -------------------------------------------------------------- */
.world {
	--lamp-rgb: 127 156 106;
	position: relative;
	isolation: isolate;
	width: 100vw;
	margin: calc(-1 * var(--spacing-2xl)) calc(50% - 50vw) 0;
	padding-block: var(--spacing-3xl);
	overflow: hidden;
}

.world.is-offline {
	--lamp-rgb: var(--blood-rgb);
}

.world__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--bg-primary);
}

.world__art {
	position: absolute;
	inset: -6%;
	width: 112%;
	height: 112%;
	object-fit: cover;
	object-position: 50% 60%;
	filter: saturate(0.85) brightness(0.9);
	animation: world-drift 40s ease-in-out infinite alternate;
	will-change: transform;
}

@keyframes world-drift {
	from {
		transform: translate3d(0, 0, 0) scale(1);
	}
	to {
		transform: translate3d(-1.5%, -1%, 0) scale(1.06);
	}
}

.world__veil {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, var(--bg-primary) 0%, rgba(9, 9, 9, 0.2) 22%, rgba(9, 9, 9, 0.35) 78%, var(--bg-primary) 100%),
		linear-gradient(90deg, rgba(9, 9, 9, 0.75) 0%, rgba(9, 9, 9, 0.2) 45%, rgba(9, 9, 9, 0.45) 100%),
		radial-gradient(ellipse at 50% 50%, rgba(9, 9, 9, 0) 45%, rgba(9, 9, 9, 0.7) 100%);
}

.world__bg .cine-bg__mist {
	z-index: 1;
}

.world__embers {
	z-index: 1;
	--ember-rgb: var(--gold-rgb);
}

.world__inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: var(--spacing-2xl);
	align-items: center;
}

.world__pulse {
	display: grid;
	gap: var(--spacing-sm);
}

.world__state {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	margin: 0;
	color: var(--text-primary);
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: var(--weight-heading);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9);
}

/* the lamp: a lit gem that breathes */
.world__lamp {
	position: relative;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, #fff, rgb(var(--lamp-rgb) / 1) 40%, rgb(var(--lamp-rgb) / 0.6));
	box-shadow: 0 0 0 3px rgb(var(--lamp-rgb) / 0.18), 0 0 18px rgb(var(--lamp-rgb) / 0.7);
	animation: lamp-breathe 2.6s ease-in-out infinite;
}

.world__lamp::after {
	content: "";
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	border: 1px solid rgb(var(--lamp-rgb) / 0.5);
	animation: lamp-ring 2.6s ease-out infinite;
}

@keyframes lamp-breathe {
	0%,
	100% {
		box-shadow: 0 0 0 3px rgb(var(--lamp-rgb) / 0.18), 0 0 14px rgb(var(--lamp-rgb) / 0.55);
	}
	50% {
		box-shadow: 0 0 0 4px rgb(var(--lamp-rgb) / 0.26), 0 0 26px rgb(var(--lamp-rgb) / 0.9);
	}
}

@keyframes lamp-ring {
	from {
		transform: scale(0.6);
		opacity: 0.9;
	}
	to {
		transform: scale(2.2);
		opacity: 0;
	}
}

.world__count {
	display: flex;
	align-items: baseline;
	gap: var(--spacing-md);
	flex-wrap: wrap;
	margin: 0;
}

.world__number {
	color: var(--gold-primary);
	font-family: var(--font-display);
	font-size: clamp(4rem, 9vw, 7.5rem);
	font-weight: var(--weight-heading);
	line-height: 0.9;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
	text-shadow:
		0 0 30px rgb(var(--gold-rgb) / 0.45),
		0 2px 20px rgba(0, 0, 0, 0.9);
}

.world__count-label {
	max-width: 16ch;
	color: var(--text-secondary);
	font-size: var(--text-body-lg);
	line-height: 1.3;
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9);
}

.world__afk {
	margin: 0;
	color: var(--text-muted);
}

/* facts: a chamfered codex plate */
.world__facts {
	--voc-cut: 12px;
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	margin: 0;
	padding: 1px;
	clip-path: polygon(
		var(--voc-cut) 0, calc(100% - var(--voc-cut)) 0, 100% var(--voc-cut),
		100% calc(100% - var(--voc-cut)), calc(100% - var(--voc-cut)) 100%, var(--voc-cut) 100%,
		0 calc(100% - var(--voc-cut)), 0 var(--voc-cut));
	background: linear-gradient(160deg, rgb(var(--gold-rgb) / 0.55), rgb(var(--gold-rgb) / 0.15) 50%, rgb(var(--gold-rgb) / 0.45));
}

.world__fact {
	display: grid;
	gap: 6px;
	padding: var(--spacing-md) var(--spacing-lg);
	background:
		var(--texture-noise) 0 0 / 180px 180px repeat,
		linear-gradient(180deg, rgba(20, 17, 12, 0.92), rgba(11, 10, 8, 0.96));
	background-blend-mode: soft-light, normal;
	box-shadow: inset 1px 1px 0 rgba(255, 236, 200, 0.05);
}

/* an odd last fact stretches across both columns instead of leaving a hole */
.world__fact:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

.world__fact dt {
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
	color: var(--gold-muted);
	font-family: var(--font-display);
	font-size: 0.68rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.world__fact dt .icon {
	color: var(--gold-muted);
}

.world__fact dd {
	margin: 0;
	color: var(--text-primary);
	font-size: var(--text-body);
	font-variant-numeric: tabular-nums;
}

.world__clock {
	font-family: var(--font-display);
	letter-spacing: 0.08em;
}

/* --- forces -------------------------------------------------------------- */
.forces__title {
	margin-bottom: var(--spacing-xl);
}

.forces__grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--spacing-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

.force {
	--voc-rgb: var(--gold-rgb);
	--voc-cut: 10px;
	position: relative;
	isolation: isolate;
	display: grid;
	justify-items: center;
	gap: 6px;
	padding: var(--spacing-lg) var(--spacing-md) var(--spacing-lg);
	text-align: center;
	clip-path: polygon(
		var(--voc-cut) 0, calc(100% - var(--voc-cut)) 0, 100% var(--voc-cut),
		100% calc(100% - var(--voc-cut)), calc(100% - var(--voc-cut)) 100%, var(--voc-cut) 100%,
		0 calc(100% - var(--voc-cut)), 0 var(--voc-cut));
	background: linear-gradient(160deg, rgb(var(--voc-rgb) / 0.45), rgb(var(--voc-rgb) / 0.12) 50%, rgb(var(--voc-rgb) / 0.35));
	transition: transform var(--duration-base) var(--ease-cine);
}

.force::before {
	content: "";
	position: absolute;
	inset: 1px;
	z-index: -1;
	clip-path: polygon(
		calc(var(--voc-cut) - 1px) 0, calc(100% - var(--voc-cut) + 1px) 0, 100% calc(var(--voc-cut) - 1px),
		100% calc(100% - var(--voc-cut) + 1px), calc(100% - var(--voc-cut) + 1px) 100%, calc(var(--voc-cut) - 1px) 100%,
		0 calc(100% - var(--voc-cut) + 1px), 0 calc(var(--voc-cut) - 1px));
	background:
		radial-gradient(ellipse at 50% 30%, rgb(var(--voc-rgb) / 0.16), rgba(9, 9, 9, 0) 60%),
		linear-gradient(180deg, #14110c, #0b0a08);
}


.force:hover {
	transform: translateY(-4px);
}

.force.is-empty {
	opacity: 0.55;
	filter: saturate(0.4);
}

.force__stage {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	height: 132px;
}

.force__glow {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 50% 70%, rgb(var(--voc-rgb) / 0.35), rgba(0, 0, 0, 0) 60%);
	animation: hall-glow 3.6s ease-in-out infinite alternate;
	animation-delay: calc(var(--i, 0) * -0.6s);
}

.force__sprite {
	position: relative;
	height: 112px;
	width: auto;
	filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.85));
	animation: auth-idle 3.4s ease-in-out infinite;
	animation-delay: calc(var(--i, 0) * -0.7s);
	will-change: transform;
}

.force__rune {
	position: relative;
	width: 56px;
	height: 56px;
	color: rgb(var(--voc-rgb) / 0.8);
}

.force__floor {
	position: absolute;
	left: 50%;
	bottom: 4px;
	width: 70%;
	height: 12px;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.9), rgb(var(--voc-rgb) / 0.3) 45%, rgba(0, 0, 0, 0) 75%);
}

.force__count {
	color: var(--text-primary);
	font-family: var(--font-display);
	font-size: 2.2rem;
	font-weight: var(--weight-heading);
	line-height: 1;
	font-variant-numeric: tabular-nums;
	text-shadow: 0 0 18px rgb(var(--voc-rgb) / 0.45);
}

.force__name {
	color: rgb(var(--voc-rgb) / 1);
	font-family: var(--font-display);
	font-size: 0.72rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.force__bar {
	position: relative;
	display: block;
	width: 100%;
	height: 4px;
	margin-top: var(--spacing-xs);
	background: rgba(0, 0, 0, 0.7);
	box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.9), 0 1px 0 rgba(255, 236, 200, 0.04);
}

.force__fill {
	position: absolute;
	inset: 0;
	width: var(--p, 0%);
	background: linear-gradient(90deg, rgb(var(--voc-rgb) / 0.55), rgb(var(--voc-rgb) / 1));
	box-shadow: 0 0 8px rgb(var(--voc-rgb) / 0.6);
	transition: width 1s var(--ease-cine);
	transition-delay: calc(var(--i, 0) * 90ms + 300ms);
}

.js .reveal-group:not(.is-visible) .force__fill {
	width: 0;
	transition: none;
}

.force__share {
	color: var(--text-muted);
}

/* --- roster -------------------------------------------------------------- */
.roster {
	display: grid;
	gap: var(--spacing-lg);
}

.roster__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: var(--spacing-lg);
	flex-wrap: wrap;
}

.roster__title {
	margin: var(--spacing-xs) 0 0;
}

.roster__total {
	display: inline-grid;
	place-items: center;
	min-width: 2em;
	height: 1.6em;
	padding-inline: 0.5em;
	margin-left: var(--spacing-xs);
	vertical-align: middle;
	color: var(--gold-primary);
	font-size: 0.55em;
	letter-spacing: 0.06em;
	background: rgb(var(--gold-rgb) / 0.1);
	border: 1px solid rgb(var(--gold-rgb) / 0.35);
}

.roster__sort {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
	flex-wrap: wrap;
}

.roster__sort-label {
	color: var(--text-muted);
}

.roster__sort .chips {
	margin: 0;
}

.chip__arrow {
	margin-left: 6px;
	transition: transform var(--duration-fast) var(--ease-cine);
}

.chip__arrow.is-desc {
	transform: rotate(90deg);
}

.roster__table-wrap {
	position: relative;
	border-color: rgb(var(--gold-rgb) / 0.2);
}

.roster__table-wrap::before,
.roster__table-wrap::after {
	content: "";
	position: absolute;
	inset: -5px;
	pointer-events: none;
	--corner-color: rgb(var(--gold-rgb) / 0.55);
	--corner-len: 18px;
	background-image:
		linear-gradient(var(--corner-color), var(--corner-color)),
		linear-gradient(var(--corner-color), var(--corner-color));
	background-repeat: no-repeat;
}

.roster__table-wrap::before {
	background-position: left top, left top;
	background-size: var(--corner-len) 1px, 1px var(--corner-len);
}

.roster__table-wrap::after {
	background-position: right bottom, right bottom;
	background-size: var(--corner-len) 1px, 1px var(--corner-len);
}

.roster__row td {
	padding-block: 8px;
}

/* rows carry their class colour on the left edge */
.roster__row td:first-child {
	box-shadow: inset 3px 0 0 rgb(var(--voc-rgb) / 0.55);
}

.roster__row:hover td:first-child {
	box-shadow: inset 3px 0 0 rgb(var(--voc-rgb) / 1);
}

/* narrow sprite/flag cells: tight padding so the images are not squeezed */
.roster__table th:first-child,
.roster__table .roster__outfit,
.roster__table .roster__flag {
	padding-inline: 8px;
}

.roster__outfit img,
.roster__flag img {
	max-width: none;
}

.roster__pedestal {
	position: relative;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
}

.roster__pedestal::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 4px;
	width: 70%;
	height: 10px;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.9), rgb(var(--voc-rgb) / 0.3) 45%, rgba(0, 0, 0, 0) 75%);
}

.roster__pedestal img {
	position: relative;
	width: 56px;
	height: 56px;
	image-rendering: pixelated;
	translate: -10% 0;
	filter: drop-shadow(0 6px 5px rgba(0, 0, 0, 0.85));
	transition: transform var(--duration-base) var(--ease-cine);
}

.roster__row:hover .roster__pedestal img {
	transform: translateY(-3px);
}

.roster__flag img {
	display: block;
	width: 20px;
	height: auto;
	image-rendering: auto;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
}

.roster__name a {
	color: var(--text-primary);
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: var(--weight-heading);
	letter-spacing: 0.03em;
	text-decoration: none;
	transition: color var(--duration-fast) var(--ease-cine);
}

.roster__name a:hover {
	color: var(--gold-primary);
}

.roster__name img {
	margin-left: 6px;
	vertical-align: -1px;
}

.roster__level b {
	color: var(--text-primary);
	font-family: var(--font-display);
	font-weight: var(--weight-heading);
	font-variant-numeric: tabular-nums;
}

.voctag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px 3px 8px;
	color: rgb(var(--voc-rgb) / 1);
	font-family: var(--font-display);
	font-size: 0.68rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	background: rgb(var(--voc-rgb) / 0.08);
	border: 1px solid rgb(var(--voc-rgb) / 0.3);
	white-space: nowrap;
}

.voctag::before {
	content: "";
	width: 5px;
	height: 5px;
	background: rgb(var(--voc-rgb) / 1);
	box-shadow: 0 0 6px rgb(var(--voc-rgb) / 0.8);
	transform: rotate(45deg);
}

.roster__foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--spacing-md);
	flex-wrap: wrap;
}

.roster__legend {
	display: flex;
	gap: var(--spacing-md);
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--text-muted);
	font-size: var(--text-caption);
}

.roster__legend li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.roster__note {
	margin: 0;
	color: var(--text-muted);
}

/* empty world */
.roster__empty {
	position: relative;
	isolation: isolate;
	display: grid;
	justify-items: center;
	gap: var(--spacing-sm);
	padding: var(--spacing-3xl) var(--spacing-xl);
	overflow: hidden;
	text-align: center;
	border: 1px solid rgb(var(--gold-rgb) / 0.18);
	background:
		radial-gradient(ellipse at 50% 100%, rgb(var(--gold-rgb) / 0.14), rgba(9, 9, 9, 0) 60%),
		linear-gradient(180deg, var(--surface-dark), var(--bg-secondary));
}

.roster__empty-embers {
	z-index: 0;
}

.roster__empty > :not(.embers) {
	position: relative;
	z-index: 1;
}

.roster__empty-mark {
	width: 48px;
	height: 48px;
	color: var(--gold-muted);
	animation: hall-glow 3s ease-in-out infinite alternate;
}

.roster__empty .t-h3 {
	margin: var(--spacing-sm) 0 0;
}

.roster__empty .t-body-lg {
	margin: 0 0 var(--spacing-md);
	color: var(--text-secondary);
}

/* --- character search (characters.form.html.twig) ------------------------ */
.csearch {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	gap: var(--spacing-lg);
	align-items: center;
	margin-top: var(--spacing-3xl);
	padding: var(--spacing-xl);
	border: 1px solid rgb(var(--gold-rgb) / 0.18);
	background: linear-gradient(180deg, var(--surface-dark), var(--bg-secondary));
}

.csearch__title {
	margin: var(--spacing-xs) 0 0;
}

.csearch__field {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--spacing-sm);
	align-items: center;
}

.csearch .finput {
	background: linear-gradient(180deg, #080706, #0f0d0a);
	box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.95), inset -1px -1px 0 rgba(255, 236, 200, 0.06);
}

@media (max-width: 1023.98px) {
	.world__inner {
		grid-template-columns: 1fr;
	}

	.forces__grid {
		grid-template-columns: repeat(5, minmax(150px, 1fr));
		margin-inline: calc(-1 * var(--gutter));
		padding-inline: var(--gutter);
		overflow-x: auto;
		scrollbar-width: none;
	}

	.forces__grid::-webkit-scrollbar {
		display: none;
	}
}

@media (max-width: 767.98px) {
	.online {
		gap: var(--spacing-2xl);
	}

	.world {
		margin-top: calc(-1 * var(--spacing-xl));
		padding-block: var(--spacing-2xl);
	}

	.world__facts {
		grid-template-columns: 1fr 1fr;
	}

	.world__fact {
		padding: var(--spacing-sm) var(--spacing-md);
	}

	.roster__head {
		align-items: flex-start;
		flex-direction: column;
	}

	.csearch {
		grid-template-columns: 1fr;
		padding: var(--spacing-lg);
	}
}

@media (max-width: 479.98px) {
	.csearch__field {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 359.98px) {
	.world__facts {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.world__art,
	.world__lamp,
	.world__lamp::after,
	.force__glow,
	.force__sprite,
	.roster__empty-mark {
		animation: none;
	}

	.force__fill {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Highscores (highscores.html.twig)
   .hs            full-bleed hall of champions, tinted by --voc-rgb
   .podium-arena  ranks 1–3 as identical framed cards + metal trophies
   .hs__nav       skill / vocation chips; .hs__table the ranking
   -------------------------------------------------------------------------- */
.hs {
	--voc-rgb: var(--gold-rgb);
	--ember-rgb: var(--voc-rgb);
	position: relative;
	isolation: isolate;
	width: 100vw;
	margin: calc(-1 * var(--spacing-2xl)) calc(50% - 50vw) calc(-1 * var(--spacing-2xl));
	padding-block: var(--spacing-2xl) var(--spacing-3xl);
	overflow: hidden;
}

/* the core prints its cache note before the template; the stage carries its own */
.legacy > small:has(+ br + br + .hs),
.legacy > small:has(+ br + br + .hs) + br,
.legacy > small:has(+ br + br + .hs) + br + br {
	display: none;
}

.hs__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	background: var(--bg-primary);
}

/* Pin the hall to a viewport-width band behind the title/podium. Covering
   the whole .hs (table included) zooms the 1536px art until the pixels smear. */
img.hs__scene {
	position: absolute;
	top: 0;
	left: 0;
	bottom: auto;
	width: 100%;
	max-width: none;
	height: clamp(260px, 46vw, 540px);
	object-fit: cover;
	object-position: 50% 40%;
	filter: saturate(1.08) brightness(0.78) contrast(1.05);
	animation: hs-drift 50s ease-in-out infinite alternate;
	will-change: transform;
}

.hs.has-voc img.hs__scene {
	filter: saturate(1.12) brightness(0.8) contrast(1.05);
}

@keyframes hs-drift {
	from {
		transform: scale(1);
	}
	to {
		transform: scale(1.03);
	}
}

.hs__bg .cine-bg__mist {
	z-index: 1;
}

/* torch pools sit on the hall's side sconces and breathe */
.hs__torch {
	position: absolute;
	z-index: 1;
	width: 42%;
	height: clamp(260px, 46vw, 540px);
	top: 0;
	pointer-events: none;
	background: radial-gradient(ellipse at 50% 42%, rgb(255 160 64 / 0.28), rgb(180 70 20 / 0.08) 42%, rgba(0, 0, 0, 0) 72%);
	animation: hs-torch 2.8s ease-in-out infinite alternate;
	mix-blend-mode: screen;
}

.hs__torch--l {
	left: -8%;
}

.hs__torch--r {
	right: -8%;
	animation-delay: -1.4s;
}

@keyframes hs-torch {
	from {
		opacity: 0.72;
		transform: scale(0.96);
	}
	to {
		opacity: 1;
		transform: scale(1.06);
	}
}

.hs__veil {
	position: absolute;
	inset: 0;
	z-index: 2;
	background:
		radial-gradient(ellipse at 50% 120px, rgb(var(--voc-rgb) / 0.12), rgba(9, 9, 9, 0) 420px),
		linear-gradient(180deg,
			rgba(9, 9, 9, 0.38) 0,
			rgba(9, 9, 9, 0.16) 120px,
			rgba(9, 9, 9, 0.28) 360px,
			rgba(9, 9, 9, 0.78) 500px,
			var(--bg-primary) 580px);
}

.hs__embers {
	z-index: 1;
}

.hs__inner {
	position: relative;
	z-index: 2;
	display: grid;
	gap: var(--spacing-xl);
}

.hs__head .t-eyebrow {
	color: rgb(var(--voc-rgb) / 1);
}

.hs__title {
	margin: var(--spacing-xs) 0 0;
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.9);
}

.hs__title-voc {
	color: rgb(var(--voc-rgb) / 1);
}

/* --- podium ---------------------------------------------------------------- */
.podium-arena {
	position: relative;
	padding: var(--spacing-md) 0 var(--spacing-xs);
}

.podium {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: end;
	gap: var(--spacing-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

.podium__place {
	--metal-rgb: var(--podium-silver-rgb);
	--rise: 10px;
	position: relative;
	display: grid;
	justify-items: stretch;
}

.podium__place--1 {
	--metal-rgb: var(--podium-gold-rgb);
	--rise: 22px;
	z-index: 1;
}

.podium__place--2 {
	--metal-rgb: var(--podium-silver-rgb);
	--rise: 12px;
}

.podium__place--3 {
	--metal-rgb: var(--podium-bronze-rgb);
	--rise: 8px;
}

.podium__card {
	--corner-color: rgb(var(--metal-rgb) / 0.7);
	--corner-len: 14px;
	--corner-inset: 6px;
	position: relative;
	display: grid;
	justify-items: center;
	gap: 8px;
	width: 100%;
	min-height: 100%;
	padding: var(--spacing-lg) var(--spacing-md) var(--spacing-md);
	text-align: center;
	text-decoration: none;
	color: var(--text-primary);
	border: 1px solid rgb(var(--metal-rgb) / 0.42);
	background:
		var(--texture-noise) 0 0 / 180px 180px repeat,
		linear-gradient(180deg, rgb(var(--metal-rgb) / 0.16), rgba(9, 9, 9, 0.72) 36%, rgba(9, 9, 9, 0.86));
	background-blend-mode: soft-light, normal;
	box-shadow:
		inset 0 1px 0 rgb(var(--metal-rgb) / 0.22),
		0 18px 36px rgba(0, 0, 0, 0.55);
	isolation: isolate;
	transition: transform var(--duration-base) var(--ease-cine), border-color var(--duration-fast) var(--ease-cine), box-shadow var(--duration-fast) var(--ease-cine);
}

.podium__corners {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}

.podium__card:hover {
	transform: translateY(-4px);
	border-color: rgb(var(--metal-rgb) / 0.75);
	box-shadow:
		inset 0 1px 0 rgb(var(--metal-rgb) / 0.35),
		0 0 28px rgb(var(--metal-rgb) / 0.22),
		0 22px 40px rgba(0, 0, 0, 0.6);
}

.podium__place--1 .podium__card {
	padding-top: var(--spacing-xl);
	box-shadow:
		inset 0 1px 0 rgb(var(--podium-gold-rgb) / 0.35),
		0 0 36px rgb(var(--podium-gold-rgb) / 0.18),
		0 22px 44px rgba(0, 0, 0, 0.62);
}

.podium__glow {
	position: absolute;
	inset: auto 8% 18%;
	height: 48%;
	z-index: -1;
	background: radial-gradient(ellipse at 50% 100%, rgb(var(--metal-rgb) / 0.38), rgb(var(--voc-rgb) / 0.12) 45%, rgba(0, 0, 0, 0) 70%);
	animation: hall-glow 3.6s ease-in-out infinite alternate;
	animation-delay: calc(var(--i, 0) * -0.8s);
}

.podium__trophy {
	position: relative;
	z-index: 1;
	width: 56px;
	height: auto;
	image-rendering: pixelated;
	filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 14px rgb(var(--metal-rgb) / 0.45));
	animation: hs-trophy 4.2s ease-in-out infinite;
	animation-delay: calc(var(--i, 0) * -0.7s);
}

.podium__place--1 .podium__trophy {
	width: 72px;
}

@keyframes hs-trophy {
	0%,
	100% {
		transform: translateY(0);
		filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 12px rgb(var(--metal-rgb) / 0.4));
	}
	50% {
		transform: translateY(-4px);
		filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 20px rgb(var(--metal-rgb) / 0.65));
	}
}

.podium__stage {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	height: 118px;
}

.podium__place--1 .podium__stage {
	height: 142px;
}

.podium__outfit {
	position: relative;
	width: 96px;
	height: 96px;
	image-rendering: pixelated;
	translate: -10% 0;
	filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.85));
	animation: auth-idle 3.4s ease-in-out infinite;
	animation-delay: calc(var(--i, 0) * -0.9s);
}

.podium__place--1 .podium__outfit {
	width: 120px;
	height: 120px;
}

.podium__floor {
	position: absolute;
	left: 50%;
	bottom: 4px;
	width: 58%;
	height: 16px;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at center, rgb(var(--metal-rgb) / 0.55), rgb(var(--voc-rgb) / 0.25) 42%, rgba(0, 0, 0, 0) 75%);
	filter: blur(1px);
}

.podium__name {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-display);
	font-size: 1.05rem;
	font-weight: var(--weight-heading);
	letter-spacing: 0.03em;
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9);
}

.podium__place--1 .podium__name {
	font-size: 1.3rem;
	color: rgb(var(--podium-gold-rgb) / 1);
}

.podium__value {
	margin-top: var(--spacing-xs);
	font-family: var(--font-display);
	font-variant-numeric: tabular-nums;
}

.podium__value b {
	font-size: 1.6rem;
	font-weight: var(--weight-heading);
	color: var(--text-primary);
	text-shadow: 0 0 16px rgb(var(--metal-rgb) / 0.45);
}

.podium__place--1 .podium__value b {
	font-size: 2rem;
}

.podium__value small {
	color: var(--text-muted);
	font-size: 0.68rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.podium__xp {
	color: var(--text-muted);
}

/* a short rectangular stone step — same shape on every place, height ranks them */
.podium__pedestal {
	width: 100%;
	height: var(--rise);
	background:
		var(--texture-noise) 0 0 / 160px 160px repeat,
		linear-gradient(180deg, #1c1812, #0b0a08);
	background-blend-mode: soft-light, normal;
	box-shadow: inset 0 1px 0 rgb(var(--metal-rgb) / 0.55), inset 0 -1px 0 rgba(0, 0, 0, 0.9), 0 12px 22px rgba(0, 0, 0, 0.45);
}

/* --- filters --------------------------------------------------------------- */
.hs__nav {
	display: grid;
	gap: var(--spacing-md);
	padding: var(--spacing-md) var(--spacing-lg);
	border: 1px solid rgb(var(--gold-rgb) / 0.16);
	background: linear-gradient(180deg, rgba(14, 12, 9, 0.8), rgba(9, 9, 9, 0.7));
	backdrop-filter: blur(6px);
}

.hs__filter {
	display: grid;
	grid-template-columns: 90px minmax(0, 1fr);
	align-items: center;
	gap: var(--spacing-md);
}

.hs__filter-label {
	color: var(--text-muted);
}

.chip--voc {
	--voc-rgb: var(--gold-rgb);
	padding-left: 10px;
}

.chip--voc::before {
	content: "";
	width: 6px;
	height: 6px;
	margin-right: 8px;
	background: rgb(var(--voc-rgb) / 1);
	box-shadow: 0 0 6px rgb(var(--voc-rgb) / 0.8);
	transform: rotate(45deg);
}

.chip--voc:hover {
	color: rgb(var(--voc-rgb) / 1);
	border-color: rgb(var(--voc-rgb) / 0.6);
}

.chip--voc.is-active {
	color: var(--text-inverse);
	background: rgb(var(--voc-rgb) / 1);
	border-color: rgb(var(--voc-rgb) / 1);
	box-shadow: 0 0 18px rgb(var(--voc-rgb) / 0.4);
}

.chip--voc.is-active::before {
	background: var(--text-inverse);
	box-shadow: none;
}

/* --- table ----------------------------------------------------------------- */
.hs__table-wrap {
	position: relative;
	border-color: rgb(var(--gold-rgb) / 0.2);
	background: rgba(9, 9, 9, 0.6);
	backdrop-filter: blur(6px);
}

.hs__table-wrap::before,
.hs__table-wrap::after {
	content: "";
	position: absolute;
	inset: -5px;
	pointer-events: none;
	--corner-color: rgb(var(--gold-rgb) / 0.55);
	--corner-len: 18px;
	background-image:
		linear-gradient(var(--corner-color), var(--corner-color)),
		linear-gradient(var(--corner-color), var(--corner-color));
	background-repeat: no-repeat;
}

.hs__table-wrap::before {
	background-position: left top, left top;
	background-size: var(--corner-len) 1px, 1px var(--corner-len);
}

.hs__table-wrap::after {
	background-position: right bottom, right bottom;
	background-size: var(--corner-len) 1px, 1px var(--corner-len);
}

.hs__table th {
	background: rgba(0, 0, 0, 0.6);
}

.hs__th-rank {
	width: 84px;
}

.hs__th-outfit {
	width: 72px;
}

.hs__th-flag {
	width: 44px;
}

.hs__th-value {
	width: 220px;
}

.hs__th-xp {
	width: 180px;
}

.hs__row td {
	padding-block: 8px;
	border-bottom-color: rgba(255, 236, 200, 0.05);
}

.hs__row td:first-child {
	box-shadow: inset 3px 0 0 rgb(var(--voc-rgb) / 0.5);
}

.hs__row:hover td {
	background: rgb(var(--voc-rgb) / 0.06);
}

.hs__row:hover td:first-child {
	box-shadow: inset 3px 0 0 rgb(var(--voc-rgb) / 1);
}

.hs__row.is-top td {
	background: linear-gradient(90deg, rgb(var(--gold-rgb) / 0.07), rgba(0, 0, 0, 0) 60%);
}

.hs__rank {
	text-align: center;
}

.hs__rank-num {
	color: var(--gold-muted);
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	font-variant-numeric: tabular-nums;
}

.hs__cup {
	display: inline-grid;
	place-items: center;
	width: 32px;
	height: 36px;
	animation: hs-trophy 5s ease-in-out infinite;
	animation-delay: calc(var(--i, 0) * 0.6s);
}

.hs__cup img {
	width: 28px;
	height: auto;
	image-rendering: pixelated;
	filter: drop-shadow(0 0 8px rgb(var(--podium-gold-rgb) / 0.45));
}

.hs__cup--2 img {
	filter: drop-shadow(0 0 8px rgb(var(--podium-silver-rgb) / 0.4));
}

.hs__cup--3 img {
	filter: drop-shadow(0 0 8px rgb(var(--podium-bronze-rgb) / 0.4));
}

.hs__table th:first-child,
.hs__table .hs__outfit,
.hs__table .hs__flag,
.hs__table .hs__rank {
	padding-inline: 8px;
}

.hs__outfit img,
.hs__flag img {
	max-width: none;
}

/* a block-level flex link keeps the cell a real table-cell; the tag wraps below it */
.hs__name a {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 4px;
	color: var(--text-primary);
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: var(--weight-heading);
	letter-spacing: 0.03em;
	text-decoration: none;
	transition: color var(--duration-fast) var(--ease-cine);
}

.hs__name a:hover {
	color: var(--gold-primary);
}

.hs__row.is-top-1 .hs__name a {
	color: var(--gold-primary);
}

.voctag--sm {
	padding: 1px 8px 1px 6px;
	font-size: 0.6rem;
	letter-spacing: 0.14em;
}

.voctag--sm::before {
	width: 4px;
	height: 4px;
}

.hs__value {
	position: relative;
	color: var(--text-primary);
	font-family: var(--font-display);
	font-variant-numeric: tabular-nums;
}

.hs__value-num {
	display: block;
	font-size: 1.05rem;
	font-weight: var(--weight-heading);
	letter-spacing: 0.03em;
}

.hs__value-bar {
	display: block;
	width: 120px;
	height: 3px;
	margin: 5px 0 0 auto;
	background: rgba(0, 0, 0, 0.7);
	box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.9), 0 1px 0 rgba(255, 236, 200, 0.04);
}

.hs__value-fill {
	display: block;
	width: var(--p, 0%);
	height: 100%;
	margin-left: auto;
	background: linear-gradient(90deg, rgb(var(--voc-rgb) / 0.5), rgb(var(--voc-rgb) / 1));
	box-shadow: 0 0 8px rgb(var(--voc-rgb) / 0.5);
	transition: width 900ms var(--ease-cine);
	transition-delay: calc(var(--i, 0) * 40ms + 200ms);
}

.js .reveal-group:not(.is-visible) .hs__value-fill {
	width: 0;
	transition: none;
}

.hs__xp {
	color: var(--text-secondary);
	font-family: var(--font-display);
	letter-spacing: 0.03em;
	font-variant-numeric: tabular-nums;
}

.hs__empty {
	padding: var(--spacing-2xl);
	text-align: center;
	color: var(--text-muted);
}

.hs__foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--spacing-md);
	flex-wrap: wrap;
}

.hs__note {
	margin: 0;
	color: var(--text-muted);
}

.hs__pager {
	display: flex;
	gap: var(--spacing-sm);
	margin-left: auto;
}

/* Chips (link filters) */
.chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-xs);
}

.chip {
	display: inline-flex;
	align-items: center;
	padding: 6px 12px;
	font-family: var(--font-ui);
	font-size: var(--text-caption);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--text-secondary);
	border: 1px solid var(--border-subtle);
	background: rgba(0, 0, 0, 0.3);
	transition:
		color var(--duration-fast) var(--ease-cine),
		border-color var(--duration-fast) var(--ease-cine),
		background-color var(--duration-fast) var(--ease-cine),
		box-shadow var(--duration-fast) var(--ease-cine);
}

.chip:hover {
	color: var(--gold-primary);
	border-color: var(--border-default);
}

.chip.is-active {
	color: var(--text-inverse);
	background: var(--gold-primary);
	border-color: var(--gold-primary);
	box-shadow: 0 0 18px rgb(var(--gold-rgb) / 0.35);
}

@media (max-width: 767.98px) {
	.hs {
		margin-block: calc(-1 * var(--spacing-xl));
		padding-block: var(--spacing-xl) var(--spacing-2xl);
	}

	.hs__inner {
		gap: var(--spacing-lg);
	}

	img.hs__scene,
	.hs__torch {
		height: clamp(220px, 78vw, 380px);
	}

	.hs__torch {
		width: 55%;
	}

	.podium {
		gap: var(--spacing-xs);
	}

	.podium__card {
		padding: var(--spacing-md) var(--spacing-xs) var(--spacing-sm);
	}

	.podium__place--1 .podium__card {
		padding-top: var(--spacing-lg);
	}

	.podium__trophy {
		width: 40px;
	}

	.podium__place--1 .podium__trophy {
		width: 52px;
	}

	.podium__stage {
		height: 92px;
	}

	.podium__place--1 .podium__stage {
		height: 116px;
	}

	.podium__outfit {
		width: 72px;
		height: 72px;
	}

	.podium__place--1 .podium__outfit {
		width: 96px;
		height: 96px;
	}

	.podium__name {
		font-size: 0.85rem;
	}

	.podium__place--1 .podium__name {
		font-size: 1rem;
	}

	.podium__value b {
		font-size: 1.25rem;
	}

	.podium__place--1 .podium__value b {
		font-size: 1.5rem;
	}

	.podium__xp,
	.podium .voctag {
		display: none;
	}

	.hs__nav {
		padding: var(--spacing-sm) var(--spacing-md);
	}

	.hs__filter {
		grid-template-columns: 1fr;
		gap: var(--spacing-xs);
	}

	.hs__filter .chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 4px;
		scrollbar-width: none;
	}

	.hs__filter .chips::-webkit-scrollbar {
		display: none;
	}

	.hs__value-bar {
		display: none;
	}
}

/* phones: rank · name · value fit without sideways scrolling */
@media (max-width: 639.98px) {
	.hs__th-outfit,
	.hs__outfit,
	.hs__th-flag,
	.hs__flag,
	.hs__th-xp,
	.hs__xp {
		display: none;
	}

	.hs__table {
		table-layout: fixed;
	}

	.hs__th-rank {
		width: 64px;
	}

	.hs__th-value {
		width: 96px;
	}

	.hs__table .hs__rank {
		padding-inline: 4px;
	}

	.hs__table .hs__name {
		white-space: normal;
		overflow-wrap: anywhere;
	}

	.hs__cup {
		width: 24px;
		height: 28px;
	}

	.hs__cup img {
		width: 22px;
	}

	.hs__name a {
		font-size: 0.92rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hs__scene,
	img.hs__scene,
	.hs__torch,
	.podium__glow,
	.podium__outfit,
	.podium__trophy,
	.hs__cup {
		animation: none;
	}

	.hs__value-fill {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Footer meta (MyAAC template_footer)
   -------------------------------------------------------------------------- */
.site-footer__meta {
	color: var(--text-muted);
}

.site-footer__meta a {
	color: var(--text-secondary);
}

.site-footer__meta a:hover {
	color: var(--gold-primary);
}

/* --------------------------------------------------------------------------
   Account creation (account.create.html.twig)
   Three centred acts: account → your party → oath. Same panel language as
   .auth__panel; the party cards (.cparty) reuse the home outfit artwork —
   one card per vocation, each one a character the player names.
   -------------------------------------------------------------------------- */
.acreate {
	display: grid;
	gap: var(--spacing-xl);
	max-width: 1040px;
	margin-inline: auto;
}

.acreate__head {
	display: grid;
	justify-items: center;
	gap: var(--spacing-sm);
	text-align: center;
	padding-bottom: var(--spacing-sm);
}

.acreate__title {
	margin: 0;
	line-height: 1.05;
}

.acreate__lede {
	max-width: 56ch;
	margin: 0;
	color: var(--text-secondary);
}

/* step ribbon: I · II · III */
.acreate__steps {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--spacing-md) var(--spacing-lg);
	margin: var(--spacing-md) 0 0;
	padding: 0;
	list-style: none;
	color: var(--text-muted);
	font-family: var(--font-ui);
	font-size: var(--text-caption);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
}

.acreate__step {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-sm);
}

.acreate__step + .acreate__step::before {
	content: "";
	width: 28px;
	height: 1px;
	margin-right: var(--spacing-sm);
	background: rgb(var(--gold-rgb) / 0.3);
}

.acreate__step-num {
	position: relative;
	display: inline-grid;
	place-items: center;
	width: 24px;
	height: 24px;
	color: var(--gold-primary);
	font-family: var(--font-display);
	font-size: 0.7rem;
	letter-spacing: 0;
}

.acreate__step-num::before {
	/* diamond frame behind the numeral */
	content: "";
	position: absolute;
	inset: 3px;
	border: 1px solid rgb(var(--gold-rgb) / 0.4);
	transform: rotate(45deg);
}

/* panels */
.acreate__panel {
	position: relative;
	display: grid;
	gap: var(--spacing-lg);
	padding: var(--spacing-xl);
	background: linear-gradient(180deg, var(--surface-dark), var(--bg-secondary));
	border: 1px solid var(--border-subtle);
}

.acreate__corners {
	position: absolute;
	inset: 0;
	pointer-events: none;
	--corner-color: var(--border-ornament);
	--corner-len: 18px;
	background-image:
		linear-gradient(var(--corner-color), var(--corner-color)),
		linear-gradient(var(--corner-color), var(--corner-color)),
		linear-gradient(var(--corner-color), var(--corner-color)),
		linear-gradient(var(--corner-color), var(--corner-color));
	background-position: left top, left top, right bottom, right bottom;
	background-size: var(--corner-len) 1px, 1px var(--corner-len), var(--corner-len) 1px, 1px var(--corner-len);
	background-repeat: no-repeat;
}

.acreate__panel-head {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
	padding-bottom: var(--spacing-md);
	border-bottom: 1px solid var(--border-subtle);
}

.acreate__panel-title {
	margin: 0;
}

.acreate__panel-text {
	margin: var(--spacing-xs) 0 0;
	color: var(--text-muted);
}

.acreate__num {
	flex: none;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	color: var(--gold-primary);
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 600;
	background:
		linear-gradient(135deg, rgb(var(--gold-rgb) / 0.12), transparent 60%),
		rgba(0, 0, 0, 0.5);
	border: 1px solid rgb(var(--gold-rgb) / 0.35);
	clip-path: polygon(var(--cut-sm) 0, 100% 0, 100% calc(100% - var(--cut-sm)), calc(100% - var(--cut-sm)) 100%, 0 100%, 0 var(--cut-sm));
}

.acreate__grid {
	display: grid;
	gap: var(--spacing-lg) var(--spacing-xl);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.acreate__grid > .acreate__field--full,
.acreate__panel > .acreate__field--full {
	grid-column: 1 / -1;
}

.acreate .fieldset {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.acreate .fieldset > legend {
	float: left; /* keeps the legend inside the flex/grid flow */
	width: 100%;
	padding: 0;
}

.acreate .fieldset > legend + * {
	clear: both;
}

.acreate__suggest {
	color: var(--gold-muted);
	letter-spacing: 0.04em;
	text-transform: none;
	font-weight: 400;
}

/* input + status glyph (live validation) */
.finput-status {
	position: relative;
}

.finput-status .finput {
	padding-right: calc(var(--spacing-md) * 2 + 18px);
}

.finput-status__icon {
	position: absolute;
	right: var(--spacing-md);
	top: 50%;
	display: grid;
	width: 18px;
	height: 18px;
	transform: translateY(-50%) scale(0.6);
	opacity: 0;
	pointer-events: none;
	transition:
		opacity var(--duration-base) var(--ease-cine),
		transform var(--duration-base) var(--ease-out-soft);
}

.finput-status__icon .icon {
	grid-area: 1 / 1;
	display: none;
}

.finput-status__ok {
	color: var(--gold-primary);
}

.finput-status__nok {
	color: #e39a9c;
}

.ffield.is-valid .finput-status__icon,
.ffield.is-invalid .finput-status__icon {
	opacity: 1;
	transform: translateY(-50%) scale(1);
}

.ffield.is-valid .finput-status__ok,
.ffield.is-invalid .finput-status__nok {
	display: block;
}

.ffield.is-valid .finput {
	border-color: rgb(var(--gold-rgb) / 0.55);
}

.ffield.is-checking .finput {
	background-image: linear-gradient(90deg, transparent, rgb(var(--gold-rgb) / 0.08), transparent);
	background-size: 200% 100%;
	animation: acreate-shimmer 1.2s linear infinite;
}

@keyframes acreate-shimmer {
	from { background-position: 200% 0; }
	to { background-position: -200% 0; }
}

/* field messages collapse when empty and slide in when set (server or live) */
.acreate .ffield__error {
	display: block;
	overflow: hidden;
	max-height: 0;
	margin-top: calc(var(--spacing-sm) * -1); /* cancels the .ffield gap while collapsed */
	opacity: 0;
	transform: translateY(-4px);
	transition:
		max-height var(--duration-base) var(--ease-cine),
		margin-top var(--duration-base) var(--ease-cine),
		opacity var(--duration-base) var(--ease-cine),
		transform var(--duration-base) var(--ease-cine);
}

.acreate .ffield.is-invalid .ffield__error:not(:empty),
.acreate .ffield__error.is-visible:not(:empty) {
	max-height: 4em;
	margin-top: 0;
	opacity: 1;
	transform: none;
}

.acreate .ffield.is-valid .ffield__error.is-visible {
	color: var(--gold-muted);
}

/* password: show/hide + strength */
.finput-status--action .finput {
	padding-right: calc(var(--spacing-md) * 2 + 22px);
}

.finput-status__btn {
	position: absolute;
	right: 6px;
	top: 50%;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	transform: translateY(-50%);
	color: var(--text-muted);
	background: transparent;
	border: 0;
	cursor: pointer;
	transition: color var(--duration-fast) var(--ease-cine);
}

.finput-status__btn:hover,
.finput-status__btn[aria-pressed="true"] {
	color: var(--gold-primary);
}

.finput-status__btn:focus-visible {
	outline: 2px solid var(--gold-primary);
	outline-offset: -4px;
}

.fstrength {
	display: flex;
	align-items: center;
	gap: var(--spacing-md);
	height: 0;
	margin-top: calc(var(--spacing-sm) * -1);
	opacity: 0;
	overflow: hidden;
	transition:
		height var(--duration-base) var(--ease-cine),
		margin-top var(--duration-base) var(--ease-cine),
		opacity var(--duration-base) var(--ease-cine);
}

.fstrength.is-visible {
	height: 16px;
	margin-top: 0;
	opacity: 1;
}

.fstrength__bars {
	display: flex;
	gap: 4px;
	flex: 1;
	max-width: 180px;
}

.fstrength__bars i {
	flex: 1;
	height: 3px;
	background: rgb(var(--gold-rgb) / 0.12);
	transition: background-color var(--duration-base) var(--ease-cine);
}

.fstrength[data-level="1"] i:nth-child(-n + 1) { background: #a24a4a; }
.fstrength[data-level="2"] i:nth-child(-n + 2) { background: #b9884f; }
.fstrength[data-level="3"] i:nth-child(-n + 3) { background: var(--gold-muted); }
.fstrength[data-level="4"] i:nth-child(-n + 4) { background: var(--gold-primary); }

.fstrength__label {
	color: var(--text-muted);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
}

/* select with flag preview */
.fselect--flag select {
	padding-left: calc(var(--spacing-md) + 16px + var(--spacing-sm));
}

.fselect__flag {
	position: absolute;
	left: var(--spacing-md);
	top: 50%;
	width: 16px;
	height: 11px;
	transform: translateY(-50%);
	pointer-events: none;
	image-rendering: pixelated;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
}

/* segmented radio (sex) */
.fseg {
	display: inline-flex;
	min-height: var(--input-height);
	border: 1px solid rgb(var(--gold-rgb) / 0.25);
	background: rgba(0, 0, 0, 0.55);
	border-radius: var(--radius-sm);
	overflow: hidden;
}

.fseg__item {
	position: relative;
	display: flex;
	flex: 1;
	cursor: pointer;
}

.fseg__item + .fseg__item {
	border-left: 1px solid rgb(var(--gold-rgb) / 0.16);
}

.fseg__item input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.fseg__label {
	display: inline-flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-sm);
	min-width: 132px;
	padding: 0 var(--spacing-lg);
	color: var(--text-muted);
	font-family: var(--font-ui);
	font-size: var(--text-caption);
	font-weight: var(--weight-ui);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	transition:
		color var(--duration-base) var(--ease-cine),
		background-color var(--duration-base) var(--ease-cine);
}

.fseg__item:hover .fseg__label {
	color: var(--text-primary);
}

.fseg__item input:checked ~ .fseg__label {
	color: var(--gold-primary);
	background: rgb(var(--gold-rgb) / 0.1);
	box-shadow: inset 0 -2px 0 var(--gold-primary);
}

.fseg__item input:focus-visible ~ .fseg__label {
	outline: 2px solid var(--gold-primary);
	outline-offset: -3px;
}

.ffield.is-invalid .fseg {
	border-color: var(--border-danger);
}

/* radio chips (towns) */
.chips--radio .chip {
	position: relative;
	cursor: pointer;
}

.chips--radio .chip input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.chips--radio .chip:has(input:checked) {
	color: var(--text-inverse);
	background: var(--gold-primary);
	border-color: var(--gold-primary);
}

.chips--radio .chip:has(input:focus-visible) {
	outline: 2px solid var(--gold-primary);
	outline-offset: 2px;
}

/* party: one card per vocation, every card is a character to name
   .cparty__grid[data-size]   desktop → one column per character (5 → 5 cols);
                              not data-count, which theme.js animates as a counter
   .cparty__stage             the home key-art frame in miniature (2:3, chamfered
                              hairline edge, vignette, brackets, brass plate);
                              ui/party-portrait.html.twig. The card's --voc-rgb
                              (profile.accent) tints edge, glow, brackets, plate
   .cparty__pedestal          fallback for a class without key art: the cut-out
                              sprite (object-fit: contain) or a rune on a pedestal
   .cparty__details           lore + vocation sheet (.cparty__sheet: official
                              per-level gains, skill constants, regeneration) of
                              the hovered / focused card
   .cparty__grid--static      read-only variant for the success page */
.cparty {
	display: grid;
	gap: var(--spacing-md);
}

.cparty__hint {
	margin: calc(var(--spacing-sm) * -1) 0 0;
}

.cparty__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: var(--spacing-md);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: party;
}

.cparty__grid[data-size="5"] {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.cparty__grid[data-size="4"] {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cparty__card {
	position: relative;
	display: grid;
	gap: var(--spacing-sm);
	min-width: 0;
	--voc-rgb: var(--gold-rgb);
	--voc-cut: 10px;
}

/* --- stage: the home frame in miniature ------------------------------------ */
.cparty__stage {
	position: relative;
	isolation: isolate;
	display: block;
	width: 100%;
	aspect-ratio: 2 / 3;
	margin-bottom: 13px; /* the plate hangs over the bottom edge */
	transition: transform var(--duration-base) var(--ease-cine);
}

/* pedestal shadow under the frame … */
.cparty__stage::before {
	content: "";
	position: absolute;
	left: 10%;
	right: 10%;
	bottom: -5%;
	z-index: -1;
	height: 16%;
	background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0) 70%);
	filter: blur(8px);
}

/* … and the class-tinted glow that wakes up with the card */
.cparty__stage::after {
	content: "";
	position: absolute;
	inset: -8%;
	z-index: -1;
	background: radial-gradient(ellipse at 50% 60%, rgb(var(--voc-rgb) / 0.3), rgba(9, 9, 9, 0) 68%);
	filter: blur(14px);
	opacity: 0;
	transition: opacity var(--duration-slow) var(--ease-cine);
}

/* chamfered frame; the gradient is the 1px edge showing through the inset children */
.cparty__frame {
	position: absolute;
	inset: 0;
	display: block;
	overflow: hidden;
	clip-path: polygon(
		var(--voc-cut) 0, calc(100% - var(--voc-cut)) 0, 100% var(--voc-cut),
		100% calc(100% - var(--voc-cut)), calc(100% - var(--voc-cut)) 100%, var(--voc-cut) 100%,
		0 calc(100% - var(--voc-cut)), 0 var(--voc-cut));
	background: linear-gradient(160deg, rgb(var(--gold-rgb) / 0.42) 0%, rgb(var(--gold-rgb) / 0.12) 45%, rgb(var(--gold-rgb) / 0.3) 100%);
}

/* the accent edge fades in over the resting gold one */
.cparty__frame::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(160deg, rgb(var(--voc-rgb) / 0.9) 0%, rgb(var(--voc-rgb) / 0.3) 45%, rgb(var(--voc-rgb) / 0.7) 100%);
	opacity: 0;
	transition: opacity var(--duration-base) var(--ease-cine);
}

/* everything inside sits 1px in and is cut one pixel tighter */
.cparty__art,
.cparty__pedestal,
.cparty__sheen,
.cparty__vignette {
	position: absolute;
	inset: 1px;
	clip-path: polygon(
		calc(var(--voc-cut) - 1px) 0, calc(100% - var(--voc-cut) + 1px) 0, 100% calc(var(--voc-cut) - 1px),
		100% calc(100% - var(--voc-cut) + 1px), calc(100% - var(--voc-cut) + 1px) 100%, calc(var(--voc-cut) - 1px) 100%,
		0 calc(100% - var(--voc-cut) + 1px), 0 calc(var(--voc-cut) - 1px));
}

/* key art: asleep until the card is hovered, focused, active or named */
.cparty__art {
	display: block;
	z-index: 1;
	object-fit: cover;
	object-position: 50% 30%;
	background: var(--bg-deep);
	filter: saturate(0.55) brightness(0.68);
	transform: scale(1);
	transition:
		filter var(--duration-slow) var(--ease-cine),
		transform var(--duration-slow) var(--ease-cine);
}

/* fallback stage for a class without key art */
.cparty__pedestal {
	z-index: 1;
	display: grid;
	place-items: end center;
	background:
		radial-gradient(ellipse at 50% 88%, rgb(var(--voc-rgb) / 0.16), rgba(9, 9, 9, 0) 60%),
		var(--bg-deep);
}

/* the whole outfit, always contained — never cropped nor stretched */
.cparty__img {
	width: auto;
	max-width: 84%;
	height: 84%;
	margin-bottom: 6%;
	object-fit: contain;
	object-position: center bottom;
	filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.85)) saturate(0.85) brightness(0.9);
	transition:
		transform var(--duration-slow) var(--ease-cine),
		filter var(--duration-slow) var(--ease-cine);
}

.cparty__rune {
	width: 40%;
	height: 45%;
	margin-bottom: 26%;
	color: var(--gold-muted);
	stroke: currentColor;
	fill: none;
	stroke-width: 1;
}

/* light sweeps once across the canvas when the card becomes active */
.cparty__sheen {
	z-index: 2;
	background: linear-gradient(112deg, rgba(255, 255, 255, 0) 32%, rgba(255, 244, 214, 0.1) 44%, rgba(255, 244, 214, 0.28) 50%, rgba(255, 244, 214, 0.1) 56%, rgba(255, 255, 255, 0) 68%);
	transform: translateX(-120%);
	opacity: 0;
	pointer-events: none;
}

/* inner grading + a fine mat line 7px inside the edge */
.cparty__vignette {
	z-index: 3;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(9, 9, 9, 0.28) 0%, rgba(9, 9, 9, 0) 22%, rgba(9, 9, 9, 0) 58%, rgba(9, 9, 9, 0.78) 100%);
	box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.55);
}

.cparty__vignette::after {
	content: "";
	position: absolute;
	inset: 7px;
	border: 1px solid rgb(var(--gold-rgb) / 0.14);
	transition: border-color var(--duration-base) var(--ease-cine);
}

/* corner brackets floating just outside the frame (components.css → .corners) */
.cparty__corners {
	position: absolute;
	inset: -6px;
	z-index: 2;
	--corner-inset: 0;
	--corner-len: 16px;
	--corner-color: rgb(var(--voc-rgb) / 0.7);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--duration-base) var(--ease-cine);
}

/* brass plate — "II · PALADIN" — hanging over the bottom edge */
.cparty__plate {
	position: absolute;
	left: 50%;
	bottom: -13px;
	z-index: 4;
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
	max-width: calc(100% - 8px);
	height: 26px;
	padding-inline: 12px;
	transform: translateX(-50%);
	--plate-cut: 6px;
	clip-path: polygon(
		var(--plate-cut) 0, calc(100% - var(--plate-cut)) 0, 100% var(--plate-cut),
		100% calc(100% - var(--plate-cut)), calc(100% - var(--plate-cut)) 100%, var(--plate-cut) 100%,
		0 calc(100% - var(--plate-cut)), 0 var(--plate-cut));
	background: linear-gradient(180deg, rgb(var(--gold-rgb) / 0.5), rgb(var(--gold-rgb) / 0.2));
	color: var(--text-secondary);
	font-family: var(--font-display);
	font-size: 0.66rem;
	font-weight: var(--weight-heading);
	letter-spacing: 0.18em;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
	transition: color var(--duration-base) var(--ease-cine);
}

.cparty__plate::before {
	content: "";
	position: absolute;
	inset: 1px;
	z-index: -1;
	clip-path: polygon(
		calc(var(--plate-cut) - 1px) 0, calc(100% - var(--plate-cut) + 1px) 0, 100% calc(var(--plate-cut) - 1px),
		100% calc(100% - var(--plate-cut) + 1px), calc(100% - var(--plate-cut) + 1px) 100%, calc(var(--plate-cut) - 1px) 100%,
		0 calc(100% - var(--plate-cut) + 1px), 0 calc(var(--plate-cut) - 1px));
	background: linear-gradient(180deg, #241d11, #110d07);
}

/* the accent brass fades in over the resting one */
.cparty__plate::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background: linear-gradient(180deg, rgb(var(--voc-rgb) / 0.95), rgb(var(--voc-rgb) / 0.4));
	opacity: 0;
	transition: opacity var(--duration-base) var(--ease-cine);
}

.cparty__plate i {
	font-style: normal;
	padding-right: var(--spacing-xs);
	border-right: 1px solid rgb(var(--gold-rgb) / 0.35);
	color: var(--text-muted);
}

.cparty__badge {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 4;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	color: var(--text-inverse);
	background: var(--gold-primary);
	clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.cparty__body {
	display: grid;
	gap: var(--spacing-xs);
	min-width: 0;
	text-align: center;
}

.cparty__voc {
	color: var(--text-secondary);
	font-family: var(--font-display);
	font-size: 0.95rem;
	letter-spacing: var(--tracking-heading);
	text-transform: uppercase;
	transition: color var(--duration-base) var(--ease-cine);
}

.cparty__voc--sub {
	color: var(--text-muted);
	font-size: 0.78rem;
}

.cparty__eyebrow {
	margin-top: 2px;
	color: var(--text-muted);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
}

.cparty__name {
	color: var(--gold-primary);
	font-family: var(--font-display);
	font-size: 1rem;
	letter-spacing: 0.02em;
	overflow-wrap: anywhere;
}

.cparty__field {
	margin-top: var(--spacing-xs);
}

.cparty__field + .cparty__field {
	margin-top: 0;
}

.cparty .finput--sm {
	min-height: 44px;
	padding-inline: var(--spacing-sm) 36px;
	font-size: 0.92rem;
	text-align: left;
}

.cparty .finput--sm::placeholder {
	font-size: 0.82rem;
}

.cparty .finput-status__icon {
	right: 10px;
}

/* compact sex toggle: icons only, label in the tooltip / for screen readers */
.fseg--mini {
	display: flex;
	min-height: 36px;
}

.fseg--mini .fseg__label {
	min-width: 0;
	padding: 0;
	gap: 0;
}

.fseg--mini .fseg__text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

/* hover / focus-within: the card lifts and its art wakes up; the lore shows below */
.cparty__card:hover .cparty__stage,
.cparty__card:focus-within .cparty__stage {
	transform: translateY(-4px);
}

.cparty__card:hover .cparty__art,
.cparty__card:focus-within .cparty__art,
.cparty__card.is-active .cparty__art,
.cparty__card.is-named .cparty__art,
.cparty__card.is-static .cparty__art {
	filter: saturate(0.94) brightness(1);
	transform: scale(1.04);
}

.cparty__card:hover .cparty__img,
.cparty__card:focus-within .cparty__img,
.cparty__card.is-active .cparty__img,
.cparty__card.is-named .cparty__img,
.cparty__card.is-static .cparty__img {
	filter: drop-shadow(0 22px 28px rgba(0, 0, 0, 0.9)) saturate(1) brightness(1.05);
	transform: translateY(-2px);
}

.cparty__card:hover .cparty__voc,
.cparty__card:focus-within .cparty__voc {
	color: var(--text-primary);
}

/* active (hovered / focused / first), static (success page) and named cards
   carry the class accent on edge, glow, brackets, mat line and plate */
.cparty__card.is-active .cparty__frame::before,
.cparty__card.is-static .cparty__frame::before,
.cparty__card.is-named .cparty__frame::before,
.cparty__card.is-active .cparty__corners,
.cparty__card.is-static .cparty__corners,
.cparty__card.is-named .cparty__corners,
.cparty__card.is-active .cparty__plate::after,
.cparty__card.is-static .cparty__plate::after,
.cparty__card.is-named .cparty__plate::after {
	opacity: 1;
}

.cparty__card.is-active .cparty__stage::after,
.cparty__card.is-static .cparty__stage::after {
	opacity: 1;
}

.cparty__card.is-named .cparty__stage::after {
	opacity: 0.55;
}

.cparty__card.is-active .cparty__vignette::after,
.cparty__card.is-static .cparty__vignette::after,
.cparty__card.is-named .cparty__vignette::after {
	border-color: rgb(var(--voc-rgb) / 0.35);
}

.cparty__card.is-active .cparty__plate,
.cparty__card.is-static .cparty__plate,
.cparty__card.is-named .cparty__plate {
	color: var(--gold-primary);
}

.cparty__card.is-active .cparty__plate i,
.cparty__card.is-static .cparty__plate i,
.cparty__card.is-named .cparty__plate i {
	color: var(--text-secondary);
	border-color: rgb(var(--voc-rgb) / 0.5);
}

.cparty__card.is-active .cparty__voc {
	color: var(--gold-primary);
}

/* light catches the canvas once, as it does on the home stage (layout.css → voc-sheen) */
.cparty__card.is-active .cparty__sheen {
	animation: voc-sheen 1.6s var(--ease-cine) 120ms both;
}

/* --- codex: lore + skills of the hovered / focused card (crossfade) --------
   A chamfered plate in the same edge language as the stage. Depth comes from the
   class' key art bleeding in from the right (blurred, masked), a 2D inventory
   slot with the outfit standing on a floor tile under Tibia-style health / mana
   bars, and the vocation sheet (.cparty__sheet) flush with the right edge. */
.cparty__details {
	position: relative;
	min-height: 0;
	margin-top: var(--spacing-xs);
}

.cparty__detail {
	--voc-rgb: var(--gold-rgb);
	--voc-cut: 10px;
	position: absolute;
	inset: 0;
	isolation: isolate;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--spacing-xl);
	align-items: center;
	padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-lg) var(--spacing-xl);
	overflow: hidden;
	clip-path: polygon(
		var(--voc-cut) 0, calc(100% - var(--voc-cut)) 0, 100% var(--voc-cut),
		100% calc(100% - var(--voc-cut)), calc(100% - var(--voc-cut)) 100%, var(--voc-cut) 100%,
		0 calc(100% - var(--voc-cut)), 0 var(--voc-cut));
	/* the 1px edge, class-tinted on the left where the copy sits */
	background: linear-gradient(90deg, rgb(var(--voc-rgb) / 0.55) 0%, rgb(var(--gold-rgb) / 0.18) 40%, rgb(var(--gold-rgb) / 0.32) 100%);
	opacity: 0;
	transform: translateY(8px);
	visibility: hidden;
	transition:
		opacity var(--duration-slow) var(--ease-cine),
		transform var(--duration-slow) var(--ease-cine),
		visibility 0s linear var(--duration-slow);
}

/* plate fill: deep ground + a stone grain + a top highlight, cut 1px tighter */
.cparty__detail::before {
	content: "";
	position: absolute;
	inset: 1px;
	z-index: -2;
	clip-path: polygon(
		calc(var(--voc-cut) - 1px) 0, calc(100% - var(--voc-cut) + 1px) 0, 100% calc(var(--voc-cut) - 1px),
		100% calc(100% - var(--voc-cut) + 1px), calc(100% - var(--voc-cut) + 1px) 100%, calc(var(--voc-cut) - 1px) 100%,
		0 calc(100% - var(--voc-cut) + 1px), 0 calc(var(--voc-cut) - 1px));
	background:
		var(--texture-noise) 0 0 / 180px 180px repeat,
		radial-gradient(ellipse at 0% 50%, rgb(var(--voc-rgb) / 0.14), rgba(9, 9, 9, 0) 55%),
		linear-gradient(180deg, #100e0a 0%, #0b0a08 100%);
	background-blend-mode: soft-light, normal, normal;
}

/* grading: inner shadow, a bright hairline along the top edge, the mat line */
.cparty__detail::after {
	content: "";
	position: absolute;
	inset: 1px;
	z-index: 1;
	pointer-events: none;
	clip-path: polygon(
		calc(var(--voc-cut) - 1px) 0, calc(100% - var(--voc-cut) + 1px) 0, 100% calc(var(--voc-cut) - 1px),
		100% calc(100% - var(--voc-cut) + 1px), calc(100% - var(--voc-cut) + 1px) 100%, calc(var(--voc-cut) - 1px) 100%,
		0 calc(100% - var(--voc-cut) + 1px), 0 calc(var(--voc-cut) - 1px));
	background: linear-gradient(180deg, rgba(255, 244, 214, 0.06), rgba(255, 244, 214, 0) 18%);
	box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.7);
}

/* the class' key art, blurred, bleeding in from the right behind the skills */
.cparty__scene {
	position: absolute;
	inset: 1px 1px 1px 22%;
	z-index: -1;
	background: var(--voc-scene, none) 50% 28% / cover no-repeat;
	filter: blur(14px) saturate(0.9);
	opacity: 0.72;
	transform: scale(1.08);
	-webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 45%, #000 100%);
	mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 45%, #000 100%);
	transition: transform 6s var(--ease-cine);
}

.cparty__detail.is-active .cparty__scene {
	transform: scale(1);
}

.cparty__detail .cparty__sheen {
	z-index: 0;
}

.cparty__detail.is-active {
	position: relative;
	opacity: 1;
	transform: none;
	visibility: visible;
	transition-delay: 80ms, 80ms, 0s;
}

.cparty__detail.is-active .cparty__sheen {
	animation: voc-sheen 1.6s var(--ease-cine) 200ms both;
}

/* --- lore: slot + copy ------------------------------------------------------ */
.cparty__lore {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: var(--spacing-lg);
	min-width: 0;
}

/* a 2D inventory slot: bevelled like the classic client, the outfit standing
   over a soft pool of light, health and mana bars above its head. The sprites
   (images/vocations/<class>-sprite.png) come from one sheet, so they share the
   same scale and baseline: the sprite is sized by height only, never squeezed. */
.cparty__slot {
	position: relative;
	flex: none;
	display: grid;
	place-items: end center;
	width: 136px;
	height: 152px;
	padding-bottom: 10px;
	overflow: hidden;
	background:
		radial-gradient(ellipse at 50% 100%, rgb(var(--voc-rgb) / 0.22), rgba(9, 9, 9, 0) 62%),
		repeating-linear-gradient(45deg, rgba(255, 236, 200, 0.025) 0 1px, rgba(0, 0, 0, 0) 1px 6px),
		linear-gradient(180deg, #171310 0%, #0d0b08 100%);
	box-shadow:
		inset 1px 1px 0 rgba(255, 236, 200, 0.14),
		inset -1px -1px 0 rgba(0, 0, 0, 0.95),
		inset 0 0 0 1px rgba(0, 0, 0, 0.6),
		0 0 0 1px rgb(var(--voc-rgb) / 0.4),
		0 14px 24px rgba(0, 0, 0, 0.6);
}

/* contact shadow under the feet */
.cparty__slot::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 5px;
	width: 58px;
	height: 12px;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0) 70%);
}

/* absolutely positioned: a percentage height inside an auto grid track would
   resolve to the intrinsic 300px and overflow the slot */
.cparty__sprite {
	position: absolute;
	inset: auto 0 10px;
	z-index: 1;
	width: auto;
	height: calc(100% - 36px); /* headroom for the bars above the tallest hat */
	margin: auto;
	object-fit: contain;
	object-position: center bottom;
	filter: drop-shadow(0 6px 5px rgba(0, 0, 0, 0.7));
}

/* Tibia's on-screen bars: 1px black frame, green health, blue mana */
.cparty__bars {
	position: absolute;
	top: 9px;
	left: 50%;
	z-index: 2;
	display: grid;
	gap: 2px;
	width: 40px;
	transform: translateX(-50%);
}

.cparty__bar {
	display: block;
	height: 5px;
	background: #000;
	border: 1px solid #000;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.cparty__bar::after {
	content: "";
	display: block;
	width: var(--fill, 100%);
	height: 100%;
	transition: width var(--duration-slow) var(--ease-cine) 200ms;
}

.cparty__bar--hp::after {
	background: linear-gradient(180deg, #62d152, #2f8a29);
}

.cparty__bar--mp::after {
	background: linear-gradient(180deg, #4f7bd9, #2c4c9c);
}

.cparty__detail:not(.is-active) .cparty__bar::after {
	width: 0;
}

.cparty__copy {
	display: grid;
	gap: var(--spacing-xs);
	min-width: 0;
}

.cparty__lore-name {
	color: var(--text-primary);
	font-family: var(--font-display);
	font-size: var(--text-h3);
	font-weight: var(--weight-heading);
	letter-spacing: var(--tracking-heading);
	line-height: 1.05;
	text-transform: uppercase;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}

.cparty__text {
	max-width: 52ch;
	margin: 0;
	color: var(--text-secondary);
	line-height: 1.6;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
}

/* brass corner ticks inside the chamfered plate, tinted by the class */
.cparty__detail-corners {
	position: absolute;
	inset: 7px;
	z-index: 1;
	pointer-events: none;
	--corner-color: rgb(var(--voc-rgb) / 0.45);
	--corner-len: 18px;
}

/* promotion title under the lore: "♛ PROMOTION  Elite Knight" */
.cparty__promo {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-sm);
	margin-top: var(--spacing-xs);
	font-family: var(--font-ui);
	font-size: var(--text-caption);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--text-muted);
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8);
}

.cparty__promo .icon {
	color: rgb(var(--voc-rgb) / 0.9);
	filter: drop-shadow(0 0 6px rgb(var(--voc-rgb) / 0.5));
}

.cparty__promo b {
	font-family: var(--font-display);
	font-weight: var(--weight-heading);
	letter-spacing: 0.08em;
	color: var(--gold-primary);
}

/* --- vocation sheet, flush right ---------------------------------------------
   The official numbers as a character sheet: three per-level gains on brass
   tiles (the class' strongest one lit with its accent), the skill constants as
   skills-window rows and the regeneration rates under Tibia's bar colours. */
.cparty__sheet {
	position: relative;
	z-index: 2;
	justify-self: end;
	display: grid;
	gap: var(--spacing-sm);
	width: 340px;
	padding: 10px var(--spacing-md) 12px;
	background:
		var(--texture-noise) 0 0 / 180px 180px repeat,
		linear-gradient(180deg, rgba(14, 12, 9, 0.92), rgba(6, 5, 4, 0.9));
	background-blend-mode: soft-light, normal;
	box-shadow:
		inset 1px 1px 0 rgba(255, 236, 200, 0.1),
		inset -1px -1px 0 rgba(0, 0, 0, 0.9),
		0 0 0 1px rgba(0, 0, 0, 0.6),
		0 0 0 2px rgb(var(--gold-rgb) / 0.18),
		0 14px 30px rgba(0, 0, 0, 0.55);
}

/* class-tinted light along the top edge */
.cparty__sheet::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 1px;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgb(var(--voc-rgb) / 0.7) 30%, rgb(var(--voc-rgb) / 0.7) 70%, rgba(0, 0, 0, 0));
}

.vsheet__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--spacing-sm);
	padding-bottom: 6px;
	border-bottom: 1px solid rgb(var(--gold-rgb) / 0.18);
}

.vsheet__title {
	color: var(--gold-muted);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
}

.vsheet__source {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.625rem;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--text-muted);
}

.vsheet__source::before {
	content: "";
	width: 5px;
	height: 5px;
	background: rgb(var(--voc-rgb) / 0.9);
	transform: rotate(45deg);
	box-shadow: 0 0 6px rgb(var(--voc-rgb) / 0.6);
}

/* per-level gains: three bevelled brass tiles */
.vsheet__gains {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vgain {
	position: relative;
	display: grid;
	justify-items: center;
	gap: 2px;
	padding: 10px 4px 8px;
	text-align: center;
	background: linear-gradient(180deg, #16120d 0%, #0b0907 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 236, 200, 0.07),
		inset 0 -1px 0 rgba(0, 0, 0, 0.9),
		0 0 0 1px rgba(0, 0, 0, 0.7),
		0 0 0 2px rgb(var(--gold-rgb) / 0.1);
}

/* hairline along the top of each tile; the prime tile carries the class accent */
.vgain::before {
	content: "";
	position: absolute;
	inset: 0 18% auto;
	height: 1px;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgb(var(--gold-rgb) / 0.35), rgba(0, 0, 0, 0));
}

.vgain.is-prime {
	background:
		radial-gradient(ellipse at 50% 110%, rgb(var(--voc-rgb) / 0.22), rgba(0, 0, 0, 0) 65%),
		linear-gradient(180deg, #1a150e 0%, #0d0a07 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 236, 200, 0.1),
		inset 0 -1px 0 rgba(0, 0, 0, 0.9),
		0 0 0 1px rgba(0, 0, 0, 0.7),
		0 0 0 2px rgb(var(--voc-rgb) / 0.35),
		0 0 18px rgb(var(--voc-rgb) / 0.18);
}

.vgain.is-prime::before {
	inset: 0 10% auto;
	background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgb(var(--voc-rgb) / 0.9), rgba(0, 0, 0, 0));
	box-shadow: 0 0 8px rgb(var(--voc-rgb) / 0.6);
}

.vgain__value {
	font-family: var(--font-display);
	font-size: 1.375rem;
	font-weight: var(--weight-heading);
	line-height: 1;
	letter-spacing: 0.02em;
	font-variant-numeric: tabular-nums;
	color: var(--gold-primary);
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8), 0 0 14px rgb(var(--gold-rgb) / 0.2);
}

.vgain.is-prime .vgain__value {
	color: #f4e4b0;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8), 0 0 16px rgb(var(--voc-rgb) / 0.55);
}

.vgain__label {
	margin-top: 3px;
	font-family: var(--font-ui);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--text-secondary);
}

.vgain__unit {
	font-family: var(--font-ui);
	font-size: 0.625rem;
	letter-spacing: 0.06em;
	color: var(--text-muted);
}

/* skill constants as skills-window rows */
.vsheet__skills {
	display: grid;
	gap: 5px;
}

.vsheet__sub {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	margin-bottom: 2px;
	color: var(--gold-muted);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	cursor: help;
}

.vsheet__sub::after {
	content: "";
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, rgb(var(--gold-rgb) / 0.3), rgba(0, 0, 0, 0));
}

.cparty__sheet .skill {
	grid-template-columns: minmax(0, 1fr) auto 40px;
}

/* regeneration: the two rates with Tibia's health / mana bar colours as markers */
.vsheet__regen {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--spacing-sm);
	margin: 2px 0 0;
	padding-top: 8px;
	border-top: 1px solid rgb(var(--gold-rgb) / 0.14);
}

.vsheet__regen dt {
	color: var(--gold-muted);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
}

/* one rate per row, left-aligned inside a right-anchored column so the markers line up */
.vsheet__regen dd {
	display: grid;
	gap: 4px;
	justify-items: start;
	margin: 0;
	font-family: var(--font-ui);
	font-size: var(--text-caption);
	font-variant-numeric: tabular-nums;
	color: var(--text-secondary);
}

.vsheet__regen-hp,
.vsheet__regen-mp {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

.vsheet__regen-hp::before,
.vsheet__regen-mp::before {
	content: "";
	width: 12px;
	height: 6px;
	border: 1px solid #000;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.vsheet__regen-hp::before {
	background: linear-gradient(180deg, #62d152, #2f8a29);
}

.vsheet__regen-mp::before {
	background: linear-gradient(180deg, #4f7bd9, #2c4c9c);
}

.cparty.is-invalid > .ffield__error {
	display: block;
}

@media (max-width: 1023.98px) {
	.cparty__detail {
		grid-template-columns: 1fr;
		gap: var(--spacing-lg);
		align-items: start;
	}

	.cparty__scene {
		inset: 1px;
		-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%);
		mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%);
	}

	.cparty__sheet {
		justify-self: stretch;
		width: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cparty__detail.is-active .cparty__sheen {
		animation: none;
	}

	.cparty__scene,
	.cparty__bar::after {
		transition: none;
	}
}

/* read-only cards (success page) */
.cparty__grid--static .cparty__card {
	gap: var(--spacing-sm);
}

/* --------------------------------------------------------------------------
   Account created (account.create.success.html.twig)
   -------------------------------------------------------------------------- */
.acreated {
	display: grid;
	gap: var(--spacing-xl);
	max-width: 1040px;
	margin-inline: auto;
}

.acreated__head {
	display: grid;
	justify-items: center;
	gap: var(--spacing-sm);
	text-align: center;
}

.acreated__title {
	margin: 0;
	line-height: 1.05;
}

.acreated__lede {
	max-width: 56ch;
	margin: 0;
	color: var(--text-secondary);
}

.acreated__grid {
	display: grid;
	gap: var(--spacing-lg);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
}

.acreated__grid .lbox,
.acreated__grid .lbox:first-child {
	margin: 0;
}

.acreated__party {
	display: grid;
	gap: var(--spacing-lg);
	padding: var(--spacing-xl);
	background: linear-gradient(180deg, var(--surface-dark), var(--bg-secondary));
	border: 1px solid var(--border-subtle);
}

.acreated__party-head {
	display: grid;
	gap: var(--spacing-xs);
	padding-bottom: var(--spacing-md);
	border-bottom: 1px solid var(--border-subtle);
}

.acreated__party-title {
	margin: 0;
}

.acreated__party-text {
	margin: 0;
	color: var(--text-muted);
}

/* oath */
.acreate__oath {
	align-items: flex-start;
	padding: var(--spacing-md) var(--spacing-lg);
	border: 1px solid var(--border-subtle);
	background: rgba(0, 0, 0, 0.3);
	font-size: var(--text-body);
	color: var(--text-secondary);
	transition: border-color var(--duration-base) var(--ease-cine);
}

.acreate__oath:hover,
.acreate__oath:has(input:checked) {
	border-color: rgb(var(--gold-rgb) / 0.4);
}

.acreate__oath .fcheck__box {
	margin-top: 2px;
}

.acreate__oath a {
	color: var(--gold-primary);
}

.ffield.is-invalid .acreate__oath {
	border-color: var(--border-danger);
}

.acreate__actions {
	display: grid;
	justify-items: center;
	gap: var(--spacing-md);
	padding-top: var(--spacing-sm);
}

.acreate__submit {
	min-width: 280px;
}

.acreate__alt {
	margin: 0;
	color: var(--text-muted);
}

.acreate__alt a {
	color: var(--gold-primary);
}

/* invalid submit: short, restrained shake on the offending field */
.ffield.is-shake {
	animation: acreate-shake 360ms var(--ease-cine);
}

@keyframes acreate-shake {
	20% { transform: translateX(-3px); }
	45% { transform: translateX(3px); }
	70% { transform: translateX(-2px); }
	100% { transform: none; }
}

@media (max-width: 767.98px) {
	.acreate__panel {
		padding: var(--spacing-lg);
	}

	.acreate__grid {
		grid-template-columns: 1fr;
	}

	.acreate__step + .acreate__step::before {
		display: none;
	}

	.fseg {
		display: flex;
	}

	.fseg__label {
		min-width: 0;
		padding: 0 var(--spacing-md);
	}

	.fseg--mini .fseg__label {
		padding: 0;
	}

	.acreate__submit {
		width: 100%;
		min-width: 0;
	}
}

/* the plate names the class from 640px up; the body line stays for screen readers */
@media (min-width: 640px) {
	.cparty__voc--plate {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cparty__card.is-active .cparty__sheen {
		animation: none;
	}

	.cparty__art,
	.cparty__stage {
		transition: none;
	}
}

/* tablets: 5 cards no longer fit side by side → 3 + 2 */
@media (min-width: 640px) and (max-width: 1023.98px) {
	.cparty__grid[data-size="5"],
	.cparty__grid[data-size="4"] {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* phones: each character becomes a row — portrait on the left, name + sex on the right */
@media (max-width: 639.98px) {
	.cparty__grid,
	.cparty__grid[data-size="5"],
	.cparty__grid[data-size="4"] {
		grid-template-columns: 1fr;
		gap: var(--spacing-sm);
	}

	.cparty__card {
		grid-template-columns: 104px minmax(0, 1fr);
		align-items: center;
		gap: var(--spacing-md);
		padding: var(--spacing-sm);
		border: 1px solid var(--border-subtle);
		background: rgba(0, 0, 0, 0.25);
	}

	/* no room for the plate on a 104px portrait: the class name moves back into the body */
	.cparty__stage {
		--voc-cut: 7px;
		margin-bottom: 0;
	}

	.cparty__plate {
		display: none;
	}

	.cparty__corners {
		inset: -4px;
		--corner-len: 10px;
	}

	.cparty__badge {
		top: 5px;
		right: 5px;
		width: 20px;
		height: 20px;
	}

	.cparty__body {
		text-align: left;
	}

	.cparty__eyebrow {
		margin-top: 0;
	}

	.cparty__card:hover .cparty__stage,
	.cparty__card:focus-within .cparty__stage,
	.cparty__card:hover .cparty__img,
	.cparty__card:focus-within .cparty__img {
		transform: none;
	}

	.cparty__details {
		display: none;
	}

	.cparty__grid--static .cparty__card {
		grid-template-columns: 88px minmax(0, 1fr);
	}

	.acreated__party {
		padding: var(--spacing-lg);
	}
}

/* --------------------------------------------------------------------------
   Character sheet (characters.html.twig)
   .char__stage  full-bleed dossier tinted by the class (--voc-rgb from the
                 template): blurred key art + glow, mists, embers, the animated
                 in-game outfit on a ring of light (hall__portrait atoms)
   .cbox         chamfered game panel: skills / paperdoll / quests / chronicles
   .eq           the paperdoll (Tibia inventory layout)
   .chron        deaths & victims timelines
   .party        the account's characters with their class sprite
   .csearch--stage / .suggest  the standalone search state
   -------------------------------------------------------------------------- */
.char {
	--voc-rgb: var(--gold-rgb);
	--voc-cut: 10px;
	--char-clip: polygon(
		var(--voc-cut) 0, calc(100% - var(--voc-cut)) 0, 100% var(--voc-cut),
		100% calc(100% - var(--voc-cut)), calc(100% - var(--voc-cut)) 100%, var(--voc-cut) 100%,
		0 calc(100% - var(--voc-cut)), 0 var(--voc-cut));
	--char-clip-inner: polygon(
		calc(var(--voc-cut) - 1px) 0, calc(100% - var(--voc-cut) + 1px) 0, 100% calc(var(--voc-cut) - 1px),
		100% calc(100% - var(--voc-cut) + 1px), calc(100% - var(--voc-cut) + 1px) 100%, calc(var(--voc-cut) - 1px) 100%,
		0 calc(100% - var(--voc-cut) + 1px), 0 calc(var(--voc-cut) - 1px));
	display: grid;
	grid-template-columns: minmax(0, 1fr); /* the full-bleed stage must not widen the track */
	gap: var(--spacing-xl);
}

.char .csearch {
	margin-top: var(--spacing-md);
}

/* --- stage ----------------------------------------------------------------- */
.char__stage {
	--ember-rgb: var(--voc-rgb);
	position: relative;
	isolation: isolate;
	width: 100vw;
	margin: calc(-1 * var(--spacing-2xl)) calc(50% - 50vw) 0;
	padding-block: var(--spacing-2xl);
	overflow: hidden;
}

.char__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background: radial-gradient(ellipse at 50% 30%, var(--voc-glow, rgb(var(--gold-rgb) / 0.16)) 0%, rgba(9, 9, 9, 0) 60%), var(--bg-primary);
}

.char__scene {
	position: absolute;
	inset: -8%;
	background: var(--voc-scene, none) center 30% / cover no-repeat;
	filter: blur(10px) saturate(0.9);
	opacity: 0.7;
	animation: char-drift 40s ease-in-out infinite alternate;
	will-change: transform;
}

@keyframes char-drift {
	from {
		transform: scale(1.02);
	}
	to {
		transform: scale(1.1) translateY(-1.5%);
	}
}

.char__bg .cine-bg__mist {
	z-index: 1;
}

.char__veil {
	position: absolute;
	inset: 0;
	z-index: 2;
	background:
		linear-gradient(180deg, var(--bg-primary) 0%, rgba(9, 9, 9, 0.22) 18%, rgba(9, 9, 9, 0.34) 70%, var(--bg-primary) 100%),
		radial-gradient(ellipse at 50% 45%, rgba(9, 9, 9, 0) 30%, rgba(9, 9, 9, 0.8) 100%);
}

.char__embers {
	z-index: 1;
}

.char__inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 340px minmax(0, 1fr);
	gap: var(--spacing-2xl);
	align-items: center;
}

.char__portrait {
	min-height: 380px;
}

.char__sprite {
	position: relative;
	height: 210px;
	width: auto;
	margin-bottom: 30px;
	filter: drop-shadow(0 16px 12px rgba(0, 0, 0, 0.9));
	animation: hall-idle 3.4s ease-in-out infinite;
}

.char__rune {
	position: relative;
	width: 120px;
	height: 120px;
	margin-bottom: 50px;
	color: rgb(var(--voc-rgb) / 0.75);
	filter: drop-shadow(0 0 18px rgb(var(--voc-rgb) / 0.5));
}

.char__skull {
	position: absolute;
	top: 22px;
	right: 26px;
	width: 26px;
	height: 26px;
	image-rendering: pixelated;
	filter: drop-shadow(0 0 8px rgb(var(--blood-rgb) / 0.8));
	animation: hall-glow 2.4s ease-in-out infinite alternate;
}

.char__body {
	display: grid;
	gap: var(--spacing-lg);
	min-width: 0;
}

.char__head {
	display: grid;
	gap: 6px;
}

.char__name {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	flex-wrap: wrap;
	margin: 0;
	font-size: clamp(2rem, 4vw, 3.2rem);
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.9);
}

.char__flag {
	display: inline-grid;
	place-items: center;
}

.char__flag img {
	display: block;
	width: 28px;
	height: auto;
	image-rendering: auto;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
}

.char__sub {
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
	flex-wrap: wrap;
	margin: 0;
	color: var(--text-secondary);
	font-size: var(--text-small);
}

.char__badges {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	flex-wrap: wrap;
	margin-top: var(--spacing-xs);
}

.char__facts {
	grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
	padding-top: var(--spacing-md);
	border-top: 1px solid rgb(var(--gold-rgb) / 0.14);
}

.char__facts dd a {
	color: var(--gold-primary);
	text-decoration: none;
	border-bottom: 1px dotted rgb(var(--gold-rgb) / 0.5);
}

.char__house {
	display: inline-flex;
	align-items: baseline;
	gap: var(--spacing-xs);
	flex-wrap: wrap;
	margin: 0;
}

.char__house-link {
	padding: 0;
	border: 0;
	border-bottom: 1px dotted rgb(var(--gold-rgb) / 0.5);
	background: none;
	color: var(--gold-primary);
	font: inherit;
	cursor: pointer;
}

.char__house-link:hover {
	border-bottom-style: solid;
}

.char__comment {
	display: grid;
	gap: 4px;
	margin: 0;
	padding: var(--spacing-md) var(--spacing-lg);
	border-left: 2px solid rgb(var(--voc-rgb) / 0.7);
	background: linear-gradient(90deg, rgb(var(--voc-rgb) / 0.1), rgba(0, 0, 0, 0.3) 60%);
	color: var(--text-secondary);
	font-style: italic;
	overflow-wrap: anywhere;
}

.char__comment p {
	margin: 0;
}

/* --- hero card ------------------------------------------------------------- */
.char__card {
	--voc-cut: 14px;
	position: relative;
	width: 100%;
	max-width: 340px;
	margin: 0 auto var(--spacing-xl);
	perspective: 1200px;
}

.char__card-frame {
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	clip-path: var(--char-clip);
	background: linear-gradient(160deg, rgb(var(--voc-rgb) / 0.95) 0%, rgb(var(--voc-rgb) / 0.3) 45%, rgb(var(--voc-rgb) / 0.8) 100%);
	transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
	transform-style: preserve-3d;
	transition: transform 300ms var(--ease-cine);
	will-change: transform;
	filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 22px rgb(var(--voc-rgb) / 0.25));
}

.char__card-art {
	position: absolute;
	inset: 1px;
	width: calc(100% - 2px);
	height: calc(100% - 2px);
	object-fit: cover;
	object-position: 50% 15%;
	clip-path: var(--char-clip-inner);
	filter: saturate(0.9) brightness(0.8);
	transform: scale(1.04) translateZ(0);
	animation: char-art 24s ease-in-out infinite alternate;
}

@keyframes char-art {
	from {
		object-position: 50% 10%;
	}
	to {
		object-position: 50% 30%;
	}
}

.char__card-veil {
	position: absolute;
	inset: 1px;
	clip-path: var(--char-clip-inner);
	background:
		linear-gradient(180deg, rgba(9, 9, 9, 0.45) 0%, rgba(9, 9, 9, 0) 28%, rgba(9, 9, 9, 0) 55%, rgba(9, 9, 9, 0.92) 100%),
		radial-gradient(ellipse at 50% 92%, rgb(var(--voc-rgb) / 0.45), rgba(0, 0, 0, 0) 45%);
}

/* the pixel-art class sprite standing on the lit floor of the card */
.char__card-sprite {
	position: absolute;
	left: 50%;
	bottom: 11%;
	height: 62%;
	width: auto;
	transform: translateX(-50%);
	filter: drop-shadow(0 18px 14px rgba(0, 0, 0, 0.9));
	animation: char-breathe 4.2s ease-in-out infinite;
	will-change: transform;
}

@keyframes char-breathe {
	0%,
	100% {
		transform: translateX(-50%) translateY(0);
	}
	50% {
		transform: translateX(-50%) translateY(-4px);
	}
}

.char__card-frame::after {
	/* contact shadow under the sprite */
	content: "";
	position: absolute;
	left: 50%;
	bottom: 9%;
	width: 52%;
	height: 18px;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.95), rgb(var(--voc-rgb) / 0.35) 45%, rgba(0, 0, 0, 0) 75%);
	filter: blur(1px);
}

.char__card-tag {
	position: absolute;
	top: 16px;
	left: 20px;
	z-index: 2;
	color: rgb(var(--voc-rgb) / 1);
	font-family: var(--font-display);
	font-size: 0.68rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
}

.char__card-status {
	position: absolute;
	top: 14px;
	right: 20px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--text-secondary);
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
}

.char__card .char__skull {
	top: 40px;
	right: 20px;
	z-index: 2;
}

/* light sweeps across the card once it reveals */
.char__card-shine {
	position: absolute;
	inset: 0;
	z-index: 3;
	background: linear-gradient(115deg, rgba(255, 255, 255, 0) 30%, rgba(255, 244, 214, 0.16) 50%, rgba(255, 255, 255, 0) 70%);
	transform: translateX(-120%);
	pointer-events: none;
}

.js .char__card.is-visible .char__card-shine {
	animation: char-shine 1.6s var(--ease-cine) 500ms 1 both;
}

@keyframes char-shine {
	to {
		transform: translateX(120%);
	}
}

.char__card-corners {
	position: absolute;
	inset: -7px;
	z-index: 2;
	--corner-inset: 0;
	--corner-len: 22px;
	--corner-color: rgb(var(--voc-rgb) / 0.9);
	pointer-events: none;
}

/* in-game outfit token, hanging off the bottom-left corner */
.char__token {
	position: absolute;
	left: -10px;
	bottom: -14px;
	z-index: 4;
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background:
		radial-gradient(circle at 50% 40%, rgb(var(--voc-rgb) / 0.35), rgba(0, 0, 0, 0) 70%),
		linear-gradient(180deg, #1a1610, #0a0907);
	box-shadow:
		0 0 0 2px rgb(var(--voc-rgb) / 0.85),
		0 0 0 5px #0b0a08,
		0 0 0 6px rgb(var(--voc-rgb) / 0.35),
		0 14px 24px rgba(0, 0, 0, 0.7);
}

.char__token img {
	width: 64px;
	height: 64px;
	image-rendering: pixelated;
	translate: -6% -4%;
	filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.9));
}

/* level medallion, hanging off the bottom-right corner; the ring is XP to next level */
.char__lvl {
	position: absolute;
	right: -14px;
	bottom: -22px;
	z-index: 4;
	display: grid;
	place-items: center;
	width: 104px;
	height: 104px;
	border-radius: 50%;
	background:
		radial-gradient(circle at 50% 35%, rgb(var(--voc-rgb) / 0.3), rgba(0, 0, 0, 0) 65%),
		linear-gradient(180deg, #1a1610, #0a0907);
	box-shadow: 0 0 0 1px rgb(var(--voc-rgb) / 0.3), 0 16px 28px rgba(0, 0, 0, 0.75), inset 0 0 24px rgba(0, 0, 0, 0.8);
}

.char__lvl-ring {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
	overflow: visible;
}

.char__lvl-track,
.char__lvl-fill {
	fill: none;
	stroke-width: 5;
	stroke-linecap: butt;
}

.char__lvl-track {
	stroke: rgba(0, 0, 0, 0.85);
	filter: drop-shadow(0 1px 0 rgba(255, 236, 200, 0.06));
}

.char__lvl-fill {
	stroke: rgb(var(--voc-rgb) / 1);
	stroke-dasharray: 282.74;
	stroke-dashoffset: calc(282.74px * (1 - var(--p, 0) / 100));
	filter: drop-shadow(0 0 5px rgb(var(--voc-rgb) / 0.7));
	transition: stroke-dashoffset 1.4s var(--ease-cine) 400ms;
}

.js .char__card:not(.is-visible) .char__lvl-fill {
	stroke-dashoffset: 282.74px;
}

.char__lvl-num {
	position: relative;
	z-index: 1;
	margin-top: -4px;
	color: var(--gold-primary);
	font-family: var(--font-display);
	font-size: clamp(1.4rem, 2vw, 1.9rem);
	font-weight: var(--weight-heading);
	line-height: 1;
	letter-spacing: 0.02em;
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9), 0 0 14px rgb(var(--voc-rgb) / 0.45);
	font-variant-numeric: tabular-nums;
}

.char__lvl-label {
	position: absolute;
	bottom: 20px;
	color: var(--text-muted);
	font-family: var(--font-display);
	font-size: 0.55rem;
	letter-spacing: 0.26em;
	text-transform: uppercase;
}

.char__card-plate {
	position: absolute;
	left: 50%;
	bottom: -15px;
	z-index: 3;
	transform: translateX(-50%);
	min-width: 140px;
}

/* --- codex plates ------------------------------------------------------------ */
.char__plates {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--spacing-sm);
	margin: 0;
}

.char__plate {
	--cut: 8px;
	position: relative;
	display: grid;
	gap: 5px;
	min-width: 0;
	padding: var(--spacing-sm) var(--spacing-md);
	clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
	background:
		var(--texture-noise) 0 0 / 180px 180px repeat,
		linear-gradient(180deg, rgba(20, 17, 12, 0.85), rgba(11, 10, 8, 0.92));
	background-blend-mode: soft-light, normal;
	box-shadow: inset 0 0 0 1px rgb(var(--voc-rgb) / 0.22), inset 1px 1px 0 rgba(255, 236, 200, 0.05);
	transition: box-shadow var(--duration-base) var(--ease-cine), transform var(--duration-base) var(--ease-cine);
}

.char__plate::before {
	content: "";
	position: absolute;
	left: 0;
	top: var(--cut);
	bottom: 0;
	width: 2px;
	background: linear-gradient(180deg, rgb(var(--voc-rgb) / 0.9), rgb(var(--voc-rgb) / 0.15));
}

.char__plate:hover {
	transform: translateY(-2px);
	box-shadow: inset 0 0 0 1px rgb(var(--voc-rgb) / 0.6), inset 1px 1px 0 rgba(255, 236, 200, 0.05), 0 10px 20px rgba(0, 0, 0, 0.45);
}

.char__plate dt {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--gold-muted);
	font-family: var(--font-display);
	font-size: 0.62rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.char__plate dt .icon {
	flex: none;
	color: rgb(var(--voc-rgb) / 0.9);
}

.char__plate dd {
	margin: 0;
	color: var(--text-primary);
	font-size: var(--text-small);
	font-variant-numeric: tabular-nums;
	overflow-wrap: anywhere;
}

.char__plate dd a {
	color: var(--gold-primary);
	text-decoration: none;
	border-bottom: 1px dotted rgb(var(--gold-rgb) / 0.5);
}

.js .char__plate {
	animation: char-in 600ms var(--ease-cine) both paused;
	animation-delay: calc(var(--k, 0) * 60ms + 300ms);
}

.js .is-visible .char__plate {
	animation-play-state: running;
}

/* --- skill radar ------------------------------------------------------------- */
.radar {
	width: 180px;
	height: 180px;
	overflow: visible;
}

.radar__ring {
	fill: none;
	stroke: rgba(255, 236, 200, 0.08);
	stroke-width: 1;
}

.radar__ring:last-of-type {
	stroke: rgb(var(--gold-rgb) / 0.3);
}

.radar__axis {
	stroke: rgba(255, 236, 200, 0.06);
	stroke-width: 1;
}

.radar__area {
	fill: rgb(var(--voc-rgb) / 0.28);
	stroke: rgb(var(--voc-rgb) / 1);
	stroke-width: 1.5;
	stroke-linejoin: round;
	filter: drop-shadow(0 0 6px rgb(var(--voc-rgb) / 0.55));
	transform-origin: 80px 80px;
	transform-box: view-box;
	transition: transform 900ms var(--ease-cine) 300ms, opacity 600ms var(--ease-cine) 300ms;
}

.radar__dot {
	fill: #fff4d6;
	stroke: rgb(var(--voc-rgb) / 1);
	stroke-width: 1;
	transition: opacity 400ms var(--ease-cine);
	transition-delay: calc(var(--k, 0) * 60ms + 900ms);
}

.radar__label {
	fill: var(--text-muted);
	font-family: var(--font-display);
	font-size: 7px;
	letter-spacing: 0.1em;
}

.js .reveal-group:not(.is-visible) .radar__area {
	transform: scale(0.2);
	opacity: 0;
}

.js .reveal-group:not(.is-visible) .radar__dot {
	opacity: 0;
}
/* --- game panel ------------------------------------------------------------ */
.cbox {
	position: relative;
	isolation: isolate;
	display: grid;
	gap: var(--spacing-md);
	align-content: start;
	min-width: 0;
	padding: var(--spacing-lg);
	clip-path: var(--char-clip);
	background: linear-gradient(160deg, rgb(var(--voc-rgb) / 0.5) 0%, rgb(var(--voc-rgb) / 0.14) 45%, rgb(var(--voc-rgb) / 0.4) 100%);
}

.cbox::before {
	content: "";
	position: absolute;
	inset: 1px;
	z-index: -1;
	clip-path: var(--char-clip-inner);
	background:
		var(--texture-noise) 0 0 / 180px 180px repeat,
		radial-gradient(ellipse at 15% 0%, rgb(var(--voc-rgb) / 0.14), rgba(9, 9, 9, 0) 55%),
		linear-gradient(180deg, rgba(20, 17, 12, 0.96), rgba(11, 10, 8, 0.98));
	background-blend-mode: soft-light, normal, normal;
	box-shadow:
		inset 1px 1px 0 rgba(255, 236, 200, 0.08),
		inset -1px -1px 0 rgba(0, 0, 0, 0.95),
		inset 0 0 70px rgba(0, 0, 0, 0.5);
}

.cbox__head {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	min-width: 0;
}

.cbox__glyph {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	color: rgb(var(--voc-rgb) / 1);
	filter: drop-shadow(0 0 6px rgb(var(--voc-rgb) / 0.5));
}

.cbox__title {
	margin: 0;
	color: var(--gold-primary);
	font-family: var(--font-display);
	font-size: 0.82rem;
	font-weight: var(--weight-heading);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	white-space: nowrap;
}

.cbox__rule {
	flex: 1 1 auto;
	height: 1px;
	background: linear-gradient(90deg, rgb(var(--voc-rgb) / 0.55), rgba(255, 255, 255, 0.04) 70%, transparent);
}

.cbox__count {
	color: var(--text-muted);
	font-size: var(--text-small);
	white-space: nowrap;
}

.cbox__lede {
	margin: calc(-1 * var(--spacing-xs)) 0 0;
	color: var(--text-muted);
	font-size: var(--text-small);
	font-style: italic;
}

.cbox .skillwin {
	gap: var(--spacing-sm);
}

/* skill bars grow when the panel reveals */
.js .reveal-group:not(.is-visible) .cbox .skillwin__bar::after {
	width: 0;
	transition: none;
}

.char__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) auto;
	gap: var(--spacing-lg);
	align-items: start;
}

.char__grid--no-profile {
	grid-template-columns: minmax(0, 1fr) auto;
}

.cbox--eq {
	min-width: 236px;
}

.cbox--quests {
	grid-column: 1 / -1;
}

.cbox__lede--prose {
	color: var(--text-secondary);
	font-style: normal;
	line-height: 1.6;
}

.cbox__split {
	display: grid;
	grid-template-columns: 180px minmax(0, 1fr);
	gap: var(--spacing-lg);
	align-items: center;
}

.char__meters {
	display: grid;
	gap: var(--spacing-sm);
}

.char__meters .skill {
	font-size: var(--text-small);
}

/* staggered items inside revealed panels */
@keyframes char-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.js .eq__slot,
.js .quests__row,
.js .chron__row,
.js .party__slot {
	animation: char-in 600ms var(--ease-cine) both paused;
	animation-delay: calc(var(--k, var(--i, 0)) * 45ms + 200ms);
}

.js .is-visible .eq__slot,
.js .is-visible .quests__row,
.js .is-visible .chron__row,
.js .is-visible .party__slot {
	animation-play-state: running;
}

/* --- quests ------------------------------------------------------------------ */
.quests {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.quests__row {
	display: flex;
	align-items: center;
	gap: var(--spacing-sm);
	padding: 7px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	color: var(--text-muted);
	font-size: var(--text-small);
}

.quests__row.is-done {
	color: var(--text-primary);
}

.quests__mark {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	background: linear-gradient(180deg, #0a0907, #14110c);
	box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.95), 0 0 0 1px rgb(var(--gold-rgb) / 0.3);
	clip-path: polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px);
	color: var(--success);
}

.quests__row.is-done .quests__mark {
	box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(127, 156, 106, 0.7), 0 0 8px rgba(127, 156, 106, 0.35);
}

/* --- paperdoll --------------------------------------------------------------- */
.eq {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 52px);
	grid-template-rows: repeat(4, 52px);
	grid-template-areas:
		"neck head bag"
		"lhand armor rhand"
		"ring legs ammo"
		"skull boots .";
	gap: 6px;
	justify-content: center;
	padding: var(--spacing-md) var(--spacing-sm);
	background: radial-gradient(ellipse at 50% 45%, rgb(var(--voc-rgb) / 0.18), rgba(0, 0, 0, 0) 70%);
}

.eq__slot {
	position: relative;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	background: linear-gradient(180deg, #0a0907, #15120d);
	box-shadow:
		inset 1px 1px 0 rgba(0, 0, 0, 0.95),
		inset -1px -1px 0 rgba(255, 236, 200, 0.07),
		0 0 0 1px rgb(var(--voc-rgb) / 0.28);
	clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
	transition: transform var(--duration-fast) var(--ease-cine), box-shadow var(--duration-fast) var(--ease-cine);
}

.eq__slot img {
	position: relative;
	z-index: 1;
	display: block;
	width: 32px;
	height: 32px;
	max-width: none;
	image-rendering: pixelated;
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.8));
}

.eq__slot.is-empty img {
	opacity: 0.32;
	filter: grayscale(1);
}

.eq__slot:not(.is-empty)::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 50% 50%, rgb(var(--voc-rgb) / 0.22), rgba(0, 0, 0, 0) 70%);
	pointer-events: none;
}

.eq__slot:not(.is-empty):hover {
	transform: translateY(-2px);
	box-shadow:
		inset 1px 1px 0 rgba(0, 0, 0, 0.95),
		inset -1px -1px 0 rgba(255, 236, 200, 0.07),
		0 0 0 1px rgb(var(--voc-rgb) / 0.95),
		0 0 14px rgb(var(--voc-rgb) / 0.4);
}

.eq__skull {
	grid-area: skull;
	display: grid;
	place-items: center;
}

.eq__skull img {
	width: 24px;
	height: 24px;
	image-rendering: pixelated;
	filter: drop-shadow(0 0 6px rgb(var(--blood-rgb) / 0.7));
}

/* --- chronicles -------------------------------------------------------------- */
.char__logs {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--spacing-lg);
	align-items: start;
}

.char__logs--one {
	grid-template-columns: minmax(0, 1fr);
}

.chron__list {
	position: relative;
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.chron__list::before {
	content: "";
	position: absolute;
	top: 12px;
	bottom: 12px;
	left: 3px;
	width: 1px;
	background: linear-gradient(180deg, rgb(var(--gold-rgb) / 0.4), rgb(var(--gold-rgb) / 0.08));
}

.chron__row {
	position: relative;
	display: grid;
	grid-template-columns: 92px minmax(0, 1fr);
	gap: var(--spacing-md);
	padding: 10px 0 10px 20px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	color: var(--text-secondary);
	font-size: var(--text-small);
	line-height: 1.5;
}

.chron__row:last-child {
	border-bottom: 0;
}

.chron__row::before {
	content: "";
	position: absolute;
	top: 16px;
	left: 0;
	width: 7px;
	height: 7px;
	background: rgb(var(--gold-rgb) / 0.95);
	box-shadow: 0 0 8px rgb(var(--gold-rgb) / 0.6);
	transform: rotate(45deg);
}

.chron--deaths .chron__row::before {
	background: var(--blood-bright);
	box-shadow: 0 0 8px rgb(var(--blood-rgb) / 0.8);
}

.chron__time {
	display: grid;
	color: var(--text-primary);
	font-family: var(--font-display);
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	font-variant-numeric: tabular-nums;
}

.chron__time small {
	color: var(--text-muted);
	font-family: var(--font-ui);
	font-size: 0.7rem;
	letter-spacing: 0;
}

.chron__text b {
	color: var(--gold-primary);
	font-weight: var(--weight-heading);
}

.chron__text a {
	color: var(--gold-primary);
	text-decoration: none;
	border-bottom: 1px dotted rgb(var(--gold-rgb) / 0.5);
}

.chron__text a:hover {
	border-bottom-style: solid;
}

.chron__text .ftag {
	height: 20px;
	margin-left: 6px;
	padding-inline: 8px;
	font-size: 0.6rem;
	vertical-align: 1px;
}

/* --- signature --------------------------------------------------------------- */
.char__sig-img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	border: 1px solid rgb(var(--gold-rgb) / 0.22);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
}

.char__sig-codes summary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--gold-muted);
	font-family: var(--font-display);
	font-size: 0.72rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	cursor: pointer;
	list-style: none;
	user-select: none;
}

.char__sig-codes summary::-webkit-details-marker {
	display: none;
}

.char__sig-codes summary .icon {
	transition: transform var(--duration-base) var(--ease-cine);
}

.char__sig-codes[open] summary .icon {
	transform: rotate(180deg);
}

.char__sig-grid {
	display: grid;
	gap: var(--spacing-sm);
	margin-top: var(--spacing-md);
}

.char__sig-grid label {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	align-items: center;
	gap: var(--spacing-sm);
	color: var(--text-muted);
	font-size: var(--text-small);
}

.char__sig-grid .finput {
	height: 40px;
	font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
	font-size: 0.78rem;
}

/* --- account · party --------------------------------------------------------- */
.char__account-facts {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	row-gap: var(--spacing-xs);
}

.char__account-facts dd {
	margin: 0 var(--spacing-xl) 0 var(--spacing-xs);
}

.party {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
	gap: var(--spacing-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

.party__slot {
	min-width: 0;
}

.party__card {
	position: relative;
	display: grid;
	gap: var(--spacing-sm);
	height: 100%;
	padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-md);
	clip-path: var(--char-clip);
	background: linear-gradient(180deg, rgba(20, 17, 12, 0.92), rgba(11, 10, 8, 0.96));
	box-shadow: inset 0 0 0 1px rgb(var(--voc-rgb) / 0.28);
	color: inherit;
	text-align: center;
	text-decoration: none;
	transition: transform var(--duration-base) var(--ease-cine), box-shadow var(--duration-base) var(--ease-cine);
}

.party__card:hover,
.party__card:focus-visible {
	transform: translateY(-4px);
	box-shadow: inset 0 0 0 1px rgb(var(--voc-rgb) / 0.85), inset 0 -50px 60px -40px rgb(var(--voc-rgb) / 0.35);
	outline: none;
}

.party__card.is-current {
	box-shadow: inset 0 0 0 1px rgb(var(--voc-rgb) / 0.9), inset 0 -50px 60px -40px rgb(var(--voc-rgb) / 0.4);
}

.party__card.is-deleted {
	filter: grayscale(0.85);
	opacity: 0.7;
}

.party__stage {
	position: relative;
	display: grid;
	place-items: end center;
	height: 112px;
	background: radial-gradient(ellipse at 50% 90%, rgb(var(--voc-rgb) / 0.28), rgba(0, 0, 0, 0) 60%);
}

.party__stage::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 6px;
	width: 60%;
	height: 12px;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.9), rgb(var(--voc-rgb) / 0.3) 45%, rgba(0, 0, 0, 0) 75%);
}

.party__sprite {
	position: relative;
	width: auto;
	height: 96px;
	margin-bottom: 8px;
	filter: drop-shadow(0 8px 6px rgba(0, 0, 0, 0.85));
	animation: hall-idle 3.4s ease-in-out infinite;
	animation-delay: calc(var(--i, 0) * -0.7s);
	transition: transform var(--duration-base) var(--ease-cine);
}

.party__rune,
.char__rune {
	stroke: currentColor;
	fill: none;
	stroke-width: 1;
}

.party__rune {
	position: relative;
	width: 44px;
	height: 44px;
	margin-bottom: 26px;
	color: rgb(var(--voc-rgb) / 0.7);
}

.party__dot {
	position: absolute;
	top: 8px;
	right: 8px;
}

.party__body {
	display: grid;
	gap: 3px;
	justify-items: center;
}

.party__name {
	color: var(--text-primary);
	font-family: var(--font-display);
	font-size: 0.95rem;
	font-weight: var(--weight-heading);
	letter-spacing: 0.04em;
	transition: color var(--duration-base) var(--ease-cine);
}

.party__card:hover .party__name,
.party__card.is-current .party__name {
	color: var(--gold-primary);
}

.party__meta {
	color: var(--text-muted);
	font-size: var(--text-small);
}

.party__body .ftag {
	height: 20px;
	margin-top: 4px;
	font-size: 0.6rem;
}

/* --- standalone search stage + suggestions ----------------------------------- */
.csearch--stage {
	position: relative;
	isolation: isolate;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 42%);
	grid-template-areas:
		"copy party"
		"field party";
	align-items: end;
	margin-top: 0;
	padding: var(--spacing-2xl) var(--spacing-xl) var(--spacing-xl);
	overflow: hidden;
	border-color: rgb(var(--gold-rgb) / 0.22);
	background:
		radial-gradient(ellipse at 15% 100%, rgb(var(--gold-rgb) / 0.12), rgba(9, 9, 9, 0) 55%),
		linear-gradient(180deg, var(--surface-dark), var(--bg-secondary));
}

.csearch__glow {
	position: absolute;
	inset: auto 0 0;
	z-index: 0;
	height: 65%;
	background: radial-gradient(ellipse at 78% 100%, rgb(var(--gold-rgb) / 0.2), rgba(9, 9, 9, 0) 60%);
	animation: hall-glow 4s ease-in-out infinite alternate;
}

.csearch__embers {
	z-index: 0;
}

.csearch--stage .csearch__copy {
	grid-area: copy;
	position: relative;
	z-index: 2;
	align-self: end;
}

.csearch--stage .csearch__field {
	grid-area: field;
	position: relative;
	z-index: 2;
	align-self: start;
	margin-top: var(--spacing-lg);
}

.csearch__lede {
	margin: var(--spacing-sm) 0 0;
	color: var(--text-secondary);
	max-width: 46ch;
}

.csearch__party {
	grid-area: party;
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 6px;
	align-self: end;
	margin: 0 0 -6px;
	padding: 0;
	list-style: none;
}

.csearch__hero {
	position: relative;
	height: 118px;
	animation: auth-idle 3.4s ease-in-out infinite;
	animation-delay: calc(var(--i, 0) * -0.7s);
	will-change: transform;
}

.csearch__hero::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -2px;
	width: 70%;
	height: 12px;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.9), rgb(var(--voc-rgb, var(--gold-rgb)) / 0.35) 45%, rgba(0, 0, 0, 0) 75%);
}

.csearch__hero img {
	position: relative;
	display: block;
	width: auto;
	height: 100%;
	filter: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.8));
	transition: filter var(--duration-base) var(--ease-cine), transform var(--duration-base) var(--ease-cine);
}

.csearch__hero:hover img {
	transform: translateY(-4px);
	filter: drop-shadow(0 14px 10px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 10px rgb(var(--voc-rgb, var(--gold-rgb)) / 0.5));
}

.suggest {
	display: grid;
	gap: var(--spacing-sm);
	margin: var(--spacing-lg) 0 var(--spacing-xl);
}

.suggest__title {
	margin: 0;
}

.suggest__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.suggest__list li {
	display: inline-flex;
	align-items: baseline;
	gap: var(--spacing-xs);
	margin: 0;
	padding: 8px 14px;
	border: 1px solid rgb(var(--gold-rgb) / 0.3);
	background: rgba(9, 9, 9, 0.6);
	clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
	color: var(--text-muted);
	font-size: var(--text-small);
	transition: border-color var(--duration-fast) var(--ease-cine);
}

.suggest__list li:hover {
	border-color: rgb(var(--gold-rgb) / 0.85);
}

.suggest__list a {
	color: var(--text-primary);
	font-family: var(--font-display);
	font-size: 0.9rem;
	font-weight: var(--weight-heading);
	letter-spacing: 0.03em;
	text-decoration: none;
}

.suggest__list li:hover a {
	color: var(--gold-primary);
}

.suggest__list small strong {
	font-weight: normal;
}

/* --- responsive -------------------------------------------------------------- */
@media (max-width: 1023.98px) {
	.char__inner {
		grid-template-columns: 260px minmax(0, 1fr);
		gap: var(--spacing-xl);
	}

	.char__portrait {
		min-height: 320px;
	}

	.char__card {
		max-width: 260px;
	}

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

	.char__grid,
	.char__grid--no-profile {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.cbox--eq {
		grid-column: 1 / -1;
		justify-self: stretch;
	}

	.char__facts {
		grid-template-columns: auto minmax(0, 1fr);
	}
}

@media (max-width: 767.98px) {
	.char {
		gap: var(--spacing-lg);
	}

	.char__stage {
		margin-top: calc(-1 * var(--spacing-xl));
		padding-block: var(--spacing-xl) var(--spacing-2xl);
	}

	.char__inner {
		grid-template-columns: 1fr;
		gap: var(--spacing-lg);
	}

	.char__portrait {
		min-height: 280px;
	}

	.char__card {
		max-width: 250px;
		margin-bottom: var(--spacing-lg);
	}

	.char__lvl {
		width: 88px;
		height: 88px;
		right: -10px;
	}

	.char__token {
		width: 60px;
		height: 60px;
	}

	.char__token img {
		width: 52px;
		height: 52px;
	}

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

	.char__plate:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}

	.char__name {
		font-size: clamp(1.8rem, 8vw, 2.4rem);
	}

	.char__grid,
	.char__grid--no-profile,
	.char__logs {
		grid-template-columns: minmax(0, 1fr);
	}

	.cbox__split {
		grid-template-columns: 1fr;
		justify-items: center;
	}

	.cbox__split .skillwin {
		width: 100%;
	}

	.cbox--eq {
		min-width: 0;
	}

	.chron__row {
		grid-template-columns: 1fr;
		gap: 2px;
	}

	.chron__time {
		grid-auto-flow: column;
		justify-content: start;
		gap: var(--spacing-xs);
	}

	.cbox__head {
		flex-wrap: wrap;
	}

	.cbox__title {
		white-space: normal;
	}

	.cbox__rule {
		flex-basis: 100%;
		order: 10;
	}

	.party {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--spacing-sm);
	}

	.party__stage {
		height: 92px;
	}

	.party__sprite {
		height: 78px;
	}

	.party__name {
		font-size: 0.85rem;
	}

	.csearch--stage {
		grid-template-columns: 1fr;
		grid-template-areas:
			"party"
			"copy"
			"field";
		padding: var(--spacing-xl) var(--spacing-lg);
	}

	.csearch__party {
		justify-content: flex-start;
		margin: 0 0 var(--spacing-md);
		overflow: hidden;
	}

	.csearch__hero {
		height: 84px;
	}

	.csearch--stage .csearch__field {
		grid-template-columns: 1fr;
	}

	.char__sig-grid label {
		grid-template-columns: 1fr;
		gap: 4px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.char__scene,
	.char__sprite,
	.char__card-art,
	.char__card-sprite,
	.char__card-shine,
	.char__skull,
	.party__sprite,
	.csearch__hero,
	.csearch__glow {
		animation: none;
	}

	.js .eq__slot,
	.js .quests__row,
	.js .chron__row,
	.js .char__plate,
	.js .party__slot {
		animation: none;
		opacity: 1;
	}
}