/*
 * Site components + selectable styles, layered on the compiled epic-css (style.css).
 * Mobile-first: base rules are for phones, @media (min-width) adds desktop layout.
 *
 * Themes: <html data-theme="..." data-mode="light|dark"> picks a variable set below (list in src/_data/themes.js).
 * Components only use the variables, plus a few per-theme flourishes at the bottom.
 */

/* ---------- Theme variables ---------- */
/*
 * Each theme has a dark and a light set: [data-theme="x"][data-mode="dark|light"].
 * :root carries the shared defaults and the Clean dark set; other themes override on top.
 */

:root,
[data-theme="clean"][data-mode="dark"] {
	--bg: #020420;
	--bg-image: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(0, 220, 130, 0.18), transparent);
	--surface: rgba(255, 255, 255, 0.03);
	--surface-2: rgba(255, 255, 255, 0.05);
	--text: #f1f5f9;
	--muted: #94a3b8;
	--accent: #00dc82;
	--accent-text: #020420;
	--accent-soft: rgba(0, 220, 130, 0.12);
	--border: rgba(255, 255, 255, 0.1);
	--border-width: 1px;
	--code-bg: rgba(255, 255, 255, 0.06);
	--radius: 12px;
	--radius-sm: 8px;
	--shadow: none;
	--font-body: Inter, system-ui, sans-serif;
	--font-head: var(--font-body);
	--font-mono: ui-monospace, "Cascadia Code", Consolas, monospace;
	--font-size: 1rem;
	--led-on: #00dc82;
	--led-off: #ef4444;
	--led-idle: #9ca3af;
	--logo-filter: none;
	--head-grad: linear-gradient(90deg, #ffffff, #00dc82);
	--glow: 0 0 0 1px rgba(0, 220, 130, 0.4), 0 0 32px rgba(0, 220, 130, 0.12);
}

/* Clean light: white, deeper green so it passes contrast on white. */
[data-theme="clean"][data-mode="light"] {
	--bg: #ffffff;
	--bg-image: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(0, 220, 130, 0.22), transparent);
	--surface: #ffffff;
	--surface-2: #f8fafc;
	--text: #020420;
	--muted: #64748b;
	--accent: #00a155;
	--accent-text: #ffffff;
	--accent-soft: rgba(0, 220, 130, 0.14);
	--border: #e2e8f0;
	--code-bg: #f1f5f9;
	--shadow: 0 1px 2px rgba(2, 4, 32, 0.04);
	--led-on: #00c16a;
	--head-grad: linear-gradient(90deg, #020420, #00a155);
	--glow: 0 0 0 1px rgba(0, 161, 85, 0.35), 0 8px 32px rgba(0, 161, 85, 0.12);
}

/* Whimsy: pastel, chunky outlines, offset shadows, rounded type. */
[data-theme="whimsy"] {
	--border-width: 3px;
	--radius: 22px;
	--radius-sm: 12px;
	--font-body: Fredoka, "Comic Sans MS", system-ui, sans-serif;
	--font-head: var(--font-body);
	--font-size: 1.1rem;
	--shadow: 5px 5px 0 var(--ink);
}

[data-theme="whimsy"][data-mode="light"] {
	--ink: #2a1650;
	--bg: #fff4fb;
	--bg-image: radial-gradient(#f9c6e4 1.5px, transparent 1.5px);
	--surface: #ffffff;
	--surface-2: #fef3c7;
	--text: #2a1650;
	--muted: #6b5b8c;
	--accent: #e8317f;
	--accent-text: #ffffff;
	--accent-soft: #e9e2ff;
	--border: var(--ink);
	--code-bg: #e9e2ff;
	--led-on: #10b981;
	--badge-2-bg: #fef3c7;
	--badge-2-text: #b45309;
	--badge-3-bg: #d1fae5;
	--badge-3-text: #047857;
}

[data-theme="whimsy"][data-mode="dark"] {
	--ink: #f9a8d4;
	--bg: #1a0f2e;
	--bg-image: radial-gradient(#3b2566 1.5px, transparent 1.5px);
	--surface: #271845;
	--surface-2: #33205a;
	--text: #fdf4ff;
	--muted: #c4b5fd;
	--accent: #ff7ab8;
	--accent-text: #1a0f2e;
	--accent-soft: #3d2a6b;
	--border: var(--ink);
	--code-bg: #3d2a6b;
	--led-on: #34d399;
	--badge-2-bg: #4a3a10;
	--badge-2-text: #fde68a;
	--badge-3-bg: #0f3b2e;
	--badge-3-text: #6ee7b7;
}

/* Minecraft: bevelled GUI panels, pixel headings, terminal body text. Light = shulker + stone GUI; dark = dirt + deepslate GUI. */
[data-theme="minecraft"] {
	--border: #000000;
	--border-width: 2px;
	--code-bg: #000000;
	--radius: 0;
	--radius-sm: 0;
	--shadow: inset 3px 3px 0 var(--bevel-hi), inset -3px -3px 0 var(--bevel-lo);
	--font-body: "IBM Plex Mono", ui-monospace, Consolas, monospace;
	--font-head: "Pixelify Sans", "Courier New", monospace;
	--font-size: 0.95rem;
	--led-on: #55ff55;
	--led-off: #ff5555;
	--btn-bg: #6f6f6f;
	--btn-hover: #7e88c4;
}

/* Light background: white shulker box, at the same 16px-square scale as the dark mode's dirt.
   A faint 8px checker over the 16px two-tone checker gives the speckled pixel look. */
[data-theme="minecraft"][data-mode="light"] {
	--bg: #e6eaeb;
	--bg-image:
		repeating-conic-gradient(rgba(60, 70, 72, 0.045) 0 25%, transparent 0 50%),
		repeating-conic-gradient(#eef1f2 0 25%, #dfe4e5 0 50%);
	--bg-size: 16px 16px, 32px 32px;
	--bg-position: 4px 0, 0 0;
	--on-bg: #3f3f3f;
	--on-bg-shadow: #ffffff;
	--surface: #c6c6c6;
	--surface-2: #8b8b8b;
	--text: #2b2b2b;
	--muted: #4a4a4a;
	--title: #2b2b2b;
	--accent: #2f6b1e;
	--accent-text: #ffffff;
	--accent-soft: #a9d68a;
	--bevel-hi: #ffffff;
	--bevel-lo: #555555;
	--slot-hi: #373737;
	--slot-lo: #ffffff;
	--rule: #8b8b8b;
}

[data-theme="minecraft"][data-mode="dark"] {
	--bg: #3b2a1e;
	--bg-image:
		linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
		repeating-conic-gradient(#6b4a32 0 25%, #5a3d29 0 50%);
	--on-bg: #ffffff;
	--on-bg-shadow: #3f3f3f;
	--surface: #313131;
	--surface-2: #1e1e1e;
	--text: #e8e8e8;
	--muted: #a8a8a8;
	--title: #ffffff;
	--accent: #7ccd4f;
	--accent-text: #000000;
	--accent-soft: #2f4d22;
	--bevel-hi: #5a5a5a;
	--bevel-lo: #151515;
	--slot-hi: #0e0e0e;
	--slot-lo: #4a4a4a;
	--rule: #4a4a4a;
	--btn-bg: #4a4a4a;
}

/* ---------- Base (overrides epic-css element rules) ---------- */

body {
	margin: 0;
	padding: 0 16px 48px;
	background-color: var(--bg);
	background-image: var(--bg-image);
	color: var(--text);
	font-family: var(--font-body);
	font-size: var(--font-size);
	line-height: 1.5;
	min-height: 100vh;
}

[data-theme="clean"] body {
	background-repeat: no-repeat;
}

[data-theme="whimsy"] body {
	background-size: 22px 22px;
}

[data-theme="minecraft"] body {
	background-size: var(--bg-size, 32px 32px);
	background-position: var(--bg-position, 0 0);
}

h1,
h2,
h3 {
	font-family: var(--font-head);
}

main a {
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

main a:hover {
	color: var(--accent);
	text-decoration-thickness: 2px;
}

article h1 {
	font-size: 2rem;
	line-height: 1.15;
}

article h2 {
	font-size: 1.2rem;
	line-height: 1.3;
	margin: 0 0 16px;
}

article h3 {
	font-size: 1.05rem;
	line-height: 1.3;
	margin: 0;
}

article p {
	margin-bottom: 0;
	line-height: 1.5;
}

article ul {
	padding-left: 0;
	margin-bottom: 0;
	line-height: 1.4;
}

article li {
	margin-bottom: 0;
}

code,
code:not(pre code) {
	font-family: var(--font-mono);
	font-size: 0.95em;
	background: var(--code-bg);
	color: inherit;
	padding: 2px 6px;
	border-radius: var(--radius-sm);
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

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

.small {
	font-size: 0.85em;
}

.wrapper {
	max-width: 880px;
	margin: 0 auto;
}

/* ---------- Header ---------- */

.channel-banner {
	margin: 0 -16px;
	background: #b45309;
	color: #fff;
	text-align: center;
	padding: 6px;
	font-weight: bold;
	font-family: system-ui, sans-serif;
	font-size: 0.9rem;
	text-shadow: none;
}

/* Phones: logo + menu button on one row; the controls open as a panel below.
   Desktop: logo left, controls inline on the right, no menu button. */
.site-header {
	max-width: 880px;
	margin: 0 auto;
	padding: 16px 0 12px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.logo {
	display: block;
	flex: 1 1 0;
	min-width: 0;
	max-width: 480px;
}

.menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	margin-left: auto;
	padding: 0;
	color: var(--text);
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	cursor: pointer;
}

.menu-toggle:hover,
.menu-open .menu-toggle {
	color: var(--accent);
}

.logo img {
	display: block;
	width: 100%;
	height: auto;
	filter: var(--logo-filter);
}

.theme-picker {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.85rem;
	color: var(--muted);
}

.theme-picker select {
	font: inherit;
	color: var(--text);
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 4px 8px;
}

.theme-picker option {
	background: var(--bg);
	color: var(--text);
}

.header-controls {
	display: none;
	flex-basis: 100%;
	flex-direction: column;
	padding: 8px 16px 12px;
	background: var(--surface);
	border: var(--border-width) solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

.menu-open .header-controls {
	display: flex;
}

main a.header-link,
.header-link {
	font-size: 0.85rem;
	color: var(--muted);
	text-decoration: none;
	white-space: nowrap;
}

.header-link:hover {
	color: var(--accent);
}

.header-controls .header-link {
	font-size: 1rem;
	padding: 10px 0;
	border-bottom: 1px solid var(--border);
}

.header-settings {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-top: 12px;
}

.mode-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	color: var(--text);
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	cursor: pointer;
}

.mode-toggle:hover {
	color: var(--accent);
}

/* Show the icon for the mode you'd switch to. */
[data-mode="dark"] .icon-moon,
[data-mode="light"] .icon-sun {
	display: none;
}

@media (min-width: 720px) {
	.site-header {
		flex-wrap: nowrap;
		justify-content: space-between;
		padding-top: 28px;
	}

	.logo {
		flex: 0 1 480px;
	}

	.menu-toggle {
		display: none;
	}

	.header-controls,
	.menu-open .header-controls {
		display: flex;
		flex-direction: row;
		flex-basis: auto;
		align-items: center;
		gap: 12px;
		padding: 0;
		background: none;
		border: 0;
		box-shadow: none;
	}

	.header-controls .header-link {
		font-size: 0.85rem;
		padding: 0;
		border-bottom: 0;
	}

	.header-settings {
		padding-top: 0;
	}
}

/* ---------- Shared components ---------- */

.lede {
	color: var(--muted);
	font-size: 1.05em;
}

.badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.badge,
.tag {
	display: inline-block;
	font-size: 0.75rem;
	line-height: 1;
	padding: 6px 10px;
	border-radius: 999px;
	background: var(--accent-soft);
	color: var(--accent);
	font-weight: 600;
	font-family: var(--font-body);
	vertical-align: middle;
}

.address {
	font-size: 1rem;
	padding: 4px 10px;
	word-break: break-all;
}

.reqs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
	margin: 0;
	font-size: 0.9rem;
}

.reqs div {
	display: flex;
	gap: 6px;
}

.reqs dt {
	color: var(--muted);
}

.reqs dd {
	margin: 0;
	font-weight: 600;
}

.panel,
.server-card {
	background: var(--surface);
	border: var(--border-width) solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 18px;
}

@media (min-width: 720px) {
	.panel,
	.server-card {
		padding: 24px;
	}
}

/* ---------- Index: server cards ---------- */

.page-header {
	padding: 4px 0 20px;
	text-align: center;
}

.server-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

@media (min-width: 720px) {
	.server-grid {
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
		gap: 24px;
	}
}

main a.server-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	color: var(--text);
	text-decoration: none;
	transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}

main a.server-card:hover {
	transform: translateY(-2px);
	border-color: var(--accent);
}

.card-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}

article .server-card h2 {
	margin: 0;
	color: var(--accent);
}

.card-cta {
	margin-top: auto;
	color: var(--accent);
	font-weight: 600;
}

/* Status LED */
.status {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	font-size: 0.8rem;
	color: var(--muted);
	white-space: nowrap;
	padding-top: 4px;
}

.led {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--led-idle);
}

.status[data-state="checking"] .led {
	animation: led-pulse 1s ease-in-out infinite;
}

.status[data-state="online"] .led {
	background: var(--led-on);
	box-shadow: 0 0 6px var(--led-on), 0 0 12px var(--led-on);
}

.status[data-state="offline"] .led {
	background: var(--led-off);
	box-shadow: 0 0 6px var(--led-off);
}

@keyframes led-pulse {
	50% {
		opacity: 0.3;
	}
}

/* ---------- Server page ---------- */

.server {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding-top: 8px;
}

main a.back {
	color: var(--muted);
	text-decoration: none;
	font-size: 0.9rem;
}

main a.back:hover {
	color: var(--accent);
}

.server-header {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.label {
	display: block;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--muted);
	margin-bottom: 6px;
}

.copy-row {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

button.copy {
	font: inherit;
	font-size: 0.8rem;
	padding: 4px 12px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--accent);
	background: transparent;
	color: var(--accent);
	cursor: pointer;
}

button.copy:hover {
	background: var(--accent);
	color: var(--accent-text);
}

.prose p + p {
	margin-top: 12px;
}

/* Accordions (native <details>, no JS) */
.panel.accordion {
	padding: 0;
}

.accordion summary {
	list-style: none;
	cursor: pointer;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 4px 12px;
	padding: 18px;
}

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

.accordion summary::after {
	content: "+";
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: center;
	font-size: 1.6rem;
	line-height: 1;
	color: var(--accent);
}

.accordion[open] summary::after {
	content: "\2212";
}

.summary-title {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 1.15rem;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.summary-sub {
	color: var(--muted);
	font-size: 0.85rem;
}

.accordion-body {
	padding: 0 18px 18px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.accordion-body h3:not(:first-child) {
	margin-top: 12px;
}

@media (min-width: 720px) {
	.accordion summary {
		padding: 20px 24px;
	}

	.accordion-body {
		padding: 0 24px 24px;
	}
}

/* Download buttons */
.downloads {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

@media (min-width: 720px) {
	.downloads {
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	}
}

main a.download {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 16px;
	border-radius: var(--radius-sm);
	background: var(--surface-2);
	border: 1px solid var(--border);
	color: var(--text);
	text-decoration: none;
}

main a.download:hover {
	border-color: var(--accent);
}

.download-name {
	color: var(--accent);
	font-weight: 600;
}

.download-name::before {
	content: "\2193\00a0";
}

.download-meta {
	color: var(--muted);
	font-size: 0.8rem;
	word-break: break-all;
}

.download-note {
	font-size: 0.85rem;
}

/* Mod list. minmax(0, ...) and min-width: 0 let long names wrap instead of
   pushing the grid wider than the panel. */
article .mod-list {
	list-style: none;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	min-width: 0;
	column-gap: 24px;
	font-size: 0.95rem;
}

@media (min-width: 560px) {
	article .mod-list {
		grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
	}
}

.mod-list li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	min-width: 0;
	padding: 7px 0;
	border-bottom: 1px solid var(--border);
}

main .mod-list a {
	min-width: 0;
	overflow-wrap: anywhere;
	color: var(--text);
	text-decoration: none;
}

main .mod-list a:hover {
	color: var(--accent);
}

.mod-list .version {
	color: var(--muted);
	font-size: 0.8rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 50%;
	flex-shrink: 0;
}

/* How to join: platform switch + big numbered steps */
.platform-switch {
	margin-bottom: 20px;
}

.switch-buttons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.switch-buttons button {
	font: inherit;
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 14px;
	color: var(--text);
	background: var(--surface-2);
	border: 2px solid var(--border);
	border-radius: var(--radius-sm);
	cursor: pointer;
}

.switch-buttons button span {
	font-size: 0.8rem;
	color: var(--muted);
}

.switch-buttons button[aria-pressed="true"] {
	border-color: var(--accent);
	box-shadow: inset 0 0 0 1px var(--accent);
}

.switch-buttons button[aria-pressed="true"] strong {
	color: var(--accent);
}

/* With the switch working, show only the chosen platform's steps
   (without JS, every step shows). */
.join.has-switch[data-platform="java"] [data-for="bedrock"],
.join.has-switch[data-platform="bedrock"] [data-for="java"],
.join.has-switch .request-form .platform {
	display: none;
}

article .steps {
	list-style: none;
	counter-reset: step;
	padding: 0;
	margin: 0 0 16px;
	display: flex;
	flex-direction: column;
	gap: 40px;
}

/* Phones: only the step title sits beside the number; the body runs full width
   underneath. Desktop indents the whole step past the number. */
.steps > .step {
	counter-increment: step;
	position: relative;
}

article .steps > .step > h3 {
	min-height: 36px;
	padding-left: 48px;
	margin-top: 0;
}

.steps > .step::before {
	content: counter(step);
	position: absolute;
	left: 0;
	top: 0;
	width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 1.15rem;
	color: var(--accent-text);
	background: var(--accent);
	border-radius: 50%;
}

article .steps h3 {
	font-size: 1.15rem;
	margin: 4px 0 8px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.steps > .step > p + p,
.steps > .step > * + .substeps,
.steps > .step > * + .step-action,
.steps > .step > * + .hint,
.steps > .step > * + form {
	margin-top: 10px;
}

article .substeps {
	list-style: decimal;
	padding-left: 1.4em;
	display: flex;
	flex-direction: column;
	gap: 8px;
	line-height: 1.5;
}

article .substeps li {
	padding-left: 4px;
}

article .substeps .copy-row,
.field-pair {
	margin-top: 6px;
}

.field-pair {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.field-pair .label {
	margin-bottom: 0;
}

.step-action {
	max-width: 420px;
}

.hint {
	display: block;
	font-size: 0.85rem;
	color: var(--muted);
	margin-top: 4px;
}

@media (min-width: 720px) {
	.steps > .step {
		padding-left: 60px;
	}

	article .steps > .step > h3 {
		min-height: 0;
		padding-left: 0;
		margin-top: 4px;
	}

	.steps > .step::before {
		top: -2px;
		width: 40px;
		height: 40px;
	}
}

@media (max-width: 480px) {
	.switch-buttons {
		grid-template-columns: 1fr;
	}
}

/* Help pages (console guide) */
.help {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding-top: 8px;
}

article .toc ol {
	list-style: decimal;
	padding-left: 1.4em;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 4px;
}

@media (min-width: 720px) {
	article .toc ol {
		grid-template-columns: 1fr 1fr;
		column-gap: 32px;
	}
}

.help section.prose > * + * {
	margin-top: 12px;
}

article .help h3,
.help section h3 {
	margin-top: 20px;
}

.platform-table {
	margin: 0;
	display: grid;
	gap: 0;
}

.platform-table div {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2px 16px;
	padding: 10px 0;
	border-bottom: 1px solid var(--border);
}

.platform-table dt {
	font-weight: 700;
}

.platform-table dd {
	margin: 0;
}

@media (min-width: 560px) {
	.platform-table div {
		grid-template-columns: 11em 1fr;
	}
}

article .bullets {
	list-style: disc;
	padding-left: 1.4em;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 8px;
}

/* Long unbroken link text (e.g. account.microsoft.com/family) wraps instead of
   stretching its grid column past the panel on phones. */
.help a {
	overflow-wrap: anywhere;
}

.callout {
	padding: 12px 14px;
	border-left: 4px solid var(--accent);
	background: var(--surface-2);
	border-radius: var(--radius-sm);
	font-size: 0.92rem;
}

.platform-steps {
	display: grid;
	gap: 8px;
}

.howto {
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
}

.howto summary {
	cursor: pointer;
	font-weight: 700;
	padding: 10px 14px;
}

.howto[open] summary {
	border-bottom: 1px solid var(--border);
}

.howto .substeps {
	padding: 12px 14px 14px 2.4em;
}

.faq {
	margin: 0;
}

.faq dt {
	font-weight: 700;
	margin-top: 14px;
}

.faq dt:first-child {
	margin-top: 0;
}

.faq dd {
	margin: 4px 0 0;
	color: var(--muted);
}

main a.discord-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	padding: 10px 18px;
	border-radius: var(--radius-sm);
	background: #5865f2;
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}

main a.discord-button:hover {
	background: #4752c4;
}

/* Whitelist request form */
.request-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.request-form .field {
	display: flex;
	flex-direction: column;
}

.request-form fieldset {
	border: 0;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.request-form fieldset label {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}

.request-form input[type="radio"] {
	accent-color: var(--accent);
	width: 1.1em;
	height: 1.1em;
	margin: 0;
}

.request-form input:not([type="radio"]):not([type="checkbox"]),
.request-form textarea {
	font: inherit;
	font-size: 1rem;
	color: var(--text);
	background: var(--code-bg);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 10px 12px;
	width: 100%;
	box-sizing: border-box;
}

.request-form textarea {
	resize: vertical;
}

.request-form input:focus,
.request-form textarea:focus {
	outline: 2px solid var(--accent);
	outline-offset: 1px;
}

.request-form ::placeholder {
	color: var(--muted);
	opacity: 0.8;
}

.optional {
	text-transform: none;
	letter-spacing: 0;
	opacity: 0.8;
}

/* Honeypot: off-screen, not display:none (some bots skip hidden fields). */
.request-form .hp {
	position: absolute;
	left: -10000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.form-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
}

button.submit {
	font: inherit;
	font-weight: 600;
	padding: 10px 20px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--accent);
	background: var(--accent);
	color: var(--accent-text);
	cursor: pointer;
}

button.submit:disabled {
	opacity: 0.6;
	cursor: wait;
}

.form-status {
	font-size: 0.9rem;
}

.form-status[data-state="ok"] {
	color: var(--led-on);
}

.form-status[data-state="error"] {
	color: var(--led-off);
}

.form-status[data-state="busy"] {
	color: var(--muted);
}

/* ---------- Home: hub intro, how it works, sign-up ---------- */

.home {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.hero {
	text-align: center;
	padding: 8px 0 4px;
}

.hero-title {
	font-family: var(--font-head);
	font-size: clamp(1.6rem, 5vw, 2.4rem);
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 12px;
}

.hero .lede {
	max-width: 640px;
	margin: 0 auto;
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin-top: 20px;
}

main a.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 22px;
	border-radius: var(--radius-sm);
	font-weight: 600;
	text-decoration: none;
	border: 1px solid transparent;
}

main a.button.primary {
	background: var(--accent);
	color: var(--accent-text);
}

main a.button.primary:hover {
	filter: brightness(1.08);
}

main a.button.discord {
	background: #5865f2;
	color: #fff;
}

main a.button.discord:hover {
	background: #4752c4;
}

.sign-up h2,
.how h2 {
	margin-top: 0;
}

.how-steps {
	list-style: none;
	counter-reset: how;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

@media (min-width: 720px) {
	.how-steps {
		grid-template-columns: repeat(3, 1fr);
	}
}

.how-steps li {
	counter-increment: how;
	background: var(--surface);
	border: var(--border-width) solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 18px;
}

.how-steps li::before {
	content: counter(how);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2em;
	height: 2em;
	border-radius: 50%;
	background: var(--accent);
	color: var(--accent-text);
	font-weight: 700;
	margin-bottom: 10px;
}

.how-steps h3 {
	margin: 0 0 6px;
}

.how-steps p {
	margin: 0;
}

.see-worlds {
	margin: 14px 0 0;
	text-align: right;
	font-weight: 600;
}

.sign-up > p {
	margin-top: 0;
}

.sign-up-discord {
	margin-top: 24px;
	padding-top: 18px;
	border-top: 1px solid var(--border);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.sign-up-discord p {
	margin: 0;
	flex: 1 1 280px;
}

/* How to join, revealed after a sign-up */
.join-details {
	padding: 16px;
	border: 1px solid var(--accent);
	border-radius: var(--radius-sm);
	background: var(--accent-soft);
}

.join-details h3 {
	margin: 0 0 6px;
}

.join-details p {
	margin: 0 0 10px;
}

.join-addresses {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
	margin-bottom: 10px;
}

/* Opt-in world tick boxes in the sign-up form */
.request-form fieldset.worlds .hint {
	margin: 0 0 4px;
}

.request-form input[type="checkbox"] {
	accent-color: var(--accent);
	width: 1.1em;
	height: 1.1em;
	margin: 0;
}

/* Worlds page heading (the home page hides its h1 behind the logo) */
.page-header h1 {
	margin: 0 0 8px;
}

/* ---------- Worlds showcase ---------- */

.world-grid {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}

@media (min-width: 640px) {
	.world-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
	}
}

.world {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--surface);
	border: var(--border-width) solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

.world-banner {
	position: relative;
	aspect-ratio: 16 / 7;
	background: linear-gradient(135deg, var(--c1), var(--c2));
	display: flex;
	align-items: flex-end;
	padding: 12px 16px;
}

.world-initial {
	font-family: var(--font-head);
	font-size: 3.5rem;
	font-weight: 700;
	line-height: 1;
	color: rgba(255, 255, 255, 0.85);
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

.world-body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px 18px 18px;
}

.world-body h2 {
	margin: 0;
	color: var(--accent);
}

.world-body p {
	margin: 0;
	color: var(--muted);
}

.world.resting .world-banner {
	filter: grayscale(0.6) brightness(0.8);
}

/* ---------- Per-theme flourishes ---------- */

/* Clean: gradient headline, green glow, solid buttons */
[data-theme="clean"] .server h1 {
	background: var(--head-grad);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

[data-theme="clean"] main a.server-card:hover,
[data-theme="clean"] .accordion[open] {
	box-shadow: var(--glow);
}

[data-theme="clean"] button.copy {
	background: var(--accent);
	color: var(--accent-text);
}

/* Whimsy: wobble + pop */
[data-theme="whimsy"] main a.server-card:hover {
	transform: rotate(-1deg) translateY(-3px);
	box-shadow: 8px 8px 0 var(--ink);
}

[data-theme="whimsy"] .server-grid > :nth-child(even):hover {
	transform: rotate(1deg) translateY(-3px);
}

[data-theme="whimsy"] .badge:nth-child(3n + 2) {
	background: var(--badge-2-bg);
	color: var(--badge-2-text);
}

[data-theme="whimsy"] .badge:nth-child(3n + 3) {
	background: var(--badge-3-bg);
	color: var(--badge-3-text);
}

[data-theme="whimsy"] main a.download,
[data-theme="whimsy"] button.copy,
[data-theme="whimsy"] .mode-toggle,
[data-theme="whimsy"] .menu-toggle,
[data-theme="whimsy"] .theme-picker select {
	border: 2px solid var(--ink);
	box-shadow: 3px 3px 0 var(--ink);
}

/* Minecraft: GUI panels, slot-like downloads, chat-style code, text shadows */
[data-theme="minecraft"] .server h1,
[data-theme="minecraft"] .lede,
[data-theme="minecraft"] main a.back,
[data-theme="minecraft"] .theme-picker {
	color: var(--on-bg);
	text-shadow: 2px 2px 0 var(--on-bg-shadow);
}

[data-theme="minecraft"] article .server-card h2,
[data-theme="minecraft"] .world-body h2,
[data-theme="minecraft"] .card-cta,
[data-theme="minecraft"] .download-name {
	color: var(--title);
}

[data-theme="minecraft"] code {
	background: #000;
	color: #fff;
}

[data-theme="minecraft"] main a.download {
	background: var(--surface-2);
	border: 0;
	box-shadow: inset 2px 2px 0 var(--slot-hi), inset -2px -2px 0 var(--slot-lo);
}

[data-theme="minecraft"] main a.download .download-name,
[data-theme="minecraft"] main a.download .download-meta,
[data-theme="minecraft"] main a.download .download-note {
	color: #fff;
	text-shadow: 1px 1px 0 #3f3f3f;
}

[data-theme="minecraft"] button.copy,
[data-theme="minecraft"] .mode-toggle,
[data-theme="minecraft"] .menu-toggle,
[data-theme="minecraft"] .theme-picker select {
	background: var(--btn-bg);
	color: #fff;
	text-shadow: 1px 1px 0 #3f3f3f;
	border: 2px solid #000;
	border-radius: 0;
	box-shadow: inset 2px 2px 0 #aaaaaa, inset -2px -2px 0 #3a3a3a;
}

[data-theme="minecraft"] button.copy:hover,
[data-theme="minecraft"] .mode-toggle:hover,
[data-theme="minecraft"] .menu-toggle:hover {
	background: var(--btn-hover);
}

[data-theme="minecraft"] main a.server-card:hover {
	border-color: #fff;
}

[data-theme="minecraft"] .badge,
[data-theme="minecraft"] .tag {
	border-radius: 0;
	background: #3c8527;
	color: #fff;
}

[data-theme="minecraft"] .led {
	border-radius: 0;
}

[data-theme="minecraft"] .status,
[data-theme="minecraft"] .mod-list .version {
	color: var(--muted);
}

[data-theme="minecraft"] .mod-list li {
	border-bottom-color: var(--rule);
}

[data-theme="minecraft"] .request-form input:not([type="radio"]),
[data-theme="minecraft"] .request-form textarea {
	background: #000;
	color: #fff;
	border: 2px solid #a0a0a0;
}

[data-theme="minecraft"] button.submit {
	background: var(--btn-bg);
	color: #fff;
	text-shadow: 1px 1px 0 #3f3f3f;
	border: 2px solid #000;
	border-radius: 0;
	box-shadow: inset 2px 2px 0 #aaaaaa, inset -2px -2px 0 #3a3a3a;
}

[data-theme="minecraft"] button.submit:hover {
	background: var(--btn-hover);
}

[data-theme="whimsy"] button.submit,
[data-theme="whimsy"] .request-form input:not([type="radio"]),
[data-theme="whimsy"] .request-form textarea {
	border: 2px solid var(--ink);
	box-shadow: 3px 3px 0 var(--ink);
}

[data-theme="minecraft"] .steps > .step::before {
	border-radius: 0;
	background: #3c8527;
	color: #fff;
	text-shadow: 1px 1px 0 #1f4413;
	box-shadow: inset 2px 2px 0 #5fae3f, inset -2px -2px 0 #26561a;
}

[data-theme="minecraft"] .switch-buttons button {
	border-radius: 0;
}

[data-theme="whimsy"] .steps > .step::before,
[data-theme="whimsy"] .switch-buttons button {
	border: 2px solid var(--ink);
	box-shadow: 3px 3px 0 var(--ink);
}

[data-theme="minecraft"] .header-link,
[data-theme="minecraft"] .help .lede {
	color: var(--on-bg);
	text-shadow: 2px 2px 0 var(--on-bg-shadow);
}

[data-theme="minecraft"] .howto {
	border-radius: 0;
	box-shadow: inset 2px 2px 0 var(--slot-hi), inset -2px -2px 0 var(--slot-lo);
	border: 0;
}

[data-theme="minecraft"] .hero-title,
[data-theme="minecraft"] .how > h2,
[data-theme="minecraft"] .page-header h1,
[data-theme="minecraft"] .see-worlds a {
	color: var(--on-bg);
	text-shadow: 2px 2px 0 var(--on-bg-shadow);
}

[data-theme="minecraft"] main a.button,
[data-theme="minecraft"] .how-steps li,
[data-theme="minecraft"] .world,
[data-theme="minecraft"] .join-details {
	border-radius: 0;
}

[data-theme="minecraft"] main a.button.primary {
	border: 2px solid #000;
	box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.35), inset -2px -2px 0 rgba(0, 0, 0, 0.35);
}

[data-theme="minecraft"] .how-steps li::before {
	border-radius: 0;
}

[data-theme="minecraft"] main a.button.discord,
[data-theme="minecraft"] main a.discord-button {
	border-radius: 0;
	border: 2px solid #000;
	box-shadow: inset 2px 2px 0 #8891f5, inset -2px -2px 0 #3c45a5;
	text-shadow: 1px 1px 0 #2a2f7a;
}

[data-theme="whimsy"] main a.button,
[data-theme="whimsy"] main a.discord-button {
	border: 2px solid var(--ink);
	box-shadow: 3px 3px 0 var(--ink);
}

@media (prefers-reduced-motion: reduce) {
	.status[data-state="checking"] .led {
		animation: none;
	}

	main a.server-card:hover,
	[data-theme="whimsy"] main a.server-card:hover,
	[data-theme="whimsy"] .server-grid > :nth-child(even):hover {
		transform: none;
	}
}