/* ══════════════════════════════════════════════════════════════════════
   BUILD 161 · 21 点下注盘重新设计(老板:「21点里面的百家乐拿走,下注盘你自己再设计新的」)
   一块牌桌绒布:跟上面牌桌同一种深蓝绒,金色印字,青色桌边。
     左 = 主注「印章」:大下注圈,圈外上沿印天生 21 点赔付、下沿印保险赔付;圈里写限额,押了注筹码放正中。
     右 = 庄明牌三组六格(红黑 / 单双 / 大小),一组一行,押了注格子里放一颗小筹码;标题行右边是最近几局的明牌。
     最底一行小字:庄家软 17 要牌 + 通杀规则(单双 / 大小 K 通杀;红黑没有通杀牌)。
   只认 .bp3(新盘),旧 .bp2 的规则一条不动。每条都带 #app .bp3,压得过 style.css 里那些不带 id 的 .bspot / .rbar 基础样式。
   ══════════════════════════════════════════════════════════════════════ */
#app .bp3{--fl1:#173d60;--fl2:#10294a;--fl3:#0a192d;--fp:#ebd08a;--fpl:rgba(235,208,138,.58);--fpd:rgba(235,208,138,.22);
  --rail:rgba(62,242,224,.34);--tileh:38px;padding:5px 2px 4px}

/* ── 绒布 ── */
#app .bp3 .felt{position:relative;border-radius:18px;padding:10px 10px 6px;
  background:
    radial-gradient(rgba(255,255,255,.03) .7px,transparent .9px) 0 0/3px 3px,
    radial-gradient(95% 90% at 27% 45%,var(--fl1) 0%,var(--fl2) 55%,var(--fl3) 100%);
  border:1px solid var(--rail);
  box-shadow:inset 0 0 0 4px rgba(5,12,24,.5),inset 0 0 0 5px var(--fpd),inset 0 12px 28px rgba(0,0,0,.32),0 6px 18px rgba(0,0,0,.45)}
#app .bp3 .fbody{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:10px;align-items:center}

/* ── 左:主注印章 ── */
#app .bp3 .fmain{display:flex;justify-content:center;align-items:center;margin:0;min-width:0;gap:0;grid-template-columns:none}
#app .bp3 .fcircle{position:relative;flex:0 0 auto;width:100%;max-width:186px;aspect-ratio:1/1;height:auto;min-height:0;margin:0;padding:0;
  border:0;border-radius:50%;background:none;box-shadow:none;display:grid;place-items:center;color:var(--fp);cursor:pointer;
  text-align:center;-webkit-tap-highlight-color:transparent;transition:transform .12s}
#app .bp3 .fcircle:active{transform:scale(.97);filter:none}
#app .bp3 .fcircle:focus-visible{outline:2px solid #3ef2e0;outline-offset:2px}
#app .bp3 .fprint{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
#app .bp3 .fdisc{fill:rgba(3,10,22,.28)}
#app .bp3 .fring1{fill:none;stroke:var(--fpl);stroke-width:2.2;transition:stroke .2s}
#app .bp3 .fring2{fill:none;stroke:var(--fpd);stroke-width:1}
#app .bp3 .farc{fill:var(--fp);font-family:"PingFang SC","Microsoft YaHei",var(--display);font-weight:700;letter-spacing:.08em}
#app .bp3 .farc.lat{font-family:"Cinzel",Georgia,serif;letter-spacing:.12em}
#app .bp3 .ftop{font-size:15px}
#app .bp3 .fbot{font-size:13px;fill:rgba(235,208,138,.82)}
#app .bp3 .fsuit{font-size:14px;fill:var(--fpl)}
#app .bp3 .fsuit.r{fill:rgba(240,112,122,.75)}
#app .bp3 .fcircle.has .fring1{stroke:#ffd166;stroke-width:2.6;filter:drop-shadow(0 0 4px rgba(255,209,102,.6))}
#app .bp3 .fcircle.has .fdisc{fill:rgba(255,209,102,.07)}
@media(hover:hover){#app .bp3 .fcircle:hover .fring1{stroke:var(--fp)}}

#app .bp3 .fcore{position:relative;z-index:1;width:57%;height:57%;border-radius:50%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:4px;pointer-events:none}
#app .bp3 .fcircle .bn2{display:block;margin:0;padding:0;border:0;background:none;font:700 11px/1 var(--display);
  letter-spacing:.14em;text-indent:.14em;color:var(--fp);opacity:1;text-transform:none;white-space:nowrap;overflow:visible}
#app .bp3 .ftap{font:600 10px/1.2 var(--display);color:#a6ece3;letter-spacing:.04em;white-space:nowrap}
#app .bp3 .ftap:empty{display:none}
/* 押了注:圈里只放筹码 + 限额(「主注」两个字让位 —— 圈外的印字已经说明这是 21 点主注) */
#app .bp3 .fcircle.has .bn2{display:none}
#app .bp3 .fcircle > .fcore > .bv{display:none}
#app .bp3 .fcircle > .fcore > .bv.mixed{display:block;font:700 20px/1 var(--num);color:var(--fp);margin:0}
#app .bp3 .flim{font:600 9px/1 var(--num);color:rgba(235,208,138,.72);letter-spacing:.03em;white-space:nowrap}

/* 筹码(跟筹码盘同一种画法:六道边纹 + 内环;颜色按金额) */
#app .bp3 .fchip{--cb:#b41f2f;--ce:#5c0c16;--ct:#fff;position:relative;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%,transparent 0 33%,rgba(0,0,0,.2) 33.5% 35.5%,transparent 36%),
    radial-gradient(circle at 50% 50%,var(--cb) 0 62%,transparent 62.5%),
    repeating-conic-gradient(from -18deg,#f4ecd8 0 36deg,var(--ce) 36deg 60deg),
    var(--ce);
  box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.35),inset 0 2px 3px rgba(255,255,255,.35),inset 0 -3px 5px rgba(0,0,0,.45),
    0 2px 0 var(--ce),0 3px 0 rgba(0,0,0,.55),0 9px 12px -4px rgba(0,0,0,.85)}
#app .bp3 .fchip::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:linear-gradient(155deg,rgba(255,255,255,.3) 0%,rgba(255,255,255,.06) 38%,transparent 52%,rgba(0,0,0,.18) 100%)}
/* 不止一颗:下面多露出一两颗的边 */
#app .bp3 .fchip.s2{box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.35),inset 0 2px 3px rgba(255,255,255,.35),inset 0 -3px 5px rgba(0,0,0,.45),
  0 2px 0 var(--ce),0 3px 0 rgba(0,0,0,.6),0 5px 0 #e9e0c8,0 6px 0 var(--ce),0 7px 0 rgba(0,0,0,.6),0 12px 12px -4px rgba(0,0,0,.85)}
#app .bp3 .fchip.s3{box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.35),inset 0 2px 3px rgba(255,255,255,.35),inset 0 -3px 5px rgba(0,0,0,.45),
  0 2px 0 var(--ce),0 3px 0 rgba(0,0,0,.6),0 5px 0 #e9e0c8,0 6px 0 var(--ce),0 7px 0 rgba(0,0,0,.6),
  0 9px 0 #d9cfb4,0 10px 0 var(--ce),0 11px 0 rgba(0,0,0,.6),0 16px 12px -4px rgba(0,0,0,.85)}
#app .bp3 .fchip .bv,#app .bp3 .fchip .rbv{position:relative;z-index:1;display:block;margin:0;color:var(--ct);font-family:var(--num);
  font-weight:700;line-height:1;letter-spacing:0;text-shadow:0 1px 1px rgba(0,0,0,.65);white-space:nowrap;font-variant-numeric:tabular-nums}
#app .bp3 .fchip.lg{width:56%;aspect-ratio:1/1;max-width:62px}
#app .bp3 .fchip.lg .bv{font-size:15px}
#app .bp3 .fchip.lg .bv.l4{font-size:12.5px}
#app .bp3 .fchip.lg .bv.l5{font-size:11px}
#app .bp3 .fchip.lg .bv.l6{font-size:9.5px}
#app .bp3 .fchip.sm{width:27px;height:27px}
#app .bp3 .fchip.sm .rbv{font-size:10.5px}
#app .bp3 .fchip.sm .rbv.l4{font-size:8.5px}
#app .bp3 .fchip.sm .rbv.l5{font-size:7.5px}
#app .bp3 .fchip.sm .rbv.l6{font-size:6.5px}
#app .bp3 .fchip[data-v="1"]{--cb:#e9e2cf;--ce:#a89f88;--ct:#2a1d05}
#app .bp3 .fchip[data-v="5"]{--cb:#b41f2f;--ce:#5c0c16}
#app .bp3 .fchip[data-v="10"]{--cb:#1f7a8c;--ce:#0c3d47}
#app .bp3 .fchip[data-v="25"]{--cb:#1f7a4d;--ce:#0d4429}
#app .bp3 .fchip[data-v="50"]{--cb:#1f4e8c;--ce:#0e2a52}
#app .bp3 .fchip[data-v="100"]{--cb:#232026;--ce:#000;--ct:#f3dd8e}
#app .bp3 .fchip[data-v="200"],#app .bp3 .fchip[data-v="500"]{--cb:#6b3fa0;--ce:#3b1f60}
#app .bp3 .fchip[data-v="1k"]{--cb:#c9a437;--ce:#7a5a17;--ct:#2a1d05}
#app .bp3 .fchip[data-v="2.5k"]{--cb:#b9612a;--ce:#6c3410}
#app .bp3 .fchip[data-v="5k"]{--cb:#5b5f6b;--ce:#2c2f37;--ct:#f3dd8e}
#app .bp3 .fchip[data-v="10k"]{--cb:#171417;--ce:#000;--ct:#f3dd8e}
/* 刚押上的筹码:等飞过来的那颗到了再「落」下来 */
#app .bp3 .fchip.drop{animation:fcdrop .34s cubic-bezier(.2,.9,.3,1.25) .15s both}
@keyframes fcdrop{0%{transform:translateY(-14px) scale(1.2);opacity:0}55%{opacity:1}100%{transform:none;opacity:1}}

/* ── 右:庄明牌三组六格 ── */
#app .bp3 .fside{display:flex;flex-direction:column;gap:6px;min-width:0}
/* 标题行:庄明牌 · 各 1 赔 1 ── 最近几局的明牌 */
#app .bp3 .fsh{display:flex;align-items:center;gap:6px;min-height:17px;color:var(--fp);white-space:nowrap;min-width:0}
#app .bp3 .fsh b{flex:0 0 auto;font:700 11px/1 var(--display);letter-spacing:.14em}
#app .bp3 .fsh em{flex:0 0 auto;font:600 9.5px/1 var(--num);font-style:normal;color:rgba(235,208,138,.75);letter-spacing:.03em}
#app .bp3 .fsh .fln{flex:1 1 8px;min-width:6px;height:1px;background:linear-gradient(90deg,var(--fpl),transparent)}
#app .bp3 .fhist{flex:0 1 auto;display:flex;align-items:center;justify-content:flex-end;gap:3px;min-width:0;overflow:hidden;padding:2px 2px 2px 0}
#app .bp3 .fhist i{flex:0 0 auto;font:700 9px/1 var(--num);font-style:normal;padding:2px 2.5px;border-radius:3px;background:#f4eddc;color:#1a1712;
  box-shadow:0 1px 2px rgba(0,0,0,.45)}
#app .bp3 .fhist i.r{color:#c41e32}
#app .bp3 .fhist i:last-child{outline:1px solid rgba(62,242,224,.75);outline-offset:1px}
#app .bp3 .fhist i:nth-last-child(n+5){display:none}

#app .bp3 .fgroups{display:flex;flex-direction:column;gap:6px;margin:0;width:100%}
#app .bp3 .fgrp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:none;gap:6px;
  min-height:0;height:auto;padding:0;margin:0;border:0;border-radius:0;background:none;box-shadow:none;aspect-ratio:auto}
#app .bp3 .rbar{--tg:linear-gradient(160deg,#2a2f3a,#12151c);--tb:rgba(235,208,138,.4);--tx:#fff;--ts:rgba(255,255,255,.72);
  position:relative;flex:none;height:var(--tileh);min-height:0;min-width:0;margin:0;padding:0 5px 0 9px;
  display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:4px;
  border-radius:9px;border:1px solid var(--tb);background:var(--tg);color:var(--tx);font:inherit;text-align:left;cursor:pointer;outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -2px 5px rgba(0,0,0,.32),0 2px 5px rgba(0,0,0,.35);
  transition:transform .1s,box-shadow .15s,border-color .15s;-webkit-tap-highlight-color:transparent}
#app .bp3 .rbar:active{transform:scale(.97)}
#app .bp3 .rbar:focus-visible{outline:2px solid #3ef2e0;outline-offset:1px}
@media(hover:hover){#app .bp3 .rbar:hover{filter:brightness(1.08)}}
#app .bp3 .rbl{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;min-width:0;overflow:hidden;padding:1px 0}
#app .bp3 .rbar .rbn{font:800 13px/1.05 var(--display);letter-spacing:.04em;color:var(--tx);white-space:nowrap}
/* 小字(哪些牌算单 / 双、大 / 小):用系统字体 —— 窄屏小字号下 Chakra Petch 的 Q 会糊成 C */
#app .bp3 .rbar .rbpay{font:600 8px/1.25 ui-sans-serif,-apple-system,"Segoe UI",Roboto,"PingFang SC",sans-serif;
  letter-spacing:.02em;color:var(--ts);white-space:nowrap}
#app .bp3 .rbar > .rbv{display:none}
#app .bp3 .rbar > .rbv.mixed{display:block;font:700 12px/1 var(--num);color:var(--tx)}
#app .bp3 .rbar.has{border-color:#ffd166;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 0 1px rgba(255,209,102,.6),0 0 12px rgba(255,209,102,.38)}
/* 押了注:格子里只留名字 + 筹码(小字让位,英文 BLACK / SMALL 这种长字也放得下) */
#app .bp3 .rbar.has .rbpay{display:none}
#app .bp3 .rbar.has.small .rbn::before,#app .bp3 .rbar.has.big .rbn::before{display:none}
#app .bp3 .rbar.red{--tg:linear-gradient(160deg,#d03246,#7f1424);--tb:rgba(255,165,175,.55)}
#app .bp3 .rbar.black{--tg:linear-gradient(160deg,#292d37,#0c0e13);--tb:rgba(235,208,138,.42);--tx:#f3e9cf}
#app .bp3 .rbar.odd{--tg:linear-gradient(160deg,#c99a37,#76521a);--tb:rgba(255,226,150,.62);--tx:#fff8e2;--ts:rgba(255,245,215,.85)}
#app .bp3 .rbar.even{--tg:linear-gradient(160deg,#f2eada,#cbbd9a);--tb:rgba(255,255,255,.65);--tx:#2b2113;--ts:rgba(43,33,19,.75)}
#app .bp3 .rbar.small{--tg:linear-gradient(160deg,#1f97a1,#0b4d56);--tb:rgba(150,235,240,.55)}
#app .bp3 .rbar.big{--tg:linear-gradient(160deg,#de7b32,#843a10);--tb:rgba(255,196,140,.6)}
#app .bp3 .rbar.red .rbpay{color:#ffe3e6}
#app .bp3 .rbar.small .rbn::before{content:'▼ ';font-size:.72em;vertical-align:.08em}
#app .bp3 .rbar.big .rbn::before{content:'▲ ';font-size:.72em;vertical-align:.08em}
#app .bp3 .rbar.even .fchip{box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.35),inset 0 2px 3px rgba(255,255,255,.35),inset 0 -3px 5px rgba(0,0,0,.45),
  0 2px 0 var(--ce),0 3px 0 rgba(0,0,0,.5),0 5px 8px -2px rgba(0,0,0,.55)}

/* 最底一行:庄家软 17 要牌 + 通杀规则 */
#app .bp3 .fnote{margin-top:6px;padding-top:4px;border-top:1px solid var(--fpd);text-align:center;
  font:600 9px/1.3 var(--display);color:rgba(235,208,138,.64);letter-spacing:.03em}
#app .bp3 .betfoot{margin-top:5px;justify-content:flex-end}
#app .bp3 .betfoot .outwarn{flex:1;min-width:0}

/* ── 尺寸:矮屏收紧 / 窄屏去小字 / 大屏放大 ── */
@media(max-height:700px){
  #app .bp3{--tileh:34px;padding-top:3px}
  #app .bp3 .felt{padding:8px 9px 5px}
  #app .bp3 .fgroups,#app .bp3 .fside{gap:5px}
  #app .bp3 .fgrp{gap:5px}
  #app .bp3 .fnote{margin-top:5px;padding-top:3px}
}
@media(max-height:620px){
  #app .bp3{--tileh:31px}
  #app .bp3 .rbar .rbn{font-size:12px}
  #app .bp3 .fchip.sm{width:24px;height:24px}
}
@media(max-width:360px){
  #app .bp3 .felt{padding:8px 7px 5px}
  #app .bp3 .fbody{gap:7px}
  #app .bp3 .rbar{padding:0 4px 0 7px}
  #app .bp3 .rbar .rbpay{display:none}
  #app .bp3 .rbar .rbn{font-size:12px}
  #app .bp3 .fchip.sm{width:24px;height:24px}
  #app .bp3 .fsh{gap:4px}
  #app .bp3 .fsh b{font-size:10px;letter-spacing:.08em}
  #app .bp3 .fsh em{font-size:8.5px}
  #app .bp3 .fhist i:nth-last-child(n+3){display:none}
  #app .bp3 .fcircle .bn2{font-size:9.5px;letter-spacing:.1em;text-indent:.1em}
  #app .bp3 .ftap{font-size:8.5px}
  #app .bp3 .flim{font-size:8px}
  #app .bp3 .fcircle.has .flim{display:none}
  #app .bp3 .fcore{gap:3px}
  #app .bp3 .fchip.lg{width:62%}
  #app .bp3 .fchip.lg .bv{font-size:13px}
}
@media(min-height:780px) and (min-width:400px){
  #app .bp3{--tileh:42px}
  #app .bp3 .rbar .rbn{font-size:14px}
  #app .bp3 .rbar .rbpay{font-size:8.5px}
  #app .bp3 .fchip.sm{width:30px;height:30px}
  #app .bp3 .fchip.sm .rbv{font-size:11px}
  #app .bp3 .fcircle .bn2{font-size:12px}
  #app .bp3 .fchip.lg .bv{font-size:17px}
  #app .bp3 .fhist i:nth-last-child(n+5){display:inline-block}
  #app .bp3 .fhist i:nth-last-child(n+7){display:none}
  #app .bp3 .fnote{font-size:9.5px}
}
/* 横屏手机:注区只占右边四成宽 —— 改成上下叠(印章在上、六格在下),不挤成一团 */
@media(orientation:landscape) and (max-height:520px){
  #app .bp3 .fbody{grid-template-columns:1fr;gap:8px}
  #app .bp3 .fcircle{max-width:150px}
  #app .bp3 .fhist{display:none}
}
@media(prefers-reduced-motion:reduce){
  #app .bp3 .fchip.drop{animation:none}
  #app .bp3 .fcircle,#app .bp3 .rbar{transition:none}
}

/* 座位牌上「明牌 155」这一行别折成两行(英文 / 越南文更长) */
#app .pod .bt.sub{white-space:nowrap}