/* Dirección visual propia: santuario nocturno, lectura clara y clases como acento. */
:root {
	--bg: #0c0e15;
	--panel: #151821;
	--line: #303440;
	--muted: #b8bdca;
	--ink: #f1f3f8;
	font-family:
		Inter,
		ui-sans-serif,
		system-ui,
		-apple-system,
		BlinkMacSystemFont,
		'Segoe UI',
		sans-serif;
	font-size: 16px;
	line-height: 1.6;
}
body {
	margin: 0;
	background: radial-gradient(ellipse at 90% 0%, #54344725, transparent 50%), var(--bg);
}
p,
li,
label,
input,
select,
textarea {
	line-height: 1.65;
}
p {
	color: var(--muted);
}
h1,
h2,
h3 {
	color: var(--ink);
	text-wrap: balance;
}
h2,
h3 {
	font-family: inherit;
	font-weight: 650;
	letter-spacing: -0.025em;
}
h2 {
	font-size: clamp(26px, 3vw, 38px);
}
h3 {
	font-size: 20px;
}
main {
	max-width: 1440px;
	padding-inline: clamp(20px, 5vw, 72px);
}
body > header {
	padding-inline: clamp(20px, 4vw, 64px);
}
#navigation {
	font-size: 13px;
	font-weight: 600;
}
#navigation a {
	padding: 12px 9px;
}
.brand {
	font-size: 13px;
}
.eyebrow,
.label {
	font-family: inherit;
	font-size: 11px;
	font-weight: 750;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}
.eyebrow {
	color: #dabfa0;
}
.page-title {
	padding-top: clamp(40px, 6vw, 80px);
	padding-bottom: 28px;
}
.page-title h1 {
	font-family: inherit;
	font-size: clamp(38px, 5vw, 64px);
	font-weight: 750;
	letter-spacing: -0.04em;
	max-width: 18ch;
}
.page-title p {
	font-size: 17px;
	line-height: 1.8;
	max-width: 65ch;
}
.hero {
	position: relative;
	isolation: isolate;
	min-height: 620px;
	gap: 40px;
	padding-block: 76px;
}
.hero::before {
	content: '';
	position: absolute;
	z-index: -1;
	inset: 0 -5vw;
	background:
		linear-gradient(90deg, #0c0e15eb 10%, #0c0e1555 65%, #0c0e1580),
		linear-gradient(0deg, var(--bg), transparent 40%),
		url('assets/night-sanctum.svg') center/cover;
}
.hero h1 {
	font-family: inherit;
	font-weight: 750;
	font-size: clamp(42px, 5.1vw, 72px);
	letter-spacing: -0.045em;
	line-height: 1.09;
}
.hero h1 em {
	font-family: Georgia, serif;
	font-weight: 400;
	color: #e6c6ae;
}
.hero p {
	font-size: 17px;
	line-height: 1.8;
}
.hero .eyebrow {
	font-size: 11px;
}
.hero-art {
	max-width: 420px;
}
.hero-logo {
	filter: drop-shadow(0 15px 45px #0009);
}
.button,
button {
	font-family: inherit;
	font-size: 14px;
	font-weight: 650;
	gap: 12px;
	border-radius: 8px;
	padding: 12px 20px;
}
.button.secondary,
button.secondary {
	color: #e2e4eb;
}
.facts {
	border-radius: 14px;
	border: 1px solid var(--line);
	background: #141720;
}
.fact strong {
	font-size: 18px;
}
.fact small {
	font-size: 13px;
	color: var(--muted);
}
.card {
	background: linear-gradient(145deg, #1b1e29, #12151e);
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: clamp(20px, 3vw, 32px);
}
.section {
	margin-top: 64px;
}
.card p,
.link-card p {
	font-size: 15px;
	line-height: 1.8;
}
.link-card {
	transition:
		border-color 180ms ease,
		transform 180ms ease;
}
.link-card:hover {
	border-color: #ae7a83;
	transform: translateY(-3px);
}
.card-number {
	color: #be8c96;
}
.banner {
	border-radius: 16px;
	border: 1px solid #61404d;
	background: linear-gradient(110deg, #48263366, #171822);
}
.form {
	max-width: 960px;
}
input,
select,
textarea {
	font-family: inherit;
	font-size: 15px;
	padding: 12px;
	border-radius: 8px;
	background: #0e111a;
	border-color: #414655;
}
label {
	font-size: 14px;
}
.form-grid {
	gap: 22px;
}
fieldset {
	min-width: 0;
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 20px;
}
legend {
	padding: 0 8px;
}
.form small,
.form p {
	font-size: 13px;
}
.recruit-command {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: 24px;
	align-items: stretch;
	padding: clamp(18px, 2.5vw, 32px);
	border: 1px solid #51404e;
	border-radius: 22px;
	background:
		linear-gradient(90deg, #11141bef, #161521dd),
		url('assets/night-sanctum.svg') center/cover;
}
.recruit-lead h2 {
	font-size: clamp(30px, 3.7vw, 48px);
	line-height: 1.15;
	margin: 16px 0;
}
.recruit-facts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin: 28px 0;
}
.recruit-facts article {
	background: #ffffff05;
	border: 1px solid #ffffff15;
	padding: 18px;
	border-radius: 12px;
}
.recruit-facts strong {
	display: block;
	font-size: 18px;
	margin-top: 8px;
}
.recruit-facts p {
	font-size: 13px;
	margin-bottom: 0;
}
.recruit-expectations {
	background: #0c1019ba;
	border: 1px solid #ffffff18;
	border-radius: 14px;
	padding: 26px;
}
.recruit-expectations h3 {
	font-size: 24px;
}
.recruit-expectations ul {
	padding-left: 20px;
	color: #cbd0dd;
	font-size: 14px;
}
.recruit-expectations li {
	margin: 12px 0;
}
.recruit-expectations li::marker {
	color: #dc9dab;
}
.recruit-expectations p {
	font-size: 13px;
}
.recruit-showcase {
	margin-top: 64px;
}
.recruit-controls {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 24px 0;
}
.recruit-controls button {
	border-radius: 30px;
	min-height: 44px;
	padding: 8px 20px;
}
.recruit-controls button[aria-pressed='true'] {
	border-color: #e6b5be;
	background: #643345;
	color: white;
}
.class-recruit-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr));
	gap: 18px;
}
.class-recruit-card {
	padding: 24px;
	border-radius: 18px;
	border: 1px solid color-mix(in srgb, var(--class-color) 30%, #282e3b);
	background:
		radial-gradient(
			ellipse at 10% 0%,
			color-mix(in srgb, var(--class-color) 13%, transparent),
			transparent 70%
		),
		#10151f;
	transition:
		border-color 180ms ease,
		transform 180ms ease;
}
.class-recruit-card:hover {
	transform: translateY(-3px);
	border-color: var(--class-color);
}
.class-recruit-heading {
	display: flex;
	gap: 16px;
	align-items: center;
}
.class-recruit-heading > img {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	border: 1px solid color-mix(in srgb, var(--class-color) 50%, transparent);
}
.class-recruit-heading h3 {
	margin: 0 0 4px;
	font-size: 19px;
}
.recruit-priority {
	font-size: 12px;
	color: var(--class-color);
}
.recruit-specs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 20px;
}
.recruit-specs > span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 9px;
	font-size: 12px;
	border: 1px solid #ffffff15;
	border-radius: 20px;
	background: #0b0e16a0;
}
.recruit-specs img {
	width: 19px;
	height: 19px;
	border-radius: 50%;
}
.recruit-cta {
	text-align: center;
	margin: 32px 0;
}
.recruit-cta p {
	margin: 12px auto;
	font-size: 13px;
}
.application-steps {
	gap: 28px;
}
.application-steps strong {
	font-size: 18px;
}
.application-steps span {
	font-size: 14px;
}
.raid-showcase-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
	gap: 24px;
}
.raid-showcase {
	border: 1px solid #42404d;
	border-radius: 20px;
	overflow: hidden;
	background: #131720;
}
.raid-art {
	position: relative;
	min-height: 280px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 10px;
	padding: 32px;
	background:
		linear-gradient(0deg, #11151f, #17121b77),
		url('assets/night-sanctum.svg') 65% 45% / cover;
}
.raid-art img {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	border: 2px solid #b48d67;
	box-shadow: 0 0 36px #b34e3733;
}
.raid-art h2 {
	font-size: clamp(28px, 3vw, 42px);
	margin: 0;
}
.raid-art p {
	margin: 0;
	font-size: 13px;
}
.raid-score {
	font-size: 54px;
	font-weight: 750;
	line-height: 1.15;
}
.raid-score span {
	color: #959eae;
	font-size: 30px;
}
.raid-sigil {
	font-size: 42px;
	color: #c79f77;
}
.raid-card-body {
	padding: 24px;
}
.raid-card-body progress {
	width: 100%;
	height: 8px;
	accent-color: #82c8aa;
}
.encounter-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap: 10px;
	list-style: none;
	padding: 0;
	margin: 24px 0;
}
.encounter-tiles li {
	display: flex;
	align-items: start;
	gap: 12px;
	padding: 14px;
	border: 1px solid #ffffff14;
	border-radius: 10px;
	background: #ffffff03;
}
.encounter-tiles strong {
	font-size: 14px;
}
.encounter-tiles small {
	display: block;
	color: #b4bbc8;
	font-size: 12px;
}
.encounter-defeated > span {
	color: #86d3b1;
}
.raid-card-body details {
	font-size: 14px;
}
.progress-source {
	text-align: center;
	font-size: 13px;
	margin-top: 24px;
}
.roster-player .class-name {
	font-size: 15px;
}
.roster-role-heading h3 {
	font-size: 15px;
}
.roster-player-info span {
	font-size: 13px;
}
.panel-tabs {
	gap: 8px;
}
.panel-tabs button {
	font-size: 13px;
}
.privacy-note,
.notice {
	line-height: 1.7;
}
footer {
	font-family: inherit;
	font-size: 13px;
}
@media (max-width: 1100px) {
	.hero {
		gap: 24px;
	}
	.hero-art {
		max-width: 340px;
	}
}
@media (max-width: 800px) {
	.recruit-command {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 700px) {
	.hero {
		min-height: 0;
		padding-block: 48px;
	}
	.hero h1 {
		font-size: clamp(38px, 10vw, 56px);
	}
	.hero::before {
		inset-inline: -20px;
	}
	.hero p {
		font-size: 16px;
	}
	.recruit-facts {
		grid-template-columns: 1fr;
	}
	.card,
	.recruit-command {
		border-radius: 14px;
	}
	.section,
	.recruit-showcase {
		margin-top: 44px;
	}
	.page-title h1 {
		font-size: 38px;
	}
	.raid-art {
		min-height: 240px;
		padding: 24px 18px;
	}
	.brand {
		font-size: 11px;
	}
	.brand-sub {
		font-size: 8px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.class-recruit-card:hover,
	.link-card:hover {
		transform: none;
	}
}

.section-head h2 {
	font-family: inherit;
	font-weight: 650;
}

/* Illustrated guild system. Artwork and atmosphere remain independent layers. */
:root {
	--bg: #0b0b0d;
	--panel: #1a1a1f;
	--line: #403931;
	--ink: #e6e0d4;
	--muted: #b8b2ad;
	--guild-gold: #a68a5b;
	--guild-crimson: #6e0f1d;
	--art-shade: 0.88;
	--frame-radius: 3px;
}
main {
	max-width: 1640px;
	padding-inline: clamp(18px, 4vw, 64px);
}
body {
	background: var(--bg);
}
body > header {
	background: #0b0b0df2;
	border-bottom: 1px solid var(--line);
}
h1,
.hero h1,
.page-title h1 {
	font-family: Georgia, 'Times New Roman', serif;
	font-weight: 400;
	letter-spacing: -0.025em;
}
.button,
button,
.card,
.banner {
	border-radius: var(--frame-radius);
}
#navigation a[aria-current='page'] {
	background: linear-gradient(#6e0f1d66, #6e0f1d11);
	border-color: var(--guild-gold);
}
.hero {
	display: flex;
	align-items: center;
	min-height: 570px;
	padding-block: 64px;
}
.hero > div {
	max-width: 620px;
	width: 53%;
}
.hero::before {
	background: url('assets/art/castle.webp') center/cover;
	inset: 0 calc(-1 * clamp(18px, 4vw, 64px));
}
.hero::after {
	content: '';
	position: absolute;
	z-index: -1;
	inset: 0 calc(-1 * clamp(18px, 4vw, 64px));
	background:
		linear-gradient(90deg, rgb(11 11 13 / var(--art-shade)), #0b0b0d55 55%, transparent),
		linear-gradient(0deg, var(--bg), transparent 30%);
}
.hero h1 {
	font-size: clamp(46px, 5.4vw, 82px);
	text-transform: uppercase;
	line-height: 1.02;
}
.hero h1 em {
	font-style: normal;
	color: #d25359;
	font-size: inherit;
}
.hero .hero-motto {
	color: #ead3ad;
	font-family: Georgia, serif;
	font-size: 23px;
}
.hero p {
	max-width: 52ch;
	color: var(--ink);
	text-shadow: 0 2px 12px #000;
}
.adventure-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin: 0 0 32px;
}
.adventure-card {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: end;
	min-height: 230px;
	padding: 22px;
	border: 1px solid var(--guild-gold);
	border-radius: 3px;
	overflow: hidden;
	text-decoration: none;
	background: var(--panel);
}
.adventure-card::before {
	content: '';
	position: absolute;
	z-index: -2;
	inset: 0;
	background: var(--card-art) center/cover;
	transition: transform 0.3s ease;
}
.adventure-card::after {
	content: '';
	position: absolute;
	z-index: -1;
	inset: 0;
	background: linear-gradient(transparent 15%, #0b0b0de6 85%);
}
.adventure-card:hover::before {
	transform: scale(1.035);
}
.adventure-card h2 {
	font:
		20px Georgia,
		serif;
	letter-spacing: 0.03em;
	margin: 0 0 8px;
	color: var(--ink);
}
.adventure-card p {
	font-size: 14px;
	margin: 0;
	color: var(--ink);
}
.art-campfire {
	--card-art: url('assets/art/campfire.webp');
}
.art-landscape {
	--card-art: url('assets/art/landscape.webp');
}
.art-journey {
	--card-art: url('assets/art/raid-journey.webp');
}
.art-heroes {
	--card-art: url('assets/art/heroes.webp');
}
.art-heroes::before {
	background-position: center 34%;
}
body[data-page='/raids'] .page-title,
body[data-page='/roster'] .page-title {
	position: relative;
	isolation: isolate;
	min-height: 360px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-bottom: 24px;
	padding-block: 48px;
}
body[data-page='/raids'] .page-title::before,
body[data-page='/roster'] .page-title::before {
	content: '';
	position: absolute;
	z-index: -2;
	inset: 0 calc(-1 * clamp(18px, 4vw, 64px));
	background: var(--page-art) center 45% / cover;
}
body[data-page='/raids'] {
	--page-art: url('assets/art/raid-journey.webp');
}
body[data-page='/roster'] {
	--page-art: url('assets/art/war-room.webp');
}
body[data-page='/raids'] .page-title::after,
body[data-page='/roster'] .page-title::after {
	content: '';
	position: absolute;
	z-index: -1;
	inset: 0 calc(-1 * clamp(18px, 4vw, 64px));
	background:
		linear-gradient(90deg, #0b0b0dee, #0b0b0d88 42%, #0b0b0d08),
		linear-gradient(0deg, var(--bg), transparent 25%);
}
body[data-page='/raids'] .page-title h1,
body[data-page='/roster'] .page-title h1 {
	max-width: 15ch;
	font-size: clamp(38px, 4.5vw, 64px);
}
body[data-page='/raids'] .page-title p,
body[data-page='/roster'] .page-title p {
	max-width: 43ch;
	color: var(--ink);
}
.raid-section-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 24px 0;
}
.onyxia-feature {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
	background: #131116;
	border: 1px solid var(--line);
	max-width: 1050px;
	margin: 32px auto;
}
.onyxia-feature img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 460px;
	object-fit: contain;
	background: #0b0b0d;
}
.onyxia-feature > div {
	padding: clamp(24px, 4vw, 56px);
	align-self: center;
}
.roster-layout {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(240px, 1fr);
	gap: 24px;
	align-items: start;
}
.roster-table-wrap {
	min-width: 0;
	border: 1px solid var(--guild-gold);
	background: #101013;
	overflow: auto;
}
.guild-roster-table {
	width: 100%;
	border-collapse: collapse;
}
.guild-roster-table caption {
	text-align: left;
	padding: 14px 18px;
	font-size: 13px;
	color: var(--muted);
}
.guild-roster-table th,
.guild-roster-table td {
	padding: 16px 20px;
	text-align: left;
	border-bottom: 1px solid #ffffff10;
}
.guild-roster-table thead {
	background: #19171b;
	color: #d9bf93;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.07em;
}
.guild-roster-table tbody tr:hover {
	background: #a68a5b0d;
}
.roster-table-name {
	display: flex;
	align-items: center;
	gap: 14px;
	color: var(--class-color, var(--ink));
	overflow-wrap: anywhere;
}
.roster-table-name img {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	border: 1px solid var(--guild-gold);
	border-radius: 4px;
}
.roster-summary {
	display: grid;
	gap: 18px;
}
.roster-summary .card {
	padding: 24px;
}
.roster-summary h2 {
	font:
		48px Georgia,
		serif;
	margin: 10px 0;
}
.roster-summary dl > div {
	display: flex;
	justify-content: space-between;
	padding: 10px 0;
	border-bottom: 1px solid var(--line);
}
.roster-summary dd {
	color: #e4c495;
	font-weight: 700;
}
@media (max-width: 1000px) {
	.adventure-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.roster-layout {
		grid-template-columns: minmax(0, 1fr);
	}
	.roster-summary {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 600px) {
	.hero {
		min-height: 650px;
		align-items: end;
		padding: 180px 0 36px;
	}
	.hero > div {
		width: 100%;
	}
	.hero::before {
		background-position: 65% top;
	}
	.hero::after {
		background: linear-gradient(0deg, var(--bg), #0b0b0de8 44%, #0b0b0d10);
	}
	.hero h1 {
		font-size: 48px;
	}
	.adventure-grid {
		gap: 12px;
	}
	.adventure-card {
		min-height: 220px;
		padding: 16px;
	}
	.adventure-card h2 {
		font-size: 18px;
	}
	.adventure-card p {
		font-size: 13px;
	}
	body[data-page='/raids'] .page-title,
	body[data-page='/roster'] .page-title {
		min-height: 430px;
		justify-content: end;
		padding-top: 180px;
	}
	body[data-page='/raids'] .page-title::after,
	body[data-page='/roster'] .page-title::after {
		background: linear-gradient(0deg, var(--bg), #0b0b0de0 45%, #0b0b0d11);
	}
	.onyxia-feature {
		grid-template-columns: minmax(0, 1fr);
	}
	.onyxia-feature img {
		max-height: 350px;
	}
	.roster-summary {
		grid-template-columns: minmax(0, 1fr);
	}
	.guild-roster-table th,
	.guild-roster-table td {
		padding: 12px 8px;
		font-size: 13px;
	}
	.roster-table-name {
		gap: 8px;
	}
	.guild-roster-table .pill {
		font-size: 11px;
		white-space: normal;
	}
}
@media (prefers-reduced-motion: reduce) {
	.adventure-card::before {
		transition: none;
	}
	.adventure-card:hover::before {
		transform: none;
	}
}
body[data-page='/raids'] .page-title,
body[data-page='/roster'] .page-title {
	max-width: none;
}
.guild-roster-table tbody th {
	font-size: 16px;
	font-weight: 600;
	text-transform: none;
	letter-spacing: normal;
}
@media (max-width: 768px) {
	.week-schedule {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.week-day {
		min-width: 0;
	}
	.week-day strong {
		font-size: 23px;
		overflow-wrap: normal;
	}
	.link-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}
/* Compact Google Calendar copy tool; native disclosure supports keyboard use. */
.calendar-disclosure.raid-planner {
	padding: 0;
	margin-block: 24px;
	max-width: 760px;
}
.calendar-disclosure > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 20px 24px;
	cursor: pointer;
	list-style: none;
}
.calendar-disclosure > summary::-webkit-details-marker {
	display: none;
}
.calendar-disclosure > summary strong {
	display: block;
	color: var(--ink);
	font-size: 16px;
}
.calendar-disclosure > summary small {
	display: block;
	color: var(--muted);
	font-size: 13px;
	margin-top: 4px;
	line-height: 1.6;
}
.calendar-chevron {
	font-size: 24px;
	color: #d9bf93;
}
.calendar-disclosure[open] .calendar-chevron {
	transform: rotate(180deg);
}
.calendar-disclosure[open] > summary {
	border-bottom: 1px solid var(--line);
}
.calendar-content {
	padding: 24px;
}
.calendar-content .planner-heading {
	grid-template-columns: minmax(0, 1fr);
}
.calendar-content .planner-zone {
	max-width: 100%;
}
@media (max-width: 600px) {
	.calendar-content {
		padding: 18px;
	}
	.calendar-disclosure > summary {
		padding: 18px;
	}
}

/* Fine metal frame with mirrored corner ornaments; independent of the artwork. */
.adventure-card {
	border-radius: 0;
	border-color: #8f7856;
	box-shadow:
		inset 0 0 0 2px #0b0b0d,
		inset 0 0 0 3px #a68a5b30;
}
.adventure-frame {
	position: absolute;
	inset: 5px;
	border: 1px solid #a68a5b40;
	pointer-events: none;
}
.frame-corner {
	position: absolute;
	width: 24px;
	height: 24px;
	border-top: 1px solid #d2b68a;
	border-left: 1px solid #d2b68a;
}
.frame-corner::before {
	content: '';
	position: absolute;
	width: 27px;
	height: 1px;
	top: 8px;
	left: -5px;
	background: #a68a5b;
	transform: rotate(-45deg);
}
.frame-corner::after {
	content: '';
	position: absolute;
	width: 5px;
	height: 5px;
	left: 5px;
	top: 5px;
	border: 1px solid #d2b68a;
	transform: rotate(45deg);
	background: #342a1e;
}
.corner-tl {
	top: -3px;
	left: -3px;
}
.corner-tr {
	top: -3px;
	right: -3px;
	transform: rotate(90deg);
}
.corner-bl {
	bottom: -3px;
	left: -3px;
	transform: rotate(-90deg);
}
.corner-br {
	bottom: -3px;
	right: -3px;
	transform: rotate(180deg);
}
.adventure-caption {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}
.adventure-caption > span {
	min-width: 0;
}
.adventure-icon {
	width: 32px;
	height: 32px;
	flex: 0 0 32px;
	fill: currentColor;
	color: #dfc197;
	filter: drop-shadow(0 2px 3px #000);
}
.adventure-card h2 {
	font-size: clamp(16px, 1.4vw, 20px);
	letter-spacing: 0.02em;
}
.adventure-card:focus-visible {
	outline: 2px solid #f0d7ae;
	outline-offset: 4px;
}
@media (max-width: 600px) {
	.adventure-caption {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
	.adventure-icon {
		width: 28px;
		height: 28px;
		flex-basis: 28px;
	}
}

/* A restrained command bar, with small outlined guild symbols. */
body > header {
	gap: 20px;
	border-bottom-color: #a68a5b55;
	background: linear-gradient(180deg, #191519f5, #0b0b0df5);
	box-shadow: 0 5px 24px #0004;
}
body > header .brand {
	display: flex;
	align-items: center;
	gap: 12px;
}
body > header .brand-logo {
	display: block;
	width: 64px;
	height: 64px;
	object-fit: contain;
	object-position: center;
	margin: 0;
}
#navigation {
	display: flex;
	align-items: center;
	gap: 3px;
	padding: 5px;
	border: 1px solid #a68a5b30;
	border-radius: 9px;
	background: #08080b70;
}
#navigation a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 11px 9px;
	border: 1px solid transparent;
	border-radius: 5px;
	color: #c9c2b8;
	font-size: 12px;
	letter-spacing: 0.02em;
	white-space: nowrap;
}
.nav-icon {
	width: 17px;
	height: 17px;
	flex: 0 0 17px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	color: #c9ac81;
}
#navigation a:hover {
	background: #a68a5b12;
	color: #fff3df;
	border-color: #a68a5b40;
}
#navigation a[aria-current='page'] {
	background: linear-gradient(135deg, #6e0f1d88, #28171c);
	border-color: #a68a5b65;
	color: #fff1d7;
	box-shadow: inset 0 -2px #b54951;
}
#navigation a[aria-current='page'] .nav-icon {
	color: #ed8f90;
}
#navigation a[aria-current]::after {
	display: none;
}
#navigation a:focus-visible {
	outline: 2px solid #e1bf8a;
	outline-offset: 2px;
}
.hero::before {
	background-position: 58% center;
}
@media (min-width: 901px) and (max-width: 1380px) {
	body > header {
		flex-wrap: wrap;
		justify-content: space-between;
	}
	#navigation {
		order: 3;
		width: 100%;
		justify-content: center;
	}
}
@media (max-width: 900px) {
	#navigation {
		display: none;
	}
	#navigation.open {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		width: 100%;
		padding: 8px;
	}
	#navigation a {
		justify-content: flex-start;
		padding: 13px;
	}
	body > header .brand-logo {
		width: 52px;
		height: 52px;
	}
}
@media (max-width: 600px) {
	.hero::before {
		background-position: 61% top;
	}
}
@media (max-width: 900px) {
	body > header {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
	}
	body > header .menu {
		display: block;
	}
	body > header #navigation,
	body > header .login {
		grid-column: 1 / -1;
	}
}
@media (min-width: 901px) {
	body > header .menu {
		display: none;
	}
}

/* Shared public-page finish: aged metal, charcoal surfaces, separate artwork layers. */
body[data-page] .card,
body[data-page] .link-card,
body[data-page] .raid-card-body {
	background: linear-gradient(145deg, #201b1c, #111113);
	border-color: #a68a5b50;
	border-radius: 4px;
	box-shadow:
		inset 0 1px #e3c79b0b,
		0 10px 30px #0002;
}
body[data-page] .section-head h2,
body[data-page] .section > h2,
body[data-page] .recruit-lead h2,
body[data-page] .about-layout h2,
body[data-page] .contact-card h2 {
	font-family: Georgia, serif;
	font-weight: 400;
	letter-spacing: -0.02em;
}
body[data-page] .section-head {
	padding-bottom: 16px;
	border-bottom: 1px solid #a68a5b38;
}
body[data-page='/nosotros'] {
	--section-art: url('assets/art/tavern.webp');
}
body[data-page='/contacto'] {
	--section-art: url('assets/art/tavern.webp');
}
body[data-page='/reclutamiento'] {
	--section-art: url('assets/art/recruiting.webp');
}
body[data-page='/progreso'] {
	--section-art: url('assets/art/raid-expedition.webp');
}
body:is(
		[data-page='/nosotros'],
		[data-page='/contacto'],
		[data-page='/reclutamiento'],
		[data-page='/progreso']
	)
	.page-title {
	position: relative;
	isolation: isolate;
	max-width: none;
	min-height: 340px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 44px 0;
	margin-bottom: 28px;
}
body:is(
		[data-page='/nosotros'],
		[data-page='/contacto'],
		[data-page='/reclutamiento'],
		[data-page='/progreso']
	)
	.page-title::before {
	content: '';
	position: absolute;
	z-index: -2;
	inset: 0 calc(-1 * clamp(18px, 4vw, 64px));
	background: var(--section-art) center 42% / cover;
}
body:is(
		[data-page='/nosotros'],
		[data-page='/contacto'],
		[data-page='/reclutamiento'],
		[data-page='/progreso']
	)
	.page-title::after {
	content: '';
	position: absolute;
	z-index: -1;
	inset: 0 calc(-1 * clamp(18px, 4vw, 64px));
	background:
		linear-gradient(90deg, #0b0b0df2, #0b0b0d99 48%, #0b0b0d20),
		linear-gradient(0deg, var(--bg), transparent 30%);
}
body[data-page] .page-title p {
	color: var(--ink);
	max-width: 56ch;
}
body[data-page='/reclutamiento'] .page-title::before {
	background-position: 80% 32%;
}
body[data-page] .banner {
	position: relative;
	isolation: isolate;
	border: 1px solid #a68a5b70;
	border-radius: 4px;
	background:
		linear-gradient(90deg, #0b0b0dee, #0b0b0d88),
		url('assets/art/raid-expedition.webp') center 48% / cover;
	min-height: 210px;
}
body[data-page] .banner p {
	color: #d7cfc3;
}
body[data-page] .link-card {
	border-top: 2px solid #a68a5b;
	transition:
		border-color 0.2s ease,
		background 0.2s ease;
}
body[data-page] .link-card:hover {
	border-color: #d5b483;
	background: #23191c;
}
.week-schedule {
	gap: 10px;
}
.week-day {
	background: linear-gradient(#181719, #111113);
	border: 1px solid #a68a5b40;
	border-radius: 3px;
}
.week-day.raid-day {
	background: linear-gradient(#41171e, #191416);
	border-top: 2px solid #b98b58;
}
.week-day strong {
	color: #e5c79e;
}
.calendar-disclosure.raid-planner {
	border: 1px solid #a68a5b60;
	border-radius: 4px;
	background: linear-gradient(120deg, #24191c, #121214);
}
.about-emblem {
	padding: 28px;
	border: 1px solid #a68a5b45;
	background: radial-gradient(ellipse, #6e0f1d30, transparent 70%), #111113;
}
.about-emblem img {
	max-height: 340px;
	object-fit: contain;
}
.about-layout {
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
}
.recruit-command {
	border-radius: 4px;
	border-color: #a68a5b60;
	background:
		linear-gradient(90deg, #101012ed, #101012c9),
		url('assets/art/strategy.webp') center/cover;
}
.recruit-expectations {
	border-radius: 3px;
	background: #0b0b0de6;
	border-color: #a68a5b45;
}
.recruit-facts article {
	background: #0b0b0dc9;
	border-radius: 3px;
	border-color: #a68a5b45;
}
.class-recruit-card {
	border-radius: 4px;
	border-color: color-mix(in srgb, var(--class-color) 45%, #302a29);
	background: linear-gradient(
		120deg,
		color-mix(in srgb, var(--class-color) 12%, #151214),
		#111113 75%
	);
	box-shadow: inset 3px 0 var(--class-color);
}
.recruit-specs > span {
	border-radius: 4px;
	background: #09090c99;
}
.recruit-filters button {
	border-radius: 4px;
}
.raid-showcase {
	border-radius: 4px;
	border-color: #a68a5b65;
	background: #131113;
}
.raid-art {
	background:
		linear-gradient(0deg, #131113, #13111366),
		url('assets/art/raid-expedition.webp') center/cover;
}
.raid-onyxia .raid-art {
	min-height: 380px;
	align-items: flex-start;
	text-align: left;
	padding: clamp(28px, 5vw, 64px);
	background:
		linear-gradient(90deg, #120d0bef 8%, #120d0bb3 40%, #120d0b0a 75%),
		linear-gradient(0deg, #131113, transparent 35%),
		url('assets/art/onyxia.webp') right 28% / auto 160% no-repeat,
		#241610;
}
.raid-onyxia .raid-art h2 {
	max-width: 19ch;
	font-family: Georgia, serif;
	font-weight: 400;
}
.raid-onyxia .raid-art > img {
	display: none;
}
.contact-card {
	position: relative;
	overflow: hidden;
}
body[data-page='/contacto'] .contact-card {
	background:
		linear-gradient(#111113c9, #111113f5),
		url('assets/art/tavern.webp') center/cover;
	border-color: #a68a5b70;
}
.contact-notes {
	padding: 20px 28px;
	border: 1px solid #a68a5b40;
	background: #131113;
}
body[data-page] input,
body[data-page] select,
body[data-page] textarea {
	background-color: #101012;
	border-color: #51433d;
	border-radius: 4px;
}
@media (max-width: 600px) {
	body:is(
			[data-page='/nosotros'],
			[data-page='/contacto'],
			[data-page='/reclutamiento'],
			[data-page='/progreso']
		)
		.page-title {
		min-height: 400px;
		justify-content: end;
		padding-top: 150px;
	}
	body:is(
			[data-page='/nosotros'],
			[data-page='/contacto'],
			[data-page='/reclutamiento'],
			[data-page='/progreso']
		)
		.page-title::after {
		background: linear-gradient(0deg, var(--bg), #0b0b0de6 48%, #0b0b0d20);
	}
	.raid-onyxia .raid-art {
		min-height: 420px;
		justify-content: end;
		background:
			linear-gradient(0deg, #131113, #131113e0 35%, #13111310 75%),
			url('assets/art/onyxia.webp') center 22% / cover;
	}
	.raid-onyxia .raid-art h2 {
		font-size: 30px;
	}
	.about-emblem img {
		max-height: 230px;
	}
	.contact-notes {
		padding: 20px;
	}
}
@media (prefers-reduced-motion: reduce) {
	body[data-page] .link-card {
		transition: none;
	}
}
body[data-page='/nosotros'] {
	--section-art: url('assets/art/castle-journey.webp');
}
body[data-page='/'] .banner {
	background-image:
		linear-gradient(90deg, #0b0b0dee, #0b0b0d70), url('assets/art/castle-overlook.webp');
}
body[data-page='/'] .link-card:nth-child(1) {
	background:
		linear-gradient(0deg, #111113 15%, #111113b0),
		url('assets/art/raid-expedition.webp') center/cover;
}
body[data-page='/'] .link-card:nth-child(2) {
	background:
		linear-gradient(0deg, #111113 15%, #111113b0),
		url('assets/art/guild-army.webp') center/cover;
}
body[data-page='/'] .link-card:nth-child(3) {
	background:
		linear-gradient(0deg, #111113 15%, #111113b0),
		url('assets/art/recruiting.webp') center/cover;
}
body[data-page='/'] .art-campfire {
	--card-art: url('assets/art/resting-camp.webp');
}
body[data-page='/'] .art-landscape {
	--card-art: url('assets/art/ironforge-gates.webp');
}
body[data-page='/nosotros'] .about-emblem {
	min-height: 360px;
	display: grid;
	place-items: center;
	background:
		linear-gradient(0deg, #111113aa, #11111311),
		url('assets/art/resting-camp.webp') center/cover;
}
body[data-page='/nosotros'] .about-emblem img {
	width: 150px;
	height: 150px;
	align-self: end;
	filter: drop-shadow(0 3px 15px #000);
}
body[data-page='/contacto'] .contact-card {
	padding-top: 220px;
	background:
		linear-gradient(0deg, #111113 35%, #11111322 85%),
		url('assets/art/tavern.webp') center top/100% auto no-repeat,
		#111113;
}
body[data-page='/contacto'] .contact-card > img {
	width: 100px;
	height: 100px;
}
@media (max-width: 600px) {
	body[data-page='/contacto'] .contact-card {
		padding-top: 155px;
	}
	body[data-page='/nosotros'] .about-emblem {
		min-height: 280px;
	}
}
.about-layout > *,
.contact-layout > *,
.recruit-command > * {
	min-width: 0;
}
@media (max-width: 768px) {
	.about-layout,
	.contact-layout {
		grid-template-columns: minmax(0, 1fr);
	}
	.about-emblem {
		max-width: 100%;
	}
}

/* Recruitment columns share edges, spacing and surface treatment. */
.recruit-lead,
.recruit-expectations {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	padding: clamp(20px, 2.4vw, 32px);
	margin: 0;
	border: 1px solid #a68a5b45;
	border-radius: 3px;
	background: #0b0b0de6;
}
.recruit-lead h2 {
	font-size: clamp(28px, 3vw, 42px);
	margin: 16px 0;
}
.recruit-lead > p {
	margin: 0;
}
.recruit-lead > .button,
.recruit-lead > .pill {
	align-self: flex-start;
	margin-top: auto;
}
.recruit-facts {
	gap: 12px;
	margin: 24px 0;
}
.recruit-facts article {
	padding: 16px;
}
.recruit-expectations h3 {
	margin: 16px 0;
	line-height: 1.35;
}
.recruit-expectations ul {
	margin: 0 0 24px;
}
.recruit-expectations > p:last-child {
	margin: auto 0 0;
	padding-top: 20px;
	border-top: 1px solid #a68a5b38;
}
@media (max-width: 700px) {
	.recruit-command {
		gap: 16px;
		padding: 16px;
	}
	.recruit-facts {
		margin: 20px 0;
	}
}

/* Form controls must not give checkboxes the dimensions of text fields. */
input[type='checkbox'],
.filters input[type='checkbox'],
.filters > label input[type='checkbox'] {
	width: 17px;
	min-width: 17px;
	max-width: 17px;
	height: 17px;
	padding: 0;
	margin: 0 8px 0 0;
	flex: 0 0 17px;
	vertical-align: middle;
}
.filters > label:has(> input[type='checkbox']) {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0;
	flex-basis: 100%;
	min-width: 0;
	min-height: 44px;
}
.calendar-disclosure > summary:focus-visible {
	outline: 2px solid #e1bf8a;
	outline-offset: 3px;
}
@media (max-width: 900px) {
	input:not([type='checkbox']):not([type='radio']),
	select,
	textarea {
		font-size: 16px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.link-card:hover {
		transform: none;
	}
}
.form-grid > label {
	min-width: 0;
}
.form input:not([type='checkbox']):not([type='radio']),
.form select,
.form textarea {
	min-width: 0;
	max-width: 100%;
}
@media (max-width: 480px) {
	.filters > label {
		flex-basis: 100%;
		min-width: 0;
	}
	.filters input[type='date'],
	.filters input[type='datetime-local'] {
		min-width: 0;
		max-width: 100%;
	}
	.form-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Consistency pass: shared page edges, aligned card captions and framed artwork. */
footer {
	box-sizing: border-box;
	max-width: 1640px;
	margin-inline: auto;
	padding: 32px clamp(18px, 4vw, 64px);
	border-top-color: #a68a5b38;
	background: transparent;
	row-gap: 16px;
}
footer small {
	flex: 1 1 320px;
	width: auto;
	margin-top: 0;
	font-size: 12px;
	color: #9a948c;
}
footer > button.secondary {
	padding: 8px 14px;
	font-size: 13px;
}
.adventure-card p {
	min-height: calc(2em * 1.65);
}
.adventure-caption {
	align-items: flex-start;
}
.adventure-caption .adventure-icon {
	margin-top: 2px;
}
.class-recruit-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.recruit-expectations h3,
.onyxia-feature h2 {
	font-family: Georgia, serif;
	font-weight: 400;
	letter-spacing: -0.01em;
}
.onyxia-feature {
	max-width: none;
	margin: 32px 0;
	align-items: stretch;
	border-color: #a68a5b65;
	overflow: hidden;
}
.onyxia-feature img {
	height: 100%;
	min-height: 340px;
	max-height: 480px;
	object-fit: cover;
	object-position: center 30%;
}
.progress-source {
	text-align: left;
	max-width: none;
	color: var(--muted);
}
.guild-roster-table .pill {
	white-space: nowrap;
}
@media (max-width: 900px) {
	.class-recruit-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 1000px) and (min-width: 601px) {
	.adventure-card p {
		min-height: 0;
	}
}
@media (max-width: 600px) {
	.adventure-card p {
		min-height: 0;
	}
	.class-recruit-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 12px;
	}
	.class-recruit-card {
		padding: 18px;
	}
	.recruit-specs {
		margin-top: 14px;
	}
	.onyxia-feature img {
		min-height: 0;
		height: auto;
		aspect-ratio: 4 / 3;
		max-height: 320px;
		object-position: center 28%;
	}
	footer {
		justify-content: flex-start;
	}
	.guild-roster-table .pill {
		white-space: nowrap;
		padding-inline: 8px;
	}
}

/* RestedXP partner link: persistent, themed and clearly marked as an affiliate link. */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.header-actions {
	display: flex;
	align-items: center;
	gap: 10px;
}
.partner-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 6px 14px 6px 8px;
	border: 1px solid #a68a5b90;
	border-radius: 999px;
	background:
		radial-gradient(ellipse at 15% 50%, #b5495140, transparent 70%),
		linear-gradient(135deg, #2a1418, #120d10);
	box-shadow:
		inset 0 1px #f0d7ae1a,
		0 0 18px #b5495126;
	color: #f3e6cf;
	text-decoration: none;
	white-space: nowrap;
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease;
}
.partner-link:hover {
	border-color: #e1bf8a;
	box-shadow:
		inset 0 1px #f0d7ae26,
		0 0 24px #d2535944;
}
.partner-link:focus-visible {
	outline: 2px solid #e1bf8a;
	outline-offset: 3px;
}
.partner-icon {
	width: 28px;
	height: 28px;
	flex: 0 0 28px;
	padding: 5px;
	border: 1px solid #a68a5b80;
	border-radius: 50%;
	background: #6e0f1d;
	fill: none;
	stroke: #f0d7ae;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.partner-text {
	display: grid;
	line-height: 1.15;
	text-align: left;
}
.partner-text small {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #e3b778;
}
.partner-text strong {
	font-size: 13px;
	font-weight: 750;
	letter-spacing: 0.04em;
	color: #fff3df;
}
.partner-banner {
	display: grid;
	box-sizing: border-box;
	width: 100%;
	justify-items: center;
	gap: 8px;
	margin: 56px auto 8px;
	max-width: 760px;
}
.partner-banner-label {
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #8f877d;
}
.partner-banner a {
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 738px;
	padding: 4px;
	border: 1px solid #a68a5b40;
	background: #111113;
	opacity: 0.9;
	transition:
		opacity 0.2s ease,
		border-color 0.2s ease;
}
.partner-banner a:hover,
.partner-banner a:focus-visible {
	opacity: 1;
	border-color: #a68a5b90;
}
.partner-banner img {
	display: block;
	width: 100%;
	max-width: 728px;
	height: auto;
}
@media (min-width: 901px) and (max-width: 1380px) {
	body > header .header-actions {
		margin-left: auto;
	}
}
@media (max-width: 900px) {
	body > header .header-actions {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 8px;
	}
	body > header .header-actions .login {
		width: 100%;
		min-height: 44px;
	}
	.partner-link {
		justify-content: center;
		min-width: 0;
		border-radius: 4px;
	}
}
@media (max-width: 360px) {
	.partner-icon {
		display: none;
	}
	.partner-link {
		padding-inline: 8px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.partner-link,
	.partner-banner a {
		transition: none;
	}
}

/* Header actions sit side by side on phones; wide-screen artwork reaches both edges. */
@media (max-width: 900px) {
	body > header .header-actions .login {
		grid-column: auto;
		padding-inline: 8px;
	}
}
@media (max-width: 360px) {
	body > header .header-actions .login {
		font-size: 11px;
	}
}
html {
	overflow-x: clip;
}
@media (min-width: 1641px) {
	.hero::before,
	.hero::after,
	body[data-page] .page-title::before,
	body[data-page] .page-title::after {
		inset-inline: calc(50% - 50vw);
	}
}

/* Weekly raid calendar: readable week strip, raid nights carry the weight. */
.raid-week {
	display: flex;
	gap: 10px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}
.raid-week-day {
	position: relative;
	display: flex;
	flex: 0.8 1 0;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	min-width: 0;
	min-height: 196px;
	padding: 20px 18px;
	border: 1px solid #a68a5b30;
	border-radius: 4px;
	background: linear-gradient(#161518, #101012);
}
.raid-week-day.is-raid {
	flex-grow: 1.35;
	border-color: #a68a5b70;
	border-top: 3px solid #c99a62;
	background:
		radial-gradient(ellipse at 20% 0%, #8f1f2d55, transparent 70%),
		linear-gradient(#3a141b, #181214);
	box-shadow: inset 0 1px #f0d7ae14;
}
.raid-week-day[aria-current='date'] {
	outline: 1px solid #e1bf8a;
	outline-offset: 3px;
}
.raid-week-name {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #b8b2ad;
}
.is-raid .raid-week-name {
	color: #e3c08f;
}
.raid-week-today {
	padding: 2px 8px;
	border-radius: 999px;
	background: #e1bf8a;
	color: #1a1214;
	font-size: 11px;
	letter-spacing: 0.06em;
}
.raid-week-day strong {
	margin-top: 10px;
	font:
		400 26px/1.15 Georgia,
		serif;
	color: #fff1d7;
}
.raid-week-detail {
	font-size: 15px;
	line-height: 1.45;
	color: #d7cfc3;
}
.raid-week-time {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: auto;
	padding-top: 12px;
	font-size: 16px;
	font-weight: 650;
	font-variant-numeric: tabular-nums;
	color: #f3e6cf;
}
.raid-week-time svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: #e3c08f;
	stroke-width: 1.8;
	stroke-linecap: round;
}
.raid-week-free {
	margin-top: auto;
	font-size: 15px;
	color: #8f877d;
}
.schedule-note {
	max-width: 72ch;
	margin-top: 18px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--muted);
}
@media (max-width: 1100px) {
	.raid-week {
		flex-direction: column;
		gap: 8px;
	}
	.raid-week-day,
	.raid-week-day.is-raid {
		display: grid;
		grid-template-columns: 150px minmax(0, 1fr) auto;
		grid-template-areas:
			'name title time'
			'name detail time';
		align-items: center;
		column-gap: 20px;
		row-gap: 2px;
		flex: none;
		min-height: 0;
		padding: 16px 20px;
	}
	.raid-week-day.is-raid {
		border-top-width: 1px;
		border-left: 3px solid #c99a62;
	}
	.raid-week-name {
		grid-area: name;
	}
	.raid-week-day strong {
		grid-area: title;
		margin: 0;
		font-size: 22px;
	}
	.raid-week-detail {
		grid-area: detail;
	}
	.raid-week-time {
		grid-area: time;
		margin: 0;
		padding: 0;
	}
	.raid-week-free {
		grid-column: 2 / -1;
		grid-row: 1 / -1;
		margin: 0;
	}
}
@media (max-width: 600px) {
	.raid-week-day,
	.raid-week-day.is-raid {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			'name time'
			'title title'
			'detail detail';
		column-gap: 12px;
		row-gap: 4px;
		padding: 14px 16px;
	}
	.raid-week-day:not(.is-raid) {
		grid-template-areas: 'name free';
	}
	.raid-week-day strong {
		margin-top: 4px;
	}
	.raid-week-free {
		grid-area: free;
		grid-column: auto;
		grid-row: auto;
		justify-self: end;
		font-size: 14px;
	}
	.raid-week-time {
		font-size: 15px;
	}
	.schedule-note {
		font-size: 14px;
	}
}

/* Guild values: equal number column so every title starts on the same line. */
.values-list article > span {
	flex: 0 0 34px;
	font-variant-numeric: tabular-nums;
}
.values-list p {
	font-size: 15px;
	line-height: 1.6;
}
/* The camp artwork has a light strip on its last rows; keep it outside the frame. */
body[data-page='/nosotros'] .about-emblem {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: #111113;
}
body[data-page='/nosotros'] .about-emblem::before,
body[data-page='/nosotros'] .about-emblem::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
}
body[data-page='/nosotros'] .about-emblem::before {
	z-index: -2;
	bottom: -12px;
	background: url('assets/art/resting-camp.webp') center 40% / cover;
}
body[data-page='/nosotros'] .about-emblem::after {
	z-index: -1;
	background: linear-gradient(0deg, #111113aa, #11111311);
}

/* Member areas (panel and profile) share the illustrated guild finish. */
body[data-page='/panel'] {
	--section-art: url('assets/art/war-room.webp');
}
body[data-page='/perfil'] {
	--section-art: url('assets/art/campfire.webp');
}
body:is([data-page='/panel'], [data-page='/perfil']) .page-title {
	position: relative;
	isolation: isolate;
	max-width: none;
	min-height: 300px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 40px 0;
	margin-bottom: 24px;
}
body:is([data-page='/panel'], [data-page='/perfil']) .page-title::before,
body:is([data-page='/panel'], [data-page='/perfil']) .page-title::after {
	content: '';
	position: absolute;
	inset: 0 calc(-1 * clamp(18px, 4vw, 64px));
}
body:is([data-page='/panel'], [data-page='/perfil']) .page-title::before {
	z-index: -2;
	background: var(--section-art) center 40% / cover;
}
body:is([data-page='/panel'], [data-page='/perfil']) .page-title::after {
	z-index: -1;
	background:
		linear-gradient(90deg, #0b0b0df2, #0b0b0dbb 50%, #0b0b0d55),
		linear-gradient(0deg, var(--bg), transparent 35%);
}
body:is([data-page='/panel'], [data-page='/perfil']) .page-title h1 {
	font-size: clamp(36px, 4.4vw, 60px);
}
body:is([data-page='/panel'], [data-page='/perfil']) main h2 {
	font-family: Georgia, serif;
	font-weight: 400;
	letter-spacing: -0.015em;
}
body:is([data-page='/panel'], [data-page='/perfil']) main h3 {
	font-family: Georgia, serif;
	font-weight: 400;
}

/* Panel sections: one framed tab rail with a crimson active state. */
body[data-page='/panel'] .panel-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 0 28px;
	padding: 6px;
	border: 1px solid #a68a5b45;
	border-radius: 4px;
	background: linear-gradient(#17141699, #0e0d10);
}
body[data-page='/panel'] .panel-tabs button {
	flex: 0 0 auto;
	min-height: 42px;
	padding: 9px 14px;
	border: 1px solid transparent;
	border-radius: 3px;
	background: transparent;
	box-shadow: none;
	color: #c9c2b8;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.01em;
	transform: none;
}
body[data-page='/panel'] .panel-tabs button:hover {
	background: #a68a5b14;
	border-color: #a68a5b40;
	color: #fff3df;
}
body[data-page='/panel'] .panel-tabs button[aria-pressed='true'],
body[data-page='/panel'] .panel-tabs button.active {
	background: linear-gradient(135deg, #6e0f1d99, #28171c);
	border-color: #a68a5b70;
	box-shadow: inset 0 -2px #c25a60;
	color: #fff1d7;
}
body[data-page='/panel'] .panel-tabs button:focus-visible {
	outline: 2px solid #e1bf8a;
	outline-offset: 2px;
}

/* Shared surfaces inside member tools. */
body:is([data-page='/panel'], [data-page='/perfil']) .metric {
	font:
		400 clamp(30px, 3vw, 40px) / 1.1 Georgia,
		serif;
	color: #f0d7ae;
}
body:is([data-page='/panel'], [data-page='/perfil']) .label {
	color: #cdb48c;
}
body:is([data-page='/panel'], [data-page='/perfil']) .notice {
	max-width: 80ch;
	padding: 10px 14px;
	border-left: 2px solid #a68a5b;
	background: #a68a5b0d;
	color: #d7cfc3;
	font-size: 14px;
}
body:is([data-page='/panel'], [data-page='/perfil']) .error {
	color: #f0a3a8;
	font-size: 14px;
}
body:is([data-page='/panel'], [data-page='/perfil']) details:not(.calendar-disclosure) > summary {
	color: #ecd2a8;
	font-size: 15px;
	font-weight: 600;
}
body:is([data-page='/panel'], [data-page='/perfil']) fieldset {
	border-color: #a68a5b40;
	border-radius: 4px;
}
body:is([data-page='/panel'], [data-page='/perfil']) legend {
	color: #e3c08f;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
body:is([data-page='/panel'], [data-page='/perfil']) .form p,
body:is([data-page='/panel'], [data-page='/perfil']) .form small {
	font-size: 14px;
}
body:is([data-page='/panel'], [data-page='/perfil']) label {
	font-size: 14px;
	color: #ddd6cb;
}
body:is([data-page='/panel'], [data-page='/perfil']) .form {
	max-width: none;
}
/* Checkbox groups (raid days, sought classes) read as a compact grid. */
body:is([data-page='/panel'], [data-page='/perfil'])
	fieldset:has(> label > input[type='checkbox']) {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 6px 16px;
}
body:is([data-page='/panel'], [data-page='/perfil']) fieldset > legend {
	grid-column: 1 / -1;
}
body:is([data-page='/panel'], [data-page='/perfil']) label:has(> input[type='checkbox']) {
	display: flex;
	align-items: center;
	min-height: 40px;
	margin: 0;
}
/* Tables: readable type, gold header line and calm row hover. */
body:is([data-page='/panel'], [data-page='/perfil']) .table-wrap {
	border: 1px solid #a68a5b45;
	border-radius: 4px;
	background: #101012;
}
body:is([data-page='/panel'], [data-page='/perfil']) .table-wrap table {
	font-size: 14px;
}
body:is([data-page='/panel'], [data-page='/perfil']) .table-wrap th {
	background: #19171b;
	color: #d9bf93;
	font-size: 12px;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	border-bottom: 1px solid #a68a5b45;
}
body:is([data-page='/panel'], [data-page='/perfil']) .table-wrap td {
	padding-block: 12px;
}
body:is([data-page='/panel'], [data-page='/perfil']) .table-wrap tbody tr:hover {
	background: #a68a5b0d;
}
/* Roster boards: role groups framed like the public cards. */
body:is([data-page='/panel'], [data-page='/perfil']) .roster-role {
	border: 1px solid #a68a5b45;
	border-radius: 4px;
	background: linear-gradient(145deg, #1b1718, #101012);
}
body:is([data-page='/panel'], [data-page='/perfil']) .roster-role-heading {
	border-bottom: 1px solid #a68a5b38;
	background: #a68a5b0d;
}
body:is([data-page='/panel'], [data-page='/perfil']) .roster-role-heading h3 {
	font-size: 18px;
	color: #f0d7ae;
}
body:is([data-page='/panel'], [data-page='/perfil']) .roster-count {
	background: #6e0f1d;
	border: 1px solid #a68a5b60;
	color: #fff1d7;
}
body:is([data-page='/panel'], [data-page='/perfil']) .roster-profile {
	border-radius: 4px;
	background: #141215;
	border-color: #ffffff12;
}
body:is([data-page='/panel'], [data-page='/perfil']) .roster-main-badge {
	border: 1px solid #a68a5b70;
	background: #a68a5b1a;
	color: #ecd2a8;
}
body:is([data-page='/panel'], [data-page='/perfil']) .pagination {
	align-items: center;
	gap: 10px;
}
@media (max-width: 700px) {
	body:is([data-page='/panel'], [data-page='/perfil']) .page-title {
		min-height: 340px;
		justify-content: end;
		padding-top: 120px;
	}
	body:is([data-page='/panel'], [data-page='/perfil']) .page-title::after {
		background: linear-gradient(0deg, var(--bg), #0b0b0de6 50%, #0b0b0d33);
	}
	/* Thirteen tabs become one swipeable rail instead of five wrapped rows. */
	body[data-page='/panel'] .panel-tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: thin;
		scroll-snap-type: x proximity;
		margin-inline: calc(-1 * clamp(18px, 4vw, 64px));
		border-inline: 0;
		border-radius: 0;
		padding-inline: clamp(18px, 4vw, 64px);
	}
	body[data-page='/panel'] .panel-tabs button {
		scroll-snap-align: start;
	}
	body[data-page='/panel'] #panel-body > .grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
	}
	body[data-page='/panel'] #panel-body > .grid > .card {
		padding: 14px 12px;
	}
	body[data-page='/panel'] #panel-body > .grid .metric {
		font-size: 24px;
	}
	body[data-page='/panel'] #panel-body > .grid .label {
		font-size: 10px;
		letter-spacing: 0.08em;
	}
}
body[data-page='/panel'] #application-list > .empty {
	grid-column: 1 / -1;
}
@media (max-width: 600px) {
	/* Member filters pair up on phones; search fields and toggles keep a full row. */
	body:is([data-page='/panel'], [data-page='/perfil']) .filters {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}
	body:is([data-page='/panel'], [data-page='/perfil']) .filters > * {
		min-width: 0;
		margin: 0;
	}
	body:is([data-page='/panel'], [data-page='/perfil'])
		.filters
		> :is(
			label:has(input:is([type='search'], [type='text'])),
			label:has(> input[type='checkbox']),
			button
		) {
		grid-column: 1 / -1;
	}
}
@media (max-width: 600px) {
	body[data-page='/panel'] .application-inbox .filters > label {
		grid-column: 1 / -1;
	}
}

/* A list with no records yet: a compact, explained note instead of a large empty search. */
.empty-note {
	display: grid;
	gap: 4px;
	max-width: 760px;
	margin: 8px 0 24px;
	padding: 16px 20px;
	border: 1px solid #a68a5b40;
	border-left: 3px solid #a68a5b;
	border-radius: 4px;
	background: linear-gradient(110deg, #1d1719, #111113);
}
.empty-note strong {
	font:
		400 19px/1.3 Georgia,
		serif;
	color: #f0d7ae;
}
.empty-note p {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: #cfc7bb;
}

/* Armory: character sheet, equipment slots, BiS lists, guides and officer reviews. */
body[data-page='/armeria'] {
	--section-art: url('assets/art/war-room.webp');
}
body[data-page='/armeria'] main h2,
body[data-page='/armeria'] main h3 {
	font-family: Georgia, serif;
	font-weight: 400;
}
.armory-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	gap: 12px 24px;
	margin: 28px 0 16px;
}
.armory-back {
	color: #e3c08f;
	font-weight: 600;
	text-decoration: none;
}
.armory-back:hover {
	text-decoration: underline;
}
.armory-switch {
	display: grid;
	gap: 6px;
	min-width: min(100%, 320px);
	font-size: 13px;
	color: #b8b2ad;
}
.armory-head {
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 24px;
	padding: clamp(20px, 3vw, 32px);
	border: 1px solid #a68a5b70;
	border-radius: 4px;
	overflow: hidden;
	background: #111113;
}
.armory-head::before,
.armory-head::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
}
.armory-head::before {
	z-index: -2;
	background: var(--section-art) center 35% / cover;
	opacity: 0.55;
}
.armory-head::after {
	background:
		linear-gradient(90deg, #0b0b0df5 30%, #0b0b0dcc 65%, #0b0b0d88),
		radial-gradient(
			ellipse at 8% 50%,
			color-mix(in srgb, var(--class-color, #a68a5b) 22%, transparent),
			transparent 60%
		);
}
.armory-crest {
	display: grid;
	place-items: center;
	width: 88px;
	height: 88px;
	border: 1px solid color-mix(in srgb, var(--class-color, #a68a5b) 70%, #a68a5b);
	border-radius: 6px;
	background: #0b0b0d;
	box-shadow: 0 0 28px color-mix(in srgb, var(--class-color, #a68a5b) 25%, transparent);
}
.armory-crest img {
	width: 64px;
	height: 64px;
	border-radius: 4px;
}
.armory-identity h1 {
	margin: 6px 0 4px;
	font-size: clamp(32px, 4vw, 48px);
	line-height: 1.1;
}
.armory-identity p {
	margin: 2px 0;
	color: #ddd6cb;
}
.armory-line {
	font-size: 17px;
	color: var(--class-color, #f3e6cf) !important;
}
.armory-meta {
	font-size: 15px;
}
.armory-owner {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px !important;
	font-size: 14px;
	color: #b8b2ad !important;
}
.armory-owner svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: #e3c08f;
	stroke-width: 1.8;
}
.armory-badges {
	display: grid;
	justify-items: end;
	gap: 8px;
	align-self: start;
}
.armory-badges small {
	color: #9a948c;
	font-size: 12px;
	text-align: right;
}
.armory-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 22px 0;
}
.armory-tabs button {
	min-height: 44px;
	padding: 9px 20px;
	border: 1px solid #a68a5b45;
	border-radius: 999px;
	background: #141215;
	box-shadow: none;
	color: #d7cfc3;
	font-size: 14px;
	font-weight: 600;
}
.armory-tabs button[aria-pressed='true'] {
	border-color: #e1bf8a;
	background: linear-gradient(135deg, #6e0f1d, #3a141b);
	color: #fff1d7;
}
.armory-body {
	min-height: 240px;
}
.armory-summary {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: 20px;
	align-items: start;
	margin-bottom: 24px;
}
.armory-facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	margin: 0;
	border: 1px solid #a68a5b40;
	border-radius: 4px;
	overflow: hidden;
	background: #a68a5b26;
}
.armory-facts > div {
	padding: 12px 16px;
	background: #121113;
}
.armory-facts dt {
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #cdb48c;
}
.armory-facts dd {
	margin: 2px 0 0;
	font-size: 15px;
	color: #f3e6cf;
}
.armory-facts .muted,
.guide-provider em {
	color: #8f877d;
	font-style: normal;
}
.armory-form h2 {
	margin-top: 0;
}
.armory-check {
	display: flex !important;
	align-items: center;
	gap: 8px;
	min-height: 44px;
}
/* Equipment and BiS slots share the framed two-column layout. */
.gear-grid,
.bis-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-bottom: 20px;
}
.gear-slot,
.bis-slot {
	border: 1px solid #a68a5b38;
	border-radius: 4px;
	background: linear-gradient(110deg, #171416, #101012);
}
.gear-slot {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 64px;
	padding: 10px 14px;
}
.gear-slot strong,
.bis-slot h3 {
	color: #f3e6cf;
	font-size: 15px;
}
.gear-slot small {
	display: block;
	color: #8f877d;
	font-size: 13px;
}
.gear-icon {
	display: grid;
	flex: 0 0 40px;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid #a68a5b40;
	border-radius: 4px;
	background: #0b0b0d;
}
.gear-icon svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: #8f877d;
	stroke-width: 1.5;
	stroke-linejoin: round;
}
.gear-item {
	display: block;
	color: #f3e6cf;
}
.quality-uncommon .gear-item {
	color: #4fd06b;
}
.quality-rare .gear-item {
	color: #3d9bff;
}
.quality-epic .gear-item {
	color: #b46cff;
}
.quality-legendary .gear-item {
	color: #ff9a3d;
}
.bis-lists {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 18px;
}
.bis-lists button[aria-pressed='true'] {
	border-color: #e1bf8a;
	background: #643345;
	color: #fff;
}
.bis-head {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}
.bis-head h2 {
	margin: 0;
}
.bis-head p {
	margin: 4px 0 0;
	font-size: 14px;
}
.bis-slot {
	padding: 12px 14px;
}
.bis-slot header {
	display: flex;
	align-items: center;
	gap: 12px;
}
.bis-slot h3 {
	flex: 1;
	margin: 0;
	font-family: inherit !important;
	font-weight: 650 !important;
}
.bis-count {
	font-size: 12px;
	color: #8f877d;
}
.bis-slot ul {
	display: grid;
	gap: 8px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}
.bis-entry {
	padding: 10px 12px;
	border: 1px solid #ffffff10;
	border-radius: 4px;
	background: #0d0c0f;
}
.bis-entry.is-primary {
	border-color: #a68a5b70;
	background: linear-gradient(110deg, #2a1418, #120d10);
}
.bis-entry-main {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
.bis-entry-main strong {
	color: #f3e6cf;
	font-size: 15px;
}
.bis-entry small {
	display: block;
	margin-top: 4px;
	color: #b8b2ad;
	font-size: 13px;
}
.bis-badge {
	padding: 2px 7px;
	border-radius: 3px;
	background: #e1bf8a;
	color: #1a1214;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.04em;
}
.bis-badge.alt {
	background: #2a2729;
	color: #cfc7bb;
}
.bis-priority {
	color: #e3c08f;
	font-size: 12px;
	font-weight: 700;
}
.bis-notes {
	margin: 6px 0 0;
	font-size: 13px;
}
.bis-notes span {
	color: #cdb48c;
}
.bis-entry .actions {
	margin-top: 8px;
	gap: 6px;
}
.bis-entry .actions button {
	min-height: 36px;
	padding: 6px 12px;
	font-size: 13px;
}
.armory-new-list {
	margin-top: 20px;
}
/* External guides: one framed card per provider, sections as rows. */
.guide-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: 14px;
	margin: 18px 0;
}
.guide-provider {
	border: 1px solid #a68a5b45;
	border-radius: 4px;
	background: linear-gradient(145deg, #1b1718, #101012);
}
.guide-provider header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	border-bottom: 1px solid #a68a5b38;
}
.guide-provider header h3 {
	margin: 0;
	color: #f0d7ae;
}
.guide-provider header a {
	color: #e3c08f;
	font-size: 13px;
}
.guide-provider ul {
	margin: 0;
	padding: 6px 16px 12px;
	list-style: none;
}
.guide-provider li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px 12px;
	padding: 9px 0;
	border-bottom: 1px solid #ffffff0a;
	font-size: 14px;
}
.guide-provider li:last-child {
	border-bottom: 0;
}
.guide-link {
	padding: 4px 10px;
	border: 1px solid #a68a5b70;
	border-radius: 999px;
	color: #fff1d7;
	font-size: 13px;
	text-decoration: none;
}
.guide-link:hover {
	background: #6e0f1d;
}
.review-layout {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}
.review-list {
	display: grid;
	gap: 10px;
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
}
.review-list .card {
	padding: 14px 16px;
}
.review-list p {
	margin: 8px 0;
}
.review-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.review-head small,
.review-list small {
	color: #9a948c;
	font-size: 13px;
}
.armory-link {
	color: #e3c08f;
	font-size: 13px;
}
.guide-admin-providers {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: 10px;
}
.guide-admin-providers label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 14px 16px;
}
.guide-admin-providers small {
	display: block;
	color: #9a948c;
}
@media (max-width: 900px) {
	.armory-summary,
	.review-layout {
		grid-template-columns: minmax(0, 1fr);
	}
}
@media (max-width: 700px) {
	.armory-head {
		grid-template-columns: auto minmax(0, 1fr);
		gap: 16px;
	}
	.armory-badges {
		grid-column: 1 / -1;
		grid-auto-flow: column;
		justify-content: start;
		align-items: center;
	}
	.armory-crest {
		width: 64px;
		height: 64px;
	}
	.armory-crest img {
		width: 48px;
		height: 48px;
	}
	.gear-grid,
	.bis-grid,
	.armory-facts {
		grid-template-columns: minmax(0, 1fr);
	}
	.armory-tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: thin;
		padding-bottom: 4px;
	}
	.armory-tabs button {
		flex: 0 0 auto;
	}
}
/* The site-wide header rule must not style card headers inside the armory. */
.bis-slot > header,
.guide-provider > header {
	padding: 0;
	border-bottom: 0;
	background: none;
	gap: 12px;
}
.guide-provider > header {
	padding: 14px 16px;
	border-bottom: 1px solid #a68a5b38;
}
.bis-grid {
	align-items: start;
}
.armory-tabs button {
	width: auto;
}
.armory-owner {
	display: block;
}
.armory-owner svg {
	display: inline-block;
	margin-right: 6px;
	vertical-align: -3px;
}
body[data-page='/armeria'] .notice {
	max-width: 80ch;
	padding: 10px 14px;
	border-left: 2px solid #a68a5b;
	background: #a68a5b0d;
	color: #d7cfc3;
	font-size: 14px;
}
body[data-page='/armeria'] label {
	font-size: 14px;
	color: #ddd6cb;
}
body[data-page='/armeria'] .form {
	max-width: none;
}
body[data-page='/armeria'] details:not(.calendar-disclosure) > summary {
	color: #ecd2a8;
	font-size: 15px;
	font-weight: 600;
}
.armory-tabs {
	flex-direction: row;
}

/* Profile hub: hero with the selected character, quick stats and one-click sections. */
body[data-page='/perfil'] .hub-body h2,
body[data-page='/perfil'] .hub-body h3 {
	font-family: Georgia, serif;
	font-weight: 400;
}
.hub-hero {
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 24px;
	margin: 28px 0 16px;
	padding: clamp(22px, 3vw, 36px);
	border: 1px solid #a68a5b70;
	border-radius: 4px;
	overflow: hidden;
	background: #111113;
}
.hub-hero::before,
.hub-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.hub-hero::before {
	z-index: -2;
	background: url('assets/art/campfire.webp') center 40% / cover;
	opacity: 0.6;
	transform: scale(1.04);
	animation: hub-drift 18s ease-in-out infinite alternate;
}
.hub-hero::after {
	z-index: -1;
	background:
		linear-gradient(90deg, #0b0b0df5 25%, #0b0b0dc4 60%, #0b0b0d80),
		radial-gradient(
			ellipse at 6% 50%,
			color-mix(in srgb, var(--class-color, #a68a5b) 26%, transparent),
			transparent 55%
		);
}
@keyframes hub-drift {
	to {
		transform: scale(1.1) translateX(-2%);
	}
}
.hub-hero-main {
	display: flex;
	align-items: center;
	gap: 20px;
	min-width: 0;
}
.hub-crest {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 84px;
	height: 84px;
	border: 1px solid color-mix(in srgb, var(--class-color, #a68a5b) 70%, #a68a5b);
	border-radius: 6px;
	background: #0b0b0d;
	box-shadow: 0 0 30px color-mix(in srgb, var(--class-color, #a68a5b) 30%, transparent);
}
.hub-crest img {
	width: 60px;
	height: 60px;
	border-radius: 4px;
}
.hub-crest .hub-icon {
	width: 36px;
	height: 36px;
}
.hub-hero h1 {
	margin: 6px 0 2px;
	font-size: clamp(30px, 4vw, 46px);
	line-height: 1.1;
	overflow-wrap: anywhere;
}
.hub-hero-line {
	margin: 0;
	font-size: 16px;
	color: var(--class-color, #ddd6cb);
}
.hub-stats {
	display: flex;
	gap: 8px;
	margin: 0;
}
.hub-stats > div {
	min-width: 104px;
	padding: 10px 14px;
	border: 1px solid #a68a5b40;
	border-radius: 4px;
	background: #0b0b0dcc;
	backdrop-filter: blur(4px);
}
.hub-stats dt {
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #cdb48c;
}
.hub-stats dd {
	margin: 2px 0 0;
	font:
		400 22px/1.2 Georgia,
		serif;
	color: #fff1d7;
}
.hub-stats small {
	font-size: 11px;
	color: #9a948c;
}
.hub-logout {
	align-self: start;
	min-height: 38px;
	padding: 7px 14px;
	font-size: 13px;
}
.hub-chars {
	display: flex;
	gap: 8px;
	margin-bottom: 14px;
	padding-bottom: 4px;
	overflow-x: auto;
	scrollbar-width: thin;
}
.hub-chars .hub-char {
	flex: 0 0 auto;
	gap: 8px;
	min-height: 40px;
	padding: 6px 14px 6px 6px;
	border: 1px solid color-mix(in srgb, var(--class-color, #a68a5b) 40%, #302a29);
	border-radius: 999px;
	background: #121113;
	box-shadow: none;
	color: #ddd6cb;
	font-size: 14px;
}
.hub-chars .hub-char::before,
.hub-segment button::before {
	display: none;
}
.hub-chars .hub-char img {
	width: 26px;
	height: 26px;
	border-radius: 50%;
}
.hub-chars .hub-char small {
	color: #e3c08f;
	font-size: 11px;
}
.hub-chars .hub-char[aria-pressed='true'] {
	border-color: var(--class-color, #e1bf8a);
	background: color-mix(in srgb, var(--class-color, #a68a5b) 18%, #121113);
	color: #fff;
}
/* Section menu: sticky, icon + label, active section underlined in crimson. */
.hub-nav {
	position: sticky;
	top: 0;
	z-index: 5;
	display: flex;
	flex-direction: row;
	gap: 4px;
	margin: 0 0 24px;
	padding: 6px;
	border: 1px solid #a68a5b45;
	border-radius: 4px;
	background: #0e0d10f2;
	backdrop-filter: blur(6px);
	overflow-x: auto;
	scrollbar-width: none;
}
.hub-nav a {
	position: relative;
	display: inline-flex;
	flex: 1 0 auto;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 46px;
	padding: 8px 16px;
	border-radius: 3px;
	color: #c9c2b8;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition:
		background 0.2s ease,
		color 0.2s ease;
}
.hub-nav a::after {
	content: '';
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 4px;
	height: 2px;
	border-radius: 2px;
	background: #c25a60;
	transform: scaleX(0);
	transition: transform 0.25s ease;
}
.hub-nav a:hover {
	background: #a68a5b14;
	color: #fff3df;
}
.hub-nav a[aria-current='page'] {
	background: linear-gradient(135deg, #6e0f1d99, #28171c);
	color: #fff1d7;
}
.hub-nav a[aria-current='page']::after {
	transform: scaleX(1);
}
.hub-nav a:focus-visible {
	outline: 2px solid #e1bf8a;
	outline-offset: 2px;
}
.hub-icon {
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	fill: none;
	stroke: #c9ac81;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.hub-nav a[aria-current='page'] .hub-icon {
	stroke: #ed8f90;
}
.hub-nav b {
	min-width: 22px;
	padding: 1px 6px;
	border-radius: 999px;
	background: #6e0f1d;
	color: #fff1d7;
	font-size: 11px;
	text-align: center;
}
.hub-body {
	min-height: 320px;
	transition:
		opacity 0.28s ease,
		transform 0.28s ease;
}
.hub-body.is-entering {
	opacity: 0;
	transform: translateY(8px);
}
.hub-skeleton {
	display: grid;
	gap: 12px;
}
.hub-skeleton span:not(.visually-hidden) {
	height: 72px;
	border-radius: 4px;
	background: linear-gradient(90deg, #151316 25%, #221c1f 50%, #151316 75%);
	background-size: 200% 100%;
	animation: hub-shimmer 1.2s linear infinite;
}
@keyframes hub-shimmer {
	to {
		background-position: -200% 0;
	}
}
/* Armory overview: equipment mosaic plus BiS, guides and sheet cards. */
.hub-armory {
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
	gap: 20px;
	align-items: start;
}
.hub-armory-gear > header,
.hub-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
	padding: 0;
	border: 0;
	background: none;
}
.hub-armory-gear h2,
.hub-section-head h2 {
	margin: 0;
}
.hub-section-head p {
	margin: 4px 0 0;
}
.hub-armory-gear > header a {
	color: #e3c08f;
	font-weight: 600;
	text-decoration: none;
}
.hub-armory-side {
	display: grid;
	gap: 12px;
}
.hub-card {
	display: grid;
	gap: 4px;
	padding: 18px 20px;
	border: 1px solid #a68a5b45;
	border-radius: 4px;
	background: linear-gradient(145deg, #1d1719, #111113);
	color: #ddd6cb;
	text-decoration: none;
	transition:
		transform 0.2s ease,
		border-color 0.2s ease,
		box-shadow 0.2s ease;
}
.hub-card:hover {
	transform: translateY(-3px);
	border-color: #d5b483;
	box-shadow: 0 10px 28px #0006;
}
.hub-card.is-pending {
	border-left: 3px solid #c25a60;
}
.hub-card-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #cdb48c;
}
.hub-card strong {
	font:
		400 26px/1.2 Georgia,
		serif;
	color: #fff1d7;
}
.hub-card > span:not(.hub-card-label):not(.hub-progress) {
	font-size: 14px;
	color: #b8b2ad;
}
.hub-card em {
	margin-top: 6px;
	font-size: 14px;
	font-style: normal;
	font-weight: 600;
	color: #e3c08f;
}
.hub-progress {
	display: block;
	height: 6px;
	margin-top: 6px;
	border-radius: 999px;
	background: #2a2427;
	overflow: hidden;
}
.hub-progress i {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, #8f1f2d, #e1bf8a);
	transition: width 0.6s ease;
}
.hub-hint {
	margin: 12px 0 0;
	font-size: 14px;
	color: #9a948c;
}
.hub-empty {
	padding: 36px;
	border: 1px dashed #a68a5b60;
	border-radius: 4px;
	text-align: center;
	background: radial-gradient(ellipse at 50% 0%, #6e0f1d30, transparent 70%), #111113;
}
/* Character cards. */
.hub-char-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: 12px;
	margin-bottom: 20px;
}
.hub-char-card {
	padding: 16px;
	border: 1px solid color-mix(in srgb, var(--class-color, #a68a5b) 45%, #302a29);
	border-radius: 4px;
	background: linear-gradient(
		120deg,
		color-mix(in srgb, var(--class-color, #a68a5b) 12%, #151214),
		#111113 75%
	);
	box-shadow: inset 3px 0 var(--class-color, #a68a5b);
	transition: transform 0.2s ease;
}
.hub-char-card:hover {
	transform: translateY(-2px);
}
.hub-char-top {
	display: flex;
	align-items: center;
	gap: 12px;
}
.hub-char-top img {
	width: 46px;
	height: 46px;
	border-radius: 6px;
}
.hub-char-top > div {
	flex: 1;
	min-width: 0;
}
.hub-char-top h3 {
	margin: 0;
	font-size: 19px;
	color: var(--class-color, #f3e6cf);
}
.hub-char-top p {
	margin: 2px 0 0;
	font-size: 14px;
}
.hub-char-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 14px;
}
.hub-char-actions > * {
	min-height: 36px;
	padding: 6px 12px;
	font-size: 13px;
}
.hub-new > summary {
	color: #ecd2a8;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}
.hub-new[open] > summary {
	display: none;
}
.hub-new h3 {
	margin-top: 0;
}
.hub-segment {
	display: inline-flex;
	gap: 4px;
	margin-bottom: 18px;
	padding: 4px;
	border: 1px solid #a68a5b45;
	border-radius: 999px;
	background: #121113;
}
.hub-segment button {
	min-height: 38px;
	padding: 6px 16px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	box-shadow: none;
	color: #cfc7bb;
	font-size: 14px;
}
.hub-segment button[aria-pressed='true'] {
	background: linear-gradient(135deg, #6e0f1d, #3a141b);
	color: #fff1d7;
}
@media (max-width: 1100px) {
	.hub-hero {
		grid-template-columns: minmax(0, 1fr) auto;
	}
	.hub-stats {
		grid-column: 1 / -1;
		grid-row: 2;
	}
	.hub-armory {
		grid-template-columns: minmax(0, 1fr);
	}
	.hub-armory-side {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	}
}
@media (max-width: 600px) {
	.hub-hero {
		gap: 16px;
		padding: 18px;
	}
	.hub-crest {
		width: 60px;
		height: 60px;
	}
	.hub-crest img {
		width: 44px;
		height: 44px;
	}
	.hub-stats > div {
		flex: 1;
		min-width: 0;
		padding: 8px 10px;
	}
	.hub-stats dd {
		font-size: 19px;
	}
	.hub-nav {
		margin-inline: calc(-1 * clamp(18px, 4vw, 64px));
		border-inline: 0;
		border-radius: 0;
	}
	.hub-nav a {
		flex: 0 0 auto;
		padding: 8px 12px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.hub-hero::before,
	.hub-skeleton span {
		animation: none;
	}
	.hub-body,
	.hub-card,
	.hub-char-card,
	.hub-nav a::after,
	.hub-progress i {
		transition: none;
	}
	.hub-card:hover,
	.hub-char-card:hover {
		transform: none;
	}
}
/* Overflowing centred flex items become unreachable; the legacy nav rule centres them. */
.hub-nav {
	justify-content: flex-start;
}
.hub-hero h1 {
	overflow-wrap: break-word;
}
@media (max-width: 600px) {
	.hub-nav {
		width: calc(100% + 2 * clamp(18px, 4vw, 64px));
		box-sizing: border-box;
	}
	.hub-hero {
		grid-template-columns: minmax(0, 1fr);
	}
	.hub-stats {
		grid-row: auto;
	}
	.hub-logout {
		position: absolute;
		top: 12px;
		right: 12px;
		min-height: 32px;
		padding: 5px 10px;
		font-size: 12px;
	}
	.hub-hero-main {
		align-items: flex-start;
		padding-top: 28px;
	}
	.hub-hero h1 {
		font-size: 30px;
	}
}

/* Paper doll: item columns around the character, weapons below, stats at the foot. */
.paperdoll {
	position: relative;
	isolation: isolate;
	padding: clamp(14px, 2vw, 24px);
	border: 1px solid #a68a5b55;
	border-radius: 4px;
	overflow: hidden;
	background:
		radial-gradient(ellipse at 50% 38%, #3a141b66, transparent 60%),
		linear-gradient(#141215, #0c0b0d);
}
.doll-summary {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 32px;
	margin: 0 0 18px;
	padding: 0 0 14px;
	border: 0;
	border-bottom: 1px solid #a68a5b30;
	background: none;
}
.doll-summary span {
	display: grid;
	justify-items: center;
}
.doll-summary small {
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #cdb48c;
}
.doll-summary strong {
	font:
		400 22px/1.2 Georgia,
		serif;
	color: #fff1d7;
}
.doll-stage {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(200px, 1.1fr) minmax(0, 1fr);
	gap: 16px;
	align-items: stretch;
}
.doll-column {
	display: grid;
	align-content: start;
	gap: 8px;
}
.doll-slot {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 52px;
	min-width: 0;
	color: inherit;
	text-decoration: none;
}
.doll-right .doll-slot,
.doll-weapons .side-right {
	flex-direction: row-reverse;
	text-align: right;
}
.doll-icon {
	display: grid;
	flex: 0 0 46px;
	place-items: center;
	width: 46px;
	height: 46px;
	border: 1px solid #a68a5b55;
	border-radius: 4px;
	background: #0b0b0d;
	box-shadow: inset 0 0 0 1px #000;
	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease;
}
.doll-icon img {
	width: 44px;
	height: 44px;
	border-radius: 3px;
}
.doll-icon svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: #5e574f;
	stroke-width: 1.5;
	stroke-linejoin: round;
}
a.doll-slot:hover .doll-icon {
	border-color: #e1bf8a;
	box-shadow: 0 0 14px #a68a5b40;
}
.doll-text {
	display: grid;
	min-width: 0;
	line-height: 1.3;
}
.doll-text strong {
	overflow: hidden;
	font-size: 14px;
	font-weight: 600;
	color: #f3e6cf;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.doll-slot-name {
	font-size: 13px;
	color: #b8b2ad;
}
.doll-text small {
	font-size: 12px;
	color: #7f786f;
}
.doll-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 8px;
}
.doll-right .doll-meta,
.doll-weapons .side-right .doll-meta {
	justify-content: flex-end;
}
.doll-meta b {
	font-size: 12px;
	color: #e3c08f;
}
.doll-meta small {
	color: #9fbf8f;
}
/* Item quality only tints the frame and the name, never the whole card. */
.quality-uncommon .doll-icon {
	border-color: #4fd06b99;
}
.quality-rare .doll-icon {
	border-color: #3d9bff99;
}
.quality-epic .doll-icon {
	border-color: #b46cff99;
}
.quality-legendary .doll-icon {
	border-color: #ff9a3d99;
}
.quality-uncommon .doll-text strong {
	color: #8fdc9f;
}
.quality-rare .doll-text strong {
	color: #8cc2ff;
}
.quality-epic .doll-text strong {
	color: #cfa2ff;
}
.quality-legendary .doll-text strong {
	color: #ffbe7d;
}
.doll-figure {
	position: relative;
	display: grid;
	place-items: center;
	align-content: center;
	gap: 14px;
	min-height: 420px;
	margin: 0;
	padding: 20px;
	border: 1px solid #a68a5b30;
	border-radius: 4px;
	overflow: hidden;
	background:
		radial-gradient(
			ellipse at 50% 45%,
			color-mix(in srgb, var(--class-color, #a68a5b) 22%, transparent),
			transparent 65%
		),
		#0b0a0c;
}
.doll-portrait {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.doll-placeholder {
	position: relative;
	display: grid;
	place-items: center;
	width: 180px;
	height: 300px;
}
.doll-silhouette {
	position: absolute;
	inset: 0;
	border-radius: 90px 90px 30px 30px;
	background:
		radial-gradient(circle at 50% 18%, #2a2427 0 34px, transparent 35px),
		linear-gradient(#211c1f, #141214);
	clip-path: polygon(32% 28%, 68% 28%, 86% 44%, 78% 100%, 22% 100%, 14% 44%);
	opacity: 0.85;
}
.doll-placeholder img {
	position: relative;
	z-index: 1;
	width: 64px;
	height: 64px;
	margin-top: 18px;
	border: 1px solid color-mix(in srgb, var(--class-color, #a68a5b) 70%, #a68a5b);
	border-radius: 6px;
	box-shadow: 0 0 26px color-mix(in srgb, var(--class-color, #a68a5b) 40%, transparent);
}
.doll-figure figcaption {
	max-width: 30ch;
	font-size: 13px;
	line-height: 1.5;
	text-align: center;
	color: #8f877d;
}
.doll-weapons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px 32px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid #a68a5b30;
}
.doll-weapons .doll-slot {
	flex: 0 1 260px;
}
.doll-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	margin: 18px 0 0;
	border: 1px solid #a68a5b30;
	border-radius: 4px;
	overflow: hidden;
	background: #a68a5b26;
}
.doll-stats > div {
	padding: 10px 14px;
	background: #111013;
}
.doll-stats dt {
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #cdb48c;
}
.doll-stats dd {
	margin: 2px 0 0;
	font:
		400 20px/1.2 Georgia,
		serif;
	color: #f3e6cf;
}
/* Profile armory: doll first, summary cards in a row underneath. */
.hub-armory {
	grid-template-columns: minmax(0, 1fr);
}
.hub-armory-side {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) {
	.doll-stage {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
	.doll-figure {
		grid-column: 1 / -1;
		grid-row: 1;
		min-height: 260px;
	}
	.doll-placeholder {
		width: 140px;
		height: 220px;
	}
	.doll-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.hub-armory-side {
		grid-template-columns: minmax(0, 1fr);
	}
}
@media (max-width: 480px) {
	.doll-stage {
		gap: 10px;
	}
	.doll-icon {
		flex-basis: 40px;
		width: 40px;
		height: 40px;
	}
	.doll-text strong,
	.doll-slot-name {
		font-size: 12px;
	}
	.doll-weapons .doll-slot {
		flex-basis: 100%;
	}
}

/* Profile hero: framed, class-lit, with glass stats and an attendance ring. */
.hub-hero {
	min-height: 210px;
	border-color: #a68a5b80;
	box-shadow:
		0 18px 40px #0007,
		inset 0 1px #f0d7ae14;
}
.hub-hero::before {
	opacity: 0.75;
	background-position: 70% 35%;
}
.hub-hero::after {
	background:
		linear-gradient(90deg, #0b0b0df7 20%, #0b0b0dc0 55%, #0b0b0d55),
		radial-gradient(
			ellipse at 8% 50%,
			color-mix(in srgb, var(--class-color, #a68a5b) 34%, transparent),
			transparent 50%
		),
		linear-gradient(0deg, #0b0b0d, transparent 40%);
}
.hub-hero-frame {
	position: absolute;
	inset: 6px;
	border: 1px solid #a68a5b30;
	pointer-events: none;
}
.hub-hero-frame .frame-corner {
	position: absolute;
}
.hub-hero > :not(.hub-hero-frame) {
	position: relative;
}
.hub-crest {
	position: relative;
	width: 104px;
	height: 104px;
	border-radius: 50%;
	border-color: #e1bf8a;
	background: radial-gradient(circle, #1d1719, #0b0b0d 70%);
}
.hub-crest-ring {
	position: absolute;
	inset: -7px;
	border: 1px dashed color-mix(in srgb, var(--class-color, #a68a5b) 70%, #e1bf8a);
	border-radius: 50%;
	animation: hub-spin 40s linear infinite;
}
@keyframes hub-spin {
	to {
		transform: rotate(360deg);
	}
}
.hub-crest img {
	width: 72px;
	height: 72px;
	border-radius: 50%;
}
.hub-crest-tag {
	position: absolute;
	bottom: -10px;
	padding: 2px 10px;
	border: 1px solid #e1bf8a;
	border-radius: 999px;
	background: #6e0f1d;
	color: #fff1d7;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.hub-hero h1 {
	font-size: clamp(34px, 4.6vw, 56px);
	text-shadow: 0 2px 18px #000;
}
.hub-hero-line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 0;
	color: #ddd6cb;
}
.hub-hero-line strong {
	color: var(--class-color, #f3e6cf);
	font-size: 17px;
}
.hub-hero-line span::before,
.hub-hero-line strong + span::before {
	content: '◆';
	margin: 0 10px;
	font-size: 8px;
	vertical-align: 2px;
	color: #a68a5b;
}
.hub-stats {
	gap: 0;
	align-self: center;
	border: 1px solid #a68a5b45;
	border-radius: 4px;
	background: #0b0b0dbb;
	backdrop-filter: blur(6px);
}
.hub-stats > div {
	position: relative;
	display: grid;
	justify-items: center;
	min-width: 118px;
	padding: 14px 18px;
	border: 0;
	background: none;
	backdrop-filter: none;
	text-align: center;
}
.hub-stats > div + div {
	border-left: 1px solid #a68a5b30;
}
.hub-stats .hub-icon {
	width: 20px;
	height: 20px;
	margin-bottom: 4px;
}
.hub-stats dd {
	font-size: 24px;
}
.hub-ring {
	width: 22px;
	height: 22px;
	margin-bottom: 4px;
	border-radius: 50%;
	background: conic-gradient(#e1bf8a calc(var(--value) * 1%), #2a2427 0);
	mask: radial-gradient(circle, transparent 6px, #000 7px);
}
.hub-logout {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	align-self: start;
	min-height: 34px;
	padding: 6px 12px;
	border: 1px solid #a68a5b45;
	border-radius: 999px;
	background: #0b0b0d99;
	box-shadow: none;
	color: #cfc7bb;
	font-size: 12px;
}
.hub-logout::before {
	display: none;
}
.hub-logout svg {
	width: 15px;
	height: 15px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.hub-logout:not(:disabled):hover {
	border-color: #e1bf8a;
	background: #6e0f1d;
	color: #fff;
}

/* Character card settings menu. */
.hub-char-actions {
	align-items: center;
}
.hub-settings {
	position: relative;
}
.hub-settings > summary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 36px;
	padding: 6px 12px;
	border: 1px solid #a68a5b45;
	border-radius: 4px;
	background: #141215;
	color: #d7cfc3;
	font-size: 13px;
	font-weight: 600;
	list-style: none;
	cursor: pointer;
}
.hub-settings > summary::-webkit-details-marker {
	display: none;
}
.hub-settings > summary svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: #c9ac81;
	stroke-width: 1.6;
	transition: transform 0.3s ease;
}
.hub-settings[open] > summary,
.hub-settings > summary:hover {
	border-color: #e1bf8a;
	color: #fff1d7;
}
.hub-settings[open] > summary svg {
	transform: rotate(60deg);
}
.hub-settings > summary:focus-visible {
	outline: 2px solid #e1bf8a;
	outline-offset: 2px;
}
.hub-menu {
	position: absolute;
	z-index: 10;
	top: calc(100% + 6px);
	left: 0;
	display: grid;
	min-width: 200px;
	padding: 6px;
	border: 1px solid #a68a5b70;
	border-radius: 4px;
	background: #141215;
	box-shadow: 0 14px 32px #000a;
	animation: hub-pop 0.16s ease-out;
}
@keyframes hub-pop {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
}
.hub-menu button {
	justify-content: flex-start;
	min-height: 38px;
	padding: 8px 12px;
	border: 0;
	border-radius: 3px;
	background: none;
	box-shadow: none;
	color: #ddd6cb;
	font-size: 14px;
	font-weight: 500;
	text-align: left;
}
.hub-menu button::before {
	display: none;
}
.hub-menu button:not(:disabled):hover {
	background: #a68a5b1f;
	color: #fff1d7;
	transform: none;
}
.hub-menu button.is-danger {
	color: #f0a3a8;
}
.hub-menu button.is-danger:not(:disabled):hover {
	background: #6e0f1d;
	color: #fff;
}
@media (max-width: 1100px) {
	.hub-stats {
		justify-self: start;
	}
}
@media (max-width: 600px) {
	.hub-crest {
		width: 76px;
		height: 76px;
	}
	.hub-crest img {
		width: 52px;
		height: 52px;
	}
	.hub-stats {
		width: 100%;
	}
	.hub-stats > div {
		flex: 1;
		min-width: 0;
		padding: 10px 6px;
	}
	.hub-logout {
		top: 14px;
		right: 14px;
	}
	.hub-logout span {
		display: none;
	}
}
@media (prefers-reduced-motion: reduce) {
	.hub-crest-ring,
	.hub-menu {
		animation: none;
	}
	.hub-settings > summary svg,
	.doll-icon {
		transition: none;
	}
}

/* The settings menu opens towards the card, never past the screen edge. */
.hub-menu {
	left: auto;
	right: 0;
}
@media (max-width: 600px) {
	.hub-hero > .hub-logout {
		position: absolute;
		top: 14px;
		right: 14px;
	}
	.doll-weapons .side-right {
		flex-direction: row;
		text-align: left;
	}
	.doll-weapons .side-right .doll-meta {
		justify-content: flex-start;
	}
}

/* Raid lineup board: sign-ups pool, groups of five and bench. */
.lineup {
	margin-top: 24px;
	padding: clamp(16px, 2vw, 24px);
	border: 1px solid #a68a5b60;
	border-radius: 4px;
	background:
		radial-gradient(ellipse at 50% 0%, #3a141b55, transparent 60%),
		linear-gradient(#151215, #0d0c0e);
}
.lineup-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 0;
	border: 0;
	background: none;
}
.lineup-head h3 {
	margin: 4px 0;
	font:
		400 clamp(24px, 3vw, 32px) Georgia,
		serif;
}
.lineup-head p {
	margin: 0;
	font-size: 14px;
}
.lineup-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}
.lineup-bot {
	padding: 4px 10px;
	border: 1px solid #c25a6080;
	border-radius: 999px;
	color: #f0a3a8;
	font-size: 12px;
}
.lineup-bot.is-ready {
	border-color: #6fbf8a80;
	color: #9fdcaf;
}
.lineup-toolbar {
	position: sticky;
	top: 64px;
	z-index: 4;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 16px 0;
	padding: 10px 12px;
	border: 1px solid #a68a5b40;
	border-radius: 4px;
	background: #0e0d10f0;
	backdrop-filter: blur(6px);
}
.lineup-toolbar .actions {
	gap: 6px;
}
.lineup-toolbar button {
	min-height: 38px;
	padding: 7px 14px;
	font-size: 13px;
}
.lineup-count {
	font-size: 14px;
	color: #cfc7bb;
}
.lineup-count b {
	color: #f0d7ae;
}
.lineup-board {
	display: grid;
	grid-template-columns: minmax(220px, 1fr) minmax(0, 3fr) minmax(200px, 1fr);
	gap: 14px;
	align-items: start;
}
.lineup-groups {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
	gap: 12px;
}
.lineup-zone {
	border: 1px solid #a68a5b40;
	border-radius: 4px;
	background: #111013;
	transition:
		border-color 0.15s ease,
		box-shadow 0.15s ease;
}
.lineup-zone > header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 12px;
	border: 0;
	border-bottom: 1px solid #a68a5b30;
	background: #a68a5b0d;
}
.lineup-zone h4 {
	margin: 0;
	font:
		400 16px Georgia,
		serif;
	color: #f0d7ae;
}
.lineup-zone > header span {
	font-size: 12px;
	font-weight: 700;
	color: #cdb48c;
}
.lineup-zone.is-full > header span {
	color: #9fdcaf;
}
.lineup-zone.is-bench {
	background: #0f0e11;
}
.lineup-zone.is-over {
	border-color: #e1bf8a;
	box-shadow: 0 0 0 2px #e1bf8a33;
}
.lineup-cards {
	display: grid;
	gap: 6px;
	min-height: 64px;
	padding: 8px;
}
.lineup-empty {
	margin: 0;
	padding: 14px 6px;
	border: 1px dashed #a68a5b40;
	border-radius: 3px;
	font-size: 13px;
	text-align: center;
	color: #7f786f;
}
.lineup-card {
	position: relative;
	display: grid;
	grid-template-columns: auto auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 4px 8px;
	padding: 7px 8px;
	border: 1px solid color-mix(in srgb, var(--class-color, #a68a5b) 40%, #2a2427);
	border-radius: 4px;
	background: linear-gradient(
		100deg,
		color-mix(in srgb, var(--class-color, #a68a5b) 14%, #161316),
		#121013 80%
	);
	box-shadow: inset 3px 0 var(--class-color, #a68a5b);
	cursor: grab;
	user-select: none;
	transition: opacity 0.15s ease;
}
.lineup-card.is-dragging {
	opacity: 0.35;
}
.lineup-card:focus-visible {
	outline: 2px solid #e1bf8a;
	outline-offset: 2px;
}
.lineup-handle {
	display: grid;
	place-items: center;
	width: 22px;
	height: 30px;
	color: #7f786f;
	font-size: 15px;
	touch-action: none;
	cursor: grab;
}
.lineup-card img {
	width: 26px;
	height: 26px;
	border-radius: 4px;
}
.lineup-who {
	display: grid;
	min-width: 0;
	line-height: 1.25;
}
.lineup-who strong {
	overflow: hidden;
	font-size: 14px;
	color: var(--class-color, #f3e6cf);
	text-overflow: ellipsis;
	white-space: nowrap;
}
.lineup-who small {
	overflow: hidden;
	font-size: 12px;
	color: #9a948c;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.lineup-role {
	padding: 2px 7px;
	border-radius: 3px;
	font-size: 11px;
	font-weight: 700;
}
.role-tank {
	background: #2b3a55;
	color: #b9cdf0;
}
.role-healer {
	background: #23422f;
	color: #a9e0bb;
}
.role-dps {
	background: #4a1d25;
	color: #f0b4ba;
}
.lineup-flag,
.lineup-dm {
	grid-column: 3 / -1;
	justify-self: start;
	padding: 1px 7px;
	border-radius: 999px;
	font-size: 11px;
	background: #a68a5b26;
	color: #e3c08f;
}
.lineup-flag.is-muted {
	background: #ffffff0d;
	color: #9a948c;
}
.dm-sent {
	background: #23422f;
	color: #a9e0bb;
}
.dm-failed,
.dm-uncertain {
	background: #4a1d25;
	color: #f0b4ba;
}
.dm-skipped {
	background: #ffffff0d;
	color: #9a948c;
}
.lineup-move {
	position: absolute;
	top: 4px;
	right: 4px;
	margin: 0;
}
.lineup-move select {
	width: 26px;
	min-width: 0;
	height: 26px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 3px;
	background: transparent
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239a948c'%3E%3Ccircle cx='5' cy='12' r='2'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3Ccircle cx='19' cy='12' r='2'/%3E%3C/svg%3E")
		center / 16px no-repeat;
	color: transparent;
	font-size: 14px;
	cursor: pointer;
	appearance: none;
}
.lineup-move select:hover,
.lineup-move select:focus-visible {
	border-color: #a68a5b70;
	outline: none;
}
.lineup-move option {
	color: #f3e6cf;
	background: #141215;
}
.lineup-card .lineup-role {
	margin-right: 26px;
}
.lineup-ghost {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	box-shadow: 0 16px 34px #000c;
	opacity: 0.95;
	pointer-events: none;
	cursor: grabbing;
}
.lineup-attendance {
	margin-top: 18px;
}
.lineup-attendance h4 {
	margin: 0 0 4px;
	font:
		400 20px Georgia,
		serif;
}
.lineup-attendance-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
	gap: 8px;
	margin: 12px 0;
}
.lineup-attendance-list label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 10px;
	border: 1px solid #a68a5b30;
	border-radius: 4px;
	background: #111013;
}
.lineup-attendance-list label span {
	display: grid;
	min-width: 0;
}
.lineup-attendance-list small,
.lineup-attendance-list em {
	font-size: 12px;
	color: #9a948c;
}
.lineup-attendance-list select {
	width: auto;
	min-width: 130px;
}
/* Profile: the player's call-ups. */
.hub-callups {
	margin-bottom: 28px;
}
.hub-callups ul {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.hub-callup {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr) auto;
	align-items: center;
	gap: 14px;
	padding: 12px 16px;
	border: 1px solid #a68a5b38;
	border-radius: 4px;
	background: #121013;
}
.hub-callup.is-upcoming {
	border-color: #a68a5b80;
	background: linear-gradient(110deg, #2a1418, #121013 70%);
	box-shadow: inset 3px 0 #c99a62;
}
.hub-callup.is-removed {
	opacity: 0.7;
}
.hub-callup-slot {
	font:
		400 19px Georgia,
		serif;
	color: #f0d7ae;
}
.hub-callup-main {
	display: grid;
	min-width: 0;
}
.hub-callup-main strong {
	color: #f3e6cf;
}
.hub-callup-main small,
.hub-callup-state {
	font-size: 13px;
	color: #b8b2ad;
}
@media (max-width: 1100px) {
	.lineup-board {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
	.lineup-groups {
		grid-column: 1 / -1;
		grid-row: 1;
	}
}
@media (max-width: 700px) {
	.lineup-toolbar {
		top: 0;
	}
	.lineup-board {
		grid-template-columns: minmax(0, 1fr);
	}
	.lineup-groups {
		grid-row: auto;
	}
	.hub-callup {
		grid-template-columns: minmax(0, 1fr);
		gap: 4px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.lineup-zone,
	.lineup-card {
		transition: none;
	}
}
.lineup-card img {
	pointer-events: none;
	-webkit-user-drag: none;
}
/* Wider groups: sign-ups and bench share the left column. */
.lineup-board {
	grid-template-columns: minmax(230px, 290px) minmax(0, 1fr);
}
.lineup-side {
	display: grid;
	gap: 12px;
	align-content: start;
}
.lineup-groups {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
}
.lineup-flags {
	display: flex;
	flex-wrap: wrap;
	grid-column: 3 / -1;
	gap: 4px;
}
.lineup-flags:empty {
	display: none;
}
.lineup-flags > span {
	grid-column: auto;
}
@media (max-width: 1100px) {
	.lineup-board {
		grid-template-columns: minmax(0, 1fr);
	}
	.lineup-side {
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	}
	.lineup-groups {
		grid-row: auto;
	}
}
.lineup-groups {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 205px), 1fr));
}

/* Lineup cards: one row of handle, class icon, name, role and menu; flags underneath. */
.lineup-card {
	grid-template-columns: auto 28px minmax(0, 1fr) auto auto;
	gap: 4px 8px;
	padding: 8px 6px 8px 8px;
	border-color: color-mix(in srgb, var(--class-color, #a68a5b) 55%, #2a2427);
	background: linear-gradient(
		100deg,
		color-mix(in srgb, var(--class-color, #a68a5b) 20%, #161316),
		#121013 85%
	);
	box-shadow: inset 4px 0 var(--class-color, #a68a5b);
}
.lineup-card:hover {
	border-color: var(--class-color, #a68a5b);
}
.lineup-card img {
	width: 28px;
	height: 28px;
	border: 1px solid color-mix(in srgb, var(--class-color, #a68a5b) 70%, #000);
	border-radius: 5px;
}
.lineup-card .lineup-role {
	margin-right: 0;
	white-space: nowrap;
}
.lineup-move {
	position: static;
	grid-column: 5;
	grid-row: 1;
}
.lineup-flags {
	grid-column: 3 / -1;
}
.role-melee {
	background: #4a1d25;
	color: #f0b4ba;
}
.role-ranged {
	background: #45301a;
	color: #f0cf9a;
}
/* Free places in a group stay visible as drop targets. */
.lineup-free {
	display: grid;
	place-items: center;
	min-height: 46px;
	border: 1px dashed #a68a5b35;
	border-radius: 4px;
	font-size: 12px;
	color: #6f6860;
}
.lineup-zone.is-over .lineup-free:first-of-type {
	border-color: #e1bf8a;
	color: #e1bf8a;
}
.lineup-groups {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}
/* Role counters in the toolbar. */
.lineup-count {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
}
.lineup-chip {
	padding: 3px 9px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
}
/* Buff coverage: raid-wide strip and per-group icons. */
.lineup-buffs {
	margin: 0 0 16px;
	padding: 12px 14px;
	border: 1px solid #a68a5b40;
	border-radius: 4px;
	background: #111013;
}
.lineup-buffs-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 14px;
	margin-bottom: 10px;
}
.lineup-buffs-head h4 {
	margin: 0;
	font:
		400 17px Georgia,
		serif;
	color: #f0d7ae;
}
.lineup-buffs-head .is-ok {
	color: #9fdcaf;
	font-size: 13px;
	font-weight: 700;
}
.lineup-buffs-head .is-warn {
	color: #f0a3a8;
	font-size: 13px;
	font-weight: 700;
}
.lineup-buffs-head small {
	margin-left: auto;
	font-size: 12px;
	color: #8f877d;
	cursor: help;
}
.lineup-buffs-list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.buff-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px 3px 3px;
	border: 1px solid color-mix(in srgb, var(--class-color, #a68a5b) 60%, transparent);
	border-radius: 999px;
	background: color-mix(in srgb, var(--class-color, #a68a5b) 16%, #121013);
	color: #f3e6cf;
	font-size: 13px;
	cursor: help;
}
.buff-chip img {
	width: 22px;
	height: 22px;
	border-radius: 50%;
}
.buff-chip.is-off {
	border-style: dashed;
	border-color: #6f686055;
	background: #121013;
	color: #7f786f;
}
.buff-chip.is-off img {
	filter: grayscale(1);
	opacity: 0.45;
}
.lineup-group-buffs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: 6px 12px;
	border-bottom: 1px solid #a68a5b20;
}
.lineup-group-buffs .buff-chip {
	padding: 2px;
}
.lineup-group-buffs .buff-chip img {
	width: 20px;
	height: 20px;
}
/* Name takes the full first row; role and notices share the second. */
.lineup-card {
	grid-template-columns: auto 28px minmax(0, 1fr) auto;
}
.lineup-move {
	grid-column: 4;
}
.lineup-flags {
	grid-column: 2 / -1;
}
.lineup-noicon {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border: 1px dashed #6f6860;
	border-radius: 5px;
	font-size: 13px;
	color: #8f877d;
}

/* Recruitment by specialization: role groups with spec cards sorted by priority. */
.spec-recruit-group {
	margin-top: 26px;
}
.spec-recruit-group h3 {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid #a68a5b38;
	font:
		400 22px Georgia,
		serif;
	color: #f0d7ae;
}
.spec-recruit-group h3 span {
	padding: 1px 9px;
	border: 1px solid #a68a5b55;
	border-radius: 999px;
	font: 700 12px/1.6 inherit;
	font-family: inherit;
	color: #cdb48c;
}
.spec-recruit-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
	gap: 10px;
}
.spec-recruit-card {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid color-mix(in srgb, var(--class-color, #a68a5b) 45%, #302a29);
	border-radius: 4px;
	background: linear-gradient(
		110deg,
		color-mix(in srgb, var(--class-color, #a68a5b) 16%, #151214),
		#111113 80%
	);
	box-shadow: inset 3px 0 var(--class-color, #a68a5b);
	transition:
		transform 0.18s ease,
		border-color 0.18s ease;
}
.spec-recruit-card:hover {
	transform: translateY(-2px);
	border-color: var(--class-color, #a68a5b);
}
.spec-recruit-card[hidden],
.spec-recruit-group[hidden] {
	display: none;
}
.spec-recruit-icons {
	position: relative;
	width: 44px;
	height: 44px;
}
.spec-recruit-icons img:first-child {
	width: 44px;
	height: 44px;
	border: 1px solid color-mix(in srgb, var(--class-color, #a68a5b) 70%, #000);
	border-radius: 6px;
}
.spec-recruit-icons img:last-child:not(:first-child) {
	position: absolute;
	right: -6px;
	bottom: -6px;
	width: 20px;
	height: 20px;
	border: 1px solid #0b0b0d;
	border-radius: 50%;
}
.spec-recruit-text {
	display: grid;
	min-width: 0;
	line-height: 1.3;
}
.spec-recruit-text h4 {
	margin: 0;
	font-size: 16px;
	font-weight: 650;
	color: var(--class-color, #f3e6cf);
}
.spec-recruit-text small {
	font-size: 13px;
	color: #b8b2ad;
}
.spec-recruit-card .recruit-priority {
	padding: 3px 10px;
	border: 1px solid #a68a5b45;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	color: #cfc7bb;
	white-space: nowrap;
}
.spec-recruit-card.priority-alta .recruit-priority {
	border-color: #e1bf8a;
	background: #6e0f1d;
	color: #fff1d7;
}
.spec-recruit-card.priority-media .recruit-priority {
	border-color: #c99a62;
	color: #f0cf9a;
}
.spec-recruit-card.priority-baja .recruit-priority {
	color: #9a948c;
}
.spec-recruit-card.priority-alta {
	border-color: color-mix(in srgb, var(--class-color, #a68a5b) 80%, #e1bf8a);
	box-shadow:
		inset 3px 0 var(--class-color, #a68a5b),
		0 0 18px color-mix(in srgb, var(--class-color, #a68a5b) 25%, transparent);
}
/* Panel editor: one compact block per class. */
.spec-priority-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
	gap: 12px;
}
.spec-priority-class {
	display: grid;
	gap: 8px;
	padding: 12px;
	border: 1px solid #a68a5b38;
	border-radius: 4px;
	background: #111013;
}
.spec-priority-class h4 {
	margin: 0;
	font:
		400 17px Georgia,
		serif;
	color: #f0d7ae;
}
.spec-priority-class label {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 120px;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 14px;
}
.spec-priority-class select {
	min-width: 0;
	padding: 6px 8px;
}
@media (prefers-reduced-motion: reduce) {
	.spec-recruit-card {
		transition: none;
	}
	.spec-recruit-card:hover {
		transform: none;
	}
}
.spec-priority-class {
	align-content: start;
}
.spec-priority-class label {
	grid-template-columns: minmax(0, 1fr) 108px;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: auto;
}
.spec-priority-class select {
	width: 100%;
	margin: 0;
}

/* ===== Unified profile: slots, wishlist by boss, call-ups, boss plan ===== */
button.doll-slot {
	width: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	font: inherit;
	text-align: left;
	cursor: pointer;
}
.doll-right button.doll-slot,
.doll-weapons button.side-right {
	text-align: right;
}
button.doll-slot::before {
	display: none;
}
button.doll-slot:hover .doll-icon,
button.doll-slot:focus-visible .doll-icon {
	border-color: #e1bf8a;
	box-shadow: 0 0 14px #a68a5b40;
}
button.doll-slot:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 3px;
	border-radius: 4px;
}
.paperdoll.is-target .doll-icon {
	border-style: dashed;
}
.hub-armory-gear > header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 12px;
	padding: 0;
	border: 0;
	background: none;
}
.hub-armory-gear > header h2 {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}
.hub-armory-gear .hub-segment {
	margin: 0;
}
.hub-armory-hint {
	margin: 10px 0 0;
	font-size: 13px;
}
.hub-sheet > summary,
.hub-sheet-edit > summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	cursor: pointer;
	font-weight: 700;
}
.hub-sheet > summary span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.hub-sheet > summary small {
	color: var(--muted);
	font-weight: 400;
}
.hub-sheet .armory-facts {
	margin-top: 12px;
}
.hub-sheet-edit {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid #a68a5b30;
}
.hub-guides h3 {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 0;
}
.hub-guides .guide-grid {
	grid-template-columns: 1fr;
}
.hub-chars {
	align-items: center;
}
.hub-chars-label {
	flex: 0 0 auto;
	color: var(--muted);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}
.hub-chars .hub-char[aria-pressed='true'] {
	border-color: var(--class-color, var(--gold));
	background: color-mix(in srgb, var(--class-color, #a68a5b) 18%, #121113);
	color: #fff;
}
.hub-chars .hub-char small {
	color: #b9ad9a;
	font-size: 11px;
}
.hub-char-card.is-selected {
	outline: 2px solid var(--class-color, var(--gold));
	outline-offset: 2px;
}

/* Slot detail dialog */
.slot-dialog {
	width: min(560px, calc(100vw - 32px));
	max-height: calc(100vh - 48px);
	padding: 22px;
	border: 1px solid #a68a5b70;
	border-radius: 8px;
	background: #131216;
	color: var(--ink);
	box-shadow: 0 24px 60px #000a;
}
.slot-dialog::backdrop {
	background: #000b;
}
.slot-dialog h2 {
	margin: 2px 0 14px;
}
.slot-dialog h3 {
	margin: 0 0 8px;
	font-size: 15px;
}
.slot-dialog section {
	margin-bottom: 14px;
	padding: 12px;
	border: 1px solid #a68a5b30;
	border-radius: 6px;
	background: #0e0d10;
}
.slot-dialog-close {
	float: right;
	margin: -8px -8px 0 0;
}
.slot-dialog-close button {
	min-width: 40px;
	min-height: 40px;
	padding: 0;
	font-size: 22px;
	line-height: 1;
}
.slot-item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
.slot-goals ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.slot-goals li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	padding: 4px 0;
}
.slot-goals small {
	width: 100%;
	color: var(--muted);
}
.slot-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Wishlist by raid and boss */
.wish-counts {
	display: flex;
	gap: 10px;
	margin: 0;
}
.wish-counts div {
	min-width: 76px;
	padding: 8px 12px;
	border: 1px solid #a68a5b40;
	border-radius: 6px;
	background: #111013;
	text-align: center;
}
.wish-counts dt {
	color: var(--muted);
	font-size: 12px;
}
.wish-counts dd {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	color: var(--gold);
}
.raid-tabs {
	display: flex;
	gap: 6px;
	margin: 14px 0 10px;
	padding-bottom: 4px;
	overflow-x: auto;
	border-bottom: 1px solid #a68a5b30;
}
.raid-tabs button {
	flex: 0 0 auto;
	min-height: 40px;
	padding: 8px 16px;
	border: 1px solid transparent;
	border-bottom: 0;
	border-radius: 6px 6px 0 0;
	background: transparent;
	box-shadow: none;
	color: #cfc7bb;
}
.raid-tabs button::before {
	display: none;
}
.raid-tabs button[aria-selected='true'] {
	border-color: #a68a5b60;
	background: #1a171b;
	color: #fff1d7;
	font-weight: 700;
}
.wish-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 14px;
}
.wish-filters .chip {
	min-height: 36px;
	padding: 6px 14px;
	border: 1px solid #a68a5b45;
	border-radius: 999px;
	background: #121113;
	box-shadow: none;
	color: #cfc7bb;
	font-size: 14px;
}
.wish-filters .chip::before {
	display: none;
}
.wish-filters .chip[aria-pressed='true'] {
	border-color: var(--gold);
	background: #2a2116;
	color: #fff1d7;
}
.boss-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
	gap: 14px;
}
.boss-card {
	padding: 14px;
	border: 1px solid #a68a5b40;
	border-radius: 8px;
	background: linear-gradient(180deg, #17151a, #111013);
}
.boss-card > header {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 10px;
	padding: 0;
	border: 0;
	background: none;
}
.boss-card > header img,
.boss-sigil {
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
	border: 1px solid #a68a5b70;
	border-radius: 50%;
	object-fit: cover;
}
.boss-sigil {
	display: grid;
	place-items: center;
	color: var(--gold);
	font-size: 22px;
	background: #0b0b0d;
}
.boss-card h3 {
	margin: 0;
}
.boss-card header small {
	color: var(--muted);
}
.boss-empty {
	margin: 4px 0 10px;
	font-size: 14px;
}
.wish-rows {
	display: grid;
	gap: 8px;
	margin: 0 0 10px;
	padding: 0;
	list-style: none;
}
.wish-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border: 1px solid #2c272c;
	border-left: 3px solid #4a4248;
	border-radius: 6px;
	background: #0f0e11;
}
.wish-row.is-bis {
	border-left-color: var(--gold);
}
.wish-row.is-me-interesa {
	border-left-color: var(--blue);
}
.wish-row.is-pasar {
	opacity: 0.72;
}
.wish-row.is-obtained .wish-row-main strong {
	text-decoration: line-through;
	text-decoration-color: #a68a5b;
}
.wish-row-main {
	display: grid;
	min-width: 0;
}
.wish-row-main strong {
	overflow-wrap: anywhere;
}
.wish-row-main small,
.wish-row-main p {
	margin: 0;
	color: var(--muted);
	font-size: 13px;
}
.wish-states {
	display: inline-flex;
	gap: 2px;
	padding: 2px;
	border: 1px solid #a68a5b40;
	border-radius: 999px;
	background: #121113;
}
.wish-state {
	min-height: 34px;
	padding: 4px 10px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	box-shadow: none;
	color: #bfb6a8;
	font-size: 13px;
	white-space: nowrap;
}
.wish-state::before {
	display: none;
}
.wish-state span {
	margin-right: 4px;
}
.wish-state[aria-pressed='true'] {
	background: linear-gradient(135deg, #6e0f1d, #3a141b);
	color: #fff1d7;
	font-weight: 700;
}
.wish-state[aria-pressed='true'][data-state='BiS'] {
	background: linear-gradient(135deg, #7a5a22, #3d2c12);
}
.wish-more {
	position: relative;
}
.wish-more > summary {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	cursor: pointer;
	list-style: none;
}
.wish-more > summary::-webkit-details-marker {
	display: none;
}
.wish-more .hub-menu {
	right: 0;
	min-width: 210px;
}
.wish-add > summary,
.wish-new-raid > summary {
	cursor: pointer;
	color: var(--gold);
	font-weight: 600;
}
.wish-add form {
	margin-top: 10px;
}
.wish-new-raid {
	margin-top: 16px;
}
@media (max-width: 640px) {
	.wish-row {
		grid-template-columns: minmax(0, 1fr) auto;
	}
	.wish-states {
		grid-column: 1 / -1;
		grid-row: 2;
		justify-self: start;
	}
}

/* Loot council */
.council-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
	gap: 10px;
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}
.council-cards li {
	display: grid;
	justify-items: start;
	gap: 6px;
}
.loot-question > summary {
	cursor: pointer;
	color: var(--gold);
	font-weight: 600;
}
.loot-history {
	margin-top: 22px;
}

/* Player call-ups */
.callup-sync {
	margin: 0 0 10px;
	color: var(--muted);
	font-size: 14px;
}
.callup-sync.is-stale {
	padding: 8px 12px;
	border: 1px solid #d9a05b80;
	border-radius: 6px;
	background: #2a1f12;
	color: #f2d3a6;
}
.callup-help {
	margin-bottom: 16px;
}
.callup-help > summary,
.callup-comp > summary,
.callup-past > summary {
	cursor: pointer;
	color: var(--gold);
	font-weight: 600;
}
.callup-help dl {
	display: grid;
	gap: 4px;
	margin: 10px 0 0;
}
.callup-help dt {
	font-weight: 700;
}
.callup-help dd {
	margin: 0 0 6px;
	color: var(--muted);
}
.callup-list {
	display: grid;
	gap: 14px;
}
.callup-card {
	padding: 16px;
	border: 1px solid #a68a5b40;
	border-left: 4px solid #5d5560;
	border-radius: 8px;
	background: linear-gradient(180deg, #17151a, #111013);
}
.callup-card.is-in {
	border-left-color: var(--green);
}
.callup-card.is-bench {
	border-left-color: var(--gold);
}
.callup-card.is-out {
	border-left-color: var(--red);
}
.callup-card > header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}
.callup-card h3 {
	margin: 2px 0;
}
.callup-when {
	margin: 0;
	color: var(--muted);
}
.callup-summary {
	margin: 12px 0 10px;
	font-size: 17px;
}
.callup-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap: 8px;
	margin: 0 0 12px;
}
.callup-facts div {
	padding: 8px 10px;
	border: 1px solid #2c272c;
	border-radius: 6px;
	background: #0f0e11;
}
.callup-facts dt {
	color: var(--muted);
	font-size: 12px;
}
.callup-facts dd {
	margin: 2px 0 0;
	font-weight: 700;
}
.callup-bosses h4,
.callup-group h4 {
	margin: 0 0 6px;
}
.callup-bosses small {
	color: var(--muted);
	font-weight: 400;
}
.callup-bosses ul {
	display: grid;
	gap: 4px;
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}
.callup-bosses li {
	display: grid;
	grid-template-columns: 26px minmax(0, 1fr) auto;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	border-radius: 6px;
	background: #0f0e11;
}
.boss-state {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: #2a262c;
	font-weight: 700;
}
.callup-bosses .is-in .boss-state {
	background: #1f3a2c;
	color: var(--green);
}
.callup-bosses .is-bench .boss-state {
	background: #3a2f1c;
	color: var(--gold);
}
.callup-groups {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
	gap: 10px;
	margin-top: 10px;
}
.callup-group {
	padding: 10px;
	border: 1px solid #2c272c;
	border-radius: 6px;
	background: #0f0e11;
}
.callup-group.has-self {
	border-color: var(--gold);
}
.callup-group.is-bench {
	border-style: dashed;
}
.callup-group ul {
	display: grid;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.callup-player {
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr) auto;
	align-items: center;
	gap: 6px;
	padding: 3px 6px;
	border-left: 3px solid var(--class-color, #5d5560);
	border-radius: 4px;
	font-size: 14px;
}
.callup-player img {
	width: 20px;
	height: 20px;
}
.callup-player span {
	overflow: hidden;
	color: var(--class-color, inherit);
	text-overflow: ellipsis;
	white-space: nowrap;
}
.callup-player small {
	grid-column: 2 / -1;
	color: var(--muted);
	font-size: 11px;
}
.callup-player.is-self {
	background: #2a2116;
	outline: 1px solid var(--gold);
}
.self-tag {
	padding: 1px 6px;
	border-radius: 999px;
	background: var(--gold);
	color: #1b1408;
	font-size: 11px;
}
.callup-source {
	margin: 8px 0 0;
	font-size: 13px;
}
.callup-past {
	margin-top: 16px;
}
.callup-past .callup-list {
	margin-top: 10px;
}

/* Boss planner (organisers) */
.boss-planner {
	margin: 16px 0;
}
.boss-planner-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
}
.boss-planner-head h4 {
	margin: 0;
}
.boss-planner-head p {
	margin: 4px 0 0;
	color: var(--muted);
	font-size: 14px;
}
.boss-add {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 8px;
	margin: 12px 0;
}
.boss-add label {
	display: grid;
	gap: 4px;
	min-width: min(100%, 240px);
}
.boss-table-wrap {
	overflow-x: auto;
	border: 1px solid #2c272c;
	border-radius: 6px;
}
.boss-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}
.boss-table th,
.boss-table td {
	padding: 6px 8px;
	border-bottom: 1px solid #2c272c;
	text-align: left;
	vertical-align: middle;
}
.boss-table thead th {
	background: #151317;
	white-space: nowrap;
}
.boss-table thead th > span {
	display: block;
}
.boss-table thead th > .boss-col-actions {
	display: flex;
	gap: 8px;
	font-weight: 400;
}
.boss-col-actions .link {
	min-height: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--gold);
	font-size: 12px;
	text-decoration: underline;
}
.boss-col-actions .link::before {
	display: none;
}
.boss-table tbody th {
	border-left: 3px solid var(--class-color, #5d5560);
	font-weight: 600;
	white-space: nowrap;
}
.boss-table tbody th small {
	display: block;
	color: var(--muted);
	font-weight: 400;
}
.boss-cell {
	min-height: 32px;
	padding: 4px 10px;
	border: 1px solid #3a343b;
	border-radius: 999px;
	background: #121113;
	box-shadow: none;
	color: #bfb6a8;
	font-size: 13px;
	white-space: nowrap;
}
.boss-cell::before {
	display: none;
}
.boss-cell span {
	margin-right: 4px;
}
.boss-cell.is-in {
	border-color: #4f8f6c;
	background: #17281f;
	color: #d4f0df;
}
.boss-cell.is-bench {
	border-color: #8f7445;
	background: #2a2116;
	color: #f2dfbd;
}
.hub-armory-side {
	align-content: start;
	align-items: start;
}
.boss-grid {
	grid-template-columns: 1fr;
}
.wish-row {
	grid-template-columns: minmax(180px, 1fr) auto auto;
}
@media (max-width: 640px) {
	.wish-row {
		grid-template-columns: minmax(0, 1fr) auto;
	}
}
.hub-armory-side {
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}
.hub-guides .guide-grid {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
@media (max-width: 900px) {
	.hub-armory-side {
		grid-template-columns: minmax(0, 1fr);
	}
}
.callup-noicon {
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border: 1px solid #5d5560;
	border-radius: 4px;
	color: var(--muted);
	font-size: 11px;
}

/* ===== Guided tour of Mi perfil ===== */
.hub-tour-start {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	min-height: 36px;
	padding: 6px 14px 6px 10px;
	border: 1px solid #a68a5b70;
	border-radius: 999px;
	background: #121113cc;
	box-shadow: none;
	color: #f3e6cf;
	font-size: 13px;
	font-weight: 600;
}
.hub-tour-start::before {
	display: none;
}
.hub-tour-start svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: var(--gold);
	stroke-width: 1.6;
	stroke-linejoin: round;
}
.hub-tour-start:hover,
.hub-tour-start:focus-visible {
	border-color: var(--gold);
	background: #2a2116;
}
.hub-tour-start.is-new {
	position: relative;
}
.hub-tour-start.is-new::after {
	content: '';
	position: absolute;
	top: -3px;
	right: -3px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--gold);
	box-shadow: 0 0 0 0 #d8b98299;
	animation: tour-ping 2.2s ease-out infinite;
}
@keyframes tour-ping {
	70% {
		box-shadow: 0 0 0 10px #d8b98200;
	}
	100% {
		box-shadow: 0 0 0 0 #d8b98200;
	}
}
.tour {
	position: fixed;
	inset: 0;
	z-index: 1000;
	opacity: 0;
	transition: opacity 0.25s ease;
}
.tour.is-on {
	opacity: 1;
}
.tour.is-leaving {
	opacity: 0;
}
.tour-blocker {
	position: absolute;
	inset: 0;
}
.tour-spot {
	position: fixed;
	border: 2px solid var(--gold);
	border-radius: 10px;
	box-shadow:
		0 0 0 9999px #050407c4,
		0 0 26px #d8b98266;
	pointer-events: none;
	transition:
		top 0.45s cubic-bezier(0.22, 1, 0.36, 1),
		left 0.45s cubic-bezier(0.22, 1, 0.36, 1),
		width 0.45s cubic-bezier(0.22, 1, 0.36, 1),
		height 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.tour-pop {
	position: fixed;
	width: min(380px, calc(100vw - 32px));
	padding: 18px 18px 16px;
	border: 1px solid #a68a5b90;
	border-radius: 10px;
	background: #16141bf2;
	backdrop-filter: blur(6px);
	box-shadow: 0 20px 50px #000c;
	color: var(--ink);
	transition:
		top 0.45s cubic-bezier(0.22, 1, 0.36, 1),
		left 0.45s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.2s ease,
		transform 0.2s ease;
}
.tour-pop.is-moving {
	opacity: 0.35;
	transform: scale(0.97);
}
.tour-pop header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}
.tour-count {
	color: var(--gold);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.tour-close {
	min-width: 36px;
	min-height: 36px;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: var(--muted);
	font-size: 22px;
	line-height: 1;
}
.tour-close::before {
	display: none;
}
.tour-pop h2 {
	margin: 4px 0 6px;
	font-size: 22px;
}
.tour-pop p {
	margin: 0 0 12px;
	color: #d9d2c6;
	font-size: 15px;
	line-height: 1.5;
}
.tour-dots {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-bottom: 14px;
}
.tour-dots button {
	width: 10px;
	min-width: 0;
	height: 10px;
	min-height: 0;
	padding: 0;
	border: 1px solid #a68a5b90;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
}
.tour-dots button::before {
	display: none;
}
.tour-dots button[aria-current='step'] {
	width: 22px;
	border-radius: 999px;
	background: var(--gold);
}
.tour-dots button:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
}
.tour-pop footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
.tour-pop footer [data-tour='next'] {
	margin-left: auto;
}
.tour-pop footer button {
	min-height: 38px;
	padding: 6px 14px;
	font-size: 14px;
}
.tour-skip {
	border: 0;
	background: transparent;
	box-shadow: none;
	color: var(--muted);
	text-decoration: underline;
}
.tour-skip::before {
	display: none;
}
.tour-pop[data-dock] {
	right: 12px;
	left: 12px;
	width: auto;
}
.tour-pop[data-dock='bottom'] {
	top: auto !important;
	bottom: 12px;
}
.tour-pop[data-dock='top'] {
	top: 12px;
	bottom: auto;
}
body.tour-open {
	overflow-anchor: none;
}
@media (prefers-reduced-motion: reduce) {
	.tour,
	.tour-spot,
	.tour-pop {
		transition: none;
	}
	.hub-tour-start.is-new::after {
		animation: none;
	}
}
.tour-pop footer {
	flex-wrap: nowrap;
	justify-content: flex-start;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	text-align: left;
}
.tour-pop footer::before,
.tour-pop footer::after {
	display: none;
}
.tour-pop footer {
	row-gap: 8px;
	max-width: none;
}
.doll-portrait.is-class-art {
	width: auto;
	max-width: 100%;
	height: 400px;
	filter: drop-shadow(0 18px 30px #000c);
}
@media (max-width: 900px) {
	.doll-portrait.is-class-art {
		height: 300px;
	}
}
button.doll-slot:hover,
button.doll-slot:focus,
button.doll-slot:active {
	background: transparent;
	box-shadow: none;
	color: inherit;
	transform: none;
}

/* ===== Image loading: page illustration and large images fade in ===== */
:is(.hero, .hub-hero, .page-title)::before {
	transition: opacity 0.6s ease;
}
html:not(.hero-art-ready) :is(.hero, .hub-hero, .page-title)::before {
	opacity: 0;
}
img.fade-in {
	opacity: 0;
	transition: opacity 0.45s ease;
}
img.fade-in.is-loaded {
	opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
	:is(.hero, .hub-hero, .page-title)::before,
	img.fade-in {
		transition: none;
	}
}

/* ===== Motion: illustrations fade in, page entrances and transitions ===== */
.art-fade::before {
	transition: opacity 0.6s ease;
}
.art-pending::before {
	opacity: 0 !important;
}
@keyframes enter-up {
	from {
		opacity: 0;
		translate: 0 22px;
	}
	to {
		opacity: 1;
		translate: 0 0;
	}
}
@keyframes page-enter {
	from {
		opacity: 0;
		translate: 0 14px;
	}
	to {
		opacity: 1;
		translate: 0 0;
	}
}
@keyframes hero-settle {
	from {
		scale: 1.08;
		filter: brightness(0.55);
	}
	to {
		scale: 1;
		filter: brightness(1);
	}
}
@keyframes page-out {
	to {
		opacity: 0;
		translate: 0 -10px;
	}
}
@keyframes page-in {
	from {
		opacity: 0;
		translate: 0 12px;
	}
}
@media (prefers-reduced-motion: no-preference) {
	/* Every page: the content rises softly once it is ready. */
	#content.page-enter {
		animation: page-enter 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
	}
	/* Home sections further down appear while scrolling. */
	.reveal {
		opacity: 0;
		translate: 0 28px;
		transition:
			opacity 0.8s ease,
			translate 0.8s cubic-bezier(0.22, 1, 0.36, 1);
	}
	.reveal.is-visible {
		opacity: 1;
		translate: 0 0;
	}
	/* Changing page: native view transitions keep the header still and
	   cross-fade the rest; other browsers fade the content out. */
	@view-transition {
		navigation: auto;
	}
	body > header {
		view-transition-name: site-header;
	}
	::view-transition-old(root) {
		animation: page-out 0.22s ease both;
	}
	::view-transition-new(root) {
		animation: page-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
	}
	html.page-leaving #content {
		opacity: 0;
		translate: 0 -8px;
		transition:
			opacity 0.18s ease,
			translate 0.18s ease;
	}
}

/* ===== Home: cinematic intro, living hero and dealt cards ===== */
/* Covers the page from the first frame until the intro is built. */
html.intro-pending body::after {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 3000;
	background: #070608;
}
.intro {
	position: fixed;
	inset: 0;
	z-index: 3000;
	display: grid;
	place-items: center;
	cursor: pointer;
	overflow: hidden;
}
.intro-panel {
	position: absolute;
	left: 0;
	right: 0;
	height: 50.5%;
	background: radial-gradient(ellipse at 50% 100%, #1d1015 0%, #070608 70%);
	animation: intro-open 0.95s cubic-bezier(0.76, 0, 0.24, 1) 1.6s forwards;
}
.intro-top {
	top: 0;
}
.intro-bottom {
	bottom: 0;
	background: radial-gradient(ellipse at 50% 0%, #1d1015 0%, #070608 70%);
	--to: 100%;
}
.intro-top {
	--to: -100%;
}
.intro-top::after,
.intro-bottom::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent,
		#e8c98f 30%,
		#fff1d1 50%,
		#e8c98f 70%,
		transparent
	);
	box-shadow: 0 0 18px #e8c98f;
	opacity: 0;
	animation: intro-seam 1.6s ease forwards;
}
.intro-top::after {
	bottom: 0;
}
.intro-bottom::before {
	top: 0;
}
.intro-core {
	position: relative;
	z-index: 1;
	display: grid;
	justify-items: center;
	gap: 14px;
	text-align: center;
	animation: intro-core-out 0.7s cubic-bezier(0.55, 0, 0.75, 0.2) 1.5s forwards;
}
.intro-core img {
	width: min(220px, 46vw);
	height: auto;
	filter: drop-shadow(0 0 30px #c7495f66);
	animation: intro-emblem 1.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.intro-glow {
	position: absolute;
	top: min(110px, 23vw);
	left: 50%;
	width: min(520px, 110vw);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, #e8c98f40 0%, #c7495f22 35%, transparent 65%);
	translate: -50% -50%;
	animation: intro-glow 1.6s ease-out both;
	pointer-events: none;
}
.intro-line {
	width: min(420px, 72vw);
	height: 1px;
	background: linear-gradient(90deg, transparent, #e8c98f, transparent);
	transform-origin: center;
	animation: intro-line 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both;
}
.intro-name {
	margin: 0;
	color: #f3e2c2;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: clamp(18px, 3.4vw, 30px);
	text-transform: uppercase;
	text-shadow: 0 0 24px #e8c98f66;
	animation: intro-name 1s cubic-bezier(0.22, 1, 0.36, 1) 0.55s both;
}
.intro-tag {
	margin: 0;
	color: #b9a789;
	font-size: 12px;
	letter-spacing: 0.4em;
	text-transform: uppercase;
	animation: intro-fade 0.8s ease 0.9s both;
}
.intro.is-skipping .intro-core {
	animation: intro-core-out 0.3s ease forwards;
}
.intro.is-skipping .intro-panel {
	animation: intro-open 0.4s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}
@keyframes intro-emblem {
	from {
		opacity: 0;
		scale: 0.72;
		filter: blur(14px) drop-shadow(0 0 0 #c7495f00);
	}
	60% {
		filter: blur(0) drop-shadow(0 0 46px #e8c98faa);
	}
	to {
		opacity: 1;
		scale: 1;
		filter: blur(0) drop-shadow(0 0 30px #c7495f66);
	}
}
@keyframes intro-glow {
	from {
		opacity: 0;
		scale: 0.4;
	}
	50% {
		opacity: 1;
	}
	to {
		opacity: 0.7;
		scale: 1;
	}
}
@keyframes intro-line {
	from {
		opacity: 0;
		scale: 0 1;
	}
	to {
		opacity: 1;
		scale: 1 1;
	}
}
@keyframes intro-name {
	from {
		opacity: 0;
		letter-spacing: 0.9em;
		filter: blur(6px);
	}
	to {
		opacity: 1;
		letter-spacing: 0.32em;
		filter: blur(0);
	}
}
@keyframes intro-fade {
	from {
		opacity: 0;
		translate: 0 8px;
	}
}
@keyframes intro-seam {
	70% {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@keyframes intro-core-out {
	to {
		opacity: 0;
		scale: 1.18;
		filter: blur(8px);
	}
}
@keyframes intro-open {
	to {
		translate: 0 var(--to);
	}
}

/* Hero keeps its text above the embers layer. */
.hero > .hero-embers {
	position: absolute;
	z-index: 0;
	inset: 0 calc(-1 * clamp(18px, 4vw, 64px));
	width: auto;
	max-width: none;
	overflow: hidden;
	pointer-events: none;
}
.hero > div:not(.hero-embers) {
	position: relative;
	z-index: 1;
}
.hero-embers span {
	position: absolute;
	bottom: -12px;
	left: var(--x);
	width: var(--s);
	height: var(--s);
	border-radius: 50%;
	background: radial-gradient(circle, #ffd9a0 0%, #ff8a4c 45%, transparent 70%);
	box-shadow: 0 0 10px #ff9a5a;
	opacity: 0;
	animation: ember var(--d) linear var(--delay) infinite;
}
@keyframes ember {
	0% {
		opacity: 0;
		translate: 0 0;
	}
	12% {
		opacity: 0.9;
	}
	70% {
		opacity: 0.6;
	}
	100% {
		opacity: 0;
		translate: var(--drift) -560px;
	}
}
.title-word {
	display: inline-block;
	white-space: nowrap;
}
.title-char {
	display: inline-block;
}

@keyframes hero-cinema {
	from {
		scale: 1.22;
		filter: blur(10px) brightness(0.35) saturate(0.6);
	}
	45% {
		filter: blur(0) brightness(0.8) saturate(0.9);
	}
	to {
		scale: 1;
		filter: blur(0) brightness(1) saturate(1);
	}
}
@keyframes char-in {
	from {
		opacity: 0;
		translate: 0 0.55em;
		rotate: 8deg;
		filter: blur(8px);
	}
	to {
		opacity: 1;
		translate: 0 0;
		rotate: 0deg;
		filter: blur(0);
	}
}
@keyframes char-glint {
	45% {
		filter: brightness(1.9) drop-shadow(0 0 14px #ffd79a);
		color: #fff4d6;
	}
}
@keyframes rise-in {
	from {
		opacity: 0;
		translate: 0 26px;
		filter: blur(6px);
	}
	to {
		opacity: 1;
		translate: 0 0;
		filter: blur(0);
	}
}
@keyframes header-drop {
	from {
		opacity: 0;
		translate: 0 -100%;
	}
	to {
		opacity: 1;
		translate: 0 0;
	}
}
@keyframes card-deal {
	from {
		opacity: 0;
		transform: perspective(900px) translateY(70px) rotateX(28deg) scale(0.92);
		filter: blur(6px) brightness(0.5);
	}
	60% {
		filter: blur(0) brightness(1.15);
	}
	to {
		opacity: 1;
		transform: perspective(900px) translateY(0) rotateX(0) scale(1);
		filter: blur(0) brightness(1);
	}
}
@keyframes corner-light {
	from {
		opacity: 0;
		scale: 0.3;
	}
	60% {
		opacity: 1;
		filter: drop-shadow(0 0 8px #e8c98f);
	}
	to {
		opacity: 1;
		scale: 1;
		filter: none;
	}
}
@keyframes reveal-in {
	from {
		opacity: 0;
		translate: 0 48px;
		scale: 0.97;
		filter: blur(6px);
	}
	to {
		opacity: 1;
		translate: 0 0;
		scale: 1;
		filter: blur(0);
	}
}

@media (prefers-reduced-motion: no-preference) {
	body[data-page='/'] > header {
		animation: header-drop 0.9s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--intro, 0s) + 0.05s) both;
	}
	body[data-page='/'] .page-enter .hero::before {
		animation: hero-cinema 3s cubic-bezier(0.22, 1, 0.36, 1) var(--intro, 0s) both;
	}
	body[data-page='/'] .page-enter .hero-embers {
		animation: intro-fade 2s ease calc(var(--intro, 0s) + 0.8s) both;
	}
	body[data-page='/'] .page-enter .hero > div:not(.hero-embers) > * {
		animation: rise-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
	}
	body[data-page='/'] .page-enter .hero > div:not(.hero-embers) > :nth-child(1) {
		animation-delay: calc(var(--intro, 0s) + 0.25s);
	}
	/* The title is animated letter by letter instead. */
	body[data-page='/'] .page-enter .hero h1[data-split] {
		animation: none;
	}
	/* Letters land one by one, then a glint of gold light runs across them. */
	body[data-page='/'] .page-enter .hero h1 .title-char {
		animation:
			char-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) both,
			char-glint 0.7s ease;
		animation-delay:
			calc(var(--intro, 0s) + 0.4s + var(--i) * 0.045s),
			calc(var(--intro, 0s) + 1.7s + var(--i) * 0.035s);
	}
	body[data-page='/'] .page-enter .hero > div:not(.hero-embers) > :nth-child(3) {
		animation-delay: calc(var(--intro, 0s) + 1.15s);
	}
	body[data-page='/'] .page-enter .hero > div:not(.hero-embers) > :nth-child(4) {
		animation-delay: calc(var(--intro, 0s) + 1.3s);
	}
	body[data-page='/'] .page-enter .hero > div:not(.hero-embers) > :nth-child(5) {
		animation-delay: calc(var(--intro, 0s) + 1.42s);
	}
	body[data-page='/'] .page-enter .hero > div:not(.hero-embers) > :nth-child(6) {
		animation-delay: calc(var(--intro, 0s) + 1.55s);
	}
	body[data-page='/'] .page-enter .adventure-card {
		animation: card-deal 1.1s cubic-bezier(0.22, 1, 0.36, 1) both;
		transform-origin: 50% 100%;
	}
	body[data-page='/'] .page-enter .adventure-card:nth-child(1) {
		animation-delay: calc(var(--intro, 0s) + 1.5s);
	}
	body[data-page='/'] .page-enter .adventure-card:nth-child(2) {
		animation-delay: calc(var(--intro, 0s) + 1.65s);
	}
	body[data-page='/'] .page-enter .adventure-card:nth-child(3) {
		animation-delay: calc(var(--intro, 0s) + 1.8s);
	}
	body[data-page='/'] .page-enter .adventure-card:nth-child(4) {
		animation-delay: calc(var(--intro, 0s) + 1.95s);
	}
	body[data-page='/'] .page-enter .adventure-card .frame-corner {
		animation: corner-light 0.9s ease both;
		animation-delay: calc(var(--intro, 0s) + 2.3s);
	}
	.reveal {
		opacity: 0;
		transition: none;
	}
	.reveal.is-visible {
		animation: reveal-in 1s cubic-bezier(0.22, 1, 0.36, 1) both;
	}
	.reveal.is-visible .card,
	.reveal.is-visible .day,
	.reveal.is-visible li {
		animation: rise-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
	}
	.reveal.is-visible :is(.card, .day, li):nth-child(2) {
		animation-delay: 0.1s;
	}
	.reveal.is-visible :is(.card, .day, li):nth-child(3) {
		animation-delay: 0.2s;
	}
	.reveal.is-visible :is(.card, .day, li):nth-child(4) {
		animation-delay: 0.3s;
	}
	.reveal.is-visible :is(.card, .day, li):nth-child(n + 5) {
		animation-delay: 0.4s;
	}
}
@media (prefers-reduced-motion: reduce) {
	.intro,
	.hero-embers {
		display: none;
	}
}
body[data-page='/'] .hero {
	clip-path: inset(0 -100vw);
}
@keyframes intro-name-sm {
	from {
		opacity: 0;
		letter-spacing: 0.5em;
		filter: blur(6px);
	}
	to {
		opacity: 1;
		letter-spacing: 0.14em;
		filter: blur(0);
	}
}
@media (max-width: 600px) {
	.intro-name {
		max-width: calc(100vw - 32px);
		font-size: 16px;
		animation-name: intro-name-sm;
	}
	.intro-tag {
		letter-spacing: 0.25em;
	}
}

/* Hero showcase: best medals next to the player's name. */
.hub-medals {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 6px;
	margin-top: 10px;
	color: inherit;
	text-decoration: none;
}
.hub-medals .medal {
	transition: translate 0.2s ease;
}
.hub-medals:hover .medal {
	translate: 0 -2px;
}
.hub-medals-empty {
	align-self: center;
	color: #b9ad9a;
	font-size: 13px;
}
.hub-medals-more {
	align-self: center;
	padding: 2px 8px;
	border: 1px solid #a68a5b60;
	border-radius: 999px;
	color: #e3c08f;
	font-size: 12px;
}
.hub-hero-text .hub-tour-start {
	margin-top: 10px;
}

/* Guild wall on the Progreso page */
.guild-wall {
	margin-top: 28px;
}
.guild-wall ul {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr));
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.guild-wall li {
	display: grid;
	justify-items: center;
	gap: 8px;
	padding: 16px 10px;
	border: 1px solid #a68a5b30;
	border-radius: 8px;
	background: linear-gradient(180deg, #17151a, #0f0e11);
	text-align: center;
}
.guild-wall li.is-earned {
	border-color: #a68a5b70;
}
.guild-wall strong {
	font-size: 14px;
}
.guild-wall small {
	color: var(--muted);
	font-size: 12px;
}

/* ===== Achievement emblems (pure CSS) ===== */
.medal {
	--size: 64px;
	/* Frame metal: bronze by default. */
	--f-hi: #f7cf98;
	--f-mid: #b9743a;
	--f-lo: #4f2b12;
	--gem: #e0a55a;
	--icon: #d8dce3;
	--slate-hi: #4b5262;
	--slate-lo: #14161b;
	position: relative;
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
	width: calc(var(--size) * 1.16);
	height: calc(var(--size) * 1.16);
	vertical-align: middle;
}
.medal-small {
	--size: 38px;
}
.medal-large {
	--size: 84px;
}
.medal-disc {
	position: relative;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: var(--size);
	aspect-ratio: 1;
	padding: calc(var(--size) * 0.12);
	border-radius: 50%;
	overflow: hidden;
	background:
		radial-gradient(circle at 50% 36%, var(--slate-hi) 0%, #2a2e37 52%, var(--slate-lo) 100%)
			content-box,
		conic-gradient(
				from 200deg,
				var(--f-hi),
				var(--f-mid) 14%,
				var(--f-lo) 27%,
				var(--f-mid) 40%,
				var(--f-hi) 50%,
				var(--f-mid) 63%,
				var(--f-lo) 77%,
				var(--f-mid) 90%,
				var(--f-hi)
			)
			border-box;
	box-shadow:
		0 0 0 1px #000c,
		inset 0 0 0 1px color-mix(in srgb, var(--f-hi) 70%, transparent),
		0 calc(var(--size) * 0.05) calc(var(--size) * 0.16) #000c;
}
/* Bevel between the frame and the slate. */
.medal-disc::before {
	content: '';
	position: absolute;
	inset: calc(var(--size) * 0.1);
	border-radius: 50%;
	box-shadow:
		0 0 0 calc(var(--size) * 0.018) var(--f-lo),
		inset 0 0 0 1px #000a,
		inset 0 calc(var(--size) * 0.07) calc(var(--size) * 0.12) #000a,
		inset 0 calc(var(--size) * -0.04) calc(var(--size) * 0.08) #ffffff14;
	pointer-events: none;
}
/* Light sweep across the metal on hover. */
.medal-disc::after {
	content: '';
	position: absolute;
	inset: -20%;
	background: linear-gradient(115deg, transparent 42%, #ffffff55 50%, transparent 58%);
	translate: -120% 0;
	transition: translate 0.9s cubic-bezier(0.22, 1, 0.36, 1);
	pointer-events: none;
}
.medal:hover .medal-disc::after,
.medal:focus-visible .medal-disc::after {
	translate: 120% 0;
}
.medal-disc svg {
	position: relative;
	z-index: 1;
	width: 54%;
	height: 54%;
	fill: none;
	stroke: var(--icon);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	filter: drop-shadow(0 -1px 0 #ffffff40) drop-shadow(0 1.5px 0 #000) drop-shadow(0 0 3px #0009);
}
/* Four diamond studs on the frame; the top one is larger and pointed. */
.medal-studs {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.medal-studs i {
	position: absolute;
	width: calc(var(--size) * 0.15);
	aspect-ratio: 1;
	border-radius: 2px;
	background: linear-gradient(135deg, var(--f-hi), var(--f-mid) 50%, var(--f-lo));
	box-shadow:
		0 0 0 1px #000b,
		0 1px 3px #000a;
	translate: -50% -50%;
	rotate: 45deg;
}
.medal-studs i::after {
	content: '';
	position: absolute;
	inset: 28%;
	border-radius: 1px;
	background: radial-gradient(circle at 35% 35%, #ffffffaa, var(--gem) 45%, #000a);
	box-shadow: 0 0 4px color-mix(in srgb, var(--gem) 60%, transparent);
}
.medal-studs i:nth-child(1) {
	top: 6%;
	left: 50%;
	width: calc(var(--size) * 0.2);
	clip-path: polygon(0 0, 100% 0, 100% 100%, 22% 100%, 0 78%);
}
.medal-studs i:nth-child(2) {
	top: 50%;
	left: 94%;
}
.medal-studs i:nth-child(3) {
	top: 94%;
	left: 50%;
}
.medal-studs i:nth-child(4) {
	top: 50%;
	left: 6%;
}
/* Tier metals. */
.medal.is-silver {
	--f-hi: #ffffff;
	--f-mid: #aab4c0;
	--f-lo: #3f4752;
	--icon: #eef1f5;
}
.medal.is-gold {
	--f-hi: #fff2b8;
	--f-mid: #d6a332;
	--f-lo: #5f3f05;
	--icon: #f6f3ea;
	--slate-hi: #535a6b;
}
.medal.is-gold .medal-disc {
	animation: medal-glow 3.2s ease-in-out infinite;
}
@keyframes medal-glow {
	50% {
		box-shadow:
			0 0 0 1px #000c,
			inset 0 0 0 1px #fff2b8b3,
			0 calc(var(--size) * 0.05) calc(var(--size) * 0.16) #000c,
			0 0 calc(var(--size) * 0.32) #ffd76a70;
	}
}
/* Locked: dark iron, dim icon, and a gold arc filling towards the next tier. */
.medal.is-locked {
	--f-hi: #6b6672;
	--f-mid: #3b3840;
	--f-lo: #19181c;
	--icon: #707480;
	--gem: #4a4750;
	--slate-hi: #30343d;
	--slate-lo: #0e0f12;
}
.medal.is-locked .medal-disc {
	background:
		radial-gradient(circle at 50% 36%, var(--slate-hi) 0%, #1d2027 52%, var(--slate-lo) 100%)
			content-box,
		conic-gradient(#d8b982 calc(var(--p, 0) * 1%), transparent 0) border-box,
		conic-gradient(
				from 200deg,
				var(--f-hi),
				var(--f-mid) 20%,
				var(--f-lo) 40%,
				var(--f-mid) 60%,
				var(--f-hi) 75%,
				var(--f-lo)
			)
			border-box;
}
.medal.is-locked .medal-disc svg {
	filter: drop-shadow(0 1px 0 #000);
}
.medal.is-secret .medal-disc svg {
	stroke: #b58cf0;
}
/* Category gems. */
.medal.cat-asistencia {
	--gem: #ff4d5e;
}
.medal.cat-progreso {
	--gem: #b07cff;
}
.medal.cat-compromiso {
	--gem: #4fa3ff;
}
.medal.cat-perfil {
	--gem: #45d39a;
}
.medal.cat-secreto {
	--gem: #c9a2ff;
}
.medal.cat-hermandad {
	--gem: #ffcf4d;
}
.medal.is-locked[class*='cat-'] {
	--gem: #4a4750;
}
@media (prefers-reduced-motion: reduce) {
	.medal.is-gold .medal-disc {
		animation: none;
	}
	.medal-disc::after {
		transition: none;
	}
}

/* Logros section: cards laid out like the in-game achievement list. */
.ach-summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
	gap: 10px;
	margin-bottom: 18px;
}
.ach-summary div {
	padding: 12px 14px;
	border: 1px solid #a68a5b40;
	border-radius: 8px;
	background: linear-gradient(180deg, #17151a, #111013);
}
.ach-summary dt {
	color: var(--muted);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.ach-summary dd {
	margin: 4px 0 0;
	color: var(--gold);
	font-family: Georgia, serif;
	font-size: 28px;
}
.ach-summary dd small {
	color: var(--muted);
	font-family: inherit;
	font-size: 14px;
}
.ach-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
	gap: 18px;
	align-items: start;
}
.ach-group h3 {
	position: relative;
	margin: 22px 0 12px;
	padding-bottom: 8px;
	color: #e3c08f;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 17px;
	font-weight: 400;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.ach-group h3::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: linear-gradient(90deg, #a68a5b, #a68a5b40 60%, transparent);
}
.ach-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ach-card {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 16px;
	padding: 14px 16px;
	border: 1px solid #3a3238;
	border-radius: 6px;
	background: linear-gradient(180deg, #19171c, #111014);
	box-shadow: inset 0 1px 0 #ffffff08;
}
.ach-card.is-earned {
	border-color: #a68a5b70;
	background: linear-gradient(180deg, #1f1a1b, #131115);
}
.ach-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 6px 12px;
}
.ach-card h4 {
	margin: 0;
	color: #f1e6d2;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 17px;
	font-weight: 400;
}
.ach-card p {
	margin: 2px 0 0;
	color: #b7ad9f;
	font-size: 13px;
}
.ach-tiers {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.ach-tiers span {
	padding: 2px 10px;
	border: 1px solid;
	border-radius: 999px;
	font-size: 12px;
	opacity: 0.75;
}
.ach-tiers .t1 {
	border-color: #b9763b;
	color: #f0c294;
}
.ach-tiers .t2 {
	border-color: #aab4c0;
	color: #e4e9ef;
}
.ach-tiers .t3 {
	border-color: #d6a332;
	color: #ffe08a;
}
.ach-tiers .on {
	opacity: 1;
	font-weight: 700;
}
.ach-tiers .on.t1 {
	background: #b9763b33;
}
.ach-tiers .on.t2 {
	background: #aab4c033;
}
.ach-tiers .on.t3 {
	background: #d6a33233;
}
.ach-bar {
	height: 6px;
	margin-top: 10px;
	border-radius: 999px;
	background: #26222a;
	box-shadow: inset 0 1px 2px #000a;
	overflow: hidden;
}
.ach-bar i {
	display: block;
	width: calc(var(--p, 0) * 1%);
	height: 100%;
	border-radius: inherit;
	background: linear-gradient(90deg, #8f6a32, #ffd79a);
}
.ach-card small {
	display: block;
	margin-top: 5px;
	color: #a79f93;
	font-size: 12px;
}
.ach-ranking ol {
	display: grid;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ach-ranking li {
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr) auto;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	border-radius: 6px;
	background: #0f0e11;
}
.ach-ranking li.is-me {
	outline: 1px solid var(--gold);
	background: #2a2116;
}
.ach-ranking b {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: #2a262c;
	font-size: 13px;
}
.ach-ranking li:nth-child(1) b {
	background: linear-gradient(135deg, #fff6c2, #d9ab3a);
	color: #3d2900;
}
.ach-ranking li:nth-child(2) b {
	background: linear-gradient(135deg, #ffffff, #9aa4af);
	color: #222;
}
.ach-ranking li:nth-child(3) b {
	background: linear-gradient(135deg, #ffd4a1, #a8652d);
	color: #2b1406;
}
.ach-ranking span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.ach-ranking em {
	color: var(--gold);
	font-style: normal;
	font-weight: 700;
}
.ach-note {
	margin-top: 14px;
	color: var(--muted);
	font-size: 13px;
}
@media (max-width: 900px) {
	.ach-layout {
		grid-template-columns: minmax(0, 1fr);
	}
}
/* Solid, carved look for the emblem icon. */
.medal-disc svg {
	fill: color-mix(in srgb, var(--icon) 24%, transparent);
	stroke-width: 2.3;
}
.medal.is-locked .medal-disc svg {
	fill: color-mix(in srgb, var(--icon) 12%, transparent);
}
.ach-head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: start;
}
.ach-head .ach-tiers {
	flex-wrap: nowrap;
	justify-content: flex-end;
}
@media (max-width: 520px) {
	.ach-head {
		grid-template-columns: minmax(0, 1fr);
	}
	.ach-head .ach-tiers {
		justify-content: flex-start;
	}
}