/* ==========================================================================
   gd666-v2.css — 改版新增樣式表（只加不改，不動 style.css / main.css / zzsc.css）
   還原方式：拿掉頁面裡這支的 <link> 即可，舊樣板一個字沒被碰。
   色票沿用 gd666 既有品牌色（style.css 挖出來的青藍＋金＋深藍），不是新配色。
   ========================================================================== */

:root{
  /* ---- 品牌色（沿用既有） ---- */
  --gd-cyan:        #07b6d7;
  --gd-cyan-bright:  #00d7ff;
  --gd-cyan-deep:    #006b88;
  --gd-gold:         #f9c54e;
  --gd-gold-deep:    #b8862f;

  /* ---- 語意色（2026-09-08 對比度重算：舊版 bg/surface/surface-2/surface-3
     實測 luminance 比值只有 1.16~1.25，四層幾乎同色，這是「所有對比度都不對」
     的真正病因——WCAG 只量文字對底，量不到面跟面。這裡重新用同一個色相
     (206°深藍) 往上拉開，每一階至少 1.35~1.7 倍，數字是實測過的：
       bg→surface 1.71 / surface→surface-2 1.50 / surface-2→surface-3 1.36 ---- */
  --gd-bg:           #050b12;
  --gd-bg-2:         #081422;
  --gd-surface:      #193c56;
  --gd-surface-2:    #24577d;
  --gd-surface-3:    #2d6c9b;
  --gd-navy:         var(--gd-surface);   /* 頁首改用同一階，不再自己開一個跟 bg 幾乎同色的深藍 */
  --gd-border:       rgba(255,255,255,.20);
  --gd-border-2:     rgba(255,255,255,.32);

  /* 文字三階：mute 只准用在 bg/surface 這兩層最深的底（實測 5.8~10.5:1）；
     soft 是「功能性文字」的預設階（表單標籤、說明、次要數值），surface-2 上仍有 5.3:1；
     淺色卡沒有低於 4.5 的情形——量表見 gd666-preview/tools/contrast_check.py。
     全部改實色，不再用透明度疊色（alpha 疊色一多層就容易算錯，也是這次要修的病因之一）。*/
  --gd-text:         #f5f9fb;
  --gd-text-soft:    #c9d8e4;
  --gd-text-mute:    #adbfd0;
  --gd-on-gold:      #241505;

  --gd-success:      #5fe89c;
  --gd-success-bg:   #0f2e22;
  --gd-danger:       #ff8a7f;
  --gd-danger-bg:    #3a1a18;
  --gd-warn:         #ffc966;
  --gd-warn-bg:      #3a2a0f;

  /* ---- 間距尺度（8px 網格，只設上方，見 v2 說明） ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* ---- 字級 ---- */
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-h2: 24px;
  --fs-h1: 30px;

  --gd-radius: 14px;
  --gd-radius-sm: 10px;
  --gd-shadow: 0 8px 24px rgba(0,0,0,.35);

  --gd-bottomnav-h: 64px;
  --gd-safe-b: env(safe-area-inset-bottom, 0px);
}

/* ============================== 基礎 ============================== */
.gd2{ color:var(--gd-text); font-size:var(--fs-body); line-height:1.6; color-scheme:dark; }
/* 沒有明講 color-scheme 時，瀏覽器對「沒特別設底色」的原生表單元件(input/select 的預設外觀)
   會各自套用自己的預設灰階，跟我們指定的深藍系對不上、量出來的面對面比值時大時小。
   一律宣告成 dark，原生外觀至少統一走深色那一套，不會忽明忽暗。 */
.gd2 *{ box-sizing:border-box; }
.gd2 h1,.gd2 h2,.gd2 h3{ font-weight:700; letter-spacing:.02em; }
.gd2 h1{ font-size:var(--fs-h1); }
.gd2 h2{ font-size:var(--fs-h2); }
.gd2 h3{ font-size:19px; }
/* 2026-09-08 拿掉 color:inherit：這條 (0,1,1) 的特異度比很多舊版按鈕自己設定的
   文字色（例如 .btn-1{color:#000}，(0,1,0)）還高，會贏過去——首頁那些青色/圖片按鈕
   看起來「全部對比度不對」，根源就是這一行蓋掉了原本設計好的深色字。
   拿掉之後只留 text-decoration，文字顏色交給每個元件自己的規則決定。 */
.gd2 a{ text-decoration:none; }
.gd2 img{ max-width:100%; display:block; }
.gd2 button{ font-family:inherit; }

html, body.gd2-body{ overflow-x:hidden; max-width:100%; }
.gd2-body{ background:var(--gd-bg); }

/* 自訂細滾軸（不是禁用捲動，只是收掉瀏覽器預設粗滾軸的視覺重量） */
.gd2 ::-webkit-scrollbar{ width:6px; height:6px; }
.gd2 ::-webkit-scrollbar-track{ background:transparent; }
.gd2 ::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.18); border-radius:99px; }
.gd2{ scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.22) transparent; }

/* ============================== 版面容器 ============================== */
/* 背景滿版、內容限寬置中（天條39）；區塊只設上方間距（天條38） */
.gd2-section{ width:100%; padding-top:var(--sp-8); }
.gd2-section:first-child{ padding-top:0; }
.gd2-section--tight{ padding-top:var(--sp-6); }
.gd2-container{ max-width:1200px; margin:0 auto; padding:0 var(--sp-5); }
@media (max-width:768px){
  .gd2-section{ padding-top:var(--sp-7); }
  .gd2-container{ padding:0 var(--sp-4); }
}

.gd2-section--alt{ background:var(--gd-bg-2); }

.gd2-heading{ text-align:center; margin-bottom:var(--sp-5); }
.gd2-heading .en{ font-size:26px; color:var(--gd-cyan-bright); text-transform:uppercase; letter-spacing:.12em; text-shadow:0 0 18px rgba(0,215,255,.45); }
.gd2-heading .zh{ font-size:15px; color:var(--gd-text-soft); margin-top:var(--sp-1); letter-spacing:.06em; }
@media (max-width:768px){ .gd2-heading .en{ font-size:20px; } }

/* ============================== 按鈕 ============================== */
.gd2-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:0 var(--sp-5);
  border-radius:999px; font-weight:700; font-size:15px;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
}
.gd2-btn--gold{ background:linear-gradient(180deg,var(--gd-gold),var(--gd-gold-deep)); color:var(--gd-on-gold) !important; box-shadow:0 4px 14px rgba(249,197,78,.28); }
.gd2-btn--cyan{ background:linear-gradient(180deg,var(--gd-cyan-bright),var(--gd-cyan-deep)); color:#03222c !important; }
.gd2-btn--outline{ background:transparent; border-color:var(--gd-border-2); color:var(--gd-text); }
.gd2-btn--sm{ min-height:38px; padding:0 var(--sp-4); font-size:14px; }
.gd2-btn--block{ width:100%; }
.gd2-btn-row{ display:flex; gap:var(--sp-3); }
.gd2-btn-row .gd2-btn{ flex:1; }

/* ============================== 頁首：餘額 chip ============================== */
.gd2-balance{
  align-items:center; gap:6px;
  background:var(--gd-surface-2); border:1px solid var(--gd-border-2);
  border-radius:999px; padding:6px 14px 6px 8px; min-height:40px;
}
.gd2-balance__link{ display:inline-flex; align-items:center; gap:var(--sp-2); }
.gd2-balance .ic{ width:26px; height:26px; border-radius:50%; background:linear-gradient(180deg,var(--gd-gold),var(--gd-gold-deep)); display:flex; align-items:center; justify-content:center; font-size:13px; }
.gd2-balance .num{ color:var(--gd-gold); font-weight:800; font-size:17px; }
.gd2-balance .refresh{ display:inline-flex; color:var(--gd-text-mute); margin-left:4px; }
.gd2-balance .refresh:active{ transform:rotate(180deg); }

/* ============================== 遊戲卡片 ============================== */
.gd2-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-4); }
.gd2-grid--3{ grid-template-columns:repeat(3,1fr); }
.gd2-grid--6{ grid-template-columns:repeat(6,1fr); }
@media (max-width:1024px){
  .gd2-grid, .gd2-grid--3, .gd2-grid--6{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:768px){
  .gd2-grid, .gd2-grid--3, .gd2-grid--6{ grid-template-columns:repeat(2,1fr); gap:var(--sp-3); }
}

.gd2-card{
  position:relative; display:block; border-radius:var(--gd-radius);
  overflow:hidden; background:var(--gd-surface); border:1px solid var(--gd-border);
  box-shadow:var(--gd-shadow);
}
.gd2-card .art{ aspect-ratio:3/4; width:100%; overflow:hidden; background:linear-gradient(160deg,var(--gd-surface-3),var(--gd-navy)); }
.gd2-card .art img{ width:100%; height:100%; object-fit:contain; padding:var(--sp-2); }
.gd2-card .cap{ padding:var(--sp-3) var(--sp-3) var(--sp-4); text-align:center; }
.gd2-card .cap .name{ font-size:14px; font-weight:700; margin-bottom:var(--sp-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gd2-card .cap .gd2-btn{ width:100%; }
.gd2-card .tag{ position:absolute; top:var(--sp-2); left:var(--sp-2); background:var(--gd-danger); color:#fff; font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; }

/* 真人視訊維持較寬幅（人像構圖），電子/捕魚維持直幅 */
.gd2-card--wide .art{ aspect-ratio:4/3; }

/* ============================== 彈出視窗（7.5 成螢幕滿版） ============================== */
.gd2 .modal-dialog{ display:flex; align-items:center; min-height:calc(100% - 1rem); }
.gd2 .modal-content{
  width:100%; max-height:75vh; display:flex; flex-direction:column;
  background:var(--gd-surface); border:1px solid var(--gd-border-2); border-radius:var(--gd-radius); color:var(--gd-text);
}
/* style.css 有一條沒限定範圍的 .modal-header{background:#07b6d7} —— 是舊版登入視窗
   專屬的青色標題列，同一種「全域規則沒scope、被新版繼承」的病，這裡明講蓋掉。 */
.gd2 .modal-header{ background:var(--gd-surface); border-bottom:1px solid var(--gd-border); flex:0 0 auto; }
.gd2 .modal-header .modal-title{ color:var(--gd-text); font-size:var(--fs-h2); }
.gd2 .modal-body{ overflow-y:auto; flex:1 1 auto; }
.gd2 .modal-footer{ flex:0 0 auto; }
@media (max-width:768px){
  .gd2 .modal-dialog{ margin:0; height:100%; align-items:flex-end; }
  .gd2 .modal-content{ max-height:75vh; border-bottom-left-radius:0; border-bottom-right-radius:0; }
}

/* ============================== 底部固定導覽（手機） ============================== */
.gd2-bottomnav{
  position:fixed; left:0; right:0; bottom:0; z-index:1040;
  display:flex; background:var(--gd-surface); border-top:1px solid var(--gd-border-2);
  padding-bottom:var(--gd-safe-b); box-shadow:0 -6px 18px rgba(0,0,0,.35);
}
.gd2-bottomnav a{
  flex:1 1 0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; min-height:var(--gd-bottomnav-h); color:var(--gd-text-soft); font-size:11px;
}
.gd2-bottomnav a .ic{ font-size:19px; line-height:1; }
.gd2-bottomnav a.is-active{ color:var(--gd-gold); }
.gd2-bottomnav a.is-active .ic{ text-shadow:0 0 12px rgba(249,197,78,.6); }
/* 手機頁面底部留白給固定導覽，避免內容被蓋住 */
.gd2-has-bottomnav{ padding-bottom:calc(var(--gd-bottomnav-h) + var(--gd-safe-b) + var(--sp-4)); }
@media (min-width:769px){ .gd2-bottomnav{ display:none; } .gd2-has-bottomnav{ padding-bottom:0; } }

/* ============================== 會員中心：任務卡 ============================== */
.gd2-tasks{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-4); }
@media (max-width:768px){ .gd2-tasks{ grid-template-columns:1fr; } }
.gd2-task{ background:var(--gd-surface); border:1px solid var(--gd-border); border-radius:var(--gd-radius); padding:var(--sp-4); display:flex; align-items:center; gap:var(--sp-3); }
.gd2-task .num{ width:32px; height:32px; border-radius:50%; background:var(--gd-surface-3); color:var(--gd-text); display:flex; align-items:center; justify-content:center; font-weight:700; flex:0 0 auto; }
.gd2-task.is-done .num{ background:var(--gd-success); color:#04331a; }
.gd2-task .body{ flex:1 1 auto; min-width:0; }
.gd2-task .body .t{ font-weight:700; font-size:15px; }
.gd2-task .body .d{ font-size:14px; color:var(--gd-text-soft); margin-top:2px; }
.gd2-task .gd2-btn{ flex:0 0 auto; }

/* ============================== 會員中心：快速入口磚 ============================== */
.gd2-tiles{ display:grid; grid-template-columns:repeat(5,1fr); gap:var(--sp-3); }
@media (max-width:768px){ .gd2-tiles{ grid-template-columns:repeat(3,1fr); } }
.gd2-tile{ background:var(--gd-surface); border:1px solid var(--gd-border); border-radius:var(--gd-radius-sm); padding:var(--sp-4) var(--sp-2); text-align:center; min-height:44px; min-width:0; }
.gd2-tile .ic{ font-size:24px; margin-bottom:var(--sp-2); }
.gd2-tile .t{ font-size:13px; font-weight:700; overflow-wrap:break-word; }
.gd2-tile:active{ background:var(--gd-surface-2); }

/* 統計小卡（4欄／3欄），手機一律收成2欄，數字才不會撐破版 */
.gd2-tiles--4,.gd2-tiles--3{ grid-template-columns:repeat(4,1fr); }
.gd2-tiles--3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:640px){ .gd2-tiles--4,.gd2-tiles--3{ grid-template-columns:repeat(2,1fr); } }

/* ============================== 折疊卡（帳戶管理） ============================== */
.gd2-panel{ background:var(--gd-surface); border:1px solid var(--gd-border); border-radius:var(--gd-radius); margin-top:var(--sp-4); overflow:hidden; }
.gd2-panel > summary{
  list-style:none; cursor:pointer; padding:var(--sp-4) var(--sp-5);
  display:flex; align-items:center; justify-content:space-between; min-height:44px;
  font-weight:700; font-size:16px;
}
.gd2-panel > summary::-webkit-details-marker{ display:none; }
.gd2-panel > summary .chev{ transition:transform .2s; color:var(--gd-text-mute); }
.gd2-panel[open] > summary .chev{ transform:rotate(90deg); }
.gd2-panel .body{ padding:0 var(--sp-5) var(--sp-5); border-top:1px solid var(--gd-border); padding-top:var(--sp-4); }
.gd2-status{ font-size:12.5px; font-weight:700; padding:3px 10px; border-radius:999px; background:var(--gd-surface-3); color:var(--gd-text); }
.gd2-status--ok{ background:var(--gd-success-bg); color:var(--gd-success); border:1px solid rgba(95,232,156,.35); }
.gd2-status--pending{ background:var(--gd-warn-bg); color:var(--gd-warn); border:1px solid rgba(255,201,102,.35); }
.gd2-status--danger{ background:var(--gd-danger-bg); color:var(--gd-danger); border:1px solid rgba(255,138,127,.35); }

/* ============================== 表單欄位 ============================== */
.gd2-field{ margin-top:var(--sp-4); }
/* style.css 有一條沒限定範圍的 label{background:#07b6d7;color:#000;height:42px} ——
   這是舊版账戶頁「青色標籤條」的專屬樣式，元素選擇器特異度最低，但因為完全沒有 scope，
   我們新版任何 <label> 都會被接管成青底黑字（這正是「所有對比度都不對」的病灶：
   我後來設的字色贏得了顏色，但底色從沒被蓋掉，變成淺字配青底 1.66:1）。
   這裡用 .gd2 label 整批重設，特異度 (0,1,1) 蓋過 (0,0,1) 那條全域規則。 */
.gd2 label{ background:none; height:auto; padding:0; }
.gd2-field label{ display:block; font-size:14px; color:var(--gd-text-soft); margin-bottom:6px; }
.gd2-field .val{ min-height:44px; display:flex; align-items:center; padding:0 var(--sp-3); background:var(--gd-surface-2); border-radius:var(--gd-radius-sm); font-size:15px; }
.gd2-field input[type=text],.gd2-field input[type=number],.gd2-field input[type=password],.gd2-field input[type=tel],.gd2-field select,.gd2-field textarea{
  width:100%; min-height:44px; padding:0 var(--sp-3); background:var(--gd-surface-2); border:1px solid var(--gd-border-2);
  border-radius:var(--gd-radius-sm); color:var(--gd-text); font-size:16px;
}
.gd2-field textarea{ min-height:88px; padding-top:10px; }
.gd2-field .hint{ font-size:12px; color:var(--gd-danger); margin-top:6px; }
/* placeholder 沒特別設color時是瀏覽器預設灰(≈rgb(117,117,117))，配我們的深藍底只有1.67:1 */
.gd2-field input::placeholder,.gd2-field textarea::placeholder{ color:var(--gd-text-soft); opacity:1; }
.gd2-fields-2{ display:grid; grid-template-columns:1fr 1fr; gap:0 var(--sp-4); }
@media (max-width:768px){ .gd2-fields-2{ grid-template-columns:1fr; } }

/* ============================== 紀錄表格 ============================== */
.gd2-tablewrap{ overflow-x:auto; border:1px solid var(--gd-border); border-radius:var(--gd-radius); margin-top:var(--sp-4); }
.gd2-table{ width:100%; border-collapse:collapse; min-width:560px; font-size:14px; }
.gd2-table th,.gd2-table td{ padding:12px 14px; text-align:left; white-space:nowrap; }
.gd2-table thead th{ background:var(--gd-surface-2); color:var(--gd-text-soft); font-weight:700; position:sticky; top:0; }
.gd2-table tbody tr{ border-top:1px solid var(--gd-border); }
.gd2-table tbody tr:hover{ background:var(--gd-surface-2); }
.gd2-table .amt-pos{ color:var(--gd-success); font-weight:700; }
.gd2-table .amt-neg{ color:var(--gd-danger); font-weight:700; }
.gd2-loadmore{ display:block; width:100%; text-align:center; padding:var(--sp-3); margin-top:var(--sp-4); background:var(--gd-surface); border:1px solid var(--gd-border-2); border-radius:999px; min-height:44px; color:var(--gd-text-soft); font-weight:700; }

/* ============================== 電腦版會員側欄（沿用既有 member_link 掛鉤，只重上色） ============================== */
.gd2-sidenav{ background:var(--gd-surface); border:1px solid var(--gd-border); border-radius:var(--gd-radius); padding:var(--sp-3); }
.gd2-sidenav .nav-link{ display:flex; align-items:center; gap:var(--sp-3); padding:12px var(--sp-3); border-radius:var(--gd-radius-sm); color:var(--gd-text-soft); font-weight:700; min-height:44px; border-left:3px solid transparent; }
/* 選中態不用金字配亮底（金字在較亮的底色上實測 <4.5:1）：改白字＋左邊金色標記線，兩者都有安全的對比 */
.gd2-sidenav .nav-item.button_1 .nav-link,.gd2-sidenav .nav-link.is-active{ background:var(--gd-surface-2); color:var(--gd-text); border-left-color:var(--gd-gold); }

/* ============================== 對比與可讀性保險 ============================== */
.gd2 .text-soft{ color:var(--gd-text-soft); }
.gd2 .text-mute{ color:var(--gd-text-mute); }

/* ==========================================================================
   首頁：重上既有 class 的間距／比例，不動 HTML 結構與連結
   （style.css 的規則原封不動留著，這裡用相同/稍高特異度的選擇器覆蓋數值）
   ========================================================================== */
.gd2-body{ overflow-x:hidden; }
h1.gd2-mainh1{ text-align:center!important; font-size:12px!important; font-weight:400!important; color:var(--gd-text-mute)!important; text-shadow:none!important; padding:var(--sp-3) var(--sp-4) 0!important; margin:0!important; line-height:1.5!important; }
@media (max-width:480px){ h1.gd2-mainh1{ font-size:11px!important; } }

/* 區塊上緣間距統一（只設上方，天條38），下方交給下一區塊自己的上間距 */
.gd2-body .live-game-section{ padding-top:var(--sp-8); padding-bottom:0; }
.gd2-body .live-game-body{ padding:var(--sp-6) 0 0; }
.gd2-body .sports_bg{ padding:var(--sp-8) 0 0; }
.gd2-body .fishing_section{ padding-top:var(--sp-8); }
.gd2-body .fishing_section > .container{ padding-bottom:var(--sp-2); }
.gd2-body .slot-section{ padding-top:var(--sp-8); padding-bottom:0; }
.gd2-body .site-section:last-of-type{ padding-bottom:var(--sp-8); }

/* 卡片圖片：容器比例對應各分類素材的實際原生比例（量過 assets/www/images 實際像素），
   不是隨手挑一個比例套全部——量測結果：真人 233x303≈0.77／電子 350x409≈0.86／
   捕魚 350x350=1／體育與賓果 350x291~433x359≈1.2（含 SUPER／鑫寶／36588，這三張跟六合彩／
   賓果同比例，不是橫幅構圖）。容器比例對不上素材比例，object-fit:contain 就會留下大片空白，
   看起來像「圖片比例不對、被縮小」。
   底色不能整個拿掉——電子第二排（Simple Play／Zebra／RSG／ATG）、體育、捕魚這幾類素材
   本身是「透明背景去背插畫」，沒有底色會直接露出區塊背景，角色像貼紙一樣飄在深底上，
   跟真人視訊那種整張滿版照片的卡片不一致。但原本挑的 --gd-surface-3 太亮太藍，
   跟紅色 SUPER SPORT、金色捕魚龍頭這類高飽和插畫放一起會互相搶色、顯得不搭。
   改用更深、更低對比的漸層（surface-2 → bg-2，比頁面主背景亮一點點做出「聚光燈」的層次，
   但不到會搶戲的程度），對任何色調的插畫都比較百搭；完整照片類（真人／電子第一排／體育
   背景照）本來就填滿容器蓋掉底色，不受影響。 */
.gd2-body .live-img{
  aspect-ratio:3/4; border-radius:var(--gd-radius); overflow:hidden;
  background:radial-gradient(circle at 50% 32%, var(--gd-surface-2), var(--gd-bg-2) 80%);
}
.gd2-body .slot-game-img{
  aspect-ratio:6/7; border-radius:var(--gd-radius); overflow:hidden;
  background:radial-gradient(circle at 50% 32%, var(--gd-surface-2), var(--gd-bg-2) 80%);
}
.gd2-body .sport-img{
  aspect-ratio:6/5; border-radius:var(--gd-radius); overflow:hidden;
  background:radial-gradient(circle at 50% 32%, var(--gd-surface-2), var(--gd-bg-2) 80%);
}
.gd2-body .live-img img,
.gd2-body .sport-img img,
.gd2-body .slot-game-img img{ width:100%; height:100%; object-fit:contain; }
.gd2-body .fish-icon{
  width:100%; aspect-ratio:1/1; object-fit:contain; border-radius:var(--gd-radius);
  background:radial-gradient(circle at 50% 32%, var(--gd-surface-2), var(--gd-bg-2) 80%);
}

/* 卡片間距（沿用 Bootstrap 欄位，只補一層 gap 視覺一致） */
.gd2-body .live-game-body > [class*="col-"],
.gd2-body .slot-game-body > [class*="col-"],
.gd2-body .row > [class*="col-"].p-3{ padding-top:var(--sp-4); }

/* 開始遊戲 CTA：固定最小觸控高度、字級不因卡片縮小而跑掉 */
.gd2-body .btn-1,
.gd2-body .btn-2,
.gd2-body .fish-start{ min-height:38px; display:inline-flex; align-items:center; justify-content:center; }

/* 標題區與其後內容的間距（只設上方） */
.gd2-body .live-title,.gd2-body .sport-title,.gd2-body .fishing-title{ margin-top:0; margin-bottom:var(--sp-5); position:static; left:0; right:0; }

/* 不要橫向捲動：owl carousel 與寬圖保底 */
.gd2-body .owl-carousel-wrapper,.gd2-body img{ max-width:100%; }

/* aos.css 把 [data-aos^=fade] 預設成 opacity:0，要等 AOS 的 JS 加上 .aos-animate 才看得到。
   使用者若開了「減少動態效果」，動畫本來就該停用，這裡直接讓內容以最終狀態顯示，
   不讓整區塊卡在透明（gr66 那邊踩過：只有開著這個偏好的人看到整頁空白）。 */
@media (prefers-reduced-motion:reduce){
  .gd2-body [data-aos]{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ==========================================================================
   會員中心功能頁共用：兩欄版面（桌機側欄 + 內容）／手機頂部頁籤
   ========================================================================== */
.gd2-memberwrap{ display:flex; align-items:flex-start; gap:var(--sp-5); }
.gd2-membercontent{ flex:1 1 auto; min-width:0; }

.gd2-membernav--desktop{ flex:0 0 180px; flex-direction:column; gap:6px; position:sticky; top:calc(var(--sp-4) + 64px); background:var(--gd-surface); border:1px solid var(--gd-border); border-radius:var(--gd-radius); padding:var(--sp-3); }
.gd2-membernav--desktop a{ display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:var(--gd-radius-sm); color:var(--gd-text-soft); font-weight:700; font-size:14.5px; min-height:44px; border-left:3px solid transparent; }
.gd2-membernav--desktop a .ic{ font-size:17px; }
.gd2-membernav--desktop a:hover{ background:var(--gd-surface-2); }
.gd2-membernav--desktop a.is-active{ background:var(--gd-surface-2); color:var(--gd-text); border-left-color:var(--gd-gold); }

.gd2-membernav--mobile{ display:flex; gap:8px; overflow-x:auto; padding:var(--sp-1) 0 var(--sp-4); margin:0 calc(var(--sp-4) * -1); padding-left:var(--sp-4); padding-right:var(--sp-4); -webkit-overflow-scrolling:touch; }
.gd2-membernav--mobile a{ flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:4px; min-width:64px; padding:10px 6px; border-radius:var(--gd-radius-sm); color:var(--gd-text-soft); font-size:12.5px; font-weight:700; border-bottom:3px solid transparent; }
.gd2-membernav--mobile a .ic{ font-size:20px; }
.gd2-membernav--mobile a.is-active{ color:var(--gd-text); background:var(--gd-surface-2); border-bottom-color:var(--gd-gold); }

@media (max-width:900px){ .gd2-memberwrap{ display:block; } }

/* 功能頁小標題列（取代原本零散的 .title-blue） */
.gd2-fnhead{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp-4); }
.gd2-fnhead h1{ font-size:20px; margin:0; }

/* 紀錄卡（餘額 / 注意事項） */
.gd2-infobox{ background:var(--gd-surface-2); border:1px solid var(--gd-border); border-radius:var(--gd-radius-sm); padding:var(--sp-4); font-size:13.5px; color:var(--gd-text-soft); margin-top:var(--sp-4); }
.gd2-infobox b, .gd2-infobox strong{ color:var(--gd-text); }

/* 五筆先看、其餘載入更多（純前端，不改後端分頁邏輯） */
.gd2-table tbody tr.gd2-more-row{ display:none; }
.gd2-table tbody tr.gd2-more-row.is-shown{ display:table-row; }
