/* Native shell — clean robust responsive layout */
/* Display font for the ribbon badge (self-hosted); font-display:swap so it never blocks render */
@font-face{ font-family:Trujillo; src:url(/fonts/Trujillo-ExtraBold.ttf) format("truetype"); font-weight:900; font-display:swap; }
/* 2026-09-08 董事長選定「午夜青」整站色系(取代皇家紫):深青底 + 青綠重點 + 綠 CTA + 金 accent。
   血統記錄:SGD/泰國原色 body #2e1b23 / card2 #242a3d;前一版皇家紫 bg #2b111a / pink #ec3f8f / purple #b8526a。
   accent 粉紫已全換青(--pink 青 / --purple 深青);綠 CTA #70c727、金 #f6c453 保留。桌機版式在 @media(min-width:1280px)。 */
:root{ --bg:#1a0f13; --panel:#2a1820; --card:#2a1820; --card2:#33202a; --card3:#3d2833; --elev:#2a1820; --sunken:#1a0f13; --deep:#12090d; --txt:#fff; --muted:#c7b1b8;
  --green1:#fbd5c4; --green2:#c4685f; --purple:#8f3a4e; --pink:#c4685f; --pink2:#fbd5c4; --pinkd:#7a2a3c; --gold:#f6c453; --violet:#c084fc; --violet-d:#8b5cf6; --radius:14px; --col:680px;
  --grad:linear-gradient(135deg,#d98a76 0%,#b8526a 50%,#8a2f45 100%);  /* 2026-10-12 SMM MYR 換「酒紅玫瑰金」:主要按鈕漸層(玫瑰金→酒紅);起點刻意比色票 #fbd5c4 深,白字才看得清 */
  /* 背景氛圍層:漸層底 + 兩顆柔光 blob(粉/紫) + 淡點紋;--border 統一卡片描邊 */
  --grad-top:#2e1822; --grad-bot:#1a0f13; --glow1:rgba(236,77,114,.42); --glow2:rgba(255,170,140,.26); --border:rgba(255,255,255,.08); }
*{box-sizing:border-box}
/* English visitors: hide the static (Thai) labels until app.js translates them — prevents the
   Thai-then-English flash on refresh. app.js removes .rm-en-pending after applyI18n().
   text-shadow:none is required too — a transparent-color glyph still casts its shadow, so the
   Thai shape would otherwise ghost through on shadowed buttons (e.g. the green Register CTA).
   Placeholders use [data-i18n-ph] and need their own ::placeholder transparency (search box). */
html.rm-en-pending [data-i18n]{color:transparent!important;text-shadow:none!important}
html.rm-en-pending [data-i18n-ph]::placeholder{color:transparent!important}
html.rm-en-pending [data-i18n-ph]::-webkit-input-placeholder{color:transparent!important}
/* logged-in first paint: keep the static (logged-out) green Register CTA row invisible until
   app.js swaps it to Top Up/Withdraw — no green flash on hard refresh. visibility (not display)
   preserves the row height so nothing shifts. Set in the head script, removed by app.js boot. */
html.rm-pre-auth .rm-cta-inline{visibility:hidden}
html,body{margin:0;padding:0;background:var(--bg);color:var(--txt);
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-tap-highlight-color:transparent;
  /* clip horizontal overflow (the off-screen drawer etc.) so the page can't be dragged sideways;
     clip (not hidden) keeps the sticky topbar working. NOTE: no overscroll-behavior here — that
     would also disable pull-to-refresh, which we want to keep */
  overflow-x:clip;max-width:100%}
/* 背景氛圍(全站):底部漸層 + 兩顆柔光 blob。
   ⚠️ 2026-09-15:改掛在 html(畫布)而非 body,並讓 body 透明 —— 否則 body 的不透明底會蓋掉
      z-index:-1 的流星星空層(.rm-sky / body::before),整套星空/流星從來沒顯示過(這就是「背景太單調」的真因)。 */
html{background:
    linear-gradient(rgba(26,15,19,.15), rgba(26,15,19,.15)),   /* 2026-10-12 SMM MYR 方案d:壓暗層 .5→.15 + 柔光加強,讓背景有光感不再暗沉 */
    /* 2026-10-13 SMM MYR 方案d:兩顆靜態柔光拿掉,改由 body::after 流動極光層負責(兩者疊加會太亮、灰字對比度掉到 3 以下) */
    linear-gradient(180deg, var(--grad-top), var(--grad-bot));
  background-color:var(--bg)}
body{background:transparent}   /* 透明 → 底下的 html 畫布 + z-index:-1 星空層才透得出來 */
/* 2026-09-08 董事長選定「流星」背景(取代網格):極淡星空底(60px 疏點 4%)+ 流星層(.rm-sky)。
   z-index:-1 墊在內容底下,流星在卡片後方劃過(背景層,顯現在側欄邊緣/區塊空隙等背景露出處)。 */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.04) 1px,transparent 1.4px);background-size:60px 60px}
/* ===== 流星層(董事長選「背景層」模式:在內容後方,z-index:-1)===== */
.rm-sky{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:-1;opacity:.42}   /* 2026-09-15:整體降透明,星空/流星低調不搶戲 */
/* 星空:兩層(大而亮/小而密)微閃,白/青/紫三色點綴(董事長 2026-09-15:背景太單調 → 加豐富星空) */
.rm-sky::before,.rm-sky::after{content:"";position:absolute;inset:0;background-repeat:repeat}
.rm-sky::before{
  background-image:
    radial-gradient(2px 2px at 20% 24%,rgba(255,255,255,.95),transparent 60%),
    radial-gradient(1.7px 1.7px at 67% 61%,rgba(255,214,196,.9),transparent 60%),
    radial-gradient(2px 2px at 88% 17%,rgba(250,190,200,.85),transparent 60%),
    radial-gradient(1.5px 1.5px at 12% 79%,rgba(255,255,255,.82),transparent 60%),
    radial-gradient(1.7px 1.7px at 44% 47%,rgba(255,224,208,.8),transparent 60%),
    radial-gradient(1.5px 1.5px at 79% 87%,rgba(255,240,205,.82),transparent 60%);
  background-size:330px 330px;animation:rm-twk 4.6s ease-in-out infinite alternate}
.rm-sky::after{
  background-image:
    radial-gradient(1px 1px at 33% 14%,rgba(255,255,255,.6),transparent 60%),
    radial-gradient(1px 1px at 72% 39%,rgba(255,230,220,.55),transparent 60%),
    radial-gradient(1px 1px at 55% 77%,rgba(255,255,255,.5),transparent 60%),
    radial-gradient(1px 1px at 15% 54%,rgba(250,205,210,.5),transparent 60%),
    radial-gradient(1px 1px at 90% 67%,rgba(255,255,255,.55),transparent 60%),
    radial-gradient(1px 1px at 40% 29%,rgba(255,220,205,.5),transparent 60%);
  background-size:185px 185px;animation:rm-twk2 6.8s ease-in-out infinite alternate}
@keyframes rm-twk{0%{opacity:.5}100%{opacity:1}}
@keyframes rm-twk2{0%{opacity:.82}100%{opacity:.42}}
.rm-sky .rm-meteor{position:absolute;top:var(--y);left:var(--x);width:var(--len,190px);height:2.5px;z-index:1;
  background:linear-gradient(90deg,#fff,rgba(255,215,195,.5),transparent);
  border-radius:3px;filter:drop-shadow(0 0 9px rgba(255,210,190,.8));
  transform:translate3d(0,0,0) rotate(212deg);opacity:0;
  animation:rm-meteor var(--dur,3.4s) var(--delay,0s) cubic-bezier(.4,0,.7,1) infinite}
@keyframes rm-meteor{
  0%{transform:translate3d(0,0,0) rotate(212deg);opacity:0}
  8%{opacity:.9} 60%{opacity:.9}
  100%{transform:translate3d(var(--tx,-820px),var(--ty,560px),0) rotate(212deg);opacity:0}}
/* 無障礙:減少動態偏好 → 關掉流星 */
@media(prefers-reduced-motion:reduce){ .rm-sky::before,.rm-sky::after{animation:none} .rm-sky .rm-meteor{animation:none;opacity:0} }   /* 減少動態:保留靜態星空,關掉閃爍與流星 */
img{display:block;max-width:100%}
#root{min-height:100vh;display:flex;flex-direction:column}
.rm-content-max{max-width:1180px;margin:0 auto;width:100%}

/* ===== Top bar ===== */
.rm-topbar{position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 22px;background:var(--panel);border-bottom:1px solid rgba(255,255,255,.04)}
.rm-topbar-left{display:flex;align-items:center;gap:12px;flex:0 0 auto}
/* Hamburger:方案 C「品牌粉描邊」(董事長 2026-08-19 定稿 mockup-hamburger.html)。
   44×44 是 Apple HIG 觸控下限,**不隨螢幕縮小**——原本 520/384 兩個斷點壓到 34/32 已移除。
   桌機 ≥1280 仍然整顆 display:none(常駐側欄不需要),那條沒動。 */
.rm-hamburger{display:flex;flex-direction:column;gap:5px;width:44px;height:44px;border-radius:13px;
  background:rgba(196,104,95,.10);border:1px solid rgba(231,164,140,.42);
  align-items:center;justify-content:center;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:background .12s,transform .12s}
.rm-hamburger span{width:20px;height:2.5px;background:#fff;border-radius:2px}
.rm-hamburger:active{background:rgba(196,104,95,.24);transform:scale(.94)}
.rm-brand{display:flex;align-items:center;gap:10px}
.rm-logo{width:54px;height:54px;border-radius:50%;object-fit:contain}
.rm-brand-name{font-size:26px;font-weight:800;letter-spacing:.5px}
/* subtle border + shadow (inset style) so the box is visible even though its bg
   matches the topbar/panel colour — otherwise it looks like floating text */
/* Game search field: bg #1f1217, 1px solid rgba(255,255,255,.3), radius 8, h 48, shadow 6/6/12 .25 */
.rm-search{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid rgba(255,255,255,.3);box-shadow:6px 6px 12px rgba(0,0,0,.25);border-radius:8px;padding:0 11px;height:48px;margin:0 0 14px}
.rm-search-icon{width:24px;height:24px;object-fit:contain;opacity:.7}
.rm-search-input{flex:1;background:transparent;border:0;outline:0;color:#fff;font-size:16px;font-family:inherit}
.rm-search-input::placeholder{color:var(--muted)}
.rm-topbar-right{display:flex;gap:10px;flex:0 0 auto}
/* ===== 改版:頂欄 logo 置中 ===== */
.rm-topbar-centered{justify-content:space-between}
.rm-topbar-centered .rm-brand{position:absolute;left:50%;transform:translateX(-50%)}
.rm-topbar-centered .rm-logo{width:40px;height:40px}
.rm-topbar-centered .rm-brand-name{font-size:19px}
.rm-topbar-centered .rm-topbar-right{min-width:38px;min-height:38px;justify-content:flex-end}
/* 使用者卡(登入):頭像+帳號+餘額+刷新+存款 */
.rm-usercard{align-items:center;column-gap:10px;flex-wrap:wrap;background:linear-gradient(180deg,var(--card3),var(--elev));border:1px solid rgba(255,255,255,.08);border-radius:13px;padding:10px 12px;margin:0 0 12px;cursor:pointer}
body.rm-authed .rm-usercard.rm-auth-only{display:flex!important}
.rm-uc-logo{width:34px;height:34px;border-radius:50%;object-fit:contain;flex:0 0 auto}
.rm-uc-name{font-size:14px;font-weight:800;color:#fff;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 頂欄頭像換 VIP 等級圖標:沿用 .rm-uc-logo 尺寸(34圓),等級徽章透明webp用 object-fit:contain 塞進去(董事長 2026-09-28) */
.rm-uc-bal{display:flex;align-items:center;gap:6px;font-size:15px;font-weight:800;color:#fff;flex:0 0 auto}
.rm-uc-coin2{width:20px;height:20px;flex:0 0 auto;border-radius:50%;background:radial-gradient(circle at 40% 35%,#ffe08a,#e8a41c);color:#5a3a00;font-weight:900;font-size:12px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(232,164,28,.5)}
.rm-uc-cur{font-size:12px;color:var(--muted);font-weight:700}
.rm-uc-rf{color:var(--muted);cursor:pointer;margin-left:2px;display:inline-flex;align-items:center}
/* brand「99」粉色 */
.rm-99{color:var(--pink)}
/* POPULAR GAMES 橫列 + VIEW ALL */
.rm-pop-head{display:flex;align-items:center;justify-content:space-between;margin:10px 2px}
.rm-pop-head .rm-pop-t{display:flex;align-items:center;gap:6px;font-size:13.5px;font-weight:800;color:#fff;text-transform:uppercase;letter-spacing:.03em}
.rm-pop-head .rm-pop-fire{font-size:15px}
.rm-pop-va{color:var(--pink);font-size:11.5px;font-weight:800;cursor:pointer;white-space:nowrap}
.rm-poprow{display:flex;gap:9px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;margin-bottom:10px}
.rm-poprow::-webkit-scrollbar{display:none}
.rm-poprow:empty{display:none}
.rm-poprow .rm-tile{flex:0 0 auto;width:92px}
/* 底部導覽登入前後都顯示(Tom 2026-07-29;原本未登入是底部固定登入列,已移除);
   未登入點 wallet 等 gate 過的項目會跳登入 */
.rm-bottomnav{display:block}
/* ===== 分類 tab:底線式 tab(B 方案 Clean Grid,2026-08-25)=====
   規格 = mockup-home-grid.html 第 3 欄 .b-tabs / .b-tab,數值照搬。
   汰換掉的 A 方案膠囊 chip:董事長驗收「兩排導覽太重、整體氣質不對」,
   底線式沒有底色沒有邊框,只留一條 3px 粉紫指示線 —— 這就是「Clean」。
   2026-08-25 二版:Crash / Poker 兩個分類移除後只剩 5 個 → 照 mockup 原規格**五等分**,
   取消橫滑(5 顆放得下就不該讓玩家滑,§2 gesture-conflicts)。等分後每格 68.6px,
   字級從當初為了塞 7 顆而壓的 10.5px 提回 12px(泰文最長「ลอตเตอรี่」實測 45px < 68.6,不截斷)。
   skill(ui-ux-pro-max)依據:
   · §9 nav-state-active「Highlight active nav item with color/underline」— 就是 border-b-2 那條
   · §2 touch-target-size — tab 高 ≥44、寬 68.6 ≥44
   · §4 consistency — 指示線沿用站內粉紫 token,不引入第三套色;五格等寬,不再參差
   只套 #rm-tabs,不動 bonusrow(共用 .rm-tabs)。 */
/* 2026-09-09 董事長:手機分類列改「橫滑 + 吸頂」(取代原五格等寬 grid)。
   flex 橫向可滑 → 每格較寬好按、超出可左右滑;sticky top:78(貼手機 topbar 79 底,重疊 1 免縫);
   背景 band(var(--bg))蓋捲上來的遊戲 + 下緣柔陰影當分界。桌機在 @media 另有藥丸+吸頂覆蓋。 */
#rm-tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  position:sticky;top:78px;z-index:60;background:var(--bg);border:0;border-bottom:1px solid rgba(255,255,255,.07);border-radius:0;
  padding:6px 6px;gap:6px;margin:8px 0 16px;box-shadow:0 8px 12px -8px rgba(0,0,0,.55);touch-action:pan-x pan-y}
#rm-tabs::-webkit-scrollbar{display:none}
/* 未選中色刻意不用 mockup 的 #7c869c:實測在 #2e1b23 底上只有 4.38:1,10.5px bold 不算 large text,
   過不了 §1 color-contrast 的 4.5:1。改用站內既有的 --muted(#b39aa2)= 5.21:1,順便少一個硬編色。 */
#rm-tabs .rm-tab{position:relative;flex:0 0 auto;width:auto;min-width:66px;height:auto;min-height:44px;flex-direction:column;align-items:center;justify-content:center;padding:8px 10px 10px;gap:5px;background:transparent;border:0;border-radius:0;box-shadow:none;white-space:nowrap;color:var(--muted);transition:color .16s;-webkit-tap-highlight-color:transparent}
#rm-tabs .rm-tab span{max-width:100%;overflow:hidden;text-overflow:ellipsis;color:inherit;font-size:12px;font-weight:700;line-height:1.2}
/* 2026-09-03:分類 tab 圖示由線性 inline SVG 換成彩色 3D 點陣圖(/assets/icons/3d/cat-*.webp)。
   ⚠️ 原本選中態是 .rm-tab-active .rm-tab-ic{color:var(--pink2)} —— currentColor 只吃得到向量,
   對 <img> 完全無效。改用「未選中降不透明度 + 去飽和」表示狀態;
   §9 nav-state-active 的可辨識度另有底線指示(.rm-tab-active:after 的 3px 漸層底線)撐著。
   尺寸 24 → 28:3D 圖細節比線性圖多,24px 會糊。 */
#rm-tabs .rm-tab .rm-tab-ic{width:36px;height:36px;flex:0 0 auto;color:inherit;filter:none;transition:color .16s}
/* 2026-09-03 董事長嫌暗:未選中從 .5/saturate(.55) 放寬到 .82/saturate(.92),
   選中仍是 1/none。差距縮小但底線指示(.rm-tab-active:after)本來就在,狀態仍分得出來。 */
#rm-tabs .rm-tab img.rm-tab-ic{opacity:.82;filter:saturate(.92);transition:opacity .16s,filter .16s}
/* ⚠️ 用 .rm-tab.rm-tab-active(而非只寫 .rm-tab-active)把權重從 (1,2,1) 提到 (1,3,1):
   與上一條同權重時只靠原始碼順序決勝,實測選中態沒吃到(仍是 .82),提權重才穩。 */
#rm-tabs .rm-tab.rm-tab-active img.rm-tab-ic{opacity:1;filter:none}
#rm-tabs .rm-tab:active{opacity:.7}   /* §2 press-feedback:用 opacity 不用 transform,按下去不會推動相鄰格(Stable Interaction States) */
/* 選中:白字 + 粉 icon + 底部 3px 粉紫線。
   ⚠️ 指示線放 bottom:0(不是 mockup 的 -1px)—— 容器是 overflow:hidden,負值會被裁掉;
   bottom:0 貼著容器 border-bottom 上緣,視覺等價。 */
#rm-tabs .rm-tab-active{color:#fff;background:transparent;border-color:transparent}
#rm-tabs .rm-tab-active span{color:#fff}
/* ⚠️ 用 .rm-tab.rm-tab-active(權重 1,3,0)才蓋得過後面桌機那條 .rm-tab .rm-tab-ic(1,2,0),同 line 143 img 版做法 */
#rm-tabs .rm-tab.rm-tab-active .rm-tab-ic{color:var(--pink);filter:drop-shadow(0 0 8px rgba(196,104,95,.6))}   /* 2026-09-10:選中分類圖示紫色+光暈,對齊 mockup .catcard.on */
#rm-tabs .rm-tab-active:after{content:"";position:absolute;left:14%;right:14%;bottom:0;height:3px;
  border-radius:3px 3px 0 0;background:var(--grad)}   /* 2026-09-10:底線改 voltplay 三段漸層,對齊 mockup .catcard */
/* 桌機:同一套底線 tab,只放大字級/圖示 */
@media(min-width:1280px){
  #rm-tabs{margin:8px 0 16px}
  #rm-tabs .rm-tab{padding:8px 8px 10px}
  #rm-tabs .rm-tab .rm-tab-ic{width:38px;height:38px}
  #rm-tabs .rm-tab span{font-size:13.5px}
  /* 2026-09-03 移除桌機專用的 .rm-ptile img{max-height:40px;max-width:74px}:
     那條是網格時代的產物(桌機欄數少 → 卡片較寬 → logo 可以大一點)。
     改成單排橫滑後卡片在所有斷點都固定 120x80,不需要桌機變體;
     而且它已被後面(行 ~340)的 60/104 同權重蓋掉,是死規則。 */
}
/* 舊的 .rm-hot-head(🔥 emoji + เกมมาแรง 固定標題)與 body.rm-browsing 整批規則已於 2026-08-25 移除:
   標題改由 B 方案的 .rm-sec 區塊標題接手(文字跟著選中來源變),banner/freespin 也改成常駐。 */
.rm-hotgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:16px}
.rm-hotgrid:empty{display:none}

/* buttons */
.rm-btn{border:0;outline:0;cursor:pointer;font-family:inherit;font-weight:700;font-size:15px;
  padding:11px 22px;border-radius:12px;white-space:nowrap;transition:transform .05s,filter .15s}
.rm-btn:active{transform:translateY(1px)}
.rm-btn-register{background:#fff;color:#111}
/* Register 按鈕 pump 效果(董事長 2026-09-25):發光脈衝吸引點擊。
   ⚠️ 不用 scale 放大:.rm-cta-inline 容器寬=按鈕寬(298px 鎖死),放大會溢出 banner 邊 + 比同寬 Login 大(董事長回報有問題)。
   改用 drop-shadow 呼吸輝光(跟隨圓角形狀)→ 零尺寸變化,不溢出不錯位。hover/active 暫停;尊重 reduced-motion。 */
@keyframes rm-pump{0%,100%{filter:drop-shadow(0 0 2px rgba(214,140,150,.25))}50%{filter:drop-shadow(0 0 18px rgba(214,140,150,.9))}}
.rm-btn-register{animation:rm-pump 1.5s ease-in-out infinite}
.rm-btn-register:hover,.rm-btn-register:active{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.rm-btn-register{animation:none;filter:none}}
.rm-btn-login{background:#fff;color:#111}
/* topbar Register/Login: same fixed size as each other (never resized by text); brand text is
   priority — kept full — so the buttons are sized to fit alongside it without overflowing */
.rm-topbar-right .rm-btn{background:#fff;color:#111;width:93px;height:42px;padding:0;font-size:14px;font-weight:700;border-radius:10px;
  box-shadow:6px 6px 12px rgba(0,0,0,.4);
  display:inline-flex;align-items:center;justify-content:center;overflow:hidden;white-space:nowrap;flex:0 0 auto}
/* ① 董事長 2026-10-07:topbar 常駐 Login/Register(登出態)。只桌機(≥1280,brand position:static 有空間)顯示;
   手機維持原居中 topbar 不塞按鈕(居中 wordmark 會重疊)。登入後(body.rm-authed)隱藏——登入者不需要註冊/登入入口。
   Register=品牌漸層 --grad + rm-pump 脈衝(主 CTA,reduced-motion 關);Login=沿用上面白底(次要)。 */
.rm-topbar-right .rm-btn.rm-tb-auth{display:none}
@media(min-width:1280px){ .rm-topbar-right .rm-btn.rm-tb-auth{display:inline-flex} }
body.rm-authed .rm-topbar-right .rm-btn.rm-tb-auth{display:none!important}
.rm-topbar-right .rm-btn.rm-tb-reg{background:var(--grad);color:#fff;animation:rm-pump 1.5s ease-in-out infinite}
.rm-topbar-right .rm-btn.rm-tb-reg:hover,.rm-topbar-right .rm-btn.rm-tb-reg:active{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.rm-topbar-right .rm-btn.rm-tb-reg{animation:none}}
/* Primary CTA button: h 52, radius 16, 20px/700 label, 1px white/30% border, shadow 6/6/12 .25 */
.rm-cta-btn{height:52px;padding:0 11px;font-size:20px;font-weight:700;border-radius:16px;box-shadow:6px 6px 12px rgba(0,0,0,.25)}
/* inline CTA: register = flat #70c727 + white text, login = white w/ gray border */
/* 2026-09-10:hero CTA 改 glass-OS(半透 + 背景模糊 + 頂端內光);登出=Register/Login,登入=Top Up/Withdraw 同一套 */
.rm-cta-inline .rm-btn-register,.rm-cta-inline .rm-btn-dep{background:linear-gradient(135deg,rgba(251,213,196,.66),rgba(196,104,95,.82) 55%,rgba(143,58,78,.72));color:#fff;
  border:1px solid rgba(255,255,255,.42);backdrop-filter:blur(14px) saturate(180%);-webkit-backdrop-filter:blur(14px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -10px 20px rgba(0,0,0,.12),0 10px 26px rgba(196,104,95,.32)}
.rm-cta-inline .rm-btn-login,.rm-cta-inline .rm-btn-wd{background:rgba(255,255,255,.13);color:#fff;
  border:1px solid rgba(255,255,255,.34);backdrop-filter:blur(14px) saturate(180%);-webkit-backdrop-filter:blur(14px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 8px 22px rgba(0,0,0,.28)}

/* ===== Sidebar: drawer on mobile, persistent on desktop ===== */
.rm-body{width:auto;flex:1 0 auto}  /* grow to fill so the bottom nav is pushed to the viewport bottom even on short pages */
.rm-search-top{display:none}
.rm-sidebar{position:fixed;top:0;left:0;height:100%;width:100%;max-width:none;z-index:200;background:var(--panel);
  transform:translateX(-105%);transition:transform .28s ease;overflow-y:auto;padding:20px 19px 32px;
  display:flex;flex-direction:column;gap:20px;scrollbar-width:none}
.rm-sidebar::-webkit-scrollbar{display:none}  /* drawer scrolls without a visible scrollbar */
body.rm-drawer .rm-sidebar{transform:translateX(0)}
body.rm-drawer .rm-backdrop{display:block}
/* drawer open -> lock the page behind it, so the WINDOW scrollbar disappears too
   (html has overflow-x:clip so body overflow doesn't propagate; capping body height does the job) */
body.rm-drawer{overflow:hidden;height:100vh;height:100dvh}
/* drawer header: brand on left + close X on right (full-width drawer covers the topbar) */
.rm-sidebar-head{display:flex;align-items:center;justify-content:flex-start;gap:14px;margin-bottom:4px}
.rm-sidebar-brand{gap:10px}
.rm-sidebar-brand .rm-logo{width:42px;height:42px}
.rm-sidebar-brand .rm-brand-name{font-size:20px;font-weight:800}
/* Plain bare X, no boxed background */
.rm-sidebar-close{background:transparent;border:0;color:#fff;
  width:40px;height:40px;border-radius:10px;font-size:28px;line-height:1;cursor:pointer;flex:0 0 auto;padding:0}
/* flex-shrink:0 so cards keep natural height when the drawer overflows (logged-in has many
   cards); otherwise flex would squeeze them and overflow:hidden clips the text (e.g. Language) */
/* Side menu item group: card = bg #2e1b23, 1px white/30% border, radius 10, shadow;
   items h~58 (17px pad), 24px white icons inset ~60px, 16px/700 labels, icon-label gap 30 */
.rm-menu-card{background:transparent;border:0;border-radius:0;
  box-shadow:none;overflow:visible;flex-shrink:0}   /* 2026-09-10:桌機側欄扁平(拿掉描邊卡框),對齊 mockup */
.rm-side-topbtns{flex-shrink:0}
.rm-menu-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;cursor:pointer;position:relative}   /* 2026-09-10:桌機側欄項目緊湊化(pad10/gap11/radius10),對齊 mockup .item */
.rm-menu-item:hover{background:rgba(255,255,255,.05)}
.rm-menu-item.rm-mi-act{background:linear-gradient(135deg,rgba(251,213,196,.14),rgba(196,104,95,.16))}   /* 選中:青紫淡染,對齊 mockup .item.active */
.rm-menu-item img{width:24px;height:24px;object-fit:contain;filter:none}
.rm-menu-item .rm-flag{width:24px;height:24px;border-radius:50%;filter:none}
.rm-menu-item span{font-size:14px;font-weight:600;color:#f0f3fc}   /* 2026-09-10:對齊 mockup .item 字級 */
.rm-menu-sep{height:1px;background:rgba(255,255,255,.1);margin:0 20px}
.rm-arrow{margin-left:auto;width:9px;height:9px;border-top:2px solid #cfd3dc;border-right:2px solid #cfd3dc;transform:rotate(45deg)}
.rm-arrow.rm-down{transform:rotate(135deg);margin-top:-4px}
.rm-brand{cursor:pointer}
/* language accordion */
.rm-lang-head{cursor:pointer}
.rm-lang-panel{display:none;padding:0 0 8px}
.rm-lang-card.rm-lang-open .rm-lang-panel{display:block}
.rm-lang-opt{display:flex;align-items:center;gap:26px;padding:7px 16px 7px 56px;cursor:pointer}  /* indent = menu-item icon inset */
.rm-lang-opt .rm-flag{width:26px;height:26px;flex:0 0 auto}
.rm-lang-btn{flex:0 0 auto;text-align:center;padding:10px 24px;border-radius:10px;background:var(--card3);font-weight:700;font-size:16px;transition:background .15s}  /* compact pill, not full-width */
.rm-lang-opt.on .rm-lang-btn{background:#c4685f;color:#fff}

.rm-content{max-width:1000px;margin:0 auto;width:100%;padding:14px 16px 96px}

/* marquee */
/* fixed heights so the marquee (icon loads late / track fills late) never grows and shoves
   the whole page down -> was the main CLS source once the shell paints early */
/* marquee sizing: small 21x16 megaphone icon + 11px text (was oversized/cramped) */
/* Intro marquee: height auto (content-sized), margin-bottom only 4px — keep it slim */
/* 跑馬燈:小一點 + 深色框 + 金色左邊條(notice 感) */
.rm-marquee{display:flex;align-items:center;gap:8px;padding:8px 11px;margin:2px 0 12px;overflow:hidden;background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:11px;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.rm-marquee-cv{color:var(--muted);font-size:15px;flex:0 0 auto}
.rm-marquee-icon{width:15px;height:13px;object-fit:contain;flex:0 0 auto;opacity:.9}
.rm-marquee-viewport{flex:1;overflow:hidden;white-space:nowrap}
.rm-marquee-track{display:inline-flex;white-space:nowrap;animation:rm-scroll 16s linear infinite;color:#cdd3e2;font-size:11px}
.rm-mq-item{padding-right:80px}
@keyframes rm-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* banner */
/* reserve banner height at initial paint so injecting slides later doesn't shift the page (CLS) */
.rm-banner{position:relative;border-radius:0;overflow:hidden;background:var(--deep);aspect-ratio:800/312}  /* banner has square corners */
/* Deploy 2 兩欄 Hero:手機 = display:contents(透明容器,子元素 banner/歡迎卡照原順序流入 .rm-content
   → 手機版面逐像素不變);歡迎文字手機不顯示。桌機(>=1280)才把 .rm-hero 變 grid 兩欄(見上方 media)。 */
.rm-hero,.rm-hero-side{display:contents}
.rm-hero-welcome{display:none}
/* banner: swipeable by touch (#4) but not clickable (#5 — no click handlers are attached);
   touch-action:pan-y keeps vertical page scroll working while we read horizontal swipes */
.rm-banner,.rm-slides,.rm-slide,.rm-slides img{touch-action:pan-y;user-select:none;-webkit-user-drag:none}
/* loading skeleton while the API banners load (avoids flashing a stale static image on refresh) */
.rm-banner-loading{background:linear-gradient(100deg,var(--sunken) 30%,var(--card3) 50%,var(--sunken) 70%);background-size:200% 100%;animation:rm-shimmer 1.4s linear infinite}
@keyframes rm-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
.rm-slides{display:flex;transition:transform .45s ease;height:100%}
.rm-slides .rm-slide{flex:0 0 100%}
.rm-slides img{width:100%;height:100%;aspect-ratio:800/312;object-fit:cover;display:block}
.rm-dots{position:absolute;right:14px;bottom:12px;display:flex;gap:6px}
/* Slide indicator: every dot is 6x6; the active one just changes colour (not stretched to a bar) */
.rm-dots i{width:6px;height:6px;border-radius:3px;background:rgba(255,255,255,.4);transition:background .2s}
.rm-dots i.on{background:#fff}

/* cta row + info row (stacked) */
.rm-cta-row{display:flex;gap:16px;margin:16px 0}
.rm-cta-row .rm-btn{flex:1}
.rm-inforow{display:flex;align-items:center;background:transparent;padding:4px 2px;margin:2px 0 14px}
.rm-inforow{display:none}  /* removed per Tom 2026-07-08 (the whole Min Deposit / Withdraw info strip) */
/* logged-in: info stats (left) + Top Up/Withdraw (right) inline */
.rm-inforow-band{display:flex;align-items:center;gap:16px;margin:14px 0}
.rm-inforow-band .rm-inforow{flex:1;margin:0}
.rm-cta-inline{display:flex;gap:16px;flex:0 0 auto}
.rm-cta-inline:empty{display:none}
.rm-cta-inline .rm-btn{min-width:160px;padding:15px 26px}
@media(max-width:768px){
  .rm-inforow-band{flex-direction:column-reverse;align-items:stretch;gap:12px}
  .rm-cta-inline{width:100%;gap:8px}   /* mobile: 8px between Register/Login (at 390px) */
  .rm-cta-inline .rm-btn{flex:1;min-width:0}
}
/* desktop: wrap the stats in a filled rounded box */
@media(min-width:769px){
  .rm-inforow{background:var(--card);border-radius:10px;padding:10px 19px;min-height:58px}
}
.rm-info{flex:1;text-align:center;padding:4px 8px;min-width:0}
/* Brand info strip: label 10px gray #686868, value 16px/700 white, both ellipsized */
.rm-info-label{font-size:10px;color:#686868;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rm-info-value{font-size:16px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rm-info-sep{width:1px;align-self:stretch;margin:8px 0;background:rgba(255,255,255,.08)}

/* tabs */
/* Game category row: boxed row (bg #1f1217, 1px white/30% border, radius 12, shadow),
   inside it fixed 57x57 tiles with 18px gap, 25px icon + 11px/700 label; active tile = white */
.rm-tabs{display:flex;gap:18px;background:var(--panel);border:1px solid rgba(255,255,255,.3);border-radius:12px;
  box-shadow:6px 6px 12px rgba(0,0,0,.25);padding:12px;margin-bottom:14px;overflow:hidden;touch-action:pan-y}
.rm-tab{position:relative;overflow:hidden;flex:0 0 auto;width:57px;height:57px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px 2px;border-radius:10px;
  background:transparent;border:1px solid rgba(255,255,255,.3);cursor:pointer}
.rm-tab img{width:25px;height:25px;object-fit:contain}
.rm-tab span{font-size:11px;color:#fff;font-weight:700;white-space:nowrap}  /* category label 11px bold */
.rm-tab-active{background:#fff;border-color:#fff}
.rm-tab-active span{color:var(--panel)}
/* Ribbon badge: red diagonal corner banner clipped to the tab's top-left corner */
/* .rm-tab .rm-tab-ribbon = specificity (0,2,0), beats `.rm-tab span{color:muted}` so FIFA stays white */
.rm-tab .rm-tab-ribbon{position:absolute;top:3px;left:-24px;width:70px;height:14px;transform:rotate(-45deg);
  display:flex;align-items:center;justify-content:center;background:#E64141;color:#fff;
  font-family:Trujillo,sans-serif;font-size:9px;font-weight:900;letter-spacing:.3px;line-height:1;z-index:2;border-radius:0}

/* provider / game grid */
.rm-grid{display:grid;align-items:start;grid-template-columns:repeat(6,1fr);gap:8px;min-height:60vh;align-content:start}

/* ===== 2026-09-03 董事長:provider bar + 遊戲區包成一個有色差的框 =====
   §4 consistency:沿用站內卡片語彙(border-radius + 邊框);
   底色用 --card2(#242a3d,比頁面底 #2e1b23 亮一階,亮度比 1.12 → 看得出色差,
   比 --card #1f1217 的 1.11 更明顯);邊框負責「框」的邊界,底色負責「色差」。
   分類 tab 刻意留在框外:它是分類導覽,框住的是它切換出來的內容。 */
.rm-lobby-card{background:var(--card2);border:1px solid rgba(255,255,255,.08);
  border-radius:14px;padding:14px 14px 12px;margin:0 0 16px}
.rm-lobby-card>*:last-child{margin-bottom:0}   /* 收掉框內最後一個元素的下邊距 */

/* ===== 區塊標題 .rm-sec(B 方案,規格 = mockup .sec)=====
   粉紫竖條 + 標題 + 右側展開連結。B 的兩區塊結構(廠商 / 遊戲)需要它來分隔,
   否則兩片網格黏在一起看不出層級(§5 visual-hierarchy / whitespace-balance)。 */
.rm-sec{display:flex;align-items:center;justify-content:space-between;margin:0 0 12px}
.rm-sec[hidden]{display:none}   /* .rm-sec 是 display:flex,不寫這條 hidden 屬性會失效 */
.rm-sec h3{margin:0;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase;color:#fff}
.rm-sec-bar{width:3px;height:15px;border-radius:2px;flex:0 0 auto;
  background:linear-gradient(180deg,var(--pink2),var(--purple))}
/* 2026-09-03 董事長:PROVIDER 區標題換成分類名(Slot 等)並「更顯眼」。
   只放大 #rm-sec-prov,不動共享的 .rm-sec h3(其他區塊標題維持原大小)。 */
#rm-sec-prov h3{font-size:19px;letter-spacing:.02em}   /* 14 → 19 */
#rm-sec-prov .rm-sec-bar{width:4px;height:21px}         /* 條跟著放大配合 */
/* 展開/收起連結:min-height 44 是觸控下限(§2 touch-target-size),視覺上仍只有一行小字 */
.rm-sec-more{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 2px;
  font-size:11px;font-weight:700;color:var(--muted);cursor:pointer;-webkit-tap-highlight-color:transparent}
.rm-sec-more[hidden]{display:none}
.rm-sec-more svg{width:12px;height:12px;flex:0 0 auto;transition:transform .16s}
.rm-sec-more.rm-sec-open svg{transform:rotate(90deg)}   /* 展開時箭頭轉向下,指示可收起(§7 state-transition) */
.rm-sec-more:active{opacity:.7}

/* ===== 來源區 #rm-srcs:單排橫滑 rail(2026-09-03 董事長指定,取代 2026-08-25 的 B 方案網格)=====
   ⚠️ 歷史:2026-08-25 曾有 A 方案橫滑 rail,董事長驗收「交互別扭」→ 改成 3 欄矮卡網格(B 方案),
   理由是「不用滑就看得到全部,選中態也不會停在畫面外」,並援引 §2 gesture-conflicts(主內容避免橫滑)。
   2026-09-03 董事長重新指定回橫滑,理由是**網格把 logo 壓太小**:
   手機要塞 3 欄 → 卡片內距只剩 93px → logo 上限被卡在 34px。
   **那兩個顧慮仍然成立**,是知情地付了代價換 logo 尺寸,不是被推翻。針對它們下的藥:
     · 選中態停在畫面外 → markSrcActive() 對選中那顆做 scrollIntoView(inline:"nearest")
     · 交互別扭         → scroll-snap-type:x proximity + 固定卡寬(邊緣天然露半張當可滑提示,§9 swipe-clarity)
                          + overscroll-behavior-x:contain(橫滑不外溢給頁面/瀏覽器上一頁手勢)
   §8 progressive-disclosure 的「預設 2 排 + VIEW ALL 展開」隨網格一起退役:單排全部都在同一條 rail 上。
   ⚠️ lc 有 13 家、slot 有 10 家,全鋪要 4~5 排 → app.js 預設只顯示 2 排,標題右側「ดูทั้งหมด」展開/收起
   (§8 progressive-disclosure)。欄數跟遊戲牆同一組斷點(§4 consistency),
   2 排的顆數由 app.js 依實際欄數算,不寫死 nth-child。
   選中態刻意克制:粉框 + 淡粉底,**不填滿漸層** —— 廠牌 logo 是各家品牌色
   (JILI 紅黃 / JOKER 金),鋪在飽和粉紫上會糊掉(§1 color-contrast)。 */
#rm-srcs{display:flex;flex-wrap:nowrap;gap:8px;
  /* WHY: overflow-y:hidden(横向滚动必需)会裁掉选中 chip 往上溢出的辉光(box-shadow 0 6px 18px -6px 向上 6px);
     上下留 8px 内距让辉光/边框完整可见,不被容器顶边切(state-clarity) */
  padding:8px 0 8px;margin:0 0 10px;align-items:stretch;
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent}
#rm-srcs::-webkit-scrollbar{height:4px}
#rm-srcs::-webkit-scrollbar-track{background:transparent}
#rm-srcs::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:2px}
/* 2026-09-10 Batch2-2a:provider bar 加 glass-OS(磨砂 + 內光,跟 footer 同家族) */
.rm-ptile{flex:0 0 120px;width:120px;height:54px;scroll-snap-align:start;
  border-radius:12px;padding:6px;gap:5px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.10);transition:background .16s,border-color .16s,box-shadow .16s,opacity .12s;
  -webkit-tap-highlight-color:transparent}
.rm-ptile:active{opacity:.7}
.rm-ptile .lg{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
/* ⚠️ logo 統一視覺框(董事長 2026-08-25 第 3 點;2026-09-03 隨橫滑 rail 等比放大 1.382×)
   ——後端只有兩種 logo 畫布:
   140×140(1:1:pgs / joker / prg / evolution …)和 300×125(2.4:1:jili / spadegaming /
   kingmaker / fastspin / sagaming …)。原本只卡 max-height:36 → 長條 logo 變 86.4×36,
   佔滿卡片內距 93px 的 93%(頂到邊)且視覺面積是方形 logo 的 2.40 倍,三種 logo 輕重完全不一。
   兩邊都卡之後:方形 34×34、長條 62×25.8,面積比降到 1.38 倍,最寬只佔 67% 有餘量。
   用固定 px(不是 %)是刻意的:卡片在 3/4/5/6 欄各種寬度下,logo 尺寸要一致才叫「同一個框」。 */
/* 2026-09-03 第二輪(董事長:「logo 太小,框太大,調到剛好 fit」):
   第一輪 136×76 + 47/86 實測填充率只有三成 —— 方形 140×140 → 47×47 佔內距面積 31%,
   長條 502×164 → 86×28 佔 33%。框縮小 + 上限放大到 120×80 + 60/104:
     方形 140×140 → 60×60   佔內距(104×64)面積 54%
     長條 502×164 → 104×34  佔 53%
   ⚠️ 上限比 104/60=1.733 是照**實際 logo 畫布**算的:本站長條 logo 是 ~3.06:1
   (502×164 / 500×134),要讓長條與方形視覺面積相當,maxW/maxH 需 ≈ √3.06 = 1.749。
   結果面積比 (104×34)/(60×60)=0.98 —— 比第一輪的 1.09 更接近 1:1,
   2026-08-25「長條不能壓過方形」的原則不但沒破,還更好。
   (原始 34/62 是 2026-08-25 為 2.4:1 畫布訂的,那個比例 1.824 已不符現況畫布) */
/* 2026-09-03 董事長:「logo size 層次不齊,有些填滿有些空空,要統一;框也要扁一點」。
   卡 80→54(扁 33%);上限 60/104 → 36/108 —— 降 max-height 讓方形 logo 不再獨高(原 60),
   放寬 max-width 讓 3.06:1 的寬 logo 也頂到 max-height(35≈方形 36)。
   實測真實畫布渲染高:方形 140²→36 / 寬 502×164→35 / 極寬 500×134→29,
   範圍 29~36(差 7px),比原本 60/34/28(差 26px)齊很多。極寬 3.73:1 那批受卡寬所限仍略矮,
   要完全齊得把卡加寬到 ~144,那會犧牲一排能放的顆數,不划算。 */
.rm-ptile img{max-height:36px;max-width:108px;object-fit:contain}
/* 圖掛掉時 srcTile 的 onerror 會把 <img> 換成 <b>廠牌名,不再留一張全空黑卡 */
.rm-ptile b{font-size:10px;font-weight:800;color:#fff;letter-spacing:.06em;text-transform:uppercase;text-align:center;line-height:1.2;transition:color .16s}
.rm-ptile-hot svg{width:22px;height:22px;flex:0 0 auto;color:var(--pink2);transition:color .16s}
.rm-ptile.rm-src-on{border-color:rgba(196,104,95,.6);background:linear-gradient(135deg,rgba(251,213,196,.16),rgba(196,104,95,.20));box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 6px 18px rgba(196,104,95,.28)}
.rm-ptile.rm-src-on b{color:#fff}
.rm-ptile-hot.rm-src-on svg{color:var(--pink2)}
/* 骨架卡:載入中的佔位(不是 spinner,§3 progressive-loading);6 顆 = 預設 2 排,不會上下跳 */
.rm-ptile-sk{pointer-events:none;background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.05)}

/* 🔴 2026-09-22 董事長:單排 provider bar —— 🔥Hot/✦New 特殊 chip + provider chips 染品牌色,同一排。 */
/* 方案2:provider chip 染品牌色(--pc 由 srcTile 掛)。未選=品牌色底線 + 微光;選中=品牌色實邊 + 光暈 */
#rm-srcs .rm-ptile{box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 -2px 0 -1px var(--pc,transparent),0 4px 12px -10px var(--pc,transparent)}
#rm-srcs .rm-ptile.rm-src-on{border-color:var(--pc,rgba(196,104,95,.6));background:rgba(255,255,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 0 0 1px var(--pc,transparent),0 6px 20px -7px var(--pc,#c4685f)}
/* Hot / New 特殊 chip(排在 provider 前,比 logo chip 醒目;暖橙 / 綠青) */
.rm-ptile-hot{background:linear-gradient(135deg,rgba(255,122,61,.16),rgba(236,63,143,.16));border-color:rgba(255,122,61,.42)}
/* Hot 圖標更搶眼(董事長 2026-09-29):更大更亮的橙 + 暖色輝光 + 火焰閃爍(motion-meaning:火本就跳動);尊重 reduced-motion */
.rm-ptile-hot svg{width:23px;height:23px;flex:0 0 auto;color:#ff5a1f;transition:color .16s;transform-origin:center bottom;
  filter:drop-shadow(0 0 4px rgba(255,90,31,.7));animation:rm-fireflick 1.1s ease-in-out infinite}
@keyframes rm-fireflick{0%,100%{transform:scale(1) rotate(-1deg);filter:drop-shadow(0 0 3px rgba(255,90,31,.55))}
  50%{transform:scale(1.16) rotate(1deg);filter:drop-shadow(0 0 9px rgba(255,150,45,.95))}}
@media(prefers-reduced-motion:reduce){.rm-ptile-hot svg{animation:none}}
.rm-ptile-new{background:linear-gradient(135deg,rgba(57,217,138,.16),rgba(224,144,122,.16));border-color:rgba(57,217,138,.42)}
.rm-ptile-new .rm-ptile-spark{font-size:19px;line-height:1;color:#39d98a}
.rm-ptile-hot b,.rm-ptile-new b{font-size:11px}
/* Hot/New 選中態(放在品牌 on 態之後,同特異度 → 靠順序勝出) */
#rm-srcs .rm-ptile-hot.rm-src-on,#rm-srcs .rm-ptile-new.rm-src-on{border-color:transparent;background:linear-gradient(135deg,var(--green1),var(--green2));box-shadow:0 6px 18px -6px rgba(196,104,95,.5)}
#rm-srcs .rm-ptile-hot.rm-src-on svg,#rm-srcs .rm-ptile-hot.rm-src-on b,#rm-srcs .rm-ptile-new.rm-src-on .rm-ptile-spark,#rm-srcs .rm-ptile-new.rm-src-on b{color:#fff}

/* ===== Sports / Live Casino 的 provider 卡牆(董事長 2026-09-15:只選 provider → 直接進 lobby)=====
   2026-09-16:每張卡改成橫式 thumbnail(參考 lapdee77;圖 570×360 → aspect 570/360)。
   有 thumbnail(.rm-pw-t)→ 圖鋪滿;沒有(cmd/wm/hotroad)→ logo 置中 + 廠牌名,兩種同一尺寸,卡牆才齊。
   卡數少(sport 只有 2 家)→ min-height:auto,不留 60vh 空白。 */
.rm-grid.rm-pwall{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;min-height:auto}
.rm-pw{position:relative;cursor:pointer;border-radius:14px;overflow:hidden;
  aspect-ratio:570/360;                                  /* 與 thumbnail 同比例 → thumb 卡與 logo 卡一樣大 */
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:14px 10px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
  transition:transform .15s,border-color .15s,box-shadow .15s;-webkit-tap-highlight-color:transparent}
.rm-pw.rm-pw-t{padding:0;background:#150c0f}             /* thumbnail 卡:圖鋪滿,不留內距 */
.rm-pw-th{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.rm-pw:active{transform:scale(.98)}
.rm-pw:focus-visible{outline:2px solid var(--pink2);outline-offset:2px}
.rm-pw-lg{width:100%;flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.rm-pw-lg img{max-height:66px;max-width:72%;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.rm-pw-cap{font-size:12px;font-weight:800;color:#fff;text-align:center;letter-spacing:.04em;text-transform:uppercase;
  line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
@media(hover:hover){ .rm-pw:hover{transform:translateY(-3px);border-color:rgba(251,213,196,.5);box-shadow:0 12px 28px rgba(0,0,0,.45)} }
@media(max-width:600px){ .rm-grid.rm-pwall{grid-template-columns:repeat(2,1fr);gap:10px} }

/* ===== 遊戲磚:圖(.rm-thumb)+ 磚外兩行名字(.rm-cap)=====
   舊版名字是絕對定位的黑漸層蓋在圖上、單行 ellipsis → 首頁 81 個名字有 63 個被截斷。
   改成磚外 2 行 line-clamp 後截斷歸零,順便把圖底 25% 的藝術字還回來。 */
.rm-tile{position:relative;cursor:pointer}
.rm-thumb{position:relative;aspect-ratio:1/1;   /* 2026-09-04 董事長:game thumbnail 改正方形(原 3/4 直式)。img object-fit:cover 會裁上下約 33% */
  border-radius:12px;overflow:hidden;background:var(--card);
  border:1px solid rgba(255,255,255,.08);box-shadow:0 2px 10px rgba(0,0,0,.4);transition:transform .12s}
.rm-tile:hover .rm-thumb{transform:translateY(-3px)}
.rm-thumb img{width:100%;height:100%;object-fit:cover;display:block}
/* 2026-09-09 遊戲縮圖佔位(後端 imageUrl 未回填時):漸層底 + 置中極簡圖示;名字仍在磚下 .rm-cap。回填後自動變真圖。 */
.rm-thumb-ph{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--card2),var(--card))}
.rm-thumb-ph .rm-thumb-phic{width:38%;height:38%;color:rgba(255,255,255,.16)}
.rm-cap{margin-top:6px;font-size:11px;font-weight:600;color:#c8cfdd;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ===== HOT 角標(B 方案,規格 = mockup .b-badge)=====
   Bento / rank 徽章 / 金色 provider 角標已於 2026-08-25 全數移除(董事長:遊戲區太花)。
   只剩這一顆:來源=熱門時掛在前 3 個磚上,深底 + blur + 白字,**不是金色**。 */
.rm-badge{position:absolute;top:7px;right:7px;font-size:8.5px;font-weight:800;
  letter-spacing:.07em;padding:3px 6px;border-radius:999px;
  background:rgba(18,9,12,.72);border:1px solid rgba(255,255,255,.16);color:#fff;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
/* 「載入更多」按鈕(規格 = mockup .b-more):中性灰邊,不用粉框 ——
   它是次要動作,粉色留給選中態(§4 primary-action)。高 44 = 觸控下限。 */
/* 2026-09-09 董事長:不要「查看全部」按鈕 → 這顆退成**無限捲動哨兵**,不再是有底框的 CTA,
   只是一條置中的 loading 點(捲到底自動載時可見);舊瀏覽器後備仍可點,故留 cursor:pointer。 */
.rm-more{margin-top:16px;height:40px;display:flex;align-items:center;
  justify-content:center;gap:8px;cursor:pointer;color:var(--muted);
  -webkit-tap-highlight-color:transparent;transition:opacity .12s}
.rm-more[hidden]{display:none}   /* .rm-more 是 display:flex,不寫這條 hidden 屬性會失效 */
.rm-more:active{opacity:.7}
/* .rm-back(廠商內頁的 back 鍵)已於 2026-08-25 移除:來源排常駐後不再有「新頁面」可退,
   退路 = 再點來源排別顆(§9 predictable back)。.rm-back-pill 是另一個東西(內頁頁頭),保留。 */
.rm-grid-msg{grid-column:1/-1;text-align:center;padding:40px;color:var(--muted)}

/* bottom nav (centered column, all widths) */
/* Footer nav: space-evenly row, compact 52x52 items (radius 8), 27px icons, 11px/700 labels */
/* iOS Safari fixed:bottom:0 在滑到底 rubber-band 時會跟著 viewport 彈 → 疊 translateZ(0) 強 GPU compositing layer,重繪時位置抖動大幅減少
   (不套 html/body overscroll-behavior:none,避免傷到 Android Chrome 的 pull-to-refresh) */
/* ===== Footer nav 改版(董事長 2026-08-20 定稿;mockup-footernav-glass.html 的 v4 玻璃 + f4/f5 組合)=====
   汰換掉的舊版問題:① 每格固定 54×43,低於 Apple HIG 44pt 觸控下限且兩側有死區
   ② 底部 safe-area 不足,iPhone home indicator 會壓到 ③ 選中只變色沒有形狀提示也沒有按下回饋
   ④ 上緣 1px 綠線(rgba(140,227,74,.3))跟站內粉紫金主色無關。
   新版:.rm-bottomnav 只當定位殼(pointer-events:none,讓膠囊兩側的空隙可以點到底下內容),
   .rm-bn-items 才是那顆懸浮玻璃膠囊;#rm-bn-pill 是獨立絕對定位元素,只動 transform/width 不觸發重排。 */
.rm-bottomnav{position:fixed;left:0;right:0;bottom:0;z-index:100;pointer-events:none;background:transparent;transform:translateZ(0);-webkit-transform:translateZ(0);will-change:transform}
body{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
.rm-bn-items{position:relative;pointer-events:auto;display:flex;align-items:center;justify-content:space-around;
  margin:0 12px calc(10px + env(safe-area-inset-bottom,0px));border-radius:26px;padding:8px 6px 9px;
  transform-origin:50% 100%;transition:transform .34s cubic-bezier(.34,1.4,.5,1),padding .26s cubic-bezier(.4,0,.2,1);
  background:rgba(255,255,255,.13);
  -webkit-backdrop-filter:blur(30px) saturate(200%) brightness(1.25);
  backdrop-filter:blur(30px) saturate(200%) brightness(1.25);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),
             inset 0 -1px 0 rgba(255,255,255,.10),
             0 14px 38px rgba(0,0,0,.55)}
/* 整條 bar 按下微放大(JS 點擊時加 .rm-bn-pop,170ms 後移除) */
.rm-bn-items.rm-bn-pop{transform:scale(1.028)}
/* 滑動 pill:寬度與位置由 JS 寫 inline style,這裡只定外觀與曲線 */
.rm-bn-pill{position:absolute;top:8px;bottom:9px;left:0;width:0;border-radius:17px;pointer-events:none;z-index:0;
  background:rgba(196,104,95,.55);border:1px solid rgba(240,170,150,.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .42s cubic-bezier(.34,1.4,.5,1),width .42s cubic-bezier(.34,1.4,.5,1),opacity .2s linear}
/* 收起態(不在底部四項的頁面:存款/提款/個人中心/通知/綁卡…,以及桌機整條 nav 隱藏時)。
   ⚠️ 不可以改回舊的 width:0 收法 —— pill 有 1px 粉框 + inset 內光,寬度歸零後左右兩條邊框貼在一起,
      會在 footer 上渲染成一條粉紅豎線(董事長 2026-08-20 回報的 bug)。
   ⚠️ 也不可以用 display:none —— 那會讓下次出現時 transition 失效,pill 用跳的。
   opacity:0 連框帶光帶底一起隱形,幾何原地凍結,回來時由 JS 先無動畫定位再淡入。 */
.rm-bn-pill.rm-bn-pill-off{opacity:0}
.rm-bn-item{flex:1;min-height:50px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  cursor:pointer;position:relative;z-index:1;-webkit-tap-highlight-color:transparent;
  color:#e8ecf5;font-weight:600;font-size:10.5px;white-space:nowrap;background:transparent}
.rm-bn-item>span:last-child{max-height:16px;transition:color .2s,max-height .26s cubic-bezier(.4,0,.2,1),opacity .18s linear,margin .26s}
.rm-bn-ic{width:26px;height:26px;display:flex;align-items:center;justify-content:center;transition:transform .3s cubic-bezier(.34,1.4,.5,1)}
.rm-bn-ic svg{width:26px;height:26px}
/* outline ↔ fill 兩套 path:未選顯 .linep(描邊),選中顯 .fillp(實心剪影) */
.rm-bn-ic svg .fillp{display:none;stroke:none}
.rm-bn-ic svg .linep{display:inline;fill:none;stroke:#e8ecf5;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rm-bn-active{color:#fff;font-weight:800;text-shadow:0 0 8px rgba(196,104,95,.5)}
.rm-bn-active .rm-bn-ic svg .linep{display:none}
.rm-bn-active .rm-bn-ic svg .fillp{display:inline;fill:#fff;filter:drop-shadow(0 0 6px rgba(196,104,95,.75))}
.rm-bn-active .rm-bn-ic{transform:translateY(-1px) scale(1.06)}
/* 2026-09-14 董事長:iPhone 式底欄 —— 下滑收起(縮矮 + 只留 icon、標題隱藏),上滑/到頂展開。
   收起後每格仍 ≥44px 觸控(touch-target-size);只動 pill 自身的 padding/label 高度,body 版位不變 → 不觸發整頁重排(layout-shift-avoid);
   標題只在滑動時暫隱,上滑/到頂即回,discoverability 不失(nav-label-icon)。動效遵 reduced-motion(見下方降級二)。 */
.rm-bn-compact{padding-top:5px;padding-bottom:6px}
.rm-bn-compact .rm-bn-item{min-height:44px;gap:0}
.rm-bn-compact .rm-bn-item>span:last-child{max-height:0;min-height:0;opacity:0;margin:0;overflow:hidden;pointer-events:none}
/* ⚠️ 降級一:不支援 backdrop-filter(低階 Android / 舊 WebView)→ 換成最接近玻璃視覺的實色,
   否則 rgba(255,255,255,.13) 會變成一塊看得到底下內容的白紗,字全糊。 */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .rm-bn-items{background:var(--card3)}
}
/* ⚠️ 降級二:玩家開了「減少動態效果」→ pill 直接就位、bar 不縮放、icon 不彈。
   泰國主力機不少是中低階,blur 本來就吃 GPU,這裡順便把動效成本歸零。 */
@media(prefers-reduced-motion:reduce){
  .rm-bn-items,.rm-bn-pill,.rm-bn-ic,.rm-bn-item>span:last-child{transition:none!important}
  .rm-bn-items.rm-bn-pop{transform:none}
}

.rm-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:190}

/* footer */
.rm-footer{margin-top:30px;padding:26px 4px 10px;border-top:1px solid rgba(255,255,255,.06);text-align:center;color:var(--muted)}
.rm-footer-brand{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:12px}
.rm-footer-brand img{width:40px;height:40px;border-radius:50%}
.rm-footer-brand .rm-logo{width:40px;height:40px}
/* ===== 品牌字標(2026-09-03 董事長提供的 Bossku55 紫金字標,取代「圓徽章 + BOSSKU55 文字」組合)=====
   ⚠️ 只換站頭與 footer。側欄頭像 / 個人頁頭像仍走 #rmLogo 圓徽章 —— 橫式字標(5.11:1)
   當頭像會被壓扁,而且 favicon / PWA 圖示也必須留圓徽章(16px 下橫式字標糊成一條線)。
   ⚠️ 不套 .rm-logo 那組粉色 drop-shadow 光暈:字標本身是紫+金漸層,再加粉光會打架。
   高度跟著原本 .rm-brand-name 的字級走(26/18/15 → 36/26/22),寬度由 aspect 自動。 */
/* 2026-09-03:字標藍色段對深底對比度只有 1.09,而且「整站底色調淺一點」數學上行不通 ——
   藍筆畫亮度 L=0.0212 卡在現底色 0.0156 與稍淺 0.0237 之間,微調會**穿過它自己的亮度**、
   對比反而降到 1.04;要達 3:1 底色得亮到 ~#6b7ba6,那已不是深色主題。
   折衷:只給字標一塊淺色底板(局部浅底),不動整站與站頭其餘元素。
   實測藍色段對 #eef0f6 的對比度 ≈ 12.9(從 1.09 拉到達標)。 */
.rm-wordmark{height:50px;width:auto;display:block;flex:0 0 auto}
.rm-topbar-centered .rm-wordmark{height:50px}   /* 2026-09-10:董事長嫌 header logo 太小,34 → 50。
   新 logo(藍→紫+金皇冠,亮藍佔多數)對深底對比度沒舊版問題,放大不失細節。 */
.rm-footer-brand .rm-wordmark{height:26px}
/* R99 品牌 logo 亮亮發光(不套 provider tile 的 .rm-logo) */
.rm-brand .rm-logo,.rm-footer-brand .rm-logo,.rm-uc-logo,.rm-pavatar{filter:drop-shadow(0 0 4px rgba(210,59,208,.55)) drop-shadow(0 0 9px rgba(196,104,95,.35))}
.rm-footer-brand span{font-size:22px;font-weight:800;color:#fff}
.rm-footer-desc{font-size:13px;line-height:1.7;max-width:560px;margin:0 auto 14px}
.rm-footer-copy{font-size:12px;opacity:.7}
/* 董事長 2026-10-15:footer Game Provider 條 + 18+ */
.rm-footer-sec{margin-bottom:20px}
.rm-footer-h{font-size:12px;font-weight:600;color:#fff;margin:0 0 12px;text-align:left}
.rm-footer-provs{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;justify-content:center;max-width:860px;margin:0 auto}
.rm-footer-prov{height:26px;width:auto;max-width:78px;object-fit:contain;opacity:.5;filter:grayscale(1);transition:opacity .2s,filter .2s}
.rm-footer-prov:hover{opacity:.95;filter:grayscale(0)}
.rm-footer-rg{margin:2px 0 12px}
.rm-footer-18{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;border:2px solid var(--muted);color:var(--muted);font-size:11px;font-weight:900;letter-spacing:-.02em}
/* 董事長 2026-10-15:footer 排版完全照 msia8 — 676px 置中,兩行三等欄(Row1:Cert/Security/RG;Row2:Follow Us/Payment/License),所有圖高 20px 透明無框 */
.rm-footer-rows{max-width:676px;margin:0 auto 6px;text-align:left}
.rm-footer-row{display:grid;grid-template-columns:repeat(3,1fr);gap:24px 16px;margin-bottom:22px}
.rm-footer-col{min-width:0}
.rm-footer-items{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.rm-footer-badge{height:20px;width:auto;max-width:100%;object-fit:contain}
.rm-footer-lic{height:56px;width:auto;object-fit:contain}
.rm-footer-pays{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.rm-footer-pay{display:inline-flex;align-items:center}
.rm-footer-pay img{height:20px;width:auto;max-width:72px;object-fit:contain;display:block}
.rm-footer-socials{display:flex;flex-wrap:wrap;gap:8px}
.rm-footer-soc{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;color:#fff;opacity:.85;transition:opacity .2s}
.rm-footer-soc:hover{opacity:1}
.rm-footer-soc svg{width:20px;height:20px;display:block}
.rm-footer-prov-sec{max-width:1080px;margin:16px auto 0}
.rm-footer-prov-sec .rm-footer-h{text-align:center}
/* 手機:照 msia8 堆成單欄全寬(每塊 full-width 疊下來) */
@media(max-width:640px){
  .rm-footer-row{grid-template-columns:1fr;gap:20px;margin-bottom:20px}
  .rm-footer-rows{max-width:420px}
}

/* ===== responsive ===== */
@media(max-width:900px){
  .rm-topbar{padding:12px;gap:8px;min-height:79px}   /* header height 79px */
  .rm-brand{gap:8px}
  .rm-brand-name{font-size:18px}  /* show brand text next to logo on mobile too */
  .rm-wordmark{height:38px}   /* 2026-09-10:手機 header logo 放大 26→38 */
  .rm-logo{width:42px;height:42px}
  .rm-topbar-right{gap:8px}
  .rm-cta-btn{padding:14px}
}
/* grid columns: 6 / 5 / 4 / 3 at 891 / 890 / 686 / 600 */
/* 廠商網格 #rm-srcs 跟遊戲牆走同一組斷點(§4 consistency);gap 一律 8(§2 touch-spacing 下限) */
@media(max-width:890px){ .rm-grid{grid-template-columns:repeat(5,1fr)} }
@media(max-width:686px){ .rm-grid{grid-template-columns:repeat(4,1fr);gap:8px} }
@media(max-width:600px){ .rm-grid{grid-template-columns:repeat(3,1fr);gap:8px} }  /* 每排 3 個:名字移到磚外兩行後,4 欄太窄會逼出第 3 行 */
/* narrow phones: brand text + register + login all fit by shrinking logo/brand/buttons */
@media(max-width:520px){
  .rm-info-value{font-size:15px} .rm-info{padding:4px 3px}  /* keep big bold values on mobile; ellipsis handles tight cells */
  .rm-topbar{padding:11px 10px;gap:6px}
  .rm-topbar-right .rm-btn{width:78px;font-size:12px}
  .rm-brand{gap:6px}
  .rm-brand-name{font-size:15px;letter-spacing:0}
  .rm-wordmark{height:30px}   /* 2026-09-10:窄機 header logo 放大 22→30 */
  .rm-logo{width:36px;height:36px}
  /* ⚠️ 這裡刻意不縮 .rm-hamburger:44×44 是觸控下限,窄機更要保住(董事長 2026-08-19) */
  .rm-topbar-right{gap:6px}
}
/* tiny foldables (Galaxy Fold ~344px): buttons stay uniform; shrink brand/logo to make room */
@media(max-width:384px){
  .rm-topbar{padding:10px 8px}
  .rm-brand-name{font-size:13px}
  .rm-logo{width:32px;height:32px}
  /* tiny foldables (~344px): shrink both buttons together (still equal) for comfortable margin */
  .rm-topbar-right{gap:5px}
  .rm-topbar-right .rm-btn{width:68px;font-size:11px}
}

/* ===== desktop: sidebar pinned left (full-height bg); topbar search aligned to content frame ===== */
@media(min-width:1280px){
  .rm-hamburger{display:none}
  .rm-bottomnav{display:none!important}
  .rm-topbar-centered .rm-brand{position:static;transform:none}   /* desktop:logo 不置中,回正常流 */
  body{padding-bottom:0}   /* desktop 隱藏 nav 就不留位 */
  .rm-backdrop{display:none!important}
  /* topbar inner (search + auth) shares the same centered frame as content; logo floats over sidebar */
  /* header stays pinned on scroll (base rule is sticky; "relative" here used to override
     it and let the header scroll away). sticky is still a containing block for the absolute logo. */
  .rm-topbar{position:sticky;top:0;
    /* 對齊框 = 側欄 300 + 內容 max 1560 = 1860,讓搜尋列左右緣與放寬後的內容一致 */
    padding-left:max(300px, calc(300px + (100vw - 1860px)/2));
    padding-right:max(24px, calc((100vw - 1860px)/2))}
  .rm-topbar-left{position:absolute;left:30px;top:50%;transform:translateY(-50%)}
  .rm-search-top{display:flex;flex:1;height:46px;margin:0 20px 0 0;max-width:none}
  .rm-content .rm-search{display:flex;max-width:520px;margin:0 0 16px}   /* W8-012 董事長 2026-10-15:桌機也顯示大廳搜尋框(原為 topbar 搜索讓位而隱藏,但 topbar 搜索沒建) */
  /* Desktop sidebar (at 1900px): total 300 wide, cards 246 @x27, first card 43px below the
     79px header; item content hugs LEFT (icon 27px from card edge, 18px, label at 55) */
  .rm-sidebar{position:fixed;left:0;top:0;bottom:0;height:100vh;width:300px;max-width:none;z-index:80;
    background:var(--panel);transform:none;overflow-y:auto;padding:122px 27px 40px;gap:32px}
  .rm-sidebar-head{display:none}  /* persistent desktop sidebar needs no close button */
  .rm-menu-item{padding:17px 26px 17px 27px;gap:10px}
  .rm-menu-item img,.rm-menu-item .rm-flag{width:18px;height:18px}
  .rm-body{display:block;margin-left:300px}
  /* 2026-09-08 放寬:1100 → 1560,消掉寬螢幕兩側各 250px 黑邊。遊戲牆吃滿寬度。 */
  .rm-content{max-width:1560px;margin:0 auto;padding:16px 0 48px}
  /* Deploy 2:兩欄 Hero = banner 左(1fr)+ 歡迎卡右(340)。align-items:start 讓 banner 保持自身
     比例高度不被拉伸變形;歡迎卡 = 品牌字 + 歡迎文案(RM_T) + Register/Login。 */
  .rm-hero{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:stretch;margin-bottom:14px}   /* 董事長 2026-10-05:minmax(0,1fr) 讓 banner 欄能收縮,窄桌面(~1280)不會溢出 */
  /* ⚠️ banner 有 aspect-ratio:800/312:align-items:stretch 會把它拉到和歡迎卡等高,再由 aspect 反推出過寬的寬度 → 壓到歡迎卡(1280 實測溢出 188px)。
     改 align-self:start + min-width:0 → banner 按欄寬定寬、aspect 推高度,不再被拉伸溢出。寬螢幕兩者自然等高,窄桌面 banner 略矮但乾淨無重疊。 */
  .rm-hero .rm-banner{margin:0;align-self:start;min-width:0}
  .rm-hero-side{display:flex;flex-direction:column;gap:14px;
    background:linear-gradient(160deg,var(--card2),var(--card));border:1px solid var(--border);border-radius:16px;padding:22px 20px}
  .rm-hero-welcome{display:block}
  .rm-hero-wm{height:30px;width:auto;margin-bottom:12px}
  .rm-hero-t{font-size:19px;font-weight:800;line-height:1.3;margin-bottom:6px}
  .rm-hero-p{font-size:13px;color:var(--muted);line-height:1.6}
  /* ② 董事長 2026-10-07:欢迎卡 3 卖点 bullet(填满卡片死空间)。桌機專屬(整塊在 1280 media 內)。
     icon chip 用品牌青(--green1)淡底;文字 #e7ebf3 於深卡面(對比 >12:1)。 */
  .rm-hero-feats{display:flex;flex-direction:column;gap:11px;margin-top:4px}
  .rm-hero-feat{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:#e7ebf3;line-height:1.35}
  .rm-hf-ic{flex:0 0 auto;width:30px;height:30px;border-radius:9px;background:rgba(251,213,196,.12);display:inline-flex;align-items:center;justify-content:center;color:var(--green1)}
  .rm-hf-ic svg{width:17px;height:17px}
  .rm-hero-side .rm-inforow-band{margin-top:auto}
  .rm-hero-side .rm-cta-inline{flex-direction:column;gap:10px;width:100%}
  .rm-hero-side .rm-cta-inline .rm-btn{width:100%;min-width:0}
  .rm-grid{grid-template-columns:repeat(6,1fr)}
  /* Deploy 2:分類 tab 改藥丸(桌機),active 漸層高亮。手機維持原盒裝橫排(此規則只在 >=1280) */
  /* 覆蓋全域的 #rm-tabs{display:grid;repeat(5,1fr)}(底線式等分),桌機改 flex 藥丸(內容寬、左對齊)。
     ① 吸頂:捲遊戲清單時分類列釘在 topbar(79px)下方,換分類永遠一鍵可達。
        背景 band(var(--bg)+淡毛玻璃)蓋住捲上來的遊戲;釘住時下緣一道柔陰影當視覺分界。 */
  #rm-tabs{display:flex;align-items:center;position:sticky;top:62px;z-index:50;
    background:var(--bg);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
    border:0;box-shadow:0 8px 14px -8px rgba(0,0,0,.55);padding:10px 0;margin:0 0 16px;
    gap:10px;overflow:visible;justify-content:flex-start;flex-wrap:wrap}
  /* 2026-09-10:桌機分類改扁平 icon-over-label + 漸層底線(對齊 mockup .catcard,不再用藥丸) */
  #rm-tabs .rm-tab{width:auto;height:auto;flex-direction:column;gap:7px;padding:12px 14px 14px;border-radius:0;
    background:transparent;border:0;transition:color .14s}
  #rm-tabs .rm-tab .rm-tab-ic{width:28px;height:28px}
  #rm-tabs .rm-tab span{font-size:14px}
  /* 選中:只留漸層底線(base .rm-tab-active:after),不加藥丸底/光暈/上浮 */
  #rm-tabs .rm-tab-active{background:transparent;border-color:transparent;box-shadow:none;transform:none}
  #rm-tabs .rm-tab-active span{color:#fff}
  .rm-authpage{margin:0 6% 0 auto}  /* login/register form sits right of centre */
  /* on an open info/auth page: hide topbar search but keep Register/Login pinned right */
  body.rm-authopen .rm-search-top{display:none}
  body.rm-authopen .rm-topbar-right{margin-left:auto}
}
/* 2026-09-08 寬螢幕:內容夠寬時遊戲牆 6 → 8 欄(≥1600px 內容約 1300+,8 欄磚 ~155-185px) */
@media(min-width:1600px){ .rm-grid{grid-template-columns:repeat(8,1fr)} }
/* 桌機滑鼠 hover 回饋(手機無 hover 不受影響):provider 卡上浮描邊、遊戲磚上浮加陰影 */
@media(hover:hover) and (min-width:1280px){
  .rm-ptile{transition:border-color .14s,transform .14s,background .14s}
  .rm-ptile:hover{border-color:rgba(251,213,196,.5);transform:translateY(-2px);background:rgba(255,255,255,.10)}
  .rm-tile:hover .rm-thumb{box-shadow:0 10px 26px rgba(0,0,0,.5)}
  #rm-tabs .rm-tab{transition:color .14s}
  #rm-tabs .rm-tab:not(.rm-tab-active):hover{color:#fff}
  #rm-tabs .rm-tab:not(.rm-tab-active):hover img.rm-tab-ic{opacity:1;filter:none}
}

/* ===== auth as full page (lives inside content, topbar+nav stay) ===== */
.rm-authpage{display:none;max-width:460px;margin:0 auto;padding:8px 4px 40px}
/* inner page open: drop the home-page bottom padding reserves so a short page can't scroll
   into a big blank area under its button (Tom: deposit page must not scroll past Next) */
body.rm-authopen .rm-content{padding-bottom:20px}
/* inner pages (deposit/withdraw): tighten spacing so the whole form fits one phone screen
   (no scroll, no bottom hidden under the nav) + kill iOS rubber-band overscroll */
/* inner pages: scroll normally if needed, but hide the scrollbar bar (Tom: a little scroll is fine,
   just no visible scrollbar; button must never be cut) */
body.rm-authopen{scrollbar-width:none}
body.rm-authopen::-webkit-scrollbar{display:none}
body.rm-authopen .rm-content{padding-top:6px}
body.rm-authopen .rm-dephead{margin:0 0 10px}
body.rm-authopen .rm-chan{padding:8px 12px}
body.rm-authopen .rm-chan-row{margin-bottom:8px}
body.rm-authopen .rm-sec-label{margin:4px 0 6px}
body.rm-authopen .rm-sec-sub{margin:-2px 0 6px}
body.rm-authopen .rm-field{height:48px;margin-bottom:8px}
body.rm-authopen .rm-amt-box{height:48px;margin-bottom:10px}
body.rm-authopen .rm-amt-grid{gap:8px;margin-bottom:0}
body.rm-authopen .rm-amt{padding:9px 0}
body.rm-authopen .rm-modal-submit{height:48px;margin-top:8px}
/* stretch the inner page to fill the space between header and nav, then push the deposit button
   to the very bottom — it sits just above the nav on ANY screen height (no cut, no big blank) */

/* inner pages (deposit etc.): no visible scrollbar (Tom) — content still scrolls if it must */
body.rm-authopen{scrollbar-width:none}
body.rm-authopen::-webkit-scrollbar{display:none}
body.rm-authopen .rm-authpage{padding-bottom:10px}
.rm-authpage.on{display:block}
/* login has only 2 fields — push it down so the form sits nearer the middle */
.rm-authpage.rm-auth-login{padding-top:9vh}
body.rm-authopen .rm-hero,body.rm-authopen .rm-marquee,body.rm-authopen .rm-banner,body.rm-authopen .rm-cta-row,
body.rm-authopen .rm-inforow-band,body.rm-authopen .rm-tabs,body.rm-authopen .rm-content .rm-search,
body.rm-authopen #rm-grid,body.rm-authopen #rm-srcs,body.rm-authopen .rm-footer,
body.rm-authopen .rm-sec,body.rm-authopen .rm-more,
/* 🔴 2026-09-22 董事長:.rm-lobby-card(2026-09-03 包遊戲區的有色差框)外殼未進隱藏清單 ——
   authopen 頁把框內 #rm-grid/#rm-srcs/.rm-sec/.rm-more 都藏了,但外殼(底色+邊框+padding)沒藏,
   於是每個內頁 gtest 使用者卡下方漏出一條空框 bar。補藏外殼(首頁非 authopen 不受影響,大廳照舊)。 */
body.rm-authopen .rm-lobby-card,
body.rm-authopen .rm-pop-head,body.rm-authopen .rm-poprow{display:none!important}
/* 搜尋中:遊戲區標題(寫的是「目前來源」)會跟搜尋結果對不上 → 藏掉。
   廠商區標題/網格照舊留著(搜尋清空後要能一眼看回原本的來源)。 */
body.rm-searching #rm-sec-games{display:none!important}
.rm-authback{display:inline-flex;align-items:center;gap:6px;color:#b39aa2;cursor:pointer;font-size:15px;margin:6px 0 2px}
.rm-authback:before{content:"‹";font-size:24px;line-height:1}
.rm-modal-title{font-size:32px;font-weight:700;margin:2px 0 22px}
/* Login mobile input: bg #1f1217, 1px white/30% border, radius 10, h 52,
   shadow 6/6/14 .25; 40px white line-art icon on the left; 20px/500 input text */
.rm-field{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid rgba(255,255,255,.3);border-radius:10px;padding:0 12px;height:52px;margin-bottom:14px;box-shadow:6px 6px 14px rgba(0,0,0,.25)}
.rm-field img,.rm-field-ico{width:42px;height:42px;object-fit:contain;opacity:1;flex:0 0 auto}
/* Error frame (1px solid #c7240f); focus (#8a2f45) always wins so
   the box turns blue the moment you tap it, replacing the red — one glance shows where you are */
.rm-field.rm-err{border-color:#c7240f}
.rm-field:focus-within,.rm-field.rm-err:focus-within{border-color:#8a2f45}
.rm-field .rm-prefix{color:#fff;font-weight:400;font-size:20px;padding-right:0}  /* no divider after +66, plain 20px */
.rm-field input{flex:1;background:transparent;border:0;outline:0;color:#fff;font-size:20px;font-weight:500;font-family:inherit;min-width:0;text-overflow:ellipsis}
/* Bank dropdown placeholder: centred, 20px/700, light rgba(255,255,255,.5) — not solid white */
.rm-field .rm-select{flex:1;background:transparent;border:0;outline:0;color:rgba(255,255,255,.5);font-size:20px;font-weight:700;font-family:inherit;appearance:none;-webkit-appearance:none;cursor:pointer;text-align:center;text-align-last:center}
/* bank account no: centred + same light placeholder as the select */
.rm-field input#rm-bkno{text-align:center}
.rm-field input#rm-bkno::placeholder{color:rgba(255,255,255,.5)}
/* withdraw page: account no + amount centred (Tom) */
.rm-amt-box input#rm-wd-amt{text-align:center;padding-left:0}
/* ---- custom bank dropdown (native select can't show a logo; this can) ---- */
.rm-bankdd{position:relative;justify-content:space-between;cursor:pointer;gap:12px}
.rm-bankdd-label{flex:1;display:flex;align-items:center;justify-content:center;gap:12px;color:rgba(255,255,255,.5);font-size:20px;font-weight:700;overflow:hidden}
.rm-bankdd-label.sel{color:#fff}
.rm-bankdd-name{font-size:16px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rm-bankdd .rm-arrow{margin-left:0;flex:0 0 auto;border-color:#b39aa2;transition:transform .15s}
.rm-bankdd.open .rm-arrow.rm-down{transform:rotate(-45deg);margin-top:4px}   /* flip chevron up when open */
/* selected/option bank badge stands in for the logo */
.rm-bankbadge{flex:0 0 auto;width:42px;height:42px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;color:#fff;letter-spacing:.3px}
/* popup: a real floating card (detached from the trigger), with an inner Search box + compact rows */
.rm-bankdd-pop{display:none;background:var(--card2);border:1px solid rgba(255,255,255,.22);border-radius:12px;
  box-shadow:0 14px 34px rgba(0,0,0,.55);margin:8px 0 14px;padding:8px;max-height:300px;overflow-y:auto;scrollbar-width:none}
.rm-bankdd-pop::-webkit-scrollbar{display:none}
.rm-bankdd-pop.on{display:block}
.rm-bankdd-search{padding:2px 2px 8px;position:sticky;top:0;background:var(--card2);z-index:2}
.rm-bankdd-search input{width:100%;background:var(--sunken);border:1px solid rgba(255,255,255,.18);border-radius:8px;
  padding:11px 13px;color:#fff;font-size:14px;outline:none;font-family:inherit}
.rm-bankdd-search input:focus{border-color:#8a2f45}
.rm-bankdd-search input::placeholder{color:var(--muted)}
.rm-bankdd-opt{display:flex;align-items:center;gap:12px;padding:11px 12px;cursor:pointer;border-radius:8px}
.rm-bankdd-opt:hover{background:rgba(255,255,255,.07)}
.rm-bankdd-opt span{font-size:15px;font-weight:500;color:#eef0f6}
/* 內文 span(bank name)拿剩餘寬,pill 是另一個 span 但走 flex:0(見 .rm-wd-pill)不搶寬;
   :not(.rm-wd-pill):not(.rm-bankbadge) 才拿 flex:1(fallback bankbadge 直接子 span 也會誤中) */
.rm-bankdd-opt>span:not(.rm-wd-pill):not(.rm-bankbadge){flex:1;min-width:0;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rm-bankdd-opt .rm-cardsub{display:block;margin-top:2px;color:var(--muted);font-size:12px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rm-bankdd-opt .rm-bank-logo,.rm-bankdd-opt .rm-bankbadge{width:30px;height:30px}
.rm-bankdd-opt .rm-bankbadge{font-size:10px;border-radius:7px}
/* ---- withdraw: dark rows + real bank logos (Logo_*.webp on white circle) ---- */
/* withdraw amount line reuses the deposit .rm-amt-box (same size/typography = coherent) */
.rm-wd-all{flex:0 0 auto;background:#fff;border:0;color:#111;border-radius:9px;padding:9px 16px;font-weight:700;font-size:14px;cursor:pointer;font-family:inherit;box-shadow:4px 4px 8px rgba(0,0,0,.3)}
/* softened white (Tom: 不要死白) — off-white gradient instead of flat #fff */
button.rm-soft{background:linear-gradient(180deg,#f2f4f7,#d5d9e2);color:#111;border:1px solid rgba(255,255,255,.35)}
/* bank dropdown: logo + name all left-aligned, grey like the Enter Amount placeholder;
   logo itself = .rm-bank-logo, the same class/size the deposit page uses */
.rm-wd-bankdd .rm-bankdd-label{justify-content:center}          /* bank name centred (Tom) */
/* logo pinned to the far LEFT of the field while the name stays centred (Tom) */
.rm-wd-bankdd .rm-bankdd-label .rm-bank-logo{width:30px;height:30px;position:absolute;left:12px;top:50%;transform:translateY(-50%)}
.rm-wd-bankdd .rm-bankdd-label.sel{color:rgba(255,255,255,.5)}
.rm-wd-bankdd .rm-bankdd-label .rm-bankdd-name{color:rgba(255,255,255,.5);font-weight:500}  /* 16/500 = deposit's bank name */
/* account no: display-only (no focus/caret), left-aligned, deposit-matched 16/500, grey */
.rm-wd-static{gap:12px}  /* icon-to-text = the 12px the bank row above uses */
.rm-wd-static input#rm-wd-accno{color:rgba(255,255,255,.5);pointer-events:none;text-align:center;font-size:22px;font-weight:500}
/* min line: slightly smaller than .rm-sec-sub (double class so it outranks the 13px base rule) */
.rm-sec-sub.rm-wd-min{font-size:12px}
.rm-field .rm-select option{background:var(--sunken);color:#fff}
.rm-select-field{position:relative}
.rm-select-field:after{content:"";position:absolute;right:16px;top:50%;width:9px;height:9px;border-right:2px solid #b39aa2;border-bottom:2px solid #b39aa2;transform:translateY(-70%) rotate(45deg);pointer-events:none}
.rm-field input::placeholder{color:#8a7178}
.rm-field .rm-eye{cursor:pointer;opacity:1;width:42px;height:42px;object-fit:contain;flex:0 0 auto}
/* Auth submit button: h 42 — deliberately SMALLER than the 52px input fields */
.rm-modal-submit{width:100%;height:44px;border:0;border-radius:10px;background:#fff;color:#111;font-weight:700;font-size:18px;cursor:pointer;margin-top:8px;font-family:inherit;box-shadow:6px 6px 12px rgba(0,0,0,.25)}
.rm-modal-submit.rm-green{background:var(--grad);color:#fff}
.rm-modal-err{color:#ff6b6b;font-size:13px;margin:-6px 0 12px;min-height:16px}
.rm-field-err.ok{color:var(--green1)}   /* username availability: green ✓ when free */
/* inline field error (red, under the input) — for phone-length validation */
.rm-field-err{color:#e0250c;font-size:13px;font-weight:500;margin:-8px 0 12px 4px;min-height:0}
/* 2026-10-13 註冊 OTP 列:輸入框 + 右側「發送驗證碼」鈕(同主按鈕漸層、縮小一號);倒數中 disabled 變淡。手機/桌機同一套,不碰其他 .rm-field */
.rm-otp-field .rm-otp-send{flex:0 0 auto;height:34px;padding:0 14px;border:0;border-radius:8px;background:var(--grad);color:#fff;font-weight:700;font-size:14px;font-family:inherit;cursor:pointer;white-space:nowrap}
.rm-otp-field .rm-otp-send:disabled{opacity:.55;cursor:default}
.rm-field-hint{color:rgba(255,255,255,.75);font-size:13px;margin:-8px 0 12px 4px;min-height:0}
.rm-field-hint:empty{display:none}
.rm-field-err:empty{margin:0}
.rm-login-opts{display:flex;align-items:center;justify-content:space-between;margin:2px 2px 18px}
.rm-remember{display:flex;align-items:center;gap:10px;cursor:pointer;color:var(--muted);font-size:14px}
/* Round green check (not a square checkbox) */
.rm-remember input{appearance:none;-webkit-appearance:none;width:22px;height:22px;border-radius:50%;
  border:2px solid #5a5c65;background:transparent;cursor:pointer;flex:0 0 auto;margin:0}
.rm-remember input:checked{background:#22c440 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M3 8.5l3.2 3.2L13 5" stroke="white" stroke-width="2.4" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>') center/13px no-repeat;border-color:#22c440}
.rm-forgot{color:#c7cbd6;font-size:14px;text-decoration:underline;cursor:pointer}
/* Redirect box: bordered container, text left + button right */
.rm-modal-switch{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:18px;
  min-height:58px;padding:8px 8px 8px 16px;border:1px solid rgba(255,255,255,.3);border-radius:10px}
.rm-switch-txt{color:#c7cbd6;font-size:12px;font-weight:400}
.rm-switch-btn{flex:0 0 auto;min-width:88px;height:42px;padding:0 16px;border:1px solid rgba(255,255,255,.3);
  border-radius:10px;background:var(--sunken);color:#fff;font-weight:700;font-size:13px;cursor:pointer;font-family:inherit;white-space:nowrap}
.rm-info-body{color:#c7cbd6;font-size:15px;line-height:1.7;margin:0 0 20px}

/* ---- Contact Us: LINE chat cards ---- */
.rm-line-card{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:14px;padding:15px 18px;margin-bottom:14px}
.rm-line-name{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px}
.rm-line-ico{width:26px;height:26px;object-fit:contain}
.rm-line-btn{background:#06c755;color:#fff;font-weight:700;text-decoration:none;padding:11px 24px;border-radius:10px;white-space:nowrap;cursor:pointer}
.rm-line-btn:active{filter:brightness(.9)}
/* ---- Promotion cards ---- */
.rm-promo-list{display:flex;flex-direction:column;gap:16px}
.rm-promo-card{background:transparent;border:1px solid rgba(255,255,255,.25);border-radius:12px;overflow:hidden}
.rm-promo-banner{position:relative;height:150px;border-radius:12px}
/* QQ288 式 Rewards:分頁 tab(active 綠字+底線)+文字畫在 banner 內 */
.rm-promo-tabs{display:flex;margin:2px 0 14px;border-bottom:1px solid rgba(255,255,255,.12)}
.rm-promo-tab{flex:1;text-align:center;padding:11px 0;font-size:14px;font-weight:700;color:#9aa3b8;cursor:pointer;border-bottom:2px solid transparent}
.rm-promo-tab.on{color:var(--green1,#fbd5c4);border-bottom-color:var(--green1,#fbd5c4)}
.rm-promo-btext{position:absolute;left:16px;right:16px;bottom:14px;text-align:left}
.rm-promo-bt{font-size:21px;font-weight:800;color:#fff;text-shadow:0 2px 6px rgba(0,0,0,.45)}
.rm-promo-bs{font-size:12.5px;color:rgba(255,255,255,.9);margin-top:3px;text-shadow:0 1px 4px rgba(0,0,0,.45)}
.rm-promo-tag{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.45);color:#fff;font-size:12px;font-weight:700;padding:4px 12px;border-radius:8px}
.rm-promo-body{padding:14px 16px}
.rm-promo-title{font-size:17px;font-weight:800;margin-bottom:6px}
.rm-promo-desc{font-size:13px;color:var(--muted);line-height:1.6}
/* ---- Affiliate tier card ---- */
/* logged-in wallet widget */
.rm-wallet{display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,#6e2236,#8f3a4e,#b8526a);color:#fff;font-weight:700;
  padding:9px 16px;border-radius:12px;cursor:pointer;white-space:nowrap;box-shadow:6px 6px 12px rgba(0,0,0,.4)}
.rm-wallet small{opacity:.85;font-weight:500}

/* ===== logged-in header userbar ===== */
/* logged-in: the right side MUST be shrinkable (flex:0 1 auto + min-width:0), otherwise the
   parent's flex:0 0 auto keeps it rigid and the $⊕ deposit icon gets pushed off-screen (#8) */
.rm-topbar-right.rm-logged{display:flex;align-items:center;gap:14px;flex:0 1 auto;min-width:0}
.rm-bal{display:flex;align-items:center;gap:8px;background:linear-gradient(135deg,#6e2236,#8f3a4e);color:#fff;
  padding:8px 14px;border-radius:12px;cursor:pointer;white-space:nowrap}
.rm-bal-user{font-size:12px;opacity:.85;max-width:90px;overflow:hidden;text-overflow:ellipsis}
.rm-bal-amt{font-size:15px;font-weight:800}
.rm-bal-ref{font-size:14px;opacity:.85;cursor:pointer;padding:0 2px}
/* wallet-page Deposit/Withdraw pair: bright flat green + white text / white + black text */
.rm-btn-dep{background:var(--grad);color:#fff;border:1px solid rgba(255,255,255,.3)}
.rm-btn-wd{background:#fff;color:#000;border:1px solid rgb(90,92,101)}
.rm-logout{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);color:#fff;width:40px;height:40px;
  border-radius:10px;cursor:pointer;font-size:16px;flex:0 0 auto}
.rm-logout:active{transform:translateY(1px)}
/* logged-in-only sidebar items (hidden until authed) */
.rm-auth-only{display:none!important}
body.rm-authed .rm-menu-item.rm-auth-only{display:flex!important}
body.rm-authed .rm-menu-card.rm-auth-only{display:block!important}
body.rm-authed .rm-menu-sep.rm-auth-only{display:block!important}
.rm-logout-item span{color:#ff6b6b}
/* sidebar Top Up / Withdraw (logged-in, at top) */
body.rm-authed .rm-side-topbtns.rm-auth-only{display:flex!important}
/* Drawer Top Up / Withdraw: tall bordered pair */
.rm-side-topbtns{gap:16px}
.rm-side-topbtns .rm-btn{flex:1;height:52px;padding:0;font-size:20px;font-weight:700;border-radius:14px}
.rm-side-topup,.rm-side-wd{background:var(--card3);color:#fff;border:1px solid rgba(255,255,255,.3)}
/* login welcome popup */
.rm-pop-ov{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:960;display:flex;align-items:center;justify-content:center;padding:20px}  /* above game (z800) 且高於 loading(z950):錯誤/確認永遠可按 */
.rm-pop{position:relative;background:var(--card2);border-radius:18px;max-width:400px;width:100%;padding:30px 26px 26px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.rm-pop-close{position:absolute;top:12px;right:16px;font-size:24px;color:#b39aa2;cursor:pointer;line-height:1}
.rm-pop-art{font-size:56px;margin-bottom:12px}
.rm-pop-title{font-size:22px;font-weight:800;color:var(--green1);margin-bottom:12px}
.rm-pop-body{font-size:14px;color:#c7cbd6;line-height:1.7;margin-bottom:22px}
.rm-pop-ok{width:100%;height:50px;border:0;border-radius:12px;background:linear-gradient(135deg,#8f3a4e,#b8526a);color:#fff;font-weight:800;font-size:16px;cursor:pointer;font-family:inherit}
/* CMS entry popup: centered image + close X (shows when BO configures a popup) */
.rm-entrypop{position:relative;max-width:420px;width:100%}
.rm-entrypop img{width:100%;height:auto;border-radius:14px;display:block}
.rm-entrypop-close{position:absolute;top:-14px;right:-6px;width:34px;height:34px;border-radius:50%;border:0;background:rgba(0,0,0,.7);color:#fff;font-size:22px;line-height:1;cursor:pointer}
/* error alert popup: dark rounded card + orange-gradient Ok button */
.rm-alert{background:var(--card3);border:1px solid rgba(255,255,255,.14);border-radius:18px;max-width:420px;width:100%;padding:28px 24px 22px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.rm-alert-msg{font-size:19px;font-weight:700;color:#fff;line-height:1.5;margin-bottom:22px;word-break:break-word;overflow-wrap:anywhere}
/* 彈窗圖示(SVG,不用 emoji):存款解鎖引導等用 */
.rm-alert-ico{display:flex;align-items:center;justify-content:center;color:var(--pink2);margin-bottom:10px}
.rm-alert-ok{width:100%;height:50px;border:0;border-radius:12px;background:linear-gradient(90deg,#c0392b 0%,#d9622a 45%,#f0b429 100%);color:#fff;font-weight:800;font-size:17px;cursor:pointer;font-family:inherit}
/* confirm variant: blue-gradient Ok + underlined Cancel below */
.rm-confirm-ok{background:linear-gradient(90deg,#8a2f45 0%,#d98a76 100%)}
.rm-confirm-cancel{margin-top:16px;text-align:center;color:#fff;font-size:15px;text-decoration:underline;cursor:pointer}
/* ---- 未完成存款單 resume modal(董事長 2026-08-13 堵刷單;v2 重要訊息一律居中 modal,不用 toast)----
   本站沒有姊妹站的 --pa-* 一組 token,金額字用站內既有的 CTA 漸層(同 .rm-alert-ok)、
   取消鈕用中性灰,不另外引入新顏色。 */
.rm-depres-ic{display:block;margin:0 auto 12px;color:var(--gold)}
.rm-depres-title{font-size:18px;font-weight:800;color:#fff;line-height:1.45;margin-bottom:14px}
.rm-depres-amt{font-size:30px;font-weight:900;line-height:1.2;background:linear-gradient(90deg,#c0392b 0%,#d9622a 45%,#f0b429 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.rm-depres-amtlbl{font-size:12px;color:var(--muted);margin:2px 0 16px}
.rm-depres-rows{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);border-radius:12px;padding:6px 14px;margin-bottom:14px}
.rm-depres-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 0;font-size:14px}
.rm-depres-row span{color:var(--muted)}
.rm-depres-row b{color:#fff;font-weight:700}
.rm-depres-cd{font-variant-numeric:tabular-nums}
.rm-depres-note{font-size:12.5px;color:var(--muted);line-height:1.6;margin-bottom:16px}
.rm-depres .rm-alert-ok{margin-bottom:10px}
.rm-depres-cancel{width:100%;height:46px;border-radius:12px;background:transparent;border:1px solid rgba(255,255,255,.22);color:var(--muted);font-weight:700;font-size:15px;font-family:inherit;cursor:pointer}
.rm-depres-cancel:disabled{opacity:.5;cursor:not-allowed}
.rm-depres-hint{font-size:11.5px;color:var(--muted);opacity:.8;line-height:1.55;margin-top:8px}
/* 付款頁的付款連結倒數(PG 頁被過期守衛蓋掉後,玩家還看得到剩餘時間) */
.rm-paycd{display:flex;align-items:center;justify-content:space-between;gap:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);border-radius:10px;padding:10px 14px;margin:0 0 12px;font-size:13.5px}
.rm-paycd span{color:var(--muted)}
.rm-paycd b{color:var(--gold);font-weight:800;font-size:15px}
/* 付款頁的取消入口:小字不抢主行动(主行动仍是付款) */
.rm-paycancel-row{text-align:center;margin:-6px 0 12px}
.rm-paycancel{font-size:12.5px;color:var(--pink2);text-decoration:underline;cursor:pointer}
/* ---- withdraw (verified bank) ---- */
.rm-wd-etarow{display:flex;gap:12px;margin:2px 0 14px}
.rm-wd-eta{flex:1;display:flex;align-items:center;gap:8px;background:var(--card);border-radius:10px;padding:12px 14px;color:#ff3b30;font-weight:700;font-size:15px}
.rm-wd-etaico{font-size:18px;line-height:1}
.rm-wd-report{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid #35d05f;border-radius:10px;padding:12px 10px;color:#fff;font-weight:600;font-size:14px;cursor:pointer}
.rm-wd-report img{width:24px;height:24px;object-fit:contain}
.rm-wd-carddd{height:auto;min-height:64px;padding:10px 14px}
.rm-wd-cardsel{flex:1;display:flex;align-items:center;justify-content:center;gap:12px;min-width:0}
.rm-wd-cardtxt{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0}
.rm-wd-cardtxt span{font-size:14px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rm-wd-cardtxt b{font-size:16px;font-weight:700;color:#fff}
.rm-wd-balcard{padding:18px 20px}
/* freespin voucher 附加資訊 + 1x 流水說明 */
.rm-fs-vsub{font-size:12px;color:var(--muted)}
.rm-fs-rulenote{margin:10px 2px 4px;color:var(--muted);font-size:12.5px;line-height:1.6}
/* Turnover Level Free Spin(Level 1-3)卡片 */
.rm-tl-wrap{margin-bottom:14px}
.rm-tl-card{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:10px;margin-top:8px}
.rm-tl-img{width:44px;height:44px;object-fit:cover;border-radius:9px;flex:0 0 auto}
.rm-tl-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.rm-tl-head{font-size:13px;color:#fff;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rm-tl-head b{color:#e8b64c}
.rm-tl-head span{color:var(--muted);font-weight:500;font-size:12px}
.rm-tl-bar{height:7px;border-radius:5px;background:rgba(255,255,255,.1);overflow:hidden}
.rm-tl-fill{height:100%;background:linear-gradient(90deg,var(--green1),var(--green2));border-radius:5px;transition:width .3s}
.rm-tl-prog{font-size:11px;color:var(--muted)}
.rm-tl-right{flex:0 0 auto}
.rm-tl-claim{border:0;border-radius:9px;padding:8px 14px;background:var(--grad);color:#fff;font-weight:800;font-size:13px;cursor:pointer;font-family:inherit}
.rm-tl-done{font-size:12px;color:#35c75a;font-weight:700;white-space:nowrap}
.rm-tl-lock{font-size:16px;opacity:.6}
.rm-wd-balrow{display:flex;gap:14px;padding:6px 0;font-size:16px}
.rm-wd-balrow span{color:#cfd3dc;min-width:170px}
.rm-wd-balrow b{font-weight:700}
.rm-wd-green{color:#35d05f}
.rm-wd-amtbox input{text-align:center;font-size:22px;font-weight:700}
.rm-wd-confirm{background:#aeb3bd;color:#2b1a20}
.rm-wd-confirm:disabled{opacity:1;cursor:default}
.rm-wd-confirm:not(:disabled){background:#fff;color:#111}
/* ===== in-page game view: fullscreen iframe + "< name ... ID" top bar ===== */
#rm-gamewrap{position:fixed;inset:0;z-index:800;background:var(--deep);display:flex;flex-direction:column}
.rm-gametop{display:flex;align-items:center;gap:12px;height:46px;padding:0 14px;background:var(--panel);flex:0 0 auto}
.rm-gameback{width:34px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto}
.rm-gameback:before{content:"";width:11px;height:11px;border-left:3px solid #fff;border-bottom:3px solid #fff;transform:rotate(45deg)}
.rm-gamename{flex:1;min-width:0;color:#fff;font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rm-gameid{flex:0 0 auto;color:var(--muted);font-size:13px;font-weight:600}
.rm-gameframe{flex:1;width:100%;border:0;background:#000}
body.rm-gameopen{overflow:hidden;height:100vh;height:100dvh}
/* login/register loading spinner */
.rm-loading-ov{position:fixed;inset:0;background:rgba(14,7,10,.72);z-index:950;display:none;align-items:center;justify-content:center}  /* above game + popups */
.rm-loading-ov.on{display:flex}
@keyframes rm-spin{to{transform:rotate(360deg)}}
.rm-spinner{display:flex;gap:12px}
.rm-spinner span{width:16px;height:16px;border-radius:50%;background:linear-gradient(135deg,#7fe7c4,#2fd07a);animation:rm-bounce 1s infinite ease-in-out}
.rm-spinner span:nth-child(2){animation-delay:.16s;background:linear-gradient(135deg,#fbd5c4,#c4685f)}
.rm-spinner span:nth-child(3){animation-delay:.32s;background:linear-gradient(135deg,#e0907a,#8f3a4e)}
@keyframes rm-bounce{0%,80%,100%{transform:scale(.4);opacity:.5}40%{transform:scale(1);opacity:1}}
/* header wallet pill + deposit icon (logged in):
   white box w144 h42, radius 10, shadow 4/4/4 .75, 20px card icon, amount right-aligned 700 */
.rm-wpill{display:flex;align-items:center;gap:6px;background:#fff;color:var(--card2);border-radius:10px;padding:11px 8px;cursor:pointer;
  white-space:nowrap;font-weight:700;width:144px;min-width:96px;flex-shrink:1;height:42px;justify-content:space-between;
  box-shadow:4px 4px 4px rgba(0,0,0,.75);overflow:hidden}
.rm-wpill-ico{width:20px;height:20px;object-fit:contain;flex:0 0 auto}
.rm-wpill .rm-bal-amt{font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis}
/* Fund button: white rounded box (r10, 5px pad) + 32px dark $⊕ icon */
.rm-depicon{width:42px;height:42px;border-radius:10px;background:#fff;border:0;padding:5px;
  box-shadow:4px 4px 4px rgba(0,0,0,.75);
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto}
.rm-depicon img{width:32px;height:32px;object-fit:contain}
/* logged-in CTA: Top Up / Withdraw both white */
.rm-cta-wbtn{background:#fff;color:#111}
.rm-depicon:active{transform:translateY(1px)}
/* wallet page */
/* Wallet card: labels above/below the amount are plain WHITE (not muted), amount has no forced decimals */
.rm-wallet-card{position:relative;overflow:hidden;padding:22px}
.rm-wallet-title{font-weight:700;font-size:16px;margin-bottom:60px}  /* ~62px gap before the balance block */
.rm-wallet-lbl{color:#fff;font-size:14px}
.rm-wallet-amt{font-size:30px;font-weight:700;margin:2px 0 4px}
.rm-wallet-wd{color:#fff;font-size:12px}
.rm-wallet-dollar{position:absolute;right:24px;top:50%;transform:translateY(-42%);font-size:80px;font-weight:800;color:rgba(255,255,255,.07)}  /* $ watermark vertically centred */
.rm-wallet-actions{display:flex;gap:16px}
/* 錢包內的「银行账户」入口(2026-09-24 董事長:從側欄挪進錢包)*/
.rm-wallet-bank{display:flex;align-items:center;gap:12px;width:100%;margin-top:14px;padding:14px 16px;cursor:pointer;
  background:var(--card2);border:1px solid var(--border);border-radius:12px;color:var(--txt);font-size:14px;font-weight:600;
  transition:background .15s,border-color .15s}
.rm-wallet-bank:hover{background:var(--card3);border-color:rgba(255,255,255,.14)}
.rm-wb-ic{display:inline-flex;width:22px;height:22px;color:var(--green1);flex:0 0 auto}
.rm-wb-ic svg{width:22px;height:22px}
.rm-wb-tx{flex:1;text-align:left}
.rm-wb-ar{display:inline-flex;width:18px;height:18px;color:var(--muted);flex:0 0 auto}
.rm-wb-ar svg{width:18px;height:18px}
.rm-wallet-actions .rm-btn{flex:1;height:52px;padding:0;font-size:20px;font-weight:700;border-radius:16px;box-shadow:6px 6px 12px rgba(0,0,0,.25)}
/* ===== 站內信 Inbox（側邊選單 การแจ้งเตือน → renderNotifications）===== */
.rm-noti{cursor:pointer;transition:border-color .15s,background .15s}
.rm-noti:active{background:var(--card2)}
/* ⚠️ 必須是 .rm-mcard.rm-noti-un:單獨 .rm-noti-un 與 :763 的 .rm-mcard{border:…} 同特異度,
   而 .rm-mcard 在後面 → 綠框會被洗成白框(實測 2026-08-05:computed 是 rgba(255,255,255,.3),
   等於未讀綠框從上線起就沒生效過)。port 時同樣踩到。 */
.rm-mcard.rm-noti-un{border-color:rgba(196,104,95,.55)}   /* 未讀:綠框 */
.rm-noti-head{display:flex;align-items:center;gap:8px}
.rm-noti-t{font-weight:700;font-size:14px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rm-noti-un .rm-noti-t{color:#fff}
.rm-noti:not(.rm-noti-un) .rm-noti-t{color:var(--muted)}  /* 已讀:標題轉灰 */
/* 展開中的那封 = 玩家正在讀的:標題維持白字。否則點開的瞬間會因為「展開即已讀」立刻掉成灰字,
   當下在看的那封反而變成整頁最不顯眼的一張。優先度要壓過上面的已讀轉灰。 */
.rm-noti.rm-noti-open .rm-noti-t{color:#fff}
.rm-noti-dot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--green1);box-shadow:0 0 6px rgba(196,104,95,.8)}
.rm-noti-sum{color:var(--muted);font-size:12px;margin-top:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rm-noti-body{font-size:13px;line-height:1.6;margin-top:10px;color:#e6e9f2;word-break:break-word}
.rm-noti-body p{margin:0 0 6px}
.rm-noti-body blockquote{margin:0;padding-left:10px;border-left:2px solid rgba(255,255,255,.18)}
.rm-noti-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}
.rm-noti-d{color:var(--muted);font-size:12px;margin-top:4px}
.rm-noti-foot .rm-noti-d{margin-top:0}
.rm-nb-tools{display:flex;justify-content:flex-end;margin-bottom:10px}
.rm-nb-act{background:transparent;border:1px solid rgba(255,255,255,.28);color:#fff;font-size:12px;
  padding:6px 12px;border-radius:999px;cursor:pointer}
.rm-nb-act:active{background:rgba(255,255,255,.08)}
.rm-nb-del{border-color:rgba(255,90,90,.5);color:#ff8a8a}
/* 側邊選單未讀紅點 */
.rm-menu-item{position:relative}
/* ⚠️ 必須帶 .rm-menu-item 前綴::155 的 .rm-menu-item span 特異度(0,1,1)高過單獨的
   .rm-noti-badge(0,1,0),不加前綴時字級/顏色/字重全被它蓋掉(實測 14px/#f0f3fc/600)。 */
.rm-menu-item .rm-noti-badge{position:absolute;right:14px;top:50%;transform:translateY(-50%);min-width:18px;height:18px;
  padding:0 5px;border-radius:999px;background:#e34b4b;color:#fff;font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;box-shadow:0 0 6px rgba(227,75,75,.6)}
/* ===== member pages (deposit / withdraw / profile / history) ===== */
/* Deposit page head: white "< Back" pill + dark title chip */
.rm-dephead{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;margin:6px 0 18px;min-height:42px}   /* grid 三欄:Back(左)/標題(中,真置中)/留空(右) —— 任何寬度標題都不壓到 Back(董事長 2026-09-24) */
/* Back nav pill: dark #1f1217 pill, 0.4px white/30% border, shadow 6/6/14,
   h42, pad 0 16, white 700 label — NOT a white pill */
.rm-back-pill{justify-self:start;display:inline-flex;align-items:center;gap:12px;background:var(--panel);color:#fff;font-weight:700;font-size:16px;
  border-radius:10px;padding:0 16px;height:42px;cursor:pointer;box-shadow:6px 6px 14px rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.3)}   /* justify-self:start → 在左欄保持自然寬,不被拉伸 */
/* Back chevron: bold white chevron (dark pill) */
.rm-back-pill:before{content:"";width:10px;height:10px;border-left:3px solid #fff;border-bottom:3px solid #fff;
  transform:rotate(45deg);flex:0 0 auto}
/* 頁面標題(董事長 2026-09-24):所有頁面 title 移到中間、去底框、加金色下劃線、字放大。
   絕對置中於頁頭(Back 留在左邊,不影響)。手機 18px / 桌機 22px(避免窄屏長標題壓到 Back)。 */
.rm-page-chip{grid-column:2;justify-self:center;background:none;border:0;box-shadow:none;padding:0;height:auto;color:#fff;
  font-weight:800;font-size:18px;white-space:nowrap;text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:6px}
/* Register-bank step indicator: done(✓) — line — current(2), both green circles */
.rm-steps{display:flex;align-items:center;justify-content:center;margin:2px 0 22px}
.rm-step{width:28px;height:28px;border-radius:50%;background:#22c440;color:#fff;font-weight:700;font-size:14px;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.rm-step-line{width:60px;height:2px;background:rgba(255,255,255,.25)}
/* Method tabs (Auto / Bank QR): bordered pills with a green status dot, active = white */
.rm-method-card{display:flex;gap:10px;padding:8px}
.rm-method{position:relative;height:42px;padding:0 20px;border-radius:8px;border:1px solid rgba(255,255,255,.3);
  display:flex;align-items:center;font-weight:700;font-size:14px;color:#fff;cursor:pointer;background:transparent}
.rm-method.on{background:#fff;color:#111;border-color:#fff}
.rm-method:after{content:"";position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:50%;background:#3ddc5a}
.rm-field .rm-ico-sm{width:26px;height:26px}
.rm-field input[readonly]{cursor:default}
/* ---- Standard-format deposit: channel buttons (Bank Transfer / PromptPay QR) with amount range ---- */
.rm-chan-row{display:flex;gap:12px;margin-bottom:16px}
.rm-chan{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:10px;
  border:1px solid rgba(255,255,255,.3);background:transparent;cursor:pointer}
.rm-chan.on{background:#fff;border-color:#fff}
.rm-chan-ic{width:28px;height:28px;object-fit:contain;flex:0 0 auto}
.rm-chan.on .rm-chan-ic{filter:invert(1)}
.rm-chan-qr{font-size:26px;line-height:1;flex:0 0 auto;color:#fff}
.rm-chan.on .rm-chan-qr{color:#111}
.rm-chan-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.rm-chan-t b{font-size:14px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rm-chan-t small{font-size:11px;font-weight:400;color:var(--muted);white-space:nowrap}
.rm-chan.on .rm-chan-t b{color:#111}
.rm-chan.on .rm-chan-t small{color:#555}
/* section headings + minimum-deposit hint */
.rm-sec-label{font-size:15px;font-weight:700;color:#e6e9f2;letter-spacing:.2px;margin:10px 0 10px}
.rm-sec-sub{font-size:13px;font-weight:400;color:var(--muted);margin:-4px 0 10px}
/* (THB) prefix in the amount box + 4-column quick picks */
.rm-amt-cur.rm-amt-thb{color:var(--muted);font-size:15px;font-weight:400}
.rm-amt-grid4{grid-template-columns:repeat(4,1fr)}
/* real bank logo (Transfer From) instead of a colour badge */
.rm-bank-logo{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:0 0 auto}
/* deposit Transfer From: logo + name LEFT-aligned (register-bank stays centred) */
#rm-dep-bkt .rm-bankdd-label{justify-content:flex-start;gap:12px}
#rm-dep-bkt .rm-bankdd-name{font-size:16px;font-weight:500;color:#fff}
/* Enter Amount preview text: sized/aligned in the base .rm-amt-box input rule below (18px, left) */
.rm-amt-box input::placeholder{font-weight:400}
.rm-dw-tabs{display:flex;gap:0;background:var(--panel);border-radius:12px;padding:5px;margin-bottom:16px}
.rm-dw-tab{flex:1;text-align:center;padding:12px;border-radius:9px;font-weight:700;font-size:15px;color:var(--muted);cursor:pointer}
.rm-dw-tab.on{background:var(--grad);color:#fff}
/* Member cards: visible 1px white/30% border + shadow */
.rm-mcard{background:var(--card);border:1px solid rgba(255,255,255,.3);border-radius:10px;box-shadow:6px 6px 12px rgba(0,0,0,.25);padding:16px;margin-bottom:14px}
.rm-mlabel{font-size:13px;color:var(--muted);margin-bottom:12px}
/* deposit amount box: ฿ on the left, big centered amount, Clear on the right */
.rm-amt-box{display:flex;align-items:center;gap:10px;background:var(--sunken);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:8px 12px;height:64px;margin-bottom:12px}
.rm-amt-cur{color:var(--green1);font-size:24px;font-weight:800;flex:0 0 auto}
.rm-amt-box input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:#fff;font-size:18px;font-weight:500;text-align:left;padding-left:8px;font-family:inherit}
.rm-amt-box input::placeholder{color:#8a7178}
.rm-amt-clear{flex:0 0 auto;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#fff;border-radius:9px;padding:9px 14px;font-weight:700;font-size:14px;cursor:pointer;font-family:inherit}
.rm-amt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.rm-amt{background:var(--card2);border:1px solid rgba(255,255,255,.08);color:#fff;border-radius:10px;padding:14px 0;font-weight:500;font-size:16px;cursor:pointer}
.rm-amt.on{background:var(--grad);color:#fff;border-color:transparent}
.rm-bankrow{display:flex;align-items:center;gap:12px}
.rm-bankicon{flex:0 0 auto;width:48px;height:48px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:13px}
.rm-bankinfo{flex:1;min-width:0}
.rm-bankname{font-weight:700;font-size:14px}
.rm-bankno{font-size:18px;font-weight:800;letter-spacing:.5px;margin:2px 0}
.rm-bankacc{font-size:12px;color:var(--muted)}
.rm-copy{background:var(--green1);color:#06371f;border:0;border-radius:8px;padding:8px 14px;font-weight:700;cursor:pointer;flex:0 0 auto}
.rm-hint{font-size:11px;color:var(--muted);margin-top:10px}
.rm-dep-namehint{font-size:11.5px;line-height:1.55;color:var(--muted);margin-top:12px;text-align:left}
.rm-dep-pendhint{font-size:12px;line-height:1.5;color:#f3c2b0;margin:8px 0 2px;padding:8px 10px;background:rgba(251,213,196,.07);border:1px solid rgba(251,213,196,.16);border-radius:8px}   /* §3.3 Pending 卡温和信息提示 */
.rm-wd-avail{font-size:26px;font-weight:800;color:var(--green1)}
.rm-prow{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.rm-prow:last-child{border-bottom:0}
.rm-prow span{color:var(--muted);font-size:14px}
.rm-prow b{font-size:14px}
.rm-logout-btn2{background:transparent!important;color:#ff6b6b!important;border:1px solid rgba(255,107,107,.4)!important}
.rm-hlist{display:flex;flex-direction:column;gap:10px}
.rm-hrow{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:12px;padding:14px 16px}
.rm-htype{font-weight:700;font-size:14px;flex:0 0 auto}
.rm-htype.dep{color:var(--green1)} .rm-htype.wd{color:#ff9f43}
.rm-hmid{flex:1;text-align:right}
.rm-hamt{font-weight:800;font-size:15px}
.rm-hamt.dep{color:var(--green1)} .rm-hamt.wd{color:#ff9f43}
.rm-htype.bn,.rm-hamt.bn{color:var(--gold)}   /* W8-023 2026-10-16:bonus / 返水 / 返輸 列用金色,跟存款綠 / 提款橘分開 */
.rm-hdate{font-size:11px;color:var(--muted)}
.rm-hstat{flex:0 0 auto;font-size:12px;font-weight:700;padding:4px 10px;border-radius:8px;margin-left:8px}
.rm-hstat.success{background:rgba(47,208,122,.15);color:var(--green1)}
.rm-hstat.pending{background:rgba(255,213,79,.15);color:var(--gold)}
.rm-hstat.cancel{background:rgba(224,37,12,.15);color:#e0603c}
.rm-toast{position:fixed;left:50%;bottom:80px;transform:translateX(-50%) translateY(20px);z-index:400;background:var(--card3);color:#fff;
  padding:12px 22px;border-radius:12px;font-weight:600;font-size:14px;box-shadow:0 8px 24px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:88vw;text-align:center}
.rm-toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:600px){
  .rm-topbar-right.rm-logged{gap:10px}
  .rm-wpill{min-width:80px}   /* pill keeps the 144px look, shrinks only when the row is tight */
  .rm-depicon{width:38px;height:38px;padding:4px}
  .rm-depicon img{width:28px;height:28px}
}

/* history: continue-pay link on pending deposits (pgRedirectUrl) */
.rm-hpay{display:inline-block;margin-left:6px;padding:2px 10px;border-radius:10px;background:var(--green1);color:#fff;font-size:11px;font-weight:700;text-decoration:none}
/* withdraw: card status pill (10 verified / -5 rejected / else verifying) */
.rm-wd-pill{margin-left:auto;padding:2px 8px;border-radius:9px;font-size:10px;font-weight:700;flex:0 0 auto}
.rm-wd-pill.ok{background:rgba(196,104,95,.18);color:#8ce350}
.rm-wd-pill.bad{background:rgba(220,60,60,.18);color:#ff7b7b}
.rm-wd-pill.wait{background:rgba(255,213,79,.15);color:#ffd54f}
.rm-wd-cardsel .rm-wd-pill{margin-left:8px}

/* iOS: 100vh is the LARGE viewport (toolbars collapsed) — on inner pages that forced ~190px of
   blank under the last button. svh = the real visible height, so the page ends at the button. */
body.rm-authopen #root{min-height:100vh;min-height:100svh}

/* desktop: the info strip is visible (card style, left) with Register/Login beside it on the
   right — mobile keeps it removed (Tom asked to drop it on mobile only) */
@media(min-width:1280px){
  .rm-inforow{display:flex}
  .rm-cta-inline .rm-btn{min-width:250px}
}
/* inline (non-overlay) spinner for the bank-verifying page */
.rm-spin-inline{display:flex;justify-content:center;gap:6px}
.rm-spin-inline span{width:10px;height:10px;border-radius:50%;background:var(--green1);animation:rmBounce 1s infinite ease-in-out}
.rm-spin-inline span:nth-child(2){animation-delay:.15s}
.rm-spin-inline span:nth-child(3){animation-delay:.3s}
@keyframes rmBounce{0%,80%,100%{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}

/* v173: desktop sidebar entrance — slides in from the left on every page load
   (reference: left 0.5s ease-in-out + opacity fade; ours uses transform) */
@media(min-width:1280px){
  .rm-sidebar{animation:rmSideIn .5s ease-in-out both}
}
@keyframes rmSideIn{from{transform:translateX(-105%);opacity:.3}to{transform:translateX(0);opacity:1}}
/* getVerifyingBank page gate banner */
.rm-vgate{background:rgba(255,213,79,.12);border:1px solid rgba(255,213,79,.4);color:#ffd54f;
  border-radius:10px;padding:10px 14px;font-size:13px;font-weight:700;margin:10px 0}
/* human-verify (captcha-style) box */
.rm-cap-box{display:flex;align-items:center;gap:12px;background:#fff;color:#111;border-radius:10px;
  padding:14px 18px;cursor:pointer;font-weight:700;font-size:15px;user-select:none}
.rm-cap-check{width:24px;height:24px;border:2px solid #9aa0ae;border-radius:5px;flex:0 0 auto;position:relative;background:#fff}
.rm-cap-check.spin{border-color:transparent;border-radius:50%;border:3px solid #d5d9e2;border-top-color:#fbd5c4;animation:rmSpin .7s linear infinite}
.rm-cap-check.ok{border-color:#fbd5c4;background:#fbd5c4}
.rm-cap-check.ok:after{content:"";position:absolute;left:7px;top:2px;width:6px;height:12px;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg)}
@keyframes rmSpin{to{transform:rotate(360deg)}}

/* v178 profile — 個人資料頁版面:頭像卡 + 3 顆漸層選單按鈕(取色自截圖) */
.rm-pcard{background:var(--card);border:1px solid rgba(255,255,255,.3);border-radius:24px;padding:30px 20px 24px;display:flex;flex-direction:column;align-items:center;gap:18px;margin-bottom:34px}
.rm-pavatar{width:150px;height:150px;object-fit:contain}
.rm-pphone{font-size:20px;font-weight:700;color:#f0f3fc}
.rm-pbtns{display:flex;flex-direction:column;gap:24px}
.rm-gbtn{height:52px;border:none;border-radius:14px;font-size:20px;font-weight:700;color:#fff;cursor:pointer;box-shadow:6px 6px 12px rgba(0,0,0,.25)}
.rm-gbtn-bank{background:linear-gradient(to right,#6e2236,#b8526a,#b8526a)}
.rm-gbtn-down{background:linear-gradient(to right,#8a2f45,#d98a76)}
.rm-gbtn-pass{background:linear-gradient(to right,#E3414E,#F5A54B)}

/* v180 add-bank form — 綁卡頁同款:內嵌 I am human + 紅字提示 + 灰色 Continue */
.rm-cap-inline{width:min(300px,100%);margin:4px 0 6px;padding:14px 16px}
.rm-cap-hint{color:#ff4d4f;font-size:13px;margin:0 0 16px}
.rm-continue:disabled{background:#c6c9d0;color:#fff;opacity:1;box-shadow:none;cursor:default}

/* v181 帳號欄:icon縮小靠左、placeholder字縮小且置中 */
.rm-accfield{position:relative}
/* add bank 提示:用本名帳戶(改紅色警示,警示真號綁 — 董事長 2026-07-13) */
.rm-rb-hint{font-size:12.5px;color:#ff7a78;background:rgba(226,75,74,.10);border:1px solid rgba(226,75,74,.35);border-left:3px solid #e24b4a;padding:10px 14px;border-radius:0 8px 8px 0;line-height:1.5;margin-bottom:12px}
.rm-accfield .rm-ico-sm{width:20px;height:20px;position:absolute;left:14px;top:50%;transform:translateY(-50%)}
.rm-accfield input{text-align:center;font-size:16px;padding:0 34px}

/* v182 Tom: 帳號字大一點(16→18)、整塊表單往下移(離 Back/Bank 標題遠一點,約26px) */
.rm-accfield input{font-size:18px}
#rm-rb-bkt{margin-top:26px}

/* v183 deposit入口綁卡頁:渠道 tabs(Auto/Bank QR,右上綠點,active=白底黑字) */
.rm-chantabs{background:var(--card);border:1px solid rgba(255,255,255,.3);border-radius:12px;padding:10px;display:flex;gap:12px;margin-top:26px;box-shadow:6px 6px 14px rgba(0,0,0,.25)}
.rm-chantab{position:relative;padding:12px 22px;border-radius:10px;font-weight:700;font-size:16px;color:#fff;border:1px solid rgba(255,255,255,.35);cursor:pointer}
.rm-chantab.on{background:#fff;color:#000;border-color:#fff}
.rm-chandot{position:absolute;top:5px;right:6px;width:7px;height:7px;border-radius:50%;background:#35c75a}
/* 通道維護中(getDepositBankInfo 的 channelStatus=-30):整顆 tab 轉紅+不可點,右上圓點也轉紅 */
.rm-chantab.maint{color:#ff5b5b;border-color:#ff5b5b;background:rgba(255,91,91,.08);cursor:not-allowed}
.rm-chantab.maint.on{background:#ff5b5b;color:#fff;border-color:#ff5b5b}
.rm-chantab.maint .rm-chandot{background:#ff5b5b}
.rm-chantab .rm-chanmaint{display:block;font-size:11px;font-weight:600;opacity:.9;margin-top:2px}
/* 全部通道都維護時的送出鈕:灰掉不可點(只吃這個 class,不動其他 disabled 按鈕的既有樣式) */
.rm-modal-submit.rm-btn-maint{background:#5a5f66;color:#c9ced6;box-shadow:none;cursor:not-allowed}
/* 提款維護態(withdrawStatus=-30 預備件):快捷 % 鈕壓暗同存款側 rm-btn-maint 手法;金額框維護 placeholder 縮字級(泰文長句 22px 會爆框) */
.rm-amt.rm-btn-maint{background:#5a5f66;color:#c9ced6;border-color:transparent;cursor:not-allowed}
.rm-wd-amtbox input.rm-wd-maintin::placeholder{font-size:13.5px;font-weight:500;color:#8a8f96}
/* 提款金額即時驗證:金額不合規時輸入框變紅 + 錯誤文字緊貼框下 */
.rm-amt-err{color:#ff6b6b;font-size:13px;min-height:16px;margin:-4px 0 8px;padding:0 2px;font-weight:500}
.rm-amt-box.rm-amt-bad{border-color:#ff6b6b}
.rm-chantabs+#rm-rb-bkt{margin-top:22px}

/* v184 withdraw:%快選一排4顆(蓋掉後面的3欄基礎規則)、選中卡圓形銀行logo */
.rm-amt-grid.rm-amt-grid4{grid-template-columns:repeat(4,1fr)}
.rm-cardlogo{width:34px;height:34px;border-radius:50%;background:#fff;object-fit:contain;padding:3px;flex:0 0 auto}

/* v185 withdraw卡片列靠左對齊(logo貼左+文字左對齊);LINE icon加白色圓底(原PNG深色glyph在深底上看不見) */
.rm-wd-cardsel{justify-content:flex-start}
.rm-wd-cardtxt{align-items:flex-start}
.rm-line-ico{background:#fff;border-radius:50%;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.rm-line-ico img{width:18px;height:18px;filter:brightness(0)}   /* 原PNG是白色glyph:墊白圓+轉黑 */

/* v189 deposit有卡頁:channel=小方框tabs(共用.rm-chantabs)+資訊列(Min Deposit|Speed紅|Deposit Support紅框) */
.rm-dep-inforow{display:flex;align-items:stretch;gap:12px;margin:14px 0 4px}
.rm-dep-infobox{flex:1;display:flex;background:var(--card);border-radius:10px;overflow:hidden}
.rm-dep-infocell{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:9px 6px;gap:2px}
.rm-dep-infocell+.rm-dep-infocell{border-left:1px solid rgba(255,255,255,.15)}
.rm-dep-infocell small{color:#b39aa2;font-size:12px}
.rm-dep-infocell b{font-size:14px;color:#fff}
.rm-dep-infocell b.rm-red{color:#ff4d4f}
.rm-dep-support{display:flex;align-items:center;gap:8px;border:1px solid #ff4d4f;border-radius:10px;padding:9px 14px;color:#fff;font-weight:600;font-size:14px;cursor:pointer;flex:0 0 auto}

/* v190 Tom: channel tab 縮小、bank select/清單 logo 統一 28px 白圓底 contain(不裁切不爆框) */
.rm-chantabs{padding:8px}
.rm-chantab{padding:9px 16px;font-size:14px}
.rm-bankdd-label .rm-bank-logo,.rm-bankdd-opt .rm-bank-logo{width:28px;height:28px;object-fit:contain;background:#fff;border-radius:50%;padding:2px;flex:0 0 auto}
/* deposit: per-bank payment-method chips (methodName _QR / _BTF) */
.rm-paymethods{display:flex;gap:10px;margin:0 0 12px;flex-wrap:wrap}
.rm-pm{border:1px solid rgba(255,255,255,.3);background:var(--card);color:var(--muted);border-radius:10px;
  padding:9px 18px;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer}
.rm-pm.on{background:var(--green1);border-color:var(--green1);color:#fff}
/* deposit method tabs (Bank Transfer / Bank QR): compact pills, left-aligned */
.rm-chantabs.rm-even .rm-chantab{flex:0 0 auto;min-width:110px;text-align:center;white-space:nowrap}

/* v191 遊戲頁右上 ID 白色圓角框 */
.rm-gameid{background:#fff;color:#111;font-weight:700;font-size:13px;padding:7px 12px;border-radius:9px;margin-left:auto;flex:0 0 auto}

/* v192 Speed 寫死 <1 Min 綠色(Tom) */
.rm-dep-infocell b.rm-green-txt{color:#35c75a}

/* v195 ETA列黑底拿掉(Tom):純紅字無框 */
.rm-wd-eta{background:transparent;border-radius:0;padding:2px 0}

/* v196 手機版首頁 Register/Login 文字垂直置中(iOS padding按鈕baseline偏下 → flex幾何置中) */
@media(max-width:768px){
  .rm-cta-inline .rm-btn{display:inline-flex;align-items:center;justify-content:center;padding-top:0;padding-bottom:0;height:52px;line-height:1}
}

/* v197 綁卡驗證中頁重設計:圓環spinner+銀行icon+標題+滑動進度條+說明(Tom:原版醜) */
.rm-verify-hero{display:flex;flex-direction:column;align-items:center;gap:16px;padding:44px 20px 36px;background:var(--card);border:1px solid rgba(255,255,255,.15);border-radius:16px;margin-top:26px;text-align:center}
.rm-verify-ring{width:88px;height:88px;border-radius:50%;position:relative;display:flex;align-items:center;justify-content:center;margin-bottom:2px}
.rm-verify-ring::before{content:"";position:absolute;inset:0;border-radius:50%;border:4px solid rgba(255,255,255,.12);border-top-color:#fbd5c4;animation:rmSpin 1s linear infinite}
.rm-verify-ring img{width:38px;height:38px}
.rm-verify-title{font-size:19px;font-weight:700;color:#fff}
.rm-verify-bar{width:72%;height:6px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden;position:relative}
.rm-verify-bar::after{content:"";position:absolute;left:-40%;top:0;bottom:0;width:40%;border-radius:4px;background:linear-gradient(90deg,#fbd5c4,#35c75a);animation:rmBarSlide 1.4s ease-in-out infinite}
@keyframes rmBarSlide{0%{left:-40%}100%{left:100%}}
.rm-verify-sub{font-size:14px;color:var(--muted)}
.rm-verify-note{font-size:12px;color:var(--muted);opacity:.75}
/* deposit: in-page PG payment iframe (in-page embed, keeps site chrome) */
.rm-payframe-wrap{position:relative;border:1px solid rgba(255,255,255,.15);border-radius:12px;overflow:hidden;background:#fff;margin-bottom:14px}
.rm-payframe{width:100%;height:1180px;border:0;display:block;background:#fff}  /* 跨域無法自動量高:給足夠高度讓整頁單一捲軸,不切內容/不出現 iframe 內部捲軸 */
.rm-payframe-load{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#fff;z-index:1}

/* 付款頁(Paynex)是垂直置中版型:iframe 給死高度會讓內容置中在超高框裡→上下大留白。
   改成貼合視窗高度(capped)+iframe 內部可捲:置中內容落在視窗中央(留白小),太高的頁在 iframe 內捲不切底。 */
.rm-payframe{height:min(760px,calc(100dvh - 96px));min-height:480px}

/* v200 QR付款模板裁掉Paynex自帶banner+「Payment Gateway」標題(iframe負邊距;銀行轉帳模板無banner不裁) */
/* v131(Tom 2026-07-09 回報):-112px 裁切量吃到收據本體(單號+金額被切)。QR 收據頁頁首本來就短,
   固定 px 裁跨域頁面本質脆弱→改不裁,給足高度讓收據+PromptPay+QR 完整顯示,整頁單一捲軸。 */
.rm-payframe-qr .rm-payframe{margin-top:0;height:min(940px,calc(100dvh - 72px));min-height:520px}

/* 🔴 2026-09-18 董事長:FIU 不給 iframe → popup 版付款卡(取代上面的 .rm-payframe*,那些已無用但留著不清)。 */
.rm-paypop{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:26px 20px;text-align:center;margin:6px 0 14px}
.rm-paypop-ic{width:56px;height:56px;border-radius:50%;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;color:var(--pink2);background:rgba(251,213,196,.1);border:1px solid rgba(251,213,196,.3)}
.rm-paypop-t{font-size:16px;font-weight:800;color:#fff;margin-bottom:8px}
.rm-paypop-s{font-size:12.5px;color:var(--muted);line-height:1.6;max-width:340px;margin:0 auto 18px}
.rm-paypop .rm-modal-submit{margin-top:0}
/* 🔴 2026-09-29 董事長:換新 PG(允許 iframe)→ 付款頁改回站內 iframe;.rm-paypop-frame 去掉卡片重樣式,只當 iframe+退路容器 */
.rm-paypop-frame{background:none;border:0;padding:0;text-align:center;margin:6px 0 14px}
.rm-paypop-frame .rm-paypop-s{margin:12px auto 12px}
.rm-paypop-frame .rm-pay-open2{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);box-shadow:none}   /* 退路鈕降級為次要(iframe 才是主) */


/* v202 手機版登入後顯示資訊列:三格=Min Deposit|Deposit Time|Withdraw Limit(第2格Min Withdraw+其分隔線藏掉) */
@media(max-width:1279px){
  body.rm-authed .rm-inforow{display:flex;background:var(--card);border-radius:10px;padding:7px 8px;margin:0 0 4px}
  body.rm-authed .rm-inforow>*:nth-child(3),body.rm-authed .rm-inforow>*:nth-child(4){display:none}
}

/* v204 資訊列分隔線改白色(Tom) */
.rm-info-sep{background:#fff}

/* v205 Bonus 頁:Welcome 卡 + Login Bonus 金框(3天freespin,今天亮/其他鎖) */
.rm-bonus-card{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid rgba(255,255,255,.25);border-radius:14px;padding:16px;margin:22px 0 18px}
.rm-bonus-wico{font-size:34px;line-height:1}
.rm-bonus-winfo{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.rm-bonus-winfo>b{font-size:17px;color:#fff}
.rm-bonus-winfo>span{font-size:13px;color:var(--muted)}
.rm-bonus-amt{color:#35c75a;font-size:15px}
.rm-bonus-claim{background:var(--grad);color:#fff;border:none;height:42px;padding:0 20px;border-radius:10px;font-size:15px;font-weight:700;flex:0 0 auto}
.rm-bonus-gold{border:2px solid #e8b64c;border-radius:16px;padding:14px 12px 16px;background:linear-gradient(180deg,rgba(232,182,76,.10),rgba(232,182,76,.02));box-shadow:0 0 16px rgba(232,182,76,.18)}
.rm-bonus-gtitle{font-size:15px;font-weight:700;color:#e8b64c;margin-bottom:12px;text-align:center}
.rm-bonus-days{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.rm-bonus-day{background:var(--card);border:1px solid rgba(255,255,255,.2);border-radius:12px;padding:10px 8px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.rm-bonus-day img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:10px}
.rm-bonus-day.on{border-color:#e8b64c;cursor:pointer;box-shadow:0 0 10px rgba(232,182,76,.35)}
.rm-bonus-day:not(.on){opacity:.45}
.rm-bonus-dayno{font-size:12px;font-weight:700;color:#e8b64c}
.rm-bonus-gname{font-size:11px;color:#fff;font-weight:600;line-height:1.2}
.rm-bonus-go{background:#e8b64c;color:var(--panel);font-size:11px;font-weight:800;border-radius:8px;padding:5px 6px;width:100%}
.rm-bonus-lock{font-size:11px;color:var(--muted)}
/* Daily Deposit(2026-07-29):磚下方說明 + 勾/鎖等圖示改 SVG(不用 emoji)後的行內對齊 */
.rm-bonus-ddnote{margin-top:12px;text-align:center;font-size:11.5px;line-height:1.5;color:var(--muted)}
.rm-bonus-go svg,.rm-bonus-lock svg,.rm-tl-done svg,.rm-fs-rulenote svg{vertical-align:-2px}
.rm-tl-lock svg{vertical-align:-2px;width:14px;height:14px}
.rm-bonus-wico{color:#e8b64c;display:flex;align-items:center;justify-content:center}

/* v206/v207/v3 freespin 介紹層(.rm-bfs-* / #rm-bfswrap)整套 CSS 已於 2026-07-29 移除:唯一使用者 openBonusFSView 隨 3 天簽到下線一起刪。 */

@keyframes rm-shim{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* v210 deposit金額框加大+文字置中(Tom;inner頁48px的縮小規則一併蓋掉) */
body.rm-authopen .rm-amt-box{height:60px}
.rm-amt-box input#rm-dep-amt{text-align:center;padding-left:0;font-size:19px}

/* v211 My Bank:右上紫+鈕/頭像卡/白色銀行卡(圓logo+分組帳號) */
.rm-mb-addrow{display:flex;justify-content:flex-end;margin:2px 0 10px}
.rm-mb-add{width:42px;height:42px;border-radius:10px;background:#b8526a;border:none;color:#fff;font-size:26px;font-weight:700;cursor:pointer;line-height:1}
.rm-mb-avatar{margin-bottom:16px}
.rm-mb-card{display:flex;align-items:center;gap:14px;background:#fff;border-radius:14px;padding:16px 14px;margin-bottom:12px}
.rm-mb-logo{width:42px;height:42px;border-radius:50%;object-fit:contain;flex:0 0 auto}
.rm-mb-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.rm-mb-bank{font-size:13px;color:#111;font-weight:600}
.rm-mb-acc{font-size:17px;color:#111;font-weight:700;letter-spacing:.5px}

/* v212 資訊列登入前也顯示(Tom:登入前也要一模一樣)——拿掉rm-authed限定 */
@media(max-width:1279px){
  .rm-inforow{display:flex;background:var(--card);border-radius:10px;padding:7px 8px;margin:0 0 4px}
  .rm-inforow>*:nth-child(3),.rm-inforow>*:nth-child(4){display:none}
}



/* My Bank:每卡戶名 + verify 印章(status=10) */
.rm-mb-name{font-size:12px;color:#5a5a5a;font-weight:500;margin-top:1px}
.rm-mb-verify{margin-left:auto;flex:0 0 auto;background:#e4f7dd;color:#1a8f2e;border:1.5px solid #6cc24a;border-radius:8px;padding:4px 9px;font-size:11px;font-weight:800;white-space:nowrap;display:inline-flex;align-items:center;gap:3px;transform:rotate(-5deg);box-shadow:0 1px 2px rgba(0,0,0,.08)}

/* My Bank:卡片統一成 deposit 黑卡(沿用 .rm-field/.rm-wd-carddd/.rm-wd-cardsel/.rm-wd-pill),左對齊+間距 */
.rm-mb-cardrow{margin-bottom:12px}
.rm-mb-cardrow .rm-wd-cardsel{justify-content:flex-start}
.rm-mb-cardrow .rm-wd-pill{margin-left:auto}

/* BO 自訂 footer:footerContent 有值時套用(重置置中/muted,讓 BO 的 About Us/牌照排版乾淨) */
.rm-footer.rm-footer-custom{text-align:left;color:var(--txt)}
.rm-footer.rm-footer-custom img{max-width:100%}  /* 不要 height:auto:會蓋掉牌照圖的固定高度害它爆成原圖大小;各 img 自己的 height 規則說了算 */
/* ===== BO 自訂 footer:對齊 footer 版型 ===== */
.rm-footer-custom{padding:20px 16px 24px}  /* nav 已改 fixed+body padding 避開,footer 不用再留 96px(免雙倍空隙) */
.rm-ft{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
/* 品牌 + 簡介(底線分隔) */
.rm-ft-brandbox{border-bottom:1px solid #ffffff7c;padding-bottom:16px}
.rm-ft-brand{display:flex;align-items:center;justify-content:center;gap:10px;color:#fff;font-size:24px;font-weight:700}
.rm-ft-logo{height:58px;width:auto;object-fit:contain;border-radius:50%}
.rm-ft-info{text-align:center;color:#fff;opacity:.5;font-size:12px;font-weight:400;line-height:1.6;margin:10px 0 0}
/* Licenses & Certification */
.rm-ft-lic{border-bottom:1px solid #ffffff7c;padding-bottom:20px}  /* 跟 About Us 之間一條分隔線+空格(別貼太緊) */
.rm-ft-lic-title{color:#fff;opacity:.5;font-size:16px;font-weight:700;padding:0 0 0 5px;margin-bottom:12px}
.rm-ft-lic-icons{display:flex;align-items:center;justify-content:space-evenly;gap:16px}
.rm-ft-gc{height:64px;flex-shrink:0;object-fit:contain}
.rm-ft-lic-col{text-align:center}
.rm-ft-lic-sub{color:#fff;opacity:.5;font-size:12px;font-weight:700;padding-bottom:7px}
.rm-ft-lic-auth{display:flex;align-items:center;justify-content:center;gap:14px}
.rm-ft-lic-auth img{height:34px;width:auto;object-fit:contain}
/* About Us 下拉盒(native <details>) */
.rm-ft-about{border-radius:10px;padding:0 16px;background:var(--card);
  border:.4px solid rgba(255,255,255,.3);box-shadow:6px 6px 12px rgba(0,0,0,.25)}
.rm-ft-about-row{list-style:none;cursor:pointer;display:flex;align-items:center;height:42px}
.rm-ft-about-row::-webkit-details-marker{display:none}
.rm-ft-about-title{flex-grow:1;opacity:.75;color:#fff;font-size:16px;font-weight:700;line-height:100%}
.rm-ft-about-arrow{width:18.542px;height:12px;flex-shrink:0;object-fit:contain;transition:transform .3s}
.rm-ft-about[open] .rm-ft-about-arrow{transform:rotate(180deg)}
.rm-ft-about-desc{color:#fff;opacity:.5;text-align:justify;padding:0 4px 16px 12px;overflow-x:auto}
.rm-ft-about-desc p{font-size:12px;font-weight:400;line-height:1.7;margin:0 0 8px}
.rm-ft-about-desc .rm-about-h{font-size:13px;font-weight:700;margin:14px 0 6px;line-height:1.5}
.rm-ft-about-desc .rm-about-h5{font-size:12.5px;font-weight:700;margin:12px 0 4px}
.rm-ft-about-desc .rm-about-ul{margin:4px 0 8px;padding-left:18px}
.rm-ft-about-desc .rm-about-ul li{font-size:12px;line-height:1.7}

/* ⭐ bonus 狀態頁(renderBonusStatus) */
.rm-bs-sum{display:flex;align-items:center;gap:12px;padding:16px}
.rm-bs-sum.ok{border-color:rgba(53,199,90,.55)}
.rm-bs-sum.lock{border-color:rgba(255,176,32,.55)}
.rm-bs-ico{font-size:26px;line-height:1}
.rm-bs-suminfo{flex:1;min-width:0}
.rm-bs-suminfo b{display:block;font-size:15px;margin-bottom:4px}
.rm-bs-suminfo span{display:block;font-size:12.5px;color:rgba(255,255,255,.6)}
.rm-bs-sec{margin-top:16px}
.rm-bs-empty{padding:10px 4px;color:#35c75a}
.rm-bs-vc{margin-top:8px}
/* Bonus Status 桌機寬版(董事長 2026-09-29):加寬居中(覆蓋 460 窄版右靠)+ 卡片列表 2 欄;summary/流水進度條保持整寬(本就適合寬)。
   手機(<1280)無 .rm-bs-grid 規則 → block 堆疊,與改版前一致。 */
@media(min-width:1280px){
  .rm-authpage.rm-bs-wide{max-width:960px;margin:0 auto}
  .rm-bs-wide .rm-bs-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
  .rm-bs-wide .rm-bs-grid .rm-bonus-card{margin:8px 0 0}   /* grid gap 接管間距,取消卡片自帶的大外距 */
}
.rm-bs-chip{font-size:11.5px;color:#35c75a;white-space:nowrap}



/* ===== 2026-07-17 併回:以下規則原本只存在 index.html 的 inline <style>(因 build.py 地雷導致 app.css 長期失效,
   大家只好直接改 inline)。現在 index.html 改回 <link app.css> source 形式,這些必須在 app.css 才不會掉。 ===== */
/* 右上角 support 耳機圖標(登入前後都在)→ 點進 Chat 頁 */
.rm-support{width:38px;height:38px;border-radius:10px;background:#1c2233;border:1px solid rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;position:relative;cursor:pointer;padding:0;flex:0 0 auto;-webkit-tap-highlight-color:transparent}
.rm-support svg{width:22px;height:22px;stroke:#c4685f}
.rm-support .rm-support-dot{position:absolute;top:6px;right:7px;width:7px;height:7px;border-radius:50%;background:#35c75a;border:1.5px solid #1c2233}
.rm-support:active{transform:scale(.94)}
/* 每排 4 個(Tom) */
/* ① Login = 中間 popup + 背景霧化(不藏首頁,霧化蓋在上面) */
body.rm-loginmodal{overflow:hidden}
body.rm-loginmodal .rm-authpage.on{position:fixed;inset:0;z-index:150;margin:0;max-width:none;padding:18px;background:rgba(16,8,11,.5);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center}
.rm-login-card{width:100%;max-width:360px;background:#27171c;border:1px solid #2a3145;border-radius:16px;padding:20px 18px 22px;box-shadow:0 20px 50px rgba(0,0,0,.5);max-height:calc(100dvh - 36px);overflow-y:auto}
.rm-login-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.rm-login-head .rm-modal-title{margin:0;font-size:22px}
.rm-login-x{background:transparent;border:0;color:#b39aa2;font-size:20px;cursor:pointer;padding:0 2px;line-height:1;-webkit-tap-highlight-color:transparent}
/* ② Register 欄位標籤(抄 QQ288;已拿掉標題+icon) */
.rm-flabel{font-size:12.5px;color:#9aa3b8;font-weight:700;margin:0 2px 6px}
/* ===== 側邊 Menu 改版(2026-08-19 定稿 = mockup-menu-final.html;取代 2026-07-20 的 QQ288 式 drawer)=====
   手機抽屜三段式:hero(漸層+帳號+綁卡 pill+流水條)/ 餘額卡 / 可捲選單分組 + 沉底登出。
   ⚠️ 與 mockup 唯一的差別:抽屜維持**全螢幕 100% 覆蓋**(董事長指定),不做 330px + scrim。
   ⚠️ 桌機 ≥1280 常駐側欄維持原本的卡片式清單不動:hero / 餘額卡 / 組標題全部 display:none。 */

/* --- 選單列的圖示與箭頭(全站側欄統一白色線性 inline SVG)--- */
.rm-mi-ic{width:34px;flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.rm-mi-ic svg{width:20px;height:20px;color:#fff}
/* 2026-09-03:側欄圖示由白色線性 inline SVG 換成彩色 3D 點陣圖(/assets/icons/3d/nav-*.webp)。
   ⚠️ 原本三處靠 currentColor 的著色對 <img> **全部失效**:
     · .rm-mi-ic svg{color:#fff}                        一般狀態
     · .rm-mi-act .rm-mi-ic svg{color:var(--pink2)}     選中態
     · .rm-side-logout .rm-mi-ic svg{color:#ff6b6b}     登出的危險紅
   改用不透明度表示狀態(與分類 tab 同一套做法)。
   §9 nav-state-active:選中態另有「粉色 pill 底 + 粉色文字」兩層撐著,不只靠圖示。
   ⚠️ §9 destructive-nav-separation:登出圖示已無法變紅,但
   .rm-logout-item span{color:#ff6b6b} 的紅色文字 + 獨立卡片位置仍在,區隔沒有消失。 */
/* 2026-09-03 董事長:「icon 看起來很暗沉,弄亮一點」「也要大一點」
   .72 → .88(未選)/1(選中);24 → 30px。彩色 3D 圖本來就該亮著,
   §9 nav-state-active 的辨識度主要由「粉色 pill 底 + 粉色文字」承擔,不靠壓暗圖示。 */
.rm-mi-ic img{width:30px;height:30px;object-fit:contain;opacity:.88;transition:opacity .16s}
.rm-menu-item.rm-mi-act .rm-mi-ic img{opacity:1}
.rm-mi-ar{flex:0 0 auto;margin-left:auto;display:flex;opacity:.42}
.rm-mi-ar svg{width:16px;height:16px;color:#fff}
.rm-lang-card.rm-lang-open .rm-mi-ar-down{transform:rotate(180deg)}
.rm-mi-ar-down{transition:transform .15s}

/* --- 綁卡 pill(綠=已綁顯示 accName / 金=未綁可點進綁卡頁)--- */
.rm-bpill{display:inline-flex;align-items:center;gap:5px;margin-top:5px;border:1px solid transparent;
  font-size:10.5px;font-weight:700;padding:4px 10px;border-radius:99px;max-width:200px;
  -webkit-tap-highlight-color:transparent}
.rm-bpill svg{width:12px;height:12px;flex:0 0 auto;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.rm-bpill .rm-bpill-nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rm-bpill-ok{background:rgba(196,104,95,.18);color:var(--green1);border-color:rgba(196,104,95,.32)}
.rm-bpill-ok svg{stroke:var(--green1)}
.rm-bpill-no{background:rgba(255,213,79,.16);color:var(--gold);border-color:rgba(255,213,79,.34);cursor:pointer}
.rm-bpill-no svg{stroke:var(--gold)}
.rm-bpill-no:active{background:rgba(255,213,79,.30)}

/* --- 流水條(有債才由 JS 產生節點;沒債整塊清空 → hero 自己變矮)--- */
.rm-side-wag{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.12);position:relative}
.rm-side-wag .rm-wag-t{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:11px;color:#c9b8d8;margin-bottom:5px}
.rm-side-wag .rm-wag-t b{color:var(--gold);font-variant-numeric:tabular-nums;white-space:nowrap}
.rm-side-wag .rm-wag-sub{opacity:.6;font-size:9.5px}
.rm-side-wag .rm-wag-track{height:6px;border-radius:99px;background:rgba(255,255,255,.13);overflow:hidden}
.rm-side-wag .rm-wag-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--gold),#ffdf8a)}
.rm-side-wag .rm-wag-t2{margin-top:6px;font-size:9.5px;color:#b9a8cc;line-height:1.5}
/* 🔴 2026-09-22 董事長:方案C 流水進度**融進餘額卡** —— #rm-uc-lock 是 .rm-usercard(flex-wrap)的第二列(flex:0 0 100%),
   餘額列下方一條細線:🔒 + 剩余流水 + 進度條 + 金額。沒欠時 homePaintWag 設 display:none(餘額卡收回單列)。
   authopen 內頁整條收起(只首頁大廳顯示)。可點/鍵盤可達 → Bonus Status。 */
.rm-uc-lock{flex:0 0 100%;display:none;align-items:center;gap:9px;
  margin-top:9px;padding-top:9px;border-top:1px solid rgba(255,255,255,.09);cursor:pointer}
.rm-uc-lock:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.rm-uc-lock .rm-ucl-ic{flex:0 0 auto;display:flex;color:var(--gold)}
.rm-uc-lock .rm-ucl-lb{font-size:11px;font-weight:700;color:#c9cfdb;white-space:nowrap}
.rm-uc-lock .rm-ucl-tr{flex:1;min-width:40px;height:6px;border-radius:99px;background:rgba(255,255,255,.13);overflow:hidden}
.rm-uc-lock .rm-ucl-fl{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--gold),#ffdf8a)}
.rm-uc-lock .rm-ucl-am{font-size:11.5px;font-weight:800;color:var(--gold);font-variant-numeric:tabular-nums;white-space:nowrap}
body.rm-authopen .rm-uc-lock{display:none!important}

/* --- 手機 / 平板抽屜 --- */
@media(max-width:1279px){
  /* 抽屜自己不捲:hero + 餘額卡固定,中間 .rm-side-scroll 捲,登出沉底 */
  /* 抽屜底色改用 --bg(#2e1b23),對齊 mockup 的 .sheet;原本沿用 --panel(#1f1217)整塊偏黑,
     就是董事長 2026-08-20 說的「比 mockup 暗」。桌機常駐側欄仍是 --panel,不動。 */
  .rm-sidebar{padding:0;gap:0;overflow:hidden;background:var(--bg)}
  /* ⚠️ #3d1622 / #2e141d 是 mockup 的深紫,**刻意寫死**:站內 token 沒有這兩個紫,
     換成 var(--card2)/var(--panel)/var(--bg) 整塊會塌成深藍黑(董事長說的「暗」)。
     ::before 那層右上粉色光暈是亮度來源,**不能省**;下面 .rm-sidebar-head / .rm-side-user
     都有 position:relative 疊在它上面(同 mockup 的 .toprow / .u)。 */
  .rm-side-hero{flex:0 0 auto;position:relative;overflow:hidden;
    padding:calc(15px + env(safe-area-inset-top)) 14px 14px;
    background:linear-gradient(150deg,#3d1622 0%,#2e141d 55%,var(--panel) 100%)}
  .rm-side-hero::before{content:"";position:absolute;top:-46px;right:-30px;width:130px;height:130px;
    border-radius:50%;background:radial-gradient(circle,rgba(196,104,95,.34),transparent 70%);pointer-events:none}
  .rm-sidebar-head{justify-content:space-between;margin-bottom:13px;position:relative}
  .rm-menu-title{color:#fff;font-size:17px;font-weight:800}
  .rm-sidebar-close{width:36px;height:36px;border-radius:11px;background:rgba(255,255,255,.11);
    display:flex;align-items:center;justify-content:center;padding:0;font-size:0}
  .rm-sidebar-close svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round}
  .rm-side-user{display:flex;align-items:center;gap:11px;position:relative;padding:0;cursor:pointer}
  .rm-side-avatar{width:50px;height:50px;flex:0 0 auto}
  .rm-side-uwrap{min-width:0}
  .rm-side-uname{font-size:15px;font-weight:800;color:#fff;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* 餘額卡(無手動刷新鈕,見 index.html 註解) */
  .rm-side-wcard{flex:0 0 auto;margin:12px 14px 0;background:var(--card2);border-radius:15px;padding:12px 14px}
  .rm-side-wlb{font-size:10.5px;color:var(--muted);letter-spacing:.4px;text-transform:uppercase;font-weight:700}
  .rm-side-bal{font-size:22px;font-weight:800;color:var(--green1);margin-top:1px;font-variant-numeric:tabular-nums}
  .rm-side-qk{display:flex;gap:8px;margin-top:11px}
  .rm-side-qkbtn{flex:1;min-height:40px;border:0;border-radius:11px;font-family:inherit;font-size:12.5px;font-weight:800;
    cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px;
    -webkit-tap-highlight-color:transparent;transition:transform .1s,opacity .12s}
  .rm-side-qkbtn svg{width:14px;height:14px}
  .rm-side-qkbtn:active{transform:scale(.97)}
  .rm-side-qkdep{background:var(--green1);color:#0c2a06}
  .rm-side-qkwd{background:rgba(255,255,255,.10);color:#fff}
  .rm-side-qkbtn.rm-qk-dim{opacity:.45}   /* 未綁卡 → 壓暗(仍可點,存/提頁自己會把人導去綁卡) */
  /* 選單分組 */
  .rm-side-scroll{flex:1;min-height:0;overflow-y:auto;padding:12px 14px 0;scrollbar-width:none}
  .rm-side-scroll::-webkit-scrollbar{display:none}
  .rm-side-glb{font-size:10px;color:var(--muted);letter-spacing:.5px;text-transform:uppercase;font-weight:700;padding:4px 4px 6px}
  .rm-menu-card{background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible;padding:0;margin-bottom:6px}   /* 2026-09-10:桌機側欄改扁平(拿掉灰卡框),對齊 mockup */
  .rm-menu-item{height:50px;padding:0 10px;gap:12px;border-bottom:0;border-radius:11px}
  .rm-menu-item span{font-size:14px;font-weight:600}
  .rm-menu-item:active{background:rgba(255,255,255,.06)}
  .rm-menu-sep,body.rm-authed .rm-menu-sep.rm-auth-only{display:none!important}
  /* 目前所在頁:粉色 pill 底 */
  .rm-menu-item.rm-mi-act{background:rgba(196,104,95,.18)}
  .rm-menu-item.rm-mi-act>span[data-i18n]{color:var(--pink2)}
  .rm-menu-item.rm-mi-act .rm-mi-ic svg{color:var(--pink2)}
  .rm-lang-opt{padding:7px 10px 7px 40px;gap:12px}
  .rm-lang-opt .rm-flag{width:20px;height:20px}
  .rm-lang-btn{font-size:14px;padding:8px 18px}
  /* 登出:固定在抽屜底部的紅色塊(sidebar 是 flex column,上面 .rm-side-scroll flex:1 已把它推到底) */
  .rm-menu-card.rm-side-logout{margin:0;padding:6px 14px calc(16px + env(safe-area-inset-bottom));
    background:transparent;border-radius:0;flex:0 0 auto}
  .rm-side-logout .rm-menu-item{height:46px;background:rgba(255,107,107,.11);border-radius:12px;padding:0 12px}
  .rm-side-logout .rm-mi-ic svg{color:#ff6b6b}
  body.rm-authed .rm-side-user.rm-auth-only{display:flex!important}
  body.rm-authed .rm-side-wcard.rm-auth-only{display:block!important}
  body.rm-authed .rm-side-wagslot.rm-auth-only{display:block!important}
}
/* 桌機常駐側欄:抽屜專屬元素一律不顯示(specificity 蓋過上面的 authed 顯示規則) */
@media(min-width:1280px){
  .rm-side-hero,.rm-side-wcard,
  body.rm-authed .rm-side-wcard.rm-auth-only,
  body.rm-authed .rm-side-user.rm-auth-only,
  body.rm-authed .rm-side-wagslot.rm-auth-only,
  .rm-menu-title,.rm-side-user,.rm-side-wagslot{display:none!important}
  /* 2026-09-10:桌機顯示分組標題(EARNINGS & REWARDS / GENERAL),對齊 mockup .nav-sec */
  .rm-side-glb{display:block;padding:0 8px;font-size:10.5px;font-weight:800;
    letter-spacing:.6px;color:var(--muted);text-transform:uppercase;margin-bottom:-8px}
  /* 卡與卡之間 16px;分組標題用上面的負 margin 貼近它下面那組 */
  .rm-side-scroll{display:flex;flex-direction:column;gap:16px}
  .rm-mi-ic{width:auto}
  .rm-mi-ar svg{width:16px;height:16px}   /* 2026-09-10:圖示留 20px(base)對齊 mockup;只縮 chevron */
  .rm-mi-ic img{width:27px;height:27px}
}
/* Rewards 真 banner 圖卡(整張設計圖,QQ288 式) */
/* 🔴 2026-09-18 董事長:banner 展示不完 —— 舊的鎖死 aspect-ratio:800/312 + object-fit:cover,
   但 BO 圖是 705×398(比例 ~16:9),寬高比對不上就把上下裁掉。改成讓圖照**自己的原始比例**顯示
   (height:auto,不 cover 不裁),整張 banner 完整出來;BO 換任何比例的圖都不會再被切。 */
.rm-promo-imgcard{background:var(--card);cursor:pointer}
.rm-promo-imgcard img{width:100%;height:auto;display:block}

/* 🔴 2026-09-18 董事長:優惠詳情頁(getRewardList 的 detailHtml)。整張 banner + pill + 標題 + BO 內容 + CTA。
   detailHtml 是 BO 設定的 CMS 內容(h2/h3/ul/ol/table/strong),在這裡統一套暗色主題排版,不然瀏覽器預設表格是白底醜。 */
.rm-promo-detail{max-width:760px;margin:0 auto}
.rm-promo-dimg{width:100%;height:auto;border-radius:14px;display:block;margin:2px 0 16px;background:var(--card)}
.rm-promo-dhead{margin-bottom:6px}
.rm-promo-dpill{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.5px;color:var(--gold);text-transform:uppercase;background:rgba(246,196,83,.12);border:1px solid rgba(246,196,83,.32);border-radius:20px;padding:5px 12px}
.rm-promo-dtitle{font-size:21px;font-weight:900;line-height:1.25;margin:10px 0 6px;text-wrap:balance}
.rm-promo-dbody{color:#c7cdd8;font-size:13.5px;line-height:1.7;overflow-x:hidden}
.rm-promo-dbody h2{font-size:17px;color:#fff;font-weight:900;margin:16px 0 8px}
.rm-promo-dbody h3{font-size:14.5px;color:#fff;font-weight:800;margin:16px 0 8px}
.rm-promo-dbody p{margin:8px 0}
.rm-promo-dbody ul,.rm-promo-dbody ol{margin:8px 0;padding-left:20px}
.rm-promo-dbody li{margin:5px 0}
.rm-promo-dbody strong{color:#fff;font-weight:700}
.rm-promo-dbody table{width:100%;border-collapse:collapse;margin:12px 0;font-size:12.5px}
.rm-promo-dbody th,.rm-promo-dbody td{border:1px solid rgba(255,255,255,.12);padding:8px 10px;text-align:left}
.rm-promo-dbody th{background:rgba(255,255,255,.06);color:#fff;font-weight:800}
.rm-promo-dbody a{color:var(--pink2)}
.rm-promo-dcta{margin-top:22px}

/* ===== After-login intro carousel(feature/after-login-intro,mock 資料,API 後補) ===== */
.rm-intro-ov{position:fixed;inset:0;background:rgba(14,7,10,.78);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  z-index:940;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px}
.rm-intro{position:relative;width:100%;max-width:400px}
.rm-intro-vp{overflow:hidden;border-radius:22px;box-shadow:0 24px 70px rgba(0,0,0,.55)}
.rm-intro-track{display:flex;transition:transform .38s cubic-bezier(.22,.8,.28,1)}
.rm-intro-card{flex:0 0 100%;min-width:0;position:relative;background:var(--card2);padding:34px 26px 26px;text-align:center;
  border:1px solid rgba(255,255,255,.07);display:flex;flex-direction:column}
/* 每卡頂部一層 accent 光暈(--ac 由 JS 塞) */
.rm-intro-card::before{content:"";position:absolute;inset:0 0 auto 0;height:190px;pointer-events:none;
  background:radial-gradient(120% 100% at 50% 0%,var(--acg) 0%,rgba(38,22,29,0) 70%)}
.rm-intro-halo{position:relative;width:104px;height:104px;margin:0 auto 6px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 38%,var(--acg) 0%,rgba(38,22,29,.0) 72%)}
.rm-intro-halo::after{content:"";position:absolute;inset:14px;border-radius:50%;
  border:1px solid var(--acb);opacity:.65}
.rm-intro-halo svg{position:relative;width:46px;height:46px;display:block}
/* 小裝飾星(SVG,不用 emoji) */
.rm-intro-spark{position:absolute;pointer-events:none;opacity:.8}
.rm-intro-spark svg{display:block}
.rm-intro-value{font-size:30px;font-weight:900;letter-spacing:.5px;color:var(--gold);margin:2px 0 6px;
  text-shadow:0 2px 14px rgba(255,213,79,.35)}
.rm-intro-title{position:relative;font-size:21px;font-weight:800;color:#fff;line-height:1.35;margin:4px 0 10px}
.rm-intro-sub{position:relative;font-size:14px;color:#c7cbd6;line-height:1.75;margin:0 0 22px;min-height:49px}
.rm-intro-cta{position:relative;width:100%;height:50px;flex:0 0 auto;margin-top:auto;border:0;border-radius:13px;cursor:pointer;font-family:inherit;
  font-size:16.5px;font-weight:800;color:#fff;background:linear-gradient(135deg,var(--ac1),var(--ac2));
  box-shadow:0 10px 26px var(--acs);transition:transform .12s,filter .12s}
.rm-intro-cta:active{transform:translateY(1px) scale(.99);filter:brightness(1.08)}
.rm-intro-dots{position:relative;display:flex;justify-content:center;gap:7px;margin-top:16px}
.rm-intro-dot{width:8px;height:8px;border-radius:5px;border:0;padding:0;background:rgba(255,255,255,.22);cursor:pointer;
  transition:width .25s,background .25s}
.rm-intro-dot.on{width:22px;background:linear-gradient(90deg,var(--pink),var(--pink2))}
/* 桌面左右箭頭 */
.rm-intro-nav{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.16);
  background:rgba(38,22,29,.72);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2}
.rm-intro-nav svg{width:18px;height:18px;display:block}
.rm-intro-nav:disabled{opacity:.28;cursor:default}
.rm-intro-prev{left:-52px}.rm-intro-next{right:-52px}
@media (max-width:560px){.rm-intro-prev,.rm-intro-next{display:none}}
/* Close All(紅色胶囊,放卡片外) */
.rm-intro-closeall{width:100%;max-width:400px;height:48px;margin-top:16px;border:0;border-radius:13px;cursor:pointer;font-family:inherit;
  font-size:16px;font-weight:800;color:#fff;background:linear-gradient(90deg,#e63950,#ff5a5f);
  box-shadow:0 10px 26px rgba(230,57,80,.32)}
.rm-intro-closeall:active{transform:translateY(1px)}
/* 「今日不再顯示」勾選列 */
.rm-intro-today{position:relative;display:flex;align-items:center;justify-content:center;gap:9px;margin-top:14px;
  color:#aab1c2;font-size:13.5px;cursor:pointer;user-select:none;-webkit-user-select:none}
.rm-intro-today input{position:absolute;opacity:0;width:0;height:0}
.rm-intro-box{width:19px;height:19px;border-radius:6px;border:1.5px solid rgba(255,255,255,.35);background:rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s}
.rm-intro-box svg{width:12px;height:12px;display:block;opacity:0;transform:scale(.6);transition:opacity .15s,transform .15s}
.rm-intro-today input:checked+.rm-intro-box{background:linear-gradient(135deg,var(--pink),var(--pinkd));border-color:var(--pink)}
.rm-intro-today input:checked+.rm-intro-box svg{opacity:1;transform:scale(1)}

/* ===== 首頁 Free Spin Rewards 區塊(2026-07-29:視覺移植自基準站,取代舊 bonus 列)=====
   主題色對照(基準站金 → r99 自家色,跟 turnover 磚/CTA 既有用色一致):
     #F4D070 / #AB7D2B / #f6c453 / #d4af37(金)  → var(--pink2) #ff5aa0 / var(--pinkd) #c31e78 / var(--pink) #ec3f8f
     金色 CTA 按鈕                              → 綠 CTA var(--green1)→var(--green2)(同 .rm-bfs-play / 舊 turnover 領取鈕)
     #141310 / #0a0a0d(黑金底)                 → var(--card) #1f1217 / #20263a(r99 深藍卡底)
     #3ddc5a(已領綠)                            → #35c75a(r99 既有綠)
   結構全照基準站:head 可收合 → compound(Welcome | 3-Day Login)→ turnover 進度條。 */
@keyframes rm-fs-pulse{0%,100%{box-shadow:0 0 0 0 rgba(196,104,95,.6)}70%{box-shadow:0 0 0 8px rgba(196,104,95,0)}}
@keyframes rm-fs-shine{0%{transform:translateX(-100%) skewX(-18deg)}100%{transform:translateX(240%) skewX(-18deg)}}
@keyframes rm-fs-glow{0%,100%{box-shadow:0 0 12px rgba(196,104,95,.45),0 0 0 1px rgba(196,104,95,.4)}50%{box-shadow:0 0 30px rgba(196,104,95,.85),0 0 0 1px rgba(196,104,95,1)}}
@keyframes rm-fs-shake{0%,100%{transform:translateX(0) rotate(0)}25%{transform:translateX(-1.5px) rotate(-.5deg)}75%{transform:translateX(1.5px) rotate(.5deg)}}
@keyframes rm-fs-coin{0%{transform:rotateY(0)}100%{transform:rotateY(360deg)}}
#rm-freespin{display:block;margin:0 0 14px}
.rm-fs-card{position:relative;color:#fff;border-radius:14px;border:1px solid rgba(196,104,95,.32);
  background:linear-gradient(180deg,var(--card3),var(--elev))}
.rm-fs-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--pink2),var(--pink),var(--pink2),transparent)}
/* 收起時整張卡吸睛(輕晃 + 呼吸光暈 + icon 翻轉),展開就安靜下來 */
.rm-fs-card:not(.open){border-color:var(--pink);animation:rm-fs-shake 4s ease-in-out infinite,rm-fs-glow 2s ease-in-out infinite;overflow:visible}
.rm-fs-card.open{overflow:hidden}
.rm-fs-card:not(.open) .rm-fs-ic{transform-style:preserve-3d;animation:rm-fs-coin 3s linear infinite,rm-fs-pulse 2s ease-in-out infinite}
.rm-fs-card:not(.open) .rm-fs-badge{background:linear-gradient(90deg,var(--pinkd),var(--pink2),var(--pinkd));color:#fff;border-color:var(--pinkd);font-weight:900}
@media(prefers-reduced-motion:reduce){.rm-fs-card:not(.open){animation:none}.rm-fs-card:not(.open) .rm-fs-ic{animation:none}}
.rm-fs-head{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;user-select:none}
.rm-fs-ic{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--pink2),var(--pinkd));color:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.rm-fs-ic.pulse{animation:rm-fs-pulse 2s ease-in-out infinite}
.rm-fs-mid{flex:1;min-width:0}
.rm-fs-t{font-size:12px;font-weight:800;letter-spacing:.5px;
  background:linear-gradient(180deg,#fbe3d8,var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent}
.rm-fs-s{font-size:10px;color:var(--muted);margin-top:2px}
.rm-fs-badge{background:rgba(196,104,95,.14);color:var(--pink);border:1px solid rgba(196,104,95,.5);font-size:9px;font-weight:800;letter-spacing:1px;padding:4px 8px;border-radius:100px;text-transform:uppercase;white-space:nowrap}
.rm-fs-chev{color:var(--pink);transition:transform .3s;flex:0 0 auto;display:flex}
.rm-fs-card.open .rm-fs-chev{transform:rotate(180deg)}
.rm-fs-body{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.4,0,.2,1)}
.rm-fs-card.open .rm-fs-body{max-height:640px}
@media(min-width:700px){.rm-fs-card.open .rm-fs-body{max-height:1200px}}   /* 桌面磚更大,別被切掉 */
.rm-fs-body-inner{padding:12px 14px 14px;border-top:1px solid rgba(255,255,255,.06)}
/* Welcome | 3-Day Login 複合卡:label bar 貼著磚無縫,兩側高度自然對齊 */
.rm-fs-compound{display:flex;align-items:stretch;gap:6px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:8px;margin-bottom:12px}
.rm-fs-side{display:flex;flex-direction:column;gap:0;min-width:0}
.rm-fs-side.welcome{flex:1}
.rm-fs-side.days{flex:3.15}
.rm-fs-side-lbl,.rm-fs-side-bot{font-size:8.5px;padding:0 5px;font-weight:900;letter-spacing:.5px;text-transform:uppercase;text-align:center;flex:0 0 auto;
  /* ⚠️ 固定 20px 高 + nowrap:泰/英文案長短不同也絕不折行、絕不撐高 → welcome 與 3 天磚兩語下高度逐像素一致(董事長 2026-07-29) */
  height:20px;display:flex;align-items:center;justify-content:center;white-space:nowrap;overflow:hidden;
  background:linear-gradient(90deg,var(--pinkd),var(--pink),var(--pinkd));color:#fff}
.rm-fs-side-lbl{border-radius:6px 6px 0 0}
.rm-fs-side-bot{border-radius:0 0 6px 6px}
.rm-fs-side.welcome .rm-fs-side-lbl{background:linear-gradient(90deg,var(--pink2),var(--pinkd))}
/* dailyDeposit enabled:false → 三天磚整塊不畫,welcome 側單獨站(.solo)。
   ⚠️ 平常 welcome 磚是 flex:1 吃 days 側撐出來的高度,單獨站時沒東西撐 → 會塌成 0 高;
   .solo 讓它自己吃 3/4 比例、限寬置中,視覺與原本的磚一致。 */
.rm-fs-compound.solo{justify-content:center}
.rm-fs-compound.solo .rm-fs-side.welcome{flex:0 0 auto;width:32%;max-width:150px}
.rm-fs-compound.solo .rm-fs-side.welcome .rm-fs-tile{flex:0 0 auto;aspect-ratio:3/4}
.rm-fs-days-3col{flex:0 0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.rm-fs-tile{position:relative;aspect-ratio:3/4;border-radius:6px;overflow:hidden;background:var(--sunken);cursor:pointer;border:1px solid rgba(255,255,255,.08)}
.rm-fs-side.welcome .rm-fs-tile{flex:1 1 auto;aspect-ratio:auto;min-height:0;width:100%;border-radius:0;margin:0}
/* ⚠️ welcome 磚不自己算 aspect-ratio(欄寬與 day 欄不同 → 會差幾個 px 高)。
   兩側 side 是 align-items:stretch,高度由 days 側(label20+3:4 磚+bot20)決定;
   welcome 磚 flex:1 吃掉剩下的高 = day 磚高,兩語、任何寬度下逐像素一致(董事長 2026-07-29)。圖用 cover 裁切不變形。 */
.rm-fs-tile img{width:100%;height:100%;object-fit:cover;display:block}
.rm-fs-tile.done{border-color:rgba(53,199,90,.55)}
.rm-fs-tile.today{border:1.5px solid var(--pink);box-shadow:0 0 0 3px rgba(196,104,95,.15);animation:rm-fs-pulse 2.5s ease-in-out infinite}
.rm-fs-tile.locked{cursor:default}
.rm-fs-tile.locked img{filter:grayscale(1) brightness(.35)}
.rm-fsb{position:absolute;inset:0;pointer-events:none}   /* 角標/勾勾的 holder:不佔版面,子元素照磚定位 */
.rm-fs-mark{position:absolute;top:4px;right:4px;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:3}
.rm-fs-mark.done{background:#35c75a;color:var(--deep)}
.rm-fs-mark.lock{background:transparent;color:var(--pink2);opacity:.9;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.9));top:50%;right:auto;left:50%;transform:translate(-50%,-50%);width:22px;height:22px}
.rm-fs-mark.lock svg{width:20px;height:20px}
.rm-fs-today-chip{position:absolute;top:5px;left:5px;font-size:8px;color:var(--pink2);background:rgba(0,0,0,.65);padding:2px 6px;border-radius:100px;font-weight:800;letter-spacing:.8px;z-index:3}
/* 剩餘 freespin 角標(10/10):/func/freespin/remaining,磚正中間 */
.rm-fs-spinbadge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:3;
  background:rgba(0,0,0,.72);border:1px solid rgba(53,199,90,.6);border-radius:9px;padding:1px 7px;
  font-size:10px;line-height:16px;font-weight:800;color:#35c75a;white-space:nowrap;pointer-events:none}
.rm-fs-shade{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(180deg,transparent,rgba(0,0,0,.94));padding:14px 5px 5px;text-align:center}
.rm-fs-lbl{font-size:8px;color:var(--pink2);letter-spacing:.5px;text-transform:uppercase;font-weight:800}
.rm-fs-tile.done .rm-fs-lbl,.rm-fs-tile.locked .rm-fs-lbl{color:var(--muted)}
.rm-fs-spin{font-size:12px;font-weight:900;color:#fff;line-height:1.05}
.rm-fs-spin small{font-size:7px;font-weight:700;letter-spacing:1px;opacity:.7}
/* imageUrl 空 → SVG placeholder(不寫死本地 fallback 圖);bonus 頁的磚也共用這個 class */
.rm-fs-ph{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1/1;border-radius:10px;
  background:linear-gradient(135deg,var(--card2) 0%,var(--card) 100%);color:rgba(196,104,95,.45)}
.rm-fs-ph svg{width:36px;height:36px}
.rm-fs-tile .rm-fs-ph,.rm-fs-mod-hero .rm-fs-ph{height:100%;aspect-ratio:auto;border-radius:0}
/* Turnover 進度條 */
.rm-fs-turn{position:relative;background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:9px;padding:10px 12px;cursor:pointer}
.rm-fs-turn.has-bg{background-size:cover;background-position:center}
.rm-fs-turn-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:10px;color:var(--muted);margin-bottom:6px}
/* 董事長 2026-07-29:turnover 關鍵數字要跳出來(label 才留次要灰) */
.rm-fs-turn-top .rm-fs-cur{font-size:13px;font-weight:900;color:#fff}
.rm-fs-turn-top .rm-fs-tgt{font-size:10px;font-weight:700;color:#cfd3dc}
.rm-fs-lv{color:var(--pink2);font-weight:900;font-size:10.5px;letter-spacing:.2px}
.rm-fs-ok{color:#35c75a;font-weight:900}
.rm-fs-bar{height:5px;background:rgba(255,255,255,.08);border-radius:100px;overflow:hidden;position:relative}
.rm-fs-fill{position:absolute;top:0;left:0;height:100%;background:linear-gradient(90deg,var(--pinkd),var(--pink2));border-radius:100px;transition:width .3s}
.rm-fs-hint{font-size:10.5px;color:#cfd3dc;font-weight:600;margin-top:7px;line-height:1.35}
.rm-fs-hint .rm-fs-hl{font-size:11.5px}
.rm-fs-turn-cta{margin-top:10px;width:100%;height:36px;border-radius:8px;border:0;cursor:pointer;font-family:inherit;
  background:var(--grad);color:#fff;font-weight:900;font-size:12px;letter-spacing:1px;text-transform:uppercase;position:relative;overflow:hidden}
.rm-fs-turn-cta:hover{filter:brightness(1.05)}
.rm-fs-turn-cta:disabled{opacity:.6;cursor:default}
.rm-fs-turn-cta::after{content:"";position:absolute;top:0;left:-40%;width:35%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);animation:rm-fs-shine 3s ease-in-out infinite;pointer-events:none}
.rm-fs-turn-done{margin-top:8px;text-align:center;color:#35c75a;font-size:11px;font-weight:800;letter-spacing:.5px}
/* turnover 載入骨架(沿用舊 bonus 列的 shimmer,免醜 Loading 字) */
.rm-fs-skel{display:flex;flex-direction:column;gap:6px;width:100%}
.rm-fs-skel span{display:block;border-radius:5px;background:linear-gradient(90deg,rgba(255,255,255,.05) 25%,rgba(255,255,255,.16) 50%,rgba(255,255,255,.05) 75%);background-size:200% 100%;animation:rm-shim 1.15s linear infinite}
.rm-fs-skel span:nth-child(1){height:6px;width:100%}
.rm-fs-skel span:nth-child(2){height:11px;width:52%}
/* 詳情層(點磚開):hero 圖 + 規則 + ACCEPT & PLAY */
.rm-fs-mov{position:fixed;inset:0;background:rgba(0,0,0,.78);z-index:900;display:flex;align-items:center;justify-content:center;padding:16px}
.rm-fs-mod{position:relative;background:var(--card2);border:1.5px solid rgba(196,104,95,.5);border-radius:16px;width:100%;max-width:340px;overflow:hidden;color:#fff;font-family:inherit}
.rm-fs-mod::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:2;
  background:linear-gradient(90deg,transparent,var(--pink2),var(--pink),var(--pink2),transparent)}
.rm-fs-mod-close{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.5);color:#fff;border:0;border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:3;padding:0}
.rm-fs-mod-hero{position:relative;height:150px;overflow:hidden}
.rm-fs-mod-hero img{width:100%;height:100%;object-fit:cover;display:block}
.rm-fs-mod-shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(40,23,29,.98))}
.rm-fs-mod-pill{position:absolute;top:12px;left:12px;background:rgba(24,11,15,.78);color:var(--pink2);border:1px solid rgba(196,104,95,.55);font-size:10px;font-weight:800;letter-spacing:1.2px;padding:5px 10px;border-radius:4px;text-transform:uppercase;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:2}
.rm-fs-mod-body{padding:14px 18px 18px}
.rm-fs-mod-eye{font-size:10px;color:var(--muted);letter-spacing:1.2px;text-transform:uppercase;text-align:center;margin-bottom:6px}
.rm-fs-mod-t{font-size:20px;font-weight:900;text-align:center;line-height:1.2;margin-bottom:4px;
  background:linear-gradient(180deg,#fbe3d8,var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent}
.rm-fs-mod-sub{font-size:11.5px;color:var(--pink2);text-align:center;font-weight:700;letter-spacing:.4px;margin-bottom:14px}
.rm-fs-mod-rules{background:var(--sunken);border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:12px}
.rm-fs-mod-rules-t{color:var(--pink);font-size:10px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;margin-bottom:8px}
.rm-fs-mod-rules ul{list-style:none;padding:0;margin:0}
.rm-fs-mod-rules li{font-size:11.5px;color:#aab1c2;line-height:1.65;padding-left:16px;position:relative;margin-bottom:6px}
.rm-fs-mod-rules li:last-child{margin-bottom:0}
.rm-fs-mod-spark{position:absolute;left:0;top:2px;color:var(--pink2);display:inline-flex}
.rm-fs-hl{color:var(--pink2);font-weight:700}
.rm-fs-mod-cta{width:100%;height:40px;margin-top:12px;border:0;border-radius:8px;cursor:pointer;font-family:inherit;
  background:var(--grad);color:#fff;font-weight:800;font-size:13px;letter-spacing:.5px;position:relative;overflow:hidden}
.rm-fs-mod-cta:disabled{opacity:.6;cursor:default}
.rm-fs-mod-cta::after{content:"";position:absolute;top:0;left:-40%;width:35%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);animation:rm-fs-shine 3s ease-in-out infinite;pointer-events:none}
.rm-fs-mod-skip{display:block;width:100%;text-align:center;margin-top:8px;font-size:11px;color:var(--muted);cursor:pointer;background:transparent;border:0;font-family:inherit}
.rm-fs-mod-skip.reg{margin-top:10px;font-size:12px;color:var(--pink2);font-weight:700;text-decoration:underline;text-underline-offset:3px}   /* 登出態次鈕=註冊(可點的導流,不是「ไว้ก่อน」) */

/* ==================================================================================
   Special Rewards 內頁(/rewards)+ 首頁入口按鈕 —— 2026-07-29
   版型移植自基準站 Special V2,但:
     · 主色一律 r99 粉(--pink2 / --pinkd / --pink)+ 綠 CTA(--green1/--green2)—— **零金色**
     · 基準站版用 ::before/::after 的 content 塞 emoji(皇冠/鎖/播放/勾/圓點)做裝飾 —— 一律拿掉,改由 JS 塞 FS_SVG(前端不准 emoji)
     · 所有動效在 prefers-reduced-motion 下全關(本區塊最下方統一 override)
   ================================================================================== */
/* ---------- 首頁 Free Spin 卡下方的入口按鈕(粉→綠漸層 + 光澤掃過 + 箭頭) ---------- */
.rm-rw-entry{display:block;width:100%;margin-top:10px;padding:0;border:0;border-radius:12px;cursor:pointer;
  font-family:inherit;position:relative;overflow:visible;
  background:linear-gradient(100deg,var(--pinkd) 0%,var(--pink2) 46%,var(--green1) 100%);
  box-shadow:0 4px 14px rgba(196,104,95,.3);transition:transform .12s ease,box-shadow .22s ease}
.rm-rw-entry:hover{box-shadow:0 6px 20px rgba(196,104,95,.45)}
.rm-rw-entry:active{transform:scale(.975)}
.rm-rw-entry-in{position:relative;display:flex;align-items:center;justify-content:center;gap:9px;height:44px;
  border-radius:12px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(0,0,0,.18))}
/* 光澤掃過:3.6s 一次,慢而不刺眼(不要廉價閃爍) */
.rm-rw-entry-in::after{content:"";position:absolute;top:0;left:-45%;width:36%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg);
  animation:rm-fs-shine 3.6s ease-in-out infinite}
.rm-rw-entry-tx{font-size:12.5px;font-weight:900;letter-spacing:1.1px;color:#fff;text-transform:uppercase;
  text-shadow:0 1px 2px rgba(0,0,0,.4)}
.rm-rw-entry-ic,.rm-rw-entry-ar{display:inline-flex;color:#fff;filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
.rm-rw-entry-ar{animation:rm-rw-nudge 2.4s ease-in-out infinite}
@keyframes rm-rw-nudge{0%,100%{transform:translateX(0)}55%{transform:translateX(4px)}}
/* 點擊:粉 + 綠雙層光暈自按鈕擴散(550ms),按鈕本體同時按壓 */
.rm-rw-entry::before{content:"";position:absolute;inset:0;border-radius:12px;pointer-events:none;opacity:0}
.rm-rw-entry.burst{transform:scale(.97)}
.rm-rw-entry.burst::before{animation:rm-rw-burst .42s cubic-bezier(.2,.7,.3,1) forwards}
/* 光暈在前 60% 維持亮度(切頁前那 170ms 才看得到),之後才收掉 */
@keyframes rm-rw-burst{
  0%{opacity:1;box-shadow:0 0 0 0 rgba(231,164,140,.9),0 0 0 0 rgba(196,104,95,.65)}
  60%{opacity:.8;box-shadow:0 0 0 17px rgba(231,164,140,.5),0 0 0 30px rgba(196,104,95,.3)}
  100%{opacity:0;box-shadow:0 0 0 28px rgba(231,164,140,0),0 0 0 48px rgba(196,104,95,0)}}

/* ---------- 入場:整頁 slide-in + 元素依序上浮(stagger,--d 由 JS 逐個給) ---------- */
.rm-rw-wrap{position:relative}
.rm-rw-wrap.anim{animation:rm-rw-slidein .34s cubic-bezier(.2,.9,.3,1.05)}
@keyframes rm-rw-slidein{0%{opacity:0;transform:translateY(22px) scale(.985)}100%{opacity:1;transform:none}}
.rm-rw-wrap.anim .rm-rw-stg{opacity:0;animation:rm-rw-rise .3s cubic-bezier(.2,.9,.3,1.05) var(--d,0s) forwards}
@keyframes rm-rw-rise{0%{opacity:0;transform:translateY(16px)}100%{opacity:1;transform:none}}

/* ---------- Hero ---------- */
.rm-rw-hero{position:relative;padding:14px 4px 6px;min-height:132px;overflow:hidden}
.rm-rw-hero-l{max-width:60%}
.rm-rw-hero-t{font-size:32px;font-weight:900;line-height:.95;letter-spacing:1.6px;font-style:italic;
  background:linear-gradient(180deg,#fbe3d8 0%,var(--pink2) 48%,var(--pinkd) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 3px 12px rgba(0,0,0,.55)}
.rm-rw-hero-sub{color:#e6b7ce;font-size:10.5px;font-weight:700;letter-spacing:1.1px;margin-top:9px;text-transform:uppercase;line-height:1.35}
.rm-rw-hero-emb{position:absolute;right:2px;top:6px;width:150px;height:120px;display:flex;align-items:center;justify-content:center}
.rm-rw-ring{width:100px;height:100px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 40% 30%,rgba(231,164,140,.3),transparent 66%);
  border:4px solid var(--pink2);box-shadow:0 0 24px rgba(196,104,95,.5),inset 0 0 16px rgba(231,164,140,.3);
  color:var(--pink2);font-weight:900;font-size:15px;letter-spacing:1px;text-align:center;line-height:1.1;
  text-shadow:0 2px 4px rgba(0,0,0,.5)}
.rm-rw-sparks{position:absolute;inset:0;pointer-events:none;animation:rm-rw-twinkle 3.4s ease-in-out infinite;
  background:radial-gradient(2px 2px at 20% 28%,var(--pink2),transparent),
             radial-gradient(1.5px 1.5px at 80% 18%,#fbe3d8,transparent),
             radial-gradient(2px 2px at 46% 68%,var(--green1),transparent),
             radial-gradient(1.5px 1.5px at 90% 58%,#fbe3d8,transparent),
             radial-gradient(1px 1px at 62% 40%,#fff,transparent)}
@keyframes rm-rw-twinkle{0%,100%{opacity:.55}50%{opacity:1}}
.rm-rw-divider{margin:8px 56px 12px;height:1px;position:relative;
  background:linear-gradient(90deg,transparent,var(--pink),transparent)}
.rm-rw-divider-ic{position:absolute;top:-8px;left:50%;transform:translateX(-50%);color:var(--pink2);
  background:var(--bg);padding:0 8px;display:flex}

/* ---------- 卡片 ---------- */
.rm-rw-card{position:relative;border-radius:16px;padding:14px 14px 14px;margin:0 0 14px;overflow:hidden}
.rm-rw-card::before{content:"";position:absolute;inset:0;border-radius:16px;padding:1.5px;pointer-events:none;opacity:.75;
  background:linear-gradient(180deg,var(--pink2),transparent 52%,rgba(143,58,78,.9));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.rm-rw-card.c01{background:linear-gradient(135deg,#3a1520 0%,#30121c 46%,#1e0d13 100%)}
.rm-rw-card.c02{background:linear-gradient(135deg,#2e1a1c 0%,#33131e 46%,#1f0c12 100%)}
.rm-rw-card.c03{background:linear-gradient(135deg,#0e3327 0%,#0a2419 46%,#06140f 100%)}
.rm-rw-card.c02::before{background:linear-gradient(180deg,var(--pink2),transparent 52%,rgba(184,82,106,.85))}
.rm-rw-card.c03::before{background:linear-gradient(180deg,var(--green1),transparent 52%,rgba(143,58,78,.8))}
.rm-rw-num{position:absolute;left:0;top:0;width:40px;height:48px;z-index:2;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,rgba(231,164,140,.2),rgba(231,164,140,.07));border:1px solid var(--pink2);color:var(--pink2);
  font-weight:900;font-size:13.5px;letter-spacing:.5px;clip-path:polygon(0 0,100% 0,100% 78%,50% 100%,0 78%)}
.rm-rw-ct{position:relative;z-index:1;font-size:21px;font-weight:900;color:var(--pink2);letter-spacing:1px;line-height:1.05;
  text-transform:uppercase;text-shadow:0 2px 6px rgba(0,0,0,.5);padding:2px 96px 0 50px;
  /* min-height 讓標題下方的內容一定落在左上角 01/02/03 六角標(48px 高)之下,不會被壓到 */
  min-height:36px;box-sizing:border-box}
.rm-rw-card.c03 .rm-rw-ct{color:#7fe0a5}
.rm-rw-cr{position:absolute;right:10px;top:12px;width:72px;height:72px;z-index:2}
/* 有右上角遊戲圖時,標題/描述讓開,長文案(英文較長)不會壓到圖 */
.rm-rw-card.has-img .rm-rw-desc{padding-right:86px;min-height:32px}
.rm-rw-cr img{width:100%;height:100%;object-fit:cover;border-radius:11px;filter:drop-shadow(0 4px 9px rgba(0,0,0,.6))}
.rm-rw-desc{position:relative;z-index:1;font-size:12.5px;color:#eef0f6;margin-top:9px;line-height:1.45}
.rm-rw-desc b{color:var(--pink2);font-weight:900}
.rm-rw-card.c03 .rm-rw-desc b{color:#7fe0a5}
.rm-rw-tag{position:relative;z-index:1;display:flex;align-items:center;gap:9px;width:100%;box-sizing:border-box;
  padding:8px 12px;margin-top:11px;border-radius:9px;background:rgba(0,0,0,.4);border:1px solid rgba(231,164,140,.34)}
.rm-rw-card.c03 .rm-rw-tag{border-color:rgba(196,104,95,.34)}
.rm-rw-tag .ic{width:26px;height:26px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:var(--pink2)}
.rm-rw-card.c03 .rm-rw-tag .ic{color:#7fe0a5}
.rm-rw-tag .tx{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.rm-rw-tag .tx small{font-size:9px;color:#c0c8d5;letter-spacing:.5px;font-weight:700;text-transform:uppercase}
.rm-rw-tag .tx strong{color:var(--pink2);font-size:12.5px;font-weight:900;letter-spacing:.3px}
.rm-rw-card.c03 .rm-rw-tag .tx strong{color:#7fe0a5}
/* 大字獎勵數(READY TO CLAIM / N FREE SPINS) */
.rm-rw-mega{position:relative;z-index:1;margin-top:11px}
.rm-rw-eyebrow{font-size:10px;font-weight:900;letter-spacing:2px;text-transform:uppercase;color:var(--pink2);opacity:.92;margin-bottom:3px}
.rm-rw-mega.play .rm-rw-eyebrow{color:#35c75a}
.rm-rw-mega.done .rm-rw-eyebrow{color:var(--muted)}
.rm-rw-mega-n{display:flex;align-items:baseline;gap:8px;line-height:1;margin:2px 0 3px}
.rm-rw-mega-n .num{font-size:42px;font-weight:900;letter-spacing:.5px;text-shadow:0 2px 6px rgba(0,0,0,.5);
  background:linear-gradient(180deg,#fbe3d8 0%,var(--pink2) 50%,var(--pinkd) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.rm-rw-mega.play .rm-rw-mega-n .num{background:linear-gradient(180deg,#b6f5ce 0%,#35c75a 50%,#1d8a3c 100%);-webkit-background-clip:text;background-clip:text}
.rm-rw-mega.done .rm-rw-mega-n .num{background:none;color:var(--muted);-webkit-text-fill-color:var(--muted)}
.rm-rw-mega-n .unit{color:var(--pink2);font-size:12px;font-weight:900;letter-spacing:1px}
.rm-rw-mega.play .rm-rw-mega-n .unit{color:#35c75a}
.rm-rw-mega.done .rm-rw-mega-n .unit{color:var(--muted)}
.rm-rw-mega-s{color:#c0c8d5;font-size:11px;line-height:1.35;margin-top:2px}
/* 01 WELCOME 的券資訊(Won ฿ / Expires,2026-08-04 從併掉的 Bonus 頁搬過來):沿用 .rm-fs-vsub 字級色,只負責排版 */
.rm-rw-meta{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:2px 12px;margin-top:6px}
/* 多張券時的中性提示(不顯金額日期,點了去 Bonus Status 看逐張):沿用 .rm-fs-vsub,只加可點的訊號 */
.rm-rw-vmore{cursor:pointer;color:var(--pink2);text-decoration:underline;text-underline-offset:2px}

/* ---------- 02 儲值解鎖三天圓磚 ---------- */
.rm-rw-days{position:relative;z-index:1;display:grid;gap:8px;width:100%;margin-top:13px}
.rm-rw-day{text-align:center;cursor:pointer}
.rm-rw-day-lbl{font-size:9px;color:#c0c8d5;font-weight:700;letter-spacing:.4px;margin-bottom:4px;text-transform:uppercase}
.rm-rw-day-c{position:relative;width:54px;height:54px;border-radius:50%;margin:0 auto;display:inline-flex;align-items:center;justify-content:center;
  background:#261319;border:2px solid rgba(255,255,255,.1);color:var(--muted)}
.rm-rw-day-c svg{width:22px;height:22px}
.rm-rw-day.on .rm-rw-day-c{border:2.5px solid var(--pink2);color:var(--pink2);
  background:radial-gradient(circle at 40% 30%,rgba(231,164,140,.36),rgba(196,104,95,.12));
  animation:rm-rw-daypulse 2.2s ease-in-out infinite}
@keyframes rm-rw-daypulse{0%,100%{box-shadow:0 0 16px rgba(196,104,95,.5),inset 0 0 10px rgba(231,164,140,.2)}
  50%{box-shadow:0 0 26px rgba(196,104,95,.8),inset 0 0 14px rgba(231,164,140,.35)}}
.rm-rw-day.done .rm-rw-day-c{border-color:rgba(53,199,90,.55);color:#35c75a}
.rm-rw-day.playing .rm-rw-day-c{border:2.5px solid #35c75a;color:#35c75a;
  background:radial-gradient(circle at 40% 30%,rgba(53,199,90,.32),rgba(53,199,90,.08))}
.rm-rw-day.locked{cursor:default}
.rm-rw-day.locked .rm-rw-day-c{opacity:.72}
.rm-rw-day-badge{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;
  background:linear-gradient(180deg,#35c75a,#1d8a3c);color:#fff;font-size:10.5px;font-weight:900;
  display:flex;align-items:center;justify-content:center;border:1.5px solid var(--deep);box-shadow:0 2px 6px rgba(53,199,90,.55)}
.rm-rw-day-fs{font-size:11px;font-weight:900;color:var(--pink2);margin-top:4px;letter-spacing:.3px}
.rm-rw-day.locked .rm-rw-day-fs{color:var(--muted);opacity:.75}
.rm-rw-day.done .rm-rw-day-fs,.rm-rw-day.playing .rm-rw-day-fs{color:#35c75a}
.rm-rw-day-st{font-size:9px;color:#c0c8d5;margin-top:3px;letter-spacing:.3px}
.rm-rw-day.on .rm-rw-day-st{color:var(--pink2);font-weight:800}
.rm-rw-day.done .rm-rw-day-st,.rm-rw-day.playing .rm-rw-day-st{color:#35c75a}

/* ---------- 03 Turnover 三環 + 當前級進度 ---------- */
.rm-rw-rings{position:relative;z-index:1;display:grid;gap:8px;width:100%;margin-top:13px}
.rm-rw-ring-i{display:flex;flex-direction:column;align-items:center;gap:2px}
.rm-rw-ring-i.locked{color:#5a5f6a}
.rm-rw-ring-i.progress{color:var(--pink2)}
.rm-rw-ring-i.reached{color:#35c75a}
.rm-rw-ring-sw{position:relative;width:68px;height:68px}
.rm-rw-ring-sw svg{width:100%;height:100%}
.rm-rw-ring-in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.rm-rw-ring-ck{color:#35c75a;display:flex;margin-bottom:1px}
.rm-rw-ring-ck svg{width:14px;height:14px}
.rm-rw-ring-lv{font-size:12px;font-weight:900;color:#eef0f6;letter-spacing:.3px}
.rm-rw-ring-i.progress .rm-rw-ring-lv{color:var(--pink2)}
.rm-rw-ring-i.reached .rm-rw-ring-lv{color:#35c75a}
.rm-rw-ring-i.locked .rm-rw-ring-lv{color:#b39aa2}
.rm-rw-ring-pct{font-size:9px;color:#c0c8d5;margin-top:1px;letter-spacing:.2px}
.rm-rw-ring-i.reached .rm-rw-ring-pct{color:#35c75a}
.rm-rw-ring-fs{font-size:11.5px;font-weight:900;color:var(--pink2);margin-top:5px;letter-spacing:.3px}
.rm-rw-ring-i.locked .rm-rw-ring-fs{color:#7c8394}
.rm-rw-ring-i.reached .rm-rw-ring-fs{color:#35c75a}
.rm-rw-ring-tg{font-size:9px;color:#c0c8d5;font-weight:700;letter-spacing:.2px}
.rm-rw-cur{position:relative;z-index:1;margin-top:13px;padding:11px 13px;border-radius:12px;overflow:hidden;
  background:linear-gradient(180deg,rgba(196,104,95,.12),rgba(196,104,95,.04));border:1.5px solid rgba(196,104,95,.45);
  box-shadow:0 0 13px rgba(196,104,95,.2),inset 0 0 12px rgba(196,104,95,.05)}
.rm-rw-cur-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.rm-rw-cur-lbl{color:#7fe0a5;font-size:9.5px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase}
.rm-rw-cur-t{color:#eef0f6;font-size:15px;font-weight:900;letter-spacing:.5px}
.rm-rw-cur-bar{height:10px;border-radius:5px;overflow:hidden;position:relative;background:rgba(0,0,0,.5);border:1px solid rgba(196,104,95,.3)}
.rm-rw-cur-bar .fill{position:relative;height:100%;border-radius:5px;overflow:hidden;transition:width .6s ease;
  background:linear-gradient(90deg,var(--green2),var(--green1) 55%,#a6ef5f)}
.rm-rw-cur-bar .fill .shine{position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.5) 50%,transparent 100%);animation:rm-rw-barshine 2.2s linear infinite}
@keyframes rm-rw-barshine{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.rm-rw-cur-nums{display:flex;align-items:center;gap:5px;margin-top:6px;font-size:11px;flex-wrap:wrap}
.rm-rw-cur-nums .cur{color:#eef0f6;font-weight:900}
.rm-rw-cur-nums .sep{color:var(--muted)}
.rm-rw-cur-nums .tg{color:#c0c8d5}
.rm-rw-cur-nums .rem{margin-left:auto;color:var(--pink2);font-weight:700;letter-spacing:.2px}
.rm-rw-ok{color:#35c75a;font-weight:900}

/* ---------- CTA ---------- */
.rm-rw-ctaRow{position:relative;z-index:2;display:flex;gap:8px;margin-top:12px}
.rm-rw-cta{flex:1;min-height:40px;padding:10px 10px;border-radius:9px;border:0;cursor:pointer;font-family:inherit;
  font-weight:900;font-size:12px;letter-spacing:.6px;text-transform:uppercase;text-align:center;
  display:inline-flex;align-items:center;justify-content:center;gap:6px}
.rm-rw-cta .ic{display:inline-flex}
.rm-rw-cta.green{background:var(--grad);color:#fff;
  box-shadow:0 3px 10px rgba(196,104,95,.32),inset 0 1px 0 rgba(255,255,255,.3);animation:rm-rw-greenpulse 2.4s ease-in-out infinite}
@keyframes rm-rw-greenpulse{0%,100%{box-shadow:0 3px 10px rgba(196,104,95,.32),inset 0 1px 0 rgba(255,255,255,.3)}
  50%{box-shadow:0 3px 18px rgba(196,104,95,.6),0 0 0 3px rgba(196,104,95,.14),inset 0 1px 0 rgba(255,255,255,.4)}}
.rm-rw-cta.pink{background:linear-gradient(135deg,var(--pink2),var(--pinkd));color:#fff;
  box-shadow:0 3px 10px rgba(196,104,95,.35),inset 0 1px 0 rgba(255,255,255,.28)}
.rm-rw-cta.outline{background:transparent;border:1.5px solid var(--pink2);color:var(--pink2)}
.rm-rw-cta.dis{background:linear-gradient(180deg,#333947,#262b38);color:#7c8394;cursor:not-allowed;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}

/* ---------- Footer ---------- */
.rm-rw-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;text-align:center;
  color:#eef0f6;font-size:11.5px;line-height:1.5;padding:13px 12px;background:rgba(0,0,0,.35);border-radius:10px;margin:0 0 10px}
.rm-rw-foot .ic{display:inline-flex;color:var(--pink2)}
.rm-rw-foot.on .ic{color:#35c75a}
.rm-rw-foot-btns{display:flex;gap:8px;width:100%;margin-top:4px}

/* ---------- VIEW REWARDS modal(全部 Level 一覽) ---------- */
.rm-rw-mov{position:fixed;inset:0;z-index:900;display:flex;align-items:center;justify-content:center;padding:18px;
  background:rgba(0,0,0,.78);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.rm-rw-mod{position:relative;width:100%;max-width:380px;padding:20px 18px 16px;border-radius:14px;
  background:linear-gradient(180deg,var(--card3),var(--sunken));border:1.5px solid rgba(196,104,95,.55);
  box-shadow:0 0 28px rgba(196,104,95,.3),0 8px 40px rgba(0,0,0,.7)}
.rm-rw-mod-x{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:50%;padding:0;cursor:pointer;
  background:rgba(0,0,0,.5);border:1px solid rgba(196,104,95,.5);color:var(--pink2);display:flex;align-items:center;justify-content:center}
.rm-rw-mod-t{font-size:17px;font-weight:900;letter-spacing:1px;text-align:center;text-transform:uppercase;margin-bottom:4px;padding-right:34px;
  background:linear-gradient(180deg,#fbe3d8,var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent}
.rm-rw-mod-sub{color:#c0c8d5;font-size:11.5px;text-align:center;margin-bottom:13px;line-height:1.4}
.rm-rw-mov-list{display:flex;flex-direction:column;gap:6px;margin-bottom:13px}
.rm-rw-mov-row{display:grid;grid-template-columns:52px 1fr auto auto;gap:8px;align-items:center;padding:9px 11px;border-radius:9px;
  background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.08)}
.rm-rw-mov-row.done{border-color:rgba(53,199,90,.5);background:rgba(53,199,90,.08)}
.rm-rw-mov-row.ready,.rm-rw-mov-row.active{border-color:var(--pink2);
  background:linear-gradient(180deg,rgba(231,164,140,.12),rgba(231,164,140,.04));box-shadow:0 0 10px rgba(196,104,95,.22)}
.rm-rw-mov-lv{font-weight:900;color:var(--pink2);font-size:13px;letter-spacing:.3px}
.rm-rw-mov-row.locked .rm-rw-mov-lv{color:#7c8394}
.rm-rw-mov-tg{color:#eef0f6;font-size:12px;font-weight:700}
.rm-rw-mov-fs{color:var(--pink2);font-size:13px;font-weight:900;letter-spacing:.3px}
.rm-rw-mov-row.done .rm-rw-mov-fs{color:#35c75a}
.rm-rw-mov-st{font-size:10px;color:#c0c8d5;font-weight:700;letter-spacing:.2px;white-space:nowrap}
.rm-rw-mov-row.done .rm-rw-mov-st{color:#35c75a}
.rm-rw-mov-row.ready .rm-rw-mov-st{color:var(--pink2)}
.rm-rw-mod-close{width:100%;height:38px;border:0;border-radius:9px;cursor:pointer;font-family:inherit;
  background:var(--grad);color:#fff;font-weight:900;font-size:12.5px;letter-spacing:1px}

/* ---------- 桌面 ---------- */
@media(min-width:700px){
  .rm-rw-hero{min-height:170px;padding:20px 6px 10px}
  .rm-rw-hero-t{font-size:44px;letter-spacing:2.4px}
  .rm-rw-hero-sub{font-size:12px}
  .rm-rw-hero-emb{width:200px;height:160px}
  .rm-rw-ring{width:130px;height:130px;font-size:19px}
  .rm-rw-card{padding:18px 18px 16px}
  .rm-rw-day-c{width:64px;height:64px}
  .rm-rw-ring-sw{width:84px;height:84px}
  .rm-rw-mega-n .num{font-size:52px}
}

/* ---------- 桌機:里程碑卡改 2-up 網格,善用 .rm-page-wide 的 900px 寬 ----------
   卡片是 01 WELCOME → 02 DEPOSIT → 03 TURNOVER 的「編號序列」(seq()),桌機一欄會很浪費。
   c03(流水)有級距三環 + 當前進度條,內容最重 → 讓它獨占整排(visual-hierarchy),
   c01/c02 兩張較矮的並排。頁級 footer 也跨滿(它與卡片同為 #rm-rw-body 直接子元素)。
   卡片數會 1~3 張浮動:只 1 張時就是滿寬(等同原本堆疊),不會出現孤兒欄。 */
@media(min-width:1024px){
  .rm-page-wide #rm-rw-body{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;align-items:start}
  .rm-page-wide #rm-rw-body .rm-rw-card{margin:0}      /* gap 取代 margin-bottom,避免雙重間距 */
  .rm-page-wide #rm-rw-body .rm-rw-card.c03{grid-column:1/-1}   /* 流水卡跨滿,三環才有空間攤開 */
  .rm-page-wide #rm-rw-body .rm-rw-foot{grid-column:1/-1;margin-top:2px}
}

/* ---------- prefers-reduced-motion:本區塊所有動效一律關閉(入場直接顯示) ---------- */
@media(prefers-reduced-motion:reduce){
  .rm-rw-wrap.anim,.rm-rw-wrap.anim .rm-rw-stg{animation:none!important;opacity:1!important;transform:none!important}
  .rm-rw-entry,.rm-rw-entry.burst{transition:none!important;transform:none!important}
  .rm-rw-entry-in::after,.rm-rw-entry-ar,.rm-rw-entry.burst::before,
  .rm-rw-sparks,.rm-rw-day.on .rm-rw-day-c,.rm-rw-cur-bar .fill .shine,.rm-rw-cta.green{animation:none!important}
  .rm-rw-cur-bar .fill{transition:none!important}
}

/* ================= Bonus Pass 通行證內頁(/bonus_pass,app.js renderBonusPass;合約 §8.7) =================
   版型照董事長定稿原型 mockup-bonus-pass-proto.html;顏色一律走本站 :root token
   (--gold / --green1 / --muted / --card2…),不硬編基準站的 #f6c453。
   關卡數由 BO 決定(3~10 關都可能)→ 路徑用等寬節點自然堆疊,不寫死高度。 */
/* ⚠️ token 要同時定義在 .rm-bp-mov 上:領獎彈窗是 appendChild 到 document.body(不在 .rm-bp 裡面),
   只掛在 .rm-bp 的話彈窗吃不到 --bp,背景/文字色會整組失效(實測踩過:金色主鈕變透明看不見)。 */
.rm-bp,.rm-bp-mov{--bp:var(--pink2);--bp-d:var(--pinkd);--bp-l:#ffd6e8;--bp-fg:#fff;--bp-ok:var(--green1);--bp-ok2:#a9e86a;--bp-warn:#e0603c}  /* 主色跟站走(Special Rewards 同款粉);要换回金:--bp:var(--gold);--bp-d:#c31e78;--bp-l:#ffd6e8;--bp-fg:#1a1206 */
.rm-bp{position:relative;padding-bottom:20px;
  /* 氛圍(mockup 的頂部光暈 + 星點):畫在容器背景,不用偽元素(會被父層底色蓋掉) */
  background-repeat:no-repeat;background-position:50% 0,12% 26px,12% 8px,78% 5px,40% 90px,88% 130px,22% 170px;
  background-size:150% 320px,120% 300px,auto,auto,auto,auto,auto;
  background-image:
   radial-gradient(closest-side,rgba(231,164,140,.15),transparent),
   radial-gradient(closest-side,rgba(184,82,106,.12),transparent),
   radial-gradient(circle,rgba(255,255,255,.16) 0 1px,transparent 1.6px),
   radial-gradient(circle,rgba(255,255,255,.13) 0 1px,transparent 1.6px),
   radial-gradient(circle,rgba(255,255,255,.11) 0 1px,transparent 1.4px),
   radial-gradient(circle,rgba(255,255,255,.12) 0 1px,transparent 1.5px),
   radial-gradient(circle,rgba(255,255,255,.09) 0 1px,transparent 1.4px)}
.rm-bp .rm-hint{padding:26px 0;text-align:center;color:var(--muted);font-size:13px}

/* 空狀態 / 登出態 */
/* 🔴 2026-09-18 董事長:Bonus Pass 刷新載入骨架屏(取代光禿 Loading)。shimmer 掃光;reduced-motion 關動效。 */
.rm-bp-skel{display:flex;flex-direction:column;gap:14px;padding-top:4px}
.rm-bp-skel-banner{height:150px;border-radius:16px}
.rm-bp-skel-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.rm-bp-skel-stats>div{height:60px}
.rm-bp-skel-cards{display:flex;flex-direction:column;gap:12px}
.rm-bp-skel-cards>div{height:104px;border-radius:14px}
.rm-bp-shim{position:relative;overflow:hidden;background:rgba(255,255,255,.05);border-radius:12px}
.rm-bp-shim::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);animation:rm-bp-shimmer 1.4s infinite}
@keyframes rm-bp-shimmer{100%{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.rm-bp-shim::after{animation:none}}
.rm-bp-empty{text-align:center;padding:36px 14px 20px;color:var(--muted)}
.rm-bp-empty svg{color:var(--bp);opacity:.55;margin:0 auto 12px}
.rm-bp-empty-t{font-size:15px;font-weight:800;color:#fff}
.rm-bp-empty-s{font-size:12px;margin-top:6px;line-height:1.55}
.rm-bp-cta{display:block;width:100%;height:46px;margin-top:14px;border:0;border-radius:12px;cursor:pointer;
  font-family:inherit;font-size:15px;font-weight:900;color:var(--bp-fg);
  background:linear-gradient(180deg,var(--bp),var(--bp-d))}
.rm-bp-cta:active{transform:scale(.985)}
.rm-bp-ghost{display:block;width:100%;height:42px;margin-top:9px;border:1px solid rgba(255,255,255,.16);
  border-radius:12px;background:transparent;color:var(--muted);font-family:inherit;font-size:13.5px;font-weight:800;cursor:pointer}

/* 列表頁 */
/* min-height 是「有圖 / 沒圖兩張卡看起來同一套」的關鍵:BO 圖是 3:1 橫幅(1536x512),
   375px 手機上卡寬約 347 → 3:1 剛好 116px,所以 min-height 取 118px,圖幾乎不被裁,
   沒圖的卡也撐到同一高度,並排不會一高一矮。 */
/* ===== Bonus Pass 列表:一關一關的路線圖(董事長 2026-09-17 方案 1)=====
   每個 Pass = 一個關卡,左邊編號軌道 ①→N 用連接線串成一條闖關路徑;節點狀態照真實資料上色(done/current/lock/open)。 */
.rm-bp-road{position:relative}
.rm-bp-road .rm-bp-card{margin:0}   /* 軌道靠 .rm-bp-stg 的 padding-bottom 排距,卡片本身不再留 margin */
.rm-bp-stg{position:relative;display:grid;grid-template-columns:44px 1fr;gap:11px;padding-bottom:18px}
.rm-bp-stg-rail{position:relative;display:flex;justify-content:center}
.rm-bp-stg-node{position:relative;z-index:1;width:36px;height:36px;margin-top:5px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:14.5px;font-weight:900;color:#fff;
  background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.16);box-shadow:0 3px 10px rgba(0,0,0,.4)}
.rm-bp-stg-line{position:absolute;left:50%;top:41px;bottom:-18px;width:3px;transform:translateX(-50%);
  background:rgba(255,255,255,.12);border-radius:2px}
.rm-bp-stg:last-child .rm-bp-stg-line{display:none}
.rm-bp-stg.done .rm-bp-stg-node{background:var(--bp-ok);color:#04120c;border-color:transparent}
.rm-bp-stg.current .rm-bp-stg-node{background:linear-gradient(135deg,var(--bp),var(--bp-d));color:#1f0c12;border-color:#fff;
  box-shadow:0 0 0 4px rgba(251,213,196,.18),0 3px 12px rgba(251,213,196,.30)}
.rm-bp-stg.lock .rm-bp-stg-node{background:#20242c;color:var(--muted);border-color:rgba(255,255,255,.10)}
.rm-bp-stg.done .rm-bp-stg-line,.rm-bp-stg.current .rm-bp-stg-line{background:linear-gradient(180deg,var(--bp),var(--bp-d))}
.rm-bp-card{position:relative;border-radius:16px;overflow:hidden;padding:13px;margin:0 0 11px;cursor:pointer;
  min-height:118px;display:flex;flex-direction:column;justify-content:center;
  border:1px solid rgba(231,164,140,.35);background:linear-gradient(118deg,#241b06,#43300d 45%,#171207)}
.rm-bp-card:active{transform:scale(.985)}
.rm-bp-card.lock{border-color:rgba(255,255,255,.14);background:linear-gradient(118deg,#17161c,#1e1c24)}
/* 底圖:預設 opacity:0,JS 綁的 load 成功才加 .ok 淡入;error 直接把 <img> 移掉(不留破圖 icon) */
.rm-bp-card-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s}
.rm-bp-card-bg.ok{opacity:1}
/* 遮罩:左深右透(文字全在左側,主視覺在右側)+ 一層底部壓黑給最下面那行 sub。
   濃度是拿「整張純白的圖」壓測出來的(比任何真圖都難讀):左端 .94 疊在純白上等效底色 #171717,
   白字對比約 18:1、粉灰副標約 10:1,都遠高於 4.5:1 門檻;到 62% 才降到 .5、右端留 .18 讓主視覺看得見。
   沒圖時整層 opacity:0,不影響原本的漸層底。 */
.rm-bp-card-ov{position:absolute;inset:0;opacity:0;transition:opacity .3s;pointer-events:none;
  background:linear-gradient(90deg,rgba(10,5,7,.94) 0%,rgba(10,5,7,.88) 34%,rgba(10,5,7,.5) 62%,rgba(10,5,7,.18) 100%),
             linear-gradient(0deg,rgba(10,5,7,.55) 0%,rgba(10,5,7,0) 46%)}
.rm-bp-card.hasimg .rm-bp-card-ov{opacity:1}
/* 未解鎖的卡:沒圖時是靠灰底表示鎖住,有圖時底色被圖蓋掉就沒了這個提示 → 圖本身去彩度壓暗補回來 */
.rm-bp-card.lock.hasimg .rm-bp-card-bg{filter:grayscale(.72) brightness(.62)}
.rm-bp-card-in{position:relative;z-index:1}
.rm-bp-card.hasimg .rm-bp-card-t,.rm-bp-card.hasimg .rm-bp-card-d,
.rm-bp-card.hasimg .rm-bp-card-sub{text-shadow:0 1px 6px rgba(0,0,0,.85)}
.rm-bp-card.hasimg .rm-bp-go{box-shadow:0 2px 12px rgba(0,0,0,.6)}
.rm-bp-card.hasimg .rm-bp-dot{box-shadow:0 1px 4px rgba(0,0,0,.7)}
.rm-bp-card.hasimg .rm-bp-dot.now{box-shadow:0 0 8px rgba(251,213,196,.55)}
.rm-bp-card-t{font-size:16px;font-weight:900;color:#fff}
.rm-bp-card-d{font-size:10.5px;color:#d9a6c1;margin-top:3px}
.rm-bp-card.lock .rm-bp-card-d{color:var(--muted)}
.rm-bp-card-foot{display:flex;align-items:center;gap:8px;margin-top:11px}
/* 關卡進度:一段=一關(取代原本看不懂的圓點,董事長 2026-09-17)。done=綠已通關 / now=主色進行中 / 其餘=未達 */
.rm-bp-dots{display:flex;gap:4px;flex:0 0 auto;flex-wrap:wrap;align-items:center}
.rm-bp-dot{width:22px;height:5px;border-radius:3px;background:rgba(255,255,255,.20);border:0}
.rm-bp-dot.done{background:var(--bp-ok)}
.rm-bp-dot.now{background:var(--bp)}
.rm-bp-go{height:32px;padding:0 13px;border-radius:9px;display:flex;align-items:center;font-size:12px;font-weight:900;
  color:var(--bp-fg);background:linear-gradient(180deg,var(--bp),var(--bp-d))}
/* UNLOCK is an ACTION (it routes to the deposit page), so it must not wear the
   disabled look. disabled-states(S8): reduced emphasis is reserved for controls that
   do nothing. primary-action(S4): this is the one thing the player can do on a locked
   card, so it gets the primary treatment the open cards' CTA already uses. */
.rm-bp-card.lock .rm-bp-go{background:linear-gradient(180deg,var(--bp),var(--bp-d));color:var(--bp-fg)}
/* LOCKED is genuinely not actionable yet: it keeps the muted treatment that UNLOCK
   used to borrow, so the two states stop looking identical. state-clarity(S4). */
.rm-bp-card.shut .rm-bp-go{background:rgba(255,255,255,.1);color:#9aa0ad}
.rm-bp-card.shut .rm-bp-card-sub{color:#9aa0ad}
.rm-bp-card.shut .rm-bp-card-d{color:var(--muted)}
/* The pump. transform only, never width/height or box-shadow: transform-performance(S7)
   and layout-shift-avoid(S7) keep it off the layout path so nothing around it moves.
   Amplitude 1.05 is the top of the scale-feedback(S7) range; duration 1.8s is a breath,
   not a micro-interaction, so the 150-300ms rule does not apply to it. */
@keyframes rm-bp-pump{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.rm-bp-card.lock.pump .rm-bp-go{animation:rm-bp-pump 1.8s ease-in-out infinite;will-change:transform}
/* reduced-motion(S1, Severity High) is not optional. The CTA keeps its primary
   colours; only the movement stops, so nothing is lost for a player who opts out. */
@media (prefers-reduced-motion:reduce){.rm-bp-card.lock.pump .rm-bp-go{animation:none}}
.rm-bp-card-sub{margin-top:9px;font-size:10.5px;color:#d9a6c1}
.rm-bp-card.lock .rm-bp-card-sub{color:#9aa0ad}
.rm-bp-red{position:absolute;z-index:2;top:10px;right:10px;min-width:20px;height:20px;border-radius:10px;padding:0 6px;
  background:var(--bp-warn);color:#fff;font-size:11px;font-weight:900;display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 3px rgba(224,96,60,.22)}

/* 內頁 banner */
/* 董事長 2026-10-15:banner 改按圖的自然比例完整顯示(原 object-fit:cover + 固定高把 BO 橫圖裁成中間一條 → 展示不完)。
   圖=block 自己定高度(width:100%/height:auto,不裁);文字絕對定位疊到底部(配 .rm-bp-banner-ov 漸層壓暗保可讀);
   min-height 只當載入時的占位地板(避免 CLS);無圖時還是這層漸層底 + 文字。 */
.rm-bp-banner{position:relative;border-radius:16px;overflow:hidden;min-height:150px;
  border:1px solid rgba(231,164,140,.4);background:linear-gradient(118deg,#2a0a18,#5a1236 42%,#1a0810)}
/* 同一套 fallback:圖先隱形,load 才淡入;壞圖被 JS 移掉 → 只剩下面這層漸層底(= bannerUrl 為 null 的樣子) */
.rm-bp-banner-img{display:block;width:100%;height:auto;max-height:200px;object-fit:cover;opacity:0;transition:opacity .3s}   /* 董事長 2026-10-15:自然比例優先;超過上限(手機200/桌機340)才 cover 收住,防異常高圖撐爆 */
.rm-bp-banner-img.ok{opacity:1}
.rm-bp-banner-ov{position:absolute;inset:0;opacity:0;transition:opacity .3s;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,5,7,.92) 0%,rgba(10,5,7,.60) 15%,rgba(10,5,7,0) 40%,rgba(10,5,7,.12) 58%,rgba(10,5,7,.9) 100%)}   /* 董事長 2026-10-15:上下雙 scrim — 頂部加暗給標題、底給三盒,中間露圖 */
.rm-bp-banner.hasimg .rm-bp-banner-ov{opacity:1}
.rm-bp-banner-in{position:absolute;left:0;right:0;top:0;padding:14px 16px;z-index:2;text-shadow:0 2px 10px rgba(0,0,0,.85)}   /* 董事長 2026-10-15:標題移到 banner 頂部 */
.rm-bp-banner-t{font-size:21px;font-weight:900;line-height:1.15;letter-spacing:-.3px;
  background:linear-gradient(180deg,#ffffff 8%,var(--bp-l) 48%,var(--bp) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 9px rgba(231,164,140,.5)) drop-shadow(0 1px 2px rgba(0,0,0,.85))}
.rm-bp-banner-d{font-size:11px;color:#e6b9cf;margin-top:5px}
/* 董事長 2026-10-15:Time Left/Cycle/Progress 三盒移進 banner 底部(絕對定位疊在圖上);玻璃卡保可讀 */
.rm-bp-topmeta{position:relative;z-index:2;padding:10px 13px 13px;display:flex;flex-direction:column;gap:9px}   /* 手機:圖下方(banner 內)堆疊 — Time/Cycle 一排 + Progress 一排,不擠;relative+z 蓋過 scrim */
.rm-bp-topmeta>.rm-bp-meta{margin:0}
.rm-bp-topmeta>.rm-bp-season{margin:0;display:flex;flex-direction:column;justify-content:center}

.rm-bp-meta{display:flex;gap:8px}
.rm-bp-meta-i{flex:1;background:rgba(14,8,10,.55);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.15);border-radius:11px;
  padding:9px 10px;text-align:center}   /* 董事長 2026-10-15:叠在圖上 → 深色玻璃保可讀 */
.rm-bp-meta-k{font-size:8.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.rm-bp-meta-v{font-size:13px;font-weight:900;color:var(--bp-l);margin-top:3px}

/* 未解鎖 gate */
.rm-bp-gate{margin-top:12px;border-radius:15px;padding:16px 14px;text-align:center;
  border:1px solid rgba(231,164,140,.5);background:linear-gradient(160deg,rgba(231,164,140,.12),rgba(231,164,140,.02))}
.rm-bp-gate-t{font-size:15px;font-weight:900;color:var(--bp)}
.rm-bp-gate-p{font-size:11.5px;color:#e6b9cf;line-height:1.5;margin-top:5px}
.rm-bp-gate .rm-bp-cta{margin-top:12px}
.rm-bp-sect{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:900;margin:16px 0 2px}

/* 總進度 */
.rm-bp-season{background:rgba(14,8,10,.55);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);border:1px solid rgba(255,255,255,.15);
  border-radius:14px;padding:10px 12px}   /* 董事長 2026-10-15:叠在圖上 → 深色玻璃保可讀 */
.rm-bp-season-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.rm-bp-season-l{font-size:9.5px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.rm-bp-season-r{font-size:13px;font-weight:900;color:var(--bp)}
.rm-bp-season-r span{color:var(--muted);font-size:11px}
.rm-bp-track{height:9px;border-radius:6px;background:#1d1a24;overflow:hidden}
.rm-bp-track i{display:block;height:100%;border-radius:6px;position:relative;overflow:hidden;
  transition:width .55s cubic-bezier(.4,1.4,.5,1);box-shadow:0 0 14px rgba(231,164,140,.55);
  background:linear-gradient(90deg,var(--bp-d),var(--bp) 60%,#ffe2ef)}
.rm-bp-track i:after{content:"";position:absolute;inset:0;border-radius:6px;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.30) 0 8px,transparent 8px 17px);
  animation:rmBpFlow 1.1s linear infinite}
@keyframes rmBpFlow{to{background-position:34px 0}}

/* 「下一關從按下領取才開始算」提醒 */
.rm-bp-warn{margin-top:12px;display:flex;gap:9px;padding:11px 12px;border-radius:12px;
  background:linear-gradient(135deg,rgba(224,96,60,.16),rgba(224,96,60,.05));border:1px solid rgba(224,96,60,.42)}
.rm-bp-warn svg{color:#ff9b7a;flex:0 0 auto;margin-top:1px}
.rm-bp-warn p{margin:0;font-size:11px;line-height:1.55;color:#f3c6b5}
.rm-bp-warn b{color:#ff9b7a}

/* 全部領完 */
.rm-bp-finale{margin-top:14px;border-radius:18px;padding:24px 16px;text-align:center;position:relative;overflow:hidden;
  border:1px solid rgba(231,164,140,.45);
  background:radial-gradient(120% 90% at 50% 0%,rgba(231,164,140,.24),transparent 66%),linear-gradient(180deg,#221a09,#0d0a06)}
.rm-bp-trophy{color:var(--bp);margin:0 auto;filter:drop-shadow(0 4px 14px rgba(231,164,140,.5))}
.rm-bp-finale-t{margin-top:10px;font-size:19px;font-weight:900;color:var(--bp-l)}
.rm-bp-finale-p{font-size:11.5px;color:#e6b9cf;line-height:1.6;margin-top:5px}
.rm-bp-sum{display:flex;gap:8px;margin-top:14px}
.rm-bp-sum>div{flex:1;background:rgba(0,0,0,.4);border:1px solid rgba(231,164,140,.28);border-radius:11px;padding:9px}
.rm-bp-sum-k{font-size:8.5px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.rm-bp-sum-v{font-size:15px;font-weight:900;color:var(--bp-l);margin-top:3px}

/* 垂直路徑 + 寶箱節點 */
.rm-bp-path{position:relative;margin-top:18px;padding-top:6px}
.rm-bp-spine{position:absolute;left:50%;top:0;bottom:22px;width:4px;transform:translateX(-50%);border-radius:3px;
  background:linear-gradient(180deg,rgba(231,164,140,.26),rgba(231,164,140,.10));overflow:hidden;
  box-shadow:0 0 10px rgba(231,164,140,.16),inset 0 0 0 1px rgba(255,255,255,.05)}
.rm-bp-spine i{display:block;width:100%;background:linear-gradient(180deg,var(--bp-ok),var(--bp));
  box-shadow:0 0 14px rgba(231,164,140,.55);transition:height .55s cubic-bezier(.4,1.4,.5,1)}
.rm-bp-node{position:relative;display:flex;align-items:center;min-height:100px}
.rm-bp-node.right{flex-direction:row-reverse}
.rm-bp-half{width:calc(50% - 33px);flex:0 0 auto}
.rm-bp-mid{width:66px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;position:relative;z-index:2}
.rm-bp-chest{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;position:relative;
  background:linear-gradient(160deg,#2a2434,#1e1216);border:2px solid #38313f;color:#6b6478;transition:.35s}
.rm-bp-chest.done{border-color:var(--bp-ok);background:linear-gradient(160deg,#1b3012,#0e1a0a);color:var(--bp-ok)}
.rm-bp-chest.now{border-color:var(--bp);background:linear-gradient(160deg,#3a0c22,#1c0812);color:var(--bp);
  box-shadow:0 0 0 5px rgba(231,164,140,.12),0 0 24px rgba(231,164,140,.4);animation:rmBpGlow 2.6s ease-in-out infinite}
@keyframes rmBpGlow{0%,100%{box-shadow:0 0 0 5px rgba(231,164,140,.10),0 0 18px rgba(231,164,140,.34)}50%{box-shadow:0 0 0 9px rgba(231,164,140,.16),0 0 34px rgba(231,164,140,.62)}}
.rm-bp-chest.can{border-color:var(--bp-ok);background:linear-gradient(160deg,#254512,#111f09);color:var(--bp-ok2);
  box-shadow:0 0 0 5px rgba(196,104,95,.16),0 0 30px rgba(196,104,95,.5);animation:rmBpBounce 1.5s ease-in-out infinite}
.rm-bp-chest.exp{border-color:rgba(224,96,60,.5);background:linear-gradient(160deg,#2b1710,#170c08);color:var(--bp-warn)}
@keyframes rmBpBounce{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-6px) scale(1.05)}}
.rm-bp-shine{position:absolute;inset:-15px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(196,104,95,.4),transparent 65%);animation:rmBpPulse 1.9s ease-in-out infinite}
@keyframes rmBpPulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.13);opacity:.5}}
.rm-bp-lvno{position:absolute;bottom:-9px;left:50%;transform:translateX(-50%);font-size:10px;font-weight:900;
  background:#120b0d;border:1px solid #3a3444;border-radius:9px;padding:1.5px 8px;color:var(--muted);white-space:nowrap}
.rm-bp-chest.now .rm-bp-lvno{border-color:var(--bp);color:var(--bp)}
.rm-bp-chest.can .rm-bp-lvno{border-color:var(--bp-ok);color:var(--bp-ok2)}
.rm-bp-chest.done .rm-bp-lvno{border-color:rgba(196,104,95,.5);color:var(--bp-ok)}
.rm-bp-chest.exp .rm-bp-lvno{border-color:rgba(224,96,60,.5);color:var(--bp-warn)}

/* 關卡卡片 */
.rm-bp-lc{position:relative;border-radius:13px;padding:10px 11px;transition:.3s;
  border:1px solid rgba(255,255,255,.1);background:linear-gradient(150deg,rgba(255,255,255,.075),rgba(255,255,255,.025))}
.rm-bp-node.right .rm-bp-lc{text-align:right}
.rm-bp-lc.now{border-color:rgba(231,164,140,.55);background:linear-gradient(150deg,rgba(231,164,140,.13),rgba(231,164,140,.03))}
.rm-bp-lc.can{border-color:rgba(196,104,95,.6);background:linear-gradient(150deg,rgba(196,104,95,.16),rgba(196,104,95,.03))}
.rm-bp-lc.locked{opacity:.44}
.rm-bp-lc.done{opacity:.66}
.rm-bp-lc.exp{border-color:rgba(224,96,60,.4);opacity:.62}
.rm-bp-lc-t{font-size:13.5px;font-weight:900;line-height:1.2;color:#fff}
.rm-bp-lc-task{font-size:10.5px;color:var(--muted);line-height:1.42;margin-top:3px}
.rm-bp-mini{height:5px;border-radius:4px;background:rgba(0,0,0,.42);overflow:hidden;margin:8px 0 4px}
.rm-bp-mini i{display:block;height:100%;border-radius:4px;transition:width .5s cubic-bezier(.4,1.4,.5,1);
  background:linear-gradient(90deg,var(--bp-d),var(--bp))}
.rm-bp-lc.can .rm-bp-mini i{background:linear-gradient(90deg,var(--green2),var(--bp-ok))}
.rm-bp-lc.exp .rm-bp-mini i{background:#5a4a3a}
.rm-bp-mini-t{font-size:9.5px;font-weight:800;color:var(--muted)}
.rm-bp-mini-t b{color:#fff}
.rm-bp-mini-r{font-size:9px;color:var(--bp-d);font-weight:800;margin-top:2px}
.rm-bp-mini-r.exp{color:var(--bp-warn)}
.rm-bp-minbet{font-size:9px;color:#7a8296;line-height:1.3;margin-top:5px}
/* 任務指定遊戲(missionGames):縮圖 + 名稱,整條可點 = 開那款遊戲。卡片只有半個螢幕寬,
   兩款以上改直排(並排會把遊戲名擠爛)。圖預設透明,bpWireImg 載成功才 .ok;載失敗 <img> 被移除,
   只剩名稱,chip 照樣是完整一條。 */
.rm-bp-gs{margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.09)}
.rm-bp-gs-k{font-size:8.5px;font-weight:900;letter-spacing:.06em;color:#7a8296}
.rm-bp-gs-l{display:flex;flex-direction:column;align-items:stretch;gap:5px;margin-top:5px}
.rm-bp-g{display:flex;align-items:center;gap:6px;width:100%;padding:3px;cursor:pointer;font-family:inherit;
  text-align:left;border:1px solid rgba(255,255,255,.1);border-radius:9px;background:rgba(255,255,255,.045)}
.rm-bp-node.right .rm-bp-g{flex-direction:row-reverse;text-align:right}
.rm-bp-g:not(.static):active{transform:scale(.97)}
/* 不可點(關卡鎖著 / Pass 未解鎖):拿掉「這是顆鈕」的三個訊號 —— 外框、底色、指針手勢。
   刻意不再額外調暗:圖要看得清是哪款遊戲(鎖著的卡片本身已有 .rm-bp-lc.locked 的整體降透明度)。 */
.rm-bp-g.static{cursor:default;border-color:transparent;background:none;padding:3px 0}
.rm-bp-gimg{width:26px;height:26px;flex:0 0 auto;border-radius:7px;object-fit:cover;opacity:0;transition:opacity .3s;
  border:1px solid rgba(231,164,140,.4)}
.rm-bp-gimg.ok{opacity:1}
.rm-bp-gn{flex:1;min-width:0;font-size:10px;font-weight:800;color:#dfe3ee;line-height:1.25;word-break:break-word}
.rm-bp-gmore{font-size:9px;font-weight:800;color:var(--muted)}
.rm-bp-prize{display:flex;align-items:center;gap:7px;margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.09)}
.rm-bp-node.right .rm-bp-prize{flex-direction:row-reverse}
.rm-bp-prize-ico{width:26px;height:26px;flex:0 0 auto;border-radius:7px;display:flex;align-items:center;justify-content:center;
  color:var(--bp-l);background:rgba(231,164,140,.14);border:1px solid rgba(231,164,140,.32)}
.rm-bp-prize-img{width:26px;height:26px;flex:0 0 auto;border-radius:7px;object-fit:cover;border:1px solid rgba(231,164,140,.4)}
.rm-bp-prize-tx{flex:1;min-width:0}
.rm-bp-prize-a{font-size:13px;font-weight:900;color:var(--bp-l);line-height:1.1}
.rm-bp-prize-a.dim{color:var(--muted)}
.rm-bp-prize-b{font-size:9.5px;color:var(--muted);margin-top:1px;line-height:1.3;word-break:break-word}
.rm-bp-claim{width:100%;height:34px;margin-top:8px;border:0;border-radius:9px;cursor:pointer;font-family:inherit;
  font-size:12.5px;font-weight:900;display:flex;align-items:center;justify-content:center;gap:5px;color:#0d2003;
  background:linear-gradient(180deg,var(--bp-ok2),var(--green2));box-shadow:0 5px 18px rgba(196,104,95,.35)}
.rm-bp-claim:active{transform:scale(.97)}
.rm-bp-claim:disabled{opacity:.6}
/* 進行中關卡的「去完成」行動鈕:次級樣式(邊框 + 淡底 + --bp 粉字),刻意不跟綠色領獎鈕搶視覺;
   高度比領獎鈕再矮一點(30 vs 34),卡片本來就長。 */
.rm-bp-act{width:100%;height:30px;margin-top:8px;border:1px solid rgba(231,164,140,.42);border-radius:9px;cursor:pointer;
  font-family:inherit;font-size:11.5px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:5px;
  color:var(--bp-l);background:rgba(231,164,140,.08)}
.rm-bp-act:active{transform:scale(.97)}
.rm-bp-spin{width:14px;height:14px;border:2.4px solid rgba(13,32,3,.3);border-top-color:#0d2003;border-radius:50%;
  animation:rmBpRot .7s linear infinite}
@keyframes rmBpRot{to{transform:rotate(360deg)}}

/* T&C(tncContent 已在 app.js bpSanitize 消毒過才進 DOM) */
.rm-bp-tnc{margin-top:16px;border-top:1px solid rgba(255,255,255,.1);padding-top:12px}
.rm-bp-tnc summary{font-size:12.5px;font-weight:800;color:var(--muted);cursor:pointer;list-style:none;
  display:flex;gap:7px;align-items:center}
.rm-bp-tnc summary::-webkit-details-marker{display:none}
.rm-bp-tnc summary:after{content:"";width:7px;height:7px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg);margin-left:auto;transition:.2s}
.rm-bp-tnc[open] summary:after{transform:rotate(-135deg)}
.rm-bp-tnc-body{margin-top:10px;font-size:11px;color:var(--muted);line-height:1.75}
.rm-bp-tnc-body ul,.rm-bp-tnc-body ol{margin:0;padding-left:17px}

/* 領獎成功彈窗(⛔ 不用 toast:重要資訊一律居中 modal) */
.rm-bp-mov{position:fixed;inset:0;z-index:1200;background:rgba(0,0,0,.72);display:flex;align-items:center;justify-content:center;
  padding:22px;animation:rmBpFade .22s ease}
@keyframes rmBpFade{from{opacity:0}}
.rm-bp-md{width:100%;max-width:340px;border-radius:18px;padding:22px 16px;text-align:center;position:relative;overflow:hidden;
  border:1px solid rgba(196,104,95,.45);
  background:radial-gradient(120% 90% at 50% 0%,rgba(196,104,95,.24),transparent 65%),linear-gradient(180deg,#14211b,#0b0f0d);
  animation:rmBpPop .34s cubic-bezier(.3,1.5,.5,1)}
@keyframes rmBpPop{from{transform:scale(.86);opacity:0}}
.rm-bp-md-ico{color:var(--bp-ok2);margin:0 auto;filter:drop-shadow(0 4px 14px rgba(196,104,95,.55))}
.rm-bp-md-t{margin:9px 0 4px;font-size:18px;font-weight:900;color:var(--bp-ok2)}
.rm-bp-md-amt{font-size:31px;font-weight:900;line-height:1.1;color:var(--bp-l)}
.rm-bp-md-lk{margin-top:10px;font-size:10.5px;color:var(--bp-d);font-weight:800;line-height:1.4}
.rm-bp-md-nx{margin-top:13px;padding:10px 11px;border-radius:11px;background:rgba(0,0,0,.42);
  border:1px solid rgba(255,255,255,.12);font-size:11px;color:#d8dde8;line-height:1.55;text-align:left}
.rm-bp-md-nx.warn{border-color:rgba(231,164,140,.4)}
.rm-bp-md-nx b{color:var(--bp)}
.rm-bp-md-ok{width:100%;height:44px;margin-top:14px;border:0;border-radius:12px;cursor:pointer;font-family:inherit;
  font-size:15px;font-weight:900;color:var(--bp-fg);background:linear-gradient(180deg,var(--bp),var(--bp-d))}
.rm-bp-md-ok:active{transform:scale(.98)}
.rm-bp-md-ghost{width:100%;height:40px;margin-top:8px;border:1px solid rgba(255,255,255,.16);border-radius:11px;
  background:transparent;color:var(--muted);font-family:inherit;font-size:13.5px;font-weight:800;cursor:pointer}

@media(prefers-reduced-motion:reduce){
  .rm-bp-chest.can,.rm-bp-chest.now,.rm-bp-shine,.rm-bp-md,.rm-bp-mov,.rm-bp-spin,.rm-bp-track i:after{animation:none!important}
  .rm-bp-track i,.rm-bp-spine i,.rm-bp-mini i{transition:none!important}
}

/* ========= ported lapdee88 · bonus/status withdraw lockcard(wallet mini locktile 不移植,董事長:wallet 別碰) ========= */
.rm-wd-lockcard .ico,.rm-wallet-locktile .ico,.rm-wd-balrow .ico,.rm-wallet-wd .ico{width:14px;height:14px;flex:0 0 14px}
.rm-wd-eta.ok{color:#35d05f}
.rm-wd-eta.ok .ico{width:16px;height:16px;flex:0 0 16px}
.rm-wd-locked{color:var(--pa-bronze-fg,#C9A24B);display:inline-flex;align-items:center;gap:6px;font-weight:700}
.rm-wd-lockcard{position:relative;background:linear-gradient(160deg,#1c1608 0%,#0e0b06 100%);border:1px solid var(--pa-bronze-bd,#8a6a2e);border-radius:12px;padding:16px 16px 14px;margin-bottom:14px;box-shadow:6px 6px 12px rgba(0,0,0,.25),inset 0 1px 0 rgba(244,208,112,.08)}
.rm-wd-lockcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,#F4D070,#AB7D2B);border-radius:3px 0 0 3px}
.rm-wd-lockhead{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.rm-wd-lockico{width:26px;height:26px;flex:0 0 26px;border-radius:8px;background:linear-gradient(135deg,#3b2c0c,#1c1408);border:1px solid var(--pa-bronze-bd,#8a6a2e);display:flex;align-items:center;justify-content:center;color:var(--pa-bronze-fg,#C9A24B)}
.rm-wd-locktitle{flex:1;font-weight:700;font-size:15px;color:#fff;line-height:1.35}
.rm-wd-locktitle b{color:#F4D070;font-size:17px;font-weight:800}
.rm-wd-lockpct{color:var(--pa-bronze-fg,#C9A24B);font-weight:800;font-size:14px;letter-spacing:.4px;white-space:nowrap}
.rm-wd-bar{position:relative;height:10px;background:#0a0806;border:1px solid rgba(244,208,112,.14);border-radius:6px;overflow:hidden;margin:2px 0 6px}
.rm-wd-bar.small{height:6px}
.rm-wd-barfill{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#AB7D2B 0%,#F4D070 50%,#EFA82E 100%);box-shadow:0 0 8px rgba(244,208,112,.35)}
.rm-wd-barnums{display:flex;justify-content:space-between;color:#b39aa2;font-size:12px;margin-bottom:6px}
.rm-wd-barnums b{color:#e6e9f2}
.rm-wd-lockmeta{font-size:11px;color:#b39aa2;letter-spacing:.2px}
.rm-wd-lockmeta code{background:#0a0806;color:var(--pa-bronze-fg,#C9A24B);padding:1px 5px;border-radius:3px;font-size:10px}
.rm-wd-lockreason{display:flex;gap:8px;align-items:flex-start;color:#cfd3dc;font-size:13px;line-height:1.5;padding:8px 10px;background:rgba(244,208,112,.05);border:1px dashed rgba(244,208,112,.18);border-radius:8px;margin-top:8px}
.rm-wd-lockreason .dot{width:6px;height:6px;background:var(--pa-bronze-fg,#C9A24B);border-radius:50%;flex:0 0 6px;margin-top:6px}
.rm-wd-lockrow{padding:10px 0;border-top:1px dashed rgba(244,208,112,.15)}
.rm-wd-lockrow:first-of-type{border-top:0;padding-top:0}
.rm-wd-lockrowhead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;font-size:13px}
.rm-wd-lockrowhead .src{color:#e6e9f2;font-weight:700}
.rm-wd-lockrowhead .num{color:#b39aa2}
.rm-wd-lockrowhead .num b{color:#e6e9f2}
.rm-wd-expandbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;padding-top:10px;border-top:1px dashed rgba(244,208,112,.2);cursor:pointer;user-select:none}
.rm-wd-expandtxt{color:#b39aa2;font-size:12px;font-weight:600;letter-spacing:.2px}
.rm-wd-expandcta{display:inline-flex;align-items:center;gap:6px;color:var(--pa-bronze-fg,#C9A24B);font-size:12px;font-weight:800;letter-spacing:.3px;text-transform:uppercase}
.rm-wd-breakdown{margin-top:10px;padding-top:2px}
.rm-wd-fscta{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;background:linear-gradient(90deg,rgba(224,144,122,.10),rgba(224,144,122,0));border:1px solid rgba(224,144,122,.35);border-radius:9px;margin-top:8px}
.rm-wd-fsleft{display:flex;align-items:center;gap:10px;min-width:0}
.rm-wd-fsimg{width:36px;height:36px;flex:0 0 36px;border-radius:8px;background:#1a2436 center/cover no-repeat;border:1px solid rgba(224,144,122,.35)}
.rm-wd-fstxt{color:#dbe8f6;font-size:13px;font-weight:700;line-height:1.35;min-width:0}
.rm-wd-fstxt small{display:block;color:#d4b0a8;font-weight:500;font-size:11px;margin-top:2px}
.rm-wd-fsplay{flex:0 0 auto;background:linear-gradient(135deg,#d98a76,#8a2f45);color:#fff;border:0;border-radius:8px;padding:8px 14px;font-weight:800;font-size:13px;cursor:pointer;white-space:nowrap;font-family:inherit;box-shadow:0 2px 6px rgba(0,0,0,.3)}

/* ===== Activity 跑馬燈(port 自 lapdee88 · 單行橫向) =====
   配色改用站內 token(--card / --panel / --gold),不硬編 lapdee88 的深棕金 */
/* 2026-09-09 董事長:交易播報整條縮小(~70%)—— padding/margin/字級全降,手機省下大量高度給下方內容 */
.rm-actv-mq{position:relative;overflow:hidden;margin:6px 0;padding:2px 0;border-radius:9px;
  background:linear-gradient(180deg,var(--card),var(--panel));border:1px solid rgba(255,213,79,.22)}
.rm-actv-mq::before,.rm-actv-mq::after{content:"";position:absolute;top:0;bottom:0;width:24px;z-index:2;pointer-events:none}
.rm-actv-mq::before{left:0;background:linear-gradient(90deg,rgba(35,19,26,.95),transparent)}
.rm-actv-mq::after{right:0;background:linear-gradient(270deg,rgba(35,19,26,.95),transparent)}
.rm-actv-mq-track{display:flex;width:max-content;animation:rm-actv-mq-scroll 40s linear infinite}
.rm-actv-mq:hover .rm-actv-mq-track{animation-play-state:paused}
@keyframes rm-actv-mq-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.rm-actv-mq-item{display:inline-flex;align-items:center;gap:5px;padding:0 11px;white-space:nowrap;font-size:10px}
.rm-actv-mq-item .id{color:var(--pink2);font-weight:800;letter-spacing:.3px}
.rm-actv-mq-item .u{color:#cfd3dc;font-weight:600;letter-spacing:.2px}
.rm-actv-mq-item .tag{font-size:8.5px;font-weight:800;padding:1px 5px;border-radius:5px;letter-spacing:.3px}
.rm-actv-mq-item .tag.dep{color:#26c281;background:rgba(38,194,129,.14);border:1px solid rgba(38,194,129,.4)}
.rm-actv-mq-item .tag.wd{color:#e0524d;background:rgba(224,82,77,.12);border:1px solid rgba(224,82,77,.4)}
.rm-actv-mq-item .amt{color:var(--gold);font-weight:800}
.rm-actv-mq-item .dot{color:rgba(255,213,79,.35)}
@media(prefers-reduced-motion:reduce){.rm-actv-mq-track{animation:none}}
/* rm-browsing(點分類進乾淨遊戲頁)已於 2026-08-25 廢除:banner/freespin/跑馬燈全部改常駐,
   只剩 rm-authopen(內頁)還要藏,對齊 lapdee88 的隱藏清單 */
body.rm-authopen .rm-actv-mq{display:none!important}

/* ===== 2026-09-09 董事長:分類列上方「熱門遊戲」跑馬燈(小正方縮圖自動橫滑,本站風格)===== */
.rm-hotmq{display:flex;align-items:center;gap:10px;margin:14px 0;padding:8px 10px;border-radius:12px;
  background:linear-gradient(180deg,var(--card),var(--sunken));border:1px solid var(--border);overflow:hidden}
.rm-hotmq[hidden]{display:none}
/* 2026-09-09 董事長:手機標題「POPULAR GAMES」佔太寬 → 換兩行(POPULAR/GAMES),把橫向空間讓給縮圖 */
.rm-hotmq-lbl{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:900;
  letter-spacing:.3px;color:var(--pink2);text-transform:uppercase;padding-right:8px;border-right:1px solid var(--border)}
.rm-hotmq-lbl svg{width:14px;height:14px;flex:0 0 auto;color:var(--pink2)}
.rm-hotmq-lbl span{white-space:normal;line-height:1.08;max-width:56px}
.rm-hotmq-vp{position:relative;flex:1 1 auto;overflow:hidden}
.rm-hotmq-vp::before,.rm-hotmq-vp::after{content:"";position:absolute;top:0;bottom:0;width:26px;z-index:2;pointer-events:none}
.rm-hotmq-vp::before{left:0;background:linear-gradient(90deg,var(--card),transparent)}
.rm-hotmq-vp::after{right:0;background:linear-gradient(270deg,var(--card),transparent)}
.rm-hotmq-track{display:flex;width:max-content;gap:12px;animation:rm-hotmq-scroll 34s linear infinite}
.rm-hotmq-vp:hover .rm-hotmq-track{animation-play-state:paused}
@keyframes rm-hotmq-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.rm-hotmq-item{flex:0 0 auto;width:56px;cursor:pointer;text-align:center;-webkit-tap-highlight-color:transparent}
.rm-hotmq-thumb{position:relative;width:56px;height:56px;border-radius:10px;overflow:hidden;
  background:linear-gradient(135deg,var(--card2),var(--card));border:1px solid var(--border);
  box-shadow:0 3px 8px rgba(0,0,0,.35);transition:transform .16s}
.rm-hotmq-item:hover .rm-hotmq-thumb{transform:translateY(-2px)}
.rm-hotmq-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.rm-hotmq-thumb .rm-thumb-phic{width:38%;height:38%;color:rgba(255,255,255,.16)}
.rm-hotmq-badge{position:absolute;top:0;left:0;font-size:8px;font-weight:900;line-height:1;
  padding:2px 4px;border-radius:0 0 6px 0;color:#fff;letter-spacing:.5px;
  background:linear-gradient(135deg,var(--pink),var(--purple))}
.rm-hotmq-nm{margin-top:3px;font-size:9.5px;line-height:1.15;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(prefers-reduced-motion:reduce){.rm-hotmq-track{animation:none}}
body.rm-authopen .rm-hotmq{display:none!important}
body.rm-authopen .rm-mqrow{display:none!important}

/* ===== 2026-09-10 Batch2-2b:Big Wins 自動滑條(合併交易播報+熱門遊戲) ===== */
/* 2026-09-10 對齊 mockup:標題在上 + 一排大遊戲美術卡(132px 圖 + 玩家 + 贏額),不是細條 */
.rm-bw{position:relative;display:block;margin:16px 0;overflow:visible}
.rm-bw[hidden]{display:none}
.rm-bw-lbl{display:inline-flex;align-items:center;gap:6px;margin:0 2px 10px;font-size:16px;font-weight:800;color:#fff;letter-spacing:.2px}
.rm-bw-lbl svg{width:18px;height:18px;flex:0 0 auto;color:var(--gold)}
.rm-bw-vp{position:relative;overflow:hidden}
.rm-bw-vp::before,.rm-bw-vp::after{content:"";position:absolute;top:0;bottom:0;width:28px;z-index:2;pointer-events:none}
.rm-bw-vp::before{left:0;background:linear-gradient(90deg,var(--bg),transparent)}
.rm-bw-vp::after{right:0;background:linear-gradient(270deg,var(--bg),transparent)}
.rm-bw-track{display:flex;gap:8px;width:max-content;animation:rm-bw-scroll 50s linear infinite}
.rm-bw-vp:hover .rm-bw-track{animation-play-state:paused}
@keyframes rm-bw-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.rm-bw-track{animation:none}}
/* 董事長 2026-10-16:Big Wins 跑馬燈卡全平台縮小 50%(桌機 132→66,與手機一致) */
.rm-bw-card{flex:0 0 auto;width:66px;border-radius:9px;overflow:hidden;background:var(--card);border:1px solid var(--border);cursor:pointer;transition:transform .15s,box-shadow .15s}
.rm-bw-card:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,0,0,.5)}
.rm-bw-th{width:100%;height:66px;background:linear-gradient(135deg,var(--card2),var(--card))}
.rm-bw-th img{width:100%;height:100%;object-fit:cover;display:block}
.rm-bw-meta{padding:5px 6px}
.rm-bw-id{display:flex;align-items:center;gap:4px;font-size:9px;color:var(--muted);font-weight:600}
.rm-bw-id::before{content:"";width:9px;height:9px;flex:0 0 auto;border-radius:50%;background:linear-gradient(135deg,var(--pink2),var(--pink))}
.rm-bw-amt{font-size:10px;font-weight:800;color:var(--gold);margin-top:2px}
/* 2026-09-10 原手機縮小塊:現在 base 已是 66(桌機也縮),此塊與 base 同值、留著當手機保險 */
@media(max-width:1279px){
  .rm-bw-card{width:66px;border-radius:9px}
  .rm-bw-th{height:66px}
  .rm-bw-meta{padding:5px 6px}
  .rm-bw-id{font-size:9px;gap:4px}
  .rm-bw-id::before{width:9px;height:9px}
  .rm-bw-amt{font-size:10px;margin-top:2px}
  .rm-bw-track{gap:8px}
  .rm-bw-lbl{font-size:14px;margin-bottom:8px}
}
body.rm-authopen .rm-bw{display:none!important}

/* 交易播報「向上跳」直式跑馬燈(桌機用) */
@keyframes rm-actv-mq-vscroll{from{transform:translateY(0)}to{transform:translateY(-50%)}}
/* ===== 2026-09-09 董事長:桌機把交易播報 + 熱門遊戲排同一列各佔一半 =====
   左=交易播報(改成直式、往上跳);右=熱門遊戲(維持橫滑)。手機不進這條規則 → 仍上下疊。 */
@media(min-width:1280px){
  .rm-mqrow{display:flex;gap:14px;align-items:stretch;margin:14px 0}
  /* 2026-09-09 董事長:交易框縮到剛好放得下一行,其餘全給熱門遊戲 */
  .rm-mqrow>.rm-actv-mq{margin:0;flex:0 0 330px;min-width:0;padding:0}
  .rm-mqrow>.rm-hotmq{margin:0;flex:1 1 auto;min-width:0}
  .rm-mqrow>.rm-bw{margin:0;flex:1 1 auto;min-width:0}   /* Batch2-2b:Big Wins 桌機吃滿整排 */
  /* 直式:track 改直排、往上捲(translateY);兩份複製 → -50% 無縫接回。
     ⚠️ track 必須 absolute 抽離文檔流 —— 否則它 28 列的完整高度(~842px)會把整條撐高;
     抽離後容器自然高=0,靠 align-items:stretch 撐到右邊熱門條的高度,overflow:hidden 裁切成小窗。 */
  .rm-mqrow>.rm-actv-mq .rm-actv-mq-track{position:absolute;top:0;left:0;right:0;flex-direction:column;animation:rm-actv-mq-vscroll 22s linear infinite}
  .rm-mqrow>.rm-actv-mq .rm-actv-mq-item{width:100%;padding:6px 16px;justify-content:center;font-size:12.5px}
  .rm-mqrow>.rm-actv-mq .rm-actv-mq-item .tag{font-size:10.5px;padding:2px 7px}
  .rm-mqrow>.rm-actv-mq .rm-actv-mq-item .dot{display:none}   /* 直式行間不需要 • 分隔 */
  /* 遮罩由左右改上下(配合直式) */
  .rm-mqrow>.rm-actv-mq::before,.rm-mqrow>.rm-actv-mq::after{left:0;right:0;width:auto;height:20px}
  .rm-mqrow>.rm-actv-mq::before{top:0;bottom:auto;background:linear-gradient(180deg,var(--card),transparent)}
  .rm-mqrow>.rm-actv-mq::after{bottom:0;top:auto;background:linear-gradient(0deg,var(--panel),transparent)}
  /* 標題單行即可(右半有空間) */
  .rm-mqrow>.rm-hotmq .rm-hotmq-lbl span{max-width:none;white-space:nowrap}
}
/* 直式跑馬燈也要吃 reduced-motion(桌機覆蓋了基礎的 animation:none,這裡補回) */
@media(min-width:1280px) and (prefers-reduced-motion:reduce){
  .rm-mqrow>.rm-actv-mq .rm-actv-mq-track{animation:none}
}

/* Receipt(存款頁第三個 tab,董事長 2026-08-19)
   ① 三顆 tab:原本 .rm-even 的 min-width:110px 在 375px 會爆框(3×110+gap 已超過內容寬),
      加 .rm-tri 改成三等分可換行,只吃這個 class,不影響其他兩顆 tab 的頁面 */
.rm-chantabs.rm-even.rm-tri{gap:8px}
.rm-chantabs.rm-even.rm-tri .rm-chantab{flex:1 1 0;min-width:0;padding:9px 6px;font-size:13px;white-space:normal;line-height:1.25}
/* ② 上傳區(董事長 2026-08-19「上傳可以大」):整行大面積虛線點擊區,撐起面板下半部原本的空白。
      高度用 min-height 不寫死,泰文字比英文高一行時自己長。配色一律 token,不寫死色。 */
.rm-rc-hint{margin:8px 0 2px;line-height:1.5;font-size:12px}
.rm-rc-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  width:100%;min-height:168px;padding:20px 16px;margin-bottom:14px;
  border:2px dashed rgba(255,213,79,.42);border-radius:var(--radius);
  background:rgba(255,213,79,.06);color:var(--gold);cursor:pointer;font-family:inherit;text-align:center}
.rm-rc-drop:active{background:rgba(255,213,79,.12)}
.rm-rc-drop-i{opacity:.9}
.rm-rc-drop-t{font-size:14px;font-weight:800}
.rm-rc-drop-s{font-size:11px;color:var(--muted);font-weight:600}
/* 選圖後:預覽接手同一塊位置,縮圖跟著放大(不再是 72px 小方塊) */
.rm-rc-prev{margin-bottom:14px}
.rm-rc-prev .rm-slip-thumb{width:100%}
.rm-rc-prev .rm-slip-thumb img{width:100%;height:180px;object-fit:contain;background:#0b0b0e;border-radius:var(--radius)}
.rm-rc-prev .rm-slip-thumb small{font-size:11px;text-align:center;margin-top:6px}
.rm-rc-prev .rm-slip-rm{width:26px;height:26px;top:8px;right:8px}
.rm-rc-prev .rm-slip-rm svg{width:12px;height:12px}
/* ③ 送出鈕未選圖時的 disabled 態(只掛這顆 id,不動站內其他 .rm-modal-submit 的既有 disabled 樣式) */
#rm-dep-rc-do[disabled]{opacity:.45;pointer-events:none}

/* ═══ 註冊兩步改版(董事長 2026-08-20 拍板 mockup-register)═══════════════════
   作用域 .rm-regform 掛在 .rm-authpage 上,第 1 步(renderForm register)和
   第 2 步(renderBankInfo)都掛 —— 兩步視覺必須一致。
   ⚠️ 絕不能用 body.rm-authopen:openCustom→openPage() 對 deposit/withdraw 也加那個 class,
      而它們共用 .rm-field(Codex 2026-08-20 抓到)。 */

/* ① 常駐提示:phoneLen / pwMin / acctMin 以前只有打錯才出現,現在一進頁就講清楚。
      err 一有內容就讓位給它(純 CSS)—— DOM 順序固定是 .rm-field-err + .rm-field-hint */
.rm-regform .rm-field-hint{color:var(--muted);font-size:11.5px;font-weight:500;
  line-height:1.45;margin:-4px 0 12px 4px}
.rm-regform .rm-field-err:not(:empty)+.rm-field-hint{display:none}
/* 董事長 2026-09-24:綁卡戶名框下方的醒目提醒(琥珀金)—— 戶名必須與真實銀行戶口名一字不差,
   否則存款會被 reject。自帶完整樣式,不掛 .rm-field-hint(避免被 .rm-regform .rm-field-hint 的
   高 specificity 灰色蓋掉),故兩個綁卡頁(renderRegisterBank 不在 .rm-regform / renderBankInfo 在)都一致金色。
   err 有內容時讓位給錯誤訊息(DOM 順序 .rm-field-err + .rm-hint-warn),不與 required 疊字。 */
.rm-hint-warn{color:var(--gold);font-size:12px;font-weight:600;line-height:1.45;margin:-2px 0 12px 4px}
.rm-hint-warn b{font-weight:800}
.rm-field-err:not(:empty)+.rm-hint-warn{display:none}

/* ② 必填標記(skill: Required Indicators) */
.rm-regform .rm-req{font-style:normal;color:var(--pink2);font-size:12px;margin-left:4px}

/* ③ 步驟條:沿用站內既有 .rm-steps/.rm-step/.rm-step-line(本來只有 bank 頁在用),
      補上三態區分 + 文字說明。原本 done 和 on 都吃 .rm-step 的綠底,分不出進度到哪。 */
.rm-steps{gap:9px}
.rm-stepwrap{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.rm-steplab{font-size:11.5px;font-weight:700;color:var(--muted);line-height:1.2}
.rm-steplab.on{color:#fff;font-weight:800}
.rm-step-off{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);color:var(--muted)}
.rm-step-on{background:var(--pink)}
.rm-step-done{background:#22c440}
.rm-steps .rm-step-line{flex:1;width:auto;min-width:16px}

/* ④ 推薦碼摺疊:多數玩家沒有碼。帶碼進站(utm/session)時預設展開 */
.rm-regform .rm-reftg{display:flex;align-items:center;gap:9px;height:46px;padding:0 14px;
  margin-bottom:14px;border:1px dashed rgba(255,255,255,.18);border-radius:10px;
  color:var(--muted);font-size:12.5px;font-weight:700;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.rm-regform .rm-reftg:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
.rm-regform .rm-reftg::after{content:"";margin-left:auto;width:8px;height:8px;flex:0 0 auto;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s ease}
.rm-regform .rm-reftg.on::after{transform:rotate(-135deg) translate(-3px,-3px)}
.rm-regform .rm-reftg.on{margin-bottom:8px}
.rm-regform .rm-refwrap{display:none}
.rm-regform .rm-refwrap.on{display:block}

/* ⑤ 輸入框:邊框從 .3 收到 .16(原本比內容還搶眼),focus 改用品牌粉取代 #8a2f45 藍 */
.rm-regform .rm-field{border-color:rgba(255,255,255,.16)}
.rm-regform .rm-field:focus-within{border-color:var(--pink);
  box-shadow:6px 6px 14px rgba(0,0,0,.25),0 0 0 3px rgba(196,104,95,.16)}
.rm-regform .rm-field.rm-err{border-color:#c7240f}

/* ⑥ 次要動作:原本包在 60px 有框卡片裡,視覺重量跟主 CTA 一樣重 → 降成純文字連結 */
.rm-regform .rm-modal-switch{border:0;background:none;height:auto;padding:0;
  justify-content:center;gap:6px;box-shadow:none}
.rm-regform .rm-switch-txt{font-size:13px}
.rm-regform .rm-switch-btn{min-width:0;height:auto;padding:0;border:0;background:none;
  box-shadow:none;font-size:13px;font-weight:800;color:#fff;
  text-decoration:underline;text-decoration-color:var(--pink);text-underline-offset:3px}

/* ⑦ 第 2 步底部動作列 —— back 和主鈕同排,左小右大。
      不放頁頭:第 1 步沒有頁頭,第 2 步多一行會把表單往下推,兩步之間出現位移。
      skill escape-routes(多步流程一定要能退)+ primary-action(次要動作視覺從屬)。
      箭頭用 CSS border 畫,不引入新 icon 資產 —— 第 1 步明訂「拿掉所有 icon」。 */
.rm-regform .rm-regact{display:flex;align-items:stretch;gap:10px;margin-top:8px}
.rm-regform .rm-regact .rm-modal-submit{flex:1;width:auto;margin-top:0}
.rm-regform .rm-regback{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  gap:6px;height:48px;padding:0 15px 0 12px;margin:0;
  background:none;border:1px solid rgba(255,255,255,.16);border-radius:10px;box-shadow:none;
  color:var(--muted);font-size:13px;font-weight:700;font-family:inherit;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:color .15s ease,border-color .15s ease}
.rm-regform .rm-regback::before{content:"";width:7px;height:7px;flex:0 0 auto;
  border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg)}
.rm-regform .rm-regback:active{color:#fff;border-color:rgba(255,255,255,.32)}
.rm-regform .rm-regback:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
/* 載入中/失敗態沒有主鈕,back 自己一個時不要撐滿整行 */
.rm-regform .rm-regact:has(.rm-regback:only-child){justify-content:flex-start}

/* ═══ Deposit tab 換新(董事長 2026-08-21 拍板 A 方案:玻璃 + 圖示直排)═══════════
   📏 間距階梯(skill spacing-scale「4pt/8dp incremental」+ Section spacing hierarchy):
        元件內 8 · 元件之間 12 · 區塊之間 16 · 圓角 8/12/16 · pill 999
      ⚠️ 一律 4 的倍數。CEO 第一版寫了 7/11/3/13/10/14/18 這種隨手值,
         董事長 2026-08-21 一眼看出「有的很密有的又過大」—— 就是沒照階梯的結果。
   ⚠️ 作用域 .rm-deptabs —— .rm-chantabs 是**全站共用**(withdraw / registerBank / 付款頁都在用),
      不加自己的 class 會把那些頁一起改掉。
   ⚠️ 玻璃沿用站內 bottomnav 已在用的 backdrop-filter 語言,**降級寫法照抄同一套**
      (低階 Android / 舊 WebView 不支援 → 換實色,不會變透明糊掉)。 */
.rm-chantabs.rm-deptabs{
  background:rgba(46,52,78,.5);border:1px solid rgba(255,255,255,.09);border-radius:16px;
  padding:8px;gap:8px;box-shadow:none;
  /* ⚠️ 站內 .rm-chantabs 有 margin-top:26px —— 不覆蓋的話「頁頭↔tab」會空 26px,
     而「tab↔資訊列」是 0 貼死(董事長 2026-08-21 一眼看出上鬆下緊)。統一成 16。 */
  margin:16px 0;
  -webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .rm-chantabs.rm-deptabs{background:#2a3050}   /* 不支援時的最接近實色(同 bottomnav 降級策略) */
}
.rm-deptabs .rm-chantab{
  flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;padding:12px 4px;min-height:64px;border-radius:12px;border:0;background:none;
  font-weight:700;color:#c3cad8;white-space:normal;line-height:1.15;
  transition:background .18s ease,color .18s ease,box-shadow .18s ease}
.rm-deptabs .rm-chantab svg{width:21px;height:21px;flex:0 0 auto}
.rm-deptabs .rm-chantab>span{font-size:11.5px;font-weight:700;line-height:1.15;text-align:center}
.rm-deptabs .rm-chantab.on{
  background:linear-gradient(160deg,rgba(196,104,95,.9),rgba(143,58,78,.85));color:#fff;
  border-color:transparent;box-shadow:0 6px 18px rgba(196,104,95,.32)}
/* 綠點拿掉(董事長 2026-08-21:「很像沒有意義」)——
   正常態的綠點不傳達任何資訊;維護態的紅點也多餘,右上角已經有 data-maint 紅 pill 講得更清楚。
   ⚠️ 只在 .rm-deptabs 內隱藏 —— .rm-chandot 是全站共用(registerBank / 付款頁的 chantabs 也在用)。 */
.rm-deptabs .rm-chandot{display:none}

/* 維護:壓暗 + 禁點 + 右上紅 pill(::after 吃 data-maint,i18n 由 JS 塞)。
   ⚠️ 絕對定位 → **不佔版面**;原本內嵌 <span class="rm-chanmaint"> 會在 tab 裡多擠一行。
   ⚠️ 只改長相 —— 「維護中但該通道有活單就放行」那道 JS 攔截(Codex 2026-08-14)完全沒動,
      pointer-events:none 只擋沒活單的情況?不,JS 那道在 onclick 內,這裡若整個禁點會連放行都擋掉,
      所以**不用 pointer-events:none**,維持可點、由既有 JS 決定放不放行。 */
.rm-deptabs .rm-chantab.maint{opacity:.45;color:#ff9b9b;background:none}
.rm-deptabs .rm-chantab.maint::after{
  content:attr(data-maint);position:absolute;top:-8px;right:-4px;
  background:linear-gradient(180deg,#e0524d,#b02a2f);color:#fff;font-size:9px;font-weight:700;
  padding:2px 8px;border-radius:999px;line-height:1.3;white-space:nowrap;letter-spacing:.2px;
  box-shadow:0 2px 6px rgba(0,0,0,.45)}
.rm-deptabs .rm-chantab.maint.on{opacity:.6;
  background:linear-gradient(160deg,rgba(224,82,77,.85),rgba(176,42,47,.8));color:#fff}
/* 舊的內嵌維護標籤在這套 tab 不再使用(HTML 已改 data-maint),保險起見藏掉 */
.rm-deptabs .rm-chanmaint{display:none}

/* ═══ Auto 分頁:提示條 + 玩家綁定的卡 ═══ */
.rm-au-warn{display:flex;gap:12px;align-items:flex-start;border-radius:12px;padding:12px;
  margin:0 0 16px;background:rgba(255,213,79,.09);border:1px solid rgba(255,213,79,.3)}
.rm-au-warn svg{flex:0 0 auto;color:var(--gold);margin-top:1px}
.rm-au-warn p{margin:0;font-size:12px;line-height:1.65;color:#e8dcc0}
.rm-au-warn p b{color:var(--gold)}
.rm-au-mine{display:flex;align-items:center;gap:12px;border-radius:12px;padding:12px;
  margin-bottom:12px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08)}
.rm-au-mine .rm-bank-logo{width:40px;height:40px;border-radius:8px;flex:0 0 auto;object-fit:contain}
.rm-au-mtx{flex:1;min-width:0}
.rm-au-mtx span{display:block;font-size:11.5px;color:var(--muted);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.rm-au-mtx b{font-size:15px;font-weight:800;letter-spacing:.4px;font-variant-numeric:tabular-nums}
.rm-au-ok{width:22px;height:22px;border-radius:50%;flex:0 0 auto;background:var(--green1);
  color:var(--on-green);display:flex;align-items:center;justify-content:center}

/* ═══ Deposit 表單換新(A 方案,承接上面 .rm-deptabs)═══════════════════════
   📏 同一套階梯:元件內 8 · 元件之間 12 · 區塊之間 16 · 圓角 8/12/16
   ⚠️ 選擇器一律寫成 **body.rm-authopen .rm-depv2 …**(0,3,1)——
      站內 426-432 有一整批 body.rm-authopen .rm-sec-label / .rm-amt-box / .rm-modal-submit …(0,2,1),
      只寫 .rm-depv2 …(0,2,0)會被它們壓過。CEO 第一版就是這樣寫的,量出來 CTA 高度沒生效(52→48)。
   ⚠️ 作用域:.rm-dephead2(頁頭)/ .rm-depv2(表單容器)—— 兩個都是這次新加的 class,
      .rm-dephead / .rm-field / .rm-amt-box 等**全站共用**的原樣不動。
   ⚠️ HTML 結構一行沒改,全部靠這裡覆蓋外觀。 */

/* ① 頁頭:箭頭 + 大標題,右側留給 slip 鈕 */
/* ⚠️ 要帶 body.rm-authopen(0,3,1)—— 站內 body.rm-authopen .rm-dephead{margin:0 0 10px}(0,2,1)
   會壓過 .rm-dephead.rm-dephead2(0,2,0),實測 margin-bottom 只有 10px。
   這裡設 0:上下間距交給 tab 容器的 margin:16px 0 統一控,避免兩邊各自加總。 */
body.rm-authopen .rm-dephead.rm-dephead2{align-items:center;gap:12px;margin:0}
.rm-dephead2 .rm-back-pill.rm-back2{background:none;border:0;box-shadow:none;padding:0;
  width:40px;height:40px;min-width:0;border-radius:12px;justify-content:center;color:#cfd5e2;flex:0 0 auto}
.rm-dephead2 .rm-back2::before{width:10px;height:10px;border-left-width:2.5px;border-bottom-width:2.5px;
  border-color:currentColor;margin-left:4px}
.rm-dephead2 .rm-page-chip.rm-depttl2{background:none;border:0;box-shadow:none;padding:0;height:auto;
  font-size:19px;font-weight:800;letter-spacing:-.2px;color:#fff}   /* 存款頁特殊頭(back+標題+slip):grid 三欄自然把標題置中,slip 落右欄 */
/* slip 鈕靠右(既有 .rm-hslip-hd 自帶 margin-left:auto,這裡只收高度/圓角對齊新語言)。
   ⚠️ 頁頭右側是 slip 的位置,餘額在下面資訊列第一格 —— mockup 就是這樣。 */
.rm-dephead2 .rm-hslip-hd{height:40px;border-radius:12px}

/* ⓪ deposit 頁隱藏站內頂部使用者卡(頭像+帳號+餘額+刷新)——
      餘額已經在下面資訊列第一格,兩個一起出現是重複(董事長 2026-08-21:「你覺得現在這個合理嗎」)。
      ⚠️ 只在 deposit 頁隱藏(靠 :has(#rm-dep-formwrap) 判斷),首頁/錢包頁照舊需要那張卡。
      ⚠️ 既有規則帶 !important(body.rm-authed .rm-usercard.rm-auth-only),所以這裡也要 !important。
      ⚠️ 不支援 :has() 的舊 WebView → 維持現狀(兩個餘額),只是沒變好,不會壞。 */
body:has(#rm-dep-formwrap) .rm-usercard{display:none!important}

/* 🔴 2026-09-17 董事長:表單後加深色背板(暗色 70%)。存款表單本來浮在頁面星空背景上,
   斜向光條會搶走金額/銀行資訊的注意力 —— contrast-readability(§1):表單內容改成疊在一塊
   受控的深色面上,對比乾淨;visual-hierarchy(§5):把整張表單收成「一個表面」,層級更清楚;
   elevation-consistent(§4):圓角/邊框沿用站上其他面板的尺度。scope 照既有慣例 body.rm-authopen
   .rm-depv2(0,3,1),只作用在存款表單,提款/登入/註冊共用的 .rm-authpage 不受影響。
   backdrop blur 讓背後星空糊一點;不支援的舊 WebView 仍有 .7 深色底,只是不糊(不會壞)。 */
body.rm-authopen .rm-depv2{background:rgba(16,8,12,.7);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:16px 14px;margin-top:12px;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}

/* 🔴 2026-09-17 董事長:desktop 存款頁「方案 4 巨型單卡」——一張大卡橫貫整個內容區,卡內左右分工:
   左(付款方式 tab 在卡頂 + 資訊列餘額/最低/速度 + 存款步驟)| 右(金額輸入 + 快捷 + 存款鈕)。目的:桌機兩側大空位補滿。
   scope=.rm-authpage.rm-dep-2col(openCustom 只在 renderDeposit 掛,離開自動清)——用**普通 class**不用 :has(),
   @media 不會漏到別頁/別斷點(禁用 :has()+@media 那條鐵律)。
   .rm-dep-steps 預設 display:none、.rm-dep-mega/fl/fr 預設 block → 手機一律原本單欄表單、零變;只有桌機才變兩欄大卡。 */
.rm-dep-steps{display:none}
.rm-dep-steps .rm-dep-steps-h{font-size:13px;font-weight:800;color:#fff;margin:0 0 12px}
.rm-dep-steps ol{margin:0;padding:0;list-style:none;counter-reset:dep;display:flex;flex-direction:column;gap:13px}
.rm-dep-steps li{counter-increment:dep;position:relative;padding-left:34px;font-size:12.5px;line-height:1.4;color:#c3cad8}
.rm-dep-steps li::before{content:counter(dep);position:absolute;left:0;top:-2px;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;color:#fff;background:linear-gradient(135deg,var(--pink2),var(--pinkd))}
@media(min-width:1280px){
  .rm-authpage.rm-dep-2col{max-width:1040px;margin:0 auto}   /* 覆蓋 460 窄版 + line 690 的右靠,大卡橫貫(0,3,0 > 0,1,0) */
  /* 大卡 = .rm-dep-mega(桌機才有底/框);.rm-depv2 內層面板取消,大卡當唯一表面(0,3,0 > body.rm-authopen .rm-depv2 的 0,2,1) */
  .rm-authpage.rm-dep-2col .rm-dep-mega{background:rgba(16,8,12,.7);border:1px solid rgba(255,255,255,.06);border-radius:18px;padding:20px 22px;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
  .rm-authpage.rm-dep-2col .rm-deptabs{margin-top:0}   /* tab 在大卡內頂部,不要外距 */
  .rm-authpage.rm-dep-2col .rm-depv2{background:none;border:0;padding:0;margin-top:16px;display:flex;gap:34px;align-items:stretch}
  .rm-authpage.rm-dep-2col .rm-dep-fl{flex:1 1 0;min-width:0;padding-right:34px;border-right:1px solid rgba(255,255,255,.08)}
  .rm-authpage.rm-dep-2col .rm-dep-fr{flex:1 1 0;min-width:0;display:flex;flex-direction:column}
  .rm-authpage.rm-dep-2col .rm-dep-fr .rm-modal-submit{margin-top:auto}   /* 存款鈕沉到右欄底,兩欄等高更整齊 */
  .rm-authpage.rm-dep-2col .rm-dep-steps{display:block;margin-top:18px}
}

/* 🔴 2026-09-18 董事長:提款頁桌機同款「方案 4 巨型單卡」。ETA 在卡頂橫貫,下面兩欄:
   左(轉入帳戶 + 錢包/可提款餘額)| 右(提款金額 + 25/50/75/100% + 確認提款)。scope=.rm-authpage.rm-wd-2col
   (openCustom 只在 renderWithdraw 掛,離開自動清)——普通 class 不碰 :has()。mega/body/fl/fr 手機是透明 block →
   單欄流程與原本一字不差;桌機才變大卡兩欄。提款頁本來就沒有內層面板,大卡直接當唯一表面(不用像存款那樣取消 .rm-depv2)。 */
@media(min-width:1280px){
  .rm-authpage.rm-wd-2col{max-width:1040px;margin:0 auto}   /* 覆蓋 460 窄版 + line 690 右靠(0,2,0 > 0,1,0);大卡橫貫 */
  .rm-authpage.rm-wd-2col .rm-wd-mega{background:rgba(16,8,12,.7);border:1px solid rgba(255,255,255,.06);border-radius:18px;padding:20px 22px;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
  .rm-authpage.rm-wd-2col .rm-wd-body{display:flex;gap:34px;align-items:stretch;margin-top:14px}
  .rm-authpage.rm-wd-2col .rm-wd-fl{flex:1 1 0;min-width:0;padding-right:34px;border-right:1px solid rgba(255,255,255,.08)}
  .rm-authpage.rm-wd-2col .rm-wd-fr{flex:1 1 0;min-width:0;display:flex;flex-direction:column}
  .rm-authpage.rm-wd-2col .rm-wd-fr .rm-modal-submit{margin-top:auto}   /* 確認提款鈕沉到右欄底,兩欄等高 */

  /* ── VIP 桌機寬版 2 欄(董事長 2026-09-24)── 對齊存款/提款寬版手法:max-width 1040 居中,覆蓋 460 窄版 + line 707 右靠。
     左欄=狀態卡(hero+progcard,身份/進度),右欄=福利+領獎。align-items:start → 兩欄各自從頂對齊,不互相撐高。
     手機端 .rm-vip-grid/.rm-vip-gcol 無規則→block 堆疊,順序不變(見 vipPaintMine 註解)。 */
  .rm-page-chip{font-size:22px}   /* 桌機標題再大一點(手機 18px);董事長 2026-09-24 */
  .rm-authpage.rm-vip-wide{max-width:1280px;margin:0 auto;background:rgba(20,11,15,.82);border:1px solid rgba(255,255,255,.08);border-radius:22px;padding:22px 26px 28px}   /* 董事長 2026-09-24:卡片做大張(1040→1280)+ 內容外套大框(填空位);底色加深至 .82(董事長要更深);窄於此的內容區會自動收滿,不溢出 */
  .rm-vip-wide .rm-vip-grid{display:grid;grid-template-columns:minmax(380px,430px) 1fr;gap:32px;align-items:start}
  .rm-vip-wide .rm-vip-gcol{min-width:0}   /* grid 子項可收縮,長內容不撐破欄寬 */
  .rm-vip-wide .rm-vip-gcol-l .rm-vip-progcard,
  .rm-vip-wide .rm-vip-gcol-r>.rm-vip-selben,
  .rm-vip-wide .rm-vip-gcol-r>.rm-vip-rwwrap{margin-bottom:0}   /* 欄內最後一塊不留底距(gap 已負責欄間距) */
  .rm-vip-wide .rm-vip-gcol-r>.rm-vip-selben+.rm-vip-rwwrap{margin-top:16px}   /* 福利與領獎之間補回間距 */
}
/* ② 資訊列:三格(餘額 / 最低 / 速度),去邊框靠背景階分層 —— mockup 就是三格 */
body.rm-authopen .rm-depv2 .rm-dep-inforow{gap:8px;margin:0 0 16px}   /* 上方間距由 .rm-deptabs 的 margin-bottom:16 提供 */
body.rm-authopen .rm-depv2 .rm-dep-infobox{background:none;gap:8px;border-radius:0;overflow:visible}
body.rm-authopen .rm-depv2 .rm-dep-infocell{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);
  border-radius:12px;padding:12px 8px;align-items:flex-start;gap:4px}
body.rm-authopen .rm-depv2 .rm-dep-infocell+.rm-dep-infocell{border-left:1px solid rgba(255,255,255,.08)}
body.rm-authopen .rm-depv2 .rm-dep-infocell small{font-size:10.5px;font-weight:700;color:var(--muted)}
body.rm-authopen .rm-depv2 .rm-dep-infocell b{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}

/* ③ 區塊標題:降成小字 uppercase,讓下面的內容當主角 */
body.rm-authopen .rm-depv2 .rm-sec-label{font-size:11px;font-weight:800;color:var(--muted);letter-spacing:.6px;
  text-transform:uppercase;margin:0 0 8px}
body.rm-authopen .rm-depv2 .rm-sec-sub{font-size:11px;color:var(--muted);margin:0 0 8px}

/* ④ 選銀行:去白邊、靠背景分層 */
body.rm-authopen .rm-depv2 .rm-field.rm-bankdd{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);
  border-radius:12px;height:56px;box-shadow:none;margin-bottom:16px}
body.rm-authopen .rm-depv2 .rm-field.rm-bankdd:focus-within{border-color:rgba(196,104,95,.5)}
body.rm-authopen .rm-depv2 .rm-bankdd-label{font-size:15px;justify-content:flex-start;gap:12px}
/* 未選銀行時左邊帶一顆銀行圖示(mockup)。選定後站內會塞真的銀行 logo,所以只在 :not(.sel) 顯示,
   不會和 logo 打架。圖示用站內既有 FS_SVG.bank 的 path 做 mask,顏色吃 currentColor —— 不引進新資產、不動 JS。 */
body.rm-authopen .rm-depv2 .rm-bankdd-label:not(.sel)::before{content:"";width:36px;height:36px;flex:0 0 auto;
  border-radius:8px;background:rgba(255,255,255,.07);color:#cfd5e2;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%202%202%207v2h20V7zM4%2011v7H3v2h18v-2h-1v-7h-2v7h-3v-7h-2v7h-2v-7H9v7H6v-7z%22/%3E%3C/svg%3E") no-repeat center/20px 20px;
  mask:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%202%202%207v2h20V7zM4%2011v7H3v2h18v-2h-1v-7h-2v7h-3v-7h-2v7h-2v-7H9v7H6v-7z%22/%3E%3C/svg%3E") no-repeat center/20px 20px;
  background-color:#cfd5e2}
body.rm-authopen .rm-depv2 .rm-bankdd-label:not(.sel){color:rgba(255,255,255,.55)}

/* ⑤ 金額:獨立卡片 + 大數字 —— 這頁最重要的東西就該最大(skill Heading Clarity / visual-hierarchy) */
body.rm-authopen .rm-depv2 .rm-amt-box{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);
  border-radius:16px;height:auto;min-height:72px;padding:12px 16px;margin-bottom:12px;box-shadow:none;
  flex-direction:column;align-items:stretch;gap:8px}
/* 提示移進卡片內上方(mockup);金額自成一列,靠左 */
body.rm-authopen .rm-depv2 .rm-amt-box .rm-sec-sub{margin:0;font-size:10.5px;font-weight:700}
body.rm-authopen .rm-depv2 .rm-amt-main{display:flex;align-items:center;gap:8px;min-width:0}
body.rm-authopen .rm-depv2 .rm-amt-box .rm-amt-cur{font-size:13px;font-weight:800;color:var(--muted)}
/* ⚠️ 必須帶 #rm-dep-amt —— app.css:1082 有 .rm-amt-box input#rm-dep-amt{font-size:19px}(1,1,0),
   只寫 body.rm-authopen .rm-depv2 .rm-amt-box input(0,3,1)會被 id 壓過(實測金額還是 19px)。
   text-align 維持站內既有的 center,不動版面。 */
body.rm-authopen .rm-depv2 .rm-amt-box input#rm-dep-amt{font-size:28px;font-weight:800;letter-spacing:-.5px;
  text-align:left;padding-left:0}   /* mockup 是靠左,站內 :1082 寫死 center,同 id 特異度覆蓋 */
body.rm-authopen .rm-depv2 .rm-amt-box input::placeholder{font-size:20px;font-weight:700}

/* ⑥ 快捷金額:圓角 chips */
body.rm-authopen .rm-depv2 .rm-amt-grid{gap:8px;margin-bottom:16px}
body.rm-authopen .rm-depv2 .rm-amt-grid .rm-amt{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);
  border-radius:12px;padding:12px 0;font-size:13.5px;font-weight:800;font-variant-numeric:tabular-nums}
body.rm-authopen .rm-depv2 .rm-amt-grid .rm-amt.on{background:rgba(196,104,95,.16);border-color:rgba(196,104,95,.5);color:#fff}

/* ⑦ 送出鈕:圓角與陰影對齊新語言(顏色仍是站內既有的 rm-green) */
body.rm-authopen .rm-depv2 .rm-modal-submit{height:52px;border-radius:16px;font-size:17px;
  box-shadow:0 8px 24px rgba(196,104,95,.24)}
body.rm-authopen .rm-depv2 .rm-modal-submit.rm-btn-maint{box-shadow:none}

/* ⑧ Receipt / Auto 面板內的卡片跟著新語言 */
#rm-dep-receipt .rm-mcard,#rm-dep-auto .rm-mcard{background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08);border-radius:16px;box-shadow:none;padding:16px;margin-bottom:16px}

/* ⑨ 2026-09-22 存款紅利選擇器(Flow A / triggerMode 10)。單選卡片(第一顆固定「不使用紅利」),
   選中態沿用站內既有紫色 on(同 .rm-amt.on),eligible:false / 自動發的置灰(opacity .5)+右側說明。
   min-height 52 過觸控門檻(skill touch-target-size);radio + 說明 = 非只靠顏色表達可選/選中(color-not-only)。 */
.rm-depbonus{margin:0 0 16px}
.rm-depbonus-list{display:flex;flex-direction:column;gap:8px}
.rm-bonus-opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;min-height:52px;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);border-radius:12px;
  padding:11px 14px;font-family:inherit;color:#e6e9f2;cursor:pointer;-webkit-appearance:none;appearance:none}
.rm-bonus-opt.on{background:rgba(196,104,95,.16);border-color:rgba(196,104,95,.5)}
.rm-bonus-opt.dis{cursor:default;opacity:.5}
.rm-bonus-radio{flex:0 0 auto;width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.28);
  box-sizing:border-box;position:relative;transition:border-color .15s}
.rm-bonus-opt.on .rm-bonus-radio{border-color:var(--green2)}
.rm-bonus-opt.on .rm-bonus-radio::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;
  border-radius:50%;background:var(--green2);transform:translate(-50%,-50%)}
.rm-bonus-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.rm-bonus-name{font-size:13.5px;font-weight:700;color:#fff;line-height:1.25;overflow:hidden;text-overflow:ellipsis}
.rm-bonus-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rm-bonus-est{font-size:12.5px;font-weight:800;color:var(--gold);font-variant-numeric:tabular-nums}
.rm-bonus-to{font-size:11px;font-weight:700;color:var(--muted)}
.rm-bonus-note{font-size:11px;font-weight:600;color:var(--muted)}
/* 董事長 2026-10-06:金額不夠的紅利灰卡可點(點了自動換成該檔 min deposit) → 覆蓋 .dis 的 cursor:default,給 pointer + hover 提示 */
.rm-bonus-opt.rm-bonus-lock{cursor:pointer;opacity:.6}
.rm-bonus-opt.rm-bonus-lock:hover,.rm-bonus-opt.rm-bonus-lock:focus-visible{opacity:.85;border-color:rgba(196,104,95,.45);outline:none}

/* ===== 2026-09-11 玩家遊戲評價社群(Game Reviews) —— renderCommunity;先 mock 接線 ===== */
.rm-cm-intro{color:var(--muted);font-size:13px;line-height:1.55;margin:2px 2px 14px}
.rm-cm-modnote{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted);background:var(--card);
  border:1px solid var(--border);border-radius:10px;padding:9px 12px;margin:0 2px 14px}
.rm-cm-modnote b{color:var(--txt);font-weight:700}
.rm-cm-modnote svg{width:15px;height:15px;color:var(--green1);flex:0 0 auto}
.rm-cm-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 2px 14px}
.rm-cm-chips{display:flex;gap:7px;flex-wrap:wrap}
.rm-cm-chip{appearance:none;border:1px solid var(--border);background:var(--card);color:var(--muted);
  font:600 12.5px inherit;padding:8px 14px;border-radius:999px;cursor:pointer;font-family:inherit}
.rm-cm-chip.on{background:var(--grad);color:#fff;border-color:transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.rm-cm-bar .sp{flex:1}
.rm-cm-sort{appearance:none;background:var(--card);color:var(--txt);border:1px solid var(--border);border-radius:10px;
  padding:8px 30px 8px 12px;font:600 12.5px inherit;cursor:pointer;font-family:inherit;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%239ca3af' stroke-width='2'><path d='M2 4l4 4 4-4'/></svg>");
  background-repeat:no-repeat;background-position:right 10px center}
.rm-cm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;padding:0 2px}
/* 2026-09-14 董事長:Game Reviews 桌機/平板要有真正的桌機版 —— 撐滿內容寬 + 多欄,
   不要沿用 login/存款那種 460px 窄表單版位(桌機還被 margin:0 6% 0 auto 推到右邊,左邊一大片空)。
   rm-cm-wide 由 renderCommunity 掛在 .rm-authpage 上,離開頁面時 openCustom 清掉 → 只影響社群頁。 */
@media(min-width:768px){
  .rm-authpage.rm-cm-wide{max-width:none;margin:0 auto;padding:8px 0 44px}
  .rm-cm-wide .rm-cm-grid{grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:16px}
}
/* 桌機滑鼠 hover:卡片上浮 + 描邊高亮(與遊戲磚 .rm-tile:hover 同語彙);手機無 hover 不受影響 */
@media(hover:hover) and (min-width:1024px){
  .rm-cm-card{transition:transform .15s,border-color .15s,box-shadow .15s}
  .rm-cm-card:hover{transform:translateY(-3px);border-color:rgba(196,104,95,.5);box-shadow:0 12px 28px rgba(0,0,0,.45)}
}
.rm-cm-card{background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden;cursor:pointer;
  text-align:left;padding:0;color:inherit;font:inherit;font-family:inherit;display:block;transition:transform .15s,border-color .15s}
.rm-cm-card:active{transform:scale(.98)}
/* 2026-09-14 董事長:縮圖改正方形(遊戲圖本身是直式 ~3:4 / 方形,原 16:10 橫框會裁掉遊戲 logo 且露出粉紅漸層)。
   與主遊戲格 .rm-thumb(aspect-ratio:1/1 + object-fit:cover)同標準。載入前是中性底,不閃粉紅。 */
.rm-cm-art{aspect-ratio:1/1;position:relative;overflow:hidden;background:var(--card2)}
.rm-cm-th{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;display:block}
.rm-cm-fb{position:absolute;inset:0;display:none;place-items:center}   /* 縮圖 404 才顯示:漸層+名字+glyph */
.rm-cm-art.ph .rm-cm-fb{display:grid}
.rm-cm-art.ph .rm-cm-th{display:none}
.rm-cm-fb .nm{font-weight:900;font-size:15px;line-height:1.05;text-align:center;padding:0 10px;color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,.5);z-index:3;text-wrap:balance}
.rm-cm-fb .gl{position:absolute;right:7px;bottom:6px;font-size:15px;z-index:3;opacity:.9}
.rm-cm-fb::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.42))}
.rm-cm-meta{padding:9px 11px 11px}
.rm-cm-name{font-size:12.5px;font-weight:700;color:var(--txt);line-height:1.2;margin-bottom:6px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rm-cm-mrow{display:flex;align-items:center;justify-content:space-between;gap:6px}
.rm-cm-provbox{display:flex;align-items:center;gap:5px;min-width:0}
.rm-cm-provlogo{height:14px;width:auto;max-width:66px;object-fit:contain;flex:0 0 auto}
.rm-cm-prov{font-size:10px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rm-cm-tag{font-size:9.5px;font-weight:700;color:var(--green1);background:rgba(251,213,196,.10);border:1px solid rgba(251,213,196,.25);
  border-radius:5px;padding:2px 6px;text-transform:uppercase;flex:0 0 auto}
.rm-cm-rl{display:flex;align-items:center;gap:6px;margin-top:8px}
.rm-cm-score{font-weight:800;font-size:14px;font-variant-numeric:tabular-nums}
.rm-cm-stars{display:inline-flex;color:var(--gold);letter-spacing:.5px;font-size:12px}
.rm-cm-stars .off{color:#8a7178}
.rm-cm-cnt{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;margin-left:auto}
/* 詳情 modal */
.rm-cm-scrim{position:fixed;inset:0;background:rgba(12,6,8,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;align-items:flex-start;justify-content:center;padding:26px 14px;z-index:1200;overflow:auto}
.rm-cm-sheet{width:100%;max-width:520px;background:var(--card);border:1px solid rgba(255,255,255,.14);border-radius:18px;
  overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.6);animation:rmCmPop .2s cubic-bezier(.2,.8,.2,1)}
@keyframes rmCmPop{from{transform:translateY(12px) scale(.985);opacity:0}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.rm-cm-sheet{animation:none}}
.rm-cm-shh{position:relative;height:118px;display:grid;place-items:center;overflow:hidden}
.rm-cm-shhimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;display:block}
.rm-cm-shh .nm{font-weight:900;font-size:26px;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.6);z-index:2;text-align:center;padding:0 18px;text-wrap:balance}
.rm-cm-shh::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.62))}
.rm-cm-x{position:absolute;top:11px;right:11px;z-index:2;width:32px;height:32px;border-radius:10px;border:1px solid rgba(255,255,255,.2);
  background:rgba(0,0,0,.4);color:#fff;cursor:pointer;font-size:18px;display:grid;place-items:center;padding:0}
.rm-cm-shb{padding:18px 18px 22px}
.rm-cm-shtr{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:2px}
.rm-cm-shb h2{margin:0;font-size:18px;font-weight:800}
.rm-cm-sum{display:flex;gap:18px;align-items:center;margin:14px 0 4px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.rm-cm-big{text-align:center;flex:0 0 auto}
.rm-cm-big .n{font-size:38px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums}
.rm-cm-big .c{font-size:11.5px;color:var(--muted);margin-top:4px}
.rm-cm-dist{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.rm-cm-drow{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted)}
.rm-cm-drow .lab{width:24px;text-align:right;font-variant-numeric:tabular-nums}
.rm-cm-track{flex:1;height:6px;border-radius:4px;background:var(--card2);overflow:hidden}
.rm-cm-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,#e8a41c,var(--gold))}
.rm-cm-drow .pc{width:30px;text-align:right;font-variant-numeric:tabular-nums}
.rm-cm-rate{background:var(--bg);border:1px solid var(--border);border-radius:13px;padding:15px;margin:16px 0}
.rm-cm-rate .h{font-size:13.5px;font-weight:700;margin-bottom:9px}
.rm-cm-pick{display:inline-flex;gap:5px;font-size:28px;color:#8a7178;cursor:pointer;user-select:none;line-height:1;vertical-align:middle}
.rm-cm-pick .st{transition:transform .1s,color .1s}.rm-cm-pick .st:active{transform:scale(1.1)}
.rm-cm-pick .st.lit{color:var(--gold)}
.rm-cm-phint{font-size:12px;color:var(--muted);margin-left:10px}
.rm-cm-ta{width:100%;margin-top:11px;background:var(--card2);border:1px solid var(--border);border-radius:11px;color:var(--txt);
  font:500 13.5px inherit;font-family:inherit;padding:11px 13px;min-height:70px;resize:vertical;outline:none}
.rm-cm-ta:focus{border-color:rgba(251,213,196,.5)}.rm-cm-ta::placeholder{color:#8a7178}
.rm-cm-rf{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:11px}
.rm-cm-rf .rule{font-size:11px;color:#8a7178;display:flex;align-items:center;gap:5px}
.rm-cm-post{appearance:none;border:0;border-radius:10px;padding:10px 20px;font:800 13.5px inherit;font-family:inherit;color:#fff;
  background:var(--grad);cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.rm-cm-post:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
.rm-cm-pend{display:none;margin:2px 0 16px;background:rgba(246,183,60,.08);border:1px solid rgba(246,183,60,.3);border-radius:11px;padding:12px 14px}
.rm-cm-pend.on{display:block}
.rm-cm-pend .ph{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:#f6b73c}
.rm-cm-pend .pb{font-size:12.5px;color:var(--muted);margin-top:5px;line-height:1.5}
.rm-cm-pend .pm{margin-top:8px;font-size:13px;color:var(--txt);background:rgba(0,0,0,.2);border-radius:8px;padding:8px 10px}
.rm-cm-rvh{font-size:13.5px;font-weight:800;margin:4px 0 10px}.rm-cm-rvh .cc{font-size:11.5px;font-weight:600;color:var(--muted)}
.rm-cm-rv{display:flex;gap:11px;padding:13px 0;border-top:1px solid var(--border)}
.rm-cm-av{width:34px;height:34px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:12px;color:#fff;background:linear-gradient(135deg,var(--green1),var(--green2))}
.rm-cm-rvm{flex:1;min-width:0}
.rm-cm-rvt{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rm-cm-rvid{font-weight:700;font-size:13px}
.rm-cm-rvs{color:var(--gold);font-size:11px;letter-spacing:.5px}.rm-cm-rvs .off{color:#8a7178}
.rm-cm-rvtime{font-size:11px;color:#8a7178;margin-left:auto}
.rm-cm-rvx{font-size:13px;color:#dfe2ea;line-height:1.5;margin-top:4px;word-break:break-word}
.rm-cm-rvf{display:flex;gap:14px;margin-top:7px;font-size:11.5px}
.rm-cm-rvf button{appearance:none;background:none;border:0;color:var(--muted);font:inherit;font-family:inherit;cursor:pointer;padding:0}
.rm-cm-rvf button:active{color:var(--txt)}
@media(min-width:1280px){ .rm-cm-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))} }

/* Bonus Pass 側欄入口紅點(有可領關卡時亮;loadBpEntry 控 display)。
   ⚠️ 一定要 scope 在 .rm-bp-entry 內:列表卡的關卡進度點也叫 .rm-bp-dot,不 scope 會被這顆紅點樣式吃掉(2026-09-17 修)。 */
.rm-bp-entry{position:relative}
.rm-bp-entry .rm-bp-dot{width:8px;height:8px;border-radius:50%;background:#ff4d4d;margin-left:auto;flex:0 0 auto;box-shadow:0 0 6px rgba(255,77,77,.6)}
/* Bonus Pass 跑馬燈外框(董事長 2026-10-02:最大賣點,側欄要突出。方案 F1,位置留原處)。
   遮罩描邊法:::before 只畫 2px 金→橙旋轉邊框,內部透明 → sidebar 底色自然透出,不必對色。
   @property 讓 conic 角度可動畫;不支援的瀏覽器退成靜態金橙邊(graceful)。reduced-motion 關動效。 */
@property --rm-bpang{syntax:"<angle>";inherits:false;initial-value:0deg}
.rm-menu-item.rm-bp-entry{border-radius:12px}
.rm-menu-item.rm-bp-entry::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;pointer-events:none;z-index:0;
  background:conic-gradient(from var(--rm-bpang),var(--gold),#ff8a1f,#ffd54f,#ff8a1f,var(--gold));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  animation:rm-bpspin 4.5s linear infinite}
.rm-menu-item.rm-bp-entry>*{position:relative;z-index:1}   /* 內容壓在旋轉邊框之上 */
.rm-menu-item.rm-bp-entry .rm-mi-ic svg{color:var(--gold)}
.rm-menu-item.rm-bp-entry [data-i18n]{color:#ffe08a}
@keyframes rm-bpspin{to{--rm-bpang:360deg}}
@media(prefers-reduced-motion:reduce){.rm-menu-item.rm-bp-entry::before{animation:none}}

/* ===== 2026-09-15 董事長:Bonus Pass 桌機改橫向 battle-pass 軌道(參考 Dota);手機維持直式 zig-zag ===== */
@media(min-width:768px){
  /* 撐滿內容寬(同 rm-cm-wide 手法):拿掉 460px 窄框與桌機右推。
     左右留 16px:讓下面的 Pass 框不會貼著螢幕邊(rm-content 無左右 padding,窄桌機會齊邊)。 */
  .rm-authpage.rm-bp-wide{max-width:none;margin:0 auto;padding:8px 16px 44px}
  /* 董事長 2026-09-15:整塊 Pass 內容加一個「框」,框內底色比外層星空背景略亮 → 明顯色差,
     讓 Pass 面板從頁面背景中獨立出來(elevation-consistent)。底色用系統既有的 --panel(rgb 30,33,40)
     半透明疊在 --bg(rgb 21,23,28)上:框內明顯較亮、又保留一點星空氛圍。border=框線,圓角+陰影當抬升。
     只框 #rm-bp-body(banner+meta+軌道+T&C),頁頭 Back/BONUS PASS 在框外。手機不動。 */
  .rm-bp-wide .rm-bp{background-color:rgba(42,24,32,.72);border:1px solid rgba(255,255,255,.10);
    border-radius:18px;padding:18px 18px 26px;
    box-shadow:0 14px 36px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.05)}
  /* 董事長 2026-09-17:多個 Pass 的列表卡桌機改 2 欄,banner **整張攤開不裁** ——
     原本 .rm-bp-card 是「全寬 + 118px 短卡」,BO 的橫式 banner 用 object-fit:cover 進去只露中間一條(展示不完)。
     改法:①列表 2 欄不再撐滿寬(container-width);②banner 從 absolute-cover 改成 in-flow(width:100% height:auto),
     卡高隨 banner 原比例 → 整張都看得到,不管 BO 上傳什麼尺寸都不裁(image-scale);③文字絕對疊上置中。
     min-height 當地板:沒圖/壞圖時卡不塌。手機(<768)維持原本 cover 短卡不動。 */
  /* 桌機:路線圖置中窄欄(闖關路徑感更聚焦)+ 關卡節點放大;卡片 banner 整張攤開沿用(不裁) */
  .rm-bp-wide .rm-bp-road{max-width:860px;margin:0 auto}
  .rm-bp-wide .rm-bp-stg{grid-template-columns:54px 1fr;gap:14px;padding-bottom:22px}
  .rm-bp-wide .rm-bp-stg-node{width:44px;height:44px;font-size:17px}
  .rm-bp-wide .rm-bp-stg-line{top:49px;bottom:-22px}
  .rm-bp-wide .rm-bp-card{display:block;padding:0;min-height:150px}
  .rm-bp-wide .rm-bp-card-bg{position:static;width:100%;height:auto;display:block}
  /* 董事長 2026-09-17:文字內容靠左(限制在左半、對齊左)+ 標題放大更明顯 */
  .rm-bp-wide .rm-bp-card-in{position:absolute;inset:0;padding:22px 26px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:9px;max-width:52%}
  .rm-bp-wide .rm-bp-card-t{font-size:23px;letter-spacing:.3px;line-height:1.12;text-shadow:0 2px 12px rgba(0,0,0,.92)}
  .rm-bp-wide .rm-bp-card-d{font-size:12.5px;margin-top:0}
  .rm-bp-wide .rm-bp-card-foot{margin-top:3px}
  .rm-bp-wide .rm-bp-card-sub{margin-top:2px;font-size:12px}
  .rm-bp-wide .rm-bp-go{height:36px;padding:0 20px;font-size:12.5px}
}
@media(min-width:1280px){
  .rm-bp-wide .rm-bp-banner{min-height:200px}
  .rm-bp-wide .rm-bp-banner-img{max-height:340px}   /* 董事長 2026-10-15:桌機 banner 高度上限 */
  .rm-bp-wide .rm-bp-banner-t{font-size:27px}
  /* 直式軌道 → 橫向:一排 tier,吃滿寬,關卡多就水平捲動。
     ⚠️ overflow-y 必須明確 hidden(不能 visible):overflow-x:auto 會把 visible 強制變 auto → 冒出垂直捲軸+裁掉上下卡。
        改用固定高 grid 讓卡片都容納在軌道高度內,垂直不溢出,就不會被切。 */
  .rm-bp-wide .rm-bp-path{display:flex;flex-direction:row;align-items:stretch;gap:0;
    margin-top:22px;padding:0 6px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
  .rm-bp-wide .rm-bp-path::-webkit-scrollbar{height:8px}
  .rm-bp-wide .rm-bp-path::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:6px}
  /* 中線改水平;進度 fill 用 --bp-pct 當寬度(!important 蓋掉 inline 的 height) */
  .rm-bp-wide .rm-bp-spine{left:10px;right:10px;top:50%;bottom:auto;width:auto;height:4px;transform:translateY(-50%)}
  .rm-bp-wide .rm-bp-spine i{height:100%!important;width:var(--bp-pct,0%);background:linear-gradient(90deg,var(--bp-ok),var(--bp))}
  /* 每關 = grid 直欄:上格(獎勵)/ 寶箱(中線)/ 下格,上下格等高(1fr) → 寶箱剛好落在中線;卡片在格內、貼近寶箱,不絕對定位不溢出 */
  .rm-bp-wide .rm-bp-node{flex:1 0 220px;max-width:320px;min-height:500px;
    display:grid;grid-template-rows:1fr auto 1fr;grid-template-columns:1fr;justify-items:center;align-items:center;position:relative}
  .rm-bp-wide .rm-bp-mid{grid-row:2;width:auto;margin:0}
  .rm-bp-wide .rm-bp-chest{margin:0 auto}
  .rm-bp-wide .rm-bp-half{position:static;width:100%;max-width:288px}
  .rm-bp-wide .rm-bp-node>.rm-bp-half:first-child{grid-row:1;align-self:end;padding-bottom:14px}   /* 卡在上格、貼近寶箱 */
  .rm-bp-wide .rm-bp-node>.rm-bp-half:last-child{grid-row:3}                                        /* 空格當配重,讓寶箱置中 */
  .rm-bp-wide .rm-bp-node.right>.rm-bp-half:first-child{grid-row:3;align-self:start;padding-top:14px;padding-bottom:0}  /* .right 卡改到下格 */
  .rm-bp-wide .rm-bp-node.right>.rm-bp-half:last-child{grid-row:1}
  /* 卡片桌機一律置中對齊(不再左右靠邊);獎勵/遊戲列也置中 */
  .rm-bp-wide .rm-bp-lc,.rm-bp-wide .rm-bp-node.right .rm-bp-lc{text-align:center}
  .rm-bp-wide .rm-bp-g,.rm-bp-wide .rm-bp-prize,
  .rm-bp-wide .rm-bp-node.right .rm-bp-g,.rm-bp-wide .rm-bp-node.right .rm-bp-prize{flex-direction:row;justify-content:center}
}
@media(hover:hover) and (min-width:1280px){
  .rm-bp-wide .rm-bp-node .rm-bp-lc{transition:border-color .15s,transform .15s}
  .rm-bp-wide .rm-bp-node:hover .rm-bp-lc{transform:translateY(-2px);border-color:rgba(196,104,95,.55)}
}

/* 桌機:TIME LEFT / CYCLE / PROGRESS 併成一排(董事長 2026-09-15);手機維持堆疊(.rm-bp-topmeta 是普通 block) */
@media(min-width:1280px){
  .rm-bp-wide .rm-bp-topmeta{position:absolute;left:0;right:0;bottom:0;padding:12px 14px;flex-direction:row;gap:12px;align-items:stretch}   /* 桌機:三盒絕對定位疊在 banner 底部(圖夠高) */
  .rm-bp-wide .rm-bp-topmeta>.rm-bp-meta{flex:2 1 0;margin:0}
  .rm-bp-wide .rm-bp-topmeta>.rm-bp-season{flex:1 1 0;margin:0;display:flex;flex-direction:column;justify-content:center}
}

/* 2026-09-15 董事長:內容頁(通知/獎勵/夥利/交易紀錄/聯絡/獎勵詳情…)桌機用舒適寬欄,不再擠中間 460px 窄條。
   由 openCustom 依頁面掛 .rm-page-wide;表單頁(login/註冊/存款/提款/綁卡/錢包)不掛,維持窄。 */
@media(min-width:768px){
  /* 董事長 2026-10-01:內容頁的 Back 要跟 Community 一致(貼內容區左緣),不要漂在置中盒子的左緣看起來懸空。
     做法:頁頭(.rm-dephead=Back+標題)橫貫全寬 → Back 一律貼最左、標題全寬置中;正文仍 900 置中保持可讀。 */
  .rm-authpage.rm-page-wide{max-width:none;margin:0;padding-left:0;padding-right:0}
  .rm-authpage.rm-page-wide>*:not(.rm-dephead){max-width:900px;margin-left:auto;margin-right:auto}
  /* 董事長 2026-10-03:窄表單頁(My Bank/Change Password)同樣讓 Back 貼左(頁頭全寬),但表單體維持 460 窄欄居中(不撐寬) */
  .rm-authpage.rm-page-form{max-width:none;margin:0;padding-left:0;padding-right:0}
  .rm-authpage.rm-page-form>*:not(.rm-dephead){max-width:460px;margin-left:auto;margin-right:auto}
}

/* 2026-09-15 董事長:桌機獎勵 banner 一排兩個(2 欄);手機維持單欄。只作用在寬版獎勵頁的 .rm-promo-list。 */
@media(min-width:1024px){
  .rm-page-wide .rm-promo-list{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;align-items:start}
}

/* ═══ VIP 制度介紹頁(Phase 1 純展示,2026-09-23 董事長)═══════════════════
   編輯級設計:每級一張「金屬」卡 —— 皇冠 + 漸層等級名 + 光暈;福利分三區:
   獎金(放大突出)/ 限額(數據網格)/ 特權(✓✗ 徽章)。用全站 token,暗色一致,手機優先。
   各級金屬色 = --tc(主)/--tc2(漸層副),Normal 灰→Diamond 青鑽,層級靠光暈+飽和度遞增。 */
.rm-vip-body{padding:6px 0 28px}
.rm-vip-tiers{display:flex;flex-direction:column;gap:16px}
.rm-vip-tier{position:relative;border-radius:16px;overflow:hidden;
  background:linear-gradient(180deg, var(--card2), var(--card));   /* fallback:不支援 color-mix 的舊瀏覽器用純卡色 */
  background:
    radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--tc) 14%, transparent), transparent 60%),
    linear-gradient(180deg, var(--card2), var(--card));
  border:1px solid var(--border);
  border:1px solid color-mix(in srgb, var(--tc) 30%, var(--border));
  box-shadow:0 10px 30px -20px rgba(0,0,0,.6);
  box-shadow:0 10px 30px -20px color-mix(in srgb, var(--tc) 70%, #000)}
/* 頂部金屬條 */
.rm-vip-tier::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg, var(--tc), var(--tc2, var(--tc)));opacity:.9}
.rm-vip-thead{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:2px 12px;
  padding:16px 16px 13px}
.rm-vip-crown{grid-row:1/3;width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  border-radius:11px;color:var(--tc);
  background:rgba(255,255,255,.06);
  background:color-mix(in srgb, var(--tc) 16%, transparent);
  border:1px solid rgba(255,255,255,.12);
  border:1px solid color-mix(in srgb, var(--tc) 40%, transparent)}
.rm-vip-crown svg{width:22px;height:22px}
.rm-vip-tname{font-size:19px;font-weight:800;letter-spacing:.4px;line-height:1.1;
  background:linear-gradient(92deg, var(--tc), var(--tc2, var(--tc)));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--tc)}
.rm-vip-tdesc{font-size:12px;color:var(--muted);line-height:1.35}
/* 獎金區:放大突出的三張(升級/救援/生日) */
.rm-vip-rewards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:2px 12px 12px}
.rm-vip-rw{display:flex;flex-direction:column;gap:2px;padding:11px 10px;border-radius:11px;
  background:var(--sunken);
  background:color-mix(in srgb, var(--tc) 9%, var(--sunken));
  border:1px solid rgba(255,255,255,.08);
  border:1px solid color-mix(in srgb, var(--tc) 22%, transparent)}
.rm-vip-rw-amt{font-size:16px;font-weight:800;letter-spacing:.2px;color:var(--txt);font-variant-numeric:tabular-nums;line-height:1.15}
.rm-vip-rw-lbl{font-size:11px;font-weight:600;color:#d7dbe2;color:color-mix(in srgb, var(--tc) 55%, #fff)}
.rm-vip-rw-desc{font-size:10px;color:var(--muted);line-height:1.35;margin-top:1px}
/* 限額區:數據網格 */
.rm-vip-stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:0 12px 12px;border-radius:11px;overflow:hidden;
  background:rgba(255,255,255,.05)}
.rm-vip-st{display:flex;flex-direction:column;gap:2px;padding:10px 12px;background:var(--sunken)}
.rm-vip-st-lbl{font-size:11px;color:var(--muted);line-height:1.3}
.rm-vip-st-val{font-size:15px;font-weight:700;color:var(--txt);font-variant-numeric:tabular-nums}
/* 特權區:✓✗ 徽章 */
.rm-vip-perks{display:flex;flex-wrap:wrap;gap:7px;padding:0 14px 15px}
.rm-vip-perk{display:inline-flex;align-items:center;gap:5px;padding:6px 11px;border-radius:999px;
  font-size:11.5px;font-weight:600;border:1px solid transparent}
.rm-vip-perk i{font-style:normal;font-size:11px;line-height:1}
.rm-vip-perk.on{color:#e5e8ec;color:color-mix(in srgb, var(--tc) 60%, #fff);
  background:rgba(255,255,255,.06);background:color-mix(in srgb, var(--tc) 14%, transparent);
  border-color:rgba(255,255,255,.14);border-color:color-mix(in srgb, var(--tc) 34%, transparent)}
.rm-vip-perk.on i{color:var(--tc)}
.rm-vip-perk.off{color:#6b7280;background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.06)}
/* 各級金屬色(Normal 灰 / Bronze 銅 / Silver 銀 / Gold 金 / Platinum 冰藍 / Diamond 青鑽→紫) */
.rm-vip-t0{--tc:#9aa3b0;--tc2:#c3cad4}
.rm-vip-t1{--tc:#cd7f45;--tc2:#e8a763}
.rm-vip-t2{--tc:#b8c2d0;--tc2:#e6edf5}
.rm-vip-t3{--tc:#e6b422;--tc2:#ffe08a}
.rm-vip-t4{--tc:#7fc4ef;--tc2:#c9e9ff}
.rm-vip-t5{--tc:#fbd5c4;--tc2:#c4685f}
.rm-vip-t6{--tc:#41465c;--tc2:#aeb4cc}   /* Black Diamond:深灰底(董事長 2026-09-24:要深灰,不要紫底) */
/* 黑钻专属:两道简单设计弧线(取代光晕),深灰底上一点线条设计感、留一丝紫;圆大部分在 hero 外,只露頂部弧線 */
.rm-vip-hero.rm-vip-t6::before{content:"";position:absolute;left:-40%;right:auto;top:auto;bottom:-118%;
  width:180%;height:180%;border-radius:50%;border:1px solid rgba(255,255,255,.11);background:none;pointer-events:none;z-index:0}
.rm-vip-hero.rm-vip-t6::after{left:-52%;right:auto;top:auto;bottom:-135%;width:205%;height:205%;
  border-radius:50%;background:none;border:1.5px solid rgba(176,160,255,.24)}
/* 窄機:獎金三張擠不下 → 單欄堆疊;限額維持兩欄 */
@media(max-width:560px){ .rm-vip-rewards{grid-template-columns:1fr} }

/* ═══ VIP Phase 2:我的 VIP(狀態 + 領獎,2026-09-23)═══ */
/* 頁內 tab(我的 VIP / 等级) */
.rm-vip-tabs{display:flex;gap:8px;margin:2px 0 14px}
.rm-vip-tab{flex:1;padding:10px 8px;border-radius:11px;font-size:13px;font-weight:700;cursor:pointer;
  color:var(--muted);background:var(--card2);border:1px solid var(--border);transition:background .15s,color .15s,border-color .15s}
.rm-vip-tab.on{color:#fff;background:linear-gradient(135deg,var(--green1),var(--green2));border-color:transparent}
/* 游客 CTA */
.rm-vip-guest{display:flex;flex-direction:column;align-items:center;gap:16px;padding:34px 20px;text-align:center}
.rm-vip-guest-txt{font-size:14px;color:var(--muted);line-height:1.5;max-width:280px}
.rm-vip-guest .rm-modal-submit{max-width:220px}
/* ── Trip.com 風格 hero:染色 banner + 六邊形勳章 + 等級軌(用當前等級金屬色 --tc/--tc2)── */
.rm-vip-hero{position:relative;border-radius:18px 18px 0 0;padding:20px 18px 22px;overflow:hidden;
  background:var(--card2);   /* fallback:不支援 color-mix */
  background:linear-gradient(158deg,
    color-mix(in srgb, var(--tc) 60%, var(--card2)) 0%,
    color-mix(in srgb, var(--tc) 26%, var(--panel)) 52%,
    color-mix(in srgb, var(--tc) 8%, var(--card)) 100%)}
.rm-vip-hero::after{content:"";position:absolute;top:-40%;right:-10%;width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--tc2,#fff) 30%, transparent), transparent 70%);pointer-events:none}
.rm-vip-hero-row{display:flex;align-items:center;justify-content:space-between;gap:12px;position:relative;z-index:1}
.rm-vip-hero-nm{font-size:26px;font-weight:900;letter-spacing:.5px;line-height:1.05;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.25)}
.rm-vip-hero-st{margin-top:5px;font-size:12px;font-weight:600;color:rgba(255,255,255,.82);
  display:inline-block;padding:2px 9px;border-radius:99px;background:rgba(0,0,0,.18)}
/* 六邊形 3D 勳章 */
.rm-vip-hexbadge{position:relative;width:78px;height:86px;flex:0 0 auto;filter:drop-shadow(0 8px 16px rgba(0,0,0,.32))}
.rm-vip-hexbadge::before{content:"";position:absolute;inset:0;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:linear-gradient(150deg,var(--tc2,#e9edf2) 0%,var(--tc,#9aa3b0) 62%)}
.rm-vip-hexbadge::after{content:"";position:absolute;left:0;right:0;top:0;height:52%;
  clip-path:polygon(50% 0,100% 25%,100% 48%,50% 62%,0 48%,0 25%);background:rgba(255,255,255,.32)}
.rm-vip-hexbadge>span{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.96)}
.rm-vip-hexbadge>span svg{width:34px;height:34px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.28))}
/* 等級進度軌 */
/* 等级轨 · 三態(董事長 2026-09-24):railtrack=貫穿全部等級的整條底線;railfill=金色進度疊上面(到當前級)。
   已解鎖=點亮+金邊+✓ / 當前=放大+白光環+NOW / 鎖定=灰+鎖頭 / 未登入=中性可預覽。top:20px=hexbox(40px)中心,兩者要一起改。 */
.rm-vip-rail{position:relative;display:flex;align-items:flex-start;margin-top:20px;z-index:1}
.rm-vip-railtrack{position:absolute;top:20px;height:3px;border-radius:3px;background:rgba(255,255,255,.18);transform:translateY(-50%);z-index:0}
.rm-vip-railfill{position:absolute;top:20px;height:3px;border-radius:3px;background:linear-gradient(90deg,#e6b422,#ffe08a);transform:translateY(-50%);z-index:1}
.rm-vip-railcell{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:7px;position:relative;z-index:2;cursor:pointer}
.rm-vip-railhexbox{height:40px;display:flex;align-items:center;justify-content:center;position:relative}
.rm-vip-railhex{display:flex;align-items:center;justify-content:center;width:26px;height:28px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:linear-gradient(160deg,var(--tc2,#e9edf2),var(--tc,#9aa3b0))}
.rm-vip-railhex svg{width:11px;height:11px}
.rm-vip-raillbl{font-size:9.5px;font-weight:600;line-height:1.15;text-align:center;color:#8b93a1}
.rm-vip-railnow{position:absolute;top:-13px;left:50%;transform:translateX(-50%);font-size:8.5px;font-weight:900;letter-spacing:.06em;color:#ffd54f;white-space:nowrap;z-index:3}
/* 已解锁 */
.rm-vip-railcell.unlk .rm-vip-railhex{box-shadow:0 0 0 2px rgba(255,213,79,.6),0 0 8px rgba(255,213,79,.28)}
.rm-vip-railcell.unlk .rm-vip-railhex svg{color:#1b1e27}
.rm-vip-railcell.unlk .rm-vip-raillbl{color:#c9cfda}
/* 当前 */
.rm-vip-railcell.cur .rm-vip-railhex{width:36px;height:39px;box-shadow:0 0 0 3px rgba(255,255,255,.55),0 0 14px color-mix(in srgb,var(--tc,#e6b422) 75%,transparent)}
.rm-vip-railcell.cur .rm-vip-raillbl{color:#fff;font-weight:800}
/* 锁定 */
.rm-vip-railcell.lock .rm-vip-railhex{background:linear-gradient(160deg,#5f6673,#474d59);opacity:.9}   /* 深灰=鎖定;不用 grayscale 濾鏡(會把選中標記也灰掉) */
.rm-vip-railcell.lock .rm-vip-railhex svg{width:12px;height:12px;color:rgba(255,255,255,.9)}
.rm-vip-railcell.lock .rm-vip-raillbl{color:#6f7684}
/* 未登入中性:選中預覽=放大+白環;登入態選預覽別級(非當前)=等級名轉青加粗(濾鏡無關,鎖定級也看得到) */
.rm-vip-railcell.neu.sel .rm-vip-railhex{width:34px;height:37px;box-shadow:0 0 0 2px rgba(255,255,255,.4)}
.rm-vip-railcell.sel:not(.cur):not(.neu) .rm-vip-raillbl{color:var(--green1);font-weight:800}
/* 進度白卡(接在 hero 下面,補上圓角底) */
.rm-vip-progcard{background:var(--card2);border:1px solid var(--border);border-top:none;border-radius:0 0 18px 18px;padding:15px 16px 16px;margin-bottom:16px}
.rm-vip-me-goal{font-size:12.5px;color:#c9cfda;margin:2px 0 8px;font-weight:600}
.rm-vip-me-max{font-size:13.5px;color:var(--gold);font-weight:700}
.rm-vip-me-keep{font-size:11.5px;color:var(--muted);margin:14px 0 6px;padding-top:12px;border-top:1px solid rgba(255,255,255,.06)}
.rm-vip-me-prot{font-size:12px;color:var(--green1);font-weight:600}
/* 等级轨可點選(Trip:點某級看某級)—— cursor/state 樣式已上移至三態區塊 */
.rm-vip-railcell:focus-visible{outline:2px solid rgba(255,255,255,.65);outline-offset:3px;border-radius:6px}
/* 董事長 2026-10-06:等級軌用真實 VIP 等級圖標(iconUrl)。34px 置中於 40px hexbox → 貫穿線照穿中心。
   狀態:鎖定灰暗 / 當前放大+白光暈;已解鎖/登出全彩。選中態仍靠 .sel 的標籤轉綠(上方規則,對圖標同樣生效)。 */
.rm-vip-railico{width:34px;height:34px;object-fit:contain;display:block;transition:filter .2s,transform .2s,opacity .2s}
.rm-vip-railcell.lock .rm-vip-railico{filter:grayscale(1) brightness(.7);opacity:.55}
.rm-vip-railcell.cur .rm-vip-railico{transform:scale(1.2);filter:drop-shadow(0 0 7px rgba(255,255,255,.55))}
/* 預覽別級的內容行 */
.rm-vip-me-above{font-size:13px;color:var(--green1);font-weight:700}
.rm-vip-me-unlock{font-size:13px;color:var(--gold);font-weight:700}
.rm-vip-me-unlock.rm-vip-me-plain{color:var(--muted);font-weight:600}   /* 起始级等无门槛:灰色描述,不用金色 */
/* 手機版 VIP 也套大框(董事長 2026-09-24):≤1279 用自己的 media,與桌機(≥1280)的框規則互斥不衝突;padding 收窄適配窄屏 */
@media(max-width:1279px){
  .rm-authpage.rm-vip-wide{background:rgba(20,11,15,.82);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:14px 12px 20px}
  .rm-vip-cmp{display:none}   /* 董事長 2026-09-24:對比表只填桌機空位,手機不需要(要橫滑又佔地) */
}
/* 選中那一級的完整福利卡(獎金/限額/特權,與「等级」tab 同一套渲染) */
.rm-vip-selben{background:var(--card2);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-bottom:16px;padding-top:8px}
.rm-vip-selben:empty{display:none}
/* 全等级福利对比表(董事長 2026-09-24):卡片下方橫貫整寬,填桌機空位。窄屏 .rm-vip-cmp-scroll 自身橫捲,行名 sticky。 */
.rm-vip-cmp{background:rgba(42,24,32,.72);border:1px solid rgba(255,255,255,.09);border-radius:16px;overflow:hidden;margin-top:20px}
.rm-vip-cmp-hd{font-size:14px;font-weight:800;color:#fff;padding:15px 18px;border-bottom:1px solid rgba(255,255,255,.07)}
.rm-vip-cmp-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.rm-vip-cmptab{width:100%;border-collapse:collapse;min-width:760px}
.rm-vip-cmptab th,.rm-vip-cmptab td{padding:11px 10px;text-align:center;font-size:12px;font-variant-numeric:tabular-nums}
.rm-vip-cmp-lbl{text-align:left;color:#c9cfda;font-weight:600;white-space:nowrap;position:sticky;left:0;background:#191c23;z-index:2;min-width:186px}
.rm-vip-cmp-th{color:#aeb4cc;font-weight:700;border-bottom:1px solid rgba(255,255,255,.08);white-space:nowrap}
.rm-vip-cmp-hex{display:inline-block;width:13px;height:14px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:linear-gradient(160deg,var(--tc2,#e9edf2),var(--tc,#9aa3b0));vertical-align:middle;margin-right:5px}
.rm-vip-cmp-tnm{vertical-align:middle}
.rm-vip-cmp-cell{color:#e7ebf1;font-weight:600}
.rm-vip-cmp-na{color:#5b6270}
.rm-vip-cmp-y svg{width:15px;height:15px;color:#39d98a;vertical-align:middle}
.rm-vip-cmp-n svg{width:13px;height:13px;color:#5b6270;vertical-align:middle}
.rm-vip-cmp-sec td{text-align:left;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#ffd54f;background:rgba(255,213,79,.06);padding:8px 12px}
.rm-vip-cmp-th.cur{color:#fff;background:rgba(255,213,79,.14);border-top:2px solid var(--gold)}
.rm-vip-cmp-cell.cur{background:rgba(255,213,79,.07)}
/* BO 上傳的等級 icon(透明 webp,含等級名美術):hero 用大圖(取代六邊形),「等级」卡頭用中圖 */
.rm-vip-heroicon{width:96px;height:96px;object-fit:contain;flex:0 0 auto;filter:drop-shadow(0 6px 16px rgba(0,0,0,.45))}
.rm-vip-cardicon{grid-row:1/3;width:46px;height:46px;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
/* 福利區分區小標題(奖金/限额/专属特权)—— 破單調、給層次(2026-09-24 董事長) */
.rm-vip-secttl{display:flex;align-items:center;gap:6px;margin:15px 14px 9px;font-size:11px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;
  color:#aeb6c6;color:color-mix(in srgb,var(--tc,#aeb6c6) 42%,#e8ecf3)}
.rm-vip-secttl::after{content:"";flex:1;height:1px;margin-left:2px;background:rgba(255,255,255,.08);
  background:linear-gradient(90deg,color-mix(in srgb,var(--tc,#fff) 22%,transparent),transparent)}
.rm-vip-secic{display:inline-flex;width:15px;height:15px;color:var(--tc,var(--gold));flex:0 0 auto}
.rm-vip-secic svg{width:15px;height:15px}
.rm-vip-selben .rm-vip-rewards,.rm-vip-selben .rm-vip-stats,.rm-vip-selben .rm-vip-perks{margin-top:0}
/* 奖金金额用等级金屬色更醒目 */
.rm-vip-rw-amt{color:var(--txt);color:color-mix(in srgb,var(--tc,#fff) 30%,#fff)}
/* 登出時的登入引導條(取代原全屏 guest CTA;現在下方接在瀏覽視圖後) */
.rm-vip-guestbar{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;
  background:var(--card2);border:1px solid var(--border);border-radius:14px;padding:20px 18px;margin-top:4px}
.rm-vip-guestbar .rm-modal-submit{max-width:220px}
/* 進度條 */
.rm-vip-prog{margin:7px 0}
.rm-vip-prog-top{display:flex;justify-content:space-between;align-items:baseline;font-size:11.5px;margin-bottom:4px}
.rm-vip-prog-top>span:first-child{color:var(--muted)}
.rm-vip-prog-num{color:var(--txt);font-weight:700;font-variant-numeric:tabular-nums}
.rm-vip-prog-track{height:7px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
.rm-vip-prog-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--green1),var(--green2));transition:width .4s ease}
/* 獎勵 tab */
.rm-vip-rwtabs{display:flex;gap:18px;padding:0 2px 10px;border-bottom:1px solid var(--border);margin-bottom:12px}
.rm-vip-rwtab{padding:4px 0;font-size:13px;font-weight:700;color:var(--muted);cursor:pointer;background:none;border:none;position:relative}
.rm-vip-rwtab.on{color:var(--txt)}
.rm-vip-rwtab.on::after{content:"";position:absolute;left:0;right:0;bottom:-11px;height:2px;border-radius:2px;background:var(--green1)}
/* 獎勵卡 */
.rm-vip-rwlist{display:flex;flex-direction:column;gap:10px}
.rm-vip-rwcard{display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--card2);border:1px solid var(--border);border-radius:12px;padding:13px 14px}
.rm-vip-rw-l{display:flex;flex-direction:column;gap:3px;min-width:0}
.rm-vip-rw-type{font-size:12.5px;color:var(--muted);font-weight:600}
.rm-vip-rw-amt2{font-size:17px;font-weight:800;color:var(--txt);font-variant-numeric:tabular-nums}
.rm-vip-rw-meta{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:1px}
.rm-vip-rw-to{font-size:10.5px;color:var(--gold);font-weight:600}
.rm-vip-rw-exp{font-size:10.5px;color:var(--muted)}
.rm-vip-rw-r{flex:0 0 auto}
.rm-vip-claim{padding:9px 20px;border-radius:10px;font-size:13px;font-weight:800;cursor:pointer;color:#120b0d;
  background:linear-gradient(135deg,var(--gold),#ffe08a);border:none;box-shadow:0 6px 16px -8px var(--gold);transition:opacity .15s,transform .1s}
.rm-vip-claim:active{transform:scale(.96)}
.rm-vip-claim:disabled,.rm-vip-claim.loading{opacity:.55;cursor:default;box-shadow:none}
.rm-vip-rw-st{font-size:12px;font-weight:700;color:var(--muted);white-space:nowrap}
.rm-vip-rw-st.st-paid{color:var(--green1)}
.rm-vip-rw-st.st-expired,.rm-vip-rw-st.st-cancelled{color:#6b7280}
.rm-vip-rw-st.st-processing,.rm-vip-rw-st.st-gift_pending{color:var(--gold)}

/* ===== 2026-10-13 SMM MYR 輔助色(配色 c:酒紅 + 紫羅蘭 + 金)=====
   主色(背景/卡片/主按鈕 Register)維持酒紅玫瑰金;紫羅蘭 --violet、金 --gold 只上小面積點綴,
   WHY: primary-action —— 輔助色不能搶主按鈕;放在分類選中態/區塊標題條/HOT·NEW 標籤/贏錢金額。
   刻意放檔尾、沿用原選擇器(同權重後寫者勝),要撤掉整段刪除即可。 */
.rm-sec-bar{background:linear-gradient(180deg,var(--violet),var(--gold))}
#rm-tabs .rm-tab.rm-tab-active .rm-tab-ic{color:var(--violet);filter:drop-shadow(0 0 8px rgba(192,132,252,.55))}
#rm-tabs .rm-tab-active:after{background:linear-gradient(90deg,var(--violet),var(--gold))}
.rm-badge{background:var(--gold);border-color:rgba(255,255,255,.35);color:#1f1300}
.rm-ptile-hot{background:linear-gradient(135deg,rgba(246,196,83,.18),rgba(184,82,106,.16));border-color:rgba(246,196,83,.5)}
.rm-ptile-hot svg{color:var(--gold)}
.rm-ptile-new{background:linear-gradient(135deg,rgba(192,132,252,.18),rgba(184,82,106,.16));border-color:rgba(192,132,252,.5)}
.rm-ptile-new .rm-ptile-spark{color:var(--violet)}

/* ===== 2026-10-13 SMM MYR 背景方案d「流動極光」=====
   一整張放大的極光層(紫羅蘭/玫紅/金/洋紅四團柔光)墊在最底,慢慢漂移旋轉。
   WHY transform 而非 background-position:transform 交給 GPU 合成,不會每格重畫整個背景(transform-performance),手機省電不卡。
   WHY z-index:-2:要在星空/流星層(.rm-sky、body::before,z-index:-1)後面,星星照樣疊在極光上。
   減少動態(reduced-motion)= 極光停住、保留靜態配色。 */
body::after{content:"";position:fixed;inset:-30%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(32% 28% at 22% 26%, rgba(192,132,252,.38), transparent 70%),
    radial-gradient(30% 26% at 78% 22%, rgba(236,77,114,.40), transparent 70%),
    radial-gradient(34% 26% at 62% 78%, rgba(246,196,83,.22), transparent 70%),
    radial-gradient(28% 30% at 28% 80%, rgba(168,52,140,.32), transparent 70%);
  will-change:transform;animation:rm-aurora 26s ease-in-out infinite alternate}
@keyframes rm-aurora{
  0%{transform:translate3d(0,0,0) rotate(0deg) scale(1)}
  50%{transform:translate3d(6%,-4%,0) rotate(12deg) scale(1.08)}
  100%{transform:translate3d(-5%,5%,0) rotate(-8deg) scale(1.02)}}
@media(prefers-reduced-motion:reduce){body::after{animation:none}}