/* ==========================================================================
   dg66hk.com 改版樣式表(取代式改版:新樣板只載這一支,不載 style.css)
   色系沿用 dg66.net WP 首頁實測值:米白底 / 深炭字 / 金色主色。
   規則:
     - 間距全走 --s* 尺度,區塊只設上間距(margin-top),不設下間距
     - 一般文字 16px、標題 24px
     - 不出現捲軸條(仍可捲動)
   ========================================================================== */

:root{
  /* 色票(取自 dg66.net 首頁 computed style) */
  --bg:        #faf8f3;   /* 頁面底 */
  --surface:   #ffffff;   /* 卡片底 */
  --ink:       #231e16;   /* 主要文字 */
  --ink-2:     #3d362c;   /* 次要標題 */
  --muted:     #534e45;   /* 說明文字(對米白底 7.8:1、金淡底 7.2:1) */
  --line:      #e3dccc;   /* 邊線 */
  --line-2:    #ece6da;   /* 淺邊線 */
  --gold:      #c0983e;   /* 主色 */
  --gold-dk:   #614c18;   /* 深金(文字用,對白底 8.2:1、米白 7.7:1、金淡底 7.2:1) */
  --gold-lt:   #e6c87a;   /* 淺金(深底上的文字) */
  --gold-wash: #f6efdf;   /* 金色淡底 */
  --dark:      #0d0c0a;   /* 深底(主視覺、底部選單) */
  --dark-2:    #1a1713;
  --ok:        #175a2d;   /* 對綠淡底 7.3:1 */
  --ok-wash:   #e6f4ea;
  --warn:      #714a00;   /* 對黃淡底 7.1:1 */
  --warn-wash: #fff3d6;
  --danger:    #962019;   /* 對白底 8.3:1 */
  --danger-wash:#fbe9e7;

  /* 間距尺度 */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  /* 字級 */
  --fs:    16px;
  --fs-sm: 14px;
  --fs-lg: 18px;
  --fs-h:  24px;

  --r:  12px;
  --r-sm: 8px;
  --wrap: 1200px;
  --gutter: 16px;          /* 手機左右留白:不貼滿版 */
  --head-h: 60px;
  --bnav-h: 62px;

  --shadow: 0 6px 24px rgba(35,30,22,.08);
  --shadow-sm: 0 2px 8px rgba(35,30,22,.06);
}
@media (min-width:768px){ :root{ --gutter: 24px; --head-h: 68px; } }
@media (min-width:1024px){ :root{ --gutter: 40px; --head-h: 76px; } }

/* -------------------------------------------------------------- reset */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; height:100%; }
body.hk{
  margin:0; background:var(--bg); color:var(--ink);
  font: 400 var(--fs)/1.6 "PingFang HK","PingFang TC","Noto Sans HK","Noto Sans TC","Microsoft JhengHei","Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100%;
}
/* Owner:所有頁面都不要有捲軸(仍可捲動,只是不畫捲軸條) */
.hk, .hk *{ scrollbar-width:none; -ms-overflow-style:none; }
.hk ::-webkit-scrollbar, .hk::-webkit-scrollbar{ width:0; height:0; display:none; }
html.hk-html{ scrollbar-width:none; -ms-overflow-style:none; }
html.hk-html::-webkit-scrollbar{ width:0; height:0; display:none; }

.hk img{ max-width:100%; display:block; }
.hk a{ color:var(--gold-dk); text-decoration:none; }
.hk a:hover{ color:var(--gold); }
.hk h1,.hk h2,.hk h3,.hk h4{ margin:0; font-weight:700; color:var(--ink); line-height:1.3; }
.hk h1,.hk h2{ font-size:var(--fs-h); }
.hk h3{ font-size:var(--fs-lg); }
.hk p{ margin:0; }
.hk ul{ margin:0; padding:0; list-style:none; }
.hk button{ font:inherit; }
.hk input,.hk select,.hk textarea{ font:inherit; color:var(--ink); }
.hk [hidden]{ display:none !important; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.wrap{ width:100%; max-width:calc(var(--wrap) + var(--gutter)*2); margin:0 auto; padding:0 var(--gutter); }

/* 手機底部固定選單會蓋住最後一段內容,主內容要留出高度 */
.hk-main{ padding-bottom:calc(var(--bnav-h) + var(--s5) + env(safe-area-inset-bottom, 0px)); }
@media (min-width:1024px){ .hk-main{ padding-bottom:var(--s8); } }

/* -------------------------------------------------------------- 按鈕 */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:44px; padding:0 22px; border-radius:999px;
  font-size:var(--fs); font-weight:700; line-height:1; white-space:nowrap;
  border:1px solid transparent; cursor:pointer; text-decoration:none;
  transition:background .15s, color .15s, box-shadow .15s, transform .05s;
}
.btn:active{ transform:translateY(1px); }
.hk .btn-gold{ background:linear-gradient(180deg,#d9b25a 0%, var(--gold) 100%); color:var(--ink); border-color:#b58c33; box-shadow:0 2px 0 rgba(125,97,31,.35); }
.hk .btn-gold:hover{ background:linear-gradient(180deg,#e2bd68 0%, #c9a24a 100%); color:var(--ink); }
.hk .btn-ghost{ background:var(--surface); color:var(--ink); border-color:var(--line); }
.hk .btn-ghost:hover{ border-color:var(--gold); color:var(--gold-dk); }
.hk .btn-dark{ background:var(--ink); color:#fff; }
.btn-dark:hover{ background:var(--dark-2); color:var(--gold-lt); }
.btn-sm{ min-height:36px; padding:0 14px; font-size:var(--fs-sm); }
.btn-block{ width:100%; }
.btn[disabled],.btn.is-disabled{ opacity:.55; pointer-events:none; }

/* 兩顆按鈕同一行、左右各一顆(Owner 指定) */
.btn-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); margin-top:var(--s4); }
.btn-row .btn{ width:100%; min-height:48px; }
@media (min-width:768px){ .btn-row{ max-width:520px; margin-left:auto; margin-right:auto; gap:var(--s4); } }

/* -------------------------------------------------------------- 頁首 */
.hk-head{
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,.96); backdrop-filter:saturate(1.2) blur(6px);
  border-bottom:1px solid var(--line-2);
}
.hk-head.is-scrolled{ box-shadow:var(--shadow-sm); }
.hk-head .wrap{ display:flex; align-items:center; gap:var(--s4); min-height:var(--head-h); }
.brand{ display:flex; align-items:center; flex:0 0 auto; }
.brand img{ height:34px; width:auto; }
@media (min-width:768px){ .brand img{ height:40px; } }
@media (min-width:1024px){ .brand img{ height:46px; } }

.head-nav{ display:none; }
@media (min-width:1024px){
  .head-nav{ display:flex; gap:var(--s1); margin-left:var(--s4); }
  .head-nav a{
    display:inline-flex; align-items:center; min-height:44px; padding:0 14px; border-radius:999px;
    color:var(--ink-2); font-weight:600;
  }
  .head-nav a:hover{ background:var(--gold-wash); color:var(--gold-dk); }
  .head-nav a.is-active{ color:var(--gold-dk); box-shadow:inset 0 -2px 0 var(--gold); border-radius:0; }
}
.head-auth{ margin-left:auto; display:flex; align-items:center; gap:var(--s2); }
.head-auth .btn-sm{ min-height:40px; }
.desk{ display:none !important; }
@media (min-width:1024px){ .desk{ display:inline-flex !important; } .mob{ display:none !important; } }

/* 登入後:餘額點數 */
.bal{
  display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 6px 0 14px;
  border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--ink);
  font-size:var(--fs-sm); font-weight:600; white-space:nowrap;
}
.bal b{ font-size:var(--fs-lg); color:var(--gold-dk); font-variant-numeric:tabular-nums; }
.bal .refresh{
  width:30px; height:30px; border-radius:50%; border:0; background:var(--gold-wash); color:var(--gold-dk);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
}
.bal .refresh:hover{ background:var(--gold); color:#fff; }
.bal .refresh svg{ width:16px; height:16px; }
.bal .refresh.is-busy svg{ animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.uid{ color:var(--muted); font-size:var(--fs-sm); }

/* 公告跑馬燈 */
.ticker{ background:var(--gold-wash); border-bottom:1px solid var(--line-2); }
.ticker .wrap{ display:flex; align-items:center; gap:var(--s3); min-height:40px; }
.ticker .tag{ flex:0 0 auto; font-size:var(--fs-sm); font-weight:700; color:var(--gold-dk); }
.ticker .rail{ flex:1 1 auto; overflow:hidden; white-space:nowrap; }
.ticker-track{ display:inline-flex; gap:var(--s7); padding-left:100%; animation:ticker 28s linear infinite; }
.ticker-track li{ display:inline-block; font-size:var(--fs-sm); }
.ticker-track a{ color:var(--ink-2); }
.ticker:hover .ticker-track{ animation-play-state:paused; }
@keyframes ticker{ to{ transform:translateX(-100%); } }
@media (prefers-reduced-motion:reduce){ .ticker-track{ animation:none; padding-left:0; } }

/* -------------------------------------------------------------- 主視覺 */
.hero{ margin-top:var(--s4); }
@media (min-width:768px){ .hero{ margin-top:var(--s5); } }
.hero-box{
  position:relative; overflow:hidden; border-radius:var(--r); background:var(--dark);
  aspect-ratio:16/5;               /* 原圖 1920x600 */
  box-shadow:var(--shadow);
}

.hero-track{ display:flex; height:100%; transition:transform .5s ease; }
.hero-slide{ flex:0 0 100%; height:100%; }
.hero-slide img{ width:100%; height:100%; object-fit:cover; object-position:center; }
.hero-dots{ position:absolute; left:0; right:0; bottom:10px; display:flex; justify-content:center; gap:8px; }
.hero-dots button{
  width:22px; height:22px; padding:0; border:0; background:transparent; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
}
.hero-dots button span{ display:block; width:8px; height:8px; border-radius:999px; background:rgba(255,255,255,.55); transition:width .2s; }
.hero-dots button.is-on span{ width:22px; background:var(--gold); }
.hero-empty{ display:flex; align-items:center; justify-content:center; color:var(--gold-lt); font-size:var(--fs-h); font-weight:700; letter-spacing:.08em; }

/* -------------------------------------------------------------- 區塊共用 */
.sec{ margin-top:var(--s6); }
@media (min-width:768px){ .sec{ margin-top:var(--s7); } }
.sec-head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s3); }
.sec-head h2{ position:relative; padding-left:14px; }
.sec-head h2::before{ content:""; position:absolute; left:0; top:4px; bottom:4px; width:4px; border-radius:2px; background:var(--gold); }
.sec-head .more{ font-size:var(--fs-sm); font-weight:600; white-space:nowrap; display:inline-flex; align-items:center; min-height:32px; }
.sec-sub{ color:var(--muted); font-size:var(--fs-sm); margin-top:var(--s1); }

/* -------------------------------------------------------------- 遊戲小卡 */
.game-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s3); margin-top:var(--s4); }
@media (min-width:768px){ .game-grid{ grid-template-columns:repeat(3,1fr); gap:var(--s4); } }
@media (min-width:1024px){ .game-grid{ gap:var(--s5); margin-top:var(--s5); } }
.hk .game-card{
  display:block; background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r);
  overflow:hidden; box-shadow:var(--shadow-sm); color:var(--ink);
  transition:transform .15s, box-shadow .15s, border-color .15s;
}
.hk .game-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--gold); color:var(--ink); }
.game-card .pic{ aspect-ratio:400/193; background:var(--dark-2); overflow:hidden; }  /* 原圖 400x193 */
.game-card .pic img{ width:100%; height:100%; object-fit:cover; }
.game-card .meta{ display:flex; align-items:center; justify-content:space-between; gap:var(--s2); padding:10px 12px 12px; }
.game-card .name{ font-weight:700; font-size:var(--fs); }
.game-card .go{
  flex:0 0 auto; font-size:var(--fs-sm); font-weight:700; color:var(--gold-dk);
  background:var(--gold-wash); border-radius:999px; padding:4px 10px;
}
@media (min-width:768px){ .game-card .meta{ padding:14px 16px 16px; } .game-card .name{ font-size:var(--fs-lg); } }

/* -------------------------------------------------------------- 優惠卡 */
.promo-grid{ display:grid; grid-template-columns:1fr; gap:var(--s4); margin-top:var(--s4); }
@media (min-width:768px){ .promo-grid{ grid-template-columns:repeat(2,1fr); gap:var(--s5); margin-top:var(--s5); } }
.hk .promo-card{
  display:block; background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r);
  overflow:hidden; box-shadow:var(--shadow-sm); color:var(--ink);
  transition:transform .15s, box-shadow .15s, border-color .15s;
}
.hk .promo-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--gold); color:var(--ink); }
.promo-card .pic{ aspect-ratio:16/5; background:var(--dark-2); }  /* 活動圖 1920x600 */
.promo-card .pic img{ width:100%; height:100%; object-fit:cover; }
.promo-card .meta{ padding:12px 14px 14px; display:flex; align-items:center; justify-content:space-between; gap:var(--s3); }
.promo-card .name{ font-weight:700; font-size:var(--fs); }
.promo-card .go{ flex:0 0 auto; font-size:var(--fs-sm); font-weight:700; color:var(--gold-dk); white-space:nowrap; }
@media (min-width:768px){ .promo-card .meta{ padding:14px 18px 16px; } .promo-card .name{ font-size:var(--fs-lg); } }

/* -------------------------------------------------------------- 底部固定選單(手機) */
.hk-bnav{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  background:rgba(13,12,10,.97); border-top:1px solid rgba(230,200,122,.35);
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
@media (min-width:1024px){ .hk-bnav{ display:none; } }
.hk-bnav ul{ display:grid; grid-template-columns:repeat(5,1fr); height:var(--bnav-h); }
.hk-bnav a{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  height:100%; min-width:44px; color:#d8d0c0; font-size:13px; font-weight:600; line-height:1;
}
.hk-bnav a svg{ width:24px; height:24px; }
.hk-bnav a.is-active{ color:var(--gold-lt); }
.hk-bnav a.is-active svg{ filter:drop-shadow(0 0 6px rgba(230,200,122,.5)); }
.hk-bnav a.is-primary{ color:var(--gold-lt); }

/* -------------------------------------------------------------- 彈出視窗(7.5 成螢幕) */
.hk-modal{ position:fixed; inset:0; z-index:100; display:none; }
.hk-modal.is-open{ display:block; }
.hk-modal .mask{ position:absolute; inset:0; background:rgba(13,12,10,.6); }
.hk-modal .dlg{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:75vw; max-width:440px; max-height:75vh;
  display:flex; flex-direction:column;
  background:var(--surface); border-radius:var(--r); box-shadow:0 20px 60px rgba(0,0,0,.35);
  border-top:4px solid var(--gold);
}
.hk-modal .dlg-h{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3); padding:14px 18px 10px; }
.hk-modal .dlg-h h2{ font-size:20px; }
.hk-modal .x{
  width:40px; height:40px; border:0; border-radius:50%; background:var(--bg); color:var(--ink); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; font-size:22px; line-height:1;
}
.hk-modal .x:hover{ background:var(--gold-wash); color:var(--gold-dk); }
.hk-modal .dlg-b{ padding:4px 18px 18px; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.hk-modal .dlg-f{ display:flex; justify-content:center; gap:var(--s3); padding:0 18px 16px; flex-wrap:wrap; }
.hk-modal .dlg-f a{ font-size:var(--fs-sm); font-weight:600; min-height:32px; display:inline-flex; align-items:center; }
body.hk-modal-open{ overflow:hidden; }

/* -------------------------------------------------------------- 表單 */
.field{ margin-top:var(--s3); }
.field label{ display:block; font-size:var(--fs-sm); font-weight:600; color:var(--ink-2); margin-bottom:6px; }
.input, .hk select.input{
  display:block; width:100%; min-height:46px; padding:0 14px; border-radius:var(--r-sm);
  border:1px solid var(--line); background:var(--surface); color:var(--ink); font-size:var(--fs);
}
.input:focus{ outline:2px solid var(--gold); outline-offset:0; border-color:var(--gold); }
.input::placeholder{ color:#756f64; }  /* 對白底 5.0:1 */
.input[type=file]{ padding:9px 12px; }
.field-row{ display:flex; gap:var(--s2); align-items:center; }
.field-row .input{ flex:1 1 auto; min-width:0; }
.vcode-img{ flex:0 0 auto; height:46px; width:auto; border-radius:var(--r-sm); border:1px solid var(--line); cursor:pointer; }
.hint{ display:block; margin-top:6px; font-size:var(--fs-sm); color:var(--muted); }
.alert{ margin-top:var(--s3); padding:10px 14px; border-radius:var(--r-sm); font-size:var(--fs-sm); font-weight:600; }
.alert-danger{ background:var(--danger-wash); color:var(--danger); }
.alert-success{ background:var(--ok-wash); color:var(--ok); }
.form-actions{ margin-top:var(--s4); display:flex; justify-content:center; }
.form-actions .btn{ min-width:200px; min-height:48px; }
.readonly{ display:block; min-height:46px; padding:11px 14px; border-radius:var(--r-sm); background:var(--bg); border:1px dashed var(--line); color:var(--ink); word-break:break-all; }

/* 手機底部選單之上的固定操作列不在這頁,略 */

/* -------------------------------------------------------------- 會員中心 */
.page-band{ margin-top:var(--s4); }
@media (min-width:768px){ .page-band{ margin-top:var(--s5); } }
.page-band .row{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3); }
.page-band h1{ position:relative; padding-left:14px; }
.page-band h1::before{ content:""; position:absolute; left:0; top:4px; bottom:4px; width:4px; border-radius:2px; background:var(--gold); }
.page-band .back{ font-size:var(--fs-sm); font-weight:600; display:inline-flex; align-items:center; gap:4px; min-height:32px; }

/* 會員分頁列:手機可橫向滑動(不畫捲軸),電腦一列排開 */
.mtabs{ margin-top:var(--s4); border-bottom:1px solid var(--line); }
.mtabs ul{ display:flex; gap:var(--s1); overflow-x:auto; white-space:nowrap; }
.mtabs a{
  display:inline-flex; align-items:center; gap:6px; min-height:46px; padding:0 14px;
  color:var(--ink-2); font-weight:600; font-size:var(--fs); border-bottom:3px solid transparent; margin-bottom:-1px;
}
.mtabs a svg{ width:18px; height:18px; }
.mtabs a:hover{ color:var(--gold-dk); }
.mtabs a.is-active{ color:var(--gold-dk); border-bottom-color:var(--gold); }
@media (min-width:768px){ .mtabs a{ padding:0 18px; } }

.cards{ display:grid; grid-template-columns:1fr; gap:var(--s4); margin-top:var(--s4); }
@media (min-width:768px){ .cards{ grid-template-columns:1fr 1fr; gap:var(--s5); margin-top:var(--s5); } }
.card{ background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r); box-shadow:var(--shadow-sm); padding:var(--s4); }
@media (min-width:768px){ .card{ padding:var(--s5); } }
.card.span{ grid-column:1 / -1; }
.card-h{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3); padding-bottom:var(--s3); border-bottom:1px solid var(--line-2); }
.card-h h2{ font-size:20px; }
.tag{ display:inline-flex; align-items:center; min-height:26px; padding:0 10px; border-radius:999px; font-size:13px; font-weight:700; white-space:nowrap; }
.tag-ok{ background:var(--ok-wash); color:var(--ok); }
.tag-warn{ background:var(--warn-wash); color:var(--warn); }
.tag-muted{ background:var(--bg); color:var(--muted); border:1px solid var(--line-2); }
.card-note{ margin-top:var(--s3); font-size:var(--fs-sm); color:var(--muted); }
.card-note b{ color:var(--danger); font-weight:700; }

/* 基本資料摘要 */
.profile{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s4); }
.avatar{
  flex:0 0 auto; width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg,#e6c87a,var(--gold)); color:var(--ink); font-weight:800; font-size:22px;
}
.profile .who{ flex:1 1 160px; min-width:0; }
.profile .who b{ display:block; font-size:var(--fs-lg); }
.profile .who span{ display:block; color:var(--muted); font-size:var(--fs-sm); }
.profile .points{ flex:1 1 100%; display:flex; align-items:center; justify-content:space-between; gap:var(--s3); padding:var(--s3) var(--s4); border-radius:var(--r-sm); background:var(--gold-wash); }
.profile .points span{ color:var(--gold-dk); font-size:var(--fs-sm); font-weight:600; }
.profile .points b{ display:block; font-size:var(--fs-h); color:var(--ink); font-variant-numeric:tabular-nums; }
@media (min-width:768px){ .profile .points{ flex:0 0 auto; min-width:300px; } }

.kv{ display:grid; grid-template-columns:1fr; gap:var(--s3); margin-top:var(--s4); }
@media (min-width:768px){ .kv{ grid-template-columns:repeat(3,1fr); } }
.kv div{ padding:10px 14px; border-radius:var(--r-sm); background:var(--bg); border:1px solid var(--line-2); }
.kv span{ display:block; font-size:13px; color:var(--muted); }
.kv b{ display:block; font-size:var(--fs); word-break:break-all; }

/* 第三方綁定 */
.bind-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); margin-top:var(--s4); }
.hk .bind{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font-weight:600; font-size:var(--fs-sm); }
.bind img{ width:22px; height:22px; }
.bind.is-done{ background:var(--ok-wash); color:var(--ok); border-color:transparent; pointer-events:none; }
.hk .bind:hover{ border-color:var(--gold); color:var(--gold-dk); }

/* 身分驗證上傳列 */
.upload-list{ margin-top:var(--s2); }
.upload-list .up{ display:grid; grid-template-columns:1fr; gap:6px; padding:var(--s3) 0; border-bottom:1px solid var(--line-2); }
.upload-list .up:last-child{ border-bottom:0; }
.upload-list .up label{ margin:0; }
.upload-list .up .sample{ font-size:13px; font-weight:600; margin-left:8px; }
@media (min-width:768px){ .upload-list .up{ grid-template-columns:220px 1fr; align-items:center; gap:var(--s3); } }
.notes{ margin-top:var(--s3); padding:var(--s3) var(--s4); border-radius:var(--r-sm); background:var(--bg); font-size:var(--fs-sm); color:var(--muted); }
.notes li{ position:relative; padding-left:14px; }
.notes li::before{ content:"•"; position:absolute; left:2px; color:var(--gold); }

/* 帳戶管理(新增區塊) */
.grid-2{ display:grid; grid-template-columns:1fr; gap:var(--s3); }
@media (min-width:768px){ .grid-2{ grid-template-columns:1fr 1fr; gap:var(--s4); } }
.grid-3{ display:grid; grid-template-columns:1fr; gap:var(--s3); }
@media (min-width:768px){ .grid-3{ grid-template-columns:2fr 1fr 1fr; gap:var(--s4); } }

/* -------------------------------------------------------------- 表格(紀錄類) */
.tbl-wrap{ overflow-x:auto; margin-top:var(--s3); border:1px solid var(--line-2); border-radius:var(--r-sm); }
.tbl{ width:100%; border-collapse:collapse; min-width:560px; font-size:var(--fs-sm); }
.tbl th,.tbl td{ padding:10px 12px; text-align:left; border-bottom:1px solid var(--line-2); white-space:nowrap; }
.tbl th{ background:var(--bg); color:var(--muted); font-weight:700; }
.tbl tr:last-child td{ border-bottom:0; }
.tbl .num{ font-variant-numeric:tabular-nums; }
.tbl .ta-r{ text-align:right; }
.plus{ color:var(--ok); font-weight:700; }
.minus{ color:var(--danger); font-weight:700; }

/* -------------------------------------------------------------- 空狀態 */
.empty{ padding:var(--s6) var(--s4); text-align:center; color:var(--muted); border:1px dashed var(--line); border-radius:var(--r); margin-top:var(--s4); }

/* 頁首餘額的「餘額」兩字手機收起,只留數字 */
.mob-hide{ display:none; }
@media (min-width:768px){ .mob-hide{ display:inline; } }

/* 圖示尺寸:inline SVG 一律跟字級走,不要撐成一整塊 */
.ico{ width:1.15em; height:1.15em; flex:0 0 auto; display:inline-block; vertical-align:-.2em; }
.btn .ico{ width:20px; height:20px; }
.head-auth .btn .ico{ width:18px; height:18px; }
.head-auth .btn[aria-label="登出"]{ min-width:40px; padding:0 10px; }
.page-band .back{ white-space:nowrap; flex:0 0 auto; }
/* 手機遊戲小卡:名稱佔整行,右側只留箭頭,長名稱(百家樂牛牛)不會把卡撐高 */
@media (max-width:767px){
  .game-card .meta{ padding:10px 12px 12px; }
  .game-card .go{ padding:0; background:transparent; font-size:0; width:10px; height:10px; border-right:2px solid var(--gold-dk); border-bottom:2px solid var(--gold-dk); transform:rotate(-45deg); margin-right:4px; }
  .game-card .name{ font-size:15px; min-width:0; }
  .hero-box{ aspect-ratio:16/5; }
}

/* -------------------------------------------------------------- 儲值 / 提領 / 紀錄頁 */
.step{ display:flex; align-items:center; gap:10px; margin-top:var(--s5); font-size:var(--fs-lg); }
.step span{ width:26px; height:26px; border-radius:50%; background:var(--ink); color:var(--gold-lt); font-size:14px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; }
.pay-main{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); margin-top:var(--s3); }
@media (min-width:768px){ .pay-main{ grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--s4); } }
.pay-tile{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:86px; padding:12px 8px;
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface); color:var(--ink-2); font-weight:700; font-size:var(--fs-sm); cursor:pointer;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.pay-tile .ico{ width:30px; height:30px; color:var(--gold-dk); }
.pay-tile:hover{ border-color:var(--gold); }
.pay-tile.is-on{ border-color:var(--gold); background:var(--gold-wash); color:var(--ink); box-shadow:inset 0 0 0 1px var(--gold); }
.pay-sub{ display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s3); }
.hk .pay-chip{
  display:inline-flex; align-items:center; min-height:44px; padding:0 18px; border-radius:999px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink-2); font-weight:600; font-size:var(--fs-sm);
}
.hk .pay-chip:hover{ border-color:var(--gold); color:var(--gold-dk); }
.hk .pay-chip.current{ background:var(--ink); color:var(--gold-lt); border-color:var(--ink); }
.input-lg{ min-height:52px; font-size:20px; font-weight:700; font-variant-numeric:tabular-nums; }
.quick{ display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s3); }
.chip{
  min-height:40px; padding:0 14px; border-radius:999px; border:1px solid var(--line); background:var(--surface);
  color:var(--ink-2); font-weight:600; font-size:var(--fs-sm); cursor:pointer; font-variant-numeric:tabular-nums;
}
.chip:hover{ border-color:var(--gold); color:var(--gold-dk); }
.d-none{ display:none !important; }
.usdt-box .input{ background:var(--bg); }
label.error, .text-danger{ display:block; margin-top:6px; color:var(--danger); font-size:var(--fs-sm); font-weight:600; }

.stat-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); margin-top:var(--s4); }
.stat{ padding:12px 14px; border-radius:var(--r-sm); background:var(--gold-wash); }
.stat span{ display:block; font-size:13px; color:var(--gold-dk); font-weight:600; }
.stat b{ display:inline-block; font-size:var(--fs-h); font-variant-numeric:tabular-nums; margin-top:2px; }
.stat b.sm{ font-size:var(--fs); }
.stat small{ display:block; font-size:13px; color:var(--muted); }
.stat b.sm + small{ display:block; }
.stat b:not(.sm) + small{ display:inline; margin-left:4px; }

.filter{ margin-top:var(--s4); }
.filter-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); align-items:end; }
.filter-row .field{ margin-top:0; }
.filter-row .field-btn{ grid-column:1 / -1; }
.filter-row .field-btn .btn{ width:100%; min-height:46px; }
@media (min-width:768px){ .filter-row{ grid-template-columns:1fr 1fr auto; } .filter-row .field-btn{ grid-column:auto; } .filter-row .field-btn .btn{ width:auto; min-width:120px; } }
.card-h h2 .sub{ font-size:var(--fs-sm); color:var(--muted); font-weight:600; }
.tbl-sum td{ font-size:var(--fs-lg); font-weight:700; }
.tbl tfoot th{ background:var(--gold-wash); color:var(--ink); border-top:1px solid var(--line); }
.tbl .tag{ min-height:22px; font-size:12px; }
.pager{ display:flex; justify-content:center; margin-top:var(--s4); }
.pager .pagination, .pager ul{ display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
.hk .pager a, .hk .pager strong, .hk .pager span{ display:inline-flex; align-items:center; justify-content:center; min-width:40px; min-height:40px; padding:0 10px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--surface); color:var(--ink); font-weight:600; }
.hk .pager strong, .hk .pager .active a{ background:var(--ink); border-color:var(--ink); color:var(--gold-lt); }
.app-box{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s5); margin-top:var(--s4); }
.app-box img{ width:200px; height:200px; border:1px solid var(--line-2); border-radius:var(--r); padding:8px; background:#fff; }
.app-box .btn{ margin-top:var(--s3); }

/* 格線子項目預設 min-width:auto,裡面的表格(min-width 560)會把欄位撐破視窗;一律歸零讓 .tbl-wrap 自己捲 */
.cards, .cards > *, .card{ min-width:0; }
.tbl-wrap{ max-width:100%; }
.filter-row > *{ min-width:0; }
/* 儲值主項目在手機用 flex 填滿,最後一列不留落單空格 */
@media (max-width:767px){ .pay-main{ display:flex; flex-wrap:wrap; } .pay-tile{ flex:1 1 calc(33.333% - var(--s3)); min-width:100px; } }

/* -------------------------------------------------------------- 優惠活動 / 客服 / 註冊 */
.wrap-narrow{ max-width:calc(640px + var(--gutter)*2); }
.act-list{ display:grid; grid-template-columns:1fr; gap:var(--s4); margin-top:var(--s4); }
@media (min-width:768px){ .act-list{ gap:var(--s5); margin-top:var(--s5); } }
.act{ background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r); box-shadow:var(--shadow-sm); overflow:hidden; }
.act summary{ list-style:none; cursor:pointer; }
.act summary::-webkit-details-marker{ display:none; }
.act .pic{ aspect-ratio:16/5; background:var(--dark-2); }
.act .pic img{ width:100%; height:100%; object-fit:cover; }
.act-h{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3); padding:12px 14px; }
@media (min-width:768px){ .act-h{ padding:14px 20px; } }
.act-h h2{ font-size:var(--fs-lg); }
@media (min-width:768px){ .act-h h2{ font-size:20px; } }
.act-toggle{ flex:0 0 auto; display:inline-flex; align-items:center; gap:4px; min-height:36px; padding:0 12px; border-radius:999px; background:var(--gold-wash); color:var(--gold-dk); font-size:var(--fs-sm); font-weight:700; }
.act-toggle .chev{ transform:rotate(-90deg); transition:transform .2s; }
.act[open] .act-toggle .chev{ transform:rotate(90deg); }
.act .when-open{ display:none; } .act[open] .when-open{ display:inline; } .act[open] .when-closed{ display:none; }
.act-body{ padding:0 14px 16px; border-top:1px solid var(--line-2); }
@media (min-width:768px){ .act-body{ padding:0 20px 20px; } }
.rtf{ font-size:var(--fs); line-height:1.7; color:var(--ink-2); }
.rtf p, .rtf ul, .rtf ol, .rtf table{ margin-top:var(--s3); }
.rtf ul{ padding-left:20px; list-style:disc; } .rtf ol{ padding-left:20px; list-style:decimal; }
.rtf img{ border-radius:var(--r-sm); }
.rtf table{ width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
.rtf td, .rtf th{ border:1px solid var(--line-2); padding:8px 10px; }
.rtf h1,.rtf h2,.rtf h3,.rtf h4{ font-size:var(--fs-lg); margin-top:var(--s4); }
.rtf strong, .rtf b{ color:var(--ink); }
.rtf font{ color:inherit !important; font-size:inherit !important; }  /* 後台編輯器塞的 <font> 不准把對比拉低 */
.act-actions{ margin-top:var(--s4); display:flex; justify-content:center; }
.act-actions .btn{ min-width:200px; min-height:48px; }

.cs-grid{ display:grid; grid-template-columns:1fr; gap:var(--s4); margin-top:var(--s4); }
@media (min-width:768px){ .cs-grid{ grid-template-columns:repeat(3,1fr); gap:var(--s5); margin-top:var(--s5); } }
.cs-card{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:var(--s3); }
.cs-card img{ width:180px; height:180px; border:1px solid var(--line-2); border-radius:var(--r); padding:8px; background:#fff; }
@media (min-width:768px){ .cs-card img{ width:200px; height:200px; } }
.cs-card h2{ font-size:20px; }
.cs-card .btn{ min-width:180px; }

.check{ display:flex; align-items:flex-start; gap:10px; margin-top:var(--s4); font-size:var(--fs-sm); color:var(--ink-2); cursor:pointer; }
.check input{ width:22px; height:22px; margin:0; flex:0 0 auto; accent-color:var(--gold); }
.invalid-feedback{ display:none; margin-top:6px; font-size:var(--fs-sm); color:var(--danger); font-weight:600; }
.show-errors .input:invalid{ border-color:var(--danger); }
.show-errors .input:invalid ~ .invalid-feedback{ display:block; }
.show-errors .field-row .input:invalid ~ .vcode-img ~ .invalid-feedback{ display:block; }

/* -------------------------------------------------------------- 會員中心(照 dg66.net 定案版型) */
.stack{ display:grid; grid-template-columns:1fr; gap:var(--s4); max-width:880px; margin:var(--s4) auto 0; }
@media (min-width:768px){ .stack{ gap:var(--s5); margin-top:var(--s5); } }

/* 個人資訊面板 */
.pf-panel{ display:grid; grid-template-columns:1fr; gap:var(--s4); }
.pf-id{ display:flex; align-items:center; gap:var(--s3); }
.pf-id-text b{ display:block; font-size:var(--fs-lg); }
.pf-id-text span{ display:block; color:var(--muted); font-size:var(--fs-sm); }
.pf-meta{ display:flex; gap:var(--s3); }
.pf-meta > div{ flex:1 1 0; padding:10px 14px; border-radius:var(--r-sm); background:var(--bg); border:1px solid var(--line-2); }
.pf-meta b{ display:block; font-size:var(--fs); font-variant-numeric:tabular-nums; }
.pf-meta span{ display:block; font-size:13px; color:var(--muted); }
.pf-panel .bind-row{ margin-top:0; }
.pf-balance{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3); flex-wrap:wrap;
  padding:var(--s3) var(--s4); border-radius:var(--r-sm); background:var(--gold-wash);
}
.pf-bal-num span{ display:block; font-size:13px; color:var(--gold-dk); font-weight:600; }
.pf-bal-num b{ font-size:var(--fs-h); font-variant-numeric:tabular-nums; }
.pf-actions{ display:flex; gap:var(--s2); }
.pf-actions .btn{ min-height:44px; }
@media (min-width:768px){
  .pf-panel{ grid-template-columns:auto 1fr; align-items:center; }
  .pf-meta{ justify-content:flex-end; }
  .pf-meta > div{ flex:0 1 160px; }
  .pf-panel .bind-row{ grid-template-columns:auto auto; justify-content:start; }
  .pf-balance{ grid-column:1 / -1; }
}

/* 摘要列(已完成/未設定) */
.sum{ margin-top:var(--s2); }
.sum-row{ display:flex; align-items:center; gap:var(--s3); padding:12px 0; border-bottom:1px solid var(--line-2); }
.sum-row:last-child{ border-bottom:0; }
.sum-row .k{ flex:0 0 96px; font-size:var(--fs-sm); color:var(--muted); font-weight:600; }
@media (min-width:768px){ .sum-row .k{ flex-basis:120px; } }
.sum-row .v{ flex:1 1 auto; min-width:0; font-size:var(--fs); word-break:break-all; }
.sum-row.unset .v{ color:var(--muted); font-size:var(--fs-sm); }
.sum-done{ flex:0 0 auto; display:inline-flex; align-items:center; gap:4px; color:var(--ok); font-size:var(--fs-sm); font-weight:700; white-space:nowrap; }
.sum-done .ico{ width:16px; height:16px; }
.opt-toggle{
  flex:0 0 auto; min-height:36px; padding:0 14px; border-radius:999px; cursor:pointer;
  border:1px solid var(--gold); background:var(--surface); color:var(--gold-dk); font-size:var(--fs-sm); font-weight:700;
}
.opt-toggle:hover{ background:var(--gold-wash); }
.opt-form{ padding-top:var(--s3); }

/* 證件上傳列(選擇檔案 + 檔名) */
.up-row{ display:grid; grid-template-columns:1fr; gap:8px; padding:var(--s3) 0; border-bottom:1px solid var(--line-2); }
.up-row:last-of-type{ border-bottom:0; }
.up-info b{ font-size:var(--fs-sm); font-weight:700; color:var(--ink-2); }
.up-ctl{ display:flex; align-items:center; gap:var(--s2); cursor:pointer; }
.up-ctl input{ position:absolute; width:1px; height:1px; opacity:0; }
.up-ctl .pick{
  flex:0 0 auto; display:inline-flex; align-items:center; min-height:40px; padding:0 16px; border-radius:999px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink-2); font-size:var(--fs-sm); font-weight:700;
}
.up-ctl:hover .pick{ border-color:var(--gold); color:var(--gold-dk); }
.up-ctl .fname{ flex:1 1 auto; min-width:0; font-size:var(--fs-sm); color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.up-ctl.has-file .pick{ background:var(--ok-wash); border-color:transparent; color:var(--ok); }
.up-ctl.has-file .fname{ color:var(--ink); }
@media (min-width:768px){ .up-row{ grid-template-columns:minmax(240px,1fr) minmax(0,1.2fr); align-items:center; gap:var(--s3); } }