/* cratertanks.com: the game's dark steel and amber, readable on phones. */
:root {
	--bg: #090c12;
	--panel: #121821;
	--line: #263241;
	--text: #e9eef7;
	--dim: #9aa6b8;
	--accent: #ff9e29;
	--gold: #ffd24d;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
	margin: 0;
	color: var(--text);
	background: var(--bg);
	font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--accent); }
a:hover { color: var(--gold); }
header.site {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 4px 16px;
	padding: 14px 20px;
	border-bottom: 1px solid var(--line);
	background: rgba(9, 12, 18, 0.92);
}
header.site .brand {
	color: var(--text);
	text-decoration: none;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
}
header.site nav a { margin-left: 18px; color: var(--dim); text-decoration: none; }
header.site nav a:first-child { margin-left: 0; }
header.site nav a:hover { color: var(--accent); }
.hero {
	position: relative;
	min-height: 62vh;
	display: flex;
	align-items: flex-end;
	background: #000 url("/img/hero.jpg") center / cover no-repeat;
}
.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(9, 12, 18, 0.92) 0%, rgba(9, 12, 18, 0.55) 55%, rgba(9, 12, 18, 0.15) 100%),
		linear-gradient(0deg, rgba(9, 12, 18, 1) 0%, rgba(9, 12, 18, 0) 40%);
}
.hero .inner { position: relative; z-index: 1; padding: 48px 20px 40px; max-width: 760px; }
.hero h1 {
	margin: 0;
	font-size: clamp(42px, 9vw, 84px);
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #fff1d8;
}
.hero .tag { margin: 10px 0 0; color: var(--accent); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.hero p.lead { font-size: 19px; color: var(--text); max-width: 620px; }
.badge {
	display: inline-block;
	margin-top: 12px;
	padding: 10px 18px;
	border-radius: 10px;
	background: var(--accent);
	color: #1a0f02;
	font-weight: 800;
	text-decoration: none;
}
main.doc { max-width: 820px; margin: 0 auto; padding: 32px 20px 64px; }
main.doc h1 { font-size: 34px; margin: 0 0 4px; }
main.doc .updated { color: var(--dim); margin: 0 0 28px; }
main.doc h2 { margin-top: 34px; font-size: 22px; color: var(--gold); border-bottom: 1px solid var(--line); padding-bottom: 4px; }
main.doc li { margin: 6px 0; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; max-width: 1000px; margin: 0 auto; padding: 32px 20px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px; }
.card h3 { margin: 0 0 6px; color: var(--gold); }
.card p { margin: 0; color: var(--dim); }
footer.site { border-top: 1px solid var(--line); padding: 22px 20px; color: var(--dim); font-size: 15px; text-align: center; }
footer.site a { margin: 0 10px; }