/* ==========================================================================
   RagnaDust theme — layered on top of the inherited 'default' theme's
   css/flux.css (tables, forms, module views are still styled by that file).
   This stylesheet only covers the pieces this theme rebuilds: navbar, hero,
   homepage dashboard, footer, and a few light touch-ups so inherited content
   sits comfortably in the new layout.
   ========================================================================== */

:root {
	--rd-dark-950: #130a06;
	--rd-dark-900: #1f0f08;
	--rd-dark-800: #2c150c;
	--rd-dark-700: #401f10;
	--rd-dark-600: #5c2d18;

	--rd-orange-300: #ffd7ae;
	--rd-orange-400: #ffab5e;
	--rd-orange-500: #ff8a3d;
	--rd-orange-600: #eb6a0e;

	--rd-text-on-dark: #eef1fb;
	--rd-text-on-dark-muted: #a7b0d6;

	--rd-bg-page: #f4f5f9;
	--rd-card-bg: #ffffff;
	--rd-card-border: #e6e8f0;
	--rd-text: #232840;
	--rd-text-muted: #6b7086;

	--rd-online: #2fae7c;
	--rd-offline: #e14b4b;

	--rd-radius: 14px;
	--rd-shadow: 0 10px 30px rgba(10, 14, 28, 0.08);
	--rd-max-width: 1180px;
	--rd-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after {
	box-sizing: border-box;
}

html {
	height: 100%;
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	margin: 0;
	background-color: var(--rd-card-bg);
	font-family: var(--rd-font);
	overflow-x: hidden;
}

/* Sticky footer: navbar + content take their natural height, #content grows
   to fill any leftover space so the footer always sits at the bottom of the
   viewport on short pages, and scrolls normally on long ones. */
.rd-navbar {
	flex: 0 0 auto;
}

#content.rd-container {
	flex: 1 0 auto;
}

.rd-footer {
	flex: 0 0 auto;
}

.rd-container {
	max-width: var(--rd-max-width);
	margin: 0 auto;
	padding: 0 20px;
}

#content.rd-container {
	padding-top: 24px;
	padding-bottom: 60px;
	color: var(--rd-text);
}

/* Lets a section break out of the constrained #content column to span the
   full viewport width (used by the hero and the download CTA band). */
.rd-full-bleed {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

.rd-empty {
	color: var(--rd-text-muted);
	font-style: italic;
}

/* ==========================================================================
   Inherited pages (account, character, guild, donate, ranking, item, woe, ...)
   still render through the 'default' theme's templates and flux.css classes.
   Restyling those shared selectors here means every one of those pages picks
   up the new look automatically, without touching a single module template.
   ========================================================================== */

/* Sub-navigation (e.g. Login/Register/Reset Password on account pages,
   or the tabs on history/guild/server/logdata pages). */
.rd-subnav {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 20px;
	padding: 6px;
	background: var(--rd-bg-page);
	border: 1px solid var(--rd-card-border);
	border-radius: 10px;
}

.rd-subnav-item {
	padding: 8px 16px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 600;
	color: var(--rd-text-muted);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .15s ease, color .15s ease;
}

.rd-subnav-item:hover {
	background: rgba(242, 112, 28, .1);
	color: var(--rd-orange-600);
}

.rd-subnav-item.is-active {
	background: linear-gradient(135deg, var(--rd-orange-400), var(--rd-orange-600));
	color: var(--rd-dark-950);
	box-shadow: 0 4px 10px rgba(242, 112, 28, .3);
}

h2 {
	margin: 0 0 18px;
	padding-bottom: 10px;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -.3px;
	color: var(--rd-text);
	border-bottom: 2px solid var(--rd-orange-400);
}

h3 {
	margin: 22px 0 10px;
	padding-bottom: 6px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--rd-text-muted);
	border-bottom: 1px dotted var(--rd-card-border);
}

a {
	color: var(--rd-orange-600);
}

/* Excludes .rd-btn so this never fights with a button's own hover styling
   below (that was washing out "Baixar Cliente" / "Criar Conta" on hover). */
a:not(.rd-btn):hover {
	color: var(--rd-orange-500);
}

.sortable {
	color: var(--rd-text-muted);
	text-decoration: underline;
}

.sortable:hover {
	color: var(--rd-orange-600);
}

input[type=text], input[type=password], input[type=file], textarea, select {
	padding: 8px 10px;
	color: var(--rd-text);
	background: var(--rd-card-bg);
	border: 1px solid var(--rd-card-border);
	border-radius: 8px;
	font-family: var(--rd-font);
}

input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus {
	outline: none;
	border-color: var(--rd-orange-400);
	box-shadow: 0 0 0 3px rgba(242, 112, 28, .15);
}

input[type=submit], input[type=button], button[type=submit], .submit_button, .button {
	display: inline-block;
	padding: 9px 20px;
	background: linear-gradient(135deg, var(--rd-orange-400), var(--rd-orange-600));
	color: #1a0d05;
	border: 0;
	border-radius: 4px;
	font-family: var(--rd-font);
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease;
}

input[type=submit]:hover, input[type=button]:hover, button[type=submit]:hover, .submit_button:hover, .button:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(242, 112, 28, .3);
}

.message, .notice, .red, .green {
	border-radius: 10px;
}

.message {
	background: var(--rd-dark-950);
}

.horizontal-table, .vertical-table, .generic-form-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: var(--rd-shadow);
	border: 1px solid var(--rd-card-border);
}

.horizontal-table th, .vertical-table th, .generic-form-table th {
	padding: 13px 16px;
	background: var(--rd-dark-950);
	color: var(--rd-text-on-dark-muted);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	border-bottom: 1px solid var(--rd-card-border);
}

/* ".generic-form-table" e sempre um formulario de 1 registro (login,
   criar conta, trocar senha, etc.) -- nunca uma lista -- entao, ao contrario
   de ".vertical-table" (que a FluxCP reusa pras duas coisas), esse aqui pode
   levar o tratamento "vertical/key-value" direto, sem precisar adicionar
   "rd-table-kv" manualmente em cada tela. Repetida depois da regra escura
   acima pra vencer por ordem de origem (mesma especificidade). */
.generic-form-table th {
	background: #9f978d;
	color: #1a1a1a;
}

.horizontal-table td, .vertical-table td, .generic-form-table td {
	padding: 13px 16px;
	background: var(--rd-card-bg);
	color: var(--rd-text);
	border-bottom: 1px solid var(--rd-card-border);
}

.horizontal-table tbody tr:nth-child(even) td,
.vertical-table tr:nth-child(even) td,
.generic-form-table tbody tr:nth-child(even) td {
	background: var(--rd-bg-page);
}

.horizontal-table tbody tr:hover td,
.vertical-table tr:hover td,
.generic-form-table tbody tr:hover td {
	background: rgba(242, 112, 28, .1);
}

.horizontal-table tr:last-child td, .vertical-table tr:last-child td {
	border-bottom: 0;
}

/* Tabelas usadas "na vertical" (pares label/valor por linha, ex: detalhes de
   item/monstro), em vez de listas com uma linha de cabecalho no topo. O
   cabecalho escuro do estilo padrao foi pensado pra aparecer uma vez soh no
   topo de uma lista -- repetido em toda coluna de label numa tabela vertical
   fica pesado. Precisa ser adicionada manualmente (class="vertical-table
   rd-table-kv") nos templates que sao genuinamente assim; listas (busca de
   itens, ranking, etc.) continuam com o cabecalho escuro padrao. */
.rd-table-kv th {
	background: #9f978d;
	color: #1a1a1a;
}

/* Formulario de busca sempre visivel (paginas de listagem de item/monstro).
   ".search-form" vem oculto por padrao no flux.css herdado (varias paginas
   usam o link "toggler" + JS pra abrir/fechar). Aqui a segunda classe
   "rd-search-card" (maior especificidade que a regra herdada de uma classe
   soh) mantem sempre aberto e da uma cara de card, sem afetar as outras
   paginas que ainda usam o toggle padrao. */
.search-form.rd-search-card {
	display: block;
	background: var(--rd-card-bg);
	border: 1px solid var(--rd-card-border);
	border-radius: var(--rd-radius);
	box-shadow: var(--rd-shadow);
	padding: 20px;
	margin: 0 0 20px;
}

/* flux.css herdado deixa os labels dos formularios de busca pequenos (8pt)
   e em italico -- aqui volta pro tamanho/estilo padrao do texto da pagina. */
.rd-search-card label {
	font-size: 1em;
	font-style: normal;
	font-weight: 600;
	color: var(--rd-text);
}

/* Registration notice card (ToS + password rules on account/create) */

.rd-notice-card {
	position: relative;
	margin: 0 0 20px;
	padding: 18px 20px 18px 24px;
	background: var(--rd-bg-page);
	border: 1px solid var(--rd-card-border);
	border-radius: var(--rd-radius);
}

.rd-notice-card::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 4px;
	background: linear-gradient(180deg, var(--rd-orange-400), var(--rd-orange-600));
	border-radius: var(--rd-radius) 0 0 var(--rd-radius);
}

.rd-notice-card-title {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--rd-orange-600);
}

.rd-notice-card-text {
	margin: 0 0 12px;
	color: var(--rd-text);
	line-height: 1.55;
}

.rd-notice-card-text:last-child {
	margin-bottom: 0;
}

.rd-notice-list {
	margin: 0;
	padding-left: 20px;
	color: var(--rd-text-muted);
	font-size: 13px;
	line-height: 1.7;
}

.rd-notice-list li::marker {
	color: var(--rd-orange-500);
}

.rd-form-agree {
	margin-bottom: 8px;
	color: var(--rd-text-muted);
	font-size: 12px;
}

/* Account summary (account/view): profile header + grouped info cards,
   replacing the old plain th/td attribute table. */

.rd-profile-card {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 22px 24px;
	margin-bottom: 14px;
	background: linear-gradient(135deg, var(--rd-dark-900), var(--rd-dark-950));
	border-radius: 12px;
	box-shadow: var(--rd-shadow);
}

.rd-profile-avatar {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--rd-orange-400), var(--rd-orange-600));
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	font-weight: 700;
	color: var(--rd-dark-950);
}

.rd-profile-info h4 {
	margin: 0 0 4px;
	font-size: 18px;
	color: var(--rd-text-on-dark);
}

.rd-profile-info p {
	margin: 0;
	font-size: 13px;
	color: var(--rd-text-on-dark-muted);
}

.rd-profile-state {
	display: inline-block;
	margin-left: 10px;
	padding: 3px 10px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 700;
	background: rgba(255, 255, 255, .08);
	vertical-align: middle;
}

.rd-group-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 14px;
}

.rd-info-card {
	background: var(--rd-card-bg);
	border: 1px solid var(--rd-card-border);
	border-radius: 12px;
	box-shadow: var(--rd-shadow);
	overflow: hidden;
}

.rd-info-card h5 {
	margin: 0;
	padding: 10px 16px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--rd-text-on-dark-muted);
	background: var(--rd-dark-950);
}

.rd-info-card-body {
	padding: 16px 18px;
}

.rd-def-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 11px 16px;
	border-bottom: 1px solid var(--rd-card-border);
}

.rd-def-row:last-child {
	border-bottom: none;
}

.rd-def-row:nth-child(even) {
	background: var(--rd-bg-page);
}

.rd-def-label {
	color: var(--rd-text-muted);
	font-size: 13px;
}

.rd-def-value {
	color: var(--rd-text);
	font-weight: 600;
	font-size: 13px;
	text-align: right;
}

.generic-form, .generic-form-div, .install_table {
	background: var(--rd-card-bg);
	border: 1px solid var(--rd-card-border);
	border-radius: var(--rd-radius);
	box-shadow: var(--rd-shadow);
	padding: 20px;
}

#server_status, .woe-table, .shop-table {
	width: 100%;
	background: var(--rd-card-bg);
	border: 1px solid var(--rd-card-border);
	border-radius: var(--rd-radius);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}

#server_status th, .woe-table th, .shop-table th {
	background: var(--rd-bg-page);
	color: var(--rd-text-muted);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .04em;
}

#server_status td, #server_status th, .woe-table td, .woe-table th, .shop-table td {
	padding: 10px 12px;
	border-bottom: 1px solid var(--rd-card-border);
}

.up {
	color: var(--rd-online);
}

.down {
	color: var(--rd-offline);
}

.top-ranked td {
	background: rgba(242, 112, 28, .08);
}

.pages a, .pages .current-page {
	color: var(--rd-orange-600);
}

.credit-balance {
	background: var(--rd-bg-page);
	border: 1px solid var(--rd-card-border);
	border-radius: var(--rd-radius);
}

/* CMS pages (e.g. Downloads) store admin-authored rich-text HTML in the
   database; the editor often bakes an inline font-family into that markup,
   which no external stylesheet can normally override. Force the site font
   inside the rendered CMS body regardless of any inline style it carries. */
.rd-cms-content, .rd-cms-content * {
	font-family: var(--rd-font) !important;
}

/* ---------------------------------- Buttons ---------------------------------- */

.rd-btn {
	display: inline-block;
	padding: 11px 22px;
	border-radius: 4px;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	border: 1px solid transparent;
	transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
	cursor: pointer;
}

.rd-btn-primary {
	background: linear-gradient(135deg, var(--rd-orange-400), var(--rd-orange-600));
	color: var(--rd-dark-950);
}

.rd-btn-primary:hover {
	color: var(--rd-dark-950);
	transform: translateY(-1px);
	box-shadow: 0 8px 20px rgba(217, 162, 74, .35);
}

.rd-btn-ghost {
	background: transparent;
	color: var(--rd-text);
	border-color: var(--rd-card-border);
}

.rd-btn-ghost:hover {
	color: var(--rd-text);
	background: var(--rd-bg-page);
}

.rd-navbar .rd-btn-ghost,
.rd-hero .rd-btn-ghost,
.rd-cta-band .rd-btn-ghost {
	color: var(--rd-text-on-dark);
	border-color: rgba(255, 255, 255, .3);
	background: rgba(255, 255, 255, .06);
}

.rd-navbar .rd-btn-ghost:hover,
.rd-hero .rd-btn-ghost:hover,
.rd-cta-band .rd-btn-ghost:hover {
	color: var(--rd-text-on-dark);
	background: rgba(255, 255, 255, .16);
}

/* ---------------------------------- Navbar ---------------------------------- */

.rd-navbar {
	position: sticky;
	top: 0;
	z-index: 100;
	background: linear-gradient(180deg, var(--rd-dark-900), var(--rd-dark-800));
	border-bottom: 1px solid var(--rd-dark-700);
}

.rd-navbar-inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 8px 20px;
}

.rd-navbar-brand img {
	display: block;
	height: 40px;
	border-radius: 8px;
}

.rd-navbar-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 34px;
	height: 34px;
	background: transparent;
	border: 0;
	cursor: pointer;
}

.rd-navbar-toggle span {
	display: block;
	height: 2px;
	background: var(--rd-text-on-dark);
	border-radius: 2px;
}

.rd-navbar-menu {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.rd-navbar-nav {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 2px;
}

.rd-navbar-dropdown {
	position: relative;
}

.rd-navbar-nav > li > a {
	display: block;
	padding: 10px 12px;
	color: var(--rd-text-on-dark);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	border-radius: 8px;
	white-space: nowrap;
}

.rd-navbar-nav > li > a:hover {
	background: rgba(255, 255, 255, .08);
	color: var(--rd-orange-300);
}

.rd-caret {
	display: inline-block;
	margin-left: 4px;
	border: solid currentColor;
	border-width: 0 2px 2px 0;
	padding: 3px;
	transform: rotate(45deg);
	vertical-align: middle;
}

.rd-navbar-dropdown-menu {
	position: absolute;
	/* Flush against the trigger (no margin gap) so the pointer never leaves
	   the hoverable area while moving down from the link into the menu. */
	top: 100%;
	left: 0;
	min-width: 210px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--rd-dark-800);
	border: 1px solid var(--rd-dark-700);
	border-radius: 10px;
	box-shadow: var(--rd-shadow);
	display: none;
	z-index: 110;
}

/* Visibility is driven only by JS (adds/removes .rd-nav-open) so exactly one
   dropdown can ever be open — a plain CSS :hover rule here would let the
   browser open a menu on its own and fight with the JS-managed state. */
.rd-navbar-dropdown.rd-nav-open .rd-navbar-dropdown-menu {
	display: block;
}

.rd-navbar-dropdown-menu li a {
	display: block;
	padding: 8px 10px;
	border-radius: 6px;
	color: var(--rd-text-on-dark-muted);
	font-size: 13px;
	text-decoration: none;
}

.rd-navbar-dropdown-menu li a:hover {
	background: rgba(255, 255, 255, .08);
	color: var(--rd-text-on-dark);
}

.rd-navbar-auth {
	display: flex;
	align-items: center;
	gap: 10px;
}

.rd-navbar-account {
	color: var(--rd-orange-300);
	font-size: 13px;
	text-decoration: none;
	white-space: nowrap;
}

.rd-navbar-server {
	background: var(--rd-dark-700);
	color: var(--rd-text-on-dark);
	border: 1px solid var(--rd-dark-600);
	border-radius: 6px;
	padding: 5px 6px;
	font-size: 12px;
}

/* ----------------------------------- Hero ----------------------------------- */

.rd-hero {
	background:
		radial-gradient(circle at 20% -15%, rgba(255, 130, 40, .38), transparent 50%),
		radial-gradient(circle at 88% 10%, rgba(120, 30, 10, .4), transparent 45%),
		radial-gradient(circle at 50% 120%, rgba(255, 90, 20, .18), transparent 55%),
		linear-gradient(180deg, var(--rd-dark-950), var(--rd-dark-900) 55%, var(--rd-dark-800));
	color: var(--rd-text-on-dark);
	padding-bottom: 20px;
}

.rd-hero-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	padding: 32px 0 24px;
}

.rd-hero-content {
	flex: 1 1 480px;
	max-width: 620px;
}

.rd-hero-title {
	margin: 0;
	font-size: clamp(28px, 5vw, 46px);
	font-weight: 800;
	letter-spacing: -.5px;
}

.rd-hero-tagline {
	margin: 8px 0 18px;
	font-size: 17px;
	color: var(--rd-text-on-dark-muted);
}

.rd-hero-ctas {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

.rd-hero-ctas .rd-btn {
	padding: 13px 28px;
}

.rd-hero-art {
	flex: 0 0 auto;
	max-width: 320px;
}

.rd-hero-art img {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .35));
}

/* ---------------------------------- Badges ---------------------------------- */

.rd-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.rd-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .14);
	font-size: 13px;
	color: var(--rd-text-on-dark-muted);
}

.rd-badge strong {
	color: var(--rd-text-on-dark);
	font-weight: 700;
}

.rd-badge-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--rd-offline);
}

.rd-badge-dot.is-up {
	background: var(--rd-online);
	box-shadow: 0 0 0 3px rgba(47, 174, 124, .25);
}

.rd-badge-dot.is-down {
	background: var(--rd-offline);
	box-shadow: 0 0 0 3px rgba(225, 75, 75, .25);
}

/* --------------------------------- Sections --------------------------------- */

.rd-section {
	padding: 56px 0;
	background: var(--rd-card-bg);
}

.rd-section-alt {
	background: var(--rd-bg-page);
}

.rd-section-title {
	margin: 0 0 6px;
	padding-bottom: 0;
	font-size: 24px;
	letter-spacing: -.3px;
	color: var(--rd-text);
	border-bottom: none;
}

.rd-section-sub {
	margin: 0 0 24px;
	color: var(--rd-text-muted);
}

.rd-card {
	background: var(--rd-card-bg);
	border: 1px solid var(--rd-card-border);
	border-radius: var(--rd-radius);
	box-shadow: var(--rd-shadow);
	padding: 20px;
}

/* News cards */

.rd-news-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
	margin-top: 20px;
}

.rd-news-thumb {
	margin: -20px -20px 14px;
	height: 130px;
	overflow: hidden;
	border-radius: var(--rd-radius) var(--rd-radius) 0 0;
}

.rd-news-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rd-news-card h3 {
	margin: 0 0 6px;
	padding-bottom: 0;
	font-size: 17px;
	text-transform: none;
	letter-spacing: normal;
	color: var(--rd-text);
	border-bottom: none;
}

.rd-news-date {
	display: block;
	margin-bottom: 10px;
	font-size: 12px;
	color: var(--rd-text-muted);
}

.rd-news-card p {
	margin: 0 0 14px;
	font-size: 14px;
	line-height: 1.55;
	color: var(--rd-text);
}

.rd-card-link {
	font-size: 13px;
	font-weight: 600;
	color: var(--rd-orange-600);
	text-decoration: none;
}

.rd-card-link:hover {
	text-decoration: underline;
}

/* About the server */

.rd-about-inner {
	display: flex;
	align-items: flex-start;
	gap: 40px;
}

.rd-about-art {
	flex: 0 0 auto;
	max-width: 260px;
}

.rd-about-art img {
	display: block;
	width: 100%;
	height: auto;
}

.rd-about-content {
	flex: 1 1 480px;
}

.rd-about-content > p {
	color: var(--rd-text);
	line-height: 1.6;
	margin: 0 0 8px;
}

/* Castle list (account/castle): decorative art flanking the table, filling
   the otherwise-empty left/right gutters on this inherited page.

   ".rd-side-*" e o mesmo layout generico, usado em outras paginas com arte
   decorativa nas laterais (vote4points, quem esta online) -- agrupado na
   mesma regra pra nao duplicar CSS. */

.rd-castle-layout, .rd-side-layout {
	display: flex;
	align-items: flex-start;
	gap: 32px;
}

.rd-castle-side, .rd-side-panel {
	flex: 0 0 auto;
	max-width: 200px;
}

.rd-castle-side img, .rd-side-panel img {
	display: block;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 12px 20px rgba(10, 14, 28, 0.12));
}

.rd-castle-side-mirrored img, .rd-side-panel-mirrored img {
	transform: scaleX(-1);
}

.rd-castle-main, .rd-side-main {
	flex: 1 1 480px;
	min-width: 0;
}

/* Small inline flag icon marking an unclaimed castle in the table. */
.rd-castle-unclaimed-flag {
	width: 20px;
	height: auto;
	display: block;
}

@media (max-width: 900px) {
	.rd-castle-side, .rd-side-panel {
		display: none;
	}
}

/* Server rates / WoE panel */

.rd-info-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 16px;
	margin: 20px 0;
}

.rd-info-card {
	text-align: center;
}

.rd-info-label {
	display: block;
	margin-bottom: 8px;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--rd-text-muted);
}

.rd-info-value {
	font-size: 22px;
	font-weight: 700;
	color: var(--rd-text);
}

.rd-woe-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}

.rd-woe-list li {
	padding: 8px 14px;
	background: var(--rd-bg-page);
	border: 1px solid var(--rd-card-border);
	border-radius: 8px;
	font-size: 13px;
	color: var(--rd-text);
}

/* Item shop preview */

.rd-shop-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 20px;
	margin: 20px 0 28px;
}

.rd-shop-card {
	position: relative;
	text-align: center;
	overflow: hidden;
}

.rd-shop-ribbon {
	position: absolute;
	top: 14px;
	right: -34px;
	transform: rotate(45deg);
	width: 130px;
	padding: 4px 0;
	background: linear-gradient(135deg, var(--rd-orange-400), var(--rd-orange-600));
	color: var(--rd-dark-950);
	font-size: 12px;
	font-weight: 700;
	text-align: center;
	box-shadow: 0 4px 10px rgba(0, 0, 0, .15);
}

.rd-shop-image {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 90px;
	margin-bottom: 10px;
}

.rd-shop-image img {
	max-width: 100%;
	max-height: 100%;
}

.rd-shop-card h3 {
	margin: 0 0 8px;
	padding-bottom: 0;
	font-size: 15px;
	text-transform: none;
	letter-spacing: normal;
	border-bottom: none;
}

.rd-shop-card h3 a {
	color: var(--rd-text);
	text-decoration: none;
}

.rd-shop-card h3 a:hover {
	color: var(--rd-orange-600);
}

/* Download CTA band */

.rd-cta-band {
	background:
		radial-gradient(circle at 85% -20%, rgba(255, 130, 40, .3), transparent 50%),
		linear-gradient(120deg, var(--rd-dark-900), var(--rd-dark-800));
	color: var(--rd-text-on-dark);
}

.rd-cta-band-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 40px 0;
	flex-wrap: wrap;
}

.rd-cta-band-inner h2 {
	margin: 0 0 6px;
	padding-bottom: 0;
	font-size: 22px;
	color: inherit;
	border-bottom: none;
}

.rd-cta-band-inner p {
	margin: 0;
	color: var(--rd-text-on-dark-muted);
}

/* ---------------------------------- Footer ---------------------------------- */

.rd-footer {
	background: var(--rd-dark-950);
	color: var(--rd-text-on-dark-muted);
	border-top: 1px solid var(--rd-dark-700);
}

.rd-footer-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px 24px;
	padding: 20px;
	font-size: 13px;
}

.rd-footer-brand strong {
	margin-right: 10px;
	color: var(--rd-text-on-dark);
}

.rd-footer-powered a {
	color: var(--rd-orange-300);
}

.rd-footer-render {
	margin-left: 10px;
}

.rd-footer-selectors {
	display: flex;
	align-items: center;
	gap: 16px;
}

.rd-footer-selectors label {
	display: flex;
	align-items: center;
	gap: 6px;
}

.rd-footer-selectors select {
	background: var(--rd-dark-800);
	color: var(--rd-text-on-dark);
	border: 1px solid var(--rd-dark-600);
	border-radius: 6px;
	padding: 4px 8px;
	font-size: 12px;
}

/* -------------------------------- Responsive -------------------------------- */

@media (max-width: 900px) {
	.rd-navbar-toggle {
		display: flex;
	}

	.rd-navbar-menu {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
		padding: 14px 20px 22px;
		background: var(--rd-dark-900);
		border-top: 1px solid var(--rd-dark-700);
		box-shadow: var(--rd-shadow);
	}

	.rd-navbar-menu.is-open {
		display: flex;
	}

	.rd-navbar-nav {
		flex-direction: column;
		gap: 2px;
	}

	.rd-navbar-dropdown-menu {
		position: static;
		display: block;
		margin: 0;
		padding-left: 14px;
		background: transparent;
		border: 0;
		box-shadow: none;
	}

	.rd-navbar-auth {
		flex-direction: column;
		align-items: stretch;
	}

	.rd-cta-band-inner {
		text-align: center;
		justify-content: center;
	}

	.rd-hero-inner {
		flex-direction: column;
		text-align: center;
		padding-top: 40px;
	}

	.rd-hero-ctas, .rd-badges {
		justify-content: center;
	}

	.rd-hero-art {
		order: -1;
		max-width: 220px;
	}

	.rd-about-inner {
		flex-direction: column;
		text-align: center;
	}

	.rd-about-art {
		max-width: 200px;
		margin: 0 auto;
	}
}

@media (max-width: 560px) {
	.rd-hero-ctas {
		flex-direction: column;
		align-items: stretch;
	}
}