/* 轮盘多桌 · 统一牌桌 HUD（design2/ui-system.md · docs/hud.md，照百家乐）：竖走势列 · 统计条 · 酒红台布（转盘在左端，注区在右）
   骨架（Z0–Z5）在 css/table-hud.css；token 在 css/tokens.css；筹码 / LCD / 按钮在 css/components.css。尺寸都是 dp（1280×720 设计稿，整页 zoom = k）。 */

/* ============ 骨架：HUD 自己有顶栏，不留全站顶栏的 48；轮盘多一条左侧竖走势列（Z1'，顶到 rail） ============ */
#ruScreen > .content.ru-root{margin-top:0;padding:0;position:relative;overflow:hidden;flex:1;min-height:0;}
.th.ru-th{grid-template-columns:16px 96px 8px minmax(0,1fr) 16px;
  grid-template-areas:"strip strip strip strip strip" ". trend . board ." ". trend . . ." ". trend . felt ." "rail rail rail rail rail";}

/* (i) 弹层最后一行的「规则全文」链接（轮盘 / 骰宝 / Craps / 牌九共用） */
.th-pop .th-more{color:var(--brass-300);cursor:pointer;text-decoration:underline;text-underline-offset:3px;white-space:nowrap;}
.th-pop .th-more:hover{color:var(--brass-100);}

/* ============ Z1' 竖走势列：最近 18 期，每格等高（第一格不加高），最新在上（白色内描边）；左黑 · 中 0 / 00 · 右红 ============ */
.ru-trendcol{grid-area:trend;min-height:0;position:relative;z-index:2;border-radius:6px 6px 0 0;}
.ru-tr{height:100%;display:grid;grid-template-rows:repeat(18,minmax(0,1fr));gap:2px;padding:3px;}
.ru-tr .tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;min-height:0;}
.ru-tr .tr i{grid-row:1;display:flex;align-items:center;justify-content:center;min-height:0;border-radius:2px;font:var(--fs-m)/1 var(--serif);font-style:normal;color:#fff;
  font-variant-numeric:tabular-nums lining-nums;}
.ru-tr .tr i.left{grid-column:1;} .ru-tr .tr i.mid{grid-column:2;} .ru-tr .tr i.right{grid-column:3;}
.ru-tr .tr i.r{background:var(--banker);} .ru-tr .tr i.b{background:#26211f;box-shadow:0 0 0 1px #4a4444 inset;} .ru-tr .tr i.g{background:var(--tie);}
.ru-tr .tr.new i{box-shadow:0 0 0 2px #fff inset;}

/* ============ Z1 统计条（最近 300 局）：三段条的中间绿段 = 0；百分比按最大余数法取整，几段加起来正好 100 ============ */
.ru-stats{height:100%;display:flex;align-items:center;gap:18px;padding:0 14px;}
.rs-b{flex:1 1 120px;min-width:0;max-width:190px;display:flex;flex-direction:column;gap:5px;}
.rs-b .lb{display:flex;justify-content:space-between;gap:6px;font-family:var(--serif);font-size:var(--fs-s);color:var(--lcd-2);letter-spacing:.08em;white-space:nowrap;
  font-variant-numeric:tabular-nums lining-nums;}
.rs-b .lb b{font-weight:400;color:var(--lcd-1);}
.rs-b .bb{display:flex;gap:1px;height:8px;border-radius:2px;overflow:hidden;background:#000;}
.rs-b .bb i{display:block;height:100%;min-width:0;}
.rs-b .bb i.k{background:#5a5352;} .rs-b .bb i.r{background:var(--banker);} .rs-b .bb i.g{background:var(--tie);}
.rs-b .bb i.e{background:#6d6a60;} .rs-b .bb i.o{background:#9f8f6a;}
.rs-b .bb i.lo{background:#4c6b8a;} .rs-b .bb i.hi{background:#8a6b4c;}
.rs-b .bb i.d1{background:#5d7f6a;} .rs-b .bb i.d2{background:#7f7a5d;} .rs-b .bb i.d3{background:#7f5d6a;}
.rs-sp{flex:1 1 0;min-width:0;}
.rs-hc{flex:none;display:flex;align-items:center;gap:4px;font-family:var(--serif);font-size:var(--fs-s);color:var(--lcd-2);letter-spacing:.1em;}
.rs-hc span{margin-right:4px;}
.rs-hc i{width:24px;height:24px;border-radius:2px;display:flex;align-items:center;justify-content:center;font:var(--fs-s)/1 var(--serif);font-style:normal;color:#fff;
  font-variant-numeric:tabular-nums lining-nums;}
.rs-hc i.r{background:var(--banker);} .rs-hc i.b{background:#26211f;box-shadow:0 0 0 1px #4a4444 inset;} .rs-hc i.g{background:var(--tie);}

/* ============ Z2 台面：酒红台布；转盘在左端（直径由 JS 按台布大小算，写进 --wd），注区在右 ============ */
.ru-cloth{--f5:var(--wine-500);--f7:var(--wine-700);--f9:var(--wine-900);--wd:420px;}
.ru-wheelwell{position:absolute;left:22px;top:50%;width:var(--wd);height:var(--wd);margin-top:calc(var(--wd) / -2);z-index:2;}
.ru-wheelwell .rw-wrap{position:absolute;left:0;top:0;}
.ru-play{position:absolute;left:calc(var(--wd) + 52px);right:20px;top:0;bottom:0;display:flex;flex-direction:column;align-items:center;padding-bottom:58px;}
.ru-sp{flex:1 1 0;min-height:0;}
/* 倒计时在注区正上方；开奖后原位出号码（倒计时藏起来） */
.ru-ringbox{position:relative;flex:none;width:64px;height:64px;margin-bottom:10px;}
.ru-play .th-ring{left:0;top:0;margin-left:0;}
.ru-res{position:absolute;left:0;top:0;width:64px;height:64px;display:none;z-index:7;}
.ru-res.on{display:block;}
.ru-res .ru-wn{width:64px;height:64px;border-radius:4px;display:flex;align-items:center;justify-content:center;font:34px/1 var(--serif);color:#fff;
  box-shadow:0 0 0 2px rgba(255,255,255,.8) inset,var(--shadow-2);font-variant-numeric:tabular-nums lining-nums;}
.ru-res .ru-wn.r{background:var(--banker);} .ru-res .ru-wn.b{background:#1a1616;} .ru-res .ru-wn.g{background:var(--tie);}
.ru-res .m{position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:12px;white-space:nowrap;font:var(--fs-m) var(--serif);color:var(--tx-1);
  text-shadow:0 1px 2px #000;font-variant-numeric:tabular-nums lining-nums;}
.ru-res .m.up{color:var(--good);} .ru-res .m.dn{color:var(--tx-2);}
.ru-print{flex:none;width:100%;max-width:780px;text-align:center;font-family:var(--serif);font-size:var(--fs-s);letter-spacing:.28em;color:var(--print);opacity:.62;
  margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:lining-nums tabular-nums;}

/* ============ 注区：3 行 × 12 列 + 0（00）+ 2:1 + 打 / 外围；组合注是压在格线 / 交点上的热区 ============ */
.ru-board{--zw:46px;--rh:26px;--oh:38px;position:relative;flex:none;width:100%;max-width:780px;display:grid;gap:3px;
  grid-template-columns:var(--zw) repeat(12,minmax(0,1fr)) 48px;grid-template-rows:repeat(6,var(--rh)) var(--oh) var(--oh);}
.ru-cell{position:relative;min-width:0;border:1.5px solid rgba(231,201,127,.7);border-radius:3px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;user-select:none;font-family:var(--serif);color:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.35) inset;
  transition:border-color var(--t-fast),box-shadow var(--t-fast);}
.ru-cell .lb{font-size:20px;pointer-events:none;font-variant-numeric:tabular-nums lining-nums;}
.ru-cell:hover{border-color:rgba(231,201,127,1);}
.ru-cell.num.r{background:var(--rou-red);}
.ru-cell.num.b{background:var(--rou-black);}
.ru-cell.zero{background:var(--rou-green);}
.ru-cell.zero .lb{font-size:24px;}
.ru-cell.out .lb{font-size:var(--fs-m);letter-spacing:.12em;color:var(--brass-100);white-space:nowrap;}
.ru-cell.col .lb{letter-spacing:.06em;}
/* 红 / 黑外围注：菱形色块，不写字 */
.ru-cell .dia{width:16px;height:16px;transform:rotate(45deg);border:1px solid #fff;pointer-events:none;}
.ru-cell .dia.r{background:var(--banker);} .ru-cell .dia.b{background:#0a0808;}
/* 悬停：这注覆盖的号码描一圈黄铜线；开奖：中奖号 / 中了的外围格亮印线 */
.ru-cell.cov{border-color:var(--brass-100);box-shadow:0 0 0 2px var(--brass-300) inset;}
.ru-cell.hit{border-color:var(--brass-100);box-shadow:0 0 0 2px var(--brass-100) inset,0 0 16px rgba(255,200,120,.3);}
.ru-cell.won{border-color:var(--brass-100);box-shadow:0 0 0 2px var(--brass-100) inset;}
/* 组合注热区：压在格线 / 交点上，平时看不见，悬停一圈黄铜细线（实线、不发光） */
.ru-spots{position:relative;pointer-events:none;z-index:5;}
.ru-spot{position:absolute;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;pointer-events:auto;cursor:pointer;}
.ru-spot:hover{box-shadow:0 0 0 1.5px var(--brass-300);background:rgba(231,201,127,.14);}
.ru-spot.z{width:14px;height:14px;margin:-7px 0 0 -7px;}
/* 00 桌的零线上挤了 5 个注（00-2-3 / 00-2 / 0-00-2 / 0-2 / 0-1-2）：热区压扁成横条，互不重叠 */
.ru-board.z2 .ru-spot.z{width:22px;height:9px;margin:-4.5px 0 0 -11px;border-radius:3px;}
/* 筹码落点：格子正中 / 热区正中 */
.ru-st{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:6;line-height:0;}
.ru-cell .ru-st{z-index:3;}
.ru-st:empty{display:none;}
.ru-st .chipstack{display:block;}
.ru-st .chipstack.low{opacity:.55;filter:grayscale(.5);}
.ru-amt,.ru-pay{position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:4px;white-space:nowrap;
  font-family:var(--serif);font-size:var(--fs-s);line-height:1;color:var(--brass-100);text-shadow:0 1px 2px #000;font-variant-numeric:tabular-nums lining-nums;}
.ru-amt.low{color:var(--warn);}
/* 外围格押了注：印字压暗，金额做成深底小牌放在筹码上方，不再和 "2nd 12" 之类的印字叠成一串 */
.ru-cell.out.has .lb{opacity:.28;}
.ru-cell.out .ru-amt,.ru-cell[data-k="high"] .ru-amt,.ru-cell.col .ru-amt{left:50%;right:auto;top:auto;bottom:100%;transform:translateX(-50%);margin:0 0 2px;
  background:rgba(10,6,4,.85);padding:2px 4px;border-radius:2px;z-index:8;}
.ru-pay{color:var(--good);background:rgba(10,6,4,.8);padding:2px 4px;border-radius:2px;z-index:8;}
/* 组合注（压线）的赔额：格线上挤，平时只留筹码，悬停再看；直注的赔额放在筹码上方 */
.ru-spot .ru-pay{display:none;}
.ru-spot:hover .ru-pay{display:block;left:50%;top:auto;bottom:100%;transform:translateX(-50%);margin:0 0 3px;}
.ru-cell.num .ru-pay,.ru-cell.zero .ru-pay{left:50%;top:auto;bottom:100%;transform:translateX(-50%);margin:0 0 2px;}
.ru-cell[data-k="high"] .ru-pay,.ru-cell.col .ru-pay{left:auto;right:100%;margin-left:0;margin-right:4px;}
/* 其他玩家的颜色筹码（每个座位一种颜色） */
.ru-np{position:absolute;left:3px;bottom:3px;display:flex;pointer-events:none;z-index:2;}
.ru-cc{--c:#ccc;width:13px;height:13px;border-radius:50%;display:block;
  background:radial-gradient(circle,var(--c) 0 50%,transparent 52%),repeating-conic-gradient(var(--c) 0 36deg,var(--chip-edge) 36deg 54deg);
  box-shadow:0 1px 2px rgba(0,0,0,.75);}
.ru-cc+.ru-cc{margin-left:-4px;}
.ru-cc.s0{--c:#c9588a;} .ru-cc.s1{--c:#4f9fc6;} .ru-cc.s2{--c:#d1b93f;} .ru-cc.s3{--c:#7d5fc0;} .ru-cc.s4{--c:#d27a2e;} .ru-cc.s5{--c:#d9d4c8;}
/* 这桌的客人（#ruSeats）：你的位置（.th-you，底边正中）两边一排写实小头像，右下角压一枚他那色的筹码 */
.ru-seats{position:absolute;left:0;right:0;bottom:12px;height:30px;pointer-events:none;z-index:6;}
.ru-seats .l,.ru-seats .r{position:absolute;top:0;display:flex;gap:14px;}
.ru-seats .l{right:calc(50% + 84px);}
.ru-seats .r{left:calc(50% + 84px);}
.ru-seat{position:relative;pointer-events:auto;}
.ru-seat .pt-seat{--pts:30px;}
.ru-seat .ru-cc{position:absolute;right:-5px;bottom:-3px;width:14px;height:14px;}
/* dolly：荷官压在中奖号上的透明棋子 */
.ru-dolly{position:absolute;right:2px;top:2px;width:16px;height:16px;border-radius:50%;z-index:7;pointer-events:none;
  background:radial-gradient(circle at 35% 30%,#fff 0,#e9edf1 22%,#aab4bf 62%,#5c6671 100%);
  box-shadow:0 2px 4px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.5) inset;}

/* ============ 侧面板一行的缩略：最近 10 个号 ============ */
.tcard .ru-row{display:flex;gap:2px;}
.tcard .ru-row i{width:22px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:2px;font-style:normal;
  font-family:var(--serif);font-size:var(--fs-s);color:#fff;font-variant-numeric:tabular-nums lining-nums;}
.tcard .ru-row i.r{background:var(--banker);} .tcard .ru-row i.b{background:#2a2626;box-shadow:0 0 0 1px #4a4444 inset;} .tcard .ru-row i.g{background:var(--tie);}
.tcard .ru-row i.top{box-shadow:0 0 0 1.5px #fff inset;}

/* ============ 规则弹窗 ============ */
.ru-help-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;}
.ru-help-grid>div{display:flex;flex-direction:column;gap:1px;padding:6px 0;border-bottom:1px solid var(--hairline);line-height:1.4;}
.ru-help-grid b{color:var(--cream-100);font-weight:400;}
.ru-help-grid span{color:var(--brass-100);font-family:var(--serif);font-size:13px;}
.ru-help-grid small{color:var(--cream-500);font-size:11px;opacity:1;}
.ru-help-flow{margin-top:12px;font-size:12.5px;line-height:1.7;color:var(--cream-300);}
.ru-help-flow b{color:var(--brass-300);font-weight:400;}

/* ============ 矮窗口（布局高 < 680 dp）：注区压扁一点 ============ */
@container vp (max-height:680px){
  .ru-board{--rh:22px;--oh:32px;}
  .ru-cell .lb{font-size:17px;}
  .ru-play{padding-bottom:52px;}
  .ru-ringbox{margin-bottom:6px;}
}

/* ============ 竖长窗口（布局高 > 宽，比如 iPad 竖屏 1032×1244；电脑版 16:9 不会命中）============
   转盘按台布高竖直居中，注区却钉在底下，上面空一大片：注区下面也垫一个同样的弹性空白，注区和转盘一起落在中间 */
@container vp (orientation:portrait){
  html:not(.m) .ru-play::after{content:"";flex:1 1 0;min-height:0;}
}

/* ============ 大厅门牌：最近开号（门牌窄的时候只留最近 3 个，别压到"轮盘 R01–R04"） ============ */
@container vp (max-width:1599px){ .puck.w .last i:nth-last-child(n+4){display:none;} }

/* ============ 手机（html.m，不缩放）：竖走势列收起，统计条留着；台面整体缩小 ============ */
html.m .th.ru-th{grid-template-columns:6px minmax(0,1fr) 6px;grid-template-areas:"strip strip strip" ". board ." ". . ." ". felt ." "rail rail rail";--th-board:40px;}
html.m .ru-trendcol{display:none;}
html.m .ru-cloth{zoom:.62;}
html.m .rs-hc{display:none;}