/*=== Top Bar ==================================================================
The bar along the top of the site's pages: the game's name (to the main menu) and the pages' buttons, small. On the
main menu once its card is off the screen (see the script in index.html), on the game's page while the login menu is up
and then only when the cursor rests at the top (see play/index.html and topbar.js), and always on the learn-to-play page
(rules/index.html), the credits (credits/index.html) and the account page (account/index.html). Each page has its own
copy of the bar: change all five together. The last button is the site account's (see account.js).

The colors are the page's own (site.css or rules/guide.css), so the bar is light or dark as the page is. Slides down
into view, and out of reach while hidden */

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

.top_bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px max(16px, calc((100% - 680px) / 2));
	background-color: var(--surface-1);
	border-bottom: 1px solid var(--gold-line);
	box-shadow: 0 1px 8px var(--shadow);
	transform: translateY(-100%);
	opacity: 0;
	visibility: hidden;
	transition: transform 0.2s ease, opacity 0.2s ease, visibility 0s 0.2s;
}

.top_bar.shown {
	transform: none;
	opacity: 1;
	visibility: visible;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
	.top_bar, .top_bar.shown {
		transition: none;
	}
}

.top_bar_title {
	color: var(--text-primary);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 15px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

.top_bar_title:hover, .top_bar_title:focus-visible {
	color: var(--gold-strong);
	outline: none;
}

.top_bar_links {
	display: flex;
	gap: 8px;
}

.bar_link {
	padding: 5px 14px;
	border: 1px solid var(--gold-line);
	border-radius: 999px;
	color: var(--gold-strong);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s, border-color 0.15s;
}

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

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

/* With no link yet (see the script in index.html) */
.bar_link.soon {
	border-style: dashed;
	color: var(--muted);
	cursor: default;
}

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

/* A page of the site (site.css) with the bar always in view: its card starts below the bar */
.site_page.with_bar {
	padding-top: 72px;
}


/*=== The account's button =====================================================
The bar's button at the right edge (see account.js, and the main menu's small one beside Credits, in site.css): "Log in",
or the name of who's logged in. A click opens a box under it: how to log in, or the account's page and Log out */

.account_slot {
	position: relative;
	display: flex;
}

button.bar_link {
	margin: 0;
	background-color: transparent;
	cursor: pointer;
	line-height: inherit;
}

/* A name as it's written, cut short when it's long */
.account_button.named {
	max-width: 160px;
	overflow: hidden;
	text-overflow: ellipsis;
	text-transform: none;
	letter-spacing: 0.02em;
}

.account_button[aria-expanded="true"] {
	background-color: var(--gold-soft);
	border-color: var(--gold);
}

.account_box {
	position: absolute;
	z-index: 20;
	top: calc(100% + 10px);
	right: 0;
	width: 240px;
	padding: 14px 16px;
	background-color: var(--surface-1);
	border: 1px solid var(--gold-line);
	border-radius: 8px;
	box-shadow: 0 4px 16px var(--shadow);
	color: var(--text-primary);
	font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
	text-align: center;
}

.account_box[hidden] {
	display: none;
}

/* The main menu's small one: its box in the middle under it */
.account_slot.small .account_box {
	top: calc(100% + 8px);
	left: 50%;
	right: auto;
	transform: translateX(-50%);
}

.account_box_text {
	margin: 0 0 10px;
	overflow-wrap: anywhere;
}

.account_box_button {
	display: inline-block;
	margin: 0 3px;
	padding: 4px 14px;
	background-color: transparent;
	border: 1px solid var(--gold-line);
	border-radius: 999px;
	color: var(--gold-strong);
	font-family: Georgia, "Times New Roman", serif;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s, border-color 0.15s;
}

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


/* The bar's account button sits at the right edge of the window, whatever the width of the bar's column. Wide: out of
the links, with room kept for it (a long name is cut at 160px) so the column never runs under it. Narrower: the last of
the links, the column reaching the window's edges; narrower still, without the title, so the buttons fit one row */
@media (min-width: 960px) {
	.top_bar {
		padding-right: max(192px, calc((100% - 680px) / 2));
	}

	.top_bar .account_slot {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 16px;
		align-items: center;
	}
}

@media (max-width: 959px) {
	.top_bar {
		padding-left: 16px;
		padding-right: 16px;
	}
}

@media (max-width: 859px) {
	.top_bar {
		justify-content: flex-end;
	}

	.top_bar_title {
		display: none;
	}
}

/* On a phone: only the buttons, in the middle, smaller to fit the account's too */
@media (max-width: 640px) {
	.top_bar {
		justify-content: center;
		padding-left: 8px;
		padding-right: 8px;
	}

	.top_bar_title {
		display: none;
	}

	.top_bar_links {
		gap: 4px;
	}

	.bar_link {
		padding: 5px 8px;
		font-size: 12px;
		letter-spacing: 0.04em;
	}

	.account_button.named {
		max-width: 72px;
	}
}

/* Tinted the color of Capital, as the main menu's Patreon buttons are (see .patreon in site.css): here too for the
learn-to-play page, which doesn't load site.css */
.top_bar .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);
}