/* ==========================================================================
   HotGames4u for MyBB 1.8.41 — hg-core.css (global)
   Loads after MyBB's stock global.css/css3.css (inherited from "Default"),
   so every rule here only has to win on order or matching specificity.

   01 Tokens        05 Breadcrumbs     09 Forms & buttons   13 Modals & popups
   02 Base          06 Containers      10 Pagination        14 Alerts & notices
   03 Layout        07 Tables          11 MyCode            15 Footer
   04 Header & nav  08 Status icons    12 Misc helpers      16 Motion
   ========================================================================== */

/* 01 Tokens ---------------------------------------------------------------- */

:root {
	--hg-bg: #0f0f14;
	--hg-bg-2: #13131a;
	--hg-surface: #191a22;
	--hg-surface-2: #1f2029;
	--hg-surface-3: #272833;
	--hg-surface-4: #30313e;
	--hg-line: #2a2b37;
	--hg-line-soft: rgba(255, 255, 255, 0.055);

	--hg-text: #e7e7ef;
	--hg-text-2: #b9b9c8;
	--hg-muted: #8c8c9f;
	--hg-faint: #686879;

	--hg-pink: #ff2e88;
	--hg-pink-text: #ff6aa9;
	--hg-pink-strong: #d8186f;
	--hg-violet: #8b3dff;
	--hg-violet-text: #b38bff;
	--hg-grad: linear-gradient(135deg, #ff2e88 0%, #8b3dff 100%);
	--hg-grad-btn: linear-gradient(135deg, #d8186f 0%, #7b2ff0 100%);
	--hg-pink-soft: rgba(255, 46, 136, 0.12);
	--hg-violet-soft: rgba(139, 61, 255, 0.14);

	--hg-green: #3ddc97;
	--hg-amber: #f7b538;
	--hg-red: #ff5a6a;
	--hg-blue: #5ab0ff;

	--hg-radius-sm: 6px;
	--hg-radius: 10px;
	--hg-radius-lg: 14px;
	--hg-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 10px 30px -18px rgba(0, 0, 0, 0.9);
	--hg-glow: 0 0 0 1px rgba(255, 46, 136, 0.45), 0 8px 26px -10px rgba(255, 46, 136, 0.6);

	--hg-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--hg-font-display: "Sora", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--hg-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;

	--hg-header-h: 60px;
	--hg-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* 02 Base ------------------------------------------------------------------ */

html { color-scheme: dark; scroll-padding-top: calc(var(--hg-header-h) + 12px); }

body {
	background: var(--hg-bg);
	background-image:
		radial-gradient(1100px 420px at 100% -120px, rgba(139, 61, 255, 0.10), transparent 70%),
		radial-gradient(900px 380px at -10% -140px, rgba(255, 46, 136, 0.09), transparent 70%);
	background-repeat: no-repeat;
	color: var(--hg-text);
	font-family: var(--hg-font);
	font-size: 14px;
	line-height: 1.5;
	text-align: left;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

#container {
	color: var(--hg-text);
	font-family: var(--hg-font);
	font-size: 14px;
	line-height: 1.5;
	min-width: 0;
}

a:link,
a:visited { color: var(--hg-pink-text); text-decoration: none; transition: color 0.15s var(--hg-ease); }
a:hover,
a:active { color: #ff9cc6; text-decoration: none; }

strong, b { font-weight: 650; }

h1, h2, h3, h4 { font-family: var(--hg-font-display); color: #fff; letter-spacing: -0.01em; }

::selection { background: rgba(255, 46, 136, 0.4); color: #fff; }

:focus-visible { outline: 2px solid var(--hg-pink); outline-offset: 2px; }

* { scrollbar-width: thin; scrollbar-color: #363746 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #33343f; border-radius: 10px; border: 2px solid var(--hg-bg); }
::-webkit-scrollbar-thumb:hover { background: var(--hg-pink-strong); }

hr { border: 0; border-top: 1px solid var(--hg-line); height: 0; }

.post_body img, .signature img, .scaleimages img { max-width: 100%; }

/* MyBB's default avatar is a white silhouette on white; tint it for the dark UI everywhere */
img[src*="default_avatar"] { filter: invert(0.9) hue-rotate(180deg) brightness(0.55); border-radius: 10px; }

.hg-skip {
	position: absolute;
	left: -9999px;
	top: 8px;
	z-index: 10001;
	background: var(--hg-pink-strong);
	color: #fff !important;
	padding: 8px 14px;
	border-radius: var(--hg-radius-sm);
}
.hg-skip:focus { left: 12px; }

/* 03 Layout ---------------------------------------------------------------- */

.wrapper {
	width: auto;
	min-width: 0;
	max-width: 1360px;
	margin: 0 auto;
	padding: 0 20px;
	box-sizing: border-box;
}

#content {
	background: transparent;
	padding: 18px 0 32px;
	overflow: visible;
}

.hg-columns {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 20px;
	align-items: start;
}
.hg-columns__side { position: sticky; top: calc(var(--hg-header-h) + 16px); }

/* Pagination + primary action bar above/below lists and threads */
.hg-listbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0 0 12px;
}
.hg-listbar--bottom { margin: 12px 0 18px; }
.hg-listbar .float_left,
.hg-listbar .float_right { float: none; margin: 0 !important; padding: 0 !important; }
.hg-listbar .float_right { margin-left: auto !important; }

.float_left { float: left; }
.float_right { float: right; }
.clear { clear: both; }

/* 04 Header & navigation -------------------------------------------------- */

#header.hg-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: rgba(15, 15, 20, 0.86);
	-webkit-backdrop-filter: saturate(150%) blur(14px);
	backdrop-filter: saturate(150%) blur(14px);
	border-bottom: 1px solid var(--hg-line);
}

#header.hg-header::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 1px;
	background: linear-gradient(90deg, transparent 0%, rgba(255, 46, 136, 0.75) 25%, rgba(139, 61, 255, 0.75) 75%, transparent 100%);
	pointer-events: none;
}

.hg-topbar__inner {
	display: flex;
	align-items: center;
	gap: 18px;
	height: var(--hg-header-h);
}

#logo.hg-logo {
	background: none;
	padding: 0;
	border: 0;
	flex: 0 0 auto;
}
#logo.hg-logo a { display: flex; align-items: center; }
#logo.hg-logo img { display: block; height: 36px; width: auto; }

.hg-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--hg-radius);
	border: 1px solid var(--hg-line);
	background: var(--hg-surface);
	color: var(--hg-text);
	font-size: 16px;
	cursor: pointer;
}
.hg-burger { display: none; }

/* Main nav tabs */
.hg-nav {
	flex: 1 1 auto;
	min-width: 0;
	align-self: stretch;
	display: flex;
	align-items: center;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
}
.hg-nav::-webkit-scrollbar { display: none; }

#header ul.menu { margin: 0; padding: 0; list-style: none; }
#header ul.menu li { margin: 0; display: block; }

#header ul.menu.hg-nav__list { display: flex; align-items: stretch; gap: 2px; height: 100%; }
#header ul.menu.hg-nav__list > li { display: flex; align-items: center; position: relative; }

#header ul.menu.hg-nav__list li a,
#header ul.menu.hg-nav__list li a:link,
#header ul.menu.hg-nav__list li a:visited {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 10px;
	background: none;
	border-radius: var(--hg-radius-sm);
	color: var(--hg-text-2);
	font-weight: 600;
	font-size: 13.5px;
	white-space: nowrap;
	transition: color 0.15s var(--hg-ease), background-color 0.15s var(--hg-ease);
}
#header ul.menu.hg-nav__list li a i { color: var(--hg-muted); font-size: 13px; transition: color 0.15s var(--hg-ease); }

#header ul.menu.hg-nav__list li a:hover {
	color: #fff;
	background: var(--hg-surface-2);
}
#header ul.menu.hg-nav__list li a:hover i { color: var(--hg-pink); }

/* Highlight the tab of the current script */
.hg-page--index #header ul.menu .hg-nav__home a,
.hg-page--forumdisplay #header ul.menu .hg-nav__home a,
.hg-page--showthread #header ul.menu .hg-nav__home a {
	color: #fff;
}
.hg-page--index #header ul.menu .hg-nav__home a::after,
.hg-page--forumdisplay #header ul.menu .hg-nav__home a::after,
.hg-page--showthread #header ul.menu .hg-nav__home a::after {
	content: "";
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 0;
	height: 3px;
	border-radius: 3px 3px 0 0;
	background: var(--hg-grad);
	box-shadow: 0 0 12px rgba(255, 46, 136, 0.7);
}
.hg-page--index #header ul.menu .hg-nav__home i,
.hg-page--forumdisplay #header ul.menu .hg-nav__home i,
.hg-page--showthread #header ul.menu .hg-nav__home i { color: var(--hg-pink); }

@media (max-width: 1440px) {
	#header ul.menu.hg-nav__list li a i { display: none; }
	.hg-search { flex-basis: 220px; }
}

/* The search page has its own form, so the search tab is redundant next to the box */
#header ul.menu .hg-nav__search { display: none; }

/* Quick search */
.hg-search { flex: 0 1 260px; min-width: 160px; }

#search,
#header #search {
	position: relative;
	border: 0;
	padding: 0;
	margin: 0;
	float: none;
}

.hg-quicksearch__icon {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--hg-muted);
	font-size: 13px;
	pointer-events: none;
}

#search input.textbox,
#header #search input.textbox {
	width: 100%;
	box-sizing: border-box;
	height: 38px;
	padding: 0 12px 0 34px;
	background: var(--hg-bg-2);
	border: 1px solid var(--hg-line);
	border-radius: 999px;
	color: var(--hg-text);
	font-size: 13.5px;
	transition: border-color 0.18s var(--hg-ease), box-shadow 0.18s var(--hg-ease), background-color 0.18s var(--hg-ease);
}
#search input.textbox:focus {
	border-color: var(--hg-pink);
	background: var(--hg-surface);
	box-shadow: 0 0 0 3px rgba(255, 46, 136, 0.18);
	outline: 0;
}
#search input.button {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

/* Account area */
#panel.hg-account {
	flex: 0 0 auto;
	background: none;
	border: 0;
	color: var(--hg-text);
}
.hg-account__inner { display: flex; align-items: center; gap: 8px; }

.hg-guest { display: flex; align-items: center; gap: 8px; }
.hg-guest__hello { color: var(--hg-muted); font-size: 13px; margin-right: 4px; white-space: nowrap; }
@media (max-width: 1440px) {
	.hg-guest__hello { display: none; }
}

.hg-quicklinks { display: flex; align-items: center; gap: 2px; }
#header ul.menu.hg-quicklinks li a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	position: relative;
	height: 38px;
	padding: 0 10px;
	background: none;
	border-radius: var(--hg-radius-sm);
	color: var(--hg-text-2);
	font-size: 15px;
}
#header ul.menu.hg-quicklinks li a span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
#header ul.menu.hg-quicklinks li a:hover { background: var(--hg-surface-2); color: #fff; }

.hg-badge--count {
	position: absolute;
	top: 4px;
	right: 2px;
	min-width: 17px;
	height: 17px;
	padding: 0 4px;
	box-sizing: border-box;
	border-radius: 999px;
	background: var(--hg-grad);
	color: #fff;
	font-size: 10.5px;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
	box-shadow: 0 0 0 2px var(--hg-bg), 0 0 10px rgba(255, 46, 136, 0.65);
}
.hg-badge--count[data-count="0"] { display: none; }

.hg-usermenu { position: relative; }

.hg-usermenu__toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 10px 0 4px;
	border: 1px solid var(--hg-line);
	border-radius: 999px;
	background: var(--hg-surface);
	color: var(--hg-text);
	font: 600 13.5px var(--hg-font);
	cursor: pointer;
	transition: border-color 0.18s var(--hg-ease), background-color 0.18s var(--hg-ease);
}
.hg-usermenu__toggle:hover,
.hg-usermenu__toggle[aria-expanded="true"] { border-color: rgba(255, 46, 136, 0.5); background: var(--hg-surface-2); }
.hg-usermenu__caret { font-size: 10px; color: var(--hg-muted); transition: transform 0.2s var(--hg-ease); }
.hg-usermenu__toggle[aria-expanded="true"] .hg-usermenu__caret { transform: rotate(180deg); }
.hg-usermenu__name { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Initial-letter avatar (username's first letter, rest hidden) */
.hg-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--hg-grad);
	color: #fff;
	overflow: hidden;
}
.hg-avatar--sm { width: 30px; height: 30px; }
/* Only the first letter of the username is shown */
.hg-avatar__initial {
	display: block;
	font-size: 0;
	line-height: 0;
	color: transparent;
}
.hg-avatar__initial::first-letter {
	font: 700 14px/1 var(--hg-font-display);
	color: #fff;
	text-transform: uppercase;
}

/* Dropdown panels (user menu, mobile nav) */
.hg-usermenu__panel {
	position: absolute;
	right: 0;
	top: calc(100% + 10px);
	width: 280px;
	padding: 8px;
	background: rgba(25, 26, 34, 0.98);
	border: 1px solid var(--hg-line);
	border-radius: var(--hg-radius-lg);
	box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(0, 0, 0, 0.4);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.18s var(--hg-ease), transform 0.18s var(--hg-ease), visibility 0s linear 0.18s;
	z-index: 1001;
}
.hg-usermenu__panel.is-open,
html:not(.hg-js) .hg-usermenu:focus-within .hg-usermenu__panel {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity 0.18s var(--hg-ease), transform 0.18s var(--hg-ease);
}
.hg-usermenu__welcome {
	padding: 10px 12px 12px;
	margin-bottom: 6px;
	border-bottom: 1px solid var(--hg-line);
	color: var(--hg-muted);
	font-size: 12.5px;
	line-height: 1.5;
}
.hg-usermenu__welcome strong { color: #fff; font-size: 13.5px; }
.hg-usermenu__welcome a { color: var(--hg-pink-text); }

#header ul.menu.hg-usermenu__links { display: block; }
#header ul.menu.hg-usermenu__links li a,
.hg-usermenu__logout {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	border-radius: var(--hg-radius-sm);
	background: none;
	color: var(--hg-text-2) !important;
	font-weight: 500;
}
#header ul.menu.hg-usermenu__links li a i,
.hg-usermenu__logout i { width: 16px; text-align: center; color: var(--hg-muted); }
#header ul.menu.hg-usermenu__links li a:hover,
.hg-usermenu__logout:hover { background: var(--hg-pink-soft); color: #fff !important; }
#header ul.menu.hg-usermenu__links li a:hover i,
.hg-usermenu__logout:hover i { color: var(--hg-pink); }
.hg-usermenu__logout { margin-top: 6px; border-top: 1px solid var(--hg-line); border-radius: 0 0 var(--hg-radius-sm) var(--hg-radius-sm); padding-top: 12px; }

/* 05 Breadcrumbs ----------------------------------------------------------- */

.navigation.hg-breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0 0 16px;
	padding: 10px 14px;
	background: var(--hg-surface);
	border: 1px solid var(--hg-line);
	border-radius: var(--hg-radius);
	color: var(--hg-muted);
	font-size: 13px;
}
.hg-breadcrumbs__home { color: var(--hg-pink); font-size: 12px; margin-right: 2px; }
.navigation a:link,
.navigation a:visited { color: var(--hg-text-2); font-weight: 500; }
.navigation a:hover { color: #fff; }
.navigation .active { color: #fff; font-size: 13px; font-weight: 600; }
.hg-crumb-sep { font-size: 9px; color: var(--hg-faint); margin: 0 2px; }
.navigation .hg-crumb-sep + br { display: none; }
#breadcrumb_multipage { filter: invert(1) opacity(0.6); vertical-align: middle; cursor: pointer; }

/* 06 Containers ------------------------------------------------------------ */

.tborder {
	background: var(--hg-surface);
	border: 1px solid var(--hg-line);
	border-radius: var(--hg-radius-lg);
	box-shadow: var(--hg-shadow);
	padding: 0;
	margin: 0 0 18px;
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}
.tborder + br { display: none; }

.thead {
	background: linear-gradient(180deg, #242532 0%, #1d1e28 100%);
	color: #fff;
	border-bottom: 1px solid var(--hg-line);
	padding: 12px 16px;
	font-family: var(--hg-font-display);
	font-size: 14.5px;
	position: relative;
}
.thead::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background: var(--hg-grad);
}
.thead strong { font-weight: 700; }
.thead a:link,
.thead a:visited { color: #fff; }
.thead a:hover { color: var(--hg-pink-text); }
.thead .smalltext { font-family: var(--hg-font); color: var(--hg-muted); font-weight: 400; font-size: 12.5px; }
.thead_collapsed { border-radius: var(--hg-radius-lg); border-bottom: 0; }

.tborder thead tr:first-child td:first-child,
.tborder tbody:first-child tr:first-child td:first-child { border-top-left-radius: 0; }

.tcat {
	background: var(--hg-bg-2);
	color: var(--hg-muted);
	border-bottom: 1px solid var(--hg-line);
	padding: 8px 16px;
	font-size: 11.5px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.tcat a:link,
.tcat a:visited { color: var(--hg-text-2); }
.tcat a:hover { color: #fff; }
.tcat .smalltext { font-size: 11.5px; }

.trow1,
.trow2 {
	background: var(--hg-surface);
	border: 0;
	border-bottom: 1px solid var(--hg-line-soft);
	color: var(--hg-text);
}
.trow2 { background: #1b1c25; }
.trow_shaded { background: #2a1a24; }
.trow_sep { background: var(--hg-surface-3); color: var(--hg-text-2); font-weight: 600; padding: 6px 16px; }
tr.trow_selected td,
.trow_selected { background: #2b1b2b !important; }
.trow_selected a:link,
.trow_selected a:visited { color: #ff9cc6; }

.tfoot {
	background: var(--hg-bg-2);
	color: var(--hg-muted);
	border-top: 1px solid var(--hg-line);
	padding: 10px 16px;
}
.tfoot a:link,
.tfoot a:visited { color: var(--hg-text-2); }
.tfoot a:hover { color: #fff; }

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

td, th { padding: 10px 16px; }
table { color: var(--hg-text); font-size: 14px; }

.smalltext { font-size: 12.5px; color: inherit; }
.largetext { font-size: 16px; font-weight: 600; }

/* Collapse chevrons drawn in CSS; the stock PNG stays in the DOM for MyBB's JS */
.expcolimage {
	float: right;
	position: relative;
	width: 26px;
	height: 26px;
	margin: -3px -6px 0 8px;
	border-radius: var(--hg-radius-sm);
}
.expcolimage::before {
	content: "\f077";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	color: var(--hg-muted);
	pointer-events: none;
	transition: transform 0.2s var(--hg-ease), color 0.15s;
}
.thead_collapsed .expcolimage::before,
.tcat_collapse_collapsed .expcolimage::before { transform: rotate(180deg); }
.expcolimage:hover { background: rgba(255, 255, 255, 0.06); }
.expcolimage:hover::before { color: #fff; }
.expcolimage img.expander { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

/* 07 Generic tables inside panels ----------------------------------------- */

.tborder td.trow1 > strong,
.tborder td.trow2 > strong { color: #fff; }

fieldset {
	border: 1px solid var(--hg-line);
	border-radius: var(--hg-radius);
	padding: 12px 14px;
	margin: 0 0 12px;
	background: rgba(255, 255, 255, 0.015);
}
fieldset.trow1,
fieldset.trow2 { border-color: var(--hg-line); }
legend { color: #fff; font-weight: 600; padding: 0 6px; }

/* 08 Status icons (CSS + Font Awesome, replacing the stock sprites) ------- */

.forum_status {
	position: relative;
	width: 40px;
	height: 40px;
	background: var(--hg-surface-3) none;
	border-radius: 11px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.2s var(--hg-ease), box-shadow 0.2s var(--hg-ease);
}
.forum_status::before {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	content: "\f086";
	font-size: 16px;
	color: var(--hg-faint);
}
.forum_status.forum_on {
	background: var(--hg-grad);
	box-shadow: 0 6px 18px -6px rgba(255, 46, 136, 0.75);
	cursor: pointer;
}
.forum_status.forum_on::before { color: #fff; }
.forum_status.forum_offclose::before { content: "\f023"; }
.forum_status.forum_offlink::before { content: "\f35d"; }

.subforumicon {
	width: 8px;
	height: 8px;
	margin: 0 6px 0 0;
	background: var(--hg-faint) none;
	border-radius: 50%;
	vertical-align: middle;
}
.subforum_minion { background: var(--hg-pink); box-shadow: 0 0 6px var(--hg-pink); }
.subforum_minioffclose { background: transparent; border: 1px solid var(--hg-faint); box-sizing: border-box; }
.subforum_miniofflink { background: var(--hg-violet-text); }

.thread_status {
	width: 30px;
	height: 30px;
	background: var(--hg-surface-3) none;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	vertical-align: middle;
}
.thread_status::before {
	font-family: "Font Awesome 6 Free";
	font-weight: 400;
	content: "\f27a";
	font-size: 13px;
	color: var(--hg-faint);
}
.thread_status[class*="new"] { background: var(--hg-pink-soft); box-shadow: inset 0 0 0 1px rgba(255, 46, 136, 0.55); }
.thread_status[class*="new"]::before { font-weight: 900; color: var(--hg-pink); }
.thread_status[class*="hot"]::before { content: "\f06d"; font-weight: 900; color: var(--hg-amber); }
.thread_status[class*="newhot"]::before { color: var(--hg-pink); }
.thread_status[class*="close"]::before { content: "\f023"; font-weight: 900; }
.thread_status.movefolder::before { content: "\f061"; font-weight: 900; }
/* "You posted here" marker */
.thread_status[class*="dot_"]::after {
	content: "";
	position: absolute;
	right: -1px;
	bottom: -1px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--hg-violet);
	box-shadow: 0 0 0 2px var(--hg-surface);
}

.forum_legend,
.thread_legend { color: var(--hg-muted); }
.forum_legend dt .forum_status { width: 26px; height: 26px; border-radius: 8px; }
.forum_legend dt .forum_status::before { font-size: 11px; }
.thread_legend dd .thread_status { width: 22px; height: 22px; margin-right: 4px; }
.thread_legend dd .thread_status::before { font-size: 10px; }

/* 09 Forms & buttons ------------------------------------------------------- */

input.textbox,
textarea,
select,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="url"],
input[type="search"] {
	background: var(--hg-bg-2);
	color: var(--hg-text);
	border: 1px solid var(--hg-line);
	border-radius: var(--hg-radius-sm);
	padding: 8px 10px;
	font: 14px var(--hg-font);
	outline: 0;
	transition: border-color 0.18s var(--hg-ease), box-shadow 0.18s var(--hg-ease);
	max-width: 100%;
	box-sizing: border-box;
}
select { padding: 7px 8px; }
textarea { line-height: 1.6; }
input.textbox:focus,
textarea:focus,
select:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus {
	border-color: var(--hg-pink);
	box-shadow: 0 0 0 3px rgba(255, 46, 136, 0.18);
}
input::placeholder,
textarea::placeholder { color: var(--hg-faint); }
input.error,
textarea.error,
select.error { border-color: var(--hg-red); background: rgba(255, 90, 106, 0.08); }
input.valid,
textarea.valid,
select.valid { border-color: var(--hg-green); }
label.error { color: var(--hg-red); font-size: 12.5px; }
input[type="checkbox"],
input[type="radio"] { accent-color: var(--hg-pink); }

/* Buttons: <input class="button">, <button>, and MyBB's <a class="button"> */
input.button,
button.button,
.hg-btn,
a.button:link,
a.button:visited,
a.button:hover,
a.button:active {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	padding: 8px 16px;
	min-height: 36px;
	box-sizing: border-box;
	background: var(--hg-surface-3) none;
	border: 1px solid var(--hg-surface-4);
	border-radius: var(--hg-radius-sm);
	color: #fff;
	font: 600 13.5px var(--hg-font);
	text-decoration: none;
	cursor: pointer;
	transition: filter 0.18s var(--hg-ease), background-color 0.18s var(--hg-ease), border-color 0.18s var(--hg-ease), transform 0.12s var(--hg-ease), box-shadow 0.2s var(--hg-ease);
}
input.button:hover,
button.button:hover,
.hg-btn:hover,
a.button:hover {
	background-color: var(--hg-surface-4);
	border-color: #3d3e4c;
	color: #fff;
}
input.button:active,
a.button:active,
.hg-btn:active { transform: translateY(1px); }

/* Primary actions: submit buttons, new thread / reply, register */
input.button[type="submit"],
.hg-btn--primary,
a.button.new_thread_button,
a.button.new_reply_button,
#quick_reply_submit {
	background: var(--hg-grad-btn);
	border-color: transparent;
	box-shadow: 0 8px 22px -12px rgba(216, 24, 111, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
input.button[type="submit"]:hover,
.hg-btn--primary:hover,
a.button.new_thread_button:hover,
a.button.new_reply_button:hover,
#quick_reply_submit:hover {
	background: var(--hg-grad-btn);
	filter: brightness(1.12);
	border-color: transparent;
	box-shadow: 0 10px 28px -10px rgba(216, 24, 111, 1), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
/* Secondary submit buttons (Preview, Cancel...) */
input.button[name="previewpost"],
input.button[name="preview"],
input.button[name="savedraft"] {
	background: var(--hg-surface-3) none;
	border-color: var(--hg-surface-4);
	box-shadow: none;
}

.hg-btn--ghost,
.hg-btn--ghost:link,
.hg-btn--ghost:visited {
	background: transparent;
	border-color: var(--hg-line);
	color: var(--hg-text) !important;
}
.hg-btn--ghost:hover { background: var(--hg-surface-2); border-color: var(--hg-surface-4); }
.hg-btn--primary,
.hg-btn--primary:link,
.hg-btn--primary:visited { color: #fff !important; }

/* <a class="button"> icon sprites → Font Awesome */
a.button span {
	background: none;
	padding: 0;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: auto;
}
a.button span::before {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 12px;
}
a.button.new_thread_button span::before { content: "\f067"; }
a.button.new_reply_button span::before { content: "\f3e5"; }
a.button.closed_button span::before { content: "\f023"; }
a.button.rate_user_button span::before { content: "\f005"; }
a.button.add_buddy_button span::before { content: "\f234"; }
a.button.remove_buddy_button span::before { content: "\f503"; }
a.button.add_ignore_button span::before { content: "\f05e"; }
a.button.remove_ignore_button span::before { content: "\f00c"; }
a.button.report_user_button span::before { content: "\f024"; }
a.button.small_button { min-height: 28px; padding: 4px 10px; font-size: 12.5px; }
a.button.closed_button { background: var(--hg-surface-3); box-shadow: none; color: var(--hg-muted); }

.editor_control_bar { background: var(--hg-surface-2); border: 1px solid var(--hg-line); border-radius: var(--hg-radius-sm); color: var(--hg-text-2); }

/* 10 Pagination ------------------------------------------------------------ */

.pagination {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	padding: 6px 0;
	margin: 0;
	font-size: 13px;
	color: var(--hg-muted);
}
.pagination .pages { font-weight: 600; margin-right: 4px; color: var(--hg-muted); }
.pagination a,
.pagination .pagination_current {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 32px;
	height: 32px;
	padding: 0 9px;
	box-sizing: border-box;
	border-radius: var(--hg-radius-sm);
	font-weight: 600;
}
.pagination a:link,
.pagination a:visited {
	background: var(--hg-surface);
	border: 1px solid var(--hg-line);
	color: var(--hg-text-2);
}
.pagination a:hover {
	background: var(--hg-surface-3);
	border-color: rgba(255, 46, 136, 0.5);
	color: #fff;
	text-decoration: none;
}
.pagination .pagination_current {
	background: var(--hg-grad-btn);
	border: 1px solid transparent;
	color: #fff;
	box-shadow: 0 6px 16px -8px rgba(216, 24, 111, 0.9);
}
.pagination .go_page img { filter: invert(1) opacity(0.6); vertical-align: middle; }
.drop_go_page { background: var(--hg-surface-2); border: 1px solid var(--hg-line); border-radius: var(--hg-radius-sm); padding: 6px; }
.tcat .pagination a,
.tcat .pagination .pagination_current { min-width: 24px; height: 24px; }

/* 11 MyCode: quotes, code, spoilers --------------------------------------- */

blockquote,
.mycode_quote {
	background: var(--hg-bg-2);
	border: 1px solid var(--hg-line);
	border-left: 3px solid var(--hg-pink);
	border-radius: var(--hg-radius-sm);
	margin: 10px 0;
	padding: 10px 14px;
	color: var(--hg-text-2);
}
blockquote cite {
	display: block;
	border-bottom: 1px solid var(--hg-line);
	margin: -2px 0 8px;
	padding-bottom: 6px;
	font-style: normal;
	font-weight: 600;
	color: #fff;
}
blockquote cite > span { color: var(--hg-muted); font-weight: 400; float: right; font-size: 12px; }
blockquote cite span.highlight { color: var(--hg-pink-text); }
blockquote cite a { color: var(--hg-pink-text); }

.codeblock {
	background: #0b0b10;
	border: 1px solid var(--hg-line);
	border-radius: var(--hg-radius);
	padding: 0;
	margin: 10px 0;
	overflow: hidden;
}
.codeblock .title {
	background: var(--hg-surface-2);
	border-bottom: 1px solid var(--hg-line);
	color: var(--hg-muted);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0;
	padding: 7px 12px;
}
.codeblock code,
.codeblock .body {
	display: block;
	padding: 10px 12px;
	color: #ffd1e6;
	font: 13px/1.6 var(--hg-font-mono);
	overflow: auto;
	max-height: 420px;
}
.mycode_url { word-break: break-word; }
.mycode_hr { border-top-color: var(--hg-line); }

/* 12 Misc helpers ---------------------------------------------------------- */

.highlight { background: rgba(255, 46, 136, 0.3); color: #fff; padding: 0 2px; border-radius: 3px; }
.subject_new { font-weight: 700; }
.online { color: var(--hg-green); }
.offline { color: var(--hg-faint); }
.reputation_positive { color: var(--hg-green); }
.reputation_neutral { color: var(--hg-muted); }
.reputation_negative { color: var(--hg-red); }
.trow_reputation_positive { background: rgba(61, 220, 151, 0.07); }
.trow_reputation_negative { background: rgba(255, 90, 106, 0.07); }
.high_warning, .high_banned { color: var(--hg-red); }
.moderate_warning, .moderate_banned { color: var(--hg-amber); }
.low_warning, .low_banned { color: #ffd166; }
.imminent_banned { color: var(--hg-red); font-weight: 700; }
.smilie { vertical-align: middle; }
/* Stock dark-on-light utility icons (print, send...) that remain in a few core templates */
img[src$="/printable.png"],
img[src$="/send.png"] { filter: invert(1) opacity(0.75); vertical-align: middle; }
.separator { color: var(--hg-faint); }
.selectall { background: var(--hg-pink-soft); color: var(--hg-text); }

.hg-prefix,
.thread_prefix {
	display: inline-block;
	padding: 1px 8px;
	margin-right: 6px;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	letter-spacing: 0.02em;
	vertical-align: 1px;
	background: var(--hg-surface-4);
	color: #fff;
}
.hg-prefix--vn { background: #7b2ff0; }
.hg-prefix--renpy { background: #d8186f; }
.hg-prefix--unity { background: #3a3d4d; }
.hg-prefix--rpgm { background: #1f8a5b; }
.hg-prefix--completed { background: #0d7fd1; }
.hg-prefix--mod { background: #c4661f; }
.hg-prefix--abandoned { background: #5a5a66; }
.hg-prefix--onhold { background: #8a6d00; }

/* Inline moderation & quick jump selects */
.quick_jump { filter: invert(1) opacity(0.7); }
.float_right select,
.float_left select { max-width: 100%; }

/* 13 Modals, popups, notifications --------------------------------------- */

.blocker { background: rgba(5, 5, 9, 0.78); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); z-index: 10000; }

.modal {
	background: var(--hg-surface);
	color: var(--hg-text);
	border: 1px solid var(--hg-line);
	border-radius: var(--hg-radius-lg);
	box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(255, 46, 136, 0.08);
	padding: 0;
	overflow: hidden;
	text-align: left;
}
.modal .tborder { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.modal a.close-modal {
	top: 10px;
	right: 10px;
	width: 30px;
	height: 30px;
	background: none;
	border-radius: var(--hg-radius-sm);
	text-indent: 0;
	font-size: 0;
}
.modal a.close-modal::before {
	content: "\f00d";
	font: 900 15px "Font Awesome 6 Free";
	color: var(--hg-muted);
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}
.modal a.close-modal:hover { background: rgba(255, 255, 255, 0.07); }
.modal a.close-modal:hover::before { color: #fff; }
#quick_login .remember_me input { vertical-align: middle; margin: 0 6px 0 0; }

.popup_menu {
	background: rgba(25, 26, 34, 0.98);
	border: 1px solid var(--hg-line);
	border-radius: var(--hg-radius);
	box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.9);
	padding: 6px;
	overflow: hidden;
}
.popup_menu .popup_item_container,
.popup_menu .popup_item_container:first-child .popup_item,
.popup_menu .popup_item_container:last-child .popup_item { margin: 0; border-radius: var(--hg-radius-sm); }
.popup_menu .popup_item {
	background: transparent;
	color: var(--hg-text-2);
	padding: 8px 12px;
	border-radius: var(--hg-radius-sm);
}
.popup_menu .popup_item:hover,
.popup_menu a.popup_item:hover { background: var(--hg-pink-soft); color: #fff; text-decoration: none; }

.jGrowl .jGrowl-notification,
.jGrowl .jGrowl-closer {
	background: rgba(25, 26, 34, 0.98);
	color: var(--hg-text);
	border: 1px solid var(--hg-line);
	border-radius: var(--hg-radius);
	box-shadow: 0 16px 40px -18px rgba(0, 0, 0, 0.9);
	opacity: 1;
}
.jGrowl .jGrowl-notification.jgrowl_success { border-left: 3px solid var(--hg-green); background: rgba(25, 26, 34, 0.98); }
.jGrowl .jGrowl-notification.jgrowl_error { border-left: 3px solid var(--hg-red); background: rgba(25, 26, 34, 0.98); }
.jGrowl .jGrowl-notification.jgrowl_process,
.jGrowl .jGrowl-closer { border-left: 3px solid var(--hg-pink); background: rgba(25, 26, 34, 0.98); }

div.jqi {
	background: var(--hg-surface);
	color: var(--hg-text);
	border: 1px solid var(--hg-line);
	border-radius: var(--hg-radius-lg);
	box-shadow: 0 30px 80px -24px rgba(0, 0, 0, 0.95);
}
div.jqi .jqititle { background: var(--hg-surface-2); color: #fff; border-bottom: 1px solid var(--hg-line); font-weight: 600; }
div.jqi .jqimessage { color: var(--hg-text-2); }
div.jqi .jqibuttons { background: var(--hg-bg-2); border-top: 1px solid var(--hg-line); }
div.jqi .jqibuttons button { background: var(--hg-surface-3); color: #fff; border: 1px solid var(--hg-surface-4); border-radius: var(--hg-radius-sm); }
div.jqi .jqibuttons button.jqidefaultbutton { background: var(--hg-grad-btn); border-color: transparent; color: #fff; }
div.jqi .jqiclose { color: var(--hg-muted); }

/* select2 (user/forum pickers) */
.select2-container .select2-choice,
.select2-container-multi .select2-choices,
.select2-drop {
	background: var(--hg-bg-2) !important;
	border-color: var(--hg-line) !important;
	color: var(--hg-text) !important;
	border-radius: var(--hg-radius-sm) !important;
	box-shadow: none !important;
}
.select2-results .select2-highlighted { background: var(--hg-pink-strong) !important; color: #fff !important; }
.select2-container-multi .select2-choices .select2-search-choice { background: var(--hg-surface-3) !important; border-color: var(--hg-surface-4) !important; color: #fff !important; box-shadow: none !important; }
.select2-search input { background: var(--hg-bg-2) !important; color: var(--hg-text) !important; border-color: var(--hg-line) !important; }

/* 14 Alerts & notices ------------------------------------------------------ */

.pm_alert,
.red_alert,
div.error,
.success_message,
.error_message {
	border-radius: var(--hg-radius);
	padding: 12px 16px;
	margin: 0 0 16px;
	font-size: 13.5px;
}
.pm_alert {
	background: linear-gradient(90deg, rgba(255, 46, 136, 0.16), rgba(139, 61, 255, 0.10));
	border: 1px solid rgba(255, 46, 136, 0.4);
	color: var(--hg-text);
}
.pm_alert a { color: #fff; font-weight: 600; }
.pm_alert { display: flex; align-items: center; gap: 12px; flex-direction: row-reverse; }
.pm_alert > .float_right { float: none; flex: 0 0 auto; }
.pm_alert > div:not(.float_right) { flex: 1 1 auto; text-align: left; }
.hg-pmalert__icon { color: var(--hg-pink); margin-right: 6px; }
.hg-dismiss:link,
.hg-dismiss:visited {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: var(--hg-radius-sm);
	color: var(--hg-text-2);
	font-weight: 400;
	transition: background-color 0.15s, color 0.15s;
}
.hg-dismiss:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.red_alert {
	background: rgba(255, 90, 106, 0.12);
	border: 1px solid rgba(255, 90, 106, 0.45);
	color: #ffc1c8;
}
.red_alert a:link,
.red_alert a:visited { color: #fff; }
div.error {
	background: rgba(255, 90, 106, 0.1);
	border: 1px solid rgba(255, 90, 106, 0.4);
	color: #ffc1c8;
}
div.error p { color: #fff; margin: 0 0 6px; }
div.error p em { color: var(--hg-red); }
.success_message { color: var(--hg-green); }
.error_message { color: var(--hg-red); }
.hg-alert {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}

/* 15 Footer ---------------------------------------------------------------- */

#footer.hg-footer {
	margin-top: 24px;
	border-top: 1px solid var(--hg-line);
	background: var(--hg-bg-2);
	color: var(--hg-muted);
	font-size: 13px;
}
#footer .upper {
	background: transparent;
	border: 0;
	padding: 24px 0;
	font-size: 13px;
	overflow: visible;
}
.hg-footer__upper {
	display: grid;
	grid-template-columns: minmax(180px, 1fr) 2fr auto;
	gap: 24px;
	align-items: start;
}
.hg-footer__logo:link,
.hg-footer__logo:visited {
	font: 800 18px var(--hg-font-display);
	background: var(--hg-grad);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--hg-pink);
}
.hg-footer__tagline { margin: 4px 0 0; color: var(--hg-faint); font-size: 12.5px; }

#footer ul.menu { margin: 0; padding: 0; list-style: none; }
#footer ul.menu li { margin: 0; display: inline; }
#footer .upper ul.bottom_links.hg-footer__links {
	float: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}
#footer .hg-footer__links li { margin: 0; display: block; }
#footer .hg-footer__links a:link,
#footer .hg-footer__links a:visited { color: var(--hg-text-2); }
#footer .hg-footer__links a:hover { color: #fff; }
.hg-footer__top i { font-size: 11px; color: var(--hg-pink); }

.hg-footer__selects { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
#footer .upper .language,
#footer .upper .theme { float: none; margin: 0; padding: 0; }
#footer .upper .language select,
#footer .upper .theme select { border-color: var(--hg-line); background: var(--hg-surface); }

#footer .lower {
	background: transparent;
	border-top: 1px solid var(--hg-line);
	color: var(--hg-faint);
	padding: 12px 0 16px;
	font-size: 12px;
	overflow: visible;
}
.hg-footer__lower { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
#footer .lower a:link,
#footer .lower a:visited { color: var(--hg-muted); }
#footer .lower a:hover { color: #fff; }
#footer .lower #current_time { float: none; color: var(--hg-faint); }
#copyright { color: var(--hg-faint); }

#debug { color: var(--hg-faint); text-align: center; padding: 10px; font-size: 11px; }

/* 16 Motion --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}