/* =============================================================================
   streaming.css -- Helbreath Nemesis restyle
   =============================================================================

   An OVERRIDE LAYER, not a replacement. Load it AFTER nemesis.css and it wins on
   cascade order; remove the <link> and the site is byte-for-byte what it was.
   nemesis.css is never edited, so there is nothing to merge back and nothing to
   undo by hand.

       <link href="/styles/nemesis.css"   rel="stylesheet" type="text/css" />
       <link href="/styles/streaming.css" rel="stylesheet" type="text/css" />

   Every selector below mirrors one that already exists in nemesis.css, at the
   same or higher specificity -- that is why almost nothing here needs
   !important. The one exception is the login form, whose colours are inline
   styles in nemesisint.php and can only be beaten with it.

   WHAT THIS DOES NOT TOUCH, deliberately:
     - article.event.* (apocalypse / crusade / heldenian / summonevent) -- those
       are the calendar page's background images, a different component from the
       homepage's .event-item.
     - .calendar, the datepicker, .tableguide, the guide backgrounds.
     - timeTo.css, which owns the countdown digits.
     - Bootstrap's grid and the four breakpoints (767 / 992 / 1510 / 1820).

   Fonts are the two already loaded by header.php: Almendra SC for display,
   Quattrocento for text. No new network requests.

   Design in one line: keep the dark fantasy, drop the flat grey. Warm near-black
   ground, parchment text instead of pure white, and the logo's ember used only
   where it means something -- the next event, a value in a table, a hover.
   ========================================================================== */

:root {
	--ns-ink:     #15120d;   /* warm near-black; replaces the flat #3B3B3B     */
	--ns-panel:   #1e1913;   /* forged panel: cards, tables, nav               */
	--ns-panel2:  #262019;   /* raised: header bars, hover                     */
	--ns-line:    #3a3226;   /* hairline                                       */
	--ns-text:    #e8dcc8;   /* parchment; easier than #fff on a dark ground   */
	--ns-muted:   #a2947e;   /* labels, secondary                              */
	--ns-ember:   #e8621f;   /* the logo's flame -- used sparingly             */
	--ns-flame:   #f7a83c;   /* values, links, highlights                      */
}

/* -----------------------------------------------------------------------------
   1. GROUND
   The old #3B3B3B is what makes the page feel washed: it is light enough to grey
   the artwork and dark enough to dull the text. A warmer, deeper ground lets the
   orange in the logo and the sprites carry the colour instead.
   -------------------------------------------------------------------------- */
body {
	color: var(--ns-text);
	background:
		radial-gradient(1100px 420px at 50% -140px, rgba(232, 98, 31, .10), transparent 70%),
		var(--ns-ink);
	line-height: 1.65;
}

/* -----------------------------------------------------------------------------
   2. HEADINGS AND LINKS
   Both keep Almendra SC. h1 gains a drawn ember rule (::after, no markup) and h2
   a hairline, so sections separate without extra elements in the PHP.
   -------------------------------------------------------------------------- */
h1 {
	font-size: 1.9em;
	letter-spacing: .06em;
	color: var(--ns-text);
	margin: 46px 0 22px;
}
h1::after {
	content: "";
	display: block;
	width: 190px;
	height: 2px;
	margin: 12px auto 0;
	background: linear-gradient(90deg, transparent, var(--ns-ember), transparent);
}
h2 {
	font-size: 1.4em;
	color: var(--ns-flame);
	letter-spacing: .08em;
	margin: 40px 0 16px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--ns-line);
}
h3 { letter-spacing: .03em; }

a           { color: var(--ns-flame); transition: color .12s ease; }
a:hover     { color: var(--ns-ember); }
.mainpage a { color: var(--ns-flame); }
.mainpage a:hover,
.sidebar a:not(.ui-button):not(.ui-state-default):hover {
	color: var(--ns-ember);
	text-decoration: none;   /* the underline-on-hover reads as a broken link */
}

hr { border-bottom: 1px solid var(--ns-line); }

/* -----------------------------------------------------------------------------
   3. NAVIGATION
   32px was competing with the logo for the top of the page. 19px with real
   letter-spacing reads as a menu, and the black outline text-shadow is dropped:
   it exists to survive a busy background this no longer has.
   -------------------------------------------------------------------------- */
.navbar-nav {
	font-size: 19px;
	text-shadow: none;
	background: var(--ns-panel);
	border: 1px solid var(--ns-line);
	/* NOT table-layout:fixed -- tried, and it forced equal cells that were too
	   narrow for "SUPPORT (1)" and "MY ACCOUNT", so both wrapped onto two lines.
	   Content-sized cells are correct for this menu. */
}

/* The dropdown sat slightly to the RIGHT of the header it belongs to: Bootstrap
   anchors it at left:0 of the cell, so a panel wider than its header hangs off
   to one side instead of straddling it. Centre it on the header instead. */
.navbar-nav > li > .dropdown-menu,
.nav > li > .dropdown-menu {
	left: 50%;
	right: auto;
	transform: translateX(-50%);
	width: auto;
	min-width: 100%;
	margin: 0;
}
.nav > li > a,
.dropdown-menu {
	color: var(--ns-text);
	background: transparent;
}
.nav > li > a {
	padding: 13px 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	border-bottom: 2px solid transparent;
	transition: color .12s ease, background-color .12s ease;
}
.nav > li > a:hover,
.nav > li > a:focus {
	color: var(--ns-flame);
	background: var(--ns-panel2);
	border-bottom-color: var(--ns-ember);
}

/* The dropdown as a panel rather than a bare list, and an ember hover instead of
   the full white inversion, which flashes hard on a dark page. */
.dropdown-menu {
	background: var(--ns-panel2);
	border: 1px solid var(--ns-line);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .55);
	padding: 6px;
}
.dropdown-in > li > a,
.dropdown-menu > li > a { color: var(--ns-muted); }

.dropdown-in > li:hover,
.dropdown-in > li:focus,
.dropdown-in > li > a:hover,
.dropdown-in > li > a:focus,
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
	background-color: var(--ns-panel);
	color: var(--ns-flame);
	border-left: 2px solid var(--ns-ember);
}

/* -----------------------------------------------------------------------------
   4. THE THREE BANNERS (guide / discord / download)
   Images untouched; they just get an edge and a hover so they read as buttons.
   -------------------------------------------------------------------------- */
.row.no-gutters img {
	border: 1px solid var(--ns-line);
	transition: border-color .15s ease, transform .15s ease;
}
.row.no-gutters a:hover img {
	border-color: var(--ns-ember);
	transform: translateY(-2px);
}

/* -----------------------------------------------------------------------------
   5. NEXT EVENTS
   Was: black cards, yellow text, white date blocks, a solid orange name bar --
   four strong colours per card, seven cards, all shouting equally.
   Now: quiet cards, and the ONE that matters is loud. The next event is the first
   child, so :first-child gives it the ember with no PHP change.
   -------------------------------------------------------------------------- */
.event-container { gap: 10px; }

.event-item {
	background-color: var(--ns-panel);
	color: var(--ns-text);
	border: 1px solid var(--ns-line);
	padding: 0;                       /* the children own their padding now */
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.weekday,
.numberday {
	background: var(--ns-panel2);
	color: var(--ns-muted);
}
.weekday {
	font-weight: 400;
	font-size: .72em;
	letter-spacing: .14em;
	text-transform: uppercase;
	padding: 8px 4px 3px;
}
.numberday {
	font-size: 12px;
	margin-top: 0;
	padding: 0 4px 8px;
	font-variant-numeric: tabular-nums;
	border-bottom: 1px solid var(--ns-line);
}

.eventname {
	font-family: 'Almendra SC', serif;
	font-size: 1.05em;
	font-weight: 400;
	background: transparent;
	color: var(--ns-text);
	letter-spacing: .03em;
	margin-top: 0;
	padding: 10px 6px 2px;
}

.duration {
	color: var(--ns-flame);
	font-size: 12px;
	margin-top: 0;
	padding: 0 6px 10px;
	font-variant-numeric: tabular-nums;
}

.countdown-wrapper {
	margin-top: auto;
	background: var(--ns-panel2);
	border-top: 1px solid var(--ns-line);
	padding: 7px 4px 9px;
	width: 100%;
}
.starting {
	color: var(--ns-muted);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	margin-top: 0;
}

/* The next event. Everything else stays quiet so this one is findable at a
   glance -- which is the entire job of this row. */
.event-item:first-child {
	border-color: var(--ns-ember);
	box-shadow: 0 0 0 1px rgba(232, 98, 31, .25), 0 6px 26px rgba(232, 98, 31, .14);
}
.event-item:first-child .eventname { color: var(--ns-flame); }

/* -----------------------------------------------------------------------------
   6. STAT TABLES (experience / levels / other settings)
   The grey .bananastats slab becomes a header bar with an ember rule. Values are
   right-aligned in tabular figures so the numbers form a column instead of
   floating in the middle of the cell.

   :has() scopes the value styling to tables that actually carry a .bananastats
   header, so every other .table on the site (items, rankings, guides) keeps the
   centred layout it was written for. Browsers without :has() simply ignore that
   one block -- the rest still applies.
   -------------------------------------------------------------------------- */
.table {
	background: var(--ns-panel);
	border: 1px solid var(--ns-line);
	margin-bottom: 20px;
}
.table > tbody > tr > th { background: transparent; }
.table > tbody > tr > td {
	background: transparent;
	color: var(--ns-muted);
	padding: 9px 16px;
	border-bottom: 1px solid rgba(58, 50, 38, .55);
}
.table > tbody > tr:last-child > td { border-bottom: 0; }
.table > tbody > tr > td > a { color: var(--ns-flame); }

.table:has(.bananastats) > tbody > tr > td               { text-align: left; }
.table:has(.bananastats) > tbody > tr > td:last-child    {
	text-align: right;
	color: var(--ns-flame);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* The shared header style: .bananastats is also .mainpage > header elsewhere, so
   both are restyled together and stay consistent. 2em bold-900 grey-on-dark was
   heavier than the page's own h1. */
.bananastats,
.mainpage > header,
.sidebar > header {
	background: var(--ns-panel2);
	color: var(--ns-text);
	font-weight: 400;
	font-size: 1.05em;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 12px 16px;
	border-bottom: 1px solid var(--ns-ember);
}

/* -----------------------------------------------------------------------------
   7. VIDEO CARDS
   .bananastats also lands on each video title, which is why they currently sit on
   grey bars. Titles become plain readable text; the card gets an edge and a hover.
   The 14px + 2-line clamp already in nemesis.css is left alone -- it works.
   -------------------------------------------------------------------------- */
.thumbnail {
	background: var(--ns-panel);
	border: 1px solid var(--ns-line);
	padding: 0;
	transition: border-color .15s ease, transform .15s ease;
}
.thumbnail:hover { border-color: var(--ns-ember); transform: translateY(-2px); }
.thumbnail .caption { color: var(--ns-text); padding: 10px 14px 12px; }

.thumbnail.video-card .caption h3,
.thumbnail .caption h3.bananastats {
	background: transparent;
	color: var(--ns-text);
	font-family: 'Quattrocento', serif;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	border-bottom: 0;
	padding: 0;
}

/* Carousel arrows: dim until wanted. */
.carousel-control { opacity: .35; transition: opacity .15s ease; }
.carousel-control:hover { opacity: 1; }

/* -----------------------------------------------------------------------------
   8. LOGIN FORM (logged-out homepage)
   The only place !important is used, and it is unavoidable: these colours are
   INLINE styles in nemesisint.php, and inline beats any stylesheet selector.
   The cream-on-orange panel is the one element that never matched the rest of
   the site.
   -------------------------------------------------------------------------- */
form.login {
	background-color: var(--ns-panel) !important;
	border: 1px solid var(--ns-line) !important;
	border-top: 1px solid var(--ns-line);
	border-bottom: 1px solid var(--ns-line);
	padding: 10px !important;
	gap: 10px;
}
form.login label            { color: var(--ns-muted) !important; }
form.login .form-control    {
	background-color: var(--ns-ink) !important;
	border-color: var(--ns-line) !important;
	color: var(--ns-text) !important;
}
form.login .form-control:focus { border-color: var(--ns-ember) !important; }
form.login .btn-primary     {
	background-color: var(--ns-ember) !important;
	border-color: var(--ns-ember) !important;
	color: #14100b !important;
	font-weight: 700;
}
form.login .btn-primary:hover { background-color: var(--ns-flame) !important;
                                border-color: var(--ns-flame) !important; }
/* the second button is the "lost password" one, styled as a quiet link */
form.login .btn-primary[onclick] {
	background-color: transparent !important;
	border-color: var(--ns-line) !important;
	color: var(--ns-muted) !important;
	font-weight: 400;
}
form.login .btn-primary[onclick]:hover {
	border-color: var(--ns-ember) !important;
	color: var(--ns-flame) !important;
}

/* -----------------------------------------------------------------------------
   9. FIXES FOUND ONCE THIS WENT LIVE
   -------------------------------------------------------------------------- */

/* The OPEN dropdown tab went white -- Bootstrap styles .open > a separately from
   :hover, and only :hover was covered here. A white tab above a dark panel was
   the loudest thing on the page. */
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus,
.navbar-nav > .open > a,
.navbar-nav > .open > a:hover,
.navbar-nav > .open > a:focus,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
	background-color: var(--ns-panel2);
	color: var(--ns-flame);
	border-bottom-color: var(--ns-ember);
}

/* levelstats.php is label,label / value,value -- not label,value like the other
   two tables. The generic "last cell is a value" rule turned "Max Stats" into a
   bold orange figure. Only rows whose last cell is actually numeric get it.
   :nth-child(2) of tbody is that label row; exclude it. */
.table:has(.bananastats) > tbody > tr:nth-child(2) > td:last-child {
	color: var(--ns-muted);
	font-weight: 400;
}

/* -----------------------------------------------------------------------------
   10. LIVE PLAYER CAM (nemesisstreaming.php only -- these classes do not exist
       on the current homepage, so this section is inert until that file is used)
   -------------------------------------------------------------------------- */
.ns-hero { margin-top: 18px; margin-bottom: 4px; }

.ns-screen {
	position: relative;
	padding-top: 56.25%;                 /* 16:9 */
	background: var(--ns-panel);
	border: 1px solid var(--ns-line);
	overflow: hidden;
}
.ns-screen iframe {
	position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;
}

/* Platform tabs under the player. Quiet by design: the stream is the thing, the
   choice of platform is a preference most viewers will never touch. */
.ns-tabs {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	flex-wrap: wrap;
}
.ns-tab {
	font: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	padding: 6px 14px;
	background: var(--ns-panel);
	border: 1px solid var(--ns-line);
	color: var(--ns-muted);
	cursor: pointer;
}
.ns-tab:hover { color: var(--ns-flame); border-color: var(--ns-ember); }
.ns-tab.is-on {
	background: var(--ns-panel2);
	color: var(--ns-flame);
	border-color: var(--ns-ember);
}
.ns-tabs-note {
	margin-left: auto;
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ns-muted);
}

.ns-panel {
	height: 100%;
	background: var(--ns-panel);
	border: 1px solid var(--ns-line);
	padding: 18px 20px 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ns-live-row { display: flex; align-items: center; gap: 9px; }
.ns-dot {
	width: 9px; height: 9px; border-radius: 50%;
	background: var(--ns-muted); flex: 0 0 auto;
}
.ns-dot.is-live {
	background: #ff4136;
	box-shadow: 0 0 0 4px rgba(255, 65, 54, .18);
	animation: ns-pulse 1.9s ease-in-out infinite;
}
@keyframes ns-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: .4; }
}
@media (prefers-reduced-motion: reduce) { .ns-dot.is-live { animation: none; } }

.ns-live-label {
	font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
	color: var(--ns-muted);
}

.ns-oncam {
	border-left: 3px solid var(--ns-ember);
	padding: 2px 0 2px 12px;
}
.ns-who  { font-family: 'Almendra SC', serif; font-size: 1.5em; line-height: 1.2;
           color: var(--ns-text); }
.ns-role { font-size: 12px; color: var(--ns-flame); }
.ns-loc  { font-size: 12px; color: var(--ns-muted); }

.ns-pitch {
	/* an h2, but this one sits inside a panel: no rule under it, no big margin */
	font-size: 1.25em; margin: 6px 0 0; padding: 0; border-bottom: 0;
	color: var(--ns-text); letter-spacing: .03em;
}
.ns-copy { margin: 0; font-size: 14px; color: var(--ns-muted); }
.ns-copy b { color: var(--ns-text); }

.ns-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ns-steps li {
	display: grid; grid-template-columns: 18px 1fr; gap: 8px;
	font-size: 13px; color: var(--ns-muted);
}
.ns-steps .n {
	font-family: ui-monospace, Consolas, monospace;
	font-size: 11px; color: var(--ns-ember); padding-top: 2px;
}

.ns-cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 4px; }
.ns-btn {
	display: inline-block; padding: 9px 15px;
	font-size: 13px; font-weight: 700; letter-spacing: .04em;
	border: 1px solid var(--ns-line); background: var(--ns-panel2);
	color: var(--ns-text); text-decoration: none;
}
.ns-btn:hover { border-color: var(--ns-ember); color: var(--ns-flame); text-decoration: none; }
.ns-btn-primary {
	background: var(--ns-ember); border-color: var(--ns-ember); color: #14100b;
}
.ns-btn-primary:hover {
	background: var(--ns-flame); border-color: var(--ns-flame); color: #14100b;
}

.ns-banners { margin-top: 22px; }

@media (max-width: 991px) {
	.ns-panel { margin-top: 14px; height: auto; }
}

/* -----------------------------------------------------------------------------
   11. HEADER
   The markup is three col-lg-* divs sitting DIRECTLY in .container with no .row
   wrapper, so Bootstrap's floats never clear and the three blocks do not share a
   baseline. Rather than fight the floats, the container becomes a flex row here:
   logo left, tagline centred and taking the slack, account right, all vertically
   centred. No PHP is touched.

   Targeted as the first .container in <body>, which is the header and nothing
   else. The !important on text-align is unavoidable: it is an inline style.
   -------------------------------------------------------------------------- */
body > .container:first-of-type {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 18px;
	text-align: left !important;
	padding-top: 6px;
	padding-bottom: 10px;
}
body > .container:first-of-type > [class*="col-"] {
	float: none;
	width: auto;
	padding: 0;
}
body > .container:first-of-type > [class*="col-"]:nth-child(1) {
	flex: 0 0 auto; max-width: 290px;      /* logo */
}
body > .container:first-of-type > [class*="col-"]:nth-child(2) {
	flex: 1 1 320px; text-align: center;   /* tagline + language */
}
body > .container:first-of-type > [class*="col-"]:nth-child(3) {
	flex: 0 0 auto; text-align: right;     /* login / account */
}

/* The tagline is an h2, so it was inheriting the section-heading rule -- hence
   the stray rule under it. In the header it is a tagline, not a section. */
body > .container:first-of-type h2 {
	border-bottom: 0;
	padding-bottom: 0;
	margin: 0 0 4px;
	font-size: 1.6em !important;   /* inline style says 2em */
	color: var(--ns-text);
}
body > .container:first-of-type h2 span { color: var(--ns-flame) !important; }

/* Language flags: a quiet row, not a feature. */
body > .container:first-of-type img[src*="/flags/"] {
	opacity: .75;
	transition: opacity .12s ease;
	border-radius: 2px;
}
body > .container:first-of-type img[src*="/flags/"]:hover { opacity: 1; }

/* Account corner: the Steam avatar as a small round token. */
body > .container:first-of-type .manteinance2 { margin: 0 0 4px; font-size: 13px;
	color: var(--ns-muted); }
body > .container:first-of-type > [class*="col-"]:nth-child(3) img {
	width: 42px; height: 42px; border-radius: 50%;
	border: 1px solid var(--ns-line); display: inline-block;
}

/* GM-only strip. Both the counter and the link are already wrapped in
   checkUserLevel(USER_GM), so this is never rendered for a player -- it just
   should not sit in the middle of the page shouting. Small, muted, out of the
   way. The counter text has no element of its own (it is echoed as a bare text
   node), so give it one -- see the two-line snippet in header.php. */
.ns-gmbar {
	width: 100%;
	order: 99;                    /* last in the flex row: its own line */
	text-align: right;
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ns-muted);
	border-top: 1px solid var(--ns-line);
	padding-top: 6px;
	margin-top: 2px;
}
.ns-gmbar a { color: var(--ns-muted); }
.ns-gmbar a:hover { color: var(--ns-flame); }

/* Until that snippet is applied, at least keep the bare GM SEARCH link quiet. */
a[href="/gmsearch.php"] { font-size: 11px; letter-spacing: .1em;
	text-transform: uppercase; color: var(--ns-muted); }
a[href="/gmsearch.php"]:hover { color: var(--ns-flame); }

/* -----------------------------------------------------------------------------
   12. PORTAL BLOCK (footer link columns -- portalbanner.php)
   The last thing left on the old palette: `background: gray` behind three columns
   of links, which read as a light slab bolted to the bottom of a dark page. Same
   panel treatment as everything else; the .bananastats title bar is already
   handled by section 6.
   -------------------------------------------------------------------------- */
.portal {
	background: var(--ns-panel);
	border: 1px solid var(--ns-line);
	display: block;              /* was display:table, which ignores the columns */
	margin-bottom: 18px;
	padding-bottom: 10px;
	overflow: hidden;            /* contains the floated Bootstrap columns */
}
.portalsubt {
	color: var(--ns-flame);
	text-shadow: none;           /* the black outline existed to survive the grey */
	font-size: 1.15em;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 14px 0 8px;
	border-bottom: 1px solid var(--ns-line);
	margin-bottom: 8px;
}
.portal a       { color: var(--ns-muted); }
.portal a:hover { color: var(--ns-flame); }
.portaler td    { border-bottom: 1px solid rgba(58, 50, 38, .55); }

/* -----------------------------------------------------------------------------
   13. SMALL POLISH
   -------------------------------------------------------------------------- */
.copyrights, .lang { color: var(--ns-muted); }
.opening           { color: var(--ns-flame); }

::selection { background: rgba(232, 98, 31, .35); color: #fff; }

a:focus-visible,
button:focus-visible,
.nav > li > a:focus-visible {
	outline: 2px solid var(--ns-flame);
	outline-offset: 2px;
}


/* ---- account bar on the homepage ----------------------------------------------------
   The logged-in counterpart to the login form, and deliberately the SAME object: same
   panel, same border, same padding, in the same place on the page. Logged out you get the
   fields; logged in you get your links. That is what took MY ACCOUNT out of the nav -- it
   was a menu holding four links that belong in the one strip a returning player already
   looks at. */
.ns-account {
	background-color: var(--ns-panel);
	border: 1px solid var(--ns-line);
	padding: 10px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 26px;
	font-size: 14px;
}
.ns-account a {
	color: var(--ns-text);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	padding-bottom: 1px;
	transition: color .15s, border-color .15s;
}
.ns-account a:hover,
.ns-account a:focus {
	color: var(--ns-flame);
	border-bottom-color: var(--ns-ember);
	text-decoration: none;
}
/* The GM entries, kept visually apart so they do not read as ordinary player links. */
.ns-account a.ns-gm { color: var(--ns-muted); }
.ns-account a.ns-gm:hover { color: var(--ns-flame); }