/* moloth.com v2 — LIGHT theme (loads after v2.css and overrides it)
   Closer to the original moloth.com blue, with frosted-glass cards. */
:root {
	--text: #0d2440;
	--muted: #34557a;
	--accent: #0b56a3;
	--glass: rgba(248, 250, 253, 0.58);
	--glass-hover: rgba(252, 253, 255, 0.78);
	--glass-border: rgba(255, 255, 255, 0.75);
	/* layered shadow: tight contact shadow + softer lift shadow + glass top highlight */
	--glass-shadow:
		0 1px 2px rgba(12, 32, 64, 0.18),
		0 4px 10px rgba(12, 32, 64, 0.16),
		0 14px 32px rgba(12, 32, 64, 0.22),
		inset 0 1px 0 rgba(255, 255, 255, 0.85);
	--glass-shadow-raised:
		0 2px 4px rgba(12, 32, 64, 0.18),
		0 8px 18px rgba(12, 32, 64, 0.20),
		0 22px 44px rgba(12, 32, 64, 0.28),
		inset 0 1px 0 rgba(255, 255, 255, 0.9);
	--border: rgba(13, 36, 64, 0.15);
}

/* Original-style radial blue, plus a few soft light blooms so the glass has something to frost */
html {
	min-height: 100%;
	/* softer steel blue (less cyan than the original #5cb3ff) */
	background-color: #6f9fcf;
	background-image:
		radial-gradient(circle at 15% 12%, rgba(255, 255, 255, 0.45) 0, rgba(255, 255, 255, 0) 420px),
		radial-gradient(circle at 88% 30%, rgba(225, 235, 248, 0.45) 0, rgba(225, 235, 248, 0) 460px),
		radial-gradient(circle at 20% 70%, rgba(45, 85, 140, 0.35) 0, rgba(45, 85, 140, 0) 480px),
		radial-gradient(circle at 85% 92%, rgba(255, 255, 255, 0.30) 0, rgba(255, 255, 255, 0) 420px),
		radial-gradient(ellipse at 50% 30%, #b4cfe8 0%, #7fa9d4 45%, #6895c6 100%);
}
body { color: var(--text); background: transparent; }

/* Vignette: the blue darkens toward the edges of the screen.
   Pinned to the viewport (not the page) so it stays put while scrolling. */
html::before {
	content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
	/* clear over the content column, darkening toward the sides and corners */
	background: radial-gradient(ellipse 72% 95% at 50% 45%,
		rgba(16, 42, 86, 0) 50%,
		rgba(16, 42, 86, 0.28) 80%,
		rgba(10, 30, 68, 0.55) 100%);
}
/* Phones: content fills the width, so keep the vignette gentle */
@media (max-width: 700px) {
	html::before {
		background: radial-gradient(ellipse 90% 100% at 50% 45%,
			rgba(16, 42, 86, 0) 55%,
			rgba(16, 42, 86, 0.14) 85%,
			rgba(10, 30, 68, 0.28) 100%);
	}
}

/* Header */
/* Electric-blue glow radiating from the MOLOTH logo (the original #5cb3ff, pushed brighter) */
header { overflow-x: clip; }   /* keep the glow from causing sideways scroll on phones */
.logo { display: block; width: fit-content; margin: 0 auto; position: relative; isolation: isolate; }
.logo::before {
	content: ""; position: absolute; z-index: -1; pointer-events: none;
	left: 50%; top: 50%; width: min(150%, 100vw); height: 230%; transform: translate(-50%, -50%);
	background: radial-gradient(ellipse at center,
		rgba(70, 175, 255, 0.85) 0%,
		rgba(70, 175, 255, 0.45) 30%,
		rgba(92, 179, 255, 0.15) 55%,
		rgba(92, 179, 255, 0) 72%);
	filter: blur(6px);
}
.logo img {
	filter:
		/* dark navy outline around the letters (drawn first so the glow sits outside it) */
		drop-shadow(1px 0 0 #0a1f3a)
		drop-shadow(-1px 0 0 #0a1f3a)
		drop-shadow(0 1px 0 #0a1f3a)
		drop-shadow(0 -1px 0 #0a1f3a)
		/* electric-blue glow */
		drop-shadow(0 0 6px rgba(120, 200, 255, 0.95))
		drop-shadow(0 0 22px rgba(60, 165, 255, 0.75))
		drop-shadow(0 3px 8px rgba(10, 35, 80, 0.45));
}
/* Text that sits directly on the blue background uses the darkest navy for contrast */
h1, h2, .tagline, .section-about, footer { color: var(--text); }
.tagline a, .back, footer a { color: #0a2a4f; text-decoration: underline; text-decoration-color: rgba(6, 47, 94, 0.35); }
h2 { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); }

/* ---------- Frosted glass surfaces ---------- */
.links a, .docs a, .panel, .facts li {
	background: var(--glass);
	border: 1px solid var(--glass-border);
	box-shadow: var(--glass-shadow);
	-webkit-backdrop-filter: blur(14px) saturate(110%);
	backdrop-filter: blur(14px) saturate(110%);
}
.links a:hover, .links a:focus-visible,
.docs a:hover, .docs a:focus-visible {
	background: var(--glass-hover);
	border-color: rgba(255, 255, 255, 0.85);
	box-shadow: var(--glass-shadow-raised);
	transform: translateY(-2px);
}
.links a, .docs a { transition: background .15s, border-color .15s, transform .15s, box-shadow .15s; }
@media (prefers-reduced-motion: reduce) {
	.links a, .docs a { transition: none; }
	.links a:hover, .docs a:hover { transform: none; }
}
.links img { box-shadow: 0 1px 2px rgba(12, 32, 64, 0.25), 0 3px 8px rgba(12, 32, 64, 0.22); }

/* Dancing black mage: crisp pixel-style drop shadow (a nod to the original site's mage shadow) */
.mage {
	filter:
		drop-shadow(3px 3px 0 rgba(12, 32, 64, 0.35))
		drop-shadow(0 6px 6px rgba(12, 32, 64, 0.30));
}
.links span, .doc-meta, .doc-note, .facts li { color: var(--muted); }

/* Badges on the Docs page */
.badge-pdf { background: rgba(200, 40, 40, 0.14); color: #a3201f; }
.badge-web { background: rgba(11, 86, 163, 0.14); color: var(--accent); }

/* Footer */
/* Footer: plain text under a horizontal rule */
footer { border-top-color: rgba(13, 36, 64, 0.22); }

/* Fallback for browsers without backdrop-filter: make glass a bit more opaque */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.links a, .docs a, .panel, .facts li { background: rgba(250, 252, 255, 0.82); }
}