/* ============================================================
   Site-wide blue-gold theme — SINGLE SOURCE OF TRUTH for brand tokens
   Load after core-site / core-member bundles (see head_theme_override)
   Do not redefine --color-* / --ix9-* / --type-a / --border in other CSS.
   ============================================================ */

:root {
    /* IX9 luxury palette — 90% deep blue / 10% gold */
    --ix9-blue-900: #081223;
    --ix9-blue-850: #0b1833;
    --ix9-blue-800: #102344;
    --ix9-blue-750: #13284a;
    --ix9-blue-600: #1e355e;
    --ix9-blue-500: #28497b;
    /* 個人中心區塊底色 */
    --ix9-panel-a: #051027;
    --ix9-panel-b: #1a2733;
    --ix9-panel-bg: linear-gradient(135deg, var(--ix9-panel-a), var(--ix9-panel-b));
    --ix9-gold-100: #f8e6b8;
    --ix9-gold-200: #e9d29a;
    --ix9-gold-300: #d9bf7d;
    --ix9-gold-400: #c9a35a;
    --ix9-gold-500: #a98843;
    --ix9-gold-gradient: linear-gradient(180deg, #f8e6b8 0%, #e9d29a 16%, #d9bf7d 48%, #c9a35a 78%, #a98843 100%);
    --ix9-gold-border: linear-gradient(180deg, #f8e6b8 0%, #d9bf7d 42%, #a98843 100%);
    --ix9-metal-frame: 0 0 0 1px rgba(169, 136, 67, 0.55), inset 0 0 0 1px rgba(248, 230, 184, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.1);

    /* Shared brand aliases (used across components) */
    --type-a: linear-gradient(to bottom, #13284a 0%, #102344 50%, #0b1833 100%);
    --texture-1: linear-gradient(315deg, transparent, transparent 14%, rgba(255, 255, 255, 0.7) 34%, transparent 0, hsla(0, 0%, 100%, 0.7) 56%, transparent 0, hsla(0, 0%, 100%, 0.7));
    --gradient-4: linear-gradient(180deg, #d9bf7d, #a98843);
    --border: linear-gradient(to bottom, #f8e6b8 0%, #dec17c 28%, #c9a35a 60%, #a98843 100%);
    --box-shadow-1: 0 2px 4px 0 #3d2f16;
    --color-bg: #081223;
    --color-nav: #0b1833;
    --color-btn: #c9a35a;
    /* Neutral text / overlays: white + opacity（長文閱讀用，避免偏黃疲勞）
       金色強調請用 --ix9-gold-* / --color-btn，勿再把 --color-w* 當金色 */
    --color-w100: rgba(255, 255, 255, 1);
    --color-w65: rgba(255, 255, 255, 0.65);
    --color-w25: rgba(255, 255, 255, 0.25);
    --color-w23: rgba(255, 255, 255, 0.23);
    --color-w18: rgba(255, 255, 255, 0.18);
    --color-w10: rgba(255, 255, 255, 0.10);
    --color-b19: #00000030;
    --color-b44: #00000070;
    --color-r19: #c49d5336;
    --color-r67: #a6813dc7;
    --style-2-color: #c9a35a;
    /* body 專用：中性黑底，不帶藍金，讓上方 UI 區塊突顯層次 */
    --ix9-body-bg-fallback: #050608;
    --ix9-body-bg: radial-gradient(ellipse 100% 75% at 50% -5%, rgba(255, 255, 255, 0.028) 0%, transparent 48%), radial-gradient(ellipse 72% 52% at 0% 100%, rgba(0, 0, 0, 0.32) 0%, transparent 52%), radial-gradient(ellipse 68% 48% at 100% 100%, rgba(0, 0, 0, 0.26) 0%, transparent 50%), linear-gradient(180deg, #101214 0%, #161e25 38%, #0c1728 68%, #172837 100%);
}

/* Site-wide page background — neutral dark canvas (blue-gold reserved for UI layers) */
html {
    min-height: 100%;
    background-color: var(--ix9-body-bg-fallback) !important;
    background-image: var(--ix9-body-bg) !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    background-attachment: scroll !important;
}

body {
    min-height: 100%;
    background-color: transparent !important;
    background-image: var(--ix9-body-bg) !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    background-attachment: scroll !important;
}

#loading,
.loading-page {
    background-color: var(--ix9-body-bg-fallback) !important;
    background-image: var(--ix9-body-bg) !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
}

/* Member / form focus */
input:focus,
textarea:focus,
select:focus,
.form-control:focus {
    caret-color: #d7b16a;
}

.profile-news-unread-badge {
    background: #d7b16a !important;
    box-shadow: 0 0 0 2px rgba(11, 24, 48, 0.92) !important;
}

/* profile_news page */
.msg-filter-item.active {
    background: linear-gradient(135deg, #ddc38a 0%, #b48943 100%) !important;
    border-color: rgba(215, 177, 106, 0.55) !important;
    color: #0d2348 !important;
}

.newsline.is-unread .news-pin {
    color: #d7b16a !important;
}

/* inquire tabs */
.mainbox .chose .s-box ul li:nth-of-type(1).act,
.mainbox .chose .s-box ul li:nth-last-of-type(1).act {
    border-right-color: rgba(199, 164, 95, 0.55) !important;
}

.mainbox .chose .s-box ul li.act2 {
    border-left-color: rgba(199, 164, 95, 0.55) !important;
}

/* washcode progress */
.washcode-fill:not(.completed) {
    background: linear-gradient(90deg, #8a6a2e, #b48943, #d7b16a) !important;
    box-shadow: 0 0 8px rgba(215, 177, 106, 0.28) !important;
}

/* rtp trend down — softer gold-coral, not bright red */
.rtp-data .trend.down {
    color: #c9a86c !important;
}

/* mobile bottom nav home logo — base (homepage overrides in home-mobile-luxury.css) */
.nav-highlight-logo-wrap {
    overflow: hidden;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #1d3d73 0%, #0b1833 62%, #071126 100%) !important;
    border: 1px solid rgba(229, 213, 178, 0.82);
    box-shadow:
        0 0 0 1px rgba(12, 26, 52, 0.95) inset,
        0 3px 8px rgba(0, 0, 0, 0.36);
}

.nav-highlight-logo {
    width: 52px;
    object-fit: contain;
    display: block;
    filter:
        drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4))
        drop-shadow(0 0 6px rgba(248, 230, 184, 0.35))
        brightness(1.1)
        contrast(1.06);
}

/* Desktop: 快捷選單在 header；遊戲分類維持原選單位置 + sticky 凍結 */
@media screen and (min-width: 1025px) {
/* Header layout: logo | quick menu | auth */
.header .tophd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.header .navbar-L {
    width: auto;
    flex: 0 0 auto;
}

.header .navbar-R {
    width: auto;
    flex: 0 0 auto;
    margin-left: auto;
}

.header-quick-nav {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    justify-content: flex-end;
    padding: 0 8px;
}

.header-quick-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px 4px;
}

.header-quick-nav__item {
    margin: 0;
    padding: 0;
}

.header-quick-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    color: #ffffff;
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.header-quick-nav__link i {
    font-size: 0.95em;
    color: #d7b16a;
}

.header-quick-nav__link:hover {
    color: #f4e4bf;
    background: rgba(215, 177, 106, 0.1);
    border-color: rgba(215, 177, 106, 0.28);
}

.header-quick-nav__link:hover i {
    color: #f4e4bf;
}

/* 非首頁：只要頂部 header（無遊戲分類列） */
.content_all {
    padding-top: 74px !important;
}

/* 首頁：二級選單＝home-topgames-tabs 同款膠囊（特異性需蓋過 core-site .vertical-tab …） */
.content_all.home-rzu-shell {
    /* header(73) + 分類列(68) + 12 間距；不足會讓 BN 被固定分類列蓋住 */
    padding-top: 153px !important;
}

.home-rzu-shell .vertical-tab .home-rzu-category-bar {
    position: fixed !important;
    top: 73px;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    z-index: 9;
    display: flex !important;
    justify-content: center;
    align-items: center;
    padding: 8px 24px !important;
    box-sizing: border-box;
    background: rgba(8, 13, 27, 0.28) !important;
    backdrop-filter: blur(18px) saturate(1.2);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    border-bottom: 1px solid rgba(215, 177, 106, 0.12);
}

/* 與 .home-topgames-tabs 同款外框 */
.home-rzu-shell .vertical-tab .home-rzu-category-bar .nav-tabs {
    width: min(1000px, calc(100% - 8px)) !important;
    max-width: 1000px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    gap: 0 !important;
    justify-content: stretch !important;
    align-items: stretch !important;
    padding: 6px !important;
    border: 1px solid rgba(215, 177, 106, 0.34) !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, rgba(14, 28, 54, 0.95) 0%, rgba(10, 20, 40, 0.94) 100%) !important;
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.22) !important;
    aspect-ratio: auto !important;
    flex: none !important;
}

.home-rzu-shell .vertical-tab .home-rzu-category-bar .nav-tabs > li {
    flex: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: stretch !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

.home-rzu-shell .vertical-tab .home-rzu-category-bar .nav-tabs > li > a {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    padding: 10px 0 !important;
    border: none !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: rgba(229, 213, 178, 0.86) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    opacity: 1 !important;
    transition: all 0.18s ease;
    cursor: pointer;
}

.home-rzu-shell .vertical-tab .home-rzu-category-bar .nav-tabs > li > a .nav-sub {
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    color: inherit !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
    line-height: 1 !important;
}

.home-rzu-shell .vertical-tab .home-rzu-category-bar .nav-tabs > li > a i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.05em !important;
    line-height: 1 !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    color: inherit !important;
}

/* active／hover＝home-topgames-tabs button.is-active */
.home-rzu-shell .vertical-tab .home-rzu-category-bar .nav-tabs > li:hover > a,
.home-rzu-shell .vertical-tab .home-rzu-category-bar .nav-tabs > li.game-nav-item.is-active > a {
    background: linear-gradient(135deg, #ddc38a 0%, #b48943 100%) !important;
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.28) !important;
    color: #0d2348 !important;
}

.home-rzu-shell .vertical-tab .home-rzu-category-bar .nav-tabs > li:hover > a .nav-sub,
.home-rzu-shell .vertical-tab .home-rzu-category-bar .nav-tabs > li:hover > a i,
.home-rzu-shell .vertical-tab .home-rzu-category-bar .nav-tabs > li.game-nav-item.is-active > a .nav-sub,
.home-rzu-shell .vertical-tab .home-rzu-category-bar .nav-tabs > li.game-nav-item.is-active > a i {
    color: #0d2348 !important;
}
}
@media screen and (max-width: 1024px) {
    .header-quick-nav {
        display: none !important;
    }
}

/* BN 換頁進度條：主色系金 */
.swiper-pagination-banner {
    --swiper-pagination-color: #d7b16a;
    --swiper-pagination-bullet-inactive-color: #d7b16a;
    --swiper-pagination-bullet-inactive-opacity: 0.35;
    --swiper-pagination-bullet-opacity: 1;
}

.swiper-pagination-banner .swiper-pagination-bullet {
    background: #d7b16a !important;
    opacity: 0.35 !important;
}

.swiper-pagination-banner .swiper-pagination-bullet-active {
    background: linear-gradient(135deg, #ddc38a 0%, #b48943 100%) !important;
    opacity: 1 !important;
    box-shadow: 0 0 8px rgba(215, 177, 106, 0.55);
}

/* PC 頂欄 LOGO 後方：VIP 等級徽章（對齊手機 nav-highlight-logo 圓形金框感） */
.header .navbar-L {
    gap: 12px;
}

.header-vip-badge-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 0;
    text-decoration: none;
}

.header-vip-badge {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    background: radial-gradient(circle at 35% 30%, #1d3d73 0%, #0b1833 62%, #071126 100%);
    border: 1px solid rgba(229, 213, 178, 0.82);
    box-shadow:
        0 0 0 1px rgba(12, 26, 52, 0.95) inset,
        0 2px 6px rgba(0, 0, 0, 0.28);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.header-vip-badge-link:hover .header-vip-badge,
.header-vip-badge.is-vip {
    filter: drop-shadow(0 0 5px rgba(248, 230, 184, 0.4));
}

.header-vip-badge-link:hover .header-vip-badge {
    transform: scale(1.06);
}