/* 星汉百家乐(联网, 全服一桌)的界面; 舞台 / 全屏的公共样式在 _game/stage.css
 * 照设计稿 temp/bj-ui.jpg(1700 宽)做: 尺寸都用 --u(= 舞台宽 / 1700, 容器单位), 窗口多大比例都一样。
 * 布局: 顶栏(桌名 / 倒计时 / 按钮) · 左 上一局 · 右 路单 · 荷官两边 闲庄点数 · 底栏(余额 / 筹码 / 操作 / 确认下注 / 规则 历史)
 * 风格: 黑色烟熏半透明面板 + 香槟金细边, 闲 = 宝蓝、庄 = 绯红、和 = 翡翠; 标题和数字用衬线体。 */
.bc-stage{container-type:inline-size;
  --u:max(calc(100cqw / 1700),.5px);
  --bc-gold:#d9b36c;--bc-gold-hi:#f6dc9a;--bc-gold-lo:#8a6428;--bc-ink:#f3e6c8;--bc-mute:rgba(243,230,200,.62);
  --bc-glass:linear-gradient(180deg,rgba(22,16,15,.86),rgba(8,6,6,.9));
  --bc-line:rgba(217,179,108,.42);--bc-line-hi:rgba(246,220,154,.8);
  --bc-p:#2f6fe8;--bc-b:#d42c45;--bc-t:#18a878;
  --gem-p:radial-gradient(circle at 34% 28%,#b9d0ff 0,#4f86f0 22%,#2152c2 55%,#0f2a6e 100%);
  --gem-b:radial-gradient(circle at 34% 28%,#ffc2ca 0,#e5506a 22%,#b31c35 55%,#5e0a17 100%);
  --gem-t:radial-gradient(circle at 34% 28%,#bff3dc 0,#3fc293 22%,#11845d 55%,#06402b 100%);
  --bc-serif:"Noto Serif SC","Source Han Serif SC","Songti SC",STSong,Georgia,serif;
  --bc-shadow:0 calc(var(--u)*8) calc(var(--u)*26) rgba(0,0,0,.55),inset 0 1px 0 rgba(255,236,190,.08);
  --bc-goldline:linear-gradient(135deg,#f6dc9a,rgba(217,179,108,.3) 30%,rgba(217,179,108,.3) 70%,#f6dc9a);
  background:#0a0507;color:var(--bc-ink);font-variant-numeric:tabular-nums}
.bc-stage button{font:inherit}
.bc-stage .dice-overlay{z-index:6}            /* 登录 / 断线 / 弹窗要盖住顶栏和底栏 */
.bc-seats{z-index:1}
/* ---------- 材质 ----------
 * 金边: 竖向金属渐变(亮 → 暗 → 亮), 用 padding-box / border-box 两层背景画出来;
 * 面板: 顶上一层玻璃反光 + 深色烟熏底, 里面再描一圈细暗线和一圈很淡的金线(双线边); 四角是金色 L 角饰(.bc-mat::after) */
.bc-stage{--rim:linear-gradient(180deg,#fbe9b4 0%,#d9b36c 22%,#7a5622 52%,#c9a057 78%,#f6dc9a 100%);
  --fill:linear-gradient(180deg,rgba(255,240,210,.075) 0%,rgba(255,240,210,0) 42%),linear-gradient(180deg,rgba(30,23,19,.9) 0%,rgba(12,9,8,.93) 100%);
  --bevel:inset 0 0 0 1px rgba(0,0,0,.6),inset 0 0 0 2px rgba(246,220,154,.12),inset 0 1px 0 2px rgba(255,240,200,.08);
  --drop:0 calc(var(--u)*8) calc(var(--u)*24) rgba(0,0,0,.6)}
.bc-mat,.bc-act,.bc-seat{position:relative;border:1px solid transparent;background:var(--fill) padding-box,var(--rim) border-box;box-shadow:var(--bevel),var(--drop);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.bc-mat::after{content:"";position:absolute;inset:calc(var(--u)*-3);pointer-events:none;--c:calc(var(--u)*12);--w:calc(var(--u)*2);
  background:linear-gradient(#f6dc9a,#f6dc9a) left top/var(--c) var(--w),linear-gradient(#f6dc9a,#f6dc9a) left top/var(--w) var(--c),
    linear-gradient(#f6dc9a,#f6dc9a) right top/var(--c) var(--w),linear-gradient(#f6dc9a,#f6dc9a) right top/var(--w) var(--c),
    linear-gradient(#f6dc9a,#f6dc9a) left bottom/var(--c) var(--w),linear-gradient(#f6dc9a,#f6dc9a) left bottom/var(--w) var(--c),
    linear-gradient(#f6dc9a,#f6dc9a) right bottom/var(--c) var(--w),linear-gradient(#f6dc9a,#f6dc9a) right bottom/var(--w) var(--c);
  background-repeat:no-repeat;filter:drop-shadow(0 0 calc(var(--u)*3) rgba(246,220,154,.6))}
.bc-score__box{border:1px solid transparent}

/* ---------- 顶栏 ---------- */
.bc-topbar{position:absolute;left:0;right:0;top:0;z-index:3;height:calc(var(--u)*50);display:flex;align-items:center;justify-content:space-between;padding:0 calc(var(--u)*16);
  background:linear-gradient(180deg,rgba(6,4,4,.94),rgba(10,7,6,.82));border-bottom:1px solid rgba(217,179,108,.5);box-shadow:0 calc(var(--u)*4) calc(var(--u)*18) rgba(0,0,0,.5)}
.bc-topbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--bc-gold-hi) 30%,var(--bc-gold-hi) 70%,transparent);opacity:.6}
.bc-brand{display:flex;align-items:center;min-width:0}
.bc-brand__seal{flex:none;display:grid;place-items:center;width:calc(var(--u)*38);height:calc(var(--u)*38);border-radius:50%;font-style:normal;
  background:radial-gradient(circle at 50% 35%,#2a1d12,#0b0806 70%);box-shadow:inset 0 0 0 calc(var(--u)*2) var(--bc-gold),inset 0 0 0 calc(var(--u)*4) #0b0806,inset 0 0 0 calc(var(--u)*5) rgba(217,179,108,.6),0 0 calc(var(--u)*12) rgba(217,179,108,.25)}
.bc-brand__seal b{font:700 calc(var(--u)*18)/1 var(--bc-serif);background:linear-gradient(180deg,#fff1c4,#d9b36c 60%,#9a7130);-webkit-background-clip:text;background-clip:text;color:transparent}
.bc-brand__name{display:flex;flex-direction:column;margin-left:calc(var(--u)*12)}
.bc-brand__name b{font:700 calc(var(--u)*21)/1.05 var(--bc-serif);letter-spacing:.12em;background:linear-gradient(180deg,#fff3cf,#e2bf78 55%,#a87e35);-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap}
.bc-brand__name small{margin-top:calc(var(--u)*2);font-size:calc(var(--u)*8);letter-spacing:.42em;color:var(--bc-gold);white-space:nowrap}
.bc-brand__info{display:flex;margin:0 0 0 calc(var(--u)*22)}
.bc-brand__info>div{padding:0 calc(var(--u)*18);border-left:1px solid rgba(217,179,108,.35)}
.bc-brand__info dt{font-size:calc(var(--u)*11);color:var(--bc-mute);line-height:1.2}
.bc-brand__info dd{margin:calc(var(--u)*1) 0 0;font:600 calc(var(--u)*14)/1.1 Georgia,serif;color:#fff;white-space:nowrap}
/* 倒计时: 一圈能量环包着数字(--p = 剩余比例, JS 每帧写), 绿 → 琥珀(10 秒) → 红(5 秒); 旁边是阶段文字, 不要外框 */
.bc-timer{--p:0;--tc:#22d39a;position:absolute;left:50%;top:calc(var(--u)*4);transform:translateX(-50%);display:flex;align-items:center;gap:calc(var(--u)*10);height:calc(var(--u)*42);pointer-events:none}
.bc-timer.is-mid{--tc:#ffb020}
.bc-timer.is-warn{--tc:#ff3b55}
.bc-timer__time{position:relative;display:grid;place-items:center;width:calc(var(--u)*42);height:calc(var(--u)*42);border-radius:50%;font:800 calc(var(--u)*18)/1 Georgia,serif;color:#fff;
  background:conic-gradient(var(--tc) calc(var(--p) * 1turn),rgba(255,255,255,.1) 0);filter:drop-shadow(0 0 calc(var(--u)*6) var(--tc));text-shadow:0 0 calc(var(--u)*8) var(--tc);transition:filter .3s}
.bc-timer__time::before{content:"";position:absolute;inset:calc(var(--u)*4);z-index:-1;border-radius:50%;background:radial-gradient(circle at 50% 30%,#2a1f18,#0a0807);box-shadow:inset 0 0 0 1px rgba(246,220,154,.25)}
.bc-timer__time{isolation:isolate}
.bc-timer__time:empty{display:none}
.bc-timer.is-warn .bc-timer__time{animation:bc-beat .5s infinite alternate}
@keyframes bc-beat{to{transform:scale(1.1)}}
.bc-timer__label{font:700 calc(var(--u)*17)/1 var(--bc-serif);letter-spacing:.16em;color:#f3e2b8;white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.8)}
/* 右边: 圆形金边图标按钮 + 返回大厅 */
.bc-tools{display:flex;align-items:center;gap:calc(var(--u)*12)}
.bc-tools{gap:calc(var(--u)*9)}
.bc-ibtn,.bc-home{position:relative;display:inline-flex;align-items:center;justify-content:center;height:calc(var(--u)*30);border:calc(var(--u)*1.5) solid transparent;color:#f3d995;cursor:pointer;
  background:radial-gradient(ellipse 70% 45% at 50% 8%,rgba(255,240,205,.28),transparent 70%) padding-box,radial-gradient(circle at 50% 35%,#2c221a,#0d0a08 75%) padding-box,var(--rim) border-box;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.65),inset 0 calc(var(--u)*-3) calc(var(--u)*5) rgba(0,0,0,.5),0 calc(var(--u)*2) calc(var(--u)*6) rgba(0,0,0,.6);transition:box-shadow .15s,color .15s,filter .15s}
.bc-ibtn{width:calc(var(--u)*30);padding:0;border-radius:50%}
.bc-ibtn svg{width:calc(var(--u)*15);height:calc(var(--u)*15);filter:drop-shadow(0 1px 1px rgba(0,0,0,.8))}
.bc-home{gap:calc(var(--u)*4);padding:0 calc(var(--u)*13) 0 calc(var(--u)*9);border-radius:calc(var(--u)*15);font:700 calc(var(--u)*13)/1 var(--bc-serif);letter-spacing:.08em;text-decoration:none;white-space:nowrap;text-shadow:0 1px 1px rgba(0,0,0,.8)}
.bc-home svg{width:calc(var(--u)*13);height:calc(var(--u)*13)}
.bc-ibtn:hover,.bc-home:hover{color:#fff;filter:brightness(1.12);box-shadow:inset 0 0 0 1px rgba(0,0,0,.65),inset 0 calc(var(--u)*-3) calc(var(--u)*5) rgba(0,0,0,.5),0 0 calc(var(--u)*10) rgba(246,220,154,.5)}
.bc-ibtn:focus-visible,.bc-home:focus-visible,.bc-stage button:focus-visible{outline:2px solid var(--bc-gold-hi);outline-offset:2px}
.bc-ibtn.is-off{color:rgba(243,230,200,.4)}
.bc-ibtn.is-off::after{content:"";position:absolute;width:calc(var(--u)*17);height:calc(var(--u)*1.5);background:currentColor;transform:rotate(-40deg)}

/* ---------- 左右两块面板(金细边, 左上角一点金色角饰) ---------- */
.bc-panel{position:absolute;z-index:2;border-radius:calc(var(--u)*8);font-size:calc(var(--u)*13)}
.bc-panel__h{display:flex;align-items:center;justify-content:space-between;height:calc(var(--u)*40);padding:0 calc(var(--u)*14) 0 calc(var(--u)*16);border-bottom:1px solid rgba(217,179,108,.28)}
.bc-panel__h>b{font:700 calc(var(--u)*18)/1 var(--bc-serif);letter-spacing:.1em;color:#f6e7c4}
.bc-link{display:inline-flex;align-items:center;gap:calc(var(--u)*4);padding:0;border:0;background:none;color:var(--bc-ink);font-size:calc(var(--u)*13);cursor:pointer}
.bc-link svg{width:calc(var(--u)*12);height:calc(var(--u)*12)}
.bc-link:hover{color:var(--bc-gold-hi)}
/* 上一局 */
.bc-last{left:calc(var(--u)*16);top:calc(var(--u)*66);width:calc(var(--u)*300)}
.bc-last__sum{padding:calc(var(--u)*10) calc(var(--u)*16) calc(var(--u)*8);border-bottom:1px solid rgba(217,179,108,.2)}
.bc-last__sum p{display:flex;align-items:center;gap:calc(var(--u)*6);margin:0;font-size:calc(var(--u)*14);color:var(--bc-ink)}
.bc-last__sum p+p{margin-top:calc(var(--u)*10)}
.bc-last__sum i{font-style:normal;color:#e5506a}
.bc-last__sum b{font-family:var(--bc-serif);font-weight:700}
.bc-last__sum [data-last-win].is-P{color:#6f9dff}.bc-last__sum [data-last-win].is-B{color:#ff5d73}.bc-last__sum [data-last-win].is-T{color:#3fd29b}
.bc-last__pts{gap:calc(var(--u)*30)!important}
.bc-last__pts b{margin-left:calc(var(--u)*4);font:400 calc(var(--u)*14)/1 Georgia,serif}
.bc-last__hands{display:grid;grid-template-columns:1fr 1fr}
.bc-last__hand{min-width:0;padding:calc(var(--u)*10) calc(var(--u)*12) calc(var(--u)*12)}
.bc-last__hand+.bc-last__hand{border-left:1px solid rgba(217,179,108,.2)}
.bc-last__hand small{display:block;margin-bottom:calc(var(--u)*6);font:700 calc(var(--u)*15)/1 var(--bc-serif)}
.bc-last__hand--p small{color:#6f9dff}.bc-last__hand--b small{color:#ff5d73}
.bc-last__cards{display:flex;gap:calc(var(--u)*4);min-height:calc(var(--u)*47)}
/* 一栏宽 150 - 24 = 126, 三张牌 3 × 34 + 2 × 4 = 110, 放得下 */
.bc-last .bc-card{flex:none;width:calc(var(--u)*34);height:calc(var(--u)*47);border-radius:calc(var(--u)*3)}
.bc-last .bc-card b,.bc-last .bc-card i{left:calc(var(--u)*2);width:calc(var(--u)*14)}
.bc-last .bc-card b{top:calc(var(--u)*4);font-size:calc(var(--u)*13)}
.bc-last .bc-card i{top:calc(var(--u)*18);font-size:calc(var(--u)*9.5)}
.bc-last .bc-card em{right:calc(var(--u)*3);bottom:calc(var(--u)*3);font-size:calc(var(--u)*17)}
/* 路单 */
.bc-road{right:calc(var(--u)*16);top:calc(var(--u)*66);width:calc(var(--u)*272);padding-bottom:calc(var(--u)*10)}
.bc-road__fold{display:grid;place-items:center;width:calc(var(--u)*22);height:calc(var(--u)*22);padding:0;border:0;background:none;color:var(--bc-gold-hi);cursor:pointer}
.bc-road__fold svg{width:calc(var(--u)*16);height:calc(var(--u)*16)}
.bc-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--u)*4);margin:calc(var(--u)*8) calc(var(--u)*8) 0;padding-bottom:calc(var(--u)*6);border-bottom:1px solid rgba(217,179,108,.18)}
.bc-tabs button{height:calc(var(--u)*30);border:0;border-radius:calc(var(--u)*4);background:rgba(255,255,255,.04);color:var(--bc-ink);font-size:calc(var(--u)*15);cursor:pointer}
.bc-tabs button[aria-selected="true"]{background:linear-gradient(180deg,#1d3f86,#122a5e);color:#fff;box-shadow:inset 0 0 0 1px rgba(111,157,255,.5),inset 0 calc(var(--u)*-2) 0 #6f9dff}
.bc-road__body{display:flex;gap:calc(var(--u)*10);padding:calc(var(--u)*10) calc(var(--u)*10) 0 calc(var(--u)*14)}
.bc-road__main{flex:none}
.bc-road__main .bc-bead,.bc-road__main .bc-big{--cell:calc(var(--u)*16);--gap:calc(var(--u)*2.5);grid-template-columns:repeat(8,var(--cell));background-color:rgba(0,0,0,.35)}
.bc-road__main .bc-bead i{font-size:0}
.bc-road__main .bc-big i{border-width:calc(var(--u)*2.5)}
.bc-road__stats{flex:1;display:flex;flex-direction:column;justify-content:space-between;padding:calc(var(--u)*2) 0}
.bc-srow{display:flex;align-items:center;justify-content:space-between;font-size:calc(var(--u)*14);color:var(--bc-ink)}
.bc-srow span{display:flex;align-items:center;gap:calc(var(--u)*5)}
.bc-srow span i{display:inline-grid;place-items:center;width:calc(var(--u)*14);height:calc(var(--u)*14);border-radius:calc(var(--u)*2);font:700 calc(var(--u)*10)/1 var(--bc-serif);font-style:normal;color:#fff}
.bc-srow--p span i{background:#2a62d4}.bc-srow--b span i{background:#c0263d}.bc-srow--t span i{background:#14936a}
.bc-srow--p span{color:#8fb3ff}.bc-srow--b span{color:#ff8a9b}.bc-srow--t span{color:#6fe0b4}
.bc-srow b{font:400 calc(var(--u)*15)/1 Georgia,serif;color:#fff}
.bc-srow--s{margin-top:calc(var(--u)*4)}
.bc-road__strip{margin:calc(var(--u)*8) calc(var(--u)*14) 0}
.bc-road__strip .bc-big,.bc-road__strip .bc-bead{--cell:calc(var(--u)*7);--gap:calc(var(--u)*1);grid-template-columns:repeat(29,var(--cell));background-color:rgba(10,20,60,.55);border-color:rgba(111,157,255,.35)}
.bc-road__strip .bc-big i{border-width:1px;box-shadow:none}
.bc-road__strip .bc-bead i{font-size:0;box-shadow:none}
.bc-road__other{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*6);width:calc(var(--u)*150);font-size:calc(var(--u)*12)}
.bc-road__other div{padding:calc(var(--u)*6);border-radius:calc(var(--u)*4);background:rgba(255,255,255,.04)}
.bc-road__other small{display:block;color:var(--bc-mute)}
.bc-road__other b{font:700 calc(var(--u)*16)/1.2 Georgia,serif;color:#fff}
.bc-road__mini{display:none}
.bc-road.is-folded{width:auto;padding:0}
.bc-road.is-folded>:not(.bc-road__mini){display:none}
.bc-road.is-folded .bc-road__mini{display:flex;align-items:center;gap:calc(var(--u)*6);height:calc(var(--u)*40);padding:0 calc(var(--u)*14) 0 calc(var(--u)*10);border:0;background:none;color:var(--bc-gold-hi);
  font:700 calc(var(--u)*15)/1 var(--bc-serif);letter-spacing:.12em;cursor:pointer}

/* ---------- 荷官两边: 闲 / 庄 点数 + 局号 ---------- */
.bc-score{position:absolute;left:0;right:0;top:calc(var(--u)*160);height:0;pointer-events:none}
.bc-score>*{position:absolute;top:0}
.bc-score__box{display:flex;flex-direction:column;align-items:center;width:calc(var(--u)*170);height:calc(var(--u)*115);padding-top:calc(var(--u)*10);border-radius:calc(var(--u)*8)}
.bc-score__p{border-color:rgba(91,140,255,.75);box-shadow:var(--bc-shadow),0 0 calc(var(--u)*18) rgba(61,123,255,.45),inset 0 0 calc(var(--u)*20) rgba(42,98,212,.35);background:linear-gradient(180deg,rgba(10,22,58,.9),rgba(6,10,28,.92))}
.bc-score__b{border-color:rgba(255,92,112,.75);box-shadow:var(--bc-shadow),0 0 calc(var(--u)*18) rgba(216,52,74,.45),inset 0 0 calc(var(--u)*20) rgba(192,38,61,.35);background:linear-gradient(180deg,rgba(58,8,16,.9),rgba(26,4,8,.92))}
/* 点数框: 霓虹色边 + 里面一道同色细线(双线) + 顶上玻璃反光 */
.bc-score__box::before{content:"";position:absolute;inset:calc(var(--u)*3);border-radius:calc(var(--u)*5);pointer-events:none;border:1px solid currentColor;opacity:.35;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0) 40%)}
.bc-score__p{color:#6f9dff}.bc-score__b{color:#ff6f84}
.bc-score__box p{display:flex;align-items:baseline;gap:calc(var(--u)*8);margin:0}
.bc-score__box p b{font:700 calc(var(--u)*21)/1 var(--bc-serif)}
.bc-score__box p small{font-size:calc(var(--u)*12.5);letter-spacing:.18em}
.bc-score__p p{color:#8fb3ff}.bc-score__b p{color:#ff8a9b}
.bc-score__box strong{margin-top:calc(var(--u)*6);font:700 calc(var(--u)*44)/1 Georgia,serif;color:#fff}
.bc-score__p strong{text-shadow:0 0 calc(var(--u)*14) rgba(91,140,255,.8)}.bc-score__b strong{text-shadow:0 0 calc(var(--u)*14) rgba(255,92,112,.8)}
.bc-score__box span{margin-top:auto;margin-bottom:calc(var(--u)*12);font-size:calc(var(--u)*13);color:var(--bc-ink)}
.bc-score__box.is-win{animation:bc-glow 1.1s ease-in-out infinite alternate}
.bc-score__box.is-win span{color:var(--bc-gold-hi);font-weight:700}
@keyframes bc-glow{to{box-shadow:var(--bc-shadow),0 0 calc(var(--u)*40) rgba(246,220,154,.85)}}
/* 位置: 荷官站在中间, 闲框在左、庄框在右, 对称 */
.bc-score__p{left:calc(50% - var(--u)*365)}
.bc-score__b{left:calc(50% + var(--u)*195)}
.bc-banner{top:46%;padding:calc(var(--u)*12) calc(var(--u)*30);border-radius:calc(var(--u)*12);background:linear-gradient(180deg,rgba(26,18,16,.92),rgba(8,6,6,.94));border:1px solid var(--bc-line);font-family:var(--bc-serif);font-size:calc(var(--u)*22);letter-spacing:.06em;color:var(--bc-ink)}
.bc-banner{border:1px solid transparent;background:var(--fill) padding-box,var(--rim) border-box;box-shadow:var(--bevel),var(--drop)}
.bc-banner b{color:var(--bc-gold-hi)}
.bc-banner small{color:var(--bc-mute);font-size:.75em}

/* ---------- 底栏(最初的方案: 左 钱包 / 中 透视下注台 + 筹码 / 右 四个小操作 + 圆形确认), 材质换成金属金边 ----------
 * --v = 底栏的 1px(最初按 1280 宽舞台定的尺寸再整体缩小 15%), 跟着舞台宽度缩放 */
.bc-bar{--v:calc(var(--u)*1.13);position:absolute;left:0;right:0;bottom:0;z-index:2;display:grid;grid-template-columns:calc(var(--v)*200) 1fr calc(var(--v)*260);gap:calc(var(--v)*16);align-items:end;padding:calc(var(--v)*22) calc(var(--v)*18) calc(var(--v)*12);
  background:linear-gradient(0deg,rgba(6,3,4,.96),rgba(6,3,4,.82) 62%,rgba(6,3,4,0))}
.bc-bar::before{content:"";position:absolute;left:8%;right:8%;top:calc(var(--v)*14);height:1px;background:linear-gradient(90deg,transparent,var(--bc-gold-hi),transparent);opacity:.7}
.bc-bar.is-closed .bc-zones,.bc-bar.is-closed .bc-chips{opacity:.45;filter:saturate(.5);pointer-events:none}
/* 左: 钱包 */
.bc-wallet{display:flex;flex-direction:column;gap:calc(var(--v)*6);padding-bottom:calc(var(--v)*4)}
.bc-wallet__bal{display:flex;align-items:center;gap:calc(var(--v)*10);padding:calc(var(--v)*8) calc(var(--v)*10);border-radius:calc(var(--v)*12)}
.bc-wallet__bal small{display:block;font-size:calc(var(--v)*10);letter-spacing:.3em;color:var(--bc-mute)}
.bc-wallet__bal b{font:700 calc(var(--v)*20)/1.1 Georgia,serif;color:var(--bc-gold-hi)}
.bc-gem{flex:none;width:calc(var(--v)*18);height:calc(var(--v)*18);margin:0 calc(var(--v)*3);transform:rotate(45deg);border-radius:calc(var(--v)*3);background:linear-gradient(135deg,#e6f8ff,#5fc8f0 45%,#1d6fa8);box-shadow:0 0 calc(var(--v)*10) rgba(95,200,240,.7),inset 0 0 0 1px rgba(255,255,255,.5)}
.bc-wallet__row{display:flex;align-items:center;justify-content:space-between;padding:0 calc(var(--v)*6);font-size:calc(var(--v)*11);color:var(--bc-mute);letter-spacing:.08em}
.bc-wallet__row b{font:700 calc(var(--v)*15)/1 Georgia,serif;color:var(--bc-ink)}
.bc-mini{margin-left:auto;padding:calc(var(--v)*4) calc(var(--v)*10);border-radius:999px;border:1px solid transparent;color:#2a1a05;font-size:calc(var(--v)*11)!important;font-weight:700!important;cursor:pointer;
  background:linear-gradient(180deg,#fbe7ad,#c99a45) padding-box,linear-gradient(180deg,#fff3cf,#8a6428) border-box;box-shadow:0 calc(var(--v)*2) calc(var(--v)*8) rgba(0,0,0,.4)}
.bc-mini:hover{filter:brightness(1.1)}
/* 中: 下注台(透视, 像桌子的近边) + 筹码 */
.bc-deck{display:flex;flex-direction:column;align-items:center;gap:calc(var(--v)*10);min-width:0}
.bc-zones{display:grid;grid-template-columns:.78fr 1.35fr 1fr 1.35fr .78fr;gap:calc(var(--v)*6);width:min(100%,calc(var(--v)*620));transform:perspective(calc(var(--v)*800)) rotateX(22deg);transform-origin:50% 100%}
.bc-zone{--z:#888;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--v)*2);min-height:calc(var(--v)*52);padding:calc(var(--v)*4) calc(var(--v)*4);cursor:pointer;color:#fff;border:0;
  background:radial-gradient(ellipse 80% 50% at 50% 0%,rgba(255,255,255,.32),transparent 70%),linear-gradient(180deg,color-mix(in srgb,var(--z) 92%,#ffffff),color-mix(in srgb,var(--z) 62%,#0b0707));
  box-shadow:inset 0 0 0 calc(var(--v)*1.5) #e8c77e,inset 0 0 0 calc(var(--v)*3) rgba(0,0,0,.45),inset 0 0 0 calc(var(--v)*4) rgba(246,220,154,.35),inset 0 calc(var(--v)*-14) calc(var(--v)*26) rgba(0,0,0,.4),0 calc(var(--v)*4) calc(var(--v)*12) rgba(0,0,0,.5);
  transition:filter .15s,box-shadow .15s,transform .15s}
.bc-zone--p{border-radius:calc(var(--v)*6) calc(var(--v)*6) calc(var(--v)*6) calc(var(--v)*18)}.bc-zone--b{border-radius:calc(var(--v)*6) calc(var(--v)*6) calc(var(--v)*18) calc(var(--v)*6)}.bc-zone--t{border-radius:calc(var(--v)*6)}
.bc-zone--pp{clip-path:polygon(22% 0,100% 0,100% 100%,0 100%);border-radius:calc(var(--v)*6);padding-left:16%}
.bc-zone--bp{clip-path:polygon(0 0,78% 0,100% 100%,0 100%);border-radius:calc(var(--v)*6);padding-right:16%}
.bc-zone b{font-family:var(--bc-serif);font-size:calc(var(--v)*16);font-weight:700;letter-spacing:.14em;text-shadow:0 calc(var(--v)*2) calc(var(--v)*10) rgba(0,0,0,.7)}
.bc-zone--p b,.bc-zone--b b{font-size:calc(var(--v)*22)}
.bc-zone small{font-size:calc(var(--v)*9);letter-spacing:.14em;color:rgba(255,255,255,.75);white-space:nowrap}
.bc-zone i{position:absolute;top:calc(var(--v)*5);left:50%;transform:translateX(-50%);padding:1px calc(var(--v)*8);border-radius:999px;font:800 calc(var(--v)*11)/calc(var(--v)*16) Georgia,serif;font-style:normal;color:#2a1a05;background:linear-gradient(180deg,#f8e3a8,#c99a45);box-shadow:0 calc(var(--v)*2) calc(var(--v)*6) rgba(0,0,0,.6)}
.bc-zone i:empty{display:none}
.bc-zone:has(i:not(:empty)) b{margin-top:calc(var(--v)*12)}
.bc-zone--p,.bc-zone--pp{--z:var(--bc-p)}
.bc-zone--b,.bc-zone--bp{--z:var(--bc-b)}
.bc-zone--t{--z:var(--bc-t)}
.bc-zone:hover,.bc-zone:focus-visible{filter:brightness(1.22);outline:none}
.bc-zone:active{transform:translateY(calc(var(--v)*2))}
.bc-zone.is-win{animation:bc-win .8s ease-in-out infinite alternate}
@keyframes bc-win{from{filter:brightness(1.1)}to{filter:brightness(1.6) drop-shadow(0 0 calc(var(--v)*10) rgba(244,220,156,.9))}}
/* 筹码: 一道内凹的筹码槽, 筹码外圈条纹(--e) + 虚线内圈 + 中心高光 */
.bc-chips{display:flex;gap:calc(var(--v)*8);justify-content:center;padding:calc(var(--v)*5) calc(var(--v)*14);border-radius:999px;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.25));box-shadow:inset 0 calc(var(--v)*2) calc(var(--v)*6) rgba(0,0,0,.8),0 1px 0 rgba(246,220,154,.18)}
.bc-chip{--c:#888;--e:#fff;position:relative;flex:none;width:calc(var(--v)*38);height:calc(var(--v)*38);border-radius:50%;border:0;padding:0;cursor:pointer;color:#fff;font:700 calc(var(--v)*11)/1 Georgia,serif;text-shadow:0 1px 2px rgba(0,0,0,.85);
  background:radial-gradient(circle at 50% 38%,rgba(255,255,255,.28),transparent 46%),radial-gradient(circle,var(--c) 0 56%,transparent 57%),repeating-conic-gradient(var(--c) 0 22deg,var(--e) 22deg 38deg,var(--c) 38deg 45deg);
  box-shadow:inset 0 0 0 calc(var(--v)*1.5) rgba(0,0,0,.35),inset 0 calc(var(--v)*-3) calc(var(--v)*5) rgba(0,0,0,.4),0 calc(var(--v)*3) 0 rgba(0,0,0,.45),0 calc(var(--v)*5) calc(var(--v)*8) rgba(0,0,0,.6);transition:transform .15s,box-shadow .15s}
.bc-chip::before{content:"";position:absolute;inset:calc(var(--v)*7);border-radius:50%;border:calc(var(--v)*1.5) dashed rgba(255,255,255,.7)}
.bc-chip span{position:relative}
.bc-chip:hover{transform:translateY(calc(var(--v)*-3))}
.bc-chip[aria-checked="true"]{transform:translateY(calc(var(--v)*-6)) scale(1.1);box-shadow:inset 0 0 0 calc(var(--v)*1.5) rgba(0,0,0,.3),0 0 0 calc(var(--v)*2) #f6dc9a,0 calc(var(--v)*10) calc(var(--v)*18) rgba(0,0,0,.6),0 0 calc(var(--v)*22) rgba(246,220,154,.7)}
/* 右: 四个小操作(金属框) + 大的圆形确认(金色) */
.bc-actions{display:flex;align-items:center;justify-content:flex-end;gap:calc(var(--v)*12);padding-bottom:calc(var(--v)*4)}
.bc-btns{display:grid;grid-template-columns:repeat(2,calc(var(--v)*52));gap:calc(var(--v)*6)}
.bc-act{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--v)*2);height:calc(var(--v)*46);border-radius:calc(var(--v)*10);cursor:pointer;color:#f3e2b8;font-size:calc(var(--v)*10)!important;letter-spacing:.1em;
  background:radial-gradient(ellipse 80% 40% at 50% 0%,rgba(255,240,205,.16),transparent 70%) padding-box,linear-gradient(180deg,#2b2119,#0d0a08) padding-box,var(--rim) border-box;transition:filter .12s,transform .12s}
.bc-act svg{width:calc(var(--v)*18);height:calc(var(--v)*18);color:#f3d995}
.bc-act:hover:not(:disabled){filter:brightness(1.18);transform:translateY(-1px)}
.bc-act:disabled{opacity:.5;cursor:default}
.bc-confirm{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;width:calc(var(--v)*82);height:calc(var(--v)*82);border-radius:50%;border:0;cursor:pointer;overflow:hidden;
  font-family:var(--bc-serif)!important;font-size:calc(var(--v)*13)!important;font-weight:800!important;letter-spacing:.2em;color:#2a1a05;text-shadow:0 1px 0 rgba(255,246,214,.6);
  background:radial-gradient(circle at 50% 28%,#fff3cc,#ecca80 42%,#c99a45 72%,#946a28 100%);
  box-shadow:inset 0 0 0 calc(var(--v)*2) rgba(255,250,228,.55),inset 0 0 0 calc(var(--v)*4) rgba(120,84,30,.45),0 0 0 calc(var(--v)*3) #1a120a,0 0 0 calc(var(--v)*4) rgba(246,220,154,.7),0 calc(var(--v)*8) calc(var(--v)*22) rgba(0,0,0,.6),0 0 calc(var(--v)*20) rgba(246,220,154,.3);transition:transform .15s,filter .15s}
.bc-confirm::before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;transform:skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:bc-shine 3.2s ease-in-out infinite}
@keyframes bc-shine{0%,60%{left:-60%}100%{left:130%}}
.bc-confirm svg,.bc-confirm span{position:relative}
.bc-confirm svg{width:calc(var(--v)*26);height:calc(var(--v)*26)}
.bc-confirm:hover:not(:disabled){transform:scale(1.04);filter:brightness(1.06)}
.bc-confirm:disabled{filter:grayscale(.6) brightness(.62);cursor:default}
.bc-confirm:disabled::before{display:none}
.bc-rules ul{margin:0;padding-left:1.2em;line-height:1.8;font-size:14px}
.bc-rules a{color:var(--bc-gold-hi)}

/* ---------- 迷你扑克牌 / 珠子标签 ---------- */
.bc-tag{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;font:800 12px/1 var(--bc-serif);font-style:normal;color:#fff;box-shadow:inset 0 -2px 4px rgba(0,0,0,.3),0 0 0 1px rgba(255,255,255,.18)}
.bc-tag--p{background:var(--gem-p)}
.bc-tag--b{background:var(--gem-b)}
.bc-tag--t{background:var(--gem-t)}
.bc-card{position:relative;display:inline-block;width:36px;height:50px;border-radius:4px;background:linear-gradient(160deg,#ffffff,#ece6da);color:#14110f;box-shadow:0 0 0 1px rgba(0,0,0,.25),0 3px 6px rgba(0,0,0,.5);overflow:hidden}
/* 左上角一列(固定宽度、居中): 点数在上、小花色在下, 每张牌位置一样; 字体用 Times(数字和字母一样高, Georgia 的数字是小写体, 会显得比 J Q K 小) */
.bc-card b,.bc-card i{position:absolute;left:2px;width:15px;text-align:center;line-height:1;font-style:normal}
.bc-card b{top:4px;font:700 14px/1 "Times New Roman",Times,serif;font-variant-numeric:lining-nums;letter-spacing:-.08em}
.bc-card i{top:19px;font-size:10px}
.bc-card em{position:absolute;right:4px;bottom:4px;font-style:normal;font-size:18px;line-height:1} /* 大花色在右下, 和左上那一列错开 */
.bc-card.is-red{color:#c0182f}

/* ---------- 座位名牌 ---------- */
.bc-seats{position:absolute;inset:0;pointer-events:none}
.bc-seat{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;gap:1px;padding:4px 11px 5px;border-radius:10px;font-size:11px;white-space:nowrap;border-color:rgba(255,255,255,.1)}
.bc-seat b{font-family:var(--bc-serif);font-weight:700;font-size:12px;color:var(--bc-ink);letter-spacing:.06em}
.bc-seat span{color:var(--bc-gold);font-size:11px}
.bc-seat em{font-style:normal;font-weight:800;font-size:12px}
.bc-seat em.is-up{color:#7ef0bc}.bc-seat em.is-down{color:#ff8f9b}
.bc-seat.is-you{border-color:var(--bc-line-hi);box-shadow:var(--bc-shadow),0 0 16px rgba(216,181,106,.35)}
.bc-seat.is-win{box-shadow:var(--bc-shadow),0 0 18px rgba(86,229,169,.55)}

/* ---------- 路单(参考 bj03): 深色方格 + 宝石珠; 右上角的小路单珠子不写字(看颜色), 弹窗里的大珠子写 庄 / 闲 / 和 ---------- */
/* 格子 = 单元 + 间隙 */
.bc-bead,.bc-big{--cell:15px;--gap:2px;display:grid;grid-auto-flow:column;grid-template-rows:repeat(6,var(--cell));grid-auto-columns:var(--cell);gap:var(--gap);overflow:hidden;padding:calc(var(--gap) / 2);border-radius:6px;width:max-content;max-width:100%;box-sizing:content-box;
  background-color:#0c0a0b;background-image:radial-gradient(ellipse at 50% 0%,rgba(216,181,106,.08),transparent 70%),linear-gradient(rgba(255,255,255,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.075) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 50%,transparent 50%);
  background-size:100% 100%,calc(var(--cell) + var(--gap)) calc(var(--cell) + var(--gap)),calc(var(--cell) + var(--gap)) calc(var(--cell) + var(--gap)),calc((var(--cell) + var(--gap)) * 2) 100%;background-position:0 0;border:1px solid rgba(216,181,106,.3);box-shadow:inset 0 2px 8px rgba(0,0,0,.7)}
.bc-bead{margin-bottom:8px;grid-template-columns:repeat(12,var(--cell))}
/* 列数固定(和 renderRoad 里的一样), 宽度 = 列数 × (格 + 间隙), 内边距 = 半个间隙: 格线正好压在每条间隙的中线上, 四边不多出半格。
 * 珠盘路和大路一样宽: 右上角 12 × 17 = 17 × 12 = 204px, 弹窗 27 × 26 = 39 × 18 = 702px */
.bc-big{grid-template-columns:repeat(17,var(--cell))}
.bc-bead i{position:relative;display:grid;place-items:center;width:var(--cell);height:var(--cell);border-radius:50%;font:700 calc(var(--cell) * .58)/1 var(--bc-serif);font-style:normal;color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.45);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),inset 0 -2px 3px rgba(0,0,0,.3),0 1px 2px rgba(60,40,10,.45)}
.bc-bead i.P{background:var(--gem-p)}.bc-bead i.B{background:var(--gem-b)}.bc-bead i.T{background:var(--gem-t)}
.bc-bead i.pp::after,.bc-bead i.bp::before{content:"";position:absolute;width:5px;height:5px;border-radius:50%;border:1px solid #f4dc9c;box-shadow:0 0 2px rgba(0,0,0,.5)}
.bc-bead i.bp::before{left:-1px;top:-1px;background:var(--bc-b)}
.bc-bead i.pp::after{right:-1px;bottom:-1px;background:var(--bc-p)}
.bc-big{--cell:11px;--gap:1px}
.bc-big i{position:relative;width:var(--cell);height:var(--cell);border-radius:50%;box-sizing:border-box;border:2px solid transparent;font-style:normal}
.bc-big i.P{border-color:#4f86f0;box-shadow:0 0 4px rgba(79,134,240,.5)}
.bc-big i.B{border-color:#e5506a;box-shadow:0 0 4px rgba(229,80,106,.5)}
.bc-big i.t::after{content:"";position:absolute;left:-2px;right:-2px;top:calc(50% - 1px);height:2px;border-radius:1px;background:#3fc293;transform:rotate(-45deg)}
.bc-bead i.is-new,.bc-big i.is-new{animation:bc-new 1.4s ease-in-out infinite}
@keyframes bc-new{50%{outline:2px solid rgba(244,220,156,.9);outline-offset:1px}}
.bc-bead--big{--cell:24px}
.bc-big--big{--cell:18px}.bc-big--big i{border-width:3px}

/* ---------- 弹出窗口(路单 / 记录): 金边框 + 四角角饰, 标题栏右上一个小圆关闭钮 ---------- */
.bc-pop{background:radial-gradient(ellipse at center,rgba(10,6,6,.55),rgba(4,2,3,.85));-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.bc-modal{position:relative;width:min(760px,94%);max-height:88%;display:flex;flex-direction:column;border-radius:16px;border:1px solid transparent;text-align:left;
  background:linear-gradient(180deg,#1d1513,#0b0808) padding-box,var(--bc-goldline) border-box;box-shadow:0 30px 80px rgba(0,0,0,.75),0 0 0 1px rgba(0,0,0,.6);animation:bc-pop .22s ease-out}
@keyframes bc-pop{from{opacity:0;transform:translateY(10px) scale(.98)}}
.bc-modal::before,.bc-modal::after{content:"";position:absolute;width:14px;height:14px;border:2px solid var(--bc-gold-hi);pointer-events:none}
.bc-modal::before{left:-4px;top:-4px;border-right:0;border-bottom:0;border-top-left-radius:5px}
.bc-modal::after{right:-4px;bottom:-4px;border-left:0;border-top:0;border-bottom-right-radius:5px}
.bc-modal__h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 12px 9px 22px;border-radius:15px 15px 0 0;
  background:linear-gradient(90deg,rgba(216,181,106,.2),rgba(216,181,106,.03) 70%);border-bottom:1px solid var(--bc-line)}
.bc-modal__h>div{display:flex;align-items:baseline;gap:14px;min-width:0}
.bc-modal__h i{font-style:normal;font-size:10px;letter-spacing:.32em;color:var(--bc-gold);white-space:nowrap}
.bc-modal__h h2{margin:0;font-family:var(--bc-serif);font-size:18px;line-height:1.2;font-weight:700;letter-spacing:.2em;background:linear-gradient(180deg,#fff3cf,#d8b56a 70%,#a87e35);-webkit-background-clip:text;background-clip:text;color:transparent}
.bc-modal__x{flex:none;display:grid;place-items:center;width:26px;height:26px;padding:0;border-radius:50%;border:1px solid transparent;cursor:pointer;color:var(--bc-gold-hi);
  background:radial-gradient(circle at 50% 30%,rgba(60,44,34,.95),rgba(14,10,10,.95)) padding-box,var(--bc-goldline) border-box;transition:transform .15s,color .15s}
.bc-modal__x:hover{transform:rotate(90deg);color:#fff}
.bc-modal__x:focus-visible{outline:2px solid var(--bc-gold-hi);outline-offset:2px}
.bc-modal__body{padding:16px 22px 20px;overflow:auto}
.bc-modal__sec{display:flex;flex-direction:column;align-items:center;margin-top:16px}
.bc-modal__k{align-self:stretch;display:flex;align-items:center;gap:10px;margin:0 0 8px;font-family:var(--bc-serif);font-weight:700;font-size:13px;letter-spacing:.24em;color:var(--bc-gold-hi)}
.bc-modal__k small{font-family:inherit;font-size:9px;letter-spacing:.32em;color:var(--bc-mute)}
.bc-modal__k::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--bc-line),transparent)}
/* 路单格子: 整张方格纸固定列数(空着也是一张完整的纸), 居中 */
.bc-bead--big{--cell:24px;grid-template-columns:repeat(27,var(--cell));max-width:100%}
.bc-big--big{--cell:17px;grid-template-columns:repeat(39,var(--cell));max-width:100%}.bc-big--big i{border-width:3px}
/* 统计格 */
.bc-stats{display:grid;grid-template-columns:repeat(3,1fr) repeat(3,.6fr);gap:8px}
.bc-stat{position:relative;display:flex;align-items:center;gap:10px;padding:9px 12px 11px;border-radius:10px;overflow:hidden;background:rgba(255,255,255,.035);border:1px solid rgba(216,181,106,.18)}
.bc-stat .bc-tag{flex:none;width:28px;height:28px;font-size:14px}
.bc-stat small{display:block;font-size:9px;letter-spacing:.28em;color:var(--bc-mute)}
.bc-stat b{font:700 22px/1.1 Georgia,serif;color:var(--bc-ink)}
.bc-stat em{margin-left:6px;font-style:normal;font-size:12px;color:var(--bc-mute)}
.bc-stat>span{position:absolute;left:0;bottom:0;height:3px;border-radius:0 3px 3px 0}
.bc-stat--b>span{background:var(--bc-b)}.bc-stat--p>span{background:var(--bc-p)}.bc-stat--t>span{background:var(--bc-t)}
.bc-stat--s{flex-direction:column;align-items:flex-start;justify-content:center;gap:2px}
.bc-stat--s b{font-size:18px}
/* 下注记录表 */
.bc-records>p{margin:20px 0;text-align:center;color:var(--bc-mute)}
.bc-records table{width:100%;border-collapse:collapse;font-size:13px}
.bc-records th{padding:8px 6px;border-bottom:1px solid var(--bc-line);text-align:left;font-weight:600;font-size:10px;letter-spacing:.24em;color:var(--bc-gold)}
.bc-records td{padding:9px 6px;border-bottom:1px solid rgba(255,255,255,.06)}
.bc-records tr:hover td{background:rgba(216,181,106,.05)}
.bc-records td:last-child{font:700 14px/1 Georgia,serif;text-align:right}
.bc-records th:last-child{text-align:right}
@media (max-width:820px){.bc-stats{grid-template-columns:repeat(3,1fr)}.bc-bead--big{--cell:18px}.bc-big--big{--cell:12.846px}}

/* 小窗口(手机横屏): 等比缩下来字太小, 收掉次要的东西(底栏同原方案: 不显示钱包, 下注台不写赔率) */
@container (max-width:900px){
  .bc-brand__info,.bc-brand__name small,.bc-last__hands,.bc-road__strip{display:none}
  .bc-stage>*{--u:calc(100cqw / 1150)}
  .bc-bar{grid-template-columns:1fr auto;gap:calc(var(--v)*8);padding:calc(var(--v)*16) calc(var(--v)*10) calc(var(--v)*8)}.bc-wallet{display:none}
  .bc-zone small{display:none}
  .bc-score{top:calc(var(--u)*120)}
}