/* ⚠ 手工维护。2026-09-04 v5：牌桌改为「原图打底 + 热区覆盖」——
   背景 = web/assets/ui/table_base.png（用户参考截图经 image-edit 抹除玩家内容 + 本地泛洪补水印的干净底图，1920×883）。
   所有元素按底图像素坐标换算成百分比/ var(--u) 摆放，做到与参考图 1:1。
   版式坐标标定记录：对家卡 x69-77%/y1-12%；顶牌墙 x30-71%/y1-9.5%；左卡 x3.5-13%/y16.5-34%；
   左牌墙 x26.5-31%/y25.5-50%；右卡镜像；中央时钟模块=用户实拍抠图 数字位 x48.6-51.4%/y41.3-44.3%（照片内「15」已抹）；上河 x40-61%/y13-21%；
   下河 x39-60%/y51-61%；左右河竖条 x40-44.5% / x57-61%；放大打牌 x83-90%/y63-77%；水印 hudline x45%/y52% 起（2026-09-05 右移避牌河）、cbar x27.5%/y66%；
   手牌区 x8-77%/y78-99%；我卡 x4-16%/y56-78%。改贴图前先对照。
   横屏基准：--u = min(100vw/750, 100vh/350)，背景拉满 100%/100% 与 --u 体系同帧。 */
:root { --u: min(100vw / 750, 100vh / 350); }
body.table-page { overflow: hidden; }
body.table-page #app { height: 100dvh; }

/* 竖屏提示（浏览器无法强制转屏，引导横屏） */
.rotate-hint { display: none; }
@media (orientation: portrait) {
  .rotate-hint {
    display: flex; position: fixed; inset: 0; z-index: 90;
    flex-direction: column; align-items: center; justify-content: center; gap: 18px;
    background: #06301f; color: #f2d77c; font-size: 18px;
  }
  .rotate-hint .ph { width: 70px; height: 130px; border: 3px solid #f2d77c; border-radius: 12px; position: relative; animation: rot 2s ease-in-out infinite; }
  .rotate-hint .ph::after { content: ''; position: absolute; left: 50%; bottom: 6px; width: 22px; height: 3px; background: #f2d77c; border-radius: 2px; transform: translateX(-50%); }
  @keyframes rot { 0%, 30% { transform: rotate(0); } 70%, 100% { transform: rotate(90deg); } }
}

/* ============ 牌桌 v5 · 底图 1:1 ============ */
.gtable {
  position: relative;
  height: 100dvh;
  box-sizing: border-box;
  background: #0b241a url("../assets/ui/table_base.png?rev=5") no-repeat 50% 50% / 100% 100%;
  color: #fff;
  overflow: hidden;
  font-family: "KaiTi", "STKaiti", "STSong", "SimSun", serif;
}

/* ---------- 顶栏：左上只留返回胶囊（场次/局数胶囊已删 2026-09-04；对家卡靠右） ---------- */
.ghead {
  position: absolute; top: 0; left: 0; right: 0; z-index: 6;
  display: flex; align-items: flex-start; gap: calc(8 * var(--u));
  padding: calc(6 * var(--u)) calc(12 * var(--u));
  font-size: calc(15 * var(--u));
}
.gh-left {
  padding: calc(2 * var(--u)) calc(12 * var(--u));
  background: rgba(0, 0, 0, 0.35);
  border: calc(1 * var(--u)) solid rgba(255, 255, 255, 0.3);
  border-radius: calc(999 * var(--u));
  cursor: pointer;
}
/* 对家卡钉右上（参考图对家头像就在右上 x69-77%） */
.gh-opp-chip { margin-left: auto; }

/* ---------- 玩家信息卡：透明，头像金圈 + 名字 + 金分数胶囊（参考图样式） ---------- */
.chip { display: flex; flex-direction: column; align-items: center; gap: calc(2 * var(--u)); flex-shrink: 0; }
.chip-on .ava { box-shadow: 0 0 calc(10 * var(--u)) rgba(255, 216, 115, 0.95); }
.ava {
  width: calc(40 * var(--u)); height: calc(40 * var(--u));
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, #dff5e6, #2f8f66 75%) center / cover;
  border: calc(2.4 * var(--u)) solid #f4d873;
  box-shadow: 0 calc(2 * var(--u)) calc(5 * var(--u)) rgba(0, 0, 0, 0.5);
  color: #24503a; font-size: calc(18 * var(--u)); font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.ava-sm { width: calc(22 * var(--u)); height: calc(22 * var(--u)); font-size: calc(12 * var(--u)); }
.ava-wind { position: absolute; right: calc(-2 * var(--u)); bottom: calc(-2 * var(--u)); font-style: normal; font-size: calc(11 * var(--u)); background: rgba(0, 0, 0, 0.55); border-radius: calc(4 * var(--u)); padding: 0 calc(2 * var(--u)); color: #fff; }
/* 庄家标：金色「庄」飘带挂头像右上 */
.dz {
  position: absolute; right: calc(-6 * var(--u)); top: calc(-6 * var(--u));
  width: calc(16 * var(--u)); height: calc(16 * var(--u));
  border-radius: 50%;
  background: linear-gradient(180deg, #ffe08a, #e2a71f);
  border: calc(1 * var(--u)) solid #8a5f0e;
  color: #7a1d10; font-size: calc(11 * var(--u)); font-weight: 800; font-style: normal;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.45);
  z-index: 2;
}
/* 2026-09-05 用户令：首行右移一点，与第二行「底分」左缘对齐 */
.hudline .hud1 { padding-left: calc(5 * var(--u)); }
.chip-txt { display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.opp-name { font-size: calc(12 * var(--u)); white-space: nowrap; color: #fff; text-shadow: 0 1px calc(2 * var(--u)) #000; }
.opp-score {
  font-size: calc(12 * var(--u)); font-weight: 800; color: #5a3d00;
  background: linear-gradient(180deg, #ffe08a, #d9a520);
  border: calc(1 * var(--u)) solid #8a5f0e;
  border-radius: calc(999 * var(--u));
  padding: 0 calc(8 * var(--u));
  box-shadow: 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.4);
}
.gh-opp-ava { width: calc(30 * var(--u)) !important; height: calc(30 * var(--u)) !important; }
.gh-opp-chip { flex-direction: row; gap: calc(5 * var(--u)); align-items: center; }
.gh-opp-chip .chip-txt { align-items: flex-start; }

/* ---------- 牌背（参考图：亮绿立体，白高光线 + 深绿底）
   第十五批（2026-09-05 用户红圈三处牌墙）：牌背整体调大一号。
   第十六批：左右墙改【俯视平铺】——用户真机截图指上一版侧墙「像倒了一样、还没和线平行」。
   量测参考图（1396×626 逐像素扫描）：侧墙绿色顶面宽≈21px、白色侧棱在外侧（左墙在左/右墙在右）、
   墙长≈270px（占桌面 ~40%）、轴线倾角 11.6°；底图内框边线拟合 x588@220→x516@560≈11.9° → 统一转 12°。
   顶线 y144 全段水平，顶墙不转。
   第十七批（用户给「别人做的」样图）：侧墙改连续长条——去单牌白描边/单牌投影/大圆角，
   草绿大面+外侧白棱带+牌间细暗缝，整墙统一 drop-shadow；倾角公式不动。
   第十八批（用户令「对家的也改成这个式样」）：顶墙 .back 同款平铺——草绿大面+底缘白棱带+
   牌间细暗竖缝，去白描边/去立砖厚黑底边/去单牌投影，整墙投影挂 .s-top .backs。 ---------- */
.backs { display: flex; }
/* 顶墙（对家）单张牌·第十八批：与侧墙同款俯视平铺——草绿大面、牌缝细暗线（border-right）。
   第十九批：白棱带从下缘（朝牌河）翻到上缘（朝外，与侧墙「白棱在外侧」一致）。
   去白描边/去单牌投影，整墙投影挂 .s-top .backs */
.back {
  width: calc(14.5 * var(--u)); height: calc(11 * var(--u));
  margin: 0;
  background: linear-gradient(180deg, #c4d8bc 0%, #f8fcf3 8%, #ffffff 30%, #7ec45a 36%, #58b548 68%, #347f33 100%);
  border: none;
  border-right: calc(0.55 * var(--u)) solid rgba(10, 48, 24, 0.6);
  border-radius: calc(1.5 * var(--u));
  box-shadow: none;
}
.back-v { flex-direction: column; }
/* 侧墙单张牌（第十七批·照「别人做的」参考图重画）：连续长条观——草绿大面、外侧一条白棱带、
   牌间只留一道细暗缝（border-bottom 发线），去四周白描边/去单牌投影/降圆角；
   整墙一个连续投影挂在 .backs 容器的 drop-shadow 上（上一版每张牌各自投影=「软糖堆」元凶）*/
.back-vert {
  width: calc(15 * var(--u)); height: calc(11.6 * var(--u));
  margin: 0;
  background: linear-gradient(90deg, #c4d8bc 0%, #f8fcf3 10%, #ffffff 36%, #7ec45a 40%, #4fa83f 78%, #347f33 100%);
  border: none;
  border-bottom: calc(0.55 * var(--u)) solid rgba(10, 48, 24, 0.6);
  border-radius: calc(1.5 * var(--u));
  box-shadow: none; /* .back 的白描边/大投影同元素会漏进来，必须显式重置 */
}
/* 右墙镜像：白色侧棱在外侧（右），投影朝桌心 */
.s-right .back-vert { background: linear-gradient(270deg, #c4d8bc 0%, #f8fcf3 10%, #ffffff 36%, #7ec45a 40%, #4fa83f 78%, #347f33 100%); }
.s-top .backs, .s-left .backs, .s-right .backs { filter: drop-shadow(calc(1.4 * var(--u)) calc(0.8 * var(--u)) calc(1.6 * var(--u)) rgba(0, 0, 0, 0.35)); }

/* ---------- 桌面热区（绝对定位，坐标照底图） ---------- */
.felt { position: absolute; inset: 0; z-index: 1; }
/* 顶家：牌背居中 x39.5-60.5%/y2.6%；副露贴牌背左侧横排（第二十七批定版，正下方会撞 .turnbar 提示条，右侧撞顶栏对家卡） */
.s-top { position: absolute; top: calc(2 * var(--u)); left: 50%; transform: translateX(-50%); display: flex; align-items: flex-start; z-index: 2; }
.s-top .melds-side { position: absolute; top: 0; right: calc(100% + 5 * var(--u)); left: auto; transform: none; justify-content: flex-end; max-width: calc(110 * var(--u)); align-content: center; }
/* 左家：卡 x3.5%/y16%。墙倾斜挂 .wallline（第二十六批遗留结构，现只包 backs，
   锚点=牌背列中心，墙身位置与第二十五批一致分毫不动）。
   第三十一批：副露=与墙同角的动态倾斜容器（原点在上锚点），一张接一张沿墙内侧排成一条贴墙的线，见「副露」节终定注释。 */
.s-left { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.s-left > * { pointer-events: auto; }
.s-left .chip { position: absolute; left: 3%; top: 16%; }
.s-left .wallline { position: absolute; left: 25%; top: 24%; transform: rotate(12deg); transform: rotate(atan(0.09803 * 100vw / 100vh)); transform-origin: calc(7.5 * var(--u)) center; }
/* 第十六批关键：底图是「拉满变形」贴图——线在底图上 12.07°（(593,200)→(516,560)），
   显示角随视口纵横比缩放：视口角=atan(tan12.07° × (vw/1920)/(vh/880)) = atan(0.09803×vw/vh)。
   900×405→12.3°、iPhone横屏→12.0°、用户宽屏真机(876×282)→16.9°——固定 12° 在宽屏上必「不平行」。
   atan() Chrome111/Safari15.4+ 支持；旧内核退固定 12°。 */
.s-left .melds-side { position: absolute; left: 29.7%; top: 24%; flex-direction: column; align-items: flex-start; transform: rotate(12deg); transform: rotate(atan(0.09803 * 100vw / 100vh)); transform-origin: 0 0; }
/* 右家镜像 */
.s-right { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.s-right > * { pointer-events: auto; }
.s-right .chip { position: absolute; right: 3%; top: 14%; }
.s-right .wallline { position: absolute; right: 25%; top: 24%; transform: rotate(-12deg); transform: rotate(atan(-0.09803 * 100vw / 100vh)); transform-origin: calc(7.5 * var(--u)) center; }
.s-right .melds-side { position: absolute; right: 29.7%; top: 24%; flex-direction: column; align-items: flex-end; transform: rotate(-12deg); transform: rotate(atan(-0.09803 * 100vw / 100vh)); transform-origin: 100% 0; }

/* 内桌框/竹纹边/木沿已烘进底图，不再画 */
.tablein { position: absolute; inset: 0; }

/* ---------- 副露 ---------- */
.melds { display: flex; gap: calc(4 * var(--u)); align-items: center; }
.melds-side { flex-wrap: wrap; max-width: calc(110 * var(--u)); justify-content: center; align-content: flex-start; }
.melds-mine { flex-wrap: nowrap; max-width: none; align-items: flex-end; }
.mgroup { display: flex; }
.mtile {
  width: calc(17 * var(--u)); height: calc(24 * var(--u));
  margin-left: calc(-4 * var(--u));
  background: linear-gradient(180deg, #ffffff 78%, #e6e4d6 100%);
  border: calc(0.8 * var(--u)) solid #9dbfae;
  border-radius: calc(3 * var(--u));
  position: relative; overflow: hidden; flex-shrink: 0;
}
.mtile:first-child { margin-left: 0; }
/* 第二十三批（2026-09-05 用户参考图：三家碰杠=立体小白牌紧贴牌背旁）：
   只作用上/下/对家 .melds-side——牌缩到 14×20u、去灰描边，厚度用第二十一批河牌同款
   硬绿边 box-shadow（fimg 铺满会盖 border，厚边只能走阴影）。摆位（贴牌背内侧，第六批定版）不动；
   自家 .melds-mine 与结算快照 .ovp-tiles 不在选择器内，保持原样 */
.melds-side .mtile {
  width: calc(14 * var(--u)); height: calc(20 * var(--u));
  margin-left: calc(-2 * var(--u));
  border: none; border-radius: calc(2 * var(--u));
  box-shadow: 0 calc(2.2 * var(--u)) 0 #2f9e63, 0 calc(4 * var(--u)) calc(5 * var(--u)) rgba(0, 0, 0, 0.3);
}
.melds-side .mtile:first-child { margin-left: 0; }
/* 第二十四批（2026-09-05 用户真机红圈令「碰杠一字排开，现在看着太乱」）：
   副露改沿各自牌背方向排成**一条直线**——左右家每组竖排（牌一张压一张向下），
   组与组继续向下顺延；对家单行不换行向左延展（原先 84u/110u 折行堆成方块=「乱」的元凶）。
   摆位起点仍贴牌背内侧（第六批定版）不动。 */
.s-left .melds-side .mgroup, .s-right .melds-side .mgroup { flex-direction: column; }
/* 第二十六批补丁（2026-09-05 用户放大截图「三萬」全歪）：.wallline 把副露连牌面一起转了 17°——
   线贴墙是对的，但牌面字不能跟着斜。每组反向转正（角度同墙、符号相反），
   效果=一张一张竖直的小牌沿斜墙阶梯排下去，字永远正着。 */
.s-left .melds-side .mgroup { transform: rotate(-12deg); transform: rotate(atan(-0.09803 * 100vw / 100vh)); }
.s-right .melds-side .mgroup { transform: rotate(12deg); transform: rotate(atan(0.09803 * 100vw / 100vh)); }
/* 竖排主轴下基础规则的 flex-wrap:wrap 会「换到第二列」（=第三组横着跳出去），必须关 */
.s-left .melds-side, .s-right .melds-side { flex-wrap: nowrap; max-width: none; }
/* 竖排主轴下基础规则的 flex-wrap:wrap 会「换到第二列」（=第三组横着跳出去），必须关 */
.s-left .melds-side, .s-right .melds-side { flex-wrap: nowrap; max-width: none; }
.s-left .mgroup .mtile, .s-right .mgroup .mtile { margin-left: 0; margin-top: calc(-2.5 * var(--u)); }
.s-left .mgroup .mtile:first-child, .s-right .mgroup .mtile:first-child { margin-top: 0; }
.s-top .melds-side { flex-wrap: nowrap; max-width: none; }
/* 第二十四批（2026-09-05 用户真机红圈令「碰杠一字排开，现在看着太乱」）：
   副露改沿各自牌背方向排成**一条直线**——左右家每组竖排（牌一张压一张向下），
   组与组继续向下顺延；对家单行不换行向左延展（原先 84u/110u 折行堆成方块=「乱」的元凶）。
   摆位起点仍贴牌背内侧（第六批定版）不动。 */
.s-left .melds-side .mgroup, .s-right .melds-side .mgroup { flex-direction: column; }
.s-left .mgroup .mtile, .s-right .mgroup .mtile { margin-left: 0; margin-top: calc(-2.5 * var(--u)); }
.s-left .mgroup .mtile:first-child, .s-right .mgroup .mtile:first-child { margin-top: 0; }
.s-top .melds-side { flex-wrap: nowrap; max-width: none; }
/* 第二十三批（2026-09-05 用户参考图：三家碰杠=立体小白牌紧贴牌背旁）：
   只作用上/下/对家 .melds-side——牌缩到 14×20u、去灰描边，厚度用第二十一批河牌同款
   硬绿边 box-shadow（fimg 铺满会盖 border，厚边只能走阴影）。摆位（贴牌背内侧，第六批定版）不动；
   自家 .melds-mine 与结算快照 .ovp-tiles 不在选择器内，保持原样 */
.melds-side .mtile {
  width: calc(14 * var(--u)); height: calc(20 * var(--u));
  margin-left: calc(-2 * var(--u));
  border: none; border-radius: calc(2 * var(--u));
  box-shadow: 0 calc(2.2 * var(--u)) 0 #2f9e63, 0 calc(4 * var(--u)) calc(5 * var(--u)) rgba(0, 0, 0, 0.3);
}
.melds-side .mtile:first-child { margin-left: 0; }

/* ---------- 十字牌河（照底图四方位） ---------- */
.river { position: absolute; display: flex; flex-wrap: nowrap; z-index: 1; }
/* 第二十一批（用户参考图令「打出去的牌要有立体感，一排放6张然后转头」）：
   ①立体感=硬投影当绿色牌身厚度（面图绝对铺满会盖 border，所以用 box-shadow 零模糊下拉）+柔影落地；
   ②一排 6 张=横河 6×17.5u≈105.5u 定宽自动换行，竖河同值定高（column wrap 6 张转下一列）。
   副露/结算快照的 .mtile 不挂 .river，保持旧平面样式不动。 */
.river .mtile {
  width: calc(17 * var(--u)); height: calc(24 * var(--u));
  margin: calc(0.5 * var(--u)) 0 0 calc(0.5 * var(--u));
  box-shadow: 0 calc(3 * var(--u)) 0 #2f9e63, 0 calc(5.5 * var(--u)) calc(6.5 * var(--u)) rgba(0, 0, 0, 0.32);
}
.r-top, .r-bottom { flex-wrap: wrap; width: calc(105.5 * var(--u)); }
.r-top { top: 13%; left: calc(50% - 52.75 * var(--u)); }
.r-bottom { top: 51.5%; left: calc(50% - 52.75 * var(--u)); }
.r-left { left: 40.6%; top: 26.5%; height: calc(105.5 * var(--u)); flex-direction: column; flex-wrap: wrap; align-content: flex-start; }
.r-right { right: 39.6%; top: 26.5%; height: calc(105.5 * var(--u)); flex-direction: column; flex-wrap: wrap; align-content: flex-start; }
.r-left .mtile, .r-right .mtile { width: calc(24 * var(--u)); height: calc(17 * var(--u)); }
.r-left .mtile .fimg, .r-right .mtile .fimg { left: calc(1.5 * var(--u)); top: calc(-3.5 * var(--u)); width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
.r-left .mtile .fimg { transform: rotate(-90deg); }
.r-right .mtile .fimg { transform: rotate(90deg); }

/* ---------- 中央实时倒计时数字（叠在底图时钟模块上） ----------
   2026-09-05：中央模块整块换成用户实拍照片的抠图（239×176 jpg 泛洪抠图缩放贴入，
   旧模块 bbox x864-1054/y319-444 原位覆盖，照片里烘死的「15」已抹，椭圆屏幕留暗底），
   等房态桌面中央什么都不画即干净；对局态只画数字本体，位置=新数字原位 bbox(x938-982/y368-387 @1920x880)。 */
.cclock {
  position: absolute; left: 50%; top: 42.9%;
  transform: translate(-50%, -50%);
  z-index: 2; line-height: 1;
  font-family: "Arial Black", "Microsoft YaHei", sans-serif; font-weight: 800;
  /* 用户令「按图片里面的样子恢复倒计时」：数字照参考图放大——占表盘约一半宽，
     之前 ~2.9vh 在手机上只有 10 来个像素，等于没显示。min 双保险，旧内核退 vh */
  font-size: 5vh;
  font-size: min(5vh, 3.2vw);
  color: #5ff3ff;
  text-shadow: 0 0 calc(6 * var(--u)) rgba(60, 220, 255, 0.9), 0 0 calc(2 * var(--u)) rgba(255, 255, 255, 0.85);
  pointer-events: none;
}
.cclock-hi { color: #ffe08a; text-shadow: 0 0 calc(8 * var(--u)) rgba(255, 200, 60, 0.95), 0 0 2px #301806; }

/* 轮到谁出牌提示（2026-09-05 用户令）：出牌阶段顶部居中胶囊，转盘上方；自己回合金色呼吸高亮 */
.turnbar {
  position: absolute; left: 50%; top: 8.5%; transform: translateX(-50%);
  z-index: 3; pointer-events: none; white-space: nowrap;
  padding: calc(2 * var(--u)) calc(14 * var(--u));
  font-size: calc(14 * var(--u)); font-weight: 700; color: #eafcff;
  background: rgba(6, 26, 40, 0.62);
  border: calc(1 * var(--u)) solid rgba(120, 210, 255, 0.55);
  border-radius: calc(999 * var(--u));
  text-shadow: 0 1px calc(2 * var(--u)) #000;
}
.turnbar-me {
  color: #fff6d8; background: rgba(94, 58, 6, 0.68); border-color: rgba(255, 210, 100, 0.85);
  animation: tbpulse 1.1s ease-in-out infinite;
}
@keyframes tbpulse {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 216, 115, 0); }
  50% { box-shadow: 0 0 calc(12 * var(--u)) rgba(255, 216, 115, 0.85); }
}

/* 左上角翻赖子展示（2026-09-05 用户截图令）：磨砂玻璃面板 = 皮牌（金「皮」角标）+ 赖子牌 + 绿牌墙数标签。
   位置避开左上返回钮(0~8%)/剩牌条 cbar(12%/8~14%)/左家卡(x3~9%·y16%起)，落在其下方桌面左上 x13%·y15.5%。
   仅一赖视图带 skin 字段时由 table.js 渲染，多赖无此字段=不出现。 */
.ltpanel {
  position: absolute; left: 13%; top: 15.5%;
  z-index: 4; display: flex; align-items: center; gap: calc(4 * var(--u));
  padding: calc(4 * var(--u));
  background: rgba(235, 245, 250, 0.14);
  border: calc(1 * var(--u)) solid rgba(255, 255, 255, 0.28);
  border-radius: calc(9 * var(--u));
  box-shadow: inset 0 0 calc(12 * var(--u)) rgba(255, 255, 255, 0.1);
  pointer-events: none;
}
.lt-tile {
  position: relative; flex-shrink: 0;
  width: calc(24 * var(--u)); height: calc(32 * var(--u));
  background: linear-gradient(180deg, #ffffff 78%, #e6e4d6 100%);
  border: calc(0.8 * var(--u)) solid #9dbfae;
  border-radius: calc(3 * var(--u));
  box-shadow: 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.35);
}
.lt-tag {
  position: absolute; left: calc(-4 * var(--u)); top: calc(-5 * var(--u)); z-index: 2;
  width: calc(15 * var(--u)); height: calc(15 * var(--u));
  border-radius: calc(4 * var(--u));
  background: linear-gradient(180deg, #ffe08a, #e2a71f);
  border: calc(1 * var(--u)) solid #8a5f0e;
  color: #7a1d10; font-style: normal; font-size: calc(11 * var(--u)); font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.lt-count {
  margin-left: calc(4 * var(--u)); min-width: calc(26 * var(--u)); height: calc(28 * var(--u));
  padding: 0 calc(3 * var(--u));
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #62d47a, #2f9e40);
  border: calc(1.2 * var(--u)) solid rgba(255, 255, 255, 0.65);
  border-radius: calc(6 * var(--u));
  color: #fff; font-weight: 800; font-size: calc(16 * var(--u));
  text-shadow: 0 1px calc(2 * var(--u)) rgba(0, 0, 0, 0.45);
  box-shadow: 0 calc(2 * var(--u)) calc(5 * var(--u)) rgba(0, 0, 0, 0.4);
}

/* 左上角翻赖子展示（2026-09-05 用户截图令）：磨砂玻璃面板 = 皮牌（金「皮」角标）+ 赖子牌 + 绿牌墙数标签。
   位置避开左上返回钮(0~8%)/剩牌条 cbar(12%/8~14%)/左家卡(x3~9%·y16%起)，落在其下方桌面左上 x13%·y15.5%。
   仅一赖视图带 skin 字段时由 table.js 渲染，多赖无此字段=不出现。 */
.ltpanel {
  position: absolute; left: 13%; top: 15.5%;
  z-index: 4; display: flex; align-items: center; gap: calc(4 * var(--u));
  padding: calc(4 * var(--u));
  background: rgba(235, 245, 250, 0.14);
  border: calc(1 * var(--u)) solid rgba(255, 255, 255, 0.28);
  border-radius: calc(9 * var(--u));
  box-shadow: inset 0 0 calc(12 * var(--u)) rgba(255, 255, 255, 0.1);
  pointer-events: none;
}
.lt-tile {
  position: relative; flex-shrink: 0;
  width: calc(24 * var(--u)); height: calc(32 * var(--u));
  background: linear-gradient(180deg, #ffffff 78%, #e6e4d6 100%);
  border: calc(0.8 * var(--u)) solid #9dbfae;
  border-radius: calc(3 * var(--u));
  box-shadow: 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.35);
}
.lt-tag {
  position: absolute; left: calc(-4 * var(--u)); top: calc(-5 * var(--u)); z-index: 2;
  width: calc(15 * var(--u)); height: calc(15 * var(--u));
  border-radius: calc(4 * var(--u));
  background: linear-gradient(180deg, #ffe08a, #e2a71f);
  border: calc(1 * var(--u)) solid #8a5f0e;
  color: #7a1d10; font-style: normal; font-size: calc(11 * var(--u)); font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.lt-count {
  margin-left: calc(4 * var(--u)); min-width: calc(26 * var(--u)); height: calc(28 * var(--u));
  padding: 0 calc(3 * var(--u));
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #62d47a, #2f9e40);
  border: calc(1.2 * var(--u)) solid rgba(255, 255, 255, 0.65);
  border-radius: calc(6 * var(--u));
  color: #fff; font-weight: 800; font-size: calc(16 * var(--u));
  text-shadow: 0 1px calc(2 * var(--u)) rgba(0, 0, 0, 0.45);
  box-shadow: 0 calc(2 * var(--u)) calc(5 * var(--u)) rgba(0, 0, 0, 0.4);
}

/* 左上角翻赖子展示（2026-09-05 用户截图令）：磨砂玻璃面板 = 皮牌（金「皮」角标）+ 赖子牌 + 绿牌墙数标签。
   位置避开左上返回钮(0~8%)/剩牌条 cbar(12%/8~14%)/左家卡(x3~9%·y16%起)，落在其下方桌面左上 x13%·y15.5%。
   仅一赖视图带 skin 字段时由 table.js 渲染，多赖无此字段=不出现。 */
.ltpanel {
  position: absolute; left: 13%; top: 15.5%;
  z-index: 4; display: flex; align-items: center; gap: calc(4 * var(--u));
  padding: calc(4 * var(--u));
  background: rgba(235, 245, 250, 0.14);
  border: calc(1 * var(--u)) solid rgba(255, 255, 255, 0.28);
  border-radius: calc(9 * var(--u));
  box-shadow: inset 0 0 calc(12 * var(--u)) rgba(255, 255, 255, 0.1);
  pointer-events: none;
}
.lt-tile {
  position: relative; flex-shrink: 0;
  width: calc(24 * var(--u)); height: calc(32 * var(--u));
  background: linear-gradient(180deg, #ffffff 78%, #e6e4d6 100%);
  border: calc(0.8 * var(--u)) solid #9dbfae;
  border-radius: calc(3 * var(--u));
  box-shadow: 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(0, 0, 0, 0.35);
}
.lt-tag {
  position: absolute; left: calc(-4 * var(--u)); top: calc(-5 * var(--u)); z-index: 2;
  width: calc(15 * var(--u)); height: calc(15 * var(--u));
  border-radius: calc(4 * var(--u));
  background: linear-gradient(180deg, #ffe08a, #e2a71f);
  border: calc(1 * var(--u)) solid #8a5f0e;
  color: #7a1d10; font-style: normal; font-size: calc(11 * var(--u)); font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.lt-count {
  margin-left: calc(4 * var(--u)); min-width: calc(26 * var(--u)); height: calc(28 * var(--u));
  padding: 0 calc(3 * var(--u));
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #62d47a, #2f9e40);
  border: calc(1.2 * var(--u)) solid rgba(255, 255, 255, 0.65);
  border-radius: calc(6 * var(--u));
  color: #fff; font-weight: 800; font-size: calc(16 * var(--u));
  text-shadow: 0 1px calc(2 * var(--u)) rgba(0, 0, 0, 0.45);
  box-shadow: 0 calc(2 * var(--u)) calc(5 * var(--u)) rgba(0, 0, 0, 0.4);
}

/* 轮到谁出牌提示（2026-09-05 用户令）：出牌阶段顶部居中胶囊，转盘上方；自己回合金色呼吸高亮 */
.turnbar {
  position: absolute; left: 50%; top: 8.5%; transform: translateX(-50%);
  z-index: 3; pointer-events: none; white-space: nowrap;
  padding: calc(2 * var(--u)) calc(14 * var(--u));
  font-size: calc(14 * var(--u)); font-weight: 700; color: #eafcff;
  background: rgba(6, 26, 40, 0.62);
  border: calc(1 * var(--u)) solid rgba(120, 210, 255, 0.55);
  border-radius: calc(999 * var(--u));
  text-shadow: 0 1px calc(2 * var(--u)) #000;
}
.turnbar-me {
  color: #fff6d8; background: rgba(94, 58, 6, 0.68); border-color: rgba(255, 210, 100, 0.85);
  animation: tbpulse 1.1s ease-in-out infinite;
}
@keyframes tbpulse {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 216, 115, 0); }
  50% { box-shadow: 0 0 calc(12 * var(--u)) rgba(255, 216, 115, 0.85); }
}

/* 轮到谁出牌提示（2026-09-05 用户令）：出牌阶段顶部居中胶囊，转盘上方；自己回合金色呼吸高亮 */
.turnbar {
  position: absolute; left: 50%; top: 8.5%; transform: translateX(-50%);
  z-index: 3; pointer-events: none; white-space: nowrap;
  padding: calc(2 * var(--u)) calc(14 * var(--u));
  font-size: calc(14 * var(--u)); font-weight: 700; color: #eafcff;
  background: rgba(6, 26, 40, 0.62);
  border: calc(1 * var(--u)) solid rgba(120, 210, 255, 0.55);
  border-radius: calc(999 * var(--u));
  text-shadow: 0 1px calc(2 * var(--u)) #000;
}
.turnbar-me {
  color: #fff6d8; background: rgba(94, 58, 6, 0.68); border-color: rgba(255, 210, 100, 0.85);
  animation: tbpulse 1.1s ease-in-out infinite;
}
@keyframes tbpulse {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 216, 115, 0); }
  50% { box-shadow: 0 0 calc(12 * var(--u)) rgba(255, 216, 115, 0.85); }
}

/* 剩牌条 + 桌水印（玩法·场次·底分·封顶） */
.cbar {
  /* 2026-09-05 用户令：整条移到红箭头指向的左上角位置（原左下 27.5%/66%） */
  position: absolute; left: 12%; top: 8%;
  font-size: calc(13 * var(--u)); line-height: 1.7; color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px calc(3 * var(--u)) #000; white-space: nowrap; z-index: 2;
}
.hudline {
  /* 2026-09-05 用户令「贴着线」：竖线往下往左斜（x600@458→x590@505），两行字取中间值 30.8% 同时贴住 */
  position: absolute; left: 30.8%; top: 52%;
  width: auto;
  font-size: calc(15 * var(--u)); font-weight: 700; color: #fff; line-height: 1.55;
  text-shadow: 0 1px calc(3 * var(--u)) #000, 0 0 calc(6 * var(--u)) rgba(0, 0, 0, 0.5);
  z-index: 2;
}
/* 2026-09-05 用户令：首行右移一点，与第二行「底分」左缘对齐 */
.hudline .hud1 { padding-left: calc(5 * var(--u)); }

/* 最近打出的一张：底图右侧放大牌位 x83-90% y63-77%（参考图的「四万」大牌）。
   类名必须用 bl-tile，不能叫 tile —— sim-webtable 按 `class="tile ` 计数手牌。 */
.biglast { position: absolute; left: 82.5%; top: 62%; z-index: 4; transform: rotate(-7deg); pointer-events: none; }
.bl-tile {
  position: relative;
  width: calc(40 * var(--u)); height: calc(56 * var(--u));
  background: linear-gradient(180deg, #ffffff 70%, #f0f1e4 90%, #d8dcc8 100%);
  border: calc(0.8 * var(--u)) solid #8fb8a0;
  border-bottom: calc(8 * var(--u)) solid #2f9e63;
  border-radius: calc(5 * var(--u));
  box-shadow: 0 calc(5 * var(--u)) calc(12 * var(--u)) rgba(0, 0, 0, 0.55);
}

/* 等房面板（waitbox/wb-*）已整删 2026-09-04：用户令桌中央不留任何胶囊，等房态只留无字八角面板盖底图数字 */
/* 2026-09-05 用户令：准备/取消准备按钮放左下（红箭头位，我卡右上方、手牌区上方）；「离开」按钮已删 */
.ready-pos { position: absolute; left: 13%; bottom: 25%; z-index: 5; }
.mywait { position: absolute; right: 2%; bottom: 2%; display: flex; flex-direction: column; gap: calc(7 * var(--u)); z-index: 5; }
.wbtn {
  padding: calc(7 * var(--u)) calc(16 * var(--u));
  border-radius: calc(999 * var(--u));
  text-align: center; font-size: calc(16 * var(--u)); font-weight: 800; white-space: nowrap;
  background: linear-gradient(180deg, #f7d774, #d9a520); color: #4a3400;
  border: calc(2 * var(--u)) solid #8a5f0e;
  box-shadow: 0 calc(3 * var(--u)) calc(6 * var(--u)) rgba(0, 0, 0, 0.4);
  cursor: pointer; user-select: none;
}
.wbtn.off { background: rgba(242, 183, 5, 0.3); color: rgba(74, 52, 0, 0.55); border-color: rgba(138, 95, 14, 0.5); box-shadow: none; }
.wbtn-off { background: rgba(255, 255, 255, 0.16); color: #cfe6d6; border-color: rgba(255, 255, 255, 0.4); box-shadow: none; }
.wbtn-ghost { background: transparent; border: calc(1 * var(--u)) solid rgba(255, 255, 255, 0.45); color: #e8f4ec; box-shadow: none; font-weight: 400; font-size: calc(13 * var(--u)); }
.rdy {
  position: absolute; left: calc(-4 * var(--u)); top: calc(-4 * var(--u));
  width: calc(16 * var(--u)); height: calc(16 * var(--u));
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #9df0c3, #21a05a 75%);
  border: calc(1 * var(--u)) solid #fff;
  color: #06431f; font-size: calc(11 * var(--u)); font-weight: 800; font-style: normal;
  display: flex; align-items: center; justify-content: center;
  z-index: 3;
}

/* ---------- 叫牌圆钮（右侧手牌上方） ---------- */
.act-bar { position: absolute; right: 4%; bottom: 56%; display: flex; gap: calc(10 * var(--u)); z-index: 6; }
.abtn {
  margin: 0; width: calc(58 * var(--u)); height: calc(58 * var(--u)); border-radius: 50%;
  line-height: calc(58 * var(--u)); padding: 0; font-size: calc(28 * var(--u)); font-weight: 800;
  color: #4a2f00;
  background: radial-gradient(circle at 35% 28%, #ffe9a0, #e8b62a 68%, #a8780f);
  border: calc(2 * var(--u)) solid #7a5210;
  box-shadow: 0 calc(5 * var(--u)) calc(9 * var(--u)) rgba(0, 0, 0, 0.45);
  cursor: pointer; user-select: none;
}
.abtn::after { border: none; }
.ab-hu { background: radial-gradient(circle at 35% 28%, #ffd27a, #e04b2e 68%, #8e2416); color: #fff; border-color: #6e1a10; }
.ab-piao { background: radial-gradient(circle at 35% 28%, #b7f5d8, #2fbf7d 68%, #157a4c); color: #fff; border-color: #0d5a37; }
.ab-pass { background: radial-gradient(circle at 35% 28%, #d5dbdb, #8d9a9a 68%, #5d6a6a); color: #22303a; border-color: #46525c; }

/* ---------- 底部：我 ---------- */
.myzone { position: absolute; inset: 0; z-index: 3; }
.chip-me { position: absolute; left: 4%; bottom: 21%; }
.hand-row { position: absolute; left: 7.5%; right: 24%; bottom: 0; display: flex; align-items: flex-end; justify-content: center; }
/* 手牌：白面 + 绿色厚边。第二十批（用户截图令「己方牌的绿色区域朝上，不是朝下」）：
   7u 绿边由下缘翻到上缘（border-top），圆角/面底色渐变随之镜像。尺寸 34×48u */
.tile {
  width: calc(34 * var(--u)); height: calc(48 * var(--u));
  margin-left: calc(-2 * var(--u));
  background: linear-gradient(0deg, #ffffff 70%, #f0f1e4 90%, #d8dcc8 100%);
  border: calc(0.8 * var(--u)) solid #8fb8a0;
  border-top: calc(7 * var(--u)) solid #2f9e63;
  border-radius: calc(3 * var(--u)) calc(3 * var(--u)) calc(5 * var(--u)) calc(5 * var(--u));
  box-shadow: 0 calc(3 * var(--u)) calc(7 * var(--u)) rgba(0, 0, 0, 0.45);
  transition: transform 0.12s;
  flex-shrink: 1;
  position: relative;
}
.tile:first-child { margin-left: 0; }
.tile-draw { margin-left: calc(7 * var(--u)); }
.tile.lift { transform: translateY(calc(-10 * var(--u))); border-color: #f2b705; box-shadow: 0 0 calc(14 * var(--u)) rgba(242, 183, 5, 0.85); z-index: 2; }
/* 赖子角标（第二十批：绿厚边已翻上缘，同步改 border-top） */
.lztile { border-top-color: #14955a; }
/* 赖子牌变色（2026-09-05 用户令）：牌面整体染「赖子金」——手牌/第14张/右下放大位/牌河飘赖/胡牌快照/左上赖子面板共用 .lztile；仅一赖视图挂类，多赖牌面不变 */
.lztile .fimg { filter: sepia(1) saturate(2.6) hue-rotate(-10deg) brightness(0.94); }
.lz {
  position: absolute; right: calc(-3 * var(--u)); top: calc(-5 * var(--u));
  min-width: calc(15 * var(--u)); height: calc(15 * var(--u)); padding: 0 calc(2 * var(--u));
  border-radius: calc(8 * var(--u));
  background: linear-gradient(180deg, #8ff0b8, #1fae63);
  border: calc(1 * var(--u)) solid #0c6a3a;
  color: #a31515; font-size: calc(11 * var(--u)); font-weight: 800; font-style: normal;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 calc(2 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, 0.4);
  z-index: 3;
}
.t-face { height: 100%; position: relative; display: flex; align-items: center; justify-content: center; }
.fimg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.btn-discard {
  position: absolute; right: 6%; bottom: 6%;
  width: calc(56 * var(--u)) !important; height: calc(30 * var(--u)) !important;
  min-width: 0 !important; max-width: calc(56 * var(--u)) !important; box-sizing: border-box;
  padding: 0 !important; font-size: calc(14 * var(--u)) !important; line-height: calc(28 * var(--u)) !important;
  text-align: center;
  background: linear-gradient(180deg, #f7d774, #d9a520); color: #4a3400;
  border-radius: calc(999 * var(--u)); font-weight: 800;
  border: calc(2 * var(--u)) solid #8a5f0e;
  box-shadow: 0 calc(3 * var(--u)) calc(6 * var(--u)) rgba(0, 0, 0, 0.4);
  cursor: pointer; user-select: none; z-index: 5;
}
.btn-discard::after { border: none; }
.btn-discard.btn-off { background: rgba(242, 183, 5, 0.35); color: rgba(74, 52, 0, 0.5); }

/* 我家副露位：我卡右下 */
.melds-mine { position: absolute; left: 13%; bottom: 2%; flex-wrap: wrap; max-width: 40%; align-content: flex-end; z-index: 3; }
.melds-mine .mtile { width: calc(15 * var(--u)); height: calc(21 * var(--u)); margin-left: calc(-5 * var(--u)); }

/* ---------- 结算弹窗 ---------- */
.ov { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.62); display: flex; align-items: center; justify-content: center; z-index: 9; }
.ov-box {
  width: calc(480 * var(--u));
  background: linear-gradient(180deg, #14503a, #0a3323);
  border: calc(4 * var(--u)) solid #d9a520;
  border-radius: calc(22 * var(--u));
  padding: calc(30 * var(--u)) calc(30 * var(--u)) calc(34 * var(--u));
  text-align: center;
  box-shadow: 0 0 calc(40 * var(--u)) rgba(0, 0, 0, 0.6);
}
.ov-title { font-size: calc(48 * var(--u)); font-weight: 800; color: #f2d77c; margin-bottom: calc(14 * var(--u)); }
.ov-item { font-size: calc(24 * var(--u)); color: #d9ead9; line-height: 1.7; }
.ov-sum { margin-top: calc(10 * var(--u)); font-size: calc(26 * var(--u)); font-weight: 700; color: #fff; }
.ov-btn {
  margin: calc(22 * var(--u)) auto 0; width: calc(240 * var(--u));
  background: linear-gradient(180deg, #f7d774, #d9a520); color: #4a3400;
  border-radius: calc(999 * var(--u)); font-size: calc(30 * var(--u)); font-weight: 800;
  border: calc(2 * var(--u)) solid #8a5f0e;
}
img.fimg { display: block; }

/* ---------- 结算面板（2026-09-05 用户截图版式：顶部四家变化条 + 赢家行〔名字/总分大字/胡牌手牌/【X家】捉铳·胡分飘分杠分〕）
   仅一赖新引擎启用（v.result.cash 存在时）；多赖/推倒胡无 cash 字段，照用上面的旧文字弹窗
   同日用户令「计算窗口弄小点，点都点不到」：全块缩字号/缩内距，按钮并排一行，max-height 兜底（多赢家可滚） ---------- */
.ovp {
  text-align: left; background: linear-gradient(180deg, #eef6ff, #cfe0f4); border-color: #4d7fb8;
  width: calc(460 * var(--u)); box-sizing: border-box;
  padding: calc(10 * var(--u)) calc(14 * var(--u)) calc(12 * var(--u));
  max-height: calc(336 * var(--u)); display: flex; flex-direction: column; overflow: hidden;
}
/* 正文（标题/四家条/赢家行）超高时内部滚，按钮行钉底不被卷走 */
.ovp-body { flex: 0 1 auto; min-height: 0; overflow-y: auto; }
.ovp-title { font-size: calc(22 * var(--u)); font-weight: 800; color: #23537f; text-align: center; margin-bottom: calc(6 * var(--u)); }
.ovp-strip { display: flex; gap: calc(5 * var(--u)); margin-bottom: calc(6 * var(--u)); }
.ovp-card { flex: 1; min-width: 0; background: #fff; border: calc(1.5 * var(--u)) solid #b9d2ea; border-radius: calc(6 * var(--u)); padding: calc(4 * var(--u)) calc(5 * var(--u)); }
.ovp-card.ovp-win { background: linear-gradient(90deg, #ffe0ad, #ffb95e); border-color: #e08a1e; }
.ovp-nm { font-size: calc(13 * var(--u)); color: #33506e; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ovp-dz { display: inline-block; font-size: calc(11 * var(--u)); color: #7a4c00; background: #f7d774; border-radius: calc(4 * var(--u)); padding: 0 calc(3 * var(--u)); margin-left: calc(2 * var(--u)); }
.ovp-dl { font-size: calc(18 * var(--u)); font-weight: 800; color: #8195ad; margin-top: calc(1 * var(--u)); }
.ovp-dl.pos { color: #c8102e; }
.ovp-dl.neg { color: #2b3a55; }
.ovp-row { background: rgba(255, 255, 255, 0.8); border-radius: calc(8 * var(--u)); padding: calc(5 * var(--u)) calc(9 * var(--u)); margin-bottom: calc(5 * var(--u)); }
.ovp-who { font-size: calc(17 * var(--u)); font-weight: 800; color: #23507f; }
.ovp-rel { font-size: calc(13 * var(--u)); font-weight: 400; color: #7a95b5; margin: 0 calc(3 * var(--u)); }
.ovp-chip { display: inline-block; font-size: calc(12 * var(--u)); color: #fff; background: #58a0e8; border-radius: calc(999 * var(--u)); padding: 0 calc(7 * var(--u)); margin-left: calc(4 * var(--u)); vertical-align: middle; }
.ovp-sum { font-size: calc(26 * var(--u)); font-weight: 900; font-style: italic; color: #2f7fd6; margin: calc(1 * var(--u)) 0 calc(2 * var(--u)); }
.ovp-tiles { display: flex; gap: calc(2 * var(--u)); flex-wrap: wrap; margin: calc(3 * var(--u)) 0; }
.ovp-tiles .mtile { width: calc(15 * var(--u)); height: calc(21 * var(--u)); margin-left: 0; }
.ovp-line { font-size: calc(14 * var(--u)); color: #44607f; }
.ovp-draw { text-align: center; font-size: calc(20 * var(--u)); font-weight: 700; color: #44607f; padding: calc(6 * var(--u)) 0; }
/* 其余三家进出账小卡：双列排布省高度（2026-09-05 用户令：面板要显示当事人自己的进账/出账，不只赢家） */
.ovp-los { display: flex; flex-wrap: wrap; gap: calc(4 * var(--u)); }
.ovp-lo { flex: 1 1 46%; box-sizing: border-box; margin-bottom: 0; padding: calc(4 * var(--u)) calc(7 * var(--u)); background: rgba(255, 255, 255, 0.66); border-radius: calc(8 * var(--u)); }
.ovp-lo .ovp-who { font-size: calc(13 * var(--u)); font-weight: 700; }
.ovp-lo .ovp-line { font-size: calc(12 * var(--u)); }
/* 其余三家进出账小卡：双列排布省高度（2026-09-05 用户令：面板要显示当事人自己的进账/出账，不只赢家） */
.ovp-los { display: flex; flex-wrap: wrap; gap: calc(4 * var(--u)); }
.ovp-lo { flex: 1 1 46%; box-sizing: border-box; margin-bottom: 0; padding: calc(4 * var(--u)) calc(7 * var(--u)); background: rgba(255, 255, 255, 0.66); border-radius: calc(8 * var(--u)); }
.ovp-lo .ovp-who { font-size: calc(13 * var(--u)); font-weight: 700; }
.ovp-lo .ovp-line { font-size: calc(12 * var(--u)); }
/* 「再来一局 / 退出」并排一行居中（原竖排两钮把面板顶出屏，2026-09-05 用户令） */
.ovp-btns { display: flex; justify-content: center; gap: calc(12 * var(--u)); margin-top: calc(4 * var(--u)); }
.ovp .ov-btn { margin: 0; width: calc(150 * var(--u)); font-size: calc(21 * var(--u)); background: linear-gradient(180deg, #8fd9ff, #38a3e8); color: #083b63; border-color: #1e79b8; }
.ovp .ov-btn.ov-quit { background: linear-gradient(180deg, #dfe7ef, #aebfd2); color: #33506e; border-color: #7e93aa; }
/* 结算面板「退出」次按钮（2026-09-05 用户令）：与再来一局并排，灰蓝弱化防误点 */
.ovp .ov-btn + .ov-quit { margin-top: calc(8 * var(--u)); background: linear-gradient(180deg, #dfe7ef, #aebfd2); color: #33506e; border-color: #7e93aa; font-size: calc(24 * var(--u)); }

/* ---------- 结算面板（2026-09-05 用户截图版式：顶部四家变化条 + 赢家行〔名字/总分大字/胡牌手牌/捉铳+胡分飘分杠分〕）
   仅一赖新引擎启用（v.result.cash 存在），多赖/推倒胡仍用上面的旧文字弹窗 ---------- */
.ovp { text-align: left; background: linear-gradient(180deg, #eef6ff, #cfe0f4); border-color: #4d7fb8; }
.ovp-title { font-size: calc(34 * var(--u)); font-weight: 800; color: #23537f; text-align: center; margin-bottom: calc(12 * var(--u)); }
.ovp-strip { display: flex; gap: calc(8 * var(--u)); margin-bottom: calc(12 * var(--u)); }
.ovp-card { flex: 1; min-width: 0; background: #fff; border: calc(1.5 * var(--u)) solid #b9d2ea; border-radius: calc(8 * var(--u)); padding: calc(8 * var(--u)) calc(6 * var(--u)); }
.ovp-card.ovp-win { background: linear-gradient(90deg, #ffe0ad, #ffb95e); border-color: #e08a1e; }
.ovp-nm { font-size: calc(17 * var(--u)); color: #33506e; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ovp-dz { display: inline-block; font-size: calc(13 * var(--u)); color: #7a4c00; background: #f7d774; border-radius: calc(4 * var(--u)); padding: 0 calc(4 * var(--u)); margin-left: calc(3 * var(--u)); }
.ovp-dl { font-size: calc(24 * var(--u)); font-weight: 800; color: #8195ad; margin-top: calc(2 * var(--u)); }
.ovp-dl.pos { color: #c8102e; }
.ovp-dl.neg { color: #2b3a55; }
.ovp-row { background: rgba(255, 255, 255, 0.8); border-radius: calc(10 * var(--u)); padding: calc(10 * var(--u)) calc(12 * var(--u)); margin-bottom: calc(10 * var(--u)); }
.ovp-who { font-size: calc(22 * var(--u)); font-weight: 800; color: #23507f; }
.ovp-rel { font-size: calc(16 * var(--u)); font-weight: 400; color: #7a95b5; margin: 0 calc(4 * var(--u)); }
.ovp-chip { display: inline-block; font-size: calc(15 * var(--u)); color: #fff; background: #58a0e8; border-radius: calc(999 * var(--u)); padding: calc(1 * var(--u)) calc(9 * var(--u)); margin-left: calc(5 * var(--u)); vertical-align: middle; }
.ovp-sum { font-size: calc(40 * var(--u)); font-weight: 900; font-style: italic; color: #2f7fd6; margin: calc(2 * var(--u)) 0 calc(4 * var(--u)); }
.ovp-tiles { display: flex; gap: calc(3 * var(--u)); flex-wrap: wrap; margin: calc(6 * var(--u)) 0; }
.ovp-tiles .mtile { width: calc(20 * var(--u)); height: calc(28 * var(--u)); margin-left: 0; }
.ovp-line { font-size: calc(18 * var(--u)); color: #44607f; }
.ovp-draw { text-align: center; font-size: calc(24 * var(--u)); font-weight: 700; color: #44607f; padding: calc(10 * var(--u)) 0; }