/*!
 * core-site.css — 由 scripts/build-css.js 自動產生，請勿直接編輯
 * 來源（依序即 cascade）: all.css + lux-layout-v2.css + lux-footer.css + index_navbar.css + components/navbar.css + index_content.css
 * 改樣式請改原始檔後重跑：node scripts/build-css.js
 */

/* ===== all.css ===== */
@charset "UTF-8";
/* 全站 reset / legacy token 基底。主題色與覆寫以 theme-ref-ofa377.css（最後載入）為準。 */

/* CSS Document */
/* allpage */
/* all */
:root {
    --type-a: linear-gradient(to bottom, #161b24 0%, #141a22 50%, #1a202b 50%, #141a22 51%, #161b24 100%);
    --texture-1: linear-gradient(315deg, transparent, transparent 14%, rgba(137, 196, 244, 0.22) 34%, transparent 0, rgba(0, 61, 121, 0.08) 56%, transparent 0, rgba(137, 196, 244, 0.14));
    --gradient-4: linear-gradient(180deg, #89c4f4, #003d79);
    --border: linear-gradient(to bottom, #e4f1fa 0%, #d4e9f6 14%, #89c4f4 28%, #3a506b 42%, #003d79 63%, #0056a3 82%, #89c4f4 100%);
    --box-shadow-1: 0 2px 4px 0 rgba(0, 61, 121, 0.12);
    --color-bg: #f4f7f9;
    --color-nav: #ffffff;
    --color-btn: #003d79;
    --color-accent: #003d79;
    --color-accent-dark: #002752;
    --color-text: #363636;
    --color-text-muted: #666666;
    --color-w100: #363636;
    /* 原本帶 78% alpha，落在白底上只有 3.56 對比，全站的次要文字（表格內容、
       欄位標籤、說明文）都偏淡。改實色 #666666 後白底 5.72、淡藍底約 4.9。 */
    --color-w65: #666666;
    --color-w25: #36363640;
    --color-w23: #3636363b;
    --color-w18: #3636362e;
    --color-w10: #003d791a;
    --color-on-dark: #ffffff;
    --color-on-dark-65: #ffffffc7;
    --color-b19: #00000030;
    --color-b44: #00000070;
    --color-r19: #003d7930;
    --color-r67: #003d79ab;
    /* FA7 預設固定寬 1.25em；本站版面沿用 v6 自動寬 */
    --fa-width: auto;
}

/* option test */
.form-control option {
  background-color: #222; /* 深色背景 */
  color: #fff;            /* 白色文字 */
  border: 1px solid #555; /* 邊框顏色可自行調整 */
}

#Slot,#Casino,#Sport,#Keno,#Chess {
  scroll-margin-top: 72px;
}

*:hover {
    transition: 0.3s;
}

/* body.no-scroll {
    overflow: hidden; 
  } */

/* 桌機／預設：正常文件流捲動，不鎖死高度 → 底部絕不會被切 */
html {
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    min-height: 100svh;
    caret-color: auto;
    overscroll-behavior: contain; /* ✅ 阻止滾動穿透 + 橡皮筋 */
    margin: 0;
    font-family: 'Noto Sans TC', sans-serif;
    box-sizing: border-box;
    letter-spacing: 0.05rem;
    background-color: var(--color-bg) !important;
    color: var(--color-text);
}

/* 手機：固定外框（app-shell）— html 鎖成一個螢幕高、自己不滾，
   body 當唯一滾動容器，讓固定的 header/#btmnav 穩定不動、只有中間內容滾動 */
@media (max-width: 767px) {
    html {
        height: 100vh;      /* 舊瀏覽器 fallback */
        height: 100dvh;     /* 動態視窗高度：工具列收合時自動貼合 */
        overflow: hidden;
    }

    body {
        height: 100vh;
        height: 100dvh;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch; /* ✅ 手機正常滑動但不彈性 */
        touch-action: pan-y; /* ✅ 只允許垂直拖動 */
    }
}

/* 移除非輸入類元件的焦點邊框 */
*:not(input):not(textarea):not([contenteditable]) {
    outline: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

::-webkit-scrollbar {
    display: none;
    /*隱藏滾輪*/
}

/* 移除自動帶入樣式 */
input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
    box-shadow: 0 0 0px 1000px #ffffff inset !important;
    background-color: #ffffff !important;
    -webkit-text-fill-color: #363636 !important;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

input {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

#loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--color-bg, #f4f7f9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    user-select: none;
    /* 無法選取 */
    pointer-events: none;
    /* 點擊事件穿透遮罩 */
}

#loadOut {
    display: none;
}

.loading-page {
    background: var(--color-bg, #f4f7f9);
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loading-page .counter {
    position: relative;
    width: 200px;
    text-align: center;
}

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

.loading-page .counter hr {
    background: var(--color-btn);
    border: none;
    height: 1px;
    margin: 12px 0 0;
}

.counter>.logo-size {
    padding: 0;
    margin: 0 auto;
    width: 100%;
    height: auto;
    max-width: 180px;
}

@media (max-width: 767px) {
    .counter>.logo-size {
        max-width: 120px;
    }
}

div {
    box-sizing: border-box;
}

ul {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

li {
    list-style: none;
}

a {
    text-decoration-line: none;
    cursor: pointer;
}

button {
    border: none;
    padding: 0;
}

input::placeholder {
    color: var(--color-w65);
}

.hide {
    display: none;
}

.block {
    display: block;
}

.disabled {
    cursor: not-allowed;
}

.red {
    color: var(--color-btn);
}

.white {
    color: var(--color-w100);
}

.green {
    color: #00d500;
}

.margin-T8 {
    margin-top: 8px;
}

.margin-B16 {
    margin-bottom: 16px;
}

.margin-right {
    margin-right: 4px;
}

.btn {
    width: auto;
    height: 40px;
    cursor: pointer;
    background-color: transparent;
    padding: 0 0.8rem;
}

.highlight-t {
    font-size: larger;
    font-weight: bold;
}

.promo-popup td,
.promo-popup th {
    padding: 5px;
}



/* 登入／註冊彈窗為深色玻璃卡片，欄位本身透明。
   --color-nav 在本站是白色，不能拿來當自動填入的 inset 底色（會變白底白字）。
   改讓 Chrome 的填入底色只裁切到文字，欄位維持透明。 */
#registerModal2 input:-webkit-autofill,
#registerModal2 input:-webkit-autofill:hover,
#registerModal2 input:-webkit-autofill:focus,
#registerModal2 input:-webkit-autofill:active,
#loginModal2 input:-webkit-autofill,
#loginModal2 input:-webkit-autofill:hover,
#loginModal2 input:-webkit-autofill:focus,
#loginModal2 input:-webkit-autofill:active {
    -webkit-background-clip: text !important;
    background-clip: text !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    background-color: transparent !important;
    -webkit-text-fill-color: #fff !important;
    caret-color: #fff;
    border-color: #777 !important;
    transition: background-color 600000s 0s;
}

@media screen and (max-width:767px) {
    html {
        font-size: 15px;
    }
}

/* ===== lux-layout-v2.css ===== */
/* Optimized from lux-layout-v2.css — comments/dead-code removed; behavior unchanged */
@charset "UTF-8";

:root {
  --lux-radius: 10px;
  --lux-header-h: 64px;
  --lux-sidebar-ratio: 18%;
  --lux-sidebar-min-w: 220px;
  --lux-sidebar-max-w: 268px;
  --lux-sidebar-gap: 32px;
  --lux-sidebar-collapsed-w: 64px;
  --lux-dex-rail-w: var(--lux-sidebar-max-w);
  --lux-dex-rail-expanded: var(--lux-sidebar-max-w);
  --lux-dex-rail-gutter: 0px;
  --lux-mqm-safe-strip: 80px;
  --lux-main-max-w: none;
  --lux-content-pad-x: clamp(10px, 2vw, 28px);
  --lux-content-max-w: min(100%, 1480px);
}

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

/* ── 純 CSS 星雲迷霧背景（不放圖：radial-gradient 霧光 + 內嵌 SVG 雜訊霧粒） ── */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-color: #f4f7f9;
  background-image:
    linear-gradient(135deg, rgb(255, 255, 255), rgb(255, 255, 255) 20%, rgb(254, 250, 249) 20%, rgb(254, 250, 249) 30%, rgb(255, 255, 255) 30%, rgb(255, 255, 255) 32%, rgb(254, 250, 249) 32%, rgb(254, 250, 249) 33%, rgb(255, 255, 255) 33%, rgb(255, 255, 255) 60%, rgb(254, 250, 249) 60%, rgb(254, 250, 249) 75%, rgb(255, 246, 247) 75%);
  background-repeat: no-repeat;
}

body::after {
  content: "";
  opacity: 0;
  background-image: none;
}

/* 手機：低規格裝置優先。關掉動畫與圖層提升，只留一層幾乎看不見的靜態淡霧，
   避免大尺寸模糊合成圖層長駐 GPU 記憶體造成卡頓。 */
@media (max-width: 767px) {
  body::after {
    opacity: 0;
    background-image: none;
  }
}

html {
  scroll-padding-top: calc(var(--lux-header-h) + 12px);
}

.header .tophd {
  border-bottom: 1px solid var(--lux-gold-line) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  padding: 0.35rem 0 !important;
  backdrop-filter: blur(12px);
}

.content_all {
  padding-top: var(--lux-header-h) !important;
  padding-left: var(--lux-content-pad-x) !important;
  padding-right: var(--lux-content-pad-x) !important;
  max-width: var(--lux-content-max-w) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.navbar-R .btn {
  border-radius: 6px !important;
  padding: 0.4rem 0.95rem !important;
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
}

.btn.red-btn {
  background:
    radial-gradient(120% 140% at 10% 0%, rgba(137, 196, 244, 0.32) 0%, rgba(137, 196, 244, 0) 46%),
    linear-gradient(135deg, rgba(0, 86, 163, 0.99) 0%, rgba(0, 61, 121, 0.99) 44%, rgba(137, 196, 244, 0.98) 100%) !important;
  color: #f9fbff !important;
  border: 1px solid rgba(137, 196, 244, 0.72) !important;
  box-shadow:
    0 14px 30px rgba(0, 40, 90, 0.50),
    0 0 14px rgba(0, 61, 121, 0.42),
    0 0 22px rgba(137, 196, 244, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.34),
    inset 0 -10px 18px rgba(30, 10, 84, 0.38) !important;
  text-shadow: 0 1px 2px rgba(13, 8, 26, 0.72), 0 0 6px rgba(255, 255, 255, 0.18);
  transform: translateY(0);
  transition: transform 0.22s ease, box-shadow 0.24s ease, filter 0.24s ease, border-color 0.24s ease;
}

.btn.red-btn:hover {
  background:
    radial-gradient(130% 150% at 8% 0%, rgba(137, 196, 244, 0.38) 0%, rgba(137, 196, 244, 0) 48%),
    linear-gradient(135deg, rgba(137, 196, 244, 0.99) 0%, rgba(0, 61, 121, 0.99) 42%, rgba(137, 196, 244, 0.99) 100%) !important;
  color: #fff !important;
  border-color: rgba(137, 196, 244, 0.9) !important;
  box-shadow:
    0 18px 34px rgba(0, 40, 90, 0.35),
    0 0 24px rgba(0, 61, 121, 0.32),
    0 0 38px rgba(137, 196, 244, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
  transform: translateY(-2px) scale(1.01);
  filter: saturate(1.16) brightness(1.03);
}

.btn.red-btn:active {
  transform: translateY(1px) scale(0.985);
  box-shadow:
    0 8px 14px rgba(40, 16, 88, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

.normal-btn {
  border-radius: 6px !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}

.gamenav {
  margin-bottom: 28px !important;
}

.vertical-tab {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  height: auto !important;
}

.vertical-tab .nav-tabs {
  order: -1;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  aspect-ratio: unset !important;
  flex: none !important;
  padding: 8px 4px !important;
  margin: 0 0 14px 0 !important;
  gap: 6px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  background: #ffffffB2 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: var(--lux-radius) !important;
  box-shadow: none !important;
  position: sticky;
  top: calc(var(--lux-header-h) - 4px);
  z-index: 8;
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
}

.vertical-tab .nav-tabs::-webkit-scrollbar {
  display: none;
}

.vertical-tab .nav-tabs > li {
  flex: 0 0 auto;
  position: relative;
  padding: 10px 15px;
  margin: 5px 0;
  border-radius: 10px;
  border: none;
  border-left: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 6px 14px rgba(0,0,0,0.24);
  /* background:
    radial-gradient(120% 140% at 10% 0%, rgba(137, 196, 244, 0.12) 0%, rgba(137, 196, 244, 0) 52%),
    linear-gradient(155deg, rgba(35, 44, 61, 0.42) 0%, rgba(24, 31, 45, 0.46) 54%, rgba(17, 23, 34, 0.5) 100%) !important; */
  /* backdrop-filter: blur(8px) saturate(1.06); */
  /* -webkit-backdrop-filter: blur(8px) saturate(1.06); */
  transition: transform .24s ease, box-shadow .24s ease, opacity .24s ease, border-color .24s ease, filter .24s ease;
  opacity: 0.96;
}

/* .vertical-tab .nav-tabs > li:not(.no-hover):hover {
  transform: translateX(5px) translateY(-1px);
  filter: saturate(1.1);
} */

/* .vertical-tab .nav-tabs li a {
  padding: 8px 14px !important;
  white-space: nowrap;
  border-radius: 6px;
} */

.vertical-tab .nav-tabs li a.active,
.vertical-tab .nav-tabs li.active a {
  color: var(--lux-gold) !important;
  background: var(--lux-gold-fill) !important;
}

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

.vertical-tab .nav-tabs > li.nav-divider {
  flex: 0 0 1px !important;
  background: rgba(255, 255, 255, 0.12) !important;
  align-self: stretch;
  border-radius: 1px !important;
  margin: 4px 2px !important;
  padding: 0 !important;
  pointer-events: none;
  box-shadow: none !important;
  opacity: 1;
}

h3.nav-sub {
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: center;
  gap: 6px;
  margin: 0;
}

h3.nav-sub > i {
  font-size: 0.8rem;
  opacity: 0.85;
}

.vertical-tab .tab-content {
  display: block !important;
  width: 100% !important;
  flex: 1 1 auto !important;
  aspect-ratio: unset !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  border-radius: 0 !important;
}

.vertical-tab .tab-content > .main-col {
  --lux-main-block-gap: 24px;
  display: flex;
  flex-direction: column;
  gap: var(--lux-main-block-gap);
  min-width: 0;
  width: 100%;
  max-width: var(--lux-main-max-w, none);
}

/* 區塊間距只由 gap 控制，避免 margin/padding 疊加不一致 */
.vertical-tab .tab-content > .main-col > .home-banner-split,
.vertical-tab .tab-content > .main-col > .mod-ga-slide,
.vertical-tab .tab-content > .main-col > .main-home-stack,
.vertical-tab .tab-content > .main-col .main-home-stack > .marquee-container,
.vertical-tab .tab-content > .main-col .main-home-panel > .home-casino-filter,
.vertical-tab .tab-content > .main-col .main-home-panel > .rtp-rank-section,
.vertical-tab .tab-content > .main-col .main-home-panel > .washcode-section,
.vertical-tab .tab-content > .main-col .main-home-panel > .home-games-hub,
.vertical-tab .tab-content > .main-col .main-home-panel > .hot-providers-section,
.vertical-tab .tab-content > .main-col .main-home-panel > .hot-providers-brands {
  margin: 0 !important;
}

/* index_content 的 .swiper { margin-bottom: 32px } 不作用於主欄頂層與巢狀輪播 */
.vertical-tab .tab-content > .main-col > .swiper,
.vertical-tab .tab-content > .main-col .swiper {
  margin-bottom: 0 !important;
}

/* 公告列 + 主內容大區塊：彼此緊連，對外仍吃 main-col gap */
.main-home-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  width: 100%;
}

.main-home-panel {
  --lux-main-panel-gap: 18px;
  display: flex;
  flex-direction: column;
  gap: var(--lux-main-panel-gap);
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 14px 12px 18px;
  background: var(--ref-surface, #ffffff);
  border: 1px solid rgba(0, 61, 121, 0.1);
  border-top: 0;
  border-radius: 0 0 14px 14px;
  box-shadow:
    0 8px 24px rgba(0, 61, 121, 0.08),
    0 1px 3px rgba(15, 23, 42, 0.04);
}

@media screen and (min-width: 768px) {
  .main-home-panel {
    --lux-main-panel-gap: 22px;
    padding: 16px 14px 22px;
    border-radius: 0 0 16px 16px;
  }
}

.main-col .main-home-stack > .sm-side-marquee {
  flex-shrink: 0;
}

/* 二層小 Banner（mod-ga-slide）— 9top 同款橫向捲動 */
.main-col > .mod-ga-slide {
  flex-shrink: 0;
  margin: 0 !important;
  padding: 0 2px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.main-col > .mod-ga-slide::-webkit-scrollbar {
  display: none;
}

.main-col > .mod-ga-slide .mod-ga-slide__track {
  gap: 10px;
}

.main-col > .mod-ga-slide .mod-ga-slide__item a {
  display: block;
  line-height: 0;
}

.main-col > .mod-ga-slide .mod-ga-slide__item img {
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(8, 6, 14, 0.28);
}

@media screen and (min-width: 768px) {
  .main-col > .mod-ga-slide .mod-ga-slide__item {
    flex: 0 0 calc(50% - 5px);
  }
}

.main-col .main-home-panel > .washcode-section {
  margin: 0;
}

@media screen and (min-width: 768px) {
  .main-col .main-home-panel > .rtp-rank-section {
    flex-direction: column;
    align-items: stretch;
    margin: 0;
  }

  .main-col .main-home-panel > .rtp-rank-section .rtp-rank-title {
    width: auto;
    flex-direction: column;
    margin-bottom: 0;
  }

  .main-col .main-home-panel > .rtp-rank-section .rtp-slider-wrap {
    display: block !important;
    width: 100%;
  }

  .main-col .main-home-panel > .rtp-rank-section .rtp-slider-track {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: visible;
    max-height: none;
    gap: 16px;
  }

  .main-col .main-home-panel > .rtp-rank-section .rtp-mobile-btn {
    display: none !important;
  }
}

.home-banner-split {
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  margin-bottom: 0 !important;
}

.home-banner-split .swiper-banner {
  margin-bottom: 0 !important;
  box-shadow: none !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

.swiper-slide img {
  border-radius: 8px !important;
  box-shadow: none !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: cover;
}

.img-item > img.h5BN {
  display: none !important;
}
.img-item > img.pcBN {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

.rtp-mobile-btn {
  display: none;
}

.index_tith2:not(.title-with-icon) {
  padding-left: 10px !important;
  border-left: 2px solid var(--lux-gold-line) !important;
  margin: 18px 0 10px !important;
}

.swiper > .index_tith2:not(.title-with-icon) > h2 {
  color: var(--ref-primary, #003d79) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
}

.swiper > .index_tith2:not(.title-with-icon) > h2::after {
  content: none;
}

/* 公告跑馬燈 — 海军蓝条 + 白字（子元素與 RWD 巢狀於此） */
.main-col .main-home-stack > .sm-side-marquee.marquee-container {
  flex-shrink: 0;
  background-color: var(--ref-primary, #003d79);
  background-image: url("/public/web/v2/img/ui/marquee-bg2.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border: none;
  border-radius: 6px 6px 0 0;
  box-shadow: none;
  backdrop-filter: none;
  margin: 0;
  padding: 8px 12px;
  gap: 12px;

  & i.fa-cards,
  & svg.fa-cards {
    color: #fff;
    font-size: 14px;
    margin-right: 0;
    flex-shrink: 0;

    @media screen and (min-width: 768px) {
      font-size: 16px;
    }
  }

  & .marquee {
    flex: 1 1 auto;
    min-width: 0;
    -webkit-mask-image: linear-gradient(
      to right,
      #000 0,
      #000 calc(100% - 48px),
      transparent 100%
    );
    mask-image: linear-gradient(
      to right,
      #000 0,
      #000 calc(100% - 48px),
      transparent 100%
    );
  }

  & .marquee-content li {
    margin-right: 28px;

    @media screen and (min-width: 768px) {
      margin-right: 32px;
    }
  }

  & .marquee-content a {
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
    transition: color 0.18s ease;

    @media screen and (min-width: 768px) {
      font-size: 16px;
      line-height: 24px;
    }

    &:hover {
      color: #fff;
    }

    &:hover .announcement-date {
      color: rgba(255, 255, 255, 0.72);
    }

    &:hover .announcement-text {
      color: #fff;
    }
  }

  & .announcement-date {
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    color: rgba(255, 255, 255, 0.5);
    margin-right: 8px;

    @media screen and (min-width: 768px) {
      font-size: 16px;
      line-height: 24px;
    }
  }

  & .announcement-text {
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
    color: rgba(255, 255, 255, 0.92);

    @media screen and (min-width: 768px) {
      font-size: 16px;
      line-height: 24px;
    }
  }
}

.mySwiper.content {
  margin-bottom: 8px;
  padding: 0 2px 12px;
  --lux-swiper-title-mt: 14px;
  --lux-swiper-title-row-h: 38px;
  --lux-swiper-nav-size: 28px;
}

@media screen and (min-width: 768px) {
  .mySwiper.content {
    --lux-swiper-title-mt: 18px;
    --lux-swiper-title-row-h: 42px;
  }
}

/* 桌機：類別標題與輪播箭頭同一列（標題左、箭頭右） */
@media screen and (min-width: 768px) {
  .mySwiper.content,
  .swiper-hot-providers.content {
    position: relative;
  }

  .mySwiper.content > .index_tith2:not(.title-with-icon),
  .swiper-hot-providers.content > .index_tith2:not(.title-with-icon),
  .swiper-hot-providers.content > .hp-title-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: 42px;
    margin: 18px 0 12px !important;
    padding-right: 72px;
    padding-left: 10px !important;
    box-sizing: border-box;
  }

  .mySwiper.content > .index_tith2:not(.title-with-icon) > h2,
  .swiper-hot-providers.content > .index_tith2:not(.title-with-icon) > h2,
  .swiper-hot-providers.content > .hp-title-row > h2 {
    margin: 0 !important;
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
  }

  .mySwiper.content > .swiper-button-prev,
  .mySwiper.content > .swiper-button-next,
  .swiper-hot-providers.content > .swiper-button-prev,
  .swiper-hot-providers.content > .swiper-button-next {
    position: absolute;
    top: calc(var(--lux-swiper-title-mt) + (var(--lux-swiper-title-row-h) - var(--lux-swiper-nav-size)) / 2);
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    left: auto !important;
    right: auto;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(0, 61, 121, 0.42);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 14px rgba(8, 6, 14, 0.35);
    color: #89c4f4 !important;
    transition:
      background 0.2s ease,
      border-color 0.2s ease,
      color 0.2s ease,
      box-shadow 0.2s ease;
  }

  .mySwiper.content > .swiper-button-next,
  .swiper-hot-providers.content > .swiper-button-next {
    right: 2px;
  }

  .mySwiper.content > .swiper-button-prev,
  .swiper-hot-providers.content > .swiper-button-prev {
    right: 34px;
  }

  .mySwiper.content > .swiper-button-prev::after,
  .mySwiper.content > .swiper-button-next::after,
  .swiper-hot-providers.content > .swiper-button-prev::after,
  .swiper-hot-providers.content > .swiper-button-next::after {
    position: static;
    transform: none;
    font-size: 9px;
    font-weight: 700;
    color: inherit;
  }

  .mySwiper.content > .swiper-button-prev:hover,
  .mySwiper.content > .swiper-button-next:hover,
  .swiper-hot-providers.content > .swiper-button-prev:hover,
  .swiper-hot-providers.content > .swiper-button-next:hover {
    background:
      radial-gradient(120% 140% at 20% 0%, rgba(137, 196, 244, 0.2) 0%, transparent 55%),
      rgba(0, 61, 121, 0.72);
    border-color: rgba(137, 196, 244, 0.5);
    color: #0056a3 !important;
    box-shadow: 0 6px 18px rgba(0, 40, 90, 0.28);
  }

  .mySwiper.content > .swiper-button-prev.swiper-button-disabled,
  .mySwiper.content > .swiper-button-next.swiper-button-disabled,
  .swiper-hot-providers.content > .swiper-button-prev.swiper-button-disabled,
  .swiper-hot-providers.content > .swiper-button-next.swiper-button-disabled {
    opacity: 0.32 !important;
    pointer-events: none !important;
    border-color: rgba(0, 61, 121, 0.2);
    color: rgba(137, 196, 244, 0.45) !important;
  }
}

@media screen and (max-width: 767px) {
  .mySwiper.content,
  .swiper-hot-providers.content {
    position: relative;
  }

  .mySwiper.content > .index_tith2:not(.title-with-icon),
  .swiper-hot-providers.content > .index_tith2:not(.title-with-icon),
  .swiper-hot-providers.content > .hp-title-row {
    display: flex;
    align-items: center;
    min-height: 38px;
    margin: 14px 0 10px !important;
    padding-right: 72px !important;
    padding-left: 10px !important;
    box-sizing: border-box;
  }

  .mySwiper.content > .index_tith2.title-with-icon > h2,
  .mySwiper.content > .index_tith2:not(.title-with-icon) > h2,
  .swiper-hot-providers.content > .index_tith2:not(.title-with-icon) > h2,
  .swiper-hot-providers.content > .hp-title-row > h2 {
    margin: 0 !important;
    flex: 1 1 auto;
    min-width: 0;
  }

  .mySwiper.content > .swiper-button-prev,
  .mySwiper.content > .swiper-button-next,
  .swiper-hot-providers.content > .swiper-button-prev,
  .swiper-hot-providers.content > .swiper-button-next {
    position: absolute;
    top: calc(var(--lux-swiper-title-mt) + (var(--lux-swiper-title-row-h) - var(--lux-swiper-nav-size)) / 2);
    width: 28px;
    height: 28px;
    margin: 0;
    padding: 0;
    left: auto !important;
    right: auto;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(0, 61, 121, 0.42);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 14px rgba(8, 6, 14, 0.35);
    color: #89c4f4 !important;
    transition:
      opacity 0.12s ease,
      border-color 0.12s ease,
      color 0.12s ease,
      background 0.18s ease,
      box-shadow 0.18s ease;
  }

  .mySwiper.content > .swiper-button-next,
  .swiper-hot-providers.content > .swiper-button-next {
    right: 2px;
  }

  .mySwiper.content > .swiper-button-prev,
  .swiper-hot-providers.content > .swiper-button-prev {
    right: 34px;
  }

  .mySwiper.content > .swiper-button-prev::after,
  .mySwiper.content > .swiper-button-next::after,
  .swiper-hot-providers.content > .swiper-button-prev::after,
  .swiper-hot-providers.content > .swiper-button-next::after {
    position: static;
    transform: none;
    font-size: 9px;
    font-weight: 700;
    color: inherit;
  }

  .mySwiper.content > .swiper-button-prev.swiper-button-disabled,
  .mySwiper.content > .swiper-button-next.swiper-button-disabled,
  .swiper-hot-providers.content > .swiper-button-prev.swiper-button-disabled,
  .swiper-hot-providers.content > .swiper-button-next.swiper-button-disabled {
    opacity: 0.32 !important;
    pointer-events: none !important;
    border-color: rgba(0, 61, 121, 0.2) !important;
    color: rgba(137, 196, 244, 0.45) !important;
    background: rgba(255, 255, 255, 0.88) !important;
    box-shadow: 0 4px 14px rgba(8, 6, 14, 0.35) !important;
  }

  .mySwiper.content:not(.is-at-beginning) > .swiper-button-prev:not(.swiper-button-disabled),
  .swiper-hot-providers.content:not(.is-at-beginning) > .swiper-button-prev:not(.swiper-button-disabled) {
    opacity: 1 !important;
    border-color: rgba(137, 196, 244, 0.45) !important;
    color: #0056a3 !important;
  }

  .mySwiper.content:not(.is-at-end) > .swiper-button-next:not(.swiper-button-disabled),
  .swiper-hot-providers.content:not(.is-at-end) > .swiper-button-next:not(.swiper-button-disabled) {
    opacity: 1 !important;
    border-color: rgba(137, 196, 244, 0.45) !important;
    color: #0056a3 !important;
  }

  /* 這裡原本有一條 `.is-swiper-dragging` 的高亮：拖曳時只要還沒到頭就把左鍵點亮、
     還沒到底就把右鍵點亮 —— 但滑到一半通常兩個條件同時成立，於是**兩顆一起亮**，
     看起來像同時可按又同時被按下。手機沒有 hover，箭頭只需要表達「還能不能往那邊翻」，
     這件事已經由 :not(.is-at-beginning) / :not(.is-at-end) 與 .swiper-button-disabled
     負責，拖曳中不該再另外變色，故整條移除。
     `is-swiper-dragging` 這個 class 仍由 lux-layout-v2.js 用來抑制拖曳時的卡片點按態，不能拿掉。 */
}

.mySwiper .swiper-slide {
  height: auto !important;
}

.mySwiper .swiper-slide img {
  aspect-ratio: 160 / 227;
  object-fit: cover;
  min-height: 80px;
}

/* 遊戲入口輪播：被容器邊界切到的 slide 漸暗（.is-clipped 由 gamenav.js 依實際幾何標記，
   比 Swiper 的 swiper-slide-fully-visible 準，可修正「滑到底最右卡片完整顯示卻仍暗」的問題） */
.mySwiper.content:not(.swiper-hot-providers) .swiper-slide:has(> img) > img {
  transition: filter 0.32s ease, transform 0.28s ease;
}

.mySwiper.content:not(.swiper-hot-providers) .swiper-slide:has(> img).is-clipped > img {
  filter: brightness(0.5) saturate(0.88);
}

.mySwiper.content:not(.swiper-hot-providers) .swiper-slide:has(> img).is-clipped .game-name {
  opacity: 0.55;
  transition: opacity 0.32s ease;
}

/* 遊戲輪播左右邊緣羽化已關閉（淺底白遮罩會蓋住卡片） */
.mySwiper.content:not(.swiper-hot-providers)::before,
.mySwiper.content:not(.swiper-hot-providers)::after {
  content: none;
  display: none;
}

/* 遊戲入口：hover / 觸控 — 主版配色脈衝播放鍵 */
@keyframes game-action-ripple {
  0% {
    box-shadow:
      0 0 0 0 rgba(137, 196, 244, 0.45),
      0 0 0 0 rgba(0, 61, 121, 0.32),
      0 0 0 0 rgba(0, 61, 121, 0.18);
  }

  70% {
    box-shadow:
      0 0 0 10px rgba(137, 196, 244, 0),
      0 0 0 20px rgba(0, 61, 121, 0),
      0 0 0 30px rgba(0, 61, 121, 0);
  }

  100% {
    box-shadow:
      0 0 0 10px rgba(137, 196, 244, 0),
      0 0 0 20px rgba(0, 61, 121, 0),
      0 0 0 30px rgba(0, 61, 121, 0);
  }
}

.mySwiper.content .swiper-slide:has(> img) {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* 拖曳時卡片內容不可反白選取 */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.mySwiper.content .swiper-slide:has(> img) > img {
  display: block;
  width: 100%;
  transition: filter 0.28s ease, transform 0.28s ease;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

.mySwiper.content .swiper-slide:has(> img)::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background: rgba(8, 10, 18, 0.58);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}

.mySwiper.content .swiper-slide:has(> img)::after {
  /* 不用 Font Awesome 字型碼；SVG+JS Kit 不提供 pseudo-element webfont */
  content: '▶';
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  width: 44px;
  height: 44px;
  margin: 0;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  /* play 三角形略偏左，微右移做光學置中 */
  padding-left: 2px;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 16px;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  color: #ffffff;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  transform: translate(-50%, -50%) scale(0.86);
  transition: opacity 0.25s ease, transform 0.25s ease;
  border: 1px solid rgba(137, 196, 244, 0.35);
  box-shadow: 0 4px 14px rgba(0, 61, 121, 0.28);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: linear-gradient(180deg, var(--ref-secondary, #89c4f4) 0%, var(--ref-primary, #003d79) 100%);
}

.mySwiper.content .swiper-slide:has(> img) .game-name {
  z-index: 4;
  transition: opacity 0.22s ease;
}

.mySwiper.content .swiper-slide:has(> img):hover::before,
.mySwiper.content .swiper-slide:has(> img):focus-visible::before,
.mySwiper.content .swiper-slide:has(> img).is-touch-active::before,
.mySwiper.content .swiper-slide:has(> img):hover::after,
.mySwiper.content .swiper-slide:has(> img):focus-visible::after,
.mySwiper.content .swiper-slide:has(> img).is-touch-active::after {
  opacity: 1;
}

.mySwiper.content .swiper-slide:has(> img):hover::after,
.mySwiper.content .swiper-slide:has(> img):focus-visible::after,
.mySwiper.content .swiper-slide:has(> img).is-touch-active::after {
  transform: translate(-50%, -50%) scale(1);
  animation: game-action-ripple 2s ease-out infinite;
}

.mySwiper.content .swiper-slide:has(> img):hover > img,
.mySwiper.content .swiper-slide:has(> img):focus-visible > img,
.mySwiper.content .swiper-slide:has(> img).is-touch-active > img {
  filter: blur(3px) brightness(0.48);
  transform: scale(1.03);
}

.mySwiper.content .swiper-slide:has(> img):hover .game-name,
.mySwiper.content .swiper-slide:has(> img):focus-visible .game-name,
.mySwiper.content .swiper-slide:has(> img).is-touch-active .game-name {
  opacity: 0.92;
}

@media (prefers-reduced-motion: reduce) {
  .mySwiper.content .swiper-slide:has(> img) > img,
  .mySwiper.content .swiper-slide:has(> img)::before,
  .mySwiper.content .swiper-slide:has(> img)::after {
    transition: none !important;
    animation: none !important;
  }

  .mySwiper.content .swiper-slide:has(> img):hover > img,
  .mySwiper.content .swiper-slide:has(> img).is-touch-active > img {
    transform: none;
    filter: brightness(0.65);
  }
}

/* 手機：遊戲入口卡片點按/懸浮時不要那層暗遮罩、play 按鈕與圖片模糊 */
@media (max-width: 767px) {
  .mySwiper.content .swiper-slide:has(> img):hover::before,
  .mySwiper.content .swiper-slide:has(> img):focus-visible::before,
  .mySwiper.content .swiper-slide:has(> img).is-touch-active::before,
  .mySwiper.content .swiper-slide:has(> img):hover::after,
  .mySwiper.content .swiper-slide:has(> img):focus-visible::after,
  .mySwiper.content .swiper-slide:has(> img).is-touch-active::after {
    opacity: 0 !important;
  }

  .mySwiper.content .swiper-slide:has(> img):hover > img,
  .mySwiper.content .swiper-slide:has(> img):focus-visible > img,
  .mySwiper.content .swiper-slide:has(> img).is-touch-active > img {
    filter: none !important;
    transform: none !important;
  }
}

/* 讓遊戲卡 hover 光暈不被 swiper 的 overflow:hidden 上下切掉：
   水平仍裁切（輪播正常、不露鄰張），垂直放行（光暈上下可溢出）。 */
.mySwiper.content {
  overflow-x: clip;
  overflow-y: visible;
}

/* 遊戲入口卡：發光漸層外框（參考圖風格）。用雙背景（padding-box 深底 + border-box 漸層）
   達成保留圓角的漸層邊框；外圈 box-shadow 做柔光暈。
   顏色由 CSS 變數驅動（--card-b1/b2/b3 邊框漸層、--card-glow 光暈），
   各區塊（熱門電子/其他熱門/推薦品牌/電子/真人/體育/彩票/棋牌）各設一組色。 */
.mySwiper.content .swiper-slide:has(> img) {
  border: 1.5px solid transparent;
  background:
    linear-gradient(#0a1628, #0a1628) padding-box,
    linear-gradient(
      155deg,
      var(--card-b1, rgba(137, 196, 244, 0.95)) 0%,
      var(--card-b2, rgba(0, 61, 121, 0.55)) 30%,
      rgba(0, 61, 121, 0.12) 62%,
      var(--card-b3, rgba(212, 161, 80, 0.45)) 100%
    ) border-box;
  box-shadow:
    0 3px 10px var(--card-glow, rgba(0, 61, 121, 0.16)),
    inset 0 1px 0 rgba(247, 224, 143, 0.08);
  transition: box-shadow 0.28s ease, background 0.28s ease;
}

.mySwiper.content .swiper-slide:has(> img):hover,
.mySwiper.content .swiper-slide:has(> img):focus-visible,
.mySwiper.content .swiper-slide:has(> img).is-touch-active {
  box-shadow:
    0 4px 12px var(--card-glow, rgba(99, 58, 200, 0.2)),
    0 0 8px var(--card-glow, rgba(0, 61, 121, 0.2));
}

/* 各區塊卡片邊框色 — 統一由 theme-ref-ofa377.css 定義 */
.decoration-line {
  height: 1px !important;
  background: linear-gradient(90deg, transparent, var(--lux-gold-line), transparent) !important;
  opacity: 1;
  margin: 0.75rem 0 !important;
}

/* 頁尾樣式見 lux-footer.css；手機 bottom-nav 見下方 @media */

.dark.modal-style-2 .modal-content,
.auth-modal-inner.modal-content {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 12px !important;
}

.modal-style-2 .modal-login .btn,
.auth-modal-body .btn.red-btn,
.dark.modal-style-2 .modal-footer .btn.red-btn {
  background: linear-gradient(180deg, #0056a3 0%, #003d79 100%) !important;
  color: #ffffff !important;
  border-radius: 6px !important;
  border: 1px solid rgba(0, 61, 121, 0.35) !important;
  box-shadow: 0 8px 18px rgba(0, 61, 121, 0.28) !important;
}

.modal-style-2 .modal-login .btn:hover,
.auth-modal-body .btn.red-btn:hover,
.dark.modal-style-2 .modal-footer .btn.red-btn:hover {
  box-shadow:
    0 12px 22px rgba(0, 40, 90, 0.38),
    0 0 18px rgba(0, 61, 121, 0.32),
    0 0 26px rgba(137, 196, 244, 0.24) !important;
  filter: brightness(1.03);
}

.lobby-header {
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: none !important;
}

.rtp-rank-title h2 {
  color: var(--color-w100) !important;
  font-size: 0.95rem !important;
}

.rtp-rank-title h2 i {
  color: var(--lux-gold-soft) !important;
}

.profile-nav a.active,
.profile-sidebar a.active,
.profile_nav_wrapper a.active,
.profile_nav_wrapper a.is-active {
  border-left-color: var(--lux-gold) !important;
  color: var(--lux-gold) !important;
}

.center-morenavbox > .red-btn::before {
  background: linear-gradient(180deg, #0056a3, #002752) !important;
}

.profile_content_box,
.sm-box {
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: var(--lux-radius) !important;
  box-shadow: none !important;
}

.vertical-tab--lux-sidebar .gamenav-top-tabs,
.vertical-tab--lux-sidebar > ul.nav-tabs {
  display: none !important;
}

#Slot, #Casino, #Sport, #Keno, #Chess {
  scroll-margin-top: calc(var(--lux-header-h) + 16px);
}

/* ── 手機 Offcanvas：完整文字選單（僅抽屜內，不影響首頁水平分類） ── */
.lux-gamenav-drawer .lux-gamenav-link,
#gamenavDrawer .lux-gamenav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  color: #ecf7ff;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  pointer-events: auto;
  touch-action: manipulation;
  cursor: pointer;
  background:
    radial-gradient(120% 140% at 10% 0%, rgba(137, 196, 244, 0.1) 0%, rgba(137, 196, 244, 0) 52%),
    linear-gradient(155deg, rgba(35, 44, 61, 0.42) 0%, rgba(24, 31, 45, 0.46) 54%, rgba(17, 23, 34, 0.5) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.lux-gamenav-drawer .lux-gamenav-link i,
#gamenavDrawer .lux-gamenav-link i {
  width: 18px;
  text-align: center;
  color: #89c4f4;
}

.lux-gamenav-drawer .lux-gamenav-link.is-active,
.lux-gamenav-drawer .lux-gamenav-link:active,
#gamenavDrawer .lux-gamenav-link.is-active,
#gamenavDrawer .lux-gamenav-link:active {
  background:
    radial-gradient(130% 160% at 8% 0%, rgba(137, 196, 244, 0.22) 0%, rgba(137, 196, 244, 0) 52%),
    linear-gradient(135deg, rgba(0, 86, 163, 0.45) 0%, rgba(0, 61, 121, 0.48) 48%, rgba(58, 80, 107, 0.42) 100%);
  box-shadow: 0 8px 18px rgba(0, 40, 90, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  color: #fff;
}

.lux-gamenav-link.lux-nav-dup {
  display: none !important;
}

.lux-gamenav-drawer__support {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 14px;
  border-radius: 12px;
  color: #ecf7ff;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  border: 1px solid rgba(0, 61, 121, 0.35);
  background: rgba(0, 61, 121, 0.12);
}

.lux-gamenav-drawer__support:active {
  filter: brightness(0.95);
}

/* ── Dexsport 風：Banner 下水平分類列（icon+字橫排、無外框、可拖曳） ── */
.lux-category-rail {
  margin: 0 0 12px;
}

.lux-category-rail__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  max-width: 100%;
  padding-right: 2px;
}

.lux-category-rail__track {
  --lux-rail-fade: 100px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 40px 0 2px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  cursor: grab;
  -webkit-mask-image: linear-gradient(
    to right,
    #fff 0%,
    #fff calc(100% - var(--lux-rail-fade)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    #fff 0%,
    #fff calc(100% - var(--lux-rail-fade)),
    transparent 100%
  );
}

.lux-category-rail__track.is-dragging {
  cursor: grabbing;
  user-select: none;
}

.lux-category-rail__track.is-dragging .lux-category-rail__item {
  pointer-events: none;
}

.lux-category-rail__track::-webkit-scrollbar {
  display: none;
}

.lux-category-rail__item {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  opacity: 0.5;
  transition: opacity 0.15s ease, color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.lux-category-rail__item i {
  flex: 0 0 auto;
  width: 16px;
  font-size: 0.95rem;
  text-align: center;
  color: inherit;
}

.lux-category-rail__label {
  white-space: nowrap;
}

.lux-category-rail__item:hover,
.lux-category-rail__item.is-active {
  opacity: 1;
  color: #fff;
}

.lux-category-rail__next {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.72rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.lux-category-rail__next:hover,
.lux-category-rail__next:active {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

@media screen and (min-width: 768px) {
  .lux-category-rail {
    margin-bottom: 14px;
  }

  .lux-category-rail__bar {
    margin-top: 4px;
  }

  .lux-category-rail__next {
    border-radius: 12px;
    width: 36px;
    height: 36px;
  }
}

/* ── 桌面左欄：固定比例 + 右欄主內容（僅快捷工具） ── */
.lux-dex-sidebar,
.lux-gamenav-sidebar {
  display: none;
}

.lux-dex-sidebar__panel {
  max-height: calc(100vh - var(--lux-header-h) - 16px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 61, 121, 0.16) transparent;
  background: linear-gradient(
    180deg,
    rgba(248, 251, 255, 0.98) 0%,
    rgba(255, 255, 255, 0.98) 100%
  );
  border: 1px solid var(--ref-border, rgba(0, 61, 121, 0.12));
  box-shadow: 0 8px 24px rgba(0, 61, 121, 0.08);
  border-radius: 14px;
  padding: 12px 10px;
  width: 100%;
  box-sizing: border-box;
}

.lux-dex-sidebar__panel::-webkit-scrollbar {
  width: 4px;
}

.lux-dex-sidebar__panel::-webkit-scrollbar-thumb {
  background: rgba(0, 61, 121, 0.16);
  border-radius: 999px;
}

/* bets.io 側欄 panel：結構/高度/動畫（背景、邊框見上方 .lux-dex-sidebar__panel） */
.lux-gamenav-sidebar--betsio .lux-dex-sidebar__panel {
  flex: 0 0 auto;
  min-height: calc(100vh - var(--lux-header-h) - 20px);
  max-height: calc(100vh - var(--lux-header-h) - 20px);
  height: auto;
  transition:
    padding 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    border-radius 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.lux-dex-sidebar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 2px 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(0, 61, 121, 0.08);
  flex-shrink: 0;
}

.lux-dex-sidebar__head-title {
  padding: 0;
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: opacity 0.2s ease, max-width 0.28s ease;
}

.lux-dex-sidebar__toggle {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid rgba(0, 61, 121, 0.18);
  background: rgba(0, 61, 121, 0.06);
  color: var(--ref-primary, #003d79);
  cursor: pointer;
  padding: 0;
  position: relative;
  z-index: 2;
  pointer-events: auto;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}

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

.lux-dex-sidebar__toggle i {
  font-size: 0.82rem;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.lux-gamenav-sidebar--betsio.is-collapsed .lux-dex-sidebar__toggle i {
  transform: rotate(180deg);
}

.lux-gamenav-sidebar--betsio.is-collapsed .lux-dex-sidebar__head-title,
.lux-gamenav-sidebar--betsio.is-collapsed .lux-dex-sidebar__label {
  display: none;
}

.lux-gamenav-sidebar--betsio.is-collapsed .lux-dex-sidebar__head {
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid rgba(0, 61, 121, 0.08);
  padding: 8px 0 12px;
  margin-bottom: 6px;
}

.lux-gamenav-sidebar--betsio.is-collapsed .lux-dex-sidebar__toggle {
  width: 36px;
  height: 36px;
  margin: 0 auto;
  border-radius: 10px;
}

.lux-gamenav-sidebar--betsio.is-collapsed .lux-dex-sidebar__link {
  justify-content: center;
  gap: 0;
  padding: 0;
  min-height: 40px;
}

.lux-gamenav-sidebar--betsio.is-collapsed .lux-dex-sidebar__panel {
  padding: 10px 6px 12px;
  align-items: center;
}

.lux-gamenav-sidebar--betsio.is-collapsed .lux-dex-sidebar__nav {
  width: 100%;
  align-items: center;
}

.lux-gamenav-sidebar--betsio.is-collapsed .lux-dex-sidebar__section--quick,
.lux-gamenav-sidebar--betsio.is-collapsed #gamenav-sidebar-quick-section {
  width: 100%;
  align-items: center;
}

.lux-gamenav-sidebar--betsio.is-collapsed #gamenav-sidebar-quick-section > .lux-dex-sidebar__link {
  width: 40px;
  margin: 0 auto;
}

.lux-gamenav-sidebar--betsio .lux-dex-sidebar__label {
  transition:
    opacity 0.2s ease,
    max-width 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.lux-dex-sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.lux-dex-sidebar__section {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lux-dex-sidebar__section + .lux-dex-sidebar__section {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 61, 121, 0.08);
}

.lux-dex-sidebar__section-title {
  padding: 6px 10px 8px;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ref-text-muted, #666666);
  text-transform: uppercase;
}

.lux-dex-sidebar__footer {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid rgba(0, 61, 121, 0.08);
  flex-shrink: 0;
}

.lux-dex-sidebar__link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 10px;
  border-radius: 10px;
  color: var(--ref-text, #363636);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  background: transparent;
  box-shadow: none;
  transition: color 0.18s ease, background 0.18s ease;
}

.lux-dex-sidebar__icon {
  flex: 0 0 20px;
  width: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  color: var(--ref-primary, #003d79);
  transition: color 0.18s ease;
}

.lux-dex-sidebar__label {
  display: inline;
  max-width: none;
  opacity: 1;
  overflow: visible;
  transform: none;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.lux-gamenav-sidebar--betsio .lux-dex-sidebar__label {
  flex: 1 1 auto;
  min-width: 0;
}

.lux-dex-sidebar__link:hover,
.lux-dex-sidebar__link.is-active {
  color: var(--ref-primary, #003d79);
  background: rgba(0, 61, 121, 0.08);
}

.lux-dex-sidebar__link.is-active {
  background: rgba(0, 61, 121, 0.12);
  box-shadow: inset 0 0 0 1px rgba(0, 61, 121, 0.16);
}

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

.lux-dex-sidebar__link.lux-nav-dup {
  display: none !important;
}

/* 側欄快捷選單（API 注入） */
#gamenav-sidebar-quick-section > .lux-dex-sidebar__link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 10px;
  border-radius: 10px;
  color: var(--ref-text, #363636);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  background: transparent;
  box-shadow: none;
}

#gamenav-sidebar-quick-section > .lux-dex-sidebar__link .lux-dex-sidebar__icon {
  flex: 0 0 20px;
  width: 20px;
  font-size: 0.95rem;
  color: var(--ref-primary, #003d79);
}

#gamenav-sidebar-quick-section > .lux-dex-sidebar__link:hover,
#gamenav-sidebar-quick-section > .lux-dex-sidebar__link.is-active {
  color: var(--ref-primary, #003d79);
  background: rgba(0, 61, 121, 0.12);
  box-shadow: inset 0 0 0 1px rgba(0, 61, 121, 0.16);
}

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

#gamenav-sidebar-quick-section > .lux-dex-sidebar__link.lux-gamenav-link {
  gap: 10px;
  padding: 0 10px;
  font-size: 0.875rem;
  background: transparent;
  box-shadow: none;
}

#gamenav-sidebar-quick-section > .lux-dex-sidebar__link.lux-gamenav-link i {
  width: auto;
  color: inherit;
}

@media screen and (min-width: 768px) {
  .content_all .gamenav,
  .vertical-tab--lux-sidebar {
    overflow: visible !important;
  }

  .vertical-tab--lux-sidebar {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start;
    gap: var(--lux-sidebar-gap);
    width: 100%;
  }

  .lux-dex-sidebar,
  .vertical-tab--lux-sidebar .lux-gamenav-sidebar {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: calc(var(--lux-header-h) + 10px);
    flex: 0 0 var(--lux-sidebar-ratio);
    width: var(--lux-sidebar-ratio);
    min-width: var(--lux-sidebar-min-w);
    max-width: var(--lux-sidebar-max-w);
    align-self: flex-start;
    max-height: calc(100vh - var(--lux-header-h) - 20px);
    z-index: 4;
    padding: 0;
    margin: 0 4px 0 0;
    border: none;
    background: transparent;
    box-shadow: none;
    transition:
      flex-basis 0.28s cubic-bezier(0.22, 1, 0.36, 1),
      width 0.28s cubic-bezier(0.22, 1, 0.36, 1),
      min-width 0.28s cubic-bezier(0.22, 1, 0.36, 1),
      max-width 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .lux-gamenav-sidebar--betsio.is-collapsed {
    flex: 0 0 var(--lux-sidebar-collapsed-w);
    width: var(--lux-sidebar-collapsed-w);
    min-width: var(--lux-sidebar-collapsed-w);
    max-width: var(--lux-sidebar-collapsed-w);
  }

  .vertical-tab--lux-sidebar .tab-content {
    flex: 1 1 0;
    min-width: 0;
    width: auto !important;
    max-width: none !important;
    padding-left: 4px !important;
    box-sizing: border-box;
  }

  .vertical-tab--lux-sidebar .tab-content > .main-col {
    max-width: none;
    width: 100%;
  }
}

/* 舊版 Dexsport 窄欄 hover 展開（僅非 bets.io 側欄） */
.lux-dex-sidebar:not(.lux-gamenav-sidebar--betsio) .lux-dex-sidebar__panel {
  white-space: nowrap;
  width: var(--lux-dex-rail-w);
  transform: translateZ(0);
  transition:
    width 0.44s cubic-bezier(0.32, 0.72, 0, 1),
    border-radius 0.44s cubic-bezier(0.32, 0.72, 0, 1);
}

.lux-dex-sidebar:not(.lux-gamenav-sidebar--betsio).is-expanded .lux-dex-sidebar__panel,
.lux-dex-sidebar:not(.lux-gamenav-sidebar--betsio):hover .lux-dex-sidebar__panel,
.lux-dex-sidebar:not(.lux-gamenav-sidebar--betsio):focus-within .lux-dex-sidebar__panel {
  width: var(--lux-dex-rail-expanded);
  border-radius: 20px;
}

.lux-dex-sidebar:not(.lux-gamenav-sidebar--betsio) .lux-dex-sidebar__label {
  display: inline-block;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  vertical-align: middle;
  transform: translateX(-6px);
  transition:
    opacity 0.14s ease,
    max-width 0.28s cubic-bezier(0.4, 0, 0.8, 0.2),
    transform 0.14s ease;
}

.lux-dex-sidebar:not(.lux-gamenav-sidebar--betsio).is-expanded .lux-dex-sidebar__label,
.lux-dex-sidebar:not(.lux-gamenav-sidebar--betsio):hover .lux-dex-sidebar__label,
.lux-dex-sidebar:not(.lux-gamenav-sidebar--betsio):focus-within .lux-dex-sidebar__label {
  max-width: 168px;
  opacity: 1;
  transform: translateX(0);
}

.lux-dex-sidebar.is-collapsing {
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .lux-dex-sidebar__panel,
  .lux-dex-sidebar__label,
  .lux-dex-sidebar__link {
    transition: none !important;
  }
}

/* ── 手機：左欄 Offcanvas（右側保留小工具安全區） ── */
.lux-gamenav-drawer {
  width: min(300px, 100vw);
  max-width: 100vw;
  display: flex;
  flex-direction: column;
  max-height: 100vh;
  max-height: 100dvh;
  background:
    radial-gradient(130% 160% at 8% 0%, rgba(137, 196, 244, 0.12) 0%, rgba(137, 196, 244, 0) 48%),
    linear-gradient(180deg, rgba(26, 20, 36, 0.72) 0%, rgba(15, 18, 24, 0.72) 100%);
  /* 毛玻璃：半透明底 + 背景模糊 */
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
  border-right: 1px solid rgba(0, 61, 121, 0.28);
  color: #fff;
}

.lux-gamenav-drawer__header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 16px 18px;
}

.lux-gamenav-drawer__header .offcanvas-title {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.lux-gamenav-drawer__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding: 12px 10px calc(18px + env(safe-area-inset-bottom, 0px));
  gap: 12px;
  overflow: hidden;
}

.lux-gamenav-drawer__nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-x: hidden;
  overflow-y: auto;
  /* 只占內容高度（不撐滿），快捷功能才會緊接在分類下方；分類過多時才收縮並內部捲動 */
  flex: 0 1 auto;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}

.lux-gamenav-drawer__quick {
  flex: 0 0 auto;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.lux-gamenav-drawer__quick-title {
  margin: 0 0 8px;
  padding: 0 4px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.42);
  text-transform: uppercase;
}

.lux-gamenav-drawer__quick-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lux-gamenav-drawer__quick-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.lux-gamenav-drawer__quick-link i {
  width: 20px;
  text-align: center;
  color: #89c4f4;
  font-size: 0.95rem;
}

.lux-gamenav-drawer__quick-link:hover,
.lux-gamenav-drawer__quick-link.is-active {
  color: #fff;
  background: rgba(0, 61, 121, 0.18);
  border-color: rgba(0, 61, 121, 0.32);
}

/* 避免 index_content.css 的 .nav-highlight 圓形樣式污染 drawer / 側欄快捷選單 */
.lux-gamenav-drawer__quick-link.nav-highlight,
.lux-gamenav-drawer__quick-link.highlight,
#gamenav-sidebar-quick-section > .lux-dex-sidebar__link.nav-highlight,
#gamenav-sidebar-quick-section > .lux-dex-sidebar__link.highlight {
  margin-top: 0 !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

.lux-gamenav-drawer__quick-link:active {
  background: rgba(0, 61, 121, 0.24);
  border-color: rgba(0, 61, 121, 0.36);
}

#mobile-quick-menu-wrap,
#mqm-overlay {
  display: none !important;
}

.lux-gamenav-drawer__footer {
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

@media (hover: hover) and (pointer: fine) {
  .lux-gamenav-drawer .lux-gamenav-link:hover {
    transform: translateX(3px);
    background:
      radial-gradient(130% 160% at 8% 0%, rgba(137, 196, 244, 0.18) 0%, rgba(137, 196, 244, 0) 52%),
      linear-gradient(135deg, rgba(0, 86, 163, 0.38) 0%, rgba(0, 61, 121, 0.4) 48%, rgba(58, 80, 107, 0.36) 100%);
    box-shadow: 0 8px 18px rgba(0, 40, 90, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    color: #fff;
  }
}

button.sm-navitem.sm-navitem--menu {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  width: 100%;
  font: inherit;
  color: inherit;
  cursor: pointer;
  padding: 0;
}

@media screen and (max-width: 767px) {
  .lux-dex-sidebar,
  .lux-gamenav-sidebar {
    display: none !important;
  }

  .vertical-tab--lux-sidebar .tab-content {
    padding-left: 0 !important;
  }

  ul.navsize.nav-tabs.gamenav-top-tabs,
  .vertical-tab .nav-tabs.gamenav-top-tabs {
    display: none !important;
  }

  ul.navsize.nav-tabs > li.lux-nav-dup {
    display: none !important;
  }

  #gamenavDrawer.lux-gamenav-drawer {
    --bs-offcanvas-width: min(300px, 100vw);
    z-index: 1060 !important;
  }

  #gamenavDrawer.lux-gamenav-drawer .lux-gamenav-drawer__body {
    padding-bottom: calc(var(--lux-bottom-nav-offset, 80px) + env(safe-area-inset-bottom, 0px));
  }

  #gamenavDrawer.lux-gamenav-drawer.show {
    visibility: visible;
    transform: none;
  }

  body.gamenav-drawer-open .offcanvas-backdrop.show {
    width: 100vw;
    left: 0;
    right: 0;
    z-index: 1055 !important;
    cursor: pointer;
  }

  body.gamenav-drawer-open #btmnav {
    z-index: 1025 !important;
  }

  /* 抽屜開啟時禁止水平分類列搶接點擊（與 offcanvas 層級衝突） */
  body.gamenav-drawer-open .home-casino-filter {
    pointer-events: none !important;
  }
}

@media screen and (max-width: 767px) {
  .content_all {
    padding-left: 6px !important;
    padding-right: 6px !important;
    padding-top: 58px !important;
  }

  .header .tophd {
    min-height: 50px !important;
  }

  .vertical-tab .nav-tabs {
    display: flex !important;
    top: calc(var(--lux-header-h) - 2px);
    padding: 6px 2px !important;
    margin-bottom: 10px !important;
  }

  ul.navsize.nav-tabs.gamenav-top-tabs {
    display: none !important;
  }

  .nav-sub {
    display: flex !important;
  }

  ul.navsize {
    display: flex !important;
    width: 100% !important;
  }

  ul.navsize > li a.active {
    background: var(--lux-gold-fill) !important;
    border: 1px solid var(--lux-gold-line) !important;
  }

  .vertical-tab .tab-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    overflow: visible !important;
    height: auto !important;
  }

  .vertical-tab .tab-content > .main-col {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--lux-main-block-gap, 24px) !important;
  }

  .mySwiper .swiper-slide img {
    min-height: 100px;
    width: 100%;
    height: auto;
    aspect-ratio: 160 / 227;
  }

  .game-swiper-wrapper,
  .swiper.game-swiper-wrapper {
    aspect-ratio: unset !important;
    height: auto !important;
  }

  .img-item > img.pcBN {
    display: none !important;
  }
  .img-item > img.h5BN {
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }

  .vertical-tab .nav-tabs {
    touch-action: pan-x;
  }

  .main-col .main-home-panel > .rtp-rank-section,
  .main-col .main-home-panel > .washcode-section {
    flex: 0 0 auto;
    min-width: 0;
    margin: 0;
    width: 100%;
  }

  .main-col .main-home-panel > .rtp-rank-section {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 0;
    margin: 0;
  }

  .main-col .main-home-panel > .rtp-rank-section .rtp-rank-head {
    align-items: center;
  }

  .main-col .main-home-panel > .rtp-rank-section .rtp-rank-title {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  .main-col .main-home-panel > .rtp-rank-section .rtp-rank-title h2 {
    font-size: 0.92rem !important;
    margin: 0;
  }

  .main-col .main-home-panel > .rtp-rank-section .rtp-slider-wrap {
    display: block !important;
    width: 100%;
  }

  .main-col .main-home-panel > .washcode-section { margin: 0; }
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  .vertical-tab .nav-tabs {
    display: flex !important;
  }

  .vertical-tab .tab-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    aspect-ratio: unset !important;
    overflow: visible !important;
    height: auto !important;
  }

  .vertical-tab .tab-content > .main-col {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--lux-main-block-gap, 24px) !important;
  }
}

/* ── 手機底部選單（參考 thrill.com）── */
@media screen and (max-width: 767px) {
  :root {
    --lux-bottom-nav-offset: 80px;
    --lux-bottom-nav-pill-h: 62px;
  }

  #btmnav {
    display: block !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 1030 !important;
    width: 100vw !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 4px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    pointer-events: none;
    transform: none !important;
    background: transparent;
  }

  /* footer 進入視窗時由 JS 加上 .is-over-footer，pill 陰影改深色系 */
  #btmnav.is-over-footer .bottom-nav__pill {
    box-shadow:
      var(--lux-bottom-nav-pill-shadow-over-footer),
      inset 0 1px 0 rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.14);
  }

  #btmnav .bottom-nav,
  #btmnav .bottom-nav__pill,
  #btmnav .sm-nav,
  #btmnav ul.sm-nav > li,
  #btmnav button.sm-navitem,
  #btmnav .sm-navitem--menu {
    pointer-events: auto !important;
    touch-action: manipulation;
  }

  #btmnav .bottom-nav {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    z-index: 1;
    pointer-events: auto;
  }

  #btmnav .bottom-nav__pill {
    height: var(--lux-bottom-nav-pill-h);
    border-radius: 999px;
    padding: 4px 14px;
    background:
      radial-gradient(120% 140% at 8% 0%, rgba(137, 196, 244, 0.14) 0%, rgba(137, 196, 244, 0) 52%),
      radial-gradient(120% 120% at 92% 100%, rgba(137, 196, 244, 0.08) 0%, rgba(137, 196, 244, 0) 48%),
      var(--lux-bottom-nav-pill-bg);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow:
      var(--lux-bottom-nav-pill-shadow),
      0 0 12px rgba(0, 61, 121, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.85);
    border: 1px solid var(--lux-bottom-nav-pill-border);
    box-sizing: border-box;
  }

  #btmnav .sm-nav {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    align-items: stretch;
  }

  #btmnav .sm-nav--cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  #btmnav ul.sm-nav > li {
    width: auto;
    min-width: 0;
    display: flex;
    margin: 0;
  }

  #btmnav .sm-navitem {
    flex: 1;
    width: 100%;
    border: 0;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 4px;
    border-radius: 12px;
    color: var(--lux-bottom-nav-muted);
    text-decoration: none;
    font: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  }

  #btmnav .sm-navitem i,
  #btmnav .sm-navitem svg {
    font-size: 1.15rem;
    line-height: 1;
    color: var(--lux-bottom-nav-icon-muted);
    background: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    transition: color 0.2s ease;
  }

  /* width/height 的歸零只給字型模式的 <i>（同 9win）。FA7 SVG 模式的 svg 是替換元素，
     尺寸交給 Font Awesome 自己算（height:1em + --fa-width:auto），一旦覆寫成 auto
     就會退回 viewBox 自動尺寸、撐滿整格。 */
  #btmnav .sm-navitem i {
    width: auto !important;
    height: auto !important;
  }

  #btmnav .sm-navitem span {
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: inherit;
  }

  #btmnav .sm-navitem.is-active {
    color: var(--lux-bottom-nav-active-color, var(--lux-gold)) !important;
    background:
      radial-gradient(130% 160% at 8% 0%, var(--lux-bottom-nav-active-glow, rgba(137, 196, 244, 0.22)) 0%, rgba(137, 196, 244, 0) 52%),
      var(--lux-bottom-nav-active-fill, var(--lux-gold-fill)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  }

  #btmnav .sm-navitem.is-active i,
  #btmnav .sm-navitem.is-active svg {
    color: var(--lux-bottom-nav-active-icon, var(--lux-gold)) !important;
    background: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  #btmnav .sm-navitem.is-active i {
    width: auto !important;
    height: auto !important;
  }

  #btmnav .sm-navitem.is-active span {
    color: var(--lux-bottom-nav-active-color, var(--lux-gold)) !important;
  }

  #btmnav .sm-navitem:active:not(.is-active) {
    color: var(--ref-primary-hover, #0056a3);
    background: rgba(0, 61, 121, 0.1);
  }

  #btmnav .sm-navitem:active:not(.is-active) i,
  #btmnav .sm-navitem:active:not(.is-active) svg {
    color: var(--ref-primary, #003d79);
  }

  #btmnav .nav-highlight {
    background: none !important;
    box-shadow: none !important;
    color: inherit !important;
  }
}

@media screen and (min-width: 768px) {
  #btmnav {
    display: none !important;
  }
}

/* 彈窗遮罩調淡：預設 #000 / 0.5 太黑會完全蓋住背景，降到約 0.32 讓後面網站仍看得見 */
/* 彈窗改毛玻璃後，底下的淺色頁面會把玻璃襯得太亮、白字對比不足，
   遮罩改成深海軍藍並加深不透明度。 */
.modal-backdrop {
  --bs-backdrop-bg: #001427;
}
.modal-backdrop.show {
  --bs-backdrop-opacity: 0.55;
}


/* ===== lux-footer.css ===== */
/* Dexsport 風格頁尾 — B 色系 */
.lux-footer {
  --lux-footer-bg: #030302;
  --lux-footer-border: rgba(0, 61, 121, 0.22);
  --lux-footer-text: rgba(255, 255, 255, 0.52);
  --lux-footer-title: #ffffff;
  --lux-footer-accent: #0056a3;
  --lux-footer-purple: #003d79;
  margin-top: 28px;
  box-sizing: border-box;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* 背景由 theme-ref 的 .lux-footer 規則以 !important 決定，這裡只留底色，
     不再各寫一份漸層。 */
  background: var(--lux-footer-bg);
  border-top: 1px solid var(--lux-footer-border);
  color: var(--lux-footer-text);
}

.lux-footer__inner {
  width: 100%;
  max-width: var(--lux-content-max-w, min(100%, 1480px));
  margin: 0 auto;
  padding: 32px var(--lux-content-pad-x, clamp(10px, 2vw, 28px)) 28px;
  box-sizing: border-box;
}

@media screen and (min-width: 768px) {
  .lux-footer__inner {
    max-width: var(--lux-content-max-w, min(100%, 1480px));
    padding-left: var(--lux-content-pad-x, clamp(10px, 2vw, 28px));
    padding-right: var(--lux-content-pad-x, clamp(10px, 2vw, 28px));
  }

  /* 會員中心等無 Dex 側欄頁：footer 內容與主欄對齊，不留 rail 左距 */
  .content_all:not(:has(.vertical-tab--lux-sidebar)) .lux-footer__inner {
    max-width: min(1280px, 100%);
    padding-left: var(--lux-content-pad-x, clamp(10px, 2vw, 28px));
    padding-right: var(--lux-content-pad-x, clamp(10px, 2vw, 28px));
  }
}

.lux-footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.lux-footer__brand {
  display: inline-flex;
  align-items: center;
}

.lux-footer__brand img,
.lux-footer__brand .logo-size {
  width: 100%;
  height: auto;
  max-width: 180px;
  padding: 0 !important;
  object-fit: contain;
}

.lux-footer__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.lux-footer__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.lux-footer__btn--ghost {
  color: var(--lux-footer-title);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.lux-footer__btn--ghost:hover {
  background: rgba(0, 61, 121, 0.18);
  border-color: rgba(0, 61, 121, 0.4);
  color: #fff;
}

.lux-footer__btn--primary {
  color: #030302;
  background: linear-gradient(135deg, #f0fdf4 0%, var(--lux-footer-accent) 55%, #4ade80 100%);
  border: 1px solid rgba(137, 196, 244, 0.55);
  box-shadow: 0 6px 18px rgba(137, 196, 244, 0.22);
}

.lux-footer__btn--primary:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.lux-footer__main {
  padding: 28px 0 0;
}

.lux-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 0.95fr) minmax(0, 0.8fr) minmax(0, 1.3fr);
  gap: 16px 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

@media screen and (min-width: 768px) and (max-width: 1023px) {
  .lux-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 24px;
  }

  .lux-footer__col--about {
    grid-column: 1 / -1;
  }
}

.lux-footer__accordion {
  min-width: 0;
}

.lux-footer__col-title {
  margin: 0 0 14px;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--lux-footer-title);
  list-style: none;
  cursor: default;
}

.lux-footer__col-title::-webkit-details-marker {
  display: none;
}

@media screen and (min-width: 1024px) {
  .lux-footer__accordion {
    display: block;
  }

  .lux-footer__accordion > .lux-footer__col-title {
    pointer-events: none;
  }

  .lux-footer__accordion > .lux-footer__col-title::after {
    display: none;
  }

  .lux-footer__accordion > .lux-footer__links {
    display: flex !important;
  }
}

.lux-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lux-footer__links a {
  color: var(--lux-footer-text);
  text-decoration: none;
  font-size: 0.84rem;
  line-height: 1.35;
  transition: color 0.18s ease;
}

.lux-footer__links a:hover {
  color: var(--lux-footer-accent);
}

.lux-footer__col--about {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.lux-footer__about-text {
  min-width: 0;
}

.lux-footer__about-title {
  margin: 0 0 10px;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.88);
}

.lux-footer__about-text p {
  margin: 0 0 8px;
  font-size: 0.72rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.62);
}

.lux-footer__about-text p:last-child {
  margin-bottom: 0;
}

.lux-footer__col--about .lux-footer__responsible {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  align-self: flex-start;
  gap: 10px;
  width: auto;
  min-height: 0;
  margin-top: auto;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(0, 61, 121, 0.28);
  background: rgba(255, 255, 255, 0.55);
  text-align: left;
  font-size: 0.7rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.55);
}

.lux-footer__age {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid rgba(137, 196, 244, 0.55);
  color: var(--lux-footer-accent);
  font-size: 0.85rem;
  font-weight: 800;
  flex-shrink: 0;
}

.lux-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 20px;
}

.lux-footer__copyright {
  margin: 0;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.02em;
}

.lux-footer__bottom-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
}

.lux-footer__bottom-nav a {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  font-size: 0.8rem;
  transition: color 0.18s ease;
}

.lux-footer__bottom-nav a:hover {
  color: var(--lux-footer-title);
}

/* 覆蓋舊 footer 結構殘留 */
.lux-footer .decoration-line,
.lux-footer .footer-top-bar {
  display: none !important;
}

.lux-footer .footer-nav-box h1::before {
  display: none;
}

.lux-footer.footer_wrapper,
.lux-footer .footer_wrapper {
  width: 100%;
  height: auto;
  display: block;
  align-items: stretch;
}

/* 手機／平板：Dexsport 風格手風琴（lg 以下四欄改直排） */
@media screen and (max-width: 1023px) {
  .lux-footer__grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 20px;
  }

  .lux-footer__col--about {
    gap: 12px;
    padding: 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
  }

  .lux-footer__col--about .lux-footer__responsible {
    align-self: center;
    max-width: 280px;
  }

  .lux-footer__accordion {
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    overflow: hidden;
  }

  .lux-footer__accordion > .lux-footer__col-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 10px 12px;
    cursor: pointer;
    user-select: none;
  }

  .lux-footer__accordion > .lux-footer__col-title::after {
    content: "";
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-right: 2px solid rgba(255, 255, 255, 0.45);
    border-bottom: 2px solid rgba(255, 255, 255, 0.45);
    transform: rotate(45deg);
    transition: transform 0.2s ease, border-color 0.2s ease;
  }

  .lux-footer__accordion[open] > .lux-footer__col-title::after {
    transform: rotate(-135deg);
    margin-top: 4px;
    border-color: var(--lux-footer-accent);
  }

  .lux-footer__accordion > .lux-footer__links {
    gap: 8px;
    padding: 0 12px 12px;
  }

  .lux-footer__accordion:not([open]) > .lux-footer__links {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .lux-footer {
    /* 60px 底欄 + 首頁凸出鈕 + 間距 */
    --lux-footer-nav-safe: calc(100px + env(safe-area-inset-bottom, 0px));
  }

  .lux-footer__inner {
    padding: 24px 14px var(--lux-footer-nav-safe);
  }

  .lux-footer__top {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .lux-footer__brand {
    justify-content: center;
    width: 100%;
  }

  .lux-footer__brand img,
  .lux-footer__brand .logo-size {
    max-width: 120px;
  }

  .lux-footer__actions {
    width: 100%;
    flex-direction: row;
    gap: 10px;
  }

  .lux-footer__btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
  }

  .lux-footer__main {
    padding-top: 18px;
  }

  .lux-footer__col--about {
    text-align: center;
  }

  .lux-footer__about-title {
    font-size: 0.8rem;
    text-align: center;
  }

  .lux-footer__about-text p {
    font-size: 0.7rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.62);
    text-align: center;
  }

  .lux-footer__bottom {
    padding-top: 18px;
    padding-bottom: 12px;
  }

  .lux-footer__copyright {
    width: 100%;
    text-align: center;
  }

  .footer_wrapper {
    padding-bottom: 0;
  }
}


/* ===== index_navbar.css ===== */
@charset "UTF-8";



/* CSS Document */
.header {
    width: 100%;
    height: auto;
    position: fixed;
    top: 0;
    z-index: 100;
}

.header .tophd {
    width: 100%;
    height: auto;
    min-height: 60px;
    box-shadow: 0px 0px 8.4px 5px rgba(0, 0, 0, 0.16);
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    padding: 0.3% 0px;
    backdrop-filter: blur(0.5rem);
    background-color: #000000a3;
    border-bottom: 1px solid #ffffff75;
}

/* 導航左欄 */
.navbar-L {
    color: beige;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
}

.navbar-L > a {
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

.logo-size {
    display: block;
    width: 100%;
    height: auto;
    max-width: 180px;
    padding-left: 16px;
    object-fit: contain;
}

@keyframes line {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* 導航右欄 */
.navbar-R {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    z-index: 101;
}

.navbar-R>div,
.navbar-R>div>div {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding-right: 16px;
}

.normal-btn {
    border: 1px solid var(--color-w65) !important;
    color: var(--color-w65);
}

.normal-btn:hover {
    border: 1px solid var(--color-w100) !important;
    color: var(--color-w100) !important;
}

.bell {
    width: 40px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.mycash {
    width: auto;
    min-width: 112px;
    display: flex !important;
    align-items: center;
    gap: 4px;
    justify-content: space-evenly;
}

.mycash>span {
    display: flex;
}

/* 導航菜單 */
.centerbox {
    margin: 0 auto;
    width: 70%;
    height: 100%;
    max-width: 1280px;
}

.logo {
    float: left;
    width: 15%;
    height: 100%;
    text-align: right;
    line-height: 55px;
}

.logo>a>img {
    width: 100%;
    vertical-align: middle;
}

/* .content_all layout/padding → lux-layout-v2.css */

/* login/register */
.modal {
    backdrop-filter: blur(0.5rem);
    background-color: var(--color-b19);
}

.modal-style-2 .modal-login {
    width: 350px;
    margin: 80px auto 0 auto;
}

.modal-style-2 .modal-login a {
    color: var(--color-w100);
    text-decoration: none !important;
}

.modal-style-2 .modal-login .modal-content {
    padding: 25px;
    border-radius: 5px;
    border: none;
    color: #999;
    margin-bottom: 15px;
    background: #fff;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
}

.modal-style-2 .modal-login .modal-header {
    border-bottom: none;
    position: relative;
    justify-content: center;
}

.modal-style-2 .modal-login .close {
    position: absolute;
    top: -10px;
    right: 0px;
}

.modal-style-2 .close:focus,
.modal-style-2 .close:active {
    outline: none !important;
    box-shadow: none;
}

.modal-style-2 .modal-login h4 {
    color: var(--style-2-color);
    text-align: center;
    font-size: 18px;
    margin-top: 0;
    border-bottom: 0;
    text-transform: uppercase;
    line-height: 1;
    letter-spacing: 3px;
    font-weight: bold;
}

.modal-style-2 .modal-login .form-group {
    margin: 16px 0;
}

.modal-style-2 .modal-login label {
    font-weight: normal;
    font-size: 13px;
    margin-top: 16px;
}

.modal-style-2 .modal-login .modal-body {
    padding: 0;
}

.modal-style-2 .modal-login .form-control {
    min-height: 38px;
    padding-left: 5px;
    box-shadow: none !important;
    border-width: 0 0 1px 0;
    border-radius: 0;
    font-size: 13px
}

.modal-style-2 .modal-login .form-control:focus {
    border-color: #ccc;
}

.modal-style-2 .modal-login .input-group-addon {
    min-width: 22px;
    max-width: 42px;
    text-align: center;
    background: none;
    border-width: 0 0 1px 0;
    padding-left: 5px;
    border-radius: 0;
    margin-right: 10px;
    padding-top: 15px;
}

.modal-style-2 .modal-login .btn {
    font-size: 15px;
    font-weight: bold;
    background: var(--color-btn);
    color: var(--color-w100);
    border-radius: 25px;
    border: none;
    min-width: 140px;
    margin: 0 auto;
    padding: 10px;
    outline: none !important;
}

/* .modal-style-2 .modal-login .btn:hover,
.modal-style-2 .modal-login .btn:focus {
    background: var(--style-2-color);
} */
.modal-style-2 input:-internal-autofill-selected {
    background-color: transparent !important;
}

.modal-style-2 .modal-login .hint-text {
    text-align: center;
    padding: 16px 0;
    font-size: 13px;
}

.modal-style-2 .modal-login .modal-footer {
    color: #999;
    border-color: #dee4e7;
    text-align: center;
    margin: 0 -25px -25px;
    font-size: 13px;
    justify-content: center;
}

.modal-style-2 .modal-login a:hover {
    text-decoration: underline;
}

.modal-style-2 .modal-login .fa {
    font-size: 16px;
}

.dark.modal-style-2 .modal-content {
    background: var(--color-nav);
    color: #fff !important;
}

.dark.modal-style-2 .close,
.modal-style-2.dark .modal-login h4 {
    color: #fff !important;
}

.dark.modal-style-2 .modal-login .form-control {
    background: transparent !important;
    color: #fff;
    border-color: #777;
    /* background-color: var(--color-nav); */
}

.dark.modal-style-2 .modal-login .input-group-addon {
    color: #9E9E9E;
}

.dark.modal-style-2 .modal-login .modal-footer {
    border: none;
}

/* .dark.modal-style-2 .modal-login .btn{
    background: #70807e;
} */
.dark .text-danger {
    color: #777 !important;
}

.show-password,
.check-terms {
    display: flex;
    align-items: center;
    gap: 4px;
}

.check-terms {
    gap: 8px;
}

.check-terms a {
    color: var(--color-btn) !important;
}

@media only screen and (max-width: 360px) {
    .modal-style-2 .modal-login {
        width: 100%;
        margin: 5px;
    }

    .modal-style-2 .modal-login form {
        width: 100%;
    }
}

/* footer */
.footer_wrapper {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.decoration-line {
    width: 100%;
    color: var(--color-w65);
}

.footer-nav-box {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    height: auto;
    color: var(--color-w65);
}

.footer-nav-box>p {
    font-size: 0.8rem;
}

/* footer 第一行：logo + 連結列（兩端對齊） */
.footer-top-bar {
    width: 100%;
    max-width: 1600px;
    margin: 12px auto;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.footer-brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.footer-brand img,
.footer-brand .logo-size {
    width: 100%;
    height: auto;
    max-width: 180px;
    padding: 0 !important;
    object-fit: contain;
    display: block;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
}

.footer-links a {
    color: var(--color-w65);
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.18s ease, background 0.18s ease;
}

.footer-links a:hover {
    color: var(--color-w100);
    background: var(--color-w10);
}

.footer-links a i {
    color: var(--color-btn);
    font-size: 0.82rem;
}

.footer-link-divider {
    color: var(--color-w18);
    font-size: 0.85rem;
    user-select: none;
}

/* footer 描述區 */
.footer-desc-box {
    flex-direction: column;
    padding: 0 16px;
}

.footer-desc-title {
    color: var(--color-w100);
    font-size: 1rem;
    font-weight: 600;
    margin: 12px 0 10px;
    letter-spacing: 0.3px;
}

.footer-desc-box p {
    color: var(--color-w65);
    font-size: 0.82rem;
    line-height: 1.85;
    margin: 0 0 10px;
}

.footer-copyright {
    /* margin-top: 8px !important; */
    /* padding-top: 12px; */
    /* border-top: 1px solid var(--color-w10); */
    color: var(--color-w65) !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.4px;
    text-align: center;
}

@media screen and (max-width: 767px) {
    .footer-top-bar {
        flex-direction: column;
        align-items: center;
        gap: 12px;
        text-align: center;
    }

    .footer-links {
        justify-content: center;
    }
}

@media screen and (max-width: 575px) {
    .footer-link-divider {
        display: none;
    }
}

/* footer */
/* footer # */

@media screen and (max-width:767px) {
    .content_all {
        padding-top: 75px;
    }

    .h5hide {
        display: none !important;
    }

    .logo-size {
        max-width: 120px;
        padding-left: 12px;
    }

    .footer_wrapper {
        padding-bottom: 75px;
    }

    .footer-nav-box>div {
        width: 100%;
    }

    .footer-nav-item {
        flex-direction: column-reverse;
        gap: 8px;
    }

    .footer-nav-item>div:first-child {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 15px;
    }

    .footer_wrapper>.footer-nav-box:last-child {
        padding: 0 16px;
    }
}

@media screen and (min-width:768px) and (max-width:1024px) {

    .banner,
    .gamenav,
    .footer_wrapper {
        width: 98svw;
        margin: 0 auto;
    }

    .footer-nav-item>div:first-child {
        width: 25%;
    }

    .footer-nav-item>div:last-child {
        width: 75%;
    }

    .footer_wrapper {
        padding-bottom: 80px;
    }
}

@media screen and (min-width:1024px) {}

/* ============================================================ */
/* [MODIFIED START] auth-modal 新版登入/註冊彈窗樣式             */
/* 參照 登入註冊窗口.html 設計                                   */
/* Bootstrap Modal 結構完整保留，CSS 只覆蓋視覺，不覆蓋 display  */
/* ============================================================ */

/* --- 遮罩：只加 backdrop blur，不動 Bootstrap display/position --- */
.modal-style-2.dark.modal {
    backdrop-filter: blur(6px);
}

/* --- 對話框：寬度上限 + 垂直置中 --- */
.auth-modal-dialog {
    width: 100%;
    max-width: 420px;
    margin: 2.5rem auto;
    animation: authFadeIn 0.25s ease-out;
}

@keyframes authFadeIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- 卡片本體：覆蓋 Bootstrap .modal-content 視覺 --- */
.auth-modal-inner.modal-content {
    background: rgba(26, 26, 26, 0.55) !important;
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.10) !important;
    border-radius: 14px !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6) !important;
    overflow: hidden;
    padding: 0;
}

/* --- 頂部標題列 --- */
.auth-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgb(15 15 15 / 30%);
}

.auth-modal-title {
    font-size: 1rem;
    font-weight: 700;
    color: #f1f5f9;
    letter-spacing: 0.03em;
}

.auth-modal-close {
    background: transparent;
    border: none;
    color: var(--color-w65);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 4px 6px;
    line-height: 1;
    transition: color 0.15s;
}

.auth-modal-close:hover {
    color: var(--color-w100);
}

/* --- 主體內容 --- */
.auth-modal-body {
    padding: 22px 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.auth-modal-body form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* --- 通用輸入欄位包裝 --- */
.auth-field-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.auth-field-icon {
    position: absolute;
    left: 12px;
    color: var(--color-w65);
    font-size: 0.85rem;
    pointer-events: none;
    z-index: 1;
}

.auth-field {
    width: 100%;
    background-color: transparent;
    border: 1px solid var(--color-w25);
    border-width: 0 0 1px 0;
    /* border-radius: 8px; */
    padding: 10px 12px 10px 36px;
    color: var(--color-w100);
    font-size: 0.875rem;
    transition: border-color 0.2s, background-color 0.2s;
    outline: none;
}

.auth-field::placeholder {
    color: var(--color-w25);
}

.auth-field:focus {
    border-color: rgba(0, 61, 121, 0.72);
}

.auth-field-wrap:focus-within .auth-field-icon {
    color: #89c4f4;
}

.auth-field:read-only {
    /* background-color: #1a1a1a; */
    color: var(--color-w100);
    border-color: var(--color-w25);
    cursor: not-allowed;
}

/* select 特殊處理 */
.auth-field option {
    background: #2a2a2a;
    color: #e2e8f0;
}

/* --- 密碼顯示切換按鈕 --- */
.auth-field-eye {
    position: absolute;
    right: 10px;
    background: transparent;
    border: none;
    color: var(--color-w65);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 4px;
    transition: color 0.15s;
    z-index: 1;
}

.auth-field-eye:hover {
    color: var(--color-w100);
}

/* --- 驗證碼行 (input + 圖片並排) --- */
.auth-captcha-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.auth-captcha-input {
    flex: 1;
    padding-left: 12px;
    /* 驗證碼不需圖示縮進 */
}

.auth-captcha-img {
    width: 112px;
    height: 40px;
    border-radius: 8px;
    cursor: pointer;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.10);
}

/* --- 記住我 / 忘記密碼 列 --- */
.auth-remember-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 0;
}

.auth-remember-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    margin: 0;
    font-weight: normal;
    user-select: none;
}

.auth-remember-text {
    font-size: 0.74rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.88);
}

.auth-forget-link {
    font-size: 0.75rem;
    /* 這個彈窗是半透明深底，--color-w65 會依所在頁面解析成深灰或白，
       兩種都可能貼底。直接指定深底上的白。 */
    color: rgba(255, 255, 255, 0.88);
    text-decoration: none !important;
    transition: color 0.15s;
}

.auth-forget-link:hover {
    color: var(--color-btn, #e62e05);
}

/* --- 主按鈕 (紅色) --- */
.auth-btn-primary {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 16px;
    background:
        radial-gradient(120% 140% at 10% 0%, rgba(137, 196, 244, 0.28) 0%, rgba(137, 196, 244, 0) 46%),
        linear-gradient(135deg, rgba(0, 86, 163, 0.98) 0%, rgba(0, 61, 121, 0.98) 44%, rgba(137, 196, 244, 0.97) 100%);
    color: #ffffff;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid rgba(137, 196, 244, 0.72);
    text-shadow: 0 1px 2px rgba(13, 8, 26, 0.72);
    box-shadow:
        0 12px 24px rgba(0, 40, 90, 0.42),
        0 0 14px rgba(0, 61, 121, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
    transition: box-shadow 0.24s ease, transform 0.2s ease, filter 0.22s ease, border-color 0.22s ease;
    letter-spacing: 0.02em;
}

.auth-btn-primary:hover {
    border-color: rgba(137, 196, 244, 0.9);
    box-shadow:
        0 16px 30px rgba(0, 40, 90, 0.42),
        0 0 20px rgba(0, 61, 121, 0.36),
        0 0 28px rgba(137, 196, 244, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.36);
    transform: translateY(-1px);
    filter: saturate(1.12);
}

.auth-btn-primary:active {
    transform: scale(0.98);
}

/* --- 分隔線 --- */
.auth-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px 0;
}

.auth-divider-line {
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
}

.auth-divider-text {
    font-size: 0.65rem;
    color: var(--color-w25);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    white-space: nowrap;
}

/* --- Google 按鈕 --- */
.auth-btn-google {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 16px;
    background-color: #ffffff;
    color: #1e293b;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s, box-shadow 0.2s, transform 0.1s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.auth-btn-google:hover {
    background-color: #f1f5f9;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.auth-btn-google:active {
    transform: scale(0.98);
}

.auth-google-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* --- 手機欄 (國碼 + 號碼) --- */
.auth-phone-row {
    display: flex;
    gap: 8px;
}

.auth-phone-code {
    width: 90px;
    flex-shrink: 0;
    padding-left: 10px;
    text-align: center;
    -webkit-appearance: none;
    appearance: none;
}

.auth-phone-input {
    flex: 1;
    padding-left: 12px;
}

/* --- 簡訊驗證碼列 --- */
.auth-sms-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.auth-sms-row .auth-field {
    flex: 1;
    padding-left: 12px;
}

.auth-btn-sms {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 14px;
    background: linear-gradient(180deg, #0056a3 0%, #003d79 100%);
    color: #ffffff;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    border: 1px solid rgba(0, 61, 121, 0.35);
    box-shadow: 0 6px 14px rgba(0, 61, 121, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.28);
    transition: box-shadow 0.22s ease, transform 0.2s ease, filter 0.22s ease;
    flex-shrink: 0;
}

.auth-btn-sms:hover {
    box-shadow: 0 10px 18px rgba(0, 40, 90, 0.38), 0 0 16px rgba(137, 196, 244, 0.32);
    transform: translateY(-1px);
    filter: saturate(1.1);
}

/* --- 條款列 --- */
.auth-terms-row {
    padding: 2px 0 4px;
}

.auth-terms-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    font-weight: normal;
    cursor: pointer;
    user-select: none;
}

.auth-terms-checkbox {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.auth-terms-box {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    border-radius: 5px;
    border: 1px solid rgba(167, 139, 250, 0.42);
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.22);
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    position: relative;
}

.auth-terms-box::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 2px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    opacity: 0;
    transition: transform 0.16s ease, opacity 0.16s ease;
}

.auth-terms-checkbox:checked + .auth-terms-box {
    border-color: rgba(167, 139, 250, 0.88);
    background:
        radial-gradient(120% 120% at 20% 0%, rgba(137, 196, 244, 0.35) 0%, rgba(137, 196, 244, 0) 55%),
        linear-gradient(135deg, rgba(0, 61, 121, 0.95) 0%, rgba(137, 196, 244, 0.82) 100%);
    box-shadow: 0 0 10px rgba(0, 61, 121, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.auth-terms-checkbox:checked + .auth-terms-box::after {
    transform: rotate(45deg) scale(1);
    opacity: 1;
}

.auth-terms-checkbox:focus-visible + .auth-terms-box {
    outline: 2px solid rgba(167, 139, 250, 0.55);
    outline-offset: 2px;
}

.auth-terms-text {
    flex: 1;
    min-width: 0;
    font-size: 0.74rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.88);
}

.auth-terms-link {
    /* #89c4f4 壓在半透明深底只有 3.1；另外這裡若被 .content_all a 的通用連結色
       蓋掉會變成深藍壓深底（1.26），所以下面 theme-ref 也把它排除。 */
    color: #d6ebfd;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(137, 196, 244, 0.35);
    transition: color 0.15s ease, border-color 0.15s ease;
}

.auth-terms-link:hover {
    color: #e9d5ff;
    border-bottom-color: rgba(233, 213, 255, 0.65);
}

/* --- 推廣碼鎖圖示 --- */
.auth-promo-lock {
    position: absolute;
    right: 10px;
    color: #475569;
    font-size: 0.78rem;
    pointer-events: none;
}

/* --- 底部換頁列 --- */
.auth-modal-footer {
    padding: 14px 20px;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.88);
}

.auth-modal-footer p {
    margin: 0;
}

.auth-switch-link {
    color: #f1f5f9 !important;
    font-weight: 700;
    text-decoration: none !important;
    margin-left: 4px;
    transition: color 0.15s;
}

.auth-switch-link:hover {
    color: var(--color-btn, #e62e05) !important;
}

/* --- 品牌條 --- */
.auth-modal-brand {
    padding: 10px 20px;
    background: rgba(10, 10, 10, 0.45);
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.auth-modal-brand span {
    font-size: 0.6rem;
    /* --color-w25 在這塊深底上只有 2.1 對比，幾乎看不到 */
    color: rgba(255, 255, 255, 0.62);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

/* --- 密碼顯示切換輔助函式 (CSS 無法做，JS 在 EJS 端處理) --- */

/* --- RWD 小螢幕 --- */
@media screen and (max-width: 767px) {
    .auth-modal-dialog {
        max-width: 350px;
    }

    .auth-modal-body {
        padding: 16px 14px 12px;
    }

    .auth-captcha-img {
        width: 90px;
    }

    .auth-phone-code {
        width: 76px;
    }
}

/* ============================================================ */
/* [MODIFIED END] auth-modal 新版登入/註冊彈窗樣式               */
/* ============================================================ */

/* ===== components/navbar.css ===== */
/* 頂部導航：消息未讀 badge（結構與尺寸；配色由 theme-ref-ofa377.css 覆寫） */
.profile-news-unread-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: linear-gradient(135deg, #003d79 0%, #0056a3 100%);
    color: #fff;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
    font-weight: 700;
    box-shadow:
        0 0 0 2px rgba(8, 8, 6, 0.95),
        0 0 10px rgba(0, 61, 121, 0.42),
        0 0 14px rgba(137, 196, 244, 0.22);
}

.profile-news-link .bell:hover {
    border-color: rgba(0, 61, 121, 0.55) !important;
    color: #89c4f4 !important;
}


/* ===== index_content.css ===== */
@charset "UTF-8";

/* index gamenav */
.gamenav {
    margin-bottom: 32px;
}

.game-swiper-wrapper {
    aspect-ratio: 1360 / 425;
    width: 100%;
}

.swiper {
    width: 100%;
    height: auto;
    margin-bottom: 32px;
}

.index_tith2 {
    display: flex;
    margin-bottom: 10px;
}

.index_con_icon {
    width: 20px;
    margin-right: 10px;
}

/* 舊版左線標題；title-with-icon 由 home-games-hub.css，lux-layout 負責對齊 */
.swiper > .index_tith2:not(.title-with-icon) > h2 {
    font-size: 1.1rem;
    color: #003d79;
    font-weight: bold;
    display: flex;
    gap: 4px;
    align-items: center;
    margin: 2px 0 0 0;
}

.swiper>h2>img {
    max-width: 22px;
}

.swiper-button-next,
.swiper-button-prev {
    color: var(--color-w65) !important;
}

.swiper-slide {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.swiper-slide>a {
    display: block;
    position: relative;
}

.swiper-slide img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 3px 3px 3px 0px #00000070;
    filter: brightness(100%);
    transition: filter 0.3s ease-in-out;
    -webkit-user-drag: none;
    /* 禁止拖曳 (適用於 WebKit 瀏覽器：Chrome, Safari, Edge) */
    user-drag: none;
    /* 標準屬性 (部分瀏覽器支援) */
    -webkit-user-select: none;
    /* 禁止選取 (Chrome, Safari, Edge) */
    -moz-user-select: none;
    /* 禁止選取 (Firefox) */
    -ms-user-select: none;
    /* 禁止選取 (IE/Edge) */
    user-select: none;
    /* 標準屬性 */
}

.swiper-slide img:hover {
    filter: brightness(115%);
}

.game-name {
    width: 100%;
    position: absolute;
    bottom: 5px;
}

.game-name>h3 {
    color: #ffffff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75);
    font-size: 0.9rem;
    font-weight: 900;
}

.game-name>h4 {
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
    font-size: 0.7rem;
    font-weight: 200;
    margin: 0;
}

/* 首頁遊戲入口（.home-games-hub）：H4 分類文字做成藍底金框膠囊。
   卡片底圖是淺色時，原本的白色細字幾乎讀不到，所以自帶底色而不是靠陰影。

   垂直置中刻意用「固定高度 + inline-flex 置中 + line-height: 1」，不用上下 padding
   撐高：字高一半是靠字型的 ascent／descent 算出來的，手機（iOS 走 PingFang、
   Android 走 Noto Sans CJK）與桌機字型不同，用 padding 撐就會各平台各偏一點。
   邊框也用整數 1px——1.5px 在 DPR 3 的手機上會被進位成上下不等的裝置像素。 */
.home-games-hub .game-name>h4 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 62px;
    max-width: 100%;
    height: 20px;
    padding: 0 9px;
    border: 1px solid var(--ref-gold, #d4a150);
    border-radius: var(--ref-r-pill, 999px);
    background: linear-gradient(180deg, #0a4c8f 0%, #003d79 100%);
    color: #ffffff;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    box-shadow: 0 2px 6px rgba(0, 12, 28, 0.35);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aspect {
    aspect-ratio: 160 / 227;
}

.aspect img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* hide-mobile */
.mobile_wrapper,
.sm-tpage,
#btmnav {
    display: none;
}

/* mail-notification 
.notification {
    text-decoration: none;
    position: relative;
    display: inline-block;
}*/


/* 0915add */
/* help-text style */
/* .steptext {
    width: 100%;
    height: auto;
    padding-top: 1rem;
    box-sizing: border-box;
    text-align: center;
    color: #8c8c8c;
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 0.09rem;
} 

.about-title2 {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 6px;
    padding-bottom: 3px;
    color: #776663;
    border-bottom: 1px solid #e6dbdb;
}*/

/* 合作廠商 */
/* .gamelogo-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}

.gamelogo-box>img {
    margin: 0.89rem 0.5rem;
} */

/* 遊戲商logo */
.slider {
    width: 100%;
    padding: 10px;
}

.slide-track {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}

.slide img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.slide img {
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: brightness(60%);
    transition: filter 0.3s ease;
}

.slide img:hover {
    filter: brightness(100%);
}

@media (min-width: 768px) {
    .slide-track {
        grid-template-columns: repeat(8, 1fr);
    }
}

/* 優惠規則 & 隱私政策 */
ul.promotion-notice>li {
    margin: 0.2rem 0;
}

*/
/* 常見問題 
ul.qa-box>li {
    margin: 0.8rem 0;
}*/

/* 關於我們 
ul.about-noya>li {
    line-height: 2rem;
    letter-spacing: 0;
}

ul.about-noya>img {
    width: 35%;
    margin: 0 auto 0.5rem auto;
}*/

/* promotion */
.ac_wrapper::-webkit-scrollbar {
    display: none;
}

.ac_wrapper {
    width: 60%;
    height: auto;
    margin: 16px auto 32px auto;
}

.ac_box {
    display: flex;
    gap: 16px;
    align-items: stretch;
    flex-wrap: nowrap;
    justify-content: space-between;
    flex-direction: column;
}

ul.ac_box>li {
    width: 100%;
}

ul.ac_box>li>div,
ul.ac_box>li>div>div {
    height: 100%;
}

ul.ac_box>li>div .image-w {
    height: 100%;
}

.promotion-text {
    width: 100%;
    padding: 1rem;
    position: absolute;
    display: inline-grid;
    z-index: 1;
}

.offer-page {
    display: table;
    margin: 0px auto 20px auto;
    cursor: default;
    color: var(--ref-primary, #003d79);
    border-bottom: 3px solid var(--ref-primary, #003d79);
    line-height: 35px;
    text-align: center;
    font-size: 16px;
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 700;
}


.promotion-text>h2 {
    color: var(--color-w100);
    margin-top: 4px;
    font-weight: 700;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8), -1px -1px 2px rgba(255, 255, 255, 0.2);
}

.promotion-text>h3 {
    color: var(--color-w100);
    margin-top: 4px;
    font-weight: 700;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8), -1px -1px 2px rgba(255, 255, 255, 0.2);
}

.promotion-btn-box {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 32px;
}


.promotion-btn-box>button {
    width: 50%;
}

.promotion-btn {
    margin: 0;
    /* 起點原本 #89c4f4，白字壓在漸層上緣看不清 */
    background: linear-gradient(180deg, rgba(0, 86, 163, 0.98) 0%, rgba(0, 61, 121, 0.98) 100%);
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    color: #ffffff !important;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
    box-shadow: 0 4px 14px rgba(0, 40, 90, 0.32);
}

.promotion-btn:hover {
    color: #ffffff !important;
    background: linear-gradient(180deg, #a8d4f7 0%, var(--ref-primary-hover, #0056a3) 100%);
    border-color: rgba(255, 255, 255, 0.85) !important;
    box-shadow: 0 6px 18px rgba(0, 40, 90, 0.38);
}

/* 活動內文 */
/* 毛玻璃彈窗：與登入／註冊窗口同一套質感（半透明深底 + backdrop blur），
   header／footer 另加一層更亮的玻璃帶做出層次。
   --x-modal-pad 讓 header／footer 能用負 margin 做滿版帶狀，手機版把它歸零即可。 */
.modal-content {
    --x-modal-pad: 15px;
    width: 100%;
    height: auto;
    padding: var(--x-modal-pad);
    background-color: var(--ref-glass-bg) !important;
    -webkit-backdrop-filter: var(--ref-glass-blur);
    backdrop-filter: var(--ref-glass-blur);
    border: 1px solid var(--ref-glass-border) !important;
    border-radius: var(--ref-r-lg);
    box-shadow: var(--ref-glass-shadow);
}

.modal-content .modal-header {
    margin: calc(var(--x-modal-pad) * -1) calc(var(--x-modal-pad) * -1) 12px;
    padding: 14px 18px;
    background: var(--ref-glass-header);
    border-bottom: 1px solid var(--ref-glass-border);
    border-top-left-radius: var(--ref-r-lg);
    border-top-right-radius: var(--ref-r-lg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.modal-content .modal-footer {
    margin: 12px calc(var(--x-modal-pad) * -1) calc(var(--x-modal-pad) * -1);
    padding: 12px 18px;
    background: var(--ref-glass-footer);
    border-top: 1px solid var(--ref-glass-border);
    border-bottom-left-radius: var(--ref-r-lg);
    border-bottom-right-radius: var(--ref-r-lg);
}

.modal-content .modal-title {
    color: var(--ref-on-dark);
    font-weight: 700;
}

/* 標題／說明列的 icon 直接黏著中文，補間距 */
.modal-content .modal-title i,
.modal-content .money_title i,
.modal-content .filter-label i,
.modal-content .verify-form-label i,
.modal-content .verify-row-label i,
.modal-content .btn i,
.modal-content .x-btn i,
.modal-content th i {
    margin-right: 8px;
}

.modal-content .modal-title i,
.modal-content .money_title i,
.modal-content .filter-label i {
    color: var(--ref-gold-hi);
}

.modal-content .btn-close {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ref-on-dark-muted);
    font-size: 1.5rem;
    line-height: 1;
    opacity: 1;
    cursor: pointer;
}

.modal-content .btn-close:hover {
    color: var(--ref-on-dark);
}

/* 有些彈窗的關閉鈕沒有寫 &times;，原本靠 bootstrap 的背景圖示，
   但上面把 background 清成 transparent 後就整顆消失了 */
.modal-content .btn-close:empty::before {
    content: "\00d7";
}

/* 彈窗內的 select / input 原本是白底，在深底上會整塊跳出來 */
.modal-content select,
.modal-content input[type="text"],
.modal-content input[type="number"],
.modal-content input[type="password"],
.modal-content .zeroModaltext_money,
.modal-content .text_money {
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--ref-border-dark);
    border-radius: var(--ref-r-sm);
    color: var(--ref-on-dark);
}

.modal-content select:focus,
.modal-content input:focus,
.modal-content .zeroModaltext_money:focus,
.modal-content .text_money:focus {
    outline: none;
    border-color: var(--ref-secondary);
    box-shadow: 0 0 0 3px rgba(137, 196, 244, 0.18);
}

.modal-content select option {
    background-color: var(--ref-surface-dark);
    color: var(--ref-on-dark);
}

.promo-popup table {
    width: 100%;
    border-collapse: collapse;
}

/* 優惠詳情在深色玻璃彈窗內；#242424 與底色幾乎同色 → 改淺色框 */
.promo-popup table,
.promo-popup th,
.promo-popup td {
    border: 1px solid rgba(255, 255, 255, 0.32);
}

/* .modal-content table {
    width: 100%;
}

.modal-content table th {
    padding: 5px;
} */

.dis-con-title h4 {
    color: #FFD700;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
    border-left: 5px solid #FF230A;
    padding-left: 10px;
}

.dis-con-title h5 {
    color: #FFD700;
    font-size: 17px;
    font-weight: bold;
    margin-bottom: 10px;
}

.dis-con-title ul {
    padding-left: 1.5em;
    margin-bottom: 1em;
    list-style: none;
}

.dis-con-title li {
    position: relative;
    padding-left: 1.2em;
    margin-bottom: 8px;
    color: #ddd;
    font-size: 15px;
    line-height: 1.6;
}

.dis-con-title li::before {
    content: "⭐";
    position: absolute;
    left: 0;
    top: 2px;
    font-size: 14px;
    line-height: 1;
}

/* .sm-actitle {
    display: none;
} 

.promotion-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 100%;
    height: 100%;
    color: var(--color-w100);
}

.promotion-title>h1 {
    letter-spacing: 0.3rem;
    font-size: 2.7rem;
}

.promotion-title>h2 {
    color: var(--color-w65);
    font-size: 1.4rem;
    font-weight: 300;
    letter-spacing: 0.2rem;
}

.promotion-title>h1:after {
    border: 3px solid var(--color-btn);
    width: 100px;
    height: auto;
    display: block;
    content: "";
    margin: 32px auto 0 auto;
}*/

/* leaderboard 
.rank-board {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.leaderboard {
    width: 24%;
}

.leaderboard h3 {
    font-size: 18px;
    color: #e1e1e1;
    padding: 12px 13px 18px;
    background-color: var(--color-nav);
    margin-bottom: 0;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.leaderboard h3 i {
    font-size: 1.7rem;
    margin-right: 8px;
}

.leaderboard ol {
    counter-reset: leaderboard;
    padding: 0;
    margin-top: 0;
}

.leaderboard ol li {
    position: relative;
    z-index: 1;
    font-size: 14px;
    counter-increment: leaderboard;
    padding: 18px 10px 18px 50px;
    cursor: pointer;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0) scale(1, 1);
    list-style: none;
}

.leaderboard ol li::before {
    content: counter(leaderboard);
    position: absolute;
    z-index: 2;
    top: 15px;
    left: 15px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    color: #c24448;
    background: #fff;
    border-radius: 20px;
    text-align: center;
}

.leaderboard ol li mark {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 18px 10px 18px 50px;
    margin: 0;
    background: none;
    color: #fff;
}

.leaderboard ol li mark::before,
.leaderboard ol li mark::after {
    content: "";
    position: absolute;
    z-index: 1;
    bottom: -11px;
    left: -9px;
    border-top: 10px solid #c24448;
    border-left: 10px solid transparent;
    transition: all 0.1s ease-in-out;
    opacity: 0;
}

.leaderboard ol li mark::after {
    left: auto;
    right: -9px;
    border-left: none;
    border-right: 10px solid transparent;
}

.leaderboard ol li small {
    position: relative;
    z-index: 2;
    display: block;
    text-align: right;
}

.leaderboard ol li::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fa6855;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease-in-out;
    opacity: 0;
}

.leaderboard ol li:nth-child(1) {
    background: #fa6855;
}

.leaderboard ol li:nth-child(1)::after {
    background: #fa6855;
}

.leaderboard ol li:nth-child(2) {
    background: #e0574f;
}

.leaderboard ol li:nth-child(2)::after {
    background: #e0574f;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.08);
}

.leaderboard ol li:nth-child(2) mark::before,
.leaderboard ol li:nth-child(2) mark::after {
    border-top: 6px solid #ba4741;
    bottom: -7px;
}

.leaderboard ol li:nth-child(3) {
    background: #d7514d;
}

.leaderboard ol li:nth-child(3)::after {
    background: #d7514d;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.11);
}

.leaderboard ol li:nth-child(3) mark::before,
.leaderboard ol li:nth-child(3) mark::after {
    border-top: 2px solid #b0433f;
    bottom: -3px;
}

.leaderboard ol li:nth-child(4) {
    background: #cd4b4b;
}

.leaderboard ol li:nth-child(4)::after {
    background: #cd4b4b;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15);
}

.leaderboard ol li:nth-child(4) mark::before,
.leaderboard ol li:nth-child(4) mark::after {
    top: -7px;
    bottom: auto;
    border-top: none;
    border-bottom: 6px solid #a63d3d;
}

.leaderboard ol li:nth-child(5) {
    background: #c24448;
    border-radius: 0 0 10px 10px;
}

.leaderboard ol li:nth-child(5)::after {
    background: #c24448;
    box-shadow: 0 -2.5px 0 rgba(0, 0, 0, 0.12);
    border-radius: 0 0 10px 10px;
}

.leaderboard ol li:nth-child(5) mark::before,
.leaderboard ol li:nth-child(5) mark::after {
    top: -9px;
    bottom: auto;
    border-top: none;
    border-bottom: 8px solid #993639;
}

.leaderboard ol li:hover {
    z-index: 2;
    overflow: visible;
}

.leaderboard ol li:hover::after {
    opacity: 1;
    transform: scaleX(1.06) scaleY(1.03);
}

.leaderboard ol li:hover mark::before,
.leaderboard ol li:hover mark::after {
    opacity: 1;
    transition: all 0.35s ease-in-out;
}*/

.lobby-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--color-b44);
    padding: 8px;
    border-radius: 50px;
    box-shadow: -1px 0px 1px #ff00008f;
    border: 1px solid var(--color-r19);
}

.icon-gamelobby {
    color: var(--color-btn);
}

.lobby-title {
    font-size: 1.2rem;
    padding-left: 4px;
}

.wallet {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 30px;
    padding: 4px 12px;
    box-shadow: 2px 4px 4px var(--color-bg);
    border: 1px solid var(--color-w10);
    margin-bottom: 0 !important;
}

.wallet span {
    font-size: 1.1rem;
}

.icon-refresh {
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: var(--color-r67);
    padding: 3px;
    border-radius: 100%;
    box-shadow: 0px 1px 4px var(--color-bg);
}

.icon-refresh:hover {
    color: var(--color-b44);
    transform: rotate(90deg);
}

.lobby-box {
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 18px;
}

.lobby-box>.swiper-slide {
    width: calc(100% / 8 - 8px) !important;
}

/* 404 maintain */
.promotion-title {
    text-align: center;
}

.single-page .btn {
    margin: 32px auto;
}

.single-page p {
    margin-top: 14px;
    color: var(--color-w65);
    padding: 0 24px;
    font-size: 0.9rem;
    text-align: center;
}

/* 首頁跑馬燈 */
.marquee-container {
    width: 100%;
    backdrop-filter: blur(6px);
    border: 1px solid rgba(200, 200, 200, 0.3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    padding: 5px 16px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    overflow: hidden;
    margin-bottom: 14px;
    position: relative;
}

/* 間距只給外層 <i>：nest 模式下 svg 也帶著 fa-bullhorn class 塞在 <i> 裡，
   兩層都吃 margin-right 會讓喇叭跟文字的距離變成 20px。 */
.marquee-container i.fa-bullhorn,
.marquee-container i.fa-cards {
    color: #fff;
    margin-right: 10px;
    flex-shrink: 0;
    font-size: 16px;
}

.marquee {
    overflow: hidden;
    width: 100%;
    position: relative;
    white-space: nowrap;
}

.marquee-content li {
    display: inline-block;
    list-style: none;
    margin-right: 50px;
}

.marquee-content a {
    text-decoration: none;
    color: #e5e5e5;
    font-size: 15px;
    font-weight: 400;
}

.marquee-content a:hover {
    color: #ff5555;
}

.announcement-date {
    color: #ccc;
    font-size: 14px;
    margin-right: 6px;
}

.announcement-text {
    color: #e5e5e5;
}

/* ── 平板 + 手機共用（≤1024px）── */
@media screen and (max-width: 1024px) {
    .mobile_wrapper,
    #btmnav {
        display: flex;
        flex-direction: column;
    }

    .hotgame-title {
        display: none;
    }

    .sm-nav {
        display: flex;
        justify-content: space-around;
        width: 100%;
        height: 100%;
    }

    ul.sm-nav>li {
        width: 3rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .sm-navitem {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: var(--color-w100);
        gap: 4px;
    }

    .highlight>i {
        font-size: 1rem !important;
    }

    ul.sm-nav>li>a {
        font-size: 0.8rem;
    }

    .sm-navitem>i {
        color: var(--color-btn);
        font-size: 1.05rem;
    }

    .nav-highlight {
        background: var(--color-btn);
        border-radius: 50%;
        height: 40px;
        margin-top: -20px;
        width: 40px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        color: var(--color-w100) !important;
    }

    .bottom-nav {
        width: 100%;
        height: 60px;
        border-top-left-radius: 7px;
        border-top-right-radius: 7px;
        position: fixed;
        bottom: 0;
        background-color: #000000a3;
        z-index: 2;
        backdrop-filter: blur(0.5rem);
        border-top: 1px solid #ffffff75;
    }

    .bottom-nav>ul.sm-nav>li>.sm-navitem {
        -webkit-tap-highlight-color: transparent;
    }

    .sm-pagetitle {
        width: 100%;
        text-align: center;
    }

    .hotgame {
        width: 95%;
        height: 100vh;
        overflow-y: scroll;
        padding-bottom: 100px;
    }

    .profile_content_box {
        box-shadow: none !important;
    }

    .modal-content>img {
        width: 100%;
    }

    .img>img {
        width: 100%;
    }

    .promotion-title>h1 {
        font-size: 1.8rem;
    }

    .promotion-title>h1:after {
        margin: 16px auto 0 auto;
    }

    .promotion-title>h2 {
        font-size: 1rem;
        margin-top: 10px;
    }
}

@media screen and (max-width: 767px) {
    .gamenav {
        padding: 0 10px;
    }

    .vertical-tab {
        flex-direction: column;
    }

    .sm-box {
        width: 100%;
        height: auto;
        margin: 5px 0;
        padding: 0 20px 60px 20px;
    }

    #sm-unlogin {
        display: none;
    }

    .sm-name {
        display: flex;
        flex-direction: row;
        align-items: center;
        color: #8c8c8c;
    }

    .sm-gologin {
        width: 4.5em;
        height: 2.3rem;
        margin: 0 0.2rem;
        display: flex;
        border-radius: 6px;
        background: linear-gradient(to top right, #FFA67F, #fff, #FFDEC3, #F6B094);
        justify-content: center;
        align-items: center;
        box-shadow: 2px 2px 9px #b5a29f;
    }

    .sm-gologin>a {
        color: var(--color-w100);
    }

    .sm-tpage {
        display: flex;
        padding: 8px 0 16px 8px;
        color: var(--color-w65);
        font-size: 1.1rem;
    }

    .sm-tpage>div:first-child {
        z-index: 97;
    }

    .ac_wrapper {
        width: 90%;
        height: auto;
        padding-top: 20px;
    }

    .ac_box {
        gap: 0.4rem;
    }

    ul.ac_box>li {
        width: 100%;
    }

    .lobby-box>.swiper-slide {
        width: calc(100% / 4 - 8px) !important;
    }

    .modal-content {
        --x-modal-pad: 0px;
        font-size: 14px;
    }

    .single-page {
        margin: 80px 0;
    }

    .single-page p {
        margin-top: 20px;
    }

    .promotion-text>h2 {
        font-size: 1.4rem;
    }

    .promotion-text>h3 {
        font-size: 1.2rem;
    }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
    .sm-box {
        width: 100%;
        height: auto;
        margin: 5px 0;
        padding: 0 20px 24px 20px;
    }

    .sm-gamenav {
        width: 90%;
        margin: 0 auto;
        height: 420px;
    }

    .sm-tpage {
        display: none;
    }

    #sm-unlogin>.sm-nav {
        justify-content: space-evenly;
        width: 80%;
        margin: 0 auto;
    }

    .ac_wrapper {
        width: 90%;
        height: 100%;
        padding-top: 0;
        overflow-y: scroll;
    }

    .ac_box {
        gap: 0.9rem;
    }

    ul.ac_box>li {
        width: 48%;
    }
}

/* === custom-slider 手機/桌機通用樣式 === */
.mod-ga-slide {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0 5px;
    /* ✅ 新增左右內距，避免圖片切邊 */
    margin-bottom: 16px;
}


.mod-ga-slide__track {
    display: flex;
    gap: 10px;
    /* 圖與圖的間距 */
}

.mod-ga-slide__item {
    flex: 0 0 100%;
    scroll-snap-align: start;
    box-sizing: border-box;
}

@media screen and (min-width: 768px) {
    .mod-ga-slide__item {
        flex: 0 0 50%;
    }
}

.mod-ga-slide__item img {
    width: 100%;
    display: block;
    border-radius: 8px;
    user-select: none;
    -webkit-user-drag: none;
    filter: brightness(0.7);
    transition: filter 0.3s ease;
}

/* 只有在滑鼠裝置上才啟用 hover 效果（避免手機觸發） */
@media (hover: hover) {
    .mod-ga-slide__item img:hover {
        filter: brightness(1);
    }
}

/* 手機版：一行一張 */
@media screen and (max-width: 767px) {
    .mod-ga-slide {
        padding: 0;
    }

    .mod-ga-slide__item img {
        filter: inherit;
    }
}
/* ══════════════════════════════════════════════════════════════════
   進入遊戲館彈窗（#gameEntryModal / #myModal）
   ──────────────────────────────────────────────────────────────────
   這組樣式原本放在 profile.css 且限定 #myModal 作用域。但全站共用的進館彈窗
   是 navbar 掛的 #gameEntryModal，而 profile.css 只有會員頁與首頁載入，
   結果彈窗按鈕既拿不到變體樣式、也沒有底色，瀏覽器就用 UA 預設的
   buttonface(#f0f0f0) 淺灰，配上近白字＝完全看不見。
   改放這裡（三支 head 都載入）並改用 .gametip-box 作用域。
   ══════════════════════════════════════════════════════════════════ */

.t-btn {
    width: 100%;
    cursor: pointer;
    height: 2.5rem;
    border-radius: 8px;
    /* 底色一律自己指定，不吃 UA 預設 */
    background: rgba(0, 61, 121, 0.38);
    color: #f9fbff;
    font-size: 0.95rem;
    margin: 8px 0;
    border: 1px solid rgba(137, 196, 244, 0.62);
    text-shadow: 0 1px 2px rgba(13, 8, 26, 0.62);
    box-shadow: 0 10px 20px rgba(0, 40, 90, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.24);
    transition: transform 0.2s ease, box-shadow 0.22s ease, filter 0.22s ease, border-color 0.22s ease;
}

.gametip-box .t-btn {
    margin: 6px 0;
    text-shadow: none;
    box-shadow: none;
}

/* 漸層起點原本是 #89c4f4，白字壓在上緣只有 1.9 對比 */
.gametip-box .t-btn--primary {
    height: 2.85rem;
    margin-top: 10px;
    color: #ffffff;
    font-weight: 700;
    border: 1px solid rgba(137, 196, 244, 0.55);
    background:
        radial-gradient(120% 140% at 10% 0%, rgba(137, 196, 244, 0.22) 0%, rgba(137, 196, 244, 0) 52%),
        linear-gradient(180deg, var(--ref-primary-hover, #0056a3) 0%, var(--ref-primary, #003d79) 100%);
    box-shadow: 0 10px 22px rgba(0, 40, 90, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.gametip-box .t-btn--primary:hover {
    background:
        radial-gradient(120% 140% at 10% 0%, rgba(137, 196, 244, 0.28) 0%, rgba(137, 196, 244, 0) 52%),
        linear-gradient(180deg, #0f6ec4 0%, var(--ref-primary-hover, #0056a3) 100%);
    border-color: rgba(137, 196, 244, 0.78);
    box-shadow: 0 12px 26px rgba(0, 40, 90, 0.42), 0 0 18px rgba(137, 196, 244, 0.16);
    transform: translateY(-1px);
}

.gametip-box .t-btn--accent {
    color: #ecf7ff;
    font-weight: 600;
    background: rgba(0, 61, 121, 0.55);
    border: 1px solid rgba(137, 196, 244, 0.42);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.gametip-box .t-btn--accent:hover {
    color: #ffffff;
    background: rgba(0, 86, 163, 0.62);
    border-color: rgba(137, 196, 244, 0.62);
}

.gametip-box .t-btn--outline {
    color: rgba(236, 247, 255, 0.92);
    font-weight: 500;
    background: transparent;
    border: 1px solid rgba(137, 196, 244, 0.34);
    box-shadow: none;
}

.gametip-box .t-btn--outline:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(137, 196, 244, 0.52);
}

.gametip-box .t-btn--ghost {
    color: rgba(255, 255, 255, 0.78);
    font-weight: 500;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: none;
}

.gametip-box .t-btn--ghost:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.22);
}

#myModal .modal-footer {
    justify-content: flex-end;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 10px;
}

/* 關閉鈕吃 bootstrap 的 .btn，色值來自 :root 的 --bs-body-color，在深底彈窗裡
   會解析成淺色主題的深灰。這裡直接指定。 */
#myModal .gamenav-modal-close,
#myModal .gamenav-modal-close.btn,
.modal-content .gametip-modal-close,
.modal-content .gametip-modal-close.btn {
    min-width: 72px;
    height: auto;
    padding: 6px 14px;
    font-size: 0.82rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.72) !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none;
}

#myModal .gamenav-modal-close:hover,
.modal-content .gametip-modal-close:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.06) !important;
}

/* ── 深色彈窗裡的文字保險絲 ────────────────────────────────────────
   .modal-content 是實心深藍底，但彈窗內容常沿用會員頁的 class，那些 class
   在淺色主題下被指定成深灰字（例如 ui.css 的 .money_title 用 --ref-text），
   放進深底彈窗就變成深字壓深底。這裡按 class 指名改成深底上的對比色。
   ────────────────────────────────────────────────────────────────── */
.modal-content .money_title,
.modal-content .filter-label,
.modal-content .x-field__label,
.modal-content label,
.modal-content .note,
.modal-content .verify-form-label,
.modal-content .verify-row-label,
.modal-content .verify-info-label {
    color: var(--ref-on-dark-muted) !important;
}

.modal-content .money_title {
    border-left-color: var(--ref-secondary);
}

.modal-content h1,
.modal-content h2,
.modal-content h3,
.modal-content h4,
.modal-content h5 {
    color: var(--ref-on-dark);
}

/* bootstrap 把 --bs-modal-color 綁在 .modal 上，吃的是 :root 已解析的
   --bs-body-color（XHE 淺色主題 = #666666）。深底彈窗內文（p／進度說明）會看不清。 */
.modal-content,
.modal-content .modal-body,
.modal-content p {
    color: var(--ref-on-dark);
}

/* Font Awesome 7 SVG 模式：底部導覽不再是 <i>，維持原有尺寸與色彩 */
@media screen and (max-width: 1024px) {
    /* 「選單」那顆是 <button> 不是 <a>，用 .sm-navitem 才不會漏掉 */
    /* 「選單」那顆是 <button> 不是 <a>，用 .sm-navitem 才不會漏掉。
       後代選擇器：FA nest 模式下 svg 會多包一層 <i>，直接子層選擇器會失效 */
    ul.sm-nav>li>.sm-navitem svg {
        font-size: 18px;
        color: var(--color-btn);
    }

    .nav-highlight {
        width: auto;
        height: auto;
        padding: 11px;
        font-size: 18px;
    }
}