/* ══════════════════════════════════════════════════════════════════════════
   Sic Bo（骰宝）下注页样式
   —— 2026-10-15 老大：「首先骰宝给我把快3的页面下注玩法搬过来」+「视觉也是一样的」
      → **整套照 Java 快3 版重写**（原来是浅色 + 绿色，快3 是深色 + 金色那套变量化主题）。

   🔴 改这个文件前先读三条：
   1. **配色原则照搬 Java**：不逐个选择器写死颜色，而是**先声明一整套 CSS 变量**
      （--card / --gold / --border / --text / --muted …），下面所有规则只用变量。
      要换肤/调色只动最上面那一段。写死颜色 = 以后没法统一改（原来那份就是这么烂掉的）。
   2. **8 个玩法区块靠 `data-c` 取主色**（gold/cyan/violet/pink/orange/lime/teal/blue），
      竖条、展开态、赔率胶囊、选中的号码按钮全跟着 `--ac` 走 —— 跟 Java 的 `.acc-item[data-c]` 一个做法。
   3. 类名**不能改**：`assets/sicbo.js` 是按 `.sb-acc-item` / `.sb-acc-head` / `#sb-amount` /
      `#sb-submit` 这些名字找元素的，改名 = 那一块直接哑掉。

   ⚠️ 开奖卡本来是深绿色的（跟龙虎斗一致），**这里也一起收进变量体系**，
      免得出现「一块深绿、一块深蓝」的拼接感。
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════ ① 深色主题变量（照 Java 快3 的 .theme-dark）══════════════
   🔴🔴 声明范围**必须覆盖页面上所有用到 var(--…) 的元素**，不只是 #sb-grid2。
   2026-10-15 踩过：变量只写在 `#sb-grid2` 上，而 **`#sb-flash`（开奖弹出）在后代里** ——
   于是弹出层里 `var(--card)` / `var(--gold)` / `var(--text)` **全部取不到值**：
   弹出来的时候背景透明、边框没色、字也没色。这类「变量取不到」不会报错，
   只是那几条声明**静默失效**，光看代码根本看不出来。
   所以这里写成 `#sb-grid2, #sb-flash` 两个都覆盖（#sb-flash 现在在 .drawer 里面，
   理论上能继承到，但写全了更保险 —— 哪天它被挪出去也不会突然哑掉）。
   ⚠️ 不用写 `body` —— sicbo.css 只有本页引，但写活了会连顶栏/底栏一起吃进来。 */
#sb-grid2, #sb-flash, #sb-bet-sheet{
  --bg:#0b0f1a; --bg-ink:#070a11;
  --card:#151b2b; --card2:#1c2438; --card3:#242f49;
  --gold:#f5c451; --gold2:#e29b1f; --gold-ink:#f5c451;
  --red:#ff5b52; --green:#34d97f; --red-soft:#ff6f66; --green-soft:#46e08b;
  --cyan:#35d6f0; --blue:#4b8bff; --sky:#5eb8ff; --violet:#a78bfa;
  --pink:#f56ea8; --orange:#ff9a3d; --lime:#b6e94a; --teal:#2ee0c0;
  --text:#eef1f8; --muted:#8f99b3; --muted-strong:#cbd6ec;
  --border:#2a3450; --radius:12px;
  --grad-gold:linear-gradient(135deg,#f5c451,#e29b1f);
  color:var(--text);
}

/* ══════════════ ② 两栏骨架（照 Java 的 .grid-2 / .cw）══════════════
   手机：单列，用 order 排成 开奖 → 下注 → 我的注 → 走势历史
   电脑(≥768px)：左栏 = 开奖 + 走势历史（弹性宽），右栏 = 下注 + 我的注（34%，最少 360px） */
#sb-grid2{display:flex;flex-direction:column;gap:11px;}
.sb-cw{display:contents;}
/* ⚠️ 手机上 #sb-grid2 的子元素靠 order 排队，所以每个块都必须有 class，漏一个就会跑到最前面 */
.sb-round{order:1;}
.sb-fucai-card{order:2;}
.sb-analysis-card{order:3;}
.sb-mine {order:4;}
@media (min-width:768px){
  #sb-grid2{flex-direction:row;gap:16px;align-items:flex-start;margin-top:4px;}
  .sb-cw{display:block;min-width:0;}
  .sb-left {flex:1 1 auto;}
  .sb-right{flex:0 0 34%;min-width:360px;}
  .sb-cw > *{margin:0 !important;}
  .sb-cw > * + *{margin-top:16px !important;}
  .sb-cw > details.cp{margin-bottom:0 !important;}
}

/* ══════════════ ③ 卡片底（Java 那种「一层微光渐变 + 深底 + 细边」）══════════════ */
.sb-card{
  background:linear-gradient(168deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,0) 52%),var(--card);
  border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:0 4px 14px rgba(0,0,0,.28);
}

/* ══════════════ ④ 开奖卡 / 倒计时带 / 开奖画面 ══════════════
   🔴🔴 **2026-10-15 整块搬去 `assets/sicbo-draw.css` 了**（照快3 现在的样子重做：
      淡蓝渐变倒计时带 + 淡蓝开奖画面 + 无摇盅 + 结果行沉底居中）。
      这里原来那些「深色卡片 + 金色倒计时 + .cd/.qishu/.label」全部作废并已删除 ——
      **别再在这里加 .sb-round / #sb-cd / #sb-label 的样式**，会被 sicbo-draw.css 盖掉，
      而且两份样式并存正是"改一处漏一处"的温床。要改开奖器，去 sicbo-draw.css。 */

/* 🎲 骰子：**1~6 点的图片**（assets/dice/1~6.png，2026-10-15 从 Java 站搬过来的 6 张）
   ⚠️ 图里自带白底、明暗和一层软阴影 —— 所以这里**绝对不能**再给 background / box-shadow，
      给了就会看到「一圈方白边套着一张骰子图」。
      （Java 那边 site.css 的 .dice 注释也专门写了这条，是同一个人踩过的坑。）
   ⚠️ 未开奖时 JS 会把图换成文字问号（setDie 里那个分支），所以字号字色要留着。 */
.sb-dice-row{display:flex;justify-content:center;gap:12px;margin:15px 0 10px;}
.sb-dice-row .die{width:58px;height:58px;position:relative;
  display:flex;align-items:center;justify-content:center;
  color:#16211a;font-size:32px;font-weight:900;font-variant-numeric:tabular-nums;
  transition:transform .46s cubic-bezier(.18,1.5,.42,1);}
.sb-dice-row .die .die-img{display:block;width:100%;height:100%;
  user-select:none;-webkit-user-drag:none;}
/* 停下来那一下弹一下 —— 图片没有方框可发光，用 drop-shadow 顺着骰子的轮廓发光 */
.sb-dice-row .die.pop{animation:diePop .42s cubic-bezier(.2,1.5,.4,1);
  filter:drop-shadow(0 0 8px rgba(245,196,81,.75));}
@keyframes diePop{0%{transform:scale(.55)}55%{transform:scale(1.2)}100%{transform:scale(1)}}

.sb-tags{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;min-height:24px;}
.sb-tag{padding:3px 13px;border-radius:20px;font-size:12.5px;font-weight:800;}
/* （原来这里有个 @media (min-width:768px) 的开奖卡放大 —— 尺寸现在归 sicbo-draw.css 的
   --stage-total / 骰子百分比管，跟屏宽自动成比例，不需要断点。） */

/* ══════════════ ⑤ 8 个玩法折叠区块（照 Java 的 .acc-item / .acc-head）══════════════
   每个区块挂 data-c，主色放到 --ac / --ac-bg，里面所有「选中态 / 竖条 / 赔率」
   都跟着它走 —— 扫一眼颜色就知道是哪一类玩法。 */
#sb-acc{display:flex;flex-direction:column;gap:5px;}
.sb-acc-item{
  background:linear-gradient(168deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,0) 52%),var(--card);
  border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;
  --ac:var(--gold);--ac-bg:rgba(245,196,81,.13);
  box-shadow:0 4px 14px rgba(0,0,0,.24);
  transition:border-color .18s,box-shadow .18s;
}
/* 八块的主色（跟 Java 那份 _betpanel.html 的 data-c 一一对应） */
.sb-acc-item[data-c="gold"]  {--ac:#f5c451;--ac-bg:rgba(245,196,81,.13);}
.sb-acc-item[data-c="cyan"]  {--ac:#35d6f0;--ac-bg:rgba(53,214,240,.13);}
.sb-acc-item[data-c="violet"]{--ac:#a78bfa;--ac-bg:rgba(167,139,250,.14);}
.sb-acc-item[data-c="pink"]  {--ac:#f56ea8;--ac-bg:rgba(245,110,168,.13);}
.sb-acc-item[data-c="orange"]{--ac:#ff9a3d;--ac-bg:rgba(255,154,61,.13);}
.sb-acc-item[data-c="lime"]  {--ac:#b6e94a;--ac-bg:rgba(182,233,74,.13);}
.sb-acc-item[data-c="teal"]  {--ac:#2ee0c0;--ac-bg:rgba(46,224,192,.13);}
.sb-acc-item[data-c="blue"]  {--ac:#4b8bff;--ac-bg:rgba(75,139,255,.14);}
.sb-acc-item.open{border-color:var(--ac);box-shadow:0 6px 20px rgba(0,0,0,.34),inset 0 0 0 1px var(--ac);}

/* 🔴 标题行可以**换行**（`flex-wrap:wrap`）——
   原来是单行 flex，窄屏上「标题 + 提示 + 赔率 + 箭头」抢宽度，
   提示那截被压成省略号（320px 时 "total 4-18" 只剩 13px，等于没写；
   430px 时 "pick the pair, then…" 也被切掉一半）。
   现在：一行放不下就把提示甩到第二行整行显示（见下面 .hint{flex-basis:100%}）。 */
/* 🆕 2026-10-26 老大：8 个下注子栏「框框缩小一下」—— 内边距/字号/间距整体收一档 */
.sb-acc-head{display:flex;align-items:center;flex-wrap:wrap;padding:9px 13px;cursor:pointer;user-select:none;
  font-size:13.5px;font-weight:600;color:var(--text);}
/* 每块前面那根彩色竖条 */
.sb-acc-head::before{content:'';width:3px;height:14px;border-radius:2px;margin-right:8px;flex-shrink:0;
  background:var(--ac);box-shadow:0 0 10px var(--ac);opacity:.85;}
.sb-acc-head:active{background:var(--card2);}
.sb-acc-item.open .sb-acc-head{color:var(--ac);
  background:linear-gradient(90deg,var(--ac-bg) 0%,transparent 72%);
  border-bottom:1px solid var(--border);}
/* 🔴 提示文字**永远不截断**：
   以前是 `flex:1 + min-width:0 + overflow:hidden + ellipsis`（单行挤），
   实测每一档屏宽都被切 —— 桌面 1280 的右栏只有 34% 宽，提示只剩 105px
   （"pick the pair, then…" 被切掉 56px）；320px 手机上 "total 4-18" 只剩 13px，
   等于一个字都没显示。现在把它**整行甩到第二行**，全写出来。
   ⚠️ `order:9` 是必须的：`.hint` 在 HTML 里排在 `.ao`（赔率）和 `.ar`（箭头）**前面**，
      不重排的话它先占满第一行、把赔率和箭头挤到第三行去。 */
.sb-acc-head .hint{order:9;flex:1 1 100%;font-size:10.5px;font-weight:400;color:var(--muted);
  margin:1px 0 0;white-space:normal;overflow:visible;text-overflow:clip;}
.sb-acc-item.open .sb-acc-head .hint{color:var(--ac);opacity:.75;}
/* 赔率：跟 Java 一样是**灰色小字**（原来是绿色胶囊，太抢眼，8 块排下来一堵绿墙） */
.sb-acc-head .ao{margin-left:auto;font-size:11.5px;font-weight:400;color:var(--muted);white-space:nowrap;flex:none;
  background:none;padding:0;border-radius:0;}
.sb-acc-item.open .sb-acc-head .ao{color:var(--ac);opacity:.9;}
.sb-acc-head .ar{margin-left:7px;color:var(--muted);font-style:normal;font-size:11px;
  transition:transform .2s;flex:none;}
.sb-acc-item.open .sb-acc-head .ar{transform:rotate(180deg);color:var(--ac);}
.sb-acc-body{display:none;padding:10px 13px 12px;}
.sb-acc-item.open .sb-acc-body{display:block;}

/* ══════════════ ⑦ 大小单双 / 下注按钮（照 Java 的 .zone-btn）══════════════
   四色：大=红 小=绿 单=金 双=蓝。选中 = 边框发光 + 字发光 + 轻微抬起。 */
/* 🆕 2026-10-26 老大：下注区里面的内容也缩小（按钮/数字格整体收一档） */
.sb-zone-row{display:grid;grid-template-columns:1fr 1fr;gap:7px;}
.sb-zone-row+.sb-zone-row{margin-top:7px;}
.sb-opt{position:relative !important;opacity:1;filter:none;border:1.5px solid var(--border) !important;
  padding:10px 6px;border-radius:9px;line-height:1.2;font-weight:800;color:var(--zc,var(--text));
  background:linear-gradient(180deg,var(--card3) 0%,var(--card2) 100%);
  transition:border-color .15s,transform .15s,box-shadow .15s,background .15s;}
.sb-zone-btn[data-type="big"]  {--zc:#ff6f66;--zc-bg:rgba(255,91,82,.14);}
.sb-zone-btn[data-type="small"]{--zc:#46e08b;--zc-bg:rgba(52,217,127,.14);}
.sb-zone-btn[data-type="odd"]  {--zc:#f5c451;--zc-bg:rgba(245,196,81,.14);}
.sb-zone-btn[data-type="even"] {--zc:#7ea6ff;--zc-bg:rgba(75,139,255,.15);}
.sb-zone-btn .t{font-size:14px;font-weight:800;color:var(--zc);letter-spacing:.5px;}
.sb-zone-btn .o{font-size:10.5px;color:var(--muted);margin-top:1px;font-weight:400;}
.sb-opt:active{transform:scale(.98);}
.sb-opt.on{border-color:var(--zc) !important;background:var(--zc-bg);
  box-shadow:inset 0 0 0 1px var(--zc),0 0 18px -4px var(--zc);transform:translateY(-1px);}
.sb-opt.on .t{text-shadow:0 0 14px currentColor;}
.sb-opt.on .o{color:var(--zc);opacity:.82;}

/* ══════════════ ⑧ 数字网格（和值 / 三同号 / 二同号复选 / 三连号 = 4 列
                      三不同 / 二不同 / 二同号单选 = 6 列）══════════════ */
.sb-sum-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;}
.sb-num-pick{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;}
.sb-num-btn,.sb-pick-btn{padding:7px 3px;
  background:linear-gradient(180deg,var(--card3) 0%,var(--card2) 100%);
  border:1.5px solid var(--border);border-radius:7px;text-align:center;cursor:pointer;user-select:none;
  transition:border-color .15s,background .15s,box-shadow .15s;}
.sb-num-btn .n{font-size:14px;font-weight:800;color:var(--text);line-height:1.2;}
.sb-num-btn .o{font-size:9.5px;color:var(--muted);line-height:1.25;}
.sb-pick-btn{font-size:14px;font-weight:800;color:var(--text);line-height:1.2;}
.sb-pick-btn .po{font-size:9.5px;font-weight:400;color:var(--muted);line-height:1.25;}
/* 选中：跟所在区块的主色走（--ac 由 .sb-acc-item[data-c] 提供） */
.sb-num-btn.on,.sb-pick-btn.on{border-color:var(--ac);background:var(--ac-bg);
  box-shadow:inset 0 0 0 1px var(--ac),0 0 14px -4px var(--ac);}
.sb-num-btn.on .n,.sb-pick-btn.on{color:var(--ac);text-shadow:0 0 12px currentColor;}
.sb-num-btn.on .o,.sb-pick-btn.on .po{color:var(--ac);opacity:.85;}
.sb-pick-btn.off{opacity:.25;cursor:not-allowed;}
.sb-pick-label{font-size:10.5px;font-weight:600;color:var(--muted);margin-bottom:4px;}
.sb-pe-tip{font-size:12px;color:var(--muted);margin-top:10px;text-align:center;}
.sb-pe-tip.ok{color:var(--ac);font-weight:700;}

/* ══════════════ ⑨ 筹码 / 金额 / 下注按钮 ══════════════ */
/* 🎰 筹码（2026-10-15 照 Java 搬过来：**胶囊 + 一圈虚线 + 每档一色**，
   而且是「点一个 = 选中这个金额」，不是原来的「+100 累加」）。
   ⚠️ 底色和 --ch 用的是 Java **深色面板**里的那一套（site.css 的 `.theme-dark .chip`）——
      它在浅色主题下是白底 + 压深色，在深色面板里才换回深底 + 亮色。我们这个面板是深色的，
      所以取深色那一套，别照抄浅色那份（亮色字压白底会看不见）。
   🔴🔴 这里**故意不写 flex-wrap**（Java 那套 `.chips` 也没有）：6 颗筹码必须**一行排完**。
      2026-10-15 踩过 —— 上面留了一条旧的 `.sb-chips{…flex-wrap:wrap}` 没删干净，
      于是窄屏上 5 颗一行、ALL 被挤到第二行并撑满整宽，看着就像「筹码挤出页面了」。
      ⚠️ 我们这几档数字比 Java 长（`10,000` vs `1000`），所以下面配了 min-width:0 + 窄屏缩字，
         保证**不换行也不溢出**。 */
.sb-chips{display:flex;gap:8px;margin:12px 0;}
.sb-chip{
  /* 🔴 min-width:0 不能省：flex 项默认 min-width:auto（= 内容宽度），
     那样 6 颗筹码就**缩不下去**，窄屏必然溢出或换行。设 0 才允许它们均分。 */
  position:relative;flex:1;min-width:0;padding:10px 2px;
  background:linear-gradient(180deg,#26314c 0%,#1b2334 100%);
  border:1.5px solid rgba(255,255,255,.10);border-radius:50px;
  text-align:center;cursor:pointer;user-select:none;
  transition:all .15s;font-variant-numeric:tabular-nums;
  /* 🔴 字号**不能照搬 Java 的 14px**：Java 那几档是 2/10/50/100/500/1000（最多 4 个字），
     我们最大是 `10,000`（6 个字符）。14px 时它要 52px，而面板最窄（PC 34% / 平板 min 360px）
     每颗只有约 47px —— 2026-10-15 实测被截成「10,0…」。13px + padding 2px 刚好放得下。 */
  font-size:13px;font-weight:700;letter-spacing:-.2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  --ch:var(--gold);--ch-bg:rgba(245,196,81,.17);color:var(--ch);
}
.sb-chip::after{content:'';position:absolute;inset:2.5px;border-radius:50px;
  border:1px dashed rgba(255,255,255,.13);pointer-events:none;}
/* 六档各一色（档位是老大 2026-09-23 定的：最低下注 ₦100，所以从 100 起；ALL 用金色） */
.sb-chip[data-v="100"]  {--ch:#2ee0c0;--ch-bg:rgba(46,224,192,.15);}
.sb-chip[data-v="500"]  {--ch:#a78bfa;--ch-bg:rgba(167,139,250,.16);}
.sb-chip[data-v="1000"] {--ch:#4b8bff;--ch-bg:rgba(75,139,255,.16);}
.sb-chip[data-v="5000"] {--ch:#ff9a3d;--ch-bg:rgba(255,154,61,.16);}
.sb-chip[data-v="10000"]{--ch:#f56ea8;--ch-bg:rgba(245,110,168,.16);}
.sb-chip[data-v="all"]  {--ch:#f5c451;--ch-bg:rgba(245,196,81,.17);}
.sb-chip.on{border-color:var(--ch);background:var(--ch-bg);
  box-shadow:0 0 0 1px var(--ch) inset,0 0 16px -2px var(--ch);}
.sb-chip.on::after{border-color:currentColor;opacity:.5;}
.sb-chip:active{transform:scale(.96);}

.sb-amt-row{display:flex;align-items:center;gap:9px;margin-top:11px;}
.sb-amt-label{font-size:13px;font-weight:600;color:var(--muted-strong);flex:none;}
.sb-amt-input{width:100%;padding:12px 12px 12px 32px;font-size:18px;font-weight:800;
  background:linear-gradient(180deg,var(--card3) 0%,var(--card2) 100%);
  border:1.5px solid var(--border);border-radius:9px;color:var(--gold);
  font-family:inherit;outline:none;font-variant-numeric:tabular-nums;box-sizing:border-box;
  -moz-appearance:textfield;transition:border-color .15s,box-shadow .15s;}
.sb-amt-input::-webkit-outer-spin-button,
.sb-amt-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.sb-amt-input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(245,196,81,.16);}
.sb-amt-cur{position:absolute;left:13px;top:50%;transform:translateY(-50%);
  font-size:17px;font-weight:900;color:var(--muted);}
.sb-amt-x{flex:0 0 46px;align-self:stretch;background:var(--card2);color:var(--muted);
  border:1px solid var(--border);border-radius:9px;font-size:17px;font-weight:900;
  cursor:pointer;line-height:1;}
.sb-amt-x:active{background:var(--card3);color:var(--text);}
.sb-amt-hint{font-size:11.5px;color:var(--muted);margin-top:7px;}

.sb-sel-row{display:flex;align-items:center;gap:8px;margin:13px 0 10px;flex-wrap:wrap;}
.sb-sel-lbl{font-size:13px;color:var(--muted-strong);}
.sb-sel{color:var(--gold-ink);font-size:14px;font-weight:800;}

#sb-submit{width:100%;background:linear-gradient(135deg,#3a4256,#2a3145);color:var(--muted);
  font-weight:900;font-size:15px;padding:14px 0;border:none;border-radius:11px;cursor:pointer;
  transition:background .2s,box-shadow .2s,color .2s;}
#sb-submit.ready{background:var(--grad-gold) !important;color:#2a1a02 !important;
  box-shadow:0 6px 20px -6px rgba(245,196,81,.6);}

/* 我本期下的注（Java 是「下注按钮下面一行小字」，不是卡片） */
#sb-mine{margin-top:12px;font-size:12.5px;color:var(--muted-strong);display:none;
  background:var(--card2);border:1px solid var(--border);border-radius:8px;padding:9px 11px;}
/* 🎫 「My bets」那张表有 6 列（Round/Bet/Amount/Draw/Status/Payout），
   320px 的窄屏（iPhone SE、老安卓）**放不下**：表头会被撑到 337px 宽，
   右边 17px 直接切掉看不见（2026-10-15 量出来的：`table#sb-bets-table` right=337 / 视口 320）。
   给它一层横向滚动 —— 内容一个都不丢，窄屏左右滑一下就能看全。 */
.sb-mine .cp-in{overflow-x:auto;-webkit-overflow-scrolling:touch;}
#sb-msg{margin-top:10px;font-size:13px;text-align:center;min-height:18px;color:var(--muted-strong);}

/* ══════════════ ⑩ 玩法说明 / 走势那些 <details> ══════════════ */
details.cp{background:linear-gradient(168deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,0) 52%),var(--card);
  border:1px solid var(--border);border-radius:var(--radius);margin-bottom:10px;overflow:hidden;
  box-shadow:0 4px 14px rgba(0,0,0,.24);}
details.cp>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;
  cursor:pointer;padding:13px 15px;font-weight:600;font-size:15px;user-select:none;color:var(--text);}
details.cp>summary::-webkit-details-marker{display:none;}
details.cp>summary h2{font-size:15px;margin:0;font-weight:600;}
details.cp>summary .arr{transition:transform .2s;color:var(--muted);font-style:normal;}
details.cp[open]>summary .arr{transform:rotate(180deg);color:var(--gold);}
details.cp .cp-in{padding:0 15px 16px;}

/* ══════════════ ⑪ 开奖弹出 ══════════════
   🔴🔴 **2026-10-15 整块搬去 `assets/sicbo-draw.css` 的 `.res-flash` 了。**
      原来这里是 `#sb-flash{position:fixed}` 的**全屏遮罩**（照龙虎斗那套做的），
      但快3 的开奖弹出是**开奖画面里的浮层**（`.res-flash` + `.on` 淡入）。
      老大要「开奖器一模一样」→ 按快3 来，全屏那套作废并已删除。
   ⚠️ 千万别把 `#sb-flash` / `#sb-flash-in` 的样式加回来：
      `#sb-flash` 现在**在 .drawer 里面**，一条 position:fixed 就会把它从画面里拽出去铺满全屏。
   ⚠️ 那条 `@keyframes sbpop` 也一起删了（只有上面这块用），要弹跳动画见 sicbo-draw.css 的 resPop。

/* ══════════════ ⑫ 右下角下注圆圈 + 底部抽屉 ══════════════
   照 K3 参考站 /history 的 .fab-bet / .bet-sheet（老大 2026-10-27 要的）：
   圆钮固定在右下角跟着屏幕走，点开从底部滑出下注面板，点遮罩/×/Esc 收起。 */
.sb-bet-fab{
  /* 让开底部导航（.bottomnav 65.75px，z-index 9000） */
  position:fixed;right:16px;bottom:calc(84px + env(safe-area-inset-bottom));
  width:58px;height:58px;border-radius:50%;border:none;padding:0;
  display:flex;align-items:center;justify-content:center;
  font:900 13px/1 inherit;letter-spacing:.6px;color:#4c1d95;text-decoration:none;
  text-shadow:0 1px 0 rgba(255,255,255,.65);cursor:pointer;user-select:none;
  z-index:900;transition:transform .12s;
  background:
    radial-gradient(circle,#fff 0 42%,rgba(255,255,255,.92) 42% 50%,transparent 50%),
    repeating-conic-gradient(from -9deg,#7c3aed 0deg 18deg,#ede9fe 18deg 36deg);
  box-shadow:0 8px 22px rgba(124,58,237,.55),0 0 0 3px rgba(139,92,246,.22);
}
.sb-bet-fab:active{transform:scale(.92);}
.sb-bet-mask{
  position:fixed;inset:0;z-index:9500;display:none;
  background:rgba(0,0,0,.62);
}
body.sb-sheet-open .sb-bet-mask{display:block;}
html.sb-sheet-open,body.sb-sheet-open{overflow:hidden;}
.sb-bet-sheet{
  position:fixed;left:50%;bottom:0;z-index:9501;
  width:min(100%,560px);max-height:88vh;
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,#1c2438 0%,#151b2b 100%);
  border:1px solid var(--border);border-bottom:none;
  border-radius:18px 18px 0 0;
  box-shadow:0 -16px 40px rgba(0,0,0,.55);
  transform:translate(-50%,105%);visibility:hidden;
  transition:transform .26s cubic-bezier(.2,.8,.3,1),visibility .26s;
  will-change:transform;
}
body.sb-sheet-open .sb-bet-sheet{transform:translate(-50%,0);visibility:visible;}
.sb-sheet-hd{
  position:relative;flex:0 0 auto;
  padding:14px 56px 14px 16px;border-bottom:1px solid var(--border);
}
/* 💰 余额固定在抽屉头部，滚动玩法列表时不动（原来的标题/提示行已删） */
.sb-sheet-bal{
  display:flex;align-items:center;justify-content:space-between;
  min-height:26px;font-size:13px;color:var(--muted);
}
.sb-sheet-bal b{
  font-size:22px;font-weight:900;color:var(--gold);
  font-variant-numeric:tabular-nums;
}
.sb-sheet-x{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  margin-left:0;width:32px;height:32px;border-radius:50%;
  border:1px solid var(--border);background:var(--card2);color:var(--muted-strong);
  font-size:20px;line-height:1;font-weight:400;cursor:pointer;
}
.sb-sheet-x:active{background:var(--card3);color:var(--text);}
.sb-sheet-body{
  flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:14px 16px calc(18px + env(safe-area-inset-bottom));
}
.sb-bet-sheet .panel.sb-bet{
  background:transparent;border:none;box-shadow:none;margin:0;padding:0;
}
@media (min-width:768px){
  /* 贴内容列（main.wrap 最宽 560）的右边，别飘到整页最右边；底部照样让开导航 */
  .sb-bet-fab{
    right:max(24px,calc((100vw - 560px) / 2 + 8px));
    bottom:calc(84px + env(safe-area-inset-bottom));
  }
  .sb-bet-sheet{max-height:82vh;}
}

/* 📱 手机上收一档（照 Java 那条 @media：玩法字号 / 号码 / 筹码 / 金额都收小） */
@media (max-width:767px){
  .sb-acc-head{padding:8px 11px;font-size:12.5px;}
  .sb-acc-head::before{height:12px;width:2.5px;margin-right:6px;}
  /* ⚠️ 只收字号，**不要**再给 .hint 加 margin-left —— 它现在在第二行整行，
     加了会把文字往右推、跟标题对不齐。（原来那行 `margin-left:4px` 已删） */
  .sb-acc-head .hint{font-size:9.5px;margin:1px 0 0;}
  .sb-acc-head .ao{font-size:10.5px;}
  .sb-acc-body{padding:9px 11px 10px;}
  .sb-zone-btn{padding:9px 5px;}
  .sb-zone-btn .t{font-size:12.5px;}
  .sb-zone-btn .o{font-size:9px;}
  .sb-sum-grid{gap:4px;}
  .sb-num-btn{padding:6px 2px;}
  .sb-num-btn .n{font-size:12.5px;}
  .sb-num-btn .o{font-size:9px;}
  .sb-num-pick{gap:4px;}
  .sb-pick-btn{padding:6px 0;font-size:12.5px;}
  .sb-pick-btn .po{font-size:8.5px;}
  .sb-pick-label,.sb-pe-tip{font-size:9.5px;}
  .sb-chips{gap:6px;}
  /* 筹码在手机上再收一档：6 颗要在一行里排完（我们这几档数字比 Java 长：
     `10,000` 比 `1000` 宽一截），不收就会挤到换行 */
  .sb-chip{padding:9px 2px;font-size:12px;letter-spacing:-.2px;}
  .sb-amt-input{padding:9px 10px 9px 28px;font-size:16px;}
  .sb-amt-hint{font-size:11px;margin-top:5px;}
  #sb-submit{font-size:14px;padding:13px 0;}
}
/* 更小的屏（iPhone SE / 老安卓，≤360）：筹码再收一档，保证一行放得下 */
@media (max-width:360px){
  .sb-chip{padding:8px 1px;font-size:11px;letter-spacing:-.3px;}
  .sb-chips{gap:4px;}
}