@charset "UTF-8";
/* ================================================================
   RSG Casino /action/ — base.css
   取代式改版用。只被 includes/head_clean.php 載入,
   舊的 style.css / member.css / marquee.css / fixmenu.css 一個字都沒動,
   舊樣板繼續吃舊樣式。還原 = 控制器指回舊樣板。
   ================================================================ */

/* ---------------------------------------------------------------- 設計 token
   這站自己的一套尺度(天條 37),不與其他站共用。 */
:root{
  /* 深藍黑金 — 取自站上現行配色 */
  --bg:#070c18;
  --bg-2:#0b1225;
  --surface:#101b33;
  --surface-2:#16233f;
  --surface-3:#1d2c4d;
  --line:#26355a;
  --line-2:#33456f;

  --gold:#f2b736;
  --gold-hi:#ffd062;
  --gold-dk:#b8830f;
  --gold-ink:#0a1020;      /* 金底上的字 */

  --ink:#f0f4fd;
  --ink-2:#a9b6d1;
  --ink-3:#7688a8;

  --ok:#3ecf8e;
  --warn:#f2a03d;
  --bad:#f2596b;

  /* 間距尺度 — 全站只從這裡取值 */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:88px;

  /* 區塊上間距(天條 38:只設上方) */
  --block:56px;

  --r-s:8px; --r-m:12px; --r-l:18px;
  --shadow:0 10px 30px rgba(0,0,0,.45);
  --container:1200px;

  --font-th:"Noto Sans Thai","Bai Jamjuree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-dis:"Bai Jamjuree","Noto Sans Thai",system-ui,sans-serif;
}

/* ---------------------------------------------------------------- 基礎 */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-th);
  font-size:16px;                 /* 天條 34:內文不小於 16px */
  line-height:1.7;
  overflow-x:hidden;              /* 只擋橫向,不用在 fixed 祖先上 */
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{font-family:var(--font-dis);margin:0;line-height:1.3;text-wrap:balance}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* 滿版區塊 + 限寬內容(天條 39) */
.rs-sect{width:100%;margin-top:var(--block)}
.rs-sect--flush{margin-top:0}
.rs-wrap{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--s4)}

.rs-h2{font-size:24px;font-weight:700;letter-spacing:-.01em}
.rs-h2 span{color:var(--gold)}
.rs-sub{margin:var(--s2) 0 0;color:var(--ink-3);font-size:15px}
.rs-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4);margin-bottom:var(--s5)}
.rs-more{
  font-size:14px;color:var(--gold);white-space:nowrap;
  min-height:44px;display:inline-flex;align-items:center;   /* 觸控目標 */
}

/* ---------------------------------------------------------------- 按鈕 */
.rs-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:48px;padding:0 var(--s5);
  border:1px solid transparent;border-radius:var(--r-s);
  font-family:var(--font-dis);font-size:16px;font-weight:600;
  cursor:pointer;transition:filter .18s ease,background .18s ease;
}
.rs-btn--gold{background:linear-gradient(180deg,var(--gold-hi),var(--gold));color:var(--gold-ink)}
.rs-btn--gold:hover{filter:brightness(1.07)}
.rs-btn--ghost{background:transparent;border-color:var(--line-2);color:var(--ink)}
.rs-btn--ghost:hover{background:var(--surface-2);border-color:var(--gold-dk)}
.rs-btn--sm{min-height:44px;padding:0 var(--s4);font-size:15px}
.rs-btn--block{width:100%}

/* ---------------------------------------------------------------- 頁首 */
.rs-header{
  position:sticky;top:0;z-index:900;width:100%;
  background:linear-gradient(180deg,#0d1932,#0a142a);
  border-bottom:1px solid var(--line);
}
.rs-header__in{
  max-width:var(--container);margin:0 auto;padding:var(--s3) var(--s4);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
}
.rs-logo{display:flex;align-items:center;min-height:44px}
.rs-logo img{height:38px;width:auto}
.rs-nav{display:flex;align-items:center;gap:var(--s5)}
.rs-nav a{
  font-size:15px;color:var(--ink-2);min-height:44px;display:inline-flex;align-items:center;
  border-bottom:2px solid transparent;
}
.rs-nav a:hover,.rs-nav a[aria-current="page"]{color:var(--gold);border-bottom-color:var(--gold)}
.rs-head-act{display:flex;align-items:center;gap:var(--s2)}

/* 登入後:頁首餘額 */
.rs-purse{
  display:flex;align-items:center;gap:var(--s3);
  background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-s);
  padding:var(--s2) var(--s4);min-height:44px;
}
.rs-purse__lb{font-size:12px;color:var(--ink-3);letter-spacing:.04em}
.rs-purse__n{font-family:var(--font-dis);font-size:18px;font-weight:700;color:var(--gold);font-variant-numeric:tabular-nums}
.rs-purse__u{font-size:12px;color:var(--ink-3)}

/* ---------------------------------------------------------------- 公告條 */
.rs-notice{
  width:100%;background:var(--bg-2);border-bottom:1px solid var(--line);
}
.rs-notice__in{
  max-width:var(--container);margin:0 auto;padding:var(--s2) var(--s4);
  display:flex;align-items:center;gap:var(--s3);overflow:hidden;
}
.rs-notice__tag{
  flex:none;font-size:12px;font-weight:600;letter-spacing:.06em;
  color:var(--gold-ink);background:var(--gold);border-radius:99px;padding:2px var(--s3);
}
.rs-notice__txt{
  flex:1;min-width:0;font-size:14px;color:var(--ink-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ---------------------------------------------------------------- 主視覺
   線上 banner 資料目前是空的,所以主視覺不靠圖片撐,
   資料補上後 .rs-hero__art 會換成輪播。 */
.rs-hero{
  width:100%;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(120% 90% at 82% 12%, rgba(242,183,54,.16), transparent 58%),
    radial-gradient(90% 80% at 8% 88%, rgba(45,86,170,.30), transparent 60%),
    linear-gradient(180deg,#0d1a35,#070c18);
}
.rs-hero__in{
  max-width:var(--container);margin:0 auto;padding:var(--s8) var(--s4);
  display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s7);align-items:center;
}
.rs-hero__eyebrow{
  font-family:var(--font-dis);font-size:12px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);margin:0 0 var(--s3);
}
.rs-hero h1{font-size:40px;font-weight:700;margin:0 0 var(--s4)}
.rs-hero h1 em{font-style:normal;color:var(--gold)}
.rs-hero p{margin:0 0 var(--s5);color:var(--ink-2);font-size:17px;max-width:38ch}
.rs-hero__pts{display:flex;flex-direction:column;gap:var(--s2);margin:0 0 var(--s6)}
.rs-hero__pts li{
  display:flex;align-items:flex-start;gap:var(--s3);
  font-size:15.5px;color:var(--ink-2);
}
.rs-hero__pts li::before{
  content:"";flex:none;width:7px;height:7px;margin-top:.62em;border-radius:2px;
  background:var(--gold);transform:rotate(45deg);
}
.rs-hero__cta{display:flex;flex-wrap:wrap;gap:var(--s3)}
/* 主視覺右側的精選遊戲卡。WP 端的遊戲圖是 300×450 直式,照它的比例擺。 */
.rs-hero__art{display:flex;justify-content:flex-end}
.rs-feature{
  position:relative;width:100%;max-width:320px;
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-l);
  overflow:hidden;box-shadow:var(--shadow);
}
.rs-feature__pic{position:relative;aspect-ratio:2/3;background:var(--surface-3)}
.rs-feature__pic img{width:100%;height:100%;object-fit:cover}
.rs-feature__badge{
  position:absolute;left:var(--s3);top:var(--s3);z-index:2;
  background:var(--gold);color:var(--gold-ink);
  font-family:var(--font-dis);font-size:12px;font-weight:700;letter-spacing:.06em;
  padding:var(--s1) var(--s3);border-radius:var(--r-s);
}
.rs-feature__body{padding:var(--s4)}
.rs-feature__n{font-family:var(--font-dis);font-size:18px;font-weight:600}
.rs-feature__x{font-size:13px;color:var(--gold);margin:2px 0 var(--s3);font-variant-numeric:tabular-nums}

/* 數據條 */
.rs-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  margin-top:var(--s7);background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;
}
.rs-stat{background:var(--surface);padding:var(--s4) var(--s3);text-align:center}
.rs-stat b{
  display:block;font-family:var(--font-dis);font-size:22px;font-weight:700;color:var(--gold);
  font-variant-numeric:tabular-nums;
}
.rs-stat span{display:block;font-size:13px;color:var(--ink-3);margin-top:2px}

/* ---------------------------------------------------------------- 錢包(登入後) */
.rs-purse-card{
  display:grid;grid-template-columns:1fr auto;gap:var(--s5);align-items:center;
  background:linear-gradient(135deg,var(--surface-2),var(--surface));
  border:1px solid var(--line-2);border-radius:var(--r-l);padding:var(--s5) var(--s6);
}
.rs-purse-card__lb{font-size:13px;color:var(--ink-3);letter-spacing:.04em}
.rs-purse-card__n{
  font-family:var(--font-dis);font-size:38px;font-weight:700;color:var(--gold);
  line-height:1.2;font-variant-numeric:tabular-nums;
}
.rs-purse-card__n small{font-size:16px;color:var(--ink-3);margin-left:var(--s2)}
.rs-purse-card__act{display:flex;gap:var(--s3)}

/* ---------------------------------------------------------------- 遊戲分類 */
.rs-tabs{display:flex;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s5)}
.rs-tab{
  display:flex;align-items:center;gap:var(--s2);
  min-height:48px;padding:0 var(--s5);
  background:var(--surface);border:1px solid var(--line);border-radius:99px;
  color:var(--ink-2);font-size:15px;font-weight:500;cursor:pointer;
  transition:border-color .18s ease,color .18s ease,background .18s ease;
}
.rs-tab img{width:22px;height:22px;object-fit:contain;flex:none}
.rs-tab:hover{border-color:var(--line-2);color:var(--ink)}
.rs-tab.is-on{background:var(--gold);border-color:var(--gold);color:var(--gold-ink);font-weight:600}
.rs-tab.is-on img{filter:brightness(0) saturate(100%)}

.rs-panel{display:none}
.rs-panel.is-on{display:block}

/* 遊戲卡格線 — 欄數由樣板依實際張數帶進 --cols,不留落單尾巴(天條 55) */
.rs-games{
  display:grid;gap:var(--s4);
  grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));
}
/* 只有一兩張的時候,欄數收成 1 會讓那張卡撐滿整列、圖被拉爆。
   給每欄一個上限、靠左排 —— 卡片尺寸跟四張時一樣。 */
.rs-games--few{
  grid-template-columns:repeat(var(--cols,1),minmax(0,282px));
  justify-content:start;
}
.rs-game{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);
  overflow:hidden;transition:border-color .18s ease,transform .18s ease;
}
.rs-game:hover{border-color:var(--gold-dk);transform:translateY(-2px)}
.rs-game__pic{position:relative;aspect-ratio:5/3;background:var(--surface-3)}
.rs-game__pic img{width:100%;height:100%;object-fit:cover}
.rs-game__x{
  position:absolute;right:var(--s2);top:var(--s2);
  background:rgba(7,12,24,.86);color:var(--gold);
  font-family:var(--font-dis);font-size:12px;font-weight:600;
  padding:2px var(--s2);border-radius:var(--r-s);
}
.rs-game__body{padding:var(--s3) var(--s4) var(--s4)}
.rs-game__n{
  font-size:15px;font-weight:500;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:2.6em;
}
.rs-game__go{
  margin-top:var(--s3);display:flex;align-items:center;justify-content:center;
  min-height:44px;border-radius:var(--r-s);
  background:var(--surface-3);color:var(--gold);font-size:14px;font-weight:600;
}
.rs-game:hover .rs-game__go{background:var(--gold);color:var(--gold-ink)}

/* 空狀態:資料還沒補時不開天窗 */
.rs-empty{
  border:1px dashed var(--line-2);border-radius:var(--r-m);
  padding:var(--s7) var(--s5);text-align:center;color:var(--ink-3);font-size:15px;
}

/* ---------------------------------------------------------------- 優惠 */
.rs-promos{display:grid;gap:var(--s4);grid-template-columns:repeat(3,1fr)}
.rs-promo{
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:0 var(--r-m) var(--r-m) 0;padding:var(--s5);
}
.rs-promo h3{font-size:18px;font-weight:600;margin-bottom:var(--s2)}
.rs-promo p{margin:0;color:var(--ink-2);font-size:14.5px}

/* ---------------------------------------------------------------- 客服 */
.rs-help{
  display:grid;grid-template-columns:1fr auto;gap:var(--s5);align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);
  padding:var(--s6);
}
.rs-help h2{font-size:22px;margin-bottom:var(--s2)}
.rs-help p{margin:0;color:var(--ink-2);font-size:15px}
.rs-help__act{display:flex;gap:var(--s3);flex-wrap:wrap}

/* ---------------------------------------------------------------- 頁尾:單行(天條 40) */
.rs-footer{
  width:100%;margin-top:var(--block);
  background:var(--bg-2);border-top:1px solid var(--line);
}
.rs-footer__in{
  max-width:var(--container);margin:0 auto;padding:var(--s5) var(--s4);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;
}
.rs-footer img{height:30px;width:auto}
.rs-footer nav{display:flex;gap:var(--s5);flex-wrap:wrap}
.rs-footer nav a{
  font-size:14px;color:var(--ink-2);min-height:32px;display:inline-flex;align-items:center;
}
.rs-footer nav a:hover{color:var(--gold)}
.rs-footer__cr{font-size:13px;color:var(--ink-3)}

/* ---------------------------------------------------------------- 手機底部固定導覽 */
.rs-bnav{
  position:fixed;left:0;right:0;bottom:0;z-index:950;display:none;
  background:rgba(11,18,37,.97);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.rs-bnav ul{display:grid;grid-auto-flow:column;grid-auto-columns:1fr}
.rs-bnav a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:56px;padding:var(--s2) 2px;font-size:11px;color:var(--ink-2);text-align:center;
}
.rs-bnav img{width:22px;height:22px;object-fit:contain}
.rs-bnav a.is-key{color:var(--gold)}
.rs-bnav a.is-key img{filter:drop-shadow(0 0 4px rgba(242,183,54,.5))}

/* ---------------------------------------------------------------- 彈窗
   #authModal 是既有的登入/註冊彈窗,HTML 與 JS 原封不動沿用。
   新版不載 style.css,樣式在這裡重建。
   關鍵:預設一定要 display:none,不然整塊會攤在頁面上、還吃掉全頁點擊。 */
#authModal{
  display:none;position:fixed;inset:0;z-index:1200;
  background:rgba(4,7,15,.78);
  overflow-y:auto;padding:var(--s5) var(--s4);
}
#authModal .modal-box{
  position:relative;width:100%;max-width:420px;margin:6vh auto;
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-l);
  padding:var(--s6) var(--s5) var(--s5);box-shadow:var(--shadow);
}
#authModal .close_m{
  position:absolute;right:var(--s3);top:var(--s2);
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  font-size:26px;line-height:1;color:var(--ink-3);cursor:pointer;
}
#authModal .close_m:hover{color:var(--ink)}
#authModal .tab-header{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2);margin-bottom:var(--s5)}
#authModal .tab-btn{
  min-height:48px;border:1px solid var(--line);border-radius:var(--r-s);
  background:var(--surface-2);color:var(--ink-2);font-size:15px;font-weight:600;cursor:pointer;
}
#authModal .tab-btn.active{background:var(--gold);border-color:var(--gold);color:var(--gold-ink)}
#authModal .tab-content h5{font-size:16px;font-weight:600;margin:0 0 var(--s1)}
#authModal .tab-content > span{display:block;color:var(--ink-3);font-size:13.5px;margin-bottom:var(--s4)}
#authModal form{margin:0 !important}
#authModal input[type=text],
#authModal input[type=password],
#authModal input[type=tel],
#authModal select{
  width:100%;min-height:48px;margin-bottom:var(--s3);padding:0 var(--s4);
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-s);
  color:var(--ink);font-size:16px;font-family:inherit;
}
#authModal input::placeholder{color:var(--ink-3)}
#authModal input:focus,#authModal select:focus{border-color:var(--gold-dk);outline:none}
#authModal button.login,
#authModal button.register{
  width:100%;min-height:50px;margin-top:var(--s2);
  background:linear-gradient(180deg,var(--gold-hi),var(--gold));color:var(--gold-ink);
  border:0;border-radius:var(--r-s);font-size:16px;font-weight:700;cursor:pointer;
}
#authModal .btn-danger{
  width:100%;min-height:44px;margin-bottom:var(--s3);
  background:var(--surface-3);border:1px solid var(--line-2);border-radius:var(--r-s);
  color:var(--ink);font-size:15px;cursor:pointer;
}
#authModal .alert{
  border-radius:var(--r-s);padding:var(--s3);font-size:14px;margin-bottom:var(--s3);
  background:rgba(242,89,107,.12);border:1px solid rgba(242,89,107,.4);color:#ffc2c9;
}
#authModal a{color:var(--gold);font-size:14px}

/* 表單寫死了 was-validated,一進頁面每個必填欄位就先跳紅字。
   HTML 不動,改用 :user-invalid — 使用者動過欄位才提示。 */
#authModal .was-validated input:invalid,
#authModal .was-validated select:invalid{border-color:var(--line)}
#authModal .was-validated input:user-invalid,
#authModal .was-validated select:user-invalid{border-color:var(--bad)}
#authModal .invalid-feedback{display:none;color:var(--bad);font-size:13px;margin:-8px 0 var(--s3)}
#authModal input:user-invalid ~ .invalid-feedback,
#authModal select:user-invalid ~ .invalid-feedback{display:block}
#authModal .valid-feedback{display:none}

/* ---------------------------------------------------------------- 收掉舊版元件
   footer.php 照常載入(表單、彈窗、功能 JS 全部沿用),
   但它自己那套頁尾/導覽/浮條由新版取代,這裡收起來。 */
.rs-v2 ~ #footer,
body.rs-v2-body #footer,
body.rs-v2-body .ft-navbar,
body.rs-v2-body #mobNav,
body.rs-v2-body .fixmenu,
body.rs-v2-body #indexShowBox,
body.rs-v2-body .modal-backdrop,
body.rs-v2-body .back-to-top{display:none !important}
/* 舊的 Bootstrap 登入彈窗要收掉,但它的 id 跟 authModal 裡的登入分頁撞名
   (兩個都是 #login),選擇器一定要帶 .modal 把它們分開,
   不然新彈窗的登入表單會跟著消失。 */
body.rs-v2-body #login.modal{display:none !important}

/* ---------------------------------------------------------------- 平板 768–1024 */
@media (max-width:1024px){
  :root{--block:44px}
  /* 平板放得下兩欄,不要塌成單欄留一大片空白 */
  .rs-hero__in{grid-template-columns:1.05fr .95fr;gap:var(--s5);padding:var(--s7) var(--s4)}
  .rs-hero h1{font-size:32px}
  .rs-hero p{font-size:16px}
  .rs-hero__pts li{font-size:14.5px}
  .rs-feature{max-width:290px}
  .rs-games{grid-template-columns:repeat(var(--cols-tb,3),minmax(0,1fr))}
  .rs-games--few{grid-template-columns:repeat(var(--cols-tb,1),minmax(0,262px))}
  .rs-help{grid-template-columns:1fr;gap:var(--s4)}
  /* 優惠固定三張,平板維持三欄;拆成兩欄會剩一張落單(天條 55) */
}

/* ---------------------------------------------------------------- 手機 <768 */
@media (max-width:767px){
  :root{--block:36px}
  body{padding-bottom:72px}           /* 讓開底部固定導覽 */
  .rs-wrap,.rs-header__in,.rs-notice__in,.rs-footer__in,.rs-hero__in{padding-left:var(--s4);padding-right:var(--s4)}

  .rs-nav{display:none}
  .rs-logo img{height:32px}
  .rs-header__in{padding:var(--s2) var(--s4)}

  .rs-hero__in{grid-template-columns:1fr;padding:var(--s6) var(--s4);gap:var(--s5)}
  .rs-hero h1{font-size:27px}
  .rs-hero p{font-size:16px;margin-bottom:var(--s5)}
  .rs-hero__cta{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
  .rs-hero__cta .rs-btn{width:100%}
  .rs-hero__art{justify-content:center}
  .rs-feature{max-width:260px}

  .rs-stats{grid-template-columns:repeat(2,1fr);margin-top:var(--s5)}

  .rs-purse-card{grid-template-columns:1fr;gap:var(--s4);padding:var(--s5)}
  .rs-purse-card__n{font-size:32px}
  .rs-purse-card__act{display:grid;grid-template-columns:1fr 1fr}

  .rs-h2{font-size:20px}
  .rs-head{margin-bottom:var(--s4)}

  /* 分類籤在手機橫向捲動,不換行擠成兩層 */
  .rs-tabs{
    flex-wrap:nowrap;overflow-x:auto;gap:var(--s2);
    margin-left:calc(var(--s4) * -1);margin-right:calc(var(--s4) * -1);
    padding:0 var(--s4) var(--s2);scrollbar-width:none;
  }
  .rs-tabs::-webkit-scrollbar{display:none}
  .rs-tab{flex:none;padding:0 var(--s4);min-height:44px}

  /* 手機一張卡撐滿整列是正常的,把桌機那條上限取消掉 */
  .rs-games,
  .rs-games--few{grid-template-columns:repeat(var(--cols-mb,2),minmax(0,1fr));gap:var(--s3)}
  .rs-game__body{padding:var(--s2) var(--s3) var(--s3)}
  .rs-game__n{font-size:14px;min-height:2.6em}

  .rs-promos{grid-template-columns:1fr}
  .rs-help{padding:var(--s5)}
  .rs-help__act{display:grid;grid-template-columns:1fr 1fr}

  .rs-footer__in{flex-direction:column;align-items:flex-start;gap:var(--s3)}
  .rs-footer nav{gap:var(--s4)}

  .rs-bnav{display:block}

  #authModal .modal-box{margin:4vh auto;padding:var(--s6) var(--s4) var(--s4)}
}

/* 很窄的機型 */
@media (max-width:360px){
  .rs-games{gap:var(--s2)}
  .rs-bnav a{font-size:10px}
}

/* ================================================================
   內頁元件 — 關於、說明、合約、客服、遊戲介紹、會員頁共用
   ================================================================ */

/* ---------------------------------------------------------------- 內頁標題帶
   滿版背景 + 限寬內容(天條 39)。首區塊貼頁首,不留上間距(天條 37)。 */
.rs-page{
  width:100%;border-bottom:1px solid var(--line);
  background:
    radial-gradient(100% 120% at 88% 0%, rgba(242,183,54,.13), transparent 60%),
    linear-gradient(180deg,#0d1a35,var(--bg));
}
.rs-page__in{
  max-width:var(--container);margin:0 auto;padding:var(--s7) var(--s4) var(--s6);
}
.rs-page__crumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);
  font-size:13px;color:var(--ink-3);margin-bottom:var(--s3);
}
.rs-page__crumb a{color:var(--ink-3);min-height:32px;display:inline-flex;align-items:center}
.rs-page__crumb a:hover{color:var(--gold)}
.rs-page__crumb span{opacity:.5}
.rs-page h1{font-size:32px;font-weight:700}
/* balance:兩行時不會留下只有一個字的第二行 */
.rs-page__sub{
  margin:var(--s3) 0 0;color:var(--ink-2);font-size:16px;
  max-width:74ch;text-wrap:balance;
}

/* ---------------------------------------------------------------- 長文
   合約、條款、說明這類整段文字。行寬壓在 68ch 內(天條 34)。 */
.rs-prose{max-width:68ch;font-size:16px;line-height:1.85;color:var(--ink-2)}
.rs-prose--wide{max-width:none}
.rs-prose h2{font-size:21px;color:var(--ink);margin:var(--s6) 0 var(--s3)}
.rs-prose h2:first-child{margin-top:0}
.rs-prose h3{
  font-size:17px;color:var(--ink);margin:var(--s5) 0 var(--s2);
  padding-left:var(--s3);border-left:3px solid var(--gold);
}
.rs-prose p{margin:0 0 var(--s4)}
.rs-prose > :last-child{margin-bottom:0}
.rs-prose ol,.rs-prose ul{margin:0 0 var(--s4);padding-left:var(--s5);list-style:decimal}
.rs-prose ul{list-style:none;padding-left:0}
.rs-prose ul li{position:relative;padding-left:var(--s5);margin-bottom:var(--s3)}
.rs-prose ul li::before{
  content:"";position:absolute;left:var(--s2);top:.68em;
  width:7px;height:7px;border-radius:2px;background:var(--gold);transform:rotate(45deg);
}
.rs-prose ol li{margin-bottom:var(--s3);padding-left:var(--s2)}
.rs-prose ol li::marker{color:var(--gold);font-family:var(--font-dis);font-weight:600}
.rs-prose strong{color:var(--ink);font-weight:600}
.rs-prose a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}

/* ---------------------------------------------------------------- 說明頁分頁
   guide 的五個主題。手機橫向捲動,不擠成兩層。 */
.rs-ptabs{
  display:flex;gap:var(--s2);flex-wrap:wrap;
  margin-bottom:var(--s5);padding-bottom:var(--s2);
  border-bottom:1px solid var(--line);
}
.rs-ptab{
  min-height:48px;padding:0 var(--s5);
  background:transparent;border:1px solid transparent;border-radius:var(--r-s);
  color:var(--ink-2);font-size:15px;font-weight:500;cursor:pointer;
  transition:color .18s ease,background .18s ease;
}
.rs-ptab:hover{color:var(--ink);background:var(--surface)}
.rs-ptab.is-on{background:var(--surface-2);border-color:var(--line-2);color:var(--gold);font-weight:600}
.rs-ppanel{display:none}
.rs-ppanel.is-on{display:block}

/* ---------------------------------------------------------------- 步驟
   存提款教學。編號本身就是順序資訊,不是裝飾。 */
/* 欄數由樣板依步驟數帶進 --cols,三步就單欄,六步排兩欄 —— 不留落單尾巴(天條 55) */
.rs-steps{
  display:grid;gap:var(--s4);counter-reset:rs-step;
  grid-template-columns:repeat(var(--cols,1),1fr);
}
.rs-step{
  display:grid;grid-template-columns:44px 1fr;gap:var(--s4);align-items:start;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);
  padding:var(--s4) var(--s5);
}
.rs-step__n{
  counter-increment:rs-step;
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface-3);border:1px solid var(--line-2);
  font-family:var(--font-dis);font-size:17px;font-weight:700;color:var(--gold);
  font-variant-numeric:tabular-nums;
}
.rs-step__n::before{content:counter(rs-step)}
.rs-step h3{font-size:17px;font-weight:600;color:var(--ink);margin-bottom:var(--s1)}
.rs-step p{margin:0;color:var(--ink-2);font-size:15px}
.rs-step p + p{margin-top:var(--s2)}

/* ---------------------------------------------------------------- 特色卡 */
.rs-cards{display:grid;gap:var(--s4);grid-template-columns:repeat(var(--cols,4),1fr)}
.rs-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);
  padding:var(--s5);
}
.rs-card h3{font-size:17px;font-weight:600;margin-bottom:var(--s2)}
.rs-card p{margin:0;color:var(--ink-2);font-size:15px}
.rs-card__k{
  font-family:var(--font-dis);font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);display:block;margin-bottom:var(--s2);
}

/* ---------------------------------------------------------------- 圖文並排
   遊戲類型與推薦遊戲。左圖右文,欄數與圖寬由樣板帶進 --cols / --pic。
   站上的遊戲圖是 300×450 直式,圖框照 2:3 開,不裁掉遊戲名。 */
.rs-media{display:grid;gap:var(--s4);grid-template-columns:repeat(var(--cols,1),1fr)}
.rs-media__row{
  display:grid;grid-template-columns:var(--pic,180px) 1fr;gap:var(--s5);align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);
  padding:var(--s5);
}
.rs-media__pic{
  aspect-ratio:2/3;border-radius:var(--r-s);overflow:hidden;background:var(--surface-3);
}
.rs-media__pic img{width:100%;height:100%;object-fit:cover}
.rs-media__row h3{font-size:19px;font-weight:600;margin-bottom:var(--s2)}
.rs-media__row p{margin:0 0 var(--s3);color:var(--ink-2);font-size:15px;max-width:58ch}
/* 倍數:是這張卡最該先看到的數字 */
.rs-media__x{
  display:block;font-family:var(--font-dis);font-size:15px;font-weight:700;color:var(--gold);
  font-variant-numeric:tabular-nums;margin-bottom:var(--s2);
}
.rs-media__meta{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s4)}
.rs-chip{
  display:inline-flex;align-items:center;min-height:32px;padding:0 var(--s3);
  background:var(--surface-3);border:1px solid var(--line-2);border-radius:99px;
  font-size:13px;color:var(--ink-2);
}
.rs-chip--gold{border-color:var(--gold-dk);color:var(--gold)}

/* ---------------------------------------------------------------- 提示框 */
.rs-note{
  display:grid;grid-template-columns:auto 1fr;gap:var(--s3);align-items:start;
  background:var(--surface-2);border:1px solid var(--line-2);border-left:3px solid var(--gold);
  border-radius:0 var(--r-s) var(--r-s) 0;padding:var(--s4);
  font-size:14.5px;color:var(--ink-2);
}
.rs-note b{color:var(--gold);font-family:var(--font-dis);font-weight:600;white-space:nowrap}
.rs-note p{margin:0}
.rs-note p + p{margin-top:var(--s2)}

/* ---------------------------------------------------------------- 會員中心導覽 */
.rs-mnav{
  display:flex;gap:var(--s2);flex-wrap:wrap;
  margin-bottom:var(--s5);padding-bottom:var(--s3);border-bottom:1px solid var(--line);
}
.rs-mnav a{
  display:inline-flex;align-items:center;gap:var(--s2);
  min-height:44px;padding:0 var(--s4);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-s);
  font-size:14.5px;color:var(--ink-2);
}
.rs-mnav a:hover{border-color:var(--line-2);color:var(--ink)}
.rs-mnav a[aria-current="page"]{
  background:var(--surface-2);border-color:var(--gold-dk);color:var(--gold);font-weight:600;
}

/* ---------------------------------------------------------------- 表單 */
.rs-form{max-width:560px}
.rs-form__grp{margin-bottom:var(--s4)}
.rs-form__lb{
  display:block;font-size:14px;color:var(--ink-2);margin-bottom:var(--s2);
}
.rs-form__lb em{font-style:normal;color:var(--bad);margin-left:2px}
.rs-form input[type=text],
.rs-form input[type=password],
.rs-form input[type=tel],
.rs-form input[type=number],
.rs-form select,
.rs-form textarea{
  width:100%;min-height:48px;padding:0 var(--s4);
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-s);
  color:var(--ink);font-size:16px;font-family:inherit;
}
.rs-form textarea{padding:var(--s3) var(--s4);line-height:1.7;resize:vertical}
.rs-form input::placeholder,.rs-form textarea::placeholder{color:var(--ink-3)}
.rs-form input:focus,.rs-form select:focus,.rs-form textarea:focus{border-color:var(--gold-dk);outline:none}
.rs-form input:disabled{background:var(--surface);color:var(--ink-3);cursor:not-allowed}
.rs-form__hint{display:block;margin-top:var(--s2);font-size:13px;color:var(--ink-3)}
/* 唯讀資料列:有值就不做成輸入框,少一層視覺噪音 */
.rs-form__ro{
  display:flex;align-items:center;min-height:48px;padding:0 var(--s4);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-s);
  color:var(--ink);font-size:16px;
}
/* 驗證碼:輸入框與圖並排,圖點一下換一張 */
.rs-vcode{display:grid;grid-template-columns:1fr auto;gap:var(--s3);align-items:stretch}
.rs-vcode img{
  height:48px;width:auto;border-radius:var(--r-s);cursor:pointer;
  border:1px solid var(--line);background:var(--surface-2);
}
.rs-form__act{margin-top:var(--s5)}
.rs-fieldset{
  margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--line);
}
.rs-fieldset > h2{font-size:19px;margin-bottom:var(--s4)}

/* ---------------------------------------------------------------- 資料表
   寬內容自己包一層水平捲動容器,頁面本身不橫捲(天條 34)。 */
.rs-tablewrap{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);
}
.rs-table{width:100%;min-width:520px;border-collapse:collapse;font-size:15px}
.rs-table th,.rs-table td{
  padding:var(--s3) var(--s4);text-align:left;border-bottom:1px solid var(--line);
}
.rs-table thead th{
  background:var(--surface-2);color:var(--ink-3);
  font-size:13px;font-weight:600;letter-spacing:.04em;white-space:nowrap;
}
.rs-table tbody tr:last-child td{border-bottom:0}
.rs-table td{color:var(--ink-2)}
.rs-table .is-num{font-variant-numeric:tabular-nums;color:var(--gold);white-space:nowrap}
.rs-table .rs-pill{
  display:inline-flex;align-items:center;min-height:28px;padding:0 var(--s3);
  border-radius:99px;font-size:13px;
}
.rs-table .rs-pill--wait{background:rgba(118,136,168,.18);color:var(--ink-3)}
.rs-table .rs-pill--done{background:rgba(62,207,142,.14);color:var(--ok)}
.rs-pager{display:flex;justify-content:center;gap:var(--s2);margin-top:var(--s4)}
.rs-pager a,.rs-pager strong{
  min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:var(--r-s);
  font-size:14px;color:var(--ink-2);background:var(--surface);
}
.rs-pager strong{background:var(--gold);border-color:var(--gold);color:var(--gold-ink)}

/* ---------------------------------------------------------------- 結果頁
   儲值代碼、提領送出這類單一結論的頁面。 */
.rs-result{
  max-width:520px;margin:0 auto;text-align:center;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);
  padding:var(--s7) var(--s5);
}
.rs-result__ic{
  width:64px;height:64px;margin:0 auto var(--s4);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(62,207,142,.14);border:1px solid rgba(62,207,142,.4);
  font-size:30px;line-height:1;color:var(--ok);
}
.rs-result h2{font-size:21px;margin-bottom:var(--s2)}
.rs-result > p{margin:0 0 var(--s5);color:var(--ink-2);font-size:15px}
.rs-result__act{display:flex;gap:var(--s3);justify-content:center;flex-wrap:wrap}
/* 代碼:要被抄下來的東西,字距拉開、等寬對齊 */
.rs-code{
  display:flex;flex-direction:column;gap:var(--s1);
  background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r-m);
  padding:var(--s4);margin-bottom:var(--s4);
}
.rs-code__lb{font-size:13px;color:var(--ink-3)}
.rs-code__v{
  font-family:var(--font-dis);font-size:26px;font-weight:700;color:var(--gold);
  letter-spacing:.08em;font-variant-numeric:tabular-nums;word-break:break-all;
}

/* ---------------------------------------------------------------- 站內信回覆彈窗
   舊版靠 Bootstrap 的 .modal,新版沒載,這裡自己來。
   預設 display:none — 少了它整塊會攤在頁面上還吃掉全頁點擊。 */
#rsReply{
  display:none;position:fixed;inset:0;z-index:1200;
  background:rgba(4,7,15,.78);overflow-y:auto;padding:var(--s5) var(--s4);
}
#rsReply.is-on{display:block}
#rsReply .rs-reply__box{
  position:relative;width:100%;max-width:520px;margin:8vh auto;
  background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-l);
  padding:var(--s6) var(--s5) var(--s5);box-shadow:var(--shadow);
}
#rsReply h2{font-size:18px;margin-bottom:var(--s4)}
#rsReply .rs-reply__body{color:var(--ink-2);font-size:15px;line-height:1.8;margin-bottom:var(--s5)}
#rsReply .rs-reply__x{
  position:absolute;right:var(--s3);top:var(--s2);
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  background:transparent;border:0;font-size:26px;line-height:1;color:var(--ink-3);cursor:pointer;
}
#rsReply .rs-reply__x:hover{color:var(--ink)}

/* 電腦版的兩欄版面。表單類的頁面單欄會讓右半邊整片空著(天條 55)。 */
.rs-cols2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s7);align-items:start}
.rs-cols2 > *{min-width:0}
.rs-cols2 .rs-form{max-width:none}
.rs-cols2 .rs-fieldset{margin-top:0;padding-top:0;border-top:0}

/* ---------------------------------------------------------------- 遊戲框
   試玩頁把廠商的遊戲塞進 iframe。高度給固定值,手機再降。 */
.rs-frame{
  width:100%;background:#000;
  border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;
}
.rs-frame iframe{display:block;width:100%;height:640px;border:0}

/* ---------------------------------------------------------------- 優惠折疊卡
   標題一直看得到,細則點開才展開 —— 活動內容長度差很多,全部攤開會很長。 */
.rs-acts{display:flex;flex-direction:column;gap:var(--s3)}
.rs-act{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);
  overflow:hidden;
}
.rs-act[open]{border-color:var(--gold-dk)}
/* 橫幅滿寬貼齊卡片邊緣,所以 summary 本身不留內距,
   內距給下面那條標題列。沒有圖的活動就只剩標題列。 */
.rs-act > summary{display:block;cursor:pointer;list-style:none}
.rs-act > summary::-webkit-details-marker{display:none}
.rs-act__head{
  display:flex;align-items:center;gap:var(--s4);
  padding:var(--s4) var(--s5);min-height:64px;
}
/* 活動橫幅:站上的圖是 2000×600,上面印著活動文字與金額 —— 一裁就看不懂,
   所以滿寬照原比例整張放,不做縮圖也不裁。後台換成別的比例照樣不會被切。 */
.rs-act__banner{
  display:block;width:100%;background:var(--surface-3);
  border-bottom:1px solid var(--line);
}
.rs-act__banner img{display:block;width:100%;height:auto}
.rs-act__t{
  flex:1;min-width:0;
  font-family:var(--font-dis);font-size:17px;font-weight:600;color:var(--ink);
}
.rs-act__x{
  flex:none;width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface-3);border:1px solid var(--line-2);color:var(--gold);
  font-size:15px;line-height:1;transition:transform .2s ease;
}
.rs-act[open] .rs-act__x{transform:rotate(45deg)}
.rs-act__body{
  padding:0 var(--s5) var(--s5);border-top:1px solid var(--line);
  padding-top:var(--s4);color:var(--ink-2);font-size:15px;line-height:1.8;
}
/* 活動細則是後台存的整份 HTML,裡面什麼標籤都有 —— 收斂一下不要撐破版面 */
.rs-act__body img{max-width:100%;height:auto;border-radius:var(--r-s);margin:var(--s3) 0}
.rs-act__body table{width:100%;border-collapse:collapse;margin:var(--s3) 0;font-size:14.5px}
.rs-act__body th,.rs-act__body td{
  padding:var(--s2) var(--s3);border:1px solid var(--line);text-align:left;
}
.rs-act__body th{background:var(--surface-2);color:var(--ink-3)}
.rs-act__body a{color:var(--gold)}
.rs-act__body p{margin:0 0 var(--s3)}
.rs-act__body > :last-child{margin-bottom:0}
.rs-act__act{
  display:flex;justify-content:flex-end;gap:var(--s3);
  margin-top:var(--s4);padding-top:var(--s4);border-top:1px solid var(--line);
}
.rs-btn--muted{
  background:var(--surface-3);border-color:var(--line-2);color:var(--ink-3);
  cursor:default;pointer-events:none;
}

/* ---------------------------------------------------------------- 內頁:平板 */
@media (max-width:1024px){
  .rs-page__in{padding:var(--s6) var(--s4) var(--s5)}
  .rs-page h1{font-size:27px}
  .rs-cards{grid-template-columns:repeat(var(--cols-tb,2),1fr)}
  .rs-media{grid-template-columns:repeat(var(--cols-tb,1),1fr)}
  .rs-media__row{grid-template-columns:var(--pic-tb,150px) 1fr;gap:var(--s4);padding:var(--s4)}
  .rs-steps{grid-template-columns:repeat(var(--cols-tb,1),1fr)}
  .rs-cols2{grid-template-columns:1fr;gap:var(--s6)}
  .rs-cols2 .rs-fieldset{
    margin-top:var(--s2);padding-top:var(--s5);border-top:1px solid var(--line);
  }
}

/* ---------------------------------------------------------------- 內頁:手機 */
@media (max-width:767px){
  .rs-page__in{padding:var(--s5) var(--s4)}
  .rs-page h1{font-size:23px}
  .rs-page__sub{font-size:15px}

  .rs-prose{font-size:15.5px}
  .rs-prose h2{font-size:19px}

  /* 分頁籤橫向捲動,跟首頁的分類籤同一套行為 */
  .rs-ptabs{
    flex-wrap:nowrap;overflow-x:auto;
    margin-left:calc(var(--s4) * -1);margin-right:calc(var(--s4) * -1);
    padding:0 var(--s4) var(--s3);scrollbar-width:none;
  }
  .rs-ptabs::-webkit-scrollbar{display:none}
  .rs-ptab{flex:none;padding:0 var(--s4);white-space:nowrap}

  .rs-step{grid-template-columns:36px 1fr;gap:var(--s3);padding:var(--s4)}
  .rs-step__n{width:36px;height:36px;font-size:15px}

  .rs-cards{grid-template-columns:repeat(var(--cols-mb,1),1fr)}
  .rs-media{grid-template-columns:1fr}
  /* 圖留在左邊,窄一點就好 —— 疊成上下會讓直式圖佔掉整個首屏 */
  .rs-media__row{grid-template-columns:110px 1fr;gap:var(--s4);padding:var(--s4)}
  .rs-media__row p{font-size:14.5px}
  .rs-steps{grid-template-columns:1fr}

  .rs-mnav{
    flex-wrap:nowrap;overflow-x:auto;
    margin-left:calc(var(--s4) * -1);margin-right:calc(var(--s4) * -1);
    padding:0 var(--s4) var(--s3);scrollbar-width:none;
  }
  .rs-mnav::-webkit-scrollbar{display:none}
  .rs-mnav a{flex:none;white-space:nowrap}

  .rs-form{max-width:none}
  .rs-form__act .rs-btn{width:100%}

  .rs-result{padding:var(--s6) var(--s4)}
  .rs-result__act{display:grid;grid-template-columns:1fr}
  .rs-code__v{font-size:22px}

  .rs-frame iframe{height:480px}
  .rs-act__head{gap:var(--s3);padding:var(--s4)}
  .rs-act__t{font-size:15.5px}
  .rs-act__body{padding:var(--s4)}
  .rs-act__act{justify-content:stretch}
  .rs-act__act .rs-btn{width:100%}
}