@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Rajdhani:wght@400;500;600;700&family=Source+Sans+3:wght@300;400;600&display=swap");


:root {
	--page-bg: #030812;
	--panel-bg: rgba(6, 15, 27, 0.91);
	--panel-bg-deep: rgba(3, 9, 18, 0.97);
	--card-bg: rgba(8, 20, 34, 0.88);
	--card-bg-hover: rgba(12, 30, 50, 0.98);
	--line: rgba(108, 180, 231, 0.22);
	--line-strong: rgba(120, 190, 239, 0.48);
	--gold: #efc96d;
	--gold-bright: #ffe6a4;
	--gold-soft: rgba(239, 201, 109, 0.2);
	--blue: #8bcdf5;
	--blue-bright: #c6edff;
	--blue-soft: rgba(89, 166, 222, 0.18);
	--text: #f4f7fa;
	--text-muted: #cad4dc;
	--text-dim: #a5b2bc;
	--danger: #d98969;
	--shadow: 0 0 34px rgba(52, 132, 194, 0.11), 0 34px 90px rgba(0, 0, 0, 0.72);
}

* {
	box-sizing: border-box;
}

html {
	min-width: 320px;
	background: var(--page-bg);
	scroll-behavior: smooth;
}

body {
	min-width: 320px;
	min-height: 100vh;
	margin: 0;
	color: var(--text);
	font-family: "Source Sans 3", "Segoe UI", Arial, sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.55;
	background: var(--page-bg);
}

.page-background {
	position: fixed;
	inset: -12px;
	z-index: -2;
	background-image: url("../../images/paladin-background.png");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	filter: blur(2px) brightness(0.46) saturate(0.88) contrast(1.04);
	transform: scale(1.025);
}

body::before,
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

body::before {
	background:
		linear-gradient(180deg, rgba(7, 5, 3, 0.25), rgba(4, 4, 4, 0.68)),
		radial-gradient(circle at 50% 14%, rgba(214, 143, 35, 0.13), transparent 34rem);
}

body::after {
	background:
		linear-gradient(90deg, rgba(0, 0, 0, 0.62), transparent 16%, transparent 84%, rgba(0, 0, 0, 0.62)),
		radial-gradient(ellipse at center, transparent 28%, rgba(0, 0, 0, 0.64) 100%);
}

a {
	color: inherit;
}

button {
	font: inherit;
}

.site-shell {
	display: flex;
	flex-direction: column;
	width: min(1180px, calc(100% - 48px));
	min-height: 100vh;
	min-height: 100svh;
	margin: 0 auto;
	padding: 38px 0 24px;
}

.hero {
	max-width: 900px;
	margin: 0 auto 31px;
	text-align: center;
}

.paladin-mark {
	position: relative;
	display: grid;
	place-items: center;
	width: 136px;
	height: 136px;
	margin: 0 auto 18px;
	border: 1px solid rgba(255, 232, 177, 0.84);
	border-radius: 50%;
	color: var(--gold-bright);
	background:
		radial-gradient(circle at 50% 42%, rgba(232, 170, 59, 0.12), transparent 54%),
		rgba(10, 9, 7, 0.68);
	box-shadow:
		0 0 0 1px rgba(239, 190, 90, 0.1),
		0 0 22px rgba(239, 181, 69, 0.2),
		0 0 64px rgba(180, 104, 23, 0.14),
		inset 0 0 30px rgba(242, 188, 79, 0.08);
}

.paladin-mark::before,
.paladin-mark::after {
	content: "";
	position: absolute;
	inset: 10px;
	border: 1px solid rgba(139, 200, 242, 0.18);
	border-radius: 50%;
}

.paladin-mark::after {
	inset: -8px;
	border-color: rgba(241, 194, 97, 0.08);
}

.paladin-mark svg {
	width: 74px;
	height: 84px;
	overflow: visible;
	filter: drop-shadow(0 0 8px rgba(255, 218, 126, 0.34));
}

.paladin-mark svg > path:first-child {
	fill: rgba(22, 18, 12, 0.78);
	stroke: currentColor;
	stroke-width: 2;
}

.paladin-mark .shield-cross {
	fill: currentColor;
}

.hero h1 {
	margin: 0;
	font-family: "Cinzel", Georgia, serif;
	font-size: clamp(2.65rem, 7vw, 4.65rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: clamp(0.18rem, 1vw, 0.58rem);
	text-transform: uppercase;
	text-shadow: 0 0 22px rgba(244, 191, 82, 0.22), 0 2px 16px rgba(0, 0, 0, 0.8);
}

.hero-kicker {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 16px 0 9px;
	color: #c8c1b3;
	font-family: "Rajdhani", "Segoe UI", sans-serif;
	font-size: 0.83rem;
	font-weight: 600;
	letter-spacing: 0.24rem;
	text-transform: uppercase;
}

.hero-kicker span,
.site-footer span {
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--gold);
	box-shadow: 0 0 8px var(--gold);
}

.accent-rule {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	height: 12px;
	margin: 0 0 10px;
}

.accent-rule::before,
.accent-rule::after {
	content: "";
	width: 30px;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--gold));
	box-shadow: 0 0 8px var(--gold-soft);
}

.accent-rule::after {
	background: linear-gradient(90deg, var(--gold), transparent);
}

.accent-rule i {
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid var(--gold);
	filter: drop-shadow(0 0 5px var(--gold));
}

.hero-description {
	max-width: 780px;
	margin: 0 auto;
	color: var(--text-muted);
	font-size: 0.99rem;
	letter-spacing: 0.02rem;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
}

.roster-panel {
	position: relative;
	padding: 27px 30px 30px;
	border: 1px solid var(--line-strong);
	border-radius: 10px;
	background:
		linear-gradient(135deg, rgba(208, 144, 31, 0.045), transparent 35%),
		linear-gradient(315deg, rgba(72, 139, 183, 0.035), transparent 36%),
		var(--panel-bg);
	box-shadow: var(--shadow), inset 0 0 38px rgba(219, 156, 42, 0.035);
	backdrop-filter: blur(11px);
}

.roster-panel::before,
.roster-panel::after {
	content: "";
	position: absolute;
	width: 48px;
	height: 48px;
	pointer-events: none;
}

.roster-panel::before {
	top: -1px;
	left: -1px;
	border-top: 2px solid rgba(255, 219, 143, 0.74);
	border-left: 2px solid rgba(255, 219, 143, 0.74);
	border-radius: 10px 0 0 0;
}

.roster-panel::after {
	right: -1px;
	bottom: -1px;
	border-right: 2px solid rgba(142, 202, 242, 0.44);
	border-bottom: 2px solid rgba(142, 202, 242, 0.44);
	border-radius: 0 0 10px 0;
}

.panel-header {
	display: grid;
	grid-template-columns: 190px minmax(0, 1fr);
	gap: 24px;
	align-items: center;
	padding-bottom: 20px;
	border-bottom: 1px solid rgba(228, 177, 70, 0.18);
}

.panel-heading-wrap {
	min-width: 0;
}

.section-label {
	margin: 0 0 2px;
	color: var(--gold);
	font-family: "Rajdhani", "Segoe UI", sans-serif;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.24rem;
	text-transform: uppercase;
}

.panel-heading-wrap h2 {
	margin: 0;
	font-family: "Rajdhani", "Segoe UI", sans-serif;
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: 0.06rem;
	white-space: nowrap;
}

.character-tabs {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 5px;
	min-width: 0;
	overflow-x: auto;
	padding: 3px 1px 5px;
	scrollbar-width: thin;
	scrollbar-color: rgba(241, 194, 97, 0.35) transparent;
}

.character-tab {
	position: relative;
	flex: 0 0 auto;
	min-height: 38px;
	padding: 7px 11px 6px;
	border: 1px solid transparent;
	border-radius: 6px;
	outline: none;
	color: #8e8a81;
	background: transparent;
	font-family: "Rajdhani", "Segoe UI", sans-serif;
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.055rem;
	text-transform: uppercase;
	cursor: pointer;
	transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}

.character-tab .tab-level {
	display: block;
	margin-top: -2px;
	color: #69665f;
	font-size: 0.64rem;
	letter-spacing: 0.08rem;
}

.character-tab:hover,
.character-tab:focus-visible {
	color: #f3e7c8;
	border-color: rgba(241, 194, 97, 0.2);
	background: rgba(241, 194, 97, 0.04);
}

.character-tab.is-active {
	color: var(--gold-bright);
	border-color: rgba(241, 194, 97, 0.36);
	background: rgba(241, 194, 97, 0.08);
	box-shadow: inset 0 -1px 0 var(--gold), 0 0 12px rgba(241, 194, 97, 0.05);
}

.character-tab.is-active .tab-level {
	color: #b89a5d;
}

.character-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 22px;
	align-items: end;
	padding: 25px 0 20px;
}

.character-eyebrow {
	margin: 0 0 5px;
	color: var(--blue);
	font-family: "Rajdhani", "Segoe UI", sans-serif;
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.18rem;
	text-transform: uppercase;
}

.character-hero h3 {
	margin: 0;
	font-family: "Cinzel", Georgia, serif;
	font-size: clamp(2rem, 5vw, 3.25rem);
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: 0.08rem;
}

.character-summary {
	max-width: 820px;
	margin: 11px 0 0;
	color: var(--text-muted);
	font-size: 0.97rem;
}

.level-medallion {
	display: grid;
	place-items: center;
	width: 86px;
	height: 86px;
	border: 1px solid rgba(241, 194, 97, 0.52);
	border-radius: 50%;
	background: rgba(8, 8, 7, 0.72);
	box-shadow: inset 0 0 20px rgba(241, 194, 97, 0.07), 0 0 18px rgba(241, 194, 97, 0.06);
}

.level-medallion span {
	display: block;
	color: #a59b86;
	font-family: "Rajdhani", sans-serif;
	font-size: 0.63rem;
	font-weight: 700;
	letter-spacing: 0.12rem;
	text-align: center;
	text-transform: uppercase;
}

.level-medallion strong {
	display: block;
	margin-top: -4px;
	color: var(--gold-bright);
	font-family: "Cinzel", serif;
	font-size: 2rem;
	font-weight: 600;
	line-height: 1;
}

.section-tabs {
	display: flex;
	gap: 5px;
	margin: 0 0 22px;
	padding: 5px;
	border: 1px solid rgba(241, 194, 97, 0.15);
	border-radius: 8px;
	background: rgba(4, 5, 5, 0.52);
	overflow-x: auto;
}

.section-tab {
	flex: 1 0 auto;
	min-height: 38px;
	padding: 7px 14px;
	border: 0;
	border-radius: 5px;
	outline: none;
	color: #817d74;
	background: transparent;
	font-family: "Rajdhani", sans-serif;
	font-size: 0.77rem;
	font-weight: 700;
	letter-spacing: 0.11rem;
	text-transform: uppercase;
	cursor: pointer;
	transition: color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.section-tab:hover,
.section-tab:focus-visible {
	color: #e8dcc0;
	background: rgba(241, 194, 97, 0.045);
}

.section-tab.is-active {
	color: #fff1c8;
	background: rgba(241, 194, 97, 0.1);
	box-shadow: inset 0 -1px 0 var(--gold);
}

.content-view {
	animation: reveal 180ms ease both;
}

@keyframes reveal {
	from { opacity: 0; transform: translateY(3px); }
	to { opacity: 1; transform: translateY(0); }
}

.overview-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	margin-bottom: 18px;
}

.stat-card,
.content-card,
.talent-tree,
.profession-card,
.note-card {
	border: 1px solid rgba(213, 165, 67, 0.18);
	border-radius: 8px;
	background:
		linear-gradient(135deg, rgba(224, 164, 55, 0.035), transparent 42%),
		var(--card-bg);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.stat-card {
	min-height: 96px;
	padding: 15px 16px;
}

.card-label {
	display: block;
	margin-bottom: 5px;
	color: #8e887d;
	font-family: "Rajdhani", sans-serif;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.14rem;
	text-transform: uppercase;
}

.stat-card strong {
	display: block;
	color: #f4ead2;
	font-family: "Rajdhani", sans-serif;
	font-size: 1.08rem;
	font-weight: 600;
	line-height: 1.25;
}

.two-column,
.notes-grid,
.profession-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.content-card,
.profession-card,
.note-card {
	padding: 19px 20px;
}

.content-card h4,
.profession-card h4,
.note-card h4,
.talent-tree h4 {
	margin: 0 0 10px;
	color: #f4dfad;
	font-family: "Rajdhani", sans-serif;
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.12rem;
	text-transform: uppercase;
}

.content-card p,
.profession-card p,
.note-card p {
	margin: 0;
	color: var(--text-muted);
}

.section-heading {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 14px;
	font-family: "Rajdhani", sans-serif;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.17rem;
	text-transform: uppercase;
}

.section-heading::after {
	content: "";
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, rgba(241, 194, 97, 0.3), transparent);
}

.callout {
	margin-top: 12px;
	padding: 14px 16px;
	border-left: 2px solid var(--gold);
	border-radius: 0 6px 6px 0;
	color: #bdb4a2;
	background: rgba(241, 194, 97, 0.055);
}

.callout strong {
	color: #f0d79f;
}

.callout p {
	margin: 0;
}

.inline-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-bottom: 14px;
}

.inline-tags span {
	padding: 5px 9px 4px;
	border: 1px solid rgba(139, 200, 242, 0.22);
	border-radius: 999px;
	color: #9dc6df;
	background: rgba(78, 147, 191, 0.055);
	font-family: "Rajdhani", sans-serif;
	font-size: 0.69rem;
	font-weight: 600;
	letter-spacing: 0.08rem;
	text-transform: uppercase;
}

.talent-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 11px;
}

.talent-tree {
	position: relative;
	padding: 18px;
	overflow: hidden;
}

.talent-total {
	position: absolute;
	top: 12px;
	right: 14px;
	color: rgba(241, 194, 97, 0.22);
	font-family: "Cinzel", serif;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1;
}

.talent-list,
.compact-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.talent-list li {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	padding: 7px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.045);
	color: #b8b1a4;
	font-size: 0.88rem;
}

.talent-list li:last-child {
	border-bottom: 0;
}

.talent-list .rank {
	flex: 0 0 auto;
	color: var(--gold);
	font-family: "Rajdhani", sans-serif;
	font-weight: 700;
}

.muted {
	color: #716d65;
}

.gear-list {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gear-card {
	display: grid;
	grid-template-columns: 58px minmax(0, 1fr) minmax(170px, 0.75fr);
	gap: 16px;
	align-items: center;
	min-height: 76px;
	padding: 11px 15px 11px 11px;
	border: 1px solid rgba(213, 165, 67, 0.17);
	border-radius: 8px;
	background:
		linear-gradient(90deg, rgba(224, 164, 55, 0.045), transparent 52%),
		var(--card-bg);
	transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.gear-card:hover {
	transform: translateY(-1px);
	border-color: rgba(241, 194, 97, 0.38);
	background:
		linear-gradient(90deg, rgba(224, 164, 55, 0.08), transparent 56%),
		var(--card-bg-hover);
}

.slot-badge {
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	border: 1px solid rgba(139, 200, 242, 0.32);
	border-radius: 10px;
	color: #a9d2ec;
	background: rgba(6, 11, 14, 0.74);
	font-family: "Rajdhani", sans-serif;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08rem;
	text-transform: uppercase;
}

.gear-primary {
	min-width: 0;
}

.gear-primary strong {
	display: block;
	color: #f0e5cd;
	font-family: "Rajdhani", sans-serif;
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.25;
}

.gear-primary span {
	display: block;
	margin-top: 2px;
	color: #7d776e;
	font-size: 0.76rem;
	letter-spacing: 0.04rem;
	text-transform: uppercase;
}

.gear-alt {
	color: #918b80;
	font-size: 0.86rem;
}

.gear-alt::before {
	content: "Alternative";
	display: block;
	margin-bottom: 1px;
	color: #706b62;
	font-family: "Rajdhani", sans-serif;
	font-size: 0.63rem;
	font-weight: 700;
	letter-spacing: 0.11rem;
	text-transform: uppercase;
}

.compact-list li {
	position: relative;
	padding: 7px 0 7px 17px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.04);
	color: #aaa397;
}

.compact-list li:last-child {
	border-bottom: 0;
}

.compact-list li::before {
	content: "";
	position: absolute;
	top: 1.14em;
	left: 1px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--gold);
	box-shadow: 0 0 6px var(--gold-soft);
}

.roster-overview {
	padding-top: 24px;
}

.roster-intro {
	max-width: 860px;
	margin: 0 0 20px;
	color: var(--text-muted);
}

.roster-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}

.roster-card {
	position: relative;
	min-height: 188px;
	padding: 18px;
	border: 1px solid rgba(213, 165, 67, 0.18);
	border-radius: 8px;
	background:
		linear-gradient(135deg, rgba(224, 164, 55, 0.045), transparent 50%),
		var(--card-bg);
	cursor: pointer;
	transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.roster-card:hover,
.roster-card:focus-within {
	transform: translateY(-2px);
	border-color: rgba(241, 194, 97, 0.42);
	background:
		linear-gradient(135deg, rgba(224, 164, 55, 0.08), transparent 54%),
		var(--card-bg-hover);
}

.roster-card .level-badge {
	position: absolute;
	top: 15px;
	right: 15px;
	color: rgba(241, 194, 97, 0.6);
	font-family: "Cinzel", serif;
	font-size: 1.65rem;
	font-weight: 600;
}

.roster-card h3 {
	margin: 17px 0 6px;
	font-family: "Cinzel", serif;
	font-size: 1.2rem;
	font-weight: 600;
}

.roster-card p {
	margin: 0 0 13px;
	color: #9d968a;
	font-size: 0.87rem;
}

.roster-card button {
	padding: 0;
	border: 0;
	color: var(--gold);
	background: transparent;
	font-family: "Rajdhani", sans-serif;
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.1rem;
	text-transform: uppercase;
	cursor: pointer;
}

.site-footer {
	margin-top: auto;
	padding: 22px 0 0;
	color: rgba(184, 176, 162, 0.62);
	text-align: center;
	font-family: "Rajdhani", sans-serif;
	font-size: 0.71rem;
	letter-spacing: 0.12rem;
	text-transform: uppercase;
}

.site-footer p {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	margin: 0;
}

.site-footer a {
	color: rgba(225, 210, 177, 0.76);
	text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus-visible {
	color: #fff4d7;
}

.noscript-message {
	position: fixed;
	inset: auto 20px 20px;
	padding: 14px;
	border: 1px solid var(--line-strong);
	color: var(--text);
	background: var(--panel-bg-deep);
	text-align: center;
}

[hidden] {
	display: none !important;
}

@media (max-width: 980px) {
	.panel-header {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.character-tabs {
		justify-content: flex-start;
	}

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

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

@media (max-width: 760px) {
	.site-shell {
		width: min(100% - 28px, 1180px);
		padding-top: 26px;
	}

	.paladin-mark {
		width: 118px;
		height: 118px;
	}

	.paladin-mark svg {
		width: 65px;
		height: 74px;
	}

	.character-hero {
		grid-template-columns: minmax(0, 1fr) 76px;
	}

	.level-medallion {
		width: 74px;
		height: 74px;
	}

	.level-medallion strong {
		font-size: 1.7rem;
	}

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

	.gear-card {
		grid-template-columns: 52px minmax(0, 1fr);
	}

	.gear-alt {
		grid-column: 2;
		padding-top: 4px;
		border-top: 1px solid rgba(255, 255, 255, 0.04);
	}
}

@media (max-width: 580px) {
	.page-background {
		background-position: 59% center;
		filter: blur(1.5px) brightness(0.4) saturate(0.82);
	}

	.site-shell {
		width: min(100% - 18px, 1180px);
		padding-top: 18px;
	}

	.hero {
		margin-bottom: 23px;
	}

	.paladin-mark {
		width: 102px;
		height: 102px;
		margin-bottom: 14px;
	}

	.paladin-mark svg {
		width: 56px;
		height: 64px;
	}

	.hero h1 {
		font-size: clamp(2rem, 11vw, 2.75rem);
		letter-spacing: 0.13rem;
	}

	.hero-kicker {
		gap: 6px;
		font-size: 0.67rem;
		letter-spacing: 0.09rem;
	}

	.hero-description {
		font-size: 0.9rem;
	}

	.roster-panel {
		padding: 21px 14px 17px;
	}

	.character-tab {
		padding-right: 9px;
		padding-left: 9px;
		font-size: 0.7rem;
	}

	.character-hero {
		grid-template-columns: 1fr;
		padding-top: 21px;
	}

	.level-medallion {
		display: none;
	}

	.section-tabs {
		margin-right: -3px;
		margin-left: -3px;
	}

	.section-tab {
		padding-right: 11px;
		padding-left: 11px;
		font-size: 0.71rem;
	}

	.overview-grid,
	.two-column,
	.notes-grid,
	.profession-grid,
	.roster-grid {
		grid-template-columns: 1fr;
	}

	.stat-card {
		min-height: 0;
	}

	.gear-card {
		grid-template-columns: 46px minmax(0, 1fr);
		gap: 11px;
		padding: 10px;
	}

	.slot-badge {
		width: 44px;
		height: 44px;
		font-size: 0.64rem;
	}

	.site-footer p {
		flex-wrap: wrap;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}

/* V3: compact hero, Wrath-blue palette, paired gear targets, profession totals */
body::before {
	background:
		linear-gradient(180deg, rgba(2, 8, 17, 0.28), rgba(2, 7, 15, 0.72)),
		radial-gradient(circle at 50% 10%, rgba(63, 137, 196, 0.12), transparent 34rem),
		radial-gradient(circle at 56% 26%, rgba(224, 166, 54, 0.06), transparent 26rem);
}

body::after {
	background:
		linear-gradient(90deg, rgba(0, 3, 9, 0.69), transparent 16%, transparent 84%, rgba(0, 3, 9, 0.69)),
		radial-gradient(ellipse at center, transparent 20%, rgba(0, 4, 12, 0.66) 100%);
}

.page-background {
	filter: blur(1.8px) brightness(0.42) saturate(0.8) contrast(1.06) hue-rotate(2deg);
}

.site-shell {
	padding-top: 22px;
}

.hero {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	max-width: 900px;
	margin: 0 auto 18px;
	text-align: left;
}

.paladin-mark {
	flex: 0 0 auto;
	width: 76px;
	height: 76px;
	margin: 0;
	border-color: rgba(255, 226, 155, 0.76);
	background:
		radial-gradient(circle at 50% 42%, rgba(232, 170, 59, 0.12), transparent 54%),
		rgba(5, 13, 24, 0.78);
	box-shadow:
		0 0 0 1px rgba(139, 205, 245, 0.12),
		0 0 16px rgba(76, 157, 216, 0.13),
		0 0 28px rgba(226, 165, 53, 0.07),
		inset 0 0 18px rgba(242, 188, 79, 0.05);
}

.paladin-mark::before {
	inset: 7px;
	border-color: rgba(139, 205, 245, 0.24);
}

.paladin-mark::after {
	inset: -5px;
	border-color: rgba(239, 201, 109, 0.08);
}

.paladin-mark svg {
	width: 42px;
	height: 49px;
}

.hero-copy {
	min-width: 0;
}

.hero h1 {
	font-size: clamp(2.05rem, 5vw, 3.25rem);
	line-height: 0.94;
	letter-spacing: clamp(0.14rem, 0.7vw, 0.36rem);
}

.hero-kicker {
	justify-content: flex-start;
	margin: 9px 0 0;
	color: #aebdcc;
	font-size: 0.72rem;
	letter-spacing: 0.17rem;
}

.roster-panel {
	border-color: rgba(117, 191, 241, 0.45);
	background:
		linear-gradient(135deg, rgba(66, 147, 210, 0.07), transparent 34%),
		linear-gradient(315deg, rgba(228, 173, 62, 0.04), transparent 32%),
		var(--panel-bg);
	box-shadow: var(--shadow), inset 0 0 28px rgba(54, 139, 201, 0.03);
}

.roster-panel::before {
	border-top-color: rgba(255, 224, 148, 0.72);
	border-left-color: rgba(255, 224, 148, 0.72);
}

.roster-panel::after {
	border-right-color: rgba(132, 205, 250, 0.62);
	border-bottom-color: rgba(132, 205, 250, 0.62);
}

.panel-header {
	grid-template-columns: 250px minmax(0, 1fr);
	border-bottom-color: rgba(110, 185, 235, 0.18);
}

.character-tab.is-active {
	color: var(--blue-bright);
	border-color: rgba(119, 195, 246, 0.38);
	background: linear-gradient(180deg, rgba(89, 164, 220, 0.12), rgba(237, 196, 98, 0.045));
	box-shadow: inset 0 -1px 0 var(--gold), 0 0 13px rgba(68, 149, 208, 0.08);
}

.character-tab.is-active .tab-level {
	color: #a8c8dd;
}

.section-tabs {
	border-color: rgba(113, 188, 238, 0.2);
	background: rgba(2, 9, 18, 0.64);
}

.section-tab.is-active {
	color: var(--blue-bright);
	background: linear-gradient(180deg, rgba(90, 168, 224, 0.13), rgba(239, 201, 109, 0.05));
	box-shadow: inset 0 -1px 0 var(--gold);
}

.stat-card,
.content-card,
.talent-tree,
.profession-card,
.note-card {
	border-color: rgba(105, 180, 231, 0.2);
	background:
		linear-gradient(135deg, rgba(72, 154, 211, 0.055), transparent 42%),
		var(--card-bg);
}

.section-heading::after {
	background: linear-gradient(90deg, rgba(115, 190, 240, 0.35), rgba(238, 195, 94, 0.15), transparent);
}

.section-intro {
	margin: -5px 0 15px;
	color: var(--text-muted);
	font-size: 0.86rem;
}

.talent-grid {
	align-items: start;
}

.talent-tree {
	padding: 0;
	background: rgba(5, 13, 24, 0.92);
}

.talent-image-wrap {
	aspect-ratio: 16 / 11;
	overflow: hidden;
	border-bottom: 1px solid rgba(117, 190, 239, 0.2);
	background: #030914;
}

.talent-image-wrap img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

.talent-tree-body {
	position: relative;
	padding: 17px 18px 18px;
}

.talent-total {
	top: 14px;
	right: 17px;
	color: rgba(239, 201, 109, 0.25);
}

.gear-list {
	gap: 12px;
}

.gear-slot-group {
	display: grid;
	grid-template-columns: 92px minmax(0, 1fr);
	gap: 12px;
	padding: 12px;
	border: 1px solid rgba(104, 179, 230, 0.2);
	border-radius: 10px;
	background:
		linear-gradient(90deg, rgba(71, 151, 208, 0.055), transparent 34%),
		rgba(4, 12, 23, 0.8);
}

.gear-slot-heading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 0;
	color: #a9c8dd;
	font-family: "Rajdhani", sans-serif;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.1rem;
	text-align: center;
	text-transform: uppercase;
}

.slot-badge {
	border-color: rgba(126, 202, 250, 0.43);
	color: #c6edff;
	background: linear-gradient(145deg, rgba(9, 27, 46, 0.94), rgba(4, 11, 20, 0.96));
	box-shadow: inset 0 0 18px rgba(64, 151, 213, 0.08);
}

.gear-options {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.gear-option {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: 12px;
	align-items: center;
	min-height: 94px;
	padding: 12px;
	border: 1px solid rgba(109, 183, 233, 0.16);
	border-radius: 8px;
	background: rgba(9, 20, 34, 0.84);
	transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.gear-option:hover {
	transform: translateY(-1px);
	border-color: rgba(237, 199, 105, 0.35);
	background: rgba(12, 29, 48, 0.96);
}

.item-icon {
	width: 56px;
	height: 56px;
	padding: 3px;
	border: 1px solid rgba(239, 201, 109, 0.34);
	border-radius: 7px;
	background: #020710;
	box-shadow: 0 0 14px rgba(74, 158, 219, 0.08);
}

.item-icon img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 4px;
	object-fit: cover;
}

.gear-option-copy {
	min-width: 0;
}

.gear-rank {
	display: block;
	margin-bottom: 3px;
	color: #7faed0;
	font-family: "Rajdhani", sans-serif;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.13rem;
	text-transform: uppercase;
}

.gear-name {
	color: #f3e6c6;
	font-family: "Rajdhani", sans-serif;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.28;
}

.item-link {
	color: #f3e0ad;
	text-decoration: none;
	text-underline-offset: 3px;
}

.item-link:hover,
.item-link:focus-visible {
	color: #fff1bd;
	text-decoration: underline;
}

.item-separator {
	color: #70818d;
	font-weight: 400;
}

.generic-gear-name {
	color: #c7d1d8;
}

.gear-source {
	margin: 5px 0 0;
	color: var(--text-muted);
	font-size: 0.75rem;
	line-height: 1.32;
}

.gear-notes {
	margin-top: 16px;
}

.profession-card {
	padding: 20px;
}

.profession-heading {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;
	margin-bottom: 12px;
}

.profession-heading h4 {
	margin-bottom: 0;
	font-size: 1.05rem;
}

.profession-heading > strong {
	max-width: 52%;
	color: var(--gold-bright);
	font-family: "Rajdhani", sans-serif;
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.25;
	text-align: right;
}

.profession-cap {
	display: block;
	margin-bottom: 2px;
	color: #8bcdf5;
	font-family: "Rajdhani", sans-serif;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.13rem;
	text-transform: uppercase;
}

.profession-card .compact-list {
	margin-top: 13px;
}

.sync-note {
	margin-top: 12px;
	padding: 17px 18px;
	border: 1px solid rgba(111, 185, 235, 0.18);
	border-radius: 8px;
	background: rgba(7, 19, 32, 0.72);
}

.sync-note h4 {
	margin: 0 0 5px;
	color: #bfe8ff;
	font-family: "Rajdhani", sans-serif;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.13rem;
	text-transform: uppercase;
}

.sync-note p {
	margin: 0;
	color: #9eaeb9;
}

@media (max-width: 880px) {
	.gear-slot-group {
		grid-template-columns: 72px minmax(0, 1fr);
	}

	.gear-options {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 760px) {
	.site-shell {
		padding-top: 16px;
	}

	.hero {
		gap: 13px;
		margin-bottom: 14px;
	}

	.paladin-mark {
		width: 64px;
		height: 64px;
	}

	.paladin-mark svg {
		width: 36px;
		height: 42px;
	}

	.talent-image-wrap {
		aspect-ratio: 16 / 8;
	}
}

@media (max-width: 580px) {
	.hero {
		align-items: center;
		justify-content: flex-start;
		text-align: left;
	}

	.paladin-mark {
		width: 54px;
		height: 54px;
		margin: 0;
	}

	.paladin-mark svg {
		width: 30px;
		height: 35px;
	}

	.hero h1 {
		font-size: 2rem;
		letter-spacing: 0.16rem;
	}

	.hero-kicker {
		justify-content: flex-start;
		font-size: 0.58rem;
		letter-spacing: 0.065rem;
	}

	.gear-slot-group {
		grid-template-columns: 1fr;
		padding: 10px;
	}

	.gear-slot-heading {
		flex-direction: row;
		justify-content: flex-start;
		text-align: left;
	}

	.slot-badge {
		width: 38px;
		height: 38px;
	}

	.gear-option {
		grid-template-columns: 48px minmax(0, 1fr);
		min-height: 0;
	}

	.item-icon {
		width: 48px;
		height: 48px;
	}

	.profession-heading {
		flex-direction: column;
		gap: 7px;
	}

	.profession-heading > strong {
		max-width: none;
		text-align: left;
	}
}

/* Wowhead injects the verified item artwork into direct database links. */
.gear-name .item-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	max-width: 100%;
}

.gear-name .item-link .iconmedium,
.gear-name .item-link .iconsmall,
.gear-name .item-link ins {
	flex: 0 0 auto;
	vertical-align: middle;
}

/* V3.5: simplified gear rows - slot art, then actual item art, then item details. */
.gear-slot-heading {
	gap: 7px;
}

.slot-icon,
.gear-item-art {
	position: relative;
	width: 56px;
	height: 56px;
	padding: 3px;
	border: 1px solid rgba(239, 201, 109, 0.36);
	border-radius: 7px;
	background: #020710;
	box-shadow: 0 0 14px rgba(74, 158, 219, 0.09);
	overflow: hidden;
}

.slot-icon {
	border-color: rgba(126, 202, 250, 0.43);
	box-shadow: inset 0 0 18px rgba(64, 151, 213, 0.08), 0 0 14px rgba(74, 158, 219, 0.08);
}

.slot-icon img,
.gear-item-art > img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 4px;
	object-fit: cover;
}

.gear-art-link {
	position: absolute;
	inset: 3px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	overflow: hidden;
}

.gear-art-link .iconlarge,
.gear-art-link .iconmedium,
.gear-art-link .iconsmall,
.gear-art-link ins {
	display: block !important;
	width: 50px !important;
	height: 50px !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 4px !important;
	background-size: cover !important;
}

.gear-item-art:has(.gear-art-link ins) .gear-item-fallback,
.gear-item-art:has(.gear-art-link .iconlarge) .gear-item-fallback,
.gear-item-art:has(.gear-art-link .iconmedium) .gear-item-fallback {
	opacity: 0;
}

.visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Text links keep tooltips and colors, but no longer inject a second item icon. */
.gear-name .item-link {
	display: inline;
	max-width: none;
}

.gear-name .item-link .iconlarge,
.gear-name .item-link .iconmedium,
.gear-name .item-link .iconsmall,
.gear-name .item-link ins {
	display: none !important;
}

@media (max-width: 580px) {
	.slot-icon,
	.gear-item-art {
		width: 48px;
		height: 48px;
	}

	.gear-art-link .iconlarge,
	.gear-art-link .iconmedium,
	.gear-art-link .iconsmall,
	.gear-art-link ins {
		width: 42px !important;
		height: 42px !important;
	}
}

/* V3.6: keep item artwork and its text block on the same vertical centerline. */
.gear-option {
	align-items: center;
}

.gear-item-art {
	align-self: center;
}

.gear-option-copy {
	display: flex;
	min-height: 56px;
	padding: 0;
	flex-direction: column;
	justify-content: center;
}

.gear-rank {
	margin-bottom: 4px;
	line-height: 1;
}

.gear-name {
	line-height: 1.2;
}

.gear-source {
	margin-top: 4px;
	line-height: 1.25;
}

@media (max-width: 580px) {
	.gear-option-copy {
		min-height: 48px;
	}
}

/* V3.7: remove the remaining inset around item artwork and align the copy to the icon frame. */
.gear-option {
	grid-template-columns: 56px minmax(0, 1fr);
	column-gap: 12px;
	align-items: center;
}

.gear-item-art {
	width: 56px;
	height: 56px;
	padding: 0;
}

.gear-item-art > img {
	border-radius: 6px;
}

.gear-art-link {
	inset: 0;
	border-radius: 6px;
}

.gear-art-link .iconlarge,
.gear-art-link .iconmedium,
.gear-art-link .iconsmall,
.gear-art-link ins {
	width: 54px !important;
	height: 54px !important;
	border-radius: 6px !important;
}

.gear-option-copy {
	display: grid;
	grid-template-rows: auto 1fr auto;
	align-items: center;
	align-self: center;
	min-height: 56px;
	height: 56px;
	padding: 0;
}

.gear-rank {
	align-self: start;
	margin: 0;
	line-height: 1;
}

.gear-name {
	align-self: center;
	line-height: 1.15;
}

.gear-source {
	align-self: end;
	margin: 0;
	line-height: 1.15;
}

@media (max-width: 580px) {
	.gear-option {
		grid-template-columns: 48px minmax(0, 1fr);
	}

	.gear-item-art {
		width: 48px;
		height: 48px;
	}

	.gear-art-link .iconlarge,
	.gear-art-link .iconmedium,
	.gear-art-link .iconsmall,
	.gear-art-link ins {
		width: 46px !important;
		height: 46px !important;
	}

	.gear-option-copy {
		min-height: 48px;
		height: 48px;
	}
}

/* V3.8: use a simple flex row so item artwork and copy remain directly adjacent. */
.gear-option {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
}

.gear-item-art {
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	align-self: center;
}

.gear-option-copy {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	min-height: 56px;
	height: auto;
	padding: 0;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	text-align: left;
}

.gear-rank,
.gear-name,
.gear-source {
	align-self: stretch;
	width: 100%;
	text-align: left;
}

.gear-rank {
	margin: 0 0 4px;
}

.gear-source {
	margin: 4px 0 0;
}

@media (max-width: 580px) {
	.gear-item-art {
		flex-basis: 48px;
		width: 48px;
		height: 48px;
	}

	.gear-option-copy {
		min-height: 48px;
	}
}

/* V3.9: the linked Wowhead artwork is now the icon frame itself.
   This removes the undersized nested link box that clipped the right and bottom edges. */
.gear-option > .gear-item-art.gear-art-link {
	position: relative;
	display: block;
	flex: 0 0 56px;
	width: 56px;
	height: 56px;
	min-width: 56px;
	padding: 0;
	border: 1px solid rgba(239, 201, 109, 0.48);
	border-radius: 7px;
	background: #020710;
	box-sizing: border-box;
	overflow: hidden;
	line-height: 0;
	inset: 0 !important;
	top: 0 !important;
	right: auto !important;
	bottom: auto !important;
	left: 0 !important;
}

.gear-option > .gear-item-art.gear-art-link > .gear-item-fallback {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 6px;
	object-fit: cover;
}

/* Wowhead's injected icon must fill the link's content box, without its own frame. */
.gear-option > .gear-item-art.gear-art-link ins,
.gear-option > .gear-item-art.gear-art-link .iconlarge,
.gear-option > .gear-item-art.gear-art-link .iconmedium,
.gear-option > .gear-item-art.gear-art-link .iconsmall {
	position: absolute !important;
	inset: 0 !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 6px !important;
	box-sizing: border-box !important;
	background-size: cover !important;
	background-position: center !important;
	box-shadow: none !important;
	overflow: hidden !important;
}

.gear-option > .gear-item-art.gear-art-link:has(ins) > .gear-item-fallback,
.gear-option > .gear-item-art.gear-art-link:has(.iconlarge) > .gear-item-fallback,
.gear-option > .gear-item-art.gear-art-link:has(.iconmedium) > .gear-item-fallback,
.gear-option > .gear-item-art.gear-art-link:has(.iconsmall) > .gear-item-fallback {
	opacity: 0;
}

@media (max-width: 580px) {
	.gear-option > .gear-item-art.gear-art-link {
		flex-basis: 48px;
		width: 48px;
		height: 48px;
		min-width: 48px;
	}
}

/* V3.10: let Wowhead's generated item icon provide the visible frame.
   The link itself previously had a second gold border, which remained visible
   along the top and left edges around the injected icon. */
.gear-option > a.gear-item-art.gear-art-link {
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	outline: 0 !important;
	overflow: visible !important;
}


/* V3.13: isolate Wowhead's generated icon markup, then replace it with one clean image.
   Wowhead injects its own border and highlight layers (including del/a elements).
   Those layers are hidden immediately, so they cannot leave stray top or left lines. */
.gear-option > a.gear-item-art.gear-art-link {
	position: relative !important;
	display: block !important;
	flex: 0 0 56px !important;
	width: 56px !important;
	height: 56px !important;
	min-width: 56px !important;
	padding: 0 !important;
	border: 1px solid rgba(239, 201, 109, 0.48) !important;
	border-radius: 7px !important;
	background: #020710 !important;
	box-shadow: none !important;
	overflow: hidden !important;
	line-height: 0 !important;
}

.gear-option > a.gear-item-art.gear-art-link > .gear-clean-icon {
	position: absolute !important;
	inset: 2px !important;
	display: block !important;
	width: calc(100% - 4px) !important;
	height: calc(100% - 4px) !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 5px !important;
	background: #020710 !important;
	object-fit: contain !important;
}

/* Hide every layer Wowhead injects while JavaScript extracts the actual icon URL. */
.gear-option > a.gear-item-art.gear-art-link > :not(.gear-clean-icon):not(.visually-hidden),
.gear-option > a.gear-item-art.gear-art-link .iconlarge,
.gear-option > a.gear-item-art.gear-art-link .iconmedium,
.gear-option > a.gear-item-art.gear-art-link .iconsmall,
.gear-option > a.gear-item-art.gear-art-link ins,
.gear-option > a.gear-item-art.gear-art-link del,
.gear-option > a.gear-item-art.gear-art-link .iconlarge > a,
.gear-option > a.gear-item-art.gear-art-link .iconmedium > a,
.gear-option > a.gear-item-art.gear-art-link .iconsmall > a {
	position: absolute !important;
	inset: 0 !important;
	visibility: hidden !important;
	opacity: 0 !important;
	border: 0 !important;
	outline: 0 !important;
	background: none !important;
	background-image: none !important;
	box-shadow: none !important;
}

@media (max-width: 580px) {
	.gear-option > a.gear-item-art.gear-art-link {
		flex-basis: 48px !important;
		width: 48px !important;
		height: 48px !important;
		min-width: 48px !important;
	}
}


/* V3.15: every exact item in paired ring/trinket sets receives its own icon, link, and source. */
.gear-option {
	display: block;
	min-width: 0;
	padding: 12px;
}

.gear-option-items {
	display: grid;
	gap: 10px;
	margin-top: 8px;
}

.gear-item-row {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: 12px;
	align-items: center;
	min-width: 0;
}

.gear-item-row + .gear-item-row {
	padding-top: 10px;
	border-top: 1px solid rgba(109, 183, 233, 0.12);
}

.gear-item-copy {
	display: flex;
	min-width: 0;
	min-height: 56px;
	flex-direction: column;
	justify-content: center;
}

.gear-item-copy .gear-name,
.gear-item-copy .gear-source {
	width: 100%;
	text-align: left;
}

.gear-item-copy .gear-source {
	margin: 5px 0 0;
}

@media (max-width: 580px) {
	.gear-item-row {
		grid-template-columns: 48px minmax(0, 1fr);
		gap: 10px;
	}

	.gear-item-copy {
		min-height: 48px;
	}
}

/* V3.16: v3.15 nested each item inside .gear-item-row, so the old direct-child
   icon rules no longer applied. Restore the item icon as a real grid column and
   keep Wowhead's generated artwork contained inside that frame. */
.gear-item-row > a.gear-item-art.gear-art-link {
	position: relative !important;
	inset: auto !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
	display: block !important;
	align-self: center !important;
	width: 56px !important;
	height: 56px !important;
	min-width: 56px !important;
	max-width: 56px !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 1px solid rgba(239, 201, 109, 0.48) !important;
	border-radius: 7px !important;
	background: #020710 !important;
	box-shadow: none !important;
	overflow: hidden !important;
	line-height: 0 !important;
	box-sizing: border-box !important;
}

.gear-item-row > a.gear-item-art.gear-art-link > .gear-item-fallback,
.gear-item-row > a.gear-item-art.gear-art-link > .gear-clean-icon {
	position: absolute !important;
	inset: 2px !important;
	display: block !important;
	width: calc(100% - 4px) !important;
	height: calc(100% - 4px) !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 5px !important;
	background: #020710 !important;
	object-fit: cover !important;
}

/* Hide Wowhead's temporary border/highlight layers while roster.js extracts
   the real icon image. The accessible label and clean image remain visible. */
.gear-item-row > a.gear-item-art.gear-art-link > :not(.gear-item-fallback):not(.gear-clean-icon):not(.visually-hidden),
.gear-item-row > a.gear-item-art.gear-art-link .iconlarge,
.gear-item-row > a.gear-item-art.gear-art-link .iconmedium,
.gear-item-row > a.gear-item-art.gear-art-link .iconsmall,
.gear-item-row > a.gear-item-art.gear-art-link ins,
.gear-item-row > a.gear-item-art.gear-art-link del {
	position: absolute !important;
	inset: 0 !important;
	visibility: hidden !important;
	opacity: 0 !important;
	border: 0 !important;
	outline: 0 !important;
	background: none !important;
	background-image: none !important;
	box-shadow: none !important;
}

.gear-item-row > a.gear-item-art.gear-art-link[data-icon-cleaned="true"] > .gear-item-fallback {
	display: none !important;
}

@media (max-width: 580px) {
	.gear-item-row > a.gear-item-art.gear-art-link {
		width: 48px !important;
		height: 48px !important;
		min-width: 48px !important;
		max-width: 48px !important;
	}
}

/* V3.19 paladin class icon */
.paladin-mark {
	border: 0;
	background: transparent;
	box-shadow: none;
}

.paladin-mark::before,
.paladin-mark::after {
	display: none;
}

.paladin-mark img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: drop-shadow(0 0 10px rgba(255, 214, 111, 0.24)) drop-shadow(0 5px 12px rgba(0, 0, 0, 0.65));
}


/* Version 1.4.3: slightly toned-down background fog and shine. */
.hero h1 {
	font-size: clamp(1.9rem, 4.4vw, 3rem);
	letter-spacing: clamp(0.09rem, 0.45vw, 0.24rem);
	white-space: nowrap;
}

.hero-kicker {
	color: #c4d0da;
}

.character-tab {
	color: #aeb8c0;
}

.character-tab .tab-level {
	color: #929fa9;
}

.section-tab {
	color: #aab5bd;
}

.card-label {
	color: #aeb9c2;
}

.content-card p,
.profession-card p,
.note-card p,
.character-summary,
.section-intro,
.roster-intro,
.gear-source,
.sync-note p {
	color: var(--text-muted);
}

.compact-list li,
.talent-list li {
	color: #c5ccd2;
}

.callout {
	color: #d0c9ba;
}

.muted {
	color: #a4afb7;
}

.roster-card p {
	color: #bdc6cd;
}

.site-footer {
	color: rgba(205, 211, 215, 0.78);
}

.site-footer a {
	color: rgba(240, 226, 195, 0.9);
}

@media (max-width: 580px) {
	.hero h1 {
		font-size: clamp(1.28rem, 7vw, 1.65rem);
		line-height: 1.05;
		letter-spacing: 0.08rem;
		white-space: normal;
	}
}


/* Version 1.5.1: hidden scrollbars with scrolling preserved. */
html,
body,
.character-tabs,
.section-tabs,
.talent-tree {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
.character-tabs::-webkit-scrollbar,
.section-tabs::-webkit-scrollbar,
.talent-tree::-webkit-scrollbar {
	display: none;
	width: 0;
	height: 0;
}

.talent-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
	align-items: start;
}

.talent-tree {
	display: grid;
	grid-template-columns: 206px minmax(0, 1fr);
	min-width: 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid rgba(105, 180, 231, 0.24);
	border-radius: 9px;
	background: rgba(5, 13, 24, 0.94);
}

.talent-image-wrap {
	width: 206px;
	height: 556px;
	aspect-ratio: auto;
	overflow: hidden;
	border-right: 1px solid rgba(117, 190, 239, 0.24);
	border-bottom: 0;
	background: #030914;
}

.talent-image-wrap img {
	display: block;
	width: 206px;
	height: 556px;
	max-width: none;
	object-fit: none;
	object-position: top left;
}

.talent-tree-body {
	position: relative;
	min-width: 0;
	padding: 14px 14px 12px;
}

.talent-tree-heading {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	min-height: 29px;
	padding-bottom: 8px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.talent-tree-heading h4 {
	margin: 0;
}

.talent-total {
	position: static;
	flex: 0 0 auto;
	color: var(--gold);
	font-size: 1.35rem;
	opacity: 0.8;
}

.talent-list {
	margin-top: 4px;
}

.talent-list li {
	gap: 10px;
	padding: 4px 0;
	font-size: 0.74rem;
	line-height: 1.15;
}

.talent-list li > span:first-child {
	min-width: 0;
}

.talent-empty {
	display: flex;
	align-items: baseline;
	gap: 9px;
	margin: 18px 0 0;
	color: var(--text-muted);
}

.talent-empty strong {
	color: var(--gold);
	font-family: "Cinzel", serif;
	font-size: 1.45rem;
}

.glyph-section {
	margin-top: 20px;
}

.glyph-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.glyph-card {
	padding: 16px 18px;
	border: 1px solid rgba(105, 180, 231, 0.2);
	border-radius: 9px;
	background:
		linear-gradient(135deg, rgba(72, 154, 211, 0.045), transparent 42%),
		var(--card-bg);
}

.glyph-card .card-label {
	display: block;
	margin-bottom: 8px;
}

.gear-notes {
	margin-top: 14px;
}

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

@media (max-width: 620px) {
	.talent-tree {
		grid-template-columns: 206px minmax(190px, 1fr);
		overflow-x: auto;
	}

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


/* Version 1.5.2: mobile character selector replaces horizontal character scrolling. */
.mobile-character-nav {
	display: none;
}

@media (max-width: 760px) {
	.character-tabs {
		display: none;
	}

	.mobile-character-nav {
		display: grid;
		grid-template-columns: 44px minmax(0, 1fr) 44px;
		gap: 8px;
		align-items: stretch;
		width: 100%;
	}

	.mobile-character-step,
	.mobile-character-select-wrap {
		min-height: 52px;
		border: 1px solid rgba(113, 188, 238, 0.28);
		border-radius: 8px;
		background: linear-gradient(180deg, rgba(90, 168, 224, 0.09), rgba(5, 13, 24, 0.9));
		box-shadow: inset 0 0 16px rgba(64, 151, 213, 0.045);
	}

	.mobile-character-step {
		padding: 0;
		color: var(--gold-bright);
		font-family: Georgia, serif;
		font-size: 2rem;
		line-height: 1;
		cursor: pointer;
	}

	.mobile-character-step:focus-visible,
	.mobile-character-select-wrap:focus-within {
		outline: 1px solid rgba(241, 194, 97, 0.72);
		outline-offset: 2px;
	}

	.mobile-character-select-wrap {
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-width: 0;
		padding: 6px 12px 7px;
	}

	.mobile-character-select-wrap > span {
		margin-bottom: 1px;
		color: var(--blue);
		font-family: "Rajdhani", "Segoe UI", sans-serif;
		font-size: 0.62rem;
		font-weight: 700;
		letter-spacing: 0.15rem;
		text-transform: uppercase;
	}

	.mobile-character-select {
		min-width: 0;
	}

	#mobile-character-select {
		width: 100%;
		padding: 0 24px 0 0;
		border: 0;
		outline: 0;
		color: #f0e6ce;
		background: transparent;
		font-family: "Rajdhani", "Segoe UI", sans-serif;
		font-size: 1rem;
		font-weight: 600;
		letter-spacing: 0.035rem;
		appearance: auto;
	}

	#mobile-character-select option {
		color: #eef4f8;
		background: #071321;
	}
}


/* Version 1.5.3: stable full-width mobile character pager and overflow fix. */
html,
body {
	overflow-x: hidden;
}

.mobile-character-current {
	display: none;
}

@media (max-width: 760px) {
	.site-shell,
	.roster-panel,
	.panel-header,
	.panel-heading-wrap,
	#app {
		min-width: 0;
		max-width: 100%;
	}

	.panel-header {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: 15px;
		align-items: stretch;
	}

	.panel-heading-wrap h2 {
		white-space: normal;
		overflow-wrap: anywhere;
	}

	.character-tabs {
		display: none !important;
	}

	.mobile-character-nav {
		display: grid;
		grid-template-columns: 46px minmax(0, 1fr) 46px;
		gap: 8px;
		align-items: stretch;
		width: 100%;
		max-width: 100%;
	}

	.mobile-character-step,
	.mobile-character-current {
		min-width: 0;
		min-height: 54px;
		border: 1px solid rgba(113, 188, 238, 0.28);
		border-radius: 8px;
		background: linear-gradient(180deg, rgba(90, 168, 224, 0.09), rgba(5, 13, 24, 0.9));
		box-shadow: inset 0 0 16px rgba(64, 151, 213, 0.045);
	}

	.mobile-character-step {
		display: grid;
		place-items: center;
		padding: 0;
		color: var(--gold-bright);
		font-family: Georgia, serif;
		font-size: 2rem;
		line-height: 1;
		cursor: pointer;
	}

	.mobile-character-current {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 6px 10px;
		text-align: center;
	}

	.mobile-character-current > span {
		display: block;
		max-width: 100%;
		overflow: hidden;
		color: #f0e6ce;
		font-family: "Rajdhani", "Segoe UI", sans-serif;
		font-size: 1rem;
		font-weight: 700;
		letter-spacing: 0.055rem;
		line-height: 1.1;
		text-overflow: ellipsis;
		text-transform: uppercase;
		white-space: nowrap;
	}

	.mobile-character-current small {
		display: block;
		margin-top: 2px;
		color: var(--blue);
		font-family: "Rajdhani", "Segoe UI", sans-serif;
		font-size: 0.67rem;
		font-weight: 700;
		letter-spacing: 0.13rem;
		line-height: 1;
		text-transform: uppercase;
	}

	.mobile-character-step:focus-visible {
		outline: 1px solid rgba(241, 194, 97, 0.72);
		outline-offset: 2px;
	}
}

@media (max-width: 580px) {
	.section-tabs {
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 2px;
		overflow: hidden;
		width: 100%;
		margin-right: 0;
		margin-left: 0;
	}

	.section-tab {
		min-width: 0;
		padding: 8px 2px;
		font-size: 0.6rem;
		letter-spacing: 0.045rem;
		white-space: nowrap;
	}
}