/* Splash for the Apocalypse EWS Discord bot.
 *
 * Borrows from the upstream dashboard at ews.kylemcdonald.net: warm beige
 * tile background, white panels with 1px grey borders (no radius), Times
 * New Roman body, Courier mono. A small blinking cursor and an ANSI-block
 * banner carry over the bot's terminal-era voice without breaking the
 * print-magazine register.
 *
 * Cascade order: base rules first, media queries last. Don't sprinkle
 * media queries between sections — the cascade will quietly bite you
 * (e.g. a later 1fr-1fr base rule overriding an earlier 1fr mobile rule).
 */

:root {
	--page-bg: #dbd4cc;
	--page-text: #000;
	--page-muted: #444;
	--panel-bg: #fff;
	--panel-border: #999;
	--accent: #00e;
	--banner-bg: #ffd;
	--display: "Times New Roman", Times, serif;
	--body: "Times New Roman", Times, serif;
	--mono: "Courier New", Courier, monospace;
}

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
	background: var(--page-bg);
	color: var(--page-text);
	font: 16px/1.4 var(--body);
	font-synthesis: none;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

body {
	min-width: 320px;
	margin: 8px;
}

.background-wallpaper {
	z-index: 0;
	pointer-events: none;
	position: fixed;
	inset: 0;
	background-image: url("backgrounds/soft-cartoon-tile-15.webp");
	background-position: 0 0;
	background-repeat: repeat;
	background-size: 512px 512px;
}

.app-shell {
	position: relative;
	z-index: 1;
	max-width: 720px;
	margin: 0 auto;
	padding: 8px 8px 24px;
	display: grid;
	gap: 12px;
}

a {
	color: var(--accent);
	text-decoration: underline;
}
a:visited {
	color: var(--accent);
}

::selection {
	color: #000;
	background: #c6d9ff;
}

code {
	font-family: var(--mono);
}

/* Panels — square white cards with thin grey border, the source's signature. */
.panel {
	border: 1px solid var(--panel-border);
	background: var(--panel-bg);
	color: var(--page-text);
	border-radius: 0;
	padding: 14px 16px;
	position: relative;
}

h1 {
	font-family: var(--display);
	margin: 0 0 6px;
	font-size: 1.7rem;
	font-weight: 700;
	line-height: 1.15;
}
h2,
h3 {
	font-family: var(--display);
	margin: 0 0 8px;
	font-weight: 700;
	line-height: 1.2;
}
h2 {
	font-size: 1.05rem;
}
h3 {
	font-size: 0.95rem;
}
p {
	margin: 0 0 0.6rem;
}
p:last-child {
	margin-bottom: 0;
}

/* "// help"-style headers. Lowercase in markup, uppercased here so the
 * monospace dispatch label is a CSS effect, not baked into the text. */
.dispatch {
	font-family: var(--mono);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 0.85rem;
	color: var(--page-muted);
	margin-bottom: 8px;
}
summary.dispatch {
	cursor: pointer;
	user-select: none;
	list-style: none;
}
summary.dispatch::-webkit-details-marker {
	display: none;
}
summary.dispatch::before {
	content: "▸ ";
	color: var(--page-muted);
}
details[open] > summary.dispatch::before {
	content: "▾ ";
}

.muted {
	color: var(--page-muted);
}
.small {
	font-size: 0.9rem;
}

/* Hero panel: floating marquee + tagline + icon row. */
.hero {
	display: grid;
	gap: 12px;
}

/* Marquee — black-filled box with cream-yellow text and a halftone-dotted
 * drop shadow offset down-right. Same vibe as a pulp-magazine sidebar. */
.marquee {
	position: relative;
	display: inline-block;
	margin: 4px 12px 14px 0;
	max-width: 100%;
}
.marquee__box {
	position: relative;
	z-index: 2;
	background: #000;
	color: var(--banner-bg);
	font-family: var(--mono);
	font-size: 0.95rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 8px 14px;
	border: 1px solid #000;
	white-space: nowrap;
}
.marquee__box > div {
	line-height: 1.35;
}
.marquee__shadow {
	position: absolute;
	z-index: 1;
	left: 6px;
	right: -6px;
	top: 6px;
	bottom: -6px;
	background-image: radial-gradient(var(--page-muted) 1px, transparent 1.5px);
	background-size: 4px 4px;
	background-position: 0 0;
	pointer-events: none;
}

.hero-tag {
	margin: 0;
	color: var(--page-muted);
	font-family: var(--mono);
	font-size: 0.88rem;
	letter-spacing: 0.02em;
}

.hero-row {
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: 16px;
	align-items: center;
	margin-top: 4px;
}
.hero-row img {
	display: block;
	width: 96px;
	height: 96px;
	border: 1px solid var(--panel-border);
	background: #fff;
}
.title-block h1 {
	margin-bottom: 4px;
}
.tagline {
	margin: 0;
	color: var(--page-muted);
	font-style: italic;
}

.cursor {
	display: inline-block;
	animation: blink 1s steps(1) infinite;
}
@keyframes blink {
	50% {
		opacity: 0;
	}
}

/* Install buttons — beveled like a classic 90s OS button: light top/left,
 * dark bottom/right. Both buttons identical so neither feels secondary. */
.install-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
.btn {
	display: block;
	padding: 14px 16px;
	background: var(--banner-bg);
	color: var(--page-text);
	text-decoration: none;
	font-family: var(--body);
	border: 0;
	border-top: 2px solid #fff;
	border-left: 2px solid #fff;
	border-right: 2px solid #888;
	border-bottom: 2px solid #888;
	box-shadow: 0 0 0 1px var(--panel-border);
	transition:
		background-color 80ms linear,
		transform 80ms linear;
}
.btn:visited {
	color: var(--page-text);
}
.btn:hover {
	background: #ffe690;
	text-decoration: none;
}
.btn:active {
	background: #f5dc60;
	border-top-color: #888;
	border-left-color: #888;
	border-right-color: #fff;
	border-bottom-color: #fff;
	transform: translate(1px, 1px);
}
.btn-label {
	display: block;
	font-weight: 700;
	font-size: 1.05rem;
	margin-bottom: 2px;
}
.btn-sub {
	display: block;
	font-size: 0.85rem;
	color: var(--page-muted);
	font-family: var(--mono);
}

.howto {
	margin: 14px 0 0;
	padding-left: 1.4em;
	font-size: 0.95rem;
}
.howto li {
	margin-bottom: 4px;
}
.howto li:last-child {
	margin-bottom: 0;
}

#config-warning {
	margin-top: 12px;
	background: #fdd;
	border: 1px solid #c33;
	padding: 8px 10px;
	font-size: 0.9rem;
	font-family: var(--mono);
}

/* Screenshot panel — centred, max-width contained, hover lift. */
.shot {
	display: block;
	border: 1px solid var(--panel-border);
	background: #000;
	line-height: 0;
}
.shot img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
}
.shot:hover {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

/* Pre blocks for payload. Square, bordered, courier inside. */
pre {
	font-family: var(--mono);
	background: #fff;
	border: 1px solid var(--panel-border);
	padding: 10px 12px;
	margin: 0;
	overflow-x: auto;
	font-size: 0.92rem;
	line-height: 1.5;
}
pre.payload {
	background: var(--banner-bg);
}

/* Help list — semantic <dl> instead of fixed-width <pre>; wraps cleanly on
 * narrow screens. Two-column on desktop, stacked on mobile. */
.cmds {
	margin: 0 0 0.5rem;
	display: grid;
	grid-template-columns: minmax(0, max-content) 1fr;
	column-gap: 16px;
	row-gap: 6px;
	align-items: baseline;
}
.cmds dt {
	font-family: var(--mono);
	font-size: 0.92rem;
}
.cmds dt code {
	background: transparent;
}
.cmds dd {
	margin: 0;
	color: var(--page-muted);
}

/* <details> open state spacing. */
details.more[open] > *:not(summary) {
	margin-top: 10px;
}

footer {
	font-size: 0.85rem;
	color: var(--page-muted);
	font-family: var(--mono);
	text-align: center;
	padding: 8px 12px;
	border: 1px solid var(--panel-border);
	background: var(--panel-bg);
}
footer p {
	margin: 0;
}

/* ==========================================================================
 * Mobile (<= 520px) — last in the file so the cascade always wins.
 * ========================================================================== */
@media (max-width: 520px) {
	body {
		margin: 4px;
	}
	.app-shell {
		padding: 4px 4px 16px;
		gap: 8px;
	}
	.panel {
		padding: 12px;
	}
	.hero-row {
		grid-template-columns: 56px 1fr;
		gap: 12px;
	}
	.hero-row img {
		width: 56px;
		height: 56px;
	}
	h1 {
		font-size: 1.3rem;
	}
	.marquee__box {
		font-size: 0.78rem;
		padding: 6px 10px;
		white-space: normal;
	}
	.hero-tag {
		font-size: 0.78rem;
	}
	.install-grid {
		grid-template-columns: 1fr;
		gap: 8px;
	}
	.btn {
		padding: 12px 14px;
	}
	.cmds {
		grid-template-columns: 1fr;
		row-gap: 2px;
	}
	.cmds dd {
		margin: 0 0 6px 16px;
	}
	pre {
		font-size: 0.82rem;
		padding: 8px 10px;
	}
	footer {
		font-size: 0.8rem;
	}
}