/* ============================================================
   Ragnarok Pinas - FluxCP theme
   Layers on top of flux.css + Bootstrap 3. No character art -
   branding is typographic + small abstract marks only.
   ============================================================ */

:root {
	/* Retuned 2026-09-14 to match the official Ragnarok Pinas logo mark -
	   a royal-blue sunburst emblem with gold rays and a cyan wordmark.
	   Sampled straight from the artwork: blue ~#024996, gold ~#f3bc16,
	   cyan ~#33d6f6. The navy/gold family below are shades of that same
	   blue and gold (not the old, unrelated near-black + purple pairing),
	   so navbar/footer chrome now reads as "the logo's colors, darkened"
	   rather than a different palette placed next to the real logo. */
	--rop-navy:        #050f24;
	--rop-navy-mid:    #0a1c3f;
	--rop-navy-soft:   #102649;
	--rop-navy-border: #1c3868;
	--rop-royal:       #0d4f9e;
	--rop-royal-bright:#1f7fd6;
	--rop-cyan:        #33d6f6;
	--rop-gold:        #e0aa1f;
	--rop-gold-bright: #ffd35c;
	--rop-gold-soft:   rgba(224, 170, 31, 0.16);
	--rop-gold-dark:   #b8862a;
	--rop-glow:        rgba(224, 170, 31, 0.35);
	--rop-bg:          #f2f3f7;
	--rop-card:        #ffffff;
	--rop-card-alt:    #f8f9fb;
	--rop-border:      #e6e8ef;
	--rop-text:        #1f2430;
	--rop-text-muted:  #6b7280;
	--rop-radius:      10px;
	--rop-shadow:      0 2px 10px rgba(16, 20, 31, 0.06), 0 1px 2px rgba(16, 20, 31, 0.04);
	--rop-shadow-lg:   0 12px 32px rgba(16, 20, 31, 0.10);
	--rop-ease:        cubic-bezier(.4,0,.2,1);

	/* Height of the live status bar fixed above the navbar (2026-09-14) --
	   everything that positions itself relative to "below the fixed
	   header" (the navbar itself, page top padding, hero top padding,
	   sticky wiki sidebar, sticky skill-balance toolbar) adds this in via
	   calc() so there's exactly one place to retune the bar's height. */
	--rop-statusbar-h: 32px;
}
@media (max-width: 767px) {
	:root { --rop-statusbar-h: 30px; }
}

/* ---------- base ---------- */

html, body {
	background: var(--rop-bg);
	color: var(--rop-text);
	font-family: 'Inter', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

/* Faint HUD-style grid texture behind every page - barely-there, adds
   depth without hurting readability. */
body {
	background-image:
		linear-gradient(rgba(16,20,31,0.025) 1px, transparent 1px),
		linear-gradient(90deg, rgba(16,20,31,0.025) 1px, transparent 1px);
	background-size: 42px 42px;
	background-position: center top;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Rajdhani', 'Inter', sans-serif;
	font-weight: 600;
	color: var(--rop-text);
	letter-spacing: 0.01em;
}

a {
	color: var(--rop-gold-dark);
	transition: color .15s var(--rop-ease);
}
a:hover, a:focus {
	color: var(--rop-navy);
	text-decoration: none;
}

::selection { background: var(--rop-gold-soft); }

/* thin, understated scrollbar - webkit only, no-op elsewhere */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--rop-bg); }
::-webkit-scrollbar-thumb { background: #cfd3de; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--rop-gold); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ---------- live status bar (2026-09-14) ---------- */

.rop-status-bar {
	position: fixed;
	top: 0; left: 0; right: 0;
	height: var(--rop-statusbar-h);
	z-index: 1031; /* above .navbar-fixed-top's default 1030 */
	background: rgba(5, 15, 36, 0.75);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid rgba(224, 170, 31, 0.22);
	overflow: hidden;
}
/* On pages without a hero image behind them (everything except the
   homepage), the translucent blur above picks up whatever light page
   content has scrolled underneath it instead of a dark backdrop, which
   reads as the status bar "going bright" (most noticeable on the Wiki's
   light content area once you scroll or jump to a section). Pages with
   the hero keep the translucent blur; everything else gets a near-opaque
   background so the bar always stays dark regardless of what's behind it. */
body:not(.rop-has-hero) .rop-status-bar {
	background: rgba(5, 15, 36, 0.96);
	/* The blur is GPU-composited work that has to redo itself as content
	   scrolls behind this fixed bar; at 96% opacity it isn't buying any
	   visible frosted-glass effect anymore, but it was still costing a
	   recomposite on every scroll frame. Dropping it removes that cost
	   entirely on every page except the homepage hero, where the blur is
	   still the whole point. */
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}
.rop-status-bar-inner {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 22px;
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
}
.rop-status-bar-inner::-webkit-scrollbar { display: none; }
.rop-status-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: #b7bdd1;
	white-space: nowrap;
	letter-spacing: .01em;
}
.rop-status-value {
	color: #f0f1f6;
	font-weight: 600;
}
.rop-status-value-online  { color: #3ee07a; }
.rop-status-value-offline { color: #ff5c6c; }
.rop-status-value-unknown { color: #9aa0b4; }
.rop-status-value-active   { color: #3ee07a; }
.rop-status-value-inactive { color: #9aa0b4; }
.rop-status-mono {
	font-variant-numeric: tabular-nums;
	font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
	letter-spacing: 0;
}
.rop-status-dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
	background: #9aa0b4;
}
.rop-status-dot-online {
	background: #3ee07a;
	box-shadow: 0 0 6px 2px rgba(62, 224, 122, 0.65);
	animation: rop-status-pulse 1.8s ease-in-out infinite;
}
.rop-status-dot-offline {
	background: #ff5c6c;
	box-shadow: 0 0 6px 2px rgba(255, 92, 108, 0.65);
}
.rop-status-dot-unknown {
	background: #9aa0b4;
	box-shadow: none;
}
@keyframes rop-status-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: .45; }
}

/* Hover/focus tooltip on the Happy Hour / Pinas Blessing status items.
   This is a single portal element (see main/statusbar.php), positioned by
   JS over whichever item is hovered/focused -- NOT nested inside
   .rop-status-item, because .rop-status-bar is a fixed-height strip with
   overflow:hidden (and .rop-status-bar-inner has overflow-x:auto, which
   forces its overflow-y to clip too), so anything positioned inside it
   that pokes out below gets silently cut off instead of floating over the
   page. Living outside that box as position:fixed sidesteps the clipping
   entirely. */
.rop-status-item-hoverable {
	position: relative;
	cursor: pointer;
}
.rop-status-tooltip-portal {
	position: fixed;
	transform: translateX(-50%);
	width: max-content;
	max-width: min(240px, 70vw);
	background: rgba(5, 15, 36, 0.97);
	border: 1px solid rgba(224, 170, 31, 0.35);
	border-radius: 6px;
	padding: 8px 10px;
	font-size: 11.5px;
	line-height: 1.45;
	color: #d7dae6;
	letter-spacing: normal;
	white-space: normal;
	text-align: left;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
	opacity: 0;
	visibility: hidden;
	transition: opacity .15s ease, visibility .15s ease;
	z-index: 1032; /* above .rop-status-bar's 1031 */
	pointer-events: none;
}
.rop-status-tooltip-portal-visible {
	opacity: 1;
	visibility: visible;
}
.rop-status-tooltip-remaining {
	display: none;
	margin-top: 4px;
	color: var(--rop-gold, #e0aa1f);
	font-weight: 600;
}

/* ---------- navbar ---------- */

.rop-navbar.navbar-inverse {
	/* Translucent per 2026-09-14 request (was 0.88 opaque) - the backdrop
	   blur keeps nav text legible over busy page content underneath. */
	background: rgba(11, 14, 25, 0.55);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border: none;
	box-shadow: 0 2px 24px rgba(0,0,0,0.28);
	margin-bottom: 0;
	/* Sits below the live status bar, which is fixed at top:0 above it. */
	top: var(--rop-statusbar-h);
	/* NOT position:relative - .navbar-fixed-top from Bootstrap already sets
	   position:fixed and must win, or the navbar stops sticking to the top.
	   A fixed element is already a valid containing block for the ::after
	   shimmer line below, so nothing else needs to change. */
}
/* Same fix as the status bar above: keep the navbar solidly dark on
   every page that isn't the hero homepage, so it never brightens from
   light content (like the Wiki's white cards) scrolling underneath it. */
body:not(.rop-has-hero) .rop-navbar.navbar-inverse {
	background: rgba(11, 14, 25, 0.96);
	/* See the matching comment on .rop-status-bar above - dropping the
	   blur removes the per-scroll-frame recompositing cost. */
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}
.rop-navbar::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: -1px;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--rop-gold) 20%, var(--rop-gold-bright) 50%, var(--rop-gold) 80%, transparent);
	background-size: 200% 100%;
	animation: rop-shimmer 6s linear infinite;
	opacity: .8;
}
@keyframes rop-shimmer {
	from { background-position: 200% 0; }
	to   { background-position: -200% 0; }
}

.rop-brand.navbar-brand {
	display: flex;
	align-items: center;
	gap: 9px;
	height: auto;
	padding: 14px 15px;
	font-family: 'Rajdhani', sans-serif;
	font-weight: 700;
	letter-spacing: .04em;
	color: #f4f1e8 !important;
}
.rop-brand.navbar-brand:focus,
.rop-brand.navbar-brand:active,
.rop-brand.navbar-brand img:focus {
	outline: none;
}
.rop-logo-mark {
	flex-shrink: 0;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	object-fit: cover;
	filter: drop-shadow(0 0 5px var(--rop-glow));
	transition: transform .4s var(--rop-ease);
}
.rop-brand:hover .rop-logo-mark {
	transform: rotate(8deg) scale(1.05);
}
.rop-brand-text {
	text-transform: uppercase;
	font-size: 16px;
}

.rop-navbar .navbar-nav > li > a {
	color: #cfd3de;
	font-weight: 500;
	padding: 17px 16px;
	position: relative;
	transition: color .15s var(--rop-ease);
}
.rop-navbar .navbar-nav > li > a::after {
	content: '';
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 12px;
	height: 2px;
	background: var(--rop-gold);
	box-shadow: 0 0 8px var(--rop-glow);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .2s var(--rop-ease);
}
.rop-navbar .navbar-nav > li > a:hover,
.rop-navbar .navbar-nav > li > a:focus,
.rop-navbar .navbar-nav > .open > a {
	color: #ffffff;
	background: transparent;
}
.rop-navbar .navbar-nav > li > a:hover::after,
.rop-navbar .navbar-nav > .open > a::after {
	transform: scaleX(1);
}
/* Wiki: a standalone pill button in the navbar, not a dropdown - visually
   distinct from the plain text nav links so it reads as clickable at a
   glance. */
.rop-navlink-standalone {
	display: flex;
	align-items: center;
}
.rop-navlink-standalone > a {
	margin: 11px 0;
	padding: 7px 16px !important;
	border-radius: 999px;
	border: 1px solid rgba(224, 170, 31, 0.45);
	background: rgba(224, 170, 31, 0.08);
	color: #f2ede0 !important;
	font-weight: 600 !important;
	transition: background .15s var(--rop-ease), border-color .15s var(--rop-ease), color .15s var(--rop-ease), transform .15s var(--rop-ease);
}
.rop-navlink-standalone > a::after { content: none !important; }
.rop-navlink-standalone > a:hover,
.rop-navlink-standalone > a:focus {
	background: var(--rop-gold-bright) !important;
	border-color: var(--rop-gold-bright);
	color: #241a06 !important;
	transform: translateY(-1px);
	box-shadow: 0 0 16px 2px var(--rop-glow), 0 6px 16px rgba(224,170,31,0.32);
}
/* Suppress the browser's default square focus-ring on click -- it clashed
   badly against these rounded pill buttons (looked like a stray box drawn
   over the button). The :hover/:focus gold-fill state above already gives
   a clear visual cue, so nothing is lost by dropping the outline here. */
.rop-navlink-standalone > a:focus,
.rop-navlink-standalone > a:active {
	outline: none;
}

/* Admin Menu dropdown-toggle: previously plain Bootstrap navbar-inverse
   markup with no pill styling of its own, so it looked visually
   inconsistent next to the other nav pills and its hover/open state fell
   back to Bootstrap's default (a near-black background) -- exactly the
   "menu buttons still dark on hover" complaint. Given the same pill look
   and the same bright gold glow on hover/open as the rest of the nav. */
.rop-navbar .dropdown-toggle {
	display: inline-flex !important;
	align-items: center;
	margin: 11px 0;
	padding: 7px 16px !important;
	border-radius: 999px;
	border: 1px solid rgba(224, 170, 31, 0.45);
	background: rgba(224, 170, 31, 0.08);
	color: #f2ede0 !important;
	font-weight: 500;
	transition: background .15s var(--rop-ease), border-color .15s var(--rop-ease), color .15s var(--rop-ease), transform .15s var(--rop-ease), box-shadow .15s var(--rop-ease);
}
.rop-navbar .dropdown-toggle:hover,
.rop-navbar .dropdown-toggle:focus,
.rop-navbar .open > .dropdown-toggle,
.rop-navbar .open > .dropdown-toggle:hover,
.rop-navbar .open > .dropdown-toggle:focus {
	background: var(--rop-gold-bright) !important;
	border-color: var(--rop-gold-bright) !important;
	color: #241a06 !important;
	transform: translateY(-1px);
	box-shadow: 0 0 16px 2px var(--rop-glow), 0 6px 16px rgba(224,170,31,0.32);
}
.rop-navbar .dropdown-toggle:focus,
.rop-navbar .dropdown-toggle:active {
	outline: none;
}
.rop-navbar .dropdown-toggle .caret {
	border-top-color: #f2ede0;
	margin-left: 4px;
}
.rop-navbar .dropdown-toggle:hover .caret,
.rop-navbar .dropdown-toggle:focus .caret,
.rop-navbar .open > .dropdown-toggle .caret {
	border-top-color: #241a06;
}

/* 2026-09-14 nav redesign: flex layout so the Donate/Discord/Login group
   can be pushed to the far right with margin-left:auto, regardless of how
   many links sit on the left (Server Info, Wiki, admin-only Admin Menu). */
.rop-navbar .navbar-nav {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	/* 2026-09-14 spacing calibration: one shared gap for every pill button
	   (Server Info/Wiki/Admin Menu/Donate/Discord/Facebook) instead of each
	   link carrying its own left/right margin -- keeps the rhythm between
	   buttons even on both sides of the auto-margin split instead of
	   drifting depending on how many items land on each side. */
	column-gap: 8px;
	row-gap: 8px;
}
.rop-nav-right-start {
	margin-left: auto;
}
.rop-nav-discord,
.rop-nav-facebook {
	display: inline-flex !important;
	align-items: center;
	gap: 7px;
}
.rop-nav-discord svg,
.rop-nav-facebook svg { flex-shrink: 0; }

/* Login / My Account / Logout: visually separated from the rest of the
   menu with a divider and its own gap. My Account / LOGIN reads as the
   primary action (solid gold pill); when logged in, a "Logged in as X"
   note and a distinct (ghost, red-tinted on hover) Logout button join it. */
.rop-nav-login {
	/* !important needed: Bootstrap's ".nav > li { display: block; }" (an
	   element+class selector) outranks a single-class selector like this
	   one, so without it the login group silently falls back to block and
	   stacks its status text / My Account / Logout vertically again. */
	display: flex !important;
	flex-wrap: nowrap;
	flex-shrink: 0;
	align-items: center;
	margin-left: 14px;
	padding-left: 14px;
	border-left: 1px solid rgba(255, 255, 255, 0.16);
}
.rop-nav-login-status {
	color: rgba(255, 255, 255, 0.55);
	font-size: 11.5px;
	margin-right: 2px;
	white-space: nowrap;
	flex-shrink: 0;
}
.rop-nav-login-status strong {
	color: var(--rop-gold-bright);
	font-weight: 600;
}
.rop-nav-login > a:not(.rop-nav-logout) {
	margin: 0 6px !important;
	padding: 7px 18px !important;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--rop-gold-bright), var(--rop-gold-dark));
	color: #241a06 !important;
	font-weight: 700 !important;
	letter-spacing: .03em;
	white-space: nowrap;
	flex-shrink: 0;
	box-shadow: 0 4px 14px rgba(224,170,31,0.28);
	transition: transform .15s var(--rop-ease), box-shadow .2s var(--rop-ease), background .15s var(--rop-ease);
}
.rop-nav-login > a::after { content: none !important; }
.rop-nav-login > a:not(.rop-nav-logout):hover,
.rop-nav-login > a:not(.rop-nav-logout):focus {
	color: #241a06 !important;
	background: linear-gradient(135deg, var(--rop-gold-bright), var(--rop-gold-bright)) !important;
	transform: translateY(-1px);
	box-shadow: 0 0 18px 3px var(--rop-glow), 0 8px 22px rgba(224,170,31,0.45);
}
.rop-nav-login > a.rop-nav-logout {
	margin: 0 6px !important;
	padding: 7px 16px !important;
	border-radius: 999px;
	border: 1px solid rgba(224, 90, 70, 0.55);
	background: rgba(224, 90, 70, 0.14);
	color: #ffd9d2 !important;
	font-weight: 600 !important;
	white-space: nowrap;
	flex-shrink: 0;
	transition: background .15s var(--rop-ease), border-color .15s var(--rop-ease), color .15s var(--rop-ease), transform .15s var(--rop-ease), box-shadow .15s var(--rop-ease);
}
.rop-nav-login > a.rop-nav-logout:hover,
.rop-nav-login > a.rop-nav-logout:focus {
	background: #e05a46 !important;
	border-color: #e05a46;
	color: #2a0e08 !important;
	transform: translateY(-1px);
	box-shadow: 0 0 16px 2px rgba(224, 90, 70, 0.45), 0 6px 16px rgba(224, 90, 70, 0.32);
}
.rop-nav-login > a:focus,
.rop-nav-login > a:active {
	outline: none;
}

.rop-navbar .navbar-toggle {
	border-color: var(--rop-navy-border);
}
.rop-navbar .navbar-toggle .icon-bar {
	background: var(--rop-gold);
}
.rop-navbar .navbar-toggle:hover {
	background: var(--rop-navy-border);
}

.dropdown-menu {
	border: 1px solid var(--rop-border);
	border-radius: var(--rop-radius);
	box-shadow: var(--rop-shadow-lg);
	padding: 6px;
	margin-top: 6px;
	animation: rop-dropdown .16s var(--rop-ease);
}
.dropdown-menu > li > a {
	border-radius: 6px;
	padding: 8px 12px;
	color: var(--rop-text);
	transition: background .12s var(--rop-ease), color .12s var(--rop-ease);
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
	background: var(--rop-gold-soft);
	color: var(--rop-gold-dark);
}
@keyframes rop-dropdown {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ---------- hero (homepage only) ---------- */

.rop-hero {
	position: relative;
	overflow: hidden;
	padding: calc(128px + var(--rop-statusbar-h)) 0 64px;
	background:
		radial-gradient(ellipse 900px 500px at 15% -10%, rgba(224,170,31,0.18), transparent 60%),
		radial-gradient(ellipse 800px 500px at 100% 0%, rgba(31,127,214,0.35), transparent 55%),
		linear-gradient(160deg, var(--rop-navy) 0%, var(--rop-royal) 55%, var(--rop-navy-mid) 100%);
}
.rop-hero-glow {
	position: absolute;
	border-radius: 50%;
	filter: blur(60px);
	pointer-events: none;
	animation: rop-drift 14s ease-in-out infinite;
}
.rop-hero-glow-a {
	width: 380px; height: 380px;
	background: rgba(224, 170, 31, 0.24);
	top: -100px; left: 6%;
}
.rop-hero-glow-b {
	width: 460px; height: 460px;
	background: rgba(51, 166, 246, 0.32);
	bottom: -170px; right: 4%;
	animation-delay: -7s;
}
@keyframes rop-drift {
	0%, 100% { transform: translate(0, 0); }
	50%      { transform: translate(18px, -14px); }
}
.rop-hero-rune {
	position: absolute;
	color: var(--rop-gold);
	opacity: .10;
	pointer-events: none;
}
.rop-hero-rune-a { width: 130px; height: 130px; top: 10%; right: 12%; animation: rop-spin 60s linear infinite; }
.rop-hero-rune-b { width: 80px; height: 80px; bottom: 8%; left: 6%; animation: rop-spin 40s linear infinite reverse; }
@keyframes rop-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.rop-hero-inner {
	position: relative;
	z-index: 1;
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	animation: rop-fade-up .5s var(--rop-ease);
}
.rop-hero-title-logo {
	margin: 0 0 14px;
	animation: rop-fade-up .6s var(--rop-ease);
}
.rop-hero-title-logo img {
	display: block;
	width: 230px;
	height: auto;
	margin: 0 auto;
	filter: drop-shadow(0 0 26px var(--rop-glow));
}
.rop-hero-eyebrow {
	display: block;
	font-family: 'Rajdhani', sans-serif;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-size: 13.5px;
	color: #b9bfd6;
	margin-bottom: 8px;
}
.rop-hero-kicker {
	display: inline-block;
	font-family: 'Rajdhani', sans-serif;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-size: 16px;
	color: var(--rop-gold-bright);
	border: 1px solid rgba(224,170,31,0.4);
	background: rgba(224,170,31,0.08);
	border-radius: 999px;
	padding: 6px 18px;
	margin-bottom: 18px;
}
.rop-hero-tagline {
	font-size: 17px;
	color: #c7cbdc;
	margin: 0 0 28px;
	max-width: 520px;
}
.rop-hero-cta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
	margin-bottom: 30px;
}
.rop-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 26px;
	border-radius: 8px;
	font-weight: 600;
	font-size: 14.5px;
	letter-spacing: .01em;
	transition: transform .15s var(--rop-ease), box-shadow .2s var(--rop-ease), background .2s var(--rop-ease), border-color .2s var(--rop-ease);
}
.rop-btn-primary {
	background: linear-gradient(135deg, var(--rop-gold-bright), var(--rop-gold-dark));
	color: #241a06;
	border: 1px solid var(--rop-gold-bright);
	box-shadow: 0 8px 22px rgba(224,170,31,0.3);
}
.rop-btn-primary:hover {
	color: #241a06;
	transform: translateY(-2px);
	box-shadow: 0 12px 30px rgba(224,170,31,0.42);
}
.rop-btn-ghost {
	background: rgba(255,255,255,0.04);
	color: #f0f1f6;
	border: 1px solid rgba(255,255,255,0.28);
}
.rop-btn-ghost:hover {
	color: #ffffff;
	border-color: rgba(255,255,255,0.55);
	background: rgba(255,255,255,0.09);
	transform: translateY(-2px);
}
.rop-hero-tags {
	list-style: none;
	margin: 0; padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}
.rop-hero-tags li {
	font-size: 12.5px;
	color: #d7dbe8;
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.14);
	border-radius: 999px;
	padding: 6px 13px;
}
.rop-hero-tags li::before {
	content: '\2726';
	color: var(--rop-gold);
	margin-right: 6px;
}

/* ---------- page shell ---------- */

.rop-page {
	padding-top: calc(84px + var(--rop-statusbar-h));
	padding-bottom: 48px;
	min-height: calc(100vh - 130px);
}
body.rop-has-hero .rop-page {
	padding-top: 36px;
}

.rop-content {
	position: relative;
	background: var(--rop-card);
	border: 1px solid var(--rop-border);
	border-radius: var(--rop-radius);
	box-shadow: var(--rop-shadow);
	padding: 30px 32px;
	overflow: hidden;
	animation: rop-fade-up .35s var(--rop-ease);
}
.rop-content::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--rop-gold), var(--rop-gold-bright) 40%, transparent 85%);
	/* Rounds its own top corners to match .rop-content's, since the wiki
	   page below turns off .rop-content's overflow:hidden (which used to
	   do this clipping for it). Harmless everywhere else. */
	border-top-left-radius: var(--rop-radius);
	border-top-right-radius: var(--rop-radius);
}

/* Wiki pages only: .rop-content's overflow:hidden (set above, kept for
   every other page) clips more than just the gold top strip - it also
   makes .rop-content a "scroll container" for CSS sticky-positioning
   purposes even though .rop-content itself never scrolls (the page/body
   does). That silently disables position:sticky on anything inside it,
   which is exactly why .wiki-sidebar below never actually stayed put:
   it looked like plain in-flow content that scrolls away with the rest
   of the page instead of sticking near the top. Turning overflow off
   only on wiki pages (rop-wiki, set in header.php) fixes that without
   touching every other page that relies on the clipping. */
body.rop-wiki .rop-content {
	overflow: visible;
}

@keyframes rop-fade-up {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* first heading inside content shouldn't add extra top gap */
.rop-content > h1:first-child,
.rop-content > h2:first-child {
	margin-top: 0;
	margin-bottom: 10px;
}
.rop-content > p {
	line-height: 1.7;
	margin: 0 0 12px;
	color: var(--rop-text);
}
.rop-content > p strong { color: var(--rop-navy); }

/* ---------- sub menu / page menu ---------- */

#submenu, #pagemenu {
	background: none;
	border: none;
	padding: 0;
	margin: 0 0 16px;
	font-size: 13px;
	color: var(--rop-text-muted);
}
#submenu a, #pagemenu a,
.sub-menu-item, .page-menu-item {
	display: inline-block;
	padding: 6px 13px;
	margin: 3px 4px 3px 0;
	border-radius: 999px;
	background: var(--rop-card-alt);
	border: 1px solid var(--rop-border);
	color: var(--rop-text);
	font-weight: 500;
	transition: background .15s var(--rop-ease), border-color .15s var(--rop-ease), color .15s var(--rop-ease);
}
#submenu a:hover, #pagemenu a:hover {
	background: var(--rop-gold-soft);
	border-color: var(--rop-gold);
	color: var(--rop-gold-dark);
}
.current-sub-menu {
	background: var(--rop-navy) !important;
	border-color: var(--rop-navy) !important;
	color: #fff !important;
}

/* ---------- messages / notices ---------- */

.message, .notice {
	border-radius: 8px;
	padding: 12px 16px;
	margin-bottom: 18px;
	border: 1px solid transparent;
	animation: rop-fade-up .25s var(--rop-ease);
}
.message {
	background: #eefaf1;
	border-color: #bfe8c9;
	color: #1e6b34;
}
.notice {
	background: #fff6e5;
	border-color: #f2dda3;
	color: #8a6417;
}

/* ---------- tables ---------- */

.horizontal-table, .vertical-table, .generic-form-table,
table.table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--rop-card);
}

.horizontal-table th, .generic-form-table th, table.table th {
	background: var(--rop-navy);
	color: #f2ede0;
	font-weight: 500;
	font-size: 12.5px;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 10px 14px;
	border: none;
}
.horizontal-table td, .vertical-table td, .generic-form-table td, table.table td {
	padding: 10px 14px;
	border-bottom: 1px solid var(--rop-border);
	vertical-align: middle;
}
.vertical-table th {
	background: var(--rop-card-alt);
	color: var(--rop-text);
	font-weight: 600;
	border-bottom: 1px solid var(--rop-border);
}
.horizontal-table tr:hover td, table.table tbody tr:hover td {
	background: var(--rop-gold-soft);
	transition: background .12s var(--rop-ease);
}

/* Auto-wrapped by ragnarokpinas.js so wide tables scroll on mobile
   instead of breaking the layout. */
.rop-table-scroll {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: 8px;
}

/* ---------- generic form pages (login / register / reset password / etc.) ----------
   FluxCP renders login, register, reset-password, resend-confirmation, and
   most other simple module forms through the same shared .generic-form /
   .generic-form-table markup. Redesigned globally here from an old-fashioned
   2-column label|input table (dark label block glued to a plain input) to a
   clean stacked form -- label above field, full-width inputs, generous
   spacing -- so every page built on this shared template gets the upgrade
   at once. Scoped to .generic-form-table specifically; .horizontal-table /
   .vertical-table / table.table (real data tables: rankings, char lists,
   etc.) are untouched by any of this. */

.generic-form-table,
.generic-form-table tbody,
.generic-form-table tr {
	display: block;
	width: 100%;
	background: none;
}
.generic-form-table th,
.generic-form-table td {
	display: block;
	width: 100% !important;
	background: none;
	border: none;
	padding: 0;
	text-align: left;
}
.generic-form-table th:empty,
.generic-form-table td:empty {
	display: none;
}
.generic-form-table tr {
	margin-bottom: 20px;
}
.generic-form-table tr:last-child {
	margin-bottom: 0;
}
.generic-form-table th {
	padding-bottom: 7px;
	color: var(--rop-text-muted);
	font-family: 'Inter', -apple-system, sans-serif;
	font-weight: 600;
	font-size: 11.5px;
	letter-spacing: .07em;
	text-transform: uppercase;
}
.generic-form-table th label { color: inherit; }

.generic-form-table td > input[type=text],
.generic-form-table td > input[type=password],
.generic-form-table td > input[type=email],
.generic-form-table td > input[type=number] {
	width: 100%;
	box-sizing: border-box;
	padding: 11px 14px;
	font-size: 14.5px;
}

/* Radio/checkbox rows (e.g. Gender) shouldn't stack full-width like text
   fields -- keep them inline, just spaced and brand-tinted. A trailing <p>
   in its own <td> (e.g. reset-password's "This is the account name you
   registered." hints) reads as small muted helper text instead of a
   full-size paragraph. */
.generic-form-table td p {
	margin: 6px 0 0;
	font-size: 12.5px;
	color: var(--rop-text-muted);
}
.generic-form-table td label:has(input[type=radio]),
.generic-form-table td label:has(input[type=checkbox]) {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-right: 18px;
	font-weight: 500;
	color: var(--rop-text);
	cursor: pointer;
}
input[type=radio], input[type=checkbox] {
	accent-color: var(--rop-gold-dark);
	width: auto;
}

/* ---------- pagination ---------- */

.pages {
	text-align: center;
	margin: 18px 0;
}
.pages a, .pages .current-page {
	display: inline-block;
	min-width: 28px;
	padding: 5px 10px;
	margin: 0 2px;
	border-radius: 6px;
	border: 1px solid var(--rop-border);
	color: var(--rop-text);
	transition: all .15s var(--rop-ease);
}
.pages a:hover {
	background: var(--rop-gold-soft);
	border-color: var(--rop-gold);
}
.pages .current-page {
	background: var(--rop-navy);
	border-color: var(--rop-navy);
	color: #fff;
}

/* ---------- forms & buttons ---------- */

input[type=text], input[type=password], input[type=email], input[type=number],
textarea, select {
	border: 1px solid var(--rop-border);
	border-radius: 7px;
	padding: 7px 11px;
	transition: border-color .15s var(--rop-ease), box-shadow .15s var(--rop-ease);
}
input[type=text]:focus, input[type=password]:focus, input[type=email]:focus,
textarea:focus, select:focus {
	outline: none;
	border-color: var(--rop-gold);
	box-shadow: 0 0 0 3px var(--rop-gold-soft);
}

/* Matches the gold-pill brand language used everywhere else on the site
   (hero CTAs, navbar Login button) -- was previously a plain navy
   rectangle, inconsistent with the rest of the site's primary-action
   styling. Also covers plain <button type=submit> (used by e.g. the
   registration form), which had no styling of its own before this. */
input[type=submit], input[type=button], .submit_button, .btn-primary,
.generic-form button[type=submit], .generic-form button {
	background: linear-gradient(135deg, var(--rop-gold-bright), var(--rop-gold-dark));
	border: 1px solid var(--rop-gold-bright);
	color: #241a06;
	border-radius: 999px;
	padding: 11px 28px;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: .02em;
	box-shadow: 0 8px 20px rgba(224,170,31,0.28);
	transition: transform .15s var(--rop-ease), box-shadow .15s var(--rop-ease), background .15s var(--rop-ease);
}
input[type=submit]:hover, input[type=button]:hover, .submit_button:hover, .btn-primary:hover,
.generic-form button[type=submit]:hover, .generic-form button:hover {
	background: linear-gradient(135deg, var(--rop-gold-bright), var(--rop-gold-bright));
	border-color: var(--rop-gold-bright);
	color: #241a06;
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(224,170,31,0.4);
}
input[type=submit]:active, .submit_button:active, .btn-primary:active,
.generic-form button[type=submit]:active, .generic-form button:active {
	transform: translateY(0);
}
.btn {
	border-radius: 7px;
	transition: transform .15s var(--rop-ease), box-shadow .15s var(--rop-ease);
}
.btn:hover { transform: translateY(-1px); }

/* ---------- misc semantic classes kept but harmonized ---------- */

.green { color: #1e8a4a; }
.red { color: #c0392b; }
.online { color: #1e8a4a; font-weight: 600; }
.offline { color: var(--rop-text-muted); }
.state-banned, .state-permanently-banned { color: #c0392b; font-weight: 600; }

/* ---------- footer ---------- */

.rop-footer {
	position: relative;
	background: var(--rop-navy);
	color: #b8bccb;
	padding: 22px 0 26px;
	margin-top: 40px;
	font-size: 12.5px;
}
.rop-footer::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--rop-navy-border) 20%, var(--rop-navy-border) 80%, transparent);
}
.rop-footer-brand {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: 'Rajdhani', sans-serif;
	color: #f4f1e8;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	margin: 0 0 6px;
}
.rop-footer-logo {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	flex-shrink: 0;
}
.rop-footer a { color: var(--rop-gold); }
.rop-footer select {
	background: var(--rop-navy-soft);
	color: #e5e7ef;
	border: 1px solid var(--rop-navy-border);
	border-radius: 5px;
	padding: 2px 6px;
}

/* ---------- responsive ---------- */

@media (max-width: 767px) {
	.rop-page { padding-top: calc(64px + var(--rop-statusbar-h)); }
	body.rop-has-hero .rop-page { padding-top: 28px; }
	.rop-content { padding: 20px 18px; border-radius: 8px; }
	.rop-brand-text { font-size: 13px; }
	.navbar-collapse.collapse.in,
	.navbar-collapse.collapsing {
		background: rgba(20, 26, 46, 0.97);
		border-radius: 0 0 10px 10px;
		box-shadow: var(--rop-shadow-lg);
	}
	.rop-navbar .navbar-nav > li > a::after { display: none; }
	.rop-navlink-standalone > a { display: inline-block; margin: 6px 0; }
	.rop-hero-title-logo img { width: 170px; }
	#submenu a, #pagemenu a { font-size: 12px; padding: 5px 10px; }

	.rop-hero { padding: calc(96px + var(--rop-statusbar-h)) 0 44px; }
	.rop-hero-tagline { font-size: 15px; }
	.rop-btn { padding: 11px 20px; font-size: 13.5px; }

	/* Status bar: smaller type so all three items keep to one scrollable
	   row instead of wrapping awkwardly. */
	.rop-status-bar-inner { gap: 14px; padding: 0 14px; justify-content: flex-start; }
	.rop-status-item { font-size: 10.5px; }
	.rop-status-dot { width: 7px; height: 7px; }

	/* On the collapsed mobile menu the right-hand group stacks as normal
	   rows -- the desktop-only auto-margin push and side divider would
	   just leave an odd gap, so swap the login divider to a top border
	   and drop the auto margin. */
	.rop-nav-right-start { margin-left: 0; }
	.rop-nav-login {
		margin-left: 0;
		padding-left: 0;
		border-left: none;
		border-top: 1px solid rgba(255, 255, 255, 0.16);
		margin-top: 8px;
		padding-top: 10px;
		width: 100%;
		flex-wrap: wrap;
		justify-content: center;
	}
}

@media (min-width: 768px) {
	.rop-navbar { min-height: 60px; }
}

/* ---------- wiki (2026-09-14) ---------- */

.wiki-layout {
	display: flex;
	align-items: flex-start;
	gap: 32px;
}
.wiki-sidebar {
	flex: 0 0 216px;
	position: sticky;
	top: calc(96px + var(--rop-statusbar-h));
	display: flex;
	flex-direction: column;
	gap: 4px;
	/* Keep the sidebar itself no taller than the space actually left in
	   the viewport below the fixed top bars. Without this, a sidebar
	   whose own nav list is longer than the screen would just run off
	   the bottom of the window - nothing below the fold could ever be
	   reached by scrolling the page, since the page scrolling the rest
	   of the way is exactly what a stuck sidebar no longer does. Giving
	   it its own max-height + scroll turns that overflow into a small
	   scrollbar on the sidebar itself instead. */
	max-height: calc(100vh - (96px + var(--rop-statusbar-h)) - 24px);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--rop-gold-soft) transparent;
}
.wiki-sidebar::-webkit-scrollbar { width: 6px; }
.wiki-sidebar::-webkit-scrollbar-track { background: transparent; }
.wiki-sidebar::-webkit-scrollbar-thumb {
	background: var(--rop-gold-soft);
	border-radius: 3px;
}
.wiki-sidebar::-webkit-scrollbar-thumb:hover { background: var(--rop-gold); }
.wiki-sidebar-brand {
	display: block;
	text-align: center;
	padding: 4px 0 18px;
	margin-bottom: 14px;
	border-bottom: 1px solid var(--rop-border);
}
.wiki-sidebar-brand img {
	width: 132px;
	height: auto;
	filter: drop-shadow(0 0 14px var(--rop-glow));
	transition: transform .2s var(--rop-ease);
}
.wiki-sidebar-brand:hover img { transform: scale(1.03); }
.wiki-sidebar-brand:focus,
.wiki-sidebar-brand:active,
.wiki-sidebar-brand img:focus {
	outline: none;
}
.wiki-sidebar-home {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 8px 10px;
	border-radius: 7px;
	font-weight: 600;
	font-size: 14.5px;
	color: var(--rop-text);
	margin-bottom: 12px;
}
.wiki-sidebar-home-icon { flex-shrink: 0; color: var(--rop-gold-dark); }
.wiki-sidebar-home:hover, .wiki-sidebar-home.is-active {
	background: var(--rop-gold-soft);
	color: var(--rop-gold-dark);
}
.wiki-sidebar-cat { margin-bottom: 14px; }
.wiki-sidebar-cat-label {
	display: block;
	font-family: 'Rajdhani', sans-serif;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	font-size: 11.5px;
	color: var(--rop-text-muted);
	padding: 0 10px;
	margin-bottom: 6px;
}
.wiki-sidebar-link {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 7px 10px;
	border-radius: 7px;
	font-size: 14.5px;
	color: var(--rop-text);
	font-weight: 500;
}
.wiki-sidebar-link:hover,
.wiki-sidebar-link:focus {
	background: var(--rop-card-alt);
	color: var(--rop-gold-dark);
	outline: none;
}
.wiki-sidebar-link.is-active {
	background: var(--rop-gold-soft);
	color: var(--rop-gold-dark);
	font-weight: 600;
}
.wiki-sidebar-dot {
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--rop-gold);
	flex-shrink: 0;
}

/* Per-page shortcut accordion: click the row/chevron to drop down that
   page's section shortcuts without navigating away; click the title text
   itself (a real link, nested inside the <summary>) to go to the page. */
.wiki-sidebar-item { margin: 0; }
.wiki-sidebar-item summary { list-style: none; cursor: pointer; }
.wiki-sidebar-item summary::-webkit-details-marker { display: none; }
.wiki-sidebar-summary {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 7px 8px 7px 10px;
	border-radius: 7px;
}
.wiki-sidebar-summary:hover { background: var(--rop-card-alt); }
.wiki-sidebar-summary.is-active { background: var(--rop-gold-soft); }
.wiki-sidebar-summary .wiki-sidebar-link {
	flex: 1 1 auto;
	padding: 0;
	border-radius: 0;
}
.wiki-sidebar-summary .wiki-sidebar-link:hover { background: none; }
.wiki-sidebar-chevron {
	flex: none;
	color: var(--rop-text-muted);
	transition: transform .15s var(--rop-ease);
}
.wiki-sidebar-item[open] > .wiki-sidebar-summary .wiki-sidebar-chevron { transform: rotate(90deg); }
.wiki-sidebar-subnav {
	list-style: none;
	margin: 2px 0 6px;
	padding: 0 0 0 26px;
	display: flex;
	flex-direction: column;
	gap: 1px;
}
.wiki-sidebar-subnav li { margin: 0; }
.wiki-sidebar-subnav a {
	display: block;
	padding: 5px 8px;
	border-radius: 6px;
	font-size: 13px;
	color: var(--rop-text-muted);
}
/* Section shortcuts jump within the same page (a same-document anchor
   navigation), so the clicked link keeps focus afterward instead of losing
   it the way a normal page-to-page link does. Without an explicit :focus
   style here, that left the browser's default focus ring showing - a
   glowing/blurred bright outline that didn't match the rest of the theme.
   Giving :focus the same clean, solid treatment as :hover (and dropping
   the outline) makes a clicked section link read exactly like the main
   sidebar titles do. */
.wiki-sidebar-subnav a:hover,
.wiki-sidebar-subnav a:focus {
	background: var(--rop-card-alt);
	color: var(--rop-gold-dark);
	outline: none;
}

.wiki-sidebar-note {
	padding: 10px 10px 0;
	font-size: 13px;
	color: var(--rop-text-muted);
	border-top: 1px solid var(--rop-border);
	margin-top: 4px;
}
.wiki-main { flex: 1 1 auto; min-width: 0; }

.wiki-kicker {
	display: inline-block;
	font-family: 'Rajdhani', sans-serif;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-size: 12.5px;
	color: var(--rop-gold-dark);
	background: var(--rop-gold-soft);
	border: 1px solid rgba(224,170,31,0.35);
	border-radius: 999px;
	padding: 4px 12px;
	margin-bottom: 10px;
}
.wiki-h1 { font-size: 34px; margin: 0 0 10px; }
.wiki-welcome { font-size: 19px; font-weight: 600; color: var(--rop-text); margin: 0 0 8px; }
.wiki-lead { font-size: 16.5px; color: var(--rop-text-muted); max-width: 62ch; margin-bottom: 26px; }

.wiki-card-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 24px;
}
.wiki-card {
	display: block;
	flex: 0 1 320px;
	background: var(--rop-card-alt);
	border: 1px solid var(--rop-border);
	border-radius: var(--rop-radius);
	padding: 20px 22px;
	transition: border-color .15s var(--rop-ease), transform .15s var(--rop-ease), box-shadow .2s var(--rop-ease);
}
.wiki-card:hover {
	border-color: var(--rop-gold);
	transform: translateY(-2px);
	box-shadow: var(--rop-shadow);
	color: var(--rop-text);
}
.wiki-card-tag {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--rop-gold-dark);
	margin-bottom: 8px;
}
.wiki-card-title { font-size: 20px; margin: 0 0 8px; }
.wiki-card-desc { font-size: 14.5px; color: var(--rop-text-muted); margin: 0 0 12px; }
.wiki-card-cta { font-size: 14px; font-weight: 600; color: var(--rop-gold-dark); }

.wiki-more-note {
	font-size: 13.5px;
	color: var(--rop-text-muted);
	padding-top: 18px;
	border-top: 1px solid var(--rop-border);
}

@media (max-width: 820px) {
	.wiki-layout { flex-direction: column; gap: 22px; }
	.wiki-sidebar {
		position: static;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		width: 100%;
		/* The desktop sticky sidebar's own-scrollbar fix above doesn't apply
		   here - on narrow screens this is a horizontal in-flow row, not a
		   pinned column, so it should just wrap and grow with the page. */
		max-height: none;
		overflow-y: visible;
	}
	.wiki-sidebar-brand { display: none; }
	.wiki-sidebar-home { margin-bottom: 0; }
	.wiki-sidebar-cat { margin-bottom: 0; display: flex; align-items: center; gap: 8px; }
	.wiki-sidebar-cat-label { display: none; }
	.wiki-sidebar-note { display: none; }
}

/* ---------- homepage sections (2026-09-14) ----------
   News & Events / Feature pillars / closing CTA, layout inspired by
   talontales.com's structure but built with our own copy, data and
   palette. Rendered inside the existing .rop-content card. */

.rop-home { display: block; }
.rop-section { margin-bottom: 52px; }
.rop-section:last-child { margin-bottom: 0; }

.rop-section-head { margin-bottom: 24px; max-width: 64ch; }
.rop-section-kicker {
	display: inline-block;
	font-family: 'Rajdhani', sans-serif;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	font-size: 11.5px;
	color: var(--rop-gold-dark);
	background: var(--rop-gold-soft);
	border: 1px solid rgba(224,170,31,0.35);
	border-radius: 999px;
	padding: 4px 12px;
	margin-bottom: 10px;
}
.rop-section-head h2 {
	font-size: 25px;
	margin: 0 0 8px;
}
.rop-section-lead {
	font-size: 14.5px;
	color: var(--rop-text-muted);
	margin: 0;
}

/* News & Events */

.rop-news-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}
.rop-news-card {
	display: flex;
	flex-direction: column;
	background: var(--rop-card-alt);
	border: 1px solid var(--rop-border);
	border-radius: var(--rop-radius);
	padding: 18px 20px;
	transition: border-color .15s var(--rop-ease), transform .15s var(--rop-ease), box-shadow .2s var(--rop-ease);
}
.rop-news-card:hover {
	border-color: var(--rop-gold);
	transform: translateY(-2px);
	box-shadow: var(--rop-shadow);
}
.rop-news-date {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--rop-gold-dark);
	margin-bottom: 8px;
}
.rop-news-title {
	font-size: 16.5px;
	margin: 0 0 8px;
	line-height: 1.3;
}
.rop-news-excerpt {
	font-size: 13.5px;
	color: var(--rop-text-muted);
	margin: 0 0 12px;
	flex: 1 1 auto;
}
.rop-news-link {
	font-size: 13px;
	font-weight: 600;
	color: var(--rop-gold-dark);
	align-self: flex-start;
}

.rop-empty-card {
	border: 1px dashed var(--rop-border);
	border-radius: var(--rop-radius);
	background: var(--rop-card-alt);
	padding: 28px 24px;
	text-align: center;
	color: var(--rop-text-muted);
	font-size: 14px;
}
.rop-empty-card p { margin: 0; }

/* Feature pillars */

.rop-features-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}
.rop-feature-card {
	background: var(--rop-card-alt);
	border: 1px solid var(--rop-border);
	border-radius: var(--rop-radius);
	padding: 22px 20px;
	transition: border-color .15s var(--rop-ease), transform .15s var(--rop-ease), box-shadow .2s var(--rop-ease);
}
.rop-feature-card:hover {
	border-color: var(--rop-gold);
	transform: translateY(-2px);
	box-shadow: var(--rop-shadow);
}
.rop-feature-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--rop-gold-soft);
	color: var(--rop-gold-dark);
	margin-bottom: 14px;
}
.rop-feature-card h3 {
	font-size: 16px;
	margin: 0 0 8px;
}
.rop-feature-card p {
	font-size: 13.5px;
	color: var(--rop-text-muted);
	margin: 0;
}
.rop-feature-card a { color: var(--rop-gold-dark); font-weight: 600; }

/* Closing CTA band */

.rop-cta-band {
	position: relative;
	overflow: hidden;
	border-radius: var(--rop-radius);
	padding: 44px 32px;
	text-align: center;
	background:
		radial-gradient(ellipse 600px 300px at 90% 0%, rgba(51,166,246,0.28), transparent 60%),
		linear-gradient(135deg, var(--rop-navy) 0%, var(--rop-royal) 100%);
}
.rop-cta-inner { position: relative; z-index: 1; max-width: 560px; margin: 0 auto; }
.rop-cta-band h2 {
	color: #fbf8f0;
	font-size: 24px;
	margin: 0 0 10px;
	text-shadow: 0 0 24px rgba(224,170,31,0.2);
}
.rop-cta-band p {
	color: #c7cbdc;
	font-size: 14.5px;
	margin: 0 0 22px;
}
.rop-cta-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 14px;
}
.rop-btn-ghost-dark {
	background: rgba(255,255,255,0.04);
	color: #f0f1f6;
	border: 1px solid rgba(255,255,255,0.28);
}
.rop-btn-ghost-dark:hover {
	color: #ffffff;
	border-color: rgba(255,255,255,0.55);
	background: rgba(255,255,255,0.09);
	transform: translateY(-2px);
}

@media (max-width: 900px) {
	.rop-news-grid { grid-template-columns: repeat(2, 1fr); }
	.rop-features-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.rop-news-grid { grid-template-columns: 1fr; }
	.rop-features-grid { grid-template-columns: 1fr; }
	.rop-cta-band { padding: 34px 20px; }
	.rop-cta-band h2 { font-size: 20px; }
}

/* ---------- footer (multi-column, 2026-09-14) ---------- */

.rop-footer-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 24px;
	padding-bottom: 22px;
	margin-bottom: 18px;
	border-bottom: 1px solid var(--rop-navy-border);
}
.rop-footer-col-brand .rop-footer-brand { margin-bottom: 8px; }
.rop-footer-tagline {
	font-size: 12.5px;
	color: #9ea3b8;
	max-width: 32ch;
	margin: 0;
}
.rop-footer-heading {
	font-family: 'Rajdhani', sans-serif;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	font-size: 12px;
	color: #e5e7ef;
	margin: 0 0 12px;
}
.rop-footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
}
.rop-footer-links li { margin-bottom: 8px; }
.rop-footer-links a {
	color: #b8bccb;
	font-size: 12.5px;
}
.rop-footer-links a:hover { color: var(--rop-gold); }
.rop-footer-copyright {
	text-align: center;
	font-size: 11.5px;
	line-height: 1.6;
	color: #7d8298;
	margin: 0 0 14px;
}
.rop-footer-bottom { font-size: 12.5px; }

@media (max-width: 767px) {
	.rop-footer-grid { grid-template-columns: 1fr 1fr; gap: 22px 18px; }
	.rop-footer-col-brand { grid-column: 1 / -1; }
}

/* ---------- placeholder pages (Donate / Download / Server Info) - 2026-09-14 ---------- */

.rop-placeholder {
	text-align: center;
	padding: 56px 20px;
}
.rop-placeholder-inline {
	padding: 32px 20px;
}
.rop-placeholder-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--rop-gold-soft);
	color: var(--rop-gold-dark);
	margin-bottom: 16px;
}
.rop-placeholder h1 {
	margin: 0 0 10px;
	font-size: 26px;
}
.rop-placeholder-lead {
	color: var(--rop-text);
	font-size: 15.5px;
	margin: 0 auto 6px;
	max-width: 420px;
}
.rop-placeholder-note {
	color: var(--rop-text-muted);
	font-size: 13.5px;
	margin: 0 auto 22px;
	max-width: 420px;
}
.rop-placeholder-inline .rop-placeholder-note { margin-bottom: 0; }

/* ---- Site-wide "back to top" button (appears after scrolling on any long page) ---- */
.rop-back-to-top {
	position: fixed; right: 24px; bottom: 100px; z-index: 20;
	width: 48px; height: 48px; border-radius: 50%;
	background: var(--rop-gold); color: var(--rop-navy); border: none;
	display: flex; align-items: center; justify-content: center; cursor: pointer;
	box-shadow: 0 4px 16px rgba(0,0,0,0.35), 0 0 0 1px rgba(217,169,74,0.4);
	opacity: 0; transform: translateY(12px); pointer-events: none;
	transition: opacity .2s var(--rop-ease), transform .2s var(--rop-ease), background .15s var(--rop-ease);
}
.rop-back-to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.rop-back-to-top:hover { background: var(--rop-gold-bright); }
@media (max-width: 600px) {
	.rop-back-to-top { right: 16px; bottom: 92px; width: 44px; height: 44px; }
}