/*=== Site =====================================================================
The site's own pages' looks: the main menu (index.html), the credits (credits/index.html), the account page
(account/index.html), and the game's login menu
(play/index.html). The learn-to-play page's (see rules/guide.css): light or dark as the system is set, the system font,
a card with gold art deco touches: corner brackets, serif titles in capitals, a gold double rule with a diamond */

:root {
	color-scheme: light;
	--page: #f9f9f7;
	--surface-1: #fcfcfb;
	--surface-2: #f1f0ea;
	--text-primary: #0b0b0b;
	--text-secondary: #52514e;
	--muted: #898781;
	--border: rgba(11, 11, 11, 0.10);
	--shadow: rgba(0, 0, 0, 0.12);
	--gold: #b8922a;
	--gold-strong: #8f6f1c;
	--gold-line: rgba(184, 146, 42, 0.55);
	--gold-soft: rgba(184, 146, 42, 0.10);
}

/* Dark as the system is set, or always (the game's login, over the game's black page) */
@media (prefers-color-scheme: dark) {
	:root {
		color-scheme: dark;
		--page: #0d0d0d;
		--surface-1: #1a1a19;
		--surface-2: #232321;
		--text-primary: #ffffff;
		--text-secondary: #c3c2b7;
		--border: rgba(255, 255, 255, 0.10);
		--shadow: rgba(0, 0, 0, 0.5);
		--gold: #e4cc6c;
		--gold-strong: #f0dc8a;
		--gold-line: rgba(228, 204, 108, 0.55);
		--gold-soft: rgba(228, 204, 108, 0.10);
	}
}

.theme_dark {
	color-scheme: dark;
	--page: #0d0d0d;
	--surface-1: #1a1a19;
	--surface-2: #232321;
	--text-primary: #ffffff;
	--text-secondary: #c3c2b7;
	--border: rgba(255, 255, 255, 0.10);
	--shadow: rgba(0, 0, 0, 0.5);
	--gold: #e4cc6c;
	--gold-strong: #f0dc8a;
	--gold-line: rgba(228, 204, 108, 0.55);
	--gold-soft: rgba(228, 204, 108, 0.10);
}


/*=== A page of the site =======================================================
The menu and the credits: one card in the middle of the page */

.site_page, .site_page * {
	box-sizing: border-box;
}

html:has(.site_page) {
	background-color: var(--page);
	color: var(--text-primary);
	font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.site_page {
	margin: 0;
	min-height: 100vh;
	display: grid;
	place-items: center;
	padding: 24px 16px;
}


/*=== The card =================================================================*/

/* With gold corner brackets */
.card {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 440px;
	padding: 36px 32px 32px;
	background-color: var(--surface-1);
	border: 1px solid var(--border);
	border-radius: 8px;
	box-shadow: 0 1px 2px var(--shadow);
	color: var(--text-primary);
	font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
	text-align: center;
}

.card::before, .card::after {
	content: "";
	position: absolute;
	width: 18px;
	height: 18px;
	border: 1px solid var(--gold-line);
	pointer-events: none;
}

.card::before {
	top: 8px;
	left: 8px;
	border-right: none;
	border-bottom: none;
}

.card::after {
	right: 8px;
	bottom: 8px;
	border-left: none;
	border-top: none;
}

.card_title {
	margin: 12px 0 0;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 26px;
	font-weight: normal;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-primary);
}

.tagline {
	margin: 4px 0 0;
	font-family: Georgia, "Times New Roman", serif;
	font-style: italic;
	color: var(--text-secondary);
}

/* A gold double rule with a diamond in the middle */
.rule {
	position: relative;
	height: 7px;
	margin: 20px 0 24px;
	border-top: 1px solid var(--gold-line);
	border-bottom: 1px solid var(--gold-line);
}

.rule::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 9px;
	height: 9px;
	background-color: var(--surface-1);
	border: 1px solid var(--gold);
	transform: translate(-50%, -50%) rotate(45deg);
}


/*=== Links and buttons ========================================================*/

.menu {
	display: grid;
	gap: 12px;
}

/* A big button: a label in gold capitals over a line saying what it does */
.menu_link {
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: 12px 16px;
	background-color: transparent;
	border: 1px solid var(--gold-line);
	border-radius: 6px;
	color: var(--text-primary);
	font: inherit;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s, border-color 0.15s;
}

.menu_link:hover, .menu_link:focus-visible {
	background-color: var(--gold-soft);
	border-color: var(--gold);
	outline: none;
}

.menu_link.primary {
	background-color: var(--gold-soft);
}

.menu_link .label {
	display: block;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 18px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gold-strong);
}

.menu_link .detail {
	display: block;
	font-size: 13px;
	color: var(--text-secondary);
}

/* A thinner one, its label alone (the main menu's Patreon, as the game's Login) */
.menu_link.thin {
	padding: 7px 16px;
}

/* Tinted the color of Capital, the game's green (Color.capital in public/render/assets.js): the main menu's Patreon
buttons. Its gold becomes Capital's, darker against a light page and lighter against a dark one */
.patreon {
	--gold: #45b799;
	--gold-strong: color-mix(in srgb, #45b799 70%, var(--text-primary));
	--gold-line: rgba(69, 183, 153, 0.6);
	--gold-soft: rgba(69, 183, 153, 0.12);
}

/* The Discord or Patreon button before there's a link (see the script in index.html) */
.menu_link.soon {
	border-style: dashed;
	cursor: default;
}

.menu_link.soon:hover {
	background-color: transparent;
	border-color: var(--gold-line);
}

.menu_link.soon .label {
	color: var(--muted);
}

/* A small button under the big ones (the menu's Credits, the credits' way back) */
.small_link {
	display: inline-block;
	margin-top: 20px;
	padding: 4px 14px;
	border: 1px solid var(--gold-line);
	border-radius: 999px;
	color: var(--text-secondary);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.small_link:hover, .small_link:focus-visible {
	background-color: var(--gold-soft);
	border-color: var(--gold);
	color: var(--gold-strong);
	outline: none;
}

/* A text box, as the game's login has */
.field {
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: 10px 12px;
	background-color: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: 6px;
	color: var(--text-primary);
	font: 16px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
	text-align: center;
	transition: border-color 0.15s;
}

.field::placeholder {
	color: var(--muted);
}

.field:hover, .field:focus {
	border-color: var(--gold);
	outline: none;
}


/*=== The main menu ============================================================
The menu's card in the middle of the first screen, with the way down to the about under it, and the about below */

@media (prefers-reduced-motion: no-preference) {
	html:has(.home) {
		scroll-behavior: smooth;
	}
}

.home {
	display: grid;
	gap: 24px;
	justify-items: center;
	width: 100%;
	max-width: 680px;
}

/* The first screen: the page's height less its padding, the card in the middle (between two rows of the same height)
and the way down at the bottom */
.home_hero {
	display: grid;
	grid-template-rows: 1fr auto 1fr;
	justify-items: center;
	row-gap: 16px;
	width: 100%;
	min-height: calc(100vh - 48px);
	min-height: calc(100svh - 48px);
}

.home_hero > .menu_card {
	grid-row: 2;
}

.home_hero > .scroll_cue {
	grid-row: 3;
	align-self: end;
}

/* "About" in a gold pill over a chevron pointing down, which bobs gently */
.scroll_cue {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	color: var(--gold-strong);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 16px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
}

.scroll_cue span {
	padding: 7px 22px;
	background-color: var(--gold-soft);
	border: 1px solid var(--gold-line);
	border-radius: 999px;
	transition: background-color 0.15s, border-color 0.15s;
}

.scroll_cue::after {
	content: "";
	width: 14px;
	height: 14px;
	border-right: 2px solid var(--gold);
	border-bottom: 2px solid var(--gold);
	transform: rotate(45deg);
}

@media (prefers-reduced-motion: no-preference) {
	.scroll_cue::after {
		animation: cue_bob 1.8s ease-in-out infinite;
	}
}

@keyframes cue_bob {
	0%, 100% { transform: translateY(-2px) rotate(45deg); }
	50% { transform: translateY(4px) rotate(45deg); }
}

.scroll_cue:hover span, .scroll_cue:focus-visible span {
	background-color: var(--gold-line);
	border-color: var(--gold);
}

.scroll_cue:focus-visible {
	outline: none;
}

.about {
	max-width: 680px;
	padding: 36px 40px;
	text-align: left;
	scroll-margin-top: 80px; /* Under the top bar */
}

.about .card_title {
	text-align: center;
}

.about .card_title + .rule {
	margin-top: 20px;
}

@media (max-width: 480px) {
	.about {
		padding: 28px 22px;
	}
}

.about p {
	margin: 0 0 12px;
	font-size: 16px;
	line-height: 1.65;
}

.about p:last-child {
	margin-bottom: 0;
}

.about b {
	font-weight: 600;
}

/* The opening: a prologue, in italics */
.about_intro p {
	font-family: Georgia, "Times New Roman", serif;
	font-size: 17px;
	font-style: italic;
	text-align: center;
}

.about section h2 {
	margin: 0 0 12px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 21px;
	font-weight: normal;
	letter-spacing: 0.02em;
	color: var(--gold-strong);
}

.about .rule {
	margin: 26px 0;
}

.about a {
	color: var(--gold-strong);
	text-decoration-color: var(--gold-line);
	text-underline-offset: 2px;
}

.about a:hover {
	text-decoration-color: var(--gold);
}

/* After the about: the Discord and the Patreon side by side */
.home_footer {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	width: 100%;
}

.home_footer .menu_link {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background-color: var(--surface-1);
	text-align: center;
}

.home_footer .menu_link:hover, .home_footer .menu_link:focus-visible {
	background-color: var(--gold-soft);
}

.home_footer .menu_link.soon:hover {
	background-color: var(--surface-1);
}

@media (max-width: 480px) {
	.home_footer .menu_link {
		padding: 12px 10px;
	}

	.home_footer .menu_link .label {
		font-size: 15px;
		letter-spacing: 0.06em;
	}
}


/*=== The credits ==============================================================
The credits page's lines, from credits.txt (see the script in credits/index.html): each section a gold title over its
headings and names, a heading in italics over the names under it */

.credits_card {
	max-width: 520px;
}

.credits_section + .credits_section {
	margin-top: 28px;
}

.credits_section h2 {
	margin: 0 0 8px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 15px;
	font-weight: normal;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gold-strong);
}

.credits_group {
	margin: 12px 0;
}

.credits_group:last-child {
	margin-bottom: 0;
}

.credits_group h3, .credits_group h4, .credits_group h5, .credits_group h6 {
	margin: 0 0 3px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 15px;
	font-style: italic;
	font-weight: normal;
	color: var(--text-secondary);
}

.credit_name {
	margin: 2px 0;
	color: var(--text-primary);
}

#credits a {
	color: var(--gold-strong);
	text-decoration-color: var(--gold-line);
	text-underline-offset: 2px;
}

#credits a:hover {
	text-decoration-color: var(--gold);
}


/*=== The account ==============================================================
The account page (see the script in account/index.html): who's logged in, then each part under a gold title as the
credits' sections are, and Log out; or how to log in */

.account_card {
	max-width: 520px;
}

.account_name {
	margin: 0 0 4px;
	overflow-wrap: anywhere;
}

.account_username {
	color: var(--muted);
}

.account_section {
	margin-top: 24px;
}

.account_section h2 {
	margin: 0 0 6px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 15px;
	font-weight: normal;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gold-strong);
}

.account_note {
	margin: 4px 0;
	color: var(--text-secondary);
}

.account_note.small {
	font-size: 13px;
	color: var(--muted);
}

.account_error {
	margin: 0 0 12px;
	color: var(--gold-strong);
	font-style: italic;
}

.account_error[hidden] {
	display: none;
}

/* The notifications switch: a gold-edged box, filled gold with a tick when on */
.account_toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 4px 0;
	cursor: pointer;
	text-align: left;
}

.account_toggle input {
	flex: none;
	appearance: none;
	width: 20px;
	height: 20px;
	margin: 0;
	border: 1px solid var(--gold-line);
	border-radius: 4px;
	background-color: var(--surface-2);
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: background-color 0.15s, border-color 0.15s;
}

.account_toggle input::after {
	content: "";
	width: 5px;
	height: 10px;
	margin-top: -2px;
	border: solid var(--surface-1);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	opacity: 0;
}

.account_toggle input:checked {
	background-color: var(--gold);
	border-color: var(--gold);
}

.account_toggle input:checked::after {
	opacity: 1;
}

.account_toggle input:hover, .account_toggle input:focus-visible {
	border-color: var(--gold);
	outline: none;
}

.account_toggle input:disabled {
	cursor: wait;
	opacity: 0.6;
}

/* The games: a table, scrolled sideways inside the card if it's too wide for the screen */
.account_games_scroller {
	overflow-x: auto;
}

.account_games {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	text-align: left;
}

.account_games th {
	padding: 4px 8px;
	border-bottom: 1px solid var(--gold-line);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 12px;
	font-weight: normal;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-secondary);
	white-space: nowrap;
}

.account_games td {
	padding: 6px 8px;
	border-bottom: 1px solid var(--border);
	white-space: nowrap;
}

/* A small link that's a button (Log out, the main menu's account button) */
button.small_link {
	margin: 0;
	background-color: transparent;
	cursor: pointer;
	line-height: inherit;
}

/* Small links side by side under the main menu: the account's button, then Credits */
.small_links {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 20px;
}

.small_links .small_link {
	margin-top: 0;
}

.small_link + .small_link {
	margin-left: 6px;
}