/* =====================================================================
   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%;
	/* Safety net: if any embedded element (e.g. the Discord widget iframe
	   below) ever renders wider than its box on some mobile browser, this
	   stops it from pushing the whole page into a horizontally-scrollable,
	   zoomed-out layout instead of just clipping the one offending element. */
	overflow-x: hidden;
}

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-panel-dark is the SAME dark treatment as .roadv-panel-home,
   used for fully-custom inner pages (Information, Downloads) that
   don't rely on any inherited flux.css markup -- see .roadv-panel-dark
   further down for why those two are safe to keep dark. */
.roadv-navbar a, .roadv-hero a, .roadv-footer a, .roadv-panel-home a, .roadv-panel-dark a{
	color: var(--roadv-gold-light);
}
.roadv-navbar a:hover, .roadv-hero a:hover, .roadv-footer a:hover, .roadv-panel-home a:hover, .roadv-panel-dark a:hover{
	color: var(--roadv-gold);
	text-decoration: none;
}
.roadv-panel-home h1, .roadv-panel-home h2, .roadv-panel-home h3,
.roadv-panel-dark h1, .roadv-panel-dark h2, .roadv-panel-dark 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;
	/* Dark overlay: flat 40% fade (was 20%, briefly, then raised back up
	   per explicit request -- was ~88-94% darkening toward the bottom
	   before that). Text over the photo also gets its own explicit
	   color + text-shadow below (not just relying on the overlay) so it
	   stays legible regardless of what's behind it at any fade level. */
	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.40) 0%, rgba(12, 16, 13, 0.40) 55%, rgba(10, 13, 8, 0.40) 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;
	/* Darker/more opaque pill (was 0.12/0.5) plus a text-shadow on the
	   label so this stays readable no matter how bright the photo behind
	   the hero is at any given fade level. */
	background: rgba(10, 16, 8, 0.55);
	border: 1px solid rgba(92, 138, 58, 0.65);
	color: #d9f5c4;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
	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;
	/* Brighter than the old --roadv-text-muted (which nearly disappeared
	   against a bright photo), plus a dark pill background and
	   text-shadow so this reads clearly at any hero-fade level. */
	color: var(--roadv-gold-light);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
	font-size: 13px;
	margin: 0 0 14px;
	background: rgba(10, 13, 8, 0.45);
	border: 1px solid var(--roadv-border-strong);
	display: inline-block;
	padding: 6px 16px;
	border-radius: 4px;
}

.roadv-hero-logo{
	/* Block-level so it always sits on its own line UNDER the
	   "Welcome to" pill (both were inline, so they ended up side by side). */
	display: block;
	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: #fff8e8;
	/* Layered shadow (tight dark core + soft wider blur) so the tagline
	   stays legible whether it's sitting over sky, water, or land in the
	   background photo, without needing a solid box behind it. */
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 2px 12px rgba(0, 0, 0, 0.6);
	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-light);
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 2px 10px rgba(0, 0, 0, 0.5);
}
.roadv-stat-label{
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	/* Brighter than the old --roadv-text-muted, which blended straight
	   into a light photo background -- see .roadv-hero-tagline above for
	   the same reasoning. */
	color: #e8e0cd;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 2px 10px rgba(0, 0, 0, 0.5);
	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; }

/* The inherited "Menu: Characters / Deaths / ..." sub-nav (#submenu, from
   the base theme's main/submenu.php, which ROADV doesn't override) ships
   with zero top spacing in flux.css, so on any inner page it sits jammed
   directly under the navbar. Give it breathing room -- this is a single
   shared element rendered the same way on every page that has a submenu
   (rankings, item/monster db, etc.), so one rule here fixes all of them. */
#submenu{
	padding: 22px 0 14px;
	font-size: 13px;
}

/* Homepage content: built entirely from our own .roadv-* classes above,
   so it stays dark-themed. */
.roadv-panel-home, .roadv-panel-dark{
	background: var(--roadv-panel);
	border: 1px solid var(--roadv-border);
	border-radius: var(--roadv-radius);
}
.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;
	padding: 32px 28px 12px;
}
/* .roadv-panel-dark: same dark treatment as the homepage, but sized
   like a normal inner page (no centered max-width). Used for pages
   that are ENTIRELY custom .roadv-* markup with nothing inherited from
   flux.css underneath (Information, Downloads) -- unlike Rankings/item
   db/account/etc. below, there's no hardcoded-for-a-white-page styling
   to fight here, so it's safe to keep these dark instead of falling
   back to the light parchment panel. */
.roadv-panel-dark{
	padding: 28px 30px 34px;
	margin: 18px 0 30px;
	box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
}
@media (max-width: 767px){
	.roadv-panel-dark{ padding: 20px 18px 26px; }
}

/* 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):not(.roadv-panel-dark){
	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):not(.roadv-panel-dark) h1,
.roadv-panel:not(.roadv-panel-home):not(.roadv-panel-dark) h2,
.roadv-panel:not(.roadv-panel-home):not(.roadv-panel-dark) h3{
	font-family: var(--roadv-font-display);
	color: #8a5a1e;
	letter-spacing: 0.5px;
}
.roadv-panel:not(.roadv-panel-home):not(.roadv-panel-dark) a{ color: #4083c6; }
.roadv-panel:not(.roadv-panel-home):not(.roadv-panel-dark) a:hover{ color: #26547f; text-decoration: underline; }
/* Tables on the light panel (rankings, item/monster db, ...).
   If ANY PHP notice/warning is printed before <!DOCTYPE html>, the
   browser drops into quirks mode, where tables stop inheriting the
   panel's dark text color and pick up the pale body color instead --
   names/levels/titles become near-invisible on the cream panel. Pin the
   colors explicitly so tables stay readable even if that happens. */
.roadv-panel:not(.roadv-panel-home):not(.roadv-panel-dark) table,
.roadv-panel:not(.roadv-panel-home):not(.roadv-panel-dark) th,
.roadv-panel:not(.roadv-panel-home):not(.roadv-panel-dark) td{
	color: #2a2013;
}
.roadv-panel:not(.roadv-panel-home):not(.roadv-panel-dark) .horizontal-table th{
	color: #5a3d14;
	background-color: #f3ead6;
	font-weight: 600;
}
.roadv-panel:not(.roadv-panel-home):not(.roadv-panel-dark) .not-applicable{ color: #8f8370; }
@media (max-width: 767px){
	.roadv-panel:not(.roadv-panel-home):not(.roadv-panel-dark){ 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; }

.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;
}
/* Introduction card */
.roadv-intro-card{ text-align: center; }
.roadv-intro-card p{
	margin: 0 auto 14px;
	max-width: 760px;
	color: var(--roadv-text);
	line-height: 1.7;
	font-size: 15px;
}
.roadv-intro-highlights{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.roadv-intro-highlights .roadv-tag{ font-size: 11px; padding: 4px 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; }

/* Top Rankers -- ranked top-3 list inside each category card. Each row is
   rank badge + name (grows) + a gold count pill (e.g. "12 MVPs Slain")
   pinned to the right, so the kill/win count is always clearly visible,
   not just the name. */
.roadv-ranker-list{ list-style: none; margin: 14px 0 0; padding: 0; }
.roadv-ranker-item{
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 0;
	border-bottom: 1px dashed var(--roadv-border);
}
.roadv-ranker-item:last-child{ border-bottom: none; }
.roadv-ranker-rank{
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(240, 194, 80, 0.12);
	border: 1px solid var(--roadv-border);
	color: var(--roadv-gold);
	font-size: 11px;
	font-weight: 700;
}
.roadv-ranker-name{
	flex: 1 1 auto;
	min-width: 0;
	font-family: var(--roadv-font-display);
	color: var(--roadv-text);
	font-weight: 600;
	font-size: 14px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.roadv-ranker-value{
	flex: 0 0 auto;
	font-size: 10px;
	white-space: nowrap;
}

/* Latest Card Drops -- table of the newest card drops on the homepage.
   Rows are split into pages of 10 (data-page on each <tr>); the
   Previous / Next pager toggles .roadv-drops-hidden to show one page. */
.roadv-drops-card{ padding: 6px 0 0; overflow: hidden; }
.roadv-drops-empty{ margin: 0; padding: 14px 20px 18px; color: var(--roadv-text-muted); }
.roadv-drops-scroll{ overflow-x: auto; }
.roadv-drops-table{ width: 100%; border-collapse: collapse; font-size: 13px; }
.roadv-drops-table th{
	text-align: left;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--roadv-blue);
	padding: 10px 12px;
	border-bottom: 1px solid var(--roadv-border-strong);
	white-space: nowrap;
}
.roadv-drops-table td{
	padding: 9px 12px;
	border-bottom: 1px dashed var(--roadv-border);
	color: var(--roadv-text);
	vertical-align: middle;
}
.roadv-drops-table tbody tr:last-child td{ border-bottom: none; }
.roadv-drops-table tbody tr:hover td{ background: rgba(240, 194, 80, 0.05); }
.roadv-drops-table th:first-child,
.roadv-drops-table td:first-child{ padding-left: 20px; }
.roadv-drops-table th:last-child,
.roadv-drops-table td:last-child{ padding-right: 20px; }
.roadv-drops-table tr.roadv-drops-hidden{ display: none; }
.roadv-drops-num{ width: 1%; }
td.roadv-drops-num{ color: var(--roadv-text-muted) !important; font-variant-numeric: tabular-nums; }
.roadv-drops-player{
	font-family: var(--roadv-font-display);
	font-weight: 600;
	white-space: nowrap;
}
.roadv-drops-cardname{ color: var(--roadv-gold-light) !important; font-weight: 600; }
.roadv-drops-mvp{ margin-left: 6px; font-size: 9px; padding: 1px 6px; vertical-align: middle; }
td.roadv-drops-mob,
td.roadv-drops-map{ color: var(--roadv-text-muted) !important; }
.roadv-drops-from{ display: none; font-size: 11px; font-weight: 400; color: var(--roadv-text-muted); }
.roadv-drops-time{ text-align: right !important; white-space: nowrap;
}
td.roadv-drops-time{ color: var(--roadv-text-muted) !important; font-variant-numeric: tabular-nums; }
.roadv-drops-pager{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 20px 14px;
	border-top: 1px solid var(--roadv-border);
}
.roadv-drops-pageinfo{ font-size: 12px; color: var(--roadv-text-muted); font-variant-numeric: tabular-nums; }
.roadv-drops-pageinfo strong{ color: var(--roadv-gold-light); }
.roadv-drops-btn{
	background: rgba(240, 194, 80, 0.12);
	border: 1px solid var(--roadv-border-strong);
	color: var(--roadv-gold);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.5px;
	padding: 7px 16px;
	border-radius: 999px;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.roadv-drops-btn:hover:not(:disabled),
.roadv-drops-btn:focus-visible{
	border-color: var(--roadv-gold);
	color: var(--roadv-gold-light);
	background: rgba(240, 194, 80, 0.2);
	outline: none;
}
.roadv-drops-btn:disabled{ opacity: 0.35; cursor: default; }
@media (max-width: 767px){
	.roadv-drops-map,
	.roadv-drops-mob,
	.roadv-drops-num{ display: none; }
	.roadv-drops-from{ display: block; margin-top: 2px; }
	.roadv-drops-table th,
	.roadv-drops-table td{ padding: 8px 8px; }
	.roadv-drops-table th:nth-child(2),
	.roadv-drops-table td:nth-child(2){ padding-left: 14px; }
	.roadv-drops-table th:last-child,
	.roadv-drops-table td:last-child{ padding-right: 14px; }
}

/* 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-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; }
}

/* =====================================================================
   Custom inner pages: Information (server/info.php) and Downloads
   (pages/content.php, path=downloads). Both render inside
   .roadv-panel-dark (see above) and reuse .roadv-card/.roadv-tag/
   .roadv-section-title/.roadv-eyebrow from the homepage where it makes
   sense, plus the page-specific pieces below.
   ===================================================================== */

.roadv-page-heading{ text-align: center; margin-bottom: 26px; }
.roadv-page-heading-icon{
	width: 46px;
	height: 46px;
	margin: 0 auto 12px;
	border-radius: 50%;
	background: rgba(240, 194, 80, 0.1);
	border: 1px solid var(--roadv-border);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
}
.roadv-page-heading h1{
	font-family: var(--roadv-font-display);
	color: var(--roadv-gold-light);
	letter-spacing: 1px;
	margin: 0 0 6px;
	font-size: 26px;
}
.roadv-page-heading p{ margin: 0; color: var(--roadv-text-muted); font-size: 13px; }

/* Server / EXP+Drop rate two-column stat tables */
.roadv-info-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 30px; }
.roadv-info-table{ width: 100%; border-collapse: collapse; }
.roadv-info-table tr{ border-bottom: 1px dashed var(--roadv-border); }
.roadv-info-table tr:last-child{ border-bottom: none; }
.roadv-info-table td{ padding: 9px 2px; font-size: 13px; color: var(--roadv-text-muted); }
.roadv-info-table td:last-child{ text-align: right; font-weight: 700; color: var(--roadv-text); }
@media (max-width: 767px){ .roadv-info-grid{ grid-template-columns: 1fr; gap: 14px; } }

/* Special Features grid (reuses .roadv-card look) */
.roadv-info-feature-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 10px; }
.roadv-info-feature-card h5{ font-family: var(--roadv-font-display); color: var(--roadv-text); margin: 0 0 4px; font-size: 14px; }
.roadv-info-feature-card p{ margin: 0; color: var(--roadv-text-muted); font-size: 12px; }
.roadv-info-note{ font-size: 12px; font-style: italic; color: var(--roadv-text-muted); margin: 10px 0 26px; }
@media (max-width: 767px){ .roadv-info-feature-grid{ grid-template-columns: 1fr; } }

/* In-game commands two-column list */
.roadv-cmd-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; margin-bottom: 6px; }
.roadv-cmd-row{
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px dashed var(--roadv-border);
	font-size: 13px;
}
.roadv-cmd-row code{
	color: var(--roadv-blue);
	background: rgba(79, 179, 232, 0.1);
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 12px;
	white-space: nowrap;
}
.roadv-cmd-row span{ color: var(--roadv-text-muted); text-align: right; }
@media (max-width: 767px){ .roadv-cmd-grid{ grid-template-columns: 1fr; } }

/* Rules & Regulations */
.roadv-rule-group{ margin-bottom: 20px; }
.roadv-rule-group:last-of-type{ margin-bottom: 14px; }
.roadv-rule-group h5{
	font-family: var(--roadv-font-display);
	color: var(--roadv-gold-light);
	margin: 0 0 8px;
	font-size: 14px;
}
.roadv-rule-list{ margin: 0; padding-left: 18px; color: var(--roadv-text); font-size: 13px; line-height: 1.75; }
.roadv-rule-note{
	margin-top: 18px;
	padding: 14px 16px;
	background: rgba(240, 194, 80, 0.07);
	border: 1px solid var(--roadv-border);
	border-radius: var(--roadv-radius);
	font-size: 13px;
	color: var(--roadv-text-muted);
	line-height: 1.6;
}

/* Downloads page */
.roadv-download-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 36px; }
.roadv-download-card{ display: flex; flex-direction: column; }
.roadv-download-icon{
	width: 38px;
	height: 38px;
	margin-bottom: 12px;
	border-radius: 50%;
	background: rgba(79, 179, 232, 0.12);
	border: 1px solid var(--roadv-border);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--roadv-blue);
	font-size: 16px;
}
.roadv-download-card h5{ font-family: var(--roadv-font-display); color: var(--roadv-text); margin: 0 0 4px; font-size: 15px; }
.roadv-download-updated{ font-size: 12px; color: var(--roadv-text-muted); margin: 10px 0 16px; }
.roadv-download-btn{
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 14px;
	border-radius: 6px;
	background: rgba(79, 179, 232, 0.12);
	border: 1px solid rgba(79, 179, 232, 0.4);
	color: var(--roadv-blue);
	font-weight: 600;
	font-size: 13px;
	text-decoration: none;
}
.roadv-download-btn:hover{ background: rgba(79, 179, 232, 0.22); color: var(--roadv-blue); text-decoration: none; }
@media (max-width: 991px){ .roadv-download-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px){ .roadv-download-grid{ grid-template-columns: 1fr; } }

/* Installation steps */
.roadv-steps{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.roadv-step{ text-align: center; }
.roadv-step-num{
	width: 34px;
	height: 34px;
	margin: 0 auto 10px;
	border-radius: 50%;
	background: linear-gradient(180deg, var(--roadv-gold-light), var(--roadv-gold-dark));
	color: #2a1a0c;
	font-family: var(--roadv-font-display);
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}
.roadv-step h5{ font-family: var(--roadv-font-display); color: var(--roadv-text); font-size: 14px; margin: 0 0 6px; }
.roadv-step p{ font-size: 12px; color: var(--roadv-text-muted); margin: 0; line-height: 1.6; }
@media (max-width: 767px){ .roadv-steps{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px){ .roadv-steps{ grid-template-columns: 1fr; } }

/* Mobile Installation Guide -- Android / iOS "Add to Home Screen" cards
   below the PC install steps. Cards reuse .roadv-card; the numbered
   pills reuse the same gold gradient as .roadv-step-num so both guides
   on the page read as one set. */
.roadv-steps + .roadv-section-title{ margin-top: 40px; }
.roadv-mobile-grid{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}
.roadv-mobile-card{ padding: 20px 22px 8px; }
.roadv-mobile-title{
	font-family: var(--roadv-font-display);
	color: var(--roadv-gold-light);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin: 0 0 4px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--roadv-border);
}
.roadv-mobile-steps{ list-style: none; margin: 0; padding: 0; }
.roadv-mobile-steps li{
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 13px 0;
	border-bottom: 1px dashed var(--roadv-border);
	font-size: 13px;
	line-height: 1.55;
	color: var(--roadv-text-muted);
}
.roadv-mobile-steps li:last-child{ border-bottom: none; }
.roadv-mobile-num{
	flex: 0 0 auto;
	min-width: 36px;
	height: 26px;
	padding: 0 8px;
	border-radius: 999px;
	background: linear-gradient(180deg, var(--roadv-gold-light), var(--roadv-gold-dark));
	color: #2a1a0c;
	font-family: var(--roadv-font-display);
	font-size: 11px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
/* Scoped under .roadv-mobile-steps so it outranks ".roadv-panel-dark a". */
.roadv-mobile-steps .roadv-mobile-link{
	color: var(--roadv-gold-light);
	font-weight: 700;
	text-decoration: none;
}
.roadv-mobile-steps .roadv-mobile-link:hover{
	color: var(--roadv-gold);
	text-decoration: underline;
}
@media (max-width: 767px){ .roadv-mobile-grid{ grid-template-columns: 1fr; gap: 14px; } }
/* Downloads page -- grouped sections (PC Client / ROBrowser / RagnaPocket).
   Each .roadv-dl-group gets its own heading bar so the three ways to play
   read as separate blocks. */
.roadv-dl-group{
	margin-bottom: 44px;
	padding-top: 6px;
}
.roadv-dl-group + .roadv-dl-group{
	padding-top: 34px;
	border-top: 1px solid var(--roadv-border-strong);
}
.roadv-dl-group-head{
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 22px;
}
.roadv-dl-group-icon{
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	background: rgba(240, 194, 80, 0.10);
	border: 1px solid var(--roadv-border-strong);
}
.roadv-dl-group-title{
	font-family: var(--roadv-font-display);
	color: var(--roadv-gold-light);
	font-size: 22px;
	letter-spacing: 1px;
	margin: 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}
.roadv-dl-group-platform{
	font-family: var(--roadv-font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--roadv-gold);
	background: rgba(240, 194, 80, 0.12);
	border: 1px solid var(--roadv-border);
	padding: 3px 10px;
	border-radius: 999px;
}
.roadv-dl-group-sub{ margin: 4px 0 0; font-size: 13px; color: var(--roadv-text-muted); }
.roadv-dl-group .roadv-download-grid{ margin-bottom: 30px; }
.roadv-dl-group .roadv-steps{ margin-bottom: 0; }
.roadv-dl-group:last-child .roadv-download-grid{ margin-bottom: 0; }

/* RagnaPocket server code -- click to copy */
.roadv-server-code{
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	padding: 9px 14px;
	border-radius: 6px;
	background: rgba(240, 194, 80, 0.10);
	border: 1px dashed var(--roadv-border-strong);
	cursor: pointer;
	transition: background 0.15s ease;
}
.roadv-server-code:hover{ background: rgba(240, 194, 80, 0.18); }
.roadv-server-code-value{
	font-family: Consolas, 'Courier New', monospace;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 2px;
	color: var(--roadv-gold-light);
}
.roadv-server-code-hint{
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--roadv-gold);
}
@media (max-width: 600px){
	.roadv-dl-group-title{ font-size: 18px; }
	.roadv-dl-group-icon{ width: 40px; height: 40px; font-size: 17px; }
}