/* ===== APPsolute Play — shared styles =====
   Palette and type carried over from the existing Play pages so the new
   site reads as the same product. Paths throughout the site are relative,
   so this folder can be served from a subdirectory or from a domain root
   without edits. */

:root {
	--bg: #0d0d1a;
	--surface: #1a1a2e;
	--border: #2a2a3e;
	--rule: #1e1e32;
	--text: #e0e0e8;
	--muted: #a0a0b0;
	--faint: #6b6b7b;
	--cyan: #00f5ff;
	--magenta: #ff2e97;
	--gold: #ffd700;
	--violet: #8b5cf6;
	--brand-gradient: linear-gradient(135deg, #00f5ff, #ff2e97);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
	font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
	background: var(--bg);
	color: var(--text);
	min-height: 100vh;
	line-height: 1.6;
	display: flex;
	flex-direction: column;
	align-items: center;
}

img { max-width: 100%; height: auto; }

.gradient-text {
	background: var(--brand-gradient);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* ===== Nav ===== */
nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 24px;
	border-bottom: 1px solid var(--rule);
	max-width: 1200px;
	width: 100%;
	margin: 0 auto;
}

nav .brand {
	font-weight: 800;
	font-size: 1.1rem;
	text-decoration: none;
	background: var(--brand-gradient);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

nav .links { display: flex; gap: 24px; align-items: center; }

nav .links a {
	color: var(--muted);
	text-decoration: none;
	font-size: 0.85rem;
	transition: color 0.2s;
}

nav .links a:hover,
nav .links a[aria-current="page"] { color: var(--text); }

.nav-toggle {
	display: none;
	background: none;
	border: none;
	color: var(--muted);
	font-size: 1.5rem;
	cursor: pointer;
	padding: 4px;
}

/* ===== Layout ===== */
main { width: 100%; max-width: 1020px; padding: 0 32px; }

.hero {
	text-align: center;
	padding: 80px 0 40px;
}

.hero h1 {
	font-size: 2.4rem;
	font-weight: 800;
	letter-spacing: 1px;
	line-height: 1.25;
}

.hero .lede {
	color: var(--muted);
	font-size: 1.1rem;
	margin: 16px auto 0;
	max-width: 560px;
}

section { padding: 48px 0; }

section h2 {
	font-size: 1.6rem;
	font-weight: 700;
	text-align: center;
	margin-bottom: 8px;
}

section .section-note {
	color: var(--muted);
	text-align: center;
	max-width: 560px;
	margin: 0 auto 32px;
	font-size: 0.95rem;
}

/* ===== Cards ===== */
.grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 32px;
}

.card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 32px 28px;
	text-decoration: none;
	color: inherit;
	display: flex;
	flex-direction: column;
	transition: transform 0.2s, border-color 0.3s, box-shadow 0.3s;
}

a.card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.card-emoji { font-size: 3.2rem; margin-bottom: 16px; line-height: 1; }

.card-icon {
	width: 80px;
	height: 80px;
	border-radius: 18px;
	margin-bottom: 16px;
}

.card h3 { font-size: 1.35rem; font-weight: 700; margin-bottom: 8px; }

.card p { color: var(--muted); font-size: 0.95rem; }

/* margin-top:auto pins the meta block (and the button under it) to the
   bottom of the card, so they line up across cards with different
   description lengths. */
.card .meta {
	color: var(--faint);
	font-size: 0.85rem;
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid var(--border);
}

.card .meta strong { color: var(--muted); font-weight: 600; }

/* Per-game accents, matching the existing Play portal */
.card.trivia:hover { border-color: var(--cyan); }
.card.lamped:hover { border-color: var(--gold); }
.card.monster-wars:hover { border-color: var(--violet); }

.card.trivia h3 { color: var(--cyan); }
.card.lamped h3 { color: var(--gold); }
.card.monster-wars h3 { color: var(--violet); }

/* ===== Tags ===== */
.tag {
	display: inline-block;
	align-self: flex-start;
	margin-top: 16px;
	padding: 4px 14px;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 1px;
	background: rgba(224, 224, 232, 0.08);
	color: var(--muted);
}

/* Link cards (the lineup previews) have no meta block, so the tag itself
   is what gets pinned to the bottom for a consistent baseline. */
a.card p { margin-bottom: 16px; }
a.card .tag { margin-top: auto; }

.card.trivia .tag { background: rgba(0, 245, 255, 0.12); color: var(--cyan); }
.card.lamped .tag { background: rgba(255, 215, 0, 0.12); color: var(--gold); }
.card.monster-wars .tag { background: rgba(139, 92, 246, 0.12); color: var(--violet); }

/* ===== Steps ===== */
.steps { counter-reset: step; display: grid; gap: 24px; }

.step {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 24px 28px;
}

.step::before {
	counter-increment: step;
	content: counter(step);
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--bg);
	background: var(--brand-gradient);
}

.step h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 4px; }
.step p { color: var(--muted); font-size: 0.95rem; }

/* ===== Buttons ===== */
.btn {
	display: inline-block;
	padding: 12px 28px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 0.95rem;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid transparent;
	transition: transform 0.2s, box-shadow 0.3s, border-color 0.3s, color 0.2s;
}

.btn-primary {
	background: var(--brand-gradient);
	color: #0d0d1a;
}

.btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(255, 46, 151, 0.25);
}

.btn-secondary {
	border-color: var(--border);
	color: var(--muted);
}

.btn-secondary:hover { border-color: var(--cyan); color: var(--text); }

.card .btn { margin-top: 20px; align-self: flex-start; }

/* ===== CTA band ===== */
.cta {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 16px;
	padding: 48px 32px;
	text-align: center;
	margin-bottom: 48px;
}

.cta h2 { margin-bottom: 12px; }

.cta p {
	color: var(--muted);
	max-width: 480px;
	margin: 0 auto 28px;
	font-size: 0.95rem;
}

/* ===== Policy pages ===== */
.policy {
	max-width: 760px;
	margin: 0 auto;
	padding: 56px 0 24px;
}

.policy h1 {
	font-size: 2rem;
	font-weight: 800;
	letter-spacing: 0.5px;
}

.policy .last-updated {
	color: var(--faint);
	font-size: 0.85rem;
	margin-top: 8px;
	margin-bottom: 32px;
}

.policy h2 {
	font-size: 1.25rem;
	font-weight: 700;
	text-align: left;
	color: var(--cyan);
	margin: 40px 0 12px;
	padding-top: 24px;
	border-top: 1px solid var(--rule);
}

.policy h3 {
	font-size: 1rem;
	font-weight: 700;
	margin: 24px 0 8px;
}

.policy p,
.policy li {
	color: var(--muted);
	font-size: 0.95rem;
}

.policy p { margin-bottom: 14px; }

.policy ul {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
}

.policy li {
	position: relative;
	padding-left: 20px;
	margin-bottom: 8px;
}

.policy li::before {
	content: "—";
	position: absolute;
	left: 0;
	color: var(--border);
}

.policy strong { color: var(--text); font-weight: 600; }

.policy a { color: var(--cyan); text-decoration: none; }
.policy a:hover { text-decoration: underline; }

.highlight-box {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 24px 28px;
	margin: 20px 0;
}

.highlight-box p:last-child,
.highlight-box ul:last-child { margin-bottom: 0; }

/* ===== Footer ===== */
footer {
	border-top: 1px solid var(--rule);
	padding: 32px 24px;
	text-align: center;
	color: var(--faint);
	font-size: 0.8rem;
	margin-top: auto;
	width: 100%;
}

footer .footer-links {
	display: flex;
	justify-content: center;
	gap: 24px;
	margin-bottom: 12px;
	flex-wrap: wrap;
}

footer a { color: var(--faint); text-decoration: none; }
footer a:hover { color: var(--muted); }

/* ===== Responsive ===== */
@media (max-width: 480px) {
	.nav-toggle { display: block; }
	nav { position: relative; }

	nav .links {
		display: none;
		position: absolute;
		top: 56px;
		left: 0;
		right: 0;
		background: var(--bg);
		border-bottom: 1px solid var(--rule);
		flex-direction: column;
		padding: 16px 24px;
		gap: 16px;
		z-index: 50;
	}

	nav .links.open { display: flex; }

	main { padding: 0 20px; }
	.hero { padding: 56px 0 24px; }
	.hero h1 { font-size: 1.8rem; }
	.hero .lede { font-size: 1rem; }
	section { padding: 32px 0; }
	.grid { gap: 20px; }
	.step { flex-direction: column; gap: 12px; padding: 24px; }
	.cta { padding: 36px 24px; }
}