/* ══════════════════════════════════════════════════════════════════════════
   🎲 Sic Bo 开奖器（倒计时带 + 开奖画面）
   —— 2026-10-15 老大：「开奖器你弄的啥啊，你给我按照快3一模一样啊」
      → **整套重做，逐条照 Java 快3 现在的样子搬。**

   🔴🔴 上一版我搬错了：搬的是快3 **更早那几轮**的「暗房 + 红毛毡圆桌 + 金环摇盅」，
       而快3 **现在**长这样（2026-10-02 整站翻浅之后又改了四轮，以最新为准）：
         · 倒计时带 `.cd-band`   = **淡蓝渐变**（#a8daf7 → #8cc9f0），横向通到卡片边
         · 开奖画面 `.drawer`    = **淡蓝渐变**（#8cc9f0 → #3f86c8 → #c2e6f9），底下一池白光
         · 两块**上下贴死同宽**，蓝带底部的色 == 画面顶部的色 → 看不出接缝（老大要的「衔接融洽」）
         · 高度：整栏 = `--stage-total`，蓝带占 **1/3**、画面占 **2/3**
         · **没有摇盅**（`.dice-dome` 在 domdice 模式下 `display:none`）
         · 三颗骰子按**框宽的百分比**摆位（19% 宽 / top 40% / gap 3%）
         · 「上期结果」那一行在**最下面居中**，🔊 音效按钮**钉右下角**
         · 结果药丸 `.result-tags` 绝对定位在画面里（bottom 30px）
         · 开奖弹出 `.res-flash` 是**画面里的浮层**（不是全屏遮罩）

   ⚠️ 两边类名保持**逐字一致**（.cd-band / .drawer / .domdice / .dh-s / .dice-row /
      .curtain / .dd-plate / .res-flash / .rf-* / .result-tags / .tag…），
      以后想对账直接把两个文件并排 diff 就行，不用做名字映射。
   ⚠️ 中段那截深蓝（#3f86c8）**不能删**：六张骰子图是近白色的，压在很淡的蓝上会糊成一片。
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════ ① 开奖卡（照快3 的 .round-card）══════════════
   快3 的圆角桌卡是「白底 + 金→紫→青描边 + 轻轻上下呼吸」。
   ⚠️ `--rc-pad-y/x` 这两个变量是给下面 `.cd-band` / `.drawer` **负边距抵消**用的 ——
      不抵消的话带子两边会留两条白边，等于又多一条割裂线。改留白只改这两个变量。 */
.sb-round{
  --rc-pad-y:18px; --rc-pad-x:16px; --rc-pad-b:0px;
  /* 🟩🔵 整栏（蓝带 + 开奖画面）的总高。快3 手机上实测 28.4vh ≈ 240~281px。
     ⚠️ 下限 240px 是给矮屏/横屏兜底的：再矮三行字（期号/倒计时/状态）就放不下。
     ⚠️ 蓝带用 **min-height** 不是 height —— 窄屏上放不下时让它自己撑高，
        宁可比例偏一点，也不能把字挤出去。 */
  --stage-total:max(240px, 28.4vh);
  --band-h:calc(var(--stage-total) / 3);

  position:relative;
  padding:var(--rc-pad-y) var(--rc-pad-x) var(--rc-pad-b);
  border:1.5px solid transparent;
  border-radius:var(--radius);
  /* 三层：① 压暗图片的渐变（保证文字/骰子可读） ② 豆包拿骰子背景图 ③ 金→紫→青描边 */
  background-color:#0b0a08;
  background-image:
    linear-gradient(180deg, rgba(5,6,10,.72) 0%, rgba(5,6,10,.46) 30%, rgba(5,6,10,.26) 56%, rgba(5,6,10,.42) 100%),
    url('sicbo-draw-bg.jpg?v=20261030a'),
    linear-gradient(135deg, rgba(224,160,32,.95) 0%, rgba(122,85,224,.75) 48%, rgba(15,159,184,.7) 100%);
  background-size:auto, cover, auto;
  background-position:center, center 34%, center;
  background-repeat:no-repeat;
  background-clip:padding-box, padding-box, border-box;
  box-shadow:
    0 20px 44px -14px rgba(30,45,90,.22),
    0 0 70px -18px rgba(224,160,32,.30),
    0 0 120px -32px rgba(122,85,224,.34),
    inset 0 1px 0 rgba(255,255,255,.95);
}
.sb-round > *{position:relative;}
/* ℹ️ 玩法说明按钮：快3 的开奖卡上没有这个（它在别处），但 9jaWin 一直有 —— 保留，
   挪到蓝带右上角、做成压在淡蓝上的深色小胶囊（浅底上白字看不见）。 */
.sb-round .sb-rules-btn{
  position:absolute; top:9px; right:10px; z-index:6;
  width:26px; height:26px; line-height:1; padding:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; border-radius:50%;
  color:#3a2606; background:rgba(255,255,255,.86);
  border:1px solid rgba(245,196,81,.6);
}
.sb-round .sb-rules-btn:active{background:rgba(255,255,255,.98);}

/* ══════════════ ② 倒计时带（照快3 .cd-band）══════════════
   🔴 底部色 `#8cc9f0` **必须等于** 下面 `.drawer` 渐变的**第一个色值** ——
      老大要的「衔接融洽、不要有割裂感」全靠这一条。改一个忘了另一个，接缝立刻显出来。
   ⚠️ 文字在淡蓝上要用**深色**（见下面 .qishu/.countdown/.label），用白字看不见。 */
.cd-band{
  position:relative;
  margin:calc(var(--rc-pad-y) * -1) calc(var(--rc-pad-x) * -1) 0;
  padding:14px var(--rc-pad-x) 10px;
  border-radius:calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0 0;
  min-height:var(--band-h);
  box-sizing:border-box;
  text-align:center;
  background:transparent;      /* 图片/压暗层在 .sb-round 上，这里透明才接得上 */
}
.cd-band .qishu{font-size:13px;color:rgba(255,240,210,.9);}
.cd-band .qishu b{color:#fff;font-variant-numeric:tabular-nums;}
/* 倒计时数字：原来是给白底配的白色投影，压在蓝底上会糊成一团 → 用暗色投影
   🔴 2026-10-26 老大：「中间的字看不清」。
   根因：sicbo.js 切状态时 `el.className = 'cd ...'` 把 `countdown` 类**整个覆盖**了，
   `.cd-band .countdown` 的深色规则失效 → 继承深色主题的浅灰文字，压在淡蓝上看不清。
   修法：CSS 同时认 `.cd`（保险），JS 那边也改成保留 countdown 类。 */
.cd-band .countdown, .cd-band .cd{
  font-size:46px; font-weight:900; letter-spacing:2px; line-height:1.15; margin:6px 0 2px;
  color:#ffd66b; font-variant-numeric:tabular-nums;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.75));
}
.cd-band .countdown.warn, .cd-band .cd.warn{color:#ffb45c;}
.cd-band .countdown.closed, .cd-band .cd.closed{color:#ff8a82;}
.cd-band .countdown.vs, .cd-band .cd.vs{font-size:26px;letter-spacing:0;}
.cd-band .label{font-size:12.5px;color:rgba(255,240,210,.82);min-height:17px;}

/* ══════════════ ②b 期号旁边的「回合数值」三角 + 下拉表 ══════════════
   2026-10-27 老大：「把这个回合数值放到开奖页面 Round #6812，旁边增加一个三角号，
   点开就看到回合数值」——表跟 Recent results 同一份数据（$road，新 → 旧），
   开奖后由 sicbo.js 的 renderRoad() 同步刷新。 */
.sb-rd-tri{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;margin-left:10px;padding:0;
  border-radius:50%;border:1px solid rgba(245,196,81,.6);
  background:rgba(255,255,255,.84);color:#3a2606;
  font-size:13px;font-weight:900;line-height:1;font-family:inherit;
  cursor:pointer;vertical-align:-6px;transition:transform .2s,background .15s;
}
.sb-rd-tri:active{background:rgba(255,255,255,.98);}
.sb-rd-tri.open{transform:rotate(180deg);}
.sb-rd-panel{
  display:none;position:absolute;left:8px;right:8px;top:calc(100% + 6px);
  z-index:50;max-height:min(54vh,400px);overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:#100e0a;border:1px solid rgba(245,196,81,.38);border-radius:12px;
  box-shadow:0 20px 46px rgba(0,0,0,.62);text-align:left;
}
.sb-rd-panel.open{display:block;}
.sb-rd-t{width:100%;border-collapse:collapse;font-size:12.5px;color:var(--text,#f5edda);}
.sb-rd-t thead th{
  position:sticky;top:0;z-index:1;
  background:linear-gradient(180deg,#2a1b4d 0%,#241640 100%);
  color:#f7f0ff;font-size:11.5px;font-weight:800;letter-spacing:.45px;
  text-align:left;padding:9px 12px;white-space:nowrap;
}
.sb-rd-t thead th:last-child{text-align:right;}
.sb-rd-t td{padding:8px 12px;border-top:1px solid rgba(255,255,255,.07);font-variant-numeric:tabular-nums;}
.sb-rd-t td:first-child{color:var(--muted,#a89f8a);width:34%;}
.sb-rd-t td.dd{font-weight:800;letter-spacing:1.2px;color:var(--text,#f5edda);}
.sb-rd-t td.tot{text-align:right;font-weight:800;}
.sb-rd-t td.none{text-align:center;color:var(--muted,#a89f8a);padding:16px 0;}

/* ══════════════ ③ 开奖画面（照快3 .drawer + .drawer.domdice）══════════════
   ① 上边距 **-1px**：跟上面那条蓝带**重叠 1 像素**。根因是接缝落在小数像素上时
      两块之间会漏出 1px 卡片底 → 看着像一条会跳的白线（快3 那边老大反馈过）。
   ② 左右负边距抵消卡片 padding：不拉通的话画面是内缩的圆角矩形，跟通到边的蓝带接不上。
   ③ 下边距 0 + 卡片 padding-bottom:0：画面一路通到卡片底边，不露白。 */
.drawer{
  margin:-1px calc(var(--rc-pad-x) * -1) 0;
  border-radius:0 0 calc(var(--radius) - 2px) calc(var(--radius) - 2px);
  padding:4px 4px 10px;
  height:calc(var(--stage-total) * 2 / 3);
  position:relative;
  overflow:hidden;
  /* 🖼️ 背景图在 .sb-round 上，这一层只留透明 + 让图片连续（2026-10-27 老大要求换豆包图） */
  background:transparent;
  box-shadow:none;
}

/* ── 🎰 圆桌层：现在只当一个「舞台」，不要红圆桌的底色/侧壁/落地影/磨损斑 ──
   它就两个作用：① 给骰子行当定位父级 ② 在桌面端把舞台宽度限到 520px。
   ⚠️ 别给它加 overflow:hidden（快3 那边的原话）—— 帘子的 `.curtain-wrap` 自己会裁。 */
.table-circle{
  position:relative;
  width:100%;
  height:100%;                /* 填满画面那一格 */
  max-width:min(86vw, 520px);
  margin:0 auto;
  border-radius:0;
  background:none;
  box-shadow:none;
}
/* 圆桌时代那层「磨损斑」的伪元素 —— domdice 模式下整个不画 */
.table-circle::before{display:none;}

/* ── 骰子摆位：**对着框宽算百分比**，跟视口宽脱钩 ──
   ⚠️ 别再写 `--ds: min(19vw, 86px)` 那种跟视口挂钩的写法：
      框宽是布局（左栏）决定的，两者不成比例 —— 窄窗口骰子会戳出框外，宽屏又偏小。 */
.dice-row{
  position:absolute;
  left:0;
  width:100%;
  top:40%;                    /* 40% = 几何正中(50%)再往上提，缩短跟上面蓝带的距离 */
  transform:translateY(-50%);
  display:flex;
  justify-content:center;
  align-items:center;
  gap:3%;
  padding-left:4%;            /* 摆位中心在 52% 不在 50%，往右挪 2% */
  margin:0;
}
/* 底下那团软阴影（宽度跟着骰子缩放：三颗 16% + 两个间距 3% ≈ 54%，取 49%） */
.dice-row::before{
  content:''; position:absolute; left:50%; bottom:-6px;
  transform:translateX(-50%); width:49%; height:11px; border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.5) 0%, rgba(0,0,0,.18) 46%, transparent 78%);
  pointer-events:none;
}
/* ⚠️ 骰子宽度：2026-10-26 老大要求 9jaWin 这边缩小一点，19% → 16%。
   （快3 那边仍是 19%，两份文件各自独立，别一起改。）
   要再调只改这一个数 —— 上面那团阴影的宽度跟着一起改。 */
.dice{
  width:16%;
  height:auto;
  aspect-ratio:1;             /* 高度跟宽度走，保证是正方形 */
  position:relative;
  /* ⚠️ 不给兜底白底、不给 box-shadow：骰子图自带明暗和一层软阴影 */
  transition:transform .46s cubic-bezier(.18,1.5,.42,1);
  will-change:transform;
}
.dice .die-img{
  display:block; width:100%; height:100%;
  user-select:none; -webkit-user-drag:none;
}
/* 翻滚：三颗转速/方向都不同（同速会看着像一整块在转，失去「三颗骰子」的感觉）
   ⚠️ 骰子图是**正圆**，平面 rotate 肉眼看不出 → 真正"翻面"靠 64ms 换图（见 sicbo.js）
   这个动画**故意做得很轻**，别再加 rotate3d / perspective（加过，被否了）。 */
.dice.rolling{animation:discSpinA .34s linear infinite;}
.dice-row > .dice:nth-child(2).rolling{animation:discSpinB .40s linear infinite reverse;}
.dice-row > .dice:nth-child(3).rolling{animation:discSpinC .37s linear infinite;}
@keyframes discSpinA{
  0%  {transform:rotate(0deg)   scale(1);}
  50% {transform:rotate(180deg) scale(1.06);}
  100%{transform:rotate(360deg) scale(1);}
}
@keyframes discSpinB{
  0%  {transform:rotate(0deg)    scale(1.05);}
  50% {transform:rotate(-200deg) scale(.96);}
  100%{transform:rotate(-400deg) scale(1.05);}
}
@keyframes discSpinC{
  0%  {transform:rotate(0deg)   scale(1);}
  50% {transform:rotate(150deg) scale(1.05);}
  100%{transform:rotate(300deg) scale(1);}
}
/* 停下来那颗闪一下
   ⚠️⚠️ 动画里**绝对不能出现 transform**（会把"停在结果面"的旋转覆盖掉，开 4 点显示 1 点）；
       也**不能把 filter 加在 .dice 上**（非 none 的 filter 会让 transform-style:preserve-3d
       退化成 flat）。只在 .dice 上做 brightness 是安全的 —— 这里没有 3D 立方体。 */
.dice.locked{animation:discFlash .5s ease-out;}
@keyframes discFlash{
  0%  {filter:brightness(1.45) saturate(1.1);}
  100%{filter:brightness(1);}
}
/* 🍸 摇盅：快3 **domdice 模式下是藏掉的**（老大要的是「去掉筛子旁边金色圆圈的那一版」）。
   ⚠️ 结构留着（sicbo.js 还在 toggle 它的 .on/setPhase），别删 DOM —— 藏掉就行。
      哪天要恢复摇盅，把这一条去掉即可，别的都不用动。 */
.drawer.domdice .dice-dome{display:none !important;}

/* ── 🎭 帘子：封盘拉下来盖住整个画面，开奖升上去 ──
   ⚠️ `.curtain-wrap` 的圆角**跟画面同值**（不能写 50%）：写 50% 会画成一条横椭圆，
      看着不像帘子。帘子出画的地方正好被画面圆角切掉。 */
.curtain-wrap{
  position:absolute; inset:0; z-index:7;
  border-radius:14px;         /* 跟快3 同值（不是 50%：写 50% 会画成一条横椭圆） */
  overflow:hidden;
  pointer-events:none;
}
.curtain{
  position:absolute; left:0; right:0; top:0; height:100%;
  display:flex; align-items:center; justify-content:center;
  /* 一道一道的褶子 + 上深下浅的红绒布，底下压一条金边 */
  background:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,.30) 0 5px, rgba(255,255,255,.055) 5px 13px,
      rgba(0,0,0,.20) 13px 20px, rgba(255,255,255,.03) 20px 28px),
    linear-gradient(180deg, #7d141b 0%, #96202a 42%, #6b1017 78%, #470a0e 100%);
  border-bottom:4px solid #d8b566;
  box-shadow:inset 0 -26px 34px rgba(0,0,0,.42), inset 0 10px 18px rgba(0,0,0,.35);
  transform:translateY(-102%);       /* 收起：整个缩到上面（被 wrap 裁掉） */
  transition:transform .45s cubic-bezier(.25,.9,.3,1);
}
.curtain.on{transform:translateY(0);}   /* 拉下来：盖住整个画面 */
.curtain span{
  font-size:22px; font-weight:800; letter-spacing:5px;
  color:#f3d489; text-shadow:0 2px 8px rgba(0,0,0,.72);
}

/* ── 顶部/底部那一行：状态词 + 上期记录 + 音效按钮 ──
   快3 把这一行从**顶部**挪到了**最下面居中**（老大：「这个字体放最下面居中」）：
   顶部改 auto、底部 6px；justify-content 由 flex-start 改 center；
   🔊 **单独绝对定位钉在右下角**（不参与居中排布，否则居不中）。
   ⚠️ 这行字现在压在画面**最淡**那一段淡蓝上 → 文字要用**深色**（见下面三条）。 */
.drawer-hd{
  position:absolute;
  left:0; right:0; top:auto; bottom:6px;
  display:flex; align-items:center; justify-content:center;
  gap:6px;
  z-index:3;
  min-height:20px;
}
.drawer-hd > .dh-snd:last-child{
  position:absolute; right:8px; margin-left:0;
}
.dh-s{font-size:13.5px;font-weight:700;color:#ffe6b0;white-space:nowrap;text-shadow:0 1px 4px rgba(0,0,0,.7);}
.dh-s.sealing{color:#ffb84d;}
.dh-s.drawing{color:#7dd3fc;}
.dh-last{font-size:12.5px;color:#eadfc6;white-space:nowrap;text-shadow:0 1px 4px rgba(0,0,0,.7);
  overflow:hidden;text-overflow:ellipsis;}
.dh-last b{color:#ffd66b;font-variant-numeric:tabular-nums;}
/* 🔇 音效开关 */
.dh-snd{
  font-size:15px; line-height:1;
  cursor:pointer; user-select:none; opacity:.8;
}
.dh-snd.off{opacity:.32;}

/* ── 🎉 开奖弹出：画面里的浮层，弹一下（scale .72→1，带回弹），2.6 秒后自己收 ── */
.res-flash{
  position:absolute; inset:0; z-index:8;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:5px; border-radius:inherit;
  background:radial-gradient(120% 100% at 50% 38%, rgba(0,0,0,.5) 0%, rgba(0,0,0,.8) 100%);
  opacity:0; pointer-events:none;
  transition:opacity .18s ease;
}
.res-flash.on{
  opacity:1;
  animation:resPop .42s cubic-bezier(.2,1.6,.4,1);
}
@keyframes resPop{
  from{transform:scale(.72);opacity:0;}
  to  {transform:scale(1);  opacity:1;}
}
.rf-dice{display:flex;gap:7px;}
.rf-dice .die,
.rf-dice .rf-die{
  width:52px;height:52px;display:block;
  filter:drop-shadow(0 3px 7px rgba(0,0,0,.6));
}
.rf-dice .die .die-img{display:block;width:100%;height:100%;}
.rf-main{
  font-size:32px; font-weight:800; letter-spacing:1px; line-height:1.1;
  background:linear-gradient(180deg, #fff2c8 0%, #f7cf63 46%, #e9a91f 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:#f7cf63;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.6));
}
.rf-sub{font-size:15px;font-weight:800;letter-spacing:2px;color:#cbd6ec;}
.rf-sub .b{color:#ff6f66;}
.rf-sub .s{color:#46e08b;}
.rf-sub .o{color:#ffd166;}
.rf-sub .e{color:#5eb8ff;}

/* ── 结果药丸：绝对定位在画面里，**让开下面那行「上期结果」**（bottom 30px）──
   ⚠️ 药丸压在淡蓝上 → 颜色要用**深色版**（快3 浅色主题的取值）。
      下面那几个色值是从快3 的 --red-soft/#cf3b34 那一套抄来的，
      **不能**用本站深色主题的 var(--red-soft)（#ff6f66 在淡蓝上几乎看不见）。 */
.result-tags{
  position:absolute;
  left:0; right:0; bottom:30px;
  display:flex; justify-content:center; gap:8px;
  margin:0;
  z-index:2;
  flex-wrap:wrap;
}
.tag{
  padding:4px 14px;
  border-radius:20px;
  font-size:15px;
  font-weight:800;
}
.tag.big   {background:rgba(255,91,82,.28); color:#ffb3ae; border:1px solid rgba(255,91,82,.55);}
.tag.small {background:rgba(52,217,127,.22); color:#9af0c0; border:1px solid rgba(52,217,127,.5);}
.tag.odd   {background:rgba(245,196,81,.22); color:#ffd98a; border:1px solid rgba(245,196,81,.5);}
.tag.even  {background:rgba(75,139,255,.25); color:#b7ccff; border:1px solid rgba(75,139,255,.5);}
.tag.triple{background:rgba(46,224,192,.20); color:#8ef0df; border:1px solid rgba(46,224,192,.5);}

/* 📱 窄屏：只收字号，别动上面那套百分比（比例是锁死的） */
@media (max-width:400px){
  .cd-band{padding:12px 12px 8px;}
  .cd-band .countdown{font-size:38px;letter-spacing:1px;}
  .cd-band .label{font-size:11.5px;}
  .curtain span{font-size:19px;letter-spacing:4px;}
  .tag{padding:3px 11px;font-size:13px;}
  .rf-dice .die,.rf-dice .rf-die{width:40px;height:40px;}
  .rf-main{font-size:26px;}
  .rf-sub{font-size:13px;}
  .dh-s{font-size:12px;}
  .dh-last{font-size:11.5px;}
}