@charset "UTF-8";
/* ==========================================================================
   dcj88 base.css ─ 設計 token（v8：淺底，沿用 WP 前台）
   ==========================================================================
   Owner 2026-09-07：/action/ 沿用 WP 前台的顏色風格，整個翻成淺色。

   色票不是憑印象配的，是把 dcj88.com 前台實際算出來的顏色量過一輪
   （tools/wp_palette.py，按覆蓋面積排序）：

     body 底      #FFFFFF          內文        #41506B
     淺藍區塊     #F2F7FF / #E8F0FF 標題與連結  #0D2260
     深藍色塊     #0D2260 / #0B1A44 金色        #E3B23C
     卡片圓角     18px              字型        Manrope（拉丁）

   ── 翻淺色要處理的那件事，這裡先講清楚 ──────────────────────────────
   站上自己的素材是**為深底畫的**：館別圖示 nav/icon-* 亮度 215~255、
   廠商 LOGO 216~255、底部導覽 ft-nav/* 234~255，全是白色去背；
   只有會員圖示 member/icon/* 是純黑。
   所以淺底不是把 --bg 換掉就好 —— 白素材放白底上會直接消失。
   做法是把 46-ink-polarity.css 整層反過來：**白素材轉深、黑素材原樣用**，
   而不是像 v5 那樣在每一組白素材後面墊一塊深藍牌子
   （那就是「白紙上貼滿深色貼紙」的來源，那一版被打回過）。

   金色在淺底上不能當文字色：#E3B23C 對白底只有 1.9:1。
   所以 --gold 這個 token 改成**文字安全的深金** #8A6410（對白底 5.4:1），
   當底色用的亮金留在 --gold-d 與 --grad-gold。
   實測 --gold 有 24 處是當 color 用、只有 2 處當背景，這樣分才對得上。

   天條 54 要求與 WP 共用色票／字級／按鈕樣式／圓角／間距 —— 這一版是直接沿用；
   版面結構仍然各走各的（天條 53／54）。
   ========================================================================== */

:root{
  /* ---------------------------------------------------- 品牌色相（量自 WP 前台） */
  --navy:#0D2260;
  --navy-d:#0B1A44;
  --navy-x:#071129;
  --blue-l:#12439F;

  /* ---------------------------------------------------- 表面：四階
     白當卡片、極淺藍當頁面底 —— 卡片才浮得起來。
     階與階之間差約 4~6 的明度，看得出層次又不會變成灰階梯。 */
  --bg:#F4F8FF;          /* 頁面底 */
  --surf:#FFFFFF;        /* 卡片、面板、頁首 */
  --surf-2:#F2F7FF;      /* 抬升：hover、表格斑馬紋、次級面板 */
  --surf-3:#E8F0FF;      /* 輸入框、chip、被選中的列 */
  --surf-glass:rgba(255,255,255,.88);   /* 毛玻璃列（頁首、底部導覽） */

  /* 舊名沿用，語意是「比卡片再深一階的表面」 */
  --sky:var(--surf-2);
  --sky-2:var(--surf-3);

  /* ---------------------------------------------------- 線
     淺底上的線用深藍低透明度疊，不同表面上才不會斷層。 */
  --line:rgba(13,34,96,.12);
  --line-2:rgba(13,34,96,.07);
  --line-hi:rgba(13,34,96,.34);   /* 選中、強調 */

  /* ---------------------------------------------------- 字
     對白底的實測：ink 14.9 / body 8.3 / muted 5.1，全部過 AA。 */
  --ink:#0D2260;
  --body:#41506B;
  --muted:#5F6E8C;
  --on-navy:#FFFFFF;
  --on-navy-dim:#CDDEF8;
  --on-gold:#2A1B00;     /* 金底上的字，對 #E3B23C 是 11.4:1 */

  /* ---------------------------------------------------- 強調色
     主強調是 WP 那支深藍，金色退為次要（獎勵、金額、主要動作的底）。 */
  --gold:#8A6410;        /* 淺底上的金「字」5.4:1 —— 亮金當字只有 1.9:1，不能用 */
  --gold-l:#F0C765;
  --gold-d:#E3B23C;      /* 當底色用的亮金（WP 那支） */
  --blue:#12439F;        /* 連結、資訊 8.6:1 */
  --orange:#B4460F;      /* 狀態色（文字用）對白底 6.1:1 */
  --danger:#C42B2B;
  --ok:#1F7A46;

  --grad-gold:linear-gradient(180deg,#F5D384 0%,#E3B23C 52%,#C8992A 100%);
  /* 橘鈕配白字：整條要夠深才過線。#C2470D 5.6 / #A83208 6.4 */
  --grad-orange:linear-gradient(180deg,#D2440F 0%,#BF3B0A 55%,#A83208 100%);
  --grad-head:linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,251,255,.94));
  --grad-navy:linear-gradient(160deg,#0D2260 0%,#0B1A44 100%);
  --grad-card:linear-gradient(180deg,#FFFFFF 0%,#F7FAFF 100%);

  /* ---------------------------------------------------- 間距尺度（沒動，天條 54） */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:72px;
  --gap-sec:56px;        /* 區塊間距：App 介面比行銷頁緊，從 72 收到 56（天條 53） */
  --pad-x:var(--s4);
  --maxw:1160px;

  /* ---------------------------------------------------- 圓角與陰影
     淺底上投影是真的有用的層次工具，不像深底幾乎看不見。
     卡片圓角跟 WP 對齊到 18px。 */
  --r-s:10px; --r-m:14px; --r-l:18px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(13,34,96,.06), 0 10px 24px -18px rgba(13,34,96,.30);
  --sh-2:0 2px 6px rgba(13,34,96,.07), 0 24px 44px -28px rgba(13,34,96,.40);
  --sh-head:0 6px 22px -18px rgba(13,34,96,.45);
  --sh-gold:0 6px 18px -10px rgba(227,178,60,.55);

  /* ---------------------------------------------------- 固定元件高度 */
  --h-head:72px;
  --h-mq:40px;
  --h-ftnav:66px;

  /* ---------------------------------------------------- 按鈕尺度（三階，差 ≥6px 才看得出層級） */
  --btn-lg:54px; --btn-md:46px; --btn-sm:38px;
  --tap:44px;
  --press:120ms;

  /* ---------------------------------------------------- 圖示尺度 */
  --icon-sm:20px; --icon-md:24px; --icon-lg:32px; --tab-icon:26px;

  /* WP 前台的拉丁字用 Manrope，中文照舊 Noto Sans TC */
  --sans:"Manrope","Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,-apple-system,sans-serif;
}

@charset "UTF-8";
/* ==========================================================================
   dcj88 base.css ─ 第一段：自帶版面框架
   取代 bootstrap.min.css（155 KB）。只重建站上 54 頁實際用到的那一小部分，
   語意與 Bootstrap 一致，所以原始 HTML 一個 class 都不必改。

   為什麼要自己寫：
     * 站上同時載了 Bootstrap 5 的 CSS 與 Bootstrap 4 的 JS，
       版本本來就對不起來，留著只會讓兩套規則互相打架
     * 155 KB 裡真正用到的不到 8%
     * 全部收進同一支檔案，這支停掉就完全還原，不必去追別人的樣式表

   刻意不用 @layer：支援度雖然到 95%，但不支援時整個 @layer 區塊會被略過，
   等於整頁沒樣式。這裡沒有測試站，不賭這個。改用單純的先後順序：
   框架 → 元件 → 站台版面 → 工具類（工具類照 Bootstrap 慣例帶 !important）。
   ========================================================================== */

/* --------------------------------------------------------------- 重置 */
/* 只碰版面真的需要的，不做全套 reset，免得動到 flickity / swiper / fileinput
   這些自帶樣式的第三方元件。 */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  background-color: var(--bg);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; background-color: transparent; }
button, input, select, textarea { font: inherit; color: inherit; margin: 0; }
button { background: none; border: 0; cursor: pointer; }
table { border-collapse: collapse; }
hr { box-sizing: content-box; height: 0; overflow: visible; border: 0; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------- 容器 */
.container,
.container-fluid {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.container { max-width: var(--maxw); }

/* --------------------------------------------------------------- 網格 */
.row {
  --gx: 24px;
  --gy: 0px;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(var(--gy) * -1);
  margin-right: calc(var(--gx) / -2);
  margin-left: calc(var(--gx) / -2);
}
.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--gx) / 2);
  padding-left: calc(var(--gx) / 2);
  margin-top: var(--gy);
}
.col { flex: 1 0 0%; }
.col-auto { flex: 0 0 auto; width: auto; }

/* --------------------------------------------------------------- 狀態 class
   這幾個是 Bootstrap 4 的 JS 會實際加上／拿掉的，行為必須一模一樣，
   不然分頁籤與公告彈窗會壞掉。 */
.fade { transition: opacity .15s linear; }
.fade:not(.show) { opacity: 0; }
/* Bootstrap 3 的寫法是 `.fade.in` 與 `.tab-pane.active`，不是 `.show`。
   站上有好幾支頁面是那個年代的 markup（會員的匯款/轉移/出售記錄就是），
   只認 .show 的話那些內容會停在 opacity:0 —— 版面高度佔著，畫面卻整片空白。 */
.fade.in,
.fade.active,
.tab-pane.active,
.collapse.in { opacity: 1; }
.collapse.in { display: block; }

.collapse:not(.show) { display: none; }
.collapsing {
  height: 0;
  overflow: hidden;
  transition: height .35s ease;
}

.tab-content > .tab-pane { display: none; }
.tab-content > .active { display: block; }

/* --------------------------------------------------------------- 彈窗 */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
  outline: 0;
}
.modal-open { overflow: hidden; }
.modal-open .modal { overflow-x: hidden; overflow-y: auto; }

.modal-dialog {
  position: relative;
  width: auto;
  margin: 12px;
  pointer-events: none;
}
.modal.fade .modal-dialog {
  transform: translate(0, -40px);
  transition: transform .3s ease-out;
}
.modal.show .modal-dialog { transform: none; }
.modal-dialog-centered {
  display: flex;
  align-items: center;
  min-height: calc(100% - 24px);
}

.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background-color: var(--surf);
  outline: 0;
}
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; }
.modal-body { position: relative; flex: 1 1 auto; }
.modal-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; }

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1040;
  width: 100vw;
  height: 100vh;
  background-color: #050E24;
}
.modal-backdrop.fade { opacity: 0; }
.modal-backdrop.show { opacity: .62; }

@media (min-width: 576px) {
  .modal-dialog { max-width: 500px; margin: 28px auto; }
  .modal-dialog-centered { min-height: calc(100% - 56px); }
}
@media (min-width: 992px) {
  .modal-lg, .modal-xl { max-width: 800px; }
}
@media (min-width: 1200px) {
  .modal-xl { max-width: 1140px; }
}

/* --------------------------------------------------------------- 零件 */
.clearfix::after { display: block; clear: both; content: ""; }

.img-fluid { max-width: 100%; height: auto; }

.sr-only,
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.small { font-size: .9em; }

.input-group { position: relative; display: flex; flex-wrap: wrap; align-items: stretch; width: 100%; }
.input-group > .form-control,
.input-group > input { position: relative; flex: 1 1 auto; width: 1%; min-width: 0; }
.input-group-prepend,
.input-group-append { display: flex; }
.input-group-text { display: flex; align-items: center; }

.progress { display: flex; overflow: hidden; }
.progress-bar { display: flex; flex-direction: column; justify-content: center; overflow: hidden; }

/* ==========================================================================
   dcj88 base.css ─ 基礎排版與節奏
   排在框架之後、版面之前。框架只做「不會壞事」的重置，
   真正的字級、顏色、節奏在這一段。

   （這一段是拆檔時掉過一次的：標題全部退回瀏覽器預設，
     頁尾的 h5 從 17px 變成 13.28px，固定頁首也把內容壓住了。
     巡檢在 1280 量到 271 個 13.28px 才抓出來。）
   ========================================================================== */

body {
  color: var(--ink);
  /* 固定頁首 + 走馬燈佔掉的高度，內容要讓出來 */
  padding-top: calc(var(--h-head) + var(--h-mq));
}

a { color: var(--blue); }
a:hover { color: var(--gold); }

p { margin: 0 0 var(--s2); }

hr { border-top: 1px solid var(--line); margin: var(--s4) 0; }

/* --------------------------------------------------------------- 字級階層
   與 WordPress 前台同一組尺度（天條 54），只是這裡是操作介面，
   最上層不需要前台那種 40px 的主視覺級距。 */
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--s2);
  color: var(--ink);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: -.01em;
}
h1 { font-size: 34px; font-weight: 900; }
h2 { font-size: 28px; font-weight: 900; }
h3 { font-size: 22px; }
h4 { font-size: 19px; }
h5 { font-size: 17px; }
h6 { font-size: 16px; }

@media (max-width: 767.98px) {
  h1 { font-size: 26px; }
  h2 { font-size: 23px; }
  h3 { font-size: 20px; }
  h4 { font-size: 18px; }
}

/* --------------------------------------------------------------- 區塊節奏
   只設上間距，下方不留，避免相鄰區塊的上下間距疊加（天條 38）。 */
main#main { display: block; padding-bottom: var(--s6); }
main#main > section { padding-top: var(--gap-sec); }
main#main > section:first-child { padding-top: 0; }

/* 寬內容一律自己包水平捲動，頁面本身永遠不橫向捲（天條 34） */
html, body { overflow-x: hidden; }
.table-responsive,
.table-responsive-md { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

/* --------------------------------------------------------------- 窄螢幕的表格
   about / guide 的表格外面其實已經有一層 overflow:auto 的 div（實測 311px 寬，
   表格 500px，會自己捲）；但 m-account_bank 那張沒有，在 390 會超出 5px。
   統一讓表格自己也是捲動容器，兩種情況都蓋到。
   讓表格自己變成水平捲動容器，頁面本身不橫向捲（天條 34）。
   （這幾張表在分頁籤裡，預設是隱藏的 —— 巡檢改成強制展開才量得到。） */
@media (max-width: 991.98px) {
  table:not(.no-xscroll):not(.fileinput-table) {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  table:not(.no-xscroll):not(.fileinput-table) > thead,
  table:not(.no-xscroll):not(.fileinput-table) > tbody,
  table:not(.no-xscroll):not(.fileinput-table) > tfoot { display: table; width: 100%; }
  .table-responsive table,
  .table-responsive-md table { display: table; overflow-x: visible; }
}

/* 容器上限；xl 以上收在品牌寬度，寬螢幕不整片拉滿（天條 55） */
@media (min-width: 576px) { .container { max-width: 540px; } }
@media (min-width: 768px) { .container { max-width: 720px; } }
@media (min-width: 992px) { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: var(--maxw); } }

/* --------------------------------------------------------------- 網格欄位 */
.col-1 { flex: 0 0 auto; width: 8.333333%; }
.col-2 { flex: 0 0 auto; width: 16.666667%; }
.col-3 { flex: 0 0 auto; width: 25%; }
.col-4 { flex: 0 0 auto; width: 33.333333%; }
.col-5 { flex: 0 0 auto; width: 41.666667%; }
.col-6 { flex: 0 0 auto; width: 50%; }
.col-7 { flex: 0 0 auto; width: 58.333333%; }
.col-8 { flex: 0 0 auto; width: 66.666667%; }
.col-9 { flex: 0 0 auto; width: 75%; }
.col-10 { flex: 0 0 auto; width: 83.333333%; }
.col-11 { flex: 0 0 auto; width: 91.666667%; }
.col-12 { flex: 0 0 auto; width: 100%; }
.offset-1 { margin-left: 8.333333%; }
.offset-2 { margin-left: 16.666667%; }
.offset-3 { margin-left: 25%; }
.offset-4 { margin-left: 33.333333%; }
.offset-5 { margin-left: 41.666667%; }
.offset-6 { margin-left: 50%; }
.offset-7 { margin-left: 58.333333%; }
.offset-8 { margin-left: 66.666667%; }
.offset-9 { margin-left: 75%; }
.offset-10 { margin-left: 83.333333%; }
.offset-11 { margin-left: 91.666667%; }
@media (min-width: 576px) {
  .col-sm { flex: 1 0 0%; }
  .col-sm-auto { flex: 0 0 auto; width: auto; }
  .col-sm-1 { flex: 0 0 auto; width: 8.333333%; }
  .col-sm-2 { flex: 0 0 auto; width: 16.666667%; }
  .col-sm-3 { flex: 0 0 auto; width: 25%; }
  .col-sm-4 { flex: 0 0 auto; width: 33.333333%; }
  .col-sm-5 { flex: 0 0 auto; width: 41.666667%; }
  .col-sm-6 { flex: 0 0 auto; width: 50%; }
  .col-sm-7 { flex: 0 0 auto; width: 58.333333%; }
  .col-sm-8 { flex: 0 0 auto; width: 66.666667%; }
  .col-sm-9 { flex: 0 0 auto; width: 75%; }
  .col-sm-10 { flex: 0 0 auto; width: 83.333333%; }
  .col-sm-11 { flex: 0 0 auto; width: 91.666667%; }
  .col-sm-12 { flex: 0 0 auto; width: 100%; }
  .offset-sm-1 { margin-left: 8.333333%; }
  .offset-sm-2 { margin-left: 16.666667%; }
  .offset-sm-3 { margin-left: 25%; }
  .offset-sm-4 { margin-left: 33.333333%; }
  .offset-sm-5 { margin-left: 41.666667%; }
  .offset-sm-6 { margin-left: 50%; }
  .offset-sm-7 { margin-left: 58.333333%; }
  .offset-sm-8 { margin-left: 66.666667%; }
  .offset-sm-9 { margin-left: 75%; }
  .offset-sm-10 { margin-left: 83.333333%; }
  .offset-sm-11 { margin-left: 91.666667%; }
}

@media (min-width: 768px) {
  .col-md { flex: 1 0 0%; }
  .col-md-auto { flex: 0 0 auto; width: auto; }
  .col-md-1 { flex: 0 0 auto; width: 8.333333%; }
  .col-md-2 { flex: 0 0 auto; width: 16.666667%; }
  .col-md-3 { flex: 0 0 auto; width: 25%; }
  .col-md-4 { flex: 0 0 auto; width: 33.333333%; }
  .col-md-5 { flex: 0 0 auto; width: 41.666667%; }
  .col-md-6 { flex: 0 0 auto; width: 50%; }
  .col-md-7 { flex: 0 0 auto; width: 58.333333%; }
  .col-md-8 { flex: 0 0 auto; width: 66.666667%; }
  .col-md-9 { flex: 0 0 auto; width: 75%; }
  .col-md-10 { flex: 0 0 auto; width: 83.333333%; }
  .col-md-11 { flex: 0 0 auto; width: 91.666667%; }
  .col-md-12 { flex: 0 0 auto; width: 100%; }
  .offset-md-1 { margin-left: 8.333333%; }
  .offset-md-2 { margin-left: 16.666667%; }
  .offset-md-3 { margin-left: 25%; }
  .offset-md-4 { margin-left: 33.333333%; }
  .offset-md-5 { margin-left: 41.666667%; }
  .offset-md-6 { margin-left: 50%; }
  .offset-md-7 { margin-left: 58.333333%; }
  .offset-md-8 { margin-left: 66.666667%; }
  .offset-md-9 { margin-left: 75%; }
  .offset-md-10 { margin-left: 83.333333%; }
  .offset-md-11 { margin-left: 91.666667%; }
}

@media (min-width: 992px) {
  .col-lg { flex: 1 0 0%; }
  .col-lg-auto { flex: 0 0 auto; width: auto; }
  .col-lg-1 { flex: 0 0 auto; width: 8.333333%; }
  .col-lg-2 { flex: 0 0 auto; width: 16.666667%; }
  .col-lg-3 { flex: 0 0 auto; width: 25%; }
  .col-lg-4 { flex: 0 0 auto; width: 33.333333%; }
  .col-lg-5 { flex: 0 0 auto; width: 41.666667%; }
  .col-lg-6 { flex: 0 0 auto; width: 50%; }
  .col-lg-7 { flex: 0 0 auto; width: 58.333333%; }
  .col-lg-8 { flex: 0 0 auto; width: 66.666667%; }
  .col-lg-9 { flex: 0 0 auto; width: 75%; }
  .col-lg-10 { flex: 0 0 auto; width: 83.333333%; }
  .col-lg-11 { flex: 0 0 auto; width: 91.666667%; }
  .col-lg-12 { flex: 0 0 auto; width: 100%; }
  .offset-lg-1 { margin-left: 8.333333%; }
  .offset-lg-2 { margin-left: 16.666667%; }
  .offset-lg-3 { margin-left: 25%; }
  .offset-lg-4 { margin-left: 33.333333%; }
  .offset-lg-5 { margin-left: 41.666667%; }
  .offset-lg-6 { margin-left: 50%; }
  .offset-lg-7 { margin-left: 58.333333%; }
  .offset-lg-8 { margin-left: 66.666667%; }
  .offset-lg-9 { margin-left: 75%; }
  .offset-lg-10 { margin-left: 83.333333%; }
  .offset-lg-11 { margin-left: 91.666667%; }
}

@media (min-width: 1200px) {
  .col-xl { flex: 1 0 0%; }
  .col-xl-auto { flex: 0 0 auto; width: auto; }
  .col-xl-1 { flex: 0 0 auto; width: 8.333333%; }
  .col-xl-2 { flex: 0 0 auto; width: 16.666667%; }
  .col-xl-3 { flex: 0 0 auto; width: 25%; }
  .col-xl-4 { flex: 0 0 auto; width: 33.333333%; }
  .col-xl-5 { flex: 0 0 auto; width: 41.666667%; }
  .col-xl-6 { flex: 0 0 auto; width: 50%; }
  .col-xl-7 { flex: 0 0 auto; width: 58.333333%; }
  .col-xl-8 { flex: 0 0 auto; width: 66.666667%; }
  .col-xl-9 { flex: 0 0 auto; width: 75%; }
  .col-xl-10 { flex: 0 0 auto; width: 83.333333%; }
  .col-xl-11 { flex: 0 0 auto; width: 91.666667%; }
  .col-xl-12 { flex: 0 0 auto; width: 100%; }
  .offset-xl-1 { margin-left: 8.333333%; }
  .offset-xl-2 { margin-left: 16.666667%; }
  .offset-xl-3 { margin-left: 25%; }
  .offset-xl-4 { margin-left: 33.333333%; }
  .offset-xl-5 { margin-left: 41.666667%; }
  .offset-xl-6 { margin-left: 50%; }
  .offset-xl-7 { margin-left: 58.333333%; }
  .offset-xl-8 { margin-left: 66.666667%; }
  .offset-xl-9 { margin-left: 75%; }
  .offset-xl-10 { margin-left: 83.333333%; }
  .offset-xl-11 { margin-left: 91.666667%; }
}

/* ==========================================================================
   dcj88 base.css ─ 站台版面
   排在框架之後、工具類之前。這一段是設計本體，跟前一版的視覺完全一致。
   ========================================================================== */

/* --------------------------------------------------------------- 3. 頁首 */
#header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:1030;
  height:var(--h-head);
  display:block;
}
#header .navbar-bg{
  height:var(--h-head);
  background-color:#0B1428;
  background-image:var(--grad-head);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  box-shadow:var(--sh-head), 0 1px 0 rgba(255,255,255,.7) inset;
  padding:0!important;
}
#header .navbar-bg > .container{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--s2);
}

#header .logo{display:flex;align-items:center;flex:none}
#header .logo a{display:flex;align-items:center;height:100%}
#header .logo img{
  height:44px;
  width:auto;
  max-width:200px;
  object-fit:contain;
}

/* 主選單 */
#header #navbar{flex:1;display:flex;justify-content:flex-end}
#header #navbar > ul{
  display:flex;
  align-items:center;
  gap:2px;
  margin:0;
  padding:0;
}
#header #navbar > ul > li{display:flex;align-items:center}
#header #navbar .nav-link{
  display:flex;
  align-items:center;
  height:var(--h-head);
  padding:0 14px;
  font-size:16px;
  font-weight:700;
  color:var(--ink);           /* 原本是 #86B7FE，對白底只有 2.06:1 */
  letter-spacing:.02em;
  white-space:nowrap;
  transition:color .18s;
  position:relative;
}
#header #navbar .nav-link:hover{color:var(--blue)}
#header #navbar .nav-link::after{
  content:"";
  position:absolute;
  left:14px;right:14px;bottom:14px;
  height:2px;border-radius:2px;
  background:var(--blue);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .2s;
}
#header #navbar .nav-link:hover::after{transform:scaleX(1)}

/* 登入 / 註冊：併排藥丸，與 WP 前台同一組漸層 */
#header .btn-login,
#header .btn-register,
.btn-login,.btn-register{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:44px;
  padding:0 20px;
  font-size:16px;
  font-weight:900;
  white-space:nowrap;
  border:0;
  transition:filter .18s,transform .18s;
}
.btn-login{
  background-color:#E6A52C;
  background-image:var(--grad-gold);
  color:#3A2401;
  border-radius:var(--r-pill) 0 0 var(--r-pill);
}
.btn-register{
  background-color:#C9481C;
  background-image:var(--grad-orange);
  color:#fff;
  border-radius:0 var(--r-pill) var(--r-pill) 0;
}
.btn-login:hover,.btn-register:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn-login:hover{color:#3A2401}
.btn-register:hover{color:#fff}
.btn-icon{width:20px;height:20px;flex:none;object-fit:contain}

/* 登入後的帳號 / 餘額 —— 進站三秒要看到的第一件事（天條 55） */
#header .u-login{
  display:flex;
  align-items:center;
  gap:var(--s2);
  padding:0 var(--s2) 0 0;
  margin-right:var(--s1);
  border-right:1px solid var(--line);
}
#header .u-info{display:flex;flex-direction:column;gap:2px;line-height:1.25}
#header .u-info .uuid,
#header .u-info .uucash{display:flex;align-items:center;gap:6px}
#header .u-info img{width:18px;height:18px;flex:none}
#header .u-info .uuid > div{font-size:15px;font-weight:700;color:var(--muted)}
#header .u-info .uucash > div{
  font-size:19px;font-weight:900;color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}
#header .u-login .link{display:flex;gap:6px}
#header .Wbtn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-width:56px;min-height:52px;padding:4px 8px;
  border:1px solid var(--line);border-radius:var(--r-s);
  background:var(--sky);
  font-size:12px;font-weight:700;color:var(--ink);
  transition:background .18s,border-color .18s;
}
#header .Wbtn img{width:22px;height:22px}
#header .Wbtn:hover{background:var(--sky-2);border-color:var(--blue-l);color:var(--ink)}
#header .btn-member{background-color:#E6A52C;background-image:var(--grad-gold);color:#3A2401;border-radius:var(--r-pill)}

/* 漢堡 */
.mobile-nav-toggle{
  display:none;
  align-items:center;justify-content:center;
  width:44px;height:44px;flex:none;
  border:1px solid var(--line);border-radius:var(--r-s);
  background:var(--surf);color:var(--ink);
  font-size:24px;cursor:pointer;
}

/* --------------------------------------------------------------- 4. 手機抽屜 */
.overlay{
  position:fixed;top:0;left:0;z-index:1090;
  width:0;                      /* 預設關閉 —— modal.js 用 style.width 0%/100% 開關 */
  height:100%;
  background:rgba(5,14,36,.78);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  overflow-x:hidden;overflow-y:auto;
  transition:width .32s cubic-bezier(.4,0,.2,1);
}
.overlay-content{opacity:0;transition:opacity .28s}
.overlay-content{
  position:relative;
  max-width:420px;
  margin:0 auto;
  padding:96px var(--s3) var(--s5);
  display:flex;flex-direction:column;gap:10px;
}
.overlay .closebtn{
  position:absolute;top:22px;right:22px;
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  font-size:32px;line-height:1;color:#fff;
  background:rgba(255,255,255,.12);
  border-radius:var(--r-s);
}
.overlay .closebtn:hover{background:rgba(255,255,255,.22);color:#fff}
.overlay-btn,
.overlay-content > a{
  display:flex;align-items:center;gap:12px;
  min-height:52px;padding:0 var(--s3);
  border-radius:var(--r-m);
  background:rgba(255,255,255,.08);
  border:1px solid rgba(134,183,254,.32);
  color:#EAF2FF;font-size:16px;font-weight:700;
  transition:background .18s;
}
.overlay-btn:hover,.overlay-content > a:hover{background:rgba(134,183,254,.22);color:#fff}
.overlay img{width:24px;height:24px;flex:none}
.overlay .color1{background-color:#E6A52C;background-image:var(--grad-gold);border-color:transparent;color:#3A2401}
.overlay .color2{background-color:#C9481C;background-image:var(--grad-orange);border-color:transparent;color:#fff}
.overlay .brand-logo{margin-bottom:var(--s3);background:none;border:0;min-height:0;padding:0}
.overlay .brand-logo img{width:auto;height:44px}

/* --------------------------------------------------------------- 5. 走馬燈公告 */
.mq-section,.top-bar{
  position:fixed;
  top:var(--h-head);left:0;right:0;
  z-index:1029;
  height:var(--h-mq);
  display:flex;align-items:center;
  padding:0!important;
  /* 深藍帶配金字。整條跑馬燈是頁首的延伸，跟頁首同一個表面家族。 */
  background-color:#101E3C;
  background-image:linear-gradient(90deg,#101E3C,#16294D 40%,#101E3C);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.mq-section .container{display:flex;align-items:center;gap:12px;height:100%}
.marquee-wrapper{
  flex:1;overflow:hidden;position:relative;height:100%;
  display:flex;align-items:center;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 20px,#000 calc(100% - 20px),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 20px,#000 calc(100% - 20px),transparent);
}
.marquee-content{
  display:inline-flex;align-items:center;
  white-space:nowrap;
  color:var(--ink);
  font-size:16px;font-weight:700;
}
.marquee-content a,.marquee-content .con{
  color:var(--ink);
  display:inline-flex;align-items:center;
  min-height:32px;
  padding:0 28px 0 0;margin-right:28px;
  position:relative;
}
.marquee-content a:hover{color:var(--gold-l)}
.marquee-content a::after{
  content:"";position:absolute;right:0;top:50%;
  width:5px;height:5px;margin-top:-2px;border-radius:50%;
  background:rgba(13,34,96,.45);
}

/* --------------------------------------------------------------- 6. 主視覺輪播 */
.testimonials{padding:var(--s4) 0 0}
.testimonials .container,
.testimonials .container-fluid{max-width:var(--maxw);margin-inline:auto}
.testimonials .quote-icon{display:none}
.testimonials-slider{border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sh-2)}
.testimonial-item{margin:0;padding:0;background:none;border:0}
.testimonial-img{
  width:100%;height:auto;border-radius:0;
  margin:0;box-shadow:none;
}
.testimonials .swiper-pagination{position:static;margin-top:var(--s2);display:flex;justify-content:center;gap:2px}
.testimonials .swiper-pagination-bullet{
  width:10px;height:10px;background:rgba(255,255,255,.26);opacity:1;border-radius:5px;
  transition:width .25s,background .25s;margin:0 4px!important;
}
.testimonials .swiper-pagination-bullet-active{background:var(--gold);width:28px}

/* --------------------------------------------------------------- 7. 遊戲分類頁籤 */
.GameNav{
  margin-top:0!important;
  padding:var(--s5) 0 0;
}
.GameNav .nav-pills2{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s1);
  padding:0;
  margin:0 0 var(--s4);
  border-bottom:1px solid var(--line);
  padding-bottom:var(--s3);
}
.GameNav .nav-pills2 .nav-item{
  flex:0 0 auto;
  margin:0;
}
.GameNav .nav-pills2 .nav-item .nav-link,
.GameNav .nav-pills2 .nav-item > a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  min-width:96px;min-height:88px;padding:10px 14px;
  border:1px solid var(--line);border-radius:var(--r-m);
  background:var(--surf);
  color:var(--body);
  font-size:15px;font-weight:700;
  transition:background .18s,border-color .18s,transform .18s,color .18s;
}
.GameNav .nav-pills2 .nav-item img{width:34px;height:34px;object-fit:contain}
.GameNav .nav-pills2 .nav-item .nav-link:hover,
.GameNav .nav-pills2 .nav-item > a:hover{
  border-color:var(--blue-l);background:var(--sky);color:var(--ink);transform:translateY(-2px);
}
.GameNav .nav-pills2 .nav-item .nav-link.active,
.GameNav .nav-pills2 .nav-item > a.active,
.GameNav .nav-pills2 .nav-item.active > a{
  background:var(--grad-navy);border-color:transparent;color:#fff;
  box-shadow:var(--sh-1);
}
.GameNav .nav-pills2 .nav-item .active img{filter:brightness(0) invert(1)}

/* 分類標題（原本是 96px 的英文大標，對白底 2.06:1） */
.section-title{margin:0 0 var(--s2)}
.section-title h2,
.section-title h2.title,
.BrandGame .section-title h2{
  font-size:15px;
  font-weight:900;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0;
  text-align:left;
  text-shadow:none;
}
.info-body .leading-loose,
.leading-loose{
  font-size:16px;line-height:1.8;color:var(--body);margin:0;
  max-width:48ch;
}
.info-body{margin-bottom:var(--s4)}

/* --------------------------------------------------------------- 8. 大堂遊戲卡 */
/* 實際結構：
   .games > .gamesBox.action-game[.action-game-100|-50] > a
       > .gamesBox--logo   （廠商 LOGO，桌機主角）
       > .gamesBox--image  （遊戲圖，帶 d-block d-lg-none，只在手機出現）
       > .BrandName        （包住 .gamesBox--button 角標 與 .game-name 名稱）
   桌機是一排品牌 LOGO 牌；手機是圖卡。兩種各自排版，不硬套同一套。   */

.game-tab-content{padding-bottom:0}
.game-tab-content .BrandGame{padding-bottom:0}
.game-tab-content .BrandGame > .container{
  display:flex;
  align-items:flex-start;
  gap:var(--s5);
}
.game-tab-content .md_games{
  flex:1 1 auto;
  min-width:0;
  display:block;
  padding:0;
  text-align:left;
}
.game-tab-content .md_img{
  flex:0 0 34%;
  max-width:380px;
  align-self:center;
}
.game-tab-content .md_img img{
  width:100%;height:auto;
  filter:drop-shadow(0 18px 30px rgba(13,34,96,.28));
}

/* 卡片列：短的一排置中收尾，不留落單的空洞（天條 55） */
.BrandGame .games{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:stretch;
  align-content:flex-start;
  justify-content:flex-start;
}

.gamesBox{
  position:relative;
  flex:0 0 158px;
  display:flex;flex-direction:column;
  height:auto;
  background:var(--surf);
  border:1px solid var(--line);
  border-radius:var(--r-m);
  overflow:hidden;
  box-shadow:var(--sh-1);
  transition:transform .18s,box-shadow .18s,border-color .18s;
}
.gamesBox:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--blue-l)}
.gamesBox > a{
  display:flex;flex-direction:column;
  height:100%;
  text-align:center;
  color:inherit;
}

/* LOGO 牌 —— 桌機的主角 */
.gamesBox--logo{
  position:static;
  display:flex;align-items:center;justify-content:center;
  width:auto;height:104px;
  margin:0;padding:14px;
  background:linear-gradient(180deg,var(--sky),var(--sky-2))!important;
  border-bottom:1px solid var(--line-2);
  border-radius:0;
  box-shadow:none!important;
  clip-path:none!important;
  filter:none;-webkit-filter:none;
  transition:background .2s;
}
.gamesBox:hover .gamesBox--logo{background:linear-gradient(180deg,#1D2F55,#16233F)!important}
.gamesBox--logo img{max-width:104px;max-height:62px;width:auto;height:auto;object-fit:contain}

/* 遊戲圖：桌機不出現（樣板自己掛 d-lg-none），手機才是主角 */
.gamesBox--image{margin:0}
.gamesBox--image img{width:100%;height:100%;object-fit:cover;display:block}

/* 名稱區 = 角標 + 名稱 */
.BrandName{
  position:static;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:10px 8px 12px;
  margin:0;
  background:var(--surf);
  font-style:normal;
  flex:1;
  justify-content:center;
}
.gamesBox--button{
  display:inline-flex;align-items:center;
  width:max-content;max-width:100%;
  min-height:22px;margin:0;padding:1px 10px;
  border:0;border-radius:var(--r-pill);
  background-color:#E6A52C;
  background-image:var(--grad-gold);
  color:#3A2401;
  font-size:12px;font-weight:900;letter-spacing:.02em;
  white-space:nowrap;
}
.gamesBox--button.gamesBox--button-none{opacity:0;pointer-events:none}
.gamesBox--button span{display:none}
.game-name{
  display:block;
  min-height:0;padding:0;margin:0;
  background:none;
  font-size:16px;font-weight:900;color:var(--ink);
  line-height:1.35;
}
.full-link{position:absolute;inset:0;z-index:3;display:block;text-indent:-9999px;overflow:hidden}
.notrans_bg,.notrans{background:none}

/* 熱門 / 捕魚那兩個分頁沒有品牌卡，避免留一塊空白 */
.tab-pane .BrandGame:empty,
.BrandGame .games:empty{display:none}

/* --------------------------------------------------------------- 9. 遊戲列表頁 */
.gamepage,.promopage{padding-top:var(--s5)}
.topbanner img{width:100%;border-radius:var(--r-m);box-shadow:var(--sh-1)}
.page-seo-title,.live-title,.blog-section-heading{
  font-size:26px;font-weight:900;color:var(--ink);
  margin:0 0 var(--s3);letter-spacing:-.01em;
}
.font-size-18{font-size:17px;line-height:1.75;color:var(--body)}

.slot-game,.hotGame,.fishgames{padding-top:var(--s4)}

/* 廠商遊戲格（gamebox / gameimg / gameID）—— 這三個 class 光首頁以外就 1200+ 次 */
.slotGames .row,
.slot-game .row{--bs-gutter-x:14px;--bs-gutter-y:14px}
/* .gamebox 在 style.css 裡從來沒有樣式，外層那個
   `margin:0 -1%; overflow:hidden` 是典型的浮動排版容器（負邊距 + 清除浮動）。
   照原意做成浮動網格：桌機一排 6 個。
   （先前給 .gameimg 套 aspect-ratio:1/1 但沒有網格，每格變成滿寬 1160px 高，
     egame 整頁被撐到 15,621px。） */
.gamebox{
  position:relative;
  float:left;
  width:calc(16.6667% - 14px);
  margin:0 7px 14px;
  border-radius:var(--r-m);
  overflow:hidden;
  background:var(--sky);
  border:1px solid var(--line);
  box-shadow:var(--sh-1);
  transition:transform .16s,box-shadow .16s,border-color .16s;
}
.gamebox:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:var(--blue-l)}
.gameimg{
  display:block;width:100%;aspect-ratio:4/3;overflow:hidden;background:var(--sky-2);
}
.gameimg img{width:100%;height:100%;object-fit:cover;display:block}
.gameID{
  display:flex;align-items:center;justify-content:center;
  min-height:40px;padding:6px 10px;
  margin:0;
  font-size:16px;font-weight:700;color:var(--ink);
  background:var(--surf);text-align:center;line-height:1.35;
}
.img-link{display:block;position:relative}
.media-02819{border-radius:var(--r-m);overflow:hidden}

/* --------------------------------------------------------------- 10. 內容頁 */
.content,.site-section,.member,.blog,.wapper,.content-bg{padding-top:0}
main#main .content,
main#main .site-section{
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad-x);
}
.content h1,.content h2,.content h3{margin-top:var(--s5)}
.content h1:first-child,.content h2:first-child{margin-top:0}
.content p,.site-section p{color:var(--body);font-size:16px;line-height:1.8}
.content ul,.content ol{padding-left:22px;margin-bottom:var(--s2);color:var(--body)}
.content li{list-style:disc;margin:6px 0}
.content ol li{list-style:decimal}
.title{font-size:26px;font-weight:900;color:var(--ink)}

/* 表格：寬內容自己包水平捲動（天條 34） */
.table-responsive,.table-responsive-md{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;background:var(--surf)}
table th,table td{padding:12px 14px;border-bottom:1px solid var(--line-2);font-size:16px;text-align:left;vertical-align:middle}
table th{
  background:var(--navy);color:#fff;font-weight:700;font-size:16px;
  letter-spacing:.02em;white-space:nowrap;border-bottom:0;
}
table tbody tr:nth-child(even) td{background:rgba(47,111,208,.04)}
table tbody tr:hover td{background:var(--sky)}
table td{color:var(--body)}
.table-bordered,.table-bordered th,.table-bordered td{border:1px solid var(--line)}
.table-bordered{border-radius:var(--r-m);overflow:hidden}
.table-dark,.table-dark th,.table-dark td{
  --bs-table-bg:#0D2260;--bs-table-color:#EAF2FF;
  background-color:#0D2260;color:#EAF2FF;border-color:rgba(219,233,255,.2);
}
.table-dark tbody tr:nth-child(even) td,
.table-dark tbody tr:hover td{background-color:#12295F;color:#EAF2FF}
.thead-light th{background:var(--surf-3);color:var(--ink)}
/* 樣板把 .green-bg 蓋在 th 上，只換底不換字就會白配白 */
.green-bg,th.green-bg,td.green-bg{
  background:rgba(74,222,128,.13)!important;color:#8CEBB0!important;
  border-color:rgba(74,222,128,.3);
}
.tr-1st td{background:var(--sky-2)!important;font-weight:700;color:var(--ink)}

.pagination{
  display:flex;flex-wrap:wrap;gap:6px;justify-content:center;
  margin:var(--s5) 0 0;padding:0;
}
.pagination li{list-style:none}
.pagination a,.pagination strong,.pagination span{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:0 12px;
  border:1px solid var(--line);border-radius:var(--r-s);
  background:var(--surf);color:var(--body);font-weight:700;font-size:15px;
}
.pagination a:hover{border-color:var(--blue-l);background:var(--sky);color:var(--ink)}
.pagination strong,.pagination .active a{background:var(--navy);border-color:var(--ink);color:#fff}

/* --------------------------------------------------------------- 11. 四格特色（暫留，見報告） */
.index-service{
  margin-top:var(--gap-sec);
  padding:var(--s5) 0!important;
  background:var(--sky);
  border-top:1px solid var(--line);
}
.index-service .title{font-size:22px;margin-bottom:6px}
.index-service .serv{
  height:100%;
  padding:var(--s3);
  background:var(--surf);
  border:1px solid var(--line);
  border-radius:var(--r-m);
  box-shadow:var(--sh-1);
}
.index-service h4{font-size:18px;color:var(--ink);margin-bottom:4px}
.index-service .serv p,
.index-service p{font-size:16px;color:var(--body);line-height:1.75;margin:0}
.index-service .text-light{color:var(--body)!important}

/* --------------------------------------------------------------- 12. 表單與按鈕 */
.form-group{margin-bottom:var(--s3)}
label,.form-label{
  display:block;margin-bottom:6px;
  font-size:16px;font-weight:700;color:var(--ink);
}
.form-control,
input[type=text],input[type=password],input[type=email],input[type=tel],
input[type=number],input[type=date],select,textarea{
  width:100%;
  min-height:48px;
  padding:10px 14px;
  border:1px solid var(--line);
  border-radius:var(--r-s);
  background:var(--surf);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;                 /* 16px 以下 iOS 會自動放大（天條 34） */
  line-height:1.5;
  transition:border-color .18s,box-shadow .18s;
}
.form-control:focus,input:focus,select:focus,textarea:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(26,86,219,.14);
  outline:none;
}
.form-control::placeholder{color:#93A2B8}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 20px) 22px,calc(100% - 14px) 22px;background-size:6px 6px;background-repeat:no-repeat}

.alert{padding:12px 16px;border-radius:var(--r-s);font-size:16px;margin-bottom:var(--s2);border:1px solid transparent}
.alert-danger{background:rgba(255,107,107,.12);border-color:rgba(255,107,107,.34);color:#FFB4B4}
.alert-success{background:rgba(74,222,128,.12);border-color:rgba(74,222,128,.32);color:#8CEBB0}
.invalid-feedback,.valid-feedback{font-size:15px;margin-top:4px}
.invalid-feedback{color:var(--danger)}
.valid-feedback{color:var(--ok)}

/* 主要動作按鈕全站同一種樣式（天條 55） */
.btn,.mbtn,.btn-confirm,.quick-btn,.line-btn-a,.tab-btn,.modal .auth-btn,.login-else-box .auth-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:0 24px;
  border:1px solid transparent;border-radius:var(--r-pill);
  font-family:var(--sans);font-size:16px;font-weight:900;
  cursor:pointer;
  white-space:normal;max-width:100%;text-align:center;
  transition:filter .18s,transform .18s,background .18s,color .18s;
}
.btn:hover,.mbtn:hover,.btn-confirm:hover{transform:translateY(-1px);filter:brightness(1.05)}
.btn-primary,.mbtn,.btn-confirm{background-color:#E6A52C;background-image:var(--grad-gold);color:#3A2401;border-color:transparent}
.btn-primary:hover,.mbtn:hover,.btn-confirm:hover{color:#3A2401}
.btn-secondary{background:var(--sky-2);color:var(--ink);border-color:var(--line)}
.btn-warning{background-color:#C9481C;background-image:var(--grad-orange);color:#fff}
.btn-warning:hover{color:#fff}
.btn-outline-primary{background:var(--surf);color:var(--blue);border-color:var(--blue-l)}
.btn-outline-primary:hover{background:var(--sky);color:var(--ink)}
.btn-1{background-color:#E6A52C;background-image:var(--grad-gold);color:#3A2401}
.btn-sm{min-height:40px;padding:0 16px;font-size:15px}
.btn-lg{min-height:54px;padding:0 32px;font-size:17px}
.quick-btn{min-height:44px;padding:0 18px;background:var(--sky);color:var(--ink);border-color:var(--line);border-radius:var(--r-s);font-size:16px}
.quick-btn:hover{background:var(--sky-2);border-color:var(--blue-l)}

/* 樣板自己命名的按鈕沒帶 .btn，尺寸要另外補（天條 34：觸控目標 >=44px） */
.btn-start,.btn-1,a.button,.nav-link.small,.h-link,.h-link-50{min-height:44px}
a.btn-start,a.btn-1,a.button,a.nav-link.small{
  display:inline-flex;align-items:center;justify-content:center;
  padding:0 18px;border-radius:var(--r-pill);
  font-size:16px;font-weight:900;
}
a.button,a.button.small{background:var(--sky);color:var(--ink);border:1px solid var(--line)}
a.button:hover{background:var(--sky-2);border-color:var(--blue-l)}
.img-link{display:block}
.img-link img{border-radius:var(--r-m)}

/* --------------------------------------------------------------- 13. 登入／註冊彈窗 */
.modal-content{
  border:0;border-radius:var(--r-l);
  box-shadow:0 30px 70px -30px rgba(13,34,96,.65);
  overflow:hidden;
  background:var(--surf);
}
.modal-header{
  padding:var(--s3);
  background-color:#0D2260;
  background-image:var(--grad-navy);
  border-bottom:0;
  align-items:center;
}
.modal-header .modal-title,.modal-header h4{color:#fff;font-size:19px;font-weight:900;margin:0}
.modal-header .close,.close_m{
  width:40px;height:40px;
  display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:var(--r-s);
  background:rgba(255,255,255,.14);
  color:#fff;font-size:24px;line-height:1;cursor:pointer;opacity:1;
}
.modal-header .close:hover,.close_m:hover{background:rgba(255,255,255,.26);color:#fff}
.modal-body{padding:var(--s3)}
.modal-footer{padding:var(--s2) var(--s3) var(--s3);border-top:1px solid var(--line-2);justify-content:center}

.modal-box{background:var(--surf)}
.tab-header{
  display:flex;gap:0;
  margin:0 0 var(--s3);
  border-bottom:1px solid var(--line);
}
.tab-btn{
  flex:1 1 0;
  min-height:52px;
  border-radius:0;
  background:none;border:0;border-bottom:3px solid transparent;
  color:var(--muted);font-size:17px;font-weight:700;
}
.tab-btn.active{color:var(--ink);border-bottom-color:var(--blue)}
.tab-btn:hover{transform:none;color:var(--ink)}

.login_form{display:flex;flex-direction:column;gap:var(--s2)}
.login_form .form-control{margin:0}
.codeimg{
  display:flex;align-items:center;gap:10px;
}
.codeimg img{
  height:48px;width:auto;border:1px solid var(--line);border-radius:var(--r-s);cursor:pointer;flex:none;
}
.login-else-box{
  display:flex;gap:10px;flex-wrap:wrap;
  margin-top:var(--s2);padding-top:var(--s3);
  border-top:1px solid var(--line-2);
}
.modal .auth-btn,.login-else-box .auth-btn{
  flex:1 1 140px;
  min-height:48px;
  background:var(--surf);color:var(--ink);
  border:1px solid var(--line);border-radius:var(--r-s);
  font-size:16px;font-weight:700;
}
.modal .auth-btn:hover,.login-else-box .auth-btn:hover{background:var(--sky);border-color:var(--blue-l);color:var(--ink)}
.log-img{width:22px;height:22px;flex:none;object-fit:contain}
.hr{height:1px;background:var(--line);border:0;margin:var(--s2) 0}
.no-show-container{display:inline-flex;align-items:center;gap:8px;font-size:15px;color:var(--body);min-height:44px}

/* 公告彈窗清單 */
.modal .nav-tabs{border-bottom:1px solid var(--line);gap:4px}
.modal .nav-tabs .nav-link{
  display:inline-flex;align-items:center;gap:8px;
  min-height:44px;border:0;border-bottom:3px solid transparent;border-radius:0;
  color:var(--muted);font-weight:700;font-size:16px;
}
.modal .nav-tabs .nav-link img{width:20px;height:20px}
.modal .nav-tabs .nav-link.active{color:var(--ink);border-bottom-color:var(--blue);background:none}
.modal .tab-content ul{display:flex;flex-direction:column;gap:10px}
.modal .tab-content li{
  border:1px solid var(--line);border-radius:var(--r-s);background:var(--sky);
  transition:border-color .18s,background .18s;
}
.modal .tab-content li:hover{border-color:var(--blue-l);background:var(--sky-2)}
.modal .tab-content li a{display:block;padding:14px 16px}
.modal .tab-content li h5{font-size:16px;color:var(--ink);margin:0 0 4px}
.modal .tab-content li p{font-size:16px;color:var(--body);margin:0}

/* --------------------------------------------------------------- 14. 會員區 */
.member,.member-page{padding-top:var(--s5)}
.member .container,.member-page .container{max-width:var(--maxw)}
.member-top{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  flex-wrap:wrap;margin-bottom:var(--s4);
}

/* 側邊選單 */
.member-menu_web{margin-bottom:var(--s4)}
.memberMenu{
  background:var(--surf);
  border:1px solid var(--line);
  border-radius:var(--r-m);
  overflow:hidden;
  box-shadow:var(--sh-1);
}
.memberMenu .user-lv{
  padding:var(--s3);
  background-color:#0D2260;
  background-image:var(--grad-navy);
  color:#fff;
}
.memberMenu .user-lv .user-text{
  margin:0;font-size:18px;font-weight:900;color:#fff;letter-spacing:.01em;
}
.memberMenu .box-info{display:flex;flex-direction:column;gap:2px}

.memberMenu .icon-link ul{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  background:var(--line-2);
  border-bottom:1px solid var(--line);
}
.memberMenu .icon-link li{background:var(--surf)}
.memberMenu .icon-link a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  min-height:82px;padding:10px 6px;
  color:var(--ink);font-size:15px;font-weight:700;text-align:center;line-height:1.3;
  transition:background .18s;
}
.memberMenu .icon-link a:hover{background:var(--sky)}
.memberMenu .icon-link img{width:28px;height:28px;object-fit:contain}

.memberMenu .menu-link{margin:0!important;padding:var(--s1) 0}
.memberMenu .menu-link li{border-bottom:1px solid var(--line-2)}
.memberMenu .menu-link li:last-child{border-bottom:0}
.memberMenu .menu-link li a{
  display:flex;align-items:center;gap:12px;
  min-height:52px;padding:8px var(--s3);
  color:var(--ink);font-size:16px;font-weight:700;
  transition:background .18s,color .18s;
}
.memberMenu .menu-link li a:hover{background:var(--sky);color:var(--blue)}
.memberMenu .menu-link img{width:24px;height:24px;flex:none;object-fit:contain}
.memberMenu .menu-link .info{font-size:15px;font-weight:400;color:var(--muted);padding:0 var(--s3) 10px;min-height:0}

/* 會員內容卡片 —— 同一頁的卡片用同一套底色系統（天條 55） */
.box,.box-1,.box-2,.block,.block-left,.block-right,.block-info,
.game-cash-box,.transfer-group-box,.deppost,.service-box{
  background:var(--surf);
  border:1px solid var(--line);
  border-radius:var(--r-m);
  padding:var(--s3);
  box-shadow:var(--sh-1);
  margin-bottom:var(--s3);
}
.box h3,.box-1 h3,.box-2 h3,.block h3,
.box h4,.box-1 h4,.box-2 h4,.block h4{
  margin:0 0 var(--s2);padding-bottom:10px;
  font-size:18px;color:var(--ink);
  border-bottom:1px solid var(--line-2);
}
.user-info,.info{font-size:16px;color:var(--body)}
.user-text{font-size:16px;color:var(--ink);font-weight:700;margin:0}

/* 錢包 / 轉點 */
.transfer-group{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:12px;
}
.transfer-group-box{
  display:flex;flex-direction:column;gap:8px;
  margin:0;padding:var(--s2);
  background:var(--sky);
}
.transferToIcon{width:40px;height:40px;object-fit:contain}
.Amount,.WalletTotal,.history-money,.num{
  font-variant-numeric:tabular-nums;
  font-weight:900;color:var(--ink);letter-spacing:-.01em;
}
.transfer-all,.transfer-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.green-bg{background:rgba(74,222,128,.13);border-color:rgba(74,222,128,.3)}
.red{color:var(--danger);font-weight:700}
.center{text-align:center}
.triangle{display:inline-block;vertical-align:middle}

.history-num,.history-date,.history-way{font-size:16px;color:var(--body)}
.line-btn{display:flex;gap:10px;flex-wrap:wrap;margin-top:var(--s2)}

/* 舊 side.php 那組殘留樣板：收成單欄，不讓它撐版。
   注意  不能收 —— 那是站台頁首本身，
   v5 誤判成殘留樣板收掉，害這六頁看起來沒有頁首（2026-08-28 修正）。 */
.page-wrapper > .banner,
.breadcramb,.tooltip,.tool-line,.arrow_b_int{display:none}
.page-wrapper{padding:0}
.side{margin-top:var(--s4)}

/* --------------------------------------------------------------- 15. 頁尾 */
/* 合作廠商 LOGO 牆：16 張，原尺寸最大 524px，不收就會撐出 1800px 高 */
.brand-logo{
  padding:var(--s3) 0;
  border-bottom:1px solid rgba(134,183,254,.22);
}
.brand-logo .container{
  display:flex;flex-wrap:wrap;
  align-items:center;justify-content:center;
  gap:10px;
}
.brand-logo img{
  width:auto;height:auto;
  max-width:76px;max-height:38px;
  object-fit:contain;
  margin:0;padding:6px 10px;
  box-sizing:content-box;
  opacity:.72;
  filter:brightness(0) invert(1);
  transition:opacity .18s;
}
.brand-logo img:hover{opacity:1}


#footer{
  margin-top:var(--gap-sec);
  background-color:var(--ink);
  background-image:linear-gradient(180deg,var(--navy-d),var(--navy-x));
  color:var(--on-navy);
  font-size:16px;
  padding-top:var(--s5);
}
#footer .container{max-width:var(--maxw)}
#footer a{color:var(--on-navy)}
#footer a:hover{color:#fff}
#footer h5,#footer h4{
  color:#fff;                     /* 原本 #86B7FE 對 #4F6A91 只有 2.69:1 */
  font-size:17px;font-weight:900;
  margin:0 0 var(--s2);
  letter-spacing:.02em;
}
.footer-top{padding-bottom:var(--s4)}
.footer-top .row{--bs-gutter-y:32px}
.ft-about p{color:var(--on-navy-dim);font-size:16px;line-height:1.8;margin:0}
.footer-logo,.ft_logo{margin-bottom:var(--s2);display:inline-block}
.footer-logo img,.ft_logo img{height:46px;width:auto}
#footer ul li a{
  display:inline-flex;align-items:center;
  min-height:36px;font-size:16px;color:var(--on-navy-dim);
}
#footer ul li a:hover{color:#fff}
.social-links{display:flex;gap:10px;flex-wrap:wrap}
.social-links a{
  width:44px;height:44px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(219,233,255,.28);border-radius:var(--r-s);
  color:var(--on-navy);font-size:20px;
  transition:background .18s,border-color .18s;
}
.social-links a:hover{background:rgba(134,183,254,.18);border-color:var(--blue-l);color:#fff}
.footer-bottom{
  margin-top:var(--s4);
  padding:var(--s3) 0 var(--s4);
  border-top:1px solid rgba(219,233,255,.16);
}
.copyright{font-size:16px;color:var(--on-navy-dim);margin:0;text-align:center}

/* --------------------------------------------------------------- 16. 底部固定導覽（手機） */
.ft-navbar{
  display:none;
  position:fixed;left:0;right:0;bottom:0;z-index:1035;
  min-height:var(--h-ftnav);
  padding:4px 0 max(4px,env(safe-area-inset-bottom));
  background:rgba(9,22,55,.96);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid rgba(134,183,254,.32);
  box-shadow:0 -2px 14px rgba(0,0,0,.35);
}
.ft-navbar .ft-nav{
  display:flex;
  margin:0;padding:0;
  max-width:520px;margin-inline:auto;
}
.ft-navbar .ft-nav > li{flex:1 1 0;min-width:0}
.ft-link,
.ft-navbar .ft-nav a,
.ft-navbar .ft-nav label{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:52px;                /* 觸控目標 ≥44（天條 34），原本只有 24×19 */
  width:100%;padding:4px 2px;
  color:var(--on-navy);
  font-size:12px;font-weight:700;line-height:1.2;
  cursor:pointer;
}
.ft-link img,.ft-navbar .ft-nav img{width:24px;height:24px;object-fit:contain}
.ft-link:hover,.ft-navbar .ft-nav a:hover{color:#fff;background:rgba(134,183,254,.14)}
.ft-linkMenu{color:var(--gold-l)}

/* --------------------------------------------------------------- 17. 浮動客服 / 回頂 */
.fixmenu{
  position:fixed;right:6px;bottom:calc(var(--h-ftnav) + 74px);z-index:1020;
  width:auto;padding:0;text-align:center;
}
.fixmenu ul{display:flex;flex-direction:column;gap:8px}
.fixmenu li{display:block;margin:0}
.fixmenu li a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  width:56px;min-height:56px;
  border-radius:var(--r-m);
  background:rgba(13,34,96,.92);
  border:1px solid rgba(134,183,254,.34);
  box-shadow:0 8px 20px -10px rgba(13,34,96,.8);
  color:#fff;
}
.fixmenu li img{width:30px;height:30px;margin:0}
.fixmenu li a span{
  display:block!important;
  background:none;box-shadow:none;border-radius:0;
  width:auto;height:auto;padding:0;
  color:#EAF2FF;font-size:11px;font-weight:700;
}

.back-to-top{
  position:fixed;right:6px;bottom:calc(var(--h-ftnav) + 12px);z-index:1020;
  width:52px;height:52px;
  border-radius:var(--r-m);
  background:rgba(13,34,96,.92);
  border:1px solid rgba(134,183,254,.34);
  box-shadow:0 8px 20px -10px rgba(13,34,96,.8);
}
.back-to-top img{width:24px;height:24px;filter:brightness(0) invert(1)}

/* --------------------------------------------------------------- 18. 斷點：平板 */
@media (max-width:1199.98px){
  :root{--maxw:960px;--pad-x:var(--s3)}
  #header #navbar .nav-link{padding:0 10px;font-size:15px}
  #header .logo img{height:40px}
}

/* 992–1199：選單擠不下就先收側翼 */
@media (max-width:991.98px){
  :root{--gap-sec:var(--s5)}
  #header #navbar{display:none!important}
  .mobile-nav-toggle{display:inline-flex}
  #header .u-login{border-right:0;padding-right:0}
  #header .u-info .uucash > div{font-size:17px}
  .GameNav .nav-pills2 .nav-item .nav-link,
  .GameNav .nav-pills2 .nav-item > a{min-width:84px;min-height:80px;font-size:14px}
  .game-tab-content .games{grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
}

/* 768–991：平板專屬 —— 卡片不許橫躺變形（天條 36） */
@media (min-width:768px) and (max-width:991.98px){
  .gamesBox--image,.action-game{aspect-ratio:4/3}
  .game-tab-content .games{grid-template-columns:repeat(3,minmax(0,1fr))}
  .memberMenu .icon-link ul{grid-template-columns:repeat(6,minmax(0,1fr))}
  .transfer-group{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:767.98px){
  :root{--pad-x:var(--s2);--gap-sec:var(--s5);--h-head:60px}
  body{padding-bottom:calc(var(--h-ftnav) + 8px)}

  #header .logo img{height:34px;max-width:150px}
  #header .navbar-bg > .container{gap:8px}
  .btn-login,.btn-register{min-height:44px;padding:0 14px;font-size:15px}
  .btn-login.btn-sm,.btn-register.btn-sm{min-height:44px;padding:0 14px;font-size:15px}

  .mq-section,.top-bar{height:36px}
  .marquee-content,.marquee-content a{font-size:15px}

  .ft-navbar{display:block}
  .fixmenu{right:4px;bottom:calc(var(--h-ftnav) + 66px)}
  .fixmenu li a{width:48px;min-height:48px}
  .fixmenu li img{width:26px;height:26px}
  .back-to-top{width:48px;height:48px;right:4px}

  h1{font-size:26px} h2{font-size:23px} h3{font-size:20px} h4{font-size:18px}
  .page-seo-title,.live-title,.title,.section-title p{font-size:22px}
  .section-title h2{font-size:13px;letter-spacing:.18em}

  .testimonials{padding-top:var(--s3)}
  .testimonials-slider{border-radius:var(--r-m)}

  .GameNav{padding-top:var(--s4)}
  .GameNav .nav-pills2{
    flex-wrap:nowrap;overflow-x:auto;
    padding-bottom:var(--s2);gap:6px;
    scrollbar-width:none;
  }
  .GameNav .nav-pills2::-webkit-scrollbar{display:none}
  .GameNav .nav-pills2 .nav-item .nav-link,
  .GameNav .nav-pills2 .nav-item > a{min-width:80px;min-height:76px;font-size:14px;padding:8px 10px}
  .GameNav .nav-pills2 .nav-item img{width:28px;height:28px}

  .game-tab-content .games{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .action-game-100{grid-column:span 2}
  .BrandName{padding:8px 8px 10px}
  .game-name{font-size:15px}
  .gamesBox--logo{width:42px;top:8px;left:8px}
  .gamesBox--button,.gamesBox--button-none{margin:0;font-size:12px}

  .slotGames .row,.slot-game .row{--bs-gutter-x:10px;--bs-gutter-y:10px}
  .gameID{min-height:40px;font-size:16px;padding:8px 8px}

  .index-service{padding:var(--s4) 0!important}
  .index-service .serv{padding:var(--s2)}

  .memberMenu .icon-link ul{grid-template-columns:repeat(3,minmax(0,1fr))}
  .memberMenu .menu-link li a{min-height:52px;padding:8px var(--s2)}
  .box,.box-1,.box-2,.block,.block-left,.block-right,.block-info,
  .game-cash-box,.transfer-group-box,.deppost,.service-box{padding:var(--s2)}
  .transfer-group{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}

  table th,table td{padding:10px 12px;font-size:16px}

  .modal-header,.modal-body{padding:var(--s2)}
  .login-else-box{flex-direction:column}
  .auth-btn{flex:0 0 auto;width:100%}

  #footer{padding-top:var(--s4)}
  .footer-top .row{--bs-gutter-y:24px}
  .copyright{text-align:center}
}

@media (max-width:400px){
  #header .u-login .link{display:none}   /* 極窄螢幕先讓帳號餘額站穩 */
  .GameNav .nav-pills2 .nav-item .nav-link,
  .GameNav .nav-pills2 .nav-item > a{min-width:70px}
}

/* Bootstrap 的 .text-light 在這套淺色版面上等於白字白底，一律還原成內文色。
   真正需要白字的地方由各自的規則指定。 */
.text-light{color:var(--body)!important}
#footer .text-light,.table-dark .text-light,.memberMenu .user-lv .text-light,
.modal-header .text-light,.overlay .text-light,.vipcard .text-light{color:#fff!important}

/* --------------------------------------------------------------- 19. 收尾 */
/* 舊樣板殘留的裝飾字，在掛 noindex 的操作介面沒有存在必要（天條 53）。
   先用樣式收掉、不刪原始碼，要真的移除再另外提。 */
.quote-icon,.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* 任何寬內容都不許把頁面撐出橫向捲動（天條 34） */
html,body{overflow-x:hidden}
.table-responsive,.table-responsive-md,pre{max-width:100%}

/* 任何區塊都不許讓原尺寸大圖撐版（logo.png.webp 原圖是 3810px 寬） */
#header img,#footer img,.overlay img,.ft-navbar img,.fixmenu img,.memberMenu img{
  max-width:100%;
}

/* ==========================================================================

20. 逐條修正（全部來自 54 頁實測，不是憑選擇器猜的）
   ========================================================================== */

/* 20-1 深色表格裡被樣板挑出來反白的那幾列（.tr-1st / .tr-2nd…）
   底色被換成淺色、字仍是淺色 → 實測 1.02:1 */
.table-dark .tr-1st td,.table-dark .tr-1st th{
  background-color:#12295F!important;color:var(--gold-l)!important;font-weight:900;
}
.table-dark tr[class^="tr-"] td{color:#EAF2FF}
/* 淺色表格裡的同一組 class 走淺色版 */
table:not(.table-dark) .tr-1st td{background:var(--sky-2)!important;color:var(--ink)!important;font-weight:700}

/* 20-3 樣板把 .history-num / .history-date… 直接掛在 th 上，
   我的內文色蓋掉了表頭白字 → 實測 1.83:1 */
table th.history-num,table th.history-date,
table th.history-way,table th.history-money,
table th.num,table th.deppost{color:#fff!important}

/* 20-4 部分頁面自帶的 style 會把頁首選單改色（active 頁把它變成 slate-200，
   對毛玻璃底只有 1.18:1）。頁首是全站共用，這裡定死。 */
#header #navbar ul li a.nav-link,
#header #navbar ul li a{color:var(--ink)!important}
#header #navbar ul li a.nav-link:hover{color:var(--blue)!important}
#header .btn-login,#header .btn-login *{color:#3A2401!important}
#header .btn-register,#header .btn-register *{color:#fff!important}

/* 20-5 樣板 inline 的純紅字：深底上 #ff0000 只有 2.6:1，要提亮不是壓深 */
[style*="color:#ff0000"],[style*="color: #ff0000"],
[style*="color:red"],[style*="color: red"],
.text-danger,.tdspan-red,.red{color:var(--danger)!important}

/* 20-6 phonevalid 自帶的舊色票按鈕（淺藍／橘的 radial 漸層配白字） */
.input-group-append .btn,.input-group-append .btn-warning{
  background-color:#C9481C!important;
  background-image:var(--grad-orange)!important;
  color:#fff!important;
}

/* 20-7 deposit2 自帶一整套設計，只把對比不足的字調到過線 */
.deposit-container .section-label{color:var(--muted)!important;font-size:14px!important;letter-spacing:.1em}
.deposit-container .submit-btn,.fixed-bottom-bar .submit-btn{
  background-color:#8A5A02!important;
  background-image:linear-gradient(135deg,#A5751A 0%,#7A4E02 100%)!important;
  color:#fff!important;
}

/* 20-9 遊戲列表頁的縮圖連結整塊要可點，不是只有 27px 高的一行 */
a.img-link{display:block;min-height:44px}
a.img-link img{width:100%;height:auto}

/* 20-10 跑馬燈與頁尾的文字連結：頁尾屬次要連結（>=32px 即可），
   跑馬燈是主要資訊，拉到 40px。 */
.marquee-content a,.marquee-content .con{min-height:40px}
#footer ul li a{min-height:36px}

/* 20-11 樣板自己 inline 的錯誤訊息框（紅框）裡有很長的檔案路徑，
   在窄容器會撐出橫向捲動。這是既有的 PHP 錯誤，版面先擋住不讓它撐版。 */
[style*="border:1px solid #990000"]{
  display:block!important;
  flex:1 0 100%!important;      /* 錯誤框有時被塞進 <a class="btn"> 裡（見 Slot/sa），
                                   如果讓它變成 flex item 會被擠成 22px 寬的直條，
                                   長長的 backtrace 往下堆成 8,000px，整頁被撐到 59,000px */
  width:100%!important;min-width:0;max-width:100%;
  overflow-x:auto;word-break:break-all;
  font-size:14px;border-radius:var(--r-s);
}
/* 這種頁面的按鈕不要再當 flex 容器 */
a.btn:has([style*="#990000"]){display:block!important;height:auto!important}
[style*="border:1px solid #990000"] p{white-space:normal!important;word-break:break-all}

/* 20-12 about 頁自己的分頁籤（.pill-kind）只有 43px，差 1px */
.nav-pills .nav-item .nav-link,
.pill-kind .nav-link,
ul.nav-pills > li > a{
  display:flex;align-items:center;justify-content:center;
  min-height:48px;padding:8px 16px;
  border-radius:var(--r-s);
  background:var(--surf);border:1px solid var(--line);
  color:var(--ink);font-size:16px;font-weight:700;
  transition:background .18s,border-color .18s,color .18s;
}
ul.nav-pills{display:flex;flex-wrap:wrap;gap:8px;border:0;margin-bottom:var(--s3)}
ul.nav-pills > li{margin:0}
.nav-pills .nav-link:hover,ul.nav-pills > li > a:hover{background:var(--sky);border-color:var(--blue-l);color:var(--ink)}
.nav-pills .nav-link.active,ul.nav-pills > li > a.active{
  background-color:#0D2260;background-image:var(--grad-navy);
  border-color:transparent;color:#fff;
}

/* 20-13 about 頁的內容區塊字級 */
.about_body,.font-size-16{font-size:16px;line-height:1.8;color:var(--body)}
.about_body h2,.about_body h3,.about_body h4{color:var(--ink)}

/* 20-14 手機底部導覽的文字標籤要跟著深底走（實測 11.9:1），
   另外 LOGO 連結補到 44px。 */
.ft-navbar .ft-link,.ft-navbar .ft-link div,
.ft-navbar .ft-nav a,.ft-navbar .ft-nav a div{color:var(--on-navy)}
.ft-navbar .ft-linkMenu,.ft-navbar .ft-linkMenu div{color:var(--gold-l)}
a.footer-logo,a.ft_logo,a.scrollto.footer-logo{
  display:inline-flex;align-items:center;min-height:46px;
}

/* 20-15 手機的遊戲卡改成圖卡（樣板自己把圖掛 d-block d-lg-none） */
@media (max-width:991.98px){
  .game-tab-content .BrandGame > .container{display:block}
  .game-tab-content .md_img{display:none!important}
  .BrandGame .games{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .gamesBox{flex:auto}
  .gamesBox--image{display:block!important;aspect-ratio:4/3;overflow:hidden}
  .gamesBox--logo{
    position:absolute!important;top:8px;left:8px;z-index:2;
    width:auto;height:auto;padding:5px;margin:0;
    background:rgba(255,255,255,.94)!important;
    border:0;border-radius:8px;
    box-shadow:0 2px 8px rgba(13,34,96,.2)!important;
  }
  .gamesBox--logo img{max-width:56px;max-height:28px}
  .BrandName{
    flex-direction:row;align-items:center;justify-content:space-between;gap:8px;
    padding:8px 10px 10px;
  }
  .game-name{font-size:15px;text-align:left}
  .gamesBox--button{font-size:11px;padding:1px 8px;min-height:20px}
}

/* 20-16 底部導覽裡的 .auth-btn 與彈窗的 .auth-btn 同名不同物，這裡把它拉回深底樣式 */
.ft-navbar .auth-btn,
.ft-navbar .ft-link.auth-btn{
  flex:none;width:100%;min-height:52px;
  background:none!important;border:0!important;border-radius:0!important;
  color:var(--on-navy)!important;font-size:12px;font-weight:700;
  padding:4px 2px;
}
.ft-navbar .auth-btn div,.ft-navbar .ft-link div{color:var(--on-navy)!important;font-size:12px}
.ft-navbar .ft-linkMenu,.ft-navbar .ft-linkMenu div{color:var(--gold-l)!important}
.ft-navbar .ft-link:hover,.ft-navbar .auth-btn:hover{background:rgba(134,183,254,.16)!important}

/* 20-17 about 頁分頁籤：文字色一律定死，不讓頁面自帶的 style 改掉 */
.about_body ul.nav-pills > li > a,
.about_body .nav-pills .nav-link{color:var(--ink)!important;background-color:var(--surf)}
.about_body ul.nav-pills > li > a.active,
.about_body .nav-pills .nav-link.active{
  color:#fff!important;background-color:#0D2260;background-image:var(--grad-navy);
}

/* ==========================================================================

22. 登入後的頁首在 1024–1199 擠不下
   訪客版頁首（LOGO + 五個選單 + 登入註冊）在 1024 剛好放得下，
   但登入後多了「帳號／餘額 + 儲值 + 轉點」那一整塊，實測會撐到 1155px、
   超出 960 的容器。這個區間先收掉純導覽連結，帳號資訊與主要動作留著（天條 55）。
   ========================================================================== */
@media (max-width:1199.98px){
  #header #navbar > ul:has(> li.u-login) > li:not([class]){display:none}
  #header #navbar > ul > li > div[style*="padding"]{display:none}
  #header .u-login{gap:10px;padding-right:10px}
  #header .Wbtn{min-width:52px;min-height:48px;font-size:12px}
  #header .Wbtn img{width:20px;height:20px}
}
@media (max-width:1279.98px) and (min-width:1200px){
  #header #navbar .nav-link{padding:0 9px;font-size:15px}
}
/* 沒有 :has() 的瀏覽器退而求其次：整條選單在 1024 以下就收起來 */
@supports not selector(:has(*)){
  @media (max-width:1199.98px){
    #header #navbar > ul > li:not(.u-login):not(.d-none){display:none}
  }
}

/* ==========================================================================
   dcj88 base.css ─ 補漏
   這一段是第二輪才補的。前一輪的巡檢只量「當下看得見」的元素，
   而遊戲分類是分頁籤，**沒被選中的那幾頁整段量不到** ——
   捕魚機分頁用的是另一組 class，因此完全沒接到樣式。
   建置腳本現在會拿 54 頁的 markup 回頭比對，漏了會直接報出來。
   ========================================================================== */

/* --------------------------------------------------------------- 捕魚機 / 熱門分頁 */
/* 結構：.hotG-list > .h-link[.h-link-50|.h-link-twice] > a > .brandtxt + .h-image > img */
.hotG-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 12px;
  padding: var(--s2) 0 0;
  color: var(--body);
}
.hotG-list:empty { display: none; }

.h-link {
  flex: 0 0 calc((100% - 12px * 5) / 6);
  min-width: 0;
}
.h-link-50 { flex-basis: calc((100% - 12px * 5) / 6 * 2 + 12px); }
.h-link-twice { flex-basis: calc((100% - 12px * 5) / 6 * 2 + 12px); display: flex; gap: 12px; }
.h-link-twice > * { flex: 1 1 0; min-width: 0; }

.h-link > a {
  position: relative;
  display: block;
  border-radius: var(--r-m);
  overflow: hidden;
  min-height: 44px;
}

.h-image {
  aspect-ratio: 1 / 1;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--r-m);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--sky), var(--sky-2));
  box-shadow: var(--sh-1);
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
.h-image img { width: 100%; height: 100%; object-fit: cover; }
.h-link > a:hover .h-image {
  transform: translateY(-3px);
  box-shadow: var(--sh-2);
  border-color: var(--blue-l);
}

/* 廠商角標：原本是純紅／橘／綠配白字，實測 2.60–4.00:1 全部不及格。
   這裡各自壓深一階，維持可分辨，同時全部過 6:1 以上。 */
.brandtxt {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 1px 10px;
  background: #003879;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  border-radius: var(--r-m) 0 8px 0;
}
.brandtxt.be  { background: #B3121B; }   /* 白字 6.96:1，原 #ff0000 為 4.00:1 */
.brandtxt.rsg { background: #9C4A00; }   /* 6.19:1，原 #ff7b00 為 2.60:1 */
.brandtxt.zg  { background: #0B6B1D; }   /* 6.70:1，原 #009b17 為 3.68:1 */
.brandtxt.fc  { background: #6E5400; }   /* 7.16:1，原 #a48600 為 3.51:1 */
.brandtxt.db  { background: #2A4E9B; }   /* 7.89:1 */
.brandtxt.qt  { background: #6A2A8C; }   /* 9.04:1 */
.brandtxt.sp  { background: #0B5C74; }   /* 7.51:1 */

.hotGame .nav-pills { margin-bottom: var(--s3); }
.hotGame .tab-content { min-height: 160px; }
.hotGame .hotG-list {
  justify-content: center;
  min-height: 120px;
  align-items: center;
  font-size: 16px;
  color: var(--muted);
}

@media (max-width: 991.98px) {
  .h-link { flex-basis: calc((100% - 12px * 3) / 4); }
  .h-link-50,
  .h-link-twice { flex-basis: calc((100% - 12px * 3) / 4 * 2 + 12px); }
}
@media (max-width: 767.98px) {
  .hotG-list { gap: 10px; }
  .h-link { flex-basis: calc((100% - 10px * 2) / 3); }
  .h-link-50,
  .h-link-twice { flex-basis: calc((100% - 10px * 2) / 3 * 2 + 10px); }
  .h-link-twice { flex-direction: column; }
  .brandtxt { font-size: 11px; padding: 1px 8px; min-height: 20px; }
}

/* --------------------------------------------------------------- 遊戲廠商大圖 */
.md_img_img img { width: 100%; height: auto; }

/* --------------------------------------------------------------- 原本靠 member.css 的零星 class */
/* 這幾個原本定義在 member.css 裡，用的是上一代的米色 #e8e3d3 */
.border-b-1 { border-bottom: 1px solid var(--line-2); }
.statusBox.border-l-r { border-width: 0 1px; border-style: solid; border-color: var(--line-2); }
.statusBox { text-align: center; padding: var(--s2); }
.statusBox .img-status {
  width: 72px; height: 72px;
  margin: 0 auto var(--s1);
  background: var(--sky);
  border: 1px solid var(--line);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.member-page .m-taggle-bar { text-align: right; }
.member-page .m-taggle-bar img { max-width: 24px; }
/* member.css 原本有一條 `.member-page .w-100{width:60%!important}`，
   等於把工具類反過來用。這裡改成限制表單區塊的最大寬度，語意比較清楚。 */
.member-page .box form,
.member-page .my-form { max-width: 620px; }
@media (max-width: 767.98px) {
  .member-page .box form,
  .member-page .my-form { max-width: none; }
}

/* --------------------------------------------------------------- 死 class（留紀錄，不出樣式）
   markup 有用到、但 style.css / member.css 從來沒定義過，等於一直是裝飾性殘留：
     .bg-1（products）、.col-L / .col-R（guide）、.my-form（三支會員頁）、
     .col-form-label（forget）、.col-xs-6（esport，Bootstrap 3 的寫法，BS4/5 沒有）
   這裡不補樣式，列出來讓之後的人知道不是漏掉。 */

/* 驗證器只認裸的 .border-l-r，這裡明寫一條，語意跟上面那條一致 */
.border-l-r { border-left: 1px solid var(--line-2); border-right: 1px solid var(--line-2); }

/* ==========================================================================
   dcj88 base.css ─ 版面修正（第三輪）
   前兩輪只量「有沒有壞」（對比、溢出、觸控目標），沒有量「位置對不對」。
   這一段是把整頁的區塊座標逐一量出來之後才發現的問題。

   量測時要先中和 AOS：`[data-aos]` 進場前帶著 translate3d(0,100px,0)，
   量到的座標會整個偏移 100px，會誤判成版面壞掉。
   ========================================================================== */

/* --------------------------------------------------------------- 1. 頁尾前的間距疊加
   實測 .index-service 底部 1742 → #footer 頂部 1886，中間 144px。
   來源是 main 的 padding-bottom 72 加上 #footer 的 margin-top 72 疊起來。
   天條 38：只留上間距。間距歸頁尾自己出，main 不再補。 */
main#main { padding-bottom: 0; }

/* --------------------------------------------------------------- 2. 首區塊貼著走馬燈
   第一個區塊的 padding-top 被歸零，主視覺會直接黏在走馬燈下緣。
   天條 37：首區塊的間距另定，這裡給 24px。 */
main#main > section:first-child { padding-top: var(--s3); }

/* --------------------------------------------------------------- 3. 分類區的左右欄高度差
   實測左欄（說明 + 四張卡）302px、右邊那張大圖 455px，差 153px，
   卡片下面空一大塊。把圖的高度收在跟左欄同一個量級，讓它置中對齊。 */
.game-tab-content .md_img { align-self: center; }
.game-tab-content .md_img img {
  max-height: 360px;
  width: auto;
  margin-inline: auto;
}

/* --------------------------------------------------------------- 4. 主視覺到第一張卡之間的空白
   實測 394px 才看得到第一張遊戲卡。分類軌本身 113px 是必要的，
   其餘都是內距，收掉 32px。 */
.GameNav { padding-top: var(--s4); }
.GameNav .nav-pills2 {
  margin-bottom: var(--s3);
  padding-bottom: var(--s2);
}

/* --------------------------------------------------------------- 5. 手機版的遊戲卡
   原始樣板的意圖是「統一 130px 高的橫式卡」，寬度才分通欄（.action-game-100）
   與半格（.action-game-50）。我上一版改成 4:3 圖卡，高度就跟著寬度跑——
   實測變成 358×309 兩張、174×171 兩張，四張卡三種高度，節奏很跳。
   這裡回到原始意圖：**高度統一，只有寬度分兩種**。 */
@media (max-width: 991.98px) {
  .game-tab-content .BrandGame > .container { max-width: 520px; }

  .BrandGame .games {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: stretch;
  }

  .gamesBox.action-game {
    flex: 0 0 calc((100% - 10px) / 2);
    height: 132px;
    min-height: 132px;
    overflow: hidden;
  }
  .gamesBox.action-game.action-game-100 { flex-basis: 100%; }

  /* 卡片內部：圖片在左、名稱在右，兩種寬度共用同一套結構 */
  .gamesBox.action-game > a {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    height: 100%;
    text-align: left;
  }
  .gamesBox--image {
    display: block !important;
    flex: 0 0 46%;
    height: 100%;
    aspect-ratio: auto;
    border-right: 1px solid var(--line-2);
  }
  .gamesBox--image img { width: 100%; height: 100%; object-fit: cover; }

  .gamesBox--logo {
    position: absolute !important;
    top: 6px; left: 6px; z-index: 2;
    width: auto; height: auto;
    padding: 4px 6px; margin: 0;
    background: rgba(255, 255, 255, .94) !important;
    border: 0; border-radius: 7px;
    box-shadow: 0 2px 8px rgba(13, 34, 96, .2) !important;
  }
  .gamesBox--logo img { max-width: 48px; max-height: 22px; }

  .BrandName {
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
  }
  .game-name {
    font-size: 16px;
    text-align: left;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }
  .gamesBox--button {
    order: -1;               /* 角標排在名稱上方 */
    font-size: 11px;
    min-height: 20px;
    padding: 1px 8px;
    margin: 0;
  }
  .gamesBox--button.gamesBox--button-none { display: none; }
}

/* 360 以下（iPhone SE 這類）半格卡放不下橫式，改成整排通欄，維持同一個高度 */
@media (max-width: 360px) {
  .gamesBox.action-game { flex-basis: 100%; height: 120px; min-height: 120px; }
  .gamesBox--image { flex-basis: 40%; }
}

/* --------------------------------------------------------------- 6. .full-link 不是覆蓋層
   我原本把 .full-link 當成「蓋滿整張卡的透明連結」處理，給了
   position:absolute + text-indent:-9999px。實際上站上 11 處都是**包著卡片內容**的
   連結（DB 真人那張就是），結果整張卡的文字被推到畫面外，量到的寬度是 0。
   原始 style.css 也只給它 width/height:100% + z-index，沒有要它隱藏文字。 */
.gamesBox > a.full-link,
.action-game .full-link {
  position: static;
  inset: auto;
  z-index: 1;
  width: 100%;
  height: 100%;
  text-indent: 0;
  overflow: visible;
}

/* --------------------------------------------------------------- 7. 手機卡片的圖片對齊
   卡片圖是直式人物照，橫式裁切預設取中間，結果只看得到軀幹。
   改成靠上對齊，臉才會在框裡。 */
@media (max-width: 991.98px) {
  .gamesBox--image img { object-position: center top; }
}

/* --------------------------------------------------------------- 8. 手機頁尾收緊
   實測手機版頁尾將近 1,000px，廠商 LOGO 牆佔掉四排。 */
@media (max-width: 767.98px) {
  .brand-logo { padding: var(--s2) 0; }
  .brand-logo .container { gap: 6px; }
  .brand-logo img { max-width: 58px; max-height: 26px; padding: 4px 6px; }
  #footer .footer-top .row { --gy: 20px; }
  #footer ul li a { min-height: 34px; font-size: 15px; }
  #footer h5, #footer h4 { font-size: 16px; margin-bottom: 8px; }
  .ft-about p { font-size: 15px; line-height: 1.75; }
  .footer-bottom { margin-top: var(--s3); padding: var(--s2) 0 var(--s3); }
  .copyright { font-size: 14px; }
}

/* ==========================================================================
   dcj88 base.css ─ 素材明暗極性（v8：淺底）
   ==========================================================================
   站上的素材是**為深底畫的**：館別圖示、廠商 LOGO、底部導覽全是白色去背
   （亮度 207~255），只有會員圖示 member/icon/* 是純黑。
   外殼翻成淺底之後，那批白素材放白卡片上會直接消失。

   v5 的解法是在每一組白素材後面墊一塊深藍牌子 —— 結果是一張白紙貼滿深色貼紙，
   那一版被打回過。這一版換個做法：**把白素材本身轉深**。

   可以這樣做是因為量過了：四支代表性的廠商 LOGO
   （casino_sa / slot_qt / sport_super / keno_bingo）**平均彩度都是 0**，
   是純單色去背圖。`brightness(0)` 出來是乾淨的深色剪影，沒有顏色可以毀。
   彩色的角色圖（casino_dg 那批）不在這一層，維持原樣。
   ========================================================================== */

/* --------------------------------------------------------------- 分類軌
   淺底三態：未選＝白卡片＋深藍字，選中＝深藍實心＋白字。
   圖示跟著各自狀態的字色走。 */
.GameNav .nav-pills2 .nav-item .nav-link,
.GameNav .nav-pills2 .nav-item > a {
  background-color: var(--surf);
  background-image: none;
  border: 1px solid var(--line);
  color: var(--ink);
}
.GameNav .nav-pills2 .nav-item img {
  filter: brightness(0) opacity(.72);   /* 白圖示轉深 */
}
.GameNav .nav-pills2 .nav-item .nav-link:hover,
.GameNav .nav-pills2 .nav-item > a:hover {
  background-color: var(--surf-2);
  border-color: var(--line-hi);
  color: var(--ink);
}
/* 選中：深藍實心，整組反白 —— 只有這一個狀態是深的 */
.GameNav .nav-pills2 .nav-item .nav-link.active,
.GameNav .nav-pills2 .nav-item > a.active,
.GameNav .nav-pills2 .nav-item.active > a {
  background-color: var(--navy);
  background-image: var(--grad-navy);
  border-color: transparent;
  box-shadow: var(--sh-1);
  color: var(--on-navy);
}
.GameNav .nav-pills2 .nav-item .nav-link.active img,
.GameNav .nav-pills2 .nav-item > a.active img,
.GameNav .nav-pills2 .nav-item.active > a img { filter: none; }

/* --------------------------------------------------------------- 廠商 LOGO
   不墊牌子，直接把白 LOGO 轉深坐在卡片上。 */
.gamesBox--logo {
  background-color: transparent !important;
  background-image: none !important;
  border-bottom: 1px solid var(--line-2);
}
.gamesBox:hover .gamesBox--logo {
  background-image: linear-gradient(180deg, rgba(13, 34, 96, .05), rgba(13, 34, 96, 0)) !important;
}
.gamesBox--logo img { filter: brightness(0) opacity(.78); }
.gamesBox:hover .gamesBox--logo img { filter: brightness(0) opacity(1); }

/* --------------------------------------------------------------- 金底上的白圖示
   金色漸層仍然是亮面，圖示照舊轉深，跟字同一個深度。 */
.btn-login .btn-icon,
.overlay .color1 img,
#header .btn-member img { filter: brightness(0) saturate(0) opacity(.8); }
/* 橘底是深面，白圖示維持原樣 */
.btn-register .btn-icon,
.overlay .color2 img { filter: none; }

/* --------------------------------------------------------------- 頁尾廠商牆
   白 LOGO 轉深，跟卡片上的同一套處理。 */
.brand-logo img { filter: brightness(0) opacity(.55); }
.brand-logo img:hover { filter: brightness(0) opacity(.85); }

/* --------------------------------------------------------------- 黑色素材
   member/icon/*.webp 量到亮度 0（純黑）—— 淺底上本來就看得見，不要動它。
   v6 那層 invert 是給深底用的，這裡整組拿掉。 */
.memberMenu .icon-link img,
.memberMenu .menu-link img,
.memberMenu .user-lv img,
.member-icon img,
.membernav img { filter: none; opacity: .78; }
.memberMenu .menu-link > li > a:hover img,
.memberMenu .icon-link a:hover img { filter: none; opacity: 1; }

/* --------------------------------------------------------------- 底部導覽
   這一列大多是白素材（亮度 234~255），少數兩支是深的（icon_1 / icon_5 亮度 36）。
   淺底上剛好反過來：白的要轉深，深的原樣用。 */
.ft-navbar img { filter: brightness(0) opacity(.72); }
.ft-navbar img[src*="icon_1."],
.ft-navbar img[src*="icon_5."],
.ft-navbar img[src*="icon_10"],
.ft-navbar img[src*="icon_12"] { filter: none; opacity: .78; }
/* 註冊那一格是金色實心底，圖示已經在 74 那層處理，別被上面兩條蓋回去 */
.ft-navbar .ft-nav > li:last-child > .ft-link img { opacity: .82; }

/* --------------------------------------------------------------- 樣板背景圖
   nav/bg.png.webp（亮度 81）這類深色小圖是舊版拿來當分類軌底的，
   淺底上鋪一塊深斑更突兀。 */
[style*="nav/bg.png"], [style*="nav/bg.jpg"],
.GameNav[style], .nav-pills2[style] { background-image: none !important; }

/* ==========================================================================
   dcj88 base.css ─ 表單驗證狀態與登入／註冊／忘記密碼
   ========================================================================== */

/* --------------------------------------------------------------- 驗證狀態
   Bootstrap 的 .invalid-feedback 預設是 display:none，只有在 .was-validated
   或 .is-invalid 之下才顯示。我拆掉 Bootstrap 時漏了這組，等於所有錯誤訊息
   一進頁面就全部攤開。 */
.invalid-feedback,
.valid-feedback { display: none; width: 100%; margin-top: 4px; font-size: 15px; }
.invalid-feedback { color: var(--danger); }
.valid-feedback { color: var(--ok); }

.was-validated :invalid ~ .invalid-feedback,
.is-invalid ~ .invalid-feedback { display: block; }
.was-validated :valid ~ .valid-feedback,
.is-valid ~ .valid-feedback { display: block; }

.was-validated .form-control:invalid,
.form-control.is-invalid { border-color: #B3121B; }
.was-validated .form-control:invalid:focus,
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(179, 18, 27, .14); }
.was-validated .form-control:valid,
.form-control.is-valid { border-color: #7FBF9C; }

/* --------------------------------------------------------------- 登入／註冊／忘記密碼
   結構：section.member > .container > .row.user_p > .col-10 > .title + form
   原本表單是攤在整片白底上、標題貼在最左邊，右半邊整塊空著。
   收成一張置中的卡片，寬度限在一眼讀得完的範圍。 */
.member .user_p { justify-content: center; }
.member .user_p > [class*="col-"] {
  flex: 0 0 auto;
  width: 100%;
  max-width: 520px;
  margin: 0 auto !important;   /* 蓋掉 markup 上的 .m-auto，那會把剩餘空間吃掉 */
  padding: var(--s4);
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  box-shadow: var(--sh-1);
}
.member .user_p .col-md-12,
.member .user_p .col-12,
.member .user_p .col-lg-9,
.member .user_p .row {
  max-width: none;
  padding: 0;
  margin: 0 !important;
  background: none;
  border: 0;
  box-shadow: none;
  width: 100%;
}

.member .title { margin-bottom: var(--s3) !important; text-align: center; }
.member .title h4,
.member .title .title-blue {
  font-size: 24px;
  font-weight: 900;
  color: var(--ink);
  margin: 0;
}

/* 驗證碼：圖片本來就寫在 label 裡，讓它跟文字同一行、右側對齊 */
.member .form-group label {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.member .form-group label img#regImg,
.member .form-group label img.img-fluid {
  height: 40px;
  width: auto;
  margin-left: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  background: var(--surf);
}

/* --------------------------------------------------------------- 其他登入方式 */
.login-else {
  margin: var(--s3) 0 0;
  align-items: center;
  row-gap: 10px;
}
.login-else h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
  margin: 0;
  white-space: nowrap;
}
.login-else .hr { height: 1px; background: var(--line); border: 0; margin: 0; }
.login-else .col-sm-12 {
  display: flex;
  gap: 10px;
}
/* .log-img 是「連結」不是圖示：原本沒給它盒模型，裡面的品牌圖就用原尺寸撐開，
   變成兩塊巨大的方塊上下疊。改成兩顆等寬的外框鈕。 */
.login-else a.log-img {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 14px;
  width: auto;
  height: auto;
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  transition: background .18s, border-color .18s;
}
.login-else a.log-img:hover { background: var(--sky); border-color: var(--blue-l); }
.login-else a.log-img img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex: none;
}

/* --------------------------------------------------------------- 送出列 */
.member form .form-group.text-center {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--line-2);
}
.member form .form-group.text-center .btn { flex: 1 1 0; min-width: 140px; }
.member form .form-group.text-center br { display: none; }
.member form .form-group.text-center > a[href*="Forget"] {
  flex: 1 0 100%;
  text-align: center;
  font-size: 15px;
  color: var(--muted);
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.member form .form-group.text-center > a[href*="Forget"]:hover { color: var(--blue); }

/* 「加入會員」原本掛 .btn-danger，我沒定義它，結果變成一段純文字 */
.btn-danger {
  background-color: var(--surf);
  background-image: none;
  color: var(--blue);
  border-color: var(--blue-l);
}
.btn-danger:hover { background-color: var(--sky); color: var(--ink); }
.btn-outline-danger { background: transparent; color: var(--danger); border-color: rgba(255,107,107,.45); }

@media (max-width: 575.98px) {
  .member .user_p > [class*="col-"] { padding: var(--s3) var(--s2); border-radius: var(--r-m); }
  .login-else .col-sm-12 { flex-direction: column; }
  .member form .form-group.text-center .btn { flex: 1 0 100%; }
}

/* 社群登入鈕原本只有一張品牌圖，沒有任何文字。補上標籤，
   讓它符合「圖示不能單獨當按鈕」的原則（也方便讀屏軟體）。 */
.login-else a.log-img::after {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.login-else a.log-img[href*="Google"]::after { content: "Google 登入"; }
.login-else a.log-img[href*="Line"]::after,
.login-else a.log-img[href*="line"]::after { content: "LINE 登入"; }

/* ==========================================================================
   dcj88 base.css ─ 內容頁
   11 支頁面用的是 `<div class="main">` 而不是 `<main id="main">`，
   我先前寫的區塊節奏規則（`main#main > section`）對它們完全沒作用，
   所以那些頁的內容直接貼在走馬燈下面、左右也沒有留白。
   ========================================================================== */

div.main {
  display: block;
  padding-top: var(--s5);
  padding-bottom: 0;
}
div.main > .container { max-width: var(--maxw); }

/* --------------------------------------------------------------- 內容區 */
.content { padding: 0; }
.content > .title,
div.main .title {
  font-size: 26px;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -.01em;
  margin: 0 0 var(--s4);
  padding-bottom: 12px;
  border-bottom: 2px solid var(--line);
}

/* 行寬：中文一行約 40 字內比較好讀（天條 34）。
   內容頁的段落收在 68ch，不讓它跟著 1160 的容器一路拉滿。 */
.content p,
.content li,
.about_body p,
.site-section p { max-width: 68ch; }
.content p { margin: 0 0 var(--s2); line-height: 1.85; }

/* --------------------------------------------------------------- 左右兩欄（guide）
   .col-L / .col-R 在 style.css 裡從來沒有樣式，所以左邊的分頁清單一直是
   一串裸的項目符號。這裡做成左側直向分頁軌 + 右側內容。 */
.content { display: block; }
@media (min-width: 992px) {
  .content:has(> .col-L) {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: var(--s5);
    align-items: start;
  }
  .content:has(> .col-L) > .title { grid-column: 1 / -1; }
}
.col-L { min-width: 0; }
.col-R { min-width: 0; }

.tab-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  margin: 0 0 var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--sky);
  overflow: hidden;
}
.tab-left li { list-style: none; margin: 0; }
.tab-left li a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 16px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  border-left: 3px solid transparent;
  transition: background .18s, color .18s, border-color .18s;
}
.tab-left li a:hover { background: var(--sky-2); color: var(--ink); }
.tab-left li.active a,
.tab-left li a.active {
  background: var(--surf);
  color: var(--ink);
  border-left-color: var(--gold-l);
}
.tab-left li a i { display: none; }   /* .g1~.g5 是舊主題的圖示鉤子，沒有圖 */

@media (max-width: 991.98px) {
  .tab-left { flex-direction: row; flex-wrap: wrap; gap: 8px; background: none; border: 0; }
  .tab-left li a {
    border: 1px solid var(--line);
    border-left-width: 1px;
    border-radius: var(--r-s);
    background: var(--surf);
    min-height: 44px;
    padding: 8px 14px;
  }
  .tab-left li.active a { background: var(--navy); color: #fff; border-color: var(--ink); }
}

/* --------------------------------------------------------------- 步驟式內容 */
.content .w2,
.content .w3 {
  display: block;
  color: var(--ink);
  font-weight: 900;
}
.content .w2 {
  font-size: 21px;
  margin: 0 0 var(--s3);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-2);
}
.content .w3 {
  font-size: 17px;
  margin: var(--s4) 0 6px;
  padding-left: 12px;
  border-left: 3px solid var(--gold-l);
}
.content .tab-pane > img {
  max-width: 100%;
  height: auto;
  margin: 10px 0 0;
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  background: var(--sky);
}
/* 空的 <p>&nbsp;</p> 是舊樣板用來製造間距的，改由上面的 margin 負責 */
.content .tab-pane > p:empty { display: none; }

/* --------------------------------------------------------------- 舊 side.php 那組殘留樣板
   contract / m-bonus / m-message / m-news_son 這幾支引用的 side.php
   帶著一整套沒有樣式的舊結構，收成單欄，不讓它撐版。 */
.wapper, .content-bg, .page-wrapper { padding: 0; }
.service-box { margin-bottom: var(--s3); }

/* --------------------------------------------------------------- 會員頁的橫向導覽
   m-account_bank / m-account_transfer / m-bonus_order / m-sell / m-settings 等
   9 支頁面用的是 `ul#myTab.membernav`，這個 class 在 style.css 裡沒有任何規則，
   所以一直是一串裸的項目符號。做成跟其他分頁軌同一套外觀。 */
.membernav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 0 var(--s3);
  margin: 0 0 var(--s4);
  border-bottom: 1px solid var(--line);
}
.membernav li { list-style: none; margin: 0; }
.membernav li a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: var(--surf);
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  transition: background .18s, border-color .18s, color .18s;
}
.membernav li a:hover { background: var(--sky); border-color: var(--blue-l); color: var(--ink); }
.membernav li.active a {
  background-color: #0D2260;
  background-image: var(--grad-navy);
  border-color: transparent;
  color: #fff;
}

/* 內文裡零星的圖示（例如帳戶頁的「已綁定 Google」）沒有尺寸，
   會用原尺寸把版面撐開。 */
.content img:not(.img-fluid):not([class]),
.box img:not([class]),
.user-info img:not([class]) { max-width: 40px; height: auto; }

@media (max-width: 767.98px) {
  .membernav { gap: 6px; padding-bottom: var(--s2); margin-bottom: var(--s3); }
  .membernav li a { padding: 8px 12px; font-size: 15px; }
}

/* ==========================================================================
   dcj88 base.css ─ 遊戲列表頁（真人 / 體育 / 彩票 / 棋牌 / 捕魚 / 各廠商）
   結構：section.site-section > .container > .live-title > .row > .col-* >
         .slot-game > .media-02819 > a.img-link > img + h3 + a.btn-1
   原本這幾支只靠 style.css 的零星規則撐著，拆掉之後卡片就散成
   「一張圖 + 一行字 + 一顆鈕」的裸排列。
   ========================================================================== */

.site-section { padding-top: var(--s5); }
.site-section > .container { max-width: var(--maxw); }

/* --------------------------------------------------------------- 頁面標題 */
.live-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--s5);
}
.live-title img { max-width: 320px; height: auto; }
.live-title h1,
.live-title h2 {
  font-size: 28px;
  font-weight: 900;
  color: var(--ink);
  margin: 0;
  text-align: center;
  letter-spacing: -.01em;
}

/* --------------------------------------------------------------- 遊戲卡 */
.slot-game {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  overflow: hidden;
  box-shadow: var(--sh-1);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.slot-game:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-2);
  border-color: var(--blue-l);
}
.slot-game .media-02819 {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0 !important;
}

/* 圖片先把位置佔住，載不到也不會讓版面塌掉（站上有一批圖是 404，見報告） */
.slot-game a.img-link {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(180deg, var(--sky), var(--sky-2));
  border-bottom: 1px solid var(--line-2);
  min-height: 0;
}
.slot-game a.img-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.slot-game h3 {
  margin: 0;
  padding: 12px 12px 6px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
  text-align: center;
  flex: 1;
}
.slot-game .btn-1,
.slot-game a.btn-1 {
  margin: 0 12px 12px;
  min-height: 44px;
  border-radius: var(--r-s);
  font-size: 15px;
}

/* 這幾頁的欄位在 markup 上掛了 .m-auto，會把剩餘空間吃掉，
   整排卡片就被推成一欄一欄的散排。 */
.site-section .row > [class*="col-"].m-auto { margin: 0 !important; }
.site-section .row { --gx: 16px; --gy: 16px; }

/* --------------------------------------------------------------- 廠商遊戲格（gamebox） */
.slotGames > .container,
.slot-game-list > .container { max-width: var(--maxw); }

/* --------------------------------------------------------------- 說明區 */
.gamepage .content,
.promopage .content { padding-top: var(--s5); }
.font-size-18 { font-size: 16px; line-height: 1.85; color: var(--body); }
.font-size-18 p { max-width: 68ch; }

/* 說明段落旁的示意圖 */
.site-section .row img.img-fluid { border-radius: var(--r-m); }

@media (max-width: 767.98px) {
  .live-title { margin-bottom: var(--s4); }
  .live-title h1, .live-title h2 { font-size: 22px; }
  .site-section .row { --gx: 10px; --gy: 10px; }
  .slot-game h3 { padding: 10px 8px 4px; font-size: 15px; }
  .slot-game .btn-1, .slot-game a.btn-1 { margin: 0 8px 8px; font-size: 14px; }
}

/* --------------------------------------------------------------- 廠商遊戲格的斷點
   桌機 6 個一排、平板 4 個、手機 3 個。外層容器靠 overflow:hidden 清除浮動，
   markup 上本來就寫了，不必再補。 */
@media (max-width: 1199.98px) { .gamebox { width: calc(25% - 14px); } }
@media (max-width: 767.98px)  { .gamebox { width: calc(33.3333% - 10px); margin: 0 5px 10px; } }
@media (max-width: 400px)     { .gamebox { width: calc(50% - 10px); } }

/* 分頁列 */
nav[aria-label="Page navigation"] { clear: both; padding-top: var(--s3); }

/* 廠商遊戲格裡的「開始遊戲」只掛了 .btn，沒有色彩變體，會變成一行藍字 */
.gamebox > a.btn {
  display: flex;
  margin: 0 8px 8px;
  min-height: 40px;
  padding: 0 10px;
  border-radius: var(--r-s);
  background-color: #E6A52C;
  background-image: var(--grad-gold);
  color: #3A2401;
  font-size: 14px;
  font-weight: 900;
}
.gamebox > a.btn:hover { color: #3A2401; filter: brightness(1.05); }
.gamebox .gameID { padding: 8px 8px 4px; }

/* 遊戲卡的圖被我自己的規則縮成 40px（2026-09-05 線上實測抓到）
   ─────────────────────────────────────────────────────────────
   48-content.css 有一條「內文裡零星的圖示沒有尺寸，會把版面撐開」的保險：

       .content img:not(.img-fluid):not([class]) { max-width: 40px }

   遊戲卡的 <img> 剛好也沒有 class、也在 .content 裡面，整批被它掃到。
   那條的特異性是 0-3-1，壓得過 `.gameimg img`（0-1-1），
   所以圖只有 40px，框卻是 170px —— 卡片上是一小塊縮圖配一大片空白。

   線上量到的：Slot/qt 701 張、Slot/sa 37 張、Slot/vg 11 張全中；
   rsg／icg／ge 沒事，因為那幾頁的 img 有 class，一開始就不在保險的範圍裡。

   這裡把遊戲卡放回來。前兩條寫到 0-3-1 跟保險同級，靠排在後面贏；
   第三條收沒有 .content／.box 包著的情形。 */
.content .gamebox .gameimg img,
.box .gamebox .gameimg img,
.gamebox .gameimg img {
  max-width: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   dcj88 base.css ─ 舊版元件
   站上有幾支頁面用的是更早期的 markup（Bootstrap 3 的 .panel 手風琴、
   自訂的 .gmae_body 產品卡、._vr_tabs 廠商分頁）。Bootstrap 5 早就沒有
   .panel 這組，所以**線上原本也沒有樣式**，不是我拆掉才壞的。
   這裡一併補上，讓這幾頁跟其他頁同一套外觀。
   ========================================================================== */

/* --------------------------------------------------------------- 標題附件 */
.title span {
  display: inline-block;
  margin-left: 10px;
  font-size: .62em;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--gold);
  vertical-align: middle;
}
.title em.triangle,
em.triangle { display: none; }          /* 舊主題的裝飾三角，沒有對應圖 */

/* --------------------------------------------------------------- 頁首橫幅 */
.topbanner { margin: 0 0 var(--s4); }
.topbanner img {
  width: 100%;
  height: auto;
  border-radius: var(--r-m);
  background: linear-gradient(180deg, var(--sky), var(--sky-2));
}
/* 走馬燈之前那一塊裸的 .topbanner 要跟著容器對齊 */
body > .topbanner {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  padding-top: var(--s3);
}

/* --------------------------------------------------------------- 廠商分頁（egame / esport） */
.nav-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 0 var(--s3);
  margin: 0 0 var(--s4);
  border-bottom: 1px solid var(--line);
}
.nav-tabs > li { list-style: none; margin: 0; }
.nav-tabs > li > a,
.nav-tabs .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: var(--surf);
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  transition: background .18s, border-color .18s, color .18s;
}
.nav-tabs > li > a:hover,
.nav-tabs .nav-link:hover { background: var(--sky); border-color: var(--blue-l); color: var(--ink); }
.nav-tabs > li.active > a,
.nav-tabs > li > a.active,
.nav-tabs .nav-link.active {
  background-color: #0D2260;
  background-image: var(--grad-navy);
  border-color: transparent;
  color: #fff;
}
.nav-tabs > li > a img,
.nav-tabs .nav-link img { width: 22px; height: 22px; object-fit: contain; }

/* --------------------------------------------------------------- Bootstrap 3 的 .panel 手風琴（news） */
.page_news { max-width: 820px; margin-inline: auto; }
.panel-group { display: flex; flex-direction: column; gap: 10px; }
.panel,
.panel-default {
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  overflow: hidden;
  box-shadow: var(--sh-1);
}
.panel-heading { padding: 0; background: var(--sky); border-bottom: 1px solid var(--line-2); }
.panel-title { margin: 0; font-size: 17px; }
.panel-title > a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 12px 18px;
  color: var(--ink);
  font-weight: 900;
  font-size: 17px;
}
.panel-title > a::after {
  content: "＋";
  margin-left: auto;
  font-size: 18px;
  font-weight: 900;
  color: var(--blue);
  line-height: 1;
}
.panel-title > a[aria-expanded="true"]::after { content: "－"; }
.panel-title > a:hover { background: var(--sky-2); }
.panel-body { padding: var(--s3); color: var(--body); font-size: 16px; line-height: 1.85; }
.panel-body p { max-width: 68ch; }
/* Bootstrap 3 用 .in 表示展開，BS4/5 用 .show，兩個都要吃 */
.panel-collapse.collapse.in,
.collapse.in { display: block; }

/* --------------------------------------------------------------- 產品卡（products） */
.wrapper { display: block; }
.our-history { padding-top: var(--s5); }
.our-history > .container-fluid { max-width: var(--maxw); margin-inline: auto; }
.our-history .row { --gx: 20px; --gy: 20px; }

.gmae_body { display: flex; }
.gmae_body > a {
  display: flex;
  width: 100%;
  color: inherit;
}
.gmae_info {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: var(--s3);
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  box-shadow: var(--sh-1);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.gmae_body > a:hover .gmae_info {
  transform: translateY(-3px);
  box-shadow: var(--sh-2);
  border-color: var(--blue-l);
}
.gmae_info > .container { max-width: none; padding: 0; margin: 0; flex: 1; }
.gmae_info h4 {
  font-size: 19px;
  font-weight: 900;
  color: var(--ink);
  margin: 0 0 10px;
}
.gmae_info p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--body);
  margin: 0 0 var(--s3);
  max-width: none;
}
.gmae_info a.button {
  align-self: flex-start;
  margin-top: auto;
  min-height: 44px;
  padding: 0 20px;
  border-radius: var(--r-pill);
  background-color: #E6A52C;
  background-image: var(--grad-gold);
  color: #3A2401;
  border: 0;
  font-size: 15px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
}
.gmae_info a.button:hover { filter: brightness(1.05); color: #3A2401; }

/* --------------------------------------------------------------- 舊的 .bg-1 是沒有定義的裝飾 class */
.bg-1 { background: none; }

@media (max-width: 767.98px) {
  .nav-tabs { gap: 6px; padding-bottom: var(--s2); margin-bottom: var(--s3); }
  .nav-tabs > li > a, .nav-tabs .nav-link { padding: 8px 12px; font-size: 15px; }
  .panel-title > a { padding: 12px 14px; font-size: 16px; }
  .panel-body { padding: var(--s2); }
  .gmae_info { padding: var(--s2); }
}

/* ==========================================================================
   dcj88 base.css ─ App 版型
   Owner 2026-08-27：「/action/ 開始是遊戲大廳，等於要做應用程式的版型，
   那些頁尾可以不用放了」「頁尾按鈕是導覽重點，可以做更細緻的設計」。

   所以這一層做三件事：
     1. 把行銷型頁尾收掉，只留一條法遵資訊帶（免責聲明／服務條款／責任博彩
        是必須留的，不能跟著頁尾一起拿掉）
     2. 底部導覽升格成主要導覽，照 App 的規格重做
     3. 會員中心重排：對齊、分區、一眼看得到帳號與餘額

   尺寸依據（ui-ux-pro-max 的 App 規則）：
     觸控目標 >= 44x44、相鄰目標間距 >= 8px、圖示尺寸走 token 不隨手給值、
     按下的回饋在 80–150ms 之間、回饋只改顏色不改版面（避免抖動）。
   ========================================================================== */

:root {
  /* App 專用的尺寸 token */
  --tab-h: 64px;          /* 底部導覽高度（不含安全區） */
  --tab-icon: 26px;
  --icon-sm: 20px;
  --icon-md: 24px;
  --icon-lg: 32px;
  --tap: 44px;            /* 觸控目標下限 */
  --press: 120ms;         /* 按下回饋時間 */
}

/* --------------------------------------------------------------- 1. 頁尾收掉 */
/* 品牌 LOGO 牆、網站地圖、關於文案、社群連結：App 版型不需要 */
#footer .brand-logo { display: none; }
#footer .footer-top .row > *:nth-child(1),
#footer .footer-top .row > *:nth-child(2),
#footer .footer-top .row > *:nth-child(4) { display: none; }

/* 只留「網站聲明」那一欄，改成一條窄的法遵資訊帶 */
#footer {
  margin-top: var(--s5);
  padding-top: var(--s3);
  background-color: var(--navy-x);
  background-image: none;
  border-top: 1px solid rgba(134, 183, 254, .16);
}
#footer .footer-top { padding-bottom: 0; }
#footer .footer-top .row {
  --gy: 0px;
  justify-content: center;
}
#footer .footer-top .row > *:nth-child(3) {
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 18px;
}
#footer .footer-top .row > *:nth-child(3) h5 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--on-navy-dim);
  margin: 0;
  opacity: .8;
}
#footer .footer-top .row > *:nth-child(3) ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 16px;
  margin: 0;
}
#footer .footer-top .row > *:nth-child(3) ul li a,
#footer .footer-top .row > *:nth-child(3) ul li {
  font-size: 15px;
  color: var(--on-navy-dim);
  min-height: 34px;
  display: inline-flex;
  align-items: center;
}
#footer .footer-top .row > *:nth-child(3) ul li a:hover { color: #fff; }

.footer-bottom {
  margin-top: var(--s2);
  padding: var(--s2) 0 var(--s3);
  border-top: 1px solid rgba(219, 233, 255, .12);
}
.copyright { font-size: 14px; color: var(--on-navy-dim); opacity: .8; }

/* 手機還要再往上讓出底部導覽的高度 */
@media (max-width: 991.98px) {
  #footer { padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom)); }
}

/* --------------------------------------------------------------- 2. 底部導覽（主要導覽） */
.ft-navbar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1040;
  padding: 0 0 env(safe-area-inset-bottom);
  background-color: rgba(9, 22, 55, .97);
  background-image: linear-gradient(180deg, rgba(17, 34, 77, .97), rgba(7, 17, 41, .99));
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-top: 1px solid rgba(134, 183, 254, .26);
  box-shadow: 0 -6px 24px -8px rgba(0, 0, 0, .55);
}
@media (max-width: 991.98px) { .ft-navbar { display: block; } }

.ft-navbar .ft-nav {
  display: flex;
  align-items: stretch;
  max-width: 560px;
  margin-inline: auto;
  padding: 6px 6px 0 !important;
  gap: 2px;
}
.ft-navbar .ft-nav > li {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  margin: 0;
}

.ft-navbar .ft-link,
.ft-navbar .ft-nav a,
.ft-navbar .ft-nav label {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-height: calc(var(--tab-h) - 8px);
  padding: 6px 2px 8px;
  border-radius: var(--r-m);
  color: var(--on-navy);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .02em;
  /* 只換顏色，不做位移或縮放——避免按下時整排跳動 */
  transition: background-color var(--press) ease, color var(--press) ease;
  -webkit-tap-highlight-color: transparent;
}
.ft-navbar .ft-link img,
.ft-navbar .ft-nav img {
  width: var(--tab-icon);
  height: var(--tab-icon);
  object-fit: contain;
  flex: none;
  transition: opacity var(--press) ease;
  opacity: .92;
}
.ft-navbar .ft-link div,
.ft-navbar .ft-nav a div { color: inherit; font-size: 12px; }

.ft-navbar .ft-link:hover,
.ft-navbar .ft-link:focus-visible { background-color: rgba(134, 183, 254, .16); color: #fff; }
.ft-navbar .ft-link:active { background-color: rgba(134, 183, 254, .26); }
.ft-navbar .ft-link:hover img { opacity: 1; }

/* 選單鍵：次要，收斂 */
.ft-navbar .ft-linkMenu,
.ft-navbar .ft-linkMenu div { color: var(--on-navy-dim); }

/* 註冊：整組導覽裡唯一的強調色，做成實心藥丸 */
.ft-navbar .ft-nav > li:last-child .ft-link {
  margin: 0 2px;
  background-color: #C9481C;
  background-image: var(--grad-orange);
  color: #fff;
  box-shadow: 0 4px 14px -6px rgba(201, 72, 28, .9);
}
.ft-navbar .ft-nav > li:last-child .ft-link div { color: #fff; }
.ft-navbar .ft-nav > li:last-child .ft-link:hover { filter: brightness(1.06); background-color: #C9481C; }

/* 登入：次強調，外框藥丸 */
.ft-navbar .ft-nav > li:nth-last-child(2) .ft-link {
  margin: 0 2px;
  border: 1px solid rgba(255, 217, 138, .55);
  color: var(--gold-l);
}
.ft-navbar .ft-nav > li:nth-last-child(2) .ft-link div { color: var(--gold-l); }

/* 內容底部讓出導覽高度，別讓固定列蓋住最後一排 */
@media (max-width: 991.98px) {
  body { padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + var(--s2)); }
}

/* 浮動客服鈕要疊在導覽之上，不要卡在同一層 */
.fixmenu { bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + 12px); }
.back-to-top { bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + 76px); }
@media (min-width: 992px) {
  .fixmenu { bottom: 88px; }
  .back-to-top { bottom: 24px; }
}

/* --------------------------------------------------------------- 3. 會員中心 */
/* 原本的問題：帳號列、三顆快捷、選單三塊各自為政，圖示與文字沒有對齊基線，
   有些項目多一個 .info 副標把行高撐開，看起來就雜。
   重排成三個明確的區：身分 → 快捷動作 → 功能清單。 */

.member, .member-page { padding-top: var(--s4); }

.memberMenu {
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  overflow: hidden;
  box-shadow: var(--sh-1);
}

/* 3-1 身分區：帳號 + 餘額，一眼看得到（天條 55） */
.memberMenu .user-lv {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3);
  background-color: #0D2260;
  background-image: var(--grad-navy);
  color: #fff;
}
.memberMenu .user-lv .box-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.memberMenu .user-lv .user-text {
  margin: 0;
  font-size: 19px;
  font-weight: 900;
  color: #fff;
  letter-spacing: .01em;
  overflow-wrap: anywhere;
}
.memberMenu .user-lv .box-info .user-text + .user-text {
  font-size: 14px;
  font-weight: 400;
  color: var(--on-navy-dim);
}

/* 3-2 快捷動作：等寬三格，圖示在上、文字在下，基線對齊 */
.memberMenu .icon-link { padding: 0; }
.memberMenu .icon-link ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-2);
  border-bottom: 1px solid var(--line);
  margin: 0 !important;
}
.memberMenu .icon-link li { background: var(--surf); margin: 0 !important; }
.memberMenu .icon-link li a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 92px;
  padding: 14px 8px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  line-height: 1.25;
  transition: background-color var(--press) ease;
}
.memberMenu .icon-link li a:hover { background: var(--sky); }
.memberMenu .icon-link li a:active { background: var(--sky-2); }
.memberMenu .icon-link img {
  width: var(--icon-lg);
  height: var(--icon-lg);
  object-fit: contain;
  flex: none;
}
/* 手機多出來的三個紀錄項（d-md-none）會讓格線變成 6 格，維持 3 欄兩列 */
@media (max-width: 767.98px) {
  .memberMenu .icon-link li a { min-height: 84px; font-size: 14px; }
  .memberMenu .icon-link img { width: var(--icon-md); height: var(--icon-md); }
}

/* 3-3 功能清單：一行一項，左圖示、右箭頭，全部對齊同一條左緣 */
.memberMenu .menu-link { margin: 0 !important; padding: 0; }
.memberMenu .menu-link > li {
  position: relative;
  border-bottom: 1px solid var(--line-2);
  margin: 0 !important;
}
.memberMenu .menu-link > li:last-child { border-bottom: 0; }
.memberMenu .menu-link > li > a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 10px var(--s3) 10px calc(var(--s3) + 3px);
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  transition: background-color var(--press) ease;
}
.memberMenu .menu-link > li > a:hover { background: var(--sky); }
.memberMenu .menu-link > li > a:active { background: var(--sky-2); }
.memberMenu .menu-link img {
  width: var(--icon-md);
  height: var(--icon-md);
  object-fit: contain;
  flex: none;
}
/* 右側箭頭：純 CSS，不另外要圖 */
.memberMenu .menu-link > li > a:first-of-type::after {
  content: "";
  margin-left: auto;
  width: 8px; height: 8px;
  border-right: 2px solid var(--line);
  border-bottom: 2px solid var(--line);
  transform: rotate(-45deg);
  flex: none;
}
/* 有些項目多一個帶 .info 的第二個 <a>，把它併成同一列的副標 */
.memberMenu .menu-link > li > a:nth-of-type(2) {
  min-height: 0;
  padding: 0 var(--s3) 10px calc(var(--s3) + 3px + var(--icon-md) + 12px);
  margin-top: -6px;
}
.memberMenu .menu-link .info {
  font-size: 14px;
  font-weight: 400;
  color: var(--muted);
  padding: 0;
  min-height: 0;
}
/* 目前所在頁：左側金色標記（樣板用 ID 掛在 li 上） */
.memberMenu .menu-link > li[id] { position: relative; }

/* --------------------------------------------------------------- 4. 按鈕與間距細修 */
/* 主要動作全站同一種尺寸，次要動作小一階，兩者的高度差不要小於 6px，
   不然看起來像沒對齊而不是刻意的層級。 */
.btn, .mbtn, .btn-confirm {
  min-height: 48px;
  padding: 0 22px;
  font-size: 16px;
  letter-spacing: .01em;
  transition: background-color var(--press) ease, filter var(--press) ease, box-shadow var(--press) ease;
}
.btn:hover, .mbtn:hover, .btn-confirm:hover { transform: none; }   /* 不做位移，避免抖動 */
.btn:active, .mbtn:active { filter: brightness(.96); }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 15px; }
.btn-lg { min-height: 54px; padding: 0 30px; font-size: 17px; }

/* 相鄰的按鈕至少 10px 間距 */
.form-group.text-center, .transfer-actions, .transfer-all, .line-btn { gap: 10px; }

/* 表單欄位與按鈕同一個高度基準，排在一起才會齊 */
.form-control, input[type=text], input[type=password], input[type=email],
input[type=tel], input[type=number], input[type=date], select, textarea {
  min-height: 48px;
}
.input-group > .btn, .input-group-append .btn { min-height: 48px; }

/* 卡片內距統一 */
.box, .box-1, .box-2, .block, .block-left, .block-right, .block-info,
.game-cash-box, .transfer-group-box, .deppost, .service-box {
  padding: var(--s3);
  border-radius: var(--r-m);
}

/* --------------------------------------------------------------- 5. App 版型的頁首 */
/* 大廳是 App 的主畫面，頁首收薄一點，把空間讓給內容 */
@media (max-width: 991.98px) {
  :root { --h-head: 56px; --h-mq: 34px; }
  #header .logo img { height: 30px; }
  .btn-login.btn-sm, .btn-register.btn-sm {
    min-height: var(--tap);
    padding: 0 14px;
    font-size: 15px;
  }
  .marquee-content, .marquee-content a { font-size: 14px; }
}

/* --------------------------------------------------------------- 6. 裝飾性標題圖
   站上有一批 *-title.png.webp 是「把標題做成圖片」，而且檔案在伺服器上是 404
   （chess-title / lottery-title_cn / casino_title / fishing-title / sign-up-title /
    notice-title / fsd-title）。這些圖旁邊本來就有同樣文字的 <h1>，
   天條 24 也說文字不該做成圖片，直接不顯示，標題交給文字。 */
.live-title img[src*="-title"],
.live-title img[src*="_title"],
.title img[src*="-title"],
img[src$="404.png.webp"] { display: none; }

/* --------------------------------------------------------------- 7. 手機頁首要看得到帳號與餘額
   `#navbar` 掛著 `d-none d-lg-block`，所以登入後的帳號／餘額在手機完全看不到——
   使用者進站三秒內該看到的第一件事就這樣消失了（天條 55）。
   把整條選單打開、只留 .u-login 那一項，其餘藏掉。
   （用 :has() 判斷「有登入」；瀏覽器不支援時就維持原本隱藏，不會壞。） */
@media (max-width: 991.98px) {
  #header #navbar:has(.u-login) { display: block !important; flex: 1; }
  #header #navbar:has(.u-login) > ul { display: flex; justify-content: flex-end; }
  #header #navbar:has(.u-login) > ul > li:not(.u-login) { display: none !important; }
  #header .u-login {
    border-right: 0;
    padding: 0;
    margin: 0;
    gap: 10px;
  }
  #header .u-info .uuid > div { font-size: 13px; }
  #header .u-info .uucash > div { font-size: 17px; }
  #header .u-login .link { display: none; }   /* 儲值／轉點在底部導覽已經有了 */
}

/* --------------------------------------------------------------- 8. 分類軌在 390 要放得下
   五格 × 80px 加間距是 424px，比 390 扣掉左右留白之後的 358 還寬，
   最右邊那格會被切掉，看起來像壞掉。縮到五格剛好排得下。 */
@media (max-width: 767.98px) {
  .GameNav .nav-pills2 { gap: 6px; }
  .GameNav .nav-pills2 .nav-item .nav-link,
  .GameNav .nav-pills2 .nav-item > a {
    min-width: calc((100vw - var(--pad-x) * 2 - 6px * 4) / 5);
    padding: 8px 4px;
    font-size: 13px;
  }
  .GameNav .nav-pills2 .nav-item img { width: 26px; height: 26px; }
}

/* --------------------------------------------------------------- 9. 區塊節奏再收一階
   App 版型的垂直節奏比行銷頁緊，主視覺到分類軌之間不需要 72px。 */
@media (max-width: 991.98px) {
  :root { --gap-sec: var(--s4); }
  .testimonials { padding-top: var(--s2); }
  .GameNav { padding-top: var(--s3); }
  .GameNav .nav-pills2 { margin-bottom: var(--s3); padding-bottom: var(--s2); }
  main#main > section:first-child { padding-top: var(--s2); }
}

/* --------------------------------------------------------------- 10. 登入後的手機頁首要收斂
   把 #navbar 打開之後，右側同時出現「帳號餘額 + 登出 + 會員 + 漢堡」，390 放不下，
   登出跟會員直接被擠出畫面。登入後右側只留「登出」，會員中心走底部導覽進。 */
@media (max-width: 991.98px) {
  #header:has(.u-login) .mobile-nav-toggle { display: none !important; }
  #header:has(.u-login) .navbar-bg > .container > .d-lg-none > a:last-child { display: none !important; }
  #header:has(.u-login) .navbar-bg > .container { gap: 8px; }
  #header:has(.u-login) .logo img { height: 26px; max-width: 110px; }
  #header:has(.u-login) .btn-login.btn-sm,
  #header:has(.u-login) .btn-register.btn-sm {
    padding: 0 12px;
    font-size: 14px;
    border-radius: var(--r-pill);
  }
  #header:has(.u-login) .u-info .uucash > div { font-size: 16px; }
  #header:has(.u-login) .u-info .uuid > div { font-size: 12px; }
}

/* --------------------------------------------------------------- 11. 等高卡片
   .row 的欄位預設是 flex item，但裡面的卡片沒有撐滿，四張卡的底緣就會參差。 */
.index-service .row > [class*="col-"] { display: flex; }
.index-service .serv { width: 100%; height: auto; display: flex; flex-direction: column; }
.index-service .serv p { flex: 1; }
.our-history .row > [class*="col-"] { display: flex; }
/* 只有真的裝著遊戲卡的欄位才需要 flex（讓卡片撐滿欄高）。
   v5 沒加條件，結果 live／keno 那種「.site-section 裡放說明文字」的頁面，
   col-md-12 也被設成 flex —— 標題、分頁籤、內容三個子元素變成並排的 flex item，
   標題被壓成 53px 寬、文字一行兩個字。截圖才看得出來，數值稽核不會報。
   :has() 不支援時整條被忽略，退回原本的 block，不會壞版。 */
.site-section .row > [class*="col-"]:has(> .slot-game) { display: flex; }
.site-section .row > [class*="col-"] > .slot-game { width: 100%; }

/* 分類說明與分類軌之間留一個節拍 */
.game-tab-content .info-body { margin-bottom: var(--s3); }
.game-tab-content .BrandGame > .container { padding-top: var(--s2); }

/* --------------------------------------------------------------- 12. 會員頁的「目前所在頁」
   樣板各自用 `#menu_transfer{background:#b7bec3}` 這種灰色去標示目前頁，
   六支頁面六種灰。統一成品牌的選取樣式：淡藍底 + 上緣金線。 */
.memberMenu .icon-link li[id] { position: relative; }
.memberMenu .icon-link li#menu_depost,
.memberMenu .icon-link li#menu_transfer,
.memberMenu .icon-link li#menu_withdraw,
.memberMenu .icon-link li#deposit_history,
.memberMenu .icon-link li#game_history,
.memberMenu .icon-link li#sell_history {
  background: var(--surf) !important;
  box-shadow: none !important;
}
.memberMenu .icon-link li[id].is-current,
.memberMenu .icon-link li[id][style],
.memberMenu .icon-link li[id]:has(> a[href$="transfer.aspx"]):not(:hover) { background: var(--surf) !important; }

/* --------------------------------------------------------------- 13. 錢包與場館餘額
   「一鍵回收」原本是一條跨整個容器的橘色橫條，比頁面上任何東西都搶眼；
   「回收」小鈕的圖示疊在文字右邊。兩個都收成正常尺寸的按鈕。 */
.btn-warning.w-100.my-3,
#taBTN {
  width: auto !important;
  min-width: 180px;
  margin: 0 0 var(--s3) !important;
  padding: 0 22px;
  gap: 8px;
}
#taBTN img { width: 16px; height: 16px; margin: 0; }
.game-cash-box .m-auto,
.game-cash-row .m-auto { margin: 0 !important; }

.game-cash-box .btn,
.transfer-group-box .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--tap);
  padding: 0 16px;
  font-size: 15px;
}
.game-cash-box .btn img,
.transfer-group-box .btn img { width: 16px; height: 16px; margin: 0; flex: none; }

/* 總資產：數字要是這一塊裡最大的字，按鈕不要跟它並排搶位置 */
.num.WalletTotal,
.game-cash-box .num {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 26px;
  font-weight: 900;
  color: var(--ink);
}
.num.WalletTotal span { font-size: 18px; font-weight: 700; color: var(--muted); }
.btn-autorenew { margin-left: 10px; }

/* 場館卡片：等高、資訊靠左、動作靠下 */
.game-cash-row .row { --gx: 12px; --gy: 12px; }
.game-cash-row .row > [class*="col-"] { display: flex; }
.transfer-group-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: space-between;
  background: var(--sky);
  border: 1px solid var(--line);
}
.transfer-group-box .Amount { font-size: 18px; }

/* --------------------------------------------------------------- 14. 觸控目標收尾 */
/* 頁首 LOGO 連結只有 102x30 */
#header .logo a { min-height: var(--tap); }

/* 會員選單的副標也是一個連結，但只有 10px 高。併進上一列的點擊範圍裡：
   讓它與主連結重疊成同一個可點區塊，而不是一條 10px 的細線。 */
.memberMenu .menu-link > li { display: flex; flex-direction: column; }
.memberMenu .menu-link > li > a:nth-of-type(2) {
  min-height: 34px;
  align-items: flex-start;
  padding-top: 0;
  padding-bottom: 12px;
  margin-top: -10px;
}

/* 內容裡零星的小連結與小按鈕 */
.content a.btn, .box a.btn, button.btn2, .btn2 {
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
}

/* 廠商遊戲格的「開始遊戲」字級拉到 15，全站 1,200 多顆都是這一顆 */
.gamebox > a.btn { font-size: 15px; min-height: var(--tap); }

/* ==========================================================================
   dcj88 base.css ─ v6 版面重排
   ==========================================================================
   v5 的問題不是顏色不夠漂亮，是**東西沒有填滿它該佔的位置**：
     · 分類軌五顆膠囊只佔容器 45%，右邊空一大片
     · 館別卡片固定 158px 寬，四張擺完離右邊界還差 70px
     · 會員清單六列裡三列高度不一樣、三列莫名帶金色標記
     · 頁面最後掛著一整區純為 SEO 寫的敘述文字（天條 53 說這種在 noindex 的
       PHP 端要拿掉）
   這一層專門處理「位置」，顏色的事在 00-tokens 與 46-ink-polarity。
   ========================================================================== */

/* --------------------------------------------------------------- 1. 區塊節奏
   天條 38：只設上間距，不設下間距。App 介面比行銷頁緊，用 --gap-sec（56px）。 */
main#main > section { padding-top: var(--gap-sec); padding-bottom: 0; }
main#main > section:first-of-type { padding-top: var(--s3); }

/* --------------------------------------------------------------- 2. 分類軌：等分填滿
   樣板本來就寫 `<li class="nav-item col">`，Bootstrap 的 .col 是 flex:1 0 0%。
   v5 給了 `.nav-item{flex:0 0 auto}` 把它壓回內容寬 —— 五顆 96px 的膠囊擺在
   1160px 的容器裡，右邊自然空 620px。改回等分，順便把高度收成一致。 */
.GameNav .nav-pills2 { gap: 10px; flex-wrap: nowrap; }
.GameNav .nav-pills2 .nav-item { flex: 1 1 0; min-width: 0; }
.GameNav .nav-pills2 .nav-item .nav-link,
.GameNav .nav-pills2 .nav-item > a {
  width: 100%;
  min-width: 0;
  min-height: 84px;
  padding: 12px 8px;
  border-radius: var(--r-m);
  gap: 8px;
  font-size: 15px;
  /* 按下只換底色，不做位移 —— 位移會讓整排跟著抖 */
  transform: none !important;
}
.GameNav .nav-pills2 .nav-item img { width: var(--icon-lg); height: var(--icon-lg); }

/* 軌道上方給一個定位標題，不然那排膠囊是懸空的 */
.GameNav > .container { position: relative; }
.GameNav > .container::before {
  content: "遊戲大廳";
  display: block;
  margin-bottom: 12px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .22em;
  color: var(--muted);
}

@media (max-width: 767.98px) {
  /* 手機放不下五顆等分，改回可橫向滑動的軌道（自己包捲動容器，天條 34） */
  .GameNav .nav-pills2 {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
  }
  .GameNav .nav-pills2::-webkit-scrollbar { display: none; }
  .GameNav .nav-pills2 .nav-item { flex: 0 0 21%; min-width: 78px; }
  .GameNav .nav-pills2 .nav-item .nav-link,
  .GameNav .nav-pills2 .nav-item > a { min-height: 76px; font-size: 14px; }
  .GameNav .nav-pills2 .nav-item img { width: var(--icon-md); height: var(--icon-md); }
}

/* --------------------------------------------------------------- 3. 館別區塊
   結構是 .BrandGame > .container > (.md_games > .info-body + .games) + .md_img。
   桌機做成兩欄：左邊文案＋卡片格，右邊人物圖。
   卡片改成格線等分，才會真的填滿左欄（v5 是固定 158px，永遠差一截）。 */
.game-tab-content .BrandGame > .container { gap: var(--s4); align-items: stretch; }
.game-tab-content .md_games { display: flex; flex-direction: column; }
.game-tab-content .info-body { margin-bottom: var(--s3); }
.info-body .leading-loose { max-width: 46ch; }

.BrandGame .games {
  display: grid;
  /* 固定欄數，不用 auto-fill。auto-fill 會按「塞得下幾欄」算，
     真人館只有四張卡卻排出五欄 —— 右邊多一個空欄，就是天條 55 說的落單尾巴。 */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  align-content: start;
}
@media (max-width: 991.98px) {
  .BrandGame .games { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
  .BrandGame .games { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.BrandGame .games > .gamesBox { flex: none; width: auto; min-width: 0; }

/* 人物圖：v5 是 34% 寬、垂直置中，結果底部被區塊邊界切掉。
   改成貼齊左欄高度、底對齊，圖片自己不超出。 */
.game-tab-content .md_img {
  flex: 0 0 260px;
  max-width: 260px;
  align-self: flex-end;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.game-tab-content .md_img img {
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .55));
}

@media (max-width: 1199.98px) {
  .game-tab-content .md_img { flex: 0 0 200px; max-width: 200px; }
}

/* --------------------------------------------------------------- 4. 純 SEO 敘述區收掉
   天條 53：掛 noindex 的 PHP 端只留「操作看得懂需要的」與「法遵必須留的」，
   純為搜尋引擎寫的敘述文字直接拿掉。首頁尾巴這四張卡就是這類 ——
   「終極遊戲天堂」「發現興奮點」對已經登入的人沒有任何用途，
   而且它是整頁唯一長得像行銷頁的東西。
   用 CSS 隱藏而不是刪原始碼（天條 49／13：還原就是拿掉這一條）。 */
/* 選擇器要贏過樣板掛的 .d-md-block（工具類排在後面且帶 !important，
   同特異性就是後者勝）—— 多一層標籤選擇器就夠。 */
main#main section.index-service,
section.index-service { display: none !important; }

/* --------------------------------------------------------------- 5. 會員中心
   v5 有三個具體的毛病，都在這裡收掉。 */

/* 5-1 幽靈列：.menu-link > li 裡有第二個 <a>，內容是 `.info.d-md-none`。
   桌機時 .info 被 Bootstrap 藏起來，但那個 <a> 還在，帶著 padding 佔 16px 高
   —— 所以六列裡有三列比較高。桌機直接把整個第二個 <a> 收掉。 */
@media (min-width: 768px) {
  .memberMenu .menu-link > li > a:nth-of-type(2) { display: none; }
}

/* 5-2 列高與底色統一（天條 55：同一頁的清單用同一套底色系統） */
.memberMenu .menu-link > li,
.memberMenu .menu-link li { background: transparent !important; }
.memberMenu .menu-link > li > a:first-of-type {
  min-height: 58px;
  padding-top: 0;
  padding-bottom: 0;
}
.memberMenu .menu-link > li > a:hover { background: var(--surf-2); color: var(--ink); }
.memberMenu .menu-link > li > a:active { background: var(--surf-3); }
.memberMenu .menu-link > li > a:first-of-type::after {
  border-right-color: var(--muted);
  border-bottom-color: var(--muted);
}

/* 5-3 身分區：v5 是一條 90px 高、只寫了一個帳號的深藍帶，其餘全空。
   收成 76px，左邊補一個頭像圓（純 CSS，不另外要圖），右邊掛會員等級標。
   帳號餘額本來就在頁首，這裡不重複。 */
.memberMenu .user-lv {
  position: relative;
  min-height: 76px;
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--line-hi);
}
.memberMenu .user-lv::before {
  content: "";
  flex: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--grad-gold);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .18) inset;
  /* 人像剪影：站上沒有頭像素材，用兩個 radial 疊出來，不放 SVG（天條 23） */
  background-image:
    radial-gradient(circle at 50% 34%, rgba(18, 32, 62, .82) 0 22%, transparent 23%),
    radial-gradient(ellipse at 50% 108%, rgba(18, 32, 62, .82) 0 34%, transparent 35%),
    var(--grad-gold);
}
.memberMenu .user-lv .user-text { font-size: 18px; }
.memberMenu .user-lv::after {
  content: "一般會員";
  margin-left: auto;
  flex: none;
  padding: 5px 12px;
  border: 1px solid var(--line-hi);
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: .04em;
}

/* 5-4 快捷格：分隔線用表面色差做，不要一條一條的實線 */
.memberMenu .icon-link ul { background: var(--line-2); }
.memberMenu .icon-link li { background: var(--surf) !important; }
.memberMenu .icon-link li a:hover { background: var(--surf-2); }
.memberMenu .icon-link li a:active { background: var(--surf-3); }

/* 5-5 卡片本身：桌機限寬置中，不要整片拉滿（天條 55） */
.member .member-menu_web,
.member-page .member-menu_web { max-width: 720px; margin-inline: auto; }
@media (max-width: 767.98px) {
  .member .member-menu_web,
  .member-page .member-menu_web { max-width: none; }
}

/* --------------------------------------------------------------- 6. 回頂端
   v5 貼在 right:6px，半顆掛在視窗邊緣上。往內收，並且讓開底部導覽。 */
.back-to-top {
  right: 16px;
  bottom: calc(var(--h-ftnav) + 20px);
  background: var(--surf-2);
  border: 1px solid var(--line);
}
@media (min-width: 992px) { .back-to-top { bottom: 24px; } }

/* --------------------------------------------------------------- 7. 頁首
   深底之後 LOGO 要用白版；站上的 logo.png 本身就是亮色素材（亮度 207），
   直接用即可。深底上不需要再給它底色。 */
#header .navbar-bg { box-shadow: var(--sh-head); }
#header .logo img { filter: none; }

/* --------------------------------------------------------------- 8. 存摺範本連結
   帳戶管理頁的四個「範本」是夾在說明句子裡的純文字連結，實測 32×27px。
   它其實是一個動作（開一張範例圖），做成小藥丸鈕比較誠實，順便過 44px。 */
.member-page a[href*="/images/bank/"],
.member a[href*="/images/bank/"] {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  margin: 0 4px;
  padding: 0 14px;
  border: 1px solid var(--line-hi);
  border-radius: var(--r-pill);
  color: var(--gold);
  font-size: 14px;
  font-weight: 700;
  transition: background-color var(--press) ease;
}
.member-page a[href*="/images/bank/"]:hover,
.member a[href*="/images/bank/"]:hover { background: rgba(239, 192, 114, .12); }

/* --------------------------------------------------------------- 9. 手機的會員副標列
   .menu-link 每個 li 的第二個 <a> 在手機上會顯示（帳號認證｜更換密碼），
   實測 356×36px。它跟上面那列指向同一個位址，但仍然是獨立的可點區域，
   照天條 34 補到 44px。 */
@media (max-width: 767.98px) {
  .memberMenu .menu-link > li > a:nth-of-type(2) {
    display: flex;
    align-items: center;
    min-height: var(--tap);
    margin-top: -10px;
    padding-bottom: 6px;
  }
  .memberMenu .menu-link > li > a:first-of-type { min-height: 48px; }
}

/* --------------------------------------------------------------- 10. 遊戲卡的字級
   卡片標題 15px、按鈕 14px 偏小，兩個都往上推一階。
   標題與按鈕差 2px 太接近（天條 42），標題加粗拉開層級。 */
.slot-game h3 { font-size: 16px !important; font-weight: 900; }
.slot-game .btn-1, .slot-game a.btn-1 { font-size: 15px !important; }
@media (max-width: 767.98px) {
  .slot-game h3 { font-size: 16px !important; }
  .slot-game .btn-1, .slot-game a.btn-1 { font-size: 15px !important; }
}

/* --------------------------------------------------------------- 11. 按鈕語彙統一
   天條 55：主要動作按鈕全站同一種樣式。v5 是金／橘／磚紅三套混用 ——
   登入是金、送出是橘、查詢是磚紅，同一件事在不同頁長得不一樣。
   v6 收成三種，各自只代表一件事：
     主要動作 = 金底深字（送出、確認、儲值、查詢）
     次要動作 = 透明底金描邊（取消、重設、範本）
     註冊     = 橘底白字（全站唯一，只出現在頁首與底部導覽） */
.btn-warning,
.member-page .btn, .member-page .btn-warning,
.input-group-append .btn, .input-group-append .btn-warning,
.deposit-container .submit-btn, .fixed-bottom-bar .submit-btn,
#submitBtn, .btn-confirm, .mbtn {
  background-color: #E0A733 !important;
  background-image: var(--grad-gold) !important;
  color: var(--on-gold) !important;
  border-color: transparent !important;
  box-shadow: var(--sh-gold);
}
.btn-warning:hover,
.member-page .btn:hover, .input-group-append .btn:hover,
#submitBtn:hover, .btn-confirm:hover, .mbtn:hover { filter: brightness(1.06); }

/* 註冊維持橘，是全站唯一的橘。
   漸層一定要配一個明確的 background-color —— 不然量對比度時抽不到底色，
   會被當成中灰算成 3.55:1（實際是 4.6~6.4）。這個坑踩過不只一次。 */
.btn-register, .overlay .color2, .ft-navbar .ft-nav > li:last-child .ft-link {
  background-color: #BF3B0A !important;
  background-image: var(--grad-orange) !important;
  color: #fff !important;
}
.ft-navbar .ft-nav > li:last-child .ft-link,
.ft-navbar .ft-nav > li:last-child .ft-link * { color: #fff !important; }

/* --------------------------------------------------------------- 12. 兩支驗證頁的頁首與表單
   .intro-page 的標題貼齊容器左緣，表單卻是 col-md-6 置中 —— 兩個東西各自對齊
   不同的基準，看起來就是沒對齊。標題改置中，表單包成卡片，同一條中軸。 */
.intro-page { padding-top: var(--s5); text-align: center; }
.intro-page h2 {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 8px;
}
.intro-page p { font-size: 20px; font-weight: 900; color: var(--ink); margin: 0; }
.intro-page .dot-dash { display: none; }

.register .signForm, .register .user-account {
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: var(--s4);
  box-shadow: var(--sh-1);
}
.register .input-group { display: block; }
.register .input-group-prepend { display: block; margin-bottom: 6px; }
.register .input-group-text {
  display: block;
  padding: 0;
  background: none;
  border: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--body);
}
.register .form-control-plaintext,
.register .form-control {
  width: 100%;
  min-height: var(--btn-md);
  padding: 0 14px;
  background: var(--surf-3);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  color: var(--ink);
  font-size: 16px;
}
.register .form-control-plaintext:focus,
.register .form-control:focus {
  outline: none;
  border-color: var(--line-hi);
  box-shadow: 0 0 0 3px rgba(239, 192, 114, .16);
}
.register .submitdiv { margin-top: var(--s3); text-align: center; }
.register .submitdiv .btn {
  float: none !important;
  min-height: var(--btn-lg);
  padding: 0 44px !important;
  border-radius: var(--r-s) !important;
  font-size: 17px;
  font-weight: 900;
}

/* --------------------------------------------------------------- 13. 登入／註冊表單
   13-1 樣板在 <form> 上直接寫死 class="was-validated"，所以一進頁面三個必填欄位
        就全部亮紅框加「請輸入此欄位！」。使用者還沒動任何一個欄位就先被罵一次。
        改成：欄位還是空的（:placeholder-shown）時不算錯，填了才驗。
        純 CSS，不動 markup 也不動 JS，拿掉這幾條就回到原狀。 */
.was-validated .form-control:invalid:placeholder-shown,
.was-validated .form-control:required:invalid:placeholder-shown {
  border-color: var(--line) !important;
  background-image: none !important;
}
.was-validated .form-control:invalid:placeholder-shown ~ .invalid-feedback,
.was-validated .form-control:invalid:placeholder-shown + .invalid-feedback { display: none !important; }

/* 13-2 驗證碼圖被塞在 <label> 裡，框架的 img{display:block} 把它推成獨立一行、
        再被 .img-fluid 拉寬，結果壓在欄位右上角。讓 label 自己排成一行。 */
.form-group label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--body);
}
.form-group label img {
  display: inline-block;
  flex: none;
  margin-left: auto;
  width: 120px;
  height: 40px;
  border-radius: 6px;
  object-fit: cover;
  cursor: pointer;
}

/* 13-3 次要動作統一成金描邊，不要再冒出一顆藍框鈕 */
.login-else-box .btn-outline-primary,
.member .btn-outline-primary,
a.btn-outline-primary {
  background: transparent !important;
  border: 1px solid var(--line-hi) !important;
  color: var(--gold) !important;
}
.login-else-box .btn-outline-primary:hover,
a.btn-outline-primary:hover { background: rgba(239, 192, 114, .12) !important; }

/* 「加入會員」掛的是 .btn-danger（樣板拿紅色鈕當次要動作用），
   在深底上那是警示色的位置，改成次要動作的金描邊。 */
.member .btn-danger, .login_form .btn-danger, .login-else-box .btn-danger {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid var(--line-hi) !important;
  color: var(--gold) !important;
}
.member .btn-danger:hover { background: rgba(239, 192, 114, .12) !important; }

/* --------------------------------------------------------------- 14. 手機上的資料表
   17 支頁面有 <table>，只有 6 支包了 .table-responsive。沒包的那些在 390px 上
   不會橫向捲動，而是把五個欄位硬擠進 358px —— 實測「範例資料」四個字直排成四行。
   天條 34 要求寬內容自己包一層水平捲動容器；沒有 markup 可改，就讓 table 自己
   變成捲動容器：display:block + overflow-x，內層 thead/tbody 再變回 table，
   欄寬計算才不會壞（這是 jin5588 那次驗證過的寫法）。 */
@media (max-width: 767.98px) {
  .table-responsive, .table-responsive-md {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  table:not(.no-scroll) {
    display: block !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  table:not(.no-scroll) > thead,
  table:not(.no-scroll) > tbody,
  table:not(.no-scroll) > tfoot {
    display: table !important;
    width: 100%;
    min-width: max-content;
  }
  table:not(.no-scroll) td,
  table:not(.no-scroll) th { min-width: 90px; white-space: normal; }
  /* 金額與日期不該折行 */
  table:not(.no-scroll) td:nth-child(n+3) { white-space: nowrap; }
}

/* --------------------------------------------------------------- 15. 勾選同意列
   第 13 節把 .form-group label 設成 flex（為了讓驗證碼圖排在同一行），
   但註冊頁的「我已詳閱且同意」也是一個 label，裡面包著核取方塊、文字、連結
   跟兩個提示框 —— 全部變成 flex item，文字被擠成一行兩個字。
   核取方塊那種 label 要排回正常的行內流。 */
.form-check-label,
.form-group.form-check label,
label.form-check-label {
  display: block !important;
  gap: 0;
  font-size: 16px;
  font-weight: 400;
  color: var(--body);
  line-height: 1.8;
  text-align: left;
}
.form-group.form-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 30em;
  margin: var(--s3) auto 0;
  text-align: left;
}
.form-check-input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 4px 0 0;
  accent-color: var(--gold-d);
}
.form-check-label a { color: var(--gold); text-decoration: underline; }

/* 必勾的核取方塊在 was-validated 之下永遠是 invalid，一進頁面就先跳紅字。
   交給樣板自己的送出驗證處理，版面上不預先報錯。 */
.was-validated .form-check-input:invalid ~ .invalid-feedback,
.form-check .invalid-feedback { display: none !important; }

/* --------------------------------------------------------------- 16. 場館餘額卡
   每一格是「場館名 + 餘額 + 回收」，v5 排成一個很高的方框，按鈕孤零零在中間。
   收成緊湊卡：名稱 → 金額 → 整寬按鈕，三段各自對齊，高度一致。 */
.game-cash .game-cash-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 128px;
  padding: 14px 12px;
  background: var(--surf-2);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  text-align: center;
}
.game-cash .game-cash-box > div:first-child {
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  line-height: 1.4;
  min-height: 2.8em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.game-cash .game-cash-box .num {
  font-size: 18px;
  font-weight: 900;
  color: var(--ink);
  margin-top: auto;
}
.game-cash .game-cash-box .btn {
  width: 100%;
  /* 回收是真的會動到錢的動作，給滿 44px（天條 34） */
  min-height: var(--tap);
  padding: 0 10px !important;
  font-size: 14px;
  gap: 6px;
}
.game-cash > .m-auto .btn { min-height: var(--btn-md); font-size: 16px; }

/* ==========================================================================
   dcj88 base.css ─ 缺圖收尾（v6）
   ==========================================================================
   線上 404、repo 也沒有原檔的 48 張圖。補不出美術是一回事，
   讓破圖框留在畫面上是另一回事 —— 這一層負責讓缺圖的位置看起來是刻意留白，
   而不是壞掉。清單見 tools/gen_missing_art.py，補圖之後把對應的檔名刪掉即可。
   ========================================================================== */

/* --------------------------------------------------------------- A. 卡片主圖 */
img[src$="live_dg.png.webp"],
img[src$="live_sa.png.webp"],
img[src$="live_ab.png.webp"],
img[src$="live_db.png.webp"],
img[src$="live_WM.png.webp"],
img[src$="fish-1.png.webp"],
img[src$="fish-2.png.webp"],
img[src$="fish-3.png.webp"],
img[src$="fish-4.png.webp"],
img[src$="fish-5.png.webp"],
img[src$="fish-db.png.webp"],
img[src$="fish-rsg1.png.webp"],
img[src$="fish-rsg2.png.webp"],
img[src$="lottery.png.webp"],
img[src$="lottery_bingo.png.webp"],
img[src$="es_avia.png.webp"],
img[src$="es_hc.png.webp"],
img[src$="esport1.jpg"],
img[src$="esport2.jpg"],
img[src$="sportevent.png.webp"],
img[src$="sportssb.png.webp"],
img[src$="sport36588.png.webp"],
img[src$="chess-mg.png.webp"] {
  display: none !important;
}

/* 圖收掉之後卡片會塌，底磚由容器自己撐 */
.live-img, .fish-game .h-image, .game-card--noart {
  min-height: 148px;
  border-radius: var(--r-m);
  background-color: var(--surf-2);
  background-image: linear-gradient(150deg, rgba(239,192,114,.14), rgba(255,255,255,.02) 46%, rgba(0,0,0,.18));
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: var(--s2);
}
/* 樣板把館別名寫成 <h2 class="d-none">，圖沒了就讓它出來當卡片標題 */
.live-img .live-btn h2.d-none { display: block !important; }
.live-img .live-btn h2 {
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 900;
  color: var(--ink);
  text-align: center;
}
.live-img .live-btn { position: static; width: 100%; text-align: center; }

/* --------------------------------------------------------------- B. 內文示意圖與橫幅 */
img[src$="seo/lottery-1.jpg"],
img[src$="seo/pk10.jpg"],
img[src$="seo/bingo.jpg"],
img[src$="seo/baccarat.jpg"],
img[src$="bannerpg.jpg"],
img[src$="bannerEP.jpg"],
img[src$="404.png.webp"] {
  display: none !important;
}

/* --------------------------------------------------------------- C. 小圖示與分隔條 */
img[src$="_images/all/info02.png.webp"],
img[src$="_images/all/ft-share-line.png.webp"],
img[src$="_images/all/info05.png.webp"],
img[src$="_images/all/info07.png.webp"],
img[src$="_images/all/member-bar.png.webp"],
img[src$="_images/all/news-bar.png.webp"],
img[src$="_images/member/atm.png.webp"],
img[src$="_images/member/credit.png.webp"] {
  display: none !important;
}

/* 裝飾性標題圖：站上每一處旁邊本來就有同文字的 <h1>／<h2>，不需要圖 */
img[src*="-title."], img[src*="_title."], img[src*="-title_"] { display: none !important; }

/* 缺圖的橫幅收掉之後，外面那層 .topbanner 還留著自己的高度與邊界
   —— Slot/sa 量到標題與分類鈕之間有一段純空白。圖是刻意藏的，殼也一起收。
   用 :has() 指名道姓，才不會把有圖的 .topbanner 一起收掉。 */
.topbanner:has(> img[src$="top_slot.jpg"]),
.topbanner:has(> img[src$="bannerSA.jpg"]),
.topbanner:has(> img[src$="bannerQT.jpg"]),
.topbanner:has(> img[src$="bannerpg.jpg"]),
.topbanner:has(> img[src$="bannerEP.jpg"]) { display: none; }

/* ==========================================================================
   dcj88 base.css ─ v7 逐項修正
   Owner 2026-08-28 逐頁點出來的問題，一項一項對應。
   ========================================================================== */

/* --------------------------------------------------------------- 1. 頁首
   「關於我們」拿掉（那一頁也一併從站上收起來）。 */
#header #navbar ul > li:has(> a[href*="About.aspx"]),
#header .overlay a[href*="About.aspx"],
#footer a[href*="About.aspx"],
#header #navbar ul > li:has(> a[href*="Products.aspx"]),
#header #navbar ul > li:has(> a[href*="Services.aspx"]) { display: none !important; }

/* --------------------------------------------------------------- 2. 跑馬燈要會動
   原本 marquee.css 的 `translateX(-50%)` 假設內容有複製兩份，但樣板只輸出一份，
   跑到一半就會跳一次。改成「從右邊進、往左邊出」，內容幾份都不會跳。
   時間拉長到 46s，公告要看得完。 */
.marquee-content {
  animation: dcj-marquee 46s linear infinite;
  will-change: transform;
}
.marquee-wrapper:hover .marquee-content { animation-play-state: paused; }
@keyframes dcj-marquee {
  from { transform: translateX(100%); }
  to   { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-content { animation: none; transform: none; }
}

/* --------------------------------------------------------------- 3. 遊戲大廳 */

/* 3-1 輪播圖到分類軌之間的留白收掉一半 */
.testimonials { padding-bottom: 0; }
main#main > section:has(.GameNav) { padding-top: var(--s3); }
.GameNav { padding-top: 0 !important; }
.GameNav > .container::before {
  /* 3-2 標題本身要有設計：金字 + 左側金色短標，對比 9.6:1 */
  content: "遊戲大廳";
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding-left: 14px;
  position: relative;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: .18em;
  color: var(--gold);
}
.GameNav > .container::after {
  content: "";
  position: absolute;
  left: var(--pad-x);
  top: 4px;
  width: 4px;
  height: 18px;
  border-radius: 2px;
  background-image: var(--grad-gold);
}
@media (max-width: 767.98px) {
  .GameNav > .container::before { font-size: 15px; margin-bottom: 12px; }
  .GameNav > .container::after { top: 3px; height: 16px; }
}

/* 3-3 捕魚分頁的卡片大小統一
   樣板本來是「一大、一寬、其餘小」的馬賽克，第一張（英雄捕魚）是別人的兩倍，
   手機上還會出現一寬一小擠在同一列。全部拉成同一種尺寸的方格。 */
.hotG-list { gap: 14px; }
.h-link,
.h-link-50,
.h-link-twice {
  flex: 0 0 calc((100% - 14px * 5) / 6) !important;
  min-width: 0;
  display: block !important;
}
.h-link-twice > * { flex: none; width: 100%; }
.h-link-twice > *:not(:first-child) { display: none; }
@media (max-width: 991.98px) {
  .h-link, .h-link-50, .h-link-twice {
    flex: 0 0 calc((100% - 14px * 3) / 4) !important;
  }
}
@media (max-width: 575.98px) {
  .hotG-list { gap: 10px; }
  .h-link, .h-link-50, .h-link-twice {
    flex: 0 0 calc((100% - 10px * 2) / 3) !important;
  }
}

/* --------------------------------------------------------------- 4. 內文清單的圓點
   `.content li{list-style:disc}` 是給文章段落用的，但會員頁整頁都包在 .content 裡，
   結果選單、快捷格、分頁碼每一項前面都多一個圓點。UI 用的清單一律關掉。 */
.content .memberMenu li,
.content .icon-link li,
.content .menu-link li,
.content .nav li,
.content .nav-tabs li,
.content .nav-pills2 li,
.content .membernav li,
.content .pagination li,
.content .tab-content li,
.content .marquee-content li,
.content .ft-nav li,
.content .faq-list li,
.content .login-else li,
.content ul[id] li { list-style: none !important; margin: 0; }

/* --------------------------------------------------------------- 5. 會員頁：拆掉框中框
   `.member-page` 常帶 `.deppost`，而 `.deppost` 被當成卡片畫了一層底＋框，
   裡面的 `.box` 又是一層卡片 —— 就是「框外有框、好幾層框」。
   外層只負責排版，卡片只留內層那一層。 */
.member-page.deppost,
.member-page > .deppost,
.member-content > .deppost {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin-bottom: 0;
}

/* 5-1 左右留白：手機與電腦都要，不能貼著螢幕邊 */
.member .container,
.member-page .container,
.member-content { padding-left: var(--pad-x); padding-right: var(--pad-x); }
@media (max-width: 767.98px) {
  :root { --pad-x: 16px; }
}

/* 5-2 電腦版做成兩欄：左邊選單、右邊內容，不要整頁上下疊 */
@media (min-width: 992px) {
  .member > .container:has(> .member-menu_web):has(> .member-page) {
    display: grid;
    grid-template-columns: 288px minmax(0, 1fr);
    gap: var(--s4);
    align-items: start;
  }
  .member-menu_web { margin-bottom: 0; position: sticky; top: calc(var(--h-head) + var(--h-mq) + 16px); }
}

/* 5-3 會員子頁不再重複整張會員選單
   有的頁有、有的頁沒有，看起來就是東拼西湊。手機上一律不出現 ——
   返回按鈕加底部導覽已經夠用，選單只留在會員中心首頁。 */
@media (max-width: 991.98px) {
  body:has(.member-page) .memberMenu,
  .member-content > .memberMenu { display: none !important; }
}

/* --------------------------------------------------------------- 6. 頁首列與返回按鈕
   `.member-top` 是每一頁都有的「會員中心｜XXX + 返回」。
   v6 的返回是一段金色小字加一張純黑的箭頭圖（深底上等於看不見）。
   改成明確的按鈕：金色描邊藥丸、44px、圖示轉白，而且桌機也顯示。 */
.member-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  margin: 0 0 var(--s3);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.member-top > .col-8 {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  font-size: 19px;
  font-weight: 900;
  color: var(--ink);
}
.member-top .m-taggle-bar {
  flex: none;
  width: auto;
  text-align: right;
  display: block !important;   /* 樣板掛 d-md-none，桌機也要看得到返回 */
}
.member-top .m-taggle-bar > a {
  display: inline-flex;
  flex-direction: row-reverse;   /* 圖示在左、文字在右 */
  align-items: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 0 16px;
  border: 1px solid var(--line-hi);
  border-radius: var(--r-pill);
  color: var(--gold);
  font-size: 15px;
  font-weight: 700;
  transition: background-color var(--press) ease;
}
.member-top .m-taggle-bar > a:hover { background: rgba(239, 192, 114, .12); }
.member-top .m-taggle-bar img {
  width: 18px;
  height: 18px;
  max-width: 18px;
  /* 站上這張箭頭是純黑素材，深底上要轉成金色調才看得見 */
  filter: brightness(0) invert(1) sepia(1) saturate(2.2) hue-rotate(-12deg) opacity(.9);
}

/* --------------------------------------------------------------- 7. 帳戶管理
   7-1 欄位之間沒有分隔線，值跟按鈕也沒有對齊。改成「標籤｜值｜動作」三段式。 */
.user-account .form-group,
.member-page .box form .form-group {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-height: 56px;
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-2);
}
.user-account .form-group:last-child { border-bottom: 0; }
.user-account .form-group > label {
  flex: 0 0 132px;
  margin: 0;
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--muted);
}
.user-account .form-group > label span {
  display: block;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--muted);
  opacity: .7;
}
.user-account .form-group > .content {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding: 0;
  font-size: 16px;
  color: var(--ink);
  font-weight: 700;
}
.user-account .form-group > .content > .btn,
.user-account .form-group > .content > a.btn {
  flex: none;
  /* 儲值／更改密碼是真的動作，給滿 44px（天條 34） */
  min-height: var(--tap);
  padding: 0 18px !important;
  font-size: 15px;
}
@media (max-width: 575.98px) {
  .user-account .form-group { align-items: flex-start; flex-direction: column; gap: 6px; }
  .user-account .form-group > label { flex: none; }
  .user-account .form-group > .content { width: 100%; }
}

/* 7-2 綁定 Google / LINE 做成按鈕 */
.login-else.mb-3,
.member-page .login-else {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: var(--s2) 0 var(--s3);
  padding: 0;
}
.else-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--btn-md);
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  background: var(--surf-2);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  transition: background-color var(--press) ease, border-color var(--press) ease;
}
.else-btn > div { display: flex; align-items: center; gap: 8px; }
.else-btn img { width: 20px; height: 20px; flex: none; object-fit: contain; }
.else-btn.google:hover { background: var(--surf-3); border-color: rgba(255, 255, 255, .2); }
.else-btn.line { border-color: rgba(6, 199, 85, .38); }
.else-btn.line:hover { background: rgba(6, 199, 85, .12); }
@media (max-width: 380px) {
  .login-else.mb-3, .member-page .login-else { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------- 8. 欄位高度收斂
   純顯示用的欄位（帳號、出售 G 點這種）v6 是一個 80px 高的大空框，
   實際只放一行字。收到 52px，留白從內距出，不用撐高度。 */
.member-page .content:not(.container),
.member-page .box .content,
.member-content .content:not(.container) {
  min-height: 0;
  padding: 0;
}
.member-page .form-group .content > span { line-height: 1.5; }
.member-page .box .form-group,
.member-content .box .form-group { min-height: 52px; }

/* --------------------------------------------------------------- 9. 優惠情報
   v6 是一長條窄圖疊著一長條窄圖，電腦版只用了容器一半寬。
   改成卡片格：電腦兩欄、手機一欄，圖片統一 16:9，標題在圖下。 */
.faq .container { max-width: var(--maxw); }
.faq-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
  padding: 0;
  margin: 0;
}
.faq-list > li {
  list-style: none;
  margin: 0;
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  overflow: hidden;
  box-shadow: var(--sh-1);
  transition: border-color .18s, box-shadow .18s;
}
.faq-list > li:hover { border-color: var(--line-hi); box-shadow: var(--sh-2); }
.faq-list > li > a {
  display: block;
  position: relative;
  padding: 0 0 14px;
  color: var(--ink);
}
.faq-list > li > a img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--surf-2);
}
.faq-list > li > a h3 {
  margin: 14px 16px 0;
  padding-right: 34px;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.45;
  color: var(--ink);
}
.faq-list > li > a i { display: none; }
.faq-list > li > a::after {
  content: "看活動內容";
  display: block;
  margin: 10px 16px 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--gold);
}
.faq-list .collapse { padding: 0 16px 16px; border-top: 1px solid var(--line-2); }
@media (max-width: 767.98px) {
  .faq-list { grid-template-columns: 1fr; gap: var(--s2); }
  .faq-list > li > a h3 { font-size: 16px; }
}

/* --------------------------------------------------------------- 10. 頁尾留白
   底部固定導覽會壓住頁尾最後一行（實測儲值結果頁的儲值方式那一列被切掉）。 */
@media (max-width: 991.98px) {
  body { padding-bottom: calc(var(--h-ftnav) + env(safe-area-inset-bottom, 0px) + 8px); }
}
/* 內容跑完之後不要再拖一段空白 */
.member-page:last-child,
.member-content:last-child { margin-bottom: 0; }
main#main > section:last-of-type { padding-bottom: 0; }

/* --------------------------------------------------------------- 11. .block 那一組不是卡片
   點數出售、退款這幾頁用 `.block > .block-left + .block-right` 排「標籤：值」。
   v6 把 .block、.block-left、.block-right、.block-info 全部當成卡片畫了底和框，
   於是一組兩個字的欄位變成三層框、90px 高。改成一列一行。 */
.withdrawal .block,
.member-page .block,
.member-content .block,
form .block {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-height: 56px;
  margin: 0;
  padding: 8px 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-2);
  border-radius: 0;
  box-shadow: none;
}
.withdrawal .block:last-of-type,
form .block:last-of-type { border-bottom: 0; }
.block-left, .block-right, .block-info {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0;
}
.block-left {
  flex: 0 0 118px;
  font-size: 15px;
  font-weight: 700;
  color: var(--muted);
}
.block-right {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}
.block-right input, .block-right select {
  width: 100%;
  min-height: var(--btn-md);
  padding: 0 14px;
  background: var(--surf-3);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  color: var(--ink);
  font-size: 16px;
}
/* 這幾頁的表單外面再包一層卡片，內容才不會貼著螢幕邊 */
.withdrawal > form,
.withdrawal > .fitch {
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: var(--s2) var(--s3);
  box-shadow: var(--sh-1);
}
.withdrawal > .fitch { margin-top: var(--s3); text-align: center; }

/* --------------------------------------------------------------- 12. 優惠卡的圖比例
   站上的活動圖是 3:1 的橫幅（實測 240×75~81），用 16:9 會把上下切掉。 */
.faq-list > li > a img { aspect-ratio: 3 / 1; }

/* --------------------------------------------------------------- 13. 會員頁的空殼輪播
   會員各頁樣板都嵌了一組活動輪播，但那是靠 JS 換圖的；沒有 JS 時只剩一個空框。
   會員區是操作介面，不需要行銷輪播（天條 53），收掉。 */
.member-page .testimonials,
.member-content .testimonials,
body:has(.member-page) > .banner,
body:has(.member-content) > .banner,
.banner:has(.testimonials):not(:has(.swiper-slide img[src*="upload/banner/banner_"])) {
  display: none !important;
}

/* --------------------------------------------------------------- 14. body 帶 .member 的那四頁被頁首壓住
   站內信、優惠中心、帳戶設定、點數出售的 <body> 掛著 class="member"，
   於是 `.member{padding-top:32px}` 蓋過了 `body{padding-top:90px}`（0,1,0 > 0,0,1），
   固定頁首直接壓在內容上 —— 看起來像「這一頁沒有頁首，最上面多一塊空卡片」。
   實際上頁首就在那塊「空卡片」的位置，只是疊在上面。 */
body.member,
body.member-page,
body.blog,
body.content,
body.wapper,
body.content-bg,
body.site-section {
  padding-top: calc(var(--h-head) + var(--h-mq)) !important;
}

/* --------------------------------------------------------------- 15. 浮動的 LINE 客服小工具
   `.service-box > .side` 那組圖示（`_images/all/info02` 等）線上全部 404，
   收掉圖之後只剩兩個清單圓點掛在一個空卡片裡。底部導覽已經有客服了。 */
.service-box:has(.side),
.service-box > .side,
.side > ul > li.line-btn { display: none !important; }
.service-box { background: transparent; border: 0; box-shadow: none; padding: 0; margin: 0; }

/* --------------------------------------------------------------- 16. 舊版型那幾頁的內距
   .page-wrapper 這一套（站內信、公告內頁、優惠中心、帳戶設定、點數出售、服務條款）
   內容直接貼著螢幕邊。補上和其他頁一樣的左右留白與上下節奏。 */
.page-wrapper > .main > .content,
.page-wrapper .wapper,
.page-wrapper .member-content {
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
  padding-top: var(--s3);
}
.page-wrapper .member-content > *:not(.memberMenu) { max-width: var(--maxw); margin-inline: auto; }

/* --------------------------------------------------------------- 17. 導覽型清單一律沒有圓點
   `.content li{list-style:disc}` 是給服務條款那種內文段落用的，但同一個 .content
   底下也裝著各種選單。用「這個 li 裡面只有一個連結」來分辨：
   只包一個 <a> 的就是導覽，內文清單裡面是文字，不會被誤傷。 */
.content li:has(> a:only-child),
.content li:has(> a:only-of-type:first-child:last-child) {
  list-style: none !important;
  margin: 0;
}

/* --------------------------------------------------------------- 18. 舊版型的四層內距
   .content(16) > .wapper(16) > .member-content(16) > .tab-content(16)
   —— 390px 的螢幕被吃掉 96px，而且每一層都有自己的框。留最外面那一層就好。 */
.page-wrapper .wapper,
.page-wrapper .content-bg,
.page-wrapper .member-content,
.page-wrapper .tab-content {
  padding-left: 0;
  padding-right: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.page-wrapper .wapper { margin-inline: 0; }

/* 這幾頁沒有跑馬燈，就不要替它保留 34px 的高度 */
body:not(:has(.mq-section)) { padding-top: var(--h-head) !important; }

/* 空的清單項（只包著一張已經收掉的 404 圖）不要留下一個圓點 */
li:empty,
li:has(> a:empty),
li:has(> a > img[src=""]) { display: none !important; }

/* --------------------------------------------------------------- 19. 跑馬燈其實沒在動（2026-08-28 上線後回報）
   `translateX(100%)` 的 100% 是**元素自己的寬度**，不是容器的。
   公告串起來有 2,740px 寬，所以它從螢幕右邊 2,740px 外開始跑 ——
   量到的位置是 left=2502 → 1412，整段都在 1280 的視窗外面，
   使用者看到的是一條空的公告帶，要等三十幾秒才有字進來。
   改用容器寬度單位 cqw：從容器右緣外一點點進場，跑到自己整個出左邊為止。
   不支援 cqw 的瀏覽器會忽略那一個關鍵影格，退成「從左緣往左跑」，還是會動。 */
.marquee-wrapper { container-type: inline-size; }
.marquee-content {
  animation: dcj-marquee 45s linear infinite;
  will-change: transform;
}
@keyframes dcj-marquee {
  from { transform: translateX(100cqw); }
  to   { transform: translateX(-100%); }
}

/* --------------------------------------------------------------- 20. 活動內文的 <style> 汙染到 <body>
   優惠情報的活動內容是一整份 HTML（帶 <meta>、<title>、tailwind CDN、<body class="djc-promo-wrapper">）。
   瀏覽器解析到巢狀的 <body> 時，會把它的 class **併到真正的 body 上**，
   於是活動自己的 `.djc-promo-wrapper{padding:1.5rem 1rem}` 蓋掉了 body 的上內距 ——
   固定頁首直接壓在內容上，左右又多出 16px，頁尾因此也不是滿版（天條 39）。
   body 的內距改用 `body[class]`（0,1,1）壓過任何單一 class（0,1,0）。 */
body[class] {
  padding-top: calc(var(--h-head) + var(--h-mq));
  padding-left: 0;
  padding-right: 0;
}
body.djc-promo-wrapper {
  min-height: 0;
  font-family: var(--sans);
}
@media (max-width: 991.98px) {
  body[class] { padding-bottom: calc(var(--h-ftnav) + env(safe-area-inset-bottom, 0px) + 8px); }
}

/* --------------------------------------------------------------- 21. 頁尾滿版並留一圈空白 */
#footer {
  width: 100%;
  max-width: none;
  margin-top: var(--s5);
  padding-left: 0;
  padding-right: 0;
}
#footer > .container,
#footer .footer-top > .container,
#footer .footer-bottom {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

/* ==========================================================================
   dcj88 base.css ─ 優惠活動內文用到的 djc-* 工具類
   ==========================================================================
   優惠情報的活動內容是後台存進資料庫的一整份 HTML，裡面掛著
   `<script src="https://cdn.tailwindcss.com">`。那不是 CSS 檔，是一支
   在瀏覽器裡跑的編譯器：它掃過 DOM 之後即時產生 CSS 再注入頁面
   （Tailwind 官方明講 Play CDN 只給開發用，不要放上線）。

   代價是每次瀏覽優惠情報都要對外請求一支約 90KB 的 JS，還要在使用者的
   裝置上跑一輪編譯；CDN 連不到的時候活動內容就整個掉樣式。

   實測活動內文只用到 24 個 Tailwind 工具類（字級再補 7 個常用的當保險）（其餘 9 個 djc-* 是活動自己的
   <style> 定義的，不靠 CDN）。把這 24 個寫死在這裡，值全部照 Tailwind 預設，
   拿掉那支 script 之後畫面不會有任何變化。

   ⚠ 這是一份**固定清單**。之後後台如果寫了新的活動、用到清單以外的 class，
     那些 class 就不會有樣式。新增活動時要嘛沿用既有寫法，要嘛回來補這一段。

   註：活動的 tailwind.config 關掉了 preflight，所以 border 類要自己補
       `border-style`，不然只給寬度是不會顯示的。
   ========================================================================== */

/* 版面 */
.djc-grid { display: grid; }
.djc-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.djc-gap-2 { gap: .5rem; }
.djc-gap-3 { gap: .75rem; }
.djc-space-y-3 > * + * { margin-top: .75rem; }

/* 間距 */
.djc-p-2 { padding: .5rem; }
.djc-p-3 { padding: .75rem; }
.djc-mt-1 { margin-top: .25rem; }
.djc-mt-2 { margin-top: .5rem; }
.djc-mb-2 { margin-bottom: .5rem; }
.djc-mb-3 { margin-bottom: .75rem; }
.djc-mb-4 { margin-bottom: 1rem; }

/* 外觀 */
.djc-rounded-lg { border-radius: .5rem; }
.djc-bg-slate-900\/50 { background-color: rgba(15, 23, 42, .5); }
.djc-border-r { border-right-width: 1px; border-right-style: solid; }
.djc-border-slate-700 { border-color: #334155; }

/* 字級：活動自己的 <style> 也定義了幾個同名的，但它排在文件後面會贏過這裡，
   有定義的地方仍以活動自己的為準；這裡補的是它沒定義到的場合。
   值與行高全部照 Tailwind 預設。 */
.djc-text-xs   { font-size: .75rem;  line-height: 1rem; }
.djc-text-sm   { font-size: .875rem; line-height: 1.25rem; }
.djc-text-base { font-size: 1rem;    line-height: 1.5rem; }
.djc-text-lg   { font-size: 1.125rem;line-height: 1.75rem; }
.djc-text-xl   { font-size: 1.25rem; line-height: 1.75rem; }
.djc-text-2xl  { font-size: 1.5rem;  line-height: 2rem; }
.djc-text-3xl  { font-size: 1.875rem;line-height: 2.25rem; }

/* 文字 */
.djc-text-center { text-align: center; }
.djc-font-bold { font-weight: 700; }
.djc-font-black { font-weight: 900; }
.djc-text-white { color: #fff; }
.djc-text-slate-300 { color: #cbd5e1; }
.djc-text-slate-400 { color: #94a3b8; }
.djc-text-amber-400 { color: #fbbf24; }
.djc-text-blue-400 { color: #60a5fa; }

/* ==========================================================================
   dcj88 base.css ─ 彈窗
   ==========================================================================
   彈窗平常是 `display:none`，逐頁截圖與自動巡檢**兩種驗收都掃不到** ——
   所以「電腦版彈窗變全寬」一路沒被發現。

   實測（1280）：登入／註冊彈窗 1,280px 寬、快速轉帳彈窗 1,280px 寬，
   兩支都貼著整個視窗。原因是站上的彈窗有兩種寫法：
     A. `.modal > .modal-dialog > .modal-content`（Bootstrap，站內公告用）
        —— 框架有 `max-width:500/800px`，這種是正常的。
     B. `.modal.authModal > .modal-box`（樣板自己的，登入／註冊／快速轉帳／
        忘記密碼都是這種）—— **完全沒有寬度限制**，所以會攤成全寬。
   這一層專門補 B，順便把兩種的內距、對齊、對比一起收齊。
   ========================================================================== */

/* --------------------------------------------------------------- 1. 遮罩
   B 型彈窗是自己用 JS 設 display:block 打開的，不會產生 .modal-backdrop，
   所以遮罩要由 .modal 自己畫；A 型有 backdrop，不能重複畫，會變兩層黑。 */
.modal:has(> .modal-box) {
  background: rgba(4, 9, 20, .76);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.modal {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* --------------------------------------------------------------- 2. B 型彈窗的卡片 */
.modal > .modal-box {
  position: relative;
  width: calc(100% - 32px);
  max-width: 460px;
  margin: 7vh auto 40px;
  /* 上緣留 56px 給右上角的關閉鈕站自己一列，
     下面的分頁列才能吃滿整個寬度（原本靠 padding-right:52px 閃它，
     結果分頁全部擠在左邊、右邊一塊死區）。 */
  padding: 56px var(--s3) var(--s3);
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  box-shadow: 0 40px 90px -40px #000, 0 0 0 1px rgba(255, 255, 255, .04) inset;
}
/* 快速轉帳的內容比較窄，不必撐到 460 */
#authModalTransfer > .modal-box { max-width: 420px; }

/* 關閉鈕：原本是排在流裡的一個字元，改成右上角的按鈕（44px 觸控目標，天條 34）。
   2026-09-08：本來是「淡藍色塊 + 外框」，在白卡片上比分頁本身還搶眼 ——
   一個次要動作不該比主要導覽重。改成無框圖示鈕，只在 hover 時才有底色。
   位置也讓出自己的一列（見下面 .modal-box 的 padding-top），
   分頁列才不用為了閃它把整排推到左邊。 */
.modal > .modal-box > .close_m {
  position: absolute;
  top: 8px;
  right: 8px;
  width: var(--tap);
  height: var(--tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-s);
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 24px;
  line-height: 1;
  transition: background-color var(--press) ease, color var(--press) ease;
}
.modal > .modal-box > .close_m:hover {
  background: var(--surf-3);
  color: var(--ink);
}

/* 內容區的標題與間距 */
.modal-box > .content { padding: 0; }
.modal-box > .content > h5,
.modal-box h5:first-child {
  margin: 0 0 var(--s3);
  padding-right: 52px;   /* 讓開右上角的關閉鈕 */
  font-size: 19px;
  font-weight: 900;
  color: var(--ink);
}
.modal-box .transfer-group-box { margin: 0; }
.modal-box .transferToIcon {
  text-align: center;
  font-size: 20px;
  color: var(--gold);
  margin: 6px 0;
}

/* --------------------------------------------------------------- 3. 登入／註冊分頁 */
/* 2026-09-08 Owner：「Icon 的對比度有問題、排版也醜」。三件事一起處理。 */

/* 排版一：整列平分。原本 .tab-btn 是 inline-flex + 固定 padding，
   加上 header 的 padding-right:52px（為了閃關閉鈕），
   結果兩顆分頁擠在左邊、右邊留一塊 52px 的空白。
   關閉鈕移到自己一列之後，這裡就能吃滿整個寬度。 */
.modal-box .tab-header {
  display: flex;
  gap: 2px;
  margin: 0 0 var(--s4);
  padding-right: 0;
  border-bottom: 1px solid var(--line);
}
.modal-box .tab-btn {
  flex: 1 1 0;
  min-width: 0;
  min-height: 52px;
  gap: 8px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-bottom: 3px solid transparent;
  /* 自己的底線壓在 header 的分隔線上，選中時才不會變成上下兩條 */
  margin-bottom: -1px;
  white-space: nowrap;
}

/* 排版二：圖示原本寫死 20×20，但素材是 127×200 / 183×200 的**直式**，
   被壓成正方形整個變形。改成給高度、寬度自動。 */
.modal-box .tab-btn .btn-icon {
  width: auto;
  height: 19px;
  flex: none;
}

/* 對比：ft-nav 那批圖示是**白色去背**（實測平均亮度 235~255、彩度 0），
   為深底畫的。彈窗翻白之後白圖示貼在白卡片上等於看不見 ——
   原本還再乘一個 opacity:.55，未選中那顆幾乎是空的。
   彩度 0 表示是純單色圖，brightness(0) 出來是乾淨剪影，
   跟站上其他白素材同一套處理（46-ink-polarity.css）。
   深淺用 filter 裡的 opacity 控，不用元素的 opacity，
   免得跟未來的動效疊在一起。 */
.modal-box .tab-btn .btn-icon {
  filter: brightness(0) saturate(0) opacity(.55);
}
.modal-box .tab-btn.active .btn-icon {
  filter: brightness(0) saturate(0) opacity(.9);
}

.modal-box .tab-btn.active { border-bottom-color: var(--gold); color: var(--ink); }

/* 表單的欄位間距：樣板把 input 一顆接一顆貼著寫，中間沒有任何 margin，
   四顆藥丸疊成一整條，看起來像一塊被切開的色塊而不是四個欄位。
   只針對 form 的**直屬** input —— 驗證碼那一列的 input 包在 flex 容器裡，
   而且樣板用 inline `margin:0 !important` 把它釘死，別去動它。 */
.modal-box form > input:not([type=hidden]),
.modal-box form > .form-control { margin-bottom: 10px; }
/* 驗證碼圖比隔壁的輸入框矮 1px，接縫會露出來 */
.modal-box .codeimg { height: var(--btn-md) !important; }

/* --------------------------------------------------------------- 4. 彈窗裡的表單
   跟頁面上的表單同一套，不要另外長一個樣（天條 55）。 */
.modal-box .form-control,
.modal-box input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
.modal-box select {
  width: 100%;
  min-height: var(--btn-md);
  padding: 0 14px;
  background: var(--surf-3);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  color: var(--ink);
  font-size: 16px;
}
.modal-box .form-control:focus,
.modal-box input:focus,
.modal-box select:focus {
  outline: none;
  border-color: var(--line-hi);
  box-shadow: 0 0 0 3px rgba(239, 192, 114, .16);
}
.modal-box label {
  display: block;
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--body);
}
.modal-box .login_form { gap: var(--s2); margin: 0 !important; }

/* 驗證碼那一列：輸入框與圖片同一行、底對齊 */
.modal-box .codeimg { align-items: center; }
.modal-box .codeimg img { height: var(--btn-md); }

/* 主要動作 */
.modal-box .btn-confirm,
.modal-box button[type=submit],
.modal-box .login_form > .btn {
  min-height: var(--btn-lg);
  font-size: 17px;
  font-weight: 900;
}

/* --------------------------------------------------------------- 5. A 型（站內公告）
   內容很長時整個彈窗會被撐到 1,656px 高，捲動要在彈窗內部，不是整頁。 */
.modal-dialog { margin: 6vh auto; }
.modal-dialog .modal-content { max-height: 88vh; }
.modal-dialog .modal-body {
  max-height: calc(88vh - 76px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.modal-header .close {
  width: var(--tap);
  height: var(--tap);
  flex: none;
}

/* --------------------------------------------------------------- 6. 手機 */
@media (max-width: 575.98px) {
  .modal > .modal-box {
    width: calc(100% - 24px);
    margin: 4vh auto 24px;
    padding: var(--s4) var(--s2) var(--s2);
  }
  .modal-dialog { margin: 4vh 12px; }
  .modal-dialog .modal-content { max-height: 90vh; }
  .modal-dialog .modal-body { max-height: calc(90vh - 72px); }
  .modal-box > .content > h5,
  .modal-box h5:first-child { font-size: 18px; }
}

/* --------------------------------------------------------------- 7. 彈窗裡的小目標
   彈窗一直沒被巡檢掃到，所以這幾個從來沒被抓出來（實測 1280）：
     「忘記密碼？點此查詢～」 410×27
     Google／LINE 登入        22×22（就只有圖示那麼大）
     快速轉帳的「全部轉入」    370×29、「進入遊戲」76×29 */

/* 7-1 忘記密碼：置中的次要連結，補到 44px */
.modal-box .login_form > a:not(.btn):not(.log-img) {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  /* 上面是滿版的登入鈕、下面是分隔線，兩邊各自又帶 margin，
     疊起來這條連結上下各空一大塊。收成一個間距單位。 */
  margin: -4px 0 0;
  color: var(--gold);
  font-size: 15px;
  font-weight: 700;
}
.modal-box .login_form > a:not(.btn):not(.log-img):hover { color: var(--gold-l); }

/* 7-2 其他方式登入：兩顆等寬按鈕，不是兩張裸圖 */
/* 原本是固定兩欄的 grid（Google + LINE）。Google 那顆已經拿掉了
   （70-social-login.css），固定兩欄就讓剩下的 LINE 卡在左半邊，
   下面一堆欄位都是滿版、只有它半條，看起來像沒做完。
   改成 flex：藏起來的那顆不佔位，剩幾顆就平分幾欄。 */
.modal-box .login-else-box {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
  margin-top: var(--s2);
  padding-top: var(--s3);
  border-top: 1px solid var(--line-2);
}
.modal-box .login-else-box > span {
  flex: 1 0 100%;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
}
.modal-box .login-else-box > a {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--btn-md);
  padding: 0 12px;
  background: var(--surf-2);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  transition: background-color var(--press) ease, border-color var(--press) ease;
}
.modal-box .login-else-box > a:hover { background: var(--surf-3); border-color: rgba(255, 255, 255, .2); }
.modal-box .login-else-box > a img {
  width: 20px !important;
  height: 20px;
  flex: none;
  object-fit: contain;
}
/* 圖示本身沒有字，補上標籤才知道按下去是什麼 */
.modal-box .login-else-box > a[href*="Google"]::after { content: "Google 登入"; }
.modal-box .login-else-box > a[href*="Line"]::after,
.modal-box .login-else-box > a[href*="line"]::after { content: "LINE 登入"; }

/* 7-3 快速轉帳的三顆按鈕 */
.modal-box .transfer-group.Amount {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: var(--s2);
}
.modal-box .transfer-group.Amount input { flex: 1 1 auto; min-width: 0; }
.modal-box .transfer-all {
  flex: none;
  min-height: var(--btn-md);
  padding: 0 16px;
  border-radius: var(--r-s);
  font-size: 15px;
  font-weight: 700;
}
.modal-box .transfer-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: var(--s3);
}
.modal-box .transfer-actions > button {
  min-height: var(--btn-lg);
  border-radius: var(--r-s);
  font-size: 16px;
  font-weight: 900;
}
/* 「進入遊戲」是次要動作，做成金色描邊，不要跟主要動作長一樣（天條 55） */
.modal-box .transfer-actions > button:not(.btn-confirm) {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid var(--line-hi) !important;
  color: var(--gold) !important;
  box-shadow: none;
}
.modal-box .transfer-actions > button:not(.btn-confirm):hover {
  background: rgba(239, 192, 114, .12) !important;
}

/* --------------------------------------------------------------- 8. 彈窗的文字色要定死
   彈窗裡有些內容（例如 CodeIgniter 執行期印出來的錯誤框）沒有自己的顏色，
   一路往上繼承時會拿到黑色，深底上就是 1.19:1 完全看不見。
   彈窗自己把基準色定下來，裡面沒指定顏色的東西才有可讀的預設。 */
.modal,
.modal-dialog,
.modal-content,
.modal-body,
.modal > .modal-box { color: var(--body); }
.modal-body h1, .modal-body h2, .modal-body h3,
.modal-body h4, .modal-body h5, .modal-body h6 { color: var(--ink); }

/* --------------------------------------------------------------- 9. 兩顆社群鈕長得不一樣
   Google 那顆的 <a> 掛著 class="log-img"，而 `.log-img{width:22px;height:22px}`
   本來是給圖示用的尺寸 —— 掛在連結上就把整顆按鈕壓成 22px，
   文字擠出兩行、也吃不到按鈕的外框。LINE 那顆沒有這個 class 所以是好的。
   彈窗裡把這個尺寸解掉，兩顆才會一樣。 */
.modal-box .login-else-box > a.log-img {
  width: auto;
  height: auto;
  min-width: 0;
}
.modal-box .login-else-box > a.log-img img { display: block; }

/* --------------------------------------------------------------- 10. 彈窗的主要按鈕
   登入表單的送出鈕掛的是 class="login"，不是 .btn，所以完全沒吃到按鈕樣式，
   在彈窗裡只是一行浮著的文字。主要動作一律金底深字（天條 55）。 */
/* 註冊那顆是 <button type="button" class="register">，上面兩條都對不到，
   只吃到觸控目標的 44px，變成擠在左邊的一小片金色。同一個彈窗裡兩顆主要動作
   長不一樣（天條 55）—— 2026-09-08 實拍量到 44px，補進來。 */
.modal-box button.login,
.modal-box button.register,
.modal-box button[type=submit],
.modal-box .btn-confirm {
  display: block;
  width: 100%;
  min-height: var(--btn-lg);
  padding: 0 20px;
  border: 0;
  border-radius: var(--r-s);
  background-color: #E0A733;
  background-image: var(--grad-gold);
  color: var(--on-gold);
  font-size: 17px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: var(--sh-gold);
  transition: filter var(--press) ease;
}
.modal-box button.login:hover,
.modal-box button.register:hover,
.modal-box button[type=submit]:hover,
.modal-box .btn-confirm:hover { filter: brightness(1.06); }
/* 快速轉帳那兩顆是並排的，不要被上面的 width:100% 拆成上下 */
.modal-box .transfer-actions > button { width: 100%; }

/* ==========================================================================
   dcj88 base.css ─ 手機與平板逐項修正
   ==========================================================================
   2026-08-28 依 Owner 指示，把手機（390）與平板（768～991）整個流程重走一遍。
   量出來的問題與對應的修法都寫在各節開頭。
   ========================================================================== */

/* --------------------------------------------------------------- 1. 登入後從大廳進不去會員中心
   實測：手機的底部導覽登入後是 客服／優惠／首頁／儲值／提領 —— 沒有會員；
   頁首右邊的「會員」鈕又被 v6 的規則收掉了（當時是為了讓餘額擠得下）。
   結果就是**登入之後沒有任何一條路可以到會員中心**。把它放回來。 */
@media (max-width: 991.98px) {
  #header:has(.u-login) .navbar-bg > .container > .d-lg-none > a:last-child {
    display: inline-flex !important;
  }
}

/* --------------------------------------------------------------- 2. 頁首的帳號與餘額
   實測 390：帳號與餘額被塞進一個 104px 的方塊，帳號 12px、餘額 16px 疊著，
   旁邊還有兩個裝飾用的小圖示，看起來就是一團。
   改成：讓它吃掉剩下的寬度、右對齊、帳號單行截斷、餘額是重點。 */
@media (max-width: 991.98px) {
  #header .navbar-bg > .container { gap: 10px; }
  #header .logo { flex: none; }
  #header .logo img { max-height: 30px; width: auto; }

  #header #navbar:has(.u-login) { flex: 1 1 auto; min-width: 0; }
  #header .u-login {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
  }
  #header .u-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    width: auto;
    min-width: 0;
    line-height: 1.2;
  }
  /* 帳號：單行，太長就截斷，不要換行把頁首撐高 */
  #header .u-info .uuid {
    display: flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    min-width: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
  }
  #header .u-info .uuid > div {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* 帳號前面那個金幣圖示跟餘額前的重複，收掉一個就好 */
  #header .u-info .uuid > img { display: none; }
  /* 餘額才是重點 */
  #header .u-info .uucash {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 17px;
    font-weight: 800;
    color: var(--gold);
    font-variant-numeric: tabular-nums;
  }
  #header .u-info .uucash > img { width: 16px; height: 16px; flex: none; }
  /* 儲值／轉點那兩顆在手機上由底部導覽負責，頁首不重複 */
  #header .u-login .link { display: none !important; }

  /* 頁首右邊兩顆：會員（金）與登出（描邊），收成同一個尺寸 */
  #header .navbar-bg > .container > .d-lg-none {
    flex: none;
    gap: 6px;
  }
  #header .navbar-bg > .container > .d-lg-none > a {
    min-height: var(--tap);
    min-width: var(--tap);
    padding: 0 10px;
    gap: 5px;
    font-size: 13px;
    font-weight: 700;
    border-radius: var(--r-s);
  }
  #header .navbar-bg > .container > .d-lg-none > a .btn-icon {
    width: 18px;
    height: 18px;
  }
}
/* 極窄螢幕：兩顆鈕收成純圖示，把寬度讓給帳號與餘額 */
@media (max-width: 400px) {
  #header .navbar-bg > .container > .d-lg-none > a {
    padding: 0;
    width: var(--tap);
    justify-content: center;
    font-size: 0;
  }
  #header .navbar-bg > .container > .d-lg-none > a .btn-icon {
    width: 20px;
    height: 20px;
    margin: 0;
  }
}

/* --------------------------------------------------------------- 3. 會員表單的欄位
   兩個問題：
   a) 手機上 `.form-group` 是 `flex-direction:column` 但 `align-items:center`
      （高特異性的那條規則沒被手機版蓋掉），所以**標籤置中、值靠左**，一列裡兩種對齊。
   b) 帳戶資訊那張卡用的是 `.bankForm` 不是 `.user-account`，
      整組規則沒吃到，同一頁兩張卡長得不一樣。
   這裡把兩張卡（以及所有會員頁的表單）收成同一套。 */
.member-page form .form-group:not(.group-prepend):not(.form-check),
.member-content form .form-group:not(.group-prepend):not(.form-check),
.user-account .form-group:not(.group-prepend),
.bankForm .form-group:not(.group-prepend) {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-height: 56px;
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-2);
}
.member-page form .form-group:last-child,
.user-account .form-group:last-child,
.bankForm .form-group:last-child { border-bottom: 0; }

/* 標籤：中文與英文同一行，英文小一級當註記，不要佔掉兩行把列撐高 */
.member-page form .form-group > label,
.member-content form .form-group > label,
.user-account .form-group > label,
.bankForm .form-group > label {
  flex: 0 0 140px;
  margin: 0;
  display: block;
  text-align: left;
  font-size: 15px;
  font-weight: 700;
  color: var(--muted);
  line-height: 1.35;
}
.member-page form .form-group > label > span,
.user-account .form-group > label > span,
.bankForm .form-group > label > span {
  display: inline;
  margin-left: 4px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  opacity: .7;
}

/* 值：吃掉剩下的寬度，動作按鈕靠右 */
.member-page form .form-group > .content,
.member-content form .form-group > .content,
.user-account .form-group > .content,
.bankForm .form-group > .content {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}
/* 沒有 .content 包起來的（例如「更改密碼」直接放一顆按鈕）也要靠右 */
.member-page form .form-group > .btn,
.user-account .form-group > .btn,
.bankForm .form-group > .btn { margin-left: auto; }
.member-page form .form-group .btn,
.user-account .form-group .btn,
.bankForm .form-group .btn {
  flex: none;
  min-height: var(--tap);
  padding: 0 18px !important;
  font-size: 15px;
}
/* 輸入框吃滿值的欄位 */
.member-page form .form-group > .content input,
.member-page form .form-group > input,
.user-account .form-group input,
.bankForm .form-group input {
  width: 100%;
  min-width: 0;
  min-height: var(--btn-md);
  padding: 0 14px;
  background: var(--surf-3);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  color: var(--ink);
  font-size: 16px;
}

/* 手機：標籤在上、值在下，兩個都靠左（這是上面 a) 的修正） */
@media (max-width: 575.98px) {
  .member-page form .form-group:not(.group-prepend):not(.form-check),
  .member-content form .form-group:not(.group-prepend):not(.form-check),
  .user-account .form-group:not(.group-prepend),
  .bankForm .form-group:not(.group-prepend) {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 12px 0;
  }
  .member-page form .form-group > label,
  .member-content form .form-group > label,
  .user-account .form-group > label,
  .bankForm .form-group > label { flex: none; width: 100%; }
  .member-page form .form-group > .content,
  .member-content form .form-group > .content,
  .user-account .form-group > .content,
  .bankForm .form-group > .content { width: 100%; }
  /* 只放一顆按鈕的那種列，按鈕靠右不要整條拉滿 */
  .member-page form .form-group > .btn,
  .user-account .form-group > .btn,
  .bankForm .form-group > .btn { align-self: flex-end; }
}

/* --------------------------------------------------------------- 4. 查詢日期那一列
   `.group-prepend` 裡是「標籤 + 兩個日期 + 四顆快捷鈕」，被當成一般欄位排成一列之後，
   平板上標籤被壓成「交／易／日／期」四行。改成自己的排法。 */
.group-prepend.form-group {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: center;
  padding: 0 0 var(--s2);
}
.group-prepend > label.group-text {
  grid-column: 1 / -1;
  flex: none !important;
  width: auto !important;
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}
.group-prepend > input[type=date] {
  width: 100%;
  min-height: var(--btn-md);
  padding: 0 12px;
  background: var(--surf-3);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  color: var(--ink);
  font-size: 15px;
}
.group-prepend .group-btn {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.group-prepend .group-btn .btn {
  min-height: var(--btn-sm);
  padding: 0 8px !important;
  font-size: 14px;
  white-space: nowrap;
}
@media (max-width: 420px) {
  .group-prepend.form-group { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------- 5. 場館餘額格在平板
   768 實測一排三格、每格只有 104px，字擠成兩行。平板給兩欄就好，
   1024 以上才三欄。 */
@media (min-width: 576px) and (max-width: 991.98px) {
  .game-cash .game-cash-row > .row > [class*="col-"] {
    flex: 0 0 50%;
    max-width: 50%;
  }
}
@media (min-width: 992px) {
  .game-cash .game-cash-row > .row > [class*="col-"] {
    flex: 0 0 33.333%;
    max-width: 33.333%;
  }
}

/* --------------------------------------------------------------- 6. 頁首兩顆鈕的主次顛倒了
   登入後那兩顆沿用訪客版的 class：登出掛 .btn-login（金＝主要）、
   會員掛 .btn-register（橘＝註冊）。可是登入之後「會員中心」才是主要去處，
   登出是次要而且是離開型的動作。依 href 分辨，把主次換回來。
   （不能靠 class 分，訪客頁的同一個位置是登入／註冊。） */
#header .navbar-bg > .container > .d-lg-none > a[href*="Manger/index"],
#header .navbar-bg > .container > .d-lg-none > a[href*="Manger/index"] * {
  background-color: #E0A733 !important;
  background-image: var(--grad-gold) !important;
  color: var(--on-gold) !important;
  border-color: transparent !important;
}
#header .navbar-bg > .container > .d-lg-none > a[href*="Manger/index"] * {
  background: none !important;
}
#header .navbar-bg > .container > .d-lg-none > a[href*="logout"] {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid var(--line-hi) !important;
  color: var(--gold) !important;
  box-shadow: none !important;
}
/* 登出的圖示是白色素材，放在透明底上維持原樣；會員那顆是金底，圖示要轉深 */
#header .navbar-bg > .container > .d-lg-none > a[href*="logout"] .btn-icon { filter: none; }
#header .navbar-bg > .container > .d-lg-none > a[href*="Manger/index"] .btn-icon {
  filter: brightness(0) saturate(0) opacity(.8);
}

/* --------------------------------------------------------------- 7. 手機的資料表要看得出還有內容
   表格自己是橫向捲動容器，但右緣直接切在字中間，看起來像被裁掉。
   右邊壓一道漸層當提示，捲到底就不再需要（用 scroll-driven 做不了，
   固定壓著即可，不會擋到內容）。 */
@media (max-width: 767.98px) {
  .box:has(> .table-responsive),
  .box:has(> table),
  .table-responsive { position: relative; }
  .table-responsive::after,
  .box:has(> table)::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 26px;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(14, 24, 48, 0), rgba(14, 24, 48, .92));
    border-radius: 0 var(--r-m) var(--r-m) 0;
  }
}

/* --------------------------------------------------------------- 8. 子頁不重複整張會員選單
   v7 的規則是「頁面上有 .member-page 就在手機藏掉 .memberMenu」，
   但儲值結果那幾頁的結構是 `section.member > .container`，沒有 .member-page，
   所以選單又冒出來了 —— 同一區還是有的頁有、有的頁沒有。
   改用更可靠的訊號：**只要這一頁有自己的頁首列（.member-top），它就是子頁**。 */
@media (max-width: 991.98px) {
  body:has(.member-top) .memberMenu { display: none !important; }
}

/* --------------------------------------------------------------- 9. 空的送出鈕
   點數出售的送出鈕是 `<a id="SumitBTN"></a>`，文字由 JS 補上；
   沒有 JS 的時候就是一條空的橫槓掛在卡片下面。空的就不要佔位置。 */
.fitch:has(> a:empty),
.submit-input:has(> a:empty) { display: none !important; }

/* --------------------------------------------------------------- 10. 平板的會員內容不要貼著邊
   768～991 這一段沒有側欄（側欄是 992 以上才出現），內容應該置中限寬，
   不然一整片 700 多 px 只放一欄標籤與值，看起來很空。 */
@media (min-width: 576px) and (max-width: 991.98px) {
  .member-page,
  .member-content,
  .page-wrapper > .main > .content > .wapper {
    max-width: 680px;
    margin-inline: auto;
  }
}

/* --------------------------------------------------------------- 11. 標題重複了
   匯款／出售／轉移記錄、優惠訂單這幾頁本來就有一個「會員中心」大標加橫向導覽軌，
   補上頁首列之後變成「會員中心」→ 導覽軌 →「會員中心｜匯款記錄」，同一件事講兩次。
   把補上的那條移到最前面，原本那個沒有頁名的大標就不需要了。 */
.content:has(> .member-top) {
  display: flex;
  flex-direction: column;
}
.content:has(> .member-top) > .member-top { order: -1; }
.content:has(> .member-top) > .title { display: none; }

/* --------------------------------------------------------------- 12. 平板的館別卡片留下落單的一張
   768 實測真人館四張卡排成 3 + 1，第四張自己一列（天條 55 的落單尾巴）。
   平板用的是手機那套橫式卡（圖左名右），兩欄一張 350px 剛好，四張正好兩列。 */
@media (min-width: 576px) and (max-width: 991.98px) {
  .BrandGame .games { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 承上：v5 給手機卡片設的 `.BrandGame > .container{max-width:520px}` 也套到了平板，
   768 上左右各空 124px。平板放寬到容器本來的寬度，卡片再填滿自己的格子。 */
@media (min-width: 576px) and (max-width: 991.98px) {
  .game-tab-content .BrandGame > .container { max-width: 720px; }
  .BrandGame .games > .gamesBox.action-game {
    width: 100% !important;
    max-width: none;
    flex-basis: auto !important;
  }
}

/* --------------------------------------------------------------- 13. 登入後大廳的快捷區（.Wbody）
   這一段是 `<?php if($isLogin) ?>` 才輸出的，**訪客視角完全看不到** ——
   而我的大廳預覽一直是從線上抓的訪客版，所以這一區從頭到尾沒被驗過，
   base.css 裡 .Wbody / .Wbody_box / .userwallet / .u-cone / .u-conWbtn /
   .btn-luckycash 一條規則都沒有，登入之後就是一堆裸圖配預設藍色連結字。
   （已另外渲染一份登入版大廳 m-index 放進預覽與巡檢，不會再漏。）

   帳號與餘額頁首已經有了，這裡不重複；留三顆快捷動作，一排三格。 */
.Wbody { padding: var(--s3) 0 0; }
.Wbody > .container { max-width: var(--maxw); }
.Wbody .Wbody_box {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
/* 讓兩層包裝退出排版，六個 <a> 直接進格線 */
.Wbody .userwallet { display: contents; }
.Wbody .u-conWbtn { display: contents !important; }
/* 帳號與餘額頁首已經有一份，這裡收掉 */
.Wbody .u-cone { display: none !important; }

.Wbody a.Wbtn {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 80px;
  padding: 12px 8px;
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  transition: background-color var(--press) ease, border-color var(--press) ease;
}
.Wbody a.Wbtn:hover,
.Wbody a.Wbtn:active {
  background: var(--surf-2);
  border-color: var(--line-hi);
  color: var(--ink);
}
.Wbody a.Wbtn img {
  width: var(--icon-lg);
  height: var(--icon-lg);
  flex: none;
  object-fit: contain;
}
.Wbody a.Wbtn > div { color: inherit; }
/* 紅利提領是這一排裡的重點動作，給金色描邊拉開 */
.Wbody a.Wbtn.btn-luckycash {
  border-color: var(--line-hi);
  color: var(--gold);
}
.Wbody a.Wbtn.btn-luckycash:hover { background: rgba(239, 192, 114, .12); }

/* --------------------------------------------------------------- 14. 登入後的公告彈窗（.fh-navy-*）
   這一組在**任何一支 CSS 裡都沒有規則**（舊的六支也沒有），是半途沒做完的東西。
   目前它被 `isset($newsList2)` 包著，而沒有任何 controller 會設那個變數，
   所以線上根本不會出現 —— 但 markup 還在，哪天有人把資料接上就會裸奔。
   用站上既有的彈窗語彙給它一份最小的樣式，順便讓關閉鈕有 44px。 */
.fh-navy-overlay { background: rgba(4, 9, 20, .76); }
.fh-navy-modal {
  max-width: 520px;
  margin: 8vh auto;
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  overflow: hidden;
  box-shadow: 0 40px 90px -40px #000;
}
.fh-navy-top-bar { height: 4px; background-image: var(--grad-gold); }
.fh-navy-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--line);
}
.fh-navy-logo-text { margin: 0; font-size: 17px; font-weight: 800; color: var(--ink); }
.fh-navy-close-x {
  flex: none;
  width: var(--tap);
  height: var(--tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surf-2);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  color: var(--body);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.fh-navy-close-x:hover { background: var(--surf-3); color: var(--ink); }
.fh-navy-body { padding: var(--s3); max-height: 62vh; overflow-y: auto; }
.fh-navy-list { display: flex; flex-direction: column; gap: 10px; }
.fh-navy-item {
  padding: 12px 14px;
  background: var(--surf-2);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  color: var(--body);
  font-size: 15px;
  line-height: 1.7;
}
.fh-navy-footer {
  display: flex;
  gap: 10px;
  justify-content: center;
  padding: var(--s2) var(--s3) var(--s3);
  border-top: 1px solid var(--line-2);
}
.fh-navy-btn {
  min-height: var(--btn-md);
  padding: 0 20px;
  border: 0;
  border-radius: var(--r-s);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.fh-navy-btn-gold {
  background-color: #E0A733;
  background-image: var(--grad-gold);
  color: var(--on-gold);
}
.fh-navy-btn-dim {
  background: transparent;
  border: 1px solid var(--line-hi);
  color: var(--gold);
}

/* ==========================================================================
   dcj88 base.css ─ 頁首按鈕與儲值送出鈕
   ==========================================================================
   1. 金色按鈕上的字被改成淺色，對比只有 1.93:1 —— 而且是**全站 55 頁**的
      「登入」鈕（登入後是「會員」鈕）。原因是 30-site 有一條
      `#header #navbar ul li a{color:var(--ink)!important}`（兩個 id，2-0-3），
      壓過了 `#header .btn-login{color:#3A2401!important}`（一個 id，1-1-0）。
      金底一律配深字，這裡把特異性補到 2-1-3 以上。

      這個洞我的巡檢原本也看不到：它只量「沒有子元素」的節點，
      而這顆鈕裡有一張 <img class="btn-icon">，所以整批被跳過。
      audit.py 已改成量元素自己的文字節點。

   2. 登入之後電腦版的兩顆鈕主次是反的：登出掛 `.btn-register`（橘＝註冊色）、
      會員掛 `.btn-login`（金＝主要）。手機版之前修過，桌機這一組漏了。
      依 href 分辨，不能靠 class —— 訪客頁同一個位置是登入／註冊。
   ========================================================================== */

/* --------------------------------------------------------------- 1. 金底配深字 */
/* 只管「真的是金底」的那些。手機那一組（.d-lg-none）登入後的登出鈕是
   透明描邊，配深字會變成 1.14:1 —— 那一組的顏色由 66-device 依 href 決定，
   這裡不要伸手進去。 */
#header .btn-login,
#header .btn-login *,
#header #navbar ul li a.btn-login,
#header #navbar ul li a.btn-login * {
  color: var(--on-gold) !important;
}
/* 橘底配白字（實測 4.91:1，過線） */
#header .btn-register,
#header .btn-register *,
#header #navbar ul li a.btn-register,
#header #navbar ul li a.btn-register * {
  color: #fff !important;
}

/* --------------------------------------------------------------- 2. 登入後電腦版的主次
   會員＝主要（金底深字）、登出＝次要（透明底金描邊）。 */
#header #navbar ul li a[href*="Manger/index"],
#header #navbar ul li a[href*="Manger/index"] * {
  color: var(--on-gold) !important;
}
#header #navbar ul li a[href*="Manger/index"] {
  background-color: #E0A733 !important;
  background-image: var(--grad-gold) !important;
  border-color: transparent !important;
}
#header #navbar ul li a[href*="Manger/index"] .btn-icon {
  filter: brightness(0) saturate(0) opacity(.8);
}
#header #navbar ul li a[href*="logout"] {
  background: transparent !important;
  background-image: none !important;
  border: 1px solid var(--line-hi) !important;
  box-shadow: none !important;
}
#header #navbar ul li a[href*="logout"],
#header #navbar ul li a[href*="logout"] * {
  color: var(--gold) !important;
}
#header #navbar ul li a[href*="logout"] .btn-icon { filter: none; }

/* --------------------------------------------------------------- 3. 儲值頁的送出鈕不要懸浮
   這一頁自己的 <style> 把它設成 `position:fixed; bottom:72px`，
   結果是一條浮在畫面中間、跟著捲動的橫條。改成排在所有內容最後，
   就是一顆正常的送出鍵。 */
.prestige-deposit-scope .fixed-bottom-bar,
.fixed-bottom-bar {
  position: static !important;
  transform: none !important;
  left: auto !important;
  bottom: auto !important;
  width: 100% !important;
  max-width: none !important;
  margin: var(--s3) 0 0 !important;
  padding: var(--s3) 0 0 !important;
  border-top: 1px solid var(--line-2) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: transparent !important;
  z-index: auto !important;
}
.fixed-bottom-bar .submit-btn {
  width: 100%;
  min-height: var(--btn-lg);
  font-size: 17px;
  font-weight: 800;
}

/* ==========================================================================
   dcj88 base.css ─ 查詢／篩選表單
   ==========================================================================
   遊戲紀錄的查詢區是 `<form class="row">`，裡面五個欄位每個都掛 `col-md-6`：
     選擇遊戲｜開始日期
     結束日期｜本日 本週 上週
     開始查詢
   所以「開始日期」跟「結束日期」被拆在兩列 —— 一組日期區間被硬生生分開。

   改成明確的格線：整列的東西（選遊戲、快捷鈕、送出）各佔一整列，
   兩個日期並排成一組。這樣不管欄位增減都不會再錯位。
   ========================================================================== */

.member-page form.row,
.member-content form.row,
.box-user > form.row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s2) var(--s2);
  margin: 0;
}
/* 這幾類各佔一整列 */
.member-page form.row > .col-md-12,
.member-page form.row > .group-btn,
.member-page form.row > .text-center,
.member-page form.row > .submitdiv,
.box-user > form.row > .col-md-12,
.box-user > form.row > .group-btn,
.box-user > form.row > .text-center { grid-column: 1 / -1; }
/* 「選擇遊戲」是下拉選單，內容比日期長，也給整列 */
.member-page form.row > .form-group:has(select),
.box-user > form.row > .form-group:has(select) { grid-column: 1 / -1; }

/* 篩選欄位一律「標籤在上、欄位在下」，半格寬時標籤才不會吃掉一半 */
.member-page form.row > .form-group,
.member-content form.row > .form-group,
.box-user > form.row > .form-group {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  min-height: 0;
  padding: 0;
  border-bottom: 0;
}
.member-page form.row > .form-group > label,
.member-content form.row > .form-group > label,
.box-user > form.row > .form-group > label {
  flex: none !important;
  width: 100%;
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
}
.member-page form.row input[type=date],
.member-page form.row select,
.box-user > form.row input[type=date],
.box-user > form.row select {
  width: 100%;
  min-height: var(--btn-md);
  padding: 0 12px;
  background: var(--surf-3);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  color: var(--ink);
  font-size: 15px;
}

/* 快捷區間的三～四顆鈕排成等寬一列 */
.member-page form.row > .group-btn,
.box-user > form.row > .group-btn {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
}
.member-page form.row > .group-btn > .btn,
.box-user > form.row > .group-btn > .btn {
  min-height: var(--btn-md);
  padding: 0 8px !important;
  font-size: 14px;
  white-space: nowrap;
}

/* --------------------------------------------------------------- 日期選擇器的圖示看不清楚
   `<input type="date">` 右邊那個日曆圖示是瀏覽器畫的，預設是深色的，
   放在深底上幾乎看不見。`color-scheme:dark` 會讓瀏覽器改用淺色那一套
   （圖示、下拉的日曆面板一起變），比用 filter 硬轉可靠。 */
input[type=date],
input[type=datetime-local],
input[type=time],
input[type=month],
select {
  color-scheme: dark;
}
input[type=date]::-webkit-calendar-picker-indicator {
  opacity: .85;
  cursor: pointer;
}
input[type=date]:hover::-webkit-calendar-picker-indicator { opacity: 1; }

@media (max-width: 575.98px) {
  .member-page form.row,
  .member-content form.row,
  .box-user > form.row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   dcj88 base.css ─ 404 頁
   ==========================================================================
   原本整頁只有一張 `images/404.png.webp`（線上就是 404，我先前用 CSS 收掉了）
   加一行「回首頁」，中間夾著四個 <br /> —— 圖沒了等於什麼都沒說明，
   使用者只看到一片空白配兩個字。

   改成真文字（天條 24），版面在這裡。
   ========================================================================== */

.err-404 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 46vh;
  padding: var(--s6) var(--pad-x);
  text-align: center;
}

/* 數字當視覺主體，但不是資訊主體 —— 所以用 <p> 不用標題，
   真正的 h1 是下面那一行說明（天條 43：層級照語意給，字級用樣式調）。
   選擇器要壓得過 `.site-section p{font-size:16px}`（0-1-1），
   所以寫成 `.err-404 .err-404__code`（0-2-0）。
   刻意不用漸層裁切字：`color:transparent` 會讓對比量測讀不到真正的顏色，
   而且不支援的瀏覽器會整個看不到。實色金一樣好看。 */
.err-404 .err-404__code {
  margin: 0;
  font-size: clamp(64px, 18vw, 112px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--gold);
  text-shadow: 0 6px 24px rgba(239, 192, 114, .18);
}

.err-404 .err-404__title {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  color: var(--ink);
}
.err-404 .err-404__desc {
  margin: 0;
  max-width: 26em;
  font-size: 16px;
  line-height: 1.8;
  color: var(--body);
}
.err-404 .err-404__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--btn-lg);
  margin-top: var(--s2);
  padding: 0 40px;
  border-radius: var(--r-pill);
  background-color: #E0A733;
  background-image: var(--grad-gold);
  color: var(--on-gold);
  font-size: 17px;
  font-weight: 800;
  box-shadow: var(--sh-gold);
  transition: filter var(--press) ease;
}
.err-404 .err-404__btn:hover { filter: brightness(1.06); color: var(--on-gold); }

@media (max-width: 575.98px) {
  .err-404 { min-height: 40vh; padding: var(--s5) var(--pad-x); }
  .err-404 .err-404__title { font-size: 21px; }
}

/* ==========================================================================
   CI 執行期錯誤框（<div style="border:1px solid #990000">）的配色
   ==========================================================================
   30-site.css 只處理這個框的**版面**（不讓長路徑撐出橫向捲動），
   顏色是交給祖先繼承的。深色時代那樣沒問題，翻淺底之後就看情況：
   框落在深藍帶裡就是深字配深底 —— 本機巡檢量到標題 1.0、內文 1.23。

   這個框是 PHP 有 notice 時才會冒出來的，不是每次都看得到，
   所以不能靠「它現在落在哪個區塊」來配色。給它自己一組完整的顏色，
   落在哪裡都讀得到。 */
/* 掛鉤要吃兩種寫法：樣板原本輸出的 `#990000`，以及只要有任何 JS 碰過
   這個元素的 element.style 之後、瀏覽器重新序列化出來的 `rgb(153, 0, 0)`。
   只寫前者的話，頁面上任何一支 script 動到它就整組規則失效。 */
[style*="border:1px solid #990000"],
[style*="border: 1px solid rgb(153, 0, 0)"] {
  background: #FFF3F3 !important;
  border-color: rgba(196, 43, 43, .45) !important;
  color: #7A1A1A !important;
  padding: 12px 16px !important;
}
[style*="border:1px solid #990000"] :is(h1, h2, h3, h4, p, code, pre),
[style*="border: 1px solid rgb(153, 0, 0)"] :is(h1, h2, h3, h4, p, code, pre) {
  color: #7A1A1A !important;
}

/* ==========================================================================
   dcj88 base.css ─ 社群登入：Google 收起來
   ==========================================================================
   Owner 2026-09-05 裁示「拿掉」。

   病因（實測，不是推測）：按 Google 登入會被 Google 擋下來，畫面是
   「Access blocked: This app's request is invalid」，錯誤碼 redirect_uri_mismatch
   —— 站台送出的 https://dcj88.com/action/login/google_login/result2
   沒有登記在 Google Cloud 主控台的「已授權的重新導向 URI」裡。
   那是 GCP 後台的設定，不在這份原始碼裡；在補好之前這顆鈕就是死路。

   做法用樣式表收起來，不刪原始碼（天條 49／53）——
   哪天 GCP 那邊設定好了，把這一段拿掉就整個回來，零風險。
   LINE 登入是好的，留著。

   出現的地方：登入頁、註冊頁、頁尾登入彈窗（兩處）、會員帳戶設定的「綁定Google帳號」。
   ========================================================================== */

/* 登入頁 / 註冊頁 / 頁尾彈窗：那一排圖示鈕 */
a[href*="Google_login"],
a[href*="google_login"] { display: none !important; }

/* 會員帳戶設定的綁定鈕。已綁定的那個狀態 href 是 javascript:;，
   上面那條選擇器對不到，所以這裡用 class 收。 */
.login-else .else-btn.google { display: none !important; }

/* ── 收掉之後那一排只剩 LINE 一顆，把它擺正 ───────────────────────── */

/* 登入 / 註冊頁：原本兩顆並排，剩一顆要置中，不要靠左孤零零 */
.login-else > .col-sm-12 { text-align: center; }
.login-else > .col-sm-12 > .log-img,
.login-else > .col-sm-12 > a { margin-inline: 0; }

/* 頁尾彈窗：「其他方式登入：」跟剩下的 LINE 同一列置中對齊 */
.login-else-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.login-else-box > span { margin: 0; }

/* 會員帳戶設定：原本 Google／LINE 兩顆並排，收掉一顆之後剩下那顆
   會靠左站著、右邊空一大塊。把那一列置中。
   選擇器要避開登入頁 —— 那邊的 .login-else 是 Bootstrap 的 .row，
   改成 flex 會把整排欄位弄壞，所以認「直接子層是 .else-btn」的那一種。 */
.login-else:has(> .else-btn) {
  display: flex;
  justify-content: center;
  gap: 12px;
}
.login-else:has(> .else-btn) > .else-btn { flex: 0 1 320px; }

/* ==========================================================================
   dcj88 base.css ─ 手機底部導覽的 Menu（漢堡）
   ==========================================================================
   Owner 2026-09-05：調整。

   原本樣板把 Menu 那一格寫死 `class="col d-none"` 藏起來。實測之後知道為什麼 ——
   **開了就關不掉**：

     .overlay   z-index 1090
     .ft-navbar z-index 1030      ← Close 鈕在這裡面

   `elementFromPoint` 打在 Close 鈕正中央，回的是 `mobNav` 本身。
   選單蓋住了唯一能關掉它的東西，而樣板裡那顆 `.closebtn`（× ）是註解掉的。

   另外兩件也是實測量到的：
     * 選單裡的 LOGO 被 `.overlay img{width:24px;height:24px}` 掃成 24px（原圖 3810px 寬）
       —— 跟遊戲卡那條 40px 保險同一類錯誤：規則寫得太廣，掃到了不該掃的圖。
     * 底色 rgba(5,14,36,.78) + blur(4px)，後面的內容看得清清楚楚，很吵。

   下面四條各修一件，全部只加不改（天條 49）。
   ========================================================================== */

/* ── 1. 把 Menu 那一格放出來 ─────────────────────────────────────────
   Bootstrap 的 .d-none 帶 !important，要同等武器才蓋得過。
   li 裡面同時有 Menu 與 Close 兩顆，哪一顆顯示由 modal.js 的 inline style 決定，
   所以這裡放的是外層那一格，不動兩顆 a 本身。 */
.ft-navbar .ft-nav > li:has(> #mobNavop) { display: block !important; }

/* ── 2. 底部導覽要在選單之上，Close 才點得到 ─────────────────────────
   這是「開了關不掉」的真正解法。導覽本來就是 Menu／Close 的所在，
   它蓋在選單上面是對的，不是妥協。

   選擇器要寫到 `nav.ft-navbar.fixed-bottom`（0-2-1）：`.fixed-bottom{z-index:1030}`
   在最後那層 compat 裡，跟單一 class 同級的話它排在後面就贏 —— 我第一版寫
   `.ft-navbar{z-index:1100}` 就是這樣被蓋掉的，算出來還是 1030。 */
nav.ft-navbar.fixed-bottom { z-index: 1100; }

/* 六格之後每格 65px，觸控目標仍然夠（天條 34：不小於 44px） */
.ft-navbar .ft-nav > li > .ft-link { min-width: 44px; min-height: var(--tap); }

/* ── 3. 選單底色要蓋得住 ─────────────────────────────────────────── */
#mobNav.overlay {
  background-color: rgba(5, 12, 30, .97);
  backdrop-filter: blur(14px) saturate(1.1);
}
/* 選單展開時把下面的內容擋掉，捲動也留在選單裡 */
#mobNav.overlay { overscroll-behavior: contain; }

/* ── 4. 選單頂端的 LOGO 不要被圖示規則縮成 24px ───────────────────────
   `.overlay img{width:24px;height:24px}` 是給選項左邊那排小圖示用的，
   LOGO 不在那個範圍。特異性要壓得過 0-1-1，所以寫兩層。 */
#mobNav .mobNav_home { display: block; padding: 0; border: 0; background: none; min-height: 0; }
#mobNav .mobNav_home img {
  width: auto;
  height: 34px;
  max-width: 70%;
  object-fit: contain;
}

/* 選單裡的項目：52px 高、圖示 24px，維持原本的節奏 */
#mobNav .overlay-content > a { min-height: var(--btn-lg); }

/* ==========================================================================
   dcj88 base.css ─ 館別頁的廠商卡
   ==========================================================================
   Owner 2026-09-05：接起來。

   館別頁（真人／電子／體育／彩票／棋牌）引用的廠商圖全部 404，但**美術一直都在**
   —— 遊戲大廳用的 `assets/www/images/game/` 就有整套，只是命名規則不同：

       館別頁要 live_dg.png.webp        大廳有 casino_dg.png.webp
       館別頁要 slot-qt-slot.png.webp   大廳有 slot_qt.png.webp
       館別頁要 sport36588.png.webp     大廳有 sport_35688.png.webp   ← 數字也不一樣
       歐博不叫 casino_ab，叫 casino_allbet

   21 張裡對到 16 張。**那 16 張是直接改 `src`**（tools/patch_vendor_src.py），
   不是用 CSS 蓋背景 —— 蓋背景畫面雖然對，但瀏覽器還是會去要那 16 個不存在的檔，
   每次進頁面就多 16 個 404，而且 `alt` 等於白寫。

   所以這一層只剩三件事：
     1. 讓那 16 張圖在卡片裡擺好（去背角色圖，用 contain 不用 cover）
     2. 真人那四張的字壓在圖上，要重新安排位置與對比
     3. 剩下五家真的沒有美術的，用 WP 的館別主視覺當替代底
   ========================================================================== */

/* ── 1. 圖在卡片裡怎麼擺 ─────────────────────────────────────────────
   這批是**去背的角色圖**（人物／獅頭／球員），四邊留白是刻意的。
   cover 會把頭跟腳裁掉，所以一律 contain。 */
.live-img[class] > img,
a.img-link > img.img-fluid {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 電子／體育／彩票：卡片維持原本 4:3 的比例，圖置中 */
a.img-link:has(> img.img-fluid) {
  display: block;
  aspect-ratio: 4 / 3;
}
a.img-link > img.img-fluid { object-position: center; }

/* ── 2. 真人那四張 ───────────────────────────────────────────────
   廠商名與「開始遊戲」原本擺在框的正中間（`.live-btn`），
   接上人像之後字剛好落在模特兒身上 —— 白字對白禮服，量到最壞情況只有 2.41。

   解法不是把圖壓暗到看不見，是**把字挪到底部**：人像往上靠、字沉到最下面，
   下緣再鋪一層暗底。臉留在乾淨的上緣、字在夠暗的下緣，兩邊都成立。
   量過：字所在位置的暗底 alpha 0.77，就算圖在那裡是純白，對比也有 8.76。 */
.live-img[class] {
  position: relative;
  min-height: 176px;      /* 原本 148，去背角色圖塞進去太小；[class] 是為了壓過
                             62-missing-art.css 的 `.live-img{min-height:148px}` */
}
.live-img[class] > img {
  position: absolute;
  inset: 0;
  object-position: center top;
}
.live-img[class]::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(6, 13, 29, 0) 0%,
    rgba(6, 13, 29, .12) 30%,
    rgba(6, 13, 29, .78) 50%,
    rgba(6, 13, 29, .94) 100%);
}
.live-img[class] > .live-btn {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  z-index: 1;
  margin: 0;
}

/* ── 3. 五家沒有廠商美術的：改用 WordPress 那邊的館別主視覺當底 ──────────
   WM 真人、ICG／遊聯天下／GR 電子、MG 棋牌 —— 站上任何檔名變體都沒有。
   線上原本是**瀏覽器的破圖圖示配藍色 alt 文字**，比空白還難看
   （62-missing-art.css 當初漏收 slot-*，我第一版盤點也誤寫成「留白」）。

   Owner 問「WP 那邊沒圖嗎」，答案是廠商 logo 沒有，但**館別主視覺有**：
   `/wp-content/uploads/2026/08/dcj88-hall-*.webp`（720×405，深藍底配金色物件，
   跟這邊同一套色系）。卡片下面本來就有廠商名與「開始遊戲」，看得懂是哪一家。

   **這是替代品不是正解** —— 哪天有真的廠商圖，把 src 改掉、順手刪掉這一段。
   這批是滿版照片不是去背角色，所以用 cover。 */
a.img-link:has(> img[src$="slot-icg.png.webp"]),
a.img-link:has(> img[src$="slot-gg.png.webp"]),
a.img-link:has(> img[src$="slot-gr.png.webp"]),
a.img-link:has(> img[src$="chess-mg.png.webp"]) {
  display: block;
  aspect-ratio: 4 / 3;
  background-color: var(--surf-2);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: var(--r-m);
}
a.img-link:has(> img[src$="slot-icg.png.webp"]),
a.img-link:has(> img[src$="slot-gg.png.webp"]),
a.img-link:has(> img[src$="slot-gr.png.webp"]) {
  background-image: url("/wp-content/uploads/2026/08/dcj88-hall-slots.webp");
}
a.img-link:has(> img[src$="chess-mg.png.webp"]) {
  background-image: url("/wp-content/uploads/2026/08/dcj88-hall-poker.webp");
}
.live-img:has(> img[src$="live_WM.png.webp"]) {
  background-image: url("/wp-content/uploads/2026/08/dcj88-hall-baccarat.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
/* 這五張的 <img> 還是 404，收起來不讓破圖露出來 */
a.img-link:has(> img[src$="slot-icg.png.webp"]) > img,
a.img-link:has(> img[src$="slot-gg.png.webp"]) > img,
a.img-link:has(> img[src$="slot-gr.png.webp"]) > img,
a.img-link:has(> img[src$="chess-mg.png.webp"]) > img,
.live-img:has(> img[src$="live_WM.png.webp"]) > img { display: none !important; }

/* ==========================================================================
   dcj88 base.css ─ 補上的文章配圖／攻略步驟圖／橫幅
   ==========================================================================
   Owner 2026-09-05：「都要 Webp 檔案、補」。
   26 張新圖都是 WebP（天條 23），檔案進 `assets/www/images/`，
   樣板的 src 也一起換了副檔名。這一層只管它們在版面裡的尺寸。
   ========================================================================== */

/* ── 攻略頁的步驟圖 ─────────────────────────────────────────────────
   那八張是**站上自己的操作介面截圖**（登入 → 會員中心 → 選儲值方式 →
   取得代碼 → 完成繳費 → 點數轉移），不是畫出來的 ——
   畫出來的介面跟真的長得不一樣，使用者照著做會找不到按鈕。

   樣板那幾個 <img> 沒有 class 也沒有尺寸，放進 838px 寬的欄位會撐滿，
   一個登入框佔掉整個畫面。收到 560px，看得清楚又不會壓過旁邊的步驟說明。 */
/* 選擇器要寫到 0-4-1 —— 48-content.css 那條「內文零星圖示上限 40px」的保險
   是 `.content img:not(.img-fluid):not([class])`（0-3-1），
   而步驟圖剛好沒有 class、也在 .content 裡，會被它縮成 40px。
   這是同一條規則第三次咬人了（前兩次是遊戲卡與選單 LOGO）。 */
.content img[src*="/images/guide/"]:not(.img-fluid):not([class]),
.box img[src*="/images/guide/"]:not(.img-fluid):not([class]),
.content img[src*="/images/guide/"],
.box img[src*="/images/guide/"] {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  margin-top: var(--s2);
  border-radius: var(--r-m);
  border: 1px solid var(--line);
}

/* ── 館別頁的文章配圖 ───────────────────────────────────────────────
   `.img-fluid.rounded` 本來就有樣式，這裡只補圓角與上限，
   避免 3:2 的圖在窄欄位裡被拉得太高。 */
.content img[src*="/seo/"] {
  width: 100%;
  height: auto;
  border-radius: var(--r-m);
}

/* ── 電子頁上方那兩張橫幅 ───────────────────────────────────────────
   `.topbanner` 先前因為圖是 404、被我收成 display:none（62-missing-art.css）。
   圖補上了，那條規則的檔名也對不到了，這裡把外框的節奏補回來。 */
.topbanner {
  margin-top: var(--s3);
  border-radius: var(--r-m);
  overflow: hidden;
}
.topbanner img {
  display: block;
  width: 100%;
  height: auto;
}

/* ==========================================================================
   dcj88 base.css ─ 頁首右上角那兩顆
   ==========================================================================
   Owner 2026-09-05：「右上角那兩個按鈕很醜」。

   原本的做法是把兩顆黏成**一顆藥丸**：左半金色漸層、右半橘紅漸層，
   中間一條硬邊。三個問題：

     1. 兩塊高飽和的色塊直接對接，看起來像一顆壞掉的按鈕，不像兩顆
     2. 兩顆都是實心漸層，互相搶，沒有主次 —— 天條 55 說主要動作要一致、
        而且一個區域只留一顆實心
     3. 金配橘紅擠在一起，色相太近，糊成一團

   改法：**拆開、一實一虛**（配色 Owner 2026-09-05 選了 A 案）。
     註冊＝主要，**金色實心**＋深藍字 —— 用站上自己的主色。
       「開始遊戲」「一鍵回收」那些主要動作本來就是金的，頁首跟著同一套，
       全站的主要動作長一樣（天條 55）。
     登入＝次要，透明底＋中性銀灰細框 —— 金色只留給唯一的主要動作，
       所以這顆不用金，免得兩顆都在喊。

   （原本的橘紅之所以顯得髒，一半是**白字**：白字壓在中飽和的橘紅上會蒙一層灰。）

   登入後那兩顆沿用同樣的 class（登出掛 .btn-register、會員掛 .btn-login），
   主次剛好相反 —— 會員中心才是主要去處，登出是離開型的次要動作。
   所以下面另外用 href 把那兩顆翻回來（不能靠 class 分，位置是同一個）。
   ========================================================================== */

/* ── 拆開：各自一顆完整藥丸，中間留距 ───────────────────────────────── */
#header .btn-login,
#header .btn-register,
.btn-login,
.btn-register { border-radius: var(--r-pill); }

/* 電腦版兩顆各在自己的 <li> 裡 */
#header #navbar ul > li:has(> .btn-login) + li:has(> .btn-register),
#header #navbar ul > li:has(> .btn-register) + li:has(> .btn-login) {
  margin-left: 8px;
}
/* 手機版那組是直接相鄰的 <a> */
#header .d-lg-none > .btn-login + .btn-register,
#header .d-lg-none > .btn-register + .btn-login { margin-left: 8px; }

/* ── 登入＝次要：中性銀灰線框 ────────────────────────────────────
   30-site.css 與 67-buttons.css 都用 !important 把這顆的字壓成深色
   （那是配金色實心底用的），這一層排在後面、同級數壓回來。
   67-buttons.css 那條寫成 `#header #navbar ul li a.btn-login`（兩個 id），
   只寫 `#header .btn-login` 壓不過 —— 第一版就是這樣，字還是深藍色，
   線框按鈕上根本看不到。這裡把同樣的寫法複製過來比同級。 */
/* v8 翻淺底之後，銀灰線框在白頁首上幾乎看不見 —— 改成深藍線框深藍字。
   金色仍然只留給註冊那顆唯一的主要動作。 */
#header .btn-login,
#header .btn-login *,
#header .btn-login:hover,
#header .btn-login:hover *,
#header #navbar ul li a.btn-login,
#header #navbar ul li a.btn-login * {
  background-color: transparent !important;
  background-image: none !important;
  color: var(--ink) !important;
}
#header .btn-login {
  box-shadow: inset 0 0 0 1px rgba(13, 34, 96, .34);
}
#header .btn-login:hover {
  background-color: rgba(13, 34, 96, .06) !important;
  box-shadow: inset 0 0 0 1px rgba(13, 34, 96, .6);
}

/* ── 註冊＝主要：金色實心 ─────────────────────────────────────────
   字色也要用兩個 id 的寫法才壓得過（跟登入那顆同一個坑）。 */
#header .btn-register,
#header .btn-register:hover {
  background-color: var(--gold-d) !important;
  background-image: var(--grad-gold) !important;
  box-shadow: 0 2px 12px -4px rgba(227, 178, 60, .7);
}
#header .btn-register,
#header .btn-register *,
#header #navbar ul li a.btn-register,
#header #navbar ul li a.btn-register * { color: var(--on-gold) !important; }

/* ── 登入後：主次翻回來（會員＝實心金，登出＝線框）───────────────────
   選擇器帶 href 屬性，壓得過上面那兩組。 */
#header a.btn-login[href*="Manger/index"],
#header a.btn-login[href*="Manger/index"]:hover {
  background-color: var(--gold-d) !important;
  background-image: var(--grad-gold) !important;
  box-shadow: 0 2px 10px -4px rgba(227, 178, 60, .7);
}
#header a.btn-login[href*="Manger/index"],
#header a.btn-login[href*="Manger/index"] * { color: var(--on-gold) !important; }

#header a.btn-register[href*="logout"],
#header a.btn-register[href*="logout"]:hover {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: inset 0 0 0 1px var(--line-hi);
}
/* 登出的字色也要用兩個 id 的寫法。上面那條
   `#header #navbar ul li a.btn-register`（兩個 id）會把它一起染成深藍，
   而登出是透明底 —— 巡檢在 1024/1280 抓到 14 頁對比 1.14，就是這樣來的。 */
#header a.btn-register[href*="logout"],
#header a.btn-register[href*="logout"] *,
#header #navbar ul li a.btn-register[href*="logout"],
#header #navbar ul li a.btn-register[href*="logout"] * { color: var(--body) !important; }
#header a.btn-register[href*="logout"]:hover {
  background-color: rgba(13, 34, 96, .06) !important;
}

/* ── 圖示 ─────────────────────────────────────────────────────────
   46-ink-polarity.css 依「金底配深圖示、橘底配白圖示」設定，
   現在兩顆的底反過來了，跟著翻。 */
/* 金色實心底：圖示轉深，跟字同一個深度 */
#header .btn-register .btn-icon,
#header a.btn-login[href*="Manger/index"] .btn-icon {
  filter: brightness(0) saturate(0) opacity(.82) !important;
}
/* 線框那兩顆在白底上：圖示轉深，跟字同一個深度 */
#header .btn-login .btn-icon,
#header a.btn-register[href*="logout"] .btn-icon {
  filter: brightness(0) saturate(0) opacity(.72) !important;
}
/* 會員那顆是金色實心，上面那條已經處理，這裡不要再被線框那條蓋回去 */
#header a.btn-login[href*="Manger/index"] .btn-icon {
  filter: brightness(0) saturate(0) opacity(.82) !important;
}

/* 手機那兩顆維持方角（66-device.css 的
   `#header .navbar-bg > .container > .d-lg-none > a` 設 --r-s）——
   那是刻意的：手機版只放得下 44×44 的圖示鈕，方角比藥丸好認邊界。
   顏色照樣跟著上面走，一實一虛的關係在那邊也成立。 */

/* ── 手機底部導覽的「註冊」跟著同一套 ────────────────────────────────
   61-layout-v6.css 把那一格設成橘紅實心配白字。頁首的註冊改成金色之後，
   同一個動作在兩個地方兩種顏色，天條 55 說主要動作全站要一樣。
   而且那顆的白字壓在中飽和的橘紅上，就是 Owner 說「顏色不理想」的同一個成因。

   選擇器要壓過 `.ft-navbar .ft-nav > li:last-child .ft-link`（0-3-0），
   所以寫到 `nav.ft-navbar`（0-3-1）再加 !important 對齊原本的寫法。 */
nav.ft-navbar .ft-nav > li:last-child > .ft-link,
nav.ft-navbar .ft-nav > li > .ft-link[onclick*="register"] {
  background-color: var(--gold-d) !important;
  background-image: var(--grad-gold) !important;
}
nav.ft-navbar .ft-nav > li:last-child > .ft-link,
nav.ft-navbar .ft-nav > li:last-child > .ft-link *,
nav.ft-navbar .ft-nav > li > .ft-link[onclick*="register"],
nav.ft-navbar .ft-nav > li > .ft-link[onclick*="register"] * {
  color: var(--on-gold) !important;
}
nav.ft-navbar .ft-nav > li:last-child > .ft-link img,
nav.ft-navbar .ft-nav > li > .ft-link[onclick*="register"] img {
  filter: brightness(0) saturate(0) opacity(.82) !important;
}

/* ==========================================================================
   dcj88 base.css ─ 翻淺底之後，深色帶裡面的字要跟著翻
   ==========================================================================
   Owner 2026-09-07：整個沿用 WP 前台的淺色。

   token 換掉之後全站大部分自動就對了，但有兩條**寫死深色底**的橫帶不會跟著翻：

     跑馬燈  .mq-section / .top-bar   #101E3C（30-site.css）
     頁尾    #footer                   --navy-x

   它們裡面的字吃的是 --ink / --body / --muted，那三個現在是深藍 ——
   深藍字壓在深藍帶上等於看不到。

   **不是把這兩條也改成淺色**：WP 前台的公告列就是深藍配白字、頁尾也是深色帶，
   保留它們才是「沿用 WP」。要翻的是帶子裡面的字，不是帶子本身。
   ========================================================================== */

/* --------------------------------------------------------------- 跑馬燈 */
.mq-section,
.top-bar,
.mq-section a,
.top-bar a,
.marquee-content,
.marquee-content a,
.marquee-content .con { color: var(--on-navy); }
.marquee-content a:hover { color: var(--gold-l); }
.marquee-content a::after { background: rgba(255, 255, 255, .45); }
/* 「公告」那顆標籤：WP 是白字深藍底的小膠囊 */
.mq-section .mq-tag,
.top-bar .mq-tag { color: var(--on-navy); }

/* --------------------------------------------------------------- 頁尾
   整塊深藍帶，裡面所有字一律走 on-navy 這一組。 */
#footer,
#footer a,
#footer p,
#footer li,
#footer h5,
#footer h6,
#footer .ft-link,
#footer .ft-link div { color: var(--on-navy-dim); }
#footer h5,
#footer h6,
#footer strong { color: var(--on-navy); }
#footer a:hover { color: var(--gold-l); }
#footer hr,
#footer .line { border-color: rgba(255, 255, 255, .12); }
/* 頁尾的廠商牆在深底上，白 LOGO 維持白的 —— 46 那層是給淺底卡片用的 */
#footer .brand-logo img { filter: none; opacity: .72; }
#footer .brand-logo img:hover { filter: none; opacity: 1; }

/* --------------------------------------------------------------- 會員卡頭
   會員中心那張卡的頂端是深藍帶（.member-top），同理。 */
.member-top,
.member-top *,
.member-top a { color: var(--on-navy); }
.member-top .user-lv,
.member-top .lv { color: var(--gold-l); }

/* ==========================================================================
   以下是「寫死深色」的表面，token 換掉不會跟著翻，要逐條處理。
   清單是 tools/find_dark_hardcodes.py 掃出來的（60 處），
   這裡只翻**內容坐在上面的表面**；刻意要深的帶子（跑馬燈、頁尾、廠商色塊、
   彈窗遮罩、深色表格）維持原樣。
   ========================================================================== */

/* --------------------------------------------------------------- 頁首列
   30-site.css:16 寫死 #0B1428。整條列翻白，字與圖示才有得對比。 */
#header .navbar-bg {
  background-color: var(--surf);
  background-image: var(--grad-head);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--sh-head);
}
#header .nav-link { color: var(--ink); }
#header .nav-link:hover { color: var(--blue); }
#header .u-info .uuid > div { color: var(--muted); }
#header .logo img { filter: none; }

/* --------------------------------------------------------------- 底部固定導覽
   30-site.css:900 與 60-app-shell.css:102 都寫死深藍玻璃。 */
.ft-navbar {
  background: rgba(255, 255, 255, .96) !important;
  background-image: none !important;
  border-top: 1px solid var(--line) !important;
  box-shadow: 0 -2px 14px rgba(13, 34, 96, .10) !important;
}
/* 別的層用 `.ft-navbar .auth-btn div, .ft-navbar .ft-link div`（0-3-1）
   加 !important 把字設成 on-navy。要壓過它，選擇器得更長、也要 !important，
   不然量到的是白字白底 1.0。 */
nav.ft-navbar .ft-nav .ft-link,
nav.ft-navbar .ft-nav .ft-link div,
nav.ft-navbar .ft-nav .auth-btn div { color: var(--ink) !important; }
nav.ft-navbar .ft-nav .ft-linkMenu,
nav.ft-navbar .ft-nav .ft-linkMenu div { color: var(--gold) !important; }
/* 註冊那一格是金色實心底，字色由 74 那層決定，這裡別蓋回去 */
nav.ft-navbar .ft-nav > li:last-child > .ft-link,
nav.ft-navbar .ft-nav > li:last-child > .ft-link div,
nav.ft-navbar .ft-nav > li > .ft-link[onclick*="register"],
nav.ft-navbar .ft-nav > li > .ft-link[onclick*="register"] div {
  color: var(--on-gold) !important;
}

/* --------------------------------------------------------------- 右側快捷與回頂
   30-site.css:936 / 953 —— 深藍膠囊配白圖示，翻成白底藍圖示。 */
.fixmenu li a,
.back-to-top {
  background: rgba(255, 255, 255, .96) !important;
  border: 1px solid var(--line) !important;
  box-shadow: 0 8px 20px -10px rgba(13, 34, 96, .28) !important;
  color: var(--ink) !important;
}
.fixmenu li a span { color: var(--body) !important; }
.fixmenu li img { filter: brightness(0) opacity(.72); }
.back-to-top img { filter: brightness(0) opacity(.62) !important; }

/* --------------------------------------------------------------- 手機側邊選單
   30-site.css:156 與 71-mobile-menu.css:43 都是深底。整片翻白，
   選項的字與圖示跟著轉深。 */
.overlay,
#mobNav.overlay {
  background: rgba(255, 255, 255, .97) !important;
  backdrop-filter: blur(14px) saturate(1.05);
}
.overlay-content > a,
.overlay-btn {
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
.overlay-content > a img,
.overlay-btn img { filter: brightness(0) opacity(.72); }
/* 這兩顆是實心色塊，維持自己的字色 */
.overlay .color1,
.overlay .color1 * { color: var(--on-gold) !important; }
.overlay .color2,
.overlay .color2 * { color: #fff !important; }
.overlay .color1 img { filter: brightness(0) saturate(0) opacity(.8); }
.overlay .color2 img { filter: none; }
/* 選單頂端的 LOGO 是白版的，白底上要轉深 */
#mobNav .mobNav_home img { filter: brightness(0) opacity(.8); }

/* --------------------------------------------------------------- 優惠頁的工具類
   活動內容是資料庫存的整份 HTML，裡面帶著一套 Tailwind 的**深色主題**類名
   （text-white / slate-300 / slate-400 / bg-slate-900）。
   翻淺底之後那些字全部貼在白底上 —— 巡檢在優惠頁一頁就抓到 86 個對比失敗。
   把這一組重新對應到淺底的同義色。

   要 !important：同名類在 64-promo-utils.css 也有一份（深色主題那組），
   只靠排在後面不夠保險，活動內容自己也可能帶 <style> 進來。 */
.djc-bg-slate-900\/50 { background-color: rgba(13, 34, 96, .05) !important; }
.djc-border-slate-700 { border-color: var(--line) !important; }
.djc-text-white { color: var(--ink) !important; }
.djc-text-slate-300 { color: var(--body) !important; }
.djc-text-slate-400 { color: var(--muted) !important; }
.djc-text-amber-400 { color: var(--gold) !important; }
.djc-text-blue-400 { color: var(--blue) !important; }

/* --------------------------------------------------------------- 活動自帶的深色面板
   上面那組是給「裸著用 djc-* 類名、靠頁面底色」的活動內容用的。
   但線上有幾檔活動不是那樣寫的 —— 它們在內容裡自己夾了一段 <style>，
   把 .djc-promo-wrapper 做成一塊**完整的深色面板**（深藍漸層底 + #e2e8f0 的字），
   .djc-glass-card 再疊一層 rgba(22,38,62,.85)。那是一座自給自足的深色島。

   上面那組帶 !important，會把島裡面的字一起染深 —— 深字壓在深藍卡片上。
   線上實測：優惠頁一頁 71 個對比失敗（1.05 ~ 1.9），本機的 out/active.html
   存的是舊版活動內容，所以本機巡檢一路是 0，只有拿線上的真資料量才看得到。

   面板本身維持深色（那是活動內容自己的設計，不去改它，天條 14），
   把島內的字色復原成淺色。順帶把兩個原本就沒過 AA 的色階往上提一階：
     slate-400 #94A3B8 在玻璃卡上 3.67 → #B0BECF 4.99
     blue-400  #60A5FA 在玻璃卡上 3.71 → #8FC0FD 4.98
   （這兩個在現行深色版線上也是同樣的數字，不是翻淺色翻出來的。）

   裸 <p> 那 19 個是另一個成因：20-base.css 的 `p { color: var(--body) }`
   直接命中 <p> 自己，而 .djc-promo-wrapper 的 color 是靠繼承 ——
   直接規則永遠贏過繼承，跟先後順序無關。所以要逐個標籤寫。 */
.djc-promo-wrapper,
.djc-promo-wrapper p,
.djc-promo-wrapper li,
.djc-promo-wrapper dd,
.djc-promo-wrapper dt,
.djc-promo-wrapper td,
.djc-promo-wrapper th,
.djc-promo-wrapper span,
.djc-promo-wrapper small,
.djc-promo-wrapper div { color: #E2E8F0; }
.djc-promo-wrapper h1,
.djc-promo-wrapper h2,
.djc-promo-wrapper h3,
.djc-promo-wrapper h4,
.djc-promo-wrapper h5,
.djc-promo-wrapper h6,
.djc-promo-wrapper strong,
.djc-promo-wrapper b { color: #FFFFFF; }
.djc-promo-wrapper a { color: #93C5FD; }
.djc-promo-wrapper .djc-text-white { color: #FFFFFF !important; }
.djc-promo-wrapper .djc-text-slate-300 { color: #CBD5E1 !important; }
.djc-promo-wrapper .djc-text-slate-400 { color: #B0BECF !important; }
.djc-promo-wrapper .djc-text-amber-400 { color: #FBBF24 !important; }
.djc-promo-wrapper .djc-text-blue-400 { color: #8FC0FD !important; }
.djc-promo-wrapper .djc-border-slate-700 {
  border-color: rgba(147, 197, 253, .2) !important;
}
.djc-promo-wrapper .djc-bg-slate-900\/50 {
  background-color: rgba(8, 18, 38, .5) !important;
}

/* --------------------------------------------------------------- 客服頁的裸圖
   Service.aspx 整頁就是一張 1814×1509 的 service.png 直接掛在 <body> 底下，
   沒有頁首頁尾、沒有容器、沒有 max-width。手機上只看得到左上角，
   要橫向拉才看得完（天條 34）。現行深色版線上也是這樣，不是翻淺色翻出來的。

   這裡只補一條寬度上限止血，不動那張圖也不動樣板。
   選擇器寫成 body 的直屬子元素 —— 全站其他頁的 <img> 都包在容器裡，
   不會被掃到（上次那條 `img:not([class])` 把 547 張遊戲卡縮成 40px，
   就是因為選擇器沒有錨在版面結構上）。

   圖裡有文字（客服時間、聯絡方式），把文字做成圖片本身違反天條 24，
   但那是內容不是程式 —— 已列進清單給 Owner，不自行換掉。 */
body > img {
  max-width: 100%;
  height: auto;
}

/* --------------------------------------------------------------- 狀態色的淡底組
   30-site.css 有一組「淡底 + 淺字」的狀態樣式（.green-bg / .alert-success /
   .alert-danger），那是深底時代配好的：底是 12% 的淡綠或淡紅、字是 #8CEBB0
   或 #FFB4B4。翻淺底之後底幾乎變白，淺字就貼在白上 —— 量到 1.33 與 1.41。
   底維持不變（那層淡色是有意義的狀態提示），把**字**換成同色系的深色。 */
.green-bg,
th.green-bg,
td.green-bg {
  background: rgba(31, 122, 70, .10) !important;
  color: #145630 !important;
}
.alert-success {
  background: rgba(31, 122, 70, .10);
  border-color: rgba(31, 122, 70, .30);
  color: #145630;
}
.alert-danger {
  background: rgba(196, 43, 43, .09);
  border-color: rgba(196, 43, 43, .30);
  color: #8E1F1F;
}
.alert-warning {
  background: rgba(138, 100, 16, .10);
  border-color: rgba(138, 100, 16, .30);
  color: #6B4E0C;
}
/* 紅利頁那句「請選擇儲值方式」是 alert-danger 裡的 <strong> */
.alert-danger strong,
.alert-danger b { color: #8E1F1F; }
.alert-success strong,
.alert-success b { color: #145630; }

/* --------------------------------------------------------------- 紅利儲值的付款選項
   bonus.php 的七個付款方式原本是「一張圖 + 一顆 radio」，圖在 _images/ 底下、線上全 404，
   等於一排沒有標示的圓圈（gr66 同一個坑）。2026-09-09 樣板改成真文字（天條 24）、
   radio 補上 id 讓 label 對得到；這裡把每個選項做成一列可點的卡：文字在右、圓圈在左、
   整列 48px 高，選中的那列描金邊。 */
#bonusForm .bank:has(> input.payment),
#bonusForm .atm:has(> input.payment),
#bonusForm .store:has(> input.payment) {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  margin: 0 0 10px;
  padding: 0 14px;
  background: var(--surf);
  border: 1px solid var(--line);
  border-radius: var(--r-s);
  transition: border-color var(--press) ease, background-color var(--press) ease;
}
#bonusForm .bank:has(> input.payment) > label,
#bonusForm .atm:has(> input.payment) > label,
#bonusForm .store:has(> input.payment) > label {
  order: 2;
  flex: 1;
  display: flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
}
#bonusForm input.payment {
  order: 1;
  width: 20px;
  height: 20px;
  margin: 0;
  flex: none;
  accent-color: var(--gold-d);
  cursor: pointer;
}
#bonusForm .bank:has(> input.payment:checked),
#bonusForm .atm:has(> input.payment:checked),
#bonusForm .store:has(> input.payment:checked) {
  border-color: var(--gold-d);
  background: rgba(227, 178, 60, .10);
}



/* ==========================================================================
   工具類 —— 排在最後，並照 Bootstrap 慣例帶 !important。
   原始 HTML 大量依賴 d-none / d-md-block 這種切換，必須壓得過版面規則。
   ========================================================================== */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-grid { display: grid !important; }
.d-table { display: table !important; }
.d-table-cell { display: table-cell !important; }
@media (min-width: 576px) {
  .d-sm-none { display: none !important; }
  .d-sm-block { display: block !important; }
  .d-sm-inline { display: inline !important; }
  .d-sm-inline-block { display: inline-block !important; }
  .d-sm-flex { display: flex !important; }
  .d-sm-inline-flex { display: inline-flex !important; }
  .d-sm-grid { display: grid !important; }
  .d-sm-table { display: table !important; }
  .d-sm-table-cell { display: table-cell !important; }
}

@media (min-width: 768px) {
  .d-md-none { display: none !important; }
  .d-md-block { display: block !important; }
  .d-md-inline { display: inline !important; }
  .d-md-inline-block { display: inline-block !important; }
  .d-md-flex { display: flex !important; }
  .d-md-inline-flex { display: inline-flex !important; }
  .d-md-grid { display: grid !important; }
  .d-md-table { display: table !important; }
  .d-md-table-cell { display: table-cell !important; }
}

@media (min-width: 992px) {
  .d-lg-none { display: none !important; }
  .d-lg-block { display: block !important; }
  .d-lg-inline { display: inline !important; }
  .d-lg-inline-block { display: inline-block !important; }
  .d-lg-flex { display: flex !important; }
  .d-lg-inline-flex { display: inline-flex !important; }
  .d-lg-grid { display: grid !important; }
  .d-lg-table { display: table !important; }
  .d-lg-table-cell { display: table-cell !important; }
}

.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-row-reverse { flex-direction: row-reverse !important; }
.flex-column-reverse { flex-direction: column-reverse !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.flex-fill { flex: 1 1 auto !important; }
.justify-content-start { justify-content: flex-start !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around { justify-content: space-around !important; }
.justify-content-evenly { justify-content: space-evenly !important; }
.align-items-start { align-items: flex-start !important; }
.align-self-start { align-self: flex-start !important; }
.align-content-start { align-content: flex-start !important; }
.align-items-end { align-items: flex-end !important; }
.align-self-end { align-self: flex-end !important; }
.align-content-end { align-content: flex-end !important; }
.align-items-center { align-items: center !important; }
.align-self-center { align-self: center !important; }
.align-content-center { align-content: center !important; }
.align-items-baseline { align-items: baseline !important; }
.align-self-baseline { align-self: baseline !important; }
.align-content-baseline { align-content: baseline !important; }
.align-items-stretch { align-items: stretch !important; }
.align-self-stretch { align-self: stretch !important; }
.align-content-stretch { align-content: stretch !important; }
@media (min-width: 768px) {
  .flex-md-row { flex-direction: row !important; }
  .flex-md-column { flex-direction: column !important; }
  .flex-md-row-reverse { flex-direction: row-reverse !important; }
  .flex-md-column-reverse { flex-direction: column-reverse !important; }
  .flex-md-wrap { flex-wrap: wrap !important; }
  .flex-md-nowrap { flex-wrap: nowrap !important; }
  .flex-md-fill { flex: 1 1 auto !important; }
  .justify-content-md-start { justify-content: flex-start !important; }
  .justify-content-md-end { justify-content: flex-end !important; }
  .justify-content-md-center { justify-content: center !important; }
  .justify-content-md-between { justify-content: space-between !important; }
  .justify-content-md-around { justify-content: space-around !important; }
  .justify-content-md-evenly { justify-content: space-evenly !important; }
  .align-items-md-start { align-items: flex-start !important; }
  .align-self-md-start { align-self: flex-start !important; }
  .align-content-md-start { align-content: flex-start !important; }
  .align-items-md-end { align-items: flex-end !important; }
  .align-self-md-end { align-self: flex-end !important; }
  .align-content-md-end { align-content: flex-end !important; }
  .align-items-md-center { align-items: center !important; }
  .align-self-md-center { align-self: center !important; }
  .align-content-md-center { align-content: center !important; }
  .align-items-md-baseline { align-items: baseline !important; }
  .align-self-md-baseline { align-self: baseline !important; }
  .align-content-md-baseline { align-content: baseline !important; }
  .align-items-md-stretch { align-items: stretch !important; }
  .align-self-md-stretch { align-self: stretch !important; }
  .align-content-md-stretch { align-content: stretch !important; }
}

@media (min-width: 992px) {
  .flex-lg-row { flex-direction: row !important; }
  .flex-lg-column { flex-direction: column !important; }
  .flex-lg-row-reverse { flex-direction: row-reverse !important; }
  .flex-lg-column-reverse { flex-direction: column-reverse !important; }
  .flex-lg-wrap { flex-wrap: wrap !important; }
  .flex-lg-nowrap { flex-wrap: nowrap !important; }
  .flex-lg-fill { flex: 1 1 auto !important; }
  .justify-content-lg-start { justify-content: flex-start !important; }
  .justify-content-lg-end { justify-content: flex-end !important; }
  .justify-content-lg-center { justify-content: center !important; }
  .justify-content-lg-between { justify-content: space-between !important; }
  .justify-content-lg-around { justify-content: space-around !important; }
  .justify-content-lg-evenly { justify-content: space-evenly !important; }
  .align-items-lg-start { align-items: flex-start !important; }
  .align-self-lg-start { align-self: flex-start !important; }
  .align-content-lg-start { align-content: flex-start !important; }
  .align-items-lg-end { align-items: flex-end !important; }
  .align-self-lg-end { align-self: flex-end !important; }
  .align-content-lg-end { align-content: flex-end !important; }
  .align-items-lg-center { align-items: center !important; }
  .align-self-lg-center { align-self: center !important; }
  .align-content-lg-center { align-content: center !important; }
  .align-items-lg-baseline { align-items: baseline !important; }
  .align-self-lg-baseline { align-self: baseline !important; }
  .align-content-lg-baseline { align-content: baseline !important; }
  .align-items-lg-stretch { align-items: stretch !important; }
  .align-self-lg-stretch { align-self: stretch !important; }
  .align-content-lg-stretch { align-content: stretch !important; }
}

.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-center { text-align: center !important; }
.text-start { text-align: left !important; }
.text-end { text-align: right !important; }
.text-justify { text-align: justify !important; }
.float-start { float: left !important; }
.float-end { float: right !important; }
.float-left { float: left !important; }
.float-right { float: right !important; }
.float-none { float: none !important; }
@media (min-width: 768px) {
  .text-md-left { text-align: left !important; }
  .text-md-right { text-align: right !important; }
  .text-md-center { text-align: center !important; }
  .text-md-start { text-align: left !important; }
  .text-md-end { text-align: right !important; }
  .text-md-justify { text-align: justify !important; }
  .float-md-start { float: left !important; }
  .float-md-end { float: right !important; }
  .float-md-left { float: left !important; }
  .float-md-right { float: right !important; }
  .float-md-none { float: none !important; }
}

.m-0 { margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; }
.m-1 { margin-top: 4px !important; margin-right: 4px !important; margin-bottom: 4px !important; margin-left: 4px !important; }
.m-2 { margin-top: 8px !important; margin-right: 8px !important; margin-bottom: 8px !important; margin-left: 8px !important; }
.m-3 { margin-top: 16px !important; margin-right: 16px !important; margin-bottom: 16px !important; margin-left: 16px !important; }
.m-4 { margin-top: 24px !important; margin-right: 24px !important; margin-bottom: 24px !important; margin-left: 24px !important; }
.m-5 { margin-top: 48px !important; margin-right: 48px !important; margin-bottom: 48px !important; margin-left: 48px !important; }
.m-auto { margin-top: auto !important; margin-right: auto !important; margin-bottom: auto !important; margin-left: auto !important; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 4px !important; }
.mt-2 { margin-top: 8px !important; }
.mt-3 { margin-top: 16px !important; }
.mt-4 { margin-top: 24px !important; }
.mt-5 { margin-top: 48px !important; }
.mt-auto { margin-top: auto !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 4px !important; }
.mb-2 { margin-bottom: 8px !important; }
.mb-3 { margin-bottom: 16px !important; }
.mb-4 { margin-bottom: 24px !important; }
.mb-5 { margin-bottom: 48px !important; }
.mb-auto { margin-bottom: auto !important; }
.ml-0 { margin-left: 0 !important; }
.ml-1 { margin-left: 4px !important; }
.ml-2 { margin-left: 8px !important; }
.ml-3 { margin-left: 16px !important; }
.ml-4 { margin-left: 24px !important; }
.ml-5 { margin-left: 48px !important; }
.ml-auto { margin-left: auto !important; }
.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: 4px !important; }
.mr-2 { margin-right: 8px !important; }
.mr-3 { margin-right: 16px !important; }
.mr-4 { margin-right: 24px !important; }
.mr-5 { margin-right: 48px !important; }
.mr-auto { margin-right: auto !important; }
.ms-0 { margin-left: 0 !important; }
.ms-1 { margin-left: 4px !important; }
.ms-2 { margin-left: 8px !important; }
.ms-3 { margin-left: 16px !important; }
.ms-4 { margin-left: 24px !important; }
.ms-5 { margin-left: 48px !important; }
.ms-auto { margin-left: auto !important; }
.me-0 { margin-right: 0 !important; }
.me-1 { margin-right: 4px !important; }
.me-2 { margin-right: 8px !important; }
.me-3 { margin-right: 16px !important; }
.me-4 { margin-right: 24px !important; }
.me-5 { margin-right: 48px !important; }
.me-auto { margin-right: auto !important; }
.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-1 { margin-left: 4px !important; margin-right: 4px !important; }
.mx-2 { margin-left: 8px !important; margin-right: 8px !important; }
.mx-3 { margin-left: 16px !important; margin-right: 16px !important; }
.mx-4 { margin-left: 24px !important; margin-right: 24px !important; }
.mx-5 { margin-left: 48px !important; margin-right: 48px !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-1 { margin-top: 4px !important; margin-bottom: 4px !important; }
.my-2 { margin-top: 8px !important; margin-bottom: 8px !important; }
.my-3 { margin-top: 16px !important; margin-bottom: 16px !important; }
.my-4 { margin-top: 24px !important; margin-bottom: 24px !important; }
.my-5 { margin-top: 48px !important; margin-bottom: 48px !important; }
.my-auto { margin-top: auto !important; margin-bottom: auto !important; }
.p-0 { padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; }
.p-1 { padding-top: 4px !important; padding-right: 4px !important; padding-bottom: 4px !important; padding-left: 4px !important; }
.p-2 { padding-top: 8px !important; padding-right: 8px !important; padding-bottom: 8px !important; padding-left: 8px !important; }
.p-3 { padding-top: 16px !important; padding-right: 16px !important; padding-bottom: 16px !important; padding-left: 16px !important; }
.p-4 { padding-top: 24px !important; padding-right: 24px !important; padding-bottom: 24px !important; padding-left: 24px !important; }
.p-5 { padding-top: 48px !important; padding-right: 48px !important; padding-bottom: 48px !important; padding-left: 48px !important; }
.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: 4px !important; }
.pt-2 { padding-top: 8px !important; }
.pt-3 { padding-top: 16px !important; }
.pt-4 { padding-top: 24px !important; }
.pt-5 { padding-top: 48px !important; }
.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: 4px !important; }
.pb-2 { padding-bottom: 8px !important; }
.pb-3 { padding-bottom: 16px !important; }
.pb-4 { padding-bottom: 24px !important; }
.pb-5 { padding-bottom: 48px !important; }
.pl-0 { padding-left: 0 !important; }
.pl-1 { padding-left: 4px !important; }
.pl-2 { padding-left: 8px !important; }
.pl-3 { padding-left: 16px !important; }
.pl-4 { padding-left: 24px !important; }
.pl-5 { padding-left: 48px !important; }
.pr-0 { padding-right: 0 !important; }
.pr-1 { padding-right: 4px !important; }
.pr-2 { padding-right: 8px !important; }
.pr-3 { padding-right: 16px !important; }
.pr-4 { padding-right: 24px !important; }
.pr-5 { padding-right: 48px !important; }
.ps-0 { padding-left: 0 !important; }
.ps-1 { padding-left: 4px !important; }
.ps-2 { padding-left: 8px !important; }
.ps-3 { padding-left: 16px !important; }
.ps-4 { padding-left: 24px !important; }
.ps-5 { padding-left: 48px !important; }
.pe-0 { padding-right: 0 !important; }
.pe-1 { padding-right: 4px !important; }
.pe-2 { padding-right: 8px !important; }
.pe-3 { padding-right: 16px !important; }
.pe-4 { padding-right: 24px !important; }
.pe-5 { padding-right: 48px !important; }
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-1 { padding-left: 4px !important; padding-right: 4px !important; }
.px-2 { padding-left: 8px !important; padding-right: 8px !important; }
.px-3 { padding-left: 16px !important; padding-right: 16px !important; }
.px-4 { padding-left: 24px !important; padding-right: 24px !important; }
.px-5 { padding-left: 48px !important; padding-right: 48px !important; }
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-1 { padding-top: 4px !important; padding-bottom: 4px !important; }
.py-2 { padding-top: 8px !important; padding-bottom: 8px !important; }
.py-3 { padding-top: 16px !important; padding-bottom: 16px !important; }
.py-4 { padding-top: 24px !important; padding-bottom: 24px !important; }
.py-5 { padding-top: 48px !important; padding-bottom: 48px !important; }
@media (min-width: 768px) {
  .m-md-0 { margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; }
  .m-md-1 { margin-top: 4px !important; margin-right: 4px !important; margin-bottom: 4px !important; margin-left: 4px !important; }
  .m-md-2 { margin-top: 8px !important; margin-right: 8px !important; margin-bottom: 8px !important; margin-left: 8px !important; }
  .m-md-3 { margin-top: 16px !important; margin-right: 16px !important; margin-bottom: 16px !important; margin-left: 16px !important; }
  .m-md-4 { margin-top: 24px !important; margin-right: 24px !important; margin-bottom: 24px !important; margin-left: 24px !important; }
  .m-md-5 { margin-top: 48px !important; margin-right: 48px !important; margin-bottom: 48px !important; margin-left: 48px !important; }
  .m-md-auto { margin-top: auto !important; margin-right: auto !important; margin-bottom: auto !important; margin-left: auto !important; }
  .mt-md-0 { margin-top: 0 !important; }
  .mt-md-1 { margin-top: 4px !important; }
  .mt-md-2 { margin-top: 8px !important; }
  .mt-md-3 { margin-top: 16px !important; }
  .mt-md-4 { margin-top: 24px !important; }
  .mt-md-5 { margin-top: 48px !important; }
  .mt-md-auto { margin-top: auto !important; }
  .mb-md-0 { margin-bottom: 0 !important; }
  .mb-md-1 { margin-bottom: 4px !important; }
  .mb-md-2 { margin-bottom: 8px !important; }
  .mb-md-3 { margin-bottom: 16px !important; }
  .mb-md-4 { margin-bottom: 24px !important; }
  .mb-md-5 { margin-bottom: 48px !important; }
  .mb-md-auto { margin-bottom: auto !important; }
  .ml-md-0 { margin-left: 0 !important; }
  .ml-md-1 { margin-left: 4px !important; }
  .ml-md-2 { margin-left: 8px !important; }
  .ml-md-3 { margin-left: 16px !important; }
  .ml-md-4 { margin-left: 24px !important; }
  .ml-md-5 { margin-left: 48px !important; }
  .ml-md-auto { margin-left: auto !important; }
  .mr-md-0 { margin-right: 0 !important; }
  .mr-md-1 { margin-right: 4px !important; }
  .mr-md-2 { margin-right: 8px !important; }
  .mr-md-3 { margin-right: 16px !important; }
  .mr-md-4 { margin-right: 24px !important; }
  .mr-md-5 { margin-right: 48px !important; }
  .mr-md-auto { margin-right: auto !important; }
  .ms-md-0 { margin-left: 0 !important; }
  .ms-md-1 { margin-left: 4px !important; }
  .ms-md-2 { margin-left: 8px !important; }
  .ms-md-3 { margin-left: 16px !important; }
  .ms-md-4 { margin-left: 24px !important; }
  .ms-md-5 { margin-left: 48px !important; }
  .ms-md-auto { margin-left: auto !important; }
  .me-md-0 { margin-right: 0 !important; }
  .me-md-1 { margin-right: 4px !important; }
  .me-md-2 { margin-right: 8px !important; }
  .me-md-3 { margin-right: 16px !important; }
  .me-md-4 { margin-right: 24px !important; }
  .me-md-5 { margin-right: 48px !important; }
  .me-md-auto { margin-right: auto !important; }
  .mx-md-0 { margin-left: 0 !important; margin-right: 0 !important; }
  .mx-md-1 { margin-left: 4px !important; margin-right: 4px !important; }
  .mx-md-2 { margin-left: 8px !important; margin-right: 8px !important; }
  .mx-md-3 { margin-left: 16px !important; margin-right: 16px !important; }
  .mx-md-4 { margin-left: 24px !important; margin-right: 24px !important; }
  .mx-md-5 { margin-left: 48px !important; margin-right: 48px !important; }
  .mx-md-auto { margin-left: auto !important; margin-right: auto !important; }
  .my-md-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
  .my-md-1 { margin-top: 4px !important; margin-bottom: 4px !important; }
  .my-md-2 { margin-top: 8px !important; margin-bottom: 8px !important; }
  .my-md-3 { margin-top: 16px !important; margin-bottom: 16px !important; }
  .my-md-4 { margin-top: 24px !important; margin-bottom: 24px !important; }
  .my-md-5 { margin-top: 48px !important; margin-bottom: 48px !important; }
  .my-md-auto { margin-top: auto !important; margin-bottom: auto !important; }
  .p-md-0 { padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; }
  .p-md-1 { padding-top: 4px !important; padding-right: 4px !important; padding-bottom: 4px !important; padding-left: 4px !important; }
  .p-md-2 { padding-top: 8px !important; padding-right: 8px !important; padding-bottom: 8px !important; padding-left: 8px !important; }
  .p-md-3 { padding-top: 16px !important; padding-right: 16px !important; padding-bottom: 16px !important; padding-left: 16px !important; }
  .p-md-4 { padding-top: 24px !important; padding-right: 24px !important; padding-bottom: 24px !important; padding-left: 24px !important; }
  .p-md-5 { padding-top: 48px !important; padding-right: 48px !important; padding-bottom: 48px !important; padding-left: 48px !important; }
  .pt-md-0 { padding-top: 0 !important; }
  .pt-md-1 { padding-top: 4px !important; }
  .pt-md-2 { padding-top: 8px !important; }
  .pt-md-3 { padding-top: 16px !important; }
  .pt-md-4 { padding-top: 24px !important; }
  .pt-md-5 { padding-top: 48px !important; }
  .pb-md-0 { padding-bottom: 0 !important; }
  .pb-md-1 { padding-bottom: 4px !important; }
  .pb-md-2 { padding-bottom: 8px !important; }
  .pb-md-3 { padding-bottom: 16px !important; }
  .pb-md-4 { padding-bottom: 24px !important; }
  .pb-md-5 { padding-bottom: 48px !important; }
  .pl-md-0 { padding-left: 0 !important; }
  .pl-md-1 { padding-left: 4px !important; }
  .pl-md-2 { padding-left: 8px !important; }
  .pl-md-3 { padding-left: 16px !important; }
  .pl-md-4 { padding-left: 24px !important; }
  .pl-md-5 { padding-left: 48px !important; }
  .pr-md-0 { padding-right: 0 !important; }
  .pr-md-1 { padding-right: 4px !important; }
  .pr-md-2 { padding-right: 8px !important; }
  .pr-md-3 { padding-right: 16px !important; }
  .pr-md-4 { padding-right: 24px !important; }
  .pr-md-5 { padding-right: 48px !important; }
  .ps-md-0 { padding-left: 0 !important; }
  .ps-md-1 { padding-left: 4px !important; }
  .ps-md-2 { padding-left: 8px !important; }
  .ps-md-3 { padding-left: 16px !important; }
  .ps-md-4 { padding-left: 24px !important; }
  .ps-md-5 { padding-left: 48px !important; }
  .pe-md-0 { padding-right: 0 !important; }
  .pe-md-1 { padding-right: 4px !important; }
  .pe-md-2 { padding-right: 8px !important; }
  .pe-md-3 { padding-right: 16px !important; }
  .pe-md-4 { padding-right: 24px !important; }
  .pe-md-5 { padding-right: 48px !important; }
  .px-md-0 { padding-left: 0 !important; padding-right: 0 !important; }
  .px-md-1 { padding-left: 4px !important; padding-right: 4px !important; }
  .px-md-2 { padding-left: 8px !important; padding-right: 8px !important; }
  .px-md-3 { padding-left: 16px !important; padding-right: 16px !important; }
  .px-md-4 { padding-left: 24px !important; padding-right: 24px !important; }
  .px-md-5 { padding-left: 48px !important; padding-right: 48px !important; }
  .py-md-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
  .py-md-1 { padding-top: 4px !important; padding-bottom: 4px !important; }
  .py-md-2 { padding-top: 8px !important; padding-bottom: 8px !important; }
  .py-md-3 { padding-top: 16px !important; padding-bottom: 16px !important; }
  .py-md-4 { padding-top: 24px !important; padding-bottom: 24px !important; }
  .py-md-5 { padding-top: 48px !important; padding-bottom: 48px !important; }
}

@media (min-width: 992px) {
  .m-lg-0 { margin-top: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; }
  .m-lg-1 { margin-top: 4px !important; margin-right: 4px !important; margin-bottom: 4px !important; margin-left: 4px !important; }
  .m-lg-2 { margin-top: 8px !important; margin-right: 8px !important; margin-bottom: 8px !important; margin-left: 8px !important; }
  .m-lg-3 { margin-top: 16px !important; margin-right: 16px !important; margin-bottom: 16px !important; margin-left: 16px !important; }
  .m-lg-4 { margin-top: 24px !important; margin-right: 24px !important; margin-bottom: 24px !important; margin-left: 24px !important; }
  .m-lg-5 { margin-top: 48px !important; margin-right: 48px !important; margin-bottom: 48px !important; margin-left: 48px !important; }
  .m-lg-auto { margin-top: auto !important; margin-right: auto !important; margin-bottom: auto !important; margin-left: auto !important; }
  .mt-lg-0 { margin-top: 0 !important; }
  .mt-lg-1 { margin-top: 4px !important; }
  .mt-lg-2 { margin-top: 8px !important; }
  .mt-lg-3 { margin-top: 16px !important; }
  .mt-lg-4 { margin-top: 24px !important; }
  .mt-lg-5 { margin-top: 48px !important; }
  .mt-lg-auto { margin-top: auto !important; }
  .mb-lg-0 { margin-bottom: 0 !important; }
  .mb-lg-1 { margin-bottom: 4px !important; }
  .mb-lg-2 { margin-bottom: 8px !important; }
  .mb-lg-3 { margin-bottom: 16px !important; }
  .mb-lg-4 { margin-bottom: 24px !important; }
  .mb-lg-5 { margin-bottom: 48px !important; }
  .mb-lg-auto { margin-bottom: auto !important; }
  .ml-lg-0 { margin-left: 0 !important; }
  .ml-lg-1 { margin-left: 4px !important; }
  .ml-lg-2 { margin-left: 8px !important; }
  .ml-lg-3 { margin-left: 16px !important; }
  .ml-lg-4 { margin-left: 24px !important; }
  .ml-lg-5 { margin-left: 48px !important; }
  .ml-lg-auto { margin-left: auto !important; }
  .mr-lg-0 { margin-right: 0 !important; }
  .mr-lg-1 { margin-right: 4px !important; }
  .mr-lg-2 { margin-right: 8px !important; }
  .mr-lg-3 { margin-right: 16px !important; }
  .mr-lg-4 { margin-right: 24px !important; }
  .mr-lg-5 { margin-right: 48px !important; }
  .mr-lg-auto { margin-right: auto !important; }
  .ms-lg-0 { margin-left: 0 !important; }
  .ms-lg-1 { margin-left: 4px !important; }
  .ms-lg-2 { margin-left: 8px !important; }
  .ms-lg-3 { margin-left: 16px !important; }
  .ms-lg-4 { margin-left: 24px !important; }
  .ms-lg-5 { margin-left: 48px !important; }
  .ms-lg-auto { margin-left: auto !important; }
  .me-lg-0 { margin-right: 0 !important; }
  .me-lg-1 { margin-right: 4px !important; }
  .me-lg-2 { margin-right: 8px !important; }
  .me-lg-3 { margin-right: 16px !important; }
  .me-lg-4 { margin-right: 24px !important; }
  .me-lg-5 { margin-right: 48px !important; }
  .me-lg-auto { margin-right: auto !important; }
  .mx-lg-0 { margin-left: 0 !important; margin-right: 0 !important; }
  .mx-lg-1 { margin-left: 4px !important; margin-right: 4px !important; }
  .mx-lg-2 { margin-left: 8px !important; margin-right: 8px !important; }
  .mx-lg-3 { margin-left: 16px !important; margin-right: 16px !important; }
  .mx-lg-4 { margin-left: 24px !important; margin-right: 24px !important; }
  .mx-lg-5 { margin-left: 48px !important; margin-right: 48px !important; }
  .mx-lg-auto { margin-left: auto !important; margin-right: auto !important; }
  .my-lg-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
  .my-lg-1 { margin-top: 4px !important; margin-bottom: 4px !important; }
  .my-lg-2 { margin-top: 8px !important; margin-bottom: 8px !important; }
  .my-lg-3 { margin-top: 16px !important; margin-bottom: 16px !important; }
  .my-lg-4 { margin-top: 24px !important; margin-bottom: 24px !important; }
  .my-lg-5 { margin-top: 48px !important; margin-bottom: 48px !important; }
  .my-lg-auto { margin-top: auto !important; margin-bottom: auto !important; }
  .p-lg-0 { padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; }
  .p-lg-1 { padding-top: 4px !important; padding-right: 4px !important; padding-bottom: 4px !important; padding-left: 4px !important; }
  .p-lg-2 { padding-top: 8px !important; padding-right: 8px !important; padding-bottom: 8px !important; padding-left: 8px !important; }
  .p-lg-3 { padding-top: 16px !important; padding-right: 16px !important; padding-bottom: 16px !important; padding-left: 16px !important; }
  .p-lg-4 { padding-top: 24px !important; padding-right: 24px !important; padding-bottom: 24px !important; padding-left: 24px !important; }
  .p-lg-5 { padding-top: 48px !important; padding-right: 48px !important; padding-bottom: 48px !important; padding-left: 48px !important; }
  .pt-lg-0 { padding-top: 0 !important; }
  .pt-lg-1 { padding-top: 4px !important; }
  .pt-lg-2 { padding-top: 8px !important; }
  .pt-lg-3 { padding-top: 16px !important; }
  .pt-lg-4 { padding-top: 24px !important; }
  .pt-lg-5 { padding-top: 48px !important; }
  .pb-lg-0 { padding-bottom: 0 !important; }
  .pb-lg-1 { padding-bottom: 4px !important; }
  .pb-lg-2 { padding-bottom: 8px !important; }
  .pb-lg-3 { padding-bottom: 16px !important; }
  .pb-lg-4 { padding-bottom: 24px !important; }
  .pb-lg-5 { padding-bottom: 48px !important; }
  .pl-lg-0 { padding-left: 0 !important; }
  .pl-lg-1 { padding-left: 4px !important; }
  .pl-lg-2 { padding-left: 8px !important; }
  .pl-lg-3 { padding-left: 16px !important; }
  .pl-lg-4 { padding-left: 24px !important; }
  .pl-lg-5 { padding-left: 48px !important; }
  .pr-lg-0 { padding-right: 0 !important; }
  .pr-lg-1 { padding-right: 4px !important; }
  .pr-lg-2 { padding-right: 8px !important; }
  .pr-lg-3 { padding-right: 16px !important; }
  .pr-lg-4 { padding-right: 24px !important; }
  .pr-lg-5 { padding-right: 48px !important; }
  .ps-lg-0 { padding-left: 0 !important; }
  .ps-lg-1 { padding-left: 4px !important; }
  .ps-lg-2 { padding-left: 8px !important; }
  .ps-lg-3 { padding-left: 16px !important; }
  .ps-lg-4 { padding-left: 24px !important; }
  .ps-lg-5 { padding-left: 48px !important; }
  .pe-lg-0 { padding-right: 0 !important; }
  .pe-lg-1 { padding-right: 4px !important; }
  .pe-lg-2 { padding-right: 8px !important; }
  .pe-lg-3 { padding-right: 16px !important; }
  .pe-lg-4 { padding-right: 24px !important; }
  .pe-lg-5 { padding-right: 48px !important; }
  .px-lg-0 { padding-left: 0 !important; padding-right: 0 !important; }
  .px-lg-1 { padding-left: 4px !important; padding-right: 4px !important; }
  .px-lg-2 { padding-left: 8px !important; padding-right: 8px !important; }
  .px-lg-3 { padding-left: 16px !important; padding-right: 16px !important; }
  .px-lg-4 { padding-left: 24px !important; padding-right: 24px !important; }
  .px-lg-5 { padding-left: 48px !important; padding-right: 48px !important; }
  .py-lg-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
  .py-lg-1 { padding-top: 4px !important; padding-bottom: 4px !important; }
  .py-lg-2 { padding-top: 8px !important; padding-bottom: 8px !important; }
  .py-lg-3 { padding-top: 16px !important; padding-bottom: 16px !important; }
  .py-lg-4 { padding-top: 24px !important; padding-bottom: 24px !important; }
  .py-lg-5 { padding-top: 48px !important; padding-bottom: 48px !important; }
}


/* 樣板另外用到的非標準間距 */
.mb-15 { margin-bottom: 15px !important; }
.mb-50 { margin-bottom: 50px !important; }
.mb-100 { margin-bottom: 100px !important; }

/* 尺寸與其他 */
.w-100 { width: 100% !important; }
.w-auto { width: auto !important; }
.h-100 { height: 100% !important; }
.mw-100 { max-width: 100% !important; }
.text-nowrap { white-space: nowrap !important; }
.text-truncate { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.text-uppercase { text-transform: uppercase !important; }
.text-lowercase { text-transform: lowercase !important; }
.fw-bold, .font-weight-bold { font-weight: 700 !important; }
.fw-normal { font-weight: 400 !important; }
.rounded { border-radius: var(--r-s) !important; }
.rounded-circle { border-radius: 50% !important; }
.border { border: 1px solid var(--line) !important; }
.border-0 { border: 0 !important; }
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed { position: fixed !important; }
.fixed-top { position: fixed !important; top: 0; right: 0; left: 0; z-index: 1030; }
.fixed-bottom { position: fixed !important; right: 0; bottom: 0; left: 0; z-index: 1030; }
.sticky-top { position: sticky !important; top: 0; z-index: 1020; }
.overflow-auto { overflow: auto !important; }
.overflow-hidden { overflow: hidden !important; }

/* 語意色：Bootstrap 的原值在白底上都差一點（success 4.30、warning 更低），
   這裡改成過得了 4.5:1 的深一階。 */
.text-primary { color: var(--blue-deep) !important; }
.text-secondary { color: var(--muted) !important; }
.text-success { color: #14603C !important; }
.text-danger { color: #B3121B !important; }
.text-warning { color: #8A5A02 !important; }
.text-info { color: #0B5C74 !important; }
.text-muted { color: var(--muted) !important; }
.text-dark { color: var(--ink) !important; }
.bg-white { background-color: var(--surf) !important; }
.bg-light { background-color: var(--surf-2) !important; }
.bg-dark { background-color: var(--surf) !important; }
.bg-warning { background-color: rgba(239,192,114,.16) !important; }

/* v5 是白底，所以 .text-white 等於白字白底，只好整組還原成內文色。
   v6 翻成深底之後這個前提反過來了 —— 樣板寫 .text-white 的地方
   本來就是要白字，照它的意思給就好，不必再壓回深色。 */
.text-white { color: var(--ink) !important; }
.text-light { color: var(--body) !important; }
.text-white h1, .text-white h2, .text-white h3, .text-white h4, .text-white h5,
.text-white h6, .text-white strong,
.text-light h1, .text-light h2, .text-light h3, .text-light h4, .text-light h5,
.text-light h6, .text-light strong { color: var(--ink) !important; }

/* Bootstrap 的語意色在深底上全部太暗（實測 .text-success 2.32:1），換成本站的深底版 */
.text-success { color: var(--ok) !important; }
.text-danger, .text-error { color: var(--danger) !important; }
.text-warning { color: var(--gold) !important; }
.text-primary, .text-info { color: var(--blue) !important; }
.text-muted, .text-secondary { color: var(--muted) !important; }

/* ==========================================================================
   dcj88 base.css ─ 相容層（排最後）
   37 支樣板各自帶一段 <style>，其中 6 支還留著上一代的米色／磚紅色票。
   那段 style 在文件順序上排在本檔之後，靠「特異性比它高」壓過去
   （`.memberMenu #account` 1-1-0 > `#account` 1-0-0），不是靠 !important。
   ========================================================================== */

21. 樣板自帶 <style> 的殘留舊色票
   37 支樣板各自帶一段 <style>，其中 6 支還留著上一代的米色／磚紅色票
   （#e8e3d3 / #e54b4f）。那段 style 排在 base.css 之後，只能用 !important 蓋。
   做法是把「目前所在頁」的選單高亮換成品牌色，不是把它拿掉。
   ========================================================================== */
.memberMenu #account,
.memberMenu #menu_sell_record,
.memberMenu #menu_deposit_record,
.memberMenu #menu_vip,
.memberMenu #menu_gift,
.memberMenu #menu_depost,
.memberMenu #menu_transfer,
.memberMenu #menu_withdraw,
.memberMenu #menu_wallet,
.memberMenu #menu_bankcard,
.memberMenu #deposit_history,
.memberMenu #game_history,
.memberMenu #sell_history{
  background:transparent!important;
  background-image:none!important;
  position:relative;
}
/* v5 這裡把 #account／#menu_deposit_record／#menu_sell_record 無條件高亮，
   結果會員中心六列裡有三列莫名其妙帶著金色標記，看起來就是「沒對齊、很雜亂」。
   真正的「目前所在頁」是樣板在各頁 <style> 裡寫的 #menu_xxx{background:#b7bec3}，
   剝色時已改寫成本站的選中樣式，這裡不再自己加。 */

/* 這幾支樣板把 .member-page .btn 改成舊的磚紅。
   v6 統一成金＝主要、金描邊＝次要，橘只留給註冊（見 61 的第 11 節）。 */
.member-page .btn,.member-page .btn-warning{
  background-color:#E0A733!important;
  background-image:var(--grad-gold)!important;
  color:var(--on-gold)!important;
  border-color:transparent!important;
}
.member-page .btn-outline-primary,.member-page .btn-secondary{
  background-color:transparent!important;background-image:none!important;
  color:var(--gold)!important;border-color:var(--line-hi)!important;
}

/* phonevalid 的邀請表單也走同一套 */
.page-invite .group-invite label{color:var(--ink)!important}
.page-invite .group-invite input.form-control:focus{
  border-color:var(--line-hi)!important;box-shadow:0 0 0 3px rgba(239,192,114,.16)!important;
}
.page-invite .group-invite .btn-warning{
  background-color:#E0A733!important;background-image:var(--grad-gold)!important;color:var(--on-gold)!important;
}

/* 手機的遊戲名拉回 16px（卡片的主要識別字） */
@media (max-width:767.98px){
  .game-name{font-size:16px}
}

/* 到這裡為止。這一行原本是個沒關的註解標頭，後面再加任何一層都會被它整層吃掉。 */