/* Shared styling for the public site (landing + registration).
   Deliberately tiny and dependency-free: this is served by the same front
   server as the ~1 GB game bundle, so the page itself should cost nothing. */
:root {
	--bg: #0d0f14;
	--panel: #171b24;
	--edge: #2b3242;
	--text: #d9dee8;
	--muted: #8d97a8;
	--gold: #d8b25a;
	--gold-dim: #a8873f;
	--error: #e06a5a;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1.5rem;
	padding: 2rem 1rem;
	/* The same leather + vignette the game wears (assets/branding/login_bg.png,
	   here as a lighter JPEG). Gradient first = drawn ON TOP of the image; the
	   stops match the boot/login/character-select vignette so the site and the
	   game read as one thing. `fixed` keeps the texture still while the page
	   scrolls, so it behaves like a backdrop rather than wallpaper. */
	background:
		radial-gradient(82% 82% at 50% 35%,
			rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.45) 45%, rgba(0,0,0,0.85) 75%, rgba(0,0,0,1) 100%),
		url("bg.jpg") center / cover fixed;
	background-color: var(--bg);
	color: var(--text);
	font: 16px/1.6 "Segoe UI", system-ui, sans-serif;
	text-align: center;
}

/* The logo IS the wordmark - it replaced the <h1> on both pages. */
.logo {
	width: min(86vw, 30rem);
	height: auto;
	filter: drop-shadow(0 0 40px rgba(216, 178, 90, .18));
}

h2 { margin: 0 0 .4rem; font-size: 1.4rem; color: var(--gold); }

p { margin: 0; max-width: 34rem; color: var(--muted); }

.panel {
	width: min(24rem, 100%);
	padding: 1.6rem;
	background: var(--panel);
	border: 1px solid var(--edge);
	border-radius: 10px;
	text-align: left;
}

label { display: block; margin: .9rem 0 .25rem; font-size: .85rem; color: var(--muted); }

input {
	width: 100%;
	padding: .6rem .7rem;
	background: #0f131b;
	border: 1px solid var(--edge);
	border-radius: 6px;
	color: var(--text);
	font: inherit;
}
input:focus { outline: none; border-color: var(--gold-dim); }

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 1.2rem;
	padding: .7rem 1.6rem;
	background: var(--gold);
	border: none;
	border-radius: 6px;
	color: #16130a;
	font: 600 1rem/1 inherit;
	text-decoration: none;
	cursor: pointer;
}
.btn:hover { background: #eac670; }
.btn.wide { display: flex; width: 100%; text-align: center; }
.btn.big { padding: .95rem 2.6rem; font-size: 1.15rem; }

.btn.ghost {
	background: #212630;
	border: 1px solid #474f61;
	border-radius: 4px;
	color: var(--text);
}
.btn.ghost:hover { background: #2e3340; border-color: #d9b359; color: var(--text); }
.btn.ghost:active { background: #171a21; border-color: #d9b359; }

.links { display: flex; gap: .8rem; flex-wrap: wrap; justify-content: center; }

a { color: var(--gold-dim); }

.note { margin-top: 1rem; font-size: .8rem; color: var(--muted); text-align: center; }

/* Client-side validation feedback only — the server is what actually decides
   whether an account can be created (see world.gd registerResult). */
.msg { min-height: 1.4rem; margin-top: .8rem; font-size: .9rem; text-align: center; }
.msg.error { color: var(--error); }