body {
    background-color: black !important;
    background-position: center top !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat;
    background-size: cover !important;
    color: #F0B62A !important;
}
ol,
ul,
nav {
    list-style: none;
}
a {
    text-decoration: none;
}
header {
    height: 380px;
    overflow: hidden;
    border-radius: 14px;
    margin-top: 4px;
}

header .container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.container {
    width: 100%;
    height: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.navbar {
    max-width: 1200px;
    margin: 20px auto 0;
    padding: 15px 0;
    --bs-navbar-nav-link-padding-x: 1rem;
    margin-bottom: 10px;
    text-transform: uppercase;
    position: sticky;
    top: 0;
    z-index: 1030;
}

.navbar-nav {
    --bs-nav-link-padding-x: 100px;
}

.container,
.navbar > .container-fluid {
    --bs-gutter-x: 0 !important;
    --bs-gutter-y: 0 !important;
}

.navbar > .container-fluid {
    margin: 0 30px;
}

.nav-item {
    margin-right: 10px;
}

.navbar-nav {
    --bs-nav-link-color: #ddd;
}

.nav-link {
    color: #F0B62A;
    text-shadow: 0px 0px 5px #000;
}

.nav-link:focus,.nav-link:hover {
    color: #EDE0C4;
}

.nav-link:before {
    font-family: bootstrap-icons !important;
    content: "\F667";
    vertical-align: bottom;
    font-size: 16px;
    position: relative;
    left: -4px;
}

.bg-glass {
    background: transparent;
    border: none;
    border-radius: 14px;
}

.bg-glass::before {
    content: none;
}

.dropdown-menu {
    font-size: 14px !important;
    --bs-dropdown-link-color: #F0B62A !important;
    --bs-dropdown-link-hover-color: #EDE0C4 !important;
    --bs-dropdown-bg: rgba(23,16,8, .92);
    --bs-dropdown-border-color: rgba(190,130,0, .40);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    --bs-dropdown-link-hover-bg: rgba(255,255,255, .05);
    --bs-dropdown-link-active-bg: rgba(255,255,255, .05);
}

.flex {
    display: flex;
    align-items: center;
}

main {
    display: flex;
    flex-direction: column;
    background-color: rgba(23,16,8, .72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: none;
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 4px 14px rgba(0,0,0,.35);
}
.content-grid {
    display: grid;
    grid-template-columns: 350px 1fr;
    column-gap: 12px;
}

.grid-cell {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.grid-sidebar > .card:last-child,
.grid-mainbar > .card {
    flex: 1;
}

.grid-mainbar .card-body,
.grid-sidebar > .card:last-child .card-body {
    display: flex;
    flex-direction: column;
}

.fullbar {
    width: 100%;
}

.text-white {
    color: #bbb !important;
}
.text-offline {
    color: rgb(255, 0, 0);
    text-transform: uppercase;
}
.text-online {
    color: rgb(0, 255, 0);
    text-transform: uppercase;
}
.text-accretia {
    color: #FFD700 !important;
    font-weight: 550
}
.text-donation {
	text-align: center;
	font-weight: 550
}
.text-bellato {
    color: #7effff !important;
    font-weight: 550
}

.text-cora {
    color: #ff4dff !important;
    font-weight: 550
}
.text-green {
    color: rgb(0, 255, 0);
}
.text-red {
    color: rgb(255, 50, 50);
}
.text-soft {
    color: #ffffff88;
}
.text-up {
    text-transform: uppercase;
}
.card {
    border: 0px dashed rgba(255, 255, 255, .15);
    background-color: transparent;
}

.card-body {
    background-color: rgba(20,8,0, .60);
    --bs-card-color: #ddd;
}

.card-body-trans {
    flex: 1 1 auto;
    padding: 5px 0;
    color: var(--bs-card-color);
    --bs-card-color: #ddd;
    background-color: transparent !important;
}

.card-header {
    color: #F0B62A;
    background-color: rgba(25,8,0, .70) !important;
}

table {
    width: 100%;
}

table.rank tr td {
    line-height: 2.5;
    padding: 5px 0;
    border-bottom: 1px dashed rgba(255,255,255, 0.2);
}

table.rank tr td .img-cl {
    margin-right: 10px;
}

table.rank tr td .nick {
    color: #ccc;
    line-height: 1.12;
}

table.rank tr td .guild-bottom {
    line-height: 1.12;
    font-size: 15px;
}

table.rank tr:last-child td {
    border-bottom: 0;
}

.rank tr td .guildemblem { line-height: 1.0; }
.rank tr td .guildemblem img{ width:auto; height: 39px !important; display:inline-block; margin: 0 !important;}
.rank tr td .guildemblem .guildmark {width:auto;height:40px!important;left:15px;display:inline-block;position:absolute;mask-repeat:no-repeat; }
.rank tr td .guildname { margin-left: 7px; vertical-align: middle; line-height: 1.0;}
.rank tr td .guildname span { font-size: 15px; line-height: 1.0; }

.card-header {
    font-weight: 600;
    text-align: left;
    padding: 15px 20px 13px 20px !important;
    background-color: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(255,255,255, 0.2) !important;
}

.sliderBg {
    display: flex;
    background-color: rgba(0, 0, 0, 0.4);
    width: 100%;
    height: 370px;
    margin-bottom: 12px;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border: 10px solid rgba(25, 8, 0, .40);
    border-radius: 4px;
    box-sizing: border-box;
}

#carouselSlideFade {
    width: 100%;
    height: 350px;
    box-sizing: border-box;
}

#carouselSlideFade .carousel-item img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    object-position: center;
}

.card-header .badge {
    text-transform: uppercase;
}

.card-header .show-right .date {
    font-size: 14px;
    margin-bottom: 5px !important;
    color: #888;
}

.card-header .show-right .shared {
    font-size: 14px;
}

.card-header .show-right .shared a:hover {
    filter: brightness(1.25);
    transition: 0.3s;
}

.card-header .show-right .shared .bi-facebook {
    color: #4862A3;
    margin-left: 5px;
}

.card-header .show-right .shared .bi-whatsapp {
    color: #04BE3C;
}

.card-header i,
.card-header .show-right,
.card-header input,
.card-header span {
    float: right;
    font-weight: normal;
}

.card-header .form-control {
    padding: 0.175rem 0.75rem;
}

.card-header span {
    margin-right: 15px;
    font-size: 16px;
    vertical-align: bottom !important;
}

.card-header span:first-child {
    margin-right: 0;
}

.news-block-image {
    display: flex;
    padding-bottom: 10px;
    border-bottom: 1px dashed rgba(255,255,255, 0.2);
}

.news-block-image img {
    margin-right: 20px;
}

.news-block-image .field {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-around
}

.news-block-image .field h4 {
    color: #ddd;
    padding-bottom: 10px;
    border-bottom: 1px dashed #ddd;
}

.news-block-image .field h4 .btn-share {
    float:right;
}

.news-block-image .field h4 .btn-share a {
    padding: 0 2px;
}

.news-block-image .field h4 .bi-facebook {
    color: #4862A3;
}

.news-block-image .field h4 .bi-whatsapp {
    color: #04BE3C;
}

.news-block-image .field h4 a:hover .bi {
    filter: brightness(1.25);
    transition: 0.3s
}

.news-block-image .field h4 i {
    font-size: 15px;
    vertical-align: middle;
}

.news-block-image .field h4 .badge {
    --bs-badge-padding-x: 0.45em;
    --bs-badge-padding-y: 0.15em;
    --bs-badge-font-weight: 600;
    margin-right: 5px;
    text-transform: uppercase;
}

.news-block-image .field .footer {
    width: 502px;
}

.news-block-image .field .footer2 {
    width: 850px;
}

.news-block-image .field div span{
    float: right;
    color: #888;
    padding-top: 5px;
}

.btn-outline-light {
    --bs-btn-color: #000;
    --bs-btn-bg: #F0B62A;
    --bs-btn-border-color: #F0B62A;
    --bs-btn-hover-color: #F0B62A;
    --bs-btn-hover-bg: transparent;
    --bs-btn-hover-border-color: #F0B62A;
    --bs-btn-active-color: #F0B62A;
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: #F0B62A;
}

/* .btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {
    background-color: #F0B62A;
    border-color: #F0B62A;
} */

.news-block-image div a {
    padding-left: 20px;
    padding-right: 20px;
}

.news-block {
    display: block;
    font-size: 18px;
    vertical-align: middle;
    padding: 10px 0;
    border-bottom: 1px dashed rgba(255,255,255, 0.2);
    text-decoration: none;
    color: inherit;
}

.news-block:last-child {
    border-bottom: 0;
}

.news-block .date {
    color: #888;
}

.news-block .strip {
    margin-right: 10px;
    margin-left: 10px;
}

.news-block .title {
    font-size: 20px;
    vertical-align: middle;
    margin-left: 7px;
}

.news-block i {
    vertical-align: middle;
    margin-right: 7px;
}

.news-block .badge {
    --bs-badge-padding-y: 0.25em;
    font-size: 15px;
    text-transform: uppercase;
}

.news-block .time {
    float: right;
    color: #888;
    font-size: 16px;
    padding-top: 5px;
}

.news-block .time i {
    vertical-align: top;
}

.news-block:hover {
    background: rgba(255,255,255, 0.05);
    transition: 0.3s
}

.text-bg-discord {
    font-size: 20px;
    color: #F3D48A !important;
    background-color: rgba(20, 8, 0, .55) !important;
    border: 1px solid rgba(216, 167, 78, .30);
}

.text-bg-news {
    background-color: rgba(179, 38, 30, .92) !important; /* #B3261E merah panji */
}

.text-bg-line {
    font-size: 20px;
    color: #F3D48A !important;
    background-color: rgba(20, 8, 0, .55) !important;
    border: 1px solid rgba(216, 167, 78, .30);
}

.text-bg-facebook {
    font-size: 20px;
    color: #F3D48A !important;
    background-color: rgba(20, 8, 0, .55) !important;
    border: 1px solid rgba(216, 167, 78, .30);
}

.text-bg-instagram {
    font-size: 20px;
    color: #F3D48A !important;
    background-color: rgba(20, 8, 0, .55) !important;
    border: 1px solid rgba(216, 167, 78, .30);
}

.text-bg-youtube {
    font-size: 20px;
    color: #F3D48A !important;
    background-color: rgba(20, 8, 0, .55) !important;
    border: 1px solid rgba(216, 167, 78, .30);
}

.text-bg-tiktok {
    font-size: 20px;
    color: #F3D48A !important;
    background-color: rgba(20, 8, 0, .55) !important;
    border: 1px solid rgba(216, 167, 78, .30);
}

footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: rgba(23,16,8, .72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: none;
    border-radius: 14px;
    margin: 10px 0 100px 0;
    padding: 8px 30px;
    box-shadow: 0 4px 14px rgba(0,0,0,.35);
}

footer .badge {
    margin-right: 10px;
    transition: transform .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

footer .badge:hover {
    transform: translateY(-2px);
    background-color: rgba(216, 167, 78, .18) !important;
    border-color: rgba(216, 167, 78, .55);
    box-shadow: 0 0 12px rgba(216, 167, 78, .3);
}

footer p {
    margin-bottom: 5px !important;
}

footer a {
    margin-bottom: 6px !important;
}

footer img {
    width: 80px;
}

footer .small {
    font-size: 14px;
    color: #aaa;
}

footer .logo {
    margin-left: 0;
    margin-bottom: 6px;
    vertical-align: middle;
}
.odView {
    display: none;
}
.odView.show {
    display: block;
}
#newsRes {
    font-size: 18px;
    text-align: center;
    padding: 20px 0;
}
div.pagination {
    justify-content: center;
    padding: 20px 0;
    margin: 3px;
    text-transform: uppercase;
    font-size: 14px;
}
div.pagination a {
    padding: 5px 8px;
    margin: 2px;
    border: 1px solid #7f7e81;
    zoom: 100%;
    text-decoration: none; /* no underline */
    color: #b4b3b8;
    
}
div.pagination a:hover, div.pagination a:active {
    background-color: rgba(255,255,255,0.1);
    border: 1px solid #dfdee3;
    color: #dfdee3;
}
div.pagination span.page_current {
    background-color: rgba(255,255,255,0.1);
    padding: 5px 8px;
    margin: 2px;
    border: 1px solid #dfdee3;
    color: #dfdee3;
}
  div.pagination span.page_disabled {
    display: none;
    padding: 2px 5px 2px 5px;
    margin: 2px;
    border: 1px solid #444;
    color: #444;
}
div.pagination .page_current {
    background-color: rgba(255,255,255,0.1);
    padding: 5px 8px;
    margin: 2px;
    border: 1px solid #dfdee3;
    color: #dfdee3;
}
div.pagination .page_disabled {
    display: none;
}
.tbRules {
    font-size: 15.5px;
    width: 100%;
    border-collapse: collapse;
}
.tbRules tr td {
    padding: 5px 5px;
    vertical-align: middle;
}
.tbRules tr:nth-child(odd) td {
    border-bottom: 3px solid #ff0039;
}
.tbRules tr:nth-child(even) td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.tbRules tr:nth-child(even) td:nth-child(2) {
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.tbRate {
    text-align: left;
    font-size: 15.5px;
    width: 100%;
    border-collapse: collapse;
}
.tbRate tr th {
    font-weight: normal;
    padding: 5px 5px;
    vertical-align: middle;
    border-bottom: 3px solid #ff0039;
    text-align: center;
    font-size: 18px;
}
.tbRate tr:last-child td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.tbRate tr td {
    padding: 10px 10px;
    vertical-align: middle;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.tbRate.bordered tr td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.tbRate.stripped tr:nth-child(even) td {
    background-color: rgba(255, 255, 255, 0.05);
}
.tbRate.withJudul tr td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.tbRate.withJudul tr:first-child td {
    text-align: center;
    border-bottom: 3px solid rgba(255, 255, 255, 0.2);
    font-size: 17px;
}
.tbRate tr td:last-child {
    border-right: 0;
}
.tbBordered {
    text-align: left;
    font-size: 15.5px;
    width: 100%;
    border-collapse: collapse;
}
.tbBordered tr th {
    font-weight: normal;
    padding: 5px 5px;
    vertical-align: middle;
    border-bottom: 3px solid #F0B62A;
    font-size: 18px;
}
.tbBordered tr td {
    padding: 10px 10px;
    vertical-align: middle;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.tbBordered tr td:last-child {
    border-right: 0;
}
.tbBordered.withJudul tr td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.tbBordered.withJudul tr:first-child td {
    text-align: center;
    border-bottom: 3px solid rgba(255, 255, 255, 0.2);
    font-size: 17px;
}
.tbStripped {
    font-size: 15.5px;
    width: 100%;
    border-collapse: collapse;
}
.tbStripped tr th {
    font-weight: normal;
    padding: 5px 5px;
    vertical-align: middle;
    border-bottom: 3px solid #ff0039;
    font-size: 18px;
}
.tbStripped tr:nth-child(even) td {
    background-color: rgba(255, 255, 255, 0.05);
}
.tbStripped tr td {
    padding: 10px 10px;
    vertical-align: middle;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.tbStripped tr:last-child td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.tbStripped tr td:last-child {
    border-right: 0;
}
.tbFullBordered {
    font-size: 15.5px;
    width: 100%;
    border-collapse: collapse;
}
.tbFullBordered tr th {
    font-weight: normal;
    padding: 5px 5px;
    vertical-align: middle;
    border-bottom: 3px solid #ff0039;
    font-size: 18px;
}
.tbFullBordered tr td {
    padding: 10px 10px;
    vertical-align: middle;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
ul.cst1 {
    padding-left: 0 !important;
}
ul.cst1 li {
    padding: 5px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}
ul.cst1 li:last-child {
    border-bottom: 0px;
}
ul.cst2 {
    padding-left: 0 !important;
}
ul.cst2 li::before{
    font-family: bootstrap-icons !important;
    content: "\F231";
    font-size: 12px;
    vertical-align: text-bottom;
    margin-right: 5px;
}
ul.cst2 li:last-child {
    border-bottom: 0px;
}
.pbBlock {
    display: flex;
}
  
.pbBlock ul {
    padding-left: 0 !important;
}
  
.pbMapList {
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(255,255,255,.1);
    background: none;
}
  
.pbMapItem {
    cursor: pointer;
    background: none !important;
    border: none;
    color: #dfdee3;
    padding: 10px 20px !important;
    width: 100%;
    text-align: right;
    transition: 0.2s ease all;
}
  
.pbMapItem.active {
    cursor: auto;
    background: rgba(255,255,255,.1) !important;
    color: #dfdee3;
}
  
.pbMapContent {
    display: none;
    width: 80%;
    transition: 0.3s ease all;
}
  
.pbMapContent.active {
    display: block;
    transition: 0.3s ease all;
}
  
.pbTableContentList tr {
    border-bottom: 1px solid rgba(255,255,255,.1) !important;
}
  
.pbTableContentList tr td {
    padding: 10px 20px 10px 20px;
    vertical-align: middle;
}
  
.pbTableContentList .monster {
    font-size: 18px;
}

.page-wrapper {
    border: none;
    height: 200px;
    margin: 0;
    padding: 0;
    width: auto;
}

.discord-join-text {
    font-family: "Source Sans Pro";
    color: #000 ;
    font-size: 14px;
    float: right;
    background-color: #F0B62A;
    transition: 0.2s;
    padding: 3px 14px;
    border: 1px solid rgba(255,255,255, 0.1);
}
.discord-join-text:hover {
    color: #F0B62A;
    border: 1px solid #F0B62A;
    background-color: transparent;
}

table.discord-widget {
    margin-top: -4px;
    width: 100%;
}

table.discord-widget tr td {
    font-size: 14px !important;
    color: #fff;
    padding: 5px 0;
    border-bottom: 1px dashed rgba(255,255,255, 0.2);
}

table.discord-widget tr:last-child td {
    border-bottom: 0;
}

table.discord-widget .discord-avatar  {
    width: 35px;
    margin-right: 10px
}

table.discord-widget .discord-online  {
    padding-right: 10px;
    float: right;
    color: green;
}

table.discord-widget .discord-busy  {
    padding-right: 10px;
    float: right;
    color: red;
}

table.discord-widget .discord-idle  {
    padding-right: 10px;
    float: right;
    color: yellow;
}

.discord-footer {
    font-size: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    margin-top: 10px;
    padding-top: 15px;
}
.guild-marquee {
    overflow: hidden;
    width: 100%;
    padding: 8px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.guild-marquee-track {
    display: flex;
    width: max-content;
    gap: 16px;
    animation: guild-scroll 180s linear infinite;
}

.guild-marquee:hover .guild-marquee-track {
    animation-play-state: paused;
}

@keyframes guild-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.guild-list-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    flex: 0 0 auto;
    width: 210px;
    min-height: 220px;
    padding: 12px;
    background-color: rgba(20, 8, 0, .60);
    border: 1px solid rgba(190, 130, 0, .40);
    border-radius: 6px;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.guild-list-item:hover {
    transform: translateY(-5px);
    border-color: rgba(190, 130, 0, .70);
    box-shadow: 0 0 22px rgba(216,167,78,.32), 0 14px 28px rgba(0,0,0,.4);
}

.guild-item-top,
.guild-item-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.guild-member-count {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #F0B62A;
    font-weight: 600;
    font-size: 13px;
    background-color: rgba(0, 0, 0, .30);
    padding: 3px 7px;
    border-radius: 4px;
    flex-shrink: 0;
}

.guild-name-text {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 14px;
    color: #F0B62A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.guild-logo-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.guild-logo-img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    padding: 8px;
}

.guild-leader-text {
    font-weight: 600;
    font-size: 14px;
    color: #ddd;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.guild-race-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, .30);
    padding: 4px;
    flex-shrink: 0;
}

.grid-mainbar > .row.g-0 {
    flex: 1;
}

.grid-mainbar .row.g-0 .card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.grid-mainbar .row.g-0 .card-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.killer-table-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.killer-table-scroll::-webkit-scrollbar {
    width: 6px;
}

.killer-table-scroll::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

.killer-table-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(190, 130, 0, .60);
    border-radius: 3px;
}

.box-shape {
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    padding: 8px 18px !important;
    margin: 0 3px;
}

.nav-link-box {
    background-color: rgba(20, 8, 0, .60);
    border: 1px solid rgba(190, 130, 0, .50);
    padding: 8px 18px !important;
    margin: 0 3px;
    clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
    box-shadow: inset 0 2px 0 rgba(240, 182, 42, .22);
    transition: background-color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

button.nav-link-box {
    font-family: inherit;
    font-size: inherit;
    text-transform: inherit;
    cursor: pointer;
}

button.nav-link-box::before {
    content: none;
}

.nav-link-box:hover,
.nav-link-box:focus {
    background-color: rgba(190, 130, 0, .25);
    border-color: #F0B62A;
    transform: translateY(-2px);
    box-shadow: inset 0 2px 0 #FFD700, 0 3px 8px rgba(240, 182, 42, .2);
}

.box-shape {
    box-shadow: inset 0 2px 0 rgba(240, 182, 42, .22);
    transition: background-color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.box-shape:hover,
.box-shape:focus {
    transform: translateY(-2px);
    box-shadow: inset 0 2px 0 #FFD700, 0 3px 8px rgba(240, 182, 42, .2);
}

.nav-link-box.dropdown-toggle::after {
    margin-left: 6px;
}

@media (min-width: 992px) {
    .navbar .dropdown:hover > .dropdown-menu {
        display: block;
        margin-top: 0;
    }
}

/* ===================== Rich-content info sections (Server Rate, dll) ===================== */
.rf-section {
    background: linear-gradient(180deg, rgba(20,8,0,.55), rgba(20,8,0,.55));
    border: 1px solid rgba(190,130,0,.28);
    border-radius: 16px;
    padding: 32px;
    margin-bottom: 26px;
    box-shadow: 0 0 24px rgba(0,0,0,.35), inset 0 0 25px rgba(190,130,0,.03);
}

.rf-section-header {
    text-align: center;
    margin-bottom: 26px;
}

.rf-section-title {
    font-size: 28px;
    letter-spacing: 3px;
    color: #F0B62A;
    text-shadow: 0 0 10px rgba(240,182,42,.30);
    margin: 0 0 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.rf-section-divider {
    width: 130px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #F0B62A, transparent);
    margin: 0 auto 16px;
}

.rf-section-desc {
    color: #ddd;
    max-width: 680px;
    margin: 0 auto;
    line-height: 1.7;
    font-size: 14px;
}

.rf-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

.rf-card {
    flex: 1 1 200px;
    background: linear-gradient(180deg, rgba(190,130,0,.09), rgba(190,130,0,.02));
    border: 1px solid rgba(190,130,0,.25);
    border-radius: 14px;
    padding: 22px 16px;
    text-align: center;
}

.rf-card-icon {
    font-size: 24px;
    color: #F0B62A;
    margin-bottom: 8px;
}

.rf-card-label {
    font-size: 12px;
    letter-spacing: 2px;
    color: #AAA;
    text-transform: uppercase;
}

.rf-card-value {
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    margin-top: 6px;
}

.rf-card-note {
    font-size: 13px;
    color: #F0B62A;
    margin-top: 6px;
}

.rf-card-pill {
    display: inline-block;
    margin-top: 10px;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 11px;
    letter-spacing: 1px;
    background: rgba(190,130,0,.15);
    color: #F0B62A;
}

.rf-card img.rf-coin-img {
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(190,130,0,.30);
    margin-bottom: 10px;
}

.rf-card.accent-green {
    border-color: rgba(90,220,130,.30);
    background: linear-gradient(180deg, rgba(90,220,130,.10), rgba(90,220,130,.02));
}
.rf-card.accent-green .rf-card-value,
.rf-card.accent-green .rf-card-label,
.rf-card.accent-green .rf-card-icon,
.rf-card.accent-green .rf-card-pill { color: #7CE8A0; }
.rf-card.accent-green .rf-card-pill { background: rgba(90,220,130,.15); }

.rf-card.accent-red {
    border-color: rgba(230,90,90,.30);
    background: linear-gradient(180deg, rgba(230,90,90,.10), rgba(230,90,90,.02));
}
.rf-card.accent-red .rf-card-value,
.rf-card.accent-red .rf-card-label,
.rf-card.accent-red .rf-card-icon,
.rf-card.accent-red .rf-card-pill { color: #F08E8E; }
.rf-card.accent-red .rf-card-pill { background: rgba(230,90,90,.15); }

.rf-banner {
    background: linear-gradient(90deg, rgba(190,130,0,.14), rgba(190,130,0,.03));
    border: 1px solid rgba(190,130,0,.25);
    border-radius: 14px;
    padding: 20px 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
}

.rf-banner-title {
    font-size: 16px;
    font-weight: 700;
    color: #F0B62A;
    letter-spacing: .5px;
}

.rf-banner-desc {
    color: #ddd;
    font-size: 13px;
    margin-top: 4px;
}

.rf-banner-stats {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
}

.rf-banner-stats .stat {
    text-align: center;
}

.rf-banner-stats .stat .num {
    font-size: 20px;
    font-weight: 700;
    color: #F0B62A;
}

.rf-banner-stats .stat .lbl {
    font-size: 11px;
    color: #AAA;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.rf-banner.accent-green { border-color: rgba(90,220,130,.28); background: linear-gradient(90deg, rgba(90,220,130,.12), rgba(90,220,130,.03)); }
.rf-banner.accent-green .rf-banner-title { color: #7CE8A0; }
.rf-banner.accent-green .rf-banner-stats .num { color: #7CE8A0; }

.rf-note {
    background: rgba(190,130,0,.06);
    border: 1px solid rgba(190,130,0,.18);
    border-radius: 12px;
    padding: 14px 20px;
    text-align: center;
    color: #ccc;
    font-size: 13px;
    margin-top: 16px;
}

.rf-inline-table {
    width: 100%;
    border-collapse: collapse;
}

.rf-inline-table td {
    padding: 9px 4px;
    border-bottom: 1px dashed rgba(255,255,255,.10);
    color: #ddd;
    font-size: 14px;
}

.rf-inline-table td:last-child {
    text-align: right;
    color: #F0B62A;
    font-weight: 700;
}

.rf-inline-table tr:last-child td { border-bottom: none; }

.rf-subcard-title {
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: #F0B62A;
    margin-bottom: 14px;
}

@media (max-width: 900px) {
    .rf-card { flex: 1 1 45%; }
}

/* ===================== RF Nusantara — General Information (rfn-*) ===================== */


.rfn-info{
  --rfn-bg: rgba(21,8,9,.50);
  --rfn-card: rgba(42,16,16,.26);
  --rfn-card-strong: rgba(48,18,18,.38);
  --rfn-border: rgba(216,167,78,.18);
  --rfn-border-strong: rgba(216,167,78,.35);
  --rfn-gold: #D9A94E;
  --rfn-gold-bright: #F3D48A;
  --rfn-ink: #F1E4CC;
  --rfn-muted: #B9A98C;
  --rfn-emerald: #59C596;
  --rfn-crimson: #E27272;
  font-family:"Source Sans Pro", sans-serif;
  color: var(--rfn-ink);
  position: relative;
}
.rfn-info *{ box-sizing: border-box; }

/* subtle ornamental texture, purely geometric (no external art) */
.rfn-section{
  position: relative;
  background:
    radial-gradient(circle at 15% 20%, rgba(216,167,78,.05) 0 3px, transparent 4px),
    radial-gradient(circle at 65% 70%, rgba(216,167,78,.05) 0 3px, transparent 4px),
    radial-gradient(ellipse at top, rgba(216,167,78,.07), transparent 55%),
    var(--rfn-bg);
  background-size: 46px 46px, 46px 46px, 100% 100%, 100% 100%;
  border: 1px solid var(--rfn-border);
  border-radius: 18px;
  padding: 30px 26px;
  margin-bottom: 18px;
  overflow: hidden;
  animation: rfn-reveal .7s ease both;
}
.rfn-section:nth-of-type(1){ animation-delay: .05s; }
.rfn-section:nth-of-type(2){ animation-delay: .12s; }
.rfn-section:nth-of-type(3){ animation-delay: .19s; }
.rfn-section:nth-of-type(4){ animation-delay: .26s; }
.rfn-section:nth-of-type(5){ animation-delay: .33s; }
.rfn-section:nth-of-type(6){ animation-delay: .40s; }
.rfn-section:nth-of-type(n+7){ animation-delay: .45s; }
@keyframes rfn-reveal{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .rfn-section{ animation: none; }
}

/* corner seal marks, echo the gem motif at the frame's corners */
.rfn-section::before, .rfn-section::after{
  content:'';
  position:absolute;
  width:26px; height:26px;
  border-top:1px solid var(--rfn-border-strong);
  border-left:1px solid var(--rfn-border-strong);
  top:10px; left:10px;
  opacity:.8;
}
.rfn-section::after{
  left:auto; top:auto; right:10px; bottom:10px;
  border-top:none; border-left:none;
  border-bottom:1px solid var(--rfn-border-strong);
  border-right:1px solid var(--rfn-border-strong);
}

.rfn-header{ text-align:center; margin-bottom: 26px; }
.rfn-eyebrow{
  font-size:11px; letter-spacing:4px; color: var(--rfn-gold);
  text-transform:uppercase; opacity:.85;
}
.rfn-title{
  font-family:"Source Sans Pro", sans-serif;
  font-weight:700;
  font-size:28px;
  letter-spacing:3px;
  margin: 6px 0 0;
  background: linear-gradient(180deg, var(--rfn-gold-bright), var(--rfn-gold));
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent;
}
.rfn-divider{
  display:flex; align-items:center; justify-content:center; gap:12px;
  width:220px; margin:16px auto 18px;
}
.rfn-divider::before, .rfn-divider::after{
  content:''; flex:1; height:1px;
  background: linear-gradient(90deg, transparent, var(--rfn-gold), transparent);
}
.rfn-gem{
  width:9px; height:9px; flex-shrink:0;
  background: linear-gradient(135deg, var(--rfn-gold-bright), var(--rfn-gold));
  transform: rotate(45deg);
  border-radius:2px;
  box-shadow: 0 0 10px rgba(216,167,78,.55);
}
.rfn-subtitle{
  color: var(--rfn-muted);
  max-width: 620px;
  margin: 0 auto;
  line-height:1.8;
  font-size:14.5px;
}

.rfn-grid{ display:grid; gap:16px; }
.rfn-grid-2{ grid-template-columns: repeat(2, 1fr); }
.rfn-grid-3{ grid-template-columns: repeat(3, 1fr); }
.rfn-grid-4{ grid-template-columns: repeat(4, 1fr); }
.rfn-grid-6{ grid-template-columns: repeat(6, 1fr); }
@media (max-width: 780px){
  .rfn-grid-3, .rfn-grid-4, .rfn-grid-6{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px){
  .rfn-grid-2, .rfn-grid-3, .rfn-grid-4, .rfn-grid-6{ grid-template-columns: repeat(2, 1fr); }
}

.rfn-card{
  position:relative;
  background: var(--rfn-card);
  border:1px solid var(--rfn-border);
  border-radius:14px;
  padding:20px 14px;
  text-align:center;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.rfn-card::before{
  content:''; position:absolute; top:0; left:12px; right:12px; height:1px;
  background: linear-gradient(90deg, transparent, rgba(243,212,138,.55), transparent);
}
.rfn-card:hover{
  transform: translateY(-5px);
  border-color: var(--rfn-border-strong);
  box-shadow: 0 0 22px rgba(216,167,78,.32), 0 14px 28px rgba(0,0,0,.4);
}
.rfn-card--featured{
  background: linear-gradient(180deg, rgba(216,167,78,.10), rgba(216,167,78,.03));
  border-color: var(--rfn-border-strong);
}

.rfn-label{
  font-size:11.5px; letter-spacing:2px; color: var(--rfn-muted);
  text-transform:uppercase;
}
.rfn-value{
  font-family:"Source Sans Pro", sans-serif; font-weight:600;
  font-size:24px; color: var(--rfn-ink); margin-top:8px;
}
.rfn-value--lg{ font-size:32px; }
.rfn-value--gold{
  color: var(--rfn-gold-bright);
  text-shadow: 0 0 14px rgba(243,212,138,.25);
}
.rfn-sub-tag{
  margin-top:8px; font-size:13px; color: var(--rfn-gold);
}
.rfn-note{ margin-top:6px; font-size:12px; color: var(--rfn-muted); }

.rfn-badge{
  display:inline-block; margin-top:10px; padding:5px 14px;
  border-radius:30px; font-size:11px; letter-spacing:1px;
  background: rgba(216,167,78,.08); color: var(--rfn-gold);
  transition: box-shadow .25s ease, background .25s ease;
}
.rfn-badge:hover{
  background: rgba(216,167,78,.16);
  box-shadow: 0 0 12px rgba(216,167,78,.35);
}
.rfn-card--win .rfn-value{ color: var(--rfn-emerald); }
.rfn-card--win{ border-color: rgba(89,197,150,.25); background: linear-gradient(180deg, rgba(89,197,150,.09), rgba(89,197,150,.02)); }
.rfn-card--win .rfn-badge{ background: rgba(89,197,150,.10); color: var(--rfn-emerald); }
.rfn-card--lose .rfn-value{ color: var(--rfn-crimson); }
.rfn-card--lose{ border-color: rgba(226,114,114,.25); background: linear-gradient(180deg, rgba(226,114,114,.09), rgba(226,114,114,.02)); }
.rfn-card--lose .rfn-badge{ background: rgba(226,114,114,.10); color: var(--rfn-crimson); }

.rfn-banner{
  background: linear-gradient(90deg, rgba(216,167,78,.10), rgba(216,167,78,.02));
  border:1px solid rgba(216,167,78,.2);
  border-radius:14px;
  padding:20px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  flex-wrap: wrap;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  position: relative;
  overflow: hidden;
}
.rfn-banner::before{
  content:''; position:absolute; top:0; left:12px; right:12px; height:1px;
  background: linear-gradient(90deg, transparent, rgba(243,212,138,.55), transparent);
}
.rfn-banner:hover{
  transform: translateY(-4px);
  border-color: rgba(216,167,78,.4);
  box-shadow: 0 0 20px rgba(216,167,78,.30), 0 10px 22px rgba(0,0,0,.35);
}
.rfn-banner--emerald{
  background: linear-gradient(90deg, rgba(89,197,150,.10), rgba(89,197,150,.02));
  border-color: rgba(89,197,150,.22);
}
.rfn-banner--crimson{
  background: rgba(226,114,114,.06);
  border-color: rgba(226,114,114,.16);
  justify-content:center; text-align:center; flex-direction:column;
}
.rfn-banner-title{ font-size:18px; font-weight:600; color: var(--rfn-gold); }
.rfn-banner--emerald .rfn-banner-title{ color: var(--rfn-emerald); }
.rfn-banner--crimson .rfn-banner-title{ color: var(--rfn-crimson); font-size:16px; letter-spacing:1px; }
.rfn-banner-desc{ margin-top:6px; color: var(--rfn-muted); font-size:13.5px; }
.rfn-banner-stat{ text-align:right; }
.rfn-banner--crimson .rfn-banner-stat{ text-align:center; margin-top:6px; }
.rfn-banner-stat b{ font-family:"Source Sans Pro", sans-serif; font-size:20px; color: var(--rfn-gold-bright); display:block; }
.rfn-banner--crimson .rfn-banner-stat b{ font-size:30px; }
.rfn-banner-stat span{ color: var(--rfn-gold); font-size:13px; }

.rfn-info-strip{
  margin-top:18px;
  background: rgba(216,167,78,.04);
  border:1px solid rgba(216,167,78,.1);
  border-radius:12px;
  padding:14px 18px;
  text-align:center;
  color: var(--rfn-muted);
  font-size:13.5px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  position: relative;
  overflow: hidden;
}
.rfn-info-strip::before{
  content:''; position:absolute; top:0; left:12px; right:12px; height:1px;
  background: linear-gradient(90deg, transparent, rgba(243,212,138,.55), transparent);
}
.rfn-info-strip:hover{
  transform: translateY(-3px);
  border-color: rgba(216,167,78,.25);
  box-shadow: 0 0 16px rgba(216,167,78,.22);
}

.rfn-coin-frame{
  width:56px; height:56px; margin:0 auto 12px;
  border-radius:50%;
  border:1px solid rgba(216,167,78,.3);
  background: radial-gradient(circle, rgba(243,212,138,.14), transparent 70%);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.rfn-coin-frame img{ width:100%; height:100%; object-fit:cover; }
.rfn-coin-name{ font-weight:600; color: var(--rfn-gold-bright); font-size:15px; }
.rfn-coin-price{ font-family:"Source Sans Pro", sans-serif; font-weight:600; font-size:22px; margin-top:8px; }
.rfn-coin-unit{ color: var(--rfn-muted); font-size:12px; margin-top:2px; }

.rfn-ledger{
  background: var(--rfn-card);
  border:1px solid var(--rfn-border);
  border-radius:14px;
  padding:22px;
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.rfn-ledger::before{
  content:''; position:absolute; top:0; left:12px; right:12px; height:1px;
  background: linear-gradient(90deg, transparent, rgba(243,212,138,.55), transparent);
}
.rfn-ledger:hover{
  transform: translateY(-4px);
  border-color: var(--rfn-border-strong);
  box-shadow: 0 0 20px rgba(216,167,78,.30), 0 10px 22px rgba(0,0,0,.35);
}
.rfn-ledger-title{
  text-align:center; font-family:"Source Sans Pro", sans-serif; font-weight:600;
  color: var(--rfn-gold-bright); font-size:18px; letter-spacing:1px;
  margin-bottom:14px;
}
.rfn-ledger table{ width:100%; border-collapse:collapse; }
.rfn-ledger td{
  padding:9px 0; font-size:13.5px; color: var(--rfn-muted);
  border-bottom: 1px dashed rgba(216,167,78,.15);
}
.rfn-ledger tr:last-child td{ border-bottom:none; }
.rfn-ledger td:last-child{ text-align:right; color: var(--rfn-ink); font-weight:600; }

.rfn-reward-card{
  background: linear-gradient(180deg, rgba(216,167,78,.07), rgba(216,167,78,.02));
  border:1px solid rgba(216,167,78,.16);
  border-radius:16px;
  padding:18px 12px;
  text-align:center;
  min-height:190px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.rfn-reward-card::before{
  content:''; position:absolute; top:0; left:12px; right:12px; height:1px;
  background: linear-gradient(90deg, transparent, rgba(243,212,138,.55), transparent);
}
.rfn-reward-card:hover{
  transform: translateY(-5px);
  border-color: rgba(216,167,78,.4);
  box-shadow: 0 0 22px rgba(216,167,78,.32), 0 14px 28px rgba(0,0,0,.4);
}
.rfn-reward-card img{ width:56px; height:56px; object-fit:contain; margin-bottom:10px; }
.rfn-reward-name{ font-weight:600; color: var(--rfn-gold-bright); font-size:14px; }
.rfn-reward-days{ margin-top:8px; font-size:12px; color: var(--rfn-muted); }

/* ===================== RF Nusantara — Feature list panels (rfn-feature-*) ===================== */
.rfn-feature-panel{
  background: linear-gradient(180deg, rgba(89,197,150,.05), rgba(89,197,150,.01));
  border:1px solid rgba(89,197,150,.15);
  border-radius:16px;
  padding:24px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  position: relative;
  overflow: hidden;
}
.rfn-feature-panel::before{
  content:''; position:absolute; top:0; left:12px; right:12px; height:1px;
  background: linear-gradient(90deg, transparent, rgba(243,212,138,.55), transparent);
}
.rfn-feature-panel:hover{
  transform: translateY(-4px);
  border-color: rgba(89,197,150,.35);
  box-shadow: 0 0 20px rgba(89,197,150,.25), 0 10px 22px rgba(0,0,0,.35);
}
.rfn-feature-panel--lose:hover{
  border-color: rgba(226,114,114,.35);
  box-shadow: 0 0 20px rgba(226,114,114,.25), 0 10px 22px rgba(0,0,0,.35);
}
.rfn-feature-panel--lose{
  background: linear-gradient(180deg, rgba(226,114,114,.05), rgba(226,114,114,.01));
  border-color: rgba(226,114,114,.15);
}
.rfn-feature-pill-wrap{ text-align:center; margin-bottom:18px; }
.rfn-feature-pill{
  display:inline-block;
  padding:9px 22px;
  border-radius:50px;
  font-weight:600;
  letter-spacing:1px;
  font-size:12.5px;
  background: rgba(89,197,150,.10);
  border:1px solid rgba(89,197,150,.28);
  color: var(--rfn-emerald);
  transition: box-shadow .25s ease, transform .25s ease;
}
.rfn-feature-pill:hover{ transform: translateY(-2px); box-shadow: 0 0 14px rgba(89,197,150,.4); }
.rfn-feature-pill--lose:hover{ box-shadow: 0 0 14px rgba(226,114,114,.4); }
.rfn-feature-pill--lose{
  background: rgba(226,114,114,.10);
  border-color: rgba(226,114,114,.28);
  color: var(--rfn-crimson);
}
.rfn-feature-list{
  display:grid;
  grid-template-columns: repeat(2,1fr);
  gap: 4px 28px;
}
@media (max-width:560px){ .rfn-feature-list{ grid-template-columns: 1fr; } }
.rfn-feature-item{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13.5px;
  color: var(--rfn-ink);
  padding:9px 0;
  border-bottom: 1px dashed rgba(216,167,78,.10);
}
.rfn-feature-list .rfn-feature-item:nth-last-child(1),
.rfn-feature-list .rfn-feature-item:nth-last-child(2){ border-bottom:none; }
.rfn-feature-icon{ width:16px; height:16px; flex-shrink:0; }

/* ===================== RF Nusantara — Compact skill cards (rfn-skill-*) ===================== */
.rfn-skill-card{
  background: linear-gradient(180deg, rgba(216,167,78,.06), rgba(216,167,78,.015));
  border:1px solid rgba(216,167,78,.16);
  border-radius:14px;
  padding:16px 14px;
  text-align:center;
  overflow:hidden;
}
.rfn-skill-icon{ width:52px; height:52px; object-fit:contain; margin-bottom:8px; }
.rfn-skill-title{
  font-family:"Source Sans Pro", sans-serif; font-weight:600; font-size:15px;
  color: var(--rfn-gold-bright); letter-spacing:.5px;
  margin:-16px -14px 12px -14px;
  padding:10px 14px 8px;
  background: rgba(216,167,78,.08);
  border-bottom:1px solid rgba(216,167,78,.16);
}
.rfn-skill-desc{ font-size:11.5px; color: var(--rfn-muted); margin-top:4px; line-height:1.4; }
.rfn-skill-value{
  font-family:"Source Sans Pro", sans-serif; font-weight:600; font-size:22px;
  color: var(--rfn-gold-bright); margin-top:8px;
}
.rfn-skill-sub{ font-size:10.5px; color: var(--rfn-muted); margin-top:2px; text-transform:uppercase; letter-spacing:1px; }

/* ===================== RF Nusantara — NPC shop database (rfn-npc-*) ===================== */
.rfn-zone-title{
  background: linear-gradient(180deg, rgba(216,167,78,.08), rgba(216,167,78,.02));
  border:1px solid rgba(216,167,78,.20);
  border-radius:10px;
  padding:10px 16px;
  text-align:center;
  font-family:"Source Sans Pro", sans-serif;
  font-weight:600;
  font-size:17px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  letter-spacing:2px;
  color: var(--rfn-gold-bright);
  margin: 24px 0 14px;
  position: relative;
  overflow: hidden;
}
.rfn-zone-title::before{
  content:''; position:absolute; top:0; left:12px; right:12px; height:1px;
  background: linear-gradient(90deg, transparent, rgba(243,212,138,.55), transparent);
}
.rfn-zone-title:first-of-type{ margin-top:2px; }
.rfn-zone-title:hover{
  transform: translateY(-3px);
  border-color: rgba(216,167,78,.4);
  box-shadow: 0 0 16px rgba(216,167,78,.28);
}

.rfn-npc-card{
  background: var(--rfn-card);
  border:1px solid var(--rfn-border);
  border-radius:12px;
  padding:14px;
  overflow:hidden;
}
.rfn-npc-name{
  font-size:13.5px; font-weight:600; color: var(--rfn-ink);
  margin:-14px -14px 10px -14px;
  padding:10px 14px 8px;
  background: rgba(216,167,78,.08);
  border-bottom:1px solid var(--rfn-border);
}
.rfn-npc-sub{ font-size:10.5px; color: var(--rfn-muted); margin-bottom:9px; }
.rfn-npc-tag{
  display:inline-block; padding:4px 12px; border-radius:20px;
  font-size:10px; font-weight:700; letter-spacing:.5px;
  transition: box-shadow .25s ease;
}
.rfn-npc-tag--currency:hover{ box-shadow: 0 0 10px rgba(89,197,150,.5); }
.rfn-npc-tag--gold:hover{ box-shadow: 0 0 10px rgba(216,167,78,.5); }
.rfn-npc-tag--pvp:hover{ box-shadow: 0 0 10px rgba(226,114,114,.5); }
.rfn-npc-tag--quest:hover{ box-shadow: 0 0 10px rgba(80,160,220,.5); }
.rfn-npc-tag--currency{ background: rgba(89,197,150,.20); color:#8FE8B8; }
.rfn-npc-tag--gold{ background: rgba(216,167,78,.22); color: var(--rfn-gold-bright); }
.rfn-npc-tag--pvp{ background: rgba(226,114,114,.22); color:#F4A9A9; }
.rfn-npc-tag--quest{ background: rgba(80,160,220,.22); color:#9BD0F0; }

/* ===================== RF Nusantara — 7-Day login reward (rfn-day-*) ===================== */
.rfn-day-card{
  background: var(--rfn-card);
  border:1px solid var(--rfn-border);
  border-radius:12px;
  overflow:hidden;
}
.rfn-day-card--special{
  border-color: rgba(216,167,78,.40);
  background: linear-gradient(180deg, rgba(216,167,78,.10), rgba(216,167,78,.03));
}
.rfn-day-head{
  background: rgba(120,20,20,.30);
  padding: 9px;
  text-align:center;
  font-family:"Source Sans Pro", sans-serif;
  font-weight:600;
  font-size:13.5px;
  color:#fff;
  letter-spacing:1px;
}
.rfn-day-card--special .rfn-day-head{ color: var(--rfn-gold-bright); }
.rfn-day-body{ padding:14px 10px; text-align:center; }
.rfn-day-reward-label{ font-size:10px; font-weight:700; letter-spacing:1px; margin-bottom:6px; }
.rfn-day-reward-label--free{ color:#7EC8E3; }
.rfn-day-reward-label--vip{ color: var(--rfn-gold-bright); }
.rfn-day-icon{ width:44px; height:44px; }
.rfn-day-name{ font-size:11px; color: var(--rfn-ink); margin-top:5px; }
.rfn-day-qty{ font-size:10.5px; color: var(--rfn-gold); margin-top:3px; }
.rfn-day-divider{ height:1px; background: rgba(216,167,78,.14); margin:10px 0; }
.rfn-notes{ text-align:left; }
.rfn-notes li{ margin-bottom:4px; }

/* ===================== RF Nusantara — 7-Day grid: flex-wrap centered (fixes uneven last row) ===================== */
.rfn-day-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
}
.rfn-day-grid > .rfn-day-card{ flex: 0 1 155px; }

/* ===================== RF Nusantara — samakan hover & aksen garis atas untuk skill/npc/day card ===================== */
.rfn-skill-card,
.rfn-npc-card,
.rfn-day-card{
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.rfn-skill-card::before,
.rfn-npc-card::before,
.rfn-day-card::before{
  content:''; position:absolute; top:0; left:12px; right:12px; height:1px;
  background: linear-gradient(90deg, transparent, rgba(243,212,138,.55), transparent);
}
.rfn-skill-card:hover,
.rfn-npc-card:hover,
.rfn-day-card:hover{
  transform: translateY(-5px);
  border-color: var(--rfn-border-strong);
  box-shadow: 0 0 22px rgba(216,167,78,.32), 0 14px 28px rgba(0,0,0,.4);
}

/* ===================== RF Nusantara — Battle Pass (reuses rfn-day-* card system) ===================== */
.rfn-day-reward-label--silver{ color:#C0C0C0; }

/* ===================== RF Nusantara — Gemstone codex cards (rfn-gem-*) ===================== */
.rfn-gem-card{
  background: var(--rfn-card);
  border:1px solid var(--rfn-border);
  border-radius:14px;
  padding:18px;
  position: relative;
  overflow:hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.rfn-gem-card::before{
  content:''; position:absolute; top:0; left:12px; right:12px; height:1px;
  background: linear-gradient(90deg, transparent, rgba(243,212,138,.55), transparent);
}
.rfn-gem-card:hover{
  transform: translateY(-5px);
  border-color: var(--rfn-border-strong);
  box-shadow: 0 0 22px rgba(216,167,78,.32), 0 14px 28px rgba(0,0,0,.4);
}
.rfn-gem-head{
  display:flex; align-items:center; gap:14px;
  margin:-18px -18px 14px -18px;
  padding:14px 18px 12px;
  background: rgba(216,167,78,.08);
  border-bottom:1px solid var(--rfn-border);
}
.rfn-gem-icon-wrap{
  width:56px; height:56px; flex-shrink:0;
  border:1px dashed rgba(216,167,78,.35);
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.rfn-gem-icon-wrap img{ width:100%; height:100%; object-fit:cover; }
.rfn-gem-name{ font-family:"Source Sans Pro", sans-serif; font-weight:600; font-size:16px; color: var(--rfn-gold-bright); margin-bottom:4px; }
.rfn-gem-card table{ width:100%; border-collapse:collapse; font-size:12.5px; }
.rfn-gem-card td{ padding:6px 4px; color: var(--rfn-muted); border-bottom:1px dashed rgba(216,167,78,.10); }
.rfn-gem-card tr:last-child td{ border-bottom:none; }
.rfn-gem-card td:last-child{ text-align:right; color: var(--rfn-gold-bright); font-weight:700; }

/* ===================== RF Nusantara — Solid gradient pill + data table (rfn-stat-table) ===================== */
.rfn-pill-solid{
  display:inline-block; padding:6px 18px; border-radius:30px;
  background: linear-gradient(90deg, var(--rfn-gold-bright), #ff9900);
  font-size:10px; font-weight:700; letter-spacing:2px; color:#000;
  transition: box-shadow .25s ease, transform .25s ease;
}
.rfn-pill-solid:hover{
  transform: translateY(-2px);
  box-shadow: 0 0 14px rgba(216,167,78,.5);
}
.rfn-tagline{ margin-top:4px; font-size:11px; color: var(--rfn-muted); letter-spacing:1px; }

.rfn-stat-table-wrap{ overflow-x:auto; margin-top:8px; border:1px solid var(--rfn-border); border-radius:14px; transition: box-shadow .25s ease, border-color .25s ease; }
.rfn-stat-table-wrap:hover{ border-color: var(--rfn-border-strong); box-shadow: 0 0 20px rgba(216,167,78,.25); }
.rfn-stat-table{ width:100%; border-collapse:collapse; font-size:13px; color: var(--rfn-ink); text-align:center; }
.rfn-stat-table thead tr{
  background: linear-gradient(180deg, rgba(216,167,78,.12), rgba(216,167,78,.03));
  border-bottom:1px solid rgba(216,167,78,.20);
}
.rfn-stat-table th{ padding:12px 6px; font-family:"Source Sans Pro", sans-serif; font-weight:600; color: var(--rfn-gold-bright); font-size:12px; letter-spacing:1px; }
.rfn-stat-table td{ padding:10px 6px; font-size:13px; }
.rfn-stat-table tbody tr{ border-bottom:1px solid rgba(216,167,78,.10); transition: background .2s ease, box-shadow .2s ease; }
.rfn-stat-table tbody tr:last-child{ border-bottom:none; }
.rfn-stat-table tbody tr:nth-child(even){ background: rgba(255,255,255,.02); }
.rfn-stat-table tbody tr:hover{ background: rgba(216,167,78,.09); box-shadow: inset 0 0 16px rgba(216,167,78,.18); }
.rfn-stat-table .rfn-grade-cell{ font-weight:700; }
.rfn-stat-table tr.rfn-row-featured{ background: linear-gradient(90deg, rgba(216,167,78,.12), rgba(255,153,0,.10), rgba(216,167,78,.12)) !important; }
.rfn-stat-table tr.rfn-row-featured td{ font-weight:700; color: var(--rfn-gold-bright); }

/* ===================== RF Nusantara — Drop information (minimal, rfn-drop-*) ===================== */
.rfn-drop-section{
  display:flex; flex-direction:column; gap:20px;
}
.rfn-title-pill{
  display:inline-block; padding:6px 22px;
  background: linear-gradient(135deg, rgba(0,0,0,.14), rgba(0,0,0,.14));
  border:1px solid rgba(216,167,78,.35);
  border-radius:30px;
  font-family:"Source Sans Pro", sans-serif; font-weight:700; font-size:18px;
  color: var(--rfn-gold-bright);
  text-shadow: 0 0 10px rgba(243,212,138,.35);
  transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
  position: relative;
  overflow: hidden;
}
.rfn-title-pill::before{
  content:''; position:absolute; top:0; left:12px; right:12px; height:1px;
  background: linear-gradient(90deg, transparent, rgba(243,212,138,.55), transparent);
}
.rfn-title-pill:hover{
  transform: translateY(-2px);
  border-color: rgba(216,167,78,.6);
  box-shadow: 0 0 16px rgba(216,167,78,.4);
}
.rfn-drop-box{
  background: linear-gradient(135deg, rgba(0,0,0,.10), rgba(0,0,0,.10));
  border:1px solid rgba(216,167,78,.25);
  border-radius:12px;
  padding:18px;
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.rfn-drop-box:hover{
  transform: translateY(-4px);
  border-color: rgba(216,167,78,.45);
  box-shadow: 0 0 20px rgba(216,167,78,.28), 0 10px 22px rgba(0,0,0,.35);
}
.rfn-drop-box::before{
  content:''; position:absolute; top:0; left:12px; right:12px; height:1px;
  background: linear-gradient(90deg, transparent, rgba(243,212,138,.55), transparent);
}
.rfn-drop-box-title{
  text-align:center; font-family:"Source Sans Pro", sans-serif; font-weight:600; font-size:15.5px;
  color: var(--rfn-gold-bright); text-shadow:0 0 8px rgba(243,212,138,.3);
  margin:-18px -18px 14px -18px;
  padding:12px 18px 10px;
  background: rgba(216,167,78,.08);
  border-bottom:1px solid rgba(216,167,78,.20);
}
.rfn-drop-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.rfn-drop-item{
  width:82px; text-align:center;
  background: var(--rfn-card);
  border:1px solid var(--rfn-border);
  border-radius:10px;
  padding:10px 6px;
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.rfn-drop-item::before{
  content:''; position:absolute; top:0; left:8px; right:8px; height:1px;
  background: linear-gradient(90deg, transparent, rgba(243,212,138,.55), transparent);
}
.rfn-drop-item:hover{
  transform: translateY(-4px);
  border-color: var(--rfn-border-strong);
  box-shadow: 0 0 18px rgba(216,167,78,.30), 0 10px 20px rgba(0,0,0,.35);
}
.rfn-drop-item img{ width:38px; height:38px; object-fit:contain; margin-bottom:6px; }
.rfn-drop-name{ font-size:10.5px; color: var(--rfn-ink); line-height:1.3; }

/* ===================== Guild List: kotak placeholder kosong (menunggu data) ===================== */
.guild-list-item--empty {
    opacity: .32;
}
.guild-list-item--empty .guild-member-count,
.guild-list-item--empty .guild-name-text,
.guild-list-item--empty .guild-leader-text {
    color: #B0885A;
}
.guild-emblem-placeholder {
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
    color: rgba(190,130,0,.45);
    border: 1px dashed rgba(190,130,0,.30);
    border-radius: 50%;
}

/* ===================== Archon Information: lingkaran win/lose rate per bangsa ===================== */
.archon-winlose-row {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 6px 0 2px;
}
.archon-winlose-item {
    position: relative;
    width: 42px;
    height: 42px;
}
.archon-winlose-logo {
    width: 42px;
    height: 42px;
    object-fit: contain;
    transition: opacity .25s ease, transform .25s ease;
}
.archon-winlose-item:hover .archon-winlose-logo {
    opacity: 0;
    transform: scale(.85);
}
.archon-winlose-circle {
    position: absolute;
    inset: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    opacity: 0;
    transform: scale(.85);
    transition: opacity .25s ease, transform .25s ease;
    border: 2px solid;
    background: rgba(20,8,0,.65);
}
.archon-winlose-circle.wl-bellato { border-color: #7effff; color: #7effff; }
.archon-winlose-circle.wl-cora { border-color: #ff4dff; color: #ff4dff; }
.archon-winlose-circle.wl-accretia { border-color: #FFD700; color: #FFD700; }

.archon-winlose-item:hover .archon-winlose-circle {
    opacity: 1;
    transform: scale(1);
}

/* ===================== Daily Quest: step guide + quest card (rfn-step-*, rfn-quest-*) ===================== */
.rfn-step-row{
  display:flex; align-items:stretch; justify-content:center;
  gap:10px; flex-wrap:wrap;
}
.rfn-step{
  flex:1 1 190px; max-width:230px;
  background: var(--rfn-card);
  border:1px solid var(--rfn-border);
  border-radius:12px;
  padding:16px 14px;
  text-align:center;
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.rfn-step::before{
  content:''; position:absolute; top:0; left:12px; right:12px; height:1px;
  background: linear-gradient(90deg, transparent, rgba(243,212,138,.55), transparent);
}
.rfn-step:hover{
  transform: translateY(-5px);
  border-color: var(--rfn-border-strong);
  box-shadow: 0 0 22px rgba(216,167,78,.32), 0 14px 28px rgba(0,0,0,.4);
}
.rfn-step-num{
  display:inline-flex; width:24px; height:24px; border-radius:50%;
  background: rgba(216,167,78,.15); color: var(--rfn-gold-bright);
  align-items:center; justify-content:center; font-weight:700; font-size:12px;
  margin-bottom:8px;
}
.rfn-step-title{ font-weight:700; color: var(--rfn-gold-bright); font-size:13px; letter-spacing:.3px; margin-bottom:6px; }
.rfn-step-desc{ font-size:11.5px; color: var(--rfn-muted); line-height:1.5; }
.rfn-step-arrow{
  display:flex; align-items:center; justify-content:center;
  color: rgba(216,167,78,.35); font-size:18px; padding:0 2px;
}
@media (max-width: 640px){
  .rfn-step-arrow{ transform: rotate(90deg); width:100%; }
}

.rfn-quest-card{
  background: var(--rfn-card);
  border:1px solid var(--rfn-border);
  border-radius:14px;
  overflow:hidden;
  margin-bottom:18px;
  position:relative;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.rfn-quest-card::before{
  content:''; position:absolute; top:0; left:12px; right:12px; height:1px;
  background: linear-gradient(90deg, transparent, rgba(243,212,138,.5), transparent);
}
.rfn-quest-card:hover{
  transform: translateY(-5px);
  border-color: var(--rfn-border-strong);
  box-shadow: 0 0 20px rgba(216,167,78,.30), 0 10px 22px rgba(0,0,0,.35);
}
.rfn-quest-head{
  padding:13px 18px;
  font-weight:700;
  font-size:15px;
  color: var(--rfn-gold-bright);
  letter-spacing:.3px;
  border-bottom:1px solid var(--rfn-border);
  background: rgba(216,167,78,.05);
}
.rfn-quest-body{ padding:18px 20px; }
.rfn-quest-label{
  font-size:10.5px; letter-spacing:1.5px; text-transform:uppercase;
  color: var(--rfn-gold-bright); font-weight:700; margin-bottom:8px;
}
.rfn-quest-list{ margin:0 0 16px 18px; padding:0; color: var(--rfn-ink); font-size:13px; line-height:1.85; }
.rfn-quest-cp{ font-size:13px; color: var(--rfn-muted); margin-bottom:12px; }
.rfn-quest-cp b{ color: var(--rfn-gold-bright); font-size:14px; }

/* ===================== Mini stat box (Crafting Cost, Success Rate, dll) ===================== */
.rfn-stat-mini{
  background: var(--rfn-card);
  border:1px solid var(--rfn-border);
  border-radius:12px;
  padding:16px;
  text-align:center;
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.rfn-stat-mini::before{
  content:''; position:absolute; top:0; left:10px; right:10px; height:1px;
  background: linear-gradient(90deg, transparent, rgba(243,212,138,.55), transparent);
}
.rfn-stat-mini:hover{
  transform: translateY(-4px);
  border-color: var(--rfn-border-strong);
  box-shadow: 0 0 18px rgba(216,167,78,.28), 0 10px 20px rgba(0,0,0,.35);
}
.rfn-stat-mini-label{ font-size:10.5px; letter-spacing:1.5px; text-transform:uppercase; color: var(--rfn-muted); }
.rfn-stat-mini-value{ font-size:22px; font-weight:700; color:#fff; margin-top:6px; }
.rfn-stat-mini-note{ font-size:10.5px; color: var(--rfn-muted); margin-top:2px; }

/* ===================== Server Rules (numbered rule card + penalty chain) ===================== */
.rfn-rule-number{
  flex-shrink:0; width:38px; height:38px; border-radius:50%;
  border:1px solid var(--rfn-border-strong);
  background: linear-gradient(180deg, rgba(216,167,78,.16), rgba(216,167,78,.03));
  color: var(--rfn-gold-bright); font-weight:700; font-size:14px;
  display:flex; align-items:center; justify-content:center;
}
.rfn-penalty-pill{
  display:inline-block; padding:5px 12px; border-radius:20px;
  background: rgba(216,167,78,.06); border:1px solid var(--rfn-border);
  color: var(--rfn-ink); font-size:10.5px; letter-spacing:.3px;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.rfn-penalty-pill:hover{
  background: rgba(216,167,78,.14);
  border-color: var(--rfn-border-strong);
  transform: translateY(-1px);
}
.rfn-penalty-arrow{ color: var(--rfn-gold-bright); font-size:12px; }

/* ===================== Administrator Authority block ===================== */
.rfn-authority-block{
  margin-top:26px; padding:20px 22px;
  background: linear-gradient(180deg, rgba(216,167,78,.05), rgba(216,167,78,.01));
  border:1px solid var(--rfn-border);
  border-top:2px solid var(--rfn-border-strong);
  border-radius:14px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.rfn-authority-block:hover{
  transform: translateY(-4px);
  border-color: var(--rfn-border-strong);
  box-shadow: 0 0 18px rgba(216,167,78,.28), 0 10px 20px rgba(0,0,0,.35);
}
.rfn-authority-title{
  font-size:15px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
  color: var(--rfn-gold-bright); margin-bottom:12px;
}
.rfn-authority-text{
  font-size:12.5px; line-height:1.9; color: var(--rfn-muted);
  margin:0 0 12px 0;
}
.rfn-authority-text:last-of-type{ margin-bottom:0; }
.rfn-authority-final{
  margin-top:16px; padding-top:14px;
  border-top:1px solid var(--rfn-border);
  font-size:13px; font-weight:700; letter-spacing:.5px;
  color: var(--rfn-gold-bright);
  text-align:center;
}

/* ===================== Download page: step flow ===================== */
.rfn-step-flow{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px; margin:22px 0 30px; }
.rfn-step{ display:flex; flex-direction:column; align-items:center; gap:10px; min-width:88px; }
.rfn-step-circle{
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:22px; font-weight:700; color:#2A1608;
  background: linear-gradient(135deg, var(--rfn-gold-bright), var(--rfn-gold));
  box-shadow: 0 0 0 1px var(--rfn-border-strong), 0 4px 14px rgba(0,0,0,.35);
  transition: transform .25s ease, box-shadow .25s ease;
}
.rfn-step:hover .rfn-step-circle{
  transform: translateY(-3px);
  box-shadow: 0 0 18px rgba(216,167,78,.4), 0 4px 14px rgba(0,0,0,.35);
}
.rfn-step-label{ font-size:11px; font-weight:700; letter-spacing:1px; color: var(--rfn-ink); text-align:center; text-transform:uppercase; }
.rfn-step-arrow{ font-size:20px; color: var(--rfn-gold-bright); margin:0 2px; }

/* ===================== Download cards ===================== */
.rfn-dl-card{
  background: var(--rfn-card);
  border:1px solid var(--rfn-border);
  border-radius:14px;
  padding:22px;
  position:relative;
  overflow:hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.rfn-dl-card::before{
  content:''; position:absolute; top:0; left:14px; right:14px; height:1px;
  background: linear-gradient(90deg, transparent, rgba(243,212,138,.55), transparent);
}
.rfn-dl-card:hover{
  transform: translateY(-4px);
  border-color: var(--rfn-border-strong);
  box-shadow: 0 0 18px rgba(216,167,78,.28), 0 10px 20px rgba(0,0,0,.35);
}
.rfn-dl-badge{
  display:inline-block; padding:4px 12px; border-radius:20px;
  font-size:10px; font-weight:700; letter-spacing:1px;
  margin-bottom:14px;
}
.rfn-dl-badge--recommended{ background: linear-gradient(90deg, var(--rfn-gold-bright), #ff9900); color:#2A1608; }
.rfn-dl-badge--mirror{ background: rgba(226,114,114,.15); color:#F5A3A3; border:1px solid rgba(226,114,114,.3); }
.rfn-dl-title{ font-size:18px; font-weight:700; color:#fff; margin-bottom:6px; }
.rfn-dl-desc{ font-size:12px; color: var(--rfn-muted); margin-bottom:10px; }
.rfn-dl-size{ font-size:12px; font-weight:700; color: var(--rfn-gold-bright); margin-bottom:18px; }
.rfn-dl-btn{
  display:inline-block; padding:12px 28px; border-radius:30px;
  background: linear-gradient(135deg, var(--rfn-gold-bright), var(--rfn-gold));
  color:#2A1608 !important; font-weight:700; font-size:12px; letter-spacing:.5px;
  text-decoration:none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.rfn-dl-btn:hover{ transform: translateY(-2px); box-shadow: 0 6px 16px rgba(216,167,78,.4); }

/* ===================== News listing (post.php) — background & hover selaras tema Download ===================== */
.rfn-news .card,
.rfn-page .card{
  background:
    radial-gradient(circle at 15% 20%, rgba(216,167,78,.05) 0 3px, transparent 4px),
    radial-gradient(circle at 65% 70%, rgba(216,167,78,.05) 0 3px, transparent 4px),
    radial-gradient(ellipse at top, rgba(216,167,78,.07), transparent 55%),
    var(--rfn-bg, rgba(21,8,9,.50));
  background-size: 46px 46px, 46px 46px, 100% 100%, 100% 100%;
  border: 1px solid var(--rfn-border, rgba(216,167,78,.18));
  border-radius: 18px;
  overflow: hidden;
}
.rfn-news .card-header,
.rfn-page .card-header{
  background: transparent !important;
  border-bottom: 1px solid var(--rfn-border, rgba(216,167,78,.18)) !important;
}
.rfn-news .card-body,
.rfn-page .card-body{
  background-color: transparent !important;
}

/* Setiap baris berita: efek hover naik + glow, konsisten dengan kartu di halaman lain */
.rfn-news .news-block-image{
  border-bottom: 1px dashed rgba(255,255,255,.2);
  padding: 14px 10px;
  border-radius: 10px;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.rfn-news .news-block-image:hover{
  transform: translateY(-3px);
  background: rgba(216,167,78,.05);
  box-shadow: 0 0 18px rgba(216,167,78,.22), 0 10px 20px rgba(0,0,0,.3);
}

/* Pagination — sedikit disamakan dengan aksen emas tema */
.rfn-news div.pagination a:hover,
.rfn-news div.pagination span.page_current{
  border-color: var(--rfn-border-strong, rgba(216,167,78,.35)) !important;
  color: var(--rfn-gold-bright, #F3D48A) !important;
}


/* ===================== HOME PAGE — cards/widgets elegant restyle ===================== */
.rfn-home .card{
  background:
    radial-gradient(circle at 15% 20%, rgba(216,167,78,.05) 0 3px, transparent 4px),
    radial-gradient(circle at 65% 70%, rgba(216,167,78,.05) 0 3px, transparent 4px),
    var(--rfn-bg, rgba(21,8,9,.50));
  border: 1px solid var(--rfn-border, rgba(216,167,78,.18));
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.rfn-home .card::before{
  content:''; position:absolute; top:0; left:14px; right:14px; height:1px;
  background: linear-gradient(90deg, transparent, rgba(243,212,138,.55), transparent);
  z-index: 1;
}
.rfn-home .card:hover{
  transform: translateY(-3px);
  border-color: var(--rfn-border-strong, rgba(216,167,78,.35));
  box-shadow: 0 0 18px rgba(216,167,78,.22), 0 10px 20px rgba(0,0,0,.3);
}
.rfn-home .card-header{
  background: transparent !important;
  border-bottom: 1px solid var(--rfn-border, rgba(216,167,78,.18)) !important;
  letter-spacing: 1px;
}
.rfn-home .card-body{
  background: transparent !important;
}

/* Slider frame */
.rfn-home .sliderBg{
  border: 1px solid var(--rfn-border, rgba(216,167,78,.25));
  border-radius: 14px;
  padding: 0 10px;
  box-sizing: border-box;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.rfn-home .sliderBg #carouselSlideFade,
.rfn-home .sliderBg .carousel-inner,
.rfn-home .sliderBg .carousel-item,
.rfn-home .sliderBg .carousel-item img{
  border-radius: 8px;
}
.rfn-home .sliderBg:hover{
  transform: translateY(-3px);
  border-color: var(--rfn-border-strong, rgba(216,167,78,.45));
  box-shadow: 0 0 22px rgba(216,167,78,.28), 0 14px 28px rgba(0,0,0,.4);
}

/* Rank table rows — subtle hover */
.rfn-home table.rank tr td{
  transition: background .2s ease;
}
.rfn-home table.rank tr:hover td{
  background: rgba(216,167,78,.05);
}

/* Discord widget rows */
.rfn-home table.discord-widget tr td{
  transition: background .2s ease;
}
.rfn-home table.discord-widget tr:hover td{
  background: rgba(216,167,78,.05);
}

/* Guild list — tambahkan garis aksen emas tipis di atas kartu, konsisten dengan standar situs */
.rfn-home .guild-list-item{
  position: relative;
}
.rfn-home .guild-list-item::before{
  content:''; position:absolute; top:0; left:10px; right:10px; height:1px;
  background: linear-gradient(90deg, transparent, rgba(243,212,138,.55), transparent);
}

/* Killer tables */
.rfn-home .killer-table-scroll table.rank tr:hover td{
  background: rgba(216,167,78,.06);
}

/* ===================== Weekly Top Donation strip (below slider) ===================== */
.rfn-donation-strip .card-header {
    text-align: center;
    padding: 8px 12px !important;
    font-size: 18px;
}

.rfn-donation-strip .card-body {
    padding-top: 6px;
    padding-bottom: 6px;
}

.rfn-donation-strip .rank td {
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.3;
}

.rfn-donation-strip .rank td > div {
    line-height: 1.3;
    margin: 0;
}

/* ===================== Stat strip (server status + online + top donation) ===================== */
.rfn-statbar .card-body {
    padding: 14px 20px;
}
.rfn-statbar-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr 1.7fr;
    align-items: stretch;
    text-align: center;
}
.rfn-stat {
    padding: 4px 18px;
    border-right: 1px dashed rgba(255,255,255,.15);
    display: flex;
    flex-direction: column;
}
.rfn-stat:last-child {
    border-right: 0;
}
.rfn-stat-label {
    display: block;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(240,182,42,.8);
    padding-bottom: 6px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(216,167,78,.25);
}
.rfn-stat-value {
    display: block;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    margin: auto 0;
}
.rfn-stat-donors {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: auto 0;
    font-size: 14px;
    color: #ddd;
}
.rfn-donor {
    padding: 0 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rfn-donor:not(:last-child) {
    border-right: 1px solid rgba(216,167,78,.25);
}
.rfn-donor b {
    color: #F0B62A;
    font-weight: 700;
    margin-right: 4px;
}
.rfn-stat-donors .rfn-donor {
    font-size: 17px;
    font-weight: 600;
    color: #EDE0C4;
}
.rfn-stat-donors .rfn-donor b {
    color: #EDE0C4;
}
@media (max-width: 768px) {
    .rfn-statbar-grid {
        grid-template-columns: 1fr;
        row-gap: 12px;
    }
    .rfn-stat {
        border-right: 0;
        border-bottom: 1px dashed rgba(255,255,255,.15);
        padding-bottom: 12px;
    }
    .rfn-stat:last-child {
        border-bottom: 0;
        padding-bottom: 4px;
    }
}

/* ===================== War status merged card + full-width bottom row ===================== */
.rfn-war-subtitle {
    display: block;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(240,182,42,.8);
    margin-bottom: 10px;
}
.rfn-war-divider {
    border-top: 1px dashed rgba(255,255,255,.15);
    margin: 14px 0;
}
.grid-fullbar {
    grid-column: 1 / -1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}


/* ===================== Latest news: even distribution + header size match ===================== */
.rfn-home .grid-mainbar .card-body {
    justify-content: space-between;
}
.rfn-home .grid-mainbar .news-block {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
}
.rfn-home .grid-mainbar .news-block .time {
    float: none;
    margin-left: auto;
    padding-top: 0;
    white-space: nowrap;
}
.rfn-home .grid-mainbar .news-block .title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ===================== Content pages (game info, donation, download) design language ===================== */
.rfn-page .card-body-trans {
    background-color: transparent !important;
}
.rfn-page .card-header {
    letter-spacing: 1px;
}

/* ===================== Mobile: content grid collapses to one column ===================== */
@media (max-width: 900px) {
    .content-grid {
        grid-template-columns: 1fr;
        row-gap: 0;
    }
    .grid-fullbar {
        grid-column: auto;
    }
    main {
        padding: 12px;
    }
    footer {
        margin-left: 0;
        margin-right: 0;
    }
}

/* ===================== Compact full-width guild list (bottom of homepage) ===================== */
.guild-list-card--compact .guild-list-item {
    width: 160px;
    min-height: 170px;
    padding: 9px;
    gap: 7px;
}
.guild-list-card--compact .guildemblem img {
    width: 64px !important;
    height: 64px !important;
}
.guild-list-card--compact .guildemblem .guildmark {
    width: 32px !important;
    height: 32px !important;
}
.guild-list-card--compact .guild-name-text {
    font-size: 12px;
}
.guild-list-card--compact .guild-member-count {
    font-size: 11px;
    padding: 2px 5px;
}
.guild-list-card--compact .guild-leader-text {
    font-size: 12px;
}
.guild-list-card--compact .guild-race-icon {
    width: 18px;
    height: 18px;
}
.guild-list-card--compact .guild-emblem-placeholder {
    font-size: 34px;
}


/* ===================== Bottom 3-col row: equal card heights ===================== */
.grid-fullbar .row {
    display: flex;
    flex-wrap: wrap;
}
.grid-fullbar .row > [class*="col-"] {
    display: flex;
    flex-direction: column;
}
.grid-fullbar .row > [class*="col-"] > .card {
    flex: 1;
}

/* ===================== Navbar: hamburger, active page, scroll background ===================== */
.navbar {
    transition: background-color .3s ease, box-shadow .3s ease;
}
.navbar.navbar-scrolled {
    background-color: rgba(23,16,8, .72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 0 0 14px 14px;
    box-shadow: 0 4px 14px rgba(0,0,0,.35);
}

.navbar-toggler {
    border: 1px solid rgba(190,130,0, .50);
    color: #F0B62A;
    margin: 0 12px 0 auto;
}
.navbar-toggler:focus {
    box-shadow: 0 0 0 2px rgba(240,182,42, .35);
}

.nav-link-box.active {
    background-color: rgba(190,130,0, .28);
    border-color: #F0B62A;
    box-shadow: inset 0 2px 0 #FFD700;
    color: #EDE0C4;
}

@media (max-width: 991px) {
    .navbar {
        background-color: rgba(23,16,8, .72);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border-radius: 0 0 14px 14px;
        padding: 10px 0;
    }
    .navbar-collapse {
        padding: 12px 4px 8px 4px;
    }
    .navbar-nav .nav-item {
        margin: 4px 0;
    }
    .nav-link-box {
        display: block;
        text-align: center;
    }
    .navbar .dropdown .box-shape {
        width: 100%;
        margin-top: 6px;
    }
}