@charset "UTF-8";
/* 參考站配色：以 :root token 為主。元件樣式請寫在各自 css 並使用 var(--ref-*)，勿在此重複選擇器覆寫。 */

:root {
  --ref-primary: #003d79;
  --ref-primary-hover: #0056a3;
  --ref-secondary: #89c4f4;
  --ref-third: #3a506b;
  --ref-bg: #e9eff6;
  --ref-bg-warm: #fafbfc;
  --ref-surface: #ffffff;
  --ref-text: #363636;
  --ref-text-muted: #666666;
  --ref-border: #dddddd;
  /* 頁尾深藍夜色。原本是 #030302（帶綠純黑）往下漸到 #3a506b（濁灰藍），
     方向與重力感相反、#3a506b 也不在白藍金主色內。 */
  --ref-footer-start: #0f2740;
  --ref-footer-end: #081827;

  /* ══════════════════════════════════════════════════════════════
     語意化 token 層
     ──────────────────────────────────────────────────────────────
     命名一律描述「用途」而非「顏色」。新元件只准用這一層。

     為什麼要有這層：舊的 --color-w100 / w65 / w25 / w18 / w10（白色
     透明度）與 --color-b44（黑 44%）描述的是顏色不是用途，同一個變數
     在不同地方意思不同 —— --color-w100 有時指「主要文字」（淺色主題下
     該是深灰），有時指「深色元件上的白字」（該保持白）；--color-b44
     有時是遮罩（該留黑），有時被拿來當卡片陰影（該是藍調）。
     這是修 A 壞 B 的根源。那組 token 已 deprecated，勿用於新程式。
     ══════════════════════════════════════════════════════════════ */

  /* ── 表面 ── */
  --ref-surface-2: #f8fbfe;                    /* 次級表面：斑馬紋、淡底區塊 */
  --ref-surface-sunken: rgba(0, 61, 121, 0.05); /* 內凹：輸入框底、chip 底 */
  --ref-surface-dark: #0d2136;                 /* 深色元件：彈窗、VIP 卡 */
  --ref-surface-dark-2: #15304a;
  /* 分帶：連續同構區塊（首頁的遊戲區、清單型頁面）交錯鋪在白底上，
     讓相鄰區塊分得開。只做底色不做裝飾線。 */
  --ref-band: rgba(0, 61, 121, 0.06);
  --ref-band-line: rgba(0, 61, 121, 0.07);

  /* ── 毛玻璃彈窗（對齊登入／註冊窗口的質感）── */
  --ref-glass-bg: rgba(10, 27, 45, 0.74);
  --ref-glass-header: rgba(255, 255, 255, 0.07);
  --ref-glass-footer: rgba(255, 255, 255, 0.04);
  --ref-glass-border: rgba(255, 255, 255, 0.12);
  --ref-glass-blur: blur(20px) saturate(1.2);
  --ref-glass-shadow: 0 24px 60px rgba(0, 12, 28, 0.55);

  /* 淺底毛玻璃（固定頂欄用）：上面那組是深色玻璃，疊在白底頁面上會發灰發髒，
     所以另立一組白玻璃。飽和度拉高一點，底下捲過去的遊戲圖才不會被糊成灰。 */
  --ref-glass-light-bg: rgba(255, 255, 255, 0.78);
  --ref-glass-light-blur: blur(16px) saturate(1.6);
  --ref-glass-light-border: rgba(0, 61, 121, 0.12);

  /* ── 文字（含各種底色上的對比色）── */
  --ref-text-subtle: #6c7683;   /* 原 #8b939c 在白底只有 3.1 對比 */
  --ref-on-dark: #ffffff;                      /* 深色底上的文字 */
  --ref-on-dark-muted: rgba(255, 255, 255, 0.75);
  --ref-on-accent: #ffffff;                    /* 主色底上的文字 */
  --ref-on-gold: #003d79;                      /* 金色底上的文字 */

  /* ── 線 ── */
  --ref-border-strong: #c6d2df;
  --ref-border-dark: rgba(255, 255, 255, 0.14); /* 深色元件內的分隔線 */

  /* ── 主色的柔性變體 ── */
  --ref-primary-soft: rgba(0, 61, 121, 0.08);
  --ref-primary-softer: rgba(0, 61, 121, 0.045);

  /* ── 狀態色（皆為白底可讀）── */
  /* 這三色常配同色系的淡底徽章，用純白底的 4.5 反推會不夠；再壓深一階，
     讓「淡綠底綠字」「淡紅底紅字」也站得住。 */
  --ref-success: #14663f;
  --ref-warn: #8a4e00;
  --ref-danger: #bf2318;

  /* ── 層級（陰影）：白底一律藍調，勿用純黑 ──
     每一級都是兩層：近距離的細陰影負責描出卡片邊界，大而淡的遠距離陰影
     負責把卡片「撐離」底色。原本 elev-1 只有前者（1px/2px 模糊），
     白卡貼在近白底上等於沒有立體感，才會整頁看起來是平的。 */
  --ref-elev-1:
    0 1px 2px rgba(0, 61, 121, 0.06),
    0 6px 18px rgba(0, 61, 121, 0.06);
  --ref-elev-2:
    0 1px 3px rgba(0, 61, 121, 0.05),
    0 12px 30px rgba(0, 61, 121, 0.1);
  --ref-elev-3:
    0 2px 6px rgba(0, 61, 121, 0.07),
    0 24px 52px rgba(0, 61, 121, 0.16);

  /* ── 圓角級距 ── */
  --ref-r-sm: 8px;
  --ref-r-md: 12px;
  --ref-r-lg: 16px;
  --ref-r-pill: 999px;

  /* ── 間距級距 ── */
  --ref-sp-1: 4px;
  --ref-sp-2: 8px;
  --ref-sp-3: 12px;
  --ref-sp-4: 16px;
  --ref-sp-5: 24px;
  --ref-sp-6: 32px;

  /* Logo 金屬金（XHE | 鑫禾） */
  --ref-gold-hi: #f7e08f;
  --ref-gold: #d4a150;
  --ref-gold-mid: #c5a059;
  --ref-gold-deep: #7e5b23;
  --ref-gold-soft: rgba(212, 161, 80, 0.82);
  --ref-gold-line: rgba(212, 161, 80, 0.42);
  --ref-gold-fill: rgba(212, 161, 80, 0.12);
  --ref-gold-gradient: linear-gradient(
    135deg,
    #7e5b23 0%,
    #d4a150 38%,
    #f7e08f 52%,
    #c5a059 72%,
    #8e6e3e 100%
  );
  --ref-gold-bar: linear-gradient(
    90deg,
    #7e5b23 0%,
    #b69355 22%,
    #f7e08f 48%,
    #d4a150 72%,
    #8e6e3e 100%
  );

  --color-bg: var(--ref-bg);
  --color-nav: #ffffff;
  --color-btn: var(--ref-primary);
  --color-accent: var(--ref-primary);
  --color-accent-dark: #002752;
  --color-text: var(--ref-text);
  --color-text-muted: var(--ref-text-muted);
  --gradient-4: linear-gradient(180deg, var(--ref-primary-hover) 0%, var(--ref-primary) 100%);
  --texture-1: linear-gradient(
    315deg,
    transparent,
    transparent 18%,
    rgba(0, 61, 121, 0.035) 34%,
    transparent 0,
    rgba(0, 61, 121, 0.02) 56%,
    transparent 0,
    rgba(0, 61, 121, 0.03)
  );

  --lux-gold: var(--ref-gold);
  --lux-gold-soft: var(--ref-gold-soft);
  --lux-gold-line: var(--ref-gold-line);
  --lux-gold-fill: var(--ref-gold-fill);
  --lux-surface: var(--ref-surface);
  --lux-surface-2: #f1f1f1;
  --lux-bottom-nav-pill-shadow:
    0 2px 16px rgba(0, 61, 121, 0.1),
    0 8px 24px rgba(0, 61, 121, 0.06);
  --lux-bottom-nav-pill-shadow-over-footer:
    0 4px 20px rgba(0, 0, 0, 0.38),
    0 0 0 1px rgba(255, 255, 255, 0.08);
  --lux-bottom-nav-pill-bg: rgba(255, 255, 255, 0.94);
  --lux-bottom-nav-pill-border: rgba(0, 61, 121, 0.22);
  --lux-bottom-nav-muted: rgba(54, 54, 54, 0.45);
  --lux-bottom-nav-icon-muted: rgba(0, 61, 121, 0.55);
  --lux-bottom-nav-active-fill: rgba(0, 61, 121, 0.1);
  --lux-bottom-nav-active-glow: rgba(137, 196, 244, 0.24);
  --lux-bottom-nav-active-color: var(--ref-primary);
  --lux-bottom-nav-active-icon: var(--ref-primary);

  /* 舊名保留給既有元件，實際值統一指向語意層的 --ref-elev-* */
  --lux-shadow-card: var(--ref-elev-2);
  --lux-shadow-card-hover: var(--ref-elev-3);
  --lux-shadow-soft: var(--ref-elev-1);
}

body {
  color: var(--ref-text) !important;
  background: var(--ref-bg) !important;
}

/* 全站背景：金色賭場元素底圖（fixed，掛在 lux-layout 的 body::before 上）＋頁面底色遮罩。
   遮罩用 --ref-bg 同色不用純白：底圖是暖米金，冷色藍會混灰綠；同色遮罩把圖「溶進」頁底。
   上淺下深：頁面上半部露出背景最多（頂欄毛玻璃也吃這層），往下卡片愈密、露出愈少。
   opacity 整層淡化：白／同色遮罩對高對比金元素（777／輪盤）幾乎壓不下去，
   必須把整層 ::before 透明度降下來，圖才會真的變淡（底下是 body 的 --ref-bg）。
   要關背景：把 background-image 拿掉、opacity 回 1 即可。 */
body::before {
  background-color: var(--ref-bg) !important;
  background-image:
    linear-gradient(180deg, rgba(233, 239, 246, 0.42) 0%, rgba(233, 239, 246, 0.58) 100%),
    url('/public/web/v2/img/bg/site-gold-casino.webp?v=20260811perf2') !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  opacity: 0.38 !important;
}

body::after {
  opacity: 0 !important;
  background-image: none !important;
}

/* ── 頂部導航：白底 + 深字（對齊參考站主 nav） ── */
/* 固定頂欄走白玻璃。原本這裡是實心 #ffffff 並把 backdrop-filter 關成 none
   （淺色化時為了蓋掉 index_navbar.css 的黑色半透明底一併關掉的），
   結果內容捲過去時被一塊實心白擋住，沒有層次。 */
.header .tophd {
  background-color: var(--ref-glass-light-bg) !important;
  backdrop-filter: var(--ref-glass-light-blur) !important;
  -webkit-backdrop-filter: var(--ref-glass-light-blur) !important;
  border-bottom: 1px solid var(--ref-glass-light-border) !important;
  box-shadow: 0 4px 18px rgba(0, 61, 121, 0.1) !important;
}

/* 不支援 backdrop-filter 的瀏覽器：退回接近不透明的白，避免文字疊在遊戲圖上讀不到 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header .tophd {
    background-color: rgba(255, 255, 255, 0.96) !important;
  }
}

.navbar-L {
  color: var(--ref-text) !important;
}

/* 頂欄變半透明後，深色遊戲圖會透上來把有效底色壓暗，
   原本的 #666 在最暗的情況下只剩 3:1，所以頂欄的字改用主文字色。 */
.navbar-R .btn {
  color: var(--ref-text) !important;
}

.navbar-R .btn.red-btn,
.btn.red-btn {
  /* 起點原本是 --ref-secondary(#89c4f4)，白字壓在漸層上緣只有 1.9 對比。
     改由 --ref-primary-hover 起，整顆按鈕的白字都在 7 以上。 */
  background: linear-gradient(180deg, var(--ref-primary-hover) 0%, var(--ref-primary) 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(0, 61, 121, 0.35) !important;
  box-shadow: 0 6px 16px rgba(0, 61, 121, 0.28) !important;
  text-shadow: none !important;
}

.navbar-R .btn.red-btn:hover,
.btn.red-btn:hover {
  background: linear-gradient(180deg, #0f6ec4 0%, var(--ref-primary-hover) 100%) !important;
  border-color: rgba(0, 86, 163, 0.45) !important;
  color: #ffffff !important;
}

.profile-news-unread-badge {
  background: linear-gradient(180deg, var(--ref-secondary) 0%, var(--ref-primary) 100%) !important;
  box-shadow: 0 0 0 2px #fff, 0 2px 8px rgba(0, 61, 121, 0.35) !important;
}

.profile-news-link .bell:hover {
  border-color: rgba(0, 61, 121, 0.45) !important;
  color: var(--ref-primary) !important;
}

/* ── 首頁區塊標題（舊版左線標題；title-with-icon 由 home-games-hub.css） ── */
.index_tith2:not(.title-with-icon) {
  border-left-color: var(--ref-primary) !important;
}

.swiper > .index_tith2:not(.title-with-icon) > h2,
.mySwiper.content > .index_tith2:not(.title-with-icon) > h2 {
  color: var(--ref-primary) !important;
}

/* ── 遊戲輪播卡片邊框：深藍主框 + 金色點綴（對齊參考站區塊法） ── */
.mySwiper--hot {
  --card-b1: rgba(247, 224, 143, 0.9);
  --card-b2: rgba(212, 161, 80, 0.55);
  --card-b3: rgba(0, 61, 121, 0.55);
  --card-glow: rgba(212, 161, 80, 0.16);
}

.mySwiper--win {
  --card-b1: rgba(137, 196, 244, 0.9);
  --card-b2: rgba(0, 86, 163, 0.5);
  --card-b3: rgba(0, 61, 121, 0.48);
  --card-glow: rgba(0, 61, 121, 0.14);
}

.mySwiper--brand {
  --card-b1: rgba(0, 61, 121, 0.85);
  --card-b2: rgba(0, 39, 82, 0.7);
  --card-b3: rgba(212, 161, 80, 0.45);
  --card-glow: rgba(0, 61, 121, 0.18);
}

#Slot {
  --card-b1: rgba(150, 205, 255, 0.95);
  --card-b2: rgba(0, 86, 163, 0.55);
  --card-b3: rgba(0, 61, 121, 0.5);
  --card-glow: rgba(0, 86, 163, 0.18);
}

#Casino,
#Sport,
#Keno,
#Chess {
  --card-b1: rgba(137, 196, 244, 0.92);
  --card-b2: rgba(58, 80, 107, 0.52);
  --card-b3: rgba(0, 61, 121, 0.48);
  --card-glow: rgba(0, 61, 121, 0.16);
}

@media screen and (min-width: 768px) {
  .mySwiper.content > .swiper-button-prev,
  .mySwiper.content > .swiper-button-next {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(0, 61, 121, 0.28) !important;
    color: var(--ref-primary) !important;
    box-shadow: 0 2px 8px rgba(0, 61, 121, 0.12) !important;
  }

  .mySwiper.content > .swiper-button-prev:hover,
  .mySwiper.content > .swiper-button-next:hover {
    background: var(--ref-primary) !important;
    border-color: var(--ref-primary) !important;
    color: #fff !important;
  }
}

/* ── 側欄 / 分類列 ── */
.vertical-tab .nav-tabs {
  background: #ffffff !important;
  border: 1px solid var(--ref-border) !important;
  box-shadow: 0 4px 14px rgba(0, 61, 121, 0.08) !important;
}

.vertical-tab .nav-tabs > li {
  background: #f8fafc !important;
  box-shadow: none !important;
}

.vertical-tab .nav-tabs > li:not(.no-hover):hover,
.vertical-tab .nav-tabs > li.active {
  background: rgba(0, 61, 121, 0.08) !important;
  box-shadow: none !important;
}

.vertical-tab .nav-tabs li a,
.vertical-tab .nav-tabs li a.active {
  color: var(--ref-text) !important;
}

.vertical-tab .nav-tabs li a.active,
.vertical-tab .nav-tabs li.active a {
  color: var(--ref-primary) !important;
  background: rgba(0, 61, 121, 0.1) !important;
}

.lux-gamenav-sidebar--betsio .lux-dex-sidebar__section-title {
  color: var(--ref-text-muted, #666666) !important;
}

.lux-gamenav-sidebar--betsio .lux-dex-sidebar__link,
.lux-gamenav-sidebar--betsio .lux-gamenav-sidebar .lux-dex-sidebar__link {
  color: var(--ref-text, #363636) !important;
}

.lux-gamenav-sidebar--betsio .lux-dex-sidebar__link:hover,
.lux-gamenav-sidebar--betsio .lux-dex-sidebar__link.is-active {
  color: var(--ref-primary, #003d79) !important;
  background: rgba(0, 61, 121, 0.12) !important;
}

.lux-gamenav-sidebar--betsio .lux-dex-sidebar__link.is-active {
  box-shadow: inset 0 0 0 1px rgba(0, 61, 121, 0.16) !important;
}

.lux-gamenav-sidebar--betsio .lux-dex-sidebar__icon {
  color: var(--ref-primary, #003d79) !important;
}

.lux-gamenav-sidebar--betsio .lux-dex-sidebar__toggle {
  border-color: rgba(0, 61, 121, 0.18) !important;
  background: rgba(0, 61, 121, 0.06) !important;
  color: var(--ref-primary, #003d79) !important;
}

.lux-gamenav-sidebar--betsio .lux-dex-sidebar__toggle:hover {
  background: rgba(0, 61, 121, 0.12) !important;
  border-color: rgba(0, 61, 121, 0.28) !important;
  color: var(--ref-primary-hover, #0056a3) !important;
}

.lux-gamenav-sidebar--betsio .lux-dex-sidebar__link:hover .lux-dex-sidebar__icon,
.lux-gamenav-sidebar--betsio .lux-dex-sidebar__link.is-active .lux-dex-sidebar__icon {
  color: var(--ref-primary-hover, #0056a3) !important;
}

/* ── Footer：深藍夜色，越往下越深 ── */
.lux-footer {
  --lux-footer-bg: var(--ref-footer-start);
  --lux-footer-border: rgba(255, 255, 255, 0.1);
  --lux-footer-text: rgba(255, 255, 255, 0.72);
  --lux-footer-title: #ffffff;
  --lux-footer-accent: var(--ref-secondary);
  --lux-footer-purple: var(--ref-primary);
  background: linear-gradient(180deg, var(--ref-footer-start) 0%, var(--ref-footer-end) 100%) !important;
  /* 淺色頁面直接撞上深底太硬，用一條金線銜接。金色少數該出現的位置之一。 */
  border-top: 1px solid var(--ref-gold-line) !important;
}

/* 會員頁的頁尾被 .content_all 包住，會吃到下方那條連結色規則（12 個 :not
   權重極高），深藍字壓深藍底＝看不見。頁尾連結一律走自己的文字色。 */
.lux-footer .lux-footer__links a {
  color: var(--lux-footer-text) !important;
}

.lux-footer .lux-footer__links a:hover {
  color: var(--lux-footer-title) !important;
}

.lux-footer__btn--ghost:hover {
  background: rgba(0, 61, 121, 0.35) !important;
  border-color: rgba(137, 196, 244, 0.45) !important;
}

.lux-footer__btn--primary {
  color: #fff !important;
  background: linear-gradient(180deg, var(--ref-secondary) 0%, var(--ref-primary) 100%) !important;
  border-color: rgba(137, 196, 244, 0.5) !important;
  box-shadow: 0 6px 18px rgba(0, 61, 121, 0.28) !important;
}

.lux-footer__age {
  border-color: rgba(137, 196, 244, 0.55) !important;
  color: var(--ref-secondary) !important;
}

.lux-footer__col--about .lux-footer__responsible {
  border-color: rgba(137, 196, 244, 0.28) !important;
  background: rgba(0, 61, 121, 0.25) !important;
}

.vertical-tab--lux-sidebar .gamenav-top-tabs,
.lux-category-rail__bar {
  background: #ffffff !important;
  border-color: var(--ref-border) !important;
}

.lux-category-rail__chip.is-active {
  background: var(--ref-primary) !important;
  color: #fff !important;
}

.lux-category-rail__chip {
  color: var(--ref-text) !important;
  border-color: rgba(0, 61, 121, 0.2) !important;
}

.mySwiper.content .game-name h3,
.mySwiper.content .game-name h4 {
  color: #ffffff !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75);
}

/* ── 淺色主內容區：統一深字（避免舊版白字被吃掉） ── */
.content_all,
.main-col,
.tab-content,
.gamenav,
.profile_wrapper,
.all_all,
.profile_content_box {
  color: var(--ref-text);
}

/* 通用連結色；自管 hover/active 字色的元件請加入 :not(...)，避免蓋掉深藍底金字等狀態 */
.content_all a:not(.btn):not(.red-btn):not(.lux-footer__btn):not(.washcode-expand-btn):not(.home-casino-filter__link):not(.lux-gamenav-link):not(.lux-dex-sidebar__link):not(.lux-category-rail__chip):not(.lux-category-rail__item):not(.gift):not(.x-chip):not(.x-btn):not(.main-btn):not(.sm-navitem):not(.auth-forget-link):not(.auth-switch-link):not(.auth-terms-link):not(.blog-pg) {
  color: var(--ref-primary-hover);
}

h3.nav-sub,
.vertical-tab .nav-tabs li a,
.lux-dex-sidebar__label {
  color: var(--ref-text) !important;
}

.vertical-tab .nav-tabs li a.active,
.vertical-tab .nav-tabs li.active a,
.lux-dex-sidebar__link.is-active {
  color: var(--ref-primary) !important;
}

/* ── Loading：跟首頁同一張底圖（site-gold-casino + 同色遮罩 + 同 opacity）
   #loading 本身鋪 --ref-bg；::before 複製 body::before 的圖層，避免改 opacity
   連 logo／進度一起淡掉。內層 .loading-page 透明讓底圖露出。 */
#loading {
  background: var(--ref-bg, #e9eff6) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#loading::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--ref-bg);
  background-image:
    linear-gradient(180deg, rgba(233, 239, 246, 0.42) 0%, rgba(233, 239, 246, 0.58) 100%),
    url('/public/web/v2/img/bg/site-gold-casino.webp?v=20260811perf2');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  opacity: 0.38;
}

.loading-page {
  background: transparent !important;
  position: relative;
  z-index: 1;
}

.loading-page .counter span {
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  font-variant-numeric: tabular-nums !important;
  color: rgba(0, 61, 121, 0.72) !important;
  line-height: 1 !important;
}

/* ── 深色區塊保留白字 token ── */
.lux-footer,
.lux-footer *,
.auth-modal,
.auth-modal-content,
/* index_content.css 把 .modal-content 全域設成深底，內容也都是為深底寫的，
   所以整個 .modal-content 子樹都要吃白字 token；只列 .modal-style-2 的話，
   profile 那 11 個 bootstrap 彈窗會拿到淺色主題的深灰字壓在深底上。 */
.modal-content,
.modal-content *,
.modal-login,
/* 這裡原本寫的是 .zero_modal_body，但實際 class 是 .zeromodal-container，
   名稱對不上等於整條失效，導致 zeroModal 內文字吃到淺色主題的深灰值。 */
.zeromodal-container,
.zeromodal-container *,
.red-envelope-overlay,
.red-envelope-modal,
#btmnav,
.lux-bottom-nav {
  --color-w100: #ffffff;
  --color-w65: rgba(255, 255, 255, 0.78);
  /* bootstrap 在 :root 寫 --bs-body-color: var(--color-w65)，變數在 :root 就
     解析完了，深色群組的覆寫吃不到，導致彈窗裡的 .btn 是深灰字壓深底。 */
  --bs-body-color: rgba(255, 255, 255, 0.78);
  --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.1);
}

.btn.red-btn,
.navbar-R .btn.red-btn,
.lux-footer__btn--primary {
  color: #ffffff !important;
}

.rtp-rank-badge.top-1 {
  color: #3a2a0c !important;
}

.rtp-rank-badge.top-2 {
  color: #333333 !important;
}

.rtp-rank-badge.top-3 {
  color: #2a1608 !important;
}

/* ── 其餘頁面 CSS 殘留覆蓋 ── */
.hot-providers-card,
.blog-card,
.activity-box,
.help-box {
  color: var(--ref-text);
}

.sticky-btn,
.mqm-fab {
  --mqm-purple: #003d79;
  --mqm-green: #0056a3;
}

/* ══════════════════════════════════════════════════════════════
   試用：白框 → 淺底毛玻璃（2026-08-11）
   ──────────────────────────────────────────────────────────────
   目的：讓背景圖能透過首頁大白框、會員卡片、blog／競猜等白面板。
   只打「最外層白框」；卡片內 header／次級底（--ref-surface-2）不加 blur，
   避免巢狀玻璃糊成灰。

   不滿意整段刪掉即可（含下方 @supports）。
   透明度刻意比頂欄（.78）低一點，才看得到透出來的底圖。
   ══════════════════════════════════════════════════════════════ */
:root {
  --ref-glass-card-bg: rgba(255, 255, 255, 0.58);
  --ref-glass-card-blur: blur(18px) saturate(1.55);
  --ref-glass-card-border: rgba(0, 61, 121, 0.1);
}

.main-home-panel,
.x-card,
.point-section,
#profile_model,
.lux-dex-sidebar__panel,
.blog-card,
.blog-article,
.blog-panel,
.blog-empty,
.blog-postnav-item,
.sg .glass,
.aboutus-section,
.aboutus-feature,
.aboutus-trust {
  background: var(--ref-glass-card-bg) !important;
  background-color: var(--ref-glass-card-bg) !important;
  -webkit-backdrop-filter: var(--ref-glass-card-blur) !important;
  backdrop-filter: var(--ref-glass-card-blur) !important;
  border-color: var(--ref-glass-card-border) !important;
}

/* ── main-home-panel 比照側欄 ──
   側欄看得出玻璃，是因為幾乎整塊都是「空底＋字」；
   主欄雖然也套了同樣 token，但裡面 .washcode-section 又鋪實心白、
   分帶 ::before 再蓋一層，玻璃只剩四周細縫。
   把內層實心白拿掉，讓主欄本身的毛玻璃露出來（遊戲卡／圖本身仍實心）。 */
.main-home-panel {
  box-shadow: 0 8px 24px rgba(0, 61, 121, 0.08) !important;
}

.main-home-panel .washcode-section {
  background: transparent !important;
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.main-home-panel .home-games-hub .swiper.mySwiper.content:nth-of-type(odd)::before {
  background: rgba(0, 61, 121, 0.035) !important;
}

/* x-card 原本 overflow:hidden 是為了圓角裁切 children；
   部分 WebKit 在 overflow:hidden + backdrop-filter 同元素上會糊不起來，改 clip。
   側欄 panel 需要直向捲動，改 overflow-x: clip、保留 overflow-y: auto。 */
.x-card {
  overflow: clip;
}

.lux-dex-sidebar__panel {
  overflow-x: clip;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .main-home-panel,
  .x-card,
  .point-section,
  #profile_model,
  .lux-dex-sidebar__panel,
  .blog-card,
  .blog-article,
  .blog-panel,
  .blog-empty,
  .blog-postnav-item,
  .sg .glass,
  .aboutus-section,
  .aboutus-feature,
  .aboutus-trust {
    background: rgba(255, 255, 255, 0.96) !important;
    background-color: rgba(255, 255, 255, 0.96) !important;
  }
}