/*
	Biffin Boy's Discord side panel (game pages only).
	The markup is injected by assets/js/discord-panel.js, and only when the server widget is enabled.

	Breakpoint: the page column (.container) is 64em = ~1110px wide above 1680px.
	The panel is 340px wide + 16px from the window edge + at least ~24px gap to the column,
	so it needs (1880 - 1110) / 2 = 385px of margin: min-width 1880px. Keep this value in sync
	with SHOW_QUERY in discord-panel.js.
*/

#discord-panel {
	display: none;
}

@media screen and (min-width: 1880px) {

	#discord-panel {
		display: block;
		position: fixed;
		top: 72px;               /* below the fixed nav (56px) */
		right: 16px;
		z-index: 900;            /* under the nav (1000) and its dropdown menus */
		width: 340px;
		box-sizing: border-box;
		padding: 12px;
		border-radius: 8px;
		background: rgba(255, 255, 255, 0.95);
		border: solid 1px #e7eae8;
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
		text-align: left;
		line-height: 1.4;
	}

	#discord-panel .discord-panel-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 0 10px 0;
	}

	#discord-panel h2 {
		margin: 0;
		font-family: "Open Sans Condensed", sans-serif;
		font-weight: 700;
		text-transform: uppercase;
		font-size: 1.1em;
		color: #6b7770;
	}

	#discord-panel .discord-panel-join {
		font-size: 0.85em;
		font-weight: 700;
		color: #43a032;
		text-decoration: none;
	}

	#discord-panel .discord-panel-join:hover {
		text-decoration: underline;
	}

	#discord-panel iframe {
		display: block;
		width: 100%;
		height: 500px;
		max-height: calc(100vh - 150px);
		border: 0;
		border-radius: 6px;
	}

	/* Dark theme */
	html[data-theme="dark"] #discord-panel {
		background: rgba(31, 34, 36, 0.95);
		border-color: #33383b;
		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
	}

	html[data-theme="dark"] #discord-panel h2 {
		color: #d6d9d7;
	}

	html[data-theme="dark"] #discord-panel .discord-panel-join {
		color: #7fcf72;
	}

}