/* Page chrome for the IRC client and the separate arcade.  The site's theme
 * picker still supplies each visitor's palette; these rules refine layout
 * and controls without changing the forum or its account screens. */
body.chat-page, body.games-page {
	max-width: none;
	padding: 0;
	height: 100vh;
	height: 100dvh;
	display: flex;
	flex-direction: column;
	background: #0d1524;
	overflow: hidden;
}

body.chat-page .chat-top, body.games-page .chat-top {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.55rem 0.85rem;
	background: #152237;
	border-bottom: 1px solid #30435d;
	box-shadow: 0 3px 12px #0003;
}

.chat-top .home { white-space: nowrap; }
.community-nav {
	display: inline-flex;
	align-items: center;
	gap: 0.15rem;
	padding: 0.15rem;
	border: 1px solid #344962;
	border-radius: 0.7rem;
	background: #1d2d46;
}
.community-nav a {
	padding: 0.38rem 0.72rem;
	border-radius: 0.5rem;
	color: #c4d3e3;
	font-size: 0.88rem;
	font-weight: 700;
	text-decoration: none;
}
.community-nav a:hover, .community-nav a[aria-current="page"] {
	background: #31536a;
	color: #fff;
}
body.chat-page .chat-top .btn, body.games-page .chat-top .btn {
	margin: 0;
	padding: 0.38rem 0.68rem;
	border: 1px solid #425a76;
	border-radius: 0.55rem;
	background: #243752;
	color: #f0f6ff;
	font-size: 0.86rem;
	text-decoration: none;
}
body.chat-page .chat-top .btn:hover, body.games-page .chat-top .btn:hover { background: #345170; }
body.chat-page .chat-top .btn-help { background: #9e455b; border-color: #c26074; }
body.chat-page .chat-top .btn-help:hover { background: #ba5269; }
.community-nav a:focus-visible, .chat-top .btn:focus-visible { outline: 2px solid #84ebd2; outline-offset: 2px; }

body.chat-page #chat-frame { flex: 1 1 auto; min-height: 0; background: #101b2e; }
/* Wrap, never overflow: a header wider than a phone zooms the whole page out,
 * and the game with it. */
body.games-page .chat-top { flex-wrap: wrap; row-gap: 0.3rem; }
body.games-page .arcade { border-top: 1px solid #2b4960; }
body.games-page #open-games { display: none; }
body.games-page.arcade-open #chat-entry:not([hidden]) {
	display: block;
	position: fixed;
	z-index: 50;
	top: max(4rem, 12vh);
	left: 50%;
	transform: translateX(-50%);
	width: min(42rem, calc(100vw - 2rem));
	max-height: 76vh;
	overflow: auto;
	box-sizing: border-box;
	border: 2px solid #6fd8c4;
	border-radius: 0.8rem;
	box-shadow: 0 1rem 3rem #000b;
}
body.games-page #chat-frame { min-height: 0; }

@media (max-width: 700px) {
	/* The arcade was originally a chat overlay and hid the page header on
	   phones.  The standalone page needs its Chat and Games navigation. */
	body.games-page.arcade-open header.chat-top { display: flex; }
	body.chat-page .chat-top, body.games-page .chat-top { gap: 0.3rem; padding: 0.45rem; }
	.community-nav { order: 3; width: 100%; justify-content: space-around; }
	.community-nav a { flex: 1; text-align: center; }
	.chat-top .spacer { display: none; }
	.chat-top .home { flex: 1; }
	body.chat-page .chat-top .btn, body.games-page .chat-top .btn { padding: 0.32rem 0.5rem; font-size: 0.8rem; }
}

/* Phone header for the chat page: brand, sign-in, Summon help and a More
 * button on one row, the community tabs on a second swipeable row, and the
 * rest (profile, sharing, inbox, theme, bug report) behind More. Summon help
 * always stays in view. */
.chat-menu-toggle { display: none; }
@media (max-width: 700px) {
	body.chat-page .chat-top { flex-wrap: wrap; row-gap: 0.4rem; }
	body.chat-page .chat-top .home { order: 0; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
	body.chat-page .chat-top #chat-auth { order: 1; display: inline-flex; gap: 0.3rem; }
	body.chat-page .chat-top #summon { order: 2; }
	body.chat-page .chat-top .chat-menu-toggle { order: 3; display: inline-flex; }
	body.chat-page .chat-top #summon-status { order: 4; flex-basis: 100%; }
	body.chat-page .community-nav {
		order: 5;
		width: 100%;
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		scrollbar-width: none;
	}
	body.chat-page .community-nav::-webkit-scrollbar { display: none; }
	body.chat-page .community-nav a { flex: 1 0 auto; white-space: nowrap; }
	body.chat-page .chat-top:not(.menu-open) > :is(#chat-edit-profile, #share, #chat-inbox-link, .theme-picker, .chat-bug-report) { display: none; }
	body.chat-page .chat-top.menu-open > :is(#chat-edit-profile, #share, #chat-inbox-link, .theme-picker, .chat-bug-report, #share-status) { order: 6; }
	body.chat-page .chat-top .theme-picker { display: inline-flex; align-items: center; gap: 0.35rem; }
	body.chat-page .chat-top #share-status:empty { display: none; }
}
@media (max-width: 420px) {
	body.chat-page .chat-top .home-label { display: none; }
	body.chat-page .chat-top #summon { padding-inline: 0.5rem; }
}

/* Readable tabs on the dark header whatever link colour the theme uses
 * (the light themes' blue links were about 2:1 against this navy). */
body:is(.chat-page, .games-page) .chat-top .community-nav a { color: #d6e2ef; }
body:is(.chat-page, .games-page) .chat-top .community-nav a:hover,
body:is(.chat-page, .games-page) .chat-top .community-nav a[aria-current="page"] { color: #fff; background: #31536a; }
body:is(.chat-page, .games-page) .chat-top .home { color: #f0f6ff; }
/* A narrower theme menu keeps the desktop header on one row. */
body.chat-page .chat-top .theme-picker { display: inline-flex; align-items: center; gap: 0.35rem; }
body.chat-page .chat-top .theme-picker select#autismforge-theme-select { width: auto; min-width: 0; max-width: 9.5rem; }
body.chat-page .chat-top .theme-picker select#autismforge-season-select { width: auto; min-width: 0; max-width: 9.5rem; }
/* The menu says what it is (aria-label "Site theme"); the logo alone links
 * home on mid-width screens, so everything fits one row. */
body.chat-page .chat-top .theme-picker label { display: none; }
@media (min-width: 701px) and (max-width: 1450px) {
	body.chat-page .chat-top .home-label { display: none; }
}