/* Bubblez developer site stylesheet.
   Palette is lifted directly from the game so the website feels like an
   extension of the play field, not a generic landing page:
     - bg / surface come from project.godot's default_clear_color and the
       statistics-menu inner panels
     - gold / gold-soft come from GOLD_ACCENT / GOLD_LABEL in
       scenes/ui/game_over_summary/game_over_summary.gd
   System fonts only — no webfont request, no build step, no JS. */

:root {
	--bg: #110022;
	--surface: #2a0055;
	--surface-soft: #1c0a3a;
	--gold: #ffd633;
	--gold-soft: #ffeb99;
	--fg: #ffffff;
	--muted: #b8aed4;
	--rule: #3a1a66;
}

* {
	box-sizing: border-box;
}

html {
	font-size: 17px;
	-webkit-text-size-adjust: 100%;
	background: var(--bg);
}

body {
	margin: 0 auto;
	padding: 32px 20px 96px;
	max-width: 760px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	line-height: 1.6;
	color: var(--fg);
	background: var(--bg);
}

header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding-bottom: 24px;
	margin-bottom: 32px;
	border-bottom: 1px solid var(--rule);
	text-align: center;
}

header img.title {
	display: block;
	max-width: min(360px, 80vw);
	height: auto;
	image-rendering: -webkit-optimize-contrast;
}

header h1 {
	margin: 0;
	font-size: 1.6rem;
	color: var(--gold);
	letter-spacing: 0.01em;
}

header p.tagline {
	margin: 0;
	color: var(--gold-soft);
	font-size: 1rem;
	letter-spacing: 0.02em;
}

main h2 {
	margin: 2.4rem 0 0.6rem;
	font-size: 1.25rem;
	color: var(--gold);
	letter-spacing: 0.01em;
}

main h3 {
	margin-top: 1.5rem;
	font-size: 1.05rem;
	color: var(--gold-soft);
}

a {
	color: var(--gold);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 120ms ease;
}

a:hover,
a:focus {
	border-bottom-color: var(--gold);
}

ul {
	padding-left: 1.4rem;
	margin: 0.6rem 0;
}

li + li {
	margin-top: 0.25rem;
}

p {
	margin: 0.6rem 0;
}

code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.92em;
	background: var(--surface-soft);
	color: var(--gold-soft);
	padding: 0.1em 0.4em;
	border-radius: 4px;
}

strong {
	color: var(--gold-soft);
}

footer {
	margin-top: 64px;
	padding-top: 16px;
	border-top: 1px solid var(--rule);
	color: var(--muted);
	font-size: 0.9rem;
	text-align: center;
}

/* Play Store CTA — Google's brand guidelines mandate a minimum height
   for the badge plus surrounding clear space equal to a quarter of the
   badge height. We render at 80 px, padding provides the clear space. */
.play-cta {
	display: flex;
	justify-content: center;
	margin: 1.2rem 0 0.4rem;
	padding: 16px 0;
}

.play-cta a {
	display: inline-block;
	border-bottom: none;
	transition: transform 150ms ease;
}

.play-cta a:hover,
.play-cta a:focus {
	transform: scale(1.04);
}

.play-cta img {
	display: block;
	height: 80px;
	width: auto;
}

/* Screenshot gallery — auto-fit grid so the layout breathes on a desktop
   and collapses to a single column on phones without media queries. */
.screenshots {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 16px;
	margin: 1rem 0;
}

.screenshots img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
	border: 1px solid var(--rule);
	background: var(--surface-soft);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

/* Release-notes specific */
.release {
	margin-top: 2rem;
	padding: 1rem 1.25rem;
	background: var(--surface-soft);
	border: 1px solid var(--rule);
	border-radius: 12px;
}

.release h2 {
	margin-top: 0;
}