/*
	CSG Dark - templates_funky.css

	Everything in this file exists because of the template set. CSG Dark's
	templates are FunkyOne's, so the board renders markup that MyBB core does
	not: the #cssmenu nav, the .trowm welcome bar, the two-column #one / #two
	split, the Go Social block, Latest activity, and the footer grid.

	FunkyOne styled all of that in nav.css, extra.css and dropdowns.css, which
	belong to that theme and are not ours to touch. This is CSG Dark's own
	answer to the same markup, in the same language as global.css.

	The column geometry itself (#one 78% float, #two overflow hidden) is
	declared inline in the templates, so it is deliberately left alone here -
	only the surfaces are restated.
*/

/* --------------------------------------------------------- header bar --- */
.logo1 {
	border-bottom: 1px solid var(--edge);
	background: linear-gradient(180deg, rgba(11,7,8,.82), rgba(5,3,4,.72));
	margin-bottom: 0;
	/* Air above the mark, matching #logo > .wrapper in global.css. */
	padding-top: 0.625rem;
}
.logo1 .erb-image-wrapper.logo img,
.logo1 img.img25 {
	/* The old theme capped this at a flat 550px. Same size at a 16px root,
	   but in rem so it grows with everything else on a wide panel. */
	max-width: 25.75rem;
	width: 100%;
	height: auto;
	display: block;
}

/* Quick search. The submit button's value is a Font Awesome glyph, so it is
   the one control on the board that must not use the monospace stack. */
.quicksearch form { display: flex; gap: 0; align-items: stretch; justify-content: flex-end; }
input.searchbox {
	font-family: var(--mono);
	font-size: 0.75rem;
	color: var(--bright);
	background: var(--sunken);
	border: 1px solid var(--edge2);
	border-right: 0;
	padding: 0.4375rem 0.5625rem;
	min-width: 0;
	flex: 0 1 16rem;
}
input.searchbutton {
	font-family: "Font Awesome 6 Pro", "FontAwesome", var(--mono);
	font-size: 0.75rem;
	color: var(--muted);
	background: var(--panel2);
	border: 1px solid var(--edge2);
	padding: 0.4375rem 0.75rem;
	cursor: pointer;
}
input.searchbutton:hover { color: var(--bright); border-color: var(--red); }

/* ------------------------------------------------------ welcome strip --- */
/*
	The template carries an inline rule painting this white-ish. Matched on
	specificity here so the strip sits in the palette instead.
*/
/*
	The welcome strip is a 5-cell table: avatar, name+dropdown, an EMPTY spacer
	cell, the Messages dropdown, and the unread count at width="2%". Laid out
	as a table those last three collapse to their content and the align="right"
	on each one pushes them apart, which is what left Messages stranded in the
	middle with a gap before the 0.

	Rebuilt as a flex row: avatar and name on the left, everything else pinned
	right and sitting together. The empty spacer is dropped rather than fought.
*/
table.trowm, table.trowm > tbody { display: block; width: 100%; }
table.trowm > tbody > tr {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
}
table.trowm > tbody > tr > td {
	display: block;
	width: auto !important;
	padding: 0.4375rem 0;
	border: 0;
	text-align: left;
}
/* The name cell takes the slack, so the right-hand group stays together. */
table.trowm > tbody > tr > td:nth-child(2) { flex: 1 1 auto; min-width: 0; }
/*
	The guest version of this strip is a single cell that floats its own
	buttons right. Shrink-wrapped by flex it had nothing to float against, so
	the buttons collapsed in beside the greeting - it has to take the full row.
*/
table.trowm > tbody > tr > td:only-child { flex: 1 1 auto; min-width: 0; }
table.trowm .float_right { float: right; }
table.trowm .float_left { float: left; }
table.trowm > tbody > tr > td:only-child:after { content: ''; display: block; clear: both; }
/* The spacer cell the template leaves empty. */
table.trowm > tbody > tr > td:empty { display: none; }

table.trowm, table.trowm td {
	background: var(--panel2);
	background-image: none;
	border: 0;
	font-size: 0.75rem;
	color: var(--muted);
	box-shadow: none;
}
/* The 3px red rule every .thead carries, so the Welcome Back strip is marked
   as a section bar like the ones under it. */
table.trowm {
	border-bottom: 1px solid var(--edge);
	border-left: 3px solid var(--red);
	padding: 0 0.125rem 0 0;
}
table.trowm > tbody > tr { padding-left: 0.75rem; }

/* Avatar chip. */
.header_avatar img.miniav, img.miniav {
	display: block;
	width: 1.5rem !important;
	height: 1.5rem !important;
	object-fit: cover;
	border: 1px solid var(--edge2);
}

/* The two dropdown triggers in this strip. */
table.trowm a.white, table.trowm a.white:link, table.trowm a.white:visited {
	color: var(--text);
	font-size: 0.6875rem;
	letter-spacing: 0.0625rem;
	text-transform: uppercase;
	white-space: nowrap;
}
table.trowm a.white:hover, table.trowm .open > a.white { color: var(--bright); }
table.trowm .dropdown { vertical-align: middle; }

/* The unread counter reads as a count, not as a stray digit. */
#pm_notification, a#pm_notification {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.375rem;
	height: 1.375rem;
	padding: 0 0.375rem;
	font-size: 0.6875rem;
	line-height: 1;
	color: var(--muted);
	border: 1px solid var(--edge);
	background: var(--panel);
	white-space: nowrap;
}
#pm_notification:hover { color: var(--bright); border-color: var(--red); }
table.trowm a.register,
table.trowm a.login,
table.trowm a.trowum {
	font-size: 0.6875rem;
	letter-spacing: 0.0625rem;
	text-transform: uppercase;
	color: var(--text);
}
table.trowm a:hover { color: var(--bright); }
table.trowm strong { font-weight: normal; }

/*
	.us was declared in a <style> block inside header_welcomeblock_guest, which
	that template no longer carries; three other templates still use the class,
	so its one meaningful rule moves here.
*/
.us { overflow: hidden; margin: auto; }

/*
	.trowmo is on the login popup itself and on two rows inside it. The panel
	is drawn by the .modal rules in global.css now, so this only has to stop
	the class from painting a second box around the rows it also sits on -
	FunkyOne's own copy of these rules made them white.
*/
.trowmo {
	background: transparent;
	background-image: none;
	border: 0;
	box-shadow: none;
	color: inherit;
	text-shadow: none;
}

/* ------------------------------------------------------------- #cssmenu -- */
/*
	The nav rail, same treatment the stats topbar uses: joined bordered cells,
	uppercase, and the active one carrying the red inset underline. Cells
	overlap by 1px so a wrap never leaves an item open-ended.
*/
#cssmenu {
	position: relative;
	height: auto;
	background: transparent;
	border: 0;
	margin-bottom: 1.625rem;
}
#cssmenu > ul {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
	background: transparent;
	box-shadow: none;
	border-radius: 0;
}
/*
	The rail fills the header rather than ending wherever the last label
	happens to fall. Items share the leftover space, so the strip reads as one
	bar across the page.
*/
#cssmenu > ul > li { position: relative; display: block; float: none; flex: 1 1 auto; }
/*
	The first cell is the portal link. It carries an rss glyph and no label,
	so it reads as a dead button sitting in front of Home. Hidden rather than
	deleted from the template - drop this rule and it comes straight back.
*/
#cssmenu > ul > li:first-child { display: none; }
#cssmenu > ul > li > a { text-align: center; }
#cssmenu > ul > li > a {
	display: block;
	font-family: var(--mono);
	font-size: 0.6875rem;
	font-weight: normal;
	letter-spacing: 0.0938rem;
	text-transform: uppercase;
	color: var(--muted);
	background: var(--panel);
	border: 1px solid var(--edge);
	margin-right: -1px;
	margin-bottom: -1px;
	padding: 0.5625rem 0.875rem;
	white-space: nowrap;
	text-shadow: none;
	border-radius: 0;
	line-height: 1.3;
}
#cssmenu > ul > li > a:hover,
#cssmenu > ul > li:hover > a {
	color: var(--bright);
	background: var(--panel2);
}
#cssmenu > ul > li.active > a,
#cssmenu > ul > li > a.active {
	color: var(--bright);
	background: var(--panel2);
	box-shadow: inset 0 -2px 0 var(--red-b);
}
/* The templates set these per-item in a style attribute; normalised so the
   icons scale with the root instead of staying at a fixed 16px. */
#cssmenu i[class*="fa"] {
	font-size: 0.8125rem !important;
	width: 1.125rem;
	margin-right: 0.25rem;
	vertical-align: -1px;
	color: inherit !important;
}

/* Submenus, if a nav item has one. */
#cssmenu ul ul {
	position: absolute;
	left: 0;
	top: 100%;
	display: none;
	min-width: 12rem;
	background: #16100f;
	border: 1px solid var(--edge2);
	z-index: 40;
	list-style: none;
	margin: 0;
	padding: 0;
}
#cssmenu li:hover > ul { display: block; }
#cssmenu ul ul li { display: block; }
#cssmenu ul ul a {
	display: block;
	padding: 0.4375rem 0.75rem;
	font-size: 0.6875rem;
	letter-spacing: 0.0625rem;
	color: var(--text);
	border-bottom: 1px solid var(--edge);
	white-space: nowrap;
}
#cssmenu ul ul li:last-child a { border-bottom: 0; }
#cssmenu ul ul a:hover { background: rgba(216,31,47,.14); color: var(--bright); }

/*
	The template's phone-only shop link, kept off at every width. CSG Dark
	stacks #cssmenu on phones rather than collapsing it, so the nav's own
	SHOP item is always visible and this one was a second copy of it.
*/
.mobileShow { display: none; }

/* --------------------------------------------------- columns & panels --- */
/*
	#one / #two carry their widths inline from the template. Only the gutter
	between the two columns is set here, and the panels inside them inherit
	everything else from global.css.
*/
.container { width: auto; max-width: none; padding: 0; }
/*
	This wraps the chat card, and overflow:hidden clipped the smilie panel the
	moment it opened above the compose row - which is what put the top row of
	smilies behind the card's title bar. flow-root still contains the floated
	columns, it just does not cut anything off.
*/
.posts2 { display: flow-root; overflow: visible; }
#two > table, #two > br + table { margin-bottom: 0; }

/* A second thead variant the sidebar templates use. */
.theadm {
	background: linear-gradient(180deg, rgba(38,26,26,.92), rgba(28,20,19,.86));
	border-bottom: 1px solid var(--edge);
	border-left: 3px solid var(--red);
	color: var(--bright);
	font-size: 0.75rem;
	font-weight: normal !important;
	letter-spacing: 0.125rem;
	text-transform: uppercase;
	padding: 0.625rem 0.875rem;
	text-shadow: none;
	box-shadow: none;
	border-radius: 0;
}
.theadm a:link, .theadm a:visited { color: var(--bright); font-weight: normal !important; text-shadow: none; }
.theadm a:hover { color: var(--red-b); }

/*
	Panel titles are metadata-styled, so their icons should not shout.

	fa-fw is dropped here. It pads every glyph out to a fixed 1.25em box so a
	stacked menu lines up, and there is nothing to line up with in a one-line
	title - it just parked the icon at the far left with the title stranded
	across the bar.

	The rest of the gap was an &nbsp; the markup printed after the icon, which
	.thead's letter-spacing stretched further. That is a markup problem and it
	is fixed in the markup: index, showthread and serversboard now print one
	ordinary space. This only trims what is left, and it is deliberately a
	small number - a pull big enough to swallow an nbsp would make the title
	sit on top of the icon in the templates that never had one.
*/
.thead i[class*="fa"], .theadm i[class*="fa"] {
	font-size: 0.8125rem !important;
	color: var(--muted) !important;
	width: auto !important;
	margin-right: -0.125rem;
}

/*
	Category icons.

	MyBB has no icon field on a forum - there is nothing in the Admin CP to
	set one, and no column in the forums table to hold it. What the markup
	does give us is the collapse image, which carries id="cat_<fid>_img", so
	the category is identifiable from CSS and the icon can be drawn on the
	title.

	One rule per category, keyed by fid. To add a category, take its fid from
	its own URL (forumdisplay.php?fid=N) and copy a line. An fid with no rule
	simply gets no icon; nothing else about the header changes.
*/
.thead:has(#cat_11_img) .largetext:before { content: "\f06a"; }  /* Important */
.thead:has(#cat_32_img) .largetext:before { content: "\f024"; }  /* Reports   */
.thead:has(#cat_6_img)  .largetext:before { content: "\f0c0"; }  /* Community */
.thead:has(#cat_38_img) .largetext:before { content: "\f141"; }  /* Other     */

.thead .largetext:before {
	font-family: "Font Awesome 6 Pro";
	font-weight: 900;
	font-size: 0.8125rem;
	letter-spacing: 0;
	color: var(--muted);
	margin-right: 0.5rem;
	vertical-align: 0.0625rem;
}

/*
	The forum rows on the index put the status dot in its own narrow cell and
	the forum name in the next one. Both cells carry the standard 0.75rem side
	padding, so the two sat 1.5rem apart - the dot read as belonging to the
	card's edge rather than to the line it marks. The pair is closed up to a
	single 0.5rem gap; nothing else about the row changes.
*/
table.tborder2 > tbody > tr > td:first-child:has(> .forum_status) {
	padding-right: 0;
}
table.tborder2 > tbody > tr > td:first-child:has(> .forum_status) + td {
	padding-left: 0.5rem;
}

/* Subforum lists inside a category row. */
ul.alt_forumlar { list-style: none; margin: 0.25rem 0 0; padding: 0; }
ul.alt_forumlar li { display: inline-block; margin: 0 0.625rem 0.1875rem 0; font-size: 0.6875rem; }
ul.alt_forumlar a { color: var(--text); }
ul.alt_forumlar a:hover { color: var(--bright); }

/* Servers board wrappers. The desktop copy and the phone copy are swapped by
   a media query in the old mediaqueries sheet; both are just containers. */
.hidesb, .showsb { margin-bottom: 0.875rem; }
.showsb { display: none; }

/* ------------------------------------------------------- latest activity - */
/*
	Loaded over ajax from portal.php, so the markup arrives after paint and
	has to be styled blind. It is a list of thread links.
*/
/*
	This block is filled over ajax with `.load(portal.php .latestthreads_portal)`,
	and those are <tr> elements being dropped into a <div>. Outside a table each
	row builds its own anonymous table and shrinks to its content, which is why
	every entry stopped short and left the right of the card empty. Forcing
	them to blocks puts them back on the full width.
*/
.latestthreads { width: 100%; font-size: 0.75rem; }
.latestthreads tr, .latestthreads .latestthreads_portal,
.latestthreads tbody, .latestthreads table { display: block; width: 100%; }
.latestthreads td {
	display: block;
	width: 100%;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--edge);
}
.latestthreads tr:last-child td { border-bottom: 0; }
.latestthreads strong { font-weight: normal; }
.latestthreads strong a { color: var(--bright); }
.latestthreads strong a:hover { color: var(--red-b); }
.latestthreads ul, .latestthreads_portal ul { list-style: none; margin: 0; padding: 0; }
.latestthreads li, .latestthreads_portal li {
	padding: 0.4375rem 0;
	border-bottom: 1px solid var(--edge);
}
.latestthreads li:last-child, .latestthreads_portal li:last-child { border-bottom: 0; }
.latestthreads a { color: var(--text); }
.latestthreads a:hover { color: var(--bright); }
.latestthreads .smalltext { color: var(--muted); }

/* ---------------------------------------------------------- board stats -- */
.boardstats_stat, .boardstats_text { font-size: 0.75rem; }
.boardstats_text { color: var(--muted); }
.boardstats_stat { color: var(--bright); }
.textb.largetext, .textb {
	color: var(--bright);
	font-weight: normal;
	font-size: 1rem;
}

/* ------------------------------------------------------------ go social -- */
/*
	A row of equal square tiles rather than loose icons on a line. The glyph is
	centred in the tile instead of sitting on a text baseline, which is what
	made them look scattered before.

	Brand colour on hover only. This is the one place colour may identify
	rather than mean something, because the colour IS how you recognise the
	network - but it stays out of the way until you reach for it.
*/
/*
	The row is a flex container (.space_auto), so the tiles take an equal share
	of it and stretch to the card's full width. They used to be inline-blocks
	sized to their glyph, which is what left the dead strip down the right.
*/
.space_auto > a.fb, .space_auto > a.yt, .space_auto > a.insta,
.space_auto > a.env, .space_auto > a.rss {
	flex: 1 1 0;
	min-width: 0;
}
/*
	No box. The marks sit straight on the card the way they did before the
	tiles were drawn round them - the row already reads as a group because it
	is evenly spaced and alone in its cell, and five bordered squares in a
	20rem column were five more borders than the card needed.

	The cell they sit in is what gives them their height, so only the glyph is
	sized here.
*/
#two a.fb, #two a.yt, #two a.insta, #two a.env, #two a.rss,
a.fb, a.yt, a.insta, a.env, a.rss {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.25rem 0;
	margin: 0;
	color: var(--text);
	border: 0;
	background: none;
	vertical-align: top;
	line-height: 1;
	transition: color .12s linear;
}
/* The templates set a flat 30px in a style attribute; overridden so the marks
   scale with the root and stay the same size as each other across the row. */
a.fb i, a.yt i, a.insta i, a.env i, a.rss i {
	font-size: 1.625rem !important;
	line-height: 1 !important;
	width: auto !important;
	margin: 0 !important;
	color: inherit !important;
	display: block;
}
/* Hover moves the mark and nothing else: it goes light red, in place. */
a.fb:hover, a.yt:hover, a.insta:hover, a.env:hover, a.rss:hover {
	color: var(--red-b);
	background: none;
	border: 0;
	box-shadow: none;
}

/*
	The middle mark is the GameTracker clan link, and the template puts a
	generic fa-users-rectangle on it. Swapped for GameTracker's own icon,
	images/funky/gametracker.png - their 64x64 icon with its solid black
	square keyed out to alpha, so only the mark itself is left and the card
	shows through behind it.

	It is the one mark in the row that is not white, because it is a logo and
	a recoloured logo is not that logo. Hover brightens it rather than turning
	it red for the same reason; it still answers the pointer, in the only way
	this mark can.
*/
a[title*="Tracker" i] i { display: none !important; }
a[title*="Tracker" i]:before {
	content: '';
	display: block;
	width: 1.625rem;
	height: 1.625rem;
	background: url(../../../images/funky/gametracker.png) no-repeat center center;
	background-size: contain;
	transition: filter .12s linear;
}
a[title*="Tracker" i]:hover:before { filter: brightness(1.25); }

/*
	.fb is used for two unrelated things in these templates: the Facebook link
	in Go Social, and the collapse handle on every forum category card. The
	tile rules above are all scoped to a.fb so they never reach the handle -
	an earlier blanket .fb.expcolimage reset stripped the box off the category
	toggles and made them vanish.
*/

/* ---------------------------------------------------------------- footer - */
.section.group { display: flex; flex-wrap: wrap; gap: 1.125rem; }
.col { position: static; float: none; padding: 0; }
.col.span_1_of_3 { flex: 1 1 13.75rem; width: auto; }

.menu_simple { list-style: none; margin: 0; padding: 0; }
.menu_simple li { margin-bottom: 0.3125rem; }
.menu_simple a {
	font-size: 0.6875rem;
	letter-spacing: 0.0625rem;
	color: var(--text);
	/*
		The Contact column holds support@cs-gamers.net, and a browser is
		allowed to break a line after a hyphen - which split the address over
		two lines as "cs-" / "gamers.net". Held on one line; the column is a
		flex item with min-width auto, so it widens to fit instead of
		overflowing. Released again on a phone, where there is no width to
		widen into.
	*/
	white-space: nowrap;
}
@media (max-width: 700px) { .menu_simple a { white-space: normal; } }
.menu_simple a:hover { color: var(--bright); }
.menu_simple i[class*="fa"] {
	font-size: 0.75rem !important;
	width: 1.125rem;
	color: var(--muted) !important;
}

#footerstuff {
	background: var(--panel2);
	background-image: none;
	border: 1px solid var(--edge);
	box-shadow: none;
	border-radius: 0;
	color: var(--text);
	font-family: var(--mono);
	font-size: 0.6875rem;
	font-weight: normal !important;
	padding: 0.625rem 0.875rem;
}

/* ------------------------------------------------------- back to top ----- */
.topforum {
	position: fixed;
	bottom: 1.25rem;
	right: 1.25rem;
	z-index: 50;
	display: none;
	cursor: pointer;
	padding: 0.625rem 0.75rem;
	background: var(--panel2);
	border: 1px solid var(--edge2);
	color: var(--muted);
	font-size: 0.875rem;
	opacity: 1;
	transition: none;
}
.topforum:hover { color: var(--bright); border-color: var(--red); }

/* -------------------------------------------------------------- animation */
/*
	animate.css and wow.js are gone with the CDN calls. Their classes are
	still on elements in the templates, so they are neutralised here: without
	this, anything left carrying a fadeIn class could sit at opacity 0.
*/
.wow, .fadeInUp, .fadeInDown, .fadeInLeft, .fadeInRight, .fadeIn, .animated {
	visibility: visible !important;
	opacity: 1 !important;
	animation: none !important;
	-webkit-animation: none !important;
}

/* ========================================================== DROPDOWNS ==== */
/*
	The user panel in the header, the thread tools cog and the share menu are
	Bootstrap 3 dropdowns. bootstrap.min.js is still loaded and still toggles
	the .open class - what was missing is the CSS that hides the menu in the
	first place, which lived in the old theme's dropdowns.css.

	Without the display:none below, every dropdown prints its entire contents
	down the page as plain text. That is the whole bug.
*/
.dropdown, .dropup { position: relative; display: inline-block; }

.dropdown-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	float: left;
	min-width: 12.5rem;
	margin: 0.25rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.75rem;
	text-align: left;
	background: #1f1615;
	border: 1px solid var(--edge2);
	border-radius: 0;
	box-shadow: none;
	background-clip: padding-box;
}
/* Bootstrap puts .open on the parent when the trigger is clicked. */
.open > .dropdown-menu { display: block; }
.dropdown-menu.pull-right, .dropdown-menu-right { right: 0; left: auto; }
.dropdown-menu-left { left: 0; right: auto; }

.dropdown-menu > li { display: block; }
.dropdown-menu > li > a {
	display: block;
	padding: 0.5rem 0.875rem;
	clear: both;
	font-weight: normal;
	line-height: 1.4;
	color: var(--text);
	white-space: nowrap;
	border-bottom: 1px solid var(--edge);
}
.dropdown-menu > li:last-child > a { border-bottom: 0; }
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.dropdown-menu > .active > a {
	background: rgba(255,61,68,.16);
	color: var(--bright);
	text-decoration: none;
}
.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
	color: var(--muted);
	background: none;
	cursor: not-allowed;
}
.dropdown-menu .divider, .dropdown-menu > li.divider {
	height: 1px;
	margin: 0;
	overflow: hidden;
	background: var(--edge2);
	border: 0;
	padding: 0;
}
/* Menu item icons: the templates colour these per-brand inline. Left alone
   for the share links, normalised in size so rows line up. */
.dropdown-menu i[class*="fa"] {
	font-size: 0.8125rem !important;
	width: 1.125rem;
	text-align: center;
	margin-right: 0.25rem;
}

/*
	The old sheet drew a little arrow on .bullet menus with :before/:after.
	Dropped - it is decoration, and this theme has no rounded or floating
	chrome anywhere else.
*/
.dropdown-menu.bullet:before, .dropdown-menu.bullet:after,
.dropdown-menu:before, .dropdown-menu:after { display: none; }

.dropdown-submenu { position: relative; }
.dropdown-submenu > .dropdown-menu { top: 0; left: 100%; margin: 0; }
.dropdown-submenu:hover > .dropdown-menu { display: block; }

/* A dropdown trigger styled as a button keeps the board's button look. */
.dropdown > a.button, .dropdown > a.button:link, .dropdown > a.button:visited { color: var(--text); }
.open > a.button, .dropdown > a.button:hover { color: var(--bright); border-color: var(--red); }

/* Counters the templates hang off the messages/alerts items. */
.dropdown .badge, .dropdown-menu .badge {
	background: var(--red);
	color: var(--bright);
	border: 0;
	font-size: 0.625rem;
	padding: 0.0625rem 0.3125rem;
	margin-left: 0.375rem;
}

/* ===================================================== COLLAPSE TOGGLES == */
/*
	Cards carry one of two collapse handles: MyBB's images/collapse.png and
	FunkyOne's images/funky/collapse.png. They are different pictures, which
	is why the buttons did not match each other.

	Both are replaced with one chevron drawn in CSS. The <img> is kept in the
	layout as a transparent hit area rather than hidden, because it is the
	element the collapse script listens on - display:none would kill the
	click. State is read straight off the src, which every one of those
	scripts swaps between collapse.png and collapse_collapsed.png, so the
	chevron flips even where the picture never did.
*/
.expcolimage {
	position: relative;
	float: right;
	width: 1.625rem;
	height: 1.625rem;
	border: 1px solid var(--edge2);
	background: var(--panel2);
	cursor: pointer;
	margin: 0;
	overflow: hidden;
}
.expcolimage:hover { border-color: var(--red); background: var(--panel2); }

.expcolimage img.expander,
.expcolimage input.expander {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
	margin: 0;
	padding: 0;
	border: 0;
	z-index: 2;
}

/*
	The mark itself is a minus that becomes a plus, which is exactly what the
	markup already claims: MyBB writes alt="[-]" on the open state and swaps
	it for [+] when collapsed. Two hairlines read cleanly at this size and
	carry no ambiguity about which way the card is about to go.
*/
.expcolimage:before,
.expcolimage:after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	background: var(--muted);
	pointer-events: none;
	z-index: 1;
	transition: background .12s linear, transform .12s ease;
}
/* The bar of the minus, always present. */
.expcolimage:before {
	width: 0.625rem;
	height: 2px;
	margin: -1px 0 0 -0.3125rem;
}
/* The upright of the plus, only drawn once the card is collapsed. */
.expcolimage:after {
	width: 2px;
	height: 0.625rem;
	margin: -0.3125rem 0 0 -1px;
	transform: scaleY(0);
}
.expcolimage:hover:before,
.expcolimage:hover:after { background: var(--bright); }

.expcolimage:has(.expander[src*="collapse_collapsed"]):after { transform: scaleY(1); }
.expcolimage:has(.expander[src*="collapse_collapsed"]):before,
.expcolimage:has(.expander[src*="collapse_collapsed"]):after { background: var(--red-b); }

/* ==================================================== SHOUTBOX PANEL ===== */
/*
	The compose row: smilie trigger, input, archive link.

	The smilie picker is a popup whose only open mechanism was an inline
	onclick="myFunction()" - and myFunction is defined nowhere on this board,
	so the click has always thrown and the panel never got its .show class.
	The old theme hid the list with visibility:hidden regardless, so the bug
	was invisible; without that rule every smilie printed on one line.

	So it opens on hover and on keyboard focus, in CSS, with no script needed.
	The .show class is still honoured in case that function turns up later.
*/
#shoutbox .panel {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.5rem;
	flex-wrap: nowrap;
}
#shoutbox .panel form { flex: 1 1 auto; min-width: 0; margin: 0; }
#shoutbox .panel input.text, #dvz_input {
	width: 100%;
	font-family: var(--mono);
	font-size: 0.75rem;
	color: var(--bright);
	background: var(--sunken);
	border: 1px solid var(--edge2);
	padding: 0.5rem 0.625rem;
}
#shoutbox .panel input.text:focus, #dvz_input:focus { outline: 1px solid var(--red); }
#shoutbox .panel > a {
	flex: 0 0 auto;
	font-size: 0.625rem;
	letter-spacing: 0.0625rem;
	text-transform: uppercase;
	color: var(--muted);
	white-space: nowrap;
}
#shoutbox .panel > a:hover { color: var(--bright); }

/*
	The three panels that stand in for the compose row: guests, blocked users
	and accounts under the minimum post count. All are one bar the same height
	as the input they replace, so the card keeps its shape whoever is looking
	at it, and all say why the box is missing rather than leaving a gap.

	The border is dashed - the theme's one signal for "something belongs here
	and is not available to you", as against the solid edge of a live control.
*/
#shoutbox .panel.guest,
#shoutbox .panel.blocked,
#shoutbox .panel.minposts {
	display: block;
	padding: 0.5rem 0.625rem;
	border: 1px dashed var(--edge2);
	background: var(--sunken);
	text-align: center;
}
#shoutbox .panel.guest p,
#shoutbox .panel.blocked p,
#shoutbox .panel.minposts p {
	margin: 0;
	font-size: 0.75rem;
	color: var(--muted);
	line-height: 1.5;
}
#shoutbox .panel.guest a:link, #shoutbox .panel.guest a:visited {
	color: var(--red-b);
	text-transform: none;
	letter-spacing: 0;
	font-size: inherit;
}
#shoutbox .panel.guest a:hover, #shoutbox .panel.guest a:active { color: var(--bright); }
/* Blocked is a sanction, not a hint: it carries the warning colour. */
#shoutbox .panel.blocked { border-color: var(--red); }
#shoutbox .panel.blocked p { color: var(--red-b); }

/* The trigger: the wink smilie you click. */
.popupsmilesbyanonshare {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 2.125rem;
	height: 2.125rem;
	cursor: pointer;
	border: 1px solid var(--edge2);
	background: var(--panel2);
}
.popupsmilesbyanonshare:hover { border-color: var(--red); }
.popupsmilesbyanonshare > img { width: 1.125rem; height: 1.125rem; display: block; }

/* The panel itself. Opens upward so it never pushes the chat around. */
.popupsmilesbyanonshare .popuptextbyanon {
	visibility: hidden;
	opacity: 0;
	position: absolute;
	bottom: calc(100% + 0.375rem);
	left: 0;
	right: auto;
	z-index: 200;
	width: 16.5rem;
	max-width: 80vw;
	margin: 0;
	padding: 0.5rem;
	background: #291f1f;
	border: 1px solid var(--edge2);
	border-radius: 0;
	color: var(--text);
	text-align: left;
	transition: opacity .1s linear;
}
/*
	Click to open, not hover. Hovering opened it but you could not reach the
	panel without leaving the trigger, so it shut on the way - the toggle now
	lives in headerinclude and flips .show on click, with outside-click and
	Escape to close.
*/
.popupsmilesbyanonshare .popuptextbyanon.show {
	visibility: visible;
	opacity: 1;
	animation: none;
	-webkit-animation: none;
}
.popupsmilesbyanonshare .popuptextbyanon.show,
.popupsmilesbyanonshare:has(.show) { pointer-events: auto; }

/* The grid of smilies inside it. */
#smilies_box {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 0.125rem;
}
#smilies_box img.smilie_dvz, img.smilie_dvz {
	width: 100%;
	height: auto;
	max-width: 1.375rem;
	padding: 0.1875rem;
	cursor: pointer;
	border: 1px solid transparent;
	display: block;
	margin: 0 auto;
}
#smilies_box img.smilie_dvz:hover, img.smilie_dvz:hover {
	border-color: var(--red);
	background: rgba(255,61,68,.14);
}
/* The picker carries an inline <script>; it must never take up space. */
.popuptextbyanon script { display: none; }

/* ==================================================== SERVERS BOARD ===== */
/*
	The server name and the IP are links, but the plugin wraps the anchor
	around a <span class="smalltext">, and that span carries its own colour -
	so the anchor's colour never reached the text and hovering did nothing
	visible. The span inherits here instead.

	Hovering turns them the same light red every other link on the board turns.
	These two cells are the only place where hovering is how you find out
	something is clickable at all, because the text is styled as plain data.
*/
.trow1 > a, .trow2 > a, .trow > a,
.trow1 > a:link, .trow2 > a:link { color: var(--text); }
.trow1 > a .smalltext,
.trow2 > a .smalltext,
.trow  > a .smalltext { color: inherit; transition: color .12s linear, text-shadow .12s linear; }

.trow1 > a:hover, .trow2 > a:hover, .trow > a:hover { color: var(--red-b); }
.trow1 > a:hover .smalltext,
.trow2 > a:hover .smalltext,
.trow  > a:hover .smalltext { color: var(--red-b); }

/*
	The summation row under the table is one cell with colspan=8 and an
	align="center" attribute. The theme's th/td rule left-aligns every cell,
	which beat the attribute and left the whole tally huddled in the left half
	with the right half empty. Centred back, and given room to breathe.
*/
tr:has(.serverssummation) > td {
	text-align: center;
	padding: 0.75rem 1rem;
	line-height: 1.9;
}
.server.serverssummation { color: var(--bright); }

/* Status words in the board carry the board's meaning-colours. */
.server.serveronline  { color: var(--ok); }
.server.serveroffline { color: var(--muted); }
.server.servernumber  { color: var(--muted); }
.serversboard_map, .server.servermap { color: var(--text); }

/*
	The per-server custom tag. serversboard.php prints it as
	<span class="server" style="background:COLOUR;">TEXT</span> with the colour
	the admin typed in the ACP - background only, never a text colour. So the
	span kept the row's light --text and a tag set to WHITE or YELLOW printed
	light on light and could not be read at all.

	It is drawn as a badge here and given a near-black text colour, because a
	tag colour is picked to stand out against a dark board and is therefore
	always a light one. If a dark background is ever wanted, put a `color:` in
	the ACP field next to it - an inline colour outranks this rule.
*/
.server[style*="background"] {
	display: inline-block;
	padding: 0.0625rem 0.375rem;
	font-size: 0.625rem;
	font-weight: bold;
	letter-spacing: 0.0625rem;
	text-transform: uppercase;
	line-height: 1.4;
	color: #0a0707;
	border: 1px solid rgba(0,0,0,.35);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
	vertical-align: middle;
}


/*
	The smilie panel is drawn above the compose row, which puts it outside the
	chat card. Every .tborder is a horizontal scroll container, and a scroll
	container clips its overflow - which is why the top row of smilies
	disappeared behind the card's title bar. The shoutbox card is a single
	column and never needs to scroll, so it opts out.
*/
.tborder2:has(#shoutbox),
.tborder2:has(#shoutbox) > tbody,
.tborder2:has(#shoutbox) > tbody > tr > td { overflow: visible; }

/* Four messages visible rather than three. The template sets the height in a
   style attribute, so this has to out-rank it. */
#shoutbox .window { height: 11.5rem !important; }

/* The compose row sat under a gap the plugin's own markup leaves behind. */
#shoutbox .body { padding-bottom: 0; }
#shoutbox .panel { margin-top: 0.375rem; }
#shoutbox .panel form { line-height: 0; }


/* ==================================================== INDEX COLUMNS ====== */
/*
	The two columns of the front page. The old markup did this with a float,
	a percentage width and overflow:hidden on both halves, which is why the
	sidebar could never be told to do anything about its own height - a float
	has no relationship to the column beside it.

	A flex row does, so the sidebar can hold a fixed width beside a fluid
	forum list without either half guessing at the other's height.
*/
.csg_index {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}
.csg_index_main { flex: 1 1 auto; min-width: 0; }
/*
	The column holds its width and nothing else. It used to be sticky with a
	scrollbar of its own once it outgrew the window, which meant two scrollbars
	on the front page and a card that could be half cut off at the fold. It
	scrolls with the page now, like everything else on it.
*/
.csg_index_side {
	flex: 0 0 20rem;
	max-width: 20rem;
}
/*
	One gap between cards, everywhere, set in one place.

	Some of what lands in these columns is not ours: the forum categories and
	the Online Staff card each print a trailing <br />, which stacked a line
	box on top of the margin - that is the outsized gap under Online Staff.
	The <br />s are dropped and the margin is the only thing spacing cards
	apart, so every card sits the same distance from the next one.
*/
.csg_index_main > br,
.csg_index_side > br { display: none; }

.csg_index_main > table,
.csg_index_main > div,
.csg_index_side > table,
.csg_index_side > div { margin-bottom: 0.75rem; }
.csg_index_main > *:last-child,
.csg_index_side > *:last-child { margin-bottom: 0; }

/*
	Who's online is back where it started: a full width card under both
	columns, not a 20rem strip inside the sidebar. It is wide content - a list
	of names that runs on - and it was the one card in that column that could
	never fit its own shape.
*/
.csg_index_online { margin-top: 0.75rem; }
.csg_index_online > table { width: 100%; }
.csg_index_online .smalltext { line-height: 1.7; }

/*
	Under 990 the columns stack, and a stacked sidebar must never be sticky or
	scrollable - it is just the rest of the page by then.
*/
@media screen and (max-width: 990px) {
	.csg_index { display: block; }
	.csg_index_side {
		flex: none;
		max-width: none;
		margin-top: 0.75rem;
	}
}

/* ==================================================== SIDEBAR CARDS ====== */
/*
	The cards fetched from csg_shared/csg_widgets.php: top players, recent
	bans, shop. One row shape serves all three - a strong first line, a muted
	second, a tag on the right - so three different queries still read as one
	card family.
*/
.csg_w_cell { padding: 0 !important; }
.csg_w_list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.csg_w_row {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 0.125rem 0.5rem;
	align-items: baseline;
	padding: 0.5rem 0.75rem;
	border-bottom: 1px solid var(--edge);
}
.csg_w_list > .csg_w_row:last-child { border-bottom: 0; }
.csg_w_pos {
	grid-row: span 2;
	align-self: center;
	min-width: 1.25rem;
	font-size: 0.875rem;
	color: var(--muted);
	text-align: right;
}
/* First and second place are the only two anyone reads off a top five. */
.csg_w_row:first-child .csg_w_pos { color: var(--gold); }
.csg_w_row:nth-child(2) .csg_w_pos { color: var(--silver); }
.csg_w_icon {
	grid-row: span 2;
	align-self: center;
	width: 1.25rem;
	color: var(--muted);
	text-align: center;
}
.csg_w_main {
	grid-column: 2;
	color: var(--bright);
	overflow-wrap: anywhere;
}
.csg_w_main a:link, .csg_w_main a:visited { color: var(--bright); }
.csg_w_main a:hover, .csg_w_main a:active { color: var(--red-b); }
.csg_w_when {
	grid-column: 3;
	font-size: 0.625rem;
	color: var(--muted);
	white-space: nowrap;
}
.csg_w_sub {
	grid-column: 2;
	font-size: 0.6875rem;
	color: var(--muted);
	line-height: 1.5;
	overflow-wrap: anywhere;
}
.csg_w_tag {
	grid-column: 3;
	justify-self: end;
	font-size: 0.5625rem;
	letter-spacing: 0.0625rem;
	text-transform: uppercase;
	color: var(--muted);
	border: 1px solid var(--edge2);
	padding: 0.0625rem 0.3125rem;
	white-space: nowrap;
}
/* A permanent ban is the one thing on these cards worth colouring. */
.csg_w_tag_perm { color: var(--red-b); border-color: var(--red); }
.csg_w_empty {
	margin: 0;
	padding: 0.75rem;
	font-size: 0.75rem;
	color: var(--muted);
	text-align: center;
}
.csg_w_more {
	margin: 0;
	padding: 0.5rem 0.75rem;
	border-top: 1px solid var(--edge);
	background: var(--panel2);
	font-size: 0.625rem;
	letter-spacing: 0.0625rem;
	text-transform: uppercase;
	text-align: right;
}
.csg_w_big {
	margin: 0;
	padding: 0.75rem;
	border-bottom: 1px solid var(--edge);
	font-size: 0.75rem;
	color: var(--muted);
	line-height: 1.5;
}
.csg_w_big strong {
	font-size: 1.25rem;
	color: var(--red-b);
	font-weight: normal;
}


/* ================================================ SPACING CORRECTIONS ==== */
/*
	Appended at the end so these win over the rules above them without those
	rules having to be found and edited. Four separate things, all of them
	dead space nobody put there on purpose.
*/

/* The servers board tally was a 0.75rem/1.9 line box for one line of text. */
tr:has(.serverssummation) > td { padding: 0.3125rem 1rem; line-height: 1.25; }

/*
	The gap under the nav, and the two <br />s that stacked full line boxes on
	top of it: the header template prints one after #cssmenu, the breadcrumb
	prints another after itself, and the servers board plugin prints a third
	after its table. The margins do the spacing instead.
*/
#cssmenu { margin-bottom: 0.5rem; }
#cssmenu + br, .navigation + br, .showsb + br { display: none; }
.navigation { margin-bottom: 0.625rem; }

/*
	Who's Online closes with a <br /> of its own, on top of #content's bottom
	padding and the footer's top margin - three separate gaps stacked into the
	empty band between the last card and the footer. The <br /> goes and the
	footer moves up; the card's own line break, the one inside the cell between
	the count and the names, is a direct-child selector away and stays.
*/
.csg_index_online > br { display: none; }
/* The footer template opens with one more <br /> of its own, outside every
   wrapper, which is the rest of that band. */
br + #footer { margin-top: 0; }
#footer { margin-top: 1rem; }
#content + br, #mainwidth > br, body > br { display: none; }

/* And the copyright line prints a <br /> after itself, inside a bar that
   already has its own padding. */
#copyright br { display: none; }

/*
	And the last of it is on <body>: a 3.75rem bottom padding, which is a lot
	of empty page under the copyright. It is there so the fixed back-to-top
	button never sits on top of the footer text - 1.5rem clears the button
	(1.25rem from the bottom, and it is drawn over the padding, not in it).
*/
body { padding-bottom: 1.5rem; }

/* ----------------------------------------------------- member profile --- */
/*
	member_profile carries its own <style> block: #one is a 300px float, #two
	takes the rest, .posts2 div gets 5px of padding and #two another 10px of
	margin on top of that. Those two numbers are why the right-hand table sat
	lower than the card beside it - the columns started on different lines.

	Both are zeroed on the two column boxes only (the 5px still applies to the
	divs inside the tables, which is where it was doing something), and the
	gutter is put back as a margin on #one so the columns line up at the top.
*/
.posts2 > #one { padding: 0; margin-right: 1rem; }
.posts2 > #two { padding: 0; margin: 0; }
.posts2 > #one > .us { padding: 0; }
.posts2 > #one fieldset { margin: 0; }

/*
	The buddy / ignore / report row above the right column is a float followed
	by a <br />, and for a guest it is empty - an empty float plus a line break
	still pushed the table down a full line. Unfloated and unpadded it is zero
	high when empty, and when it does carry buttons it sits right-aligned above
	the table with a real gap instead of a line break.
*/
#two > .float_right { float: none; text-align: right !important; padding: 0; }
#two > .float_right + br { display: none; }
/*
	Logged in, that row carries Add to Buddy List / Add to Ignore List /
	Report User. It is one line of small buttons, so it is pinned to a fixed
	height - and the card in the left column is dropped by exactly that much
	below, so the two columns still start level with each other.
*/
#two > .float_right:has(a) { margin-bottom: 0.75rem; }
/*
	Wide enough for the three of them to sit on one line, that line is pinned
	to its own height and the left card is dropped by exactly the same amount
	(1.875rem of row + 0.75rem of gap), so the two columns start level. Both
	numbers are rem, so they track the root size together at every width.

	Below that the buttons wrap to two or three lines, and a fixed height
	would drop them straight through the table underneath - so the row is left
	to find its own height there and the offset comes off with it.
*/
@media screen and (min-width: 960px) {
	#two > .float_right:has(a) { height: 1.875rem; }
	.posts2:has(#two > .float_right a) > #one { margin-top: 2.625rem; }
}

/*
	A layout table, not a data table - the global `td { border-bottom }` drew a
	rule across the bottom of the avatar card that separated nothing. The
	trailing <br /> and the empty <center> after it (away / banned / mod
	options, all empty for most members) left a line of dead space under it
	too.
*/
#one fieldset > table td { border-bottom: 0; }
#one fieldset > table td > center ~ br { display: none; }

/*
	Contact Details lives in a 300px column, and the template draws every row
	as a left-floated label with a right-floated value beside it. A Steam URL
	in the ~120px that leaves broke into six lines of eight characters.

	The row stacks instead: label on its own line, value under it as a chip
	that never wraps and ellipsises when it is too long. Known profile links
	print a short label rather than the raw URL.
*/
/*
	global.css already draws these cells as a flex row - label left, value
	right - which is right for a full-width table. In the 300px column there
	is no room for two things on a line, so the same cell is turned on its
	side: label on the first line, value under it with the whole column to
	itself.
*/
#one .tborder.tfixed td:has(> .float_left):has(> .float_right) {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.375rem;
}
#one .tborder.tfixed td:has(> .float_left):has(> .float_right) > .float_right {
	text-align: left;
	max-width: 100%;
}
#one table.tfixed td .float_left,
#one table.tfixed td .float_right { padding: 0; }
#one table.tfixed td .float_right a {
	display: inline-block;
	max-width: 100%;
	padding: 0.3125rem 0.5rem;
	background: var(--steel2);
	border: 1px solid var(--edge2);
	color: var(--red-b);
	font-size: 0.75rem;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: bottom;
}
#one table.tfixed td .float_right a:hover {
	background: #1e1516;
	border-color: var(--red);
	color: var(--bright);
}
/*
	font-size:0 on the anchor and the label in ::after is what swaps the URL
	for a name without touching the template - the href still holds the real
	address, so the link and its status-bar preview are unchanged.
*/
#one table.tfixed td .float_right a[href*="steamcommunity.com"] { font-size: 0; }
#one table.tfixed td .float_right a[href*="steamcommunity.com"]::after {
	content: "Open Profile \2197";
	font-size: 0.75rem;
}

/* Below 667 the template drops the float and the two columns stack, so the
   gutter above would just leave the card 1rem short of the table's edge. */
@media screen and (max-width: 667px) {
	.posts2 > #one { margin-right: 0; }
}