/* ---------------------------------------------------
    GTOP100 MODERNISATION LAYER
    Applies to both themes unless a rule is scoped to
    [data-theme="dark"]. Load after style.css,
    cat-v4-26-2.css and dark.css.

    Verified live against dev.gtop100.com/MapleStory
    (50 rows, 31 premium, banners loaded):
      average row   247px -> 164px
      page height  13216px -> 9486px
      rows/screen     3.6 -> 5.5
----------------------------------------------------- */

/* ---------------------------------------------------
    1. ROW DENSITY
    The description is already truncated server-side, so
    clamping to two lines removes copy nobody finishes
    reading. Title and rating share one line instead of
    stacking.
----------------------------------------------------- */

/* 14px/21px reads better than 13px/19px at the same width. The measure
   is deliberately NOT capped — narrowing it would cut how much of the
   description survives the two-line clamp, and the visible text is
   staying as it is. */
.sDescription {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 14px;
	line-height: 21px;
	margin-top: 6px !important;
}
/* The clamp above must not reach the v1 template.
   v1 stacks its row content inside .vcenter-div, where
   .rating-population-wrap is `float: left; width: 100%` (cat-v4-26-2.css:475
   and :499). `overflow: hidden` makes .sDescription establish a block
   formatting context, and a BFC is required not to overlap a float — so the
   description collapses to the zero width left beside that full-width float
   and its text spills to ~700px tall. Measured on Mu-Online: width 0px /
   height 735px with overflow hidden, 1036px / 63px with it visible.

   The default template never hits this because the rule at
   `.server-content > .rating-population-wrap` below replaces that float with
   a content-sized flex row. v1 has no .server-content, so it kept the float.

   Nothing is lost by opting v1 out: the clamp was never active there anyway,
   because cat-v4-26-2.css:323 `.template-v1 .sDescription { display: block }`
   outranks the `-webkit-box` above, and -webkit-line-clamp only applies to a
   -webkit-box. On v1 the overflow was doing damage and nothing else. */
.template-v1 .sDescription {
	overflow: visible;
}
.template-default #server-items li .rank-wrap {
	padding: 12px 10px !important;
	font-size: 26px;
}
.template-default #server-items > li {
	margin-bottom: 8px;
}
.server-content {
	padding-top: 10px;
	padding-bottom: 10px;
}
.server-content figure,
.server-content .server-image {
	margin-top: 8px !important;
	margin-bottom: 0 !important;
}

/* .server-content is a flex column in the base theme, which
   blockifies its children — inline-block on them is ignored.
   Switching to a wrapping row puts the title and rating on
   one line and forces banner and description to full width. */
.server-content {
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: center;
}
.server-content > * {
	flex: 1 0 100%;
}
.server-content > .sTitle {
	flex: 0 0 auto;
	margin-right: 14px;
	font-size: 15px;
}
.server-content > .rating-population-wrap {
	flex: 0 1 auto;
	display: flex;
	align-items: center;
	gap: 12px;
	row-gap: 4px;
	margin-bottom: 0 !important;
	/* base CSS sets an explicit width here, which would take
	   the full row and force a wrap */
	width: auto !important;
	/* Allowed to shrink and wrap so the metadata never spills past the
	   row on narrow phones — without this it overflows below ~400px. */
	flex-wrap: wrap;
	max-width: 100% !important;
	min-width: 0;
	justify-content: flex-start;
}
/* min-width:0 must NOT go on the star list. It removes flexbox's
   automatic minimum-size floor, letting the <ul> shrink below its
   content width — the five stars then overflow to the right and
   collide with the population icon. */
.rating-stars {
	display: flex !important;
	flex-wrap: nowrap !important;
	flex: 0 0 auto !important;
	width: auto !important;
	min-width: auto !important;
	white-space: nowrap;
	margin: 0;
	padding: 0;
}
.rating-stars li {
	float: none !important;
	display: inline-block;
	flex: 0 0 auto;
	width: auto !important;
}
.avg-population i {
	margin-right: 5px;
}
.avg-population {
	white-space: nowrap;
}

/* ---------------------------------------------------
    2. FLAT CHROME
    Drops the amber bevel, the menu-extra.png texture and
    the button gradients — the last skeuomorphic elements
    on the site.
----------------------------------------------------- */

#nav {
	background-image: none !important;
	background-color: #e8920f;
}
header .navbar {
	background-image: none !important;
	box-shadow: 0 1px 0 rgba(0, 0, 0, .35) !important;
}
.btn,
.btn-danger,
.btn-primary,
.btn-success,
.btn-warning,
.btn-light,
.btn-dark {
	background-image: none !important;
	text-shadow: none !important;
}
thead.head-server,
.server-toplist-head {
	filter: none !important;
}

/* ---------------------------------------------------
    3. TYPE SCALE
    Was 25 / 22 / 20 — only 5px between levels, so the
    hierarchy never registered.
----------------------------------------------------- */

/* Fluid headings. A fixed 32px h1 wrapped to two lines on a 390px
   phone and ate 80px above the fold; this lands at 24px there and
   still reaches 32px by ~1200px.
     390px -> 24px | 768px -> 29px | 1200px+ -> 32px */
#content h1 {
	font-size: clamp(1.5rem, 1.05rem + 1.6vw, 2rem);
	line-height: 1.25;
	margin-bottom: 6px;
}
#content h2 {
	font-size: clamp(1.25rem, 0.95rem + 1.1vw, 1.5rem);
	line-height: 1.25;
}
#content h3 {
	font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.1875rem);
	line-height: 1.3;
}

/* ---------------------------------------------------
    4. COMPONENT POLISH
    Filter-tab colours are dark-only: applying them to
    both themes leaves pale grey on white.
----------------------------------------------------- */

[data-theme="dark"] .server-info,
[data-theme="dark"] #server-items > li,
[data-theme="dark"] .box-wrap,
[data-theme="dark"] .main-services {
	border-color: #3d434b !important;
}

/* Filter bar dividers.
   Each tab draws its own 2px border-left, but a.s-server ALSO draws a
   1px border-right — so that one junction renders two lines instead of
   one and reads as a wider gap. The tabs are evenly spaced; only the
   duplicated border was wrong.
   The divider greys (#e6e6e6 / #d6d6d6) are light-theme values and
   glare on a dark background, so they are toned down there. */
.search-filter-links a.s-server {
	border-right: 0 !important;
}
[data-theme="dark"] .search-filter-links ul.nav_search > li > a {
	border-left-color: #3d434b !important;
}

/* ---------------------------------------------------
    5. RANK ON MOBILE
    Below 1024px cat-v4-26-2.css sets .rank-wrap to
    display:none, so a ranked toplist shows no ranks on
    phones. The grid already reserves a 50px first column
    for it — this just fills the space that was being
    held open and left empty.
----------------------------------------------------- */

/* ---------------------------------------------------
    6. LAST UPDATED
    Owner-activity signal on each row. The dot carries the
    state so the label stays readable if colour alone is
    missed. Colours are chosen to clear 4.5:1 on both the
    standard row and the premium gradient.
----------------------------------------------------- */

.last-updated {
	/* 11px was the smallest text on the page; 12px reads better without
	   widening the metadata line enough to make it wrap. */
	font-size: 12px;
	line-height: 18px;
	white-space: nowrap;
	color: #5c646e;
}
.last-updated::before {
	content: "\25CF";
	margin-right: 5px;
	font-size: 9px;
	vertical-align: 1px;
}
/* Light-mode values are darkened to clear 4.5:1 against the listing rows.
   The originals (#6c7681 / #9a6a05) measured 3.87 and 3.97 on #ebebea. */
.last-updated.is-fresh {
	color: #2e7d32;
}
.last-updated.is-aging {
	color: #5c646e;
}
.last-updated.is-stale {
	color: #855c04;
}
[data-theme="dark"] .last-updated.is-fresh {
	color: #7ec98a;
}
[data-theme="dark"] .last-updated.is-aging {
	color: #8b9096;
}
[data-theme="dark"] .last-updated.is-stale {
	color: #d9a441;
}

/* ---------------------------------------------------
    7. RANK NUMBER CONTRAST (light theme)
    cat-v4-26-2.css colours every premium rank number
    #ffc107, which lands at 1.25:1 on the #ece1be badge and
    1.17:1 on the #dbdbd7 standard one — invisible, and
    failing even the relaxed large-text threshold.

    Darkened to #8a5f00 (4.33:1 premium, 4.07:1 standard)
    and set to 700 weight. The weight matters as well as
    the colour: at 20px on mobile the number would be
    "normal" text needing 4.5:1, but at 700 it qualifies as
    large text at 3.0 — so it passes at every breakpoint.

    Scoped away from dark mode, where the numbers already
    sit at 12.9:1 and must keep their gold.
----------------------------------------------------- */

:root:not([data-theme="dark"]) .template-default .gold,
:root:not([data-theme="dark"]) .template-default .rank-wrap,
:root:not([data-theme="dark"]) .template-default .rank-wrap span,
:root:not([data-theme="dark"]) .template-default .premium .rank-wrap span {
	color: #8a5f00;
}
.template-default #server-items li .rank-wrap {
	font-weight: 700;
}

/* ---------------------------------------------------
    8. SITE-DETAIL TABS (dark theme)
    style.css gives the active tab a 3px #c80108 top border,
    #dddddd sides and a #ffffff bottom. In light mode the
    white bottom merges into the white panel below — the
    usual connected-tab effect. On dark it becomes a bright
    white line under a dark red box, and the whole control
    reads as an error state rather than a selected tab.

    Bottom border now matches the panel so the tab connects,
    sides use the standard divider, and the top accent uses
    the toned brand red rather than the raw #c80108.

    !important is required: the base rules are shorthands
    and one carries !important already.
----------------------------------------------------- */

[data-theme="dark"] #site-tab-links > li > a {
	border-left: 1px solid #33383f !important;
	border-right: 1px solid #33383f !important;
	border-bottom: 1px solid #33383f !important;
}
[data-theme="dark"] #site-tab-links > li > a.active,
[data-theme="dark"] #site-tab-links > li > a.active:hover,
[data-theme="dark"] #site-tab-links > li > a.active:focus {
	border-top: 3px solid #d92d36 !important;
	border-left: 1px solid #33383f !important;
	border-right: 1px solid #33383f !important;
	border-bottom: 1px solid #1d2024 !important;
}

/* ---------------------------------------------------
    9. SHARE BUTTONS
    Each share link is a fa-stack: an fa-circle disc that
    takes its colour from the anchor, plus a white
    fa-inverse glyph. Every anchor was inheriting the
    generic link colour, so all seven discs rendered the
    same red and the block read as a row of identical
    buttons.

    style.css does define per-platform colours, but under
    `.share-buttons .fb_share_button` — a wrapper class the
    current markup no longer uses, so none of them applied.
    The intent was already there; the selector had gone
    stale.

    Dark-mode variants exist because four brand colours sit
    too close to the #212429 panel to read: X is black,
    Tumblr navy, Pinterest and LinkedIn deep. All discs and
    glyphs clear 3:1 in both themes.
----------------------------------------------------- */

a.fb_share_button { color: #1877f2 !important; }
a.twitter_share_button { color: #000000 !important; }
a.share-reddit { color: #ff4500 !important; }
a.share-vk { color: #0077ff !important; }
a.share-tumblr { color: #36465d !important; }
a.share-pinterest { color: #bd081c !important; }
a.share-linkedin { color: #0a66c2 !important; }

[data-theme="dark"] a.twitter_share_button { color: #e7e9ea !important; }
[data-theme="dark"] a.twitter_share_button .fa-inverse { color: #0f1419 !important; }
[data-theme="dark"] a.share-tumblr { color: #5a76a8 !important; }
[data-theme="dark"] a.share-pinterest { color: #e60023 !important; }
[data-theme="dark"] a.share-linkedin { color: #378fe9 !important; }

/* ---------------------------------------------------
    10. NAV CONTRAST
    White text on the amber bar measured 2.46:1 — the only
    contrast failure left on the site, and identical in both
    themes since the bar does not change.

    Dark text on the existing amber gives 6.74:1 and keeps
    the bright bar, rather than darkening the bar to #a85f00
    to rescue white text at 4.88:1.

    The theme toggle's translucent dark disc existed only to
    lift a white icon off the gradient; with a dark icon it
    is no longer needed for contrast and is reduced to a
    faint hover affordance.
----------------------------------------------------- */

#nav .navbar-nav > li > a,
#nav .login-links > li > a,
header .navbar .nav-link,
header .navbar .nav-link i {
	color: #2b1c00 !important;
	text-shadow: none !important;
}
#nav .navbar-nav > li > a:hover,
#nav .navbar-nav > li > a:focus,
header .navbar .nav-link:hover,
header .navbar .nav-link:focus {
	color: #000000 !important;
}
/* ---------------------------------------------------
    12. THEME TOGGLE
    A pill switch that names the current mode rather than
    only hinting at it with an icon. Previously a 36px
    disc holding a moon or a sun, which required the user
    to work out whether the icon meant the current state
    or the one they would get by clicking.

    Everything visible is driven off [data-theme] on
    <html>: the wording, the knob position and which icon
    shows. theme-toggle.js only flips that attribute and
    the cookie, so there is no second source of truth to
    drift — and the control is already correct in the
    server-rendered HTML before any script runs.

    Following the reference: DAY has the knob on the
    right, NIGHT on the left.

    The width is fixed rather than fluid because "Day
    Mode" and "Night Mode" are different lengths; letting
    it size to content would make the whole nav shift
    sideways on every toggle.
----------------------------------------------------- */

.theme-toggle {
	position: relative;
	display: flex;
	align-items: center;
	width: 132px;
	height: 32px;
	flex: none;
	margin-right: 10px;
	padding: 0;
	border-radius: 999px;
	background: #ededed;
	/* The pale track is only 2.1:1 against the amber nav, short of the 3:1
	   WCAG 1.4.11 wants for the boundary of a non-text control, so the border
	   is what actually delineates it. At .22 alpha that border was 3.34:1 —
	   a pass, but with no margin; .35 gives 4.53:1. The night track needs no
	   such help: #101215 on the amber is already 7.6:1. */
	border: 1px solid rgba(0, 0, 0, .35);
	cursor: pointer;
	overflow: hidden;
	transition: background .18s ease, border-color .18s ease;
}
.theme-toggle-text {
	flex: 1 1 auto;
	/* Room for the knob on the side it currently occupies. */
	padding: 0 34px 0 12px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-align: center;
	white-space: nowrap;
	color: #1b1b1b;
	transition: color .18s ease;
}
.theme-toggle-text::after {
	content: "Day Mode";
}
.theme-toggle-knob {
	position: absolute;
	top: 50%;
	left: calc(100% - 29px);
	width: 26px;
	height: 26px;
	margin-top: -13px;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	line-height: 1;
	color: #1b1b1b;
	transition: left .22s ease, background .18s ease, color .18s ease;
}
/* Both icons are stated explicitly in both states rather
   than relying on Font Awesome's default display. The
   old control showed the OPPOSITE icon (a moon while in
   light mode, meaning "click for dark"); this one shows
   the CURRENT one, so the icon agrees with the wording
   beside it. Being explicit also means a stale cached
   dark.css, which hid .fa-sun in light mode, cannot
   leave the knob empty — modernize.css loads after it. */
.theme-toggle .fa-sun {
	display: block;
}
.theme-toggle .fa-moon {
	display: none;
}

/* Night state. Mirrors the light rules above so the two
   can be compared line for line. */
[data-theme="dark"] .theme-toggle {
	background: #101215;
	border-color: rgba(0, 0, 0, .55);
}
[data-theme="dark"] .theme-toggle-text {
	padding: 0 12px 0 34px;
	color: #f2f4f6;
}
[data-theme="dark"] .theme-toggle-text::after {
	content: "Night Mode";
}
[data-theme="dark"] .theme-toggle-knob {
	left: 3px;
	color: #101215;
}
[data-theme="dark"] .theme-toggle .fa-sun {
	display: none;
}
[data-theme="dark"] .theme-toggle .fa-moon {
	display: block;
}

.theme-toggle:hover {
	background: #e2e2e2;
}
[data-theme="dark"] .theme-toggle:hover {
	background: #1b1f24;
}
.theme-toggle:focus-visible {
	outline: 2px solid #1b1b1b;
	outline-offset: 2px;
}
[data-theme="dark"] .theme-toggle:focus-visible {
	outline-color: #ffffff;
}

/* The knob slide is decoration, not information — the
   wording carries the state on its own. */
@media (prefers-reduced-motion: reduce) {
	.theme-toggle,
	.theme-toggle-text,
	.theme-toggle-knob {
		transition: none;
	}
}

/* The dark colour above is only correct while the links
   sit ON the amber bar. Once the navbar collapses, the
   menu is no longer amber — style.css:443 turns
   #mainMenu .navbar-nav into a #1f1f1f panel. #2b1c00 on
   #1f1f1f is a contrast ratio of 1.00: the text is
   mathematically invisible, and it was, in both themes
   (dark.css declares no nav rules, so both themes share
   this). The site's own colour there was
   var(--c-on-dark) = #ffffff; this restores a light one
   for the collapsed menu only.

   The cut is 979px, not Bootstrap's 992px collapse
   point. Between 980 and 991 the menu is collapsed but
   style.css has not darkened the panel yet, so it still
   sits over the amber bar where the dark colour is
   correct. Cutting at 992 would break that band.

   This block must stay AFTER the rule it overrides —
   same selectors, same specificity, both !important, so
   source order is what decides.

   .theme-toggle is deliberately not included: it stays
   in the amber bar at every width. */
@media (max-width: 979px) {
	#nav .navbar-nav > li > a,
	#nav .login-links > li > a,
	header .navbar .nav-link,
	header .navbar .nav-link i {
		color: #f0f2f4 !important;
	}
	#nav .navbar-nav > li > a:hover,
	#nav .navbar-nav > li > a:focus,
	header .navbar .nav-link:hover,
	header .navbar .nav-link:focus {
		color: #ffffff !important;
	}
}

/* ---------------------------------------------------
    11. LARGE SCREENS
    Rows declare four grid columns (rank / content /
    versions / types) at fixed widths, but categories with
    versions and types disabled render only two children —
    so 400px sat empty on every row. On top of that
    .server-content was capped at 468px inside a column
    over twice that wide.

    Switching the last two columns to `auto` collapses them
    to 0 when unused and sizes them to content when present,
    so both kinds of category benefit. Measured at 2560px:
    unused space per row 1012px -> 50px, and the metadata
    fits back on one line.

    The container width is deliberately left at the original
    1216px. Widening it to 1500px only bought 8px per row and
    read as too wide on a 1440p monitor — the gain here comes
    from the columns, not from the page being wider.
----------------------------------------------------- */

@media (min-width: 1200px) {
	.template-default #server-items > li {
		grid-template-columns: 80px minmax(0, 1fr) auto auto;
	}
	.template-default .server-content {
		max-width: none;
	}
	/* Keep the description to a readable measure even though the
	   column is now much wider. */
	.server-content > .sDescription {
		max-width: 900px;
	}
}

@media (max-width: 1024px) {
	.template-default #server-items > li .rank-wrap {
		display: flex !important;
		align-items: center;
		justify-content: center;
		grid-column: 1 / 2;
		grid-row: 1 / -1;
		padding: 8px 4px !important;
		font-size: 20px;
	}
	.template-default .server-content,
	.template-default .version-wrap,
	.template-default .type-wrap {
		grid-column: 2 / -1;
	}
}
.badge {
	font-size: 11px;
	padding: 3px 8px;
}
/* Filter-tab colours live in dark.css and are already consistent —
   nothing to override here. */
a:focus-visible,
button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* ---------------------------------------------------
    14. CATEGORY FILTER BAR
    Visual only. Every anchor keeps its existing href, the
    dropdown contents and the #cat-filter collapse panel are
    untouched, and tabs still replace rather than combine.

    Replaces the skeuomorphic slab in cat-v4-26-2.css:1
    background #ebebea plus three inset white highlights and an
    outer shadow, with four links sharing it and separated by
    2px rules. Flattened to one surface, one border, and four
    discrete chips.

    Applies to BOTH templates. cat-v4-26-2.css scopes the gloss
    to .template-default, so .template-v1 renders the same
    markup with different chrome -- the two are unified here.
----------------------------------------------------- */

.search-filter-links,
.template-default .search-filter-links {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	padding: 8px;
	background: var(--c-surface-2);
	border: 1px solid var(--c-border);
	border-radius: 10px;
	/* Keeps cat-v4-26-2's outer glow, drops only its three inset highlights. The
	   listing rows below still carry the full treatment (cat-v4-26-2.css:571), so
	   a fully flat bar sat on a different plane from everything under it.

	   Edited in place rather than appended: the .template-default branch above is
	   (0,2,0), so a later `.search-filter-links { box-shadow }` rule at (0,1,0)
	   loses here and would apply ONLY to .template-v1 -- looking correct on a v1
	   category while the main ones silently kept the old value. */
	box-shadow: 0 0 8px rgba(0, 0, 0, .2);
}

/* The collapse panel behind the "Search for servers" chip. It opens flush under
   the bar -- same width, zero gap -- so the two read as one surface and must be
   styled as one. It still carried cat-v4-26-2.css:395's original slab (#ebebea,
   three inset highlights, no border) after the bar above it was reworked.

   No dark rule needed: dark.css:247-252 already lists #cat-filter alongside the
   bar for --gt-card / --gt-line. That border-color has been inert until now --
   the element had no border-style to render it with. This rule supplies one. */
#cat-filter,
.template-default #cat-filter {
	background: var(--c-surface-2);
	border: 1px solid var(--c-border);
	border-radius: 10px;
	box-shadow: 0 0 8px rgba(0, 0, 0, .2);
}

/* The four controls. a.s-server toggles the collapse panel; the three
   in ul.nav_search open dropdowns. Same chip, so the bar reads evenly —
   they are told apart by their icons, not by weight or colour. */
.search-filter-links a.s-server,
.search-filter-links ul.nav_search > li > a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 13px;
	background: #fff;
	border: 1px solid var(--c-border-strong);
	border-radius: 8px;
	/* 17px/700 in four red items competed with the page heading. */
	font-size: 14px;
	font-weight: 600;
	/* !important is required, not preferred. cat-v4-26-2.css:403 and
	   style.css:5132 both declare `a.s-server { color: ... !important }`,
	   which no amount of specificity beats -- that is why the search toggle
	   alone stayed red on the first deploy while the other three took the new
	   colour. Red is now spent on the brand, not on all four controls. */
	color: var(--c-text) !important;
	text-decoration: none;
	white-space: nowrap;
	line-height: 1.2;
}
.search-filter-links a.s-server:hover,
.search-filter-links ul.nav_search > li > a:hover,
.search-filter-links a.s-server:focus-visible,
.search-filter-links ul.nav_search > li > a:focus-visible {
	border-color: #9aa0a6;
	color: var(--c-text) !important;
}

/* nav_search is a plain flex row now; the 2px border-left that separated
   the tabs is gone because each chip carries its own outline. */
.search-filter-links ul.nav_search {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.search-filter-links ul.nav_search > li {
	margin: 0;
	padding: 0;
}
.search-filter-links ul.nav_search > li > a,
.template-default ul.nav_search > li > a {
	border-left: 1px solid var(--c-border-strong);
}

/* Inline SVG rather than FontAwesome: no re-subsetting of the 9.2 KB
   build, no extra request, and stroke weight stays under our control.
   currentColor makes them follow the label into dark mode. */
.gt-fi {
	width: 16px;
	height: 16px;
	flex: none;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.9;
	/* Subordinate to the label — the word leads, the icon supports. */
	color: #8a9096;
}
.search-filter-links a .fa-caret-down {
	font-size: 10px;
	color: #9aa0a6;
}

/* Add New Server is rendered in one of two places, decided by
   $gt_show_filter_bar in the template:

     main category page -> INSIDE .search-filter-links, sharing the row
     sub-page (/Version, /Types, /Country, /page) -> above it as before,
       because the bar itself is not rendered there and the button must be

   Both copies share this class; only the in-bar one gets margin-left:auto. */
.filter-add-btn.btn {
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	/* 9px + line-height 1.2 matches the 37px of the four controls beside it.
	   At the inherited 10px/larger line-height the button measured 42px, so it
	   sat 5px proud in the flex row and pushed the whole bar taller. */
	padding: 9px 16px;
	line-height: 1.2;
}
/* Pushes it to the far right of the flex row. float-right is inert inside a
   flex container, which is why the in-bar copy does not carry that class. */
.search-filter-links .filter-add-btn.btn {
	margin-left: auto;
}

/* Drops the glossy top highlight style.css:1004 puts on every .btn -- none of
   the four chips beside it carry one.

   The :not() pair is load-bearing, not defensive. Bootstrap draws this button's
   ONLY focus indicator as a box-shadow (`.btn-dark:focus`), and it also sets
   outline:0, which the `a:focus-visible` fallback at :625 cannot undo -- that is
   (0,1,1) against bootstrap's (0,2,0). A plain
   `.search-filter-links .filter-add-btn.btn` is (0,3,0), so it out-ranks the
   (0,2,0) focus rule and suppresses the ring in the focus state too, leaving
   keyboard users with no visible focus on the primary CTA. !important is not the
   problem here and removing it is not the fix; the specificity is. Excluding the
   two focus states lets bootstrap's own ring through untouched.

   Verified in-browser against the live sheets: focused, this computes
   `rgba(52, 58, 64, .5) 0 0 0 3.2px`; with the plain selector it computed
   `none` with `outline: none`. `.focus` is included because bootstrap pairs the
   class with the pseudo-class and applies it from JS. */
.search-filter-links .filter-add-btn.btn:not(:focus):not(.focus) {
	box-shadow: none;
}

/* 767, not 560. Measured on dev rather than guessed: with labels visible the
   four controls need 546px of inner width, and the bar's inner width is only
   ~(viewport - 158) because of the container and column padding. So:

     viewport 640  ->  inner 482  ->  546 needed  ->  WRAPS to two rows (150px tall)
     viewport 768  ->  inner 662  ->  fits on one row

   A 560px breakpoint therefore left a dead band from 561 to 767 where the
   labels were shown but could not fit, which is the worst of both. Anything
   under 768 now goes icon-only, which fits comfortably at 273px. */
@media (max-width: 767px) {
	/* Labels drop, icons remain: four controls hold one line instead of
	   wrapping to three. This is the whole reason the icons earn their
	   place -- without them this collapse would leave unlabelled boxes.
	   aria-label on each anchor keeps them announced. */
	.search-filter-links a.s-server .gt-lbl,
	.search-filter-links ul.nav_search > li > a .gt-lbl {
		display: none;
	}
	.search-filter-links a.s-server,
	.search-filter-links ul.nav_search > li > a {
		padding: 9px 11px;
	}
	.filter-add-btn.btn {
		display: block;
		width: 100%;
		float: none !important;
		margin-left: 0;
	}
	/* ...except on a bare bar. On a sub-page the bar holds nothing but this
	   button, and stretching it makes the button fill its own container: a
	   335x55 bar wrapping a 317x37 button, 9px of grey showing each side --
	   two rounded boxes doing one job.

	   The stretch is right on a main category page, where the button sits
	   BELOW the filter row and needs to read as its own block. Here there is
	   no filter row, so natural width and right-aligned reads as a toolbar
	   with one action, which is what it is. */
	.search-filter-links.is-bare .filter-add-btn.btn {
		display: inline-flex;
		width: auto;
		margin-left: auto;
	}
}

/* ---- dark ----------------------------------------------------------
   Measured, not chosen. On the dark bar (#1d2024):
     pill fill  #26292e            1.12:1  -- fill alone cannot define a control
     --gt-line  #33383f border     1.38:1  -- too soft for a boundary
     #6b737d    border             3.41:1  -- passes WCAG 1.4.11 (3:1)
     btn-dark   #2b3137            1.24:1  -- invisible, must invert
   Dark palettes are compressed at the bottom, so separation has to come
   from a visibly lighter outline instead of a different surface. */
[data-theme="dark"] .search-filter-links,
[data-theme="dark"] .template-default .search-filter-links {
	background: var(--gt-card);
	border-color: var(--gt-line);
}
/* Same !important problem, twice over. dark.css:300 declares
   `[data-theme="dark"] a.s-server { color: ... !important }`, and its
   rule at :153 is prefixed with #content -- an ID, which outranks any
   number of classes here. Both are deliberate in the old design, where
   all four tabs were meant to be brand red; this section replaces that
   intent, so it has to say so explicitly. */
[data-theme="dark"] .search-filter-links a.s-server,
[data-theme="dark"] .search-filter-links ul.nav_search > li > a,
[data-theme="dark"] .template-default ul.nav_search > li > a {
	background: var(--gt-raised);
	border-color: #6b737d !important;
	color: var(--gt-text) !important;
}
[data-theme="dark"] .gt-fi,
[data-theme="dark"] .search-filter-links a .fa-caret-down {
	color: var(--gt-text-3);
}
[data-theme="dark"] .search-filter-links a.s-server:hover,
[data-theme="dark"] .search-filter-links ul.nav_search > li > a:hover {
	border-color: #98a0a9 !important;
	color: var(--gt-text) !important;
}
/* Inverted: 13.31:1 both ways, and it cannot be mistaken for a filter —
   which brand red would have been.

   The colour needs !important because moving this button INSIDE the bar made
   it a direct child of .search-filter-links, which brings it into range of
   dark.css:153 -- `[data-theme="dark"] #content .search-filter-links > a`.
   That rule was written when the only `> a` child was the search toggle, and
   its #content ID outranks any selector here. Left alone it painted the label
   --gt-brand-text on the light button: measured 2.03:1, a clear failure. */
[data-theme="dark"] .filter-add-btn.btn {
	background: var(--gt-text);
	border-color: var(--gt-text);
	color: var(--gt-card) !important;
}
[data-theme="dark"] .filter-add-btn.btn:hover {
	background: #fff;
	color: var(--gt-card) !important;
}

/* ---------------------------------------------------
    15. CATEGORY FAQ (extrafieldthree)
    Per-category Q&A stored in gtop_categories.extrafieldthree
    (and its per-version / per-type overrides), echoed raw
    below the listing + pagination by all four templates.

    EACH QUESTION IS ITS OWN CARD, not a row inside one card.
    Nine questions sharing a single panel read as a wall of
    text -- the rule between rows is too weak a separator at
    this density. Separate cards with a real gap also match
    the listing rows directly above them, so the page reads
    as one stack of cards from filter bar to FAQ.

    ONE AT A TIME via the native `name` attribute on <details>.
    Browsers treat same-named <details> as an exclusive group
    and close the open sibling automatically -- no JS, no click
    handlers, no state to keep in sync. In a browser too old to
    support it the block degrades to several panels open at
    once, which is untidy but not broken. The `name` value must
    match across every <details> in the block; it is set in the
    HTML stored in extrafieldthree, not here.

    Collapsing does NOT cost extraction: answer text stays in
    the server-rendered HTML and closed <details> content is
    hidden via content-visibility, so it remains in the DOM.
    topg.org ranks #1 for "wow private servers" shipping this
    same collapsed pattern.
----------------------------------------------------- */
.gt-faq {
	margin: 24px 0;
}
/* The #content prefix is required, not decorative: this file's own type
   scale (section 2) sets `#content h2` with a clamp() size at (1,0,1),
   which beats a bare `.gt-faq h2` at (0,1,1) -- measured 24px instead of
   the intended 20px. The unscoped selector stays as a fallback for any
   template that renders extrafieldthree outside #content. */
#content .gt-faq h2,
.gt-faq h2 {
	margin: 0 0 12px;
	font-size: 20px;
	font-weight: 700;
	color: var(--c-text);
}
.gt-faq details {
	margin-bottom: 8px;
	background: var(--c-surface-2);
	border: 1px solid var(--c-border);
	border-radius: 10px;
	/* Keeps the summary's hover fill inside the rounded corners. */
	overflow: hidden;
}
.gt-faq details:last-child {
	margin-bottom: 0;
}
/* list-style:none AND the ::-webkit-details-marker reset are both needed --
   without both, WebKit keeps drawing its own triangle next to the chevron. */
.gt-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 15px 18px;
	list-style: none;
	cursor: pointer;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--c-text);
}
.gt-faq summary::-webkit-details-marker {
	display: none;
}
.gt-faq summary:hover {
	background: rgba(0, 0, 0, .03);
}
/* Chevron from two borders rather than an icon font or SVG: it inherits
   currentColor, so it needs no separate dark-mode rule. flex-shrink:0 stops
   it collapsing when a question wraps to three or four lines on mobile. */
.gt-faq summary::after {
	content: "";
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	margin-right: 4px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform .15s ease;
}
.gt-faq details[open] summary::after {
	transform: translateY(2px) rotate(225deg);
}
/* <summary> is natively focusable but the site-wide a/button focus rule at
   :625 does not match it, so without this keyboard users get no indicator. */
.gt-faq summary:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -4px;
}
/* Divider only while open, so a closed stack stays clean. */
.gt-faq details[open] summary {
	border-bottom: 1px solid var(--c-border);
}
/* max-width is the single biggest readability fix here. The card is ~870px
   wide on desktop, which at 14px put 127 characters on a line -- measured,
   not estimated. Comfortable reading is 45-75; past roughly 90 the eye loses
   the start of the next line on the return sweep. 68ch lands near 70 and
   scales with the font rather than being pinned to a pixel guess.
   Answers are several short paragraphs rather than one block for the same
   reason: a paragraph break gives the eye somewhere to rest. */
.gt-faq details p {
	max-width: 68ch;
	margin: 0 0 12px;
	padding: 0 18px;
	font-size: 14px;
	line-height: 1.7;
	color: var(--c-text);
}
.gt-faq details > p:first-of-type {
	padding-top: 14px;
}
.gt-faq details > :last-child {
	margin-bottom: 0;
	padding-bottom: 16px;
}
.gt-faq details ul {
	max-width: 68ch;
	margin: 0 0 12px;
	padding: 0 18px 0 40px;
	font-size: 14px;
	line-height: 1.7;
	color: var(--c-text);
}
.gt-faq details li {
	margin-bottom: 2px;
}
.gt-faq details code {
	padding: 1px 5px;
	background: rgba(0, 0, 0, .06);
	border-radius: 4px;
	font-size: 13px;
}
.gt-faq a {
	color: var(--c-brand-text);
}
/* Brand red as an emphasis mark inside answers, for the one or two phrases
   that carry the actual decision. <strong> rather than a bare span so the
   emphasis is not conveyed by colour alone (WCAG 1.4.1) -- weight 600 keeps
   it distinguishable in greyscale without the slab look of full bold at 700.
   Measured on the card: #c80108 on #f5f5f5 = 5.56:1, and in dark
   #ff7b82 on #1d2024 = 6.55:1. Both clear AA for normal text. */
.gt-faq details strong {
	font-weight: 600;
	color: var(--c-brand-text);
}
[data-theme="dark"] .gt-faq details strong {
	color: var(--gt-brand-text);
}
[data-theme="dark"] .gt-faq details {
	background: var(--gt-card);
	border-color: var(--gt-line);
}
/* Must carry the #content prefix for the same reason the light rule does:
   `#content .gt-faq h2` is (1,1,1) and would beat a bare dark override at
   (0,2,1), leaving #333 on the dark card. Measured, not theoretical.
   <summary> needs no such guard -- nothing else in the cascade targets it. */
[data-theme="dark"] #content .gt-faq h2,
[data-theme="dark"] .gt-faq h2 {
	color: var(--gt-text);
}
[data-theme="dark"] .gt-faq summary,
[data-theme="dark"] .gt-faq details p {
	color: var(--gt-text);
}
[data-theme="dark"] .gt-faq summary:hover {
	background: rgba(255, 255, 255, .04);
}
/* The ul and code rules carry --c-text, which is #333 and stays #333 in dark
   unless overridden -- the same trap the h2 hit. code also needs a lighter
   fill: a 6%-black chip is invisible on a near-black card. */
[data-theme="dark"] .gt-faq details ul {
	color: var(--gt-text);
}
[data-theme="dark"] .gt-faq details code {
	background: rgba(255, 255, 255, .10);
}
[data-theme="dark"] .gt-faq details[open] summary {
	border-bottom-color: var(--gt-line);
}
[data-theme="dark"] .gt-faq a {
	color: var(--gt-brand-text);
}
@media (max-width: 767px) {
	.gt-faq summary {
		padding: 14px 14px;
		gap: 12px;
	}
	.gt-faq details p {
		padding: 12px 14px 14px;
	}
}
/* ---------------------------------------------------
    16. FOOTER
    The footer is #1f1f1f in BOTH themes, so nothing in
    this section needs a [data-theme="dark"] variant.

    style.css:528-531 wraps it in margins that expose the
    page-background artwork on both edges: 10px above, and
    100px below. Neither is doing any work -- the footer's
    own 20px top padding and the copyright bar's padding
    already provide the spacing -- so both go, and the
    footer now meets #content above and the bottom of the
    page below.

    Type was the other problem. Footer text was LARGER
    than page content: links 16px/700 and the copyright
    16px/400, against 14px body and 14px/600 controls.
    Legal boilerplate was rendering more prominently than
    the listings. Links now match the filter chips and the
    Add New Server button exactly (14px/600) rather than
    introducing a fourth size, and the copyright drops to
    13px with a capped measure.
----------------------------------------------------- */
footer {
	margin-top: 0;
	margin-bottom: 0;
}
/* Zeroing the margin above still left 22px of artwork under the footer.
   The cause is not margin: front_footer.php ends with whitespace and a run
   of <script> tags, and the whitespace-only text nodes sitting directly in
   <body> form one anonymous line box at body's 22px line-height. Collapsing
   body's own inline line-height removes it; the explicit 22px on direct
   children restores exactly the value they already inherited, so nothing
   else moves. Verified: content height, footer height and header position
   all identical before and after, band 22px -> 0.
   (display:flex on body -- the usual advice for whitespace text nodes --
   was tried first and did NOT clear it.) */
body {
	line-height: 0;
}
body > * {
	line-height: 22px;
}
/* 14px/600 is not a fresh value -- it is the spec already used by
   .search-filter-links a.s-server and .filter-add-btn. */
.footer-links a {
	font-size: 14px;
	font-weight: 600;
}
/* style.css:538 turns these #c80108 on hover, which is 2.72:1 on the
   #1f1f1f footer -- hovering made them HARDER to read than resting white
   at 16.48:1, a straight AA failure on the only interactive element down
   here. The colour now stays put and the underline carries the affordance.
   :focus-visible included because the site-wide focus rule at :625 uses
   `outline` and these links previously had no visible hover OR focus
   distinction at all. */
.footer-links a:hover,
.footer-links a:focus-visible {
	color: var(--c-on-dark);
	text-decoration: underline;
	text-underline-offset: 3px;
}
/* Replaces the <center> tag and the hand-spaced &nbsp; separators. Even
   margins mean the gaps cannot drift apart the way 24px/20px did. */
.footer-nav {
	text-align: center;
}
.footer-sep {
	margin: 0 12px;
	color: var(--c-on-dark);
	opacity: .45;
}
/* 16px across the full 1192px column ran 152 characters per line -- worse
   than the 127 we just corrected in the FAQ, on the line that least needs
   prominence.
   65ch, not 75ch: `ch` is the width of "0", which in Roboto is wider than
   the average character, so 75ch measured 86 actual characters. 65ch lands
   at ~75, which is the number that matters. */
footer .copyright p {
	max-width: 65ch;
	margin: 0 auto;
	font-size: 13px;
}
.gt-reset-timer {
	margin-bottom: 10px;
	font-size: 13px;
	color: var(--c-on-dark);
	opacity: .85;
}
/* tabular-nums stops the line jittering sideways as digits change --
   without it every tick reflows the text after the seconds counter. */
.gt-reset-digits {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	opacity: 1;
}
/* ---------------------------------------------------
    17. GAMES MENU
    Replaces a 160px single column that ran 2,490px tall
    on desktop and 3,498px on mobile, with 11px text and
    35px rows. Only 23 of 66 games were reachable without
    scrolling the page while holding the dropdown open,
    and the per-game fly-outs opened on :hover, so on touch
    they could not be opened at all.

    Now: a search field and every game in one panel.

    data-display="static" on the toggle (front_header.php)
    is what makes this possible -- it tells Bootstrap 4 to
    skip Popper, which otherwise writes an inline
    transform sized to the old 160px box and would fight
    every rule below.
----------------------------------------------------- */
/* The panel is anchored to #mainMenu, NOT to its own <li>.

   A dropdown normally positions against its list item, and the Games item is
   only ~66px wide, so a panel this size hanging off it lands off-screen: with
   right:0 it measured left:-494 at a 1043px viewport. The existing
   .left-align / .right-align pair (style.css:362) cannot help either -- both
   anchor to the same 66px box, so one overflows left and the other right.

   Making the <li> static and #mainMenu relative moves the containing block up
   to the nav bar, and left:0/right:0 then spans it. Measured after the change:
   1440px -> 931px panel at x=248, fits; 1043px -> 675px at x=177, fits.
   Other dropdowns are untouched -- they keep their own position:relative. */
#mainMenu {
	position: relative;
}
#mainMenu .gt-gm-parent {
	position: static;
}
.gt-gm {
	left: 0;
	right: 0;
	width: auto;
	max-width: none;
	padding: 0;
	/* MUST be set explicitly. style.css:~366 gives #mainMenu .dropdown-menu a
	   #262626 background at (1,1,0), which this inherited while the links were
	   --c-text #333 -- measured 1.20:1, effectively invisible. The search
	   header was already light, so the panel rendered half light, half dark.
	   A light surface is also the right call for a panel this size: at 931x513
	   a dark slab sits heavily over a light page, and every other component
	   added in this file (filter bar, FAQ cards) is a light card.

	   Set under #mainMenu below, not here: a bare .gt-gm is (0,1,0) and would
	   lose to that ID rule, exactly as .gt-faq h2 lost to #content h2. */
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
	overflow: hidden;
}
/* (1,1,0) ties #mainMenu .dropdown-menu and wins on source order.

   The border belongs here for exactly the same reason as the background, and
   was previously declared on the bare .gt-gm above where it did nothing:
   style.css:366 `#mainMenu .dropdown-menu { border: none }` is (1,1,0) and
   beat it, so the panel rendered with a box-shadow and no edge at all --
   measured `0px none` at 1280px in both themes. */
#mainMenu .gt-gm {
	background: #fff;
	border: 1px solid var(--c-border);
}
[data-theme="dark"] #mainMenu .gt-gm {
	background: var(--gt-card);
	border-color: var(--gt-line);
}
.gt-gm-search {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 13px 16px;
	background: var(--c-surface-2);
	border-bottom: 1px solid var(--c-border);
}
/* An explicit colour, NOT `opacity` over an inherited currentColor. The icon
   is stroke: currentColor, and nothing sets a colour on .gt-gm-search, so it
   inherited bootstrap's body #212529 -- which on the dark search bar (#26292e)
   measured 1.03:1 and was simply invisible. Opacity made it worse by pulling
   whatever colour it got toward the background. */
.gt-gm-search svg {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	color: var(--c-text-muted);
}
[data-theme="dark"] .gt-gm-search svg {
	color: var(--gt-text-3);
}
.gt-gm-search input {
	flex: 1;
	min-width: 0;
	padding: 10px 12px;
	font-size: 14px;
	color: var(--c-text);
	background: #fff;
	border: 1px solid var(--c-border-strong);
	border-radius: 8px;
	outline: none;
}
.gt-gm-search input:focus {
	border-color: #6b737d;
}
/* type=search paints a WebKit clear button that sits oddly against the
   custom border radius; the field is cleared by selecting all instead. */
.gt-gm-search input::-webkit-search-decoration,
.gt-gm-search input::-webkit-search-cancel-button {
	-webkit-appearance: none;
}
/* The panel has to be capped at every width, not just on mobile. Measured on
   dev at 1199px: three columns make the list 20 rows and the panel 771px tall,
   which runs past the bottom of a 768px-high laptop screen. Below 991px the
   collapsed menu already had a scroll box; above it the panel had none.

   The subtrahend covers the chrome above the list plus a gap below the panel.
   Measured at 1199x700 on dev, where the nav wraps and pushes the panel down:
   93px above the panel + 67px of search bar = 160px, so 150px left the panel
   ending 10px past the viewport and 170px lands it 10px short of the bottom.
   This is the ONLY scroll container in the panel -- #gtGameDetail deliberately
   does not get its own, or an open pane would nest a second scrollbar inside
   this one. */
.gt-gm-body {
	padding: 12px 16px 16px;
	max-height: calc(100vh - 170px);
	overflow-y: auto;
}
.gt-gm-label {
	margin: 0 0 10px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--c-text-muted, #8a8a8a);
}
/* Multi-column, NOT grid. Columns flow down-then-across, so the alphabet
   reads A-E down column one, F-K down column two. A grid would flow
   across-then-down and scatter the letters sideways.

   Four columns, not five. Measured on dev at 1280px: five columns give 162px
   each, and nine of the sixty names overflow it -- including "World of
   Warcraft", which rendered as "World of War...". The widest row needs 215px
   (MMORPG And MPOG, which also carries a chevron); four columns at an 18px gap
   give 211px, so everything except that one worst case fits. Five columns and
   a 22px gap only ever fit the short names. */
.gt-gm-list {
	column-count: 4;
	column-gap: 18px;
}
/* The letter sits in a fixed-width gutter on the first game of each group, so
   every name still aligns to the same x. A full heading row per letter would
   add roughly 24 rows and push the panel past the fold.

   The gutter is min-width + margin, not min-width alone: at 15px with no
   margin the letter butted straight up against the name ("A ACE Online" read
   as one word). 13 + 10 gives a 23px channel, so the letters form their own
   visible column down the left of each list column. */
.gt-gm-ltr {
	display: inline-block;
	min-width: 13px;
	margin-right: 10px;
	font-size: 11px;
	font-weight: 700;
	font-style: normal;
	color: var(--c-brand-text);
}
/* While filtering, the alphabet is meaningless -- drop the slot so results
   sit flush left. */
.gt-gm-list.is-filtered .gt-gm-ltr {
	display: none;
}
.gt-gm-empty {
	margin: 0;
	padding: 18px 8px 6px;
	font-size: 14px;
	color: var(--c-text-muted, #777);
}

/* Both background and border-color for the dark panel now live in the
   #mainMenu-scoped rule above. The comment that used to sit here claimed
   "nothing else sets a border on this element" -- style.css:366 does, at
   (1,1,0), so this rule was inert. */
[data-theme="dark"] .gt-gm-search {
	background: var(--gt-raised, #212429);
	border-bottom-color: var(--gt-line);
}
[data-theme="dark"] .gt-gm-search input {
	background: var(--gt-card);
	border-color: var(--gt-line);
	color: var(--gt-text);
}
[data-theme="dark"] .gt-gm-ltr {
	color: var(--gt-brand-text);
}

/* Only the column count steps down. The panel width is not set here -- it
   spans #mainMenu at every breakpoint, so a fixed width would override that
   and reintroduce the overflow the anchoring change just fixed. */
@media (max-width: 1199px) {
	.gt-gm-list {
		column-count: 3;
	}
}
/* The navbar is navbar-expand-lg, so the dropdown stops being a floating
   panel and becomes a block inside the collapsed menu at 991px, NOT 767px --
   these resets were a breakpoint behind, which left a 768-991px band where a
   full-height 180-game list rendered as an absolutely-positioned panel with a
   border and shadow and no scroll box. It gets its own scroll box: without one
   the list pushed the document to 3,498px and the rest of the nav became
   unreachable. */
@media (max-width: 991px) {
	/* Needs the #mainMenu prefix that the other resets in this block do not:
	   the border is declared at `#mainMenu .gt-gm` (1,1,0) so it can beat
	   style.css's `border: none`, and a bare `.gt-gm { border: 0 }` (0,1,0)
	   loses to it. Media queries add no specificity. Left unprefixed, the
	   collapsed full-width panel drew a hairline down both screen edges. */
	#mainMenu .gt-gm {
		border: 0;
	}
	.gt-gm {
		position: static;
		float: none;
		width: auto;
		max-width: none;
		border-radius: 0;
		box-shadow: none;
	}
	.gt-gm-body {
		max-height: 60vh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 10px 4px 12px;
	}
	/* style.css:452 `#mainMenu .navbar-nav .dropdown-menu a` (1,2,1) applies
	   below 979px and paints every link in this panel #1f1f1f with 20px of
	   padding and a top border -- dark slabs on a white panel. It has to be
	   answered at equal specificity; a bare `.gt-gm-row > a` (0,1,1) loses. */
	#mainMenu .navbar-nav .gt-gm-row > a,
	#mainMenu .navbar-nav a.gt-gm-all {
		background-color: transparent;
		border-top: 0;
		margin-top: 0 !important;
	}
	/* The chips are NOT in the group above. They want a border on all four
	   sides, so `border-top: 0` left them as pills with the top edge missing --
	   measured 0px top / 1px elsewhere at 390px. Restating the whole border at
	   this specificity is what takes style.css's 1px #323232 top edge back
	   without also removing the chip's own outline.

	   No background-color here either: the unscoped `#mainMenu .navbar-nav
	   .gt-gm-chips a` rule already ties style.css at (1,2,1) and wins on sheet
	   order, so the chip fill is handled. Restating it would have overridden
	   that fill with transparent and undone the dark-theme chip. */
	#mainMenu .navbar-nav .gt-gm-chips a {
		margin-top: 0 !important;
		padding: 6px 11px;
		border: 1px solid var(--c-border);
	}
	[data-theme="dark"] #mainMenu .navbar-nav .gt-gm-chips a {
		border-color: #3d434b;
	}
	#mainMenu .navbar-nav a.gt-gm-all {
		padding: 0;
	}
}
@media (max-width: 767px) {
	.gt-gm-list {
		column-count: 1;
	}
}
/* --- 17b. GAMES MENU: per-game detail panes (home page only) ---
   The row is now a wrapper holding the game link plus, where the game has
   versions/types/guides, a chevron button. Two separate targets on purpose:
   the name still navigates to the category page, and only the chevron opens
   the detail pane. The old fly-out menu made the whole item a hover trigger,
   so the 23 games with sub-items could not be reached directly at all, and
   on touch could not be opened either. */
.gt-gm-row {
	display: flex;
	align-items: stretch;
	border-radius: 6px;
	break-inside: avoid;
}
.gt-gm-row > a {
	flex: 1 1 auto;
	min-width: 0;
	display: block;
	padding: 7px 8px;
	border-radius: 6px;
	font-size: 14px;
	line-height: 1.3;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#mainMenu .navbar-nav .gt-gm-row > a {
	color: var(--c-text);
}
.gt-gm-row:hover > a,
.gt-gm-row > a:focus-visible {
	background: rgba(0, 0, 0, .05);
}
/* flex-shrink:0 keeps the chevron at full size when a long game name is
   being ellipsised beside it. */
.gt-gm-more {
	flex: 0 0 auto;
	width: 26px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 6px;
	font-size: 17px;
	line-height: 1;
	color: var(--c-text-muted, #9a9a9a);
	cursor: pointer;
}
.gt-gm-more:hover {
	background: rgba(0, 0, 0, .08);
	color: var(--c-text);
}
.gt-gm-more:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -3px;
}
.gt-gm-pane {
	padding: 2px 0 0;
}
.gt-gm-back {
	display: inline-flex;
	align-items: center;
	padding: 0 0 10px;
	background: none;
	border: 0;
	font-size: 13px;
	font-weight: 600;
	/* Muted, not brand red. "View all servers" two lines below is the action
	   worth spending the accent on; two red controls stacked either side of
	   the game title read as equally weighted and neither wins the eye. */
	color: var(--c-text-muted, #777);
	cursor: pointer;
}
.gt-gm-back:hover {
	color: var(--c-text);
}
.gt-gm-back:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}
.gt-gm-ptitle {
	margin: 0 0 2px;
	font-size: 17px;
	font-weight: 700;
	color: var(--c-text);
}
.gt-gm-all {
	display: inline-block;
	margin-bottom: 4px;
	font-size: 13px;
}
#mainMenu .navbar-nav a.gt-gm-all {
	color: var(--c-brand-text);
}
.gt-gm-sec {
	margin: 16px 0 8px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--c-text-muted, #8a8a8a);
}
.gt-gm-sec span {
	margin-left: 4px;
	font-weight: 400;
	letter-spacing: 0;
	opacity: .7;
}
/* Chips rather than another column list: section sizes run from 1 item
   (Silkroad) to 51 (Mu Online), and a wrapping chip row absorbs that range
   without leaving a mostly-empty column grid at the small end. */
.gt-gm-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.gt-gm-chips a {
	display: inline-block;
	padding: 6px 11px;
	border: 1px solid var(--c-border);
	border-radius: 20px;
	font-size: 13px;
	line-height: 1.25;
	text-decoration: none;
}
#mainMenu .navbar-nav .gt-gm-chips a {
	color: var(--c-text);
	background: #fff;
}
#mainMenu .navbar-nav .gt-gm-chips a:hover {
	border-color: #6b737d;
	background: var(--c-surface-2);
	color: var(--c-text);
}
/* No max-height or overflow here on purpose: .gt-gm-body is the scroll
   container for the whole panel, and giving the detail pane its own would nest
   a second scrollbar inside the first. The tallest pane on dev is World of
   Warcraft at 38 chips / 459px, comfortably inside the body cap. */

[data-theme="dark"] #mainMenu .navbar-nav .gt-gm-row > a {
	color: var(--gt-text);
}
[data-theme="dark"] .gt-gm-row:hover > a,
[data-theme="dark"] .gt-gm-row > a:focus-visible {
	background: rgba(255, 255, 255, .06);
}
[data-theme="dark"] .gt-gm-more {
	color: var(--gt-text-3);
}
[data-theme="dark"] .gt-gm-more:hover {
	background: rgba(255, 255, 255, .09);
	color: var(--gt-text);
}
[data-theme="dark"] .gt-gm-ptitle {
	color: var(--gt-text);
}
[data-theme="dark"] #mainMenu .navbar-nav a.gt-gm-all {
	color: var(--gt-brand-text);
}
/* The light-theme muted colours below are --c-* tokens, and dark.css does not
   redefine those — it declares a parallel --gt-* set. So every muted colour in
   this section needs an explicit dark value or it stays at its light value:
   --c-text-muted (#666) on --gt-card is 2.85:1 and fails.

   That means ALL FOUR of these, not just the two in the detail pane. The
   section-16 A-Z heading (.gt-gm-label) and the no-results line
   (.gt-gm-empty) were left behind on the first pass and measured 2.85:1 on
   dev. */
[data-theme="dark"] .gt-gm-back,
[data-theme="dark"] .gt-gm-sec,
[data-theme="dark"] .gt-gm-label,
[data-theme="dark"] .gt-gm-empty {
	color: var(--gt-text-2);
}
[data-theme="dark"] .gt-gm-back:hover {
	color: var(--gt-text);
}
/* Fill has to be --gt-raised, not --gt-card: the panel itself is --gt-card, so
   a --gt-card chip on it is a 1:1 match and the chip disappears into the
   background with only a 1.4:1 border left to define it. */
[data-theme="dark"] .gt-gm-chips a {
	border-color: #3d434b;
}
[data-theme="dark"] #mainMenu .navbar-nav .gt-gm-chips a {
	background: var(--gt-raised);
	color: var(--gt-text);
}
[data-theme="dark"] #mainMenu .navbar-nav .gt-gm-chips a:hover {
	border-color: #6b737d;
	background: var(--gt-head-a);
	color: var(--gt-text);
}

/* 44px is the accessible minimum for a touch target. Scoped to #mainMenu for
   the same reason as the block above: style.css:452 sets `padding: 20px` on
   these links below 979px and a bare selector cannot take it back. */
@media (max-width: 991px) {
	#mainMenu .navbar-nav .gt-gm-row > a {
		min-height: 44px;
		display: flex;
		align-items: center;
		padding: 10px 12px;
		font-size: 15px;
	}
	/* The chevron is the only control here that is not the full row width. */
	.gt-gm-more {
		width: 44px;
		font-size: 20px;
	}
	/* Padding only. The scroll box is .gt-gm-body's, above. */
	#gtGameDetail {
		padding: 0 4px;
	}
}

/* ---------------------------------------------------
    18. ACCOUNT PAGES (My Sites, My Ads, contests, jobs)
    All five manage-* views share #account-nav and a
    .table_responsive table, so this restyles the family
    once. The 2012-era pieces being replaced: an olive
    #6e9e0e thead (style.css:2827-2834), a bg-dark navbar
    slab on a light page, and table-bordered's full grid.
    Everything below is CSS-only -- the markup already
    carries title tooltips and sensible classes.
----------------------------------------------------- */

/* --- Account sub-nav: dark slab -> theme card.
   Bootstrap's .bg-dark carries !important, so the override must too. The
   anchors have no .nav-link class, so colors are set on the li a directly. */
#account-nav .navbar.bg-dark {
	background-color: #fff !important;
	border: 1px solid var(--c-border);
	border-radius: 10px;
}
#account-nav .navbar-nav li a {
	display: inline-block;
	padding: 7px 12px;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--c-text);
}
#account-nav .navbar-nav li a:hover,
#account-nav .navbar-nav li a:focus-visible {
	background: rgba(0, 0, 0, .05);
	color: var(--c-text);
}
/* The Add Server button keeps its .btn-danger look -- just make sure the
   link padding above never reaches it. */
#account-nav .navbar-nav li a.btn {
	padding: 8px 16px;
	color: var(--c-on-dark);
}
/* navbar-dark ships a white hamburger icon -- invisible on the light card.
   Inverting the SVG beats maintaining a second icon. */
#account-nav .navbar-toggler {
	border-color: var(--c-border-strong);
}
#account-nav .navbar-toggler-icon {
	filter: invert(1) grayscale(1);
}

[data-theme="dark"] #account-nav .navbar.bg-dark {
	background-color: var(--gt-card) !important;
	border-color: var(--gt-line);
}
[data-theme="dark"] #account-nav .navbar-nav li a {
	color: var(--gt-text);
}
[data-theme="dark"] #account-nav .navbar-nav li a:hover,
[data-theme="dark"] #account-nav .navbar-nav li a:focus-visible {
	background: rgba(255, 255, 255, .06);
	color: var(--gt-text);
}
[data-theme="dark"] #account-nav .navbar-nav li a.btn {
	color: var(--c-on-dark);
}
[data-theme="dark"] #account-nav .navbar-toggler {
	border-color: var(--gt-line);
}
[data-theme="dark"] #account-nav .navbar-toggler-icon {
	filter: none;
}

/* --- The table: full-grid table-bordered -> bordered card with row
   separators. border-collapse must be separate for the radius to clip. */
.table_responsive .table {
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: 10px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	margin-bottom: 0;
}
.table_responsive .table td,
.table_responsive .table th {
	border: 0;
	border-bottom: 1px solid var(--c-border-soft);
	padding: 12px 14px;
	font-size: 14px;
	vertical-align: middle;
}
.table_responsive .table tbody tr:last-child td {
	border-bottom: 0;
}
/* The olive header. style.css paints it at up to (0,3,1)
   (.table_responsive thead tr:nth-of-type(odd) th), so the replacement
   mirrors the same selector set; this file loads last and wins the tie.
   Typography matches the site's section-label pattern (gt-gm-sec). */
.table_responsive thead tr:nth-of-type(odd) {
	background: var(--c-surface-2);
}
.table_responsive .table thead th,
.table_responsive thead th,
.table_responsive thead tr:nth-of-type(odd) th {
	background: var(--c-surface-2);
	color: var(--c-text-muted);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .07em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--c-border);
}
.table_responsive .table tbody tr:hover td {
	background: #f7f7f7;
}
/* Global links are bold brand-red; at table density that reads as shouting.
   Same color, book weight. */
.table_responsive .table td a {
	font-weight: 400;
}

/* --- Cell semantics. Premium star in the site's amber; the "none" cross
   fades back; lock colors keep their meaning with dark-safe variants. */
.table_manage_sites .fa-star {
	color: #e8920f;
}
.table_manage_sites .fa-circle-xmark {
	color: var(--c-border-strong);
}
.info-links li a {
	display: inline-block;
	padding: 4px 6px;
	font-size: 15px;
	color: var(--c-text-muted);
}
.info-links li a:hover,
.info-links li a:focus-visible {
	color: var(--c-brand-text);
}

[data-theme="dark"] .table_responsive .table {
	background: var(--gt-card);
	border-color: var(--gt-line);
}
[data-theme="dark"] .table_responsive .table tbody tr:hover td {
	background: var(--gt-raised);
}
[data-theme="dark"] .table_manage_sites .fa-circle-xmark {
	color: var(--gt-text-3);
}
[data-theme="dark"] .info-links li a {
	color: var(--gt-text-2);
}
[data-theme="dark"] .info-links li a:hover,
[data-theme="dark"] .info-links li a:focus-visible {
	color: var(--gt-brand-text);
}
/* #d8000c / #4f8a10 read fine on white but sink on the dark rows. */
[data-theme="dark"] .lock {
	color: #ff7b82;
}
[data-theme="dark"] .unlock {
	color: #7ec97f;
}

/* --- Mobile: the stacked-card layout in style.css labels each cell via
   td:before, but .table_manage_sites lost its label set somewhere along the
   way (it survives only in the style--.css backup, and in the OLD column
   order). Restored here to match today's columns: Site Id, Site Title,
   Prem, Site Url, Category, Membership Expires On, Status, Action. */
@media ( max-width: 768px ) {
	.table_manage_sites td:nth-of-type(1):before { content: "Site Id"; }
	.table_manage_sites td:nth-of-type(2):before { content: "Site Title"; }
	.table_manage_sites td:nth-of-type(3):before { content: "Prem"; }
	.table_manage_sites td:nth-of-type(4):before { content: "Site Url"; }
	.table_manage_sites td:nth-of-type(5):before { content: "Category"; }
	.table_manage_sites td:nth-of-type(6):before { content: "Membership Expires On"; }
	.table_manage_sites td:nth-of-type(7):before { content: "Status"; }
	.table_manage_sites td:nth-of-type(8):before { content: "Action"; }
	.table_responsive td:before {
		color: var(--c-text-muted);
		font-size: 11px;
		font-weight: 600;
		letter-spacing: .05em;
		text-transform: uppercase;
		top: 50%;
		transform: translateY(-50%);
	}
	/* Each stacked row becomes its own small card. */
	.table_responsive .table {
		border: 0;
		background: transparent;
	}
	.table_responsive tr {
		background: #fff;
		border: 1px solid var(--c-border) !important;
		border-radius: 8px;
		margin-bottom: 10px;
		overflow: hidden;
	}
	[data-theme="dark"] .table_responsive tr {
		border-color: var(--gt-line) !important;
	}
	[data-theme="dark"] .table_responsive .table {
		background: transparent;
	}
}