/* 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; }
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; }
}