/*
	CSG Dark - global.css
	cs-gamers.net forum theme, built to sit next to /stats/.

	The palette, the type stack and the sizing ladder below are copied from
	stats/assets/css/style.css so a player moving between the stats pages and
	the forum is looking at one site. If that file changes, change this one.

	Rules of the house, same as the stats sheet:
	  - every length is rem, so the root size below scales the whole board
	  - borders and shadows stay in px, they are hairlines not type
	  - no rounded corners, no drop shadows, the one exception is the red
	    inset underline that marks the active thing
	  - colour always means something: red is us or active, green is online,
	    amber is a warning, grey is muted. Never colour for decoration.
*/

/*
	The palette is sampled from the logo, images/csg4.png, rather than picked
	by eye. Two things came out of measuring it:

	  - its red is #a02010. That measures as hue 6, but sitting the whole
	    theme on hue 6 read as orange at scale, so the reds are pulled to
	    hue 358 - a true red with no orange in it - and kept there. Every red
	    below is the same hue at a different value, so the board reads as one
	    dark red with grades rather than as several different reds.

	    The dominant grade is deliberately dark: #b20e14 carries the active
	    marks and the 3px section rules; #ff3d44 is reserved for the things
	    you can click.

	  - the hairlines are NOT red. Painting every grid line and panel edge red
	    made the board one flat wash of it. They are neutral warm greys, and
	    every panel carries a 1px white inset along its top edge. That lit
	    edge and the neutral grid are what let the red read as an accent
	    again instead of as the background.
	  - its wordmark is neutral grey, #f0f0f0 down to #808080, at zero
	    saturation. The text ramp follows that, warmed by a couple of percent
	    so it does not read cold against the warm panels. Neutral text also
	    makes the red look redder, which is the point.

	Nothing here glows. Brightness comes from the colour itself and from the
	distance to the surface behind it - there are no halo shadows anywhere in
	this theme, by design. The two deliberate exceptions are marked in place.
*/
:root {
	--bg:     #0a0707;
	--steel:  #171111;
	--steel2: #291f1f;
	--edge:   #332a2b;
	--edge2:  #4d3f41;
	--red:    #b20e14;
	--red-b:  #ff3d44;
	--text:   #e8e2e1;
	--bright: #ffffff;
	--muted:  #9c9492;
	--new:    #22e5ff;
	--mid:    #ffb800;
	--vet:    #b20e14;
	--ok:     #2be84f;
	--gold:   #ffd23d;
	--silver: #b4b4b4;
	--bronze: #d98a44;
	--mono:   "Consolas", "DejaVu Sans Mono", "Courier New", monospace;
}

* { box-sizing: border-box; }

/*
	One number sets the scale of the board. A 2560 wide panel is usually
	further from your face than a laptop is, so it gets a bigger root rather
	than the same fixed pixels rendered tiny. Phones stay at 16, they are
	close already and short on width.
*/
html {
	overflow-x: hidden;
	font-size: 16px;
}
@media (min-width: 1280px) { html { font-size: 17px; } }
@media (min-width: 1600px) { html { font-size: 18px; } }
@media (min-width: 2000px) { html { font-size: 19px; } }
@media (min-width: 2500px) { html { font-size: 20.5px; } }
/* 4K. The stats sheet stops at 2500 because nothing there is read from a
   4K panel; a forum is, so the ladder gets one more rung. */
@media (min-width: 3200px) { html { font-size: 22.5px; } }

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--mono);
	font-size: 0.875rem;
	line-height: 1.5;
	padding: 0 0 3.75rem;
	position: relative;
	overflow-x: hidden;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

/* The same brushed grain the stats pages and survey.php carry. */
body::before {
	content: '';
	position: fixed; inset: 0;
	background:
		repeating-linear-gradient(118deg, rgba(255,255,255,.022) 0 1px, transparent 1px 4px),
		repeating-linear-gradient(62deg, rgba(178,14,20,.030) 0 1px, transparent 1px 9px);
	pointer-events: none;
	z-index: 0;
}

a { color: var(--red-b); text-decoration: none; }
a:link, a:visited { color: var(--red-b); text-decoration: none; }
a:hover, a:active, a:focus { color: var(--bright); text-decoration: none; }

img { border: none; max-width: 100%; }
.scaleimages img { max-width: 100%; height: auto; }
/*
	width="1" is MyBB's idiom for a shrink-to-fit cell, and the member profile
	puts the avatar in one. Against a 1px cell the blanket max-width above
	collapses the image to nothing, so images in those cells opt out.
*/
td[width="1"] img, th[width="1"] img { max-width: none; }

hr {
	border: 0;
	border-top: 1px solid var(--edge);
	margin: 1.125rem 0;
	height: 0;
}

/* ------------------------------------------------------------- layout -- */
/*
	The stats site puts a full-bleed .topbar across the viewport and caps the
	content inside it with .wrap. MyBB nests everything in #container instead,
	so #container carries no cap of its own: the bars run edge to edge and the
	cap lives on the wrappers inside them and on #content.

	73.75rem and a 1.125rem gutter are the stats numbers exactly, so moving
	between /stats/ and the forum does not shift the page under you.
*/
#container {
	width: 100%;
	margin: 0;
	padding: 0;
	position: relative;
	z-index: 1;
}
.wrapper { width: auto; margin: 0; }

/*
	Width is the old theme's #mainwidth rule: 90% of the viewport, fluid, no
	ceiling. Wider than the stats site on purpose - a forum carries wider
	tables than a stats page does, and this is the panel width the board is
	used to.

	Both sets of selectors are listed because the theme may be pointed at
	either the stock template set or the old customised one, and the old one
	wraps its content in #mainwidth / .mwrapper instead of #content.
*/
#logo > .wrapper,
#panel .upper > .wrapper,
#panel .lower > .wrapper,
#footer > .wrapper,
#content,
#mainwidth,
.mwrapper {
	width: 90%;
	max-width: none;
	margin-left: auto;
	margin-right: auto;
	padding-left: 0;
	padding-right: 0;
}

/*
	With the FunkyOne template set, #content sits inside #mainwidth, so the
	rule above applied 90% twice and the page body came out at 81% while the
	header ran the full 90%. Inside a wrapper that is already sized, the inner
	one takes the whole width.
*/
#mainwidth #content,
#mainwidth .container,
#mainwidth .wrapper,
.mwrapper #content,
.mwrapper .container { width: 100%; max-width: none; margin-left: 0; margin-right: 0; }

#content, #mainwidth {
	padding-top: 0;
	padding-bottom: 1.5rem;
	overflow: visible;
}

/* --------------------------------------------------------------- head -- */
/*
	MyBB nests #logo inside #header. The bar is the stats .topbar: a hairline
	underneath, a barely-there vertical gradient, nothing else.
*/
#header {
	margin-bottom: 1.625rem;
}
#logo {
	background: linear-gradient(180deg, #0b0708, #050304);
	border-bottom: 1px solid var(--edge);
	padding: 0;
	position: relative;
	z-index: 2;
}
#logo > .wrapper {
	display: flex;
	align-items: center;
	gap: 1.125rem;
	flex-wrap: wrap;
	/* A little air above the mark so it is not sitting on the top edge of
	   the page, but only a little. */
	padding-top: 1.125rem;
	padding-bottom: 0.75rem;
}
#logo a[href] { flex: 0 0 auto; display: block; }
#logo img { height: 2.5rem; width: auto; display: block; }

/* Top links, the small row MyBB puts beside the logo. */
ul.menu, ul.menu li { list-style: none; margin: 0; padding: 0; }
ul.top_links {
	display: flex;
	gap: 0.875rem;
	flex-wrap: wrap;
	margin-left: auto;
}
ul.top_links a {
	font-size: 0.6875rem;
	letter-spacing: 0.0938rem;
	text-transform: uppercase;
	color: var(--muted);
}
ul.top_links a:hover { color: var(--bright); }

/* Header search box. */
#search {
	flex: 0 0 auto;
	margin-left: auto;
}
#search form { display: flex; gap: 0.375rem; align-items: center; }

/* --------------------------------------------------------- nav / panel -- */
#panel {
	background: var(--steel);
	border-bottom: 1px solid var(--edge);
	position: relative;
	z-index: 2;
}
#panel .upper {
	padding: 0;
	border-bottom: 1px solid var(--edge);
	font-size: 0.75rem;
	color: var(--muted);
}
/*
	Left as a block, not a flex row: MyBB writes the welcome line as loose text
	nodes around a <strong>, and flexing it would put a gap between the name
	and the full stop after it. overflow:hidden is only here to contain the
	float_right that MyBB puts on the log out link.
*/
#panel .upper > .wrapper {
	overflow: hidden;
	padding-top: 0.625rem;
	padding-bottom: 0.625rem;
}
#panel .upper a { color: var(--text); }
#panel .upper a:hover { color: var(--bright); }
#panel .lower { padding: 0; }
#panel .lower > .wrapper { padding-left: 1.125rem; padding-right: 1.125rem; }

/*
	The nav strip. Same joined-cell treatment the stats topbar uses: each item
	is a bordered cell, the right border is dropped so they read as one rail,
	and the active one takes the red inset underline.
*/
#panel .lower ul.menu {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
}
#panel .lower ul.menu li { display: block; }
#panel .lower ul.menu li a {
	display: block;
	font-size: 0.6875rem;
	letter-spacing: 0.0938rem;
	text-transform: uppercase;
	color: var(--muted);
	padding: 0.5625rem 0.875rem;
	border: 1px solid var(--edge);
	background: var(--steel);
	white-space: nowrap;
	margin-right: -1px;
	margin-bottom: -1px;
}
#panel .lower ul.menu li a:hover { color: var(--bright); background: var(--steel2); }
#panel .lower ul.menu li a.active,
#panel .lower ul.menu li.active a {
	color: var(--bright);
	background: var(--steel2);
	box-shadow: inset 0 -2px 0 var(--red);
}

/* ------------------------------------------------------- breadcrumb ---- */
/*
	The breadcrumb is the only thing on some pages between the nav and the
	content, and as bare text it read as though the page had lost its header.
	It gets the same surface every other strip on the board has.
*/
.navigation {
	font-size: 0.6875rem;
	letter-spacing: 0.0625rem;
	color: var(--muted);
	margin-bottom: 1.125rem;
	word-break: break-word;
	background: var(--panel, var(--steel));
	border: 1px solid var(--edge);
	border-left: 3px solid var(--red);
	padding: 0.625rem 0.875rem;
}
.navigation i[class*="fa"] { font-size: 0.75rem !important; color: var(--muted) !important; }
.navigation a:link, .navigation a:visited { color: var(--text); }
.navigation a:hover, .navigation a:active { color: var(--bright); }
.navigation .active { color: var(--bright); font-weight: normal; }

/* ------------------------------------------------------------- tables -- */
/*
	MyBB writes its tables with cellspacing="1" and leans on the gap to draw
	the grid. We collapse instead and draw 1px --edge separators, which is what
	the stats tables do.

	The table is also its own scroll container. MyBB 1.8 does not wrap tables
	in a div and we are not restructuring templates for it, so the table itself
	becomes display:block with overflow-x:auto and the row group inside it goes
	back to display:table. That keeps a wide threadlist scrolling inside its own
	box on a phone instead of dragging the whole page sideways.
*/
table {
	border-collapse: collapse;
	width: 100%;
	empty-cells: show;
	font-size: 0.75rem;
}

.tborder,
.tborder2,
.tborder3,
.tborder9 {
	background: var(--steel);
	border: 1px solid var(--edge);
	margin-bottom: 0.875rem;
	width: 100%;
	display: block;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.tborder > thead,  .tborder > tbody,  .tborder > tfoot,
.tborder2 > thead, .tborder2 > tbody, .tborder2 > tfoot,
.tborder3 > thead, .tborder3 > tbody, .tborder3 > tfoot,
.tborder9 > thead, .tborder9 > tbody, .tborder9 > tfoot {
	display: table;
	width: 100%;
}

/*
	The min-width is what makes a wide table scroll inside itself instead of
	crushing its columns on a phone. It must not land on the narrow one-column
	tables MyBB uses for the User CP and Mod CP rails, or those scroll too, so
	it is gated on the table actually having a third column somewhere. Browsers
	without :has() simply fall back to MyBB's own squeeze, which is no worse
	than the theme we came from.
*/
/*
	MyBB writes its column widths as px attributes in the templates. Those do
	not move with the rem ladder, so a "Last Post" column that is comfortable
	at a 16px root is cramped at 20.5px and the date wraps onto three lines.
	Handing those columns back to auto layout lets them grow with everything
	else. The width="1" cells are the status-icon columns and are meant to
	shrink, so they keep their attribute.
*/
.tborder:not(.tfixed) > thead > tr > td[width]:not([width="1"]),
.tborder:not(.tfixed) > tbody > tr > td[width]:not([width="1"]),
.tborder:not(.tfixed) > thead > tr > th[width]:not([width="1"]),
.tborder:not(.tfixed) > tbody > tr > th[width]:not([width="1"]) { width: auto; }

.tborder { --table-floor: 32rem; }
/* The threadlist is the widest thing on the board, so it gets a roomier
   floor. Carried on a variable rather than a second min-width rule, which
   would lose the specificity fight against the :has() selector below. */
.tborder.tfixed { --table-floor: 47rem; }

.tborder:has(td:nth-child(3)) > thead,
.tborder:has(td:nth-child(3)) > tbody,
.tborder:has(td:nth-child(3)) > tfoot,
.tborder:has(th:nth-child(3)) > thead,
.tborder:has(th:nth-child(3)) > tbody,
.tborder:has(th:nth-child(3)) > tfoot { min-width: var(--table-floor); }

/* MyBB hands the threadlist fixed layout; the row group has to carry it. */
.tfixed > thead,
.tfixed > tbody,
.tfixed > tfoot { table-layout: fixed; }

.tborder > tbody:last-child > tr:last-child > td,
.tborder > tfoot > tr:last-child > td { border-bottom: 0; }

th, td {
	padding: 0.5625rem 0.75rem;
	text-align: left;
	font-size: 0.75rem;
	vertical-align: top;
	border-bottom: 1px solid var(--edge);
}

/*
	.thead is the bar that names a section, so it gets the stats section
	heading: uppercase, letter-spaced, 3px red rule down the left.
*/
.thead {
	background: linear-gradient(180deg, #1b1415, #16100f);
	border-bottom: 1px solid var(--edge);
	border-left: 3px solid var(--red);
	color: var(--bright);
	font-size: 0.8125rem;
	letter-spacing: 0.125rem;
	text-transform: uppercase;
	padding: 0.75rem 1rem;
	font-weight: normal;
}
.thead strong, .thead b { font-weight: normal; }
.thead a:link, .thead a:visited { color: var(--bright); }
.thead a:hover, .thead a:active { color: var(--red-b); }
.thead select, .thead input.textbox { text-transform: none; letter-spacing: 0; }

/* .tcat is the column-label row: this is the stats <th>, verbatim. */
.tcat, .tcat2 {
	background: var(--steel2);
	color: var(--muted);
	font-weight: normal;
	font-size: 0.625rem;
	letter-spacing: 0.0938rem;
	text-transform: uppercase;
	padding: 0.5rem 0.75rem;
	border-bottom: 1px solid var(--edge);
}
.tcat strong, .tcat b { font-weight: normal; }
.tcat a:link, .tcat a:visited { color: var(--muted); }
.tcat a:hover, .tcat a:active { color: var(--bright); }
.tcat .smalltext { font-size: 0.625rem; letter-spacing: 0.0938rem; }

/*
	Rows are flat. Zebra striping is decoration and this board does not use
	colour for decoration, so trow1 and trow2 are the same and the 1px rule
	does the separating.
*/
.trow, .trow1, .trow2, .trow_shaded {
	background: var(--steel);
	color: var(--text);
	border-bottom: 1px solid var(--edge);
}
tr:hover > .trow1,
tr:hover > .trow2 { background: rgba(216,31,47,.05); }
.trow_shaded { background: rgba(224,162,48,.06); }
tr.trow_selected td,
.trow_selected { background: rgba(216,31,47,.12); color: var(--bright); }
.trow_selected a:link, .trow_selected a:visited { color: var(--bright); }
.trow_selected a:hover, .trow_selected a:active { color: var(--red-b); }
.trow_sep {
	background: var(--steel2);
	color: var(--muted);
	font-size: 0.625rem;
	letter-spacing: 0.0938rem;
	text-transform: uppercase;
	padding: 0.4375rem 0.75rem;
}
.no_bottom_border { border-bottom: 0; }

.tfoot {
	background: var(--steel2);
	border-top: 1px solid var(--edge);
	border-bottom: 0;
	color: var(--muted);
	font-size: 0.6875rem;
	padding: 0.625rem 0.75rem;
}
.tfoot a:link, .tfoot a:visited { color: var(--text); }
.tfoot a:hover, .tfoot a:active { color: var(--bright); }

.bottommenu {
	background: var(--steel);
	border: 1px solid var(--edge);
	padding: 0.75rem 1rem;
	color: var(--text);
	font-size: 0.75rem;
	margin-bottom: 0.875rem;
}

/* Anything the board marks as metadata reads as metadata. */
.smalltext {
	font-size: 0.6875rem;
	line-height: 1.45;
	color: var(--muted);
}
.smalltext a:link, .smalltext a:visited { color: var(--text); }
.smalltext a:hover, .smalltext a:active { color: var(--bright); }
.largetext { font-size: 1rem; color: var(--bright); font-weight: normal; }

/* ------------------------------------------------- forum / thread state -- */
/*
	MyBB ships sprite images for these and theme5 swapped them for FontAwesome
	glyphs. We use neither: a dot in the one colour that means the thing.
	Green is live, grey is nothing new, amber is locked.
*/
.forum_status,
.subforumicon {
	display: inline-block;
	width: 0.625rem;
	height: 0.625rem;
	border-radius: 50%;
	background: var(--muted);
	vertical-align: 0.0625rem;
	text-indent: -9999px;
	overflow: hidden;
	flex: 0 0 auto;
}
.forum_status i, .subforumicon i { display: none; }
.forum_on, .subforum_minion {
	background: var(--ok);
}
.forum_off, .subforum_minioff { background: #5a2026; }
.forum_offlock, .subforum_miniofflock { background: var(--mid); }
.forum_offlink, .subforum_miniofflink { background: var(--new); }

.subforumicon { width: 0.4375rem; height: 0.4375rem; margin-right: 0.375rem; }

.forum_legend dt, .thread_legend dt {
	display: inline-block;
	margin: 0 0.375rem 0 0;
	vertical-align: middle;
}
.forum_legend dd, .thread_legend dd {
	display: inline-block;
	margin: 0 1.125rem 0.375rem 0;
	font-size: 0.625rem;
	letter-spacing: 0.0938rem;
	text-transform: uppercase;
	color: var(--muted);
	vertical-align: middle;
}

.subject_new { font-weight: normal; color: var(--bright); }
a.subject_new:link, a.subject_new:visited { color: var(--bright); }
a.subject_new:hover { color: var(--red-b); }
.highlight { background: rgba(224,162,48,.22); color: var(--bright); padding: 0 0.125rem; }

.online  { color: var(--ok); }
.offline { color: var(--muted); }

/* -------------------------------------------------------------- forms -- */
fieldset {
	border: 1px solid var(--edge);
	background: var(--steel);
	padding: 0.875rem 1rem;
	margin: 0 0 0.875rem;
}
fieldset legend {
	font-size: 0.625rem;
	letter-spacing: 0.0938rem;
	text-transform: uppercase;
	color: var(--muted);
	padding: 0 0.375rem;
}
fieldset.trow2 { background: var(--steel2); }
fieldset.align_right { text-align: right; }

input.textbox, input[type=text], input[type=password], input[type=email],
input[type=number], input[type=search], input[type=url], textarea, select {
	font-family: var(--mono);
	font-size: 0.75rem;
	line-height: 1.4;
	color: var(--bright);
	background: var(--steel);
	border: 1px solid var(--edge2);
	padding: 0.4375rem 0.5625rem;
	max-width: 100%;
}
textarea { line-height: 1.5; }
input:focus, textarea:focus, select:focus { outline: 1px solid var(--red); }
input::placeholder, textarea::placeholder { color: var(--muted); }

/* MyBB's own validation states. Red for wrong, green for accepted. */
form input.error, form textarea.error { border-color: var(--red); }
form input.valid, form textarea.valid { border-color: var(--ok); }
form label.error {
	display: block;
	color: var(--red-b);
	font-size: 0.6875rem;
	margin-top: 0.25rem;
}

/*
	One button treatment for the three things MyBB calls a button: real
	<input>s, <button>s, and anchors dressed as buttons. Sprite backgrounds
	from the default theme are dropped, the label carries it.
*/
input.button, button, a.button, a.button:link, a.button:visited {
	display: inline-block;
	font-family: var(--mono);
	font-size: 0.6875rem;
	letter-spacing: 0.0625rem;
	text-transform: uppercase;
	color: var(--bright);
	background: var(--steel2);
	border: 1px solid var(--edge2);
	padding: 0.4375rem 0.75rem;
	cursor: pointer;
	line-height: 1.3;
	text-align: center;
}
input.button:hover, button:hover, a.button:hover, a.button:active {
	background: #1e1516;
	border-color: var(--red);
	color: var(--bright);
}
a.button span, input.button span, button span {
	background: none !important;
	padding: 0 !important;
	display: inline;
}
a.button.small_button { font-size: 0.625rem; padding: 0.3125rem 0.5625rem; }

.search { display: flex; gap: 0.375rem; align-items: center; }
.search .textbox { min-width: 0; }

#quick_login .remember_me input { vertical-align: middle; margin: 0 0.25rem 0 0; }

/* --------------------------------------------------------- pagination -- */
.pagination {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	flex-wrap: wrap;
	margin: 0.875rem 0;
	font-size: 0.75rem;
	color: var(--muted);
	clear: both;
}
.tcat .pagination, .thead .pagination { margin: 0; }
.pagination .pages {
	font-size: 0.625rem;
	letter-spacing: 0.0938rem;
	text-transform: uppercase;
	color: var(--muted);
}
.pagination a, .pagination a:link, .pagination a:visited,
.pagination .pagination_current {
	display: inline-block;
	border: 1px solid var(--edge);
	background: var(--steel);
	padding: 0.375rem 0.6875rem;
	color: var(--text);
}
.pagination a:hover, .pagination a:active { color: var(--bright); background: var(--steel2); }
.pagination .pagination_current {
	color: var(--bright);
	background: var(--steel2);
	box-shadow: inset 0 -2px 0 var(--red);
}
.pagination_breadcrumb {
	background: var(--steel2);
	border: 1px solid var(--edge2);
	padding: 0.5rem 0.75rem;
	font-size: 0.75rem;
	margin-bottom: 0.5rem;
}
.pagination_breadcrumb_link { cursor: pointer; }
.drop_go_page { display: flex; gap: 0.375rem; align-items: center; }
.pagination .go_page img { vertical-align: middle; }

/* --------------------------------------------------------------- posts -- */
#posts_container { margin-bottom: 0.875rem; }

/*
	A post is a stats card: flat --steel body, --steel2 rail for the author,
	1px --edge all the way round, nothing rounded and nothing floating.
*/
.post {
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	background: var(--steel);
	border: 1px solid var(--edge);
	margin-bottom: 0.875rem;
	position: relative;
}
.post .post_author {
	flex: 0 0 13.75rem;
	max-width: 13.75rem;
	background: var(--steel2);
	border-right: 1px solid var(--edge);
	padding: 0.875rem 1rem;
	font-size: 0.6875rem;
	color: var(--muted);
	word-break: break-word;
}
.post .post_author div.author_avatar { margin-bottom: 0.625rem; }
.post .post_author div.author_avatar img {
	max-width: 100%;
	height: auto;
	display: block;
	border: 1px solid var(--edge2);
}
.post .post_author div.author_information {
	font-size: 0.75rem;
	color: var(--text);
	line-height: 1.5;
}
.post .post_author div.author_information strong { font-weight: normal; }
.post .post_author div.author_information .largetext a { color: var(--bright); }
.post .post_author div.author_information .largetext a:hover { color: var(--red-b); }
.post .post_author div.author_statistics {
	margin-top: 0.625rem;
	padding-top: 0.625rem;
	border-top: 1px solid var(--edge);
	font-size: 0.625rem;
	letter-spacing: 0.0313rem;
	color: var(--muted);
	line-height: 1.6;
}
.post .post_author .buddy_status { vertical-align: middle; margin-left: 0.25rem; }

/* The classic postbit puts the author on top instead of down the side. */
.post.classic { display: block; }
.post.classic .post_author {
	flex: none;
	max-width: none;
	width: auto;
	border-right: 0;
	border-bottom: 1px solid var(--edge);
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}
.post.classic .post_author div.author_avatar { margin: 0; }
.post.classic .post_author div.author_avatar img { max-height: 2.75rem; width: auto; }
.post.classic .post_author div.author_information { flex: 1 1 12.5rem; }
.post.classic .post_content { width: auto; }

.post .post_content {
	flex: 1 1 20rem;
	min-width: 0;
	display: flex;
	flex-direction: column;
}
.post .post_head {
	display: flex;
	align-items: baseline;
	gap: 0.75rem;
	flex-wrap: wrap;
	padding: 0.625rem 1rem;
	background: var(--steel2);
	border-bottom: 1px solid var(--edge);
	font-size: 0.6875rem;
	letter-spacing: 0.0625rem;
	text-transform: uppercase;
	color: var(--muted);
}
.post .post_head span.post_date { flex: 1 1 auto; }
.post .post_head .post_number a { color: var(--muted); }
.post .post_head .post_number a:hover { color: var(--bright); }
.post .post_head span.edited_post {
	text-transform: none;
	letter-spacing: 0;
	font-size: 0.6875rem;
	color: var(--muted);
}
.post .post_head span.edited_post a { color: var(--text); }

.post_body, .post_content .post_body {
	padding: 0.875rem 1rem;
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--text);
	word-wrap: break-word;
	overflow-wrap: break-word;
	flex: 1 1 auto;
}
.post_content .signature {
	margin: 0 1rem 0.875rem;
	padding-top: 0.625rem;
	border-top: 1px solid var(--edge);
	font-size: 0.6875rem;
	color: var(--muted);
}
.post .post_meta {
	padding: 0 1rem 0.625rem;
	font-size: 0.625rem;
	letter-spacing: 0.0625rem;
	color: var(--muted);
}

.post_controls {
	flex: 1 1 100%;
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	align-items: center;
	padding: 0.5625rem 1rem;
	background: var(--steel2);
	border-top: 1px solid var(--edge);
}
.postbit_buttons { display: flex; gap: 0.375rem; flex-wrap: wrap; }
.postbit_buttons.post_management_buttons { margin-left: auto; }
.postbit_buttons > a,
.postbit_buttons > a:link,
.postbit_buttons > a:visited {
	display: inline-block;
	font-size: 0.625rem;
	letter-spacing: 0.0625rem;
	text-transform: uppercase;
	color: var(--muted);
	border: 1px solid var(--edge);
	background: var(--steel);
	padding: 0.3125rem 0.5rem;
}
.postbit_buttons > a:hover, .postbit_buttons > a:active {
	color: var(--bright);
	border-color: var(--edge2);
	background: #1a1213;
}
/* MyBB sprites every one of these; we want the word, not the icon. */
.postbit_buttons a span,
.postbit_buttons a span:before { background: none !important; padding-left: 0 !important; }
.postbit_buttons > a.postbit_qdelete:hover,
.postbit_buttons > a.postbit_report:hover,
.postbit_buttons > a.postbit_warn:hover,
.postbit_buttons > a.postbit_purgespammer:hover { color: var(--red-b); border-color: var(--red); }
.postbit_buttons > a.postbit_multiquote_on {
	color: var(--bright);
	box-shadow: inset 0 -2px 0 var(--red);
}

/* Posts the board is holding back or has deleted. */
.post.unapproved_post { border-color: var(--edge2); }
.post.unapproved_post .post_author,
.post.classic.unapproved_post .post_author,
.post.unapproved_post .post_controls { background: rgba(224,162,48,.08); }
.post.deleted_post { border-color: var(--edge2); opacity: .75; }
.deleted_post_hidden, .ignored_post { display: none; }
.deleted_post_collapsed, .ignored_post.show_ignored_post { display: block; }
.deleted_post_collapsed .show_deleted_post,
.ignored_post .show_ignored_post {
	padding: 0.625rem 1rem;
	font-size: 0.6875rem;
	color: var(--muted);
}

/* ------------------------------------------------------ quotes & code -- */
blockquote {
	margin: 0.75rem 0;
	padding: 0.625rem 0.875rem;
	background: #0a0708;
	border: 1px solid var(--edge);
	border-left: 3px solid var(--red);
	font-size: 0.8125rem;
	overflow: auto;
}
blockquote cite {
	display: block;
	font-style: normal;
	font-size: 0.625rem;
	letter-spacing: 0.0938rem;
	text-transform: uppercase;
	color: var(--muted);
	border-bottom: 1px solid var(--edge);
	padding-bottom: 0.375rem;
	margin-bottom: 0.5rem;
}
blockquote cite span { float: right; text-transform: none; letter-spacing: 0; }
blockquote cite span.highlight { float: none; }

.codeblock {
	margin: 0.75rem 0;
	background: #0a0708;
	border: 1px solid var(--edge);
	border-left: 3px solid var(--new);
}
.codeblock .title {
	font-size: 0.625rem;
	letter-spacing: 0.0938rem;
	text-transform: uppercase;
	color: var(--muted);
	background: var(--steel2);
	border-bottom: 1px solid var(--edge);
	padding: 0.375rem 0.875rem;
}
.codeblock code {
	display: block;
	padding: 0.625rem 0.875rem;
	font-family: var(--mono);
	font-size: 0.75rem;
	line-height: 1.55;
	color: var(--bright);
	overflow: auto;
	white-space: pre;
	-webkit-overflow-scrolling: touch;
}

.editor { border: 1px solid var(--edge); background: var(--steel); }
.editor_control_bar { background: var(--steel2); border-bottom: 1px solid var(--edge); }
.post .editor_control_bar { background: var(--steel2); }

img.attachment {
	border: 1px solid var(--edge2);
	padding: 0.25rem;
	background: #0a0708;
}
.smilie { vertical-align: middle; }
.smilie_pointer { cursor: pointer; }

/* --------------------------------------------------------- popup menus -- */
.popup_menu {
	background: var(--steel2);
	border: 1px solid var(--edge2);
	z-index: 30;
}
.popup_menu .popup_item_container { margin: 0; }
.popup_menu .popup_item, .popup_menu a.popup_item {
	display: block;
	padding: 0.4375rem 0.75rem;
	font-size: 0.75rem;
	color: var(--text);
	border-bottom: 1px solid var(--edge);
	white-space: nowrap;
}
.popup_menu .popup_item:last-child { border-bottom: 0; }
.popup_menu .popup_item:hover, .popup_menu a.popup_item:hover {
	background: rgba(216,31,47,.12);
	color: var(--bright);
}
.quick_jump { cursor: pointer; vertical-align: middle; }

/* ------------------------------------------------------------- alerts -- */
/*
	Amber warns, red stops, green confirms. Nothing else earns a colour.
*/
.pm_alert, .red_alert, .success_message, .error_message,
div.error, .high_warning, .moderate_warning, .low_warning {
	font-size: 0.75rem;
	line-height: 1.5;
}
.pm_alert {
	background: rgba(56,183,201,.07);
	border: 1px solid var(--edge2);
	border-left: 3px solid var(--new);
	padding: 0.75rem 0.875rem;
	color: var(--text);
	margin-bottom: 1.125rem;
	text-align: left;
}
.red_alert {
	background: rgba(216,31,47,.08);
	border: 1px solid var(--edge2);
	border-left: 3px solid var(--red);
	padding: 0.75rem 0.875rem;
	color: var(--text);
	margin-bottom: 1.125rem;
	text-align: left;
}
.pm_alert a, .red_alert a { color: var(--red-b); }
.pm_alert a:hover, .red_alert a:hover { color: var(--bright); }

.success_message {
	color: var(--ok);
	border: 1px solid var(--edge2);
	border-left: 3px solid var(--ok);
	background: rgba(79,174,90,.07);
	padding: 0.625rem 0.875rem;
	margin-bottom: 1.125rem;
	font-weight: normal;
}
.error_message {
	color: var(--red-b);
	border: 1px solid var(--edge2);
	border-left: 3px solid var(--red);
	background: rgba(216,31,47,.07);
	padding: 0.625rem 0.875rem;
	margin-bottom: 1.125rem;
	font-weight: normal;
}

div.error {
	background: rgba(216,31,47,.07);
	border: 1px solid var(--edge2);
	border-left: 3px solid var(--red);
	padding: 0.75rem 0.875rem;
	margin-bottom: 1.125rem;
	color: var(--text);
}
div.error p { margin: 0; color: var(--text); font-weight: normal; }
div.error p em {
	font-style: normal;
	display: block;
	font-size: 0.625rem;
	letter-spacing: 0.0938rem;
	text-transform: uppercase;
	color: var(--red-b);
	margin-bottom: 0.375rem;
}
div.error ul { margin: 0.5rem 0 0; padding-left: 1.125rem; color: var(--text); }

.high_warning     { color: var(--red-b); }
.moderate_warning { color: var(--mid); }
.low_warning      { color: var(--ok); }

/* Reputation reads the same way: plus green, minus red, neutral grey. */
.reputation_positive, ._plus  { color: var(--ok); }
.reputation_neutral,  ._neutral { color: var(--muted); }
.reputation_negative, ._minus { color: var(--red-b); }
.repbox {
	display: inline-block;
	font-size: 0.6875rem;
	padding: 0.0625rem 0.375rem;
	border: 1px solid currentColor;
	white-space: nowrap;
}

/* ------------------------------------------------------------- polls --- */
.pollbar {
	background: #0a0708;
	border: 1px solid var(--edge);
	height: 1.125rem;
	position: relative;
	overflow: hidden;
}
.pollbar > div, .pollbar span.bar {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, #8d1420, var(--red));
}
.pollbar .percent {
	position: absolute;
	right: 0.375rem;
	top: 0;
	line-height: 1.125rem;
	font-size: 0.625rem;
	color: var(--bright);
}
.posticons_label { font-size: 0.6875rem; color: var(--muted); }

/* ------------------------------------------------------------ footer --- */
#footer {
	margin-top: 2.125rem;
	position: relative;
	z-index: 1;
	font-size: 0.6875rem;
	color: var(--muted);
}
#footer .upper {
	border-top: 1px solid var(--edge);
	padding: 0.875rem 0;
	display: flex;
	gap: 0.875rem;
	align-items: center;
	flex-wrap: wrap;
}
#footer .upper .language, #footer .upper .theme { flex: 0 0 auto; }
#footer .upper .language select, #footer .upper .theme select { font-size: 0.6875rem; }
#footer ul.menu { display: flex; gap: 0.875rem; flex-wrap: wrap; }
#footer ul.menu li { display: block; }
#footer ul.bottom_links { margin-left: auto; }
#footer .lower {
	border-top: 1px solid var(--edge);
	padding: 0.75rem 0;
	display: flex;
	gap: 0.875rem;
	justify-content: space-between;
	flex-wrap: wrap;
}
#footer a:link, #footer a:visited { color: var(--text); }
#footer a:hover, #footer a:active { color: var(--bright); }
#footer .lower #current_time { color: var(--muted); }

#debug { text-align: right; font-size: 0.625rem; color: var(--muted); }
#debug a:link, #debug a:visited { color: var(--muted); }

/* -------------------------------------------------------------- misc --- */
.clear { clear: both; }
.float_left  { float: left; }
.float_right { float: right; }

/*
	The profile's Contact Details and Additional Info rows are one cell
	carrying a floated label and a floated value. A float has no idea the
	other one exists, so as soon as the pair no longer fits - a long Skype
	handle, a full Steam URL in the Hangouts field - the value dropped under
	the label and the label itself broke mid-phrase ("Google / Hangouts /
	ID:").

	Made a flex row instead: the label holds one line, the value takes the
	slack and is allowed to break inside a long token, which is the only way
	a 50-character URL fits a column at all. These tables are single-column
	(their colgroup is one 100% col), so giving the cell display:flex costs
	nothing.
*/
/*
	The row has to be a flex row too. These tables' first row is a colspan=2
	header, and with the row groups drawn as their own tables (see the
	.tborder rules above) the colgroup no longer reaches them - so fixed
	layout split the table into two equal columns and every following
	single-cell row got half the width, with the right half left empty. As a
	flex row there are no columns to split and the cell takes the lot.
*/
/* Contact Details, and the User Bio table below it, which is built the same
   way and was squeezed the same way. Matched on their own markers so the
   poll table - same shape, but its rows really do have several cells - is
   left alone. */
.tborder.tfixed:has(> tbody > tr > td:only-child > .float_left) > tbody,
.tborder.tfixed:has(> tbody > tr > td.scaleimages) > tbody { display: block; width: 100%; }
.tborder.tfixed:has(> tbody > tr > td:only-child > .float_left) > tbody > tr,
.tborder.tfixed:has(> tbody > tr > td.scaleimages) > tbody > tr { display: flex; width: 100%; }
.tborder.tfixed:has(> tbody > tr > td:only-child > .float_left) > tbody > tr > td,
.tborder.tfixed:has(> tbody > tr > td.scaleimages) > tbody > tr > td { flex: 1 1 auto; min-width: 0; }

.tborder.tfixed td:has(> .float_left):has(> .float_right) {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
}
.tborder.tfixed td:has(> .float_left):has(> .float_right) > .float_left {
	float: none;
	white-space: nowrap;
}
.tborder.tfixed td:has(> .float_left):has(> .float_right) > .float_right {
	float: none;
	min-width: 0;
	text-align: right;
	overflow-wrap: anywhere;
}
.hidden, .hiddenrow { display: none; }
.selectall { cursor: pointer; }
.expcolimage { float: right; width: auto; vertical-align: middle; }
.expcolimage img { cursor: pointer; }
.tcat_menu > .expcolimage { margin-top: 0; }
.separator {
	margin: 0.375rem;
	border-bottom: 1px solid var(--edge);
	font-size: 1px;
	list-style-type: none;
}
.space_auto {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	align-items: center;
	margin: 0 auto;
}
.showthread_spinner, .spinner { text-align: center; padding: 1.25rem; color: var(--muted); }

/*
	jGrowl toasts. Kept as flat --steel2 cards so a notification looks like
	the rest of the board rather than a stray browser chrome popup.
*/
.jGrowl { position: fixed; z-index: 9999; }
.jGrowl.top-right { top: 0; right: 0; }
.jGrowl.top-left { top: 0; left: 0; }
.jGrowl.bottom-right { bottom: 0; right: 0; }
.jGrowl.bottom-left { bottom: 0; left: 0; }
.jGrowl.center { top: 0; width: 100%; }
.jGrowl .jGrowl-notification {
	background: var(--steel2);
	border: 1px solid var(--edge2);
	border-left: 3px solid var(--red);
	color: var(--text);
	font-size: 0.75rem;
	padding: 0.75rem 0.875rem;
	margin: 0.625rem;
}

/* ============================================================== GLASS ==== */
/*
	The old theme's one trick worth keeping: a fixed photo behind the board
	with the panels sitting on it as dark glass rather than solid blocks.

	The photo is images/funky/dark.jpg, already on this board - no new asset.
	A scrim is laid over it so the picture reads as texture and never as
	content: the board stays near-black and body text keeps its contrast.
	The two grain layers from the stats sheet still sit on top of both.

	This section only re-points backgrounds. Every border, colour and size
	stays exactly as set above, so deleting this block returns the theme to
	the flat look with nothing else disturbed.
*/
:root {
	/* Surfaces. The alpha is what lets the photo through. */
	--panel:   rgba(23, 17, 17, .80);   /* was --steel  */
	--panel2:  rgba(41, 31, 31, .88);   /* was --steel2 */
	--sunken:  rgba(7, 5, 5, .86);      /* was #0a0708  */
	--scrim:   rgba(10, 7, 7, .50);
}

/*
	The canvas gets a real colour of its own.

	The photo used to be `background: ... fixed` on <body>, and a background on
	body with none on html propagates to the canvas. That shorthand had no
	colour in it, so the canvas resolved to transparent - which is white. On a
	desktop the fixed photo covered every pixel and the hole never showed; on a
	phone the canvas is painted by the compositor, which draws a fixed
	background over the visual viewport only and leaves the rest of the
	scrolling surface on its base colour. That is the white sheet below the
	footer, and the white that flashes on overscroll.
*/
html { background-color: var(--bg); }

/*
	The photo and the scrim over it, on one fixed layer behind everything.

	A position: fixed pseudo-element is an ordinary painted box rather than a
	compositor-managed canvas background, so it behaves the same in every
	mobile browser and cannot leave a strip unpainted. Its own colour is the
	last fallback: if the photo ever fails to load, this is what shows.
*/
body::after {
	content: '';
	position: fixed;
	inset: 0;
	background-color: var(--bg);
	background-image:
		linear-gradient(var(--scrim), var(--scrim)),
		url(../../../images/funky/dark.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	pointer-events: none;
	z-index: -1;
}

/* Panels ---------------------------------------------------------------- */
.tborder, .tborder2, .tborder3, .tborder9,
.bottommenu,
.post,
fieldset,
.empty-state { background: var(--panel); }

.trow, .trow1, .trow2 { background: transparent; }

/*
	Row hover.

	It is worth keeping where a row is a line in a list - a forum, a thread, a
	server - because there it tracks the eye across eight columns and marks
	which line a click will land on.

	It is wrong wherever a panel is built as one single row holding a whole
	block of content: the contact page, usercp panes, options forms. There the
	hover is not marking a line, it is washing the entire card red, and there
	is nothing to click at the end of it anyway.

	So the highlight stays, and is cancelled on exactly that shape: a body of
	one row whose cell is the only cell in it.
*/
tr:hover > .trow1, tr:hover > .trow2 { background: rgba(255,61,68,.09); }
/*
	The cancel: a body of exactly one row whose cell is the only cell in it is
	not a list, it is a card, and the cell is the card's whole inside. Hovering
	anywhere in it used to flood the panel red.
*/
tbody:not(:has(> tr + tr)) > tr:hover > td:only-child { background: transparent; }

/*
	Same reasoning for the forum cards on the index: each row is a card with
	its own icon, title, count and last post, not a line to track across. The
	red wash there is decoration, so it is cancelled - the link colour on
	hover is what marks the target.
*/
table.tborder2 tr:hover > .trow1,
table.tborder2 tr:hover > .trow2 { background: transparent; }

.thead { background: linear-gradient(180deg, rgba(58,50,51,.90), rgba(32,27,28,.88)); }
.tcat, .tcat2, .tfoot, .trow_sep,
.post .post_author,
.post .post_head,
.post_controls,
#panel { background: var(--panel2); }

#logo { background: linear-gradient(180deg, rgba(11,7,8,.82), rgba(5,3,4,.72)); }

#panel .lower ul.menu li a { background: var(--panel); }
#panel .lower ul.menu li a:hover,
#panel .lower ul.menu li a.active,
#panel .lower ul.menu li.active a { background: var(--panel2); }

.pagination a, .pagination a:link, .pagination a:visited { background: var(--panel); }
.pagination a:hover, .pagination .pagination_current { background: var(--panel2); }

.postbit_buttons > a { background: var(--panel); }
a.button, input.button, button, .modqueue_mass li a { background: var(--panel2); }

blockquote, .codeblock, .track, .pollbar, .modqueue_message { background: var(--sunken); }
#shoutbox .window { background: var(--sunken); }

input.textbox, input[type=text], input[type=password], input[type=email],
input[type=number], input[type=search], input[type=url], textarea, select {
	background: var(--sunken);
}

/*
	Menus that float over content stay opaque. Glass is for surfaces you read
	on, not for things you read through.
*/
.popup_menu { background: #291f1f; }
.popup_menu .popup_item:hover, .popup_menu a.popup_item:hover { background: rgba(216,31,47,.20); }

/* ================================================ PLUGIN BLOCKS ========== */
/*
	Blocks that come from plugins rather than from MyBB core. They render on
	this board whatever theme is active, but their styling lived in the old
	theme's stylesheets, so without this section they arrive unstyled - which
	is what made the chat look broken.
*/

/* ------------------------------------------------------- DVZ shoutbox --- */
/*
	Markup is #shoutbox.front > .body > .window > .data > .entry, and each
	entry is avatar / user / text / info. Laid out as a grid so the messages
	line up down the column instead of wrapping around the avatars.
*/
#shoutbox { font-size: 0.75rem; }
#shoutbox .window {
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	background: var(--sunken);
	border: 1px solid var(--edge);
}
#shoutbox .data { display: block; }

/*
	One row per shout: avatar, name, message, timestamp. Stacking the message
	under the name doubled the height of every entry and the card ate the
	column for a handful of lines. The name is separated from the message by a
	hairline and sits at --bright while the message sits at --text, so the two
	still read as different things on the same line.
*/
#shoutbox .entry {
	display: grid;
	grid-template-columns: auto auto minmax(0, 1fr) auto;
	grid-template-areas: "avatar user text info";
	gap: 0 0.5rem;
	align-items: center;
	padding: 0.375rem 0.625rem;
	border-bottom: 1px solid var(--edge);
}
#shoutbox .entry:last-child { border-bottom: 0; }
#shoutbox .entry:hover { background: rgba(216,31,47,.05); }

#shoutbox .avatar { grid-area: avatar; align-self: center; }
#shoutbox .avatar img {
	width: 1.5rem;
	height: 1.5rem;
	object-fit: cover;
	display: block;
	border: 1px solid var(--edge2);
}

#shoutbox .user {
	grid-area: user;
	min-width: 0;
	max-width: 9rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	border-right: 1px solid var(--edge);
	padding-right: 0.5rem;
}
#shoutbox .user a { color: var(--bright); }
#shoutbox .user a:hover { color: var(--red-b); }

#shoutbox .text {
	grid-area: text;
	color: var(--text);
	word-wrap: break-word;
	overflow-wrap: break-word;
	min-width: 0;
}

/* The timestamp is metadata, so it reads as metadata. */
/*
	The plugin writes the moderator controls as bare letters immediately
	before the timestamp - <a class="mod edit">E</a><a class="mod del">X</a> -
	with no separator, which is what read as "EX29 Jun". They become real
	buttons here and get room around them.
*/
#shoutbox .info {
	grid-area: info;
	white-space: nowrap;
	display: flex;
	align-items: center;
	gap: 0.3125rem;
}
#shoutbox .info a.mod {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.125rem;
	height: 1.125rem;
	font-size: 0.5625rem;
	letter-spacing: 0;
	line-height: 1;
	color: var(--muted);
	border: 1px solid var(--edge);
	background: var(--panel2);
	text-transform: none;
}
#shoutbox .info a.mod.edit:hover { color: var(--bright); border-color: var(--edge2); }
#shoutbox .info a.mod.del:hover  { color: var(--red-b); border-color: var(--red); }
#shoutbox .info a, #shoutbox .info .date {
	font-size: 0.625rem;
	letter-spacing: 0.0625rem;
	text-transform: uppercase;
	color: var(--muted);
}
#shoutbox .info a:hover .date, #shoutbox .info a:hover { color: var(--bright); }

/* Your own shouts, and the row you are replying to. */
#shoutbox .entry.mine { box-shadow: inset 2px 0 0 var(--red); }

/* The compose row, which only renders for logged-in members. */
#shoutbox .panel {
	display: flex;
	gap: 0.375rem;
	align-items: center;
	margin-top: 0.5rem;
}
#shoutbox .panel input[type=text] { flex: 1 1 auto; min-width: 0; }

/* --------------------------------------------- server board / annbars --- */
/*
	Bootstrap-shaped progress markup from the servers board and the
	announcement bars: .progress wraps a .bar plus an absolutely positioned
	label. Redrawn as the stats .track / .fill.

	Green means the server has players on it, red means it is down, amber is
	nearly full. The stripe animation is dropped - it is decoration.
*/
.progress {
	position: relative;
	height: 1.125rem;
	background: var(--sunken);
	border: 1px solid var(--edge);
	overflow: hidden;
}
.progress .bar {
	height: 100%;
	background: linear-gradient(90deg, #8d1420, var(--red));
	background-image: linear-gradient(90deg, #8d1420, var(--red));
	transition: width .2s linear;
}
.progress-success .bar { background-image: linear-gradient(90deg, #2c6f36, var(--ok)); }
.progress-warning .bar { background-image: linear-gradient(90deg, #7a5412, var(--mid)); }
.progress-danger  .bar { background-image: linear-gradient(90deg, #6b1017, var(--red)); }
.progress-info    .bar { background-image: linear-gradient(90deg, #17606b, var(--new)); }
.progress-striped .bar { background-size: auto; }

/*
	The label is written inline with a near-black colour, which is unreadable
	on a dark bar. It is the one place here that has to out-rank an inline
	style, so it does.
*/
.progress > div:not(.bar) {
	color: var(--bright) !important;
	font-size: 0.625rem;
	letter-spacing: 0.0625rem;
	line-height: 1.125rem;
	top: 0;
	text-shadow: 0 1px 1px rgba(0,0,0,.85);
}
.progress > div:not(.bar) center { display: block; }

/* The collapse chevrons plugins drop into a .thead. */
.expcolimage img, img.expander { vertical-align: middle; cursor: pointer; }

/* ========================================================= SCROLLBARS ==== */
/*
	Red, and built like a Windows scrollbar: a sunken track, a raised thumb
	with a lit top-left edge and a shaded bottom-right one. Applied to the
	whole document and to every inner scroller - the chat window, code blocks,
	wide tables - so they all match.

	Firefox takes the two-colour form and gets the red thumb but not the
	bevel; WebKit and Blink take the box model and get both.
*/
* {
	scrollbar-width: auto;
	scrollbar-color: var(--red) var(--steel);
}
::-webkit-scrollbar { width: 0.875rem; height: 0.875rem; }
::-webkit-scrollbar-track {
	background: var(--steel);
	border: 1px solid var(--edge);
	box-shadow: inset 1px 1px 0 rgba(0,0,0,.55);
}
::-webkit-scrollbar-corner { background: var(--steel); }
::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, #d01218, var(--red) 55%, #8c0b10);
	border: 1px solid #4d0508;
	box-shadow: inset 1px 1px 0 rgba(255,255,255,.28),
	            inset -1px -1px 0 rgba(0,0,0,.45);
}
::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(180deg, #ff5158, var(--red-b) 55%, #c11017);
}
::-webkit-scrollbar-thumb:active {
	background: var(--red);
	box-shadow: inset 1px 1px 0 rgba(0,0,0,.5);
}
/* The little end buttons, so the bar reads as a full window scrollbar and not
   as a bare strip. Blink only draws these when they are given a size. */
::-webkit-scrollbar-button:single-button {
	background: linear-gradient(180deg, var(--steel2), #1a1313);
	border: 1px solid #4d0508;
	box-shadow: inset 1px 1px 0 rgba(255,255,255,.10),
	            inset -1px -1px 0 rgba(0,0,0,.5);
	height: 0.875rem;
	width: 0.875rem;
}
::-webkit-scrollbar-button:single-button:hover { background: var(--red); }


/* =========================================== INTERACTIVE RED ============= */
/*
	The dominant red in this theme is dark, which is what makes it feel like
	one colour rather than a highlight. The cost is that a dark red border
	does not announce itself, so the handful of things you actually act on
	borrow the bright grade and a small lift on hover.

	This is the theme's third and last deliberate glow. Everything else stays
	flat.
*/
a.button:hover, input.button:hover, button:hover {
	border-color: var(--red-b);
	box-shadow: 0 0 10px rgba(178,14,20,.55);
}
.pagination a:hover { border-color: var(--red-b); }
input:focus, textarea:focus, select:focus {
	outline: 1px solid var(--red-b);
	box-shadow: 0 0 10px rgba(178,14,20,.45);
}
#panel .lower ul.menu li a.active,
#panel .lower ul.menu li.active a { box-shadow: inset 0 -2px 0 var(--red-b); }


/* ============================================== LIGHT ON THE EDGES ======= */
/*
	A single hairline of white along the top of each panel. It is what stops
	the board reading as one red wash: the eye catches the lit edge, the
	surface below it drops away, and the red is left to mean something rather
	than to fill space.

	One pixel, six percent. It should never register as a colour, only as an
	edge.
*/
.tborder, .tborder2, .tborder3, .tborder9,
.post, fieldset, .bottommenu,
.popup_menu, .dropdown-menu {
	box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.thead, .theadm { box-shadow: inset 0 1px 0 rgba(255,255,255,.07); }

a.button, input.button, button,
input.textbox, input[type=text], input[type=password], input[type=email],
input[type=number], input[type=search], input[type=url], textarea, select {
	box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
a.button:hover, input.button:hover, button:hover {
	box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 0 10px rgba(178,14,20,.55);
}
input:focus, textarea:focus, select:focus {
	box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 10px rgba(178,14,20,.45);
}


/* ============================================== CONTACT PAGE ============= */
/*
	contact.php is a list of four ways to reach the admin, so it is drawn as
	a definition list rather than as prose: icon, label, value, copy button,
	one row each, columns aligned down the page. The Discord and Skype IDs
	are not links and never will be - the copy button is what makes them
	usable, and it is the only reason there is script on the page.

	Rows carry the same 1px --edge hairline the tables use, so the page reads
	as one more panel of the board and needs no colour of its own.
*/
.contact_intro {
	margin: 0 0 1rem;
	color: var(--text);
	line-height: 1.6;
}
.contact_channels {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--edge);
}
.contact_channel {
	display: grid;
	grid-template-columns: 1.5rem 5.5rem 1fr auto;
	gap: 0.75rem;
	align-items: center;
	padding: 0.75rem 0.25rem;
	border-bottom: 1px solid var(--edge);
}
.contact_icon {
	font-size: 1rem;
	color: var(--muted);
	text-align: center;
}
.contact_channel:hover .contact_icon { color: var(--red-b); }
.contact_label {
	font-size: 0.6875rem;
	letter-spacing: 0.0938rem;
	text-transform: uppercase;
	color: var(--muted);
}
.contact_value {
	color: var(--bright);
	min-width: 0;
	overflow-wrap: anywhere;
}
.contact_value a:link, .contact_value a:visited { color: var(--red-b); }
.contact_value a:hover, .contact_value a:active { color: var(--bright); }
.contact_copy {
	font-size: 0.625rem;
	letter-spacing: 0.0938rem;
	text-transform: uppercase;
	padding: 0.3125rem 0.5625rem;
	white-space: nowrap;
}
/* Green only while the value is on the clipboard - it is a state, not a colour. */
.contact_copy.contact_copied { color: var(--ok); border-color: var(--ok); }
.contact_note {
	margin: 1rem 0 0;
	color: var(--muted);
	line-height: 1.6;
}

/*
	The send-a-message form under the channel list. Label cell on the left,
	field on the right, and the fields take the column rather than the
	size="49" the stock template hard-codes - that attribute is what made the
	form overflow the panel on a phone.

	Row hover is cancelled here: a form row is not a list line, nothing about
	it is clickable, and the wash only made the field harder to read.
*/
.contact_form tr:hover > .trow1,
.contact_form tr:hover > .trow2 { background: transparent; }
.contact_form > tbody > tr > td:first-child { width: 30%; min-width: 11rem; }
.contact_form > tbody > tr > td:first-child strong { color: var(--bright); font-weight: normal; }
.contact_form > tbody > tr > td:first-child .smalltext {
	display: block;
	margin-top: 0.25rem;
	color: var(--muted);
	line-height: 1.5;
}
.contact_form input.textbox, .contact_form textarea {
	width: 100%;
	font-family: var(--mono);
}
.contact_form > tfoot > tr > td { text-align: right; }

@media (max-width: 40rem) {
	.contact_form, .contact_form > tbody, .contact_form > tbody > tr { display: block; width: 100%; }
	.contact_form > tbody > tr > td { display: block; width: 100%; }
	.contact_form > tbody > tr > td:first-child { border-bottom: 0; padding-bottom: 0; }
}

/*
	Under ~30rem the four columns cannot all hold their width, so the label
	moves above the value and the button drops to its own line.
*/
@media (max-width: 30rem) {
	.contact_channel {
		grid-template-columns: 1.5rem 1fr;
		gap: 0.25rem 0.75rem;
	}
	.contact_label { grid-column: 2; }
	.contact_value { grid-column: 2; }
	.contact_copy { grid-column: 2; justify-self: start; margin-top: 0.375rem; }
}


/* ==================================================== MODALS / POPUPS ==== */
/*
	Every popup on this board goes through jquery-modal, which ships inside
	jscripts/jquery.plugins.min.js: the quick login, add reputation, view
	notes, get IP, "who posted", and every yes/no confirm MyBB.prompt draws.

	The plugin carries no CSS of its own - each theme carries it, and this one
	never did. The plugin still ran without it, which is what made the bug
	look so strange: on open it moves the panel to the end of <body> and shows
	it, so the login form appeared as an ordinary block down by the footer and
	the focus call scrolled the page to it. Nothing was broken in the markup;
	the panel simply had nothing telling it to be a panel.

	These rules are that. .blocker is the fixed backdrop the plugin creates,
	.modal is the panel it moves into it, and the :before strut is how a panel
	of unknown height sits centred without knowing its own height.
*/
.blocker {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 9999;
	overflow: auto;
	padding: 1.25rem;
	box-sizing: border-box;
	background: rgba(5, 3, 4, .82);
	text-align: center;
}
.blocker:before {
	content: "";
	display: inline-block;
	height: 100%;
	vertical-align: middle;
	margin-right: -0.05em;
}
/* A second modal opened on top of the first: only the top one dims. */
.blocker.behind { background: transparent; }

/*
	display is inline-block here rather than none. The plugin opens a panel
	with jQuery's .show(), which only clears the inline display:none the
	markup carries - it does not set a display of its own unless the
	stylesheet still resolves to none. Declaring none here would make it
	guess "block", and a block panel cannot be vertically centred against
	the strut above.
*/
.modal {
	display: inline-block;
	position: relative;
	z-index: 2;
	box-sizing: border-box;
	width: 26rem;
	max-width: 100%;
	text-align: left;
	vertical-align: middle;
	background: var(--panel);
	border: 1px solid var(--edge2);
	border-radius: 0;
	box-shadow: none;
	color: var(--text);
}
/*
	Tall content scrolls inside the backdrop rather than inside the panel, so
	a long form keeps its close button reachable at the top of the scroll.
*/
.modal > table { width: 100%; }

/* The close control. The plugin writes the word "Close" into it; it is drawn
   as a mark in the panel's top right instead. */
.modal a.close-modal {
	position: absolute;
	top: 0;
	right: 0;
	width: 2rem;
	height: 2rem;
	line-height: 2rem;
	text-align: center;
	text-indent: -9999px;
	overflow: hidden;
	background: none;
	border-left: 1px solid var(--edge);
	border-bottom: 1px solid var(--edge);
	color: var(--muted);
	z-index: 3;
}
.modal a.close-modal:after {
	content: '\00d7';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	text-indent: 0;
	font-size: 1.125rem;
	line-height: 2rem;
	color: inherit;
}
.modal a.close-modal:hover { color: var(--bright); border-color: var(--red); }

/* The spinner shown while a popup's content is still being fetched. */
.modal-spinner {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	width: 4rem;
	height: 4rem;
	margin: -2rem 0 0 -2rem;
	background: var(--panel2) url(../../../images/spinner_big.gif) no-repeat center center;
	border: 1px solid var(--edge2);
	z-index: 10000;
}

/*
	MyBB.prompt's own panel - the confirm dialogs. Title bar, message, then a
	button row, matching the .thead / .trow / .tfoot rhythm the tables use.
*/
.modal_title {
	padding: 0.75rem 2.5rem 0.75rem 1rem;
	background: var(--panel2);
	border-bottom: 1px solid var(--edge);
	color: var(--bright);
	font-size: 0.75rem;
	letter-spacing: 0.0625rem;
	text-transform: uppercase;
}
.modal_message { padding: 1rem; font-size: 0.8125rem; line-height: 1.6; }
.modal_buttons {
	display: flex;
	justify-content: flex-end;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	background: var(--panel2);
	border-top: 1px solid var(--edge);
}

/*
	The quick login panel. Its markup is a table with 20px 90px cell padding
	set inline for a 400px white box; the padding is taken back so the fields
	use the panel's width on a phone.
*/
#quick_login.modal { width: 24rem; }
#quick_login .theadm {
	padding: 0.75rem 2.5rem 0.75rem 1rem !important;
	background: var(--panel2);
	border-bottom: 1px solid var(--edge);
	color: var(--bright);
	font-size: 0.75rem;
	letter-spacing: 0.0625rem;
	text-transform: uppercase;
}
#quick_login .remember_me { padding: 1rem !important; }
#quick_login .textbox { width: 100%; }
#quick_login .field { margin: 0.25rem 0 0; }
#quick_login br + br { display: none; }

/*
	The registration popup. Only the form is lifted out of the register page,
	not the <style> block in its head that makes the two columns - so inside
	the popup the fieldsets stack in one column, which is what a popup wants
	anyway. It is sized for one column accordingly.
*/
.csg_register.modal { width: 34rem; }
.csg_register #mwrapper { margin: 0; padding: 1rem; }
.csg_register .mcolumn-half { float: none; width: auto; padding: 0; }
.csg_register fieldset { margin-bottom: 0.75rem; }
.csg_register fieldset:last-child { margin-bottom: 0; }
.csg_register .textbox, .csg_register select { width: 100% !important; }
.csg_register > form > div:last-child { padding: 0 1rem 1rem; text-align: center; }

@media (max-width: 40rem) {
	.blocker { padding: 0.625rem; }
	#quick_login.modal, .csg_register.modal { width: 100%; }
}

/*
	Standalone pages - the maintenance / awaiting-activation / error screens -
	print one centred card and no #content, #mainwidth or #footer at all. On a
	1440-tall screen that card sat under the top edge with the rest of the
	page empty, so the body itself centres it.
*/
body:not(:has(#content, #mainwidth, #footer)) {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem 1rem;
	box-sizing: border-box;
}
body:not(:has(#content, #mainwidth, #footer)) > br { display: none; }
body:not(:has(#content, #mainwidth, #footer)) > div[align="center"] {
	width: 100% !important;
	max-width: 34rem;
	margin: 0 !important;
}
body:not(:has(#content, #mainwidth, #footer)) .tborder { width: 100%; }
body:not(:has(#content, #mainwidth, #footer)) .trow1,
body:not(:has(#content, #mainwidth, #footer)) .trow2 { padding: 0.875rem 1rem; }

/* ------------------------------------------------------ sticky footer --- */
/*
	A short page - a one-line search result, an empty forum, a profile with no
	signature - left the footer floating halfway up the screen with the
	background photo below it.

	The body is a column instead: it is at least as tall as the viewport, and
	the footer takes the leftover space above it as a top margin, so it sits
	on the bottom edge when the page is short and scrolls away normally when
	it is not. This is a sticky footer, not a fixed one - nothing overlaps the
	content and nothing is pinned over the page while you scroll.

	Guarded on :has(> #footer) so the standalone screens above, which have no
	footer and do their own centring, are not turned into columns as well.
*/
/*
	The footer is three levels down - body > #mainwidth > .container > #footer -
	so the height has to be handed down that chain: each box is a column that
	takes the space its parent gives it, and the footer's auto top margin eats
	whatever is left at the end.
*/
body:has(#footer) {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
body:has(#footer) > #mainwidth,
body:has(#footer) > .mwrapper {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
body:has(#footer) #mainwidth > .container:has(> #footer),
body:has(#footer) .mwrapper > .container:has(> #footer) {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}
/*
	Nothing else is allowed to stretch - a flex item with the default
	`align-self: stretch` is fine sideways, but `flex: 0 0 auto` keeps every
	box at its own content height so only the margin below moves.
*/
body:has(#footer) > #mainwidth > .container > *,
body:has(#footer) > .mwrapper > .container > * { flex: 0 0 auto; }
/*
	templates_funky.css gives #footer a 1rem top margin and loads after this
	sheet, so the auto has to be selected more specifically than a bare id to
	win. The 1rem is what keeps the footer off the content on a long page; on
	a short one auto is larger and replaces it.
*/
body:has(#footer) .container > #footer { margin-top: auto; }