@charset "utf-8";
/* ==========================================================================
   ab2828 /action/ 操作介面樣式
   - 色系、字級、按鈕、圓角沿用 ab2828 WordPress 首頁；版面各走各的
   - 這支頁面不載入 style.css，樣式全部由這裡出，要還原就把 view 換回舊的 head
   - 類別一律 .ab- 前綴
   ========================================================================== */

:root{
  /* 色票：取自 WP 首頁實測值 */
  --ab-ground:#faf8f3;
  --ab-surface:#ffffff;
  --ab-surface-2:#f3f0e7;
  --ab-ink:#16201b;
  --ab-muted:#5e6b62;
  --ab-line:#e4decf;

  --ab-green:#0e4d33;
  --ab-green-d:#0a3a26;
  --ab-green-pale:#eaf3ed;

  --ab-gold:#a07e14;
  --ab-gold-d:#8a6400;
  --ab-gold-soft:rgba(201,162,39,.16);

  --ab-red:#b3232b;
  --ab-red-d:#8f1b22;

  /* 間距尺度：本站自己一套，區塊只設上間距 */
  --sp-1:6px;
  --sp-2:10px;
  --sp-3:16px;
  --sp-4:24px;
  --sp-5:36px;
  --sp-6:56px;

  /* 版面 */
  --r-btn:6px;
  --r-card:10px;
  --r-pill:999px;
  --shell:1160px;
  --gutter:20px;          /* 手機左右留白，不貼邊 */
  --head-h:58px;
  --bnav-h:64px;
}

/* --------------------------------------------------------------------------
   基礎
   -------------------------------------------------------------------------- */
html{-webkit-text-size-adjust:100%;}

body{
  margin:0;
  background:var(--ab-ground);
  color:var(--ab-ink);
  font-family:"PingFang TC","Noto Sans TC","Microsoft JhengHei","Open Sans",
              system-ui,-apple-system,sans-serif;
  font-size:16px;
  line-height:1.75;
  padding-top:var(--head-h);
}

img{max-width:100%;}

a{color:var(--ab-green);text-decoration:none;}
a:hover{color:var(--ab-green-d);}

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

.ab-shell{
  width:100%;
  max-width:var(--shell);
  margin:0 auto;
  padding:0 var(--gutter);
}

/* 區塊：底色滿版、內容限寬置中；間距只設上方 */
.ab-band{
  width:100%;
  margin-top:var(--sp-5);
}
.ab-band--first{margin-top:var(--sp-3);}
.ab-band--flush{margin-top:0;}          /* 滿版底色帶要貼著頁首 */
.ab-band--tint{background:var(--ab-surface-2);padding:var(--sp-5) 0;}
.ab-band--last{padding-bottom:var(--sp-6);}

/* --------------------------------------------------------------------------
   文字層級：一般文字 16、標題 24
   -------------------------------------------------------------------------- */
.ab-h1,
.ab-h2{
  margin:0;
  font-size:24px;
  font-weight:700;
  line-height:1.4;
  color:var(--ab-ink);
  letter-spacing:.01em;
}

.ab-eyebrow{
  margin:0 0 var(--sp-1);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;
  font-weight:600;
  letter-spacing:.18em;
  /* 用深金：#A07E14 在米白底只有 3.6:1，12px 的字不夠 */
  color:var(--ab-gold-d);
  text-transform:uppercase;
}

.ab-sub{
  margin:var(--sp-1) 0 0;
  font-size:16px;
  color:var(--ab-muted);
}

.ab-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--sp-3);
  margin-bottom:var(--sp-3);
}
.ab-head__more{
  flex:0 0 auto;
  font-size:16px;
  font-weight:600;
  color:var(--ab-gold-d);
  padding:4px 0;
}
.ab-head__more:hover{color:var(--ab-gold);text-decoration:underline;}

/* --------------------------------------------------------------------------
   按鈕：要成對就同一行左右兩顆
   -------------------------------------------------------------------------- */
.ab-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:48px;
  padding:12px 22px;
  border:1px solid transparent;
  border-radius:var(--r-btn);
  font-size:16px;
  font-weight:700;
  line-height:1.2;
  text-align:center;
  cursor:pointer;
  transition:background-color .18s,border-color .18s,color .18s;
}
.ab-btn--primary{background:var(--ab-red);color:#fff6f0;}
.ab-btn--primary:hover{background:var(--ab-red-d);color:#fff6f0;}
.ab-btn--green{background:var(--ab-green);color:var(--ab-green-pale);}
.ab-btn--green:hover{background:var(--ab-green-d);color:var(--ab-green-pale);}
.ab-btn--ghost{
  background:var(--ab-surface);
  border-color:var(--ab-line);
  color:var(--ab-green);
}
.ab-btn--ghost:hover{border-color:var(--ab-green);color:var(--ab-green-d);}
.ab-btn--gold{background:var(--ab-gold-d);color:#fff;}
.ab-btn--gold:hover{background:var(--ab-gold);color:#fff;}

/* 成對按鈕：一行兩顆，兩邊等寬 */
.ab-btnpair{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--sp-2);
}
.ab-btnpair .ab-btn{width:100%;}

/* --------------------------------------------------------------------------
   頁首
   -------------------------------------------------------------------------- */
.ab-header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:1030;
  height:var(--head-h);
  background:var(--ab-surface);
  border-bottom:1px solid var(--ab-line);
}
.ab-header__in{
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-3);
}
.ab-logo{display:flex;align-items:center;flex:0 0 auto;}
.ab-logo img{display:block;width:130px;height:41px;object-fit:contain;}

.ab-nav{display:none;}   /* 手機不出現，導覽交給底部固定選單 */

.ab-header__act{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  flex:0 0 auto;
}
.ab-header__act .ab-btn{
  min-height:44px;
  padding:6px 16px;
  font-size:15px;
}
.ab-who{
  display:inline-flex;
  align-items:center;
  gap:6px;
  max-width:36vw;
  padding:6px 12px;
  border:1px solid var(--ab-line);
  border-radius:var(--r-pill);
  background:var(--ab-surface-2);
  color:var(--ab-ink);
  font-size:15px;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ab-who i{color:var(--ab-gold);}
.ab-who__num{font-variant-numeric:tabular-nums;}

/* --------------------------------------------------------------------------
   公告跑馬燈
   -------------------------------------------------------------------------- */
.ab-notice{
  width:100%;
  background:var(--ab-green);
  color:var(--ab-green-pale);
  overflow:hidden;
}
/* 整條是一顆按鈕，點了看全部公告 */
.ab-notice__in{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  height:38px;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
}
.ab-notice__more{
  flex:0 0 auto;
  font-size:16px;
  line-height:1;
  color:#b6cfc0;
}
.ab-notice__in:hover .ab-notice__more{color:#f0d67a;}
.ab-notice__tag{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  font-weight:700;
  letter-spacing:.06em;
  color:#f0d67a;
}
.ab-notice__tag i{font-size:16px;line-height:1;}
/* 一次一則、垂直輪播。不做橫向跑馬燈：窄螢幕會把字切一半，
   而且要靠捲動才看得完。這裡任何一層都不開捲軸。 */
.ab-notice__track{
  display:block;
  flex:1 1 auto;
  min-width:0;
  height:38px;
  overflow:hidden;
}
.ab-notice__list{
  display:block;
  margin:0;
  padding:0;
  list-style:none;
  will-change:transform;
}
.ab-notice__item{
  display:block;
  height:38px;
  line-height:38px;
  font-size:16px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.ab-notice:hover .ab-notice__list{animation-play-state:paused;}

/* 使用者關掉動畫時就停在第一則，不要冒出捲軸 */
@media (prefers-reduced-motion: reduce){
  .ab-notice__list{animation:none !important;transform:none !important;}
}

/* --------------------------------------------------------------------------
   Banner：內縮不貼邊，維持原比例不裁不拉
   -------------------------------------------------------------------------- */
.ab-banner{
  position:relative;
  border-radius:var(--r-card);
  overflow:hidden;
  border:1px solid var(--ab-line);
  background:var(--ab-surface);
}
/* main.js 的 Swiper 設 slidesPerView:'auto'，沒給寬度會塌掉 */
.ab-banner .swiper-slide{width:100%;flex-shrink:0;}
.ab-banner .swiper-slide img{
  display:block;
  width:100%;
  height:auto;
}

/* 接在區塊內部、需要跟上面元件拉開的距離 */
.ab-gap{margin-top:var(--sp-3);}
.ab-gap-lg{margin-top:var(--sp-6);}
/* 圓點壓在圖上，不要在下面多開一條白帶 */
.ab-banner .swiper-pagination{
  position:absolute;
  left:0;right:0;bottom:6px;
  z-index:2;
  line-height:1;
}
.ab-banner .swiper-pagination-bullet{
  width:7px;height:7px;
  background:#fff;
  opacity:.55;
  margin:0 3px;
  box-shadow:0 0 0 1px rgba(22,32,27,.25);
}
.ab-banner .swiper-pagination-bullet-active{background:#f0d67a;opacity:1;}

/* --------------------------------------------------------------------------
   快速功能格
   -------------------------------------------------------------------------- */
.ab-grid{
  display:grid;
  gap:12px;
  margin:0;
  padding:0;
  list-style:none;
}
.ab-grid--3{grid-template-columns:repeat(3,1fr);}

.ab-tile{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:88px;
  padding:var(--sp-2) 4px;
  background:var(--ab-surface);
  border:1px solid var(--ab-line);
  border-radius:var(--r-card);
  color:var(--ab-ink);
  font-size:16px;
  font-weight:600;
  line-height:1.3;
  text-align:center;
  transition:border-color .18s,transform .18s;
}
.ab-tile:hover{color:var(--ab-ink);border-color:var(--ab-gold);transform:translateY(-2px);}
.ab-tile__ic{
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:10px;
  background:var(--ab-gold-soft);
  color:var(--ab-gold-d);
  font-size:20px;
  line-height:1;
}

/* --------------------------------------------------------------------------
   遊戲卡片
   -------------------------------------------------------------------------- */
.ab-games{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  margin:0;
  padding:0;
  list-style:none;
}

.ab-game{
  display:block;
  overflow:hidden;
  background:var(--ab-surface);
  border:1px solid var(--ab-line);
  border-radius:var(--r-card);
  color:var(--ab-ink);
  transition:border-color .18s,transform .18s,box-shadow .18s;
}
.ab-game:hover{
  color:var(--ab-ink);
  border-color:var(--ab-gold);
  transform:translateY(-3px);
  box-shadow:0 12px 24px -18px rgba(22,32,27,.5);
}

/* height:auto 必要：img 的 height 屬性會壓過 aspect-ratio */
.ab-game__pic{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:4 / 3;
  object-fit:cover;
  object-position:center 6%;   /* 去背人像的頭在上緣 */
  background:radial-gradient(112% 78% at 50% 6%,
              #ffffff 0%, var(--ab-surface-2) 62%, #e9e2d0 100%);
}

.ab-game__cap{
  display:block;
  padding:10px 12px 12px;
  border-top:1px solid var(--ab-line);
}
.ab-game__name{display:block;font-size:16px;font-weight:700;line-height:1.35;}
.ab-game__sub{
  display:block;
  margin-top:1px;
  font-size:13px;
  letter-spacing:.03em;
  color:var(--ab-muted);
}

/* --------------------------------------------------------------------------
   會員頁
   -------------------------------------------------------------------------- */
.ab-card{
  background:var(--ab-surface);
  border:1px solid var(--ab-line);
  border-radius:var(--r-card);
  padding:var(--sp-3);
}

.ab-acct{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-3);
  background:var(--ab-green);
  border:0;
  color:var(--ab-green-pale);
  padding:var(--sp-4) var(--sp-3);
}
.ab-acct__id{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.ab-acct__name{
  font-size:24px;
  font-weight:700;
  line-height:1.3;
  color:#fff;
  word-break:break-all;
}
.ab-acct__meta{font-size:13px;color:#b6cfc0;}
.ab-acct__bal{
  flex:1 0 100%;
  min-width:0;
  padding-top:var(--sp-2);
  border-top:1px solid rgba(255,255,255,.16);
}
.ab-acct__bal dt{font-size:13px;color:#b6cfc0;margin:0;}
.ab-acct__bal dd{
  margin:0;
  font-size:24px;
  font-weight:700;
  line-height:1.3;
  color:#f0d67a;
  font-variant-numeric:tabular-nums;
}

/* 會員中心版面：手機單欄；768 以上左邊身分與金流、右邊功能，
   兩欄高度接近，右側不會空一大片 */
.ab-mem{display:grid;gap:var(--sp-3);}
.ab-mem__side{display:flex;flex-direction:column;gap:var(--sp-3);}
.ab-mem__main{min-width:0;}

.ab-list{
  margin:0;
  padding:0;
  list-style:none;
  border:1px solid var(--ab-line);
  border-radius:var(--r-card);
  overflow:hidden;
  background:var(--ab-surface);
}
.ab-list li + li{border-top:1px solid var(--ab-line);}
.ab-list a{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  min-height:56px;
  padding:12px var(--sp-3);
  color:var(--ab-ink);
  font-size:16px;
  font-weight:600;
}
.ab-list a:hover{background:var(--ab-surface-2);color:var(--ab-ink);}
.ab-list__ic{
  flex:0 0 auto;
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  background:var(--ab-gold-soft);
  color:var(--ab-gold-d);
  font-size:18px;
}
.ab-list__tx{flex:1 1 auto;min-width:0;}
.ab-list__note{
  display:block;
  font-size:13px;
  font-weight:400;
  color:var(--ab-muted);
  line-height:1.5;
}
.ab-list__go{flex:0 0 auto;color:var(--ab-muted);font-size:18px;}

/* --------------------------------------------------------------------------
   表單頁（登入、註冊…）
   -------------------------------------------------------------------------- */
.ab-form{width:100%;max-width:520px;margin:0 auto;}

.ab-form__hint{
  margin:0 0 var(--sp-2);
  font-size:13px;
  font-weight:600;
  color:var(--ab-muted);
}

.ab-field__note{
  margin:4px 0 0;
  font-size:13px;
  line-height:1.6;
  color:var(--ab-muted);
}

.ab-btn--sso{gap:8px;font-weight:600;}
.ab-btn--sso img{width:20px;height:20px;object-fit:contain;}

/* 站上那支 LINE 圖示是白色的，白底按鈕上會整個看不見，
   所以墊一個 LINE 的品牌綠圓底；意思由旁邊的文字負責，圖示只是輔助 */
.ab-sso__ic{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:24px;
  height:24px;
  border-radius:50%;
  background:#06c755;
}
.ab-sso__ic img{width:16px;height:16px;}

.ab-btn.is-disabled{
  background:var(--ab-surface-2);
  border-color:var(--ab-line);
  color:var(--ab-muted);
  cursor:default;
  pointer-events:none;
}

.ab-check{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:var(--sp-2) 0 0;
  font-size:16px;
  line-height:1.6;
  cursor:pointer;
}
.ab-check input{
  flex:0 0 auto;
  width:20px;
  height:20px;
  margin:5px 0 0;
  accent-color:var(--ab-green);
}
.ab-check a{text-decoration:underline;}

.ab-alert--ok{background:#e7f2ec;color:var(--ab-green-d);}

.ab-note{margin:0;font-size:15px;line-height:1.8;color:var(--ab-muted);}

/* 提示卡：說明與警語不要散在卡片外面當一段灰字，包成一張看得出用途的小卡。
   一般說明用金色，不可逆或會擋住流程的用紅色。 */
.ab-tip{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:start;
  gap:10px;
  padding:12px 14px;
  border:1px solid rgba(201,162,39,.42);
  border-radius:var(--r-card);
  background:var(--ab-gold-soft);
  color:var(--ab-ink);
  font-size:15px;
  line-height:1.75;
}
.ab-tip__ic{
  grid-column:1;
  grid-row:1;
  margin-top:2px;
  font-size:17px;
  line-height:1.4;
  color:var(--ab-gold-d);
}
.ab-tip p{grid-column:2;margin:0;}
.ab-tip p + p{margin-top:6px;}
.ab-tip a{text-decoration:underline;}

.ab-tip--warn{
  border-color:rgba(179,35,43,.35);
  background:#fbeaea;
}
.ab-tip--warn .ab-tip__ic{color:var(--ab-red-d);}


/* 名稱／數值對照（儲值代碼那類） */
.ab-kv{margin:0;display:grid;gap:1px;background:var(--ab-line);
  border:1px solid var(--ab-line);border-radius:var(--r-card);overflow:hidden;}
.ab-kv dt{background:var(--ab-surface-2);padding:10px var(--sp-3);
  font-size:13px;font-weight:600;color:var(--ab-muted);}
.ab-kv dd{background:var(--ab-surface);margin:0;padding:10px var(--sp-3);font-size:16px;}
.ab-kv__code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:20px;font-weight:700;letter-spacing:.06em;word-break:break-all;}
.ab-kv__amount{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;}

/* 完成狀態 */
.ab-done{text-align:center;}
.ab-done__ic{display:inline-flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:50%;background:#e7f2ec;
  color:var(--ab-green);font-size:30px;margin-bottom:var(--sp-2);}
.ab-done p{margin:0 0 var(--sp-3);font-size:16px;color:var(--ab-muted);}

/* 卡片標題 */
.ab-card__title{margin:0 0 var(--sp-2);font-size:18px;}

/* 已經設定好、不能再改的欄位 */
.ab-readonly{
  margin:0;
  min-height:46px;
  padding:11px 12px;
  border:1px solid var(--ab-line);
  border-radius:var(--r-btn);
  background:var(--ab-surface-2);
  color:var(--ab-ink);
  font-size:16px;
  word-break:break-all;
}
.ab-readonly--code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:14px;
}

.ab-field select{
  width:100%;
  min-height:46px;
  padding:10px 12px;
  border:1px solid var(--ab-line);
  border-radius:var(--r-btn);
  background:var(--ab-surface);
  color:var(--ab-ink);
  font-size:16px;
  font-family:inherit;
}
.ab-field select:focus{border-color:var(--ab-gold);outline:0;}
.ab-field input[type="file"]{
  width:100%;
  padding:10px 12px;
  border:1px dashed var(--ab-line);
  border-radius:var(--r-btn);
  background:var(--ab-surface-2);
  font-size:15px;
}
.ab-field label a{font-weight:400;text-decoration:underline;margin-left:6px;}

.ab-zip{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2);}
.ab-zip input[data-role="zipcode"]{
  grid-column:1 / -1;
  min-height:46px;
  padding:10px 12px;
  border:1px solid var(--ab-line);
  border-radius:var(--r-btn);
  background:var(--ab-surface);
  font-size:16px;
}

.ab-tips{
  margin:var(--sp-2) 0 0;
  padding-left:1.2em;
  color:var(--ab-muted);
  font-size:15px;
  line-height:1.8;
}

/* 法遵長文：條款、聲明這類 */
.ab-legal{font-size:16px;line-height:1.9;}
.ab-legal h3{
  margin:var(--sp-4) 0 var(--sp-2);
  font-size:18px;
  font-weight:700;
  padding-left:12px;
  border-left:3px solid var(--ab-gold-d);
}
.ab-legal h3:first-child{margin-top:0;}
.ab-legal ol,
.ab-legal ul{margin:0;padding-left:1.5em;}
.ab-legal li{margin-bottom:var(--sp-2);}
.ab-legal li:last-child{margin-bottom:0;}
.ab-legal b{font-weight:700;}

/* 找不到頁面 */
.ab-404{padding:var(--sp-6) var(--sp-3);}
.ab-404__code{
  display:block;
  font-size:56px;
  font-weight:800;
  line-height:1;
  letter-spacing:.04em;
  color:var(--ab-gold-d);
  margin-bottom:var(--sp-2);
  font-variant-numeric:tabular-nums;
}
.ab-404 .ab-h1{margin-bottom:var(--sp-1);}

/* 公告視窗裡的清單 */
.ab-newslist{
  margin:0;
  padding-left:1.4em;
  font-size:16px;
  line-height:1.9;
}
.ab-newslist li{margin-bottom:var(--sp-3);}
.ab-newslist li:last-child{margin-bottom:0;}

.ab-empty{text-align:center;}
.ab-empty p{margin:0 0 var(--sp-3);color:var(--ab-muted);}

/* --------------------------------------------------------------------------
   會員內頁：帳號列、篩選、表格
   -------------------------------------------------------------------------- */

/* 頁面標題那一列，右邊放返回 */
.ab-back{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:16px;
  font-weight:600;
  color:var(--ab-gold-d);
  padding:6px 0;
}
.ab-back:hover{color:var(--ab-gold);}

/* 做事前先看得到帳號與餘額 */
.ab-memberbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-2) var(--sp-3);
  padding:var(--sp-2) var(--sp-3);
  background:var(--ab-green);
  border-radius:var(--r-card);
  color:var(--ab-green-pale);
}
.ab-memberbar__id{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:16px;
  font-weight:600;
  color:#fff;
  min-width:0;
}
.ab-memberbar__id i{color:#f0d67a;}
.ab-memberbar__bal{
  display:inline-flex;
  align-items:baseline;
  gap:8px;
  font-size:13px;
  color:#b6cfc0;
}
.ab-memberbar__bal b{
  font-size:20px;
  font-weight:700;
  color:#f0d67a;
  font-variant-numeric:tabular-nums;
}

/* 日期區間篩選 */
.ab-filter{display:flex;flex-direction:column;gap:var(--sp-2);}
/* minmax(0,1fr) 是必要的：date 欄位的內建最小寬度是 167px，
   用 1fr 會被那個最小值撐開，整頁跑出橫向捲動 */
.ab-filter__dates{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:var(--sp-2);
}
.ab-filter__dates span{color:var(--ab-muted);}
.ab-filter input[type="date"]{
  width:100%;
  min-width:0;
  min-height:46px;
  padding:8px 10px;
  border:1px solid var(--ab-line);
  border-radius:var(--r-btn);
  background:var(--ab-surface);
  color:var(--ab-ink);
  font-size:16px;
  font-family:inherit;
}
.ab-filter input[type="date"]:focus{border-color:var(--ab-gold);outline:0;}

.ab-quickdates{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--sp-1);
}
.ab-quickdates button{
  min-height:40px;
  padding:6px 4px;
  border:1px solid var(--ab-line);
  border-radius:var(--r-pill);
  background:var(--ab-surface);
  color:var(--ab-ink);
  font:inherit;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
}
.ab-quickdates button:hover{border-color:var(--ab-gold);color:var(--ab-gold-d);}

/* 表格：電腦是表格，640 以下自動變成一列一張卡 */
/* 遊戲紀錄那頁的篩選鈕與日期欄 */
.ab-chip{
  min-height:40px;
  padding:6px 14px;
  border:1px solid var(--ab-line);
  border-radius:var(--r-pill);
  background:var(--ab-surface);
  color:var(--ab-ink);
  font:inherit;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
}
.ab-chip:hover{border-color:var(--ab-gold);color:var(--ab-gold-d);}
.ab-quickdates--wide{
  display:flex;
  flex-wrap:wrap;
  gap:var(--sp-1);
  grid-template-columns:none;
  margin-top:var(--sp-2);
}
.ab-dateinput{
  min-width:0;
  min-height:46px;
  padding:10px 12px;
  border:1px solid var(--ab-line);
  border-radius:var(--r-btn);
  background:var(--ab-surface);
  color:var(--ab-ink);
  font-size:16px;
  font-family:inherit;
}
.ab-dateinput:focus{border-color:var(--ab-gold);outline:0;}
.input-daterange{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap;}
.input-daterange .input-group-addon{color:var(--ab-muted);}

.ab-tablewrap{
  overflow-x:auto;
  border:1px solid var(--ab-line);
  border-radius:var(--r-card);
  background:var(--ab-surface);
  -webkit-overflow-scrolling:touch;
}
.ab-table{
  width:100%;
  border-collapse:collapse;
  font-size:16px;
}
.ab-table th,
.ab-table td{
  padding:12px 14px;
  text-align:left;
  border-bottom:1px solid var(--ab-line);
  vertical-align:top;
}
.ab-table th{
  font-size:13px;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--ab-muted);
  background:var(--ab-surface-2);
  white-space:nowrap;
}
.ab-table tbody tr:last-child td{border-bottom:0;}
.ab-table .num{
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.ab-table small{display:block;font-size:13px;color:var(--ab-muted);line-height:1.6;}

/* 狀態標籤：顏色之外也給形狀 */
.ab-state{
  display:inline-block;
  padding:2px 10px;
  border-radius:var(--r-pill);
  font-size:13px;
  font-weight:700;
  white-space:nowrap;
}
.ab-state--ok{background:#e7f2ec;color:var(--ab-green-d);}
.ab-state--wait{background:var(--ab-gold-soft);color:var(--ab-gold-d);}
.ab-state--no{background:#fbeaea;color:var(--ab-red-d);}

.ab-pager{
  margin-top:var(--sp-3);
  display:flex;
  justify-content:center;
  gap:6px;
  flex-wrap:wrap;
}
.ab-pager a,
.ab-pager strong{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:40px;
  min-height:40px;
  padding:0 10px;
  border:1px solid var(--ab-line);
  border-radius:var(--r-btn);
  background:var(--ab-surface);
  color:var(--ab-ink);
  font-size:15px;
  font-weight:600;
}
.ab-pager strong{background:var(--ab-green);border-color:var(--ab-green);color:#fff;}
.ab-pager a:hover{border-color:var(--ab-gold);color:var(--ab-gold-d);}

/* 錢包數字 */
.ab-wallet{
  display:grid;
  gap:var(--sp-2);
}
.ab-wallet__box{
  background:var(--ab-surface-2);
  border-radius:var(--r-card);
  padding:var(--sp-3);
}
.ab-wallet__label{
  display:block;
  font-size:13px;
  color:var(--ab-muted);
  margin-bottom:2px;
}
.ab-wallet__num{
  font-size:24px;
  font-weight:700;
  line-height:1.3;
  font-variant-numeric:tabular-nums;
}
.ab-wallet__num small{font-size:16px;font-weight:600;color:var(--ab-muted);margin-right:4px;}

@media (max-width:639px){
  /* 一列一張卡：欄名從 data-label 出來，樣板只有一份 */
  .ab-tablewrap{border:0;background:transparent;overflow:visible;}
  .ab-table,
  .ab-table tbody,
  .ab-table tr,
  .ab-table td{display:block;width:100%;}
  .ab-table thead{display:none;}
  .ab-table tr{
    background:var(--ab-surface);
    border:1px solid var(--ab-line);
    border-radius:var(--r-card);
    padding:var(--sp-2) var(--sp-3);
    margin-bottom:var(--sp-2);
  }
  .ab-table td{
    display:grid;
    grid-template-columns:5.5em 1fr;
    gap:4px var(--sp-2);
    padding:6px 0;
    border-bottom:0;
  }
  .ab-table td::before{
    content:attr(data-label);
    font-size:13px;
    font-weight:600;
    color:var(--ab-muted);
  }
  .ab-table td:not([data-label]){grid-template-columns:1fr;}
  /* 一格裡若有多個子元素，全部塞進右欄，不要被拆到標籤那一欄 */
  .ab-table td > *{grid-column:2;}
}

@media (min-width:768px){
  .ab-filter{flex-direction:row;align-items:center;gap:var(--sp-3);}
  .ab-filter__dates{flex:1 1 auto;max-width:420px;}
  .ab-quickdates{flex:0 0 auto;grid-template-columns:repeat(4,auto);}
  .ab-quickdates button{padding:6px 14px;}
  .ab-wallet{grid-template-columns:1fr 1fr;}
}

/* --------------------------------------------------------------------------
   優惠列表
   -------------------------------------------------------------------------- */
.ab-promos{display:flex;flex-direction:column;gap:var(--sp-3);}

/* 中等寬度的內容欄：橫幅圖與長文都在這個寬度內比較好讀 */
.ab-mid{width:100%;max-width:860px;margin:0 auto;}

.ab-promo{
  background:var(--ab-surface);
  border:1px solid var(--ab-line);
  border-radius:var(--r-card);
  overflow:hidden;
}

.ab-promo__head{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:var(--sp-2) var(--sp-3);
  width:100%;
  padding:0 0 var(--sp-3);
  border:0;
  background:transparent;
  color:var(--ab-ink);
  font:inherit;
  text-align:left;
  cursor:pointer;
}
/* 優惠圖是 3.37:1 的橫幅，強制別的比例會把左邊的字切掉，一律用原比例 */
.ab-promo__pic{
  grid-column:1 / -1;
  display:block;
  width:100%;
  height:auto;
  background:var(--ab-surface-2);
}
.ab-promo__title{
  padding-left:var(--sp-3);
  font-size:16px;
  font-weight:700;
  line-height:1.5;
}
.ab-promo__caret{
  margin-right:var(--sp-3);
  font-size:20px;
  line-height:1;
  color:var(--ab-gold-d);
  transition:transform .2s;
}
.ab-promo__head[aria-expanded="true"] .ab-promo__caret{transform:rotate(180deg);}

.ab-promo__body{border-top:1px solid var(--ab-line);}
.ab-promo__word{
  padding:var(--sp-3);
  font-size:16px;
  line-height:1.8;
  max-width:660px;   /* 中文一行別超過 40 字左右 */
}
.ab-promo__word img{height:auto;}
.ab-promo__act{
  padding:0 var(--sp-3) var(--sp-3);
  display:flex;
  justify-content:flex-end;
}

/* --------------------------------------------------------------------------
   底部固定選單（手機）
   -------------------------------------------------------------------------- */
.ab-bnav{
  position:fixed;
  inset:auto 0 0 0;
  z-index:1035;
  display:grid;
  /* 欄數跟著實際項目數走：登入前五格、登入後六格，不寫死 */
  grid-auto-flow:column;
  grid-auto-columns:1fr;
  background:var(--ab-surface);
  border-top:1px solid var(--ab-line);
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -6px 18px -14px rgba(22,32,27,.45);
}
.ab-bnav__link{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-height:var(--bnav-h);
  padding:9px 2px 8px;
  color:var(--ab-muted);
  font-size:12px;
  font-weight:600;
  line-height:1.2;
}
/* 圖示給固定的方框：各個字符寬度不一樣，不固定會看起來大小不齊 */
.ab-bnav__link i{
  display:flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  font-size:23px;
  line-height:1;
}
.ab-bnav__link:hover{color:var(--ab-green);}
.ab-bnav__link--key{color:var(--ab-red);}
.ab-bnav__link--key i{color:var(--ab-red);}

/* 手機底部要留出固定選單的位置 */
.ab-tail{height:calc(var(--bnav-h) + 12px + env(safe-area-inset-bottom));}

/* --------------------------------------------------------------------------
   彈出視窗：只佔螢幕七成半
   -------------------------------------------------------------------------- */
.modal-dialog{
  width:min(75vw,460px);
  max-width:none;
  margin:auto;
  min-height:100%;
  display:flex;
  align-items:center;
}
.modal-content{
  width:100%;
  max-height:75vh;
  border:0;
  border-radius:var(--r-card);
  background:var(--ab-surface);
  color:var(--ab-ink);
  box-shadow:0 30px 60px -30px rgba(22,32,27,.6);
  overflow:hidden;
}
.modal-header{
  align-items:center;
  padding:14px var(--sp-3);
  background:var(--ab-green);
  border-bottom:0;
}
.modal-title{
  margin:0;
  font-size:24px;
  font-weight:700;
  color:#fff;
}
.modal-header .close{
  margin-left:auto;
  width:40px;
  height:40px;
  border:0;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.14);
  color:#fff;
  font-size:22px;
  line-height:1;
  cursor:pointer;
}
.modal-header .close:hover{background:rgba(255,255,255,.26);}
.modal-body{
  padding:var(--sp-3);
  overflow-y:auto;
}
.modal-footer{
  padding:var(--sp-2) var(--sp-3) var(--sp-3);
  border-top:0;
  gap:var(--sp-2);
}

.ab-field{margin-bottom:var(--sp-3);}
.ab-field label{
  display:block;
  margin-bottom:4px;
  font-size:13px;
  font-weight:600;
  color:var(--ab-muted);
}
.ab-field input{
  width:100%;
  min-height:46px;
  padding:10px 12px;
  border:1px solid var(--ab-line);
  border-radius:var(--r-btn);
  background:var(--ab-surface);
  color:var(--ab-ink);
  font-size:16px;
}
.ab-field input:focus{border-color:var(--ab-gold);outline:0;}
.ab-code{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
}
.ab-code input{flex:1 1 auto;}
.ab-code img{
  flex:0 0 auto;
  height:46px;
  width:auto;
  border:1px solid var(--ab-line);
  border-radius:var(--r-btn);
  cursor:pointer;
}
.ab-alert{
  margin-bottom:var(--sp-2);
  padding:10px 12px;
  border-radius:var(--r-btn);
  background:#fbeaea;
  color:var(--ab-red-d);
  font-size:15px;
}
.ab-modal-link{
  display:block;
  margin-top:var(--sp-2);
  text-align:center;
  font-size:15px;
  color:var(--ab-muted);
}

/* --------------------------------------------------------------------------
   平板 768–1024：最容易跑版的區間
   -------------------------------------------------------------------------- */
@media (min-width:640px){
  .ab-games{grid-template-columns:repeat(4,1fr);gap:var(--sp-3);}
  .ab-grid{gap:var(--sp-3);}
}

@media (min-width:768px){
  :root{--gutter:28px;--head-h:66px;}




  /* 導覽：一律不斷字。空間不夠時先讓導覽自己收，不要把右邊的帳號擠壞 */
  .ab-nav{
    display:flex;
    align-items:center;
    flex-wrap:nowrap;
    gap:18px;
    min-width:0;
    margin:0 auto;
    padding:0;
    overflow:hidden;
    list-style:none;
  }
  .ab-nav li{flex:0 0 auto;}
  .ab-nav a{
    display:block;
    white-space:nowrap;
    color:var(--ab-ink);
    font-size:15px;
    font-weight:600;
    padding:6px 0;
    border-bottom:2px solid transparent;
  }
  .ab-header__in{gap:var(--sp-2);}
  .ab-who{max-width:170px;}
  .ab-nav a:hover,
  .ab-nav a[aria-current="page"]{
    color:var(--ab-green);
    border-bottom-color:var(--ab-gold);
  }

  .ab-band{margin-top:var(--sp-6);}
  /* 修飾詞要寫在 .ab-band 後面，否則同權重被蓋回去 */
  .ab-band--first{margin-top:var(--sp-4);}
  .ab-band--flush{margin-top:0;}
  .ab-tile{min-height:104px;}
  .ab-tile__ic{width:44px;height:44px;font-size:23px;}

  .ab-acct{padding:var(--sp-4);}
  .ab-card{padding:var(--sp-4);}

  .ab-mem{
    grid-template-columns:320px minmax(0,1fr);
    gap:var(--sp-4);
    align-items:start;
  }
  .ab-tile{min-height:116px;}

  .ab-btnpair{max-width:520px;gap:var(--sp-3);}

  .ab-bnav{display:none;}
  .ab-tail{display:none;}
}

@media (min-width:1025px){
  .ab-games{gap:var(--sp-4);}

  .ab-logo img{width:150px;height:48px;}
  .ab-nav{gap:26px;}
  .ab-nav a{font-size:16px;}
  .ab-who{max-width:220px;}
  .ab-header__in{gap:var(--sp-3);}

  .ab-mem{grid-template-columns:360px minmax(0,1fr);}
  .ab-tile{min-height:124px;}
}

/* --------------------------------------------------------------------------
   客服中心
   -------------------------------------------------------------------------- */
.ab-grid--2{grid-template-columns:1fr;}

.ab-cs{margin-top:var(--sp-3);}
.ab-cs__card{
  display:flex;
  align-items:center;
  gap:var(--sp-3);
  min-height:88px;
  padding:var(--sp-3);
  background:var(--ab-surface);
  border:1px solid var(--ab-line);
  border-radius:var(--r-card);
  color:var(--ab-ink);
  transition:border-color .18s,transform .18s,box-shadow .18s;
}
.ab-cs__card:hover{
  color:var(--ab-ink);
  border-color:var(--ab-gold);
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(22,32,27,.07);
}
.ab-cs__ic{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  border-radius:12px;
  font-size:24px;
  line-height:1;
}
.ab-cs__ic--chat{background:var(--ab-green);color:var(--ab-green-pale);}
.ab-cs__ic--line{background:#06c755;}
.ab-cs__ic--line img{width:22px;height:22px;object-fit:contain;}
.ab-cs__body{display:flex;flex-direction:column;gap:4px;min-width:0;}
.ab-cs__t{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  font-size:18px;
  font-weight:700;
  line-height:1.3;
}
.ab-cs__tag{
  padding:2px 8px;
  border-radius:var(--r-pill);
  background:var(--ab-gold-soft);
  color:var(--ab-gold-d);
  font-size:13px;
  font-weight:600;
  letter-spacing:.02em;
}
.ab-cs__d{font-size:15px;line-height:1.7;color:var(--ab-muted);}
.ab-cs__go{margin-left:auto;flex:0 0 auto;font-size:16px;color:var(--ab-muted);}

/* QR 卡：手機不出現（掃自己的螢幕沒有意義），電腦版才是它派上用場的地方 */
.ab-cs__qr{display:none;}


@media (min-width:640px){
  .ab-grid--2{grid-template-columns:repeat(2,1fr);}
}

@media (min-width:768px){
  .ab-cs__qr{
    display:flex;
    align-items:center;
    gap:var(--sp-4);
    max-width:560px;
    margin-top:var(--sp-3);
  }
  .ab-cs__qr img{
    flex:0 0 auto;
    width:150px;
    height:150px;
    border-radius:var(--r-btn);
  }
}

/* --------------------------------------------------------------------------
   遊戲紀錄：廠商切換、統計數字
   -------------------------------------------------------------------------- */
.ab-chips{display:flex;flex-wrap:wrap;gap:var(--sp-1);}
.ab-chips .ab-chip{text-decoration:none;display:inline-flex;align-items:center;}
.ab-chip.is-on{
  border-color:var(--ab-green);
  background:var(--ab-green);
  color:#fff;
}
.ab-chip.is-on:hover{border-color:var(--ab-green);color:#fff;}

/* 標題後面那顆廠商標籤 */
.ab-h1__tag{
  display:inline-block;
  margin-left:10px;
  padding:2px 12px;
  border:1px solid rgba(201,162,39,.45);
  border-radius:var(--r-pill);
  background:var(--ab-gold-soft);
  /* 這顆是貼在頁面底色上，不是白卡片裡，金色要再壓深一點才夠對比 */
  color:#7a5800;
  font-size:15px;
  font-weight:600;
  vertical-align:middle;
}

/* 統計數字：手機兩欄、640 起四欄 */
.ab-stats{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--sp-2);
  margin:0;
}
.ab-stat{
  padding:12px 14px;
  border:1px solid var(--ab-line);
  border-radius:var(--r-card);
  background:var(--ab-surface);
}
.ab-stat dt{
  margin:0 0 2px;
  font-size:13px;
  font-weight:600;
  color:var(--ab-muted);
}
.ab-stat dd{
  margin:0;
  font-size:20px;
  font-weight:700;
  line-height:1.35;
  color:var(--ab-ink);
  font-variant-numeric:tabular-nums;
  word-break:break-all;
}
.ab-stat.is-up dd{color:var(--ab-green);}
.ab-stat.is-down dd{color:var(--ab-red-d);}
.ab-stats--sm .ab-stat dd{font-size:17px;}

/* 六顆快速日期：手機三欄兩列，桌機也維持三欄兩列，不擠成一長條 */
.ab-quickdates--6{grid-template-columns:repeat(3,minmax(0,1fr));}

@media (min-width:640px){
  .ab-stats{grid-template-columns:repeat(4,minmax(0,1fr));}
  .ab-stats--sm{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (min-width:768px){
  .ab-quickdates--6{grid-template-columns:repeat(3,auto);}
}

/* 表格裡的狀態膠囊不要被拉成整列寬——手機的一列一卡是 grid，預設會撐滿 */
.ab-table td .ab-state{justify-self:start;}

/* 桌機的篩選卡：查詢貼右邊，中間不留一大塊空白 */
@media (min-width:768px){
  .ab-filter > .ab-btn{margin-left:auto;}
}

/* 小計三格在手機改成一列一行的清單，避免 2+1 落單 */
@media (max-width:639px){
  .ab-stats--sm{grid-template-columns:1fr;gap:0;border:1px solid var(--ab-line);
                border-radius:var(--r-card);background:var(--ab-surface);}
  .ab-stats--sm .ab-stat{display:flex;align-items:baseline;justify-content:space-between;
                gap:var(--sp-2);border:0;border-bottom:1px solid var(--ab-line);border-radius:0;}
  .ab-stats--sm .ab-stat:last-child{border-bottom:0;}
  .ab-stats--sm .ab-stat dt{margin:0;}
}

/* --------------------------------------------------------------------------
   優惠摘要卡與細則（內容取自官網 /activity/）
   -------------------------------------------------------------------------- */
.ab-po{list-style:none;margin:0;padding:0;}
.ab-po__card{display:flex;flex-direction:column;align-items:flex-start;}
.ab-po__num{
  display:inline-block;
  padding:2px 14px;
  border-radius:var(--r-pill);
  background:var(--ab-green);
  color:#f0d67a;
  font-size:30px;
  font-weight:700;
  line-height:1.35;
  letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}
.ab-po__num small{font-size:17px;font-weight:600;margin-left:2px;}
.ab-po__t{margin:var(--sp-2) 0 0;font-size:20px;line-height:1.5;}
.ab-po__d{margin:6px 0 0;font-size:15px;line-height:1.8;color:var(--ab-muted);}

.ab-po__spec{
  width:100%;
  margin:var(--sp-3) 0 0;
  border-top:1px solid var(--ab-line);
}
.ab-po__spec > div{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--sp-2);
  padding:8px 0;
  border-bottom:1px solid var(--ab-line);
}
.ab-po__spec dt{margin:0;font-size:14px;color:var(--ab-muted);}
.ab-po__spec dd{margin:0;font-size:15px;font-weight:600;color:var(--ab-ink);}

.ab-po__more{
  display:inline-flex;
  align-items:center;
  gap:4px;
  min-height:44px;
  margin-top:var(--sp-2);
  color:var(--ab-gold-d);
  font-size:15px;
  font-weight:600;
}
.ab-po__more:hover{color:var(--ab-green);}
.ab-po__more i{font-size:20px;line-height:1;}

/* 細則區：錨點跳過來時不要被固定頁首壓住 */
.ab-rule{scroll-margin-top:84px;}
.ab-rule__t{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--sp-2);
  margin:0;
  font-size:20px;
  line-height:1.5;
}
.ab-rule__tag{
  padding:2px 12px;
  border:1px solid rgba(201,162,39,.45);
  border-radius:var(--r-pill);
  background:var(--ab-gold-soft);
  color:var(--ab-gold-d);
  font-size:14px;
  font-weight:600;
}
.ab-rule__sub{
  margin:var(--sp-3) 0 var(--sp-1);
  font-size:16px;
  font-weight:700;
  color:var(--ab-green);
}
.ab-rule__list{
  margin:0;
  padding-left:1.6em;
  font-size:16px;
  line-height:1.9;
}
.ab-rule__list li + li{margin-top:6px;}
.ab-rule .ab-note{margin-top:var(--sp-3);}

/* 優惠頁主視覺：原圖 1040×620，這裡裁成扁的，不要把操作頁撐成行銷頁 */
.ab-hero{
  margin:0;
  border-radius:var(--r-card);
  overflow:hidden;
  background:var(--ab-surface-2);
}
.ab-hero img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:2.2 / 1;
  object-fit:cover;
  object-position:center 58%;
}
@media (min-width:768px){
  .ab-hero img{aspect-ratio:3.2 / 1;}
}

/* --------------------------------------------------------------------------
   優惠頁（A 版：橫幅疊字）
   -------------------------------------------------------------------------- */
.va-hero{position:relative;border-radius:var(--r-card);overflow:hidden;background:#0a281b;}
.va-hero img{display:block;width:100%;height:auto;aspect-ratio:1.35/1;object-fit:cover;object-position:70% 58%;}
/* 字壓在照片上，底下一定要有夠深的漸層，不然對比度過不了 */
.va-hero__in{position:absolute;inset:auto 0 0 0;padding:var(--sp-4) var(--sp-3) var(--sp-3);
  background:linear-gradient(to top, rgba(8,32,22,.97) 0%, rgba(8,32,22,.96) 74%, rgba(8,32,22,.62) 90%, rgba(8,32,22,0) 100%);
  color:#fff;}
/* 字塊縮到跟文字一樣寬：整行寬的區塊會壓到漸層已經淡掉的亮處 */
.va-hero__in > *{width:-moz-fit-content;width:fit-content;max-width:100%;}
.va-hero__eye{margin:0 0 6px;font-size:13px;font-weight:600;letter-spacing:.14em;color:#e0eee7;}
.va-hero__t{margin:0;font-size:30px;line-height:1.3;font-weight:700;}
.va-hero__t b{color:#f0d67a;font-size:40px;font-variant-numeric:tabular-nums;}
.va-hero__d{margin:8px 0 0;font-size:15px;line-height:1.7;color:#e3efe9;}

.va-facts{display:grid;grid-template-columns:1fr;gap:1px;margin:var(--sp-3) 0 0;
  border:1px solid var(--ab-line);border-radius:var(--r-card);background:var(--ab-line);overflow:hidden;}
.va-facts > div{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-2);
  padding:12px var(--sp-3);background:var(--ab-surface);}
.va-facts dt{margin:0;font-size:14px;color:var(--ab-muted);}
.va-facts dd{margin:0;font-size:16px;font-weight:700;color:var(--ab-ink);}

.va-rules{display:grid;grid-template-columns:1fr;gap:var(--sp-3);}
.va-rules__t{margin:0 0 var(--sp-2);font-size:18px;color:var(--ab-green);}

@media (min-width:768px){
  .va-hero img{aspect-ratio:2.6/1;object-position:75% 58%;}
  .va-hero__in{inset:0 auto 0 0;display:flex;flex-direction:column;justify-content:center;
    align-items:flex-start;width:62%;padding:var(--sp-4) var(--sp-5);
    background:linear-gradient(to right, rgba(8,32,22,.97) 0%, rgba(8,32,22,.94) 62%, rgba(8,32,22,.55) 86%, rgba(8,32,22,0) 100%);}
  .va-hero__t{font-size:34px;}
  .va-hero__t b{font-size:48px;}
  .va-facts{grid-template-columns:repeat(3,1fr);}
  .va-facts > div{flex-direction:column;align-items:flex-start;gap:2px;}
  .va-facts dd{font-size:20px;}
  .va-rules{grid-template-columns:1fr 1fr;align-items:start;}
}

/* 第二、三檔優惠沒有自己的照片，用同一個橫幅骨架換成純色底，
   不重複用同一張圖，也不去借帶字的舊 banner */
.va-hero--plain{background:linear-gradient(135deg,#0e4d33 0%,#0a3524 100%);}
.va-hero--plain .va-hero__in{position:static;background:none;padding:var(--sp-4) var(--sp-3);}

@media (min-width:768px){
  .va-hero--plain .va-hero__in{width:100%;padding:var(--sp-5);}
}

/* 一頁三檔，每檔之間的距離由 .ab-gap-lg 給，區塊內不再各自加下間距 */
.va-act > .va-hero + .va-facts{margin-top:var(--sp-3);}

/* 會員中心那組儲值／提領跟整欄同寬，不要比上面的卡片窄一截 */
.ab-btnpair--wide{max-width:none;}

/* 五格用六欄底盤排：前三格各佔兩欄、後兩格各佔三欄，兩列都填滿，
   不會出現「三個一排、最後剩兩個」那種缺一角的樣子 */
.ab-grid--5{grid-template-columns:repeat(6,minmax(0,1fr));}
.ab-grid--5 > *{grid-column:span 2;}
.ab-grid--5 > :nth-child(4),
.ab-grid--5 > :nth-child(5){grid-column:span 3;}

/* 投注明細：外框固定高度、表頭釘住，紀錄再多也只有框在捲，
   頁面長度不會被筆數帶著跑 */
.ab-sechead{
  margin-bottom:var(--sp-3);
  padding-bottom:10px;
  border-bottom:2px solid var(--ab-gold);
  font-size:20px;
  line-height:1.4;
}
.ab-scrollbox{
  overflow:auto;
  max-height:min(64vh,520px);
  border:1px solid var(--ab-line);
  border-radius:var(--r-card);
  background:var(--ab-surface);
  -webkit-overflow-scrolling:touch;
}
.ab-table--bets{min-width:460px;}
.ab-table--bets thead th{
  position:sticky;
  top:0;
  z-index:1;
  background:var(--ab-surface-2);
  box-shadow:inset 0 -1px 0 var(--ab-line);
}
.ab-bets__when{white-space:nowrap;}
.ab-bets__when div{font-variant-numeric:tabular-nums;}
.ab-bets__when small{color:var(--ab-muted);}

/* 這張表在手機不切成一列一卡，維持表格，寬度不夠時框自己左右捲 */
@media (max-width:639px){
  .ab-scrollbox{border:1px solid var(--ab-line);background:var(--ab-surface);overflow:auto;}
  .ab-table--bets,
  .ab-table--bets thead,
  .ab-table--bets tbody,
  .ab-table--bets tr,
  .ab-table--bets th,
  .ab-table--bets td{display:revert;width:auto;}
  .ab-table--bets{display:table;width:100%;}
  .ab-table--bets thead{display:table-header-group;}
  .ab-table--bets tbody{display:table-row-group;}
  .ab-table--bets tr{
    display:table-row;background:transparent;border:0;border-radius:0;padding:0;margin:0;
  }
  .ab-table--bets th,
  .ab-table--bets td{display:table-cell;padding:10px var(--sp-2);border-bottom:1px solid var(--ab-line);}
  .ab-table--bets td::before{content:none;}
  .ab-table--bets td > *{grid-column:auto;}
  .ab-table--bets td{font-size:13px;padding:8px 10px;}
  .ab-table--bets th{font-size:12px;padding:8px 10px;}
  .ab-table--bets small{font-size:11px;}
  /* 手機讓日期與時間折行，第一欄少吃四十幾 px */
  .ab-bets__when{white-space:normal;}
  .ab-bets__when div{max-width:6.2em;}

  /* 狀態標籤改成第二行，遊戲類型那欄才不會把後面三欄擠出畫面 */
  .ab-table--bets td[data-label="遊戲類型"] .ab-state{
    display:inline-block;margin-top:3px;font-size:11px;padding:1px 8px;
  }
  .ab-table--bets td[data-label="遊戲類型"] > div{display:flex;flex-direction:column;align-items:flex-start;}

  /* 第一欄釘住：左右滑的時候還看得出是哪一筆 */
  .ab-table--bets th:first-child,
  .ab-table--bets td:first-child{
    position:sticky;
    left:0;
    background:var(--ab-surface);
    box-shadow:1px 0 0 var(--ab-line);
  }
  .ab-table--bets th:first-child{background:var(--ab-surface-2);z-index:2;}
}