/*********************************************
	 ** Stylesheet file for default Flux theme. **
	 *********************************************/

.loginbox-admin-menu {
	padding-top: 5px;
	color: #94b4d5;
}

body {
	margin: 0 0 20px 0;
	padding: 0;
	font-family: "Lucida Grande", "Lucida Sans", Verdana, Tahoma, sans-serif;
	font-size: 9pt;
	color: #000;
	background-color: #fff;
}

table {
	font-family: "Lucida Grande", "Lucida Sans", Verdana, Tahoma, sans-serif;
	font-size: 9pt;
}

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

h2 {
	color: #444;
	letter-spacing: -1px;
}

h3 {
	/*font-style: italic;*/
	font-weight: normal;
	font-size: 120%;
	color: #444;
	border-bottom: 1px dotted #ddd;
	text-transform: uppercase;
}

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

p {
	margin: 4px 0 8px 0;
	padding: 0;
}

a img {
	border: 0;
}

a {
	color: #4083c6;
	text-decoration: none;
}

input[type=text], input[type=password], input[type=file], textarea {
	font-family: "Lucida Grande", "Lucida Sans", Verdana, Tahoma, sans-serif;
	padding: 4px;
	font-size: 10pt;
	color: #444;
	border: 1px solid #ddd;
	outline-width: 0;
}

label:hover {
	cursor: pointer;
}

/*input[type=text]:hover, input[type=password]:hover, textarea:hover {
	color: #46a;
	background-color: #dee;
	border: 1px solid #8ac;
}*/

.module-name {
	font-weight: bold;
	font-size: 12pt;
}

.message {
	display: block;
	padding: 10px;
	font-weight: bold;
	font-size: 120%;
	color: #fff;
	background-color: #333;
}

.notice {
	display: block;
	padding: 10px;
	font-weight: normal;
	font-size: 120%;
	color: #204a87;
	background-color: #F0FFFF;
	border: 1px solid #87CEEB;
}

.center {
	text-align: center;
}

#admin_sidebar, #sidebar {
	margin-bottom: 10px;
	border-collapse: collapse;
	border-spacing: 0;
}

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

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

#admin_sidebar td.menuitem, #admin_sidebar th.menuitem {
	display: block;
	font-size: 10pt;
	border-width: 0 13px 0 11px;
	border-style: solid;
	border-color: #8b8b8b;
}

#admin_sidebar th.menuitem {
	background-color: #303030;
}

#admin_sidebar th.menuitem strong {
	display: block;
	margin: 0 12px;
	padding: 10px 0 2px 0;
	font-size: 100%;
	text-align: center;
	color: #fff;
	border-bottom: 1px solid #555;
}

#admin_sidebar td.menuitem a {
	margin: 0 auto;
	display: block;
	padding: 2px 5px 4px 18px;
	color: #fff;
	background-color: #303030;
	text-align: left;
	text-shadow: #000 1pt 1pt;
	text-decoration: none;
}

#admin_sidebar td.menuitem a:hover {
	color: #fff;
	background-color: #4a5259;
	text-shadow: #4a5259 1pt 1pt;
}

#admin_sidebar td.menuitem a span {
	/*display: block;*/
}

#sidebar td.sidebar-left, #sidebar td.sidebar-right {
	background-color: #e6f0fa;
}

#sidebar td.menuitem, #sidebar th.menuitem {
	display: block;
	font-size: 10pt;
	border-width: 0 13px 0 11px;
	border-style: solid;
	border-color: #c4d9ee;
}


#sidebar th.menuitem {
	background-color: #94b4d5;
}

#sidebar th.menuitem strong {
	display: block;
	margin: 0 12px;
	padding: 10px 0 2px 0;
	font-size: 100%;
	text-align: center;
	color: #fff;
	border-bottom: 1px solid #c4d9ee;
}

#sidebar td.menuitem a {
	margin: 0 auto;
	display: block;
	padding: 2px 5px 4px 18px;
	color: #fff;
	background-color: #94b4d5;
	text-align: left;
	text-shadow: #708fae 1pt 1pt;
	text-decoration: none;
}

#sidebar td.menuitem a:hover {
	color: #fff;
	background-color: #708fae;
	text-shadow: #708fae 1pt 1pt;
}

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

.request, .fs-path {
	display: inline-block;
	padding: 2px;
	font-family: Monaco, "Lucida Console", "Bitsteam Vera Sans Mono", monospace;
	font-size: 8pt;
	background-color: #fff;
	border: 1px solid #eee;
}

.keyword {
	color: #ffba00;
	font-style: italic;
}

.red {
	display: block;
	padding: 10px;
	font-weight: bold;
	font-size: 120%;
	color: #fff;
	background-color: #f00;
}

.green {
	display: block;
	padding: 10px;
	font-weight: bold;
	font-size: 120%;
	color: #fff;
	background-color: #0c0;
}

.note {
	padding: 5px;
	color: #444;
	background-color: #eaeaea;
	font-style: italic;
}

.up {
	font-weight: bold;
	color: #0f0;
	text-transform: uppercase;
}

.down {
	color: #f00;
	text-transform: uppercase;
}

.submit_button {
	display: block;
	margin: 10px;
	padding: 5px;
	background-color: #eee;
	border: 1px solid #ccc;
}

.submit_button:hover {
	color: #fff;
	background-color: #333;
	border: 1px solid #111;
	cursor: pointer;
}

.install_table th, .install_table td {
	padding: 5px 10px;
	border: 1px solid #ddd;
}

.install_table th {
	background-color: #eef;
}

.install_table td {
	width: 180px;
	text-align: center;
}

.created {
	color: green;
	width: 80px;
}

.missing {
	color: red;
	width: 80px;
}

.pages {
	margin-top: 20px;
	padding-top: 10px;
	color: #ccc;
	text-align: center;
	border-top: 1px solid #ddd;
}

.pages .page-prev, .pages .page-next {
	color: #94b4d5;
}

.pages .page-num {
	padding: 0 5px;
}

.pages .current-page {
	color: #000000;
	font-weight: bold;
}

.horizontal-table {
	border-spacing: 0;
	border-collapse: collapse;
	width: 100%;
}

.horizontal-table th {
	padding: 5px 10px;
	background-color: #eee;
}

.horizontal-table td {
	padding: 5px 10px;
	background-color: #fff;
}

.horizontal-table th, .horizontal-table td {
	font-size: 9pt;
	border: 1px solid #ddd;
}

.vertical-table {
	border-spacing: 0;
	border-collapse: collapse;	
}

.vertical-table th {
	padding: 5px 10px;
	background-color: #eee;
}

.vertical-table td {
	padding: 5px 12px;
	background-color: #fff;
}

.vertical-table th, .vertical-table td {
	font-size: 9pt;
	border: 1px solid #ddd;
}

.vertical-table label {
	display: block;
	padding: 5px;
}

.current-sub-menu {
	font-weight: bold;
}

.td-checkbox {
	text-align: center;
}

.td-action {
	color: #ccc;
	text-align: center;
}

.vertical-table .td-action {
	text-align: right;
}

.vertical-table form {
	margin: 0;
	padding: 0;
}

.not-applicable {
	font-style: italic;
	color: #bbb;
}

.state-pending {
	color: orange;
}

.state-banned {
	color: red;
}

.state-permanently-banned {
	font-weight: bold;
	color: red;
}

.raw-txn-log {
	padding: 10px;
	font-family: "Monaco", "Lucida Console", "Courier New", monospace;
	background-color: #fff;
	border: 1px solid #ddd;
	width: 96%;
	overflow: scroll;
}

.online {
	color: #000;
}

.offline {
	color: #aaa;
}

.info-text-total {
	font-weight: bold;
}

.info-text-results {
	font-weight: bold;
}

.info-text {
	margin-bottom: 6px;
	padding: 5px;
	color: #666;
	background-color: #fff;
	border: 1px solid #ccc;
	text-align: center;
}

.toggler {
	font-weight: bold;
	font-style: italic;
}

.toggler a {
	color: #26a;
}

.search-form, search-form2 {
	display: none;
	margin: 0 0 10px 0;
	padding: 0;
	border-top: 1px solid #ddd;
}

.search-form p, .search-form2 p {
	margin: 0;
	padding: 5px;
	color: #aaa;
	text-align: left;
	border-bottom: 1px solid #ddd;
}

.search-form label, .search-form2 label {
	display: inline-block;
	margin: 0 0 3px 0;
	font-size: 8pt;
	font-style: italic;
	color: #222;
}

.search-form input[type=text], .search-form2 input[type=text] {
	display: inline-block;
	margin: 0 0 2px 0;
	padding: 2px;
	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;
}

.search-form input[type=button], .search-form input[type=reset],
.search-form2 input[type=button], .search-form2 input[type=reset] {
	display: inline-block;
	margin: 0 0 2px 0;
	font-size: 8pt;
}

.search-form input[type=checkbox], .search-form2 input[type=checkbox] {
	display: inline-block;
	margin: 0 0 2px 0;
}

.search-form select, .search-form2 select {
	display: inline-block;
	margin: 2px 0;
}

#submenu {
	color: #bbb;
}

#pagemenu {
	margin-top: 5px;
	padding: 5px 0;
	font-size: 8pt;
	color: #888;
	border-width: 1px 0;
	border-style: dotted;
	border-color: #ddd;
}

#pagemenu a {
	color: #777974;
	text-decoration: underline;
}

#pagemenu a:hover {
	color: #729fcf;
}

#loginbox {
	margin-bottom: 10px;
	color: #555;
}

#content {
	color: #555;
}

#register_form table td, #login_form table td {
	padding: 1px;
}

#register_form table th label, #login_form table th label {
	display: block;
	padding: 5px;
	text-align: center;
}

#register_form input[type=text], #register_form input[type=password], #login_form input[type=text], #login_form input[type=password] {
	width: 140px;
}

#register_form select, #login_form select {
	width: 147px;
}

#server_status th, #server_status td {
	padding: 8px 12px 8px 12px;
	text-align: left;
	border-bottom: 1px solid #ddd;	
}

#server_status {
	border-spacing: 0;
	border-collapse: collapse;
	background-color: #fff;
	border: 1px solid #ddd;
}

#server_status .server {
	color: #222;
}

#server_status .status {
	text-align: center;
}

#copyright p {
	margin-top: 5px;
	margin-bottom: 0px;
	font-style: italic;
	font-size: 8pt;
	color: #ccc;
	text-align: right;
}

#info p {
	margin-top: 5px;
	margin-bottom: 0px;
	font-style: italic;
	font-size: 8pt;
	color: #aaa;
	text-align: right;
}

.sortable {
	color: #444;
	text-decoration: underline;
}

.sortable:hover {
	color: #000;
}

.character-stats {
	border-spacing: 0;
	border-collapse: collapse;
	color: #ccc;
}

.character-stats td {
	padding: 0px 10px 5px 0;
	border: 0;
	text-align: center;
}

.character-stats .stat-name {
	color: #666;
}

.character-stats .stat-value {
	color: #000;
}

.credit-balance {
	float: right;
	display: inline-block;
	padding: 10px;
	color: #000;
	background-color: #eee;
	border: 1px dotted #ddd;
}

.credit-balance .balance-text {
	display: inline-block;
	margin-right: 5px;
	color: #bbb;
	text-transform: uppercase;
}

.credit-balance .balance-amount {
	font-weight: bold;
}

.emblem-server {
	margin: 0 0 2px 0;
	padding: 0 0 2px 0;
	font-size: 120%;
	border-bottom: 1px solid #ddd;
}

.emblem-server label {
	display: block;
}

.emblem-server label:hover {
	cursor: pointer;
}

.block {
	display: block;
	width: 80%;
	height: 40px;
}

.script-line {
	font-family: Monaco, "Lucida Console", monospace;
}

.script-line-num {
	display: inline-block;
	margin: 0;
	padding: 5px;
	background-color: #eee;
	border-right: 1px solid #ddd;
}

.script-line-code {
	display: inline-block;
	margin: 0;
	padding: 5px;
}

.shop-table {
	width: 100%;
	color: #000;
	border-spacing: 0 10px;
	border-collapse: separate;
}

.shop-table td {
	padding: 10px;
	background-color: #fff;
	border: 1px solid #ddd;
}

.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: #222;
	border-bottom: 1px solid #eee;
}

.shop-item-cost-qty {
	width: 150px;
	color: #aaa;
	text-align: center;
}

.cost {
	color: #000;
	font-size: 120%;
	font-weight: bold;
	text-transform: uppercase;
}

.qty {
	color: #000;
}

.shop-item-action {
	color: #ddd;
}

.shop-item-action a {
	color: #80a2c8;
	border-bottom: 1px solid #eee;
}

.shop-item-action a:hover {
	border-bottom: 1px solid #80a2c8;
}

.short {
	width: 40px;
}

.shop-server-name {
	color: #333;
}

.shop-item-info {
	text-align: justify;
}

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

.cart-items-text {
	margin: 0 0 5px 0;
	padding: 5px;
	color: #ddd;
	background-color: #888;
	border: 5px solid #777;
}

.cart-info-text {
	margin: 0 0 5px 0;
	padding: 0;
}

.cart-total-text {
	margin: 0;
	padding: 0;
}

.cart-item-name {
	color: #fff;
	border-bottom: 1px dotted #aaa;
}

.cart-item-count {
	font-size: 120%;
	font-weight: bold;
	color: #000;
}

.cart-sub-total {
	color: #000;
}

.cart {
	width: 100%;
}

.cart label {
	display: block;
}

.cart h4 {
	margin: 10px 0 2px 0;
	font-size: 140%;
}

.remove-from-cart {
	width: 100%;
	text-align: right;
}

.checkout-text {
	font-size: 120%;
	font-weight: bold;
}

.checkout-text a {
	border-bottom: 1px dotted #ccc;
}

.checkout-text a:hover {
	color: #000;
	border-bottom: 1px solid #aaa;
}

.enter-donation-amount {
	margin: 0;
	padding: 0 0 5px 0;
	font-size: 120%;
}

.donation-amount-text {
	margin: 0;
	padding: 0;
	font-size: 120%;
	text-align: center;
}

.credit-amount-text {
	font-size: 8pt;
	text-transform: uppercase;
	color: #bbb;
	text-align: center;
	letter-spacing: 1px;
}

.donation-amount {
	font-weight: bold;
	color: #000;
}

.credit-amount {
	color: #555;
}

.reset-amount-text {
	margin: 0;
	padding: 0;
	font-size: 8pt;
	text-align: center;
}

.checkout-info-text {
	margin: 0 0 5px 0;
	padding: 0;
}

.remaining-balance {
	color: #000;
}

.exchange-rate {
	font-size: 120%;
	font-weight: bold;
	color: #000;
}

.important {
	font-size: 120%;
	color: #000;
}

.important .server-name {
	font-weight: bold;
}

.generic-form {
	padding: 10px;
	background-color: #fff;
	border: 1px solid #ddd;
	width: auto;
}

.generic-form-div {
	padding: 10px;
	background-color: #fff;
	border: 1px solid #ddd;
	width: auto;
}
.generic-form-table th label {
	display: block;
	padding: 6px;
}

.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: #000;
}

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

.action {
	color: #ddd;
}

.action a, .action span.anchor {
	color: #80a2c8;
	border-bottom: 1px solid #eee;
	cursor: pointer;
}

.block-link {
	display: block;
	padding: 3px;
	color: #80a2c8;
	border-bottom: 1px solid #eee;
}

.button-action {
	padding: 5px 0;
	text-align: left;
}

.woe-table {
	border-spacing: 0;
	border-collapse: collapse;
	background-color: #fff;
	border: 1px solid #ddd;
}

.woe-table th, .woe-table td {
	padding: 5px 10px;
}

.woe-table th {
	font-weight: normal;
	border-bottom: 1px solid #ddd;
}

.woe-table td {
	font-size: 120%;
}

.woe-table .server {
	font-weight: bold;
}

.woe-table .time {
	font-style: italic;
	color: #333;
}

.script {
	width: 98%;
}

.multi-select {
	width: 100%;
}

.jump-to-page {
	margin-top: 8px;
	font-size: 8pt;
	text-align: center;
}

.jump-to-page input {
	padding: 2px;
	font-size: 8pt;
}

.top-ranked td {
	font-weight: bold;
	color: #000;
	background-color: #FFF8DC;
}

.top-ranked a {
	color: #000;
	border-bottom: 1px dotted #666;
}

.empty-row {
	display: none;
}

.item-drop-mvp td {
	color: #000;
	background-color: #F8F8FF;
}

.item-drop-card td {
	color: #000;
	background-color: #F0FFFF;
}

.mvp {
	font-size: xx-small;
	font-weight: bold;
	color: #ff0000;
	vertical-align: top;
}

.monster-mode {
	margin: 0;
	padding: 0;
	list-style: square inside;
}

.monster-mode li {
	padding: 1px;
	border-bottom: 1px dotted #eee;
}

.equipped td {
	background-color: #f1ffff;
}

.job-classes {
	border-spacing: 0;
}

.job-classes td {
	padding-right: 10px;
	border-right: 1px solid #eee;
}

.current-shop-category {
	font-weight: bold;
}

.normalslotted .equipped {
	color: #25292b;
}

.overslotted1 {
	color: #32cd32;
}

.overslotted2 {
	color: #00bfff;
}

.overslotted3 {
	color: #ffa500;
}

.overslotted4 {
	color: #9932cc;
}

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

/* ============================================================
   VaeloriaRO Theme — custom layer for FluxCP
   ============================================================ */
:root{--v-blue:#06233e;--v-blue2:#0b3e68;--v-gold:#d7a24a;--v-gold2:#f3d18a;--v-paper:#fffaf0;--v-ink:#172338;--v-border:#c99a4a}
*{box-sizing:border-box} html{min-height:100%}
body{margin:0;min-height:100vh;font-family:Arial,"Trebuchet MS",sans-serif;font-size:14px;color:var(--v-ink);background:#101d2a url('../img/vaeloria/background.jpg') center top/cover fixed no-repeat}
body:before{content:"";position:fixed;inset:0;background:rgba(5,19,34,.42);z-index:-1}
a{color:#0759a4}.vaeloria-page{width:min(1420px,96%);margin:22px auto;background:rgba(255,250,240,.96);border:2px solid var(--v-gold);box-shadow:0 15px 50px rgba(0,0,0,.55);border-radius:8px;overflow:hidden}
.vaeloria-hero{height:250px;background:url('../img/vaeloria/header.jpg') center/cover no-repeat;position:relative;border-bottom:3px solid var(--v-gold)}
.vaeloria-hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,18,34,.15),rgba(3,18,34,0) 55%,rgba(3,18,34,.18));pointer-events:none}
.brand-link{position:absolute;left:42px;bottom:24px;z-index:1;color:#fff;text-decoration:none;text-shadow:0 3px 8px #000}.brand-link span{display:block;font-family:Georgia,serif;font-size:54px;font-weight:bold;letter-spacing:-2px;color:#ffe1a1}.brand-link small{display:block;letter-spacing:3px;font-weight:bold;color:white;margin-left:8px}
.topnav{display:flex;align-items:stretch;background:linear-gradient(#0a2e4d,#031a2e);border-bottom:3px solid var(--v-gold);min-height:62px}.topnav a{flex:1;display:flex;gap:10px;align-items:center;justify-content:center;padding:18px 10px;color:#fff;text-decoration:none;font-weight:700;text-transform:uppercase;border-right:1px solid rgba(255,255,255,.08);font-size:13px}.topnav a:first-child,.topnav a:hover{background:linear-gradient(#1682c8,#07578e);color:#fff}.topnav a:first-letter{color:var(--v-gold2)}
.site-grid{display:grid;grid-template-columns:250px minmax(0,1fr);gap:18px;padding:18px;background:rgba(255,249,235,.93)}.site-sidebar{min-width:0}.site-main{min-width:0}.side-card,.content-card,.account-bar{background:rgba(255,252,244,.98);border:1px solid #d7b16d;border-radius:7px;box-shadow:0 2px 8px rgba(50,35,15,.12);overflow:hidden}.side-card{margin-bottom:15px;padding-bottom:8px}.side-title{background:linear-gradient(90deg,#061d34,#0d3453);color:#fff;padding:12px 14px;font-weight:bold;border-bottom:2px solid var(--v-gold);letter-spacing:.4px}.side-welcome{text-align:center}.side-welcome .side-title{font-family:Georgia,serif;color:var(--v-gold2);font-size:20px}.side-welcome p{padding:8px 12px;line-height:1.55}.menu-category{padding:10px 14px 5px;color:#93641f;font-size:11px;font-weight:bold;text-transform:uppercase;letter-spacing:.8px}.side-link{display:block;margin:0 8px;padding:9px 11px;border-bottom:1px solid #eadbc0;color:#1d2d40;text-decoration:none;font-weight:600}.side-link:before{content:"◆";font-size:8px;color:#c58d35;margin-right:8px}.side-link:hover{background:linear-gradient(90deg,#e8f5ff,#fff);color:#075b9e;border-radius:4px}.admin-card .side-title{background:linear-gradient(90deg,#42150f,#6c271b)}
.account-bar{display:flex;align-items:center;gap:18px;padding:12px 16px;margin-bottom:15px;border-top:3px solid var(--v-gold)}.account-bar span:nth-child(2){margin-left:auto}.small-button,input[type=submit],input[type=button],button{display:inline-block;background:linear-gradient(#147fc0,#07558c);border:1px solid #043e69!important;border-radius:4px;color:white!important;padding:9px 15px!important;font-weight:bold;text-decoration:none;cursor:pointer;text-shadow:0 1px 1px #00385f}.small-button:hover,input[type=submit]:hover{background:linear-gradient(#1c93db,#09649f)}
.content-card{padding:22px;min-height:560px;border-top:4px solid var(--v-gold)}.content-card h2{font-family:Georgia,serif;color:#0a3b68;font-size:26px;border-bottom:1px solid #ddc89f;padding-bottom:10px;margin-top:0}.content-card h3{color:#173c5c;border-bottom:1px solid #dcc69e}.content-card h4{font-size:18px;color:#0759a4;margin:16px 0 6px}.newsDiv h4{background:linear-gradient(90deg,#f5e7c9,#fffaf0);border-left:4px solid var(--v-gold);padding:10px 12px;margin-top:14px}.newsCont{padding:4px 14px 16px;border-bottom:1px solid #eadcc3}.newsDate{color:#777}.message{border-radius:5px;background:#0b5c91;color:#fff}.notice{border-radius:5px}.generic-form-table,.horizontal-table,.vertical-table{width:100%;border-collapse:collapse;background:#fff}.generic-form-table th,.generic-form-table td,.horizontal-table th,.horizontal-table td,.vertical-table th,.vertical-table td{padding:10px!important;border-bottom:1px solid #eadfc9}.horizontal-table th,.vertical-table th{background:#0a3150!important;color:#fff!important}input[type=text],input[type=password],input[type=email],input[type=file],textarea,select{max-width:100%;padding:9px 10px;border:1px solid #cbb994;border-radius:4px;background:#fff;color:#26384a}.security-code img{border:1px solid #d5bd91;border-radius:4px}.submenu,.pagemenu{margin-bottom:14px}
.vaeloria-footer{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:16px 22px;background:#061d34;color:#d9e7f2;border-top:2px solid var(--v-gold)}.footer-controls{margin-left:auto;display:flex;gap:12px;align-items:center}.footer-controls form{display:none}.vaeloria-footer select{padding:5px}.vaeloria-footer small{width:100%;opacity:.65}
#sidebar,#admin_sidebar{width:100%!important}.site-sidebar #sidebar,.site-sidebar #admin_sidebar{display:none!important}
#content img{max-width:100%;height:auto}.red{color:#a61717}.green{color:#27712e}
@media(max-width:900px){.vaeloria-page{width:100%;margin:0;border-radius:0;border-left:0;border-right:0}.vaeloria-hero{height:180px}.brand-link{left:20px;bottom:18px}.brand-link span{font-size:38px}.brand-link small{font-size:9px;letter-spacing:1.5px}.topnav{overflow-x:auto}.topnav a{min-width:130px}.site-grid{grid-template-columns:1fr}.site-sidebar{order:2}.site-main{order:1}.footer-controls{margin-left:0}.account-bar{flex-wrap:wrap}.account-bar span:nth-child(2){margin-left:0}}
@media(max-width:560px){.vaeloria-hero{height:140px}.brand-link span{font-size:31px}.brand-link small{display:none}.site-grid{padding:8px;gap:8px}.content-card{padding:12px}.topnav a span{display:none}.topnav a{min-width:60px;font-size:22px;padding:13px}.generic-form-table th,.generic-form-table td{display:block;width:100%;text-align:left}}

/* VaeloriaRO v2 — entete propre : l'illustration contient deja le logo. */
.vaeloria-hero{
    height:190px;
    background-size:cover;
    background-position:center top;
}
.vaeloria-hero .brand-link{display:none!important;}
@media(max-width:900px){.vaeloria-hero{height:150px;}}
@media(max-width:560px){.vaeloria-hero{height:110px;}}

/* ============================================================
   VaeloriaRO V3 — décor indépendant + statut global
   ============================================================ */
body{
  background-image:url('../img/vaeloria/background-v4.png')!important;
  background-position:center center!important;
  background-size:cover!important;
  background-attachment:fixed!important;
  background-repeat:no-repeat!important;
}
body:before{
  background:linear-gradient(180deg,rgba(4,16,29,.22),rgba(4,16,29,.58))!important;
}
.server-status-strip{
  width:min(920px,94%);
  min-height:52px;
  margin:14px auto -7px;
  position:relative;
  z-index:5;
  display:flex;
  align-items:stretch;
  justify-content:center;
  overflow:hidden;
  border:2px solid var(--v-gold);
  border-radius:8px;
  background:linear-gradient(180deg,#0b3457,#041a2e);
  box-shadow:0 8px 28px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.06);
  color:#fff;
}
.status-title,.status-service{display:flex;align-items:center;padding:9px 22px;border-right:1px solid rgba(243,209,138,.24)}
.status-title{font-family:Georgia,serif;font-weight:700;color:var(--v-gold2);letter-spacing:.6px;white-space:nowrap}
.status-service{gap:8px;min-width:165px;justify-content:center}
.status-service:last-child{border-right:0}.status-name{font-weight:700;letter-spacing:.4px}
.status-service strong{font-size:12px}.status-dot{width:12px;height:12px;border-radius:50%;display:inline-block;box-shadow:0 0 0 2px rgba(255,255,255,.18),0 0 10px currentColor}
.is-online .status-dot{background:#29d44b;color:#29d44b}.is-online strong{color:#6af081}
.is-offline .status-dot{background:#d64040;color:#d64040}.is-offline strong{color:#ff8b8b}
.vaeloria-page{margin-top:18px}
@media(max-width:760px){.server-status-strip{flex-wrap:wrap;margin-top:7px}.status-title{width:100%;justify-content:center;border-right:0;border-bottom:1px solid rgba(243,209,138,.24)}.status-service{flex:1;min-width:110px;padding:8px}.status-service strong{display:none}}

/* ============================================================
   VaeloriaRO V4
   Identité compacte + décor net
   ============================================================ */

/* Décor plus visible, sans assombrissement excessif */
body:before{
    background:linear-gradient(
        180deg,
        rgba(4,16,29,.06),
        rgba(4,16,29,.20)
    )!important;
}

/* Suppression visuelle de l'ancien grand hero */
.vaeloria-hero{
    display:none!important;
}

/* Nouvelle identité Vaeloria */
.vaeloria-brand{
    position:relative;
    min-height:118px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:18px 20px;
    background:linear-gradient(
        180deg,
        rgba(3,19,34,.78),
        rgba(3,19,34,.48)
    );
    border-bottom:1px solid rgba(214,166,79,.75);
}

.vaeloria-brand .brand-link{
    display:block!important;
    color:#fff;
    text-decoration:none;
    text-shadow:
        0 2px 3px #000,
        0 0 18px rgba(0,0,0,.65);
}

.vaeloria-brand .brand-name{
    font-family:Georgia,"Times New Roman",serif;
    font-size:48px;
    line-height:1;
    font-weight:bold;
    letter-spacing:5px;
    color:#f3d18a;
}

.vaeloria-brand .brand-ro{
    margin-left:6px;
    font-family:Georgia,"Times New Roman",serif;
    font-size:25px;
    color:#fff;
}

.vaeloria-brand small{
    display:block;
    margin-top:9px;
    font-size:11px;
    font-weight:bold;
    letter-spacing:3px;
    color:#fff4d6;
}

/* La page laisse davantage voir le décor */
.vaeloria-page{
    background:rgba(255,250,240,.94);
}

/* Barre serveur légèrement plus intégrée */
.server-status-strip{
    margin-top:14px;
    margin-bottom:-7px;
}

@media(max-width:700px){
    .vaeloria-brand{
        min-height:88px;
        padding:12px;
    }

    .vaeloria-brand .brand-name{
        font-size:32px;
        letter-spacing:3px;
    }

    .vaeloria-brand .brand-ro{
        font-size:18px;
    }

    .vaeloria-brand small{
        font-size:9px;
        letter-spacing:1.5px;
    }
}

/* ============================================================
   VaeloriaRO V4.1 — correction position du logo
   ============================================================ */

.vaeloria-brand{
    position:relative!important;
    width:100%!important;
    min-height:105px!important;
    box-sizing:border-box!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:hidden!important;
}

.vaeloria-brand .brand-link{
    position:relative!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    left:auto!important;

    width:auto!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;

    display:block!important;
    transform:none!important;

    text-align:center!important;
    text-decoration:none!important;
}

.vaeloria-brand .brand-name,
.vaeloria-brand .brand-ro,
.vaeloria-brand .brand-link small{
    position:static!important;
    transform:none!important;
}

@media(max-width:700px){
    .vaeloria-brand{
        min-height:82px!important;
    }
}

/* VaeloriaRO V4.1 - correction position logo */
.vaeloria-brand{
    position:relative!important;
    width:100%!important;
    min-height:105px!important;
    box-sizing:border-box!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:hidden!important;
}

.vaeloria-brand .brand-link{
    position:relative!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    left:auto!important;
    width:auto!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    display:block!important;
    transform:none!important;
    text-align:center!important;
    text-decoration:none!important;
}

.vaeloria-brand .brand-name,
.vaeloria-brand .brand-ro,
.vaeloria-brand .brand-link small{
    position:static!important;
    transform:none!important;
}

@media(max-width:700px){
    .vaeloria-brand{
        min-height:82px!important;
    }
}

/* ============================================================
   VaeloriaRO V4.2 — intégration finale du décor
   ============================================================ */

/* Conteneur légèrement plus étroit pour laisser respirer le décor */
.vaeloria-page{
    width:min(1360px,94%)!important;
    background:rgba(255,250,240,.94)!important;
}

/* En-tête plus compact et plus cohérent avec Vaeloria */
.vaeloria-brand{
    min-height:105px!important;
    padding:12px 20px!important;

    background:
        linear-gradient(
            180deg,
            rgba(5,31,52,.88),
            rgba(5,31,52,.72)
        )!important;

    border-bottom:1px solid #d6a64f!important;
}

/* Logo */
.vaeloria-brand .brand-name{
    font-size:45px!important;
    letter-spacing:6px!important;
    color:#f3d18a!important;
    text-shadow:
        0 2px 2px rgba(0,0,0,.85),
        0 0 12px rgba(214,166,79,.25)!important;
}

.vaeloria-brand .brand-ro{
    font-size:22px!important;
    color:#fff7df!important;
}

.vaeloria-brand small{
    margin-top:6px!important;
    font-size:10px!important;
    letter-spacing:3px!important;
}

/* Zone principale légèrement transparente */
.site-grid{
    background:rgba(255,250,240,.91)!important;
}

/* Cartes : restent très lisibles */
.content-card,
.account-bar{
    background:rgba(255,252,245,.96)!important;
}

/* Barre serveur alignée avec la nouvelle largeur */
.server-status-strip{
    width:min(870px,92%)!important;
}

/* Mobile */
@media(max-width:900px){
    .vaeloria-page{
        width:100%!important;
    }

    .vaeloria-brand{
        min-height:82px!important;
    }

    .vaeloria-brand .brand-name{
        font-size:34px!important;
        letter-spacing:4px!important;
    }
}

/* ============================================================
   VaeloriaRO V4.2 — intégration finale du décor
   ============================================================ */

/* Conteneur légèrement plus étroit pour laisser respirer le décor */
.vaeloria-page{
    width:min(1360px,94%)!important;
    background:rgba(255,250,240,.94)!important;
}

/* En-tête plus compact et plus cohérent avec Vaeloria */
.vaeloria-brand{
    min-height:105px!important;
    padding:12px 20px!important;

    background:
        linear-gradient(
            180deg,
            rgba(5,31,52,.88),
            rgba(5,31,52,.72)
        )!important;

    border-bottom:1px solid #d6a64f!important;
}

/* Logo */
.vaeloria-brand .brand-name{
    font-size:45px!important;
    letter-spacing:6px!important;
    color:#f3d18a!important;
    text-shadow:
        0 2px 2px rgba(0,0,0,.85),
        0 0 12px rgba(214,166,79,.25)!important;
}

.vaeloria-brand .brand-ro{
    font-size:22px!important;
    color:#fff7df!important;
}

.vaeloria-brand small{
    margin-top:6px!important;
    font-size:10px!important;
    letter-spacing:3px!important;
}

/* Zone principale légèrement transparente */
.site-grid{
    background:rgba(255,250,240,.91)!important;
}

/* Cartes : restent très lisibles */
.content-card,
.account-bar{
    background:rgba(255,252,245,.96)!important;
}

/* Barre serveur alignée avec la nouvelle largeur */
.server-status-strip{
    width:min(870px,92%)!important;
}

/* Mobile */
@media(max-width:900px){
    .vaeloria-page{
        width:100%!important;
    }

    .vaeloria-brand{
        min-height:82px!important;
    }

    .vaeloria-brand .brand-name{
        font-size:34px!important;
        letter-spacing:4px!important;
    }
}

/* ============================================================
   VaeloriaRO V4.2 — intégration finale du décor
   ============================================================ */

/* Conteneur légèrement plus étroit pour laisser respirer le décor */
.vaeloria-page{
    width:min(1360px,94%)!important;
    background:rgba(255,250,240,.94)!important;
}

/* En-tête plus compact et plus cohérent avec Vaeloria */
.vaeloria-brand{
    min-height:105px!important;
    padding:12px 20px!important;

    background:
        linear-gradient(
            180deg,
            rgba(5,31,52,.88),
            rgba(5,31,52,.72)
        )!important;

    border-bottom:1px solid #d6a64f!important;
}

/* Logo */
.vaeloria-brand .brand-name{
    font-size:45px!important;
    letter-spacing:6px!important;
    color:#f3d18a!important;
    text-shadow:
        0 2px 2px rgba(0,0,0,.85),
        0 0 12px rgba(214,166,79,.25)!important;
}

.vaeloria-brand .brand-ro{
    font-size:22px!important;
    color:#fff7df!important;
}

.vaeloria-brand small{
    margin-top:6px!important;
    font-size:10px!important;
    letter-spacing:3px!important;
}

/* Zone principale légèrement transparente */
.site-grid{
    background:rgba(255,250,240,.91)!important;
}

/* Cartes : restent très lisibles */
.content-card,
.account-bar{
    background:rgba(255,252,245,.96)!important;
}

/* Barre serveur alignée avec la nouvelle largeur */
.server-status-strip{
    width:min(870px,92%)!important;
}

/* Mobile */
@media(max-width:900px){
    .vaeloria-page{
        width:100%!important;
    }

    .vaeloria-brand{
        min-height:82px!important;
    }

    .vaeloria-brand .brand-name{
        font-size:34px!important;
        letter-spacing:4px!important;
    }
}
/* ============================================================
   VaeloriaRO V4.3 — Header graphique
   ============================================================ */

.vaeloria-brand{
    min-height:0!important;
    height:240px!important;
    padding:0!important;
    overflow:hidden!important;
    position:relative!important;

    background:transparent!important;
    border:0!important;
}

.vaeloria-brand .brand-link{
    position:relative!important;
    inset:auto!important;

    display:flex!important;
    width:100%!important;
    height:100%!important;

    align-items:center!important;
    justify-content:center!important;

    padding:0!important;
    margin:0!important;
}

.vaeloria-logo{
    display:block!important;
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center center!important;
}

/* Les anciens textes du logo ne sont plus utilisés */
.vaeloria-brand .brand-name,
.vaeloria-brand .brand-ro,
.vaeloria-brand small{
    display:none!important;
}

@media(max-width:900px){
    .vaeloria-brand{
        height:170px!important;
    }

    .vaeloria-logo{
        object-fit:cover!important;
    }
}
/* ============================================================
   VaeloriaRO V4.4 — Header plus compact
   ============================================================ */

.vaeloria-brand{
    height:190px!important;
}

.vaeloria-logo{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center 48%!important;
}

/* Navigation légèrement plus fine */
.vaeloria-topnav a{
    min-height:58px!important;
    padding:0 20px!important;
}

/* Mobile */
@media(max-width:900px){
    .vaeloria-brand{
        height:145px!important;
    }
}
/* ============================================================
   VaeloriaRO — Menu Base de données déroulant
   ============================================================ */

.topnav{
    overflow:visible!important;
}

.nav-dropdown{
    position:relative;
    display:flex;
    flex:1;
    z-index:1000;
}

/* Bouton principal */
.topnav .nav-dropdown > .nav-dropdown-toggle{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}

.nav-arrow{
    font-size:9px;
    color:#d6a64f;
    transition:transform .2s ease;
}

/* Menu caché */
.nav-dropdown-menu{
    display:none;
    position:absolute;

    top:100%;
    left:0;

    width:100%;
    min-width:230px;

    background:#082943;

    border:1px solid #d6a64f;
    border-top:2px solid #d6a64f;

    box-shadow:0 10px 25px rgba(0,0,0,.35);

    z-index:9999;
}

/* Affichage au survol */
.nav-dropdown:hover .nav-dropdown-menu{
    display:block;
}

.nav-dropdown:hover .nav-arrow{
    transform:rotate(180deg);
}

/* Liens Monstres / Objets */
.topnav .nav-dropdown-menu a{
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;

    gap:12px;

    width:100%!important;
    min-height:58px!important;

    padding:10px 16px!important;

    color:#fff!important;
    text-decoration:none!important;

    border-bottom:1px solid rgba(214,166,79,.25)!important;

    background:#082943!important;
}

.topnav .nav-dropdown-menu a:last-child{
    border-bottom:0!important;
}

.topnav .nav-dropdown-menu a:hover{
    background:#0e4770!important;
}

/* Icône */
.db-icon{
    width:26px;
    text-align:center;

    color:#f0c66c;

    font-size:18px;
}

/* Titre */
.nav-dropdown-menu strong{
    display:block;

    color:#fff;

    font-size:13px;
    text-transform:uppercase;
}

/* Sous-titre */
.nav-dropdown-menu small{
    display:block;

    margin-top:3px;

    color:#a9c4d8;

    font-size:10px;
    font-weight:normal;
    text-transform:none;
    letter-spacing:0;
}

/* Mobile */
@media(max-width:900px){

    .nav-dropdown{
        width:100%;
    }

    .nav-dropdown-menu{
        min-width:200px;
    }
}
/* ============================================================
   VaeloriaRO V5 — Accueil
   ============================================================ */

.vaeloria-home{
    width:100%;
}

/* ---------- INTRO ---------- */

.home-welcome{
    position:relative;
    text-align:center;
    padding:42px 30px 36px;

    background:
        radial-gradient(
            circle at center top,
            rgba(214,166,79,.13),
            transparent 55%
        );

    border-bottom:1px solid rgba(214,166,79,.35);
}

.home-eyebrow{
    display:block;
    margin-bottom:5px;

    color:#9a7838;

    font-size:10px;
    font-weight:bold;
    letter-spacing:4px;
}

.home-welcome h1{
    margin:0;

    color:#082943;

    font-size:42px;
    line-height:1;
    letter-spacing:5px;

    text-shadow:0 1px 0 #fff;
}

.home-welcome h1 span{
    margin-left:6px;
    color:#c59135;

    font-size:22px;
}

.home-intro{
    max-width:650px;
    margin:18px auto 0;

    color:#526574;

    font-size:14px;
    line-height:1.8;
}

/* ---------- BOUTONS ---------- */

.home-actions{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;

    gap:12px;

    margin-top:25px;
}

.home-btn{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    min-width:170px;
    min-height:42px;

    padding:0 20px;

    border-radius:3px;

    font-size:11px;
    font-weight:bold;

    letter-spacing:1.5px;
    text-transform:uppercase;

    text-decoration:none!important;

    transition:.2s ease;
}

.home-btn-gold{
    color:#082943!important;

    background:
        linear-gradient(
            180deg,
            #f1d38d,
            #c9973e
        );

    border:1px solid #b7832f;
}

.home-btn-blue{
    color:#fff!important;

    background:
        linear-gradient(
            180deg,
            #124b72,
            #082943
        );

    border:1px solid #061f33;
}

.home-btn:hover{
    transform:translateY(-2px);

    box-shadow:
        0 5px 12px rgba(0,0,0,.18);
}

/* ---------- INFORMATIONS SERVEUR ---------- */

.home-server-info{
    display:grid;

    grid-template-columns:
        repeat(4,1fr);

    margin:0;

    background:#082943;

    border-top:1px solid #d6a64f;
    border-bottom:1px solid #d6a64f;
}

.server-info-box{
    position:relative;

    padding:17px 10px;

    text-align:center;

    border-right:
        1px solid rgba(214,166,79,.25);
}

.server-info-box:last-child{
    border-right:0;
}

.server-info-box span{
    display:block;

    margin-bottom:5px;

    color:#a8bdca;

    font-size:9px;

    letter-spacing:2px;
}

.server-info-box strong{
    color:#f0cf83;

    font-size:16px;
    font-weight:600;
}

/* ---------- ACTUALITÉS ---------- */

.home-news{
    padding:30px;
}

.home-section-title{
    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:22px;
}

.home-section-title span{
    flex:1;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #c99b4a
        );
}

.home-section-title span:last-child{
    background:
        linear-gradient(
            90deg,
            #c99b4a,
            transparent
        );
}

.home-section-title h2{
    margin:0!important;

    color:#082943;

    font-size:18px!important;

    letter-spacing:3px;

    text-transform:uppercase;
}

/* ---------- CARTE ACTUALITÉ ---------- */

.vaeloria-news{
    margin-bottom:18px;

    background:#fffdf8;

    border:
        1px solid rgba(177,137,65,.38);

    box-shadow:
        0 3px 10px rgba(24,43,57,.07);
}

.news-header{
    display:flex;

    justify-content:space-between;
    align-items:center;

    gap:15px;

    padding:13px 16px;

    background:
        linear-gradient(
            90deg,
            #082943,
            #124a70
        );

    border-bottom:
        2px solid #c99b4a;
}

.news-header h3{
    margin:0!important;

    color:#fff!important;

    font-size:14px!important;

    letter-spacing:.5px;
}

.news-date{
    color:#e7ca88;

    font-size:10px;

    white-space:nowrap;
}

.news-body{
    padding:18px;

    color:#4e5c65;

    line-height:1.7;
}

.news-more{
    display:block;

    margin-top:12px;

    color:#a87525!important;

    font-size:11px;
    font-weight:bold;

    text-align:right;
}

/* ---------- AUCUNE ACTUALITÉ ---------- */

.home-no-news{
    padding:32px;

    text-align:center;

    background:#fffdf8;

    border:
        1px solid rgba(177,137,65,.35);
}

.home-no-news strong{
    color:#082943;

    font-size:15px;
}

.home-no-news p{
    margin:8px 0 0;

    color:#71808a;
}

/* ---------- MOBILE ---------- */

@media(max-width:900px){

    .home-welcome{
        padding:30px 18px;
    }

    .home-welcome h1{
        font-size:32px;
    }

    .home-server-info{
        grid-template-columns:
            repeat(2,1fr);
    }

    .server-info-box{
        border-bottom:
            1px solid rgba(214,166,79,.25);
    }

    .home-news{
        padding:20px 12px;
    }

    .news-header{
        align-items:flex-start;
        flex-direction:column;
        gap:5px;
    }
}
/* ============================================================
   VaeloriaRO V5.1 — Informations serveur / accès rapide
   ============================================================ */

.server-side-card{
    overflow:hidden;
}

/* Informations serveur */

.side-server-info{
    padding:8px 14px 14px;
}

.side-server-info > div{
    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:8px 2px;

    border-bottom:
        1px solid rgba(177,137,65,.22);
}

.side-server-info > div:last-child{
    border-bottom:0;
}

.side-server-info span{
    color:#6c7a83;

    font-size:10px;
    font-weight:bold;

    text-transform:uppercase;
    letter-spacing:.7px;
}

.side-server-info strong{
    color:#0a3b5c;

    font-size:11px;
}

/* Titre accès rapide */

.side-quick-title{
    padding:9px 14px;

    color:#dcb963;

    background:
        linear-gradient(
            90deg,
            #082943,
            #10496d
        );

    border-top:1px solid #c99b4a;
    border-bottom:1px solid #c99b4a;

    font-size:9px;
    font-weight:bold;

    letter-spacing:2px;
}

/* Liens */

.side-quick-links{
    padding:5px 0;
}

.side-quick-links a{
    display:flex;

    align-items:center;

    gap:9px;

    padding:9px 14px;

    color:#405563!important;

    font-size:11px;
    font-weight:600;

    text-decoration:none!important;

    border-bottom:
        1px solid rgba(177,137,65,.12);

    transition:.15s ease;
}

.side-quick-links a:last-child{
    border-bottom:0;
}

.side-quick-links a:first-letter{
    color:#b68634;
}

.side-quick-links a:hover{
    padding-left:18px;

    color:#9b6c20!important;

    background:
        rgba(214,166,79,.09);
}

.side-quick-links a span{
    flex:1;
}
/* ============================================================
   VaeloriaRO V5.2 — Présentation du serveur
   ============================================================ */

.vaeloria-server-page{
    padding:20px;
}

.server-presentation{
    text-align:center;
    padding:35px 25px 30px;

    background:
        radial-gradient(circle at center top,
        rgba(214,166,79,.15),
        transparent 60%);

    border-bottom:1px solid rgba(201,155,74,.35);
}

.server-kicker{
    display:block;
    color:#a77a30;
    font-size:10px;
    font-weight:bold;
    letter-spacing:4px;
}

.server-presentation h1{
    margin:6px 0 15px;
    color:#082943;
    font-size:38px;
    letter-spacing:5px;
}

.server-presentation h1 span{
    margin-left:6px;
    color:#c59135;
    font-size:20px;
}

.server-lead{
    max-width:650px;
    margin:auto;
    color:#596c78;
    line-height:1.8;
}

/* Caractéristiques */

.server-feature-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);

    margin:20px 0 30px;

    background:#082943;

    border-top:2px solid #d6a64f;
    border-bottom:2px solid #d6a64f;
}

.server-feature{
    padding:18px 12px;
    text-align:center;

    border-right:
        1px solid rgba(214,166,79,.25);
}

.server-feature:last-child{
    border-right:0;
}

.server-feature span{
    display:block;

    color:#9eb7c8;

    font-size:9px;
    letter-spacing:2px;
}

.server-feature strong{
    display:block;

    margin:6px 0;

    color:#f0ca70;
    font-size:17px;
}

.server-feature p{
    margin:0;

    color:#d3dde4;
    font-size:10px;
    line-height:1.5;
}

/* Sections */

.server-section{
    margin:30px 0;
}

.server-description{
    padding:22px;

    background:#fffdf8;

    border:1px solid rgba(177,137,65,.35);
}

.server-description h3{
    margin-top:0;

    color:#082943;
}

.server-description p{
    color:#586a75;
    line-height:1.8;
}

/* Systèmes custom */

.server-custom-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px;
}

.server-custom-card{
    padding:20px;

    background:#fffdf8;

    border:1px solid rgba(177,137,65,.35);

    box-shadow:
        0 3px 10px rgba(24,43,57,.06);
}

.server-custom-card strong{
    color:#0b3b5c;
    font-size:13px;
}

.server-custom-card p{
    margin-bottom:0;

    color:#687985;
    font-size:11px;
    line-height:1.7;
}

/* Actions */

.server-page-actions{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;

    gap:12px;

    margin:35px 0 10px;
}

/* Mobile */

@media(max-width:900px){

    .server-feature-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .server-custom-grid{
        grid-template-columns:1fr;
    }

    .vaeloria-server-page{
        padding:10px;
    }
}

/* =========================================================
   VAELORIA - SERVER PRESENTATION FINAL POLISH
   ========================================================= */

/* ---------- HERO STATS ---------- */

.vaeloria-server-page .server-quick-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    max-width: 720px;
    margin: 26px auto 0;
}

.vaeloria-server-page .server-quick-stats > div {
    padding: 16px 10px 14px;
    border: 1px solid rgba(190, 137, 45, .35);
    background:
        linear-gradient(180deg,
        rgba(255,255,255,.70),
        rgba(248,241,225,.55));
    text-align: center;
    box-shadow: 0 3px 12px rgba(16, 44, 65, .05);
}

.vaeloria-server-page .server-quick-stats strong {
    display: block;
    margin-bottom: 5px;
    color: #0b314d;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 23px;
    line-height: 1;
}

.vaeloria-server-page .server-quick-stats span {
    display: block;
    color: #a46d18;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
}


/* ---------- PVP ROLES ---------- */

.vaeloria-server-page .pvp-role-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 25px 0;
}

.vaeloria-server-page .pvp-role-grid > div {
    min-height: 80px;
    padding: 15px 12px;
    border: 1px solid #e2c99d;
    background: rgba(255,255,255,.52);
    text-align: center;
    font-size: 20px;
}

.vaeloria-server-page .pvp-role-grid strong {
    display: block;
    margin-top: 5px;
    color: #0b314d;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.vaeloria-server-page .pvp-role-grid span {
    display: block;
    margin-top: 4px;
    color: #687784;
    font-size: 12px;
}


/* ---------- QUOTES ---------- */

.vaeloria-server-page .server-quote {
    max-width: 760px;
    margin: 28px auto 5px;
    padding: 17px 25px;
    border-left: 3px solid #c58a2b;
    border-right: 3px solid #c58a2b;
    background: rgba(197,138,43,.055);
    color: #123650;
    text-align: center;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
    font-style: italic;
}


/* ---------- RUNE INTRO ---------- */

.vaeloria-server-page .rune-intro {
    display: flex;
    align-items: center;
    gap: 25px;
    margin: 15px 0 24px;
    padding: 20px 24px;
    border: 1px solid #e2c99d;
    background: rgba(255,255,255,.48);
}

.vaeloria-server-page .rune-big-number {
    min-width: 120px;
    padding-right: 24px;
    border-right: 1px solid #dfc18e;
    text-align: center;
}

.vaeloria-server-page .rune-big-number strong {
    display: block;
    color: #b77818;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 46px;
    line-height: .9;
}

.vaeloria-server-page .rune-big-number span {
    display: block;
    margin-top: 7px;
    color: #0b314d;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
}

.vaeloria-server-page .rune-intro h3 {
    margin: 0 0 8px;
    color: #0b314d;
    font-size: 19px;
    font-weight: 500;
}

.vaeloria-server-page .rune-intro p {
    margin: 0;
}


/* ---------- RUNE PROGRESSION ---------- */

.vaeloria-server-page .rune-progression {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 25px 0;
}

.vaeloria-server-page .rune-progression span {
    padding: 10px 14px;
    border: 1px solid #dfc18e;
    background: rgba(255,255,255,.65);
    color: #153d59;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .8px;
}

.vaeloria-server-page .rune-progression b {
    color: #b57b24;
    font-size: 17px;
}

.vaeloria-server-page .rune-progression .rune-divine {
    border-color: #c38a2f;
    background: rgba(197,138,43,.11);
    color: #a2660d;
}


/* ---------- RUNE FAMILIES ---------- */

.vaeloria-server-page .rune-family-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 25px 0 5px;
}

.vaeloria-server-page .rune-family-grid > div {
    padding: 18px;
    border: 1px solid #e2c99d;
    background: rgba(255,255,255,.5);
}

.vaeloria-server-page .rune-family-grid strong {
    display: block;
    margin-bottom: 8px;
    color: #0b314d;
    font-size: 12px;
    letter-spacing: .7px;
}

.vaeloria-server-page .rune-family-grid p {
    margin: 0;
    color: #667580;
    font-size: 12px;
    line-height: 1.7;
}


/* ---------- WHITESMITH PROCESS ---------- */

.vaeloria-server-page .rune-process {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    margin: 27px 0;
}

.vaeloria-server-page .rune-process > div {
    min-height: 105px;
    padding: 15px 8px;
    border: 1px solid #dfc18e;
    background: rgba(255,255,255,.55);
    text-align: center;
}

.vaeloria-server-page .rune-process > div > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 27px;
    height: 27px;
    margin: 0 auto 9px;
    border: 1px solid #c38a2f;
    border-radius: 50%;
    color: #b2761d;
    font-weight: 700;
}

.vaeloria-server-page .rune-process strong {
    display: block;
    color: #0b314d;
    font-size: 11px;
    letter-spacing: .6px;
}

.vaeloria-server-page .rune-process small {
    display: block;
    margin-top: 6px;
    color: #71808a;
    font-size: 10px;
    line-height: 1.4;
}

.vaeloria-server-page .rune-process > b {
    color: #b47a23;
    font-size: 18px;
}


/* ---------- EXAMPLES ---------- */

.vaeloria-server-page .rune-example-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 10px 0 15px;
}

.vaeloria-server-page .rune-example {
    padding: 20px 18px;
    border: 1px solid #e2c99d;
    background:
        linear-gradient(180deg,
        rgba(255,255,255,.62),
        rgba(249,243,230,.45));
    text-align: center;
}

.vaeloria-server-page .rune-example > span {
    display: block;
    margin-bottom: 10px;
    color: #a56d18;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
}

.vaeloria-server-page .rune-example strong {
    display: block;
    margin-bottom: 8px;
    color: #0b314d;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
}

.vaeloria-server-page .rune-example p {
    margin: 0;
    color: #687681;
    font-size: 12px;
}


/* ---------- FUTURE ---------- */

.vaeloria-server-page .future-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 9px;
    margin: 24px 0;
}

.vaeloria-server-page .future-grid span {
    padding: 8px 13px;
    border: 1px solid #dec394;
    background: rgba(255,255,255,.56);
    color: #17405c;
    font-size: 11px;
    font-weight: 600;
}

.vaeloria-server-page .server-final-quote {
    margin-top: 30px;
    font-size: 20px;
}


/* ---------- SPACING ---------- */

.vaeloria-server-page .server-section {
    margin-top: 42px;
    margin-bottom: 42px;
}

.vaeloria-server-page .server-custom-grid {
    gap: 14px;
}

.vaeloria-server-page .server-custom-card {
    padding: 20px;
}


/* ---------- MOBILE ---------- */

@media (max-width: 800px) {

    .vaeloria-server-page .server-quick-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .vaeloria-server-page .pvp-role-grid,
    .vaeloria-server-page .rune-family-grid,
    .vaeloria-server-page .rune-example-grid {
        grid-template-columns: 1fr;
    }

    .vaeloria-server-page .rune-intro {
        display: block;
        text-align: center;
    }

    .vaeloria-server-page .rune-big-number {
        padding: 0 0 18px;
        margin: 0 0 18px;
        border-right: 0;
        border-bottom: 1px solid #dfc18e;
    }

    .vaeloria-server-page .rune-process {
        grid-template-columns: 1fr;
    }

    .vaeloria-server-page .rune-process > b {
        transform: rotate(90deg);
        text-align: center;
    }
}


/* ============================================================
   VAELORIA - CODEX RUNIQUE / ILLUSTRATIONS
   ============================================================ */

.vaeloria-rune-codex .codex-rune-card {
    position: relative;
    overflow: hidden;
    text-align: center;
}

.vaeloria-rune-codex .rune-art {
    width: 118px;
    height: 118px;
    margin: 2px auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(226, 190, 104, 0.18) 0%,
            rgba(72, 111, 154, 0.08) 48%,
            transparent 72%
        );
}

.vaeloria-rune-codex .rune-art::before {
    content: "";
    position: absolute;
    width: 86px;
    height: 86px;
    border-radius: 50%;
    border: 1px solid rgba(218, 181, 91, 0.28);
    box-shadow:
        0 0 20px rgba(218, 181, 91, 0.10),
        inset 0 0 18px rgba(218, 181, 91, 0.06);
}

.vaeloria-rune-codex .rune-art img {
    position: relative;
    z-index: 2;
    display: block;
    max-width: 96px;
    max-height: 96px;
    width: auto;
    height: auto;

    image-rendering: auto;

    filter:
        drop-shadow(0 3px 3px rgba(0, 0, 0, 0.45))
        drop-shadow(0 0 7px rgba(225, 190, 100, 0.18));

    transition:
        transform .22s ease,
        filter .22s ease;
}

.vaeloria-rune-codex .codex-rune-card:hover .rune-art img {
    transform: translateY(-3px) scale(1.08);

    filter:
        drop-shadow(0 4px 4px rgba(0, 0, 0, 0.50))
        drop-shadow(0 0 11px rgba(231, 195, 105, 0.38));
}

.vaeloria-rune-codex .codex-rune-card h3 {
    margin-top: 2px;
}

.vaeloria-rune-codex .divine-line {
    position: relative;
    border-color: rgba(222, 184, 82, 0.42) !important;
    background:
        linear-gradient(
            90deg,
            rgba(171, 125, 30, 0.08),
            rgba(236, 204, 115, 0.16),
            rgba(171, 125, 30, 0.08)
        ) !important;
}

.vaeloria-rune-codex .divine-line b {
    color: #d7ad49;
}

@media (max-width: 700px) {

    .vaeloria-rune-codex .rune-art {
        width: 100px;
        height: 100px;
    }

    .vaeloria-rune-codex .rune-art img {
        max-width: 82px;
        max-height: 82px;
    }

}

/* ============================================================
   VAELORIA - CODEX RUNIQUE - LAYOUT COMPLET
   ============================================================ */

.vaeloria-rune-codex {
    width: 100%;
}

/* ---------- HERO ---------- */

.rune-codex-hero {
    padding: 34px 38px;
    margin-bottom: 34px;
    text-align: center;

    border: 1px solid rgba(183, 139, 55, 0.35);
    border-radius: 5px;

    background:
        radial-gradient(circle at 50% 0%,
            rgba(197, 153, 63, 0.13),
            transparent 48%),
        linear-gradient(180deg,
            rgba(255,255,255,0.72),
            rgba(244,239,226,0.72));

    box-shadow:
        0 6px 22px rgba(24, 38, 53, 0.08),
        inset 0 1px rgba(255,255,255,0.8);
}

.rune-codex-hero .server-kicker {
    display: block;
    margin-bottom: 8px;

    color: #a5792e;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 4px;
}

.rune-codex-hero h1 {
    margin: 0 0 12px;

    color: #102f4b;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 34px;
    letter-spacing: 2px;
}

.rune-codex-hero h1 span {
    color: #b88632;
}

.rune-codex-hero > p {
    max-width: 720px;
    margin: 0 auto 26px;

    color: #5c5a55;
    font-size: 14px;
    line-height: 1.7;
}

/* ---------- 80 / 16 / 5 / WHITESMITH ---------- */

.codex-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;

    max-width: 760px;
    margin: 0 auto;
}

.codex-summary > div {
    min-height: 76px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(184, 139, 53, 0.28);
    border-radius: 4px;

    background: rgba(255,255,255,0.52);
}

.codex-summary strong {
    display: block;

    color: #b17d28;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 25px;
    line-height: 1;
}

.codex-summary span {
    margin-top: 7px;

    color: #203b53;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.3px;
}

/* ---------- SECTIONS ---------- */

.vaeloria-rune-codex .server-section {
    margin: 38px 0 46px;
}

.vaeloria-rune-codex .home-section-title {
    margin-bottom: 27px;
}

/* ---------- PROGRESSION DES GRADES ---------- */

.codex-grade-path {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    max-width: 850px;
    margin: 0 auto;

    padding: 20px;

    border: 1px solid rgba(181, 138, 57, 0.24);
    border-radius: 5px;

    background: rgba(255,255,255,0.42);
}

.codex-grade-path > div {
    width: 116px;
    min-height: 72px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(44, 74, 99, 0.18);
    border-radius: 4px;

    background:
        linear-gradient(180deg,
            rgba(255,255,255,0.82),
            rgba(235,239,239,0.68));
}

.codex-grade-path > div strong {
    color: #173b59;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 23px;
}

.codex-grade-path > div span {
    margin-top: 4px;
    color: #77716a;
    font-size: 11px;
    text-transform: uppercase;
}

.codex-grade-path > b {
    color: #b48739;
    font-size: 19px;
}

.codex-grade-path .divine {
    border-color: rgba(190, 139, 39, 0.52);

    background:
        radial-gradient(circle,
            rgba(232,198,109,0.28),
            rgba(255,255,255,0.75));
}

.codex-grade-path .divine strong,
.codex-grade-path .divine span {
    color: #aa7723;
}

/* ============================================================
   CARTES DE RUNES
   ============================================================ */

.codex-family-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.codex-family-grid.codex-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vaeloria-rune-codex .codex-rune-card {
    min-width: 0;
    padding: 22px 18px 18px;

    position: relative;
    overflow: hidden;

    text-align: center;

    border: 1px solid rgba(174, 132, 54, 0.31);
    border-radius: 6px;

    background:
        radial-gradient(circle at 50% 8%,
            rgba(191, 153, 75, 0.10),
            transparent 35%),
        linear-gradient(180deg,
            rgba(255,255,255,0.82),
            rgba(244,240,229,0.74));

    box-shadow:
        0 5px 15px rgba(24, 41, 56, 0.08),
        inset 0 1px rgba(255,255,255,0.8);

    transition:
        transform .20s ease,
        box-shadow .20s ease,
        border-color .20s ease;
}

.vaeloria-rune-codex .codex-rune-card:hover {
    transform: translateY(-3px);

    border-color: rgba(181, 132, 38, 0.55);

    box-shadow:
        0 10px 24px rgba(20, 37, 52, 0.13),
        inset 0 1px rgba(255,255,255,0.9);
}

/* ---------- IMAGE ---------- */

.vaeloria-rune-codex .rune-art {
    width: 112px;
    height: 112px;

    margin: 0 auto 14px;

    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;

    border-radius: 50%;

    background:
        radial-gradient(circle,
            rgba(224, 188, 94, 0.22) 0%,
            rgba(58, 98, 133, 0.07) 48%,
            transparent 72%);
}

.vaeloria-rune-codex .rune-art::before {
    content: "";

    position: absolute;

    width: 92px;
    height: 92px;

    border-radius: 50%;

    border: 1px solid rgba(205, 164, 72, 0.22);

    box-shadow:
        0 0 20px rgba(197, 153, 56, 0.12),
        inset 0 0 18px rgba(197, 153, 56, 0.07);
}

.vaeloria-rune-codex .rune-art img {
    display: block;

    position: relative;
    z-index: 2;

    width: 96px;
    height: 96px;
    max-width: 96px;
    max-height: 96px;

    object-fit: contain;

    border: 0 !important;
    background: transparent !important;

    filter:
        drop-shadow(0 3px 3px rgba(0,0,0,0.35))
        drop-shadow(0 0 7px rgba(210,168,70,0.15));

    transition:
        transform .2s ease,
        filter .2s ease;
}

.vaeloria-rune-codex .codex-rune-card:hover .rune-art img {
    transform: scale(1.07);

    filter:
        drop-shadow(0 4px 4px rgba(0,0,0,0.38))
        drop-shadow(0 0 10px rgba(215,171,65,0.30));
}

/* ---------- TITRE DE LA RUNE ---------- */

.vaeloria-rune-codex .codex-rune-card h3 {
    margin: 0;

    padding: 0 0 8px;

    border: 0;

    color: #153c5b;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    font-weight: 700;

    letter-spacing: 1px;
    text-transform: uppercase;
}

.vaeloria-rune-codex .rune-type {
    min-height: 20px;

    margin: 0 0 13px;

    color: #77716a;

    font-size: 12px;
    font-style: italic;
}

/* ---------- CINQ LIGNES DE BONUS ---------- */

.vaeloria-rune-codex .rune-levels {
    display: flex;
    flex-direction: column;
    gap: 5px;

    text-align: left;
}

.vaeloria-rune-codex .rune-levels > span {
    min-height: 30px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;

    padding: 6px 9px;

    border: 1px solid rgba(36, 65, 87, 0.10);
    border-radius: 3px;

    background: rgba(255,255,255,0.52);

    color: #67645f;

    font-size: 11px;
}

.vaeloria-rune-codex .rune-levels > span b {
    color: #233f57;
    font-size: 11px;
    text-align: right;
}

.vaeloria-rune-codex .rune-levels .divine-line {
    margin-top: 3px;

    border-color: rgba(190, 141, 43, 0.40);

    background:
        linear-gradient(
            90deg,
            rgba(189,139,39,0.08),
            rgba(235,203,112,0.20),
            rgba(189,139,39,0.08)
        );

    color: #9c6c1e;
    font-weight: 700;
}

.vaeloria-rune-codex .rune-levels .divine-line b {
    color: #ad771b;
}

/* ============================================================
   WHITESMITH / FUSION
   ============================================================ */

.codex-craft-intro {
    max-width: 760px;

    margin: 0 auto 22px;
    padding: 20px 24px;

    text-align: center;

    border: 1px solid rgba(177, 134, 51, 0.26);
    border-radius: 5px;

    background: rgba(255,255,255,0.46);
}

.codex-craft-intro h3 {
    margin: 0 0 10px;

    color: #163c5b;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
}

.codex-craft-intro p {
    margin: 7px 0;

    color: #66615b;
    line-height: 1.6;
}

.fusion-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;

    margin-top: 18px;
}

.fusion-grid > div {
    padding: 17px 10px;

    text-align: center;

    border: 1px solid rgba(43, 72, 94, 0.17);
    border-radius: 4px;

    background: rgba(255,255,255,0.52);
}

.fusion-grid span,
.fusion-grid strong,
.fusion-grid small {
    display: block;
}

.fusion-grid span {
    margin-bottom: 8px;

    color: #a8792c;
    font-family: Georgia, "Times New Roman", serif;
    font-weight: 700;
}

.fusion-grid strong {
    color: #183c58;
    font-size: 13px;
}

.fusion-grid small {
    margin-top: 7px;
    color: #77716a;
}

.fusion-grid .fusion-divine {
    border-color: rgba(191, 140, 39, 0.48);

    background:
        radial-gradient(circle,
            rgba(227,190,92,0.20),
            rgba(255,255,255,0.55));
}

.codex-note {
    margin-top: 14px;
    text-align: center;
    color: #77716a;
    font-size: 11px;
    font-style: italic;
}

/* ---------- RETRAIT ---------- */

.codex-warning {
    max-width: 760px;

    margin: 0 auto;
    padding: 21px 26px;

    text-align: center;

    border: 1px solid rgba(163, 91, 61, 0.30);
    border-radius: 5px;

    background:
        linear-gradient(
            180deg,
            rgba(255,249,242,0.78),
            rgba(246,235,224,0.65)
        );
}

.codex-warning > strong {
    display: block;

    margin-bottom: 9px;

    color: #9a4d35;

    font-family: Georgia, "Times New Roman", serif;
    letter-spacing: 1px;
}

.codex-warning p {
    margin: 6px 0;
    line-height: 1.55;
}

.codex-warning p strong {
    color: #a0442f;
}

/* ---------- BOUTON BAS ---------- */

.vaeloria-rune-codex .server-page-actions {
    margin-top: 34px;
    text-align: center;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 900px) {

    .codex-family-grid,
    .codex-family-grid.codex-three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fusion-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .codex-grade-path {
        flex-wrap: wrap;
    }
}

@media (max-width: 650px) {

    .rune-codex-hero {
        padding: 25px 15px;
    }

    .rune-codex-hero h1 {
        font-size: 27px;
    }

    .codex-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .codex-family-grid,
    .codex-family-grid.codex-three {
        grid-template-columns: 1fr;
    }

    .fusion-grid {
        grid-template-columns: 1fr;
    }

    .codex-grade-path > b {
        display: none;
    }

    .codex-grade-path > div {
        width: calc(50% - 8px);
    }

}

/* VAELORIA - RUNES PNG TRANSPARENTES */

.vaeloria-rune-codex .rune-art {
    width: 126px;
    height: 126px;
    margin-bottom: 10px;
}

.vaeloria-rune-codex .rune-art::before {
    width: 104px;
    height: 104px;
}

.vaeloria-rune-codex .rune-art img {
    width: 112px;
    height: 112px;
    max-width: 112px;
    max-height: 112px;
    object-fit: contain;

    /* Les PNG n'ont plus besoin du carré blanc du BMP. */
    box-shadow: none !important;
    background: transparent !important;
}

/* Célérité seule : centrée sur la dernière ligne des runes de combat. */
.vaeloria-rune-codex .codex-family-grid:not(.codex-three)
.codex-rune-card:last-child:nth-child(3n + 1) {
    grid-column: 2;
}

@media (max-width: 900px) {
    .vaeloria-rune-codex .codex-family-grid:not(.codex-three)
    .codex-rune-card:last-child:nth-child(3n + 1) {
        grid-column: auto;
    }
}

/* ============================================================
   VAELORIA - CODEX RUNIQUE INTERACTIF
   ============================================================ */

.vaeloria-rune-codex
.rune-levels > span[data-rune-grade] {
    cursor: pointer;

    transition:
        background .18s ease,
        border-color .18s ease,
        box-shadow .18s ease,
        transform .18s ease;
}

.vaeloria-rune-codex
.rune-levels > span[data-rune-grade]:hover {
    transform: translateX(2px);

    border-color: rgba(183, 137, 48, 0.42);

    background:
        linear-gradient(
            90deg,
            rgba(210, 171, 85, 0.08),
            rgba(255,255,255,0.78)
        );

    box-shadow:
        0 2px 7px rgba(28, 45, 60, 0.07);
}

/* Grade actuellement affiché */

.vaeloria-rune-codex
.rune-levels > span.rune-grade-selected {
    border-color: rgba(186, 134, 35, 0.62) !important;

    background:
        linear-gradient(
            90deg,
            rgba(190, 139, 38, 0.14),
            rgba(239, 207, 116, 0.29),
            rgba(190, 139, 38, 0.12)
        ) !important;

    color: #9b6816 !important;

    box-shadow:
        inset 3px 0 0 rgba(184, 129, 26, 0.75),
        0 2px 7px rgba(61, 47, 22, 0.07);
}

.vaeloria-rune-codex
.rune-levels > span.rune-grade-selected b {
    color: #a76e0e !important;
}

/* Petit changement visuel de l'image */

.vaeloria-rune-codex .rune-art img {
    transition:
        opacity .12s ease,
        transform .20s ease,
        filter .20s ease;
}

.vaeloria-rune-codex
.rune-art img.rune-changing {
    opacity: .30;
    transform: scale(.92);
}

/* Accessibilité clavier */

.vaeloria-rune-codex
.rune-levels > span[data-rune-grade]:focus {
    outline: none;

    border-color: rgba(25, 62, 91, 0.55);

    box-shadow:
        0 0 0 2px rgba(25, 62, 91, 0.09);
}

/* ============================================================
   VAELORIA - EMPLACEMENTS RUNIQUES
   ============================================================ */

.rune-slot-intro {
    max-width: 790px;
    margin: 0 auto 22px;
    text-align: center;
}

.rune-slot-kicker {
    display: block;
    margin-bottom: 7px;

    color: #ad7a27;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.5px;
}

.rune-slot-intro h3 {
    margin: 0 0 12px;

    color: #153b58;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 22px;
}

.rune-slot-intro p {
    margin: 7px auto;
    color: #6b665f;
    line-height: 1.6;
}

.rune-slot-intro p strong {
    color: #aa721a;
}

.rune-slot-example {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;

    max-width: 900px;
    margin: 22px auto;
}

/* EXEMPLE CARTE + RUNE */

.rune-equipment-demo {
    padding: 22px;

    border: 1px solid rgba(180,136,52,.32);
    border-radius: 6px;

    background:
        radial-gradient(circle at 50% 25%,
            rgba(212,174,86,.12),
            transparent 45%),
        rgba(255,255,255,.55);

    text-align: center;
}

.equipment-demo-title {
    margin-bottom: 20px;

    color: #173c59;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 17px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.equipment-slots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.equipment-slot {
    width: 115px;
    height: 105px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    border-radius: 5px;
}

.card-slot {
    border: 1px solid rgba(44,76,101,.30);
    background: rgba(225,235,242,.50);
}

.rune-slot {
    border: 1px solid rgba(193,142,39,.42);

    background:
        radial-gradient(circle,
            rgba(236,201,108,.25),
            rgba(255,255,255,.60));
}

.slot-symbol {
    margin-bottom: 5px;
    color: #b37b20;
    font-size: 25px;
}

.equipment-slot strong {
    color: #173c59;
    font-size: 12px;
}

.equipment-slot small {
    margin-top: 5px;
    color: #817b72;
    font-size: 9px;
}

.equipment-plus {
    color: #b47c23;
    font-size: 26px;
    font-family: Georgia, serif;
}

.slot-result {
    margin-top: 18px;
    padding-top: 14px;

    border-top: 1px solid rgba(183,139,56,.22);

    color: #ad761e;
    font-weight: bold;
    font-size: 13px;
}

.slot-result small {
    display: block;
    margin-top: 4px;

    color: #77716a;
    font-weight: normal;
    font-size: 10px;
}

/* RÈGLES */

.rune-slot-rules {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rune-slot-rules > div {
    flex: 1;

    display: flex;
    align-items: center;
    gap: 13px;

    padding: 10px 14px;

    border: 1px solid rgba(37,68,91,.13);
    border-radius: 4px;

    background: rgba(255,255,255,.48);
}

.rune-slot-rules strong {
    min-width: 31px;

    color: #b17b25;

    font-family: Georgia, serif;
    font-size: 17px;
}

.rune-slot-rules span {
    color: #605e59;
    font-size: 11px;
    line-height: 1.4;
}

/* MESSAGE IMPORTANT */

.rune-slot-important {
    max-width: 900px;
    margin: 18px auto 0;
    padding: 14px 20px;

    display: flex;
    align-items: center;
    gap: 18px;

    border: 1px solid rgba(187,137,37,.37);
    border-radius: 5px;

    background:
        linear-gradient(
            90deg,
            rgba(203,153,52,.10),
            rgba(244,218,146,.20),
            rgba(203,153,52,.10)
        );
}

.rune-slot-important > span {
    color: #a86e13;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 1.5px;
}

.rune-slot-important p {
    margin: 0;
    color: #5e5a53;
    font-size: 11px;
    line-height: 1.5;
}

@media (max-width: 750px) {

    .rune-slot-example {
        grid-template-columns: 1fr;
    }

    .rune-slot-important {
        display: block;
        text-align: center;
    }

    .rune-slot-important > span {
        display: block;
        margin-bottom: 7px;
    }

}

/* ============================================================
   VAELORIA - CAPACITE DES EMPLACEMENTS RUNIQUES
   ============================================================ */

.rune-capacity {
    max-width: 900px;
    margin: 28px auto 20px;
}

.rune-capacity-heading {
    margin-bottom: 17px;
    text-align: center;
}

.rune-capacity-heading > span {
    display: block;
    margin-bottom: 6px;

    color: #ae7821;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
}

.rune-capacity-heading h3 {
    margin: 0 0 8px;

    color: #173c59;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 19px;
}

.rune-capacity-heading p {
    max-width: 680px;
    margin: 0 auto;

    color: #716c64;
    font-size: 11px;
    line-height: 1.55;
}

.rune-capacity-table {
    overflow: hidden;

    border: 1px solid rgba(181, 136, 48, .30);
    border-radius: 6px;

    background: rgba(255,255,255,.42);

    box-shadow: 0 6px 20px rgba(34,45,54,.04);
}

.capacity-row {
    min-height: 65px;

    display: grid;
    grid-template-columns: 190px 1fr 220px;
    align-items: center;
    gap: 18px;

    padding: 9px 18px;

    border-bottom: 1px solid rgba(39,69,91,.10);
}

.capacity-row:last-child {
    border-bottom: 0;
}

.capacity-row:hover {
    background: rgba(215,178,92,.06);
}

.capacity-equipment {
    color: #69655e;
    font-size: 11px;
}

.capacity-equipment strong {
    margin-left: 4px;

    color: #173d59;
    font-family: Georgia, serif;
    font-size: 16px;
}

.capacity-slots {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.socket {
    width: 37px;
    height: 37px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    font-style: normal;
    font-weight: bold;
}

.socket.card {
    border: 1px solid rgba(39,73,99,.38);

    background:
        radial-gradient(
            circle,
            rgba(222,234,242,.80),
            rgba(239,244,247,.50)
        );

    color: #1a4968;
}

.socket.rune {
    border: 1px solid rgba(190,136,31,.48);

    background:
        radial-gradient(
            circle,
            rgba(239,205,116,.36),
            rgba(250,242,217,.55)
        );

    color: #b47a17;
    font-size: 19px;

    box-shadow:
        0 0 9px rgba(205,157,56,.10);
}

.capacity-result {
    color: #173c59;
    font-size: 11px;
    text-align: right;
}

.capacity-result strong {
    color: #173c59;
}

.capacity-result small {
    display: block;
    margin-top: 3px;

    color: #9b7440;
    font-size: 9px;
}

.capacity-full {
    background: rgba(35,61,79,.025);
}

.capacity-legend {
    display: flex;
    justify-content: center;
    gap: 28px;

    margin-top: 12px;

    color: #777168;
    font-size: 10px;
}

.capacity-legend span {
    display: flex;
    align-items: center;
    gap: 7px;
}

.capacity-legend i {
    width: 23px;
    height: 23px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    font-style: normal;
    font-weight: bold;
}

.legend-card {
    border: 1px solid rgba(39,73,99,.35);
    color: #1a4968;
    background: rgba(225,235,242,.55);
}

.legend-rune {
    border: 1px solid rgba(190,136,31,.42);
    color: #b47a17;
    background: rgba(239,205,116,.22);
}

@media (max-width: 750px) {

    .capacity-row {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 14px;

        text-align: center;
    }

    .capacity-result {
        text-align: center;
    }

    .capacity-legend {
        flex-direction: column;
        align-items: center;
        gap: 7px;
    }

}

/* ============================================================
   VAELORIA - RECETTES RUNIQUES DETAILLEES
   ============================================================ */

.rune-crafting-section {
    max-width: 100%;
}

.craft-kicker {
    display: block;
    margin-bottom: 6px;

    color: #aa7724;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2.2px;
}

.craft-help {
    color: #a47325 !important;
    font-size: 11px;
    font-style: italic;
}

.recipe-category {
    max-width: 920px;
    margin: 30px auto;
}

.recipe-category-title {
    margin-bottom: 14px;
    text-align: center;
}

.recipe-category-title > span {
    display: block;
    margin-bottom: 5px;

    color: #b07b26;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}

.recipe-category-title h3 {
    margin: 0 0 6px;

    color: #173d5a;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 19px;
}

.recipe-category-title p {
    margin: 0;
    color: #777168;
    font-size: 11px;
}


/* ---------- MENU ---------- */

.rune-recipe {
    margin-bottom: 9px;

    overflow: hidden;

    border: 1px solid rgba(42,72,94,.18);
    border-radius: 5px;

    background: rgba(255,255,255,.52);

    transition:
        border-color .18s ease,
        box-shadow .18s ease;
}

.rune-recipe[open] {
    border-color: rgba(181,133,39,.42);

    box-shadow:
        0 7px 18px rgba(28,43,54,.07);
}

.rune-recipe summary {
    min-height: 70px;

    display: grid;
    grid-template-columns: 130px 1fr 145px 110px;
    align-items: center;
    gap: 15px;

    padding: 10px 17px;

    cursor: pointer;
    list-style: none;

    transition: background .18s ease;
}

.rune-recipe summary::-webkit-details-marker {
    display: none;
}

.rune-recipe summary:hover {
    background: rgba(209,169,82,.07);
}

.recipe-grade strong {
    display: block;

    color: #173e5b;
    font-family: Georgia, serif;
    font-size: 18px;
}

.recipe-grade span {
    display: block;
    margin-top: 3px;

    color: #898279;
    font-size: 9px;
    text-transform: uppercase;
}

.recipe-summary-text strong {
    display: block;

    color: #55534e;
    font-size: 11px;
}

.recipe-summary-text span {
    display: block;
    margin-top: 3px;

    color: #8a847b;
    font-size: 9px;
}

.recipe-price {
    color: #ae7924;

    font-family: Georgia, serif;
    font-size: 15px;
    font-weight: bold;

    text-align: right;
}

.recipe-price small {
    display: block;

    color: #8a8175;
    font-family: Arial, sans-serif;
    font-size: 8px;
    font-weight: normal;
    text-transform: uppercase;
}

.recipe-open {
    color: #98712f;
    font-size: 9px;
    font-weight: bold;
    text-align: right;
    text-transform: uppercase;
}

.recipe-open b {
    display: inline-block;

    margin-left: 5px;

    color: #b67d20;
    font-size: 16px;

    transition: transform .2s ease;
}

.rune-recipe[open] .recipe-open b {
    transform: rotate(180deg);
}


/* ---------- CONTENU ---------- */

.recipe-content {
    padding: 18px;

    border-top: 1px solid rgba(42,72,94,.12);

    background:
        linear-gradient(
            180deg,
            rgba(246,243,234,.60),
            rgba(255,255,255,.48)
        );
}

.materials-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 7px;
}

.materials-grid > div {
    min-height: 52px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 7px;

    border: 1px solid rgba(38,70,94,.12);
    border-radius: 4px;

    background: rgba(255,255,255,.60);

    text-align: center;
}

.materials-grid strong {
    color: #b07921;
    font-family: Georgia, serif;
    font-size: 14px;
}

.materials-grid span {
    margin-top: 3px;

    color: #5f5d58;
    font-size: 9px;
}

.materials-grid .material-special {
    border-color: rgba(180,131,36,.35);

    background:
        radial-gradient(
            circle,
            rgba(232,197,108,.18),
            rgba(255,255,255,.62)
        );
}

.materials-grid .material-emperium {
    border-color: rgba(176,122,32,.52);

    background:
        radial-gradient(
            circle,
            rgba(237,197,92,.30),
            rgba(255,249,226,.72)
        );

    box-shadow:
        inset 0 0 13px rgba(205,157,51,.08);
}

.recipe-zeny {
    margin-top: 13px;
    padding: 10px 13px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    border-top: 1px solid rgba(183,138,50,.22);

    color: #777168;
    font-size: 10px;
}

.recipe-zeny strong {
    color: #a76e15;
    font-family: Georgia, serif;
    font-size: 15px;
}


/* ---------- FORGE I ---------- */

.forge-family-note {
    margin-bottom: 14px;
    padding: 10px 13px;

    border-left: 3px solid rgba(183,133,35,.65);

    background: rgba(224,193,119,.09);

    color: #67625b;
    font-size: 10px;
    line-height: 1.5;
}

.forge-family-note strong {
    color: #a36e18;
}

.forge-category-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 8px;
}

.forge-category-card {
    min-height: 125px;
    padding: 13px;

    display: flex;
    flex-direction: column;

    border: 1px solid rgba(41,72,95,.13);
    border-radius: 4px;

    background: rgba(255,255,255,.58);
}

.forge-category-card > span {
    color: #a87a31;
    font-size: 8px;
    letter-spacing: 1.3px;
}

.forge-category-card h4 {
    margin: 5px 0;

    color: #173d59;
    font-family: Georgia, serif;
    font-size: 14px;
}

.forge-category-card p {
    flex: 1;

    margin: 0 0 9px;

    color: #777169;
    font-size: 9px;
    line-height: 1.5;
}

.forge-category-card > strong {
    color: #a76e17;
    font-size: 11px;
}

.recipe-footnote {
    margin-top: 12px;

    color: #817b72;
    font-size: 9px;
    font-style: italic;
    text-align: center;
}


/* ---------- DIVINE ---------- */

.divine-recipe {
    border-color: rgba(183,131,28,.40);
}

.divine-recipe summary {
    background:
        linear-gradient(
            90deg,
            rgba(185,132,30,.06),
            rgba(237,205,116,.16),
            rgba(185,132,30,.06)
        );
}

.divine-recipe .recipe-grade strong,
.divine-recipe .recipe-price {
    color: #ad7519;
}

.divine-recipe-title {
    margin-bottom: 15px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;

    color: #b17a21;

    text-align: center;
}

.divine-recipe-title > span {
    font-size: 18px;
}

.divine-recipe-title strong,
.divine-recipe-title small {
    display: block;
}

.divine-recipe-title strong {
    font-family: Georgia, serif;
    letter-spacing: 1.5px;
}

.divine-recipe-title small {
    margin-top: 3px;

    color: #8c8274;
    font-size: 8px;
}

.divine-cost {
    background: rgba(219,179,82,.08);
}


/* ---------- NOTE ---------- */

.recipe-bottom-note {
    max-width: 760px;

    margin: 20px auto 0;
    padding: 11px 15px;

    border: 1px solid rgba(181,134,42,.24);
    border-radius: 4px;

    background: rgba(255,255,255,.45);

    color: #716b63;
    font-size: 10px;
    text-align: center;
}

.recipe-bottom-note strong {
    color: #a76e17;
}


/* ---------- MOBILE ---------- */

@media (max-width: 800px) {

    .rune-recipe summary {
        grid-template-columns: 90px 1fr 100px;
    }

    .recipe-open {
        grid-column: 1 / -1;
        text-align: center;
    }

    .materials-grid,
    .forge-category-grid {
        grid-template-columns: repeat(2,1fr);
    }

}

@media (max-width: 520px) {

    .rune-recipe summary {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .recipe-price,
    .recipe-open {
        text-align: center;
    }

    .materials-grid,
    .forge-category-grid {
        grid-template-columns: 1fr 1fr;
    }

}

/* ============================================================
   VAELORIA - FORGE GRADE I - 16 RECETTES
   ============================================================ */

.grade1-recipes {
    margin-top: 18px;
}

.grade1-group {
    margin: 0 0 22px;
}

.grade1-group-title {
    margin: 0 0 8px;
    padding: 0 2px 7px;

    color: #a87422;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;

    border-bottom: 1px solid rgba(168,116,34,.22);
}

.grade1-family-recipe {
    margin: 7px 0;
    overflow: hidden;

    background: rgba(255,255,255,.42);
    border: 1px solid rgba(157,119,54,.18);
    border-radius: 5px;

    transition: border-color .2s ease,
                box-shadow .2s ease,
                background .2s ease;
}

.grade1-family-recipe:hover {
    border-color: rgba(174,126,42,.40);
}

.grade1-family-recipe[open] {
    background: rgba(255,255,255,.64);
    border-color: rgba(174,126,42,.38);
    box-shadow: 0 6px 18px rgba(47,38,25,.06);
}

.grade1-family-recipe > summary {
    display: grid;
    grid-template-columns: minmax(180px,1fr) 145px 105px;
    align-items: center;
    gap: 16px;

    min-height: 64px;
    padding: 10px 16px;

    cursor: pointer;
    list-style: none;
}

.grade1-family-recipe > summary::-webkit-details-marker {
    display: none;
}

.grade1-family-name {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.grade1-family-name strong {
    color: #24344c;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 15px;
    font-weight: 700;
}

.grade1-family-name span {
    color: #9c762f;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.grade1-family-price {
    color: #26364e;
    font-size: 12px;
    font-weight: 800;
    text-align: right;
    white-space: nowrap;
}

.grade1-family-open {
    color: #9b7128;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-align: right;
    white-space: nowrap;
}

.grade1-family-open b {
    display: inline-block;
    margin-left: 6px;
    font-size: 14px;
    transition: transform .2s ease;
}

.grade1-family-recipe[open] .grade1-family-open b {
    transform: rotate(180deg);
}

.grade1-family-content {
    padding: 14px 16px 16px;

    border-top: 1px solid rgba(157,119,54,.14);
    background: rgba(250,247,239,.52);
}

.grade1-family-content .materials-grid {
    margin: 0 0 12px;
}

.grade1-family-content .materials-grid span {
    display: inline-flex;
    align-items: center;

    margin: 3px;
    padding: 6px 9px;

    color: #48556a;
    font-size: 10px;
    font-weight: 700;

    background: rgba(255,255,255,.72);
    border: 1px solid rgba(157,119,54,.18);
    border-radius: 4px;
}

.grade1-family-content .recipe-zeny {
    margin-top: 9px;
}

@media (max-width: 760px) {

    .grade1-family-recipe > summary {
        grid-template-columns: 1fr auto;
        gap: 6px 12px;
        padding: 12px;
    }

    .grade1-family-price {
        text-align: right;
    }

    .grade1-family-open {
        grid-column: 1 / -1;
        text-align: left;
    }

    .grade1-family-content {
        padding: 12px;
    }
}