:root{
  --bg0:#07090c;
  --bg1:#0b0f14;

  --panel: rgba(255,255,255,.03);
  --panel2: rgba(255,255,255,.015);

  --gold:#f6d27a;
  --gold2:#ffcc66;
  --gold3:#b8872b;

  --line: rgba(246,210,122,.22);
  --line2: rgba(246,210,122,.12);

  --text:#ffffff;
  --muted: rgba(210,218,226,.82);
  --muted2: rgba(210,218,226,.70);

  --glow: 0 0 18px rgba(246,210,122,.16);
  --glow2: 0 0 35px rgba(246,210,122,.12);

  --shadow: 0 16px 30px rgba(0,0,0,.45);
}

html, body{ overflow-x: hidden; }

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: "Segoe UI", Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(900px 600px at 30% 10%, rgba(246,210,122,.08), transparent 55%),
    radial-gradient(900px 600px at 80% 60%, rgba(246,210,122,.06), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}

a{ color:inherit; text-decoration:none; }

.page{ min-height:100%; padding-bottom: 86px; }
.shell{
  max-width: 980px;
  margin: 0 auto;
  padding: 14px;
}

/* Header */
.header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 6px 4px 10px;
}
.brand-name{
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0;
  text-shadow: none;
  color: rgba(255,255,255,.95);
  line-height: 1.2;
}

/* Layout */
.layout{
  display:grid;
  grid-template-columns: 1fr 330px;
  gap: 14px;
  align-items:start;
}
.left{ min-width:0; }
.right{ position: sticky; top: 12px; height: fit-content; }

@media (max-width: 860px){
  /* 原本單欄（保持你第一版） */
  .layout{
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* ✅ 手機版：讓右欄排在左欄前面（跑到 item-card 上面） */
  .right{
    order: -1;
    position: relative;
    top: auto;
  }

  .left{
    order: 0;
  }
}


/* Card base */
.card{
  display:flex;
  gap: 12px;
  padding: 12px 14px;
  margin: 10px 0;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--panel), var(--panel2));
  border: 1px solid var(--line2);
  box-shadow: var(--shadow), var(--glow);
  position: relative;
  overflow: hidden;
}

.card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: 14px;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(255,214,122,.70),
    rgba(255,214,122,.10),
    rgba(255,214,122,.45)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
}

/* Notice stronger */
.notice-card{
  background: linear-gradient(180deg, rgba(246,210,122,.10), rgba(255,255,255,.02));
  border: 1px solid rgba(246,210,122,.25);
  box-shadow: 0 18px 36px rgba(0,0,0,.55), var(--glow2);
}

/* Avatar */
.avatar{
  width: 52px;
  height: 52px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 52px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 18px rgba(0,0,0,.35);
}
.avatar-brand{
  overflow: hidden;          /* 確保圖片不會超出圓形 */
  background: #000;
}
.avatar-tg{
  background: radial-gradient(circle at 30% 30%, rgba(60,170,255,.45), rgba(0,0,0,.35));
}
.avatar-wa{
  background: radial-gradient(circle at 30% 30%, rgba(45,212,106,.45), rgba(0,0,0,.35));
}
.avatar-game{
  background: radial-gradient(circle at 30% 30%, rgba(246,210,122,.25), rgba(0,0,0,.35));
}
.avatar-brand img {
  width: 88%;
  height: 88%;
  object-fit: cover;         /* 填滿圓形 */
  border-radius: 50%;
  display: block;
}
.emoji{ font-size: 22px; }

/* Card content */
.card-main{ flex: 1; min-width:0; }
.row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.row-tight{ margin-top: 4px; align-items:flex-end; }

.title{
  font-weight: 800;
  font-size: 18px;
  letter-spacing:.2px;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.sub{
  color: var(--muted);
  font-size: 15px;
  margin-top: 4px;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.time{
  color: var(--muted2);
  font-size: 12px;
  flex: 0 0 auto;
}

.verified{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  margin-left: 6px;
  font-size: 12px;
  background: #1b66ff;
  color: #fff;
  box-shadow: 0 0 14px rgba(27,102,255,.25);
}

/* Status */
.status{
  display:flex;
  align-items:center;
  gap: 6px;
  flex: 0 0 auto;
}
.dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #4cfe54;
  box-shadow: 0 0 10px rgba(76,254,84,.35);
}
.status-text{
  color:#4cfe54;
  font-weight: 700;
  font-size: 12px;
  letter-spacing:.6px;
  text-shadow: 0 0 10px rgba(76,254,84,.25);
}
.msg-ico{ opacity:.9; }

/* Gold strip inside Notice */
.gold-strip{
  margin-top: 10px;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(246,210,122,.16), rgba(255,255,255,.02));
  border: 1px solid rgba(246,210,122,.25);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
.gold-strip-ico.verified-ico{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 16px;
  font-weight: 900;

  /* WhatsApp / Telegram verified 藍 */
  background: #2dd46a;
  color: white;

  box-shadow: 
    0 0 0 2px rgba(255,255,255,.12),
    0 0 12px rgba(29,155,240,.45);
}
.gold-strip-title{
  font-weight: 900;
  color: rgba(255,214,122,.95);
}
.gold-strip-sub{
  font-size: 12px;
  color: var(--muted);
}

/* RTP badges */
.badges{
  display:flex;
  align-items:center;
  gap: 10px;
  flex: 0 0 auto;
}
.rtp-badge{
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 9px;
  color: #2a1a00;
  background: linear-gradient(180deg, #ffd88a, #c9922f);
  box-shadow: 0 6px 14px rgba(0,0,0,.28), 0 0 18px rgba(246,210,122,.22);
  border: 1px solid rgba(255,255,255,.22);
  white-space: nowrap;
}
.delta{
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.delta.up{ color: #4cfe54; text-shadow: 0 0 10px rgba(76,254,84,.18); }
.delta.down{ color: #ff4d4d; text-shadow: 0 0 10px rgba(255,77,77,.18); }

/* Bottom strip */
.bottom-strip{
  align-items:center;
  gap: 12px;
}
.clock{
  width: 54px; height: 54px;
  border-radius: 999px;
  display:flex; align-items:center; justify-content:center;
  font-weight: 900;
  color: rgba(255,214,122,.95);
  border: 1px solid rgba(246,210,122,.30);
  background: radial-gradient(circle at 30% 30%, rgba(246,210,122,.20), rgba(0,0,0,.35));
  box-shadow: 0 12px 24px rgba(0,0,0,.45), var(--glow);
}
.bottom-strip-title{
  font-weight: 900;
  color: rgba(255,214,122,.95);
}
.bottom-strip-sub{
  font-size: 12px;
  color: var(--muted);
}

.section-gap{ height: 2px; }
.safe-space{ height: 30px; }

/* Promo (Right panel) */
.promo-stack{ display:flex; flex-direction:column; gap: 14px; padding-top: 10px; }
.promo-link{ display:block; }

.promo-card{
  border-radius: 18px;
  padding: 14px;
  background:
    radial-gradient(240px 180px at 30% 20%, rgba(246,210,122,.14), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border: 1px solid rgba(246,210,122,.22);
  box-shadow: var(--shadow), var(--glow2);
  position: relative;
  overflow:hidden;
}
.promo-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 18px;
  padding: 2px;
  background: linear-gradient(135deg,
    rgba(255,214,122,.75),
    rgba(255,214,122,.08),
    rgba(255,214,122,.55)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
}

.promo-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.promo-title{
  font-weight: 900;
  letter-spacing:.8px;
  color: rgba(255,214,122,.95);
  font-size: 22px;
  text-shadow: 0 0 18px rgba(246,210,122,.25);
}
.promo-sub{
  margin-top: 8px;
  color: var(--muted);
  font-size: 14px;
}
.promo-badge{
  width: 22px; height: 22px;
  border-radius: 999px;
  display:flex; align-items:center; justify-content:center;
  font-size: 12px;
  background: #c61a1a;
  color:#fff;
  box-shadow: 0 0 14px rgba(198,26,26,.35);
}

.promo-hero-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.spark{ font-size: 20px; opacity:.9; }
.promo-percent{
  font-size: 56px;
  font-weight: 900;
  line-height: 1;
  color: #ffd88a;
  text-shadow: 0 0 28px rgba(246,210,122,.24);
  margin: 8px 0 8px;
}
.promo-cta{
  margin-top: 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 14px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing:.6px;
  background: linear-gradient(270deg, #2dd46a, #128c48);
  color:#06210f;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 12px 22px rgba(0,0,0,.35), 0 0 18px rgba(45,212,106,.18);
}
.promo-cta.green{
  background: linear-gradient(270deg, #35f08a, #10a95a);
}

.promo-title-sm{
  font-weight: 900;
  color: rgba(255,214,122,.95);
  font-size: 18px;
  text-shadow: 0 0 18px rgba(246,210,122,.18);
}

/* Floating TOP-UP (right bottom) */
.floating-topup{
  position: fixed;
  right: 18px;
  bottom: 96px;
  z-index: 20;
}
.pill{
  display:inline-flex;
  padding: 14px 18px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing:.7px;
  background: linear-gradient(270deg, #35f08a, #10a95a);
  color:#06210f;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 18px 30px rgba(0,0,0,.45), 0 0 18px rgba(45,212,106,.20);
}

/* Bottom nav */
.bottom-nav{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 78px;
  display:flex;
  justify-content:space-around;
  align-items:center;
  background: linear-gradient(180deg, rgba(0,0,0,.92), rgba(0,0,0,.98));
  border-top: 1px solid rgba(246,210,122,.20);
  box-shadow: 0 -10px 30px rgba(0,0,0,.55), 0 -1px 0 rgba(246,210,122,.10) inset;
  z-index: 30;
}
.nav-item{
  width: 25%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 6px;
  opacity:.92;
}
.nav-ico{ font-size: 22px; position: relative; }
.nav-txt{
  font-size: 12px;
  color: rgba(246,210,122,.85);
  font-weight: 800;
}
.nav-item.active .nav-txt{ color: rgba(255,214,122,.98); }
.badge-wrap{ position: relative; }
.badge-num{
  position:absolute;
  top: -10px;
  right: -12px;
  background:#c61a1a;
  color:#fff;
  font-weight: 900;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 999px;
  box-shadow: 0 0 14px rgba(198,26,26,.35);
}

/* 預設（手機/窄螢幕）：right 就在 left 裡面正常流（Notice 下、Contacts 上） */
.right.mobile-insert{
  position: relative;
  top: auto;
}

/* PC（寬螢幕）：把 right 變成「右側欄」 */
@media (min-width: 861px){
  .layout{
    display: grid;
    grid-template-columns: 1fr 330px;
    gap: 14px;
    align-items: start;
  }

  /* 讓 left 變成 grid item */
  .left{
    grid-column: 1 / 2;
  }

  /* 把 right “抽出來” 放到第二欄（靠 CSS grid placement） */
  .right.mobile-insert{
    grid-column: 2 / 3;
    position: sticky;
    top: 12px;
  }
}


/* =========================
   MOBILE: 保持你現在的順序
   (Notice -> Right -> Contacts)
   ========================= */
@media (max-width: 860px){
  .layout{ display:block; } /* main.layout 不需要 grid */
  .right{ position:relative; top:auto; }
}

/* =========================
   PC: 在 LEFT 裡面做兩欄
   左：原本內容
   右：aside.right
   ========================= */
@media (min-width: 861px){
  /* main.layout 不再負責左右欄，交給 left 內部 grid */
  .layout{
    display:block;
  }

  /* left 變成兩欄 grid */
  .left{
    display:grid;
    grid-template-columns: 1fr 330px;
    gap: 14px;
    align-items:start;
  }

  /* Notice/Contacts/Games 這些 card 全部預設在左欄 */
  .left > .card,
  .left > .section-gap,
  .left > .safe-space{
    grid-column: 1 / 2;
  }

  /* aside.right 固定在右欄，並且 sticky */
  .left > .right{
    grid-column: 2 / 3;
    grid-row: 1 / span 99;     /* 從最上面一路佔著右邊 */
    position: sticky;
    top: 12px;
    align-self:start;
  }
}

/* 讓整條像可點擊 CTA */
.gold-strip-cta{
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 右邊 PM button */
.pm-btn{
  margin-left: auto;
  padding: 8px 14px;
  border-radius: 999px;

  font-size: 13px;
  font-weight: 900;
  letter-spacing: .5px;

  background: linear-gradient(270deg, #35f08a, #10a95a); /* 跟 TOP-UP 一樣 */
  color: #06210f;

  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 
    0 10px 18px rgba(0,0,0,.45),
    0 0 18px rgba(45,212,106,.25);

  transition: all .2s ease;
}

/* hover 效果 */
.gold-strip-cta:hover .pm-btn{
  transform: translateY(-1px);
  box-shadow: 
    0 14px 26px rgba(0,0,0,.55),
    0 0 22px rgba(45,212,106,.35);
}

/* 整條也給一點 hover 感 */
.gold-strip-cta:hover{
  border-color: rgba(45,212,106,.45);
}

.pm-btn{
  position: relative;
  overflow: hidden;              /* 斜光不溢出 */
  isolation: isolate;            /* 讓疊層更穩 */
  -webkit-tap-highlight-color: transparent;

  /* 保留你原本的綠色漸層 + 陰影（如果你已經有就不用重複） */
  /* background / box-shadow 你原本那段可留 */
}



/* 玻璃罩：透明高光 + 邊緣玻璃感 */
.pm-btn::before{
  content:"";
  position:absolute;                 
  border-radius: inherit;
  pointer-events:none;
  z-index: 1;

  /* 玻璃高光（上亮下暗）+ 一點點霧面 */
  background:
    linear-gradient(180deg,
      rgba(255,255,255,.28),
      rgba(255,255,255,.08) 35%,
      rgba(0,0,0,.08) 100%);

  /* 玻璃邊緣 */
  box-shadow:
    0 1px 0 rgba(255,255,255,.25) inset,
    0 -1px 0 rgba(0,0,0,.18) inset;

  /* 有支援的瀏覽器會更像玻璃 */
  backdrop-filter: blur(6px) saturate(140%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);

  opacity: .85;
}

/* 斜光掃過：左上 -> 右下，慢速 + 中間有停頓 */
.pm-btn::after{
  content:"";
  position:absolute;
  top:-50%;
  left:-80%;
  width: 70%;
  height: 200%;
  pointer-events:none;
  z-index: 2;

  /* 斜向光帶（中間亮、兩側淡） */
  background: linear-gradient(115deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.10) 35%,
    rgba(255,255,255,.55) 50%,
    rgba(255,255,255,.12) 65%,
    rgba(255,255,255,0) 100%);

  transform: rotate(12deg);
  filter: blur(0.2px);
  opacity: .9;

  animation: pmShine 4.8s ease-in-out infinite;
}

/* 讓文字永遠在最上層、清晰 */
.pm-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 6px;
}
.pm-btn > *{ position: relative; z-index: 3; }

/* 慢速掃光 + 停頓（不要一直太快） */
@keyframes pmShine{
  0%   { transform: translateX(-140%) rotate(12deg); opacity: 0; }
  10%  { opacity: .9; }
  45%  { transform: translateX(220%) rotate(12deg); opacity: .9; }
  46%  { opacity: 0; }
  100% { transform: translateX(220%) rotate(12deg); opacity: 0; }
}

.pm-label{
  position: relative;
  z-index: 5;          /* ✅ 永遠在玻璃與掃光之上 */
}

/* === Modal Overlay === */
.modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;

  opacity: 0;
  pointer-events: none;
  transition: .25s ease;
}

.modal-overlay.show{
  opacity: 1;
  pointer-events: auto;
}

/* === Modal Card === */
.modal-card{
  width: 90%;
  max-width: 360px;
  background: linear-gradient(180deg, #111, #0b0b0b);
  border: 1px solid rgba(255,215,130,.15);
  border-radius: 22px;
  padding: 20px;

  box-shadow:
    0 30px 60px rgba(0,0,0,.7),
    inset 0 1px 0 rgba(255,255,255,.05);

  transform: translateY(20px) scale(.96);
  transition: .3s ease;
}

.modal-overlay.show .modal-card{
  transform: translateY(0) scale(1);
}

/* === Header === */
.modal-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-title{
  font-size: 20px;
  font-weight: 700;
  color: #f6d27a;
}

.modal-close{
  cursor: pointer;
  font-size: 18px;
  opacity: .6;
}
.modal-close:hover{ opacity: 1; }

/* === Subtext === */
.modal-sub{
  margin: 10px 0 18px;
  font-size: 14px;
  opacity: .75;
}

/* === Buttons === */
.modal-actions{
  display: grid;
  grid-template-columns: 1fr;   /* ← 變成單欄 */
  gap: 14px;
}

.modal-btn{
  padding: 14px 10px;
  border-radius: 14px;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  letter-spacing: .3px;

  box-shadow: 0 10px 25px rgba(0,0,0,.6);
  transition: .2s ease;
}

/* WhatsApp official */
.modal-btn.whatsapp{
  background: linear-gradient(180deg, #25D366, #128C4A);
  color: #052b16;
}

/* Telegram official */
.modal-btn.telegram{
  background: linear-gradient(180deg, #2AABEE, #229ED9);
  color: #041d2b;
}

/* Hover */
.modal-btn:hover{
  transform: translateY(-2px);
  filter: brightness(1.1);
}
/* 只讓輪播內容滑動（CTA 不動） */
.promo-hero .promo-title,
.promo-hero .promo-percent,
.promo-hero .promo-sub{
  transition: transform .45s ease, opacity .35s ease;
  will-change: transform, opacity;
}

/* 進入「切換中」狀態：往左滑出 + 變淡 */
.promo-hero.is-sliding .promo-title,
.promo-hero.is-sliding .promo-percent,
.promo-hero.is-sliding .promo-sub{
  opacity: 0;
  transform: translateX(-14px);
}

/* 新內容進場：從右邊滑入（JS 會先加這個 class） */
.promo-hero.pre-enter .promo-title,
.promo-hero.pre-enter .promo-percent,
.promo-hero.pre-enter .promo-sub{
  opacity: 0;
  transform: translateX(14px);
}

/* 副標右側加滑動提示箭頭 */
.promo-hero.has-slides .promo-sub{
  position: relative;
  padding-right: 18px;
}

.promo-hero.has-slides .promo-sub::after{
  content: "››";
  letter-spacing: -2px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  font-weight: 600;
  color: rgba(246,210,122,.75); /* 金色淡 */
  animation: slideHint 1.6s ease-in-out infinite;
}

/* 微微左右漂浮動畫（很克制，不吵） */
@keyframes slideHint{
  0%,100% { transform: translate(0, -50%); opacity: .4; }
  50%     { transform: translate(-4px, -50%); opacity: .9; }
}

/* 讓 promo-hero 可以放絕對定位圖層 */
.promo-hero{ position: relative; overflow: hidden; }

/* 圖層容器：定位在你紅圈那個區域（可微調） */
.promo-media{
  position: absolute;
  right: 10px;
  top: 18px;              /* ← 往上提：原本 56px 太下面 */
  width: 48%;
  height: 68%;            /* ↑ 增加高度，避免圖被壓在下方 */
  pointer-events: none;
  z-index: 1;
  display: flex;
  align-items: center;    /* ← 不要用 flex-end，會把圖壓到底 */
  justify-content: center;
}

/* PNG layer - Pro motion */
.promo-media .media-item{
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  /* 初始狀態：在下方一點、微縮、小模糊 */
  opacity: 0;
  transform: translate3d(10px, 18px, 0) scale(.975);
  filter: blur(3px) drop-shadow(0 18px 26px rgba(0,0,0,.55));

  will-change: transform, opacity, filter;
}

/* 進場：更柔、更像 iOS */
.promo-media .media-item.enter{
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0px) drop-shadow(0 18px 26px rgba(0,0,0,.55));
  transition:
    transform 980ms cubic-bezier(.16, 1.02, .22, 1),
    opacity 720ms ease,
    filter 980ms cubic-bezier(.16, 1.02, .22, 1);
}

/* 退場：往上走一點 + 微縮 + 微模糊（乾淨收尾） */
.promo-media .media-item.leave{
  opacity: 0;
  transform: translate3d(-6px, -16px, 0) scale(.99);
  filter: blur(2.5px) drop-shadow(0 18px 26px rgba(0,0,0,.55));
  transition:
    transform 720ms cubic-bezier(.2, .9, .2, 1),
    opacity 420ms ease,
    filter 720ms cubic-bezier(.2, .9, .2, 1);
}


/* 確保文字永遠在圖上面 */
.promo-hero .promo-hero-top,
.promo-hero .promo-percent,
.promo-hero .promo-sub,
.promo-hero .promo-cta{
  position: relative;
  z-index: 2;
}

/* ===== Glass style for CLAIM NOW (no shine) ===== */
.promo-cta{
  position: relative;
  overflow: hidden;
  border-radius: 999px;
  cursor: pointer;
  user-select: none;

  /* 保留你原本綠色底（若已有可略） */
  /* background: linear-gradient(135deg, #1fd96a, #13b65a); */

  /* 外部陰影 + 內部立體感 */
  box-shadow:
    0 10px 22px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -10px 22px rgba(0,0,0,.18);
}

/* 玻璃高光層 */
.promo-cta::before{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;

  background:
    linear-gradient(180deg,
      rgba(255,255,255,.28) 0%,
      rgba(255,255,255,.12) 35%,
      rgba(0,0,0,.08) 100%);
}

/* hover 時微微亮一點（桌面才有效） */
@media (hover:hover){
  .promo-cta:hover::before{
    background:
      linear-gradient(180deg,
        rgba(255,255,255,.34) 0%,
        rgba(255,255,255,.16) 35%,
        rgba(0,0,0,.06) 100%);
  }
}

.modal-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
}

/* Font Awesome icon */
.modal-btn i{
  font-size: 20px;
  color: #fff;
  opacity: .95;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
}

/* 讓整個按鈕更像 app button */
.modal-btn span{
  letter-spacing: .2px;
}

/* ===== Premium icon effect inside modal buttons ===== */

.modal-btn{
  position: relative;
}

/* icon 本體升級 */
.modal-btn i{
  font-size: 20px;
  color: #fff;
  opacity: .95;
  line-height: 1;

  /* 讓 icon 有「嵌在玻璃裡」的感覺 */
  filter:
    drop-shadow(0 1px 1px rgba(0,0,0,.35))   /* 外部陰影 */
    drop-shadow(0 -1px 0 rgba(255,255,255,.15)); /* 微高光 */

  text-shadow:
    0 1px 2px rgba(0,0,0,.25); /* 字面立體感 */

  transform: translateY(-0.5px); /* 微微往上，像浮在玻璃裡 */
}

/* hover / active 時微微「壓下去」 */
.modal-btn:active i{
  transform: translateY(0.5px);
  filter:
    drop-shadow(0 0 1px rgba(0,0,0,.4));
}

/* ===== Border runner (SVG path) - no random line bug ===== */
.glow-border{
  position: relative;
  border-radius: 16px;   /* 跟 rect rx 對齊 */
  overflow: hidden;
  isolation: isolate;
}

/* SVG 罩在最上層，不擋點擊 */
.glow-border .border-run{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}

/* 基礎金線（很淡） */
.glow-border .border-base{
  fill: none;
  stroke: rgba(246, 210, 122, .28);
  stroke-width: 1.4;
}

/* 跑動高光（短段） */
.glow-border .border-glow{
  fill: none;
  stroke: rgba(255, 226, 160, .95);
  stroke-width: 1.6;
  stroke-linecap: round;

  /* 這兩個數值會由 JS 設定更準，但先給預設也能跑 */
  stroke-dasharray: 18 220;
  stroke-dashoffset: 0;

  filter: drop-shadow(0 0 6px rgba(255, 210, 120, .45));
  animation: borderRun 6.8s linear infinite;
}

/* 跑一圈 */
@keyframes borderRun{
  to { stroke-dashoffset: -238; }
}

/* ===== Promotion Modal (same design language as contactModal) ===== */
.promo-modal-card{
  width: 92%;
  max-width: 420px;
}

.promo-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 10px;
}

.promo-item{
  border-radius: 16px;
  border: 1px solid rgba(246,210,122,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  box-shadow: 0 14px 28px rgba(0,0,0,.55);
  overflow: hidden;
}

.promo-banner{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px;
  background: transparent;
  border: 0;
  color: #fff;
  cursor: pointer;
  text-align: left;
}

.promo-banner-left{
  width: 54px;
  height: 38px;
  border-radius: 12px;
  background: rgba(246,210,122,.12);
  border: 1px solid rgba(246,210,122,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex: 0 0 auto;
}
.promo-banner-left img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

.promo-banner-title{
  font-weight: 900;
  letter-spacing: .3px;
  color: rgba(255,214,122,.95);
  flex: 1;
  min-width: 0;
}

.promo-banner-arrow{
  opacity: .8;
  font-size: 22px;
  transform: translateY(-1px);
  transition: transform .25s ease, opacity .25s ease;
}

/* detail 折疊區 */
.promo-detail{
  max-height: 0;
  overflow: hidden;
  transition: max-height .32s ease;
}

.promo-detail-inner{
  padding: 0 12px 12px;
  color: rgba(210,218,226,.82);
  font-size: 14px;
  line-height: 1.5;
  white-space: normal;
  border-top: 1px solid rgba(246,210,122,.12);
  margin-top: 2px;
}

/* 打開狀態 */
.promo-item.open .promo-detail{
  max-height: 260px; /* 夠用就好；文字太長你再加大 */
}
.promo-item.open .promo-banner-arrow{
  transform: rotate(90deg);
  opacity: 1;
}
/* ===== Bigger promo cards: banner image + caption ===== */
.promo-modal-card{
  width: 94%;
  max-width: 520px; /* 比原本 420 更宽 */
}

/* 外层 item 更大一点 */
.promo-item{
  border-radius: 18px;
}

/* 让按钮变成竖排：图在上、字在下 */
.promo-banner.promo-banner-big{
  padding: 12px;
  display: block;
}

/* banner 图区域 */
.promo-banner-media{
  position: relative;
  width: 100%;
  height: 120px;           /* 你要更大就改 140/160 */
  border-radius: 16px;
  overflow: hidden;
  background: rgba(246,210,122,.10);
  border: 1px solid rgba(246,210,122,.18);
  box-shadow: 0 14px 26px rgba(0,0,0,.55);
}

/* ✅ iOS 兼容寫法：強制填滿容器 */
.promo-banner-media img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;

  /* 可選：iOS 重繪更穩 */
  transform: translateZ(0);
}

/* 没图的占位（可留） */
.promo-banner-placeholder{
  width: 100%;
  height: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 900;
  letter-spacing: .8px;
  color: rgba(255,214,122,.9);
  background: radial-gradient(240px 180px at 30% 20%, rgba(246,210,122,.18), transparent 60%);
}

/* 右上角箭头 */
.promo-banner-corner{
  position: absolute;
  right: 10px;
  top: 8px;
  width: 30px;
  height: 30px;
  border-radius: 999px;

  display:flex;
  align-items:center;
  justify-content:center;

  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.85);
  font-size: 22px;
  line-height: 1;

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* 图下方标题（你要的那一行短名字） */
.promo-banner-caption{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;

  background: radial-gradient(240px 180px at 30% 20%, rgba(246,210,122,.14), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border: 1px solid rgba(246,210,122,.12);

  font-weight: 900;
  color: #fff;
  letter-spacing: .3px;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 展开 detail 跟着大卡片排版更舒服 */
.promo-detail-inner{
  padding: 10px 12px 14px;
}
/* ===== Fix: modal content overflow + enable scrolling ===== */
.modal-overlay{
  /* 让 overlay 本身可滚（备用方案） */
  overflow-y: auto;
  padding: 18px 12px;                 /* 顶部/底部留安全区 */
  -webkit-overflow-scrolling: touch;
}

/* 关键：限制 modal-card 高度，不要撑爆屏幕 */
.modal-card{
  max-height: calc(100vh - 36px);     /* 视窗高 - 上下 padding */
  overflow-y: auto;                   /* 让卡片内部滚动 */
  -webkit-overflow-scrolling: touch;
}

/* Promotion modal 里面内容很多：再加一点更稳 */
#promoModal .promo-grid{
  max-height: none;                   /* 由 .modal-card 控制 */
}

/* 可选：避免 iOS/安卓滑动时卡住 */
#promoModal .modal-card{
  overscroll-behavior: contain;
}

/* ===== Custom Scrollbar for Modal (Desktop only) ===== */
#promoModal .modal-card::-webkit-scrollbar,
#contactModal .modal-card::-webkit-scrollbar {
  width: 10px;
}

#promoModal .modal-card::-webkit-scrollbar-track,
#contactModal .modal-card::-webkit-scrollbar-track {
  background: rgba(0,0,0,.45);
  border-radius: 10px;
}

#promoModal .modal-card::-webkit-scrollbar-thumb,
#contactModal .modal-card::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #f6d27a, #b8872b);
  border-radius: 10px;
  box-shadow: 
    0 0 10px rgba(246,210,122,.35),
    inset 0 0 2px rgba(255,255,255,.35);
}

#promoModal .modal-card::-webkit-scrollbar-thumb:hover,
#contactModal .modal-card::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #ffe7a6, #c99833);
}

/* Firefox 支援 */
#promoModal .modal-card,
#contactModal .modal-card {
  scrollbar-width: thin;
  scrollbar-color: #d6b25c rgba(0,0,0,.45);
}

/* ===== Modal scroll: cross-platform stable (iOS/Android) ===== */
.modal-overlay{
  overflow-y: auto;                 /* 允许 overlay 滚（备用） */
  padding: 18px 12px;
  -webkit-overflow-scrolling: touch;
}

.modal-card{
  max-height: calc(100vh - 36px);   /* 不超出屏幕 */
  overflow-y: auto;                 /* 关键：内容在卡片内滚 */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;     /* 防止滚动穿透（Android/Chrome更好） */
}

/* 背景锁滚动（iOS/Android 都稳定） */
html.modal-open, body.modal-open{
  height: 100%;
  overflow: hidden;
  touch-action: none;
}

/* ===== Scrollbar styling (best-effort; iOS may ignore) ===== */
@supports selector(::-webkit-scrollbar){
  #promoModal .modal-card::-webkit-scrollbar,
  #contactModal .modal-card::-webkit-scrollbar{ width: 10px; }

  #promoModal .modal-card::-webkit-scrollbar-track,
  #contactModal .modal-card::-webkit-scrollbar-track{
    background: rgba(0,0,0,.45);
    border-radius: 10px;
  }

  #promoModal .modal-card::-webkit-scrollbar-thumb,
  #contactModal .modal-card::-webkit-scrollbar-thumb{
    background: linear-gradient(180deg, #f6d27a, #b8872b);
    border-radius: 10px;
    box-shadow:
      0 0 10px rgba(246,210,122,.35),
      inset 0 0 2px rgba(255,255,255,.35);
  }
}

/* Firefox */
#promoModal .modal-card,
#contactModal .modal-card{
  scrollbar-width: thin;
  scrollbar-color: #d6b25c rgba(0,0,0,.45);
}

/* ===== Payment logos row inside promo-topup card ===== */
.promo-topup.pay-topup{
  padding-bottom: 14px; /* 让下面不挤 */
}

.pay-row{
  margin-top: 10px;
  display: flex;
  gap: 10px;
  align-items: center;

  /* 手机太窄时：允许横向滑动，不会挤爆 */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
}

/* 单个小格子（像 favicon 但更大、更像你黑金主题） */
.pay-tile{
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border-radius: 14px;

  background: rgba(0,0,0,.35);
  border: 1px solid rgba(246,210,122,.16);
  box-shadow: 0 10px 18px rgba(0,0,0,.45);

  display: flex;
  align-items: center;
  justify-content: center;
}

.pay-tile img{
  width: 78%;
  height: 78%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));
}

/* 可选：让横向滚动条更隐形（不影响功能） */
.pay-row::-webkit-scrollbar{ height: 6px; }
.pay-row::-webkit-scrollbar-track{ background: transparent; }
.pay-row::-webkit-scrollbar-thumb{
  background: rgba(246,210,122,.22);
  border-radius: 999px;
}

/* ===== Payment logos: force left->right 7 tiles ===== */
.pay-row{
  margin-top: 10px;

  display: grid;
  grid-template-columns: repeat(7, 1fr); /* 强制一排7个 */
  gap: 10px;
  align-items: center;

  /* 兼容：如果屏幕太窄，就允许横向滚动 */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
}

/* 每个格子固定更像 favicon(大一点) */
.pay-tile{
  min-width: 56px;
  height: 56px;
  border-radius: 14px;

  background: rgba(0,0,0,.35);
  border: 1px solid rgba(246,210,122,.16);
  box-shadow: 0 10px 18px rgba(0,0,0,.45);

  display: flex;
  align-items: center;
  justify-content: center;
}

.pay-tile img{
  width: 78%;
  height: 78%;
  object-fit: contain;
  display: block;
}

/* ✅ 7 个一排，不撑破页面 */
.pay-row{
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important; /* 关键 */
  gap: 6px;
  margin-top: 10px;
  width: 100%;
  overflow: hidden; /* 不要横向滚动 */
}

.pay-tile{
  min-width: 0;                 /* 关键：允许被压缩 */
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto !important;
  border: none;
  background: transparent;
  box-shadow: none;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pay-tile img{
  max-width: 100%;              /* 关键：别用固有宽度撑破 */
  max-height: 100%;
  width: 80%;
  height: 80%;
  object-fit: contain;
  display: block;
}

/* ===== 75% image + 25% diagonal download slice ===== */
.media-slice{
  position: relative;
  width: 100%;
  height: 86px;                 /* 你要更高就改这里 */
  border-radius: 18px;
  overflow: hidden;

  background: rgba(0,0,0,.35);
  border: 1px solid rgba(246,210,122,.14);
  box-shadow: 0 14px 26px rgba(0,0,0,.45);

  display: grid;
  grid-template-columns: 85% 15%;
}

/* 左边图片区 */
.media-main{
  position: relative;
  min-width: 0;
  height: 100%;
}
.media-main img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 右边斜切区（按钮区） */
.media-cut{
  position: relative;
  border: 0;
  padding: 0;
  min-width: 0;
  height: 100%;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  color: rgba(246,210,122,.92);
  background: rgba(0,0,0,.55);
}

/* 做出斜线：用伪元素盖一层斜切的“遮罩边” */
.media-cut::before{
  content: "";
  position: absolute;
  inset: 0;

  /* 斜切：左上到右下（你手绘那条斜线） */
  clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%);

  background: linear-gradient(180deg,
    rgba(0,0,0,.35),
    rgba(0,0,0,.7)
  );
}

/* 斜线边（更像你主题的金边） */
.media-cut::after{
  content: "";
  position: absolute;
  top: -10%;
  left: -28%;
  width: 2px;
  height: 140%;
  background: rgba(246,210,122,.22);
  transform: rotate(22deg);
}

/* icon 放在最上层 */
.media-cut i{
  position: relative;
  z-index: 1;
  font-size: 18px;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.55));
}

/* 手机触控反馈（不会影响 iOS 一致性） */
.media-cut:active{
  transform: translateY(1px);
}

/* ✅ 防止 media-slice 圖片溢出 */
.media-slice{
  overflow: hidden !important;
}

.media-main{
  overflow: hidden !important;
  border-top-left-radius: 18px;
  border-bottom-left-radius: 18px;
}

.media-main img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  max-width: 100% !important;
  max-height: 100% !important;
}

.media-main img{
  position: static !important;
  transform: none !important;
}

/* ===== 85/15 diagonal cut (REAL cut) ===== */
.media-slice{
  position: relative;
  width: 100%;
  height: 86px;
  border-radius: 18px;
  overflow: hidden !important;

  background: rgba(0,0,0,.35);
  border: 1px solid rgba(246,210,122,.14);
  box-shadow: 0 14px 26px rgba(0,0,0,.45);
}

/* 左边：图片层（会被斜切） */
.media-main{
  position: absolute;
  inset: 0;
  overflow: hidden !important;

  /* ✅ 真正斜切：右边切掉一块（85/15） */
  /* 斜线从上方 92% 到下方 80%（可微调更陡/更平） */
  clip-path: polygon(0 0, 92% 0, 80% 100%, 0 100%);
  -webkit-clip-path: polygon(0 0, 92% 0, 80% 100%, 0 100%);
}

.media-main img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

  /* ✅ 防止任何旧样式导致溢出 */
  max-width: 100%;
  max-height: 100%;
  transform: none !important;
  position: static !important;
}

/* 右边：斜切区域（覆盖在右侧） */
.media-cut{
  position: absolute;
  top: 0;
  right: 0;
  width: 15%;
  height: 100%;

  border: 0;
  padding: 0;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  /* ✅ 右侧也做对应斜形 */
  clip-path: polygon(66% 0, 100% 0, 100% 100%, 0 100%);
  -webkit-clip-path: polygon(66% 0, 100% 0, 100% 100%, 0 100%);

  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.75));
  color: rgba(246,210,122,.92);
}

/* 斜线金边（贴着切边） */
.media-cut::before{
  content:"";
  position:absolute;
  top:-10%;
  left:-30%;
  width:2px;
  height:140%;
  background: rgba(246,210,122,.22);
  transform: rotate(28deg);
}

.media-cut i{
  position: relative;
  z-index: 1;
  font-size: 18px;
}

/* Download modal: 继承你 modal-card 风格，只加布局 */
.download-modal-card{}

/* 2列为主，小屏也好看 */
.dl-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

/* 每个格子像 app tile */
.dl-tile{
  text-decoration: none;
  color: inherit;

  display: flex;
  align-items: center;
  gap: 10px;

  padding: 12px 12px;
  border-radius: 14px;

  background: rgba(0,0,0,.35);
  border: 1px solid rgba(246,210,122,.14);
  box-shadow: 0 10px 18px rgba(0,0,0,.35);
}

.dl-ico{
  width: 40px;
  height: 40px;
  border-radius: 12px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(0,0,0,.35);
  border: 1px solid rgba(246,210,122,.10);
  color: rgba(246,210,122,.92);
}

.dl-ico i{ font-size: 18px; }

.dl-title{
  font-weight: 800;
  letter-spacing: .2px;
}

.dl-sub{
  opacity: .75;
  font-size: 12px;
  margin-top: 2px;
}

/* 桌面更宽时：可变 4 列（如果你想一行 4 个） */
@media (min-width: 720px){
  .dl-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ===== Download Modal (Desktop fix) ===== */

/* Modal 在 PC 可以寬一點，看起來更舒服 */
#downloadModal .modal-card{
  width: min(560px, 92vw);
  max-width: 560px;
}

/* ===== Download modal: 永遠 2 x 2 排列 ===== */

#downloadModal .dl-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px;
}

/* 每個按鈕卡片：避免被擠到很窄 */
#downloadModal .dl-tile{
  min-width: 0;
}

/* icon + 文字不要爆版 */
#downloadModal .dl-title,
#downloadModal .dl-sub{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 小螢幕（手機）維持你原本 OK 的樣子 */
@media (max-width: 520px){
  #downloadModal .modal-card{
    width: 92vw;
    max-width: 420px;
  }
  #downloadModal .dl-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* ===================== BOTTOM STRIP (GLOBAL SYNC ONLY) ===================== */

/* hide verified section completely */
.card.bottom-strip .bs-right{
  display:none !important;
}

/* wrapper: single full-width block */
.card.bottom-strip .bs-wrap{
  display:block !important;
  width:100% !important;
  padding:18px !important;
  box-sizing:border-box !important;
}

/* the Global Sync card itself */
.card.bottom-strip .bs-left{
  width:100% !important;
  max-width:none !important;
  box-sizing:border-box !important;

  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.12)) !important;
  border: 1px solid rgba(245,197,66,.18) !important;
  border-radius: 16px !important;
  padding: 18px !important;

  box-shadow:
    0 18px 50px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.06) !important;

  position:relative !important;
  overflow:hidden !important;
}

/* subtle gold glow */
.card.bottom-strip .bs-left::before{
  content:"";
  position:absolute;
  inset:-40% -30% auto -30%;
  height:190px;
  background: radial-gradient(circle at 50% 50%, rgba(245,197,66,.16), rgba(245,197,66,0) 62%);
  filter: blur(6px);
  pointer-events:none;
}
.card.bottom-strip .bs-left::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(circle at 12% 18%, rgba(255,255,255,.06), transparent 45%);
  pointer-events:none;
}

/* title */
.card.bottom-strip .bs-title{
  margin:0 0 14px 0 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: .35px !important;
  opacity: .96 !important;
  white-space:nowrap !important;
  position:relative !important;
  z-index:1 !important;
}

/* rows: 2 columns grid for perfect alignment */
.card.bottom-strip .bs-metric{
  display:grid !important;
  grid-template-columns: 1fr auto !important;
  align-items:center !important;
  column-gap: 18px !important;

  padding: 12px 0 !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;

  position:relative !important;
  z-index:1 !important;
}
.card.bottom-strip .bs-metric:first-of-type{
  border-top:none !important;
}

/* labels */
.card.bottom-strip .bs-label{
  font-size: 12.5px !important;
  opacity: .78 !important;
  letter-spacing: .25px !important;
  line-height: 1.15 !important;
}

/* values: NO wrap, ALWAYS full (RM must stay) */
.card.bottom-strip .bs-value{
  font-size: 16px !important;
  font-weight: 750 !important;
  text-align: right !important;
  white-space: nowrap !important;     /* ✅ never break line */
  letter-spacing: .2px !important;
  color: #e7c66a !important;
  text-shadow: 0 0 12px rgba(231,198,106,.16) !important;
}

/* -------------------- Mobile tuning (375 safe) -------------------- */
@media (max-width: 520px){
  /* keep full width and compact padding */
  .card.bottom-strip .bs-wrap{ padding:14px !important; }
  .card.bottom-strip .bs-left{ padding:14px !important; border-radius:14px !important; }

  /* IMPORTANT: keep value size (no shrinking), instead reduce label footprint */
  .card.bottom-strip .bs-label{
    font-size: 12px !important;
  }
  .card.bottom-strip .bs-metric{
    column-gap: 12px !important;
    padding: 10px 0 !important;
  }

  /* keep RM always fully visible */
  .card.bottom-strip .bs-value{
    font-size: 16px !important;       /* ✅ not smaller */
    white-space: nowrap !important;
  }
}

/* Ultra small safety (<=360): still do NOT shrink value, give it room by tightening gaps */
@media (max-width: 360px){
  .card.bottom-strip .bs-metric{ column-gap: 10px !important; }
  .card.bottom-strip .bs-label{ font-size: 11.5px !important; }
}

/* ===== bottom-strip: FULL WIDTH + CLEAN (paste at VERY bottom) ===== */

/* 外層 bottom-strip 卡：不要再畫一層框（只留內容那層） */
.card.bottom-strip{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* 內層 wrap：不要再多一層 padding 造成“套娃”感 */
.card.bottom-strip .bs-wrap{
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* 真正顯示的 Global Sync 面板：撐滿、只留一層高級框 */
.card.bottom-strip .bs-left{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;

  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.14)) !important;
  border: 1px solid rgba(245,197,66,.16) !important;
  border-radius: 16px !important;
  padding: 18px !important;

  box-shadow:
    0 16px 46px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.05) !important;

  overflow: hidden !important;
}

/* 如果你之前 bs-left 有 ::before/::after 做光暈，保留也行；想更乾淨就關掉 */
.card.bottom-strip .bs-left::before,
.card.bottom-strip .bs-left::after{
  opacity: .55 !important; /* 想更“乾淨”就改 0 */
}

/* 讓內容更像 dashboard（不會縮在中間） */
.card.bottom-strip .bs-title,
.card.bottom-strip .bs-metric{
  position: relative !important;
  z-index: 1 !important;
}

/* 手機：拉滿 + 稍微更長（不縮字） */
@media (max-width: 520px){
  .card.bottom-strip .bs-left{
    padding: 16px !important;
    min-height: 160px !important; /* ✅ 視覺更“長” */
    border-radius: 14px !important;
  }
  .card.bottom-strip .bs-metric{
    padding: 12px 0 !important; /* 行距更舒服 */
  }
}
/* ===== bottom-strip: REMOVE EMPTY COLUMN (paste at VERY bottom) ===== */

/* 只保留 section1：直接把版型變單欄，空位就消失 */
.card.bottom-strip .bs-wrap{
  display:block !important;          /* ✅ 不要 grid/flex 兩欄 */
  grid-template-columns: none !important;
  gap: 0 !important;
  padding: 0 !important;
}

/* 保險：右欄整個關掉 */
.card.bottom-strip .bs-right{
  display:none !important;
}

/* 左欄滿寬 */
.card.bottom-strip .bs-left{
  width:100% !important;
  max-width:none !important;
}

/* ===== bottom-strip FIX EMPTY SPACE (PASTE AT VERY BOTTOM) ===== */

/* 关键：不要继承 .card 的 display:flex */
.card.bottom-strip{
  display:block !important;
}

/* 让唯一的内容容器撑满 */
.card.bottom-strip .bs-wrap{
  display:block !important;
  width:100% !important;
}

/* 保险：右侧永远隐藏 */
.card.bottom-strip .bs-right{
  display:none !important;
}

/* 保险：左侧一定满宽 */
.card.bottom-strip .bs-left{
  width:100% !important;
  max-width:none !important;
}


/* ===== Bottom-strip dashboard polish (GLOBAL SYNC) ===== */

/* 讓 bottom-strip 本體變成「單一面板」不套娃 */
.card.bottom-strip{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.card.bottom-strip .bs-wrap{
  display:block !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 主面板：Dashboard 感 + 更乾淨 */
.card.bottom-strip .bs-left{
  width: 100% !important;
  max-width: none !important;

  border-radius: 18px !important;
  padding: 18px 18px 16px !important;

  background:
    radial-gradient(520px 220px at 20% 0%, rgba(246,210,122,.12), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.18)) !important;

  border: 1px solid rgba(246,210,122,.16) !important;

  box-shadow:
    0 16px 46px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.06) !important;

  position: relative !important;
  overflow: hidden !important;
}

/* 角落淡淡的「掃光」+ 呼吸（非常克制） */
.card.bottom-strip .bs-left::after{
  content:"";
  position:absolute;
  inset:-40% -30% auto -30%;
  height: 220px;
  background: radial-gradient(circle at 45% 45%, rgba(246,210,122,.18), rgba(246,210,122,0) 62%);
  filter: blur(10px);
  opacity: .55;
  pointer-events:none;
  animation: bsBreathe 5.6s ease-in-out infinite;
}

/* 呼吸動畫：只有陰影/亮度輕微變化 */
@keyframes bsBreathe{
  0%,100%{ opacity:.40; transform: translateY(0); }
  50%    { opacity:.62; transform: translateY(2px); }
}

/* 標題：Dashboard header */
.card.bottom-strip .bs-title{
  display:flex !important;
  align-items:center !important;
  gap: 8px !important;

  margin: 0 0 14px 0 !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  letter-spacing: .35px !important;
  color: rgba(255,255,255,.92) !important;

  position:relative !important;
  z-index: 2 !important;
}

/* icon 小一點、像系統狀態 */
.card.bottom-strip .bs-ico{
  display:inline-flex;
  width: 24px;
  height: 24px;
  align-items:center;
  justify-content:center;

  border-radius: 8px;
  background: rgba(246,210,122,.10);
  border: 1px solid rgba(246,210,122,.16);
  box-shadow: 0 10px 18px rgba(0,0,0,.25);

  font-size: 14px;
  line-height: 1;
}

/* 每行：更像 dashboard list row */
.card.bottom-strip .bs-metric{
  display:grid !important;
  grid-template-columns: 1fr auto !important;
  align-items:center !important;
  column-gap: 16px !important;

  padding: 12px 0 !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;

  position:relative !important;
  z-index: 2 !important;
}
.card.bottom-strip .bs-metric:first-of-type{
  border-top: none !important;
}

/* label：更乾淨 */
.card.bottom-strip .bs-label{
  font-size: 12.5px !important;
  opacity: .78 !important;
  letter-spacing: .2px !important;
}

/* value：金色更沉穩、靠右、不換行 */
.card.bottom-strip .bs-value{
  font-size: 16px !important;
  font-weight: 800 !important;
  text-align: right !important;
  white-space: nowrap !important;

  color: rgba(246,210,122,.95) !important;
  text-shadow: 0 0 14px rgba(246,210,122,.14) !important;
}

/* 手機：更「長」一點、但不縮字 */
@media (max-width: 520px){
  .card.bottom-strip .bs-left{
    padding: 16px !important;
    min-height: 160px !important;
    border-radius: 16px !important;
  }
  .card.bottom-strip .bs-metric{
    padding: 12px 0 !important;
  }
}

@keyframes goldBreath{
  0%,100%{
    color:#e7c66a;
    text-shadow:0 0 10px rgba(231,198,106,.14);
  }
  50%{
    color:#ffe3a0;
    text-shadow:0 0 18px rgba(246,210,122,.38);
  }
}

.card.bottom-strip #todayWithdraw{
  animation: goldBreath 3.4s ease-in-out infinite !important;
}

/* ===== FORCE BREATH ON RM LINE (PASTE AT VERY BOTTOM) ===== */
#todayWithdraw{
  display: inline-block !important;
  animation: goldBreath 3.4s ease-in-out infinite !important;
  will-change: filter, text-shadow, opacity, transform;
}

@keyframes goldBreath{
  0%,100%{
    opacity: .92;
    text-shadow: 0 0 10px rgba(231,198,106,.14);
    filter: drop-shadow(0 0 0 rgba(0,0,0,0));
    transform: translateZ(0);
  }
  50%{
    opacity: 1;
    text-shadow: 0 0 18px rgba(246,210,122,.42);
    filter: drop-shadow(0 0 10px rgba(246,210,122,.18));
    transform: translateZ(0);
  }
}

/* ===== Premium breathing for Withdraw value ===== */

#todayWithdraw{
  display: inline-block !important;
  animation: goldBreath 3.6s cubic-bezier(.45,.05,.55,.95) infinite !important;
  will-change: transform, text-shadow, opacity;
  transform-origin: right center; /* 從右邊縮放，比較像數字在呼吸 */
}

@keyframes goldBreath{
  0%, 100%{
    opacity: .92;
    transform: scale(1);
    text-shadow: 0 0 10px rgba(231,198,106,.14);
  }

  50%{
    opacity: 1;
    transform: scale(1.035); /* ✅ 關鍵：只放大 3.5%，很優雅 */
    text-shadow: 
      0 0 22px rgba(246,210,122,.45),
      0 0 8px rgba(246,210,122,.25);
  }
}

/* PROMOSI（offers）右側氛圍背景：半透明 + 左到右漸隱 */
.promo-card.promo-offers{
  position: relative;
  overflow: hidden; /* 確保不溢出圓角 */
}

.promo-card.promo-offers::before{
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  bottom: 10px;

  /* 控制出現在右側那塊區域：你可以改成 45%/55% */
  width: 58%;

  background-image: url("img/promo-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right center;

  /* 半透明 */
  opacity: 0.78;

  /* 從左到右慢慢漸變成不見（右邊消失） */
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0));
  mask-image: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0));

  pointer-events: none; /* 不擋點擊 */
  z-index: 0;
}

/* 確保文字在背景上層 */
.promo-card.promo-offers .promo-head,
.promo-card.promo-offers .promo-sub{
  position: relative;
  z-index: 1;
}

.promo-card.promo-offers{
  position: relative;
  overflow: hidden;
}

.promo-card.promo-offers::before{
  content: "";
  position: absolute;
  inset: 0;

  background-image: url("img/promo-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right center;

  opacity: 1.0;

  pointer-events: none;
  z-index: 0;
}

.promo-card.promo-offers > *{
  position: relative;
  z-index: 1;
}

/* =========================
   Bottom Dock FINAL (wrapper + bar + raised FAB)
   ========================= */

/* 讓內容不被底部 dock 擋住 */
body{
  padding-bottom: 170px;
}

/* 外層 wrapper：透明、只負責定位，允許凸起 */
.bottom-dock{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 10px;
  width: min(560px, calc(100vw - 24px));
  z-index: 999999;

  /* 允許 FAB 往上突出 */
  overflow: visible;
  pointer-events: none; /* 讓 wrapper 本身不擋點擊 */
}

/* 內層 bar：真正的玻璃條，負責 baseline 對齊 */
.bottom-dock .dock-bar{
  height: 66px;
  border-radius: 18px;

  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  border: 1px solid rgba(255, 215, 120, 0.18);
  box-shadow: 0 12px 30px rgba(0,0,0,0.60);

  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  padding: 6px 10px;

  overflow: hidden; /* ✅ 文字永遠不會跑出圓角 */
  pointer-events: auto; /* bar 內可以點擊 */
  position: relative;
}

/* bar 上緣柔光分界 */
.bottom-dock .dock-bar::before{
  content:"";
  position:absolute;
  left: 10px; right: 10px;
  top: 6px;
  height: 1px;
  background: linear-gradient(to right,
    rgba(255,215,120,0),
    rgba(255,215,120,0.20),
    rgba(255,215,120,0));
  opacity: 0.9;
  pointer-events:none;
}

/* 每個 item（文字 baseline 統一在 bar 裡） */
.bottom-dock .dock-item{
  text-decoration: none;
  color: rgba(255,255,255,0.78);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
}

/* icon & text */
.bottom-dock .dock-ico{
  font-size: 28px;
  line-height: 1;
  transform: translateY(-1px);
}
.bottom-dock .dock-txt{
  font-size: 11px;
  color: white;
  line-height: 1;
  letter-spacing: .2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 中間那格：我們用 placeholder，真正凸起按鈕由 .dock-fab 負責 */
.bottom-dock .dock-center{
  color: rgba(255, 208, 122, 0.92);
}
.bottom-dock .dock-center .dock-txt{
  font-weight: 900;
  color: #ffd88a;
}
.bottom-dock .dock-ico-placeholder{
  width: 50px;   /* 讓中間留洞給 FAB */
  height: 28px;
}

/* ===== Raised FAB (可突出) ===== */
.bottom-dock .dock-fab{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -22px;            /* ✅ 凸起高度（想更高就 -26 / -30） */

  width: 54px;
  height: 54px;
  border-radius: 16px;

  display: grid;
  place-items: center;

  background: radial-gradient(circle at 30% 20%,
    rgba(255, 218, 150, 0.36),
    rgba(0, 0, 0, 0.88) 58%,
    rgba(0, 0, 0, 0.98) 100%);

  border: 1px solid rgba(255, 215, 120, 0.30);
  box-shadow: 0 16px 26px rgba(0,0,0,0.55);

  pointer-events: auto; /* ✅ FAB 可以點 */
}

/* FAB icon（你可換成圖片） */
.bottom-dock .fab-ico{
  font-size: 30px;
  line-height: 1;
  filter: drop-shadow(0 0 10px rgba(0, 255, 160, 0.22));
}
.bottom-dock .fab-img{
  width: 26px;
  height: 26px;
  display: block;
}

/* 呼吸燈 */
.bottom-dock .dock-fab::before{
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 18px;

  border: 2px solid rgba(0, 255, 160, 0.34);
  box-shadow:
    0 0 18px rgba(0, 255, 160, 0.24),
    0 0 34px rgba(0, 255, 160, 0.14);

  animation: dockBreath 1.8s ease-in-out infinite;
  pointer-events:none;
}

.bottom-dock .dock-fab::after{
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 12px;

  background: radial-gradient(circle,
    rgba(0, 255, 160, 0.14) 0%,
    rgba(0, 255, 160, 0.04) 52%,
    rgba(0, 0, 0, 0) 74%);

  animation: dockGlow 1.8s ease-in-out infinite;
  pointer-events:none;
}

@keyframes dockBreath{
  0%   { opacity: .55; transform: scale(.985); }
  50%  { opacity: 1;   transform: scale(1.03); }
  100% { opacity: .55; transform: scale(.985); }
}
@keyframes dockGlow{
  0%   { opacity: .45; }
  50%  { opacity: .90; }
  100% { opacity: .45; }
}

/* iPhone safe-area */
@supports (padding: max(0px)){
  .bottom-dock{
    bottom: max(0px, env(safe-area-inset-bottom));
  }
}

/* ===== Desktop (PC): full-width bar, but buttons align to content center ===== */
@media (min-width: 900px){

  /* 1) wrapper full width + stick to bottom */
  .bottom-dock{
    left: 0 !important;
    transform: none !important;
    width: 100vw !important;
    bottom: 0 !important;
  }

  /* 2) bar full width + remove rounded corner */
  .bottom-dock .dock-bar{
    width: 100vw !important;
    border-radius: 0 !important;
    padding: 10px 0 !important;
  }

  /* 3) IMPORTANT: keep the 5 buttons in a centered "content width" zone */
  .bottom-dock .dock-bar{
    --dockContentWidth: 900px;  /* ✅ 你紅框內容區寬度，常見 960/1080/1100/1200 */
    padding-left: max(16px, calc((100vw - var(--dockContentWidth)) / 2)) !important;
    padding-right: max(16px, calc((100vw - var(--dockContentWidth)) / 2)) !important;
  }

  /* 4) Center raised button also matches the same centerline */
  .bottom-dock .dock-fab{
    top: -22px !important;
  }
}

/* ===== Mobile: make game banners always fit (no weird cropping) ===== */
@media (max-width: 600px){

  /* 你那些 banner 常見會是 img 或 background-image，兩邊都照顧 */
  .game-banner, .game-item, .media-slice, .media-item, .slot-banner,
  .game-card, .provider-card, .provider-item{
    border-radius: 18px;
  }

  /* 如果是用 background-image 的 banner */
  .game-banner, .game-item, .media-slice, .slot-banner,
  .game-card, .provider-card, .provider-item{
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    /* 高度用比例：你可以微調這個數字 */
    aspect-ratio: 360 / 110;  /* ✅ 大約是你那種長條 banner 的比例 */
    height: auto !important;
  }

  /* 如果是 <img> 方式 */
  .game-banner img, .game-item img, .media-slice img, .slot-banner img,
  .game-card img, .provider-card img, .provider-item img{
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block;
  }
}

/* ===== FIX: Promotions banner mobile crop ===== */
@media (max-width: 480px){

  /* 1) 先把所有可能把內容往左推的效果清掉 */
  .promo-banner{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    translate: none !important; /* 新版瀏覽器 */
  }

  /* 2) 如果你 banner 是用 background 做底圖，確保不會偏移 */
  .promo-banner{
    background-position: center !important;
    background-size: cover !important;
  }

  /* 3) 讓文字區不要被擠爆（一定要 min-width:0 才能在 flex 裡正常縮） */
  .promo-banner .banner-text{
    min-width: 0;
    flex: 1 1 auto;
  }

  /* 4) 右側角色/圖固定寬度，避免把文字往左推爆 */
  .promo-banner .banner-hero{
    flex: 0 0 96px;
    width: 96px;
    height: 96px;
  }
  .promo-banner .banner-hero img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }
}

/* ===== FIX: Promo modal banner image not cropped on mobile ===== */
@media (max-width: 520px){
  /* 你的大圖容器 */
  .promo-banner-media{
    background: rgba(0,0,0,.35) !important; /* 給 contain 留黑底更好看 */
  }

  /* 关键：手机改成 contain，不裁切 */
  .promo-banner-media img{
    object-fit: contain !important;
    object-position: center center !important;
  }
}

html{ scroll-behavior: smooth; }
#topupPromo{ scroll-margin-top: 90px; } /* 90 可調 */

/* ===== SEO hidden (still readable by crawler) ===== */
.seo-only{
  position: absolute !important;
  left: -99999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;

  /* modern clip */
  clip-path: inset(50%) !important;
  /* legacy clip */
  clip: rect(0 0 0 0) !important;

  white-space: nowrap !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (max-width: 560px){
  .media-main{
    background: rgba(0,0,0,.35);
  }
  .media-main img{
    object-fit: contain;
    object-position: center;
  }
}