/*
 * dg22 品牌樣式表
 * ---------------------------------------------------------------
 * 天條 49:樣式只加不改。所有新規則一律寫在這一支,
 * 不動 assets/www/css/style.css(40KB,站台原始樣式)。
 *
 * 停用方式:移除 application/views/www/includes/head.php 裡
 * 引用這一支的那一行即可完全還原,原始檔零風險。
 *
 * 2026-08-25 建立(空檔,先驗部署管線)
 * 2026-08-25 批次 2:遊戲大廳改版
 * ---------------------------------------------------------------
 */

:root{
  --dg-brand-css:"loaded";
  --dg-bg:#0d0d0f;      --dg-surface:#1c1826;  --dg-raise:#2a2434;
  --dg-text:#f6f1e6;    --dg-muted:#b9b2a8;    --dg-dim:#8b847a;
  --dg-gold:#c9a24b;    --dg-gold-hi:#f0dda6;
  --dg-line:rgba(201,162,75,.34);
  --dg-line-soft:rgba(255,255,255,.10);
  --dg-plate:#151120;
  --dg-gut:24px;
}
@media(min-width:1248px){ :root{--dg-gut:max(24px,calc(50% - 600px))} }

/* ===== 底色 ===== */
body{background:var(--dg-bg);color:var(--dg-text)}

/* ===== 公告跑馬燈:後台 news 沒資料,先隱藏(Owner 2026-08-25 裁示) ===== */
.mq-section{display:none}

/* ===== 頁首 ===== */
#header{background:linear-gradient(180deg,#1c1726,#100e14);box-shadow:none;
        border-bottom:1px solid var(--dg-line)}
.navbar-bg{background:transparent;color:var(--dg-text)}
#navbar ul li a.nav-link{color:var(--dg-muted)}
#navbar ul li a.nav-link:hover{color:var(--dg-gold-hi)}
body a.nav-link.scrollto.nav-home{color:var(--dg-gold-hi)!important}
.mobile-nav-toggle{color:var(--dg-gold-hi)}
.btn-login{background:rgba(201,162,75,.12)!important;color:var(--dg-gold-hi)!important;
           border:1px solid rgba(201,162,75,.55)!important}
.btn-register{background:linear-gradient(160deg,#f5e4b4,#c9a24b)!important;color:#171216!important;
              border:1px solid #f0dda6!important}
.btn-register:hover{background:linear-gradient(160deg,#fff0cd,#d9b25c)!important;color:#171216!important}

/* ===== 主視覺 ===== */
.testimonials{background:var(--dg-bg)}
.testimonials .swiper-pagination .swiper-pagination-bullet{background:rgba(255,255,255,.42)}
.testimonials .swiper-pagination .swiper-pagination-bullet-active{
  background:linear-gradient(90deg,#c9a24b,#f0dda6);box-shadow:none;width:18px;border-radius:99px}

/* ===== 分類軌 ===== */
.GameNav{padding:0}
.GameNav .container{max-width:none!important;padding:0}
.GameNav .nav{background:transparent!important;box-shadow:none!important;border-radius:0!important;
              flex-wrap:nowrap!important;justify-content:flex-start!important}
.GameNav li.nav-item.col{flex:0 0 auto!important;max-width:none;padding:0}
.GameNav .nav-link.color{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  background:var(--dg-raise);border:1px solid rgba(201,162,75,.2);border-radius:14px;
  color:var(--dg-muted);font-weight:800;letter-spacing:.5px;filter:none;padding:0;
  transition:background .18s,border-color .18s,color .18s}
.GameNav .nav-link.color .img{width:auto;height:auto;margin:0;overflow:visible;display:block;
                              color:var(--dg-gold-hi)}
.GameNav .nav-link.color .img svg{display:block}
.GameNav .nav-link.color.active{
  background:linear-gradient(155deg,#f5e4b4,#c9a24b);border-color:#f0dda6;color:#171216;
  box-shadow:0 6px 20px rgba(201,162,75,.34);filter:none}
.GameNav .nav-link.color.active .img{color:#171216}

/* ===== 遊戲卡 ===== */
.tab-content .featured{padding:0;background:transparent}
.g-grop-body.g-grop-m{padding-top:0}
.g-grop-m .container{max-width:none;padding:0}
.game-grop{display:grid;justify-content:stretch}
.game-grop .game-body{
  position:relative;width:auto!important;padding:0!important;margin:0;
  display:flex!important;flex-direction:column;justify-content:flex-end;
  overflow:hidden;border:1px solid var(--dg-line);border-radius:16px;
  background:linear-gradient(168deg,#3d3449 0%,#2a2337 52%,#1f1a29 100%);
  transition:border-color .18s,transform .18s}
.game-grop .game-body:hover{border-color:#f0dda6;transform:translateY(-2px)}
.game-grop .game-body > img{
  position:absolute;left:50%;top:2%;height:70%;width:auto!important;max-width:none;
  transform:translateX(-50%);display:block;z-index:0}
/* 字牌用 flex 靠底,不用 absolute —— 否則覆蓋層的 inset:0 會只蓋住字牌,整張卡點不到 */
.game-grop .game-body .link{
  position:static;width:auto!important;margin:0!important;z-index:3;
  padding:9px 8px 10px;text-align:center;background:var(--dg-plate);
  border-top:1px solid rgba(201,162,75,.22);box-shadow:0 -10px 18px rgba(13,11,18,.72)}
.game-grop .link h3{margin:0;font-size:15px;line-height:1.3;font-weight:900;
                    color:var(--dg-text);letter-spacing:.5px}
.game-grop .link h3 br,
.game-grop .link h3 small{display:none}

/* 整張卡可點:保留原本的 a(href 由 PHP 判斷登入前後),拉成覆蓋層 */
.game-grop .link .game-start{
  position:absolute;inset:0;z-index:5;display:block;width:auto;margin:0;padding:0;
  background:transparent;border:0;border-radius:16px;font-size:0;line-height:0;color:transparent}
.game-grop .link .game-start:focus-visible{outline:2px solid var(--dg-gold-hi);outline-offset:-3px}

/* ===== 主卡:每個分類第一張放大,圖靠右、字靠左 ===== */
#all .game-grop > .game-body:first-child > img,
#slot .game-grop > .game-body:first-child > img,
#fish .game-grop > .game-body:first-child > img,
#chess .game-grop > .game-body:first-child > img{
  left:auto;right:1%;top:-8%;height:118%;transform:none}
#all .game-grop > .game-body:first-child::before,
#slot .game-grop > .game-body:first-child::before,
#fish .game-grop > .game-body:first-child::before,
#chess .game-grop > .game-body:first-child::before{
  content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,
  rgba(13,11,18,.94) 0%,rgba(13,11,18,.86) 34%,rgba(13,11,18,.42) 58%,rgba(13,11,18,0) 78%)}
#all .game-grop > .game-body:first-child .link,
#slot .game-grop > .game-body:first-child .link,
#fish .game-grop > .game-body:first-child .link,
#chess .game-grop > .game-body:first-child .link{
  position:static;text-align:left;padding:24px 16px 14px;background:linear-gradient(180deg,
  rgba(13,11,18,0) 0%,rgba(13,11,18,.72) 32%,rgba(13,11,18,.95) 66%,#0d0b12 100%);
  border-top:0;box-shadow:none;max-width:63%;align-self:flex-start}
#all .game-grop > .game-body:first-child .link h3,
#slot .game-grop > .game-body:first-child .link h3,
#fish .game-grop > .game-body:first-child .link h3,
#chess .game-grop > .game-body:first-child .link h3{font-size:18px;color:var(--dg-gold-hi)}
#all .game-grop > .game-body:first-child .link h3 br,
#slot .game-grop > .game-body:first-child .link h3 br,
#fish .game-grop > .game-body:first-child .link h3 br,
#chess .game-grop > .game-body:first-child .link h3 br{display:block}
#all .game-grop > .game-body:first-child .link h3 small,
#slot .game-grop > .game-body:first-child .link h3 small,
#fish .game-grop > .game-body:first-child .link h3 small,
#chess .game-grop > .game-body:first-child .link h3 small{
  display:block;font-size:11px;font-weight:700;letter-spacing:1px;
  color:var(--dg-muted);margin-top:5px}

/* ===== 手機(<=767px) ===== */
@media(max-width:767px){
  .GameNav{float:left;width:94px;padding:14px 0 14px 12px}
  .GameNav .nav{flex-direction:column;gap:8px}
  .GameNav li.nav-item.col{width:82px}
  .GameNav .nav-link.color{height:68px;font-size:14px}
  .GameNav .nav-link.color .img svg{width:26px;height:26px}
  .tab-content{margin-left:94px;padding:14px 12px 20px 0}
  .game-grop{grid-template-columns:1fr 1fr;gap:10px}
  .game-grop .game-body{aspect-ratio:1/1}
  #all .game-grop > .game-body:first-child,
  #slot .game-grop > .game-body:first-child,
  #fish .game-grop > .game-body:first-child,
  #chess .game-grop > .game-body:first-child{grid-column:1/-1;aspect-ratio:2/1}
  /* 卡片少的分類:放大、改單欄,不讓右邊開一大塊空白 */
  #chess .game-grop{grid-template-columns:1fr}
  #chess .game-grop .game-body{aspect-ratio:2/1}
  #sport .game-grop,#keno .game-grop{grid-template-columns:1fr}
  #sport .game-grop .game-body,#keno .game-grop .game-body{aspect-ratio:4/3}
  #footer{clear:both}
}

/* ===== 桌機(>=768px) ===== */

/* ===== 平板 768–1023px(天條 36) ===== */
@media(min-width:768px) and (max-width:1023px){
  .GameNav{float:left;width:112px;margin-left:20px;padding:20px 0}
  .GameNav .nav{flex-direction:column;gap:10px}
  .GameNav li.nav-item.col{width:112px}
  .GameNav .nav-link.color{height:64px;font-size:14px}
  .GameNav .nav-link.color .img svg{width:26px;height:26px}
  .tab-content{margin-left:152px;margin-right:20px;padding:20px 0 28px}
  #footer{clear:both}
  .tab-content .featured.index-about{display:none!important}
  .tab-content .g-grop-m{display:block!important}
  .game-grop{grid-template-columns:repeat(4,1fr);gap:14px}
  .game-grop .game-body{aspect-ratio:1/1}
  .game-grop .link h3{font-size:15px}
  /* 各分類的張數不同,欄數與主卡形狀分開調,兩邊都不留落單尾巴 */
  #all .game-grop > .game-body:first-child,
  #fish .game-grop > .game-body:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
  #slot .game-grop > .game-body:first-child{grid-column:span 2;aspect-ratio:2/1}
  #chess .game-grop{grid-template-columns:repeat(3,1fr)}
  #chess .game-grop > .game-body:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
  #sport .game-grop,#keno .game-grop{grid-template-columns:repeat(2,1fr)}
  #sport .game-grop .game-body,#keno .game-grop .game-body{aspect-ratio:3/4}
  #all .game-grop > .game-body:first-child .link h3,
  #slot .game-grop > .game-body:first-child .link h3,
  #fish .game-grop > .game-body:first-child .link h3,
  #chess .game-grop > .game-body:first-child .link h3{font-size:19px}
}
@media(min-width:1024px){
  .GameNav{float:left;width:132px;margin-left:var(--dg-gut);padding:26px 0 26px}
  .GameNav .nav{flex-direction:column;gap:12px}
  .GameNav li.nav-item.col{width:132px}
  .GameNav .nav-link.color{height:80px;font-size:15px}
  .GameNav .nav-link.color .img svg{width:30px;height:30px}
  .tab-content{margin-left:calc(var(--dg-gut) + 156px);margin-right:var(--dg-gut);
               padding:26px 0 36px}
  #footer{clear:both}
  /* 真人／體育／彩票 的桌機專用敘述區塊,改用與其他分類一致的卡片格線 */
  .tab-content .featured.index-about{display:none!important}
  .tab-content .g-grop-m{display:block!important}
  .game-grop{grid-template-columns:repeat(4,1fr);gap:18px}
  .game-grop .game-body{aspect-ratio:1/1}
  .game-grop .link h3{font-size:17px}
  /* 依各分類實際張數決定欄數與主卡形狀,不留落單尾巴(天條 55) */
  #all .game-grop > .game-body:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
  #slot .game-grop > .game-body:first-child{grid-column:span 2;aspect-ratio:2/1}
  #chess .game-grop{grid-template-columns:repeat(3,1fr)}
  #chess .game-grop > .game-body:first-child{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
  #fish .game-grop{grid-template-columns:repeat(5,1fr)}
  #fish .game-grop > .game-body:first-child{grid-column:span 2;aspect-ratio:2/1}
  #sport .game-grop,#keno .game-grop{grid-template-columns:repeat(2,1fr)}
  #sport .game-grop .game-body,#keno .game-grop .game-body{aspect-ratio:1/1}
  #all .game-grop > .game-body:first-child .link h3,
  #slot .game-grop > .game-body:first-child .link h3,
  #fish .game-grop > .game-body:first-child .link h3,
  #chess .game-grop > .game-body:first-child .link h3{font-size:22px}
}

/* ===== 頁首選單在 992–1279 會塞不下(既有問題),縮字級與左右內距 ===== */
@media(min-width:992px) and (max-width:1279px){
  #navbar ul li a.nav-link{font-size:14px;padding-left:10px;padding-right:10px}
  .btn-login,.btn-register{width:84px!important;font-size:15px!important}
}

/* ===== 登入 / 註冊 ===== */
section#register{margin-top:0;padding:34px 16px 40px;background:var(--dg-bg)}
#register .scontainer,#register .container{max-width:none;padding:0}
#register .row{margin:0}
#register .col-md-6{width:100%;max-width:460px;margin:0 auto;padding:0;flex:0 0 auto}
/* 標題 */
#register .section-title{padding-bottom:0;text-align:left}
#register .section-title h2,#register form > h4.text-center:first-of-type{
  font-size:26px;font-weight:900;color:var(--dg-gold-hi);letter-spacing:1px;
  margin:0 0 18px;text-align:left;text-transform:none}
#register form > h4.text-center{font-size:15px;font-weight:800;color:var(--dg-dim);
  letter-spacing:2px;text-align:left;margin:0 0 12px}
/* 面板 */
#register .login_form{background:#17141f;border:1px solid var(--dg-line);border-radius:16px;
  padding:24px 22px 26px;margin:0!important}
/* 欄位 */
#register .login_form label{display:block;margin:0 0 7px;font-size:14px;font-weight:700;
  letter-spacing:.6px;color:var(--dg-muted)}
#register .login_form .form-group{margin-bottom:16px}
#register .login_form .form-control{
  font-size:16px;height:48px;padding:0 14px;border-radius:10px;
  border:1px solid rgba(201,162,75,.24)!important;background:#241f2e!important;
  color:var(--dg-text);box-shadow:none;width:100%;max-width:none}
#register .login_form .form-control::placeholder{color:#9b948a}
#register .login_form .form-control:focus{border-color:var(--dg-gold-hi)!important;
  background:#2a2434!important;box-shadow:0 0 0 3px rgba(201,162,75,.18)}
#register .login_form .form-control.width-80{width:100%}
/* 驗證碼圖:跟輸入框同高並排 */
#register .login_form label[for="cod-num"],#register .login_form label[for="checknum"]{
  display:flex;align-items:center;gap:10px}
#register .login_form .codeimg{height:48px;width:auto!important;max-width:132px;border-radius:8px;
  border:1px solid rgba(201,162,75,.3);margin:0;cursor:pointer}
/* 送出鈕 */
#register .login_form .button-red,#register #submitBtn{
  display:flex!important;align-items:center;justify-content:center;width:100%;height:52px;
  margin:6px 0 0!important;border:1px solid #f0dda6!important;border-radius:12px!important;
  background:linear-gradient(160deg,#f5e4b4,#c9a24b)!important;color:#171216!important;
  font-size:17px;font-weight:900!important;letter-spacing:2px;text-shadow:none;
  width:100%!important;max-width:none!important;
  box-shadow:0 8px 22px rgba(201,162,75,.28)}
#register .login_form .button-red:hover,#register #submitBtn:hover{
  background:linear-gradient(160deg,#fff0cd,#d9b25c)!important;color:#171216!important}
/* 忘記密碼 */
#register .login_form a[href*="Forget"]{display:flex;align-items:center;justify-content:center;
  height:44px;color:var(--dg-muted);font-weight:700;font-size:15px}
#register .login_form a[href*="Forget"]:hover{color:var(--dg-gold-hi)}
/* 錯誤訊息 */
#register #LoginError2,#register #LoginError{
  margin:14px 0 0!important;border-radius:10px;font-size:14px;
  background:rgba(205,74,60,.14);border:1px solid rgba(205,74,60,.45);color:#f0a99f}
/* 第三方登入:不要整條大紅大綠 */
#register .login-else,#register .register_else{margin-top:16px;width:100%;align-items:stretch}
#register .login-else{display:flex;flex-direction:column;gap:10px;align-items:stretch}
#register .else-btn{
  flex:0 0 auto;width:auto!important;height:52px;padding:0 12px;gap:10px;
  display:flex;align-items:center;justify-content:center;
  background:#241f2e!important;border:1px solid rgba(201,162,75,.28);border-radius:12px!important;
  color:var(--dg-text)!important;font-weight:800}
#register .else-btn:hover{border-color:var(--dg-gold-hi);background:#2a2434!important}
#register .else-btn > div{display:flex;align-items:center;gap:10px}
#register .else-btn img{max-width:none;width:30px;height:30px;padding:4px;flex:0 0 auto;
  background:#fff;border-radius:8px;object-fit:contain}
#register .else-btn span{width:auto;border-left:0;padding-left:0;font-size:14px;
  letter-spacing:.5px;font-weight:800}
/* 註冊頁的分隔線 */
#register .register_else .hr,#register .login-else .hr{
  background:var(--dg-line-soft);margin:20px 0}
/* 驗證訊息 */
#register .invalid-feedback{color:#f0a99f;font-size:13px}
#register .valid-feedback{color:#8fe0b4;font-size:13px}

@media(max-width:400px){
  #register .else-btn span{font-size:13px}
  #register .else-btn{padding:0 8px;gap:8px}
}
@media(min-width:768px){
  section#register{padding:52px 24px 72px}
  #register .col-md-6{max-width:480px}
  #register .login_form{padding:30px 30px 32px}
  #register .section-title h2,#register form > h4.text-center:first-of-type{font-size:30px}
  #register .login_form .form-control{height:52px;font-size:17px}
  #register .login_form .button-red,#register #submitBtn{height:56px;font-size:18px}
  #register .login_form .codeimg{height:52px}
  #register .login-else{flex-direction:row}
  #register .else-btn{flex:0 0 auto;height:54px;min-width:0;padding:0 22px}
}

/* 註冊頁電腦版左欄:填表要知道的規則(天條 53:不放行銷文案) */
#register .dg-reg-intro{display:none!important;color:var(--dg-muted);max-width:400px}
#register .dg-reg-intro .eyebrow{display:block;font-size:12px;font-weight:800;
  letter-spacing:2px;color:var(--dg-dim)}
#register .dg-reg-intro h3{margin:8px 0 0;font-size:32px;font-weight:900;
  color:var(--dg-gold-hi);letter-spacing:1px}
#register .dg-reg-intro p{margin:14px 0 0;font-size:16px;line-height:1.9;font-weight:600}
#register .dg-reg-intro ol{list-style:none;margin:22px 0 0;padding:0;background:#17141f;
  border:1px solid var(--dg-line);border-radius:16px;overflow:hidden}
#register .dg-reg-intro ol li{display:flex;gap:12px;align-items:flex-start;padding:14px 18px;
  font-size:15px;line-height:1.7;font-weight:600;color:var(--dg-text);
  border-bottom:1px solid var(--dg-line-soft)}
#register .dg-reg-intro ol li:last-child{border-bottom:0}
#register .dg-reg-intro ol li b{flex:0 0 24px;height:24px;border-radius:99px;
  background:linear-gradient(160deg,#f5e4b4,#c9a24b);color:#171216;font-size:13px;
  font-weight:900;display:flex;align-items:center;justify-content:center;margin-top:2px}
#register .dg-reg-intro .ask{font-size:15px}
#register .dg-reg-intro .ask a{color:var(--dg-gold-hi);font-weight:800}

@media(min-width:1200px){
  #register .dg-reg-intro{display:block!important;flex:0 0 380px;padding-top:4px}
  #register .row{display:flex;flex-direction:row;justify-content:center;
    align-items:flex-start;gap:44px}
  #register .col-md-6{flex:0 0 480px;width:480px;max-width:480px;margin:0!important}
}

/* ===== 頁首:漢堡鈕 ===== */
.mobile-nav-toggle{
  width:44px;height:44px;padding:0!important;margin:0;border-radius:10px;
  align-items:center;justify-content:center;font-size:24px;
  background:rgba(201,162,75,.14)!important;border:1px solid rgba(201,162,75,.55);
  color:var(--dg-gold-hi)!important}
.mobile-nav-toggle.bi-x{background:rgba(201,162,75,.14)!important;color:var(--dg-gold-hi)!important}
@media(max-width:767px){
  #header{height:62px}
  #header .logo img{max-height:44px}
  #header .container{padding-left:12px;padding-right:12px}
  .mobile-nav-toggle{display:flex!important}
}

/* ===== 浮動客服鈕:移到底部導覽上方,不要蓋住卡片 ===== */
.fixmenu{right:8px;bottom:88px;width:auto;padding:0}
.fixmenu li{margin-bottom:8px}
.fixmenu li a{display:block;line-height:0}
.fixmenu li img{width:46px;height:46px;margin:0;filter:drop-shadow(0 4px 10px rgba(0,0,0,.45))}
@media(min-width:768px){.fixmenu{bottom:24px}}

/* ===== 底部導覽(手機) ===== */
.ft-navbar{background:linear-gradient(180deg,#241e30,#15111c);border-top:1px solid var(--dg-line);
           box-shadow:none;border-radius:0}
.ft-navbar .ft-link{color:var(--dg-muted);display:flex;flex-direction:column;align-items:center;
                    justify-content:center;gap:3px;line-height:1.2;min-height:46px}
.ft-navbar .ft-link .ftic{color:var(--dg-muted)}
.ft-navbar .ft-link:hover,.ft-navbar .ft-link:hover .ftic{color:var(--dg-gold-hi)}
.ft-navbar .ft-link div{margin:0;font-size:12px;font-weight:700;color:inherit}
.ft-link-home .home{margin:0}
.ft-link-home .home a{display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;margin:0 auto;border-radius:99px;
  background:linear-gradient(160deg,#f5e4b4,#c9a24b);border:3px solid #15111c;
  color:#171216;box-shadow:0 8px 22px rgba(201,162,75,.4)}
.ft-link-home .home a .ftic{width:26px;height:26px;margin:0;color:#171216}

/* ===== 頁尾 ===== */
#footer{background:#141119;color:var(--dg-muted);border-top:1px solid var(--dg-line-soft)}
#footer a{color:var(--dg-muted)}
#footer a:hover{color:var(--dg-gold-hi)}

/* ===================================================================
 * 照抄核可版(Artifact bca3ffe0)的實測數值
 * 手機 390:頁首 56 / LOGO 32 / 登入註冊 69x44 / 標題 38 / 分類格 82x68
 *           卡片區 x=104 w=274 / 主卡 274x137 / 方卡 132x132 / 底部導覽 64
 * 電腦 1280:頁首 76 / 內容左右邊距 80 / 分類軌 108x540 格 108x80
 *           卡片區 x=206 w=994 / 主卡 488x540 / 方卡 235x261 / 標題 44
 * =================================================================== */
:root{--dg-gut:24px}
@media(min-width:1168px){ :root{--dg-gut:max(24px,calc(50% - 560px))} }

.dg-cat-head{display:flex;align-items:baseline;gap:10px}
.GameNav{margin-top:0!important}
/* 主題給 #main 留了 70px 讓開原本 70px 的頁首;頁首縮小後那塊空白要收掉 */
#main{margin-top:0!important}
.testimonials{margin-top:0!important}
.dg-cat-head b{font-weight:900;color:var(--dg-text);letter-spacing:.5px}
.dg-cat-head span{font-weight:800;letter-spacing:1.6px;color:var(--dg-dim)}

@media(max-width:767px){
  #header{height:56px}
  #header .logo img{max-height:32px}
  .mobile-nav-toggle{display:none!important}
  .navbar ul{display:flex!important;align-items:center;gap:8px;margin:0;padding:0}
  .navbar ul li{display:none!important}
  .navbar ul li.d-none.d-md-block{display:block!important}
  .btn-login,.btn-register{width:69px!important;height:44px!important;padding:0!important;
    font-size:15px!important;border-radius:10px!important}
  .dg-cat-head{margin:14px 12px 0;height:38px}
  .dg-cat-head b{font-size:19px}
  .dg-cat-head span{font-size:11px}
  .GameNav{padding:0 0 14px 12px}
  .tab-content{margin-left:94px;padding:0 12px 20px 10px}
  .ft-navbar{height:64px;padding:0;display:flex;align-items:center}
  .ft-navbar ul{height:auto;width:100%;margin:0}
}

@media(min-width:768px){
  #header .container{max-width:none;padding-left:40px;padding-right:40px}
  #header{height:76px}
  #header .logo img{max-height:44px}
  .dg-cat-head{margin:26px var(--dg-gut) 0;height:44px}
  .dg-cat-head b{font-size:24px}
  .dg-cat-head span{font-size:12px}
  .GameNav{width:108px;margin-left:var(--dg-gut);padding:0 0 36px}
  .GameNav li.nav-item.col{width:108px}
  .GameNav .nav-link.color{height:80px}
  .tab-content{margin-left:calc(var(--dg-gut) + 126px);margin-right:var(--dg-gut);
               padding:0 0 36px}
  .game-grop{gap:18px}
  .game-grop .game-body{aspect-ratio:auto;height:100%}
  #all .game-grop,#slot .game-grop{grid-auto-rows:261px}
  #all .game-grop > .game-body:first-child{grid-column:span 2;grid-row:span 2}
}

/* ================= dg22 正式版:對齊核可版 ================= */

/* --- 主視覺滿版:bootstrap 的 .container-fluid 左右各留 12px,核可版是滿版(天條 39) --- */
.testimonials .container-fluid{padding-left:0;padding-right:0}

/* --- 頁首 Logo:改用裁掉留白的 dg-logo.webp,同框高圖案大四成五 --- */
@media(max-width:767px){ #header .logo img{max-height:42px} }
@media(min-width:768px){ #header .logo img{max-height:56px} }

/* --- 底部導覽:五格同一套結構,不做浮出列外的圓球 --- */
.ft-navbar .ft-link .ftic{
  width:22px;height:22px;box-sizing:content-box;padding:6px;border-radius:11px}
/* 主題把首頁那格 position:relative + bottom:17px 頂出列外,還鎖死 120x54 —— 全部收掉 */
.ft-link-home{position:static;bottom:auto;width:auto;height:auto}
.ft-link-home .home{margin:0;height:100%;display:flex;align-items:center;justify-content:center}
.ft-link-home .home a{
  width:auto;height:auto;margin:0;padding:0;border:0;border-radius:0;
  background:none;box-shadow:none}
.ft-link-home .home a .ftic{width:22px;height:22px;margin:0}
/* 首頁那格的 a 只有 34px 寬,觸控面積不足(天條 34);撐滿整格 */
.ft-link-home .home{width:100%}
.ft-link-home .home a{width:100%}
/* 五格撐滿列高,內容才會跟核可版落在同一個垂直位置 */
.ft-navbar .ft-nav{height:100%;align-items:stretch}
.ft-navbar .ft-nav > li{display:flex;padding-top:0;padding-bottom:0}
/* li 變成 flex 之後,a 會縮成內容寬 —— 要明講撐滿,不然觸控面積只剩 34px */
.ft-navbar .ft-link{flex:1 1 auto;width:100%;height:100%;min-height:0;gap:4px}
.ft-link-home .home,.ft-link-home .home a{height:100%}
.ft-navbar .ft-link div{line-height:1.75}
/* 主題給舊標籤下的負 margin 與 2.4 行高,會把文字擠到圖示上面 */
.ft-link-home .home a div{font-size:12px;line-height:1.75;width:auto;margin:0}
/* 目前所在的那一格:金色底留在列內 */
.ft-navbar .ft-link.on{color:var(--dg-gold-hi)}
.ft-navbar .ft-link.on .ftic{
  background:linear-gradient(160deg,#f5e4b4,#c9a24b);color:#171216;
  box-shadow:0 4px 12px rgba(201,162,75,.28)}
.ft-navbar .ft-link.on:hover,.ft-navbar .ft-link.on:hover .ftic{color:#171216}
.ft-navbar .ft-link.on:hover{color:var(--dg-gold-hi)}

/* ================= 批次 2:登入與註冊對齊核可版 ================= */

/* 核可版的卡片包含標題;登入頁的標題在表單外面,所以把卡片外框從表單移到欄位容器上。
   註冊頁的標題本來就在表單內,同一套規則兩頁都成立。 */
#register .col-md-6{background:#17141f;border:1px solid var(--dg-line);
  border-radius:16px;padding:20px 18px 22px}
#register .login_form{background:none;border:0;border-radius:0;padding:0;
  margin:0!important;box-shadow:none}
#register .section-title{margin:0}
@media(min-width:768px){
  #register .col-md-6{padding:30px 30px 32px}
  #register .login_form{padding:0}
}
/* 主題給第三方按鈕的 margin:5px 0,會讓那一列多出 10px */
#register .else-btn{margin:0}

/* 第三方登入:核可版是左右兩顆,線上是上下疊 */
#register .login-else{flex-direction:row}
/* Owner:兩顆不要撐滿整列,置中(頁首的登入/註冊按鈕才是靠右,這裡不是) */
#register .login-else{justify-content:center}
@media(max-width:767px){
  #register .else-btn{flex:0 0 auto;min-width:0;padding:0 16px;gap:8px}
  /* 兩顆並排塞不下「使用 Google 登入」整句,手機只顯示品牌名(核可版就是這樣)。
     原字串沒有從 DOM 拿掉,讀屏軟體念到的還是完整那句 */
  #register .else-btn span{font-size:0;letter-spacing:0}
  #register .else-btn span::after{font-size:15px;font-weight:800;letter-spacing:.5px}
  #register .else-btn.google span::after{content:"Google"}
  #register .else-btn.line span::after{content:"LINE"}
}

/* 忘記密碼頁的欄位容器是 col-md-4,不是 col-md-6 —— 批次 2 把卡片外框從
   .login_form 移走之後,那頁沒有東西接得住,會變成沒有卡片。補上同一套。 */
#register .col-md-4{width:100%;max-width:460px;margin:0 auto;flex:0 0 auto;
  background:#17141f;border:1px solid var(--dg-line);border-radius:16px;
  padding:20px 18px 22px}
@media(min-width:768px){
  #register .col-md-4{max-width:480px;padding:30px 30px 32px}
}

/* ================= 批次 4:會員中心與儲值 =================
   這兩頁載入 member.css,而 member.css 在 head.php 之後才引用,會壓過 brand.css。
   所以這裡一律用 section.member 開頭(權重高於 member.css 的單一類別)。
   內容量與核可版不同(線上多了實名認證、第二組帳戶資訊、USDT/超商欄位),
   所以對齊的是核可版的設計系統,不是逐像素複製版面。 */

section.member{background:var(--dg-bg);padding:16px 0 24px}
section.member .container{max-width:1200px}

/* 頁面標題列:原本是 #333 深灰字,配深色底等於看不見 */
section.member .member-top{color:var(--dg-text);font-size:18px;font-weight:900;
  letter-spacing:.5px;align-items:center;margin:0 0 14px}
section.member .member-top .col-8{color:var(--dg-text)}
section.member .m-taggle-bar a{color:var(--dg-muted);font-weight:700;font-size:14px;
  display:inline-flex;align-items:center;gap:6px;min-height:44px;justify-content:flex-end}
section.member .user-info{color:var(--dg-text);padding:0}
section.member .user-info > p{color:var(--dg-muted);font-size:14px;margin:0 0 14px}

/* 區塊卡片 */
section.member .box{background:#17141f;border:1px solid var(--dg-line);border-radius:16px;
  padding:20px 18px 22px;margin-bottom:16px}
section.member .box h4{color:var(--dg-text);font-size:19px;font-weight:900;letter-spacing:.5px;
  padding:0;margin:0 0 16px;border:0}

/* 欄位 */
section.member .form-group{margin-bottom:16px}
section.member .form-group label{color:var(--dg-muted);font-size:14px;font-weight:700;
  display:block;margin:0 0 7px}
section.member .form-group label span{color:var(--dg-dim);font-size:11px;font-weight:600;
  letter-spacing:1px;margin-left:4px}
section.member .form-control,section.member select.form-control{
  height:48px;background:#241f2e;border:1px solid rgba(201,162,75,.24);border-radius:10px;
  color:var(--dg-text);font-size:16px;padding:0 14px;box-shadow:none}
section.member .form-control::placeholder{color:#9b948a}
section.member .form-control:focus{border-color:var(--dg-gold-hi);background:#241f2e;
  color:var(--dg-text);box-shadow:0 0 0 3px rgba(201,162,75,.16)}
section.member textarea.form-control{height:auto;padding:12px 14px}
/* 唯讀顯示欄(帳號、姓名這種)*/
section.member .content{color:var(--dg-text);font-size:16px;font-weight:700;
  min-height:48px;display:flex;align-items:center;background:#1d1927;
  border:1px solid var(--dg-line-soft);border-radius:10px;padding:0 14px}

/* 按鈕 */
section.member .btn-warning{background:linear-gradient(160deg,#f5e4b4,#c9a24b);
  border:1px solid #f0dda6;color:#171216;height:44px;min-width:104px;border-radius:12px;
  font-size:15px;font-weight:900;letter-spacing:.5px;box-shadow:0 6px 18px rgba(201,162,75,.24)}
section.member .btn-warning:hover{background:linear-gradient(160deg,#fff0cd,#d9b25c);color:#171216}
section.member .btn-outline-primary{background:transparent;border:1px solid rgba(201,162,75,.42);
  color:var(--dg-text);height:44px;border-radius:12px;font-weight:800}
section.member .btn-outline-primary:hover,section.member .btn-outline-primary.active{
  background:rgba(201,162,75,.14);border-color:var(--dg-gold-hi);color:var(--dg-gold-hi)}

/* 儲值:支付方式清單 */
section.member .deposit-inner{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  list-style:none;padding:0;margin:0}
section.member .deposit-inner li{margin:0}
section.member .deposit-inner a{display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:8px;min-height:96px;background:#241f2e;
  border:1px solid rgba(201,162,75,.2);border-radius:14px;color:var(--dg-text);
  font-weight:800;font-size:14px;padding:12px 8px}
section.member .deposit-inner a:hover{border-color:var(--dg-gold-hi);background:#2a2434}
section.member .deposit-inner .ic_box img{width:34px;height:34px;object-fit:contain}

@media(min-width:768px){
  section.member{padding:28px 0 48px}
  section.member .box{padding:26px 26px 28px}
  section.member .form-control,section.member select.form-control{height:52px;font-size:17px}
  section.member .content{min-height:52px;font-size:17px}
  section.member .member-top{font-size:22px}
}

/* --- member.css 留下的淺色底與深灰字,在深色站上讀不到,逐條覆蓋 --- */
section.member .member-page{background:transparent;min-height:0;width:auto}
section.member .member-menu_web{background:transparent}
section.member #page-account,section.member #account{background:transparent}
section.member #menu_depost{background:rgba(201,162,75,.14);box-shadow:none}
section.member .member-modal .modal-content{background:#17141f;border:1px solid var(--dg-line);
  border-radius:16px;color:var(--dg-text)}
section.member .modal-header,section.member .modal-footer{border-color:var(--dg-line-soft)}
section.member .memberMenu p.user-text{background:rgba(201,162,75,.14);color:var(--dg-text)}
section.member .thead-light,section.member .thead-light th{background:#241f2e;color:var(--dg-text)}

section.member a{color:var(--dg-muted)}
section.member a:hover{color:var(--dg-gold-hi)}
section.member .member-page label,
section.member .member-page .login_form label,
section.member .member-modal label{color:var(--dg-muted)}
section.member .member-page ul.note,
section.member .memberMenu span.user-text,
section.member .menu-link .info{color:var(--dg-muted)}
section.member .vipFlow .flowcash{color:var(--dg-text)}
section.member .else-btn span{color:var(--dg-text)}
section.member .text-danger,section.member .invalid-feedback{color:#f0a99f}

/* member.css 在 .member 上直接設了 color:#333,整個區塊的後代都繼承到深灰字 */
section.member{color:var(--dg-text)}
section.member h3,section.member h4,section.member h5,section.member p,
section.member li,section.member td,section.member th,section.member dd,section.member dt{color:inherit}
section.member .box h4{color:var(--dg-text)}

/* 儲值的分頁膠囊 */
section.member #menu_depost,section.member #menu_depost a,
section.member .nav-pills > li > a,section.member .payicon{color:var(--dg-text)}
section.member .nav-pills > li > a.active,section.member .payicon.active{
  background:linear-gradient(160deg,#f5e4b4,#c9a24b);color:#171216;border-color:transparent}

/* 綁定 Google／LINE 的按鈕(會員中心自己一組,不是登入頁那組) */
section.member .else-btn{background:#241f2e;border:1px solid rgba(201,162,75,.28);
  border-radius:12px;color:var(--dg-text);min-height:48px;display:flex;align-items:center;
  justify-content:center;gap:10px;padding:0 12px;margin:0 0 10px;font-weight:800}
section.member .else-btn:hover{border-color:var(--dg-gold-hi);background:#2a2434}
section.member .else-btn > div{display:flex;align-items:center;gap:10px}
section.member .else-btn img{width:28px;height:28px;flex:0 0 auto;background:#fff;
  border-radius:8px;padding:3px;object-fit:contain;max-width:none}
section.member .else-btn span{color:var(--dg-text);font-size:14px;font-weight:800;
  border:0;padding:0;width:auto}

/* 錯誤與提示字:bootstrap 的紅在深底上不夠亮 */
section.member .text-danger,section.member .invalid-feedback,
section.member .help-block,section.member .alert-danger{color:#f0a99f}
section.member .alert-danger{background:rgba(205,74,60,.14);border:1px solid rgba(205,74,60,.45);
  border-radius:10px}
section.member [style*="color:red"],section.member [style*="color: red"],
section.member [style*="color:blue"],section.member [style*="color: blue"]{color:#f0a99f!important}

/* 選單項目的文字包在 a > div / a > span 裡,顏色沒跟著 a 走 */
section.member a div,section.member a span{color:inherit}
section.member .tabtt{color:var(--dg-text)}
/* .text-danger 是掛在容器上,底下的 h4/li/strong 全部繼承到那個紅 */
section.member .text-danger,section.member .text-danger *{color:#f0a99f}
section.member .btn-outline-danger{background:transparent;border:1px solid rgba(205,74,60,.5);
  color:#f0a99f;height:44px;border-radius:12px;font-weight:800}
section.member .btn-outline-danger:hover{background:rgba(205,74,60,.14);color:#f5c0b7}
section.member .border{border-color:var(--dg-line-soft)!important}

/* 側邊會員選單:member.css 的 .member .memberMenu a 權重比我高,要對等才蓋得過 */
section.member .memberMenu a,section.member .menu-link a{color:var(--dg-muted)}
section.member .memberMenu a:hover,section.member .menu-link a:hover{color:var(--dg-gold-hi)}
section.member .memberMenu li.active > a,section.member .menu-link li.active > a{color:var(--dg-gold-hi)}
section.member .memberMenu{background:#17141f;border:1px solid var(--dg-line);border-radius:16px;
  padding:14px 12px}
section.member .menu-link li{border-bottom:1px solid var(--dg-line-soft)}
section.member .menu-link li:last-child{border-bottom:0}
section.member .menu-link a{min-height:46px;display:flex;align-items:center}

/* 收尾:member.css 是在 brand.css 之後才被引用的,同權重它會贏。
   側邊選單這幾組的文字顏色用 !important 對齊,範圍只限 section.member 內。 */
section.member .memberMenu a,section.member .memberMenu a *,
section.member .menu-link a,section.member .menu-link a *,
section.member .icon-link a,section.member .icon-link a *,
section.member .icon-link li{color:var(--dg-muted)!important}
section.member .memberMenu a:hover,section.member .memberMenu a:hover *,
section.member .icon-link a:hover,section.member .icon-link a:hover *{color:var(--dg-gold-hi)!important}
section.member .icon-link a{min-height:56px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:4px;background:#241f2e;
  border:1px solid rgba(201,162,75,.18);border-radius:12px}

/* member.css 把 .container 設成 flex,而 flex item 的 min-width 預設是 auto,
   .member-page 因此縮不到比內容窄,手機上會撐出 447px 被切掉。 */
section.member .container{flex-wrap:wrap}
section.member .member-page{min-width:0;flex:1 1 auto;width:auto}
section.member .member-page > *{min-width:0}
section.member .row.member-top{padding:0;margin:0 0 14px}
@media(max-width:767px){
  section.member .member-page{padding:0}
}
@media(min-width:768px){
  section.member .member-menu_web{flex:0 0 240px;min-width:0;margin-right:18px}
  section.member .member-page{padding:0}
}

/* 天條 34:卡片裡的次要文字連結,觸控高度補到 32px */
section.member .box a:not(.btn):not(.else-btn){display:inline-flex;align-items:center;min-height:32px}

/* ================= 頁首:登入／註冊按鈕(桌機版從沒真的上線過) =================
   線上實測:兩顆按鈕 85px 高撐出 76px 的頁首、兩顆之間 0 間距、
   右緣距容器還空 115px 沒對齊。手機版另一組規則沒有這個問題。 */
#header #navbar a.btn-login{margin-left:20px}
#header #navbar a.btn-register{margin-left:10px}

@media(min-width:768px){
  /* #navbar 本身被主題的 margin:auto 置中,justify-content:space-between 也救不回來,
     要先把它的左右 auto margin 收掉才會貼齊容器右緣 */
  #header #navbar{margin:0!important}
  /* ul 內容寬度是固定的(不到 #navbar 全寬),需要撐滿才靠得到右緣 */
  #header #navbar > ul{width:100%;justify-content:flex-end}
  #header #navbar > ul > li{display:flex;align-items:center}
  /* 樣板用一個空 div 當作間隔,改用 margin 控制間距後這個不需要了 */
  #header #navbar > ul > li > div[style]{display:none}
  #header #navbar ul li a.nav-link{height:44px;display:flex;align-items:center;padding:0 14px}
  #header #navbar a.btn-login,#header #navbar a.btn-register{
    height:44px!important;padding:0 20px!important;line-height:1!important;
    display:flex!important;align-items:center;justify-content:center;
    border-radius:10px!important;width:auto!important}
}
@media(min-width:768px) and (max-width:1199px){
  #header #navbar ul li a.nav-link{padding:0 9px;font-size:14px}
  #header #navbar a.btn-login,#header #navbar a.btn-register{padding:0 14px!important;font-size:15px!important}
  #header #navbar a.btn-login{margin-left:12px}
  #header #navbar a.btn-register{margin-left:8px}
}
/* 768~991:七個導覽連結需要的寬度比可用空間還大,會橫向溢出。
   比照手機只留 Logo 與登入／註冊,分類改從主視覺下方的分類軌進入 */
@media(min-width:768px) and (max-width:991px){
  /* 主題自己在 max-width:991px 把整條 ul 藏起來、換漢堡選單,
     這個寬度要改走登入/註冊直接顯示,得先把主題那條規則打開 */
  #header #navbar > ul{display:flex!important}
  #header .mobile-nav-toggle{display:none!important}
  #header #navbar > ul > li{display:none!important}
  #header #navbar > ul > li.d-none.d-md-block{display:flex!important}
  #header #navbar a.btn-login,#header #navbar a.btn-register{padding:0 22px!important}
  #header #navbar a.btn-login{margin-left:0}
}

/* ================= /action/ 是操作介面不是行銷頁(天條 53)=================
   全站 X-Robots-Tag: noindex, nofollow(已於 2026-08-26 確認),品牌介紹段這類
   純為 SEO 存在的文字在這裡不需要。做法用樣式表隱藏,不刪原始碼(天條 49),
   要連 footer.php 原始碼一起刪的話另外提。
   .ft-navbar(手機底部導覽列)不受影響,那是操作用的,不是這裡說的頁尾。 */
#footer{display:none!important}

/* ================= 頁首:手機版導覽列溢出頁首底色範圍 =================
   主題自己在 @media(max-width:991px) 給 .navbar 加了 padding:12px 0,
   跟批次 1 訂的 #header{height:56px} 疊在一起,導覽列的框變成 68px、
   比頁首本身還高 12px,登入/註冊按鈕因此溢出到頁首背景範圍外,
   視覺上看起來像是貼死在頁首底邊、沒有間距。
   768~991px 那個範圍本來就沒有溢出(頁首 76px 裝得下 68px),只有手機這段需要收。 */
@media(max-width:767px){
  #header .navbar{padding:0}
  /* #header 本身的 class="align-items-center" 沒有配 d-flex,原本就沒作用;
     container 縮到 44px 之後,不加這行會貼在頁首頂端而非置中 */
  #header{display:flex;align-items:center}
  /* #header 一旦變成 flex,裡面兩層(.navbar-bg 再包一層 .container)都變成
     flex item,預設 flex:0 1 auto 會逐層縮成內容寬度(實測只剩 268px),
     右邊留一大塊空白到頁首真正的右緣。兩層都要補 flex:1 1 auto 撐滿,
     只補外層或只補內層都不夠——內層撐滿的是外層(已經縮水)的寬度,不是頁首的寬度 */
  #header .navbar-bg,#header .container{flex:1 1 auto}
}


/* 浮動客服(footer.php 的 .fixmenu:LINE + 聯絡我們兩顆)
   Owner 指示拿掉。改成用底部導覽列的「客服」進客服頁,不再用浮在畫面上的按鈕。
   照第 49 條只加不改:用樣式表隱藏,不刪 footer.php 原始碼,
   要還原就是把這一條拿掉。要連原始碼一起刪的話另外提。 */
.fixmenu{display:none!important}


/* 底部導覽「首頁」那格原本有金色高亮(.ft-link.on):文字金色、
   圖示底是金漸層。Owner 指示六格都不要有顏色,一律跟其他格一樣。
   權重比 .ft-navbar .ft-link.on 高一階才蓋得過去,只鎖在 .ft-navbar 底下,
   不影響 .ft-link.on 在其他地方的用法(目前只有這裡用到)。 */
.ft-navbar .ft-link.on{color:var(--dg-muted)}
.ft-navbar .ft-link.on .ftic{background:none;color:var(--dg-muted);box-shadow:none}
.ft-navbar .ft-link.on:hover,.ft-navbar .ft-link.on:hover .ftic{color:var(--dg-gold-hi)}


/* 全站拿掉 AOS 進場動畫(Owner 2026-08-26 裁示)。
 *
 * 根因:main.js 把 AOS.init() 綁在 window.load 事件、且用 once:true,
 * 只觸發一次判斷。這個判斷若被瀏覽器的動畫節流打斷(分頁切到背景又切回來、
 * 系統忙碌、頁面在計算量大時被降頻),CSS transition 的計時器會被凍結
 * (實測用 element.getAnimations() 量到 playState:"running" 但
 * currentTime 永遠停在 0,一步都沒推進),而且沒有任何補救機制
 * (沒有監聽 visibilitychange 重新整理),畫面就永久卡在「動畫播放前」
 * 的縮小/位移/透明狀態 —— 這正是輪播被壓扁看不全的原因。
 * 全站每一頁只要用了 data-aos 效果(輪播、標題、卡片區塊)都吃得到
 * 同一個坑,不是單一頁面的版面問題。這是原始模板(Knight Bootstrap)
 * 本身的設計缺陷,不是這次任何一次修改造成的。
 *
 * 做法:不去改 14 支頁面裡 49 處 data-aos 標記(fade-up / zoom-in 兩種),
 * 改在這裡直接中和 aos.css 的效果規則,内容一律維持最終可見狀態,
 * 不再有「動畫播放前」這個會卡住的中間態。main.js 的 AOS.init() 不動,
 * 繼續執行但已經沒有實際效果,故意不去動共用 JS,把風險鎖在這條 CSS。
 * 要恢復進場動畫效果,拿掉這一段即可。 */
[data-aos]{opacity:1!important;transform:none!important;transition:none!important}


/* 頁首 logo 旁邊補上「DG娛樂城」文字,照官網 header 的結構搬過來
   (結構:<a class="brand"><img><span class="brand-nm">DG<span>娛樂城</span></span></a>)。
   顏色沿用既有的 --dg-text / --dg-gold,這兩個值本來就跟官網一致。
   .logo 本身是 text-align:center(base.css),.brand 用 flex 排列圖文,
   不動 .logo 自己,只在 .logo a.brand 這一層做水平排列。
   字級跟著 logo 既有的兩個斷點(#header .logo img 的 max-height 42px/56px)配對,
   不是另外訂一套尺寸。 */
/* base.css 有一條給舊版 logo 文字用的 #header .logo a span,設了
   margin-left:12px / text-transform:uppercase / cwTeXYen 字體,
   我的 .brand-nm 剛好也是 .logo a 底下的 span,會被那條舊規則疊加。
   這裡逐項蓋掉,不是靠 gap 硬湊。 */
#header .logo a.brand{display:flex;align-items:center;gap:8px}
#header .logo .brand-nm{font-weight:800;letter-spacing:.2px;white-space:nowrap;
  color:var(--dg-text);line-height:1;margin-left:0;text-transform:none;
  font-family:inherit}
/* 內層「娛樂城」span 同樣會被 #header .logo a span 疊加,先前只蓋了顏色,
   字級/margin-left/大寫/字體這些沒蓋到,導致「娛樂城」用 28px cwTeXYen 大寫顯示,
   跟「DG」的樣式對不起來。這裡把非顏色的屬性一律繼承外層,只保留顏色不同。 */
#header .logo .brand-nm span{color:var(--dg-gold);font-size:inherit;font-weight:inherit;
  letter-spacing:inherit;line-height:inherit;margin-left:0;text-transform:none;
  font-family:inherit}
/* 手機 390px 實測:補上「娛樂城」的字級/大寫/字體修正後,文字寬度比原先
   誤判(套用了舊版 28px cwTeXYen 大寫樣式)小了近一半,不需要縮到 13px
   那麼小 —— 18px 量測還留 19px 安全間距,可讀性比較好 */
@media(max-width:767px){
  #header .logo a.brand{gap:4px}
  #header .logo .brand-nm{font-size:18px}
}
@media(min-width:768px){ #header .logo .brand-nm{font-size:22px} }


/* ================= 全站:載入完成時內容往上跳、被頁首壓住 =================
 *
 * 症狀:每一頁在圖片載完的那一刻,底下的內容整批往上跳一個頁首的高度
 * (手機實測 56px),然後鑽進頁首底下。首頁最明顯 —— 輪播只有 122px 高,
 * 等於將近一半被蓋住,看起來就是「卡住半格」。
 *
 * 根因(兩件事疊在一起,缺一不會發生):
 * 1. main.js 的 headerFixed() 綁在 window load,判斷式是
 *      (headerOffset - window.scrollY) <= 0
 *    而 headerOffset = #header.offsetTop = 0(頁首是第一個元素),
 *    window.scrollY 又永遠 >= 0 —— 所以這個判斷「永遠成立」。
 *    原意是「捲動到頂才吸頂」,實際是一載完就立刻把 .fixed-top 加上去,
 *    頁首變成 position:fixed 脫離版面流,讓出的那格空間沒有人補。
 * 2. 樣板本來有補償:同時把 .scrolled-offset 加到下一個元素
 *    (base.css 給它 margin-top 115px / 90px)。但本檔前面為了收掉
 *    「主題給 #main 留 70px」那塊空白,寫了 #main{margin-top:0!important},
 *    !important 連帶把這條補償也一起殺掉,所以完全沒接住。
 *
 * 做法:不改 main.js(全站共用,風險大),改用 position:sticky ——
 * sticky 的元素「留在版面流裡佔位置」,但捲動時一樣吸在畫面頂端。
 * 因此位置從第一次繪製就是對的,載入前後完全不動:跳動歸零、內容不再被壓住,
 * 而捲動吸頂的效果與現在完全相同。main.js 照樣會加 .fixed-top,
 * 這裡把那個狀態也一併蓋成 sticky,所以加不加都不影響。
 *
 * 實測(手機 390 / 電腦 1280 兩個尺寸):
 *   修法前 主內容 top 0、輪播被蓋 56px;修法後 top 56、被蓋 0px,
 *   捲到 241px 時頁首仍停在畫面頂端(吸頂正常)。
 *
 * 頁首是全站共用,這一段一次修好全部 87 頁。要還原就是把這一段拿掉。 */
#header,#header.fixed-top{position:sticky!important;top:0;z-index:1030}
/* 頁首已經留在版面裡佔位了,scrolled-offset 那 90/115px 是多的
   (#main 之外的頁面沒被前面那條 !important 蓋到,會多推出一大塊空白) */
.scrolled-offset{margin-top:0!important}


/* ================= 會員中心整組深色化(Owner 2026-08-26 裁示) =================
 *
 * 症狀:手機版會員中心的六個圖示磚外框是米白色,深底站上很突兀。
 * 一查發現不是單頁問題 —— member.css 整支就是淺色主題,共 49 條淺色宣告,
 * 涵蓋會員中心與底下 10 個子頁(儲值存款/遊戲轉點/點數提領/儲值紀錄/
 * 遊戲記錄/拋售紀錄/帳戶管理/交易紀錄/活動記錄/好友邀請)。
 *
 * 先前批次 4 只蓋掉了「背景」與「文字色」,**邊框整組沒蓋到** ——
 * 這就是米白磚的來源(.icon-link 的 #c7c7c7 外框 + li 的 #ded7c0 外框)。
 * 而且那些磚是手機專屬(d-md-none),只掃電腦版驗不出來。
 *
 * 做法:一律追加覆蓋,member.css 一個字都沒動,拿掉這段即完全還原。
 * 不動任何 HTML 與 JS。member.css 在 brand.css 之後才載入,
 * 同權重它會贏,所以這裡用 !important 對齊,範圍全鎖在 section.member 內。
 * 色票沿用站上既有的:卡片 #17141f / 抬升面 #241f2e / 線 rgba(201,162,75,.24)。
 * 配色事前實算 10 組對比,全部達標。
 * ========================================================================== */

/* --- 米白外框:整組換成站上的金色細線 --- */
section.member .icon-link,
section.member .memberMenu .icon-link li,
section.member .memberMenu .menu-link li,
section.member .border-b-1,
section.member .member-top,
section.member .user-info .box,
section.member .custom-file,
section.member .box-user,
section.member .statusBox.border-l-r,
section.member .statusBox .img-status,
section.member .game-cash .game-cash-box,
section.member .vipFlow,
section.member table.table-bordered,
section.member table.table-bordered th,
section.member table.table-bordered td,
section.member .deposit-inner li{
  border-color:rgba(201,162,75,.24)!important;
}
section.member .user-info h4{border-left-color:rgba(201,162,75,.34)!important}
section.member .flowcash .bd{border-bottom-color:rgba(201,162,75,.24)!important}
section.member .page-invite .form-group input,
section.member .page-invite .form-control:focus{
  border-bottom-color:rgba(201,162,75,.24)!important;
}

/* --- 米白／純白底:換成深色面 --- */
section.member .memberMenu,
section.member .member-page,
section.member .icon-link{background:transparent!important}
section.member .memberMenu .icon-link li,
section.member .memberMenu .menu-link li:hover,
section.member .memberMenu .menu-link li.active,
section.member .statusBox .img-status,
section.member .thead-light,
section.member .thead-light th{background:#241f2e!important}
section.member .member-page .w-link a,
section.member .box-user,
section.member .game-cash .game-cash-box{background:#17141f!important}

/* --- 磚上的字跟著變淺(原本是配米白底的深灰) --- */
section.member .memberMenu .icon-link li,
section.member .memberMenu .icon-link li a,
section.member .memberMenu .icon-link li a *{color:var(--dg-text)!important}

/* --- 黃色系的重點色留著,但字改成深字才讀得到 --- */
section.member .progress-lv.progress-right,
section.member .btn-autorenew,
section.member .image-upload-wrap .custom-file label{color:#171216!important}

/* --- 彈窗:member.css 給的是米白底 --- */
section.member .member-modal .modal-content,
.member-modal .modal-content{background:#17141f!important;
  border:1px solid rgba(201,162,75,.24)!important}
.member-modal .modal-header,.member-modal .modal-footer{
  border-color:rgba(201,162,75,.24)!important}
.member-modal .modal-header,.member-modal h4{color:var(--dg-text)!important}

/* 轉點頁的三個輸入框組:member.css 給的是 #c4c4c1a1 淺灰半透明底,
   深底上看起來像一塊霧掉的灰板。換成跟其他輸入區一致的抬升面。 */
section.member .group-prepend-TR{background:#241f2e!important}

/* 台灣郵遞區號元件(帳戶管理頁)的欄位沒有 form-control class,
   套不到既有的輸入框樣式,維持瀏覽器預設白底。這裡補上。 */
section.member .twzipcode input,
section.member .twzipcode select{
  background:#241f2e!important;color:var(--dg-text)!important;
  border:1px solid rgba(201,162,75,.24)!important;border-radius:8px!important;
}

/* 電腦版側欄容器自己也有一條 #c7c7c7 外框(member.css 的 .member .memberMenu),
   手機版看不到、只在桌機出現,補上才不會只修好一半。 */
section.member .member-menu_web,
section.member .memberMenu{border-color:rgba(201,162,75,.24)!important}

/* ---- 修正 1:米白的亮圈其實是 box-shadow,不是 border ----
   member.css 給 .icon-link(手機 4px)與 .member-menu_web(桌機 6px)
   一圈 #e8e3d3 的 inset 陰影。我前一版只蓋了 border-color,
   所以那圈亮邊還在 —— 掃描沒看 box-shadow 才會誤報成 0。
   這裡直接收掉,結構交給磚自己的邊框表達,畫面比較乾淨。 */
section.member .icon-link,
section.member .member-menu_web,
section.member .memberMenu{box-shadow:none!important}
section.member .icon-link{border:0!important;padding:0!important}

/* ---- 修正 2:表面層次不足 ----
   前一版磚面用 #241f2e,對頁面底 #0d0d0f 的分離度只有 1.21,
   整片糊在一起。改用 #372f47:對頁面 1.53(看得出層次)、
   白字 11.23、說明字 6.02,都遠高於門檻。
   邊框從 .24 提到 .45(疊在磚面上對比 2.29),線才看得出來。 */
/* 邊框用核可版那圈亮金 #f0dda6:核可版的清晰感幾乎全來自這條線
   (對卡面對比 11.90),不是表面層次(它的面只有 1.21)。
   我前一版把面提亮到 1.53 卻讓邊框停在 2.19,線看不見,所以還是糊的。
   這裡兩個都要:面 1.53(比核可版還多層次)+ 亮金邊 9.40。 */
section.member .memberMenu .icon-link li,
section.member .memberMenu p.user-text{
  background:#372f47!important;
  border:1px solid #f0dda6!important;
}
section.member .memberMenu .menu-link li{
  border-bottom-color:rgba(201,162,75,.34)!important;
}

/* ---- 修正 3:圖示本身是純黑圖片 ----
   會員區的 14 個圖示是 .png.webp 圖片檔,實測平均色 rgb(0,0,0),
   對磚面 #372f47 的對比只有 1.66 —— 等於看不見。
   它們是為淺色底畫的,CSS 蓋不到圖片內容,只能用濾鏡反轉成白色。
   反轉後對磚面約 12、對頁面底約 19,跟文字同一個層級。

   只挑磚與清單裡的圖示,**不動 .user-lv 的等級徽章** ——
   那張是彩色的(實測 rgb(179,165,253)),反轉會變成髒綠色。
   全區掃過確認沒有其他淺色圖示,所以反轉不會有反效果。 */
section.member .memberMenu .icon-link li img,
section.member .memberMenu .menu-link li img{
  filter:invert(1)!important;
}

/* ---- Owner 2026-08-26 裁示:拿掉會員中心最上面那一列 ----
   .user-lv 裡是等級徽章(lv1)與帳號膠囊。手機與電腦都收掉。
   用樣式隱藏、不刪原始碼(天條 49),要還原就是拿掉這一條。
   註:帳號仍可在頁首的「會員」進入後看到,不是唯一顯示位置。 */
section.member .memberMenu .user-lv{display:none!important}

/* 補漏:member.css 共有 3 條淺色 box-shadow,我上一批只收掉兩條。
   .box-user 的 `0 0 9px #e8e3d3` 是第三條(總資產卡、查詢條件卡),
   已上線後才被 Owner 的畫面抓到。這次是從原始碼把 3 條一次找齊,
   不是再逐個追打。 */
section.member .box-user{box-shadow:none!important}

/* ==================================================================
   2026-08-31 會員中心版面重排 + 綁定按鈕並排
   ------------------------------------------------------------------
   只加規則,member.css 一個字沒動(天條 49)。拿掉這一段即完全還原。
   ================================================================== */

/* ---- 1. 綁定 Google／LINE:改成左右並排 ----
   base.css 的 .login-else 是 flex-direction:column,兩顆上下疊;
   .else-btn 又被寫死 width:275px !important,所以擠在表單右側。 */
section.member .login-else{
  flex-direction:row;
  align-items:stretch;
  gap:12px;
  margin:0 0 16px;
  width:100%;
}
/* 電腦／平板:對齊表單的欄位欄(label 130 + 右邊距 16),兩顆之間留 18px,
   右邊也留一點,不要整條貼到卡片邊。 */
@media only screen and (min-width:768px){
  section.member .login-else{
    margin:2px 8px 20px 146px;
    gap:18px;
    max-width:600px;
  }
}
section.member .else-btn{
  width:auto!important;
  flex:1 1 0;
  min-width:0;
  margin:0;
  padding:0 10px;
}
section.member .else-btn > div{min-width:0;justify-content:center}
section.member .else-btn span{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* LINE 的 logo 本身是白色的(給原本綠底按鈕用的),
   放在我們為彩色 Google logo 加的白色墊片上就整個看不見 —— 看起來像破圖。
   墊片改成 LINE 的品牌綠,白 logo 就讀得出來。Google 維持白墊片。 */
section.member .else-btn.line img{background:#06c755}

@media only screen and (max-width:479px){
  section.member .else-btn{padding:0 8px;gap:8px}
  section.member .else-btn span{font-size:13px}
}

/* ---- 2. 選單卡片:蓋掉 member.css 的淺色磚幾何 ----
   前一批給 .icon-link a 也上了一層底色與邊框,結果磚裡面又framed一個框(雙框)。
   磚本身的 #372f47 + 亮金邊已經是核可過的樣子,裡面那層收掉。 */
section.member .icon-link a{
  background:transparent!important;border:0!important;border-radius:0!important;
}
section.member .memberMenu .icon-link li{
  width:auto;
  border-radius:14px;
  padding:14px 8px;
}
section.member .memberMenu .icon-link li a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;width:100%;min-height:44px;
}
section.member .memberMenu .icon-link li img{width:28px;height:28px;object-fit:contain}

/* 帳戶管理那一列有第二個 <a>,裡面只包 d-md-none 的說明字。
   電腦版說明字被藏起來,空的 <a> 卻還在佔一整塊高度(選單中段那個大洞)。 */
@media only screen and (min-width:768px){
  section.member .memberMenu .menu-link li > a + a{display:none}
}

/* ---- 3. 會員中心首頁(Manger/index):沒有內容欄,不要留 80% 空白 ----
   其他會員頁仍是「左選單 + 右內容」,只有這一頁改成整片格狀。 */
section.member.member-home .container{display:block}
section.member.member-home .member-menu_web,
section.member.member-home .memberMenu{
  border:0!important;background:transparent!important;
}
section.member.member-home .member-menu_web{
  width:100%;max-width:1140px;margin:0 auto;
  min-height:0;max-height:none;padding:0;
}
section.member.member-home .memberMenu{padding:0;text-align:left;margin-bottom:0}

section.member.member-home .icon-link{padding:0;border:0;box-shadow:none}
section.member.member-home .icon-link ul{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
}
section.member.member-home .icon-link li{margin:0;padding:18px 10px}
section.member.member-home .icon-link li a{gap:8px;font-size:16px}
section.member.member-home .icon-link li img{width:32px;height:32px}

section.member.member-home .menu-link{
  display:grid;grid-template-columns:repeat(2,1fr);gap:12px;
  margin-top:12px!important;
}
section.member.member-home .menu-link li{
  margin:0;padding:0;border:1px solid var(--dg-line);border-radius:14px;
  background:#241f2e;
}
/* 這些是主要導覽，不是輔助說明，標籤用正文色不用 muted */
section.member.member-home .menu-link li a,
section.member.member-home .menu-link li a *{color:var(--dg-text)!important}
section.member.member-home .menu-link li:hover a,
section.member.member-home .menu-link li:hover a *{color:var(--dg-gold-hi)!important}
section.member.member-home .menu-link li a{
  display:flex;align-items:center;justify-content:flex-start;gap:10px;
  padding:14px 16px;min-height:52px;width:100%;
}
section.member.member-home .menu-link li img{width:22px;height:22px;margin-right:0}
section.member.member-home .menu-link li:hover{border-color:var(--dg-gold-hi)}

@media only screen and (min-width:992px){
  section.member.member-home .menu-link{grid-template-columns:repeat(4,1fr)}
}

/* ---- 4. 會員區共通的三個版面問題 ---- */

/* 唯讀欄裡若還放了按鈕(點數那一列的「儲值」),兩者中間沒有任何間距,
   數字看起來像被按鈕壓到。 */
section.member .member-page .content{gap:12px}

/* 側邊選單被 member.css 撐到 calc(100vh - 128px),連結排完之後
   底下留一大塊空卡。改成貼著內容 —— 它同時是 flex item,
   預設 align-items:stretch 會再把它拉到跟右邊內容一樣高,所以要一起解掉。 */
section.member .member-menu_web{min-height:0!important;align-self:flex-start}
@media only screen and (max-width:767px){
  section.member .member-menu_web{align-self:auto}
}

/* 平板寬度時卡片幾乎貼著左右邊(容器只有 15px 內距),留出像樣的邊界。 */
@media only screen and (min-width:768px){
  section.member .container{padding-left:24px;padding-right:24px}
}


/* ---- 5. 帳戶管理頁下半段沒有進卡片系統 ----
   USDT 錢包地址與超商儲值選項這兩塊放在 .member-index 裡,不是 .box,
   所以上面三張卡結束之後就變成一段沒有底、沒有邊界的裸文字。
   同一頁的卡片用同一套底色系統(天條 55)。 */
section.member .member-page .member-index{
  background:#17141f;border:1px solid var(--dg-line);border-radius:16px;
  padding:20px 18px 22px;margin:0 0 16px!important;width:100%;max-width:none;flex:1 1 100%;
}
section.member .member-index > .title{margin:0 0 16px;display:flex;
  align-items:baseline;flex-wrap:wrap;gap:8px}
section.member .member-index .title h4{color:var(--dg-text);font-size:19px;font-weight:900;
  letter-spacing:.5px;margin:0;padding:0;border:0}
section.member .member-index .label{margin:14px 0 6px}
section.member .member-index .label label{width:auto;margin:0;color:var(--dg-muted);font-size:14px}
section.member .member-index .form-control{width:100%}
@media only screen and (min-width:768px){
  section.member .member-page .member-index{padding:26px 26px 28px}
}

/* 已上傳的提示是 bootstrap 的淺綠底,深色版面上是一塊突兀的亮片 */
section.member .alert-success{
  background:rgba(111,191,139,.14);border:1px solid rgba(111,191,139,.45);
  color:#9fd9b4;border-radius:10px}


/* ---- 6. 紀錄類頁面的表格文字讀不到 ----
   儲值／提領／交易／遊戲／活動這幾頁的表格沿用 bootstrap 的 rgb(33,37,41),
   在深色版面上實測對比只有 1.18~1.26 —— 等於整張表看不見。 */
section.member table,
section.member table th,
section.member table td,
section.member .table th,
section.member .table td{color:var(--dg-text)}
section.member table thead th,
section.member table th.green-bg{color:var(--dg-gold-hi)}
section.member .text-success,
section.member table .text-success{color:#7fd6a0}
section.member .tdspan-red{color:#f0a99f}


/* ---- 7. 巡檢複驗後確認為真的幾項 ---- */

/* bootstrap 5 的文字工具帶 !important，前面那條蓋不過去 */
section.member .text-success,
section.member table .text-success{color:#7fd6a0!important}
section.member .text-primary{color:#8fc3f0!important}

/* 轉點／提領頁的餘額數字是深金 #936f1a，18px 實測 3.92。
   member.css 的 .member-page .wallet-box .num 權重比較高，要跟上去。 */
section.member .num,section.member .num *,
section.member .member-page .wallet-box .num,
section.member .member-page .wallet-box .num a,
section.member .member-page .wallet-box .num *{color:var(--dg-gold-hi)}

/* 分頁鈕只有 8×20，小到點不到 */
section.member .pager a,section.member .pager span,
section.member .pagination a,section.member .pagination span,
section.member .page-link{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:36px!important;min-height:36px;padding:0 10px;margin:0 3px;
  border:1px solid rgba(201,162,75,.3);border-radius:10px;color:var(--dg-text)}
section.member .pager a:hover,section.member .pagination a:hover{
  border-color:var(--dg-gold-hi);color:var(--dg-gold-hi)}

/* 側邊選單的三個磚:li 收成 auto 寬之後,裡面的 a 只剩圖示那麼寬(32px),
   點擊區小於 44。改成三等分的格子,a 撐滿整格。 */
section.member .memberMenu .icon-link ul{
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
}
section.member .memberMenu .icon-link li{margin:0!important}
section.member .memberMenu .icon-link li a{width:100%;min-width:44px}
@media only screen and (max-width:767px){
  section.member .memberMenu .icon-link ul{gap:10px}
}

/* 儲值結果頁的「返回」是淺灰底、只有 27px 高 */
section.member .btn2{
  background:transparent;border:1px solid rgba(201,162,75,.42);color:var(--dg-text);
  min-height:44px;padding:0 18px;border-radius:12px;font-weight:800;margin:0 6px 8px 0}
section.member .btn2:hover{border-color:var(--dg-gold-hi);color:var(--dg-gold-hi)}

/* 遊戲紀錄頁的日期篩選鈕在手機上只有 34px 高 */
section.member .btn-sm,section.member .btn.btn-white{min-height:36px}
@media only screen and (max-width:767px){
  section.member .btn-sm,section.member .btn.btn-white{min-height:44px}
}


/* ---- 8. Owner 2026-08-31 核可:選單裡的重複入口 ----
   「我的錢包」與磚上的「轉點」都連 Manger/transfer,
   「虛幣交易」與磚上的「提領」都連 Manger/withdrawal ——
   同一頁在選單出現兩次、還叫不同名字。磚是主要入口,清單這兩項收掉。
   用樣式隱藏不刪原始碼(天條 49),要還原就是拿掉這一條。 */
section.member .memberMenu .menu-link li#menu_wallet,
section.member .memberMenu .menu-link li#menu_bankcard{display:none!important}

/* 收掉兩項之後剩 6 個,4 欄會變成 4+2 留一條尾巴(天條 55),改成 3 欄兩列。 */
@media only screen and (min-width:992px){
  section.member.member-home .menu-link{grid-template-columns:repeat(3,1fr)}
}

/* ---- 9. 會員中心補上帳號與可用點數 ----
   天條 55:進站三秒內要看得到「我是誰」。資料是 Core_controller 本來就備好的
   user_info,沒有新增查詢。 */
section.member.member-home .member-hero{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;
  background:#17141f;border:1px solid var(--dg-line);border-radius:16px;
  padding:16px 20px;margin:0 0 14px}
section.member.member-home .member-hero .mh{
  display:flex;align-items:baseline;gap:10px;min-width:0}
section.member.member-home .member-hero .mh-label{
  font-size:13px;color:var(--dg-muted);white-space:nowrap}
section.member.member-home .member-hero .mh-acc{
  font-size:18px;font-weight:800;color:var(--dg-text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
section.member.member-home .member-hero .mh-num{
  font-size:24px;font-weight:900;color:var(--dg-gold-hi);
  font-variant-numeric:tabular-nums;letter-spacing:.5px}
@media only screen and (min-width:768px){
  section.member.member-home .member-hero{padding:20px 26px;gap:12px 40px}
  section.member.member-home .member-hero .mh-num{font-size:28px}
}


/* ---- 10. 上面三張卡的內容貼著邊框 ----
   member.css 的 `.member-page .user-info .box{padding:10px 0}` 權重(0,3,0)
   壓過我前面那條 `section.member .box`(0,2,0),左右內距實測是 0 ——
   標籤離卡片邊只有 1px。這裡用同樣的 padding 對齊 .member-index
   (USDT／超商／信用卡那三張,Owner 說那個間距是對的)。 */
section.member .member-page .user-info .box{padding:20px 18px 22px}
/* 實名認證卡裡的提示是 bootstrap 的 alert,自帶 1rem 下邊距,
   疊上卡片內距後底下會比 USDT 那幾張多空一截。 */
section.member .box .alert:last-child,
section.member .box > div:last-child > .alert:last-child{margin-bottom:0}
@media only screen and (min-width:768px){
  section.member .member-page .user-info .box{padding:26px 26px 28px}
}


/* ---- 11. 唯讀欄裡若還放了別的東西,框只留一層 ----
   .content 是唯讀顯示欄的底框;裡面若放的是 .form-control(銀行資訊那幾欄)
   就會兩個框疊在一起,或是放了按鈕(點數那一列)會把按鈕包進框裡。
   兩種情況都讓外層退成透明,框交給裡面那個元件。 */
section.member .member-page .content:has(.form-control){
  background:transparent!important;border:0!important;padding:0!important;
  min-height:0;display:block}
section.member .member-page .content > .form-control{width:100%}

section.member .member-page .content:has(.btn){
  background:transparent!important;border:0!important;padding:0!important;
  min-height:0;gap:14px}
section.member .member-page .content:has(.btn) > span{
  display:inline-flex;align-items:center;min-height:48px;
  white-space:nowrap;
  background:#1d1927;border:1px solid var(--dg-line-soft);border-radius:10px;
  padding:0 14px}
@media only screen and (min-width:768px){
  section.member .member-page .content:has(.btn) > span{min-height:52px}
}


/* ---- 12. 首頁小卡:圖片框統一 + 拿掉標籤條的陰影 ----
   原本 `.game-body > img` 只設 height:70%、width:auto,四張圖的原始比例
   是 0.88~0.97,寬度就跑成 160/166/168/176 四種,排在一起參差不齊。
   改成固定一個正方形框、object-fit:contain,圖片不會變形,四張框一樣大。
   主卡(每類第一張)走 #all/#slot/... 那組 ID 規則,不受這條影響。 */
.game-grop .game-body:not(:first-child) > img{
  top:7%;width:74%!important;height:auto;aspect-ratio:1/1;object-fit:contain;
  max-width:none;
}
/* 標籤條上方那道陰影拿掉,它本來就有自己的底色與上框線 */
.game-grop .game-body .link{box-shadow:none}


/* 窄螢幕上「標籤 + 值 + 按鈕」這種列剛好卡在邊緣,值的左右內距會被擠掉,
   看起來像貼著框。把間距與按鈕最小寬收一點,讓值把內距拿回來。 */
@media only screen and (max-width:479px){
  section.member .member-page .content:has(.btn){gap:10px}
  section.member .member-page .content:has(.btn) .btn{min-width:92px;padding:0 10px}
}

/* 彈窗的外框陰影與關閉叉叉的文字陰影(Owner 2026-08-31:一起改掉) */
section.member .modal-content{box-shadow:none}
section.member .modal .close,
section.member .modal-header .close{text-shadow:none}

/* ---- 13. 卡片裡的陰影全部移除(Owner 2026-08-31) ----
   掃過之後,會員區卡片裡只剩金色按鈕的光暈。按鈕本身有漸層底與亮金邊,
   不靠陰影分離。儲值頁的送出鈕是同一套視覺,一起收,免得兩頁不一致。 */
section.member .btn-warning,
section.member .submit-btn{box-shadow:none!important}

/* ---- 14. 紅利紀錄的累計列(Owner 2026-09-01) ----
   分頁一次只看得到 15 筆,會員最想知道的「總共領了多少」要放在最上面。
   視覺跟會員中心首頁的 member-hero 同一套,不另外發明。 */
section.member .bonus-sum{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  background:#17141f;border:1px solid var(--dg-line);border-radius:14px;
  padding:12px 16px;margin:0 0 14px;
}
section.member .bonus-sum .bs-label{
  font-size:13px;color:var(--dg-muted);white-space:nowrap;
}
section.member .bonus-sum .bs-num{
  font-size:24px;font-weight:900;color:var(--dg-gold-hi);
  font-variant-numeric:tabular-nums;letter-spacing:.5px;
}
@media only screen and (min-width:768px){
  section.member .bonus-sum{padding:16px 22px}
  section.member .bonus-sum .bs-num{font-size:28px}
}

/* ---- 15. 選單第一格獨佔一列(Owner 2026-09-01) ----
   紀錄類的分頁補到 6 個之後,連同帳戶管理是 7 格,3 欄或 2 欄都會剩一格落單。
   帳戶管理是這裡最主要的入口,讓它自己佔一列,後面 6 格剛好排滿。
   手機版是單欄清單(見下面的 767px 區塊),不需要也不套用。 */
@media only screen and (min-width:768px){
  section.member.member-home .menu-link li#account{grid-column:1/-1}
}

/* ---- 16. 儲值紀錄的日期欄看不見(Owner 2026-09-01) ----
   member.css 的 `.group-prepend input` 只設了 background:transparent,沒設 color,
   於是吃到瀏覽器對 input 的預設黑字 —— 深底上量到的對比是 1.16(需 4.5)。
   這三頁裡只有儲值紀錄的日期表單是開著的(提領、交易那兩頁被註解掉了)。
   字級一併提到 16px:iOS 對小於 16px 的輸入框會自動放大整頁(天條 34)。 */
section.member input[type="date"],
section.member .group-prepend input[type="date"]{
  color:var(--dg-text);
  background:#1d1927;
  border:1px solid var(--dg-line-soft);
  border-bottom:1px solid var(--dg-line-soft);
  border-radius:10px;
  font-size:16px;
  min-height:44px;
  padding:0 12px;
}
/* 日曆小圖示是給淺底畫的,深底上要反白才看得到 */
section.member input[type="date"]::-webkit-calendar-picker-indicator{
  filter:invert(1);
  opacity:.75;
}
section.member input[type="date"]:focus{
  outline:none;
  border-color:var(--dg-gold-hi);
}

/* ---- 17. 會員中心首頁的區塊間距(Owner 2026-09-02) ----
   帳戶管理從紀錄清單裡抽出來、擺到操作圖示上面之後,圖示格上面沒有間距,
   實測是 0px,跟其他區塊之間的 12px 對不上。
   這裡統一成 12px,並照天條 38 把主視覺的下間距收掉 —— 間距一律由
   下一塊的上間距決定,兩邊都設會疊加。 */
section.member.member-home .member-hero{margin-bottom:0}
/* 區塊之間 20px、區塊內的卡片維持 grid 的 10~12px,兩級分得開,
   不然四個區塊等距排下來會看成同一片。 */
section.member.member-home .icon-link{margin-top:20px}
/* 上面第 9 節那條 menu-link 的 margin-top:12px 帶了 !important,
   這裡要蓋過它才生效,不回頭改舊規則。 */
section.member.member-home .memberMenu > ul.menu-link{margin-top:20px!important}

/* ---- 18. 拿掉回到頂部按鈕(Owner 2026-09-02) ----
   那顆箭頭在共用的 includes/footer.php,全站每一頁都有。
   這裡用樣式隱藏,不動共用樣板 —— 要放回來把這一節刪掉即可(天條 13)。
   main.js 仍會對它加 .active,但元素不顯示,沒有副作用。 */
.back-to-top{display:none!important}

/* ---- 19. GE 電子的遊戲列表(Owner 2026-09-02:排版重新調整) ----
   `.slotPage` 全站只有 ge.php 用,規則寫在這裡不會波及別頁。
   原本每張卡下面掛一顆紅色 btn-danger,按鈕跑出卡片外連成一條紅帶;
   改成整張卡片就是連結,不再另外放按鈕。 */
section.slotPage{padding:14px 0 44px}

section.slotPage .gamebreadcrumbs{
  display:flex;align-items:center;flex-wrap:wrap;gap:6px;
  margin:0 0 18px;font-size:14px;color:var(--dg-muted);
}
section.slotPage .gamebreadcrumbs img{width:18px;height:18px;margin-right:6px;vertical-align:-3px}
section.slotPage .gamebreadcrumbs a{color:var(--dg-muted);text-decoration:none}
section.slotPage .gamebreadcrumbs a:hover{color:var(--dg-gold-hi)}
section.slotPage .gamebreadcrumbs .active{color:var(--dg-gold-hi)}

section.slotPage .slot-head{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  padding-bottom:14px;margin-bottom:18px;border-bottom:1px solid var(--dg-line);
}
section.slotPage .slot-head h2{
  margin:0;font-size:24px;font-weight:900;color:var(--dg-text);letter-spacing:.5px;
}
section.slotPage .slot-count{
  margin:0;font-size:14px;color:var(--dg-muted);
  font-variant-numeric:tabular-nums;
}

/* 一行放幾張隨螢幕調,卡片本身就是觸控目標,遠超過 44px */
section.slotPage .slot-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
}
@media only screen and (min-width:480px){
  section.slotPage .slot-grid{grid-template-columns:repeat(4,1fr);gap:12px}
}
@media only screen and (min-width:768px){
  section.slotPage .slot-grid{grid-template-columns:repeat(5,1fr)}
}
@media only screen and (min-width:992px){
  section.slotPage .slot-grid{grid-template-columns:repeat(6,1fr);gap:14px}
}

section.slotPage .slot-card{
  display:flex;flex-direction:column;gap:8px;
  background:#17141f;border:1px solid var(--dg-line);border-radius:14px;
  padding:8px 8px 10px;text-decoration:none;color:var(--dg-text);
}
section.slotPage .slot-card .sc-pic{
  display:block;aspect-ratio:1/1;border-radius:10px;overflow:hidden;background:#0f0d15;
}
section.slotPage .slot-card img{
  width:100%;height:100%;object-fit:cover;display:block;
}
section.slotPage .slot-card .sc-name{
  font-size:14px;line-height:1.35;text-align:center;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:38px;
}
section.slotPage .slot-card:hover{border-color:var(--dg-gold-hi)}
section.slotPage .slot-card:hover .sc-name{color:var(--dg-gold-hi)}
section.slotPage .slot-card:focus-visible{
  outline:2px solid var(--dg-gold-hi);outline-offset:2px;
}
section.slotPage .slot-empty{color:var(--dg-muted);padding:40px 0;text-align:center}

/* 本頁原本有一條 inline style 把頁首的「電子」導覽塗成 #f44336,
   跟站上的深底金字不同一套。那條隨著樣板重寫拿掉了,
   這裡不另外補規則 —— 讓它跟其他頁一樣吃 brand.css 既有的導覽色。 */

/* ================================================================
   20. 電腦版版面系統(Owner 2026-09-02 指示「全站電腦版重新規劃」)
   ----------------------------------------------------------------
   量測基準:63 頁 × 1440px,腳本在 dg22-preview/tools/audit_desktop.py。
   全部包在 min-width:992px 底下,手機與平板維持原樣不動。
   首頁(index)屬天條 10,不在這一批。
   ================================================================ */
@media only screen and (min-width:992px){

  /* --- 20.1 一套內容寬度 ---------------------------------------
     原本五種:1200 / 1320 / 1392 / 1440 / 960。統一成 1200,
     跟會員區已經在用的那個對齊,左右邊界不再跳。
     刻意滿版的(頁首、主視覺、g-grop-m 那些)不在這裡,不受影響。 */
  section.slotPage .container,
  section.slotPaRSG .container,          /* rsg.php 的 class 拼法不一樣 */
  section.featured.index-about .container,  /* 真人/體育/彩票那幾個 include */
  section.featured.slot .container,
  section.featured.live .container,
  section.featured.fish .container,
  section.featured.sport .container,
  section.featured.keno .container,
  #faq .container,
  section.member .container{
    max-width:1200px;margin-left:auto;margin-right:auto;
  }

  /* --- 20.2 頁面太短時不要留一大片黑 ---------------------------
     會員中心首頁在 1440 只有 572px 高,底下整片黑到頁尾。
     給內容區一個最小高度,頁尾自然被推下去。
     扣掉頁首 56 + 頁尾約 220。 */
  #main{min-height:calc(100vh - 276px)}

  /* --- 20.3 會員區:側欄加寬、內容欄限寬 ------------------------
     側欄原本 180px,三顆圖示擠成一排小方塊;內容欄 1000px,
     欄位擠在左邊、右半邊空著。改成 260 + 內容欄自己再限一層。 */
  /* 只有內頁是「側欄 + 內容」兩欄;會員中心首頁(.member-home)整頁就是
     那份選單,沒有內容欄,套上去會被壓成 260px,所以排除掉。 */
  section.member:not(.member-home) .container{
    display:flex;align-items:flex-start;gap:28px;
  }
  section.member:not(.member-home) .member-menu_web{
    flex:0 0 260px;width:260px;position:sticky;top:76px;
  }
  section.member:not(.member-home) .member-page{
    flex:1 1 auto;min-width:0;
  }

  /* 側欄裡的三顆圖示卡加大,不要擠成一團 */
  section.member .memberMenu .icon-link ul{gap:10px}
  section.member .memberMenu .icon-link li a{padding:12px 4px}

  /* --- 20.4 帳戶管理那類表單:標籤與值排成兩欄 ------------------
     值的小方塊原本寬度跟著內容跑(帳號一個寬度、銀行名稱一個寬度),
     看起來零散。給一個共同的最小寬度,右邊就不會缺一角。 */
  section.member .member-page .user-info .form-group{
    display:grid;grid-template-columns:150px minmax(0,1fr);
    align-items:center;gap:12px;
  }
  section.member .member-page .user-info .form-group > label{margin:0}
  section.member .member-page .user-info .content{min-width:280px}

  /* --- 20.5 同一頁一套底色(天條 55)---------------------------
     量到 account 4 種、member 3 種。收斂成兩層:
     卡片 --dg-surface、卡片裡的欄位 --dg-surface-2,不再有第三第四種。 */
  section.member .memberMenu .icon-link li,
  section.member .memberMenu .menu-link li{
    background:#1d1927;
  }
  section.member .member-page .user-info .box{background:#17141f}

  /* --- 20.6 內文字級 -------------------------------------------
     六個紀錄頁的表格與說明量到 <15px。內文基準 16px(天條 34),
     表格資訊密度高,給 15px。 */
  section.member .member-page table,
  section.member .member-page table td,
  section.member .member-page table th{font-size:15px}
  section.member .member-page .user-info > p{font-size:15px}
}

@media only screen and (max-width:767px){
  section.member.member-home .member-menu_web{padding:0}
  section.member.member-home .menu-link{grid-template-columns:1fr;gap:10px}
  section.member.member-home .menu-link li{
    display:block;border-bottom:1px solid var(--dg-line);
  }
  section.member.member-home .menu-link li a{width:100%;justify-content:flex-start}
}