/* ════════════════════════════════════════════════════════════════════
 * BUILD 158 · 骰宝第二页「三点难围」(老板:「骰宝的三点难围 开始做,做成像轮盘那样的第二页」)
 *   顶栏「台面 | 三点难围」两段式开关(照轮盘「台面 | 赛道」);第二页 30 格按对子排 6 行 × 5 格,
 *   每格三颗骰子(对子两颗用金框圈在一起 + 第三颗),1 赔 50。两页共用一个筹码托盘,一起确认、一起开。
 * ════════════════════════════════════════════════════════════════════ */

/* 顶栏:台面 / 三点难围 两段式开关(和 games140.css 的 .rlview 同一个样子) */
#app .sbwrap .sbview{flex:0 0 auto;display:flex;align-items:center;height:26px;padding:2px;gap:2px;border-radius:99px;border:1px solid var(--stroke);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015))}
#app .sbwrap .sbview button{position:relative;display:flex;align-items:center;gap:4px;height:20px;padding:0 9px;border-radius:99px;border:0;background:transparent;
  color:var(--muted);font-family:var(--display);font-weight:800;font-size:10.5px;letter-spacing:.05em;white-space:nowrap;cursor:pointer;transition:background .2s,color .2s}
#app .sbwrap .sbview button svg{width:14px;height:14px;flex:0 0 auto}
#app .sbwrap .sbview button.on{background:linear-gradient(180deg,#ffe38a,#d4a437);color:#2a1a04;box-shadow:0 0 10px rgba(255,209,102,.35)}
#app .sbwrap .sbview button:focus-visible{outline:2px solid #ffd166;outline-offset:2px}
#app .sbwrap .sbview .sbnew{position:absolute;top:-7px;right:-6px;font-style:normal;font:900 8px/1 var(--display);padding:2px 4px;border-radius:6px;background:#e8394a;color:#fff;letter-spacing:.02em;
  box-shadow:0 0 0 1.5px #140f1c;animation:sbnewp 1.6s ease-in-out infinite}
@keyframes sbnewp{50%{transform:scale(1.12)}}
/* 另一页押了多少:切换钮右上角一枚小金牌(那一页有注中了变绿) */
#app .sbwrap .sbview .sbvb{position:absolute;top:-8px;right:-6px;display:none;min-width:16px;padding:1px 4px;border-radius:99px;font-style:normal;
  font:800 8.5px/1.3 var(--num);text-align:center;color:#2a1d05;background:var(--moneygrad,linear-gradient(180deg,#ffe596,#d9a52a));
  box-shadow:0 0 0 1.2px #7a5d18,0 2px 5px rgba(0,0,0,.6);pointer-events:none;z-index:2}
#app .sbwrap .sbview .sbvb.on{display:block}
#app .sbwrap .sbview .sbvb.won{color:#05241a;background:linear-gradient(180deg,#9dffd2,#3fd996);box-shadow:0 0 0 1.2px #1d7a55,0 0 10px rgba(95,245,177,.6)}
#app .sbwrap .sbview button:has(.sbvb.on) .sbnew{display:none}

/* 两页叠在同一格:切到「三点难围」就把台面藏起来(和轮盘 .trk 一样) */
#app .sbwrap .sbhop{display:none}
#app .sbwrap.hop .sbhop{display:flex}
#app .sbwrap.hop .sbboard{display:none}

/* 第二页的底:和台面同一块深色毡,左上角一条说明 */
#app .sbwrap .sbhop{flex-direction:column;gap:4px;min-width:0;min-height:0;margin:0;padding:6px 8px;
  border-radius:14px;border:1px solid rgba(255,255,255,.09);
  background:
    repeating-linear-gradient(45deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px),
    radial-gradient(90% 80% at 50% 0%,rgba(212,164,55,.14),transparent 70%),
    linear-gradient(180deg,#0c2338,#071322)}
#app .sbwrap .sbhoph{flex:0 0 auto;display:flex;align-items:center;gap:9px;min-width:0;height:19px;padding:0 3px 0 2px;overflow:hidden}
#app .sbwrap .sbhoph > b{flex:0 0 auto;font-family:var(--toon);font-size:12.5px;letter-spacing:.14em;color:var(--lsgold,#f0d79a);text-shadow:0 1px 0 rgba(0,0,0,.5)}
#app .sbwrap .sbhoph .eg{flex:0 1 auto;min-width:0;display:flex;align-items:center;gap:3px;overflow:hidden}
#app .sbwrap .sbhoph .eg em{font-style:normal;font-family:var(--display);font-weight:600;font-size:9.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-left:2px}
#app .sbwrap .sbhoph > i{flex:0 0 auto;margin-left:auto;font-style:normal;font-family:var(--num);font-weight:800;font-size:10px;letter-spacing:.02em;color:#ffd166;
  padding:1px 9px;border-radius:99px;border:1px solid rgba(255,209,102,.42);background:rgba(255,209,102,.08)}

/* 6 行 × 5 格:每一行是同一个对子(左边竖着写 11 / 22 …) */
#app .sbwrap .sbhop .sbband.hb{flex:1 1 0}
#app .sbwrap .sbhop .sbband.hb .sbcells{grid-template-columns:repeat(5,1fr)}
#app .sbwrap .sbhop .sbbl{font-family:var(--num);font-weight:800;font-size:9.5px;letter-spacing:0;color:rgba(255,209,102,.85);background:rgba(255,209,102,.07)}
#app .sbwrap .sbhop .sbband.hb:nth-child(odd) .sbspot{background:linear-gradient(170deg,rgba(255,255,255,.085),rgba(255,255,255,.025) 65%),rgba(10,18,30,.55)}

/* 一格:对子两颗圈在金框里 + 第三颗;底下 50× */
#app .sbwrap .sbspot.hop{--chip:24px}
#app .sbwrap .sbspot.hop .dd{gap:4px}
#app .sbwrap .sbspot.hop .pr,#app .sbwrap .sbhoph .pr{display:flex;align-items:center;gap:1px;padding:1.5px 2px;border-radius:5px;
  background:rgba(255,209,102,.13);box-shadow:inset 0 0 0 1px rgba(255,209,102,.34)}
#app .sbwrap .sbhoph .pr{padding:1px 1.5px;border-radius:4px}
#app .sbwrap .sbspot.hop.won .pr{background:rgba(95,245,177,.16);box-shadow:inset 0 0 0 1px rgba(95,245,177,.55)}

/* 窄的屏(小手机横拿 / 竖拿转过来):开关只留字,省点地方给最近结果 */
@media (orientation:landscape) and (max-width:640px){#app .sbwrap .sbview button svg{display:none}#app .sbwrap .sbview button{padding:0 8px}}
@media (orientation:portrait) and (max-height:640px){#app .sbwrap .sbview button svg{display:none}#app .sbwrap .sbview button{padding:0 8px}}
/* 矮屏(小手机横拿 / 竖拿转过来):说明条只留标题和赔率;格子改成一横排「骰子 50×」,不然 50× 被切掉 */
@media (orientation:landscape) and (max-height:360px),(orientation:portrait) and (max-width:360px){
  #app .sbwrap .sbhoph .eg em{display:none}
  #app .sbwrap .sbspot.hop{flex-direction:row;gap:6px}
  #app .sbwrap .sbspot.hop .sbmini svg{width:14px;height:14px}
}

@media (prefers-reduced-motion:reduce){#app .sbwrap .sbview .sbnew{animation:none}}