/* ══════════════════════════════════════════════════════════════════════
   BUILD 125 · 骰宝 / 鱼虾蟹 / 轮盘 也改横屏 —— 整张台面一屏看完,不用滑。
   上半段是三款共用的横屏外壳(顶栏 · 筹码槽),下半段是各自的台面。
   旋转那一层在 landscape.css;百家乐的样子在 games124.css。
   ══════════════════════════════════════════════════════════════════════ */

/* ══════════ 共用:横屏外壳 ══════════ */
#app .lswrap{--lsgold:#f0d79a;--lsline:rgba(240,215,154,.34)}
#app .sbwrap,#app .fswrap,#app .rlwrap{
  position:absolute;inset:0;display:flex;flex-direction:column;gap:6px;padding:7px 9px 8px;overflow:hidden;
  background:
    radial-gradient(90% 60% at 50% -10%,rgba(62,242,224,.09),transparent 62%),
    radial-gradient(70% 60% at 92% 108%,rgba(124,108,255,.10),transparent 66%),
    linear-gradient(180deg,#080c18,#05070f 60%)}
#app .sbwrap .actitle,#app .fswrap .actitle,#app .rlwrap .actitle{display:none}
/* 竖屏时代的壳子规则(居中 / 不伸展 / 筹码排成 6 列网格)在横屏全部收掉 */
#app .sbwrap,#app .fswrap,#app .rlwrap{align-items:stretch;justify-content:flex-start}
#app .sbwrap > *,#app .fswrap > *,#app .rlwrap > *{flex:0 0 auto;align-self:auto}
#app .sbwrap .lsrail .scprices,#app .fswrap .lsrail .scprices,#app .rlwrap .lsrail .scprices{
  display:flex;grid-template-columns:none;align-items:center;justify-content:flex-start}
#app .sbwrap .lsrail .scprices .sccustom,#app .fswrap .lsrail .scprices .sccustom,#app .rlwrap .lsrail .scprices .sccustom{grid-column:auto;justify-self:auto}
#app .sbwrap .lsrail .scprices .lbl,#app .fswrap .lsrail .scprices .lbl,#app .rlwrap .lsrail .scprices .lbl{grid-column:auto;text-align:left;margin:0 2px 0 0}
#app .sbpt,#app .fspt,#app .rlpt{display:none}      /* 横屏一屏放不下赔率长文;规则页里有 */

/* 顶栏 */
#app .lstop{flex:0 0 auto;display:flex;align-items:center;gap:7px;min-width:0;height:30px}
#app .lstb{display:flex;align-items:center;gap:5px;flex:0 0 auto;height:26px;padding:0 10px;border-radius:99px;
  border:1px solid var(--stroke);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  color:var(--muted);font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.04em;
  cursor:pointer;transition:transform .12s,color .2s,border-color .2s}
#app .lstb:active{transform:scale(.95)}
#app .lstb .chev{font-size:14px;line-height:1;margin-top:-1px}
#app .lstb .qm{font-style:normal;width:12px;height:12px;border-radius:50%;border:1px solid currentColor;
  display:grid;place-items:center;font-size:8px;line-height:1}
#app .lsname{flex:0 0 auto;display:flex;align-items:baseline;gap:6px;font-family:var(--toon);font-size:14px;
  letter-spacing:.1em;color:var(--lsgold)}
#app .lsname i{font-style:normal;font-size:7.5px;letter-spacing:.26em;color:rgba(240,215,154,.4)}
#app .lstop .lsphase{flex:0 0 auto;width:auto;min-width:0;gap:7px;margin:0}
#app .lstop .lsphase i{display:none}
#app .lsbal2{flex:0 0 auto;display:flex;align-items:baseline;gap:6px;height:26px;padding:0 11px;border-radius:99px;
  border:1px solid rgba(255,209,102,.36);background:linear-gradient(180deg,rgba(255,209,102,.12),rgba(255,209,102,.03));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
#app .lsbal2 i{font-style:normal;font-family:var(--display);font-size:8px;letter-spacing:.16em;color:rgba(255,231,168,.55)}
#app .lsbal2 b{font-family:var(--num);font-weight:800;font-size:13px;color:#ffd166}

/* 筹码槽 */
#app .lsrail{flex:0 0 auto;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;
  padding:5px 10px;border-radius:12px;border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(180deg,#141a2b,#0a0e1a);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 6px 16px rgba(0,0,0,.45)}
#app .lsrail .scprices{width:auto;margin:0;gap:6px;flex-wrap:nowrap}
#app .lsrail .scprices .chipbtn{width:34px;height:34px;font-size:10.5px}
#app .lsrailr{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:2px;min-width:0;overflow:hidden}
#app .lsrailtop,#app .lsrailbot{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0;max-width:100%}
#app .lsrailtop .rltb{flex:0 0 auto;height:23px;padding:0 10px;font-size:10px}
#app .lstotal{flex:0 0 auto;font-family:var(--num);font-weight:800;font-size:11px;color:#ffd166;white-space:nowrap}
#app .lspool{flex:0 1 auto;min-width:0;font-family:var(--num);font-size:9.5px;color:var(--dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#app .lsrailtop .dkhint{width:auto;flex:0 1 auto;min-width:0;margin:0;font-size:9.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#app .lswrap[data-phase="betting"] .lsrailtop .dkhint{display:none}
#app .lswrap:not([data-phase="betting"]) .lsrailbot .dkfeed{display:none}
#app .lswrap:not([data-phase="betting"]) .lspool{display:none}
#app .lsrailbot .dkfeed{flex:0 1 auto;min-width:0;min-height:0;max-width:200px;display:block;overflow:hidden;
  white-space:nowrap;text-overflow:ellipsis;font-family:var(--num);font-size:9px;color:var(--dim)}
#app .lsrailbot .dkfeed span{display:inline;padding:0;margin:0 6px 0 0;border:0;background:none;border-radius:0;font-size:9px;color:var(--dim)}
#app .lsrailbot .dkfeed span b{color:var(--muted);font-weight:700}
#app .lsrailbot .dkfeed span i{font-style:normal;color:rgba(240,215,154,.7)}
#app .lsrailbot .scfair{flex:0 0 auto;margin:0;font-size:9px;gap:6px;white-space:nowrap}

/* 每个注区角上「我押了多少」的金筹码,三款共用 */
#app .sbwrap .sbspot .my,#app .fswrap .fscell .my,#app .fswrap .fspair .my{z-index:6}

/* ══════════ 骰宝:左边骰盅,右边整张台面 ══════════ */
#app .lsgrid{flex:1 1 auto !important;min-height:0;display:grid;gap:8px;width:auto}
#app .lsgrid.sbg{grid-template-columns:minmax(118px,21%) minmax(0,1fr)}
#app .lsgrid.fsg{grid-template-columns:minmax(132px,24%) minmax(0,1fr)}
#app .lsside{display:flex;flex-direction:column;gap:6px;min-width:0;min-height:0}
#app .sbwrap .sbstage{flex:1 1 auto;min-height:0;margin:0;border-radius:14px}
#app .sbwrap .sbstage .sbplate{margin-top:0}
#app .sbwrap .sbstage.hasres .sbplate{margin-top:18px}
#app .sbwrap .sbstats{flex:0 0 auto;margin:0;font-size:9px;text-align:center}
#app .lstop .sbhist{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:5px;margin:0;overflow:hidden;
  justify-content:flex-end;white-space:nowrap}

/* 台面:六条带子,左边一条竖标题 */
#app .sbwrap .sbboard{display:flex;flex-direction:column;gap:5px;min-width:0;min-height:0;margin:0;padding:6px;
  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(30,120,86,.2),transparent 70%),
    linear-gradient(180deg,#0c2338,#071322)}
#app .sbband{display:grid;grid-template-columns:13px minmax(0,1fr);gap:3px;min-height:0;min-width:0}
#app .sbbl{writing-mode:vertical-rl;text-orientation:upright;display:grid;place-items:center;overflow:hidden;
  font-family:var(--display);font-weight:700;font-size:7.5px;letter-spacing:.04em;color:rgba(240,215,154,.6);
  border-radius:4px;background:rgba(255,255,255,.04)}
#app .sbcells{display:grid;gap:3px;min-width:0;min-height:0}
#app .sbband.b1{flex:1.2 1 0}#app .sbband.b1 .sbcells{grid-template-columns:repeat(4,1fr)}
#app .sbband.b2{flex:1 1 0}  #app .sbband.b2 .sbcells{grid-template-columns:repeat(7,1fr)}
#app .sbband.b3{flex:.92 1 0}#app .sbband.b3 .sbcells{grid-template-columns:repeat(6,1fr)}
#app .sbband.b4{flex:1 1 0}  #app .sbband.b4 .sbcells{grid-template-columns:repeat(14,1fr)}
#app .sbband.b5{flex:.92 1 0}#app .sbband.b5 .sbcells{grid-template-columns:repeat(15,1fr)}
#app .sbband.b6{flex:1.05 1 0}#app .sbband.b6 .sbcells{grid-template-columns:repeat(6,1fr)}

#app .sbwrap .sbspot{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  min-width:0;min-height:0;padding:2px;border-radius:8px;border:1px solid rgba(255,255,255,.12);color:var(--ink);
  background:linear-gradient(170deg,rgba(255,255,255,.07),rgba(255,255,255,.02) 65%),rgba(6,12,22,.5);
  cursor:pointer;overflow:hidden;transition:transform .1s,border-color .2s,box-shadow .2s,opacity .22s}
#app .sbwrap .sbspot b{font-family:var(--toon);font-size:13px;line-height:1.05}
#app .sbwrap .sbspot b.lg{font-size:17px;letter-spacing:.12em}
#app .sbwrap .sbspot i{font-style:normal;font-family:var(--num);font-weight:700;font-size:8px;color:rgba(240,215,154,.8);white-space:nowrap}
#app .sbwrap .sbspot i.sub{font-size:7.5px;color:var(--dim)}
#app .sbwrap .sbspot .dd{display:flex;align-items:center;justify-content:center;gap:1px}
#app .sbwrap .sbspot.ev b.lg{color:var(--lsgold)}
#app .sbwrap .sbspot[data-k="big"] b.lg,#app .sbwrap .sbspot[data-k="odd"] b.lg{color:#ffc14d}
#app .sbwrap .sbspot[data-k="small"] b.lg,#app .sbwrap .sbspot[data-k="even"] b.lg{color:#7fb4ff}
#app .sbwrap .sbspot.tany b{font-size:10px;letter-spacing:.06em;color:#ff9ec4}
#app .sbwrap .sbspot.sum b{font-family:var(--num);font-weight:800;font-size:14px}
#app .sbwrap .sbspot .pool{display:none}
#app .sbwrap .sbspot.ev .pool,#app .sbwrap .sbspot.tany .pool{display:block;font-family:var(--num);font-size:7.5px;color:var(--dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:98%}
#app .sbwrap .sbspot .my{position:absolute;right:-3px;top:-3px;min-width:17px;padding:1px 4px;border-radius:99px;
  font-family:var(--num);font-weight:800;font-size:8.5px;line-height:1.3;text-align:center;color:#2a1d05;
  background:var(--moneygrad);box-shadow:0 0 0 1.2px #7a5d18,0 2px 5px rgba(0,0,0,.6)}
#app .sbwrap .sbspot .my:empty{display:none}
#app .sbwrap .sbspot.mine{border-color:rgba(255,209,102,.75);box-shadow:0 0 12px rgba(255,209,102,.2)}
#app .sbwrap .sbspot.won{border-color:rgba(95,245,177,.95);box-shadow:0 0 0 1.2px rgba(95,245,177,.65),0 0 16px rgba(95,245,177,.3)}
#app .sbwrap .sbspot.lost{opacity:.32}
#app .sbwrap .sbspot:active:not(:disabled){transform:scale(.96)}
#app .sbwrap .sbspot:disabled{cursor:default}
#app .sbwrap .sbspot:disabled:not(.lost):not(.won){opacity:.88}
#app .sbwrap .sbmini{display:block;line-height:0}

/* 高度很小的机器再压一压 */
@media (max-height:400px){
  #app .lsname i{display:none}

  #app .sbwrap .sbspot b.lg{font-size:15px}
  #app .lsrail .scprices .chipbtn{width:31px;height:31px}
}
@media (max-height:340px){

  #app .sbwrap .sbspot b.lg{font-size:13px}
  #app .sbwrap .sbspot i.sub{display:none}
  #app .lsrail .scprices .chipbtn{width:28px;height:28px}
}

/* ── 覆盖 games123.css 里为竖屏写死的宽度 / 尺寸(横屏下全部按栏走)────────── */
#app .sbwrap .sbstage,#app .sbwrap .sbboard,#app .sbwrap .sbstats,#app .lstop .sbhist{width:auto;margin:0}
#app .sbwrap .sbstage{padding:8px;display:flex;flex-direction:column;align-items:center;justify-content:center}
#app .sbwrap .sbplate{height:auto;flex:1 1 auto;min-height:0;width:100%;display:grid;place-items:center}
#app .sbwrap .sbdice{gap:6px}
#app .sbwrap .sbdie{width:38px;height:38px}
#app .sbwrap .sbdie svg{width:38px;height:38px}
#app .sbwrap .sbcup{width:132px;height:78px;margin:-42px 0 0 -66px}
#app .sbwrap .sbcup i{top:10px;width:34px;height:9px;margin-left:-17px}
#app .sbwrap .sbstage.result .sbcup{transform:translateY(-92px) rotate(-8deg)}
#app .sbwrap .sbsum{font-size:11px}
#app .sbwrap .sbres{left:6px;right:6px;top:6px}
#app .sbwrap .sbstats{padding:5px 7px;justify-content:center}
#app .sbwrap .sbstats > i{margin-bottom:2px;text-align:center;font-size:9px}
#app .lstop .sbhist{padding:0}
#app .lstop .sbhist > i{display:none}
#app .lstop .sbhist b{padding:2px 4px;border-radius:8px}
#app .lstop .sbhist b svg{width:11px;height:11px}
#app .lstop .sbhist b u{font-size:9px}

/* ══════════ 鱼虾蟹:左边碗 + 骰子,右边整张台面(6 个图案 + 15 对 Focus 2)══════════ */
#app .fswrap .fsstage{width:auto;height:auto;flex:1 1 auto;min-height:0;margin:0;border-radius:14px}

#app .fswrap .fsdie,#app .fswrap .fsdie svg{width:38px;height:38px}
#app .fswrap .fsstats{width:auto;flex:0 0 auto;margin:0;padding:5px 7px;font-size:9px;justify-content:center}
#app .fswrap .fsstats > i{margin-bottom:2px;text-align:center;font-size:9px}
#app .lstop .fshist{flex:1 1 auto;width:auto;min-width:0;margin:0;justify-content:flex-end;overflow:hidden}
#app .lstop .fshist > i{display:none}

/* 台面:整块占满右栏,格子跟着高度走 */
#app .fswrap .fsboard{width:auto;margin:0;min-width:0;min-height:0;align-self:stretch;
  --fsgap:clamp(22px,4.2vh,36px);padding:clamp(28px,7vh,46px) clamp(10px,2vw,22px);
  grid-template-rows:1fr 1fr}
#app .fswrap .fscell{min-height:0;padding:5px 4px}
#app .fswrap .fscell .art{height:auto;flex:1 1 auto;min-height:0;display:grid;place-items:center}
#app .fswrap .fscell .art svg{width:clamp(30px,7.5vh,52px);height:clamp(30px,7.5vh,52px)}
#app .fswrap .fscell .nm{font-size:clamp(11px,2.6vh,15px)}
#app .fswrap .fscell .nm i{font-size:8px}

/* ══════════ 轮盘:左边盘 + 冷热号,右边整张号码台 ══════════ */
#app .lsgrid.rlg{grid-template-columns:minmax(150px,27%) minmax(0,1fr)}
#app .rlright{display:flex;flex-direction:column;gap:5px;min-width:0;min-height:0}
#app .rlwrap .rlscene{width:auto;height:auto;flex:1 1 auto;min-height:0;margin:0;border-radius:14px}
#app .rlwrap .rlstats{width:auto;flex:0 0 auto;margin:0;padding:5px 7px;font-size:9px}
#app .rlwrap .rlstats .rlsrow{gap:3px}
#app .lstop .rlhist{flex:1 1 auto;width:auto;min-width:0;margin:0;justify-content:flex-end;overflow:hidden;gap:3px}
#app .lstop .rlhist > i{display:none}
/* 号码台改成真台子的横着摆:左边 0,中间 3 行 12 列,右边三个 2:1,下面一打 / 红黑单双大小 */
#app .rlwrap .rlboard{width:auto;margin:0;flex:1 1 auto;min-height:0;min-width:0;display:grid;gap:4px;padding:7px;
  grid-template-columns:40px minmax(0,1fr) 46px;
  grid-template-rows:minmax(0,3.1fr) 15px minmax(0,1fr) minmax(0,1fr);
  grid-template-areas:"zero grid cols" "zero line cols" "zero doz  ." "zero even .";
  border-radius:14px}
#app .rlwrap .rlzero{grid-area:zero;display:grid}
#app .rlwrap .rlgrid{grid-area:grid;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:3px}
#app .rlwrap .rlcols{grid-area:cols;display:grid;grid-template-columns:1fr;grid-template-rows:repeat(3,minmax(0,1fr));gap:3px}
#app .rlwrap .rldoz{grid-area:doz;display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
#app .rlwrap .rleven{grid-area:even;display:grid;grid-template-columns:repeat(6,1fr);gap:4px}
#app .rlwrap .rlin{position:absolute;inset:0;pointer-events:none}
#app .rlwrap .rlin .rls{pointer-events:auto}
#app .rlwrap .rls{min-height:0;font-size:13px}
#app .rlwrap .rls.g{min-height:0}
#app .rlwrap .rls.o{min-height:0;font-size:10.5px}
#app .rlwrap .rls.o .rlback{font-size:8px}
#app .rlwrap .rlzero .rls{writing-mode:vertical-rl;text-orientation:upright;font-size:15px}
#app .rlwrap .rlcols .rls{font-size:9.5px}
#app .rlwrap .rlhint{flex:0 0 auto;margin:0;font-size:8.5px;text-align:center;color:var(--dim)}
#app .rlwrap #rlPhase{position:static}
#app .rlwrap .rlmid{font-size:inherit}
#app .rlwrap .resbig{max-width:96%}
/* 结算行 / 内围小圆点在横屏里的尺寸 */
#app .rlwrap .resdock{width:auto;min-width:0;max-width:100%;flex:0 0 auto}
#app .rlwrap .resdock .resbig{max-width:100%;font-size:11px;padding:6px 8px;min-height:0}
#app .rlwrap .rls.in{width:24px;height:24px;background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.22)}
#app .rlwrap .rls.in.t,#app .rlwrap .rls.in.x,#app .rlwrap .rls.in.q{border-color:rgba(255,209,102,.3);background:rgba(255,209,102,.07)}
#app .rlwrap .rls.in::after{opacity:.65}
#app .rlwrap .rls.in::after{line-height:22px;font-size:12px}
#app .rlwrap .rls.in .rlchip{width:24px;height:24px;font-size:8.5px}
/* 鱼虾蟹:交叉口那四个斜线位在横屏里给厚一点,手指按得中 */
#app .fswrap .fspair.dg{height:28px;width:50px}
#app .fswrap .fspair.cn{width:54px;height:28px}
/* 结算横幅在横屏的窄栏里压成一行(原来是竖屏宽台面的两三行) */
#app .fswrap .fsres{left:5px;right:5px;top:5px;gap:5px;padding:4px 8px;border-radius:10px;flex-wrap:nowrap;
  white-space:nowrap;overflow:hidden}
#app .fswrap .fsres i{font-size:9px;overflow:hidden;text-overflow:ellipsis;min-width:0}
#app .fswrap .fsres b{font-size:13px}
#app .fswrap .fsres em{font-size:8.5px;padding:1px 6px}

#app .fswrap .fssum{bottom:6px;padding:2px 8px}
#app .fswrap .fssum b{font-size:12px}
#app .fswrap .fssum i{font-size:9px;padding:1px 6px}