:root {
	color-scheme: dark;
	--bg: #0a0808;
	--ink: #f6efe2;
	--muted: #b9aa96;
	--gold: #e0ad59;
	--fire: #e3542f;
	--magma: #8c1f1e;
	--mystic: #76d8bd;
	--panel: rgba(21, 18, 20, 0.9);
	--line: rgba(224, 173, 89, 0.26);
	font-family: ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html,
body {
	min-height: 100%;
	margin: 0;
}

body {
	background:
		linear-gradient(180deg, rgba(107, 21, 20, 0.35), transparent 42%),
		radial-gradient(circle at 14% 12%, rgba(227, 84, 47, 0.34), transparent 28%),
		radial-gradient(circle at 84% 10%, rgba(118, 216, 189, 0.18), transparent 30%),
		var(--bg);
	color: var(--ink);
}

body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
	background-size: 8px 8px;
	mask-image: linear-gradient(to bottom, #000 0 65%, transparent);
}

.site-shell {
	width: min(1180px, 100%);
	margin: 0 auto;
	padding: clamp(18px, 4vw, 46px);
}

.hero {
	min-height: 72vh;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(20px, 5vw, 54px);
	align-items: center;
}

.hero-copy {
	position: relative;
	z-index: 2;
}

.kicker {
	margin: 0 0 12px;
	color: var(--mystic);
	font: 800 12px/1.1 ui-monospace, "SF Mono", Menlo, monospace;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-shadow: 0 0 14px rgba(118, 216, 189, 0.36);
}

h1 {
	margin: 0;
	font-family: Georgia, "Iowan Old Style", serif;
	font-size: clamp(46px, 11vw, 104px);
	line-height: 0.9;
	letter-spacing: 0;
	text-shadow: 0 3px 0 #210809, 0 0 28px rgba(227, 84, 47, 0.48);
}

.lede {
	max-width: 680px;
	margin: 22px 0 0;
	color: var(--muted);
	font-size: clamp(17px, 2.2vw, 22px);
}

.actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
}

.actions a {
	min-height: 46px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 18px;
	border: 1px solid var(--line);
	border-radius: 6px;
	color: var(--ink);
	text-decoration: none;
	font-weight: 800;
}

.actions .primary {
	background: var(--gold);
	border-color: var(--gold);
	color: #1a1006;
}

.actions .secondary {
	background: rgba(255, 255, 255, 0.035);
}

.status {
	min-height: 1.5em;
	margin: 18px 0 0;
	color: var(--muted);
	font: 700 13px/1.4 ui-monospace, "SF Mono", Menlo, monospace;
}

.status.ok { color: var(--mystic); }
.status.bad { color: #ff947d; }

.stage {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 8px;
	background:
		linear-gradient(180deg, rgba(21, 6, 9, 0.25), rgba(8, 8, 11, 0.94)),
		linear-gradient(90deg, rgba(91, 18, 21, 0.82), rgba(13, 23, 29, 0.82));
	box-shadow:
		inset 0 0 0 2px rgba(0, 0, 0, 0.48),
		inset 0 -50px 64px rgba(227, 84, 47, 0.24),
		0 24px 56px rgba(0, 0, 0, 0.42);
	image-rendering: pixelated;
}

.embers,
.sigil,
.weapon-field,
.party,
.brimstone {
	position: absolute;
	inset: 0;
}

.embers {
	background:
		radial-gradient(circle at 10% 24%, #ffd087 0 2px, transparent 3px),
		radial-gradient(circle at 28% 44%, #e3542f 0 2px, transparent 3px),
		radial-gradient(circle at 51% 18%, #76d8bd 0 1px, transparent 2px),
		radial-gradient(circle at 72% 35%, #c46aff 0 1px, transparent 2px),
		radial-gradient(circle at 89% 17%, #ffd087 0 2px, transparent 3px);
	background-size: 96px 70px;
	opacity: 0.78;
	animation: embers 4.5s steps(4, end) infinite;
}

.sigil {
	left: 59%;
	top: 13%;
	width: clamp(80px, 16vw, 130px);
	height: clamp(80px, 16vw, 130px);
	border: 2px solid rgba(118, 216, 189, 0.58);
	border-radius: 50%;
	box-shadow: 0 0 0 10px rgba(118, 216, 189, 0.05), 0 0 26px rgba(118, 216, 189, 0.32);
	clip-path: polygon(50% 0, 58% 31%, 91% 19%, 68% 47%, 98% 64%, 62% 63%, 61% 100%, 47% 68%, 19% 91%, 35% 57%, 0 50%, 35% 42%, 18% 10%, 48% 31%);
	animation: sigil 2.8s steps(2, end) infinite;
}

.brimstone {
	top: auto;
	height: 34%;
	background:
		linear-gradient(90deg, transparent 0 8%, rgba(255, 112, 43, 0.8) 8% 13%, transparent 13% 26%, rgba(238, 72, 38, 0.88) 26% 31%, transparent 31% 51%, rgba(247, 182, 93, 0.72) 51% 56%, transparent 56% 100%),
		linear-gradient(180deg, transparent, rgba(84, 16, 16, 0.94) 24%, #140809 78%);
}

.party {
	inset: auto 4% 11% 5%;
	display: flex;
	align-items: flex-end;
	gap: clamp(8px, 3vw, 24px);
	height: 52%;
}

.party img {
	width: clamp(52px, 13vw, 96px);
	height: auto;
	filter: drop-shadow(0 8px 0 rgba(0, 0, 0, 0.34)) drop-shadow(0 0 12px rgba(247, 110, 43, 0.24));
	image-rendering: pixelated;
}

.party img:nth-child(2) {
	transform: translateY(-10px);
	filter: drop-shadow(0 8px 0 rgba(0, 0, 0, 0.34)) drop-shadow(0 0 16px rgba(118, 216, 189, 0.36));
}

.party img:nth-child(3) { transform: translateY(5px); }
.party img:nth-child(4) { transform: translateY(-3px); }

.weapon {
	position: absolute;
	width: var(--size, 34px);
	height: var(--size, 34px);
	left: var(--x, 20%);
	top: var(--y, 20%);
	opacity: var(--alpha, 0.72);
	transform: rotate(var(--rotate, 0deg));
	filter: drop-shadow(0 0 8px rgba(246, 192, 111, 0.3));
	pointer-events: none;
	image-rendering: pixelated;
	animation: glint 2.7s steps(3, end) infinite;
}

.panel-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	margin-top: clamp(18px, 4vw, 42px);
}

article {
	padding: 18px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--panel);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.42);
}

article h2 {
	margin: 0;
	font-family: Georgia, "Iowan Old Style", serif;
	font-size: 22px;
}

article p {
	margin: 8px 0 0;
	color: var(--muted);
}

@media (min-width: 840px) {
	.hero {
		grid-template-columns: minmax(360px, 0.9fr) minmax(420px, 1.1fr);
	}

	.panel-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@keyframes embers {
	50% { transform: translateY(-8px); opacity: 0.55; }
}

@keyframes sigil {
	50% { opacity: 0.55; transform: scale(1.04); }
}

@keyframes glint {
	50% { filter: drop-shadow(0 0 13px rgba(246, 192, 111, 0.48)); }
}