/* ==========================================================================
   AIRO (All In One Ragnarok Online) — custom FluxCP theme
   Palette sampled directly from Logo.png (wood, forest green, lime,
   poring pink, sky blue) so the whole site reads as one brand.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:ital,wght@0,400;0,600;0,700;0,800;1,600&display=swap');

:root {
	/* Core surfaces — warm parchment, not dark */
	--bg:            #faf6e9;
	--bg-soft:       #f0f0dc;
	--panel:         #ffffff;
	--panel-2:       #f4efdc;
	--panel-border:  rgba(74, 44, 20, 0.12);
	--panel-border-strong: rgba(74, 44, 20, 0.24);

	/* Wood (from the logo's log frame) */
	--wood:          #8a5a2e;
	--wood-light:    #b98748;
	--wood-dark:     #4a2c14;
	--wood-darker:   #2e1b0c;

	/* Greens (from "ONE" + leaves) */
	--green:         #4f9c2e;
	--green-light:   #7ec13f;
	--green-dark:    #386b1e;
	--green-text:    #3f7d1f;

	/* Accents */
	--pink:          #ec6f9c;
	--pink-dark:     #d1497c;
	--sky:           #1f8fbf;
	--discord:       #5865F2;
	--discord-dark:  #4752c4;

	/* Text (named "cream" for historical reasons — it's the primary
	   ink color now, not a light-on-dark value) */
	--cream:         #2c2110;
	--muted:         #6b5c44;
	--dim:           #948562;

	--radius:        14px;
	--radius-sm:     8px;
	--shadow:        0 12px 28px rgba(74,44,20,0.12);
	--font-display:  'Baloo 2', 'Trebuchet MS', sans-serif;
	--font-body:     'Nunito', 'Lucida Grande', 'Lucida Sans', Verdana, sans-serif;
}

* { box-sizing: border-box; }

html { background-color: var(--bg); }

body {
	margin: 0;
	padding: 0;
	font-family: var(--font-body);
	font-size: 10.5pt;
	color: var(--cream);
	background-color: var(--bg);
	background-image:
		radial-gradient(ellipse 900px 500px at 15% -10%, rgba(126,193,63,0.12), transparent 60%),
		radial-gradient(ellipse 900px 600px at 90% 0%, rgba(138,90,46,0.10), transparent 55%);
	background-attachment: fixed;
	line-height: 1.55;
}

table {
	font-family: var(--font-body);
	font-size: 10.5pt;
}

tr, td, th { vertical-align: top; }

.horizontal-table tr, .vertical-table tr, .generic-form-table tr,
.horizontal-table td, .vertical-table td, .generic-form-table td {
	vertical-align: middle;
}

.horizontal-table th, .vertical-table th, .generic-form-table th {
	vertical-align: top;
}

h1, h2, h3, h4 { font-family: var(--font-display); color: var(--cream); }

h2 {
	color: var(--cream);
	letter-spacing: 0;
	font-weight: 700;
}

h3 {
	font-weight: 600;
	font-size: 120%;
	color: var(--green-text);
	border-bottom: 1px dotted var(--panel-border);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding-bottom: 6px;
}

h3:first-letter { font-weight: bold; }

p { margin: 4px 0 8px 0; padding: 0; color: var(--muted); }

ul, ol { margin: 8px 0 16px 0; padding-left: 22px; color: var(--muted); }
li { margin-bottom: 6px; }

a img { border: 0; }

a {
	color: var(--green-text);
	text-decoration: none;
}
a:hover { color: var(--green-dark); }

input[type=text], input[type=password], input[type=file], textarea, select {
	font-family: var(--font-body);
	padding: 7px 10px;
	font-size: 10pt;
	color: var(--cream) !important;
	background-color: #fffefb !important;
	border: 1px solid var(--panel-border-strong);
	border-radius: var(--radius-sm);
	outline-width: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	color-scheme: light;
}

select {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='%236b5c44' d='M5.5 7.5l4.5 4.5 4.5-4.5z'/></svg>");
	background-repeat: no-repeat;
	background-position: right 8px center;
	background-size: 16px;
	padding-right: 26px;
}

input[type=submit], input[type=button], input[type=reset], button {
	display: inline-flex;
	align-items: center;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 9pt;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #241804 !important;
	background: linear-gradient(180deg, var(--green-light), var(--green)) !important;
	border: 1px solid var(--green-dark);
	border-radius: 999px;
	padding: 8px 18px;
	cursor: pointer;
}
input[type=submit]:hover, input[type=button]:hover, button:hover {
	filter: brightness(1.06);
}

label:hover { cursor: pointer; }

.module-name { font-weight: bold; font-size: 12pt; color: var(--cream); }

.message {
	display: block;
	padding: 12px 16px;
	font-weight: bold;
	font-size: 110%;
	color: #1c1204;
	background: linear-gradient(180deg, var(--green-light), var(--green));
	border-radius: var(--radius-sm);
}

.notice {
	display: block;
	padding: 12px 16px;
	font-weight: normal;
	font-size: 105%;
	color: #0d2436;
	background-color: #cdeefb;
	border: 1px solid #7fc7e6;
	border-radius: var(--radius-sm);
}

.center { text-align: center; }

/* ---------------------------------------------------------------------
   Legacy account-menu sidebar (main/sidebar.php) + admin sidebar
   Re-skinned as a wood/forest card instead of the old blue table.
   --------------------------------------------------------------------- */

#admin_sidebar, #sidebar {
	margin-bottom: 14px;
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
	background-color: var(--panel);
	border: 1px solid var(--panel-border);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
}

#admin_sidebar img, #sidebar img { display: none; }

#admin_sidebar td, #sidebar td { padding: 0; }

#admin_sidebar td.menuitem, #admin_sidebar th.menuitem,
#sidebar td.menuitem, #sidebar th.menuitem {
	display: block;
	font-size: 10pt;
	border: 0;
}

#admin_sidebar th.menuitem, #sidebar th.menuitem {
	background-color: var(--panel-2);
}

#admin_sidebar th.menuitem strong, #sidebar th.menuitem strong {
	display: block;
	margin: 0;
	padding: 12px 16px;
	font-family: var(--font-display);
	font-size: 100%;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: left;
	color: var(--green-text);
	border-bottom: 1px solid var(--panel-border);
}

#admin_sidebar td.menuitem a, #sidebar td.menuitem a {
	margin: 0;
	display: block;
	padding: 10px 16px;
	color: var(--muted);
	background-color: transparent;
	text-align: left;
	text-shadow: none;
	text-decoration: none;
	border-bottom: 1px solid rgba(74,44,20,0.07);
}

#admin_sidebar td.menuitem a:hover, #sidebar td.menuitem a:hover {
	color: var(--cream);
	background-color: rgba(111,191,62,0.14);
	text-shadow: none;
}

#admin_sidebar td.menuitem a span, #sidebar td.menuitem a span { display: block; }

.request, .fs-path {
	display: inline-block;
	padding: 2px 5px;
	font-family: Monaco, "Lucida Console", monospace;
	font-size: 8pt;
	color: var(--cream);
	background-color: var(--panel-2);
	border: 1px solid var(--panel-border);
	border-radius: 4px;
}

.keyword { color: var(--green-dark); font-style: italic; }

.red {
	display: block; padding: 10px; font-weight: bold; font-size: 120%;
	color: #fff; background-color: #b23a3a; border-radius: var(--radius-sm);
}

.green {
	display: block; padding: 10px; font-weight: bold; font-size: 120%;
	color: #14200a; background-color: var(--green-light); border-radius: var(--radius-sm);
}

.note {
	padding: 8px 10px;
	color: var(--muted);
	background-color: var(--panel-2);
	border: 1px solid var(--panel-border);
	border-radius: var(--radius-sm);
	font-style: italic;
}

.up { font-weight: bold; color: var(--green-light); text-transform: uppercase; }
.down { color: #ff8080; text-transform: uppercase; }

.submit_button {
	display: block;
	margin: 10px 0;
	padding: 8px 14px;
	color: var(--cream);
	background-color: var(--panel-2);
	border: 1px solid var(--panel-border-strong);
	border-radius: var(--radius-sm);
}

.submit_button:hover {
	color: #1c1204;
	background: linear-gradient(180deg, var(--green-light), var(--green));
	border: 1px solid var(--green-dark);
	cursor: pointer;
}

.install_table th, .install_table td {
	padding: 8px 12px;
	border: 1px solid var(--panel-border);
}
.install_table th { background-color: var(--panel-2); color: var(--cream); }
.install_table td { width: 180px; text-align: center; color: var(--muted); }

.created { color: var(--green-light); width: 80px; }
.missing { color: #ff8080; width: 80px; }

.pages {
	margin-top: 20px;
	padding-top: 10px;
	color: var(--dim);
	text-align: center;
	border-top: 1px solid var(--panel-border);
}
.pages .page-prev, .pages .page-next { color: var(--green-text); }
.pages .page-num { padding: 0 5px; color: var(--muted); }
.pages .current-page { color: var(--cream); font-weight: bold; }

.horizontal-table, .vertical-table {
	border-spacing: 0;
	border-collapse: collapse;
	width: 100%;
	background-color: var(--panel);
	border-radius: var(--radius-sm);
	overflow: hidden;
}

.horizontal-table th, .vertical-table th {
	padding: 8px 12px;
	background-color: var(--panel-2);
	color: var(--green-text);
	text-transform: uppercase;
	font-size: 85%;
	letter-spacing: 0.03em;
}
.horizontal-table td, .vertical-table td {
	padding: 8px 12px;
	background-color: var(--panel);
	color: var(--cream);
}
.horizontal-table th, .horizontal-table td,
.vertical-table th, .vertical-table td {
	font-size: 9.5pt;
	border: 1px solid var(--panel-border);
}
.vertical-table label { display: block; padding: 5px; color: var(--muted); }

.current-sub-menu { font-weight: bold; color: var(--green-light) !important; }

.td-checkbox { text-align: center; }
.td-action { color: var(--dim); text-align: center; }
.vertical-table .td-action { text-align: right; }
.vertical-table form { margin: 0; padding: 0; }

.not-applicable { font-style: italic; color: var(--dim); }
.state-pending { color: #f0c95c; }
.state-banned { color: #ff8080; }
.state-permanently-banned { font-weight: bold; color: #ff5c5c; }

.raw-txn-log {
	padding: 10px;
	font-family: Monaco, "Lucida Console", "Courier New", monospace;
	background-color: var(--panel-2);
	color: var(--muted);
	border: 1px solid var(--panel-border);
	width: 96%;
	overflow: scroll;
	border-radius: var(--radius-sm);
}

.online { color: var(--green-light); font-weight: bold; }
.offline { color: var(--dim); }

.info-text-total, .info-text-results { font-weight: bold; color: var(--cream); }
.info-text {
	margin-bottom: 8px;
	padding: 8px;
	color: var(--muted);
	background-color: var(--panel);
	border: 1px solid var(--panel-border);
	text-align: center;
	border-radius: var(--radius-sm);
}

.toggler { font-weight: bold; font-style: italic; }
.toggler a { color: var(--green-text); }

.search-form, .search-form2 {
	display: none;
	margin: 0 0 10px 0;
	padding: 0;
	border-top: 1px solid var(--panel-border);
}
.search-form p, .search-form2 p {
	margin: 0; padding: 8px; color: var(--dim); text-align: left;
	border-bottom: 1px solid var(--panel-border);
}
.search-form label, .search-form2 label {
	display: inline-block; margin: 0 0 3px 0; font-size: 8pt; font-style: italic; color: var(--muted);
}
.search-form input[type=text], .search-form2 input[type=text] {
	display: inline-block; margin: 0 0 2px 0; padding: 4px; font-size: 8pt; width: 80px;
}
.search-form input[type=submit], .search-form2 input[type=submit] {
	display: inline-block; margin: 0 0 2px 0; font-size: 8pt; font-weight: bold;
}

#submenu {
	color: var(--dim);
	margin-bottom: 8px;
	font-size: 90%;
}
#submenu a { color: var(--muted); }
#submenu a:hover { color: var(--green-text); }

#pagemenu {
	margin-top: 5px;
	padding: 8px 0;
	font-size: 8.5pt;
	color: var(--dim);
	border-width: 1px 0;
	border-style: dotted;
	border-color: var(--panel-border);
}
#pagemenu a { color: var(--muted); text-decoration: underline; }
#pagemenu a:hover { color: var(--green-text); }

/* loginbox.php's table is: [corner-image row] [message row]
   [optional admin-menu row] [corner-image row]. The corner rows only
   ever held the rounded-corner .gif images — hide those rows outright
   (rather than just their images) so they don't leave behind empty
   pill-shaped bars, and put the card look on the outer table once. */
#loginbox {
	margin-bottom: 14px;
	color: var(--cream);
	border-collapse: separate;
	width: 100%;
	background: linear-gradient(135deg, rgba(126,193,63,0.16), rgba(138,90,46,0.16));
	border: 1px solid var(--panel-border-strong);
	border-radius: var(--radius);
	overflow: hidden;
}
#loginbox tr:first-child, #loginbox tr:last-child { display: none; }
#loginbox td { background: transparent !important; padding: 0; border: 0; }
#loginbox img { display: none; }
#loginbox > tbody > tr > td:nth-child(2) {
	display: block;
	padding: 14px 18px;
}
.loginbox-admin-menu { padding-top: 6px; color: var(--green-text); }
.loginbox-admin-menu a { color: var(--sky); margin-right: 4px; }

#content { color: var(--cream); }

#register_form table td, #login_form table td { padding: 3px; }
#register_form table th label, #login_form table th label {
	display: block; padding: 5px; text-align: center; color: var(--muted);
}
#register_form input[type=text], #register_form input[type=password],
#login_form input[type=text], #login_form input[type=password] { width: 160px; }
#register_form select, #login_form select { width: 168px; }

#server_status th, #server_status td {
	padding: 10px 14px;
	text-align: left;
	border-bottom: 1px solid var(--panel-border);
}
#server_status {
	border-spacing: 0;
	border-collapse: collapse;
	background-color: var(--panel);
	border: 1px solid var(--panel-border);
	border-radius: var(--radius-sm);
	overflow: hidden;
	width: 100%;
}
#server_status .server { color: var(--cream); font-weight: bold; }
#server_status .status { text-align: center; }

#copyright p, #info p {
	margin-top: 5px; margin-bottom: 0;
	font-style: italic; font-size: 8pt;
	color: var(--dim); text-align: right;
}

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

.character-stats { border-spacing: 0; border-collapse: collapse; color: var(--muted); }
.character-stats td { padding: 0 10px 5px 0; border: 0; text-align: center; }
.character-stats .stat-name { color: var(--dim); }
.character-stats .stat-value { color: var(--cream); }

.credit-balance {
	float: right;
	display: inline-block;
	padding: 12px 16px;
	color: var(--cream);
	background-color: var(--panel);
	border: 1px solid var(--panel-border-strong);
	border-radius: var(--radius-sm);
}
.credit-balance .balance-text { display: inline-block; margin-right: 5px; color: var(--dim); text-transform: uppercase; }
.credit-balance .balance-amount { font-weight: bold; color: var(--green-light); }

.emblem-server { margin: 0 0 2px 0; padding: 0 0 2px 0; font-size: 120%; border-bottom: 1px solid var(--panel-border); color: var(--cream); }
.emblem-server label { display: block; }
.emblem-server label:hover { cursor: pointer; }

.script-line { font-family: Monaco, "Lucida Console", monospace; }
.script-line-num { display: inline-block; margin: 0; padding: 5px; background-color: var(--panel-2); border-right: 1px solid var(--panel-border); color: var(--dim); }
.script-line-code { display: inline-block; margin: 0; padding: 5px; color: var(--muted); }

.shop-table { width: 100%; color: var(--cream); border-spacing: 0 10px; border-collapse: separate; }
.shop-table td { padding: 10px; background-color: var(--panel); border: 1px solid var(--panel-border); border-radius: var(--radius-sm); }
.shop-item-image { width: 75px; height: 100px; text-align: center; }
.shop-item-name { margin: 0 0 5px 0; padding: 0 0 2px 0; font-size: 140%; color: var(--cream); border-bottom: 1px solid var(--panel-border); }
.shop-item-cost-qty { width: 150px; color: var(--dim); text-align: center; }
.cost { color: var(--green-light); font-size: 120%; font-weight: bold; text-transform: uppercase; }
.qty { color: var(--cream); }
.shop-item-action { color: var(--dim); }
.shop-item-action a { color: var(--sky); border-bottom: 1px solid var(--panel-border); }
.shop-item-action a:hover { border-bottom: 1px solid var(--sky); }
.short { width: 40px; }
.shop-server-name { color: var(--muted); }
.shop-item-info { text-align: justify; color: var(--muted); }

textarea { width: 320px; height: 120px; }

.cart-items-text { margin: 0 0 5px 0; padding: 8px; color: var(--muted); background-color: var(--panel-2); border: 5px solid var(--panel); border-radius: var(--radius-sm); }
.cart-info-text, .cart-total-text { margin: 0; padding: 0; color: var(--muted); }
.cart-item-name { color: var(--cream); border-bottom: 1px dotted var(--panel-border); }
.cart-item-count { font-size: 120%; font-weight: bold; color: var(--cream); }
.cart-sub-total { color: var(--cream); }
.cart { width: 100%; }
.cart label { display: block; }
.cart h4 { margin: 10px 0 2px 0; font-size: 140%; color: var(--cream); }
.remove-from-cart { width: 100%; text-align: right; }

.checkout-text { font-size: 120%; font-weight: bold; color: var(--cream); }
.checkout-text a { border-bottom: 1px dotted var(--panel-border); }
.checkout-text a:hover { color: var(--cream); border-bottom: 1px solid var(--muted); }

.enter-donation-amount { margin: 0; padding: 0 0 5px 0; font-size: 120%; color: var(--cream); }
.donation-amount-text { margin: 0; padding: 0; font-size: 120%; text-align: center; color: var(--cream); }
.credit-amount-text { font-size: 8pt; text-transform: uppercase; color: var(--dim); text-align: center; letter-spacing: 1px; }
.donation-amount { font-weight: bold; color: var(--green-light); }
.credit-amount { color: var(--muted); }
.reset-amount-text { margin: 0; padding: 0; font-size: 8pt; text-align: center; color: var(--dim); }
.checkout-info-text { margin: 0 0 5px 0; padding: 0; color: var(--muted); }
.remaining-balance { color: var(--cream); }
.exchange-rate { font-size: 120%; font-weight: bold; color: var(--green-light); }

.important { font-size: 120%; color: var(--cream); }
.important .server-name { font-weight: bold; }

.generic-form, .generic-form-div {
	padding: 16px;
	background-color: var(--panel);
	border: 1px solid var(--panel-border);
	border-radius: var(--radius);
	width: auto;
}
.generic-form-table th label { display: block; padding: 6px; color: var(--muted); }
.generic-form-table td div { display: block; padding: 6px 0; }
.generic-form-table th { text-align: right; }
.generic-form-table td input[type=checkbox] { display: inline-block; margin-top: 6px; }
.generic-form-table td p { margin: 6px 5px; color: var(--cream); }

.security-code { margin: 5px 0; text-align: left; width: 145px; height: 50px; }

.action { color: var(--dim); }
.action a, .action span.anchor { color: var(--sky); border-bottom: 1px solid var(--panel-border); cursor: pointer; }
.block-link { display: block; padding: 3px; color: var(--sky); border-bottom: 1px solid var(--panel-border); }
.button-action { padding: 5px 0; text-align: left; }

.woe-table {
	border-spacing: 0; border-collapse: collapse;
	background-color: var(--panel); border: 1px solid var(--panel-border);
	border-radius: var(--radius-sm); overflow: hidden; width: 100%;
}
.woe-table th, .woe-table td { padding: 8px 12px; }
.woe-table th { font-weight: normal; border-bottom: 1px solid var(--panel-border); color: var(--green-text); }
.woe-table td { font-size: 110%; color: var(--cream); }
.woe-table .server { font-weight: bold; }
.woe-table .time { font-style: italic; color: var(--muted); }

.script { width: 98%; }
.multi-select { width: 100%; }

.jump-to-page { margin-top: 8px; font-size: 8pt; text-align: center; color: var(--muted); }
.jump-to-page input { padding: 4px; font-size: 8pt; }

.top-ranked td { font-weight: bold; color: #221808; background-color: var(--green-light) !important; }
.top-ranked a { color: #221808; border-bottom: 1px dotted #221808; }

.empty-row { display: none; }

.item-drop-mvp td { color: var(--cream); background-color: var(--panel-2) !important; }
.item-drop-card td { color: var(--cream); background-color: var(--panel-2) !important; }

.mvp { font-size: xx-small; font-weight: bold; color: var(--pink); vertical-align: top; }

.monster-mode { margin: 0; padding: 0; list-style: square inside; color: var(--muted); }
.monster-mode li { padding: 1px; border-bottom: 1px dotted var(--panel-border); }

.equipped td { background-color: rgba(111,191,62,0.08) !important; }

.job-classes { border-spacing: 0; }
.job-classes td { padding-right: 10px; border-right: 1px solid var(--panel-border); }

.current-shop-category { font-weight: bold; color: var(--green-text); }

.overslotted1 { color: var(--green-light); }
.overslotted2 { color: var(--sky); }
.overslotted3 { color: #f0c95c; }
.overslotted4 { color: var(--pink); }

.hold-hours { color: #f0c95c; font-style: italic; }

/* Generic tables produced by list/paginator views that don't carry a
   specific class (module=account, character, ipban, etc.) */
table.listing, table.paginated {
	width: 100%;
	border-collapse: collapse;
	background-color: var(--panel);
	border-radius: var(--radius-sm);
	overflow: hidden;
}

/* ==========================================================================
   Layout shell
   ========================================================================== */

.site-notice-wrap { max-width: 1180px; margin: 0 auto; padding: 14px 24px 0; }

.cp-shell {
	max-width: 900px;
	margin: 28px auto 60px;
	padding: 0 24px;
}

.cp-content { min-width: 0; }

.wide-shell {
	max-width: 900px;
	margin: 28px auto 60px;
	padding: 0 24px;
}

.content-card {
	background-color: var(--panel);
	border: 1px solid var(--panel-border);
	border-radius: var(--radius);
	padding: 24px 26px;
	box-shadow: var(--shadow);
}

/* ==========================================================================
   Social rail (fixed, left edge) — Facebook + Discord only
   ========================================================================== */

.social-rail {
	position: fixed;
	left: 18px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 60;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.social-rail a {
	width: 38px;
	height: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: rgba(44,33,16,0.045);
	border: 1px solid var(--panel-border-strong);
	color: var(--cream);
	transition: background-color 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.social-rail a:hover {
	background: linear-gradient(160deg, var(--green-light), var(--green-dark));
	border-color: var(--green-light);
	color: #16260a;
	transform: translateY(-2px);
}

.social-rail a svg { width: 18px; height: 18px; fill: currentColor; }

.social-rail .rail-line {
	width: 1px;
	height: 34px;
	background: linear-gradient(var(--panel-border-strong), transparent);
}

@media (max-width: 760px) {
	.social-rail { display: none; }
}

/* ==========================================================================
   Top navbar
   ========================================================================== */

.navbar {
	position: sticky;
	top: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding: 14px 32px;
	background-color: rgba(250,246,233,0.88);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--panel-border);
}

.navbar-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 15pt;
	letter-spacing: 0.03em;
	color: var(--cream);
	white-space: nowrap;
}

.navbar-brand img { height: 34px; width: auto; display: block; }
.navbar-brand .brand-one { color: var(--green-light); }

.navbar-menu {
	display: flex;
	align-items: center;
	gap: 26px;
	list-style: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

.navbar-menu a {
	font-family: var(--font-display);
	font-size: 9.5pt;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--muted);
	padding-bottom: 4px;
	border-bottom: 2px solid transparent;
}

.navbar-menu a:hover, .navbar-menu a.current {
	color: var(--cream);
	border-bottom-color: var(--green-light);
}

.navbar-right { display: flex; align-items: center; gap: 12px; }

.online-pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 7px 14px;
	border-radius: 999px;
	background-color: var(--panel);
	border: 1px solid var(--panel-border-strong);
	font-size: 8.5pt;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--cream);
	text-transform: uppercase;
	white-space: nowrap;
}

.online-pill .dot {
	width: 8px; height: 8px; border-radius: 50%;
	background-color: var(--green-light);
	box-shadow: 0 0 8px var(--green-light);
}

.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px;
	border-radius: 999px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 9.5pt;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	border: 1px solid transparent;
	cursor: pointer;
	white-space: nowrap;
}

.btn-gold, .btn-primary {
	color: #241804;
	background: linear-gradient(180deg, var(--green-light), var(--green));
	box-shadow: 0 6px 18px rgba(111,191,62,0.35);
}
.btn-gold:hover, .btn-primary:hover { filter: brightness(1.06); color: #241804; }

.btn-outline {
	color: var(--cream);
	background-color: rgba(44,33,16,0.045);
	border-color: var(--panel-border-strong);
}
.btn-outline:hover { border-color: var(--cream); }

.btn-discord {
	color: #fff;
	background-color: var(--discord);
}
.btn-discord:hover { background-color: var(--discord-dark); color: #fff; }

.btn-small { padding: 7px 14px; font-size: 8.5pt; }

/* Hamburger button -- hidden on desktop, only shown once .navbar-menu
   collapses below 980px (see media query below). */
.navbar-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 34px;
	height: 34px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--panel-border-strong);
	border-radius: 8px;
	cursor: pointer;
	flex-shrink: 0;
}
.navbar-toggle span {
	display: block;
	width: 18px;
	height: 2px;
	background-color: var(--cream);
	border-radius: 2px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}
.navbar.nav-open .navbar-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar.nav-open .navbar-toggle span:nth-child(2) { opacity: 0; }
.navbar.nav-open .navbar-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

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

	/* Collapses into a dropdown panel anchored under the sticky navbar,
	   toggled open by .navbar-toggle via the .nav-open class on .navbar. */
	.navbar-menu {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background-color: var(--bg);
		border-bottom: 1px solid var(--panel-border);
		box-shadow: var(--shadow);
		padding: 8px 24px 16px;
	}
	.navbar.nav-open .navbar-menu { display: flex; }
	.navbar-menu li { width: 100%; }
	.navbar-menu a {
		display: block;
		padding: 13px 4px;
		border-bottom: 1px solid var(--panel-border);
	}
	.navbar-menu li:last-child a { border-bottom: none; }
}

@media (max-width: 480px) {
	.online-pill { display: none; }
}

/* ==========================================================================
   Hero background scene — shared by the hero + "Join in Three Steps"
   sections, so the illustration reads as one continuous backdrop.
   ========================================================================== */

.hero-bg-wrap {
	position: relative;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.hero-bg-overlay {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		rgba(250,246,233,0.30) 0%,
		rgba(250,246,233,0.48) 26%,
		rgba(250,246,233,0.78) 50%,
		rgba(250,246,233,0.95) 74%,
		var(--bg) 100%
	);
}

.hero-bg-wrap > section { position: relative; z-index: 1; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
	position: relative;
	overflow: hidden;
	padding: 80px 32px 20px;
}

.hero-inner {
	max-width: 1180px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 40px;
	align-items: center;
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-display);
	font-size: 8.5pt;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--green-light);
	margin-bottom: 18px;
}

/* Sits directly on the busy hero illustration — needs more contrast
   than the lighter green used elsewhere on solid backgrounds. */
.hero .eyebrow { color: var(--green-dark); text-shadow: 0 1px 6px rgba(250,246,233,0.8); }
.hero .eyebrow::before { background-color: var(--green-dark); }
.eyebrow::before { content: ''; width: 26px; height: 2px; background-color: var(--green-light); display: inline-block; }

.hero h1 {
	margin: 0 0 20px 0;
	font-size: 44pt;
	line-height: 1.02;
	font-weight: 700;
	color: var(--cream);
}

.hero h1 .accent {
	background: linear-gradient(180deg, var(--green-light), var(--green));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.hero-lede {
	max-width: 520px;
	font-size: 12pt;
	color: var(--muted);
	margin-bottom: 26px;
}
.hero-lede strong { color: var(--cream); }
/* Sits on the busy hero illustration -- needs the same darker/higher-
   contrast treatment as .hero .eyebrow above, not the lighter green
   used on solid backgrounds elsewhere. */
.hero-lede .highlight { color: var(--green-dark); font-weight: 700; text-shadow: 0 1px 6px rgba(250,246,233,0.75); }

.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }

.hero-art { display: flex; justify-content: center; align-items: center; position: relative; }

.hero-art img {
	max-width: 100%;
	height: auto;
	filter: drop-shadow(0 18px 34px rgba(74,44,20,0.3));
	transform-origin: 58% 88%;
	animation: heroWiggle 3.2s ease-in-out infinite;
	will-change: transform;
}

@keyframes heroWiggle {
	0%   { transform: scale(1.22) rotate(0deg); }
	20%  { transform: scale(1.22) rotate(-4deg); }
	40%  { transform: scale(1.22) rotate(3deg); }
	60%  { transform: scale(1.22) rotate(-2deg); }
	80%  { transform: scale(1.22) rotate(2deg); }
	100% { transform: scale(1.22) rotate(0deg); }
}

@media (max-width: 980px) {
	.hero-inner { grid-template-columns: 1fr; text-align: center; }
	.eyebrow { justify-content: center; }
	.hero-lede { margin-left: auto; margin-right: auto; }
	.hero-ctas { justify-content: center; }
	.hero h1 { font-size: 34pt; }
	.hero-art img { max-width: 60%; }
	@keyframes heroWiggle {
		0%   { transform: scale(1.1) rotate(0deg); }
		20%  { transform: scale(1.1) rotate(-4deg); }
		40%  { transform: scale(1.1) rotate(3deg); }
		60%  { transform: scale(1.1) rotate(-2deg); }
		80%  { transform: scale(1.1) rotate(2deg); }
		100% { transform: scale(1.1) rotate(0deg); }
	}
}

/* ==========================================================================
   Falling leaves — purely decorative, sits behind the hero copy/art so it
   never blocks reading or clicks.
   ========================================================================== */

.hero-leaves {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}

.leaf {
	position: absolute;
	left: var(--x, 10%);
	top: -10%;
	width: var(--size, 20px);
	height: var(--size, 20px);
	opacity: 0;
	animation: leafFall var(--duration, 11s) linear infinite;
	animation-delay: var(--delay, 0s);
}

.leaf svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2px 3px rgba(74,44,20,0.18)); }

@keyframes leafFall {
	0%   { top: -10%; transform: translateX(0) rotate(0deg); opacity: 0; }
	8%   { opacity: 0.8; }
	30%  { transform: translateX(var(--sway, 20px)) rotate(120deg); }
	60%  { transform: translateX(calc(var(--sway, 20px) * -0.6)) rotate(220deg); }
	92%  { opacity: 0.8; }
	100% { top: 112%; transform: translateX(var(--sway, 20px)) rotate(340deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.hero-art img { animation: none; transform: scale(1.22); }
	.leaf { animation: none; display: none; }
}

/* ==========================================================================
   Shared section chrome
   ========================================================================== */

.section { padding: 70px 32px; }
.section-alt { background-color: var(--bg-soft); }

/* The "Join" section sits right under the hero inside the same shared
   backdrop -- it reads as one continuous area, so give it a much
   smaller top gap than a normal section break gets. */
#join { padding-top: 10px; }
.section-inner { max-width: 1180px; margin: 0 auto; }

.section-head { text-align: center; max-width: 640px; margin: 0 auto 44px; }
.section-head .eyebrow { justify-content: center; }
.section-head h2 { font-size: 26pt; margin: 0 0 10px 0; }
.section-head h2 .accent { color: var(--green-light); }
.section-head p { color: var(--muted); font-size: 11pt; }

/* Three steps */
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 34px; }
.steps-grid-compact { margin-bottom: 8px; }
.step-card {
	background-color: var(--bg-soft);
	border: 1px solid var(--panel-border);
	border-radius: var(--radius);
	padding: 26px 22px;
}
.step-num {
	display: inline-block;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 9pt;
	color: #241804;
	background: linear-gradient(180deg, var(--green-light), var(--green));
	padding: 4px 10px;
	border-radius: 999px;
	margin-bottom: 14px;
}
.step-card h4 { margin: 0 0 8px 0; font-size: 12.5pt; letter-spacing: 0.02em; text-transform: uppercase; color: var(--cream); }
.step-card p { margin: 0; color: var(--muted); font-size: 9.5pt; }
.steps-cta { text-align: center; }

@media (max-width: 860px) {
	.steps-grid { grid-template-columns: 1fr; }
}

/* Download mirrors (used on the Download page) */
.mirror-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin: 12px 0 28px 0;
}
.mirror-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 18px;
	background-color: var(--bg-soft);
	border: 1px solid var(--panel-border);
	border-radius: var(--radius-sm);
	color: var(--cream);
}
.mirror-card:hover { border-color: var(--green); color: var(--cream); }
.mirror-icon {
	width: 32px; height: 32px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 8px;
	background: linear-gradient(160deg, rgba(126,193,63,0.35), rgba(138,90,46,0.3));
	color: var(--green-dark);
}
.mirror-icon svg { width: 17px; height: 17px; }
.mirror-name { font-family: var(--font-display); font-weight: 700; font-size: 10pt; color: var(--cream); }
.mirror-cta { font-size: 8.5pt; text-transform: uppercase; letter-spacing: 0.04em; color: var(--green-dark); }

@media (max-width: 700px) {
	.mirror-grid { grid-template-columns: 1fr 1fr; }
}

/* Feature / info cards (rates, features, fair & secure) */
.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.info-card {
	background-color: var(--panel);
	border: 1px solid var(--panel-border);
	border-radius: var(--radius);
	padding: 22px 24px;
}
.info-card .info-icon {
	width: 34px; height: 34px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 9px;
	background: linear-gradient(160deg, rgba(111,191,62,0.35), rgba(138,90,46,0.35));
	margin-bottom: 14px;
	color: var(--green-light);
}
.info-card .info-icon svg { width: 18px; height: 18px; fill: currentColor; }
.info-card h4 {
	margin: 0 0 12px 0;
	font-size: 10.5pt;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--dim);
	border-bottom: 1px solid var(--panel-border);
	padding-bottom: 10px;
}
.info-row {
	display: flex;
	justify-content: space-between;
	padding: 6px 0;
	font-size: 9.5pt;
	color: var(--muted);
	border-bottom: 1px dashed rgba(74,44,20,0.08);
}
.info-row:last-child { border-bottom: 0; }
.info-row .val { color: var(--cream); font-weight: 700; }
.info-row .val.gold { color: var(--green-light); }

.tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.tag {
	display: inline-block;
	padding: 5px 11px;
	border-radius: 999px;
	background-color: var(--panel-2);
	border: 1px solid var(--panel-border);
	font-size: 8pt;
	color: var(--muted);
}

@media (max-width: 860px) {
	.info-grid { grid-template-columns: 1fr; }
}

/* Discord CTA banner */
.discord-cta {
	position: relative;
	overflow: hidden;
	border-radius: 20px;
	padding: 40px 44px;
	background: linear-gradient(120deg, rgba(88,101,242,0.28), rgba(111,191,62,0.18)), var(--panel);
	border: 1px solid var(--panel-border-strong);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	flex-wrap: wrap;
}
.discord-cta .eyebrow { color: var(--sky); }
.discord-cta h2 { margin: 0 0 10px 0; font-size: 22pt; }
.discord-cta p { margin: 0; color: var(--muted); max-width: 480px; }
.discord-cta .cta-actions { display: flex; flex-direction: column; gap: 10px; }

/* Hall of Champions */
.champ-tabs { display: flex; justify-content: center; gap: 10px; margin-bottom: 34px; }
.champ-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.champ-card {
	background-color: var(--panel);
	border: 1px solid var(--panel-border);
	border-radius: var(--radius);
	overflow: hidden;
}
.champ-card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid var(--panel-border);
}
.champ-card-head h4 { margin: 0; font-size: 10.5pt; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cream); }
.champ-card-head a { font-size: 8pt; color: var(--dim); text-transform: uppercase; letter-spacing: 0.04em; }
.champ-list { list-style: none; margin: 0; padding: 8px 0; }
.champ-list li {
	display: flex; align-items: center; gap: 12px;
	padding: 10px 20px;
	font-size: 9.5pt;
	color: var(--muted);
}
.champ-rank {
	width: 22px; height: 22px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 6px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 8pt;
	background-color: var(--panel-2);
	color: var(--dim);
	flex-shrink: 0;
}
.champ-list li:nth-child(1) .champ-rank { background: linear-gradient(160deg, var(--green-light), var(--green)); color: #241804; }
.champ-name { flex: 1; color: var(--cream); font-weight: 600; }
.champ-score { color: var(--dim); font-size: 8.5pt; }
.champ-foot { padding: 10px 20px 16px; font-size: 8pt; color: var(--dim); }
.champ-empty { padding: 20px; margin: 0; font-size: 9.5pt; color: var(--dim); }

@media (max-width: 860px) {
	.champ-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
	border-top: 1px solid var(--panel-border);
	background-color: var(--bg-soft);
	padding: 50px 32px 24px;
}
.footer-inner {
	max-width: 1180px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 30px;
	padding-bottom: 30px;
}
.footer-brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 13pt; color: var(--cream); margin-bottom: 10px; }
.footer-brand img { height: 30px; width: auto; }
.footer-col p { color: var(--dim); font-size: 9pt; max-width: 340px; }
.footer-col h5 { margin: 0 0 14px 0; font-size: 9pt; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: 9px; }
.footer-links a { color: var(--muted); font-size: 9.5pt; }
.footer-links a:hover { color: var(--green-light); }
.footer-social { display: flex; gap: 10px; margin-top: 6px; }
.footer-social a {
	width: 36px; height: 36px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background-color: rgba(44,33,16,0.045);
	border: 1px solid var(--panel-border-strong);
	color: var(--cream);
}
.footer-social a:hover { background: linear-gradient(160deg, var(--green-light), var(--green-dark)); color: #16260a; }
.footer-social svg { width: 16px; height: 16px; fill: currentColor; }

.footer-bottom {
	max-width: 1180px;
	margin: 0 auto;
	padding-top: 20px;
	border-top: 1px solid var(--panel-border);
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	font-size: 8.5pt;
	color: var(--dim);
}
.footer-bottom a { color: var(--dim); }
.footer-bottom a:hover { color: var(--muted); }

@media (max-width: 860px) {
	.footer-inner { grid-template-columns: 1fr; }
}

/* Old-style copyright/render-time rows that footer.php still emits on
   inner pages (kept, just muted so they don't clash visually) */
#copyright, #info { display: block; text-align: right; padding: 0 32px; }