/* ══════════════════════════════════════════════════════════════════════
   BUILD 123:骰宝 Sic Bo —— 台面照真台子分六块。
     大 / 小 · 单 / 双(四个大格)· 点数和 4–17(14 格)· 围骰(全围 + 指定 6)
     · 对子(6)· 组合(15)· 单骰(6),一共 52 个注区。
   手机上一屏放不下,所以按「块」分段,每块一个小标题 + 自己的网格。
   ══════════════════════════════════════════════════════════════════════ */

/* ── 盅 + 三颗骰子 ─────────────────────────────────────────── */
#app .sbstage{position:relative;width:min(96vw,420px);margin:0 auto;padding:16px 12px 12px;border-radius:20px;
  border:1px solid rgba(212,175,55,.3);
  background:radial-gradient(70% 70% at 50% 30%,rgba(60,180,120,.16),transparent 70%),linear-gradient(180deg,rgba(12,48,36,.62),rgba(6,20,16,.72))}
#app .sbplate{position:relative;height:104px;display:grid;place-items:center;transition:margin-top .22s}
#app .sbstage.hasres .sbplate{margin-top:30px}   /* 结算横幅出来的时候骰子往下让一让,别被盖住 */
#app .sbdice{display:flex;align-items:center;justify-content:center;gap:12px}
#app .sbdie{width:54px;height:54px;display:grid;place-items:center;transition:transform .12s}
#app .sbdie svg{display:block}
#app .sbstage.result .sbdie.land{animation:sbland .42s cubic-bezier(.2,.9,.3,1.3) both}
#app .sbstage.result .sbdie.k1{animation-delay:.09s}#app .sbstage.result .sbdie.k2{animation-delay:.18s}
@keyframes sbland{0%{opacity:0;transform:translateY(-30px) rotate(-22deg) scale(.7)}60%{opacity:1}100%{opacity:1;transform:none}}
/* 盖盅:下注阶段盖着,摇盅阶段晃,开盅抬起来 */
#app .sbcup{position:absolute;left:50%;top:50%;width:176px;height:104px;margin:-56px 0 0 -88px;pointer-events:none;
  border-radius:88px 88px 12px 12px;background:linear-gradient(160deg,#d9b04a,#8a6a1d 55%,#5c4512);
  border:2px solid rgba(255,235,170,.55);box-shadow:inset 0 10px 18px rgba(255,255,255,.22),0 8px 18px rgba(0,0,0,.55);
  transition:transform .45s cubic-bezier(.3,.8,.3,1),opacity .35s}
#app .sbcup i{position:absolute;left:50%;top:14px;width:46px;height:12px;margin-left:-23px;border-radius:99px;background:rgba(255,255,255,.3)}
#app .sbstage.betting .sbcup{transform:translateY(0);opacity:1}
#app .sbstage.rolling .sbcup{opacity:1;animation:sbshake .32s ease-in-out infinite}
#app .sbstage.result .sbcup{transform:translateY(-118px) rotate(-8deg);opacity:0}
@keyframes sbshake{0%{transform:translate(-5px,0) rotate(-2.5deg)}50%{transform:translate(5px,-3px) rotate(2.5deg)}100%{transform:translate(-5px,0) rotate(-2.5deg)}}
@media(prefers-reduced-motion:reduce){#app .sbcup,#app .sbdie{transition:none;animation:none}#app .sbstage.result .sbcup{opacity:0}}

/* 点数条 */
#app .sbsum{display:flex;align-items:center;justify-content:center;gap:8px;min-height:26px;margin-top:6px;opacity:0;transition:opacity .25s}
#app .sbsum.on{opacity:1}
#app .sbsum b{font-family:var(--num);font-weight:800;font-size:16px;color:var(--ink)}
#app .sbsum b.tri{color:#ffd166}
#app .sbsum i{font-style:normal;font-family:var(--display);font-weight:700;font-size:10.5px;letter-spacing:.1em;padding:2px 8px;border-radius:99px}
#app .sbsum i.big{color:#06121a;background:#ffd166}#app .sbsum i.small{color:#fff;background:#4a5bd8}
#app .sbsum i.odd{color:#06121a;background:#5ff5b1}#app .sbsum i.even{color:#fff;background:#b8579f}

/* 结算横幅(和鱼虾蟹同一套:窄条压在台面顶上,不盖骰子) */
#app .sbres{position:absolute;left:10px;right:10px;top:8px;display:none;align-items:center;gap:10px;padding:7px 12px;border-radius:14px;
  border:1px solid var(--stroke);background:rgba(8,10,22,.92);box-shadow:0 8px 22px rgba(0,0,0,.5);z-index:6}
#app .sbres.on{display:flex;animation:sbresin .28s ease-out both}
@keyframes sbresin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
#app .sbres i{font-style:normal;font-family:var(--num);font-size:11px;color:var(--dim);flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#app .sbres b{font-family:var(--num);font-weight:800;font-size:17px}
#app .sbres em{font-style:normal;font-family:var(--display);font-weight:700;font-size:10px;letter-spacing:.1em;padding:2px 8px;border-radius:99px}
#app .sbres span{display:none}
#app .sbres.win b{color:#5ff5b1}#app .sbres.win em{color:#06121a;background:#5ff5b1}
#app .sbres.lose b{color:#ff7a90}#app .sbres.lose em{color:#fff;background:#c8283c}
#app .sbres.push b{color:var(--dim)}#app .sbres.push em{color:var(--ink);background:rgba(255,255,255,.14)}

/* ── 最近结果 ─────────────────────────────────────────────── */
#app .sbhist{width:min(96vw,420px);margin:8px auto 0;display:flex;align-items:center;gap:6px;overflow-x:auto;padding-bottom:2px}
#app .sbhist > i{font-style:normal;font-size:10px;color:var(--dim);flex:0 0 auto}
#app .sbhist b{flex:0 0 auto;display:flex;align-items:center;gap:1px;padding:3px 6px;border-radius:10px;border:1px solid var(--stroke);background:rgba(10,13,28,.6)}
#app .sbhist b.big{border-color:rgba(255,209,102,.5)}#app .sbhist b.small{border-color:rgba(74,91,216,.6)}#app .sbhist b.tri{border-color:rgba(255,209,102,.9);box-shadow:0 0 10px rgba(255,209,102,.3)}
#app .sbhist b u{text-decoration:none;font-family:var(--num);font-weight:700;font-size:10px;color:var(--dim);margin-left:3px}

/* ── 台面:六块 ───────────────────────────────────────────── */
#app .sbboard{width:min(96vw,420px);margin:0 auto;display:flex;flex-direction:column;gap:10px}
#app .sbsec{border-radius:16px;border:1px solid rgba(212,175,55,.22);padding:8px 8px 9px;
  background:linear-gradient(180deg,rgba(12,48,36,.4),rgba(8,14,20,.5))}
#app .sbsec-h{font-family:var(--display);font-weight:700;font-size:10.5px;letter-spacing:.08em;color:rgba(243,221,142,.8);margin:1px 2px 7px}

#app .sbspot{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  padding:7px 4px;border-radius:12px;border:1px solid var(--stroke);color:var(--ink);cursor:pointer;
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.03) 60%),rgba(10,13,28,.5);
  -webkit-tap-highlight-color:transparent;transition:transform .12s,border-color .2s,box-shadow .2s,opacity .2s}
#app .sbspot i{font-style:normal;font-family:var(--num);font-weight:700;font-size:10px;color:rgba(243,221,142,.9);white-space:nowrap}
#app .sbspot b.lg{font-family:var(--toon);font-size:19px;letter-spacing:.14em;color:var(--ink);text-shadow:0 2px 0 rgba(0,0,0,.5)}
#app .sbspot .nm{font-family:var(--display);font-weight:600;font-size:9.5px;color:var(--dim);text-align:center;line-height:1.3}
#app .sbspot .nm i{display:block;font-size:8.5px;color:rgba(243,221,142,.75)}
#app .sbspot .dd{display:flex;align-items:center;justify-content:center;gap:2px}
#app .sbmini{display:grid;place-items:center}#app .sbmini svg{display:block}
/* 「几个人押了多少」只写在放得下的那几个大格上(点数和 / 围骰 / 对子 / 组合 / 单骰的格子太小,写了会挤掉赔率) */
#app .sbspot .pool{display:none;font-family:var(--num);font-size:8px;color:var(--dim);white-space:nowrap;max-width:98%;overflow:hidden;text-overflow:ellipsis}
#app .sbspot.ev .pool,#app .sbspot.tany .pool{display:block}
#app .sbspot .my{position:absolute;right:-5px;top:-5px;min-width:20px;padding:1px 5px;border-radius:99px;
  font-family:var(--num);font-weight:800;font-size:9.5px;line-height:1.35;text-align:center;color:#2a1d05;background:var(--goldgrad);
  box-shadow:0 0 0 1.5px #7a5d18,0 2px 5px rgba(0,0,0,.55);z-index:5}
#app .sbspot .my:empty{display:none}
#app .sbspot.mine{border-color:rgba(255,209,102,.7);box-shadow:0 0 16px rgba(255,209,102,.2)}
#app .sbspot.won{border-color:rgba(95,245,177,.9);box-shadow:0 0 22px rgba(95,245,177,.35)}
#app .sbspot.lost{opacity:.4}
#app .sbspot:active:not(:disabled){transform:scale(.97)}
#app .sbspot:disabled{cursor:default;opacity:1}          /* 截止了不要整块变灰 —— 要看得见自己的筹码 */
#app .sbspot.lost:disabled{opacity:.4}

/* 大 / 小 · 单 / 双 */
#app .sbrow4{display:grid;grid-template-columns:1fr 1fr;gap:7px}
#app .sbrow4 .sbspot{min-height:58px}
#app .sbspot.ev[data-k="big"]{--dc:#ffd166}#app .sbspot.ev[data-k="small"]{--dc:#7c8cff}
#app .sbspot.ev b.lg{color:var(--dc,var(--ink))}
/* 点数和 */
#app .sbsums{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
#app .sbsums .sbspot{min-height:40px;padding:5px 2px}
#app .sbsums .sbspot > b{font-family:var(--num);font-weight:800;font-size:14px}
/* 围骰 */
#app .sbtri{display:flex;flex-direction:column;gap:7px}
#app .sbtri .sbspot.tany{min-height:46px;flex-direction:row;gap:10px}
#app .sbtri6{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
#app .sbtri6 .sbspot{min-height:42px}
/* 对子 / 单骰 */
#app .sbrow6{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
#app .sbrow6 .sbspot{min-height:42px}
/* 组合 */
#app .sbcombo{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
#app .sbcombo .sbspot{min-height:40px;padding:5px 2px}

/* ── 工具行 / 统计 ────────────────────────────────────────── */
#app .sbtools{width:min(96vw,420px);margin:2px auto 0;display:flex;align-items:center;justify-content:space-between;gap:8px}
#app .sbtotal{font-family:var(--num);font-size:11.5px;color:var(--dim)}
#app .sbtotal small{margin-left:6px;padding:1px 6px;border-radius:99px;background:rgba(255,255,255,.08);font-size:10px}
#app .sbstats{width:min(96vw,420px);margin:0 auto;display:flex;align-items:flex-end;gap:3px;flex-wrap:wrap;padding:8px 10px}
#app .sbstats > i{width:100%;font-style:normal;font-size:10px;color:var(--dim);margin-bottom:4px}
#app .sbbar{flex:1 1 0;min-width:0;height:38px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:2px}
#app .sbbar u{width:70%;min-height:2px;border-radius:3px 3px 0 0;background:linear-gradient(180deg,#5ff5b1,#2b8a6e)}
#app .sbbar em{font-style:normal;font-family:var(--num);font-size:8px;color:var(--dim)}

@media(max-width:380px){
  #app .sbdice{gap:9px}
  #app .sbsums{grid-template-columns:repeat(5,1fr)}
  #app .sbcombo{grid-template-columns:repeat(4,1fr)}
  #app .sbspot i{font-size:9px}
}