/* ============ 公共组件（docs/design-system.md §3）============
   材质工具类、图标、按钮、面板、弹窗、toast、badge、输入、分段、筹码 / 方片 / 托盘 / 叠筹码、
   注区印线、木边台面、LCD 屏、结果条、HUD、纸牌。
   旧类名（.hbtn .q-btn .abtn .rail-btn .gold-btn .dim-btn .toast-btn .tt-watch .qbtn / .modal-box / .modal-actions）
   在这里做了别名，JS 选择器不用改；新代码请直接用新类名。 */

/* ---------- 材质 ---------- */
.wood{background:
  repeating-linear-gradient(94deg,rgba(0,0,0,.14) 0 2px,transparent 2px 7px,rgba(255,255,255,.03) 7px 9px,transparent 9px 23px),
  repeating-linear-gradient(88deg,rgba(0,0,0,.08) 0 1px,transparent 1px 13px),
  linear-gradient(180deg,var(--wood-300) 0%,var(--wood-500) 18%,var(--wood-700) 60%,var(--wood-900) 100%);}
.brass{background:linear-gradient(180deg,var(--brass-100) 0%,var(--brass-300) 22%,var(--brass-500) 50%,var(--brass-700) 82%,var(--brass-300) 100%);}
.carpet{background:
  radial-gradient(circle at 12px 12px,var(--carpet-gold) 0 1.5px,transparent 2px) 0 0/24px 24px,
  radial-gradient(circle at 0 0,var(--carpet-gold) 0 1.5px,transparent 2px) 12px 12px/24px 24px,
  repeating-linear-gradient(45deg,rgba(201,160,82,.05) 0 1px,transparent 1px 12px),
  repeating-linear-gradient(-45deg,rgba(201,160,82,.05) 0 1px,transparent 1px 12px),
  linear-gradient(180deg,var(--carpet-700),var(--carpet-900));}
.felt{background:
  radial-gradient(ellipse at 50% 0%,rgba(255,220,160,.10),transparent 55%),
  repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px),
  repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0 1px,transparent 1px 3px),
  radial-gradient(ellipse at 50% 80%,var(--f5) 0%,var(--f7) 55%,var(--f9) 100%);}
.felt-green{--f5:var(--felt-500);--f7:var(--felt-700);--f9:var(--felt-900);}
.felt-green-lt{--f5:var(--felt-300);--f7:var(--felt-500);--f9:var(--felt-700);}
.felt-wine{--f5:var(--wine-500);--f7:var(--wine-700);--f9:var(--wine-900);}
.felt-navy{--f5:var(--navy-500);--f7:var(--navy-700);--f9:var(--navy-900);}
.num{font-family:var(--serif);font-variant-numeric:tabular-nums lining-nums;}

/* ---------- 图标（内联 SVG symbol，js/core/icons.js 注入 sprite） ---------- */
.ic{width:16px;height:16px;fill:currentColor;flex:none;display:inline-block;vertical-align:-3px;}
.ic.md{width:18px;height:18px;vertical-align:-4px;}
.ic.lg{width:26px;height:26px;}
.ic.xl{width:30px;height:30px;}
.ic.brass{fill:var(--brass-500);}
.ic.warn{fill:var(--warn);}
.ic.good{fill:var(--good);}

/* ---------- 按钮 ---------- */
.btn,.hbtn,.q-btn,.rail-btn,.dim-btn,.tt-watch,.qbtn,.toast-btn,.gold-btn,.abtn,#btnRaiseOk,#buyTimeBtn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:36px;padding:0 18px;border-radius:var(--r-1);cursor:pointer;
  font-family:var(--sans);font-size:13px;letter-spacing:.06em;white-space:nowrap;line-height:1;
  border:1px solid var(--brass-700);color:var(--brass-100);font-weight:400;
  background:linear-gradient(180deg,#3a2a1c,#221812);
  box-shadow:var(--hi-brass),0 1px 2px rgba(0,0,0,.6);
  transition:border-color var(--t-fast),background var(--t-fast),color var(--t-fast);
  user-select:none;text-shadow:none;filter:none;transform:none;
}
.btn:hover,.hbtn:hover,.q-btn:hover,.rail-btn:hover,.dim-btn:hover,.tt-watch:hover,.qbtn:hover,.toast-btn:hover,.gold-btn:hover,.abtn:hover,#btnRaiseOk:hover,#buyTimeBtn:hover{
  border-color:var(--brass-500);background:linear-gradient(180deg,#46331f,#2a1d14);color:var(--brass-100);filter:none;transform:none;}
.btn:active,.hbtn:active,.q-btn:active,.rail-btn:active,.dim-btn:active,.gold-btn:active,.abtn:active,.toast-btn:active{transform:translateY(1px);box-shadow:none;}
/* 主按钮：黄铜渐变，一个画面只放一个 */
.btn.primary,.gold-btn,.q-btn.sit,.toast-btn:not(.dim),.abtn.primary{
  color:#1d1408;border-color:var(--brass-700);font-weight:600;
  background:linear-gradient(180deg,var(--brass-100) 0%,var(--brass-300) 30%,var(--brass-500) 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 -1px 0 rgba(0,0,0,.25) inset,0 2px 6px rgba(0,0,0,.6);
}
.btn.primary:hover,.gold-btn:hover,.q-btn.sit:hover,.toast-btn:not(.dim):hover,.abtn.primary:hover{
  color:#1d1408;background:linear-gradient(180deg,#fff2d0 0%,var(--brass-300) 35%,var(--brass-500) 100%);border-color:var(--brass-500);}
/* 幽灵按钮：清除、取消、观战、返回 */
.btn.ghost,.dim-btn,.hbtn,.tt-watch,.qbtn,#buyTimeBtn,.toast-btn.dim{
  background:transparent;border-color:var(--brass-900);color:var(--cream-300);box-shadow:none;}
.btn.ghost:hover,.dim-btn:hover,.hbtn:hover,.tt-watch:hover,.qbtn:hover,#buyTimeBtn:hover,.toast-btn.dim:hover{
  background:rgba(201,160,82,.06);border-color:var(--brass-700);color:var(--brass-300);}
/* 危险：离桌、弃牌、结算 */
.btn.danger,.abtn.danger{border-color:var(--wine-300);color:#ffd9dd;background:linear-gradient(180deg,#6d1a24,#3f0d13);}
.btn.danger:hover,.abtn.danger:hover{border-color:#a83a48;color:#fff;background:linear-gradient(180deg,#7d2230,#4a1018);}
.btn[disabled],.btn.disabled,.abtn[disabled],.gold-btn[disabled]{opacity:.45;cursor:not-allowed;filter:grayscale(.4);}
.btn.sm,.tt-watch,.qbtn,.toast-btn,#buyTimeBtn{height:28px;padding:0 12px;font-size:12px;}
.btn.lg{height:44px;padding:0 26px;font-size:15px;letter-spacing:.12em;}
.btn .ic,.abtn .ic{width:16px;height:16px;fill:currentColor;}
/* 选中态（老虎机注码、托盘外的注额按钮） */
.rail-btn.sel,.btn.sel{border-color:var(--brass-500);color:var(--brass-100);background:linear-gradient(180deg,rgba(201,160,82,.28),rgba(201,160,82,.1));box-shadow:0 0 0 1px rgba(201,160,82,.25) inset;}
.rail-btn.rebet-btn{color:var(--brass-300);}
.q-btn.waiting{border-color:#4f9a5e;color:var(--good);}
/* 牌桌操作键（弃 / 跟 / 加、要牌 / 停牌 …）：比普通按钮高一点 */
.abtn{min-width:96px;height:40px;font-size:14px;letter-spacing:.08em;}

/* ---------- 面板 ---------- */
.panel{background:linear-gradient(180deg,#1b1410,#120d0a);border:1px solid var(--brass-900);border-radius:var(--r-2);
  box-shadow:var(--hi-warm),var(--shadow-2);overflow:hidden;}
.panel.strong{border-color:var(--hairline-strong);}
.panel .ph{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--brass-900);
  font-family:var(--serif);font-size:14px;letter-spacing:.08em;color:var(--brass-300);
  background:linear-gradient(180deg,rgba(201,160,82,.08),transparent);}
.panel .ph .ic{width:16px;height:16px;fill:var(--brass-500);}
.panel .ph small{margin-left:auto;font-family:var(--sans);letter-spacing:0;font-size:11px;color:var(--cream-500);opacity:1;}
.panel .pb{padding:12px 14px;}
.panel .row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:6px 0;border-bottom:1px solid var(--hairline);}
.panel .row:last-child{border-bottom:0;}
.panel .row span{color:var(--cream-500);font-size:12px;}
.panel .row b{font-family:var(--serif);font-weight:400;font-size:16px;color:var(--brass-100);}
.panel .row b.pos,.g-good{color:var(--good);}
.panel .row b.neg,.g-bad{color:var(--bad);}
.g-ok{color:var(--brass-300);}
.hr{height:1px;background:var(--hairline);border:0;margin:8px 0;}

/* ---------- 弹窗 ----------
   .modal 是遮罩（JS 用 style.display="flex" 开关，别改），.modal-box 是弹窗本体：
   .mh 头（图标 + 标题 + 关闭）/ .mb 正文 / .mf 脚（右对齐 ghost + primary）。
   旧 <h3> 直接放在 .modal-box 里的写法、.modal-actions 都还能用。 */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(2px);z-index:60;display:none;align-items:center;justify-content:center;}
.modal-box{
  position:relative;width:380px;max-width:calc(calc(var(--vw) * 100) - 32px);max-height:calc(calc(var(--vh) * 100) - 32px);
  display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;
  background:linear-gradient(180deg,#221913,#120c09);border:1px solid var(--brass-700);border-radius:var(--r-2);
  box-shadow:0 0 0 1px #000,var(--hi-brass),var(--shadow-3);color:var(--cream-300);
}
.modal-box::before{content:"";position:absolute;left:8%;right:8%;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--brass-100),transparent);opacity:.6;pointer-events:none;}
.modal-box.w440{width:440px;} .modal-box.w520{width:520px;} .modal-box.w600{width:600px;} .modal-box.w760{width:760px;}
.modal-box>h3,.modal-box .mh{
  display:flex;align-items:center;gap:10px;padding:14px 18px 10px;margin:0;
  font-family:var(--serif);font-weight:400;letter-spacing:.14em;color:var(--brass-300);font-size:15px;
  border-bottom:1px solid var(--brass-900);text-align:left;}
.modal-box .mh .ic{width:18px;height:18px;fill:var(--brass-500);}
.modal-box .mh .x{margin-left:auto;width:14px;height:14px;fill:var(--cream-500);cursor:pointer;}
.modal-box .mh .x:hover{fill:var(--brass-300);}
.modal-box .mb{padding:16px 18px;font-size:13px;line-height:1.7;color:var(--cream-300);overflow:auto;min-height:0;}
.modal-box .mb.center{text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;}
.modal-box .mb b{color:var(--cream-100);}
.modal-box .mb .money{font-family:var(--serif);font-size:28px;color:var(--brass-100);font-variant-numeric:tabular-nums lining-nums;line-height:1.1;}
.modal-box .mrange{font-size:12px;color:var(--cream-500);}
.modal-box input[type=range]{width:300px;max-width:100%;accent-color:var(--brass-300);}
.modal-box .mf,.modal-box .modal-actions{padding:12px 18px 16px;display:flex;justify-content:flex-end;gap:8px;margin:0;}
.modal-box .mf.center,.modal-box .modal-actions.center{justify-content:center;}

/* ---------- Toast ---------- */
#toasts{position:fixed;right:22px;bottom:22px;z-index:80;display:flex;flex-direction:column;gap:10px;align-items:flex-end;}
.toast{
  display:flex;align-items:flex-start;gap:10px;padding:9px 14px;border-radius:3px;max-width:360px;
  background:linear-gradient(180deg,#221913,#120c09);border:1px solid var(--brass-700);box-shadow:var(--shadow-2);
  font-size:13px;line-height:1.6;color:var(--cream-100);
  transform:translateX(30px);opacity:0;transition:transform .35s,opacity .35s;
}
.toast.in{transform:none;opacity:1;}
.toast>.ic{width:16px;height:16px;fill:var(--brass-300);margin-top:3px;}
.toast .tmsg{min-width:0;}
.toast .tmsg small{color:var(--cream-500);opacity:1;}
.toast .tmsg b{color:var(--brass-100);}
.toast.win{border-color:#4f9a5e;} .toast.win>.ic{fill:var(--good);}
.toast.pa{border-color:var(--brass-500);}
.toast .toast-btn{margin-top:6px;margin-right:4px;}

/* ---------- Badge / 输入 / 分段 ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px;border-radius:2px;
  font-family:var(--serif);font-size:11px;letter-spacing:.1em;border:1px solid var(--brass-700);color:var(--brass-300);white-space:nowrap;line-height:1;}
.badge.red{border-color:var(--banker);color:#ffb3b3;}
.badge.blue{border-color:var(--player);color:#b9d0f5;}
.badge.green{border-color:#4f9a5e;color:var(--good);}
.badge.warn{border-color:var(--warn);color:#ffd6a0;}
.badge.dim{border-color:var(--brass-900);color:var(--cream-500);}
.badge.tier{background:linear-gradient(135deg,#b08d57,#6d4e2a);color:#2a1d07;border-color:#e2c58f;font-weight:600;}
.badge.tier[data-tier=Silver]{background:linear-gradient(135deg,#e6e6e6,#8f8f8f);color:#1e1e1e;border-color:#fff;}
.badge.tier[data-tier=Gold]{background:linear-gradient(135deg,#d9b25f,#8c661f);color:#2a1d07;border-color:#f7e9c4;}
.badge.tier[data-tier=Platinum]{background:linear-gradient(135deg,#e8eef5,#8fa3b8);color:#16202b;border-color:#fff;}
.badge.tier[data-tier=Diamond]{background:linear-gradient(135deg,#eef6ff,#8fb4d6);color:#1c3550;border-color:#fff;}
.field{display:flex;flex-direction:column;gap:5px;font-size:11px;color:var(--cream-500);letter-spacing:.08em;}
.field input,.field select,.input{
  height:36px;padding:0 12px;border-radius:var(--r-1);border:1px solid var(--brass-900);background:#0c0806;
  color:var(--brass-100);font-family:var(--serif);font-size:16px;outline:none;box-shadow:0 2px 6px rgba(0,0,0,.6) inset;}
.field input:focus,.input:focus{border-color:var(--brass-500);box-shadow:0 2px 6px rgba(0,0,0,.6) inset,0 0 0 2px rgba(201,160,82,.2);}
.field select,select.input{font-family:var(--sans);font-size:13px;color:var(--cream-100);}
.seg{display:inline-flex;border:1px solid var(--brass-900);border-radius:var(--r-1);overflow:hidden;}
.seg span,.seg button{padding:0 14px;height:30px;display:inline-flex;align-items:center;font-size:12px;color:var(--cream-500);cursor:pointer;letter-spacing:.06em;
  border:0;border-right:1px solid var(--brass-900);background:transparent;font-family:var(--sans);}
.seg span:last-child,.seg button:last-child{border-right:0;}
.seg span:hover,.seg button:hover{color:var(--cream-100);}
.seg span.on,.seg button.on{background:linear-gradient(180deg,rgba(201,160,82,.25),rgba(201,160,82,.1));color:var(--brass-100);}
input[type=range]{accent-color:var(--brass-300);}

/* ---------- 圆筹码 ----------
   面额由 .d1 .d2-5 .d5 .d10 .d25 .d100 .d1000 .d5000 决定，面额文字用 data-v。
   尺寸：默认 56 · 托盘 46（.tray 内） · 台面叠 34（.sm） · 轮盘格 24（.xs）。 */
.chip{
  --c:var(--chip-100);--ink:#fff;
  width:56px;height:56px;border-radius:50%;position:relative;flex:none;
  background:
    radial-gradient(circle at 50% 50%,var(--c) 0 58%,transparent 59%),
    repeating-conic-gradient(from 8deg,var(--chip-edge) 0 14deg,var(--c) 14deg 60deg);
  box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 -2px 3px rgba(0,0,0,.45) inset,
    0 2px 0 #000,0 3px 0 rgba(0,0,0,.6),0 5px 8px rgba(0,0,0,.7);
  display:flex;align-items:center;justify-content:center;transition:transform var(--t-norm);
}
.chip::before{content:"";position:absolute;inset:11px;border-radius:50%;border:1.5px solid rgba(255,255,255,.55);
  box-shadow:0 0 0 3px rgba(0,0,0,.18),0 0 0 4px rgba(255,255,255,.08);}
.chip::after{content:attr(data-v);position:relative;font-family:var(--serif);font-weight:700;font-size:13px;color:var(--ink);letter-spacing:-.02em;text-shadow:0 1px 1px rgba(0,0,0,.6);}
.chip.d1{--c:var(--chip-1);}
.chip.d2-5{--c:var(--chip-2-5);}
.chip.d5{--c:var(--chip-5);}
.chip.d10{--c:var(--chip-10);--ink:#062a26;}
.chip.d25{--c:var(--chip-25);}
.chip.d100{--c:var(--chip-100);}
.chip.d1000{--c:var(--chip-1000);}
.chip.d5000{--c:var(--chip-5000);--ink:#3d2e00;}
.chip.d10::after,.chip.d5000::after{text-shadow:0 1px 1px rgba(0,0,0,.25);}
.chip.sm{width:34px;height:34px;box-shadow:0 1px 0 rgba(255,255,255,.28) inset,0 -1px 2px rgba(0,0,0,.45) inset,0 1px 0 #000,0 2px 0 rgba(0,0,0,.6),0 3px 5px rgba(0,0,0,.7);}
.chip.sm::before{inset:7px;border-width:1px;box-shadow:0 0 0 2px rgba(0,0,0,.18);}
.chip.sm::after{font-size:8px;}
.chip.xs{width:24px;height:24px;box-shadow:0 1px 0 #000,0 2px 3px rgba(0,0,0,.7);}
.chip.xs::before{inset:5px;border-width:1px;box-shadow:none;}
.chip.xs::after{font-size:6px;}

/* ---------- 方片（plaque） ---------- */
.plq{
  --a:#eee;--b:#888;--ink:#222;
  width:88px;height:56px;border-radius:7px;position:relative;flex:none;
  background:
    linear-gradient(115deg,rgba(255,255,255,.35) 0%,transparent 30%,transparent 60%,rgba(255,255,255,.18) 100%),
    linear-gradient(180deg,var(--a),var(--b));
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 -1px 0 rgba(0,0,0,.4) inset,0 2px 0 rgba(0,0,0,.7),0 4px 10px rgba(0,0,0,.7);
  display:flex;align-items:center;justify-content:center;transition:transform var(--t-norm);
}
.plq::before{content:"";position:absolute;inset:5px;border-radius:4px;border:1px solid rgba(0,0,0,.35);box-shadow:0 0 0 1px rgba(255,255,255,.25) inset;}
.plq::after{content:attr(data-v);position:relative;font-family:var(--serif);font-weight:700;font-size:13px;color:var(--ink);letter-spacing:.02em;text-shadow:0 1px 0 rgba(255,255,255,.35);}
.plq i{position:absolute;left:10px;top:9px;width:14px;height:9px;border-radius:2px;background:linear-gradient(120deg,#b8f,#8ff,#ff8,#f8b);opacity:.7;}
.plq.p50k{--a:var(--plq-50k-a);--b:var(--plq-50k-b);}
.plq.p100k{--a:var(--plq-100k-a);--b:var(--plq-100k-b);--ink:#3d2a05;}
.plq.p1m{--a:var(--plq-1m-a);--b:var(--plq-1m-b);--ink:#e9c874;}
.plq.p1m::before{border-color:rgba(233,200,116,.6);}
.plq.p1m::after{text-shadow:0 1px 1px rgba(0,0,0,.7);}
.plq.p10m{--a:var(--plq-10m-a);--b:var(--plq-10m-b);--ink:#4a2018;}
.plq.p100m{--a:var(--plq-100m-a);--b:var(--plq-100m-b);--ink:#1c3550;}
.plq.p100m::before{border-color:rgba(255,255,255,.8);}
.plq.p100m::after{text-shadow:0 0 6px #fff;}
.plq.sm{width:52px;height:34px;border-radius:4px;}
.plq.sm::before{inset:3px;border-radius:2px;}
.plq.sm::after{font-size:9px;}
.plq.sm i{left:5px;top:4px;width:9px;height:5px;}
.plq.xs{width:36px;height:24px;border-radius:3px;}
.plq.xs::before{inset:2px;border-radius:2px;}
.plq.xs::after{font-size:7px;}
.plq.xs i{display:none;}

/* ---------- 托盘（rail 上，CHIPS / PLAQUES 两排） ---------- */
.tray{
  display:flex;flex-direction:column;gap:4px;padding:8px 12px;border-radius:10px;
  background:linear-gradient(180deg,#0e0906,#1b120c);
  box-shadow:0 2px 0 rgba(255,220,170,.06),0 10px 24px rgba(0,0,0,.7) inset,0 0 0 1px #000;
  min-width:0;max-width:100%;
}
.tray .trow{display:flex;align-items:flex-end;gap:10px;min-width:0;}
.tray .tlbl{font-family:var(--serif);font-size:10px;letter-spacing:.24em;color:var(--cream-700);width:58px;flex:none;padding-bottom:22px;}
.tray .grp{display:flex;align-items:flex-end;gap:8px;min-width:0;flex-wrap:wrap;}
.tray .chip{width:46px;height:46px;} .tray .chip::before{inset:9px;} .tray .chip::after{font-size:11px;}
.tray .plq{width:68px;height:46px;} .tray .plq::after{font-size:11px;} .tray .plq i{left:8px;top:7px;width:12px;height:8px;}
.tray.compact .tlbl{display:none;}
.chipslot{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;position:relative;flex:none;padding-top:8px;}
.chipslot small{font-size:10px;color:var(--cream-500);letter-spacing:.06em;font-family:var(--serif);white-space:nowrap;opacity:1;line-height:1;}
.chipslot:hover .chip,.chipslot:hover .plq{transform:translateY(-4px);}
.chipslot.sel small{color:var(--brass-300);}
.chipslot.sel .chip,.chipslot.sel .plq{transform:translateY(-8px);}
.chipslot.sel::after{content:"";position:absolute;left:50%;bottom:14px;width:64px;height:14px;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,200,120,.45),transparent 70%);pointer-events:none;}
.chipslot.off{opacity:.35;filter:grayscale(.6);}

/* ---------- 台面上叠起来的筹码 ---------- */
.chipstack{position:relative;width:34px;height:34px;display:inline-block;vertical-align:bottom;}
.chipstack .chip,.chipstack .plq{position:absolute;left:0;bottom:calc(var(--i,0) * 3px);}
.chipstack.xs{width:24px;height:24px;}
.chipstack.xs .chip,.chipstack.xs .plq{bottom:calc(var(--i,0) * 2px);}
.chipstack.haspl{width:52px;} .chipstack.xs.haspl{width:36px;}
.chipstack .cnt{position:absolute;left:100%;bottom:2px;margin-left:8px;white-space:nowrap;font-family:var(--serif);font-size:12px;color:var(--brass-100);text-shadow:0 1px 2px #000;}

/* ---------- 台布注区（印线：实线双框、无底色、不发光） ---------- */
.zone{
  position:relative;border:2px solid rgba(231,201,127,.75);border-radius:6px;min-height:110px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:var(--serif);letter-spacing:.25em;color:var(--brass-100);
  box-shadow:0 0 0 1px rgba(0,0,0,.35) inset,0 0 0 1px rgba(0,0,0,.35);cursor:pointer;
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.zone::after{content:"";position:absolute;inset:3px;border:1px solid rgba(231,201,127,.35);border-radius:4px;pointer-events:none;}
.zone:hover{border-color:rgba(231,201,127,1);}
.zone .cn{font-size:30px;line-height:1;}
.zone .en{font-size:10px;letter-spacing:.3em;margin-top:6px;color:rgba(231,201,127,.75);}
.zone .odds{font-size:10px;letter-spacing:.12em;color:rgba(244,234,211,.6);margin-top:3px;font-family:var(--sans);}
.zone.player{border-color:var(--player-ink);} .zone.player .cn{color:var(--player-text);}
.zone.banker{border-color:var(--banker-ink);} .zone.banker .cn{color:var(--banker-text);}
.zone.active,.zone.has{box-shadow:0 0 0 2px var(--brass-300) inset,0 0 22px rgba(231,201,127,.35);}
.zone.won{box-shadow:0 0 0 2px var(--brass-100) inset,0 0 26px rgba(247,233,196,.45);border-color:var(--brass-100);}
.zone.round{border-radius:50%;} .zone.round::after{border-radius:50%;}
.grid9{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:0;
  border:2px solid rgba(231,201,127,.75);border-radius:6px;overflow:hidden;background:rgba(0,0,0,.08);}
.grid9>div{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:1px solid rgba(231,201,127,.45);font-family:var(--serif);letter-spacing:.14em;color:var(--brass-100);font-size:12px;cursor:pointer;height:58px;
  transition:background var(--t-fast),box-shadow var(--t-fast);}
.grid9>div:hover{background:rgba(231,201,127,.05);}
.grid9>div small{font-family:var(--sans);letter-spacing:.02em;font-size:10px;white-space:nowrap;color:rgba(244,234,211,.6);margin-top:1px;opacity:1;}
.grid9>div.center,.grid9>div.tie{color:var(--tie-text);}
.grid9>div.active,.grid9>div.has{box-shadow:0 0 0 2px var(--brass-300) inset;background:rgba(231,201,127,.08);}
.grid9>div.won{box-shadow:0 0 0 2px var(--brass-100) inset,0 0 20px rgba(247,233,196,.35);background:rgba(247,233,196,.1);}

/* ---------- 木边台面 + 黄铜双圈 ---------- */
.table{position:relative;border-radius:46% 46% 0 0/58% 58% 0 0;padding:16px;
  background:linear-gradient(90deg,rgba(0,0,0,.35),transparent 12%,transparent 88%,rgba(0,0,0,.35)),
    repeating-linear-gradient(92deg,rgba(0,0,0,.14) 0 2px,transparent 2px 7px,rgba(255,255,255,.03) 7px 9px,transparent 9px 23px),
    linear-gradient(180deg,var(--wood-100),var(--wood-300) 10%,var(--wood-500) 40%,var(--wood-700));
  box-shadow:0 -6px 30px rgba(0,0,0,.6),0 2px 0 rgba(255,220,160,.18) inset;}
.table .inner{position:absolute;inset:16px 16px 0;border-radius:44% 44% 0 0/56% 56% 0 0;
  box-shadow:0 0 0 2px var(--brass-700) inset,0 0 0 3px rgba(0,0,0,.6) inset,0 12px 30px rgba(0,0,0,.45) inset;}
.table .inner::before{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 3px var(--brass-900) inset;opacity:.6;pointer-events:none;}
/* 通用木框（矩形台面 / rail），用 box-shadow 画黄铜双圈 */
.woodframe{position:relative;border-radius:var(--r-2);padding:14px;
  background:repeating-linear-gradient(92deg,rgba(0,0,0,.14) 0 2px,transparent 2px 7px,rgba(255,255,255,.03) 7px 9px,transparent 9px 23px),
    linear-gradient(180deg,var(--wood-100),var(--wood-300) 10%,var(--wood-500) 40%,var(--wood-700));
  box-shadow:0 -4px 24px rgba(0,0,0,.6),0 2px 0 rgba(255,220,160,.18) inset;}
.woodframe>.inner{position:relative;border-radius:4px;
  box-shadow:0 0 0 2px var(--brass-700) inset,0 0 0 3px rgba(0,0,0,.6) inset,0 0 0 5px rgba(77,56,18,.5) inset,0 12px 30px rgba(0,0,0,.45) inset;}
/* rail：你面前的木轨 */
.rail{position:relative;
  background:linear-gradient(180deg,rgba(255,220,170,.10),transparent 8%,transparent 92%,rgba(0,0,0,.5)),
    repeating-linear-gradient(90deg,rgba(0,0,0,.12) 0 2px,transparent 2px 6px,rgba(255,255,255,.03) 6px 8px,transparent 8px 22px),
    linear-gradient(180deg,var(--wood-300),var(--wood-500) 30%,var(--wood-700) 100%);
  border-top:2px solid var(--brass-700);box-shadow:0 -10px 30px rgba(0,0,0,.7);}

/* ---------- 电子屏（LCD） ---------- */
.lcdbox{border-radius:6px;background:linear-gradient(180deg,var(--lcd-bezel-a),var(--lcd-bezel-b));padding:6px;box-shadow:var(--shadow-2),0 0 0 1px #000;}
.lcd{background:var(--lcd-950);border:1px solid var(--lcd-line);border-radius:3px;position:relative;overflow:hidden;color:var(--lcd-text);
  box-shadow:0 0 0 1px #000,0 0 18px rgba(80,140,200,.05) inset;}
.lcd::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(180deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px);}
.lcd .lbl{font-size:10px;letter-spacing:.14em;color:var(--lcd-dim);font-family:var(--sans);}
.lcd .lbl.abs{position:absolute;left:6px;top:3px;z-index:2;}

/* ---------- 结果条 ---------- */
.result{padding:8px 22px;border-radius:3px;background:linear-gradient(180deg,rgba(20,12,8,.92),rgba(10,6,4,.92));
  border:1px solid var(--brass-500);box-shadow:var(--shadow-2),0 0 24px rgba(255,200,120,.15);
  font-family:var(--serif);letter-spacing:.2em;font-size:15px;color:var(--brass-100);white-space:nowrap;}
.result b{color:#ff6b6b;font-weight:400;} .result i{font-style:normal;color:var(--warn);} .result em{font-style:normal;color:#8ab4ff;}

/* ---------- HUD（游戏顶栏） ---------- */
.hud{display:flex;align-items:center;gap:16px;height:48px;padding:0 18px;
  background:linear-gradient(180deg,#221913,#150e0a);border-bottom:1px solid var(--brass-900);box-shadow:var(--hi-warm);
  font-size:13px;color:var(--cream-300);}
.hud .title{font-family:var(--serif);font-size:16px;color:var(--cream-100);letter-spacing:.04em;white-space:nowrap;}
.hud .title em{font-style:normal;color:var(--brass-300);}
.hud .sub{font-size:11px;color:var(--cream-500);letter-spacing:.04em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hud .sep{width:1px;height:22px;background:var(--brass-900);flex:none;}
.hud .grow{flex:1;min-width:0;}
.hud .kv{display:flex;flex-direction:column;line-height:1.15;white-space:nowrap;}
.hud .kv b{font-family:var(--serif);font-weight:400;font-size:16px;color:var(--brass-100);font-variant-numeric:tabular-nums lining-nums;}
.hud .kv small{font-size:11px;color:var(--cream-500);opacity:1;}
.hud>.ic{width:18px;height:18px;fill:var(--brass-500);}
.hud .btn,.hud .hbtn{height:30px;padding:0 12px;font-size:12px;}

/* ---------- 纸牌（SVG 花色，不用 ♠♥♦♣ 字符） ---------- */
.card{
  width:var(--card-w);height:var(--card-h);border-radius:6px;position:relative;flex:none;
  background:linear-gradient(160deg,#fffdf7,#efe9dc);color:#1a1a1a;font-family:var(--serif);
  box-shadow:0 1px 0 #fff inset,0 6px 14px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.35);
  display:flex;align-items:center;justify-content:center;
  animation:dealIn var(--t-deal);
}
@keyframes dealIn{from{transform:translateY(-24px) scale(.7);opacity:0;}}
.card.red{color:#c1121f;} .card.black{color:#1a1a1a;}
.card svg{fill:currentColor;display:block;}
.card .corner{position:absolute;top:4px;left:5px;line-height:1;text-align:center;font-weight:700;font-size:16px;}
.card .corner .s{display:block;font-size:14px;margin-top:2px;}
.card .corner .s svg,.card .big svg{width:1em;height:1em;margin:0 auto;}
.card .big{font-size:28px;margin-top:10px;}
.card.sm{width:34px;height:48px;border-radius:4px;box-shadow:0 1px 0 #fff inset,0 3px 8px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.35);}
.card.sm .corner{font-size:10.5px;top:2px;left:3px;}
.card.sm .corner .s{font-size:9.5px;margin-top:1px;}
.card.sm .big{font-size:15px;margin-top:6px;}
.card.hl{outline:3px solid var(--good);outline-offset:-1px;}
/* 真牌面：字号跟着牌的大小走（cqw/cqh）。cq 长度一律除以 --cqz（js/core/scale.js：WebKit 在 zoom 下多乘一次容器的有效 zoom，Chromium = 1） */
.card.face{container-type:size;}
/* 手机上 21 点 / 锦标赛的座位格自己再 zoom:var(--bz)：WebKit 里格里的牌再多乘 --bz，按 --cqbug 补回（Chromium 的 --cqbug = 0，不变） */
html.m :is(#bjRoot,#tnRoot) .bjx-box .card.face{--cqz:calc(1 + var(--cqbug,0) * (var(--bz,1) - 1));}
.card.face .idx{position:absolute;line-height:.92;text-align:center;font-weight:700;font-size:calc(19cqw / var(--cqz,1));letter-spacing:-1px;}
.card.face .idx i{display:block;font-style:normal;font-size:calc(15cqw / var(--cqz,1));margin-top:calc(1cqh / var(--cqz,1));}
.card.face .idx i svg{width:1em;height:1em;margin:0 auto;}
.card.face .idx.tl{top:calc(3cqh / var(--cqz,1));left:calc(5cqw / var(--cqz,1));}
.card.face .idx.br{bottom:calc(3cqh / var(--cqz,1));right:calc(5cqw / var(--cqz,1));transform:rotate(180deg);}
.card.face .pip{position:absolute;transform:translate(-50%,-50%);font-size:calc(21cqw / var(--cqz,1));line-height:1;width:1em;height:1em;}
.card.face .pip svg{width:100%;height:100%;}
.card.face .pip.dn{transform:translate(-50%,-50%) rotate(180deg);}
.card.face .pip.ace{font-size:calc(50cqw / var(--cqz,1));}
.card.face .court{position:absolute;inset:calc(15cqh / var(--cqz,1)) calc(17cqw / var(--cqz,1));border:1px solid currentColor;border-radius:3px;overflow:hidden;
  display:flex;flex-direction:column;
  background:repeating-linear-gradient(45deg,rgba(0,0,0,.035) 0 2px,transparent 2px 6px),linear-gradient(160deg,#fbf3dc,#efe3bf);}
.card.face .court .ch{flex:1;display:flex;align-items:center;justify-content:center;position:relative;line-height:1;}
.card.face .court .ch b{font-family:var(--serif);font-size:calc(30cqw / var(--cqz,1));font-weight:700;}
.card.face .court .ch i{font-style:normal;position:absolute;left:calc(4cqw / var(--cqz,1));top:calc(4cqh / var(--cqz,1));font-size:calc(13cqw / var(--cqz,1));width:1em;height:1em;}
.card.face .court .ch i svg{width:100%;height:100%;}
.card.face .court .ch.flip{transform:rotate(180deg);border-top:1px solid rgba(0,0,0,.25);}
.card.flip-in{animation:flipIn var(--t-flip) ease-out;}
@keyframes flipIn{from{transform:perspective(500px) rotateY(90deg);} to{transform:none;}}
/* 牌背：赌场定制牌（Leo 反馈 9-2）——细白边 + 红 / 蓝底 + 45° 菱格纹 + 双线内框 + 中间圆章里的赌场标志「海湾日出」（公开版，单色浅色）；内联 SVG（data URI，不引外部资源）。
   这里写死的是公开版：私人包（js/brand/private/art-private.js 的 card.back）在时，art-public.js 启动时把这两个变量换成私人版的图。
   默认红背；百家乐按牌靴轮换（这一靴红、下一靴蓝），蓝背加 .cb-blue。咪牌台 .sq-back 用同一套图（baccarat.css） */
:root{
  --card-back-red:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 280' preserveAspectRatio='none'%3E%3Cdefs%3E%3CradialGradient id='g' cx='50%25' cy='50%25' r='75%25'%3E%3Cstop offset='0' stop-color='%23b52330'/%3E%3Cstop offset='1' stop-color='%237c111b'/%3E%3C/radialGradient%3E%3Cpattern id='l' width='12' height='12' patternUnits='userSpaceOnUse' patternTransform='rotate(45 100 140)'%3E%3Cpath d='M0 0H12M0 0V12' fill='none' stroke='%23f7ddd6' stroke-opacity='.42' stroke-width='1.2'/%3E%3Cpath d='M6 3.4L8.6 6L6 8.6L3.4 6Z' fill='%23f7ddd6' fill-opacity='.22'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='200' height='280' fill='%23f4efe5'/%3E%3Crect x='5' y='5' width='190' height='270' rx='6' fill='url(%23g)'/%3E%3Crect x='5' y='5' width='190' height='270' rx='6' fill='url(%23l)'/%3E%3Crect x='11' y='11' width='178' height='258' rx='4' fill='none' stroke='%23f7ddd6' stroke-opacity='.85' stroke-width='1.8'/%3E%3Crect x='16' y='16' width='168' height='248' rx='2' fill='none' stroke='%23f7ddd6' stroke-opacity='.45' stroke-width='.9'/%3E%3Cpath d='M11 6.5L15.5 11L11 15.5L6.5 11ZM189 6.5L193.5 11L189 15.5L184.5 11ZM11 264.5L15.5 269L11 273.5L6.5 269ZM189 264.5L193.5 269L189 273.5L184.5 269Z' fill='%23f7ddd6' fill-opacity='.9'/%3E%3Ccircle cx='100' cy='140' r='35' fill='%237c111b' stroke='%23f7ddd6' stroke-opacity='.9' stroke-width='2'/%3E%3Ccircle cx='100' cy='140' r='30' fill='none' stroke='%23f7ddd6' stroke-opacity='.5' stroke-width='.9'/%3E%3Cg transform='translate(66.4 106.4) scale(2.8)'%3E%3Cpath d='M7 13.2a5 5 0 0 1 10 0z' fill='%23f7ddd6'/%3E%3Cpath d='M12 6.7V4.5M7.4 8.4L5.9 6.9M16.6 8.4L18.1 6.9' fill='none' stroke='%23f7ddd6' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M4.6 17c1.27-1 2.53-1 3.8 0s2.53 1 3.8 0 2.53-1 3.8 0 2.53 1 3.8 0' fill='none' stroke='%23f7ddd6' stroke-width='1.6' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
  --card-back-blue:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 280' preserveAspectRatio='none'%3E%3Cdefs%3E%3CradialGradient id='g' cx='50%25' cy='50%25' r='75%25'%3E%3Cstop offset='0' stop-color='%232656ab'/%3E%3Cstop offset='1' stop-color='%23132c63'/%3E%3C/radialGradient%3E%3Cpattern id='l' width='12' height='12' patternUnits='userSpaceOnUse' patternTransform='rotate(45 100 140)'%3E%3Cpath d='M0 0H12M0 0V12' fill='none' stroke='%23dbe6f8' stroke-opacity='.42' stroke-width='1.2'/%3E%3Cpath d='M6 3.4L8.6 6L6 8.6L3.4 6Z' fill='%23dbe6f8' fill-opacity='.22'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='200' height='280' fill='%23f4efe5'/%3E%3Crect x='5' y='5' width='190' height='270' rx='6' fill='url(%23g)'/%3E%3Crect x='5' y='5' width='190' height='270' rx='6' fill='url(%23l)'/%3E%3Crect x='11' y='11' width='178' height='258' rx='4' fill='none' stroke='%23dbe6f8' stroke-opacity='.85' stroke-width='1.8'/%3E%3Crect x='16' y='16' width='168' height='248' rx='2' fill='none' stroke='%23dbe6f8' stroke-opacity='.45' stroke-width='.9'/%3E%3Cpath d='M11 6.5L15.5 11L11 15.5L6.5 11ZM189 6.5L193.5 11L189 15.5L184.5 11ZM11 264.5L15.5 269L11 273.5L6.5 269ZM189 264.5L193.5 269L189 273.5L184.5 269Z' fill='%23dbe6f8' fill-opacity='.9'/%3E%3Ccircle cx='100' cy='140' r='35' fill='%23132c63' stroke='%23dbe6f8' stroke-opacity='.9' stroke-width='2'/%3E%3Ccircle cx='100' cy='140' r='30' fill='none' stroke='%23dbe6f8' stroke-opacity='.5' stroke-width='.9'/%3E%3Cg transform='translate(66.4 106.4) scale(2.8)'%3E%3Cpath d='M7 13.2a5 5 0 0 1 10 0z' fill='%23dbe6f8'/%3E%3Cpath d='M12 6.7V4.5M7.4 8.4L5.9 6.9M16.6 8.4L18.1 6.9' fill='none' stroke='%23dbe6f8' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M4.6 17c1.27-1 2.53-1 3.8 0s2.53 1 3.8 0 2.53-1 3.8 0 2.53 1 3.8 0' fill='none' stroke='%23dbe6f8' stroke-width='1.6' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
}
.card.back{background:var(--card-back-red) center/100% 100% no-repeat;border:0;}
.card.back.cb-blue{background-image:var(--card-back-blue);}
.card.back::before{content:none;}

/* ---------- 头像（首字 monogram，不用 emoji） ---------- */
.mono-av{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;
  background:linear-gradient(160deg,#3a2a1c,#1a120c);color:var(--brass-100);font-family:var(--serif);font-weight:400;
  box-shadow:0 0 0 1px var(--brass-900) inset,0 2px 6px rgba(0,0,0,.6);}

/* ---------- 座位圆点 ---------- */
.seatdots{display:inline-flex;gap:3px;vertical-align:middle;}
.seatdots i{width:9px;height:9px;border-radius:50%;border:1px solid var(--brass-500);background:transparent;display:block;}
.seatdots i.on{background:var(--brass-300);}

/* ---------- 进度条 ---------- */
.bar{height:5px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden;}
.bar>i,.bar>div{display:block;height:100%;background:linear-gradient(90deg,var(--brass-700),var(--brass-300));border-radius:2px;transition:width .5s;}

::-webkit-scrollbar{width:9px;height:9px;}
::-webkit-scrollbar-thumb{background:#3a2f22;border-radius:5px;}
::-webkit-scrollbar-track{background:transparent;}