/* ============================================================
   fh6666 /action/ 獨立樣式表（提案 v2 — 跳脫全域 CSS）
   ------------------------------------------------------------
   style.css / member.css / marquee.css / fixmenu.css 一支都不載，
   樣板頁內的 <style> 也整段移除，版面由本檔自己扛。
   保留 Bootstrap 4（.container/.row/.col、d-* 工具類、modal 的 CSS）
   與 swiper（主視覺輪播）。

   色票、字級、按鈕、圓角、間距全部量自 fh6666.net 首頁（天條 54），
   不與站群其他站共用（天條 27）。
   全部掛在 body 之下 —— 沒掛 class 的頁面完全不受影響。
   ============================================================ */

body{
  /* 底色階
     頁面底刻意壓暗、卡片底提亮 —— 原本兩者只差一點點，卡面浮不出來，
     看起來就是「對比不理想」（文字本身量到都在 6.18 以上，不是文字的問題）。 */
      
  
  

  /* 金 */
     
  --g-bar:linear-gradient(92deg,#ffe9a3,#f6c744 46%,#d9a521);
  
      /* 卡片外框：清晰感來自亮金邊，不是把表面提亮 */
     /* 次級卡片外框 */
                  /* 中性分隔線：表格列、選單列 */

  /* 文字 */
    

  /* 間距尺度：單一來源，各處只從這裡取（天條 37） */
        

  --r1:10px; --r2:14px; --r3:20px;
  --hd:72px;      /* 頁首高 */
      /* 手機底部固定列高 */
  --tap:44px;     /* 最小觸控高度 */
}

/* ── 基底 ───────────────────────────────────────────────── */
body{
  margin:0; background:var(--n1); background-image:var(--page);
  background-attachment:fixed; color:var(--t1);
   
  font-family:-apple-system,"Segoe UI","Noto Sans TC","微軟正黑體",sans-serif;
  max-width:100%; overflow-x:clip;
}
body *, body *::before, body *::after{ box-sizing:border-box;}
body img{ max-width:100%; height:auto;}
body a{ color:inherit; text-decoration:none;}
body a:hover{ color:var(--g-hi);}
body ul, body ol{ margin:0; padding:0; list-style:none;}
body h1, body h2, body h3, body h4, body h5, body p{ margin:0;}
body :focus-visible{ outline:2px solid var(--g); outline-offset:2px;}
@media (prefers-reduced-motion:reduce){
  body *{ animation-duration:.001ms!important; transition-duration:.001ms!important;}
}

/* Bootstrap 的 .row 子項預設 min-width:auto，被內容撐開就會橫向溢出 */
body .row > *{ min-width:0;}
body .container{ padding-left:var(--s3); padding-right:var(--s3);}

/* 手機底部固定列會蓋住最後一排內容（天條 34） */


/* 區塊間距只設上方（天條 38） */
body main > section{ }
body main > section:first-child{ margin-top:0;}

/* ── 頁首 ───────────────────────────────────────────────── */
body #header{
  position:sticky; top:0; z-index:60;
  background:#08132a; border-bottom:1px solid var(--line);
}
body #header .navbar-bg > .container{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s3); min-height:var(--hd);
}
body #header .logo{ flex:0 0 auto; line-height:0;}
body #header .logo a{ display:inline-flex; align-items:center; min-height:var(--tap);}
/* 全域 CSS 一停用 LOGO 就變成 0×0（img 沒有任何尺寸來源） */
body #header .logo img{ height:46px; width:auto; max-width:none; display:block;}
@media (max-width:575.98px){
  body #header .logo img{ height:38px;}
}

/* 主選單（電腦版） */
body #navbar > ul{
  display:flex; align-items:center; gap:var(--s4); flex-wrap:nowrap;
}
body #navbar > ul > li{ display:flex; align-items:center;}
/* 樣板拿一個空 li 塞 20px padding 當間隔，改交給 gap */
body #navbar > ul > li:has(> div[style*="padding"]){ display:none;}
body #navbar .nav-link{
  display:inline-flex; align-items:center; min-height:var(--tap);
  color:var(--t2); font-size:15px; font-weight:500; white-space:nowrap;
}
body #navbar .nav-link:hover{ color:var(--g-hi);}
body #navbar .nav-link.nav-lobby{ color:var(--g);}
body .mobile-nav-toggle{ display:none;}

/* 登入／註冊／登出／會員：全站同一種按鈕語彙（天條 55） */
body .btn-login, body .btn-register{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:var(--tap); padding:0 var(--s3);
  border-radius:999px; font-size:14.5px; font-weight:700; white-space:nowrap;
  background:transparent; border:1px solid var(--g); color:var(--g);
}
body .btn-register{
  background:var(--g-bar); border-color:transparent; color:var(--g-ink);
}
body .btn-login:hover{ background:var(--g-soft); color:var(--g-hi);}
body .btn-register:hover{ filter:brightness(1.06); color:var(--g-ink);}
body .btn-icon{ width:18px; height:18px; object-fit:contain;}
body .btn-sm{  }

/* 頁首右側（手機版的登入/註冊或登出/會員） */
body #header .navbar-bg > .container > div:last-child{
  display:flex; align-items:center; gap:var(--s1);
}

/* 頁首會員摘要（電腦版）：帳號小、餘額大，層級拉開（天條 42） */
body .u-login{
  display:flex; align-items:center; gap:var(--s2); flex:0 0 auto;
}
body .u-login .u-info{
  display:flex; flex-direction:column; gap:1px;
  padding:6px var(--s2); border-radius:var(--r1);
  background:var(--n2); border:1px solid var(--line);
}
body .u-login .uuid{
  display:flex; align-items:center; gap:5px; font-size:13px; color:var(--t3);
}
body .u-login .uuid img{ width:14px; height:14px;}
body .u-login .uucash{ display:flex; align-items:center; gap:5px;}
body .u-login .uucash img{ width:18px; height:18px;}
body .u-login .WalletTotal{
  font-size:19px; font-weight:800; color:var(--g-hi); line-height:1.2;
  font-variant-numeric:tabular-nums;
}
body .u-login .link{ display:flex; flex-direction:row; gap:var(--s1); flex:0 0 auto;}

/* 錢包動作鍵：頁首與大廳共用同一種樣式 */
body .Wbtn{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; min-width:62px; min-height:46px; padding:5px var(--s2);
   font-size:12.5px; font-weight:700;
  background:var(--n3); border:1px solid var(--line2); color:var(--t1);
}
body .Wbtn img{ width:20px; height:20px; object-fit:contain;}
body .Wbtn div{ line-height:1.2;}
body .Wbtn:hover{ border-color:var(--line); color:var(--t1);}
body .Wbtn.btn-dpst{
  background:var(--g-bar); border-color:transparent; color:var(--g-ink);
}
body .Wbtn.btn-dpst:hover{ filter:brightness(1.06); color:var(--g-ink);}

/* ── 主視覺（swiper）─────────────────────────────────────── */
body .testimonials{ padding:0;}
body .testimonials .container-fluid{ padding:0;}
body .testimonials .swiper-slide{ height:auto;}
body .testimonials .testimonial-item{
  position:relative; aspect-ratio:16/5; overflow:hidden; margin:0;
}
body .testimonials .testimonial-item img{
  width:100%; height:100%; object-fit:cover; object-position:center; display:block;
}
/* 主視覺圖本身已含文字，樣板再疊一層標題會擋住畫面 */
body .testimonials .testimonial-title{ display:none;}
@media (max-width:767.98px){
  /* 這條原本把主視覺框成 2:1，但輪播圖是 3.2:1 —— 圖只佔 121px，
   框子卻有 195px，底下就多出 73px 空白。改成跟圖同比例。 */
body .testimonials .testimonial-item{ aspect-ratio:16/5;}
}
body .testimonials .swiper-pagination{
  position:absolute; bottom:10px; left:0; right:0;
  display:flex; align-items:center; justify-content:center; gap:6px; z-index:3;
}
body .testimonials .swiper-pagination-bullet{
  width:16px; height:3px; border-radius:2px; margin:0;
  background:rgba(255,255,255,.4); opacity:1;
}
body .testimonials .swiper-pagination-bullet-active{ background:var(--g); width:26px;}

/* ── 跑馬燈 ─────────────────────────────────────────────── */
body .mq-section{ margin-top:var(--s3);}
body .mq-section .top-bar{ padding:0;}
body .mq-section .marquee-wrapper{
  display:flex; align-items:center; overflow:hidden;
  min-height:46px; padding:0 var(--s4);
  background:var(--n2); border:1px solid var(--line2); border-radius:999px;
}
body .mq-section .marquee-content{
  display:flex; align-items:center; gap:var(--s6);
  white-space:nowrap; animation:fh-mq 34s linear infinite;
}
body .mq-section .marquee-content li{ flex:0 0 auto;}
body .mq-section .marquee-content li a{
  display:flex; align-items:center; min-height:46px;
  color:var(--t2); font-size:16px;
}
body .mq-section .marquee-wrapper:hover .marquee-content{ animation-play-state:paused;}
@keyframes fh-mq{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (prefers-reduced-motion:reduce){
  body .mq-section .marquee-content{ animation:none; overflow:hidden;}
}

/* ── 登入後錢包列（電腦版也要看得見，天條 55 第一條）────────── */
body section.Wbody{ }
body .Wbody_box{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r2);
  padding:var(--s3);
}
body .Wbody .userwallet{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s3); flex-wrap:wrap;
}
body .Wbody .userwallet.d-none{ display:none;}
body .u-cone{ display:flex; flex-direction:column; gap:1px; min-width:0;}
body .u-cone > div{ display:flex; align-items:center; gap:6px;}
body .u-cone > div:first-child span{ font-size:14px; color:var(--t3);}
body .u-cone img{ width:22px; height:22px; object-fit:contain;}
body .u-cone .WalletTotal{
  font-size:28px; font-weight:800; color:var(--g-hi); line-height:1.15;
  font-variant-numeric:tabular-nums;
}
/* 三顆鍵原本紫／橘／桃紅各長一個樣，收斂成一組（天條 55） */
body .u-conWbtn{
  display:flex!important; flex-wrap:nowrap!important;
  gap:var(--s1); justify-content:flex-end!important; width:auto!important;
}
body .u-conWbtn .Wbtn.btn-luckycash{
  flex:0 0 auto!important; width:auto!important; margin-top:0!important;
}
@media (max-width:575.98px){
  body .Wbody .userwallet{ flex-direction:column; align-items:stretch;}
  body .u-conWbtn{
    display:grid!important; grid-template-columns:repeat(3,1fr); justify-content:stretch!important;
  }
  body .u-conWbtn .Wbtn{ min-width:0;}
}

/* ── 分類軌 ─────────────────────────────────────────────── */
body .GameNav{ margin-top:var(--s4);}
body .GameNav ul.nav-pills2{
  display:grid; grid-template-columns:repeat(5,1fr); gap:var(--s1);
}
body .GameNav .nav-item{ display:block; max-width:none; padding:0; flex:none;}
body .GameNav .nav-link{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  min-height:70px; padding:var(--s1) 2px; border-radius:12px;
  background:var(--n2); border:1px solid var(--line2);
  color:var(--t2); font-size:14px; font-weight:600; white-space:nowrap;
}
body .GameNav .nav-link .img{ line-height:0;}
body .GameNav .nav-link .img img{ width:28px; height:28px; object-fit:contain;}
body .GameNav .nav-link.active{
  background:var(--g-bar); border-color:transparent; color:var(--g-ink); font-weight:800;
}
@media (max-width:389.98px){
  body .GameNav .nav-link{ font-size:12.5px;}
}

/* ── 遊戲卡 ─────────────────────────────────────────────── */
body .game-tab-content{ margin-top:var(--s4);}
body .tab-content > .tab-pane{ display:none;}
body .tab-content > .tab-pane.active{ display:block;}
body .BrandGame .container{ display:block; max-width:1140px;}
/* 裝飾用大圖：PHP 端是操作介面不是行銷頁（天條 53），
   它會佔掉電腦版右半版面，把遊戲入口擠成左邊一小塊 */
body .BrandGame .md_img{ }
body .BrandGame .md_games{ width:100%;}

/* 網格：欄數跟著容器走，不會固定欄數而留落單尾巴（天條 55） */
body .games{
  display:grid; gap:var(--s2);
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
@media (min-width:768px){
  body .games{ gap:var(--s3); grid-template-columns:repeat(auto-fit,minmax(185px,1fr));}
}
body .games .gamesBox{ position:relative;}
body .games .gamesBox > a{
  position:relative; display:flex; flex-direction:column; height:100%;
  overflow:hidden; border-radius:var(--r2);
  background:var(--card); border:1px solid var(--line);
  
}
body .games .gamesBox > a:hover{
   transform:translateY(-2px);
  transition:transform .18s ease, border-color .18s ease;
}
/* 卡面圖原本只給手機看（d-block d-lg-none），電腦版整片空 —— 兩邊都用 */
body .games .gamesBox--image{
   position:relative; order:1;
  aspect-ratio:1/1; overflow:hidden;
}
body .games .gamesBox--image img{
  width:100%; height:100%; object-fit:cover; object-position:50% 15%;
}
body .games .gamesBox--image::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom,rgba(4,16,31,.72) 0%,rgba(4,16,31,.10) 38%,transparent 100%);
}
/* 廠商 logo 不疊在卡面上：白色線稿壓在模特兒臉上很難看，
   而且下方標籤列已經寫了廠商名（DG真人／MT真人…），等於同一件事講兩次。 */
body .games .gamesBox--logo{ display:none;}
/* 名稱列：實心底，對比不靠圖（天條 41） */
body .games .BrandName{
  order:2; position:relative; z-index:3;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  min-height:68px; padding:10px var(--s1);
  background:linear-gradient(180deg,rgba(12,37,71,.92),var(--n0));
  border-top:1px solid rgba(246,199,68,.18);
}
body .games .game-name{
  order:2; font-size:15.5px; font-weight:800; color:var(--t1);
  text-align:center; line-height:1.3;
}
body .games .gamesBox--button{
  order:1; width:max-content; padding:1px 10px; 
  font-size:11.5px; font-weight:700; line-height:1.7; white-space:nowrap;
  background:var(--g-soft); border:1px solid rgba(246,199,68,.5); color:var(--g-hi);
}
body .games .gamesBox--button.gamesBox--button-none{ display:none;}
/* 落單尾巴：奇數張時最後一張跨滿整列，改成橫幅卡（天條 55） */
@media (max-width:767.98px){
  body .games .gamesBox:nth-child(odd):last-child{ grid-column:1 / -1;}
  body .games .gamesBox:nth-child(odd):last-child > a{ flex-direction:row;}
  body .games .gamesBox:nth-child(odd):last-child .gamesBox--image{
     
  }
  body .games .gamesBox:nth-child(odd):last-child .BrandName{
    flex:1; min-height:0; border-top:0; border-left:1px solid rgba(246,199,68,.18);
  }
}

/* 純為 SEO 而存在的行銷段落：站台掛 noindex，留著沒有作用（天條 53） */
body section.dm, body section.index-service{ }

/* ── 手機底部固定列 ─────────────────────────────────────── */
body .ft-navbar{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  background:#08132a; 
  padding-bottom:env(safe-area-inset-bottom);
}
body .ft-navbar .ft-nav{
  display:flex; align-items:stretch; margin:0;
}
body .ft-navbar .ft-nav > li{ flex:1 1 0; min-width:0;}
body .ft-navbar .ft-link{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  min-height:var(--bnav); padding:6px 2px;
  color:var(--t2); font-size:12px; font-weight:600; text-align:center;
}
body .ft-navbar .ft-link img{ width:24px; height:24px; object-fit:contain;}
body .ft-navbar .ft-link:hover{ color:var(--g-hi);}

/* ── 側滑選單（mobNav overlay）──────────────────────────── */
body .overlay{
  position:fixed; inset:0; z-index:90; width:0; overflow:hidden;
  background:rgba(4,16,31,.96); transition:width .25s ease;
}

body .overlay-content{
  display:flex; flex-direction:column; gap:var(--s2);
  padding:var(--s7) var(--s4) var(--s4);
}
body .overlay-btn{
  display:flex; align-items:center; gap:var(--s2);
  min-height:var(--tap); padding:0 var(--s3); border-radius:var(--r1);
  background:var(--n2); border:1px solid var(--line2); color:var(--t1);
  font-size:16px; font-weight:600;
}
body .overlay-btn img{ width:22px; height:22px; object-fit:contain;}

/* ── 頁尾（單行，不做多欄，天條 40）──────────────────────── */
body footer#footer{ margin-top:var(--s7); background:var(--n0);}






body footer h5{ font-size:15px; font-weight:600; color:var(--t3); margin:0;}
body footer ul{ display:flex; flex-wrap:wrap; gap:var(--s3);}
body footer li a{
  display:inline-flex; align-items:center; min-height:32px;
  color:var(--t2); font-size:15px;
}

body footer .footer-bottom{
  border-top:1px solid var(--line2); padding:var(--s3) 0;
  text-align:center;
}
body footer .copyright{ color:var(--t3); font-size:16px;}
body .back-to-top{
  position:fixed; right:16px; bottom:calc(var(--bnav) + 16px); z-index:65;
  width:var(--tap); height:var(--tap); border-radius:50%;
  background:var(--n3); border:1px solid var(--line); color:var(--g);
}
@media (min-width:992px){
  body .back-to-top{ bottom:24px;}
}

/* ── 會員中心 ───────────────────────────────────────────── */
body section.member{ padding:var(--s4) 0;}
body section.member .container{ max-width:1140px;}
/* 手機：摘要 → 快捷選單 → 其餘內容。
   六宮格快捷是這頁最常按的東西，擺在餘額正下方，不必捲到底才找得到。 */
body .member-menu_web{ display:flex; flex-direction:column; }
@media (max-width:991.98px){
  body .member-menu_web .fh-top{ order:1;}
  body .member-menu_web .memberMenu{ order:2;}
  body .member-menu_web .fh-rest{ order:3;}
  body .member-menu_web .mobUserMenu{ order:4;}
}
/* 電腦：左選單 + 右內容兩欄；標題與摘要跨到右欄第一列 */
@media (min-width:992px){
  body .member-menu_web{
    display:grid; grid-template-columns:300px minmax(0,1fr);
    grid-template-areas:"menu top" "menu rest";
    gap:var(--s3) var(--s4); align-items:start;
  }
  body .member-menu_web .memberMenu{ grid-area:menu;}
  body .member-menu_web .fh-top{ grid-area:top;}
  body .member-menu_web .fh-rest{ grid-area:rest;}
}
body .fh-top, body .fh-rest{ min-width:0;}
body .memberMenu{
  background:var(--n2); border:1px solid var(--line2); border-radius:var(--r2);
  
}
body .memberMenu .user-lv{ margin-bottom:var(--s3);}
body .memberMenu p.user-text{
  display:block; padding:6px var(--s3); border-radius:999px;
  background:var(--g-soft); border:1px solid var(--line);
  color:var(--g-hi); font-size:16px; font-weight:700;
}

body .memberMenu .icon-link ul{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s1);
}
body .memberMenu .icon-link li{ margin:0;}
body .memberMenu .icon-link li a{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
   padding:var(--s1) 4px; border-radius:12px;
   border:1px solid var(--line2);
  color:var(--t1); font-size:13px; font-weight:600; text-align:center;
}
body .memberMenu .icon-link li a:hover{ border-color:var(--line); color:var(--g-hi);}
/* 圖示是黑色線稿，深底看不見 —— 轉成品牌金 */
body .memberMenu .icon-link li a img, body .memberMenu .menu-link li a img{
  filter:brightness(0) saturate(100%) invert(84%) sepia(28%)
         saturate(560%) hue-rotate(348deg) brightness(101%) contrast(93%);
}
body .memberMenu .icon-link li a img{   object-fit:contain;}
body .memberMenu .menu-link{
  margin-top:var(--s3); 
}
body .memberMenu .menu-link li{ border-bottom:1px solid var(--line3);}
body .memberMenu .menu-link li a{
  display:flex; align-items:center; gap:var(--s2);
  min-height:48px; color:var(--t1); font-size:15px; font-weight:600;
}
body .memberMenu .menu-link li a img{ width:22px; height:22px; object-fit:contain;}
body .memberMenu .menu-link li .info{
  color:var(--t3); font-size:16px; 
}
body .mobUserMenu{ display:none;}

/* 會員中心右欄（提案新增的區塊）*/
body .fh-mtitle{ font-size:22px; font-weight:800; margin-bottom:var(--s3);}
body .fh-h2{ font-size:17px; font-weight:700; margin:var(--s4) 0 var(--s2);}
body .fh-sum{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s3); flex-wrap:wrap;
    border-radius:var(--r2);
  
}
body .fh-sum-main{ display:flex; flex-direction:column; gap:1px; min-width:0;}
body .fh-sum-label{ font-size:13.5px; color:var(--t3);}
body .fh-sum-cash{
  font-size:34px; font-weight:800; color:var(--g-hi); line-height:1.1;
  font-variant-numeric:tabular-nums;
}

body .fh-sum-act{ display:flex; gap:var(--s1); flex-wrap:wrap;}
body .fh-btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--tap); padding:0 var(--s4); border-radius:999px;
  font-size:14.5px; font-weight:700;
  background:var(--n3); border:1px solid var(--line2); color:var(--t1);
}
body .fh-btn-gold{ background:var(--g-bar); border-color:transparent; color:var(--g-ink);}
body .fh-btn-gold:hover{ filter:brightness(1.06); color:var(--g-ink);}






/* ── 表格：寬內容自己包水平捲動容器（天條 34）──────────────── */
body .table-responsive{ overflow-x:auto; -webkit-overflow-scrolling:touch;}
body table.table{
  width:100%; min-width:460px; border-collapse:collapse;
  background:var(--n2); border-radius:12px; overflow:hidden;
}
body table.table th, body table.table td{
  padding:var(--s2) var(--s3); font-size:16px; text-align:left;
  border-bottom:1px solid var(--line3); white-space:nowrap;
}
body table.table th{
  color:var(--t3); font-weight:600; 
}
body table.table td{
  color:var(--t1); font-variant-numeric:tabular-nums;
}


/* ── 表單與登入視窗 ─────────────────────────────────────── */
body .authModal{ display:none;}
body .authModal .modal-box{
  position:relative; width:min(460px,calc(100vw - 24px));
  margin:6vh auto; border-radius:var(--r3); overflow:hidden;
  background:var(--n2); border:1px solid var(--line);
  box-shadow:0 24px 60px rgba(0,0,0,.55);
}
body .authModal .close_m{
  position:absolute; top:8px; right:14px; z-index:3;
  font-size:26px; line-height:1; color:var(--t3); cursor:pointer;
}
body .authModal .tab-header{ display:flex;}
body .authModal .tab-btn{
  flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  min-height:52px; border:0; background:var(--n3);
  color:var(--t2); font-size:16px; font-weight:700; cursor:pointer;
}
body .authModal .tab-btn.active{ background:var(--g-bar); color:var(--g-ink);}
body .authModal .tab-btn img{ width:20px; height:20px; object-fit:contain;}
body .authModal form{ display:flex; flex-direction:column; gap:var(--s2); padding:var(--s4);}
body .form-control{
  width:100%; min-height:var(--tap); padding:0 var(--s3);
  border-radius:var(--r1); background:var(--n3);
  border:1px solid var(--line2); color:var(--t1); font-size:16px;
}
body .form-control::placeholder{ color:var(--t3);}
body .form-control:focus{ border-color:var(--g); outline:none;}
body .codeimg{ height:44px; width:auto; border-radius:var(--r1); cursor:pointer;}
body button.login, body .authModal button[type="submit"]{
  min-height:48px; border:0; border-radius:999px;
  background:var(--g-bar); color:var(--g-ink); font-size:16.5px; font-weight:800; cursor:pointer;
}
body .alert{
    
  background:rgba(255,120,110,.12); border:1px solid rgba(255,120,110,.4); color:#ff9a90;
}

/* 內文連結不要把按鈕壓扁 */
body .content a:not(.btn):not(.fh-btn){ display:inline;}

/* ── Bootstrap 工具類的提權 ─────────────────────────────────
   剝掉站台 CSS 之後，顯示與否改由 Bootstrap 的 d-* 決定，
   而那些規則帶 !important（.d-lg-none{display:none!important}），
   一般宣告蓋不過去。以下是需要反過來決定的幾處。 */

/* 卡面圖原本只給手機（d-block d-lg-none），電腦版整片空 —— 兩邊都要 */
body .games .gamesBox--image{ display:block!important;}
/* 登入後錢包列原本電腦版被藏起來（天條 55 第一條） */
body section.Wbody{ display:block!important;}
/* 裝飾大圖與兩段純 SEO 文案（天條 53） */
body .BrandGame .md_img{ display:none!important;}
body section.dm, body section.index-service{ display:none!important;}
/* 分類區塊的大標與敘述（LIVE CASINO / SLOTS / Sports Betting / LOTTEERY 各一段）
   是純為 SEO 寫的。站台掛 noindex，這裡不做 SEO，整組拿掉（天條 53）。
   要玩什麼靠上方的分類軌就看得出來，不需要再用一段文案重講一次。 */
body .BrandGame .info-body{ display:none!important;}
/* 會員選單裡的手機／電腦分流項目維持 Bootstrap 的判斷，不覆蓋 */

/* 「帳戶管理」那一項有兩個 <a>：第二個只包手機版的說明文字，
   電腦版 Bootstrap 把 .info 藏起來，剩一個空連結佔著高度 */
@media (min-width:768px){
  body .memberMenu .menu-link li > a:has(> .info.d-md-none){ display:none;}
}

/* ── 會員中心的表面分離 ─────────────────────────────────────
   Owner 回報「文字跟背景對比不理想」。實測文字對比最低 6.18:1，
   문제 不在文字，在**卡片與底色幾乎同一個明度**，卡面浮不出來。
   做法照 dg22 那次的結論：清晰感來自亮金邊框 + 陰影，不是把表面一直提亮。 */
body .memberMenu, body .memberMenu .icon-link li a{
  border:1px solid var(--line2);
  box-shadow:0 6px 18px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.05);
}
body .fh-sum{
  border:1px solid var(--line);
  box-shadow:0 10px 26px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.07);
}
body .memberMenu .icon-link li a:hover{ border-color:var(--line);}

/* 表頭與內文列拉開一階，長表格才掃得動 */
body table.table th{ background:#0a2242;}


/* 標籤字（可用餘額／表頭）原本 6.18 是全頁最低，連同字重一起補 */
body .fh-sum-label, body table.table th{ color:var(--t3); font-weight:600;}

/* 手機版會員選單只剩「帳戶管理」一項可見（其餘是 d-none d-md-block，
   手機靠上方六宮格快捷），最後一條分隔線會孤零零留在卡底 */
body .memberMenu .menu-link li:last-child, body .memberMenu .menu-link li:has(+ li[class*="d-none"]:last-child){
  border-bottom:0;
}
body .memberMenu .menu-link li .info{ padding-left:0; margin-top:2px;}

/* 「紅利提領」快捷卡只在手機出現。
   桌機的左側選單本來就有這一項，再放一張卡是重複；
   但手機版選單裡的紅利提領是 d-none d-md-block（桌機限定），
   不留這張卡，手機在會員中心就完全沒有紅利提領的入口。 */


/* ============================================================
   會員區內頁：Bootstrap 元件的品牌化
   剝掉站台 CSS 之後，按鈕、警示、表格全部退回 Bootstrap 預設
   （btn-warning 的 #ffc107 亮黃、alert-danger 的淺粉底），
   在深藍底上非常突兀。這裡一次接完。
   ============================================================ */

/* ── 按鈕：全站同一種語彙（天條 55）───────────────────────── */
body .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:var(--tap); padding:0 var(--s4);
  border-radius:999px; border:1px solid var(--line3);
  background:var(--n3); color:var(--t1);
  font-size:15px; font-weight:700; line-height:1.2;
  box-shadow:none; text-shadow:none;
}
body .btn:hover{ background:var(--n4); color:var(--t1); border-color:var(--line);}
body .btn:focus{ box-shadow:none;}
/* 主要動作：金色實心 */
body .btn-warning, body .btn-primary{
  background:var(--g-bar); border-color:transparent; color:var(--g-ink);
}
body .btn-warning:hover, body .btn-primary:hover{ filter:brightness(1.06); color:var(--g-ink);}
/* 次要／破壞性動作：外框 */
body .btn-secondary{ background:var(--n3); color:var(--t1);}
body .btn-danger{
  background:transparent; border-color:#e2645c; color:#ff9a90;
}
body .btn-danger:hover{ background:rgba(226,100,92,.14); color:#ff9a90;}
body .btn-sm{  padding:0 var(--s3); font-size:14px;}
body .btn.w-100{ width:100%; }

/* ── 警示訊息 ───────────────────────────────────────────── */
body .alert{
  border-radius:var(--r1); font-size:15px; padding:var(--s2) var(--s3);
}
body .alert-danger{
  background:rgba(226,100,92,.12); border:1px solid rgba(226,100,92,.42); color:#ff9a90;
}



/* ── 表單 ───────────────────────────────────────────────── */
body label, body .col-form-label{ color:var(--t2); font-size:15px; font-weight:600;}
body select, body input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]){
  width:100%; min-height:var(--tap); padding:0 var(--s3);
  border-radius:var(--r1); background:var(--n3);
  border:1px solid var(--line3); color:var(--t1); font-size:16px;
}

body select{ appearance:none; padding-right:var(--s5);
  background-image:linear-gradient(45deg,transparent 50%,var(--g) 50%),
                   linear-gradient(135deg,var(--g) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat; }
body input::placeholder{ color:var(--t3);}
body input:focus, body select:focus{ border-color:var(--g); outline:none;}
body .input-group{   align-items:stretch;}

body .form-group{ margin-bottom:var(--s3);}
body input[type=file]{
  width:100%; padding:var(--s2); border-radius:var(--r1);
  background:var(--n3); border:1px dashed var(--line3); color:var(--t2); font-size:15px;
}

/* ── 標題與說明 ─────────────────────────────────────────── */
body .member-page h1, body .member-page h4{ color:var(--t1); font-weight:700;}


body .text-danger{ color:#ff9a90!important;}
body .text-warning{ color:var(--g-hi)!important;}

/* ── 表格：沒被包進 table-responsive 的也要能水平捲 ──────────
   （這是走獨立 CSS 才會暴露出來的問題：舊 CSS 有自己的補丁） */
body table{
  width:100%; border-collapse:collapse; background:var(--n2);
  border-radius:12px; overflow:hidden;
}
body table th, body table td{
  padding:var(--s2) var(--s3); font-size:16px; text-align:left;
  border-bottom:1px solid var(--line3); white-space:nowrap; color:var(--t1);
}
body table th{ color:var(--t3); font-weight:600; background:#0a2242;}
body table tbody tr:nth-child(even) td{ background:rgba(255,255,255,.028);}
body table tr:last-child td{ border-bottom:0;}
/* CSS-only 的捲動：欄寬計算不會壞（見記憶 action-css-strip-color-layering） */
@media (max-width:767.98px){
  body table:not(.no-scroll){  overflow-x:auto; -webkit-overflow-scrolling:touch;}
  body table:not(.no-scroll) > thead, body table:not(.no-scroll) > tbody{   }
}

/* ── 分頁 ───────────────────────────────────────────────── */
body .pagination{ display:flex; flex-wrap:wrap; gap:6px; margin-top:var(--s3);}
body .pagination a, body .pagination li > a{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:var(--tap); min-height:var(--tap); padding:0 var(--s2);
  border-radius:var(--r1); background:var(--n3);
  border:1px solid var(--line3); color:var(--t1); font-size:15px;
}


/* ── 分頁籤（nav-tabs / nav-pills）────────────────────────── */
body .nav-tabs, body .member .nav{ display:flex; flex-wrap:wrap; gap:var(--s1); border:0;}
body .nav-tabs .nav-link, body .member .nav .nav-link{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--tap); padding:0 var(--s3); border-radius:999px; border:1px solid var(--line3);
  background:var(--n3); color:var(--t2); font-size:15px; font-weight:600;
}
body .nav-tabs .nav-link.active{
  background:var(--g-bar); border-color:transparent; color:var(--g-ink);
}

/* ── 內頁外殼：讓每一頁都有一致的容器與留白 ─────────────────── */
body .member-page, body .member .box{
  background:var(--n2); border:1px solid var(--line2); border-radius:var(--r2);
   margin-top:var(--s3);
  box-shadow:0 6px 18px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.05);
}
@media (max-width:575.98px){
  body .member-page, body .member .box{ padding:var(--s3);}
}

/* ── 兩處會撐破視窗寬度的東西（走獨立 CSS 才暴露出來）──────────
   1. .ft-nav 同時帶 .row，Bootstrap 的負 margin 加上 8 個 .col 的內距，
      把固定列撐成 477px。它是 position:fixed，不受 body 的 overflow-x:clip 管，
      會直接把整份文件撐寬。
   2. .table-bordered 在窄螢幕沒有被限住寬度。 */
body .ft-navbar{ max-width:100%; overflow-x:hidden;}
body .ft-navbar .ft-nav.row{ margin-left:0; margin-right:0; width:100%;}
body .ft-navbar .ft-nav > li{ padding-left:0; padding-right:0;}

body table{ max-width:100%;}
@media (max-width:767.98px){
  body table:not(.no-scroll){  max-width:100%;}
}

/* 表格的 min-width 若還被別處寫死，會壓過 max-width:100% 直接撐破視窗 */
@media (max-width:767.98px){
  body table:not(.no-scroll){ }
  body table:not(.no-scroll) > thead, body table:not(.no-scroll) > tbody{ }
}

/* ============================================================
   儲值頁（deposit2）
   這頁原本自帶一大段頁內 <style>，走獨立 CSS 之後整頁版面要重接。
   注意：.payicon 是「整張付款卡」的 class，不是圖示
   （圖示容器是 .icon-box / .icon-wrapper）——當成圖示設 44×44
   會把整張卡壓扁、卡內文字直排疊在一起。
   ============================================================ */
body .member-top{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s2); margin:0 0 var(--s3);
}
body .member-top > [class*="col-"]{ flex:0 0 auto; max-width:none; padding:0; width:auto;}

body .m-taggle-bar{ display:flex; align-items:center; gap:6px;}
body .m-taggle-bar a{
  display:inline-flex; align-items:center; gap:6px;
  min-height:var(--tap); padding:0 var(--s3); border-radius:999px;
  background:var(--n3); border:1px solid var(--line3);
  color:var(--t2); font-size:15px; font-weight:600;
}
body .m-taggle-bar img{ width:18px; height:18px; object-fit:contain;}

body .deposit-container{ display:flex; flex-direction:column; gap:var(--s3);}
body .section-label{
  display:block; font-size:13px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--t3); margin-bottom:var(--s1);
}

/* ── 付款方式（直式清單）───────────────────────────────── */
body .payment-list{ display:flex; flex-direction:column; gap:var(--s1);}
body .payment-item{
  display:flex; align-items:center; gap:var(--s3);
  min-height:72px; padding:var(--s2) var(--s3);
  border-radius:var(--r2); cursor:pointer;
  background:var(--n3); border:1px solid var(--line3);
}
body .payment-item:hover{ border-color:var(--line);}
body .payment-item.active{
  background:var(--g-soft); border-color:var(--g);
  box-shadow:inset 0 0 0 1px rgba(246,199,68,.25);
}
body .payment-item .icon-box{
  flex:0 0 auto; width:44px; height:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:var(--n4); color:var(--g-hi); font-size:20px;
}
body .payment-item .item-info{ flex:1; min-width:0;}
body .item-name{ font-size:16px; font-weight:700; color:var(--t1);}
body .item-desc{ font-size:14px; color:var(--t3); line-height:1.5;}
body .select-indicator{
  flex:0 0 auto; width:22px; height:22px; border-radius:50%;
  border:2px solid var(--line3);
}
body .payment-item.active .select-indicator{
  border-color:var(--g); background:radial-gradient(circle,var(--g) 45%,transparent 46%);
}

/* ── 子選項（信用卡／Apple Pay／LINE Pay…）───────────────── */
/* JS 用 inline style 把它設成 display:flex，樣式表寫 grid 一定被蓋掉 ——
   排版要走 flex-direction，不能靠 grid-template-columns。
   預設 none：還沒選主管道之前不該看到子選項。 */
body .sub-payment-group{
  display:none;
  flex-flow:column nowrap;
  gap:var(--s1); margin-top:var(--s1); padding-left:var(--s5);
}
@media (min-width:768px){
  body .sub-payment-group{ flex-flow:row wrap; }
  body .sub-payment-group > .sub-payment-item{ flex:1 1 200px; }
}
body .sub-payment-item{
  display:flex; align-items:center; gap:var(--s2);
  position:relative;
  min-height:52px; padding:0 46px 0 var(--s2); border-radius:var(--r1); cursor:pointer;
  background:var(--n2); border:1px solid var(--line3);
  font-size:15px; color:var(--t1);
  transition:border-color .15s, background-color .15s;
}
/* 右邊的選取圓點：跟上面那排主要付款卡的 .select-indicator 同一套語彙。
   子選項的樣板裡沒有那個 div，所以用 ::after 畫。 */
body .sub-payment-item::after{
  content:""; position:absolute; right:14px; top:50%; transform:translateY(-50%);
  width:20px; height:20px; border-radius:50%;
  border:2px solid var(--line3);
}
body .sub-payment-item:hover{ border-color:var(--line2); }
body .sub-payment-item:active{ background:var(--n3); }
/* 選中：金框、淺金底、圓點填實 —— 沒有這條的話點了畫面完全沒變化 */
body .sub-payment-item.active{
  background:var(--g-soft); border-color:var(--g);
  box-shadow:inset 0 0 0 1px rgba(246,199,68,.25);
}
body .sub-payment-item.active::after{
  border-color:var(--g);
  background:radial-gradient(circle,var(--g) 45%,transparent 46%);
}

/* 品牌小徽章：原本是滿版色條，收成固定尺寸的圓角方塊 */
body .brand-icon{
  flex:0 0 auto; width:38px; height:26px; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; color:#fff; overflow:hidden;
}


/* ── 金額 ───────────────────────────────────────────────── */
body .amount-card{
  background:var(--n3); border:1px solid var(--line3);
  border-radius:var(--r2); padding:var(--s3);
}
body .amount-input-group{ display:flex; align-items:center; gap:var(--s2);}
body .currency-symbol{
  flex:0 0 auto; font-size:22px; font-weight:800; color:var(--g-hi);
}
body .amount-input{
  flex:1; min-width:0; min-height:52px; font-size:20px; font-weight:700;
}
body .quick-grid{
  display:grid; gap:var(--s1); margin-top:var(--s2);
  grid-template-columns:repeat(auto-fit,minmax(88px,1fr));
}
body .quick-btn{
  min-height:var(--tap); padding:0 var(--s2); border-radius:var(--r1);
  background:var(--n2); border:1px solid var(--line3); color:var(--t1);
  font-size:15px; font-weight:700; cursor:pointer;
  font-variant-numeric:tabular-nums;
}
body .quick-btn:hover{ background:var(--g-soft); border-color:var(--g); color:var(--g-hi);}

/* ── 超商／通路格線 ─────────────────────────────────────── */







/* 說明條列 */




/* 沒有掛 .btn 的裸 button / submit（例如儲值頁的「取得代碼」）
   剝掉站台 CSS 之後會退回瀏覽器預設的白底小方塊 */
body button:not(.btn):not(.submit-btn):not(.quick-btn):not(.tab-btn):not(.close):not(.close_m){
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  width:auto; min-height:var(--tap); padding:0 var(--s4);
  border-radius:999px; border:1px solid transparent;
  background:var(--g-bar); color:var(--g-ink);
  font-size:15.5px; font-weight:700; cursor:pointer;
}
body button:not(.btn):not(.submit-btn):not(.quick-btn):not(.tab-btn):not(.close):not(.close_m):hover{ filter:brightness(1.06);}

/* 第三方綁定（Google / LINE）：原本靠站台 CSS 限制尺寸，
   剝掉之後 logo 用原圖尺寸炸開，佔掉半個畫面 */
body .else-btn{
  display:inline-flex; align-items:center; gap:var(--s2);
  min-height:var(--tap); padding:0 var(--s3); margin:var(--s1) 0;
  border-radius:999px; background:var(--n3); border:1px solid var(--line3);
  color:var(--t1); font-size:15px; font-weight:600;
}
body .else-btn img{ width:24px; height:24px; object-fit:contain; flex:0 0 auto;}

/* 會員內頁的說明條列補上項目符號（原本靠站台 CSS） */
body .member-page ul:not(.nav):not(.pagination):not(.menu-link):not(.icon-link ul){
  display:flex; flex-direction:column; gap:4px;
}
body .member-page ul:not(.nav):not(.pagination):not(.menu-link) > li{
  font-size:15px; color:var(--t2); line-height:1.6;
}
/* 檔案選擇器：原生樣式在深底上很突兀 */
body input[type=file]::file-selector-button{
  margin-right:var(--s2); padding:6px var(--s3);
  border:1px solid var(--line3); border-radius:999px;
  background:var(--n2); color:var(--t1); font-size:14px; font-weight:600; cursor:pointer;
}

/* ── 返回鍵 ─────────────────────────────────────────────
   樣板用的是 reply_black.png.webp（黑色線稿），放在深底上等於看不見，
   轉成品牌金；另外 bonus_order2 用的是沒接樣式的 .btn2。 */
body .m-taggle-bar a img{
  filter:brightness(0) saturate(100%) invert(84%) sepia(28%)
         saturate(560%) hue-rotate(348deg) brightness(101%) contrast(93%);
}
body .btn2{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--tap); padding:0 var(--s5); border-radius:999px;
  background:var(--n3); border:1px solid var(--line3); color:var(--t1);
  font-size:15px; font-weight:700; cursor:pointer;
}
body .btn2:hover{ border-color:var(--line); color:var(--g-hi);}
body p.center{ text-align:center; margin-top:var(--s3);}

/* ============================================================
   會員區細節（做法搬自 gr66 的同批樣板，配色走 fh6666 自己的深藍金）
   ============================================================ */

/* ── 頁面標題：主標「會員中心」＋副標當前頁名 ────────────────
   原本各頁是「會員中心｜帳戶管理」寫成一行，主副標沒有層級。 */
body .pf-title{
    color:var(--t1);
  margin:0 0 4px; padding-right:96px;   /* 右側留出返回鈕的位置，字才不會被壓到 */
}
body .pf-sub{
  display:flex; align-items:center; gap:8px;
    color:var(--t2); margin:0 0 var(--s3);
}
body .pf-sub::before{
  content:""; width:3px; height:15px; border-radius:2px; background:var(--g);
}

/* ── 手機橫向分頁列（桌機沿用左側選單）───────────────────── */
body .pf-tabs-wrap{ position:relative; margin:0 0 var(--s3);}
body .pf-tabs{
  display:flex; gap:var(--s5); overflow-x:auto; white-space:nowrap;
  border-bottom:1px solid var(--line3); 
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
body .pf-tabs::-webkit-scrollbar{ display:none;}
body .pf-tabs a{
  position:relative; flex-shrink:0; 
  color:var(--t3); font-size:15px; font-weight:700;
}
body .pf-tabs a.on{ color:var(--g-hi);}
body .pf-tabs a.on::after{
  content:""; position:absolute; left:0; right:0; 
  height:3px; border-radius:3px 3px 0 0; 
}
/* 兩側漸層提示還有更多分頁 */
body .pf-tabs-wrap::after{
  content:""; position:absolute; top:0; bottom:1px; right:0; 
  pointer-events:none;
  background:linear-gradient(90deg,rgba(12,37,71,0),var(--n2) 78%);
}

/* ── 資料表：水平捲動 + 標題列凍結 + 第一欄凍結 ────────────
   邊框在 sticky 儲存格上捲動時會消失，分隔線改用 box-shadow 畫。 */






/* 捲動容器接手之後，外層卡片不必再擠一次內距 */


/* ── 統計數字卡：值上標下，手機 2 欄、桌機 4 欄 ──────────── */
body .pf-statgrid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s2); margin-top:var(--s2);
}
@media (min-width:768px){ body .pf-statgrid{ grid-template-columns:repeat(4,1fr);} }
body .pf-statgrid > div{
  background:var(--n3); border:1px solid var(--line3); border-radius:12px;
  padding:14px 10px; text-align:center; min-width:0;
}
body .pf-statgrid b{
  display:block; font-size:19px; font-weight:900; line-height:1.3; color:var(--g-hi);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
body .pf-statgrid span{ font-size:14px; color:var(--t3); font-weight:600;}

/* ── 篩選 chip：描邊小標籤，不是一排大實金塊 ─────────────── */




/* ── 日期區間：兩顆並排、窄螢幕自動折行 ───────────────────── */



/* ── 表單：label 在上、輸入框在下 ────────────────────────
   member.css 原本把 label 寫死 130px 靠左排，欄位就被擠成一條。 */
body .member-page .form-group{ display:block;}
body .member-page label{
  display:block; width:auto;  text-align:left;
}

/* ── 桌機的 w-100 主動作鈕不拉滿整張卡，收到合理寬度靠右 ──── */
@media (min-width:992px){
  body .member-page .btn.w-100{
    width:auto; min-width:220px; margin-left:auto; display:flex;
  }
}

/* ── LINE 白色線稿圖示要墊一小塊 LINE 綠才看得見 ──────────── */
body .else-btn.line img{
    
   
}
body .else-btn.google img{   }

/* ── 平板：member-page 用固定寬度會撐出視窗，改成跟著容器縮 ── */
@media (max-width:1199.98px){
  body .member-page{ width:auto; max-width:100%; margin-left:0; margin-right:0;}
}
/* 樣板裡包住所有卡片的中介層，手機再縮一圈沒必要 */
@media (max-width:575.98px){
  body .user-info{ padding-left:0; padding-right:0;}
}

/* ── 觸控目標與字級下限（站上多處 icon 標籤是 12–13px）────── */
body .member-page a, body .member-page button{ min-height:44px;}


/* ── 返回鈕移到標題右側（.pf-title 已預留 96px）───────────
   原本它自己佔一整行，夾在分頁列與內容之間很突兀。 */
body .member-page{ position:relative;}
body .member-page .member-top{ margin:0;}
body .member-page .m-taggle-bar{
  position:absolute; top:var(--s4); right:var(--s4); z-index:2; margin:0;
}
@media (max-width:575.98px){
  body .member-page .m-taggle-bar{ top:var(--s3); right:var(--s3);}
}
body .member-page .row.member-top{ display:block; min-height:0;}

/* ============================================================
   賭場質感層（2026-08-28）
   原本的樣式偏「後台管理介面」：平面按鈕、細灰邊、方正卡片。
   這一層把它調成賭場的手感 —— 金屬漸層的按鈕、有層次的卡片、
   記分板感的數字。只動觀感，不動結構與尺寸，稽核結果維持不變。
   ============================================================ */

body{
  /* 金屬金：多段色停才有金屬感，兩段只會像塑膠 */
  --g-metal:linear-gradient(180deg,#fff3c4 0%,#f6c744 38%,#e0ac2c 62%,#c88f14 100%);
  --g-metal-hi:linear-gradient(180deg,#fffbe6 0%,#ffd75e 40%,#ecb833 64%,#d69c1c 100%);
  /* 卡片頂緣的一道細光，讓面板看起來是有厚度的 */
  --sheen:inset 0 1px 0 rgba(255,255,255,.10);
  --glow:0 0 0 1px rgba(246,199,68,.10);
}

/* ── 按鈕：金屬漸層 + 上緣高光 + 下緣暗邊 + 按下位移 ──────── */
body .btn-warning, body .btn-primary, body .btn-register, body .Wbtn.btn-dpst, body .fh-btn-gold, body button:not(.btn):not(.submit-btn):not(.quick-btn):not(.tab-btn):not(.close):not(.close_m), body .authModal .tab-btn.active, body .GameNav .nav-link.active{
  background:var(--g-metal);
  border:1px solid #b8860b;
  color:var(--g-ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),
             inset 0 -1px 0 rgba(120,80,0,.35),
             0 2px 0 #8f6a0d,
             0 6px 16px rgba(0,0,0,.42);
  text-shadow:0 1px 0 rgba(255,255,255,.28);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
body .btn-warning:hover, body .btn-register:hover, body .Wbtn.btn-dpst:hover, body .fh-btn-gold:hover, body button:not(.btn):not(.submit-btn):not(.quick-btn):not(.tab-btn):not(.close):not(.close_m):hover{
  background:var(--g-metal-hi); filter:none;
}
body .btn-warning:active, body .btn-register:active, body .Wbtn.btn-dpst:active, body .fh-btn-gold:active{
  transform:translateY(2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),
             inset 0 -1px 0 rgba(120,80,0,.4),
             0 0 0 #8f6a0d,
             0 3px 8px rgba(0,0,0,.4);
}
/* 次要鈕：描邊 + 一點內發光，不要只是空框 */
body .btn, body .btn-login, body .Wbtn, body .fh-btn, body .btn2, body .quick-btn{
  background:linear-gradient(180deg,#16386b 0%,#0e2748 100%);
  border:1px solid #2a5390;
  box-shadow:var(--sheen), 0 3px 10px rgba(0,0,0,.30);
  transition:border-color .14s ease, box-shadow .14s ease, transform .12s ease;
}
body .btn:hover, body .btn-login:hover, body .Wbtn:hover, body .fh-btn:hover, body .btn2:hover, body .quick-btn:hover{
  border-color:var(--g);
  box-shadow:var(--sheen), 0 0 0 1px rgba(246,199,68,.28), 0 6px 16px rgba(0,0,0,.38);
  color:var(--g-hi);
}
body .btn:active, body .Wbtn:active, body .fh-btn:active, body .quick-btn:active{ transform:translateY(1px);}

/* ── 卡片：頂緣一道金光 + 更深的投影 ─────────────────────── */
body .memberMenu, body .fh-sum, body .member-page, body .member .box, body .Wbody_box, body .amount-card, body .payment-item, body .pf-statgrid > div{
  position:relative;
  box-shadow:var(--sheen), 0 10px 26px rgba(0,0,0,.40);
}
body .memberMenu::before, body .fh-sum::before, body .member-page::before, body .member .box::before, body .Wbody_box::before{
  content:""; position:absolute; left:14%; right:14%; top:-1px; height:1px;
  background:linear-gradient(90deg,transparent,rgba(246,199,68,.75),transparent);
  pointer-events:none;
}

/* ── 餘額：記分板感 ─────────────────────────────────────── */
body .fh-sum-cash, body .u-cone .WalletTotal, body .pf-statgrid b{
  background:linear-gradient(180deg,#fff6d0,#f6c744 55%,#d9a521);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.45));
  letter-spacing:.01em;
}
body .fh-sum{
  background:radial-gradient(120% 160% at 12% 0%,rgba(246,199,68,.14),transparent 58%),
    var(--card);
}

/* ── 分隔線：中間亮、兩端淡的金線 ────────────────────────── */
body .memberMenu .menu-link{
  border-top:0;
  background-image:linear-gradient(90deg,transparent,rgba(246,199,68,.42),transparent);
  background-size:100% 1px; background-repeat:no-repeat; background-position:top;
}

/* ── 圖示：金框圓底，不再是裸線稿 ───────────────────────── */
body .memberMenu .icon-link li a{
  background:linear-gradient(180deg,#16386b 0%,#0e2748 100%);
  box-shadow:var(--sheen), 0 4px 12px rgba(0,0,0,.32);
}
body .memberMenu .icon-link li a img{
  padding:5px; border-radius:50%;
  background:radial-gradient(circle at 50% 30%,rgba(246,199,68,.22),rgba(246,199,68,.06));
  box-shadow:inset 0 0 0 1px rgba(246,199,68,.32);
  width:32px!important; height:32px!important;
}

/* ── 輸入框：內凹感 ─────────────────────────────────────── */
body input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]), body select, body .form-control{
  background:linear-gradient(180deg,#0a2040,#0e2748);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.38);
}
body input:focus, body select:focus, body .form-control:focus{
  box-shadow:inset 0 2px 5px rgba(0,0,0,.38), 0 0 0 3px rgba(246,199,68,.18);
}

/* ── 頁首與底部固定列：加一道金線收邊 ────────────────────── */
body #header{
  box-shadow:0 1px 0 rgba(246,199,68,.30), 0 8px 22px rgba(0,0,0,.45);
}
body .ft-navbar{
  border-top:0;
  box-shadow:0 -1px 0 rgba(246,199,68,.30), 0 -8px 22px rgba(0,0,0,.45);
}
body .ft-navbar .ft-link img{
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.55));
}

/* ── 表格：表頭金字，列 hover 微光 ──────────────────────── */
body table th{ color:var(--g-hi); letter-spacing:.04em;}
body table tbody tr:hover td{ background:rgba(246,199,68,.06);}

/* ── 遊戲卡：金框加厚一點，hover 亮起來 ──────────────────── */
body .games .gamesBox > a{
  box-shadow:var(--sheen), 0 12px 28px rgba(0,0,0,.45);
}
body .games .gamesBox > a:hover{
  border-color:var(--g);
  box-shadow:var(--sheen), 0 0 0 1px rgba(246,199,68,.35), 0 16px 34px rgba(0,0,0,.5);
}

/* ── 分頁列選中：下標線改成發光的金條 ───────────────────── */
body .pf-tabs a.on::after{
  background:var(--g-metal);
  box-shadow:0 0 10px rgba(246,199,68,.55);
}

/* ── 間距重新校準：賭場介面偏緊湊有秩序，不要鬆散 ─────────── */
body{    }
body .member-page, body .member .box{ padding:var(--s4);}
body .memberMenu{ padding:var(--s3);}
body .fh-sum{ padding:var(--s3) var(--s4);}
body main > section{ margin-top:var(--s3)!important;}
body .member-menu_web{ gap:var(--s3);}

/* 主鈕要贏過上面那組次要鈕的宣告：.fh-btn-gold 同時也是 .fh-btn、
   .btn-warning 同時也是 .btn，同特異性時後出現的贏，所以金色這組要排在後面。 */
body .btn.btn-warning, body .btn.btn-primary, body .fh-btn.fh-btn-gold, body .Wbtn.btn-dpst, body a.btn-register, body .authModal .tab-btn.active, body .GameNav .nav-link.color.active{
  background:var(--g-metal)!important;
  border:1px solid #b8860b!important;
  color:var(--g-ink)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),
             inset 0 -1px 0 rgba(120,80,0,.35),
             0 2px 0 #8f6a0d,
             0 6px 16px rgba(0,0,0,.42)!important;
  text-shadow:0 1px 0 rgba(255,255,255,.28);
}
body .btn.btn-warning:hover, body .fh-btn.fh-btn-gold:hover, body .Wbtn.btn-dpst:hover, body a.btn-register:hover{
  background:var(--g-metal-hi)!important; color:var(--g-ink)!important;
}

/* 頁首的登入／註冊／登出／會員是主要操作，不吃 .btn-sm 的 38px（天條 34） */
body .btn-login.btn-sm, body .btn-register.btn-sm{ min-height:44px!important;}

/* ============================================================
   按鈕定案：B「精緻金」（Owner 2026-08-28 選定）
   取代前面那組金屬按鈕。四個被指出來的問題一次解掉：
   深棕描邊拿掉、硬邊立體陰影拿掉、字的浮雕陰影拿掉、漸層跨度收窄。
   圓角改 12px（小鈕 10px），不再做全膠囊。
   ============================================================ */
body{
  
  
  
  
}

/* 主要動作 */
body .btn.btn-warning, body .btn.btn-primary, body .fh-btn.fh-btn-gold, body .Wbtn.btn-dpst, body a.btn-register, body .btn-register, body .authModal .tab-btn.active, body .GameNav .nav-link.color.active, body button:not(.btn):not(.submit-btn):not(.quick-btn):not(.tab-btn):not(.close):not(.close_m){
  background:var(--btn-gold)!important;
  border:0!important;
  color:#1a1204!important;
  border-radius:20px!important;
  box-shadow:var(--btn-gold-sh)!important;
  text-shadow:none!important;
  font-weight:800;
  letter-spacing:.02em;
}
body .btn.btn-warning:hover, body .fh-btn.fh-btn-gold:hover, body .Wbtn.btn-dpst:hover, body .btn-register:hover, body button:not(.btn):not(.submit-btn):not(.quick-btn):not(.tab-btn):not(.close):not(.close_m):hover{
  background:var(--btn-gold-hi)!important;
  box-shadow:var(--btn-gold-sh-hi)!important;
  color:#1a1204!important;
}
body .btn.btn-warning:active, body .fh-btn.fh-btn-gold:active, body .Wbtn.btn-dpst:active, body .btn-register:active{ transform:translateY(1px);}

/* 次要動作：金色描邊配淡金底 */
body .btn, body .btn-login, body .Wbtn, body .fh-btn, body .btn2, body .quick-btn, body .pagination a{
  background:rgba(246,199,68,.07);
  border:1px solid rgba(246,199,68,.40);
  color:#ffe08a;
  border-radius:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  text-shadow:none;
}
body .btn:hover, body .btn-login:hover, body .Wbtn:hover, body .fh-btn:hover, body .btn2:hover, body .quick-btn:hover{
  background:rgba(246,199,68,.14);
  border-color:rgba(246,199,68,.7);
  color:#fff0b8;
}
body .btn-sm, body .quick-btn{ border-radius:10px;}
/* 錢包鍵是圖示在上、文字在下的方塊，圓角小一點才不會變膠囊 */
body .Wbtn{ border-radius:10px;}
/* 分類軌與遊戲卡上的標籤不吃按鈕圓角 */
body .GameNav .nav-link.color{ border-radius:12px;}
body .games .gamesBox--button{ border-radius:999px;}

/* ============================================================
   配色定案：深海藍金（Owner 2026-08-28 選定，原 palette A）
   把底色階拉開 —— 先前頁面底與卡片底太接近，卡面浮不出來。
   藍是主體，金只用在重點，不鋪滿。
   ============================================================ */
body{
  --n0:#020a15;   /* 最深：頁尾、壓底 */
  --n1:#04121f;   /* 頁面底 */
  --n2:#0b2340;   /* 卡片底 */
  --n3:#123057;   /* 卡片底（亮）／次要按鈕 */
  --n4:#1a4176;   /* hover／圖示底 */
  --card:linear-gradient(165deg,#143563,#0a1f3a);
  --page:radial-gradient(120% 150% at 50% 0,#0a2544 0,#051627 52%,#020a15 100%);

  --g:#f6c744; --g-hi:#ffe9a3; --g-lo:#d9a521; --g-ink:#1a1204;
  --g-soft:rgba(246,199,68,.10);

  --line:rgba(246,199,68,.30);   /* 卡片金框 */
  --line2:rgba(246,199,68,.18);  /* 次級金框 */
  --line3:#1c3f6e;               /* 中性分隔線 */

  --t1:#f0f5fc; --t2:#cfdcf0; --t3:#b0c2d8;
}

/* ============================================================
   跑版修正（Owner 2026-08-28 回報）
   ============================================================ */

/* ── 一、表格欄位對不齊 ────────────────────────────────────
   我先前在手機斷點把 table 設成 display:block、thead/tbody 設成
   display:table，兩者的欄寬就各算各的 —— 表頭跟內容當然對不上。
   後來又加了一組 .table-responsive 走 width:max-content，兩套打架。
   正解：捲動一律交給外層容器，table 本身維持正常的 table 排版。 */
@media (max-width:767.98px){
  body table:not(.no-scroll){
    display:table!important; width:max-content!important; min-width:100%!important;
    overflow:visible!important;
  }
  body table:not(.no-scroll) > thead, body table:not(.no-scroll) > tbody{
    display:table-header-group; width:auto; min-width:0;
  }
  body table:not(.no-scroll) > tbody{ display:table-row-group;}
  
}
/* 沒有被包進捲動容器的表格，自己補一個 */
body .member-page table:not(.no-scroll){
  border-collapse:separate; border-spacing:0;
}


/* 表格線改回細的中性線，白粗線太吵 */
body table th, body table td{
  border:0!important;
  box-shadow:inset -1px -1px 0 var(--line3)!important;
}
body table.table-bordered, body table.table{ border:0!important;}

/* 凍結第一欄：底色要跟該列一致，否則捲動時會露出色差 */


/* ── 二、分頁列文字被裁掉 ──────────────────────────────────
   overflow-x:auto 會連垂直方向一起裁。行高加上 padding 超出容器高度，
   字的上半就被切掉了。給它明確高度與行高，不要靠內容撐。 */
body .pf-tabs{
  align-items:center; min-height:52px; padding:6px 2px 0;
  overflow-y:hidden;
}
body .pf-tabs a{
  display:inline-flex; align-items:center;
  min-height:40px; padding:0 0 10px; line-height:1.4;
}
body .pf-tabs a.on::after{ bottom:2px;}

/* ── 三、間距重新抓 ────────────────────────────────────────
   卡片內元素之間先前沒有統一的節奏，篩選鈕跟主要動作還黏在一起。 */
body .member-page .box, body .member-page form, body .deposit-container{ display:flex; flex-direction:column; gap:var(--s3);}
body .member-page .box > *, body .member-page form > *{ margin:0;}
/* 篩選 chip 那排與底下的主要動作要分開 */

body .member-page .btn.w-100, body .member-page .text-center > .btn{ margin-top:var(--s2);}
/* 標籤與欄位：標籤貼著自己的欄位，欄位之間才留大間距 */
body .member-page label{ margin:0 0 6px;}
body .member-page .form-group{ margin:0;}
/* 區塊標題與內容 */
body .member-page h4, body .member-page .box > h4{ margin:0 0 var(--s1); font-size:18px;}

/* ── 日期查詢區（.group-prepend）──────────────────────────
   樣板結構：label + 兩個 date input + .group-btn 四顆快選。
   先前沒有給這一組任何規則，兩個日期欄貼在一起、四顆鈕折成 3+1。
   紀錄類各頁共用同一組 class，改這裡全部一起好。 */
body .group-prepend{
  display:flex; flex-direction:column; gap:var(--s2);
}
body .group-prepend .group-text, body .group-prepend label{
  margin:0; font-size:15px; font-weight:700; color:var(--t2);
}
body .group-prepend input[type=date]{ margin:0;}

/* 四顆快選一行，不留落單尾巴（天條 55） */
body .group-btn{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s1);
  margin-top:2px;
}
body .group-btn .btn{
  min-width:0; padding:0 6px; font-size:14.5px; white-space:nowrap;
}
@media (max-width:359px){
  body .group-btn .btn{ font-size:13.5px;}
}

/* 查詢鈕與上方的篩選拉開，不要黏著 */
body .box-user form{ display:flex; flex-direction:column; gap:var(--s3);}
body .box-user .text-center{ margin:0;}

/* 日期欄位本身：兩欄並排時要有間距（部分頁面是橫排） */


/* 日期查詢區的間距一直沒生效：這個元素同時掛著 .group-prepend 與 .form-group，
   而後面那條 .member-page .form-group{display:block} 把 flex 蓋掉了，gap 自然無效。
   這裡提權寫死，並且不靠 gap，改用明確的 margin，避免再被別條規則影響。 */
body .member-page .group-prepend.form-group, body .group-prepend{
  display:flex!important; flex-direction:column!important; gap:0!important;
}
body .group-prepend > *{ margin:0;}
body .group-prepend .group-text, body .group-prepend > label{ margin-bottom:var(--s1);}
/* 兩個日期欄位之間 */
body .group-prepend input[type=date] + input[type=date]{ margin-top:var(--s2);}
/* 四顆快選跟上面的日期欄位分開 */
body .group-prepend .group-btn{ margin-top:var(--s3);}

/* ============================================================
   對齊「會員區設計規格」（2026-08-28）
   規格來自 gr66 的同批樣板，數字全部是量測值不是估的。
   這裡照搬字級／間距／控件尺寸與「一頁一顆主鈕」的原則，
   配色維持富亨自己的深海藍金（Owner 定案）。
   ============================================================ */

body{
  /* 間距尺度改用規格那套。原本 8/12/16/20/28/40 是我自己排的，
     這套是量出來的：6 圖文、10 行內、14 欄位、18 標題與內容、20 卡片之間 */
  --s1:6px;    /* 圖示與文字 */
  --s2:10px;   /* 行內元件（按鈕與輸入框） */
  --s3:14px;   /* 欄位與欄位 */
  --s4:18px;   /* 區塊標題與內容 */
  --s5:20px;   /* 卡片與卡片 */
  --s6:26px;
  --s7:40px;
  --pad-m:22px;  /* 卡片內距：手機 上下 */
  --pad-mx:18px; /* 卡片內距：手機 左右 */
  --pad-d:26px;  /* 卡片內距：電腦 上下 */
  --pad-dx:22px; /* 卡片內距：電腦 左右 */
  --bnav:73px;   /* 底部固定導覽實際高度 */
}

/* ── 字：內文基準 18px。會員區的人常在手機上看數字，抬一階比較好讀 ── */
body{ font-size:18px; line-height:1.5;}
body .pf-title{ font-size:24px; font-weight:900;}
body .pf-sub{ font-size:15px; font-weight:700;}
/* 區塊標題：18px/900，底下壓一條 2px 金線 */
body .member-page h4, body .member-page .box > h4, body .fh-h2{
  font-size:18px; font-weight:900; color:var(--t1);
  padding-bottom:6px; margin:0 0 var(--s4);
  border-bottom:2px solid var(--g);
  display:inline-block;
}
/* 欄位標籤：13.5–14px/700，用次文字色，不跟值搶 */
body .member-page label, body .group-prepend .group-text, body .col-form-label{
  font-size:14px; font-weight:700; color:var(--t3);
}
/* 表格 15px，數字用等寬對齊 */
body table th, body table td{
  font-size:15px; font-variant-numeric:tabular-nums;
}
/* 字重只留 400/700/900 —— 中文字型一個字重幾百 KB，
   500/600/800 交給瀏覽器就近對應，畫面看不出差別 */


/* ── 控件：全站同一組尺寸 ─────────────────────────────── */
body .btn, body .btn-login, body .btn-register, body .fh-btn, body .btn2, body button:not(.submit-btn):not(.quick-btn):not(.tab-btn):not(.close):not(.close_m){
  min-height:48px; border-radius:20px;
}
body .btn-sm{ min-height:48px; border-radius:20px;}
/* 快捷籌碼（日期、廠商）：44 高、膠囊、等寬排列 */
body .group-btn .btn, body .quick-btn{
  min-height:44px; border-radius:999px;
}
/* 輸入框：48 高、圓角 12、字級 16（低於 16 手機會自動放大） */
body input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]), body select, body .form-control{
  min-height:48px; border-radius:12px; font-size:16px;
}
/* 卡片圓角 16 */
body .member-page, body .member .box, body .memberMenu, body .fh-sum, body .Wbody_box, body .amount-card{ border-radius:16px;}

/* 卡片內距照規格：手機 22/18、電腦 26/22 */
body .member-page, body .member .box, body .memberMenu{ padding:var(--pad-m) var(--pad-mx);}
@media (min-width:992px){
  body .member-page, body .member .box, body .memberMenu{ padding:var(--pad-d) var(--pad-dx);}
}
/* 卡片與卡片之間 20px */
body .member .box + .box, body .fh-rest > * + *{ margin-top:var(--s5);}

/* 電腦版主要動作固定 280×48 置中，全站同一個尺寸，不因頁而異 */
@media (min-width:992px){
  body .member-page .btn.w-100, body .member-page .text-center > .btn{
    width:280px; min-width:0; margin-left:auto; margin-right:auto;
  }
}

/* ── 一頁只留一顆實心的主要動作，其餘一律線框 ──────────────
   先前金色實心鈕出現在太多地方，主次分不出來。 */
body .member-page .btn-warning ~ .btn-warning{
  background:rgba(246,199,68,.07)!important;
  border:1px solid rgba(246,199,68,.40)!important;
  color:var(--g-hi)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important;
}

/* ── 捲動容器裡不放透明的東西 ────────────────────────────
   容器、表格、每一格都要有實色背景，否則捲動時會露出黑底殘影。 */
body .table-responsive, body .table-responsive-md{ background:var(--n2);}
body .table-responsive table, body .table-responsive-md table{ background:var(--n2);}
body .table-responsive td, body .table-responsive-md td{ background:var(--n2);}
body .table-responsive tbody tr:nth-child(even) td, body .table-responsive-md tbody tr:nth-child(even) td{ background:#0e2745;}

/* 底部固定導覽的下方留白照實際高度算 */
@media (max-width:991.98px){
  body{ padding-bottom:calc(var(--bnav) + env(safe-area-inset-bottom) + 15px);}
}

/* 跑馬燈軌與輪播軌本來就比視窗寬，靠父層裁掉。父層漏了 overflow 的話，
   它們會撐大 body 的捲動區；body 是 overflow-x:clip，會變成固定元素的定位基準，
   底部固定列就跟著被撐寬 —— 整份文件於是出現橫向捲動。
   （這個因果鏈踩過兩次，所以不綁在某個 section 之下，一律裁。） */
body .marquee-wrapper, body .top-bar, body .swiper-container, body .testimonials, body .testimonials-slider, body .swiper-wrapper{ overflow:hidden; max-width:100%;}
body .testimonials .swiper-slide{ max-width:100%;}

/* body 的 overflow-x:clip 會讓 body 變成 position:fixed 的定位基準，
   底部導覽的 width:100% 就對到 body 的「捲動寬度」而不是視窗寬 ——
   跑馬燈軌被裁掉但仍計入捲動寬度，導覽跟著被撐寬，整份文件才出現橫向捲動。
   用視窗單位鎖死，不受 body 捲動寬度影響。 */
body .ft-navbar, body .fixed-bottom{
  width:100vw; max-width:100vw; left:0; right:auto;
}

/* 上一條還不夠：Chromium 下 body 的 overflow-x:clip 沒有真的把
   被裁掉的內容從 documentElement.scrollWidth 扣掉，整份文件仍然可以橫向捲。
   clip 要下在根元素才會攔到視窗層的捲動。 */
html{ overflow-x:clip;}

/* ── 按鈕的金改成從色票推導 ──────────────────────────────
   B 案的漸層當初是寫死的（#ffdc7a→#f0bf45→#e0a92f），
   跟深海藍金定案的金（#ffe9a3 / #f6c744 / #d9a521）差一階 ——
   按鈕看起來就跟卡片邊框、標題金線不是同一個金。改成引用 token。 */
body{
  
  
  
  
}
/* 次要鈕的描邊與字也走同一組 token，不再各寫各的 */
body .btn, body .btn-login, body .Wbtn, body .fh-btn, body .btn2, body .quick-btn, body .pagination a, body .group-btn .btn{
  background:var(--g-soft);
  border:1px solid var(--line);
  color:var(--g-hi);
}
body .btn:hover, body .btn-login:hover, body .Wbtn:hover, body .fh-btn:hover, body .btn2:hover, body .quick-btn:hover, body .group-btn .btn:hover{
  background:rgba(246,199,68,.16);
  border-color:var(--g);
  color:#fff3c8;
}
/* 主鈕的字色也對齊：金底上用最深的那一階，不用純黑 */
body .btn.btn-warning, body .fh-btn.fh-btn-gold, body .Wbtn.btn-dpst, body .btn-register, body button:not(.btn):not(.submit-btn):not(.quick-btn):not(.tab-btn):not(.close):not(.close_m){
  color:var(--g-ink)!important;
}

/* ── 帳戶管理：資料列改成左標籤右值 ──────────────────────
   原本每一欄都是「標籤在上、值在下」一路往下流，中間沒有任何分隔，
   十幾組欄位疊起來就是一片散的長條。這是唯讀資料不是表單，
   兩欄式（標籤左、值右）＋列分隔線才讀得快。 */
body .user-account .form-group{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s3); padding:12px 0; margin:0;
  border-bottom:1px solid var(--line3);
}
body .user-account .form-group:last-child{ border-bottom:0; padding-bottom:0;}
body .user-account .form-group:first-of-type{ padding-top:0;}

body .user-account .form-group > label{
  flex:0 0 auto; margin:0; font-size:14px; font-weight:700; color:var(--t3);
  line-height:1.4;
}
/* 標籤後面那段英文縮小、降一階，不跟中文搶 */
body .user-account label span{
  display:block; font-size:12px; font-weight:400; color:var(--t3); opacity:.7;
}
body .user-account .content{
  flex:1; min-width:0;
  display:flex; align-items:center; justify-content:flex-end; gap:var(--s2);
  text-align:right; font-size:17px; font-weight:700; color:var(--t1);
  word-break:break-all;
}
/* 行內按鈕（儲值／更改密碼）跟值同一行靠右，不再自己佔一段 */
body .user-account .content .btn{
  flex:0 0 auto; min-height:44px; padding:0 var(--s4); font-size:15px;
}

/* 第三方綁定獨立成一組，兩顆並排 */
body .login-else{
   flex-wrap:wrap; gap:var(--s2);
   
  border-bottom:1px solid var(--line3);
}
body .login-else .else-btn{ margin:0; flex:1 1 160px; justify-content:center;}
body .login-else .else-btn > div{ display:flex; align-items:center; gap:var(--s1);}

@media (max-width:479px){
  /* 很窄的時候值換行到標籤下方，但保留分隔線與分組 */
  body .user-account .form-group{ flex-direction:column; align-items:stretch; gap:4px;}
  body .user-account .content{ justify-content:flex-start; text-align:left;}
}

/* 第二段（銀行資料）用的是 .bankForm，先前的選擇器沒涵蓋，
   所以同一頁上下兩段長得不一樣。一併納入。
   但它裡面有真正的輸入欄位 —— 有欄位的那一列要讓欄位佔滿寬，
   不能跟唯讀資料一樣擠成右對齊的一行。 */
body .bankForm .form-group{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s3); padding:12px 0; margin:0;
  border-bottom:1px solid var(--line3);
}
body .bankForm .form-group:last-child{ border-bottom:0; padding-bottom:0;}
body .bankForm .form-group:first-of-type{ padding-top:0;}
body .bankForm > .form-group > label{
  flex:0 0 auto; margin:0; font-size:14px; font-weight:700; color:var(--t3); line-height:1.4;
}
body .bankForm label span{
  display:block; font-size:12px; font-weight:400; color:var(--t3); opacity:.7;
}
body .bankForm .content{
  flex:1; min-width:0; display:flex; align-items:center; justify-content:flex-end;
  gap:var(--s2); text-align:right; font-size:17px; font-weight:700; color:var(--t1);
}
/* 這一列有輸入元件時：標籤在上、欄位滿寬 */
body .user-account .form-group:has(input,select,textarea), body .bankForm .form-group:has(input,select,textarea){
  flex-direction:column; align-items:stretch; gap:6px;
}
body .bankForm .form-group:has(input,select,textarea) .content{
  justify-content:flex-start; text-align:left; display:block;
}
/* 「更改密碼」那一列的按鈕不是包在 .content 裡，直接是 form-group 的子元素 */
body .user-account .form-group > .btn, body .bankForm .form-group > .btn{
  flex:0 0 auto; min-height:40px; padding:0 var(--s4); font-size:15px; width:auto;
}

/* 實名認證的上傳欄位也分列，跟上面兩段同一個節奏 */
body .member-page .box .form-group:has(input[type=file]){
  padding:12px 0; border-bottom:1px solid var(--line3); margin:0;
}


/* 按鈕金改回 B 案原本那組（Owner 指定）。
   B 的金比色票的金再暖一點、亮階再高一點，單看按鈕更有份量。 */
body{
  --btn-gold:linear-gradient(180deg,#ffdc7a 0%,#f0bf45 52%,#e0a92f 100%);
  --btn-gold-hi:linear-gradient(180deg,#ffe79a 0%,#f6c95a 52%,#e8b53c 100%);
  --btn-gold-sh:inset 0 1px 0 rgba(255,255,255,.55),
                inset 0 -1px 0 rgba(140,95,0,.22),
                0 4px 14px rgba(224,169,47,.30), 0 2px 6px rgba(0,0,0,.35);
  --btn-gold-sh-hi:inset 0 1px 0 rgba(255,255,255,.6),
                   0 6px 20px rgba(224,169,47,.42), 0 2px 6px rgba(0,0,0,.35);
}

/* ============================================================
   第二套樣板家族：.page-wrapper / .member-content
   紅利、個人訊息、拋售、帳戶設定四頁走這一套，沒有 .member-page，
   所以前面所有會員區樣式一條都沒套到 —— 這是那幾頁看起來「很亂」的原因。
   ============================================================ */
body .page-wrapper{ width:100%; max-width:100%; overflow-x:clip;}
body .page-wrapper > .banner, body .page-wrapper > .breadcramb{ display:none;}
body .page-wrapper section.main, body .page-wrapper section.content{ padding:0; margin:0;}
body .wapper.content-bg{
  max-width:1140px; margin:0 auto; padding:var(--s5) var(--pad-mx);
  background:transparent;
}
@media (min-width:992px){
  body .wapper.content-bg{ padding:var(--s5) var(--pad-dx);}
}
/* 內容卡：跟 .member-page 同一種殼 */
body .member-content{
  background:var(--n2); border:1px solid var(--line2); border-radius:16px;
  padding:var(--pad-m) var(--pad-mx); margin:0;
  box-shadow:var(--sheen), 0 10px 26px rgba(0,0,0,.40);
}
@media (min-width:992px){
  body .member-content{ padding:var(--pad-d) var(--pad-dx);}
}

body .tab-content.deposit{ display:flex; flex-direction:column; gap:var(--s3);}
body .form-horizontal.my-form{ display:flex; flex-direction:column; gap:var(--s3);}

/* 付款方式：原本是一個裸 radio 配一張圖，兩者各自漂在畫面上。
   改成整塊可點的卡片，radio 收成右側的選中圈。 */
body .my-form .atm,
body .my-form .bank,
body .my-form .store{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  min-height:64px; padding:var(--s2) var(--s3);
  background:var(--n3); border:1px solid var(--line3); border-radius:12px;
  margin:0; cursor:pointer;
}
body .my-form .atm:hover,
body .my-form .bank:hover,
body .my-form .store:hover{ border-color:var(--line);}
/* 標籤是「徽章圖示 + 文字」，文字寫在樣板裡（原本整張都是圖，而且是破的） */
body .my-form .atm label,
body .my-form .bank label,
body .my-form .store label{
  flex:1; margin:0; display:flex; align-items:center; gap:var(--s2);
  min-width:0; cursor:pointer;
  font-size:17px; font-weight:700; color:var(--t1);
}
body input.payment{
  flex:0 0 auto; width:22px; height:22px; min-height:0; margin:0;
  accent-color:var(--g); cursor:pointer;
}

/* 金額輸入與送出 */
body .deposit-input, body .submit-input{
  display:flex; flex-direction:column; gap:6px; margin:0;
}

body .block{ display:flex; flex-wrap:wrap; gap:var(--s3); margin:0;}
body .block-left, body .block-right{ flex:1 1 220px; min-width:0;}

/* 這一套自帶的頁首與版面殼在新版用不到（頁首已由共用 header 接手） */
body .page-wrapper > header.header.fixed{ }

/* 上一條把頁首藏錯了 —— 這一套家族其實也載共用的 header.php，
   被隱藏的是它自己那層外殼，不是頁首本身。改成只收外殼的裝飾。 */
body .page-wrapper > header.header.fixed{ display:block; position:static;}


/* 這一套家族也要有頁面標題與返回，跟另一套對齊 */


/* assets/www/_images/ 整個目錄在 repo 與線上都不存在，
   引用它的全是破圖（側邊懸浮聯絡面板、tooltip 那些）。
   新版底部固定列已經有客服入口，這面板既重複又是破的，整組收掉。 */
body img[src*="/_images/"]{ display:none;}
body .line-btn-a, body .tooltip.tool-line, body .page-wrapper > .banner{ display:none!important;}

/* 六宮格：li 本身在這一套家族殘留了底色與高度，在圖示下方留一條藍長條 */
body .memberMenu .icon-link li{
  background:transparent!important; box-shadow:none!important;
  height:auto!important; min-height:0!important; padding:0!important;
}
body .memberMenu .icon-link li a{ height:auto; min-height:76px;}

/* ── 第二套家族的表單：.block > .block-left（標籤）+ .block-right（值）──
   結構本來就是兩欄，只是沒有任何樣式，所以看起來是「標籤／值」一路往下流。 */
body .my-form .block{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s3); padding:12px 0; margin:0;
  border-bottom:1px solid var(--line3);
}
body .my-form .block:last-of-type{ border-bottom:0;}
body .my-form .block-left{
  flex:0 0 auto; margin:0; font-size:14px; font-weight:700; color:var(--t3);
  line-height:1.4; white-space:nowrap;
}
body .my-form .block-right{
  flex:1; min-width:0; margin:0;
  display:flex; align-items:center; justify-content:flex-end; gap:var(--s2);
  font-size:17px; font-weight:700; color:var(--t1); text-align:right;
  word-break:break-all;
}
/* 有輸入欄位的那一列：欄位滿寬，標籤在上 */
body .my-form .block:has(input,select,textarea){
  flex-direction:column; align-items:stretch; gap:6px;
}
body .my-form .block:has(input,select,textarea) .block-right{
  justify-content:flex-start; text-align:left; display:block;
}
body .my-form .block:has(input,select,textarea) .block-left{ white-space:normal;}
body .my-form .block-right input{ width:100%;}

/* 送出區：主要動作 */
body .submit-input, body .fitch.submit-input{
  display:flex; justify-content:center; margin-top:var(--s4); padding:0;
}


body .bank-info{ margin-top:var(--s4);}

/* ── 個人訊息：上方三個分頁做成分頁籤，表格收進捲動容器 ────── */

body .member-content .nav{
  display:flex; flex-wrap:wrap; gap:var(--s2); margin:0 0 var(--s4); padding:0;
  border-bottom:1px solid var(--line3);
}
body .member-content .nav > li{ list-style:none;}
body .member-content .nav a{
  display:inline-flex; align-items:center; min-height:44px; padding:0 var(--s3);
  color:var(--t2); font-size:15px; font-weight:700;
}

body .tab-content.history, body .tab-content.account-list{
  overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%;
}
body .tab-content.history table{ min-width:100%;}

/* 六宮格 li 的殘留藍條（前一輪沒清乾淨，這一套家族也有） */
body .icon-link li, body .icon-link li::before, body .icon-link li::after{
  background:transparent!important; box-shadow:none!important; border:0!important;
}

/* 六宮格的樣式先前綁在 .memberMenu 之下，第二套家族沒有那一層，
   裡面的 <a> 就維持 display:inline —— inline 盒子的漸層背景會往下溢出，
   看起來就是圖示底下多一條藍長條。選擇器改成不綁 .memberMenu。 */
body .icon-link ul{
  display:grid!important; grid-template-columns:repeat(3,1fr); gap:var(--s2);
  margin:0!important; padding:0!important; list-style:none;
  background:transparent!important; border:0!important;
}
body .icon-link li{
  display:block!important; margin:0!important; padding:0!important;
  width:auto!important; height:auto!important;
  background:transparent!important; border:0!important; box-shadow:none!important;
}
body .icon-link li a{
  display:flex!important; flex-direction:column; align-items:center; justify-content:center;
  gap:5px; min-height:76px; height:auto; padding:var(--s2) 4px; border-radius:12px;
  background:linear-gradient(180deg,#16386b 0%,#0e2748 100%);
  border:1px solid var(--line3);
  color:var(--t1)!important; font-size:13px; font-weight:700; text-align:center;
  box-shadow:var(--sheen), 0 4px 12px rgba(0,0,0,.32);
}
body .icon-link li a:hover{ border-color:var(--line); color:var(--g-hi)!important;}
body .icon-link li a img{
  width:32px!important; height:32px!important; object-fit:contain; padding:5px;
  border-radius:50%;
  background:radial-gradient(circle at 50% 30%,rgba(246,199,68,.22),rgba(246,199,68,.06));
  box-shadow:inset 0 0 0 1px rgba(246,199,68,.32);
  filter:brightness(0) saturate(100%) invert(84%) sepia(28%)
         saturate(560%) hue-rotate(348deg) brightness(101%) contrast(93%);
}

/* ============================================================
   第三套家族：.intro-page / section.register（實名認證、手機驗證）
   內容直接貼在頁面底上，沒有卡片外殼；標籤是 Bootstrap 的
   .input-group-text 白色膠囊，在深底上非常突兀。
   ============================================================ */
body .intro-page{ padding:var(--s5) 0;}
body .intro-page > .container{ max-width:1140px; padding:0 var(--pad-mx);}
body .intro-page .dot-dash{ }
body section.register{
  background:var(--n2); border:1px solid var(--line2); border-radius:16px;
  padding:var(--pad-m) var(--pad-mx); margin:0;
  box-shadow:var(--sheen), 0 10px 26px rgba(0,0,0,.40);
}
@media (min-width:992px){
  body section.register{ padding:var(--pad-d) var(--pad-dx); max-width:560px; margin:0 auto;}
}
/* .text-dark 是 Bootstrap 的深字，套在深底上等於看不見 */
body .text-dark{ color:var(--t1)!important;}
body .intro-page h2{
  font-size:22px; font-weight:900; color:var(--t1); margin:0 0 var(--s2);
}
body .intro-page .container > p{ color:var(--t2); font-size:16px; margin:0 0 var(--s4);}

/* ── Bootstrap 的 .input-group：白色膠囊標籤 ───────────────── */
body .input-group{ display:flex; flex-direction:column; gap:6px; width:100%;}
body .input-group-prepend{ display:block; margin:0;}
body .input-group-text{
  display:inline-block; width:auto; padding:0; margin:0;
  background:transparent!important; border:0!important; border-radius:0!important;
  color:var(--t3)!important; font-size:14px; font-weight:700; min-height:0;
}
body .input-group > input{ width:100%; border-radius:12px!important;}
body .form-control-plaintext{
  width:100%; min-height:48px; padding:0 var(--s3); border-radius:12px;
  background:linear-gradient(180deg,#0a2040,#0e2748);
  border:1px solid var(--line3); color:var(--t1); font-size:16px;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.38);
}
body .submitdiv{ margin-top:var(--s4); display:flex; justify-content:center;}
body .submitdiv .btn{ width:100%; float:none!important;}
@media (min-width:992px){ body .submitdiv .btn{ width:280px;} }

/* 沒有任何家族 class 的裸頁（紅利訂單、儲值結果、銀行帳戶、交易紀錄）
   至少要有限寬與內距，不要整片貼齊螢幕邊緣 */
body section > .container{ max-width:1140px;}

/* 遊戲紀錄的快選容器同時掛 .group-prepend 與 .group-btn，
   前者的 flex-direction:column !important 贏了，三顆鈕就直排成滿版三行。
   兩個 class 同時存在時以 .group-btn 為準。 */
body .group-prepend.group-btn{
  display:grid!important; flex-direction:row!important;
  grid-template-columns:repeat(4,1fr); gap:var(--s1);
  margin-top:var(--s3);
}
body .group-prepend.group-btn .btn{
  min-width:0; width:auto; padding:0 6px; font-size:14.5px; white-space:nowrap;
}
@media (max-width:359px){
  body .group-prepend.group-btn .btn{ font-size:13.5px;}
}

/* 「選擇遊戲」的下拉箭頭：樣板用一個絕對定位的 <i> 疊在 select 上，
   靠的是 inline style。我的 select 已經自己畫了箭頭，兩個疊在一起，
   而且那個 <i> 少了定位就掉到框外變成一個小方塊。 */
body .select-wrapper{ display:block!important; width:100%!important;}
body .select-wrapper > i{ display:none!important;}
body .select-wrapper .custom-select{
  margin-left:0!important; padding-right:var(--s5)!important; width:100%;
}

/* ── 點數轉移的場館餘額 ──────────────────────────────────
   原本八顆「回收」全是金色實心，跟主要動作「一鍵回收」同一個份量，
   整片金鈕非常吵；場館名稱、餘額、按鈕又各自散著沒有卡片收攏。 */
body .game-cash .m-auto{  justify-content:center; }
body #taBTN{  }

body #taBTN img{ height:16px!important; width:auto; margin-left:6px;}

body .game-cash-row > .row{
  display:grid!important; gap:var(--s2); margin:0;
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:768px){ body .game-cash-row > .row{ grid-template-columns:repeat(3,1fr);} }
@media (min-width:1200px){ body .game-cash-row > .row{ grid-template-columns:repeat(4,1fr);} }
body .game-cash-row > .row > [class*="col-"]{
  max-width:none; width:auto; padding:0!important; flex:none;
}
/* 場館卡：名稱 → 餘額 → 小的回收鈕 */
body .game-cash-box{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:var(--s3) var(--s2); border-radius:12px; height:100%;
  background:linear-gradient(180deg,#16386b 0%,#0e2748 100%);
  border:1px solid var(--line3);
  box-shadow:var(--sheen), 0 4px 12px rgba(0,0,0,.32);
}
body .game-cash-box > div:first-child{
  font-size:14px; font-weight:700; color:var(--t2); text-align:center;
  line-height:1.35; min-height:2.7em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
body .game-cash-box .num{
  font-size:20px; font-weight:900; color:var(--g-hi); line-height:1.2;
  font-variant-numeric:tabular-nums;
}
/* 回收改成次要鈕，一頁只留「一鍵回收」一顆實心 */
body .game-cash-box .btn{
  width:100%; min-height:44px; padding:0 var(--s2);
   border-radius:20px;
  background:var(--g-soft)!important;
  border:1px solid var(--line)!important;
  color:var(--g-hi)!important;
  box-shadow:none!important;
  display:inline-flex; align-items:center; justify-content:center; gap:5px;
}
body .game-cash-box .btn:hover{
  background:rgba(246,199,68,.16)!important; border-color:var(--g)!important;
}
body .game-cash-box .btn img{
  height:14px!important; width:auto; margin:0;
  filter:brightness(0) saturate(100%) invert(84%) sepia(28%)
         saturate(560%) hue-rotate(348deg) brightness(101%) contrast(93%);
}

/* ── 日期欄位在 iOS 與 Chromium 長得不一樣 ────────────────
   Chromium 會在右邊畫日曆圖示；iOS Safari 不畫，而且文字置中，
   右半邊就空一塊，看起來像沒對齊。兩邊統一：文字靠左，
   右側自己畫一個指示記號（用漸層畫，不引入圖檔）。 */
body input[type=date]{
  text-align:left;
  
  background-image:linear-gradient(45deg,transparent 50%,var(--g) 50%),
    linear-gradient(135deg,var(--g) 50%,transparent 50%);
  
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
}
/* Chromium 自己那顆日曆圖示改成品牌金，並收到我們畫的記號旁邊 */
body input[type=date]::-webkit-calendar-picker-indicator{
  filter:brightness(0) saturate(100%) invert(84%) sepia(28%)
         saturate(560%) hue-rotate(348deg) brightness(101%) contrast(93%);
  opacity:.85; cursor:pointer; margin-right:var(--s3);
}

/* 上一條的 padding-right 讓 iOS 的日期欄位撐出容器 ——
   iOS 的 input[type=date] 有依內容算出來的最小寬度，
   加了內距之後那個最小寬度就超過卡片。
   拿掉原生外觀、把寬度鎖死，最小寬度才不會反過來撐破容器。
   （Chromium 不會發生，本機截圖驗不出來，是 Owner 在 iPhone 上回報的。） */
body input[type=date]{
  -webkit-appearance:none; appearance:none;
  width:100%; max-width:100%; min-width:0;
  box-sizing:border-box;
  padding-right:var(--s4);
  background-position:calc(100% - 16px) calc(50% + 2px), calc(100% - 10px) calc(50% + 2px);
}
/* 這一整組欄位也不讓它被子元素撐開 */
body .group-prepend, body .group-prepend > *, body .form-group, body .form-group > *{ min-width:0; max-width:100%;}

/* ── 手續費警語做成獨立區塊，移到內容最下面 ────────────────
   只針對「.user-info 底下有連續兩個 <p>」的頁面（提領頁的手續費規則）。
   其他頁的 .user-info > p 只有一個，那是段落說明不是警語，維持原位。 */
body .user-info:has(> p + p){ display:flex; flex-direction:column;}
body .user-info:has(> p + p) > p{
  order:99; margin:0; padding:0 var(--s4);
  background:rgba(226,100,92,.12);
  border-left:1px solid rgba(226,100,92,.42);
  border-right:1px solid rgba(226,100,92,.42);
  color:#ffb3bd; font-size:15px; line-height:1.7;
}
body .user-info:has(> p + p) > p:first-of-type{
  margin-top:var(--s5); padding-top:var(--s3);
  border-top:1px solid rgba(226,100,92,.42);
  border-radius:12px 12px 0 0;
}
body .user-info:has(> p + p) > p:last-of-type{
  padding-bottom:var(--s3);
  border-bottom:1px solid rgba(226,100,92,.42);
  border-radius:0 0 12px 12px;
}
/* 前面加一個「注意事項」小標，讓它一看就是規則不是內文 */
body .user-info:has(> p + p) > p:first-of-type::before{
  content:"注意事項";
  display:block; margin-bottom:6px;
  font-size:13px; font-weight:800; letter-spacing:.1em;
  color:#ff9a90;
}

/* 「一鍵回收」跟其他頁的主要動作一致：手機滿版、桌機 280px 置中 */
body .game-cash .m-auto{ display:block; width:100%; margin:0 0 var(--s4);}
body #taBTN{ width:100%!important; max-width:none!important; margin:0!important;}
@media (min-width:992px){
  body .game-cash .m-auto{ display:flex; justify-content:center;}
  body #taBTN{ width:280px!important;}
}

/* 輪播的軌道（.swiper-wrapper）必須能移出容器，由外層 .swiper-container 裁切。
   我先前為了擋橫向溢出把 overflow:hidden 加在軌道上 —— 軌道自己裁自己，
   translate 之後可見的那張就被裁掉，主視覺整片空白。
   裁切只留在外層。 */
body .swiper-wrapper{
  overflow:visible!important; max-width:none!important;
}
body .testimonials, body .swiper-container, body .testimonials-slider{ overflow:hidden; max-width:100%;}

/* ── 卡面圖比例 ──────────────────────────────────────────
   原圖是 480×480 的直立人像，四周本來就留了白。
   放在 1:1 的框裡人像會顯得擠；改成 4:5 直式，人像更完整也更大。
   落單的橫幅卡原本用 16:10 橫裁，人像只剩半張臉 —— 改回方形不裁。 */
body .games .gamesBox--image, body .games .action-game.action-game-100 .gamesBox--image, body .games .action-game.action-game-50 .gamesBox--image{
  aspect-ratio:4/5;
}
body .games .gamesBox--image img{
  object-fit:cover; object-position:50% 8%;
}
@media (max-width:767.98px){
  body .games .gamesBox:nth-child(odd):last-child .gamesBox--image{
    flex:0 0 40%; aspect-ratio:1/1;
  }
  body .games .gamesBox:nth-child(odd):last-child .gamesBox--image img{
    object-position:50% 6%;
  }
}

/* ── 實心金鈕只留給「該頁真正的主要動作」──────────────────
   1. 頁首的「會員／註冊」是導覽，每一頁都出現。做成實心等於
      每頁都有一顆假主鈕在跟真正的動作搶注意力 → 一律改線框。
   2. 會員中心摘要的「儲值／轉點／提領」是三個對等入口，
      不該只有一顆特別亮 → 三顆同一種樣式。
   會員中心是導覽頁沒有單一任務，所以整頁沒有實心鈕是對的。 */
body .btn-register, body a.btn-register, body .btn-register.btn-sm{
  background:var(--g-soft)!important;
  border:1px solid var(--line)!important;
  color:var(--g-hi)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important;
  text-shadow:none!important;
}
body .btn-register:hover, body a.btn-register:hover{
  background:rgba(246,199,68,.16)!important;
  border-color:var(--g)!important;
  color:#fff3c8!important;
}
body .btn-register .btn-icon{
  filter:brightness(0) saturate(100%) invert(84%) sepia(28%)
         saturate(560%) hue-rotate(348deg) brightness(101%) contrast(93%);
}
/* 摘要那三顆對等入口 */
body .fh-sum-act .fh-btn.fh-btn-gold{
  background:var(--g-soft)!important;
  border:1px solid var(--line)!important;
  color:var(--g-hi)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important;
  text-shadow:none!important;
}
body .fh-sum-act .fh-btn.fh-btn-gold:hover{
  background:rgba(246,199,68,.16)!important;
  border-color:var(--g)!important; color:#fff3c8!important;
}

/* ── 實心金鈕的分工 ─────────────────────────────────────
   保留實心：表單提交（確認變更／確認提領／開始查詢／送出／取得代碼）。
   改成線框：跟在數值旁邊的入口鈕（儲值、更改密碼、一鍵回收、一鏈轉回），
             以及返回、狀態標示（已領取）—— 那些不是該頁的主要動作。 */

/* 帳戶管理：儲值、更改密碼是入口，主要動作是「確認變更」 */
body .user-account .content .btn, body .user-account .form-group > .btn, /* 點數轉移：主要動作是「一鍵回收」，總資產旁的儲值是入口 */
body .wallet-box .btn, body .Wbody .Wbtn.btn-dpst, /* 提領頁：主要動作是「確認提領」，一鏈轉回是次要 */
/* 這條原本是給提領頁的「一鏈轉回」，但紅利提領的按鈕也掛 .wbtn；
   紅利頁只有這一顆按鈕，它就是該頁的主要動作，排除掉。 */
body .member-page .btn.btn-warning.wbtn:not(#rakeBTN), /* 返回不是主要動作 */
body .btn2, body .m-taggle-bar a, body .btn[disabled]{
  background:var(--g-soft)!important;
  border:1px solid var(--line)!important;
  color:var(--g-hi)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important;
  text-shadow:none!important;
}
body .user-account .content .btn:hover, body .wallet-box .btn:hover, body .Wbody .Wbtn.btn-dpst:hover, body .btn2:hover{
  background:rgba(246,199,68,.16)!important;
  border-color:var(--g)!important; color:#fff3c8!important;
}
/* 手機驗證：兩個步驟，「發送認證簡訊」是輔助、「確認」才是提交 */
body .register .btn:not([type=submit]):not(.submitdiv .btn){
  background:var(--g-soft)!important;
  border:1px solid var(--line)!important;
  color:var(--g-hi)!important;
  box-shadow:none!important;
}

/* 大廳登入後的錢包列：那一頁沒有別的主要動作，「儲值」就是主要動作，
   保留實心。改線框的只有會員中心摘要那三顆對等入口。 */
body section.Wbody .Wbtn.btn-dpst{
  background:var(--btn-gold)!important;
  border:0!important;
  color:#1a1204!important;
  box-shadow:var(--btn-gold-sh)!important;
}
body section.Wbody .Wbtn.btn-dpst:hover{
  background:var(--btn-gold-hi)!important; color:#1a1204!important;
}
/* 紅利訂單的「返回」是 .btn2，前面那條沒提權夠，這裡補上 */
body button.btn2, body p.center button.btn2{
  background:var(--g-soft)!important;
  border:1px solid var(--line)!important;
  color:var(--g-hi)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important;
  text-shadow:none!important;
}

/* 前面「裸 button 一律金色實心」那條的選擇器帶了五個 :not()，特異性比後寫的高，
   所以 .btn2 一直蓋不掉。這裡把同樣的 :not() 串補上才壓得過去。 */
body button.btn2:not(.btn):not(.quick-btn):not(.tab-btn):not(.close):not(.close_m){
  background:var(--g-soft)!important;
  border:1px solid var(--line)!important;
  color:var(--g-hi)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important;
  text-shadow:none!important;
}

/* ============================================================
   帳戶管理：改用 gr66 的做法（配色維持深海藍金）
   ------------------------------------------------------------
   gr66 那邊的註解把問題講得很準：
   「值只要比 label 長一點就會整個換到下一行，同一個區塊裡有的一行、
     有的兩行，看起來很亂。改成強制單行、值靠右、超長截斷 ——
     每一列高度、對齊方式都一致，才像『一個區塊』。」
   我先前在窄螢幕讓它換行成上下兩排，正是它已經試過並否定的做法。
   ============================================================ */
body .member-page .form-group, body .user-account .form-group, body .bankForm .form-group{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:nowrap;                    /* 不換行 —— 這是關鍵 */
  gap:var(--s3); padding:15px 2px; margin:0;
  border-bottom:1px solid var(--line3);
}
body .member-page .form-group:last-child, body .user-account .form-group:last-child, body .bankForm .form-group:last-child{ border-bottom:0;}

body .member-page .form-group > label, body .user-account .form-group > label, body .bankForm .form-group > label{
  flex-shrink:0; margin:0; white-space:nowrap;
  font-size:14px; font-weight:500; color:var(--t3);
}
body .member-page .form-group label span, body .user-account label span, body .bankForm label span{
  display:inline; font-size:12px; font-weight:400; color:var(--t3); opacity:.75;
}
/* 值：靠右、單行、超長截斷 */
body .member-page .content, body .user-account .content, body .bankForm .content{
  flex:1; min-width:0; margin:0; padding:0;
  display:flex; align-items:center; justify-content:flex-end;
  gap:var(--s2); flex-wrap:nowrap;
  background:transparent; border:0; box-shadow:none;
  font-size:17px; font-weight:700; color:var(--t1); text-align:right;
}
body .member-page .content span, body .user-account .content span{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-weight:700; color:var(--t1);
}
body .member-page .content .btn, body .member-page .form-group > .btn{ flex-shrink:0; white-space:nowrap; margin-left:auto;}
/* 窄螢幕也維持單行（先前的換行做法取消） */
@media (max-width:479px){
  body .user-account .form-group, body .bankForm .form-group{
    flex-direction:row; align-items:center; gap:var(--s2);
  }
  body .user-account .content, body .bankForm .content{ justify-content:flex-end; text-align:right;}
}
/* 有輸入欄位的那一列仍然要欄位滿寬（gr66 的註冊頁也是這樣分） */
body .user-account .form-group:has(input,select,textarea), body .bankForm .form-group:has(input,select,textarea){
  flex-direction:column; align-items:stretch; gap:6px;
}
body .bankForm .form-group:has(input,select,textarea) .content{
  justify-content:flex-start; text-align:left; display:block;
}
body .bankForm .form-group:has(input,select,textarea) > label{ white-space:normal;}

/* ── 第三方綁定改成清單列，不是兩顆膠囊鈕 ─────────────────
   gr66 把它排成跟其他資料列一樣的一列，視覺上才屬於同一個區塊。 */
body .login-else{
  display:block; padding:0; margin:0; border:0;
}
body .member-page .else-btn{
  display:flex!important; align-items:center; width:100%!important;
  height:auto!important; min-height:0!important;
  padding:15px 2px!important; margin:0!important;
  background:transparent!important; border:0!important;
  border-bottom:1px solid var(--line3)!important; border-radius:14px!important;
  box-shadow:none!important;
}
body .member-page .else-btn > div{ display:flex; align-items:center; width:100%;}
body .member-page .else-btn img{
  max-width:22px!important; max-height:22px!important;
  width:22px!important; height:22px!important; flex-shrink:0;
}
body .member-page .else-btn span{
  padding-left:var(--s2)!important; border-left:0!important;
  color:var(--t2)!important; font-weight:600; font-size:14px; letter-spacing:normal;
}
/* LINE 是白色線稿，要墊一小塊 LINE 綠才看得見 */
body .else-btn.line img{
  background:#06c755!important; border-radius:6px!important;
  padding:3px!important; box-sizing:border-box;
  max-width:26px!important; max-height:26px!important;
  width:26px!important; height:26px!important;
}
body .else-btn.google img{
  background:#fff!important; border-radius:6px!important; padding:3px!important;
  box-sizing:border-box; width:26px!important; height:26px!important;
  max-width:26px!important; max-height:26px!important;
}

/* ── 上傳檔案框：原生 file input 太生硬，包一層虛線框 ────── */
body .member-page .custom-file{
  border:1px dashed var(--line)!important; border-radius:10px!important;
  padding:10px 12px!important; background:var(--g-soft); width:100%!important;
}

/* ── 注意事項一律用同一種警示框（gr66 的做法）───────────── */
body .member-page ul.note, body .member-page .info-box{
  background:rgba(226,100,92,.12)!important;
  border:1px solid rgba(226,100,92,.42)!important;
  border-left:4px solid #e2645c!important;
  border-radius:12px!important;
  padding:14px 16px!important; margin:var(--s3) 0 0!important;
  color:#ffb3bd!important; font-size:16px!important; line-height:1.9!important;
  list-style:none!important;
}
body .member-page ul.note li:first-child{
  font-weight:800; color:#ff9a90!important; margin-bottom:4px;
}
body .member-page ul.note li::before{ display:none;}

/* Google 的 .else-btn 內容包了一層 <div>，LINE 的沒有 —— 兩種結構要同樣對齊 */
body .member-page .else-btn, body .member-page .else-btn > div{
  display:flex!important; align-items:center; justify-content:flex-start;
  gap:0; width:100%;
}
body .member-page .else-btn > div{ padding:0; border:0; background:transparent;}

/* 上傳欄在 .bankpicForm 裡，先前只納入 .user-account／.bankForm，所以沒套到 */
body .bankpicForm .form-group{
  display:flex; flex-direction:column; align-items:stretch; gap:8px;
  padding:15px 2px; margin:0; border-bottom:1px solid var(--line3);
}

body .bankpicForm .form-group > label{
  white-space:normal; font-size:14px; font-weight:700; color:var(--t2); margin:0;
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
}
body .bankpicForm label span{ font-size:13px; font-weight:400; color:var(--t3); opacity:1;}
body .bankpicForm label a{
  font-size:13px; color:var(--g-hi); text-decoration:underline;
  min-height:32px; display:inline-flex; align-items:center;
}
body .custom-file{
  display:block; width:100%!important; margin:0!important;
  border:1px dashed var(--line)!important; border-radius:10px!important;
  padding:10px 12px!important; background:var(--g-soft)!important;
}
body .custom-file input[type=file]{
  width:100%; background:transparent; border:0; box-shadow:none;
  padding:0; min-height:0; font-size:14px; color:var(--t2);
}

/* 超商儲值那段的紅字提示做成同一種警示框 */


/* ── 超商儲值選項 ────────────────────────────────────────
   這一段的結構跟其他區塊都不一樣：標籤包在 .label 裡、輸入欄是它的
   兄弟元素，不是 .form-group，所以前面的資料列規則整組沒套到。
   另外標題後面直接接一段紅字（inline style），太長就換行壓到金線上。 */
body .member-page .inline-block{
  display:block; margin:0 0 var(--s3);
}
body .member-page .inline-block h4.title{
  display:inline-block; margin:0 0 8px;
}
/* 紅字說明抽出來當註記，不跟標題擠在同一行 */
body .member-page .inline-block > span[style*="red"]{
  display:block; margin:0;
  padding:10px 14px; border-radius:10px;
  background:rgba(226,100,92,.12);
  border:1px solid rgba(226,100,92,.42);
  border-left:4px solid #e2645c;
  color:#ffb3bd!important;
  font-size:14px; font-weight:600; line-height:1.7;
}

/* 表單本體：標籤在上、欄位在下，列與列之間分隔 */
body .bankForm3{   gap:0;}
body .bankForm3 > .label{
   
    
}
body .bankForm3 > .label:first-child{ padding-top:0;}
body .bankForm3 > .label label{
  margin:0; font-size:14px; font-weight:700; color:var(--t2); white-space:normal;
}
/* 巢狀的第二層標籤（第一組超商 店號／店名）降一階 */
body .bankForm3 .label .label label, body .bankForm3 .label > .label{
  font-size:13.5px; font-weight:500; color:var(--t3);
  padding:10px 0 4px; display:block;
}
body .bankForm3 input, body .bankForm3 select{ width:100%; margin:0 0 var(--s2);}
body .bankForm3 > .label > input:last-child{ margin-bottom:0;}
/* 每一組之間一條分隔線 */
body .bankForm3 > .label + .label, body .bankForm3 > .twzipcode + .label{
   
}
/* 縣市／區域兩個下拉並排，郵遞區號縮成小欄 */
body .twzipcode{
  display:flex; flex-wrap:wrap; gap:var(--s2); margin:0 0 var(--s2);
}
body .twzipcode select{ flex:1 1 140px; min-width:0; margin:0;}
body .twzipcode input{ flex:0 0 96px; margin:0; text-align:center;}

/* 已設定狀態下，這一段輸出的是純文字而不是輸入框，而且兩種結構不同：
   「超商1／2」的值在 .label 裡面，「儲值區域」的值是 form 底下的孤立文字節點
   （CSS 選不到它）。把 .label 做成一列，孤立文字則靠 flex 讓它自己成為一列。 */
body .bankForm3{
  display:flex; flex-direction:column; align-items:stretch;
  text-align:right;                    /* 孤立文字節點靠右，跟上面的資料列一致 */
  font-size:17px; font-weight:700; color:var(--t1);
}
body .bankForm3 > .label{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s3); flex-wrap:nowrap;
  padding:15px 2px; margin:0;
  border-bottom:1px solid var(--line3);
  text-align:right; font-size:17px; font-weight:700; color:var(--t1);
}
body .bankForm3 > .label:last-child{ border-bottom:0;}
body .bankForm3 > .label > label{
  flex:0 0 auto; margin:0; white-space:nowrap; text-align:left;
  font-size:14px; font-weight:500; color:var(--t3);
}
/* 「儲值區域」那一列：標籤在上、值靠右，中間不留空隙 */
body .bankForm3 > .label:first-child{
  border-bottom:0; padding-bottom:0;
}
body .bankForm3 > .twzipcode{ text-align:left;}
/* 有輸入框時（未設定狀態）標籤在上、欄位滿寬 */
body .bankForm3 > .label:has(input,select){
  flex-direction:column; align-items:stretch; text-align:left;
}
body .bankForm3 > .label:has(input,select) > label{ text-align:left; margin-bottom:6px;}

/* 早先那條 .label + .label{border-top} 跟現在的 border-bottom 重複，變成雙線 */
body .bankForm3 > .label + .label, body .bankForm3 > .twzipcode + .label{
  border-top:0; margin-top:0;
}

/* 超商那段的警語移到區塊最下方（跟提領頁的手續費警語同一個處理）。
   紅字包在 .inline-block 裡跟標題同層，用 display:contents 讓它變成
   外層卡片的直接子項，才排得動順序。 */
body .member-page .box:has(.bankForm3){ display:flex; flex-direction:column;}
body .member-page .inline-block:has(> span[style*="red"]){ display:contents;}
body .member-page .inline-block > span[style*="red"]{
  order:99; margin-top:var(--s4);
}

body .member-page .box:has(.bankForm3) > .bankForm3{ order:2;}

/* 超商店名店號查詢那一列：一個說明 + 四個外部連結 + 一顆按鈕。
   我的 .form-group 是 flex nowrap，它們就排成一列 1830px 寬撐破頁面
   （被 overflow-x:clip 藏起來，所以稽核沒抓到，是整頁截圖才看得出來）。
   改成可換行的 chip 列，按鈕自己一行。 */
body .member-page .form-group.pull-right, body .bankForm3 .form-group.row{
  display:flex!important; flex-wrap:wrap!important; float:none!important;
  align-items:center; justify-content:flex-start;
  gap:var(--s2); padding:var(--s3) 2px 0; border-bottom:0;
}
body .member-page .form-group.pull-right .text-block{
  flex:0 0 100%; margin:0 0 4px;
  font-size:14px; font-weight:700; color:var(--t3);
}
body .member-page .form-group.pull-right > a{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:40px; padding:0 var(--s3); border-radius:999px;
  background:var(--g-soft); border:1px solid var(--line);
  color:var(--g-hi); font-size:14px; font-weight:600; white-space:nowrap;
}
body .member-page .form-group.pull-right > a:hover{
  background:rgba(246,199,68,.16); border-color:var(--g); color:#fff3c8;
}
body .member-page .form-group.pull-right > br{ display:none;}
body .member-page .form-group.pull-right > .btn{
  flex:0 0 100%; margin-top:var(--s3); width:100%;
}
@media (min-width:992px){
  body .member-page .form-group.pull-right > .btn{
    flex:0 0 280px; width:280px; margin-left:auto; margin-right:auto;
  }
}

/* 四個超商連結要並排，不是各佔一行 */
body .member-page .form-group.pull-right > a{
  flex:0 0 auto!important; width:auto!important; min-width:0;
}
/* 有輸入欄位的列一律標籤在上、欄位滿寬（USDT 那列先前漏掉，
   因為它不在我列舉的那幾個 form class 底下） */
body .member-page .form-group:has(> .content input), body .member-page .form-group:has(> input), body .member-page .form-group:has(> .content select){
  flex-direction:column; align-items:stretch; gap:6px;
}
body .member-page .form-group:has(> .content input) > label, body .member-page .form-group:has(> input) > label{
  white-space:normal; text-align:left;
}
body .member-page .form-group:has(> .content input) .content{
  display:block; justify-content:flex-start; text-align:left; width:100%;
}
body .member-page .form-group .content input, body .member-page .form-group .content select{ width:100%;}

/* 頁首兩顆（登出／會員、登入／註冊）完全同一種樣式。
   先前底色邊框都一樣了，只有圓角不同（登出 20px、會員 12px）—— 一起鎖死。 */
body .btn-login, body .btn-register, body a.btn-register, body .btn-login.btn-sm, body .btn-register.btn-sm{
  background:var(--g-soft)!important;
  border:1px solid var(--line)!important;
  color:var(--g-hi)!important;
  border-radius:20px!important;
  min-height:44px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important;
  text-shadow:none!important;
  font-size:14.5px; font-weight:700;
}
body .btn-login:hover, body .btn-register:hover, body a.btn-register:hover{
  background:rgba(246,199,68,.16)!important;
  border-color:var(--g)!important;
  color:#fff3c8!important;
}
body .btn-login .btn-icon, body .btn-register .btn-icon{
  filter:brightness(0) saturate(100%) invert(84%) sepia(28%)
         saturate(560%) hue-rotate(348deg) brightness(101%) contrast(93%);
}

/* 帳戶管理移到下方的快捷卡區（Owner 指定），
   選單卡裡那一項就不再重複出現。 */
body .memberMenu .menu-link li#account{ display:none;}
/* 選單卡只剩六宮格，底部那條分隔線也不需要了 */
body .memberMenu .menu-link:not(:has(li:not(#account):not([class*="d-none"]))){
  border-top:0; margin-top:0; background-image:none;
}
/* 快捷卡區在桌機也要顯示（先前只留手機，因為當時只有一張紅利提領） */


/* 摘要那三顆（儲值／轉點／提領）要完全一致。
   .fh-btn-gold 因為也命中「主鈕」那組規則，圓角停在 12px，
   另外兩顆是 20px —— 跟頁首那次同一個病。 */
body .fh-sum-act .fh-btn, body .fh-sum-act .fh-btn.fh-btn-gold{
  border-radius:20px!important;
  background:var(--g-soft)!important;
  border:1px solid var(--line)!important;
  color:var(--g-hi)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important;
  text-shadow:none!important;
  min-height:44px!important;
}
body .fh-sum-act .fh-btn:hover, body .fh-sum-act .fh-btn.fh-btn-gold:hover{
  background:rgba(246,199,68,.16)!important;
  border-color:var(--g)!important;
  color:#fff3c8!important;
}

/* 會員中心的快捷格線補成八格：改 4 欄兩排，不留落單尾巴（天條 55） */


/* 可領取紅利：一個數字 + 一個動作，取代原本的「最近儲值紀錄」表格 */
body .fh-rake{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s3); flex-wrap:wrap;
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  padding:var(--s4);
  box-shadow:var(--sheen), 0 10px 26px rgba(0,0,0,.40);
}
body .fh-rake-main{ display:flex; flex-direction:column; gap:1px; min-width:0;}
body .fh-rake-label{ font-size:13.5px; color:var(--t3);}
body .fh-rake-num{
  font-size:30px; font-weight:800; line-height:1.15;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#fff6d0,#f6c744 55%,#d9a521);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.45));
}
body .fh-rake .fh-btn{ flex:0 0 auto;}
body .fh-rake-empty{ color:var(--t2); font-size:16px;}
@media (max-width:479px){
  body .fh-rake{ flex-direction:column; align-items:stretch;}
  body .fh-rake .fh-btn{ width:100%;}
}

/* 帳號移到餘額上方（Owner 指定）：先看到「我是誰」，再看到數字。
   帳號是身分不是數值，字級與顏色都要退一階，不跟餘額搶。 */

body .fh-sum-label{ order:1;}
body .fh-sum-cash{ order:2;}

/* 帳號字級放大（Owner 指定）：它現在是卡片的第一行，太小會像註解。
   放到 20px / 18px 仍低於餘額的 40px，層級不會打架。 */



/* 姓名為主、帳號為輔：姓名是「我是誰」，帳號是查詢用的識別碼，
   兩者同一行，字級與顏色拉開，才不會變成兩行沒重點的小字。 */
body .fh-sum-who{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:8px; margin-bottom:8px;
}
body .fh-sum-name{
  font-size:22px; font-weight:800; color:var(--t1); letter-spacing:.5px; line-height:1.2;
}
body .fh-sum-acct{
  font-size:14px; font-weight:600; color:var(--t3); letter-spacing:.3px;
  padding:2px 8px; border:1px solid var(--line2); border-radius:999px;
}
@media (min-width:992px){ body .fh-sum-name{ font-size:24px;} }

/* 會員中心：摘要卡已經有姓名＋帳號，側欄那條帳號是重複的，隱藏。
   用 :has() 限定「同一個容器裡有摘要卡」才隱藏 —— 其他會員頁沒有摘要卡，
   側欄那條是該頁唯一的身分顯示，要留著。 */
body .member-menu_web:has(.fh-sum) .user-lv{ display:none;}
body .member-menu_web:has(.fh-sum) .memberMenu > .icon-link{ margin-top:0;}

/* ── 按鈕內的小圖示與字級（Owner 指定）─────────────────
   .btn-warning 這組按鈕（儲值／一鍵回收／回收）原樣板在文字後面塞了
   12～14px 的 png 圖示，尺寸和字級對不上，看起來像沒對齊的雜訊。
   圖示拿掉，字交回按鈕本體，字級統一 16px。
   （帳戶頁的 LINE 登入圖示是有意義的品牌標記，不在這組裡，不動。） */
body .btn-warning img{ display:none;}
body .btn-warning{
  font-size:16px; font-weight:700; letter-spacing:.5px;
  min-height:44px; display:inline-flex; align-items:center; justify-content:center;
  padding:0 20px; gap:0;
}
/* 卡片右上角那顆「儲值」原本只有 89×38，低於 44px 觸控底線 */
body .wallet-box .btn-warning{ min-width:88px;}

/* ── 儲值頁的送出鈕（Owner 指定：間距有問題）──────────
   原樣板把它包在 .fixed-bottom-bar 裡，靠頁內 <style> 撐成固定底列；
   獨立樣式表沒有那段，於是塌成一顆 99px 的小鈕黏在警語下面。
   底部已經有固定導覽列，不再疊第二條固定列 —— 改成正常區塊、
   上間距走間距尺度、手機滿版、電腦版比照其他主要動作 280px。 */
body .fixed-bottom-bar{
  position:static; display:block; margin-top:var(--s5); padding:0;
  background:none; border:0; box-shadow:none;
}
body .fixed-bottom-bar .submit-btn{
  display:flex; align-items:center; justify-content:center;
  width:100%; min-height:48px; padding:0 24px; border:0; border-radius:20px;
  background:var(--btn-gold); color:var(--g-ink);
  font-size:17px; font-weight:800; letter-spacing:1px;
}
@media (min-width:992px){
  body .fixed-bottom-bar .submit-btn{ width:280px; height:48px;}
}

/* 上面三段沒生效，是被更高權重的既有規則壓過，這裡按各自的對手補權重：
   1) .member-page a{min-height:38px} 是給頁內純文字連結的，卻把卡片右上角
      那顆「儲值」壓到 38px，低於 44px 觸控底線；
   2) .game-cash-box .btn 把場館卡的「回收」定在 14px，跟同頁 16px 的按鈕不一致。 */
body .member-page .btn-warning{ min-height:44px;}
body .game-cash-box .btn{ font-size:16px;}

/* ── 紅利提領頁（分頁列新增「紅利」後，這頁變成一級頁面）──────
   原樣板這頁是純文字堆疊：說明、標籤、金額、按鈕全都同一個層級，
   金額還被 Bootstrap 的 m-3 推出容器左緣。按會員中心那張摘要卡的
   語彙重做：標籤小、數字大且金、主要動作實心金。 */
body .RakeTotal{
  margin:0!important; padding:0;
  font-size:40px; font-weight:800; line-height:1.1; letter-spacing:-.5px;
  background:linear-gradient(180deg,var(--g-hi),var(--g));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
body .RakeTotal span{ font-size:24px; margin-right:2px;}
body .wallet-box .cash-add{
  font-size:13.5px; font-weight:600; letter-spacing:1px; color:var(--t3);
}
body .user-info > p{
  margin:0 0 var(--s4); font-size:15px; line-height:1.7; color:var(--t3);
}
body #rakeBTN{
  margin:var(--s4) 0 0!important; width:100%; height:48px; min-height:48px;
   border-radius:20px;
  background:var(--btn-gold)!important; color:var(--g-ink)!important;
  border:0!important; box-shadow:none!important;
  font-size:17px; font-weight:800; letter-spacing:1px;
}
body #rakeBTN:disabled{
  background:var(--n3)!important; color:var(--t3)!important;
  border:1px solid var(--line3)!important; opacity:1;
}
@media (min-width:992px){ body #rakeBTN{ width:280px;} }

/* 帳戶管理是這格線裡最重要的一格（Owner 指定），做成金色強調格：
   底色與邊框走品牌金，圖示與文字跟著轉金，字重加一階。
   其餘五格維持深藍底，對比一眼分得出主次。 */
body .memberMenu .icon-link li.tile-primary a{
  background:linear-gradient(165deg,rgba(246,199,68,.30),rgba(246,199,68,.14));
  border:1px solid var(--g); color:#ffefbe; font-size:14px; font-weight:800;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 1px rgba(246,199,68,.18);
}
body .memberMenu .icon-link li.tile-primary a:hover{
  background:linear-gradient(165deg,rgba(246,199,68,.26),rgba(246,199,68,.12));
}
body .memberMenu .icon-link li.tile-primary a img{ width:30px; height:30px;}

/* 回到頂端的圓鈕拿掉（Owner 指定）：底部已經有固定導覽列，
   這顆浮在右下角會擋到內容，操作介面也不需要它。 */
body .back-to-top{ display:none!important;}

/* 電腦版：左側選單跨兩列，多出來的高度被平均分到兩列，
   把摘要卡跟下一段之間撐出 128px 的空洞。改成第一列貼齊內容、
   多餘的高度全丟給最後一列（內容靠上，看不出來）。 */
@media (min-width:992px){
  body .member-menu_web{ grid-template-rows:auto 1fr;}
}

/* 捲動順手度（Owner 回報儲值頁、虛幣交易滑起來會卡一下）：
   捲到底時手勢會往外層祖先傳遞，iOS 上會停一拍。把邊界關起來，
   捲到底就是到底，不再交棒。 */
body{ overscroll-behavior-y:contain;}
/* 橫向捲的分頁列與表格容器：只吃橫向，直向手勢直接交給頁面，
   不要因為手指落在它們身上就把整段上下滑吃掉。 */
body .pf-tabs, body .table-responsive, body .table-responsive-md{
  touch-action:pan-x pan-y; overscroll-behavior-x:contain;
}

/* 紅利提領頁那句「反水紅利依每小時試算累計…」也是警語（Owner 指定），
   比照儲值頁：做成粉紅區塊框、移到卡片下方。
   儲值頁那組是多段所以走 :has(> p + p)，這頁只有一段，另外接一條。 */
/* 只認紅利提領頁（那頁的 .user-info 裡有金額 .RakeTotal）。
   用「單段落」當條件會誤傷：帳戶管理、交易紀錄、點數轉移那幾頁的單段
   是頁面說明不是警語，套上去會變成一堆假的「注意事項」。 */
body .user-info:has(.RakeTotal){ display:flex; flex-direction:column;}
body .user-info:has(.RakeTotal) > p{
  order:99; margin:var(--s5) 0 0; padding:var(--s3) var(--s4);
  background:rgba(226,100,92,.12);
  border:1px solid rgba(226,100,92,.42); border-left:4px solid #e2645c;
  border-radius:12px; color:#ffb3bd; font-size:15px; line-height:1.9;
}
body .user-info:has(.RakeTotal) > p::before{
  content:"注意事項"; display:block; margin-bottom:6px;
  font-size:13px; font-weight:800; letter-spacing:.1em; color:#ff9a90;
}

/* 分頁列右緣的漸層是「還有更多」的提示，但它蓋在最後一顆分頁上，
   捲到底也還是被遮住一半（Owner 回報「遊戲紀錄滑不出來」）。
   給捲動軌一段右內距，捲到底時最後一顆會停在漸層左邊，完整露出。 */
body .pf-tabs{ padding-right:42px; scroll-padding-right:42px;}
body .pf-tabs-wrap::after{ width:28px;}

/* ── 舊版版型家族（匯款記錄、轉移記錄、紅利訂單 ×2）────────────
   這四頁不是 .member-page 也不是 .member-content，是更早的
   .main > .container > .content 結構，先前完全沒被樣式表認出來：
   前台只剩一條跑馬燈加一排沒有樣式的裸連結，內容整個沒有容器。 */
body .main > .container > .content{
  margin-top:var(--s4); padding:var(--pad-mx);
  background:var(--card); border:1px solid var(--line2); border-radius:var(--r3, 18px);
}
/* 舊版自己的「會員中心」標題與那排導覽，跟注入的主標＋分頁列重複，收起來 */
body .main > .container > .content > .title, body .main > .container > .content > ul.membernav{ display:none;}
body .tab-content.member{ margin-top:var(--s3);}
body .tab-content .tab-pane:not(.active){ display:none;}
@media (min-width:992px){
  body .main > .container > .content{ padding:var(--pad-d) var(--pad-dx);}
}

/* ── 手機版的側欄一律收起（會員中心除外）───────────────────
   .member-page 那 20 頁的樣板本來就寫了 d-none d-md-block，
   .member-content 這幾頁沒寫，於是手機上多出一塊帳號列＋六格快捷，
   把真正的內容推到一個畫面以下，跟其他頁不一致。
   會員中心要留（那格線就是它的主導覽），用 .fh-sum 認。 */
@media (max-width:991.98px){
  body .member-menu_web:not(:has(.fh-sum)) > .memberMenu, body .row.user_p > .memberMenu{ display:none;}
}

/* 舊版家族用的是 Bootstrap 3 的分頁寫法（.tab-pane.fade.in），
   站上載的是 Bootstrap 4，只認 .show —— 於是 .fade 把整塊內容留在
   opacity:0，表格明明在原始碼裡卻整片看不到。 */
body .fade.in, body .tab-pane.fade.active{ opacity:1;}
/* 同一個病的另一個受害者：紅利頁頂端那則「請選擇儲值方式」是常駐提示，
   BS4 把它留在 opacity:0，前台只看到一段 45px 的空白。 */
body .alert.fade.in{ margin-bottom:var(--s3);}

/* 舊版家族的表格沒有外層捲動容器（新版是樣板包 .table-responsive-md），
   欄位一多就整片撐破卡片、把版面推到畫面外。給分頁面板本身一層水平捲動。 */
body .main > .container > .content .tab-pane{
  overflow-x:auto; overflow-y:visible; -webkit-overflow-scrolling:touch;
  touch-action:pan-x pan-y; overscroll-behavior-x:contain;
}
body .main > .container > .content .tab-pane > table{ min-width:100%; width:max-content;}

/* 分頁列的右緣提示原本是一層漸層色塊，色值寫死 --n2；
   放在不同底色的卡片上（舊版家族的卡片是漸層）就露出一塊色差。
   改成遮罩：淡出的是文字本身，跟底色無關，換到哪張卡片都乾淨。 */
body .pf-tabs-wrap::after{ display:none;}
body .pf-tabs{
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent);
          mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent);
}

/* 儲值結果頁的「會員中心」是一張金色圖片（把文字做成圖，天條 24），
   注入的文字主標已經取代它的功能，圖收起來。 */
body .live-title{ display:none;}
/* 這頁沒有卡片容器，表格直接躺在底色上，跟其他頁不一致 */
body #memberCenter #myTabContent{
  max-width:100%; flex:0 0 100%; margin-top:var(--s4); padding:var(--pad-mx);
  background:var(--card); border:1px solid var(--line2); border-radius:18px;
}
@media (min-width:992px){
  body #memberCenter #myTabContent{ padding:var(--pad-d) var(--pad-dx);}
}

/* 個人訊息頁的次層分頁（發送訊息／客服歷史訊息／系統訊息）沒有任何樣式，
   前台是三行純文字，看起來像內文不像可以點的分頁。
   做成跟日期快選同一組藥丸鈕，維持全站按鈕語彙一致。 */
body .member-tab #tabs ul{
  display:flex; flex-wrap:wrap; gap:var(--s2);
  margin:0 0 var(--s4); padding:0; list-style:none; border:0; background:none;
}
body .member-tab #tabs li{ margin:0; border:0;}
body .member-tab #tabs li a{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:0 var(--s4);
  border:1px solid var(--line3); border-radius:999px;
  background:var(--n3); color:var(--t1);
  font-size:15px; font-weight:700; white-space:nowrap;
}
body .member-tab #tabs li a:hover{
  border-color:var(--line); background:var(--g-soft); color:var(--g-hi);
}

/* 三顆藥丸自然折行會變成 2+1 的落單尾巴（天條 55），改成等寬三欄一排。 */
@media (max-width:991.98px){
  body .member-tab #tabs ul{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s1);}
  body .member-tab #tabs li a{ width:100%; padding:0 4px; font-size:14.5px;}
}

/* 上一條只擋到 .member-menu_web 底下的側欄，.member-content 家族
   （拋售、紅利、帳戶設定）的側欄掛在別的父層，手機上還是露出來。 */
@media (max-width:991.98px){
  body .member-content > .memberMenu{ display:none;}
}

/* 拋售、紅利、帳戶設定這三頁的送出鈕在原始碼裡是空的 <a>，
   舊版靠背景圖當按鈕外觀；獨立樣式表不載那支圖，於是變成 316×0 的
   隱形元素 —— 這三頁前台等於沒有送出按鈕。
   先用樣式把它做回主要動作並補上字。
   2026-08-31：文字已經寫進樣板，這裡不再用 ::after 生成。 */
body .submit-input > a[id]{
  display:flex; align-items:center; justify-content:center;
  width:100%; min-height:48px; margin-top:var(--s4); padding:0 24px;
  border:0; border-radius:20px;
  background:var(--btn-gold); color:var(--g-ink);
  font-size:17px; font-weight:800; letter-spacing:1px;
}
@media (min-width:992px){ body .submit-input > a[id]{ width:280px;} }

/* 上面那條被 `.content a:not(.btn)` 的 display:inline 壓過（權重高一階），
   這裡補足權重，順便用 line-height 保底：就算 display 被別條改掉，
   文字仍然置中。 */
body .member-content .submit-input > a[id], body .content .submit-input > a[id]{
  display:flex; text-align:center; line-height:48px;
}

/* 實名認證、手機驗證這兩頁的頁首是「Member Centre」英文大標＋一行中文，
   跟其他 22 頁的「會員中心＋副標」不同套，看起來像別的網站。
   英文大標收起來，中文那行升格成主標，副標的字級與顏色照會員區的規格。 */
body .intro-page h2{ display:none;}
body .intro-page .dot-dash{ display:none;}
body .intro-page > .container > p{
  margin:0; font-size:22px; font-weight:800; color:var(--t1); letter-spacing:.5px;
}
body .intro-page{ margin-top:var(--s4);}

/* ── 退款頁的 VIP 統計區 ────────────────────────────────
   原本三欄各塞「圖示＋標題＋數字＋標題＋數字」，手機上欄寬只有 100px，
   「真人洗碼」被拆成兩行、數字跟標題黏在一起分不出主次。
   改成：圖示置中、標題小而不折行、數字大且金，欄與欄之間拉出間距。 */
body .box.status .row{ margin:0; gap:var(--s1) 0;}
body .statusBox{
  height:100%; padding:var(--s3) 4px;
  background:rgba(255,255,255,.03); border:1px solid var(--line2); border-radius:14px;
  text-align:center;
}
body .statusBox .img-status{ margin-bottom:var(--s2);}
body .statusBox .img-status img{ width:34px; height:34px; object-fit:contain;}
body .statusBox h5{
  margin:0; font-size:12.5px; font-weight:600; letter-spacing:.02em;
  color:var(--t3); white-space:nowrap;
}
body .statusBox p{
  margin:0 0 var(--s2); font-size:17px; font-weight:800; color:var(--g-hi);
  line-height:1.3; white-space:nowrap;
}
body .statusBox p:last-child{ margin-bottom:0;}
body .statusBox.border-l-r{ border-color:var(--line2);}

/* 上方「本月／全部紅利累計」原本是兩行純文字，沒有主次 */
body .cashbox{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3);}
body .cashbox .cash1{ font-size:14px; color:var(--t3); font-weight:600;}
body .cashbox .cash2{ font-size:20px; font-weight:800; color:var(--g-hi);}


/* 數字卡：欄數跟著項目數走，三個就排三欄，不要留 2+1 的落單尾巴（天條 55）。 */
/* 三個項目排三欄會把數字截成「12,80…」，標籤也折行；
   改成維持兩欄、第三格橫跨整列 —— 沒有落單尾巴，數字也讀得完。 */
body .pf-statgrid:has(> :nth-child(3)):not(:has(> :nth-child(4))) > :last-child{
  grid-column:1 / -1;
}
/* 輸贏的紅綠：金色是「數值」，紅綠是「賺賠」，兩件事不能混用同一個色 */
body .pf-statgrid b.pos{ color:#79dfae; background:none; -webkit-text-fill-color:#79dfae;}
body .pf-statgrid b.neg{ color:#ff9a90; background:none; -webkit-text-fill-color:#ff9a90;}

/* ============================================================
   圓角收斂（天條 55：同一種動作全站長一樣）
   量出來原本有五種：20px 56 顆、12px 31 顆、999px 60 顆、10px 9 顆、0px 4 顆。
   收成三種，各自對應一種角色，不再有「看不出為什麼不一樣」的中間值：
     動作按鈕 20px ｜ 快選與分頁碼 999px（藥丸／圓形）｜ 清單列 14px
   ============================================================ */
body .btn,
body .btn-warning,
body .btn-primary,
body .btn-secondary,
body .btn-danger,
body .btn2,
body .submit-input > a[id],
body .fixed-bottom-bar .submit-btn,
body #rakeBTN,
body .fh-btn{ border-radius:20px }

/* 快選（金額、日期範圍）與分頁碼：藥丸／圓形，並補到 44px 觸控底線 —— 
   金額快選原本只有 38px，低於天條 34 的下限。 */
body .quick-btn,
body .pagination .btn,
body .pagination a,
body .pf-chip{ border-radius:999px; min-height:44px }

/* 社群綁定那幾列是清單項目不是按鈕，原本 0 圓角，在整套圓角語言裡很突兀 */
body .else-btn{ border-radius:14px }

/* 「送出」被 .btn-sm 與浮動類疊出 59px，比其他主要動作高一截 */
body .member-page .btn.btn-warning.btn-sm{ min-height:48px; height:auto }

/* ── 鍵盤焦點 ────────────────────────────────────────
   先前為了拿掉 Bootstrap 的藍色光暈寫了 box-shadow:none，
   連帶把焦點指示也關掉了 —— 用鍵盤操作時看不出焦點在哪。
   改成品牌金的外框，不影響滑鼠操作（:focus-visible 只在鍵盤時出現）。 */
body a:focus-visible,
body button:focus-visible,
body input:focus-visible,
body select:focus-visible,
body textarea:focus-visible,
body [tabindex]:focus-visible{
  outline:2px solid var(--g); outline-offset:2px; border-radius:inherit;
}

/* 實名認證的「送 出」被 .btn-sm 的內距疊成 59px，比其他主要動作高一截 */
body .member-page .btn.btn-warning.btn-sm{ height:48px; min-height:48px; padding:0 24px }

/* 實名認證的送出鈕：內距被 Bootstrap 的 .btn 疊到 20px 上下，撐成 59px。
   直接鎖高度，跟其他主要動作一致。 */
body .submitdiv .btn{ height:48px; min-height:48px; padding:0 24px !important }

/* ── 拿掉 body.fh-app 限定之後補回來的兩處權重 ──────────────
   樣式表原本每條選擇器都以 body.fh-app 開頭，等於每條都多一個 class 的權重。
   改成不靠 class 之後，只有這兩處輸給了第三方樣式：
   大廳的 .nav-link 被 Bootstrap 的連結藍搶走、輪播圓點被 Swiper 加回左右外距。 */
body .nav-link{ color:var(--t1) }
body .testimonials .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
body .testimonials .swiper-pagination-bullets .swiper-pagination-bullet{ margin:0 }

/* ============================================================
   優惠情報（Active/index）
   原本整頁沒有標題也沒有容器：一進來就是三行裸標題加兩個圖示，
   看不出是可以點開的，也看不出自己在哪一頁。
   做成手風琴卡片：圖片、標題、展開指示、內文、報名動作各就各位。
   ============================================================ */
body .pf-lede{
  margin:0 0 var(--s5); font-size:16px; line-height:1.7; color:var(--t3);
}
body #faq.faq{ padding:var(--s5) 0 0 }
body .faq-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--s3) }
body .faq-list > li{
  margin:0; overflow:hidden;
  background:var(--card); border:1px solid var(--line2); border-radius:18px;
}
/* 標題列：整列可點，右邊用箭頭表示可展開 */
body .faq-list > li > a{
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:var(--s3);
  padding:var(--s3) var(--pad-mx); min-height:56px;
  color:var(--t1); text-decoration:none;
}
body .faq-list > li > a h3{
  grid-column:1; margin:0; font-size:17px; font-weight:800; line-height:1.45; color:var(--t1);
}
body .faq-list > li > a img{
  grid-column:1 / -1; grid-row:1; width:100%; height:auto; aspect-ratio:16/5;
  object-fit:cover; border-radius:12px; margin-bottom:var(--s2);
}
/* 圖片存在時把標題推到第二列 */
body .faq-list > li > a:has(img){ grid-template-columns:1fr auto; grid-template-rows:auto auto }
body .faq-list > li > a:has(img) h3{ grid-row:2 }
body .faq-list > li > a:has(img) .icon-show,
body .faq-list > li > a:has(img) .icon-close{ grid-row:2 }
body .faq-list > li > a .icon-show,
body .faq-list > li > a .icon-close{
  grid-column:2; justify-self:end;
  width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; background:var(--g-soft); border:1px solid var(--line2);
  color:var(--g-hi); font-size:18px; flex:0 0 auto;
}
body .faq-list > li > a.collapsed .icon-close,
body .faq-list > li > a:not(.collapsed) .icon-show{ display:none }
body .faq-list > li > a:not(.collapsed) h3{ color:var(--g-hi) }

/* 展開後的內文 */
body .faq-list .collapse,
body .faq-list .collapsing{ border-top:1px solid var(--line3) }
body .faq-list .collapse p,
body .faq-list .collapsing p{
  margin:0; padding:var(--s4) var(--pad-mx); font-size:16px; line-height:1.85; color:var(--t2);
}
body .faq-list .collapse > div[style],
body .faq-list .collapsing > div[style]{
  padding:0 var(--pad-mx) var(--s4); text-align:left !important;
}
/* 報名鈕：可報名是實心金，已報名／非報名時間是狀態不是動作，改線框 */
body .faq-list .btn-danger{
  background:var(--btn-gold) !important; border:0 !important; color:var(--g-ink) !important;
  min-height:48px; padding:0 24px; border-radius:20px; font-size:17px; font-weight:800;
  display:inline-flex; align-items:center; justify-content:center; width:100%;
}
body .faq-list .btn-primary,
body .faq-list .btn-secondary{
  background:var(--g-soft) !important; border:1px solid var(--line) !important;
  color:var(--g-hi) !important; box-shadow:none !important;
  min-height:48px; padding:0 24px; border-radius:20px; font-size:16px; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center; width:100%;
}
@media (min-width:992px){
  body .faq-list > li > a{ padding:var(--s3) var(--pad-dx); min-height:64px }
  body .faq-list > li > a h3{ font-size:19px }
  body .faq-list .collapse p{ padding:var(--s4) var(--pad-dx) }
  body .faq-list .collapse > div[style]{ padding:0 var(--pad-dx) var(--s4) }
  body .faq-list .btn-danger,
  body .faq-list .btn-primary,
  body .faq-list .btn-secondary{ width:280px }
}

/* 展開指示原本用 boxicons 的字型圖示，字型沒載到就變成豆腐框。
   改成用邊框畫的箭頭，不依賴任何字型檔，展開時轉 180 度。 */
body .faq-list > li > a .icon-show,
body .faq-list > li > a .icon-close{ font-size:0; position:relative }
body .faq-list > li > a .icon-show::before{
  content:""; position:absolute; top:50%; left:50%;
  width:9px; height:9px; margin:-6px 0 0 -5px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg); transition:transform .2s ease;
}
body .faq-list > li > a .icon-close::before,
body .faq-list > li > a .icon-close::after{
  content:""; position:absolute; top:50%; left:50%;
  width:13px; height:2px; margin:-1px 0 0 -6.5px;
  background:currentColor; border-radius:2px;
}
body .faq-list > li > a .icon-close::before{ transform:rotate(45deg) }
body .faq-list > li > a .icon-close::after{ transform:rotate(-45deg) }
@media (prefers-reduced-motion:reduce){
  body .faq-list > li > a .icon-show::before{ transition:none }
}

/* 電腦版：優惠圖鋪滿容器寬會變成 490px 高的巨幅，一頁只看得到一檔活動。
   改成左圖右字的橫向卡片，一眼掃得到三四檔。 */
@media (min-width:992px){
  body .faq-list > li > a:has(img){
    grid-template-columns:260px 1fr auto; grid-template-rows:auto; align-items:center;
    gap:var(--s4); padding:var(--s3) var(--pad-dx);
  }
  body .faq-list > li > a:has(img) img{
    grid-column:1; grid-row:1; margin:0; aspect-ratio:16/5; border-radius:12px;
  }
  body .faq-list > li > a:has(img) h3{ grid-column:2; grid-row:1 }
  body .faq-list > li > a:has(img) .icon-show,
  body .faq-list > li > a:has(img) .icon-close{ grid-column:3; grid-row:1 }
}

/* ============================================================
   客服中心（Support/index）— 2026-08-29 新增的頁面
   兩個管道各一張卡，動作按鈕右對齊；下面一段「聯絡前準備什麼」。
   ============================================================ */
body .cs-page{ padding:var(--s5) 0 0 }
body .cs-list{ list-style:none; margin:0 0 var(--s5); padding:0;
  display:flex; flex-direction:column; gap:var(--s3) }
body .cs-item{
  margin:0; padding:var(--pad-mx);
  background:var(--card); border:1px solid var(--line2); border-radius:18px;
  display:flex; flex-direction:column; gap:var(--s3);
}
body .cs-item-name{
  margin:0 0 6px; font-size:19px; font-weight:800; color:var(--g-hi); letter-spacing:.5px;
}
body .cs-item-desc{ margin:0; font-size:16px; line-height:1.8; color:var(--t2) }
body .cs-item-go{ width:100%; min-height:48px }

body .cs-tip{
  padding:var(--pad-mx); border-radius:18px;
  background:rgba(255,255,255,.03); border:1px solid var(--line2);
}
body .cs-tip-title{
  margin:0 0 var(--s2); font-size:16px; font-weight:800; color:var(--t1);
}
body .cs-tip ul{ margin:0; padding-left:1.15em; list-style:disc }
body .cs-tip li{ font-size:16px; line-height:1.9; color:var(--t2) }
body .cs-tip li::marker{ color:var(--g) }

@media (min-width:992px){
  body .cs-item{
    flex-direction:row; align-items:center; justify-content:space-between;
    gap:var(--s5); padding:var(--pad-d) var(--pad-dx);
  }
  body .cs-item-main{ flex:1 1 auto; min-width:0 }
  body .cs-item-go{ flex:0 0 220px; width:220px }
  body .cs-tip{ padding:var(--pad-d) var(--pad-dx) }
}

/* ── 優惠活動的規則表與注意事項 ──────────────────────────
   活動說明是「表格＋條列」的結構，不是一段文字。
   表格窄螢幕放不下就自己橫向捲（天條 34），不去壓縮字級。 */
body .faq-list .act-table{
  width:100%; margin:0 0 var(--s4); border-collapse:collapse;
  font-size:15.5px; line-height:1.6;
}
body .faq-list .act-table th{
  padding:10px 12px; text-align:left; white-space:nowrap;
  background:var(--g-soft); border-bottom:1px solid var(--line);
  color:var(--g-hi); font-size:14px; font-weight:800; letter-spacing:.04em;
}
body .faq-list .act-table td{
  padding:11px 12px; border-bottom:1px solid var(--line3); color:var(--t1);
}
body .faq-list .act-table tr:last-child td{ border-bottom:0 }
body .faq-list .act-table td:first-child{ color:var(--t3); white-space:nowrap }
body .faq-list .act-notes{ margin:0; padding-left:1.15em; list-style:disc }
body .faq-list .act-notes li{ font-size:15.5px; line-height:1.9; color:var(--t2) }
body .faq-list .act-notes li::marker{ color:var(--g) }
/* 內文容器本來只包一段文字，現在裝的是表格＋清單，內距移到容器上 */
body .faq-list .collapse > p,
body .faq-list .collapsing > p{ padding:var(--s4) var(--pad-mx) }
body .faq-list .collapse .act-table{ margin-left:0; margin-right:0 }

/* 共同注意事項：四檔共用的一段，視覺上要比單檔的規則弱一階 */
body .act-common{
  margin-top:var(--s5); padding:var(--pad-mx);
  background:rgba(255,255,255,.03); border:1px solid var(--line2); border-radius:18px;
}
body .act-common h2{
  margin:0 0 var(--s2); font-size:16px; font-weight:800; color:var(--t1);
}
body .act-common ul{ margin:0; padding-left:1.15em; list-style:disc }
body .act-common li{ font-size:15.5px; line-height:1.9; color:var(--t3) }
body .act-common li::marker{ color:var(--line) }
body .act-age{
  margin:var(--s3) 0 0; padding-top:var(--s3); border-top:1px solid var(--line3);
  font-size:14px; color:var(--t3);
}
@media (min-width:992px){
  body .faq-list .collapse > p{ padding:var(--s4) var(--pad-dx) }
  body .act-common{ padding:var(--pad-d) var(--pad-dx) }
}

/* 共同注意事項是跟主標一起插在容器開頭的（樣板的 <ul> 不對稱，
   用解析的方式找清單結尾會插錯位置），這裡用排序把它放到最後。 */
body #faq.faq > .container{ display:flex; flex-direction:column }
body #faq.faq > .container > .pf-title{ order:0 }
body #faq.faq > .container > .pf-lede{ order:1 }
body #faq.faq > .container > .faq-list{ order:2 }
body #faq.faq > .container > .act-common{ order:3 }

/* 活動內文外面那層 <p> 在樣板裡是 <p>\n 內容 \n</p>，
   前後的換行在一般排版下會各撐出一行空白（實測表格上方多 19px）。
   改成 flex 容器 —— 純空白的文字節點在 flex 排版裡會被忽略。 */
body .faq-list .collapse > p,
body .faq-list .collapsing > p{ display:flex; flex-direction:column }

/* 活動說明的外層（原樣板是 <p>，預覽已改成 <div class="act-body">）：
   內距放這裡，表格與清單直接貼齊容器邊。 */
body .faq-list .act-body{ padding:var(--s4) var(--pad-mx) }
body .faq-list .act-body .act-notes{ margin-bottom:0 }
@media (min-width:992px){ body .faq-list .act-body{ padding:var(--s4) var(--pad-dx) } }

/* 首頁主視覺：原圖是 1920×600（3.2:1），容器卻鎖成 2:1，
   object-fit:cover 就把左右兩邊裁掉，標題字被切一半。
   改成跟原圖同比例，整張看得完。 */
body .swiper-slide .testimonial-img{
  width:100%; height:auto; aspect-ratio:16/5; object-fit:cover; display:block;
}

/* 上面那條 height:auto 輸給 .testimonials .testimonial-item img{height:100%}
   （那是給等高卡片用的規則，主視覺不該吃它），這裡補足權重。 */
body .testimonials .testimonial-item .testimonial-img{ height:auto }

/* ── 註冊／登入頁 ────────────────────────────────────
   1. 社群登入鈕：圖片是 135×127 的原圖，剝掉站台 CSS 之後就以原尺寸炸開，
      兩顆佔掉半個畫面。做成跟其他次要動作一樣的藥丸鈕。
   2. Bootstrap 的 .invalid-feedback 預設是隱藏的，靠 JS 加 .is-invalid 才顯示；
      這裡沒有載那支驗證 JS，前台就變成每一欄下面都掛著紅字「請輸入此欄位！」。
      改成預設收起來，欄位真的出錯時才出現。 */
body .log-img{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  min-height:48px; padding:0 var(--s4); border-radius:20px;
  background:var(--n3); border:1px solid var(--line3); color:var(--t1);
  font-size:16px; font-weight:700;
}
body .log-img:hover{ border-color:var(--line); color:var(--g-hi) }
body .log-img img{
  width:24px; height:24px; object-fit:contain; flex:0 0 auto;
  background:#fff; border-radius:6px; padding:2px; box-sizing:border-box;
}
body .invalid-feedback{ display:none }
body .is-invalid ~ .invalid-feedback,
body .invalid-feedback.show{ display:block; color:#ff9a90; font-size:14px; margin-top:6px }

/* 註冊表單的 <form> 直接掛了 Bootstrap 的 .was-validated，
   那個 class 的意思是「已經驗證過」，於是所有必填欄位一載入就亮紅字
   「請輸入此欄位！」——使用者還沒打任何字就被指正。線上也是這樣。
   改成：預設不顯示，等使用者真的填錯（:user-invalid）才出現。 */
body form.was-validated :invalid ~ .invalid-feedback,
body form.was-validated .form-control:invalid ~ .invalid-feedback{ display:none }
body :user-invalid ~ .invalid-feedback{
  display:block; margin-top:6px; color:#ff9a90; font-size:14px;
}
body form.was-validated :invalid{ border-color:var(--line3) }
body :user-invalid{ border-color:#e2645c }

/* ============================================================
   儲值頁的付款方式（2026-08-31 併入他人更新後補的規則）
   對方的新版付款清單原本靠頁內 <style> 撐著，Route B 把頁內樣式整段移除，
   這裡把還需要的部分接回來。
   ============================================================ */
/* 子選項的品牌徽章是圖示了（原本是單字方塊，很醜）。
   圖本身自帶白底圓形，這裡只管尺寸。 */
body img.brand-icon{
  width:36px; height:36px; border-radius:999px;
  background:transparent; padding:0; object-fit:contain;
}

/* 內文字級下限（天條 34）：這三個是對方新加的區塊，字級都在 16 以下 */
body .section-label{ font-size:16px; letter-spacing:.08em }
body .sub-payment-item{ font-size:16px }
body .info-box{ font-size:16px; line-height:1.9 }

/* 分頁列的觸控高度：40px 低於 44px 下限 */
body .pf-tabs a{ min-height:44px }

/* ============================================================
   首頁「捕魚」分類
   這一區跟其他分類用的不是同一套結構（.hotG-list / .h-link / .h-image，
   不是 .gamesBox），先前完全沒被樣式表覆蓋 ——
   前台是一張張 362px 全寬大圖直排，一個分類就 4,900px 高。
   改成跟其他分類一致的卡片格線。
   ============================================================ */
body #fish .hotG-list{
  display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s3);
  margin:0; padding:0;
}
/* 原本的 50%／double 分組是舊版的拼貼版型，這裡讓 <a> 直接成為格線項目 */
body #fish .h-link{ display:contents }
body #fish .h-link > a{
  display:flex; flex-direction:column-reverse; overflow:hidden;
  background:var(--card); border:1px solid var(--line2); border-radius:14px;
  color:var(--t3); font-size:12.5px; font-weight:700; letter-spacing:.06em;
  text-align:center; text-decoration:none;
}
body #fish .h-link > a:hover{ border-color:var(--line); color:var(--g-hi) }
/* 廠商代號是 <a> 裡的裸文字節點，靠這層內距把它變成圖片下方的說明列 */
body #fish .h-link > a{ padding:0 0 8px }
body #fish .h-image{ margin:0 0 8px; line-height:0 }
body #fish .h-image img{
  width:100%; height:auto; aspect-ratio:1/1; object-fit:cover; display:block;
}
@media (min-width:768px){
  body #fish .hotG-list{ grid-template-columns:repeat(3,1fr) }
}
@media (min-width:992px){
  body #fish .hotG-list{ grid-template-columns:repeat(4,1fr); gap:var(--s4) }
}

/* ============================================================
   首頁公告彈窗（#indexShowBox）
   這個彈窗的外觀原本寫在 index.php 的頁內 <style> 裡，
   Route B 把頁內樣式整段移除之後就只剩 Bootstrap 的預設：
   .modal-content 是白底，但文字是淺色 —— 對比 1.1，公告等於看不見；
   ✕ 與兩顆按鈕是深色字配透明底，對比 1.02，也是看不見。
   ============================================================ */
body #indexShowBox .modal-content{
  background:var(--card); border:1px solid var(--line); border-radius:18px;
  color:var(--t1); box-shadow:0 18px 48px rgba(0,0,0,.55);
}
body #indexShowBox .fh-navy-top-bar{
  height:4px; margin:0; border-radius:18px 18px 0 0; background:var(--g-bar);
}
body #indexShowBox .fh-navy-header{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  padding:var(--s3) var(--pad-mx) 0;
}
body #indexShowBox .fh-navy-logo-text{
  margin:0; font-size:18px; font-weight:800; color:var(--g-hi); letter-spacing:.5px;
}
body #indexShowBox .fh-navy-close-x{
  flex:0 0 auto; width:44px; height:44px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--g-soft); border:1px solid var(--line2); border-radius:999px;
  color:var(--g-hi); font-size:18px; line-height:1; cursor:pointer;
}
body #indexShowBox .fh-navy-close-x:hover{ border-color:var(--line); color:#fff }
body #indexShowBox .fh-navy-body{ padding:var(--s3) var(--pad-mx) }
body #indexShowBox .fh-navy-list{ display:flex; flex-direction:column; gap:var(--s2) }
body #indexShowBox .fh-navy-list > *{
  padding:12px 14px; border-radius:12px; font-size:16px; line-height:1.7;
  background:rgba(255,255,255,.04); border:1px solid var(--line3); color:var(--t1);
}
body #indexShowBox .fh-navy-footer{
  display:flex; gap:var(--s2); justify-content:flex-end;
  padding:0 var(--pad-mx) var(--s4); border-top:0;
}
body #indexShowBox .fh-navy-btn{
  min-height:44px; padding:0 20px; border-radius:20px;
  font-size:16px; font-weight:700; cursor:pointer;
}
/* 「不再顯示」是次要選擇，「關閉」才是主要動作 */
body #indexShowBox .fh-navy-btn-dim{
  background:var(--n3); border:1px solid var(--line3); color:var(--t1);
}
body #indexShowBox .fh-navy-btn-gold{
  background:var(--btn-gold); border:0; color:var(--g-ink); font-weight:800;
}
@media (min-width:992px){
  body #indexShowBox .fh-navy-header{ padding:var(--s3) var(--pad-dx) 0 }
  body #indexShowBox .fh-navy-body{ padding:var(--s3) var(--pad-dx) }
  body #indexShowBox .fh-navy-footer{ padding:0 var(--pad-dx) var(--s4) }
}

/* 上面那組彈窗按鈕的樣式輸給了「沒有 .btn 的 button 一律金色」那條（帶 !important），
   三顆全變金的，看不出哪顆才是主要動作。這裡補足權重：
   ✕ 與「不再顯示」是次要選擇，只有「關閉」留金色實心。 */
body #indexShowBox .fh-navy-close-x{
  background:var(--g-soft) !important; background-image:none !important;
  border:1px solid var(--line2) !important; color:var(--g-hi) !important;
  box-shadow:none !important; text-shadow:none !important;
}
body #indexShowBox .fh-navy-btn-dim{
  background:var(--n3) !important; background-image:none !important;
  border:1px solid var(--line3) !important; color:var(--t1) !important;
  box-shadow:none !important; text-shadow:none !important;
}

/* 頁首那條金線與「富亨娛樂城／✕」是 .modal-dialog 的直接子元素，
   不在 .modal-content 裡 —— 卡片畫在 content 上就會讓標題列浮在卡片外，
   ✕ 還會疊到頁面的頁首上。改成卡片畫在 dialog，content 透明。 */
body #indexShowBox .modal-dialog{
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--card); border:1px solid var(--line); border-radius:18px;
  box-shadow:0 18px 48px rgba(0,0,0,.55);
  margin:6vh auto; max-width:min(560px, calc(100vw - 32px));
}
body #indexShowBox .modal-content{
  background:none; border:0; border-radius:0; box-shadow:none;
}
body #indexShowBox .fh-navy-top-bar{ border-radius:0 }

/* ============================================================
   電腦版首頁的兩個問題（Owner 2026-08-31 回報）
   ============================================================ */
/* 一、儲值／轉點在近距離出現兩次：頁首右上一組，餘額卡裡又一組。
   餘額卡那組緊鄰餘額、資訊完整（多一顆紅利提領），留它；
   有餘額卡的頁面就把頁首那組收起來。其他頁面沒有餘額卡，頁首那組照常顯示。 */
@media (min-width:992px){
  body:has(.u-conWbtn) #header .link .Wbtn.btn-dpst,
  body:has(.u-conWbtn) #header .link .Wbtn.btn-tsfr{ display:none }
}

/* 二、遊戲分類軌是整個視窗滿版（0～1280），上下的跑馬燈與遊戲格線卻是
   置中限寬（84～1196），三者對不齊。分類軌改用同一組容器規則。 */
/* .GameNav 本身是滿版的，但裡面已經包了一層 .container（限寬置中、左右 14px 內距），
   所以分類鈕的左右緣本來就跟跑馬燈、遊戲格線對齊 ——
   外面再加一層限寬或內距只會疊成兩層、反而更縮。這裡不動它。 */

/* 分類軌裡那層 .container 在寬螢幕不吃 max-width（1440 時整條拉到 74~1366，
   上下的跑馬燈與遊戲格線卻停在 164~1276）。補上跟 .container 一樣的限寬與內距，
   三個區塊的左右緣才會在所有寬度都對齊。 */
body .GameNav > .container{
  max-width:1140px; margin-left:auto; margin-right:auto;
  padding-left:14px; padding-right:14px; box-sizing:border-box;
}

/* ============================================================
   2026-08-31 · 登入／註冊／公告彈窗的三個比例問題
   ============================================================ */

/* ── 驗證碼圖 ────────────────────────────────────────────
   它常常是 flex 子元素，只寫 width:auto 會被拉滿變形
   （登入表單裡實測被拉成 296×44，比例 6.7，原圖是 3.6）。
   用 aspect-ratio 把比例釘死，再用 object-fit 保險。
   圖本身已經改成 180×50，顯示 44px 高是縮小，不會糊。 */
body .codeimg,
body #regImg{
  height:44px; width:auto; max-width:100%;
  flex:0 0 auto; align-self:center;
  aspect-ratio:18/5; object-fit:contain;
  background:#fff; border-radius:var(--r1); cursor:pointer;
}

/* ── 第三方登入鈕：兩顆一樣大、商標一樣重 ────────────────
   原本是 62×48 的深色藥丸，裡面再包一個 24px 白方塊；
   Google 是透明底商標（看起來只有一小顆 G），
   LINE 自己就是滿版綠方塊（看起來整顆都是它）—— 兩顆完全不像同一組。 */
/* 這兩張圖本身就是同規格的 app icon（畫布 72×68、內容邊界一致），
   外面不要再包一層白底 —— 白底的 Google 會跟它融成一塊顯得特別大。
   讓圖各自填滿同一個 52×52 的框，兩顆高度就一定一樣。 */
body .log-img{
  width:52px; height:52px; min-height:0; padding:0;
  border:0; background:transparent; border-radius:12px;
}
body .log-img img{
  width:100%; height:100%; object-fit:contain;
  background:transparent; padding:0; border-radius:0;
}
body .log-img:hover img,
body .log-img:focus-visible img{ filter:brightness(1.08); }

/* ── 登入後的公告彈窗：不要接近滿版 ──────────────────────
   內容區原本沒有高度上限，公告一多就整片蓋掉畫面。
   讓內容自己捲，外框固定在畫面中間一塊。 */
body #indexShowBox .modal-dialog{
  max-width:440px; width:calc(100% - 48px);
  margin:6vh auto;
  /* Bootstrap 給 .modal-dialog 的是 pointer-events:none，只有 .modal-content 收得到點擊。
     這個彈窗的金線、標題與 ✕ 都在 .modal-content 外面（是 dialog 的直接子元素），
     所以 ✕ 從來就按不到 —— 實測 Playwright 也點不下去。 */
  pointer-events:auto;
}
body #indexShowBox .fh-navy-body{
  max-height:min(44vh, 340px);
  overflow-y:auto; overscroll-behavior:contain;
}
/* 捲軸做窄一點，不要在深色卡片上出現一條亮灰 */
body #indexShowBox .fh-navy-body::-webkit-scrollbar{ width:6px }
body #indexShowBox .fh-navy-body::-webkit-scrollbar-thumb{
  background:var(--line2); border-radius:3px;
}

/* ── 快速轉點彈窗（#authModalTransfer）────────────────────
   版面原本在 member.css，走獨立樣式表之後整組沒人接：
   標題貼邊、「轉出 主錢包48,900」擠成一行、中間的箭頭字元變成
   看不懂的符號自己佔一行、三顆按鈕全是金色分不出主次。 */
body #authModalTransfer .content{
  display:flex; flex-direction:column; gap:var(--s3);
  padding:var(--s4);
}
body #authModalTransfer h5{
  margin:0; padding-right:36px;
  font-size:19px; font-weight:800; color:var(--g-hi); letter-spacing:.02em;
}

/* 轉出 → 轉入 收成同一張卡，一眼看得出點數的流向 */
body #authModalTransfer .transfer-group-box{
  display:flex; flex-direction:column; gap:var(--s2);
  padding:var(--s3); border-radius:var(--r2);
  background:var(--n3); border:1px solid var(--line3);
}
body #authModalTransfer .transfer-group{
  display:flex; flex-direction:column; align-items:stretch; gap:5px;
  min-width:0;
}
body #authModalTransfer .transfer-group > label{
  margin:0; font-size:13px; font-weight:700; color:var(--t3); letter-spacing:.04em;
}
body #authModalTransfer .tf-val{
  font-size:17px; font-weight:800; color:var(--t1);
  font-variant-numeric:tabular-nums;
}

/* 中間的箭頭：樣板寫的是 ⥦，多數字型沒有這個字，
   畫出來是一個看不懂的符號。改成自己畫的圓形箭頭。 */
body #authModalTransfer .transferToIcon{
  align-self:center; flex:0 0 auto;
  width:28px; height:28px; border-radius:50%;
  font-size:0; line-height:0;
  background:var(--g-soft); border:1px solid var(--line2);
  display:flex; align-items:center; justify-content:center;
}
body #authModalTransfer .transferToIcon::after{
  content:"↓"; font-size:15px; line-height:1; font-weight:700; color:var(--g-hi);
}

/* 金額與「全部轉入」並排，省一整列 */
body #authModalTransfer .transfer-group.Amount{
  flex-direction:row; align-items:center; gap:var(--s2);
}
body #authModalTransfer .transfer-group.Amount > input{ flex:1; min-width:0; }
body #authModalTransfer button.transfer-all{ flex:0 0 auto; padding:0 var(--s3); }

/* 一頁只留一顆主要動作：只有「轉點並進入」是金色實心 */
body #authModalTransfer .transfer-actions{
  display:flex; flex-direction:column; gap:var(--s2);
}
body #authModalTransfer .transfer-actions button{ width:100%; }
body #authModalTransfer button.transfer-all:not(.btn):not(.quick-btn):not(.tab-btn):not(.close):not(.close_m),
body #authModalTransfer .transfer-actions button:not(.btn-confirm):not(.btn):not(.quick-btn):not(.tab-btn):not(.close):not(.close_m){
  background:var(--g-soft)!important; background-image:none!important;
  border:1px solid var(--line)!important; color:var(--g-hi)!important;
  box-shadow:none!important; text-shadow:none!important;
}

/* 寬一點就把轉出／轉入並排，箭頭跟著轉成向右 */
@media (min-width:520px){
  body #authModalTransfer .transfer-group-box{ flex-direction:row; align-items:center; }
  body #authModalTransfer .transfer-group{ flex:1; }
  body #authModalTransfer .transferToIcon::after{ content:"\2192"; }
  body #authModalTransfer .transfer-actions{ flex-direction:row; }
}

/* ── 全站改吃這一支之後才需要的四條（原本在 style.css）──────
   廠商頁、SEO 頁那些幾乎全靠 Bootstrap，真正會少掉的只有這幾個。 */

/* 公告清單的日期戳記：舊的是 .8em 的亮藍，換成這邊的次要文字色 */
body #notice .tab-content .date{ font-size:14px; color:var(--t3); }

/* 電競頁的區塊上下留白（舊的是 80px，改用這邊的尺度） */
body .featured{ padding:var(--s7) 0; }

/* 產品頁的 .button：舊的是橘底白字，換成站上的次要動作 */
body a.button, body .button:not(button){
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:0 var(--s4); border-radius:20px;
  background:var(--g-soft); border:1px solid var(--line);
  color:var(--g-hi); font-size:16px; font-weight:700; text-decoration:none;
}
body a.button:hover{ border-color:var(--g); color:#fff; }

/* ── 會員中心的帳戶驗證進度（2026-09-01）──────────────────
   三關都過就整塊不輸出，所以這裡只管「還沒完成」的樣子。 */
body .fh-verify .fh-h2{ display:flex; align-items:baseline; gap:var(--s2); flex-wrap:wrap; }
body .fh-vleft{
  font-size:13px; font-weight:700; letter-spacing:.02em;
  padding:2px 10px; border-radius:999px;
  background:var(--g-soft); border:1px solid var(--line2); color:var(--g-hi);
}
body .fh-vhint{ margin:0 0 var(--s3); font-size:16px; color:var(--t3); }
body .fh-vsteps{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:var(--s2);
}
body .fh-vstep{
  display:flex; align-items:center; gap:var(--s3);
  min-height:64px; padding:var(--s2) var(--s3);
  background:var(--n3); border:1px solid var(--line3); border-radius:12px;
}
body .fh-vno{
  flex:0 0 auto; width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:800;
  background:var(--n4); border:1px solid var(--line3); color:var(--t3);
}
body .fh-vstep.is-done{ border-color:var(--line2); }
body .fh-vstep.is-done .fh-vno{
  background:var(--g-soft); border-color:var(--g); color:var(--g-hi);
}
body .fh-vtext{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
body .fh-vtext b{ font-size:16px; font-weight:700; color:var(--t1); }
body .fh-vtext small{ font-size:14px; color:var(--t3); }
body .fh-vstep.is-done .fh-vtext b{ color:var(--t2); }
body a.fh-vgo{
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:0 var(--s3); border-radius:20px;
  background:var(--btn-gold); color:var(--g-ink);
  font-size:15px; font-weight:800; text-decoration:none;
  box-shadow:var(--btn-gold-sh);
}
body a.fh-vgo:hover{ background:var(--btn-gold-hi); color:var(--g-ink); }

/* ── 側欄的重複路徑（2026-09-01）──────────────────────────
   桌機的側欄同時出現「六宮格捷徑」與「文字清單」，七項裡有五項
   連到完全一樣的網址（手機只顯示六宮格，所以只有桌機看得到重複）。
   把清單裡重複的那幾項收起來。
   2026-09-02 補：提領（Manger/withdrawal）原本留著，理由寫「六宮格沒有」——
   那只在會員中心首頁成立，其他頁的六宮格是有提領磚的，所以一併收掉。
   提領仍有路：分頁列每一頁都有「虛幣交易」指向同一個網址。
   用網址判斷而不是位置 —— 選單順序之後調動也不會失準。 */
@media (min-width:992px){
  body .member-menu_web .menu-link li:has(a[href*="Manger/transfer"]),
  body .member-menu_web .menu-link li:has(a[href*="Manger/withdrawal"]),
  body .member-menu_web .menu-link li:has(a[href*="Manger/rake"]),
  body .member-menu_web .menu-link li:has(a[href*="History/index"]),
  body .member-menu_web .menu-link li:has(a[href*="History/sell"]),
  body .member-menu_web .menu-link li:has(a[href*="History/game_history"]){
    /* 這些 li 掛著 Bootstrap 的 .d-md-block（帶 !important），要用 !important 才壓得過 */
    display:none !important;
  }
}

/* 信用卡區塊的說明字（2026-09-01） */
body .fh-card-hint{
  margin:0 0 var(--s3); font-size:16px; color:var(--t3); line-height:1.6;
}

/* ── 帳戶資料折疊卡（2026-09-04 兩頁併一頁）─────────────────
   內容直接引用帳戶管理頁的共用元件，所以元件自己那層外框與 <h4>
   在這裡要收掉 —— 否則會變成卡中卡、標題還跟 summary 重複。 */
body .fh-acct{ margin-top:var(--s5); }
body .fh-acc{
  background:var(--card); border:1px solid var(--line3); border-radius:14px;
  box-shadow:var(--sheen); overflow:hidden; margin-top:var(--s2);
}
body .fh-acc summary{
  list-style:none; cursor:pointer; min-height:56px; padding:0 var(--s3);
  display:flex; align-items:center; gap:var(--s2);
}
body .fh-acc summary::-webkit-details-marker{ display:none; }
body .fh-acc-n{ font-size:16px; font-weight:700; color:var(--t1); }
body .fh-acc-p{
  font-size:13px; font-weight:700; padding:2px 10px; border-radius:11px; border:1px solid;
}
body .fh-acc-p.is-ok{
  color:#63d9a0; border-color:rgba(99,217,160,.45); background:rgba(99,217,160,.10);
}
body .fh-acc-p.is-no{
  color:#ff9080; border-color:rgba(255,144,128,.45); background:rgba(255,144,128,.10);
}
body .fh-acc-c{ margin-left:auto; color:var(--t3); font-size:13px; }
body .fh-acc[open] .fh-acc-c{ transform:rotate(180deg); }
body .fh-acc-b .box{
  background:none!important; border:0!important; box-shadow:none!important;
  padding:0 var(--s3) var(--s3)!important; margin:0!important; border-radius:0!important;
}
body .fh-acc-b .box h4{ display:none; }
@media (min-width:992px){
  body .fh-acct{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s2); }
  body .fh-acct > h2{ grid-column:1/-1; }
  body .fh-acc{ margin-top:0; }
}

/* ── 所有彈窗深色化（2026-09-04）────────────────────────────
   Route B 移除頁內樣式之後只剩 Bootstrap 預設：.modal-content 是白底，
   但站上全域文字是淺色 —— 淺字疊白底等於看不見（天條 41）。
   先前只單獨修過 #indexShowBox，其餘八個彈窗都還壞著。
   這裡改成通用規則，並排除 #indexShowBox：它刻意把卡片畫在
   .modal-dialog 上、content 透明，被這裡蓋掉就會壞。 */
body .modal:not(#indexShowBox) .modal-content{
  background:var(--card); border:1px solid var(--line); border-radius:16px;
  color:var(--t1); box-shadow:var(--sheen), 0 18px 44px rgba(0,0,0,.55);
}
body .modal:not(#indexShowBox) .modal-header,
body .modal:not(#indexShowBox) .modal-footer{ border-color:var(--line3); }
body .modal:not(#indexShowBox) .modal-title{ color:var(--t1); font-weight:700; }
body .modal:not(#indexShowBox) .close{
  color:var(--t2); opacity:1; text-shadow:none; font-size:26px; font-weight:400;
  min-width:44px; min-height:44px;
}
body .modal:not(#indexShowBox) .close:hover{ color:var(--g); opacity:1; }
body .modal:not(#indexShowBox) label{ color:var(--t2); font-size:16px; }
body .modal:not(#indexShowBox) label span{ color:var(--t3); font-size:13px; }
body .modal:not(#indexShowBox) .form-control{
  background:var(--n2); border:1px solid var(--line3); color:var(--t1); min-height:48px;
}
body .modal:not(#indexShowBox) .form-control::placeholder{ color:var(--t3); opacity:1; }
body .modal:not(#indexShowBox) .form-control:focus{
  background:var(--n2); color:var(--t1);
  border-color:var(--line); box-shadow:0 0 0 3px rgba(246,199,68,.15);
}
/* 按鈕沿用站上那組，不要 Bootstrap 的淺底淺字（天條 55：同一種動作全站長一樣） */
body .modal:not(#indexShowBox) .btn{
  min-height:44px; padding:0 22px; border-radius:22px; font-size:16px; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center;
}
body .modal:not(#indexShowBox) .btn-danger,
body .modal:not(#indexShowBox) .btn-primary,
body .modal:not(#indexShowBox) .btn-warning{
  background:var(--btn-gold); border-color:transparent; color:var(--g-ink);
  box-shadow:var(--btn-gold-sh);
}
body .modal:not(#indexShowBox) .btn-outline-danger,
body .modal:not(#indexShowBox) .btn-secondary,
body .modal:not(#indexShowBox) .btn-outline-secondary{
  background:none; border:1px solid var(--line3); color:var(--t2); box-shadow:none;
}