/* ══════════════ 两栏骨架（照 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-bet  {order:2;}
.sb-mine {order:3;}
.sb-hist {order:4;}
.sb-help {order:5;}
@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 的 .round-card）══════════════ */
.sb-round{background:linear-gradient(160deg,#1f2b22 0%,#101a14 100%);
  border:1px solid #2c3d31;border-radius:14px;padding:18px 16px;text-align:center;color:#fff;
  position:relative;}   /* 右上角的 ℹ️ 按钮要绝对定位到这张卡上（跟龙虎斗一致） */
/* 📖 玩法说明按钮（ℹ️）—— 跟龙虎斗开奖卡右上角那个同款 */
.sb-rules-btn{position:absolute;top:10px;right:10px;background:rgba(255,255,255,.18);border:none;
  color:#fff;font-size:17px;width:38px;height:38px;border-radius:50%;cursor:pointer;line-height:1;
  padding:0;font-family:inherit;}
.sb-rules-btn:active{background:rgba(255,255,255,.34);}
.sb-round .qishu{font-size:12.5px;color:#9fb3a6;}
.sb-round .cd{font-size:46px;font-weight:900;letter-spacing:2px;line-height:1.15;margin:6px 0 2px;
  color:#4ade80;font-variant-numeric:tabular-nums;}
.sb-round .cd.warn{color:#fbbf24;}
.sb-round .cd.closed{color:#f87171;}
.sb-round .cd.vs{font-size:26px;letter-spacing:0;}
.sb-round .label{font-size:12.5px;color:#9fb3a6;min-height:17px;}
.sb-dice-row{display:flex;justify-content:center;gap:12px;margin:15px 0 10px;}
.sb-dice-row .die{width:58px;height:58px;background:#fff;border-radius:11px;color:#16211a;
  font-size:32px;font-weight:900;display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 10px rgba(0,0,0,.45);font-variant-numeric:tabular-nums;}
.sb-dice-row .die.pop{animation:diePop .42s cubic-bezier(.2,1.5,.4,1);box-shadow:0 0 0 3px #22c55e,0 5px 18px rgba(34,197,94,.55);}
@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){
  .sb-round{padding:22px 20px;}
  .sb-round .cd{font-size:64px;}
  .sb-dice-row .die{width:80px;height:80px;font-size:44px;border-radius:14px;}
  .sb-dice-row{gap:16px;}
}

/* ══════════════ 走势 + 历史表格 ══════════════ */
#sb-trend{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:14px;}
#sb-trend .b{min-width:26px;height:26px;padding:0 6px;border-radius:7px;color:#fff;font-size:12px;
  font-weight:800;display:flex;align-items:center;justify-content:center;box-sizing:border-box;}
.sb-hist-t{width:100%;font-size:12.5px;}
.sb-hist-t th{color:#9ca3af;font-weight:600;text-align:left;padding-bottom:6px;}
.sb-hist-t td{padding:5px 0;border-top:1px solid #f0f2f4;}
.sb-hist-t .dd{font-weight:800;letter-spacing:1px;}

/* ══════════════ 下注区块（照 Java 的 .acc 手风琴）══════════════ */
#sb-acc{display:flex;flex-direction:column;gap:8px;}
.sb-acc-item{background:#fff;border:1px solid #e8ecf1;border-radius:11px;overflow:hidden;transition:border-color .15s;}
.sb-acc-item.open{border-color:#16a34a;box-shadow:0 2px 10px rgba(22,163,74,.10);}
html.dark .sb-acc-item{background:#1b1f27;border-color:#2c323d;}
.sb-acc-head{display:flex;align-items:center;gap:8px;padding:12px 13px;cursor:pointer;user-select:none;font-size:14px;font-weight:900;color:#374151;}
html.dark .sb-acc-head{color:#e6e8ea;}
.sb-acc-head .hint{font-size:10.5px;font-weight:500;color:#9ca3af;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sb-acc-head .ao{font-size:11.5px;font-weight:800;color:#fff;background:#16a34a;padding:2px 9px;border-radius:20px;flex:none;}
.sb-acc-item.open .sb-acc-head .ao{background:#0d9488;}
.sb-acc-head .ar{color:#16a34a;font-style:normal;transition:transform .2s;flex:none;}
.sb-acc-item.open .sb-acc-head .ar{transform:rotate(180deg);}
.sb-acc-body{display:none;padding:0 12px 13px;}
.sb-acc-item.open .sb-acc-body{display:block;}

.sb-opt{position:relative !important;opacity:.68;filter:saturate(.7);
  border:3px solid transparent !important;padding:9px 2px;border-radius:9px;line-height:1.25;
  font-weight:900;color:#fff;transition:opacity .15s,transform .15s,box-shadow .15s,filter .15s;}
.sb-opt.on{opacity:1;filter:none;border-color:#fbbf24 !important;
  box-shadow:0 0 0 3px rgba(251,191,36,.42),0 7px 20px rgba(0,0,0,.22);transform:translateY(-2px) scale(1.03);}
.sb-opt small{display:block;font-size:10px;font-weight:600;opacity:.85;}

.sb-zone-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.sb-zone-row+.sb-zone-row{margin-top:8px;}
.sb-zone-btn{padding:15px 8px;text-align:center;border-radius:11px;}
.sb-zone-btn .t{font-size:20px;font-weight:900;line-height:1.1;}
.sb-zone-btn .o{font-size:10.5px;opacity:.8;margin-top:3px;font-weight:600;}

/* ── 数字网格（照 Java：和值/三同号/二同号复选/三连号 = 4 列 .sum-grid）
               （三不同/二不同/二同号单选 = 6 列 .num-pick）──────────────── */
.sb-sum-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.sb-num-pick{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;}
.sb-num-btn,.sb-pick-btn{padding:10px 4px;background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:8px;
  text-align:center;cursor:pointer;user-select:none;transition:border-color .15s,background .15s;}
.sb-num-btn .n{font-size:17px;font-weight:800;color:#374151;line-height:1.25;}
.sb-num-btn .o{font-size:11px;color:#9ca3af;line-height:1.3;}
.sb-pick-btn{font-size:17px;font-weight:800;color:#374151;line-height:1.25;}
.sb-pick-btn .po{font-size:11px;font-weight:400;color:#9ca3af;line-height:1.3;}
.sb-num-btn.on,.sb-pick-btn.on{border-color:#16a34a;background:rgba(22,163,74,.10);}
.sb-num-btn.on .n,.sb-pick-btn.on{color:#15803d;}
.sb-num-btn.on .o,.sb-pick-btn.on .po{color:#16a34a;}
.sb-pick-btn.off{opacity:.25;cursor:not-allowed;}
.sb-pick-label{font-size:12px;font-weight:700;color:#6b7280;margin-bottom:6px;}
.sb-pe-tip{font-size:12px;color:#9ca3af;margin-top:10px;text-align:center;}
.sb-pe-tip.ok{color:#16a34a;font-weight:700;}
html.dark .sb-num-btn,html.dark .sb-pick-btn{background:#222833;border-color:#333c4a;}
html.dark .sb-num-btn .n,html.dark .sb-pick-btn{color:#d7dde6;}
html.dark .sb-num-btn.on,html.dark .sb-pick-btn.on{background:rgba(22,163,74,.18);}
#sb-submit.ready{background:linear-gradient(135deg,#16a34a,#065f46) !important;}

details.cp{background:#fff;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.07);margin-bottom:10px;overflow:hidden;}
html.dark details.cp{background:#1b1f27;}
details.cp>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:13px 15px;font-weight:800;font-size:15px;user-select:none;}
details.cp>summary::-webkit-details-marker{display:none;}
details.cp>summary h2{font-size:15px;margin:0;}
details.cp>summary .arr{transition:transform .2s;color:#16a34a;font-style:normal;}
details.cp[open]>summary .arr{transform:rotate(180deg);}
details.cp .cp-in{padding:0 14px 14px;}
details.cp .cp-in>.panel{margin:0;box-shadow:none;}
html.dark .sb-hist-t td{border-color:#2a3040;}

#sb-flash{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:9999;}
#sb-flash-in{background:#fff;border-radius:18px;padding:26px 34px;text-align:center;animation:sbpop .35s ease;}
@keyframes sbpop{from{transform:scale(.6);opacity:0;}to{transform:scale(1);opacity:1;}}
#sb-flash-dice{display:flex;gap:10px;justify-content:center;}
#sb-flash-dice .die{width:50px;height:50px;background:#f1f5f9;border-radius:10px;color:#16211a;
  font-size:28px;font-weight:900;display:flex;align-items:center;justify-content:center;}
#sb-flash-total{font-size:46px;font-weight:900;line-height:1;margin-top:12px;}
#sb-flash-text{font-size:19px;font-weight:900;margin-top:4px;letter-spacing:.5px;}
#sb-flash-sub{font-size:13px;color:#888;margin-top:5px;}
html.dark #sb-flash-in{background:#131519;color:#e6e8ea;}
html.dark #sb-flash-dice .die{background:#252a33;color:#e6e8ea;}