/* BUILD 235(老板发来手机截图:「鱼虾蟹怎么这个样子」):
   手机横屏(容器 < 980px)之前的问题 —— ① 骰盅压住托盘顶边正中那块「虎+鸡」小牌(竖拿手机整页转 90° 时 vh 按竖屏算,cqh 也拿不到(容器只量宽),骰盅被放大一倍多);
   ② 托盘两边空一大片;③ 押在小牌上的筹码盖住两个图案。
   改法:手机上骰盅 / 托盘上方留白一律用容器宽度单位(cqw)算,骰盅缩小、整个坐在托盘上方不碰格子;两边面板在 ≥ 700px 的容器也显示(窄版),填掉空位;小牌上的筹码缩小、挂在小牌右端。 */
@container (max-width:980px){
  /* 老板选的方案 1:托盘拉宽(约 2.1:1),六块格子放大,格子之间留走道,15 块小牌全放在走道 / 交叉点 / 托盘边上,不压图案 */
  #app .fswrap .fb4wrap{padding-top:1.7cqw}
  #app .fswrap .fb4dome{height:3.6cqw;top:0;left:36%;z-index:3}
  #app .fswrap .fb4{aspect-ratio:2.13/1;padding:2.8% 10.7%;border-radius:1.6cqw}
  #app .fswrap .fb4g{gap:16% 10.2%}
  #app .fswrap .fbx.v4 .fs4t{border-radius:7%/8%}
  #app .fswrap .fbx.v4 .fs4b{width:12.2cqw;height:16cqh;border-radius:.9cqw;padding:0 .3cqw}
  #app .fswrap .fbx.v4 .fs4b[data-k="2:tiger:gourd"]{left:31.6%!important;top:21%!important}
  #app .fswrap .fbx.v4 .fs4b[data-k="2:gourd:rooster"]{left:68.4%!important;top:21%!important}
  #app .fswrap .fbx.v4 .fs4b[data-k="2:crab:fish"]{left:31.6%!important;top:79%!important}
  #app .fswrap .fbx.v4 .fs4b[data-k="2:fish:prawn"]{left:68.4%!important;top:79%!important}
  #app .fswrap .fbx.v4 .fs4b[data-k="2:tiger:crab"]{left:13.3%!important;top:50%!important}
  #app .fswrap .fbx.v4 .fs4b[data-k="2:gourd:fish"]{left:50%!important;top:50%!important}
  #app .fswrap .fbx.v4 .fs4b[data-k="2:rooster:prawn"]{left:86.7%!important;top:50%!important}
  #app .fswrap .fbx.v4 .fs4b[data-k="2:tiger:fish"]{left:31.6%!important;top:42.5%!important}
  #app .fswrap .fbx.v4 .fs4b[data-k="2:gourd:crab"]{left:31.6%!important;top:57.5%!important}
  #app .fswrap .fbx.v4 .fs4b[data-k="2:gourd:prawn"]{left:68.4%!important;top:57.5%!important}
  #app .fswrap .fbx.v4 .fs4b[data-k="2:rooster:fish"]{left:68.4%!important;top:42.5%!important}
  #app .fswrap .fbx.v4 .fs4b[data-k="2:tiger:prawn"]{left:-1.5%!important;top:-2%!important}
  #app .fswrap .fbx.v4 .fs4b[data-k="2:rooster:crab"]{left:101.5%!important;top:-2%!important}
  #app .fswrap .fbx.v4 .fs4b[data-k="2:tiger:rooster"]{left:50%!important;top:-4%!important}
  #app .fswrap .fbx.v4 .fs4b[data-k="2:crab:prawn"]{left:50%!important;top:104%!important}
  #app .fswrap .fb4side{display:flex;flex:0 0 clamp(96px,14%,150px);margin:1.7cqw 0 .4vh;padding:1.2cqw 1cqw}
  #app .fswrap .fb4side h4{font-size:clamp(9px,1.06cqw,12px);margin-bottom:0.33cqw}
  #app .fswrap .fb4hist{gap:0.26cqw}
  #app .fswrap .fb4hist .hr span{height:2.31cqw}
  #app .fswrap .fb4hist img.cut.c3{height:1.72cqw!important}
  #app .fswrap .fb4hist .hr em{font-size:clamp(7px,0.79cqw,10px)}
  #app .fswrap .fb4mine{gap:0.3cqw}
  #app .fswrap .fb4mine .mr{padding:0.1cqw 0.17cqw;gap:0.33cqw}
  #app .fswrap .fb4mine .mr img.cut.c3{height:2.11cqw!important;width:2.31cqw!important}
  #app .fswrap .fb4mine .mr b{font-size:clamp(10px,1.12cqw,14px);padding:0.2cqw 0.13cqw}
  #app .fswrap .fb4pairs{font-size:clamp(8px,0.86cqw,11px);padding:0.2cqw 0.26cqw;margin-top:0.26cqw}
  #app .fswrap .fbx.v4 .fs4b .my,#app .fswrap .fbx.v4 .fs4b .my.pend{--chip:clamp(16px,2.81cqw,24px);left:88%;top:50%}
  #app .fswrap .fbx.v4 .fs4t .my{--chip:clamp(22px,3.96cqw,34px)}
}
@container (max-width:700px){
  #app .fswrap .fb4side{display:none}
}
/* BUILD 243(老板:「那个绿色的 80 一条是什么鬼」):结果阶段贴在格子上的「+80 / −100」小牌,手机横屏(竖拿转 90°)时被挤成一个字一行、拉成一条长绿条 ——
   钉死:一行、按内容定宽、高度只有一行;位置挂在格子顶边中间,字号按容器宽算(vh 在转屏模式下不可靠) */
@container (max-width:980px){
  #app .fswrap .fbx.v4 [data-net]::after{white-space:nowrap!important;width:max-content!important;max-width:none!important;height:auto!important;min-height:0!important;line-height:1.6!important;
    writing-mode:horizontal-tb!important;top:auto!important;bottom:calc(100% - 0.6cqw)!important;left:50%!important;transform:translateX(-50%)!important;font-size:clamp(9px,1.9cqw,13px)!important;padding:0 1.1cqw!important}
}