/* =====================================================================
   RÖADV Transcendence -- FluxCP theme stylesheet
   Loaded AFTER flux.css and bootstrap.min.css, so it re-skins both
   without touching (or breaking) the base layout rules they define.
   ===================================================================== */

:root{
	--roadv-bg:            #0a0d08;
	--roadv-bg-alt:        #0e130c;
	--roadv-panel:         #161c13;
	--roadv-panel-alt:     #1b2216;
	--roadv-border:        rgba(212, 173, 90, 0.22);
	--roadv-border-strong: rgba(212, 173, 90, 0.45);

	--roadv-gold:          #f0c250;
	--roadv-gold-light:    #ffe29a;
	--roadv-gold-dark:     #a97a26;
	--roadv-brown:         #4a2f16;
	--roadv-brown-dark:    #2a1a0c;
	--roadv-green:         #5c8a3a;
	--roadv-green-dark:    #16240f;
	--roadv-blue:          #4fb3e8;

	--roadv-text:          #ece3cf;
	--roadv-text-muted:    #a99b7c;

	--roadv-font-display:  'Cinzel', 'Georgia', serif;
	--roadv-font-body:     'Rubik', 'Segoe UI', Tahoma, sans-serif;

	--roadv-radius:        10px;
}

/* ---------------------------------------------------------------------
   Base / global reskin.

   NOTE on scope: flux.css (the base FluxCP stylesheet, inherited
   unmodified) hardcodes hundreds of colors across rankings, item/monster
   db, shop, cart, service desk, account pages etc. that all assume a
   WHITE page (#fff/#eee boxes, #000/#444/#666 text). Rather than fight
   every one of those individually -- and risk making some of them
   unreadable -- we only reskin the chrome we built ourselves (nav, hero,
   footer, homepage cards). Every other page gets a light "parchment"
   reading panel (see .roadv-panel below) so all of that inherited
   styling keeps working exactly as designed.
   --------------------------------------------------------------------- */
html, body.roadv-body{
	background:
		radial-gradient(ellipse at 20% -10%, rgba(92, 138, 58, 0.16), transparent 45%),
		radial-gradient(ellipse at 85% 0%, rgba(240, 194, 80, 0.10), transparent 40%),
		var(--roadv-bg);
	/* NOTE: intentionally NOT background-attachment:fixed -- combined with
	   layered radial-gradients, that's a known trigger for Chrome/Edge on
	   Windows to occasionally paint a stray white rectangle during scroll
	   (a GPU-compositing bug, not a caching issue -- a hard refresh won't
	   fix it). If you still see white boxes after this change, it's most
	   likely the same class of bug coming from the hero's own gradients
	   (search "roadv-hero" below) rather than this rule. */
	color: var(--roadv-text);
	font-family: var(--roadv-font-body);
	margin: 0;
	padding: 0;
	min-height: 100%;
}

body.roadv-body *{ box-sizing: border-box; }

body.roadv-body .container{ padding-top: 0; }
body.roadv-body #footer,
body.roadv-body .footer{ position: static; height: auto; background: transparent; }

/* Gold link/heading treatment ONLY inside our own dark chrome. Inner
   pages (rankings, account, item db, ...) keep flux.css's own link/
   heading colors, which are tuned for the light panel they sit on. */
.roadv-navbar a, .roadv-hero a, .roadv-footer a, .roadv-panel-home a{
	color: var(--roadv-gold-light);
}
.roadv-navbar a:hover, .roadv-hero a:hover, .roadv-footer a:hover, .roadv-panel-home a:hover{
	color: var(--roadv-gold);
	text-decoration: none;
}
.roadv-panel-home h1, .roadv-panel-home h2, .roadv-panel-home h3{
	font-family: var(--roadv-font-display);
	color: var(--roadv-gold-light);
	letter-spacing: 0.5px;
}

/* Notices / messages -- these are self-contained colored boxes with
   their own text color either way, safe to restyle everywhere. */
body.roadv-body .message{
	background: var(--roadv-brown-dark);
	border: 1px solid var(--roadv-border);
	color: var(--roadv-gold-light);
	border-radius: var(--roadv-radius);
}
body.roadv-body .notice{
	background: rgba(79, 179, 232, 0.08);
	border: 1px solid rgba(79, 179, 232, 0.4);
	color: #bfe6fa;
	border-radius: var(--roadv-radius);
}

body.roadv-body .btn-primary{
	background: linear-gradient(180deg, var(--roadv-gold-light), var(--roadv-gold-dark));
	border-color: var(--roadv-gold-dark);
	color: #2a1a0c;
	font-weight: 600;
}

/* ---------------------------------------------------------------------
   Navbar
   --------------------------------------------------------------------- */
.roadv-navbar{
	background: linear-gradient(180deg, #12160d, #0b0e08);
	border: none;
	border-bottom: 1px solid var(--roadv-border-strong);
	margin-bottom: 0;
	border-radius: 0;
	min-height: 68px;
}
.roadv-navbar .navbar-brand{
	height: auto;
	padding: 10px 15px;
}
.roadv-navbar-brand img{ height: 46px; width: auto; display: block; }

.roadv-nav-main > li > a,
.roadv-nav-account > li > a{
	font-family: var(--roadv-font-display);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--roadv-text) !important;
	padding: 24px 16px;
	transition: color 0.15s ease;
}
/* Bootstrap ships an UNSCOPED ".nav>li>a:hover,:focus{background-color:#eee}"
   rule that applies to any element with its plain ".nav" class -- which
   both of our menus have (roadv-nav-main AND roadv-nav-account). Beat it
   everywhere in the navbar, not just the left-hand menu, or links like
   "Sign In" that don't set their own background show Bootstrap's default
   light-gray/white hover box. */
.roadv-navbar .nav > li > a:hover,
.roadv-navbar .nav > li > a:focus{
	background-color: transparent !important;
}
.roadv-nav-main > li > a:hover,
.roadv-nav-main > li > a:focus,
.roadv-nav-main > li.active > a,
.roadv-nav-account > li > a:hover,
.roadv-nav-account > li > a:focus{
	color: var(--roadv-gold) !important;
	background: transparent !important;
}
.roadv-nav-main > li.dropdown.open > a,
.roadv-nav-main > li .dropdown-toggle:focus{
	color: var(--roadv-gold) !important;
	background: transparent !important;
}
.roadv-btn-signin:hover, .roadv-btn-signin:focus{
	color: var(--roadv-gold) !important;
}
.roadv-dropdown-menu{
	background: #14180f;
	border: 1px solid var(--roadv-border);
	border-radius: 8px;
	padding: 6px 0;
	box-shadow: 0 12px 30px rgba(0,0,0,0.5);
}
.roadv-dropdown-menu > li > a{
	color: var(--roadv-text);
	font-family: var(--roadv-font-body);
	padding: 8px 18px;
}
.roadv-dropdown-menu > li > a:hover{
	background: var(--roadv-brown-dark);
	color: var(--roadv-gold);
}
.roadv-navbar .caret{ border-top-color: var(--roadv-text-muted); }

.roadv-btn-signin{
	color: var(--roadv-gold-light) !important;
}
.roadv-btn-register{
	margin: 16px 0 0 6px !important;
	padding: 10px 20px !important;
	background: linear-gradient(180deg, var(--roadv-gold-light), var(--roadv-gold-dark));
	color: #2a1a0c !important;
	border-radius: 6px;
	font-weight: 700;
}
/* ".roadv-nav-account > li > a" above is more specific than the plain
   ".roadv-btn-register" class, so even with !important on both, it was
   winning and painting Register/Logout with the pale nav text color
   instead of the intended dark brown -- unreadable on the gold button.
   Re-declare at matching specificity so the dark color actually applies. */
.roadv-nav-account > li > a.roadv-btn-register{
	color: #2a1a0c !important;
}
/* Same issue on :hover -- ".roadv-nav-account > li > a:hover" (above) also
   forces gold text + a transparent background !important, which strips
   the button's gold gradient and leaves faint gold-on-dark text, unreadable
   against the navbar. Restore the button look at matching specificity. */
.roadv-nav-account > li > a.roadv-btn-register:hover,
.roadv-nav-account > li > a.roadv-btn-register:focus{
	color: #2a1a0c !important;
	background: linear-gradient(180deg, var(--roadv-gold-light), var(--roadv-gold-dark)) !important;
	filter: brightness(1.08);
}

.roadv-navbar .navbar-toggle{ border-color: var(--roadv-border); margin-top: 17px; }
.roadv-navbar .navbar-toggle .icon-bar{ background-color: var(--roadv-gold); }
.roadv-navbar .navbar-toggle:hover{ background-color: var(--roadv-brown-dark); }

@media (max-width: 767px){
	.roadv-nav-main > li > a, .roadv-nav-account > li > a{ padding: 12px 16px; }
	.roadv-dropdown-menu{ background: transparent; border: none; box-shadow: none; padding-left: 10px; }
}

/* ---------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------- */
.roadv-hero{
	position: relative;
	padding: 56px 20px 40px;
	text-align: center;
	background-image: url('../img/hero-bg.jpg');
	background-size: cover;
	background-position: center 35%;
	background-repeat: no-repeat;
	/* No border-bottom here on purpose: a solid line right at the hero's
	   edge cuts across the smooth fade from ::after's gradient, showing up
	   as a visible seam partway through the fade. The gradient already
	   goes near-opaque by the bottom, and the gap above .roadv-panel-home
	   separates the hero from the content below, so no border is needed. */
	overflow: hidden;
}
/* Dark, semi-transparent overlay that fades the background photo so the
   logo/text on top stay readable. Edit the rgba() alpha values (last
   number in each) to make the photo more or less visible -- higher
   alpha = more faded/darker, lower alpha = more of the photo shows. */
.roadv-hero::after{
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		radial-gradient(ellipse at 50% 0%, rgba(240, 194, 80, 0.10), transparent 55%),
		radial-gradient(ellipse at 15% 100%, rgba(92, 138, 58, 0.14), transparent 50%),
		radial-gradient(ellipse at 85% 100%, rgba(79, 179, 232, 0.08), transparent 45%),
		linear-gradient(180deg, rgba(9, 12, 7, 0.90) 0%, rgba(12, 16, 13, 0.88) 55%, rgba(10, 13, 8, 0.94) 100%);
	pointer-events: none;
}
.roadv-hero::before{
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background-image:
		radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.5), transparent),
		radial-gradient(1px 1px at 80% 15%, rgba(255,255,255,0.4), transparent),
		radial-gradient(1px 1px at 60% 70%, rgba(255,255,255,0.3), transparent),
		radial-gradient(1px 1px at 30% 80%, rgba(255,255,255,0.35), transparent),
		radial-gradient(1px 1px at 92% 60%, rgba(255,255,255,0.3), transparent);
	opacity: 0.6;
	pointer-events: none;
}
.roadv-hero-inner{ position: relative; z-index: 3; max-width: 760px; margin: 0 auto; }

/* Floating light-orb ambience (hero only). ".roadv-hero-orbs" is a plain
   absolutely-positioned wrapper (z-index 2, behind the hero text at
   z-index 3) containing several ".roadv-orb" spans -- small blurred
   glowing dots that drift upward and fade on a loop. To add/remove an
   orb, copy a ".roadv-orb-N" rule and give it its own left/top/size/
   animation-duration/delay so it doesn't move in lockstep with the others. */
.roadv-hero-orbs{
	position: absolute;
	inset: 0;
	z-index: 2;
	overflow: hidden;
	pointer-events: none;
}
.roadv-orb{
	position: absolute;
	border-radius: 50%;
	/* Solid white core (no gradient falloff) plus a soft box-shadow halo
	   around it for the "glowing light" look -- the halo is a separate
	   glow effect, not a gradient fill on the dot itself. */
	background: #ffffff;
	box-shadow: 0 0 6px 1px rgba(255,255,255,0.75), 0 0 2px rgba(255,255,255,0.9);
	opacity: 0;
	animation: roadv-orb-float 5.5s ease-in-out infinite;
}
@keyframes roadv-orb-float{
	0%   { transform: translate(0, 0) scale(0.85); opacity: 0; }
	15%  { opacity: 0.9; }
	50%  { transform: translate(8px, -40px) scale(1.1); opacity: 0.85; }
	85%  { opacity: 0.2; }
	100% { transform: translate(-6px, -80px) scale(0.9); opacity: 0; }
}
/* Small only -- 3-5px across, no large orbs. 50 orbs, each with its own
   position/size/speed/delay (animation-duration ~4-7s = "faster, not too
   fast") so they don't move in lockstep. To add more, copy a rule with a
   new N and add a matching <span class="roadv-orb roadv-orb-N"> in
   header.php inside .roadv-hero-orbs. */
.roadv-hero-orbs .roadv-orb-1{ width: 3px; height: 3px; left: 2.4%; top: 28.2%; animation-duration: 4.7s; animation-delay: 4.8s; }
.roadv-hero-orbs .roadv-orb-2{ width: 5px; height: 5px; left: 8.4%; top: 41.1%; animation-duration: 4.1s; animation-delay: 1.4s; }
.roadv-hero-orbs .roadv-orb-3{ width: 5px; height: 5px; left: 58.4%; top: 53.4%; animation-duration: 6.1s; animation-delay: 4.6s; }
.roadv-hero-orbs .roadv-orb-4{ width: 4px; height: 4px; left: 21.4%; top: 55.9%; animation-duration: 6.4s; animation-delay: 0.0s; }
.roadv-hero-orbs .roadv-orb-5{ width: 3px; height: 3px; left: 67.7%; top: 33.9%; animation-duration: 4.5s; animation-delay: 6.2s; }
.roadv-hero-orbs .roadv-orb-6{ width: 4px; height: 4px; left: 9.9%; top: 37.4%; animation-duration: 5.1s; animation-delay: 2.2s; }
.roadv-hero-orbs .roadv-orb-7{ width: 4px; height: 4px; left: 78.3%; top: 68.2%; animation-duration: 5.6s; animation-delay: 6.3s; }
.roadv-hero-orbs .roadv-orb-8{ width: 4px; height: 4px; left: 7.6%; top: 29.8%; animation-duration: 5.9s; animation-delay: 5.8s; }
.roadv-hero-orbs .roadv-orb-9{ width: 4px; height: 4px; left: 56.0%; top: 66.0%; animation-duration: 4.1s; animation-delay: 1.5s; }
.roadv-hero-orbs .roadv-orb-10{ width: 4px; height: 4px; left: 95.6%; top: 79.3%; animation-duration: 6.6s; animation-delay: 2.5s; }
.roadv-hero-orbs .roadv-orb-11{ width: 4px; height: 4px; left: 61.7%; top: 36.1%; animation-duration: 5.1s; animation-delay: 1.4s; }
.roadv-hero-orbs .roadv-orb-12{ width: 4px; height: 4px; left: 68.1%; top: 64.2%; animation-duration: 4.2s; animation-delay: 4.1s; }
.roadv-hero-orbs .roadv-orb-13{ width: 5px; height: 5px; left: 70.7%; top: 18.4%; animation-duration: 5.1s; animation-delay: 6.4s; }
.roadv-hero-orbs .roadv-orb-14{ width: 5px; height: 5px; left: 21.3%; top: 32.5%; animation-duration: 6.3s; animation-delay: 0.4s; }
.roadv-hero-orbs .roadv-orb-15{ width: 3px; height: 3px; left: 78.1%; top: 39.3%; animation-duration: 4.2s; animation-delay: 5.9s; }
.roadv-hero-orbs .roadv-orb-16{ width: 5px; height: 5px; left: 85.0%; top: 31.7%; animation-duration: 6.0s; animation-delay: 2.6s; }
.roadv-hero-orbs .roadv-orb-17{ width: 4px; height: 4px; left: 13.9%; top: 16.3%; animation-duration: 6.2s; animation-delay: 3.5s; }
.roadv-hero-orbs .roadv-orb-18{ width: 5px; height: 5px; left: 41.6%; top: 55.4%; animation-duration: 5.1s; animation-delay: 6.5s; }
.roadv-hero-orbs .roadv-orb-19{ width: 3px; height: 3px; left: 49.4%; top: 12.0%; animation-duration: 4.1s; animation-delay: 0.7s; }
.roadv-hero-orbs .roadv-orb-20{ width: 3px; height: 3px; left: 76.8%; top: 41.2%; animation-duration: 4.2s; animation-delay: 2.5s; }
.roadv-hero-orbs .roadv-orb-21{ width: 4px; height: 4px; left: 51.3%; top: 89.5%; animation-duration: 6.6s; animation-delay: 0.1s; }
.roadv-hero-orbs .roadv-orb-22{ width: 3px; height: 3px; left: 66.1%; top: 51.3%; animation-duration: 4.8s; animation-delay: 4.2s; }
.roadv-hero-orbs .roadv-orb-23{ width: 3px; height: 3px; left: 28.5%; top: 17.9%; animation-duration: 4.0s; animation-delay: 4.7s; }
.roadv-hero-orbs .roadv-orb-24{ width: 4px; height: 4px; left: 94.3%; top: 71.1%; animation-duration: 5.5s; animation-delay: 0.7s; }
.roadv-hero-orbs .roadv-orb-25{ width: 4px; height: 4px; left: 81.6%; top: 48.7%; animation-duration: 4.6s; animation-delay: 2.4s; }
.roadv-hero-orbs .roadv-orb-26{ width: 3px; height: 3px; left: 52.3%; top: 72.5%; animation-duration: 5.6s; animation-delay: 0.0s; }
.roadv-hero-orbs .roadv-orb-27{ width: 4px; height: 4px; left: 47.4%; top: 13.8%; animation-duration: 5.1s; animation-delay: 6.4s; }
.roadv-hero-orbs .roadv-orb-28{ width: 4px; height: 4px; left: 23.2%; top: 25.2%; animation-duration: 5.7s; animation-delay: 0.5s; }
.roadv-hero-orbs .roadv-orb-29{ width: 4px; height: 4px; left: 79.2%; top: 90.1%; animation-duration: 5.6s; animation-delay: 0.8s; }
.roadv-hero-orbs .roadv-orb-30{ width: 4px; height: 4px; left: 91.8%; top: 18.5%; animation-duration: 5.6s; animation-delay: 3.9s; }
.roadv-hero-orbs .roadv-orb-31{ width: 3px; height: 3px; left: 90.1%; top: 70.5%; animation-duration: 6.1s; animation-delay: 4.6s; }
.roadv-hero-orbs .roadv-orb-32{ width: 4px; height: 4px; left: 96.5%; top: 61.2%; animation-duration: 5.3s; animation-delay: 3.4s; }
.roadv-hero-orbs .roadv-orb-33{ width: 3px; height: 3px; left: 24.0%; top: 9.6%; animation-duration: 4.1s; animation-delay: 3.6s; }
.roadv-hero-orbs .roadv-orb-34{ width: 5px; height: 5px; left: 21.4%; top: 10.2%; animation-duration: 5.9s; animation-delay: 1.5s; }
.roadv-hero-orbs .roadv-orb-35{ width: 3px; height: 3px; left: 83.4%; top: 10.2%; animation-duration: 4.7s; animation-delay: 4.3s; }
.roadv-hero-orbs .roadv-orb-36{ width: 3px; height: 3px; left: 52.3%; top: 67.7%; animation-duration: 6.6s; animation-delay: 3.7s; }
.roadv-hero-orbs .roadv-orb-37{ width: 3px; height: 3px; left: 76.1%; top: 75.1%; animation-duration: 4.6s; animation-delay: 0.6s; }
.roadv-hero-orbs .roadv-orb-38{ width: 4px; height: 4px; left: 34.4%; top: 40.2%; animation-duration: 6.6s; animation-delay: 0.4s; }
.roadv-hero-orbs .roadv-orb-39{ width: 3px; height: 3px; left: 5.9%; top: 68.1%; animation-duration: 6.4s; animation-delay: 0.7s; }
.roadv-hero-orbs .roadv-orb-40{ width: 3px; height: 3px; left: 18.5%; top: 43.5%; animation-duration: 5.3s; animation-delay: 1.8s; }
.roadv-hero-orbs .roadv-orb-41{ width: 3px; height: 3px; left: 84.8%; top: 10.6%; animation-duration: 6.4s; animation-delay: 5.6s; }
.roadv-hero-orbs .roadv-orb-42{ width: 3px; height: 3px; left: 4.9%; top: 91.9%; animation-duration: 6.5s; animation-delay: 6.3s; }
.roadv-hero-orbs .roadv-orb-43{ width: 3px; height: 3px; left: 16.1%; top: 46.7%; animation-duration: 4.6s; animation-delay: 2.6s; }
.roadv-hero-orbs .roadv-orb-44{ width: 3px; height: 3px; left: 16.0%; top: 4.2%; animation-duration: 5.2s; animation-delay: 6.0s; }
.roadv-hero-orbs .roadv-orb-45{ width: 4px; height: 4px; left: 27.7%; top: 65.3%; animation-duration: 6.2s; animation-delay: 5.1s; }
.roadv-hero-orbs .roadv-orb-46{ width: 4px; height: 4px; left: 15.0%; top: 30.1%; animation-duration: 6.9s; animation-delay: 3.8s; }
.roadv-hero-orbs .roadv-orb-47{ width: 5px; height: 5px; left: 5.9%; top: 31.6%; animation-duration: 4.2s; animation-delay: 3.1s; }
.roadv-hero-orbs .roadv-orb-48{ width: 5px; height: 5px; left: 15.3%; top: 88.5%; animation-duration: 4.2s; animation-delay: 1.2s; }
.roadv-hero-orbs .roadv-orb-49{ width: 5px; height: 5px; left: 6.6%; top: 79.8%; animation-duration: 5.2s; animation-delay: 6.1s; }
.roadv-hero-orbs .roadv-orb-50{ width: 5px; height: 5px; left: 23.9%; top: 56.3%; animation-duration: 5.9s; animation-delay: 2.7s; }
@media (prefers-reduced-motion: reduce){
	.roadv-orb{ animation: none; opacity: 0.2; }
}

.roadv-online-badge{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(92, 138, 58, 0.12);
	border: 1px solid rgba(92, 138, 58, 0.5);
	color: #c9e8b0;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	margin-bottom: 18px;
}
.roadv-online-dot{
	width: 8px; height: 8px; border-radius: 50%;
	background: #7ed957;
	box-shadow: 0 0 8px #7ed957;
	display: inline-block;
}

.roadv-welcome-to{
	font-family: var(--roadv-font-display);
	letter-spacing: 6px;
	text-transform: uppercase;
	color: var(--roadv-text-muted);
	font-size: 13px;
	margin: 0 0 14px;
	border: 1px solid var(--roadv-border);
	display: inline-block;
	padding: 6px 16px;
	border-radius: 4px;
}

.roadv-hero-logo{
	max-width: 100%;
	width: 480px;
	height: auto;
	margin: 4px auto 18px;
	filter: drop-shadow(0 12px 30px rgba(0,0,0,0.55));
	/* Subtle idle wiggle so the hero doesn't feel static -- small rotation
	   + a slight rise, not a spin. Edit the keyframe below (or the 5s
	   duration here) to make it faster/slower or more/less pronounced. */
	transform-origin: 50% 85%;
	animation: roadv-logo-wiggle 5s ease-in-out infinite;
}
@keyframes roadv-logo-wiggle{
	0%, 100% { transform: rotate(-1.4deg) translateY(0); }
	50%      { transform: rotate(1.4deg) translateY(-5px); }
}
@media (prefers-reduced-motion: reduce){
	.roadv-hero-logo{ animation: none; }
}

.roadv-hero-tagline{
	font-size: 16px;
	line-height: 1.7;
	color: var(--roadv-text);
	max-width: 620px;
	margin: 0 auto 26px;
}

.roadv-cta-btn{
	display: inline-block;
	font-family: var(--roadv-font-display);
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	font-size: 14px;
	padding: 14px 38px;
	border-radius: 8px;
	background: linear-gradient(180deg, var(--roadv-gold-light), var(--roadv-gold-dark));
	/* !important: ".roadv-hero a" (higher specificity, class+element) was
	   painting this pale gold-light instead, making the text nearly
	   invisible against the gold button background. */
	color: #2a1a0c !important;
	box-shadow: 0 10px 24px rgba(240, 194, 80, 0.25);
	border: 1px solid var(--roadv-gold-dark);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.roadv-cta-btn:hover{
	color: #2a1a0c !important;
	transform: translateY(-2px);
	box-shadow: 0 14px 30px rgba(240, 194, 80, 0.35);
}

.roadv-stats-row{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 28px 36px;
	margin-top: 38px;
	padding-top: 28px;
}
/* A plain solid border-top here reads as a hard, out-of-place seam cutting
   across the fading hero background/orbs. Fading it out at both ends
   (transparent -> color -> transparent) makes it read as a soft divider
   instead of a stray line. */
.roadv-stats-row::before{
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: min(90%, 640px);
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--roadv-border) 25%, var(--roadv-border) 75%, transparent);
}
.roadv-stat{ display: flex; flex-direction: column; align-items: center; min-width: 70px; }
.roadv-stat-value{
	font-family: var(--roadv-font-display);
	font-size: 22px;
	font-weight: 700;
	color: var(--roadv-gold);
}
.roadv-stat-label{
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--roadv-text-muted);
	margin-top: 2px;
}

/* ---------------------------------------------------------------------
   Content panel
   --------------------------------------------------------------------- */
/* Bootstrap's default .container maxes out at 1170px and centers itself,
   which leaves huge unused margins (and pushes the logo/nav in from the
   edge) on wide screens. Widen it at the larger breakpoints -- this
   affects the navbar AND the content panel below it, so both stay
   aligned with each other. */
@media (min-width: 1200px){
	body.roadv-body .container{ width: 1400px; }
}
@media (min-width: 1600px){
	body.roadv-body .container{ width: 1540px; }
}

.roadv-container{ padding: 0 15px; }
.roadv-panel{ padding: 0 0 40px; }

/* Homepage content: built entirely from our own .roadv-* classes above,
   so it stays dark-themed. */
.roadv-panel-home{
	/* Narrower than the full (widened) .container so the homepage card
	   doesn't feel oversized on large screens -- centered within it. */
	max-width: 1180px;
	margin: 30px auto 0;
	background: var(--roadv-panel);
	border: 1px solid var(--roadv-border);
	border-radius: var(--roadv-radius);
	padding: 32px 28px 12px;
}

/* Every other page: a light reading panel so FluxCP's inherited
   markup (rankings, item/monster db, account, shop, service desk,
   admin, ...) renders with the light colors it was built for, instead
   of white boxes floating on a black page. */
.roadv-panel:not(.roadv-panel-home){
	background: #fdfbf4;
	color: #2a2013;
	border: 1px solid var(--roadv-border-strong);
	border-radius: var(--roadv-radius);
	padding: 28px 30px 34px;
	margin: 18px 0 30px;
	box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
}
.roadv-panel:not(.roadv-panel-home) h1,
.roadv-panel:not(.roadv-panel-home) h2,
.roadv-panel:not(.roadv-panel-home) h3{
	font-family: var(--roadv-font-display);
	color: #8a5a1e;
	letter-spacing: 0.5px;
}
.roadv-panel:not(.roadv-panel-home) a{ color: #4083c6; }
.roadv-panel:not(.roadv-panel-home) a:hover{ color: #26547f; text-decoration: underline; }
@media (max-width: 767px){
	.roadv-panel:not(.roadv-panel-home){ padding: 20px 18px 26px; }
}

.roadv-home-section{ margin-bottom: 34px; }
.roadv-section-title{
	font-size: 18px;
	margin: 0 0 16px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--roadv-border);
	text-transform: none;
	display: flex;
	align-items: center;
	gap: 10px;
}
.roadv-section-icon{ font-size: 16px; opacity: 0.85; }

/* Cards */
.roadv-card{
	background: var(--roadv-panel-alt);
	border: 1px solid var(--roadv-border);
	border-radius: var(--roadv-radius);
	padding: 18px 20px;
}
.roadv-news-grid{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 18px;
}
.roadv-news-card h4{
	font-family: var(--roadv-font-display);
	color: var(--roadv-gold-light);
	margin: 0 0 6px;
}
.roadv-news-meta{ font-size: 12px; color: var(--roadv-text-muted); }
.roadv-news-card p{ margin: 10px 0 8px; color: var(--roadv-text); line-height: 1.6; }
.roadv-news-link{ font-size: 13px; font-weight: 600; }

/* Two-column: Events / Patch Notes */
.roadv-two-col{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
}
.roadv-list{ list-style: none; margin: 0; padding: 0; }
.roadv-list-item{
	display: flex;
	gap: 12px;
	padding: 14px 0;
	border-bottom: 1px dashed var(--roadv-border);
}
.roadv-list-item:last-child{ border-bottom: none; }
.roadv-list-icon{ color: var(--roadv-gold); font-size: 14px; margin-top: 3px; }
.roadv-list-title-row{ display: flex; align-items: center; gap: 8px; }
.roadv-list-item strong{ color: var(--roadv-gold-light); font-family: var(--roadv-font-display); font-weight: 600; }
.roadv-list-item p{ margin: 4px 0 0; color: var(--roadv-text-muted); font-size: 13px; }
.roadv-tag{
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	background: rgba(240, 194, 80, 0.12);
	border: 1px solid var(--roadv-border);
	color: var(--roadv-gold);
	padding: 2px 8px;
	border-radius: 999px;
}
.roadv-patch-version{
	font-family: var(--roadv-font-display);
	color: var(--roadv-gold);
	font-weight: 700;
	min-width: 52px;
	display: inline-flex;
	flex-direction: column;
}
.roadv-patch-version small{
	font-family: var(--roadv-font-body);
	color: var(--roadv-text-muted);
	font-weight: 400;
	text-transform: uppercase;
	font-size: 10px;
}

/* Three-column grids: Community / Features */
.roadv-grid-3{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
}
.roadv-feature-card{ text-align: left; }
.roadv-eyebrow{
	display: block;
	font-size: 10px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--roadv-blue);
	margin-bottom: 8px;
}
.roadv-feature-card h4{
	font-family: var(--roadv-font-display);
	color: var(--roadv-text);
	margin: 0 0 6px;
}
.roadv-feature-card p{ color: var(--roadv-text-muted); font-size: 13px; margin: 0; }

/* Whole-card link (currently used by Server Features -- point each item's
   'link' in main/index.php at a real URL and the card becomes clickable). */
.roadv-card-link{
	display: block;
	cursor: pointer;
	text-decoration: none;
	transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.roadv-card-link:hover,
.roadv-card-link:focus{
	border-color: var(--roadv-gold);
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(0,0,0,0.35);
	text-decoration: none;
}
.roadv-card-link:hover h4,
.roadv-card-link:focus h4{ color: var(--roadv-gold-light); }
/* Hidden "Learn more" hint that only appears on hover/focus, so the card
   makes it obvious it's clickable instead of relying on cursor alone. */
.roadv-card-link-hint{
	display: block;
	margin-top: 10px;
	font-size: 12px;
	font-weight: 600;
	color: var(--roadv-gold);
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity 0.15s ease, transform 0.15s ease;
}
.roadv-card-link:hover .roadv-card-link-hint,
.roadv-card-link:focus .roadv-card-link-hint{
	opacity: 1;
	transform: translateX(0);
}

@media (max-width: 767px){
	.roadv-two-col, .roadv-grid-3{ grid-template-columns: 1fr; }
	.roadv-panel-home{ padding: 22px 18px 8px; }
}

/* ---------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------- */
.roadv-footer{
	margin-top: 40px;
	padding: 40px 0 24px;
	background: linear-gradient(180deg, transparent, rgba(0,0,0,0.35));
	border-top: 1px solid var(--roadv-border);
}
.roadv-footer-top{ margin-bottom: 24px; }
.roadv-footer-brand img{ height: 64px; width: auto; }
.roadv-footer-nav, .roadv-footer-powered{ margin-top: 10px; }
.roadv-footer-nav{ text-align: center; }
.roadv-footer-powered{ text-align: right; }
.roadv-footer h5{
	font-family: var(--roadv-font-display);
	color: var(--roadv-gold);
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 1px;
	margin: 0 0 10px;
}
.roadv-footer-nav a{
	display: inline-block;
	color: var(--roadv-text-muted);
	font-size: 13px;
	padding: 3px 0;
}
.roadv-footer-nav a:hover{ color: var(--roadv-gold-light); }
.roadv-footer-nav a:not(:last-child)::after{
	content: "|";
	display: inline-block;
	margin: 0 10px;
	color: var(--roadv-border-strong);
}
.roadv-powered-badge{
	display: inline-block;
	background: var(--roadv-panel-alt);
	border: 1px solid var(--roadv-border);
	color: var(--roadv-text-muted);
	font-size: 12px;
	padding: 5px 12px;
	border-radius: 6px;
	margin: 0 8px 8px 0;
}
.roadv-footer-bottom{
	border-top: 1px solid var(--roadv-border);
	padding-top: 18px;
	text-align: center;
}
.roadv-copyright{ margin: 0; color: var(--roadv-text-muted); font-size: 13px; }
.roadv-copyright-sub{ margin: 4px 0 0; color: var(--roadv-text-muted); font-size: 12px; opacity: 0.75; }
.roadv-copyright-sub a{ color: var(--roadv-text-muted); text-decoration: underline; }
.roadv-render-details{ font-size: 11px; color: var(--roadv-text-muted); opacity: 0.6; margin: 8px 0 0; }
.roadv-footer-controls{ margin: 10px 0 0; font-size: 12px; color: var(--roadv-text-muted); }
.roadv-footer-controls select{
	background: var(--roadv-panel-alt);
	color: var(--roadv-text);
	border: 1px solid var(--roadv-border);
	border-radius: 4px;
	padding: 2px 4px;
	margin-left: 4px;
}

@media (max-width: 767px){
	.roadv-footer-brand, .roadv-footer-nav, .roadv-footer-powered{ text-align: center; }
	.roadv-footer-brand img{ margin-bottom: 10px; }
}