/* RUAYMAK99 native shell — clean robust responsive layout, tkb777 look */
/* tkb777's FIFA-ribbon display font (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; }
/* palette aligned to tkb777 theme-default.css: body #0d0d0d navy, header #161616, lime-green CTA #b0001e */
:root{
  /* ===== [熔炉黑 × 电致红金 · Batch1 token 层 2026-08-03] 主色红金黑保留, 重组用法(红金=光源不是背景) ===== */
  /* 表面阶梯(深空微红偏, 越高越亮 -> 卡片终于跟底分层) */
  --s-0:#08090b; --s-1:#0d0f13; --s-2:#14171d; --s-3:#1b1f26; --s-4:#262b34;
  /* 红阶(描边/辉光/高光用) */
  --r-50:#ff7a8c; --r-100:#ff4d63; --r-200:#e11d34; --r-300:#b0001e; --r-400:#7a0015; --r-500:#5f0010; --r-600:#3d000a;
  /* 金阶 */
  --g-50:#fff0be; --g-100:#ffdf7a; --g-200:#ffd54f; --g-300:#f0c22e; --g-400:#c79a16; --g-500:#9a7a12;
  /* 文字 */
  --t-1:#fff; --t-2:rgba(255,255,255,.72); --t-3:rgba(255,255,255,.48); --t-4:rgba(255,255,255,.30); --t-on-gold:var(--r-600);
  /* 边框 */
  --bd-1:rgba(255,255,255,.06); --bd-2:rgba(255,255,255,.10); --bd-3:rgba(255,255,255,.16); --bd-brand:rgba(225,29,52,.38); --bd-gold:rgba(255,213,79,.42);
  /* 状态 */
  --ok:#2ED17A; --warn:var(--g-200); --err:#FF6B6B; --info:#5AA9FF;
  /* elevation(垂直位移 + 顶部 inset 高光, 废右下硬投影) */
  --e-1:0 1px 2px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.04);
  --e-2:0 4px 12px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.05);
  --e-3:0 8px 24px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06);
  --e-4:0 16px 40px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.07);
  /* glow(红/金光源) */
  --glow-r-sm:0 0 8px rgba(225,29,52,.35); --glow-r-md:0 0 16px rgba(225,29,52,.45);
  --glow-g-sm:0 0 8px rgba(255,213,79,.30); --glow-g-md:0 0 16px rgba(255,213,79,.40);
  /* 圆角 6 档(元素越大圆角越大) */
  --rd-xs:6px; --rd-sm:10px; --rd-md:14px; --rd-lg:20px; --rd-xl:28px; --rd-pill:999px;
  /* 展示字体(标题+数字用;正文继续系统字体) — Space Grotesk woff2 待资产, 先 system 兜底 */
  --ff-display:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  /* ===== 旧变量名保留 -> 指向新值(避免 121KB 全量改写)。🔴红族名义、真值本就是红, 映射到红阶=保色 ===== */
  --bg:var(--s-0); --panel:var(--s-1); --card:var(--s-2); --card2:var(--s-3); --txt:var(--t-1); --muted:var(--t-3);
  --green1:var(--g-200); /* 真值#b0001e红(非绿), 23处 */ --green2:var(--g-300); /* #5f0010, 4处 */
  --purple:var(--r-400); --pink:var(--r-400); /* 真值#620c10红族, 0引用 */
  --gold:var(--g-200); /* 🔴真值#c41028=红! 用在 focus/pending 边框, 映射品牌红非金(保持红观感) */
  --radius:var(--rd-md); --col:680px;
  --pa-primary:linear-gradient(to bottom,#ffdf7a,#f0c22e); --pa-primary-fg:#3d000a;
  --pa-deposit:linear-gradient(135deg,#e11d34 0%,#b0001e 60%,#b0001e 100%); --pa-deposit-fg:#ffffff;
  --pa-gold-bd:#620c10; --pa-gold-fg:#ffd54f;
  --pa-bronze-bd:var(--g-100); --pa-bronze-fg:var(--g-100); /* 提款描边钮:旧 #620c10 在深色表面对比 1.0-1.53 全隐形(实测4颗) -> Daftar金 --g-100, 文字+边框 AAA 7.73-11.8; --bd-gold合成后2.39-2.77<3.0 所以边框走实边 */
  --pa-cancel-bd:#4a4a52; --pa-cancel-fg:#9aa0ad; }
/* [v176] Inter Light 300 —— nav 幼体專用。
   🔴 自托管同源 /assets/fonts/(不挂 Google CDN)：同源才吃得到我們的快取策略，
      也不多一次第三方連線。檔案 = Google Fonts 官方 Inter wght@300 latin subset，24,012 B。
   🔴 font-display:swap：字體未到先用 fallback 畫，不留白。
      實測 fallback(Helvetica Neue 300, 506px) 比 Inter Light(542.5px) 窄 -> swap 時只會輕微變寬，不會溢出。
   🔴 nav 在 <1280 是 display:none，子樹不渲染 -> 手機根本不會下載這支字體。 */
/* [r25 2026-08-28] Inter(只有 Light300 一个字重、24KB) 整块换成 Plus Jakarta Sans 变量字体:
   26.7KB 一支涵盖 200-800 全字重,比原本多 2.7KB 却拿到全套粗细,而且桌面导航要的 Bold
   不再是浏览器合成的假粗体。与 s777bet r20 同步。
   🔴 整块替换,不是只换开头行 —— s777 r20 只换开头行留下 body 变孤儿,
      把紧接其后的 *{box-sizing:border-box} 整条吃掉,全站坏了 10.5 小时。 */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;
  src:url(/assets/fonts/plusjakartasans-var-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
*{box-sizing:border-box}
/* [r25] 表单元件预设不继承字体,不写这条 input/button 会掉回系统字体。与 s777 r21 同步。 */
button,input,select,textarea,optgroup{font-family:inherit}
/* 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:"Plus Jakarta Sans","Helvetica Neue",Helvetica,Arial,sans-serif;   /* [r25] 整站正文字体 */
  -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%}
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}
/* tkb777: plain borderless hamburger (26x22 icon, 3 fat bars), no boxed background */
.rm-hamburger{display:flex;flex-direction:column;gap:5px;width:38px;height:38px;border-radius:10px;
  background:transparent;border:0;align-items:center;justify-content:center;cursor:pointer}
.rm-hamburger span{width:26px;height:3px;background:#fff;border-radius:2px}
.rm-brand{display:flex;align-items:center;gap:10px}
.rm-logo{width:81px;height:81px;border-radius:50%;object-fit:contain}
/* wordmark: the logo art already contains the wordmark, so it replaces logo+text as one image */
.rm-brandmark{height:66px;width:auto;object-fit:contain;display:block}
/* subtle border + shadow (tkb777 search-text-inset) so the box is visible even though its bg
   matches the topbar/panel colour — otherwise it looks like floating text */
/* tkb777 .game-search-textfield: bg #161616, 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 var(--bd-2);box-shadow:var(--e-2);border-radius:8px;padding:0 11px;height:48px;margin:0 0 14px}
.rm-search-icon{width:12px;height:12px;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}

/* 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:var(--pa-primary);color:var(--pa-primary-fg);border:1px solid #5f0010}
.rm-btn-login{background:#f0c22e;color:#fff;border:0}
/* 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{width:93px;height:42px;padding:0;font-size:14px;font-weight:700;border-radius:10px;
  box-shadow:var(--e-2);
  display:inline-flex;align-items:center;justify-content:center;overflow:hidden;white-space:nowrap;flex:0 0 auto}
/* tkb777 .btnV2-container: 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:var(--e-2)}
/* inline CTA: register = tkb lime green #b0001e flat + white text, login = white w/ gray border (tkb777) */
.rm-cta-inline .rm-btn-register{background:var(--pa-primary);color:var(--pa-primary-fg);border:1px solid #5f0010}
.rm-cta-inline .rm-btn-login{background:linear-gradient(to bottom,#b0001e,#5f0010);color:#fff;border:1px solid #ffdf7a}   /* Masuk=绯红(配金 Daftar,红金对比,复刻 s777bet.org) */

/* ===== 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:280px;max-width:85%;z-index:200;background:var(--panel);
  transform:translateX(-105%);transition:transform .28s ease;overflow-y:auto;padding:20px 0 32px;
  display:flex;flex-direction:column;gap:20px;scrollbar-width:none}   /* mobile drawer: 280px(对齐真站宽,比原全宽窄) + 去左右 padding 让分隔线边到边贯穿。桌面由下方 media query 独立设 300px 不受影响 */
.rm-sidebar::-webkit-scrollbar{display:none}  /* tkb 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}
/* tkb: 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) */
/* tkb777 .side-menu-item-group: card = bg #0d0d0d, 1px white/30% border, radius 10, shadow;
   items h~58 (17px pad), 24px white icons inset ~60px, 16px/700 labels, icon-label gap 30 */
/* 側欄卡片對齊 register form 的 .rm-authcard(同一套設計語言;含 social 卡=.rm-menu-card.rm-social-card) */
.rm-menu-card{background:#161616;border:1px solid rgba(255,255,255,.08);border-radius:18px;
  box-shadow:0 14px 40px rgba(0,0,0,.45);overflow:hidden;flex-shrink:0}
.rm-side-topbtns{flex-shrink:0}
.rm-menu-item{display:flex;align-items:center;gap:30px;padding:17px 20px 17px 56px;cursor:pointer;position:relative}
@media(hover:hover){.rm-menu-item:hover{background:rgba(255,255,255,.05)}}
.rm-menu-item .rm-ic{width:24px;height:24px;background:rgba(255,255,255,.62)}
.rm-menu-item:hover .rm-ic,.rm-menu-item:active .rm-ic{background:linear-gradient(to right,#e0a800,#ffd54f,#e0a800)}

/* sidebar 社交入口(BO Contact Setting 驱动):竖向列表,每行 = 图标 + 号码/handle 文字。
   原本是一排 42px 圆形图标,只看得到图标、看不到号码。hover 才上浅色底 —— 不写死高亮某一行。 */
.rm-social-card{display:flex;flex-direction:column;align-items:stretch;gap:4px;padding:8px}
.rm-social{display:flex;align-items:center;justify-content:flex-start;gap:12px;width:auto;height:auto;padding:10px 12px;border-radius:10px;border:0;background:transparent;cursor:pointer;transition:background .15s;text-decoration:none}
@media(hover:hover){.rm-social:hover{background:var(--card2)}}
.rm-social:active{transform:translateY(1px)}
.rm-social-ic{width:20px;height:20px;flex:0 0 auto;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat;background:linear-gradient(180deg,#ffd54f,#e0a800)}
/* 号码可能很长(国际码+11 位),必须能省略,不能把侧栏撑破 */
.rm-social-tx{flex:1 1 auto;min-width:0;font-size:14px;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rm-menu-item .rm-flag{width:24px;height:24px;border-radius:50%;object-fit:cover;filter:none}   /* object-fit:cover 与展开态一致,防矩形国旗图被圆角压成椭圆 */
.rm-menu-item span{font-size:16px;font-weight:700;color:#f0f3fc}
.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-card.rm-lang-open .rm-arrow.rm-down{transform:rotate(-45deg);margin-top:4px}
.rm-lang-opt{display:flex;align-items:center;gap:10px;padding:7px 12px 7px 16px;cursor:pointer}  /* reduced indent so "Bahasa Indonesia" fits full */
.rm-lang-opt .rm-flag{width:26px;height:26px;flex:0 0 auto;border-radius:50%;object-fit:cover}   /* 国旗图是矩形位图,只加圆角会压成椭圆;object-fit:cover 按正方形居中裁切成正圆 */
.rm-lang-btn{flex:1 1 auto;min-width:0;text-align:center;padding:10px 12px;border-radius:10px;background:#202020;font-weight:700;font-size:15px;white-space:nowrap;transition:background .15s}  /* flexible + nowrap so the label shows in full */
.rm-lang-opt.on .rm-lang-btn{background:var(--pa-primary);color:var(--pa-primary-fg);border:1px solid #5f0010}

.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 sized to match tkb777: small 21x16 megaphone icon + 11px text (was oversized/cramped) */
/* tkb .intro-marquee-container: height auto (content-sized), margin-bottom only 4px — keep it slim */
/* font-size 原 12px -> Gerald 指定 7px(2026-07-23)。⚠️ 7px 在手机上接近不可读,
   要调回改这一个数即可;改完必须同步复核 app.js 的 MQ_PX_PER_SEC(字号变->轨道宽变
   ->一圈时间变,见那里的注释)。 */
.rm-mq-item{padding-right:60px;font-size:7px;line-height:1.35}
@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) */
/* WHY: banner frame follows the two BO art sets — mobile-first default = mobileImageUrl 1280x600 (≈2.133:1); desktop overrides to imageUrl 1800x600 (3:1). breakpoint 768 matches the <picture> source media query in app.js slideHtml. */
.rm-banner{position:relative;border-radius:0;overflow:hidden;background:#0d0d0d;aspect-ratio:3/1}  /* [r7-1 2026-08-24] 手机框改 3:1。WHY:BO 5 张 banner 实测(1425x475 与 1800x600)全是 3.000:1,旧框 1280/600=2.133:1 令 object-fit:cover 左右各裁掉 14.4%,玩家看不到整张图。桌面(下一行)本来就是 3:1。 */
@media(min-width:769px){.rm-banner{aspect-ratio:1800/600}}  /* desktop art frame 3:1 (imageUrl) */
/* 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,#141414 30%,#1a1a1a 50%,#141414 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 .rm-slide picture{display:block;width:100%;height:100%}
.rm-slides img{width:100%;height:100%;object-fit:cover;display:block}  /* frame ratio owned by .rm-banner now (desktop/mobile via media query) */
.rm-dots{position:absolute;right:14px;bottom:12px;display:flex;gap:6px}
/* tkb .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, tkb777 style) */
.rm-cta-row{display:flex;gap:16px;margin:16px 0}
.rm-cta-row .rm-btn{flex:1}
.rm-inforow-band{display:flex;align-items:center;gap:16px;margin:14px 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}
/* Home 底下 stats bar:金邊淺陰影,mobile 3 欄(Min Deposit / Deposit Time / Withdraw Limit)、desktop 4 欄(多 Min Withdraw)
   顏色 = 主題金 label #e11d34 值 + muted #8b93a7 title,格子背景與 .rm-panel 同 #101010,靠 1px 金色分隔線隔開 */
.rm-statsrow{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(63,70,84,.30);border:1px solid rgba(63,70,84,.35);border-radius:12px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.rm-statscell{background:#101010;padding:10px 6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;min-width:0}
.rm-statscell small{color:#8b93a7;font-size:10.5px;font-weight:600;line-height:1.2;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.rm-statscell b{color:var(--pa-gold-fg);font-size:14px;font-weight:800;line-height:1.2;white-space:nowrap}
@media(min-width:1024px){
  .rm-statsrow{order:1}   /* desktop:stats 在左(mobile/desktop 統一 3 欄) */
  .rm-cta-inline{order:2}   /* desktop:CTA 按鈕在右 */
  .rm-statscell b{font-size:15px}
}
@media(max-width:768px){
  .rm-inforow-band{flex-direction:column;align-items:stretch;gap:10px}
  .rm-cta-inline{width:100%;gap:8px}   /* tkb mobile: 8px between Register/Login (probed 390px) */
  .rm-cta-inline .rm-btn{flex:1;min-width:0}
}

/* tabs */
/* tkb777 .game-category-container: boxed row (bg #161616, 1px white/30% border, radius 12, shadow),
   inside it fixed 57x57 tiles with 18px gap, 25px icon + 11px/700 label; active tile = white */
/* category bar — cmm4a .menu-2 look: PNG icon on top, label below, no box, active = cyan underline */
.rm-tabs{display:flex;gap:6px;justify-content:center;background:transparent;border:0;border-radius:0;box-shadow:none;
  padding:6px 5px 5px;margin-bottom:6px;overflow-x:auto;overflow-y:hidden;touch-action:pan-y;scrollbar-width:none}
.rm-tabs::-webkit-scrollbar{display:none}
.rm-tab{position:relative;overflow:hidden;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:3.6px;padding:7px 12px 6px;background:transparent;border:0;border-bottom:0;border-radius:12px;cursor:pointer;
  transition:background .15s ease}
.rm-tab-ico{height:34px;width:auto;display:block;object-fit:contain}   /* [r15] 33.35 x0.9 */   /* [r8-2] 29 -> 33.35 (+15%) */
.rm-tab span{font-size:12.6px;color:#fff;font-weight:700;white-space:nowrap}   /* [r15] 14 x0.9;下划线刻意留 2px 不缩(border 宽度会舍入到装置像素,1.8px 在 DPR1 变 1px=砍半) */  /* label under icon (+10% on top of +30%) */
/* [r30] 选中态「金字 + 2px 细下划线」-> 「金色药丸 + 深红字」。
   WHY:对比度达标不等于看得见 —— 手机视距下 1-2px 的线与几个色阶的明度差基本不存在,
   要一眼看到得改整块的样子。t88 原本的金 #f0c22e 对比度 5.26 已达标,所以【不改色】,
   只改形态。深红字用既有 token --r-500,药丸上实测对比度 7.12。 */
.rm-tab-active{background:linear-gradient(180deg,#f6d878,#d9a326);
  box-shadow:0 3px 10px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.6)}   /* cuanmain cyan underline */
.rm-tab-active span{color:var(--r-500);font-weight:800}
/* tkb777 FIFA ribbon: 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;grid-template-columns:repeat(6,1fr);gap:10px;min-height:60vh;align-content:start}
/* tkb777 .game-provider-item-container: 4:5-ish tile, 1px white/30% border, radius 10, shadow 6/6/12 .25 */
.rm-tile{position:relative;aspect-ratio:4/5;border-radius:10px;overflow:hidden;background:var(--card);cursor:pointer;transition:transform .12s;
  box-shadow:var(--e-2)}
@media(hover:hover){.rm-tile:hover{transform:translateY(-3px)}}
/* category 切換淡入:只動 opacity+transform(GPU 合成,不 reflow),180ms ease-out,
   全部同時淡入無 stagger → 有 fade 但不拖慢內容出現 */
@keyframes rm-tile-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.rm-tile{animation:rm-tile-in .18s ease-out backwards}
@media(prefers-reduced-motion:reduce){.rm-tile{animation:none}}
/* lc/fish 橫圖(1.58:1):2 欄橫卡,圖 cover 鋪滿(圖=卡比例,不裁不變形) */
.rm-grid.rm-grid-wide{grid-template-columns:repeat(2,1fr)}
.rm-grid-wide .rm-tile{aspect-ratio:570/360;border-radius:6px;box-shadow:none;background:transparent}
.rm-grid-wide .rm-tile img,.rm-grid-wide .rm-tile img.rm-logo{object-fit:cover;padding:0}
.rm-tile img{width:100%;height:100%;object-fit:cover}
/* wide/square provider LOGOS (API now returns provider_logo strips e.g. 300x125) must not be
   cover-cropped into the 4:5 tile; portrait card art (hot/new 200x250) keeps full-bleed cover */
.rm-tile img.rm-logo{object-fit:contain;padding:14px 10px;border-radius:0;width:100%;height:100%}
.rm-tile.rm-game{aspect-ratio:3/4}
.rm-tile .rm-tile-name{position:absolute;left:0;right:0;bottom:0;padding:8px;font-size:12px;font-weight:600;
  background:linear-gradient(transparent,rgba(0,0,0,.85));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* game-list Back: identical to the tkb .back-nav pill (dark, bordered, bold white chevron) */
.rm-back{display:flex;align-items:center;gap:12px;background:#161616;color:#fff;font-weight:700;font-size:16px;
  border-radius:10px;padding:0 16px;height:42px;cursor:pointer;box-shadow:var(--e-2);
  border:1px solid var(--bd-2);margin-bottom:14px;width:max-content}
.rm-back:before{content:"";width:10px;height:10px;border-left:3px solid #fff;border-bottom:3px solid #fff;
  transform:rotate(45deg);flex:0 0 auto}
.rm-empty-cat{padding:48px 16px;text-align:center;color:#93a0c0;font-size:15px}
.rm-grid-msg{grid-column:1/-1;text-align:center;padding:40px;color:var(--muted)}

/* bottom nav (centered column, all widths) */
/* tkb777 .footer-container: space-evenly row, compact 52x52 items (radius 8), 27px icons, 11px/700 labels */

/* ===== lapdee mask icons (nav / category / sidebar) — single monochrome svg per icon,
   coloured via CSS background so selected state can use the lapdee gold gradient ===== */
.rm-ic{display:inline-block;flex:0 0 auto;background:rgba(255,255,255,.58);
  -webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.ic-home{--i:url(/assets/icons/home.svg)}
.ic-wallet{--i:url(/assets/icons/wallet.svg)}
.ic-reward{--i:url(/assets/icons/reward.svg)}
.ic-chat{--i:url(/assets/icons/chat.svg)}
.ic-slot{--i:url(/assets/icons/slot.svg)}
.ic-sport{--i:url(/assets/icons/sport.svg)}
.ic-lc{--i:url(/assets/icons/lc.svg)}
.ic-fish{--i:url(/assets/icons/fish.svg)}
.ic-sb-home{--i:url(/assets/icons/sb-home.svg)}
.ic-sb-notification{--i:url(/assets/icons/sb-notification.svg)}
.ic-sb-profile{--i:url(/assets/icons/sb-profile.svg)}
.ic-sb-bank{--i:url(/assets/icons/sb-bank.svg)}
.ic-sb-promotion{--i:url(/assets/icons/sb-promotion.svg)}
.ic-sb-referral{--i:url(/assets/icons/sb-referral.svg)}
.ic-sb-download{--i:url(/assets/icons/sb-download.svg)}
.ic-sb-translog{--i:url(/assets/icons/sb-translog.svg)}
.ic-sb-gameslog{--i:url(/assets/icons/sb-gameslog.svg)}
.ic-sb-contact{--i:url(/assets/icons/sb-contact.svg)}
.ic-sb-feedback{--i:url(/assets/icons/sb-feedback.svg)}
.ic-sb-logout{--i:url(/assets/icons/sb-logout.svg)}

#rm-cta-topup{background:var(--pa-deposit);color:var(--pa-deposit-fg);border:0}
.rm-btn-dep,.rm-side-topup,#rm-cta-topup,.rm-modal-submit.rm-green{position:relative;overflow:hidden}
.rm-btn-dep::after,.rm-side-topup::after,#rm-cta-topup::after,.rm-modal-submit.rm-green::after{content:"";position:absolute;top:0;left:-60%;width:38%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);animation:rm-shine 2.6s ease-in-out infinite;pointer-events:none}
@keyframes rm-shine{0%{left:-60%}55%{left:135%}100%{left:135%}}

/* iOS Safari fixed:bottom:0 在滑到底 rubber-band 時會跟著 viewport 彈 → 用 translateZ(0) 強 GPU compositing layer,重繪時位置抖動大幅減少
   (不套 html/body overscroll-behavior:none,避免傷到 Android Chrome 的 pull-to-refresh) */
.rm-bottomnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:100;background:var(--panel);min-height:64.8px;align-items:center;justify-content:space-evenly;
  padding:8px 3.2px calc(8px + env(safe-area-inset-bottom));transform:translateZ(0);-webkit-transform:translateZ(0);will-change:transform}
body{padding-bottom:calc(64.8px + env(safe-area-inset-bottom))}
/* [r32] 44x44 -> 自适应宽 x 52 高(铺满全宽后每项 ~90px);标签 8.8 -> 11px(全站最小字)。 */
.rm-bn-item{flex:1 1 0;min-width:0;max-width:96px;height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.4px;cursor:pointer;color:#fff;font-weight:800;font-size:11px;
  padding:4px 8px;margin:0;border-radius:12px;transition:background .15s;white-space:nowrap}
.rm-bn-item .rm-ic{width:22px;height:22px}
.rm-bn-lineico{width:27px;height:27px;object-fit:contain;flex:0 0 auto}
/* active item: lapdee gold pill + dark label/icon (tkb777 footer-selected-item) */
.rm-bn-active{color:#ffffff;background:linear-gradient(to right,#5f0010,#e11d34,#5f0010);font-weight:700}
.rm-bn-active .rm-ic{background:#ffffff}

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

/* footer */
/* [r11 2026-08-25] footer 缩小 15%:撑高度的每一项都乘 0.85(不是只砍 padding),
   这样字、logo、间距一起等比缩,不会变成「字一样大但挤在一起」。
   margin-top 30px 不动 —— 那是 footer **上方的空隙**,不是 footer 本身。
   🔴 .rm-brandmark 全站三颗(顶栏/侧栏/footer),这里只动下面那条 footer 专属的。 */
.rm-footer{margin-top:30px;padding:22.1px 4px 8.5px;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:8.5px;margin-bottom:10.2px}
.rm-footer-brand .rm-brandmark{height:34px}   /* 40 x0.85;只作用于 footer 那颗 */
.rm-footer-desc{font-size:12.5px;line-height:1.7;max-width:476px;margin:0 auto 11.9px}
.rm-footer-copy{font-size:12px;opacity:.7}

/* ===== responsive ===== */
@media(max-width:900px){
  .rm-topbar{padding:12px;gap:8px;min-height:79px}   /* match tkb header 79px exactly */
  .rm-brand{gap:8px}
  .rm-brandmark{height:54px}
  .rm-topbar-right{gap:8px}
  .rm-cta-btn{padding:14px}
}
/* grid columns follow tkb777's breakpoints: 6 / 5 / 4 / 3 at 891 / 890 / 686 / 600 */
@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:10px} }
@media(max-width:600px){ .rm-grid{grid-template-columns:repeat(3,1fr);gap:8px} }
/* narrow phones: shrink the wordmark + buttons so they all fit */
@media(max-width:520px){
  .rm-topbar{padding:11px 10px;gap:6px}
  .rm-topbar-right .rm-btn{width:78px;font-size:12px}
  .rm-brand{gap:6px}
  .rm-brandmark{height:45px}
  .rm-hamburger{width:34px;height:34px}
  .rm-topbar-right{gap:6px}
}
/* tiny foldables (Galaxy Fold ~344px): buttons stay uniform; shrink the wordmark to make room */
@media(max-width:384px){
  .rm-topbar{padding:10px 8px}
  .rm-brandmark{height:39px}
  .rm-hamburger{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 (tkb777) ===== */
@media(min-width:1280px){
  .rm-hamburger{display:none}
  .rm-bottomnav{display:none}
  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 like tkb (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;
    padding-left:max(300px, calc(300px + (100vw - 1400px)/2));
    padding-right:max(24px, calc((100vw - 1400px)/2))}
  .rm-topbar-left{position:absolute;left:30px;top:50%;transform:translateY(-50%)}
  .rm-search-top{display:none}   /* 桌面改用 .rm-filterrow 行內 search(靠右),不再用 header search */
  .rm-topbar-right{margin-left:auto}   /* search-top 沒了→按鈕仍靠右(topbar-left 是 absolute 不佔 flex 位) */
  /* tkb desktop sidebar (probed 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 .rm-ic,.rm-menu-item .rm-flag{width:18px;height:18px}
  .rm-body{display:block;margin-left:300px}
  .rm-content{max-width:1100px;margin:0 auto;padding:16px 0 48px}
  .rm-grid{grid-template-columns:repeat(6,1fr)}
  .rm-tabs{justify-content:flex-start}
  .rm-authpage{margin:0 6% 0 auto}  /* login/register form sits right of centre like tkb777 */
  /* 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}
}

/* ===== auth as full page (tkb777 style: 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 (tkb777 centres it) */
.rm-authpage.rm-auth-login{padding-top:9vh;padding-top:9svh}
/* ==== deep-link auth pre-paint 骨架 =====================================================
   消除「居中小 spinner -> 整块登录卡」的内容突变(Gerald 报的「跳一下」)。骨架 = 登录卡的
   形状/位置:同一 #rm-authpage 容器、同 .rm-authcard 外框、同 9svh 顶距。app.js renderForm
   把真内容填进同一容器、openPage 移除 .rm-preskel-on -> 视觉是「骨架块->真字段」平滑填充,
   卡顶边同一 y、只往下长,不再有「小圈->大卡」的跳。 */
body.rm-preskel-on #rm-authpage{display:block;padding-top:9vh;padding-top:9svh}
.rm-skel-title,.rm-skel-field,.rm-skel-chip,.rm-skel-foot{background:rgba(255,255,255,.06);border-radius:10px}
.rm-skel-title{width:120px;height:26px;margin:0 auto 18px}
.rm-skel-field{height:48px;margin-bottom:8px}
.rm-skel-row{display:flex;justify-content:space-between;align-items:center;margin:6px 2px 14px}
.rm-skel-chip{height:16px}
.rm-skel-chip:first-child{width:130px}.rm-skel-chip:last-child{width:96px}
.rm-skel-btn{height:48px;margin-top:8px;border-radius:10px;background:rgba(63,70,84,.16)}
.rm-skel-foot{height:16px;width:180px;margin:14px auto 0}
/* ==== 首页 <-> 登录/注册 视图切换的淡入 ==================================================
   Gerald 真机录屏证实:他从首页点 Masuk/Daftar 进入,openPage 的 display 硬切让满屏 banner
   「啪」地换成深色登录卡 = 他说的「跳一下」。给「将要显示的视图」加 160ms opacity 淡入变渐现。
   opacity animation 走合成层、不触发 layout,不引入位移、不拖慢感知。
   ⚠️ 仅「从首页/正常态进入」时挂(openPage wasOpen=false);deep-link /login 刷新 wasOpen=true
      不挂 -> 骨架无缝填充方案保持不变。反向(回首页)给 .rm-content 挂同一个淡入。 */
.rm-fadein{animation:rm-authfade .16s ease both}
@keyframes rm-authfade{from{opacity:0}to{opacity:1}}
/* #rm-marquee 加进这条既有规则 = 跑马灯只在首页出现。
   WHY 挂在 body.rm-authopen 而不是在每个 render 函数里各写一遍:openPage()/closeModal()
   是 SPA 唯一的切页出入口,它们只做一件事就是切这个 class —— 挂在这里,以后**新增页面
   自动生效**,不会像逐个 render 写那样必然漏掉。
   回首页时 class 一摘,显示权就交还给 fillMarquee() 的 inline style:BO 文案为空时它本来
   就是 display:none,所以「回首页」不会把一条空跑马灯放出来(元素在 index.html 里的初始
   状态也是 display:none,刷新直接进内页也不会闪一下)。 */
/* 内页隐藏 marquee 时,顺手把它的动画也暂停 —— display:none 理论上已不渲染,
   但加这条是双保险,确保任何情况下隐藏的 track 都不会有动画在空转。 */
body.rm-authopen .rm-marquee-track{animation-play-state:paused}
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-provwrap,body.rm-authopen .rm-slotfilter,body.rm-authopen .rm-filterrow,body.rm-authopen .rm-content .rm-search,
body.rm-authopen #rm-grid,body.rm-authopen .rm-back,body.rm-authopen .rm-footer,body.rm-authopen .maha-ultra-design{display:none!important}
.rm-authback{display:inline-flex;align-items:center;gap:6px;color:#8b93a7;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}
/* tkb777 .loginMobileTf-input-container: bg #161616, 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 var(--bd-2);border-radius:10px;padding:0 12px;height:52px;margin-bottom:14px;box-shadow:var(--e-2)}
.rm-field img,.rm-field-ico{width:42px;height:42px;object-fit:contain;opacity:1;flex:0 0 auto}
/* tkb error frame (--loginCommonTf-err-border: 1px solid #c7240f); focus (#b0001e) 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{border-color:var(--gold)}
.rm-field.rm-err:focus-within{border-color:#e0524d}
.rm-field .rm-prefix{color:#fff;font-weight:400;font-size:20px;padding-right:0}  /* tkb: 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}
/* tkb bankDropDown 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 (tkb) */
.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:#8b93a7;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:#191919;border:1px solid var(--bd-2);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:#191919;z-index:2}
.rm-bankdd-search input{width:100%;background:#141414;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:var(--gold)}
.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}
@media(hover:hover){.rm-bankdd-opt:hover{background:rgba(255,255,255,.07)}}
.rm-bankdd-opt span{font-size:15px;font-weight:500;color:#eef0f6}
/* 內文 span(banx bank name)拿剩餘寬,pill 是另一個 span 但走 flex:0(見 .rm-wd-pill)不搶寬 */
.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: tkb 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:transparent;border:1.5px solid var(--pa-bronze-bd);color:var(--pa-bronze-fg);border-radius:9px;padding:9px 16px;font-weight:700;font-size:14px;cursor:pointer;font-family:inherit;box-shadow:var(--e-1)}
/* 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:#161616;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 #8b93a7;border-bottom:2px solid #8b93a7;transform:translateY(-70%) rotate(45deg);pointer-events:none}
.rm-field input::placeholder{color:#6b7180}
.rm-field .rm-eye{cursor:pointer;opacity:1;width:42px;height:42px;object-fit:contain;flex:0 0 auto}
/* tkb auth submit (btnV2-r10): h 42 — deliberately SMALLER than the 52px input fields */
.rm-modal-submit{width:100%;height:44px;border:0;border-radius:10px;background:var(--pa-primary);color:var(--pa-primary-fg);font-weight:700;font-size:18px;cursor:pointer;margin-top:8px;font-family:inherit;box-shadow:var(--e-2)}
.rm-modal-submit.rm-green{background:var(--pa-deposit);color:var(--pa-deposit-fg);border:0}
.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, tkb777 style */
.rm-field-err{color:#e0250c;font-size:13px;font-weight:500;margin:-8px 0 12px 4px;min-height:0}
.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}
/* tkb777: 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}
/* tkb777 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 var(--bd-2);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:1.5px solid var(--pa-gold-bd);
  border-radius:10px;background:transparent;color:var(--pa-gold-fg);font-weight:700;font-size:13px;cursor:pointer;font-family:inherit;white-space:nowrap}
/* ---- C 單卡集中式 Register/Login:scoped 到 .rm-authcard,不動 deposit/withdraw 共用的 .rm-field ---- */
.rm-authcard{max-width:420px;margin:0 auto;background:#161616;border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:22px 20px;box-shadow:0 14px 40px rgba(0,0,0,.45)}
.rm-authcard .rm-modal-title{font-size:22px;margin:0 0 18px;text-align:center}
/* body.rm-authopen 前綴:壓過既有 body.rm-authopen .rm-field(0,2,1) 的高度/間距 */
body.rm-authopen .rm-authcard .rm-field{height:44px;margin-bottom:10px}
body.rm-authopen .rm-authcard .rm-modal-submit{height:46px;margin-top:6px}
.rm-authcard .rm-field{gap:8px;padding:0 12px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);box-shadow:none}
.rm-authcard .rm-field:focus-within{border-color:rgba(122,139,243,.75);background:rgba(255,255,255,.06)}
.rm-authcard .rm-field img,.rm-authcard .rm-field-ico,.rm-authcard .rm-field .rm-eye{width:22px;height:22px}
.rm-authcard .rm-field input,.rm-authcard .rm-field .rm-prefix,.rm-authcard .rm-field-select select{font-size:15px}
.rm-form-div{height:1px;background:rgba(255,255,255,.08);margin:2px 2px 14px}
.rm-authcard .rm-modal-submit{box-shadow:none}
.rm-authcard .rm-login-opts{margin:2px 2px 14px}
.rm-authcard .rm-modal-switch{margin-top:14px;min-height:auto;padding:11px 11px 11px 16px;border-color:rgba(255,255,255,.08);background:rgba(255,255,255,.02)}
.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(63,70,84,.35);border-radius:14px;padding:15px 18px;margin-bottom:14px;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.rm-line-name{display:flex;align-items:center;gap:11px;font-weight:700;font-size:16px;color:#fff}
/* Contact 頁 LINE brand icon(綠底 SVG),用專屬 class 避開 line 846 提款頁 .rm-line-ico 白圓底樣式 */
.rm-lineico-brand{display:inline-flex;width:30px;height:30px;flex:0 0 auto}
.rm-lineico-brand svg{width:100%;height:100%;display:block}
/* 金色主題按鈕,對齊站上其他 CTA(pa-primary) */
.rm-line-btn{background:var(--pa-primary);color:var(--pa-primary-fg);font-weight:800;text-decoration:none;padding:11px 24px;border-radius:10px;white-space:nowrap;cursor:pointer;border:1px solid #5f0010;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.rm-line-btn:active{filter:brightness(.9)}
/* ---- Promotion cards ---- */
/* Rewards list card:固定高 260px、圖撐滿、底部 dark overlay 壓 title(不因 title 長度變高)+ 金色 pill/button + shimmer */
.rm-rw-list{display:flex;flex-direction:column;gap:14px}
.rm-rw-card{position:relative;height:260px;border-radius:14px;overflow:hidden;background:#0d0d0d;border:1px solid rgba(63,70,84,.35);box-shadow:0 6px 18px rgba(0,0,0,.4)}
.rm-rw-img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center top;display:block}
.rm-rw-shade{position:absolute;left:0;right:0;bottom:0;height:55%;background:linear-gradient(180deg,transparent 0%,rgba(10,10,13,.65) 45%,rgba(10,10,13,.96) 100%);pointer-events:none}
.rm-rw-shine{position:absolute;top:0;left:-40%;width:35%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,213,79,.28),transparent);transform:skewX(-18deg);animation:rm-rw-shine 4s ease-in-out infinite;pointer-events:none}
@keyframes rm-rw-shine{0%{transform:translateX(-100%) skewX(-18deg)}100%{transform:translateX(340%) skewX(-18deg)}}
@media(prefers-reduced-motion:reduce){.rm-rw-shine{display:none}}
/* Pill:小方角 chip,金字金邊 dark 底;rebate/cashback 不同 accent */
.rm-rw-pill{position:absolute;top:12px;right:12px;background:rgba(10,10,13,.75);color:var(--pa-gold-fg);border:1px solid rgba(255,213,79,.55);font-size:10px;font-weight:800;padding:5px 10px;border-radius:4px;letter-spacing:1.5px;text-transform:uppercase;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.rm-rw-pill--cashback{color:#ffd54f;border-color:rgba(255,213,79,.7)}
/* Title:底部左側 overlay,固定寬 fit for 2 lines,不擠壓 button */
.rm-rw-title{position:absolute;left:16px;right:120px;bottom:20px;font-size:18px;font-weight:800;color:#fff;line-height:1.25;text-shadow:0 2px 8px rgba(0,0,0,.6);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Learn More:金漸變小 chip button */
.rm-rw-learn{position:absolute;right:14px;bottom:14px;background:var(--pa-primary);color:var(--pa-primary-fg);border:1px solid #5f0010;border-radius:6px;padding:7px 12px;font-weight:800;font-size:11px;letter-spacing:.5px;cursor:pointer;font-family:inherit;white-space:nowrap;text-transform:uppercase;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.rm-rw-learn:active{transform:scale(.96)}
/* Rewards detail:hero(image + pill 右上 + ← →)+ premium 卡片(eyebrow / h1 金渐变 / sub / 2x2 grid / rules card / brand)+ dots + GO */
.rm-rwd-hero{position:relative;height:220px;border-radius:14px;overflow:hidden;margin-bottom:16px;background:#0d0d0d}
.rm-rwd-img{width:100%;height:100%;object-fit:contain;object-position:center;display:block}
.rm-rwd-nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:8px;background:rgba(10,10,13,.65);color:var(--pa-gold-fg);border:1px solid rgba(255,213,79,.4);font-size:20px;font-weight:800;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;padding:0;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.rm-rwd-prev{left:12px}
.rm-rwd-next{right:12px}
.rm-rwd-nav:active{transform:translateY(-50%) scale(.94)}
/* Pill 移到右上,配色跟 list card 一致 */
.rm-rwd-pill{position:absolute;top:12px;right:12px;background:rgba(10,10,13,.78);color:var(--pa-gold-fg);border:1px solid rgba(255,213,79,.55);font-size:10px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;padding:5px 10px;border-radius:4px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
/* Premium card:圆角深底 + 顶部液体金 4px 装饰 + 内部三段(head / grid / rules) */
.rm-rwd-card{position:relative;background:#0d0d0d;border:1px solid #101010;border-radius:24px;padding:22px 18px;box-shadow:0 12px 40px rgba(0,0,0,.6),inset 0 0 20px rgba(63,70,84,.05);overflow:hidden;margin-bottom:16px}
.rm-rwd-card::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,transparent,#ffd54f,#ffe9a8,#ffd54f,transparent)}
.rm-rwd-head{text-align:center;margin-bottom:24px}
.rm-rwd-eyebrow{color:#888;font-size:11px;letter-spacing:3px;text-transform:uppercase;margin-bottom:10px}
.rm-rwd-h1{font-size:26px;font-weight:900;margin:0;background:linear-gradient(180deg,#ffe9a8 0%,#e0a800 100%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 6px 16px rgba(255,213,79,.20));line-height:1.2}
.rm-rwd-sub{color:#ffd54f;font-weight:700;font-size:12px;letter-spacing:.8px;margin-top:10px}
.rm-rwd-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:24px}
.rm-rwd-gcell{background:linear-gradient(145deg,#111,#0d0d0d);border:1px solid #101010;padding:14px 10px;border-radius:14px;text-align:center;display:flex;flex-direction:column;gap:6px}
.rm-rwd-glbl{font-size:10px;color:#666;text-transform:uppercase;letter-spacing:1px}
.rm-rwd-gval{font-size:13px;color:#e0e0e0;font-weight:800}
.rm-rwd-gval.gold{color:#ffd54f}
.rm-rwd-rules{background:#0d0d0d;border-radius:16px;padding:18px;border:1px solid #111}
.rm-rwd-desc{font-size:12.5px;color:#ccc;line-height:1.8;text-align:center;margin-bottom:18px}
.rm-rwd-rulesT{color:#ffd54f;font-size:14px;font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:10px}
.rm-rwd-rulesT::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,#14171d,transparent)}
.rm-rwd-rulist{list-style:none;padding:0;margin:0}
.rm-rwd-rulist li{color:#888;font-size:12.5px;line-height:1.75;margin-bottom:10px;position:relative;padding-left:18px}
.rm-rwd-rulist li:last-child{margin-bottom:0}
.rm-rwd-rulist li::before{content:"\2726";position:absolute;left:0;top:1px;color:#ffd54f;font-size:10px}
.rm-rwd-gold{color:#ffd54f;font-weight:600}
.rm-rwd-brand{text-align:center;margin-top:20px;font-size:9px;color:#333;letter-spacing:3px}
.rm-rwd-dots{display:flex;justify-content:center;gap:6px;margin-bottom:18px}
.rm-rwd-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.25)}
.rm-rwd-dot.on{background:var(--pa-gold-fg);width:20px;border-radius:100px}
.rm-rwd-go{margin-top:0}
/* ---- Affiliate tier card ---- */
.rm-aff-card{background:var(--card);border-radius:16px;padding:26px 20px;text-align:center}
.rm-aff-h1{color:var(--green1);font-size:24px;font-weight:800}
.rm-aff-h2{color:var(--muted);font-size:14px;margin-bottom:22px}
.rm-aff-you{display:inline-block;background:var(--card2);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:8px 30px;font-weight:700;margin-bottom:4px}
.rm-aff-tiers{display:flex;flex-direction:column;gap:10px;max-width:300px;margin:14px auto 20px}
.rm-aff-tier{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,var(--green1),var(--green2));color:#06371f;border-radius:10px;padding:12px 22px;font-weight:800;font-size:15px}
.rm-aff-unlimited{background:linear-gradient(135deg,var(--green1),var(--green2));color:#06371f;font-weight:800;border-radius:12px;padding:16px;font-size:16px}
.rm-aff-card{margin-bottom:16px}
.rm-aff-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.rm-aff-tab{background:var(--card2);color:#cfd3dc;border-radius:10px;padding:9px 18px;font-weight:700;font-size:13px;cursor:pointer}
/* .rm-aff-tab.on 舊 dead code:affiliate 已下線,樣式移除 */
.rm-aff-banner{height:130px;border-radius:12px;display:flex;align-items:flex-end;padding:16px;font-size:24px;font-weight:800;color:#fff;line-height:1.15;margin-bottom:16px}
.rm-aff-green-title{color:var(--green1);font-size:22px;font-weight:800;text-align:center;line-height:1.25;margin:4px 0 12px}
.rm-aff-dd-desc{text-align:center;color:#c7cbd6;font-size:14px;margin:0 0 8px}
.rm-aff-calc{text-align:center;font-size:18px;font-weight:700}
.rm-aff-calc b{color:var(--green1)}
.rm-aff-how{color:var(--green1);font-size:22px;font-weight:800;text-align:center;margin-bottom:18px}
.rm-aff-step{display:flex;align-items:flex-start;gap:16px;margin-bottom:16px}
.rm-aff-num{flex:0 0 auto;font-size:30px;font-weight:800;font-style:italic;color:var(--green1);min-width:26px;border-left:3px solid var(--green1);padding-left:6px;line-height:1}
.rm-aff-step p{margin:0;color:#dfe2ea;font-size:14px;line-height:1.5}
.rm-aff-turnover{background:var(--card);border-radius:14px;padding:18px;text-align:center}
.rm-aff-turn-title{color:var(--green1);font-weight:800;font-size:15px;margin-bottom:6px}
.rm-aff-turnover p{margin:0;color:var(--muted);font-size:12px;line-height:1.6}
/* logged-in wallet widget */
.rm-wallet{display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,#3d000a,#620c10,#620c10);color:#fff;font-weight:700;
  padding:9px 16px;border-radius:12px;cursor:pointer;white-space:nowrap;box-shadow:var(--e-2)}
.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,#3d000a,#620c10);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 = tkb btnV2 pair: bright flat green + white text / white + black text */
.rm-btn-dep{background:var(--pa-deposit);color:var(--pa-deposit-fg);border:0}
.rm-btn-wd{background:transparent;color:var(--pa-bronze-fg);border:1.5px solid var(--pa-bronze-bd)}
.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}
/* tkb 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{background:var(--pa-deposit);color:var(--pa-deposit-fg);border:0}
.rm-side-wd{background:transparent;color:var(--pa-bronze-fg);border:1.5px solid var(--pa-bronze-bd)}
/* login welcome popup */
.rm-pop-ov{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:900;display:flex;align-items:center;justify-content:center;padding:20px}  /* above the game layer (z800) */
/* Live Chat 獨立頁:全屏 iframe 裝 assets/livechat.html(純前端 mock,零外部) */
.rm-page-chip.rm-lc-titlechip{font-size:8px;height:26px;padding:0 12px;border-radius:8px}   /* Live Chat 標題字縮 50%(16→8);複合選擇器蓋過 .rm-page-chip */
.rm-lc-page{margin-top:8px}
/* iframe 高度算在 dephead 與固定底部 nav(81px)之間,讓假聊天輸入框完整露出不被 footer 擋 */
.rm-lc-pageframe{width:100%;height:calc(100dvh - 220px);min-height:340px;border:0;display:block;background:#121212;border-radius:14px;overflow:hidden}
.rm-pop{position:relative;background:#181818;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:#8b93a7;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,#620c10,#620c10);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}
/* BO popup 富文本容器（getSiteConfig.popup）：深色卡片，跟 .rm-alert / .rm-promo-content 同一套视觉 */
.rm-entrypop-body{background:#202020;border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:20px;color:#cfd6e4;font-size:14px;line-height:1.7;max-height:70vh;overflow:auto;word-break:break-word}
.rm-entrypop-body img{width:100%;height:auto;border-radius:10px;display:block;margin:8px 0}
.rm-entrypop-body a{color:#ffdf7a;word-break:break-all}
.rm-entrypop-body strong,.rm-entrypop-body b{color:#ffdf7a}
.rm-entrypop-body ol,.rm-entrypop-body ul{padding-left:20px;margin:8px 0}
/* error alert popup (tkb777 style): dark rounded card + orange-gradient Ok button */
.rm-alert{background:#202020;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}
.rm-alert-ok{width:100%;height:50px;border:0;border-radius:12px;background:var(--pa-primary);color:var(--pa-primary-fg);font-weight:800;font-size:17px;cursor:pointer;font-family:inherit}
/* confirm variant (tkb): blue-gradient Ok + underlined Cancel below */
.rm-confirm-ok{background:var(--pa-primary);color:var(--pa-primary-fg);border:1px solid #5f0010}
.rm-confirm-cancel{margin-top:16px;text-align:center;color:var(--pa-cancel-fg);font-size:15px;text-decoration:underline;cursor:pointer}
/* ---- withdraw (verified bank, tkb layout) ---- */
.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}
.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:var(--pa-primary);color:var(--pa-primary-fg);border:1px solid #5f0010}
.rm-wd-confirm:disabled{opacity:.55;cursor:default}
/* ===== in-page game view (tkb style): fullscreen iframe + "< name ... ID" top bar ===== */
#rm-gamewrap{position:fixed;inset:0;z-index:800;background:#0d0d0d;display:flex;flex-direction:column}
.rm-gametop{display:flex;align-items:center;gap:12px;height:46px;padding:0 14px;background:#161616;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(13,13,13,.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,#ffdf7a,#f0c22e)}
.rm-spinner span:nth-child(3){animation-delay:.32s;background:linear-gradient(135deg,#e11d34,#620c10)}
@keyframes rm-bounce{0%,80%,100%{transform:scale(.4);opacity:.5}40%{transform:scale(1);opacity:1}}
/* header wallet pill + deposit icon (logged in) — tkb .wallet-balance-container:
   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:34px;background:var(--panel);color:#ffd54f;border-radius:10px;padding:11px 14px;cursor:pointer;
  white-space:nowrap;font-weight:700;width:auto;min-width:96px;flex-shrink:0;height:42px;justify-content:flex-start;
  box-shadow:inset 0 0 0 1px var(--r-500),var(--e-2);overflow:hidden}
.rm-wpill-ico{width:20px;height:20px;flex:0 0 auto;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat;background:linear-gradient(180deg,#ffd54f,#e0a800)}
.rm-wpill .rm-bal-amt{font-size:11px;font-weight:700}   /* 原 14px -> 11px(Gerald 2026-07-23);字变小=右区更宽松=能完整显示的余额位数变多 */
.rm-hd-noti{position:relative;width:42px;height:42px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:10px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--r-500),var(--e-2)}
.rm-hd-noti-ic{width:22px;height:22px;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat;background:linear-gradient(180deg,#ffd54f,#e0a800)}
.rm-hd-noti-badge{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:#ff2d55;color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;line-height:1}
.rm-noti-c{color:var(--muted);font-size:13px;margin:4px 0;line-height:1.4}
/* tkb .fund-button-container: white rounded box (r10, 5px pad) + 32px dark $⊕ icon */
.rm-depicon{width:42px;height:42px;border-radius:10px;background:var(--pa-deposit);border:0;padding:5px;
  box-shadow:var(--e-1);
  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 (tkb777) */
.rm-cta-wbtn{background:transparent;color:var(--pa-bronze-fg);border:1.5px solid var(--pa-bronze-bd)}
.rm-depicon:active{transform:translateY(1px)}

/* ── 登入态 topbar:存款按钮在任何宽度都必须完整可见可点 ──────────────────────
   🔴 那是入金入口,被切掉等于挡住收钱。
   BUG(2026-07-23 实测):.rm-wpill 不可压缩(没有 min-width:0),而且图标与金额之间
   有 34px 的展示型 gap。余额一长,pill 就把存款按钮整个顶出屏幕 —— 320px 下余额只要
   >= 50.000 IDR 按钮就被切,>= 10.098.400 时完全在屏外(right=365 > vw=320)。
   topbar 又不横向滚,所以按钮是真的**够不着**,不是滑一下就能看到。
   修法按「先回收无用空间,再谈牺牲信息」的顺序:
     ① 存款/铃铛 flex:0 0 auto —— 永不压缩、永不被挤出(硬性要求)
     ② 只让钱包 pill 让位(flex:0 1 auto + min-width:0)
     ③ 窄屏收掉那个 34px 展示型 gap 与多余内距 —— 这一步就够正常余额完整显示
     ④ 金额省略号只作**最后保险**:极端长度(十亿级)才会截断。
        WHY 不一上来就用省略号:余额是玩家最关心的数字,能完整显示就不该截。 */
.rm-topbar-right.rm-logged{min-width:0}
.rm-topbar-right.rm-logged .rm-hd-noti,
.rm-topbar-right.rm-logged .rm-depicon{flex:0 0 auto}
.rm-topbar-right.rm-logged .rm-wpill{flex:0 1 auto;min-width:0}
.rm-wpill .rm-bal-amt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:430px){
  /* 34px 的 gap 是为宽屏的 tkb 观感留的,窄屏纯属浪费 —— 收回来就是存款按钮的活路 */
  .rm-wpill{gap:8px;padding:11px 10px}
  .rm-topbar-right.rm-logged{gap:6px}
}
/* <=360px:右区实测只有 179px,而 铃铛42 + pill + 存款38 需要 210px —— 缺 31px。
   按「先收无用空间、再缩非关键元素、最后才动金额字号」的顺序继续回收,
   目的是让常见余额(百万级)能完整显示,而不是一上来就打省略号。
   铃铛是通知入口,优先级低于余额可读性与存款可点,所以它先让。 */
@media(max-width:360px){
  .rm-topbar-right.rm-logged{gap:5px}
  .rm-topbar-right.rm-logged .rm-hd-noti{width:34px;height:34px}
  .rm-wpill{gap:6px;padding:9px 8px}
  .rm-wpill-ico{width:16px;height:16px}
  .rm-wpill .rm-bal-amt{font-size:10px}   /* 原 13px */
}
/* wallet page */
/* tkb wallet card: labels above/below the amount are plain WHITE (not muted), amount has no forced decimals */
/* A3 金屬邊+ shimmer + 品牌 logo 背景大水印(董事長 2026-07-13 選中) */
.rm-wallet-card{position:relative;overflow:hidden;padding:22px;border-radius:16px;border:2px solid transparent;background:linear-gradient(#101010,#101010) padding-box,linear-gradient(135deg,#e11d34,#5f0010,#e11d34) border-box;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.rm-wallet-title{font-weight:700;font-size:13px;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:44px;color:var(--pa-gold-fg)}
.rm-wallet-lbl{color:var(--muted);font-size:14px}
.rm-wallet-amt{font-size:36px;font-weight:800;margin:4px 0 4px;letter-spacing:-.5px;background:linear-gradient(90deg,#ffd54f 20%,#fff3c4 50%,#c79a16 80%);-webkit-background-clip:text;background-clip:text;color:transparent}
.rm-wallet-wd{color:var(--muted);font-size:12px}
.rm-wallet-wm{position:absolute;right:-20px;top:50%;transform:translateY(-50%) rotate(-14deg);opacity:.22;width:290px;height:auto;pointer-events:none;user-select:none}
.rm-wallet-card::after{content:"";position:absolute;top:0;left:-40%;width:35%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg);animation:rm-wallet-shine 3.5s ease-in-out infinite;pointer-events:none}
@keyframes rm-wallet-shine{0%{transform:translateX(-100%) skewX(-18deg)}100%{transform:translateX(340%) skewX(-18deg)}}
@media(prefers-reduced-motion:reduce){.rm-wallet-card::after{animation:none;display:none}}
.rm-wallet-actions{display:flex;gap:16px}
.rm-wallet-actions .rm-btn{flex:1;height:52px;padding:0;font-size:20px;font-weight:700;border-radius:16px;box-shadow:var(--e-2)}
.rm-noti-t{font-weight:700;font-size:14px}
.rm-noti-d{color:var(--muted);font-size:12px;margin-top:4px}
/* ===== member pages (deposit / withdraw / profile / history) ===== */
/* tkb deposit head: white "< Back" pill + dark title chip */
.rm-dephead{display:flex;gap:14px;margin:6px 0 18px}
/* tkb .back-nav-back-btn-container: dark #161616 pill, 0.4px white/30% border, shadow 6/6/14,
   h42, pad 0 16, white 700 label — NOT a white pill */
.rm-back-pill{display:flex;align-items:center;gap:12px;background:#161616;color:#fff;font-weight:700;font-size:16px;
  border-radius:10px;padding:0 16px;height:42px;cursor:pointer;box-shadow:var(--e-2);border:1px solid var(--bd-2)}
/* tkb navBack: 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}
.rm-page-chip{display:flex;align-items:center;background:#202020;color:#cfd3dc;font-weight:700;font-size:16px;border-radius:12px;padding:0 20px;height:46px}
/* tkb 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)}
/* tkb 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 var(--bd-2);
  display:flex;align-items:center;font-weight:700;font-size:14px;color:#fff;cursor:pointer;background:transparent}
.rm-method.on{background:var(--pa-primary);color:var(--pa-primary-fg);border-color:#5f0010}
.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}
/* ---- 旧模板版式的存款页: 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 var(--bd-2);background:transparent;cursor:pointer}
.rm-chan.on{background:var(--pa-primary);color:var(--pa-primary-fg);border-color:#5f0010}
.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:linear-gradient(135deg,var(--green1),var(--green2));color:#06371f}
/* tkb member cards: visible 1px white/30% border + shadow */
.rm-mcard{background:var(--card);border:1px solid var(--bd-2);border-radius:10px;box-shadow:var(--e-2);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 (tkb777 style) */
.rm-amt-box{display:flex;align-items:center;gap:10px;background:#141414;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:#6b7180}
.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-err{color:#ff6b6b;font-size:13px;min-height:16px;margin:-4px 0 8px;padding:0 2px;font-weight:500}
.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:linear-gradient(135deg,var(--green1),var(--green2));color:#06371f;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-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:0 0 14px}
.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-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:#202020;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 tkb 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:#3d000a;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(63,70,84,.18);color:#ffd54f}
.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 = tkb: 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-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: tkb desktop sidebar entrance — slides in from the left on every page load
   (tkb .side-menu-container: 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:#ffd54f;animation:rmSpin .7s linear infinite}
.rm-cap-check.ok{border-color:#ffd54f;background:#ffd54f}
.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 — tkb /profile 版面:頭像卡 + 3 顆漸層選單按鈕(取色自 tkb 截圖) */
.rm-pcard{background:var(--card);border:1px solid var(--bd-2);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:var(--e-2)}
.rm-gbtn-bank{background:var(--pa-primary);color:var(--pa-primary-fg);border:1px solid #5f0010}
.rm-gbtn-pass{background:transparent;color:var(--pa-gold-fg);border:1.5px solid var(--pa-gold-bd)}

/* v180 add-bank form — tkb /registerBank 同款:內嵌 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 帳號欄照tkb:icon縮小靠左、placeholder字縮小且置中 */
.rm-accfield{position:relative}
.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 標題遠一點,tkb 約26px) */
.rm-accfield input{font-size:18px}
#rm-rb-bkt{margin-top:26px}

/* v183 deposit入口綁卡頁:tkb 渠道 tabs(Auto/Bank QR,右上綠點,active=白底黑字) */
/* flex-wrap 不是装饰:三个 tab(QRIS / E-Wallet / Transfer Bank)原本 nowrap 且无 scroll,
   窄屏放不下就直接**溢出圆角边框外**(Gerald 截图里 Transfer Bank 连粉点都在框外)。
   WHY 换行而不是横向滚动:付款方式是主选项,藏进一个玩家不知道能滑的区域会掉转化 ——
   与 Buy Bonus 那次同一个判断。row-gap 让换行后两行之间有呼吸,不会糊在一起。 */
.rm-chantabs{background:var(--card);border:1px solid var(--bd-2);border-radius:12px;padding:10px;display:flex;flex-wrap:wrap;gap:12px;row-gap:8px;margin-top:26px;box-shadow:var(--e-2)}
.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:var(--pa-primary);color:var(--pa-primary-fg);border-color:#5f0010}
.rm-chandot{position:absolute;top:5px;right:6px;width:7px;height:7px;border-radius:50%;background:#ffd54f}
.rm-chantabs+#rm-rb-bkt{margin-top:22px}
/* 钱包页「最近交易」区块 */
.rm-wtxn{margin-top:18px}
.rm-wtxn-hd{font-size:14px;font-weight:800;color:#fff;margin:0 0 8px 2px}
.rm-wtxn .rm-hlist{min-height:44px}
.rm-wtxn-all{width:100%;margin-top:10px}

/* v184 withdraw(tkb):%快選一排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卡片列照tkb靠左對齊(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:墊白圓+轉黑=tkb樣式 */

/* v189 deposit有卡頁照tkb: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:#8b93a7;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 縮小(tkb Auto大小)、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 var(--bd-2);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:#3d000a}
/* deposit method tabs (Bank Transfer / Bank QR): tkb-style 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 白色圓角框(tkb) */
.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:#ffd54f}

/* 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:#ffd54f;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,#ffd54f,#e0a800);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 (tkb777-style 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}

/* v199 付款iframe拉高到內容放得下(Paynex頁約1000-1100px)→iframe不內捲,醜滾輪消失;整頁滾動(頁面滾輪本來就隱藏) */
.rm-payframe{height:1150px;min-height:1150px}

/* 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:940px;min-height:940px}/* QR page centres in 100vh; 940 fits populated page (DOWNLOAD btn visible 320-430), was 1460 = huge gap */

/* v201 首頁 Bonus 小方磚(同分類磚樣式,獨立class避開.rm-tab全域wiring) */
.rm-bonusrow{margin-bottom:14px}
.rm-bonus-tile{position:relative;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 var(--bd-2);cursor:pointer}
.rm-bonus-tile img{width:26px;height:26px;object-fit:contain}
.rm-bonus-tile span{font-size:11px;color:#fff;font-weight:700;white-space:nowrap}

/* v205 Bonus 頁:Welcome 卡 + Login Bonus 金框(3天freespin,今天亮/其他鎖) */
.rm-bonus-card{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--bd-2);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:#ffd54f;font-size:15px}
.rm-bonus-claim{background:var(--pa-primary);color:var(--pa-primary-fg);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 #ffd54f;border-radius:16px;padding:14px 12px 16px;background:linear-gradient(180deg,rgba(255,213,79,.10),rgba(255,213,79,.02));box-shadow:0 0 16px rgba(255,213,79,.18)}
.rm-bonus-gtitle{font-size:15px;font-weight:700;color:#ffd54f;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:#ffd54f;cursor:pointer;box-shadow:0 0 10px rgba(255,213,79,.35)}
.rm-bonus-day:not(.on){opacity:.45}
.rm-bonus-dayno{font-size:12px;font-weight:700;color:#ffd54f}
.rm-bonus-gname{font-size:11px;color:#fff;font-weight:600;line-height:1.2}
.rm-bonus-go{background:#ffd54f;color:#161616;font-size:11px;font-weight:800;border-radius:8px;padding:5px 6px;width:100%}
.rm-bonus-lock{font-size:11px;color:var(--muted)}

/* v206 freespin介紹層(Tom線框:< 遊戲名+ID / Bonus Name / 內容框 / Play·Cancel) */
.rm-bfs-top{display:flex;align-items:center;gap:12px;background:var(--card);border-radius:12px;padding:12px 14px;margin:4px 0 16px}
.rm-bfs-back{font-size:26px;font-weight:700;color:#fff;cursor:pointer;line-height:1;padding:0 4px}
.rm-bfs-name{font-size:17px;color:#fff;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rm-bfs-bonusname{font-size:14px;font-weight:700;color:#ffd54f;margin:0 0 12px}
.rm-bfs-box{border:1px solid var(--bd-2);border-radius:14px;background:var(--card);padding:20px 16px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;margin-bottom:18px}
.rm-bfs-thumb{width:130px;height:130px;object-fit:cover;border-radius:14px}
.rm-bfs-title{font-size:18px;font-weight:700;color:#fff}
.rm-bfs-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.rm-bfs-list li{font-size:13px;color:var(--muted)}
.rm-bfs-list li::before{content:"✓ ";color:#ffd54f;font-weight:700}
.rm-bfs-btns{display:flex;gap:14px}
.rm-bfs-play{flex:1;height:50px;border:none;border-radius:12px;background:var(--pa-primary);color:var(--pa-primary-fg);font-size:17px;font-weight:700;cursor:pointer}
.rm-bfs-cancel{flex:1;height:50px;border:1.5px solid var(--pa-cancel-bd);border-radius:12px;background:transparent;color:var(--pa-cancel-fg);font-size:17px;font-weight:700;cursor:pointer}

/* v207 freespin介紹層改遊戲頁同款全螢幕(Tom:跟截圖一樣,不要另外做) */
#rm-bfswrap{position:fixed;inset:0;z-index:800;background:#0d0d0d;display:flex;flex-direction:column}
.rm-bfs-body{flex:1;overflow-y:auto;display:flex;flex-direction:column;padding:18px 16px 24px}
#rm-bfswrap .rm-bfs-box{flex:1;justify-content:center;margin-bottom:22px}

/* v208 首頁Bonus列:Welcome磚+金框Login 3天磚(小圖,label上/圖44px) */
.rm-bonusrow{gap:10px;align-items:stretch}
.rm-fs-tile{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 6px 8px;border-radius:10px;border:1px solid var(--bd-2);background:transparent;cursor:pointer;flex:0 0 auto}
.rm-fs-tile img{width:44px;height:44px;object-fit:cover;border-radius:8px;display:block}
.rm-fs-dayno{font-size:10px;font-weight:700;color:#fff;white-space:nowrap}
.rm-fs-gold{display:flex;gap:8px;border:2px solid #ffd54f;border-radius:12px;padding:5px 7px;background:linear-gradient(180deg,rgba(255,213,79,.10),rgba(255,213,79,.02))}
.rm-fs-gold .rm-fs-dayno{color:#ffd54f}
.rm-fs-gold .rm-fs-tile{border-color:rgba(255,213,79,.45)}
.rm-fs-tile.lock{opacity:.45;cursor:default}
.rm-fs-lock{position:absolute;bottom:10px;right:8px;font-size:12px;line-height:1}

/* 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照tkb:右上紫+鈕/頭像卡/白色銀行卡(圓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:var(--pa-primary);border:none;color:var(--pa-primary-fg);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:var(--card);border:1px solid rgba(63,70,84,.22);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:var(--muted);font-weight:600}
.rm-mb-acc{font-size:17px;color:#f0f3fc;font-weight:700;letter-spacing:.5px}

/* v214 鎖頭加強(Tom:不明顯):鎖日磚圖片壓暗+置中大鎖頭,整磚不再半透明 */
.rm-fs-tile.lock{opacity:1}
.rm-fs-tile.lock .rm-fs-dayno{opacity:.6}
.rm-fs-tile.lock img{filter:brightness(.3)}
.rm-fs-lock{position:absolute;left:50%;top:calc(50% + 8px);transform:translate(-50%,-50%);font-size:22px;bottom:auto;right:auto;text-shadow:0 1px 6px rgba(0,0,0,.9)}

/* v215 Bonus磚圖片塞滿(Tom):磚固定寬66px,圖flex:1撐滿剩餘高度(Welcome與金框等高時不再留白) */
.rm-fs-tile{width:66px}
.rm-fs-tile img{width:100%;height:auto;flex:1;min-height:44px;object-fit:cover}

/* v216 freespin介紹層滿版設計(Tom:小圖飄在大框很怪):遊戲圖撐滿框上半部,標題+說明收下方 */
#rm-bfswrap .rm-bfs-box{padding:0 0 18px;overflow:hidden;gap:0;justify-content:flex-start}
#rm-bfswrap .rm-bfs-thumb{width:100%;height:auto;flex:1;min-height:0;object-fit:cover;border-radius:0}
#rm-bfswrap .rm-bfs-title{margin:16px 12px 8px;font-size:20px}
#rm-bfswrap .rm-bfs-list{padding:0 14px;gap:7px}

/* v217 freespin圖要整張完整(Tom:cover裁切太大)——改自然比例不裁切,內容垂直置中 */
#rm-bfswrap .rm-bfs-thumb{flex:0 0 auto;width:100%;height:auto;object-fit:contain}
#rm-bfswrap .rm-bfs-box{justify-content:center}

/* 宽屏:列表版只需略缩行高/字号。原本的 justify-content:space-between + 固定 36px 是给
   横排圆点用的,列表化后必须拿掉,否则行会被撑开、图标和文字分到两端。 */
@media(min-width:1280px){
  .rm-social-card{gap:3px;padding:6px}
  .rm-social{padding:8px 10px}
  .rm-social-ic{width:18px;height:18px}
  .rm-social-tx{font-size:13px}
}

/* ===== Slot browser: provider strip + ALL/HOT/NEW + 3-col game grid + pager ===== */
.rm-provwrap{position:relative;display:flex;align-items:center;gap:4px;margin-bottom:6px}   /* [r9-2] relative = 左右键的定位基准 */
/* Gap between thumbnails halved: it is the chip's excess width + this gap. Was (66-60)/2*2 + 4 =
   10px; now (72-70)/2*2 + 3 = 5px. Both halves have to move — shrinking `gap` alone leaves the
   chip's dead space and only gets to 8px. */
.rm-provstrip{display:flex;gap:3px;overflow-x:auto;overflow-y:hidden;padding:6px 4px 8px;scrollbar-width:none;flex:1 1 auto;min-width:0;background:#383637;border-radius:6px}
/* bank dropdown (Daftar) styled like a .rm-field */
.rm-field-select{position:relative}
.rm-field-select select{flex:1 1 auto;min-width:0;width:100%;background:transparent;border:0;color:#fff;font-family:inherit;font-size:14px;outline:none;appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:18px}
.rm-field-select select option{background:#141414;color:#fff}
.rm-field-select:after{content:"\25be";position:absolute;right:12px;top:50%;transform:translateY(-50%);color:#8b93a7;pointer-events:none;font-size:12px}
.rm-provstrip::-webkit-scrollbar{display:none}
/* provider chip = cmm4a .slot-prov mobile: 90x66 black tile, logo(contain) on top, name below, active inset ring */
/* perfect-square chip (77x77, -15%): 1:1 cover logo fills it, name overlaid at the bottom */
/* 圓形 provider chip:圓形圖在上、名字在下(旧版圆形样式);active 洋红环套在圆上 */
/* Provider artwork is WIDE, not square: the small-provider set is 300x125 (2.4:1) and the
   /common fallback tiles are 450x237 (1.9:1). A square box with object-fit:cover cropped both to
   their middle third ("KA Ga", "RIUM GA"), so the box is square and the fit is `contain` — the
   whole logo is letterboxed on black, never cropped. Do NOT switch this back to cover.
   padding insets the art off the rounded edge (global *{box-sizing:border-box} keeps the box at
   its declared size). At 70x70 the art lands ~58x24. */
/* [r7-4 2026-08-24] 格子由 72x70 方形改 90x46 横向。WHY:上面那段警告说的 provider 图本来就是宽的
   (300x125 / 450x237),塞进方框 contain 会上下留白 —— 70x70 里艺术只占 58x24。改成横框后同一张图
   落 82x34,面积翻一倍,而整条 strip 反而矮了 24px。contain 保持不变(勿改 cover,理由见上)。 */
.rm-chip{position:relative;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:4px;width:90px;cursor:pointer;box-sizing:border-box}
.rm-chip-logo{width:90px;height:46px;border-radius:6px;object-fit:contain;display:block;background:#0f0f0f;padding:4px;filter:grayscale(1)}
.rm-chip-all{width:90px;height:46px;border-radius:6px;background:#0f0f0f;display:flex;align-items:center;justify-content:center;color:#ffd54f;font-size:19px;font-weight:800}
/* ALL chip 用金色線條老虎機圖標(slot-all.svg,跟分類欄彩色 777 不同):黑底居中 */
.rm-chip-allico{object-fit:contain;padding:7px}   /* 横框 90x46:padding 由 10 收到 7,保持图标在框内的相对分量 */
.rm-chip-name{width:100%;font-size:10px;line-height:1.2;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700;text-align:center}
/* 未选中去色、选中/悬停恢复彩色 —— 真站用 background-blend-mode:luminosity 做同一件事。
   红环保留(真站没有):有些 provider 的 logo 本身接近黑白,只靠"变彩色"那种选中反馈会看不出来。 */
.rm-chip-on .rm-chip-logo,.rm-chip:hover .rm-chip-logo{filter:none}
.rm-chip-on .rm-chip-logo,.rm-chip-on .rm-chip-all{box-shadow:0 0 0 2px #ffd54f;background:#000}
.rm-slotfilter{display:flex;gap:8px;margin-bottom:0;flex:0 1 auto;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
/* 多了 Buy Bonus 后 320px 下 4 个按钮 + search 会挤:让筛选组自己横向滚(不换行、不撑破页面),
   并给 search 留一个可用下限。按钮固定 height:40px 且不换行 -> 增减按钮时行高恒定,下面格子不跳。 */
.rm-slotfilter::-webkit-scrollbar{display:none}
/* ALL/HOT/NEW + Search 同排:filter 左固定, search flex:1 占剩余(320 不溢出靠 min-width:0 收缩) */
.rm-filterrow{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.rm-filterrow .rm-search{flex:1 1 auto;min-width:96px;height:40px;margin:0}
/* 窄屏:4 个按钮自然总宽 239px,跟 search 挤同一行就会把 Buy Bonus 推出可视区 ——
   而 Buy Bonus(473 款)正是这次要暴露的重点,印尼主力又是移动流量,不能藏在
   一个玩家不知道能横滚的区域里。所以 <=420px 让筛选栏换行:按钮独占一行(239<320,
   四个全露出),search 独占下一行。
   高度按断点固定(移动 88px / 桌面 40px),切 provider 增减按钮时不变 -> 下面格子不跳。 */
@media(max-width:420px){
  .rm-filterrow{flex-wrap:wrap}
  .rm-filterrow .rm-slotfilter{flex:1 1 100%;min-width:0}
  .rm-filterrow .rm-search{flex:1 1 100%}
}
/* 桌面:ALL/HOT/NEW 靠左成組, search 固定寬推到最右(margin-left:auto);手機維持 flex:1 佔滿 */
@media(min-width:1280px){ .rm-filterrow .rm-search{flex:0 0 auto;width:300px;margin-left:auto} }
/* ALL/HOT/NEW chip 高度=旁邊 search(40px),頂底對齊(box-sizing:border-box 全局) */
.rm-fbtn{flex:0 0 auto;height:40px;display:inline-flex;align-items:center;padding:0 13px;border-radius:14px;border:1px solid var(--bd-2);background:transparent;color:#c7cbd6;font-weight:700;font-size:9px;cursor:pointer;font-family:inherit}   /* padding/font ×0.7 + 等高 search */
.rm-fbtn-on{background:#f0c22e;color:#fff;border-color:#f0c22e}   /* [r10] 金->深红(此条被下方 1357 那条盖住,一并改掉不留旧金值) */
.rm-grid-slot{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}   /* 手機:3 列(不變) */
/* 寬屏(平板橫向/桌面)slot game grid 改 6 列→縮略圖約縮一半;.rm-grid.rm-grid-slot(0,2,0)壓過單類規則 */
@media(min-width:820px){ .rm-grid.rm-grid-slot{grid-template-columns:repeat(5,1fr)} }   /* [r7-5] 6->5 列,照真站 .gl{width:20%} */
.rm-slotcard{background:#141414;border-radius:10px;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;border:1px solid rgba(255,255,255,.06)}
.rm-slotcard__img{position:relative;aspect-ratio:1/1;overflow:hidden;background:#101010}
/* Semua 视图的 provider 标注:压在缩图左上角,不占布局高度 */
.rm-slotcard__prov{position:absolute;right:4px;top:4px;max-width:calc(100% - 8px);padding:2px 6px;border-radius:6px;background:rgba(13,13,13,.82);color:#f0f3fc;font-size:9.5px;font-weight:700;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
/* [r7-6 2026-08-24] 游戏卡角标 + provider 小 logo。素材取自真站(hot/new/bonus/no1)。
   角标挂左上(真站 .glbadge{width:35%;left:0;top:0} 同款),provider 挂右上 —— 两个都放左上会叠。
   🔴 下面那条通配规则必须排除这两个 class:它是 .rm-slotcard__img img(权重 0,1,1),
   比 .rm-slotcard__badge(0,1,0) 高,不排除的话角标会被拉成 100%x100% 盖满整张卡。
   用 :not() 让旧规则**根本匹配不到**新元素,而不是再叠一层更高权重的 override。 */
.rm-slotcard__badge{position:absolute;left:0;top:0;width:35%;height:auto;object-fit:contain;z-index:3;pointer-events:none}
.rm-slotcard__provlogo{position:absolute;right:3px;top:3px;width:36%;max-width:46px;height:auto;padding:2px 3px;border-radius:5px;background:rgba(13,13,13,.72);object-fit:contain;z-index:2;pointer-events:none}
/* provider chip 徽章(真站 Pragmatic 挂 No.1)。用 0,0 不用负值:.rm-provstrip 有 overflow-y:hidden,
   负偏移会被裁掉一角 —— 真站那边有 .ww 包一层才敢用 -7px。 */
.rm-chip-badge{position:absolute;left:0;top:0;width:24px;height:auto;z-index:3;pointer-events:none}
.rm-slotcard__img img:not(.rm-slotcard__badge):not(.rm-slotcard__provlogo){width:100%;height:100%;object-fit:cover;display:block}
/* [r7-5 2026-08-24] RTP 条照真站 g8-sggl.js:百分比压在条**中央**(不再挂条外)、45 度条纹跑马、
   依数值三色(<=30 红 / 31-74 黄 / >74 绿,阈值与真站一致)。文字 #151515 是为对比度选的:
   压在最暗的红 #e5484d 上仍有 4.67:1(WCAG AA 4.5 过线),黄 8.50 / 绿 8.01 / 空槽 14.51 —— 这四个
   数字是浏览器实测 computed color 算的,不是手推。 */
.rm-slotcard__rtp{display:block;padding:5px 6px 3px}
.rm-rtpbar{position:relative;display:block;width:100%;height:14px;border-radius:7px;background:#e9e4e4;overflow:hidden}
.rm-rtpbar>i{display:block;height:100%;background-image:linear-gradient(45deg,rgba(255,255,255,.18) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.18) 50%,rgba(255,255,255,.18) 75%,transparent 75%,transparent);background-size:14px 14px;animation:rm-rtp-stripes 1s linear infinite}
.rm-rtp-lo{background-color:#e5484d}
.rm-rtp-mid{background-color:#e0a800}
.rm-rtp-hi{background-color:#22c55e}
.rm-slotcard__rtp b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:9.5px;line-height:1;color:#151515;font-weight:800;white-space:nowrap}
@keyframes rm-rtp-stripes{from{background-position:0 0}to{background-position:14px 0}}
@media(prefers-reduced-motion:reduce){.rm-rtpbar>i{animation:none}}
/* [r10 2026-08-24] 金 -> 深红。渐层跟 Masuk 钮同一族(#b0001e -> #5f0010),字改白:
   白字压在 #5f0010 上 14.1:1、压在 #b0001e 上 7.33:1,都远超 WCAG AA 4.5。 */
.rm-slotcard__name{padding:4px 6px 5px;font-size:10px;font-weight:800;color:#3d000a;background:linear-gradient(180deg,#ffd54f,#e0a800);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
/* (pagination removed — infinite scroll via #rm-sentinel + IntersectionObserver) */

/* ---------- Deposit: QRIS + Transfer Bank (mock flows) ---------- */
/* QRIS tab icon, sits inline before the label */
.rm-chantab-ico{width:16px;height:16px;vertical-align:-3px;margin-right:5px;display:inline-block}

/* Transfer Bank: receiving-account detail panel, revealed once a bank is picked */
.rm-recv{display:none;margin:8px 0 2px;border:1px solid rgba(255,255,255,.10);border-radius:10px;background:rgba(255,255,255,.03);padding:4px 10px}
.rm-recv.on{display:block}
.rm-recv-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.rm-recv-row:last-child{border-bottom:0}
.rm-recv-row small{color:#8fa0c8;font-size:11px;flex:0 0 auto}
.rm-recv-val{display:flex;align-items:center;gap:6px;min-width:0}
.rm-recv-val b{font-size:13px;color:#fff;word-break:break-all;text-align:right}
.rm-recv-badge{flex:0 0 auto}
/* copy button: 32px hit area on a 16px glyph — thumb-sized without bloating the row */
.rm-copy{flex:0 0 auto;width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  border:0;border-radius:8px;background:rgba(255,255,255,.07);color:#ffd54f;cursor:pointer;-webkit-tap-highlight-color:transparent}
.rm-copy:active{background:rgba(63,70,84,.22)}
/* the glyph is a flex item inside .rm-copy — without flex:none it gets shrunk to 4x16 */
.rm-copy svg{flex:none;width:16px;height:16px;display:block}

/* Transfer Bank: slip upload (label drives the hidden file input) */
.rm-slip{display:flex;align-items:center;gap:10px;cursor:pointer}
.rm-slip-btn{flex:0 0 auto;background:rgba(255,255,255,.10);border-radius:7px;padding:5px 10px;font-size:12px;font-weight:700;color:#fff}
.rm-slip-name{flex:1 1 auto;min-width:0;font-size:12px;color:#8fa0c8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rm-slip-prev{display:none;max-width:100%;max-height:160px;border-radius:10px;margin:8px 0 2px;object-fit:contain;background:#000}
.rm-slip-prev.on{display:block}

/* QRIS: the mock QR panel, revealed after pressing Deposit */
.rm-qris{display:none;margin-top:14px}
.rm-qris.on{display:block}
.rm-qris-frame{width:100%;height:330px;border:0;border-radius:12px;background:#0d0d0d;display:block;margin-bottom:10px}

/* 2G register Bank/E-wallet tabs */
.rm-regtabs{display:flex;gap:8px;margin:4px 0 10px}
.rm-regtab{flex:1;text-align:center;padding:9px 0;border-radius:8px;background:var(--panel-2,#1c1c1c);color:var(--muted,#9fb0c9);font-weight:600;font-size:14px;cursor:pointer;border:1px solid rgba(255,255,255,.08)}
.rm-regtab.on{background:var(--pa-primary);color:var(--pa-primary-fg);border-color:transparent}

/* --- 联系/社群徽章 (BO getSiteConfig) --- */
.rm-soc-ico{display:inline-flex;width:26px;height:26px;margin-right:9px;vertical-align:middle;flex:0 0 26px}
.rm-soc-ico svg{width:26px;height:26px;display:block;border-radius:8px}
.rm-soc-letter{align-items:center;justify-content:center;border-radius:8px;color:#fff;font-weight:800;font-size:14px;line-height:1}
/* --- 促销 BO HTML 正文 --- */
.rm-promo-content{color:#cfd6e4;font-size:14px;line-height:1.75;word-break:break-word}
.rm-promo-content ol,.rm-promo-content ul{padding-left:20px;margin:8px 0}
.rm-promo-content li{margin:6px 0}
.rm-promo-content p{margin:8px 0}
.rm-promo-content a{color:#ffdf7a;word-break:break-all}
.rm-promo-content strong,.rm-promo-content b{color:#ffdf7a}
.rm-promo-content img{max-width:100%;height:auto;border-radius:8px}

/* --- 跑马灯 Running text (BO getSiteConfig.runningText) --- */
/* 2026-07-23 缩小约 50%:字 16->12px、容器高 36->~22px、图标 15->11px、内距与 gap 等比缩。
   滚动观感靠 app.js 里的 MQ_PX_PER_SEC 一起降(见那里的注释),一圈时间保持不变。 */
.rm-marquee{display:flex;align-items:center;gap:6px;margin:8px 0 0;padding:3px 10px;
  background:linear-gradient(90deg,rgba(225,29,52,.16),rgba(38,42,51,.35));   /* item5: 清 lapdee 洋红#e0218a+navy 残留 -> 品牌红族 */
  border:1px solid rgba(225,29,52,.26);border-radius:var(--rd-sm);overflow:hidden;}
.rm-mq-ico{flex:0 0 auto;display:inline-flex;align-items:center;color:#ffd54f}
.rm-mq-ico svg,.rm-mq-ico img{width:11px;height:11px}
/* display:flex 不是装饰:viewport 原本是块级容器装 inline-flex 的轨道,行盒会多出约 3px
   的基线下沉空间(实测 viewport 19px vs track 16px),整条因此比预期高 3px。改成 flex
   让轨道成为 flex item,高度就等于内容本身。 */
.rm-mq-viewport{flex:1 1 auto;display:flex;align-items:center;overflow:hidden;position:relative;
  -webkit-mask:linear-gradient(90deg,transparent,#000 22px,#000 calc(100% - 22px),transparent);
  mask:linear-gradient(90deg,transparent,#000 22px,#000 calc(100% - 22px),transparent);}
.rm-marquee-track{display:inline-flex;white-space:nowrap;animation:rm-mq-scroll 20s linear infinite;will-change:transform;}   /* 🔴 duration 必须写(20s 是安全默认)。缺省=0s,配 infinite + transform keyframe + will-change 的 GPU 合成层 = 每帧重启动画 = 画面震动 + CPU 空转。fillMarquee() 会在 rAF 里用按轨道宽算出的精确值(~21s)覆盖它;但 JS 跑到之前的那一瞬间、以及内页 marquee 被隐藏时,inline 值不存在,就靠这个 20s 兜底,任何时刻都不再有 0s。 */
@media(hover:hover){.rm-marquee:hover .rm-marquee-track{animation-play-state:paused;}}
@media (prefers-reduced-motion:reduce){ .rm-marquee-track{animation:none} }
@keyframes rm-mq-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* BO Web Setting.dupPhone=false 时手机号栏位下的说明(不是错误,灰字) */
.rm-field-hint{color:var(--muted,#9aa1ac);font-size:12.5px;line-height:1.35;margin:-8px 0 12px 4px}
.rm-field-hint:empty{margin:0}

/* ================= PORTED FROM rodabet (2026-07-28): 红金壳 + pill + badge + footer + 2:1磚门控。rodabet 红金=s777bet.org 同款红金,直接复用。s777bet 保留自己 entity38 品牌/logo/thumbnail。================= */
/* ===== rodabet.net chrome 精修 (2026-07-27, 照真站 getComputedStyle 计算色) ===== */
/* 1) HEADER: 红渐变 (真站 header 计算色) */
.rm-topbar{background:linear-gradient(180deg,#5f0010 0%,#b0001e 100%)}
/* 2) SIDEBAR: 容器暗红 #620c10, 条目盒略亮红褐 #7c1208, 白字 (照真站) */
.rm-sidebar{background:#620c10}
.rm-menu-card{background:#363d4a}
.rm-menu-item,.rm-menu-item span{color:#fff}
/* 3) FOOTER 底部导航: 极暗红黑底 + 灰字 + 顶边; 选中态红 #9d141e 白字 */
/* padding-right:72px = 入口向左紧凑, 右侧空出~一个入口宽给 BO 的 WA+TG 圆浮标(照 rodabet.net) */
.rm-bottomnav{background:#12151a;border-top:1px solid rgba(169,169,173,.27);padding-right:72px}
.rm-bn-item{color:#a9a9ad}
.rm-bn-active{color:#fff;background:#7a0015;font-weight:700}
/* 筛选 chip ALL/HOT/NEW 激活态 → 金(游戏区统一金), 深字可读 */
/* [r10] 选中态金 -> 深红渐层。白字在此渐层上 7.33~14.1:1;按钮本身压在灰框 #2a2a2a 上,
   边框同色让它在未选中的透明钮之间仍然一眼可辨。 */
.rm-fbtn-on{background:linear-gradient(135deg,#ffd54f,#ffc93a);color:#3d000a;border-color:#ffc93a}
/* 4) LOGIN(Masuk)钮: 深灰底 #2e2f2e + 金边 #ffd200 + 白字 (照真站手机版, 取消蓝) */
.rm-btn-login,.rm-cta-inline .rm-btn-login{background:#2e2f2e;color:#fff;border:1px solid #ffd54f}
/* LIVE CHAT:launcher 现在由 app.js 的 initLcLauncher() 整个 call("hide") 隐藏,不再需要 CSS 把它抬高。
   WHY 删掉旧的 `#chat-widget-container{bottom:88px !important}`:那条会连 **maximized 聊天窗** 的容器一起
   强推上 88px,在矮的手机视口上 top:10+bottom:88 把全屏窗挤出界(Gerald 报的溢出)。移除后交回 LiveChat
   官方 mobile maximize 行为,窗口自动贴合视口。launcher 靠 JS 隐藏,不靠这条 CSS,所以删了不影响 #1 效果。 */

/* ===== rodabet.net 对齐批次2 (2026-07-27) ===== */
/* #2 Daftar/Masuk 按钮图标 (i18n 文本移到内层 span, 图标是兄弟节点不被抹) */
.rm-btn-ic{width:15px;height:15px;flex:0 0 auto;margin-right:6px;vertical-align:-2px}
.rm-btn-register .rm-btn-ic{color:#111317}   /* 金底 -> 深色图标 */
.rm-btn-login .rm-btn-ic{color:#ffd54f}      /* 深灰底 -> 金图标 */
.rm-btn-register,.rm-btn-login,.rm-cta-inline .rm-btn-register,.rm-cta-inline .rm-btn-login,.rm-cta-btn{display:inline-flex;align-items:center;justify-content:center}
/* rodabet.net LOGIN/DAFTAR/Deposit/Withdraw 参照:图标坐进一个 31×31 金框 badge。
   真站实测:size 31×31, bg rgba(255,193,35,.08), border 1px rgba(255,206,68,.26), radius 8px, glyph 15px。
   只作用在大 CTA 按钮(.rm-cta-btn);顶栏 93px 小按钮维持 15px 裸图标(套 badge 会挤,另议)。 */
.rm-cta-btn .rm-btn-ic{
  width:31px;height:31px;box-sizing:border-box;padding:7px;   /* padding 7 -> 内 glyph ~15px,同真站 */
  background:rgba(255,213,79,.08);
  border:1px solid rgba(255,213,79,.26);
  border-radius:8px;margin-right:10px;vertical-align:middle;flex:0 0 auto;
}
/* Deposit/Withdraw glyph 继承按钮文字色(SVG fill=currentColor):Deposit 金底->黑 glyph(同 Daftar 高对比),
   Withdraw 深底->金 glyph。不写死颜色,底色变了也自动匹配。 */
.rm-cta-wbtn .rm-btn-ic{color:inherit}
/* #3 侧栏 WELCOME 头 (真站顶部红头) */
.rm-sidebar-welcome{margin:2px 0 12px;padding:10px 12px;border-radius:12px;
  background:linear-gradient(180deg,#8d1b23,#5f0010);color:#fff;font-weight:800;
  text-align:center;letter-spacing:.6px;font-size:13px;text-transform:uppercase}
/* #4 侧栏底部区块: Game Provider / License / Metode Pembayaran (真站合成图) */
.rm-side-block{margin:14px 4px 0}
.rm-side-block h4{margin:0 0 6px;font-size:10px;font-weight:800;color:#ffd54f;
  letter-spacing:.6px;text-transform:uppercase;opacity:.95}
.rm-side-block img{width:100%;height:auto;display:block;border-radius:8px;background:rgba(0,0,0,.15)}

/* ===== #5 页面底部版权页脚 = 真站样式 (2026-07-27) ===== */
.rm-footer{background:#12151a;color:#a9a9ad;border-top:1px solid rgba(169,169,173,.27)}
.rm-footer-desc,.rm-footer-copy{color:#a9a9ad}
.rm-footer-links{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin:0 auto 12px;max-width:640px;font-size:12px}
.rm-footer-links a{color:#a9a9ad;text-decoration:none}
@media(hover:hover){.rm-footer-links a:hover{color:#ffd54f}}
.rm-footer-links span{opacity:.4}
.rm-footer-18{display:inline-block;border:1px solid #ffd54f;color:#ffd54f;border-radius:6px;padding:0 5px;font-weight:800;font-size:11px;margin-right:4px}

/* ===== rodabet.net 对齐 精修批次2 (2026-07-27) ===== */
/* #1 手机 header 再压缩: 390px 下 hamburger+logo+Daftar+Masuk 全完整不裁切(按钮改 auto 宽随内容, 缩 logo/图标/gap) */
@media(max-width:430px){
  .rm-topbar{padding:10px 8px;gap:5px}
  .rm-topbar-right{gap:5px}
  .rm-topbar-right .rm-btn{width:auto;min-width:0;padding:0 10px;font-size:11px}
  .rm-brand{gap:5px}
  .rm-brandmark{height:32px}
  .rm-hamburger{width:30px;height:30px}
  .rm-btn-ic{width:12px;height:12px;margin-right:4px}
}
/* #3 侧栏: 上暗红 -> 下近黑 竖向渐变(真站观感; welcome头在顶部暗红区, provider/license/payment 落下部近黑区) */
.rm-sidebar{background:linear-gradient(180deg,#620c10 0%,#191d24 55%,#090d12 100%)}
/* #4 footer: 暗红竖向渐变(顶部带暗红, 往下发黑) */
.rm-footer{background:linear-gradient(180deg,#232830 0%,#12151a 60%,#0d0d0d 100%)}

/* ===== Step2(rodabet #8) 非slot 磁贴: Coming Soon 门控 + 文字占位 (2026-07-27) ===== */
.rm-tile-soon{position:relative;opacity:.72;cursor:default}
.rm-tile-soon .rm-tile-txt,.rm-tile-soon img{filter:grayscale(.35)}
.rm-tile-soonbadge{position:absolute;top:6px;right:6px;background:#8d1b23;color:#ffd54f;font-size:9px;font-weight:800;padding:2px 6px;border-radius:6px;letter-spacing:.3px;text-transform:uppercase;z-index:2;box-shadow:0 1px 3px rgba(0,0,0,.5)}
/* WHY aspect-ratio 2/1(=2:1 横):非slot 磁贴用 rodabet.net 现成图(500×250=2:1),外层 .rm-grid-wide .rm-tile
   也是 2:1,内层空态文字块跟外层同比例,空态/填图态同高同比例,object-fit:cover 零裁切。
   (历史:4/5竖→570/360(1.58)→2/1;Gerald 2026-07-27 定 2:1 配现成图。图片规格 500×250 2:1。) */
.rm-tile-txt{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:2/1;padding:8px;text-align:center;font-weight:800;font-size:13px;color:#ffd54f;background:linear-gradient(160deg,#1a1416,#0d0d0d);border-radius:12px;line-height:1.25}

/* ===== 侧栏菜单项 pattern 照 rodabet.net 真站实测值 (2026-07-27) ===== */
/* 容器:去掉红卡块+分隔线,竖排 gap6(真站 ul grid gap6) */
.rm-menu-card{background:transparent;border:0;padding:0;display:grid;gap:6px;margin:0 0 6px}
.rm-menu-sep{display:none}
/* 每项 = 独立 pill(真站精确值:radius10+细白边+淡白渐变+flex gap11+min-h39) */
.rm-menu-item{display:flex;align-items:center;gap:11px;padding:3px 11px;min-height:39px;
  border-radius:10px;border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  color:#e7e3df;font-size:13px;font-weight:700;cursor:pointer;position:relative}
.rm-menu-item span{font-size:13px;font-weight:700;color:#e7e3df}
@media(hover:hover){.rm-menu-item:hover{background:linear-gradient(135deg,rgba(255,255,255,.1),rgba(255,255,255,.045))}}
/* 右侧 › 箭头(::after margin-left:auto);隐藏旧 CSS 三角箭头 */
.rm-menu-item::after{content:"\203A";margin-left:auto;color:#77736e;font-family:'Fjalla One',sans-serif;font-size:19px;line-height:1;flex:0 0 auto}
.rm-menu-item .rm-arrow{display:none}
/* 左侧 31×31 金框图标 badge(真站:radius8 + rgba(255,193,35,.08)底 + rgba(255,206,68,.26)边) */
.rm-ic-badge{width:31px;height:31px;border-radius:8px;background:rgba(255,213,79,.08);
  border:1px solid rgba(255,213,79,.26);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.rm-ic-badge .rm-ic{width:18px;height:18px;background:linear-gradient(to right,#ffc93a,#ffd54f,#ffc93a)}   /* badge 内图标恒金色 */
/* 语言项(flag 非 ic-sb)也塞进同尺寸感 badge 框 */
.rm-menu-item .rm-flag{width:22px;height:22px}

/* ===== s777bet.org sidebar+底部bar 精修 v2 (2026-07-28, Gerald 改正: 侧栏=真站深红连续行(非金pill)+ 底部bar=真站红。值来自 s777bet.org mobile computed 采样) ===== */
/* 侧栏面板: 真站 offcanvas 采样 = 纯平深红 #620c10 (非炭灰, 非渐变) */
.rm-sidebar{background:#620c10}
/* 菜单容器: 连续堆叠, 无间隙(推翻上版 grid gap6) */
.rm-menu-card{background:transparent;border:0;padding:0;display:block;gap:0;margin:0}
/* 菜单行: radius0 + 无外边距 + 透明底 + 白字 + 低透分隔线(真站"連著一格一格") —— 去掉金 pill/金边/金底 */
.rm-menu-item{border:0;border-bottom:1px solid rgba(255,255,255,.09);border-radius:0;margin:0;
  background:transparent;color:#fff;min-height:44px;padding:11px 16px;gap:12px}
@media(hover:hover){.rm-menu-item:hover{background:rgba(255,255,255,.06)}}
.rm-menu-item span{color:#fff}
.rm-menu-item .rm-ic{background:#fff}   /* 图标白 (真站白, 不再金) */
.rm-menu-item::after{color:rgba(255,255,255,.4)}   /* › 箭头低调白 */
/* WELCOME/header 条: 真站灰 #6a6a6a */
.rm-sidebar-welcome{background:#6a6a6a;color:#fff;border:0;border-radius:0}
.rm-side-block h4{color:#ffd54f}

/* 底部 nav bar: 真站采样 = #b0001e 亮红 + 白字白图标 */
/* [r32] 底部 nav bar 重做。实测 t88 的 padding-right:72px 是【纯浪费】——
   s777 那边是为了闪避 CMS 注入的浮动 WhatsApp/Telegram,但 t88 右下角根本没有浮动按钮
   (float-icons 在 index.html/app.css/app.js/static-data.js 四档 0 命中),
   却照样把 4 个项目挤到左边 290px、右侧空 100px。本轮直接收掉,不需要任何 !important 覆盖。 */
.rm-bottomnav{background:linear-gradient(180deg,#b0001e 0%,#7a0015 100%);
  border-top:2px solid #f0c92e;box-shadow:0 -6px 18px rgba(0,0,0,.5);padding-right:4px;padding-left:4px}
.rm-bn-item{color:#fff}
.rm-bn-item .rm-ic{background:#fff}
/* [r32] 选中态:淡黑框(几乎看不出)-> 金色药丸 + 深红图标文字。 */
.rm-bn-active{color:var(--r-500);background:linear-gradient(180deg,#f6d878,#d9a326);font-weight:800;
  box-shadow:0 3px 10px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.6)}
.rm-bn-active .rm-ic{background:var(--r-500)}
/* [r32] Live Chat 那格用 <img class=rm-bn-lineico>(非遮罩图标),药丸上白图标会糊,用 filter 转深红。 */
.rm-bn-active .rm-bn-lineico{filter:brightness(0) saturate(100%) invert(6%) sepia(96%)
  saturate(5000%) hue-rotate(342deg) brightness(95%) contrast(105%)}

/* ===== s777bet.org 侧栏菜单补全 v3 (2026-07-28, Gerald approve: 补9项现成 + 连续行照真站采样值) ===== */
/* 分隔线改真站 #390003, 行内边距真站 12/16, 去掉 › 箭头(真站 offcanvas 无箭头) */
.rm-menu-item{border-bottom:1px solid #171a21;padding:12px 16px}
.rm-menu-item::after{content:none}
.rm-menu-sep{display:none}   /* 连续行靠 border-bottom, 不用独立分隔条 */
/* guest-only: 未登录才显示 Login/Daftar(与 rm-auth-only 相反) */
.rm-guest-only{display:block}
body.rm-authed .rm-guest-only{display:none!important}
/* LOG IN 行灰(真站 #6a6a6a), DAFTAR 行金高亮(真站 #e3a43b) */
.rm-menu-item.rm-menu-login{background:#6a6a6a}
.rm-menu-item.rm-menu-daftar{background:#ffcb4d}
@media(hover:hover){.rm-menu-item.rm-menu-login:hover,.rm-menu-item.rm-menu-daftar:hover{filter:brightness(1.08)}}
/* 游戏类目图标: 复用顶部 tab 的 /assets/cat/*.png, filter 转白线条(对齐真站白图标) */
.rm-ic-catimg{width:22px;height:22px;object-fit:contain;filter:brightness(0) invert(1);opacity:.9;flex:0 0 auto}
/* 全菜单一整条连续(真站):去掉 .rm-sidebar flex 的 20px gap + 卡的圆角/阴影;head/topbtns 自留间距 */
.rm-sidebar{gap:0}
.rm-sidebar-head{margin-bottom:6px}
.rm-side-topbtns.rm-auth-only{margin-bottom:10px}
.rm-menu-card{border-radius:0;box-shadow:none;margin:0}
/* 侧栏游戏类目内联 SVG 线条图标(白, 对齐真站白线条 + 账户项风格) */
.rm-menu-item .rm-catsvg{width:22px;height:22px;flex:0 0 auto;color:#fff}
/* sidebar 去左右 padding 后:非菜单元素(head/topbtns/contact/social)自补 16px 横向内距, 只让菜单行分隔线边到边贯穿, 文字不贴边 */
.rm-sidebar-head{padding-left:16px;padding-right:16px}
.rm-side-topbtns{padding-left:16px;padding-right:16px}
.rm-social-card,.rm-side-block,.rm-lang-panel{padding-left:16px;padding-right:16px}

/* 8类目 tab 横向可滚(对齐 s777bet.org,防 8 个挤压/第一个挤出屏)+ SVG 类目图标白色(真站图标嵌入,统一白) */
.rm-tabs{overflow-x:auto;overflow-y:hidden;justify-content:flex-start;flex-wrap:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:0 4px}
.rm-tabs::-webkit-scrollbar{display:none}
.rm-tab{flex:0 0 auto}
/* 类目 tab 图标:2026-07-28 Gerald 定「统一白」,靠 filter:brightness(0) invert(1) 把真站那套
   黑填充 SVG 压成白线条 —— 那个顾虑(图标花色不一、跟深色顶栏不搭)当时是成立的,现在也仍然成立。
   [r7-2 2026-08-24] 用户指定改用一套**专门画的彩色圆形图标**(/assets/cat/c-*.png),
   它们本来就是同一组美术、同一种圆形规格,不再有「花色不一」的问题,所以拿掉 filter。
   🔴 这条 filter 一拿掉,任何塞进 .rm-tab-ico 的图都会照原色显示 —— 换回单色 SVG 前要先把它加回来。
   影响面仅限首页那 8 个 tab:.rm-tab-ico 只出现在 index.html(8 个),JS 不产生也不改它;
   桌面导航走 mask-image + currentColor(只取形状),侧栏走内联 SVG —— 两者都不受影响,维持白色。 */

/* 非slot 磚响应式两套(2026-07-28,对齐 s777bet.org 桌面/手机两种视图):手机方 1:1(banner/m2 300×300)/ 桌面宽 Suite ~1.9:1(banner/d 450×237)。picture 在 providerTile 按 media 切图。 */
.rm-grid-wide .rm-tile{aspect-ratio:1/1}                          /* 手机默认=方 */
@media(min-width:769px){ .rm-grid-wide .rm-tile{aspect-ratio:450/237} }   /* 桌面=宽 Suite */
.rm-grid-wide .rm-tile picture{display:block;width:100%;height:100%}
.rm-grid-wide .rm-tile picture img{width:100%;height:100%;object-fit:cover;display:block;border-radius:6px}

/* 侧栏分隔线贯穿 + Masuk/Daftar 填满整栏(2026-07-28 Gerald):🔴 桌面侧栏 media query 有 27px 左右 padding→行/分隔线/背景内缩;这里去掉左右 padding,让菜单行 border-bottom 边到边、Masuk/Daftar 背景 100% 栏宽。文字仍靠行自己的 padding 内缩。 */
.rm-sidebar{padding-left:0;padding-right:0}
.rm-menu-item{margin-left:0;margin-right:0}
.rm-menu-item.rm-menu-login,.rm-menu-item.rm-menu-daftar{margin:0}

/* 侧栏宽度 280px(Gerald 2026-07-28 定,贴真站):手机 base 已 280;桌面持久侧栏 300→280 + 内容 margin 同步 280 免留缝。桌面/手机一致。 */
@media(min-width:1280px){ .rm-sidebar{width:280px} .rm-body{margin-left:280px} }

/* LiveChat "Let's talk!" eye-catcher 常驻泡兜底隐藏(主机制走 app.js LC_API.hide_eye_catcher/hide_chat_window;这条防注入时机漏网)。不碰 #chat-widget-container 以免 open_chat_window 打不开。 */
#livechat-eye-catcher,#livechat-eye-catcher-img{display:none!important}

/* [Batch1 item8] 键盘可见焦点环(现在 outline:0 无替代, 键盘用户看不到焦点) */
.rm-btn:focus-visible,.rm-cta-btn:focus-visible,.rm-modal-submit:focus-visible,.rm-gbtn:focus-visible,
.rm-tab:focus-visible,.rm-bn-item:focus-visible,.rm-menu-item:focus-visible,.rm-fbtn:focus-visible,
.rm-search-input:focus-visible,.rm-field input:focus-visible,.rm-hamburger:focus-visible,a:focus-visible{
  outline:2px solid var(--g-200);outline-offset:2px}

/* [Batch1 item7] 金额/余额/数字定宽(刷新不抖);Space Grotesk woff2 待资产, 现 --ff-display 走 system 兜底 */
.rm-bal-amt,.rm-wpill b,.rm-statscell b,.rm-slotcard__rtp b,.rm-hstat,.rm-amt,.rm-balance,
input[inputmode="numeric"],input[type="number"],.rm-modal-submit,.rm-cta-btn{font-variant-numeric:tabular-nums}

/* ============================================================
   [桌面横排 nav · Step1 2026-08-03] 类目导航条(header 下, ≥1280 桌面专属)
   照真站/cmn2:1200 居中横排、40px、红底、白14px、内容自适应宽、active 金下划线(--g-100)
   🔴 默认 display:none -> 移动端零影响;仅 @media(min-width:1280px) 显示
   ============================================================ */
.rm-desknav{display:none}
@media(min-width:1280px){
  .rm-desknav{display:block;background:var(--r-500);border-bottom:1px solid var(--bd-brand)}
  /* [r25] gap 20->16:Bold 比 Light 宽,实测 gap20 只剩 22.6px 余量太紧(i18n 字长一变就爆),
   gap16 余 62.6px。与 s777 同值。nav 高度维持 58 —— s777 的 70 是它 box-sizing 坏掉时的补偿,不照搬。 */
.rm-desknav-inner{max-width:none;margin:0;height:58px;display:flex;align-items:center;justify-content:flex-start;gap:16px;padding:0 24px 0 20%;list-style:none}   /* [v176] 40->58：容纳「图标在文字上方」垂直堆叠 */   /* [header 对齐 2026-08-19] 左 padding-left:20% = 对齐 .rm-topbar/marquee 左缘, 三行开头落同一条线 */   /* [v178 去挤] 右 padding 20%->24px 腾出空间, 加 base gap:20px(相邻 16->36 ≈+125%); 左仍 20% 保开头对齐, 右缘随内容自然收尾(开头对齐只要求左缘) */
  .rm-desknav-inner>li{position:relative;display:flex;align-items:stretch}   /* li=挂下拉容器(Phase2 加 .dropdown-menu 处), 现只包 a */
  .rm-desknav-item{position:relative;height:58px;display:inline-flex;flex-direction:column;justify-content:center;gap:4px;align-items:center;padding:0 8px;color:var(--t-1);font-family:"Plus Jakarta Sans","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.2px;text-decoration:none;cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent;transition:color .12s,border-color .12s}   /* [Step2 部署1] 照真站:UPPERCASE 700 */
  .rm-desknav-item.rm-desknav-active{border-bottom-color:var(--g-100);color:var(--g-100)}
  .rm-desknav-ico{width:16px;height:16px;display:block;fill:currentColor}   /* [Step2 部署1] home/mobile 内联 SVG(FA 没有, 不引整套字体) */
  .rm-desknav-item.rm-desknav-iconly{padding:0 10px;flex-direction:row;gap:0}   /* home/download 已有内联 svg，维持横排 */
  /* [v176] 图标在文字上方：::before + mask-image，不是往 <a> 塞 <img>。
     🔴 为何走 ::before：applyI18n 是 n.textContent=v（app.js:1508/869），会清掉元素所有子节点；
        Promosi 那项带 data-i18n，塞进去的 <i> 每次切语言就被冲掉。::before 是 CSS 生成内容，textContent 碰不到。
        附带好处：index.html 一个字都不用改。
     🔴 用 mask + background:currentColor（不是 filter）：图标自动跟文字同色，
        active/hover 变金时图标一起变，不必为两态各写一套。图档是纯黑 path，mask 只取形状。 */
  .rm-desknav-item:not(.rm-desknav-iconly)::before{content:"";width:22px;height:22px;display:block;flex:0 0 auto;
    background:currentColor;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    -webkit-mask-position:center;mask-position:center}
  .rm-desknav-item[data-cat="sport"]::before{-webkit-mask-image:url(/assets/cat/s777-sportsbook.svg);mask-image:url(/assets/cat/s777-sportsbook.svg)}
  .rm-desknav-item[data-cat="slot"]::before{-webkit-mask-image:url(/assets/cat/s777-slot.svg);mask-image:url(/assets/cat/s777-slot.svg)}
  .rm-desknav-item[data-cat="lc"]::before{-webkit-mask-image:url(/assets/cat/s777-livecasino.svg);mask-image:url(/assets/cat/s777-livecasino.svg)}
  .rm-desknav-item[data-cat="gaple"]::before{-webkit-mask-image:url(/assets/cat/s777-gaple.svg);mask-image:url(/assets/cat/s777-gaple.svg)}
  .rm-desknav-item[data-cat="poker"]::before{-webkit-mask-image:url(/assets/cat/s777-poker.svg);mask-image:url(/assets/cat/s777-poker.svg)}
  .rm-desknav-item[data-cat="tangkas"]::before{-webkit-mask-image:url(/assets/cat/s777-tangkas.svg);mask-image:url(/assets/cat/s777-tangkas.svg)}
  .rm-desknav-item[data-cat="fish"]::before{-webkit-mask-image:url(/assets/cat/s777-fish.svg);mask-image:url(/assets/cat/s777-fish.svg)}
  .rm-desknav-item[data-cat="others"]::before{-webkit-mask-image:url(/assets/cat/s777-others.svg);mask-image:url(/assets/cat/s777-others.svg)}
  .rm-desknav-item[data-nav="promotion"]::before{-webkit-mask-image:url(/assets/icons/sb-promotion.svg);mask-image:url(/assets/icons/sb-promotion.svg)}
}
@media(min-width:1280px) and (hover:hover){ .rm-desknav-item:hover{color:var(--g-100)} }
/* [v178 取代 v177] nav 去挤 —— Gerald 实机看 1280~1440 仍「太挤」。
   根因：v177 的 +50% gap 只锁 >=1600，Gerald 视口在 1280~1440，那里 gap=0（文字项仅 padding 0 8px，相邻 16px）。
   v177 之所以只能锁 >=1600：当时保留左右各 20% padding，可用宽=60%*视口，1280 只 768px 放不下更大 gap。
   [v178 解法] 松开约束：右 padding 20%->24px（左仍 20% 保「开头对齐」），@1280 腾出 ~232px；
   再於 .rm-desknav-inner 加 base gap:20px（相邻 16->36 ≈+125%），全程 >=1280 生效。
   实测跨距 758+10*20=958：@1280 可用宽升到 1000（余 42px）、1366/1440/1600 更宽松，均放得下。
   [代价] nav 右缘不再落 20% 线（只左缘对齐，右缘随内容收尾）——「开头对齐」只要求左缘，右缘本不需对齐。
   故删除 v177 的 @media(min-width:1600px){gap:8px}（base gap 更大且已覆盖全宽）。 */

/* ============================================================
   [Step2 部署1 · 桌面 header 三段重构 2026-08-04] 仅 @media(min-width:1280px);移动端零改动
   照真站:.header-top(时钟+livechat) / .header-mdl(logo+账户) / .header-menu(desknav)
   [注: 配色红金黑我们的主题, 不抄真站蓝(真站其实是灰金, 已实测)]
   ============================================================ */
.rm-htop{display:none}
@media(min-width:1280px){
  .rm-htop{display:block;background:var(--r-600);border-bottom:1px solid rgba(0,0,0,.3)}
  .rm-htop-inner{max-width:1200px;margin:0 auto;height:24px;display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:0 16px}
  .rm-htop-clock{color:var(--t-2);font-size:12px;font-variant-numeric:tabular-nums;letter-spacing:.2px}
  .rm-htop-lc{color:var(--t-2);font-size:12px;text-decoration:none;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
}
@media(min-width:1280px) and (hover:hover){ .rm-htop-lc:hover{color:var(--g-100)} }

/* ============================================================
   [Step2 部署1 · 桌面 header-mdl 重排 + 账户区 + Step3 · 2026-08-04] 仅 @media(min-width:1280px)
   [注: 配色红金黑我们的主题;LOG IN 灰/DAFTAR 金实测对得上我们现有 token, 不抄真站蓝(真站其实也是灰金)]
   ============================================================ */
.rm-dk-acct{display:none}
@media(min-width:1280px){
  /* header-mdl 重排:桌面无侧栏 -> 汉堡隐藏、logo 放大、右侧换成桌面账户区 */
  .rm-topbar .rm-hamburger{display:none}
  .rm-topbar{padding:8px 24px;min-height:57px}
  .rm-topbar-left{position:static;transform:none}
  .rm-topbar .rm-brandmark{height:72px}
  .rm-topbar-right#rm-auth-area{display:none}   /* 移动版按钮/簇桌面隐藏(markup 不动) */
  .rm-search-top{display:none}
  /* 桌面账户区 */
  .rm-dk-acct{display:flex;align-items:center;margin-left:auto}
  .rm-dk-guest{display:flex;gap:10px}
  .rm-dk-guest .rm-btn{height:36px;padding:0 18px;font-size:15px;font-weight:700;border-radius:var(--rd-sm);border:0;cursor:pointer;font-family:inherit}
  .rm-dk-daftar{background:var(--pa-primary);color:var(--pa-primary-fg)}       /* Daftar 金(实测真站 #e3a43b, 用我们金 token) */
  .rm-dk-masuk{background:#2e2f2e;color:#fff;border:1px solid var(--bd-gold)!important}   /* Masuk 深灰+金边(实测真站灰 #6a6a6a) */
  /* 登录态 member:🔴 显示绑 body.rm-authed(结构性防登出泄露) */
  #rm-dk-acct .rm-dk-member{display:none}
  body.rm-authed #rm-dk-acct .rm-dk-member{display:flex;align-items:center;gap:14px}
  body.rm-authed #rm-dk-acct .rm-dk-guest{display:none}
  .rm-dk-info{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2}
  .rm-dk-name{color:var(--t-2);font-size:12px;font-weight:600;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .rm-dk-bal-amt{color:var(--g-100);font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}
  .rm-dk-dep{height:36px;padding:0 16px;font-size:14px;font-weight:700;border-radius:var(--rd-sm);border:0;cursor:pointer;font-family:inherit;background:var(--pa-deposit);color:var(--pa-deposit-fg)}
  /* 下拉 */
  .rm-dk-ddwrap{position:relative}
  .rm-dk-ddtoggle{width:34px;height:34px;border-radius:var(--rd-sm);border:1px solid var(--bd-2);background:var(--s-3);color:var(--t-2);cursor:pointer;display:flex;align-items:center;justify-content:center}
  .rm-dk-dd{position:absolute;top:calc(100% + 8px);right:0;min-width:200px;background:var(--s-2);border:1px solid var(--bd-2);border-radius:var(--rd-md);box-shadow:var(--e-3);padding:6px;display:none;z-index:300}
  .rm-dk-ddwrap.rm-dk-dd-open .rm-dk-dd{display:block}
  .rm-dk-dd-item{display:block;padding:9px 12px;color:var(--t-2);font-size:13px;text-decoration:none;cursor:pointer;border-radius:var(--rd-xs);white-space:nowrap}
  .rm-dk-dd-item.rm-dk-logout{color:var(--r-100)}
  .rm-dk-dd-sep{height:1px;background:var(--bd-1);margin:5px 8px}
  /* Step3:桌面拿掉侧栏 + 内容 1200 居中(与 nav 同中轴) */
  .rm-sidebar{display:none}
  .rm-body{margin-left:0}
  .rm-tabs{display:none}
  .rm-content{max-width:1200px;margin-left:auto;margin-right:auto}
}
@media(min-width:1280px) and (hover:hover){
  .rm-dk-dd-item:hover{background:var(--s-3);color:var(--t-1)}
  .rm-dk-ddtoggle:hover{color:var(--g-100)}
}

/* [Step2 部署1] 桌面下拉当前语言高亮:复用 markLangActive 加的 .on(boot+setLang 都调, 我的语言项是 .rm-lang-opt 自动被标)。
   [注: 侧栏 .rm-lang-opt.on 样式针对 .rm-lang-btn 子元素, 桌面下拉这套没有该子元素, 故单独给高亮, 不改 markLangActive/setLang] */
.rm-dk-dd-item.rm-lang-opt.on{color:var(--g-100);font-weight:700}

/* [Step2 部署1 修] 桌面账户区 Withdraw 钮(19入口漏抓补上):金描边(配 Deposit 红底 = 红金对);复用提款描边色 --g-100(v165 已修) */
@media(min-width:1280px){
  .rm-dk-wd{height:36px;padding:0 16px;font-size:14px;font-weight:700;border-radius:var(--rd-sm);cursor:pointer;font-family:inherit;background:transparent;color:var(--g-100);border:1px solid var(--g-100)}
}
@media(min-width:1280px) and (hover:hover){ .rm-dk-wd:hover{background:rgba(255,213,79,.1)} }

/* [Step2 部署2 · running text + banner 通栏对齐真站 2026-08-04] 仅 @media(min-width:1280px);移动端零改动。
   [注:running text 从 banner 下方(1200居中红字透明底) 改为绝对叠 banner 顶40px(全出血半透明黑底白字);banner 从1200居中改为全出血。]
   [注:非home页无悬空 — 所有子页经 openPage() 加 body.rm-authopen,base:450 已 !important 隐 #rm-marquee 与 banner;banner 空数据靠 aspect-ratio 撑高,marquee 仍叠其上(已实测)。]
   [注:通栏用 calc(50%-50vw)+100vw,靠 base:56-61 html,body overflow-x:clip 吸收经典滚动条平台~15px溢出;该平台带内内容左偏约半个滚动条宽(~7.5px,肉眼几乎不可见);要像素级居中改 band+wrapper(需动DOM)。] */
@media(min-width:1280px){
  .rm-content{position:relative}
  .rm-content>.rm-banner{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);border-radius:0}
  /* [v174] 文字起点由「居中1200左缘」改为视口 20%，与 .rm-topbar / .rm-desknav-inner 同一条 20% 左线。
     🔴 用 20vw 不是 20%：本元素 position:absolute，包含块是 position:relative 的 .rm-content
        (max-width:1200px)，所以 20% 会解析成 20%x1200=240px，反而更偏(实测 1920 下 240 vs 目标 384)。
        vw 以视口为基准，与 topbar/nav 的 20% 同一条线(实测 delta 0)。
     🔴 只动 padding：left:calc(50%-50vw)+width:100vw 不变 -> 黑底仍全出血通栏，只有文字缩进。 */
  .rm-content>.rm-marquee{position:absolute;top:16px;left:calc(50% - 50vw);width:100vw;margin:0;height:40px;box-sizing:border-box;padding:0 20vw;background:rgba(0,0,0,.5);color:#fff;z-index:5;gap:8px}
  .rm-content>.rm-marquee .rm-mq-ico{color:#fff}
  .rm-content>.rm-marquee .rm-mq-ico svg{width:15px;height:15px}
  .rm-content>.rm-marquee .rm-mq-item{color:#fff;font-size:14px}
}


/* ============================================================
   [顶栏直接登录 · 2026-08-18] 桌面顶栏内联登录,对齐真站 s777bet.org .header-mdl__login
   移植 rodabet 已上线先例的接线模式(app.js doLogin src 覆盖),本段【只管外观】,零逻辑。
   实测真站(登出态公开 CSS style.css,桌面 #showD 那份):
     .header-mdl__login       flex column / align-items:flex-end
     .header-mdl__login-form  display:flex / margin-bottom:8px
     input(.form-control)     bg #fff / color #0a0a0a / 14px / padding 6px 12px / min-width 195px / height 32px / margin 0 2px / border none
     .button                  16px / 700 / padding 5px 16px / uppercase / border none / margin 0 4px
     .button--login           bg #6a6a6a color #fff   [注:级联最终值,覆盖了更早的 #1da0cb]
     .button--signup          bg #e3a43b color #212121
     .header-mdl__login-forgot 11px / cursor pointer
     .remember-check          12px / flex / gap 5px
   本站取舍(与既有 .rm-dk-* 桌面账户区保持同一节奏,差异见 REPORT):
     a) 高度 36px 而非真站 32/34px —— 对齐本档既有桌面钮(.rm-dk-dep/.rm-dk-wd/.rm-dk-guest .rm-btn 全 36px)
     b) DAFTAR 用本站金 token var(--pa-primary) 而非硬编码 #e3a43b;LOG IN 用 #2e2f2e+金边而非 #6a6a6a
        —— 沿用 1545-1546 行既有决策(该处注释已记录"实测真站 #e3a43b/#6a6a6a,用我们金 token"),不静默推翻
     c) Remember me 走正常流(真站那颗是 position:absolute;bottom:-27px,那是它 form position:relative 的实现副产品,
        不是视觉规格) —— 视觉结果一致:左下小字
   🔴 手机零变化:.rm-dtl 基线 display:none,只在 @media(min-width:1280px) 打开;1280 是本站既有桌面断点
      (.rm-dk-acct / 桌面 nav / 隐藏侧栏全部同一断点),不是 1024。
   ============================================================ */
.rm-dtl{display:none}
@media(min-width:1280px){
  .rm-dk-guest{align-items:flex-start}
  .rm-dk-guest .rm-dk-daftar,.rm-dk-guest .rm-dk-masuk{display:none}
  .rm-dtl{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
  .rm-dtl-row{display:flex;align-items:center;gap:6px}
  .rm-dtl-in{width:195px;height:36px;box-sizing:border-box;padding:6px 12px;font-size:14px;font-family:inherit;
             color:#0a0a0a;background:#fff;border:1px solid transparent;border-radius:0;outline:0}   /* [v175] 尖角(Gerald)：原 var(--rd-xs)=6px -> 0 */
  .rm-dtl-in::placeholder{color:rgba(10,10,10,.45)}
  .rm-dtl-in:focus{border-color:var(--g-200);box-shadow:0 0 0 2px rgba(255,213,79,.35)}
  .rm-dtl-btn{height:36px;padding:0 18px;font-size:15px;font-weight:700;font-family:inherit;text-transform:uppercase;
              letter-spacing:.3px;border:0;border-radius:0;cursor:pointer;white-space:nowrap}   /* [v175] 尖角(Gerald)：原 var(--rd-sm)=10px -> 0；LOG IN/DAFTAR 共用此规则 */
  .rm-dtl-login{background:#2e2f2e;color:#fff;border:1px solid var(--bd-gold)}
  .rm-dtl-daftar{background:var(--pa-primary);color:var(--pa-primary-fg);border:1px solid #5f0010}
  .rm-dtl-sub{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%}
  .rm-dtl-remember{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--t-2);cursor:pointer;user-select:none}
  .rm-dtl-remember input{width:13px;height:13px;margin:0;accent-color:var(--g-200);cursor:pointer}
  .rm-dtl-forgot{font-size:11px;color:var(--t-2);cursor:pointer;text-decoration:none}
}
@media(min-width:1280px) and (hover:hover){
  .rm-dtl-btn:hover{opacity:.85}
  .rm-dtl-forgot:hover{color:var(--g-100);text-decoration:underline}
}

/* ============================================================
   [顶栏收拢 · 2026-08-18 · v20pct] 桌面顶栏 logo 与 登录/Daftar 簇左右各留 20% 边距
   🔴 数值由 Gerald 直接指定：padding-left / padding-right = 20%（不是先前的 30% 收拢公式，
      也不是对齐 1200 栅格的 calc(50% - 584px)；那两版均已作废）。
   🔴 纯 CSS，零逻辑：只改 .rm-topbar 左右内边距。
      rm-du/rm-dp/_dtopLogin/doLogin/Daftar onclick/Lupa 一行不动（本单 app.js 完全未改）。
      logo 是 .rm-topbar 第一个 flex item（贴 content-box 左缘），登录簇 #rm-dk-acct 靠 margin-left:auto
      （贴 content-box 右缘）—— 改这一颗 padding 即同时、对称移动两端，不必碰任何子元素。

   百分比内边距按【包含块(body)宽度】解析，不含滚动条 —— 比 20vw 准（vw 含滚动条会偏）。
   故左右边距恒等于视口宽的 20%，两侧严格对称。

   🔴🔴 已知窄桌面风险（实测，见 REPORT）：
      可用内容宽 = W - 0.4W = 0.6W；顶栏内容需 logo 160 + 登录簇 598.45 + flex gap 16 = 774.45px。
      => 需 W >= 1290.75px 才放得下。
      媒体查询下限是 1280，所以 1280 <= W <= 1290 这一段会不够宽（登录簇被压缩）。
      1291px 以上不受影响。此为指定数值的固有结果，非实现缺陷；要消除就得降百分比或缩窄登录簇。

   🔴 手机/平板 <1280 零变化：整段锁在 @media(min-width:1280px) 内。
   ============================================================ */
@media(min-width:1280px){
  .rm-topbar{padding-left:20%;padding-right:20%}
}

/* ============================================================
   [Progressive Jackpot · 2026-08-18] main banner 下方金框滚动计数器
   🔴 装饰性计数器，非真实奖池余额（数字由 app.js 的 PJP 段生成，不读余额/API）。
   🔴 纯展示层：只有新 class rm-pjp-*，不改任何既有选择器，不碰登录/资金/路由。

   配色一律取自本站既有 token（红金黑），【不抄参考站 maxwin 的黑金】：
     金框/金字 --g-200 #F2B928 · --g-50 #F7E3A1 · --g-100 #E2C360
     红底      --r-400 #7A0015 -> --r-600 #3D000A（与顶栏 #5f0010 同族）
     光晕      --glow-g-md（既有金光 token）· 立体 --e-2
   两套风格：
     手机 <1280  = 窄版，标题小字在上、数字在下，居中紧凑一条
     桌面 >=1280 = 宽横条，标题靠左、IDR+数字靠右（左右布局）

   🔴 数字用 tabular-nums：等宽数位，滚动时字宽不变 -> 不会每帧抖动重排
      （本档 .rm-dk-bal-amt 已在用同一手法，沿用不发明）。
   🔴 子页隐藏：body.rm-authopen 时一并 display:none，跟 banner/tabs 等首页区块同待遇，
      否则开存款/登录页时这条会悬空浮在上面（本档 450 行那批就是为此存在）。
   ============================================================ */
/* [v178] Progressive Jackpot 改用 Gerald 提供的边框图（方案 D：容器缩到图片原比例 2172x724=3:1，不拉伸不裁切）。
   图左 ~1/3 已烤死金字「PROGRESSIVE JACKPOT」+◆ -> 隐藏 CSS 标题(.rm-pjp-head) 避免重复；
   图右深色框 -> live 数字绝对定位叠进去(百分比=随图等比缩放, 中心≈66%,51%)。
   数字保留金渐变+呼吸光晕；旧扫光(::after)+旧金框渐变边框移除(图自带红金光泽,再扫反脏)。
   [代价] 桌面内容宽 ~1200 时此条约 400px 高(3:1 必然)；嫌高可加 max-width 收窄——待 Gerald 看后定。 */
.rm-pjp{margin:12px 0;container-type:inline-size}   /* [v178] cqw 让数字随容器等比缩放(手机/桌面同一套) */
/* [r8-1 2026-08-24] Jackpot 上下间隙 -90%。
   实测根因:缝隙**不在 CSS**(上边 margin 早就是 0、下边 2.4px),而是**烧在图里** ——
   jackpot-frame.webp 2172x724 里不透明的框只占 y139..577,上方 19.20% / 下方 20.17% 是纯透明,
   在 375px 手机上白白撑出 23.9px / 25.1px。
   做法:不换图、不重新编码(避免二次压缩,且用户已缓存这张),改用 background 当"取景窗"只露 y139..577:
     aspect-ratio 2172/439 = 不透明那段的比例
     background-size 100% 164.92%  (=724/439,整张等比放大后框宽仍是 100%)
     background-position-y 48.77%  (让原图第 139 行落在框顶;offset = -139/439 x 框高) */
.rm-pjp-frame{position:relative;width:100%;aspect-ratio:2172/439;
  background:url(/assets/jackpot-frame.webp?v=2) no-repeat;background-size:100% 164.92%;background-position:50% 48.77%}
.rm-pjp-head{display:none}   /* 图里已有金字标题, 隐藏 CSS 版避免重复 */
/* [r8-1] 框变矮,金额叠层的**纵向**百分比要换算(横向没裁,left/width 不动):
   原 top 36.60%x724 = y264.98,减去裁掉的 139 再除以 439 -> 28.698%;高 28.45%x724 = 205.98/439 -> 46.920%。 */
.rm-pjp-amt{position:absolute;left:37.52%;top:28.698%;width:57.46%;height:46.920%;margin:0;
  display:flex;align-items:center;justify-content:center;gap:2.4cqw}   /* 叠进图右深色框, 居中 */
.rm-pjp-cur{font-family:var(--ff-display);font-weight:700;color:#FFD24D;font-size:2.6cqw;line-height:1}
.rm-pjp-num{font-family:var(--ff-display);font-weight:800;line-height:1;
  color:#FFD24D;font-variant-numeric:tabular-nums;letter-spacing:.5px;font-size:5cqw;
  filter:drop-shadow(0 0 16px rgba(255,210,77,.5)) drop-shadow(0 2px 2px rgba(0,0,0,.6))}
/* 金渐层字：只在支持 background-clip:text 的浏览器启用；不支持保留实色金(绝不透明字隐形)。 */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .rm-pjp-num{background:linear-gradient(180deg,#FFF4CF 0%,#FFD24D 52%,#ffd54f 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    -webkit-text-fill-color:transparent}
}
/* 子页(存款/提款/登录…)打开时隐藏，与既有首页区块同待遇 */
body.rm-authopen #rm-pjp{display:none!important}
/* 数字呼吸光晕：只在用户没要求减少动效时才跑；纯装饰，删掉不影响任何功能 */
@media (prefers-reduced-motion:no-preference){
  .rm-pjp-num{animation:rm-pjp-breathe 3.2s ease-in-out infinite}
  @keyframes rm-pjp-breathe{
    0%,100%{filter:drop-shadow(0 0 10px rgba(255,210,77,.35)) drop-shadow(0 2px 2px rgba(0,0,0,.6))}
    50%    {filter:drop-shadow(0 0 22px rgba(255,210,77,.65)) drop-shadow(0 2px 2px rgba(0,0,0,.6))}
  }
  body.rm-authopen .rm-pjp-num{animation-play-state:paused}
}

/* ===== [mobile 版面四改 · 2026-08-21] header 清空 + logo 置中 + marquee 上移 + CTA 全出血黏合 =====
   需求(用户+手机截图): (1) header 的 Daftar/Masuk 移除  (2) 中间那两颗移到 main banner 下面、黏合并贯穿全屏
                        (3) running text 移到 main banner 上面  (4) header logo 置中
   断点 max-width:1279px = 紧贴桌面 min-width:1280 的下缘, 刻意不制造第三种版面。
   纯展示层: 不碰 app.js、不碰 HTML、不碰登录/资金/路由。

   RISK-A: .rm-topbar-right 就是 #rm-auth-area —— 登录后 applyLoggedIn() 会往里塞 通知铃/余额/存款捷径。
           所以绝不可整块 display:none, 只藏两颗未登录按钮; 用子选择器 > 是必要的,
           因为 .rm-btn-register 另有一颗在 CTA 里(不加 > 会连那颗一起藏掉)。
   RISK-B: #rm-cta-inline 登录后被 innerHTML 换成 Deposit/Withdraw(#rm-cta-topup / #rm-cta-wd),
           所以全出血+黏合会同时套到那两颗资金按钮上。已知, 两种状态都截图给 Gerald 定。
   RISK-C: .rm-brand 有【两颗】—— #rm-brand(topbar) 与 #rm-sidebar-brand(抽屉)。
           抽屉那颗的祖先 .rm-sidebar 是 position:fixed, 且 .rm-sidebar-head 只在 >=1280 隐藏,
           正好在本断点内可见 -> 置中规则必须 scope 到 #rm-brand, 绝不可写 .rm-brand。
   RISK-D: app.js payScroll() 里有唯一一处硬编码 -72 在给 sticky header 让位(服务存款付款页)。
           所以 .rm-topbar 高度必须【逐值不变】, 没有可接受的 delta。若本区块令它塌高, 要补回原值。

   地基: 全出血靠 base 里 html,body 的 overflow-x:clip(全档恰好 1 处) 吸收溢出。删掉它这套全塌。
         经典滚动条平台带内内容会左偏约半个滚动条宽, 判定容差按 SBW 走, 不是硬性 left==0。 */
@media(max-width:1279px){
  /* (1) 只藏两颗未登录按钮, 容器留给登录态用 —— 见 RISK-A */
  .rm-topbar-right>.rm-btn-register,
  .rm-topbar-right>.rm-btn-login{display:none}

  /* (4) logo 置中。.rm-topbar 本身 sticky = 定位祖先; top/left 双锚, y 不依赖 .rm-topbar-left 的盒。
     🔴 只在【未登录态】置中: 登录后 applyLoggedIn() 会在右侧塞 通知铃/钱包/存款 三颗,
        实测 390 视口下置中的 logo 会被通知铃盖住 42x32px(logo 159.45-230.55 vs 铃 185.06-227.06)。
        所以 body.rm-authed 时不套这条 -> 登录态维持今天的靠左原样(零变化)。
        已知代价: 登录用户载入时 logo 会从中间跳回左边(applyLoggedIn 是异步)。
        🔴 已实测(不是猜, 也不是照抄 app.js:553 那句注释): 本站 html.rm-pre-auth 【恒不触发】, 别指望拿它挡这个跳动。
        证据链: rm-pre-auth 由 index.html 内联脚本在 localStorage.rm_token 非空时加上;
          rm_token 只有 setToken(app.js:1430) 会写, 全档 6 个调用点里【只有 2 个是写值】—— :1957(登录) 与 :2028(注册),
          其余 :1442/:2050/:2055 都是 setToken("") 清值;
          而 doLogin(:1923) 在 if(GOLIVE.login){...return} (:1932) 内先返回, 到不了 :1957;
          doRegister(:1964) 在 if(GOLIVE.register){...return} (:1965) 内先返回, 到不了 :2028
          (:2028 所在的 submitRegister 只被 renderBankInfo:2580 调, 而 renderBankInfo 只在那条 return 之后的 legacy 分支被开);
          GOLIVE.login = GOLIVE.register = true (:52) -> 两个写值点都不可达。
        连带 app.css:64 的 html.rm-pre-auth .rm-cta-inline{visibility:hidden} 今天也是死码(既有问题, 非本批造成)。
        🔴 推翻条件: 谁把 GOLIVE.login 或 GOLIVE.register 改成 false, 上面整条结论立刻失效。 */
  body:not(.rm-authed) #rm-brand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}

  /* (2)(3) 重排: marquee -> banner -> CTA -> 其余(jackpot/tabs/...)按 DOM 序 */
  .rm-content{display:flex;flex-direction:column}
  .rm-content>.rm-marquee{order:-3}
  .rm-content>.rm-banner{order:-2}
  .rm-content>.rm-inforow-band{order:-1}

  /* (2) CTA 全出血 + 两颗黏合 */
  .rm-content>.rm-inforow-band{
    margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
    flex-direction:row;align-items:stretch;gap:0}
  .rm-inforow-band>.rm-cta-inline{width:100%;gap:0}
  .rm-cta-inline>.rm-btn{flex:1 1 0;min-width:0;border-radius:0}
}

/* [RISK-D 回填 · 同一批] 901-1279 这段 base 没有 min-height, header 高度是内容撑出来的 91px(实测 901/950/1000/1100/1200/1279 全为 91, padding 12/12)。
   上面那个区块把 logo 抽出流、又藏掉两颗未登录按钮之后, 内容只剩 63px(guest) / 67px(构造登录态) -> header 会塌 28px。
   而 app.js payScroll() 里有全档唯一一处硬编码 -72 在给 sticky header 让位(服务存款付款页),
   所以 header 高度必须【逐值还原】, 没有可接受的 delta —— 塌了会把付款卡压到 header 底下。
   <=900 已有自己的 min-height:79px, 不在此列, 故下界锁 901。 */
@media(min-width:901px) and (max-width:1279px){
  .rm-topbar{min-height:91px}
}

/* ===== [mobile 第二轮七项 · 2026-08-21] header 变薄 / marquee 贴合放大 / banner+CTA 全出血 / jackpot 贴合收边 =====
   需求(用户+手机截图): (1) header 缩小 30%  (2) running text 贴住 header 零缝  (3) running text 加大 15%
                        (4) main banner 左右贯穿全屏  (5) Daftar/Masuk 去 border、无空隙、贯穿全屏
                        (6) jackpot 与上方间距 -100%  (7) jackpot 左右空隙 -95%
   纯展示层: 不碰 app.js、不碰 HTML 结构、不碰登录/资金/路由。

   断点分两段, 刻意不同:
     (1) 只在 <=900 —— 901-1279 的 91px 是内容撑出来的, 压薄要连内容一起动, 超出本单; 那段维持 91px 不变。
     (2)~(7) 在 <=1279 —— 与上一批四改同一个断点, 不制造第三种版面。

   RISK: app.js:3230 payScroll() 硬编码 -72 给 sticky header 让位(存款付款页)。
         header 79->55 后 -72 > 55 -> 付款卡停在距顶 72px 而 header 只占 55 => 多 17px 空白,
         【不会遮住内容】; 变高才会遮, 变矮是安全的那一侧。已实测 header 未变高。

   全出血写法说明(别照抄成 100vw): 百分比 margin 相对【父容器内容盒宽】解析, 不是视口。
     calc(50% - 50vw) 正好等于 -(padding + 居中偏移), 所以元素左缘落到视口 0;
     再 +0.8px 就是「左右各留 0.8px」。这套在任何视口宽都成立(390 与 1279 都实测过)。 */
@media(max-width:900px){
  /* (1) header 缩 30%: 79 -> 55 (79 x 0.7 = 55.3, 取整 55)。
     🔴 min-height 单独不够 —— 它不压缩内容:
        登录态最高子元素是 .rm-wpill / .rm-hd-noti = 42px, 42 + 10 + 10 + 1(border-bottom) = 63 -> min-height:55 压不住;
        guest 在 768/900 是汉堡 38px, 38 + 12 + 12 + 1 = 63, 同样压不住。
     所以纵向 padding 一起降到 6: 登录态 42+6+6+1 = 55 刚好, guest 38+6+6+1 = 51 由 min-height 托到 55
     => 整个 <=900 的【两种登录状态】都精确等于 55。
     🔴 只用 longhand padding-top/padding-bottom, 绝不动 shorthand ——
        横向 padding 由 :1380(<=430 给 8px) / :345(<=520 给 10px) / :333(<=900 给 12px) 各自决定,
        它是汉堡 left 与置中 logo 的定位盒, 一起改会移动它们。 */
  .rm-topbar{min-height:55px;padding-top:6px;padding-bottom:6px}
}
@media(max-width:1279px){
  /* (2) marquee 贴住 header: 原 22px 缝 = .rm-content padding-top 14 + .rm-marquee margin-top 8 */
  .rm-content{padding-top:0}
  .rm-content>.rm-marquee{margin-top:0}

  /* (3) running text +15%: 字 7 -> 8.05, 图标 11 -> 12.65。
         选择器带 .rm-content>.rm-marquee 前缀是为了赢过 :179 / :1302 的裸类选择器;
         桌面 >=1280 的 14px/15px 在另一个 media 里, 不受影响 */
  .rm-content>.rm-marquee .rm-mq-item{font-size:8.05px}
  .rm-content>.rm-marquee .rm-mq-ico svg,
  .rm-content>.rm-marquee .rm-mq-ico img{width:12.65px;height:12.65px}

  /* (4) main banner 左右贯穿全屏 */
  .rm-content>.rm-banner{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}

  /* (5) Daftar/Masuk 去 border。全局 *{box-sizing:border-box}(:52) 故高度仍 52px, 不是掉成 50。
     🔴🔴 选择器必须锁死 guest 那两颗, 【绝不可】写成 .rm-cta-inline>.rm-btn 这种通用式:
        登录後 #rm-cta-inline 被 app.js:2117-2118 换成 Deposit/Withdraw(class = rm-btn rm-cta-btn rm-cta-wbtn),
        而 :772 .rm-cta-wbtn{background:transparent; border:1.5px solid ...} ——
        Withdraw 【底色是透明的】, 那道 1.5px 金边就是它唯一的可见边界。
        通用式会把它抹成透明底+零边框+零圆角+零间距, 紧贴绯红 Deposit
        => 提款按钮的可点区域【完全没有视觉边界】。这不是美观是可发现性。
        (Deposit 不受影响: :304 #rm-cta-topup 自带绯红底且本来就 border:0。)
     🔴 附带作废一条旧结论: 上一批判定「资金按钮不必加分隔线」的唯一依据就是「金边已经在那」,
        本单若删掉那道金边, 那个结论【自动失效】, 不可继承。 */
  .rm-cta-inline>.rm-btn-register,
  .rm-cta-inline>.rm-btn-login{border:0}

  /* (6) jackpot 与上方间距 -100%: 原 26 = band margin-bottom 14 + .rm-pjp margin-top 12 */
  .rm-content>.rm-inforow-band{margin-bottom:0}

  /* (7) jackpot 左右空隙 -95%: 16 -> 0.8; 同时吃掉 (6) 的 margin-top */
  /* [r8-1] margin-top 0 -> 2.4px:图里的透明边被取景窗切掉后上方缝隙归零,留 2.4px = 原 23.9px 的 10%
     (用户要 -90% 不是 -100%)。 */
  .rm-content>.rm-pjp{margin-top:10px;
    margin-left:calc(50% - 50vw + 0.8px);margin-right:calc(50% - 50vw + 0.8px)}
}

/* ===== [mobile 第三轮四项 · 2026-08-21] logo +10% / marquee 全出血+金边+放大 / CTA 换侧栏配色 =====
   需求(用户+手机截图): (1) header logo 放大 10% 【但不准改变 header 的 size】
                        (2) running text 贯穿全屏、左右无 border、上下金黄 border、喇叭 icon 金黄
                        (3) running text 再放大 15%
                        (4) Daftar / Masuk 颜色跟侧栏一模一样(灰/橙), 含 icon
   纯展示层: 不碰 app.js、不碰 HTML、不碰登录/资金/路由。

   RISK-A(第1项范围): .rm-brandmark 是分段响应式 —— <=430 32px(:1384) / 431-520 45px(:348) / 521-900 54px(:335)。
     若全段 +10%: 431-520 -> 49.5, member header 58 -> 62.5 = 违反需求 1 自己「不改变 header size」的约束;
                  768-900 -> 59.4, member header 67 -> 72.4 > 72
                  = 撞破 app.js:3230 payScroll() 的 -72, 存款付款卡会开始被 header 遮住。
     故【只在 <=430 施加】(35.2 < content box 42, 两态 header 都仍 55; 用户真机 390 在此段内)。

   RISK-B(第1项 scope): .rm-brandmark 在 HTML 里有【三颗】—— 顶栏 / 侧栏 #rm-sidebar-brand / footer。
     footer 有自己的 :327 .rm-footer-brand .rm-brandmark{height:40px} 挡着, 但【侧栏那颗没有任何 height 覆盖】,
     裸 .rm-brandmark 会连抽屉 logo 一起放大。故 scope 到 .rm-topbar。(同 round-1 RISK-C 那一类。)

   RISK-C(第1项 几何): height +10% 且 width:auto => 同时变宽约 10%; 而 logo 是绝对置中、汉堡在 left=8,
     且 logo 带 transform 会画在汉堡【上面】。相交 = 汉堡按不到 = 手机唯一导航进不去。
     -> 交付必测 #rm-brand x #rm-hamburger 交集面积 == 0 (重点 320)。

   🔴 第4项: 知情地偏离一条既有原则, 原理由保留不抹
     :1580-1581 (@media min-width:1280px) 记录过: 「DAFTAR 用本站金 token var(--pa-primary) 而非硬编码 #e3a43b;
     LOG IN 用 #2e2f2e+金边而非 #6a6a6a」, 并注明「不静默推翻」。
     本次依用户 2026-08-21 明确指令, 让【手机 CTA】改用侧栏那两个色。
     范围界定(已实测): 那条原则的执行点在 @media(min-width:1280px) 内 = 桌面专属;
       而侧栏 :1455-1456 是【顶层规则】, 本站侧栏一直就在用 #6a6a6a / #e3a43b。
       故本次不是推翻桌面那条决定(桌面一个字未动), 而是让手机 CTA 与侧栏统一。
     🔴 代价(知情接受, 不抹): 手机 CTA(#e3a43b/#6a6a6a) 从此【不再与桌面登录栏(金 token/#2e2f2e)同色】。
     ⚠️ 坏指针备忘: :1653 写「沿用 1545-1546 行既有决策」—— 那两行今天是 v178 nav 去挤的注释, 与颜色无关。
        真址是 :1580-1581, 行号漂了约 35 行。别照 :1653 去找。(坏指针本身另开单, 本批不就地改, 以保「纯 EOF 追加」。)
     🔴 对比度(已量, WCAG): 白字 on #e3a43b = 2.18:1 —— 连非文本 3.0 都不到(正文需 4.5)。
        现况 Daftar 深字 on 金 = 8.65-10.15 AAA。真站 .button--signup 用的是 #212121 深字 = 7.39:1 AAA。
        Masuk 白字 on #6a6a6a = 5.41:1 AA, 两版皆同。
        🔴 用户 2026-08-21 看过两版对照截图後【选乙版】: Daftar 文字与 icon 用 #212121 深字。
        => 背景照他要的侧栏橙 #e3a43b, 文字取真站 .button--signup 的 #212121 = 7.39:1 AAA。
        与侧栏的差异【只在文字色】(侧栏是白字 2.18:1) —— 这是他知情选择, 不是我们静默替换。
        Masuk 白字 on #6a6a6a = 5.41:1, 两版本来就相同。
        改回白字 = 改本块 2 行 color, 一条命令重部署。 */
@media(max-width:430px){
  /* (1) header logo +10%: 32 -> 35.2。scope 到 .rm-topbar, 见 RISK-B */
  .rm-topbar .rm-brandmark{height:35.2px}
}
@media(max-width:1279px){
  /* [用户 2026-08-21 加选] 取消 header 的 border-bottom。
     理由: marquee 的金黄 top border 会直接压在 .rm-topbar 自己的
           border-bottom:1px solid rgba(255,255,255,.04)(:77) 上, 视觉读成 2px 双线接缝。
     🔴 已量的代价(实测值, 不是推算): border-box 计入高度, 去掉这 1px 後 ——
        <=430 两态仍 55(min-height:55 顶着, 内容盒长 1px 而已);
        431-520 member 58 -> 57; 768-900 member 67 -> 66 (各 -1px);
        901-1279 header 【仍 91, 未变】—— round-1 那条 min-height:91 顶着, 同 <=430 的道理。
          (我原本预测这里会掉成 90, 实测推翻了自己的推算; 保留这行是为了让後人知道
           「border-box + min-height 时, 去 border 不改总高」这条已经被量过。)
        全部仍 < 72, payScroll 不受影响。断点取 <=1279 与金边同范围, 免得 901-1279 留下双线。 */
  .rm-topbar{border-bottom:0}

  /* (2) marquee 贯穿全屏 + 左右去边去圆角 + 上下金黄边 */
  .rm-content>.rm-marquee{
    margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
    border-radius:0;border-left:0;border-right:0;
    border-top:1px solid var(--g-200);border-bottom:1px solid var(--g-200)}

  /* (2) 喇叭 icon 金黄 (原 #d0182f 红) */
  .rm-content>.rm-marquee .rm-mq-ico{color:var(--g-200)}

  /* (3) running text 再 +15%: 字 7 x 1.15^2 = 9.2575, 图标 11 x 1.15^2 = 14.5475
         (从【规格值】链式推, 不从浏览器取整后的 used value 再乘) */
  .rm-content>.rm-marquee .rm-mq-item{font-size:9.2575px}
  .rm-content>.rm-marquee .rm-mq-ico svg,
  .rm-content>.rm-marquee .rm-mq-ico img{width:14.5475px;height:14.5475px}

  /* (4) Daftar = 侧栏橙 #e3a43b (:1456) / Masuk = 侧栏灰 #6a6a6a (:1455), 含 icon。见上方 RISK 段。
         用 background 简写以清掉 :110 的金渐变 background-image。
         icon 需 (0,3,0) 才赢过 :1343/:1344 的 (0,2,0)。 */
  .rm-cta-inline>.rm-btn-register{background:#e3a43b;color:#212121}
  .rm-cta-inline>.rm-btn-register .rm-btn-ic{color:#212121}
  .rm-cta-inline>.rm-btn-login{background:#6a6a6a;color:#fff}
  .rm-cta-inline>.rm-btn-login .rm-btn-ic{color:#fff}
  /* [cta-match 2026-08-29] 登入态的 Deposit / Withdraw 改成与登出态的 Daftar / Masuk 完全同款。
     指示:「deposit withdraw 的設計和顏色要跟 before login 的 daftar 和 login 一樣」。
     对应:Deposit <- Daftar(主要,金 #e3a43b + 深字);Withdraw <- Masuk(次要,灰 #6a6a6a + 白字)。
     数值【逐字照抄】上面四条,不另创色。
     🔴 必须用 id 选择器:两颗按钮共用同一个 class `rm-cta-wbtn`(app.js 生成时两颗都挂),
        用 class 无法区分主次 —— 只能靠 #rm-cta-topup / #rm-cta-wd。
     🔴 必须放在这个 @media(max-width:1279px) 内:登出态的 Daftar/Masuk 配色本身就是手机限定,
        写到顶层会让桌面两态不一致。
     🔴 纯样式:app.js 完全没动,onclick(openDeposit/openWithdraw)与资金流程一个字节未碰。
     备注:#rm-cta-topup 另有一个既有的 shine 扫光动画(::after),Daftar 没有 —— 本轮【保留】,
     因为那是既有的资金 CTA 引导设计,移除属业务决定不是我该定的。要拿掉就加
     `.rm-cta-inline>#rm-cta-topup::after{display:none}`。 */
  .rm-cta-inline>#rm-cta-topup{background:#e3a43b;color:#212121;border:0;
    box-shadow:0 4px 12px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.35),inset 0 -2px 0 rgba(0,0,0,.22);
    background-image:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 46%,rgba(0,0,0,.10))}
  .rm-cta-inline>#rm-cta-topup .rm-btn-ic{color:#212121}
  .rm-cta-inline>#rm-cta-wd{background:#6a6a6a;color:#fff;border:0;
    box-shadow:0 4px 12px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.35),inset 0 -2px 0 rgba(0,0,0,.22);
    background-image:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 46%,rgba(0,0,0,.10))}
  .rm-cta-inline>#rm-cta-wd .rm-btn-ic{color:#fff}
}

/* ===== [HOTFIX · 2026-08-21] 修 round-1 引入的子页宽度回归 =====
   症状: 所有子页(Promosi / Deposit / Withdraw / Register / Login / Wallet / History ...)的容器
         .rm-authpage 在手机上被挤成 111.4px 宽、居中一条, 而不是满宽 358px。
   何时引入: round-1 (?v=179) 把 .rm-content 改成 display:flex; flex-direction:column。
   根因(已实测, 不是推测): .rm-authpage 自带 max-width:460px + margin:0 auto。
         在 flex 容器里, 【cross-axis 的 auto margin 会关掉 align-items:stretch】,
         元素於是缩成 fit-content, 剩下的空间被两侧 auto margin 吃掉(实测 margin: 0 123.297px)。
         block 布局下 auto margin 不产生这个效果, 所以 round-1 之前一直是对的。
   修法: 给它显式 width:100% —— 恢复 block 时代的行为(实测 358px / left 16, 与 <=v178 相同);
         max-width:460px 保留, 宽屏仍然收口并居中。
   🔴 教训记在这: round-1/2/3 三轮都只验了【首页】, 子页从来没人看过。
      .rm-content 是所有页面的共同容器, 改它的 display 会波及每一个子页。 */
@media(max-width:1279px){
  .rm-content>.rm-authpage{width:100%}
}

/* ===== [mobile 第四轮四项 · 2026-08-21] CTA 变矮 / banner 箭头 / jackpot 收缝 / footer 换色 =====
   需求(用户+手机截图): (1) Daftar & Masuk 高度缩小 10%
                        (2) main banner 左右加圆形箭头
                        (3) category bar 跟 jackpot 的间隙缩小 80%
                        (4) footer 颜色跟 header 一样、有一点 gradient
   🔴 本轮是本专案【第一次动 app.js】(仅第 2 项需要, 两处纯新增, 见 app.js 内注释)。
      失去「app.js md5 未变」这个安全证明後, 改用: 逐 hunk diff + 函数清单 delta + 资金/认证子集指纹。

   RISK-A(第1项范围): member 的 Deposit/Withdraw 也带 .rm-cta-btn(app.js applyLoggedIn 产的 class),
     所以 52->46.8 是【两态一起】。刻意如此: 只缩 guest 会让登入前後版面跳高度。已报用户。
     height 不是 min-height -> 内容超了会溢出不会撑开, 故交付要量 rendered height 与 scrollHeight。

   RISK-B(第4项): 用户选【渐层方向翻转】(上亮 #b0001e -> 下深 #5f0010), 不是照抄 header 的上深下亮。
     顶端 #b0001e 上的原灰字 #a9a9ad 只有 3.13:1(正文需 4.5) -> 用户选【正文改白】(白 on 顶 7.33 / on 底 14.06)。
     ⓘ 曾评估过的 .rm-footer-18 金色徽章: 实测 index.html 与 app.js 里【都是 0 次出现】,
        CSS 规则(:1375)是没有元素在用的空壳 -> 那个对比度问题在本站【不存在】, 不需处理。
     🔴 只改 <=1279 -> 桌面 footer 从此与手机不同色。已报。 */
@media(max-width:1279px){
  /* (1) CTA 高 52 -> 46.8 (-10%) */
  .rm-cta-inline>.rm-btn{height:46.8px}

  /* ===== [r8 第八轮 · 2026-08-24] 分类栏深红底 + provider~游戏 灰色大框 =====
     深红用 --r-500(#5F0010) —— 顶栏渐层的起点色,不是新造的颜色。
     全出血用 calc(50% - 50vw)(跟 banner 同一招,比 -16px 多防一层滚动条偏移);
     padding 左右 20 = .rm-content 的 16 + .rm-tabs 原本自己的 4,所以内容位置一点没动。
     灰框把 provider bar / 筛选列 / 游戏格 三个**兄弟元素**串成一片连续背景:
       - 各自 margin -8 / padding +8 -> 框往外长 8px,里面内容宽度不变
       - 元素之间原有的 margin-bottom(6 / 10)会在背景上切出黑缝,所以改挂成下一个元素的 padding-top
       - 🔴 .rm-filterrow 在**非 slot 分类**仍然显示(它装着搜索框),所以灰底挂在 JS 给的
         .rm-slotbox 上而不是无条件套 —— 否则体育/真人页会多出一条孤零零的灰带。
         不用 :has():本项目铁律,它搭 @media 会泄漏到断点外。 */
  /* [r14 2026-08-25] 分类栏底色:纯 --r-500 -> 与顶栏同一条渐层(--r-500 上 -> --r-300 下)。 */
  .rm-content>.rm-tabs{background:linear-gradient(180deg,var(--r-500) 0%,var(--r-300) 100%);
    margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding:9px 20px}   /* [r15 移植自 s777 2026-08-27] 分类栏缩 10%:纵向各项 x0.9;左右 20 不动(全出血,横向缩不了,动它会跟页面其它内容对不齐) */
  .rm-content>.rm-provwrap,
  .rm-content>.rm-filterrow.rm-slotbox,
  .rm-content>.rm-grid.rm-grid-slot{background:#1c1c1c;margin-left:-8px;margin-right:-8px;   /* [r13 2026-08-25] 灰框再压深一档 #2a2a2a -> #1c1c1c(亮度约减半)。仍比卡片 #141414 亮一点,层次不倒过来;框的边界另有那圈深红细线撑着。 */
    padding-left:8px;padding-right:8px}
  .rm-content>.rm-provwrap{border-radius:10px 10px 0 0;padding-top:8px;margin-bottom:0}
  .rm-content>.rm-filterrow.rm-slotbox{padding-top:6px;margin-bottom:0}
  .rm-content>.rm-grid.rm-grid-slot{border-radius:0 0 10px 10px;padding-top:10px;padding-bottom:10px}

  /* [r9-1 2026-08-24] 灰框加一圈浅浅的深红细线。用现成 token --bd-brand(rgba(225,29,52,.38)) ——
     叠在 #2a2a2a 上算出来是 rgb(112,37,46),就是「浅浅的深红」,不是新造颜色。
     🔴 三个元素各自只画外圈那几条:provwrap 不画下、grid 不画上、中段只画左右 ——
     否则元素接缝处会多出两条横线,把一个框切成三个框。 */
  .rm-content>.rm-provwrap{border:1px solid var(--bd-brand);border-bottom:0}
  .rm-content>.rm-filterrow.rm-slotbox{border-left:1px solid var(--bd-brand);border-right:1px solid var(--bd-brand)}
  .rm-content>.rm-grid.rm-grid-slot{border:1px solid var(--bd-brand);border-top:0}

  /* [r9-2 2026-08-24] provider bar 左右键 —— 照 rodabet 线上实测那份:
     22px 等高金竖条、贴齐两端、条件显示(在最左藏左键、在最右藏右键)、点一下滑 70% 可视宽。
     rodabet 用 #E1B72E;这里换成本站金 token --g-300(#D9B300)+ .rm-fbtn-on 同款深字 #281800。
     顶角 9px(不是 10px):按钮绝对定位在 padding box 内、被那 1px 红边包着,少 1px 才不会露白角。 */
  .rm-prov-arrow{position:absolute;top:0;bottom:0;width:22px;z-index:6;
    display:none;align-items:center;justify-content:center;
    /* [r10] 金 -> 深红渐层 + 白箭头。深红条本身压在 #2a2a2a 上只有 1.99:1(偏暗),
       所以**看得见的那个东西是白色箭头字形**(在 #b0001e 上 7.33:1),不是靠底色。 */
    border:0;padding:0;cursor:pointer;background:linear-gradient(180deg,#b0001e,#5f0010);color:#fff;
    font-size:15px;font-weight:800;line-height:1;font-family:inherit;-webkit-tap-highlight-color:transparent}
  .rm-prov-arrow-l{left:0;border-top-left-radius:9px}
  .rm-prov-arrow-r{right:0;border-top-right-radius:9px}
  /* 两端留 24px,让 scrollIntoView/键盘滚动不会把 chip 停在金条底下(rodabet 同值) */
  .rm-provstrip{scroll-padding-left:24px;scroll-padding-right:24px}

  /* (3) jackpot 与 category bar 的缝 12 -> 2.4 (-80%)。
         来源是 .rm-pjp 的 margin-bottom(实测 tabs margin-top = 0) */
  /* [r8-1] 下方真实视觉缝 = 图内透明 25.1px + 这条 2.4px = 27.5px;取景窗吃掉前者后这条设 2.75 = 10%。 */
  /* [sync 2026-08-29] 从 s777bet r26~r32 移植。逐项判断可移植性,不整档复制:
   - 几何/结构/字级/触控 -> 移植
   - 品牌色 -> 只在 t88 自己不达标时才动(本轮 t88 的 #f0c22e 对比度 5.26 已达标,故【不动】)
   - s777 的 .float-icons 覆盖 -> 【不移植】,t88 没有 CMS 注入的浮动按钮(四个档 0 命中) */
/* [r26] 顶部四块垂直间距统一 10px。实测原本 Daftar->Jackpot 与 Jackpot->分类条 只有 3px。 */
.rm-content>.rm-pjp{margin-bottom:10px}
.rm-content>.rm-tabs{margin-bottom:10px}
.rm-content>.rm-inforow-band{margin-top:10px}
/* [r27] 顶部四块左右内缩 8px + 圆角 10px,与下面本来就内缩的 provider 灰框对齐。
   🔴 .rm-tabs 绝不能加 overflow:hidden —— 它靠 overflow-x:auto 左右滑动。
   .rm-banner 自带 overflow:hidden,只需补圆角;.rm-pjp 不给圆角(Jackpot 美术图四角本就透明)。 */
.rm-content>.rm-banner,
.rm-content>.rm-inforow-band,
.rm-content>.rm-pjp,
.rm-content>.rm-tabs{margin-left:-8px;margin-right:-8px}
.rm-content>.rm-banner{border-radius:10px}
.rm-content>.rm-inforow-band{border-radius:10px;overflow:hidden}
.rm-content>.rm-tabs{border-radius:10px}
/* [r28+r31] 分类条右缘金色圆箭头:8 个分类 657px 塞进 374px,右边被切断却无任何可滑提示。
   position:sticky 钉在滚动视口右缘,不需包 wrapper(不动 DOM 结构)。
   ::after 把点击区扩到 44x44,且【不对称】(右扩 14、左扩 0)——
   s777 实测对称扩会盖住完整可见 tab 的中心点,玩家点分类会变成滑动。
   .rm-tabs-end 由 index.html 的 scroll 监听切换:滑到底淡出 + pointer-events:none。 */
/* [flush 2026-08-29] 箭头 right:-12px -> -20px(齐边)。Gerald 拍板选「误触归零」。
   WHY:上一版留 8px 呼吸位比较好看,但实测在 430px(iPhone Pro Max)宽度下,
   Poker 这一格【完整可见】而其中心点正好落在箭头本体下 —— 玩家点分类会变成滑动。
   判定标准:该 tab 完整可见 且 中心点在点击区内 = 真误触(只擦到边缘不算)。
   齐边后实测 360/375/390/414/430/486/540/600/655 九个宽度【误触归零】;
   680/760 不可滑 -> 箭头自动隐藏。代价:箭头贴住容器右缘,观感比留白紧一点,
   这是知情取舍(误触 > 观感),要回留白就把 -20px 改回 -12px。 */
.rm-tabs-arrow{position:sticky;right:-20px;flex:0 0 auto;align-self:center;
  width:30px;height:30px;margin-left:-30px;padding:0;border:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#f6d878,#d9a326);color:#4a0009;
  font-size:20px;font-weight:900;line-height:1;font-family:inherit;
  cursor:pointer;z-index:5;-webkit-tap-highlight-color:transparent;
  box-shadow:0 2px 7px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.5);
  transition:opacity .18s ease}
.rm-tabs-arrow::after{content:"";position:absolute;inset:-7px -14px -7px 0;border-radius:50%}
.rm-tabs-end .rm-tabs-arrow{opacity:0;pointer-events:none}
/* [r29] footer 与条款区对齐其余区块(它们本身没有任何 CSS 规则,是裸 div)。 */
.rm-content>.rm-footer,
.rm-content>.maha-ultra-design{margin-left:-8px;margin-right:-8px}
/* [r29] 收掉 footer 下方 96px 死白:body 已有 padding-bottom 为固定底部导航让位,
   .rm-content 那 96px 是纯多余。 */
.rm-body>.rm-content{padding-bottom:20px}

  /* (4) footer 换 header 同色系渐层(方向翻转) + 正文改白。
         子元素 :1370/.rm-footer-desc,.rm-footer-copy 自带 #a9a9ad, 不吃父层 color, 必须点名。 */
  .rm-footer{background:linear-gradient(180deg,#b0001e 0%,#5f0010 100%)}
  .rm-footer,
  .rm-footer .rm-footer-desc,
  .rm-footer .rm-footer-copy{color:#fff}
}

/* (2) banner 左右圆形箭头。元素由 app.js 无条件建立, 可见性靠 .rm-ban-multi;
       桌面靠这条顶层 display:none 隐藏(元素仍存在於 DOM, 桌面断言请用 computed display)。 */
.rm-ban-nav{display:none}
@media(max-width:1279px){
  .rm-banner.rm-ban-multi .rm-ban-nav{
    position:absolute;top:50%;transform:translateY(-50%);z-index:6;
    display:flex;align-items:center;justify-content:center;
    width:30px;height:30px;padding:0;border-radius:50%;
    border:1px solid var(--g-200);background:rgba(0,0,0,.42);color:var(--g-200);
    cursor:pointer;-webkit-tap-highlight-color:transparent}
  .rm-banner.rm-ban-multi .rm-ban-prev{left:8px}
  .rm-banner.rm-ban-multi .rm-ban-next{right:8px}
}

/* ===== [mobile 第五轮 · 2026-08-23] Promosi 卡片:图在上、文字在下 =====
   需求(用户): Promosi 卡片「弄到刚刚好」。
   现况诊断(实测,非推测): 问题不在图片尺寸 ——
     .rm-rw-card(:582) 固定 height:260px, 而 BO 图是 1100x210(约 5.24:1)的横幅条;
     .rm-rw-img(:583) absolute inset:0 + object-fit:contain + object-position:center top
     => 图完整渲染成 348x66.4(不裁不变形), 但卡片下方【空掉约 194px】, 标题与按钮浮在那片空上。
   用户三选一後选【图在上、文字在下】(另两案: 只留图+按钮拿掉标题 / 保持 260 把图裁满 —— 後者会切掉图里烤死的字)。

   做法: 纯 CSS 不动 markup。promoCards()(app.js:1679) 产的子元素是
         img -> shade -> shine -> pill -> title -> button, 而 shade/shine/pill 都是 absolute【不进流】,
         所以卡片改 flex column 後, 流里正好只剩 img -> title -> button, 顺序就是要的。

   🔴 已查(不是跳过): 本次 flex 化【不会重演 round-1 那个坑】。
      round-1 把 .rm-content 改 flex, 令 .rm-authpage(margin:0 auto) 被 cross-axis auto margin
      关掉 stretch 而塌成 73px。本次流内子元素 img(width:100%) / pill / title / learn 的 margin 都是
      "0 14px"(只有左右, 纵向交给容器 gap) 【没有任何横向 auto margin】; 且外层 .rm-rw-list(:581) 本来就是
      flex column 且无固定高, .rm-rw-card 早就是 flex item, 不会 shrink。

   🔴 已知代价(已量, 报 Gerald):
     (a) 破图/无图态: promoCards 里 <img> 是条件式的(p.img 为空则不产元素), 且带 onerror -> display:none。
         旧版卡片恒 260px 撑着看不出来; 新版 height:auto 时卡片会塌成「标题+按钮」, 且 .rm-rw-shade 已关。
         -> 两态都已实测截图, 若难看的解是给 min-height(不是回到固定 260), 等 Gerald 定, 本批不加。
     (b) 只改 <=1279 -> 桌面 promo 卡片仍是 260px 带同样空白。【已知缺陷、刻意不在本单修】,
         後果: 手机与桌面的 promo 卡片从此结构不同(手机图上文下 / 桌面图叠文字)。

   ⚠️ 命名坑: .rm-rw-*(列表卡) 与 .rm-rwd-*(详情页 hero) 只差一个字母。
      本区块用的是精确类名, 不受影响; 但【任何 [class*="rm-rw"] 之类的通配选择器会同时命中两组】, 别那样写。
   ⚠️ 既有状况(非本轮): markup 有 rm-rw-pill--rebate, 但 CSS 只定义了 --cashback(:590), 前者只吃基础 pill 样式。 */
@media(max-width:1279px){
  /* 🔴 纵向节奏放在【容器 gap】而不是各子元素的 margin-top ——
     因为 promoCards() 里【img 与 pill 都是条件式的】:
       img  : p.img 为空则不产元素; 且带 onerror -> display:none
       pill : p.cat 为空则不产元素(app.js:1661; mapPromoBO 的 cat 取 a[3]||"")
     若把间距写在子元素的 margin-top 上, 少一个元素就少一段间距 —— 实测曾出现
     「有分类的卡图下留 10px / 无分类的留 6px」这种 4px 不一致。
     改用 gap 之後【谁在谁不在都一样】, 这个依赖直接消失。
     (本专案规矩: 任何让版面开始依赖「子元素在不在」的改动都要主动构造缺失态;
      而更好的做法是把版面写成【根本不依赖】。) */
  .rm-rw-card{height:auto;display:flex;flex-direction:column;gap:10px;padding-bottom:12px}
  .rm-rw-img{position:static;width:100%;height:auto;display:block}
  .rm-rw-shade{display:none}   /* 原本是给浮在图上的文字垫底, 现在文字不在图上了 */

  /* PROMOTION 标签也进流(用户 2026-08-23 拍板)。DOM 序是 img -> shade -> shine -> pill -> title -> button,
     pill 一进流就自然排在图与标题之间, 右对齐。一次解决两件事:
       (旧问题,非本轮造成) pill 原本 absolute top:12 right:12 会压在图右上角 —— 而 BO 图的字是【烤死在图里】的,
         用户自己的截图就是 "WELCO[PROMOTION]"。改成进流後图上的字不再被盖。
       (本轮新问题) 卡片变矮後, 遇到 p.img 为空或图 404(onerror -> display:none) 的卡片,
         pill 会盖在标题上(实测重叠 96.3 x 22.5 px)。进流後两者自然分行, 不再重叠。 */
  .rm-rw-pill{position:static;align-self:flex-end;margin:0 14px}

  .rm-rw-title{position:static;margin:0 14px}
  .rm-rw-learn{position:static;align-self:flex-end;margin:0 14px}
}

/* ===== [mobile 第六轮 · 2026-08-24] Promosi 卡片:图下方压成两行 =====
   需求(用户): PROMOTION 标签 / 标题 / LIHAT DETAIL 三样【只要两行】。
   用户二选一後选: 第1行 = 标题(整行) / 第2行 = 标签靠左 + 按钮靠右。

   做法: 仍是纯 CSS, 不动 markup。卡片由上一轮的 flex column 改成 row wrap, 再用 order 分行:
     img    order 0(预设) + flex 0 0 100%   -> 独占第一行(全出血, 无左右 margin)
     title  order 1       + flex 1 1 100%   -> 独占第二行(basis 100% 撑满, flex-shrink 让它缩到扣掉左右 margin)
     pill   order 2                          -> 第三行左
     learn  order 3       + margin-left:auto -> 第三行右
   (shade/shine 是 absolute, 不进流, 不占行。)

   🔴 不依赖「兄弟在不在」(本专案规矩):
     - 按钮的靠右【不】靠 pill 的 margin-right:auto 去推 —— 那样 p.cat 为空(无 pill)时按钮会掉到左边。
       改成【按钮自己 margin-left:auto】, 有没有 pill 都一样靠右。
     - 纵向间距仍由容器 gap:10px 提供, 少一个元素不会少一段间距。
     - 六态矩阵(有图/无图 x 有分类/无分类 + 破图 + 长标题)逐一实测过。

   ⚠️ 承上轮: .rm-rw-*(列表卡) 与 .rm-rwd-*(详情页 hero) 只差一字母, 别用 [class*="rm-rw"] 通配。 */
@media(max-width:1279px){
  .rm-rw-card{flex-flow:row wrap;align-items:center}
  .rm-rw-img{flex:0 0 100%}
  .rm-rw-title{order:1;flex:1 1 100%}
  /* 🔴 pill 必须【从源头限宽】, 不能只靠 min-width:0 让它收缩 ——
     flex 的换行判定用的是 hypothetical size(未收缩前的理想宽), 不是收缩後的宽度。
     分类名一长(实测 "BONUS CASHBACK SPORTSBOOK MINGGUAN" = 300.8px), pill 会把按钮挤到自己一行
     => 图下方变成 3 行, 本轮需求(只要两行)在那种资料下静默失效。
     算式: 可用宽 348(卡内容宽) - pill 左 margin 14 - gap 10 - 按钮宽(约 104) - 按钮右 margin 14 ≈ 206 上限;
     取 calc(100% - 160px) = 188px 留余裕(按钮文案会随语系变宽窄)。今日 BO 的 "promotion" 只有 98px。
     nowrap + ellipsis: 超长时截断并显示省略号 —— 【可见的截断】而不是静默改版面。 */
  .rm-rw-pill{order:2;align-self:center;margin:0 0 0 14px;
    max-width:calc(100% - 160px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .rm-rw-learn{order:3;align-self:center;margin:0 14px 0 auto}
}

/* [popup-match 2026-08-29] 入站彈窗改成與真站 s777bet.org 同款:黑底金框 + 置中金色 OK 鈕。
   背景:彈窗【內容】是 BO 後台管的富文本(getSiteConfig.popup.loginText,
        路徑 Tools & Setting > Popup),不是程式碼。clone 只負責外框。
   🔴 破圖根因:BO 的 HTML 寫 <img src="../assets/img/logo/logo.webp">(相對路徑)。
      真站在 /secure/home 底下 -> 解析成 /assets/img/logo/logo.webp ✅
      clone 在根目錄 -> 解析成同一個路徑,但 clone 的 logo 其實在 /assets/logo.webp -> 404。
      修法:在 clone 上補出 assets/img/logo/logo.webp(各站複製自己的 logo),
      【不動 BO 內容】—— 無法確認 BO 是否與真站共用,改它可能波及真站。
   🔴 OK 鈕:真站有、clone 的 rPopup() 只給右上角 ×。用純 CSS 把既有的 × 改造成
      置中金色 OK 鈕(font-size:0 + ::after content),【app.js 一個字沒動】,
      close handler 仍是原本那個。 */
.rm-entrypop-body{background:#0b0b0b;border:2px solid #f0c92e;border-radius:10px;
  padding:22px 20px 68px;color:#fff}
.rm-entrypop-body h1{margin:0 0 6px;text-align:center}
.rm-entrypop-body h1 img{width:auto;max-width:58%;margin:0 auto;border-radius:0;display:inline-block}
.rm-entrypop-close{top:auto;right:auto;left:50%;bottom:16px;transform:translateX(-50%);
  width:88px;height:34px;border-radius:6px;border:2px solid #f0c92e;background:#f0c92e;
  font-size:0;line-height:0;padding:0;display:flex;align-items:center;justify-content:center}
.rm-entrypop-close::after{content:"OK";font-size:16px;font-weight:800;color:#4a0009;line-height:1}

/* [nav5 2026-08-30] 底部 5 格 nav:Beranda | Withdrawal | (圈起来 Masuk/Deposit) | Promo | Live Chat
   .rm-bn-x 是【刻意不叫 .rm-bn-item】的独立 class —— app.js 的
   querySelectorAll('.rm-menu-item,.rm-bn-item,...') 绑不到它,不会跑 navClick(null)。
   换字换图靠 app.js 既有的 body.rm-authed(行 2019/2219 那段登入后加的),纯 CSS,零 app.js 改动。 */
.rm-bn-x{flex:1 1 0;min-width:0;max-width:96px;height:52px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:3px;cursor:pointer;color:#fff;font-weight:800;
  font-size:11px;padding:4px 8px;border-radius:12px;white-space:nowrap;
  -webkit-tap-highlight-color:transparent}
.rm-bn-svg,.rm-bn-svg svg{width:24px;height:24px;display:block}
/* 中间凸起圆钮:top:-24px 让它突出到 nav 上方 */
.rm-bn-mid{position:relative;overflow:visible}
.rm-bn-circle{position:absolute;left:50%;top:-24px;transform:translateX(-50%);
  width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#f6d878,#d9a326);color:var(--r-500);
  border:4px solid #7a0015;box-shadow:0 4px 14px rgba(0,0,0,.55)}
.rm-bn-circle svg{width:26px;height:26px;display:block}
.rm-bn-mid>span:not(.rm-bn-circle){margin-top:26px}
/* 登出=Masuk(人像) / 登入=Deposit(钱包) */
.rm-bn-ico-in,.rm-bn-lbl-in{display:none}
body.rm-authed .rm-bn-ico-out,body.rm-authed .rm-bn-lbl-out{display:none}
body.rm-authed .rm-bn-ico-in,body.rm-authed .rm-bn-lbl-in{display:block}

/* [wallet-swap 2026-08-30] 登出态位置 2 用 .rm-ic ic-wallet(遮罩图标,预设 22px),
   登入态用 24px 的 SVG —— 统一成 24 免得切换时图标跳一下。 */
.rm-bn-x .rm-ic{width:24px;height:24px}