/* ============ 统一牌桌 HUD（design2/ui-system.md · 迁移说明 docs/hud.md） ============
   所有尺寸是 dp（1280×720 视口下的 CSS 像素），整页 zoom = k（js/core/scale.js）。
   骨架（16:9 基准 1280×720）：
     Z0 .th-strip   顶栏 40：左上一行英文限红 + (i) · 右边时钟 / 声音 / 其它桌 / 离桌
     Z1 .th-board   路单 / 走势屏（百家乐 188；其它游戏 .th.slim 56）
     Z2 .th-felt    台面（倒计时 .th-ring 固定在台布顶边正中，你的位置 .th-you 在台布底边正中）
     Z3 .th-rail    rail 96：余额左 · 筹码中 · 撤销 / 重复 / 确认右
     Z4 .th-drawer  其它桌抽屉 300（平时只露 28×128 的把手；布局宽 ≥ 1560 dp 时常驻 html.pin）
     Z5 .th-pop     (i) 弹层：规则 + 详细限红
   字号只用三级：--fs-l 24 · --fs-m 15 · --fs-s 12（tokens.css）。台布上只准用 tx-1 / tx-2 / --print，tx-3 只在深色面板 / LCD 上。 */

.th{position:absolute;inset:0;display:grid;min-width:0;min-height:0;overflow:hidden;
  grid-template-columns:16px minmax(0,1fr) 16px;
  grid-template-rows:40px var(--th-board,188px) 10px minmax(0,1fr) 96px;
  grid-template-areas:"strip strip strip" ". board ." ". . ." ". felt ." "rail rail rail";
  background:radial-gradient(ellipse at 50% 30%,rgba(255,200,130,.07),transparent 60%),
    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,
    linear-gradient(180deg,var(--carpet-700),var(--carpet-900));
  color:var(--tx-1);}
.th.slim{--th-board:56px;}
html.pin .th{padding-right:300px;}

/* ---------- Z0 顶栏 ---------- */
.th-strip{grid-area:strip;position:relative;z-index:8;display:flex;align-items:center;gap:12px;padding:0 16px;height:40px;
  background:linear-gradient(180deg,#1b140f,var(--strip-bg));border-bottom:1px solid var(--brass-900);box-shadow:var(--hi-warm);}
.th-lim{font-family:var(--serif);font-size:var(--fs-m);letter-spacing:.08em;color:var(--tx-2);white-space:nowrap;display:flex;align-items:center;gap:10px;min-width:0;
  font-variant-numeric:tabular-nums lining-nums;}
.th-strip,.th-pop,.th-drawer,.th-rail,.th-you{font-variant-numeric:lining-nums;}
/* 顶栏的 id 也是 #tblHead（手机框架认它），table-common.css 的 #tblHead{height:48px} 优先级更高，会把顶部屏压掉 8：这里用 id+类 盖回 40 */
#tblHead.th-strip{height:40px;min-height:40px;padding:0 16px;gap:12px;background:linear-gradient(180deg,#1b140f,var(--strip-bg));}
.th-lim b{font-weight:400;color:var(--brass-300);}
.th-lim .dot{color:var(--brass-700);}
.th-i{width:24px;height:24px;border-radius:50%;border:1px solid var(--brass-700);background:transparent;color:var(--brass-300);flex:none;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;}
.th-i:hover,.th-i.on{background:rgba(201,160,82,.14);border-color:var(--brass-500);}
.th-i .ic{width:16px;height:16px;}
.th-strip .sp{flex:1;min-width:0;}
.th-clock{font-family:var(--serif);font-size:var(--fs-s);color:var(--tx-3);letter-spacing:.06em;white-space:nowrap;font-variant-numeric:tabular-nums lining-nums;}
.th-sq{height:32px;min-width:32px;padding:0 8px;border-radius:var(--r-1);border:1px solid transparent;background:transparent;color:var(--tx-2);flex:none;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;font-size:var(--fs-s);font-family:var(--serif);letter-spacing:.06em;}
.th-sq:hover,.th-sq.on{border-color:var(--brass-900);color:var(--brass-300);}
.th-sq .ic{width:18px;height:18px;}
.th-sq b{font-weight:400;color:var(--brass-300);}
.th-leave{color:#f0c4c9;border-color:rgba(138,34,48,.7);font-family:var(--sans);letter-spacing:.1em;}
.th-leave:hover{background:rgba(107,24,35,.45);border-color:rgba(168,58,72,.9);color:#fff;}

/* ---------- Z5 (i) 弹层 ---------- */
.th-pop{position:absolute;left:16px;top:44px;width:380px;max-width:calc(100% - 32px);z-index:30;display:none;
  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);padding:12px 14px;}
.th-pop.on{display:block;}
.th-pop h4{font-family:var(--serif);font-weight:400;font-size:var(--fs-m);letter-spacing:.08em;color:var(--brass-300);padding-bottom:8px;border-bottom:1px solid var(--hairline);white-space:nowrap;}
.th-pop table{width:100%;border-collapse:collapse;margin:6px 0 4px;}
.th-pop td{font-size:var(--fs-s);color:var(--tx-2);padding:5px 0;border-bottom:1px solid rgba(201,160,82,.12);letter-spacing:.04em;vertical-align:baseline;}
.th-pop td:last-child{text-align:right;font-family:var(--serif);color:var(--tx-1);font-size:var(--fs-m);white-space:nowrap;padding-left:12px;}
.th-pop td small{color:var(--tx-3);font-size:var(--fs-s);margin-left:6px;opacity:1;white-space:nowrap;}
.th-pop .th-note{font-size:var(--fs-s);color:var(--tx-3);margin-top:6px;line-height:1.6;}

/* ---------- Z1 路单 / 走势屏 ---------- */
.th-board{grid-area:board;min-width:0;min-height:0;position:relative;z-index:2;}
.th-bezel{height:100%;background:linear-gradient(180deg,var(--lcd-bezel-a),var(--lcd-bezel-b));padding:4px;border-radius:6px;box-shadow:var(--shadow-2),0 0 0 1px #000;}

/* ---------- Z2 台面 ---------- */
.th-felt{grid-area:felt;position:relative;min-height:0;min-width:0;z-index:1;}
.th-tbl{position:absolute;inset:0;padding:14px 14px 0;border-radius:26px 26px 0 0;
  background:repeating-linear-gradient(92deg,rgba(0,0,0,.10) 0 2px,transparent 2px 9px,rgba(255,255,255,.02) 9px 11px,transparent 11px 26px),
    linear-gradient(180deg,var(--wood-300),var(--wood-500) 30%,var(--wood-700));
  box-shadow:0 -6px 26px rgba(0,0,0,.55),0 1px 0 rgba(255,220,160,.12) inset;}
.th-cloth{position:absolute;inset:14px 14px 0;overflow:hidden;border-radius:14px 14px 0 0;
  --f5:var(--felt-500);--f7:var(--felt-700);--f9:var(--felt-900);
  background:radial-gradient(ellipse at 50% 0%,rgba(255,220,160,.09),transparent 55%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.015) 0 1px,transparent 1px 3px),
    radial-gradient(ellipse at 50% 70%,var(--f5) 0%,var(--f7) 55%,var(--f9) 100%);
  box-shadow:0 0 0 2px rgba(0,0,0,.5) inset,0 12px 30px rgba(0,0,0,.4) inset;}
/* Z2a 倒计时：固定在台面正上方正中，只有数字（不写「请下注」）；≤ 5 秒变 --hot；发牌时隐藏，原位出结果条 */
.th-ring{position:absolute;left:50%;top:8px;width:64px;height:64px;margin-left:-32px;z-index:6;}
.th-ring .lt-ring{width:64px;height:64px;}
.th-ring .lt-ring .v b{font-size:var(--fs-l);}
.th-ring .lt-ring .v small{display:none;}
.th-ring .lt-ring.deal{visibility:hidden;}
/* 提示条：牌桌画面上浮到 rail（96）上面，不压右下的操作键（手机版在 mobile.css 另放顶上） */
html.th-on:not(.m) #toasts{bottom:108px;}
/* Z2d 你的位置：台布底边正中；点它切 坐下 / 站着下注 / 观战 */
.th-you{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);height:34px;padding:0 14px 0 6px;border-radius:17px;z-index:7;
  display:flex;align-items:center;gap:10px;background:linear-gradient(180deg,rgba(20,14,9,.88),rgba(10,7,5,.88));border:1px solid var(--brass-500);
  box-shadow:0 4px 12px rgba(0,0,0,.5),0 0 0 3px rgba(201,160,82,.12);cursor:pointer;color:var(--tx-1);font-family:var(--serif);white-space:nowrap;}
.th-you .n{width:24px;height:24px;border-radius:50%;background:linear-gradient(180deg,var(--brass-100),var(--brass-500));color:#241a08;flex:none;
  display:flex;align-items:center;justify-content:center;font:700 var(--fs-s)/1 var(--serif);}
.th-you .n .ic{width:14px;height:14px;fill:#241a08;}
.th-you b{font-weight:400;font-size:var(--fs-m);color:var(--brass-100);font-variant-numeric:tabular-nums lining-nums;}
.th-you.watch{border-color:var(--brass-900);}
.th-you.watch .n{background:transparent;box-shadow:0 0 0 1px var(--brass-700) inset;}
.th-you.watch .n .ic{fill:var(--brass-300);}
.th-menu{position:absolute;left:50%;bottom:52px;transform:translateX(-50%);z-index:12;display:none;padding:4px;border-radius:var(--r-2);
  background:linear-gradient(180deg,#221913,#120c09);border:1px solid var(--brass-700);box-shadow:var(--shadow-2);white-space:nowrap;}
.th-menu.on{display:flex;gap:4px;}
.th-menu button{height:32px;padding:0 12px;display:inline-flex;align-items:center;gap:6px;border:1px solid transparent;border-radius:var(--r-1);
  background:transparent;color:var(--tx-2);font-size:var(--fs-s);cursor:pointer;font-family:var(--sans);letter-spacing:.04em;}
.th-menu button:hover{border-color:var(--brass-900);color:var(--brass-100);}
.th-menu button.on{background:rgba(201,160,82,.16);color:var(--brass-100);}
.th-menu button .ic{width:15px;height:15px;}

/* ---------- Z3 rail ---------- */
.th-rail{grid-area:rail;position:relative;z-index:5;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px;padding:0 16px;
  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),
    linear-gradient(180deg,var(--wood-300) 0%,var(--wood-500) 14%,var(--wood-700) 60%,var(--wood-900) 100%);
  border-top:2px solid var(--brass-700);box-shadow:0 -8px 24px rgba(0,0,0,.55);}
/* Z3a 余额（左下）：余额 L 级 + 一行「本局 · 今日 ±」 */
.th-bal{justify-self:start;display:flex;flex-direction:column;gap:4px;padding:8px 14px;border-radius:var(--r-2);min-width:200px;
  background:linear-gradient(180deg,rgba(10,7,5,.75),rgba(20,14,10,.6));box-shadow:0 2px 8px rgba(0,0,0,.6) inset;}
.th-bal .v{font-family:var(--serif);font-size:var(--fs-l);color:var(--brass-100);line-height:1;font-variant-numeric:tabular-nums lining-nums;display:flex;align-items:center;gap:8px;}
.th-bal .v .ic{width:18px;height:18px;fill:var(--brass-500);}
.th-bal .s{font-size:var(--fs-s);color:var(--tx-3);letter-spacing:.04em;display:flex;gap:12px;font-family:var(--serif);white-space:nowrap;}
.th-bal .s b{font-weight:400;color:var(--tx-2);}
.th-bal .s .up{color:var(--good);} .th-bal .s .dn{color:var(--bad);}
/* Z3b 筹码托盘（底部正中）：一排，筹码 52，超出本桌限红的面额变暗但保留；选中抬起 8 + 暖光 */
.th-tray{justify-self:center;display:flex;gap:10px;align-items:center;padding:10px 16px;border-radius:12px;
  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;}
.th-tray .cs{position:relative;cursor:pointer;flex:none;}
.th-tray .cs .chip{width:52px;height:52px;transition:transform var(--t-norm);}
.th-tray .cs .chip::before{inset:10px;}
.th-tray .cs .chip::after{font-size:13px;}
.th-tray .cs .plq{width:72px;height:48px;transition:transform var(--t-norm);}
.th-tray .cs .plq::after{font-size:12px;}
.th-tray .cs:hover .chip,.th-tray .cs:hover .plq{transform:translateY(-4px);}
.th-tray .cs.sel .chip,.th-tray .cs.sel .plq{transform:translateY(-8px);}
.th-tray .cs.sel::after{content:"";position:absolute;left:-6px;right:-6px;bottom:-9px;height:12px;background:radial-gradient(ellipse,rgba(255,200,120,.5),transparent 70%);pointer-events:none;}
.th-tray .cs.off{opacity:.35;filter:grayscale(.6);}
/* Z3c 操作（右下）：撤销 ghost · 重复 · 确认 primary（一个画面只有一个 primary） */
.th-acts{justify-self:end;display:flex;gap:8px;}
.th-acts .btn{height:44px;min-width:88px;padding:0 16px;font-size:var(--fs-m);letter-spacing:.1em;}
.th-acts .btn .ic{width:18px;height:18px;}

/* ---------- Z4 其它桌抽屉 ---------- */
.th-drawer{position:absolute;right:0;top:40px;bottom:96px;width:300px;z-index:20;transform:translateX(100%);transition:transform .25s ease;
  background:linear-gradient(180deg,#150f0b,#0c0806);border-left:1px solid var(--brass-900);box-shadow:-12px 0 30px rgba(0,0,0,.6);}
.th.drawer-on .th-drawer,html.pin .th-drawer{transform:none;}
html.pin .th-drawer{top:0;bottom:0;box-shadow:none;}
.th-tab{position:absolute;right:100%;top:50%;margin-top:-64px;width:28px;height:128px;border-radius:6px 0 0 6px;cursor:pointer;
  background:linear-gradient(90deg,#241a13,#150f0b);border:1px solid var(--brass-900);border-right:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  color:var(--brass-300);box-shadow:-4px 0 10px rgba(0,0,0,.45);padding:0;}
.th-tab .ic{width:16px;height:16px;}
.th-tab i{width:6px;height:6px;border-radius:50%;background:var(--brass-500);display:block;}
.th-tab i.w{background:var(--warn);}
html.pin .th-tab{display:none;}
/* 抽屉里放 LiveTable 的面板（game.panel(el, {hud:true})）：只留桌号 + 桌型 + 最低注 · 秒数 · 缩略 */
.th-drawer .lt-side{position:absolute;inset:0;background:transparent;border-left:0;}
.th-drawer .lt-side .sh{height:44px;padding:0 14px;font-size:var(--fs-m);letter-spacing:.12em;}
.th-drawer .lt-side .sh small{font-size:var(--fs-s);}
.th-drawer .tcard{grid-template-columns:minmax(0,1fr) 48px;grid-template-rows:auto auto;gap:4px 8px;padding:10px 14px;}
.th-drawer .tcard .n{font-size:var(--fs-m);color:var(--tx-1);}
.th-drawer .tcard .n small{font-family:var(--serif);font-size:var(--fs-s);color:var(--tx-3);letter-spacing:.08em;opacity:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.th-drawer .tcard .t{grid-row:1/3;font-size:var(--fs-l);text-align:right;}
.th-drawer .tcard .t.deal,.th-drawer .tcard .t.dim{font-size:var(--fs-s);}
.th-drawer .tcard .thumb{grid-column:1;grid-row:2;margin-top:0;}
.th-drawer .tcard .l,.th-drawer .tcard .l2,.th-drawer .tcard .bar{display:none;}

/* ---------- 夜间：台布、牌面再暗一档（token 在 tokens.css） ---------- */
html[data-night] .th-cloth{--f5:var(--felt-500);}

/* ---------- toast 避开 rail（右下角的 撤销 / 重复 / 确认）；抽屉常驻时也避开抽屉。手机另有位置（mobile.css html.m #toasts） ---------- */
html.th-on:not(.m) #toasts{bottom:118px;}
html.th-on.pin:not(.m) #toasts{right:322px;}