/*
 * BLST public page styles (home, news, article, hiscores, play, donate, auth, account, legal, 404).
 * Shared components live in site.css.
 */

/* =========================================================
   Home: hero
   ========================================================= */

.hero {
	position: relative;
	min-height: min(100svh, 980px);
	min-height: min(100vh, 980px);
	margin-top: calc(-1 * var(--nav-height));
	padding: calc(var(--nav-height) + clamp(3rem, 9vh, 6rem)) 0 clamp(8rem, 22vh, 14rem);
	display: flex;
	align-items: center;
	overflow: hidden;
	isolation: isolate;
	text-align: center;
}

@supports (min-height: 100svh) {
	.hero {
		min-height: min(100svh, 980px);
	}
}

.hero-bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.hero-sky {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(60% 50% at 50% 38%, rgba(245, 184, 61, 0.22), transparent 70%),
		radial-gradient(40% 35% at 78% 18%, rgba(229, 72, 77, 0.12), transparent 70%),
		radial-gradient(120% 80% at 50% 0%, #161a22 0%, var(--bg) 70%);
}

.hero-ring {
	position: absolute;
	left: 50%;
	top: 42%;
	width: min(980px, 150vw);
	aspect-ratio: 1;
	translate: -50% calc(-50% + var(--parallax-y, 0px));
	background: url("/assets/img/deco/rune-ring.svg") center / contain no-repeat;
	opacity: 0.16;
	animation: ring-spin 180s linear infinite;
	-webkit-mask-image: radial-gradient(circle, #000 55%, transparent 72%);
	mask-image: radial-gradient(circle, #000 55%, transparent 72%);
}

@keyframes ring-spin {
	to {
		rotate: 360deg;
	}
}

.hero-layer {
	position: absolute;
	left: -5%;
	right: -5%;
	bottom: 0;
	translate: 0 var(--parallax-y, 0px);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: cover;
}

.hero-layer-back {
	height: 62%;
	background-image: url("/assets/img/deco/mountains-back.svg");
	opacity: 0.85;
}

.hero-layer-mid {
	height: 48%;
	background-image: url("/assets/img/deco/mountains-mid.svg");
}

.hero-layer-front {
	height: 42%;
	bottom: -2px;
	background-image: url("/assets/img/deco/mountains-front.svg");
}

.hero-layer-front::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 30%;
	background: linear-gradient(transparent, var(--bg));
}

.embers {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.embers span {
	position: absolute;
	bottom: -10px;
	left: 50%;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--gold-strong);
	box-shadow: 0 0 6px 1px rgba(255, 180, 60, 0.8);
	opacity: 0;
	animation: ember 14s linear infinite;
}

.embers span:nth-child(1) { left: 8%; animation-delay: 0s; animation-duration: 13s; }
.embers span:nth-child(2) { left: 17%; animation-delay: 3s; animation-duration: 16s; }
.embers span:nth-child(3) { left: 26%; animation-delay: 6s; animation-duration: 12s; width: 2px; height: 2px; }
.embers span:nth-child(4) { left: 34%; animation-delay: 1.5s; animation-duration: 18s; }
.embers span:nth-child(5) { left: 43%; animation-delay: 8s; animation-duration: 14s; width: 2px; height: 2px; }
.embers span:nth-child(6) { left: 51%; animation-delay: 4.5s; animation-duration: 15s; }
.embers span:nth-child(7) { left: 58%; animation-delay: 10s; animation-duration: 13s; }
.embers span:nth-child(8) { left: 66%; animation-delay: 2s; animation-duration: 17s; width: 2px; height: 2px; }
.embers span:nth-child(9) { left: 73%; animation-delay: 7s; animation-duration: 12s; }
.embers span:nth-child(10) { left: 80%; animation-delay: 5s; animation-duration: 16s; }
.embers span:nth-child(11) { left: 87%; animation-delay: 9s; animation-duration: 14s; width: 2px; height: 2px; }
.embers span:nth-child(12) { left: 93%; animation-delay: 11s; animation-duration: 15s; }
.embers span:nth-child(13) { left: 63%; animation-delay: 12.5s; animation-duration: 19s; }
.embers span:nth-child(14) { left: 22%; animation-delay: 9.5s; animation-duration: 17s; }

@keyframes ember {
	0% {
		transform: translate(0, 0);
		opacity: 0;
	}
	10% {
		opacity: 0.9;
	}
	50% {
		transform: translate(30px, -45vh);
	}
	85% {
		opacity: 0.5;
	}
	100% {
		transform: translate(-20px, -95vh);
		opacity: 0;
	}
}

.hero-content {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.hero-shield {
	width: clamp(96px, 14vw, 150px);
	height: auto;
	margin-bottom: var(--sp-4);
	filter: drop-shadow(0 18px 40px rgba(245, 184, 61, 0.35)) drop-shadow(0 0 2px rgba(0, 0, 0, 0.8));
}

.hero-title {
	margin: 0;
	font-family: var(--font-serif);
	font-size: clamp(4.5rem, 16vw, 11rem);
	font-weight: 700;
	line-height: 0.92;
	letter-spacing: 0.02em;
	filter: drop-shadow(0 8px 30px rgba(245, 184, 61, 0.25));
}

.hero-tagline {
	margin: var(--sp-4) 0 var(--sp-2);
	font-size: clamp(1.6rem, 4vw, 2.6rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.1;
}

.hero-lead {
	max-width: 36rem;
	margin-bottom: var(--sp-6);
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-3);
}

.hero-status {
	margin: var(--sp-6) 0 0;
}

.hero-scroll {
	position: absolute;
	left: 50%;
	bottom: clamp(1.5rem, 5vh, 3rem);
	translate: -50% 0;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	color: var(--text-2);
	border: 1px solid var(--border-strong);
	background: rgba(255, 255, 255, 0.04);
	animation: bob 2.4s var(--ease) infinite;
}

.hero-scroll:hover {
	color: var(--text);
}

@keyframes bob {
	50% {
		transform: translateY(6px);
	}
}

/* Page-load entrance (pure CSS, no JS needed) */
.intro {
	animation: intro 1.1s var(--ease-out) both;
}

.intro-1 { animation-delay: 0.12s; }
.intro-2 { animation-delay: 0.22s; }
.intro-3 { animation-delay: 0.36s; }
.intro-4 { animation-delay: 0.5s; }
.intro-5 { animation-delay: 0.64s; }

@keyframes intro {
	from {
		opacity: 0;
		transform: translateY(22px);
		filter: blur(6px);
	}
	to {
		opacity: 1;
		transform: none;
		filter: blur(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.intro,
	.hero-ring,
	.hero-scroll,
	.embers span {
		animation: none;
	}

	.embers {
		display: none;
	}
}

/* =========================================================
   Home: facts, features, splits
   ========================================================= */

.facts {
	position: relative;
	padding-block: var(--sp-7);
	border-block: 1px solid var(--border);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.015), transparent);
}

.facts-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--sp-5);
	text-align: center;
}

.fact {
	display: grid;
	gap: var(--sp-1);
}

.fact-value {
	font-size: clamp(1.8rem, 4.2vw, 3rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.1;
}

.fact-label {
	font-size: var(--fs-sm);
	color: var(--text-muted);
}

@media (max-width: 720px) {
	.facts-grid {
		grid-template-columns: 1fr 1fr;
		row-gap: var(--sp-6);
	}
}

.feature-head {
	text-align: center;
	max-width: 52rem;
	margin: 0 auto clamp(2.5rem, 6vw, 4.5rem);
}

.feature-head .lead {
	max-width: 40rem;
	margin-inline: auto;
}

.feature-media {
	position: relative;
	margin: 0;
	border-radius: var(--radius-xl);
	overflow: hidden;
	border: 1px solid var(--border);
	box-shadow: var(--shadow-lg), 0 0 120px rgba(245, 184, 61, 0.08);
	background: var(--surface);
}

.feature-media > img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.feature-chip {
	position: absolute;
	left: var(--sp-5);
	bottom: var(--sp-5);
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	padding: 0.5rem 0.9rem;
	border-radius: var(--radius-pill);
	font-size: var(--fs-sm);
	font-weight: 600;
}

.split {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: clamp(2rem, 6vw, 6rem);
	align-items: center;
}

.split-reverse .split-text {
	order: 2;
}

.split-text .headline {
	font-size: clamp(2.1rem, 4.6vw, 3.6rem);
}

.split-text .lead {
	margin-bottom: var(--sp-5);
}

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

	.split-reverse .split-text {
		order: 0;
	}
}

.ticks {
	list-style: none;
	margin: 0 0 var(--sp-6);
	padding: 0;
	display: grid;
	gap: var(--sp-3);
	color: var(--text-2);
}

.ticks li {
	display: flex;
	gap: var(--sp-3);
	align-items: flex-start;
}

.ticks .icon {
	flex: none;
	width: 22px;
	height: 22px;
	padding: 4px;
	border-radius: 50%;
	background: var(--gold-soft);
	color: var(--gold);
	margin-top: 1px;
}

/* Window frame around screenshots */
.window {
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid var(--border-strong);
	background: var(--surface);
	box-shadow: var(--shadow-lg), 0 0 100px rgba(245, 184, 61, 0.08);
	transform: perspective(1600px) rotateY(-6deg) rotateX(2deg);
	transition: transform 1.2s var(--ease-out);
}

.window:hover {
	transform: perspective(1600px) rotateY(0) rotateX(0);
}

.window-bar {
	display: flex;
	align-items: center;
	gap: 7px;
	height: 34px;
	padding: 0 12px;
	background: var(--surface-2);
	border-bottom: 1px solid var(--border);
}

.window-bar span {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: #ff5f57;
}

.window-bar span:nth-child(2) {
	background: #febc2e;
}

.window-bar span:nth-child(3) {
	background: #28c840;
}

.window-bar em {
	margin-left: auto;
	margin-right: auto;
	font-style: normal;
	font-size: var(--fs-xs);
	color: var(--text-muted);
	padding-right: 45px;
}

.window img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

@media (max-width: 900px), (prefers-reduced-motion: reduce) {
	.window {
		transform: none;
	}
}

/* Launcher mock (decorative, mirrors the JavaFX launcher look) */
.launcher-mock {
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: #1f1f1f;
	border: 1px solid #3a3220;
	box-shadow: var(--shadow-lg), 0 0 100px rgba(245, 184, 61, 0.1);
	font-size: var(--fs-sm);
	color: #e8e2d6;
	transform: perspective(1600px) rotateY(6deg) rotateX(2deg);
	transition: transform 1.2s var(--ease-out);
}

.launcher-mock:hover {
	transform: none;
}

@media (max-width: 900px), (prefers-reduced-motion: reduce) {
	.launcher-mock {
		transform: none;
	}
}

.lm-top {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	padding: 12px 18px;
	background: #171717;
	border-bottom: 1px solid #4a3f2a;
}

.lm-top img {
	width: 28px;
	height: 28px;
}

.lm-tab {
	padding-bottom: 4px;
	color: #9a948a;
	border-bottom: 2px solid transparent;
}

.lm-tab.is-active {
	color: #e8e2d6;
	border-bottom-color: #d4b26a;
}

.lm-user {
	margin-left: auto;
	color: #e9c46a;
	font-weight: 700;
}

.lm-body {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 14px;
	padding: 18px;
	min-height: 220px;
}

.lm-news {
	display: grid;
	align-content: start;
	gap: 8px;
	padding: 10px;
	border-radius: 10px;
	background: #262626;
}

.lm-news-img {
	display: block;
	aspect-ratio: 16 / 9;
	border-radius: 6px;
	background: radial-gradient(70% 90% at 70% 20%, rgba(245, 184, 61, 0.45), transparent 70%), linear-gradient(135deg, #3a2a12, #151515);
}

.lm-news-img.lm-alt {
	background: radial-gradient(70% 90% at 30% 30%, rgba(90, 200, 250, 0.35), transparent 70%), linear-gradient(135deg, #12263a, #151515);
}

.lm-line {
	display: block;
	height: 8px;
	border-radius: 4px;
	background: #3a3a3a;
}

.lm-line.w-50 { width: 50%; }
.lm-line.w-60 { width: 60%; }
.lm-line.w-70 { width: 70%; }
.lm-line.w-80 { width: 80%; }
.lm-line.w-90 { width: 90%; }

.lm-bottom {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	padding: 14px 18px;
	background: #171717;
	border-top: 1px solid #4a3f2a;
}

.lm-progress {
	flex: 1;
	display: grid;
	gap: 6px;
	color: #9a948a;
	font-size: var(--fs-xs);
}

.lm-progress i {
	display: block;
	height: 5px;
	border-radius: 3px;
	background: linear-gradient(90deg, #d4b26a, #f2d48b);
}

.lm-play {
	padding: 10px 34px;
	border-radius: 6px;
	background: linear-gradient(#f2d48b, #d4b26a);
	color: #2a1f0a;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	box-shadow: 0 0 24px rgba(242, 212, 139, 0.35);
}

/* Bosses */
.bosses {
	background:
		radial-gradient(50% 60% at 50% 0%, rgba(229, 72, 77, 0.1), transparent 70%),
		linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.015), transparent);
}

.boss-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(0.75rem, 2vw, 1.25rem);
}

.boss-card {
	position: relative;
	display: grid;
	justify-items: center;
	align-content: center;
	gap: var(--sp-3);
	min-height: 220px;
	padding: var(--sp-6) var(--sp-4);
	border-radius: var(--radius-lg);
	border: 1px solid var(--border);
	background: radial-gradient(80% 70% at 50% 0%, rgba(245, 184, 61, 0.09), transparent 70%), linear-gradient(180deg, var(--surface), var(--bg-elevated));
	text-align: center;
	overflow: hidden;
	transition: transform var(--dur-slow) var(--ease-out), border-color var(--dur) var(--ease), box-shadow var(--dur-slow) var(--ease-out);
}

.boss-card:hover {
	transform: translateY(-4px);
	border-color: rgba(245, 184, 61, 0.35);
	box-shadow: var(--glow-gold);
}

.boss-card h3 {
	margin: 0;
	font-family: var(--font-serif);
	font-size: var(--fs-lg);
	letter-spacing: 0;
}

.boss-emblem {
	position: relative;
	display: grid;
	place-items: center;
	width: 88px;
	height: 88px;
	border-radius: 50%;
	font-family: var(--font-serif);
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--gold-strong);
	background: radial-gradient(circle, rgba(245, 184, 61, 0.18), rgba(245, 184, 61, 0.02) 70%);
	border: 1px solid rgba(245, 184, 61, 0.35);
	text-shadow: 0 0 18px rgba(245, 184, 61, 0.6);
}

.boss-emblem::before {
	content: "";
	position: absolute;
	inset: -14px;
	background: url("/assets/img/deco/rune-ring.svg") center / contain no-repeat;
	opacity: 0.45;
	transition: rotate 2s var(--ease-out);
}

.boss-card:hover .boss-emblem::before {
	rotate: 45deg;
}

/* The game's own 50x50 hiscore sprite, scaled up crisp. */
.boss-emblem-icon img {
	position: relative;
	width: 64px;
	height: 64px;
	image-rendering: pixelated;
	filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.6));
	transition: transform var(--dur-slow) var(--ease-out);
}

.boss-card:hover .boss-emblem-icon img {
	transform: scale(1.08);
}

.boss-card-world {
	border-color: rgba(245, 184, 61, 0.3);
}

@media (max-width: 900px) {
	.boss-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 420px) {
	.boss-card {
		min-height: 180px;
		padding: var(--sp-5) var(--sp-3);
	}

	.boss-emblem {
		width: 64px;
		height: 64px;
		font-size: 1.2rem;
	}

	.boss-emblem-icon img {
		width: 48px;
		height: 48px;
	}

	.boss-card h3 {
		font-size: var(--fs-base);
	}
}

/* Slayer parchment */
.parchment {
	position: relative;
	max-width: 440px;
	margin-inline: auto;
	padding: var(--sp-7) var(--sp-6) var(--sp-8);
	color: #3b2a12;
	background: url("/assets/img/deco/parchment.svg") center / 100% 100% no-repeat;
	border-radius: 6px;
	box-shadow: var(--shadow-lg);
	font-family: var(--font-serif);
	transform: rotate(-2deg);
	transition: transform 1s var(--ease-out);
}

.parchment:hover {
	transform: rotate(0);
}

.parchment::before,
.parchment::after {
	content: "";
	position: absolute;
	left: -10px;
	right: -10px;
	height: 22px;
	border-radius: 11px;
	background: linear-gradient(180deg, #8a6431, #5a3d18 60%, #3b2610);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.parchment::before {
	top: -11px;
}

.parchment::after {
	bottom: -11px;
}

.parchment-title {
	margin: 0;
	font-size: 1.8rem;
	font-weight: 700;
	text-align: center;
	color: #5a2a0e;
}

.parchment-sub {
	margin: 0 0 var(--sp-5);
	text-align: center;
	font-style: italic;
	color: #6b5332;
}

.parchment ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sp-3);
}

.parchment li {
	display: flex;
	justify-content: space-between;
	gap: var(--sp-4);
	padding-bottom: var(--sp-2);
	border-bottom: 1px dashed rgba(90, 61, 24, 0.35);
	font-size: 1.05rem;
}

.parchment li span {
	color: #6b5332;
}

.parchment li strong {
	color: #3b2a12;
	text-align: right;
}

.parchment-seal {
	position: absolute;
	right: 28px;
	bottom: 26px;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #d0484d, #8a1c20 70%);
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45), inset 0 0 0 3px rgba(0, 0, 0, 0.15);
}

.parchment-seal img {
	image-rendering: pixelated;
}

@media (prefers-reduced-motion: reduce) {
	.parchment {
		transform: none;
	}
}

.big-stat {
	display: flex;
	align-items: baseline;
	gap: var(--sp-4);
}

.big-stat-value {
	font-size: clamp(4rem, 10vw, 7rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
}

.big-stat-label {
	max-width: 10rem;
	color: var(--text-2);
	font-weight: 500;
}

/* Modes */
.xp-modes {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 880px;
	display: grid;
	gap: var(--sp-3);
}

.xp-mode {
	display: grid;
	grid-template-columns: 5.5rem 9rem 1fr;
	align-items: center;
	gap: var(--sp-4);
	padding: var(--sp-4) var(--sp-5);
	border-radius: var(--radius);
	border: 1px solid var(--border);
	background: linear-gradient(180deg, var(--surface), var(--bg-elevated));
}

.xp-rate {
	font-size: var(--fs-xl);
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--gold);
	font-variant-numeric: tabular-nums;
}

.xp-name {
	font-weight: 600;
}

.xp-bar {
	height: 8px;
	border-radius: 4px;
	background: var(--gold-gradient);
	box-shadow: 0 0 18px rgba(245, 184, 61, 0.35);
	transform-origin: left;
	transform: scaleX(0);
	transition: transform 1.4s var(--ease-out) 0.2s;
}

.xp-mode.is-visible .xp-bar,
html:not(.reveal-on) .xp-bar {
	transform: scaleX(var(--w, 1));
}

/* log scale: 100 → 1, 25 → .75, 10 → .55, 3 → .3, 1 → .08 */
.xp-100 { --w: 1; }
.xp-25 { --w: 0.75; }
.xp-10 { --w: 0.55; }
.xp-3 { --w: 0.3; }
.xp-1 { --w: 0.08; }

.xp-mode-insane {
	border-color: rgba(229, 72, 77, 0.35);
	background: radial-gradient(60% 120% at 0% 50%, rgba(229, 72, 77, 0.12), transparent 70%), linear-gradient(180deg, var(--surface), var(--bg-elevated));
}

.xp-mode-insane .xp-rate {
	color: #ff8a8d;
}

@media (max-width: 560px) {
	.xp-mode {
		grid-template-columns: 4.2rem 1fr;
		row-gap: var(--sp-2);
	}

	.xp-bar {
		grid-column: 1 / -1;
	}
}

.iron-modes {
	list-style: none;
	margin: var(--sp-7) auto 0;
	padding: 0;
	max-width: 880px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sp-3);
}

.iron-mode {
	display: flex;
	gap: var(--sp-3);
	align-items: flex-start;
	padding: var(--sp-5);
	border-radius: var(--radius);
	border: 1px solid var(--border);
	background: rgba(255, 255, 255, 0.02);
}

.iron-mode .game-icon {
	width: 24px;
	height: 24px;
	margin-top: 2px;
}

.iron-mode h3 {
	margin: 0 0 var(--sp-1);
	font-size: var(--fs-base);
}

.iron-mode p {
	margin: 0;
	font-size: var(--fs-sm);
	color: var(--text-muted);
}

@media (max-width: 720px) {
	.iron-modes {
		grid-template-columns: 1fr;
	}
}

/* Section head with link */
.section-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: var(--sp-4);
	margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.section-head .headline {
	margin: 0;
	font-size: clamp(2rem, 4.5vw, 3.25rem);
}

.section-head .link-arrow {
	flex: none;
}

/* Podium (hiscores teaser) */
.podium {
	padding: var(--sp-3);
}

.podium-row {
	display: grid;
	grid-template-columns: 2.5rem 1fr auto;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-3) var(--sp-4);
	border-radius: var(--radius);
	color: var(--text);
	transition: background-color var(--dur-fast) var(--ease);
}

.podium-row:hover {
	background: rgba(255, 255, 255, 0.04);
	color: var(--text);
}

.podium-rank {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--text-2);
}

a.podium-row:nth-of-type(1) .podium-rank {
	background: var(--gold-gradient);
	color: #1a1204;
}

a.podium-row:nth-of-type(2) .podium-rank {
	background: linear-gradient(135deg, #f0f0f0, #9ea3ab);
	color: #15171a;
}

a.podium-row:nth-of-type(3) .podium-rank {
	background: linear-gradient(135deg, #f0b27a, #a0612a);
	color: #1c0f04;
}

.podium-name {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	font-weight: 600;
	min-width: 0;
}

.podium-name span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.podium-value {
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.podium-value strong {
	display: block;
}

.podium-value small {
	color: var(--text-muted);
	font-size: var(--fs-xs);
}

.podium-head {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	padding: var(--sp-3) var(--sp-4) var(--sp-2);
	color: var(--text-muted);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.podium .empty {
	border: 0;
}

/* Final CTA */
.cta-panel {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding: clamp(3rem, 8vw, 6rem) var(--sp-5);
	border-radius: var(--radius-xl);
	border: 1px solid rgba(245, 184, 61, 0.25);
	background: radial-gradient(70% 90% at 50% 0%, rgba(245, 184, 61, 0.18), transparent 70%), linear-gradient(180deg, var(--surface), var(--bg-elevated));
	text-align: center;
}

.cta-ring {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 900px;
	aspect-ratio: 1;
	translate: -50% -50%;
	background: url("/assets/img/deco/rune-ring.svg") center / contain no-repeat;
	opacity: 0.08;
	z-index: -1;
}

.cta-shield {
	width: 88px;
	height: auto;
	margin: 0 auto var(--sp-5);
	filter: drop-shadow(0 12px 30px rgba(245, 184, 61, 0.35));
}

.cta-panel .lead {
	max-width: 32rem;
	margin: 0 auto var(--sp-6);
}

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

/* =========================================================
   News list
   ========================================================= */

.news-toolbar {
	display: flex;
	justify-content: center;
	margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

.news-toolbar .chips {
	max-width: 100%;
}

/* =========================================================
   Article
   ========================================================= */

.article-hero {
	position: relative;
	margin-top: calc(-1 * var(--nav-height));
	min-height: clamp(360px, 62vh, 640px);
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	isolation: isolate;
}

.article-hero-img {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.article-hero-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	translate: 0 var(--parallax-y, 0px);
	scale: 1.06;
}

.article-hero-img.is-fallback {
	background:
		radial-gradient(60% 70% at 70% 20%, rgba(245, 184, 61, 0.25), transparent 70%),
		radial-gradient(50% 60% at 15% 80%, rgba(229, 72, 77, 0.12), transparent 70%),
		url("/assets/img/deco/mountains-back.svg") center bottom / cover no-repeat,
		linear-gradient(180deg, #161a22, var(--bg));
}

.article-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(7, 8, 10, 0.35) 0%, rgba(7, 8, 10, 0.2) 40%, rgba(7, 8, 10, 0.92) 85%, var(--bg) 100%);
}

.article-hero .container-narrow {
	padding-top: calc(var(--nav-height) + var(--sp-8));
	padding-bottom: var(--sp-6);
}

.article-title {
	font-size: clamp(2.2rem, 6vw, 4rem);
	line-height: 1.05;
	letter-spacing: -0.03em;
	margin: var(--sp-4) 0 var(--sp-4);
}

.article-summary {
	color: var(--text-2);
	font-size: clamp(1.1rem, 2.2vw, 1.35rem);
	line-height: 1.5;
	margin: 0;
}

.article-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-3) var(--sp-5);
	padding: var(--sp-5) 0;
	border-bottom: 1px solid var(--border);
	color: var(--text-muted);
	font-size: var(--fs-sm);
}

.article-meta .author {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	color: var(--text);
	font-weight: 600;
}

.article-meta .avatar {
	width: 36px;
	height: 36px;
	font-size: 0.9rem;
}

.article-meta .meta-item {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
}

.article-meta .share {
	margin-left: auto;
	display: flex;
	gap: var(--sp-2);
}

.article-body {
	padding-block: var(--sp-7) var(--sp-6);
}

.back-link {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-1);
	font-size: var(--fs-sm);
	color: var(--text-2);
}

.back-link:hover {
	color: var(--text);
}

.back-link .icon {
	width: 1em;
	height: 1em;
}

/* Comments */
.comments {
	padding-top: var(--sp-7);
	border-top: 1px solid var(--border);
}

.comments-head {
	display: flex;
	align-items: baseline;
	gap: var(--sp-3);
	margin-bottom: var(--sp-5);
}

.comments-head h2 {
	margin: 0;
	font-size: var(--fs-xl);
}

.comment-form {
	display: grid;
	gap: var(--sp-3);
	margin-bottom: var(--sp-6);
}

.comment-form-foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--sp-3);
}

.char-count {
	font-size: var(--fs-xs);
	color: var(--text-muted);
	font-variant-numeric: tabular-nums;
}

.char-count.is-over {
	color: #ff8a8d;
}

.comment-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sp-3);
}

.comment {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--sp-3);
	padding: var(--sp-4);
	border-radius: var(--radius);
	background: var(--surface);
	border: 1px solid var(--border);
	animation: intro 0.6s var(--ease-out) both;
}

.comment .avatar {
	width: 36px;
	height: 36px;
	font-size: 0.85rem;
}

.comment-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2);
	margin-bottom: var(--sp-1);
	font-size: var(--fs-sm);
}

.comment-head strong {
	color: var(--text);
}

.comment-head time {
	color: var(--text-muted);
	font-size: var(--fs-xs);
}

.comment-head .btn {
	margin-left: auto;
}

.comment-body {
	margin: 0;
	color: var(--text-2);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.comments-more {
	display: flex;
	justify-content: center;
	margin-top: var(--sp-5);
}

/* =========================================================
   Hiscores
   ========================================================= */

.hs-layout {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	align-items: start;
}

.hs-side {
	position: sticky;
	top: calc(var(--nav-height) + var(--sp-4));
	max-height: calc(100vh - var(--nav-height) - 2rem);
	overflow-y: auto;
	padding: var(--sp-3);
	border-radius: var(--radius-lg);
	border: 1px solid var(--border);
	background: var(--bg-elevated);
	scrollbar-width: thin;
	scrollbar-color: var(--surface-3) transparent;
}

.hs-side h2 {
	margin: var(--sp-3) var(--sp-3) var(--sp-2);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--text-muted);
}

.hs-side ul {
	list-style: none;
	margin: 0 0 var(--sp-3);
	padding: 0;
}

.hs-side button {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	width: 100%;
	padding: 0.4rem var(--sp-3);
	border: 0;
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--text-2);
	font-size: var(--fs-sm);
	text-align: left;
}

.hs-side button:hover {
	background: rgba(255, 255, 255, 0.05);
	color: var(--text);
}

.hs-side button[aria-current="true"] {
	background: var(--gold-soft);
	color: var(--gold-strong);
	font-weight: 600;
}

.hs-side .game-icon,
.hs-side .game-icon-fallback {
	width: 22px;
	height: 22px;
}

.hs-filter {
	margin: 0 var(--sp-1) var(--sp-2);
}

.hs-filter .input {
	min-height: 38px;
	padding: 0.4rem 0.8rem;
	font-size: var(--fs-sm);
	border-radius: var(--radius-sm);
}

.hs-select {
	display: none;
}

.hs-top {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--sp-4);
	margin-bottom: var(--sp-5);
}

.hs-search {
	display: flex;
	gap: var(--sp-2);
	flex: 1 1 320px;
	max-width: 440px;
}

.hs-search .input {
	min-height: 44px;
	border-radius: var(--radius-pill);
	padding-left: 2.6rem;
	background-image: none;
}

.hs-search .input-wrap {
	flex: 1;
}

.hs-search .input-wrap .icon {
	position: absolute;
	left: 0.95rem;
	top: 50%;
	translate: 0 -50%;
	color: var(--text-muted);
	pointer-events: none;
}

.hs-search .input-wrap .input {
	padding-right: 1rem;
}

.hs-title {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	margin-bottom: var(--sp-4);
}

.hs-title h2 {
	margin: 0;
	font-size: clamp(1.6rem, 3.5vw, 2.25rem);
}

.hs-title .game-icon,
.hs-title .game-icon-fallback {
	width: 34px;
	height: 34px;
}

.hs-title .muted {
	margin-left: auto;
	font-size: var(--fs-sm);
}

.mode-icon {
	width: 14px;
	height: 14px;
	image-rendering: pixelated;
	display: inline-block;
	vertical-align: -2px;
	flex: none;
}

.mode-tag {
	font-size: 0.65rem;
	padding: 0.05em 0.45em;
}

.player-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-4);
	padding: var(--sp-5);
	margin-bottom: var(--sp-5);
	border-radius: var(--radius-lg);
	border: 1px solid var(--border);
	background: radial-gradient(70% 120% at 0% 0%, rgba(245, 184, 61, 0.12), transparent 70%), var(--surface);
}

.player-head .avatar {
	width: 56px;
	height: 56px;
	font-size: 1.4rem;
}

.player-head h2 {
	margin: 0;
	font-size: clamp(1.6rem, 3.5vw, 2.2rem);
	display: flex;
	align-items: center;
	gap: var(--sp-2);
}

.player-stats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3) var(--sp-6);
	margin-left: auto;
}

.player-stats div {
	display: grid;
	text-align: right;
}

.player-stats strong {
	font-size: var(--fs-xl);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.02em;
}

.player-stats span {
	font-size: var(--fs-xs);
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.player-tables {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-5);
	align-items: start;
}

.player-tables h3 {
	font-size: var(--fs-md);
	margin-bottom: var(--sp-3);
}

.compare-form {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	align-items: center;
	margin-bottom: var(--sp-5);
}

.compare-form .input {
	max-width: 240px;
	min-height: 40px;
	border-radius: var(--radius-pill);
}

.table td.win {
	color: var(--green);
	font-weight: 700;
}

.table .unranked {
	color: var(--text-faint);
}

@media (max-width: 1100px) {
	.player-tables {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 900px) {
	.hs-layout {
		grid-template-columns: 1fr;
	}

	.hs-side {
		display: none;
	}

	.hs-select {
		display: block;
		margin-bottom: var(--sp-4);
	}

	.player-stats {
		margin-left: 0;
		width: 100%;
		justify-content: flex-start;
	}

	.player-stats div {
		text-align: left;
	}
}

@media (max-width: 560px) {
	.table th,
	.table td {
		padding: 0.7rem 0.6rem;
	}

	.hs-hide-sm {
		display: none;
	}
}

/* =========================================================
   Play
   ========================================================= */

.play-hero {
	text-align: center;
	padding-top: clamp(3rem, 9vw, 7rem);
	position: relative;
}

.play-hero::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 520px;
	background: radial-gradient(45% 60% at 50% 20%, rgba(245, 184, 61, 0.18), transparent 70%);
	z-index: -1;
	pointer-events: none;
}

.play-hero .display {
	margin-bottom: var(--sp-4);
}

.play-hero .lead {
	max-width: 36rem;
	margin: 0 auto var(--sp-6);
}

.download-card {
	display: inline-grid;
	justify-items: center;
	gap: var(--sp-3);
}

.download-meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-2) var(--sp-4);
	color: var(--text-muted);
	font-size: var(--fs-sm);
}

.download-meta span {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
}

.steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1rem, 2.5vw, 1.5rem);
	counter-reset: step;
}

.step {
	position: relative;
	padding: var(--sp-6);
	border-radius: var(--radius-lg);
	border: 1px solid var(--border);
	background: linear-gradient(180deg, var(--surface), var(--bg-elevated));
	counter-increment: step;
}

.step::before {
	content: counter(step);
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-bottom: var(--sp-5);
	border-radius: 50%;
	background: var(--gold-gradient);
	color: #1a1204;
	font-family: var(--font-serif);
	font-size: 1.3rem;
	font-weight: 700;
	box-shadow: 0 6px 20px rgba(245, 184, 61, 0.3);
}

.step h3 {
	margin-bottom: var(--sp-2);
}

.step p {
	margin: 0;
	color: var(--text-2);
	font-size: var(--fs-sm);
}

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

.req-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1rem, 2.5vw, 1.5rem);
}

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

.spec-list {
	margin: 0;
	display: grid;
	gap: 0;
}

.spec-list div {
	display: grid;
	grid-template-columns: 9rem 1fr;
	gap: var(--sp-4);
	padding: var(--sp-3) 0;
	border-bottom: 1px solid var(--border);
	font-size: var(--fs-sm);
}

.spec-list div:last-child {
	border-bottom: 0;
}

.spec-list dt {
	color: var(--text-muted);
}

.spec-list dd {
	margin: 0;
	color: var(--text);
}

.smartscreen {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--sp-4);
}

.smartscreen ol {
	margin: var(--sp-3) 0 0;
	padding-left: 1.2em;
	color: var(--text-2);
	font-size: var(--fs-sm);
}

.smartscreen ol li + li {
	margin-top: var(--sp-1);
}

.faq {
	display: grid;
	gap: var(--sp-3);
}

.faq details {
	border-radius: var(--radius);
	border: 1px solid var(--border);
	background: var(--surface);
	overflow: hidden;
}

.faq summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--sp-4);
	padding: var(--sp-4) var(--sp-5);
	cursor: pointer;
	font-weight: 600;
	list-style: none;
}

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

.faq summary .icon {
	color: var(--text-muted);
	transition: transform var(--dur) var(--ease);
}

.faq details[open] summary .icon {
	transform: rotate(180deg);
}

.faq details p {
	margin: 0;
	padding: 0 var(--sp-5) var(--sp-5);
	color: var(--text-2);
}

/* =========================================================
   Donate / coming soon / 404
   ========================================================= */

.soon-hero {
	position: relative;
	text-align: center;
	padding-block: clamp(4rem, 12vw, 9rem) clamp(3rem, 8vw, 6rem);
	overflow: hidden;
	isolation: isolate;
}

.soon-ring {
	position: absolute;
	left: 50%;
	top: 48%;
	width: min(720px, 130vw);
	aspect-ratio: 1;
	translate: -50% -50%;
	background: url("/assets/img/deco/rune-ring.svg") center / contain no-repeat;
	opacity: 0.12;
	z-index: -1;
	animation: ring-spin 160s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
	.soon-ring {
		animation: none;
	}
}

.soon-hero .soon-icon {
	display: grid;
	place-items: center;
	width: 88px;
	height: 88px;
	margin: 0 auto var(--sp-6);
	border-radius: 28px;
	background: var(--gold-gradient);
	color: #1a1204;
	box-shadow: 0 18px 50px rgba(245, 184, 61, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.soon-hero .soon-icon .icon {
	width: 42px;
	height: 42px;
}

.soon-hero .lead {
	max-width: 34rem;
	margin: 0 auto var(--sp-6);
}

.soon-hero .cluster {
	justify-content: center;
}

.value-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1rem, 2.5vw, 1.5rem);
}

.value-grid .card {
	padding: var(--sp-6);
}

.value-grid .icon-lg {
	color: var(--gold);
	margin-bottom: var(--sp-4);
}

.value-grid h3 {
	margin-bottom: var(--sp-2);
}

.value-grid p {
	margin: 0;
	color: var(--text-2);
	font-size: var(--fs-sm);
}

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

.notfound-code {
	font-family: var(--font-serif);
	font-size: clamp(6rem, 22vw, 12rem);
	font-weight: 700;
	line-height: 0.9;
	margin: 0 0 var(--sp-4);
	letter-spacing: 0.02em;
}

.game-message {
	display: inline-block;
	margin: 0 0 var(--sp-5);
	padding: 0.35rem 0.8rem;
	border-radius: var(--radius-sm);
	background: rgba(0, 0, 0, 0.5);
	border: 1px solid var(--border);
	font-family: var(--font-mono);
	font-size: var(--fs-sm);
	color: #ffff00;
}

/* =========================================================
   Auth (login/register/verify/forgot/reset)
   ========================================================= */

.auth {
	position: relative;
	display: grid;
	place-items: center;
	padding: clamp(2.5rem, 8vw, 5rem) var(--gutter);
	isolation: isolate;
	overflow: hidden;
}

.auth::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	width: min(900px, 160vw);
	aspect-ratio: 1;
	translate: -50% -30%;
	background: url("/assets/img/deco/rune-ring.svg") center / contain no-repeat;
	opacity: 0.08;
	z-index: -1;
}

.auth::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(40% 50% at 50% 10%, rgba(245, 184, 61, 0.14), transparent 70%);
	z-index: -2;
}

.auth-card {
	width: 100%;
	max-width: 440px;
	padding: clamp(1.75rem, 5vw, 2.75rem);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-lg);
	animation: intro 0.9s var(--ease-out) both;
}

.auth-card.wide {
	max-width: 520px;
}

.auth-head {
	text-align: center;
	margin-bottom: var(--sp-6);
}

.auth-head img {
	width: 64px;
	height: auto;
	margin: 0 auto var(--sp-4);
	filter: drop-shadow(0 8px 24px rgba(245, 184, 61, 0.3));
}

.auth-head h1 {
	font-size: clamp(1.75rem, 5vw, 2.25rem);
	margin-bottom: var(--sp-2);
}

.auth-head p {
	margin: 0;
	color: var(--text-muted);
}

.auth-foot {
	margin-top: var(--sp-6);
	padding-top: var(--sp-5);
	border-top: 1px solid var(--border);
	text-align: center;
	font-size: var(--fs-sm);
	color: var(--text-muted);
}

.auth-foot p {
	margin: 0;
}

.auth-foot p + p {
	margin-top: var(--sp-2);
}

.auth-status {
	display: grid;
	justify-items: center;
	gap: var(--sp-4);
	text-align: center;
}

.status-icon {
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: var(--gold-soft);
	color: var(--gold);
}

.status-icon .icon {
	width: 34px;
	height: 34px;
}

.status-icon.is-success {
	background: var(--green-soft);
	color: var(--green);
}

.status-icon.is-error {
	background: var(--rune-red-soft);
	color: #ff8a8d;
}

.auth-status h1,
.auth-status h2 {
	margin: 0;
	font-size: var(--fs-xl);
}

.auth-status p {
	margin: 0;
	color: var(--text-2);
}

.rules-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 4px;
	font-size: var(--fs-xs);
	color: var(--text-muted);
}

.rules-list li {
	display: flex;
	align-items: center;
	gap: 0.4em;
}

.rules-list li::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--text-faint);
	flex: none;
	transition: background-color var(--dur) var(--ease);
}

.rules-list li.ok {
	color: var(--text-2);
}

.rules-list li.ok::before {
	background: var(--green);
}

/* =========================================================
   Account
   ========================================================= */

.account-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-5);
	padding: clamp(2.5rem, 7vw, 4.5rem) 0 var(--sp-6);
}

.account-head .avatar {
	width: 80px;
	height: 80px;
	font-size: 2rem;
	box-shadow: 0 12px 40px rgba(245, 184, 61, 0.3);
}

.account-head h1 {
	margin: 0 0 var(--sp-2);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-3);
}

.account-head .cluster {
	gap: var(--sp-2);
}

.account-grid {
	display: grid;
	gap: var(--sp-5);
}

.settings-card {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: clamp(1.25rem, 4vw, 3rem);
	padding: clamp(1.5rem, 4vw, 2.5rem);
}

.settings-card > header h2 {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	font-size: var(--fs-lg);
	margin-bottom: var(--sp-2);
}

.settings-card > header h2 .icon {
	color: var(--gold);
}

.settings-card > header p {
	color: var(--text-muted);
	font-size: var(--fs-sm);
	margin: 0;
}

.settings-card > header .badge {
	margin-top: var(--sp-3);
}

@media (max-width: 800px) {
	.settings-card {
		grid-template-columns: 1fr;
	}
}


/* =========================================================
   Legal / rules pages
   ========================================================= */

.legal {
	display: grid;
	grid-template-columns: 220px 1fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}

.toc {
	position: sticky;
	top: calc(var(--nav-height) + var(--sp-5));
	font-size: var(--fs-sm);
}

.toc h2 {
	font-size: var(--fs-xs);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: var(--sp-3);
}

.toc ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sp-1);
	border-left: 1px solid var(--border);
}

.toc a {
	display: block;
	padding: 0.25rem 0 0.25rem var(--sp-4);
	margin-left: -1px;
	border-left: 1px solid transparent;
	color: var(--text-muted);
}

.toc a:hover {
	color: var(--text);
	border-left-color: var(--gold);
}

.legal .prose h2 {
	scroll-margin-top: calc(var(--nav-height) + var(--sp-5));
}

.draft-note {
	margin-bottom: var(--sp-6);
}

.rule-cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sp-3);
	counter-reset: rule;
}

.rule-cards li {
	position: relative;
	padding: var(--sp-4) var(--sp-5) var(--sp-4) 4rem;
	border-radius: var(--radius);
	border: 1px solid var(--border);
	background: var(--surface);
	counter-increment: rule;
	font-size: var(--fs-base);
}

.rule-cards li::before {
	content: counter(rule);
	position: absolute;
	left: var(--sp-4);
	top: var(--sp-4);
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--gold-soft);
	color: var(--gold);
	font-family: var(--font-serif);
	font-weight: 700;
	font-size: var(--fs-sm);
}

.rule-cards strong {
	display: block;
	color: var(--text);
	margin-bottom: 2px;
}

.prose .rule-cards li + li {
	margin-top: 0;
}

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

	.toc {
		position: static;
		padding: var(--sp-4);
		border-radius: var(--radius);
		background: var(--surface);
		border: 1px solid var(--border);
	}
}

.link-reset {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
}

.link-reset:hover {
	color: var(--gold);
}

.article-cat {
	margin-top: var(--sp-6);
}

.article-cat + .article-title {
	margin-top: var(--sp-3);
}

#login-alert,
#register-alert,
#forgot-alert,
#reset-alert {
	margin-bottom: var(--sp-5);
}

#email-alert:empty {
	display: none;
}

.auth-status .cluster {
	justify-content: center;
}

.prose .rule-cards {
	padding-left: 0;
}

.play-hero .hero-shield {
	margin-inline: auto;
}

/* ---------- Market ---------- */
.mk-search { flex: 1 1 auto; max-width: 560px; }
.mk-table td { vertical-align: middle; }
.mk-item { display: flex; align-items: center; gap: 10px; min-width: 180px; font-weight: 600; }
.mk-icon { width: 32px; height: 32px; object-fit: contain; flex: none; image-rendering: pixelated; }
.mk-cell { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px; white-space: nowrap; }
.mk-price { font-variant-numeric: tabular-nums; font-weight: 600; }
.mk-note { margin-top: var(--sp-4, 16px); max-width: 860px; }

/* =========================================================
   Donate store (pva-donator fase 2): rank cards, benefit table, checkout, return, fake checkout, /account card.
   Rank colours arrive as --tier on the element (set through the CSSOM by donate-common.js).
   ========================================================= */

.donate-head {
	padding-bottom: var(--sp-5);
}

.donate-test {
	max-width: 46rem;
	margin: var(--sp-5) auto 0;
	text-align: left;
}

.donate-status {
	margin-top: var(--sp-5);
}

.donate-status p {
	margin: 0;
}

.donate-current {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-4);
	padding: var(--sp-3) var(--sp-4);
	border-radius: var(--radius);
	border: 1px solid var(--border);
	background: var(--surface);
}

.donate-current-name {
	margin: 0;
	font-weight: 700;
}

.donate-vat {
	margin-top: var(--sp-4);
}

/* Bond picture (PNG rendered from the cache) or a drawn placeholder in the rank colour */
.bond {
	--tier: var(--gold);
	position: relative;
	display: grid;
	place-items: center;
	width: 72px;
	height: 64px;
	flex: none;
}

.bond img {
	width: 72px;
	height: 64px;
	object-fit: contain;
	image-rendering: pixelated;
}

/* the item icons are 36×32: keep whole multiples so pixels stay crisp */
.bond-sm,
.bond-sm img {
	width: 36px;
	height: 32px;
}

.bond-lg,
.bond-lg img {
	width: 108px;
	height: 96px;
}

.bond-placeholder .bond-band {
	position: absolute;
	inset: 22% 8%;
	border-radius: 10px;
	background: linear-gradient(135deg, color-mix(in srgb, var(--tier) 65%, #fff 35%), var(--tier) 55%, color-mix(in srgb, var(--tier) 60%, #000 40%));
	box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.35), 0 6px 18px color-mix(in srgb, var(--tier) 35%, transparent);
}

.bond-placeholder .bond-gem {
	position: absolute;
	z-index: 1;
	width: 34%;
	aspect-ratio: 1;
	rotate: 45deg;
	border-radius: 4px;
	background: linear-gradient(135deg, #fff, color-mix(in srgb, var(--tier) 50%, #fff 50%));
	box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.45);
}

.tier-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(0.75rem, 2vw, 1.25rem);
}

.tier-card {
	--tier: var(--gold);
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	padding: var(--sp-5);
	border-radius: var(--radius-lg);
	border: 1px solid var(--border);
	background:
		radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--tier) 16%, transparent), transparent 70%),
		var(--surface);
	transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease-out);
}

.tier-card:hover {
	border-color: color-mix(in srgb, var(--tier) 55%, transparent);
	transform: translateY(-2px);
}

.tier-card.is-current {
	border-color: color-mix(in srgb, var(--tier) 75%, transparent);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--tier) 40%, transparent);
}

.tier-flag {
	position: absolute;
	top: var(--sp-3);
	right: var(--sp-3);
	padding: 0.15rem 0.6rem;
	border-radius: var(--radius-pill);
	background: color-mix(in srgb, var(--tier) 22%, transparent);
	color: var(--text);
	font-size: var(--fs-xs);
	font-weight: 600;
}

.tier-name {
	margin: 0;
	font-size: var(--fs-md);
	color: color-mix(in srgb, var(--tier) 55%, var(--text) 45%);
}

.tier-price {
	margin: 0;
}

.tier-amount {
	font-size: var(--fs-xl);
	font-weight: 800;
	letter-spacing: var(--tracking-tight);
}

.tier-perks {
	display: grid;
	align-content: start;
	gap: var(--sp-2);
	margin: 0 0 var(--sp-2);
	padding: 0;
	list-style: none;
	font-size: var(--fs-sm);
	color: var(--text-2);
	flex: 1;
}

.tier-perks li {
	display: flex;
	gap: var(--sp-2);
	align-items: flex-start;
}

.tier-perks .icon {
	flex: none;
	margin-top: 0.15em;
	color: var(--green);
}

.tier-perks-empty {
	flex: 1;
}

.mode-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(1rem, 2.5vw, 1.5rem);
}

.mode-grid .card {
	padding: var(--sp-6);
}

.mode-grid .icon-lg {
	color: var(--gold);
	margin-bottom: var(--sp-3);
}

.mode-grid p {
	margin: 0;
	color: var(--text-2);
	font-size: var(--fs-sm);
}

/* Full benefit table: sticky header and first column, horizontal scroll on small screens */
.perk-wrap {
	overflow: auto;
	max-height: 80vh;
	margin-top: var(--sp-4);
	border-radius: var(--radius-lg);
	border: 1px solid var(--border);
	background: var(--bg-elevated);
}

.perk-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: var(--fs-sm);
}

.perk-table th,
.perk-table td {
	padding: 0.6rem 0.75rem;
	border-bottom: 1px solid var(--border);
	text-align: center;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.perk-table thead th {
	position: sticky;
	top: 0;
	z-index: 2;
	background: var(--surface);
	font-size: var(--fs-xs);
	font-weight: 600;
	color: var(--text-2);
}

.perk-table .perk-col {
	position: sticky;
	left: 0;
	z-index: 1;
	min-width: 13rem;
	max-width: 18rem;
	text-align: left;
	white-space: normal;
	background: var(--bg-elevated);
}

.perk-table thead .perk-col {
	z-index: 3;
	background: var(--surface);
}

.perk-table .tier-col {
	--tier: var(--gold);
}

.perk-table .tier-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 6px;
	border-radius: 50%;
	background: var(--tier);
	vertical-align: middle;
}

.perk-table .perk-group th {
	position: sticky;
	left: 0;
	padding-top: var(--sp-4);
	text-align: left;
	color: var(--gold);
	font-size: var(--fs-xs);
	letter-spacing: var(--tracking-wide);
	text-transform: uppercase;
	background: var(--bg-elevated);
}

.perk-name {
	display: block;
	color: var(--text);
	font-weight: 500;
}

.perk-default {
	display: block;
	color: var(--text-muted);
	font-size: var(--fs-xs);
}

.perk-detail summary {
	cursor: pointer;
	color: var(--text-muted);
	font-size: var(--fs-xs);
}

.perk-detail ul {
	margin: var(--sp-1) 0 0;
	padding-left: 1.1rem;
	color: var(--text-2);
	font-size: var(--fs-xs);
}

.perk-table td.perk-none {
	color: var(--text-faint);
}

.perk-table td.perk-yes {
	color: var(--green);
	font-weight: 700;
}

.perk-table .is-current {
	background: var(--gold-soft);
}

/* Checkout */
.checkout {
	padding-block: var(--sp-7) var(--sp-8);
}

.checkout-title {
	margin: var(--sp-4) 0 var(--sp-5);
}

.checkout-form {
	display: grid;
	gap: var(--sp-5);
}

.checkout-summary {
	display: flex;
	align-items: center;
	gap: var(--sp-5);
	padding: var(--sp-5);
}

.checkout-summary-text {
	flex: 1;
}

.checkout-summary-text h2 {
	margin: 0;
	font-size: var(--fs-lg);
}

.checkout-summary-text p {
	margin: 0;
}

.checkout-price {
	display: grid;
	justify-items: end;
	gap: var(--sp-1);
	font-size: var(--fs-xl);
	font-weight: 800;
}

.checkout-price .small {
	font-weight: 400;
}

.mode-choice {
	display: grid;
	gap: var(--sp-3);
	margin: 0;
	padding: 0;
	border: 0;
}

.mode-option {
	display: flex;
	gap: var(--sp-3);
	align-items: flex-start;
	padding: var(--sp-4) var(--sp-5);
	border-radius: var(--radius);
	border: 1px solid var(--border);
	background: var(--surface);
	cursor: pointer;
	transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}

.mode-option:has(input:checked) {
	border-color: var(--gold);
	background: var(--gold-soft);
}

.mode-option input {
	margin-top: 0.3rem;
	accent-color: var(--gold);
}

.mode-option-body {
	display: grid;
	gap: var(--sp-1);
}

.mode-option-title {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	font-weight: 700;
}

.mode-option-title .icon {
	color: var(--gold);
}

.mode-option-text {
	color: var(--text-2);
	font-size: var(--fs-sm);
}

.checkout-checks {
	display: grid;
	gap: var(--sp-3);
}

.checkout-foot {
	margin: 0;
	text-align: center;
}

/* Return page and fake checkout */
.return-card,
.fake-card {
	display: grid;
	gap: var(--sp-5);
}

.status-icon.is-warning {
	background: rgba(255, 159, 10, 0.14);
	color: var(--orange);
}

.page-return .spinner,
.page-fake-checkout .spinner {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 3px solid var(--gold-soft);
	border-top-color: var(--gold);
	animation: donate-spin 0.9s linear infinite;
}

@keyframes donate-spin {
	to {
		rotate: 360deg;
	}
}

.return-dl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--sp-2) var(--sp-5);
	margin: 0;
	font-size: var(--fs-sm);
}

.return-dl dt {
	color: var(--text-muted);
}

.return-dl dd {
	margin: 0;
	text-align: right;
	overflow-wrap: anywhere;
}

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

.fake-title {
	margin: 0;
	font-size: var(--fs-xl);
}

.fake-actions {
	display: grid;
	gap: var(--sp-3);
}

.fake-secondary {
	justify-content: center;
}

/* /account card */
.settings-card.donator-card {
	grid-template-columns: 1fr;
	gap: var(--sp-5);
}

.donator-card #donator-status strong {
	color: var(--text);
}

.donator-card #donator-body {
	display: grid;
	gap: var(--sp-4);
}

.donator-orders .table th,
.donator-orders .table td {
	padding: 0.6rem 0.65rem;
	white-space: nowrap;
}

@media (max-width: 1000px) {
	.tier-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.tier-grid,
	.mode-grid {
		grid-template-columns: 1fr;
	}

	.checkout-summary {
		flex-wrap: wrap;
	}

	.checkout-price {
		justify-items: start;
	}

	.perk-table .perk-col {
		min-width: 9.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.page-return .spinner,
	.page-fake-checkout .spinner {
		animation: none;
	}
}