:root {
	/* Central theme constants: adjust these lightness values site-wide. */
	--theme-hue: 140;
	--theme-saturation: 42%;
	--theme-foreground-lightness: 85%;
	--theme-panel-lightness: 12%;
	--theme-page-lightness: 3%;
	--theme-button-lightness: 25%;
	--theme-input-lightness: 5%;
	--theme-panel-radius: 6px;

	--bg-deep: hsl(var(--theme-hue) var(--theme-saturation) var(--theme-page-lightness));
	--bg: hsl(var(--theme-hue) var(--theme-saturation) calc(var(--theme-page-lightness) + 5%));
	--surface: hsl(var(--theme-hue) var(--theme-saturation) var(--theme-panel-lightness));
	--surface-hover: hsl(var(--theme-hue) var(--theme-saturation) calc(var(--theme-panel-lightness) + 7%));
	--border: hsl(var(--theme-hue) var(--theme-saturation) var(--theme-foreground-lightness) / 0.36);
	--text: hsl(var(--theme-hue) var(--theme-saturation) var(--theme-foreground-lightness));
	/* One foreground color; weight, opacity and effects provide hierarchy. */
	--muted: var(--text);
	--cyan: var(--text);
	--violet: var(--text);
	--accent: hsl(var(--theme-hue) var(--theme-saturation) var(--theme-foreground-lightness));
	--accent-text: hsl(var(--theme-hue) var(--theme-saturation) var(--theme-page-lightness));
	--header-bg: hsl(var(--theme-hue) var(--theme-saturation) var(--theme-panel-lightness) / 0.94);
	--button-bg: hsl(var(--theme-hue) var(--theme-saturation) var(--theme-button-lightness));
	--input-bg: hsl(var(--theme-hue) var(--theme-saturation) var(--theme-input-lightness));
	color-scheme: dark;
}

:root[data-theme-color="red"] { --theme-hue: 0; }
:root[data-theme-color="orange"] { --theme-hue: 28; }
:root[data-theme-color="yellow"] { --theme-hue: 50; }
:root[data-theme-color="green"] { --theme-hue: 140; }
:root[data-theme-color="blue"] { --theme-hue: 220; }
:root[data-theme-color="purple"] { --theme-hue: 275; }
:root[data-theme-color="bw"] {
	--theme-hue: 0;
	--theme-saturation: 0%;
}

:root[data-theme-mode="light"] {
	--theme-foreground-lightness: 15%;
	--theme-panel-lightness: 95%;
	--theme-page-lightness: 85%;
	--theme-button-lightness: 78%;
	--theme-input-lightness: 90%;
	--accent-text: hsl(var(--theme-hue) var(--theme-saturation) 96%);
	color-scheme: light;
}

html,
body {
	background-color: var(--bg-deep);
}

body {
	min-width: 320px;
	min-height: 100vh;
	margin: 0;
	background-image: linear-gradient(145deg, var(--bg-deep) 0%, var(--bg) 48%, var(--surface) 100%);
	color: var(--text);
	font-family: "Fredoka", system-ui, sans-serif;
}

.fieldInput,
.filterField input,
.filterField select {
	background: var(--input-bg);
	color: var(--text);
}

.filterField input:not([type="range"]),
.filterField select {
	background: var(--input-bg);
	color: var(--text);
}

.filterField input::placeholder {
	color: hsl(var(--theme-hue) var(--theme-saturation) var(--theme-foreground-lightness) / 0.62);
}
.actionButton,
.logoutButton { background: var(--button-bg); }
.fieldInput:focus,
.filterField input:focus,
.filterField select:focus { box-shadow: 0 0 0 3px hsl(var(--theme-hue) var(--theme-saturation) var(--theme-foreground-lightness) / 0.18); }
.gameDetailOverlay { background: hsl(var(--theme-hue) var(--theme-saturation) var(--theme-page-lightness) / 0.76); }
.gameDetailClose {
	background: var(--button-bg);
	color: var(--text);
}
.primaryButton {
	background: var(--button-bg);
	color: var(--text);
}

.accountShell,
.roleGrid,
.filterBar,
.gameGrid,
.emptyState {
	overflow: hidden;
	border-radius: var(--theme-panel-radius);
}

.gameDetail { border-radius: var(--theme-panel-radius); }

.placeholderMain {
	width: min(100% - 2.5rem, 1180px);
	margin: 0 auto;
	padding: 3rem 0 6rem;
}

.placeholderMain h1 {
	margin: 0 0 1.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--border);
	font-size: clamp(2rem, 4vw, 3.5rem);
}

.placeholderPanel {
	margin: 0;
	padding: 1.5rem;
	border: 1px solid var(--border);
	border-radius: var(--theme-panel-radius);
	background: var(--surface);
	color: var(--text);
}

@media (orientation: portrait) {
	.placeholderMain {
		width: min(100% - 1.5rem, 680px);
		padding: 2rem 0 5rem;
	}
}